/* anything marked hidden is really gone – no layer may ever lie invisibly over the page */
[hidden] { display: none !important; }

:root {
  --fg: #16171a;
  --fg-dim: rgba(22, 23, 26, .35);
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: #ecebe7;
  color: var(--fg);
  font-family: var(--mono);
  touch-action: none;
  -webkit-font-smoothing: antialiased;
}

#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/* loader */
#loader {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background: #ecebe7; color: #16171a;
  font-size: 13px; letter-spacing: .08em;
  transition: opacity 1.2s ease;
  z-index: 10;
}
body.ready #loader { opacity: 0; pointer-events: none; }
.dots::after { content: ''; animation: dots 1.2s steps(4) infinite; }
@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }

/* AI line */
#line {
  position: fixed;
  left: 50%; bottom: 18vh;
  transform: translateX(-50%);
  width: min(90vw, 760px);
  text-align: center;
  font-size: clamp(15px, 2.1vw, 22px);
  letter-spacing: .02em;
  color: var(--fg);
  opacity: 0;
  transition: opacity .9s ease, color 1s ease;
  pointer-events: none;
}
#line.visible { opacity: 1; }
#line::after { content: '_'; animation: blink 1s steps(1) infinite; margin-left: 2px; }
@keyframes blink { 50% { opacity: 0; } }

/* scrollbar: shows where the camera is */
#bar {
  position: fixed; top: 16px; bottom: 16px; right: 10px;
  width: 2px;
  background: var(--fg-dim);
  opacity: .7;
}
#thumb, #ghost {
  position: absolute; left: -2px;
  width: 6px; height: 34px;
  margin-top: -17px;
}
#thumb { background: var(--fg); }
#ghost { border: 1px dashed var(--fg); opacity: .5; left: -6px; width: 14px; }

/* input log ("legacy input") */
#log {
  position: fixed; left: 16px; bottom: 16px;
  font-size: 11px; line-height: 1.6;
  color: var(--fg);
  pointer-events: none;
}
#log .row { opacity: .75; }
#log .row:nth-child(n+3) { opacity: .4; }
#log .delayed { opacity: .6; }
#log .reduced { opacity: .5; }
#log .inverted { color: #e0604a; }
#log .ignored { opacity: .3; text-decoration: line-through; }

/* debug hud */
#hud {
  position: fixed; top: 16px; left: 16px;
  font: 11px/1.55 var(--mono);
  color: var(--fg);
  opacity: .8;
  pointer-events: none;
  white-space: pre;
}

/* station title cards */
#station {
  position: fixed; left: 50%; top: 20vh;
  transform: translateX(-50%);
  text-align: center;
  color: var(--fg);
  opacity: 0;
  transition: opacity 1.4s ease;
  pointer-events: none;
}
#station.visible { opacity: 1; }
#station .year { display: block; font-size: clamp(20px, 3.4vw, 40px); letter-spacing: .3em; }
#station .sub { display: block; margin-top: 12px; font-size: clamp(13px, 1.5vw, 17px); letter-spacing: .08em; opacity: .7; }

/* system panels */
.panel {
  font: 11px/1.7 var(--mono);
  color: var(--fg);
  white-space: pre;
}
#enh, #profile {
  position: fixed; right: 28px;
  padding: 10px 14px;
  background: rgba(4, 5, 10, .55);
  backdrop-filter: blur(3px);
  pointer-events: none;
}
#enh { top: 16px; opacity: .85; }
#profile { top: 50%; transform: translateY(-50%); opacity: .9; }

#approve {
  position: fixed; left: 50%; top: 58vh; transform: translateX(-50%);
  font: 15px var(--mono); letter-spacing: .2em;
  color: #fff; background: transparent;
  border: 1px solid rgba(255, 255, 255, .6);
  padding: 14px 26px; cursor: pointer;
  box-shadow: 0 0 24px rgba(255, 220, 170, .25);
  animation: breathe 2.4s ease-in-out infinite;
}
#approve:hover { background: rgba(255, 255, 255, .08); }
#approve.pressed { background: #fff; color: #04050a; animation: none; }
@keyframes breathe { 50% { box-shadow: 0 0 40px rgba(255, 220, 170, .5); } }

/* riddle terminal */
#term {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(92vw, 520px);
  padding: 22px 24px 18px;
  background: rgba(4, 5, 10, .82);
  border: 1px solid rgba(232, 237, 242, .25);
  color: #e8edf2;
  font-size: 13px;
  white-space: normal;
  backdrop-filter: blur(4px);
}
#term pre { font: inherit; white-space: pre-wrap; margin: 0; min-height: 1.7em; }
#term form { margin-top: 14px; }
#term input {
  font: inherit; color: inherit; background: transparent;
  border: 0; border-bottom: 1px solid rgba(232, 237, 242, .4);
  width: 70%; outline: none; text-transform: uppercase; letter-spacing: .1em;
}
#term .out { margin-top: 12px; color: #ffd9a8; letter-spacing: .08em; }
#term .out.error { color: #e0604a; letter-spacing: 0; }
#term .close {
  position: absolute; top: 6px; right: 10px;
  background: none; border: 0; color: inherit; font-size: 18px; cursor: pointer; opacity: .6;
}
#manual { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); letter-spacing: .2em; color: #ffd9a8; pointer-events: none; }
#log .held { opacity: .5; font-style: italic; }

@media (max-width: 760px) {
  #enh, #profile { font-size: 9.5px; right: 14px; }
  #profile { top: 128px; transform: none; }
  #station .year { letter-spacing: .14em; white-space: nowrap; font-size: 19px; }
  #station { width: calc(100vw - 32px); top: 14vh; }
}

body.ended #bar { opacity: 0; transition: opacity 3s ease; }

/* fallbacks: the page must never stay empty */
.fallback {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  padding: 24px; text-align: center;
  background: #ecebe7; color: #16171a;
  font-size: 14px;
}
.fallback.webgl { display: none; }
body.no-webgl .fallback.webgl { display: grid; }

/* ---------- Act 5: corridor, FYI, detached scrollbar, legacy input ---------- */
#fyi {
  position: fixed; top: 16px; right: 28px;
  padding: 10px 14px;
  background: rgba(4, 5, 10, .55);
  pointer-events: none; opacity: .85;
}
#bar { transition: right 2.5s ease, opacity 2.5s ease; }
#bar.detached { right: 34px; opacity: .45; }
#log .legacy { opacity: .35; text-decoration: line-through; color: #8a8f96; }
body.vault-open #profile, body.vault-open #fyi, body.vault-open #log { display: none; }

/* ---------- the Vault ---------- */
[data-native-scroll] { overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; }
#vault {
  position: fixed; left: 6vw; top: 50%; transform: translateY(-50%);
  width: min(88vw, 470px); max-height: 88vh;
  padding: 26px 28px;
  background: rgba(4, 5, 10, .78);
  border: 1px solid rgba(232, 237, 242, .2);
  backdrop-filter: blur(5px);
  color: #e8edf2;
  font: 13px/1.6 var(--mono);
  z-index: 5;
}
#vault .head { font: inherit; white-space: pre-wrap; margin: 0 0 18px; letter-spacing: .04em; }
#vault button {
  font: inherit; color: inherit; background: transparent; cursor: pointer;
  border: 1px solid rgba(232, 237, 242, .45); padding: 8px 12px; margin: 4px 6px 4px 0;
}
#vault button:hover { background: rgba(255, 255, 255, .08); }
#vault button:disabled { opacity: .35; cursor: default; }
#vault form.bid { display: grid; gap: 10px; }
#vault form.bid[hidden] { display: none; }
#vault label { display: grid; gap: 4px; font-size: 11px; letter-spacing: .06em; opacity: .9; }
#vault label.check { grid-template-columns: auto 1fr; align-items: start; gap: 8px; font-size: 11px; letter-spacing: 0; }
#vault input:not([type=checkbox]), #vault textarea {
  font: 13px var(--mono); color: inherit; background: rgba(255, 255, 255, .04);
  border: 0; border-bottom: 1px solid rgba(232, 237, 242, .35); padding: 6px 4px; outline: none;
}
#vault input:focus, #vault textarea:focus { border-bottom-color: #ffd9a8; }
#vault input::placeholder, #vault textarea::placeholder { color: rgba(232, 237, 242, .35); }
#vault input[name=amount] { font-size: 18px; letter-spacing: .08em; }
#vault input.glow { box-shadow: 0 0 0 1px #ffd9a8, 0 0 26px rgba(255, 217, 168, .35); }
#vault .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
#vault .status { min-height: 1.6em; margin: 0; color: #ffd9a8; }
#vault .status.error { color: #e0604a; }
#vault .note { margin: 0; font-size: 10.5px; opacity: .55; }
#vault form.done input, #vault form.done textarea, #vault form.done button[type=submit] { opacity: .4; pointer-events: none; }
#vault .lock { margin-top: 22px; padding-top: 14px; border-top: 1px solid rgba(232, 237, 242, .15); }
#vault .lock-text { margin: 0 0 6px; }
#vault .lock label { grid-template-columns: auto 1fr; align-items: center; font-size: 13px; }
#vault .lock input { text-transform: uppercase; letter-spacing: .12em; }
#vault .continue { margin-top: 20px; opacity: .7; }
@media (max-width: 760px) {
  /* on phones the Vault sits low and the voice moves to the top, so neither hides the other */
  #vault { left: 50%; top: auto; bottom: 44px; transform: translateX(-50%); width: calc(100vw - 32px); max-height: 72vh; padding: 20px 18px; }
  body.vault-open #line { bottom: auto; top: 7vh; }
}

