/* DO NOT PRESS — one button, five stages of grief.
   Tokens are re-graded per stage by body[data-grade]; the 3D world reads the same palette. */
:root {
  --ground: #ECE6DA; --ink: #16130F; --muted: #5E574D; --accent: #E8431A; --line: rgba(22, 19, 15, .16);
  --display: 'Anybody', 'Arial Narrow', sans-serif;
  --serif: 'Instrument Serif', 'Times New Roman', serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --expo: cubic-bezier(.16, 1, .3, 1);
  --inout: cubic-bezier(.77, 0, .175, 1);
  --gutter: clamp(16px, 3.2vw, 44px);
  color-scheme: light;
}
body[data-grade="vhs"]    { --ground: #DDE3DF; --ink: #121719; --muted: #4B575A; --accent: #E8431A; --line: rgba(18, 23, 25, .18); }
body[data-grade="blood"]  { --ground: #170403; --ink: #FFE9E1; --muted: #CFA296; --accent: #FF3B1F; --line: rgba(255, 233, 225, .16); }
body[data-grade="felt"]   { --ground: #0C2B20; --ink: #F6ECD2; --muted: #C3B792; --accent: #F2C14E; --line: rgba(246, 236, 210, .16); }
body[data-grade="slate"]  { --ground: #1A2130; --ink: #C9D1DE; --muted: #909BAD; --accent: #8C98AE; --line: rgba(201, 209, 222, .14); }
body[data-grade="white"]  { --ground: #F7F5F0; --ink: #1B1A18; --muted: #5F5B55; --accent: #E8431A; --line: rgba(27, 26, 24, .14); }
body[data-grade="cosmos"] { --ground: #05040A; --ink: #F5EFE6; --muted: #A89F95; --accent: #FFB36B; --line: rgba(245, 239, 230, .14); }
body[data-grade="void"]   { --ground: #000; --ink: #EDEDED; --muted: #9A9A9A; --accent: #EDEDED; --line: rgba(255, 255, 255, .12); }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
html { background: var(--ground); -webkit-text-size-adjust: 100%; }
body {
  background: var(--ground); color: var(--ink); font-family: var(--serif);
  overflow: hidden; overscroll-behavior: none; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  transition: background-color .5s var(--inout), color .5s var(--inout);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.mono { font-family: var(--mono); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }

#world { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
html.no-webgl #world { display: none; }
#grain {
  position: fixed; inset: -50%; z-index: 40; pointer-events: none; opacity: .07; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(6) infinite;
}
body[data-grade="blood"] #grain, body[data-grade="slate"] #grain, body[data-grade="cosmos"] #grain, body[data-grade="felt"] #grain, body[data-grade="void"] #grain { mix-blend-mode: screen; opacity: .05; filter: invert(1); }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -4%); } 60% { transform: translate(-4%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }

/* ---------- HUD: the instrument frame ---------- */
.hud { position: fixed; left: 0; right: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: var(--gutter); pointer-events: none; transition: opacity .4s var(--expo), transform .6s var(--expo); }
.hud > * { pointer-events: auto; }
.hud-top { top: 0; padding-top: max(var(--gutter), env(safe-area-inset-top)); }
.hud-bottom { bottom: 0; align-items: flex-end; padding-bottom: max(var(--gutter), env(safe-area-inset-bottom)); }
body.hud-hidden .hud { opacity: 0; pointer-events: none; }
body.hud-hidden .hud > * { pointer-events: none; }
.lbl { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: 15px; letter-spacing: -.01em; text-transform: uppercase; }
.mark { width: 26px; height: 26px; flex: none; }
.mark-plate { fill: var(--ink); }
.mark-ring { fill: none; stroke: var(--ground); stroke-width: 1.2; opacity: .5; }
.mark-cap { fill: var(--accent); }
body[data-grade="slate"] .mark-cap, body[data-grade="void"] .mark-cap { fill: var(--ground); stroke: var(--ink); stroke-width: 1.5; }
.stage { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; display: flex; gap: .9em; align-items: baseline; position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.stage b { font-weight: 500; color: var(--ink); }
.stage #stage-name { color: var(--ink); }
.mute { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; background: transparent; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; color: var(--ink); transition: transform .12s var(--expo), border-color .3s; }
.mute:active { transform: scale(.96); }
@media (hover: hover) { .mute:hover { border-color: var(--ink); } }
.eq { display: inline-flex; gap: 2px; align-items: flex-end; height: 12px; }
.eq i { width: 2px; height: 3px; background: currentColor; border-radius: 1px; }
body.sound-on .eq i { animation: eq .9s ease-in-out infinite; }
body.sound-on .eq i:nth-child(2) { animation-delay: -.3s; } body.sound-on .eq i:nth-child(3) { animation-delay: -.6s; } body.sound-on .eq i:nth-child(4) { animation-delay: -.15s; }
@keyframes eq { 0%, 100% { height: 3px; } 50% { height: 12px; } }

.odo { display: grid; gap: 4px; }
.digits { display: flex; font-family: var(--display); font-weight: 900; font-stretch: 62%; font-size: clamp(40px, 5vw, 64px); line-height: .9; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.digits .d { display: inline-block; height: .92em; overflow: hidden; width: .56em; text-align: center; padding-bottom: .02em; }
.digits .d i { display: block; font-style: normal; transition: transform .5s var(--expo); }
.odo-note { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); min-height: 1.2em; }
.readouts { display: grid; grid-template-columns: repeat(4, auto); gap: 6px 24px; margin: 0; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; text-align: right; }
.readouts dt { color: var(--muted); }
.readouts dd { margin: 2px 0 0; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- The narrator: the page's own voice ---------- */
#stage-main { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.narr { position: absolute; left: 50%; top: clamp(76px, 13.5vh, 150px); transform: translateX(-50%); width: min(92vw, 1180px); text-align: center; transition: opacity .35s var(--expo), transform .6s var(--expo); }
.narr::before { content: ''; position: absolute; inset: -40% -8%; z-index: -1; background: radial-gradient(closest-side, color-mix(in srgb, var(--ground) 82%, transparent), transparent); pointer-events: none; }
.rule { margin: 0 auto; font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 6.1vw, 100px); line-height: .96; letter-spacing: -.02em; text-wrap: balance; max-width: 15ch; transition: font-size .5s var(--expo); }
.rule .ch { display: inline-block; white-space: pre; }
.sub { margin: 18px auto 0; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); max-width: 60ch; min-height: 1.3em; }
body[data-voice="shout"] .rule { font-family: var(--display); font-weight: 900; font-stretch: 128%; text-transform: uppercase; letter-spacing: -.035em; line-height: .86; font-size: clamp(36px, 6.6vw, 118px); max-width: 13ch; }
body[data-voice="lower"] .rule { font-style: italic; text-transform: lowercase; font-size: clamp(32px, 4.6vw, 76px); max-width: 18ch; }
body[data-voice="mono"] .rule { font-family: var(--mono); font-weight: 500; text-transform: uppercase; letter-spacing: .02em; line-height: 1.12; font-size: clamp(18px, 2.3vw, 32px); max-width: 30ch; }
body[data-voice="tiny"] .rule { font-size: 11px; letter-spacing: 0; }
body[data-voice="tiny"] .sub { font-size: 8px; }
.narr.quiet { opacity: 0; transform: translateX(-50%) translateY(-12px); }

/* ---------- The button: a real <button> laid over the 3D one ---------- */
#the-button {
  position: fixed; left: 50%; top: 62%; width: 200px; height: 200px; margin: 0; padding: 0; z-index: 12;
  border: 0; border-radius: 50%; background: transparent; cursor: pointer; pointer-events: auto;
  transform: translate(-50%, -50%); touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
#the-button:focus-visible { outline-offset: 10px; }
#the-button.gone { visibility: hidden; pointer-events: none; }
#the-button .charge { position: absolute; inset: -14%; width: 128%; height: 128%; transform: rotate(-90deg); pointer-events: none; overflow: visible; }
#the-button .charge circle { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 295.3; stroke-dashoffset: 295.3; opacity: 0; transition: opacity .2s; }
#the-button.charging .charge circle { opacity: 1; }

/* The CSS-drawn button: the no-WebGL body, and the actor in DOM set pieces */
.css-btn { position: absolute; inset: 0; display: none; }
html.no-webgl .css-btn, .css-btn.show { display: block; }
.css-plate { position: absolute; inset: 4%; border-radius: 18%; background: linear-gradient(160deg, #3a3731, #1c1a17 70%); box-shadow: 0 18px 40px -12px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.12); }
.css-cap { position: absolute; inset: 21%; border-radius: 50%; background: radial-gradient(circle at 36% 30%, #ffb199 0 6%, #ff6a3d 18%, #e8431a 48%, #9c2208 100%); box-shadow: 0 10px 0 -2px #7a1a06, 0 16px 22px -6px rgba(0,0,0,.6), inset 0 -8px 14px rgba(80,10,0,.45); transition: transform .09s var(--expo), box-shadow .09s var(--expo); }
html.no-webgl #the-button:active .css-cap, .css-btn.pressed .css-cap { transform: translateY(8%); box-shadow: 0 3px 0 -2px #7a1a06, 0 6px 10px -4px rgba(0,0,0,.6), inset 0 -4px 10px rgba(80,10,0,.45); }

/* ---------- Cursor: the button's cap, following you ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; display: none; mix-blend-mode: difference; color: #fff; }
.cursor i { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border: 1.5px solid #fff; border-radius: 50%; transition: width .35s var(--expo), height .35s var(--expo), left .35s var(--expo), top .35s var(--expo), background-color .2s; }
.cursor-lbl { position: absolute; left: 22px; top: -7px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .35s var(--expo); }
.cursor.on-btn i { left: -26px; top: -26px; width: 52px; height: 52px; }
.cursor.on-btn .cursor-lbl { opacity: 1; transform: none; left: 36px; }
.cursor.down i { background: #fff; }
@media (hover: hover) and (pointer: fine) {
  body.own-cursor, body.own-cursor * { cursor: none !important; }
  body.own-cursor .cursor { display: block; }
}

/* ---------- Slam titles ---------- */
#slam { position: fixed; inset: 0; z-index: 60; pointer-events: none; display: grid; place-items: center; overflow: hidden; }
.slam-word { grid-area: 1 / 1; font-family: var(--display); font-weight: 900; font-stretch: 150%; text-transform: uppercase; line-height: .8; letter-spacing: -.045em; color: var(--ink); white-space: nowrap; padding: .06em .04em .1em; will-change: transform, filter, opacity; }
.slam-word.inv { background: var(--ink); color: var(--ground); }

/* ---------- Iris wipe: a cap-shaped circle out of the press point ---------- */
#wipe { position: fixed; inset: 0; z-index: 70; pointer-events: none; clip-path: circle(0 at 50% 50%); background: var(--wipe, #000); }

/* ---------- Set-piece overlays ---------- */
#fx { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
#fx > * { pointer-events: auto; }
#fx > .passive { pointer-events: none; }
.float-txt.on-red { color: #fff; font-family: var(--display); font-weight: 900; font-stretch: 120%; letter-spacing: -.01em; }
.float-txt { position: fixed; z-index: 55; font-family: var(--mono); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); pointer-events: none; white-space: nowrap; }

/* Shatter */
.shards { position: fixed; inset: 0; perspective: 1100px; pointer-events: none !important; background: #000; }
.shard { position: absolute; inset: 0; background-size: 100% 100%; will-change: transform; backface-visibility: hidden; }
.cracks { position: absolute; inset: 0; width: 100%; height: 100%; }
.cracks path { fill: none; stroke: rgba(255,255,255,.95); stroke-width: 1.4; stroke-linecap: round; }

/* Fake 404 (a deliberately default page) */
.fake404 { position: fixed; inset: 0; background: #fff; color: #000; font-family: 'Times New Roman', Times, serif; padding: 8px 16px; font-size: 16px; line-height: 1.25; cursor: default; }
.fake404 h1 { font-size: 32px; font-weight: bold; margin: 21px 0; }
.fake404 hr { border: 0; border-top: 1px solid #aaa; margin: 16px 0; }
.fake404 address { font-style: italic; }
.peek { position: fixed; width: 150px; height: 150px; right: -40px; bottom: -40px; transform: rotate(-24deg) translate(40px, 40px); transition: transform .9s var(--expo); border: 0; background: transparent; padding: 0; cursor: pointer; }
.peek .css-btn { display: block; }
.peek.out { transform: rotate(-24deg) translate(0, 0); }

/* Magritte */
.magritte { position: fixed; pointer-events: none !important; }
.magritte .frame { position: absolute; inset: 0; border: 22px solid; border-image: linear-gradient(135deg, #8a6424, #f3d27a 18%, #9b7128 34%, #f6dc8e 52%, #7c5a1f 70%, #e8c46a 86%, #6a4b18) 1; box-shadow: 0 30px 60px -20px rgba(0,0,0,.5), inset 0 0 0 6px rgba(60,40,10,.4), inset 0 0 40px rgba(0,0,0,.25); opacity: 0; transform: scale(1.12); transition: opacity .6s var(--expo), transform .9s var(--expo); }
.magritte.on .frame { opacity: 1; transform: none; }
.magritte figcaption { position: absolute; left: 50%; top: calc(100% + 16px); transform: translateX(-50%); white-space: nowrap; padding: 10px 16px 12px; background: #f6f1e4; color: #1b1a18; box-shadow: 0 10px 24px -12px rgba(0,0,0,.5); text-align: left; font-family: var(--serif); font-style: italic; font-size: clamp(18px, 2vw, 28px); line-height: 1.1; opacity: 0; transition: opacity .8s .4s; }
.magritte figcaption small { display: block; margin-top: 4px; font-family: var(--mono); font-style: normal; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #5f5b55; }
.magritte.on figcaption { opacity: 1; }

/* Decoys */
.decoys { position: fixed; inset: 0; display: grid; place-content: start center; gap: clamp(6px, 1.2vw, 14px); padding: 90px var(--gutter) 130px; }
.decoy { width: var(--s); height: var(--s); padding: 0; border: 0; background: transparent; cursor: pointer; position: relative; transform: scale(0); transition: transform .5s var(--expo); }
.decoy .css-btn { display: block; }
.decoy.in { transform: scale(1); }
.decoy.pop { transform: scale(0) rotate(40deg); transition-duration: .25s; }
.decoy.real.hint .css-cap { animation: hint .5s ease-in-out infinite alternate; }
@keyframes hint { to { filter: brightness(1.5); } }

/* Bargaining: marquee bulbs */
.bulbs { position: fixed; inset: 10px; pointer-events: none !important; border-radius: 18px; }
.bulbs i { position: absolute; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: #f2c14e; box-shadow: 0 0 12px 2px rgba(242,193,78,.7); opacity: .25; }
.bulbs i.lit { opacity: 1; }

/* Slot machine */
.slots { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.9); opacity: 0; transition: opacity .4s, transform .6s var(--expo); display: grid; gap: 14px; justify-items: center; padding: 22px; border-radius: 22px; background: linear-gradient(180deg, #2b1d0e, #140c05); box-shadow: 0 0 0 2px #f2c14e, 0 0 0 8px #3a2710, 0 40px 90px -20px #000; pointer-events: none !important; }
.slots.in { opacity: 1; transform: translate(-50%, -50%); }
.slots .reels { display: flex; gap: 10px; }
.reel { width: clamp(96px, 17vw, 210px); height: 72px; overflow: hidden; background: linear-gradient(#e9dfc6, #fff8e6 40%, #fff8e6 60%, #e9dfc6); border-radius: 10px; box-shadow: inset 0 8px 14px rgba(0,0,0,.35), inset 0 -8px 14px rgba(0,0,0,.35); position: relative; }
.reel ul { list-style: none; margin: 0; padding: 0; will-change: transform; }
.reel li { height: 72px; display: grid; place-items: center; font-family: var(--display); font-weight: 900; font-stretch: 80%; font-size: clamp(14px, 1.8vw, 22px); letter-spacing: .01em; color: #1c1206; text-align: center; line-height: 1; padding: 0 6px; text-transform: uppercase; }
.slots .label { font-family: var(--mono); font-size: 11px; letter-spacing: .24em; color: #f2c14e; text-transform: uppercase; }

/* Cookie banner parody */
.cookie { position: fixed; left: 50%; bottom: 22px; width: min(720px, calc(100vw - 32px)); transform: translate(-50%, 140%); transition: transform .7s var(--expo); background: #fffdf8; color: #1b1a18; border-radius: 16px; padding: 20px 22px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.55); font-family: var(--mono); font-size: 13px; line-height: 1.5; z-index: 2; }
.cookie.in { transform: translate(-50%, 0); }
.cookie h3 { margin: 0 0 6px; font-family: var(--display); font-weight: 800; font-stretch: 110%; font-size: 18px; letter-spacing: -.01em; }
.cookie p { margin: 0 0 14px; color: #3d3a35; }
.cookie .row { display: flex; flex-wrap: wrap; gap: 8px; }
.cookie button, .modal button, .alts button { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid #1b1a18; background: #fffdf8; color: #1b1a18; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: transform .1s var(--expo); }
.cookie button:active, .modal button:active, .alts button:active { transform: scale(.96); }
.cookie button.primary, .modal button.primary { background: #1b1a18; color: #fffdf8; }
.cookie .prefs { display: grid; gap: 8px; margin: 0 0 14px; }
.cookie .prefs[hidden] { display: none; }
.cookie .prefs label { display: flex; gap: 10px; align-items: center; }
.cookie .prefs input { width: 18px; height: 18px; accent-color: #1b1a18; }

/* Contract */
.contract { position: fixed; left: 50%; top: 50%; width: min(560px, calc(100vw - 32px)); max-height: calc(100svh - 150px); overflow: auto; transform: translate(-50%, -40%) rotate(-2deg); opacity: 0; transition: transform .8s var(--expo), opacity .4s; background: #fbf7ec; color: #1b1a18; padding: 28px 30px 24px; box-shadow: 0 40px 90px -30px rgba(0,0,0,.6), 0 1px 0 #fff inset; font-family: var(--serif); font-size: 17px; line-height: 1.4; }
.contract.in { transform: translate(-50%, -50%) rotate(-1deg); opacity: 1; }
.contract h2 { margin: 0 0 4px; font-family: var(--display); font-weight: 900; font-stretch: 70%; font-size: 30px; letter-spacing: -.01em; text-transform: uppercase; }
.contract .meta { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #5f5b55; margin-bottom: 14px; }
.contract ol { margin: 0 0 16px; padding-left: 1.3em; }
.contract li { margin: 0 0 6px; }
.contract .sig { position: relative; border-bottom: 1.5px solid #1b1a18; height: 92px; touch-action: none; cursor: crosshair; }
.contract .sig canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.contract .sig span { position: absolute; left: 0; bottom: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #6d675e; pointer-events: none; }
.stamp { position: fixed; left: 50%; top: 50%; z-index: 3; font-family: var(--display); font-weight: 900; font-stretch: 120%; text-transform: uppercase; color: #d6230f; border: .09em solid currentColor; padding: .08em .22em .12em; border-radius: .08em; line-height: .9; letter-spacing: -.02em; transform: translate(-50%, -50%) rotate(-12deg) scale(2.2); opacity: 0; mix-blend-mode: multiply; pointer-events: none !important; white-space: nowrap; }
.stamp.hit { animation: stamp .42s var(--expo) forwards; }
@keyframes stamp { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(-12deg) scale(2.2); } 60% { opacity: .95; transform: translate(-50%, -50%) rotate(-9deg) scale(.96); } 100% { opacity: .9; transform: translate(-50%, -50%) rotate(-9deg) scale(1); } }

/* Alternative buttons */
.alts { position: fixed; left: 50%; bottom: clamp(110px, 17vh, 170px); transform: translateX(-50%); display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: min(900px, calc(100vw - 32px)); }
.alts button { background: var(--ground); color: var(--ink); border-color: var(--ink); opacity: 0; transform: translateY(30px); transition: opacity .4s, transform .6s var(--expo); }
.alts button.in { opacity: 1; transform: none; }
.mega { position: fixed; left: 50%; bottom: 0; width: 150vmax; height: 150vmax; transform: translate(-50%, 100%); transition: transform 1.1s var(--expo); pointer-events: none !important; }
.mega .css-btn { display: block; }
.mega.in { transform: translate(-50%, 45%); }

/* Premium modal */
.modal-wrap { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(5, 12, 9, .55); opacity: 0; transition: opacity .35s; padding: 16px; }
.modal-wrap.in { opacity: 1; }
.modal { width: min(440px, 100%); background: #fffdf8; color: #1b1a18; border-radius: 20px; padding: 26px 26px 22px; box-shadow: 0 40px 100px -30px #000; transform: translateY(20px) scale(.97); transition: transform .6s var(--expo); font-family: var(--mono); font-size: 13px; line-height: 1.5; }
.modal-wrap.in .modal { transform: none; }
.modal .tag { display: inline-block; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; background: #f2c14e; padding: 3px 8px; border-radius: 4px; }
.modal h3 { font-family: var(--display); font-weight: 900; font-stretch: 120%; font-size: 36px; line-height: .9; letter-spacing: -.03em; margin: 12px 0 8px; text-transform: uppercase; }
.modal .price { font-family: var(--display); font-weight: 800; font-size: 26px; margin: 10px 0 2px; }
.modal ul { padding-left: 1.1em; margin: 10px 0 18px; color: #3d3a35; }
.modal .row { display: flex; gap: 8px; flex-wrap: wrap; }
.spinner { width: 64px; height: 64px; position: relative; margin: 10px auto; }
.spinner i { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: #e8431a; box-shadow: 0 2px 0 #7a1a06; }

/* The fall: the page below the page */
.fall { position: fixed; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; background: var(--ground); transform: translateY(100%); transition: transform 1s var(--inout); scrollbar-width: none; }
.fall::-webkit-scrollbar { display: none; }
.fall.in { transform: none; }
.fall.up { transform: translateY(-100%); transition-duration: .9s; }
.stratum { min-height: 120svh; position: relative; padding: 120px var(--gutter) 60px; overflow: hidden; }
.stratum .depth { position: sticky; top: 90px; font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.stratum h2 { font-family: var(--display); font-weight: 900; font-stretch: 140%; text-transform: uppercase; font-size: clamp(44px, 10vw, 180px); line-height: .84; letter-spacing: -.045em; margin: 40px 0 18px; padding-bottom: .06em; }
.stratum p.say { font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2.6vw, 38px); margin: 0; max-width: 24ch; }
.s-fold { background: var(--ground); }
.s-footer { background: #111; color: #cfcac2; }
.s-footer .fakefoot { display: flex; flex-wrap: wrap; gap: 10px 28px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; margin-top: 30px; color: #cfcac2; border-top: 1px solid #333; padding-top: 18px; }
.s-source { background: #0b0d10; color: #9fb3c8; }
.s-source pre { font-family: var(--mono); font-size: 11px; line-height: 1.45; margin: 30px 0 0; white-space: pre-wrap; word-break: break-all; column-width: 340px; column-gap: 28px; color: #7f95ab; }
.s-source pre b { color: #ffb36b; font-weight: 500; }
.s-css { background: #10141a; color: #d6dde6; }
.s-css pre { font-family: var(--mono); font-size: clamp(14px, 1.6vw, 20px); line-height: 1.5; white-space: pre-wrap; color: #8d9aab; margin: 30px 0 0; }
.s-css pre mark { background: #e8431a; color: #fff; }
.s-binary { background: #050607; color: #2f7d5a; }
.s-binary .bits { font-family: var(--mono); font-size: clamp(12px, 1.3vw, 16px); line-height: 1.6; letter-spacing: .12em; word-break: break-all; margin-top: 30px; color: #3fbf86; }
.s-sea { background: linear-gradient(#06131f, #020608); color: #9dc3d6; }
.s-sea .cable { position: absolute; left: -10%; right: -10%; bottom: 18%; height: 34px; border-radius: 20px; background: linear-gradient(#2c3238, #0d1013 70%); box-shadow: 0 -2px 0 #4b545c inset, 0 20px 40px #000; transform: rotate(-3deg); }
.s-sea .pulse { position: absolute; top: 12px; height: 8px; width: 90px; border-radius: 4px; background: #9df5ff; box-shadow: 0 0 20px 4px #5fe0ff; animation: pulse 2.4s linear infinite; }
@keyframes pulse { from { left: -10%; } to { left: 110%; } }
.s-bottom { background: #020304; color: #8e99ab; min-height: 100svh; display: grid; place-items: center; text-align: center; }
.s-bottom .lying { width: min(220px, 50vw); height: min(220px, 50vw); position: relative; margin: 30px auto; transform: rotate(78deg); border: 0; background: transparent; padding: 0; cursor: pointer; filter: saturate(.3) brightness(.7); transition: filter .6s; }
.s-bottom .lying .css-btn { display: block; }
.s-bottom .lying:hover, .s-bottom .lying:focus-visible { filter: none; }
.meter { position: fixed; right: var(--gutter); top: 50%; transform: translateY(-50%); z-index: 2; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #fff; mix-blend-mode: difference; text-align: right; pointer-events: none; }
.meter b { display: block; font-family: var(--display); font-weight: 900; font-stretch: 60%; font-size: 40px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.fall-hint { position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%); font-family: var(--mono); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: #fff; mix-blend-mode: difference; pointer-events: none; animation: bob 1.4s ease-in-out infinite; z-index: 2; }
@keyframes bob { 50% { transform: translate(-50%, 8px); } }

/* Report card, Zzz, breathing ring, blackout */
.report { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(520px, calc(100vw - 32px)); font-family: var(--mono); font-size: clamp(13px, 1.4vw, 16px); line-height: 1.7; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); background: color-mix(in srgb, var(--ground) 90%, transparent); padding: 22px 24px; border: 1px solid var(--line); pointer-events: none !important; white-space: pre-wrap; }
.zzz { position: fixed; font-family: var(--display); font-weight: 800; color: var(--ink); pointer-events: none !important; will-change: transform, opacity; }
.breath { position: fixed; border-radius: 50%; border: 1.5px solid var(--ink); pointer-events: none !important; opacity: .5; }
.blackout { position: fixed; inset: 0; background: #000; opacity: 0; transition: opacity .5s; display: grid; place-items: center; pointer-events: none !important; }
.blackout.in { opacity: 1; }
.blackout .caret { width: 14px; height: 30px; background: #ededed; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.droste { position: fixed; inset: 0; overflow: hidden; pointer-events: none !important; background: #000; }
.droste img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; will-change: transform; }
.ghost { position: fixed; left: 0; top: 0; width: 26px; height: 34px; z-index: 95; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.vcr { position: fixed; left: var(--gutter); top: 80px; font-family: var(--mono); font-weight: 500; font-size: clamp(26px, 3.4vw, 48px); letter-spacing: .08em; color: #fff; text-shadow: 3px 3px 0 rgba(0,0,0,.6), -2px 0 #f0f, 2px 0 #0ff; pointer-events: none !important; }
.finale-txt::before { content: ''; position: absolute; inset: -60% -20%; z-index: -1; background: radial-gradient(closest-side, rgba(5,4,10,.82), rgba(5,4,10,.5) 55%, transparent); }
.finale-txt { text-shadow: 0 2px 24px rgba(5,4,10,.9); position: fixed; left: 50%; top: 16%; transform: translateX(-50%); width: min(92vw, 1000px); text-align: center; font-family: var(--serif); font-size: clamp(30px, 4.6vw, 76px); line-height: 1; letter-spacing: -.02em; color: #f5efe6; opacity: 0; transition: opacity 1.4s; pointer-events: none !important; text-wrap: balance; }
.finale-txt.in { opacity: 1; }
.finale-txt small { display: block; margin-top: 18px; font-family: var(--mono); font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: #a89f95; }

/* ---------- Phones and short screens ---------- */
@media (max-width: 760px) {
  .stage { position: static; transform: none; order: 3; width: 100%; justify-content: center; font-size: 10px; }
  .hud-top { flex-wrap: wrap; row-gap: 6px; }
  .brand-word { font-size: 13px; }
  .readouts { grid-template-columns: repeat(2, auto); gap: 4px 16px; font-size: 10px; }
  .readouts .r-local { display: none; }
  .narr { top: 104px; }
  .sub { font-size: 11px; letter-spacing: .14em; }
}
@media (max-height: 560px) {
  .narr { top: 64px; }
  .rule { font-size: clamp(28px, 7.2vh, 60px); }
  .digits { font-size: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  #grain { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
.noscript { position: fixed; inset: 0; display: grid; place-items: center; font-size: 28px; padding: 24px; text-align: center; }