:root {
  --yellow: #ffea00;
  --yellow-soft: #fff48b;
  --blue: #10c6d9;
  --blue-dark: #087b91;
  --green: #2ab967;
  --ink: #11110f;
  --paper: #fffef1;
  --red: #ff4e3b;
  --scene-accent: var(--blue);
  --display: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  --mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
}

* { box-sizing: border-box; }
html { background: var(--yellow); }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow: hidden;
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--mono);
  cursor: default;
}
button, a, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; }
::selection { background: var(--blue); color: var(--ink); }

.app-shell { position: relative; min-height: 100vh; isolation: isolate; }
.clay-backdrop {
  position: fixed;
  z-index: -4;
  inset: -3%;
  background: var(--yellow) url('./baton-clay-background.png') center / cover no-repeat;
  transform: translate3d(var(--bg-x, 0), var(--bg-y, 0), 0) scale(1.07);
  transition: filter .8s ease, opacity .8s ease;
  opacity: .37;
  filter: saturate(1.18) contrast(1.04);
}
.app-shell[data-scene-active="1"] .clay-backdrop { opacity: .17; filter: saturate(.75) contrast(1.2); }
.app-shell[data-scene-active="2"] .clay-backdrop { opacity: .24; filter: hue-rotate(4deg) saturate(1.25); }
.app-shell[data-scene-active="3"] .clay-backdrop { opacity: .2; filter: hue-rotate(-10deg) saturate(1.5) contrast(1.1); }
.grain {
  position: fixed;
  z-index: 70;
  inset: 0;
  pointer-events: none;
  opacity: .15;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.94' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}
.cursor { position: fixed; z-index: 100; width: 28px; height: 28px; border: 2px solid var(--ink); border-radius: 50%; pointer-events: none; transform: translate(-50%,-50%); transition: width .16s ease,height .16s ease,background .16s ease; mix-blend-mode: multiply; }
.cursor span { position: absolute; inset: 8px; border-radius: 50%; background: var(--blue); }
.cursor.is-hover { width: 52px; height: 52px; background: rgba(255,234,0,.5); }
.transition-swipe { position: fixed; z-index: 60; inset: 0; background: var(--scene-accent); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.transition-swipe.is-moving { animation: sceneSwipe .7s cubic-bezier(.78,0,.22,1); }

.boot-screen { position: fixed; z-index: 200; inset: 0; display:grid; place-content:center; justify-items:center; background:var(--yellow); transition: opacity .55s ease, visibility .55s ease; }
.boot-screen.is-gone { opacity:0; visibility:hidden; }
.boot-eye { width:88px; height:88px; display:grid; place-items:center; border:5px solid var(--ink); border-radius:48% 52% 45% 55%; background:var(--blue); box-shadow:8px 8px 0 var(--ink); animation:bootBob .8s ease-in-out infinite alternate; }
.boot-eye i { width:40px; height:40px; display:block; border:5px solid var(--ink); border-radius:50%; background:white; position:relative; }
.boot-eye i::after { content:""; position:absolute; width:12px; height:12px; border-radius:50%; background:var(--ink); top:6px; right:5px; }
.boot-screen p { margin:28px 0 12px; font-size:11px; font-weight:800; letter-spacing:.1em; }
.boot-line { width:230px; height:8px; border:2px solid var(--ink); overflow:hidden; background:var(--paper); }
.boot-line span { display:block; width:100%; height:100%; background:var(--green); transform-origin:left; animation:bootLoad 1.15s ease both; }

.topbar {
  position: fixed;
  z-index: 50;
  inset: 0 0 auto;
  min-height: 74px;
  display: grid;
  grid-template-columns: minmax(210px,1fr) auto minmax(210px,1fr);
  align-items: center;
  gap: 24px;
  padding: 14px 25px;
  border-bottom: 3px solid var(--ink);
  background: rgba(255,234,0,.88);
  backdrop-filter: blur(14px);
}
.wordmark { display:flex; align-items:center; justify-self:start; gap:10px; padding:0; border:0; background:none; cursor:pointer; font-size:11px; font-weight:800; }
.wordmark-eye { width:32px; height:32px; display:grid; place-items:center; flex:0 0 auto; color:white; background:var(--blue); border:3px solid var(--ink); border-radius:48% 52% 45% 55%; box-shadow:2px 2px 0 var(--ink); transition:transform .25s ease; }
.wordmark:hover .wordmark-eye { transform:rotate(16deg) scale(1.08); }
.desktop-nav { display:flex; align-items:center; justify-content:center; gap:clamp(15px,2vw,32px); }
.nav-link { position:relative; padding:8px 0; border:0; background:none; cursor:pointer; font-size:10px; font-weight:800; letter-spacing:.02em; }
.nav-link::after { content:""; position:absolute; left:50%; right:50%; bottom:1px; height:3px; background:var(--ink); transition:left .22s ease,right .22s ease; }
.nav-link:hover::after,.nav-link.is-active::after { left:0; right:0; }
.social-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.pill,.sound-pill { min-height:38px; display:inline-flex; align-items:center; justify-content:center; border:3px solid var(--ink); border-radius:999px; box-shadow:3px 3px 0 var(--ink); text-decoration:none; font-size:10px; font-weight:900; transition:transform .18s ease,box-shadow .18s ease,background .18s ease; }
.pill { padding:0 15px; }
.pill:hover,.sound-pill:hover { transform:translate(2px,2px) rotate(-1.5deg); box-shadow:1px 1px 0 var(--ink); }
.pill-x { min-width:40px; background:var(--paper); }
.pill-buy { color:white; background:var(--green); }
.sound-pill { gap:8px; padding:0 12px; cursor:pointer; background:var(--paper); }
.sound-bars { display:flex; align-items:center; gap:2px; height:14px; }
.sound-bars i { width:2px; height:5px; display:block; background:var(--ink); }
.sound-bars i:nth-child(2) { height:12px; }
.sound-pill[aria-pressed="true"] { background:var(--blue); }
.sound-pill[aria-pressed="true"] .sound-bars i { animation:soundBar .55s ease-in-out infinite alternate; }
.sound-pill[aria-pressed="true"] .sound-bars i:nth-child(2) { animation-delay:.12s; }
.sound-pill[aria-pressed="true"] .sound-bars i:nth-child(3) { animation-delay:.24s; }

.scene-rail { position:fixed; z-index:45; left:24px; top:50%; display:flex; flex-direction:column; align-items:center; gap:10px; transform:translateY(-50%); }
.rail-label,.rail-count { writing-mode:vertical-rl; transform:rotate(180deg); font-size:9px; font-weight:800; }
.rail-dots { display:flex; flex-direction:column; align-items:center; gap:8px; }
.rail-dot { width:12px; height:12px; padding:0; border:2px solid var(--ink); border-radius:50%; background:var(--paper); cursor:pointer; transition:height .22s ease,background .22s ease,border-radius .22s ease; }
.rail-dot span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.rail-dot.is-active { height:34px; border-radius:999px; background:var(--blue); }

.stage { position:fixed; z-index:1; inset:74px 0 34px; overflow:hidden; }
.scene { position:absolute; inset:0; overflow:auto; overscroll-behavior:contain; opacity:0; visibility:hidden; transform:translate3d(8vw,0,0) rotate(.5deg); transition:opacity .34s ease,transform .55s cubic-bezier(.22,1,.36,1),visibility .55s; }
.scene.is-active { opacity:1; visibility:visible; transform:translate3d(0,0,0) rotate(0); }
.scene.is-behind { transform:translate3d(-8vw,0,0) rotate(-.5deg); }
.scene-inner { min-height:100%; padding:clamp(30px,4vh,56px) clamp(58px,6vw,104px); }
.eyebrow { width:max-content; max-width:100%; margin:0 0 22px; padding:8px 11px; background:var(--ink); color:var(--yellow); font-size:9px; font-weight:800; letter-spacing:.08em; transform:rotate(-1deg); }
.eyebrow.dark { background:var(--blue); color:var(--ink); }

.hero-grid { display:grid; grid-template-columns:minmax(330px,1.2fr) minmax(310px,.82fr) minmax(190px,.42fr); align-items:center; gap:clamp(26px,4vw,72px); }
.hero-copy { position:relative; z-index:2; }
h1,h2 { margin:0; font-family:var(--display); font-weight:900; text-transform:uppercase; }
h1 { font-size:clamp(56px,6.35vw,105px); line-height:.81; letter-spacing:-.055em; }
h1 span { color:var(--blue); -webkit-text-stroke:3px var(--ink); text-shadow:5px 6px 0 var(--ink); }
.intro { max-width:500px; margin:30px 0 25px; font-size:clamp(13px,1.06vw,17px); font-weight:800; line-height:1.5; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:20px; }
.primary-action { display:inline-flex; align-items:center; gap:22px; padding:14px 18px; border:3px solid var(--ink); border-radius:999px; background:var(--paper); box-shadow:5px 5px 0 var(--ink); cursor:pointer; font-size:10px; font-weight:900; transition:transform .16s ease,box-shadow .16s ease; }
.primary-action i { color:var(--green); font-style:normal; font-size:18px; }
.primary-action:hover { transform:translate(3px,3px) rotate(-1deg); box-shadow:2px 2px 0 var(--ink); }
.text-action { display:inline-flex; align-items:center; gap:9px; padding:8px 0; border:0; border-bottom:3px solid var(--ink); background:none; cursor:pointer; font-size:10px; font-weight:900; }
.text-action span { font-size:20px; transition:transform .2s ease; }
.text-action:hover span { transform:translateX(5px); }
.key-hint { margin:30px 0 0; font-size:8px; font-weight:800; opacity:.66; }
.hero-portrait { position:relative; margin:0; transform:rotate(2deg); transition:transform .26s cubic-bezier(.2,1.8,.4,1); }
.hero-portrait.is-hit { transform:rotate(-4deg) scale(1.035); }
.portrait-window { position:relative; overflow:hidden; aspect-ratio:1/1.08; border:5px solid var(--ink); border-radius:48% 45% 44% 47%/46% 48% 43% 45%; background:var(--blue); box-shadow:11px 13px 0 var(--ink); }
.portrait-window img { width:100%; height:100%; display:block; object-fit:cover; object-position:50% 49%; transform:scale(1.08); transition:transform .9s cubic-bezier(.2,1,.3,1); }
.hero-portrait:hover .portrait-window img { transform:scale(1.13) rotate(-1deg); }
.portrait-flash { position:absolute; inset:0; background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.88),transparent 50%); opacity:0; pointer-events:none; }
.hero-portrait.is-hit .portrait-flash { animation:flash .35s ease; }
.tape-note { position:absolute; z-index:3; top:-16px; left:18%; padding:9px 18px; border:2px solid var(--ink); background:var(--paper); font-size:9px; font-weight:900; transform:rotate(-6deg); box-shadow:2px 2px 0 var(--ink); }
.portrait-stitch { position:absolute; z-index:3; right:-18px; top:15%; writing-mode:vertical-rl; font-weight:900; letter-spacing:6px; }
figcaption { display:flex; justify-content:space-between; gap:18px; margin:20px 5px 0; font-size:9px; }
.signal-stack { align-self:end; margin-bottom:5vh; display:flex; flex-direction:column; gap:24px; }
.signal-card { padding:22px; border:3px solid var(--ink); background:var(--paper); box-shadow:7px 8px 0 var(--ink); transform:rotate(-3deg); font-size:10px; font-weight:900; }
.signal-card p { margin:9px 0; }
.signal-number { display:block; font:52px/1 var(--display); color:var(--green); }
.signal-wave { display:block; margin-top:14px; color:var(--blue); font:43px/.6 var(--display); letter-spacing:-8px; }
.meter-label { display:flex; justify-content:space-between; margin-bottom:8px; font-size:8px; font-weight:900; }
.meter-track { height:11px; border:2px solid var(--ink); background:var(--paper); overflow:hidden; }
.meter-track span { display:block; width:0; height:100%; background:var(--green); transition:width .3s cubic-bezier(.2,1.6,.4,1); }