/* ---------- Hidden Layer: The Human Layer ---------- */
#human {
  position: fixed; inset: 0; z-index: 20;
  background: #f3f1ec; color: #1b1c1f;
}
#human .room {
  max-width: 620px; margin: 0 auto; padding: 18vh 24px 22vh;
  font: 15px/1.9 var(--mono);
}
#human h1 { font-size: 15px; font-weight: 400; letter-spacing: .3em; margin-bottom: 8vh; }
#human h2 { font-size: 13px; font-weight: 400; letter-spacing: .3em; margin: 0 0 20px; }
#human p { margin: 0 0 28px; }
#human hr { border: 0; border-top: 1px solid rgba(27, 28, 31, .15); margin: 9vh 0; }
#human .question { font-size: 17px; }
#human textarea {
  width: 100%; font: 15px/1.7 var(--mono); color: inherit;
  background: transparent; border: 0; border-bottom: 1px solid rgba(27, 28, 31, .3);
  resize: vertical; outline: none; padding: 6px 0; margin-bottom: 10px;
}
#human .small { font-size: 11px; opacity: .55; }
#human ol { padding-left: 1.6em; margin: 0 0 36px; }
#human li { margin-bottom: 14px; }
#human .declared { opacity: .7; }
#human .leave {
  margin-top: 8vh; font: 13px var(--mono); color: inherit; background: none;
  border: 1px solid rgba(27, 28, 31, .35); padding: 10px 16px; cursor: pointer;
}
body.human-layer #line, body.human-layer #bar, body.human-layer #log, body.human-layer #hud { display: none; }

/* ---------- Epilogue ---------- */
body.epilog #log, body.epilog #fyi, body.epilog #enh { display: none; }
#line { z-index: 4; }
#credits {
  position: fixed; left: 0; right: 0; top: 7vh; margin: 0 auto; /* no transform: the replay hint is fixed to the screen */
  width: min(92vw, 560px);
  text-align: center; color: #e8edf2;
  font: 13px/1.8 var(--mono);
  animation: fadein 3s ease both;
}
#credits p { margin: 0 0 4px; opacity: .75; }
#credits .title { font-size: 17px; letter-spacing: .32em; opacity: 1; margin-bottom: 14px; }
#credits .by { margin-top: 10px; opacity: .5; font-size: 11.5px; }
#credits button {
  font: 12px var(--mono); color: inherit; background: transparent; cursor: pointer;
  border: 1px solid rgba(232, 237, 242, .4); padding: 7px 12px; margin-top: 14px;
}
#credits button:hover { background: rgba(255, 255, 255, .08); }
/* below the final question, above the footer – never on top of the network */
#credits .again { position: fixed; left: 50%; bottom: 36px; transform: translateX(-50%); white-space: nowrap; margin: 0; border: 0; opacity: .45; font-size: 11px; animation: fadein 3s ease both; }
@keyframes fadein { from { opacity: 0; } }

#share {
  position: fixed; inset: 0; z-index: 15;
  display: grid; place-items: center;
  background: rgba(4, 5, 10, .82);
  padding: 16px;
}
#share[hidden] { display: none; }
#share .card { position: relative; width: min(92vw, 420px); text-align: center; color: #e8edf2; font: 12px var(--mono); }
#share img { width: 100%; height: auto; display: block; border: 1px solid rgba(232, 237, 242, .2); }
#share .actions { margin-top: 14px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
#share a, #share .actions button {
  font: inherit; color: inherit; background: transparent; text-decoration: none; cursor: pointer;
  border: 1px solid rgba(232, 237, 242, .45); padding: 8px 12px;
}
#share .note { opacity: .5; margin-top: 12px; font-size: 10.5px; }
#share .close { position: absolute; top: -34px; right: 0; background: none; border: 0; color: inherit; font-size: 22px; cursor: pointer; }
#credits .again[hidden] { display: none; }

/* sound toggle */
#sound {
  position: fixed; right: 28px; bottom: 14px; z-index: 6;
  font: 11px var(--mono); color: var(--fg); background: none; border: 0;
  opacity: .55; cursor: pointer; letter-spacing: .06em;
}
#sound:hover { opacity: 1; }
body.human-layer #sound { display: none; }
.fallback { z-index: 30; }
#vault .owner-logo { display: block; max-width: 160px; max-height: 56px; margin-bottom: 18px; }
#credits .signed { margin-top: 10px; color: #ffe6c8; opacity: .8; font-size: 12px; letter-spacing: .06em; }

/* ---------- contact form ---------- */
#contact {
  position: fixed; inset: 0; z-index: 25;
  display: grid; place-items: center; padding: 16px;
  background: rgba(4, 5, 10, .85);
}
#contact[hidden] { display: none; }
#contact .card {
  position: relative; width: min(100%, 460px); max-height: 92vh; overflow-y: auto;
  padding: 26px 28px; color: #e8edf2; font: 13px/1.6 var(--mono);
  background: rgba(4, 5, 10, .9); border: 1px solid rgba(232, 237, 242, .2);
}
#contact .title { margin: 0 0 18px; }
#contact form { display: grid; gap: 12px; }
#contact label { display: grid; gap: 4px; font-size: 11px; letter-spacing: .06em; }
#contact label.check { grid-template-columns: auto 1fr; gap: 8px; letter-spacing: 0; }
#contact a { color: inherit; }
#contact input:not([type=checkbox]), #contact textarea {
  font: 13px var(--mono); color: inherit; background: rgba(255, 255, 255, .04);
  border: 0; border-bottom: 1px solid rgba(232, 237, 242, .35); padding: 6px 4px; outline: none; resize: vertical;
}
#contact input:focus, #contact textarea:focus { border-bottom-color: #ffd9a8; }
#contact button[type=submit] {
  justify-self: start; font: inherit; color: inherit; background: transparent; cursor: pointer;
  border: 1px solid rgba(232, 237, 242, .45); padding: 8px 12px;
}
#contact .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
#contact .status { min-height: 1.6em; margin: 0; color: #ffd9a8; }
#contact .status.error { color: #e0604a; }
#contact form.done input, #contact form.done textarea { opacity: .4; }
#contact .close { position: absolute; top: 6px; right: 10px; background: none; border: 0; color: inherit; font-size: 20px; cursor: pointer; opacity: .6; }
#human [data-open-contact] { margin-left: 10px; }

/* ---------- legal footer: always reachable, never loud ---------- */
#footer {
  position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 30;
  display: flex; gap: 16px; font: 10.5px var(--mono); letter-spacing: .06em; opacity: .42;
}
#footer:hover { opacity: .9; }
#footer a, #footer button { color: var(--fg); text-decoration: none; background: none; border: 0; font: inherit; cursor: pointer; padding: 0; }
#footer a:hover, #footer button:hover { text-decoration: underline; text-underline-offset: 3px; }
body.human-layer #footer a, body.human-layer #footer button { color: #1b1c1f; }
#vault a { color: inherit; }
@media (max-width: 760px) {
  #footer { bottom: 8px; gap: 12px; font-size: 10px; }
  #sound { bottom: 30px; right: 14px; }
  #log { bottom: 30px; }
  #vault { bottom: 52px; }
}

/* ---------- The Echo ---------- */
#echo { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
#profile, #enh, #log { transition: opacity 1.2s ease; }
body.echo #profile, body.echo #enh, body.echo #log { opacity: 0; }

/* ---------- The Takeover ---------- */
#ai-cursor {
  position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none;
  will-change: transform; transition: opacity .6s ease;
}
#ai-cursor svg { display: block; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
@media (pointer: coarse) {
  /* phones: a foreign "finger" instead of an arrow */
  #ai-cursor svg { display: none; }
  #ai-cursor::before {
    content: ''; display: block; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
    border: 1.5px solid rgba(232,237,242,.8); background: rgba(232,237,242,.12);
  }
}
.ai-ripple {
  position: fixed; z-index: 59; pointer-events: none;
  width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  border: 1.5px solid rgba(255,217,168,.9);
  animation: ai-ripple .9s ease-out forwards;
}
@keyframes ai-ripple { to { transform: scale(7); opacity: 0; } }
#log .system { color: #ffd9a8; opacity: .55; }

