/* AXS INTIMFLEX v2, the app (ilona/SPEC.md section 6). Every class starts with "ax-", every token "--ax-", everything
   is scoped to .ax-root except the icon (.ax-icon, a self-contained SVG the page may draw too: IlonaApp.iconHTML).
   The host sets --ax-w / --ax-h on the mount (393 x 852, or 393 x 780: .ax-short). The page declares the fonts:
   Cormorant 300 / 400, normal and italic (titles, numbers, her words) and Archivo 400 to 700 (text, UI, buttons).
   Her site at night (go.axsintimflex.com): vin #0b0710, plum cards #2b1240 radius 14, petal text, one rose #f0509f
   (buttons, the line, rings, bars, one italic word per title), rose-soft #ff9bcb for glows only.
   One title, one media, one action per screen; 16 px of air at least between two elements.
   Motion: transform, opacity and stroke-dashoffset only. */

.ax-icon { display: block; overflow: visible; }

/* ------------------------------------------------------------------ root */
.ax-root {
  --ax-W: var(--ax-w, 393px); --ax-H: var(--ax-h, 852px);
  --ax-vin: #0b0710; --ax-plum: #2b1240; --ax-plum2: #1a1122; --ax-petal: #f7f4fa; --ax-dim: rgba(247, 244, 250, .62);
  --ax-faint: rgba(247, 244, 250, .4); --ax-line: rgba(246, 231, 228, .14); --ax-rose: #f0509f; --ax-soft: #ff9bcb;
  --ax-card: rgba(43, 18, 64, .7); --ax-edge: rgba(240, 80, 159, .35); --ax-track: rgba(247, 244, 250, .13);
  --ax-serif: "Cormorant", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --ax-sans: "Archivo", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ax-halo: 0 0 0 8px rgba(240, 80, 159, .26), 0 14px 53px -10px rgba(240, 80, 159, .7);
  --ax-out: cubic-bezier(.22, 1, .36, 1);
  --ax-hl: 1px;
  /* the 1 or 2 card: her split clip at the content width, the emoji band above it (reels/split frame) */
  --ax-cw: calc(var(--ax-W) - 48px); --ax-band: calc(var(--ax-cw) * .29815); --ax-clean: calc(var(--ax-cw) * .94444);
  /* the vertical rhythm (852; .ax-short below for 780) */
  --ax-top: 66px; --ax-iconY: 300px; --ax-ooTop: 150px; --ax-feY: 290px; --ax-weGo: 50px; --ax-waCtl: 92px; --ax-waPos: 72%;
  --ax-bot: 107px; --ax-g: 28px; --ax-thW: 128px; --ax-dayR: 116px; --ax-lnTh: calc(var(--ax-cw) * .5625); --ax-lrH: 36px;
  --ax-tipP: 16px; --ax-meR: 80px; --ax-lvImg: 196px; --ax-lsG: 20px;
  position: relative; display: block; overflow: hidden; overflow: clip;
  width: var(--ax-W); height: var(--ax-H);
  background: var(--ax-vin); color: var(--ax-petal);
  font: 400 15px/1.4 var(--ax-sans); letter-spacing: 0; text-align: left;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis: none; font-kerning: normal;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  touch-action: pan-y; isolation: isolate; contain: layout paint style;
}
.ax-root.ax-short {
  --ax-top: 60px; --ax-iconY: 262px; --ax-ooTop: 104px; --ax-feY: 252px; --ax-weGo: 42px; --ax-waCtl: 70px; --ax-waPos: 36%;
  --ax-bot: 99px; --ax-g: 22px; --ax-thW: 116px; --ax-dayR: 104px; --ax-lnTh: calc(var(--ax-cw) * .5); --ax-lrH: 31px;
  --ax-tipP: 13px; --ax-meR: 72px; --ax-lvImg: 150px; --ax-lsG: 16px;
}
@media (min-resolution: 2dppx) { .ax-root { --ax-hl: .5px; } }
.ax-root :where(*), .ax-root :where(*)::before, .ax-root :where(*)::after { box-sizing: border-box; touch-action: pan-y; }
.ax-root :where(button) { -webkit-appearance: none; appearance: none; font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; letter-spacing: inherit; -webkit-tap-highlight-color: transparent; }
.ax-root :where(h1, h2, h3, p, ul, ol, li) { margin: 0; padding: 0; font: inherit; list-style: none; }
.ax-root :where(img, video, svg, canvas) { display: block; max-width: none; }
.ax-root :where(img) { -webkit-user-drag: none; }
.ax-root :where(b, strong) { font-weight: inherit; }
.ax-root :where(i, em) { font-style: normal; }
.ax-story { pointer-events: none; }
.ax-root :focus { outline: none; }
.ax-root :focus-visible { outline: 2px solid var(--ax-rose); outline-offset: 3px; border-radius: 16px; }
.ax-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------------ the type roles (SPEC 3, a-*) */
.ax-big { font: 300 40px/1 var(--ax-serif); letter-spacing: -.01em; color: var(--ax-petal); }
.ax-h { font: 400 28px/1.1 var(--ax-serif); letter-spacing: -.01em; color: var(--ax-petal); }
.ax-num { font: 300 64px/.95 var(--ax-serif); letter-spacing: -.01em; color: var(--ax-petal); font-variant-numeric: lining-nums; }
.ax-over { font: 600 11px/1.2 var(--ax-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ax-rose); }
.ax-body { font: 400 15px/1.4 var(--ax-sans); color: var(--ax-petal); }
.ax-chip { font: 500 13px/1.3 var(--ax-sans); color: var(--ax-petal); }
.ax-btn__t { font: 700 13px/1 var(--ax-sans); letter-spacing: .14em; text-transform: uppercase; }
/* one word per title in rose italic, as on her site */
.ax-it { font-style: italic; color: var(--ax-rose); }
.ax-ft { color: var(--ax-faint); }
.ax-nw { white-space: nowrap; }

