:root {
  --ink: #050505;
  --paper: #f3f3ee;
  --muted: #9b9b96;
  --line: rgba(243, 243, 238, .24);
  --thin: rgba(243, 243, 238, .11);
  --signal: 47%;
  --mx: 0px;
  --my: 0px;
  --ease: cubic-bezier(.2,.8,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body {
  margin: 0;
  color: var(--paper);
  background: var(--ink);
  font-family: "Helvetica Neue", "Arial Narrow", Arial, sans-serif;
  font-size: 16px;
  overflow-x: hidden;
  cursor: none;
  transition: color .45s, background .45s;
}
body.inverted { --ink: #ededE8; --paper: #080808; --muted: #4d4d49; --line: rgba(5,5,5,.28); --thin: rgba(5,5,5,.1); }
button, a, input { font: inherit; }
button, a { cursor: none; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
::selection { background: var(--paper); color: var(--ink); }
.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: -80px; z-index: 90; pointer-events: none; opacity: .055; 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='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"); animation: grain .2s steps(2) infinite; }
@keyframes grain { 0%{transform:translate(0)} 25%{transform:translate(2%,-3%)} 50%{transform:translate(-3%,2%)} 75%{transform:translate(3%,4%)} }
#signal-field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .46; }

.boot { position: fixed; inset: 0; z-index: 999; display: grid; place-content: center; text-align: center; background: #050505; color: #f3f3ee; transition: opacity .7s var(--ease), visibility .7s; }
.boot.is-gone { opacity: 0; visibility: hidden; }
.boot-mark { font-size: clamp(4rem, 14vw, 11rem); font-weight: 900; font-style: italic; letter-spacing: -.09em; position: relative; text-shadow: 10px 0 transparent; }
.boot-mark::after { content: attr(data-text); position: absolute; inset: 0; color: #f3f3ee; clip-path: inset(45% 0 35%); transform: translateX(-10px); animation: bootGlitch .3s steps(2) infinite; }
@keyframes bootGlitch { 50% { transform: translateX(14px); } }
.boot-track { width: min(440px, 74vw); height: 2px; background: #3b3b38; margin: 2rem auto 1rem; overflow: hidden; }
.boot-track i { display: block; width: 100%; height: 100%; background: #f3f3ee; transform-origin: left; animation: bootLoad 1.25s var(--ease) both; }
@keyframes bootLoad { from { transform: scaleX(0); } }
.boot small { color: #8b8b86; letter-spacing: .28em; font-size: .65rem; }

.cursor { position: fixed; left: 0; top: 0; width: 34px; height: 34px; border: 1px solid var(--paper); border-radius: 50%; transform: translate(-50%,-50%); z-index: 200; pointer-events: none; mix-blend-mode: difference; transition: width .2s, height .2s, border-radius .2s; }
.cursor i { position: absolute; width: 4px; height: 4px; background: var(--paper); border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.cursor.is-hover { width: 62px; height: 20px; border-radius: 0; }
.portal-flash { position: fixed; inset: 0; z-index: 150; background: var(--paper); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.portal-flash.fire { animation: portal .78s var(--ease); }
@keyframes portal { 0%{transform:scaleX(0)} 45%{transform:scaleX(1);transform-origin:left} 55%{transform:scaleX(1);transform-origin:right} 100%{transform:scaleX(0);transform-origin:right} }

.site-header { position: fixed; z-index: 100; left: 0; top: 0; width: 100%; height: 78px; padding: 0 4.2vw; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid var(--thin); backdrop-filter: blur(16px); background: color-mix(in srgb, var(--ink) 78%, transparent); }
.brand { display: flex; align-items: center; justify-self: start; gap: .8rem; border: 0; padding: 0; background: none; letter-spacing: .12em; font-weight: 800; }
.brand-s { display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid var(--paper); font-style: italic; }
.brand b { font-size: .6rem; color: var(--muted); font-weight: 500; }
.desktop-nav { display: flex; gap: 1.8rem; }
.desktop-nav button { border: 0; background: none; padding: 1rem .1rem; color: var(--muted); font-size: .67rem; letter-spacing: .14em; position: relative; }
.desktop-nav button::after { content: ""; position: absolute; left: 0; bottom: .65rem; width: 100%; height: 1px; background: var(--paper); transform: scaleX(0); transition: transform .25s; }
.desktop-nav button.is-active, .desktop-nav button:hover { color: var(--paper); }
.desktop-nav button.is-active::after { transform: scaleX(1); }
.header-actions { justify-self: end; display: flex; gap: .7rem; align-items: center; }
.icon-button, .mini-x { min-height: 35px; border: 1px solid var(--line); background: transparent; padding: 0 .75rem; display: inline-flex; gap: .55rem; align-items: center; color: var(--paper); font-size: .65rem; letter-spacing: .12em; }
.sound-bars { display: flex; align-items: center; gap: 2px; height: 12px; }
.sound-bars i { width: 2px; height: 35%; background: currentColor; }
#sound-toggle[aria-pressed="true"] .sound-bars i { animation: soundbar .65s ease-in-out infinite alternate; }
#sound-toggle[aria-pressed="true"] .sound-bars i:nth-child(2) { animation-delay: -.3s; }
#sound-toggle[aria-pressed="true"] .sound-bars i:nth-child(3) { animation-delay: -.5s; }
@keyframes soundbar { to { height: 100%; } }
.signal-rail { position: fixed; z-index: 80; right: 1.2rem; top: 50%; transform: translateY(-50%); display: grid; justify-items: center; gap: .7rem; }
.signal-rail span { writing-mode: vertical-rl; font-size: .55rem; letter-spacing: .23em; color: var(--muted); }
.rail-track { width: 1px; height: 95px; background: var(--line); position: relative; }
.rail-track i { position: absolute; left: 0; bottom: 0; width: 1px; height: 0; background: var(--paper); }
.signal-rail b { font-size: .55rem; font-weight: 500; }

.scene { position: relative; z-index: 1; min-height: 100svh; padding: 10rem 7vw 7rem; border-bottom: 1px solid var(--thin); overflow: hidden; }
.eyebrow, .section-index { font-size: .68rem; line-height: 1.5; letter-spacing: .23em; color: var(--muted); text-transform: uppercase; }
.live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--paper); margin-right: .55rem; box-shadow: 0 0 0 5px var(--thin); animation: pulse 1.5s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 12px transparent; } }
.glass-panel { background: color-mix(in srgb, var(--ink) 78%, transparent); border: 1px solid var(--line); backdrop-filter: blur(17px); }
.reveal { opacity: 0; transform: translateY(44px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in-view { opacity: 1; transform: none; }

.hero { display: grid; grid-template-columns: minmax(350px, .9fr) minmax(430px, 1.1fr); align-items: center; min-height: 100svh; padding-top: 7rem; }
.hero::before { content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.027) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(circle at 68% 48%, black, transparent 68%); opacity:.65; }
.hero-copy { position: relative; z-index: 3; padding-top: 2rem; }
.wordmark { display: block; width: min(610px, 46vw); max-height: 250px; object-fit: cover; margin: 1rem 0 -.1rem; mix-blend-mode: screen; filter: contrast(1.7); }
body.inverted .wordmark { filter: invert(1) contrast(1.7); mix-blend-mode: multiply; }
.hero-kicker { margin: 0; font-size: clamp(2.1rem, 4.2vw, 5.2rem); font-weight: 800; line-height: .87; letter-spacing: -.06em; }
.hero-intro { max-width: 450px; color: var(--muted); line-height: 1.65; margin: 1.7rem 0 2.2rem; }
.hero-ctas, .finale-actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.cta { min-width: 190px; min-height: 56px; padding: 0 1.2rem; display: inline-flex; align-items: center; justify-content: space-between; gap: 1.5rem; border: 1px solid var(--paper); background: transparent; color: var(--paper); font-size: .72rem; font-weight: 750; letter-spacing: .14em; transition: background .25s, color .25s, transform .2s; }
.cta-fill { background: var(--paper); color: var(--ink); }
.cta:hover { background: var(--paper); color: var(--ink); }
.cta-fill:hover { background: transparent; color: var(--paper); }
.hero-figure { height: min(82svh, 850px); position: relative; display: grid; place-items: center; transform: translate3d(var(--mx), var(--my), 0); transition: transform .5s var(--ease); }
.hero-figure::after { content:""; position:absolute; inset: 7% 2% 0; background: radial-gradient(ellipse, rgba(255,255,255,.11), transparent 66%); filter: blur(20px); z-index:-1; }
.hero-figure img { width: min(610px, 50vw); height: 100%; object-fit: contain; filter: grayscale(1) contrast(1.45) brightness(calc(.78 + var(--signal-number, .47))); mix-blend-mode: screen; opacity: calc(.35 + var(--signal-number, .47) * .65); clip-path: inset(var(--signal-clip, 6.36%) 0 0); transition: filter .25s, opacity .25s, clip-path .25s; }
body.inverted .hero-figure img { mix-blend-mode: multiply; filter: invert(1) grayscale(1) contrast(1.45); }
.scan-beam { position:absolute; z-index:2; width:70%; height:2px; background:var(--paper); box-shadow:0 0 24px var(--paper); animation:scan 5s ease-in-out infinite; opacity:.5; }
@keyframes scan { 0%,100%{transform:translateY(-260px);opacity:0} 20%,80%{opacity:.55} 50%{transform:translateY(280px)} }
.orbit { position:absolute; border:1px dashed var(--line); border-radius:50%; animation: spin 22s linear infinite; }
.orbit::before { content:""; position:absolute; width:7px; height:7px; border:1px solid var(--paper); background:var(--ink); top:5%; left:22%; }
.orbit-a { width:75%; aspect-ratio:1; transform:rotate(12deg); }
.orbit-b { width:52%; aspect-ratio:1; animation-direction:reverse; animation-duration:15s; }
@keyframes spin { to { transform: rotate(372deg); } }
.signal-tag { position:absolute; z-index:5; width:34px; height:34px; border-radius:50%; border:1px solid var(--paper); background:var(--ink); color:var(--paper); animation:pulse 1.6s infinite; }
.tag-headphones { top:23%; right:29%; }
.tag-phone { top:43%; left:24%; }
.figure-stamp { position:absolute; right:4%; bottom:12%; border:1px solid var(--paper); padding:.65rem .8rem; font-size:.55rem; letter-spacing:.17em; line-height:1.5; transform:rotate(-7deg); background:var(--ink); }
.tuner-card { position:absolute; z-index:8; right:5vw; bottom:4.5rem; width:min(350px, 31vw); padding:1.1rem; }
.tuner-head, .tuner-scale { display:flex; justify-content:space-between; align-items:center; font-size:.58rem; letter-spacing:.16em; }
.tuner-head b { font-size:1rem; }
#stability { width:100%; appearance:none; height:1px; margin:1.4rem 0 1rem; background:var(--line); }
#stability::-webkit-slider-thumb { appearance:none; width:18px; height:18px; background:var(--ink); border:1px solid var(--paper); transform:rotate(45deg); }
#stability::-moz-range-thumb { width:18px; height:18px; background:var(--ink); border:1px solid var(--paper); border-radius:0; transform:rotate(45deg); }
.tuner-scale i { height:1px; flex:1; margin:0 .8rem; background:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 7px); }
.tuner-card p { margin:.8rem 0 0; color:var(--muted); font-size:.72rem; }
.scroll-hint { position:absolute; left:7vw; bottom:2rem; border:0; background:none; color:var(--muted); font-size:.59rem; letter-spacing:.22em; display:flex; gap:1.1rem; align-items:center; }
.scroll-hint i { display:grid; place-items:center; width:29px; height:29px; border:1px solid var(--line); font-style:normal; animation:bob 1.5s infinite; }
@keyframes bob { 50%{ transform:translateY(5px); } }

.origin { min-height: 130svh; }
.section-index { position:absolute; right:7vw; top:9rem; writing-mode:vertical-rl; }
.origin-heading h2, .route-heading h2, .room-head h2, .afterglow h2 { margin:.7rem 0 0; font-size:clamp(3.2rem,7vw,8.3rem); letter-spacing:-.075em; line-height:.86; text-transform:uppercase; }
h2 em { font-family:Georgia,serif; font-weight:400; text-transform:none; }
.origin-heading { max-width:1100px; }
.memory-deck { margin:7rem 0 5rem auto; width:min(920px,86%); padding:1rem; transform:rotate(-1deg); }
.deck-top { display:flex; justify-content:space-between; align-items:center; padding:.5rem .4rem 1rem; font-size:.6rem; letter-spacing:.18em; }
.deck-dashes { flex:1; height:1px; margin:0 1rem; background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 12px); }
.memory-window { position:relative; min-height:315px; border:1px solid var(--thin); overflow:hidden; }
.memory { position:absolute; inset:0; padding:2.2rem 3rem; display:grid; grid-template-columns:.4fr 1.1fr; gap:2rem; align-content:center; opacity:0; transform:translateX(35px); pointer-events:none; transition:.55s var(--ease); }
.memory.is-active { opacity:1; transform:none; pointer-events:auto; }
.memory-label { color:var(--muted); font-size:.63rem; letter-spacing:.2em; }
.memory h3 { margin:0; font-size:clamp(2rem,4vw,4rem); line-height:.93; letter-spacing:-.055em; text-transform:uppercase; }
.memory p:last-child { grid-column:2; max-width:560px; color:var(--muted); line-height:1.75; margin:0; }
.memory strong { color:var(--paper); }
.deck-controls { display:grid; grid-template-columns:52px 1fr 52px; gap:.6rem; padding-top:1rem; }
.deck-controls > button { height:45px; border:1px solid var(--line); background:transparent; }
.memory-scrub { display:flex; gap:.4rem; }
.memory-scrub button { flex:1; border:1px solid var(--line); background:transparent; color:var(--muted); font-size:.6rem; letter-spacing:.12em; }
.memory-scrub button.is-active { background:var(--paper); color:var(--ink); }
.artifact-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.artifact { min-height:275px; padding:1.5rem; border-right:1px solid var(--line); border-bottom:1px solid var(--line); transform-style:preserve-3d; background:var(--ink); transition:transform .25s; }
.artifact > * { transform:translateZ(18px); }
.artifact span { color:var(--muted); font-size:.6rem; letter-spacing:.18em; }
.artifact h3 { margin:4rem 0 1rem; font-size:1.2rem; letter-spacing:-.03em; }
.artifact p { color:var(--muted); font-size:.84rem; line-height:1.65; }

.room { min-height:125svh; display:flex; align-items:flex-start; }
.room-bg { position:absolute; inset:0; background:url('assets/lost-signals-room.png') center/cover no-repeat; filter:grayscale(1) contrast(1.45) brightness(.55); opacity:.68; transform:scale(1.04); }
body.inverted .room-bg { filter:grayscale(1) contrast(1.45) brightness(1.2) invert(1); mix-blend-mode:multiply; opacity:.7; }
.room-vignette { position:absolute; inset:0; background:radial-gradient(circle at 54% 44%,transparent 5%,rgba(0,0,0,.3) 57%,#050505 100%), linear-gradient(90deg,#050505 0%,transparent 40%); }
body.inverted .room-vignette { background:radial-gradient(circle at 54% 44%,transparent 5%,rgba(237,237,232,.22) 57%,#ededE8 100%),linear-gradient(90deg,#ededE8 0%,transparent 40%); }
.room-head { position:relative; z-index:3; width:min(600px,45%); }
.room-head h2 { font-size:clamp(3rem,6.5vw,7.5rem); }
.room-head > p:last-child { max-width:410px; line-height:1.7; color:var(--muted); }
.finder { position:absolute; inset:0; z-index:5; }
.hotspot { position:absolute; width:45px; height:45px; border:1px solid var(--paper); border-radius:50%; background:rgba(5,5,5,.6); color:var(--paper); }
.hotspot i { position:absolute; inset:8px; border:1px dashed var(--paper); border-radius:50%; animation:spin 6s linear infinite; }
.hotspot span { position:absolute; top:-18px; left:50%; transform:translateX(-50%); font-size:.55rem; }
.hotspot::after { content:""; position:absolute; inset:-14px; border:1px solid var(--line); border-radius:50%; animation:pulse 1.8s infinite; }
.hotspot.is-found { background:var(--paper); color:var(--ink); transform:scale(.7); opacity:.48; }
.hs-phone { left:27%; top:43%; }.hs-cross { left:19%; top:16%; }.hs-beanie { left:44%; top:22%; }.hs-headphones { left:57%; top:37%; }.hs-cassette { right:12%; top:31%; }
.object-console { position:absolute; z-index:6; width:min(410px,34vw); right:6vw; bottom:7rem; padding:1.4rem; }
.console-top { display:flex; justify-content:space-between; font-size:.6rem; letter-spacing:.16em; color:var(--muted); }
.object-console h3 { font-size:1.6rem; margin:2.7rem 0 .7rem; letter-spacing:-.04em; }
.object-console p { min-height:66px; line-height:1.6; color:var(--muted); font-size:.87rem; }
.console-meter { height:2px; background:var(--line); margin-top:1.2rem; }
.console-meter i { display:block; height:100%; width:0; background:var(--paper); transition:width .5s var(--ease); }

.route { min-height:120svh; }
.route-heading { max-width:950px; }
.route-heading p:last-child { max-width:610px; color:var(--muted); line-height:1.7; }
.constellation { width:min(1120px,95%); height:680px; margin:5rem auto 0; position:relative; border:1px solid var(--line); background:radial-gradient(circle at center,var(--thin),transparent 50%); }
.constellation::before,.constellation::after { content:""; position:absolute; left:50%; top:50%; background:var(--thin); transform:translate(-50%,-50%); }
.constellation::before { width:100%; height:1px; }.constellation::after { width:1px; height:100%; }
.route-lines { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.route-lines path { fill:none; stroke-width:1.3; vector-effect:non-scaling-stroke; }
.route-ghost { stroke:var(--line); stroke-dasharray:7 9; }
.route-live { stroke:var(--paper); stroke-dasharray:1900; stroke-dashoffset:1900; transition:stroke-dashoffset 1.2s var(--ease); }
.route-core { position:absolute; left:50%; top:47%; transform:translate(-50%,-50%); width:120px; aspect-ratio:1; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; }
.route-core::before { content:""; position:absolute; inset:17px; border:1px dashed var(--paper); border-radius:50%; animation:spin 10s linear infinite; }
.route-core span { font-size:3rem; font-weight:900; font-style:italic; }
.route-core i { position:absolute; width:180px; height:1px; background:var(--line); transform:rotate(-35deg); }
.route-node { position:absolute; width:96px; height:96px; border:1px solid var(--line); border-radius:50%; background:var(--ink); color:var(--paper); display:grid; place-items:center; transition:.35s var(--ease); }
.route-node i { position:absolute; inset:11px; border:1px dashed var(--line); border-radius:50%; }
.route-node b { font-size:1.4rem; font-weight:500; }
.route-node span { position:absolute; white-space:nowrap; top:105%; font-size:.58rem; letter-spacing:.16em; color:var(--muted); }
.route-node:hover,.route-node.is-active { transform:scale(1.15); border-color:var(--paper); box-shadow:0 0 0 9px var(--thin); }
.route-node.is-active i { border-color:var(--paper); animation:spin 5s linear infinite; }
.n1 { left:6%; top:65%; }.n2 { left:23%; top:13%; }.n3 { left:48%; top:41%; }.n4 { right:19%; top:68%; }.n5 { right:4%; top:12%; }
.route-card { position:absolute; right:4%; bottom:4%; width:330px; padding:1.3rem; }
.route-card > span { color:var(--muted); font-size:.57rem; letter-spacing:.17em; }
.route-card h3 { margin:2.5rem 0 .5rem; font-size:2rem; letter-spacing:-.05em; }
.route-card p { color:var(--muted); line-height:1.6; font-size:.84rem; min-height:66px; }
.route-status { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.7rem; font-size:.58rem; letter-spacing:.15em; }
.route-status i { height:1px; background:var(--line); }

.afterglow { min-height:125svh; }
.afterglow::before { content:"SOLINU"; position:absolute; right:-.08em; bottom:-.18em; font-size:30vw; font-weight:900; font-style:italic; letter-spacing:-.12em; color:transparent; -webkit-text-stroke:1px var(--thin); line-height:1; pointer-events:none; }
.afterglow-copy { max-width:950px; }
.composer { position:relative; z-index:2; margin:5rem 0 8rem; display:grid; grid-template-columns:repeat(3,1fr); }
.phrase-column { padding:1.2rem; display:flex; flex-direction:column; gap:.5rem; border-right:1px solid var(--line); }
.phrase-column > span,.transmission-output > span { font-size:.58rem; letter-spacing:.18em; color:var(--muted); margin-bottom:1rem; }
.phrase { text-align:left; min-height:48px; border:1px solid var(--line); padding:0 1rem; background:transparent; color:var(--muted); font-size:.68rem; letter-spacing:.1em; }
.phrase:hover,.phrase.is-active { background:var(--paper); color:var(--ink); }
.transmission-output { grid-column:1/-1; min-height:240px; padding:2rem; display:grid; grid-template-columns:1fr auto; align-items:end; border-top:1px solid var(--line); }
.transmission-output > span { grid-column:1/-1; align-self:start; }
.transmission-output p { margin:0; font-size:clamp(2.4rem,5vw,6rem); line-height:.92; letter-spacing:-.06em; max-width:890px; }
.send-button { width:210px; height:56px; border:1px solid var(--paper); background:transparent; color:var(--paper); display:flex; align-items:center; justify-content:space-between; padding:0 1rem; font-size:.64rem; letter-spacing:.12em; }
.send-button:hover { background:var(--paper); color:var(--ink); }
.finale { position:relative; z-index:2; display:grid; grid-template-columns:1fr auto; gap:2rem; align-items:end; }
.finale-line { margin:0; font-size:clamp(2.8rem,6.3vw,7.2rem); line-height:.88; letter-spacing:-.07em; font-weight:800; }
.finale-line em { font-family:Georgia,serif; font-weight:400; }
.finale-actions { max-width:430px; justify-content:flex-end; }

footer { position:relative; z-index:2; min-height:230px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:2rem; padding:3rem 7vw; border-top:1px solid var(--line); }
.footer-mark { font-size:clamp(4rem,10vw,10rem); font-weight:900; font-style:italic; letter-spacing:-.09em; }
footer div:nth-child(2) { display:grid; gap:.8rem; text-align:right; color:var(--muted); font-size:.6rem; letter-spacing:.16em; }
footer p { grid-column:1/-1; color:var(--muted); font-size:.65rem; }

.whisper { position:fixed; left:50%; bottom:2rem; transform:translate(-50%,20px); z-index:300; max-width:min(520px,85vw); padding:1rem 1.3rem; background:var(--paper); color:var(--ink); font-family:Georgia,serif; font-style:italic; opacity:0; visibility:hidden; transition:.3s var(--ease); }
.whisper.show { opacity:1; visibility:visible; transform:translate(-50%,0); }
dialog { width:min(650px,90vw); border:1px solid var(--paper); background:#050505; color:#f3f3ee; padding:3rem; box-shadow:0 0 0 100vmax rgba(0,0,0,.82); }
dialog::backdrop { background:rgba(0,0,0,.7); backdrop-filter:blur(10px); }
.dialog-close { position:absolute; right:1rem; top:1rem; width:36px; height:36px; border:1px solid #f3f3ee55; background:none; color:#f3f3ee; font-size:1.4rem; }
.secret-sigil { width:90px; height:90px; display:grid; place-items:center; border:1px dashed #f3f3ee; border-radius:50%; font-size:3rem; font-weight:900; margin-bottom:2rem; animation:spin 8s linear infinite; }
dialog h2 { font-size:clamp(2.8rem,7vw,5.5rem); line-height:.85; letter-spacing:-.07em; margin:1rem 0 2rem; }
dialog p,dialog blockquote { line-height:1.7; color:#aaa; }
dialog blockquote { border-left:1px solid #f3f3ee; margin:2rem 0; padding-left:1rem; color:#f3f3ee; font-family:Georgia,serif; font-style:italic; }

@media (max-width: 1050px) {
  .desktop-nav { display:none; }
  .site-header { grid-template-columns:1fr auto; }
  .hero { grid-template-columns:1fr; padding-top:8rem; }
  .hero-copy { z-index:4; }
  .wordmark { width:min(680px,90vw); }
  .hero-figure { position:absolute; right:-8vw; top:10vh; width:60vw; height:80vh; opacity:.58; }
  .hero-intro { color:var(--paper); max-width:390px; }
  .tuner-card { width:330px; }
  .artifact-grid { grid-template-columns:repeat(2,1fr); }
  .room-head { width:60%; }
  .object-console { width:390px; max-width:80vw; }
  .finale { grid-template-columns:1fr; }
  .finale-actions { justify-content:flex-start; }
}

@media (max-width: 720px) {
  body { cursor:auto; }
  button,a { cursor:pointer; }
  .cursor,.signal-rail,.optional-label { display:none; }
  .site-header { height:64px; padding:0 1rem; }
  .brand b { display:none; }
  .scene { padding:7.5rem 1rem 5rem; min-height:auto; }
  .hero { min-height:100svh; display:flex; align-items:flex-start; }
  .hero-copy { padding-top:2.5rem; }
  .wordmark { width:100%; margin:1rem 0; }
  .hero-kicker { font-size:clamp(2.8rem,14vw,4.6rem); }
  .hero-intro { font-size:.9rem; width:78%; }
  .hero-figure { width:75vw; height:60vh; right:-20vw; top:21vh; }
  .hero-figure img { width:100%; }
  .orbit,.signal-tag,.figure-stamp { display:none; }
  .tuner-card { left:1rem; right:1rem; bottom:4.5rem; width:auto; }
  .scroll-hint { left:1rem; bottom:1.1rem; }
  .hero-ctas { width:75%; }
  .cta { min-width:100%; }
  .section-index { display:none; }
  .origin-heading h2,.route-heading h2,.room-head h2,.afterglow h2 { font-size:clamp(3rem,15vw,5rem); }
  .memory-deck { width:100%; margin:4rem 0; }
  .memory-window { min-height:500px; }
  .memory { padding:1.5rem; grid-template-columns:1fr; align-content:start; gap:1rem; }
  .memory h3 { font-size:2.6rem; }
  .memory p:last-child { grid-column:1; }
  .artifact-grid { grid-template-columns:1fr; }
  .artifact { min-height:240px; }
  .room { min-height:900px; }
  .room-bg { background-position:61% center; }
  .room-vignette { background:linear-gradient(#050505 0%,transparent 35%,#050505 92%); }
  body.inverted .room-vignette { background:linear-gradient(#ededE8 0%,transparent 35%,#ededE8 92%); }
  .room-head { width:100%; }
  .room-head > p:last-child { width:75%; }
  .object-console { left:1rem; right:1rem; bottom:4rem; width:auto; max-width:none; }
  .hs-cross{left:13%;top:34%}.hs-beanie{left:37%;top:36%}.hs-phone{left:21%;top:52%}.hs-headphones{left:57%;top:49%}.hs-cassette{right:9%;top:42%}
  .constellation { width:100%; height:740px; margin-top:3rem; }
  .route-lines { opacity:.55; }
  .route-node { width:72px; height:72px; }
  .route-node span { font-size:.5rem; }
  .n1{left:4%;top:54%}.n2{left:18%;top:12%}.n3{left:52%;top:38%}.n4{right:11%;top:63%}.n5{right:2%;top:8%}
  .route-card { left:1rem; right:1rem; bottom:1rem; width:auto; }
  .route-core { width:80px; }
  .composer { grid-template-columns:1fr; }
  .phrase-column { border-right:0; border-bottom:1px solid var(--line); }
  .transmission-output { display:block; padding:1.2rem; }
  .transmission-output p { margin:1.5rem 0 2rem; font-size:2.7rem; }
  .send-button { width:100%; }
  .finale-actions { width:100%; }
  footer { grid-template-columns:1fr; padding:3rem 1rem; }
  footer div:nth-child(2) { text-align:left; }
}

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