.origin-layout { display:grid; grid-template-columns:minmax(260px,.78fr) minmax(340px,1.08fr) minmax(330px,.92fr); align-items:center; gap:clamp(28px,4vw,70px); background:rgba(255,254,241,.68); }
.archive-head h2,.map-head h2,.lab-head h2 { font-size:clamp(48px,5.7vw,88px); line-height:.84; letter-spacing:-.045em; }
.archive-head h2 span,.map-head h2 span,.lab-head h2 span { color:var(--blue); -webkit-text-stroke:2px var(--ink); text-shadow:4px 4px 0 var(--ink); }
.archive-head > p:last-child,.map-head > p:last-child,.lab-head > p:last-child { max-width:460px; font-size:11px; font-weight:800; line-height:1.55; }
.evidence-board { position:relative; min-height:min(66vh,630px); border:3px solid var(--ink); background:var(--yellow-soft); box-shadow:10px 10px 0 var(--ink); transform:rotate(-1deg); overflow:hidden; }
.evidence-board::before { content:"EVIDENCE / DO NOT ERASE"; position:absolute; z-index:2; top:12px; left:14px; font-size:8px; font-weight:900; }
.evidence-photo { position:absolute; left:50%; top:50%; width:48%; margin:0; transform:translate(-50%,-50%) rotate(4deg); padding:8px 8px 23px; background:var(--paper); border:2px solid var(--ink); box-shadow:6px 7px 0 rgba(17,17,15,.8); }
.evidence-photo img { width:100%; aspect-ratio:1/1.1; display:block; object-fit:cover; filter:saturate(.82) contrast(1.08); }
.evidence-photo span { position:absolute; bottom:7px; left:10px; font-size:8px; font-weight:900; }
.evidence-pin { position:absolute; z-index:4; display:flex; align-items:center; gap:8px; padding:7px 10px; border:2px solid var(--ink); background:var(--paper); box-shadow:3px 3px 0 var(--ink); cursor:pointer; font-size:8px; font-weight:900; transition:transform .2s ease,background .2s ease; }
.evidence-pin b { width:24px; height:24px; display:grid; place-items:center; border:2px solid var(--ink); border-radius:50%; background:var(--paper); }
.pin-blue { top:13%; right:5%; transform:rotate(5deg); }
.pin-green { left:4%; bottom:20%; transform:rotate(-6deg); }
.pin-white { right:4%; bottom:7%; transform:rotate(2deg); }
.evidence-pin:hover,.evidence-pin.is-active { transform:rotate(0) scale(1.08); background:var(--blue); }
.pin-green:hover,.pin-green.is-active { background:var(--green); color:white; }
.pin-white:hover,.pin-white.is-active { background:var(--paper); box-shadow:5px 5px 0 var(--red); }
.thread-line { position:absolute; z-index:1; height:3px; background:var(--red); transform-origin:left center; }
.line-one { width:52%; left:13%; top:28%; transform:rotate(26deg); }
.line-two { width:58%; left:20%; bottom:22%; transform:rotate(-17deg); }
.story-terminal { position:relative; min-height:520px; padding:24px 26px 78px; border:4px solid var(--ink); border-radius:28px; background:var(--blue); box-shadow:10px 11px 0 var(--ink); }
.story-terminal::before,.story-terminal::after { content:""; position:absolute; width:10px; height:10px; border:2px solid var(--ink); border-radius:50%; background:var(--paper); }
.story-terminal::before { left:12px; top:12px; }.story-terminal::after { right:12px; bottom:12px; }
.terminal-top { display:flex; justify-content:space-between; padding-bottom:16px; border-bottom:3px solid var(--ink); font-size:8px; font-weight:900; }
.terminal-copy { animation:memoryIn .35s ease both; }
.terminal-copy h3 { margin:30px 0 18px; font:clamp(26px,2.5vw,42px)/.98 var(--display); text-transform:uppercase; }
.terminal-copy p { font-size:11px; font-weight:700; line-height:1.62; }
.terminal-next { position:absolute; left:26px; bottom:25px; display:flex; align-items:center; gap:14px; padding:10px 0 7px; border:0; border-bottom:3px solid var(--ink); background:none; cursor:pointer; font-size:9px; font-weight:900; }