/* ------------------------------------------------------------------ glass, layers, chrome */
.ax-glass { position: absolute; inset: 0; overflow: hidden; background: var(--ax-vin); }
.ax-layer { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: var(--ax-vin); contain: layout style size; }
.ax-layer:not(.is-on):not(.is-leaving) { opacity: 0 !important; visibility: hidden; pointer-events: none; }
.ax-layer.is-moving { box-shadow: 0 -18px 40px -12px rgba(0, 0, 0, .8); border-radius: 30px 30px 0 0; }
.ax-scr { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: stretch; padding: var(--ax-top) 24px 0; }
/* the tab screens end above the tab bar (83 px) */
.ax-to, .ax-pg, .ax-ln, .ax-me { padding-bottom: var(--ax-bot); }
.ax-status { position: absolute; left: 0; right: 0; top: 0; height: 54px; z-index: 20; pointer-events: none; color: var(--ax-petal); }
.ax-status__t { position: absolute; left: 0; width: 140px; top: 18px; text-align: center; font: 600 17px/1 var(--ax-sans); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ax-status__r { position: absolute; right: 26px; top: 20px; display: flex; align-items: center; gap: 6px; }
.ax-homeind { position: absolute; left: 50%; bottom: 8px; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; background: rgba(247, 244, 250, .9); z-index: 20; pointer-events: none; }
.ax-full .ax-status, .ax-full .ax-homeind { display: none; }
.ax-tabbar { position: absolute; left: 0; right: 0; bottom: 0; height: 83px; z-index: 9; display: flex; padding: 0 4px 34px; background: rgba(11, 7, 16, .94); box-shadow: inset 0 var(--ax-hl) 0 var(--ax-line); }
.ax-tab { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; padding-top: 8px; color: var(--ax-faint); transition: color .2s linear; }
.ax-tab__ic { display: block; width: 24px; height: 24px; }
.ax-tab__ic svg { width: 24px; height: 24px; }
.ax-tab__l { font: 500 10.5px/13px var(--ax-sans); letter-spacing: .02em; white-space: nowrap; }
.ax-tab.is-on { color: var(--ax-rose); }
.ax-story .ax-tab { transition: none; }
.ax-touch { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; z-index: 21; pointer-events: none; opacity: 0; background: rgba(247, 244, 250, .22); box-shadow: 0 0 0 1.5px rgba(247, 244, 250, .95), 0 6px 18px rgba(0, 0, 0, .5); }
.ax-ripple { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; z-index: 21; pointer-events: none; opacity: 0; box-shadow: 0 0 0 1.5px rgba(247, 244, 250, .6); }

/* ------------------------------------------------------------------ shared parts */
.ax-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ax-vs { position: relative; display: block; overflow: hidden; background: var(--ax-plum2); }
.ax-vs__p, .ax-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ax-video { opacity: 0; transition: opacity .2s linear; pointer-events: none; }
.ax-vs.is-playing .ax-video { opacity: 1; }
/* the rose pill of her site: white caps, the halo */
.ax-btn { position: relative; display: grid; place-items: center; flex: none; width: 100%; height: 52px; border-radius: 26px; background: var(--ax-rose); color: #ffffff; box-shadow: var(--ax-halo); transition: transform .16s var(--ax-out); }
.ax-btn__t { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; padding-top: 1px; }
.ax-btn.is-press, .ax-live .ax-btn:active { transform: scale(.98); }
.ax-story .ax-btn { transition: none; }
/* a two-state pill: Mark as done / Done, Join the club / You're in */
.ax-b2 { transition: transform .16s var(--ax-out), background-color .25s linear, box-shadow .25s linear, color .25s linear; }
.ax-b2__b { opacity: 0; visibility: hidden; }
.ax-b2__b svg { width: 16px; height: 16px; }
.ax-b2.is-on { background: var(--ax-plum); color: var(--ax-rose); box-shadow: inset 0 0 0 1.5px var(--ax-rose); }
.ax-b2.is-on .ax-b2__a { opacity: 0; visibility: hidden; }
.ax-b2.is-on .ax-b2__b { opacity: 1; visibility: inherit; }
.ax-ib { position: absolute; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--ax-petal); background: rgba(11, 7, 16, .52); box-shadow: inset 0 0 0 1px rgba(247, 244, 250, .16); z-index: 5; }
.ax-ib svg { width: 18px; height: 18px; }
/* a ring of parts (the day, the week of a section), a timer ring */
.ax-ring { display: block; overflow: visible; }
.ax-ring__b { fill: none; stroke: var(--ax-track); stroke-width: 5; stroke-linecap: round; }
.ax-ring__s { fill: none; stroke: var(--ax-rose); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; }
.ax-arc { display: block; overflow: visible; }
.ax-arc__b { fill: none; stroke: var(--ax-track); }
.ax-arc__s { fill: none; stroke: var(--ax-rose); stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
/* our marks: a rose tick, a lock */
.ax-pt__ck, .ax-lr.is-done .ax-lr__i { color: var(--ax-rose); }
.ax-pt__ck svg, .ax-lr__i svg { width: 16px; height: 16px; }

/* ------------------------------------------------------------------ the icon (splash and welcome share it) */
.ax-brand { position: absolute; left: 50%; top: var(--ax-iconY); z-index: 8; width: 104px; height: 104px; margin-left: -52px; pointer-events: none; }
.ax-brand .ax-icon { position: relative; width: 104px; height: 104px; border-radius: 23.26px; box-shadow: 0 26px 44px -22px rgba(0, 0, 0, .9); }
.ax-brand__glow { position: absolute; left: 50%; top: 50%; width: 460px; height: 460px; margin: -230px 0 0 -230px; border-radius: 50%; background: radial-gradient(circle, rgba(240, 80, 159, .16) 0%, rgba(124, 58, 237, .08) 38%, rgba(0, 0, 0, 0) 70%); opacity: .35; }
.ax-brand__halo { position: absolute; inset: 0; border-radius: 23.26px; box-shadow: var(--ax-halo); opacity: 0; }
.ax-brand__edge { position: absolute; inset: 0; border-radius: 23.26px; box-shadow: inset 0 0 0 1.5px rgba(240, 80, 159, .9), inset 0 0 18px rgba(240, 80, 159, .3); opacity: 0; }

/* ------------------------------------------------------------------ splash */
.ax-sp { position: absolute; inset: 0; }
.ax-sp__wm { position: absolute; left: 12px; right: 12px; top: calc(var(--ax-iconY) + 136px); height: 50px; overflow: hidden; text-align: center; }
.ax-sp__wf { display: inline-block; padding-top: 5px; white-space: nowrap; }
.ax-sp__by { position: absolute; left: 24px; right: 24px; top: calc(var(--ax-iconY) + 196px); text-align: center; color: var(--ax-dim); }

/* ------------------------------------------------------------------ welcome (her line, her question, the 3 chips) */
.ax-we { padding: 0; }
.ax-we__glow { position: absolute; left: 0; right: 0; top: 0; height: 70%; background: radial-gradient(120% 60% at 50% 0, rgba(240, 80, 159, .14), rgba(0, 0, 0, 0) 60%); opacity: 0; pointer-events: none; }
.ax-we__h { position: absolute; left: 20px; right: 20px; top: calc(var(--ax-iconY) + 128px); text-align: center; }
.ax-we__q { position: absolute; left: 24px; right: 24px; top: calc(var(--ax-iconY) + 206px); text-align: center; color: var(--ax-dim); }
.ax-we__chips { position: absolute; left: 0; right: 0; top: calc(var(--ax-iconY) + 251px); display: flex; justify-content: center; gap: 16px; }
.ax-wc { flex: none; height: 40px; padding: 1px 18px 0; border-radius: 20px; background: var(--ax-card); box-shadow: inset 0 0 0 1px var(--ax-edge); font: 500 13px/1 var(--ax-sans); color: var(--ax-petal); white-space: nowrap; transition: transform .16s var(--ax-out), background-color .2s linear, box-shadow .2s linear; }
.ax-wc.is-on { background: var(--ax-rose); color: #ffffff; box-shadow: 0 10px 28px -10px rgba(240, 80, 159, .85); }
.ax-wc.is-press, .ax-live .ax-wc:active { transform: scale(.96); }
.ax-story .ax-wc { transition: none; }
.ax-we__go { position: absolute; left: 24px; bottom: var(--ax-weGo); width: auto; right: 24px; }

/* ------------------------------------------------------------------ today (Day 12, the week, the day ring, 3 cards) */
.ax-to__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex: none; }
.ax-to__l { min-width: 0; }
.ax-to__h { padding-top: 2px; }
.ax-to__c { margin-top: 10px; color: var(--ax-dim); }
.ax-to__wk { display: flex; gap: 10px; margin-top: 16px; }
.ax-wd { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--ax-track); }
.ax-wd.is-done { background: var(--ax-rose); }
.ax-wd.is-now { background: none; box-shadow: inset 0 0 0 1.5px var(--ax-rose), 0 0 10px rgba(240, 80, 159, .55); }
.ax-to__rg { position: relative; flex: none; width: var(--ax-dayR); height: var(--ax-dayR); }
.ax-to__ring { width: 100%; height: 100%; }
.ax-to__ring .ax-ring__b, .ax-to__ring .ax-ring__s { stroke-width: 4.4; }
.ax-to__rg.is-full .ax-to__ring { filter: drop-shadow(0 0 7px rgba(240, 80, 159, .6)); }
.ax-to__n { position: absolute; inset: 0; display: grid; place-items: center; padding-top: 1px; color: var(--ax-dim); text-align: center; white-space: nowrap; }
.ax-to__v { color: var(--ax-petal); }
.ax-to__list { display: flex; flex-direction: column; gap: 16px; margin-top: var(--ax-g); flex: none; }
.ax-to__ft { margin-top: auto; padding-top: 16px; flex: none; }
.ax-tc { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border-radius: 14px; background: var(--ax-card); box-shadow: inset 0 0 0 1px var(--ax-line); text-align: left; transition: transform .16s var(--ax-out); }
.ax-live .ax-tc:active { transform: scale(.985); }
.ax-tc__th { position: relative; display: block; flex: none; width: var(--ax-thW); height: calc(var(--ax-thW) * .5625); border-radius: 10px; overflow: hidden; background: var(--ax-plum2); }
.ax-tc__tx { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.ax-tc__t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ax-tc__m { color: var(--ax-dim); }
/* the state of a card: to do (a rose play mark) or done (a rose disc, a white tick) */
.ax-ok { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ax-edge); color: var(--ax-rose); transition: background-color .25s linear, box-shadow .25s linear; }
.ax-ok i { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity .2s linear; }
.ax-ok__go svg { width: 12px; height: 12px; margin-left: 2px; }
.ax-ok__ck { opacity: 0; color: #ffffff; }
.ax-ok__ck svg { width: 15px; height: 15px; }
.ax-tc.is-done .ax-ok { background: var(--ax-rose); box-shadow: 0 6px 16px -6px rgba(240, 80, 159, .8); }
.ax-tc.is-done .ax-ok__go { opacity: 0; }
.ax-tc.is-done .ax-ok__ck { opacity: 1; }
.ax-story .ax-ok, .ax-story .ax-ok i { transition: none; }

/* ------------------------------------------------------------------ pelvic, mobility (the week bar, 4 sessions, Start) */
.ax-pg__h { margin-top: 8px; flex: none; }
.ax-wb { display: flex; gap: 6px; height: 4px; margin-top: 16px; flex: none; }
.ax-wb__s { position: relative; display: block; flex: 1; border-radius: 2px; overflow: hidden; background: var(--ax-track); }
.ax-wb__f { position: absolute; inset: 0; background: var(--ax-rose); transform: scaleX(0); transform-origin: 0 50%; }
.ax-pg__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; margin-top: 24px; flex: none; }
.ax-pt { min-width: 0; }
.ax-pt__w { position: relative; display: block; }
.ax-pt__th { position: relative; display: block; height: calc((var(--ax-cw) - 16px) * .28125); border-radius: 12px; overflow: hidden; background: linear-gradient(150deg, var(--ax-plum), var(--ax-plum2)); }
.ax-pt__th::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); pointer-events: none; }
.ax-pt__n { position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 4px; font: 300 40px/1 var(--ax-serif); color: var(--ax-rose); }
.ax-pt__ring { position: absolute; inset: 0; border-radius: 12px; box-shadow: 0 0 0 2px var(--ax-rose), 0 12px 30px -12px rgba(240, 80, 159, .8); opacity: 0; pointer-events: none; }
.ax-pt.is-lock .ax-pt__th { opacity: .5; }
.ax-pt.is-lock .ax-pt__n { color: var(--ax-faint); }
.ax-pt__k { display: flex; align-items: center; gap: 8px; height: 16px; margin-top: 10px; }
.ax-pt__s { flex: 1; min-width: 0; font: 600 11px/1.2 var(--ax-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ax-dim); white-space: nowrap; }
.ax-pt__now { font: 600 11px/1.2 var(--ax-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ax-rose); opacity: 0; }
.ax-pt__ck, .ax-pt__lk { flex: none; display: block; width: 16px; height: 16px; }
.ax-pt__ck { opacity: 0; }
.ax-pt__lk { color: var(--ax-faint); }
.ax-pt__lk svg { width: 14px; height: 14px; margin: 1px; }
.ax-pt__t { margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ax-pt.is-lock .ax-pt__t { color: var(--ax-dim); }
.ax-pg__f { margin-top: auto; padding-top: 16px; text-align: center; color: var(--ax-dim); flex: none; }
.ax-pg__go { margin-top: auto; }
.ax-pg__f + .ax-pg__go { margin-top: 16px; }

/* ------------------------------------------------------------------ wave (her clip in the top 60%, the timer) */
.ax-wa { position: absolute; inset: 0; }
.ax-wa__media { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--ax-H) * .6); overflow: hidden; background: var(--ax-plum2); }
.ax-wa__vs { position: absolute; inset: 0; }
/* anchored to the floor and scaled 1.1: the top of her wall (a neon sign) stays out of the frame */
.ax-wa__vs .ax-vs__p, .ax-wa__vs .ax-video { object-position: 50% var(--ax-waPos); transform: scale(1.1); transform-origin: 50% 100%; }
.ax-wa__veil { position: absolute; left: 0; right: 0; top: 0; z-index: 1; height: calc(var(--ax-H) * .6 + 2px); pointer-events: none; background: linear-gradient(180deg, rgba(11, 7, 16, .62) 0, rgba(11, 7, 16, 0) 128px, rgba(11, 7, 16, 0) 62%, rgba(11, 7, 16, .7) 86%, var(--ax-vin) calc(100% - 3px)); }
.ax-wa__x { right: 18px; top: 56px; }
.ax-wa__info { position: absolute; left: 24px; right: 24px; top: calc(var(--ax-H) * .6 + 30px); }
.ax-wa__h { margin-top: 8px; }
.ax-wa__ctl { position: absolute; left: 24px; right: 24px; bottom: var(--ax-waCtl); display: flex; align-items: center; justify-content: space-between; }
.ax-wa__t { font-variant-numeric: tabular-nums; padding-top: 4px; }
.ax-wa__next { position: relative; display: block; flex: none; width: 84px; height: 84px; border-radius: 50%; color: #ffffff; }
.ax-wa__ring { position: absolute; inset: 0; width: 84px; height: 84px; }
.ax-wa__ring .ax-arc__b, .ax-wa__ring .ax-arc__s { stroke-width: 3; }
.ax-wa__nb { position: absolute; inset: 11px; display: grid; place-items: center; border-radius: 50%; background: var(--ax-rose); box-shadow: 0 12px 30px -10px rgba(240, 80, 159, .75); transition: transform .16s var(--ax-out); }
.ax-wa__nb svg { width: 26px; height: 26px; }
.ax-live .ax-wa__next:active .ax-wa__nb { transform: scale(.94); }

/* ------------------------------------------------------------------ feel (the hold ring) */
.ax-fe { text-align: center; }
.ax-fe__x { right: 18px; top: 56px; }
.ax-fe__o { position: absolute; left: 24px; right: 24px; top: calc(var(--ax-top) + 46px); }
.ax-fe__h { position: absolute; left: 24px; right: 24px; top: calc(var(--ax-top) + 68px); }
.ax-fe__glow { position: absolute; left: 50%; top: calc(var(--ax-feY) + 110px); width: 440px; height: 440px; margin: -220px 0 0 -220px; border-radius: 50%; background: radial-gradient(circle, rgba(240, 80, 159, .2) 0%, rgba(124, 58, 237, .08) 40%, rgba(0, 0, 0, 0) 70%); opacity: .35; pointer-events: none; }
.ax-fe__ring { position: absolute; left: 50%; top: var(--ax-feY); width: 220px; height: 220px; margin-left: -110px; border-radius: 50%; -webkit-touch-callout: none; }
.ax-fe__disc { position: absolute; inset: 18px; border-radius: 50%; background: radial-gradient(circle at 50% 38%, rgba(240, 80, 159, .2), rgba(43, 18, 64, .92) 72%); box-shadow: inset 0 0 0 1px var(--ax-edge); }
.ax-fe__arc { position: absolute; inset: 0; width: 220px; height: 220px; }
.ax-fe__arc .ax-arc__b, .ax-fe__arc .ax-arc__s { stroke-width: 5; }
.ax-fe__core { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--ax-rose); box-shadow: 0 0 0 6px rgba(240, 80, 159, .14), 0 0 22px rgba(240, 80, 159, .8); }
.ax-fe__w { position: absolute; left: 24px; right: 24px; top: calc(var(--ax-feY) + 244px); display: grid; justify-items: center; pointer-events: none; }
.ax-fe__s, .ax-fe__r { grid-area: 1 / 1; padding-top: 2px; }
.ax-fe__c { position: absolute; left: 24px; right: 24px; top: calc(var(--ax-feY) + 330px); color: var(--ax-dim); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ 1 or 2 (the form check, T5) */
.ax-oo { position: absolute; inset: 0; }
.ax-oo__o { position: absolute; left: 24px; right: 24px; top: calc(var(--ax-ooTop) - 36px); text-align: center; }
.ax-oo__col { position: absolute; left: 24px; right: 24px; top: var(--ax-ooTop); }
.ax-oo__card { position: relative; height: calc(var(--ax-band) + var(--ax-clean)); }
/* her original's band (❌ | ✅ in the sky): the reels/split frame, aligned on the clip; it runs 14 px under the clip so
   the clip's rounded corners show her sky */
.ax-oo__band { position: absolute; top: 0; z-index: 1; width: 50%; height: calc(var(--ax-band) + 16px); overflow: hidden; opacity: 0; }
.ax-oo__band--l { left: 0; border-top-left-radius: 14px; }
.ax-oo__band--r { left: 50%; border-top-right-radius: 14px; }
.ax-oo__bi { position: absolute; top: 0; width: var(--ax-cw); height: calc(var(--ax-cw) * 1.24444); object-fit: fill; }
.ax-oo__band--l .ax-oo__bi { left: 0; }
.ax-oo__band--r .ax-oo__bi { left: calc(var(--ax-cw) / -2); }
.ax-oo__a { position: absolute; left: 0; right: 0; top: var(--ax-band); z-index: 2; height: var(--ax-clean); border-radius: 14px; overflow: hidden; background: var(--ax-plum2); transform: translateZ(0); }
.ax-oo__vs { position: absolute; inset: 0; }
.ax-oo__veil { position: absolute; left: 0; top: 0; width: 50%; height: 100%; z-index: 2; background: var(--ax-vin); opacity: 0; pointer-events: none; }
.ax-oo__snap { position: absolute; left: 0; top: 0; z-index: 3; width: 50%; height: 100%; border-radius: 12px; opacity: 0; visibility: hidden; box-shadow: 0 18px 30px -14px rgba(0, 0, 0, .7); }
.ax-oo__line { position: absolute; left: 50%; top: var(--ax-band); z-index: 4; width: 2px; height: calc(var(--ax-clean) + 80px); margin-left: -1px; border-radius: 1px; background: var(--ax-rose); box-shadow: 0 0 12px rgba(240, 80, 159, .6); transform-origin: 50% 0; pointer-events: none; }
.ax-oo__q { position: absolute; left: 0; right: 0; top: 0; z-index: 5; height: var(--ax-band); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ax-oo__q .ax-it { display: block; }
.ax-oo__btns { position: relative; height: 56px; margin-top: 24px; }
.ax-oo__b { position: absolute; top: 0; width: 136px; height: 56px; border-radius: 28px; display: grid; place-items: center; background: var(--ax-plum); color: var(--ax-petal); box-shadow: inset 0 0 0 1px var(--ax-edge); font: 300 34px/1 var(--ax-serif); transition: transform .16s var(--ax-out), background-color .2s linear, color .2s linear, box-shadow .2s linear; }
.ax-oo__b span { position: relative; padding-bottom: 3px; }
.ax-oo__b--1 { left: calc(25% - 68px); }
.ax-oo__b--2 { left: calc(75% - 68px); }
.ax-oo__b::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 1.5px rgba(240, 80, 159, .8); opacity: 0; pointer-events: none; }
.ax-oo__btns.is-pulse .ax-oo__b::after { will-change: transform, opacity; animation: ax-ping 2s cubic-bezier(.2, .7, .3, 1) infinite; }
.ax-oo__btns.is-pulse .ax-oo__b--2::after { animation-delay: 1s; }
@keyframes ax-ping { 0% { transform: scale(1); opacity: .9; } 60%, 100% { transform: scale(1.22, 1.5); opacity: 0; } }
.ax-oo__b.is-call { color: var(--ax-rose); box-shadow: inset 0 0 0 1.5px var(--ax-rose); }
.ax-oo__b.is-call::after { will-change: transform, opacity; animation: ax-ping 1.1s cubic-bezier(.2, .7, .3, 1) infinite; }
.ax-oo__b.is-on { background: var(--ax-rose); color: #ffffff; box-shadow: var(--ax-halo); }
.ax-oo__b--1.is-on { background: var(--ax-plum); color: var(--ax-dim); box-shadow: inset 0 0 0 1px rgba(247, 244, 250, .3); }
.ax-oo__b.is-press, .ax-live .ax-oo__b:active { transform: scale(.96); }
.ax-oo__b.is-off { pointer-events: none; }
.ax-story .ax-oo__b { transition: none; }
.ax-oo__msg { margin-top: 18px; text-align: center; color: var(--ax-petal); opacity: 0; visibility: hidden; }
/* over the column: the lifted half, its halo, the grow to the glass, the veils, the glow */
.ax-oo__over { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.ax-oo__halo { position: absolute; border-radius: 12px; box-shadow: var(--ax-halo), inset 0 0 0 2px var(--ax-rose); opacity: 0; visibility: hidden; }
.ax-oo__c { position: absolute; overflow: hidden; transform-origin: 0 0; opacity: 0; visibility: hidden; background: var(--ax-plum2); will-change: transform; }
.ax-oo__cv { position: absolute; inset: 0; }
.ax-oo__cg { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 3px rgba(240, 80, 159, .9), inset 0 0 48px rgba(240, 80, 159, .4); opacity: 0; }
.ax-oo__vt { position: absolute; left: 0; right: 0; top: 0; height: 150px; background: linear-gradient(180deg, rgba(11, 7, 16, .62), rgba(11, 7, 16, 0)); opacity: 0; }
.ax-oo__vb { position: absolute; left: 0; right: 0; bottom: 0; height: 400px; background: linear-gradient(180deg, rgba(11, 7, 16, 0), rgba(11, 7, 16, .7) 46%, rgba(11, 7, 16, .95)); opacity: 0; }
.ax-oo__gg { position: absolute; inset: 0; box-shadow: inset 0 0 0 2px rgba(240, 80, 159, .8), inset 0 0 64px rgba(240, 80, 159, .3); opacity: 0; visibility: hidden; }
.ax-oo__res { position: absolute; left: 24px; right: 24px; bottom: 110px; z-index: 7; display: flex; align-items: center; gap: 16px; visibility: hidden; }
.ax-oo__ring { width: 60px; height: 60px; flex: none; opacity: 0; }
.ax-oo__rx { flex: 1; min-width: 0; }
.ax-oo__rt { opacity: 0; }
.ax-oo__rc { margin-top: 6px; color: var(--ax-soft); opacity: 0; }

/* ------------------------------------------------------------------ learn (today's lesson, the tip, the 6 lessons) */
.ax-ln__h { margin-top: 8px; flex: none; }
.ax-ln__card { display: block; margin-top: 20px; flex: none; text-align: left; transition: transform .16s var(--ax-out); }
.ax-ln__card.is-press, .ax-live .ax-ln__card:active { transform: scale(.985); }
.ax-ln__th { position: relative; display: block; height: var(--ax-lnTh); border-radius: 14px; overflow: hidden; background: var(--ax-plum2); }
.ax-ln__th::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); pointer-events: none; }
.ax-ln__k { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.ax-ln__s { font: 600 11px/1.2 var(--ax-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ax-dim); }
.ax-ln__now { font: 600 11px/1.2 var(--ax-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ax-rose); }
.ax-ln__t { display: block; margin-top: 4px; }
.ax-tip { margin-top: 16px; padding: var(--ax-tipP) 16px; border-radius: 14px; background: var(--ax-card); box-shadow: inset 0 0 0 1px var(--ax-line); flex: none; }
.ax-tip__q { margin-top: 6px; }
.ax-ln__list { margin-top: 16px; flex: none; }
.ax-lr { display: flex; align-items: center; gap: 12px; height: var(--ax-lrH); box-shadow: inset 0 calc(-1 * var(--ax-hl)) 0 var(--ax-line); }
.ax-lr:first-child { box-shadow: inset 0 var(--ax-hl) 0 var(--ax-line), inset 0 calc(-1 * var(--ax-hl)) 0 var(--ax-line); }
.ax-lr__n { flex: none; width: 16px; padding-bottom: 2px; font: 400 19px/1 var(--ax-serif); color: var(--ax-rose); text-align: center; }
.ax-lr__t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-lr__i { position: relative; flex: none; display: block; width: 16px; height: 16px; }
.ax-lr.is-now .ax-lr__t { color: var(--ax-rose); }
.ax-lr.is-now .ax-lr__i::after { content: ""; position: absolute; left: 4px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--ax-rose); box-shadow: 0 0 0 4px rgba(240, 80, 159, .16); }
.ax-lr.is-lock .ax-lr__n, .ax-lr.is-lock .ax-lr__i { color: var(--ax-faint); }
.ax-lr.is-lock .ax-lr__t { color: var(--ax-dim); }
.ax-lr.is-lock .ax-lr__i svg { width: 14px; height: 14px; margin: 1px; }

/* ------------------------------------------------------------------ lesson (the thumbnail, 3 things, Mark as done) */
.ax-ls { padding-bottom: 42px; }
.ax-ls__x { right: 18px; top: 56px; }
/* the label sits on the close button's line (56 to 96); the thumbnail starts 16 px under the button */
.ax-ls__o { flex: none; margin-top: calc(70px - var(--ax-top)); padding-right: 56px; }
.ax-ls__media { position: relative; flex: none; height: calc(var(--ax-cw) * .5625); margin-top: 29px; border-radius: 14px; overflow: hidden; background: var(--ax-plum2); }
.ax-ls__media::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); pointer-events: none; }
.ax-ls__h { margin-top: var(--ax-lsG); flex: none; }
.ax-ls__k { margin-top: var(--ax-lsG); flex: none; }
.ax-ls__list { margin-top: 14px; display: flex; flex-direction: column; gap: 14px; flex: none; }
.ax-lk { display: flex; align-items: flex-start; gap: 14px; }
.ax-lk__n { flex: none; display: grid; place-items: center; width: 26px; height: 26px; margin-top: -2px; border-radius: 50%; background: rgba(240, 80, 159, .12); padding-bottom: 2px; font: 400 17px/1 var(--ax-serif); color: var(--ax-rose); }
.ax-lk__t { flex: 1; min-width: 0; }
.ax-ls__go { margin-top: auto; }

