.pin-input{border-radius:var(--r-input);display:inline-block;position:relative}.pin-slots{gap:var(--s-2);display:flex}.pin-slot{box-sizing:border-box;border:1px solid var(--border);border-radius:var(--r-input);background:var(--card);width:40px;height:48px;color:var(--ink);font-family:var(--font-mono);font-size:var(--t-h2);place-items:center;font-weight:600;line-height:1;display:grid}.pin-input[data-length="8"] .pin-slot{width:36px}.pin-sep{width:calc(var(--s-5) - 2 * var(--s-2));color:var(--muted);font-family:var(--font-mono);place-items:center;display:grid}.pin-input:focus-within .pin-slot[data-next]{border-color:var(--brand)}.pin-input:has(input:focus-visible){outline:2px solid var(--ring);outline-offset:3px}.pin-input[data-wrong] .pin-slot{border-color:var(--bad-bd)}.pin-input[data-gated] .pin-slot{background:var(--sunken);color:var(--muted)}.pin-input input{z-index:1;box-sizing:border-box;color:#0000;-webkit-text-fill-color:transparent;caret-color:#0000;width:100%;height:100%;font-family:var(--font-mono);font-size:var(--t-h2);cursor:text;background:0 0;border:0;outline:none;margin:0;padding:0;position:absolute;inset:0}.pin-input input::selection{color:#0000;background:0 0}.pin-input input[aria-disabled=true]{cursor:not-allowed}.pin-input input:-webkit-autofill{background-color:#0000;box-shadow:inset 0 0 0 1000px #0000}