.otp-code{position:relative;width:100%}.otp-code__boxes{display:flex;justify-content:center}:where(.otp-code__gap){gap:.375rem}:where(.otp-code__box){align-items:center;background:#fff;border:1px solid #e5e7eb;border-radius:.5rem;display:flex;font-size:1.125rem;font-variant-numeric:tabular-nums;font-weight:700;height:2.75rem;justify-content:center;line-height:1;transition:border-color .15s,box-shadow .15s;width:2.5rem}:where(.otp-code__box--active){border-color:currentColor;box-shadow:0 0 0 2px #00000014}:where(.otp-code__box--error){border-color:#dc2626}.otp-code__input{background:transparent;border:0;caret-color:transparent;color:transparent;font-size:16px;height:100%;inset:0;letter-spacing:1em;margin:0;opacity:1;outline:none;padding:0;position:absolute;text-align:center;width:100%;-webkit-text-fill-color:transparent}.otp-code__input::-moz-selection{background:transparent}.otp-code__input::selection{background:transparent}.otp-code--shake{animation:otp-code-shake .4s}@keyframes otp-code-shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-6px)}40%,80%{transform:translate(6px)}}@media(prefers-reduced-motion:reduce){.otp-code--shake{animation:none}}