/* ------------------------------------------------------------------ me (Level 4, the streak, 3 rings, the live class) */
.ax-me__top { flex: none; }
.ax-me__h { padding-top: 2px; }
.ax-me__s { margin-top: 10px; color: var(--ax-soft); }
.ax-me__rings { display: flex; justify-content: space-between; margin-top: var(--ax-g); flex: none; }
.ax-mr { display: flex; flex-direction: column; align-items: center; width: 33.33%; text-align: center; }
.ax-mr__r { position: relative; display: block; width: var(--ax-meR); height: var(--ax-meR); }
.ax-mr__ring { width: 100%; height: 100%; }
.ax-mr__ring .ax-ring__b, .ax-mr__ring .ax-ring__s { stroke-width: 4.6; }
.ax-mr__ic { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ax-soft); }
.ax-mr__ic svg { width: 24px; height: 24px; }
.ax-mr__t { margin-top: 12px; white-space: nowrap; }
.ax-mr__c { margin-top: 2px; color: var(--ax-dim); }
.ax-lv { margin-top: var(--ax-g); flex: none; border-radius: 14px; overflow: hidden; background: var(--ax-card); box-shadow: inset 0 0 0 1px var(--ax-line); }
.ax-lv__media { position: relative; height: var(--ax-lvImg); overflow: hidden; background: var(--ax-plum2); }
.ax-lv__dot { position: absolute; left: 16px; top: 16px; width: 10px; height: 10px; border-radius: 50%; background: var(--ax-rose); box-shadow: 0 0 0 3px rgba(11, 7, 16, .4); }
.ax-lv__dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--ax-rose); opacity: 0; will-change: transform, opacity; animation: ax-live 1.8s cubic-bezier(.2, .7, .3, 1) infinite; }
@keyframes ax-live { 0% { transform: scale(.5); opacity: .9; } 70%, 100% { transform: scale(1.5); opacity: 0; } }
.ax-lv__b { padding: 16px; }
.ax-lv__row { display: flex; align-items: center; gap: 14px; }
.ax-lv__av { flex: none; display: block; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--ax-plum2); box-shadow: 0 0 0 2px var(--ax-vin), 0 0 0 3.5px var(--ax-rose); }
.ax-lv__tx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ax-lv__t { color: var(--ax-dim); }
.ax-lv__q { margin-top: 12px; color: var(--ax-dim); }
.ax-lv__go { margin-top: 16px; }