.map-layout { display:grid; grid-template-columns:minmax(280px,.72fr) minmax(510px,1.15fr) minmax(260px,.62fr); align-items:center; gap:clamp(30px,4vw,74px); }
.orbit-wrap { position:relative; width:min(58vw,660px); max-width:100%; aspect-ratio:1; justify-self:center; touch-action:none; user-select:none; }
.orbit-groove { position:absolute; border:3px solid var(--ink); border-radius:50%; pointer-events:none; }
.groove-one { inset:4%; border-style:dashed; animation:slowSpin 36s linear infinite; }
.groove-two { inset:17%; border-width:2px; border-color:rgba(17,17,15,.55); }
.orbit-disc { position:absolute; inset:1%; border-radius:50%; transition:transform .65s cubic-bezier(.2,.85,.3,1); }
.map-node { --angle:0deg; position:absolute; z-index:3; top:50%; left:50%; width:94px; min-height:58px; padding:8px; border:3px solid var(--ink); background:var(--paper); box-shadow:4px 4px 0 var(--ink); cursor:pointer; transform:translate(-50%,-50%) rotate(var(--angle)) translateY(clamp(-312px,-25.2vw,-240px)) rotate(calc(var(--angle) * -1)) rotate(calc(var(--orbit-angle,0deg) * -1)); transition:background .2s ease,color .2s ease,box-shadow .2s ease; font-size:7px; font-weight:900; }
.map-node span { display:block; color:var(--green); font:22px/1 var(--display); }
.map-node:hover,.map-node.is-active { background:var(--blue); box-shadow:7px 7px 0 var(--ink); }
.orbit-core { position:absolute; z-index:5; inset:27%; overflow:hidden; border:5px solid var(--ink); border-radius:50% 47% 53% 49%; background:var(--blue); box-shadow:8px 9px 0 var(--ink); cursor:grab; }
.orbit-core:active { cursor:grabbing; }
.orbit-core img { width:100%; height:100%; object-fit:cover; transform:scale(1.55); object-position:50% 36%; filter:saturate(1.13); }
.orbit-core span { position:absolute; left:50%; bottom:12%; transform:translateX(-50%) rotate(-3deg); padding:6px 9px; border:2px solid var(--ink); background:var(--yellow); white-space:nowrap; font-size:8px; font-weight:900; }
.orbit-arrow { position:absolute; z-index:8; top:50%; width:43px; height:43px; border:3px solid var(--ink); border-radius:50%; background:var(--paper); box-shadow:3px 3px 0 var(--ink); cursor:pointer; transform:translateY(-50%); font-size:20px; font-weight:900; }
.orbit-prev { left:-8px; }.orbit-next { right:-8px; }
.map-story { position:relative; padding:26px; border:3px solid var(--ink); background:var(--paper); box-shadow:9px 9px 0 var(--ink); transform:rotate(2deg); }
.map-story-index { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; font-weight:900; }
.map-story-index span { color:var(--green); font:48px/1 var(--display); }
.map-story-index i { height:3px; background:var(--ink); }
.map-status { margin:20px 0 8px; font-size:8px; font-weight:900; color:var(--blue-dark); }
.map-story h3 { margin:0 0 16px; font:clamp(31px,3.3vw,52px)/.92 var(--display); }
.map-story > p:last-of-type { min-height:78px; font-size:10px; font-weight:800; line-height:1.55; }
.map-stamp { width:max-content; margin-top:20px; padding:7px 13px; border:3px solid var(--red); color:var(--red); font-size:9px; font-weight:900; transform:rotate(-8deg); }