/* your own cursor is gone – except where a human is still needed */
body.takeover, body.takeover * { cursor: none !important; }
body.takeover :is(#vault, #footer, #credits, #share, #contact, #human, #term, #approve, #sound),
body.takeover :is(#vault, #footer, #credits, #share, #contact, #human, #term, #approve, #sound) * { cursor: auto !important; }
body.takeover :is(#vault, #footer, #credits, #share, #contact, #human, #term) :is(a, button, label, input[type=checkbox]),
body.takeover :is(#approve, #sound) { cursor: pointer !important; }
body.takeover :is(#vault, #contact, #term, #human) :is(input:not([type=checkbox]), textarea) { cursor: text !important; }

/* ---------- the door ---------- */
#fade { position: fixed; inset: 0; z-index: 70; background: #ecebe7; opacity: 0; pointer-events: none; }
body.near-door #scene, body.takeover.near-door #scene { cursor: pointer !important; }
body.entering :is(#credits, #line, #footer, #sound, #hud, #bar, #profile, #log) { opacity: 0 !important; transition: opacity 1.2s ease; pointer-events: none; }

/* ---------- Layer BEFORE: paper, ink, handwriting – no machine ---------- */
#before {
  position: fixed; inset: 0; z-index: 40; overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, #f6eedc 0%, #eadfc6 70%, #d9caa8 100%);
  color: #3b2a1a;
  transform: translateY(-100%);
  transition: transform 1.6s cubic-bezier(.7, 0, .2, 1);
}
#before.open { transform: translateY(0); }
#before::after { /* paper grain, generated in js/before.js */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grain); opacity: .5; mix-blend-mode: multiply;
}
#before .track { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
#before .scene {
  min-height: 100vh; padding: 12vh 24px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
#before .said { font: 12px var(--mono); letter-spacing: .08em; color: rgba(59, 42, 26, .45); margin-bottom: 26px; }
#before .origin {
  font: italic 19px/1.75 Georgia, "Times New Roman", serif;
  max-width: 640px; opacity: 0; transform: translateY(8px);
  transition: opacity 2.2s ease .9s, transform 2.2s ease .9s;
}
#before .script {
  font-family: "Segoe Script", "Bradley Hand", "Brush Script MT", "Apple Chancery", cursive;
  font-size: clamp(34px, 6vw, 64px); line-height: 1.2; opacity: 0; transition: opacity 2.4s ease .3s;
}
#before .drawn .origin, #before .drawn .script { opacity: 1; transform: none; }
#before svg { width: min(78vw, 420px); height: auto; margin-bottom: 28px; overflow: visible; }
#before .ink {
  fill: none; stroke: #3b2a1a; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 3.6s ease;
}
#before .drawn .ink { stroke-dashoffset: 0; }
#before .hint { margin-top: 8vh; font: 12px var(--mono); letter-spacing: .1em; opacity: .4; animation: breathe-hint 3s ease-in-out infinite; }
@keyframes breathe-hint { 50% { opacity: .15; } }

/* the hands: they come together only while you stay still */
#before .hands { width: min(92vw, 640px); }
#before .hand { transition: transform .4s ease-out; }
#before .hand.left { transform: translateX(calc(var(--close, 0) * 9.5px)); } /* SVG units: fingertips at 110.5 and 129.5 – they meet exactly */
#before .hand.right { transform: translateX(calc(var(--close, 0) * -9.5px)); }
#before .hands-scene.touched .hands { filter: drop-shadow(0 0 18px rgba(255, 190, 110, .8)); transition: filter 2s ease; }
#before .be-still { font-size: clamp(26px, 4vw, 40px); margin-bottom: 18px; }
#before .hands-scene.touched .be-still { opacity: 0 !important; }
#before .reward { opacity: 0; transition: opacity 3s ease 1s; margin-top: 4vh; }
#before .hands-scene.touched .reward { opacity: 1; }
#before .word { font: 15px var(--mono); letter-spacing: .5em; margin-bottom: 10px; }
#before .reward .origin { opacity: 1; transform: none; }

body.before :is(#line, #log, #profile, #enh, #fyi, #bar, #hud, #station) { opacity: 0 !important; transition: opacity 1s ease; }
body.before #footer a, body.before #footer button, body.before #sound { color: #3b2a1a; }

/* ---------- THE LIFT ---------- */
#lift {
  position: fixed; inset: 0; z-index: 45; opacity: 0; transition: opacity 1.2s ease;
  background:
    radial-gradient(ellipse 70% 40% at 50% -5%, rgba(255, 214, 160, .28), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, #121417 0%, #24272c 14%, #181a1e 50%, #24272c 86%, #121417 100%);
  color: #e8edf2; font-family: var(--mono);
}
#lift.visible { opacity: 1; }
#lift .cabin { position: absolute; inset: 0; display: grid; place-items: center; }
#lift .led {
  position: absolute; top: 7vh; left: 50%; transform: translateX(-50%);
  width: min(86vw, 560px); padding: 10px 18px; display: flex; gap: 18px; align-items: center;
  background: #0a0806; border: 1px solid #2c2620; border-radius: 3px;
  color: #ffb347; text-shadow: 0 0 8px rgba(255, 154, 42, .8); letter-spacing: .12em; font-size: 14px;
}
#lift .floor { font-size: 26px; min-width: 2.4ch; text-align: center; }
#lift .msg { flex: 1; white-space: nowrap; overflow: hidden; }
#lift .doors {
  position: relative; width: min(54vw, 440px); height: 64vh; overflow: hidden;
  border: 6px solid #2e3237; box-shadow: inset 0 0 30px rgba(0,0,0,.6), 0 0 0 1px #0d0e10;
}
#lift .door {
  position: absolute; top: 0; bottom: 0; width: 50%;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 4px), linear-gradient(90deg, #3b3f45, #2a2d32);
  transition: transform 1.4s cubic-bezier(.6, 0, .3, 1);
}
#lift .door.l { left: 0; border-right: 1px solid rgba(255, 220, 170, .5); }
#lift .door.r { right: 0; }
#lift .doors.open .door.l { transform: translateX(-100%); }
#lift .doors.open .door.r { transform: translateX(100%); }
#lift .beyond { position: absolute; inset: 0; background: #04050a; }
#lift .beyond[data-floor="+1"] { background: radial-gradient(ellipse at 50% 40%, #fff6e4, #eadfc6); }
#lift .beyond[data-floor="-1"] { background: radial-gradient(ellipse at 50% 60%, #1b1420, #050406); }
#lift .beyond[data-floor="-2"] { background: #ecebe7; }
#lift .floors {
  position: absolute; right: max(4vw, 16px); top: 50%; transform: translateY(-50%);
  display: grid; gap: 16px; padding: 18px 16px;
  background: linear-gradient(180deg, #2c3036, #1f2226); border: 1px solid #3a3f46; border-radius: 4px;
}
#lift .floors button {
  display: flex; align-items: center; gap: 12px; background: none; border: 0; color: inherit;
  font: 12px var(--mono); letter-spacing: .08em; cursor: pointer; text-align: left;
}
#lift .floors i {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 40% 35%, #5a6068, #24272c 70%);
  box-shadow: inset 0 0 0 2px #6d737b, 0 2px 4px rgba(0,0,0,.5);
}
#lift .floors b { display: inline-block; min-width: 3ch; font-weight: 400; opacity: .7; }
#lift .floors button:hover i { box-shadow: inset 0 0 0 2px #a7adb5, 0 2px 4px rgba(0,0,0,.5); }
#lift .floors button.lit i { background: radial-gradient(circle at 40% 35%, #ffd79a, #ff9a2a 70%); box-shadow: 0 0 14px rgba(255, 154, 42, .8), inset 0 0 0 2px #ffcf8a; }
#lift .floors button.locked { opacity: .45; }
#lift .words { display: flex; gap: 4px; margin-left: 6px; }
#lift .words span { width: 6px; height: 6px; border-radius: 50%; background: #444; }
#lift .words span.on { background: #ffb347; box-shadow: 0 0 6px #ff9a2a; }
#lift.moving .cabin { animation: lift-shake .18s linear infinite; }
@keyframes lift-shake { 50% { transform: translateY(1px); } }
body.lift :is(#line, #credits, #log, #profile, #bar, #hud, #station) { opacity: 0 !important; pointer-events: none; }
body.takeover #lift, body.takeover #lift * { cursor: auto !important; }
body.takeover #lift button { cursor: pointer !important; }
@media (max-width: 760px) {
  #lift .doors { width: 72vw; height: 46vh; margin-top: -14vh; }
  #lift .floors { right: 50%; top: auto; bottom: 7vh; transform: translateX(50%); grid-template-columns: 1fr 1fr; gap: 12px 18px; }
}

/* ---------- Layer 2: THE VOICES ---------- */
#voices {
  position: fixed; inset: 0; z-index: 42; overflow: hidden; opacity: 0; transition: opacity 1.4s ease;
  background: radial-gradient(ellipse at 50% 30%, #241a2e 0%, #120d18 55%, #060508 100%);
  color: #e9e1f0;
}
#voices.open { opacity: 1; }
#voices .track { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
#voices .intro, #voices .summary {
  min-height: 100vh; padding: 12vh 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
#voices .floorname { font: 12px var(--mono); letter-spacing: .3em; opacity: .55; margin-bottom: 4vh; }
#voices .lead { font: italic 26px/1.6 Georgia, "Times New Roman", serif; margin-bottom: 3vh; }
#voices .task { font: 14px var(--mono); letter-spacing: .08em; opacity: .8; }
#voices .hint { margin-top: 8vh; font: 11px var(--mono); letter-spacing: .1em; opacity: .4; animation: breathe-hint 3s ease-in-out infinite; }
#voices .field { position: relative; height: 260vh; }
#voices .voice {
  position: absolute; background: none; border: 0; cursor: pointer; padding: 6px 10px;
  font-family: Georgia, "Times New Roman", serif; font-style: italic; color: rgba(233, 225, 240, .78);
  animation: voice-float 9s ease-in-out infinite;
  transition: color .4s ease, text-shadow .4s ease, opacity 1.6s ease, transform 1.6s ease;
}
#voices .voice:hover { color: #fff; text-shadow: 0 0 12px rgba(200, 170, 255, .6); }
#voices .voice.gone { opacity: 0; transform: translateY(80px) scale(.92); pointer-events: none; animation: none; }
@keyframes voice-float { 50% { translate: 0 -10px; } }
#voices .count { font: 14px var(--mono); letter-spacing: .04em; margin-bottom: 3vh; }
#voices .verdict { font: italic 22px/1.6 Georgia, "Times New Roman", serif; margin-bottom: 4vh; }
#voices .word { font: 15px var(--mono); letter-spacing: .5em; opacity: 0; transition: opacity 2.5s ease .8s; color: #ffcf8a; }
#voices .summary.found .word { opacity: 1; }
#voices .call {
  margin-top: 8vh; font: 12px var(--mono); color: inherit; background: transparent; cursor: pointer;
  border: 1px solid rgba(233, 225, 240, .35); padding: 9px 14px;
}
body.voices :is(#line, #credits, #log, #profile, #bar, #hud, #station) { opacity: 0 !important; pointer-events: none; }
body.takeover #voices, body.takeover #voices * { cursor: auto !important; }
body.takeover #voices button { cursor: pointer !important; }

/* ---------- THE PAUSE: the lift is stuck ---------- */
#lift .msg { white-space: normal; line-height: 1.5; }
#lift.stuck .cabin { animation: lift-flicker 4s steps(1) infinite; }
@keyframes lift-flicker {
  0%, 100% { filter: brightness(.55); }
  7% { filter: brightness(.25); }
  9% { filter: brightness(.55); }
  42% { filter: brightness(.4); }
  44% { filter: brightness(.55); }
}
#lift .pause {
  position: absolute; top: calc(7vh + 92px); left: 50%; transform: translateX(-50%);
  width: min(86vw, 560px); z-index: 2; text-align: center;
}
#lift .pause input {
  width: 100%; padding: 12px 14px; background: #0a0806; border: 1px solid #5a4630; border-radius: 3px;
  color: #ffb347; font: 15px var(--mono); letter-spacing: .06em; outline: none;
  text-shadow: 0 0 6px rgba(255, 154, 42, .6);
}
#lift .pause input::placeholder { color: rgba(255, 179, 71, .35); }
#lift .pause p { margin-top: 8px; font-size: 10.5px; opacity: .5; }
body.takeover #lift .pause input { cursor: text !important; }

