.piano.svelte-15ttuuu{--white-height:9rem;--key-gap:2px;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;inline-size:100%;container-type:inline-size}.piano[data-size=large].svelte-15ttuuu{--white-height:clamp(11rem, 42vh, 22rem)}.row.svelte-15ttuuu{gap:var(--key-gap);block-size:var(--white-height);--count:var(--whites);display:flex;position:relative}.key.svelte-15ttuuu{font:inherit;border:1px solid var(--color-border-strong);cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;justify-content:center;align-items:flex-end;padding:0;display:flex}.white.svelte-15ttuuu{color:#15181d;border-radius:0 0 var(--radius-md) var(--radius-md);background:#fdfdfb;flex:1 1 0;min-inline-size:0;box-shadow:inset 0 -.35rem #0000001f}.black.svelte-15ttuuu{z-index:1;block-size:60%;min-block-size:0;min-inline-size:0;inline-size:calc(100% / var(--count) * .62);color:#f4f5f2;border-radius:0 0 var(--radius-sm) var(--radius-sm);background:#1d2127;border-color:#0b0d10;position:absolute;inset-block-start:0;inset-inline-start:calc(100% / var(--count) * var(--at) - (100% / var(--count) * .31));box-shadow:inset 0 -.3rem #ffffff24}.white[aria-pressed=true].svelte-15ttuuu{background:color-mix(in oklab, var(--color-accent) 30%, #fdfdfb);box-shadow:inset 0 -.1rem #0000001f}.black[aria-pressed=true].svelte-15ttuuu{background:color-mix(in oklab, var(--color-accent) 55%, #1d2127);box-shadow:none}.white[data-colors][data-pitch="0"].svelte-15ttuuu{background:#ffc4c4}.white[data-colors][data-pitch="2"].svelte-15ttuuu{background:#ffd9b0}.white[data-colors][data-pitch="4"].svelte-15ttuuu{background:#fff1a8}.white[data-colors][data-pitch="5"].svelte-15ttuuu{background:#c6f0bd}.white[data-colors][data-pitch="7"].svelte-15ttuuu{background:#b6e9f2}.white[data-colors][data-pitch="9"].svelte-15ttuuu{background:#c7d3ff}.white[data-colors][data-pitch="11"].svelte-15ttuuu{background:#e6c9ff}.white[data-colors][aria-pressed=true].svelte-15ttuuu{filter:brightness(.82)}.key.svelte-15ttuuu:focus-visible{outline:3px solid var(--color-focus);outline-offset:-3px;z-index:2}.key[data-next].svelte-15ttuuu{outline:4px solid var(--color-accent);outline-offset:-4px;z-index:2;animation:1s ease-in-out infinite alternate svelte-15ttuuu-next}.white[data-next].svelte-15ttuuu,.white.svelte-15ttuuu:focus-visible{z-index:0}@keyframes svelte-15ttuuu-next{0%{box-shadow:inset 0 0 0 0 var(--color-accent-glow)}to{box-shadow:inset 0 0 0 .6rem var(--color-accent-glow)}}@media (prefers-reduced-motion:reduce){.key[data-next].svelte-15ttuuu{box-shadow:inset 0 0 0 .4rem var(--color-accent-glow);animation:none}}.labels.svelte-15ttuuu{pointer-events:none;justify-items:center;gap:.1rem;padding-block-end:.6rem;line-height:1.1;display:grid}.text.svelte-15ttuuu{font-weight:700;font-size:var(--text-sm)}.hint.svelte-15ttuuu{font-size:var(--text-xs);opacity:.75}.black.svelte-15ttuuu .labels:where(.svelte-15ttuuu){max-inline-size:100%;padding-block-end:.4rem;overflow:hidden}.black.svelte-15ttuuu .text:where(.svelte-15ttuuu){font-size:var(--text-xs)}.piano[data-size=large].svelte-15ttuuu .text:where(.svelte-15ttuuu){font-size:var(--text-xl)}.piano[data-size=large].svelte-15ttuuu .black:where(.svelte-15ttuuu) .text:where(.svelte-15ttuuu),.piano[data-size=large].svelte-15ttuuu .hint:where(.svelte-15ttuuu){font-size:var(--text-sm)}@container (width<=34rem){.row.svelte-15ttuuu{--count:var(--compact-whites)}.key[data-compact].svelte-15ttuuu{display:none}.piano[data-size].svelte-15ttuuu .black:where(.svelte-15ttuuu) .text:where(.svelte-15ttuuu){font-size:var(--text-xs)}}@media (forced-colors:active){.key.svelte-15ttuuu{forced-color-adjust:none;border:1px solid canvastext}.white.svelte-15ttuuu{color:canvastext;background:canvas}.black.svelte-15ttuuu{color:canvas;background:canvastext}.key[aria-pressed=true].svelte-15ttuuu{color:highlighttext;background:highlight}.key[data-next].svelte-15ttuuu{outline-color:highlight}}