.ca-otp-boxes{position:relative;display:flex;justify-content:center;gap:clamp(5px,1.5vw,11px);width:100%;max-width:430px;margin:8px auto 4px;direction:ltr;cursor:text}
.ca-otp-box{display:flex;align-items:center;justify-content:center;flex:1;min-width:0;max-width:62px;aspect-ratio:1/1;border:1.5px solid rgba(110,145,181,.5);border-radius:15px;background:rgba(255,255,255,.08);box-shadow:inset 0 1px 2px rgba(255,255,255,.09),0 5px 16px rgba(0,0,0,.08);color:inherit;font:700 clamp(21px,5vw,30px)/1 system-ui,sans-serif;transition:transform .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease}
.ca-otp-box.is-filled{animation:ca-otp-pop .3s cubic-bezier(.2,1.5,.4,1);border-color:#32bda9;background:rgba(50,189,169,.12)}
.ca-otp-box.is-current{border-color:#39cdb5;box-shadow:0 0 0 3px rgba(57,205,181,.16),0 8px 22px rgba(21,150,131,.13);transform:translateY(-3px)}
.ca-otp-boxes.is-complete .ca-otp-box{border-color:#29bc91;box-shadow:0 0 0 2px rgba(41,188,145,.1)}
.ca-otp-real-input{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;opacity:.01!important;z-index:2!important;cursor:text!important;font-size:16px!important;letter-spacing:1em!important;box-sizing:border-box!important}
@keyframes ca-otp-pop{0%{transform:scale(.78)}65%{transform:scale(1.09)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.ca-otp-box{animation:none!important;transition:none!important}}