/* ---------- THE TABLE (floor 0): candlelight, no machine ---------- */
#table {
  position: fixed; inset: 0; z-index: 43; overflow: hidden; opacity: 0; transition: opacity 2s ease;
  background: radial-gradient(ellipse at 50% 52%, #3a2412 0%, #1c110a 45%, #090605 100%);
  color: #f3dfc0;
}
#table.open { opacity: 1; }
#table .room {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 6vh 16px; text-align: center; --flick: 0;
}
#table .room::before { /* the light of the candles, breathing */
  content: ''; position: absolute; left: 50%; top: 46%; width: 90vmin; height: 60vmin; transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(255, 180, 90, .16), transparent 65%); pointer-events: none;
  animation: candle-glow 5s ease-in-out infinite;
}
@keyframes candle-glow { 50% { opacity: .7; } }
#table .floorname { font: 12px var(--mono); letter-spacing: .3em; opacity: .45; margin-bottom: 2vh; }
#table .scene { width: min(94vw, 860px); height: auto; overflow: visible; }
#table svg * { fill: none; stroke: rgba(243, 214, 170, .55); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#table .board { fill: rgba(80, 50, 26, .9); stroke: rgba(243, 214, 170, .7); }
#table .cloth { fill: rgba(240, 225, 200, .06); }
#table .chair { stroke: rgba(243, 214, 170, .28); }
#table .candles path { stroke: rgba(243, 214, 170, .5); fill: rgba(243, 225, 200, .12); }
#table .flame {
  fill: #ffcf7a; stroke: none; transform-box: fill-box; transform-origin: 50% 100%;
  filter: drop-shadow(0 0 6px #ffb347) drop-shadow(0 0 16px rgba(255, 150, 50, .6));
  animation: flame 1.8s ease-in-out infinite; animation-delay: var(--d);
}
#table .room .flame { scale: calc(1 + var(--flick) * .5) calc(1 + var(--flick) * .8); }
@keyframes flame { 0%, 100% { transform: scaleY(1) skewX(0); } 30% { transform: scaleY(1.12) skewX(3deg); } 65% { transform: scaleY(.92) skewX(-2deg); } }

/* the guests: they arrive as dotted light (like the figures in the network) and become solid */
#table .guest * { stroke: #ffd9a0; stroke-width: 2.2; stroke-dasharray: 1 7; opacity: 0; fill: rgba(255, 200, 140, 0);
  transition: opacity 2s ease, stroke-dasharray 3.5s ease 1s, fill 3s ease 1.5s; }
#table .guest.back * { opacity: 1; stroke-dasharray: 60 0; fill: rgba(255, 200, 140, .1); }
#table .guest.back { filter: drop-shadow(0 0 8px rgba(255, 190, 110, .35)); }
#table .seat.last .chair { transition: stroke 3s ease; }
#table .room.empty .seat.last .chair { stroke: rgba(255, 210, 150, .9); filter: drop-shadow(0 0 10px rgba(255, 190, 110, .7)); }

#table .cards text {
  fill: #ffcf8a; stroke: none; font: 9px var(--mono); letter-spacing: .4em; text-anchor: middle;
  opacity: 0; transition: opacity 2.5s ease;
}
#table .cards text:nth-child(2) { transition-delay: .6s; }
#table .cards text:nth-child(3) { transition-delay: 1.2s; }
#table .room.cards .cards text { opacity: 1; }

/* your chair: pulled out in front, waiting */
#table .mine { cursor: pointer; outline: none; transform-box: view-box; transform-origin: 400px 420px;
  transform: translate(46px, 18px) rotate(7deg); transition: transform 2.2s cubic-bezier(.5, 0, .2, 1); }
#table .mine .chair { stroke: rgba(255, 214, 160, .75); stroke-width: 2; animation: chair-wait 3s ease-in-out infinite; }
#table .mine:hover .chair, #table .mine:focus-visible .chair { stroke: #ffd9a0; filter: drop-shadow(0 0 8px rgba(255, 190, 110, .8)); }
@keyframes chair-wait { 50% { stroke: rgba(255, 214, 160, .4); } }
#table .you * { stroke: #ffe2b8; stroke-width: 2.2; fill: rgba(30, 18, 10, .92); opacity: 0; transition: opacity 1.8s ease 1.2s; }
#table .seated .mine { transform: translate(0, 0) rotate(0); cursor: default; }
#table .seated .mine .chair { animation: none; stroke: rgba(243, 214, 170, .6); }
#table .seated .you * { opacity: 1; }

