@scope (otp-input-ui) {
  :where(:scope) {
    /* ── Tokens ── */
    --otp-input-size-default:         var(--a-size);
    --otp-input-gap-default:          var(--a-space-2);
    --otp-input-radius-default:       var(--a-radius-md);
    --otp-input-border-default:       var(--a-ui-border);
    --otp-input-border-hover-default: var(--a-ui-border-hover);
    --otp-input-border-focus-default: var(--a-accent);
    --otp-input-bg-disabled-default:  var(--a-ui-bg-disabled);
    --otp-input-fg-disabled-default:  var(--a-ui-text-disabled);
    --otp-input-border-disabled-default: var(--a-ui-border-disabled);
    --otp-input-font-default:         var(--a-font-family-code);
    --otp-input-font-size-default:    var(--a-body-md);
    --otp-input-bg-default:           var(--a-ui-bg);
    --otp-input-fg-default:           var(--a-ui-text);

    /* ── Transitions ── */
    --otp-input-duration-default:     var(--a-duration-fast);
    --otp-input-easing-default:       var(--a-easing);
  }

  :scope {
    /* ── Base ── */
    box-sizing: border-box;
    display: flex;
    justify-content: space-around;
    gap: var(--otp-input-gap, var(--otp-input-gap-default));
  }

  /* ── Digit inputs ── */
  [slot="digit"] {
    box-sizing: border-box;
    width: var(--otp-input-size, var(--otp-input-size-default));
    height: var(--otp-input-size, var(--otp-input-size-default));
    text-align: center;
    border: 1px solid var(--otp-input-border, var(--otp-input-border-default));
    border-radius: var(--otp-input-radius, var(--otp-input-radius-default));
    background: var(--otp-input-bg, var(--otp-input-bg-default));
    color: var(--otp-input-fg, var(--otp-input-fg-default));
    font-family: var(--otp-input-font, var(--otp-input-font-default));
    font-size: var(--otp-input-font-size, var(--otp-input-font-size-default));
    line-height: 1;
    outline: none;
    transition: border-color var(--otp-input-duration, var(--otp-input-duration-default)) var(--otp-input-easing, var(--otp-input-easing-default));
    /* Hide number spinner */
    -moz-appearance: textfield;
  }
  [slot="digit"]::-webkit-inner-spin-button,
  [slot="digit"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  [slot="digit"]:hover:not(:disabled) {
    border-color: var(--otp-input-border-hover, var(--otp-input-border-hover-default));
  }

  [slot="digit"]:focus {
    border-color: var(--otp-input-border-focus, var(--otp-input-border-focus-default));
  }

  /* ── Disabled ── */
  :scope[disabled] {
    pointer-events: none;
  }
  :scope[disabled] [slot="digit"] {
    background: var(--otp-input-bg-disabled, var(--otp-input-bg-disabled-default));
    color: var(--otp-input-fg-disabled, var(--otp-input-fg-disabled-default));
    /* Dashed border rendered via SVG border-image for consistent ~8px
       dashes across browsers (native `border-style: dashed` is too short
       and varies by engine). The border-color fallback is used when
       border-image isn't supported. */
    border: 1px dashed var(--otp-input-border-disabled, var(--otp-input-border-disabled-default));
    border-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' preserveAspectRatio='none'><rect x='0.5' y='0.5' width='27' height='27' fill='none' stroke='%23999' stroke-width='1' stroke-dasharray='8 6'/></svg>") 1 repeat;
    cursor: not-allowed;
  }
}
