.codefield{cursor:text;align-items:center;gap:8px;display:flex;position:relative}.codefield .cgroup{flex:1;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;display:grid}.codefield .cdash{color:var(--ink-4);font-size:var(--text-h3)}.cbox{border-radius:var(--radius-md);background:var(--bg);height:clamp(44px,6svh,54px);box-shadow:inset 0 0 0 1px var(--control-strong);color:var(--ink);font-size:var(--text-h1);font-variant-numeric:tabular-nums;transition:background-color .16s var(--ease-out), box-shadow .16s var(--ease-out), color .16s var(--ease-out);place-items:center;font-weight:500;display:grid}.cbox[data-on]{animation:cell-pop .22s var(--ease-out)}.cbox[data-caret]{box-shadow:inset 0 0 0 1.5px var(--green), var(--green-ring)}.cbox[data-caret]:after{background:var(--green);content:"";border-radius:1px;width:2px;height:22px;animation:1s step-end infinite caret-blink}.codefield[data-state=error] .cbox{background:var(--danger-soft);box-shadow:inset 0 0 0 1.5px var(--danger)}.codefield[data-state=error] .cgroup{animation:cell-shake .32s var(--ease-out)}.codefield[data-state=loading] .cbox{color:var(--ink-3)}.codefield[data-state=done] .cbox{background:var(--green);box-shadow:none;color:var(--bg);transition-delay:calc(var(--i,0) * 40ms)}.codefield .code-input{color:#0000;caret-color:#0000;opacity:0;background:0 0;border:0;outline:none;width:100%;height:100%;font-size:16px;position:absolute;inset:0}.codefield[data-intro] .cbox{animation:cell-in .36s var(--ease-out) backwards;animation-delay:calc(.22s + var(--i,0) * 30ms)}@keyframes cell-pop{0%{scale:.92}to{scale:1}}@keyframes cell-in{0%{opacity:0;translate:0 6px}}@keyframes cell-shake{20%{translate:-6px}50%{translate:5px}80%{translate:-3px}}@keyframes caret-blink{50%{opacity:0}}.login-submit{position:relative}.login-submit .t,.login-submit .spin,.login-submit .ok{transition:opacity .15s var(--ease-out)}.login-submit .spin,.login-submit .ok{opacity:0;position:absolute}.login-submit[data-state=loading] .t,.login-submit[data-state=done] .t{opacity:0}.login-submit[data-state=loading] .spin,.login-submit[data-state=done] .ok{opacity:1}.login-submit .spin{border:2px solid;border-top-color:#0000;border-radius:50%;width:18px;height:18px;animation:.7s linear infinite login-spin}@keyframes login-spin{to{rotate:360deg}}@media (prefers-reduced-motion:reduce){.cbox[data-on],.codefield[data-intro] .cbox,.codefield[data-state=error] .cgroup,.cbox[data-caret]:after{animation:none}.codefield[data-state=done] .cbox{transition-delay:0s}.login-submit .spin{border-top-color:currentColor;border-radius:50%;animation:1s ease-in-out infinite login-pulse}@keyframes login-pulse{50%{opacity:.3}}}