:root{--bg:#0a0a0a;--mg:#ff00aa;--cy:#00fff0;--ac:#39ff14;--dim:#1a1a1a}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:radial-gradient(ellipse at top,#1a0014,transparent 60%),repeating-linear-gradient(0deg,#0a0a0a 0 2px,#0d0d0d 2px 4px);color:#ddd;font-family:'JetBrains Mono',monospace;min-height:100vh}
header{display:flex;align-items:center;gap:20px;padding:14px 20px;border-bottom:1px solid #222;flex-wrap:wrap}
.logo{font-family:'JetBrains Mono';font-weight:800;font-size:30px;margin:0;position:relative;letter-spacing:-1px}
.logo::before,.logo::after{content:attr(data-text);position:absolute;left:0;top:0;opacity:0}
.logo.glitch::before{opacity:.8;color:var(--mg);transform:translate(-3px,1px);clip-path:inset(10% 0 50% 0)}
.logo.glitch::after{opacity:.8;color:var(--cy);transform:translate(3px,-1px);clip-path:inset(55% 0 5% 0)}
.tag{font-family:VT323;font-size:20px;color:var(--cy);flex:1}
.led{font-size:11px;color:var(--ac);display:flex;align-items:center;gap:6px}
.led span{width:9px;height:9px;background:var(--ac);border-radius:50%;box-shadow:0 0 8px var(--ac);animation:blink 1.3s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
main{display:grid;grid-template-columns:1fr 320px;gap:16px;padding:16px}
.crt{position:relative;border-radius:18px;overflow:hidden;border:2px solid #222;background:#000;aspect-ratio:4/3;box-shadow:0 0 40px #ff00aa22}
.crt::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#0004 0 1px,transparent 1px 3px),radial-gradient(ellipse,transparent 55%,#000c)}
#canvas{width:100%;height:100%;display:block;image-rendering:pixelated;object-fit:cover}
#clean{position:absolute;right:10px;bottom:10px;width:22%;border:1px solid var(--cy);transform:scaleX(-1);opacity:.85;z-index:2}
.hud{position:absolute;left:12px;top:10px;font-family:VT323;font-size:17px;color:var(--ac);z-index:2;white-space:pre;text-shadow:0 0 4px var(--ac)}
.rec{position:absolute;right:14px;top:10px;color:#f33;font-family:VT323;font-size:22px;z-index:2;animation:blink 1s steps(2) infinite}
.start{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;z-index:3;background:#000c;padding:10px;text-align:center}
.small{font-size:11px;color:#888;max-width:100%}
.small input{max-width:100%}
button,select{font-family:inherit;background:var(--dim);color:#eee;border:1px solid #333;padding:10px 12px;cursor:pointer;font-size:12px;min-height:40px}
button:hover{border-color:var(--mg);color:var(--mg);animation:slice .2s steps(2)}
@keyframes slice{50%{clip-path:inset(30% 0 20% 0);transform:translateX(3px)}}
.big{font-size:24px;font-weight:800;padding:18px 30px;border:2px solid var(--mg);color:var(--mg);background:#000}
.red{background:#600;border-color:#f22;color:#fff;font-weight:800;touch-action:none}
.red.on{background:#f22}
.capture{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.gallery{display:flex;gap:6px;margin-top:10px;overflow-x:auto}
.gallery img{height:60px;border:1px solid #333;cursor:pointer}
aside{background:#0f0f0f;border:1px solid #222;padding:14px;font-size:12px;align-self:start}
.drawer-handle{color:var(--mg);font-weight:800;margin-bottom:10px;cursor:pointer}
.presets{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px}
.presets button{padding:5px 8px;font-size:11px;border-color:var(--cy);color:var(--cy)}
.sl{margin-bottom:10px}
.sl label{display:flex;justify-content:space-between;color:#aaa}
.sl label b{color:var(--ac);font-weight:200}
input[type=range]{width:100%;-webkit-appearance:none;background:#222;height:6px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:20px;background:var(--mg)}
input[type=range]::-moz-range-thumb{width:16px;height:20px;background:var(--mg);border:0;border-radius:0}
.row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
#toasts{position:fixed;left:16px;bottom:40px;z-index:9;pointer-events:none}
.toast{background:#000;border:1px solid var(--mg);color:var(--mg);font-family:VT323;font-size:18px;padding:6px 12px;margin-top:6px}
#lightbox{position:fixed;inset:0;background:#000e;display:flex;align-items:center;justify-content:center;z-index:10}
#lightbox img{max-width:92%;max-height:92%}
footer{text-align:center;font-size:11px;color:#666;padding:20px}
footer a{color:var(--cy)}
body.berrry .crt{box-shadow:0 0 60px #ff2244}
@media(max-width:820px){main{grid-template-columns:1fr;padding:10px}
.big{font-size:18px;padding:14px 20px}
.tag{font-size:16px}
aside{position:fixed;left:0;right:0;bottom:0;max-height:70vh;overflow:auto;transform:translateY(calc(100% - 44px));transition:.3s;z-index:5}
aside.open{transform:none}footer{padding-bottom:70px}}