.otp{--otp-cell:var(--color-surface-hover);--otp-cell-hover:color-mix(in oklab, var(--color-surface-hover) 80%, var(--color-text-main) 5%);--otp-r:var(--r-field,8px);--otp-h:60px;--otp-gap:8px;--otp-mid:20px;--otp-fs:1.75rem;--otp-err:var(--color-danger-text);--otp-max:26.5rem;min-width:0;color:var(--color-text-main);gap:10px;display:grid}@media (min-width:700px){.otp{--otp-r:var(--r-field,16px);--otp-h:68px;--otp-gap:10px;--otp-mid:26px;--otp-fs:2rem}}.otp--on-tint{--otp-cell:var(--color-surface-base);--otp-cell-hover:color-mix(in oklab, var(--color-surface-base) 92%, var(--color-text-main) 4%)}.otp--sm{--otp-h:52px;--otp-fs:1.45rem;--otp-max:22rem;--otp-mid:16px}@media (min-width:700px){.otp--sm{--otp-h:56px;--otp-fs:1.6rem;--otp-r:12px;--otp-mid:20px}}.otp--center{text-align:center;justify-items:center}[data-theme=dark] .otp{--otp-cell:color-mix(in oklab, var(--color-surface-hover) 80%, var(--color-surface-base));--otp-cell-hover:var(--color-surface-hover)}[data-theme=dark] .otp--on-tint{--otp-cell:var(--color-surface-base);--otp-cell-hover:var(--color-surface-elevated)}.otp [hidden]{display:none!important}.otp .lucide{flex:none;width:16px;height:16px}.otp-label{font-family:var(--font-display);margin:0;font-size:.95rem;font-weight:600;line-height:1.55;display:block}.otp-box{width:100%;max-width:var(--otp-max);direction:ltr;position:relative}.otp--center .otp-box{margin-inline:auto}.otp-input{z-index:2;border-radius:var(--otp-r);color:#0000;caret-color:#0000;width:100%;height:100%;font:inherit;letter-spacing:0;text-align:left;cursor:text;-webkit-text-fill-color:transparent;background:0 0;border:0;outline:none;margin:0;padding:0;font-size:16px;position:absolute;inset:0}.otp-input::selection{background:0 0}.otp-input:disabled{cursor:not-allowed}.otp-input:-webkit-autofill{transition:background-color 9999s;-webkit-box-shadow:inset 0 0 0 100px #0000}.otp-cells{gap:var(--otp-gap);display:flex}.otp-cell{min-width:0;height:var(--otp-h);border-radius:var(--otp-r);background:var(--otp-cell);font-family:var(--font-display);font-weight:700;font-size:var(--otp-fs);font-variant-numeric:tabular-nums;color:var(--color-text-main);transition:background-color .25s var(--ease-out,ease), box-shadow .25s var(--ease-out,ease);flex:1 1 0;place-items:center;line-height:1;display:grid;position:relative;box-shadow:inset 0 0 0 1px #0000}.otp-cell:nth-child(3){margin-right:calc(var(--otp-mid) - var(--otp-gap))}.otp-cell:nth-child(3):after{content:"";top:50%;left:calc(100% + (var(--otp-mid) - 10px) / 2);background:color-mix(in oklab, var(--color-text-main) 22%, transparent);border-radius:2px;width:10px;height:2px;position:absolute;translate:0 -50%}.otp-box:hover .otp-cell{background:var(--otp-cell-hover)}.otp-cell.is-filled>span{animation:otp-in .28s var(--ease-out,ease) both}@keyframes otp-in{0%{opacity:0;translate:0 6px;scale:.85}}:is(.otp-box:has(.otp-input:focus-visible) .otp-cell.is-active,.otp-box:has(.otp-input:focus) .otp-cell.is-active){background:var(--color-surface-base);box-shadow:inset 0 0 0 2px var(--color-border-focus)}[data-theme=dark] .otp-box:has(.otp-input:focus) .otp-cell.is-active{background:var(--color-surface-elevated)}.otp-box:has(.otp-input:focus) .otp-cell.is-active:not(.is-filled):before{content:"";background:var(--color-primary);border-radius:2px;width:2px;height:42%;animation:1.1s step-end infinite otp-caret}@keyframes otp-caret{50%{opacity:0}}.otp.is-complete .otp-cell{background:var(--color-surface-elevated);box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--color-primary) 30%, transparent)}[data-theme=dark] .otp.is-complete .otp-cell{background:color-mix(in oklab, var(--color-primary) 13%, var(--color-surface-hover))}.otp[data-state=busy] .otp-cell{animation:otp-wait 1.2s var(--ease-out,ease) infinite}.otp[data-state=busy] .otp-cell:nth-child(2){animation-delay:.1s}.otp[data-state=busy] .otp-cell:nth-child(3){animation-delay:.2s}.otp[data-state=busy] .otp-cell:nth-child(4){animation-delay:.3s}.otp[data-state=busy] .otp-cell:nth-child(5){animation-delay:.4s}.otp[data-state=busy] .otp-cell:nth-child(6){animation-delay:.5s}@keyframes otp-wait{50%{opacity:.45}}.otp[data-state=busy] .otp-input{cursor:progress}.otp[data-state=error] .otp-cell{background:color-mix(in oklab, var(--color-live) 7%, var(--otp-cell));box-shadow:inset 0 0 0 1.5px var(--otp-err)}.otp[data-state=error] .otp-box:has(.otp-input:focus) .otp-cell{background:color-mix(in oklab, var(--color-live) 7%, var(--otp-cell));box-shadow:inset 0 0 0 1.5px var(--otp-err)}.otp[data-state=error] .otp-cells{animation:otp-shake .42s var(--ease-out,ease) both}@keyframes otp-shake{20%{translate:-6px}40%{translate:5px}60%{translate:-3px}80%{translate:2px}}.otp-err{color:var(--otp-err);align-items:flex-start;gap:6px;margin:0;font-size:.88rem;line-height:1.6;display:flex}.otp-err .lucide{margin-top:4px}.otp--center .otp-err{justify-content:center}.otp:has(.otp-input:disabled) .otp-cell{opacity:.55}.otp:has(.otp-input:disabled) .otp-box:hover .otp-cell{background:var(--otp-cell)}.otp-hint{color:var(--color-text-muted);margin:0;font-size:.92rem;line-height:1.65}.otp-hint bdi{color:var(--color-text-main);font-weight:500}@media (prefers-reduced-motion:reduce){.otp-cell.is-filled>span,.otp[data-state=error] .otp-cells,.otp[data-state=busy] .otp-cell{animation:none}.otp-box:has(.otp-input:focus) .otp-cell.is-active:not(.is-filled):before{animation:none}}