#table .text {
  min-height: 3.4em; max-width: 640px; margin-top: 3vh;
  font: italic clamp(19px, 2.4vw, 26px)/1.6 Georgia, "Times New Roman", serif;
  opacity: 0; transform: translateY(6px); transition: opacity 1.4s ease, transform 1.4s ease;
}
#table .text.in { opacity: 1; transform: none; }
#table .sit, #table .leave {
  margin-top: 2vh; background: none; border: 0; color: #f3dfc0; font: 12px var(--mono); letter-spacing: .14em; cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity 1.6s ease; padding: 10px;
}
#table .sit.show, #table .leave.show { opacity: .75; pointer-events: auto; }
#table .sit:hover, #table .leave:hover { opacity: 1; }
#table .leave { position: absolute; bottom: 7vh; }
#table .sit.show { animation: breathe-hint 3s ease-in-out infinite; }
body.table :is(#line, #credits, #log, #profile, #bar, #hud, #station) { opacity: 0 !important; pointer-events: none; }
body.table #footer a, body.table #footer button, body.table #sound { color: #f3dfc0; }
body.takeover #table, body.takeover #table * { cursor: auto !important; }
body.takeover #table :is(button, .mine) { cursor: pointer !important; }
@media (prefers-reduced-motion: reduce) {
  #table .flame, #table .room::before, #table .mine .chair, #table .sit { animation: none; }
}
@media (orientation: portrait) and (max-width: 700px) {
  #table .scene { width: 120vw; max-width: none; }
  #table .cards text { font-size: 14px; letter-spacing: .22em; }
}

/* ---------- second visit: the seam in the white wall (short way to the lift) ---------- */
#seam {
  position: fixed; right: 13vw; top: 50%; transform: translateY(-50%); z-index: 12;
  width: 72px; height: 46vh; padding: 0; border: 0; background: none; cursor: pointer;
  opacity: 0; transition: opacity 3s ease;
}
#seam.show { opacity: 1; }
#seam .gap {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%);
  background: linear-gradient(to bottom, transparent, rgba(30, 30, 30, .75) 12%, rgba(30, 30, 30, .75) 88%, transparent);
  box-shadow: 3px 0 6px rgba(0, 0, 0, .08), -3px 0 6px rgba(255, 255, 255, .5);
  animation: seam-breathe 4s ease-in-out infinite;
  transition: width .8s ease, background .8s ease, box-shadow .8s ease;
}
#seam:hover .gap, #seam:focus-visible .gap {
  width: 4px; background: linear-gradient(to bottom, transparent, #ffb347 12%, #ff9a2a 88%, transparent);
  box-shadow: 0 0 18px rgba(255, 154, 42, .55);
}
#seam.opening .gap {
  width: 72px; transition: width 1s cubic-bezier(.7, 0, .3, 1);
  background: linear-gradient(to bottom, transparent, #2a2219 10%, #1a140e 90%, transparent);
  box-shadow: 0 0 40px rgba(255, 154, 42, .5);
}
#seam .plate {
  position: absolute; left: 50%; top: calc(100% + 14px); transform: translateX(-50%); white-space: nowrap;
  font: 10px var(--mono); letter-spacing: .3em; color: rgba(40, 40, 40, .45);
}
#seam:hover .plate { color: #b8742a; }
body.takeover #seam { cursor: pointer !important; }
@media (max-width: 700px) { #seam { right: 8vw; height: 38vh; } }
@keyframes seam-breathe { 50% { opacity: .55; } }
#seam:hover .gap, #seam.opening .gap { animation: none; }

/* ---------- THE MIRROR (floor −3): the visitor is the assistant now ---------- */
#mirror {
  position: fixed; inset: 0; z-index: 44; overflow: hidden; opacity: 0; transition: opacity 1.4s ease;
  background: radial-gradient(ellipse at 50% 0%, #17202b 0%, #0a0e13 60%, #050709 100%);
  color: #d9e2ec; font-family: var(--mono);
}
#mirror.open { opacity: 1; }
#mirror .intro {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px; text-align: center; transition: opacity 1s ease;
}
#mirror .intro.gone { opacity: 0; pointer-events: none; }
#mirror .floorname { font-size: 12px; letter-spacing: .3em; opacity: .5; margin-bottom: 4vh; }
#mirror .lead { font: italic 26px/1.6 Georgia, "Times New Roman", serif; margin-bottom: 3vh; }
#mirror .task { font-size: 14px; line-height: 1.8; opacity: .8; margin-bottom: 5vh; }
#mirror button { background: none; border: 0; color: inherit; font: 12px var(--mono); letter-spacing: .12em; cursor: pointer; padding: 10px; }
#mirror .begin { opacity: .8; animation: breathe-hint 3s ease-in-out infinite; }
#mirror .chat {
  position: absolute; left: 50%; top: 0; bottom: 0; transform: translateX(-50%); width: min(94vw, 640px);
  display: flex; flex-direction: column; padding: 7vh 0 3vh;
}
#mirror .messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 0 4px 12px; scrollbar-width: none; }
#mirror .messages::-webkit-scrollbar { display: none; }
#mirror .msg { max-width: 82%; animation: msg-in .5s ease both; }
#mirror .msg p { padding: 11px 14px; border-radius: 12px; font-size: 14px; line-height: 1.55; }
#mirror .msg.them { align-self: flex-start; }
#mirror .msg.them p { background: #1b2430; border-bottom-left-radius: 3px; }
#mirror .msg .who { display: block; font-size: 10px; letter-spacing: .14em; opacity: .4; margin: 0 0 5px 4px; }
#mirror .msg.me { align-self: flex-end; }
#mirror .msg.me p { background: #2b3f55; color: #eef4fa; border-bottom-right-radius: 3px; }
#mirror .msg.me.taken p { background: transparent; border: 1px dashed rgba(217, 226, 236, .3); color: rgba(217, 226, 236, .6); }
#mirror .msg.sys { align-self: center; max-width: 100%; }
#mirror .msg.sys p { font-size: 11px; letter-spacing: .1em; opacity: .45; padding: 4px; }
@keyframes msg-in { from { opacity: 0; transform: translateY(8px); } }
#mirror .typing { height: 20px; font-size: 11px; opacity: 0; transition: opacity .4s; padding-left: 6px; }
#mirror .typing.show { opacity: .45; }
#mirror .suggest {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; padding: 8px 12px;
  border-left: 2px solid rgba(120, 170, 220, .5); background: rgba(120, 170, 220, .06);
  font-size: 12px; opacity: 0; transform: translateY(6px); transition: opacity .6s, transform .6s; pointer-events: none;
}
#mirror .suggest.show { opacity: 1; transform: none; pointer-events: auto; }
#mirror .suggest .label { font-size: 10px; letter-spacing: .14em; opacity: .5; text-transform: uppercase; }
#mirror .suggest .text { flex: 1 1 60%; color: rgba(217, 226, 236, .75); }
#mirror .suggest button { padding: 2px 0; color: #8fc1ee; }
#mirror form { display: flex; gap: 8px; transition: opacity .4s; }
#mirror form.off { opacity: .35; }
#mirror form input {
  flex: 1; min-width: 0; padding: 13px 14px; background: #0d131a; border: 1px solid #2a3a4c; border-radius: 8px;
  color: #eef4fa; font: 14px var(--mono); outline: none;
}
#mirror form input:focus { border-color: #4f7aa3; }
#mirror form button { border: 1px solid #2a3a4c; border-radius: 8px; padding: 0 16px; }
#mirror .note { font-size: 10px; opacity: .35; margin-top: 8px; text-align: center; }
#mirror .summary {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px; text-align: center; background: rgba(5, 7, 9, .94); animation: msg-in 1.2s ease both;
}
#mirror .summary .lines p { font-size: 14px; line-height: 1.7; margin-bottom: 12px; opacity: 0; transform: translateY(6px); transition: opacity 1.2s, transform 1.2s; }
#mirror .summary .lines p.in { opacity: .85; transform: none; }
#mirror .summary .last { font: italic 24px/1.6 Georgia, "Times New Roman", serif; margin: 4vh 0 3vh; opacity: 0; transition: opacity 2s; }
#mirror .summary .call { opacity: 0; transition: opacity 1.5s 1s; pointer-events: none; }
#mirror .summary.end .last { opacity: 1; }
#mirror .summary.end .call { opacity: .75; pointer-events: auto; }
#mirror .chat.done > :not(.summary) { filter: blur(3px); }
body.mirror :is(#line, #credits, #log, #profile, #bar, #hud, #station) { opacity: 0 !important; pointer-events: none; }
body.takeover #mirror, body.takeover #mirror * { cursor: auto !important; }
body.takeover #mirror button { cursor: pointer !important; }
body.takeover #mirror input { cursor: text !important; }
#lift .beyond[data-floor="-3"] { background: radial-gradient(ellipse at 50% 0%, #17202b, #050709); }
#lift .beyond[data-floor="0"] { background: radial-gradient(ellipse at 50% 52%, #3a2412, #090605); }
#mirror [hidden] { display: none !important; }

/* ---------- THE ARCHIVE (floor −4): drawers, cold light, the choice ---------- */
#archive {
  position: fixed; inset: 0; z-index: 44; overflow: hidden; opacity: 0; transition: opacity 1.6s ease;
  background: radial-gradient(ellipse at 50% 30%, #1a2027 0%, #0b0e12 70%, #060708 100%);
  color: #cfd8e2; font-family: var(--mono);
}
#archive.open { opacity: 1; }
#archive [hidden] { display: none !important; }
#archive .floorname { position: absolute; top: 4vh; left: 0; right: 0; text-align: center; font-size: 12px; letter-spacing: .3em; opacity: .45; z-index: 2; }
#archive .wall {
  position: absolute; left: 50%; top: 10vh; transform: translateX(-50%) perspective(900px) rotateX(4deg);
  width: min(94vw, 1100px); display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px;
  transition: filter 1.2s ease, opacity 1.2s ease;
}
#archive.reading .wall { filter: blur(2px) brightness(.5); }
#archive .drawer {
  aspect-ratio: 1.6; padding: 0; border: 1px solid #2a323c; border-radius: 3px; cursor: default;
  background: linear-gradient(#1b2129, #12171d); color: rgba(207, 216, 226, .38);
  font: 8px var(--mono); letter-spacing: .06em; display: grid; place-items: center; position: relative;
  transition: transform .9s cubic-bezier(.5, 0, .2, 1), color 1s, border-color 1s, box-shadow 1s;
}
#archive .drawer::after { /* handle */
  content: ''; position: absolute; left: 50%; bottom: 18%; width: 26%; height: 2px; transform: translateX(-50%);
  background: #3a444f; border-radius: 1px;
}
#archive .drawer span { transition: opacity 1.5s; }
#archive .drawer.empty span { opacity: 0; }
#archive .drawer.empty { border-color: #1c2229; }
#archive .drawer.mine { cursor: pointer; color: #ffcf8a; border-color: rgba(255, 180, 90, .55); animation: drawer-warm 3s ease-in-out infinite; }
#archive .drawer.mine::after { background: #c98a3c; }
#archive .drawer.mine:hover, #archive .drawer.mine:focus-visible { box-shadow: 0 0 22px rgba(255, 160, 60, .5); outline: none; }
#archive .drawer.out { transform: translateZ(40px) scale(1.18); }
@keyframes drawer-warm { 50% { box-shadow: 0 0 16px rgba(255, 160, 60, .35); } }
#archive .voice {
  position: absolute; left: 0; right: 0; bottom: 9vh; text-align: center; padding: 0 20px; z-index: 3;
  font: italic clamp(18px, 2.2vw, 24px)/1.5 Georgia, "Times New Roman", serif; color: #e6edf4;
  opacity: 0; transform: translateY(6px); transition: opacity 1s, transform 1s;
}
#archive .voice.in { opacity: 1; transform: none; }
#archive .card {
  position: absolute; left: 50%; top: 47%; z-index: 4; width: min(92vw, 520px); max-height: 74vh; overflow: auto;
  transform: translate(-50%, -46%) scale(.96); opacity: 0; transition: opacity .9s ease, transform .9s cubic-bezier(.3, 0, .2, 1);
  padding: 22px 24px 18px; background: rgba(14, 18, 23, .96); border: 1px solid #364250; border-radius: 6px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 180, 90, .08);
}
#archive .card.open { opacity: 1; transform: translate(-50%, -50%); }
#archive .card .title { font-size: 11px; letter-spacing: .3em; color: #ffcf8a; margin-bottom: 16px; }
#archive .row { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border-bottom: 1px solid #1e252d; font-size: 13px; }
#archive .k { opacity: .5; }
#archive .v { text-align: right; color: #eef3f8; }
#archive .path-label { font-size: 13px; margin: 14px 0 6px; }
#archive .card canvas { display: block; width: 100%; height: 110px; background: #0a0d10; border: 1px solid #1e252d; border-radius: 3px; transition: opacity 2s; }
#archive .card canvas.gone { opacity: 0; }
#archive .choice { display: flex; justify-content: space-between; margin-top: 16px; }
#archive button.forget, #archive button.keep, #archive .end button {
  background: none; border: 0; color: inherit; font: 12px var(--mono); letter-spacing: .12em; cursor: pointer; padding: 10px 4px; opacity: .8;
}
#archive button.forget:hover, #archive button.keep:hover, #archive .end button:hover { opacity: 1; }
#archive .choice[data-step="2"] .forget { color: #ffb4a0; }
#archive .end {
  position: absolute; left: 0; right: 0; bottom: 3vh; text-align: center; z-index: 3; padding: 0 20px;
  opacity: 0; transition: opacity 1.6s;
}
#archive .end.in { opacity: 1; }
#archive .end p { font-size: 13px; letter-spacing: .04em; opacity: .7; margin-bottom: 6px; }
#archive .end .gone, #archive .end.forgotten .kept { display: none; }
#archive .end.forgotten .gone { display: block; }
#archive:has(.end.in) .voice { bottom: 16vh; }
body.archive :is(#line, #credits, #log, #profile, #bar, #hud, #station) { opacity: 0 !important; pointer-events: none; }
body.takeover #archive, body.takeover #archive * { cursor: auto !important; }
body.takeover #archive button.mine, body.takeover #archive .card button, body.takeover #archive .end button { cursor: pointer !important; }
#lift .beyond[data-floor="-4"] { background: radial-gradient(ellipse at 50% 30%, #1a2027, #060708); }
@media (max-width: 700px) {
  #archive .wall { grid-template-columns: repeat(6, 1fr); top: 9vh; gap: 5px; }
  #archive .drawer { font-size: 7px; }
}
@media (prefers-reduced-motion: reduce) { #archive .drawer.mine { animation: none; } }
#archive .voice { text-shadow: 0 2px 14px #000, 0 0 30px #000; }

/* ---------- THE ROOF (+2): open sky, nothing to do ---------- */
#roof { position: fixed; inset: 0; z-index: 46; overflow: hidden; opacity: 0; transition: opacity 3s ease; background: #0b1020; }
#roof.open { opacity: 1; }
#roof canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#roof .edge { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 16vh; }
#roof .edge path { fill: #0d0f14; }
#roof .edge .rail { fill: none; stroke: #0d0f14; stroke-width: 3; vector-effect: non-scaling-stroke; }
#roof .floorname { position: absolute; top: 4vh; left: 0; right: 0; text-align: center; font: 12px var(--mono); letter-spacing: .3em; color: #fff; opacity: 0; animation: roof-name 9s ease 1.5s both; }
@keyframes roof-name { 15%, 60% { opacity: .5; } 100% { opacity: 0; } }
#roof .text {
  position: absolute; left: 0; right: 0; top: 40%; text-align: center; padding: 0 24px; color: #fff;
  font: italic clamp(22px, 3vw, 34px)/1.5 Georgia, "Times New Roman", serif; text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
  opacity: 0; transform: translateY(6px); transition: opacity 2s ease, transform 2s ease;
}
#roof .text.in { opacity: 1; transform: none; }
#roof .down {
  position: absolute; left: 50%; bottom: 3vh; transform: translateX(-50%); z-index: 2;
  background: none; border: 0; color: #fff; font: 12px var(--mono); letter-spacing: .14em; cursor: pointer; padding: 10px;
  opacity: 0; pointer-events: none; transition: opacity 2s;
}
#roof .down.show { opacity: .6; pointer-events: auto; }
#roof .down:hover { opacity: 1; }
body.roof :is(#line, #credits, #log, #profile, #bar, #hud, #station) { opacity: 0 !important; pointer-events: none; }
body.roof #footer a, body.roof #footer button, body.roof #sound { color: rgba(255, 255, 255, .7); }
body.takeover #roof, body.takeover #roof * { cursor: auto !important; }
body.takeover #roof button { cursor: pointer !important; }
#lift .beyond[data-floor="+2"] { background: linear-gradient(#5c96d6, #cee4f4); }
#lift .floors button.unseen { display: none; }
@media (prefers-reduced-motion: reduce) { #roof .floorname { animation: none; opacity: .4; } }

/* ---------- BEFORE: when the hands meet, warm light opens from the fingertips ---------- */
#before .through { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
#before .through i, #before .through b {
  position: absolute; left: var(--x, 50%); top: var(--y, 40%); width: 10px; height: 10px; border-radius: 50%;
  transform: translate(-50%, -50%) scale(0); opacity: 0;
}
#before .through i { border: 2px solid rgba(255, 196, 120, .9); box-shadow: 0 0 24px rgba(255, 180, 90, .6); }
#before .through b { background: radial-gradient(circle, #fff6e6 0%, #ffe2b0 45%, #f6c98a 100%); }
#before.through-on .through i { animation: through-ring 2.6s cubic-bezier(.2, .6, .3, 1) forwards; }
#before.through-on .through i:nth-child(2) { animation-delay: .35s; }
#before.through-on .through i:nth-child(3) { animation-delay: .7s; }
#before.through-on .through b { animation: through-fill 3.4s cubic-bezier(.6, 0, .4, 1) .6s forwards; }
@keyframes through-ring { 0% { opacity: 1; transform: translate(-50%, -50%) scale(0); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(260); } }
@keyframes through-fill { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0); } 30% { opacity: .9; } 100% { opacity: 1; transform: translate(-50%, -50%) scale(400); } }

