@import"https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Share+Tech+Mono&display=swap";*{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0a0a0a;--panel: #0e0b08;--border: #221a14;--dim: #2e221a;--accent: #7a4a2a;--accent2: #d4a97a;--accent3: #e8c9a0;--text: #e8ddd4;--muted: #5a4a3a;--kill-active: #7a4a2a;--kill-inactive: #140f0a;--siren: #c47a45}body{background:var(--bg);font-family:Share Tech Mono,monospace;color:var(--text)}.mixer{background:var(--bg);min-height:100vh;padding:16px;position:relative;overflow:hidden}.mixer:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,.012) 2px,rgba(255,255,255,.012) 4px);pointer-events:none;z-index:100}.main-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:12px}.bottom-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}.panel{background:var(--panel);border:1px solid var(--border);border-radius:4px;padding:16px}.panel-title{font-family:Orbitron,monospace;font-size:9px;letter-spacing:3px;color:var(--muted);text-transform:uppercase;margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--border)}.kills-panel{grid-column:1}.faders-panel{grid-column:2}.spectrum-panel{grid-column:3}.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border)}.logo{display:flex;align-items:center;gap:12px}.logo-img{width:52px;height:52px;border-radius:50%;border:1px solid var(--accent);box-shadow:0 0 14px #7a4a2a80;object-fit:cover}.logo-text{display:flex;flex-direction:column;gap:2px}.logo-name{font-family:Orbitron,monospace;font-weight:900;font-size:18px;letter-spacing:4px;color:var(--accent3);text-shadow:0 0 16px rgba(196,122,69,.5)}.logo-sub{font-family:Share Tech Mono,monospace;font-size:10px;letter-spacing:5px;color:var(--muted);text-transform:uppercase}.status-bar{display:flex;gap:12px;align-items:center;font-size:11px;color:var(--muted)}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--muted)}.status-dot.active{background:var(--accent2);box-shadow:0 0 8px var(--accent2);animation:pulse 1.5s infinite}.status-dot.midi{background:var(--accent3);box-shadow:0 0 8px var(--accent3)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.kill-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.kill-btn{position:relative;background:var(--kill-inactive);border:1px solid var(--dim);border-radius:3px;padding:14px 8px;cursor:pointer;transition:all .08s;text-align:center;overflow:hidden;-webkit-user-select:none;user-select:none}.kill-btn:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,rgba(255,255,255,.04) 0%,transparent 100%);pointer-events:none}.kill-btn.killed{background:var(--kill-active);border-color:var(--kill-active);box-shadow:0 0 16px #7a4a2a99,inset 0 1px #ffffff1a}.kill-btn.killed .kill-label{color:#fff}.kill-btn.killed .kill-freq{color:#ffffffb3}.kill-label{font-family:Orbitron,monospace;font-weight:700;font-size:13px;letter-spacing:1px;color:var(--text);display:block;margin-bottom:4px}.kill-freq{font-size:10px;color:var(--muted);display:block}.kill-indicator{width:6px;height:6px;border-radius:50%;background:var(--dim);margin:6px auto 0;transition:all .08s}.kill-btn.killed .kill-indicator{background:#fff;box-shadow:0 0 6px #fff}.fader-row{display:flex;align-items:center;gap:10px;margin-bottom:12px}.fader-label{font-size:10px;color:var(--muted);width:32px;text-align:right;letter-spacing:1px}.fader-value{font-size:10px;color:var(--muted);width:32px;text-align:left}input[type=range]{-webkit-appearance:none;width:100%;height:4px;background:var(--border);border-radius:2px;outline:none;cursor:pointer;flex:1}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:22px;background:#c8b89a;border-radius:2px;cursor:grab;box-shadow:0 2px 6px #000c}input[type=range].accent::-webkit-slider-thumb{background:var(--accent)}input[type=range].green::-webkit-slider-thumb{background:var(--accent2)}input[type=range].yellow::-webkit-slider-thumb{background:var(--accent3)}.knob-row{display:flex;gap:8px;justify-content:space-between}.knob-wrap{display:flex;flex-direction:column;align-items:center;gap:4px}.knob{width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#2a2a2a,#0d0d0d);border:1px solid var(--dim);position:relative;cursor:pointer;box-shadow:0 3px 8px #000c,inset 0 1px #ffffff0d}.knob-dot{width:3px;height:10px;background:var(--accent2);border-radius:2px;position:absolute;left:50%;top:4px;transform-origin:50% 18px;transform:translate(-50%) rotate(0);box-shadow:0 0 4px var(--accent2)}.knob-label{font-size:9px;color:var(--muted);letter-spacing:1px;text-align:center}.knob-value{font-size:9px;color:var(--text);text-align:center}canvas.spectrum{width:100%;image-rendering:pixelated}.vu-row{display:flex;gap:3px;height:12px;margin-bottom:8px}.vu-seg{flex:1;border-radius:1px;background:var(--border);transition:background .05s}.vu-seg.lit-green{background:var(--accent2)}.vu-seg.lit-yellow{background:var(--accent3)}.vu-seg.lit-red{background:var(--accent);box-shadow:0 0 4px var(--accent)}.delay-active-btn{width:100%;padding:10px;background:var(--bg);border:1px solid var(--dim);border-radius:3px;color:var(--text);font-family:Orbitron,monospace;font-size:10px;letter-spacing:2px;cursor:pointer;margin-bottom:12px;transition:all .1s}.delay-active-btn.on{background:#d4a97a14;border-color:var(--accent2);color:var(--accent2);box-shadow:0 0 12px #d4a97a33}.echo-tap{width:100%;padding:8px;background:var(--bg);border:1px solid var(--dim);border-radius:2px;color:var(--accent3);font-family:Orbitron,monospace;font-size:9px;letter-spacing:2px;cursor:pointer;margin-top:10px;transition:all .05s;text-align:center}.echo-tap:active{background:#ffcc0026;border-color:var(--accent3);transform:scale(.97)}.siren-btn{width:100%;padding:18px;background:var(--bg);border:1px solid var(--dim);border-radius:3px;color:var(--muted);font-family:Orbitron,monospace;font-size:12px;letter-spacing:3px;cursor:pointer;margin-bottom:10px;transition:all .1s}.siren-btn.wailing{background:#c47a451f;border-color:var(--siren);color:var(--siren);animation:sirenGlow .5s infinite alternate}@keyframes sirenGlow{0%{box-shadow:0 0 10px #c47a4533}to{box-shadow:0 0 30px #c47a45b3}}.siren-controls{display:flex;gap:8px;align-items:center}.siren-type-btn{flex:1;padding:6px;background:var(--bg);border:1px solid var(--dim);border-radius:2px;color:var(--muted);font-family:Share Tech Mono,monospace;font-size:9px;cursor:pointer;letter-spacing:1px;transition:all .1s;text-align:center}.siren-type-btn.active{border-color:var(--siren);color:var(--siren);background:#c47a451a}.device-label{font-size:9px;color:var(--muted);letter-spacing:2px;margin-bottom:4px;display:block}.input-select{width:100%;background:var(--bg);border:1px solid var(--dim);color:var(--text);font-family:Share Tech Mono,monospace;font-size:11px;padding:8px;border-radius:2px;margin-bottom:8px;outline:none}.input-select:focus{border-color:var(--accent2)}.connect-btn{width:100%;padding:10px;background:var(--bg);border:1px solid var(--dim);border-radius:3px;color:var(--text);font-family:Orbitron,monospace;font-size:10px;letter-spacing:2px;cursor:pointer;transition:all .1s;margin-bottom:8px}.connect-btn:hover{border-color:var(--accent2);color:var(--accent2)}.connect-btn.connected{border-color:var(--accent2);color:var(--accent2);background:#d4a97a0d}.midi-status{font-size:10px;color:var(--muted);padding:6px 0;display:flex;align-items:center;gap:8px}.midi-learn-hint{font-size:9px;color:#333;margin-top:6px;letter-spacing:1px}.output-warning{font-size:9px;color:var(--accent3);margin-top:4px;letter-spacing:1px}