.otp{--otp-box:46px;--otp-gap:10px;--otp-glow:#22d3ee;width:calc(var(--otp-box) * 6 + var(--otp-gap) * 5);max-width:100%;height:54px;position:relative}@media (max-width:380px){.otp{--otp-box:40px;--otp-gap:7px}}.field .otp .otp__input{z-index:2;color:#0000;caret-color:#0000;width:100%;height:100%;min-height:0;box-shadow:none;cursor:text;background:0 0;border:0;padding:0;font-size:16px;position:absolute;inset:0}.field .otp .otp__input:focus,.field .otp .otp__input:focus-visible{outline:none}.field .otp .otp__input::selection{background:0 0}.otp__boxes{gap:var(--otp-gap);display:flex;position:absolute;inset:0}.otp__box{flex:0 0 var(--otp-box);border:1px solid var(--color-border);background:linear-gradient(135deg, var(--color-surface), var(--color-background));color:var(--color-primary);font-variant-numeric:tabular-nums;border-radius:10px;justify-content:center;align-items:center;font-size:22px;font-weight:700;display:flex;position:relative;box-shadow:0 1px 2px #0000001a}.otp__box--filled{border-color:var(--color-border-strong,#8a94a3)}.field:has(.otp__input[aria-invalid=true]) .otp__box{border-color:var(--color-danger)}.otp__digit{animation:.3s ease-in-out both otp-digit-in}@keyframes otp-digit-in{0%{opacity:0;filter:blur(2px);transform:translateY(4px)}}.otp__glow{width:var(--otp-box);border:1px solid var(--otp-glow);pointer-events:none;opacity:0;border-radius:10px;height:100%;transition:opacity .15s;position:absolute;top:0;left:0;box-shadow:inset 0 0 12px #22d3ee99,0 0 0 3px #22d3ee2e}.otp:focus-within .otp__glow{opacity:1}.otp.otp--complete .otp__glow{opacity:0}.otp__underline{fill:none;width:100%;height:100%;stroke:var(--otp-glow);stroke-width:.4px;animation:1s steps(2,jump-none) infinite otp-caret;position:absolute;inset:0}@keyframes otp-caret{50%{opacity:0}}.otp__ring{border:1px solid var(--otp-glow);opacity:0;pointer-events:none;border-radius:10px;position:absolute;inset:0;box-shadow:inset 0 0 12px #22d3ee80}.otp--complete .otp__ring{animation:.5s ease-in-out both otp-ring}.otp--complete .otp__box:nth-child(2) .otp__ring{animation-delay:40ms}.otp--complete .otp__box:nth-child(3) .otp__ring{animation-delay:80ms}.otp--complete .otp__box:nth-child(4) .otp__ring{animation-delay:.12s}.otp--complete .otp__box:nth-child(5) .otp__ring{animation-delay:.16s}.otp--complete .otp__box:nth-child(6) .otp__ring{animation-delay:.2s}@keyframes otp-ring{0%{opacity:0;transform:scale(.85)}50%{opacity:1}to{opacity:0;filter:blur(2px);transform:scale(1.3)}}.otp__switch{min-height:44px;color:var(--color-primary);font:inherit;cursor:pointer;text-underline-offset:3px;background:0 0;border:0;align-self:flex-start;margin-top:4px;padding:8px 0;font-size:14px;font-weight:600;text-decoration:underline}@media (prefers-reduced-motion:reduce){.otp__digit,.otp__underline,.otp--complete .otp__ring{animation:none}}