/* Mark's Vocal Studio (D238, D239). The house look of the game (violet glass for the scene's words and choices, cream
   for clouds, gold for the step forward) and Mark's own frosted glass lit from inside with rainbow edges (the console,
   D237). All sizes in --u (the frame's unit: Windows min(w/1600, h/900), iPhone w/844). */

/* ---------------------------------------------------------------------------------------------- lit letters, symbols */
.lw, .lg { position: relative; display: inline-block; flex: none; pointer-events: none; }
.lw svg, .lg svg { position: absolute; left: 0; top: 0; overflow: visible; }
.lw-glow, .lg-glow { animation: lwBreath 7.5s ease-in-out infinite; will-change: opacity; }   /* the blur is drawn once; only its opacity breathes */
@keyframes lwBreath { 0%, 100% { opacity: .82; } 50% { opacity: 1; } }

/* ---------------------------------------------------------------------------------------------- the UI layer */
.vs-ui { position: absolute; inset: 0; z-index: 15; pointer-events: none; }
.vs-ui > * { pointer-events: auto; }
.vs-mark { position: absolute; left: calc(var(--u) * 18); bottom: calc(var(--u) * -34); width: calc(var(--u) * 270); aspect-ratio: 595 / 764; z-index: 8; transform-origin: 50% 100%; pointer-events: none;
  filter: drop-shadow(0 calc(var(--u) * 14) calc(var(--u) * 24) rgba(40, 10, 60, .35)) drop-shadow(calc(var(--u) * -4) 0 calc(var(--u) * 14) rgba(255, 210, 160, .3)); }
.vs-mark[hidden] { display: none; }
.vs-mark .br { position: absolute; inset: 0; transform-origin: 50% 100%; animation: vsBreath 3.7s ease-in-out infinite; }
.vs-mark img { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; opacity: 0; transition: opacity .18s; }
.vs-mark img.on { opacity: 1; }
@keyframes vsBreath { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(.994, 1.014); } }
.vs-cloud { position: absolute; left: calc(var(--u) * 34); bottom: calc(var(--u) * 318); max-width: calc(var(--u) * 396); box-sizing: border-box; z-index: 13; opacity: 0; pointer-events: none;
  padding: calc(var(--u) * 18) calc(var(--u) * 30) calc(var(--u) * 20); border-radius: calc(var(--u) * 36) calc(var(--u) * 36) calc(var(--u) * 36) calc(var(--u) * 10);
  background: linear-gradient(180deg, rgba(255, 252, 245, .97), rgba(255, 245, 228, .94)); box-shadow: inset 0 calc(var(--u) * 2) 0 #fff, 0 calc(var(--u) * 16) calc(var(--u) * 34) rgba(30, 10, 60, .28);
  transform-origin: 0 100%; transition: opacity .35s ease; }
