.otp{--otp-gap:8px;--otp-h:60px;--otp-ease:cubic-bezier(.34,1.4,.44,1);max-width:340px;height:var(--otp-h);transition:height .5s var(--otp-ease);margin-left:auto;margin-right:auto;position:relative}.otp-row{gap:var(--otp-gap);justify-content:center;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}.otp-cell{box-sizing:border-box;min-width:0;height:var(--otp-h);text-align:center;font-variant-numeric:tabular-nums;caret-color:transparent;color:var(--otp-cream,#f2ede3);transform:translateX(var(--dx,0))scale(var(--sc,1));opacity:var(--op,1);transition:transform .36s var(--otp-ease),opacity .3s ease,border-color .4s ease,color .25s ease;background:rgba(255,255,255,.043);border:1px solid rgba(242,237,227,.1);border-radius:13px;outline:none;flex:1 1 0;font-size:22px;font-weight:600}.otp-cell:disabled{cursor:default}.otp-cell[data-filled=true]{color:#e9c87a;background:linear-gradient(rgba(233,200,122,.1),rgba(233,200,122,.03));border-color:rgba(201,169,110,.48)}.otp-ring{box-sizing:border-box;left:var(--rleft,0);width:var(--rw);margin-top:calc(var(--rh,60px)*-.5);pointer-events:none;height:var(--rh,60px);border-radius:var(--rr,14px);transform:translateX(var(--rx,0));opacity:0;transition:left .55s var(--otp-ease),width .55s var(--otp-ease),height .55s var(--otp-ease),margin .55s var(--otp-ease),border-radius .55s ease,border-color .4s ease,opacity .25s ease;border:1.5px solid rgba(233,200,122,.9);position:absolute;top:50%;box-shadow:inset 0 0 22px rgba(201,169,110,.18),0 4px 18px -6px rgba(233,200,122,.42)}.otp-ring[data-on=true]{opacity:1}.otp-ring[data-state=checking]{animation:1.5s cubic-bezier(.4,0,.6,1) infinite otp-breathe}@keyframes otp-breathe{0%,to{box-shadow:0 4px 20px -6px rgba(233,200,122,.45)}50%{box-shadow:0 4px 28px -4px rgba(255,226,163,.75)}}.otp-ring[data-state=done]{border-width:2.5px;border-color:rgba(99,214,160,.95);box-shadow:0 0 40px -10px rgba(99,214,160,.75)}.otp-ring[data-state=bad]{border-color:rgba(212,88,72,.9);box-shadow:0 0 24px -8px rgba(212,88,72,.7)}.otp-check{opacity:0;transition:opacity .3s ease,transform .5s var(--otp-ease);place-items:center;display:grid;position:absolute;top:0;bottom:0;left:0;right:0;transform:scale(.5)}.otp-check[data-on=true]{opacity:1;transform:scale(1)}.otp-check svg{fill:none;stroke:#7ee6b4;stroke-width:2.4px;stroke-linecap:round;stroke-linejoin:round;width:34px;height:34px}.otp-check path{stroke-dasharray:26;stroke-dashoffset:26px}.otp-check[data-on=true] path{animation:otp-draw .45s 80ms var(--otp-ease)forwards}@keyframes otp-draw{to{stroke-dashoffset:0}}.otp-shake{animation:.42s otp-shake}@keyframes otp-shake{0%,to{transform:translate(0)}22%{transform:translate(-7px)}55%{transform:translate(6px)}80%{transform:translate(-3px)}}@media (prefers-reduced-motion:reduce){.otp,.otp-cell,.otp-ring,.otp-check{transition-duration:.01ms}.otp-ring[data-state=checking],.otp-check[data-on=true] path,.otp-shake{animation:none}.otp-check[data-on=true] path{stroke-dashoffset:0}}