.code-input{position:relative;display:flex;justify-content:center;gap:var(--space-2, .5rem)}.code-input-real{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;padding:0;background:transparent;color:transparent;caret-color:transparent;font-size:16px;z-index:1;cursor:text}.code-input-box{width:2.75rem;height:3.375rem;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--color-border-strong, #c9c9c9);border-radius:var(--radius-lg, .75rem);background:var(--surface-card, #fff);color:var(--color-text-primary, #1a1a1a);font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;font-size:1.5rem;font-weight:700;transition:border-color .15s,box-shadow .15s;box-sizing:border-box}.code-input-box--groupend{margin-right:var(--space-3, .75rem)}.code-input-box--active{border-color:var(--color-focus, #2563eb);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-focus, #2563eb) 18%,transparent)}.code-input--disabled .code-input-box{opacity:var(--state-disabled-opacity, .55)}.code-input-caret{width:2px;height:1.5em;background:var(--color-focus, #2563eb);border-radius:1px;animation:code-input-caret-blink 1.1s steps(1) infinite}@keyframes code-input-caret-blink{0%,49%{opacity:1}50%,to{opacity:0}}@media(max-width:360px){.code-input-box{width:2.25rem;height:2.875rem;font-size:1.25rem}}