.otp{grid-template-columns:repeat(6,minmax(0,3.5rem));gap:clamp(6px,2vw,10px);display:grid}.otp__box{aspect-ratio:5/6;border:1.5px solid var(--color-line);border-radius:var(--radius-2);background:var(--color-surface);width:100%;min-height:48px;box-shadow:var(--lift-1);text-align:center;font:600 clamp(1.25rem, 1rem + 1vw, 1.625rem)/1 var(--font-sans);font-variant-numeric:tabular-nums;caret-color:var(--color-accent)}.otp__box:focus{border-color:var(--color-accent)}.otp__box:focus-visible{outline-offset:1px}.otp__box:disabled{opacity:1;color:var(--color-muted)}.otp[data-first] .otp__box{animation:otp-in .2s var(--ease-out) both}.otp[data-first] .otp__box:nth-child(2){animation-delay:30ms}.otp[data-first] .otp__box:nth-child(3){animation-delay:60ms}.otp[data-first] .otp__box:nth-child(4){animation-delay:90ms}.otp[data-first] .otp__box:nth-child(5){animation-delay:.12s}.otp[data-first] .otp__box:nth-child(6){animation-delay:.15s}.otp[data-status=error]{animation:otp-shake .24s var(--ease-out)}.otp[data-status=error] .otp__box{border-color:var(--color-danger);background:var(--color-danger-tint)}.otp[data-status=verified] .otp__box{border-color:var(--color-ok);background:var(--color-ok-tint);color:var(--color-ok);animation:otp-pop var(--motion-check) var(--ease-out)}@keyframes otp-in{0%{opacity:0;transform:translateY(8px)scale(.96)}}@keyframes otp-shake{20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}@keyframes otp-pop{50%{transform:scale(1.06)}}.tick path{stroke-dasharray:1;stroke-dashoffset:1px;animation:draw var(--motion-check) var(--ease-out) forwards}@keyframes draw{to{stroke-dashoffset:0}}@media (prefers-reduced-motion:reduce){.otp[data-first] .otp__box,.otp[data-status=error],.otp[data-status=verified] .otp__box{animation:none}.tick path{stroke-dashoffset:0;animation:none}}