/* =====================================================================================================================
   yourbeats.net home page (The Stage): THE PAGE'S STYLESHEET (site-home, 29 Oct 2026). Served under /_site/ after the
   site's own stylesheet (site.css: the fonts, the tokens, the header and footer), with the site CSP (style-src 'self').
   Ported from the owner's approved mock-up (ROUND3 b13/web/directions/stage-src/page.css, with the judges' fixes). Every
   value is the app's (EncoreCocos core/theme.ts KIT, LANES, KEY; kit.css; ui-refresh.html E · Pulse Key;
   MenuBackground.ts; logo-reveal design.html). Everything is scoped to the page's own content (.stg), so the shared header
   and footer keep site.css's look, except the header wordmark's logo aurora (the owner's pick of 27 Oct) and the solid
   header the plan's shell asks for (plan.md §2.2). No style attribute is needed anywhere: positions that the mock-up set
   inline are classes here (.i0-.i4 rises, .v0-.v5 venues, .lk0-.lk9 cover tiles, .d0-.d7 cover fades, .r0-.r7 rows,
   .rw0-.rw3 race bars).
   ===================================================================================================================== */
@property --lvl { syntax: '<number>'; initial-value: 0; inherits: true; }
@property --la { syntax: '<number>'; initial-value: 0; inherits: true; }
@property --x1 { syntax: '<length>'; initial-value: 0px; inherits: true; }
@property --x2 { syntax: '<length>'; initial-value: 0px; inherits: true; }
@property --x3 { syntax: '<length>'; initial-value: 0px; inherits: true; }
@property --x4 { syntax: '<length>'; initial-value: 0px; inherits: true; }
@property --x5 { syntax: '<length>'; initial-value: 0px; inherits: true; }
@property --x6 { syntax: '<length>'; initial-value: 0px; inherits: true; }
@property --x7 { syntax: '<length>'; initial-value: 0px; inherits: true; }

/* ---------------------------------------------------------------- the page around the stage */
/* the menus' background is the page's ground (a fixed layer behind everything), so the body lets it through */
body.pk-home { background: transparent; }
html:has(body.pk-home) { scroll-behavior: smooth; }
/* the shell's solid header with the app's 20 px fade band (plan.md §2.2; the tab bar's rule: never translucent) */
.pk-home .site-head { background: #08070C; border-bottom: 1px solid rgba(255,255,255,.06); }
.pk-home .site-head::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 20px; background: linear-gradient(180deg, rgba(8,7,12,.9), rgba(8,7,12,0)); pointer-events: none; }
.pk-home .site-foot { position: relative; z-index: 1; margin-top: 0; }
.pk-home main { position: relative; }
/* (web/site-p2: the design review) the header's wordmark starts where the hero's words do, as in the mock-up: the hero is
   1,240 wide less its 16 px gutters (.hero-in), site.css's .wrap 1,160 (24 px to the right from 1,280 px on) */
.pk-home .site-head .wrap { width: min(100% - 2 * var(--gutter), 1208px); }

/* A · the logo aurora through the header wordmark (the owner's pick for Home's header, 27 Oct): colour only. YOUR: the
   menus' four lights softened 40 % towards white, laid over at up to 20 %; BEATS: pink, gold and rose as a "color" blend
   up to 50 %, the ramp's brightness kept. Drifts on the background's own periods; it starts after the opening, stops off
   screen (home.js) and with motion off. At rest (--la 0) it is exactly site.css's wordmark. */
.pk-home .site-head .wm { background:
    radial-gradient(42px 34px at var(--x1) 45%, rgba(176,125,247,calc(.2 * var(--la))), rgba(176,125,247,calc(.12 * var(--la))) 45%, rgba(176,125,247,0)),
    radial-gradient(42px 34px at var(--x2) 60%, rgba(255,145,179,calc(.2 * var(--la))), rgba(255,145,179,calc(.12 * var(--la))) 45%, rgba(255,145,179,0)),
    radial-gradient(42px 34px at var(--x3) 40%, rgba(139,182,247,calc(.2 * var(--la))), rgba(139,182,247,calc(.12 * var(--la))) 45%, rgba(139,182,247,0)),
    radial-gradient(42px 34px at var(--x4) 55%, rgba(255,206,137,calc(.2 * var(--la))), rgba(255,206,137,calc(.12 * var(--la))) 45%, rgba(255,206,137,0)),
    #FFF7EC;
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.pk-home .site-head .wm b { background:
    radial-gradient(44px 36px at var(--x5) 50%, rgba(255,77,141,calc(.5 * var(--la))), rgba(255,77,141,calc(.3 * var(--la))) 45%, rgba(255,77,141,0)),
    radial-gradient(44px 36px at var(--x6) 45%, rgba(255,190,60,calc(.5 * var(--la))), rgba(255,190,60,calc(.3 * var(--la))) 45%, rgba(255,190,60,0)),
    radial-gradient(44px 36px at var(--x7) 55%, rgba(255,60,120,calc(.5 * var(--la))), rgba(255,60,120,calc(.3 * var(--la))) 45%, rgba(255,60,120,0)),
    linear-gradient(90deg, #FF6A4D, #FFB347);
  background-blend-mode: color, color, color, normal; -webkit-background-clip: text; background-clip: text; color: transparent; }
.pk-home .site-head .wm.yb-hid { opacity: 0; }
.pk-home .site-head .wm.yb-la { --la: 1; transition: --la 2s ease-in-out .5s;
  animation: ax1 26s var(--ease-inout) 0s infinite alternate, ax2 31s var(--ease-inout) -8s infinite alternate, ax3 36s var(--ease-inout) -15s infinite alternate, ax4 40s var(--ease-inout) -4s infinite alternate,
    ax5 31s var(--ease-inout) -8s infinite alternate, ax6 40s var(--ease-inout) -4s infinite alternate, ax7 36s var(--ease-inout) -15s infinite alternate; }
@keyframes ax1 { from { --x1: -29px; } to { --x1: 95px; } } @keyframes ax2 { from { --x2: 95px; } to { --x2: -29px; } }
@keyframes ax3 { from { --x3: -10px; } to { --x3: 80px; } } @keyframes ax4 { from { --x4: 80px; } to { --x4: -20px; } }
@keyframes ax5 { from { --x5: -22px; } to { --x5: 102px; } } @keyframes ax6 { from { --x6: 102px; } to { --x6: -22px; } }
@keyframes ax7 { from { --x7: 0px; } to { --x7: 90px; } }

/* ---------------------------------------------------------------- THE TOP BAR (s18 WEB, 1 Nov 2026)
   The approved mock-up's bar (ROUND3 b13/web/directions/stage-src/page.css "HEADER"; the owner, 31 Oct: "it doesnt have
   the top bar like the mockup did"): it stays at the top while the page scrolls (solid, with the 20 px fade band above);
   from 1,080 px the six links to the tracks with their icons and the lit rose pill that slides to the track in view
   (home.js), and Get the app; under 1,080 px a menu key opens the same links as a sheet from the bottom (a <details>, so
   it works with no script; the key turns into a close key; a tap outside the sheet closes it).
   WCAG 2.4.11 (why site.css's header is not sticky): every scroll the browser makes to a focused element or an in-page
   link keeps clear of the bar (scroll-padding-top: technique C43), measured with a Tab walk at 390, 768 and 1,280 px.
   Superseded: the foundation's header, which scrolled away with the page. */
.pk-home .site-head { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; }
/* the skip link shows over the bar when it has focus (site.css gives it 20, under the bar's 50), and in the viewport
   however far the page is scrolled (WEB-REV note: site.css places it in the document, so focused after a scroll it sat
   2,000 px above the screen; the same on main) */
.pk-home .skip { z-index: 60; }
.pk-home .skip:focus { position: fixed; }
html:has(body.pk-home) { scroll-padding-top: 84px; }
:root[data-motion="off"]:has(body.pk-home) { scroll-behavior: auto; }
.pk-home .head-row { flex-wrap: nowrap; gap: 8px 14px; }
.pk-home .head-row > .head-cta, .pk-home .head-row > .still, .pk-home .head-row > .head-menu-nav { flex: none; }
.pk-home .head-row > .still { margin-left: auto; }
/* under 1,080 px the links live in the menu; Get the app waits for a store (the mock-up: the bar never crowds a phone) */
.pk-home .site-nav, .pk-home .head-cta { display: none; }
/* the menu key, and the sheet it opens (kit.css's sheet: it rises 40 px over .24 s on the sheet ease) */
.pk-home .head-menu > summary { display: inline-grid; place-items: center; width: var(--touch); height: var(--touch); border-radius: 14px; cursor: pointer; list-style: none;
  color: var(--white); background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)), rgba(16,12,26,.74); box-shadow: inset 0 0 0 1px var(--line2); -webkit-tap-highlight-color: transparent; }
.pk-home .head-menu > summary::-webkit-details-marker { display: none; }
.pk-home .head-menu > summary svg.i { grid-area: 1 / 1; width: 22px; height: 22px; }
.pk-home .head-menu .close-i, .pk-home .head-menu[open] .open-i { display: none; }
.pk-home .head-menu[open] .close-i { display: block; }
.pk-home .head-menu[open] > summary { position: relative; z-index: 3; }
/* the backdrop is the open key's own shade: a tap anywhere outside the sheet is a tap on the key, which closes it */
.pk-home .head-menu[open] > summary::before { content: ''; position: fixed; inset: 0; z-index: -1; background: rgba(4,3,8,.62); cursor: default; }
.pk-home .menu-sheet { position: fixed; z-index: 4; left: 0; right: 0; bottom: 0; max-height: min(86vh, 640px); overflow: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 12px; padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px)); border-radius: 22px 22px 0 0;
  background: linear-gradient(180deg, rgba(28,24,38,.99), rgba(12,9,20,.99)); box-shadow: 0 -12px 40px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08);
  animation: sheetUp .24s var(--ease-sheet); }
