.wr-kbd {
  // Override these on `:root` / a scope to retheme every keycap at once.
  --wr-kbd-bg: var(--wr-color-white);
  --wr-kbd-border: rgba(var(--wr-color-dark-rgb), 0.18);
  --wr-kbd-border-bottom: rgba(var(--wr-color-dark-rgb), 0.32);
  --wr-kbd-color: var(--wr-color-dark);
  --wr-kbd-radius: var(--wr-control-radius-md);
  // Shadow uses the always-black backdrop token, not `--wr-color-dark-rgb`
  // — the dark RGB flips to light in dark mode, which would turn the
  // 1px drop-shadow into a top highlight.
  --wr-kbd-shadow: 0 1px 0 rgba(var(--wr-color-backdrop-rgb), 0.25);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  // Use the system UI stack first — symbol glyphs (⌘, ⇧, ⌥, ⌃) render
  // properly in SF Pro / Segoe UI / Cantarell, but turn into mojibake
  // boxes in many monospace fonts. Mono is the fallback for ASCII.
  font-family: var(--wr-font-family-base, system-ui, sans-serif);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--wr-kbd-color);
  background: var(--wr-kbd-bg);
  border: 1px solid var(--wr-kbd-border);
  border-bottom-width: 2px;
  border-bottom-color: var(--wr-kbd-border-bottom);
  border-radius: var(--wr-kbd-radius);
  box-shadow: var(--wr-kbd-shadow);
  line-height: 1;
  user-select: none;
  vertical-align: middle;
  white-space: nowrap;

  &--sm {
    --wr-kbd-radius: var(--wr-control-radius-sm);
    min-width: 1.375rem;
    height: 1.375rem;
    padding: 0 0.3125rem;
    font-size: var(--wr-text-xs);
  }

  &--md {
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 0.4375rem;
    font-size: var(--wr-text-sm);
  }

  &--lg {
    --wr-kbd-radius: var(--wr-control-radius-lg);
    min-width: 2.125rem;
    height: 2.125rem;
    padding: 0 0.5625rem;
    font-size: var(--wr-text-base);
  }
}