.gyre-otp{--g-ice:var(--accent);--g-ice-lift:#fff;--g-ice-glow:var(--accent-glow);--g-ok:#2ee6a8;--g-ok-lift:#c6ffe9;--g-ok-glow:#2ee6a84d;--g-bad:var(--danger);--g-bad-lift:#ffa3b2;--g-bad-glow:#ff5c6c4d;--g-ease:cubic-bezier(.22, 1, .36, 1);--g-spring:cubic-bezier(.2, 1.4, .35, 1);--slot-w:clamp(26px, 7vw, 40px);--gyre-over:calc(var(--slot-w) * var(--gyre-orbit-r,2.05));--gyre-clear:calc(var(--gyre-over) + 26px);--err-reserve:36px;--err-gap:14px;text-align:center;width:100%}.gyre-otp *{box-sizing:border-box}.gyre-otp .sheet{-webkit-backdrop-filter:blur(24px)saturate(160%);backdrop-filter:blur(24px)saturate(160%);background:#ffffff14;border:1px solid #ffffff2e;border-radius:1.5rem;width:100%;padding:2rem;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff4d,0 20px 50px -12px #00000080}.gyre-otp .verify{z-index:1;margin:0;position:relative}.gyre-otp .verify__title,.gyre-otp .verify__sub{display:grid;position:relative}.gyre-otp .verify__title-in,.gyre-otp .verify__sub-in{transition:opacity .5s var(--g-ease), transform .5s var(--g-ease);grid-area:1/1}.gyre-otp .verify__title{letter-spacing:-.015em;color:var(--foreground);margin:0 0 10px;font-size:clamp(19px,5.4vw,22px);font-weight:700}.gyre-otp .verify__sub{margin:0 0 var(--gyre-clear);color:var(--muted);font-size:13.5px;line-height:1.6}.gyre-otp [data-title-ok],.gyre-otp [data-sub-ok]{opacity:0;pointer-events:none;transform:translateY(6px)}.gyre-otp .sheet[data-state=ok] [data-title-idle],.gyre-otp .sheet[data-state=ok] [data-sub-idle]{opacity:0;transition-duration:.26s;transform:translateY(-6px)}.gyre-otp .sheet[data-state=ok] [data-title-ok]{opacity:1;color:var(--g-ok);transition-delay:.24s;transform:none}.gyre-otp .sheet[data-state=ok] [data-sub-ok]{opacity:1;transition-delay:.3s;transform:none}.gyre-otp .code-wrap{isolation:isolate;position:relative}.gyre-otp .code{z-index:2;justify-content:center;gap:5px;display:flex;position:relative}.gyre-otp .slot{width:var(--slot-w);aspect-ratio:1;-webkit-backdrop-filter:blur(12px)saturate(160%);backdrop-filter:blur(12px)saturate(160%);cursor:text;transition:box-shadow .26s var(--g-ease), background-color .26s var(--g-ease);background:#ffffff1a;border-radius:12px;position:relative;box-shadow:inset 0 1px #ffffff47,inset 0 0 0 1px #ffffff29}.gyre-otp .slot:focus-within{box-shadow:inset 0 1px 0 #ffffff59, inset 0 0 0 1.6px var(--g-ice), 0 0 0 5px var(--accent-glow);background:#ffffff29}.gyre-otp .slot__input{z-index:3;border-radius:inherit;width:100%;height:100%;color:var(--foreground);caret-color:var(--g-ice-lift);text-align:center;-webkit-tap-highlight-color:transparent;background:0 0;border:0;outline:none;padding:0;font-family:inherit;font-size:clamp(13px,3.6vw,17px);font-weight:700;position:absolute;inset:0}.gyre-live .gyre-otp .slot__input{color:#0000;caret-color:#0000}.gyre-otp .slot__input::selection{background:0 0}.gyre-otp .slot__input::-webkit-contacts-auto-fill-button{opacity:0}.gyre-otp .slot__win{z-index:2;border-radius:inherit;contain:paint;position:absolute;inset:0;overflow:hidden}.gyre-otp .slot__digit{font-variant-numeric:tabular-nums;color:var(--foreground);place-items:center;font-size:clamp(13px,3.6vw,17px);font-weight:700;line-height:1;display:grid;position:absolute;inset:0}.gyre-live .gyre-otp .slot:focus-within:not(.is-filled) .slot__win:after{content:"";background:var(--g-ice-lift);border-radius:2px;width:2px;height:40%;margin-left:-1px;animation:1.1s step-end infinite gyre-blink;position:absolute;top:30%;left:50%}@keyframes gyre-blink{0%,55%{opacity:1}56%,to{opacity:0}}.gyre-otp .slot__glow{z-index:1;pointer-events:none;background:radial-gradient(56% 56% at 50% 50%, var(--g-ice-glow), transparent 72%);opacity:0;border-radius:17px;position:absolute;inset:-10%}.gyre-otp .slot__spark{z-index:4;pointer-events:none;opacity:0;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.gyre-otp .slot__arc{fill:none;stroke:var(--g-ice);stroke-width:2px;stroke-dasharray:.32 .68;stroke-dashoffset:1px;filter:drop-shadow(0 0 5px var(--g-ice-glow))}.gyre-otp .orbit{z-index:1;pointer-events:none;position:absolute;inset:0}.gyre-otp .orbit__ring{opacity:0;position:absolute;overflow:visible}.gyre-otp .orbit__path{fill:none;stroke:color-mix(in srgb, var(--g-ice) 55%, white);stroke-width:1.5px;stroke-dasharray:2 8;stroke-linecap:round}.gyre-otp .orbit__hub{background:var(--g-ice-lift);width:7px;height:7px;box-shadow:0 0 8px var(--g-ice-glow), 0 0 20px var(--accent-glow);opacity:0;border-radius:50%;margin:-3.5px 0 0 -3.5px;position:absolute;transform:scale(.4)}.gyre-otp .seal{z-index:3;pointer-events:none;place-items:center;display:grid;position:absolute;inset:0}.gyre-otp .seal__tile,.gyre-otp .seal__ring{border-radius:12px;grid-area:1/1}.gyre-otp .seal__tile{width:var(--slot-w);height:var(--slot-w);background:color-mix(in srgb, var(--g-ok) 14%, var(--background));box-shadow:inset 0 0 0 2px var(--g-ok), 0 12px 34px -8px var(--g-ok-glow);opacity:0;transition:opacity .18s linear, transform .66s var(--g-spring);place-items:center;display:grid;position:relative;overflow:hidden;transform:rotate(-38deg)scale(.32)}.gyre-otp .sheet[data-state=ok] .seal__tile{opacity:1;transition-delay:40ms;transform:rotate(0)scale(1)}.gyre-otp .seal__sheen{pointer-events:none;opacity:0;background:linear-gradient(74deg,#0000 38%,#ffffff6b 50%,#0000 62%);position:absolute;inset:-40%;transform:translate(-120%)}.gyre-otp .sheet[data-state=ok] .seal__sheen{animation:.75s cubic-bezier(.3,0,.2,1) .46s both gyre-sheen}@keyframes gyre-sheen{0%{opacity:.9;transform:translate(-120%)}to{opacity:0;transform:translate(120%)}}.gyre-otp .seal__tile svg{width:22px;height:22px}.gyre-otp .seal__check{stroke:var(--g-ok-lift);stroke-width:3.6px;stroke-dasharray:1;stroke-dashoffset:1px;transition:stroke-dashoffset .4s var(--g-ease)}.gyre-otp .sheet[data-state=ok] .seal__check{stroke-dashoffset:0;transition-delay:.3s}.gyre-otp .seal__ring{width:var(--slot-w);height:var(--slot-w);box-shadow:0 0 0 2px var(--g-ok);opacity:0;transform:scale(.8)}.gyre-otp .sheet[data-state=ok] .seal__ring{animation:.85s cubic-bezier(.2,.7,.3,1) 80ms both gyre-shock}.gyre-otp .seal__ring--wide{box-shadow:0 0 0 1px var(--g-ok)}.gyre-otp .sheet[data-state=ok] .seal__ring--wide{animation:1.15s cubic-bezier(.16,.8,.24,1) .2s both gyre-shock-wide}@keyframes gyre-shock{0%{opacity:.85;transform:scale(.8)}to{opacity:0;transform:scale(2.2)}}@keyframes gyre-shock-wide{0%{opacity:.45;transform:scale(.9)}to{opacity:0;transform:scale(3.6)}}.gyre-otp .burst{z-index:4;pointer-events:none;place-items:center;display:grid;position:absolute;inset:0}.gyre-otp .mote{background:var(--g-ok);width:7px;height:7px;box-shadow:0 0 7px var(--g-ok-glow), 0 0 16px #2ee6a847;opacity:0;border-radius:50%;grid-area:1/1}.gyre-otp .mote--sm{width:3.5px;height:3.5px}.gyre-otp .mote--lg{width:8px;height:8px}.gyre-otp .mote--pale{background:var(--g-ok-lift)}.gyre-otp .sheet[data-state=checking] .slot{background:var(--surface-elevated);box-shadow:inset 0 0 0 1.6px color-mix(in srgb, var(--g-ice) 70%, white)}.gyre-otp .sheet[data-state=checking] .slot__input{caret-color:#0000}.gyre-otp .sheet[data-state=checking] .slot,.gyre-otp .sheet[data-state=ok] .slot{cursor:default}@keyframes gyre-checking-pulse{0%,to{opacity:.12}50%{opacity:.5}}.gyre-otp .sheet[data-state=checking]:not([data-locked]) .slot__glow{opacity:.12;animation:1.15s ease-in-out infinite gyre-checking-pulse}.gyre-otp .sheet[data-locked] .slot{background:color-mix(in srgb, var(--g-ok) 12%, var(--background));box-shadow:inset 0 0 0 1.8px var(--g-ok)}.gyre-otp .sheet[data-locked] .slot__digit{color:var(--g-ok-lift)}.gyre-otp .sheet[data-locked] .slot__glow{background:radial-gradient(56% 56% at 50% 50%, var(--g-ok-glow), transparent 72%)}.gyre-otp .sheet[data-locked] .orbit__path{stroke:color-mix(in srgb, var(--g-ok-lift) 60%, transparent)}.gyre-otp .sheet[data-locked] .orbit__hub{background:var(--g-ok-lift);box-shadow:0 0 10px var(--g-ok-glow), 0 0 26px #2ee6a857}.gyre-otp .sheet[data-state=error] .slot,.gyre-otp .sheet[data-state=error] .slot:focus-within{background:color-mix(in srgb, var(--g-bad) 13%, transparent);box-shadow:inset 0 0 0 1.6px color-mix(in srgb, var(--g-bad) 78%, transparent)}.gyre-otp .sheet[data-state=error] .slot__digit{color:var(--g-bad-lift)}.gyre-otp .sheet[data-state=error] .code{animation:.44s cubic-bezier(.36,.07,.19,.97) gyre-shake}@keyframes gyre-shake{0%,to{transform:translate(0,0)}16%{transform:translate(-7px)}33%{transform:translate(6px)}50%{transform:translate(-4px)}68%{transform:translate(3px)}84%{transform:translate(-1.5px)}}.gyre-otp .verify__err{margin:var(--err-gap) 0 0;min-height:var(--err-reserve);color:var(--g-bad-lift);opacity:0;transition:opacity .3s var(--g-ease), transform .3s var(--g-ease);font-size:12.5px;font-weight:500;line-height:18px;transform:translateY(-4px)}.gyre-otp .sheet[data-state=error] .verify__err{opacity:1;transform:none}.gyre-otp .verify__actions{margin-top:calc(var(--gyre-clear) - var(--err-gap) - var(--err-reserve));min-height:40px;display:grid}.gyre-otp .verify__foot,.gyre-otp .verify__done{transition:opacity .4s var(--g-ease), transform .4s var(--g-ease);grid-area:1/1;justify-content:center;align-items:center;gap:8px;display:flex}.gyre-otp .verify__foot{color:var(--muted);font-size:13px}.gyre-otp .verify__done{opacity:0;pointer-events:none;flex-direction:column;gap:14px;transform:translateY(8px)}.gyre-otp .sheet[data-state=ok] .verify__foot{opacity:0;pointer-events:none;transform:translateY(-8px)}.gyre-otp .sheet[data-state=ok] .verify__done{opacity:1;pointer-events:auto;transition-delay:.44s;transform:none}.gyre-otp .secure{color:var(--g-ok);align-items:center;gap:7px;font-size:13px;font-weight:700;display:inline-flex}.gyre-otp .secure__icon{width:17px;height:17px}.gyre-otp .resend{color:var(--foreground);font:inherit;cursor:pointer;transition:color .2s var(--g-ease), opacity .2s;background:0 0;border:0;padding:4px 2px;font-size:13px;font-weight:700}.gyre-otp .resend:hover:not(:disabled){color:var(--g-ice-lift)}.gyre-otp .resend:focus-visible{outline:2px solid var(--g-ice-lift);outline-offset:3px;border-radius:6px}.gyre-otp .resend:disabled{cursor:default;color:var(--muted);font-weight:500}.gyre-otp .cta{background:var(--g-ok);color:#04291d;font:inherit;cursor:pointer;transition:transform .24s var(--g-spring), filter .2s;border:0;border-radius:99px;padding:11px 34px;font-size:13.5px;font-weight:700}.gyre-otp .cta:hover{filter:brightness(1.07)}.gyre-otp .cta:active{transform:scale(.96)}.gyre-otp .cta:focus-visible{outline:2px solid var(--g-ok);outline-offset:3px}@media (prefers-reduced-motion:reduce){.gyre-otp .seal__sheen{display:none}.gyre-otp .verify__title-in,.gyre-otp .verify__sub-in,.gyre-otp .verify__err,.gyre-otp .seal__tile,.gyre-otp .verify__foot,.gyre-otp .verify__done{transition-duration:.2s!important}.gyre-otp .seal__tile{transform:rotate(0)scale(1)}.gyre-otp .seal__ring,.gyre-otp .orbit{display:none}.gyre-live .gyre-otp .slot:focus-within:not(.is-filled) .slot__win:after{animation:none}}