.otp{--otp-gap:8px;max-width:384px;display:block;position:relative}.field .otp-input{z-index:1;color:#0000;caret-color:#0000;cursor:text;background:0 0;border:0;outline:none;width:100%;height:100%;min-height:0;padding:0;font-size:16px;position:absolute;inset:0}.otp-input::selection{background:0 0}.otp-input:-webkit-autofill{-webkit-text-fill-color:transparent;transition:background-color 99999s}.otp-boxes{gap:var(--otp-gap);grid-template-columns:repeat(6,minmax(0,1fr));display:grid}.otp-box{--i:0;background:var(--white);border:1.5px solid var(--input-line);height:56px;box-shadow:0 4px 0 var(--input-line);font-family:var(--font-display);font-variant-numeric:tabular-nums;color:var(--ink);justify-content:center;align-items:center;font-size:26px;font-weight:800;transition:transform .14s ease-out;display:flex;position:relative}.otp-box.is-filled{background:var(--sage-tint);border-color:var(--sage);transform:translateY(4px);box-shadow:inset 0 2px 4px #17201b2e}.otp-box.is-active{border-color:var(--ink)}.otp-box.is-active:after{content:"";border:3px solid var(--lime);filter:drop-shadow(0 0 6px #c9e36be6);pointer-events:none;animation:1.1s ease-in-out infinite alternate otp-glow;position:absolute;inset:-5px}.otp-box.is-active:not(.is-filled):before{content:"";background:var(--ink);width:2px;height:26px;animation:1s step-end infinite otp-caret}.otp-card{background:var(--deep-green);height:60px;color:var(--white);font-family:var(--font-display);opacity:0;pointer-events:none;justify-content:center;align-items:center;gap:12px;font-size:22px;font-weight:800;display:flex;position:absolute;inset:0 0 auto;transform:scale(.6)}.otp-card-tick{background:var(--lime);justify-content:center;align-items:center;width:32px;height:32px;display:flex}.otp-verified .otp-box{animation:.42s cubic-bezier(.5,0,.2,1) forwards otp-fold;animation-delay:calc(var(--i) * 30ms)}.otp-verified .otp-card{animation:.42s cubic-bezier(.2,.8,.2,1.2) .32s forwards otp-card-in}@keyframes otp-glow{0%{opacity:.55}to{opacity:1}}@keyframes otp-caret{50%{opacity:0}}@keyframes otp-fold{to{opacity:0;transform:translateX(calc((2.5 - var(--i)) * (100% + var(--otp-gap)))) scale(.5)}}@keyframes otp-card-in{to{opacity:1;transform:none}}.btn-sweep{isolation:isolate;position:relative;overflow:hidden}.btn-sweep[disabled]{opacity:1;cursor:progress}.sweep-fill{z-index:-1;background:var(--lime-shadow);opacity:.45;transform-origin:0;position:absolute;inset:0;transform:scaleX(0)}.btn-sweep.is-sending .sweep-fill{animation:2.4s cubic-bezier(.2,.7,.2,1) forwards sweep-fill}.btn-sweep.is-done .sweep-fill{animation:.24s ease-out sweep-finish;transform:scaleX(1)}.sweep-label{transition:opacity .15s ease-out}.btn-sweep.is-done .sweep-label{opacity:0}.sweep-tick{opacity:0;pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;inset:0;transform:scale(.4)}.btn-sweep.is-done .sweep-tick{animation:.7s cubic-bezier(.2,.8,.2,1.3) forwards sweep-tick}@keyframes sweep-fill{0%{transform:scaleX(0)}to{transform:scaleX(.92)}}@keyframes sweep-finish{0%{transform:scaleX(.85)}to{transform:scaleX(1)}}@keyframes sweep-tick{40%{opacity:1;transform:scale(1.15)}60%,to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.otp-box,.sweep-label{transition:none}.otp-box.is-active:after,.otp-box.is-active:not(.is-filled):before{animation:none}.otp-verified .otp-box{opacity:0;animation:none}.otp-verified .otp-card{opacity:1;animation:none;transform:none}.btn-sweep.is-sending .sweep-fill{animation:none;transform:scaleX(1)}.btn-sweep.is-done .sweep-fill{animation:none}.btn-sweep.is-done .sweep-tick{animation-duration:1ms}}