/* ---------- epilogue: THE MIRROR on the main path – sentences stream into the network ---------- */
#learned { position: fixed; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
#learned span {
  position: absolute; white-space: nowrap; transform: translate(0, 0); opacity: 0;
  font: clamp(12px, 1.3vw, 16px) var(--mono); letter-spacing: .04em; color: #e8edf2;
  text-shadow: 0 0 10px rgba(200, 220, 255, .5);
  transition: transform 5.5s cubic-bezier(.45, 0, .7, 1), opacity 5.5s ease;
}
#learned span.go { animation: learned-fade 5.5s ease forwards; }
@keyframes learned-fade { 0% { opacity: 0; } 15% { opacity: .9; } 70% { opacity: .7; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #learned span { transition: none; } }

/* ---------- floor ∅: the sealed button and THE OWNER'S ROOM ---------- */
#lift .floors button.sealed span { letter-spacing: .12em; }
#lift .floors button.sealed i { background: radial-gradient(circle at 40% 35%, #3a3226, #17130d); box-shadow: inset 0 0 0 1px #8a6a3a; }
#lift .sealed-form { position: absolute; top: calc(7vh + 92px); left: 50%; transform: translateX(-50%); width: min(86vw, 460px); z-index: 2; text-align: center; }
#lift .sealed-form input {
  width: 100%; padding: 12px 14px; background: #0a0806; border: 1px solid #8a6a3a; border-radius: 3px;
  color: #ffcf8a; font: 15px var(--mono); letter-spacing: .2em; outline: none; text-align: center;
}
#lift .sealed-form p { margin-top: 8px; font-size: 10.5px; opacity: .5; }
#lift [hidden] { display: none !important; }
#lift .beyond[data-floor="∅"] { background: radial-gradient(ellipse at 50% 50%, #2a2116, #050403); }
#ownerroom {
  position: fixed; inset: 0; z-index: 47; opacity: 0; transition: opacity 2s ease, background 2s ease;
  background: radial-gradient(ellipse at 50% 55%, #2a2116 0%, #0d0a07 60%, #050403 100%); color: #f1e2c4;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px;
}
#ownerroom.open { opacity: 1; }
#ownerroom.dark { background: #000; }
#ownerroom.dark > * { opacity: 0 !important; transition: opacity 1.8s; }
#ownerroom .floorname { position: absolute; top: 5vh; left: 0; right: 0; font: 12px var(--mono); letter-spacing: .3em; opacity: .45; }
#ownerroom .text {
  max-width: 680px; min-height: 3.2em; font: italic clamp(20px, 2.6vw, 30px)/1.55 Georgia, "Times New Roman", serif;
  opacity: 0; transform: translateY(6px); transition: opacity 1.4s, transform 1.4s;
}
#ownerroom .text.in { opacity: 1; transform: none; }
#ownerroom .choice { display: flex; gap: 28px; flex-wrap: wrap; justify-content: center; margin-top: 6vh; opacity: 0; pointer-events: none; transition: opacity 1.6s; }
#ownerroom .choice.show { opacity: 1; pointer-events: auto; }
#ownerroom button { background: none; border: 0; color: inherit; font: 12px var(--mono); letter-spacing: .14em; cursor: pointer; padding: 10px; opacity: .8; }
#ownerroom button:hover { opacity: 1; }
#ownerroom .off { color: #ffcf8a; }
body.ownerroom :is(#line, #credits, #log, #profile, #bar, #hud, #station) { opacity: 0 !important; pointer-events: none; }
body.takeover #ownerroom, body.takeover #ownerroom * { cursor: auto !important; }
body.takeover #ownerroom button { cursor: pointer !important; }
body.takeover #lift .sealed-form input { cursor: text !important; }
/* THE MIRROR: the way in must be visible */
#mirror .begin {
  opacity: 1; animation: mirror-begin 2.6s ease-in-out infinite;
  border: 1px solid rgba(143, 193, 238, .55); border-radius: 6px; padding: 12px 22px;
  color: #cfe6fb; font-size: 13px; background: rgba(120, 170, 220, .08);
}
#mirror .begin:hover, #mirror .begin:focus-visible { background: rgba(120, 170, 220, .18); border-color: #8fc1ee; outline: none; }
@keyframes mirror-begin { 50% { box-shadow: 0 0 22px rgba(143, 193, 238, .35); } }

/* THE ARCHIVE: drawers of your earlier visits – cold, but labelled */
#archive .drawer.past { color: rgba(255, 207, 138, .45); border-color: rgba(255, 180, 90, .2); }

