.piano-toolbar.svelte-1o8plgz{color:var(--muted);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding:0 0 8px;font-size:11px;display:flex}.piano-minimap.svelte-1o8plgz{background:var(--key-white);border-radius:2px;flex:1;min-width:120px;max-width:420px;height:12px;position:relative;overflow:hidden}.minimap-key.svelte-1o8plgz{border-right:1px solid var(--key-white-edge);height:100%;position:absolute}.minimap-key.black.svelte-1o8plgz{background:var(--key-black);z-index:1;border:0;height:60%}.minimap-lesson.svelte-1o8plgz{background:var(--warn);z-index:2;height:4px;position:absolute;bottom:0}.minimap-window.svelte-1o8plgz{border:2px solid var(--accent);background:color-mix(in srgb, var(--accent) 15%, transparent);z-index:3;height:100%;position:absolute;top:0}@media (width<=600px){.piano-minimap.svelte-1o8plgz{flex-basis:100%;order:3;max-width:none}}.piano-compass.svelte-1o8plgz{letter-spacing:.06em;white-space:nowrap}.piano-compass.svelte-1o8plgz span:where(.svelte-1o8plgz){opacity:.85;margin-left:8px}.piano-navigation.svelte-1o8plgz{align-items:center;gap:4px;display:flex}.piano-navigation.svelte-1o8plgz button:where(.svelte-1o8plgz){min-width:44px;padding:8px;font-size:12px}.piano-navigation.svelte-1o8plgz>span:where(.svelte-1o8plgz){text-align:center;min-width:72px}@media (width<=420px){.piano-compass.svelte-1o8plgz span:where(.svelte-1o8plgz){display:none}}.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:0;position:relative}.piano-key.svelte-1o8plgz{touch-action:none;background:var(--key-white);height:100%;min-height:0;box-shadow:inset 0 -6px 0 var(--key-white-edge);color:var(--key-ink);-webkit-user-select:none;user-select:none;border:1px solid #b8bdb6;border-top:0;border-radius:0 0 8px 8px;justify-content:center;align-items:flex-end;padding:0 0 25px;transition:transform 70ms,box-shadow 70ms;display:flex;position:absolute;top:0}.piano-key.black.svelte-1o8plgz{z-index:2;background:var(--key-black);height:61%;box-shadow:inset 0 -5px 0 var(--key-black-edge), 0 4px 5px #19251d33;color:#e4e9e6;border:1px solid #142019;border-radius:0 0 5px 5px;padding-bottom:20px}.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:var(--key-ink);font-size:10px}.piano-key.svelte-1o8plgz:disabled,.large-key.svelte-1o8plgz:disabled{opacity:1}.piano-key.hint.svelte-1o8plgz{background:var(--key-hint);color:var(--key-ink);box-shadow:inset 0 0 0 2px var(--accent)}.piano-key.pressed.svelte-1o8plgz{background:var(--key-pressed);color:var(--key-ink);box-shadow:inset 0 -2px 0 var(--key-white-edge)}.piano-key.svelte-1o8plgz i:where(.svelte-1o8plgz){background:var(--key-ink);border-radius:50%;width:7px;height:7px;position:absolute;bottom:12px}.piano-key.svelte-1o8plgz:focus-visible{outline:3px solid var(--focus);outline-offset:-4px;z-index:4}.large-key-grid.svelte-1o8plgz{grid-template-columns:repeat(auto-fit,minmax(52px,1fr));gap:8px;display:grid}.large-key.svelte-1o8plgz{background:var(--key-white);min-height:70px;color:var(--key-ink);touch-action:none;border:1px solid #adbeb1;border-radius:8px}.large-key.accidental.svelte-1o8plgz{background:var(--key-black);color:#fff}.large-key.pressed.svelte-1o8plgz,.large-key.hint.svelte-1o8plgz{background:var(--key-hint);color:var(--key-ink)}@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)}}@media (prefers-reduced-motion:no-preference){.piano-key.pressed.svelte-1o8plgz{transform:translateY(2px)}}.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 (orientation:landscape) and (height<=500px){.score-frame.svelte-sibie2{height:96px}}