.keyboard.svelte-i919ap{-webkit-user-select:none;user-select:none;touch-action:manipulation;--key-right:#38bdf8;--key-left:#f59e0b;width:100%;position:relative}.key.svelte-i919ap{border:1px solid var(--border-strong);font:600 11px/1 var(--font-sans);cursor:default;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;padding:0;transition:background-color 80ms;display:flex;position:absolute;top:0}.key.svelte-i919ap:disabled{opacity:1}.playable.svelte-i919ap .key:where(.svelte-i919ap){cursor:pointer}.key.svelte-i919ap:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;z-index:3}.white.svelte-i919ap{color:#3f3f46;z-index:1;background:#fafafa;border-radius:0 0 6px 6px;height:100%;padding-bottom:8px}.black.svelte-i919ap{color:#fafafa;z-index:2;background:#18181b;border-color:#000;border-radius:0 0 4px 4px;height:62%;padding-bottom:6px}.white.right.svelte-i919ap{background:color-mix(in srgb, var(--key-right) 55%, #fafafa)}.black.right.svelte-i919ap{background:color-mix(in srgb, var(--key-right) 75%, #18181b)}.white.left.svelte-i919ap{background:color-mix(in srgb, var(--key-left) 55%, #fafafa)}.black.left.svelte-i919ap{background:color-mix(in srgb, var(--key-left) 75%, #18181b)}.white.hint.svelte-i919ap{background:color-mix(in srgb, var(--accent) 25%, #fafafa)}.black.hint.svelte-i919ap{background:color-mix(in srgb, var(--accent) 45%, #18181b)}.correct.svelte-i919ap{color:#052e22;background:#34d399!important}.wrong.svelte-i919ap{color:#1f0a0a;background:#f87171!important}.dot.svelte-i919ap{opacity:.5;background:currentColor;border-radius:50%;width:6px;height:6px}.label.svelte-i919ap{pointer-events:none}