/* Ruff Diesel · the story.
   Show day: a black arena, one spotlight, his body in light. One accent, champion gold. Anton for titles, the
   scoreboard and numbers; Instrument Sans for the rest. Static film grain, volumetric light that moves only with
   the scroll.
   html.st-on   = the experience (story.js running).
   html.st-flat = ?rm=1, the flat reduced mode: the readable document (the phone stays usable).
   Without either, the page is a readable static document (no JS, or a script failed to load). */

@font-face {
  font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("media/fonts/anton-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("media/fonts/anton-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap;
  src: url("media/fonts/instrument-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap;
  src: url("media/fonts/instrument-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url("media/fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url("media/fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* the palette (names from the order form) */
  --ink-0: #070708;
  --ink-1: #0F0F11;
  --ink-2: #17171A;
  --bone: #F3EFE8;
  --muted: #8E8983;
  --line: rgba(243, 239, 232, .12);
  --gold: #E2B04A;
  --gold-hi: #F6D48A;
  --spot: 255, 244, 222;          /* the warm white of the spotlight, as rgb for rgba() */

  --display: "Anton", Impact, "Arial Narrow", sans-serif;
  --text: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --num: "Archivo", "Instrument Sans", sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-ios: cubic-bezier(.32, .72, 0, 1);
  --gut: 20px;
  --S: 100vh;
  --LH: 100vh;
  --t-xs: 12px;
  --t-s: 15px;
  --t-m: 17px;
  color-scheme: dark;
}
@supports (height: 100svh) { :root { --S: 100svh; --LH: 100lvh; } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink-0); color: var(--bone); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; }
body {
  margin: 0; background: var(--ink-0); color: var(--bone);
  font: 400 var(--t-s)/1.45 var(--text);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
p, h1, h2, h3, ol, ul, li, figure, blockquote { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img, video, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
b { font-weight: inherit; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.probe { position: fixed; top: 0; left: 0; width: 0; visibility: hidden; pointer-events: none; }
#vh-s { height: 100vh; height: 100svh; }
#vh-l { height: 100vh; height: 100lvh; }
.skip {
  position: fixed; left: 12px; top: 12px; z-index: 1000; padding: 10px 14px; border-radius: 12px;
  background: var(--gold); color: var(--ink-0); font-weight: 700; text-decoration: none; transform: translateY(-160%);
}
.skip:focus-visible { transform: none; }
.skip--try { border: 0; font: 700 15px/1.2 var(--text); cursor: pointer; }
.skip--try[hidden] { display: none; }
.sr-story { display: none; }
html.st-on .sr-story { display: block; }
#end { height: 1px; }

/* ---------------------------------------------------------------------------------------------- film grain (static) */
.grain {
  position: fixed; inset: 0; z-index: 800; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n' x='0' y='0'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='13' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 .96  0 0 0 0 .9  0 0 0 -2.4 1.4'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}

/* ---------------------------------------------------------------------------------------------- shared type */
.disp { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .005em; }
.k { font: 600 11.5px/1.2 var(--text); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }

/* ============================================================================================== experience */
html.js:not(.st-on):not(.st-fail):not(.st-flat) #story,
html.js:not(.st-on):not(.st-fail):not(.st-flat) #dock { visibility: hidden; }

html.st-boot *, html.st-boot *::before, html.st-boot *::after { transition: none !important; }
html.st-on #run { position: relative; height: calc(var(--runL, 2200vh) + var(--LH)); }
html.st-on #end { position: absolute; left: 0; bottom: 0; width: 1px; }
html.st-on #stage {
  position: -webkit-sticky; position: sticky; top: 0;
  height: 100vh; height: var(--LH);
  overflow: hidden; overflow: clip;
  background: var(--ink-0);
}
html.st-on .sc { position: absolute; left: 0; top: 0; width: 100%; height: var(--LH); visibility: hidden; pointer-events: none; overflow: hidden; }
html.st-on .feed { display: none; }

/* ---------------------------------------------------------------------------------------------- the light bar (wipes) */
.lb { display: none; }
html.st-on .lb {
  display: block; position: absolute; left: 0; top: 0; width: 100%; height: 0; z-index: 70; pointer-events: none;
  visibility: hidden; will-change: transform, opacity;
}
.lb__core {
  position: absolute; left: -2%; width: 104%; top: -1.5px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, rgba(var(--spot), 0) 0, rgba(var(--spot), .85) 18%, #FFFDF6 50%, rgba(var(--spot), .85) 82%, rgba(var(--spot), 0) 100%);
  box-shadow: 0 0 10px 1px rgba(246, 212, 138, .75), 0 0 34px 4px rgba(226, 176, 74, .35);
}
.lb__glow {
  position: absolute; left: -10%; width: 120%; top: -70px; height: 140px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(var(--spot), .34) 0, rgba(246, 212, 138, .12) 40%, rgba(226, 176, 74, 0) 72%);
}
/* the light spills onto the stage it reveals (above the bar going down, below it going up) */
.lb__spill {
  position: absolute; left: 0; width: 100%; height: calc(var(--S) * .42); bottom: 0;
  background: linear-gradient(0deg, rgba(var(--spot), .16) 0, rgba(var(--spot), .05) 40%, rgba(var(--spot), 0) 100%);
}
/* going up, the stage being revealed is below the bar: the spill hangs under it, brightest at the bar */
.lb.up .lb__spill {
  bottom: auto; top: 0; transform: none;
  background: linear-gradient(180deg, rgba(var(--spot), .16) 0, rgba(var(--spot), .05) 40%, rgba(var(--spot), 0) 100%);
}

/* ---------------------------------------------------------------------------------------------- 1 · lights up */
html.st-on .sc-1 { z-index: 1; background: var(--ink-0); }
.spot { position: relative; }
html.st-on .spot { position: absolute; inset: 0; }
.spot__media { position: relative; overflow: hidden; background: var(--ink-0); }
html.st-on .spot__media {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  will-change: transform;
}
/* the lens: a fixed soft-edged mask on a box the size of the media, moved and scaled onto the pool of light by
   transform only; .spot__in undoes that transform, so his loop never moves with it */
html.st-on .spot__lens, html.st-on .spot__in { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; will-change: transform; }
html.st-on .spot__lens {
  -webkit-mask-image: radial-gradient(closest-side, #000 0, #000 34%, rgba(0, 0, 0, .74) 54%, rgba(0, 0, 0, .3) 74%, rgba(0, 0, 0, .08) 90%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 0, #000 34%, rgba(0, 0, 0, .74) 54%, rgba(0, 0, 0, .3) 74%, rgba(0, 0, 0, .08) 90%, transparent 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  transform: scale(0);
}
.spot__img, .spot__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.spot__img { color: transparent; font-size: 0; }
/* show-day grade: the neon gym falls back, the warm light stays on him */
.spot__img, .spot__v { filter: saturate(.4) contrast(1.18) brightness(.84) sepia(.16); }
.spot__v { z-index: 1; opacity: 0; transition: opacity .5s linear; }
.spot__v.on { opacity: 1; }
.spot__fade { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7, 7, 8, .55) 0, rgba(7, 7, 8, 0) 22%, rgba(7, 7, 8, 0) 58%, rgba(7, 7, 8, .82) 86%, var(--ink-0) 100%),
    radial-gradient(120% 70% at 50% 34%, rgba(255, 214, 150, .10) 0, rgba(255, 214, 150, 0) 60%);
}
.beam { display: none; }
html.st-on .beam {
  display: block; position: absolute; left: 0; top: -5px; width: 10px; height: 10px; z-index: 3; pointer-events: none;
  opacity: 0; will-change: transform, opacity; mix-blend-mode: screen; transform-origin: 0 50%;
}
/* the cone of light: from its source (the left end) to the pool on him (the right end) */
/* The box is tiny and scaled up by its parent, so a blur filter here would grow with that scale. The cone's edges are
   instead an angular fall-off: a conic mask from the source, so the edge softens in proportion to the distance from
   the lamp (crisp only where the light is born), as volumetric light does. Local box 10 × 30 px (apex at its left
   middle): the light is full within 24° of the axis and gone by 47°, inside the box (56°), so no box edge shows. */
.beam__in {
  position: absolute; left: 0; top: -100%; width: 100%; height: 300%;
  background: linear-gradient(90deg, rgba(var(--spot), .42) 0, rgba(var(--spot), .16) 40%, rgba(var(--spot), .07) 78%, rgba(var(--spot), 0) 100%);
  -webkit-mask-image: conic-gradient(from 0deg at 0 50%, transparent 0deg, transparent 43deg, rgba(0, 0, 0, .45) 56deg, #000 66deg, #000 114deg, rgba(0, 0, 0, .45) 124deg, transparent 137deg, transparent 360deg);
  mask-image: conic-gradient(from 0deg at 0 50%, transparent 0deg, transparent 43deg, rgba(0, 0, 0, .45) 56deg, #000 66deg, #000 114deg, rgba(0, 0, 0, .45) 124deg, transparent 137deg, transparent 360deg);
}
.dust { display: none; }
html.st-on .dust { display: block; position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; }

.c1__mc { font: 600 var(--mcF, 11.5px)/1.3 var(--text); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.c1__h { margin-top: 10px; font-family: var(--display); font-weight: 400; text-transform: uppercase; }
.c1__pro { display: block; font-size: var(--proF, 16px); line-height: 1; letter-spacing: .32em; color: var(--gold); }
.c1__name { display: block; margin-top: .14em; font-size: var(--nameF, 60px); line-height: .9; letter-spacing: .004em; color: var(--bone); }
.c1__l { display: block; white-space: nowrap; }
.board { margin-top: 18px; display: grid; gap: var(--fcg, 5px); }
.board__r { font: 400 var(--fcF, 16px)/1 var(--display); color: var(--gold); letter-spacing: .06em; text-transform: uppercase; }
html.st-on .board__r { display: flex; gap: var(--fcgap, 1.5px); height: var(--fch, 22px); letter-spacing: 0; }
/* one split-flap cell */
.fc {
  position: relative; flex: none; width: var(--fcw, 13px); height: var(--fch, 22px); border-radius: 2.5px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #26262B 0, #1A1A1E 48%, #040405 48%, #040405 53%, #17171B 53%, #111114 100%);
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .06), 0 1px 1px rgba(0, 0, 0, .8);
  color: transparent; font: 400 var(--fcF, 16px)/1 var(--display);
  transform-origin: 50% 50%;
}
.fc.on { color: var(--gold); text-shadow: 0 0 10px rgba(226, 176, 74, .35); }
.fc.sp { background: linear-gradient(180deg, #161619 0, #111113 48%, #040405 48%, #040405 53%, #0E0E10 53%, #0B0B0D 100%); }
.fc.fx { font-family: var(--text); font-weight: 700; font-size: calc(var(--fcF, 16px) * .86); }
/* the scoreboard's housing */
html.st-on .board::before {
  content: ""; position: absolute; z-index: -1; inset: calc(var(--fcg, 5px) * -1.6) calc(var(--fcg, 5px) * -1.6);
  border-radius: 8px; background: rgba(6, 6, 7, .8);
  box-shadow: inset 0 0 0 1px rgba(243, 239, 232, .07), 0 18px 40px -18px #000;
}
html.st-on .board { z-index: 0; }
.board__r.lit .fc.on { color: var(--gold-hi); text-shadow: 0 0 14px rgba(246, 212, 138, .7); }
.key { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: var(--keyF, 44px); line-height: .96; letter-spacing: .004em; }
.key__1, .key__2 { display: block; }
.key__2 { color: var(--gold); }
html.st-on .c1 { position: absolute; left: var(--c1L, var(--gut)); top: var(--c1T, 22px); width: var(--c1W, calc(100% - 2 * var(--gut))); z-index: 6; will-change: transform, opacity; }
html.st-on .c1__h, html.st-on .c1__mc { text-shadow: 0 2px 18px rgba(0, 0, 0, .55); }
html.st-on .c1__mc .ch { visibility: hidden; }
html.st-on .c1__mc .ch.on { visibility: inherit; }
.c1__mc .ch.br { display: block; height: 0; overflow: hidden; }
.spot__shade { display: none; }
html.st-on .spot__shade {
  display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 64%; z-index: 5; pointer-events: none; opacity: 0;
  background: linear-gradient(0deg, rgba(7, 7, 8, .94) 0, rgba(7, 7, 8, .8) 34%, rgba(7, 7, 8, .38) 66%, rgba(7, 7, 8, 0) 100%);
  will-change: opacity;
}
html.st-on .c1__pro, html.st-on .c1__l { opacity: 0; }
html.st-on .key { position: absolute; left: var(--keyL, var(--gut)); top: var(--keyT, 60%); width: var(--keyW, calc(100% - 2 * var(--gut))); z-index: 7; text-shadow: 0 4px 30px rgba(0, 0, 0, .7); }
html.st-on .key .w > span { transform: translate3d(0, 112%, 0); }
.cue { display: none; }
html.st-on .cue {
  position: absolute; left: var(--gut); top: var(--cueTop, calc(var(--S) - 100px)); z-index: 8;
  display: flex; align-items: center; gap: 12px;
  color: var(--muted); font: 600 var(--t-xs)/1 var(--text); letter-spacing: .2em; text-transform: uppercase;
  opacity: 0; transition: opacity .6s linear;
}
html.st-on .cue.on { opacity: 1; }
html.st-on .cue.gone { opacity: 0; transition-duration: .25s; }
.cue__track { position: relative; width: 1.5px; height: 40px; border-radius: 1px; background: rgba(226, 176, 74, .22); overflow: hidden; }
.cue__track i { position: absolute; left: 0; right: 0; bottom: 0; height: 15px; border-radius: 1px; background: var(--gold); transform: translateY(-12px); }
html.st-on:not(.rmos) .cue.on:not(.gone) .cue__track i { animation: st-cue 1.8s cubic-bezier(.45, 0, .2, 1) infinite; }
@keyframes st-cue {
  0% { transform: translateY(-40px); opacity: 0; }
  25% { opacity: 1; }
  80% { transform: translateY(16px); opacity: 1; }
  100% { transform: translateY(16px); opacity: 0; }
}

/* words that rise out of a mask (key line, captions) */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: .1em 0 .06em; margin: -.1em 0 -.06em; }
.w > span { display: inline-block; will-change: transform; }

/* ---------------------------------------------------------------------------------------------- 2 · your crowd */
html.st-on .sc-2 { z-index: 2; background: var(--ink-0); }
html.st-on .wall { position: absolute; inset: 0; z-index: 1; }
.wc { position: absolute; left: 0; top: 0; will-change: transform; }
.tile {
  position: absolute; left: 0; width: var(--tw, 180px); border-radius: var(--tr, 10px); overflow: hidden; background: var(--ink-2);
}
.tile img, .tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile img { filter: saturate(.55) brightness(.8) contrast(1.05); }
.tile video { z-index: 1; opacity: 0; transition: opacity .4s linear; filter: saturate(.6) brightness(.85); }
.tile video.on { opacity: 1; }
.tile--v { box-shadow: inset 0 0 0 1px rgba(226, 176, 74, .18); }
.wall__dim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(90% 60% at 50% 46%, rgba(7, 7, 8, .55) 0, rgba(7, 7, 8, .72) 60%, rgba(7, 7, 8, .9) 100%),
    linear-gradient(180deg, rgba(7, 7, 8, .7) 0, rgba(7, 7, 8, 0) 18%, rgba(7, 7, 8, 0) 82%, rgba(7, 7, 8, .8) 100%);
}
.wall__light {
  position: absolute; left: -20%; top: -30%; width: 140%; height: 90%; z-index: 3; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(40% 50% at 30% 40%, rgba(var(--spot), .10) 0, rgba(var(--spot), 0) 70%), radial-gradient(35% 45% at 74% 52%, rgba(246, 212, 138, .07) 0, rgba(246, 212, 138, 0) 70%);
  will-change: transform;
}
.crowd__card {
  position: relative; padding: 18px 18px 20px; border-radius: 24px;
  background: linear-gradient(180deg, rgba(30, 30, 34, .93) 0, rgba(17, 17, 20, .95) 46%, rgba(12, 12, 14, .96) 100%);
  box-shadow: inset 0 0 0 1px rgba(243, 239, 232, .09), inset 0 1px 0 rgba(255, 255, 255, .08), 0 40px 90px -30px #000, 0 0 0 1px rgba(0, 0, 0, .5);
}
.crowd__k { font: 600 11.5px/1.2 var(--text); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: 10px; }
.crowd__k::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.bb { position: relative; margin: 6px -18px 0; }
.bb__svg { width: 100%; height: auto; overflow: visible; }
.bb__leg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
.leg { padding-top: 9px; border-top: 2px solid rgba(243, 239, 232, .1); transition: border-color .3s linear; }
.leg__k { display: block; font: 600 10.5px/1.2 var(--text); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.leg__n { display: block; margin-top: 4px; font: 400 var(--legF, 26px)/1 var(--display); color: var(--bone); letter-spacing: .01em; transition: color .3s linear; }
.leg.on { border-top-color: var(--gold); }
.leg.on .leg__n { color: var(--gold-hi); }
.tot { margin-top: 16px; font: 400 var(--totF, 82px)/1 var(--display); color: var(--gold); letter-spacing: .01em; }
.tot__n { display: inline-block; }
html.st-on .tot { height: 1.1em; }
.crowd__line { margin-top: 10px; font: 600 var(--clF, 19px)/1.25 var(--text); color: var(--bone); letter-spacing: -.005em; text-wrap: balance; }
.chip {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; padding: 6px 16px 6px 6px; border-radius: 999px;
  background: rgba(23, 23, 26, .94); box-shadow: inset 0 0 0 1px rgba(226, 176, 74, .35), 0 20px 40px -18px #000;
  font: 500 14px/1.25 var(--text); color: var(--bone);
}
.chip img { width: 54px; height: 30px; border-radius: 999px; object-fit: cover; flex: none; }
.chip b { font-weight: 700; color: var(--gold-hi); }
html.st-on .crowd { position: absolute; left: var(--crL, var(--gut)); top: var(--crT, 120px); width: var(--crW, calc(100% - 2 * var(--gut))); z-index: 5; }
html.st-on .crowd__card { opacity: 0; will-change: transform, opacity; }
html.st-on .crowd__line, html.st-on .chip { opacity: 0; will-change: transform, opacity; }
/* odometer */
.od { display: inline-flex; align-items: flex-start; }
.od-d { display: inline-block; height: 1.1em; overflow: hidden; text-align: center; }
.od-s { display: block; will-change: transform; }
.od-s > span { display: block; height: 1.5em; line-height: 1.1em; }
.od-c { display: inline-block; height: 1.1em; line-height: 1.1em; }
/* the barbell (drawn by story.js) */
.bb__svg .bar-shaft { fill: url(#bbSteel); }
.bb__svg .plate-lab { font: 400 11px var(--display); letter-spacing: .14em; fill: rgba(243, 239, 232, .82); }
.bb__svg .plate-lab--ig { fill: #1A1408; }

/* ---------------------------------------------------------------------------------------------- 3 · you show up */
html.st-on .sc-3 { z-index: 3; background: var(--ink-0); }
.lights3 { display: none; }
html.st-on .lights3 { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
html.st-on .lights3 i {
  position: absolute; top: 0; width: var(--l3W, 160px); height: var(--l3H, 70%); margin-left: calc(var(--l3W, 160px) / -2);
  background: linear-gradient(180deg, rgba(var(--spot), .2) 0, rgba(var(--spot), .07) 55%, rgba(var(--spot), 0) 100%);
  clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
  opacity: 0; transform-origin: 50% 0; will-change: opacity, transform; mix-blend-mode: screen;
}
.c3__t { font: 400 var(--c3F, 48px)/.95 var(--display); text-transform: uppercase; color: var(--bone); letter-spacing: .004em; }
.c3__t .snt { display: block; }
.reps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: var(--c3g1, 34px); }
/* phones: the three counters sit on the margins with equal gaps between the numbers themselves (not equal columns):
   each column is as wide as its number, the label does not size it (inline-size containment) and spills 14px each
   side so it wraps on two lines at most */
html.st-on:not(.st-desk) .reps { grid-template-columns: repeat(3, auto); justify-content: space-between; column-gap: 16px; }
html.st-on:not(.st-desk) .rep__t { contain: inline-size; margin-left: -14px; margin-right: -14px; }
.rep { text-align: center; }
.rep__n { font: 400 var(--repF, 72px)/1 var(--display); color: var(--gold); letter-spacing: .01em; display: flex; justify-content: center; }
html.st-on .rep__n { height: 1.1em; }
.rep__t { margin-top: 8px; font: 600 12.5px/1.25 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.c3__s { margin-top: 22px; text-align: center; font: 500 15px/1.4 var(--text); color: var(--bone); }
.c3__c { margin-top: var(--c3g2, 40px); font: 400 var(--c3cF, 36px)/1 var(--display); text-transform: uppercase; letter-spacing: .006em; }
.c3__c1, .c3__c2 { display: block; }
.c3__c2 { color: var(--gold); margin-top: .1em; }
html.st-on .c3 { position: absolute; left: var(--c3L, var(--gut)); top: var(--c3T, 40px); width: var(--c3W, calc(100% - 2 * var(--gut))); z-index: 2; }
html.st-on .c3__t .w > span, html.st-on .c3__c .w > span { transform: translate3d(0, 112%, 0); }
html.st-on .rep { will-change: transform; transform-origin: 50% 100%; }
html.st-on .rep__t, html.st-on .c3__s { opacity: 0; }
html.st-on .rep__n { opacity: .16; }

/* ---------------------------------------------------------------------------------------------- 4 · 5 · 6 · the phone stage */
html.st-on .sc-4 { z-index: 4; background: var(--ink-0); }
.lights4 { display: none; }
html.st-on .lights4 {
  display: block; position: absolute; left: 50%; top: -10%; width: 170%; height: 120%; margin-left: -85%; pointer-events: none;
  background:
    radial-gradient(28% 46% at 50% 46%, rgba(var(--spot), .11) 0, rgba(var(--spot), .04) 50%, rgba(var(--spot), 0) 100%),
    linear-gradient(180deg, rgba(var(--spot), .05) 0, rgba(var(--spot), 0) 40%);
  opacity: 0; will-change: transform, opacity;
}
html.st-on .phone {
  position: absolute; left: 0; top: 0; z-index: 15;
  width: var(--cw, 393px); height: var(--ch, 852px);
  transform-origin: 0 0; visibility: hidden; pointer-events: none;
}
/* the glass always takes the pointer; in story mode the app's own shield sits over it (a pointer-events switch on the
   phone, an inherited property, would restyle the whole app at the hand-off) */
html.st-on .phone__screen { pointer-events: auto; }
html.st-on .phone.is-anim { will-change: transform; }
/* the device, in canvas px (scaled as a whole): a 6px black titanium band, an 11px black bezel ring, the glass */
.phone { --R: 55px; --bz: 11px; --band: 6px; }
.phone__frame {
  position: absolute; inset: calc((var(--bz) + var(--band)) * -1);
  border-radius: calc(var(--R) + var(--bz) + var(--band));
  border: var(--band) solid transparent;
  background:
    linear-gradient(#000, #000) padding-box,
    linear-gradient(138deg, #6A6A70 0%, #2C2C30 8%, #18181B 20%, #3A3A3F 34%, #5E5E64 43%, #222225 56%, #141416 74%, #3B3B40 88%, #77777D 100%) border-box;
  box-shadow:
    0 0 0 .75px rgba(255, 255, 255, .08),
    inset 0 0 0 .75px rgba(255, 255, 255, .16),
    0 40px 80px -30px rgba(0, 0, 0, .9),
    0 0 120px -20px rgba(226, 176, 74, .12);
  isolation: isolate; pointer-events: none;
}
.phone__frame::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  border-radius: calc(var(--R) + var(--bz));
  border: var(--bz) solid #020203;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .9), inset 0 0 0 .75px rgba(255, 255, 255, .07);
}
.pa { position: absolute; z-index: 0; width: var(--band); height: 2.5px; background: rgba(120, 120, 128, .45); }
.pa--1 { left: calc(var(--band) * -1); top: 92px; }
.pa--2 { left: calc(var(--band) * -1); bottom: 92px; }
.pa--3 { right: calc(var(--band) * -1); top: 92px; }
.pa--4 { right: calc(var(--band) * -1); bottom: 92px; }
.phone__shine { position: absolute; inset: 0; z-index: 2; border-radius: calc(var(--R) + var(--bz)); overflow: hidden; pointer-events: none; }
.phone__shine i {
  position: absolute; top: -10%; bottom: -10%; left: 0; width: 46%; opacity: 0;
  background: linear-gradient(100deg, rgba(255, 244, 222, 0) 0, rgba(255, 244, 222, .22) 48%, rgba(255, 244, 222, .36) 52%, rgba(255, 244, 222, 0) 100%);
  transform: translate3d(-120%, 0, 0) skewX(-14deg);
}
.pb {
  position: absolute; width: 5px; border-radius: 2px;
  background: linear-gradient(90deg, #1A1A1C 0%, #4A4A50 40%, #6B6B72 55%, #222225 100%);
  box-shadow: 0 0 0 .6px rgba(0, 0, 0, .7);
}
.pb--act { left: calc(0px - var(--bz) - var(--band) - 3.5px); top: 122px; height: 32px; }
.pb--vu { left: calc(0px - var(--bz) - var(--band) - 3.5px); top: 182px; height: 60px; }
.pb--vd { left: calc(0px - var(--bz) - var(--band) - 3.5px); top: 254px; height: 60px; }
.pb--pw { right: calc(0px - var(--bz) - var(--band) - 3.5px); top: 214px; height: 94px; background: linear-gradient(270deg, #1A1A1C 0%, #4A4A50 40%, #6B6B72 55%, #222225 100%); }
/* overflow: clip (hidden as the fallback): the glass can never be scrolled sideways by a focus or scrollIntoView */
.phone__screen {
  position: absolute; inset: 0; border-radius: var(--R); overflow: hidden; overflow: clip; background: #0B0B0D;
  transform: translateZ(0);
}
#ruff-app { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.phone__glare {
  position: absolute; inset: 0; z-index: 40; pointer-events: none; border-radius: var(--R);
  background: linear-gradient(115deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .02) 22%, rgba(255, 255, 255, 0) 40%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}
.phone__island {
  position: absolute; top: 11px; left: 50%; z-index: 41; width: 124px; height: 36px; margin-left: -62px;
  border-radius: 18px; background: #000; pointer-events: none;
  box-shadow: inset 0 0 0 .75px rgba(255, 255, 255, .05);
}
.phone__island::after {
  content: ""; position: absolute; right: 13px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #3A4656 0, #121821 38%, #05070A 62%, #000 72%);
}
.phone__glow {
  position: absolute; inset: -150px -170px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(226, 176, 74, .2), rgba(226, 176, 74, .07) 55%, rgba(226, 176, 74, 0));
  opacity: 0;
}
/* the outline of the device, traced by light as it materializes */
.phone__trace { display: none; }
html.st-on .phone__trace {
  display: block; position: absolute; z-index: 42; max-width: none; pointer-events: none; overflow: visible; visibility: hidden;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}
html.st-on .phone__trace path { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
html.st-on .phone__trace .tr-glow { stroke: rgba(246, 212, 138, .28); }
html.st-on .phone__trace .tr-core { stroke: #FFF6E2; }
html.st-on .phone.is-anim .phone__frame, html.st-on .phone.is-anim .phone__screen,
html.st-on .phone.is-anim .phone__island, html.st-on .phone.is-anim .phone__glow { will-change: transform, opacity; }

/* the static workout screen: only when the app is missing (html.st-noapp) or without the experience */
.phone__fb { display: none; position: absolute; inset: 0; background: #0B0B0D; color: #F5F2EC; font-family: var(--text); }
html.st-noapp .phone__fb, html[data-noapp] .phone__fb, html:not(.st-on):not(.st-flat) .phone__fb { display: block; }
html.st-noapp #ruff-app, html[data-noapp] #ruff-app, html:not(.st-on):not(.st-flat) #ruff-app { display: none; }
html.st-noapp .cap--live, html[data-noapp] .cap--live, html:not(.st-on):not(.st-flat) .cap--live { display: none !important; }
.fb__status { position: absolute; left: 0; right: 0; top: 0; height: 54px; }
.fb__time { position: absolute; left: 36px; top: 18px; font: 600 16px/20px var(--text); }
.fb__icons { position: absolute; right: 30px; top: 21px; display: flex; gap: 6px; align-items: center; }
.fb__k { position: absolute; left: 20px; top: 66px; font: 600 11.5px/1 var(--text); letter-spacing: .14em; text-transform: uppercase; color: #8C8780; }
.fb__h { position: absolute; left: 20px; top: 84px; font: 400 34px/1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.fb__m { position: absolute; left: 20px; top: 124px; font: 500 13.5px/1 var(--text); color: #8C8780; }
.fb__rows { position: absolute; left: 0; right: 0; top: 152px; }
.fb__rows li { position: relative; display: flex; align-items: center; gap: 14px; height: 86px; padding: 0 20px; }
.fb__rows li + li::before { content: ""; position: absolute; left: 86px; right: 20px; top: 0; height: 1px; background: rgba(255, 255, 255, .08); }
.fb__rows img { width: 52px; height: 65px; border-radius: 10px; object-fit: cover; flex: none; }
.fb__rows span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fb__rows b { font: 600 16px/1.2 var(--text); }
.fb__rows em { font: 500 13px/1.2 var(--text); font-style: normal; color: #8C8780; font-variant-numeric: tabular-nums; }
.fb__tabs { position: absolute; left: 0; right: 0; bottom: 0; height: 84px; padding-bottom: 26px; display: flex; justify-content: space-around; align-items: center; border-top: 1px solid rgba(255, 255, 255, .08); background: rgba(16, 16, 19, .96); font: 600 10.5px/1 var(--text); color: #8C8780; }
.fb__tabs span { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.fb__tabs svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fb__tabs .on { color: var(--gold); }

/* the pillar title card, over the glass (canvas px: the phone is scaled as a whole) */
.pc { display: none; }
html.st-on .pc {
  display: block; position: absolute; inset: 0; z-index: 30; pointer-events: none; visibility: hidden; opacity: 0; overflow: hidden;
  background:
    radial-gradient(70% 42% at 50% 0, rgba(var(--spot), .16) 0, rgba(var(--spot), .05) 50%, rgba(var(--spot), 0) 100%),
    radial-gradient(90% 50% at 50% 100%, rgba(226, 176, 74, .10) 0, rgba(226, 176, 74, 0) 70%),
    #0A0A0C;
  transform-origin: 50% 46%;
  font-family: var(--text); color: var(--bone);
}
.pc__beam {
  position: absolute; left: 50%; top: -6%; width: 120%; height: 70%; margin-left: -60%;
  background: linear-gradient(180deg, rgba(var(--spot), .13) 0, rgba(var(--spot), .03) 70%, rgba(var(--spot), 0) 100%);
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%); opacity: .7;
}
.pc__brand {
  position: absolute; left: 0; right: 0; top: 92px; text-align: center;
  font: 400 17px/1 var(--display); letter-spacing: .34em; text-transform: uppercase; color: var(--gold); padding-left: .34em;
}
.pc__list { position: absolute; left: 30px; right: 30px; top: 50%; transform: translateY(-50%); display: grid; gap: 34px; }
.pc__r { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: end; row-gap: 6px; padding-bottom: 14px; will-change: transform; }
.pc__no { grid-column: 1 / -1; font: 700 13px/1 var(--text); letter-spacing: .24em; color: var(--gold); opacity: 0; transition: opacity .2s linear; }
.pc__w { grid-column: 1 / -1; display: block; overflow: hidden; padding: 6px 0 2px; margin: -6px 0 -2px; }
.pc__w > span {
  display: block; font: 400 78px/.92 var(--display); text-transform: uppercase; letter-spacing: .004em; color: var(--bone);
  transform: translate3d(0, 108%, 0) scale(1.06); transform-origin: 0 100%;
  transition: transform .5s cubic-bezier(.2, 1.36, .4, 1), color .5s linear, text-shadow .7s linear;
}
.pc__s { grid-column: 1 / -1; display: flex; align-items: center; gap: 9px; font: 600 15px/1 var(--text); letter-spacing: .02em; color: var(--muted); opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity .35s linear, transform .45s var(--ease); }
.pc__ic { width: 24px; height: 24px; flex: none; fill: none; color: var(--gold); stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pc__rule { position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: linear-gradient(90deg, var(--gold), rgba(226, 176, 74, .25) 70%, rgba(226, 176, 74, 0)); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s cubic-bezier(.3, .8, .2, 1); }
html.st-on .pc.go .pc__no { opacity: 1; }
html.st-on .pc.go .pc__w > span { transform: none; color: var(--gold-hi); text-shadow: 0 0 34px rgba(246, 212, 138, .55); }
html.st-on .pc.go .pc__s { opacity: 1; transform: none; }
html.st-on .pc.go .pc__rule { transform: none; }
/* 300 ms per word; the word lands hot (gold), then cools to bone */
html.st-on .pc.go .pc__r .pc__w > span { animation: st-pc-cool .9s linear forwards; }
html.st-on .pc.go .pc__r:nth-child(2) .pc__no, html.st-on .pc.go .pc__r:nth-child(2) .pc__w > span, html.st-on .pc.go .pc__r:nth-child(2) .pc__rule { transition-delay: .3s; animation-delay: .3s; }
html.st-on .pc.go .pc__r:nth-child(3) .pc__no, html.st-on .pc.go .pc__r:nth-child(3) .pc__w > span, html.st-on .pc.go .pc__r:nth-child(3) .pc__rule { transition-delay: .6s; animation-delay: .6s; }
html.st-on .pc.go .pc__r:nth-child(1) .pc__s { transition-delay: .18s; }
html.st-on .pc.go .pc__r:nth-child(2) .pc__s { transition-delay: .48s; }
html.st-on .pc.go .pc__r:nth-child(3) .pc__s { transition-delay: .78s; }
/* a sheen of stage light crosses each word as it lands */
.pc__w { position: relative; }
.pc__w::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 46%; pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 244, 222, 0) 0, rgba(255, 244, 222, .55) 50%, rgba(255, 244, 222, 0) 100%);
  mix-blend-mode: overlay; transform: translate3d(-120%, 0, 0) skewX(-16deg); opacity: 0;
}
html.st-on .pc.go .pc__w::after { animation: st-pc-sheen .8s cubic-bezier(.4, 0, .2, 1) .12s both; }
html.st-on .pc.go .pc__r:nth-child(2) .pc__w::after { animation-delay: .42s; }
html.st-on .pc.go .pc__r:nth-child(3) .pc__w::after { animation-delay: .72s; }
@keyframes st-pc-sheen {
  0% { transform: translate3d(-120%, 0, 0) skewX(-16deg); opacity: 1; }
  100% { transform: translate3d(330%, 0, 0) skewX(-16deg); opacity: 1; }
}
html.st-on .pc:not(.go) *, html.st-on .pc:not(.go) *::before { transition: none; }
@keyframes st-pc-cool {
  0%, 35% { color: var(--gold-hi); text-shadow: 0 0 34px rgba(246, 212, 138, .55); }
  100% { color: var(--bone); text-shadow: 0 0 24px rgba(246, 212, 138, .0); }
}

/* the flying tiles (chapter 4): one plane per tile, a short trail of two ghosts behind it */
.fly { display: none; }
html.st-on .fly {
  display: block; position: absolute; inset: 0; z-index: 22; pointer-events: none;
  perspective: 1100px; perspective-origin: 50% 46%;
  visibility: hidden;
}
.fl {
  position: absolute; left: 0; top: 0; width: var(--fw, 110px); height: var(--fh, 138px);
  overflow: hidden; border-radius: 12px; background: var(--ink-2);
  transform-origin: 50% 50%; will-change: transform, opacity;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 24px 40px -20px rgba(0, 0, 0, .9);
}
.fl img, .fl video { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; }
.fl video { z-index: 1; opacity: 0; transition: opacity .35s linear; }
.fl video.on { opacity: 1; }
.fl--g { box-shadow: none; }
.fl__edge { position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(246, 212, 138, .0); pointer-events: none; transition: box-shadow .3s linear; }
.fl.hot .fl__edge { box-shadow: inset 0 0 0 1.5px rgba(246, 212, 138, .75); }

/* captions (4 · 5 · 6) */
html.st-on .sc-5, html.st-on .sc-6 { z-index: 30; }
html.st-on .sc-4 .cap { z-index: 30; }
html.st-on .cap { position: absolute; left: var(--capL, var(--gut)); top: var(--capTop, 24px); width: var(--capW, calc(100% - 2 * var(--gut))); visibility: hidden; }
html.st-on .cap.on { visibility: inherit; }
html.st-on .steps .cap { left: 0; top: 0; width: 100%; }
html.st-on .steps { position: absolute; left: var(--capL, var(--gut)); top: var(--capTop, 24px); width: var(--capW, calc(100% - 2 * var(--gut))); }
.cap__t { font: 400 var(--capF, 28px)/1 var(--display); text-transform: uppercase; letter-spacing: .006em; color: var(--bone); text-wrap: balance; }
.cap--wow .cap__t .snt:last-child, .cap--pill .cap__t .snt:last-child { color: var(--gold); }
.cap__t .snt { white-space: nowrap; }
/* the step kicker sits on its own line above the title, everywhere (one two-tier rhythm for all six steps); it keeps
   the order form's separator: « STEP 1 · » / « YOU SHOW THE MOVE. » */
.cap__n { display: block; margin: 0 0 6px; font: 700 11px/1 var(--text); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); white-space: nowrap; }
html.st-desk .cap__n { margin: 0 0 14px; font-size: 12.5px; }
/* the kicker sits on its own line here: the middle dot would end the line and separate nothing (the heading's
   aria-label keeps "Step 1 · …" whole, and the static page keeps the dot) */
.cap__dot { display: none; }
html.st-on .cap__k { display: none; }
.cap__s { margin-top: 9px; font: 400 var(--capS, 15px)/1.4 var(--text); color: var(--muted); text-wrap: balance; }
.cap--live .cap__t { font-size: var(--liveF, 40px); }
.cap--live .cap__s { color: var(--bone); font-weight: 500; font-size: calc(var(--capS, 15px) + 2px); }
html.st-on .cap .w > span { transform: translate3d(0, 112%, 0); }
html.st-on .cap .cap__s, html.st-on .cap .cap__n { opacity: 0; }

/* the six-step index beside the phone, grouped by pillar: TRAINING 1–3 · NUTRITION 4 · POSING 5 · 6 */
.idx { display: none; }
html.st-on .idx {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--igG, 14px);
  position: absolute; left: var(--idxL, 0); top: var(--idxT, 0); opacity: 0;
}
html.st-on .ig { position: relative; display: flex; align-items: center; gap: 6px; }
html.st-on .ig__k {
  flex: none; width: 12px; display: flex; justify-content: center;
  writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap;
  font: 600 10px/12px var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  transition: color .3s linear, text-shadow .3s linear;
}
html.st-on .ig__b { flex: none; align-self: stretch; width: 1px; margin: 3px 0; background: var(--line); transform-origin: 50% 0; transition: background-color .3s linear; }
html.st-on .ig--x .ig__b { background: transparent; }
html.st-on .ig__n { display: flex; flex-direction: column; align-items: center; }
html.st-on .ix { position: relative; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; }
html.st-on .ix + .ix { margin-top: var(--idxG, 12px); }
html.st-on .ix + .ix::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 1px; height: var(--idxG, 12px); background: var(--line); }
html.st-on .ix.done + .ix::before { background: rgba(226, 176, 74, .5); }
html.st-on .ix span {
  display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
  font: 400 15px/1 var(--display); color: var(--muted);
  box-shadow: inset 0 0 0 1px rgba(243, 239, 232, .1);
  transition: color .25s linear, background-color .25s linear, box-shadow .25s linear, transform .3s var(--ease);
}
html.st-on .ix.done span { color: var(--bone); box-shadow: inset 0 0 0 1px rgba(226, 176, 74, .45); }
html.st-on .ix.cur span { color: var(--ink-0); background: var(--gold); box-shadow: 0 0 0 4px rgba(226, 176, 74, .16), 0 0 22px rgba(226, 176, 74, .45); transform: scale(1.08); }
/* the pillar labels light one by one with the title card (300 ms per word), then follow the current step */
html.st-on .idx.go .ig:not(.ig--x) .ig__k { color: var(--bone); }
html.st-on .idx.go .ig:nth-child(2) .ig__k { transition-delay: .3s; }
html.st-on .idx.go .ig:nth-child(3) .ig__k { transition-delay: .6s; }
html.st-on .ig.done .ig__k { color: var(--bone); }
html.st-on .ig.done .ig__b { background: rgba(226, 176, 74, .45); }
html.st-on .idx .ig.cur .ig__k { color: var(--gold); text-shadow: 0 0 12px rgba(226, 176, 74, .5); transition-delay: 0s; }
html.st-on .idx .ig.cur .ig__b { background: var(--gold); }
html.st-on .idx.go:not(.run) .ig:not(.ig--x) .ig__b { background: rgba(226, 176, 74, .45); }
/* desktop: the labels read across, to the right of the numbers */
html.st-desk.st-on .idx { gap: var(--igG, 22px); }
html.st-desk.st-on .ig { flex-direction: row-reverse; gap: 14px; }
html.st-desk.st-on .ig__k { width: auto; writing-mode: horizontal-tb; transform: none; font-size: 11px; line-height: 1; letter-spacing: .24em; }
html.st-desk.st-on .ix { width: 34px; height: 34px; }
html.st-desk.st-on .ix span { width: 32px; height: 32px; font-size: 17px; }
.draft { font: 400 12px/1.35 var(--text); color: var(--muted); text-wrap: balance; }
html.st-on .draft { position: absolute; left: var(--drL, var(--gut)); top: var(--drT, 80%); width: var(--drW, 200px); opacity: 0; font-size: 11px; line-height: 1.32; }
html.st-desk .draft { font-size: 12.5px; }

/* ---------------------------------------------------------------------------------------------- 7 · the judges' scorecard */
html.st-on .sc-7 { z-index: 50; background: var(--ink-0); }
.lights7 { display: none; }
html.st-on .lights7 {
  display: block; position: absolute; left: -20%; top: -20%; width: 140%; height: 80%; pointer-events: none;
  background: radial-gradient(40% 50% at 50% 30%, rgba(var(--spot), .09) 0, rgba(var(--spot), 0) 70%);
  will-change: transform;
}
.c7__t { font: 400 var(--c7F, 40px)/.95 var(--display); text-transform: uppercase; letter-spacing: .006em; color: var(--bone); }
.c7__s { margin-top: 10px; font: 400 14px/1.4 var(--text); color: var(--muted); max-width: 30em; }
.sheet7 { display: grid; gap: var(--jcG, 8px); margin-top: 18px; }
.jc { position: relative; perspective: 900px; }
.jc__f {
  border-radius: 16px; padding: 13px 15px 14px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.jc__front {
  position: relative; background: linear-gradient(180deg, #1B1B1F 0, #131316 100%);
  box-shadow: inset 0 0 0 1.5px var(--gold), inset 0 1px 0 rgba(255, 255, 255, .07), 0 24px 50px -26px #000;
}
.jc__back {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background:
    repeating-linear-gradient(135deg, rgba(243, 239, 232, .035) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, #151518 0, #0F0F11 100%);
  box-shadow: inset 0 0 0 1px rgba(243, 239, 232, .12);
  transform: rotateY(180deg);
}
.jc__back span { font: 400 15px/1 var(--display); letter-spacing: .3em; text-transform: uppercase; color: rgba(243, 239, 232, .3); }
.jc__h { display: flex; align-items: center; gap: 10px; font: 400 var(--jcF, 22px)/1 var(--display); text-transform: uppercase; letter-spacing: .02em; color: var(--bone); }
.jc__no { font: 700 11px/1 var(--text); letter-spacing: .14em; color: var(--ink-0); background: var(--gold); border-radius: 5px; padding: 4px 5px 3px; }
.arr { position: relative; display: inline-block; width: .62em; height: .78em; flex: none; }
.arr::before { content: ""; position: absolute; left: 50%; top: 18%; bottom: 0; width: .13em; margin-left: -.065em; background: var(--gold); border-radius: 1px; }
.arr::after { content: ""; position: absolute; left: 50%; top: 0; width: .42em; height: .42em; margin-left: -.21em; border-left: .13em solid var(--gold); border-top: .13em solid var(--gold); transform: translateY(.06em) rotate(45deg); transform-origin: 50% 50%; }
.arr--down { transform: rotate(180deg); }
.jc__l { margin-top: 8px; font: 500 var(--jclF, 14.5px)/1.35 var(--text); color: var(--bone); text-wrap: pretty; }
.jc__sm { margin-top: 5px; font: 400 11.5px/1.35 var(--text); color: var(--muted); }
.jc__est { margin-top: 6px; font: 400 18px/1 var(--display); color: var(--gold); letter-spacing: .02em; }
.big7 { position: relative; margin-top: 18px; perspective: 1200px; }
.big7__front { padding: 18px 18px 18px; border-radius: 22px; }
.big7 .jc__h { font-size: var(--bigF, 26px); }
.eq { margin-top: 12px; }
.eq__l { overflow: hidden; padding: .04em 0 .02em; }
.eq__in { display: flex; align-items: baseline; gap: .32em; flex-wrap: nowrap; }
.eq__n { font: 400 var(--eqF, 30px)/1.06 var(--display); color: var(--bone); letter-spacing: .015em; white-space: nowrap; }
/* the operators: Anton's × and = are specks, Instrument Sans has full-size ones; centred on the numerals' caps */
.eq__o {
  display: inline-flex; justify-content: center; width: 1em; flex: none; align-self: center;
  font: 500 calc(var(--eqF, 30px) * .8)/1 var(--text); color: var(--gold); opacity: .86;
  transform: translateY(-.03em);
}
.eq__l--res .eq__o { font-family: var(--display); font-weight: 400; opacity: 1; align-self: auto; justify-content: flex-start; transform: none; }
.eq__u { font: 500 13.5px/1.2 var(--text); color: var(--muted); white-space: nowrap; }
.eq__rule { height: 1px; margin: 8px 0 7px; background: rgba(243, 239, 232, .28); transform-origin: 0 50%; }
.eq__l--res .eq__n { color: var(--gold); font-size: calc(var(--eqF, 30px) * 1.36); }
.eq__l--res .eq__o { color: var(--gold); font-size: calc(var(--eqF, 30px) * 1.0); width: calc(var(--eqF, 30px) * 1.0); }
.eq__l--res .eq__u { color: var(--bone); }
.eq__year { margin-top: 6px; font: 500 16px/1.3 var(--text); color: var(--bone); }
.eq__70 { margin-top: 14px; font: 400 var(--e70F, 24px)/1.05 var(--display); text-transform: uppercase; color: var(--gold-hi); letter-spacing: .01em; }
.eq__sm { margin-top: 9px; font: 400 11.5px/1.4 var(--text); color: var(--muted); text-wrap: pretty; }
/* desktop, card 1 at full size: the equation on the left, what it adds up to on the right (no empty half) */
html.st-desk .big7__front { padding: 24px 28px 26px; }
html.st-desk .big7 .eq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); column-gap: 30px; align-items: center; margin-top: 18px; }
html.st-desk .big7 .eq__b { padding: 4px 0 4px 30px; box-shadow: inset 1px 0 0 rgba(243, 239, 232, .12); }
html.st-desk .big7 .eq__70 { margin-top: 16px; }
.veq { margin-top: 26px; }
.veq__line { margin-top: 30px; font: 400 var(--vlF, 30px)/1 var(--display); text-transform: uppercase; color: var(--bone); letter-spacing: .008em; }
.veq__line .snt { display: block; }
.veq__line .snt:last-child { color: var(--gold); }
html.st-on .c7 { position: absolute; left: var(--c7L, var(--gut)); top: 0; width: var(--c7W, calc(100% - 2 * var(--gut))); height: var(--S); }
html.st-on .c7__head { position: absolute; left: 0; right: 0; top: var(--c7T, 26px); }
html.st-on .c7__t .w > span, html.st-on .veq__line .w > span { transform: translate3d(0, 112%, 0); }
html.st-on .c7__s { opacity: 0; }
html.st-on .sheet7 { position: absolute; left: 0; right: 0; top: var(--shT, 150px); margin: 0; }
html.st-on .jc { visibility: hidden; }
html.st-on .jc__in { position: relative; transform-style: preserve-3d; will-change: transform; }
html.st-on .big7 { position: absolute; left: 0; right: 0; top: var(--bgT, 150px); margin: 0; visibility: hidden; transform-origin: 0 0; }
html.st-on .big7__in { position: relative; transform-style: preserve-3d; will-change: transform; }
html.st-on .eq__in { transform: translate3d(0, 115%, 0); }
html.st-on .eq__rule { transform: scaleX(0); }
html.st-on .eq__year, html.st-on .eq__70, html.st-on .eq__sm, html.st-on .big7 .jc__l { opacity: 0; }
html.st-on .veq { position: absolute; left: 0; right: 0; top: var(--vqT, 160px); margin: 0; visibility: hidden; }
html.st-on .veq__line { margin-top: 0; }

/* ---------------------------------------------------------------------------------------------- 8 · the deal in 3 lines */
html.st-on .sc-8 { z-index: 52; background: var(--ink-0); }
.lights8 { display: none; }
/* an oversized box: the light reaches 0 well inside every edge for the whole drift (no seam ever crosses the stage) */
html.st-on .lights8 {
  display: block; position: absolute; left: -40%; top: -60%; width: 180%; height: 160%; pointer-events: none;
  background: radial-gradient(28% 22% at 40% 40%, rgba(var(--spot), .08) 0, rgba(var(--spot), .03) 55%, rgba(var(--spot), 0) 100%);
  will-change: transform;
}
.deal { display: grid; gap: var(--dlG, 26px); }
.dl__t { font: 400 var(--dlF, 40px)/.98 var(--display); text-transform: uppercase; letter-spacing: .006em; color: var(--bone); text-wrap: balance; }
.dl__t b { color: var(--gold); }
.dl__s { margin-top: 9px; font: 500 var(--dlsF, 15px)/1.4 var(--text); color: var(--muted); }
.dl__bar { display: block; height: 2px; width: 46px; margin-bottom: 14px; background: var(--gold); transform-origin: 0 50%; }
html.st-on .c8 { position: absolute; left: var(--c8L, var(--gut)); top: var(--c8T, 60px); width: var(--c8W, calc(100% - 2 * var(--gut))); will-change: transform, opacity; }
html.st-on .dl { opacity: 0; will-change: transform, opacity; }
html.st-on .dl__s { opacity: 0; }
/* the numbers: their own card, every term open */
.num8 {
  position: relative; border-radius: 22px; padding: 24px 22px 22px;
  background: radial-gradient(120% 90% at 0 0, rgba(226, 176, 74, .12) 0, rgba(226, 176, 74, 0) 60%), linear-gradient(180deg, #1B1B1F 0, #121215 100%);
  box-shadow: inset 0 0 0 1.5px var(--gold), inset 0 1px 0 rgba(255, 255, 255, .07), 0 30px 70px -30px #000, 0 0 60px -20px rgba(226, 176, 74, .35);
}
.num8__k { font: 700 11px/1 var(--text); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.num8__t { margin-top: 14px; font: 400 var(--n8F, 38px)/.96 var(--display); text-transform: uppercase; letter-spacing: .006em; color: var(--bone); }
.num8__t .snt { display: block; }
.num8__t .snt:last-child { color: var(--gold); }
.num8__b { margin-top: 14px; font: 400 var(--n8bF, 16px)/1.45 var(--text); color: rgba(243, 239, 232, .88); max-width: 32em; text-wrap: pretty; }
.num8__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.num8__chips li {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 8px 7px 13px; border-radius: 999px;
  background: rgba(243, 239, 232, .04); box-shadow: inset 0 0 0 1px rgba(226, 176, 74, .45);
}
.num8__chips span { font: 600 13px/1 var(--text); color: var(--bone); }
.num8__chips i { font: 700 9.5px/1 var(--text); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: #17120A; background: var(--gold); border-radius: 999px; padding: 4px 7px 3px; }
.num8__cta {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 20px; padding: 0 22px; border-radius: 999px;
  font: 700 15px/1 var(--text); color: #17120A; text-decoration: none; background: linear-gradient(180deg, var(--gold-hi) 0, var(--gold) 100%);
  box-shadow: 0 10px 30px -10px rgba(226, 176, 74, .6);
}
.num8__cta:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }
html.st-on .num8 { position: absolute; left: var(--n8L, var(--gut)); top: var(--n8T, 120px); width: var(--n8W, calc(100% - 2 * var(--gut))); visibility: hidden; opacity: 0; will-change: transform, opacity; }
html.st-on .num8__k, html.st-on .num8__t .snt, html.st-on .num8__b, html.st-on .num8__chips li, html.st-on .num8__cta { opacity: 0; }
html.st-on .num8__cta { pointer-events: auto; }
html.st-desk .num8 { padding: 34px 36px 32px; }
html.st-desk .num8__chips { gap: 10px; }

/* ---------------------------------------------------------------------------------------------- 9 · you're up */
html.st-on .sc-9 { z-index: 54; background: var(--ink-0); pointer-events: none; }
html.st-on .sc-9.live { pointer-events: auto; }
.house { display: none; }
html.st-on .house { display: block; position: absolute; inset: 0; pointer-events: none; }
html.st-on .house i { position: absolute; display: block; opacity: 0; will-change: opacity; }
html.st-on .house__wash {
  inset: 0;
  background:
    radial-gradient(90% 55% at 50% 0, rgba(255, 196, 120, .30) 0, rgba(226, 150, 70, .12) 45%, rgba(226, 150, 70, 0) 80%),
    radial-gradient(80% 50% at 50% 100%, rgba(226, 176, 74, .14) 0, rgba(226, 176, 74, 0) 70%),
    linear-gradient(180deg, #1D1610 0, #120E0B 45%, #0C0A09 100%);
}
html.st-on .house__row {
  left: 0; right: 0; top: 0; height: 64px;
  background: radial-gradient(circle at center, rgba(255, 236, 200, .95) 0, rgba(255, 210, 140, .55) 2.6px, rgba(255, 190, 110, .14) 7px, rgba(255, 190, 110, 0) 16px) 0 18px / 44px 30px repeat-x;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
html.st-on .house__floor { left: -10%; right: -10%; bottom: -30%; height: 60%; background: radial-gradient(50% 50% at 50% 50%, rgba(255, 214, 150, .12), rgba(255, 214, 150, 0) 70%); }
.c9__t { font: 400 var(--c9F, 46px)/.96 var(--display); text-transform: uppercase; letter-spacing: .006em; color: var(--bone); text-wrap: balance; }
.c9__type .ch { }
html.st-on .c9__type .ch { visibility: hidden; }
html.st-on .c9__type .ch.on { visibility: inherit; }
.c9__caret { display: inline-block; width: .08em; height: .78em; margin-left: .04em; background: var(--gold); vertical-align: -.04em; }
/* while the call types, the caret rides on the last typed character (no reflow); the end caret waits */
html.st-on .c9__type.typing .c9__caret { visibility: hidden; }
html.st-on .c9__type .ch.cur { position: relative; }
html.st-on .c9__type .ch.cur::after { content: ''; position: absolute; left: 100%; top: .44em; width: .08em; height: .78em; margin-left: .04em; background: var(--gold); }
html.st-on:not(.rmos) .c9__caret.blink { animation: st-blink 1.06s steps(1) infinite; }
@keyframes st-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
.c9__card {
  margin-top: 24px; padding: 16px; border-radius: 26px;
  background: linear-gradient(180deg, rgba(34, 28, 22, .92) 0, rgba(20, 17, 15, .95) 100%);
  box-shadow: inset 0 0 0 1px rgba(246, 212, 138, .16), inset 0 1px 0 rgba(255, 255, 255, .07), 0 40px 80px -36px #000;
}
.c9__head { display: flex; align-items: center; gap: 12px; padding: 2px 2px 14px; border-bottom: 1px solid var(--line); }
.c9__faces { display: flex; flex: none; }
.c9__faces img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #1A1612; }
.c9__faces img + img { margin-left: -14px; }
.c9__who { font: 600 16px/1.3 var(--text); color: var(--bone); }
.c9__who i { font-style: normal; color: var(--gold); padding: 0 .2em; }
@media (max-width: 599px) {
  .c9__who b { display: block; font-weight: 600; }
  .c9__who i { display: none; }
  .c9__who span { display: block; margin-top: 2px; font-weight: 500; font-size: 14px; color: var(--muted); }
}
.c9__btns { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  min-height: 62px; padding: 8px 14px 8px 12px; border-radius: 18px;
  text-decoration: none; transition: transform .14s var(--ease), box-shadow .2s linear;
  touch-action: manipulation;
}
.btn:active { transform: scale(.97); }
.btn .ico { width: 26px; height: 26px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn .ico__dot { fill: currentColor; stroke: none; }
.btn .ico__ph { fill: currentColor; stroke: none; }
.btn span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.btn b { font: 700 clamp(15.5px, 4.3vw, 18px)/1.05 var(--text); letter-spacing: -.005em; }
.btn small { font: 600 13px/1.1 var(--text); opacity: .78; }
.btn--ig { background: var(--gold); color: #120D05; box-shadow: 0 16px 30px -16px rgba(226, 176, 74, .7), inset 0 1px 0 rgba(255, 255, 255, .35); }
.btn--wa { background: rgba(243, 239, 232, .06); color: var(--bone); box-shadow: inset 0 0 0 1.5px rgba(243, 239, 232, .28); }
.btn--s { min-height: 48px; padding: 0 18px; justify-content: center; font: 700 16px/1 var(--text); flex: 1; border-radius: 14px; }
.c9__foot { margin-top: 22px; font: 400 13px/1.5 var(--text); color: var(--muted); max-width: 30em; }
html.st-on .c9 { position: absolute; left: var(--c9L, var(--gut)); top: var(--c9T, 40px); width: var(--c9W, calc(100% - 2 * var(--gut))); }
html.st-on .c9__card, html.st-on .c9__foot { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity .7s linear, transform .9s var(--ease); }
html.st-on .c9.in .c9__card, html.st-on .c9.in .c9__foot { opacity: 1; transform: none; }
html.st-on .c9.in .c9__foot { transition-delay: .15s; }

/* ---------------------------------------------------------------------------------------------- the contact pill + sheet */
#dock {
  position: fixed; z-index: 900;
  right: max(14px, env(safe-area-inset-right, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  transition: transform .34s var(--ease-ios), opacity .28s linear;
}
#dock.away, #dock.aside { transform: translate3d(0, calc(100% + 30px), 0); opacity: 0; pointer-events: none; }
/* flat mode: the pill clears the interactive phone at once (it glides back in once the phone has passed) */
#dock.aside { transition: none; }
.pill {
  display: flex; align-items: center; gap: 9px; height: 48px; padding: 4px 17px 4px 5px;
  border-radius: 999px; background: rgba(23, 23, 26, .94); color: var(--bone);
  box-shadow: inset 0 0 0 1px rgba(243, 239, 232, .12), 0 14px 30px -12px rgba(0, 0, 0, .8);
  font: 600 14.5px/1 var(--text); text-decoration: none; letter-spacing: .005em; white-space: nowrap;
  cursor: pointer; border: 0; touch-action: manipulation;
  transition: transform .14s var(--ease), opacity .2s linear;
}
.pill:active { transform: scale(.96); }
.pill__faces { display: flex; }
.pill__faces img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #17171A; }
.pill__faces img + img { margin-left: -12px; }
.pill__t::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); margin-right: 7px; vertical-align: 1px; box-shadow: 0 0 8px rgba(226, 176, 74, .8); }
#dock.open .pill { opacity: 0; }
#sheet-scrim { position: fixed; inset: 0; z-index: 950; background: rgba(0, 0, 0, .6); opacity: 0; transition: opacity .22s linear; }
#sheet-scrim.on { opacity: 1; }
#sheet {
  position: fixed; z-index: 960; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  max-width: 500px; margin: 0 auto; max-height: calc(100% - 24px); overflow: auto; overscroll-behavior: contain;
  padding: 22px 20px 20px; border-radius: 28px; background: #141416; color: var(--bone);
  box-shadow: inset 0 0 0 1px rgba(243, 239, 232, .1), 0 30px 80px -24px #000;
  transform: translate3d(0, 112%, 0); transition: transform .4s var(--ease-ios);
}
#sheet.on { transform: none; }
.sheet__grab { width: 38px; height: 5px; border-radius: 3px; background: rgba(243, 239, 232, .18); margin: -8px auto 14px; }
.sheet__x { position: absolute; right: 10px; top: 10px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--bone); }
.sheet__h { font: 400 30px/1 var(--display); text-transform: uppercase; letter-spacing: .01em; padding-right: 36px; text-wrap: balance; }
.who { display: grid; grid-template-columns: 52px 1fr; column-gap: 14px; row-gap: 12px; align-items: center; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.who img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.who__n { display: flex; flex-direction: column; gap: 3px; }
.who__n b { font: 600 var(--t-m)/1.2 var(--text); }
.who__n span { font: 400 13px/1.2 var(--text); color: var(--muted); }
.who__b { grid-column: 1 / -1; display: flex; gap: 10px; }
.who__b .btn--ig { flex: 1.3; }

/* ---------------------------------------------------------------------------------------------- a phone held sideways */
@media (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
  html.st-on body::after {
    content: "Turn your phone upright"; position: fixed; z-index: 905; left: 50%; top: calc(10px + env(safe-area-inset-top, 0px));
    transform: translateX(-50%); padding: 8px 14px; border-radius: 999px;
    background: rgba(23, 23, 26, .96); box-shadow: inset 0 0 0 1px rgba(243, 239, 232, .12);
    font: 600 13px/1 var(--text); color: var(--bone); white-space: nowrap; pointer-events: none;
  }
}

/* ---------------------------------------------------------------------------------------------- desktop */
@media (min-width: 1000px) {
  :root { --t-m: 18px; --t-s: 16px; }
  .c7__s { font-size: 16px; }
  .jc__sm, .eq__sm { font-size: 12.5px; }
  .eq__u { font-size: 15px; }
  .eq__year { font-size: 18px; }
  .c9__who { font-size: 18px; }
  .c9__foot { font-size: 14px; }
  .chip { font-size: 15.5px; }
}

/* ============================================================================================== static document
   (no JS, a script failed to load, or ?rm=1): the same words, the same order, readable. */
html:not(.st-on) #stage { position: static; height: auto; overflow: visible; }
html:not(.st-on) .lb, html:not(.st-on) .beam, html:not(.st-on) .dust, html:not(.st-on) .cue, html:not(.st-on) .wall,
html:not(.st-on) .fly, html:not(.st-on) .idx, html:not(.st-on) .phone__glow, html:not(.st-on) .house, html:not(.st-on) .spot__v,
html:not(.st-on) .lights3, html:not(.st-on) .lights4, html:not(.st-on) .lights7, html:not(.st-on) .lights8,
html:not(.st-on) .jc__back, html:not(.st-on) .jc[data-j="1"], html:not(.st-on) .jc__est { display: none; }
html:not(.st-on) .sc { position: relative; padding: 56px var(--gut) 0; max-width: 760px; margin: 0 auto; }
html:not(.st-on) .sc-1 { padding-top: 0; }
html:not(.st-on) .spot { margin: 0 calc(var(--gut) * -1); }
html:not(.st-on) .spot__media { aspect-ratio: 4 / 5; max-height: 80vh; }
html:not(.st-on) .spot__fade { background: linear-gradient(180deg, rgba(7, 7, 8, 0) 50%, var(--ink-0) 100%); }
html:not(.st-on) .c1 { margin-top: -120px; position: relative; z-index: 2; }
html:not(.st-on) .c1__name { font-size: clamp(48px, 15vw, 110px); }
html:not(.st-on) .board { gap: 8px; }
html:not(.st-on) .board__r { font-size: clamp(18px, 5vw, 26px); }
html:not(.st-on) .key { margin-top: 34px; font-size: clamp(36px, 10vw, 72px); }
html:not(.st-on) .feed { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 20px; }
html:not(.st-on) .feed img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; }
html:not(.st-on) .bb { display: none; }
html:not(.st-on) .tot__n .sr-only, html:not(.st-on) .rep__n .sr-only { position: static !important; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; }
html:not(.st-on) .cap__k { margin-bottom: 10px; font: 700 12px/1.2 var(--text); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
html:not(.st-on) .tot { font-size: clamp(60px, 18vw, 120px); }
html:not(.st-on) .leg__n { color: var(--gold-hi); }
html:not(.st-on) .c3__t { font-size: clamp(40px, 12vw, 80px); }
html:not(.st-on) .rep__n { font-size: clamp(54px, 16vw, 110px); }
html:not(.st-on) .c3__c { font-size: clamp(30px, 8.6vw, 60px); }
html:not(.st-on) .phone { position: relative; width: 393px; height: 852px; margin: 40px 0 calc(852px * -.3 + 20px) calc(50% - 196.5px); transform: scale(.7); transform-origin: 50% 0; }
html:not(.st-on) .phone__trace { display: none; }
html:not(.st-on) .cap { margin-top: 24px; }
html:not(.st-on) .cap__t { font-size: clamp(26px, 7vw, 40px); }
html:not(.st-on) .sc-5 { display: flex; flex-direction: column; gap: 22px; }
html:not(.st-on) .steps { display: contents; }
html:not(.st-on) .c7__t, html:not(.st-on) .dl__t, html:not(.st-on) .c9__t { font-size: clamp(34px, 9.6vw, 64px); }
html:not(.st-on) .sheet7 { margin-top: 24px; }
html:not(.st-on) .jc__f { padding: 16px 18px; }
html:not(.st-on) .c7 { display: flex; flex-direction: column; }
html:not(.st-on) .c7__head { order: 0; }
html:not(.st-on) .big7 { order: 1; margin-top: 24px; }
html:not(.st-on) .sheet7 { order: 2; }
html:not(.st-on) .veq { order: 3; }
html:not(.st-on) .veq { margin-top: 30px; }
html:not(.st-on) .veq__line { font-size: clamp(30px, 8vw, 54px); }
html:not(.st-on) .num8 { margin-top: 40px; }
html:not(.st-on) .num8__t { font-size: clamp(32px, 8.6vw, 54px); }
html:not(.st-on) .sc-9 { padding-bottom: 96px; }
@media (min-width: 760px) {
  html:not(.st-on) .sheet7 { grid-template-columns: 1fr 1fr; }
}