.key--natural.svelte-1kfez85{margin-top:-.375rem;height:calc(100% + 6px);width:100%;transform:none;overflow:hidden;border-left-width:1px;border-right-width:1px;--tw-border-opacity: 1;border-color:rgb(0 0 0 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(241 220 208 / var(--tw-bg-opacity));font-size:8vw;--tw-text-opacity: 1;color:rgb(113 26 255 / var(--tw-text-opacity));transition-duration:40ms}.key--natural.svelte-1kfez85:first-of-type{border-bottom-left-radius:4px;border-left-width:0px}.key--natural.svelte-1kfez85:last-of-type{border-bottom-right-radius:4px;border-right-width:0px}@media (min-width: 640px){.key--natural.svelte-1kfez85{font-size:4vw}}@media (min-width: 1024px){.key--natural.svelte-1kfez85{font-size:clamp(1.75rem,2.7vw,2.7vw);line-height:100%;letter-spacing:-.01em}}@media (min-width: 1920px){.key--natural.svelte-1kfez85:first-of-type{border-bottom-left-radius:4px}.key--natural.svelte-1kfez85:last-of-type{border-bottom-right-radius:4px}}.key--natural.pressed.svelte-1kfez85{--tw-bg-opacity: 1;background-color:rgb(255 141 126 / var(--tw-bg-opacity))}.key--natural.svelte-1kfez85>.key__inner:where(.svelte-1kfez85){display:flex;height:100%;width:100%;flex-direction:column;align-items:center;justify-content:flex-start;overflow:hidden}.key--natural.svelte-1kfez85 .note-name:where(.svelte-1kfez85){position:relative;margin-top:auto;padding-bottom:1rem;padding-top:0}.key--accidental.svelte-1kfez85{z-index:10;height:calc(67% + 6px);width:0px;overflow:visible;font-size:4vw;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}@media (min-width: 640px){.key--accidental.svelte-1kfez85{font-size:clamp(1.125rem,1.388889vw,1.388889vw);line-height:120%}}.key--accidental.svelte-1kfez85>.key__inner:where(.svelte-1kfez85){position:relative;display:flex;height:100%;width:7vw;--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));flex-direction:column;align-items:center;justify-content:flex-end;--tw-bg-opacity: 1;background-color:rgb(113 26 255 / var(--tw-bg-opacity))}@media (min-width: 640px){.key--accidental.svelte-1kfez85>.key__inner:where(.svelte-1kfez85){width:4vw}}@media (min-width: 1280px){.key--accidental.svelte-1kfez85>.key__inner:where(.svelte-1kfez85){width:3vw}}@media (min-width: 1920px){.key--accidental.svelte-1kfez85>.key__inner:where(.svelte-1kfez85){width:2.5vw}}.key--accidental.pressed.svelte-1kfez85>.key__inner:where(.svelte-1kfez85){width:calc(7vw - 2px);--tw-bg-opacity: 1;background-color:rgb(255 141 126 / var(--tw-bg-opacity))}@media (min-width: 1024px){.key--accidental.pressed.svelte-1kfez85>.key__inner:where(.svelte-1kfez85){width:calc(4vw - 2px)}}@media (min-width: 1280px){.key--accidental.pressed.svelte-1kfez85>.key__inner:where(.svelte-1kfez85){width:calc(3vw - 2px)}}@media (min-width: 1920px){.key--accidental.pressed.svelte-1kfez85>.key__inner:where(.svelte-1kfez85){width:calc(2.5vw - 2px)}}.pressed.svelte-1kfez85 .note-name:where(.svelte-1kfez85){display:block}.key--accidental.svelte-1kfez85 .note-name:where(.svelte-1kfez85){margin-bottom:.5rem}.draw-line.svelte-1jw2irl{stroke-dasharray:400;stroke-dashoffset:400;animation:svelte-1jw2irl-drawLineAnimation 2s forwards ease-in-out;animation-play-state:paused}@keyframes svelte-1jw2irl-drawLineAnimation{to{stroke-dashoffset:0}}