.otp-field{--otp-gap:8px;--otp-ink:#121212;--otp-line:#d6d6d6;--otp-danger:#c4122f;--otp-success:#0b7a3e;--otp-roll:linear(0, .045, .152, .287, .429, .563, .681, .779, .857, .917, .96, .99, 1.008, 1.019, 1.024, 1.025, 1.024, 1.021, 1.017, 1.014, 1.011, 1.008, 1.005, 1.003, 1);--otp-glide:linear(0, .034, .116, .221, .333, .443, .544, .633, .71, .775, .828, .871, .904, .931, .951, .966, .977, .986, .992, .996, 1);height:52px;position:relative}.otp-field>input{color:#0000;-webkit-text-fill-color:transparent;caret-color:#0000;background:0 0;border:0;outline:none;width:100%;height:100%;position:absolute;inset:0}.otp-field>input.otp-native:focus-visible{outline:none}.otp-field>input::selection{background:0 0}.otp-field>input:-webkit-any(:autofill,:-webkit-autofill){-webkit-text-fill-color:transparent;transition:background-color 600000s;-webkit-box-shadow:inset 0 0 0 100px #0000}.otp-field>input:is(:autofill,:autofill){-webkit-text-fill-color:transparent;transition:background-color 600000s;-webkit-box-shadow:inset 0 0 0 100px #0000}@media (forced-colors:active){.otp-field:has(>input:focus-visible) .otp-slots{outline-offset:2px;outline:2px solid canvastext}}.otp-field>input:disabled{cursor:not-allowed}.otp-slots{z-index:1;pointer-events:none;gap:var(--otp-gap);grid-template-columns:repeat(6,minmax(0,1fr));height:100%;display:grid;position:relative}.otp-slot{border:1px solid var(--otp-line);color:var(--otp-ink);font-variant-numeric:tabular-nums;background:#fff;border-radius:12px;place-items:center;font-size:24px;font-weight:600;transition:border-color .15s,box-shadow .15s;display:grid;position:relative;overflow:hidden}.otp-field[data-focused=true]:not([data-error=true]) .otp-slot[data-active=true]{border-color:var(--otp-ink);box-shadow:inset 0 0 0 1px var(--otp-ink)}.otp-field[data-error=true] .otp-slot{border-color:var(--otp-danger);box-shadow:0 0 0 3px #c4122f24}.otp-field[data-disabled=true] .otp-slots{opacity:.5}.otp-field[data-busy=true] .otp-slot{color:#6a6a6a}.otp-field[data-all-selected=true]:not([data-error=true]) .otp-slot{border-color:var(--otp-ink);box-shadow:inset 0 0 0 1px var(--otp-ink)}.otp-field[data-success=true] .otp-slot{border-color:var(--otp-success);box-shadow:inset 0 0 0 1px var(--otp-success)}.otp-caret-track{z-index:2;pointer-events:none;translate:calc((100% + var(--otp-gap)) / 6 * var(--otp-index,0)) 0;position:absolute;inset:0}.otp-caret{top:50%;left:calc((100% - 5 * var(--otp-gap)) / 12 - 1px);background:var(--otp-ink);border-radius:1px;width:2px;height:26px;margin-top:-13px;position:absolute}@keyframes otp-roll-in{0%{translate:0 110%}}@keyframes otp-blink{0%,50%{opacity:1}50.01%,to{opacity:0}}@keyframes otp-pop{45%{scale:1.06}}@keyframes otp-shake{20%{translate:-5px}45%{translate:4px}70%{translate:-2px}}@media (prefers-reduced-motion:no-preference){.otp-digit{animation:otp-roll-in .35s var(--otp-roll) both}.otp-caret-track{transition:translate .255s var(--otp-glide)}.otp-caret{animation:1.1s linear infinite otp-blink}.otp-field[data-shake=true] .otp-slots{animation:.32s ease-out otp-shake}.otp-field[data-success=true] .otp-slot{transition-delay:calc(var(--otp-i,0) * 40ms);animation:otp-pop .3s ease-out calc(var(--otp-i,0) * 40ms)}}