@keyframes sheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.pk-home .menu-h { color: var(--dim); }
.pk-home .menu-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pk-home .menu-list a { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 12px; border-radius: 14px; text-decoration: none;
  color: var(--white); background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.pk-home .menu-list a:hover { background: rgba(255,255,255,.07); }
.pk-home .menu-list a svg.i { grid-row: span 2; width: 24px; height: 24px; color: var(--rose-ink); }
.pk-home .menu-list b { font-family: var(--f-disp); font-weight: 400; font-size: 20px; text-transform: uppercase; letter-spacing: .03em; line-height: 1.1; }
.pk-home .menu-list span { font-size: 13px; line-height: 1.35; color: rgba(255,247,236,.8); }
/* a wider screen: the sheet is a centred card */
@media (min-width: 720px) {
  .pk-home .menu-sheet { left: 50%; right: auto; bottom: auto; top: 50%; width: min(460px, calc(100vw - 32px)); border-radius: 22px; transform: translate(-50%, -50%); animation: sheetPop .24s var(--ease-sheet); }
}
@keyframes sheetPop { from { transform: translate(-50%, calc(-50% + 40px)); opacity: 0; } to { transform: translate(-50%, -50%); opacity: 1; } }
@media (min-width: 1080px) {
  .pk-home .head-menu-nav { display: none; }
  .pk-home .site-nav { display: block; position: relative; order: 0; flex: 1 1 auto; min-width: 0; }
  .pk-home .site-nav ul { justify-content: center; gap: 2px; overflow: visible; }
  .pk-home .site-nav a { position: relative; z-index: 1; gap: 7px; min-height: 0; height: 38px; padding: 0 10px; border-radius: 12px; font-weight: 800; font-size: 12px;
    color: rgba(255,247,236,.8); transition: color .2s; }
  .pk-home .site-nav a svg.i { width: 19px; height: 19px; flex: none; }
  .pk-home .site-nav a:hover, .pk-home .site-nav a.on { color: var(--white); }
  /* the lit pill (the app's tab bar): it slides to the link of the track in view (home.js sets --px and --pw) */
  .pk-home .nav-pill { position: absolute; z-index: 0; top: 50%; left: 0; width: var(--pw, 60px); height: 34px; margin-top: -17px; border-radius: 14px; opacity: 0;
    background: rgba(255,59,95,.22); box-shadow: 0 0 16px rgba(255,59,95,.45); transform: translateX(var(--px, 0px)); pointer-events: none;
    transition: transform .32s var(--ease-spring), width .32s var(--ease-spring), opacity .2s; }
  .pk-home .nav-pill.on { opacity: 1; }
  /* Get the app is TONAL in the bar, as the mock-up after its judges has it ("one lit key per view", design.md rule 4: the
     bar is in every view), never site.css's lit .key */
  .pk-home .head-cta { display: inline-flex; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: 12px; color: var(--white);
    background: linear-gradient(180deg, rgba(255,59,95,.1), rgba(255,59,95,.03)), rgba(16,12,26,.78);
    box-shadow: inset 0 -2px 0 #FF3B5F, inset 0 0 0 1px rgba(255,59,95,.5), 0 2px 0 rgba(0,0,0,.4), 0 6px 12px -4px rgba(255,59,95,.35); }
  .pk-home .head-cta:hover { color: var(--white); background: linear-gradient(180deg, rgba(255,59,95,.18), rgba(255,59,95,.05)), rgba(16,12,26,.8);
    box-shadow: inset 0 -2px 0 #FF3B5F, inset 0 0 0 1px rgba(255,59,95,.5), 0 2px 0 rgba(0,0,0,.4), 0 6px 12px -4px rgba(255,59,95,.35); }
  .pk-home .head-cta .ic { display: inline-grid; place-items: center; color: #ff8aa0; }
  .pk-home .head-cta .ic svg.i { width: 18px; height: 18px; }
  .pk-home .head-cta .lbl { font-family: var(--f-body); font-stretch: 75%; font-weight: 800; font-size: 12.5px; letter-spacing: .1em; }
  /* the pause control is its icon until the bar has room for its words (its words stay its name) */
  .pk-home .still { padding: 0; width: var(--touch); justify-content: center; }
  .pk-home .still-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 1440px) {
  .pk-home .site-nav a { padding: 0 12px; }
  .pk-home .still { padding: 0 14px; width: auto; }
  .pk-home .still-txt { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}
:root[data-motion="off"] .pk-home .nav-pill { transition: none; }
:root[data-motion="off"] .pk-home .menu-sheet { animation: none; }
@media (forced-colors: active) { .pk-home .nav-pill { display: none; } .pk-home .site-nav a.on { text-decoration: underline; text-underline-offset: 6px; } }
@media print { .pk-home .head-menu-nav, .pk-home .nav-pill { display: none !important; } .pk-home .site-head { position: static; } }

/* ---------------------------------------------------------------- the stage's own tokens and base (scoped) */
.stg {
  /* (web/site-p2: the design review's F4, WCAG 1.4.3) the dim text sits straight on the FIXED aurora, whose bright glows
     drift under it as the page scrolls: .80 and .78 keep small text over 4.5:1 there. Superseded: .66 and .58. */
  --plate-solid: #0E0918; --dim: rgba(255,247,236,.80); --dim2: rgba(255,247,236,.78); --dim3: rgba(255,247,236,.22);
  --cool-ink: #8FD0FF; --rose-ink: #ff8aa0;
  --gx: max(16px, env(safe-area-inset-left, 0px)); --gxr: max(16px, env(safe-area-inset-right, 0px));
  --top-h: 68px;
  color: var(--white); font-family: var(--f-body); font-size: 16px; line-height: 1.55; overflow-x: clip;
}
.stg h1, .stg h2, .stg h3, .stg h4, .stg p { margin: 0; }
.stg ul, .stg ol { margin: 0; padding: 0; list-style: none; }
.stg a { color: inherit; }
.stg button { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; }
.stg :focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; border-radius: 8px; }
.stg svg.i { width: 18px; height: 18px; flex: none; display: inline-block; vertical-align: middle; }
.yb-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.stg .wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-left: var(--gx); padding-right: var(--gxr); }

/* ---------------------------------------------------------------- type */
.stg .eyebrow { font-family: var(--f-body); font-stretch: 75%; font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); line-height: 1.25; }
.stg .ink-rose { color: var(--rose-ink); } .stg .ink-mint { color: var(--mint); } .stg .ink-gold { color: var(--gold); } .stg .ink-violet { color: var(--hud-violet); } .stg .ink-cool { color: var(--cool-ink); }
.stg .th { font-family: var(--f-disp); font-weight: 400; text-transform: uppercase; letter-spacing: .015em; line-height: .96;
  font-size: clamp(38px, 6.6vw, 80px); text-wrap: balance; color: var(--white); filter: drop-shadow(0 3px 0 rgba(0,0,0,.4)); }
.stg .th em, .stg .enc-h em { font-style: normal; background: var(--title-paint); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stg .lede { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.55; color: rgba(255,247,236,.82); max-width: 60ch; text-wrap: pretty; }
.stg .fine { font-size: 13px; color: var(--dim2); line-height: 1.5; max-width: 72ch; }
.stg .lnk { color: var(--mint); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 2px; border-bottom: 1.5px solid rgba(112,245,203,.4); white-space: nowrap; }
.stg .lnk:hover { border-bottom-color: var(--mint); }
.stg .lnk svg.i { width: 15px; height: 15px; }
.stg .num { font-family: var(--f-hud); font-style: italic; font-weight: 900; background: var(--num-paint); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.stg .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------------------------------------------------------------- THE MENUS' BACKGROUND (fixed, behind everything) */
.stg .aurora { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(120% 80% at 50% 0%, #1a0c22 0%, #07070A 62%); overflow: hidden; }
.stg .aurora canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .9s var(--ease-inout); }
.stg .aurora.gl canvas { opacity: 1; }
.stg .aur-css i { position: absolute; border-radius: 50%; mix-blend-mode: screen; will-change: transform; }
/* kit.css's four glows, each a solid ellipse with the logistic's soft edge drawn in the gradient itself (no blur filter) */
.stg .aur-css .g1 { left: -12%; top: -6%; width: 70%; height: 38%; background: radial-gradient(closest-side, rgba(123,44,255,.55) 48%, rgba(123,44,255,.44) 64%, rgba(123,44,255,.25) 78%, rgba(123,44,255,.1) 89%, rgba(123,44,255,0)); animation: drift 18.4s var(--ease-inout) 0s infinite alternate; }
.stg .aur-css .g2 { right: -18%; top: 14%; width: 62%; height: 34%; background: radial-gradient(closest-side, rgba(255,77,141,.55) 48%, rgba(255,77,141,.44) 64%, rgba(255,77,141,.25) 78%, rgba(255,77,141,.1) 89%, rgba(255,77,141,0)); animation: drift 21.9s var(--ease-inout) -5.7s infinite alternate; }
.stg .aur-css .g3 { left: 10%; top: 46%; width: 58%; height: 30%; background: radial-gradient(closest-side, rgba(61,139,255,.35) 48%, rgba(61,139,255,.28) 64%, rgba(61,139,255,.16) 78%, rgba(61,139,255,.06) 89%, rgba(61,139,255,0)); animation: drift 25.5s var(--ease-inout) -10.6s infinite alternate; }
.stg .aur-css .g4 { right: -8%; bottom: -6%; width: 50%; height: 28%; background: radial-gradient(closest-side, rgba(255,179,71,.28) 48%, rgba(255,179,71,.22) 64%, rgba(255,179,71,.13) 78%, rgba(255,179,71,.05) 89%, rgba(255,179,71,0)); animation: drift 28.3s var(--ease-inout) -2.8s infinite alternate; }
@keyframes drift { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(8.5%,5.7%) scale(1.17); } 100% { transform: translate(-7.1%,9.9%) scale(.915); } }
.stg .aurora.gl .aur-css { opacity: 0; transition: opacity .9s; }
.stg .aurora.gl .aur-css i { animation-play-state: paused !important; }

/* ---------------------------------------------------------------- THE NO-SCRIPT PAUSE (WCAG 2.2.2)
   The layout's "Pause motion" checkbox sets --play: paused on <html> by itself (site.css section 10), and every loop
   here follows --play, so the control works with no script too; with the page's script, home.js's data-motion="off"
   stops them outright (MOTION OFF, below). (web/site-p2: the design review's F2) Superseded: site.css's
   html:has(#yb-still:checked) * rule, whose whole-document subject restyled all ~2,200 elements on every text change. */
.stg *, .stg *::before, .stg *::after { animation-play-state: var(--play, running) !important; }
html[data-yb-reveal] .stg .rv { animation-play-state: running !important; }   /* the opening's failsafe never waits */

/* ---------------------------------------------------------------- THE OPENING (H · Stage lights) */
/* painted with the first frame only when home-boot.js decided a first arrival (<html data-yb-reveal>); home-boot.js's
   timer lifts it at 0.9 s from the navigation unless home.js has started the opening (web/site-p2); this failsafe, 1.1 s
   after the veil's style is first worked out, is the last resort (plan.md §3.2), and home.js cancels it when it starts
   the opening in time */
.stg .rv { display: none; position: fixed; inset: 0; z-index: 90; pointer-events: auto; cursor: pointer; overflow: hidden; }
html[data-yb-reveal] .stg .rv { display: block; animation: rvFailsafe .32s 1.1s forwards; }
html[data-yb-reveal] .stg .rv.on { display: block; }
@keyframes rvFailsafe { to { opacity: 0; visibility: hidden; } }
.stg .rv.done, html[data-yb-reveal] .stg .rv.done { display: none; }
.stg .rv-back { position: absolute; inset: 0; }
.stg .rv-ground { position: absolute; inset: 0; background: var(--ground-share); }
.stg .rv-beams { position: absolute; inset: 0; opacity: 0; }
.stg .rv-beams i { will-change: transform; position: absolute; transform-origin: 50% 100%; mix-blend-mode: screen; border-radius: 50% 50% 0 0; }
.stg .rv-glow { position: absolute; left: 0; top: 0; border-radius: 50%; opacity: 0; background: radial-gradient(closest-side, rgba(255,106,77,.55), rgba(255,179,71,.18) 55%, rgba(255,179,71,0)); }
.stg .rv-ring { position: absolute; left: 0; top: 0; border-radius: 50%; opacity: 0; border: 3px solid rgba(255,255,255,.95); box-shadow: 0 0 16px rgba(255,179,71,.9), inset 0 0 16px rgba(255,106,77,.7); transform-origin: 50% 50%; }
.stg .rv-flash { position: absolute; left: 0; top: 0; border-radius: 50%; opacity: 0; background: radial-gradient(closest-side, #fff, rgba(255,179,71,.6) 35%, rgba(255,106,77,0)); mix-blend-mode: screen; }
/* the wordmark: a fixed 72 px, placed and sized by its transform only (no layout change when the fonts arrive) */
.stg .rv-wm { position: absolute; left: 0; top: 0; transform-origin: 0 0; z-index: 3; opacity: 0; }
.stg .rv-wm-in { position: relative; font-family: var(--f-disp); font-size: 72px; line-height: 1; letter-spacing: .03em; white-space: nowrap; filter: drop-shadow(0 3px 0 rgba(0,0,0,.45)); }
.stg .w-your { display: inline-block; color: var(--white); transform-origin: 100% 50%; }
.stg .w-beats { display: inline-block; transform-origin: 0 50%;
  background-image: linear-gradient(100deg, rgba(255,255,255,0) 44%, rgba(255,255,255,.95) 50%, rgba(255,255,255,0) 56%), linear-gradient(90deg, var(--coral), var(--amber));
  background-size: 300% 100%, 100% 100%; background-position: 85% 0, 0 0; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------------------------------------------------------------- the setlist rail (wide screens) */
.stg .rail { display: none; }
/* from 1,432 px: the rail (12 px from the edge, 148 wide) then clears the tracks' left edge by 12 px (web/site-p2: the
   design review; superseded: 1,380 px, where it overlapped the content by 14 px up to about 1,415 px) */
@media (min-width: 1432px) {
  /* hidden (not only transparent) while it is out of play, so its links are never invisible focus stops */
  .stg .rail { display: block; position: fixed; z-index: 40; left: max(12px, calc((100vw - 1120px) / 2 - 168px)); top: 50%; transform: translateY(-50%); width: 148px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .4s, visibility 0s linear .4s; }
  .stg .rail.show { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .4s, visibility 0s; }
  .stg .rail.show.end { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .4s, visibility 0s linear .4s; }
  .stg .rail-h { font-stretch: 75%; font-weight: 800; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim2); padding: 0 0 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
  .stg .rail a { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 4px; padding: 6px 8px 6px 12px; border-radius: 10px; text-decoration: none; color: var(--dim2); position: relative; }
  .stg .rail a b { grid-column: 1; grid-row: 1; } .stg .rail a span { grid-column: 2; grid-row: 1; }
  /* now playing: the equaliser takes the track number's place, as a music app's track list does (no label is cut) */
  .stg .rail a.on b { visibility: hidden; }
  .stg .rail a .req { grid-column: 1; grid-row: 1; justify-self: start; }
  .stg .rail a b { font-family: var(--f-hud); font-style: italic; font-weight: 800; font-size: 12px; color: var(--dim2); }
  .stg .rail a span { font-stretch: 75%; font-weight: 700; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .stg .rail a:hover { color: var(--white); }
  .stg .rail a.on { color: var(--white); background: rgba(255,59,95,.12); box-shadow: inset 3px 0 0 var(--rose); }
  .stg .rail .req { display: none; gap: 2px; align-items: flex-end; height: 12px; }
  .stg .rail a.on .req { display: inline-flex; }
  .stg .rail .req i { width: 2.5px; height: 12px; border-radius: 1px; background: var(--rose); transform-origin: 50% 100%; animation: req .9s ease-in-out infinite; }
  .stg .rail .req i:nth-child(2) { animation-delay: -.3s; } .stg .rail .req i:nth-child(3) { animation-delay: -.6s; }
}
@keyframes req { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }

/* ---------------------------------------------------------------- PULSE KEY (ui-refresh.html .sys-e) */
.stg .b { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; color: #fff; user-select: none; -webkit-user-select: none; white-space: nowrap; flex: none; text-decoration: none; }
.stg .b .words { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.stg .b .lbl { font-family: var(--f-disp); font-weight: 400; text-transform: uppercase; line-height: 1; }
.stg .b .lbl2 { position: relative; z-index: 2; font-stretch: 75%; font-weight: 800; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; }
.stg .b .sub { font-stretch: 75%; font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.15; white-space: normal; text-align: center; }
.stg .b .ic { position: relative; z-index: 2; display: inline-grid; place-items: center; flex: none; }
.stg .b .fx { position: absolute; pointer-events: none; }
.stg .b.pri { min-height: 54px; border-radius: 16px; padding: 0 20px 0 8px; color: var(--ink); --rim: color-mix(in srgb, var(--lt) 62%, #fff);
  background: linear-gradient(0deg, color-mix(in srgb, var(--hit) 42%, transparent) 0, transparent 10px), linear-gradient(180deg, var(--et), var(--eb));
  box-shadow: inset 0 -2px 0 rgba(255,255,255,calc(.78 + .22 * var(--lvl))), inset 0 -5px 5px -3px color-mix(in srgb, var(--hit) 80%, transparent), inset 0 0 0 1.5px var(--rim),
    0 0 calc(10px + 8px * var(--lvl)) rgba(var(--rgb), calc(.35 + .3 * var(--lvl))), 0 calc(10px + 2px * var(--lvl)) calc(20px + 10px * var(--lvl)) -8px rgba(var(--rgb), 1);
  transition: transform .07s var(--ease-enter), box-shadow .07s, --lvl .25s; }
.stg .b.pri:hover { --lvl: .4; color: var(--ink); }
.stg .b.pri .ic { width: 40px; height: 40px; border-radius: 11px; background: rgba(0,0,0,.2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), inset 0 -2px 0 rgba(255,255,255,.55); }
.stg .b.pri .ic svg.i { width: 20px; height: 20px; }
.stg .b.pri .words { flex: 1; }
.stg .b.pri .lbl { font-size: 20px; letter-spacing: .05em; }
.stg .b.pri .sub { color: var(--ink); opacity: .92; }
.stg .b.pri::after { content: ''; position: absolute; inset: 2px; border-radius: 14px; background: linear-gradient(0deg, rgba(255,255,255,.4), rgba(255,255,255,.1) 40%, rgba(255,255,255,0) 80%); opacity: 0; transform: scaleY(.15); transform-origin: 50% 100%; pointer-events: none; z-index: 1; }
.stg .b.pri:active::after { opacity: 1; transform: scaleY(1); transition: opacity .06s, transform .24s var(--ease-enter); }
.stg .b.pri:active { transform: translateY(2px); }
.stg .b.pri .fx { inset: -2px; border-radius: 18px; border: 3px solid var(--rim); box-shadow: 0 0 12px rgba(var(--rgb), .9); opacity: 0; z-index: 3; }
.stg .b.sec, .stg .b.ico { min-height: 44px; padding: 0 16px; border-radius: 14px; gap: 8px; color: var(--white);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)), rgba(16,12,26,.74);
  box-shadow: inset 0 -2px 0 rgba(255,255,255,.26), inset 0 0 0 1px rgba(255,255,255,.16), 0 2px 0 rgba(0,0,0,.4), 0 6px 10px rgba(0,0,0,.28);
  transition: transform .07s, box-shadow .07s, background .07s; }
.stg .b.sec.sm { min-height: 40px; border-radius: 12px; padding: 0 12px; }
.stg .b.sec:hover { background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.03)), rgba(22,16,34,.8); }
.stg .b.sec:active { transform: translateY(2px); }
.stg .b.sec.tone { background: linear-gradient(180deg, rgba(var(--rgb),.1), rgba(var(--rgb),.03)), rgba(16,12,26,.78);
  box-shadow: inset 0 -2px 0 rgb(var(--rgb)), inset 0 0 0 1px rgba(var(--rgb),.5), 0 2px 0 rgba(0,0,0,.4), 0 6px 12px -4px rgba(var(--rgb),.35); }
.stg .b.sec.tone .ic { color: var(--tone); }
.stg .b.ter { min-height: 44px; color: var(--mint); gap: 8px; }
.stg .b.ter .lbl2 { padding-bottom: 4px; background: linear-gradient(var(--mint), var(--mint)) 0 100% / 14px 2px no-repeat, linear-gradient(rgba(112,245,203,.35), rgba(112,245,203,.35)) 0 calc(100% - .5px) / 100% 1px no-repeat; transition: background-size .14s; }
.stg .b.ter:hover .lbl2 { background-size: 100% 2px, 100% 1px; }

/* chips, badges, tier pills, plates (dark backings: judge 2's contrast) */
.stg .chip { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 2px 9px; border-radius: 8px; border: 1.5px solid var(--line2); background: rgba(7,7,10,.72);
  font-family: var(--f-body); font-stretch: 75%; font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,247,236,.92); white-space: nowrap; line-height: 1.2; }
.stg .chip svg.i { width: 13px; height: 13px; }
.stg .chip b { font-family: var(--f-hud); font-style: italic; font-weight: 800; letter-spacing: 0; opacity: .85; }
.stg .chip.gold { border-color: rgba(255,198,94,.6); color: var(--gold); background: rgba(40,28,6,.6); }
.stg .chip.ex { border-style: dashed; border-color: rgba(255,247,236,.34); color: rgba(255,247,236,.78); background: rgba(7,7,10,.5); }
.stg .chip.c-l0 { border-color: rgba(var(--l0-rgb),.55); color: #ffb3b3; background: rgba(28,8,10,.7); }
.stg .chip.c-l1 { border-color: rgba(var(--l1-rgb),.55); color: #ffd699; background: rgba(28,18,6,.7); }
.stg .chip.c-l2 { border-color: rgba(var(--l2-rgb),.55); color: #9ff1ff; background: rgba(4,22,28,.7); }
.stg .chip.c-l3 { border-color: rgba(var(--l3-rgb),.6); color: #d6c2ff; background: rgba(18,10,32,.7); }
.stg .badge { width: 38px; height: 38px; border-radius: 12px; display: inline-grid; place-items: center; flex: none; color: var(--tone); background: rgba(var(--rgb),.12); box-shadow: inset 0 0 0 1px rgba(var(--rgb),.4); }
.stg .badge svg.i { width: 21px; height: 21px; }
.stg .tp { display: inline-flex; align-items: center; justify-content: center; height: 22px; padding: 0 9px; border-radius: 7px; font-stretch: 75%; font-weight: 800; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; border: 1.5px solid; background: rgba(7,7,10,.78); }
.stg .tp.easy { color: var(--easy-ink); border-color: rgba(77,220,255,.6); } .stg .tp.normal { color: var(--normal-ink); border-color: rgba(255,217,138,.6); }
.stg .tp.hard { color: var(--hard-ink); border-color: rgba(255,92,122,.6); } .stg .tp.expert { color: var(--expert-ink); border-color: rgba(201,139,255,.6); }
/* lit: the tier's own ramp; Easy's light cyan takes the dark ink (white measured 2.7:1 on it: judge 2) */
.stg .tp.lit.easy { background: linear-gradient(180deg, var(--easy-a), #2A8FD6); color: #031B30; border-color: transparent; box-shadow: 0 0 14px rgba(77,220,255,.55); }
.stg .tp.lit.normal { background: linear-gradient(180deg, var(--normal-a), var(--normal-b)); color: #2A1400; border-color: transparent; box-shadow: 0 0 14px rgba(255,217,138,.55); }
.stg .tp.lit.hard { background: linear-gradient(180deg, var(--hard-a), var(--hard-b)); color: #fff; border-color: transparent; box-shadow: 0 0 14px rgba(255,92,122,.55); }
.stg .tp.lit.expert { background: linear-gradient(180deg, var(--expert-a), var(--expert-b)); color: #fff; border-color: transparent; box-shadow: 0 0 14px rgba(201,139,255,.55); }
.stg .tp.sm { height: 20px; font-size: 10.5px; padding: 0 6px; }
.stg .plate { padding: 0; border-radius: 18px; border: 1.5px solid rgba(255,255,255,.12); background: linear-gradient(180deg, rgba(28,24,38,.92), rgba(12,9,20,.94));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 6px 0 rgba(0,0,0,.4), 0 14px 30px rgba(0,0,0,.45); }
.stg .pl-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stg .pl-h > b, .stg .pl-h > h3 { font-family: var(--f-disp); font-weight: 400; font-size: 22px; letter-spacing: .02em; text-transform: uppercase; line-height: 1; }

/* the four capsules from the app icon (the reveal's badges), mini form */
.stg .caps4 { display: inline-flex; gap: 6px; align-items: center; }
.stg .caps4 i { width: 22px; height: 11px; border-radius: 6px; position: relative; background: rgba(var(--c),.14); box-shadow: inset 0 0 0 1px rgba(var(--c),.45); transition: background .12s, box-shadow .12s; }
.stg .caps4 i:nth-child(1) { --c: var(--l0-rgb); } .stg .caps4 i:nth-child(2) { --c: var(--l1-rgb); } .stg .caps4 i:nth-child(3) { --c: var(--l2-rgb); } .stg .caps4 i:nth-child(4) { --c: var(--l3-rgb); }
.stg .caps4 i.on { background: linear-gradient(180deg, color-mix(in srgb, rgb(var(--c)) 72%, #fff), rgb(var(--c))); box-shadow: 0 0 8px rgba(var(--c),.9); }
.stg .caps4 i.on::after { content: ''; position: absolute; left: 5px; right: 5px; top: 4px; height: 3px; border-radius: 2px; background: #fff; }
.stg .caps4.big { gap: 11px; }
.stg .caps4.big i { width: 44px; height: 22px; border-radius: 11px; box-shadow: inset 0 0 0 1.5px rgba(var(--c),.45); background: rgba(var(--c),.08); }
.stg .caps4.big i.on { box-shadow: 0 0 10px rgba(var(--c),.9), 0 0 22px rgba(var(--c),.5); }
.stg .caps4.big i.on::after { left: 10px; right: 10px; top: 8px; height: 6px; border-radius: 3px; box-shadow: 0 0 6px rgba(255,255,255,.9); }
/* the Quiet loader: four mini badges breathing in turn at 100 BPM */
.stg .quiet { display: inline-flex; gap: 4px; vertical-align: middle; }
.stg .quiet i { width: 14px; height: 7px; border-radius: 4px; background: rgba(var(--c),.14); box-shadow: inset 0 0 0 1px rgba(var(--c),.45); animation: qb 2.4s linear infinite; }
.stg .quiet i:nth-child(1) { --c: var(--l0-rgb); } .stg .quiet i:nth-child(2) { --c: var(--l1-rgb); animation-delay: .6s; } .stg .quiet i:nth-child(3) { --c: var(--l2-rgb); animation-delay: 1.2s; } .stg .quiet i:nth-child(4) { --c: var(--l3-rgb); animation-delay: 1.8s; }
@keyframes qb { 0% { background: rgba(var(--c),.72); box-shadow: 0 0 8px rgba(var(--c),.6); } 25% { background: rgba(var(--c),.14); box-shadow: inset 0 0 0 1px rgba(var(--c),.45); } 100% { background: rgba(var(--c),.14); } }

/* ---------------------------------------------------------------- THE HERO: the lit stage */
.stg .hero { position: relative; overflow: hidden; padding-block: 18px 34px; }
.stg .hero::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 55% at 70% 108%, rgba(255,59,95,.16), rgba(255,59,95,0) 70%), linear-gradient(180deg, rgba(7,7,10,0) 55%, rgba(7,7,10,.55)); }
.stg .hero-lights { position: absolute; inset: 0; pointer-events: none; --pulse: 0; }
.stg .hero-lights .beam { will-change: opacity, transform; position: absolute; bottom: -4%; width: 18%; max-width: 150px; height: 128%; transform-origin: 50% 100%; mix-blend-mode: screen; border-radius: 50% 50% 0 0; filter: blur(10px);
  opacity: calc(.26 + .16 * var(--pulse)); transition: opacity .1s; }
.stg .hero-lights .beam:nth-child(1) { left: 4%; background: linear-gradient(0deg, rgba(var(--l0-rgb),.7), rgba(var(--l0-rgb),0) 85%); transform: rotate(calc(-24deg + var(--sway, 0deg))); }
.stg .hero-lights .beam:nth-child(2) { left: 28%; background: linear-gradient(0deg, rgba(var(--l1-rgb),.7), rgba(var(--l1-rgb),0) 85%); transform: rotate(calc(-9deg + var(--sway, 0deg))); }
.stg .hero-lights .beam:nth-child(3) { right: 28%; background: linear-gradient(0deg, rgba(var(--l2-rgb),.7), rgba(var(--l2-rgb),0) 85%); transform: rotate(calc(9deg + var(--sway, 0deg))); }
.stg .hero-lights .beam:nth-child(4) { right: 4%; background: linear-gradient(0deg, rgba(var(--l3-rgb),.7), rgba(var(--l3-rgb),0) 85%); transform: rotate(calc(24deg + var(--sway, 0deg))); }
.stg .hero-in { position: relative; max-width: 1240px; margin-inline: auto; padding-left: var(--gx); padding-right: var(--gxr); display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: center; }
.stg .hero-copy { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.stg .hero-eye { display: inline-flex; align-items: center; gap: 8px; color: var(--rose-ink); }
/* (web/site-p2: the design review's F4, measured over the WebGL aurora at several phases) the rose eyebrows on the aurora
   a step lighter than the kit's rose ink, which fell to 3.96:1 over the pink glow; superseded: var(--rose-ink) #ff8aa0 */
.stg .hero-eye, .stg .eyebrow.ink-rose { color: #FFA3B4; }
.stg .tag-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rose); box-shadow: 0 0 10px var(--rose); flex: none; }
.stg .hero-h { font-family: var(--f-disp); font-weight: 400; text-transform: uppercase; line-height: .9; letter-spacing: .01em; font-size: clamp(54px, 15vw, 132px); filter: drop-shadow(0 4px 0 rgba(0,0,0,.45)); }
.stg .hero-h span { display: block; white-space: nowrap; }
.stg .hero-h .h1a { color: var(--white); }
.stg .hero-h .h1b { background-image: linear-gradient(100deg, rgba(255,255,255,0) 44%, rgba(255,255,255,.9) 50%, rgba(255,255,255,0) 56%), var(--title-paint);
  background-size: 300% 100%, 100% 100%; background-position: 100% 0, 0 0; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; }
.stg .hero-h.sweep .h1b { animation: h1sweep 1.4s .2s var(--ease-inout) both; }
@keyframes h1sweep { from { background-position: 100% 0, 0 0; } to { background-position: 0% 0, 0 0; } }
.stg .hero-sub { font-size: clamp(16.5px, 1.5vw, 20px); color: rgba(255,247,236,.84); max-width: 34em; text-wrap: pretty; }
.stg .hero-fine { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--dim); max-width: 34em; }
.stg .hero-fine svg.i { color: var(--gold); margin-top: 1px; }

/* the store row: the site's one store block (stores.js) in the Stage's plates. Pre-launch lines are inert words in a
   plate, never shaped like a button (plan.md §2.2); live, the stores' own badges, still, inside their clear space. */
.stg .stores .store { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.stg .stores .get { display: flex; min-height: 56px; flex: 1 1 160px; max-width: 280px; min-width: 0; }
.stg .stores .soon, .stg .stores .ios { position: relative; display: flex; align-items: center; min-height: 56px; width: 100%; padding: 8px 16px 8px 60px; margin: 0; border-radius: 16px; color: var(--white);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)), rgba(16,12,26,.86);
  box-shadow: inset 0 -2px 0 rgba(255,255,255,.26), inset 0 0 0 1px rgba(255,255,255,.16), 0 2px 0 rgba(0,0,0,.4), 0 6px 10px rgba(0,0,0,.28);
  font-family: var(--f-disp); font-weight: 400; font-size: 16px; line-height: 1.1; letter-spacing: .04em; text-transform: uppercase; text-align: left; }
.stg .stores .ios { flex: 1 1 160px; max-width: 280px; min-width: 0; width: auto; }
/* the phone in a rose tile (the Stage Line's phone: a rounded body with its home dot), drawn in CSS: no image */
.stg .stores .soon::before, .stg .stores .ios::before { content: ''; position: absolute; left: 8px; top: 50%; width: 40px; height: 40px; margin-top: -20px; border-radius: 11px;
  background: rgba(255,59,95,.12); box-shadow: inset 0 0 0 1px rgba(255,59,95,.4); }
.stg .stores .soon::after, .stg .stores .ios::after { content: ''; position: absolute; left: 21px; top: 50%; width: 14px; height: 22px; margin-top: -11px; border: 2px solid var(--rose-ink); border-radius: 4px;
  background: radial-gradient(circle at 50% 78%, var(--rose-ink) 0 1.3px, transparent 1.7px); }
/* a live iPhone line outside the hero is words (one App Store badge per layout): a plain link, no plate */
.stg .stores .ios:has(a) { background: none; box-shadow: none; padding: 0; min-height: 44px; font-family: var(--f-body); font-size: 15px; font-weight: 700; text-transform: none; letter-spacing: 0; }
.stg .stores .ios:has(a)::before, .stg .stores .ios:has(a)::after { content: none; }
.stg .stores .ios a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,247,236,.4); }
/* (web/site-p2) a live Android line outside the hero is words too (stores.js footer blocks: the encore), as the iPhone's */
.stg .stores .txt { display: flex; align-items: center; flex: 1 1 160px; max-width: 280px; min-width: 0; min-height: 44px; margin: 0; font-family: var(--f-body); font-size: 15px; font-weight: 700; }
.stg .stores .txt a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,247,236,.4); }
/* live: the official badge alone on a plain dark area inside its clear space (a quarter of its height): never animated */
.stg .stores .gp, .stg .stores .as { padding: 14px; margin: 0; background: #07070A; border-radius: 12px; }
.stg .stores .gp img { display: block; width: 189px; height: 56px; }
.stg .stores .as img { display: block; height: 56px; width: auto; }

/* the stage itself: the note highway, drawn from the app's highway (lanes, judgement line, the icon's four keys) */
.stg .hero-stage { position: relative; min-width: 0; height: clamp(360px, 92vw, 420px); margin-top: 6px; }
/* (web/site-p2: the design review) only script draws the stage: with none (home-boot.js writes data-motion before the
   first paint, so its absence means no script), the hero is its words, not a dead PLAY over an empty highway */
html:not([data-motion]) .stg .hero-stage { display: none; }
html:not([data-motion]) .stg .hero-in { grid-template-columns: minmax(0, 1fr); }
/* the stage is a Tab stop (D F J K play while it has focus): its ring sits outside its edge */
.stg .hero-stage:focus-visible { outline-offset: 4px; border-radius: 16px; }
.stg .hero-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: manipulation; cursor: pointer; }
/* (s18 WEB, 1 Nov 2026; the owner, 31 Oct: "the play option on website flashes weirdly every time u click it to hit the
   note") a phone browser paints its tap highlight over anything with a pointer cursor: over the WHOLE stage, on every tap
   (measured in headless Chromium: rgba(51,181,229,.4) over 100 % of the stage's pixels for a frame). The stage is a game
   surface: no highlight, and no text selection or callout from a long press (a hold). */
.stg .hero-stage, .stg .hero-stage canvas, .stg .hero-stage .pdisc { -webkit-tap-highlight-color: transparent; }
.stg .hero-stage { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* the line by the demo: a short sample here, the full game in the app (s18 WEB). Its box keeps three lines' height
   whatever the font, so the fonts' late arrival re-wraps it without moving the hero (measured: without this the hero
   shifted, CLS with fonts 2.5 s late 0.022 -> 0.042 at 400 px and 0.002 -> 0.028 at 1,440 px) */
.stg .stage-note { justify-self: center; max-width: 46ch; min-height: calc(3 * 1.45em); margin-top: -8px; font-size: 13px; line-height: 1.45; text-align: center; text-wrap: balance; color: var(--dim); }
html:not([data-motion]) .stg .stage-note { display: none; }
/* its words show once the page's fonts are in (home.js; at most 3 s): drawn in a fallback first, they re-wrapped as Archivo
   swapped in, a long jump that doubled the frame's layout shift (CLS fonts 2.5 s late 0.022 -> 0.042 at 400 px). Hidden,
   in a box already the right size, they move nothing. */
.stg .stage-note { visibility: hidden; }
.stg .stage-note.ready { visibility: visible; }
.stg .stage-hud { position: absolute; top: 10px; right: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; pointer-events: none; }
.stg .hud-combo { display: flex; align-items: baseline; gap: 6px; }
.stg .hud-combo b { font-family: var(--f-hud); font-style: italic; font-weight: 900; font-size: 30px; line-height: 1; background: var(--num-paint); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; filter: drop-shadow(0 2px 0 rgba(0,0,0,.5)); }
.stg .hud-combo i { font-style: normal; font-stretch: 75%; font-weight: 800; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.stg .hud-mode { font-stretch: 75%; font-weight: 800; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); border: 1px solid var(--line2); border-radius: 6px; padding: 2px 6px; background: rgba(7,7,10,.6); }
.stg .hud-mode.you { color: var(--mint); border-color: rgba(112,245,203,.5); }
.stg .stage-foot { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.stg .pdisc { position: relative; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; color: var(--rose-ink); isolation: isolate;
  background: radial-gradient(80% 60% at 50% 100%, rgba(255,59,95,.35), transparent 70%), rgba(18,12,26,.94);
  box-shadow: inset 0 -2px 0 #FF3B5F, inset 0 0 0 1.5px rgba(255,59,95,.6), 0 8px 18px rgba(0,0,0,.45); transition: transform .07s var(--ease-enter); }
.stg .pdisc svg.i { width: 28px; height: 28px; }
.stg .pdisc:active { transform: translateY(2px); }
.stg .pdisc:focus-visible { border-radius: 50%; outline-offset: 3px; }
/* Breathe (the owner's pick for the Play circle, 27 Oct): the rim and a rose haze, one breath per 4.8 s */
.stg .pdisc.breathe::before, .stg .pdisc.breathe::after { content: ''; position: absolute; inset: 0; border-radius: 50%; mix-blend-mode: screen; opacity: 0; animation: breathe 4.8s var(--ease-inout) infinite; pointer-events: none; }
.stg .pdisc.breathe::before { box-shadow: 0 0 9px 1px rgba(255,59,95,.6); }
.stg .pdisc.breathe::after { box-shadow: inset 0 0 0 1.5px rgba(255,138,160,.55); }
@keyframes breathe { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
/* lit and steady while it plays (the app: on its own tab the circle is lit, no breath) */
.stg .pdisc.lit { color: #fff; background: linear-gradient(0deg, rgba(255,196,206,.42) 0, rgba(255,196,206,0) 10px), linear-gradient(180deg, #E8385A, #B31232);
  box-shadow: inset 0 -2px 0 rgba(255,255,255,.8), inset 0 0 0 1.5px #FF9AAD, 0 0 16px rgba(255,59,95,.6), 0 10px 20px -8px rgba(255,59,95,1); }
.stg .pdisc.lit::before, .stg .pdisc.lit::after { animation: none; opacity: 0; }
.stg .pdisc.sm { width: 48px; height: 48px; flex: none; } .stg .pdisc.sm svg.i { width: 22px; height: 22px; }
.stg .pdisc-lbl { font-stretch: 75%; font-weight: 800; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--white); }
.stg .stage-cap { position: absolute; left: 0; top: 10px; display: flex; align-items: center; gap: 8px; max-width: 62%; font-stretch: 75%; font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); line-height: 1.3; }
.stg .eq3 { display: inline-flex; gap: 2px; align-items: flex-end; height: 12px; flex: none; }
.stg .eq3 i { width: 3px; height: 12px; border-radius: 1px; background: var(--mint); transform-origin: 50% 100%; transform: scaleY(.3); }
.stg .playing .eq3 i { animation: req .7s ease-in-out infinite; } .stg .playing .eq3 i:nth-child(2) { animation-delay: -.25s; } .stg .playing .eq3 i:nth-child(3) { animation-delay: -.5s; }
.stg .stage-hint { position: absolute; left: 0; bottom: 18px; font-size: 12.5px; color: var(--dim2); max-width: 30%; line-height: 1.35; display: none; }
@media (min-width: 720px) {
  .stg .hero-stage { height: 460px; }
  .stg .stage-hint { display: block; }
}
@media (min-width: 1080px) {
  .stg .hero { padding-block: 26px 48px; min-height: min(calc(100svh - var(--top-h)), 900px); display: grid; align-items: center; }
  .stg .hero-in { grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: 36px; }
  .stg .stage-note { grid-column: 2; margin-top: -26px; }
  .stg .hero-h { font-size: clamp(64px, 7.2vw, 116px); }
  .stg .hero-stage { height: min(640px, calc(100svh - var(--top-h) - 70px)); min-height: 520px; margin-top: 0; }
  .stg .hero-lights .beam { max-width: 190px; }
}
/* the opening's still first frame and the rise of the hero under it (the app's part(): 28 px, 380 ms, 60 ms apart); the
   hero is never at opacity 0 (its H1 is the largest paint) */
.stg .rise.i0 { --i: 0; } .stg .rise.i1 { --i: 1; } .stg .rise.i2 { --i: 2; } .stg .rise.i3 { --i: 3; } .stg .rise.i4 { --i: 4; }
.stg .pre .rise { opacity: .1; transform: translateY(28px); }
.stg .rising .rise { animation: rise .38s var(--ease-enter) calc(var(--i, 0) * 60ms) both; }
@keyframes rise { from { opacity: .1; transform: translateY(28px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- THE SETLIST: tracks */
.stg .track { position: relative; padding-block: clamp(64px, 9vw, 128px) 0; scroll-margin-top: 12px; }
/* (web/site-p2's second fix round: the re-review's R1) content-visibility on the tracks ONLY while a first arrival is
   parsed under the opening's ground (<html data-yb-parse>: home-boot.js sets it with the ground; home.js takes it away
   once the page is shown or the opening starts, the load event at the latest): a slow phone's parser and the frame that
   shows the page then lay out the hero, not the whole page. It is never there on an address with a #section, a reload,
   Back or a same-site arrival, so a #section address lands on its section, and the accessibility tree holds every track
   once the page has loaded. Superseded (the fix round): on every visit, always, which left /#charts, /#together,
   /#boards, /#guide and /#more 37-1,157 px past their sections and the tracks' headings and region names "notRendered"
   for a screen reader that started after the page loaded. "Your stage" never: its beams blend with the aurora (paint
   containment would isolate them). The heights are first guesses, kept once a track has been drawn. */
html[data-yb-parse] .stg .track:not(#mystage) { content-visibility: auto; contain-intrinsic-size: auto 1300px; }
@media (min-width: 1080px) { html[data-yb-parse] .stg .track:not(#mystage) { contain-intrinsic-size: auto 900px; } }
.stg .th-block { position: relative; display: flex; flex-direction: column; gap: 12px; margin-bottom: clamp(24px, 3.4vw, 40px); }
.stg .cue { display: flex; align-items: center; gap: 12px; }
.stg .cue .no { font-family: var(--f-hud); font-style: italic; font-weight: 900; font-size: 22px; line-height: 1; background: var(--num-paint); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stg .cue .no .n7 { display: none; }
.stg .cue-line { flex: 1; height: 3px; border-radius: 2px; max-width: 240px; background: rgba(255,255,255,.14); position: relative; overflow: hidden; }
.stg .cue-line::after { content: ''; position: absolute; inset: 0; background: #fff; box-shadow: 0 0 8px rgba(255,255,255,.75); transform-origin: 0 50%; transform: scaleX(1); opacity: .55; }
.stg .up.i0 { --i: 0; } .stg .up.i1 { --i: 1; } .stg .up.i2 { --i: 2; } .stg .up.i3 { --i: 3; } .stg .up.i4 { --i: 4; }
/* armed (below the fold, motion on): the count-in waits; content holds faint and 14 px low until the track starts */
.stg .track.armed .cue-line::after { transform: scaleX(0); }
.stg .track.armed .th { transform: translateY(-16px) scaleY(1.06); opacity: .3; }
.stg .track.armed .up:not(.mvc), .stg .finale.armed .enc-in { opacity: .14; transform: translateY(14px); }
.stg .track.play .caps4 i { animation: capOn .5s both; }
.stg .track.play .caps4 i:nth-child(2) { animation-delay: .15s; } .stg .track.play .caps4 i:nth-child(3) { animation-delay: .3s; } .stg .track.play .caps4 i:nth-child(4) { animation-delay: .45s; }
@keyframes capOn { 0% { background: linear-gradient(180deg, color-mix(in srgb, rgb(var(--c)) 72%, #fff), rgb(var(--c))); box-shadow: 0 0 12px rgba(var(--c),1); transform: scale(1.3); }
  60% { background: linear-gradient(180deg, color-mix(in srgb, rgb(var(--c)) 72%, #fff), rgb(var(--c))); box-shadow: 0 0 8px rgba(var(--c),.8); transform: scale(1); }
  100% { background: rgba(var(--c),.3); box-shadow: inset 0 0 0 1px rgba(var(--c),.6); transform: scale(1); } }
.stg .track.play .cue-line::after { animation: cueLine .6s var(--ease-enter) .6s both; }
@keyframes cueLine { from { transform: scaleX(0); opacity: 1; } to { transform: scaleX(1); opacity: .55; } }
.stg .track.play .th { animation: land .44s var(--ease-pop) .6s both; }
@keyframes land { 0% { transform: translateY(-16px) scaleY(1.06); opacity: .3; } 55% { transform: translateY(2px) scaleY(.96); opacity: 1; } 100% { transform: none; opacity: 1; } }
.stg .track.play .up:not(.mvc), .stg .finale.play .enc-in { animation: upRise .38s var(--ease-enter) calc(.7s + var(--i, 0) * 40ms) both; }
@keyframes upRise { from { opacity: .14; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* a track that keyboard focus reached before its count-in stands in place at once (home.js) */
.stg .instant .th, .stg .instant .up, .stg .instant .cue-line::after, .stg .instant .caps4 i, .stg .finale.instant .enc-in { animation: none !important; }
/* a link to a track's own page, once it exists, sits at the end of its lede */
.stg .lede .lnk, .stg .rk-t .lnk, .stg .fine .lnk { margin-left: 4px; }

/* ---- 01 add a song */
.stg .addflow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.stg .af { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.stg .af h3 { display: flex; align-items: center; gap: 10px; font-family: var(--f-disp); font-weight: 400; font-size: 22px; letter-spacing: .02em; text-transform: uppercase; line-height: 1.05; margin-top: 6px; }
.stg .af > p { font-size: 14.5px; color: var(--dim); }
.stg .step-n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; flex: none; font-family: var(--f-hud); font-style: italic; font-weight: 900; font-size: 15px; color: var(--rose-ink); background: linear-gradient(rgba(255,59,95,.12), rgba(255,59,95,.12)), var(--plate-solid); box-shadow: inset 0 0 0 1px rgba(255,59,95,.45); }
.stg .af-screen { position: relative; height: 196px; border-radius: 18px; padding: 16px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 14px;
  border: 1.5px solid rgba(255,255,255,.12); background: linear-gradient(180deg, rgba(28,24,38,.92), rgba(12,9,20,.94)); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 6px 0 rgba(0,0,0,.4), 0 14px 30px rgba(0,0,0,.45); }
.stg .field { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; border-radius: 13px; background: rgba(0,0,0,.4); box-shadow: inset 0 2px 6px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.1); font-size: 14.5px; color: var(--white); min-width: 0; }
.stg .field svg.i { color: var(--dim); }
.stg .typed { white-space: nowrap; overflow: hidden; }
.stg .caret { width: 2px; height: 18px; background: var(--rose); border-radius: 1px; animation: caret 1s steps(1) infinite; flex: none; }
@keyframes caret { 50% { opacity: 0; } }
.stg .yt-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.stg .ph-cover { width: 96px; height: 54px; border-radius: 8px; overflow: hidden; }
.stg .yt-meta { display: flex; flex-direction: column; min-width: 0; }
.stg .yt-meta b { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stg .yt-meta span { font-size: 12px; color: var(--dim2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stg .addk { min-height: 38px; padding: 0 12px 0 8px; }
.stg .addk .ic svg.i { width: 18px; height: 18px; }
.stg .addk.hit { animation: addHit .3s var(--ease-enter); }
@keyframes addHit { 0% { transform: translateY(2px); box-shadow: inset 0 -2px 0 #fff, 0 0 18px rgba(255,59,95,.8); } 100% { transform: none; } }
.stg .prep { align-items: center; text-align: center; }
.stg .prep-h { display: flex; align-items: center; gap: 10px; font-stretch: 75%; font-weight: 800; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--white); }
.stg .loadline { position: relative; width: 100%; max-width: 209px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.22); }
.stg .loadline .fill { position: absolute; left: 0; right: 0; top: -1px; height: 5px; border-radius: 3px; background: var(--lanes-line); box-shadow: 0 0 10px rgba(255,255,255,.5); transform-origin: 0 50%; transform: scaleX(var(--f, 1)); }
.stg .loadline .head { position: absolute; top: -3.5px; left: calc(var(--f, 1) * 100% - 5px); width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px #fff, 0 0 16px rgba(255,59,95,1); opacity: var(--hd, 0); }
.stg .prep-n { font-size: 12.5px; color: var(--dim); max-width: 30ch; line-height: 1.45; }
.stg .ready { gap: 18px; }
.stg .notif { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 14px; background: rgba(14,20,32,.96); border: 1px solid rgba(112,245,203,.45); box-shadow: 0 10px 24px rgba(0,0,0,.45); }
.stg .nt-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: var(--mint); background: rgba(112,245,203,.12); flex: none; }
.stg .nt-w { display: flex; flex-direction: column; min-width: 0; }
.stg .nt-w b { font-size: 14px; } .stg .nt-w i { font-style: normal; font-size: 12px; color: var(--dim2); }
.stg .landpad { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding-top: 6px; }
.stg .landpad .tp { width: 100%; padding: 0 2px; letter-spacing: .05em; }
.stg .landpad .fall { position: absolute; top: -70px; width: 34px; height: 17px; border-radius: 9px; left: calc((100% - 18px) / 4 * var(--k) + 6px * var(--k) + (100% - 18px) / 8 - 17px); opacity: 0; --k: 0;
  background: linear-gradient(180deg, color-mix(in srgb, rgb(var(--c)) 72%, #fff), rgb(var(--c))); box-shadow: 0 0 10px rgba(var(--c),.9); }
.stg .landpad .fall::after { content: ''; position: absolute; left: 8px; right: 8px; top: 6px; height: 5px; border-radius: 3px; background: #fff; }
.stg .landpad .fall:nth-of-type(1) { --k: 0; --c: var(--l0-rgb); } .stg .landpad .fall:nth-of-type(2) { --k: 1; --c: var(--l1-rgb); } .stg .landpad .fall:nth-of-type(3) { --k: 2; --c: var(--l2-rgb); } .stg .landpad .fall:nth-of-type(4) { --k: 3; --c: var(--l3-rgb); }
.stg .addflow + .fine { margin-top: 18px; }
@media (min-width: 860px) { .stg .addflow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }

/* ---- 02 the songs */
.stg .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 8px; }
.stg .facts li { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 16px; background: rgba(16,12,26,.62); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), inset 0 -2px 0 rgba(255,255,255,.08); min-width: 0; }
.stg .facts .num { font-size: clamp(36px, 5vw, 52px); line-height: 1; }
.stg .facts span { font-size: 13px; color: var(--dim); line-height: 1.35; }
.stg .asof { font-size: 12.5px; color: var(--dim2); margin-bottom: 18px; }
.stg .coll { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.stg .coll .chip { min-height: 30px; padding: 4px 11px; font-size: 12px; }
.stg .shelf-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.stg .shelf-head h3 { font-family: var(--f-disp); font-weight: 400; font-size: 24px; text-transform: uppercase; letter-spacing: .02em; line-height: 1; margin-right: auto; }
.stg .shelf { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(232px, 72%); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; margin-right: calc(-1 * var(--gxr)); padding-right: var(--gxr); scrollbar-width: thin; }
.stg .song { scroll-snap-align: start; display: flex; flex-direction: column; min-width: 0; border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg, rgba(28,24,38,.94), rgba(12,9,20,.96)); border: 1.5px solid rgba(255,255,255,.1); box-shadow: 0 6px 0 rgba(0,0,0,.4), 0 14px 30px rgba(0,0,0,.4); }
.stg .cover { position: relative; aspect-ratio: 16 / 9; width: 100%; max-width: 100%; overflow: hidden; background: var(--tile, #2b1d6b); }
.stg .cover svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stg .lk0 { --tile: #5520BD; } .stg .lk1 { --tile: #B31232; } .stg .lk2 { --tile: #1C6E5A; } .stg .lk3 { --tile: #9A4E08; } .stg .lk4 { --tile: #1B3F8A; }
.stg .lk5 { --tile: #8E2A16; } .stg .lk6 { --tile: #0E5466; } .stg .lk7 { --tile: #6E1A63; } .stg .lk8 { --tile: #2B1D6B; } .stg .lk9 { --tile: #3A1A8C; }
/* the cover fade (coverFade.ts): 0.3 s, 40 ms apart, over the song's colour tile */
.stg .cover .cv-art { position: absolute; inset: 0; opacity: 1; transition: opacity .3s cubic-bezier(.33,1,.68,1); }
.stg .cv-art.d1 { transition-delay: 40ms; } .stg .cv-art.d2 { transition-delay: 80ms; } .stg .cv-art.d3 { transition-delay: 120ms; } .stg .cv-art.d4 { transition-delay: 160ms; }
.stg .cv-art.d5 { transition-delay: 200ms; } .stg .cv-art.d6 { transition-delay: 240ms; } .stg .cv-art.d7 { transition-delay: 280ms; }
.stg .armed .cover .cv-art { opacity: 0; }
.stg .song-b { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; min-width: 0; }
.stg .artist { font-stretch: 75%; font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--amber); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stg .song h4 { font-family: var(--f-disp); font-weight: 400; font-size: 21px; line-height: 1.05; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stg .song h4 a { text-decoration: none; } .stg .song h4 a:hover { text-decoration: underline; text-decoration-color: var(--mint); }
.stg .meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stg .tiers4 { display: inline-flex; gap: 3px; } .stg .tiers4 i { width: 14px; height: 6px; border-radius: 3px; }
.stg .tiers4 i:nth-child(1) { background: linear-gradient(90deg, var(--easy-a), var(--easy-b)); } .stg .tiers4 i:nth-child(2) { background: linear-gradient(90deg, var(--normal-a), var(--normal-b)); }
.stg .tiers4 i:nth-child(3) { background: linear-gradient(90deg, var(--hard-a), var(--hard-b)); } .stg .tiers4 i:nth-child(4) { background: linear-gradient(90deg, var(--expert-a), var(--expert-b)); }
@media (min-width: 720px) { .stg .shelf { grid-auto-columns: minmax(240px, 36%); } }
@media (min-width: 1080px) { .stg .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } .stg .shelf { grid-auto-columns: calc((100% - 36px) / 4); margin-right: 0; padding-right: 0; } }
/* (web/site-p2: the design review) the strip fits however many facts the server sent: three in one row on a computer,
   and on a phone the odd one across the row (no empty slot, no lone tile) */
.stg .facts.n1 { grid-template-columns: minmax(0, 1fr); }
.stg .facts.n3 li:last-child { grid-column: 1 / -1; }
@media (min-width: 1080px) { .stg .facts.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stg .facts.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .stg .facts.n3 li:last-child { grid-column: auto; } }

/* ---- 03 top charts (the board is an example, marked so) */
.stg .eqb { position: absolute; left: 0; right: 0; bottom: 22px; height: 230px; display: flex; gap: 6px; align-items: flex-end; pointer-events: none; z-index: -1; max-width: 520px; }
.stg .eqb i { flex: 1; max-width: 14px; height: 100%; border-radius: 7px 7px 3px 3px; transform-origin: 50% 100%; transform: scaleY(0); opacity: .9; }
.stg .charts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
/* (web/site-p2: the design review's F3) no song to show: no board and no country buttons; the two notes share the row */
@media (min-width: 720px) { .stg .charts.no-board .cside { flex-direction: row; } .stg .charts.no-board .cside > * { flex: 1 1 0; } }
@media (min-width: 1080px) { .stg .charts.no-board { grid-template-columns: minmax(0, 1fr); } }
.stg .cc-scroll { overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--gxr)); padding: 2px var(--gxr) 2px 2px; }
.stg .cc-scroll::-webkit-scrollbar { display: none; }
.stg .cc-tabs { display: inline-flex; gap: 6px; padding: 4px; border-radius: 16px; background: rgba(0,0,0,.42); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), inset 0 2px 6px rgba(0,0,0,.5); }
.stg .cc-tabs .cc { display: inline-flex; align-items: center; height: 38px; padding: 0 12px; border-radius: 12px; font-stretch: 75%; font-weight: 800; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); white-space: nowrap; text-decoration: none; }
.stg .cc-tabs .cc:hover { color: var(--white); }
.stg .cc-tabs .cc[aria-pressed="true"], .stg .cc-tabs .cc[aria-selected="true"], .stg .cc-tabs .cc[aria-current] { color: #fff; background: rgba(61,139,255,.16); box-shadow: inset 0 -3px 0 #3D8BFF, inset 0 0 0 1px rgba(61,139,255,.45); }
.stg .cboard { padding: 14px; min-width: 0; position: relative; }
.stg .cb-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 2px 2px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.stg .cb-src { font-stretch: 75%; font-weight: 800; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--cool-ink); margin-right: auto; }
.stg .cb-src b { color: var(--white); }
.stg .cb-rows { display: flex; flex-direction: column; }
.stg .cb-rows.hold { visibility: hidden; }
.stg .cb-rows li { display: grid; grid-template-columns: 34px 44px 56px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 2px; border-bottom: 1px solid rgba(255,255,255,.05); }
.stg .cb-rows li:last-child { border-bottom: 0; }
.stg .cb-rank { font-family: var(--f-hud); font-style: italic; font-weight: 900; font-size: 22px; color: var(--dim); text-align: right; font-variant-numeric: tabular-nums; }
.stg .cb-rows li:nth-child(1) .cb-rank { color: #FFC65E; } .stg .cb-rows li:nth-child(2) .cb-rank { color: #dce3f0; } .stg .cb-rows li:nth-child(3) .cb-rank { color: #e0956a; }
.stg .mvc { font-stretch: 75%; font-weight: 800; font-size: 12px; letter-spacing: .04em; text-align: center; border-radius: 6px; padding: 2px 0; }
.stg .mvc.up { color: var(--mint); background: rgba(112,245,203,.1); } .stg .mvc.dn { color: var(--rose-ink); background: rgba(255,59,95,.1); } .stg .mvc.new { color: var(--gold); background: rgba(255,198,94,.12); } .stg .mvc.eq { color: var(--dim2); }
.stg .cb-cover { width: 56px; height: 32px; border-radius: 6px; overflow: hidden; position: relative; }
.stg .cb-cover svg { width: 100%; height: 100%; display: block; }
.stg .cb-t { display: flex; flex-direction: column; min-width: 0; }
.stg .cb-t b { font-weight: 700; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stg .cb-t span { font-stretch: 75%; font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--amber); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stg .cb-rows.swap li { animation: rowIn .3s var(--ease-enter) both; }
.stg .cb-rows .r1 { animation-delay: 40ms; } .stg .cb-rows .r2 { animation-delay: 80ms; } .stg .cb-rows .r3 { animation-delay: 120ms; } .stg .cb-rows .r4 { animation-delay: 160ms; }
.stg .cb-rows .r5 { animation-delay: 200ms; } .stg .cb-rows .r6 { animation-delay: 240ms; } .stg .cb-rows .r7 { animation-delay: 280ms; }
@keyframes rowIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.stg .qload { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 26px 0; font-size: 13px; color: var(--dim); }
.stg .qload[hidden] { display: none; }
.stg .mp { padding: 16px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--dim); }
.stg .cside { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.stg .monday { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.stg .mon { position: relative; display: flex; flex-direction: column; gap: 14px; padding-left: 4px; }
.stg .mon::before { content: ''; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 2px; border-radius: 1px; background: linear-gradient(180deg, var(--l2), var(--l3)); opacity: .55; }
.stg .mon li { position: relative; display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 10px; padding-left: 20px; font-size: 13.5px; color: var(--dim); }
.stg .mon li::before { content: ''; position: absolute; left: 1px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: #0E0918; box-shadow: inset 0 0 0 2px var(--l2), 0 0 8px rgba(63,227,255,.5); }
.stg .mon-t { font-family: var(--f-hud); font-style: italic; font-weight: 800; font-size: 13px; color: var(--cool-ink); white-space: nowrap; }
.stg .mon li > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.stg .mon b { color: var(--white); font-size: 14px; }
@media (min-width: 1080px) { .stg .charts { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .stg .cc-scroll { grid-column: 1 / -1; margin-right: 0; padding-right: 2px; } .stg .cside { align-self: start; } }
/* (s18 WEB2, 1 Nov 2026) THE REAL BOARDS: YouTube's own list for each country, all in the page. Without the page's script
   (no data-motion on <html>: home-boot.js writes it before the first paint) every board shows under its own heading and
   the country buttons, which need script, are not drawn; with it, the chosen board alone (.on) from the first paint, every
   board ten rows tall whatever it holds, so choosing a country never moves anything below it. A row is one line high
   whatever its words (an ellipsis), so late fonts move nothing either. */
.stg .cboards { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
:root:not([data-motion]) .stg .cc-scroll.real { display: none; }
:root[data-motion] .stg .cboards > .cboard:not(.on) { display: none; }
/* a board's head is the same height whatever its words, so choosing a country moves nothing: under 720 px the source on a
   line of its own with room for two (YouTube's mark beside it) and the country under it; from 720 px all on one line,
   the mark at its end. The dot is read out, not shown, under 720 px. */
.stg .cboards .cb-head { position: relative; display: block; }
.stg .cboards .cb-src { line-height: 1.3; }
.stg .cboards .cb-s { display: flex; align-items: center; min-height: 32px; padding-right: 116px; }
.stg .cboards .cb-dot { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.stg .cboards .cb-src b { display: block; margin-top: 4px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stg .cboards .cb-head .ytm { position: absolute; top: 2px; right: 0; height: 32px; margin: 0; padding: 0 8px; }
@media (min-width: 720px) {
  .stg .cboards .cb-head { display: flex; align-items: center; flex-wrap: nowrap; }
  .stg .cboards .cb-s { display: inline; min-height: 0; padding-right: 0; }
  .stg .cboards .cb-dot { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
  .stg .cboards .cb-src b { display: inline; margin-top: 0; font-size: inherit; }
  .stg .cboards .cb-head .ytm { position: static; height: auto; padding: 12px 10px; margin: -12px 0 -12px auto; }
}
.stg .cboards .cb-rows li { height: 50px; padding-top: 0; padding-bottom: 0; }
:root[data-motion] .stg .cboards .cb-rows { min-height: 500px; }
.stg .cboards .cb-cover { height: auto; aspect-ratio: 16 / 9; background: var(--tile, #2b1d6b); }
.stg .cboards .cb-cover::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.28), rgba(255,255,255,0) 60%); }
.stg .cboards .mvc .sr-only { text-transform: none; }
.stg .cboards li.is-prep .cb-rank, .stg .cboards li.is-prep .cb-t b { opacity: .7; }
/* gold, silver and bronze for YouTube's places 1-3 (as the app), whichever row they fall on */
.stg .cboards .cb-rows li:nth-child(n) .cb-rank { color: var(--dim); }
.stg .cboards .cb-rows li .cb-rank.pl1 { color: #FFC65E; } .stg .cboards .cb-rows li .cb-rank.pl2 { color: #dce3f0; } .stg .cboards .cb-rows li .cb-rank.pl3 { color: #e0956a; }
/* REV-B FIX 2: from 720 px every country's button is in sight, on as many lines as the width needs (the same at a given
   width, so nothing shifts); on a phone the strip scrolls sideways as before */
@media (min-width: 720px) { .stg .cc-scroll.real { overflow: visible; margin-right: 0; padding-right: 2px; } .stg .cc-scroll.real .cc-tabs { display: flex; flex-wrap: wrap; } }
/* REV-B nit 3: under 360 px a fallback font can take the source to three lines: room for three */
@media (max-width: 359px) { .stg .cboards .cb-s { min-height: 47px; } }
@media (forced-colors: active) { .stg .cc-tabs .cc[aria-selected="true"], .stg .cc-tabs .cc[aria-pressed="true"] { outline: 2px solid CanvasText; outline-offset: -3px; } }
.stg .prep-w { font-style: normal; color: var(--cool-ink); }
.stg .cb-more { padding: 10px 2px 0; font-size: 13.5px; }
/* a song's YouTube picture: whole (its box is 16:9, the picture's own shape: nothing cropped or stretched), unaltered (no
   filter, tint, blend, mask or overlay: it sits ABOVE the drawn cover or the song's colour, which show until it arrives
   and wherever it cannot) */
.stg .cover .pic, .stg .cb-cover .pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
/* YouTube's own mark beside each block of its content: 20 px tall (the brand's smallest on a screen), clear space round
   it, a 44 px target, never the largest thing in a track */
.stg .ytm { display: inline-flex; align-items: center; flex: none; min-height: 44px; padding: 12px 10px; margin: -12px 0; border-radius: 10px; }
.stg .ytm img { display: block; height: 20px; width: auto; }
.stg .shelf-head .ytm { margin-left: 0; }
.stg .shelf-head .ytm { margin-right: 4px; }

/* ---- 04 play together (an example room) */
.stg .together { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.stg .room, .stg .qp { padding: 16px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.stg .room-code { margin-left: auto; font-family: var(--f-hud); font-style: italic; font-weight: 800; font-size: 16px; letter-spacing: .08em; color: var(--mint); }
.stg .seats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.stg .seat { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 4px; border-radius: 14px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); min-width: 0; }
.stg .seat .portrait { width: 44px; height: 44px; }
.stg .seat b { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.stg .seat.me { background: linear-gradient(180deg, rgba(112,245,203,.16), rgba(112,245,203,.04)); box-shadow: inset 0 0 0 1px rgba(112,245,203,.4); }
.stg .seat.empty { justify-content: center; color: var(--dim2); border: 1.5px dashed rgba(255,255,255,.16); box-shadow: none; background: none; min-height: 96px; font-stretch: 75%; font-weight: 800; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.stg .seat.empty svg.i { width: 20px; height: 20px; }
.stg .race { display: flex; flex-direction: column; gap: 7px; }
.stg .race-row { display: grid; grid-template-columns: 74px minmax(0, 1fr) 58px; gap: 10px; align-items: center; font-size: 12.5px; }
.stg .race-row > span:first-child { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stg .race-bar { height: 8px; border-radius: 8px; background: rgba(255,255,255,.08); overflow: hidden; }
.stg .race-bar i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, #6ff5e0, #3fe3ff); box-shadow: 0 0 10px rgba(111,245,224,.6); width: var(--w, 50%); transition: width .9s var(--ease-enter); }
.stg .race-bar .rw0 { --w: 71%; } .stg .race-bar .rw1 { --w: 85.5%; } .stg .race-bar .rw2 { --w: 58%; } .stg .race-bar .rw3 { --w: 44.5%; }
.stg .race-row.me .race-bar i { background: linear-gradient(90deg, #ffd98a, #ff8e56); box-shadow: 0 0 10px rgba(255,198,94,.6); }
.stg .race-row > b { font-family: var(--f-hud); font-style: italic; font-weight: 800; font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; }
.stg .radar { position: relative; width: 150px; height: 150px; margin: 0 auto; border-radius: 50%; background: radial-gradient(circle, rgba(112,245,203,.12), rgba(112,245,203,0) 70%); box-shadow: inset 0 0 0 1px rgba(112,245,203,.25); }
.stg .radar::before, .stg .radar::after { content: ''; position: absolute; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(112,245,203,.16); }
.stg .radar::before { inset: 25px; } .stg .radar::after { inset: 52px; }
.stg .radar .sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(112,245,203,0) 0deg, rgba(112,245,203,0) 280deg, rgba(112,245,203,.45) 360deg); animation: sweep 2.8s linear infinite; }
@keyframes sweep { to { transform: rotate(360deg); } }
.stg .radar .rip { position: absolute; inset: 50%; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(112,245,203,.7); animation: rip 2.8s var(--ease-enter) infinite; }
.stg .radar .rip:nth-of-type(3) { animation-delay: .35s; } .stg .radar .rip:nth-of-type(4) { animation-delay: .7s; }
@keyframes rip { 0% { inset: 50%; opacity: .9; } 70%, 100% { inset: 0; opacity: 0; } }
.stg .radar .dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px var(--mint); }
.stg .radar .d1 { left: 28%; top: 30%; } .stg .radar .d2 { left: 66%; top: 24%; background: var(--l1); box-shadow: 0 0 10px var(--l1); } .stg .radar .d3 { left: 58%; top: 70%; background: var(--l3); box-shadow: 0 0 10px var(--l3); }
.stg .qp-t { font-size: 14px; color: var(--dim); text-align: center; }
.stg .vote { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.stg .vcard { display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 14px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); min-width: 0; position: relative; }
.stg .vcard b { font-family: var(--f-disp); font-weight: 400; font-size: 16px; text-transform: uppercase; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stg .vcard span { font-size: 12px; color: var(--dim2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stg .vcard .votes { display: flex; gap: 3px; margin-top: 2px; } .stg .vcard .votes i { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 6px rgba(112,245,203,.7); }
.stg .vcard.sur { background: linear-gradient(180deg, rgba(112,245,203,.12), rgba(112,245,203,.03)); box-shadow: inset 0 -2px 0 var(--mint), inset 0 0 0 1px rgba(112,245,203,.5); }
.stg .vcard.sur b { color: var(--mint); }
.stg .proof { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; }
.stg .proof li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(255,247,236,.82); }
.stg .proof svg.i { color: var(--mint); }
@media (min-width: 960px) { .stg .together { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }

/* ---- 05 every week */
.stg .week { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.stg .event, .stg .ranked { padding: 18px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.stg .event { background: radial-gradient(120% 80% at 100% 0%, rgba(255,198,94,.16), rgba(255,198,94,0) 60%), linear-gradient(180deg, rgba(28,24,38,.94), rgba(12,9,20,.96)); border-color: rgba(255,198,94,.35); }
.stg .ev-when { font-stretch: 75%; font-weight: 800; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.stg .cd { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.stg .cd div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px 8px; border-radius: 14px; background: rgba(0,0,0,.42); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 2px 6px rgba(0,0,0,.5); }
.stg .cd b { font-family: var(--f-hud); font-style: italic; font-weight: 900; font-size: clamp(30px, 8vw, 46px); line-height: 1; background: var(--num-paint); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.stg .cd i { font-style: normal; font-stretch: 75%; font-weight: 800; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim2); }
.stg .ev-next { font-size: 14px; color: var(--dim); }
.stg .ev-facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; }
.stg .ev-facts li { display: flex; align-items: center; gap: 9px; font-size: 14px; }
.stg .ev-facts svg.i { color: var(--gold); }
.stg .event .b.sec { align-self: flex-start; }
.stg .event > .lnk { align-self: flex-start; }
.stg .venues { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; align-items: end; height: 196px; padding-top: 8px; }
.stg .venues li { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; height: 100%; min-width: 0; }
.stg .venues li > i { width: 100%; height: var(--h); border-radius: 10px 10px 4px 4px; background: linear-gradient(180deg, rgba(255,198,94,.5), rgba(255,198,94,.08)); box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 0 16px rgba(255,198,94,.15); transform-origin: 50% 100%; }
.stg .venues .v0 { --h: 22%; --v: 0; } .stg .venues .v1 { --h: 34%; --v: 1; } .stg .venues .v2 { --h: 48%; --v: 2; } .stg .venues .v3 { --h: 62%; --v: 3; } .stg .venues .v4 { --h: 78%; --v: 4; } .stg .venues .v5 { --h: 92%; --v: 5; }
.stg .venues li.top > i { background: linear-gradient(180deg, #FFE7A8, #E0A020); box-shadow: inset 0 2px 0 rgba(255,255,255,.7), 0 0 22px rgba(255,198,94,.6); }
.stg .venues b { font-stretch: 75%; font-weight: 800; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.stg .venues .tp { max-width: 100%; }
.stg .track.play .venues li > i { animation: grow .5s var(--ease-spring) both; animation-delay: calc(.8s + var(--v, 0) * 75ms); }
@keyframes grow { from { transform: scaleY(0); } to { transform: none; } }
.stg .rk-t { font-size: 14px; color: var(--dim); }
@media (min-width: 960px) { .stg .week { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ---- 06 create */
.stg .vinyl { position: absolute; right: 0; top: -18px; width: 240px; height: 240px; border-radius: 50%; pointer-events: none; z-index: -1; opacity: 0;
  background: radial-gradient(circle, #07070A 0 4%, transparent 4.5%), radial-gradient(circle, transparent 0 17%, rgba(255,255,255,.06) 17.5% 18%, transparent 18.5%), repeating-radial-gradient(circle, rgba(255,255,255,.05) 0 1px, rgba(0,0,0,0) 1px 5px), radial-gradient(circle, #0E0918 0 70%, #07070A 71%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 20px 50px rgba(0,0,0,.6); }
.stg .vinyl .lab { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; background: radial-gradient(circle, #07070A 0 7%, transparent 8%), linear-gradient(90deg, var(--violet), #6A2BD6); }
.stg .scr { display: inline-block; transform-origin: 0 50%; }
.stg .create { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.stg .editor { padding: 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.stg .ed-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stg .ed-t { display: inline-flex; align-items: center; gap: 7px; font-stretch: 75%; font-weight: 800; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin-right: auto; color: var(--hud-violet); }
.stg .seg2 { display: inline-flex; gap: 3px; padding: 3px; border-radius: 12px; background: rgba(0,0,0,.42); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.stg .seg2 span { padding: 4px 9px; border-radius: 9px; font-stretch: 75%; font-weight: 800; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim2); }
.stg .seg2 .on { color: #fff; background: rgba(180,140,255,.18); box-shadow: inset 0 -2px 0 #B48CFF, inset 0 0 0 1px rgba(180,140,255,.45); }
.stg .ed-test { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 10px; font-stretch: 75%; font-weight: 800; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--hud-violet); box-shadow: inset 0 -2px 0 #B48CFF, inset 0 0 0 1px rgba(180,140,255,.5); }
.stg .ed-test svg.i { width: 13px; height: 13px; }
.stg .ed-test.on { color: #fff; background: rgba(180,140,255,.3); }
.stg #ed { width: 100%; height: 220px; border-radius: 12px; background: rgba(0,0,0,.35); display: block; }
.stg .ed-cap { font-size: 12.5px; color: var(--dim2); }
.stg .handoff { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.stg .steps { display: flex; flex-direction: column; gap: 12px; }
.stg .steps li { display: flex; gap: 12px; align-items: flex-start; }
/* (web/site-p2: F4) the step numbers' tint over the kit's solid plate, not over the aurora (3.98:1 over its pink glow) */
.stg .steps .step-n { color: var(--hud-violet); background: linear-gradient(rgba(180,140,255,.14), rgba(180,140,255,.14)), var(--plate-solid); box-shadow: inset 0 0 0 1px rgba(180,140,255,.45); }
.stg .steps li > span:last-child { display: flex; flex-direction: column; font-size: 14px; color: var(--dim); }
.stg .steps b { color: var(--white); font-size: 15.5px; }
.stg .codebox { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.stg .code-l { font-stretch: 75%; font-weight: 800; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.stg .digits { display: flex; gap: 6px; }
.stg .digits span { width: 42px; height: 50px; border-radius: 12px; background: rgba(0,0,0,.42); box-shadow: inset 0 2px 6px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.12); }
.stg .chip.ns { color: var(--hud-violet); border-color: rgba(180,140,255,.45); background: rgba(18,10,32,.7); }
.stg .handoff .b.pri { align-self: flex-start; padding-right: 22px; }
/* (web/site-p2: the design review's F4) "Open the editor": a deeper top to the violet key, so its 20 px white label keeps
   4.5:1 (it measured 4.31 on the kit's #9A5CF2) */
.stg .handoff .b.pri.violet { --et: #7E45DD; }
/* (web/site-p2: the design review's F4) the handoff column and "Your stage" list sit where the WebGL aurora's pink glow is
   brightest on a computer: their words in near-white, so they keep 4.5:1 there too (run-k2 measured 3.6 at .78) */
.stg .handoff .fine { color: rgba(255,247,236,.94); }
.stg .handoff .b.pri .words { align-items: flex-start; }
.stg .handoff .b.pri .sub { text-align: left; }
#create { overflow-x: clip; }
@media (min-width: 960px) { .stg .create { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; } .stg #ed { height: 300px; } .stg .vinyl { width: 320px; height: 320px; top: -60px; } }

/* ---- 07 leaderboards (an example board: the podium in rank order, placed second, first, third; the rest a table) */
.stg .boards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.stg .board { padding: 14px; min-width: 0; }
.stg .bd-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.stg .bd-song { display: flex; align-items: center; gap: 10px; margin-right: auto; min-width: 0; }
.stg .bd-song > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.stg .bd-song b { font-family: var(--f-disp); font-weight: 400; font-size: 22px; text-transform: uppercase; letter-spacing: .02em; line-height: 1.05; }
.stg .mini-cover { width: 64px; height: 36px; border-radius: 8px; overflow: hidden; flex: none; }
.stg .mini-cover svg { width: 100%; height: 100%; display: block; }
.stg .seg { display: inline-flex; gap: 3px; padding: 3px; border-radius: 12px; background: rgba(0,0,0,.42); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.stg .seg span { padding: 5px 8px; border-radius: 9px; font-stretch: 75%; font-weight: 800; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim2); }
.stg .seg .on { color: #fff; background: rgba(255,92,122,.18); box-shadow: inset 0 -2px 0 #FF5C7A, inset 0 0 0 1px rgba(255,92,122,.45); }
.stg .podium { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr) minmax(0, 1fr); gap: 8px; align-items: end; padding: 26px 4px 0; margin-bottom: 8px; }
.stg .pcol { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; position: relative; grid-row: 1; }
.stg .pcol.p2 { grid-column: 1; } .stg .pcol.p1 { grid-column: 2; } .stg .pcol.p3 { grid-column: 3; }
.stg .pcol .crown { color: var(--gold); filter: drop-shadow(0 0 8px rgba(255,198,94,.8)); }
.stg .pcol .crown svg.i { width: 26px; height: 26px; }
.stg .pcol .portrait { width: 56px; height: 56px; }
.stg .pcol.p1 .portrait { width: 72px; height: 72px; box-shadow: 0 0 28px rgba(255,198,94,.75); }
.stg .pcol .pn { font-size: 12.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.stg .pcol .pacc { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ice); font-weight: 600; }
.stg .pcol .pacc svg.i { width: 14px; height: 14px; color: var(--gold); }
.stg .pcol .ps { font-family: var(--f-hud); font-style: italic; font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.stg .step { width: 100%; border-radius: 12px 12px 4px 4px; display: grid; place-items: start center; padding-top: 4px; position: relative; transform-origin: 50% 100%; box-shadow: inset 0 2px 0 rgba(255,255,255,.55), inset 0 -6px 0 rgba(0,0,0,.25); }
.stg .step b { font-family: var(--f-hud); font-style: italic; font-weight: 900; font-size: 28px; line-height: 1; color: rgba(0,0,0,.55); }
.stg .p1 .step { height: 80px; background: linear-gradient(180deg, #FFE7A8, #E0A020); } .stg .p2 .step { height: 60px; background: linear-gradient(180deg, #FFFFFF, #9AA6BC); } .stg .p3 .step { height: 46px; background: linear-gradient(180deg, #FFD2B0, #B4683A); }
.stg .podium .slam-ring { position: absolute; left: 50%; top: 60px; width: 90px; height: 90px; margin-left: -45px; border-radius: 50%; border: 3px solid rgba(255,255,255,.95); box-shadow: 0 0 16px rgba(255,179,71,.9), inset 0 0 16px rgba(255,106,77,.7); opacity: 0; pointer-events: none; }
.stg .lb { width: 100%; border-collapse: separate; border-spacing: 0 6px; margin-top: -6px; }
.stg .lb td { padding: 7px 10px; background: rgba(255,255,255,.04); border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); vertical-align: middle; }
.stg .lb td:first-child { border-left: 1px solid rgba(255,255,255,.06); border-radius: 12px 0 0 12px; }
.stg .lb td:last-child { border-right: 1px solid rgba(255,255,255,.06); border-radius: 0 12px 12px 0; }
.stg .lb .rk { width: 40px; font-family: var(--f-hud); font-style: italic; font-weight: 900; font-size: 16px; color: var(--dim); text-align: center; }
.stg .lb .nm { min-width: 0; }
.stg .lb .nm .portrait { width: 30px; height: 30px; vertical-align: middle; margin-right: 9px; }
.stg .lb .nm-w { display: inline-flex; flex-direction: column; vertical-align: middle; min-width: 0; }
.stg .lb .nm-w b { font-size: 13px; font-weight: 800; }
.stg .lb .nm-w span { font-size: 12px; color: var(--dim2); }
.stg .lb .sc { white-space: nowrap; text-align: right; font-family: var(--f-hud); font-style: italic; font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.stg .lb .sc svg.i { width: 15px; height: 15px; color: var(--gold); margin-right: 6px; }
.stg .lb .ac { white-space: nowrap; text-align: right; font-weight: 600; font-size: 12px; color: var(--ice); width: 56px; }
.stg .lb tr.me td { background: rgba(112,245,203,.1); border-color: rgba(112,245,203,.4); }
.stg .ladder { padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.stg .medals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.stg .medals li { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.stg .medals b { font-stretch: 75%; font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.stg .coin { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: rgba(0,0,0,.55); box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 4px 10px rgba(0,0,0,.4); }
.stg .coin svg.i { width: 26px; height: 26px; }
.stg .coin.bronze { background: radial-gradient(circle at 35% 30%, #ffd2b0, #e0956a 45%, #7a3e1e); }
.stg .coin.silver { background: radial-gradient(circle at 35% 30%, #fff, #dce3f0 45%, #7c8aa3); }
.stg .coin.gold { background: radial-gradient(circle at 35% 30%, #fff5c8, #ffc65e 45%, #b8741a); }
.stg .coin.enc { background: radial-gradient(circle at 35% 30%, #ffd6e0, #ff3b5f 45%, #7a0a2a); color: rgba(255,255,255,.9); }
.stg .track.play .coin { animation: coinShine .9s ease-out both; }
.stg .track.play .medals li:nth-child(2) .coin { animation-delay: .1s; } .stg .track.play .medals li:nth-child(3) .coin { animation-delay: .2s; } .stg .track.play .medals li:nth-child(4) .coin { animation-delay: .3s; }
@keyframes coinShine { 0% { filter: brightness(1); } 30% { filter: brightness(1.8); } 100% { filter: brightness(1); } }
.stg .achs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 6px; }
.stg .achs li { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.stg .hex { width: 40px; height: 44px; position: relative; display: grid; place-items: center; clip-path: polygon(50% 0, 100% 24%, 100% 76%, 50% 100%, 0 76%, 0 24%); background: linear-gradient(180deg, var(--e1), var(--e3)); }
.stg .hex::before { content: ''; position: absolute; inset: 4px; clip-path: inherit; background: radial-gradient(circle at 40% 28%, var(--e1), var(--e2) 48%, var(--e3)); }
.stg .hex svg.i { position: relative; width: 19px; height: 19px; color: var(--ink2); }
.stg .hex.gold { --e1: #fff1c9; --e2: #ffc65e; --e3: #a8660f; --ink2: #4a2600; } .stg .hex.silver { --e1: #ffffff; --e2: #dce3f0; --e3: #7c8aa3; --ink2: #28303f; }
.stg .hex.bronze { --e1: #ffd9bd; --e2: #e0956a; --e3: #7a3e1e; --ink2: #ffffff; } .stg .hex.off { --e1: #6a6474; --e2: #3a3542; --e3: #1d1a22; --ink2: rgba(255,255,255,.5); }
.stg .achs span { font-size: 12px; font-weight: 700; text-align: center; line-height: 1.2; color: var(--dim); }
@media (min-width: 960px) { .stg .boards { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; } }

/* ---- 08 your stage (an example profile) */
.stg .ms { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.stg .ms-set { position: relative; overflow: hidden; border-radius: 22px; min-height: 360px; padding: 26px 16px 16px; display: flex; flex-direction: column; align-items: center; gap: 14px;
  background: radial-gradient(120% 70% at 50% 10%, #3a1150 0%, #16081f 55%, #07070a 100%); border: 1.5px solid rgba(255,255,255,.1); box-shadow: 0 18px 40px rgba(0,0,0,.5); }
.stg .ms-beam { position: absolute; top: -10%; width: 34%; height: 90%; transform-origin: 50% 0; mix-blend-mode: screen; filter: blur(10px); opacity: .55; border-radius: 0 0 50% 50%; }
.stg .ms-beam:nth-of-type(1) { left: 6%; background: linear-gradient(180deg, rgba(201,139,255,.7), rgba(201,139,255,0) 90%); transform: rotate(18deg); }
.stg .ms-beam:nth-of-type(2) { right: 6%; background: linear-gradient(180deg, rgba(255,77,141,.6), rgba(255,77,141,0) 90%); transform: rotate(-18deg); }
.stg .ms-dust { position: absolute; inset: 0; background-image: radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,214,255,.7), transparent), radial-gradient(1px 1px at 70% 22%, rgba(255,214,255,.6), transparent), radial-gradient(1.5px 1.5px at 40% 60%, rgba(255,214,255,.5), transparent), radial-gradient(1px 1px at 82% 55%, rgba(255,214,255,.6), transparent), radial-gradient(1.2px 1.2px at 12% 75%, rgba(255,214,255,.5), transparent), radial-gradient(1px 1px at 55% 40%, rgba(255,214,255,.7), transparent); opacity: .8; }
.stg .track.play .ms-beam:nth-of-type(1) { animation: msBeamL 1.1s var(--ease-enter) .7s both; } .stg .track.play .ms-beam:nth-of-type(2) { animation: msBeamR 1.1s var(--ease-enter) .78s both; }
@keyframes msBeamL { from { transform: rotate(-12deg); opacity: 0; } to { transform: rotate(18deg); opacity: .55; } }
@keyframes msBeamR { from { transform: rotate(12deg); opacity: 0; } to { transform: rotate(-18deg); opacity: .55; } }
.stg .ms-who { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.stg .ms-who .portrait { width: 104px; height: 104px; }
.stg .hdl { font-family: var(--f-disp); font-weight: 400; font-size: 34px; letter-spacing: .03em; line-height: 1.1; }
.stg .hdl.s-neon { color: #f2ffff; text-shadow: 0 0 2px #fff, 0 0 6px #7ff3ff, 0 0 12px #3fe3ff, 0 0 22px #3fe3ff, 0 0 40px rgba(63,227,255,.7); }
.stg .track.play .hdl.s-neon#msHandle { animation: neonOn 3.2s steps(1) .8s both; }
@keyframes neonOn { 0% { opacity: .15; } 6% { opacity: 1; } 9% { opacity: .2; } 14% { opacity: 1; } 18% { opacity: .35; } 22%, 100% { opacity: 1; } }
.stg .hdl.s-sparkle { background: linear-gradient(100deg, #ffd98a 0%, #fff6d0 40%, #ffc65e 50%, #b8741a 70%, #ffd98a 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: foil 4.5s linear infinite; }
@keyframes foil { to { background-position: -220% 0; } }
.stg .hdl.s-flame { background: linear-gradient(0deg, #ff3b5f 0%, #ff8a3d 45%, #ffd36b 80%, #fff3c4 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 8px rgba(255,138,61,.6)); }
.stg .ms-lvl { display: flex; gap: 6px; }
.stg .wall { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 420px; margin-top: auto; }
.stg .wall li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 14px; background: rgba(7,7,10,.62); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); min-width: 0; text-align: center; }
.stg .wall li span { font-size: 12px; font-weight: 700; color: var(--dim); line-height: 1.2; }
.stg .wall .coin { width: 34px; height: 34px; } .stg .wall .coin svg.i { width: 20px; height: 20px; }
.stg .wall .hex { width: 32px; height: 36px; } .stg .wall .hex svg.i { width: 15px; height: 15px; }
.stg .wall .wnum { font-family: var(--f-hud); font-style: italic; font-weight: 900; font-size: 22px; line-height: 34px; background: var(--num-paint); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stg .ms-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.stg .ms-list { display: flex; flex-direction: column; gap: 12px; }
.stg .ms-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: rgba(255,247,236,.94); }
.stg .ms-list b { color: var(--white); }
.stg .ms-list svg.i { color: var(--rose-ink); margin-top: 2px; }
.stg .styles { display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; padding: 14px; border-radius: 16px; background: rgba(7,7,10,.6); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.stg .styles .sw { font-size: 26px; }
@media (min-width: 960px) { .stg .ms { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; } .stg .ms-set { min-height: 440px; } }

/* ---- 09 guide */
.stg .quiet-h { position: relative; display: block; }
.stg .quiet-h .qa, .stg .quiet-h .qb { display: inline-block; }
.stg .quiet-h .qline { display: block; height: 3px; width: min(300px, 80%); margin-top: 12px; border-radius: 2px; background: var(--lanes-line); box-shadow: 0 0 10px rgba(255,255,255,.4); transform-origin: 50% 50%; }
.stg .moves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.stg .mv { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 16px; background: rgba(16,12,26,.7); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), inset 0 -2px 0 rgba(255,255,255,.08); min-width: 0; }
.stg .mv > svg.i { width: 22px; height: 22px; color: var(--mint); }
.stg .mv b { font-family: var(--f-disp); font-weight: 400; font-size: 21px; text-transform: uppercase; letter-spacing: .03em; line-height: 1; }
.stg .mv > span { font-size: 13px; color: var(--dim); line-height: 1.4; }
.stg .mv-lane { position: relative; height: 92px; border-radius: 10px; overflow: hidden; background: linear-gradient(180deg, rgba(var(--c),0), rgba(var(--c),.1)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.stg .mv[data-mv="tap"] { --c: var(--l0-rgb); } .stg .mv[data-mv="hold"] { --c: var(--l1-rgb); } .stg .mv[data-mv="chord"] { --c: var(--l2-rgb); } .stg .mv[data-mv="slice"] { --c: var(--l3-rgb); } .stg .mv[data-mv="flick"] { --c: var(--l0-rgb); }
.stg .mv-lane .ln { position: absolute; left: 8px; right: 8px; bottom: 18px; height: 3px; border-radius: 2px; background: #fff; box-shadow: 0 0 8px rgba(255,255,255,.75); }
.stg .mv-lane .n, .stg .mv-lane .n2 { position: absolute; left: 50%; top: -24px; width: 40px; height: 20px; margin-left: -20px; border-radius: 10px; background: linear-gradient(180deg, color-mix(in srgb, rgb(var(--c)) 72%, #fff), rgb(var(--c))); box-shadow: 0 0 10px rgba(var(--c),.9); animation: mvFall 1.8s linear infinite; }
.stg .mv-lane .n::after, .stg .mv-lane .n2::after { content: ''; position: absolute; left: 9px; right: 9px; top: 7px; height: 5px; border-radius: 3px; background: #fff; }
@keyframes mvFall { 0% { top: -24px; opacity: 1; } 55% { top: calc(100% - 28px); opacity: 1; } 62% { top: calc(100% - 28px); opacity: 0; transform: scale(1.3); } 100% { top: calc(100% - 28px); opacity: 0; } }
.stg .mv[data-mv="hold"] .n { height: 56px; animation-name: mvHold; }
.stg .mv[data-mv="hold"] .n::after { top: auto; bottom: 7px; }
@keyframes mvHold { 0% { top: -60px; height: 56px; } 45% { top: calc(100% - 64px); height: 56px; } 85% { top: calc(100% - 28px); height: 20px; opacity: 1; } 90%, 100% { top: calc(100% - 28px); height: 20px; opacity: 0; } }
.stg .mv[data-mv="chord"] .n { margin-left: -46px; } .stg .mv[data-mv="chord"] .n2 { margin-left: 6px; --c: var(--l3-rgb); }
.stg .mv[data-mv="slice"] .n { left: 8px; right: 8px; width: auto; margin-left: 0; height: 12px; background: var(--lanes-line); }
.stg .mv[data-mv="slice"] .n::after { left: 20%; right: 20%; top: 4px; height: 3px; }
.stg .mv[data-mv="flick"] .n::before { content: ''; position: absolute; left: 50%; top: -14px; width: 12px; height: 12px; margin-left: -6px; border-top: 3px solid #fff; border-right: 3px solid #fff; transform: rotate(-45deg); filter: drop-shadow(0 0 4px rgba(255,255,255,.8)); }
.stg .guide-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 16px; }
.stg .gauges { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.stg .gauges ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.stg .gauges li { display: flex; flex-direction: column; align-items: center; gap: 4px; font-stretch: 75%; font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.stg .gauges li svg.i { width: 34px; height: 34px; }
.stg .g-easy { color: var(--easy-ink); } .stg .g-normal { color: var(--normal-ink); } .stg .g-hard { color: var(--hard-ink); } .stg .g-expert { color: var(--expert-ink); }
.stg .helps { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.stg .helps ul { display: flex; flex-direction: column; gap: 12px; }
.stg .helps li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 13.5px; color: var(--dim); line-height: 1.45; }
.stg .helps li svg.i { width: 20px; height: 20px; color: var(--mint); margin-top: 1px; }
.stg .helps li b { display: block; color: var(--white); font-size: 14.5px; }
.stg .glinks { display: flex; flex-direction: column; gap: 6px; }
.stg .glinks a { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 14px; border-radius: 14px; text-decoration: none; font-weight: 700; font-size: 14.5px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)), rgba(16,12,26,.7); box-shadow: inset 0 -2px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.12); }
.stg .glinks a svg.i { color: var(--mint); }
.stg .glinks a:hover { background: linear-gradient(180deg, rgba(112,245,203,.12), rgba(112,245,203,.03)), rgba(16,12,26,.8); }
@media (min-width: 720px) { .stg .moves { grid-template-columns: repeat(5, minmax(0, 1fr)); } .stg .guide-row.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .stg .guide-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; } .stg .guide-row.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } }

/* ---------------------------------------------------------------- +1: ONE MORE SONG, and the Results */
.stg .finale { position: relative; overflow: hidden; margin-top: clamp(80px, 12vw, 160px); padding-block: clamp(70px, 10vw, 130px); text-align: center; scroll-margin-top: 12px; }
.stg .finale::before { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 100%, rgba(255,59,95,.2), rgba(255,59,95,0) 70%); pointer-events: none; }
.stg .enc-lights { position: absolute; inset: 0; pointer-events: none; }
.stg .enc-lights .beam { position: absolute; bottom: -4%; width: 16%; max-width: 160px; height: 120%; transform-origin: 50% 100%; mix-blend-mode: screen; border-radius: 50% 50% 0 0; filter: blur(10px); opacity: .32; }
.stg .enc-lights .beam:nth-child(1) { left: 10%; background: linear-gradient(0deg, rgba(var(--l0-rgb),.7), rgba(var(--l0-rgb),0) 85%); transform: rotate(-20deg); }
.stg .enc-lights .beam:nth-child(2) { left: 32%; background: linear-gradient(0deg, rgba(var(--l1-rgb),.7), rgba(var(--l1-rgb),0) 85%); transform: rotate(-7deg); }
.stg .enc-lights .beam:nth-child(3) { right: 32%; background: linear-gradient(0deg, rgba(var(--l2-rgb),.7), rgba(var(--l2-rgb),0) 85%); transform: rotate(7deg); }
.stg .enc-lights .beam:nth-child(4) { right: 10%; background: linear-gradient(0deg, rgba(var(--l3-rgb),.7), rgba(var(--l3-rgb),0) 85%); transform: rotate(20deg); }
.stg .finale.play .enc-lights .beam { animation: encBeam 1.6s var(--ease-enter) both; }
.stg .finale.play .enc-lights .beam:nth-child(2) { animation-delay: .08s; } .stg .finale.play .enc-lights .beam:nth-child(3) { animation-delay: .16s; } .stg .finale.play .enc-lights .beam:nth-child(4) { animation-delay: .24s; }
@keyframes encBeam { from { opacity: 0; transform: rotate(0deg) scaleY(.6); } }
.stg .enc-in { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.stg .enc-h { font-family: var(--f-disp); font-weight: 400; text-transform: uppercase; line-height: .92; font-size: clamp(56px, 12vw, 150px); letter-spacing: .01em; filter: drop-shadow(0 4px 0 rgba(0,0,0,.45)); text-wrap: balance; }
.stg .finale .lede { margin-inline: auto; }
.stg .stores.big { margin-top: 8px; scroll-margin-top: 24px; width: min(100%, 600px); }
.stg .stores.big .store { justify-content: center; }
.stg .again { margin-top: 6px; }
/* the Results card: the visitor's own set, only after they played (home.js) */
.stg .results { width: min(100%, 460px); padding: 18px 18px 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; border-color: rgba(112,245,203,.4); }
.stg .results[hidden] { display: none; }
.stg .results.in { animation: resIn .5s var(--ease-pop) both; }
@keyframes resIn { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
.stg .res-n { font-family: var(--f-disp); font-weight: 400; font-size: 30px; line-height: 1; letter-spacing: .02em; text-transform: uppercase; }
.stg .res-j { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.stg .rj { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 10px; border-radius: 10px; background: rgba(7,7,10,.7); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.stg .rj b { font-family: var(--f-hud); font-style: italic; font-weight: 900; font-size: 20px; line-height: 1; font-variant-numeric: tabular-nums; }
.stg .rj span { font-family: var(--f-hud); font-style: italic; font-weight: 900; font-size: 13px; letter-spacing: .04em; }
.stg .rj.perfect span { color: #EAFFF8; text-shadow: 0 0 10px rgba(112,245,203,.9); } .stg .rj.good span { color: #BFF0FF; text-shadow: 0 0 10px rgba(127,220,255,.8); }
.stg .rj.ok span { color: rgba(255,247,236,.82); } .stg .rj.miss span { color: #FF8AA0; text-shadow: 0 0 10px rgba(255,92,122,.75); }
.stg .res-m { font-size: 14px; color: var(--dim); }
.stg .res-t { font-size: 13px; color: var(--dim2); max-width: 36ch; }

/* ---------------------------------------------------------------- the phone's Get bar (only once a store is live) and the toast */
.stg .dock { position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px;
  padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: #07070A; border-top: 1px solid rgba(255,255,255,.08); transform: translateY(110%); transition: transform .32s var(--ease-enter); }
.stg .dock::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 20px; background: linear-gradient(180deg, rgba(7,7,10,0), #07070A); pointer-events: none; }
.stg .dock.show { transform: none; }
.stg .dock-t { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.stg .dock-t b { font-family: var(--f-disp); font-weight: 400; font-size: 18px; letter-spacing: .04em; text-transform: uppercase; line-height: 1.1; }
.stg .dock-t span { font-size: 12.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 1080px) { .stg .dock { display: none; } }
.stg .toast { position: fixed; z-index: 85; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 16px); opacity: 0; pointer-events: none; max-width: calc(100vw - 32px);
  padding: 10px 14px; border-radius: 12px; background: rgba(14,20,32,.96); border: 1px solid rgba(112,245,203,.45); font-size: 13.5px; transition: opacity .2s ease-out, transform .2s ease-out; }
.stg .toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 1080px) { .stg .toast { bottom: 28px; } }

/* portraits (the stage portrait's look: a ring in the app's conic frame, a two-colour ground) */
.stg .portrait { display: inline-block; border-radius: 50%; position: relative; flex: none; }
.stg .portrait svg { display: block; width: 100%; height: 100%; border-radius: 50%; }

/* ---------------------------------------------------------------- SEVEN TRACKS ON A PHONE
   "Every week" folds into "Play together" and "Your stage" into "Leaderboards" (the shortlist's §5.5): one HTML for every
   device (seo-spec §3.8), so the fold is CSS. A folded track keeps its words and its heading, loses its number and its
   count-in, and follows the track before it closely; the others show their phone numbers (01-07). */
@media (max-width: 719px) {
  .stg .cue .no .n9 { display: none; }
  .stg .cue .no .n7 { display: inline; }
  .stg .track.fold { padding-top: 34px; }
  .stg .track.fold .cue { display: none; }
  .stg .track.fold .th { font-size: 30px; line-height: 1; }
  .stg .track.fold .th-block { gap: 8px; margin-bottom: 18px; }
}

/* ---------------------------------------------------------------- A PHONE'S SMALL TEXT
   judge 2's floor: 12 px for anything a player reads; the tier pills inside the board and the editor's toolbar, which
   are pictures (aria-hidden or role="img"), keep their drawn size */
@media (max-width: 719px) {
  .stg .tp.sm { height: 22px; font-size: 12px; padding: 0 5px; letter-spacing: .04em; }
  .stg .mon li { grid-template-columns: 74px minmax(0, 1fr); }
  .stg .stores .soon, .stg .stores .ios { font-size: 15px; letter-spacing: .03em; padding-left: 58px; padding-right: 12px; }
}
@media (max-width: 559px) {
  .stg .venues { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, 128px); height: auto; row-gap: 16px; }
  .stg .venues b { font-size: 12px; }
  .stg .venues li > i { height: calc(var(--h) * .62); }
}
@media (max-width: 379px) {
  .stg .stores .get, .stg .stores .ios { flex-basis: 100%; max-width: none; }
}
@media (max-width: 359px) {
  .stg .seats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .stg .cc-tabs .cc { padding: 0 10px; }
  .stg .stores .soon, .stg .stores .ios { font-size: 15px; padding-right: 10px; gap: 10px; }
}

/* ---------------------------------------------------------------- FORCED COLOURS (Windows High Contrast)
   box shadows and painted backgrounds go: give the plates, keys and chips real borders (plan.md §5.8) */
@media (forced-colors: active) {
  .stg .plate, .stg .b.sec, .stg .b.pri, .stg .chip, .stg .tp, .stg .stores .soon, .stg .stores p.ios, .stg .facts li, .stg .song, .stg .af-screen { border: 1px solid CanvasText; }
  .stg .th em, .stg .enc-h em, .stg .hero-h .h1b, .stg .num, .pk-home .site-head .wm, .pk-home .site-head .wm b { color: CanvasText; background: none; }
}

/* ---------------------------------------------------------------- MOTION OFF
   prefers-reduced-motion, or the layout's "Pause motion" (home.js writes <html data-motion="off">): every loop and
   entrance stands at its resting frame. animation: none (not a paused one), so nothing waits half-faded. */
:root[data-motion="off"] { scroll-behavior: auto; }
:root[data-motion="off"] .stg *, :root[data-motion="off"] .stg *::before, :root[data-motion="off"] .stg *::after { animation: none !important; transition-duration: 0s !important; transition-delay: 0s !important; }
:root[data-motion="off"] .pk-home .site-head .wm { animation: none !important; --la: 0; transition: none; }
:root[data-motion="off"] .stg .pdisc.breathe::before, :root[data-motion="off"] .stg .pdisc.breathe::after { opacity: 0; }
:root[data-motion="off"] .stg .mv-lane .n, :root[data-motion="off"] .stg .mv-lane .n2 { top: calc(100% - 28px); }
:root[data-motion="off"] .stg .mv[data-mv="hold"] .n { top: calc(100% - 28px); height: 20px; }
:root[data-motion="off"] .stg .radar .rip { opacity: 0; }
:root[data-motion="off"] .stg .quiet i:nth-child(1) { background: rgba(var(--c),.72); box-shadow: 0 0 8px rgba(var(--c),.6); }
:root[data-motion="off"] .stg .track .caps4 i { background: rgba(var(--c),.3); box-shadow: inset 0 0 0 1px rgba(var(--c),.6); }
/* without the page's script, the system setting alone */
@media (prefers-reduced-motion: reduce) {
  .stg *, .stg *::before, .stg *::after { animation: none !important; }
  .stg .mv-lane .n, .stg .mv-lane .n2 { top: calc(100% - 28px); }
  .stg .radar .rip { opacity: 0; }
  .pk-home .site-head .wm { animation: none !important; }
}