.otp{position:relative;width:100%;height:54px;cursor:text;--orbit:0;--done:0;-webkit-tap-highlight-color:transparent}.otp-box,.otp-burst,.otp-hub,.otp-ok,.otp-ring{position:absolute;left:50%;top:50%}.otp-box{transform:translate(-50%,-50%);width:46px;height:54px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);font-family:Space Grotesk,DM Sans,sans-serif;font-size:24px;font-weight:600;color:#fff;transition:border-color .25s,background .25s,box-shadow .25s,color .25s;will-change:transform}.otp-box.filled{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.26)}.otp-box.active{border-color:#FF3B4E;box-shadow:0 0 0 4px rgba(229,36,59,.2)}.otp:not(:focus-within) .otp-box.active{border-color:rgba(255,255,255,.16);box-shadow:none}.otp:not(:focus-within) .otp-caret{opacity:0;animation:none}.otp-caret{width:2px;height:24px;border-radius:2px;background:#FF5A69;animation:otp-blink 1s steps(1) infinite}@keyframes otp-blink{50%{opacity:0}}.otp-ring{transform:translate(-50%,-50%) rotate(-90deg);overflow:visible;opacity:calc(var(--orbit) * (1 - var(--done)))}.otp-ring circle{fill:none;stroke:rgba(255,255,255,.12);stroke-width:1.5;stroke-dasharray:calc(var(--orbit) * 100) 100}.otp-hub{width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#FF5A69;box-shadow:0 0 12px rgba(229,36,59,.9);opacity:calc(var(--orbit) * (1 - var(--done)));transform:scale(calc(.4 + var(--orbit) * .6))}.otp[data-state=loading] .otp-hub{animation:otp-pulse 1s ease-in-out infinite}@keyframes otp-pulse{50%{box-shadow:0 0 22px 4px rgba(229,36,59,.7)}}.otp[data-state=loading] .otp-box{border-color:rgba(255,90,105,.5);background:rgba(229,36,59,.1)}.otp[data-state=ok] .otp-box{border-color:rgba(74,222,128,.7);background:rgba(74,222,128,.12);color:#4ADE80;box-shadow:0 0 18px -4px rgba(74,222,128,.6)}.otp[data-state=ok] .otp-ring circle{stroke:rgba(74,222,128,.45)}.otp-ok{width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:18px;display:flex;align-items:center;justify-content:center;color:#4ADE80;background:rgba(74,222,128,.14);border:1.5px solid rgba(74,222,128,.75);box-shadow:0 0 34px -6px rgba(74,222,128,.8);opacity:0;transform:scale(.4);transition:opacity .3s,transform .5s cubic-bezier(.34,1.56,.64,1)}.otp-ok path{stroke-dasharray:100;stroke-dashoffset:100}.otp[data-state=ok] .otp-ok{opacity:1;transform:scale(1);transition-delay:.32s}.otp[data-state=ok] .otp-ok path{animation:otp-draw .45s ease .55s forwards}@keyframes otp-draw{to{stroke-dashoffset:0}}.otp-ok:after,.otp-ok:before{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1.5px solid rgba(74,222,128,.6);opacity:0}.otp[data-state=ok] .otp-ok:before{animation:otp-ripple 1s ease-out .45s forwards}.otp[data-state=ok] .otp-ok:after{animation:otp-ripple 1s ease-out .62s forwards}@keyframes otp-ripple{0%{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(2.1)}}.otp-burst{width:0;height:0}.otp-burst i{position:absolute;width:4px;height:4px;margin:-2px;border-radius:50%;background:#4ADE80;box-shadow:0 0 8px #4ADE80;opacity:0}.otp[data-state=ok] .otp-burst i{animation:otp-spark .9s cubic-bezier(.2,.8,.3,1) .45s forwards}@keyframes otp-spark{0%{opacity:1;transform:rotate(var(--a)) translateX(20px) scale(1)}to{opacity:0;transform:rotate(var(--a)) translateX(var(--d)) scale(.4)}}.otp[data-state=error] .otp-box{border-color:#FF3B4E;background:rgba(229,36,59,.14);color:#FF8090}.otp-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;padding:0;margin:0;font-size:16px;color:transparent;caret-color:transparent;background:transparent;z-index:2}.otp-input:disabled{pointer-events:none}@media (max-width:380px){.otp-box{width:40px;height:50px;font-size:21px}}@media (prefers-reduced-motion:reduce){.otp-caret,.otp[data-state=loading] .otp-hub{animation:none}}