:root{--km-key-bg:#f3f3f5;--km-key-fg:#1a1a1a;--km-key-border:#d1d5db;--km-key-correct-bg:#4ade80;--km-key-correct-fg:#0a3d1f;--km-key-wrong-bg:#f87171;--km-key-wrong-fg:#4a0e0e;--km-key-disabled-bg:#d4d4d8;--km-key-disabled-fg:#71717a;--km-radius:8px;--km-beam:#60a5fa;--km-spark:#fbbf24;--km-key-min-bound:24px;--km-key-max-width:40px;--km-keys-per-row:10;--km-key-height:52px;--km-key-padding-x:10px;--km-key-font-size:16px;--km-row-gap:6px;--km-keyboard-gap:8px;--km-keyboard-padding:12px}.km-keyboard{--km-key-auto-width:clamp(var(--km-key-min-bound,24px),calc((100cqi - 2 * var(--km-keyboard-padding, 12px) - (var(--km-keys-per-row, 10) - 1) * var(--km-row-gap, 6px)) / var(--km-keys-per-row, 10)),var(--km-key-max-width,40px));display:flex;flex-direction:column;width:100%;container-type:inline-size;gap:var(--km-keyboard-gap);padding:var(--km-keyboard-padding);-webkit-user-select:none;-moz-user-select:none;user-select:none;font-family:system-ui,-apple-system,sans-serif;touch-action:manipulation;box-sizing:border-box}.km-row{display:flex;gap:var(--km-row-gap);justify-content:center}.km-key{padding:0 var(--km-key-padding-x);font-size:var(--km-key-font-size);font-weight:600;background:var(--km-key-bg);color:var(--km-key-fg);border:1px solid var(--km-key-border);border-radius:var(--km-radius);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:transform 80ms ease,background .16s ease,color .16s ease,border-color .16s ease;will-change:transform}.km-key,.km-spacer{min-width:calc(var(--km-key-min-width, var(--km-key-auto-width)) * var(--km-cell-width, 1));height:var(--km-key-height)}.km-spacer{pointer-events:none}.km-key:active{transform:translateY(1px) scale(.98)}.km-key.km-state-correct{background:var(--km-key-correct-bg);color:var(--km-key-correct-fg);border-color:transparent}.km-key.km-state-wrong{background:var(--km-key-wrong-bg);color:var(--km-key-wrong-fg);border-color:transparent}.km-key.km-state-disabled{background:var(--km-key-disabled-bg);color:var(--km-key-disabled-fg);cursor:not-allowed}.km-particle{font-family:system-ui,sans-serif;font-weight:700;font-size:18px;background:var(--km-key-bg);color:var(--km-key-fg);border-radius:var(--km-radius);box-shadow:0 6px 18px rgba(0,0,0,.18)}.km-beam{background:linear-gradient(90deg,transparent,var(--km-beam),transparent)}.km-spark{background:var(--km-spark);box-shadow:0 0 12px var(--km-spark)}