.keyboard-viewport.svelte-1o8plgz{scrollbar-width:thin;scrollbar-color:#abb6af transparent;max-width:100%;padding:0 0 10px;overflow-x:auto}.piano-keys.svelte-1o8plgz{height:var(--piano-height,clamp(168px, 29vh, 270px));isolation:isolate;border-top:6px solid #272d2a;margin:auto;position:relative}.piano-key.svelte-1o8plgz{touch-action:pan-x;color:#56645c;-webkit-user-select:none;user-select:none;background:linear-gradient(#fffefa,#f1f0e9);border:1px solid #b8bdb6;border-top:0;border-radius:0 0 8px 8px;justify-content:center;align-items:flex-end;height:100%;min-height:0;padding:0 0 25px;display:flex;position:absolute;top:0;box-shadow:inset 0 -6px #d5d9d1}.piano-key.black.svelte-1o8plgz{z-index:2;color:#e4e9e6;background:linear-gradient(#303c36,#18251f);border:1px solid #142019;border-radius:0 0 5px 5px;height:61%;padding-bottom:20px;box-shadow:inset 0 -5px #0c1711,0 4px 5px #19251d33}.piano-key.svelte-1o8plgz span:where(.svelte-1o8plgz){font-size:12px;font-weight:500}.piano-key.black.svelte-1o8plgz span:where(.svelte-1o8plgz){font-size:11px}.piano-key.svelte-1o8plgz .octave-marker:where(.svelte-1o8plgz){color:#7d8a81;font-size:11px}.piano-key.svelte-1o8plgz:disabled,.large-key.svelte-1o8plgz:disabled{opacity:1}.piano-key.hint.svelte-1o8plgz{color:#1c573e;background:#d6eadd}.piano-key.black.hint.svelte-1o8plgz{color:#fff;background:#3a7057}.piano-key.pressed.svelte-1o8plgz{background:#abcdb7;box-shadow:inset 0 -2px #a2b6a9}.piano-key.black.pressed.svelte-1o8plgz{background:#57856b;box-shadow:inset 0 -2px #263f31}.piano-key.svelte-1o8plgz i:where(.svelte-1o8plgz){background:#287149;border-radius:50%;width:7px;height:7px;position:absolute;bottom:12px}.piano-key.black.svelte-1o8plgz i:where(.svelte-1o8plgz){background:#d0e8d3}.piano-key.svelte-1o8plgz:focus-visible{outline-offset:-4px;z-index:4;outline:3px solid #c68238}.large-key-grid.svelte-1o8plgz{grid-template-columns:repeat(auto-fit,minmax(52px,1fr));gap:8px;display:grid}.large-key.svelte-1o8plgz{color:#213f2e;touch-action:none;background:#faf8f2;border:1px solid #adbeb1;border-radius:8px;min-height:70px}.large-key.accidental.svelte-1o8plgz{color:#fff;background:#233e2d}.large-key.pressed.svelte-1o8plgz,.large-key.hint.svelte-1o8plgz{color:#233c2f;background:#d6eadd}@media (width<=760px){.piano-keys.svelte-1o8plgz{height:var(--piano-height,clamp(168px, 22vh, 205px))}}@media (height<=500px) and (width>=600px){.piano-keys.svelte-1o8plgz{height:var(--piano-height,220px)}}.score-frame.svelte-sibie2{background:#faf8f2;border:0;border-radius:8px;width:100%;height:180px;display:block}@media (width<=760px){.score-frame.svelte-sibie2{height:150px}}@media (height<=500px) and (width>=600px){.score-frame.svelte-sibie2{height:146px}}