:root{--bg: #0a0a0f;--bg2: #111118;--bg3: #18182a;--border: rgba(255,255,255,.08);--text: #e0e0e8;--text2: #888;--accent: #8b5cf6;--accent2: #a78bfa;--cyan: #06b6d4;--red: #ef4444;--amber: #f59e0b;--emerald: #10b981;font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;background:var(--bg);color:var(--text);overflow:hidden}.app{display:flex;flex-direction:column;height:100vh;background:var(--bg)}.transport{display:flex;align-items:center;justify-content:space-between;padding:0 16px;height:56px;background:var(--bg2);border-bottom:1px solid var(--border);flex-shrink:0;gap:16px}.transport-brand{display:flex;align-items:center;gap:8px;min-width:140px}.brand-icon{font-size:24px;color:var(--accent)}.brand-name{font-size:16px;font-weight:700;background:linear-gradient(135deg,var(--accent),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:.5px}.transport-center{display:flex;align-items:center;gap:20px}.transport-buttons{display:flex;align-items:center;gap:4px}.btn-transport{width:36px;height:36px;border:1px solid var(--border);border-radius:8px;background:var(--bg3);color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}.btn-transport:hover{border-color:var(--accent);color:var(--text)}.btn-transport svg{width:16px;height:16px}.btn-transport.active{background:var(--accent);color:#fff;border-color:var(--accent)}.btn-play{width:44px}.btn-play:hover{background:var(--accent);color:#fff}.btn-play.active{background:var(--emerald);border-color:var(--emerald)}.btn-record.active{background:var(--red);border-color:var(--red);animation:pulse 1s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.transport-position{font-family:SF Mono,Fira Code,monospace;font-size:18px;font-weight:600;color:var(--cyan);min-width:80px;text-align:center;letter-spacing:1px}.transport-right{display:flex;align-items:center;gap:12px;min-width:400px;justify-content:flex-end}.transport-tool{display:flex;gap:2px;border:1px solid var(--border);border-radius:6px;overflow:hidden}.btn-tool{width:32px;height:32px;border:none;background:var(--bg3);color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}.btn-tool:hover{color:var(--text)}.btn-tool.active{background:var(--accent);color:#fff}.btn-tool svg{width:14px;height:14px}.transport-param{display:flex;align-items:center;gap:6px}.transport-param label{font-size:11px;color:var(--text2);text-transform:uppercase;letter-spacing:.5px}.param-input{width:56px;height:28px;border:1px solid var(--border);border-radius:4px;background:var(--bg3);color:var(--text);font-size:13px;font-family:monospace;text-align:center;outline:none}.param-input:focus{border-color:var(--accent)}select.param-input{cursor:pointer}.master-vol{gap:8px}.master-vol .slider{width:80px}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;border-radius:2px;background:var(--bg3);outline:none}.slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--bg)}.workspace{display:flex;flex:1;overflow:hidden}.track-list{width:180px;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0}.track-list-header{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid var(--border);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--text2)}.btn-add-track{width:24px;height:24px;border:1px solid var(--border);border-radius:4px;background:transparent;color:var(--accent);cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:all .15s}.btn-add-track:hover{background:var(--accent);color:#fff}.track-list-items{flex:1;overflow-y:auto}.track-item{display:flex;padding:8px 0;cursor:pointer;border-bottom:1px solid var(--border);transition:background .1s}.track-item:hover{background:#ffffff08}.track-item.selected{background:#8b5cf61a}.track-color-bar{width:4px;flex-shrink:0}.track-info{flex:1;padding:0 10px;display:flex;flex-direction:column;gap:6px}.track-name{background:none;border:none;color:var(--text);font-size:13px;font-weight:500;outline:none;width:100%;padding:2px 0}.track-name:focus{border-bottom:1px solid var(--accent)}.track-controls{display:flex;gap:4px;align-items:center}.btn-track-ctrl{width:22px;height:22px;border:1px solid var(--border);border-radius:3px;background:transparent;color:var(--text2);font-size:10px;font-weight:700;cursor:pointer;transition:all .15s}.btn-track-ctrl:hover{border-color:var(--text)}.btn-track-ctrl.muted{background:var(--amber);color:#000;border-color:var(--amber)}.btn-track-ctrl.solo{background:var(--emerald);color:#000;border-color:var(--emerald)}.btn-track-ctrl.btn-remove:hover{background:var(--red);color:#fff;border-color:var(--red)}.track-color-picker{width:22px;height:22px;border:none;padding:0;cursor:pointer;background:none}.editor-area{flex:1;display:flex;flex-direction:column;overflow:hidden}.piano-roll-wrapper{flex:1;display:flex;overflow:hidden;position:relative}.piano-keys{width:56px;flex-shrink:0;background:var(--bg2);border-right:1px solid var(--border);overflow:hidden;display:flex;flex-direction:column}.piano-key{display:flex;align-items:center;justify-content:flex-end;padding-right:6px;font-size:9px;color:var(--text2);border-bottom:1px solid rgba(255,255,255,.04);cursor:pointer;transition:background .1s;flex-shrink:0;-webkit-user-select:none;user-select:none}.piano-key.white{background:var(--bg2)}.piano-key.black{background:#0d0d14;color:#555}.piano-key:hover{background:#8b5cf633}.piano-roll{flex:1;overflow:auto;position:relative;cursor:crosshair}.piano-roll-grid{position:relative;background:var(--bg)}.measure-line{position:absolute;top:0;width:2px;background:#ffffff1a;z-index:2;pointer-events:none}.measure-num{position:absolute;top:2px;left:4px;font-size:10px;color:var(--text2);font-family:monospace;pointer-events:none}.beat-line{position:absolute;top:0;width:1px;background:#ffffff0a;z-index:1;pointer-events:none}.pitch-row{position:absolute;left:0;pointer-events:none}.pitch-row.black-row{background:#00000040}.roll-note{position:absolute;border-radius:3px;z-index:5;cursor:pointer;transition:opacity .1s;border:1px solid rgba(255,255,255,.15)}.roll-note:hover{filter:brightness(1.3)}.roll-note.selected{z-index:6;border:2px solid #fff}.playhead{position:absolute;top:0;width:2px;background:var(--cyan);z-index:10;pointer-events:none;box-shadow:0 0 8px var(--cyan)}.piano-keyboard{height:100px;background:var(--bg2);border-top:1px solid var(--border);flex-shrink:0;display:flex;flex-direction:column}.kb-header{display:flex;align-items:center;gap:8px;padding:4px 12px;border-bottom:1px solid var(--border)}.kb-oct-btn{width:24px;height:24px;border:1px solid var(--border);border-radius:4px;background:var(--bg3);color:var(--text);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center}.kb-oct-btn:hover{border-color:var(--accent)}.kb-oct-label{font-size:12px;color:var(--text2);font-family:monospace}.kb-hint{font-size:10px;color:#444;margin-left:auto}.kb-keys{flex:1;position:relative;display:flex}.kb-white{height:100%;background:linear-gradient(180deg,#e8e8e8,#fff);border:1px solid #aaa;border-top:none;border-radius:0 0 4px 4px;cursor:pointer;position:relative;z-index:1;transition:background .1s;display:flex;align-items:flex-end;justify-content:center;padding-bottom:4px}.kb-white:hover{background:linear-gradient(180deg,#d0d0d0,#eee)}.kb-white.active{background:linear-gradient(180deg,var(--accent2),var(--accent))}.kb-note-label{font-size:9px;color:#666;font-family:monospace;pointer-events:none}.kb-white.active .kb-note-label{color:#fff}.kb-black{position:absolute;top:0;height:62%;background:linear-gradient(180deg,#222,#000);border-radius:0 0 3px 3px;cursor:pointer;z-index:2;transition:background .1s}.kb-black:hover{background:linear-gradient(180deg,#333,#111)}.kb-black.active{background:linear-gradient(180deg,var(--accent),#6d28d9)}.mixer{height:160px;background:var(--bg2);border-top:1px solid var(--border);flex-shrink:0;display:flex;gap:0}.mixer-channels{display:flex;gap:1px;background:var(--border);flex:1;overflow-x:auto}.mixer-channel{min-width:80px;flex:1;background:var(--bg2);display:flex;flex-direction:column;align-items:center;padding:8px 6px;gap:4px;cursor:pointer;transition:background .1s}.mixer-channel:hover{background:var(--bg3)}.mixer-channel.selected{background:#8b5cf614}.channel-name{font-size:11px;font-weight:600;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.channel-fader-wrap{flex:1;width:28px;position:relative;display:flex;align-items:center;justify-content:center}.fader{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:80px;height:4px;border-radius:2px;background:var(--bg);outline:none;transform:rotate(-90deg);position:absolute}.fader::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:20px;border-radius:3px;background:var(--text);cursor:pointer;border:1px solid var(--border)}.fader-level{position:absolute;bottom:0;left:50%;transform:translate(-50%);width:6px;border-radius:3px;opacity:.3;pointer-events:none}.channel-pan{width:100%;display:flex;flex-direction:column;align-items:center;gap:2px}.pan-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:60px;height:3px;border-radius:2px;background:var(--bg);outline:none}.pan-slider::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;border-radius:50%;background:var(--text2);cursor:pointer}.pan-label{font-size:9px;color:var(--text2);font-family:monospace}.channel-btns{display:flex;gap:4px}.ch-btn{width:20px;height:18px;border:1px solid var(--border);border-radius:3px;background:transparent;color:var(--text2);font-size:9px;font-weight:700;cursor:pointer;transition:all .15s}.ch-btn:hover{border-color:var(--text)}.ch-btn.active{background:var(--amber);color:#000;border-color:var(--amber)}.ch-btn.solo.active{background:var(--emerald);border-color:var(--emerald)}.btn-export{display:flex;align-items:center;gap:4px;padding:4px 10px;border:1px solid var(--border);border-radius:4px;background:var(--bg3);color:var(--text2);font-size:11px;cursor:pointer;transition:all .15s}.btn-export:hover{border-color:var(--accent);color:var(--text)}.master-channel{min-width:100px;background:var(--bg3)}.effects-panel{min-width:320px;background:var(--bg3);border-left:1px solid var(--border);padding:12px;display:flex;gap:16px;overflow-x:auto}.effects-section{display:flex;flex-direction:column;gap:8px;min-width:140px}.effects-section h4{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text2)}.effect-row{display:flex;align-items:center;gap:8px}.effect-row label{font-size:11px;color:var(--text2);min-width:44px}.effect-row .slider{flex:1;min-width:60px}.effect-row .val{font-size:10px;color:var(--text2);font-family:monospace;min-width:36px;text-align:right}.effect-select{flex:1;height:24px;border:1px solid var(--border);border-radius:4px;background:var(--bg);color:var(--text);font-size:12px;outline:none;cursor:pointer}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:#333;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#444}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.track-item{animation:fadeIn .2s ease}