.metronome-dot.svelte-tx242s{transition:background-color .15s ease-out,box-shadow .15s ease-out}.flash-downbeat.svelte-tx242s{background-color:oklch(65% .2 250);box-shadow:0 0 0 2px oklch(65% .2 250/.25),0 0 8px 4px oklch(65% .2 250/.4)}.flash-beat.svelte-tx242s{background-color:oklch(65% .15 250);box-shadow:0 0 0 1px oklch(65% .1 250/.15),0 0 6px 2px oklch(65% .1 250/.3)}.natural.svelte-1a8mb8f{height:calc(var(--key-w,5rem) * 3.3);width:var(--key-w,5rem);border:1px solid var(--color-neutral-400);background:linear-gradient(white 94%, var(--color-neutral-200) 4%);border-radius:0 0 .5rem .5rem;transition:all .1s}.natural.svelte-1a8mb8f .key-label:where(.svelte-1a8mb8f){bottom:calc(var(--key-w,5rem) * .4);font-size:clamp(.5rem, calc(var(--key-w,5rem) * .22), 1.125rem)}.natural.pressed.svelte-1a8mb8f{background:linear-gradient(var(--color-neutral-50) 0%, var(--color-neutral-200) 100%);transition:all .1s;box-shadow:inset -.375rem .375rem 20px #0003}.natural.pressed.svelte-1a8mb8f span:where(.svelte-1a8mb8f){color:var(--color-neutral-600)}.accidental.svelte-1a8mb8f{z-index:10;width:calc(var(--key-w,5rem) * .6);height:calc(var(--key-w,5rem) * 2);margin:0 calc(var(--key-w,5rem) * -.3);background:linear-gradient(var(--color-neutral-800) 92%, var(--color-neutral-900) 6%);border-radius:0 0 .375rem .375rem}.accidental.pressed.svelte-1a8mb8f{background:linear-gradient(var(--color-neutral-900), var(--color-neutral-700));box-shadow:inset -.375rem -.75rem .75rem #ffffff1a}.accidental.svelte-1a8mb8f .key-label:where(.svelte-1a8mb8f){bottom:calc(var(--key-w,5rem) * .2);color:var(--color-neutral-400);font-size:clamp(.5rem, calc(var(--key-w,5rem) * .22), 1.125rem)}.accidental.pressed.svelte-1a8mb8f span:where(.svelte-1a8mb8f){color:var(--color-neutral-200)}.natural.inactive.svelte-1a8mb8f{border-color:var(--color-neutral-300);box-shadow:none;background:0 0}.accidental.inactive.svelte-1a8mb8f{border:1px solid var(--color-neutral-400);box-shadow:none;background:0 0}