.vs-cloud.on { opacity: 1; }
.vs-cloud .nm { display: block; font: 1000 calc(var(--u) * 14)/1 "Nunito", sans-serif; letter-spacing: calc(var(--u) * 3); text-transform: uppercase; color: #7c3aed; }
.vs-cloud .ln { display: block; margin-top: calc(var(--u) * 8); font: 1000 calc(var(--u) * 29)/1.15 "Nunito", sans-serif; color: #2a1245; }

/* the pill on top: what this is, where the child is, and the microphone's light (always visible while it listens) */
.vs-pill { position: absolute; left: 50%; top: calc(var(--u) * 20); translate: -50% 0; z-index: 12; display: flex; align-items: center; gap: calc(var(--u) * 16);
  height: calc(var(--u) * 64); padding: 0 calc(var(--u) * 12) 0 calc(var(--u) * 26); border-radius: 999px; color: #fff8ec; pointer-events: none;
  background: linear-gradient(180deg, rgba(92, 44, 150, .82), rgba(54, 20, 98, .88)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 calc(var(--u) * 2) 0 rgba(255, 255, 255, .22), inset 0 0 0 1.5px rgba(255, 255, 255, .14), 0 calc(var(--u) * 10) calc(var(--u) * 24) rgba(30, 10, 60, .3); }
.vs-pill[hidden] { display: none; }
.vs-tt { display: grid; line-height: 1; }
.vs-tt small { font: 900 calc(var(--u) * 13)/1 "Nunito", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #f6dfa0; white-space: nowrap; }
.vs-tt b { font: 1000 calc(var(--u) * 26)/1.05 "Nunito", sans-serif; color: #fff8ea; white-space: nowrap; }
.vs-pips { display: flex; gap: calc(var(--u) * 6); align-items: center; }
.vs-pips:empty { display: none; }
.vs-pips i { width: calc(var(--u) * 20); height: calc(var(--u) * 20); border-radius: 50%; display: grid; place-items: center; font-style: normal;
  background: rgba(20, 6, 40, .45); box-shadow: inset 0 0 0 1.5px var(--c, rgba(255, 214, 120, .5)); transition: background .4s, box-shadow .4s; }
.vs-pips i em { font: 1000 calc(var(--u) * 12)/1 "Nunito", sans-serif; font-style: normal; color: rgba(255, 236, 190, .8); }
.vs-pips i.now { box-shadow: inset 0 0 0 2px #ffd56b, 0 0 calc(var(--u) * 12) rgba(255, 200, 90, .55); }
.vs-pips i.done { background: var(--c, #ffc53d); box-shadow: inset 0 calc(var(--u) * 2) 0 rgba(255, 255, 255, .6), 0 0 calc(var(--u) * 10) var(--c, #ffc53d); }
.vs-pips i.done em { color: #3a1b00; }
.vs-count { display: flex; align-items: baseline; gap: calc(var(--u) * 8); padding: 0 calc(var(--u) * 8); }
.vs-count b { font: 1000 calc(var(--u) * 30)/1 "Nunito", sans-serif; color: #ffd56b; text-shadow: 0 0 calc(var(--u) * 12) rgba(255, 200, 90, .6); }
.vs-count small { font: 900 calc(var(--u) * 13)/1 "Nunito", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #f6dfa0; }
.vs-mic { width: calc(var(--u) * 42); height: calc(var(--u) * 42); flex: none; color: #fff8ec; opacity: .45; transition: opacity .3s; --lv: 0; }
.vs-mic .ring { fill: rgba(20, 6, 40, .4); stroke: rgba(255, 255, 255, .25); stroke-width: 2; }
.vs-mic .lvl { fill: none; stroke: #7cf0c4; stroke-width: 3; stroke-dasharray: 107; stroke-dashoffset: calc(107 - 107 * var(--lv)); transform: rotate(-90deg); transform-origin: 20px 20px; transition: stroke-dashoffset .08s linear; }
.vs-mic .cap { fill: currentColor; }
.vs-mic .stand { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.vs-mic[data-state="on"], .vs-mic[data-state="voice"], .vs-mic[data-state="deaf"] { opacity: 1; }
.vs-mic[data-state="on"] .ring, .vs-mic[data-state="voice"] .ring { stroke: rgba(124, 240, 196, .65); }
.vs-mic[data-state="deaf"] .cap { fill: rgba(255, 255, 255, .45); }
.vs-mic[data-state="off"] .lvl { stroke-dashoffset: 107; }

/* the actions at the bottom right (Leave, Listen, Next): violet glass, the step forward in gold */
.vs-actions { position: absolute; right: calc(var(--u) * 36); bottom: calc(var(--u) * 30); z-index: 12; display: flex; gap: calc(var(--u) * 14); align-items: center; }
.vs-actions[hidden] { display: none; }
.vs-act { display: inline-flex; align-items: center; gap: calc(var(--u) * 11); height: calc(var(--u) * 58); padding: 0 calc(var(--u) * 18) 0 calc(var(--u) * 8);
  border: 0; border-radius: 999px; cursor: pointer; font: 1000 calc(var(--u) * 20)/1 "Nunito", sans-serif; color: #fff8ec; -webkit-tap-highlight-color: transparent;
  background: linear-gradient(180deg, rgba(92, 44, 150, .86), rgba(58, 22, 104, .9)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 calc(var(--u) * 2) 0 rgba(255, 255, 255, .22), inset 0 0 0 1.5px rgba(255, 255, 255, .14), 0 calc(var(--u) * 10) calc(var(--u) * 24) rgba(30, 10, 60, .3);
  transition: translate .35s cubic-bezier(.3, 1.6, .4, 1), scale .18s; animation: vsIn .45s cubic-bezier(.3, 1.4, .4, 1) backwards; }
.vs-act:hover { translate: 0 calc(var(--u) * -3); }
.vs-act:active { scale: .95; }
.vs-act .ic { width: calc(var(--u) * 42); height: calc(var(--u) * 42); border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .14); }
.vs-act .ic svg { width: 58%; height: 58%; }
.vs-act kbd { min-width: calc(var(--u) * 30); height: calc(var(--u) * 28); font-size: calc(var(--u) * 13); }
.vs-act.gold { color: #3a1b00; padding: 0 calc(var(--u) * 26) 0 calc(var(--u) * 10); background: linear-gradient(170deg, #ffe58f, #ffc53d 52%, #f5a50a);
  box-shadow: inset 0 calc(var(--u) * 2) 0 rgba(255, 255, 255, .7), inset 0 calc(var(--u) * -5) 0 rgba(176, 96, 0, .45), 0 calc(var(--u) * 10) calc(var(--u) * 24) rgba(120, 60, 0, .3); }
.vs-act.gold .ic { background: rgba(255, 255, 255, .35); }
.vs-act.gold:not(:has(.ic)) { padding-left: calc(var(--u) * 26); }
.vs-act.glow { animation: vsGlow 1.6s ease-in-out infinite; }
@keyframes vsGlow { 50% { box-shadow: inset 0 calc(var(--u) * 2) 0 rgba(255, 255, 255, .22), 0 0 0 calc(var(--u) * 4) rgba(255, 213, 107, .55), 0 0 calc(var(--u) * 30) rgba(255, 200, 90, .6); } }
.vs-act.tog { opacity: .7; }
.vs-act.tog.on { opacity: 1; box-shadow: inset 0 calc(var(--u) * 2) 0 rgba(255, 255, 255, .22), inset 0 0 0 2px #7cf0c4, 0 0 calc(var(--u) * 16) rgba(124, 240, 196, .5); }
@keyframes vsIn { from { opacity: 0; transform: translateY(30%) scale(.9); } }

/* the gold step forward and the violet glass of the cards (the house look; the same values as the mock-up frame's
   c1-gold / c1-glass, repeated here so the module stands alone in the game) */
.vs-ui .c1-gold { display: inline-flex; align-items: center; gap: calc(var(--u) * 12); height: calc(var(--u) * 66); padding: 0 calc(var(--u) * 30);
  border: 0; border-radius: 999px; cursor: pointer; font: 1000 calc(var(--u) * 27)/1 "Nunito", sans-serif; color: #3a1b00;
  background: linear-gradient(170deg, #ffe58f, #ffc53d 52%, #f5a50a);
  box-shadow: inset 0 calc(var(--u) * 2) 0 rgba(255, 255, 255, .7), inset 0 calc(var(--u) * -5) 0 rgba(176, 96, 0, .45), 0 calc(var(--u) * 10) calc(var(--u) * 24) rgba(120, 60, 0, .25);
  transition: translate .35s cubic-bezier(.3, 1.6, .4, 1), scale .2s; }
.vs-ui .c1-glass { display: inline-flex; align-items: center; gap: calc(var(--u) * 12); height: calc(var(--u) * 66); padding: 0 calc(var(--u) * 28);
  border: 0; border-radius: 999px; cursor: pointer; font: 1000 calc(var(--u) * 25)/1 "Nunito", sans-serif; color: #fff8ec;
  background: linear-gradient(180deg, rgba(92, 44, 150, .86), rgba(58, 22, 104, .9)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 calc(var(--u) * 2) 0 rgba(255, 255, 255, .22), inset 0 0 0 1.5px rgba(255, 255, 255, .14), 0 calc(var(--u) * 10) calc(var(--u) * 24) rgba(30, 10, 60, .3); }
.vs-ui .c1-gold:hover, .vs-ui .c1-glass:hover { translate: 0 calc(var(--u) * -3); }
.vs-ui .c1-gold:active, .vs-ui .c1-glass:active { scale: .96; }
.vs-ui .c1-gold kbd, .vs-ui .c1-glass kbd { min-width: calc(var(--u) * 30); height: calc(var(--u) * 30); font-size: calc(var(--u) * 14); }
.f-ios .vs-ui .c1-gold, .f-ios .vs-ui .c1-glass { height: calc(var(--u) * 38); padding: 0 calc(var(--u) * 16); font-size: calc(var(--u) * 16); }
.f-ios .vs-ui .c1-gold kbd, .f-ios .vs-ui .c1-glass kbd { display: none; }

/* the cards: Mark's frosted glass, rainbow at the edge, lit letters on top */
.vs-ui .vs-mark { z-index: 31; } .vs-ui .vs-cloud { z-index: 32; }   /* Mark and his words stay bright beside a card */
.vs-cardhost { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; background: radial-gradient(70% 70% at 55% 50%, rgba(30, 14, 60, .12), rgba(30, 14, 60, .42)); }
.vs-cardhost[hidden] { display: none; }
.vs-card { position: relative; width: calc(var(--u) * 700); max-width: 62%; padding: calc(var(--u) * 34) calc(var(--u) * 46) calc(var(--u) * 36); border-radius: calc(var(--u) * 40); text-align: center;
  background: linear-gradient(165deg, rgba(255, 255, 255, .86), rgba(246, 242, 255, .72) 60%, rgba(255, 250, 244, .8)); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: inset 0 calc(var(--u) * 2) 0 #fff, inset 0 0 calc(var(--u) * 40) rgba(255, 255, 255, .6), 0 calc(var(--u) * 24) calc(var(--u) * 60) rgba(30, 10, 60, .35); margin-left: calc(var(--u) * 200); }
.vs-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: calc(var(--u) * 3); pointer-events: none;
  background: linear-gradient(120deg, #ffd1e8, #fff1b8, #c8f7e1, #c6ecff, #dcd0ff, #ffd1e8); background-size: 300% 100%; animation: vsIris 9s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
@keyframes vsIris { to { background-position: 300% 0; } }
.vs-card-brand { display: flex; justify-content: center; min-height: calc(var(--u) * 30); margin-bottom: calc(var(--u) * 6); }
.vs-card h2 { margin: calc(var(--u) * 6) 0 calc(var(--u) * 12); font: 1000 calc(var(--u) * 38)/1.1 "Nunito", sans-serif; color: #2a1245; }
.vs-card p { margin: 0 auto calc(var(--u) * 10); max-width: calc(var(--u) * 560); font: 800 calc(var(--u) * 24)/1.3 "Nunito", sans-serif; color: #4a3566; }
.vs-card p.sm { font-size: calc(var(--u) * 18); color: #6b5a85; }
.vs-card-btns { display: flex; gap: calc(var(--u) * 16); justify-content: center; margin-top: calc(var(--u) * 22); flex-wrap: wrap; }
.vs-cardhost.away { background: radial-gradient(70% 70% at 55% 55%, rgba(30, 14, 60, .25), rgba(30, 14, 60, .55)); }

/* ---------------------------------------------------------------------------------------------- the stage */
.st { position: absolute; inset: 0; overflow: hidden; --bgblur: 5px; }
.st-bg { position: absolute; inset: 0; overflow: hidden; background: #2a1e3c; }
.st-drift { position: absolute; inset: -4%; animation: stDrift 60s ease-in-out infinite alternate; }
.st-drift img { width: 100%; height: 100%; object-fit: cover; filter: blur(var(--bgblur)) saturate(1.05); transition: filter .8s; }
@keyframes stDrift { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.06) translate(-1.2%, -.6%); } }
.st-scrim { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 80% at 58% 48%, rgba(36, 18, 66, .1), rgba(36, 18, 66, .42)), linear-gradient(180deg, rgba(26, 12, 48, .28), rgba(26, 12, 48, 0) 30%, rgba(26, 12, 48, .4)); }
.st-back, .st-fx { position: absolute; left: 0; top: 0; pointer-events: none; }
.st-back { z-index: 1; }
.st-ladder { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.st-layer { position: absolute; inset: 0; z-index: 3; }
/* on the choosing screens the singing furniture rests: no ladder, no ball */
.st[data-mode="menu"] .st-ladder, .st[data-mode="menu"] .gm, .st[data-mode="range"] .st-ladder, .st[data-mode="range"] .gm { opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
.st-ladder, .gm { transition: opacity .4s; }
.st-fx { z-index: 6; }
.st.breathe .st-back { animation: stBreathe 3s ease-in-out; }
@keyframes stBreathe { 50% { opacity: .55; } }
.st-rail { position: absolute; width: calc(var(--u) * 10); translate: -50% 0; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .22)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 0 calc(var(--u) * 14) rgba(255, 255, 255, .25); }
.st-bead { position: absolute; translate: -50% -50%; display: grid; place-items: center; }
.st-bead .sym { position: relative; z-index: 2; transition: transform .3s cubic-bezier(.3, 1.6, .4, 1), filter .3s; filter: saturate(.8) brightness(.95); opacity: .82; }
.st-bead .halo { position: absolute; width: calc(var(--u) * 64); height: calc(var(--u) * 64); border-radius: 50%; background: radial-gradient(closest-side, var(--c), transparent); opacity: 0; transition: opacity .3s; }
.st-bead .lab { position: absolute; right: calc(100% + var(--u) * 10); top: 50%; translate: 0 -50%; white-space: nowrap;
  font: 1000 calc(var(--u) * 17)/1 "Nunito", sans-serif; letter-spacing: .2em; color: var(--cs); -webkit-text-stroke: 0; text-shadow: 0 0 calc(var(--u) * 3) rgba(255, 255, 255, .95), 0 0 calc(var(--u) * 8) rgba(255, 255, 255, .7); }
.st-bead.target .sym { opacity: 1; filter: none; transform: scale(1.25); animation: stPulse 1.4s ease-in-out infinite; }
.st-bead.target .halo { opacity: .55; }
.st-bead.voice .sym { opacity: 1; filter: brightness(1.2); transform: scale(1.4); }
.st-bead.voice .halo { opacity: .9; }
.st-bead.done .sym { opacity: 1; filter: none; }
@keyframes stPulse { 50% { transform: scale(1.38); } }

/* ---------------------------------------------------------------------------------------------- GAME: Singing Glass */
.gm { position: absolute; inset: 0; pointer-events: none; }
.gm:not(.on) .gm-ball, .gm:not(.on) .gm-hint, .gm:not(.on) .gm-ghost { display: none; }   /* the ball is the game's: not on an exercise */
.gm-wall { position: absolute; left: 0; top: 0; will-change: transform; transition: opacity .7s, filter .5s; }
.gm-wall .pane { position: absolute; left: 0; top: 0; overflow: visible; }
.gm-wall .door { position: absolute; left: 50%; width: 190%; height: calc(var(--u) * 170); translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .95), var(--c) 22%, var(--c2) 58%, transparent); opacity: .45; mix-blend-mode: screen; transition: opacity .5s; }
.gm-wall .door::after { content: ""; position: absolute; left: 50%; top: 50%; width: 46%; height: 34%; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, #fff, rgba(255, 255, 255, 0)); opacity: .9; }
.gm-wall.front .door { opacity: 1; }
.gm-wall.waiting .door { animation: gmDoor 1.3s ease-in-out infinite; }
.gm-wall.locked .door { opacity: 1; filter: brightness(1.3); }
@keyframes gmDoor { 50% { opacity: .55; transform: scale(.92); } }
.gm-wall .lab { position: absolute; left: 50%; translate: -50% -50%; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 6); }
.gm-wall.passed { opacity: 0; filter: brightness(1.6); transition: opacity 1.1s .25s, filter .3s; }
.gm-wall.bump .pane { animation: gmBump .5s ease-out; }
@keyframes gmBump { 30% { filter: brightness(1.35); } }
.gm-ball { position: absolute; left: 0; top: 0; will-change: transform; --c: #ffffff; --lit: 0; --tc: #fff; }
.gm-ball i { position: absolute; border-radius: 50%; }
.gm-ball .aura { inset: -120%; background: radial-gradient(closest-side, var(--c), transparent 70%); opacity: calc(.15 + var(--lit) * .55); transition: opacity .2s; }
.gm-ball .body { inset: 0; background: radial-gradient(circle at 50% 56%, #fff 0 16%, var(--c) 46%, color-mix(in srgb, var(--c) 55%, #2c305c) 92%);
  box-shadow: inset 0 0 calc(var(--u) * 10) rgba(255, 255, 255, .7), 0 0 calc(var(--u) * 18) var(--c); opacity: calc(.55 + var(--lit) * .45); }
.gm-ball .rim { inset: -3%; background: conic-gradient(from 30deg, #ffd1e8, #fff1b8, #c8f7e1, #c6ecff, #dcd0ff, #ffd1e8);
  -webkit-mask: radial-gradient(closest-side, transparent 86%, #000 90%, #000 97%, transparent); mask: radial-gradient(closest-side, transparent 86%, #000 90%, #000 97%, transparent); opacity: .8; }
.gm-ball .spec { left: 20%; top: 14%; width: 34%; height: 24%; background: radial-gradient(closest-side, rgba(255, 255, 255, .95), transparent); }
.gm-ball .hold { position: absolute; inset: -34%; width: 168%; height: 168%; transform: rotate(-90deg); overflow: visible; }
.gm-ball .hold .trk { fill: none; stroke: rgba(255, 255, 255, .18); stroke-width: 3; }
.gm-ball .hold .arc { fill: none; stroke: var(--tc); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 3px var(--tc)); }
.gm-ball.asleep .body { opacity: .4; }
.gm-ball.deaf .body { animation: gmEar 1s ease-in-out infinite; }
@keyframes gmEar { 50% { transform: scale(.9); } }
.gm-ball.match .aura { opacity: .85; }
.gm-ball.flash .body { animation: gmFlash .6s ease-out; }
@keyframes gmFlash { 25% { transform: scale(1.35); filter: brightness(1.8); } }
.gm-ghost { position: absolute; left: 0; top: 0; width: calc(var(--u) * 60); height: calc(var(--u) * 60); margin: calc(var(--u) * -30) 0 0 calc(var(--u) * -30); border-radius: 50%; opacity: 0;
  border: calc(var(--u) * 3) dashed var(--c); box-shadow: 0 0 calc(var(--u) * 20) var(--c); }
.gm-ghost.on { animation: gmGhost 1.6s ease-out; }
@keyframes gmGhost { 0% { opacity: 0; scale: .6; } 30% { opacity: .9; scale: 1; } 100% { opacity: 0; scale: 1.25; } }
.gm-hint, .vx-hint { position: absolute; left: 0; top: 0; width: calc(var(--u) * 36); height: calc(var(--u) * 36); opacity: 0; transition: opacity .3s; pointer-events: none; }
.gm-hint svg, .vx-hint svg { width: 100%; height: 100%; overflow: visible; }
.gm-hint path, .vx-hint path { fill: none; stroke: var(--c, #fff); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px var(--c)) drop-shadow(0 0 2px #fff); }
.gm-hint.on { opacity: 1; animation: gmHint 1s ease-in-out infinite; }
@keyframes gmHint { 50% { margin-top: calc(var(--u) * -6); } }
.vx-hint { translate: -50% -50%; }
.vx-hint[data-dir="down"] svg { rotate: 180deg; }
.vx-hint.on { animation: vxHint 2.2s ease-out; }
@keyframes vxHint { 0%, 100% { opacity: 0; } 15%, 75% { opacity: 1; } 40% { margin-top: calc(var(--u) * -8); } }

/* mode and game choices: two big glass cards with lit titles */
.vs-modes { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 46); padding-left: calc(var(--u) * 300); padding-top: calc(var(--u) * 60); }
.vs-brand { position: absolute; left: calc(50% + var(--u) * 150); top: calc(var(--u) * 128); translate: -50% 0; }
.vs-mode, .vs-tile, .vs-rangecard { position: relative; border: 0; cursor: pointer; color: #2a1245; font-family: "Nunito", sans-serif; -webkit-tap-highlight-color: transparent;
  background: linear-gradient(165deg, rgba(255, 255, 255, .8), rgba(246, 242, 255, .6) 60%, rgba(255, 250, 244, .72)); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: inset 0 calc(var(--u) * 2) 0 #fff, inset 0 0 calc(var(--u) * 30) rgba(255, 255, 255, .55), 0 calc(var(--u) * 18) calc(var(--u) * 40) rgba(30, 10, 60, .3);
  transition: translate .35s cubic-bezier(.3, 1.6, .4, 1), scale .18s, box-shadow .3s; }
.vs-mode::before, .vs-tile::before, .vs-rangecard::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: calc(var(--u) * 2.5); pointer-events: none;
  background: linear-gradient(120deg, #ffd1e8, #fff1b8, #c8f7e1, #c6ecff, #dcd0ff, #ffd1e8); background-size: 300% 100%; animation: vsIris 9s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
/* ten tiles over a drifting backdrop: no live backdrop blur (a milky fill instead), and the drift rests on menus */
.vs-tile, .vs-rangecard { backdrop-filter: none; -webkit-backdrop-filter: none; background: linear-gradient(165deg, rgba(255, 255, 255, .9), rgba(246, 242, 255, .76) 60%, rgba(255, 250, 244, .84)); }
.st[data-mode="menu"] .st-drift { animation-play-state: paused; }
.vs-mode:hover, .vs-tile:hover, .vs-rangecard:hover { translate: 0 calc(var(--u) * -6); box-shadow: inset 0 calc(var(--u) * 2) 0 #fff, 0 0 calc(var(--u) * 40) rgba(255, 220, 160, .55), 0 calc(var(--u) * 24) calc(var(--u) * 48) rgba(30, 10, 60, .32); }
.vs-mode:active, .vs-tile:active { scale: .97; }
.vs-mode { width: calc(var(--u) * 430); height: calc(var(--u) * 430); border-radius: calc(var(--u) * 44); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 14); padding: calc(var(--u) * 26); }
.vs-mode .em svg { filter: drop-shadow(0 0 calc(var(--u) * 10) rgba(255, 255, 255, .8)); }
.vs-mode .bd { font: 800 calc(var(--u) * 21)/1.3 "Nunito", sans-serif; color: #4a3566; text-align: center; max-width: calc(var(--u) * 340); }
.vs-mode .ex { font: 1000 calc(var(--u) * 17)/1 "Nunito", sans-serif; color: #a8640a; letter-spacing: .06em; }
.vs-mode kbd, .vs-tile kbd { position: absolute; right: calc(var(--u) * 16); top: calc(var(--u) * 16); }

/* the exercise library */
.vs-menu { position: absolute; left: calc(var(--u) * 470); right: calc(var(--u) * 70); top: calc(var(--u) * 160); bottom: calc(var(--u) * 108); display: flex; flex-direction: column; gap: calc(var(--u) * 16); }
.f-win .vs-tile .n { display: none; }
.vs-rangecard { display: flex; align-items: center; gap: calc(var(--u) * 18); height: calc(var(--u) * 84); border-radius: calc(var(--u) * 30); padding: 0 calc(var(--u) * 26) 0 calc(var(--u) * 14); text-align: left; }
.vs-rangecard .tx { display: grid; gap: calc(var(--u) * 4); min-width: calc(var(--u) * 190); }
.vs-rangecard .tx b { font: 1000 calc(var(--u) * 15)/1 "Nunito", sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #7c3aed; }
.vs-rangecard .tx span { font: 1000 calc(var(--u) * 26)/1 "Nunito", sans-serif; }
.vs-rangecard .band { flex: 1; height: calc(var(--u) * 14); border-radius: 999px; background: rgba(60, 40, 100, .14); position: relative; }
.vs-rangecard .band i { position: absolute; top: 0; bottom: 0; left: calc(var(--lo) * 100%); right: calc((1 - var(--hi)) * 100%); border-radius: inherit;
  background: linear-gradient(90deg, #F2545B, #F7953B, #F6CF45, #3CC48A, #8FE3F5, #4B7FF2, #6A3FC8); box-shadow: 0 0 calc(var(--u) * 12) rgba(255, 200, 140, .7); }
.vs-rangecard .go { font: 1000 calc(var(--u) * 20)/1 "Nunito", sans-serif; color: #3a1b00; padding: calc(var(--u) * 12) calc(var(--u) * 20); border-radius: 999px; background: linear-gradient(170deg, #ffe58f, #ffc53d 52%, #f5a50a); white-space: nowrap; display: inline-flex; align-items: center; gap: calc(var(--u) * 8); }
.vs-rangecard.glow { animation: vsGlowCard 1.8s ease-in-out infinite; }
@keyframes vsGlowCard { 50% { box-shadow: inset 0 calc(var(--u) * 2) 0 #fff, 0 0 0 calc(var(--u) * 4) rgba(255, 213, 107, .6), 0 0 calc(var(--u) * 36) rgba(255, 200, 90, .55); } }
.vs-grid { flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: 1fr 1fr; gap: calc(var(--u) * 18); }
.vs-tile { border-radius: calc(var(--u) * 30); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 6); padding: calc(var(--u) * 12); }
.vs-tile .n { position: absolute; left: calc(var(--u) * 16); top: calc(var(--u) * 12); font: 1000 calc(var(--u) * 18)/1 "Nunito", sans-serif; color: rgba(60, 40, 100, .45); }
.vs-tile .tt { font: 1000 calc(var(--u) * 23)/1.05 "Nunito", sans-serif; text-align: center; }
.vs-tile .sk { font: 800 calc(var(--u) * 15)/1.15 "Nunito", sans-serif; color: #6b5a85; text-align: center; }
.vs-tile .lv { display: flex; gap: calc(var(--u) * 8); margin-top: calc(var(--u) * 6); }
.vs-tile .lv i { width: calc(var(--u) * 16); height: calc(var(--u) * 16); border-radius: 50%; background: rgba(60, 40, 100, .14); position: relative; }
.vs-tile .lv i.on { background: linear-gradient(170deg, #ffe58f, #ffc53d 52%, #f5a50a); box-shadow: 0 0 calc(var(--u) * 8) rgba(255, 197, 61, .8); }
.vs-tile .lv i.open { background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 2px #ffc53d, 0 0 calc(var(--u) * 8) rgba(255, 197, 61, .6); animation: vsOpen 1.6s ease-in-out infinite; }
.vs-tile .lv i.lock::after { content: ""; position: absolute; inset: 22%; border-radius: 2px; background: rgba(60, 40, 100, .38); }
.vs-tile .lv i.lock::before { content: ""; position: absolute; left: 30%; right: 30%; top: 4%; height: 40%; border: 2px solid rgba(60, 40, 100, .38); border-bottom: 0; border-radius: 6px 6px 0 0; }
@keyframes vsOpen { 50% { transform: scale(1.18); } }
.vs-tile.all::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px rgba(255, 197, 61, .8), inset 0 0 calc(var(--u) * 24) rgba(255, 213, 107, .35); pointer-events: none; }

/* ---------------------------------------------------------------------------------------------- EXERCISES: the ten pictures */
.vx { position: absolute; inset: 0; pointer-events: none; }
.vx > * { position: absolute; }
.vx-syl, .vx-name, .vx-word, .vx-tag { translate: -50% -50%; position: absolute; }
.vx-syl { animation: vsIn .5s cubic-bezier(.3, 1.4, .4, 1); pointer-events: none; z-index: 4; }
/* 1 Long Light: the glass sphere */
.vx-sphere { translate: -50% -50%; border-radius: 50%; --lvl: 0; --glow: .2; }
.vx-sphere .liq { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; }
.vx-sphere .liq::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--lvl) * 100%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 60%, #fff), var(--c) 40%, color-mix(in srgb, var(--c) 70%, #2c305c)); box-shadow: 0 0 calc(var(--u) * 30) var(--c); }
.vx-sphere .wave { position: absolute; left: -100%; width: 300%; height: 12%; bottom: calc(var(--lvl) * 100% - 6%); animation: vxWave 2.4s linear infinite; opacity: calc(var(--lvl) * 4); }
.vx-sphere .wave svg { width: 100%; height: 100%; display: block; }
.vx-sphere .wave path { fill: color-mix(in srgb, var(--c) 60%, #fff); }
@keyframes vxWave { to { transform: translateX(33.33%); } }
.vx-sphere .inner { inset: 8%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 40%, #fff), transparent); opacity: calc(var(--glow) * .8); position: absolute; }
.vx-sphere .glass { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 60%, rgba(255, 255, 255, .06), rgba(255, 255, 255, .28) 70%, rgba(255, 255, 255, .55));
  box-shadow: inset 0 0 calc(var(--u) * 40) rgba(255, 255, 255, .55), 0 calc(var(--u) * 30) calc(var(--u) * 60) rgba(30, 10, 60, .3); }
.vx-sphere .rim { position: absolute; inset: -1.5%; border-radius: 50%; background: conic-gradient(from 20deg, #ffd1e8, #fff1b8, #c8f7e1, #c6ecff, #dcd0ff, #ffd1e8);
  -webkit-mask: radial-gradient(closest-side, transparent 94%, #000 96%, #000 99%, transparent); mask: radial-gradient(closest-side, transparent 94%, #000 96%, #000 99%, transparent); animation: vxSpin 14s linear infinite; }
@keyframes vxSpin { to { rotate: 360deg; } }
.vx-sphere .spec { position: absolute; left: 18%; top: 10%; width: 36%; height: 22%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .9), transparent); }
.vx-sphere .sym { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
.vx-sphere.call { animation: vxCall .9s ease-out; }
@keyframes vxCall { 30% { filter: brightness(1.3); scale: 1.04; } }
.vx-sphere.match { animation: vxBreathe 1.8s ease-in-out infinite; }
@keyframes vxBreathe { 50% { scale: 1.035; } }
.vx-sphere.off .liq::before { animation: vxShimmer .5s ease-in-out infinite; }
@keyframes vxShimmer { 50% { filter: brightness(.85) hue-rotate(10deg); } }
.vx-sphere.full .glass { box-shadow: inset 0 0 calc(var(--u) * 60) #fff, 0 0 calc(var(--u) * 80) var(--c); }
/* 2 Echo Two: glass pipes */
.vx-pipe { --k: 0; }
.vx-pipe .tube { position: absolute; inset: 0; border-radius: calc(var(--u) * 40) calc(var(--u) * 40) calc(var(--u) * 16) calc(var(--u) * 16);
  background: linear-gradient(90deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .26) 40%, rgba(255, 255, 255, .5)); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .8), 0 0 calc(var(--u) * 18) rgba(255, 255, 255, .2); }
.vx-pipe .fill { position: absolute; left: 12%; right: 12%; bottom: 4%; height: calc(var(--k) * 88%); border-radius: calc(var(--u) * 30) calc(var(--u) * 30) calc(var(--u) * 10) calc(var(--u) * 10);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 50%, #fff), var(--c)); box-shadow: 0 0 calc(var(--u) * 20) var(--c); transition: height .25s; }
.vx-pipe .shine { position: absolute; left: 18%; top: 6%; bottom: 6%; width: 12%; border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .1)); }
.vx-pipe .cap { position: absolute; left: 50%; top: 0; translate: -50% -50%; }
.vx-pipe.call .fill { height: 88%; opacity: 0; transition: opacity .6s; }
.vx-pipe.call.lit .fill { opacity: 1; transition: opacity .1s; }
.vx-pipe.echo.wait .tube { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7), 0 0 0 calc(var(--u) * 2) rgba(255, 255, 255, .25); border-style: dashed; }
.vx-pipe.echo.now .tube { animation: vxNow 1.3s ease-in-out infinite; }
@keyframes vxNow { 50% { box-shadow: inset 0 0 0 2px #fff, 0 0 calc(var(--u) * 26) var(--c); } }
.vx-pipe.done .fill { height: 88%; }
/* 3/4 steps and basins */
.vx-step { --k: 0; }
.vx-step .face { position: absolute; inset: 0; border-radius: calc(var(--u) * 18) calc(var(--u) * 18) calc(var(--u) * 6) calc(var(--u) * 6);
  background: linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .3) 30%, rgba(240, 236, 255, .22)); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .85), 0 calc(var(--u) * 18) calc(var(--u) * 30) rgba(30, 10, 60, .25); }
.vx-step .top { position: absolute; left: 4%; right: 4%; top: 0; height: calc(var(--u) * 10); border-radius: 999px; background: var(--c); opacity: calc(.25 + var(--k) * .75); box-shadow: 0 0 calc(var(--u) * (6 + 24 * var(--k))) var(--c); }
.vx-step .sym { position: absolute; left: 50%; top: calc(var(--u) * 54); translate: -50% 0; opacity: .85; }
.vx-falls .vx-step .pool { position: absolute; left: 8%; right: 8%; top: calc(var(--u) * 8); height: calc(var(--u) * 22); border-radius: 0 0 50% 50%; background: radial-gradient(60% 100% at 50% 0, var(--c), transparent); opacity: calc(var(--k) * .9); }
.vx-step.call .top { animation: vxTop .7s ease-out; }
@keyframes vxTop { 30% { opacity: 1; box-shadow: 0 0 calc(var(--u) * 36) var(--c); } }
.vx-step.now .face { animation: vxNow 1.3s ease-in-out infinite; }
.vx-step.done { --k: 1; }
.vx-step.done .sym { opacity: 1; }
.vx-hopper { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform; background: radial-gradient(circle at 40% 35%, #fff, var(--c) 55%, color-mix(in srgb, var(--c) 60%, #2c305c));
  box-shadow: 0 0 calc(var(--u) * 24) var(--c), inset 0 0 calc(var(--u) * 6) #fff; }
/* 5 stones */
.vx-arcs { position: absolute; left: 0; top: 0; overflow: visible; }
.vx-arcs path { fill: none; stroke-width: calc(var(--u) * 3); stroke-dasharray: calc(var(--u) * 2) calc(var(--u) * 9); stroke-linecap: round; opacity: .35; }
.vx-arcs path.lit { opacity: 1; filter: drop-shadow(0 0 4px #fff); }
.vx-stone { --k: 0; }
.vx-stone .bob { position: absolute; inset: 0; animation: vxBob 3.2s ease-in-out infinite; animation-delay: var(--d); }
@keyframes vxBob { 50% { transform: translateY(calc(var(--u) * -4)); } }
.vx-stone .body { position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .35)); box-shadow: inset 0 0 0 1.5px #fff, 0 calc(var(--u) * 14) calc(var(--u) * 20) rgba(30, 10, 60, .3); }
.vx-stone .glow { position: absolute; inset: -40% -10%; border-radius: 50%; background: radial-gradient(closest-side, var(--c), transparent); opacity: calc(.2 + var(--k) * .8); }
.vx-stone .sym { position: absolute; left: 50%; top: 50%; translate: -50% -78%; }
.vx-stone.call .glow, .vx-stone.done .glow { opacity: 1; }
.vx-stone.now .body { animation: vxNow 1.3s ease-in-out infinite; }
/* 6 pebbles, footprints and hops */
.vx-pebble { translate: -50% -50%; --k: 0; }
.vx-pebble .body { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 45% 35%, #fff, rgba(255, 255, 255, .4) 60%, color-mix(in srgb, var(--c) 35%, transparent));
  box-shadow: inset 0 0 0 1.5px #fff, 0 0 calc(var(--u) * (8 + 30 * var(--k))) var(--c), 0 calc(var(--u) * 12) calc(var(--u) * 20) rgba(30, 10, 60, .25); }
.vx-pebble .sym { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
.vx-pebble.call .body, .vx-pebble.done .body { box-shadow: inset 0 0 0 2px #fff, 0 0 calc(var(--u) * 40) var(--c); }
.vx-pebble.now { animation: vxNowP 1.3s ease-in-out infinite; }
@keyframes vxNowP { 50% { filter: brightness(1.2); } }
.vx-link { position: absolute; left: 0; top: 0; overflow: visible; }
.vx-link .fp { opacity: 0; animation: vxFp .5s ease-out forwards; filter: drop-shadow(0 0 4px #fff); }
@keyframes vxFp { to { opacity: .95; } }
.vx-link .hop { stroke-width: calc(var(--u) * 6); stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: vxDraw 1s ease-out forwards; stroke-linecap: round; filter: drop-shadow(0 0 6px #fff); }
@keyframes vxDraw { to { stroke-dashoffset: 0; } }
.vx-link .ghost { stroke-width: calc(var(--u) * 3); stroke-dasharray: calc(var(--u) * 4) calc(var(--u) * 4); opacity: 0; animation: vxFp .6s .5s ease-out forwards; }
.vx-word { animation: vsIn .6s cubic-bezier(.3, 1.4, .4, 1); }
/* 7 the corridor */
.vx-start { translate: -50% -50%; }
.vx-start.waiting { animation: vxStart 1.2s ease-in-out infinite; }
@keyframes vxStart { 50% { scale: 1.25; filter: drop-shadow(0 0 10px #fff); } }
.vx-finish { width: calc(var(--u) * 54); height: calc(var(--u) * 54); translate: -50% -50%; }
.vx-finish svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.vx-finish .trk { fill: rgba(255, 255, 255, .2); stroke: rgba(255, 255, 255, .5); stroke-width: 4; }
.vx-finish .arc { fill: none; stroke: #ffd56b; stroke-width: 7; stroke-dasharray: 100; stroke-dashoffset: 100; stroke-linecap: round; filter: drop-shadow(0 0 4px #ffd56b); }
.vx-ghostlight { position: absolute; left: 0; top: 0; width: calc(var(--u) * 26); height: calc(var(--u) * 26); margin: calc(var(--u) * -13) 0 0 calc(var(--u) * -13); border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #fff, rgba(255, 240, 200, .6) 50%, transparent 72%); box-shadow: 0 0 calc(var(--u) * 24) #fff; transition: opacity .3s; }
.vx-ghostlight.on { opacity: 1; }
/* 8 beads on strings */
.vx-strings { position: absolute; left: 0; top: 0; overflow: visible; }
.vx-strings path { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: calc(var(--u) * 2); }
.vx-strings path.you { stroke-dasharray: calc(var(--u) * 6) calc(var(--u) * 6); }
.vx-bead { translate: -50% -50%; --k: 0; }
.vx-bead .body { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 40% 32%, #fff, var(--c) 52%, color-mix(in srgb, var(--c) 60%, #2c305c)); box-shadow: 0 0 calc(var(--u) * 16) var(--c); }
.vx-bead .spec { position: absolute; left: 22%; top: 14%; width: 30%; height: 22%; border-radius: 50%; background: rgba(255, 255, 255, .85); }
.vx-bead.mk { opacity: .45; transition: opacity .4s; }
.vx-bead.mk.lit { opacity: 1; }
.vx-bead.mk.call { animation: vxCall .7s ease-out; }
.vx-bead.you .body { background: rgba(255, 255, 255, calc(.25 + var(--k) * .5)); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85); }
.vx-bead.you .spec { opacity: .4; }
.vx-bead.you.now .body { animation: vxNow 1.2s ease-in-out infinite; }
.vx-bead.you.done .body { background: radial-gradient(circle at 40% 32%, #fff, var(--c) 52%, color-mix(in srgb, var(--c) 60%, #2c305c)); box-shadow: 0 0 calc(var(--u) * 22) var(--c); }
.vx-bead.you::after { content: "la"; position: absolute; left: 50%; top: 115%; translate: -50% 0; font: 1000 calc(var(--u) * 16)/1 "Nunito", sans-serif; color: #fff; text-shadow: 0 0 6px rgba(80, 40, 140, .8); }
/* 9 bubbles */
.vx-bubble { translate: -50% -50%; --k: 0; }
.vx-bubble .wob { position: absolute; inset: 0; animation: vxBob 2.6s ease-in-out infinite; animation-delay: var(--d); }
.vx-bubble .body { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 55%, rgba(255, 255, 255, .05), rgba(255, 255, 255, .22) 70%, rgba(255, 255, 255, .6));
  box-shadow: inset 0 0 calc(var(--u) * 16) rgba(255, 255, 255, .7), 0 0 calc(var(--u) * (8 + 20 * var(--k))) var(--c); transition: transform .2s; }
.vx-bubble .irid { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, #ffd1e8, #fff1b8, #c8f7e1, #c6ecff, #dcd0ff, #ffd1e8);
  -webkit-mask: radial-gradient(closest-side, transparent 80%, #000 96%, transparent); mask: radial-gradient(closest-side, transparent 80%, #000 96%, transparent); opacity: .8; animation: vxSpin 6s linear infinite; }
.vx-bubble .spec { position: absolute; left: 20%; top: 14%; width: 30%; height: 20%; border-radius: 50%; background: rgba(255, 255, 255, .9); }
.vx-bubble .sym { position: absolute; left: 50%; top: 50%; translate: -50% -50%; opacity: .9; }
.vx-bubble::after { content: "pa"; position: absolute; left: 50%; top: 108%; translate: -50% 0; font: 1000 calc(var(--u) * 18)/1 "Nunito", sans-serif; color: #fff; text-shadow: 0 0 6px rgba(80, 40, 140, .8); }
.vx-bubble.call .wob { animation: vxWobble .5s ease-out; }
@keyframes vxWobble { 30% { transform: scale(1.12, .9); } 60% { transform: scale(.95, 1.06); } }
.vx-bubble.now .body { animation: vxNow 1.1s ease-in-out infinite; }
.vx-bubble.press .wob { transform: scale(1.12); transition: transform .12s; }
.vx-bubble.stretch .wob { animation: vxStretch .6s ease-in-out 2; }
@keyframes vxStretch { 50% { transform: scale(1.25, .8); } }
.vx-bubble.popped { animation: vxPop .45s ease-out forwards; }
@keyframes vxPop { 40% { scale: 1.35; opacity: .8; } 100% { scale: 1.6; opacity: 0; } }
/* 10 the console ring */
.vx-ringwrap { position: absolute; }
.vx-ringwrap svg { position: absolute; left: 0; top: 0; overflow: visible; }
.vx-ringwrap .well { fill: rgba(255, 255, 255, .35); stroke: rgba(255, 255, 255, .85); stroke-width: 2; }
.vx-ringwrap .knob { fill: #e8ebf3; stroke: #fff; stroke-width: 2; }
.vx-ringwrap .pad .face { fill: color-mix(in srgb, var(--c) 55%, #fff); stroke: rgba(255, 255, 255, .9); stroke-width: 2; opacity: .75; transition: fill .2s, opacity .2s; }
.vx-ringwrap .pad .aura { fill: var(--c); opacity: 0; transition: opacity .3s; }
.vx-ringwrap .pad.lit .face, .vx-ringwrap .pad.done .face { fill: var(--c); opacity: 1; }
.vx-ringwrap .pad.lit .aura, .vx-ringwrap .pad.done .aura { opacity: .9; }
.vx-ringwrap .pad.now .face { animation: vxPad 1.2s ease-in-out infinite; }
@keyframes vxPad { 50% { opacity: 1; fill: color-mix(in srgb, var(--c) 80%, #fff); } }
.vx-ringwrap .threads line { stroke-width: calc(var(--u) * 5); stroke-linecap: round; filter: drop-shadow(0 0 6px #fff); stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: vxDraw .6s ease-out forwards; }
.vx-ringwrap .rsym { position: absolute; translate: -50% -50%; }
.vx-ringwrap.win { animation: vxWin 1.2s ease-out; }
@keyframes vxWin { 30% { filter: brightness(1.3) drop-shadow(0 0 20px #fff); } }

/* ---------------------------------------------------------------------------------------------- range */
.rg { position: absolute; inset: 0; pointer-events: none; }
.rg-col { position: absolute; }
.rg-col .glass { position: absolute; inset: 0; border-radius: 999px; background: linear-gradient(90deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .25) 45%, rgba(255, 255, 255, .5)); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85), 0 0 calc(var(--u) * 20) rgba(255, 255, 255, .25); }
.rg-col .band { position: absolute; left: 14%; right: 14%; border-radius: 999px; opacity: 0; transition: opacity .6s, top .5s, height .5s;
  background: linear-gradient(0deg, #F2545B, #F7953B, #F6CF45, #3CC48A, #8FE3F5, #4B7FF2, #6A3FC8); box-shadow: 0 0 calc(var(--u) * 24) rgba(255, 220, 160, .8); }
.rg-col .band.on { opacity: 1; }
.rg-col .ticks i { position: absolute; left: 100%; width: calc(var(--u) * 14); height: 2px; background: var(--c); margin-left: calc(var(--u) * 6); opacity: .8; }
.rg-col .ticks i.c { width: calc(var(--u) * 24); height: 3px; }
.rg-col .ticks i.c::after { content: attr(data-n); position: absolute; left: calc(100% + var(--u) * 6); top: 50%; translate: 0 -50%; font: 1000 calc(var(--u) * 13)/1 "Nunito", sans-serif; letter-spacing: .16em; color: #fff; text-shadow: 0 0 6px rgba(80, 40, 140, .9); }
.rg-col .gem { position: absolute; left: 50%; width: calc(var(--u) * 34); height: calc(var(--u) * 34); translate: -50% -50%; rotate: 45deg; border-radius: calc(var(--u) * 6); opacity: 0; transition: opacity .4s, top .4s;
  background: linear-gradient(135deg, #fff, #ffe58f 40%, #ffc53d); box-shadow: 0 0 calc(var(--u) * 20) #ffd56b; }
.rg-col .gem.on { opacity: 1; }
.rg-col .pearl { position: absolute; left: 50%; width: calc(var(--u) * 46); height: calc(var(--u) * 46); translate: -50% -50%; border-radius: 50%; opacity: 0; transition: opacity .25s, top .08s linear;
  background: radial-gradient(circle at 40% 35%, #fff, #c8f0ff 50%, #7a8cff); box-shadow: 0 0 calc(var(--u) * (10 + 30 * var(--k, 0))) #fff; }
.rg-col .pearl.on { opacity: 1; }
.rg-read { position: absolute; translate: 0 -50%; font: 1000 calc(var(--u) * 64)/1 "Nunito", sans-serif; color: #fff; opacity: 0; transition: opacity .3s; text-shadow: 0 0 calc(var(--u) * 20) rgba(160, 120, 255, .9); }
.rg-read.on { opacity: 1; }
.rg-step { position: absolute; }

/* ---------------------------------------------------------------------------------------------- the way in */
.en { position: absolute; inset: 0; overflow: hidden; z-index: 2; background: #2a1e3c; }
.en-wide, .en-close { position: absolute; inset: 0; }
.en-wide img, .en-close img { width: 100%; height: 100%; object-fit: cover; display: block; }
.en-close { opacity: 0; }
.en-pin { position: absolute; width: calc(var(--u) * 120); height: calc(var(--u) * 120); translate: -50% -50%; border: 0; padding: 0; background: none; cursor: pointer; z-index: 3; transition: opacity .4s; -webkit-tap-highlight-color: transparent; }
.en-pin.gone { opacity: 0; pointer-events: none; }
.en-pin .ring { position: absolute; inset: 22%; border-radius: 50%; border: calc(var(--u) * 3) solid rgba(255, 240, 200, .95); box-shadow: 0 0 calc(var(--u) * 20) rgba(255, 220, 140, .9), inset 0 0 calc(var(--u) * 14) rgba(255, 220, 140, .7); animation: enPin 1.8s ease-out infinite; }
.en-pin .r2 { animation-delay: .9s; }
@keyframes enPin { 0% { scale: .6; opacity: 0; } 30% { opacity: 1; } 100% { scale: 1.5; opacity: 0; } }
.en-pin .lb { position: absolute; left: 50%; top: 100%; translate: -50% 0; padding: calc(var(--u) * 8) calc(var(--u) * 18); border-radius: 999px; white-space: nowrap;
  font: 1000 calc(var(--u) * 20)/1 "Nunito", sans-serif; color: #fff8ec; background: linear-gradient(180deg, rgba(92, 44, 150, .86), rgba(58, 22, 104, .9)); box-shadow: inset 0 calc(var(--u) * 2) 0 rgba(255, 255, 255, .22), 0 calc(var(--u) * 8) calc(var(--u) * 18) rgba(30, 10, 60, .3); }
.en-choices { position: absolute; right: calc(var(--u) * 70); bottom: calc(var(--u) * 70); display: flex; flex-direction: column; gap: calc(var(--u) * 14); z-index: 16; }
.en-choice { display: flex; align-items: center; gap: calc(var(--u) * 14); min-width: calc(var(--u) * 360); height: calc(var(--u) * 72); padding: 0 calc(var(--u) * 28) 0 calc(var(--u) * 12); border: 0; border-radius: 999px; cursor: pointer;
  font: 1000 calc(var(--u) * 28)/1 "Nunito", sans-serif; color: #fff8ec; background: linear-gradient(180deg, rgba(92, 44, 150, .88), rgba(58, 22, 104, .92)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 calc(var(--u) * 2) 0 rgba(255, 255, 255, .22), inset 0 0 0 1.5px rgba(255, 255, 255, .14), 0 calc(var(--u) * 12) calc(var(--u) * 26) rgba(30, 10, 60, .35); transition: translate .35s cubic-bezier(.3, 1.6, .4, 1); }
.en-choice:hover { translate: calc(var(--u) * -6) 0; }
.en-choice .k { width: calc(var(--u) * 46); height: calc(var(--u) * 46); border-radius: 50%; display: grid; place-items: center; font-size: calc(var(--u) * 22); color: #3a1b00; background: linear-gradient(170deg, #ffe58f, #ffc53d 52%, #f5a50a); }
/* the rock-star loading: stage beams in the seven colours sweep slowly through the haze */
.vs-load .vs-beams { position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen; overflow: hidden; }
.vs-load .vs-beams i { position: absolute; top: -10%; left: calc(30% + var(--i) * 9%); width: 7%; height: 120%; transform-origin: 50% 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 70%, #fff) 0%, color-mix(in srgb, var(--c) 40%, transparent) 40%, transparent 85%); opacity: .22; filter: blur(calc(var(--u) * 10));
  animation: vsBeam var(--d) ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.7s); }
@keyframes vsBeam { from { rotate: -14deg; opacity: .14; } to { rotate: 14deg; opacity: .3; } }

/* ---------------------------------------------------------------------------------------------- the iPhone frame (844 x 390) */
.f-ios .vs-mark { width: calc(var(--u) * 132); left: calc(var(--u) * 40); bottom: calc(var(--u) * -18); }
.f-ios .vs-cloud { left: calc(var(--u) * 54); bottom: calc(var(--u) * 150); max-width: calc(var(--u) * 138); padding: calc(var(--u) * 10) calc(var(--u) * 15) calc(var(--u) * 11);
  border-radius: calc(var(--u) * 20) calc(var(--u) * 20) calc(var(--u) * 20) calc(var(--u) * 6); }
.f-ios .vs-cloud .ln { font-size: calc(var(--u) * 14.5); margin-top: calc(var(--u) * 4); }
.f-ios .vs-cloud .nm { font-size: calc(var(--u) * 8.5); letter-spacing: calc(var(--u) * 2); }
.f-ios .vs-pill { top: calc(var(--u) * 8); height: calc(var(--u) * 36); gap: calc(var(--u) * 8); padding: 0 calc(var(--u) * 6) 0 calc(var(--u) * 14); }
.f-ios .vs-tt small { font-size: calc(var(--u) * 7.5); }
.f-ios .vs-tt b { font-size: calc(var(--u) * 14.5); }
.f-ios .vs-pips { gap: calc(var(--u) * 3); }
.f-ios .vs-pips i { width: calc(var(--u) * 10); height: calc(var(--u) * 10); }
.f-ios .vs-pips i em { font-size: calc(var(--u) * 7); }
.f-ios .vs-count b { font-size: calc(var(--u) * 17); }
.f-ios .vs-count small { font-size: calc(var(--u) * 7.5); }
.f-ios .vs-mic { width: calc(var(--u) * 24); height: calc(var(--u) * 24); }
.f-ios .vs-actions { right: calc(var(--u) * 4); top: 50%; bottom: auto; translate: 0 -50%; flex-direction: column; gap: calc(var(--u) * 8); }
.f-ios .vs-act { width: calc(var(--u) * 40); height: calc(var(--u) * 40); padding: 0; justify-content: center; }
.f-ios .vs-act .lb, .f-ios .vs-act kbd { display: none; }
.f-ios .vs-act .ic { width: calc(var(--u) * 28); height: calc(var(--u) * 28); background: none; }
.f-ios .vs-act.gold { width: auto; padding: 0 calc(var(--u) * 14); }
.f-ios .vs-act.gold .lb { display: inline; font-size: calc(var(--u) * 13); }
.f-ios .vs-card { width: calc(var(--u) * 400); max-width: 60%; padding: calc(var(--u) * 14) calc(var(--u) * 20) calc(var(--u) * 16); border-radius: calc(var(--u) * 22); margin-left: calc(var(--u) * 120); }
.f-ios .vs-card h2 { font-size: calc(var(--u) * 19); margin: calc(var(--u) * 2) 0 calc(var(--u) * 6); }
.f-ios .vs-card p { font-size: calc(var(--u) * 12.5); }
.f-ios .vs-card p.sm { font-size: calc(var(--u) * 10); }
.f-ios .vs-card-btns { gap: calc(var(--u) * 8); margin-top: calc(var(--u) * 10); }
.f-ios .vs-card-brand { min-height: calc(var(--u) * 14); }
.f-ios .st-bead .lab { font-size: calc(var(--u) * 9); }
.f-ios .st-bead .halo { width: calc(var(--u) * 32); height: calc(var(--u) * 32); }
.f-ios .st-rail { width: calc(var(--u) * 5); }
.f-ios .vs-modes { gap: calc(var(--u) * 18); padding-left: calc(var(--u) * 150); padding-top: calc(var(--u) * 34); }
.f-ios .vs-brand { left: calc(50% + var(--u) * 75); top: calc(var(--u) * 54); }
.f-ios .vs-mode { width: calc(var(--u) * 210); height: calc(var(--u) * 210); border-radius: calc(var(--u) * 24); gap: calc(var(--u) * 6); padding: calc(var(--u) * 12); }
.f-ios .vs-mode .bd { font-size: calc(var(--u) * 10.5); max-width: calc(var(--u) * 170); }
.f-ios .vs-mode .ex { font-size: calc(var(--u) * 9); }
.f-ios .vs-menu { left: calc(var(--u) * 200); right: calc(var(--u) * 56); top: calc(var(--u) * 98); bottom: calc(var(--u) * 12); gap: calc(var(--u) * 7); }   /* under the tablet */
.f-ios .vs-cloud.long .ln { font-size: calc(var(--u) * 12.5); }   /* a long line stays clear of the avatar */
.f-ios .vs-rangecard { height: calc(var(--u) * 40); border-radius: calc(var(--u) * 16); gap: calc(var(--u) * 8); padding: 0 calc(var(--u) * 10) 0 calc(var(--u) * 6); }
.f-ios .vs-rangecard .tx { min-width: calc(var(--u) * 80); gap: calc(var(--u) * 2); }
.f-ios .vs-rangecard .tx b { font-size: calc(var(--u) * 7.5); }
.f-ios .vs-rangecard .tx span { font-size: calc(var(--u) * 12); }
.f-ios .vs-rangecard .band { height: calc(var(--u) * 7); }
.f-ios .vs-rangecard .go { font-size: calc(var(--u) * 10); padding: calc(var(--u) * 6) calc(var(--u) * 10); }
.f-ios .vs-grid { gap: calc(var(--u) * 7); }
.f-ios .vs-tile { border-radius: calc(var(--u) * 14); gap: calc(var(--u) * 2); padding: calc(var(--u) * 5); }
.f-ios .vs-tile .n { font-size: calc(var(--u) * 9); left: calc(var(--u) * 8); top: calc(var(--u) * 6); }
.f-ios .vs-tile .tt { font-size: calc(var(--u) * 11); }
.f-ios .vs-tile .sk { display: none; }
.f-ios .vs-tile .lv { gap: calc(var(--u) * 4); margin-top: calc(var(--u) * 2); }
.f-ios .vs-tile .lv i { width: calc(var(--u) * 8); height: calc(var(--u) * 8); }
.f-ios .vx-bead.you::after, .f-ios .vx-bubble::after { font-size: calc(var(--u) * 9); }
.f-ios .rg-read { font-size: calc(var(--u) * 32); }
.f-ios .rg-col .ticks i.c::after { font-size: calc(var(--u) * 7); }
.f-ios .en-pin { width: calc(var(--u) * 64); height: calc(var(--u) * 64); }
.f-ios .en-pin .lb { font-size: calc(var(--u) * 10); padding: calc(var(--u) * 4) calc(var(--u) * 10); }
.f-ios .en-choices { right: calc(var(--u) * 54); bottom: calc(var(--u) * 24); gap: calc(var(--u) * 8); }
.f-ios .en-choice { min-width: calc(var(--u) * 180); height: calc(var(--u) * 38); font-size: calc(var(--u) * 15); gap: calc(var(--u) * 8); padding: 0 calc(var(--u) * 14) 0 calc(var(--u) * 6); }
.f-ios .en-choice .k { width: calc(var(--u) * 26); height: calc(var(--u) * 26); font-size: calc(var(--u) * 12); }
.f-ios .gm-ghost { width: calc(var(--u) * 30); height: calc(var(--u) * 30); margin: calc(var(--u) * -15) 0 0 calc(var(--u) * -15); }

/* the review bar folds to a small handle at the very foot (its hover band must not swallow taps on the game) */
body.vsp .rv { bottom: 0; opacity: 0; transition: opacity .3s; max-width: 98vw; }
body.vsp .rv::before { display: none; }
body.vsp .rv:not(:hover):not(:focus-within) { width: 140px; height: 12px; padding: 0; }
body.vsp .rv:not(:hover):not(:focus-within) > * { display: none; }
body.vsp .rv:hover, body.vsp .rv:focus-within { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .lw-glow, .lg-glow, .st-drift, .vs-mark .br, .vx-sphere .rim, .vx-bubble .irid, .vx-stone .bob, .vx-bubble .wob, .vs-load .vs-beams i, .vs-card::before, .vs-mode::before, .vs-tile::before, .vs-rangecard::before { animation: none; }
}