:root {
  --ink: #04112f;
  --blue: #092b70;
  --electric: #1b4fb4;
  --red: #ea3038;
  --red-deep: #920d1d;
  --paper: #c9945d;
  --paper-dark: #7e512f;
  --cream: #f7e6bd;
  --gold: #ffc95e;
  --white: #fff9eb;
  --line: rgba(255,255,255,.22);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--ink); color: var(--white); }
html { color-scheme: dark; }
body { overflow: hidden; font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif; }
button, a, input { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.grain { position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .14; mix-blend-mode: soft-light; 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='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
.cursor-glow { position: fixed; z-index: 90; width: 220px; height: 220px; border-radius: 50%; pointer-events: none; transform: translate(-50%,-50%); background: radial-gradient(circle, rgba(255,201,94,.13), transparent 66%); opacity: 0; transition: opacity .3s; }
.intro { position: fixed; inset: 0; z-index: 999; display: grid; place-content: center; justify-items: center; gap: 20px; background: var(--ink); transition: transform .8s cubic-bezier(.76,0,.24,1), visibility .8s; }
.intro.is-gone { transform: translateY(-105%); visibility: hidden; }
.intro p { margin: 0; color: var(--gold); font: 700 11px/1 ui-monospace, monospace; letter-spacing: .18em; }
.intro-bag { position: relative; width: 84px; height: 94px; background: var(--paper); clip-path: polygon(4% 2%,96% 2%,92% 96%,8% 96%); animation: bagFloat .9s ease-in-out infinite alternate; }
.intro-bag::before { content: ""; position: absolute; inset: 0 0 auto; height: 24px; border-bottom: 2px solid var(--paper-dark); background: linear-gradient(28deg, transparent 48%, var(--paper-dark) 49% 51%, transparent 52%), linear-gradient(-28deg, transparent 48%, var(--paper-dark) 49% 51%, transparent 52%); }
.intro-bag span { position: absolute; top: 44px; width: 13px; height: 13px; border-radius: 50%; background: var(--ink); }
.intro-bag span:first-child { left: 21px; }.intro-bag span:last-child { right: 21px; }
@keyframes bagFloat { to { transform: translateY(-8px) rotate(1deg); } }

.topbar { position: fixed; inset: 0 0 auto 0; z-index: 50; min-height: 82px; padding: 14px clamp(18px, 3vw, 52px); display: flex; align-items: center; gap: 24px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(4,17,47,.92), rgba(4,17,47,.25)); backdrop-filter: blur(16px); }
.brand { display: flex; align-items: center; gap: 10px; padding: 0; color: white; border: 0; background: none; cursor: pointer; text-align: left; font: 800 11px/1.05 ui-monospace, monospace; letter-spacing: .08em; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; background: var(--paper); color: var(--ink); clip-path: polygon(0 0,100% 0,91% 88%,52% 100%,8% 88%); font: 700 12px ui-monospace, monospace; }
nav { display: flex; gap: 1px; margin-left: auto; }
.nav-link { position: relative; border: 0; background: transparent; padding: 12px 10px; cursor: pointer; font: 700 11px ui-monospace, monospace; letter-spacing: .05em; opacity: .58; transition: opacity .2s, color .2s; }
.nav-link span { display: block; position: absolute; top: 1px; left: 10px; font-size: 8px; opacity: .5; }
.nav-link::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 2px; background: var(--gold); transform: scaleX(0); transition: transform .25s; }
.nav-link:hover, .nav-link.is-active { opacity: 1; color: var(--gold); }
.nav-link.is-active::after { transform: scaleX(1); }
.top-actions, .hero-actions, .lab-actions { display: flex; gap: 10px; align-items: center; }
.button { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); padding: 0 18px; color: white; text-decoration: none; cursor: pointer; font: 800 12px ui-monospace, monospace; letter-spacing: .05em; box-shadow: 5px 5px 0 rgba(0,0,0,.26); transition: transform .2s, box-shadow .2s, background .2s; }
.button:hover { transform: translate(-2px,-2px); box-shadow: 8px 8px 0 rgba(0,0,0,.3); }
.button-red { background: var(--red); border-color: #ff747b; }
.button-ghost { width: 46px; padding: 0; background: rgba(255,255,255,.08); }
.button-paper { background: var(--paper); color: var(--ink); border-color: var(--cream); }
.icon-button { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); background: rgba(255,255,255,.07); cursor: pointer; }
.sound-bars { display: inline-flex; align-items: end; height: 16px; gap: 3px; }
.sound-bars i { display: block; width: 2px; height: 6px; background: var(--gold); transition: height .2s; }
.sound-bars i:nth-child(2) { height: 14px; }.sound-bars i:nth-child(3) { height: 9px; }
.sound-toggle[aria-pressed="true"] .sound-bars i { animation: soundBar .7s infinite alternate; }
.sound-toggle[aria-pressed="true"] .sound-bars i:nth-child(2) { animation-delay: -.25s; }.sound-toggle[aria-pressed="true"] .sound-bars i:nth-child(3) { animation-delay: -.5s; }
@keyframes soundBar { from { height: 4px; } to { height: 15px; } }
.text-button { border: 0; background: transparent; padding: 12px 6px; color: var(--cream); cursor: pointer; font: 800 11px ui-monospace, monospace; letter-spacing: .07em; }
.text-button span { color: var(--gold); }

