@scope (kbd-ui) {
  :where(:scope) {
    /* ── Tokens ── */
    --kbd-bg:        var(--a-bg-muted);
    --kbd-fg:        var(--a-fg);
    --kbd-border:    var(--a-border-subtle);
    --kbd-radius:    var(--a-radius-sm);
    --kbd-font:      var(--a-font-family-code);
    --kbd-px:        var(--a-space-1);
    --kbd-weight:    var(--a-weight-medium);

    /* Size tiers — sm 10 / md 12 / lg 14 glyph ramp (--a-ui-tiny/xs/md).
       md reads distinctly larger than sm inside the 20px cap; previously
       md and sm both resolved to --a-ui-tiny so the glyphs were identical.
       md is the default; the [size] rules below re-point the active token. */
    --kbd-font-size-sm: var(--a-ui-tiny);
    --kbd-font-size-md: var(--a-ui-xs);
    --kbd-font-size-lg: var(--a-ui-md);
    --kbd-font-size:    var(--kbd-font-size-md);

    --kbd-height-sm: 1rem;
    --kbd-height-md: 1.25rem;
    --kbd-height-lg: 1.5rem;
    --kbd-height:    var(--kbd-height-md);

    --kbd-min-width-sm: 1rem;
    --kbd-min-width-md: 1.25rem;
    --kbd-min-width-lg: 1.5rem;
    --kbd-min-width:    var(--kbd-min-width-md);

    text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
  }

  :scope {
    /* ── Base ── */
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--kbd-min-width);
    height: var(--kbd-height);
    padding-inline: var(--kbd-px);
    font-family: var(--kbd-font);
    font-size: var(--kbd-font-size);
    font-weight: var(--kbd-weight);
    line-height: 1;
    color: var(--kbd-fg);
    background: var(--kbd-bg);
    border: 1px solid var(--kbd-border);
    border-bottom-width: 2px;
    border-radius: var(--kbd-radius);
    vertical-align: middle;
    white-space: nowrap;
    user-select: none;
  }

  /* Sizes — re-point the active token to the matching tier. */
  :scope[size="sm"] {
    --kbd-font-size: var(--kbd-font-size-sm);
    --kbd-height:    var(--kbd-height-sm);
    --kbd-min-width: var(--kbd-min-width-sm);
  }
  :scope[size="md"] {
    --kbd-font-size: var(--kbd-font-size-md);
    --kbd-height:    var(--kbd-height-md);
    --kbd-min-width: var(--kbd-min-width-md);
  }
  :scope[size="lg"] {
    --kbd-font-size: var(--kbd-font-size-lg);
    --kbd-height:    var(--kbd-height-lg);
    --kbd-min-width: var(--kbd-min-width-lg);
  }
}
