*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg0: #08080f;--bg1: #10101c;--bg2: #181828;--bg3: #20203a;--border: #2a2a44;--border2: #353560;--text: #e0e0f5;--text2: #9090b8;--text3: #5a5a80;--accent: #7c3aed;--accent2: #9f5cf5;--play: #22c55e;--danger: #ef4444;--mute-active: #f59e0b;--solo-active: #06b6d4;--radius: 6px;--radius-sm: 4px;--font-mono: "Courier New", Courier, monospace}html,body,#root{height:100%;min-height:100vh;background:var(--bg0);color:var(--text);font-family:Segoe UI,system-ui,sans-serif;font-size:13px;overflow-x:hidden}button{cursor:pointer;border:none;outline:none;font:inherit}input,select{font:inherit;outline:none;border:none}select{cursor:pointer}.start-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;background:radial-gradient(ellipse at 50% 40%,#1a0a3a 0%,var(--bg0) 70%)}.start-content{text-align:center}.logo-text{font-size:72px;font-weight:900;letter-spacing:.15em;background:linear-gradient(135deg,#7c3aed,#ec4899,#06b6d4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:12px}.start-subtitle{color:var(--text2);font-size:16px;margin-bottom:36px;letter-spacing:.1em;text-transform:uppercase}.start-btn{background:linear-gradient(135deg,var(--accent),#ec4899);color:#fff;font-size:16px;font-weight:700;padding:14px 48px;border-radius:50px;letter-spacing:.08em;transition:opacity .2s,transform .1s}.start-btn:hover{opacity:.9;transform:scale(1.02)}.start-note{color:var(--text3);font-size:11px;margin-top:16px}.beatmaker{display:flex;flex-direction:column;min-height:100vh;background:var(--bg0)}.app-header{display:flex;align-items:center;gap:16px;padding:10px 16px;background:var(--bg1);border-bottom:1px solid var(--border);flex-shrink:0}.app-logo{font-size:20px;font-weight:900;letter-spacing:.12em;background:linear-gradient(135deg,var(--accent),#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;flex-shrink:0}.header-actions{margin-left:auto;display:flex;gap:8px}.transport-bar{display:flex;align-items:center;gap:16px;flex:1;flex-wrap:wrap}.transport-btns{display:flex;gap:6px}.transport-btn{width:34px;height:34px;border-radius:var(--radius-sm);background:var(--bg3);color:var(--text2);font-size:13px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}.transport-btn:hover{background:var(--bg2);color:var(--text)}.transport-btn.active{background:var(--bg3);color:var(--text)}.transport-btn.play.active{background:var(--play);color:#000}.transport-group{display:flex;align-items:center;gap:6px}.transport-label{color:var(--text3);font-size:10px;text-transform:uppercase;letter-spacing:.08em}.bpm-control{display:flex;align-items:center;gap:2px}.bpm-input{width:52px;text-align:center;background:var(--bg0);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px;font-family:var(--font-mono);font-size:14px;font-weight:700}.bpm-input::-webkit-inner-spin-button,.bpm-input::-webkit-outer-spin-button{-webkit-appearance:none}.bpm-btn{width:22px;height:22px;background:var(--bg3);color:var(--text);border-radius:3px;border:1px solid var(--border);font-size:14px;line-height:1}.bpm-btn:hover{background:var(--accent)}.tap-btn{height:22px;padding:0 8px;background:var(--accent);color:#fff;font-weight:700;font-size:10px;letter-spacing:.06em;border-radius:3px;border:1px solid var(--accent2);line-height:1;transition:background .15s,box-shadow .15s}.tap-btn:hover{background:var(--accent2)}.tap-btn.tapped{background:var(--accent2);box-shadow:0 0 8px var(--accent2)}.transport-select{background:var(--bg0);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px 6px}.transport-slider{width:80px;accent-color:var(--accent)}.btn-icon{width:34px;height:34px;border-radius:var(--radius-sm);background:var(--bg3);color:var(--text2);font-size:16px;border:1px solid var(--border);transition:background .15s,color .15s}.btn-icon:hover,.btn-icon.active{background:var(--accent);color:#fff}.master-controls{display:flex;align-items:center;gap:16px;padding:8px 16px;background:var(--bg1);border-bottom:1px solid var(--border)}.master-label{font-size:10px;font-weight:700;color:var(--text3);letter-spacing:.15em;text-transform:uppercase;flex-shrink:0}.master-control-group{display:flex;align-items:center;gap:8px}.master-ctrl-label{font-size:11px;color:var(--text2);white-space:nowrap}.master-slider{width:120px;accent-color:var(--accent)}.master-val{font-size:11px;color:var(--text3);width:24px;font-family:var(--font-mono)}.track-area{flex:1;overflow-y:auto;padding:12px}.track-header-row{display:flex;align-items:center;padding:0 0 6px;gap:0;margin-bottom:4px}.track-meta-header{width:220px;flex-shrink:0;font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;padding-left:8px}.track-controls-header{width:124px;flex-shrink:0;font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;padding-left:4px}.track-steps-header{display:flex;flex:1;gap:2px}.step-num{flex:1;text-align:center;font-size:9px;color:var(--text3);font-family:var(--font-mono)}.step-num.beat-start{color:var(--text2)}.track-list{display:flex;flex-direction:column;gap:4px}.track-row{display:flex;align-items:center;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:border-color .15s;min-height:54px}.track-row:hover{border-color:var(--border2)}.track-row.muted{opacity:.45}.track-row.solo{border-color:var(--solo-active)}.track-color-strip{width:4px;align-self:stretch;flex-shrink:0}.track-meta{width:216px;flex-shrink:0;padding:6px 8px;display:flex;flex-direction:column;gap:4px}.track-name-input{background:transparent;color:var(--text);font-size:12px;font-weight:600;width:100%;padding:0;border-bottom:1px solid transparent}.track-name-input:focus{border-color:var(--accent);outline:none}.inst-select-wrap{display:flex;gap:4px}.inst-select{flex:1;background:var(--bg0);color:var(--text2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:3px 4px;font-size:11px}.note-select{background:var(--bg0);color:var(--accent2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:3px 4px;font-size:11px;width:60px}.track-controls{width:120px;flex-shrink:0;display:flex;align-items:center;gap:6px;padding:0 6px}.knob-wrap{display:flex;flex-direction:column;align-items:center;gap:1px}.knob-label{font-size:8px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em}.knob-val{font-size:9px;color:var(--text3);font-family:var(--font-mono)}.knob-slider.vertical{-webkit-appearance:slider-vertical;-moz-appearance:slider-vertical;appearance:slider-vertical;writing-mode:vertical-lr;direction:rtl;width:22px;height:52px;accent-color:var(--accent)}.ms-btns{display:flex;flex-direction:column;gap:4px}.ms-btn{width:22px;height:22px;border-radius:3px;font-size:9px;font-weight:700;border:1px solid var(--border);background:var(--bg3);color:var(--text3);transition:background .15s,color .15s}.ms-btn:hover{color:var(--text)}.mute-btn.active{background:var(--mute-active);color:#000;border-color:var(--mute-active)}.solo-btn.active{background:var(--solo-active);color:#000;border-color:var(--solo-active)}.step-grid{display:flex;flex:1;gap:2px;padding:0 6px;align-items:center}.step-btn{flex:1;height:36px;border-radius:3px;background:var(--bg3);border:1px solid var(--border);transition:background .08s,border-color .08s,transform .05s;position:relative;touch-action:manipulation}.step-btn:hover{background:var(--bg0);border-color:var(--border2)}.step-btn.on{background:var(--step-color, var(--accent));border-color:var(--step-color, var(--accent));box-shadow:0 0 6px color-mix(in srgb,var(--step-color, var(--accent)) 60%,transparent)}.step-btn.on:hover{opacity:.85}.step-btn.beat-start{border-left:1px solid var(--border2)}.step-btn.playing:after{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border:2px solid #fff;border-radius:4px;opacity:.6;pointer-events:none}.step-btn.on.playing:after{border-color:#fff}.track-actions{display:flex;flex-direction:column;gap:2px;padding:0 6px;flex-shrink:0}.track-action-btn{width:22px;height:22px;border-radius:3px;background:var(--bg3);color:var(--text3);font-size:12px;border:1px solid var(--border)}.track-action-btn:hover{color:var(--text);background:var(--bg2)}.track-action-btn.remove:hover{background:var(--danger);color:#fff;border-color:var(--danger)}.add-track-btn{margin-top:10px;width:100%;padding:10px;background:var(--bg2);color:var(--text2);border:1px dashed var(--border2);border-radius:var(--radius);font-size:13px;font-weight:600;letter-spacing:.05em;transition:background .15s,color .15s,border-color .15s}.add-track-btn:hover{background:var(--bg3);color:var(--accent2);border-color:var(--accent)}.keymap-panel{background:var(--bg1);border-top:1px solid var(--border);padding:12px;flex-shrink:0}.keymap-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.keymap-title{font-size:13px;font-weight:700;color:var(--text2);letter-spacing:.08em}.panel-close{width:24px;height:24px;border-radius:50%;background:var(--bg3);color:var(--text2);font-size:14px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center}.panel-close:hover{background:var(--danger);color:#fff}.keymap-body{display:flex;gap:16px;align-items:flex-start}.key-grid{display:flex;flex-wrap:wrap;gap:4px;max-width:520px}.key-cell{width:56px;min-height:44px;border-radius:var(--radius-sm);background:var(--bg2);border:1px solid var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px 2px;transition:background .15s,border-color .15s}.key-cell:hover{border-color:var(--border2);background:var(--bg3)}.key-cell.mapped{border-color:var(--key-color, var(--accent))}.key-cell.selected{background:var(--bg3);border-color:#fff;box-shadow:0 0 0 1px #fff}.key-label{font-size:11px;font-weight:700;color:var(--text2);font-family:var(--font-mono)}.key-inst{font-size:8px;color:var(--key-color, var(--text3));text-align:center;line-height:1.2;overflow:hidden;max-width:100%;text-overflow:ellipsis;white-space:nowrap}.key-assign-panel{flex:1;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:12px;min-width:300px}.key-assign-header{font-size:12px;color:var(--text2);margin-bottom:10px}.key-assign-category{margin-bottom:10px}.key-assign-cat-label{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--text3);margin-bottom:4px}.key-assign-instruments{display:flex;flex-wrap:wrap;gap:4px}.key-assign-btn{padding:4px 8px;border-radius:var(--radius-sm);background:var(--bg3);color:var(--text2);font-size:11px;border:1px solid var(--border);transition:background .15s,color .15s}.key-assign-btn:hover{border-color:var(--inst-color);color:var(--inst-color)}.key-assign-btn.active{background:var(--inst-color, var(--accent));color:#000;border-color:var(--inst-color, var(--accent));font-weight:700}.key-assign-note{display:flex;align-items:center;gap:8px;margin:10px 0}.key-assign-note label{font-size:11px;color:var(--text2)}.key-assign-note select{background:var(--bg0);color:var(--accent2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:3px 6px}.key-clear-btn{margin-top:8px;padding:6px 12px;background:var(--bg3);color:var(--danger);border:1px solid var(--danger);border-radius:var(--radius-sm);font-size:11px}.key-clear-btn:hover{background:var(--danger);color:#fff}.keymap-footer{margin-top:10px}.keymap-hint{font-size:10px;color:var(--text3)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:100;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal{background:var(--bg1);border:1px solid var(--border2);border-radius:10px;width:540px;max-width:95vw;max-height:80vh;display:flex;flex-direction:column;overflow:hidden}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border)}.modal-title{font-size:15px;font-weight:700;color:var(--text)}.modal-tabs{display:flex;padding:10px 16px 0;gap:4px;border-bottom:1px solid var(--border)}.modal-tab{padding:6px 16px;border-radius:var(--radius-sm) var(--radius-sm) 0 0;background:var(--bg2);color:var(--text2);border:1px solid transparent;font-size:12px;font-weight:600;border-bottom:none}.modal-tab.active{background:var(--bg3);color:var(--text);border-color:var(--border2)}.modal-instrument-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;padding:14px 16px;overflow-y:auto}.inst-card{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:var(--radius);background:var(--bg2);border:1px solid var(--border);color:var(--text2);font-size:12px;font-weight:500;transition:background .15s,border-color .15s,color .15s}.inst-card:hover,.inst-card.hovered{background:var(--bg3);border-color:var(--card-color, var(--accent));color:var(--text)}.inst-card-dot{width:8px;height:8px;border-radius:50%;background:var(--card-color, var(--accent));flex-shrink:0}.inst-card-name{text-align:left}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg0)}::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text3)}@media(max-width:900px){.track-meta{width:160px}.track-controls{width:100px}.bpm-input{width:44px}.transport-slider{width:60px}}.project-name-wrap{display:flex;align-items:center;gap:8px;flex-shrink:0}.project-name-input{background:transparent;color:var(--text2);border:none;border-bottom:1px solid transparent;font-size:12px;width:130px;padding:2px 0}.project-name-input:focus{border-color:var(--accent);outline:none;color:var(--text)}.save-msg{font-size:11px;color:var(--play);padding:4px 8px;background:color-mix(in srgb,var(--play) 15%,transparent);border-radius:var(--radius-sm)}.add-track-hint{font-size:10px;color:var(--text3);margin-left:10px;font-weight:400}.track-row.drag-over{border-color:var(--accent2);background:color-mix(in srgb,var(--accent) 10%,var(--bg2))}.drop-hint{font-size:11px;color:var(--accent2);text-align:center;padding:2px 0;letter-spacing:.05em}.sample-info{display:flex;align-items:center;gap:6px;flex:1}.sample-waveform{border-radius:3px;background:var(--bg0);flex-shrink:0}.sample-name{font-size:10px;color:var(--text2);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sample-clear-btn{width:16px;height:16px;border-radius:50%;background:var(--bg3);color:var(--text3);font-size:11px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0}.sample-clear-btn:hover{background:var(--danger);color:#fff}.track-meta-row{display:flex;gap:4px;align-items:center}.step-note-label{position:absolute;bottom:2px;left:50%;transform:translate(-50%);font-size:7px;font-family:var(--font-mono);color:#fffc;pointer-events:none;white-space:nowrap}.step-btn{position:relative}.velocity-lane{display:flex;gap:2px;padding:4px 6px 4px 350px;height:40px;background:var(--bg1);border-top:1px solid var(--border);margin-bottom:2px}.vel-bar-wrap{flex:1;display:flex;align-items:flex-end;cursor:ns-resize;border-left:1px solid transparent}.vel-bar-wrap.beat-start{border-left-color:var(--border)}.vel-bar-wrap.playing .vel-bar{opacity:1!important;outline:1px solid #fff}.vel-bar{width:100%;border-radius:2px 2px 0 0;transition:height .1s}.track-effects{background:var(--bg1);border-top:1px solid var(--border);padding:8px 12px}.fx-grid{display:flex;flex-wrap:wrap;gap:6px}.fx-row{display:flex;align-items:flex-start;gap:8px;padding:6px 8px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm);min-width:200px;opacity:.5;transition:opacity .2s}.fx-row.fx-enabled{opacity:1;border-color:var(--accent)}.fx-toggle{display:flex;align-items:center;gap:5px;cursor:pointer;flex-shrink:0}.fx-toggle input[type=checkbox]{accent-color:var(--accent)}.fx-label{font-size:10px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}.fx-params{display:flex;flex-wrap:wrap;gap:6px}.fx-param{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:60px}.fx-param-label{font-size:8px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em}.fx-param input[type=range]{width:60px;accent-color:var(--accent)}.fx-param-val{font-size:8px;color:var(--text3);font-family:var(--font-mono)}.fx-select{background:var(--bg0);color:var(--text2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:2px 4px;font-size:11px;width:60px}.track-action-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}.step-note-menu{background:var(--bg1);border:1px solid var(--border2);border-radius:var(--radius);box-shadow:0 8px 32px #0009;min-width:240px;overflow:hidden}.step-note-header{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-bottom:1px solid var(--border);font-size:12px;font-weight:700;color:var(--text2)}.snm-clear{font-size:10px;padding:3px 8px;background:var(--bg3);color:var(--text2);border:1px solid var(--border);border-radius:var(--radius-sm)}.snm-clear:hover{background:var(--accent);color:#fff}.snm-octaves{padding:6px 8px;display:flex;flex-direction:column;gap:3px}.snm-octave-row{display:flex;align-items:center;gap:4px}.snm-oct-label{font-size:9px;color:var(--text3);width:20px;flex-shrink:0;font-family:var(--font-mono)}.snm-keys{display:flex;gap:2px}.snm-key{width:20px;height:24px;border-radius:2px;font-size:8px;border:1px solid var(--border);transition:background .1s}.snm-key.natural{background:var(--bg3);color:var(--text2)}.snm-key.natural:hover{background:var(--accent);color:#fff}.snm-key.sharp{background:var(--bg0);color:var(--text3);height:18px}.snm-key.sharp:hover{background:var(--accent2);color:#fff}.snm-key.active{background:var(--accent)!important;color:#fff!important;border-color:var(--accent)}.pattern-arranger{background:var(--bg1);border-bottom:1px solid var(--border);padding:10px 16px;display:flex;gap:24px;flex-wrap:wrap}.pa-section{display:flex;flex-direction:column;gap:8px}.pa-section-title{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.12em;display:flex;align-items:center;gap:10px}.pa-patterns{display:flex;gap:4px;flex-wrap:wrap}.pa-pattern-slot{display:flex;align-items:center;gap:6px;padding:6px 10px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:border-color .15s,background .15s;min-width:90px}.pa-pattern-slot:hover{border-color:var(--border2)}.pa-pattern-slot.active{border-color:var(--pat-color, var(--accent));background:color-mix(in srgb,var(--pat-color, var(--accent)) 15%,var(--bg2))}.pa-pattern-name{font-size:11px;font-weight:600;color:var(--text);flex:1}.pa-rename-input{background:transparent;color:var(--text);border:none;border-bottom:1px solid var(--accent);font-size:11px;font-weight:600;width:70px}.pa-pattern-actions{display:flex;gap:2px}.pa-action-btn{width:18px;height:18px;border-radius:3px;background:var(--bg3);color:var(--text3);font-size:11px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center}.pa-action-btn:hover{background:var(--accent);color:#fff}.pa-action-btn.danger:hover{background:var(--danger)}.pa-add-btn{padding:6px 12px;background:var(--bg2);border:1px dashed var(--border2);border-radius:var(--radius-sm);color:var(--text3);font-size:11px}.pa-add-btn:hover{border-color:var(--accent);color:var(--accent2)}.pa-song-mode-btn{padding:3px 10px;border-radius:20px;background:var(--bg3);color:var(--text3);font-size:10px;font-weight:700;border:1px solid var(--border);transition:all .15s}.pa-song-mode-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}.pa-song-timeline{display:flex;gap:4px;flex-wrap:wrap;min-height:36px;align-items:center;padding:4px 0}.pa-song-empty{font-size:11px;color:var(--text3);font-style:italic}.pa-song-block{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 8px;background:color-mix(in srgb,var(--pat-color, var(--accent)) 20%,var(--bg2));border:1px solid var(--pat-color, var(--accent));border-radius:var(--radius-sm);min-width:64px}.pa-song-block-name{font-size:10px;font-weight:700;color:var(--text)}.pa-song-block-actions{display:flex;gap:2px}.pa-song-action{width:16px;height:16px;border-radius:2px;background:var(--bg3);color:var(--text3);font-size:10px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center}.pa-song-action:hover:not(:disabled){background:var(--accent);color:#fff}.pa-song-action.danger:hover{background:var(--danger)}.pa-song-action:disabled{opacity:.3;cursor:default}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000a6;display:flex;align-items:center;justify-content:center;z-index:300;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.export-dialog{background:var(--bg1);border:1px solid var(--border2);border-radius:var(--radius);width:320px;overflow:hidden;box-shadow:0 24px 64px #0009}.export-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--bg2);border-bottom:1px solid var(--border);font-size:13px;font-weight:700;color:var(--text);letter-spacing:.06em}.export-close-btn{width:22px;height:22px;border-radius:3px;background:var(--bg3);color:var(--text2);font-size:16px;border:1px solid var(--border);line-height:1}.export-close-btn:hover{background:var(--danger);color:#fff}.export-body{padding:16px;display:flex;flex-direction:column;gap:12px}.export-field{display:flex;flex-direction:column;gap:6px}.export-label{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.1em}.export-loop-row{display:flex;gap:6px}.export-loop-btn{flex:1;padding:6px 4px;background:var(--bg3);color:var(--text2);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:12px;font-weight:600;transition:background .15s,color .15s,border-color .15s}.export-loop-btn:hover:not(:disabled){background:var(--bg2);color:var(--text)}.export-loop-btn.active{background:var(--accent);color:#fff;border-color:var(--accent2)}.export-loop-btn:disabled{opacity:.4;cursor:default}.export-info{font-size:11px;color:var(--text3);text-align:center;font-family:var(--font-mono)}.export-progress-wrap{position:relative;height:28px;background:var(--bg3);border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--border)}.export-progress-bar{position:absolute;top:0;right:0;bottom:0;left:0;width:0;background:linear-gradient(90deg,var(--accent),#ec4899);transition:width .15s linear}.export-progress-label{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5);mix-blend-mode:normal}.export-start-btn{width:100%;padding:10px;background:linear-gradient(135deg,var(--accent),#ec4899);color:#fff;font-size:13px;font-weight:700;border-radius:var(--radius-sm);letter-spacing:.04em;transition:opacity .15s}.export-start-btn:hover{opacity:.88}.export-status-msg{text-align:center;font-size:12px;font-weight:600;padding:8px;border-radius:var(--radius-sm)}.export-status-msg.success{background:#22c55e26;color:var(--play)}.export-status-msg.error{background:#ef444426;color:var(--danger)}.step-btn.on.prob{border-style:dashed;border-color:#ffffff73!important}.step-prob-label{position:absolute;bottom:1px;left:0;right:0;font-size:7px;text-align:center;color:#ffffffbf;font-family:var(--font-mono);pointer-events:none;line-height:1}.snm-section{padding:8px 0;border-top:1px solid var(--border)}.snm-section:first-child{border-top:none;padding-top:0}.snm-section-title{font-size:9px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.1em;padding:0 8px 6px}.snm-prob-row{display:flex;gap:4px;padding:0 8px}.snm-prob-btn{flex:1;padding:5px 2px;background:var(--bg3);color:var(--text2);border:1px solid var(--border);border-radius:3px;font-size:11px;font-weight:600;transition:background .12s,color .12s}.snm-prob-btn:hover{background:var(--bg2);color:var(--text)}.snm-prob-btn.active{background:var(--accent);color:#fff;border-color:var(--accent2)}.btn-history{position:relative;font-size:14px}.btn-icon:disabled{opacity:.35;cursor:not-allowed}.btn-icon:disabled:hover{background:var(--bg3);color:var(--text2)}.history-badge{position:absolute;top:3px;right:3px;background:var(--accent);color:#fff;font-size:7px;font-weight:700;line-height:1;padding:1px 3px;border-radius:4px;pointer-events:none;min-width:10px;text-align:center}.midi-status{font-size:10px;font-weight:700;padding:4px 8px;border-radius:var(--radius-sm);border:1px solid var(--border);color:var(--text3);white-space:nowrap;letter-spacing:.05em;text-transform:uppercase}.midi-connected{border-color:var(--play);color:var(--play);background:#22c55e14}.midi-ready{border-color:var(--border2);color:var(--text2)}.midi-denied{border-color:var(--danger);color:var(--danger);background:#ef444414}.midi-unsupported{display:none}@media(max-width:900px){.velocity-lane{padding-left:274px}}@media(max-width:768px){.track-meta,.track-meta-header{width:120px}.track-meta-row,.knob-wrap{display:none}.track-controls{width:50px;justify-content:center;padding:0 4px}.track-controls-header{width:50px}.ms-btns{gap:6px}.ms-btn{width:36px;height:36px;font-size:11px}.track-actions{padding:0 4px;gap:4px}.track-action-btn{width:28px;height:28px;font-size:13px}.step-grid{overflow-x:auto;-webkit-overflow-scrolling:touch;min-width:0}.step-btn{flex:1;min-width:22px;height:40px}.velocity-lane{padding-left:184px}.app-header{flex-wrap:wrap;gap:8px;padding:8px 12px}.app-logo{order:1}.project-name-wrap{order:2;flex:1}.header-actions{order:2;flex-wrap:wrap}.transport-bar{order:3;flex:0 0 100%;overflow-x:auto}}@media(max-width:480px){.track-meta,.track-meta-header{width:90px}.track-name-input{font-size:11px}.track-controls,.track-controls-header{width:44px}.ms-btn{width:32px;height:32px}.step-btn{min-width:18px}.velocity-lane{padding-left:148px}.transport-bar{flex-wrap:nowrap;overflow-x:auto}}.btn-generate{font-size:15px}.btn-generate.active{color:#facc15;background:var(--bg2)}.generate-panel{background:var(--bg1);border-bottom:1px solid var(--border);padding:10px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}.generate-panel-header{display:flex;align-items:center;gap:8px;flex-shrink:0}.generate-panel-title{font-size:12px;font-weight:700;color:var(--text2);letter-spacing:.04em;text-transform:uppercase}.generate-panel-close{background:none;color:var(--text3);font-size:16px;line-height:1;padding:0 3px;border-radius:var(--radius-sm);transition:color .15s}.generate-panel-close:hover{color:var(--text)}.genre-pills{display:flex;gap:6px;flex-wrap:wrap;flex:1}.genre-pill{padding:5px 11px;background:var(--bg3);color:var(--text2);border:1px solid var(--border);border-radius:50px;font-size:11px;font-weight:600;transition:background .13s,color .13s,border-color .13s;white-space:nowrap}.genre-pill:hover{background:var(--bg2);color:var(--text)}.genre-pill.active{background:var(--accent);color:#fff;border-color:var(--accent2)}.generate-panel-footer{display:flex;align-items:center;gap:10px;flex-shrink:0}.generate-btn{padding:6px 16px;background:linear-gradient(135deg,var(--accent),#ec4899);color:#fff;font-size:12px;font-weight:700;border-radius:50px;letter-spacing:.04em;transition:opacity .15s,transform .1s;white-space:nowrap}.generate-btn:hover{opacity:.88;transform:scale(1.03)}.generate-btn:active{transform:scale(.97)}.generate-note{font-size:10px;color:var(--text3);white-space:nowrap}