:root{--bg-deep: #0a0a0f;--bg-panel: rgba(10, 10, 20, .85);--border-glow: rgba(0, 255, 242, .15);--cyan: #00fff2;--magenta: #ff00e5;--purple: #8b00ff;--cyan-dim: rgba(0, 255, 242, .4);--magenta-dim: rgba(255, 0, 229, .4);--text: #e0e0e8;--text-dim: #888;--knob-bg: #1a1a2e;--knob-track: #2a2a3e;--key-white: #1e1e2e;--key-black: #0d0d15;--key-active: var(--cyan);--panel-radius: 8px;--glow-cyan: 0 0 12px rgba(0, 255, 242, .5);--glow-magenta: 0 0 12px rgba(255, 0, 229, .5);--glow-purple: 0 0 12px rgba(139, 0, 255, .5)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden;background:var(--bg-deep);color:var(--text);font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:12px;-webkit-font-smoothing:antialiased}#start-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:#05050af2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);transition:opacity .6s ease,visibility .6s ease}#start-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}.start-content{text-align:center}.start-title{font-size:3rem;font-weight:300;letter-spacing:.3em;text-transform:uppercase;color:var(--cyan);text-shadow:var(--glow-cyan);margin-bottom:.5rem}.start-subtitle{font-size:1rem;color:var(--text-dim);letter-spacing:.2em;margin-bottom:2rem}#start-button{background:transparent;border:1px solid var(--cyan);color:var(--cyan);padding:14px 48px;font-family:inherit;font-size:1rem;letter-spacing:.15em;text-transform:uppercase;cursor:pointer;border-radius:4px;transition:all .3s ease;box-shadow:var(--glow-cyan),inset 0 0 20px #00fff20d}#start-button:hover{background:#00fff21a;box-shadow:0 0 30px #00fff299,inset 0 0 30px #00fff21a}.start-hint{margin-top:1.5rem;font-size:.75rem;color:var(--text-dim);letter-spacing:.1em}#cosmic-canvas{position:fixed;inset:0;z-index:0}#analyzers{position:fixed;top:0;left:0;right:0;height:140px;z-index:1;display:flex;gap:2px;pointer-events:none}#analyzers canvas{flex:1;height:100%;display:block}#synth-ui{position:fixed;bottom:0;left:0;right:0;z-index:2;display:flex;flex-direction:column;gap:0;padding:0 12px 12px}#preset-bar{display:flex;align-items:center;gap:10px;padding:6px 12px;background:var(--bg-panel);border:1px solid var(--border-glow);border-radius:var(--panel-radius) var(--panel-radius) 0 0;border-bottom:none}#preset-bar label{font-size:.7rem;letter-spacing:.15em;color:var(--cyan);text-transform:uppercase}#preset-select{background:#141428e6;border:1px solid var(--border-glow);color:var(--text);font-family:inherit;font-size:.8rem;padding:4px 8px;border-radius:3px;cursor:pointer;min-width:200px}#preset-select:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 8px #00fff24d}#control-panels{display:flex;gap:1px;background:var(--bg-panel);border:1px solid var(--border-glow);border-radius:0;overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--cyan-dim) transparent}.panel{flex:0 0 auto;padding:10px 14px;min-width:120px;border-right:1px solid var(--border-glow)}.panel:last-child{border-right:none}.panel-title{font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);margin-bottom:8px;text-shadow:0 0 6px rgba(0,255,242,.3)}.panel-row{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}.panel-control{display:flex;flex-direction:column;align-items:center;gap:4px}.panel-control label{font-size:.6rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.1em;white-space:nowrap}.panel select{background:#141428e6;border:1px solid var(--border-glow);color:var(--text);font-family:inherit;font-size:.7rem;padding:3px 6px;border-radius:3px;cursor:pointer;min-width:70px}.panel select:focus{outline:none;border-color:var(--cyan)}.panel-toggle{background:#141428e6;border:1px solid var(--border-glow);color:var(--text-dim);font-family:inherit;font-size:.65rem;padding:4px 10px;border-radius:3px;cursor:pointer;text-transform:uppercase;letter-spacing:.1em;transition:all .2s ease}.panel-toggle.active{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 8px #00fff24d;background:#00fff214}.knob-container{width:44px;height:44px;position:relative;cursor:pointer;touch-action:none}.knob-container svg{width:100%;height:100%}.knob-track{fill:none;stroke:var(--knob-track);stroke-width:3;stroke-linecap:round}.knob-value{fill:none;stroke:var(--cyan);stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(0,255,242,.5));transition:stroke-dashoffset .05s ease}.knob-indicator{fill:var(--cyan);filter:drop-shadow(0 0 3px rgba(0,255,242,.8))}.knob-value-label{font-size:.55rem;text-align:center;color:var(--text-dim);margin-top:-2px;-webkit-user-select:none;user-select:none}#keyboard-container{background:var(--bg-panel);border:1px solid var(--border-glow);border-top:none;border-radius:0 0 var(--panel-radius) var(--panel-radius);padding:10px 12px;display:flex;justify-content:center;overflow-x:auto}.keyboard{display:flex;position:relative;height:120px;-webkit-user-select:none;user-select:none}.key{position:relative;border-radius:0 0 4px 4px;cursor:pointer;transition:background .08s ease,box-shadow .08s ease}.key-white{width:36px;height:120px;background:var(--key-white);border:1px solid rgba(255,255,255,.08);z-index:1}.key-white:hover{background:#252538}.key-white.active{background:#00fff226;border-color:var(--cyan);box-shadow:inset 0 0 20px #00fff233,0 0 12px #00fff24d}.key-black{width:24px;height:75px;background:var(--key-black);border:1px solid rgba(255,255,255,.05);position:absolute;z-index:2;border-radius:0 0 3px 3px}.key-black:hover{background:#161620}.key-black.active{background:#8b00ff40;border-color:var(--purple);box-shadow:inset 0 0 15px #8b00ff4d,0 0 10px #8b00ff66}.key-label{position:absolute;bottom:6px;left:50%;transform:translate(-50%);font-size:.5rem;color:var(--text-dim);pointer-events:none;opacity:.6}::-webkit-scrollbar{height:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--cyan-dim);border-radius:2px}