.scene { position: fixed; inset: 0; min-height: 100dvh; padding: 116px clamp(22px, 5vw, 78px) 44px; opacity: 0; visibility: hidden; transform: translateX(6vw) scale(.985); transition: opacity .52s ease, transform .72s cubic-bezier(.2,.8,.2,1), visibility .52s; overflow: auto; overscroll-behavior: contain; }
.scene::before { content: ""; position: fixed; inset: 82px 0 0; z-index: -1; pointer-events: none; background: linear-gradient(110deg, rgba(255,255,255,.025), transparent 24% 70%, rgba(234,48,56,.035)); }
.scene.is-active { opacity: 1; visibility: visible; transform: translateX(0) scale(1); z-index: 2; }
.scene.is-exiting { transform: translateX(-5vw) scale(.985); }
.scene-bg, .scene-wash { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scene-bg { z-index: -3; }
.scene-wash { z-index: -2; }
.eyebrow { font: 700 11px ui-monospace, monospace; letter-spacing: .13em; text-transform: uppercase; color: var(--gold); }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--red); margin-right: 8px; box-shadow: 0 0 0 0 rgba(234,48,56,.7); animation: pulse 1.8s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 12px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
h1, h2 { font-family: Impact, "Arial Black", sans-serif; font-weight: 400; text-transform: uppercase; }
h1 { margin: 18px 0 22px; font-size: clamp(3.6rem, 8vw, 8.9rem); line-height: .78; letter-spacing: -.055em; text-wrap: balance; }
h1 span { display: block; filter: drop-shadow(0 8px 0 rgba(1,8,25,.28)); }
h1 span:last-child { color: var(--red); -webkit-text-stroke: 2px var(--cream); text-shadow: 5px 5px 0 var(--red-deep); }
h2 { margin: 14px 0 26px; font-size: clamp(3rem, 6.7vw, 7.2rem); line-height: .82; letter-spacing: -.04em; }

