/* MOVE · for Lenny · the story.
   Lakeside dusk: a dark room, one door, daylight behind it. His daylight footage glows on the dark like a window.
   One accent, his lemon. Archivo for display, Inter for text, JetBrains Mono for labels.
   html.st-on   = the experience (story.js running).
   html.st-flat = ?rm=1, the flat mode: the readable document with end states and the one live phone.
   Without either, the page is a readable static document (no JS, or a script failed to load). */

@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;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("media/fonts/inter-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: "Inter"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("media/fonts/inter-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: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("media/fonts/jetbrains-mono-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: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("media/fonts/jetbrains-mono-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;
}
/* size-adjusted system fallbacks, visible during the swap only */
@font-face { font-family: "Inter Fallback"; src: local("Arial"), local("Helvetica"), local("Roboto"); size-adjust: 107%; ascent-override: 90%; descent-override: 22%; }
@font-face { font-family: "Archivo Fallback"; src: local("Arial Black"), local("Arial"); size-adjust: 104%; }
@font-face { font-family: "Mono Fallback"; src: local("Menlo"), local("Consolas"), local("DejaVu Sans Mono"); size-adjust: 100%; }

:root {
  --ground: #0B0C0B;
  --band: #0F110F;
  --card: #141614;
  --card-2: #1C1F1C;
  --press: #252925;
  --hair: rgba(236, 240, 230, .10);
  --text: #F2F1EA;
  --muted: #8D928A;
  --faint: #5A5F58;
  --lemon: #F8EC00;
  --lemon-hi: #FFF7A1;
  --lemon-ink: #0B0C0B;
  --steel: #9BA3A7;
  --timber: #B48A60;
  --day: 255, 250, 226;
  --dusk: 110, 143, 168;

  --f-disp: "Archivo", "Archivo Fallback", "Arial Black", sans-serif;
  --f-text: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-mono: "JetBrains Mono", "Mono Fallback", ui-monospace, Menlo, Consolas, monospace;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-ios: cubic-bezier(.32, .72, 0, 1);
  --ease-stamp: cubic-bezier(.2, 1.4, .4, 1);
  --gut: 16px;
  --S: 100vh;
  --LH: 100vh;
  /* the calendar card (= the door leaf): its width drives every inner size */
  --card-w: 201px;
  --f: 1;
  color-scheme: dark;
}
@supports (height: 100svh) { :root { --S: 100svh; --LH: 100lvh; } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ground); color: var(--text); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; }
body {
  margin: 0; background: var(--ground); color: var(--text);
  font: 500 17px/1.4 var(--f-text);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
p, h1, h2, h3, ol, ul, li, figure { 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(--lemon); 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; border: 0;
  background: var(--text); color: var(--lemon-ink); font: 700 15px/1.2 var(--f-text); text-decoration: none; cursor: pointer;
  transform: translateY(calc(-100% - 90px));
}
.skip:focus-visible { transform: none; }
.skip--try { top: 60px; }
.skip--try[hidden] { display: none; }
.sr-story { display: none; }
html.st-on .sr-story { display: block; }
#end { height: 1px; }
.lem { color: var(--lemon); }
/* a word rises out of its mask */
html.st-on .w { display: inline-block; vertical-align: top; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
html.st-on .w > span { display: inline-block; }

/* the overline: JetBrains Mono caps, +10% */
.ov { font: 500 11px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.src { font: 500 11px/1.35 var(--f-mono); letter-spacing: .1em; color: var(--muted); }

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

/* ============================================================================================== 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, 2600vh) + 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(--ground);
}
/* a chapter is a scene of the stage: no stacking context of its own, its parts carry their z-index */
html.st-on .sc { position: absolute; left: 0; top: 0; width: 100%; height: var(--LH); visibility: hidden; pointer-events: none; }
html.st-on .sdoor, html.st-on .chips, html.st-on .queue-flat { display: none; }
html.st-on .odo-t { display: none; }

/* ---------------------------------------------------------------------------------------------- 1 · Books closed */
.hero { position: relative; overflow: hidden; background: var(--ground); }
.hero picture { display: contents; }
.hero__img, .hero__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hero__img { color: transparent; font-size: 0; }
.hero__v { z-index: 1; opacity: 0; transition: opacity .4s linear; }
.hero__v.on { opacity: 1; }
.hero__scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(11, 12, 11, .88) 0, rgba(11, 12, 11, .82) 9%, rgba(11, 12, 11, .68) 24%, rgba(11, 12, 11, .48) 36%, rgba(11, 12, 11, .2) 44%, rgba(11, 12, 11, 0) 52%),
    linear-gradient(0deg, var(--ground) 0, rgba(11, 12, 11, .6) 14%, rgba(11, 12, 11, 0) 35%);
}
html.st-on .hero {
  position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--S) * .62); z-index: 1;
  transform-origin: 50% 40%; will-change: transform, opacity; opacity: 0;
  clip-path: inset(0 0 2px 0);
}
html.st-on.st-desk .hero {
  left: 48px; top: 48px; width: calc(60% - 48px); height: calc(var(--S) - 96px); border-radius: 20px;
}
html.st-on.st-desk .hero__scrim {
  background:
    linear-gradient(180deg, rgba(11, 12, 11, .86) 0, rgba(11, 12, 11, .74) 14%, rgba(11, 12, 11, .5) 30%, rgba(11, 12, 11, 0) 50%),
    linear-gradient(0deg, rgba(11, 12, 11, .86) 0, rgba(11, 12, 11, .45) 18%, rgba(11, 12, 11, 0) 38%);
}

.c1__ov { color: var(--muted); }
.c1__h { font-weight: 400; }
.c1__l1, .c1__l2 { display: block; }
.c1__nm {
  display: inline-block; font: 900 64px/1.08 var(--f-disp); font-stretch: 112%; text-transform: uppercase; letter-spacing: -.01em;
  color: var(--text); transform-origin: 0 0;
}
.c1__role { display: inline-block; font: 600 20px/1.25 var(--f-text); color: var(--text); }
.key { font: 700 clamp(28px, 8.7vw, 34px)/1.06 var(--f-text); letter-spacing: -.015em; }
.key__1, .key__2 { display: block; }
.key__2 { color: var(--lemon); }

html.st-on .c1 { position: absolute; left: var(--gut); top: 18px; z-index: 30; width: calc(100% - 2 * var(--gut)); }
html.st-on .c1__ov { height: 14px; }
html.st-on .c1__h { margin-top: 2px; text-shadow: 0 2px 18px rgba(0, 0, 0, .45); }
html.st-on .c1__role { text-shadow: 0 1px 2px rgba(0, 0, 0, .7), 0 1px 8px rgba(0, 0, 0, .55), 0 1px 14px rgba(11, 12, 11, .55), 0 2px 22px rgba(0, 0, 0, .55); }
html.st-on .c1__ov { text-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 1px 14px rgba(11, 12, 11, .55); }
html.st-on .c1__l1 { overflow: hidden; padding-bottom: 2px; }
html.st-on .c1__l1.fly { overflow: visible; }
html.st-on .c1__l2 { overflow: hidden; margin-top: -2px; }
html.st-on .c1__nm, html.st-on .c1__role { will-change: transform; }
html.st-on .c1__ov2 .ch { visibility: hidden; }
html.st-on .c1__ov2 .ch.on { visibility: inherit; }
html.st-on .key { position: absolute; left: var(--gut); top: var(--keyT, 64%); z-index: 30; width: calc(100% - 2 * var(--gut)); }
html.st-on .key .w > span { transform: translate3d(0, 112%, 0); }
html.st-on.st-desk .c1 { left: calc(48px + 40px); top: calc(48px + 40px); width: calc(60% - 140px); }
html.st-on.st-desk .c1__ov { font-size: 13px; }
html.st-on.st-desk .c1__nm { font-size: 132px; line-height: 1.02; }
html.st-on.st-desk .c1__role { font-size: 32px; margin-top: 4px; }
html.st-on.st-desk .key { left: calc(48px + 40px); width: calc(60% - 140px); font-size: 64px; }

