@import "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&family=Inter:wght@400;500;600;700&display=swap";:root{--text:#6b6375;--text-h:#08060d;--bg:#fff;--border:#e5e4e7;--code-bg:#f4f3ec;--accent:#aa3bff;--accent-bg:#aa3bff1a;--accent-border:#aa3bff80;--social-bg:#f4f3ec80;--shadow:#0000001a 0 10px 15px -3px, #0000000d 0 4px 6px -2px;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--heading:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;font:18px/145% var(--sans);letter-spacing:.18px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}@media (width<=1024px){:root{font-size:16px}}@media (prefers-color-scheme:dark){:root{--text:#9ca3af;--text-h:#f3f4f6;--bg:#16171d;--border:#2e303a;--code-bg:#1f2028;--accent:#c084fc;--accent-bg:#c084fc26;--accent-border:#c084fc80;--social-bg:#2f303a80;--shadow:#0006 0 10px 15px -3px, #00000040 0 4px 6px -2px}#social .button-icon{filter:invert()brightness(2)}}#root{box-sizing:border-box;width:100vw;height:100vh;margin:0;padding:0;overflow:hidden}body{margin:0;overflow:hidden}h1,h2{font-family:var(--heading);color:var(--text-h);font-weight:500}h1{letter-spacing:-1.68px;margin:32px 0;font-size:56px}@media (width<=1024px){h1{margin:20px 0;font-size:36px}}h2{letter-spacing:-.24px;margin:0 0 8px;font-size:24px;line-height:118%}@media (width<=1024px){h2{font-size:20px}}p{margin:0}code,.counter{font-family:var(--mono);color:var(--text-h);border-radius:4px;display:inline-flex}code{background:var(--code-bg);padding:4px 8px;font-size:15px;line-height:135%}:root{--bg-app:#030306;--bg-panel:#07070c;--bg-panel-light:#0d0d17;--bg-editor:#090910;--border-subtle:#00ffcc14;--border-strong:#0fc3;--border-glow:#00ffcc73;--accent:#0fc;--accent-hover:#33ffdb;--accent-dim:#00ffcc26;--text-primary:#fff;--text-secondary:#8c8da3;--text-dim:#494a61;--danger:#ff2d55;--danger-bg:#ff2d5514;--danger-border:#ff2d5540;--shadow-panel:0 0 45px #000000b3;--shadow-neon:0 0 20px #00ffcc59;--glass-bg:#07070cbf}.theme-zen{--bg-app:#121413;--bg-panel:#1a1d1b;--bg-panel-light:#242826;--bg-editor:#161817;--border-subtle:#dfb76c14;--border-strong:#dfb76c33;--border-glow:#dfb76c80;--accent:#dfb76c;--accent-hover:#edd19c;--accent-dim:#dfb76c1f;--text-primary:#ece8df;--text-secondary:#9aa19c;--text-dim:#545b56;--shadow-neon:0 0 20px #dfb76c40;--glass-bg:#1a1d1bcc}.theme-retrowave{--bg-app:#0d0614;--bg-panel:#140b21;--bg-panel-light:#1f1133;--bg-editor:#0f0719;--border-subtle:#ff5e0014;--border-strong:#ff5e0033;--border-glow:#ff5e0080;--accent:#ff5e00;--accent-hover:#ff7e33;--accent-dim:#ff5e0026;--text-primary:#ffe8fa;--text-secondary:#a095bd;--text-dim:#544973;--shadow-neon:0 0 22px #ff5e004d;--glass-bg:#140b21c7}.theme-acid{--bg-app:#080808;--bg-panel:#111;--bg-panel-light:#1c1c1c;--bg-editor:#0c0c0c;--border-subtle:#c3ff0014;--border-strong:#c3ff0033;--border-glow:#c3ff0099;--accent:#c3ff00;--accent-hover:#d4ff33;--accent-dim:#c3ff0026;--text-primary:#f2fffa;--text-secondary:#8e9490;--text-dim:#444c46;--shadow-neon:0 0 20px #c3ff0059;--glass-bg:#111111d9}*{box-sizing:border-box;margin:0;padding:0}body,html{background-color:var(--bg-app);width:100vw;height:100vh;color:var(--text-primary);-webkit-font-smoothing:antialiased;font-family:Inter,-apple-system,sans-serif;transition:background-color .3s,color .3s;overflow:hidden}.app{width:100vw;height:100vh;display:flex;position:relative}.panel-left{background:var(--bg-panel);border-right:1px solid var(--border-strong);width:46%;min-width:500px;box-shadow:var(--shadow-panel);z-index:10;scrollbar-width:thin;flex-direction:column;transition:width .3s,background .3s,border-color .3s;display:flex;overflow-y:auto}.app-header{background:linear-gradient(180deg, var(--bg-panel-light) 0%, var(--bg-panel) 100%);border-bottom:1px solid var(--border-strong);justify-content:space-between;align-items:center;padding:14px 20px;display:flex}.brand{align-items:center;gap:12px;display:flex}.brand-icon{background:var(--accent-dim);border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;display:flex;position:relative}.brand-ring{border:2px solid var(--accent);width:12px;height:12px;box-shadow:0 0 8px var(--accent);border-radius:50%;animation:2.2s ease-in-out infinite pulse-ring}@keyframes pulse-ring{0%{box-shadow:0 0 5px var(--accent);transform:scale(.95)}50%{box-shadow:0 0 14px var(--accent), 0 0 25px var(--accent-dim);transform:scale(1.15)}to{box-shadow:0 0 5px var(--accent);transform:scale(.95)}}.brand-text h1{letter-spacing:3px;color:var(--text-primary);margin:0;font-family:JetBrains Mono,monospace;font-size:1.05rem;font-weight:700}.brand-text h1 span{color:var(--accent);text-shadow:0 0 10px var(--accent-dim)}.brand-tag{color:var(--text-secondary);text-transform:uppercase;letter-spacing:1.2px;margin-top:1px;font-size:.6rem;display:block}.header-actions{align-items:center;gap:8px;display:flex}.live-indicator{background:#00ff8814;border:1px solid #00ff8840;border-radius:20px;align-items:center;gap:6px;padding:4px 10px;display:flex}.live-dot{background:#0f8;border-radius:50%;width:7px;height:7px;animation:1.2s step-end infinite blink;box-shadow:0 0 8px #0f8}@keyframes blink{50%{opacity:.25}}.live-indicator span{color:#0f8;letter-spacing:.5px;font-family:JetBrains Mono,monospace;font-size:.65rem;font-weight:700}.fps-counter{border-left:1px solid #00ff884d;padding-left:6px;color:var(--text-secondary)!important}button{cursor:pointer;background:0 0;border:none;font-family:Inter,sans-serif;transition:all .2s cubic-bezier(.4,0,.2,1)}.btn-ref{background:var(--bg-panel-light);border:1px solid var(--border-strong);width:30px;height:30px;color:var(--text-secondary);border-radius:6px;justify-content:center;align-items:center;display:flex}.btn-ref:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-dim);box-shadow:var(--shadow-neon)}.btn-midi{background:var(--bg-panel-light);border:1px solid var(--border-strong);color:var(--text-primary);border-radius:6px;align-items:center;gap:6px;height:30px;padding:0 10px;font-family:JetBrains Mono,monospace;font-size:.7rem;font-weight:600;display:flex}.btn-midi:hover{border-color:var(--accent);color:var(--accent);background:#00ffcc14}.btn-primary{background:var(--accent);color:#000;letter-spacing:.5px;border-radius:6px;align-items:center;gap:6px;height:30px;padding:0 12px;font-family:JetBrains Mono,monospace;font-size:.72rem;font-weight:700;display:flex}.btn-primary:hover{background:var(--accent-hover);box-shadow:var(--shadow-neon);transform:translateY(-1px)}.btn-primary kbd{opacity:.8;background:#0000001f;border-radius:3px;padding:2px 4px;font-size:.6rem}.btn-danger{color:var(--danger);border:1px solid var(--danger-border);background:0 0;border-radius:6px;align-items:center;gap:4px;height:30px;padding:0 10px;font-family:JetBrains Mono,monospace;font-size:.7rem;font-weight:700;display:flex}.btn-danger:hover{background:var(--danger-bg);border-color:var(--danger)}.presets-container{border-bottom:1px solid var(--border-strong);background:var(--bg-panel);flex-direction:column;display:flex}.presets-scroll{scrollbar-width:none;gap:6px;padding:6px 16px;display:flex;overflow-x:auto}.presets-scroll::-webkit-scrollbar{display:none}.preset-chip{background:var(--bg-panel-light);border:1px solid var(--border-subtle);color:var(--text-secondary);white-space:nowrap;border-radius:18px;align-items:center;gap:6px;padding:5px 12px;display:flex}.preset-chip:hover{color:var(--text-primary);background:#ffffff0a}.preset-chip.active{background:var(--accent-dim);border-color:var(--border-glow);color:var(--accent);box-shadow:0 0 10px #00ffcc14}.preset-name{font-size:.7rem;font-weight:600}.vibe-selector-bar{border-top:1px solid #ffffff05;justify-content:space-between;align-items:center;padding:4px 16px;display:flex}.vibe-label{color:var(--text-secondary);letter-spacing:.5px;font-family:JetBrains Mono,monospace;font-size:.62rem;font-weight:700}.vibe-buttons{gap:4px;display:flex}.vibe-btn{background:var(--bg-panel-light);border:1px solid var(--border-subtle);color:var(--text-secondary);border-radius:4px;padding:3px 8px;font-family:JetBrains Mono,monospace;font-size:.62rem;font-weight:600}.vibe-btn:hover{color:var(--text-primary);border-color:var(--border-strong)}.vibe-btn.active{background:var(--accent);color:#000;border-color:var(--accent);box-shadow:var(--shadow-neon);font-weight:700}.editor-wrapper{resize:vertical;background:var(--bg-editor);border-bottom:1px solid var(--border-strong);height:230px;min-height:140px;max-height:50vh;position:relative;overflow:hidden}.cm-editor-container{height:100%}.error-strip{background:var(--danger-bg);border-top:1px solid var(--danger-border);align-items:center;gap:10px;padding:10px 20px;display:flex}.error-badge{background:var(--danger);color:#fff;border-radius:3px;padding:2px 5px;font-family:JetBrains Mono,monospace;font-size:.6rem;font-weight:700}.error-msg{color:var(--danger);font-family:JetBrains Mono,monospace;font-size:.75rem}.vj-console-container{background:var(--bg-panel);border-top:1px solid var(--border-strong);border-bottom:1px solid var(--border-strong);height:135px;display:flex}.console-left{border-right:1px solid var(--border-strong);flex-direction:column;flex:1.2;justify-content:space-between;padding:8px 12px;display:flex}.console-right{flex-direction:column;flex:.8;padding:8px 12px;display:flex}.deck-header{color:var(--text-secondary);letter-spacing:1px;justify-content:space-between;align-items:center;margin-bottom:8px;font-family:JetBrains Mono,monospace;font-size:.65rem;font-weight:700;display:flex}.deck-sliders{flex-direction:column;gap:8px;display:flex}.slider-group{align-items:center;gap:10px;display:flex}.slider-group label{width:80px;color:var(--text-secondary);font-family:JetBrains Mono,monospace;font-size:.62rem}.slider-group input[type=range]{background:var(--bg-panel-light);-webkit-appearance:none;cursor:pointer;border-radius:2px;outline:none;flex:1;height:4px}.slider-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);width:12px;height:12px;box-shadow:0 0 8px var(--accent);border-radius:50%}.slider-val{text-align:right;width:35px;color:var(--accent);font-family:JetBrains Mono,monospace;font-size:.65rem;font-weight:600}.console-bottom-actions{align-items:flex-end;gap:12px;display:flex}.mini-oscilloscope{flex-direction:column;flex:1;display:flex}.oscilloscope-canvas{border:1px solid var(--border-subtle);background:#040408;border-radius:4px;width:100%;height:28px}.btn-perf-mode{background:linear-gradient(135deg, var(--accent) 0%, #0af 100%);color:#000;height:30px;box-shadow:var(--shadow-neon);border-radius:4px;padding:0 12px;font-family:JetBrains Mono,monospace;font-size:.65rem;font-weight:700}.btn-perf-mode:hover{filter:brightness(1.1);transform:scale(1.02)}.btn-lfo{border:1px solid var(--border-strong);color:var(--text-secondary);border-radius:3px;padding:2px 6px;font-family:JetBrains Mono,monospace;font-size:.58rem;font-weight:700}.btn-lfo.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent);animation:2s ease-in-out infinite pulse-ring}.neuro-pad-area{border:1px solid var(--border-strong);cursor:crosshair;background:#030306;border-radius:6px;flex:1;position:relative;overflow:hidden}.radar-grid{pointer-events:none;position:absolute;inset:0}.radar-circle{border:1px dashed #ffffff0a;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.radar-circle.r1{width:45%;height:45%}.radar-circle.r2{width:80%;height:80%}.radar-crosshair-h{border-top:1px dashed #ffffff08;position:absolute;top:50%;left:0;right:0}.radar-crosshair-v{border-left:1px dashed #ffffff08;position:absolute;top:0;bottom:0;left:50%}.neuro-pad-cursor{background:var(--accent);width:10px;height:10px;box-shadow:0 0 10px var(--accent), 0 0 20px var(--accent);pointer-events:none;border-radius:50%;transition:all 50ms ease-out;position:absolute;transform:translate(-50%,-50%)}.pad-axis-label{color:var(--text-dim);letter-spacing:.5px;pointer-events:none;font-family:JetBrains Mono,monospace;font-size:.5rem;font-weight:700;position:absolute}.pad-axis-x{bottom:4px;right:6px}.pad-axis-y{transform-origin:0 0;margin-top:5px;top:6px;left:6px;transform:rotate(-90deg)}.launchpad-panel{background:var(--bg-panel);border-bottom:1px solid var(--border-strong);padding:8px 12px}.launchpad-header{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.launchpad-header h3{letter-spacing:1px;color:var(--text-primary);margin-left:6px;margin-right:auto;font-family:JetBrains Mono,monospace;font-size:.7rem;font-weight:700}.launchpad-icon{font-size:.75rem}.btn-evolve{background:linear-gradient(135deg, #aa3bff 0%, var(--accent) 100%);color:#fff;text-shadow:0 0 4px #0006;border-radius:4px;padding:4px 10px;font-family:JetBrains Mono,monospace;font-size:.62rem;font-weight:700;box-shadow:0 0 10px #aa3bff4d}.btn-evolve:hover{filter:brightness(1.15);transform:translateY(-1px);box-shadow:0 0 15px #aa3bff99}.launchpad-grid{grid-template-columns:repeat(4,1fr);gap:6px;display:grid}.launch-pad{background:var(--bg-panel-light);border:1px solid var(--border-subtle);cursor:pointer;border-radius:6px;flex-direction:column;align-items:center;gap:6px;height:52px;padding:5px 4px;display:flex;position:relative}.launch-pad-led{background:#ffffff26;border-radius:50%;width:6px;height:6px;transition:all .2s;box-shadow:inset 0 1px 1px #00000080}.launch-pad-label{color:var(--text-secondary);text-align:center;pointer-events:none;font-family:Inter,sans-serif;font-size:.6rem;font-weight:600}.launch-pad:hover{border-color:var(--border-strong);background:#ffffff08}.launch-pad.active{background:var(--accent-dim);border-color:var(--accent);box-shadow:0 0 10px #00ffcc1a}.launch-pad.active .launch-pad-led{background:var(--accent);box-shadow:0 0 8px var(--accent), 0 0 15px var(--accent);animation:1s ease-in-out infinite pulse-led}.launch-pad.active .launch-pad-label{color:var(--text-primary)}@keyframes pulse-led{0%{opacity:.8}50%{opacity:1;filter:brightness(1.2)}to{opacity:.8}}.perf-tabs-bar{background:var(--bg-panel-light);border-bottom:1px solid var(--border-strong);gap:8px;padding:4px 16px;display:flex}.perf-tabs-bar .tab-btn{color:var(--text-secondary);border:1px solid #0000;border-radius:4px;padding:6px 12px;font-family:JetBrains Mono,monospace;font-size:.65rem;font-weight:700}.perf-tabs-bar .tab-btn:hover{color:var(--text-primary);background:#ffffff08}.perf-tabs-bar .tab-btn.active{color:var(--accent);border-color:var(--border-strong);background:var(--bg-panel);box-shadow:inset 0 -2px 0 var(--accent)}.dj-mixer-panel{background:var(--bg-panel);border-bottom:1px solid var(--border-strong);height:145px;padding:8px 12px}.mixer-header{color:var(--text-secondary);letter-spacing:1px;margin-bottom:10px;font-family:JetBrains Mono,monospace;font-size:.65rem;font-weight:700}.mixer-faders{justify-content:space-around;align-items:center;gap:10px;height:calc(100% - 25px);display:flex}.fader-col{flex-direction:column;flex:1;align-items:center;gap:6px;display:flex}.fader-label{color:var(--text-secondary);font-family:JetBrains Mono,monospace;font-size:.58rem;font-weight:700}.fader-track{justify-content:center;align-items:center;height:75px;padding:3px 0;display:flex}.vertical-slider{appearance:slider-vertical;background:var(--bg-panel-light);cursor:ns-resize;border-radius:5px;outline:none;width:10px;height:65px}.vertical-slider::-webkit-slider-runnable-track{background:var(--bg-panel-light);border-radius:5px}.vertical-slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);width:16px;height:16px;box-shadow:0 0 8px var(--accent);cursor:pointer;border-radius:50%}.fader-val{color:var(--accent);font-family:JetBrains Mono,monospace;font-size:.62rem;font-weight:600}.ai-composer-panel{background:linear-gradient(180deg, var(--bg-panel) 0%, #030306 100%);border-bottom:1px solid var(--border-strong);padding:12px 16px}.ai-header{align-items:center;gap:6px;margin-bottom:8px;display:flex}.ai-header h3{letter-spacing:1px;color:var(--text-primary);font-family:JetBrains Mono,monospace;font-size:.7rem;font-weight:700}.sparkle{color:#fa0;font-size:.75rem}.ai-quick-prompts{flex-wrap:wrap;gap:5px;margin-bottom:8px;display:flex}.ai-prompt-btn{background:var(--bg-panel-light);border:1px solid var(--border-subtle);color:var(--text-secondary);cursor:pointer;border-radius:4px;padding:4px 8px;font-size:.62rem}.ai-prompt-btn:hover{background:var(--accent-dim);color:var(--accent);border-color:var(--border-glow)}.ai-input-row{gap:6px;display:flex}.ai-input-row input{border:1px solid var(--border-strong);color:#fff;background:#030305;border-radius:4px;outline:none;flex:1;padding:6px 10px;font-family:Inter,sans-serif;font-size:.72rem}.ai-input-row input:focus{border-color:var(--accent);box-shadow:0 0 6px var(--accent-dim)}.btn-ai-generate{background:linear-gradient(135deg, var(--accent) 0%, #09f 100%);color:#000;border-radius:4px;padding:0 12px;font-family:JetBrains Mono,monospace;font-size:.68rem;font-weight:700}.btn-ai-generate:hover:not(:disabled){box-shadow:var(--shadow-neon);transform:translateY(-1px)}.btn-ai-generate:disabled{opacity:.5;cursor:not-allowed}.comp-stats-banner{border-bottom:1px solid var(--border-subtle);color:var(--text-secondary);background:#00ffcc05;justify-content:space-between;padding:6px 20px;font-family:JetBrains Mono,monospace;font-size:.6rem;display:flex}.comp-stats-banner span:first-child{color:var(--accent);font-weight:700}.panel-right{background:#000;flex:1;position:relative;overflow:hidden}.panel-right>canvas{width:100%;height:100%;display:block}.canvas-toolbar{z-index:50;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0a0a0f66;border:1px solid #ffffff0d;border-radius:6px;gap:8px;padding:4px;display:flex;position:absolute;top:14px;right:20px}.tb-btn{color:var(--text-secondary);background:0 0;border:none;border-radius:4px;padding:4px 8px;font-family:JetBrains Mono,monospace;font-size:.62rem;font-weight:600}.tb-btn:hover{color:var(--accent);background:#ffffff0d}.tb-btn.exit-btn{color:var(--danger);border-right:1px solid #ffffff14;margin-right:4px;padding-right:10px}.tb-btn.exit-btn:hover{background:var(--danger-bg);color:#fff}.canvas-empty{pointer-events:none;background:radial-gradient(circle,#0b0b14 0%,#000 100%);flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.empty-rings{width:100px;height:100px;margin-bottom:24px;position:relative}.ring{border:1px solid var(--accent-dim);border-radius:50%;animation:linear infinite spin;position:absolute;inset:0}.ring.r1{border-top-color:var(--accent);animation-duration:4s}.ring.r2{border-right-color:var(--accent);animation-duration:3s;animation-direction:reverse;inset:12px}.ring.r3{border-bottom-color:var(--accent);animation-duration:2s;inset:24px}@keyframes spin{to{transform:rotate(360deg)}}.canvas-empty h2{letter-spacing:6px;color:#ffffff14;margin-bottom:12px;font-family:JetBrains Mono,monospace;font-size:1.3rem}.canvas-empty p{color:var(--text-dim);font-size:.85rem}.canvas-empty kbd{color:var(--text-secondary);background:#ffffff0a;border:1px solid #ffffff14;border-radius:4px;padding:3px 6px;font-family:JetBrains Mono,monospace;font-size:.75rem}.vj-hud-overlay{-webkit-backdrop-filter:blur(12px)saturate(120%);backdrop-filter:blur(12px)saturate(120%);z-index:40;pointer-events:none;background:#03030573;flex-direction:column;padding:24px;font-family:JetBrains Mono,monospace;display:flex;position:absolute;inset:0}.vj-hud-overlay *{pointer-events:auto}.hud-header{border-bottom:1px solid var(--border-strong);justify-content:space-between;align-items:center;margin-bottom:24px;padding-bottom:12px;display:flex}.hud-logo{align-items:center;gap:8px;display:flex}.hud-dot{background:var(--accent);width:8px;height:8px;box-shadow:0 0 10px var(--accent);border-radius:50%}.animate-blink{animation:1s step-end infinite blink}.hud-logo h2{letter-spacing:2px;color:var(--text-primary);font-size:.95rem;font-weight:700}.hud-theme-info{color:var(--text-secondary);gap:20px;font-size:.65rem;display:flex}.btn-exit-hud{color:var(--danger);border:1px solid var(--danger-border);background:var(--danger-bg);border-radius:4px;padding:4px 12px;font-family:JetBrains Mono,monospace;font-size:.65rem;font-weight:700}.btn-exit-hud:hover{background:var(--danger);color:#fff}.hud-body{flex:1;justify-content:space-between;align-items:flex-end;display:flex}.hud-panel{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--border-strong);background:#0a0a10b3;border-radius:8px;flex-direction:column;gap:14px;width:280px;padding:16px;display:flex;box-shadow:0 8px 32px #0009}.hud-panel-header{color:var(--accent);letter-spacing:.5px;border-bottom:1px solid var(--border-subtle);margin-bottom:2px;padding-bottom:6px;font-size:.65rem;font-weight:700}.radar-panel{align-self:flex-start;margin-top:10px}.hud-radar-canvas{border:1px solid var(--border-subtle);background:#020204;border-radius:6px;width:100%;height:200px}.hud-slider-group{flex-direction:column;gap:4px;display:flex}.hud-slider-group label{color:var(--text-secondary);letter-spacing:.5px;font-size:.5rem}.hud-slider-group input{width:100%}.hud-slider-group span{color:var(--accent);text-align:right;font-size:.65rem;font-weight:600}.hud-pad{background:#010103;height:180px}.hud-stats-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.stat-box{background:var(--bg-panel-light);border:1px solid var(--border-subtle);border-radius:4px;flex-direction:column;gap:2px;padding:8px;display:flex}.stat-lbl{color:var(--text-secondary);font-size:.5rem}.stat-val{color:var(--accent);font-size:.85rem;font-weight:700}.ref-overlay{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:100;background:#000000bf;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.ref-panel{background:var(--bg-panel);border:1px solid var(--border-strong);border-radius:10px;flex-direction:column;width:680px;max-height:80vh;display:flex;box-shadow:0 20px 70px #000c}.ref-header{border-bottom:1px solid var(--border-strong);background:var(--bg-panel-light);justify-content:space-between;align-items:center;padding:16px 24px;display:flex}.ref-header h2{color:var(--accent);font-family:JetBrains Mono,monospace;font-size:1rem}.ref-close{color:var(--text-secondary);border-radius:4px;width:28px;height:28px;font-size:1.1rem}.ref-close:hover{color:#fff;background:#ffffff0d}.ref-body{padding:24px;overflow-y:auto}.ref-body section{margin-bottom:24px}.ref-body h3{color:#fff;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;font-size:.82rem}.ref-note{color:var(--text-secondary);margin-bottom:12px;font-size:.75rem}.ref-grid{grid-template-columns:auto 1fr;gap:10px 20px;display:grid}.ref-grid code{color:var(--accent);background:var(--accent-dim);white-space:nowrap;border-radius:4px;padding:3px 8px;font-family:JetBrains Mono,monospace;font-size:.72rem}.ref-grid span{color:var(--text-secondary);font-size:.8rem;line-height:20px}.ref-body pre{background:var(--bg-editor);border:1px solid var(--border-strong);color:var(--accent);border-radius:6px;padding:14px;font-family:JetBrains Mono,monospace;font-size:.8rem;line-height:1.5}.shader-peek-panel{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border-glow);z-index:40;background:#040408d9;border-radius:8px;flex-direction:column;width:400px;max-height:calc(100vh - 120px);transition:all .3s;display:flex;position:absolute;top:60px;right:20px;box-shadow:0 0 20px #00ffcc26}.shader-peek-header{border-bottom:1px solid var(--border-strong);background:#ffffff08;justify-content:space-between;align-items:center;padding:8px 12px;display:flex}.shader-peek-header span{color:var(--accent);letter-spacing:.5px;font-family:JetBrains Mono,monospace;font-size:.65rem;font-weight:700}.shader-peek-close{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;padding:0 4px;font-size:1rem}.shader-peek-close:hover{color:var(--text-primary)}.shader-peek-body{color:#39ff14;text-shadow:0 0 2px #39ff144d;text-align:left;flex:1;margin:0;padding:12px;font-family:JetBrains Mono,monospace;font-size:.6rem;line-height:1.4;overflow:auto}.shader-peek-body::-webkit-scrollbar{width:6px;height:6px}.shader-peek-body::-webkit-scrollbar-track{background:#0000001a}.shader-peek-body::-webkit-scrollbar-thumb{background:#0fc3;border-radius:3px}.shader-peek-body::-webkit-scrollbar-thumb:hover{background:var(--accent)}.beat-builder-panel{background:var(--bg-panel);border-bottom:1px solid var(--border-strong);height:145px;padding:8px 12px}.beat-grid-container{flex-direction:column;justify-content:center;gap:5px;height:calc(100% - 22px);display:flex}.beat-row{align-items:center;gap:8px;display:flex}.inst-label{color:var(--text-secondary);text-align:left;width:45px;font-family:JetBrains Mono,monospace;font-size:.55rem;font-weight:700}.step-buttons{flex:1;gap:3px;display:flex}.step-buttons .step-btn{background:var(--bg-panel-light);border:1px solid var(--border-subtle);cursor:pointer;border-radius:3px;flex:1;height:18px;padding:0;transition:all .15s}.step-buttons .step-btn.beat-start{background:#ffffff08;border-color:#ffffff26}.step-buttons .step-btn:hover{background:#ffffff14}.step-buttons .step-btn.active.inst-kick{background:#0fc;border-color:#0fc;box-shadow:0 0 8px #0fc9}.step-buttons .step-btn.active.inst-snare{background:#ff007f;border-color:#ff007f;box-shadow:0 0 8px #ff007f99}.step-buttons .step-btn.active.inst-hat{background:#ff0;border-color:#ff0;box-shadow:0 0 8px #ff09}.step-buttons .step-btn.active.inst-clap{background:#fa0;border-color:#fa0;box-shadow:0 0 8px #fa09}.vj-security-watermark{pointer-events:none;opacity:.25;z-index:30;letter-spacing:.5px;text-align:right;flex-direction:column;align-items:flex-end;font-family:JetBrains Mono,monospace;transition:opacity .3s;display:flex;position:absolute;bottom:12px;right:16px}.panel-right:hover .vj-security-watermark{opacity:.45}.vj-security-watermark .wm-title{color:var(--accent);text-shadow:0 0 4px var(--accent);font-size:.65rem;font-weight:800}.vj-security-watermark .wm-details{color:var(--text-secondary);margin-top:1px;font-size:.45rem;font-weight:600}.vj-security-watermark .wm-copyright{color:var(--text-secondary);opacity:.8;margin-top:1px;font-size:.42rem;font-weight:500}