.login-otp{--otp-size:42px;--otp-gap:8px;position:relative;width:292px;max-width:100%;height:148px;margin:4px auto;display:flex;align-items:center;justify-content:center}
.login-otp[hidden]{display:none}
:root[data-theme=dark] .login-otp{--input-bg:#1e1e21;--text-color:#e4e4e7}
.login-otp input#loginCode{position:absolute;inset:0;z-index:2;width:100%;height:100%;opacity:0;cursor:text;margin:0}
.login-otp-cells{display:flex;gap:var(--otp-gap);position:relative;pointer-events:none}
.login-otp-cells span{width:var(--otp-size);height:var(--otp-size);display:grid;place-items:center;border:1px solid #9b9b9b50;border-radius:10px;background:var(--input-bg,#f7f7f5);color:var(--text-color,#1a1a18);font:600 20px ui-monospace,monospace;transition:transform .48s cubic-bezier(.2,.8,.2,1),opacity .28s,border-color .2s}
.login-otp:focus-within .is-active{border-color:var(--text-color,#333);box-shadow:0 0 0 3px #8882}
.login-otp-seal{position:absolute;width:114px;height:114px;opacity:0;color:#54836c;pointer-events:none;transition:opacity .25s}
.login-otp-path{position:absolute;width:100px;height:150px;opacity:0;pointer-events:none;color:var(--text-color,#666);transition:opacity .2s .3s}
.login-otp.is-checking .login-otp-path{opacity:.4}
.login-otp-seal .otp-check{stroke-dasharray:40;stroke-dashoffset:40;transition:stroke-dashoffset .35s .2s}
.login-otp.is-checking .login-otp-cells span:nth-child(1){transform:translate(calc(2 * (var(--otp-size) + var(--otp-gap))),-50px)}
.login-otp.is-checking .login-otp-cells span:nth-child(2){transform:translate(calc(2 * (var(--otp-size) + var(--otp-gap))),-50px)}
.login-otp.is-checking .login-otp-cells span:nth-child(3){transform:translate(0,0)}
.login-otp.is-checking .login-otp-cells span:nth-child(4){transform:translate(0,0)}
.login-otp.is-checking .login-otp-cells span:nth-child(5){transform:translate(calc(-2 * (var(--otp-size) + var(--otp-gap))),50px)}
.login-otp.is-checking .login-otp-cells span:nth-child(6){transform:translate(calc(-2 * (var(--otp-size) + var(--otp-gap))),50px)}
.login-otp.is-verified .login-otp-cells span{transform:translateY(0) scale(.4);opacity:0;border-color:#54836c}
.login-otp.is-verified .login-otp-seal{opacity:1}
.login-otp.is-verified .otp-check{stroke-dashoffset:0}
.login-otp.is-error .login-otp-cells{animation:otp-shake .25s}
.login-otp.is-error .login-otp-cells span{border-color:#b54b4b}
@keyframes otp-shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@media(max-width:360px){.login-otp{--otp-size:36px;--otp-gap:4px;width:236px}.login-otp.is-checking .login-otp-cells{transform:scale(.85)}}
@media(prefers-reduced-motion:reduce){.login-otp *{transition:none!important;animation:none!important}}