.lab-layout { display:grid; grid-template-columns:minmax(260px,.72fr) minmax(330px,.9fr) minmax(270px,.66fr) minmax(230px,.52fr); align-items:center; gap:clamp(22px,3vw,48px); background:rgba(255,234,0,.48); }
.receiver { position:relative; padding:28px; border:5px solid var(--ink); border-radius:36px; background:var(--green); box-shadow:11px 12px 0 var(--ink); transform:rotate(-1deg); }
.receiver-screws { position:absolute; inset:12px; display:flex; justify-content:space-between; pointer-events:none; }
.receiver-screws i { width:8px; height:8px; border:1px solid var(--ink); border-radius:50%; background:var(--paper); }
.receiver-screws i:nth-child(3),.receiver-screws i:nth-child(4) { align-self:flex-end; }
.receiver-display { padding:19px; border:3px solid var(--ink); border-radius:10px; background:var(--ink); color:var(--yellow); box-shadow:inset 0 0 22px rgba(16,198,217,.28); }
.receiver-display > span { display:block; font-size:8px; }
.receiver-display > b { display:block; margin:8px 0 13px; font:clamp(42px,4.2vw,68px)/1 var(--display); letter-spacing:.03em; }
.waveform { display:flex; height:36px; align-items:center; gap:4px; overflow:hidden; }
.waveform i { flex:1; min-width:2px; height:8px; background:var(--blue); transform:scaleY(var(--wave,1)); transition:transform .2s ease; }
.waveform.is-live i { animation:wave .6s ease-in-out infinite alternate; }
.waveform i:nth-child(2n) { animation-delay:.12s; }.waveform i:nth-child(3n) { animation-delay:.24s; }
.frequency-control { display:block; margin:23px 0; }
.frequency-control > span { display:block; margin-bottom:10px; font-size:8px; font-weight:900; }
.frequency-control input { width:100%; accent-color:var(--blue); cursor:ew-resize; }
.frequency-control small { display:flex; justify-content:space-between; font-size:7px; }
.receiver-actions { display:flex; align-items:center; gap:20px; }
.knob { width:78px; height:78px; position:relative; border:4px solid var(--ink); border-radius:50%; background:var(--paper); box-shadow:4px 4px 0 var(--ink); cursor:pointer; }
.knob i { position:absolute; left:50%; top:7px; width:4px; height:27px; background:var(--ink); transform:translateX(-50%); transform-origin:50% 31px; transition:transform .5s ease; }
.knob span { position:absolute; left:50%; bottom:13px; transform:translateX(-50%); font-size:7px; font-weight:900; }
.knob.is-scanning i { animation:knobTurn .8s ease; }
.receiver-actions > div { display:flex; align-items:center; gap:9px; font-size:7px; }
.led { width:14px; height:14px; display:block; border:2px solid var(--ink); border-radius:50%; background:var(--red); box-shadow:0 0 0 var(--red); }
.led.is-live { background:var(--yellow); box-shadow:0 0 18px var(--yellow); }
.beat-pad { padding:25px; border:4px solid var(--ink); background:var(--blue); box-shadow:9px 10px 0 var(--ink); transform:rotate(1deg); }
.beat-pad-top { display:flex; justify-content:space-between; font-size:8px; font-weight:900; }
.beat-pad-top b { font:32px/1 var(--display); }
.big-beat { width:100%; aspect-ratio:1; max-height:260px; display:grid; place-content:center; margin:16px 0; border:6px solid var(--ink); border-radius:50% 47% 52% 48%; background:var(--yellow); box-shadow:inset 0 -13px 0 rgba(17,17,15,.12),6px 8px 0 var(--ink); cursor:pointer; transition:transform .12s ease,box-shadow .12s ease; }
.big-beat:active,.big-beat.is-hit { transform:translateY(6px) scale(.96); box-shadow:inset 0 -4px 0 rgba(17,17,15,.12),2px 2px 0 var(--ink); }
.big-beat span { font:clamp(44px,4vw,72px)/.8 var(--display); }.big-beat i { font-size:8px; font-style:normal; font-weight:900; }
.beat-pad > p { font-size:8px; font-weight:800; line-height:1.45; }
.beat-lights { display:flex; gap:5px; }
.beat-lights i { flex:1; height:8px; border:2px solid var(--ink); background:var(--paper); }
.beat-lights i.is-on { background:var(--green); }
.object-scanner { padding:20px; border:3px solid var(--ink); background:var(--paper); box-shadow:7px 7px 0 var(--ink); transform:rotate(-2deg); }
.scanner-head { display:flex; justify-content:space-between; padding-bottom:10px; border-bottom:2px solid var(--ink); font-size:7px; font-weight:900; }
.relic-card { width:100%; min-height:250px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; margin:16px 0; padding:16px; border:3px solid var(--ink); background:var(--yellow); cursor:pointer; transition:transform .2s ease,background .2s ease; }
.relic-card:hover { transform:rotate(2deg) scale(1.02); background:var(--yellow-soft); }
.relic-symbol { font:72px/1 var(--display); color:var(--blue-dark); }
.relic-card b { font:23px/1 var(--display); }
.relic-card small { font-size:8px; font-weight:800; line-height:1.5; }
.object-scanner > p { font-size:7px; font-weight:900; }

