:root{--bg-primary: #0d1117;--bg-secondary: #161b22;--bg-tertiary: #21262d;--bg-hover: #30363d;--text-primary: #f0f6fc;--text-secondary: #8b949e;--text-muted: #6e7681;--accent-primary: #58a6ff;--accent-secondary: #1f6feb;--accent-green: #3fb950;--accent-red: #f85149;--accent-orange: #f0883e;--accent-purple: #a371f7;--accent-pink: #db61a2;--border-color: #30363d;--border-light: #21262d;--step-off: #21262d;--step-on: #58a6ff;--step-kick: #f85149;--step-snare: #f0883e;--step-hat: #3fb950;--step-melody: #a371f7;--step-current: rgba(88, 166, 255, .3);--panel-radius: 12px;--btn-radius: 6px;--step-size: 28px;--step-gap: 4px;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "JetBrains Mono", "Fira Code", "Consolas", monospace;--transition-fast: .1s ease;--transition-normal: .2s ease}*,*:before,*:after{box-sizing:border-box}body{margin:0;padding:0;font-family:var(--font-sans);font-size:14px;line-height:1.5;color:var(--text-primary);background:var(--bg-primary);min-height:100vh;overflow-x:hidden}#app{min-height:100vh;display:flex;flex-direction:column}.header{display:flex;justify-content:space-between;align-items:center;padding:12px 24px;background:var(--bg-secondary);border-bottom:1px solid var(--border-color);position:sticky;top:0;z-index:100}.logo{display:flex;align-items:center;gap:12px}.logo-icon{font-size:28px;color:var(--accent-primary)}.logo h1{font-size:20px;font-weight:700;margin:0;color:var(--text-primary)}.logo .subtitle{font-size:12px;color:var(--text-secondary);padding:2px 8px;background:var(--bg-tertiary);border-radius:4px}.header-controls{display:flex;align-items:center;gap:12px}.preset-select{padding:8px 12px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--btn-radius);color:var(--text-primary);font-size:13px;cursor:pointer;min-width:180px}.preset-select:hover{border-color:var(--accent-primary)}.icon-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--btn-radius);color:var(--text-secondary);font-size:16px;cursor:pointer;transition:all var(--transition-fast)}.icon-btn:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--accent-primary)}.dashboard{display:grid;grid-template-columns:280px 1fr 300px;gap:16px;padding:16px;flex:1;min-height:0}.column{display:flex;flex-direction:column;gap:16px;min-height:0}.center-column{min-width:0}.panel{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--panel-radius);padding:16px}.panel-title{font-size:13px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin:0 0 16px}.panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.panel-header .panel-title{margin:0}.subsection-title{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin:16px 0 12px}.transport-controls{display:flex;align-items:center;gap:16px;margin-bottom:16px}.transport-buttons{display:flex;gap:8px}.transport-btn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:none;border-radius:8px;font-size:18px;cursor:pointer;transition:all var(--transition-fast)}.transport-btn.play{background:var(--accent-green);color:#fff}.transport-btn.play:hover{background:#46c05e}.transport-btn.pause{background:var(--accent-orange);color:#fff}.transport-btn.pause:hover{background:#f79652}.transport-btn.stop{background:var(--accent-red);color:#fff}.transport-btn.stop:hover{background:#f96961}.beat-display{font-family:var(--font-mono);font-size:28px;font-weight:600;color:var(--accent-primary);background:var(--bg-tertiary);padding:8px 16px;border-radius:8px;min-width:80px;text-align:center}.control-group{margin-bottom:12px}.control-group label{display:block;font-size:12px;color:var(--text-secondary);margin-bottom:6px}.control-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}.slider-input{display:flex;align-items:center;gap:10px}.slider-input input[type=range]{flex:1}.slider-input input[type=number]{width:60px;padding:6px 8px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--btn-radius);color:var(--text-primary);font-family:var(--font-mono);font-size:13px;text-align:center}.slider-input input[type=number]:focus{outline:none;border-color:var(--accent-primary)}.slider-input span{font-family:var(--font-mono);font-size:12px;color:var(--text-secondary);min-width:35px}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:6px;background:var(--bg-tertiary);border-radius:3px;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background:var(--accent-primary);border-radius:50%;cursor:pointer;transition:transform var(--transition-fast)}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}input[type=range]::-moz-range-thumb{width:16px;height:16px;background:var(--accent-primary);border:none;border-radius:50%;cursor:pointer}.toggle-group{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-secondary)}.toggle{position:relative;display:inline-block;width:40px;height:22px}.toggle input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--bg-tertiary);border:1px solid var(--border-color);transition:all var(--transition-normal);border-radius:22px}.toggle-slider:before{position:absolute;content:"";height:16px;width:16px;left:2px;bottom:2px;background-color:var(--text-secondary);transition:all var(--transition-normal);border-radius:50%}.toggle input:checked+.toggle-slider{background-color:var(--accent-primary);border-color:var(--accent-primary)}.toggle input:checked+.toggle-slider:before{transform:translate(18px);background-color:#fff}select{padding:8px 12px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--btn-radius);color:var(--text-primary);font-size:13px;cursor:pointer;transition:border-color var(--transition-fast)}select:hover{border-color:var(--accent-primary)}select:focus{outline:none;border-color:var(--accent-primary)}.small-select{padding:6px 10px;font-size:12px}.adsr-controls{display:flex;justify-content:space-between;gap:8px}.adsr-knob{display:flex;flex-direction:column;align-items:center;gap:6px}.adsr-knob label{font-size:11px;color:var(--text-muted);font-weight:600}.vertical-slider{writing-mode:vertical-lr;direction:rtl;width:6px!important;height:60px!important}.editor-panel{display:flex;flex-direction:column}.editor-controls{display:flex;align-items:center;gap:16px}.editor-wrapper{position:relative;flex:1;min-height:120px}#pattern-editor{width:100%;height:120px;padding:12px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;color:var(--text-primary);font-family:var(--font-mono);font-size:13px;line-height:1.6;resize:vertical;transition:border-color var(--transition-fast)}#pattern-editor:focus{outline:none;border-color:var(--accent-primary)}#pattern-editor::placeholder{color:var(--text-muted)}.editor-error{position:absolute;bottom:8px;left:8px;right:8px;padding:8px 12px;background:#f851491a;border:1px solid var(--accent-red);border-radius:6px;color:var(--accent-red);font-size:12px;font-family:var(--font-mono);display:none}.editor-error.visible{display:block}.editor-help{margin-top:12px;display:flex;flex-direction:column;gap:4px}.editor-help code{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);background:var(--bg-tertiary);padding:4px 8px;border-radius:4px}.action-btn{padding:8px 16px;background:var(--accent-primary);border:none;border-radius:var(--btn-radius);color:#fff;font-size:13px;font-weight:500;cursor:pointer;transition:all var(--transition-fast)}.action-btn:hover{background:var(--accent-secondary)}.sequencer-panel{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}.sequencer-controls{display:flex;gap:12px}.drum-grid-container{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.track-row{display:flex;align-items:center;gap:12px}.track-label{display:flex;align-items:center;gap:6px;min-width:100px;font-size:13px;font-weight:500}.track-label span{min-width:45px}.mute-btn,.solo-btn{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:4px;color:var(--text-muted);font-size:10px;font-weight:600;cursor:pointer;transition:all var(--transition-fast)}.mute-btn:hover,.solo-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.mute-btn.active{background:var(--accent-red);border-color:var(--accent-red);color:#fff}.solo-btn.active{background:var(--accent-orange);border-color:var(--accent-orange);color:#fff}.step-grid{display:flex;gap:var(--step-gap);flex-wrap:nowrap}.step{width:var(--step-size);height:var(--step-size);background:var(--step-off);border:1px solid var(--border-color);border-radius:4px;cursor:pointer;transition:all var(--transition-fast);position:relative}.step:hover{background:var(--bg-hover);border-color:var(--accent-primary)}.step.active{border-color:transparent}.step.active[data-track=kick]{background:var(--step-kick)}.step.active[data-track=snare]{background:var(--step-snare)}.step.active[data-track=hat]{background:var(--step-hat)}.step.current{box-shadow:inset 0 0 0 2px var(--accent-primary)}.step.beat-marker{border-bottom:2px solid var(--text-muted)}.step.focused{outline:2px solid var(--accent-primary);outline-offset:2px}.step .velocity-bar{position:absolute;bottom:2px;left:2px;right:2px;height:3px;background:#ffffff80;border-radius:1px}.melody-section{flex:1;display:flex;flex-direction:column;min-height:0}.melody-header{display:flex;align-items:center;gap:12px;margin-bottom:8px}.melody-header h3{font-size:13px;font-weight:500;margin:0;color:var(--text-secondary)}.piano-roll-container{display:flex;flex:1;min-height:180px;max-height:250px;overflow:auto;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px}.piano-keys{display:flex;flex-direction:column;width:40px;flex-shrink:0;border-right:1px solid var(--border-color);position:sticky;left:0;background:var(--bg-tertiary);z-index:1}.piano-key{height:20px;display:flex;align-items:center;justify-content:flex-end;padding-right:6px;font-family:var(--font-mono);font-size:9px;color:var(--text-muted);border-bottom:1px solid var(--border-light)}.piano-key.black{background:var(--bg-secondary);color:var(--text-secondary)}.piano-roll{display:flex;flex-direction:column;flex:1;min-width:max-content}.melody-row{display:flex;height:20px;border-bottom:1px solid var(--border-light)}.melody-row.black-key{background:#0003}.melody-cell{width:var(--step-size);min-width:var(--step-size);height:100%;border-right:1px solid var(--border-light);cursor:pointer;transition:background var(--transition-fast)}.melody-cell:hover{background:#a371f733}.melody-cell.active{background:var(--step-melody)}.melody-cell.beat-marker{border-right:1px solid var(--text-muted)}.melody-cell.current{background:var(--step-current)}.playhead{position:absolute;top:0;width:2px;height:100%;background:var(--accent-primary);pointer-events:none;z-index:10;display:none}.playhead.visible{display:block}.transpose-controls{display:flex;align-items:center;gap:8px}.transpose-controls span{font-family:var(--font-mono);font-size:14px;min-width:30px;text-align:center}.transpose-controls .unit{font-size:11px;color:var(--text-muted)}.small-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--btn-radius);color:var(--text-primary);font-size:14px;cursor:pointer;transition:all var(--transition-fast)}.small-btn:hover{background:var(--bg-hover);border-color:var(--accent-primary)}.scale-lock-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.shift-controls{display:flex;align-items:center;gap:8px}.time-controls{gap:8px}.toggle-btn{padding:6px 12px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--btn-radius);color:var(--text-secondary);font-size:12px;cursor:pointer;transition:all var(--transition-fast);flex:1}.toggle-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.toggle-btn.active{background:var(--accent-primary);border-color:var(--accent-primary);color:#fff}.loop-region-controls{display:flex;align-items:center;gap:8px}.loop-region-controls span{color:var(--text-muted);font-size:12px}.ab-controls{margin-top:16px}.ab-controls h3{font-size:12px;font-weight:500;color:var(--text-secondary);margin:0 0 12px}.ab-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}.ab-btn{padding:8px 12px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--btn-radius);color:var(--text-secondary);font-size:12px;cursor:pointer;transition:all var(--transition-fast)}.ab-btn:hover:not(:disabled){background:var(--bg-hover);color:var(--text-primary);border-color:var(--accent-primary)}.ab-btn:disabled{opacity:.5;cursor:not-allowed}.ab-status{display:flex;gap:12px;margin-top:12px}.status-indicator{font-size:11px;color:var(--text-muted);font-family:var(--font-mono)}.status-indicator.saved{color:var(--accent-green)}.export-buttons{display:flex;flex-direction:column;gap:8px}.export-btn{padding:10px 16px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--btn-radius);color:var(--text-primary);font-size:13px;cursor:pointer;transition:all var(--transition-fast);text-align:center}.export-btn:hover{background:var(--bg-hover);border-color:var(--accent-primary)}.recording-status{margin-top:12px;padding:8px 12px;background:#f851491a;border:1px solid var(--accent-red);border-radius:var(--btn-radius);color:var(--accent-red);font-size:12px;text-align:center;display:none}.recording-status.visible{display:block}.recording-status.recording{background:#f8514933;animation:pulse 1s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.modal{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal.hidden{display:none}.modal-content{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--panel-radius);padding:24px;max-width:400px;width:90%;position:relative}.modal-content h2{font-size:18px;margin:0 0 20px;color:var(--text-primary)}.modal-close{position:absolute;top:16px;right:16px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--text-muted);font-size:24px;cursor:pointer;transition:color var(--transition-fast)}.modal-close:hover{color:var(--text-primary)}.shortcuts-list{display:flex;flex-direction:column;gap:12px}.shortcut{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--text-secondary)}kbd{display:inline-block;padding:4px 8px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:4px;font-family:var(--font-mono);font-size:11px;color:var(--text-primary)}@media (max-width: 1400px){.dashboard{grid-template-columns:250px 1fr 280px}}@media (max-width: 1200px){.dashboard{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}.left-column{grid-column:1;grid-row:1}.center-column{grid-column:2;grid-row:1 / 3}.right-column{grid-column:1;grid-row:2}}@media (max-width: 900px){.dashboard{grid-template-columns:1fr}.center-column,.left-column,.right-column{grid-column:1;grid-row:auto}:root{--step-size: 24px}}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-tertiary);border-radius:4px}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--bg-hover)}.hidden{display:none!important}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}