.hero { display: grid; grid-template-columns: 1.08fr .72fr; align-items: center; gap: clamp(24px, 4vw, 70px); overflow: hidden; }
.city-bg { filter: saturate(.95) contrast(1.04) brightness(.65); transform: scale(1.04); }
.city-wash { background: radial-gradient(circle at 72% 44%, transparent 5%, rgba(5,21,55,.16) 34%, rgba(3,14,40,.84) 87%), linear-gradient(90deg, rgba(4,14,42,.88), rgba(4,14,42,.08) 78%); }
.hero-copy { position: relative; z-index: 2; max-width: 780px; }
.hero-lede { max-width: 620px; margin: 0; font-size: clamp(1rem, 1.5vw, 1.24rem); line-height: 1.6; color: rgba(255,249,236,.84); }
.hero-actions { margin-top: 24px; flex-wrap: wrap; }
.hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); max-width: 650px; margin-top: 38px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hero-stats > div { padding: 13px 12px 13px 0; border-right: 1px solid var(--line); }
.hero-stats > div + div { padding-left: 15px; }
.hero-stats > div:last-child { border: 0; }
.hero-stats small { display: block; margin-bottom: 5px; font: 700 9px ui-monospace, monospace; color: var(--gold); letter-spacing: .1em; }
.hero-stats strong { font: 800 11px ui-monospace, monospace; }
.hero-card { width: min(35vw, 500px); justify-self: center; position: relative; margin: 0; padding: 14px; border: 0; background: var(--cream); color: var(--ink); cursor: pointer; transform: rotate(2deg); box-shadow: 24px 28px 0 rgba(1,8,25,.45); transform-style: preserve-3d; transition: transform .18s ease-out, box-shadow .3s; }
.hero-card:hover { box-shadow: 32px 36px 0 rgba(1,8,25,.52); }
.hero-card img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; filter: saturate(.93) contrast(1.03); }
.hero-card-caption { display: flex; justify-content: space-between; gap: 12px; padding: 12px 4px 2px; font: 700 10px ui-monospace, monospace; letter-spacing: .04em; }
.card-secret { position: absolute; inset: 14px 14px 43px; display: grid; place-items: center; padding: 30px; background: rgba(4,17,47,.9); color: var(--cream); font: 900 clamp(1.2rem,2vw,2rem)/1.05 Impact, sans-serif; letter-spacing: .04em; opacity: 0; transform: translateZ(15px) scale(.94); transition: opacity .3s, transform .3s; }
.hero-card.is-revealed .card-secret { opacity: 1; transform: translateZ(15px) scale(1); }
.tape { position: absolute; width: 96px; height: 28px; z-index: 2; background: rgba(177,127,72,.78); box-shadow: inset 0 0 12px rgba(255,255,255,.24); }
.tape-a { top: -8px; left: -25px; transform: rotate(-25deg); }.tape-b { bottom: -6px; right: -20px; transform: rotate(-18deg); }
.signal-readout { position: absolute; left: clamp(22px,5vw,78px); right: clamp(22px,5vw,78px); bottom: 24px; display: flex; align-items: center; gap: 14px; font: 700 9px ui-monospace,monospace; letter-spacing: .1em; color: rgba(255,255,255,.6); }
.readout-line { height: 1px; flex: 1; background: var(--line); }

