.otp-field{position:relative;width:100%;max-width:19rem;box-sizing:border-box;cursor:text}.otp-field--8{max-width:23rem}.otp-hidden-input,.otp-hidden-input:focus{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;font:inherit;text-align:center;z-index:2;cursor:text;opacity:0!important;border:none!important;background:transparent!important;box-shadow:none!important;outline:none!important}.otp-slots{display:flex;gap:.75rem;pointer-events:none}.otp-field--8 .otp-slots{gap:.5rem}.otp-slot{flex:1 1 0;min-width:0;height:3.5rem;display:flex;align-items:center;justify-content:center;font-family:JetBrains Mono,monospace;font-size:1.6rem;color:var(--text-primary, var(--color-text));background:var(--surface-primary, var(--color-surface));border:2px solid var(--color-border-strong);border-radius:12px;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}.otp-field--8 .otp-slot{height:3.25rem;font-size:1.4rem}.otp-slot--filled{border-color:var(--color-border)}.otp-slot--active{border-color:var(--primary-color, var(--color-accent));box-shadow:0 0 0 3px #3b82f61f}.otp-slot .otp-char,.otp-slot .otp-dash{font-family:JetBrains Mono,monospace}.otp-dash{color:var(--text-muted, var(--color-text-muted))}.otp-caret{width:2px;height:1.75rem;background:var(--primary-color, var(--color-accent));border-radius:1px;animation:otp-caret-blink 1.1s steps(1,end) infinite}@keyframes otp-caret-blink{0%,49%{opacity:1}50%,to{opacity:0}}[data-mode=dark] .otp-slot{background:#100f138c;border-color:var(--color-border);color:var(--color-text)}[data-mode=dark] .otp-slot--filled{border-color:var(--color-border-strong)}[data-mode=dark] .otp-slot--active{background:var(--color-surface);border-color:var(--color-accent);box-shadow:0 0 0 3px #60a5fa2e}[data-mode=dark] .otp-dash{color:var(--color-text-muted)}[data-mode=dark] .otp-caret{background:var(--color-accent)}