:root{--bg:#0b0b1a;--panel:#14142b;--cyan:#22e6ff;--mag:#ff3df0;--txt:#d8d8f0;--dim:#7a7aa0}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at 20% 0%,#1c1840,transparent 50%),radial-gradient(circle at 90% 100%,#2a0f3a,transparent 50%),var(--bg);color:var(--txt);font-family:'JetBrains Mono',monospace;min-height:100vh}
body::before{content:"";position:fixed;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,transparent 1px 4px);pointer-events:none}
header{text-align:center;padding:28px 12px 8px}
h1{font-family:'Press Start 2P';font-size:clamp(20px,5vw,40px);margin:0;color:#fff;text-shadow:3px 3px 0 var(--mag),-3px -3px 0 var(--cyan)}
.sub{font-family:'Press Start 2P';font-size:10px;color:var(--cyan);margin:14px 0 4px}
.tag{font-weight:200;color:var(--dim);margin:0;font-size:13px}
.blink{animation:blink 1.4s steps(2) infinite}@keyframes blink{50%{opacity:.35}}
#backend-badge{position:fixed;top:8px;right:8px;font-size:10px;background:#000a;border:1px solid var(--cyan);color:var(--cyan);padding:3px 7px;border-radius:6px;z-index:5}
#tabs{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:14px}
.tab{font-family:'Press Start 2P';font-size:11px;background:var(--panel);color:var(--txt);border:2px solid #2c2c55;border-radius:999px;padding:12px 18px;cursor:pointer;box-shadow:0 4px 0 #050510;transition:.1s}
.tab:active{transform:translateY(3px);box-shadow:0 1px 0 #050510}
.tab.active{border-color:var(--mag);color:#fff;box-shadow:0 4px 0 #050510,0 0 18px #ff3df055}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#555;margin-right:8px}
.dot.y{background:#ffd23d;box-shadow:0 0 8px #ffd23d}.dot.g{background:#3dff8a;box-shadow:0 0 8px #3dff8a}
main{max-width:1000px;margin:0 auto;padding:0 12px}
.screens{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin:10px 0 18px}
.screen{background:var(--panel);padding:10px;border-radius:14px;border:1px solid #2c2c55}
.label{font-family:'Press Start 2P';font-size:9px;margin-bottom:8px;display:flex;justify-content:space-between}
.reality .label{color:var(--cyan)}.dream .label{color:var(--mag)}.diff .label{color:#ff8ac2}
canvas#real,canvas#dreamc{width:min(288px,42vw);height:min(288px,42vw);image-rendering:pixelated;display:block;background:#000;border-radius:6px}
canvas#diffc{width:min(144px,30vw);height:min(144px,30vw);image-rendering:pixelated;display:block;background:#000;border-radius:6px}
.reality canvas{box-shadow:0 0 20px #22e6ff44}
.crt{position:relative;border-radius:6px;box-shadow:0 0 26px #ff3df066}
.crt::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 2px,transparent 2px 4px);border-radius:6px;pointer-events:none}
.tip{cursor:help;border:1px solid currentColor;border-radius:50%;width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;font-size:7px}
.panel{background:var(--panel);border:1px solid #2c2c55;border-radius:16px;padding:18px;margin-bottom:14px;animation:rise .4s ease}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
.panel h2{font-family:'Press Start 2P';font-size:12px;margin:0 0 14px;color:#fff}
.hidden{display:none!important}
.row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:12px}
label{font-size:12px;display:flex;flex-direction:column;gap:4px;color:var(--dim)}
label b{color:#fff}
label.chk{flex-direction:row;align-items:center}
input[type=number],select{background:#0b0b1a;color:#fff;border:1px solid #2c2c55;border-radius:6px;padding:6px;width:90px;font-family:inherit}
input[type=range]{accent-color:var(--mag);width:150px}
.btn{font-family:'Press Start 2P';font-size:9px;padding:11px 14px;border-radius:10px;border:2px solid #3a3a6a;background:#1e1e3c;color:#fff;cursor:pointer;box-shadow:0 4px 0 #050510}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #050510}
.btn.cyan{border-color:var(--cyan);color:var(--cyan)}.btn.magenta{border-color:var(--mag);color:var(--mag)}
.btn:disabled{opacity:.4}
.progress{height:10px;background:#0b0b1a;border-radius:5px;overflow:hidden;margin-bottom:10px}
#collectBar{height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--mag))}
.stats{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-end;font-size:13px}
.hist{display:flex;gap:10px;align-items:flex-end;height:50px}
.hist div{display:flex;flex-direction:column;align-items:center;gap:3px}
.hist i{display:block;width:26px;background:var(--cyan);height:2px;border-radius:3px 3px 0 0}
.hist small{font-size:8px;color:var(--dim)}
.arch{font-size:11px;color:var(--cyan);background:#0b0b1a;padding:10px;border-radius:8px;overflow-x:auto}
.status{font-size:12px;color:#ffd23d;margin:6px 0 10px;min-height:16px}
#lossChart{width:100%;height:120px;background:#0b0b1a;border-radius:8px}
#strip{width:100%;max-width:600px;image-rendering:pixelated;background:#000;border-radius:6px;margin-top:4px}
.strip-label{font-size:10px;color:var(--dim);margin-top:10px}
.pad{display:flex;gap:16px;justify-content:center;margin:8px 0 14px}
.padbtn{font-size:26px;width:90px;height:60px;border-radius:14px;background:#1e1e3c;border:2px solid var(--mag);color:var(--mag);box-shadow:0 5px 0 #050510;touch-action:none;user-select:none}
.padbtn.on{transform:translateY(4px);box-shadow:0 1px 0 #050510;background:#3a1240}
.sanity{position:relative;height:18px;background:#0b0b1a;border-radius:9px;overflow:hidden;margin-top:12px}
#sanityBar{height:100%;width:100%;background:linear-gradient(90deg,#ff3d6e,#ffd23d,#3dff8a);transition:width .2s}
.sanity span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Press Start 2P';font-size:8px;color:#000}
#lostMsg{font-family:'Press Start 2P';font-size:11px;color:var(--mag);text-align:center;margin-top:12px;animation:blink 1s steps(2) infinite}
.keys{text-align:center;font-size:11px;color:var(--dim)}
footer{text-align:center;padding:24px;font-size:12px;color:var(--dim)}
footer a{color:var(--cyan)}