.code-slots{--code-accent:var(--theme-primary,#8b7cff);--code-surface:var(--theme-background,#111118);--code-ink:var(--theme-foreground,#fff);--code-slot:color-mix(in srgb, var(--code-surface) 88%, white 12%);--code-digit:var(--code-accent);--code-danger:#ef4444;--code-slot-size:44px;--code-gap:8px;--code-radius:12px;--code-length:6;--code-border:color-mix(in srgb, var(--theme-foreground,#fff) 12%, transparent);max-width:100%;display:inline-flex}.code-slots__row{gap:var(--code-gap);max-width:100%;display:flex;position:relative}.code-slots__input{z-index:2;cursor:text;opacity:0;width:100%;height:100%;position:absolute;inset:0}.code-slots__slot{width:min(var(--code-slot-size), calc((100vw - 3rem - (var(--code-gap) * (var(--code-length) - 1))) / var(--code-length)));height:var(--code-slot-size);border:1px solid var(--code-border);border-radius:var(--code-radius);background:var(--code-slot);color:var(--code-ink);font-variant-numeric:tabular-nums;place-items:center;font-size:clamp(1.15rem,5vw,1.5rem);font-weight:800;transition:border-color .18s,background-color .18s,transform .18s,box-shadow .18s;display:grid}.code-slots__row:focus-within .code-slots__slot:not(.code-slots__slot--filled):first-of-type,.code-slots__row:hover .code-slots__slot:not(.code-slots__slot--filled){border-color:color-mix(in srgb, var(--code-accent) 65%, transparent)}.code-slots__slot--filled{border-color:color-mix(in srgb, var(--code-accent) 55%, transparent);background:color-mix(in srgb, var(--code-accent) 18%, var(--code-surface));color:var(--code-digit);animation:.22s cubic-bezier(.22,1,.36,1) code-slot-land}.code-slots[data-status=error] .code-slots__slot{border-color:color-mix(in srgb, var(--code-danger) 65%, transparent);background:color-mix(in srgb, var(--code-danger) 12%, var(--code-surface))}.code-slots[data-status=success] .code-slots__slot{background:color-mix(in srgb, #34d399 18%, var(--code-surface));color:#34d399;border-color:#34d39999}.code-slots[data-disabled]{opacity:.5}.code-slots[data-status=pending]{opacity:.7}.code-slots[data-caret=true] .code-slots__row:focus-within:after{content:"";background:var(--code-accent);opacity:.8;pointer-events:none;border-radius:999px;width:2px;animation:.9s ease-in-out infinite code-slot-caret;position:absolute;top:15%;bottom:15%}@keyframes code-slot-land{0%{opacity:.35;transform:translateY(5px)scale(.9)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes code-slot-caret{50%{opacity:.15}}@media (prefers-reduced-motion:reduce){.code-slots__slot{transition:none;animation:none}.code-slots[data-caret=true] .code-slots__row:focus-within:after{animation:none}}@media (max-width:420px){.code-slots__row{gap:5px!important}.code-slots__slot{width:min(var(--code-slot-size), calc((100vw - 2.5rem - (5px * (var(--code-length) - 1))) / var(--code-length)))}}