*{margin:0;padding:0;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#startScreen{position:fixed;top:0;left:0;right:0;bottom:0;background:linear-gradient(180deg,#1a1a1a,#0d0d0d);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100}#startScreen h1{font-family:var(--font-mono);font-size:3em;font-weight:700;letter-spacing:8px;color:var(--theme-accent, #00ff88);text-shadow:0 0 20px var(--theme-accent-glow, rgba(0, 255, 136, .5));margin-bottom:10px}#startScreen .subtitle{font-size:1em;letter-spacing:4px;text-transform:uppercase;color:#666;margin-bottom:40px}#startButton{font-size:1.2em;font-weight:600;letter-spacing:3px;text-transform:uppercase;padding:18px 50px;background:var(--theme-accent, #00ff88);color:#000;border:2px solid var(--theme-accent, #00ff88);border-radius:6px;cursor:pointer;box-shadow:0 4px 20px var(--theme-accent-glow, rgba(0, 255, 136, .4));transition:all .2s}#startButton:hover{transform:translateY(-2px);box-shadow:0 6px 30px var(--theme-accent-glow, rgba(0, 255, 136, .6));background:#3f9}#startButton:active{transform:translateY(0)}#startStatus{margin-top:20px;color:#555;font-size:.9em;letter-spacing:1px}#startButton:disabled{background:linear-gradient(180deg,#555,#444);border-color:#555;color:#888;cursor:wait;box-shadow:none}#startButton:disabled:hover{transform:none}:root{--bg-primary: var(--theme-bg-primary);--bg-secondary: var(--theme-bg-secondary);--bg-panel: var(--theme-bg-panel);--text-primary: var(--theme-text-primary);--text-secondary: var(--theme-text-secondary);--accent: var(--theme-accent);--accent-glow: var(--theme-accent-glow);--accent-dim: var(--theme-accent-dim);--border-color: var(--theme-border);--waveform-bg: var(--theme-waveform-bg);--waveform-color: var(--theme-waveform-color);--button-bg: var(--theme-button-bg);--button-hover: var(--theme-button-hover);--select-bg: var(--theme-select-bg);--font-mono: "Courier New", Consolas, monospace;--font-ui: "Helvetica Neue", Arial, sans-serif;--border-radius: 4px;--transition: .15s ease}body{font-family:var(--font-ui);background:var(--bg-primary);color:var(--text-primary);min-height:100vh;-webkit-user-select:none;user-select:none}#app{max-width:800px;margin:0 auto;padding:20px}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:15px;border-bottom:2px solid var(--border-color)}.logo{font-family:var(--font-mono);font-size:28px;font-weight:700;letter-spacing:4px;color:var(--accent);text-shadow:0 0 10px var(--accent-glow)}.version{font-family:var(--font-mono);font-size:11px;color:var(--text-secondary);opacity:.6;margin-left:auto;margin-right:20px}.theme-toggle{display:flex;gap:8px}.theme-btn{background:var(--button-bg);border:1px solid var(--border-color);color:var(--text-secondary);padding:6px 12px;font-size:11px;text-transform:uppercase;cursor:pointer;border-radius:var(--border-radius);transition:var(--transition)}.theme-btn:hover{background:var(--button-hover)}.theme-btn.active{background:var(--accent);color:var(--bg-primary);border-color:var(--accent)}.tab-nav{display:flex;gap:4px;margin-bottom:20px}.tab-btn{flex:1;background:var(--button-bg);border:1px solid var(--border-color);color:var(--text-secondary);padding:12px 16px;font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;cursor:pointer;border-radius:var(--border-radius);transition:var(--transition)}.tab-btn:hover{background:var(--button-hover);color:var(--text-primary)}.tab-btn.active{background:var(--accent);color:var(--bg-primary);border-color:var(--accent);box-shadow:0 0 15px var(--accent-glow)}.tab-panels{background:var(--bg-panel);border:1px solid var(--border-color);border-radius:var(--border-radius);padding:20px;margin-bottom:20px;min-height:180px}.tab-panel{display:none}.tab-panel.active{display:block}.param-groups{display:flex;flex-direction:column;gap:15px}.param-group{border:1px solid var(--border-color);border-radius:var(--border-radius);padding:12px 15px 15px;margin:0;background:#00000026}.param-group legend{font-size:10px;font-weight:700;letter-spacing:2px;color:var(--accent);text-transform:uppercase;padding:0 8px;opacity:.8}.controls-row{display:flex;flex-wrap:wrap;gap:15px;justify-content:flex-start}.lfo-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.lfo-grid .param-group{margin:0}.controls-grid{display:flex;flex-wrap:wrap;gap:20px;justify-content:center}.control-group{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:80px}.control-group label{font-size:10px;font-weight:700;letter-spacing:1px;color:var(--text-secondary);text-transform:uppercase}.value-display{font-family:var(--font-mono);font-size:11px;color:var(--accent);min-width:50px;text-align:center}.mode-selector select{background:var(--select-bg);border:1px solid var(--border-color);color:var(--text-primary);padding:8px 12px;font-size:12px;border-radius:var(--border-radius);cursor:pointer;min-width:100px}.mode-selector select:focus{outline:none;border-color:var(--accent)}.btn-switch{display:flex;gap:2px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--border-radius);padding:2px}.switch-btn{background:transparent;border:none;color:var(--text-secondary);padding:6px 10px;font-size:11px;font-weight:700;letter-spacing:1px;cursor:pointer;border-radius:3px;transition:var(--transition)}.switch-btn:hover{background:var(--button-hover);color:var(--text-primary)}.switch-btn.active{background:var(--accent);color:var(--bg-primary)}.master-controls{display:flex;gap:20px;justify-content:center;align-items:center;margin-bottom:20px;padding:15px;background:var(--bg-secondary);border-radius:var(--border-radius);border:1px solid var(--border-color)}.master-controls .control-group{display:flex;flex-direction:column;align-items:center;gap:4px}.master-controls label{font-family:var(--font-mono);font-size:10px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px}.master-controls .value-display{font-family:var(--font-mono);font-size:10px;color:var(--accent)}.global-controls{display:flex;gap:15px;justify-content:center;margin-bottom:20px;flex-wrap:wrap}.action-btn{background:var(--button-bg);border:2px solid var(--border-color);color:var(--text-primary);padding:12px 24px;font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;cursor:pointer;border-radius:var(--border-radius);transition:var(--transition)}.action-btn:hover{background:var(--button-hover);border-color:var(--accent)}.action-btn:active{transform:scale(.98)}.action-btn.trigger{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}.action-btn.trigger:hover{background:var(--accent);color:var(--bg-primary);box-shadow:0 0 20px var(--accent-glow)}.trigger-group{display:flex;flex-direction:column;align-items:center;gap:4px}.key-hint{font-family:var(--font-mono);font-size:10px;color:var(--text-secondary);opacity:.6;letter-spacing:1px}.randomizer-group{display:flex;gap:8px}.randomizer-group select{background:var(--select-bg);border:2px solid var(--border-color);color:var(--text-primary);padding:10px;font-size:11px;border-radius:var(--border-radius);cursor:pointer}.visualizers{display:flex;flex-direction:column;gap:15px;margin-bottom:20px}.viz-container{background:var(--waveform-bg);border:1px solid var(--border-color);border-radius:var(--border-radius);padding:10px}.viz-container label{display:block;font-size:10px;font-weight:700;letter-spacing:1px;color:var(--text-secondary);text-transform:uppercase;margin-bottom:8px;cursor:pointer}.viz-container label input[type=checkbox]{margin-right:6px;cursor:pointer}.viz-container canvas{width:100%;height:120px;display:block}.status{text-align:center;font-size:12px;color:var(--text-secondary);min-height:20px}.status.error{color:#f44}.status.success{color:var(--accent)}webaudio-knob{--webaudio-knob-bgcolor: var(--bg-secondary);cursor:pointer}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--accent-dim)}.site-footer{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:10px 20px;pointer-events:none}.footer-brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--text-secondary);font-size:12px;opacity:.6;transition:opacity .2s;pointer-events:auto}.footer-brand:hover{opacity:1;color:var(--accent)}.footer-lion{width:24px;height:24px;object-fit:contain}.footer-right{display:flex;align-items:center;gap:15px;pointer-events:auto}.footer-link{font-size:11px;color:var(--text-secondary);text-decoration:none;opacity:.5;transition:opacity .2s,color .2s}.footer-link:hover{opacity:1;color:var(--accent)}.footer-version{font-family:var(--font-mono);font-size:10px;color:var(--text-secondary);opacity:.4}@media (max-width: 600px){#app{padding:10px}.logo{font-size:20px}.tab-btn{padding:10px 8px;font-size:11px;letter-spacing:1px}.controls-grid{gap:15px}.control-group{min-width:70px}.action-btn{padding:10px 16px;font-size:11px}}[data-theme=industrial]{--theme-bg-primary: #0d0d0d;--theme-bg-secondary: #1a1a1a;--theme-bg-panel: linear-gradient(180deg, #252525 0%, #1a1a1a 100%);--theme-text-primary: #d0d0d0;--theme-text-secondary: #707070;--theme-accent: #d97a5a;--theme-accent-glow: rgba(217, 122, 90, .35);--theme-accent-dim: rgba(217, 122, 90, .12);--theme-border: #333333;--theme-waveform-bg: #0a0a0a;--theme-waveform-color: #00dddd;--theme-button-bg: #1f1f1f;--theme-button-hover: #2a2a2a;--theme-select-bg: #1a1a1a}[data-theme=industrial] .header{background:linear-gradient(180deg,#1a1a1a,#0d0d0d);border-bottom-color:#444}[data-theme=industrial] .logo{text-shadow:0 0 10px rgba(217,122,90,.5),0 2px 0 #000}[data-theme=industrial] .tab-btn.active{background:linear-gradient(180deg,#e08868,#d97a5a);box-shadow:0 0 15px #d97a5a59,inset 0 1px #fff3}[data-theme=industrial] .tab-panels{background:linear-gradient(180deg,#1f1f1f,#151515);box-shadow:inset 0 1px #ffffff0d,inset 0 -1px #0000004d}[data-theme=industrial] .action-btn.trigger{background:linear-gradient(180deg,#2a1d18,#1a1412)}[data-theme=industrial] .action-btn.trigger:hover{background:linear-gradient(180deg,#e08868,#d97a5a);box-shadow:0 0 25px #d97a5a73,inset 0 1px #fff3}[data-theme=industrial] .viz-container{background:#0a0a0a;box-shadow:inset 0 2px 4px #00000080,0 1px #ffffff0d}[data-theme=industrial] .tab-panels:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:repeating-linear-gradient(0deg,transparent,transparent 1px,rgba(255,255,255,.01) 1px,rgba(255,255,255,.01) 2px);pointer-events:none;border-radius:var(--border-radius)}[data-theme=industrial] .tab-panels{position:relative}[data-theme=neon]{--theme-bg-primary: #050510;--theme-bg-secondary: #0a0a18;--theme-bg-panel: linear-gradient(180deg, #0f0f20 0%, #080815 100%);--theme-text-primary: #00ffff;--theme-text-secondary: #00aa88;--theme-accent: #ff00ff;--theme-accent-glow: rgba(255, 0, 255, .5);--theme-accent-dim: rgba(255, 0, 255, .15);--theme-border: rgba(0, 255, 255, .3);--theme-waveform-bg: #030308;--theme-waveform-color: #00ffff;--theme-button-bg: #0a0a15;--theme-button-hover: #12122a;--theme-select-bg: #0a0a15}[data-theme=neon] body{background:linear-gradient(180deg,#050510,#080818)}[data-theme=neon] .header{border-bottom-color:#00ffff4d}[data-theme=neon] .logo{color:#f0f;text-shadow:0 0 10px rgba(255,0,255,.8),0 0 20px rgba(255,0,255,.5),0 0 40px rgba(255,0,255,.3);animation:neonPulse 2s ease-in-out infinite alternate}@keyframes neonPulse{0%{text-shadow:0 0 10px rgba(255,0,255,.8),0 0 20px rgba(255,0,255,.5),0 0 40px rgba(255,0,255,.3)}to{text-shadow:0 0 15px rgba(255,0,255,1),0 0 30px rgba(255,0,255,.7),0 0 60px rgba(255,0,255,.4)}}[data-theme=neon] .tab-btn{border-color:#00ffff4d}[data-theme=neon] .tab-btn:hover{border-color:#0ff9;box-shadow:0 0 10px #00ffff4d}[data-theme=neon] .tab-btn.active{background:linear-gradient(180deg,#f0f,#c0c);border-color:#f0f;box-shadow:0 0 20px #f0f9,0 0 40px #ff00ff4d}[data-theme=neon] .tab-panels{border-color:#00ffff4d;box-shadow:0 0 20px #00ffff1a,inset 0 0 30px #00ffff0d}[data-theme=neon] .tab-panels:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,rgba(0,255,255,.03) 1px,transparent 1px),linear-gradient(rgba(0,255,255,.03) 1px,transparent 1px);background-size:20px 20px;pointer-events:none;border-radius:var(--border-radius)}[data-theme=neon] .tab-panels{position:relative}[data-theme=neon] .value-display{color:#0ff;text-shadow:0 0 5px rgba(0,255,255,.5)}[data-theme=neon] .action-btn.trigger{border-color:#f0f;color:#f0f;box-shadow:0 0 10px #ff00ff4d}[data-theme=neon] .action-btn.trigger:hover{background:#f0f;color:#050510;box-shadow:0 0 30px #f0f9,0 0 60px #ff00ff4d}[data-theme=neon] .action-btn:hover{border-color:#0ff;box-shadow:0 0 15px #00ffff4d}[data-theme=neon] .viz-container{border-color:#00ffff4d;box-shadow:0 0 10px #00ffff1a,inset 0 0 20px #00ffff0d}[data-theme=neon] .viz-container label{color:#0ff;text-shadow:0 0 5px rgba(0,255,255,.5)}[data-theme=neon] select{border-color:#00ffff4d;color:#0ff}[data-theme=neon] select:focus{border-color:#f0f;box-shadow:0 0 10px #ff00ff4d}
