:root{--bg:#121214;--panel:#1b1b1f;--line:#2c2c33;--g:#39ff88;--m:#ff3fb4;--t:#d9d9df;--dim:#7a7a86}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at 20% 0%,#1d2a22 0,transparent 45%),radial-gradient(circle at 90% 100%,#2a1626 0,transparent 45%),var(--bg);color:var(--t);font-family:'IBM Plex Mono',monospace;font-size:13px;min-height:100vh}
.crt{pointer-events:none;position:fixed;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);z-index:50}
header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
h1{font-family:'VT323',monospace;font-size:44px;margin:0;line-height:1;letter-spacing:2px;color:var(--g);text-shadow:0 0 12px rgba(57,255,136,.5)}
h1 span{color:var(--m);text-shadow:0 0 12px rgba(255,63,180,.5)}
.tag{color:var(--dim);font-size:12px}
#recLight{color:#ff3b3b;margin-left:8px;opacity:0}
#recLight.on{animation:blink 1s steps(2) infinite}
@keyframes blink{0%{opacity:1}100%{opacity:0}}
.topbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
label{display:inline-flex;gap:6px;align-items:center;color:var(--dim);font-size:12px}
select,input[type=text]{background:#0d0d10;color:var(--t);border:1px solid var(--line);border-radius:6px;padding:6px 8px;font-family:inherit;font-size:12px}
.btn{background:#0d0d10;color:var(--t);border:1px solid var(--line);border-radius:6px;padding:6px 10px;font-family:inherit;font-size:12px;cursor:pointer;transition:.15s}
.btn:hover{border-color:var(--g);color:var(--g)}
.btn.on{background:var(--g);color:#000;border-color:var(--g);box-shadow:0 0 10px rgba(57,255,136,.6)}
.btn.mon{background:var(--m);color:#000;border-color:var(--m);box-shadow:0 0 10px rgba(255,63,180,.6)}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn.big{padding:9px 16px;font-weight:700}
.btn.rec{color:#ff5c5c;border-color:#5a2020}
main{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:14px}
main.fixed{max-width:1200px;margin:0 auto}
@media(max-width:820px){main{grid-template-columns:1fr}}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px;box-shadow:inset 0 0 30px rgba(0,0,0,.5);animation:rise .5s both}
.panel:nth-child(2){animation-delay:.12s}
@keyframes rise{from{opacity:0;transform:translateY(12px)}}
.phead{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:6px;flex-wrap:wrap}
.pname{font-family:'VT323';font-size:28px;color:var(--g)}
.panel.b .pname{color:var(--m)}
.screen{position:relative;background:#000;border-radius:8px;overflow:hidden;border:1px solid #000}
.screen canvas{display:block;width:100%;height:auto}
.screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:none}
.screen .note{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.75);color:var(--m);padding:4px 8px;font-size:11px;display:none}
.srcrow{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.srcrow input[type=text]{flex:1;min-width:120px}
.sec{margin-top:8px}
.sec h4{margin:0 0 4px;font-weight:300;color:var(--dim);font-size:11px;letter-spacing:2px;text-transform:uppercase}
.chips{display:flex;flex-wrap:wrap;gap:3px}
.chips .btn{padding:3px 6px;font-size:11px;min-width:30px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
input[type=range]{accent-color:var(--g);flex:1;min-width:100px}
.panel.b input[type=range]{accent-color:var(--m)}
.mono{font-family:'VT323';font-size:22px;color:var(--g)}
.dock{position:sticky;bottom:0;background:rgba(18,18,20,.95);backdrop-filter:blur(6px);border-top:1px solid var(--line);padding:10px 14px;z-index:20}
.dockrow{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.sw input{accent-color:var(--m)}
.meter{width:90px;height:8px;background:#000;border:1px solid var(--line);border-radius:4px;overflow:hidden}
#meterFill{height:100%;width:0;background:linear-gradient(90deg,var(--g),var(--m))}
.recs{display:flex;gap:8px;overflow-x:auto;margin-top:8px}
.recs .empty{color:var(--dim);font-size:11px}
.take{flex:0 0 auto;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:6px;width:200px}
.take video{width:100%;border-radius:4px;background:#000}
.take .row{justify-content:space-between;font-size:11px}
footer{text-align:center;padding:14px;color:var(--dim);font-size:11px}
footer a{color:var(--m)}