/* ------------------------------------------------------------------ the 780 canvas: tighter air, same order */
.ax-short .ax-to__wk { margin-top: 14px; }
.ax-short .ax-pg__grid { margin-top: 20px; gap: 16px; }
.ax-short .ax-ln__card { margin-top: 16px; }
.ax-short .ax-ln__k { margin-top: 10px; }
.ax-short .ax-lv__b { padding: 14px 16px 16px; }
.ax-short .ax-lv__q { margin-top: 10px; }
.ax-short .ax-lv__go { margin-top: 14px; }

/* ------------------------------------------------------------------ reduced motion: no pulse, no ping, no live dot loop */
.ax-osrm .ax-oo__b::after, .ax-rm .ax-oo__b::after, .ax-osrm .ax-lv__dot::after, .ax-rm .ax-lv__dot::after { animation: none !important; opacity: 0 !important; }

/* ------------------------------------------------------------------ hover (desktop, live) */
@media (hover: hover) {
  .ax-desk.ax-live .ax-tab:hover { color: var(--ax-dim); }
  .ax-desk.ax-live .ax-tab.is-on:hover { color: var(--ax-rose); }
  .ax-desk.ax-live .ax-btn:not(.is-on):hover { background: #f565ac; }
  .ax-desk.ax-live .ax-oo__b:not(.is-off):hover { box-shadow: inset 0 0 0 1.5px var(--ax-rose); }
  .ax-desk.ax-live .ax-tc:hover, .ax-desk.ax-live .ax-wc:not(.is-on):hover { box-shadow: inset 0 0 0 1px var(--ax-edge); }
  .ax-desk.ax-live .ax-ln__card:hover .ax-ln__t { color: var(--ax-soft); }
  .ax-desk.ax-live .ax-ib:hover { background: rgba(11, 7, 16, .7); }
}