:root{--bg:#0a0014;--mag:#ff2bd6;--cy:#22f3ff;--or:#ff9a1f;--fg:#f4e9ff}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at top,#2a0640 0%,var(--bg) 60%),var(--bg);color:var(--fg);font-family:'IBM Plex Mono',monospace;min-height:100vh;
background-image:linear-gradient(rgba(255,43,214,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(34,243,255,.05) 1px,transparent 1px),radial-gradient(ellipse at top,#2a0640,var(--bg) 60%);background-size:32px 32px,32px 32px,100% 100%}
header{text-align:center;padding:18px 10px 6px}
h1{font-family:'Major Mono Display',monospace;font-size:clamp(26px,5vw,54px);margin:0;color:var(--cy);text-shadow:0 0 12px var(--cy),3px 0 var(--mag);position:relative;display:inline-block}
.glitch{animation:gl 3s infinite steps(1)}
@keyframes gl{0%,92%{transform:none}93%{transform:translate(3px,-1px) skewX(8deg);text-shadow:-4px 0 var(--mag),4px 0 var(--or)}96%{transform:translate(-2px,1px)}}
.sub{font-weight:200;margin:4px 0;color:#c9a8e8;font-size:13px}
.row-head{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap}
.pill{font-family:'VT323';font-size:20px;padding:2px 14px;border:1px solid var(--or);color:var(--or);border-radius:20px;animation:bl 1s infinite}
@keyframes bl{50%{opacity:.4}}
#auth-status{font-size:12px}#auth-status a{color:var(--cy)}
main{max-width:1200px;margin:0 auto;padding:8px}
.views{display:grid;grid-template-columns:1fr 150px 1fr;gap:10px}
@media(max-width:800px){.views{grid-template-columns:1fr}.divider{flex-direction:row!important;flex-wrap:wrap;justify-content:space-around}}
.panel{border:1px solid var(--mag);box-shadow:0 0 14px rgba(255,43,214,.35),inset 0 0 20px rgba(34,243,255,.06);background:rgba(10,0,20,.75);border-radius:6px;padding:8px;position:relative}
.ptitle{font-family:'VT323';font-size:20px;color:var(--cy);display:flex;justify-content:space-between;margin-bottom:6px}
#lap{color:var(--or)}
#scene-container{width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:4px}
#scene-container canvas{display:block;width:100%!important;height:100%!important}
.reality{position:absolute;inset:36px 8px 8px;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,#14001f,#14001f 10px,#1d0030 10px,#1d0030 20px);font-family:'VT323';font-size:28px;color:var(--mag);text-align:center}
.hidden{display:none}
.neuralWrap{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:4px}
#neural{width:100%;height:100%;image-rendering:pixelated;filter:drop-shadow(2px 0 0 rgba(255,0,80,.6)) drop-shadow(-2px 0 0 rgba(0,255,255,.5)) saturate(1.3)}
.scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 2px,transparent 2px 4px);animation:fl .15s infinite}
@keyframes fl{50%{opacity:.85}}
.caption{font-family:'VT323';font-size:19px;color:var(--or);min-height:44px;margin-top:6px}
.divider{display:flex;flex-direction:column;gap:6px;justify-content:center;text-align:center}
.lbl{font-size:11px;letter-spacing:2px;color:#b996d6;margin:4px 0}
.big{font-family:'VT323';font-size:30px;color:var(--cy)}
.meter{height:12px;border:1px solid var(--cy);border-radius:6px;overflow:hidden;min-width:100px}
#mseBar{height:100%;width:0;background:#3f6;transition:width .2s}
.strip{display:flex;gap:10px;align-items:center;margin:10px 0;flex-wrap:wrap}
#timeline{flex:1;display:flex;gap:3px;overflow:hidden;min-width:200px;height:34px;align-items:center}
.chip{flex:0 0 26px;height:26px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:13px;color:#000;font-weight:700}
.chip.now{box-shadow:0 0 10px #fff;transform:scale(1.15)}
.pad{display:flex;gap:6px;align-items:center}.pad .col{display:flex;flex-direction:column;gap:6px}
.pad button{width:56px;height:44px;font-size:20px;touch-action:none}
button{background:#1a0029;color:var(--fg);border:1px solid var(--cy);border-radius:4px;padding:8px 12px;font-family:'IBM Plex Mono';font-weight:500;cursor:pointer}
button:hover{background:#2c0045}button.on{background:var(--cy);color:#000}
button.hot{border-color:var(--mag)}button.hot.on{background:var(--mag)}
.train summary{font-family:'VT323';font-size:22px;color:var(--mag);cursor:pointer}
.grid{display:grid;grid-template-columns:2fr 1fr;gap:14px}@media(max-width:800px){.grid{grid-template-columns:1fr}}
#thumbs{width:100%;image-rendering:pixelated;border:1px solid #402060}
#loss{width:100%;border:1px solid #402060;background:#07000f}
.btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
label{display:block;font-size:12px;margin-top:6px}label input{width:100%;accent-color:var(--mag)}
#board{font-family:'VT323';font-size:18px;margin:0;padding-left:24px;color:var(--cy)}
footer{text-align:center;padding:20px;font-size:12px;color:#a585c4}footer a{color:var(--or)}