/* the scroll cue: a 22 px ring that closes with the first 8% of scroll */
.cue { display: none; }
html.st-on .cue {
  position: absolute; z-index: 30; left: 50%; top: var(--cueT, 50%);
  display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 5px; border-radius: 15px;
  background: rgba(20, 22, 20, .86); box-shadow: inset 0 0 0 1px var(--hair);
  color: var(--text); font: 500 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  transform: translateX(-50%); opacity: 0;
}
.cue__ring { width: 22px; height: 22px; flex: none; overflow: visible; }
.cue__tr { fill: none; stroke: rgba(155, 163, 167, .3); stroke-width: 2; }
.cue__arc { fill: none; stroke: var(--lemon); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 330 32; }
.cue__dot { fill: var(--lemon); }
html.st-on:not(.rmos) .cue.bob .cue__ring { animation: st-bob 1.6s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes st-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* ---------------------------------------------------------------------------------------------- the door */
.d-room, .d-spill, .d-aper, .d-frame { display: none; }
html.st-on .d-room, html.st-on .d-spill, html.st-on .d-aper, html.st-on .d-frame, html.st-on .d-leaf {
  display: block; position: absolute; left: 0; top: 0; width: var(--cw0, 201px); height: var(--ch0, 305px);
  transform-origin: 0 0; visibility: hidden; pointer-events: none;
}
html.st-on .d-room { z-index: 10; }
html.st-on .d-spill { z-index: 11; }
html.st-on .d-aper { z-index: 12; overflow: hidden; background: rgb(var(--day)); }
html.st-on .d-frame { z-index: 15; }
html.st-on .d-leaf { z-index: 16; perspective: var(--persp, 650px); perspective-origin: 50% 50%; }

/* the room around the door (scaled with it) */
.d-room__vig, .d-room__wash { position: absolute; left: -250%; top: -150%; width: 600%; height: 400%; }
.d-room__vig {
  background:
    radial-gradient(18% 22% at 50% 47%, rgba(15, 17, 15, 1) 0, rgba(15, 17, 15, .6) 55%, rgba(15, 17, 15, 0) 100%),
    radial-gradient(30% 34% at 50% 50%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .9) 100%),
    linear-gradient(0deg, rgba(var(--dusk), .08) 0, rgba(var(--dusk), 0) 30%);
}
.d-room__wash { background: radial-gradient(22% 30% at 50% 60%, rgba(var(--day), .06) 0, rgba(var(--day), .06) 40%, rgba(var(--day), 0) 100%); opacity: 0; }

/* chapter 4: the light recedes into the phone. A stage-sized ground layer whose clear circle, centred on the phone,
   closes in (p .55 to .72); the opaque daylight is never faded toward the ground, so no frame is a flat midtone */
.d-dim { display: none; }
html.st-on .d-dim { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 12; visibility: hidden; pointer-events: none; }
/* two pre-baked vignettes (story.js layoutDim): composited, they only translate and fade, never repaint */
html.st-on .d-dim__l { position: absolute; display: block; opacity: 0; will-change: transform, opacity; pointer-events: none; }
/* PERF: will-change only while a door layer scales or swings (story.js toggles .dwc): the raster is kept, not redone
   at every new scale */
html.st-on .dwc { will-change: transform; }
/* chapter 1: while the slots fill and the stamp lands (story.js rSlots), the moving parts are their own layers */
html.st-on .sa .slot__f, html.st-on .sa .slot__t, html.st-on .sa .slot__b, html.st-on .sa .stamp { will-change: transform, opacity; }
/* the room is soft gradients only: it keeps one raster for good (J34 and the camera travel scale it 2.6x, then 3x) */
html.st-on .d-room { will-change: transform; }
/* the spill's parts (soft light) keep stable layers too: they were re-layerized and re-rastered on every frame of the swing */
html.st-on .d-floor, html.st-on .d-shaft, html.st-on .d-lift { will-change: transform; }

/* the light that spills out of the doorway */
.d-floor {
  position: absolute; left: -150%; top: 100%; width: 400%; height: 90%; transform-origin: 50% 0;
  background: linear-gradient(180deg, rgba(var(--day), .55) 0, rgba(var(--day), .18) 45%, rgba(var(--day), 0) 100%);
  clip-path: polygon(37.5% 0, 62.5% 0, 62.5% 0, 37.5% 0);
}
.d-shaft {
  position: absolute; top: 18%; width: 60%; height: 130%; opacity: 0;
  background: linear-gradient(180deg, rgba(var(--day), 0) 0, rgba(var(--day), .3) 40%, rgba(var(--day), 0) 100%);
  /* PERF: the soft sides were a filter: blur(14px), re-filtered on every frame the door scaled; a static mask gives
     the same soft edge for free */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 78%, transparent 100%);
}
.d-shaft--1 { left: 4%; transform: skewX(18deg); transform-origin: 50% 0; }
.d-shaft--2 { left: 36%; transform: skewX(-12deg); transform-origin: 50% 0; }
.d-lift {
  position: absolute; left: -60%; top: 70%; width: 220%; height: 70%; opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 247, 161, .35), rgba(255, 247, 161, 0));
}

/* the aperture: opaque daylight, a lemon-hi core */
.d-aper__day {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 46% at 50% 54%, rgba(255, 247, 161, .9) 0, rgba(255, 247, 161, .35) 45%, rgba(255, 247, 161, 0) 100%),
    rgb(var(--day));
}
.d-aper__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; opacity: 0; filter: saturate(.95) sepia(.22) brightness(.97) contrast(1.04); }
.d-aper__grade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 206, 140, .16), rgba(255, 190, 110, .2)); opacity: 0; mix-blend-mode: multiply; }
.d-aper__scrim {
  position: absolute; inset: 0; opacity: 0;
  background:
    linear-gradient(180deg, rgba(11, 12, 11, .86) 0, rgba(11, 12, 11, .8) 22%, rgba(11, 12, 11, .55) 33%, rgba(11, 12, 11, 0) 46%),
    linear-gradient(0deg, rgba(11, 12, 11, .5) 0, rgba(11, 12, 11, 0) 36%);
}
.d-open {
  position: absolute; left: 0; right: 0; top: var(--openT, 10%); text-align: center;
  font: 900 var(--openF, 38px)/.94 var(--f-disp); font-stretch: 112%; letter-spacing: -.01em; text-transform: uppercase;
  color: var(--lemon-ink); white-space: nowrap;
}
.d-open__w { display: inline-block; opacity: 0; }
html:not(.st-desk) .d-open__w { display: block; }

