.otp{--otp-spring:cubic-bezier(.34, 1.56, .64, 1);--otp-out:cubic-bezier(.22, 1, .36, 1);gap:20px;display:grid}.otp-head h2{letter-spacing:-1px;animation:otp-fade .22s var(--otp-out);margin:0 0 8px;font-size:26px;font-weight:450}.otp-head p{color:var(--text-2,#b8b8c2);font-size:14px;line-height:1.6}.otp-email{color:var(--text-1,#f4f4f7);overflow-wrap:anywhere;font-weight:550}@keyframes otp-fade{0%{opacity:0;transform:translateY(3px)}}.otp-stage{height:232px;margin:-8px -4px;position:relative;container-type:inline-size}.otp-slot{--gap:8px;--cell:min(52px, calc((100cqw - (var(--slots) - 1) * var(--gap)) / var(--slots)));--radius:min(80px, 25cqw);--row:calc((var(--i) - (var(--slots) - 1) / 2) * (var(--cell) + var(--gap)));--x:calc(var(--circle-x) * var(--radius));--y:calc(var(--circle-y) * var(--radius));width:var(--cell);height:calc(var(--cell) * 1.18);margin:calc(var(--cell) * -.59) 0 0 calc(var(--cell) / -2);transform:translate(var(--row), 0);position:absolute;top:50%;left:50%}.otp-digit{background:var(--tint-1,#ffffff09);width:100%;height:100%;box-shadow:inset 0 0 0 1px var(--line-2,#ffffff21);color:var(--text-1,#f4f4f7);font-variant-numeric:tabular-nums;transition:box-shadow .14s var(--otp-out), background-color .14s var(--otp-out);border-radius:14px;place-items:center;font-size:26px;font-weight:550;line-height:1;display:grid;position:relative}.otp-slot[data-filled] .otp-digit{background:var(--tint-2,#ffffff0f);animation:otp-pop .22s var(--otp-spring)}@keyframes otp-pop{0%{opacity:.4;transform:scale(.82)}}.otp-digit:after{content:"";border-radius:inherit;background:linear-gradient(135deg, rgb(var(--accent-rgb,255 255 255) / .9), transparent 40%, transparent 65%, rgb(var(--accent-rgb,255 255 255) / .45));opacity:0;padding:1px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.otp-stage:focus-within .otp-slot[data-active=true] .otp-digit{box-shadow:inset 0 0 0 1px var(--accent-line,#fff3), 0 0 0 4px var(--accent-soft,#ffffff1a)}.otp-stage:focus-within .otp-slot[data-active=true]:not([data-filled]) .otp-digit:before{content:"";background:var(--text-1,#f4f4f7);border-radius:1px;width:2px;height:26px;animation:1s steps(2,end) infinite otp-caret}@keyframes otp-caret{50%{opacity:0}}.otp-input{z-index:3;caret-color:#0000;opacity:0;cursor:text;width:100%;height:68px;min-height:0;font-size:16px;position:absolute;inset:calc(50% - 34px) 0 auto;color:#0000!important;background:0 0!important;border:0!important;padding:0!important}.otp-input:focus,.otp-input:focus-visible{box-shadow:none!important;outline:none!important}.otp-tile{background:var(--surface-3,#1f1f27);width:108px;height:108px;box-shadow:var(--shadow-pop,0 24px 60px -12px #000000a6), 0 0 48px rgb(var(--accent-rgb,255 255 255) / .12);color:var(--text-1,#f4f4f7);opacity:0;pointer-events:none;transition:background-color .22s var(--otp-out), box-shadow .22s var(--otp-out), color .22s var(--otp-out);border-radius:24px;flex-direction:column;justify-content:center;align-items:center;gap:10px;margin:-54px 0 0 -54px;font-size:12px;font-weight:500;display:flex;position:absolute;top:50%;left:50%;transform:scale(.4)}.otp-tile-icon{place-items:center;width:30px;height:30px;display:grid}.otp-spinner{border:2.4px solid var(--line-2,#ffffff21);border-top-color:var(--accent,#fff);border-radius:50%;width:26px;height:26px;animation:.7s linear infinite otp-rotate}.otp-spinner.small{border-width:2px;width:14px;height:14px}@keyframes otp-rotate{to{transform:rotate(360deg)}}.otp-stage[data-phase=verifying] .otp-slot{animation:otp-travel var(--otp-duration) both}.otp-stage[data-phase=verifying] .otp-digit{animation:otp-spin var(--otp-duration) both}.otp-stage[data-phase=verifying] .otp-digit:after{opacity:1}.otp-stage[data-phase=verifying] .otp-tile{animation:otp-merge var(--otp-duration) both}.otp-stage:is([data-phase=success],[data-phase=incorrect],[data-phase=error]) .otp-slot{opacity:0;transform:translate(0)}.otp-stage:is([data-phase=success],[data-phase=incorrect],[data-phase=error]) .otp-tile{opacity:1;transform:scale(1)}.otp-stage[data-phase=success] .otp-tile{background:color-mix(in srgb, var(--good,#8fe3b0) 14%, var(--surface-2,#18181f));box-shadow:inset 0 0 0 1px var(--good-line,#8fe3b073), 0 0 56px var(--good-soft,#8fe3b024);color:var(--good,#8fe3b0)}.otp-stage:is([data-phase=incorrect],[data-phase=error]) .otp-tile{background:color-mix(in srgb, var(--bad,#ff9d9d) 14%, var(--surface-2,#18181f));box-shadow:inset 0 0 0 1px var(--bad-line,#ff9d9d73), 0 0 48px var(--bad-soft,#ff9d9d1f);color:var(--bad,#ff9d9d)}.otp-stage[data-phase=incorrect] .otp-tile{animation:otp-shake .28s var(--otp-out)}.otp-stage:is([data-phase=incorrect],[data-phase=error]) .otp-tile-icon{animation:otp-pop .22s var(--otp-spring)}.otp-tile .tick path{stroke-dasharray:1;animation:otp-draw .32s var(--otp-out) 60ms both}@keyframes otp-draw{0%{stroke-dashoffset:1px}to{stroke-dashoffset:0}}@keyframes otp-travel{0%{opacity:1;transform:translate(var(--row), 0);animation-timing-function:cubic-bezier(.2,.7,.25,1)}20%,59%{opacity:1;transform:translate(var(--x), var(--y));animation-timing-function:cubic-bezier(.65,0,.35,1)}79%{opacity:1;transform:translate(0)}85%,to{opacity:0;transform:translate(0)}}@keyframes otp-spin{0%,21%{animation-timing-function:cubic-bezier(.45,0,.3,1);transform:rotate(0)}59%{animation-timing-function:cubic-bezier(.45,0,.3,1);transform:rotate(360deg)}80%,to{transform:rotate(540deg)scale(.75)}}@keyframes otp-merge{0%,68%{opacity:0;animation-timing-function:cubic-bezier(.2,.8,.25,1);transform:scale(.4)rotate(-45deg)}82%{opacity:1;transform:scale(1.04)}90%,to{opacity:1;transform:scale(1)}}@keyframes otp-shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}55%{transform:translate(5px)}80%{transform:translate(-2px)}}.otp-status{min-height:20px;color:var(--text-3,#858590);text-align:center;margin-top:-8px;font-size:13px;line-height:1.5}.otp-status p+p{color:var(--text-2,#b8b8c2);margin-top:6px}.otp-error{color:var(--bad,#ff9d9d)}.otp-submit{justify-content:center;gap:8px;width:100%}.otp-actions{flex-wrap:wrap;justify-content:center;gap:8px 24px;display:flex}.otp-text-button{color:var(--accent-text,#f4f4f7);cursor:pointer;background:0 0;border:0;padding:4px 0;font-size:13px}.otp-text-button:disabled{color:var(--text-4,#5f5f6a);cursor:default}.otp-tabular{font-variant-numeric:tabular-nums}@media (max-width:430px){.otp-digit{border-radius:10px;font-size:23px}}@media (prefers-reduced-motion:reduce){.otp-stage[data-phase=verifying] .otp-slot{opacity:0;animation:none}.otp-stage[data-phase=verifying] .otp-tile{opacity:1;animation:none;transform:scale(1)}.otp-digit,.otp-tile-icon,.otp-stage[data-phase=incorrect] .otp-tile,.otp-tile .tick path{stroke-dasharray:none;animation:none!important}}