.input.otp{inline-size:100%;max-inline-size:22rem;min-inline-size:0;min-block-size:48px;text-align:center;font-variant-numeric:tabular-nums;letter-spacing:.4em;padding-inline:12px;font-size:1.125rem;direction:ltr}.otp-control{position:relative;display:grid;inline-size:min(100%,calc(var(--otp-length)*48px));direction:ltr;isolation:isolate}.otp-slots{display:grid;grid-template-columns:repeat(var(--otp-length),minmax(0,1fr));pointer-events:none}.otp-slot{position:relative;display:grid;place-items:center;min-inline-size:0;block-size:48px;background:var(--surface);color:var(--ink);border:1px solid var(--muted);font-size:1.125rem;font-variant-numeric:tabular-nums}.otp-slot+.otp-slot{border-inline-start:0}.otp-slot:first-child{border-start-start-radius:var(--control-radius,7px);border-end-start-radius:var(--control-radius,7px)}.otp-slot:last-child{border-start-end-radius:var(--control-radius,7px);border-end-end-radius:var(--control-radius,7px)}.otp-control[data-invalid] .otp-slot{border-color:var(--error)}.otp-control[data-disabled]{opacity:.5}.otp-control[data-readonly] .otp-slot{background:var(--soft)}.otp-slot[data-active]{z-index:1;outline:2px solid var(--accent);outline-offset:-2px;background:var(--tint)}.otp-slot[data-caret]:empty::after{content:'';inline-size:2px;block-size:20px;background:var(--ink)}.otp-control>.input.otp{position:absolute;inset:0;z-index:2;max-inline-size:none;block-size:100%;margin:0;padding:0;border:0;outline:0!important;box-shadow:none!important;background:transparent!important;color:transparent!important;caret-color:transparent;-webkit-text-fill-color:transparent;letter-spacing:0;cursor:text}.otp-control>.input.otp::selection{background:transparent;color:transparent}.otp-control>.input.otp:disabled{cursor:not-allowed}@media(forced-colors:active){.otp-slot[data-active]{outline-color:Highlight}.otp-control>.input.otp{forced-color-adjust:none}}