:root{--bg:#0b0b0b;--red:#c0221a;--grn:#39ff14;--tx:#e8d9c4}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at top,#2a0705,var(--bg) 60%);color:var(--tx);font-family:'VT323',monospace;font-size:20px;min-height:100vh}
.crt{pointer-events:none;position:fixed;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 1px,transparent 1px 3px);z-index:9}
header{text-align:center;padding:18px 10px 6px}
.logo{font-family:'Press Start 2P';color:var(--red);font-size:clamp(22px,6vw,48px);margin:0;text-shadow:0 0 8px #f22,0 0 24px #900;animation:flick 3s infinite}
@keyframes flick{0%,92%,100%{opacity:1}93%{opacity:.4}95%{opacity:1}97%{opacity:.6}}
.sub{opacity:.7}
.hdr-row{display:flex;gap:14px;justify-content:center;margin-top:8px;flex-wrap:wrap}
.badge{font-family:'Press Start 2P';font-size:10px;padding:5px 8px;border:2px solid}
.badge.idle{color:#888}.badge.recording{color:var(--red);animation:flick 1s infinite}.badge.training{color:orange}.badge.dreaming{color:var(--grn)}
main{max-width:1100px;margin:auto;padding:10px}
.screens{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.screen{position:relative;flex:1 1 400px;max-width:520px}
.screen canvas{width:100%;aspect-ratio:4/3;image-rendering:pixelated;border:3px solid #3a0d0a;background:#000;box-shadow:0 0 30px #600}
.lbl{font-family:'Press Start 2P';font-size:11px;color:var(--red);margin-bottom:4px}.lbl.green{color:var(--grn)}
#hud{position:absolute;left:8px;bottom:12px;color:var(--grn);text-shadow:0 0 4px #000;font-size:18px}
.tabs{display:flex;gap:6px;margin:16px 0 0}
.tab{flex:1;font-family:'Press Start 2P';font-size:10px;background:#1a0a08;color:var(--tx);border:2px solid #3a0d0a;padding:10px;cursor:pointer}
.tab.active{background:var(--red);color:#fff}
.panel{display:none;border:2px solid #3a0d0a;background:#120807cc;padding:14px}
.panel.active{display:block}
.btns{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0;align-items:center}
button{font-family:'Press Start 2P';font-size:10px;background:#220d0a;color:var(--tx);border:2px solid var(--red);padding:9px 10px;cursor:pointer}
button:hover{background:var(--red)}
input[type=range]{width:100%;accent-color:var(--red)}
input[type=number]{width:90px;background:#000;color:var(--grn);border:1px solid #444;font-family:inherit;font-size:18px}
.grid{display:flex;gap:14px;flex-wrap:wrap}
canvas#hist,canvas#loss{width:100%;max-width:640px;display:block;margin-top:10px;background:#050505;border:1px solid #333}
.log{height:70px;overflow:hidden;color:#b99;font-size:16px;margin-top:6px}
.bar{display:inline-block;width:200px;height:12px;border:1px solid #555;vertical-align:middle}
.bar div{height:100%;width:0;background:linear-gradient(90deg,var(--grn),orange,var(--red))}
.prev{display:flex;gap:14px;margin-top:10px}.prev canvas{display:block;width:192px;border:1px solid #333}
.caption{color:var(--grn);margin:8px 0;min-height:24px}
.pad{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.pad button{min-width:56px;padding:14px;user-select:none;touch-action:none}
.pad .red{background:var(--red)}
.chk{display:flex;gap:4px;align-items:center}
#msg{color:orange;margin:8px 0}
footer{text-align:center;padding:20px;opacity:.8}footer a{color:var(--grn)}