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

    /* Size — defaults to md */
    --kbd-font-size-default: var(--a-ui-tiny);
    --kbd-height-default:    1.25rem;
    --kbd-min-width-default: 1.25rem;
    --kbd-px-default:        var(--a-space-1);
    --kbd-weight-default:    var(--a-weight-medium);

    /* Size: sm */
    --kbd-font-size-sm-default: var(--a-ui-tiny);
    --kbd-height-sm-default:    1rem;
    --kbd-min-width-sm-default: 1rem;

    /* Size: lg */
    --kbd-font-size-lg-default: var(--a-ui-sm);
    --kbd-height-lg-default:    1.5rem;
    --kbd-min-width-lg-default: 1.5rem;
    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, var(--kbd-min-width-default));
    height: var(--kbd-height, var(--kbd-height-default));
    padding-inline: var(--kbd-px, var(--kbd-px-default));
    font-family: var(--kbd-font, var(--kbd-font-default));
    font-size: var(--kbd-font-size, var(--kbd-font-size-default));
    font-weight: var(--kbd-weight, var(--kbd-weight-default));
    line-height: 1;
    color: var(--kbd-fg, var(--kbd-fg-default));
    background: var(--kbd-bg, var(--kbd-bg-default));
    border: 1px solid var(--kbd-border, var(--kbd-border-default));
    border-bottom-width: 2px;
    border-radius: var(--kbd-radius, var(--kbd-radius-default));
    vertical-align: middle;
    white-space: nowrap;
    user-select: none;
  }

  /* Sizes */
  :scope[size="sm"] {
    --kbd-font-size-default: var(--kbd-font-size-sm, var(--kbd-font-size-sm-default));
    --kbd-height-default:    var(--kbd-height-sm, var(--kbd-height-sm-default));
    --kbd-min-width-default: var(--kbd-min-width-sm, var(--kbd-min-width-sm-default));
  }
  :scope[size="lg"] {
    --kbd-font-size-default: var(--kbd-font-size-lg, var(--kbd-font-size-lg-default));
    --kbd-height-default:    var(--kbd-height-lg, var(--kbd-height-lg-default));
    --kbd-min-width-default: var(--kbd-min-width-lg, var(--kbd-min-width-lg-default));
  }
}