/* the frame: jambs, reveals, lintel, sill (filled shapes; the line art only draws them on) */
.d-jamb, .d-lintel, .d-rev, .d-sill, .d-under, .d-shadow { position: absolute; display: block; }
.d-jamb, .d-lintel { background: linear-gradient(90deg, #171A17, var(--card) 40%, #121412); box-shadow: inset 0 0 0 calc(1px / var(--k, 1)) rgba(236, 240, 230, .14); }
.d-lintel { background: linear-gradient(180deg, #191C19, var(--card)); }
.d-jamb--l { left: calc(var(--J) * -1); top: calc(var(--J) * -1); width: var(--J); height: calc(var(--ch0) + var(--J)); }
.d-jamb--r { left: var(--cw0); top: calc(var(--J) * -1); width: var(--J); height: calc(var(--ch0) + var(--J)); }
.d-lintel { left: calc(var(--J) * -1); top: calc(var(--J) * -1); width: calc(var(--cw0) + 2 * var(--J)); height: var(--J); }
.d-rev { background: var(--band); }
.d-rev--l { left: 0; top: 0; width: var(--rev); height: var(--ch0); transform-origin: 0 50%; transform: scaleX(0); }
.d-rev--r { right: 0; top: 0; width: var(--rev); height: var(--ch0); transform-origin: 100% 50%; transform: scaleX(0); }
.d-rev--t { left: 0; top: 0; width: var(--cw0); height: var(--rev); transform-origin: 50% 0; transform: scaleY(0); }
.d-sill {
  left: calc(var(--J) * -1 - var(--sillX)); top: calc(var(--ch0) + var(--core)); width: calc(var(--cw0) + 2 * var(--J) + 2 * var(--sillX));
  height: var(--sillH); background: var(--timber); transform-origin: 50% 50%;
}
.d-under { left: 3%; top: var(--ch0); width: 94%; height: var(--bloomH); }
.d-under__core { position: absolute; left: 0; right: 0; top: 0; height: var(--core); background: rgb(var(--day)); }
.d-under__bloom {
  position: absolute; left: -12%; right: -12%; top: 0; height: 100%;
  background: radial-gradient(50% 100% at 50% 0, rgba(var(--day), .22) 0, rgba(var(--day), .08) 50%, rgba(var(--day), 0) 100%);
  transform-origin: 50% 0;
}
html.st-on:not(.rmos) .d-under.flick .d-under__bloom { animation: st-flick 3.4s ease-in-out infinite; }
@keyframes st-flick { 0%, 100% { opacity: 1; } 38% { opacity: .9; } 52% { opacity: .97; } 71% { opacity: .88; } }
.d-shadow {
  left: 0; top: calc(var(--ch0) - var(--ch0) * .02); width: var(--cw0); height: calc(var(--ch0) * .06); transform-origin: 0 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0)); opacity: 0;
}
.d-draw { position: absolute; overflow: visible; fill: none; stroke: var(--steel); stroke-linecap: round; stroke-linejoin: round; max-width: none; }
.d-draw__p { stroke-dasharray: 1 1; stroke-dashoffset: 1; }

/* the leaf: three sibling planes, each with its own full transform around the hinge (no preserve-3d) */
.d-face { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.d-face--back { background: var(--card); box-shadow: inset 0 0 0 calc(1px / var(--k, 1)) var(--hair); border-radius: calc(var(--f) * 12px); visibility: hidden; backface-visibility: visible; -webkit-backface-visibility: visible; }
.d-edge { display: none; }
html.st-on .d-edge { display: block; position: absolute; left: 0; top: 0; width: var(--edge, 6px); height: 100%; background: var(--press); transform-origin: 0 50%; visibility: hidden; }

/* the calendar card (the leaf's front face); every inner size follows --card-w */
.cal {
  background: var(--card); color: var(--text); border-radius: calc(var(--f) * 12px);
  box-shadow: inset 0 0 0 calc(1px / var(--k, 1)) var(--hair), 0 calc(var(--f) * 24px) calc(var(--f) * 48px) calc(var(--f) * -20px) rgba(0, 0, 0, .8);
  padding: calc(var(--f) * 14px) calc(var(--f) * 8px) calc(var(--f) * 8px);
  display: flex; flex-direction: column;
}
.cal__hd {
  display: flex; justify-content: space-between; gap: calc(var(--f) * 6px); height: calc(var(--f) * 16px); align-items: center;
  font: 500 calc(var(--f) * 11px)/1 var(--f-mono); letter-spacing: .02em; color: var(--muted); white-space: nowrap;
}
.cal__days { flex: 1; margin-top: calc(var(--f) * 6px); display: grid; grid-template-rows: repeat(7, minmax(0, 1fr)); row-gap: calc(var(--f) * 4px); }
.cal__day { display: grid; grid-template-columns: calc(var(--f) * 44px) repeat(3, minmax(0, 1fr)); column-gap: calc(var(--f) * 3px); min-height: 0; }
.cal__d { align-self: center; font: 500 calc(var(--f) * 11px)/1 var(--f-mono); letter-spacing: .1em; color: var(--muted); white-space: nowrap; }
.slot {
  position: relative; overflow: hidden; border-radius: calc(var(--f) * 6px);
  background: var(--card-2); box-shadow: inset 0 0 0 calc(1px / var(--k, 1)) rgba(236, 240, 230, .10);
  display: flex; align-items: center; justify-content: center;
}
.slot::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: calc(1px / var(--k, 1)) dashed rgba(236, 240, 230, .12); }
.slot__f { position: absolute; inset: 0; background: var(--press); transform-origin: 50% 100%; }
.slot__t { position: relative; font: 500 calc(var(--f) * 10px)/1 var(--f-mono); letter-spacing: .04em; color: var(--muted); white-space: nowrap; }
.slot__b {
  position: absolute; left: 50%; top: 50%; font: 500 calc(var(--f) * 9px)/1 var(--f-mono); letter-spacing: .08em; color: rgba(242, 241, 234, .72);
  transform: translate(-50%, -50%) rotate(-3deg); white-space: nowrap;
}
/* the static document and ?rm=1: every slot booked */
.slot__t { opacity: 0; }
html.st-on .slot__t { opacity: .999; }
html.st-on .slot__f { transform: scaleY(0); }
html.st-on .slot__b { opacity: 0; }

/* the stamp: rubber ink, a double rule, a static texture */
.stamp {
  position: absolute; left: 50%; top: calc(var(--f) * 36px + (100% - var(--f) * 44px) / 2);
  transform: translate(-50%, -50%) rotate(-4deg); pointer-events: none;
  color: rgba(242, 241, 234, .88);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='r'><feTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' seed='4'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -3.2 2.55'/></filter><rect width='160' height='160' filter='url(%23r)'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='r'><feTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' seed='4'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -3.2 2.55'/></filter><rect width='160' height='160' filter='url(%23r)'/></svg>");
  -webkit-mask-size: calc(var(--card-w) * .6); mask-size: calc(var(--card-w) * .6);
}
.stamp__in {
  position: relative; display: block; text-align: center;
  border: calc(var(--card-w) * .015) solid currentColor; border-radius: calc(var(--card-w) * .02);
  padding: calc(var(--card-w) * .045) calc(var(--card-w) * .05) calc(var(--card-w) * .038);
  font: 900 calc(var(--card-w) * .15)/.9 var(--f-disp); font-stretch: 112%; letter-spacing: -.01em; text-transform: uppercase; white-space: nowrap;
}
.stamp__in::before {
  content: ""; position: absolute; inset: calc(var(--card-w) * .02); border: calc(var(--card-w) * .005) solid currentColor; border-radius: calc(var(--card-w) * .008);
}
.stamp__w { display: block; }
.stamp--ink { color: rgba(242, 241, 234, .2); opacity: 0; }
html.st-on .stamp { opacity: 0; }

/* the nameplate on the leaf's top rail, and the knob */
.plate {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%);
  padding: calc(var(--card-w) * .012) calc(var(--card-w) * .045) calc(var(--card-w) * .01);
  background: var(--press); box-shadow: inset 0 0 0 calc(1px / var(--k, 1)) var(--timber); border-radius: calc(var(--card-w) * .012);
  font: 900 calc(var(--card-w) * .07)/1.1 var(--f-disp); font-stretch: 112%; letter-spacing: -.01em; color: var(--text); white-space: nowrap;
  display: none;
}
html.st-on .plate { display: block; opacity: 0; }
.knob { display: none; }
html.st-on .knob {
  display: block; position: absolute; width: var(--knob, 20px); height: var(--knob, 20px);
  right: calc(var(--card-w) * .035); top: calc(52% - var(--knob, 20px) / 2); overflow: visible; opacity: 0;
}
.knob__bg { fill: var(--card-2); }
.knob__tr { fill: none; stroke: var(--steel); stroke-width: 2.2; stroke-linecap: round; }
.knob__fill { fill: none; stroke: var(--lemon); stroke-width: 2.2; stroke-linecap: round; opacity: 0; }
.knob__dot { fill: var(--steel); }
.knob.ready .knob__dot { fill: var(--lemon); }

/* ---------------------------------------------------------------------------------------------- 2 · The line at your door */
html.st-on .queue { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; }
.queue { display: none; }
html.st-on .queue { display: block; }
html.st-on .ov2, html.st-on .ov3 { position: absolute; z-index: 20; left: var(--gut); top: 16px; }
html.st-on.st-desk .ov2, html.st-on.st-desk .ov3 { left: 48px; top: 44px; font-size: 13px; }
.panel { background: var(--card); border-radius: 20px; box-shadow: inset 0 0 0 1px var(--hair); padding: 14px 16px 12px; }
html.st-on .panel { position: absolute; z-index: 20; left: var(--gut); right: var(--gut); top: calc(var(--S) * .57); height: calc(var(--S) * .28); padding: 0; }
.cnt { display: block; }
.cnt__r { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cnt__k { font: 500 11px/1 var(--f-mono); letter-spacing: .1em; color: var(--muted); }
.cnt__v { font: 800 28px/1.05 var(--f-text); font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--text); }
.cnt__r--tot { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hair); }
.cnt__v--tot { font-size: 44px; color: var(--lemon); }
html.st-on .cnt__v--tot { color: var(--text); }
html.st-on .cnt__v--tot.landed { color: var(--lemon); }
.panel__line { margin-top: 10px; font: 500 17px/1.3 var(--f-text); color: var(--text); }
.panel__src { margin-top: 10px; }
html.st-on .cnt { position: absolute; left: 16px; right: 16px; top: var(--cntT, 14px); }
html.st-on .cnt__r { height: var(--rowH, 34px); align-items: center; }
html.st-on .cnt__r--tot { position: absolute; left: 16px; right: 16px; top: var(--totT, 120px); margin: 0; padding: 0; border: 0; height: var(--totH, 50px); align-items: center; }
html.st-on .panel__hr { position: absolute; left: 16px; right: 16px; top: var(--hrT, 116px); height: 1px; background: var(--hair); }
html.st-on .panel__line { position: absolute; left: 16px; right: 16px; top: var(--lineT, 20px); margin: 0; }
html.st-on .panel__src { position: absolute; left: 16px; right: 16px; bottom: 10px; margin: 0; opacity: 0; }
html.st-on.st-desk .panel { left: auto; right: 48px; width: 360px; top: var(--panT, 120px); height: var(--panH, 300px); }
html.st-on.st-desk .cnt__v { font-size: 40px; }
html.st-on.st-desk .cnt__v--tot { font-size: 66px; letter-spacing: -.02em; }
html.st-on.st-desk .cnt__k { font-size: 12px; }
html.st-on.st-desk .panel__line { font-size: 21px; }
html.st-on.st-desk .panel__src { font-size: 12px; }
.cnt__v--tot .od, .cnt__v--tot { transition: none; }
html.st-on .cnt__v--tot.flash { color: var(--lemon-hi); }
/* a lemon glow behind the total (12%) once it lands */
.cnt__r--tot { position: relative; }
html.st-on .cnt__r--tot::before {
  content: ""; position: absolute; right: -10%; top: 50%; width: 80%; height: 180%; transform: translateY(-50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(248, 236, 0, .12), rgba(248, 236, 0, 0)); opacity: 0; transition: opacity .4s linear;
}
html.st-on .cnt__r--tot.landed::before { opacity: 1; }

