.piano-key.svelte-urq8sj{cursor:pointer;transition:fill .05s ease-out,filter .05s ease-out,y .05s ease-out,height .05s ease-out;will-change:fill,filter,y,height}.piano-key--white.svelte-urq8sj{fill:var(--color-piano-white-key);stroke:var(--color-piano-white-key-border);stroke-width:1}.piano-key--black.svelte-urq8sj{fill:var(--color-piano-black-key);stroke:var(--color-piano-black-key-border);stroke-width:.5}.piano-key--white.svelte-urq8sj:hover:not(.piano-key--pressed){fill:var(--color-piano-white-key-hover)}.piano-key--black.svelte-urq8sj:hover:not(.piano-key--pressed){fill:var(--color-piano-black-key-hover)}.piano-key.svelte-urq8sj:focus-visible{outline:2px solid var(--color-accent);outline-offset:-2px}.key-label.svelte-urq8sj{font-family:Google Sans Flex,system-ui,sans-serif;font-weight:300;pointer-events:none;-webkit-user-select:none;user-select:none}.key-label--white.svelte-urq8sj{font-size:22px;fill:#646478b3}.key-label--black.svelte-urq8sj{font-size:16px;fill:#ffffffb3}.piano-container.svelte-15xm9q9{aspect-ratio:52 / 5}.midi-btn.svelte-5nq8e5{transition:width .3s ease-out,border-color .3s ease-out,color .3s ease-out}.note-visualizer.svelte-11ahcgy{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.note-block.svelte-11ahcgy{position:absolute;bottom:0;background:linear-gradient(to top,rgba(59,130,246,calc(.7 + var(--velocity) * .3)),rgba(139,92,246,calc(.4 + var(--velocity) * .3)) 70%,transparent);border-radius:6px 6px 0 0;box-shadow:0 0 calc(var(--velocity) * 15px) rgba(139,92,246,calc(var(--velocity) * .5));animation:svelte-11ahcgy-grow-up .12s ease-out forwards}@keyframes svelte-11ahcgy-grow-up{0%{height:0;opacity:.5}to{height:calc(30% + var(--velocity) * 40%);opacity:1}}.waterfall-container.svelte-soqvib{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;background:linear-gradient(to bottom,transparent,rgba(0,0,0,.1))}.waterfall-canvas.svelte-soqvib{display:block;height:100%}.midi-uploader.svelte-19s6xve{display:flex;flex-direction:column;align-items:center;gap:.5rem}.hidden-input.svelte-19s6xve{display:none}.upload-button.svelte-19s6xve{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:.5rem;color:var(--color-text-primary);cursor:pointer;transition:all .15s ease}.upload-button.svelte-19s6xve:hover:not(:disabled){background:var(--color-bg-tertiary);border-color:var(--color-border-hover)}.upload-button.svelte-19s6xve:disabled{opacity:.5;cursor:not-allowed}.loading-spinner.svelte-19s6xve{width:1rem;height:1rem;border:2px solid var(--color-border);border-top-color:var(--color-text-primary);border-radius:50%;animation:svelte-19s6xve-spin .8s linear infinite}@keyframes svelte-19s6xve-spin{to{transform:rotate(360deg)}}.error-message.svelte-19s6xve{color:#ef4444;font-size:.875rem;margin:0}.practice-controls.svelte-1fu8av6{display:flex;flex-direction:column;gap:.75rem;padding:1rem;background:var(--color-bg-secondary);border-radius:.5rem}.track-info.svelte-1fu8av6{display:flex;justify-content:space-between;align-items:center}.track-name.svelte-1fu8av6{font-weight:500;color:var(--color-text-primary)}.track-stats.svelte-1fu8av6{font-size:.875rem;color:var(--color-text-muted)}.progress-bar.svelte-1fu8av6{height:4px;background:var(--color-bg-tertiary);border-radius:2px;overflow:hidden}.progress-fill.svelte-1fu8av6{height:100%;background:#f59e0b;transition:width .2s ease}.control-buttons.svelte-1fu8av6{display:flex;gap:.5rem;align-items:center}.btn.svelte-1fu8av6{display:flex;align-items:center;gap:.375rem;padding:.5rem .75rem;border:none;border-radius:.375rem;font-size:.875rem;cursor:pointer;transition:all .15s ease}.btn-primary.svelte-1fu8av6{background:#f59e0b;color:#000}.btn-primary.svelte-1fu8av6:hover{background:#d97706}.btn-secondary.svelte-1fu8av6{background:var(--color-bg-tertiary);color:var(--color-text-primary)}.btn-secondary.svelte-1fu8av6:hover{background:var(--color-border)}.btn-ghost.svelte-1fu8av6{background:transparent;color:var(--color-text-muted);padding:.5rem}.btn-ghost.svelte-1fu8av6:hover{color:var(--color-text-primary);background:var(--color-bg-tertiary)}.stats.svelte-1fu8av6{display:flex;gap:1rem;font-size:.875rem;color:var(--color-text-muted)}