.piano-container.svelte-w87oac{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.piano.svelte-w87oac{position:relative;display:flex;height:140px;min-width:calc(var(--white-keys) * 40px);margin:0 auto}@media(max-width:768px){.piano-container.svelte-w87oac{overflow-x:hidden}.piano.svelte-w87oac{height:140px;min-width:100%;width:100%}.key.white.svelte-w87oac{flex:1;width:auto;min-width:0}.key.black.svelte-w87oac{width:28px;height:85px;left:calc((100% / var(--white-keys)) * var(--pos) + (100% / var(--white-keys)) - 14px)}.label.svelte-w87oac{font-size:10px!important;bottom:8px!important}}@media(max-width:480px){.piano.svelte-w87oac{height:120px}.key.black.svelte-w87oac{width:24px;height:70px;left:calc((100% / var(--white-keys)) * var(--pos) + (100% / var(--white-keys)) - 12px)}.label.svelte-w87oac{font-size:9px!important}}.key.svelte-w87oac{border:none;cursor:pointer;transition:all .05s ease}.key.white.svelte-w87oac{position:relative;width:40px;height:100%;background:#1a1a1a;border:1px solid #333;z-index:1}.key.white.svelte-w87oac:hover{background:#222}.key.white.svelte-w87oac:active{background:#333}.key.black.svelte-w87oac{position:absolute;width:24px;height:85px;background:#000;border:1px solid #222;z-index:2;left:calc(var(--pos) * 40px + 28px);top:0}.key.black.svelte-w87oac:hover{background:#111}.key.black.svelte-w87oac:active{background:#1a1a1a}.key.white.scale-note.svelte-w87oac{background:#333;border-color:#444}.key.black.scale-note.svelte-w87oac{background:#222;border-color:#333}.key.white.chord-note.svelte-w87oac{background:#fff;border-color:#fff}.key.black.chord-note.svelte-w87oac{background:#ccc;border-color:#ccc}.key.white.highlighted.svelte-w87oac{background:#444}.key.black.highlighted.svelte-w87oac{background:#333}.label.svelte-w87oac{position:absolute;bottom:6px;left:50%;transform:translate(-50%);font-size:9px;color:#444;font-weight:600;pointer-events:none;font-family:inherit}.key.white.scale-note.svelte-w87oac .label:where(.svelte-w87oac),.key.black.scale-note.svelte-w87oac .label:where(.svelte-w87oac){color:#fff}.key.white.chord-note.svelte-w87oac .label:where(.svelte-w87oac){color:#000}.key.black.chord-note.svelte-w87oac .label:where(.svelte-w87oac){color:#000}.key.white.not-in-scale.svelte-w87oac{opacity:.1;pointer-events:none}.key.black.not-in-scale.svelte-w87oac{background:#000;border-color:#111;pointer-events:none}.key.not-in-scale.svelte-w87oac .label:where(.svelte-w87oac){display:none}.key.playing.svelte-w87oac{animation:svelte-w87oac-keyPress .6s ease-out}@keyframes svelte-w87oac-keyPress{0%{transform:translateY(0)}10%{transform:translateY(2px)}to{transform:translateY(0)}}.key.white.playing.svelte-w87oac{background:#e0e0e0}.key.black.playing.svelte-w87oac{background:#606060}