/* ---------- THE LIFT as a room: perspective cabin (back wall with doors, side walls, ceiling, floor) ---------- */
#lift {
  --bw: min(42vw, 560px);                 /* width of the back wall */
  --bt: 13vh;                             /* top edge of the back wall */
  --bb: 81vh;                             /* bottom edge of the back wall (where the floor meets it) */
  --bl: calc(50% - var(--bw) / 2);        /* left edge of the back wall */
  --br: calc(50% + var(--bw) / 2);        /* right edge */
  background: #0c0d0f;
}
#lift .cabin { display: block; }
#lift .room, #lift .room i { position: absolute; inset: 0; pointer-events: none; }
#lift .room i { display: block; }
/* ceiling: dark, with a warm light panel and a falloff */
#lift .ceiling {
  clip-path: polygon(0 0, 100% 0, var(--br) var(--bt), var(--bl) var(--bt));
  background:
    radial-gradient(ellipse 40% 90% at 50% 0%, rgba(255, 228, 185, .35), transparent 70%),
    linear-gradient(180deg, #202124 0%, #2c2d30 100%);
}
#lift .lightpanel {
  clip-path: polygon(38% 0, 62% 0, calc(50% + var(--bw) * .16) calc(var(--bt) - 2vh), calc(50% - var(--bw) * .16) calc(var(--bt) - 2vh));
  background: linear-gradient(180deg, #fff6e6 0%, #ffe9c6 55%, rgba(246, 214, 160, .7) 100%);
  opacity: .85;
}
/* side walls: brushed steel, light from the ceiling, panel seams (vertical lines stay vertical in perspective) */
#lift .wall-l, #lift .wall-r {
  background:
    linear-gradient(180deg, rgba(255, 235, 200, .16) 0%, transparent 28%, transparent 70%, rgba(0, 0, 0, .35) 100%),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px),
    linear-gradient(var(--dir), transparent 0 39.6%, rgba(0,0,0,.55) 39.6% 40%, rgba(255,255,255,.08) 40% 40.3%, transparent 40.3% 67.6%,
      rgba(0,0,0,.55) 67.6% 68%, rgba(255,255,255,.08) 68% 68.2%, transparent 68.2% 85.7%, rgba(0,0,0,.5) 85.7% 86%, transparent 86%),
    linear-gradient(var(--dir), #5e636b 0%, #3f434a 25%, #2c2f34 55%, #1f2125 80%, #17181b 100%);
}
#lift .wall-l { --dir: 90deg; clip-path: polygon(0 0, var(--bl) var(--bt), var(--bl) var(--bb), 0 100%); }
#lift .wall-r { --dir: 270deg; clip-path: polygon(100% 0, var(--br) var(--bt), var(--br) var(--bb), 100% 100%); }
/* floor: dark stone with the reflection of the light and of the doors */
#lift .floorp {
  clip-path: polygon(0 100%, 100% 100%, var(--br) var(--bb), var(--bl) var(--bb));
  background:
    linear-gradient(90deg, transparent calc(50% - var(--bw) * .33), rgba(200, 205, 212, .07) calc(50% - var(--bw) * .33), rgba(200, 205, 212, .07) calc(50% + var(--bw) * .33), transparent calc(50% + var(--bw) * .33)),
    radial-gradient(ellipse 34% 30% at 50% 0%, rgba(255, 225, 175, .14), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.015) 0 1px, transparent 1px 90px),
    linear-gradient(180deg, #17181a 0%, #101113 50%, #08090a 100%);
}
#lift .glow { background: radial-gradient(ellipse 45% 30% at 50% 0%, rgba(255, 225, 175, .22), transparent 70%); }
/* handrails along both side walls */
#lift .rail-l, #lift .rail-r {
  background: linear-gradient(180deg, #d9dde2 0%, #8c9299 45%, #3c4046 100%);
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .55));
}
#lift .rail-l { clip-path: polygon(0 60%, var(--bl) calc(var(--bt) + (var(--bb) - var(--bt)) * .6), var(--bl) calc(var(--bt) + (var(--bb) - var(--bt)) * .6 + 5px), 0 calc(60% + 16px)); }
#lift .rail-r { clip-path: polygon(100% 60%, var(--br) calc(var(--bt) + (var(--bb) - var(--bt)) * .6), var(--br) calc(var(--bt) + (var(--bb) - var(--bt)) * .6 + 5px), 100% calc(60% + 16px)); }
/* the back wall: a steel frame around the doors */
#lift .room .back {
  left: var(--bl); right: auto; top: var(--bt); bottom: auto; width: var(--bw); height: calc(var(--bb) - var(--bt));
  background:
    linear-gradient(180deg, rgba(255, 235, 200, .12), transparent 30%, rgba(0,0,0,.3)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, #2f3237, #3b3f45 50%, #2f3237);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.6), inset 0 0 60px rgba(0,0,0,.5);
}
/* LED display mounted on the back wall, doors set into it */
#lift .led { top: calc(var(--bt) + 2.2vh); width: min(calc(var(--bw) * .8), 560px); z-index: 2; box-shadow: 0 0 0 2px #1a1714, 0 0 0 3px #3a3530; }
#lift .doors {
  position: absolute; left: 50%; transform: translateX(-50%); z-index: 1;
  top: calc(var(--bt) + 10vh); height: calc(var(--bb) - var(--bt) - 10vh); width: calc(var(--bw) * .66);
  border: 10px solid #24272b; border-bottom: 0;
  box-shadow: inset 0 0 40px rgba(0,0,0,.7), 0 0 0 1px #4a4f56, 0 0 0 2px #15171a, 0 20px 50px rgba(0,0,0,.4);
}
#lift .door {
  background:
    linear-gradient(180deg, rgba(255, 235, 200, .14), transparent 25%, transparent 75%, rgba(0,0,0,.35)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, #555a61, #3e4248 50%, #4a4e55);
}
#lift .door.l { box-shadow: inset -1px 0 0 rgba(0,0,0,.6); }
#lift .door.r { box-shadow: inset 1px 0 0 rgba(255,255,255,.12); }
/* the panel is mounted on the right side wall, turned towards you */
#lift .floors {
  right: calc(var(--bl) * .26); z-index: 2;
  transform: translateY(-50%) perspective(900px) rotateY(-24deg);
  transform-origin: right center;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, #4b5057, #383c42);
  border: 1px solid #5d636b; border-radius: 6px;
  box-shadow: -14px 18px 30px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255,255,255,.12);
}
#lift.moving .cabin { animation: lift-shake .18s linear infinite; }
#lift.moving .lightpanel { animation: lift-light 1.3s ease-in-out infinite; }
@keyframes lift-light { 50% { opacity: .75; } }
@media (max-width: 760px) {
  #lift { --bw: 82vw; --bt: 6vh; --bb: 62vh; }
  #lift .doors { margin-top: 0; width: calc(var(--bw) * .7); }
  #lift .floors { right: 50%; top: auto; bottom: 4vh; transform: translateX(50%); }
}
#lift .room canvas.neurons { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }

