/* Vero hero story: animated phone mock (driven by story.js).
   The markup is the final frame; without JS or with reduced motion it stays static.
   Lengths are cqw of the stage (356 px design x 100/356); --u is that unit for story.js. */

.vs-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; }

.vs-stage {
  --u: calc(100cqw / 356);
  position: relative;
  container-type: inline-size;
  width: min(356px, 100%, max(272px, calc((100vh - 150px) * .4672)));
  width: min(356px, 100%, max(272px, calc((100svh - 150px) * .4672)));
  aspect-ratio: 356 / 762;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.vs-stage * { pointer-events: none; }
.vs-h0 { opacity: 0; }
.vs-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* glow behind the phone */
.vs-glow {
  position: absolute; inset: -10% -18%;
  background: radial-gradient(closest-side, rgba(226,177,60,.16), rgba(85,112,159,.10) 55%, transparent);
}

/* phone frame */
.vs-phone {
  position: absolute; inset: 0;
  border-radius: 15.17cqw;
  background: linear-gradient(160deg, #222a45, #0b0f1d 40%, #151b31);
  box-shadow: 0 11.24cqw 22.47cqw rgba(0,0,0,.55), 0 0 0 1px rgba(169,190,223,.16), inset 0 0 0 .56cqw rgba(169,190,223,.10);
  transform-origin: 50% 45%;
}

.vs-screen {
  position: absolute; inset: 2.81cqw;
  border-radius: 12.36cqw;
  overflow: hidden;
  background: #0A0E1C;
  color: #F1F3F9;
  font-family: var(--font-body);
  font-size: 3.65cqw;
  line-height: 1.4;
  isolation: isolate;
}
.vs-screen > *, .vs-base > * { position: absolute; }

.vs-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.vs-gold { color: #E2B13C; }
.vs-kick { font-family: var(--font-heading); font-weight: 600; font-size: 2.81cqw; letter-spacing: .45cqw; color: #707B98; text-transform: uppercase; }

/* status bar + island */
.vs-sb { z-index: 7; top: 4.21cqw; left: 7.3cqw; right: 6.74cqw; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-heading); font-weight: 600; font-size: 3.65cqw; }
.vs-sb svg { width: 12.36cqw; height: 3.09cqw; }
.vs-isl { z-index: 8; top: 2.81cqw; left: 50%; width: 0; height: 8.43cqw; }
.vs-isl > * { position: absolute; top: 0; height: 8.43cqw; background: #000; }
.vs-isl-l, .vs-isl-r { width: 8.43cqw; border-radius: 50%; }
.vs-isl-l { left: -28.09cqw; }
.vs-isl-r { left: 19.66cqw; }
.vs-isl-m { left: -23.88cqw; width: 47.75cqw; }
.vs-isl .vs-isl-d { left: -24.72cqw; top: 3.37cqw; width: 1.69cqw; height: 1.69cqw; border-radius: 50%; background: #E2B13C; box-shadow: 0 0 2.25cqw rgba(226,177,60,.9); }
.vs-isl .vs-cap { left: -21.35cqw; width: 46.07cqw; background: none; text-align: center; line-height: 8.43cqw; font-weight: 600; font-size: 2.95cqw; color: #F1F3F9; white-space: nowrap; }
.vs-hi { z-index: 7; bottom: 2.25cqw; left: 30.34cqw; width: 33.71cqw; height: 1.4cqw; border-radius: .84cqw; background: rgba(241,243,249,.45); }
.vs-fade { z-index: 9; inset: 0; background: #05070F; }

/* base layer: header, game, home */
.vs-base { z-index: 1; inset: 0; transform-origin: 50% 0; }
.vs-hr { top: 14.61cqw; right: 5.06cqw; display: flex; align-items: center; gap: 2.25cqw; }
.vs-pill {
  display: flex; align-items: center; gap: 1.4cqw; height: 7.3cqw; padding: 0 2.81cqw; border-radius: 27.81cqw;
  background: rgba(226,177,60,.12); border: 1px solid rgba(226,177,60,.32);
  font-family: var(--font-heading); font-weight: 700; font-size: 3.51cqw; color: #E2B13C;
}
.vs-pill svg { width: 3.09cqw; height: 3.65cqw; filter: drop-shadow(0 0 1.12cqw rgba(226,177,60,.6)); }
.vs-xpw { font-size: 3.23cqw; font-weight: 700; color: #A6B0C8; min-width: 17.42cqw; text-align: right; }
.vs-gh { top: 14.04cqw; left: 5.06cqw; }
.vs-gh b { display: block; font-family: var(--font-heading); font-size: 4.21cqw; font-weight: 600; margin-top: .28cqw; }
.vs-gh .vs-kick { color: #E2B13C; }
.vs-hh { top: 15.17cqw; left: 5.06cqw; display: flex; align-items: center; gap: 1.97cqw; font-family: var(--font-heading); font-weight: 700; font-size: 4.78cqw; letter-spacing: .84cqw; color: #C8D8EC; }
.vs-hh svg { width: 6.18cqw; height: 5.62cqw; }

.vs-tm { top: 26.97cqw; left: 5.06cqw; width: 84.27cqw; }
.vs-tm-row { display: flex; justify-content: space-between; font-size: 2.81cqw; letter-spacing: .34cqw; color: #707B98; font-weight: 600; }
.vs-cd { color: #F1F3F9; font-size: 3.09cqw; letter-spacing: 0; }
.vs-tt { position: relative; height: 1.12cqw; margin-top: 1.69cqw; border-radius: .56cqw; background: rgba(169,190,223,.12); overflow: hidden; }
.vs-tt i { position: absolute; inset: 0; border-radius: .56cqw; transform-origin: 0 50%; background: linear-gradient(90deg, #A9BEDF, #E2B13C); }
.vs-tt .vs-tbr { background: #EF4444; }

.vs-q { top: 96.07cqw; left: 5.06cqw; width: 84.27cqw; }
.vs-q b { display: block; font-family: var(--font-heading); font-size: 6.18cqw; font-weight: 700; letter-spacing: -.08cqw; }
.vs-q span { color: #A6B0C8; }
.vs-b {
  top: 112.36cqw; width: 40.45cqw; height: 16.85cqw; border-radius: 3.93cqw; border: 1.5px solid;
  display: flex; align-items: center; justify-content: center; gap: 2.25cqw;
  font-family: var(--font-heading); font-weight: 700; font-size: 4.78cqw; overflow: hidden;
}
.vs-b svg { width: 5.06cqw; height: 5.06cqw; position: relative; }
.vs-b span { position: relative; }
.vs-up { left: 5.06cqw; color: #10B981; border-color: rgba(16,185,129,.55); background: rgba(16,185,129,.08); }
.vs-dn { left: 48.88cqw; color: #EF4444; border-color: rgba(239,68,68,.45); background: rgba(239,68,68,.06); }
.vs-upf { position: absolute; inset: 0; background: rgba(16,185,129,.24); }
.vs-res {
  top: 133.71cqw; left: 5.06cqw; width: 84.27cqw; padding: 3.09cqw 3.93cqw; border-radius: 3.37cqw;
  background: #131A31; border: 1px solid #10B981; box-shadow: 0 2.81cqw 8.43cqw rgba(16,185,129,.12);
}
.vs-res b { display: flex; align-items: center; gap: 1.69cqw; color: #10B981; font-size: 3.65cqw; font-weight: 600; }
.vs-res b svg { width: 4.21cqw; height: 4.21cqw; }
.vs-res span { display: block; color: #A6B0C8; font-size: 3.51cqw; margin-top: .56cqw; }
.vs-xpb { top: 106.74cqw; left: 14.04cqw; width: 22.47cqw; text-align: center; font-family: var(--font-mono); font-weight: 700; font-size: 4.49cqw; color: #F2C75C; text-shadow: 0 0 3.37cqw rgba(226,177,60,.7); }
.vs-touch { z-index: 6; top: 113.76cqw; left: 18.26cqw; width: 14.04cqw; height: 14.04cqw; border-radius: 50%; background: rgba(241,243,249,.28); border: 1.5px solid rgba(241,243,249,.6); box-shadow: 0 1.12cqw 3.93cqw rgba(0,0,0,.35); }
.vs-rip { z-index: 6; top: 112.36cqw; left: 16.85cqw; width: 16.85cqw; height: 16.85cqw; border-radius: 50%; border: 2px solid rgba(16,185,129,.9); }

/* home */
.vs-card2 {
  border-radius: 4.49cqw; border: 1px solid rgba(169,190,223,.10);
  background: linear-gradient(135deg, #131A31, #1B2443);
}
.vs-hl { top: 25.84cqw; left: 5.06cqw; width: 84.27cqw; height: 29.21cqw; padding: 3.65cqw 4.49cqw; }
.vs-hl-r { display: flex; justify-content: space-between; align-items: center; }
.vs-done { display: flex; align-items: center; gap: 1.12cqw; color: #10B981; font-size: 3.09cqw; font-weight: 600; }
.vs-done svg { width: 3.37cqw; height: 3.37cqw; }
.vs-hl b { display: block; font-family: var(--font-heading); font-size: 5.06cqw; margin-top: 1.4cqw; }
.vs-hl p { margin: .28cqw 0 0; font-size: 3.37cqw; color: #A6B0C8; }
.vs-bar { height: .84cqw; margin-top: 2.53cqw; border-radius: .56cqw; background: linear-gradient(90deg, #A9BEDF, #E2B13C); }
.vs-hs { top: 119.66cqw; left: 5.06cqw; width: 84.27cqw; display: flex; }
.vs-hs div { flex: 1; text-align: center; border-right: 1px solid rgba(169,190,223,.10); }
.vs-hs div:last-child { border: 0; }
.vs-hs b { display: block; font-family: var(--font-mono); font-size: 4.78cqw; line-height: 1.3; }
.vs-hs span { font-size: 2.95cqw; color: #707B98; }
.vs-hc { top: 141.57cqw; left: 5.06cqw; width: 84.27cqw; }
.vs-hc b { display: block; font-family: var(--font-heading); font-size: 5.9cqw; font-weight: 700; letter-spacing: -.11cqw; }
.vs-hc > span { color: #A6B0C8; font-size: 3.51cqw; }
.vs-st {
  top: 162.92cqw; width: 41.01cqw; height: 12.92cqw; border-radius: 3.09cqw; padding: 0 3.37cqw;
  display: flex; align-items: center; gap: 2.53cqw; background: #F1F3F9; color: #0A0E1C; overflow: hidden;
}
.vs-st svg { width: 5.06cqw; height: 5.62cqw; flex: none; }
.vs-st small { display: block; font-size: 2.25cqw; font-weight: 600; letter-spacing: .14cqw; line-height: 1.1; }
.vs-st b { display: block; font-size: 3.79cqw; line-height: 1.2; }
.vs-gp { left: 5.06cqw; }
.vs-as { left: 48.31cqw; }
.vs-as > * { opacity: .5; }
.vs-shine { position: absolute; top: 0; left: 0; width: 14.04cqw; height: 12.92cqw; background: linear-gradient(100deg, transparent, rgba(255,255,255,.85), transparent); }

/* shared chart card */
.vs-card { z-index: 3; top: 58.43cqw; left: 5.06cqw; width: 84.27cqw; height: 56.18cqw; }
.vs-cbox, .vs-cg, .vs-cok { position: absolute; inset: 0; border-radius: 4.49cqw; }
.vs-cbox { background: #131A31; border: 1px solid #222B4A; overflow: hidden; box-shadow: 0 5.06cqw 11.24cqw rgba(0,0,0,.45); }
.vs-cbox svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.vs-cg { border: 1px solid rgba(226,177,60,.75); box-shadow: 0 0 7.87cqw rgba(226,177,60,.28), inset 0 0 6.18cqw rgba(226,177,60,.08); }
.vs-cok { border: 1px solid rgba(16,185,129,.8); box-shadow: 0 0 6.74cqw rgba(16,185,129,.25); }
.vs-cbox text { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .5px; fill: #707B98; }
.vs-cbox .vs-lab { font-family: var(--font-heading); font-weight: 600; font-size: 9px; letter-spacing: .6px; }
.vs-grid line { stroke: #222B4A; opacity: .6; }
.k path { stroke: #EF4444; stroke-width: 1.4; }
.k rect { fill: #EF4444; }
.k.u path { stroke: #10B981; }
.k.u rect { fill: #10B981; }
.vs-fl { fill: none; stroke: #E2B13C; stroke-width: 1.3; stroke-dasharray: 1; }
.vs-bp, .vs-bn, .vs-lock, .vs-ring { transform-box: fill-box; }
.vs-bp { transform-origin: 0 50%; }
.vs-bn { transform-origin: 100% 50%; }
.vs-lock, .vs-ring { transform-origin: 50% 50%; }
.vs-cbox .vs-wl text { font-weight: 700; font-size: 8px; }

/* sheet: lesson, then tool */
.vs-sheet { z-index: 2; top: 11.24cqw; left: 0; width: 94.38cqw; bottom: 0; border-radius: 7.3cqw 7.3cqw 0 0; background: #0A0E1C; border-top: 1px solid #222B4A; box-shadow: 0 -5.62cqw 11.24cqw rgba(0,0,0,.5); }
.vs-l { z-index: 4; }
.vs-lh { top: 16.85cqw; left: 5.06cqw; width: 84.27cqw; display: flex; align-items: center; gap: 2.81cqw; }
.vs-lh svg { width: 3.93cqw; height: 3.93cqw; color: #707B98; }
.vs-segs { flex: 1; display: flex; gap: 1.12cqw; }
.vs-segs i { flex: 1; height: 1.12cqw; border-radius: .56cqw; background: #222B4A; }
.vs-segs .on { background: #E2B13C; }
.vs-lh small { font-size: 3.09cqw; color: #707B98; }
.vs-lk { top: 24.16cqw; left: 5.06cqw; }
.vs-lt { top: 28.65cqw; left: 5.06cqw; font-family: var(--font-heading); font-size: 6.74cqw; font-weight: 600; }
.vs-lb { top: 102.25cqw; left: 5.06cqw; width: 84.27cqw; margin: 0; font-size: 3.93cqw; line-height: 1.5; color: #A6B0C8; }
.vs-term { position: relative; color: #F1F3F9; border-bottom: 1.5px dotted #E2B13C; }
.vs-thl { position: absolute; z-index: -1; inset: -.56cqw -1.12cqw; border-radius: 1.12cqw; background: rgba(226,177,60,.2); }
.vs-take { top: 129.78cqw; left: 5.06cqw; width: 84.27cqw; padding-left: 3.37cqw; border-left: 2px solid #E2B13C; }
.vs-take .vs-kick { color: #E2B13C; }
.vs-take p { margin: .84cqw 0 0; font-size: 4.21cqw; line-height: 1.45; }
.vs-btn2 {
  top: 187.64cqw; left: 5.06cqw; width: 84.27cqw; height: 14.04cqw; border-radius: 3.37cqw; border: 1px solid #E2B13C;
  display: flex; align-items: center; justify-content: center; gap: 2.25cqw; color: #E2B13C;
  font-weight: 600; font-size: 4.21cqw;
}
.vs-btn2 svg { width: 4.49cqw; height: 4.49cqw; }
.vs-ts { z-index: 5; top: 157.3cqw; left: 0; width: 94.38cqw; bottom: 0; padding: 3.37cqw 6.18cqw; border-radius: 6.18cqw 6.18cqw 0 0; background: #131A31; border-top: 1px solid #2E3960; box-shadow: 0 -4.49cqw 8.43cqw rgba(0,0,0,.45); }
.vs-ts i { display: block; width: 10.11cqw; height: 1.12cqw; margin: 0 auto 3.37cqw; border-radius: .56cqw; background: #2E3960; }
.vs-ts b { font-family: var(--font-heading); font-size: 5.06cqw; }
.vs-ts .vs-kick { margin-left: 2.25cqw; }
.vs-ts p { margin: 1.69cqw 0 2.25cqw; color: #A6B0C8; font-size: 3.79cqw; line-height: 1.5; }
.vs-ts span:last-child { color: #E2B13C; font-size: 3.37cqw; font-weight: 600; }

.vs-th { top: 15.73cqw; left: 5.06cqw; width: 84.27cqw; }
.vs-th .vs-kick { display: flex; align-items: center; gap: 1.69cqw; color: #E2B13C; letter-spacing: .62cqw; }
.vs-th .vs-kick svg { width: 3.37cqw; height: 3.37cqw; }
.vs-th div + div { display: flex; justify-content: space-between; align-items: center; margin-top: 1.69cqw; }
.vs-th b { font-family: var(--font-heading); font-size: 6.74cqw; font-weight: 600; }
.vs-th small { font-size: 2.67cqw; color: #A6B0C8; border: 1px solid #2E3960; border-radius: 27.81cqw; padding: .84cqw 2.25cqw; }
.vs-leg { top: 96.07cqw; left: 5.06cqw; width: 84.27cqw; padding: 2.81cqw 3.37cqw 1.12cqw; border-radius: 3.93cqw; background: #131A31; border: 1px solid #222B4A; }
.vs-leg .vs-kick { display: block; padding-bottom: 1.69cqw; }
.vs-leg div { display: flex; align-items: center; gap: 2.25cqw; height: 8.43cqw; border-top: 1px solid #1B2443; font-size: 3.23cqw; color: #A6B0C8; }
.vs-leg i { flex: none; width: 2.81cqw; height: 2.81cqw; border-radius: .84cqw; }
.vs-leg b { flex: none; width: 19.66cqw; color: #F1F3F9; font-weight: 600; }
.vs-leg .vs-dash { height: 0; border-radius: 0; border-top: 1.5px dashed #707B98; }
.vs-free { top: 136.52cqw; left: 5.06cqw; width: 84.27cqw; display: flex; align-items: center; gap: 2.81cqw; font-size: 3.37cqw; color: #A6B0C8; line-height: 1.4; }
.vs-free b { flex: none; font-family: var(--font-mono); font-size: 2.95cqw; color: #E2B13C; padding: 1.4cqw 2.81cqw; border-radius: 27.81cqw; background: rgba(226,177,60,.14); border: 1px solid rgba(226,177,60,.5); box-shadow: 0 0 4.49cqw rgba(226,177,60,.25); }
.vs-btn3 { top: 187.64cqw; left: 5.06cqw; width: 84.27cqw; height: 14.04cqw; border-radius: 3.37cqw; background: #E2B13C; color: #0A0E1C; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 4.21cqw; }

/* controls under the phone */
.vs-ctrl {
  display: flex; align-items: center; gap: 12px; height: 36px;
  width: min(356px, 100%, max(272px, calc((100vh - 150px) * .4672)));
  width: min(356px, 100%, max(272px, calc((100svh - 150px) * .4672)));
}
.vs-prog { flex: 1; display: flex; gap: 4px; visibility: hidden; }
.vs-on .vs-prog { visibility: visible; }
.vs-prog i { flex: 1; height: 3px; border-radius: 2px; background: rgba(169,190,223,.16); overflow: hidden; }
.vs-prog b { display: block; height: 100%; background: #E2B13C; transform-origin: 0 50%; transform: scaleX(0); }
.vs-btn {
  flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; padding: 0;
  border: 1px solid rgba(169,190,223,.28); background: rgba(19,26,49,.85); color: #A9BEDF; cursor: pointer;
  transition: background .2s, color .2s;
}
.vs-btn:hover { background: #1B2443; color: #F1F3F9; }
.vs-btn:focus-visible { outline: 2px solid #E2B13C; outline-offset: 3px; }
.vs-btn svg { width: 14px; height: 14px; }
.vs-btn .vs-ip, .vs-btn.is-paused .vs-ia { display: none; }
.vs-btn.is-paused .vs-ip { display: block; }
.vs-cbox .tg { fill: #E2B13C; }
.vs-cbox .ts { fill: #A9BEDF; }
.vs-cbox .tk { fill: #0A0E1C; }
.vs-cbox .tw { fill: #F1F3F9; }