.kb.svelte-1poqn4j{width:100%;container-type:inline-size}.kb-case.svelte-1poqn4j{--pad:2.4cqw;padding:var(--pad);background:linear-gradient(180deg, oklch(100% 0 0/.07), transparent 40%), linear-gradient(160deg, var(--ink-3), var(--ink) 55%);border-radius:3cqw;box-shadow:inset 0 1px oklch(100% 0 0/.16),inset 0 0 0 1px oklch(0% 0 0/.5),0 1.4cqw oklch(10% .006 285),0 3cqw 5cqw -1cqw oklch(20% .008 285/.45)}.kb-row.svelte-1poqn4j{height:calc((100cqw - 2 * var(--pad)) / 15);display:flex}.kb-slot.svelte-1poqn4j{flex-shrink:1;flex-basis:0;min-width:0;display:flex}.kb-key.svelte-1poqn4j{--depth:clamp(2px, .55cqw, 6px);min-width:0;margin:.3cqw .3cqw calc(.3cqw + var(--depth));font-family:var(--font-mono);text-transform:uppercase;cursor:pointer;border-radius:clamp(3px,.9cqw,10px);flex:1;font-size:clamp(8px,1.9cqw,17px);font-weight:500}.kb-key[data-tone=alpha].svelte-1poqn4j{--cap:oklch(95% .02 88);--cap-fg:var(--ink);--cap-edge:oklch(70% .035 80)}.kb-key[data-tone=mod].svelte-1poqn4j{--cap:oklch(42% .012 285);--cap-fg:oklch(90% .012 85);--cap-edge:oklch(20% .008 285);letter-spacing:.02em;font-size:clamp(6px,1.3cqw,12px)}.kb-key[data-tone=accent].svelte-1poqn4j{--cap:var(--switch);--cap-fg:var(--ink);--cap-edge:oklch(52% .15 4);font-size:clamp(6px,1.3cqw,12px)}.kb-key[data-pressed=true].svelte-1poqn4j{--cap:var(--switch);--cap-fg:var(--ink);--cap-edge:oklch(52% .15 4);box-shadow:inset 0 1px 0 oklch(100% 0 0/.25), 0 1px 0 var(--cap-edge), 0 0 2.2cqw .2cqw oklch(80% .105 5/.65)}.kb-key[data-tone=accent][data-pressed=true].svelte-1poqn4j{--cap:var(--brass);--cap-edge:oklch(60% .12 80);box-shadow:inset 0 1px 0 oklch(100% 0 0/.25), 0 1px 0 var(--cap-edge), 0 0 2.2cqw .2cqw oklch(81% .14 85/.6)}.kb-key.svelte-1poqn4j:hover:not([data-pressed=true]){filter:brightness(1.05)}@container (width<=440px){.kb-key[data-tone=mod].svelte-1poqn4j .legend:where(.svelte-1poqn4j),.kb-key[data-tone=accent].svelte-1poqn4j .legend:where(.svelte-1poqn4j){display:none}}