:root {
  --cyan:#23acf4;
  --blue:#087bd9;
  --deep:#083e70;
  --ink:#050607;
  --paper:#f4f1e7;
  --pink:#e453c7;
  --acid:#f3e86b;
  --line:4px solid var(--ink);
  --shadow:8px 8px 0 var(--ink);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Arial Rounded MT Bold","Trebuchet MS",Arial,sans-serif; overflow-x:hidden; cursor:none; }
button,a { font:inherit; }
button { color:inherit; }
a { color:inherit; text-decoration:none; }
::selection { background:var(--pink); color:#fff; }

.noise { position:fixed; inset:0; pointer-events:none; z-index:90; opacity:.08; 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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"); mix-blend-mode:multiply; }
.cursor,.cursor-ring { position:fixed; left:0; top:0; pointer-events:none; z-index:200; border-radius:50%; transform:translate(-50%,-50%); }
.cursor { width:10px; height:10px; background:var(--pink); }
.cursor-ring { width:38px; height:38px; border:2px solid var(--ink); transition:width .2s,height .2s,background .2s; }
.cursor-ring.hover { width:60px; height:60px; background:rgba(35,172,244,.2); }
.trail-dot { position:fixed; width:8px; height:8px; border-radius:50%; background:var(--cyan); pointer-events:none; z-index:89; animation:trail .55s forwards; }
@keyframes trail { to { transform:translateY(16px) scale(0); opacity:0; } }

.boot { position:fixed; inset:0; z-index:500; background:var(--cyan); display:grid; place-content:center; justify-items:center; transition:transform .75s cubic-bezier(.8,0,.2,1); }
.boot.done { transform:translateY(-110%); }
.boot p { font-weight:1000; letter-spacing:.12em; font-size:13px; }
.boot-eye,.mini-eye,.quote-eye { position:relative; border:4px solid var(--ink); background:var(--paper); overflow:hidden; }
.boot-eye { width:150px; height:90px; border-radius:50%; }
.boot-eye i,.mini-eye i,.quote-eye i { position:absolute; width:44%; aspect-ratio:1; left:28%; top:30%; border-radius:50%; background:var(--pink); border:4px solid var(--ink); }
.boot-track { width:240px; height:12px; border:3px solid var(--ink); background:var(--paper); }
.boot-track span { display:block; height:100%; width:0; background:var(--pink); animation:load 1.25s forwards; }
@keyframes load { to { width:100%; } }

.topbar { position:fixed; z-index:100; inset:18px 22px auto; min-height:60px; padding:8px 9px 8px 16px; display:flex; align-items:center; justify-content:space-between; gap:20px; background:rgba(244,241,231,.93); border:3px solid var(--ink); box-shadow:5px 5px 0 var(--ink); }
.brand { display:flex; align-items:center; gap:10px; font-size:15px; letter-spacing:-.04em; }
.mini-eye { width:34px; height:24px; border-width:3px; border-radius:50%; background:var(--cyan); }
.mini-eye i { border-width:2px; top:20%; }
.topbar nav { display:flex; align-items:center; gap:4px; }
.nav-link { border:0; background:transparent; font-size:11px; font-weight:1000; letter-spacing:.08em; padding:14px 10px; cursor:pointer; }
.nav-link:hover { color:var(--blue); transform:rotate(-2deg); }
.top-actions { display:flex; gap:8px; align-items:center; }
.button,.sound-button { min-height:42px; display:inline-flex; align-items:center; justify-content:center; padding:0 16px; border:3px solid var(--ink); font-size:11px; font-weight:1000; letter-spacing:.06em; box-shadow:4px 4px 0 var(--ink); transition:transform .15s,box-shadow .15s; cursor:pointer; }
.button:hover,.sound-button:hover { transform:translate(3px,3px) rotate(-1deg); box-shadow:1px 1px 0 var(--ink); }
.button-dark { background:var(--ink); color:#fff; box-shadow:4px 4px 0 var(--pink); }
.button-pink { background:var(--pink); }
.button-blue { background:var(--cyan); }
.sound-button { background:var(--acid); }
.sound-button span { margin-right:6px; font-size:18px; }
.sound-button.on { background:var(--cyan); }

.scene-dots { position:fixed; z-index:80; left:24px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:8px; }
.scene-dots button { width:42px; height:22px; border:0; background:transparent; display:flex; align-items:center; cursor:pointer; font-size:9px; font-weight:900; }
.scene-dots button::after { content:""; width:15px; height:4px; margin-left:7px; background:var(--ink); transition:width .2s,background .2s; }
.scene-dots button.active::after { width:32px; background:var(--pink); }
.scene-counter { position:fixed; z-index:80; right:28px; bottom:22px; font-size:12px; font-weight:1000; letter-spacing:.12em; display:flex; align-items:center; gap:6px; }
.scene-counter span { font-size:28px; color:var(--blue); }
.scene-counter small { writing-mode:vertical-rl; font-size:7px; margin-left:5px; }

.scene { position:relative; min-height:100vh; padding:126px clamp(72px,9vw,150px) 80px; overflow:hidden; border-bottom:4px solid var(--ink); }
.section-stamp { position:absolute; left:22px; top:106px; writing-mode:vertical-rl; font-size:9px; font-weight:1000; letter-spacing:.14em; }
.eyebrow { display:flex; align-items:center; gap:10px; font-size:11px; font-weight:1000; letter-spacing:.18em; }
.eyebrow span { width:28px; height:6px; background:var(--pink); border:2px solid var(--ink); }
h1,h2,h3,p { margin-top:0; }
h1,h2 { margin-bottom:22px; font-family:Impact,"Arial Black",sans-serif; font-weight:900; letter-spacing:-.045em; line-height:.82; }
h1 { font-size:clamp(78px,12vw,184px); }
h2 { font-size:clamp(58px,8vw,118px); }
h1 em,h2 em { font-style:normal; color:var(--cyan); -webkit-text-stroke:4px var(--ink); paint-order:stroke fill; text-shadow:7px 7px 0 var(--ink); }
.reveal { opacity:0; transform:translateY(40px) rotate(.5deg); transition:opacity .7s,transform .7s cubic-bezier(.2,.8,.2,1); }
.in-view .reveal { opacity:1; transform:none; }

.hero { display:grid; grid-template-columns:1fr .92fr; align-items:center; background:var(--paper); padding-top:130px; }
.hero::before { content:""; position:absolute; width:52vw; height:52vw; min-width:540px; min-height:540px; right:-10vw; top:18vh; border-radius:50%; background:var(--cyan); border:5px solid var(--ink); box-shadow:18px 18px 0 var(--ink); }
.hero-copy { position:relative; z-index:2; }
.hero-line { max-width:560px; margin-bottom:27px; font-size:clamp(15px,1.4vw,21px); font-weight:1000; line-height:1.45; letter-spacing:.04em; }
.hero-buttons,.finale-actions { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.text-button { border:0; border-bottom:3px solid var(--ink); background:transparent; font-size:11px; font-weight:1000; letter-spacing:.1em; padding:12px 2px; cursor:pointer; }
.text-button span { color:var(--pink); font-size:18px; }
.hero-character { position:relative; z-index:2; width:min(40vw,580px); justify-self:end; outline:none; transform-style:preserve-3d; transition:transform .18s; cursor:pointer; }
.character-frame { position:relative; overflow:hidden; border:5px solid var(--ink); border-radius:48% 52% 44% 56% / 52% 44% 56% 48%; box-shadow:15px 15px 0 var(--ink); background:#ddd; transform:rotate(3deg); }
.character-frame img { display:block; width:100%; aspect-ratio:1; object-fit:cover; filter:saturate(1.12) contrast(1.04); transition:transform .4s,filter .4s; }
.hero-character:hover img,.hero-character.poked img { transform:scale(1.08) rotate(-3deg); filter:saturate(1.5) contrast(1.2); }
.hero-character.poked .character-frame { animation:boing .55s; }
@keyframes boing { 25%{transform:rotate(-5deg) scale(.94,1.06)} 55%{transform:rotate(6deg) scale(1.05,.95)} }
.eye-glitch { position:absolute; left:37%; top:42%; width:31%; height:8%; background:var(--pink); mix-blend-mode:multiply; opacity:0; }
.hero-character.poked .eye-glitch { animation:glitch .4s steps(2); }
@keyframes glitch { 20%,70%{opacity:.85;transform:translateX(-18px)} 40%{transform:translateX(20px)} }
.poke-note { position:absolute; right:-40px; bottom:-35px; padding:10px 13px; background:var(--acid); border:3px solid var(--ink); transform:rotate(-5deg); font-size:10px; font-weight:1000; box-shadow:4px 4px 0 var(--ink); }
.orbit-label { position:absolute; z-index:3; padding:8px 11px; background:var(--paper); border:3px solid var(--ink); font-size:9px; font-weight:1000; }
.orbit-one { left:-25px; top:13%; transform:rotate(-9deg); }
.orbit-two { right:-18px; top:65%; transform:rotate(7deg); background:var(--pink); }
.ticker { position:absolute; z-index:3; left:0; bottom:0; width:100%; background:var(--ink); color:#fff; border-top:3px solid var(--ink); overflow:hidden; white-space:nowrap; padding:11px 0; font-weight:1000; letter-spacing:.11em; font-size:11px; }
.ticker div { width:max-content; animation:ticker 18s linear infinite; }
@keyframes ticker { to{transform:translateX(-50%)} }
.doodle { position:absolute; z-index:1; color:var(--ink); font-family:Impact,sans-serif; font-size:86px; -webkit-text-stroke:3px var(--cyan); filter:drop-shadow(5px 5px 0 var(--pink)); animation:float 5s ease-in-out infinite; }
.doodle-phone { left:47%; top:19%; transform:rotate(15deg); }
.doodle-phone i { position:absolute; font-size:18px; left:31px; top:34px; }
.doodle-cross { left:53%; bottom:12%; animation-delay:-1s; }
.doodle-headphones { right:2%; top:16%; animation-delay:-2s; }
.doodle-beanie { left:6%; top:17%; font-size:70px; animation-delay:-3s; }
.doodle-beanie i { position:absolute; font:900 18px Arial; left:28px; top:34px; color:var(--pink); -webkit-text-stroke:0; }
@keyframes float { 50%{translate:0 -16px;rotate:5deg} }

.story { background:var(--blue); color:#fff; }
.story::before,.locker::before { content:""; position:absolute; inset:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Ccircle cx='4' cy='4' r='2' fill='%23083e70'/%3E%3C/svg%3E"); opacity:.28; }
.story-heading { position:relative; z-index:2; }
.story-heading h2 em { color:var(--paper); }
.story-grid { position:relative; z-index:2; display:grid; grid-template-columns:1.05fr 1fr .75fr; gap:22px; align-items:stretch; }
.story-card,.quote-card { background:var(--paper); color:var(--ink); border:var(--line); box-shadow:var(--shadow); padding:30px; }
.story-copy { transform:rotate(-1deg); }
.story-copy p { font-family:Georgia,serif; font-size:clamp(17px,1.5vw,23px); line-height:1.55; }
.story-copy p:last-child { font-weight:bold; font-size:27px; color:var(--blue); }
.file-card { padding:0; overflow:hidden; transform:rotate(1deg); }
.file-tabs { display:flex; border-bottom:var(--line); }
.file-tabs button { flex:1; border:0; border-right:3px solid var(--ink); background:var(--cyan); padding:15px 5px; font-size:9px; font-weight:1000; cursor:pointer; }
.file-tabs button:last-child { border-right:0; }
.file-tabs button.active { background:var(--pink); }
.file-display { padding:28px; }
.file-number,.secret-tag { display:inline-block; padding:6px 9px; background:var(--ink); color:#fff; font-size:9px; letter-spacing:.12em; }
.file-display h3 { margin:22px 0 12px; font-size:32px; }
.file-display p { line-height:1.55; }
.quote-card { background:var(--acid); display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; transform:rotate(-2deg); }
.quote-eye { width:100px; height:65px; border-radius:50%; margin-bottom:22px; }
.quote-card blockquote { margin:0 0 18px; font:italic 700 23px/1.35 Georgia,serif; }
.quote-card small { font-weight:1000; }
.story-footer { position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:32px; border-top:3px solid var(--ink); padding-top:25px; }
.story-footer div { display:grid; gap:8px; }
.story-footer strong { font-size:12px; color:var(--acid); }
.story-footer span { font-size:13px; line-height:1.4; }

.locker { background:var(--cyan); display:grid; grid-template-columns:.72fr 1.28fr; align-items:center; gap:7vw; }
.locker-copy,.desk { position:relative; z-index:2; }
.locker-copy h2 { font-size:clamp(52px,7vw,104px); }
.locker-copy h2 em { color:var(--paper); }
.locker-copy>p { max-width:500px; font:700 17px/1.55 Georgia,serif; }
.signal-meter { position:relative; height:34px; max-width:420px; margin:25px 0 8px; border:var(--line); background:var(--paper); box-shadow:4px 4px 0 var(--ink); }
.signal-meter span { display:block; height:100%; width:0; background:var(--pink); transition:width .5s cubic-bezier(.2,.8,.2,1); }
.signal-meter b { position:absolute; inset:0; display:grid; place-content:center; font-size:11px; }
.desk { height:min(68vh,680px); min-height:530px; border:var(--line); background:var(--paper); box-shadow:14px 14px 0 var(--ink); overflow:hidden; transform:rotate(1deg); touch-action:none; }
.sticker-sheet { position:absolute; width:78%; right:-16%; top:-10%; opacity:.18; transform:rotate(-8deg); pointer-events:none; }
.desk::before { content:"ZORK'S STUFF / DO NOT ORGANIZE"; position:absolute; left:18px; top:17px; font-size:10px; font-weight:1000; letter-spacing:.1em; }
.portal { position:absolute; left:50%; top:48%; width:210px; height:210px; translate:-50% -50%; clip-path:polygon(50% 0,61% 32%,96% 34%,68% 55%,78% 91%,50% 70%,21% 91%,31% 56%,4% 34%,38% 32%); background:var(--blue); display:grid; place-content:center; text-align:center; filter:drop-shadow(7px 8px 0 var(--ink)); animation:portal 3s ease-in-out infinite; }
.portal::before { content:""; position:absolute; inset:20%; clip-path:inherit; background:var(--pink); }
.portal span { position:absolute; inset:35%; clip-path:inherit; background:var(--ink); }
.portal b { position:relative; z-index:2; color:#fff; font-size:10px; letter-spacing:.1em; }
.portal.hot { filter:drop-shadow(0 0 22px var(--pink)) drop-shadow(7px 8px 0 var(--ink)); }
@keyframes portal { 50%{transform:rotate(8deg) scale(1.04)} }
.desk-object { position:absolute; width:112px; height:112px; border:var(--line); border-radius:50%; background:var(--cyan); box-shadow:6px 6px 0 var(--ink); cursor:grab; touch-action:none; display:grid; place-content:center; justify-items:center; user-select:none; }
.desk-object:active { cursor:grabbing; }
.desk-object span { font:900 54px/1 Impact,sans-serif; }
.desk-object i { font-style:normal; font-size:8px; font-weight:1000; margin-top:6px; }
.desk-object.phone { left:8%; top:18%; border-radius:18px; transform:rotate(-9deg); }
.desk-object.headphones { right:7%; top:14%; background:var(--pink); transform:rotate(7deg); }
.desk-object.beanie { left:10%; bottom:9%; background:var(--ink); color:#fff; transform:rotate(6deg); }
.desk-object.cross { right:9%; bottom:10%; background:var(--acid); transform:rotate(-5deg); }
.desk-object.dropped { opacity:.15; pointer-events:none; transform:scale(.2); transition:.45s; }
.desk-note { position:absolute; right:20px; bottom:16px; font-size:9px; font-weight:1000; }
.memory-modal { position:fixed; z-index:300; inset:0; background:rgba(5,6,7,.82); display:grid; place-content:center; padding:24px; }
.memory-modal[hidden] { display:none; }
.memory-card { position:relative; max-width:620px; background:var(--paper); border:5px solid var(--ink); box-shadow:14px 14px 0 var(--pink); padding:50px; transform:rotate(-1deg); }
.memory-card h3 { margin:20px 0 12px; font:900 54px/.9 Impact,sans-serif; }
.memory-card p { font:18px/1.6 Georgia,serif; }
.modal-close { position:absolute; right:14px; top:12px; width:38px; height:38px; border:3px solid var(--ink); background:var(--pink); font-size:25px; font-weight:900; cursor:pointer; }

.roadmap { background:var(--paper); padding-bottom:90px; }
.roadmap-heading { display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:40px; }
.roadmap-heading .eyebrow { grid-column:1/-1; }
.roadmap-heading h2 { margin:0; }
.roadmap-heading>p { max-width:480px; font:700 17px/1.5 Georgia,serif; }
.night-map { position:relative; height:min(46vw,560px); min-height:390px; margin:35px 0 0; border:var(--line); background:var(--cyan); box-shadow:12px 12px 0 var(--ink); overflow:hidden; }
.night-map::before { content:""; position:absolute; inset:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='55' height='55'%3E%3Cpath d='M55 0H0V55' fill='none' stroke='%23050607' stroke-opacity='.13' stroke-width='2'/%3E%3C/svg%3E"); }
.route { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.route path { fill:none; stroke-linecap:round; }
.route-shadow { stroke:var(--ink); stroke-width:32; stroke-dasharray:2 18; }
.route-main { stroke:var(--paper); stroke-width:11; stroke-dasharray:18 12; animation:dash 12s linear infinite; }
@keyframes dash { to{stroke-dashoffset:-300} }
.map-node { position:absolute; left:var(--x); top:var(--y); translate:-50% -50%; width:88px; height:88px; border:4px solid var(--ink); background:var(--paper); border-radius:50%; box-shadow:6px 6px 0 var(--ink); cursor:pointer; transition:transform .2s,background .2s; z-index:3; }
.map-node b { display:block; font:900 30px/1 Impact,sans-serif; }
.map-node span { display:block; position:absolute; left:50%; top:104%; width:120px; translate:-50% 0; font-size:8px; font-weight:1000; background:var(--ink); color:#fff; padding:5px; }
.map-node:hover,.map-node.active { transform:scale(1.18) rotate(-7deg); background:var(--pink); }
.map-sticker { position:absolute; z-index:2; border:3px solid var(--ink); background:var(--acid); box-shadow:5px 5px 0 var(--ink); font-weight:1000; text-align:center; }
.map-cassette { right:12%; bottom:7%; width:120px; padding:16px; transform:rotate(8deg); }
.map-star { left:39%; top:15%; font-size:45px; padding:4px 14px; transform:rotate(-10deg); background:var(--pink); }
.map-phone { left:15%; top:13%; font-size:60px; padding:0 17px; transform:rotate(9deg); }
.phase-card { display:grid; grid-template-columns:110px 1fr 70px; gap:25px; align-items:center; margin:-20px auto 0; position:relative; z-index:5; max-width:920px; padding:25px; background:var(--ink); color:#fff; border:4px solid var(--ink); box-shadow:9px 9px 0 var(--pink); }
.phase-index { font:900 70px/1 Impact,sans-serif; color:var(--cyan); border-right:2px solid #fff; }
.phase-card span { font-size:8px; letter-spacing:.16em; color:var(--pink); }
.phase-card h3 { font-size:25px; margin:6px 0; }
.phase-card p { font:15px/1.45 Georgia,serif; margin:0; }
.phase-next { width:56px; height:56px; border:3px solid var(--ink); background:var(--cyan); box-shadow:4px 4px 0 var(--pink); font-size:28px; cursor:pointer; }

.finale { min-height:100vh; background:var(--ink); color:#fff; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:8vw; padding-bottom:130px; }
.finale::before { content:""; position:absolute; inset:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38'%3E%3Ccircle cx='4' cy='4' r='2' fill='%2323acf4' fill-opacity='.55'/%3E%3C/svg%3E"); opacity:.3; }
.finale-art,.finale-copy { position:relative; z-index:2; }
.finale-art img { display:block; width:100%; border-radius:50%; border:5px solid var(--paper); filter:saturate(1.25) contrast(1.05); }
.finale-rings i { position:absolute; z-index:-1; left:50%; top:50%; translate:-50% -50%; border:4px solid var(--pink); border-radius:50%; animation:ring 3s infinite; }
.finale-rings i:nth-child(1){width:110%;height:110%}.finale-rings i:nth-child(2){width:125%;height:125%;animation-delay:-1s}.finale-rings i:nth-child(3){width:143%;height:143%;animation-delay:-2s}
@keyframes ring { 50%{scale:1.06;opacity:.2} }
.broadcast-tag { position:absolute; left:0; bottom:8%; padding:10px 14px; background:var(--pink); color:var(--ink); border:3px solid var(--paper); box-shadow:5px 5px 0 var(--paper); transform:rotate(-4deg); font-size:10px; font-weight:1000; }
.finale-copy h2 em { color:var(--cyan); }
.finale-copy>p { max-width:520px; font:19px/1.55 Georgia,serif; color:#ddd; }
.broadcast-button { margin-top:35px; width:min(100%,560px); height:76px; padding:0 20px; display:flex; justify-content:space-between; align-items:center; border:4px solid var(--paper); background:var(--cyan); box-shadow:8px 8px 0 var(--pink); font-weight:1000; cursor:pointer; }
.broadcast-button b { font-size:30px; color:var(--pink); -webkit-text-stroke:2px var(--ink); }
.broadcast-button.live { animation:broadcast .35s infinite alternate; }
@keyframes broadcast { to{transform:translate(3px,-3px);box-shadow:12px 12px 0 var(--pink)} }
.broadcast-message { margin-top:14px!important; font:900 9px/1.3 Arial!important; color:var(--pink)!important; letter-spacing:.12em; }
footer { position:absolute; z-index:3; left:0; right:0; bottom:0; padding:25px clamp(72px,9vw,150px); border-top:3px solid #fff; display:flex; justify-content:space-between; align-items:center; }
footer strong { font-size:17px; } footer strong span { color:var(--pink); } footer small { font-size:8px; letter-spacing:.16em; } footer button { border:0;background:none;color:#fff;font-size:9px;font-weight:1000;cursor:pointer; }

.weird-overlay { position:fixed; z-index:250; inset:0; pointer-events:none; display:none; overflow:hidden; mix-blend-mode:difference; }
.weird-overlay.active { display:block; }
.weird-overlay span { position:absolute; font:900 13vw/1 Impact,sans-serif; color:#fff; animation:weird 1s steps(2) infinite; }
.weird-overlay span:nth-child(1){left:-4%;top:5%;transform:rotate(-12deg)}.weird-overlay span:nth-child(2){right:-10%;top:35%;transform:rotate(8deg)}.weird-overlay span:nth-child(3){left:8%;bottom:4%;transform:rotate(5deg)}.weird-overlay span:nth-child(4){right:2%;top:-2%;transform:rotate(-4deg)}
@keyframes weird { 50%{translate:15px -9px;filter:blur(2px)} }

body.signal-mode { --cyan:#f0e967; --blue:#e453c7; --pink:#23acf4; }
body.signal-mode .scene { filter:hue-rotate(15deg); }

@media (max-width:1000px) {
  body { cursor:auto; }.cursor,.cursor-ring { display:none; }
  .topbar nav,.sound-button { display:none; }
  .hero,.locker,.finale { grid-template-columns:1fr; gap:50px; }
  .hero { padding-top:150px; }
  .hero::before { right:-35vw; top:45%; }
  .hero-character { width:min(78vw,570px); justify-self:center; }
  .story-grid { grid-template-columns:1fr 1fr; }.quote-card{grid-column:1/-1;min-height:260px}.story-footer{grid-template-columns:1fr}
  .desk { width:100%; }.roadmap-heading{grid-template-columns:1fr}.roadmap-heading .eyebrow{grid-column:auto}.finale-art{max-width:520px;margin:auto}
}

@media (max-width:650px) {
  .topbar { inset:10px 10px auto; }.brand strong { display:none; }.top-actions .button { padding:0 10px;font-size:8px; }.top-actions{margin-left:auto}
  .scene { padding:112px 24px 75px; }.section-stamp,.scene-counter,.scene-dots { display:none; }
  h1 { font-size:70px; } h2 { font-size:54px; } h1 em,h2 em { -webkit-text-stroke:2px var(--ink);text-shadow:4px 4px 0 var(--ink); }
  .hero { min-height:100svh; }.hero-character{width:86vw}.doodle{opacity:.35}.poke-note{right:0}.orbit-label{display:none}
  .story-grid { grid-template-columns:1fr; }.quote-card{grid-column:auto}.story-card,.quote-card{padding:22px}.file-card{padding:0}.story-footer{display:none}
  .locker { gap:30px; }.desk{min-height:470px}.portal{width:165px;height:165px}.desk-object{width:82px;height:82px}.desk-object span{font-size:40px}
  .roadmap-heading>p{display:none}.night-map{height:500px}.map-node{width:60px;height:60px}.map-node b{font-size:20px}.map-node span{width:90px;font-size:6px}.map-sticker{display:none}.phase-card{grid-template-columns:60px 1fr;gap:15px}.phase-index{font-size:45px}.phase-next{display:none}
  .finale { gap:55px;padding-bottom:150px }.finale-copy{text-align:center}.finale-actions{justify-content:center}footer{padding:20px 24px;flex-wrap:wrap;gap:10px}footer small{display:none}
  .memory-card{padding:35px 25px}.memory-card h3{font-size:40px}
}

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