.piano-keyboard.svelte-16prh1e{--white-key-width:2.5rem;--black-key-width:1.45rem;--white-key-height:12rem;--black-key-height:calc(var(--white-key-height) * .63);width:calc(52 * var(--white-key-width));height:var(--white-key-height);touch-action:none;-webkit-user-select:none;user-select:none;display:flex;position:relative}.piano-key.svelte-16prh1e{cursor:pointer;border:none;flex-direction:column;flex-shrink:0;justify-content:flex-end;align-items:center;padding:0;transition:background 60ms,box-shadow 90ms,transform 90ms;display:flex}.white-key.svelte-16prh1e{width:var(--white-key-width);height:var(--white-key-height);z-index:1;background:linear-gradient(#fff 0%,#f7f7f7 82%,#e8e8e8 100%);border:1px solid #d1d1d1;border-radius:0 0 6px 6px;padding-bottom:.45rem;box-shadow:inset 0 -6px 8px -6px #00000059,inset -2px 0 3px -2px #0000001f}.white-key.svelte-16prh1e+.white-key:where(.svelte-16prh1e){border-left:none}.white-key.key-pressed.svelte-16prh1e{transform-origin:top;background:linear-gradient(#ededed 0%,#e3e3e3 60%,#d6d6d6 100%);transform:translateY(1px)scaleY(.995);box-shadow:inset 0 8px 10px -8px #00000080,inset 0 -2px 4px -2px #0000004d}.white-key.state-active.svelte-16prh1e,.white-key.key-pressed.state-active.svelte-16prh1e{background:linear-gradient(#e5f0fa 0%,#d4e6f7 70%,#c0d9f2 100%)}.white-key.state-correct.svelte-16prh1e{background:linear-gradient(#e3f7ec 0%,#c9edd8 100%)}.white-key.state-wrong.svelte-16prh1e{background:linear-gradient(#fae6e6 0%,#f3cece 100%)}.white-key.state-inactive.svelte-16prh1e{opacity:.5}.white-key.active-zone.svelte-16prh1e{border-bottom:2px solid #3380cc}.black-key.svelte-16prh1e{width:var(--black-key-width);height:var(--black-key-height);z-index:2;background:linear-gradient(#424242 0%,#292929 55%,#171717 88%,#333 100%);border:none;border-radius:0 0 4px 4px;padding-bottom:.35rem;position:absolute;top:0;box-shadow:inset 0 1px #6b6b6b,inset 1px 0 #575757,inset -1px 0 #0f0f0f,inset 0 -3px 2px -2px #616161,2px 4px 6px -2px #0000008c,0 2px 3px #00000073}.black-key.key-pressed.svelte-16prh1e{background:linear-gradient(#2e2e2e 0%,#1c1c1c 60%,#0f0f0f 100%);transform:translateY(2px);box-shadow:inset 0 2px 3px #000000b3,inset 0 -1px #424242,1px 1px 2px #0006}.black-key.state-active.svelte-16prh1e,.black-key.key-pressed.state-active.svelte-16prh1e{background:linear-gradient(#275786 0%,#16385a 100%)}.black-key.state-correct.svelte-16prh1e{background:linear-gradient(#267346 0%,#164b2c 100%)}.black-key.state-wrong.svelte-16prh1e{background:linear-gradient(#862727 0%,#5a1616 100%)}.black-key.state-inactive.svelte-16prh1e{opacity:.5}.key-label.svelte-16prh1e,.note-label.svelte-16prh1e{pointer-events:none}.key-label.svelte-16prh1e{flex-direction:column;align-items:center;gap:1px;display:flex}.white-key.svelte-16prh1e .label-row:where(.svelte-16prh1e){color:#2e73b8;font-family:monospace;font-size:.6rem;font-weight:600;line-height:1.3}.black-key.svelte-16prh1e .label-row:where(.svelte-16prh1e){color:#70a6db;font-family:monospace;font-size:.55rem;font-weight:600;line-height:1.3}.note-label.svelte-16prh1e{letter-spacing:.01em;color:#8c8c8c;white-space:nowrap;margin-top:.2rem;font-family:ui-sans-serif,system-ui,sans-serif;font-size:.6rem;font-weight:600;line-height:1}.note-label.octave-label.svelte-16prh1e{color:#424242}@media (pointer:coarse){.note-label.svelte-16prh1e{font-size:.7rem}}@media (pointer:coarse) and (orientation:portrait){.piano-keyboard.svelte-16prh1e{--white-key-height:clamp(6.5rem, calc(20dvh - 3.75rem), 15rem)}}@media (pointer:coarse) and (orientation:landscape) and (height>=501px){.piano-keyboard.svelte-16prh1e{--white-key-height:clamp(6.5rem, calc(30dvh - 3.75rem), 15rem)}}@media (pointer:coarse) and (orientation:landscape) and (height<=500px){.piano-keyboard.svelte-16prh1e{--white-key-height:clamp(4.75rem, calc(40dvh - 3.2rem), 9rem)}}@media (width>=64rem) and (pointer:fine){.piano-keyboard.svelte-16prh1e{--white-key-height:min(12rem, 34dvh)}}@media (width<=63.999rem),(pointer:coarse){.label-row.svelte-16prh1e{display:none}.white-key.state-inactive.svelte-16prh1e,.black-key.state-inactive.svelte-16prh1e{opacity:1}.white-key.active-zone.svelte-16prh1e{border-bottom:none}}@media (prefers-reduced-motion:reduce){.piano-key.svelte-16prh1e{transition:none}.white-key.key-pressed.svelte-16prh1e,.black-key.key-pressed.svelte-16prh1e{transform:none}}