.otp{position:relative;width:100%;max-width:22rem}.otp-input{position:absolute;inset:0;z-index:1;width:100%;height:100%;opacity:0;font-size:16px;cursor:text}.otp-cells{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.5rem}.otp-cells span{display:grid;place-items:center;height:3.5rem;border:1.5px solid var(--color-line,#e3e8e4);border-radius:.8rem;background:var(--color-surface,#fff);font-size:1.6rem;font-weight:800;font-variant-numeric:tabular-nums}.otp-cells span[data-filled=true]{border-color:var(--color-brand-line,#b9c6f0);background:var(--color-brand-soft,#e8edfb)}.otp:focus-within .otp-cells span[data-active=true]{border-color:var(--color-brand,#002395);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-brand,#002395) 22%,transparent)}.otp[data-invalid=true] .otp-cells span{border-color:var(--color-danger,#b42318)}@media (max-width:380px){.otp-cells{gap:.3rem}.otp-cells span{height:3rem;border-radius:.65rem;font-size:1.35rem}}