:root{--bg:#05060f;--cy:#2ef2ff;--mg:#ff2ea6;--ink:#cfe9ff;--panel:#0a0d1f}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);font-family:'JetBrains Mono',monospace;
background:radial-gradient(ellipse at 20% 0%,#1a0b3a 0%,transparent 50%),radial-gradient(ellipse at 90% 100%,#062a3a 0%,transparent 50%),
repeating-linear-gradient(0deg,rgba(46,242,255,.03) 0 1px,transparent 1px 40px),repeating-linear-gradient(90deg,rgba(46,242,255,.03) 0 1px,transparent 1px 40px),var(--bg);min-height:100vh}
h1,h2,.step,.btn.big{font-family:'Press Start 2P',monospace}
.glitch{font-size:clamp(20px,5vw,44px);color:#fff;position:relative;display:inline-block;text-shadow:2px 0 var(--mg),-2px 0 var(--cy)}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;overflow:hidden}
.glitch::before{color:var(--cy);animation:g1 2.5s infinite steps(2);clip-path:inset(0 0 60% 0)}
.glitch::after{color:var(--mg);animation:g2 3s infinite steps(2);clip-path:inset(55% 0 0 0)}
@keyframes g1{0%,90%{transform:none}92%{transform:translate(-4px,-1px)}96%{transform:translate(3px,1px)}}
@keyframes g2{0%,85%{transform:none}88%{transform:translate(4px,1px)}94%{transform:translate(-3px,0)}}
.sub{font-weight:200;letter-spacing:.3em;color:var(--cy);font-size:13px}
.stepper{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;font-size:10px}
.step{padding:8px 10px;border:1px solid #223;border-radius:8px;opacity:.45;transition:.3s}
.step.active{opacity:1;border-color:var(--mg);color:var(--mg);box-shadow:0 0 14px rgba(255,46,166,.4)}
.step.done{opacity:.9;border-color:var(--cy);color:var(--cy)}
.arrow{opacity:.4;align-self:center}
.panel{background:linear-gradient(160deg,rgba(15,20,45,.9),rgba(6,8,20,.9));border:1px solid rgba(46,242,255,.35);border-radius:14px;padding:16px;transition:box-shadow .3s;animation:rise .6s both}
.panel:nth-child(2){animation-delay:.12s}.panel:nth-child(3){animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
.panel:hover{box-shadow:0 0 24px rgba(46,242,255,.18)}
.panel.dream{border-color:rgba(255,46,166,.4)}
h2{font-size:12px;color:var(--cy);margin-bottom:12px}
.dream h2{color:var(--mg)}
h2 small{font-family:'JetBrains Mono';font-weight:200;color:#7a8bb0;font-size:11px}
.crt{position:relative;display:inline-block;border-radius:10px;overflow:hidden;border:1px solid #1d2546;line-height:0}
.crt::after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px);animation:flick 4s infinite}
@keyframes flick{0%,100%{opacity:1}50%{opacity:.85}52%{opacity:1}}
.screen{width:min(384px,80vw);height:min(384px,80vw);image-rendering:pixelated;background:#000;display:block}
.screen.glow{filter:drop-shadow(0 0 6px rgba(46,242,255,.5)) saturate(1.2)}
.mini{width:120px;height:120px;image-rendering:pixelated;border:1px solid #1d2546;border-radius:6px;background:#000}
.btn{background:var(--cy);color:#001;font-weight:800;font-size:12px;padding:8px 12px;border-radius:8px;transition:.15s;cursor:pointer}
.btn:hover{box-shadow:0 0 14px var(--cy)}.btn:active{transform:scale(.96)}
.btn.ghost{background:transparent;color:var(--cy);border:1px solid rgba(46,242,255,.5)}
.btn.big{background:var(--mg);color:#fff;font-size:11px;padding:14px}
.btn.big:hover{box-shadow:0 0 18px var(--mg)}
.btn:disabled{opacity:.4;pointer-events:none}
.lbl{display:block;font-size:11px;color:#8aa0c8}
.mono{font-family:'JetBrains Mono'}
.neon{color:var(--cy)}
input[type=range]{accent-color:var(--mg)}
input[type=checkbox]{accent-color:var(--mg)}
.inp{display:block;width:100%;background:#050816;border:1px solid #23305a;color:var(--ink);border-radius:6px;padding:4px 6px;margin-top:2px}
.hist>div{display:flex;align-items:center;gap:8px;font-size:12px;margin:3px 0}
.hist span{width:14px;text-align:center}.hist em{font-style:normal;width:50px;text-align:right;color:#7a8bb0}
.bar{flex:1;height:8px;background:#111735;border-radius:4px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cy),var(--mg));transition:width .3s}
.film{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;margin-top:6px}
.film div{position:relative}
.film canvas{width:100%;aspect-ratio:1;image-rendering:pixelated;border:1px solid #1d2546;border-radius:4px;display:block}
.film b{position:absolute;bottom:2px;right:2px;font-size:10px;background:var(--mg);color:#fff;padding:0 4px;border-radius:4px}
.meter{background:#070a1a;border:1px solid #1d2546;border-radius:8px;padding:6px;text-align:center;color:#7a8bb0}
.meter b{display:block;font-size:16px;color:var(--cy);font-weight:800}
.dali{margin-top:10px;text-align:center;padding:8px;border-radius:8px;background:linear-gradient(90deg,#ff2ea6,#ffb02e,#2ef2ff);color:#000;font-weight:800;animation:wob 1.2s infinite}
@keyframes wob{50%{transform:skewX(-6deg) scale(1.03)}}
.touch{display:flex;gap:12px}
.tbtn{flex:1;padding:18px;font-size:22px;border-radius:12px;border:1px solid var(--mg);color:var(--mg);background:rgba(255,46,166,.08);user-select:none;touch-action:none}
.tbtn:active,.tbtn.on{background:var(--mg);color:#fff}
@media(min-width:1024px){.touch{display:none}}
.hint{font-size:11px;color:#6a7aa0;margin-top:8px}
.card{background:#070a1a;border:1px solid #1d2546;border-radius:10px;padding:10px}
.status{font-size:12px;color:var(--mg);min-height:36px}
.lossc{width:100%;background:#03050d;border:1px solid #1d2546;border-radius:8px}
.prev{display:flex;gap:6px;align-items:center}
.prev canvas{width:56px;height:56px;image-rendering:pixelated;border:1px solid #1d2546;border-radius:4px}
.prev b{width:30px;text-align:center;color:var(--mg);font-size:18px}