:root{--pink:#ff2bd6;--hot:#ff3c8e;--purple:#7b2cff;--cyan:#22f2ff;--sun:#ffb347;--ink:#12001f}
*{box-sizing:border-box;margin:0}
html,body{min-height:100%}
body{background:#12001f;color:#fbe9ff;font-family:"VT323",monospace;font-size:21px;overflow-x:hidden}
.sky{position:fixed;inset:0;z-index:-1;background:linear-gradient(#1a0530 0%,#4a0f6b 40%,#c2187a 62%,#12001f 62%);overflow:hidden}
.sun{position:absolute;left:50%;top:30%;width:min(60vw,520px);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;
 background:linear-gradient(#ffe66b,#ff7a3c 50%,#ff2bd6);-webkit-mask:repeating-linear-gradient(#000 0 14px,transparent 14px 20px);mask:repeating-linear-gradient(#000 0 calc(100% - 1px),#000 0) ;filter:drop-shadow(0 0 40px #ff2bd6)}
.sun{mask:linear-gradient(#000 55%,transparent 55% 58%,#000 58% 66%,transparent 66% 70%,#000 70% 77%,transparent 77% 82%,#000 82%);-webkit-mask:linear-gradient(#000 55%,transparent 55% 58%,#000 58% 66%,transparent 66% 70%,#000 70% 77%,transparent 77% 82%,#000 82%)}
.grid{position:absolute;left:-50%;right:-50%;bottom:0;height:38%;transform:perspective(300px) rotateX(60deg);transform-origin:top;
 background:linear-gradient(transparent 0 94%,var(--pink) 94%) 0 0/100% 40px,linear-gradient(90deg,transparent 0 97%,var(--cyan) 97%) 0 0/60px 100%;animation:run 1.2s linear infinite;opacity:.7}
@keyframes run{to{background-position:0 40px,0 0}}
.den{max-width:1200px;margin:0 auto;padding:24px 16px 40px}
.sign{text-align:center;margin:10px 0 26px}
.sign-small{font-family:"Audiowide";color:var(--cyan);letter-spacing:.4em;text-transform:uppercase;text-shadow:0 0 8px var(--cyan)}
.neon{font-family:"Monoton",cursive;font-weight:400;font-size:clamp(54px,11vw,128px);line-height:1;color:#ffe3fa;letter-spacing:.05em;
 text-shadow:0 0 6px #fff,0 0 14px var(--pink),0 0 30px var(--pink),0 0 60px var(--hot);animation:flick 6s infinite}
@keyframes flick{0%,92%,96%,100%{opacity:1}93%,95%{opacity:.4}}
.sign-tick{display:inline-block;margin-top:8px;padding:2px 12px;border:2px solid var(--cyan);border-radius:4px;color:var(--cyan);box-shadow:0 0 12px var(--cyan),inset 0 0 12px rgba(34,242,255,.3)}
.set{display:grid;grid-template-columns:1fr 170px;gap:28px;align-items:center}
.tv{position:relative;background:linear-gradient(145deg,#3b2140,#1e0f22);border-radius:34px;padding:26px;display:grid;grid-template-columns:1fr 120px;gap:22px;
 box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 2px 0 rgba(255,255,255,.15),0 0 0 3px #5b2a63,0 0 40px rgba(255,43,214,.35)}
.antenna{position:absolute;left:50%;top:-70px;width:2px;height:0}
.antenna::before,.antenna::after{content:"";position:absolute;bottom:0;width:3px;height:90px;background:#c9c9d9;transform-origin:bottom}
.antenna::before{transform:rotate(-28deg)}.antenna::after{transform:rotate(28deg)}
.bezel{background:#0a0a0a;border-radius:28px;padding:18px;box-shadow:inset 0 0 30px #000}
.screen{position:relative;aspect-ratio:4/3;border-radius:40px/30px;overflow:hidden;background:radial-gradient(#2a0c45,#08000f 80%);box-shadow:inset 0 0 60px rgba(0,0,0,.9)}
.osd{position:absolute;top:14px;left:20px;right:20px;display:flex;justify-content:space-between;z-index:5;color:#7dff8a;font-size:24px;text-shadow:0 0 6px #7dff8a}
.rec{color:#ff4466;text-shadow:0 0 6px #ff4466;animation:blink 1s steps(2) infinite}@keyframes blink{50%{opacity:0}}
.scan{position:absolute;inset:0;pointer-events:none;z-index:6;background:repeating-linear-gradient(rgba(0,0,0,.28) 0 2px,transparent 2px 4px);box-shadow:inset 0 0 120px rgba(0,0,0,.7)}
.static{position:absolute;inset:0;z-index:7;pointer-events:none;opacity:0;background:repeating-radial-gradient(circle at 17% 32%,#fff 0 1px,#222 1px 3px),repeating-linear-gradient(#999 0 1px,#111 1px 3px);mix-blend-mode:screen}
.zap .static{animation:zap .45s steps(6)}
@keyframes zap{0%{opacity:.9;background-position:0 0}50%{opacity:.7;background-position:13px 40px}100%{opacity:0;background-position:-20px 9px}}
.ch{position:absolute;inset:0;padding:60px 7% 30px;display:none;flex-direction:column;justify-content:center;gap:14px;overflow:auto}
.ch.active{display:flex}
.ch h2{font-family:"Audiowide";font-size:clamp(22px,3.4vw,40px);color:#fff;text-shadow:0 0 10px var(--pink),0 0 24px var(--purple)}
.ch h2 em{color:var(--cyan);font-style:normal;text-shadow:0 0 10px var(--cyan)}
#ch03{flex-direction:row;align-items:center;gap:5%}
.logo-box{flex:0 0 38%;aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 0 30px var(--pink),0 0 0 4px var(--pink)}
.logo-box img,.tape img{width:100%;height:100%;object-fit:cover;display:block}
.kicker{color:var(--cyan);letter-spacing:.3em;text-transform:uppercase}
.bc{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.btn{font:inherit;font-size:22px;cursor:pointer;display:inline-block;text-decoration:none;padding:8px 18px;border-radius:6px;border:2px solid;background:rgba(0,0,0,.35);transition:.15s;word-break:break-all}
.btn.hot{color:#ffd6f4;border-color:var(--pink);box-shadow:0 0 12px var(--pink),inset 0 0 10px rgba(255,43,214,.4)}
.btn.cyan{color:#d9feff;border-color:var(--cyan);box-shadow:0 0 12px var(--cyan),inset 0 0 10px rgba(34,242,255,.4)}
.btn:hover{background:rgba(255,43,214,.25);transform:translateY(-2px)}
.callout{border:3px dashed var(--sun);border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:12px;align-items:flex-start;background:rgba(255,179,71,.06);position:relative}
.stamp{font-family:"Audiowide";font-size:clamp(18px,2.6vw,30px);color:var(--sun);border:3px solid var(--sun);padding:4px 12px;transform:rotate(-3deg);text-shadow:0 0 10px var(--sun);box-shadow:0 0 18px rgba(255,179,71,.6)}
.callout small,.dim{opacity:.7;font-size:18px}
.ca{display:flex;flex-wrap:wrap;gap:12px;align-items:center;border:2px solid var(--cyan);padding:14px;border-radius:10px;background:rgba(34,242,255,.06)}
.ca-label{color:var(--cyan);font-size:28px}
#ca-text{flex:1;min-width:0;font-family:inherit;font-size:26px;word-break:break-all;color:#fff}
#ca-text.soon{color:var(--sun);text-shadow:0 0 10px var(--sun);text-transform:uppercase;letter-spacing:.15em}
.steps{padding-left:1.4em;display:grid;gap:6px}.steps li::marker{color:var(--pink)}
.row{display:flex;gap:12px;flex-wrap:wrap}
.reel{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tape{aspect-ratio:16/9;border-radius:6px;overflow:hidden;border:2px solid var(--purple);box-shadow:0 0 10px rgba(123,44,255,.6)}
.tape.empty{display:grid;place-items:center;text-align:center;color:#c9a6ff;background:repeating-linear-gradient(45deg,#1b0630 0 10px,#24083f 10px 20px)}
.panel{display:flex;flex-direction:column;align-items:center;gap:22px;padding-top:10px}
.brand{font-family:"Audiowide";color:#e0b5e6;letter-spacing:.15em;font-size:16px}
.knob{width:84px;height:84px;border-radius:50%;cursor:pointer;background:conic-gradient(#666,#ddd,#666,#bbb,#666);box-shadow:0 4px 10px #000,inset 0 0 0 10px #2a2a2a;position:relative;transition:transform .3s}
.knob::after{content:"";position:absolute;left:50%;top:6px;width:4px;height:22px;margin-left:-2px;background:var(--pink);box-shadow:0 0 6px var(--pink);border-radius:2px}
.speaker{width:90px;flex:1;min-height:120px;border-radius:10px;background:repeating-linear-gradient(#111 0 4px,#3a2340 4px 8px)}
.remote{background:linear-gradient(#2b2b33,#15151b);border-radius:30px 30px 40px 40px;padding:22px 16px;display:flex;flex-direction:column;gap:10px;box-shadow:0 20px 40px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.2);transform:rotate(4deg)}
.ir{width:22px;height:10px;margin:0 auto 8px;border-radius:6px;background:#a1002a;box-shadow:0 0 8px #ff0044}
.remote button{font:inherit;font-size:18px;color:#eee;background:#3a3a46;border:0;border-radius:10px;padding:8px;cursor:pointer;display:flex;gap:8px;align-items:center;box-shadow:0 3px 0 #0b0b0f;text-align:left}
.remote button b{color:var(--cyan);font-size:22px;min-width:26px}
.remote button.on{background:var(--pink);color:#fff;box-shadow:0 0 14px var(--pink)}.remote button.on b{color:#fff}
.remote button:active{transform:translateY(2px);box-shadow:none}
.rocker{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}.rocker button{justify-content:center}
.vcr{margin-top:30px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;color:#cfe;padding:10px 16px;border-top:2px solid var(--pink);background:rgba(0,0,0,.4);text-shadow:0 0 4px var(--cyan)}
@media (max-width:900px){
 .set{grid-template-columns:1fr}.tv{grid-template-columns:1fr;padding:16px;border-radius:24px}
 .panel{flex-direction:row;justify-content:space-between;padding:0 10px}.speaker{min-height:40px;height:40px;flex:1}.knob{width:56px;height:56px}
 .remote{transform:none;flex-direction:row;flex-wrap:wrap;justify-content:center;border-radius:20px;padding:12px}.ir{display:none}
 .remote button{flex:1 1 30%;justify-content:center}.rocker{flex:1 1 100%}
 .screen{aspect-ratio:auto;min-height:560px;border-radius:24px}
 #ch03{flex-direction:column;justify-content:center}.logo-box{flex:none;width:52%}
 .reel{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}
@media (max-width:900px){.reel .tape:last-child:nth-child(odd){grid-column:1/-1}}

/* ===== long page ===== */
.city{position:relative;max-width:1100px;margin:0 auto;padding:40px 16px}
.city::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(rgba(18,0,31,0) 0,rgba(18,0,31,.75) 100vh)}
.hud{position:fixed;top:14px;right:16px;z-index:50;display:flex;flex-direction:column;align-items:flex-end;font-family:"Audiowide";opacity:0;transition:.4s;pointer-events:none}
.hud.show{opacity:1}.stars{font-size:28px;color:#fff;text-shadow:0 0 8px var(--sun),0 2px 0 #000;letter-spacing:2px}.cash{color:#7dff8a;text-shadow:0 2px 0 #000,0 0 8px #7dff8a}
.sec{margin:90px 0;padding:34px;border-radius:18px;background:rgba(12,0,24,.72);border:1px solid rgba(255,43,214,.4);box-shadow:0 0 40px rgba(123,44,255,.25);backdrop-filter:blur(4px)}
.tag{display:inline-block;font-family:"Audiowide";font-size:15px;letter-spacing:.2em;color:var(--ink);background:var(--sun);padding:3px 10px;margin-bottom:12px;box-shadow:0 0 14px var(--sun)}
.neon2{font-family:"Audiowide";font-size:clamp(32px,5vw,58px);color:#fff;margin-bottom:22px;text-shadow:0 0 8px var(--pink),0 0 24px var(--pink),0 0 48px var(--purple);animation:flick 7s infinite}
.neon2.big{font-size:clamp(40px,7vw,80px)}
.sec p{margin-bottom:14px;line-height:1.35}.sec h3{font-family:"Audiowide";color:var(--cyan);font-size:22px;margin-bottom:6px;text-shadow:0 0 8px var(--cyan)}
.story-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:28px;align-items:start}
.scanner{background:#020a04;border:2px solid #2f6;border-radius:10px;padding:16px;color:#7dff8a;min-height:190px;text-shadow:0 0 6px #2f6;box-shadow:inset 0 0 30px rgba(0,255,90,.15)}
.sc-head{color:#ff4466;text-shadow:0 0 6px #ff4466;animation:blink 1.4s steps(2) infinite}
.big{font-size:24px;margin:6px 0 14px}
.board{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px}
.photo{aspect-ratio:16/9;position:relative;background:#fff;padding:8px 8px 30px;box-shadow:0 10px 24px rgba(0,0,0,.6);transition:transform .3s}
.photo:nth-child(odd){transform:rotate(-1.5deg)}.photo:nth-child(even){transform:rotate(1.5deg)}.photo:hover{transform:rotate(0) scale(1.03);z-index:2}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo::before{content:"";position:absolute;top:-8px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--hot);box-shadow:0 0 8px var(--hot)}
.photo figcaption{position:absolute;bottom:5px;left:10px;color:#222;font-size:18px}
.dossier{display:grid;gap:10px;max-width:720px}
.row2{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed rgba(34,242,255,.4);padding:6px 0}.row2 span{color:var(--cyan)}
.ca-out{flex:1;min-width:0;font-family:inherit;font-size:24px;word-break:break-all}.ca-out.soon{color:var(--sun);text-shadow:0 0 10px var(--sun);letter-spacing:.15em;text-transform:uppercase}
.ca2{margin-top:10px}
.pins{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px;padding:20px;border-radius:12px;
 background:linear-gradient(rgba(34,242,255,.08) 1px,transparent 1px) 0 0/40px 40px,linear-gradient(90deg,rgba(34,242,255,.08) 1px,transparent 1px) 0 0/40px 40px,#0b1630}
.pin{position:relative;padding:44px 12px 12px;text-align:center}
.pin i{position:absolute;top:0;left:50%;transform:translateX(-50%);width:36px;height:36px;border-radius:50% 50% 50% 0;rotate:-45deg;background:var(--pink);box-shadow:0 0 14px var(--pink);display:grid;place-items:center;font-style:normal}
.pin i::first-letter{}
.missions{list-style:none;padding:0;display:grid;gap:16px;border-left:3px solid var(--pink);margin-left:10px}
.missions li{position:relative;padding:12px 18px 12px 30px}
.missions li::before{content:"";position:absolute;left:-11px;top:20px;width:18px;height:18px;border-radius:50%;background:var(--ink);border:3px solid var(--pink);box-shadow:0 0 10px var(--pink)}
.st{float:right;font-family:"Audiowide";font-size:13px;padding:2px 8px;border:1px solid #888;color:#aaa}.st.done{color:#7dff8a;border-color:#7dff8a;box-shadow:0 0 8px #7dff8a}
details{border:1px solid rgba(34,242,255,.4);border-radius:10px;margin-bottom:10px;background:rgba(34,242,255,.04)}
summary{cursor:pointer;padding:14px 18px;font-size:24px;list-style:none;display:flex;justify-content:space-between}summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--pink)}details[open] summary::after{content:"−"}details p{padding:0 18px 12px}
#community{text-align:center}.xbtn{font-size:30px;padding:14px 34px}
.xlink{color:var(--cyan)}
.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s ease,transform .8s ease}.reveal.in{opacity:1;transform:none}
.photo.reveal.in:nth-child(odd){transform:rotate(-1.5deg)}.photo.reveal.in:nth-child(even){transform:rotate(1.5deg)}
.vcr{max-width:1100px;margin:30px auto 0}
@media (max-width:900px){.story-grid{grid-template-columns:1fr}.pins{grid-template-columns:1fr 1fr}.sec{padding:22px;margin:60px 0}}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}
html{scroll-behavior:smooth}

.has-bg{position:relative;overflow:hidden;isolation:isolate}
.pbg{position:absolute;left:0;right:0;top:-15%;bottom:-15%;z-index:-2;background-size:cover;background-position:center;will-change:transform}
.has-bg::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(12,0,24,.82),rgba(12,0,24,.9))}
.photo{cursor:zoom-in}.photo:focus-visible{outline:3px solid var(--cyan);outline-offset:4px}
.lb{position:fixed;inset:0;z-index:100;background:rgba(5,0,12,.94);display:flex;align-items:center;justify-content:center;gap:10px;padding:20px}
.lb[hidden]{display:none}
.lb figure{width:min(1200px,100%);margin:0}
.lb-frame{aspect-ratio:16/9;width:100%;max-height:80vh;margin:0 auto;box-shadow:0 0 40px var(--pink);border:2px solid var(--pink);background:#000}
.lb-frame img{width:100%;height:100%;object-fit:contain;display:block}
.lb-cap{text-align:center;color:var(--cyan);margin-top:10px}
.lb button{font:inherit;font-size:40px;color:#fff;background:rgba(255,43,214,.2);border:2px solid var(--pink);border-radius:50%;width:56px;height:56px;cursor:pointer;flex:none;text-shadow:0 0 8px var(--pink)}
.lb-x{position:absolute;top:16px;right:16px;font-size:26px!important}
@media (max-width:700px){.lb-prev,.lb-next{position:absolute;bottom:20px}.lb-prev{left:30%}.lb-next{right:30%}}

/* trailer embed */
.embed{width:100%;max-width:550px;margin:0 auto}
.embed .twitter-tweet{margin:0 auto!important}
.embed blockquote{border:2px solid var(--cyan);border-radius:10px;padding:16px;background:rgba(0,0,0,.4)}
.embed blockquote a{color:var(--cyan)}
#ch07{justify-content:flex-start;overflow-y:auto;-webkit-overflow-scrolling:touch}
.ch{overscroll-behavior:contain}
.story-embed{margin:14px 0}
/* ken burns hero */
.den{position:relative;isolation:isolate}
.kb{position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);z-index:-1;overflow:hidden;pointer-events:none}
.kb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.6s ease;animation:9s ease-out forwards;will-change:transform,opacity}
.kb img.on{opacity:.75}
@keyframes kb1{from{transform:scale(1.05) translate(0,0)}to{transform:scale(1.22) translate(-3%,-2%)}}
@keyframes kb2{from{transform:scale(1.2) translate(3%,0)}to{transform:scale(1.05) translate(-2%,2%)}}
@keyframes kb3{from{transform:scale(1.08) translate(-3%,2%)}to{transform:scale(1.24) translate(2%,-1%)}}
@keyframes kb4{from{transform:scale(1.22) translate(0,-3%)}to{transform:scale(1.06) translate(0,2%)}}
.kb-fx{position:absolute;inset:0;background:repeating-linear-gradient(rgba(0,0,0,.25) 0 2px,transparent 2px 4px),
 radial-gradient(ellipse at 50% 55%,rgba(255,43,214,.18),transparent 55%),
 radial-gradient(ellipse at center,rgba(18,0,31,.25) 30%,rgba(18,0,31,.92) 100%),
 linear-gradient(rgba(18,0,31,.35),rgba(18,0,31,.2) 60%,#12001f)}
.tv{box-shadow:0 30px 80px rgba(0,0,0,.7),inset 0 2px 0 rgba(255,255,255,.15),0 0 0 3px #5b2a63,0 0 60px rgba(255,43,214,.55),0 0 120px rgba(123,44,255,.35)}
@media (prefers-reduced-motion:reduce){.kb img{animation:none!important;transition:none}}
.links{display:flex;flex-wrap:wrap;gap:10px}.ca code,.ca-inline{overflow-wrap:anywhere;word-break:break-all}.ca-inline{color:var(--cyan)}
.copy-ca.ok,#copy.ok{background:#1f8f3a;border-color:#7dff8a;box-shadow:0 0 14px #7dff8a}