:root {
  --figma-light-blue: radial-gradient(76.42% 95.44% at 0% 100%, #ffffff 0%, #d0e8ff 100%);
  --ink: #140d34;
  --night: #1a1640;
  --paper: #fff4e8;
  --violet: #6a5aa6;
  --blue: #405dff;
  --cyan: #18c8ff;
  --magenta: #ff2f8e;
  --mono: "JetBrains Mono", "Cascadia Code", Consolas, monospace;
}
* { box-sizing: border-box; }
html { background: var(--night); }
body { margin: 0; color: var(--paper); font-family: var(--mono); overflow-x: hidden; }

#scene { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; display: block; z-index: 0; }
.track { position: relative; z-index: 1; pointer-events: none; }
.chapter { height: 140vh; }
.chapter[data-chapter="screen"] { height: 60vh; }
.chapter[data-chapter="hold"] { height: 40vh; }
.chapter[data-chapter="modern"] { height: 220vh; }
.chapter[data-chapter="tech"] { height: 80vh; }
.chapter[data-chapter="push"] { height: 70vh; }
.chapter[data-chapter="os"] { height: 100vh; }
.chapter[data-chapter="dialogs"] { height: 90vh; }
.chapter[data-chapter="exit"] { height: 70vh; }
/* vh timeline: screen 0–60, room –200, hold –240, modern –460, tech –540, push –610, os –710, dialogs –800, exit –870, end */
.chapter.end .outro { display: grid; justify-items: center; gap: 26px; pointer-events: auto; }
.replay { font: 400 20px/1 "Inter", "Segoe UI", sans-serif; color: #fff; background: #0a8cff; border: 0; border-radius: 60px; padding: 18px 30px; cursor: pointer;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .14); opacity: 0; transition: opacity .6s; }
body.at-end .replay { opacity: 1; }
.chapter.end { height: 50vh; }   /* the story ends at 830vh on the wide shot with the page peeking 10% from below (content starts at 920vh) */
.chapter.end p { font: 850 clamp(40px, 5vw, 84px)/.9 "Coolvetica HC", "Arial Narrow", sans-serif; text-transform: uppercase; text-align: center; margin: 0;
  text-shadow: 0 2px 24px rgba(10, 6, 40, .6); opacity: 0; transition: opacity .6s; }
.chapter.end p span { display: block; margin-top: 14px; font: 400 16px/1.3 "Inter", sans-serif; letter-spacing: .04em; text-transform: none; text-shadow: none; opacity: .7; }
body.at-end .chapter.end p { opacity: 1; }

/* ---------- monitor glass content ---------- */
.screen { position: fixed; left: 0; top: 0; width: 800px; height: 600px; transform-origin: 0 0; z-index: 2;
  pointer-events: none; color: #e9e4ff; visibility: hidden; text-shadow: 0 0 14px rgba(140, 160, 255, .55), 0 0 2px rgba(200, 210, 255, .6); }
.screen-inner { position: absolute; inset: 0; padding: 56px 64px; display: flex; flex-direction: column; justify-content: center;
  background: radial-gradient(120% 90% at 50% 45%, rgba(64,93,255,.10), transparent 70%); }
.screen-logo { width: 150px; height: auto; image-rendering: pixelated; margin-bottom: 18px; }
.prompt { margin: 0 0 18px; font-size: 18px; opacity: .75; }
.screen-title { font: 800 52px/1.12 var(--mono); margin: 0; letter-spacing: -.02em; }
.screen-title em { font-style: normal; color: #a9b4ff; }
.caret { animation: blink 1s steps(1) infinite; color: #a9b4ff; }
.screen-sub { margin: 26px 0 0; font-size: 14px; letter-spacing: .12em; opacity: .5; }
.screen::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,.18) 0 2px, transparent 2px 4px); mix-blend-mode: multiply; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- wall headline ---------- */
/* wall headlines: real text, positioned by html-text.js; font sizes come from the 3D wall (--big / --lead) */
.wall-copy { position: fixed; left: 0; top: 0; z-index: 1; margin: 0; text-align: center; white-space: nowrap; visibility: hidden;
  pointer-events: none; will-change: transform; transform: translate(-50%, -50%); }
.wall-copy.live { pointer-events: auto; }
.wall-copy .lead, .wall-copy .big { background: var(--figma-light-blue); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-font-smoothing: antialiased; user-select: text; cursor: text; }
.wall-copy .lead { font: 400 var(--lead, 30px)/1.2 "Inter", "Segoe UI", sans-serif; text-transform: uppercase; }
.wall-copy .big { font: 850 var(--big, 140px)/.86 "Coolvetica HC", "Arial Narrow", sans-serif; text-transform: uppercase; padding-top: .06em; }
.wall-copy > span { display: block; overflow: hidden; padding: 0 .12em .14em; }
.wall-copy > span:first-child { margin-bottom: -.1em; }
.wall-copy ::selection { background: #0a8cff; color: #fff; -webkit-text-fill-color: #fff; }
.wall-copy > span > span { display: block; transform: translateY(var(--rise, 110%)); will-change: transform; }

/* ---------- chrome ---------- */
.top { position: fixed; z-index: 8; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 14px; padding: 20px 28px; pointer-events: none; }
.brand { pointer-events: auto; display: block; width: 64px; }
.brand img { width: 100%; height: auto; display: block; }
.who { display: flex; flex-direction: column; font-size: 13px; line-height: 1.35; }
@media (max-width: 380px) { .who { font-size: 12px; } }
.who span { opacity: .72; }
.hint { position: fixed; z-index: 3; white-space: nowrap; left: 50%; bottom: 22px; transform: translateX(-50%); margin: 0; font-size: 13px; letter-spacing: .06em;
  padding: 10px 18px; border-radius: 99px; background: rgba(20,13,52,.55); backdrop-filter: blur(6px); transition: opacity .4s; }
body.scrolled .hint { opacity: 0; }

/* ---------- loader (Figma frame 2085661738): navy, soft glow that follows the cursor, huge Coolvetica percentage bottom-left */
.loader { position: fixed; inset: 0; z-index: 10; background: #051727; overflow: hidden; transition: opacity .7s ease, visibility .7s;
  --gx: 50%; --gy: 50%; }
.loader-glow { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle 30vw at var(--gx) var(--gy), rgba(208, 232, 255, .085), rgba(208, 232, 255, .03) 45%, transparent 70%); }
.loader-top { position: absolute; left: 2.5vw; right: 2.5vw; top: 2.6vw; display: flex; justify-content: space-between;
  font: 400 clamp(14px, 1.05vw, 20px)/1 "Inter", "Segoe UI", sans-serif; color: #e9f3ff; }
.loader-count { position: absolute; left: .4vw; bottom: -.11em; margin: 0; white-space: nowrap;
  font: 850 clamp(240px, 38vw, 740px)/.86 "Coolvetica HC", "Arial Narrow", sans-serif; letter-spacing: -.01em;
  background: radial-gradient(76.42% 95.44% at 0% 100%, #ffffff 0%, #d0e8ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.loader-count b { font-weight: inherit; font-variant-numeric: tabular-nums; }
body.ready .loader { opacity: 0; visibility: hidden; }
/* until the old PC is plugged in (main.js startConnect): no scrolling, no "scroll" hint, no browser touch gestures */
body.ready:not(.entered) { overflow: hidden; touch-action: none; }
body:not(.entered) .hint { opacity: 0 !important; }

@media (max-width: 700px) {
  .top { padding: 14px 16px; }
  .brand { width: 52px; }
  .hint { bottom: 16px; font-size: 12px; }
}
.reduce-motion .caret { animation: none; }


/* design stills */
[data-clean] .wall-copy, [data-clean] .top, [data-clean] .hint, [data-clean] .skip, [data-clean] .chapter.end p { display: none !important; }
[data-clean="all"] .screen { display: none !important; }

/* 3D pixel cursor (desktop) */
.has-3d-cursor, .has-3d-cursor * { cursor: none !important; }
.cursor-3d { position: fixed; left: 0; top: 0; width: 128px; height: 128px; z-index: 1000; pointer-events: none; opacity: 0; transition: opacity .2s; will-change: transform; }

@font-face { font-family: "Coolvetica HC"; src: url(assets/fonts/coolvetica-heavy-compressed.otf) format("opentype"); font-weight: 850; font-display: block; }
/* Inter (SIL Open Font License, assets/fonts/inter/OFL.txt) — the open replacement for SF Pro in all small text */
@font-face { font-family: "Inter"; src: url(assets/fonts/inter/inter-latin-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-display: block; 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"; src: url(assets/fonts/inter/inter-latin-ext-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-display: block; 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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Inter"; src: url(assets/fonts/inter/inter-cyrillic-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-display: block; unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Inter"; src: url(assets/fonts/inter/inter-cyrillic-ext-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-display: block; unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* phones: the wall headlines use the same sizes as the page below (headline 23vw, text 18 px) and may wrap */
@media (max-width: 800px) {
  .wall-copy { white-space: normal; width: calc(100vw - 40px); }
  .wall-copy .big { font-size: 21vw !important; line-height: .86; white-space: nowrap; }   /* one line, clear of the computer */
  .wall-copy .lead { font-size: 18px !important; line-height: 1.3; }
}
/* viewport-fit=cover: the page runs under the phone's status bar and home bar — keep the chrome clear of them */
.top { padding-top: max(20px, env(safe-area-inset-top)); }
.hint { margin-bottom: env(safe-area-inset-bottom); }

/* music toggle in the header (music.js): four little bars dance while music plays, lie flat when it's off */
/* language switch (lang.js): shows the other language, same outline pill as the sound button */
.lng { pointer-events: auto; margin-left: auto; padding: 9px 12px; border: 1px solid currentColor; border-radius: 40px; background: none; color: inherit;
  font: 500 12px/1 var(--mono); letter-spacing: .08em; cursor: pointer; }
.lng:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.lng + .snd { margin-left: -6px; }                     /* 8 px between the two pills */
.snd { pointer-events: auto; margin-left: auto; display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border: 1px solid currentColor;
  border-radius: 40px; background: none; color: inherit; font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.snd-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.snd-bars i { width: 2px; height: 3px; background: currentColor; border-radius: 1px; transition: height .3s; }
.snd.on .snd-bars i { animation: snd-bar 1.1s ease-in-out infinite; }
.snd.on .snd-bars i:nth-child(2) { animation-delay: -.4s; } .snd.on .snd-bars i:nth-child(3) { animation-delay: -.8s; } .snd.on .snd-bars i:nth-child(4) { animation-delay: -.2s; }
@keyframes snd-bar { 0%, 100% { height: 3px; } 50% { height: 12px; } }
.snd:not(.on) .snd-t { text-decoration: line-through; text-decoration-thickness: 1px; }
.snd:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media (max-width: 800px) { .snd { padding: 9px 12px; } }
/* narrow phones (≤ 380 px): the name stays on one line — the sound button keeps only its dancing bars */
.who b { white-space: nowrap; }
@media (max-width: 380px) { .snd-t { display: none; } .snd { padding: 9px 11px; } .top { gap: 12px; } }

/* "Skip the story" (main.js): same glass pill as the hint, bottom-right; only during the story, after the PC is plugged in.
   Phones: bottom centre, once the hint has gone (after the first scroll) */
.skip { position: fixed; z-index: 4; right: 28px; bottom: 22px; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 10px 16px;
  border: 0; border-radius: 99px; background: rgba(20,13,52,.55); backdrop-filter: blur(6px); color: inherit; font: inherit; font-size: 13px;
  letter-spacing: .06em; cursor: pointer; transition: opacity .4s, background .25s; }
.skip:hover { background: rgba(31,82,246,.75); }
.skip:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
body:not(.entered) .skip, body.past-story .skip { opacity: 0; pointer-events: none; }
@media (max-width: 800px) {
  .skip { right: auto; left: 50%; bottom: 16px; transform: translateX(-50%); font-size: 12px; margin-bottom: env(safe-area-inset-bottom); }
  body:not(.scrolled) .skip { opacity: 0; pointer-events: none; }
}
.latch-ca{display:flex;align-items:center;gap:8px;padding:9px 12px;color:#e9eef7;background:#15191fd9;border:1px solid #ffffff30;border-radius:999px;font:11px/1.1 'JetBrains Mono',monospace;cursor:pointer;white-space:nowrap}.latch-ca:hover{border-color:#9bc7f7;color:#fff}.latch-ca:focus-visible{outline:2px solid #a9cfff;outline-offset:3px}.latch-ca-label{color:#9abde8}.latch-ca-action{color:#9abde8}.latch-ca-address{color:#e9eef7}@media(max-width:760px){.latch-ca{gap:5px;padding:8px;font-size:9px}.latch-ca-address{display:none}}