.otp-wheel{position:relative;margin:12px 0 22px;direction:ltr;transition:height .28s ease}
.otp-wheel #otpCode{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;z-index:2;cursor:text;box-sizing:border-box}
.otp-wheel-digits{position:relative;display:grid;grid-template-columns:repeat(var(--otp-count,6),minmax(0,1fr));gap:6px}
.otp-wheel-digits>span{height:50px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);font-size:clamp(14px,4vw,23px);font-weight:500;font-variant-numeric:tabular-nums}
.otp-wheel:focus-within .is-current{border-color:var(--yellow);box-shadow:0 0 15px color-mix(in srgb,var(--yellow) 18%,transparent)}
.otp-wheel-digits>.is-filled{border-color:color-mix(in srgb,var(--yellow) 50%,var(--line))}
.otp-wheel.is-orbiting #otpCode{pointer-events:none}
.otp-wheel.is-orbiting .otp-wheel-digits{height:100%;display:block}
.otp-wheel.is-orbiting .otp-wheel-digits>span{position:absolute;left:0;top:0;margin:0;border-color:var(--yellow);box-shadow:0 0 12px color-mix(in srgb,var(--yellow) 12%,transparent);will-change:transform}
.otp-orbit-check{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.7);opacity:0;width:132px;height:46px;border:2px solid #42bd86;border-radius:12px;color:#42bd86;display:grid;place-items:center;font-size:19px;font-weight:600;box-shadow:0 0 35px #42bd8624;transition:opacity .2s,transform .3s}
.otp-wheel.is-success .otp-wheel-digits{visibility:hidden}
.otp-wheel.is-success .otp-orbit-check{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media(prefers-reduced-motion:reduce){.otp-wheel,.otp-orbit-check{transition:none}.otp-wheel.is-orbiting .otp-wheel-digits{display:grid;align-content:center}.otp-wheel.is-orbiting .otp-wheel-digits>span{position:static}}
#verifyCode.otp-verified{background:#42bd86;color:#050e1d}
