.piano-container[data-v-c7c5ee76]{border:none;justify-content:center;align-items:flex-end;width:100%;height:200px;margin:0;padding:0;display:flex;overflow:visible}.piano[data-v-c7c5ee76]{transform-origin:bottom;height:200px;margin:0 auto;transition:width .2s;position:relative}.key[data-v-c7c5ee76]{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;backface-visibility:hidden;image-rendering:crisp-edges;image-rendering:-moz-crisp-edges;image-rendering:-webkit-optimize-contrast;transition:all 50ms;position:absolute;transform:translateZ(0)}.key.clickable[data-v-c7c5ee76]{cursor:pointer}.key[data-v-c7c5ee76]:not(.clickable){cursor:default}.key.white[data-v-c7c5ee76]{z-index:1;outline-offset:-1px;background:linear-gradient(#fff 0%,#f5f5f5 100%);border:none;outline:1px solid #3333334d;box-shadow:0 2px 4px #0003;border-radius:0 0 3px 3px!important}@media (hover:hover){.key.white[data-v-c7c5ee76]:hover{background:linear-gradient(#f0f0f0 0%,#e5e5e5 100%)}}.key.white.active[data-v-c7c5ee76]{box-shadow:inset 0 4px 8px #0006,inset 0 1px 2px #0000004d,0 1px 1px #0000001a;background:linear-gradient(to bottom, var(--v0cc47d92) 0%, color-mix(in srgb, var(--v0cc47d92) 85%, black) 100%)!important;border:none!important;outline:none!important}.key.white.user-active[data-v-c7c5ee76]{box-shadow:inset 0 4px 8px #0006,inset 0 1px 2px #0000004d,0 1px 1px #0000001a;background:linear-gradient(to bottom, var(--v46a8828a) 0%, color-mix(in srgb, var(--v46a8828a) 80%, black) 100%)!important;border:none!important;outline:none!important}.key.black[data-v-c7c5ee76]{z-index:2;will-change:transform, background;box-shadow:0 2px 4px #00000080,0 1px 2px #0000004d,inset 0 1px #ffffff1a;background:linear-gradient(#2a2a2a 0%,#1a1a1a 50%,#0a0a0a 100%);border:2px solid #0000001a;border-width:1px 2px 7px;-webkit-box-shadow:inset 0 -1px 2px #fff6,0 2px 3px #0006;box-shadow:inset 0 -1px 2px #fff6,0 2px 3px #0006;border-radius:0 0 2px 2px!important}@media (hover:hover){.key.black[data-v-c7c5ee76]:hover{background:linear-gradient(#3a3a3a 0%,#2a2a2a 50%,#1a1a1a 100%)}}.key.black.active[data-v-c7c5ee76]{border-bottom-width:3px;background:linear-gradient(to bottom, var(--v34600b68) 0%, color-mix(in srgb, var(--v34600b68) 70%, black) 100%)!important}.key.black.user-active[data-v-c7c5ee76]{border-bottom-width:3px;background:linear-gradient(to bottom, var(--v46a8828a) 0%, color-mix(in srgb, var(--v46a8828a) 70%, black) 100%)!important}.key-label[data-v-c7c5ee76]{color:#666;pointer-events:none;font-size:10px;font-weight:500;position:absolute;bottom:10px;left:50%;transform:translate(-50%)}.key-number[data-v-c7c5ee76]{color:#999;pointer-events:none;font-size:24px;font-weight:700;position:absolute;top:80%;left:50%;transform:translate(-50%,-50%)}.key.white.active .key-label[data-v-c7c5ee76],.key.white.active .key-number[data-v-c7c5ee76],.key.white.user-active .key-label[data-v-c7c5ee76],.key.white.user-active .key-number[data-v-c7c5ee76]{color:#fff}.piano-container[data-v-c7c5ee76]::-webkit-scrollbar{height:8px}.piano-container[data-v-c7c5ee76]::-webkit-scrollbar-track{background:#1a1a1a;border-radius:0}.piano-container[data-v-c7c5ee76]::-webkit-scrollbar-thumb{background:#667eea;border-radius:0}.piano-container[data-v-c7c5ee76]::-webkit-scrollbar-thumb:hover{background:#764ba2}.waterfall-container[data-v-4a062864]{pointer-events:none;border:none;flex:1;width:100%;height:100%;margin:0;padding:0;position:relative;overflow:hidden}.waterfall-canvas[data-v-4a062864]{pointer-events:none;border:none;width:100%;height:100%;margin:0 auto;padding:0;display:block;position:absolute;top:0;left:0;right:0}.waterfall-canvas.three-canvas[data-v-4a062864]{z-index:1}.waterfall-canvas.notes-canvas[data-v-4a062864]{z-index:2}.waterfall-canvas.three-canvas.hidden[data-v-4a062864]{visibility:hidden}.staff-container[data-v-8efa02ca]{z-index:1000;position:fixed;top:0;left:0}.staff-container.collapsed[data-v-8efa02ca]{display:none}.staff-content[data-v-8efa02ca]{padding:0}.clef-section[data-v-8efa02ca]{margin-bottom:5px}.clef-section[data-v-8efa02ca]:last-child{margin-bottom:0}.staff-canvas[data-v-8efa02ca]{display:block}.chord-display[data-v-46f15209]{z-index:999;pointer-events:none;position:fixed;top:100px;left:50%;transform:translate(-50%,-50%)}.chord-name[data-v-46f15209]{font-size:50px;font-weight:700;transition:opacity .3s ease-in-out;animation:.6s ease-in-out fadeIn-46f15209}@keyframes fadeIn-46f15209{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.metronome-panel[data-v-db3e78e7]{flex-direction:column;gap:10px;display:flex}.metronome-card[data-v-db3e78e7]{background:#ffffff08;border:1px solid #ffffff0a;border-radius:22px;padding:16px 10px 18px;transition:box-shadow .12s,border-color .12s,background .12s}.metronome-card--flash[data-v-db3e78e7]{background:#7c5cff1a;border-color:#7c5cff4d;box-shadow:inset 0 0 0 1px #7c5cff26}.bpm-row[data-v-db3e78e7]{grid-template-columns:40px 1fr 40px;align-items:center;gap:8px;min-height:124px;display:grid}.bpm-adjust[data-v-db3e78e7]{width:40px;height:40px;color:var(--primary-color);cursor:pointer;background:#ffffff05;border:1px solid #7c5cff40;border-radius:50%;font-size:24px;line-height:1}.bpm-display[data-v-db3e78e7]{text-align:center}.bpm-value[data-v-db3e78e7]{color:var(--primary-color);letter-spacing:-.05em;font-size:50px;font-weight:800;line-height:.9}.bpm-unit[data-v-db3e78e7]{color:var(--bt-color);letter-spacing:.32em;text-transform:uppercase;margin-top:6px;font-size:12px}.metronome-slider-group[data-v-db3e78e7]{margin-top:0;padding:0 24px}.metronome-slider[data-v-db3e78e7]{border-radius:999px;height:6px}.metronome-slider[data-v-db3e78e7]:before{opacity:.85}.metronome-slider[data-v-db3e78e7]::-webkit-slider-thumb{width:18px;height:18px;box-shadow:0 0 0 5px #7c5cff24}.metronome-start-button[data-v-db3e78e7]{color:var(--zt-color);background:#ef4444}.metronome-start-button[data-v-db3e78e7]:hover{opacity:1;filter:brightness(1.02)}.metronome-start-button--stopped[data-v-db3e78e7]{background:#ef4444}.metronome-start-icon[data-v-db3e78e7]{justify-content:center;align-items:center;width:20px;height:20px;display:inline-flex}.metronome-setting-row[data-v-db3e78e7]{margin-top:-4px}.metronome-sound-grid[data-v-db3e78e7]{grid-template-columns:1fr 1fr;gap:12px;display:grid}.metronome-sound-option[data-v-db3e78e7]{border:none;height:42px}.metronome-page-dots[data-v-db3e78e7]{justify-content:center;gap:20px;margin-top:18px;display:flex}.metronome-page-dot[data-v-db3e78e7]{background:#ffffff14;border-radius:50%;width:12px;height:12px}.metronome-page-dot.active[data-v-db3e78e7]{background:var(--primary-color);box-shadow:0 0 16px var(--primary-color-alpha)}.metronome-page-dot.accent[data-v-db3e78e7]{transform:scale(1.08)}.chat-container[data-v-8b87b11f]{margin-bottom:16px}.preset-btn[data-v-8b87b11f]{color:#fff;background:linear-gradient(135deg, var(--primary-color) 0%, color-mix(in srgb, var(--primary-color) 60%, #111 40%) 100%);cursor:pointer;border:0;border-radius:12px;justify-content:center;align-items:center;gap:8px;width:100%;height:40px;font-size:14px;font-weight:600;transition:transform .15s,opacity .15s;display:inline-flex}.preset-btn[data-v-8b87b11f]:hover{transform:translateY(-1px)}.preset-btn[data-v-8b87b11f]:active{opacity:.92;transform:translateY(0)}.nmns-panel[data-v-2b2b3c5a]{flex-direction:column;gap:10px;display:flex}.nmns-mode-grid[data-v-2b2b3c5a]{grid-template-columns:1fr 1fr;gap:12px;display:grid}.nmns-mode-option[data-v-2b2b3c5a]{border:none;height:42px}.clear-btn[data-v-2b2b3c5a],.download-btn[data-v-2b2b3c5a]{cursor:pointer;border:none;border-radius:10px;height:42px;font-size:14px;font-weight:600}.clear-btn[data-v-2b2b3c5a]{color:#fff;background:#ffffff14}.download-btn[data-v-2b2b3c5a]{background:var(--primary-color,#7c5cff);color:#fff}.clear-btn[data-v-2b2b3c5a]:disabled,.download-btn[data-v-2b2b3c5a]:disabled{opacity:.45;cursor:not-allowed}.nmn-container[data-v-f4953757]{color:#000;background:#fff;border-radius:8px;width:920px;max-height:520px;margin:20px auto;padding:0;font-family:Courier New,Courier,monospace;overflow-y:auto;box-shadow:0 4px 12px #0000001a}.nmn-container[data-v-f4953757]::-webkit-scrollbar{width:8px}.nmn-container[data-v-f4953757]::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.nmn-container[data-v-f4953757]::-webkit-scrollbar-thumb{background:#ccc;border-radius:4px}.nmn-container[data-v-f4953757]::-webkit-scrollbar-thumb:hover{background:#aaa}.nmn-lines-container[data-v-f4953757]{flex-direction:column;gap:0;padding-bottom:20px;display:flex}.nmn-score-line[data-v-f4953757]{margin:20px 0;position:relative}.nmn-staff[data-v-f4953757]{align-items:stretch;display:flex;position:relative}.nmn-brace[data-v-f4953757]{color:#000;flex-shrink:0;align-items:stretch;width:10px;margin:0 0 0 20px;display:flex}.nmn-brace svg[data-v-f4953757]{width:100%;height:100%}.nmn-voices[data-v-f4953757]{flex-direction:column;flex-grow:1;justify-content:flex-start;display:flex;position:relative}.nmn-voice-row[data-v-f4953757]{align-items:center;min-height:60px;display:flex}.nmn-voice-label[data-v-f4953757]{text-align:right;flex-shrink:0;width:0;padding-right:0;font-size:14px;font-weight:700}.nmn-voice-content[data-v-f4953757]{flex-grow:1;height:100%;position:relative}.nmn-chord[data-v-f4953757]{flex-direction:column;justify-content:center;align-items:center;gap:5px;width:20px;display:flex;position:absolute;top:50%;transform:translate(-50%,-50%)}.nmn-note[data-v-f4953757]{flex-direction:column;align-items:center;margin:0;line-height:.8;display:flex;position:relative}.nmn-number[data-v-f4953757]{font-size:18px;font-weight:700}.nmn-sharp[data-v-f4953757]:before{content:"#";font-size:12px;position:absolute;top:0;left:-5px}.nmn-dots-top[data-v-f4953757],.nmn-dots-bottom[data-v-f4953757]{flex-direction:column;justify-content:center;align-items:center;gap:2px;width:100%;height:auto;display:flex;position:absolute}.nmn-dots-top[data-v-f4953757]{margin-bottom:2px;bottom:100%}.nmn-dots-bottom[data-v-f4953757]{margin-top:1px;top:100%}.nmn-dot[data-v-f4953757]{background-color:#000;border-radius:50%;width:3px;height:3px}.nmn-measure-line[data-v-f4953757]{color:#000;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;width:1px;height:80%;font-size:24px;font-weight:300;display:flex;position:absolute;top:10%;transform:translate(-50%)}.nmn-chord-active .nmn-number[data-v-f4953757]{color:#e74c3c}.nmn-chord-active .nmn-dot[data-v-f4953757]{background-color:#e74c3c}.playhead[data-v-f4953757]{z-index:20;pointer-events:none;background-color:#e74c3c;width:3px;height:100%;position:absolute;top:0}.nmn-scroll-container[data-v-f4953757]{cursor:grab;width:100%;position:relative;overflow:hidden}.nmn-scroll-container.is-dragging[data-v-f4953757]{cursor:grabbing}.scroll-playhead[data-v-f4953757]{height:100%;top:0}.nmn-scroll-content[data-v-f4953757]{will-change:transform;flex-direction:column;display:flex}.controls-panel--hidden[data-v-08e46ed3],.panel-section--hidden[data-v-08e46ed3]{display:none}.section-label-row[data-v-08e46ed3]{justify-content:space-between;align-items:center;display:flex}.midi-auth-btn[data-v-08e46ed3]{border:1px solid var(--primary-color);color:var(--primary-color);cursor:pointer;white-space:nowrap;background:0 0;border-radius:4px;padding:2px 6px;font-size:11px}.midi-auth-btn[data-v-08e46ed3]:hover{background:var(--primary-color);color:#fff}.loading-indicator[data-v-08e46ed3]{color:#888;font-size:12px;animation:1.5s ease-in-out infinite pulse-08e46ed3}@keyframes pulse-08e46ed3{0%,to{opacity:1}50%{opacity:.5}}.examples-grid[data-v-08e46ed3]{grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0 5px;display:grid}.examples-grid img[data-v-08e46ed3]{aspect-ratio:1;object-fit:cover;cursor:pointer;border:1px solid #ffffff1a;border-radius:50%;width:100%;transition:border-color .2s}.examples-grid img.selected[data-v-08e46ed3]{box-shadow:0 0 8px var(--v6999c876);border-color:var(--v6999c876)!important}.examples-toggle[data-v-08e46ed3]{color:#888;cursor:pointer;text-align:center;background:0 0;border:none;grid-column:1/-1;padding:4px;font-size:12px}.examples-toggle[data-v-08e46ed3]:hover{color:var(--v6999c876)}.speed-tooltip[data-v-08e46ed3]{align-items:center;gap:4px;display:inline-flex;position:relative}.speed-tooltip-icon[data-v-08e46ed3]{color:#ffffff80;background:#ffffff26;border-radius:50%;justify-content:center;align-items:center;width:14px;height:14px;margin-left:3px;font-size:10px;font-weight:600;line-height:1;display:inline-flex;position:relative;top:1px}.speed-tooltip .speed-tooltip-text[data-v-08e46ed3]{visibility:hidden;opacity:0;color:#fff;white-space:nowrap;pointer-events:none;z-index:10;background:#000000d9;border-radius:4px;padding:4px 8px;font-size:12px;transition:opacity .2s;position:absolute;bottom:calc(100% + 1px);left:0}.speed-tooltip-icon:hover+.speed-tooltip-text[data-v-08e46ed3],.speed-tooltip-text[data-v-08e46ed3]:hover{visibility:visible;opacity:1}.nmns-mode-grid[data-v-08e46ed3]{grid-template-columns:1fr 1fr;gap:12px;display:grid}.nmns-mode-option[data-v-08e46ed3]{border:none;height:42px}*{box-sizing:border-box;-webkit-user-select:none;user-select:none;margin:0;padding:0}select:focus{box-shadow:none;border-color:initial;outline:none}:focus-visible{outline:none}:root{color:#f6f6f6;--bg-color:#1c1819;--zt-color:#f8f8f8;--bt-color:#8e8e93;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;background-color:#1c1819;font-family:Inter,Avenir,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:24px}html,body{background-color:var(--bg-color);--primary-color:#7c5cff;--primary-color-alpha:#7c5cff33;width:100%;height:100%;margin:0;padding:0;overflow:hidden}#app{background-color:var(--bg-color);width:100%;height:100%;overflow:hidden}.container{background-color:var(--bg-color);--primary-color:#7c5cff;--primary-color-alpha:#7c5cff33;flex-direction:column;height:100vh;margin:0;padding:0;display:flex;position:relative;overflow:hidden}.piano-section{flex-direction:column;flex:1;gap:0;width:100%;margin:0;padding:0;display:flex;overflow:hidden}.side-toolbar{z-index:1100;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#101012f0;border:1px solid #ffffff1a;border-radius:20px;flex-direction:column;align-items:center;gap:12px;width:40px;padding:8px 0;display:flex;position:fixed;top:50%;right:20px;transform:translateY(-50%);box-shadow:0 18px 50px #00000073,inset 0 1px #ffffff0d}.toolbar-action{color:#ffffffe0;cursor:pointer;background:0 0;border:none;border-radius:13px;justify-content:center;align-items:center;width:26px;height:26px;transition:background .2s,color .2s,transform .2s;display:flex}.toolbar-action:hover{background:#ffffff14;transform:translateY(-1px)}.toolbar-action.primary{color:#111214;background:#f3f4f6}.toolbar-action.primary.active{box-shadow:0 0 0 2px #ffffff14,0 6px 14px #ffffff1a}.toolbar-action svg{width:14px;height:14px}.toolbar-divider{background:#ffffff1f;width:18px;height:1px;margin:2px 0}.floating-controls{z-index:1050;width:280px;max-height:calc(100vh - 260px);color:var(--zt-color);opacity:0;pointer-events:none;visibility:hidden;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#000000b8;border:1px solid #ffffff14;border-radius:20px;padding:20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;transition:opacity .22s,transform .22s,visibility .22s;position:fixed;top:20px;right:72px;overflow-y:auto;transform:translate(16px);box-shadow:0 18px 50px #00000073}.floating-controls.visible{opacity:1;pointer-events:auto;visibility:visible;transform:translate(0)}.floating-controls--metronome{max-height:calc(100vh - 40px)!important}.panel-header{justify-content:space-between;align-items:center;margin-bottom:24px;display:flex}.panel-header h2{letter-spacing:.5px;margin:0;font-size:20px;font-weight:600}.header-icons{gap:12px;display:flex}.header-icons .icon{width:30px;height:30px;color:var(--primary-color);cursor:pointer;background:#7c5cff24;border:none;border-radius:50%;justify-content:center;align-items:center;display:inline-flex}.header-icons .icon:hover{color:var(--zt-color);background:#ffffff14}.controls-content{flex-direction:column;display:flex}.main-buttons{flex-direction:column;gap:12px;margin-bottom:10px;display:flex}.btn-primary{background:var(--primary-color);width:100%;height:42px;color:var(--zt-color);cursor:pointer;border:none;border-radius:8px;justify-content:center;align-items:center;gap:8px;font-size:14px;font-weight:500;transition:opacity .2s,background .2s;display:flex}.btn-primary:hover{opacity:.85}.icon-plus{font-size:20px;font-weight:300}.btn-row{gap:12px;display:flex}.btn-secondary{height:42px;color:var(--zt-color);cursor:pointer;background:#2c2c2e;border:none;border-radius:8px;flex:1;justify-content:center;align-items:center;gap:8px;font-size:14px;font-weight:500;transition:background .2s;display:flex}.btn-secondary:hover{background:#3a3a3c}.btn-secondary .icon-play{color:var(--primary-color);width:20px;height:20px}.btn-secondary .icon-stop,.btn-secondary .icon-record{width:20px;height:20px}.btn-secondary.recording{background:#ef444433;border:1px solid #ef4444}.pulse-ring{transform-origin:50%;animation:1.5s ease-in-out infinite pulse}@keyframes pulse{0%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.2)}to{opacity:0;transform:scale(1.4)}}.status-text{color:var(--bt-color);word-break:break-all;font-size:12px}.section-label{color:var(--bt-color);margin-top:16px;margin-bottom:12px;font-size:13px}.section-labels{color:var(--zt-color)!important;margin-top:6px!important;margin-bottom:16px!important}.dropdown-container{width:100%;position:relative}.custom-select{width:100%;height:42px;color:var(--zt-color);appearance:none;cursor:pointer;background:#2c2c2e;border:none;border-radius:8px;outline:none;padding:0 16px;font-size:13px}.custom-select .value{color:var(--zt-color)}.dropdown-arrow{color:var(--bt-color);pointer-events:none;font-size:12px;position:absolute;top:40%;right:16px;transform:translateY(-50%)}.slider-group{margin-top:20px}.slider-header{color:var(--zt-color);justify-content:space-between;font-size:13px;display:flex}.slider-value{color:var(--primary-color);font-weight:500}.custom-slider{-webkit-appearance:none;background:#2c2c2e;border-radius:2px;outline:none;width:100%;height:4px;position:relative}.custom-slider:before{content:"";height:100%;width:var(--val,0%);background:var(--primary-color);pointer-events:none;border-radius:2px;transition:background .3s;position:absolute;top:0;left:0}.custom-slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--primary-color);cursor:pointer;z-index:2;border-radius:50%;width:16px;height:16px;transition:background .3s;position:relative;box-shadow:0 2px 4px #00000080}.setting-row{height:44px;color:var(--zt-color);justify-content:space-between;align-items:center;font-size:13px;display:flex;position:relative}.switch{width:38px;height:20px;display:inline-block;position:relative}.switch input{opacity:0;width:0;height:0}.slider.round{cursor:pointer;background-color:#2c2c2e;border-radius:24px;transition:all .4s;position:absolute;inset:0}.slider.round:before{content:"";background-color:#fff;border-radius:50%;width:16px;height:16px;transition:all .4s;position:absolute;bottom:2px;left:2px}input:checked+.slider.round{background-color:var(--primary-color)}input:checked+.slider.round:before{transform:translate(18px)}.color-picker-wrapper{border:1px solid #3a3a3c;border-radius:6px;justify-content:center;align-items:center;width:24px;height:24px;display:flex;overflow:hidden}.custom-color-picker{cursor:pointer;background:0 0;border:none;width:40px;height:40px;padding:0}.custom-color-picker::-webkit-color-swatch-wrapper{padding:0}.custom-color-picker::-webkit-color-swatch{border:none;border-radius:0}.panel-info{color:#8e8e93;z-index:1000;font-size:13px;transition:all .3s;position:absolute;bottom:230px;left:20px}.pedal-indicator.pedal-down{color:var(--primary-color)}.theme-color-selector{justify-content:space-between;gap:12px;display:flex}.theme-color-swatch{cursor:pointer;border-radius:50%;width:20px;height:20px;transition:transform .2s,box-shadow .2s;box-shadow:0 2px 4px #0000004d}.theme-color-swatch:hover{transform:scale(1.1)}.theme-color-swatch.active{box-shadow:0 0 0 2px #1c1c1e, 0 0 0 4px var(--primary-color);transform:scale(1.1)}.background-style-selector{flex-wrap:wrap;gap:8px;margin-top:12px;display:flex}.style-option{color:var(--bt-color);cursor:pointer;background:#2c2c2e;border:1px solid #0000;border-radius:8px;padding:8px 16px;font-size:13px;transition:all .2s}.style-option:hover{color:var(--zt-color);background:#3a3a3c}.style-option.active{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.color-preview{cursor:pointer;border-radius:6px;width:24px;height:24px}.bg-color-popup{z-index:100;background:#2c2c2e;border-radius:8px;gap:8px;padding:8px;display:flex;position:absolute;top:100%;right:0;box-shadow:0 4px 12px #00000080}.bg-color-swatch{cursor:pointer;border:1px solid #3a3a3c;border-radius:6px;width:20px;height:20px;transition:transform .2s,box-shadow .2s;box-shadow:0 2px 4px #0000004d}.bg-color-swatch:hover{transform:scale(1.1)}.bg-color-swatch.active{box-shadow:0 0 0 1px #1c1c1e, 0 0 0 2px var(--primary-color);transform:scale(1.1)}.bg-color-swatch.custom-swatch{background:#3a3a3c;justify-content:center;align-items:center;display:flex}.hidden-color-input{opacity:0;pointer-events:none;width:0;height:0;position:absolute}.floating-controls::-webkit-scrollbar{width:6px}.floating-controls::-webkit-scrollbar-track{background:#0000004d;border-radius:3px}.floating-controls::-webkit-scrollbar-thumb{background:var(--primary-color);border-radius:3px}.floating-controls::-webkit-scrollbar-thumb:hover{background:var(--primary-color);opacity:.8}.shared-scroll-container{flex-direction:column;flex:1;width:100%;min-height:0;display:flex;position:relative;overflow:auto hidden}.shared-scroll-content{flex-direction:column;flex:1;min-width:max-content;height:100%;display:flex}.piano-separator{background:red;flex-shrink:0;width:100%;height:5px}.waterfall-wrapper{border:none;flex:1;justify-content:center;align-items:flex-end;width:100%;min-height:0;margin:0;padding:0;display:flex;overflow:visible}.progress-bar-container{background:linear-gradient(to right, var(--primary-color), #764ba2);z-index:100;flex-shrink:0;align-items:center;gap:12px;width:100%;height:5px;display:flex;position:relative}.piano-wrapper{border:none;outline:none;flex-direction:column;flex-shrink:0;width:100%;margin:0;padding:0;display:flex;position:relative;overflow:visible}.time-display{color:var(--primary-color);text-align:center;font-variant-numeric:tabular-nums;min-width:45px;font-size:13px;font-weight:600;position:relative;bottom:15px}.progress-bar-wrapper{cursor:pointer;flex:1;align-items:center;height:5px;padding:0;display:flex;position:relative}.progress-bar-wrapper.dragging{cursor:grabbing}.progress-bar-bg{border-radius:3px;width:100%;height:5px;position:relative;overflow:hidden}.progress-bar-fill{background:linear-gradient(135deg, var(--primary-color) 0%, red 100%);pointer-events:none;height:100%;position:absolute;top:0;left:0}.progress-bar-thumb{pointer-events:none;background:linear-gradient(90deg,red,#764ba2);width:12px;height:12px;margin-top:-6px;margin-left:-6px;transition:transform .1s;position:absolute;top:50%;box-shadow:0 2px 6px #0000004d;border-radius:50%!important}@media (prefers-color-scheme:dark){:root{color:#f6f6f6;background-color:#2f2f2f}a:hover{color:#24c8db}input,button{color:#fff;background-color:#0f0f0f98}button:active{background-color:#0f0f0f69}.midi-player{background-color:#0000004d}.play-button{background:linear-gradient(135deg, var(--primary-color) 0%, #764ba2 100%)}}@media only screen and (width<=1400px){.panel-header h2{font-size:16px}.side-toolbar{width:36px;right:16px}.toolbar-action{width:24px;height:24px}.floating-controls{width:220px;right:62px}.btn-primary,.btn-secondary,.custom-select{height:32px}.theme-color-swatch{width:14px;height:14px}}