.otp{--otp-box:clamp(46px, 12vw + 8px, 56px);--otp-step:calc(var(--otp-box) + 12px);--otp-grid:calc(var(--otp-box) + 20px);--otp-idle:#2d3f56;--otp-live:#38bdf8;--otp-live-glow:#38bdf873;--otp-ok:#34d399;--otp-ok-soft:#6ee7b7;--otp-ok-glow:#34d39973;position:relative}.otp-stage{height:88px;transition:height .48s cubic-bezier(.22,1,.36,1);position:relative}.otp:not([data-phase=input]) .otp-stage{height:220px}.otp-rig{position:absolute;inset:0}.otp-node{width:var(--otp-box);height:var(--otp-box);margin-left:calc(var(--otp-box) / -2);margin-top:calc(var(--otp-box) / -2);background:var(--color-bg-card);border:1px solid var(--otp-idle);transform:translate(var(--otp-rx), 0);border-radius:14px;justify-content:center;align-items:center;transition:border-color .22s,box-shadow .22s;display:flex;position:absolute;top:50%;left:50%}.otp-node[data-state=active]{border-color:var(--otp-live);box-shadow:0 0 0 1px #38bdf838, 0 0 18px -2px var(--otp-live-glow)}.otp-node[data-state=filled]{border-color:var(--otp-ok);box-shadow:0 0 0 1px #34d39933, 0 0 20px -2px var(--otp-ok-glow)}.otp-digit{color:var(--color-text-main);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:24px;font-weight:600;line-height:1}.otp-caret{background:var(--otp-live);border-radius:1px;width:2px;height:26px;animation:1.05s infinite otp-blink}@keyframes otp-blink{0%,45%{opacity:1}55%,to{opacity:0}}.otp-trace{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.otp-trace-path{fill:none;stroke:var(--otp-ok-soft);stroke-width:2px;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100px}.otp-node[data-state=filled] .otp-trace-path{animation:otp-draw var(--otp-d-trace) ease forwards}@keyframes otp-draw{to{stroke-dashoffset:0}}.otp[data-phase=gather] .otp-node{animation:otp-gather var(--otp-d-gather) cubic-bezier(.34, 1.16, .42, 1) forwards}@keyframes otp-gather{0%{transform:translate(var(--otp-rx), 0) rotate(0deg)}45%{transform:translate(calc(var(--otp-rx) + var(--otp-sx)), var(--otp-sy)) rotate(var(--otp-srot))}to{transform:translate(calc(var(--otp-rx) + var(--otp-gx)), var(--otp-gy)) rotate(0deg)}}.otp[data-phase=link] .otp-node{transform:translate(calc(var(--otp-rx) + var(--otp-gx)), var(--otp-gy))}.otp-links{--otp-links-size:calc(var(--otp-grid) * 2.8947);width:var(--otp-links-size);height:var(--otp-links-size);margin:calc(var(--otp-links-size) / -2) 0 0 calc(var(--otp-links-size) / -2);pointer-events:none;opacity:0;position:absolute;top:50%;left:50%}.otp[data-phase=link] .otp-links,.otp[data-phase=spin] .otp-links{opacity:1}.otp[data-phase=seal] .otp-links,.otp[data-phase=done] .otp-links{opacity:0;transition:opacity .22s}.otp-link{fill:none;stroke:var(--otp-ok-soft);stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100px}.otp[data-phase=link] .otp-link{animation:otp-draw var(--otp-d-link) ease forwards}.otp[data-phase=spin] .otp-link,.otp[data-phase=seal] .otp-link,.otp[data-phase=done] .otp-link{stroke-dashoffset:0}.otp[data-phase=spin] .otp-rig{animation:otp-rig-spin var(--otp-d-spin) cubic-bezier(.65, 0, .35, 1) forwards}.otp[data-phase=spin] .otp-node{animation:otp-node-spin var(--otp-d-spin) cubic-bezier(.65, 0, .35, 1) forwards}.otp[data-phase=seal] .otp-rig,.otp[data-phase=done] .otp-rig{transform:rotate(360deg)}@keyframes otp-rig-spin{to{transform:rotate(360deg)}}@keyframes otp-node-spin{0%{transform:translate(calc(var(--otp-rx) + var(--otp-gx)), var(--otp-gy)) rotate(0deg)}to{transform:translate(calc(var(--otp-rx) + var(--otp-gx)), var(--otp-gy)) rotate(-360deg)}}.otp[data-phase=seal] .otp-node,.otp[data-phase=done] .otp-node{animation:otp-collapse var(--otp-d-collapse) cubic-bezier(.5, 0, .75, 0) forwards}@keyframes otp-collapse{0%{transform:translate(calc(var(--otp-rx) + var(--otp-gx)), var(--otp-gy)) rotate(-360deg) scale(1);opacity:1}to{opacity:0;transform:translate(0)rotate(-360deg)scale(.42)}}.otp-seal{border:1.5px solid var(--otp-ok);background:var(--color-bg-card);width:76px;height:76px;box-shadow:0 0 0 1px #34d3992e, 0 0 34px -6px var(--otp-ok-glow);opacity:0;pointer-events:none;border-radius:20px;justify-content:center;align-items:center;margin:-38px 0 0 -38px;display:flex;position:absolute;top:50%;left:50%;transform:scale(.6)}.otp[data-phase=seal] .otp-seal,.otp[data-phase=done] .otp-seal{animation:otp-seal-in var(--otp-d-collapse) cubic-bezier(.34, 1.35, .5, 1) forwards}@keyframes otp-seal-in{to{opacity:1;transform:scale(1)}}.otp-check{fill:none;stroke:var(--otp-ok);stroke-width:3.2px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100px}.otp[data-phase=seal] .otp-check,.otp[data-phase=done] .otp-check{animation:otp-draw var(--otp-d-check) var(--otp-d-check-delay) ease forwards}.otp-badge{background:var(--color-bg-elevated);color:var(--otp-ok-soft);white-space:nowrap;opacity:0;pointer-events:none;border:1px solid #34d3994d;border-radius:999px;align-items:center;gap:7px;padding:7px 14px;font-size:12px;font-weight:600;display:inline-flex;position:absolute;top:calc(50% + 66px);left:50%;transform:translate(-50%,6px)}.otp[data-phase=done] .otp-badge{animation:otp-badge-in var(--otp-d-badge) ease forwards}@keyframes otp-badge-in{to{opacity:1;transform:translate(-50%)}}.otp[data-shake="1"] .otp-node{animation:otp-shake var(--otp-d-shake) ease;border-color:#f87171}@keyframes otp-shake{0%,to{transform:translate(var(--otp-rx), 0)}20%{transform:translate(calc(var(--otp-rx) - 7px), 0)}55%{transform:translate(calc(var(--otp-rx) + 6px), 0)}80%{transform:translate(calc(var(--otp-rx) - 3px), 0)}}.otp-field{opacity:0;text-align:center;cursor:pointer;background:0 0;border:0;width:100%;height:88px;padding:0;font-size:16px;position:absolute;top:0;left:0}.otp-field:disabled{cursor:default}@media (prefers-reduced-motion:reduce){.otp-stage{transition-duration:1ms}.otp *,.otp :before,.otp :after{animation-duration:1ms!important;animation-delay:0s!important}.otp-caret{opacity:1;animation:none}}