*,*: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;--accent-rgb: 124 58 237;--accent-alt: #ec4899;--shadow: rgba(0,0,0,.4);--shadow-strong: rgba(0,0,0,.6);--modal-overlay: rgba(0,0,0,.65);--start-glow: #1a0a3a}:root[data-theme=light]{--bg0: #f5f5fa;--bg1: #ebebf5;--bg2: #e2e2f0;--bg3: #d0d0e8;--border: #c0c0e0;--border2: #a8a8d0;--text: #1a1a2e;--text2: #4a4a6a;--text3: #7070a0;--shadow: rgba(0,0,0,.08);--shadow-strong: rgba(0,0,0,.15);--modal-overlay: rgba(0,0,0,.4);--start-glow: #ead8ff}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%,var(--start-glow) 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)}.metro-btn{height:22px;padding:0 8px;background:var(--bg3);color:var(--text2);font-weight:700;font-size:10px;letter-spacing:.06em;border-radius:3px;border:1px solid var(--border);line-height:1;transition:background .15s,color .15s,border-color .15s,box-shadow .15s}.metro-btn:hover{background:var(--bg2);color:var(--text)}.metro-btn.active{background:var(--accent);color:#fff;border-color:var(--accent2);box-shadow:0 0 6px var(--accent2)}.rec-btn{height:34px;padding:0 10px;background:var(--bg3);color:var(--danger);font-size:10px;font-weight:700;letter-spacing:.08em;border-radius:var(--radius-sm);border:1px solid var(--danger);transition:background .15s,box-shadow .15s,opacity .15s}.rec-btn:hover:not(:disabled){background:color-mix(in srgb,var(--danger) 20%,var(--bg3))}.rec-btn:disabled{opacity:.3;cursor:not-allowed}.rec-btn.active{background:var(--danger);color:#fff;border-color:var(--danger);animation:rec-pulse 1s ease-in-out infinite}@keyframes rec-pulse{0%,to{box-shadow:0 0 #ef444400}50%{box-shadow:0 0 0 4px #ef444473}}.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)}.key-select{width:54px}.scale-select{width:90px}.resolution-btns{display:flex;gap:2px}.resolution-btn{height:22px;padding:0 7px;background:var(--bg3);color:var(--text2);font-size:10px;font-family:var(--font-mono);font-weight:600;border:1px solid var(--border);border-radius:var(--radius-sm);letter-spacing:.02em;line-height:1;transition:background .15s,color .15s,border-color .15s,box-shadow .15s}.resolution-btn:hover{background:var(--bg2);color:var(--text)}.resolution-btn.active{background:var(--accent);color:#fff;border-color:var(--accent2);box-shadow:0 0 6px color-mix(in srgb,var(--accent) 50%,transparent)}.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:149px;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;min-width:0;text-overflow:ellipsis}.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-stepcount-row{display:flex;align-items:center;gap:4px}.track-stepcount-label{font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;flex-shrink:0}.track-stepcount-btns{display:flex;gap:2px}.track-stepcount-btn{width:24px;height:16px;border-radius:3px;background:var(--bg3);color:var(--text3);font-size:9px;font-weight:700;font-family:var(--font-mono);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;transition:background .12s,color .12s,border-color .12s}.track-stepcount-btn:hover{background:var(--bg2);color:var(--text2);border-color:var(--border2)}.track-stepcount-btn.active{background:color-mix(in srgb,var(--accent) 25%,var(--bg3));color:var(--accent2);border-color:var(--accent)}.track-controls{width:145px;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;position:relative}.waveform-canvas{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:.35;border-radius:4px}.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)}.track-action-btn.eucl-btn{width:auto;padding:0 4px;font-size:10px;letter-spacing:.03em}.eucl-panel{display:flex;align-items:center;gap:8px;padding:5px 10px;background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);flex-wrap:wrap;font-size:11px}.eucl-label{font-size:9px;font-weight:700;letter-spacing:.1em;color:var(--accent2, #7c6af7);text-transform:uppercase;flex-shrink:0}.eucl-group{display:flex;align-items:center;gap:3px}.eucl-field-label{font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-right:2px}.eucl-spin{width:18px;height:18px;border-radius:3px;background:var(--bg3);border:1px solid var(--border);color:var(--text2);font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;flex-shrink:0}.eucl-spin:hover{background:var(--bg1);color:var(--text)}.eucl-val{min-width:20px;text-align:center;color:var(--text);font-weight:700;font-family:var(--font-mono, monospace);font-size:12px}.eucl-apply{padding:2px 8px;border-radius:3px;background:var(--accent2, #7c6af7);color:#fff;border:none;font-size:11px;font-weight:700;cursor:pointer;height:20px}.eucl-apply:hover{filter:brightness(1.15)}.eucl-close{width:18px;height:18px;border-radius:3px;background:transparent;border:1px solid var(--border);color:var(--text3);font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;margin-left:auto;flex-shrink:0}.eucl-close:hover{background:var(--danger);color:#fff;border-color:var(--danger)}.lfo-panel{display:flex;align-items:center;gap:8px;padding:5px 10px;background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);flex-wrap:wrap;font-size:11px}.lfo-label{font-size:9px;font-weight:700;letter-spacing:.1em;color:#06b6d4;text-transform:uppercase;flex-shrink:0}.lfo-group{display:flex;align-items:center;gap:3px}.lfo-field-label{font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-right:2px;flex-shrink:0}.lfo-param-select{height:20px;padding:0 4px;border-radius:3px;background:var(--bg3);border:1px solid var(--border);color:var(--text2);font-size:10px;cursor:pointer}.lfo-shape-btn,.lfo-rate-btn{height:20px;min-width:26px;padding:0 4px;border-radius:3px;background:var(--bg3);border:1px solid var(--border);color:var(--text2);font-size:10px;cursor:pointer;transition:background .1s,color .1s,border-color .1s}.lfo-shape-btn.active,.lfo-rate-btn.active{background:#0e7490;border-color:#06b6d4;color:#fff}.lfo-shape-btn:hover:not(.active),.lfo-rate-btn:hover:not(.active){background:var(--bg1);color:var(--text)}.lfo-depth-row{display:flex;align-items:center;gap:4px}.lfo-depth-slider{width:70px;height:4px;accent-color:#06b6d4;cursor:pointer}.lfo-depth-val{min-width:28px;text-align:right;color:var(--text);font-family:var(--font-mono, monospace);font-size:11px}.lfo-enable-btn{height:20px;padding:0 6px;border-radius:3px;background:var(--bg3);border:1px solid var(--border);color:var(--text2);font-size:10px;font-weight:700;cursor:pointer;letter-spacing:.05em;transition:background .1s,color .1s,border-color .1s}.lfo-enable-btn.active{background:#06b6d4;border-color:#06b6d4;color:#fff}.lfo-enable-btn:hover:not(.active){background:var(--bg1);color:var(--text)}.lfo-close{width:18px;height:18px;border-radius:3px;background:transparent;border:1px solid var(--border);color:var(--text3);font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;margin-left:auto;flex-shrink:0}.lfo-close: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:var(--modal-overlay);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:120px}.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))}.track-row.reorder-over{border-top:2px solid var(--accent)}.drop-hint{font-size:11px;color:var(--accent2);text-align:center;padding:2px 0;letter-spacing:.05em}.track-drag-handle{cursor:grab;color:var(--text3);font-size:14px;padding:0 4px 0 0;-webkit-user-select:none;user-select:none;flex-shrink:0;line-height:1;transition:color .15s}.track-drag-handle:hover{color:var(--text2)}.track-drag-handle:active{cursor:grabbing}.track-name-row{display:flex;align-items:center;gap:2px;width:100%}.track-name-row .track-name-input{flex:1;width:auto;min-width:0}.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 375px;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}.auto-lane-row{display:flex;gap:2px;padding:4px 6px 4px 375px;height:40px;background:var(--bg1);border-top:1px solid var(--border);margin-bottom:2px;position:relative}.auto-lane-bar-wrap{flex:1;display:flex;align-items:flex-end;cursor:ns-resize;border-left:1px solid transparent}.auto-lane-bar-wrap.beat-start{border-left-color:var(--border)}.auto-lane-bar{width:100%;border-radius:2px 2px 0 0;background:color-mix(in srgb,var(--accent) 55%,var(--bg3));opacity:.8;transition:height .08s}.auto-lane-bar.playing,.auto-lane-bar-wrap.playing .auto-lane-bar{background:var(--accent2);opacity:1;outline:1px solid #fff}.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 var(--shadow-strong);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)}.snm-key.out-of-scale{opacity:.25}.snm-key.out-of-scale:hover{background:inherit;color:inherit}.snm-key.natural.out-of-scale:hover{background:var(--bg3);color:var(--text2)}.snm-key.sharp.out-of-scale:hover{background:var(--bg0);color:var(--text3)}.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;flex-direction:column;align-items:stretch;gap:4px;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:110px}.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-top{display:flex;align-items:center;gap:6px}.pa-pattern-name{font-size:11px;font-weight:600;color:var(--text);flex:1}.pa-bpm-row{display:flex;align-items:center;gap:3px}.pa-bpm-label{font-size:9px;color:var(--text3);font-weight:600;text-transform:uppercase;letter-spacing:.06em;flex-shrink:0}.pattern-bpm-input{width:46px;font-size:10px;text-align:center;background:var(--bg0);border:1px solid var(--border);border-radius:3px;color:var(--text3);padding:1px 3px;-moz-appearance:textfield}.pattern-bpm-input::-webkit-inner-spin-button,.pattern-bpm-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.pattern-bpm-input:focus{border-color:var(--accent);color:var(--text);outline:none}.pattern-bpm-input.has-value{color:var(--text);border-color:var(--pat-color, var(--accent))}.pa-bpm-clear{width:14px;height:14px;border-radius:50%;background:var(--bg3);color:var(--text3);font-size:10px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;padding:0;line-height:1;flex-shrink:0}.pa-bpm-clear:hover{background:var(--danger);color:#fff;border-color:var(--danger)}.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-dup-btn{width:auto;padding:0 5px;font-size:9px;font-weight:700;letter-spacing:.02em}.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-bpm{font-size:9px;color:var(--pat-color, var(--accent));font-weight:600}.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:var(--modal-overlay);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 var(--shadow-strong)}.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}.step-roll-label{position:absolute;top:2px;left:0;right:0;font-size:7px;text-align:center;color:#ffffffe6;font-family:var(--font-mono);font-weight:700;pointer-events:none;line-height:1}.step-btn.on.roll-2{border-top:2px solid rgba(255,255,255,.55)}.step-btn.on.roll-4{border-top:2px solid rgba(250,200,50,.8)}.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,.auto-lane-row{padding-left:294px}}@media(max-width:768px){.track-meta,.track-meta-header{width:120px}.track-meta-row{flex-direction:column;align-items:stretch;gap:3px}.inst-select{width:100%;max-width:100%;font-size:10px}.note-select{width:100%}.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,.auto-lane-row{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,.auto-lane-row{padding-left:148px}.transport-bar{flex-wrap:nowrap;overflow-x:auto}}.btn-sounds{height:34px;padding:0 10px;border-radius:var(--radius-sm);background:var(--bg3);color:var(--text2);font-size:10px;font-weight:800;letter-spacing:.12em;border:1px solid var(--border);transition:background .15s,color .15s;white-space:nowrap}.btn-sounds:hover{background:var(--accent);color:#fff}.btn-sounds.active{background:var(--accent);color:#fff;border-color:var(--accent2)}.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}.spectrum-visualizer{width:100%;height:60px;background:var(--bg1);border-bottom:1px solid var(--bg2);flex-shrink:0}.spectrum-canvas{width:100%;height:60px;display:block}.btn-viz{font-size:18px;letter-spacing:-.05em}.btn-song{font-size:10px;font-weight:700;letter-spacing:.04em}.song-editor{background:var(--bg1);border-bottom:1px solid var(--border);padding:8px 16px;display:flex;flex-direction:column;gap:8px;flex-shrink:0}.song-slots-row{display:flex;gap:4px;overflow-x:auto;min-height:48px;align-items:center;padding-bottom:2px;-webkit-overflow-scrolling:touch}.song-empty{font-size:11px;color:var(--text3);font-style:italic;white-space:nowrap;padding:4px 0}.song-slot{width:80px;min-width:80px;height:48px;flex-shrink:0;border-radius:var(--radius);background:color-mix(in srgb,var(--slot-color, var(--accent)) 20%,var(--bg2));border:1px solid var(--slot-color, var(--accent));position:relative;display:flex;align-items:center;justify-content:center;transition:border-color .12s,box-shadow .12s}.song-slot.playing{border-color:#fff;box-shadow:0 0 0 2px var(--slot-color, var(--accent)),0 0 10px color-mix(in srgb,var(--slot-color, var(--accent)) 70%,transparent)}.song-slot-name{font-size:11px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:64px;text-align:center;pointer-events:none;padding:0 16px 0 4px}.song-slot-remove{position:absolute;top:3px;right:3px;width:14px;height:14px;border-radius:50%;background:#00000073;color:var(--text2);font-size:9px;line-height:1;border:none;cursor:pointer;opacity:0;transition:opacity .12s,background .12s;padding:0;display:flex;align-items:center;justify-content:center}.song-slot:hover .song-slot-remove{opacity:1}.song-slot-remove:hover{background:var(--danger);color:#fff}.song-add-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.song-add-label{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;flex-shrink:0}.song-add-btn{padding:4px 10px;border-radius:20px;background:var(--bg3);color:var(--text2);font-size:11px;font-weight:600;border:1px solid var(--border);transition:background .12s,color .12s,border-color .12s;white-space:nowrap}.song-add-btn:hover{background:color-mix(in srgb,var(--btn-color, var(--accent)) 25%,var(--bg3));border-color:var(--btn-color, var(--accent));color:var(--text)}.song-add-btn.active{border-color:var(--btn-color, var(--accent));color:var(--btn-color, var(--accent))}.song-clear-btn{padding:4px 10px;border-radius:20px;background:var(--bg3);color:var(--danger);font-size:11px;font-weight:600;border:1px solid var(--danger);transition:background .12s,color .12s;white-space:nowrap;margin-left:auto}.song-clear-btn:hover{background:var(--danger);color:#fff}.btn-cheatsheet{font-size:15px;font-weight:700}.cheatsheet-panel{background:var(--bg1);border:1px solid var(--border2);border-radius:var(--radius);width:380px;max-width:95vw;max-height:80vh;overflow-y:auto;box-shadow:0 24px 64px var(--shadow-strong)}.cheatsheet-title{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;position:sticky;top:0;z-index:1}.cheatsheet-body{padding:12px 16px;display:flex;flex-direction:column;gap:14px}.cheatsheet-group{display:flex;flex-direction:column;gap:4px}.cheatsheet-group-title{font-size:9px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.12em;padding-bottom:4px;border-bottom:1px solid var(--border);margin-bottom:2px}.cheatsheet-table{width:100%;border-collapse:collapse}.cheatsheet-row td{padding:4px 0;vertical-align:middle}.cheatsheet-key{width:48%;padding-right:12px!important}.cheatsheet-key kbd{display:inline-block;background:var(--bg3);border:1px solid var(--border2);border-radius:var(--radius-sm);padding:2px 7px;font-family:var(--font-mono);font-size:11px;color:var(--text);white-space:nowrap;box-shadow:0 1px 0 var(--border2)}.cheatsheet-action{font-size:12px;color:var(--text2)}.share-import-input{display:none}.btn-share-link{font-size:14px}.share-toast{display:flex;align-items:center;gap:10px;padding:8px 16px;background:color-mix(in srgb,var(--accent) 12%,var(--bg1));border-bottom:1px solid var(--accent);flex-shrink:0;flex-wrap:wrap}.share-toast-msg{font-size:12px;color:var(--text2);flex:1;min-width:160px}.share-toast-btn{padding:5px 14px;background:var(--accent);color:#fff;border-radius:var(--radius-sm);font-size:11px;font-weight:700;border:none;transition:background .15s;white-space:nowrap}.share-toast-btn:hover{background:var(--accent2)}.share-toast-dismiss{padding:5px 10px;background:transparent;color:var(--text3);border-radius:var(--radius-sm);font-size:11px;border:1px solid var(--border);transition:color .15s,border-color .15s;white-space:nowrap}.share-toast-dismiss:hover{color:var(--text);border-color:var(--border2)}.export-mode-toggle{display:flex;gap:0;border-bottom:1px solid var(--border);background:var(--bg2)}.export-mode-btn{flex:1;padding:8px 12px;background:transparent;color:var(--text3);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border:none;border-bottom:2px solid transparent;transition:color .15s,border-color .15s,background .15s}.export-mode-btn:hover:not(:disabled){color:var(--text);background:var(--bg3)}.export-mode-btn.active{color:var(--accent2);border-bottom-color:var(--accent);background:var(--bg1)}.export-mode-btn:disabled{opacity:.4;cursor:not-allowed}.export-stem-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.export-stems-all-btn{font-size:10px;font-weight:600;color:var(--text3);background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-sm);padding:2px 8px;transition:color .15s,border-color .15s}.export-stems-all-btn:hover:not(:disabled){color:var(--accent2);border-color:var(--accent)}.export-stems-all-btn:disabled{opacity:.4;cursor:not-allowed}.export-stem-list{display:flex;flex-direction:column;gap:2px;max-height:180px;overflow-y:auto;border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px;background:var(--bg0)}.export-stem-item{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:3px;cursor:pointer;transition:background .12s;-webkit-user-select:none;user-select:none}.export-stem-item:hover{background:var(--bg3)}.export-stem-item.checked{background:color-mix(in srgb,var(--accent) 12%,var(--bg0))}.export-stem-check{accent-color:var(--accent);width:14px;height:14px;flex-shrink:0;cursor:pointer}.export-stem-name{font-size:12px;color:var(--text2);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.export-stem-item.checked .export-stem-name{color:var(--text)}.btn-drumpad{font-size:17px}.btn-drumpad.active{background:var(--accent);color:#fff}.drumpad-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000e0;z-index:500;display:flex;flex-direction:column;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.drumpad-container{display:flex;flex-direction:column;width:100%;height:100%;overflow:hidden}.drumpad-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--bg1);border-bottom:1px solid var(--border);flex-shrink:0}.drumpad-title{font-size:15px;font-weight:900;letter-spacing:.12em;color:var(--text);text-transform:uppercase}.drumpad-close{width:32px;height:32px;border-radius:50%;background:var(--bg3);color:var(--text2);font-size:16px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}.drumpad-close:hover{background:var(--danger);color:#fff}.drumpad-grid{flex:1;display:flex;flex-wrap:wrap;align-content:flex-start;gap:10px;padding:14px;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y}.drumpad-pad{flex:1 1 160px;max-width:100%;min-height:120px;border-radius:14px;background:color-mix(in srgb,var(--pad-color) 22%,var(--bg2));border:2px solid var(--pad-color);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#fff;touch-action:manipulation;transition:transform .07s,filter .07s,box-shadow .07s;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;box-shadow:0 4px 20px color-mix(in srgb,var(--pad-color) 25%,transparent);padding:12px 8px}.drumpad-pad:active,.drumpad-pad.playing{transform:scale(.94);filter:brightness(1.35);box-shadow:0 0 28px color-mix(in srgb,var(--pad-color) 55%,transparent)}.drumpad-pad-name{font-size:15px;font-weight:800;letter-spacing:.03em;text-align:center;line-height:1.25;word-break:break-word;-webkit-hyphens:auto;hyphens:auto;padding:0 4px}.drumpad-pad-note{font-size:11px;color:#ffffff8c;font-family:var(--font-mono);letter-spacing:.04em}@media(max-width:540px){.drumpad-grid{gap:8px;padding:10px}.drumpad-pad{flex:0 1 calc(50% - 4px);min-height:100px}}@media(min-width:960px){.drumpad-grid{max-width:960px;margin:0 auto;width:100%}.drumpad-pad{flex-basis:200px}}.btn-mixer{font-size:10px;font-weight:800;letter-spacing:.04em}.mixer-panel{background:var(--bg1);border-bottom:1px solid var(--border);flex-shrink:0;display:flex;flex-direction:column}.mixer-header{display:flex;align-items:center;justify-content:space-between;padding:8px 16px 6px;border-bottom:1px solid var(--border)}.mixer-title{font-size:11px;font-weight:800;color:var(--text3);letter-spacing:.18em;text-transform:uppercase}.mixer-close{width:22px;height:22px;border-radius:50%;background:var(--bg3);color:var(--text2);font-size:13px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;line-height:1}.mixer-close:hover{background:var(--danger);color:#fff;border-color:var(--danger)}.mixer-strips-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:10px 16px 12px}.mixer-strips{display:flex;gap:10px;min-width:max-content}.mixer-strip{display:flex;flex-direction:column;align-items:center;gap:6px;width:72px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding-bottom:8px;overflow:hidden;transition:border-color .15s}.mixer-strip:hover{border-color:var(--border2)}.mixer-strip--muted{opacity:.45}.mixer-strip-bar{width:100%;height:3px;background:var(--strip-color, var(--accent));flex-shrink:0}.mixer-strip-name{font-size:10px;font-weight:600;color:var(--text2);text-align:center;width:100%;padding:0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mixer-pan-section{display:flex;flex-direction:column;align-items:center;gap:3px;width:100%;padding:0 6px}.mixer-pan-labels{display:flex;justify-content:space-between;width:100%;font-size:8px;color:var(--text3);font-family:var(--font-mono);padding:0 2px}.mixer-pan-slider{width:100%;accent-color:var(--strip-color, var(--accent));cursor:pointer}.mixer-pan-val{font-size:9px;color:var(--text3);font-family:var(--font-mono);min-width:32px;text-align:center}.mixer-knob{position:relative;width:28px;height:28px;border-radius:50%;background:var(--bg3);border:2px solid var(--border2);flex-shrink:0}.mixer-knob-indicator{position:absolute;top:2px;left:50%;transform:translate(-50%) rotate(var(--knob-deg, 0deg));transform-origin:bottom center;width:2px;height:10px;background:var(--strip-color, var(--accent));border-radius:1px}.mixer-fader-section{display:flex;align-items:center;justify-content:center;height:80px}.mixer-fader{-webkit-appearance:slider-vertical;-moz-appearance:slider-vertical;appearance:slider-vertical;writing-mode:vertical-lr;direction:rtl;width:22px;height:76px;accent-color:var(--strip-color, var(--accent));cursor:pointer}.mixer-vol-val{font-size:10px;color:var(--text3);font-family:var(--font-mono);text-align:center}.mixer-mute-btn{width:28px;height:22px;border-radius:3px;background:var(--bg3);color:var(--text3);font-size:9px;font-weight:800;letter-spacing:.06em;border:1px solid var(--border);transition:background .15s,color .15s,border-color .15s}.mixer-mute-btn:hover{color:var(--mute-active);border-color:var(--mute-active)}.mixer-mute-btn--active{background:var(--mute-active);color:#000;border-color:var(--mute-active)}.send-section{background:var(--bg1);border-top:1px solid var(--border);padding:6px 12px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}.send-section-label{font-size:9px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.14em;flex-shrink:0;min-width:30px}.send-row{display:flex;align-items:center;gap:6px}.send-label{font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;width:32px;flex-shrink:0}.send-slider{width:90px;accent-color:var(--accent2);cursor:pointer}.send-val{font-size:9px;color:var(--text3);font-family:var(--font-mono);width:20px;text-align:right}.btn-collab{position:relative}.btn-collab.in-room{background:#166534;color:#4ade80;border:1px solid #16a34a}.btn-collab.in-room:hover{background:#15803d}.collab-header-avatars{display:flex;gap:3px;align-items:center}.collab-avatar{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;border:1.5px solid rgba(255,255,255,.25);flex-shrink:0;cursor:default}.collab-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1100;display:flex;align-items:center;justify-content:center;background:var(--modal-overlay);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.collab-modal{background:var(--bg1);border:1px solid var(--border2);border-radius:12px;padding:24px;width:360px;max-width:95vw;display:flex;flex-direction:column;gap:16px;box-shadow:0 20px 60px var(--shadow-strong)}.collab-modal-header{display:flex;align-items:center;justify-content:space-between}.collab-modal-title{font-size:15px;font-weight:700;color:var(--text);letter-spacing:.04em;text-transform:uppercase}.collab-modal-close{background:none;border:none;color:var(--text2);font-size:16px;cursor:pointer;padding:4px 8px;border-radius:var(--radius-sm)}.collab-modal-close:hover{background:var(--bg3);color:var(--text)}.collab-description{font-size:13px;color:var(--text2);line-height:1.5}.collab-room-info{display:flex;align-items:center;gap:10px;background:var(--bg3);border-radius:var(--radius);padding:10px 14px}.collab-room-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text3)}.collab-room-id{font-family:var(--font-mono);font-size:18px;font-weight:700;color:#4ade80;letter-spacing:.2em}.collab-link-row{display:flex;gap:8px}.collab-link-input{flex:1;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text2);font-size:11px;padding:6px 10px;font-family:var(--font-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.collab-copy-btn{background:var(--accent);color:#fff;border:none;border-radius:var(--radius-sm);padding:6px 12px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .15s}.collab-copy-btn:hover{background:var(--accent2)}.collab-peers-section{display:flex;flex-direction:column;gap:8px}.collab-peers-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text3)}.collab-avatars{display:flex;gap:6px;flex-wrap:wrap}.collab-start-btn{background:#16a34a;color:#fff;border:none;border-radius:var(--radius);padding:12px;font-size:14px;font-weight:700;cursor:pointer;text-transform:uppercase;letter-spacing:.06em;transition:background .15s}.collab-start-btn:hover{background:#15803d}.collab-leave-btn{background:var(--bg3);color:var(--danger);border:1px solid var(--danger);border-radius:var(--radius);padding:10px;font-size:13px;font-weight:600;cursor:pointer;transition:background .15s}.theme-controls{position:relative}.theme-popover{position:absolute;top:100%;right:0;margin-top:4px;background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:12px;z-index:200;min-width:188px;box-shadow:0 4px 20px var(--shadow-strong)}.theme-section-label{font-size:9px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px}.theme-toggle{display:flex;gap:6px;margin-bottom:12px}.theme-toggle button{flex:1;padding:6px 4px;border-radius:6px;border:1px solid var(--border);background:var(--bg3);color:var(--text);cursor:pointer;font-size:11px;font-weight:600;transition:background .15s,color .15s,border-color .15s}.theme-toggle button:hover{border-color:var(--border2)}.theme-toggle button.active{background:var(--accent);color:#fff;border-color:var(--accent)}.accent-swatches{display:flex;gap:6px;flex-wrap:wrap}.accent-swatch{width:22px;height:22px;border-radius:50%;cursor:pointer;border:2px solid transparent;outline:2px solid transparent;transition:border-color .15s,outline-color .15s,transform .1s}.accent-swatch:hover{transform:scale(1.15)}.accent-swatch.active{border-color:#fff;outline-color:var(--border2)}.collab-leave-btn:hover{background:#ef44441f}.sample-browser{display:flex;flex-direction:column;background:var(--bg1);border-bottom:1px solid var(--border);flex-shrink:0;max-height:340px;overflow:hidden}.sb-header{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid var(--border);flex-shrink:0}.sb-title{font-size:12px;font-weight:700;color:var(--text2);letter-spacing:.1em;text-transform:uppercase;flex-shrink:0}.sb-search{flex:1;background:var(--bg0);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px 10px;font-size:12px;max-width:240px}.sb-search:focus{border-color:var(--accent);outline:none}.sb-search::placeholder{color:var(--text3)}.sb-search::-webkit-search-cancel-button{-webkit-appearance:none}.sb-close{margin-left:auto}.sb-body{display:flex;flex:1;overflow:hidden}.sb-sidebar{width:120px;flex-shrink:0;border-right:1px solid var(--border);overflow-y:auto;padding:6px 0;display:flex;flex-direction:column;gap:2px}.sb-pack-btn{display:flex;align-items:center;gap:7px;padding:7px 10px;background:transparent;color:var(--text2);font-size:11px;font-weight:600;text-align:left;border-radius:0;transition:background .12s,color .12s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sb-pack-btn:hover{background:var(--bg3);color:var(--text)}.sb-pack-btn.active{background:color-mix(in srgb,var(--pack-color, var(--accent)) 18%,var(--bg2));color:var(--text);border-left:3px solid var(--pack-color, var(--accent));padding-left:7px}.sb-pack-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.sb-main{flex:1;display:flex;flex-direction:column;overflow:hidden}.sb-cats{display:flex;gap:4px;padding:6px 10px;border-bottom:1px solid var(--border);flex-shrink:0;flex-wrap:wrap}.sb-cat-pill{padding:3px 10px;border-radius:50px;background:var(--bg3);color:var(--text2);border:1px solid var(--border);font-size:11px;font-weight:600;transition:background .12s,color .12s,border-color .12s;white-space:nowrap}.sb-cat-pill:hover{background:var(--bg2);color:var(--text)}.sb-cat-pill.active{background:var(--accent);color:#fff;border-color:var(--accent2)}.sb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:6px;padding:8px 10px;overflow-y:auto;flex:1;align-content:start}.sb-empty{color:var(--text3);font-size:12px;grid-column:1 / -1;padding:20px 0;text-align:center}.sb-card{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:8px 9px 6px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:background .12s,border-color .12s;position:relative;-webkit-user-select:none;user-select:none}.sb-card:hover{background:var(--bg3);border-color:var(--border2)}.sb-card.playing{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--bg2))}.sb-card.error{border-color:var(--danger)}.sb-card-icon{font-size:16px;line-height:1;width:20px;text-align:center;flex-shrink:0;font-variant-numeric:tabular-nums}.sb-card-name{font-size:11px;font-weight:600;color:var(--text);line-height:1.2;word-break:break-word}.sb-card-cat{font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em}.sb-card-actions{display:flex;gap:3px;margin-top:2px;align-self:stretch}.sb-fav-btn{flex:0;padding:2px 5px;background:var(--bg3);color:var(--text3);border:1px solid var(--border);border-radius:3px;font-size:11px;transition:color .12s,background .12s}.sb-fav-btn:hover{color:#facc15}.sb-fav-btn.active{color:#facc15;background:#facc151f;border-color:#facc1566}.sb-add-btn{flex:1;padding:2px 4px;background:var(--accent);color:#fff;border:none;border-radius:3px;font-size:13px;font-weight:700;line-height:1;transition:background .12s,transform .08s}.sb-add-btn:hover{background:var(--accent2);transform:scale(1.05)}.sb-add-btn:active{transform:scale(.96)}.master-scale-group{gap:5px}.master-scale-select{background:var(--bg0);color:var(--accent2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:3px 5px;font-size:11px}.master-scale-select:focus{border-color:var(--accent);outline:none}.chord-panel{display:flex;align-items:center;gap:16px;padding:6px 12px;background:var(--bg1);border-top:1px solid var(--border);flex-wrap:wrap;margin-bottom:2px}.chord-type-section{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.chord-panel-label{font-size:9px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.1em;white-space:nowrap;flex-shrink:0}.chord-panel-note{font-size:9px;color:var(--text3);font-style:italic;white-space:nowrap}.chord-type-btns{display:flex;gap:3px;flex-wrap:wrap}.chord-type-btn{padding:2px 5px;height:22px;border-radius:3px;background:var(--bg3);color:var(--text2);font-size:9px;font-weight:700;border:1px solid var(--border);letter-spacing:.04em;transition:background .12s,color .12s,border-color .12s;min-width:30px}.chord-type-btn:hover{background:var(--bg2);color:var(--text);border-color:var(--border2)}.chord-type-btn.active{background:var(--chord-color, var(--accent));color:#fff;border-color:var(--chord-color, var(--accent))}.mini-keyboard-wrap{display:flex;align-items:center;gap:8px;flex-shrink:0}.mini-keyboard{position:relative;height:48px;flex-shrink:0}.mini-key{position:absolute;top:0;cursor:default}.mini-key.white{width:16px;height:48px;background:#d8d8e8;z-index:1;border:1px solid #888;border-radius:0 0 3px 3px;box-sizing:border-box}.mini-key.black{width:10px;height:30px;background:#1a1a2e;z-index:2;border:1px solid #000;border-radius:0 0 2px 2px;box-sizing:border-box}.mini-key.in-scale{box-shadow:0 0 4px color-mix(in srgb,var(--chord-color, var(--accent)) 60%,transparent)}.btn-signin{height:28px;padding:0 12px;background:var(--accent);color:#fff;font-size:11px;font-weight:700;letter-spacing:.06em;border-radius:var(--radius);border:1px solid var(--accent2);transition:background .15s,box-shadow .15s;white-space:nowrap;flex-shrink:0}.btn-signin:hover{background:var(--accent2);box-shadow:0 0 8px #7c3aed66}.btn-cloud{font-size:15px;opacity:.6;transition:opacity .15s,color .15s}.btn-cloud:hover{opacity:1;color:var(--accent2)}.btn-cloud.has-project{opacity:1;color:var(--accent)}.cloud-status{font-size:11px;font-weight:600;letter-spacing:.04em;padding:2px 6px;border-radius:var(--radius-sm);white-space:nowrap;flex-shrink:0}.cloud-status.saving{color:var(--text2);background:var(--bg3)}.cloud-status.saved{color:#22c55e;background:#22c55e1a}.auth-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--modal-overlay);display:flex;align-items:center;justify-content:center;z-index:1000;padding:16px}.auth-modal{position:relative;background:var(--bg1);border:1px solid var(--border2);border-radius:12px;padding:32px 28px 28px;width:100%;max-width:380px;box-shadow:0 24px 64px #00000080}.auth-close{position:absolute;top:12px;right:14px;background:transparent;color:var(--text3);font-size:16px;line-height:1;padding:4px 6px;border-radius:4px;transition:color .15s,background .15s}.auth-close:hover{color:var(--text);background:var(--bg3)}.auth-logo{font-size:22px;font-weight:900;letter-spacing:.15em;background:linear-gradient(135deg,#7c3aed,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:4px;text-align:center}.auth-tagline{color:var(--text2);font-size:13px;text-align:center;margin-bottom:20px}.auth-tabs{display:flex;gap:4px;background:var(--bg0);border-radius:var(--radius);padding:3px;margin-bottom:20px;border:1px solid var(--border)}.auth-tab{flex:1;padding:6px 0;font-size:12px;font-weight:600;letter-spacing:.04em;border-radius:4px;background:transparent;color:var(--text2);transition:background .15s,color .15s}.auth-tab:hover{color:var(--text)}.auth-tab.active{background:var(--accent);color:#fff}.auth-form{display:flex;flex-direction:column;gap:10px}.auth-input{width:100%;padding:10px 12px;background:var(--bg0);border:1px solid var(--border2);border-radius:var(--radius);color:var(--text);font-size:13px;transition:border-color .15s}.auth-input:focus{border-color:var(--accent)}.auth-input::placeholder{color:var(--text3)}.auth-error{padding:8px 12px;background:#ef44441f;border:1px solid rgba(239,68,68,.3);border-radius:var(--radius-sm);color:#ef4444;font-size:12px}.auth-submit{padding:10px;background:var(--accent);color:#fff;font-size:13px;font-weight:700;letter-spacing:.04em;border-radius:var(--radius);border:1px solid var(--accent2);transition:background .15s,box-shadow .15s,opacity .15s}.auth-submit:hover:not(:disabled){background:var(--accent2);box-shadow:0 0 12px #7c3aed66}.auth-submit:disabled{opacity:.5;cursor:not-allowed}.auth-divider{display:flex;align-items:center;gap:10px;margin:16px 0;color:var(--text3);font-size:11px}.auth-divider:before,.auth-divider:after{content:"";flex:1;height:1px;background:var(--border)}.auth-google{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:9px;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius);color:var(--text);font-size:13px;font-weight:600;transition:background .15s,border-color .15s}.auth-google:hover:not(:disabled){background:var(--bg3);border-color:var(--border2)}.auth-google:disabled{opacity:.5;cursor:not-allowed}.auth-fine-print{color:var(--text3);font-size:10px;text-align:center;margin-top:12px}.account-menu-wrap{position:relative;flex-shrink:0}.account-avatar-btn{width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;font-size:12px;font-weight:700;letter-spacing:.04em;border:2px solid var(--accent2);display:flex;align-items:center;justify-content:center;transition:box-shadow .15s,border-color .15s}.account-avatar-btn:hover{box-shadow:0 0 10px #7c3aed80}.account-dropdown{position:absolute;top:calc(100% + 6px);right:0;min-width:200px;background:var(--bg1);border:1px solid var(--border2);border-radius:var(--radius);box-shadow:0 8px 32px #00000073;z-index:500;overflow:hidden}.account-dropdown-header{padding:12px 14px 10px;display:flex;align-items:center;justify-content:space-between;gap:8px}.account-email{font-size:12px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.account-plan-badge{flex-shrink:0;font-size:10px;font-weight:700;letter-spacing:.06em;padding:2px 7px;border-radius:20px;background:var(--bg3);color:var(--text2);border:1px solid var(--border)}.account-plan-badge.pro{background:#eab30826;color:#eab308;border-color:#eab30866}.account-dropdown-divider{height:1px;background:var(--border)}.account-dropdown-item{display:block;width:100%;padding:9px 14px;text-align:left;font-size:12px;font-weight:500;color:var(--text);background:transparent;transition:background .12s}.account-dropdown-item:hover{background:var(--bg2)}.account-dropdown-item.upgrade{color:var(--accent2);font-weight:600}.account-dropdown-item.danger{color:var(--danger)}.account-dropdown-item.danger:hover{background:#ef444414}.projects-modal{position:relative;background:var(--bg1);border:1px solid var(--border2);border-radius:12px;padding:24px;width:100%;max-width:520px;max-height:80vh;display:flex;flex-direction:column;gap:16px;box-shadow:0 24px 64px #00000080}.projects-modal-header{display:flex;align-items:center;justify-content:space-between}.projects-modal-title{font-size:16px;font-weight:700;color:var(--text);letter-spacing:.04em}.projects-modal-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.projects-action-btn{padding:7px 14px;border-radius:var(--radius);font-size:12px;font-weight:600;background:var(--bg3);color:var(--text);border:1px solid var(--border2);transition:background .15s,border-color .15s}.projects-action-btn:hover{background:var(--bg2);border-color:var(--border2)}.projects-action-btn.primary{background:var(--accent);color:#fff;border-color:var(--accent2)}.projects-action-btn.primary:hover{background:var(--accent2)}.projects-save-status{font-size:12px;color:#22c55e;font-weight:600}.projects-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:6px;min-height:0}.projects-empty{color:var(--text3);font-size:13px;text-align:center;padding:24px 0}.projects-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);transition:border-color .15s}.projects-item:hover{border-color:var(--border2)}.projects-item.current{border-color:var(--accent)}.projects-item-info{flex:1;min-width:0}.projects-item-name{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.projects-item-date{font-size:11px;color:var(--text3);margin-top:2px}.projects-item-actions{display:flex;gap:6px;flex-shrink:0}.projects-item-btn{padding:4px 10px;font-size:11px;font-weight:600;border-radius:var(--radius-sm);background:var(--bg3);color:var(--text2);border:1px solid var(--border);transition:background .15s,color .15s}.projects-item-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}.projects-item-btn.danger:hover{background:var(--danger);color:#fff;border-color:var(--danger)}.projects-item-btn:disabled{opacity:.4;cursor:not-allowed}.export-success-toast{position:fixed;bottom:24px;right:24px;z-index:9000;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius);box-shadow:0 8px 32px var(--shadow-strong);padding:14px 16px 12px;min-width:280px;max-width:340px;animation:toast-slide-in .28s cubic-bezier(.22,1,.36,1)}@keyframes toast-slide-in{0%{opacity:0;transform:translateY(24px) translate(8px)}to{opacity:1;transform:translateY(0) translate(0)}}.export-success-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.export-success-check{font-weight:700;font-size:14px;color:var(--play)}.export-success-close{background:none;color:var(--text3);font-size:14px;padding:2px 4px;border-radius:3px;line-height:1;transition:color .15s}.export-success-close:hover{color:var(--text)}.export-success-links{display:flex;flex-direction:column;gap:8px}.export-success-item{display:flex;flex-direction:column;gap:2px}.export-success-label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em}.export-success-link{font-size:12px;color:var(--accent2);text-decoration:none;transition:color .15s}.export-success-link:hover{color:#fff;text-decoration:underline}.resources-modal{background:var(--bg1);border:1px solid var(--border2);border-radius:var(--radius);box-shadow:0 16px 48px var(--shadow-strong);width:min(560px,94vw);display:flex;flex-direction:column;overflow:hidden}.resources-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--bg2);border-bottom:1px solid var(--border);font-weight:700;font-size:14px;letter-spacing:.04em}.resources-body{padding:16px;overflow-x:auto}.resources-table{width:100%;border-collapse:collapse;font-size:13px}.resources-table th{text-align:left;padding:6px 10px;color:var(--text3);font-size:10px;text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--border);font-weight:600}.resources-table td{padding:9px 10px;border-bottom:1px solid var(--border);color:var(--text2);vertical-align:middle}.resources-table tr:last-child td{border-bottom:none}.resources-table tr:hover td{background:var(--bg2)}.resources-link{color:var(--accent);text-decoration:none;font-weight:600;transition:color .15s}.resources-link:hover{color:var(--accent2);text-decoration:underline}.resources-why{color:var(--text3);font-size:12px}.btn-resources{padding:0 10px;height:28px;background:var(--bg3);color:var(--text2);border-radius:var(--radius-sm);border:1px solid var(--border);font-size:11px;font-weight:700;letter-spacing:.06em;transition:background .15s,color .15s}.btn-resources:hover{background:var(--bg2);color:var(--text)}.btn-resources.active{background:var(--accent);color:#fff;border-color:var(--accent)}.upgrade-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--modal-overlay);display:flex;align-items:center;justify-content:center;z-index:2000;padding:1rem}.upgrade-modal{background:var(--bg1);border:1px solid var(--border2);border-radius:12px;width:min(640px,100%);padding:1.75rem 2rem;box-shadow:0 24px 64px var(--shadow-strong);display:flex;flex-direction:column;gap:1.25rem}.upgrade-modal-header{display:flex;align-items:center;justify-content:space-between}.upgrade-modal-title{font-size:1.2rem;font-weight:700;color:var(--text);letter-spacing:.01em}.upgrade-modal-close{background:none;border:none;color:var(--text2);font-size:1.1rem;cursor:pointer;padding:.25rem .5rem;border-radius:var(--radius-sm);transition:color .15s,background .15s}.upgrade-modal-close:hover{color:var(--text);background:var(--bg3)}.upgrade-plan-table{display:grid;grid-template-columns:1.5fr 1fr 1fr;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;font-size:.85rem}.upgrade-plan-col{display:contents}.upgrade-plan-heading{background:var(--bg2);color:var(--text);font-weight:700;padding:.6rem .75rem;display:flex;align-items:center;gap:.5rem;font-size:.82rem;letter-spacing:.03em;text-transform:uppercase;border-bottom:1px solid var(--border)}.upgrade-plan-col--pro .upgrade-plan-heading{background:color-mix(in srgb,var(--accent) 20%,var(--bg2));color:var(--accent2)}.upgrade-plan-row{padding:.55rem .75rem;color:var(--text2);border-bottom:1px solid var(--border);display:flex;align-items:center}.upgrade-plan-row:last-child{border-bottom:none}.upgrade-plan-col--header .upgrade-plan-row:nth-child(odd),.upgrade-plan-col--free .upgrade-plan-row:nth-child(odd),.upgrade-plan-col--pro .upgrade-plan-row:nth-child(odd){background:var(--bg2)}.upgrade-plan-value{color:var(--text2)}.upgrade-plan-value--pro{color:var(--accent2);font-weight:600}.upgrade-popular-badge{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;background:var(--accent);color:#fff;padding:.15rem .45rem;border-radius:99px;white-space:nowrap}.upgrade-cta-row{display:flex;gap:.75rem}.upgrade-btn{flex:1;padding:.75rem 1rem;border:none;border-radius:var(--radius);font-size:.95rem;font-weight:700;cursor:pointer;transition:opacity .15s,filter .15s}.upgrade-btn:disabled{opacity:.6;cursor:not-allowed}.upgrade-btn:not(:disabled):hover{filter:brightness(1.12)}.upgrade-btn--monthly{background:var(--bg3);color:var(--text);border:1px solid var(--border2)}.upgrade-btn--annual{background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;gap:.5rem}.upgrade-save-badge{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;background:#fff3;padding:.15rem .4rem;border-radius:99px}.upgrade-error{color:var(--danger);font-size:.82rem;text-align:center}.upgrade-footer{text-align:center;font-size:.75rem;color:var(--text3)}.account-menu-error{padding:.25rem .9rem;font-size:.75rem;color:var(--danger)}.export-quality-row{display:flex;align-items:center;gap:.5rem;font-size:.78rem;color:var(--text2);margin-top:-.25rem}.export-quality-label{font-weight:600}.export-quality-upgrade{flex:1}.export-upgrade-link{background:none;border:none;color:var(--accent2);cursor:pointer;font-size:.78rem;padding:0;display:inline-flex;align-items:center;gap:.35rem;transition:opacity .12s}.export-upgrade-link:hover{opacity:.8}.export-pro-badge{font-size:.65rem;font-weight:700;text-transform:uppercase;background:var(--accent);color:#fff;padding:.1rem .35rem;border-radius:99px}.collab-seat-note{font-size:.8rem;color:var(--text2);margin:0}.collab-seat-note--pro{color:var(--accent2)}.collab-upgrade-link{background:none;border:none;color:var(--accent2);cursor:pointer;font-size:.8rem;padding:0;text-decoration:underline;text-underline-offset:2px;transition:opacity .12s}.collab-upgrade-link:hover{opacity:.8}.piano-roll{background:var(--bg1);border-top:2px solid var(--accent);display:flex;flex-direction:column;-webkit-user-select:none;user-select:none}.pr-header{display:flex;align-items:center;gap:10px;padding:7px 12px;border-bottom:1px solid var(--border);background:var(--bg2);flex-wrap:wrap}.pr-title{font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--accent2);text-transform:uppercase;white-space:nowrap}.pr-inst-select{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:12px;padding:4px 8px;height:30px;cursor:pointer}.pr-inst-select:focus{outline:none;border-color:var(--accent)}.pr-octave-ctrl{display:flex;align-items:center;gap:4px;margin-left:auto}.pr-oct-label{font-size:12px;color:var(--text2);min-width:46px;text-align:center;font-variant-numeric:tabular-nums}.pr-close-btn{background:none;border:none;color:var(--text3);font-size:16px;line-height:1;cursor:pointer;padding:3px 6px;border-radius:var(--radius-sm);transition:color .15s}.pr-close-btn:hover{color:var(--danger)}.pr-body{display:flex;overflow:hidden}.pr-sidebar{display:flex;flex-direction:column;gap:6px;padding:10px 8px;border-right:1px solid var(--border);min-width:92px;background:var(--bg2)}.pr-rec-btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:6px 10px;border-radius:var(--radius-sm);background:var(--bg3);border:1px solid var(--border);color:var(--text2);font-size:10px;font-weight:800;letter-spacing:.1em;cursor:pointer;transition:background .15s,color .15s,border-color .15s;white-space:nowrap}.pr-rec-btn:hover{background:var(--danger);color:#fff;border-color:var(--danger)}.pr-rec-btn.pr-rec-on{background:var(--danger);color:#fff;border-color:var(--danger);animation:pr-blink 1.1s ease-in-out infinite}@keyframes pr-blink{0%,to{opacity:1}50%{opacity:.65}}.pr-rec-dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0}.pr-ctrl-btn{padding:5px 8px;border-radius:var(--radius-sm);background:var(--bg3);border:1px solid var(--border);color:var(--text2);font-size:10px;font-weight:700;cursor:pointer;transition:background .15s,color .15s;white-space:nowrap}.pr-ctrl-btn:hover:not(:disabled){background:var(--accent);color:#fff;border-color:var(--accent2)}.pr-ctrl-btn.active{background:var(--accent);color:#fff;border-color:var(--accent2)}.pr-ctrl-btn:disabled{opacity:.35;cursor:not-allowed}.pr-sub-btn{padding:4px 7px;border-radius:var(--radius-sm);background:var(--bg3);border:1px solid var(--border);color:var(--text2);font-size:11px;cursor:pointer;transition:background .15s,color .15s}.pr-sub-btn:hover{background:var(--accent);color:#fff}.pr-add-btn{padding:5px 8px;border-radius:var(--radius-sm);background:var(--accent);border:1px solid var(--accent2);color:#fff;font-size:10px;font-weight:700;cursor:pointer;transition:background .15s;white-space:nowrap}.pr-add-btn:hover{background:var(--accent2)}.pr-viz{flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding-top:4px;min-height:28px}.pr-viz-hint{font-size:9px;color:var(--text3);line-height:1.4}.pr-viz-rec{color:var(--danger);font-weight:700}.pr-viz-count{font-size:10px;color:var(--accent2);font-weight:600}.pr-keys-wrap{flex:1;overflow-x:auto;padding:14px 16px 14px 12px;background:var(--bg1)}.pr-keyboard{position:relative;display:flex;height:110px;width:max-content}.pr-wkey{width:34px;height:110px;background:#e9e9e1;border:1px solid #5a5a5a;border-top:none;border-radius:0 0 4px 4px;cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:5px;gap:2px;position:relative;z-index:1;flex-shrink:0;transition:background .06s}.pr-wkey:hover{background:#ccc8e8}.pr-wkey-c{background:#f1f0ff;border-left:1.5px solid #3a3a3a}.pr-wkey-c:hover{background:#ccc8e8}.pr-wkey-on{background:var(--accent2)!important}.pr-wkey-label{font-size:8px;font-weight:600;color:#444;line-height:1;pointer-events:none}.pr-wkey-kbd{font-size:7px;font-weight:700;font-family:var(--font-mono);color:#888;line-height:1;pointer-events:none}.pr-wkey-on .pr-wkey-label,.pr-wkey-on .pr-wkey-kbd{color:#fff}.pr-bkey{position:absolute;top:0;width:22px;height:67px;background:#1c1c1c;border:1px solid #000;border-top:none;border-radius:0 0 3px 3px;cursor:pointer;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:5px;gap:1px;transition:background .06s}.pr-bkey:hover{background:#3a2264}.pr-bkey-on{background:var(--accent)!important}.pr-bkey-label{font-size:7px;font-weight:600;color:#999;line-height:1;pointer-events:none}.pr-bkey-kbd{font-size:6px;font-weight:700;font-family:var(--font-mono);color:#777;line-height:1;pointer-events:none}.pr-bkey-on .pr-bkey-label,.pr-bkey-on .pr-bkey-kbd{color:#fff}:root[data-theme=light] .pr-wkey{border-color:#aaa}:root[data-theme=light] .pr-bkey{background:#222}.btn-pianoroll{font-size:15px}@media(max-width:600px){.pr-sidebar{min-width:72px;padding:8px 6px}.pr-rec-btn,.pr-ctrl-btn,.pr-add-btn{font-size:9px;padding:4px 6px}.pr-wkey{width:28px;height:90px}.pr-bkey{width:18px;height:55px}.pr-keyboard{height:90px}.pr-keys-wrap{padding:10px 8px}}