.statusbar { position:fixed; z-index:50; left:0; right:0; bottom:0; height:34px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:20px; padding:0 24px; border-top:3px solid var(--ink); background:var(--ink); color:var(--yellow); font-size:8px; font-weight:900; overflow:hidden; }
.status-led { width:7px; height:7px; display:inline-block; border-radius:50%; background:var(--green); box-shadow:0 0 9px var(--green); }
.status-marquee { overflow:hidden; white-space:nowrap; }
.status-marquee span { display:inline-block; min-width:max-content; animation:marquee 18s linear infinite; }
.mobile-dock { display:none; }

.secret-overlay[hidden] { display:none; }
.secret-overlay { position:fixed; z-index:150; inset:0; display:grid; place-items:center; padding:20px; }
.secret-backdrop { position:absolute; inset:0; background:rgba(17,17,15,.78); backdrop-filter:blur(8px); animation:fadeIn .35s ease; }
.secret-card { position:relative; width:min(760px,95vw); max-height:88vh; overflow:auto; padding:clamp(27px,5vw,62px); border:5px solid var(--ink); background:var(--yellow); box-shadow:15px 17px 0 var(--blue); text-align:center; animation:secretIn .6s cubic-bezier(.16,1,.3,1); }
.secret-close { position:absolute; right:15px; top:15px; width:40px; height:40px; border:3px solid var(--ink); border-radius:50%; background:var(--paper); cursor:pointer; font-size:20px; font-weight:900; }
.secret-card .eyebrow { margin:0 auto 25px; }
.secret-eye { display:flex; justify-content:center; gap:10px; margin-bottom:22px; }
.secret-eye i { width:58px; height:58px; position:relative; border:4px solid var(--ink); border-radius:50%; background:white; }
.secret-eye i::after { content:""; position:absolute; width:16px; height:16px; border-radius:50%; background:var(--ink); top:9px; right:8px; }
.secret-eye i:last-child::after { top:25px; right:26px; }
.secret-card h2 { font-size:clamp(45px,6.3vw,88px); line-height:.82; letter-spacing:-.04em; color:var(--blue); -webkit-text-stroke:2px var(--ink); text-shadow:4px 5px 0 var(--ink); }
.secret-card > p:not(.eyebrow) { max-width:620px; margin:27px auto 16px; font-size:11px; font-weight:800; line-height:1.65; }
.secret-card > strong { display:block; max-width:560px; margin:0 auto; font-size:13px; line-height:1.5; }
.secret-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:30px; }
.toast { position:fixed; z-index:140; left:50%; bottom:56px; transform:translate(-50%,30px); opacity:0; padding:12px 16px; border:3px solid var(--ink); background:var(--paper); box-shadow:5px 5px 0 var(--ink); font-size:9px; font-weight:900; pointer-events:none; transition:opacity .25s ease,transform .25s ease; }
.toast.is-visible { opacity:1; transform:translate(-50%,0); }
.noscript { position:fixed; z-index:300; inset:20px; padding:20px; background:var(--paper); border:3px solid var(--ink); }