/* the odometer: digit wheels, never a ghost leading 0 */
.od { display: inline-flex; align-items: flex-start; height: 1.12em; overflow: hidden; line-height: 1.12; vertical-align: top; }
.od-d { display: inline-block; height: 1.12em; overflow: hidden; }
.od-s { display: flex; flex-direction: column; will-change: transform; }
.od-s > span { display: block; height: 1.12em; line-height: 1.12; text-align: center; }
.od-c { display: inline-block; transition: opacity .12s linear; }
.od-c.off { opacity: 0; }
.od.zero { opacity: 0; }
html:not(.st-on) .od { display: none; }

/* ---------------------------------------------------------------------------------------------- 3 · They already ask */
.rain { display: none; }
html.st-on .rain { display: block; position: absolute; inset: 0; z-index: 19; pointer-events: none; }
.bub {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 9px;
  border-radius: 18px; background: var(--card-2); box-shadow: inset 0 0 0 1px var(--hair), 0 6px 14px -6px rgba(0, 0, 0, .6);
  font: 600 15px/1 var(--f-text); color: var(--text); white-space: nowrap; will-change: transform; opacity: 0;
}
.bub i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.6px var(--steel); flex: none; }
html.st-on .c3n { position: absolute; z-index: 20; left: 0; width: 100%; top: calc(var(--S) * .385); text-align: center; display: flex; flex-direction: column; align-items: center; }
.c3n__n { display: block; font: 800 64px/1 var(--f-text); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.c3n__l { display: block; margin-top: 6px; font: 500 15px/1.3 var(--f-text); color: var(--muted); }
html.st-on .c3n__n, html.st-on .c3n__l { transform-origin: 50% 0; }
.c3l { font: 700 24px/1.15 var(--f-text); letter-spacing: -.01em; }
.c3l--2 { color: var(--lemon); }
html.st-on .c3l { position: absolute; z-index: 20; left: var(--gut); right: var(--gut); top: var(--c3lT, 300px); text-align: center; }
html.st-on .c3l .w > span { transform: translate3d(0, 112%, 0); }
html.st-on.st-desk .c3n { left: 48px; width: auto; top: var(--c3nT, 40%); text-align: left; align-items: flex-start; }
html.st-on.st-desk .c3n__n { font-size: 112px; }
html.st-on.st-desk .c3n__l { font-size: 17px; }
html.st-on.st-desk .c3l { left: auto; right: 48px; width: min(440px, 32vw); text-align: left; font-size: 34px; }

/* --k: the door's scale, so hairlines keep 1 px at any size (story.js sets it on its users only). Not inherited, so a
   change restyles those elements, not the calendar's subtree. Engines without @property inherit it: same look. */
@property --k { syntax: '<number>'; inherits: false; initial-value: 1; }

/* ---------------------------------------------------------------------------------------------- 4 · the phone, the flyers */
html.st-on .phone {
  position: absolute; left: 0; top: 0; z-index: 13;
  width: var(--cw, 393px); height: var(--chh, 852px);
  transform-origin: 0 0; visibility: hidden; pointer-events: none;
}
html.st-on .phone__screen { pointer-events: auto; }
/* before the first frame: the app's layers set visibility: visible, so the hidden hardware also starts at opacity 0 (story.js then writes the opacity inline) */
html.st-on .phone.ph-off { opacity: 0; }
html.st-on .phone.is-anim { will-change: transform; }
.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(150deg, #4A4F4A 0%, #3B3F3B 10%, #1B1D1B 30%, #2C302C 48%, #3A3F3A 58%, #1B1D1B 74%, #2C302C 90%, #454A45 100%) border-box;
  box-shadow:
    0 0 0 .75px rgba(255, 255, 255, .06),
    inset 0 1px 0 rgba(255, 255, 255, .18),
    inset 0 0 0 .75px rgba(255, 255, 255, .1);
  pointer-events: none;
}
/* the phone's drop shadow lives on the phone itself, not on the tilting frame (the T5 tilt then turns a tight layer) */
.phone::before {
  content: ""; position: absolute; inset: calc((var(--bz) + var(--band)) * -1); border-radius: calc(var(--R) + var(--bz) + var(--band));
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9); 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 #020302;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .9), inset 0 0 0 .75px rgba(255, 255, 255, .06);
}
.pa { position: absolute; z-index: 0; width: var(--band); height: 2.5px; background: rgba(120, 128, 120, .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; }
.pb {
  position: absolute; width: 5px; border-radius: 2px;
  background: linear-gradient(90deg, #1B1D1B 0%, #474C47 40%, #626862 55%, #232623 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, #1B1D1B 0%, #474C47 40%, #626862 55%, #232623 100%); }
.phone__screen {
  position: absolute; inset: 0; border-radius: var(--R); overflow: hidden; overflow: clip; background: var(--ground);
  transform: translateZ(0);
}
#move-app { position: absolute; left: 0; top: 0; width: 100%; height: 100%; contain: strict; }   /* a fixed-size canvas: the app's own text changes relayout only the app */
.phone__glare {
  position: absolute; inset: 0; z-index: 40; pointer-events: none; border-radius: var(--R);
  background: linear-gradient(115deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .015) 22%, rgba(255, 255, 255, 0) 40%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
}
/* the Dynamic Island: 196 pt in the DOM, 126 pt through the clip (a Live Activity opens it, never a width change) */
.phone__island {
  position: absolute; top: 11px; left: 50%; z-index: 41; width: 196px; height: 37px; margin-left: -98px;
  pointer-events: none; clip-path: inset(0 35px round 18.5px); -webkit-clip-path: inset(0 35px round 18.5px);
  contain: strict;   /* its readout ticks at 10 Hz: a relayout of the island only */
}
.isl__body { position: absolute; inset: 0; border-radius: 18.5px; background: #000; box-shadow: inset 0 0 0 .75px rgba(255, 255, 255, .05); }
.isl__body::after {
  content: ""; position: absolute; right: 48px; 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%);
  transition: opacity .42s var(--ease-ios);
}
.phone__island.act .isl__body::after { opacity: 0; }
html.rmos .isl__body::after { transition: none; }
.isl__ring { position: absolute; left: 10px; top: 8.5px; width: 20px; height: 20px; overflow: visible; }
.isl__tr { fill: none; stroke: rgba(155, 163, 167, .3); stroke-width: 2.4; }
.isl__f { fill: none; stroke: var(--lemon); stroke-width: 2.4; stroke-linecap: round; opacity: 0; }
.isl__ck { fill: none; stroke: var(--lemon-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.isl__ring.done .isl__tr { fill: var(--lemon); stroke: var(--lemon); }
.isl__ring.done .isl__f { opacity: 0; }
.isl__ring.done .isl__ck { opacity: 1; }
.isl__t { position: absolute; right: 12px; top: 0; width: 48px; height: 37px; display: flex; align-items: center; justify-content: flex-end; text-align: right; white-space: nowrap; font: 800 13px/1 var(--f-text); font-variant-numeric: tabular-nums; color: var(--text); }
.isl__ring, .isl__t { transform: translateX(var(--islX, 0px)); }
.isl__ring { --islX: -26px; }
.isl__t { --islX: 26px; }
.phone__island.act .isl__ring, .phone__island.act .isl__t { --islX: 0px; }
.phone__island.anim { transition: clip-path .42s var(--ease-ios), -webkit-clip-path .42s var(--ease-ios); }
.phone__island.anim .isl__ring, .phone__island.anim .isl__t { transition: transform .42s var(--ease-ios); }
html.rmos .phone__island.anim, html.rmos .phone__island.anim .isl__ring, html.rmos .phone__island.anim .isl__t { transition: none; }
.phone__glow {
  position: absolute; inset: -120px -140px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--day), .3), rgba(var(--day), .1) 55%, rgba(var(--day), 0));
  opacity: 0;
}
/* PERF: its opacity is scrubbed in chapter 4: on its own layer, so the change never repaints the phone (frame, shadow) */
html.st-on .phone__glow { will-change: opacity; }
.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(255, 247, 161, .32); }
html.st-on .phone__trace .tr-core { stroke: #FFFDF0; }
.phone__tick { display: none; }
html.st-on .phone__tick {
  display: block; position: absolute; right: -44px; top: 41%; width: 12px; height: 28px; overflow: visible; opacity: 0;
  fill: none; stroke: var(--lemon); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none;
}
html.st-on .phone.is-anim .phone__frame, html.st-on .phone.is-anim .phone__screen, html.st-on .phone.is-anim .phone__island { will-change: transform, opacity; }
html.st-on .phone.is-tilt .phone__frame, html.st-on .phone.is-tilt .pb { will-change: transform; }   /* the T5 tilt: one raster, transformed */

/* the static Today screen: only when the app is missing, or without the experience */
.phone__fb { display: none; position: absolute; inset: 0; background: var(--ground); color: var(--text); font-family: var(--f-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 #move-app, html[data-noapp] #move-app, html:not(.st-on):not(.st-flat) #move-app { display: none; }
html.no-js img[data-src] { display: none; }
.fb__status { position: absolute; left: 0; right: 0; top: 0; height: 54px; }
.fb__time { position: absolute; left: 38px; top: 18px; font: 600 16px/20px var(--f-text); }
.fb__icons { position: absolute; right: 30px; top: 21px; display: flex; gap: 6px; align-items: center; }
.fb__k { position: absolute; left: 16px; top: 64px; font: 500 11px/1 var(--f-mono); letter-spacing: .08em; color: var(--muted); }
.fb__h { position: absolute; left: 16px; top: 82px; font: 700 32px/1.1 var(--f-text); letter-spacing: -.01em; }
.fb__hero { position: absolute; left: 16px; right: 16px; top: 132px; height: 80px; border-radius: 20px; background: var(--card); padding: 12px 16px; }
.fb__hk { font: 500 11px/1 var(--f-mono); letter-spacing: .08em; color: var(--lemon); }
.fb__ht { margin-top: 6px; font: 900 20px/1 var(--f-disp); font-stretch: 112%; text-transform: uppercase; letter-spacing: -.01em; }
.fb__hl { margin-top: 7px; font: 500 13px/1 var(--f-text); color: var(--muted); }
.fb__draft { display: inline-block; margin-left: 6px; padding: 2px 4px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--steel); font: 500 10px/1 var(--f-mono); letter-spacing: .08em; color: var(--steel); vertical-align: 1px; }
.fb__ring { position: absolute; right: 16px; top: 16px; width: 48px; height: 48px; }
.fb__ring-t { fill: none; stroke: rgba(155, 163, 167, .14); stroke-width: 4; }
.fb__ring-f { fill: none; stroke: var(--lemon); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 288 360; transform: rotate(-90deg); transform-origin: 24px 24px; }
.fb__rn { position: absolute; right: 16px; top: 16px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; font: 800 13px/1 var(--f-text); font-variant-numeric: tabular-nums; }
.fb__sec { position: absolute; left: 16px; top: 226px; font: 500 11px/1 var(--f-mono); letter-spacing: .08em; color: var(--muted); }
.fb__rows { position: absolute; left: 0; right: 0; top: 254px; }
.fb__rows li { position: relative; display: flex; align-items: center; gap: 14px; height: 64px; padding: 0 16px; }
.fb__rows img { width: 48px; height: 60px; border-radius: 10px; object-fit: cover; flex: none; background: var(--card-2); }
.fb__rows span { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.fb__rows b { font: 600 17px/1.1 var(--f-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb__rows em { font: 500 13px/1.1 var(--f-mono); font-style: normal; color: var(--muted); white-space: nowrap; }
.fb__rows i { font: 500 10px/1.2 var(--f-mono); font-style: normal; letter-spacing: .08em; color: var(--steel); white-space: nowrap; }
.fb__rows .fb__on::before { content: ""; position: absolute; left: 4px; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--lemon); }
.fb__go { position: absolute; left: 50%; bottom: 91px; transform: translateX(-50%); height: 44px; padding: 0 22px; border-radius: 22px; background: var(--lemon); color: var(--lemon-ink); font: 700 16px/44px var(--f-text); white-space: nowrap; }
.fb__tabs { position: absolute; left: 0; right: 0; bottom: 0; height: 83px; padding-bottom: 28px; display: flex; justify-content: space-around; align-items: center; border-top: 1px solid rgba(236, 240, 230, .08); background: rgba(11, 12, 11, .92); font: 600 10.5px/1 var(--f-text); color: var(--steel); }
.fb__tabs span { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.fb__tabs svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fb__tabs .on { color: var(--text); }
.phone.c780 .fb__hero { height: 72px; padding-top: 10px; }
.phone.c780 .fb__hl { margin-top: 5px; }
.phone.c780 .fb__sec { top: 207px; }
.phone.c780 .fb__rows { top: 220px; }
.phone.c780 .fb__rows li { height: 60px; }

/* the seven flyers (4:5 elements, a uniform scale, a 9:16 look by clip-path) */
.fl {
  position: absolute; left: 0; top: 0; z-index: 17; width: var(--flw, 240px); height: calc(var(--flw, 240px) * 1.25);
  transform-origin: 50% 50%; will-change: transform, opacity, clip-path; background: var(--card-2);
  visibility: hidden; pointer-events: none;
}
.fl img, .fl video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.fl video { z-index: 1; opacity: 0; transition: opacity .2s linear; }
.fl video.on { opacity: 1; }
.fl__edge { position: absolute; z-index: 2; top: 0; bottom: 0; left: 14.84%; right: 14.84%; border: 2px solid var(--lemon); pointer-events: none; }
.fl--g { opacity: 0; }

/* ---------------------------------------------------------------------------------------------- 5 · 6 · captions */
html.st-on .cap { position: absolute; z-index: 25; left: var(--capL, var(--gut)); top: var(--capT, 12px); width: var(--capW, calc(100% - 2 * var(--gut))); visibility: hidden; }
html.st-on .cap.on { visibility: inherit; }
.cap__h { font: 700 30px/1.08 var(--f-text); letter-spacing: -.015em; }
.cap__t { font: 700 17px/1.2 var(--f-text); letter-spacing: -.005em; }
.cap__s { font: 500 15px/1.3 var(--f-text); color: var(--muted); }
.cap--intro .cap__h { margin-top: 4px; }
.cap--intro .cap__s { margin-top: 4px; }
.cap--step .cap__s { margin-top: 3px; }
html.st-on .cap--step { top: var(--stepT, 34px); }
html.st-on .cap .w > span { transform: translate3d(0, 112%, 0); }
html.st-on.st-desk .cap__h { font-size: 56px; }
html.st-on.st-desk .cap__t { font-size: 44px; line-height: 1.08; letter-spacing: -.015em; }
html.st-on.st-desk .cap__s { font-size: 21px; margin-top: 10px; }
html.st-on.st-desk .cap .ov { font-size: 13px; }
html.st-on.st-desk .cap--intro .cap__h { margin-top: 12px; }
/* phones: a compact band, so the chapter 5 phone is as large as chapter 6's (the rail ends the label's row) */
html.st-on:not(.st-desk) .sc-5 .cap__h { font-size: 24px; line-height: 1.05; }
html.st-on:not(.st-desk) .sc-5 .cap--intro .cap__h { margin-top: 3px; }
html.st-on:not(.st-desk) .sc-5 .cap--intro .cap__s { margin-top: 3px; }
html.st-on:not(.st-desk) .cap--step .cap__t { font-size: 16px; line-height: 20px; padding-right: 94px; }
html.st-on:not(.st-desk) .rail { gap: 6px; }

.rail { display: none; }
html.st-on .rail { display: flex; position: absolute; z-index: 25; left: var(--railL, var(--gut)); top: var(--railT, 12px); gap: 8px; opacity: 0; }
.rail__i { display: flex; align-items: center; gap: 10px; }
.rail__r { width: 12px; height: 12px; overflow: visible; }
.rail__r circle { fill: none; stroke: rgba(155, 163, 167, .55); stroke-width: 1.6; }
.rail__i.done .rail__r circle { stroke: var(--lemon); }
.rail__i.cur .rail__r circle { stroke: var(--lemon); fill: var(--lemon); }
.rail__k { display: none; font: 500 11px/1 var(--f-mono); letter-spacing: .1em; color: var(--muted); }
html.st-on.st-desk .rail { flex-direction: column; gap: 18px; }
html.st-on.st-desk .rail__r { width: 16px; height: 16px; }
html.st-on.st-desk .rail__k { display: block; }
html.st-on.st-desk .rail__i.cur .rail__k { color: var(--text); }
.dglyph { display: none; }
html.st-on.st-desk .dglyph { display: block; position: absolute; z-index: 25; width: 48px; height: 48px; left: var(--dgL, 48px); top: var(--dgT, 60%); overflow: visible; opacity: 0; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.dglyph__f, .dglyph__l { stroke: var(--steel); stroke-width: 2; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.dglyph__s { stroke: var(--timber); stroke-width: 2; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.dglyph__k { fill: var(--steel); opacity: 0; }
.draft { font: 500 11px/1.3 var(--f-mono); letter-spacing: .06em; color: var(--muted); }
html.st-on .draft { position: absolute; z-index: 25; left: var(--gut); top: var(--drT, 600px); width: var(--drW, 190px); opacity: 0; }
/* phones: upright along the phone's left edge, read bottom to top */
html.st-on .draft.draft--v { width: auto; white-space: nowrap; writing-mode: vertical-rl; transform: rotate(180deg); }
/* phones without that margin: centred under the phone, one line where it fits, else two balanced lines */
html.st-on .draft.draft--u { letter-spacing: 0; text-align: center; text-wrap: balance; }

/* 6 · your turn */
html.st-on .cap--live { top: var(--liveT, 8px); }
.c6__h { font-size: 24px; }
html.st-on .c6__ov, html.st-on .c6__s { position: absolute; left: 0; right: 0; top: var(--l2T, 34px); margin: 0; }
html.st-on .c6__ova, html.st-on .c6__ovb, html.st-on .c6__sa, html.st-on .c6__sb { position: absolute; left: 0; top: 0; white-space: nowrap; }
html.st-on .c6__s { font: 400 15px/1.3 var(--f-text); }
.c6__ovb, .c6__sb { display: none; }
html.st-on .c6__ovb, html.st-on .c6__sb { display: block; }
html.st-on.st-desk .c6__h { font-size: 56px; }
html.st-on.st-desk .c6__h .lem { display: block; }
html.st-on.st-desk .c6__ov { position: static; height: 18px; margin-bottom: 14px; }
html.st-on.st-desk .c6__s { position: relative; top: 0; margin-top: 14px; height: 1.3em; font-size: 21px; }
html.st-on.st-desk .c6__sa, html.st-on.st-desk .c6__sb { white-space: normal; width: 100%; }
.mirror { display: none; }
html.st-on.st-desk .mirror { display: block; position: absolute; z-index: 25; left: var(--mirL, 70%); top: 50%; transform: translateY(-50%); opacity: 0; }
.mirror__n { font: 800 160px/1 var(--f-text); font-variant-numeric: tabular-nums; letter-spacing: -.03em; color: var(--text); }
.mirror__n.hot { color: var(--lemon); }
.mirror__k { margin-top: 8px; font: 500 13px/1 var(--f-mono); letter-spacing: .1em; color: var(--muted); }
.fx6 { display: none; }
html.st-on .fx6 { display: block; position: absolute; inset: 0; z-index: 11; pointer-events: none; visibility: hidden; }
.fx6 i { position: absolute; display: block; will-change: transform, opacity; }   /* scrubbed every frame: composited, never repainted */
.fx6__vig { inset: 0; background: radial-gradient(70% 62% at 50% 52%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .95) 100%); opacity: .4; }
.fx6__day { left: 0; top: 0; width: 600px; height: 760px; margin: -380px 0 0 -300px; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--day), 1), rgba(var(--day), .35) 50%, rgba(var(--day), 0)); opacity: 0; }
.fx6__glow { left: 0; top: 0; width: 720px; height: 720px; margin: -360px 0 0 -360px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 247, 161, 1), rgba(255, 247, 161, .3) 45%, rgba(255, 247, 161, 0)); opacity: 0; }

/* ---------------------------------------------------------------------------------------------- 7 · The four levers */
html.st-on .sc-7 { z-index: 50; background: var(--ground); }
.iris7 { display: none; }
html.st-on .iris7 { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 51; overflow: visible; pointer-events: none; visibility: hidden; }
.iris7 circle { fill: none; stroke: var(--lemon-hi); stroke-width: 1.5px; }
.c7__room { display: none; }
html.st-on .c7__room {
  display: block; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(0deg, rgba(var(--dusk), .08) 0, rgba(var(--dusk), 0) 34%),
    radial-gradient(80% 70% at 50% 46%, var(--band) 0, var(--band) 45%, var(--ground) 100%);
}
html.st-on .c7 { position: absolute; left: var(--gut); right: var(--gut); top: 0; height: 100%; }
.c7__h { font: 700 30px/1.08 var(--f-text); letter-spacing: -.015em; }
.c7__s { font: 500 17px/1.3 var(--f-text); color: var(--muted); }
html.st-on .c7__ov { position: absolute; left: 0; top: 16px; }
html.st-on .c7__h { position: absolute; left: 0; top: 36px; transform-origin: 0 0; }
html.st-on .c7__s { position: absolute; left: 0; right: 0; top: 80px; }
.levers { display: grid; gap: 10px; margin-top: 18px; }
html.st-on .levers { position: absolute; left: 0; right: 0; top: 0; margin: 0; display: block; }
.lv { position: relative; min-height: 96px; }
html.st-on .lv { position: absolute; left: 0; right: 0; top: 0; opacity: 0; }
.lv__bg { position: absolute; inset: 0; border-radius: 18px; background: var(--card); box-shadow: inset 0 0 0 1px var(--hair); transform-origin: 50% 0; }
.lv__in { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px 14px 14px; transform-origin: 0 0; }
.lv__g { position: relative; flex: none; width: 44px; height: 44px; }
.lv__ring { width: 44px; height: 44px; overflow: visible; }
.lv__tr { fill: none; stroke: rgba(155, 163, 167, .14); stroke-width: 3.2; }
.lv__f { fill: none; stroke: var(--lemon); stroke-width: 3.2; stroke-linecap: round; }
html.st-on .lv__f { opacity: 0; }
.lv__f.flash { stroke: var(--lemon-hi); }
.lv__arr { position: absolute; left: 14px; top: 14px; width: 16px; height: 16px; fill: none; stroke: var(--lemon); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.lv__tx { min-width: 0; flex: 1; }
.lv__hd { display: flex; align-items: baseline; gap: 10px; }
.lv__no { font: 500 11px/1 var(--f-mono); letter-spacing: .1em; color: var(--muted); }
.lv__n { font: 900 22px/1.05 var(--f-disp); font-stretch: 112%; letter-spacing: -.01em; text-transform: uppercase; }
.lv__l { margin-top: 6px; font: 500 15px/1.3 var(--f-text); color: var(--text); }
.est { margin-top: 26px; }
.est__rule { display: block; height: 1px; background: var(--hair); transform-origin: 0 50%; }
.est__ov { margin-top: 12px; }
.est__eq { margin-top: 8px; font: 500 15px/1.4 var(--f-text); color: var(--muted); }
.eq__a1, .eq__a2, .eq__b { display: block; }
.eq__r { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.approx { display: inline-block; width: .62em; height: .62em; vertical-align: -.05em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; overflow: visible; }
.est__a { margin-top: 6px; font: 400 15px/1.35 var(--f-text); color: var(--muted); }
.est__src { margin-top: 6px; }
html.st-on .est { position: absolute; left: 0; right: 0; top: var(--estT, 404px); margin: 0; }
html.st-on .est > * { opacity: 0; }
html.st-on.st-desk .c7 { left: 50%; right: auto; width: min(1240px, calc(100% - 96px)); transform: translateX(-50%); }
html.st-on.st-desk .c7__ov { left: 50%; transform: translateX(-50%); top: var(--c7ovT, 80px); font-size: 13px; }
html.st-on.st-desk .c7__h { left: 0; right: 0; text-align: center; top: var(--c7hT, 104px); font-size: 56px; transform-origin: 50% 0; }
html.st-on.st-desk .c7__s { text-align: center; top: var(--c7sT, 176px); font-size: 21px; }
html.st-on.st-desk .levers { top: var(--lvT, 250px); }
html.st-on.st-desk .lv__in { flex-direction: column; gap: 18px; padding: 24px 22px; }
html.st-on.st-desk .lv__g { width: 60px; height: 60px; }
html.st-on.st-desk .lv__ring { width: 60px; height: 60px; }
html.st-on.st-desk .lv__arr { left: 20px; top: 20px; width: 20px; height: 20px; }
html.st-on.st-desk .lv__n { font-size: clamp(18px, 1.95vw, 28px); }
html.st-on.st-desk .lv__l { font-size: 19px; margin-top: 10px; }
html.st-on.st-desk .est { left: 50%; right: auto; width: 640px; margin-left: -320px; text-align: center; }
html.st-on.st-desk .est__eq { font-size: 17px; }
html.st-on.st-desk .eq__a1, html.st-on.st-desk .eq__a2 { display: inline; }
html.st-on.st-desk .est__ov, html.st-on.st-desk .est__src { font-size: 12px; }

/* J78: the four gauges gather into one waiting ring */
.gather { display: none; }
html.st-on .gather { display: block; position: absolute; inset: 0; z-index: 52; pointer-events: none; visibility: hidden; }
.gather svg { position: absolute; left: 0; top: 0; width: 72px; height: 72px; overflow: visible; transform-origin: 36px 36px; }
.gather circle { fill: none; stroke: var(--lemon); stroke-width: 5.2; stroke-linecap: round; }

/* ---------------------------------------------------------------------------------------------- 8 · The deal in 3 lines */
html.st-on .c8 { position: absolute; z-index: 55; left: var(--c8L, var(--gut)); top: var(--c8T, 120px); width: var(--c8W, calc(100% - 2 * var(--gut))); }
.deal { margin-top: 18px; }
.dl + .dl { margin-top: 22px; }
.dl__t { font: 700 30px/1.1 var(--f-text); letter-spacing: -.015em; }
.dl__rule { display: block; height: 1px; margin-top: 10px; background: var(--hair); transform-origin: 0 50%; }
.dl__s { margin-top: 8px; font: 500 17px/1.35 var(--f-text); color: var(--muted); }
.go { color: var(--lemon); position: relative; }
html.st-on .go { display: inline-block; padding: 0 .04em; }
.goring { display: none; }
html.st-on .goring { display: block; position: absolute; left: 0; top: 0; width: 72px; height: 72px; overflow: visible; transform-origin: 36px 36px; z-index: 2; opacity: 0; }
.goring__f { fill: none; stroke: var(--lemon); stroke-width: 5.2; stroke-linecap: round; }
.goring__dot { fill: var(--lemon); }
.goring__flash { fill: none; stroke: var(--lemon-hi); stroke-width: 5.2; opacity: 0; }
html.st-on .dl__t, html.st-on .dl__s, html.st-on .c8__ov { opacity: 0; }
html.st-on .dl__rule { transform: scaleX(0); }
html.st-on.st-desk .dl__t { font-size: 56px; }
html.st-on.st-desk .dl__s { font-size: 21px; margin-top: 12px; }
html.st-on.st-desk .dl + .dl { margin-top: 34px; }
html.st-on.st-desk .c8__ov { font-size: 13px; }

/* ---------------------------------------------------------------------------------------------- 9 · Your move */
html.st-on .c9 { position: absolute; z-index: 40; left: var(--c9L, 16px); top: var(--c9T, 16px); width: var(--c9W, 350px); height: var(--c9H, 531px); }
.c9__h { font: 700 clamp(28px, 8.7vw, 34px)/1.06 var(--f-text); letter-spacing: -.015em; }
.c9__w { display: inline-block; }
html.st-on .c9__ov { position: absolute; left: 16px; right: 16px; top: var(--c9ovT, 22px); color: rgba(242, 241, 234, .78); }
html.st-on .c9__h { position: absolute; left: 16px; right: 16px; top: var(--c9hT, 44px); }
html.st-on .c9__h .w > span { transform: translate3d(0, 112%, 0); }
html.st-on .c9__h { text-shadow: 0 2px 18px rgba(11, 12, 11, .5); }
.c9__card {
  margin-top: 20px; padding: 16px; border-radius: 22px; background: rgba(20, 22, 20, .97); box-shadow: inset 0 0 0 1px var(--hair), 0 30px 60px -30px rgba(0, 0, 0, .9);
}
.c9__card:focus { outline: none; }
html.st-on .c9__card { position: absolute; left: 8px; right: 8px; bottom: 8px; margin: 0; opacity: 0; pointer-events: auto; }
.c9__head { display: flex; align-items: center; gap: 12px; }
.c9__faces { display: flex; flex: none; }
.c9__faces img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px var(--text); }
.c9__faces img + img { margin-left: -14px; }
.c9__who { font: 600 15px/1.3 var(--f-text); color: var(--text); }
.nw { white-space: nowrap; }
@media (max-width: 359px) {
  .c9__btns .btn { padding: 0 8px; gap: 6px; }
  .c9__btns .ico { width: 20px; height: 20px; }
  .c9__btns .btn b { font-size: 14px; }
}
.c9__btns { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btn {
  display: flex; align-items: center; gap: 10px; min-width: 0; height: 56px; padding: 0 12px;
  border-radius: 16px; background: var(--text); color: var(--lemon-ink); text-decoration: none;
  transition: transform .14s var(--ease-out); touch-action: manipulation;
}
.btn:active { transform: scale(.97); }
.btn .ico { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn .ico__dot { fill: currentColor; stroke: none; }
.btn span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.btn b { font: 700 15px/1.1 var(--f-text); }
.btn small { font: 500 13px/1.1 var(--f-text); opacity: .72; }
.btn--s { height: 48px; justify-content: center; font: 700 15px/1 var(--f-text); flex: 1; }
.c9__foot { margin-top: 20px; font: 400 15px/1.4 var(--f-text); color: var(--muted); }
html.st-on .c9__foot { position: absolute; left: var(--footL, 0px); right: var(--footR, 0px); top: var(--footT, 560px); margin: 0; opacity: 0; text-align: center; text-shadow: 0 0 3px var(--ground), 0 0 10px var(--ground), 0 0 18px var(--ground); }
html.st-on .c9__btns .btn { opacity: 0; }
html.st-on.st-desk .c9__h { font-size: 96px; text-align: center; left: -40%; right: -40%; }
html.st-on.st-desk .c9__ov { text-align: center; font-size: 13px; }
html.st-on.st-desk .c9__card { left: 50%; right: auto; width: 560px; margin-left: -280px; bottom: 24px; padding: 20px; }
@media (min-width: 1200px) {
  /* four in a row inside the 560 px card: 127 px each, so the icon, the gap and the padding tighten */
  html.st-on.st-desk .c9__card { padding: 20px 16px; }
  html.st-on.st-desk .c9__btns { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  html.st-on.st-desk .c9__btns .btn { padding: 0 9px; gap: 7px; justify-content: center; }
  html.st-on.st-desk .c9__btns .ico { width: 22px; height: 22px; }
}
html.st-on.st-desk .c9__who { font-size: 17px; }

/* ---------------------------------------------------------------------------------------------- the contact pill + sheet */
#dock {
  position: fixed; z-index: 900;
  right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  transition: transform .28s var(--ease-ios), opacity .28s linear;
}
#dock.aside { transform: translate3d(0, calc(100% + 16px), 0); opacity: 0; pointer-events: none; }
.pill {
  display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px 0 9px;
  border-radius: 24px; background: rgba(28, 31, 28, .96); color: var(--text);
  box-shadow: inset 0 0 0 1px var(--hair), 0 14px 30px -12px rgba(0, 0, 0, .8);
  font: 600 15px/1 var(--f-text); text-decoration: none; white-space: nowrap;
  cursor: pointer; border: 0; touch-action: manipulation;
  transition: transform .14s var(--ease-out), opacity .2s linear;
}
@supports (backdrop-filter: blur(1px)) {
  html.st-desk .pill { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
}
.pill:active { transform: scale(.96); }
.pill__faces { display: flex; }
.pill__faces img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px var(--text); }
.pill__faces img + img { margin-left: -8px; }
#dock.open .pill { opacity: 0; }
/* the autoplay control: bottom left, the contact pill keeps bottom right (as alan); the pill's card, our lemon */
#autoplay {
  position: fixed; z-index: 900; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  transition: transform .28s var(--ease-ios), opacity .28s linear, visibility 0s;
}
html.js:not(.st-on) #autoplay, html.st-flat #autoplay, html.st-fail #autoplay { display: none; }
#autoplay.aside { transform: translate3d(0, calc(100% + 16px), 0); opacity: 0; pointer-events: none; visibility: hidden; transition: transform .28s var(--ease-ios), opacity .28s linear, visibility 0s linear .28s; }
.auto {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 9px; height: 48px; padding: 0 18px 0 11px;
  border-radius: 24px; background: rgba(28, 31, 28, .96); color: var(--text); border: 0;
  box-shadow: inset 0 0 0 1px var(--hair), 0 14px 30px -12px rgba(0, 0, 0, .8);
  font: 600 15px/1 var(--f-text); white-space: nowrap; cursor: pointer; touch-action: manipulation;
  transition: transform .14s var(--ease-out);
}
@supports (backdrop-filter: blur(1px)) {
  html.st-desk .auto { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
}
.auto:active { transform: scale(.96); }
.auto__i { width: 26px; height: 26px; border-radius: 50%; background: var(--lemon); color: var(--lemon-ink); display: grid; place-items: center; flex: none; }
.auto__i svg { width: 10px; height: 10px; fill: currentColor; display: block; }
.auto__i svg[fill="none"] { fill: none; width: 12px; height: 12px; }
.auto__bar { position: absolute; left: 16px; right: 16px; bottom: 6px; height: 2px; border-radius: 1px; background: rgba(236, 240, 230, .16); overflow: hidden; }
.auto__bar i { display: block; width: 100%; height: 100%; background: var(--lemon); transform-origin: 0 50%; transform: scaleX(0); }
#autoplay:not(.is-on) .auto__bar { opacity: .55; }
.auto-off { opacity: 0 !important; visibility: hidden !important; }
#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: 480px; margin: 0 auto; max-height: calc(100% - 24px); overflow: auto; overscroll-behavior: contain;
  padding: 22px 20px 20px; border-radius: 28px; background: var(--card); color: var(--text);
  box-shadow: inset 0 0 0 1px var(--hair), 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(236, 240, 230, .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(--text); }
.sheet__h { font: 700 28px/1.1 var(--f-text); letter-spacing: -.015em; padding-right: 40px; }
.sheet__s { margin-top: 6px; font: 500 15px/1.3 var(--f-text); color: var(--muted); }
.who { display: grid; grid-template-columns: 48px 1fr; column-gap: 14px; row-gap: 12px; align-items: center; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hair); }
.who img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px var(--text); }
.who__n { display: flex; flex-direction: column; gap: 3px; }
.who__n b { font: 600 17px/1.2 var(--f-text); }
.who__n span { font: 500 13px/1.2 var(--f-mono); color: var(--muted); }
.who__b { grid-column: 1 / -1; display: flex; gap: 10px; }

/* ============================================================================================== static document
   (no JS, a script failed to load, or ?rm=1): the same words, the same order, readable, end states. */
html:not(.st-on) #stage { position: static; height: auto; overflow: visible; }
html:not(.st-on) .d-room, html:not(.st-on) .d-spill, html:not(.st-on) .d-aper, html:not(.st-on) .d-frame,
html:not(.st-on) .d-face--back, html:not(.st-on) .queue, html:not(.st-on) .rain, html:not(.st-on) .cue, html:not(.st-on) .fx6,
html:not(.st-on) .rail, html:not(.st-on) .mirror, html:not(.st-on) .gather, html:not(.st-on) .goring, html:not(.st-on) .hero__v,
html:not(.st-on) .phone__trace, html:not(.st-on) .phone__tick, html:not(.st-on) .phone__glow, html:not(.st-on) .fl,
html:not(.st-on) .c6__ovb, html:not(.st-on) .c6__sb { display: none; }
html:not(.st-on) .sc { position: relative; padding: 64px var(--gut) 0; max-width: 760px; margin: 0 auto; }
html:not(.st-on) .sc-1 { padding-top: 0; }
html:not(.st-on) .hero { margin: 0 calc(var(--gut) * -1); aspect-ratio: 4 / 5; max-height: 76vh; }
html:not(.st-on) .c1 { position: relative; z-index: 2; margin-top: -150px; }
html:not(.st-on) .hero__scrim {
  background:
    linear-gradient(180deg, rgba(11, 12, 11, .45) 0, rgba(11, 12, 11, 0) 24%),
    linear-gradient(0deg, var(--ground) 0, rgba(11, 12, 11, .94) 24%, rgba(11, 12, 11, .86) 34%, rgba(11, 12, 11, .5) 46%, rgba(11, 12, 11, 0) 60%);
}
html:not(.st-on) .c1__ov, html:not(.st-on) .c1__h { text-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 2px 18px rgba(0, 0, 0, .6); }
html:not(.st-on) .c1__nm { font-size: clamp(64px, 16vw, 132px); }
html:not(.st-on) .c1__role { font-size: clamp(20px, 4.4vw, 32px); }
html:not(.st-on) .c1__ov { margin-bottom: 4px; }
html:not(.st-on) .key { margin-top: 28px; }
html:not(.st-on) .d-leaf { --card-w: min(300px, calc(100vw - 2 * var(--gut))); --f: calc(var(--card-w) / 201px); display: block; position: relative; width: var(--card-w); height: calc(var(--card-w) / .66); margin: 40px auto 0; }
/* calc can not divide a length by a length: fixed steps instead */
html:not(.st-on) .d-leaf { --card-w: 280px; --f: 1.393; }
@media (max-width: 320px) { html:not(.st-on) .d-leaf { --card-w: 240px; --f: 1.194; } }
html:not(.st-on) .d-face--front { position: relative; width: 100%; height: 100%; }
html:not(.st-on) .knob, html:not(.st-on) .stamp--ink, html:not(.st-on) .slot__t { display: none; }
html:not(.st-on) .ov2, html:not(.st-on) .ov3 { margin-bottom: 18px; }
html:not(.st-on) .panel { margin-top: 8px; }
html:not(.st-on) .cnt__r { padding: 6px 0; }
html:not(.st-on) .queue-flat { width: 100%; height: auto; margin: 0 auto 18px; max-width: 360px; }
html:not(.st-on) .queue-flat circle { fill: var(--lemon); }
html:not(.st-on) .queue-flat .qf-door { fill: var(--card); stroke: var(--steel); stroke-width: 1; }
html:not(.st-on) .queue-flat .qf-sill { fill: none; stroke: var(--timber); stroke-width: 2; }
html:not(.st-on) .queue-flat .qf-knob { fill: none; stroke: var(--steel); stroke-width: 1.4; }
html:not(.st-on) .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 22px; }
html:not(.st-on) .chips li { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 9px; border-radius: 18px; background: var(--card-2); box-shadow: inset 0 0 0 1px var(--hair); font: 600 15px/1 var(--f-text); }
html:not(.st-on) .chips li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.6px var(--steel); }
html:not(.st-on) .c3n { margin-bottom: 18px; }
html:not(.st-on) .c3l + .c3l { margin-top: 8px; }
html:not(.st-on) .sdoor { display: block; }
html:not(.st-on) .sdoor__frame { position: relative; width: min(300px, 76vw); aspect-ratio: .66; margin: 0 auto; border: 14px solid var(--card); border-bottom: 0; box-shadow: 0 0 0 1px var(--hair); overflow-x: visible; overflow-y: clip; }
html:not(.st-on) .sdoor__day { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(60% 46% at 50% 54%, rgba(255, 247, 161, .9), rgba(255, 247, 161, 0)), rgb(var(--day)); display: flex; align-items: flex-start; justify-content: center; }
html:not(.st-on) .sdoor__day img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
html.no-js .sdoor__day noscript { position: absolute; inset: 0; display: block; }
html:not(.st-on) .sdoor__t { margin-top: 18%; text-align: center; font: 900 clamp(34px, 10.5vw, 54px)/.94 var(--f-disp); font-stretch: 112%; letter-spacing: -.01em; color: var(--lemon-ink); }
html:not(.st-on) .sdoor__leaf { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--card); box-shadow: inset 0 0 0 1px var(--hair); transform-origin: 0 50%; transform: perspective(2000px) rotateY(-112deg); }
/* the open leaf stays between the lintel and the floor (its projected height never reaches the copy or the posters) */
html:not(.st-on) .sdoor__sill { position: absolute; left: -38px; right: -38px; bottom: -2px; height: 2px; background: var(--timber); }
html:not(.st-on) .sdoor__row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 20px; }
html:not(.st-on) .sdoor__row img { width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; border-radius: 8px; background: var(--card-2); }
html.no-js .sdoor__row, html.st-fail .sdoor__row, html.no-js .queue-flat, html.st-fail .queue-flat { display: none; }
html:not(.st-on) .sc-5 .cap, html:not(.st-on) .sc-6 .cap { margin-top: 0; }
html:not(.st-on) .cap--intro { margin-bottom: 20px; }
html:not(.st-on) .steps { display: grid; gap: 16px; }
html:not(.st-on) .draft { margin-top: 18px; }
html:not(.st-on) .c6__ov { margin-top: 8px; }
html:not(.st-on) .c6__s { margin-top: 6px; }
html:not(.st-on) .phone { position: relative; width: 393px; height: 852px; margin: 34px 0 calc(852px * -.28 + 10px) calc(50% - 196.5px); transform: scale(.72); transform-origin: 50% 0; }
html:not(.st-on) .phone__island { clip-path: inset(0 35px round 18.5px); }
html:not(.st-on) .c7__s { margin-top: 8px; }
html:not(.st-on) .c7__h { margin-top: 6px; }
html:not(.st-on) .lv__f { stroke-dasharray: none; }
html:not(.st-on) .lv__arr { transform: none; }
html:not(.st-on) .goring { display: none; }
html:not(.st-on) .c8 { padding-bottom: 8px; }
html:not(.st-on) .c8__ov { margin-bottom: 4px; }
html:not(.st-on) .go { box-shadow: 0 0 0 2.5px var(--lemon); border-radius: 999px; padding: 0 .18em; }
html:not(.st-on) .sdoor--9 { margin-bottom: 24px; }
html:not(.st-on) .c9__h { font-size: clamp(34px, 9vw, 64px); }
html:not(.st-on) .c9__ov { margin-bottom: 8px; }
html:not(.st-on) .c9__card { margin-top: 22px; }
html:not(.st-on) .sc-9 { padding-bottom: 110px; }
html:not(.st-on) .phone__fb { border-radius: 55px; }
@media (min-width: 760px) {
  html:not(.st-on) .levers { grid-template-columns: 1fr 1fr; }
  html:not(.st-on) .c9__btns { grid-template-columns: repeat(4, 1fr); }
  html:not(.st-on) .sc-1 { max-width: 960px; }
  html:not(.st-on) .hero { aspect-ratio: 16 / 9; border-radius: 20px; margin: 24px 0 0; }
  html:not(.st-on) .c1 { margin-top: -220px; padding-left: 32px; }
  html:not(.st-on) .hero__scrim {
    background:
      linear-gradient(180deg, rgba(11, 12, 11, .45) 0, rgba(11, 12, 11, 0) 24%),
      linear-gradient(0deg, var(--ground) 0, rgba(11, 12, 11, .94) 24%, rgba(11, 12, 11, .88) 42%, rgba(11, 12, 11, .55) 54%, rgba(11, 12, 11, 0) 68%);
  }
}