:root{--bg-0: #0f0f15;--bg-1: #1a1a22;--bg-2: #23232e;--bg-3: #2c2c38;--border: #3a3a48;--text-0: #f0f0f5;--text-1: #c0c0c8;--text-2: #888892;--accent: #ff5252;--accent-2: #5fa86a;--warn: #d49a3a;--danger: #c25b5b;--shadow: 0 4px 16px rgba(0, 0, 0, .4);--surface: #1e1e32;--surface-hover: #2a2a3e;--surface-accent: #333366;--btn-text: #eee;--header-bg: linear-gradient(180deg, #1a1a22 0%, #14141c 100%)}html.theme-aurora{--bg-0: #0a0a1a;--bg-1: #12122a;--bg-2: #1c1c3a;--bg-3: #26264a;--border: #3a3a6a;--accent: #00f0ff;--accent-2: #ff6beb;--text-0: #f0f0ff;--text-1: #c0c0e0;--text-2: #8080a0;--surface: #1a1a3a;--surface-hover: #24244e;--surface-accent: #3a3a7a;--btn-text: #eee;--shadow: 0 4px 16px rgba(0, 0, 20, .5);--header-bg: linear-gradient(180deg, #12122a 0%, #0a0a1a 100%)}html.theme-warm-studio{--bg-0: #14100c;--bg-1: #1e1812;--bg-2: #2a221a;--bg-3: #362c22;--border: #4a3e30;--accent: #d4a050;--accent-2: #c07848;--text-0: #f0e8d8;--text-1: #c8b8a0;--text-2: #908070;--surface: #241e16;--surface-hover: #30281e;--surface-accent: #4a3e2e;--btn-text: #f0e8d8;--shadow: 0 4px 16px rgba(0, 0, 0, .5);--header-bg: linear-gradient(180deg, #1e1812 0%, #14100c 100%)}html.theme-oceanside{--bg-0: #0c1418;--bg-1: #141e24;--bg-2: #1c2a32;--bg-3: #243640;--border: #2e4a54;--accent: #40c8b0;--accent-2: #7ab0d0;--text-0: #e0f0f0;--text-1: #b0c8c8;--text-2: #709090;--surface: #18242c;--surface-hover: #203038;--surface-accent: #2a4a58;--btn-text: #e0f0f0;--shadow: 0 4px 16px rgba(0, 8, 12, .5);--header-bg: linear-gradient(180deg, #141e24 0%, #0c1418 100%)}html.theme-retro-wave{--bg-0: #0a0014;--bg-1: #140820;--bg-2: #1e0c30;--bg-3: #281040;--border: #402060;--accent: #ff00c8;--accent-2: #00c8ff;--text-0: #f0e0ff;--text-1: #c8a0e0;--text-2: #8060a0;--surface: #1a0830;--surface-hover: #241040;--surface-accent: #402070;--btn-text: #eee;--shadow: 0 4px 16px rgba(20, 0, 40, .5);--header-bg: linear-gradient(180deg, #140820 0%, #0a0014 100%)}html.theme-paper{--bg-0: #f5f3ee;--bg-1: #ffffff;--bg-2: #e8e6e0;--bg-3: #dcd8d0;--border: #c8c4bc;--accent: #d45050;--accent-2: #489860;--text-0: #1a1a1a;--text-1: #4a4a4a;--text-2: #808080;--surface: #ffffff;--surface-hover: #f0eee8;--surface-accent: #d0c8bc;--btn-text: #1a1a1a;--shadow: 0 2px 8px rgba(0, 0, 0, .08);--header-bg: linear-gradient(180deg, #ffffff 0%, #f5f3ee 100%)}html.theme-royal{--bg-0: #0e0a1a;--bg-1: #181228;--bg-2: #221a38;--bg-3: #2c2248;--border: #3a2e58;--accent: #b088f0;--accent-2: #e8b850;--text-0: #f0e8ff;--text-1: #c8b8e8;--text-2: #8870a8;--surface: #1c1430;--surface-hover: #281e3e;--surface-accent: #40306a;--btn-text: #f0e8ff;--shadow: 0 4px 16px rgba(10, 0, 20, .5);--header-bg: linear-gradient(180deg, #181228 0%, #0e0a1a 100%)}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg-0);color:var(--text-0);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;overflow-x:hidden}#app{min-height:100vh;display:flex;flex-direction:column}.app-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 24px 8px;background:var(--header-bg);border-bottom:1px solid var(--border)}.app-header-text{flex:1 1 auto}.app-header h1{margin:0;font-size:22px;letter-spacing:.5px;font-weight:600}.tagline{margin:2px 0 0;color:var(--text-2);font-size:13px}.workspace{display:grid;grid-template-columns:280px 1fr 320px;grid-template-rows:auto 1fr auto auto;grid-template-areas:"instruments transport mixer" "instruments sequencer mixer" "instruments notes    mixer" "instruments piano    donate";gap:12px;padding:12px;flex:1;min-height:0}@media (max-width: 1100px){.workspace{grid-template-columns:1fr;grid-template-areas:"instruments" "transport" "sequencer" "notes" "piano" "mixer" "donate"}.donate-panel{text-align:center;justify-content:center}.donate-panel stripe-buy-button{width:auto;max-width:100%}}.panel{background:var(--bg-1);border:1px solid var(--border);border-radius:8px;padding:12px;box-shadow:var(--shadow);min-width:0}.panel h3{margin:0 0 10px;font-size:12px;text-transform:uppercase;letter-spacing:1.2px;color:var(--text-2)}.panel h4{margin:14px 0 6px;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--text-2)}.instrument-panel{grid-area:instruments;overflow-y:auto}.transport-panel{grid-area:transport}.sequencer-panel{grid-area:sequencer;overflow:hidden;min-width:0}.mixer-panel{grid-area:mixer;overflow-y:auto}.note-editor-panel{grid-area:notes;overflow:hidden;min-width:0;min-height:0;height:50vh}.piano-panel{grid-area:piano;overflow:hidden;min-width:0}.piano-top-bar{display:flex;align-items:center;gap:10px;margin-bottom:10px;min-height:32px}.piano-top-bar h3{margin:0!important;flex:1 1 auto}.donate-panel{grid-area:donate;display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 10px;min-width:0;overflow:hidden;box-sizing:border-box}.donate-panel stripe-buy-button{width:100%;max-width:100%;min-width:0;display:block;box-sizing:border-box}.donate-qr{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%}.donate-qr-img{width:140px;height:140px;background:#fff;padding:6px;border-radius:4px;display:block}.donate-qr-label{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--text-2);margin:0}.hidden{display:none!important}.app-footer{text-align:center;padding:12px;font-size:12px;color:var(--text-2)}.app-footer a{color:var(--text-1);text-decoration:none;border-bottom:1px dotted var(--text-2)}.app-footer a:hover{color:var(--accent);border-bottom-color:var(--accent)}.file-menu-bar{display:flex;align-items:center;gap:12px;padding:4px 16px;background:var(--bg-1);border-bottom:1px solid var(--border);font-size:13px;-webkit-user-select:none;user-select:none}.file-menu-dropdown{position:relative}.file-menu-trigger{background:none;border:1px solid transparent;color:var(--text-1);cursor:pointer;padding:4px 10px;border-radius:4px;font:inherit}.file-menu-trigger:hover{background:var(--surface-hover)}.file-menu-items{display:none;position:absolute;top:100%;left:0;background:var(--surface);border:1px solid var(--border);border-radius:6px;min-width:200px;z-index:100;padding:4px 0}.file-menu-dropdown.open .file-menu-items{display:block}.file-menu-items button{display:block;width:100%;text-align:left;background:none;border:none;color:var(--text-0);padding:6px 16px;cursor:pointer;font:inherit}.file-menu-items button:hover{background:var(--surface-accent)}.file-menu-items hr{border:none;border-top:1px solid var(--border);margin:4px 8px}.file-menu-dirty{color:var(--accent);font-size:16px}.file-menu-name{color:var(--text-2);font-size:12px;margin-left:auto}.theme-switcher{display:flex;align-items:center;gap:4px;padding:0 8px;border-left:1px solid var(--border);margin-left:8px}.theme-swatch{background:none;border:2px solid transparent;border-radius:50%;padding:0;cursor:pointer;width:18px;height:18px;display:flex;align-items:center;justify-content:center;transition:border-color .15s,transform .15s}.theme-swatch:hover{transform:scale(1.2)}.theme-swatch.active{border-color:var(--text-0)}.theme-swatch-dot{display:block;width:12px;height:12px;border-radius:50%;background:var(--swatch-color)}.welcome-modal{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#000000a6;z-index:200}.welcome-modal.hidden{display:none}.welcome-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:32px;max-width:480px;box-shadow:var(--shadow);text-align:center}.welcome-card h2{margin:0 0 12px;font-size:26px}.welcome-card p{color:var(--text-1);line-height:1.5}.welcome-dismiss-check{display:flex;align-items:center;justify-content:center;gap:6px;margin:12px 0 8px;font-size:12px;color:var(--text-2);cursor:pointer}.welcome-dismiss-check input[type=checkbox]{accent-color:var(--accent)}.feature-list{text-align:left;color:var(--text-1);padding-left:18px;margin:16px 0}.feature-list li{margin:4px 0}.how-to{text-align:left;color:var(--text-1);padding-left:22px;margin:16px 0;line-height:1.7}.how-to li{margin:4px 0}.preset-hint{color:var(--text-2);font-size:13px}.primary-button{background:var(--accent);color:#fff;border:0;padding:12px 28px;font-size:15px;font-weight:600;border-radius:6px;cursor:pointer;margin-top:8px;transition:filter .15s}.primary-button:hover{filter:brightness(1.15)}.audio-hint{font-size:12px;color:var(--text-2);margin-top:12px}.donate-label{font-size:11px;color:var(--text-2);text-align:center;margin:0;line-height:1.5}.instrument-group{margin-bottom:12px}.instrument-group h5{margin:0 0 6px;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-2)}.instrument-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.instrument-tile{background:var(--bg-2);border:1px solid var(--border);border-left:3px solid var(--tile-color, var(--accent));color:var(--text-0);padding:8px 6px;text-align:left;cursor:pointer;border-radius:4px;display:flex;flex-direction:column;gap:2px;transition:background .12s,transform .12s}.instrument-tile:hover{background:var(--bg-3);transform:translateY(-1px)}.tile-name{font-size:12px;font-weight:600}.tile-family{font-size:10px;color:var(--text-2)}.preset-buttons{display:flex;flex-direction:column;gap:6px}.preset-btn{background:var(--bg-2);border:1px solid var(--border);border-radius:6px;padding:8px 10px;color:var(--text-0);text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:2px;transition:background .12s}.preset-btn:hover{background:var(--bg-3)}.preset-btn strong{font-size:12px}.preset-btn span{font-size:11px;color:var(--text-2)}.transport-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.transport-btn{background:var(--bg-2);color:var(--text-0);border:1px solid var(--border);border-radius:6px;width:38px;height:38px;font-size:14px;cursor:pointer;transition:background .12s,color .12s}.transport-btn:hover{background:var(--bg-3)}.transport-btn.active{background:var(--accent);color:#fff}.transport-tempo,.transport-global{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-2)}.transport-tempo input{width:56px;background:var(--bg-2);border:1px solid var(--border);color:var(--text-0);border-radius:4px;padding:4px 6px;font-family:monospace}.transport-global input[type=range]{width:80px}.transport-position{margin-left:auto;font-family:monospace;font-size:14px;color:var(--text-1);background:var(--bg-2);padding:4px 10px;border-radius:4px;min-width:80px;text-align:center;border:1px solid transparent;outline:none}.transport-position:focus{border-color:var(--accent);background:var(--bg-3);color:var(--text-0)}.sequencer-panel{padding:8px;position:relative}.io-toolbar{display:flex;gap:8px;padding:6px 8px;border-bottom:1px solid var(--border);margin:-8px -8px 8px}.io-btn{background:var(--bg-2);color:var(--text-0);border:1px solid var(--border);border-radius:4px;padding:4px 10px;font-size:12px;cursor:pointer;display:inline-block;transition:background .12s}.io-btn:hover{background:var(--bg-3)}.io-btn.danger{color:var(--danger)}#sequencer{overflow:auto;max-height:calc(100vh - 220px);border-radius:4px;background:var(--bg-0)}#sequencer canvas{display:block;outline:none}#sequencer canvas.sequencer-canvas-recording{box-shadow:inset 0 0 0 2px var(--danger)}.sequencer-root{display:flex;align-items:flex-start}.lane-labels{position:sticky;left:0;z-index:2;background:var(--bg-0);border-right:1px solid var(--border);flex:0 0 auto;width:130px}.lane-label-ruler{height:22px}.lane-label{height:140px;display:flex;align-items:stretch;border-bottom:1px solid var(--border);background:var(--bg-1);position:relative}.lane-label-stripe{width:4px;background:var(--label-color, #888);flex:0 0 auto}.lane-label-body{flex:1 1 auto;padding:8px 6px 8px 8px;display:flex;flex-direction:column;justify-content:center;min-width:0}.lane-label-name{font-size:12px;font-weight:600;color:var(--text-0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lane-label-meta{font-size:10px;color:var(--text-2);font-family:monospace;margin-top:2px}.lane-label-x{position:absolute;top:4px;right:4px;background:transparent;border:0;color:var(--text-2);cursor:pointer;font-size:14px;line-height:1;padding:2px 5px;border-radius:3px}.lane-label-x:hover{color:var(--danger);background:var(--bg-2)}.lane-label-loading{opacity:.7}.lane-label-loading .lane-label-meta{color:var(--warn)}.lane-label-drop-target{background:var(--bg-3);outline:2px dashed var(--accent);outline-offset:-4px}.lane-label-drop-target .lane-label-stripe{box-shadow:0 0 8px var(--label-color, #888)}.lane-label.selected{background:var(--bg-3);outline:2px solid var(--accent);outline-offset:-2px}.lane-label.selected .lane-label-name{color:var(--accent)}.lane-label:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.lane-label{cursor:pointer}.lane-label:focus{outline:none}.instrument-tile.dragging{opacity:.4}.mixer{display:flex;flex-direction:column;gap:8px}.mixer-empty{color:var(--text-2);font-size:12px;text-align:center;padding:24px 0}.mixer-strip{background:var(--bg-2);border:1px solid var(--border);border-top:3px solid var(--strip-color, var(--accent));border-radius:6px;padding:8px 10px}.strip-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.strip-name{font-size:12px;font-weight:600;color:var(--text-0)}.strip-x{background:transparent;border:0;color:var(--text-2);cursor:pointer;font-size:18px;line-height:1;padding:0 4px}.strip-x:hover{color:var(--danger)}.strip-status{font-size:10px;color:var(--warn);font-style:italic;margin-left:auto;margin-right:6px}.strip-loading{opacity:.7}.strip-loading .strip-slider input{pointer-events:none}.strip-slider{display:grid;grid-template-columns:30px 1fr 50px;align-items:center;gap:6px;margin:4px 0;font-size:11px;color:var(--text-2)}.strip-slider input[type=range]{width:100%}.slider-value{font-family:monospace;font-size:10px;text-align:right;color:var(--text-1)}.strip-buttons{display:flex;gap:4px;margin-top:6px}.ms-btn{flex:1;background:var(--bg-3);color:var(--text-1);border:1px solid var(--border);border-radius:3px;font-size:11px;font-weight:700;padding:3px 0;cursor:pointer}.ms-btn:hover{background:var(--bg-2)}.ms-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}.ms-btn.solo.active{background:var(--warn);border-color:var(--warn)}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--bg-1)}::-webkit-scrollbar-thumb{background:var(--bg-3);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--border)}.note-editor{display:flex;flex-direction:column;height:100%;min-height:0;max-height:100%;gap:6px;overflow:hidden}.note-editor-empty{color:var(--text-2);font-size:12px;font-style:italic;padding:12px 4px;text-align:center}.note-editor-header{display:flex;align-items:center;gap:8px;padding:4px 2px 6px;border-bottom:1px solid var(--border)}.note-editor-swatch{width:4px;height:18px;background:var(--swatch-color, #888);border-radius:2px;flex:0 0 auto}.note-editor-title{font-size:13px;font-weight:600;color:var(--text-0);flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.note-editor-meta{font-size:10px;color:var(--text-2);font-family:monospace}.note-editor-table-wrap{flex:1 1 0;min-height:0;max-height:100%;overflow-y:auto;border:1px solid var(--border);border-radius:4px;background:var(--bg-0)}.note-editor-table{width:100%;border-collapse:collapse;font-size:12px;color:var(--text-0)}.note-editor-table thead th{position:sticky;top:0;background:var(--bg-2);color:var(--text-2);font-weight:500;text-align:left;padding:6px 8px;font-size:11px;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border)}.note-editor-table tbody td{padding:2px 6px;border-bottom:1px solid var(--bg-1);vertical-align:middle}.note-editor-row:hover{background:var(--bg-1)}.note-editor-cell-index{color:var(--text-2);font-family:monospace;font-size:11px;width:28px}.note-editor-input{width:60px;background:var(--bg-2);color:var(--text-0);border:1px solid var(--border);border-radius:3px;padding:3px 6px;font-family:monospace;font-size:12px;-moz-appearance:textfield}.note-editor-input::-webkit-outer-spin-button,.note-editor-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.note-editor-input:focus{outline:none;border-color:var(--accent)}.note-editor-input-pitch{width:50px}.note-editor-input-time{width:70px}.note-editor-input-vel{width:60px}.note-editor-pitch-name,.note-editor-time-label{display:inline-block;margin-left:6px;color:var(--text-2);font-size:11px;font-family:monospace}.note-editor-pitch-name{min-width:36px}.note-editor-time-label{font-size:10px}.note-editor-x{background:transparent;border:0;color:var(--text-2);cursor:pointer;font-size:16px;line-height:1;padding:2px 6px;border-radius:3px}.note-editor-x:hover{color:var(--danger);background:var(--bg-2)}.note-editor-add{background:var(--bg-2);color:var(--text-0);border:1px solid var(--border);border-radius:4px;padding:6px 12px;font-size:12px;cursor:pointer;flex:0 0 auto;flex-shrink:0;align-self:flex-start;margin-top:2px}.note-editor-add:hover{background:var(--bg-3);border-color:var(--accent-2)}.piano-keyboard-root{display:flex;flex-direction:column;gap:6px}.piano-banner{display:flex;align-items:center;gap:8px;padding:2px 4px 4px;font-size:12px;color:var(--text-1);min-height:22px;flex-wrap:wrap}.piano-swatch{width:4px;height:16px;background:var(--swatch-color, #888);border-radius:2px;flex:0 0 auto}.piano-target-name{font-weight:600;color:var(--text-0);flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.piano-rec-indicator{font-size:11px;color:var(--text-2);font-family:monospace;flex:0 0 auto}.piano-rec-indicator.active{color:var(--danger);font-weight:600}.piano-shift-hint{font-size:10px;color:var(--text-2);font-family:monospace;flex:0 0 auto;margin-left:auto;padding:2px 6px;border:1px solid var(--border);border-radius:3px;background:var(--bg-2)}.piano-label{font-size:11px;color:var(--text-2);font-family:monospace;flex:0 0 auto}.piano-octave-indicator.piano-label{color:var(--text-1);font-weight:600}.piano-hint{color:var(--text-2);font-style:italic;flex:1 1 auto}.piano-keys{display:flex;gap:4px;align-items:stretch;flex:1 1 auto;min-height:96px}.piano-key{position:relative;flex:1 1 0;min-width:0;border:1px solid var(--border);border-radius:4px;background:var(--bg-2);color:var(--text-1);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:6px 4px;cursor:pointer;font-family:monospace;font-size:10px;transition:background .05s,color .05s,transform .05s}.piano-key.white{background:var(--bg-2)}.piano-key.black{background:var(--bg-3);color:var(--text-0)}.piano-key:hover{background:var(--bg-1)}.piano-key.active{background:var(--accent);color:#fff;transform:translateY(1px)}.piano-key.black.active{background:var(--accent)}.piano-key-shortcut{font-weight:600;font-size:11px}.piano-key-name{font-size:9px;opacity:.7}.piano-record-btn{background:var(--bg-2);color:var(--text-0);border:1px solid var(--border);border-radius:6px;width:32px;height:32px;font-size:13px;cursor:pointer;transition:background .12s,color .12s;flex:0 0 auto}.piano-record-btn:hover{background:var(--bg-3)}.piano-record-btn.active{background:var(--danger);color:#fff;border-color:var(--danger)}.record-countdown{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#0f0f15d9;z-index:150;pointer-events:none}.record-countdown-card{background:var(--bg-1);border:1px solid var(--border);border-radius:12px;padding:32px 48px;text-align:center;box-shadow:var(--shadow)}.record-countdown-label{font-size:12px;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-2);margin-bottom:12px}.record-countdown-number{font-size:96px;font-weight:700;color:var(--accent);font-family:monospace;line-height:1;animation:countdown-pulse 1s ease-out}@keyframes countdown-pulse{0%{transform:scale(.6);opacity:0}20%{transform:scale(1.1);opacity:1}to{transform:scale(1);opacity:1}}.record-warn{margin-left:8px;color:var(--accent);font-size:12px;opacity:0;transition:opacity .2s}.record-warn.visible{opacity:1}.cache-explainer{color:var(--text-2);font-size:12px;margin:4px 0}.cache-status{font-size:13px;color:var(--text-1);min-height:1.2em;margin:4px 0}.cache-status.is-error{color:var(--danger);font-weight:600}.cache-progress{width:100%;height:8px;background:var(--bg-2);border:1px solid var(--border);border-radius:4px;overflow:hidden;margin:4px 0}.cache-progress-fill{height:100%;width:0%;background:var(--accent);transition:width .15s linear}.cache-progress-label{font-size:12px;color:var(--text-2);font-family:monospace;margin-bottom:12px}.primary-button:disabled,.primary-button.is-disabled{background:var(--bg-3);color:var(--text-2);cursor:not-allowed;filter:none;box-shadow:none}.primary-button:disabled:hover,.primary-button.is-disabled:hover{filter:none;background:var(--bg-3);color:var(--text-2);transform:none}.piano-keys[data-layout=full]{position:relative;display:flex;gap:2px;min-height:140px;flex:1 1 auto}.piano-keys[data-layout=full] .piano-key.white{flex:1 1 0;min-width:0;height:140px;padding:6px 4px 8px;justify-content:space-between}.piano-keys[data-layout=full] .piano-black-positioned,.piano-keys[data-layout=full] .piano-key.black{flex:0 0 auto;position:absolute;width:3.5%;height:85px;top:0;transform:translate(-50%);z-index:1;padding:4px 2px;justify-content:flex-start;border-radius:0 0 4px 4px;box-shadow:0 2px 4px #0006}.piano-keys[data-layout=full] .piano-key.black.active,.piano-keys[data-layout=full] .piano-black-positioned.active{background:var(--accent)}.piano-keys[data-layout=full] .piano-key.black .piano-key-name,.piano-keys[data-layout=full] .piano-black-positioned .piano-key-name{font-size:8px;letter-spacing:-.3px;white-space:nowrap}.piano-layout-toggle{cursor:pointer;font-family:inherit}.piano-layout-toggle:hover{background:var(--bg-3);border-color:var(--accent)}.piano-octave-down,.piano-octave-up,.piano-sustain-toggle{cursor:pointer;font-family:inherit}.piano-octave-down:hover:not([disabled]),.piano-octave-up:hover:not([disabled]),.piano-sustain-toggle:hover{background:var(--bg-3);border-color:var(--accent)}.piano-octave-down[disabled],.piano-octave-up[disabled]{opacity:.4;cursor:not-allowed}.piano-octave-down[disabled]:hover,.piano-octave-up[disabled]:hover{background:var(--bg-2);border-color:var(--border)}.piano-sustain-toggle{font-weight:600;letter-spacing:.5px}.piano-sustain-toggle.is-active{background:var(--accent);color:#fff;border-color:var(--accent)}.piano-sustain-toggle.is-active:hover{background:var(--accent);border-color:var(--text-0)}.piano-layout-toggle{position:relative;display:inline-flex;align-items:center;justify-content:space-between;width:92px;height:20px;padding:0 4px;overflow:hidden;cursor:pointer;font-family:monospace;font-size:10px;color:var(--text-2);flex:0 0 92px;-webkit-user-select:none;user-select:none}.piano-layout-toggle:before{content:"";position:absolute;top:2px;left:2px;width:calc(50% - 2px);height:calc(100% - 4px);background:var(--accent);border-radius:3px;transition:transform .15s ease-out;z-index:0}.piano-layout-toggle.is-active:before{transform:translate(100%)}.piano-layout-toggle-option{position:relative;z-index:1;flex:1 1 0;text-align:center}.piano-layout-toggle.is-active .piano-layout-toggle-option{color:#fff}.piano-layout-toggle:hover{border-color:var(--accent)}.lang-toggle{position:relative;display:inline-flex;align-items:center;justify-content:space-between;width:48px;height:24px;padding:0 2px;background:var(--bg-2);border:1px solid var(--border);border-radius:4px;flex:0 0 48px;cursor:pointer;-webkit-user-select:none;user-select:none;overflow:hidden}.lang-toggle:before{content:"";position:absolute;top:2px;left:2px;width:calc(50% - 2px);height:calc(100% - 4px);background:var(--accent);border-radius:3px;transition:transform .15s ease-out;z-index:0}.lang-toggle.is-active:before{transform:translate(100%)}.lang-toggle-option{position:relative;z-index:1;flex:1 1 0;text-align:center;font-size:11px;font-weight:600;font-family:monospace;color:var(--text-2);transition:color .15s}.lang-toggle.is-active .lang-toggle-option{color:#fff}.lang-toggle:hover{border-color:var(--accent)}.clip-overlay-container{position:absolute;top:0;left:0;pointer-events:none;width:100%;height:100%}.clip-overlay-handle{position:absolute;pointer-events:auto;cursor:ew-resize;z-index:10}.clip-overlay-drag{position:absolute;pointer-events:auto;cursor:pointer;z-index:9}.clip-editor-header{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--bg-1);border-bottom:1px solid var(--border)}.clip-editor-name{flex:1;background:var(--bg-2);border:1px solid var(--border);color:var(--text-0);padding:4px 8px;border-radius:4px;font:inherit}.clip-editor-close{background:none;border:none;color:var(--text-1);cursor:pointer;font-size:16px}.clip-editor-canvas-container{padding:8px}.clip-editor-canvas{width:100%;height:200px;border-radius:4px}.clip-editor-notes{padding:8px 12px;color:var(--text-2);font-size:12px}.clip-library-empty{padding:12px;color:var(--text-2);font-style:italic;font-size:13px}.clip-library-list{display:flex;flex-direction:column;gap:4px}.clip-library-entry{display:flex;align-items:center;gap:8px;padding:6px 8px;background:var(--bg-2);border-radius:4px;cursor:pointer}.clip-library-entry:hover{background:var(--bg-3)}.clip-library-name{flex:1;color:var(--text-0);font-size:13px}.clip-library-meta{color:var(--text-2);font-size:11px}.clip-library-place{background:var(--accent-2);color:#fff;border:none;border-radius:3px;padding:2px 8px;cursor:pointer;font-size:12px}.clip-library-rename-input{background:var(--surface-hover);border:1px solid var(--surface-accent);border-radius:3px;color:var(--text-0);font:inherit;font-size:13px;padding:1px 4px;width:120px}.clip-context-menu{position:fixed;z-index:1000;background:var(--bg-2);border:1px solid var(--border);border-radius:4px;padding:4px;box-shadow:0 4px 12px #0006;display:flex;flex-direction:column;gap:2px}.clip-context-menu button{background:none;border:none;color:var(--text-0);padding:6px 16px;text-align:left;cursor:pointer;border-radius:3px;font-size:13px}.clip-context-menu button:hover{background:var(--bg-3)}.clip-editor-actions{display:flex;gap:6px;padding:8px 12px;background:var(--bg-1);border-bottom:1px solid var(--border)}.clip-editor-action-btn{background:var(--bg-2);border:1px solid var(--border);color:var(--text-0);padding:4px 10px;border-radius:4px;cursor:pointer;font-size:12px}.clip-editor-action-btn:hover{background:var(--bg-3)}.clip-editor-action-btn.danger{color:var(--danger);border-color:var(--danger)}.clip-editor-action-btn.danger:hover{background:#c25b5b26}.note-editor-back-btn{background:var(--bg-2);border:1px solid var(--border);color:var(--text-0);padding:2px 8px;border-radius:4px;cursor:pointer;font-size:11px;margin-left:auto}.note-editor-back-btn:hover{background:var(--bg-3)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:24px;min-width:480px;max-width:640px;max-height:80vh;overflow-y:auto;color:var(--text-0)}.modal-content h3{margin:0 0 16px}.ci-field{margin-bottom:12px}.ci-field label{display:block;font-size:12px;color:var(--text-2);margin-bottom:4px}.ci-input{width:100%;padding:6px 8px;background:var(--surface-hover);border:1px solid var(--border);border-radius:4px;color:var(--text-0);font:inherit}.ci-btn{padding:6px 14px;border:1px solid var(--border);border-radius:4px;cursor:pointer;font:inherit;background:var(--surface-accent);color:var(--btn-text)}.ci-btn-primary{background:var(--surface-accent);border-color:var(--border)}.ci-btn-primary:disabled{opacity:.4;cursor:default}.ci-btn-secondary{background:var(--bg-2);border-color:var(--border)}.ci-btn:hover:not(:disabled){filter:brightness(1.2)}.ci-sample-list{margin:12px 0;max-height:240px;overflow-y:auto}.ci-empty{color:#888;font-style:italic}.ci-sample-table{width:100%;border-collapse:collapse;font-size:13px}.ci-sample-table th{text-align:left;color:var(--text-2);padding:4px 8px;border-bottom:1px solid var(--border)}.ci-sample-table td{padding:4px 8px;border-bottom:1px solid var(--bg-2)}.ci-note-input{width:70px;padding:2px 4px;background:var(--surface-hover);border:1px solid var(--border);border-radius:3px;color:var(--text-0);font:inherit}.ci-status-stored{color:var(--accent-2)}.ci-status-error{color:var(--accent)}.ci-status-pending{color:var(--text-2)}.ci-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}.instrument-tile-add{border:1px dashed var(--border)!important;opacity:.7}.instrument-tile-add:hover{opacity:1;border-color:#888!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}