.code-input{--code-input-slot-height:56px;--code-input-gap:var(--space-2);display:flex;flex-direction:column;min-width:0;width:100%}.code-input__label{display:block;margin-bottom:var(--space-2);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--ink-secondary)}.code-input__box{position:relative}.code-input__field{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:none;background:#0000;color:#0000;-webkit-text-fill-color:#0000;caret-color:#0000;font-size:16px;cursor:text;-webkit-appearance:none;appearance:none}.code-input__field:-webkit-autofill,.code-input__field:-webkit-autofill:focus{-webkit-text-fill-color:#0000;transition:background-color 9999s ease-out 0s}.code-input__field::selection{background:#0000;color:#0000;-webkit-text-fill-color:#0000}.code-input__slots{gap:var(--code-input-gap);pointer-events:none}.code-input__slot,.code-input__slots{position:relative;display:flex;align-items:center;justify-content:center}.code-input__slot{box-sizing:border-box;flex:1 1 0;min-width:0;max-width:56px;height:var(--code-input-slot-height);overflow:hidden;border-radius:var(--radius-lg);background:var(--background-input);box-shadow:inset 0 0 0 1px var(--border-default);color:var(--ink-primary);font-family:var(--font-sans);font-size:var(--text-2xl);font-weight:var(--font-semibold);font-variant-numeric:tabular-nums;line-height:1;transition:background-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}.code-input__slot--filled{box-shadow:inset 0 0 0 1px var(--border-strong)}@media (hover:hover){.code-input:not(.code-input--focused):not(.code-input--disabled) .code-input__box:hover .code-input__slot{box-shadow:inset 0 0 0 1px var(--border-strong)}}.code-input__slot--active{background:linear-gradient(var(--accent-subtle),var(--accent-subtle)),var(--background-input);box-shadow:inset 0 0 0 1.5px var(--accent-stroke,var(--accent-primary)),0 0 0 var(--space-1) rgba(var(--accent-primary-rgb),.14)}.code-input__slot--selected{background:linear-gradient(var(--accent-medium),var(--accent-medium)),var(--background-input);box-shadow:inset 0 0 0 1.5px var(--accent-stroke,var(--accent-primary))}.code-input__caret{position:absolute;top:50%;left:50%;width:2px;height:1.1em;border-radius:1px;background:var(--accent-stroke,var(--accent-primary));transform:translate(-50%,-50%);animation:caret-blink 1s step-end infinite}.code-input__caret--before{left:calc(50% - .45em)}.code-input__separator{flex:0 0 auto;width:var(--space-2);height:2px;border-radius:1px;background:var(--border-strong)}.code-input--ring .code-input__slots{border-radius:calc(var(--radius-lg) + 6px);outline:2px solid var(--ink-accent);outline-offset:6px}.code-input--error .code-input__slot{background:linear-gradient(var(--status-error-bg),var(--status-error-bg)),var(--background-input);box-shadow:inset 0 0 0 1.5px var(--status-error)}.code-input--error .code-input__slot--selected{background:linear-gradient(rgba(var(--status-error-rgb),.2),rgba(var(--status-error-rgb),.2)),var(--background-input)}.code-input--error .code-input__slots{animation:code-input-shake var(--duration-slow) var(--ease-out)}@keyframes code-input-shake{20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-2px)}80%{transform:translateX(2px)}}.code-input--busy .code-input__slot{color:var(--ink-secondary)}.code-input--busy .code-input__slot:after{content:"";position:absolute;inset:0;background:linear-gradient(var(--skeleton-angle),#0000 25%,var(--skeleton-shimmer) 50%,#0000 75%);transform:translateX(-100%);animation:skeleton-sweep calc(var(--duration-slow) * 3) var(--ease-in-out) infinite;animation-delay:calc(var(--code-input-i) * var(--duration-fast))}.code-input--success .code-input__slot{background:linear-gradient(var(--status-success-bg),var(--status-success-bg)),var(--background-input);box-shadow:inset 0 0 0 1.5px var(--status-success);animation:code-input-confirm var(--duration-slow) var(--ease-out) backwards;animation-delay:calc(var(--code-input-i) * 40ms)}@keyframes code-input-confirm{0%{box-shadow:inset 0 0 0 1.5px var(--status-success),0 0 0 var(--space-2) rgba(var(--status-success-rgb),.3)}}.code-input--disabled{opacity:.5}.code-input--disabled .code-input__field{cursor:not-allowed}@media (max-width:480px){.code-input{--code-input-slot-height:52px;--code-input-gap:var(--space-1)}}@media (forced-colors:active){.code-input__field{forced-color-adjust:none}.code-input__slot{border:1px solid CanvasText}.code-input__slot--active{outline:2px solid Highlight;outline-offset:1px}.code-input__slot--selected{forced-color-adjust:none;background:Highlight;color:HighlightText}.code-input--error .code-input__slot{border:2px dashed CanvasText}.code-input--error .code-input__slot--selected{background:Highlight;color:HighlightText}.code-input__caret{background:CanvasText}}@media (prefers-reduced-motion:reduce){.code-input--busy .code-input__slot:after,.code-input--error .code-input__slots,.code-input--success .code-input__slot,.code-input__caret{animation:none}}