.piano.svelte-1wpzza9{position:relative;width:100%;aspect-ratio:7 / 2;user-select:none;-webkit-user-select:none;touch-action:manipulation;border-radius:var(--radius);background:var(--piano-frame, #1a1310);padding:.5rem .5rem .6rem;box-shadow:0 6px 20px #00000047,inset 0 1px #ffffff0f}.piano.disabled.svelte-1wpzza9{pointer-events:none}.white-row.svelte-1wpzza9{display:flex;width:100%;height:100%;gap:2px}.black-row.svelte-1wpzza9{position:absolute;top:.5rem;left:.5rem;right:.5rem;height:62%;pointer-events:none}.white-key.svelte-1wpzza9{position:relative;flex:1 1 0;min-width:0;background:var(--white);border:1px solid color-mix(in srgb,var(--black) 12%,transparent);border-radius:0 0 6px 6px;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding:0 0 .65rem;font:inherit;color:color-mix(in srgb,var(--black) 88%,transparent);transition:background var(--transition),transform 80ms ease;box-shadow:inset 0 -3px #00000014}.white-key.svelte-1wpzza9:hover:not(:disabled){background:color-mix(in srgb,var(--accent) 6%,var(--white))}.white-key.svelte-1wpzza9:active:not(:disabled),.white-key.pressed.svelte-1wpzza9{background:color-mix(in srgb,var(--accent) 18%,var(--white));transform:translateY(1px);box-shadow:inset 0 -1px #0000000f}.black-key.svelte-1wpzza9{position:absolute;top:0;transform:translate(-50%);height:100%;background:var(--black);border:1px solid color-mix(in srgb,var(--white) 8%,transparent);border-radius:0 0 4px 4px;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding:0 0 .5rem;font:inherit;color:color-mix(in srgb,var(--white) 92%,transparent);pointer-events:auto;transition:background var(--transition),transform 80ms ease;box-shadow:0 2px 4px #0000004d,inset 0 -3px #ffffff0f;z-index:1}.black-key.svelte-1wpzza9:hover:not(:disabled){background:color-mix(in srgb,var(--accent) 22%,var(--black))}.black-key.svelte-1wpzza9:active:not(:disabled),.black-key.pressed.svelte-1wpzza9{background:color-mix(in srgb,var(--accent) 35%,var(--black));transform:translate(-50%);box-shadow:0 1px 2px #0000004d,inset 0 2px #0000001f}.label.svelte-1wpzza9{display:inline-flex;align-items:baseline;gap:1px;font-size:.95rem;font-weight:600;letter-spacing:.01em;pointer-events:none}.black-key.svelte-1wpzza9 .label:where(.svelte-1wpzza9){font-size:.82rem;font-weight:600}.oct.svelte-1wpzza9{font-size:.88em;opacity:.95;font-weight:500}.white-key.locked.svelte-1wpzza9{background:color-mix(in srgb,var(--muted) 80%,var(--surface));color:var(--fg-subtle);box-shadow:none;cursor:not-allowed}.black-key.locked.svelte-1wpzza9{background:color-mix(in srgb,var(--black) 55%,var(--muted));color:color-mix(in srgb,var(--white) 45%,transparent);cursor:not-allowed}.white-key.glow.svelte-1wpzza9,.black-key.glow.svelte-1wpzza9{box-shadow:inset 0 -6px 0 var(--accent)}.shortcut.svelte-1wpzza9{position:absolute;top:4px;right:5px;font-family:var(--type-mono, ui-monospace, monospace);font-size:.6rem;font-weight:600;line-height:1;text-transform:uppercase;opacity:.4;pointer-events:none}.black-key.svelte-1wpzza9 .shortcut:where(.svelte-1wpzza9){color:#ffffffb3;opacity:.5}.white-key.svelte-1wpzza9{position:relative}.white-key.highlight-correct.svelte-1wpzza9,.black-key.highlight-correct.svelte-1wpzza9{background:var(--success)!important;color:var(--white);transition:background .12s ease-out}.white-key.highlight-wrong.svelte-1wpzza9,.black-key.highlight-wrong.svelte-1wpzza9{background:var(--danger)!important;color:var(--white);transition:background .12s ease-out}.white-key.highlight-preview.svelte-1wpzza9,.black-key.highlight-preview.svelte-1wpzza9{background:var(--accent)!important;color:var(--white);transition:background 80ms ease-out}.white-key.highlight-hint.svelte-1wpzza9,.black-key.highlight-hint.svelte-1wpzza9{background:color-mix(in srgb,#f5b400 35%,var(--white))!important;outline:2px dashed color-mix(in srgb,#f5b400 80%,transparent);outline-offset:-3px;color:color-mix(in srgb,#6b4900 80%,var(--black));transition:background 80ms ease-out}.black-key.highlight-hint.svelte-1wpzza9{background:color-mix(in srgb,#f5b400 70%,var(--black))!important;color:var(--white)}@media(prefers-reduced-motion:reduce){.white-key.svelte-1wpzza9,.black-key.svelte-1wpzza9{transition:none}.white-key.svelte-1wpzza9:active:not(:disabled),.white-key.pressed.svelte-1wpzza9,.black-key.svelte-1wpzza9:active:not(:disabled),.black-key.pressed.svelte-1wpzza9{transform:none}.highlight-correct.svelte-1wpzza9,.highlight-wrong.svelte-1wpzza9{animation:none}}