body.signal-pop .clay-backdrop { animation:signalPop .35s ease; }

@keyframes sceneSwipe { 0%{transform:scaleX(0);transform-origin:left}45%{transform:scaleX(1);transform-origin:left}55%{transform:scaleX(1);transform-origin:right}100%{transform:scaleX(0);transform-origin:right} }
@keyframes bootBob { to{transform:translateY(-8px) rotate(4deg)} }
@keyframes bootLoad { from{transform:scaleX(0)}to{transform:scaleX(1)} }
@keyframes soundBar { from{height:4px}to{height:14px} }
@keyframes flash { 0%{opacity:0}45%{opacity:.8}100%{opacity:0} }
@keyframes memoryIn { from{opacity:0;transform:translateY(16px) rotate(.5deg)}to{opacity:1;transform:none} }
@keyframes slowSpin { to{transform:rotate(360deg)} }
@keyframes wave { from{transform:scaleY(.35)}to{transform:scaleY(3.8)} }
@keyframes knobTurn { to{transform:translateX(-50%) rotate(720deg)} }
@keyframes marquee { to{transform:translateX(-50%)} }
@keyframes fadeIn { from{opacity:0} }
@keyframes secretIn { from{opacity:0;transform:scale(.72) rotate(-5deg)}to{opacity:1;transform:none} }
@keyframes signalPop { 50%{transform:translate3d(var(--bg-x,0),var(--bg-y,0),0) scale(1.1);filter:saturate(2) contrast(1.15)} }