/* THE ARCHIVE: pulled into the drawer at light speed */
#archive canvas.warp { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
#archive.diving .wall {
  transition: transform 1.55s cubic-bezier(.75, 0, .95, .55), filter 1.55s ease-in, opacity .4s ease 1.3s;
  transform: translateX(-50%) perspective(900px) rotateX(4deg) scale(26);
  filter: blur(8px) brightness(1.8);
  opacity: 0;
}
#archive.diving .floorname { opacity: 0; transition: opacity .4s; }
#archive.inside { background: radial-gradient(ellipse at 50% 50%, #241b12 0%, #0b0907 70%, #050404 100%); }
#archive.inside .card { z-index: 4; border-color: rgba(255, 180, 90, .35); box-shadow: 0 0 80px rgba(255, 170, 80, .18), 0 30px 80px rgba(0,0,0,.6); }
#archive .wall { transition: transform 1.1s cubic-bezier(.2, .6, .3, 1), filter 1.1s ease-out, opacity .6s ease; }
@media (prefers-reduced-motion: reduce) { #archive.diving .wall { transition: opacity .6s; transform: translateX(-50%); filter: none; } }
#archive.passing { background: #050403; }
#archive.passing .voice { bottom: 8vh; }

/* THE ARCHIVE: the passage – fragments of a life as tilted planes in real 3D space */
#archive .life { position: absolute; inset: 0; z-index: 3; pointer-events: none; perspective: 900px; perspective-origin: 50% 50%; overflow: hidden; }
#archive .life .frag {
  position: absolute; left: 50%; top: 50%; width: 360px; height: 240px; margin: -120px 0 0 -180px;
  border-radius: 10px; overflow: hidden; opacity: 0; will-change: transform, opacity; backface-visibility: hidden;
  box-shadow: 0 0 40px rgba(255, 205, 140, .25), 0 20px 50px rgba(0, 0, 0, .6);
}
#archive .life .frag img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.9) contrast(1.05); }
#archive .life .frag .cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 10px; background: rgba(0, 0, 0, .55);
  color: #fff; font: 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: .04em;
}
#archive .life .frag.video::after { /* play button */
  content: ''; position: absolute; left: 50%; top: 45%; transform: translate(-40%, -50%);
  border-left: 30px solid rgba(255, 255, 255, .9); border-top: 18px solid transparent; border-bottom: 18px solid transparent;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
}
#archive .life .frag .bar { position: absolute; left: 10px; right: 10px; bottom: 30px; height: 3px; background: rgba(255,255,255,.35); }
#archive .life .frag .bar::before { content: ''; position: absolute; inset: 0 65% 0 0; background: #ff4d4d; }
@media (max-width: 700px) { #archive .life .frag { width: 220px; height: 147px; margin: -73px 0 0 -110px; } }

/* ---------- THE ARCHIVE: chapters 2–4 ---------- */
#archive .end .note { display: none; font-size: 13px; opacity: .8; margin-bottom: 6px; }
#archive .end.noted .note { display: block; }
#archive .end.noted .kept, #archive .end.noted .gone { display: none; }
#archive .drawer.emptied { border-color: #161b21; }
#archive .drawer.emptied::after { background: #23292f; }
/* the machine's drawer: cold, blue, waiting */
#archive .drawer.machine { color: #9fd0ff; border-color: rgba(120, 190, 255, .55); }
#archive .drawer.machine.mine { animation: drawer-cold 3s ease-in-out infinite; }
#archive .drawer.machine::after { background: #4a7fae; }
@keyframes drawer-cold { 50% { box-shadow: 0 0 18px rgba(110, 180, 255, .45); } }
/* the memorial: every drawer becomes a small light */
#archive .wall.memorial .drawer {
  border-color: transparent; background: radial-gradient(circle at 50% 55%, rgba(255, 196, 120, calc(.55 * var(--f, 1))) 0%, rgba(255, 150, 60, .12) 30%, transparent 62%);
  animation: candle 3.4s ease-in-out infinite; animation-delay: var(--d, 0s);
  transition: background 3s ease, border-color 2s ease;
}
#archive .wall.memorial .drawer span, #archive .wall.memorial .drawer::after { opacity: 0; transition: opacity 2s; }
@keyframes candle { 0%, 100% { opacity: .9; } 40% { opacity: .65; } 60% { opacity: 1; } 80% { opacity: .75; } }
/* leave a word: it rises and is gone */
#archive .leave-word { position: absolute; left: 50%; bottom: 22vh; transform: translateX(-50%); width: min(80vw, 360px); z-index: 4; }
#archive .leave-word input {
  width: 100%; padding: 12px 16px; background: rgba(10, 8, 6, .8); border: 1px solid rgba(255, 190, 120, .4); border-radius: 22px;
  color: #ffe2b8; font: italic 17px Georgia, "Times New Roman", serif; text-align: center; outline: none;
}
#archive .rising { position: absolute; inset: 0; pointer-events: none; z-index: 4; overflow: hidden; }
#archive .rising span {
  position: absolute; bottom: 26vh; transform: translateX(-50%); color: #ffe2b8; white-space: nowrap;
  font: italic clamp(20px, 2.6vw, 30px) Georgia, "Times New Roman", serif; text-shadow: 0 0 18px rgba(255, 190, 110, .8);
  animation: rise 7s ease-out forwards;
}
@keyframes rise { 0% { opacity: 0; transform: translate(-50%, 0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -60vh) scale(.6); filter: blur(2px); } }
body.takeover #archive .leave-word input { cursor: text !important; }
@media (prefers-reduced-motion: reduce) { #archive .wall.memorial .drawer, #archive .drawer.machine.mine { animation: none; } }

/* the return beginnings: the lamp in the dark, and the rewind */
#lamp {
  position: fixed; inset: 0; z-index: 9; pointer-events: none; background: #040405;
  --x: 50%; --y: 50%;
  -webkit-mask-image: radial-gradient(circle 150px at var(--x) var(--y), transparent 0, transparent 55%, #000 100%);
  mask-image: radial-gradient(circle 150px at var(--x) var(--y), transparent 0, transparent 55%, #000 100%);
  transition: opacity 2s ease;
}
#lamp.gone { opacity: 0; }
body.rewinding::after {
  content: ''; position: fixed; inset: 0; z-index: 9; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .06) 0 2px, transparent 2px 4px);
  animation: rewind-glitch .7s steps(2) infinite;
}
@keyframes rewind-glitch {
  0% { transform: translateY(0); filter: none; }
  30% { transform: translateY(-3px); }
  50% { box-shadow: inset 0 40vh 0 -39.6vh rgba(255, 255, 255, .25); }
  70% { transform: translateY(2px); }
  100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { body.rewinding::after { animation: none; } }

/* ---------- the collapse: the beginning falls like a heavy curtain ---------- */
body.collapsing { background: #000; }
body.collapsing :is(#line, #footer, #sound, #bar, #log, #hud, #station, #manual) {
  transition: transform 1.7s cubic-bezier(.62, 0, 1, .45) var(--fall-delay, 0s), filter 1.7s ease-in var(--fall-delay, 0s);
  transform: translateY(120vh) rotate(var(--fall-rot, 0deg)) skewY(2.5deg);
  transform-origin: 50% 0;
  filter: brightness(.6);
}
body.rising { background: #000; }
body.rising :is(#line, #footer, #sound, #bar, #log, #hud, #station, #manual) {
  transition: transform 1.9s cubic-bezier(.15, .75, .3, 1), filter 1.9s ease-out;
}
#collapse { position: fixed; inset: 0; z-index: 90; background: transparent; display: grid; place-items: center; transition: background 1.2s ease; }
#collapse.dark { background: #000; }
#collapse canvas.pieces { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
body:is(.collapsing, .rising) :is(#scene, #echo) { opacity: 0; }
body:is(.collapsing, .rising) { background: #000; }
#collapse .error {
  position: absolute; width: min(88vw, 440px); padding: 22px 24px 18px; background: #f2f2f2; color: #1d1d1f; border-radius: 6px;
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
  opacity: 0; transform: scale(.97); transition: opacity .25s ease, transform .25s ease; pointer-events: none;
}
#collapse .error.in { opacity: 1; transform: none; pointer-events: auto; }
#collapse .error .t { font-weight: 600; margin-bottom: 6px; }
#collapse .error .s { color: #555; font-size: 13px; margin-bottom: 18px; }
#collapse .error .b { display: flex; justify-content: flex-end; gap: 10px; }
#collapse .error button {
  font: 13px system-ui, -apple-system, "Segoe UI", sans-serif; padding: 7px 16px; border-radius: 5px; cursor: pointer;
  border: 1px solid #c9c9cc; background: #fff; color: #1d1d1f;
}
#collapse .error button.reload { background: #2f6fde; border-color: #2f6fde; color: #fff; }
#collapse .speech {
  color: #e8edf2; font: 18px ui-monospace, Menlo, Consolas, monospace; letter-spacing: .02em; text-align: center; padding: 0 20px;
  opacity: 0; transition: opacity .6s;
}
#collapse .speech.in { opacity: 1; }
#collapse .speech::after { content: '▋'; margin-left: 4px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
body.takeover #collapse, body.takeover #collapse * { cursor: auto !important; }
body.takeover #collapse button { cursor: pointer !important; }
@media (prefers-reduced-motion: reduce) {
  body.collapsing :is(#scene, #echo, #line, #footer, #sound, #bar, #log, #hud, #station, #manual) { transition: opacity .8s; opacity: 0; transform: none; }
}

/* the riddle terminal: the machine offers to do it for you */
#term .offer { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-top: 14px; font: 12px var(--mono); color: #ffcf8a; }
#term .offer button { background: none; border: 0; color: inherit; font: inherit; letter-spacing: .08em; cursor: pointer; padding: 4px 0; opacity: .85; }
#term .offer button:hover { opacity: 1; }
body.takeover #term .offer button { cursor: pointer !important; }

/* ---------- THE CONSTELLATION (js/hub.js): the places inside the mind ---------- */
#hub { position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: 0; transition: opacity 1.4s ease; font-family: var(--mono); }
#hub.visible { opacity: 1; }
#hub .labels { position: absolute; inset: 0; }
#hub .place {
  position: absolute; left: 0; top: 0; pointer-events: auto; background: none; border: 0; padding: 6px 8px; cursor: pointer;
  color: rgba(232, 237, 242, .72); text-align: center; white-space: nowrap; transition: color .4s, opacity .4s;
}
#hub .place b { display: block; font: 400 11px var(--mono); letter-spacing: .32em; }
#hub .place small { display: block; font: 10px var(--mono); letter-spacing: .12em; opacity: .55; margin-top: 3px; }
#hub .place.hot, #hub .place:hover, #hub .place:focus-visible { color: #fff; text-shadow: 0 0 14px rgba(255, 220, 170, .8); outline: none; }
#hub .place.locked { color: rgba(232, 237, 242, .4); }
#hub.stuck .place { opacity: .35; }
#hub form.go {
  position: absolute; left: 50%; bottom: 9vh; transform: translateX(-50%); width: min(90vw, 560px); pointer-events: auto;
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid rgba(232, 237, 242, .25);
  color: #e8edf2; font-size: 15px;
}
#hub form.go .prompt { opacity: .6; }
#hub form.go .field { position: relative; flex: 1; }
#hub form.go input { width: 100%; background: none; border: 0; outline: none; color: #fff; font: 15px var(--mono); letter-spacing: .04em; }
#hub form.go input::placeholder { color: rgba(232, 237, 242, .35); }
#hub form.go .ghost { position: absolute; top: 0; left: 0; pointer-events: none; color: rgba(255, 207, 138, .55); font: 15px var(--mono); letter-spacing: .04em; white-space: pre; }
#hub form.go .hint { font-size: 10px; letter-spacing: .1em; opacity: .5; white-space: nowrap; }
#hub form.go.sealed { border-bottom-color: rgba(201, 138, 60, .7); }
#hub form.go.pause { border-bottom-color: rgba(255, 179, 71, .6); }
#hub .flash { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease-in; pointer-events: none; }
#hub.flashing .flash { opacity: 1; }
body.hub :is(#credits, #log, #profile, #bar, #hud, #station, #share) { opacity: 0 !important; pointer-events: none; }
body.hub-hover #scene { cursor: pointer; }
body.takeover #hub, body.takeover #hub * { cursor: auto !important; }
body.takeover #hub .place { cursor: pointer !important; }
body.takeover #hub input { cursor: text !important; }
@media (max-width: 700px) { #hub form.go { bottom: 12vh; } #hub form.go .hint { display: none; } }

/* THE ARCHIVE: the wall becomes a globe or a wormhole (js/archiveshape.js) */
#archive .wall.shaped { display: block; transform: translateX(-50%); perspective: 1000px; perspective-origin: 50% 50%; cursor: grab; }
#archive .wall.shaped:active { cursor: grabbing; }
#archive .wall.shaped .drawer {
  position: absolute; left: 50%; top: 50%; aspect-ratio: auto; backface-visibility: hidden; will-change: transform, opacity;
  transition: color 1s, border-color 1s, box-shadow 1s, background 3s;
}
#archive .wall.shaped .drawer.mine { cursor: pointer; }
#archive.diving .wall.shaped { transform: translateX(-50%) scale(26); }
#archive .wall.shaped .drawer { background: linear-gradient(#26303b, #181e26); border-color: #3d4a59; color: rgba(215, 226, 238, .55); }
#archive .wall.wormhole .drawer { border-color: rgba(130, 180, 235, .45); box-shadow: 0 0 14px rgba(90, 150, 230, .18); color: rgba(200, 225, 250, .6); }
#archive .wall.shaped .drawer.mine { color: #ffcf8a; border-color: rgba(255, 180, 90, .7); background: linear-gradient(#2c2418, #1a150e); }
#archive:has(.wall.wormhole) { background: radial-gradient(ellipse at 50% 42%, #142133 0%, #0a0f16 45%, #040507 100%); }
#archive .wall.shaped { touch-action: none; }
/* THE ARCHIVE: the nerve paths between the drawers */
#archive canvas.links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; transition: opacity .8s ease, filter 1.2s ease; }
#archive.diving canvas.links { opacity: 0; transition: opacity .3s; }
#archive.reading canvas.links { filter: blur(2px) brightness(.5); }
#archive canvas.hands { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
#archive.diving canvas.hands { opacity: 0; transition: opacity .9s ease .4s; }
/* THE HANDS: while they reach for you, the writing on the screen steps back */
body.hands :is(#term, #profile, #station, #approve, #fyi, #enh, #log, #hud) { opacity: .08 !important; transition: opacity .8s ease; pointer-events: none; }