:root{--bg:#0a0a0f;--g:#00ff9c;--m:#ff00aa;--c:#00e5ff;--a:#ffb000;--metal:#1a1c22}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at top,#16121f,var(--bg) 60%);color:var(--g);font-family:'JetBrains Mono',monospace;font-weight:300;min-height:100vh}
.crt{pointer-events:none;position:fixed;inset:0;z-index:50;background:repeating-linear-gradient(0deg,rgba(0,0,0,.15) 0 1px,transparent 1px 3px);animation:flick 4s infinite}
@keyframes flick{0%,100%{opacity:.6}50%{opacity:.75}52%{opacity:.4}54%{opacity:.7}}
header{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid #222}
h1{font-family:'VT323',monospace;font-size:clamp(40px,7vw,78px);margin:0;letter-spacing:4px;color:#fff;text-shadow:2px 0 var(--m),-2px 0 var(--c);animation:jit 3s infinite steps(1)}
@keyframes jit{0%,92%{transform:none}93%{transform:translate(3px,-1px);text-shadow:-4px 0 var(--m),4px 0 var(--c)}95%{transform:translate(-2px,1px)}}
.sub{margin:0;font-size:11px;font-variant:small-caps;letter-spacing:1px;color:#8a8fa0}
#rec{font-family:'VT323';font-size:24px;color:#444}
#rec.on{color:#ff2244;animation:blink 1s infinite}
@keyframes blink{50%{opacity:.2}}
main{display:grid;grid-template-columns:1fr 340px;gap:18px;padding:18px;max-width:1400px;margin:auto}
@media(max-width:860px){main{grid-template-columns:1fr}.rack{max-height:none}}
.presets{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.pill{border:1px solid var(--c);background:transparent;color:var(--c);border-radius:20px;padding:4px 12px;font:inherit;font-size:12px;cursor:pointer}
.pill:hover{background:var(--c);color:#000}
.pill.custom{border-color:var(--m);color:var(--m)}
.stage{position:relative;border:10px solid #15161b;border-radius:14px;box-shadow:0 0 0 1px #333,0 0 40px rgba(255,0,170,.15);overflow:hidden;background:#000}
canvas{display:block;width:100%;aspect-ratio:4/3;image-rendering:pixelated}
.scanlines{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 2px,transparent 2px 4px),radial-gradient(ellipse,transparent 55%,rgba(0,0,0,.7))}
.scanlines.off{display:none}
.hud-tl{position:absolute;top:10px;left:10px}
.badge{font-family:'VT323';font-size:26px;padding:0 10px;border-radius:3px;color:#000}
.badge.I{background:var(--g)}.badge.P{background:var(--a)}
.badge.MOSH{background:var(--m);color:#fff;animation:blink .6s infinite}
.hud-br{position:absolute;bottom:8px;right:10px;font-size:12px;color:var(--g);text-shadow:0 0 6px var(--g)}
.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(0,0,0,.45);text-align:center;padding:10px}
.overlay p{font-family:'VT323';font-size:30px;color:#fff;margin:0}
.overlay.hide{display:none}
.btn{font:inherit;font-weight:800;font-size:12px;letter-spacing:1px;background:#111;color:var(--g);border:1px solid var(--g);padding:8px 12px;cursor:pointer;text-transform:uppercase}
.btn:hover{text-shadow:2px 0 var(--m),-2px 0 var(--c);box-shadow:2px 0 var(--m),-2px 0 var(--c)}
.btn.big{font-size:16px;padding:12px 22px}
.btn.hot{border-color:var(--m);color:var(--m)}
.capture{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.keys{font-size:11px;color:#555}
.rack{display:flex;flex-direction:column;gap:12px}
.panel{position:relative;background:linear-gradient(#22252d,var(--metal));border:1px solid #333;border-radius:4px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.panel::before,.panel::after{content:'';position:absolute;top:6px;width:7px;height:7px;border-radius:50%;background:#555;box-shadow:inset 0 0 0 1px #222}
.panel::before{left:6px}.panel::after{right:6px}
h2{font-family:'VT323';font-weight:400;margin:0;font-size:22px;color:var(--a);letter-spacing:3px}
label{display:flex;flex-direction:column;gap:4px;font-size:11px;color:#aab}
label b{color:var(--g);font-weight:800;position:absolute;right:16px}
label{position:relative}
input[type=range]{-webkit-appearance:none;width:100%;height:6px;background:linear-gradient(90deg,var(--g),#063);border-radius:3px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:radial-gradient(#ddd,#555);border:2px solid #111;cursor:pointer}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#bbb;border:2px solid #111}
select{background:#0d0e12;color:var(--g);border:1px solid #333;font:inherit;padding:5px}
.tog{flex-direction:row;align-items:center;cursor:pointer}
.tog input{accent-color:var(--m);width:16px;height:16px}
.big-red span{font-family:'VT323';font-size:22px;color:#ff3355}
#hex{margin:0;font-size:10px;line-height:1.35;background:#000;padding:6px;height:120px;overflow:hidden;color:#0a7}
#hex i{color:var(--m);font-style:normal;font-weight:800}
footer{text-align:center;padding:20px;font-size:12px;color:#666}
footer a{color:var(--m)}