.keyboard-demo.svelte-77exfx{margin:1.5rem 0;padding:1rem;background:var(--color-bg-secondary, #223648);border-radius:8px;border:1px solid var(--color-border-primary, #3a556a);display:flex;flex-direction:column;align-items:center}.hint.svelte-77exfx{text-align:center;color:var(--color-text-muted, #9bb2c3);font-size:.9rem;margin-bottom:1rem}svg.svelte-77exfx{display:block;margin:0 auto;max-width:700px;width:100%;height:auto}.key.svelte-77exfx{stroke:none;rx:5px;ry:5px;transition:all .1s ease}.key-half.svelte-77exfx{stroke:none;transition:all .1s ease}.text.svelte-77exfx{font-family:Arial,sans-serif;font-weight:700;font-size:14px;fill:#333;text-anchor:middle;pointer-events:none}.subtext.svelte-77exfx{font-family:Arial,sans-serif;font-size:10px;fill:#222;font-weight:700;text-anchor:middle;pointer-events:none}.latin.svelte-77exfx{font-family:Arial,sans-serif;font-size:10px;fill:#666;text-anchor:start;pointer-events:none}.l-pinky.svelte-77exfx{fill:#ff6b6b}.l-ring.svelte-77exfx{fill:#ffa94d}.l-middle.svelte-77exfx{fill:#ffd43b}.l-index.svelte-77exfx{fill:#69db7c}.r-index.svelte-77exfx{fill:#38d9a9}.r-middle.svelte-77exfx{fill:#4dabf7}.r-ring.svelte-77exfx{fill:#9775fa}.r-pinky.svelte-77exfx{fill:#f783ac}.thumbs.svelte-77exfx{fill:#495057}#key-ctrlleft.svelte-77exfx .subtext:where(.svelte-77exfx),#key-ctrlright.svelte-77exfx .subtext:where(.svelte-77exfx),#key-winleft.svelte-77exfx .subtext:where(.svelte-77exfx),#key-winright.svelte-77exfx .subtext:where(.svelte-77exfx),#key-altleft.svelte-77exfx .subtext:where(.svelte-77exfx),#key-altright.svelte-77exfx .subtext:where(.svelte-77exfx),#key-menu.svelte-77exfx .subtext:where(.svelte-77exfx){fill:#eee}g.pressed .key.svelte-77exfx,g.pressed .key-half.svelte-77exfx{filter:brightness(.7)}g.dimmed .key.svelte-77exfx,g.dimmed .key-half.svelte-77exfx{opacity:.4}g.dimmed .text.svelte-77exfx,g.dimmed .latin.svelte-77exfx,g.dimmed .subtext.svelte-77exfx{opacity:.4}g.highlighted .key.svelte-77exfx{stroke:#fff;stroke-width:3px;filter:brightness(1.15)}g.highlighted .key-half.svelte-77exfx{filter:brightness(1.15)}g.active-char .key.svelte-77exfx,g.active-char .key-half.svelte-77exfx{filter:brightness(1.5);stroke:var(--color-text-primary, #000);stroke-width:2px}.legend.svelte-77exfx{display:flex;justify-content:center;gap:2rem;margin-top:1rem;color:var(--color-text-secondary, #c7d6e2)}.legend-hand.svelte-77exfx{display:flex;gap:.75rem}.legend-item.svelte-77exfx{display:flex;flex-direction:column;align-items:center;gap:.2rem}.legend-item.svelte-77exfx .label:where(.svelte-77exfx){font-size:.65rem;white-space:nowrap}.color.svelte-77exfx{width:16px;height:10px;border-radius:3px;border:none}.color.l-pinky.svelte-77exfx{background:#ff6b6b}.color.l-ring.svelte-77exfx{background:#ffa94d}.color.l-middle.svelte-77exfx{background:#ffd43b}.color.l-index.svelte-77exfx{background:#69db7c}.color.r-index.svelte-77exfx{background:#38d9a9}.color.r-middle.svelte-77exfx{background:#4dabf7}.color.r-ring.svelte-77exfx{background:#9775fa}.color.r-pinky.svelte-77exfx{background:#f783ac}