:root{--bg-primary: #0d1117;--bg-secondary: #161b22;--bg-tertiary: #21262d;--bg-panel: #1a1f26;--border-color: #30363d;--text-primary: #e6edf3;--text-secondary: #8b949e;--text-muted: #6e7681;--accent: #58a6ff;--accent-glow: rgba(88, 166, 255, .3);--success: #3fb950;--warning: #d29922;--danger: #f85149;--purple: #a371f7;--cyan: #79c0ff;--orange: #ffa657;--pink: #ff7b72}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,SF Mono,Fira Code,Consolas,monospace;background:var(--bg-primary);color:var(--text-primary);min-height:100vh;overflow-x:hidden}.app{max-width:1400px;margin:0 auto;padding:1rem}.header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;margin-bottom:1rem}.header h1{font-size:1.25rem;font-weight:600;letter-spacing:2px;color:var(--accent);text-shadow:0 0 20px var(--accent-glow)}.header-controls{display:flex;gap:.5rem}.btn{padding:.5rem 1rem;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);cursor:pointer;font-size:.875rem;transition:all .2s}.btn:hover{background:var(--border-color);border-color:var(--text-muted)}.btn-primary{background:var(--accent);color:var(--bg-primary);border-color:var(--accent)}.btn-primary:hover{background:#79b8ff;border-color:#79b8ff}select{padding:.5rem;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);cursor:pointer;font-size:.875rem}.main-content{display:flex;flex-direction:column;gap:1rem}.app-footer{display:flex;justify-content:center;align-items:center;padding:10px 16px 16px;color:#fff9;font-size:12px}.app-footer a{color:#6ee7ff;text-decoration:none}.app-footer a:hover{text-decoration:underline}.top-row,.middle-row{display:grid;gap:1rem}.top-row{grid-template-columns:1fr 1fr 1.5fr}.middle-row{grid-template-columns:1fr 1.5fr 1fr .75fr}.panel{background:var(--bg-panel);border:1px solid var(--border-color);border-radius:8px;padding:1rem}.panel h2{font-size:.75rem;font-weight:600;letter-spacing:1px;color:var(--text-secondary);margin-bottom:.75rem;text-transform:uppercase}.control-group{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}.control-group label{width:60px;font-size:.75rem;color:var(--text-secondary)}.control-group input[type=range]{flex:1;height:6px;-webkit-appearance:none;appearance:none;background:var(--bg-tertiary);border-radius:3px;cursor:pointer}.control-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:var(--accent);border-radius:50%;cursor:pointer;box-shadow:0 0 10px var(--accent-glow)}.control-group .value{width:60px;font-size:.7rem;color:var(--text-muted);text-align:right;font-family:SF Mono,monospace}.waveform-selector{display:flex;gap:.5rem;margin-bottom:1rem}.wave-btn{flex:1;padding:.5rem;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-secondary);cursor:pointer;font-size:1.25rem;transition:all .2s}.wave-btn:hover{border-color:var(--text-muted);color:var(--text-primary)}.wave-btn.active{background:var(--accent);color:var(--bg-primary);border-color:var(--accent);box-shadow:0 0 15px var(--accent-glow)}.viz-container{position:relative;margin-bottom:.5rem}.viz-container canvas{width:100%;height:80px;background:var(--bg-primary);border-radius:4px;display:block}#spectrum-canvas{position:absolute;top:0;left:0;opacity:0;transition:opacity .3s}.viz-toggle{display:flex;gap:.25rem}.viz-btn{flex:1;padding:.25rem;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:4px;color:var(--text-muted);cursor:pointer;font-size:.7rem;transition:all .2s}.viz-btn.active{background:var(--border-color);color:var(--text-primary)}.adsr-visual{margin-bottom:.75rem}.adsr-visual canvas{width:100%;height:60px;background:var(--bg-primary);border-radius:4px}.adsr-controls{display:flex;justify-content:space-between;gap:.5rem}.adsr-knob{display:flex;flex-direction:column;align-items:center;gap:.25rem}.adsr-knob input[type=range]{width:60px;height:60px;transform:rotate(-90deg)}.adsr-knob label{font-size:.7rem;color:var(--text-secondary)}.adsr-knob .value{font-size:.65rem;color:var(--text-muted)}.effect-row{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem}.effect-toggle{display:flex;align-items:center;gap:.35rem;min-width:80px}.effect-toggle label{font-size:.75rem;color:var(--text-secondary)}.effect-controls{display:flex;gap:.5rem;flex:1}.mini-control{display:flex;flex-direction:column;align-items:center;gap:.25rem}.mini-control input[type=range]{width:70px;height:6px}.mini-control span{font-size:.6rem;color:var(--text-muted)}.lfo-target{display:flex;gap:.25rem;margin-top:.5rem}.lfo-target-btn{flex:1;padding:.25rem;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:4px;color:var(--text-muted);cursor:pointer;font-size:.7rem;transition:all .2s}.lfo-target-btn.active{background:var(--border-color);color:var(--text-primary)}.level-meter{width:100%;height:8px;background:var(--bg-tertiary);border-radius:4px;overflow:hidden;margin-top:.5rem}.meter-bar{height:100%;width:0;background:linear-gradient(90deg,var(--success),var(--warning),var(--danger));transition:width .05s}.keyboard-section{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;padding:1rem}.keyboard-section h2{font-size:.75rem;color:var(--text-secondary);margin-bottom:.75rem}.keyboard-hint{font-size:.65rem;color:var(--text-muted);font-weight:400}.keyboard{position:relative;display:flex;height:160px;background:var(--bg-primary);border-radius:6px;border:1px solid var(--border-color);overflow:hidden}.white-key,.black-key{position:relative;cursor:pointer;transition:all .1s;-webkit-user-select:none;user-select:none}.white-key{flex:1;background:#f0f0f0;border-right:1px solid #ccc;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:10px;color:#333}.white-key.active{background:var(--accent);color:var(--bg-primary);box-shadow:inset 0 0 20px var(--accent-glow)}.black-key{position:absolute;width:30px;height:100px;background:#222;border-radius:0 0 4px 4px;z-index:2;display:flex;justify-content:center;align-items:flex-end;padding-bottom:10px;color:#ccc}.black-key.active{background:var(--accent);color:var(--bg-primary);box-shadow:inset 0 0 20px var(--accent-glow)}.note-label{font-size:.65rem;font-weight:600}.key-hint{font-size:.6rem;color:var(--text-muted)}.sequencer-section{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;padding:1rem}.sequencer-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.sequencer-controls{display:flex;gap:1rem;align-items:center}.bpm-control,.swing-control{display:flex;align-items:center;gap:.5rem}.bpm-control label,.swing-control label{font-size:.7rem;color:var(--text-secondary)}.bpm-control input{width:60px;background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-primary);padding:.25rem;border-radius:4px}.swing-control input[type=range]{width:80px}.transport{display:flex;gap:.5rem}.transport-btn{width:32px;height:32px;border-radius:50%;border:1px solid var(--border-color);background:var(--bg-tertiary);color:var(--text-primary);cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.transport-btn:hover{background:var(--border-color)}.transport-btn.playing{background:var(--success);border-color:var(--success);color:var(--bg-primary)}.transport-btn.recording{background:var(--danger);border-color:var(--danger);color:var(--bg-primary);animation:pulse 1s infinite}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}.sequencer-grid{display:flex;flex-direction:column;gap:.5rem}.seq-track{display:flex;gap:.5rem;align-items:center}.track-label{width:100px;font-size:.75rem;color:var(--text-secondary);display:flex;align-items:center;gap:.5rem}.track-note{background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-primary);font-size:.65rem;padding:.2rem}.track-steps{display:grid;grid-template-columns:repeat(16,1fr);gap:.25rem;flex:1}.step{aspect-ratio:1;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:4px;cursor:pointer;transition:all .1s}.step.active{background:var(--accent);border-color:var(--accent);box-shadow:0 0 10px var(--accent-glow)}.step.current{border-color:var(--warning)}.step-indicator{display:grid;grid-template-columns:repeat(16,1fr);gap:.25rem;margin-top:.5rem}.dot{height:4px;background:var(--bg-tertiary);border-radius:2px}.dot.active{background:var(--warning);box-shadow:0 0 6px var(--warning)}.recording-indicator{position:fixed;bottom:20px;right:20px;background:var(--danger);color:var(--bg-primary);padding:.5rem 1rem;border-radius:20px;font-size:.75rem;font-weight:600;display:flex;align-items:center;gap:.5rem;box-shadow:0 0 20px #f8514980}.recording-indicator.hidden{display:none}@media(max-width:1200px){.top-row,.middle-row{grid-template-columns:1fr 1fr}}@media(max-width:768px){.header{flex-direction:column;gap:1rem}.header-controls{flex-wrap:wrap;width:100%}.top-row,.middle-row{grid-template-columns:1fr}.sequencer-header{flex-direction:column;gap:.5rem}.keyboard{height:120px}.track-label{width:60px;font-size:.65rem}}