:root{--bg:#0a0a0a;--g:#39ff14;--m:#ff00ff;--c:#00ffff;--p:#141414}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--g);font-family:'Space Mono',monospace;min-height:100vh;
background-image:repeating-linear-gradient(0deg,rgba(57,255,20,.03) 0 1px,transparent 1px 3px),radial-gradient(circle at 20% 0%,rgba(255,0,255,.12),transparent 50%),radial-gradient(circle at 90% 100%,rgba(0,255,255,.1),transparent 50%)}
header{text-align:center;padding:14px 10px 6px;position:relative}
h1{font-family:'VT323',monospace;font-size:clamp(48px,9vw,96px);line-height:.9;letter-spacing:6px;text-shadow:3px 0 var(--m),-3px 0 var(--c);cursor:default}
h1:hover{animation:jit .15s infinite}
@keyframes jit{0%{transform:translate(0)}25%{transform:translate(-3px,1px);text-shadow:-5px 0 var(--m),5px 0 var(--c)}50%{transform:translate(2px,-2px)}75%{transform:translate(-1px,2px);text-shadow:6px 0 var(--m),-4px 0 var(--c)}}
#tagline{color:var(--c);font-size:13px;opacity:.85}
#rec{position:absolute;top:14px;right:16px;color:#ff2050;font-weight:700;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.hidden{display:none!important}
main{display:flex;gap:16px;padding:10px 16px;max-width:1400px;margin:0 auto}
#stage-wrap{flex:1;min-width:0}
#stage{position:relative;aspect-ratio:16/9;border:2px solid var(--g);box-shadow:0 0 20px rgba(57,255,20,.3),inset 0 0 30px #000;background:#000;overflow:hidden}
#canvas{width:100%;height:100%;display:block;image-rendering:pixelated}
#scan{position:absolute;inset:0;pointer-events:none;display:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 2px,transparent 2px 4px);box-shadow:inset 0 0 80px rgba(0,0,0,.8)}
#scan.on{display:block}
#hud{position:absolute;top:6px;left:8px;font-size:11px;display:flex;flex-direction:column;background:rgba(0,0,0,.55);padding:4px 6px;color:var(--g);pointer-events:none}
#hud #preset{color:var(--m)}
#gate{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:10px}
button{font-family:'Space Mono',monospace;background:var(--p);color:var(--g);border:2px solid var(--g);padding:7px 12px;cursor:pointer;font-weight:700;font-size:12px;letter-spacing:1px;box-shadow:3px 3px 0 var(--m);transition:transform .05s}
button:hover{background:var(--g);color:#000}
button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--m)}
button.on{background:var(--g);color:#000}
button.hot{border-color:var(--m);color:var(--m);box-shadow:3px 3px 0 var(--c)}
button.hot:hover{background:var(--m);color:#000}
.big{font-family:'VT323';font-size:clamp(24px,4vw,40px);padding:10px 24px;animation:jit 2s infinite}
.file{font-size:12px;color:var(--c);border:1px dashed var(--c);padding:6px 12px;cursor:pointer;background:rgba(0,0,0,.6)}
.file input{display:none}
#denied{color:var(--m);background:rgba(0,0,0,.7);padding:4px}
#presets,#actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
#presets button{border-radius:20px;border-color:var(--c);color:var(--c);box-shadow:none;font-weight:400}
#presets button:hover,#presets button.on{background:var(--c);color:#000}
#gallery{display:flex;gap:8px;overflow-x:auto;margin-top:12px;min-height:10px;padding-bottom:4px}
#gallery img{height:70px;border:1px solid var(--m);cursor:pointer;image-rendering:pixelated;flex-shrink:0}
#gallery img:hover{border-color:var(--g);transform:scale(1.05)}
.keys{font-size:11px;opacity:.5;margin-top:8px}
#panel{width:330px;flex-shrink:0;max-height:calc(100vh - 160px);overflow-y:auto}
#drawer-handle{display:none}
.mod{background:var(--p);border:2px solid #2a2a2a;margin-bottom:10px;position:relative;
box-shadow:inset 0 0 0 1px #000,4px 4px 0 #000}
.mod::before,.mod::after{content:'';position:absolute;top:8px;width:6px;height:6px;border-radius:50%;background:#333;box-shadow:0 0 0 1px #000}
.mod::before{left:5px}.mod::after{right:5px}
.mod-h{display:flex;align-items:center;justify-content:space-between;padding:6px 18px;cursor:pointer;font-family:'VT323';font-size:20px;border-bottom:1px solid #222}
.led{width:30px;height:16px;border:1px solid #444;background:#200;position:relative;cursor:pointer;flex-shrink:0}
.led::after{content:'';position:absolute;top:3px;left:3px;width:8px;height:8px;background:#500}
.led.on{border-color:var(--g)}
.led.on::after{left:18px;background:var(--g);box-shadow:0 0 8px var(--g)}
.mod-b{padding:8px 18px 10px}
.mod.closed .mod-b{display:none}
.row{display:flex;flex-direction:column;font-size:11px;margin-bottom:6px}
.row label{display:flex;justify-content:space-between;color:#9f9}
.row label b{color:var(--c);font-weight:400}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;background:#000;border:1px solid #333;margin-top:4px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:20px;background:linear-gradient(#ccc,#666);border:1px solid #000;cursor:pointer}
input[type=range]::-moz-range-thumb{width:12px;height:20px;background:linear-gradient(#ccc,#666);border:1px solid #000;border-radius:0}
select{background:#000;color:var(--c);border:1px solid #333;font-family:inherit;font-size:11px;padding:3px;margin-top:3px}
.flick{animation:fl .2s}
@keyframes fl{0%{filter:hue-rotate(90deg) invert(1)}100%{filter:none}}
footer{text-align:center;font-size:11px;padding:16px;opacity:.7}
footer a{color:var(--m)}
@media (max-width:860px){
 main{flex-direction:column;padding:8px}
 #panel{width:100%;position:sticky;bottom:0;max-height:none;background:var(--bg);border-top:2px solid var(--m)}
 #drawer-handle{display:block;text-align:center;padding:6px;font-family:'VT323';font-size:20px;color:var(--m);cursor:pointer}
 #panel #controls{max-height:0;overflow:hidden;transition:max-height .3s}
 #panel.open #controls{max-height:55vh;overflow-y:auto}
}