@media (max-width: 1240px) {
  .topbar { grid-template-columns:1fr auto; }
  .desktop-nav { display:none; }
  .hero-grid { grid-template-columns:1.1fr .85fr; }
  .signal-stack { display:none; }
  .origin-layout { grid-template-columns:.72fr 1fr; }
  .story-terminal { grid-column:1/-1; min-height:0; }
  .origin-layout,.map-layout,.lab-layout { padding-top:30px; padding-bottom:45px; }
  .map-layout { grid-template-columns:.75fr 1.2fr; }
  .map-story { grid-column:1/-1; }
  .lab-layout { grid-template-columns:.8fr 1fr 1fr; }
  .object-scanner { grid-column:1/-1; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:20px; }
  .object-scanner .relic-card { min-height:150px; margin:0; }
}

@media (max-width: 820px) {
  body { overflow:hidden; }
  .cursor,.scene-rail,.sound-pill,.statusbar { display:none; }
  .topbar { min-height:62px; padding:10px 13px; }
  .wordmark > span:last-child { display:none; }
  .wordmark-eye { width:34px; height:34px; }
  .pill { min-height:35px; padding:0 12px; }
  .stage { inset:62px 0 70px; }
  .scene-inner { padding:28px 18px 42px; }
  .hero-grid,.origin-layout,.map-layout,.lab-layout { display:flex; flex-direction:column; align-items:stretch; gap:34px; }
  .hero-copy { order:1; }
  .hero-portrait { order:2; width:min(82vw,480px); align-self:center; }
  h1 { font-size:clamp(50px,16.3vw,88px); }
  .intro { margin:25px 0 21px; }
  .key-hint { display:none; }
  .archive-head h2,.map-head h2,.lab-head h2 { font-size:clamp(48px,14vw,78px); }
  .evidence-board { width:100%; min-height:520px; }
  .story-terminal { min-height:500px; }
  .orbit-wrap { width:min(94vw,600px); align-self:center; }
  .map-node { width:76px; min-height:48px; transform:translate(-50%,-50%) rotate(var(--angle)) translateY(clamp(-278px,-43vw,-178px)) rotate(calc(var(--angle) * -1)) rotate(calc(var(--orbit-angle,0deg) * -1)); }
  .map-node b { display:none; }
  .orbit-arrow { top:auto; bottom:3%; }
  .receiver,.beat-pad,.object-scanner { width:100%; }
  .big-beat { max-height:none; width:min(74vw,320px); margin:20px auto; }
  .object-scanner { display:block; }
  .object-scanner .relic-card { margin:16px 0; min-height:230px; }
  .mobile-dock { position:fixed; z-index:55; left:0; right:0; bottom:0; height:70px; display:grid; grid-template-columns:repeat(4,1fr); border-top:3px solid var(--ink); background:var(--paper); }
  .mobile-dock button { border:0; border-right:2px solid var(--ink); background:transparent; font-size:7px; font-weight:900; }
  .mobile-dock button:last-child { border-right:0; }
  .mobile-dock button span { display:block; margin-bottom:3px; font:18px/1 var(--display); color:var(--green); }
  .mobile-dock button.is-active { background:var(--blue); }
  .toast { bottom:88px; max-width:calc(100vw - 30px); text-align:center; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
}