.sd-otp{--otp-size:52px;--otp-height:60px;--otp-gap:8px;--otp-radius:12px;--otp-font:ui-monospace, "SF Mono", "Geist Mono", Menlo, monospace;--otp-bg:#fdfcfa;--otp-fg:#17140f;--otp-muted:#b3ab9f;--otp-border:#e2ddd3;--otp-border-hover:#cfc7ba;--otp-accent:#0a0a0a;--otp-active:#17140f;--otp-ring:color-mix(in oklab, var(--otp-active) 10%, transparent);--otp-error:#b42318;--otp-success:#2c7a4b;--otp-ease:cubic-bezier(.22, 1, .36, 1);font-family:var(--otp-font);-webkit-tap-highlight-color:transparent;display:inline-flex;position:relative}:where(.dark) .sd-otp{--otp-bg:#151412;--otp-fg:#eeeae3;--otp-muted:#514b44;--otp-border:#2e2b27;--otp-border-hover:#423d37;--otp-accent:#fafafa;--otp-active:#eeeae3;--otp-ring:color-mix(in oklab, var(--otp-active) 14%, transparent);--otp-error:#f2705f;--otp-success:#5cb883}.sd-otp__input{opacity:0;color:#0000;caret-color:#0000;z-index:1;cursor:text;letter-spacing:-1em;background:0 0;border:0;width:100%;height:100%;margin:0;padding:0;font-size:16px;position:absolute;inset:0}.sd-otp__input:disabled,.sd-otp[data-disabled] .sd-otp__input{cursor:default}.sd-otp__slots{align-items:center;gap:var(--otp-gap);display:flex}.sd-otp__cell{display:contents}.sd-otp__sep{background:var(--otp-border-hover);border-radius:2px;width:10px;height:2px;margin-inline:2px}.sd-otp__slot{width:var(--otp-size);height:var(--otp-height);border-radius:var(--otp-radius);background:var(--otp-bg);color:var(--otp-fg);font-variant-numeric:tabular-nums;box-shadow:inset 0 0 0 1px var(--otp-border), 0 1px 2px #0000000a;transition:box-shadow .2s var(--otp-ease), transform .24s var(--otp-ease), background-color .2s var(--otp-ease), color .2s var(--otp-ease);place-items:center;font-size:24px;font-weight:500;display:grid;position:relative}.sd-otp[data-status=idle]:hover .sd-otp__slot:not([data-active]){box-shadow:inset 0 0 0 1px var(--otp-border-hover), 0 1px 2px #0000000a}.sd-otp__slot:after{content:"";background:var(--otp-muted);opacity:.55;width:12px;height:2px;transition:transform .24s var(--otp-ease), opacity .2s var(--otp-ease);border-radius:2px;position:absolute;bottom:12px;left:50%;transform:translate(-50%)scaleX(1)}.sd-otp__slot[data-filled]:after,.sd-otp__slot[data-active]:after{opacity:0;transform:translate(-50%)scaleX(0)}.sd-otp__slot[data-active]{box-shadow:inset 0 0 0 1.5px var(--otp-active), 0 0 0 4px var(--otp-ring);transform:translateY(-1px)}.sd-otp__char{animation:sd-otp-in .32s var(--otp-ease) both;display:block}@keyframes sd-otp-in{0%{opacity:0;filter:blur(2px);transform:translateY(6px)scale(.86)}}.sd-otp__caret{background:var(--otp-accent);border-radius:1px;width:1.5px;height:26px;animation:1.1s step-end infinite sd-otp-caret}@keyframes sd-otp-caret{50%{opacity:0}}.sd-otp[data-status=verifying] .sd-otp__slot{color:color-mix(in oklab, var(--otp-fg) 55%, transparent);animation:sd-otp-wave 1.2s var(--otp-ease) infinite;animation-delay:calc(var(--i) * 90ms)}@keyframes sd-otp-wave{0%,to{transform:none}30%{box-shadow:inset 0 0 0 1px var(--otp-border-hover), 0 6px 14px -6px #0000002e;transform:translateY(-3px)}}.sd-otp[data-status=error] .sd-otp__slots{animation:sd-otp-shake .42s var(--otp-ease)}.sd-otp[data-status=error] .sd-otp__slot,.sd-otp[data-status=expired] .sd-otp__slot{box-shadow:inset 0 0 0 1.5px var(--otp-error), 0 0 0 3px color-mix(in oklab, var(--otp-error) 10%, transparent)}.sd-otp[data-status=expired] .sd-otp__slot{color:var(--otp-muted)}@keyframes sd-otp-shake{15%{transform:translate(-6px)}35%{transform:translate(5px)}55%{transform:translate(-3px)}75%{transform:translate(2px)}}.sd-otp[data-status=success] .sd-otp__slot{color:var(--otp-success);animation:sd-otp-ok .52s var(--otp-ease) both;animation-delay:calc(var(--i) * 45ms)}@keyframes sd-otp-ok{40%{transform:translateY(-4px)scale(1.04)}to{box-shadow:inset 0 0 0 1.5px var(--otp-success), 0 0 0 3px color-mix(in oklab, var(--otp-success) 12%, transparent);background:color-mix(in oklab, var(--otp-success) 7%, var(--otp-bg));transform:none}}@media (max-width:420px){.sd-otp{--otp-size:44px;--otp-height:54px;--otp-gap:6px}.sd-otp__sep{width:6px}}@media (prefers-reduced-motion:reduce){.sd-otp *,.sd-otp :after{transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}.sd-otp__caret{animation:none}}