.story-scene { background: linear-gradient(135deg, #06173f, #0d347d); display: grid; grid-template-columns: 1.05fr .95fr; align-items: stretch; gap: clamp(30px, 5vw, 80px); }
.story-art { position: relative; min-height: 620px; border: 1px solid rgba(255,255,255,.2); overflow: hidden; box-shadow: 22px 24px 0 rgba(0,0,0,.25); }
.story-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 90px rgba(4,17,47,.35); }
.story-art img { width: 100%; height: 100%; object-fit: cover; }
.story-art-label { position: absolute; z-index: 2; left: 18px; bottom: 18px; padding: 12px 14px; background: var(--cream); color: var(--ink); transform: rotate(-1deg); box-shadow: 7px 7px 0 rgba(0,0,0,.25); }
.story-art-label span, .story-art-label strong { display: block; }.story-art-label span { font: 700 9px ui-monospace,monospace; letter-spacing: .1em; }.story-art-label strong { margin-top: 3px; font-size: 14px; }
.hotspot { position: absolute; z-index: 5; width: 36px; height: 36px; border: 1px solid white; border-radius: 50%; background: rgba(234,48,56,.86); box-shadow: 0 0 0 7px rgba(234,48,56,.18); color: white; cursor: pointer; font-size: 20px; transition: transform .2s; }
.hotspot:hover { transform: scale(1.18) rotate(45deg); }.hotspot-phone { left: 53%; top: 48%; }.hotspot-cross { left: 35%; top: 30%; }.hotspot-tape { left: 12%; bottom: 12%; }
.story-copy { align-self: center; max-width: 720px; }
.story-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.chapter-controls { display: flex; gap: 8px; padding-bottom: 10px; }
.round-button { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: rgba(255,255,255,.07); cursor: pointer; font-size: 18px; transition: background .2s, transform .2s; }
.round-button:hover { background: var(--red); transform: rotate(-8deg); }
.chapter { min-height: 415px; padding-top: 18px; animation: chapterIn .45s ease both; }
.chapter.is-changing { animation: chapterOut .2s ease both; }
@keyframes chapterIn { from { opacity: 0; transform: translateY(18px); } }
@keyframes chapterOut { to { opacity: 0; transform: translateY(-12px); } }
.chapter-kicker { margin: 0; color: var(--paper); font: 800 12px ui-monospace,monospace; letter-spacing: .08em; }
.chapter h2 { color: var(--cream); font-size: clamp(3.1rem, 5.5vw, 6.8rem); }
.chapter > p:last-child { max-width: 690px; font-size: 1.05rem; line-height: 1.7; color: rgba(255,249,235,.8); }
.chapter-track { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-top: 10px; }
.chapter-dot { height: 38px; border: 0; border-top: 2px solid rgba(255,255,255,.23); background: transparent; color: rgba(255,255,255,.55); text-align: left; cursor: pointer; font: 700 10px ui-monospace,monospace; }
.chapter-dot.is-active { border-color: var(--gold); color: var(--gold); }
.field-note { min-height: 65px; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; margin-top: 18px; padding: 12px 16px; border: 1px dashed rgba(247,230,189,.35); color: var(--cream); }
.field-note span { font: 800 9px ui-monospace,monospace; letter-spacing: .1em; color: var(--gold); }.field-note p { margin: 0; font-size: .9rem; line-height: 1.45; }

.identity-scene { background: var(--paper); color: var(--ink); display: grid; grid-template-columns: minmax(360px,.9fr) minmax(440px,1fr); align-items: center; gap: clamp(35px,7vw,110px); overflow: hidden; }
.identity-scene::before { background: repeating-linear-gradient(0deg, transparent 0 39px, rgba(69,39,21,.08) 40px), repeating-linear-gradient(90deg, transparent 0 39px, rgba(69,39,21,.06) 40px); }
.identity-copy { position: relative; z-index: 2; max-width: 620px; }
.identity-copy .eyebrow { color: var(--red-deep); }.identity-copy h2 { color: var(--ink); }.identity-copy > p:not(.eyebrow) { max-width: 550px; font-size: 1.08rem; line-height: 1.6; }
.gear-list { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 24px; }
.gear-chip { min-height: 82px; display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto auto; align-content: center; column-gap: 10px; padding: 12px; text-align: left; border: 2px solid rgba(4,17,47,.25); background: rgba(255,249,235,.25); color: var(--ink); cursor: pointer; transition: background .2s, transform .2s, border .2s; }
.gear-chip > span { grid-row: 1 / 3; align-self: center; font: 900 27px Georgia, serif; color: var(--red-deep); text-align: center; }.gear-chip strong { font: 800 11px ui-monospace,monospace; }.gear-chip small { margin-top: 4px; font-size: 11px; opacity: .67; }
.gear-chip:hover { transform: translateY(-2px); }.gear-chip.is-equipped { background: var(--ink); color: var(--white); border-color: var(--red); box-shadow: 5px 5px 0 var(--red); }
.lab-actions { margin-top: 18px; flex-wrap: wrap; }.identity-copy .text-button { color: var(--ink); }
.look-board { position: relative; width: min(47vw, 610px); justify-self: center; padding: 16px 16px 12px; background: var(--cream); transform: rotate(1.5deg); box-shadow: 27px 30px 0 rgba(69,39,21,.25); transform-style: preserve-3d; transition: transform .2s; }
.board-tape { position: absolute; z-index: 3; width: 140px; height: 38px; top: -15px; left: 50%; transform: translateX(-50%) rotate(-2deg); background: rgba(128,78,39,.55); }
.look-image-wrap { position: relative; overflow: hidden; }
.look-image-wrap img { display: block; width: 100%; aspect-ratio: 1.13; object-fit: cover; object-position: 50% 32%; transition: filter .35s, transform .5s; }
.look-board:has(.equipped-tag.is-on) img { filter: saturate(1.08) contrast(1.05); transform: scale(1.025); }
.equipped-tag { position: absolute; padding: 8px 9px; background: var(--red); color: white; box-shadow: 4px 4px 0 var(--ink); font: 800 9px ui-monospace,monospace; opacity: 0; transform: scale(.7) rotate(-5deg); transition: opacity .25s, transform .25s; }
.equipped-tag.is-on { opacity: 1; transform: scale(1) rotate(-2deg); }.tag-headphones { top: 15px; left: 15px; }.tag-beanie { top: 15px; right: 15px; }.tag-cross { bottom: 18px; left: 15px; }.tag-phone { bottom: 18px; right: 15px; }
.board-footer { display: grid; grid-template-columns: 1fr auto; gap: 22px; align-items: center; padding: 12px 3px 0; font: 800 9px ui-monospace,monospace; letter-spacing: .06em; }
.meter { width: 190px; height: 7px; margin-top: 5px; background: rgba(4,17,47,.13); overflow: hidden; }.meter i { display: block; width: 68%; height: 100%; background: var(--red); transition: width .35s; }
.identity-marquee { position: absolute; left: 0; right: 0; bottom: 17px; overflow: hidden; border-block: 1px solid rgba(4,17,47,.2); color: rgba(4,17,47,.5); white-space: nowrap; font: 900 14px ui-monospace,monospace; letter-spacing: .16em; }
.identity-marquee span { display: inline-block; min-width: 200%; padding: 9px 0; animation: marquee 20s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }

.roadmap-scene { display: grid; grid-template-columns: .68fr 1.12fr .62fr; align-items: center; gap: clamp(18px,3vw,50px); overflow: hidden; }
.route-bg { filter: brightness(.42) saturate(.8); transform: scale(1.08); }.route-wash { background: radial-gradient(circle at 55% 51%, rgba(18,57,130,.16), rgba(4,17,47,.95) 75%); }
.route-intro { align-self: center; z-index: 2; }.route-intro h2 { font-size: clamp(3.3rem,5.5vw,6.7rem); }.route-intro > p:last-child { max-width: 450px; line-height: 1.6; color: rgba(255,249,235,.72); }
.orbit-shell { position: relative; width: min(42vw, 550px); aspect-ratio: 1; justify-self: center; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.orbit-ring { position: absolute; inset: 11%; border: 1px solid rgba(247,230,189,.4); border-radius: 50%; box-shadow: 0 0 70px rgba(255,201,94,.08); }.ring-b { inset: 24%; border-style: dashed; animation: rotate 26s linear infinite reverse; }
@keyframes rotate { to { transform: rotate(360deg); } }
.orbit-runner { position: absolute; z-index: 4; width: 15px; height: 15px; left: calc(50% - 7px); top: 10%; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 8px rgba(234,48,56,.2), 0 0 24px var(--red); animation: orbitBounce 2.6s ease-in-out infinite alternate; }
@keyframes orbitBounce { to { transform: translateY(24px) scale(.7); } }
.orbit-core { position: absolute; z-index: 5; inset: 32%; display: grid; place-content: center; justify-items: center; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; color: var(--ink); background: radial-gradient(circle at 35% 28%, #fff6d3, #f5c973 56%, #a05b2f 100%); box-shadow: 0 0 60px rgba(255,201,94,.36); cursor: pointer; transition: transform .3s; }
.orbit-core:hover { transform: scale(1.045); }.orbit-core small, .orbit-core em { font: 800 9px ui-monospace,monospace; letter-spacing: .12em; }.orbit-core strong { font: 400 clamp(3rem,5vw,5.4rem)/.9 Impact,sans-serif; }.orbit-core em { font-style: normal; opacity: .58; margin-top: 5px; }
.moon-face { position: absolute; inset: 0; border-radius: 50%; opacity: .2; background: radial-gradient(circle at 28% 33%, #85582f 0 5%, transparent 6%), radial-gradient(circle at 68% 58%, #85582f 0 8%, transparent 9%), radial-gradient(circle at 47% 75%, #85582f 0 4%, transparent 5%); }
.route-node { position: absolute; z-index: 7; width: 84px; height: 84px; display: grid; place-content: center; justify-items: center; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; background: rgba(4,17,47,.78); backdrop-filter: blur(8px); cursor: pointer; transition: transform .3s, background .3s, box-shadow .3s; }.route-node span { font: 700 9px ui-monospace,monospace; color: var(--gold); }.route-node strong { margin-top: 4px; font: 900 12px ui-monospace,monospace; }.route-node:hover, .route-node.is-active { transform: scale(1.12); background: var(--red); box-shadow: 0 0 0 9px rgba(234,48,56,.16); }.route-node.is-active span { color: white; }
.node-1 { left: calc(50% - 42px); top: 0; }.node-2 { right: 0; top: calc(50% - 42px); }.node-3 { left: calc(50% - 42px); bottom: 0; }.node-4 { left: 0; top: calc(50% - 42px); }
.route-card { position: relative; align-self: center; max-width: 400px; padding: 24px; border: 1px solid rgba(255,255,255,.24); background: rgba(4,17,47,.68); backdrop-filter: blur(18px); box-shadow: 14px 16px 0 rgba(0,0,0,.23); }.route-card > span { font: 800 9px ui-monospace,monospace; color: var(--gold); letter-spacing: .08em; }.route-card h3 { margin: 16px 0 12px; font-size: clamp(1.45rem,2vw,2.15rem); line-height: 1.05; text-transform: uppercase; }.route-card p { margin: 0; font-size: .95rem; line-height: 1.6; color: rgba(255,249,235,.72); }.route-progress { height: 5px; margin-top: 24px; background: rgba(255,255,255,.12); }.route-progress i { display: block; height: 100%; width: 25%; background: var(--red); transition: width .5s; }

.frequency-scene { background: radial-gradient(circle at 72% 35%, #14449b 0, #071c4c 37%, #030d28 76%); display: grid; grid-template-columns: .78fr 1.1fr; align-items: center; gap: clamp(45px,8vw,130px); overflow: hidden; }
.frequency-scene::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .12; background: repeating-linear-gradient(90deg, transparent 0 8vw, rgba(255,255,255,.2) calc(8vw + 1px), transparent calc(8vw + 2px)); }
.freq-copy { align-self: center; max-width: 620px; }.freq-copy h2 { color: var(--red); -webkit-text-stroke: 1px var(--cream); font-size: clamp(5rem,10vw,10.5rem); margin-block: 5px 10px; }.freq-copy > p:not(.eyebrow) { max-width: 520px; line-height: 1.6; color: rgba(255,249,235,.74); }
.dial-readout { margin-top: 25px; font: 400 clamp(3rem,6vw,6rem)/1 Impact,sans-serif; color: var(--cream); }.dial-readout small { margin-left: 8px; font: 800 11px ui-monospace,monospace; color: var(--gold); }
.frequency-dial { width: 100%; height: 32px; margin-top: 8px; appearance: none; background: transparent; cursor: ew-resize; }.frequency-dial::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(90deg, var(--red), var(--gold)); }.frequency-dial::-moz-range-track { height: 4px; background: linear-gradient(90deg, var(--red), var(--gold)); }.frequency-dial::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -12px; border: 5px solid var(--cream); border-radius: 50%; appearance: none; background: var(--red); box-shadow: 0 0 0 6px rgba(234,48,56,.2); }.frequency-dial::-moz-range-thumb { width: 20px; height: 20px; border: 5px solid var(--cream); border-radius: 50%; background: var(--red); }
.dial-labels { display: flex; justify-content: space-between; font: 700 9px ui-monospace,monospace; color: rgba(255,255,255,.5); }.dial-labels span:nth-child(2) { color: var(--gold); }
.signal-strength { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin-top: 28px; font: 800 9px ui-monospace,monospace; letter-spacing: .08em; }.signal-strength > div { height: 8px; background: rgba(255,255,255,.1); overflow: hidden; }.signal-strength i { display: block; height: 100%; width: 8%; background: var(--red); transition: width .15s; }
.receiver { position: relative; width: min(46vw, 620px); justify-self: center; padding: 25px; border: 2px solid rgba(247,230,189,.42); border-radius: 38px; background: linear-gradient(145deg, #0e357e, #051637); box-shadow: 30px 34px 0 rgba(0,0,0,.28), inset 0 0 0 8px rgba(0,0,0,.15); }.receiver::before { content: ""; position: absolute; width: 85px; height: 9px; top: 11px; left: calc(50% - 42px); border-radius: 9px; background: rgba(0,0,0,.55); }
.receiver-top { display: flex; justify-content: space-between; margin: 4px 4px 18px; font: 800 9px ui-monospace,monospace; letter-spacing: .09em; color: var(--gold); }.receiver-top i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 12px var(--red); }
.waveform { height: 86px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; border: 1px solid rgba(255,255,255,.15); background: rgba(0,0,0,.18); }.waveform span { width: 5px; height: 16%; background: var(--gold); box-shadow: 0 0 9px rgba(255,201,94,.35); transition: height .2s; }.waveform span:nth-child(2n) { height: 55%; }.waveform span:nth-child(3n) { height: 82%; }.receiver.is-tuned .waveform span { animation: wave .7s ease-in-out infinite alternate; }.receiver.is-tuned .waveform span:nth-child(2n) { animation-delay: -.4s; }.receiver.is-tuned .waveform span:nth-child(3n) { animation-delay: -.2s; }
@keyframes wave { to { height: 90%; } }
.broadcast { min-height: 125px; display: grid; place-content: center; text-align: center; border-bottom: 1px solid rgba(255,255,255,.14); }.broadcast small { color: var(--red); font: 800 9px ui-monospace,monospace; letter-spacing: .11em; }.broadcast p { margin: 12px 0 0; font: 400 1.45rem/1.25 Impact,sans-serif; letter-spacing: .05em; color: var(--cream); }.receiver.is-tuned .broadcast small { color: var(--gold); }
.cipher-panel { padding: 18px 0 12px; text-align: center; }.cipher-panel > p { margin: 0 0 6px; font: 800 10px ui-monospace,monospace; letter-spacing: .1em; }.cipher-panel > small { color: rgba(255,255,255,.55); font: 700 8px/1.5 ui-monospace,monospace; letter-spacing: .05em; }.cipher-keys { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-top: 15px; }.cipher-keys button { height: 54px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); cursor: pointer; font: 400 24px Georgia,serif; transition: background .2s, transform .2s; }.cipher-keys button:hover { background: var(--red); transform: translateY(-3px); }.cipher-keys button:disabled { opacity: .35; cursor: not-allowed; transform: none; }
.cipher-slots { display: flex; justify-content: center; gap: 9px; margin-top: 14px; }.cipher-slots i { width: 35px; height: 4px; background: rgba(255,255,255,.15); }.cipher-slots i.is-filled { background: var(--gold); box-shadow: 0 0 10px rgba(255,201,94,.5); }
.transmit-button { width: 100%; min-height: 48px; border: 0; background: var(--red); color: white; font: 900 11px ui-monospace,monospace; letter-spacing: .08em; cursor: pointer; }.transmit-button:disabled { opacity: .3; cursor: not-allowed; }
.transmission { position: absolute; z-index: 20; inset: 0; display: grid; place-content: center; text-align: center; background: rgba(4,17,47,.93); backdrop-filter: blur(18px); opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }.transmission.is-visible { opacity: 1; visibility: visible; }.transmission p { position: relative; z-index: 2; color: var(--cream); font: 400 clamp(2.5rem,6vw,7rem)/.9 Impact,sans-serif; letter-spacing: .02em; text-shadow: 7px 7px 0 var(--red-deep); }.transmission .round-button { position: absolute; top: 110px; right: 5vw; z-index: 3; background: var(--red); border-color: #ff747b; }.transmission-ring { position: absolute; left: 50%; top: 50%; width: 140px; height: 140px; border: 3px solid var(--red); border-radius: 50%; transform: translate(-50%,-50%); animation: transmit 2s infinite; }.transmission-ring.ring-delay { animation-delay: 1s; }
@keyframes transmit { from { opacity: 1; transform: translate(-50%,-50%) scale(.3); } to { opacity: 0; transform: translate(-50%,-50%) scale(7); } }
footer { position: absolute; left: clamp(22px,5vw,78px); right: clamp(22px,5vw,78px); bottom: 18px; display: flex; justify-content: space-between; gap: 20px; align-items: center; border-top: 1px solid var(--line); padding-top: 12px; color: rgba(255,255,255,.55); font: 700 9px ui-monospace,monospace; letter-spacing: .08em; }.frequency-scene footer div { display: flex; gap: 18px; }.frequency-scene footer a { color: var(--gold); text-decoration: none; }

.scene-rail { position: fixed; z-index: 55; right: 18px; top: 50%; transform: translateY(-50%); display: grid; gap: 8px; }
.rail-dot { width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.18); background: rgba(4,17,47,.4); color: rgba(255,255,255,.5); cursor: pointer; font: 700 8px ui-monospace,monospace; transition: transform .2s, background .2s, color .2s; }.rail-dot:hover { transform: translateX(-4px); }.rail-dot.is-active { background: var(--red); color: white; border-color: var(--red); }
.toast { position: fixed; z-index: 120; left: 50%; bottom: 26px; max-width: min(90vw,560px); padding: 13px 17px; background: var(--cream); color: var(--ink); box-shadow: 8px 8px 0 rgba(0,0,0,.28); font: 800 10px/1.45 ui-monospace,monospace; letter-spacing: .04em; opacity: 0; transform: translate(-50%,20px); pointer-events: none; transition: opacity .25s, transform .25s; }.toast.is-visible { opacity: 1; transform: translate(-50%,0); }
.spark { position: fixed; z-index: 89; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); pointer-events: none; animation: sparkOut .7s ease forwards; }
@keyframes sparkOut { to { opacity: 0; transform: translateY(-18px) scale(.2); } }

@media (max-width: 1180px) {
  .topbar nav { display: none; }.brand { margin-right: auto; }
  .roadmap-scene { grid-template-columns: .7fr 1fr; }.route-card { position: absolute; right: 50px; bottom: 55px; width: 330px; }.orbit-shell { width: min(56vw,600px); }
  .route-intro h2 { font-size: clamp(3rem,5vw,5.5rem); }
}
@media (max-width: 860px) {
  body { overflow: hidden; }.topbar { min-height: 70px; padding: 11px 15px; }.brand-mark { width: 39px; height: 39px; }.top-actions { gap: 6px; }.top-actions .icon-button { display: none; }.top-actions .button-red { padding-inline: 12px; }.button-ghost { width: 42px; }
  .scene { inset: 0; padding: 92px 18px 78px; }.scene::before { inset: 70px 0 0; }
  .hero { display: block; overflow-y: auto; }.hero-copy { padding-top: 1vh; }.hero-card { width: min(78vw,410px); margin: 40px auto 80px; }.hero-stats { margin-top: 28px; }.signal-readout { display: none; }
  h1 { font-size: clamp(3.2rem, 15vw, 6.2rem); }
  .story-scene { display: block; }.story-art { min-height: 55vh; margin-bottom: 42px; }.story-copy { margin: auto; padding-bottom: 30px; }.chapter { min-height: 390px; }
  .identity-scene { display: block; overflow-y: auto; }.identity-copy { margin: 0 auto 45px; }.look-board { width: min(90vw,590px); margin: 0 auto 55px; }.identity-marquee { position: fixed; bottom: 58px; z-index: 12; background: var(--paper); }
  .roadmap-scene { display: block; overflow-y: auto; }.route-intro { max-width: 650px; }.orbit-shell { width: min(86vw,590px); margin: 30px auto; }.route-card { position: relative; right: auto; bottom: auto; width: auto; max-width: 590px; margin: 0 auto 35px; }
  .frequency-scene { display: block; overflow-y: auto; }.freq-copy { margin: auto; }.freq-copy h2 { font-size: clamp(5rem,22vw,9rem); }.receiver { width: min(92vw,620px); margin: 45px auto 100px; }.frequency-scene footer { position: relative; left: auto; right: auto; bottom: auto; flex-wrap: wrap; margin-top: 20px; }.transmission .round-button { top: 92px; }
  .scene-rail { top: auto; left: 0; right: 0; bottom: 0; transform: none; display: grid; grid-template-columns: repeat(5,1fr); gap: 0; background: rgba(4,17,47,.9); backdrop-filter: blur(14px); border-top: 1px solid var(--line); }.rail-dot { width: auto; height: 54px; border-width: 0 1px 0 0; }.rail-dot:hover { transform: none; }
  .cursor-glow { display: none; }
}
@media (max-width: 560px) {
  .brand > span:last-child { display: none; }.topbar { gap: 8px; }.button { min-height: 42px; font-size: 10px; }.hero-actions { align-items: stretch; flex-direction: column; }.hero-stats { grid-template-columns: 1fr; }.hero-stats > div, .hero-stats > div + div { padding: 10px 0; border-right: 0; border-bottom: 1px solid var(--line); }.hero-stats > div:last-child { border-bottom: 0; }
  .hero-card { width: 86vw; }.story-art { min-height: 430px; }.story-art-label { max-width: 200px; }.chapter h2 { font-size: clamp(2.9rem,15vw,5rem); }.chapter { min-height: 465px; }.field-note { grid-template-columns: 1fr; }
  .gear-list { grid-template-columns: 1fr; }.look-board { padding: 10px; }.board-footer { grid-template-columns: 1fr; }.meter { width: 100%; }.lab-actions { align-items: stretch; flex-direction: column; }
  .route-intro h2 { font-size: 4rem; }.route-node { width: 67px; height: 67px; }.node-1 { left: calc(50% - 33px); }.node-2 { top: calc(50% - 33px); }.node-3 { left: calc(50% - 33px); }.node-4 { top: calc(50% - 33px); }.orbit-core { inset: 29%; }.orbit-runner { display: none; }
  .receiver { padding: 20px 14px; border-radius: 28px; }.cipher-panel > small { font-size: 7px; }.transmission p { padding: 20px; font-size: 3.2rem; }.frequency-scene footer > span:nth-child(2) { display: none; }
}
@media (hover: hover) and (pointer: fine) { body:hover .cursor-glow { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } .intro { display: none; } }