.piano-container[data-v-78aecd09]{width:100%;height:200px;overflow:visible;padding:0;margin:0;display:flex;align-items:flex-end;justify-content:center;border:none}.piano[data-v-78aecd09]{position:relative;height:200px;margin:0 auto;transition:width .2s ease;transform-origin:bottom center}.key[data-v-78aecd09]{position:absolute;cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .05s ease;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;backface-visibility:hidden;transform:translateZ(0);image-rendering:crisp-edges;image-rendering:-moz-crisp-edges;image-rendering:-webkit-optimize-contrast}.key.clickable[data-v-78aecd09]{cursor:pointer}.key[data-v-78aecd09]:not(.clickable){cursor:default}.key.white[data-v-78aecd09]{background:linear-gradient(to bottom,#fff,#f5f5f5);border:none;border-radius:0 0 3px 3px!important;z-index:1;box-shadow:0 2px 4px #0003;outline:1px solid rgba(51,51,51,.3);outline-offset:-1px}@media(hover:hover){.key.white[data-v-78aecd09]:hover{background:linear-gradient(to bottom,#f0f0f0,#e5e5e5)}}.key.white.active[data-v-78aecd09]{background:linear-gradient(to bottom,var(--v9054c170) 0%,color-mix(in srgb,var(--v9054c170) 85%,black) 100%)!important;border:none!important;outline:none!important;box-shadow:inset 0 4px 8px #0006,inset 0 1px 2px #0000004d,0 1px 1px #0000001a}.key.white.user-active[data-v-78aecd09]{background:linear-gradient(to bottom,var(--v5cb15214) 0%,color-mix(in srgb,var(--v5cb15214) 80%,black) 100%)!important;border:none!important;outline:none!important;box-shadow:inset 0 4px 8px #0006,inset 0 1px 2px #0000004d,0 1px 1px #0000001a}.key.black[data-v-78aecd09]{background:linear-gradient(to bottom,#2a2a2a,#1a1a1a,#0a0a0a);border-radius:0 0 2px 2px!important;z-index:2;box-shadow:0 2px 4px #00000080,0 1px 2px #0000004d,inset 0 1px #ffffff1a;will-change:transform,background;border-width:1px 2px 7px;border-style:solid;border-color:#0000001a;-webkit-box-shadow:inset 0 -1px 2px hsla(0,0%,100%,.4),0 2px 3px rgba(0,0,0,.4);box-shadow:inset 0 -1px 2px #fff6,0 2px 3px #0006}@media(hover:hover){.key.black[data-v-78aecd09]:hover{background:linear-gradient(to bottom,#3a3a3a,#2a2a2a,#1a1a1a)}}.key.black.active[data-v-78aecd09]{background:linear-gradient(to bottom,var(--v411da5c4) 0%,color-mix(in srgb,var(--v411da5c4) 70%,black) 100%)!important;border-bottom-width:3px}.key.black.user-active[data-v-78aecd09]{background:linear-gradient(to bottom,var(--v5cb15214) 0%,color-mix(in srgb,var(--v5cb15214) 70%,black) 100%)!important;border-bottom-width:3px}.key-label[data-v-78aecd09]{position:absolute;bottom:10px;left:50%;transform:translate(-50%);font-size:10px;color:#666;font-weight:500;pointer-events:none}.key-number[data-v-78aecd09]{position:absolute;top:80%;left:50%;transform:translate(-50%,-50%);font-size:24px;font-weight:700;color:#999;pointer-events:none}.key.white.active .key-label[data-v-78aecd09],.key.white.active .key-number[data-v-78aecd09],.key.white.user-active .key-label[data-v-78aecd09],.key.white.user-active .key-number[data-v-78aecd09]{color:#fff}.piano-container[data-v-78aecd09]::-webkit-scrollbar{height:8px}.piano-container[data-v-78aecd09]::-webkit-scrollbar-track{background:#1a1a1a;border-radius:0}.piano-container[data-v-78aecd09]::-webkit-scrollbar-thumb{background:#667eea;border-radius:0}.piano-container[data-v-78aecd09]::-webkit-scrollbar-thumb:hover{background:#764ba2}.waterfall-container[data-v-6675c8a4]{position:relative;overflow:hidden;pointer-events:none;margin:0;padding:0;border:none;width:100%;height:100%;flex:1}.waterfall-canvas[data-v-6675c8a4]{position:absolute;top:0;left:0;right:0;margin:0 auto;width:100%;height:100%;display:block;pointer-events:none;padding:0;border:none}.waterfall-canvas.three-canvas[data-v-6675c8a4]{z-index:1}.waterfall-canvas.notes-canvas[data-v-6675c8a4]{z-index:2}.waterfall-canvas.three-canvas.hidden[data-v-6675c8a4]{visibility:hidden}.staff-container[data-v-5cf229fe]{position:fixed;left:0;top:0;z-index:1000}.staff-container.collapsed[data-v-5cf229fe]{display:none}.staff-content[data-v-5cf229fe]{padding:0}.clef-section[data-v-5cf229fe]{margin-bottom:5px}.clef-section[data-v-5cf229fe]:last-child{margin-bottom:0}.staff-canvas[data-v-5cf229fe]{display:block}.chord-display[data-v-da3c4bb8]{position:fixed;top:100px;left:50%;transform:translate(-50%,-50%);z-index:999;pointer-events:none}.chord-name[data-v-da3c4bb8]{font-size:50px;font-weight:700;transition:opacity .3s ease-in-out;animation:fadeIn-da3c4bb8 .6s ease-in-out}@keyframes fadeIn-da3c4bb8{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.metronome-panel[data-v-b6fcf0bd]{display:flex;flex-direction:column;gap:16px}.metronome-card[data-v-b6fcf0bd]{border-radius:22px;padding:16px 10px 18px;background:#ffffff08;border:1px solid rgba(255,255,255,.04);transition:box-shadow .12s ease,border-color .12s ease,background .12s ease}.metronome-card--flash[data-v-b6fcf0bd]{background:#7c5cff1a;border-color:#7c5cff4d;box-shadow:0 0 0 1px #7c5cff26 inset}.bpm-row[data-v-b6fcf0bd]{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;gap:8px;min-height:124px}.bpm-adjust[data-v-b6fcf0bd]{width:40px;height:40px;border-radius:50%;border:1px solid rgba(124,92,255,.25);background:#ffffff05;color:var(--primary-color);font-size:24px;line-height:1;cursor:pointer}.bpm-display[data-v-b6fcf0bd]{text-align:center}.bpm-value[data-v-b6fcf0bd]{font-size:50px;line-height:.9;font-weight:800;color:var(--primary-color);letter-spacing:-.05em}.bpm-unit[data-v-b6fcf0bd]{margin-top:6px;font-size:12px;color:var(--bt-color);letter-spacing:.32em;text-transform:uppercase}.metronome-slider-group[data-v-b6fcf0bd]{margin-top:0;padding:0 24px}.metronome-slider[data-v-b6fcf0bd]{height:6px;border-radius:999px}.metronome-slider[data-v-b6fcf0bd]:before{opacity:.85}.metronome-slider[data-v-b6fcf0bd]::-webkit-slider-thumb{width:18px;height:18px;box-shadow:0 0 0 5px #7c5cff24}.metronome-start-button[data-v-b6fcf0bd]{background:#ef4444;color:var(--zt-color)}.metronome-start-button[data-v-b6fcf0bd]:hover{opacity:1;filter:brightness(1.02)}.metronome-start-button--stopped[data-v-b6fcf0bd]{background:#ef4444}.metronome-start-icon[data-v-b6fcf0bd]{display:inline-flex;width:20px;height:20px;align-items:center;justify-content:center}.metronome-setting-row[data-v-b6fcf0bd]{margin-top:-4px}.metronome-sound-grid[data-v-b6fcf0bd]{display:grid;grid-template-columns:1fr 1fr;gap:12px}.metronome-sound-option[data-v-b6fcf0bd]{height:42px;border:none}.metronome-page-dots[data-v-b6fcf0bd]{margin-top:18px;display:flex;justify-content:center;gap:20px}.metronome-page-dot[data-v-b6fcf0bd]{width:12px;height:12px;border-radius:50%;background:#ffffff14}.metronome-page-dot.active[data-v-b6fcf0bd]{background:var(--primary-color);box-shadow:0 0 16px var(--primary-color-alpha)}.metronome-page-dot.accent[data-v-b6fcf0bd]{transform:scale(1.08)}.controls-panel--hidden[data-v-8cbdbba8],.panel-section--hidden[data-v-8cbdbba8]{display:none}*{margin:0;padding:0;box-sizing:border-box;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}select:focus{outline:none;box-shadow:none;border-color:initial}:root{font-family:Inter,Avenir,Helvetica,Arial,sans-serif;font-size:16px;line-height:24px;font-weight:400;color:#f6f6f6;background-color:#1c1819;--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%}html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background-color:var(--bg-color);--primary-color: #7c5cff;--primary-color-alpha: rgba(124, 92, 255, .2)}#app{width:100%;height:100%;overflow:hidden;background-color:var(--bg-color)}.container{margin:0;padding:0;display:flex;flex-direction:column;height:100vh;overflow:hidden;background-color:var(--bg-color);--primary-color: #7c5cff;--primary-color-alpha: rgba(124, 92, 255, .2);position:relative}.piano-section{flex:1;display:flex;flex-direction:column;width:100%;padding:0;margin:0;overflow:hidden;gap:0}.side-toolbar{position:fixed;right:20px;top:50%;transform:translateY(-50%);width:40px;padding:8px 0;border-radius:20px;background:#101012f0;border:1px solid rgba(255,255,255,.1);box-shadow:0 18px 50px #00000073,inset 0 1px #ffffff0d;display:flex;flex-direction:column;align-items:center;gap:12px;z-index:1100;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.toolbar-action{width:26px;height:26px;border:none;border-radius:13px;background:transparent;color:#ffffffe0;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s ease,color .2s ease,transform .2s ease}.toolbar-action:hover{background:#ffffff14;transform:translateY(-1px)}.toolbar-action.primary{background:#f3f4f6;color:#111214}.toolbar-action.primary.active{box-shadow:0 0 0 2px #ffffff14,0 6px 14px #ffffff1a}.toolbar-action svg{width:14px;height:14px}.toolbar-divider{width:18px;height:1px;background:#ffffff1f;margin:2px 0}.floating-controls{position:fixed;right:72px;top:20px;transform:translate(16px);background:#000000b8;border-radius:20px;padding:20px;width:280px;max-height:calc(100vh - 260px);overflow-y:auto;z-index:1050;box-shadow:0 18px 50px #00000073;color:var(--zt-color);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;border:1px solid rgba(255,255,255,.08);opacity:0;pointer-events:none;visibility:hidden;transition:opacity .22s ease,transform .22s ease,visibility .22s ease;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.floating-controls.visible{opacity:1;pointer-events:auto;visibility:visible;transform:translate(0)}.floating-controls--metronome{max-height:calc(100vh - 40px)!important}.panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.panel-header h2{font-size:20px;font-weight:600;margin:0;letter-spacing:.5px}.header-icons{display:flex;gap:12px}.header-icons .icon{width:30px;height:30px;border:none;border-radius:50%;background:#7c5cff24;color:var(--primary-color);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.header-icons .icon:hover{color:var(--zt-color);background:#ffffff14}.controls-content{display:flex;flex-direction:column}.main-buttons{display:flex;flex-direction:column;gap:12px;margin-bottom:10px}.btn-primary{width:100%;height:42px;border-radius:8px;background:var(--primary-color);color:var(--zt-color);border:none;font-size:14px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:opacity .2s,background .2s}.btn-primary:hover{opacity:.85}.icon-plus{font-size:20px;font-weight:300}.btn-row{display:flex;gap:12px}.btn-secondary{flex:1;height:42px;border-radius:8px;background:#2c2c2e;color:var(--zt-color);border:none;font-size:14px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:background .2s}.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{animation:pulse 1.5s ease-in-out infinite;transform-origin:center}@keyframes pulse{0%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.2)}to{opacity:0;transform:scale(1.4)}}.status-text{font-size:12px;color:var(--bt-color);word-break:break-all}.section-label{font-size:13px;color:var(--bt-color);margin-bottom:12px;margin-top:16px}.section-labels{margin-bottom:16px!important;margin-top:6px!important;color:var(--zt-color)!important}.dropdown-container{position:relative;width:100%}.custom-select{width:100%;height:42px;background:#2c2c2e;border:none;border-radius:8px;color:var(--zt-color);font-size:13px;padding:0 16px;-moz-appearance:none;appearance:none;-webkit-appearance:none;cursor:pointer;outline:none}.custom-select .value{color:var(--zt-color)}.dropdown-arrow{position:absolute;right:16px;top:40%;transform:translateY(-50%);color:var(--bt-color);pointer-events:none;font-size:12px}.slider-group{margin-top:20px}.slider-header{display:flex;justify-content:space-between;font-size:13px;color:var(--zt-color)}.slider-value{color:var(--primary-color);font-weight:500}.custom-slider{-webkit-appearance:none;width:100%;height:4px;background:#2c2c2e;border-radius:2px;outline:none;position:relative}.custom-slider:before{content:"";position:absolute;top:0;left:0;height:100%;width:var(--val, 0%);background:var(--primary-color);border-radius:2px;pointer-events:none;transition:background .3s ease}.custom-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--primary-color);cursor:pointer;position:relative;z-index:2;box-shadow:0 2px 4px #00000080;transition:background .3s ease}.setting-row{display:flex;justify-content:space-between;align-items:center;height:44px;font-size:13px;color:var(--zt-color);position:relative}.switch{position:relative;display:inline-block;width:38px;height:20px}.switch input{opacity:0;width:0;height:0}.slider.round{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#2c2c2e;transition:.4s;border-radius:24px}.slider.round:before{position:absolute;content:"";height:16px;width:16px;left:2px;bottom:2px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider.round{background-color:var(--primary-color)}input:checked+.slider.round:before{transform:translate(18px)}.color-picker-wrapper{width:24px;height:24px;border-radius:6px;overflow:hidden;display:flex;align-items:center;justify-content:center;border:1px solid #3a3a3c}.custom-color-picker{width:40px;height:40px;padding:0;border:none;background:none;cursor:pointer}.custom-color-picker::-webkit-color-swatch-wrapper{padding:0}.custom-color-picker::-webkit-color-swatch{border:none;border-radius:0}.panel-info{position:absolute;left:20px;bottom:230px;color:#8e8e93;font-size:13px;transition:all .3s ease;z-index:1000}.pedal-indicator.pedal-down{color:var(--primary-color)}.theme-color-selector{display:flex;gap:12px;justify-content:space-between}.theme-color-swatch{width:20px;height:20px;border-radius:50%;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 2px 4px #0000004d}.theme-color-swatch:hover{transform:scale(1.1)}.theme-color-swatch.active{transform:scale(1.1);box-shadow:0 0 0 2px #1c1c1e,0 0 0 4px var(--primary-color)}.background-style-selector{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.style-option{padding:8px 16px;border-radius:8px;background:#2c2c2e;color:var(--bt-color);font-size:13px;cursor:pointer;transition:all .2s;border:1px solid transparent}.style-option:hover{background:#3a3a3c;color:var(--zt-color)}.style-option.active{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.color-preview{width:24px;height:24px;border-radius:6px;cursor:pointer}.bg-color-popup{position:absolute;right:0;top:100%;background:#2c2c2e;border-radius:8px;padding:8px;display:flex;gap:8px;z-index:100;box-shadow:0 4px 12px #00000080}.bg-color-swatch{width:20px;height:20px;border-radius:6px;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 2px 4px #0000004d;border:1px solid #3a3a3c}.bg-color-swatch:hover{transform:scale(1.1)}.bg-color-swatch.active{transform:scale(1.1);box-shadow:0 0 0 1px #1c1c1e,0 0 0 2px var(--primary-color)}.bg-color-swatch.custom-swatch{background:#3a3a3c;display:flex;align-items:center;justify-content:center}.hidden-color-input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}.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:1;width:100%;overflow-x:auto;overflow-y:hidden;display:flex;flex-direction:column;position:relative;min-height:0}.shared-scroll-content{display:flex;flex-direction:column;min-width:max-content;flex:1;height:100%}.piano-separator{width:100%;height:5px;background:red;flex-shrink:0}.waterfall-wrapper{width:100%;flex:1;overflow:visible;margin:0;padding:0;border:none;display:flex;justify-content:center;align-items:flex-end;min-height:0}.progress-bar-container{width:100%;display:flex;align-items:center;gap:12px;background:linear-gradient(to right,var(--primary-color),#764ba2);z-index:100;position:relative;flex-shrink:0;height:5px}.piano-wrapper{position:relative;width:100%;display:flex;flex-direction:column;overflow:visible;padding:0;margin:0;flex-shrink:0;border:none;outline:none}.time-display{color:var(--primary-color);font-size:13px;font-weight:600;min-width:45px;text-align:center;font-variant-numeric:tabular-nums;position:relative;bottom:15px}.progress-bar-wrapper{flex:1;height:5px;position:relative;display:flex;align-items:center;cursor:pointer;padding:0}.progress-bar-wrapper.dragging{cursor:grabbing}.progress-bar-bg{width:100%;height:5px;border-radius:3px;position:relative;overflow:hidden}.progress-bar-fill{height:100%;background:linear-gradient(135deg,var(--primary-color) 0%,#ff0000 100%);position:absolute;left:0;top:0;pointer-events:none}.progress-bar-thumb{position:absolute;top:50%;width:12px;height:12px;margin-left:-6px;margin-top:-6px;border-radius:50%!important;box-shadow:0 2px 6px #0000004d;pointer-events:none;transition:transform .1s;background:linear-gradient(to right,red,#764ba2)}@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 (max-width:1400px){.panel-header h2{font-size:16px}.side-toolbar{right:16px;width:36px}.toolbar-action{width:24px;height:24px}.floating-controls{right:62px;width:220px}.btn-primary,.btn-secondary,.custom-select{height:32px}.theme-color-swatch{width:14px;height:14px}}