:root{--bg:#0a0a0f;--pink:#ff2e88;--cyan:#00f0ff;--acid:#b6ff00;--dim:#1a1a24;--txt:#d8d8e8}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);font-family:'JetBrains Mono',monospace;font-size:13px;
background-image:radial-gradient(circle at 20% 0%,#ff2e8812,transparent 40%),radial-gradient(circle at 90% 100%,#00f0ff10,transparent 40%),repeating-linear-gradient(0deg,#ffffff03 0 1px,transparent 1px 3px)}
header{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:10px;padding:16px 20px 6px}
h1{font-family:'VT323',monospace;font-size:clamp(28px,5vw,54px);margin:0;letter-spacing:2px;color:#fff;text-shadow:2px 0 var(--pink),-2px 0 var(--cyan);animation:jit 5s infinite}
@keyframes jit{0%,92%,100%{transform:none}93%{transform:translate(3px,-1px) skewX(8deg)}95%{transform:translate(-4px,1px)}97%{transform:translate(2px,0) skewX(-5deg)}}
.sub{margin:0;font-weight:200;color:#888}
.hdr-right{display:flex;align-items:center;gap:10px;font-size:12px}
.led{width:10px;height:10px;border-radius:50%;background:var(--acid);box-shadow:0 0 8px var(--acid);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
#bitrate{color:var(--acid)}
#auth-status a,#auth-status button{color:var(--cyan);font-size:11px}
.status{margin:0 20px;padding:4px 8px;border-left:3px solid var(--pink);color:var(--pink);font-size:12px;min-height:22px}
main{display:grid;grid-template-columns:220px 1fr 280px;gap:14px;padding:14px 20px}
.panel{border:1px solid #00f0ff44;background:#0e0e16cc;padding:12px;box-shadow:0 0 18px #00f0ff0d inset}
.panel h2{font-family:'VT323';font-size:20px;color:var(--cyan);margin:0 0 8px;font-weight:400}
button,select,input[type=number]{font-family:inherit;font-size:12px;background:var(--dim);color:var(--txt);border:1px solid #ff2e8866;padding:7px 9px;cursor:pointer;width:100%;margin-bottom:6px}
button:hover{text-shadow:1px 0 var(--pink),-1px 0 var(--cyan);animation:bj .15s 2;border-color:var(--pink)}
@keyframes bj{50%{transform:translate(2px,-1px)}}
.row{display:flex;gap:6px;align-items:center}
.drop{border:1px dashed var(--acid);padding:22px 8px;text-align:center;color:var(--acid);margin-bottom:8px;cursor:pointer}
.drop.over{background:#b6ff0018}
.chk{display:block;margin:4px 0;cursor:pointer}
.stage{min-width:0}
.canvas-wrap{position:relative;border:1px solid var(--pink);box-shadow:0 0 24px #ff2e8833;background:#000;line-height:0}
#canvas{width:100%;display:block;image-rendering:pixelated;touch-action:none}
.scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#0005 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
.scan.off{display:none}
.lbl{position:absolute;top:6px;font-size:10px;line-height:1;padding:3px 5px;background:#000a;display:none}
.lbl.l{left:6px;color:var(--cyan)}.lbl.r{right:6px;color:var(--pink)}
.split .lbl{display:block}
.egg{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);background:#000c;color:var(--acid);padding:6px 10px;font-size:12px;line-height:1.3;display:none;text-align:center}
#timeline{width:100%;display:block;margin-top:6px;background:#050508}
.legend{font-size:11px;color:#777;margin-top:4px}
.legend b{padding:0 4px}.i{color:var(--acid)}.p{color:var(--cyan)}.x{color:#ff3344}
.sl{margin-bottom:9px}
.sl label{display:flex;justify-content:space-between;font-size:11px}
.sl label span{color:var(--acid)}
input[type=range]{width:100%;accent-color:var(--pink)}
.seed label{font-size:11px}.seed input{margin:0}.seed button{width:44px;margin:0}
.nuke{background:#7a0020;border:2px solid #ff3344;color:#fff;font-weight:800;font-size:15px;padding:12px;margin-top:8px;box-shadow:0 0 16px #ff334466}
.hex,.export,.gallery{margin:0 20px 14px}
.hexhead{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
#ticker{color:var(--pink);font-size:11px;overflow:hidden;white-space:nowrap;max-width:50%}
#hexdump{font-size:12px;line-height:1.6;max-height:130px;overflow:auto;word-break:break-all}
#hexdump span{cursor:pointer;padding:0 2px}
#hexdump span:hover{background:var(--cyan);color:#000}
#hexdump .hd{color:var(--acid)}#hexdump .bad{color:var(--pink);font-weight:800}#hexdump .ed{background:var(--pink);color:#000}
.export{display:flex;gap:8px;flex-wrap:wrap}.export button{width:auto;flex:1;margin:0}
#btnRec.rec{background:#ff3344;color:#fff}
#galleryGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
#galleryGrid figure{margin:0;border:1px solid #ff2e8855}
#galleryGrid img{width:100%;display:block;image-rendering:pixelated}
#galleryGrid figcaption{font-size:10px;padding:3px;color:#aaa}
footer{text-align:center;padding:16px;color:#666;font-size:12px}
footer a{color:var(--pink)}
@media(max-width:900px){main{grid-template-columns:1fr}.stage{order:-1}.left,.right{order:1}}