:root{--bg:#0a0a0f;--mag:#ff2bd6;--cy:#00f0ff;--ac:#39ff14;--ink:#d8d8e8}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at center,#14101e 0%,var(--bg) 70%);color:var(--ink);font-family:'Space Mono',monospace;min-height:100vh}
.crt{pointer-events:none;position:fixed;inset:0;z-index:50;background:repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 1px,transparent 1px 3px);box-shadow:inset 0 0 160px rgba(0,0,0,.9)}
header{text-align:center;padding:14px 10px 4px}
h1{font-family:'VT323',monospace;font-size:clamp(56px,10vw,110px);margin:0;line-height:.9;letter-spacing:6px;position:relative;display:inline-block;color:#fff;text-shadow:3px 0 var(--mag),-3px 0 var(--cy)}
.glitch::after{content:attr(data-text);position:absolute;left:0;top:0;color:var(--ac);clip-path:inset(40% 0 45% 0);transform:translateX(4px);animation:jit 2.5s infinite steps(1);opacity:.7}
@keyframes jit{0%{transform:translateX(4px);clip-path:inset(40% 0 45% 0)}30%{transform:translateX(-6px);clip-path:inset(10% 0 80% 0)}60%{transform:translateX(2px);clip-path:inset(70% 0 10% 0)}90%{opacity:0}}
.sub{font-size:13px;opacity:.8}
.rec{color:#ff3b3b;margin-left:8px;animation:blink 1s infinite steps(2);display:none}
.rec.on{display:inline}
@keyframes blink{50%{opacity:0}}
main{display:grid;grid-template-columns:1fr 330px;gap:16px;padding:12px 16px;max-width:1400px;margin:0 auto}
.screen{position:relative;border:2px solid #222;border-radius:10px;overflow:hidden;background:#000;box-shadow:0 0 30px rgba(255,43,214,.15)}
#canvas{width:100%;aspect-ratio:16/9;display:block;image-rendering:pixelated}
#pip{position:absolute;right:10px;bottom:10px;width:22%;border:1px solid var(--cy);border-radius:4px;transform:scaleX(-1);opacity:.85}
#pip.hide{display:none}
.toast{position:absolute;left:50%;top:14px;transform:translateX(-50%);background:rgba(0,0,0,.75);border:1px solid var(--ac);color:var(--ac);padding:6px 12px;font-size:13px;opacity:0;transition:opacity .3s;white-space:nowrap;max-width:90%;overflow:hidden;text-overflow:ellipsis}
.toast.show{opacity:1}
#controls{background:linear-gradient(180deg,#120f1a,#0c0b12);border:1px solid #2a2338;border-radius:10px;padding:14px}
.label{font-family:'VT323';font-size:20px;color:var(--cy);letter-spacing:3px;margin:8px 0 6px}
.presets,.actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}
button{font-family:'Space Mono';font-size:12px;color:var(--ink);background:#17141f;border:1px solid #3a3150;border-bottom-width:4px;border-radius:6px;padding:8px 6px;cursor:pointer;transition:transform .05s,box-shadow .2s}
button:hover{box-shadow:0 0 10px var(--mag);animation:hj .2s 2}
@keyframes hj{50%{transform:translateX(1px)}}
button:active,button.down{transform:translateY(3px);border-bottom-width:1px}
button.on{border-color:var(--mag);color:#fff;box-shadow:0 0 12px var(--mag) inset}
button small{display:block;opacity:.5;font-size:10px}
.big{grid-column:1/-1;font-size:15px;padding:12px}
.hot{border-color:var(--mag);color:var(--mag)}
.hot.down{background:var(--mag);color:#000}
#record.on{background:#ff3b3b;color:#000}
.sl{margin:6px 0}
.sl div{display:flex;justify-content:space-between;font-size:12px}
.sl span{color:var(--ac)}
input[type=range]{width:100%;-webkit-appearance:none;background:transparent}
input[type=range]::-webkit-slider-runnable-track{height:4px;background:linear-gradient(90deg,var(--cy),var(--mag));border-radius:2px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:#fff;border:2px solid var(--mag);margin-top:-5px;border-radius:2px}
input[type=range]::-moz-range-track{height:4px;background:linear-gradient(90deg,var(--cy),var(--mag))}
.therapist{margin-top:10px;font-size:12px;color:var(--mag);min-height:16px}
.gallery{display:flex;gap:8px;overflow-x:auto;padding:10px 0}
.thumb{position:relative;flex:0 0 auto}
.thumb img{height:70px;border:1px solid #333;border-radius:4px;cursor:pointer;display:block}
.thumb b{position:absolute;top:2px;right:2px;background:#000;color:var(--mag);cursor:pointer;padding:0 5px;font-size:12px}
footer{text-align:center;padding:16px;font-size:12px;opacity:.7}
footer a{color:var(--cy)}
@media(max-width:860px){main{grid-template-columns:1fr}#controls{position:sticky;bottom:0;max-height:48vh;overflow:auto;z-index:20}}