.otp-field{width:100%;display:block;position:relative}.otp-field__cells{grid-template-columns:repeat(var(--otp-length,6), minmax(0, 1fr));gap:var(--otp-gap,8px);display:grid}.otp-field__cell{min-width:0;height:var(--otp-cell-height,54px);border:1px solid var(--otp-border,#ffffff26);border-radius:var(--otp-radius,12px);background:var(--otp-surface,#ffffff0b);color:#fff;font:500 var(--otp-font-size,23px)/1 "Roboto Mono", ui-monospace, SFMono-Regular, monospace;justify-content:center;align-items:center;transition:border-color .17s,background-color .17s,box-shadow .17s,color .17s;display:flex}.otp-field__cell--filled{border-color:var(--otp-border-filled,#ffffff4d);background:var(--otp-surface-filled,#ffffff12)}.otp-field__cell--active{border-color:var(--otp-accent,#ff4a43cc);background:var(--otp-surface-active,linear-gradient(145deg, #45020633, #110406bd));box-shadow:0 0 10px #ff39313d,0 0 24px #b1050b57,inset 0 0 12px #7a03082e}.otp-field .otp-field__input{z-index:1;appearance:none;box-sizing:border-box;border-radius:var(--otp-radius,12px);width:100%;height:100%;min-height:0;box-shadow:none;color:#0000;caret-color:#0000;font:500 var(--otp-font-size,23px)/1 "Roboto Mono", ui-monospace, SFMono-Regular, monospace;text-align:center;letter-spacing:1em;text-indent:1em;background:0 0;border:0;outline:none;margin:0;padding:0;position:absolute;inset:0}.otp-field .otp-field__input::selection{background:0 0}.otp-field .otp-field__input::placeholder{color:#0000}.otp-field .otp-field__input:focus,.otp-field .otp-field__input:focus-visible,.otp-field .otp-field__input:hover{box-shadow:none;background:0 0;border:0;outline:none}.otp-field .otp-field__input:-webkit-autofill{-webkit-text-fill-color:transparent;transition:background-color 9999s ease-out}.otp-field .otp-field__input:-webkit-autofill:focus{-webkit-text-fill-color:transparent;transition:background-color 9999s ease-out}@media (prefers-reduced-motion:reduce){html:not(.motion-allowed) .otp-field__cell{transition:none}}html.motion-reduced .otp-field__cell{transition:none}@media (max-width:560px){.otp-field{--otp-gap:6px;--otp-cell-height:48px;--otp-font-size:20px}}@media (max-width:380px){.otp-field{--otp-gap:4px;--otp-cell-height:44px;--otp-font-size:18px}}