.codeBoxes{gap:clamp(.45rem,1.2vh,.85rem);min-height:0;display:grid}.codeBoxes h1{color:#f5f7fa;margin:0;font-size:clamp(1.35rem,2.6vh,2.1rem);font-weight:800;line-height:1.05}.codeLead{color:#aabac7;margin:0;font-size:clamp(.82rem,1.6vh,.95rem);line-height:1.35}.codeStage{place-items:center;min-height:4.2rem;display:grid;position:relative}.codeRow{perspective:800px;gap:.55rem;display:flex}.codeCell{--x:0px;--y:0px;--spin:0deg;--lap:.28s;--delay:0s;width:3rem;height:3.55rem;animation:.85s cubic-bezier(.16,.84,.32,1) both codeSettle;animation-delay:calc(var(--i)*80ms);background:#102c3e;border:1px solid #a3d4f747;border-radius:.85rem;position:relative;overflow:visible}.codeCell input{z-index:1;text-align:center;color:#f5f7fa;width:100%;height:100%;box-shadow:none;background:0 0;border:0;outline:none;font-size:1.4rem;position:relative}.codeCell input:focus,.codeCell input:focus-visible{box-shadow:none;outline:none}.codeCell:focus-within{border-color:#5cafe3}.codeTrail{pointer-events:none;width:calc(100% + 2px);height:calc(100% + 2px);position:absolute;inset:-1px;overflow:visible}.codeTrailTrack,.codeTrailDraw{fill:none;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round}.codeTrailTrack{stroke:#0000}.codeTrailDraw{stroke:#01cffb;stroke-dasharray:100;stroke-dashoffset:100px;opacity:0;transition:stroke .25s}.codeSpark{z-index:2;opacity:0;visibility:hidden;pointer-events:none;offset-path:inset(0 round .85rem);offset-rotate:0deg;background:radial-gradient(circle,#e8fbff,#01cffb 45%,#0000 72%);border-radius:50%;width:10px;height:10px;margin:-5px 0 0 -5px;position:absolute;box-shadow:0 0 10px #01cffb}.sweep .codeSpark{animation:codeLap var(--lap) linear forwards;animation-delay:var(--delay)}.sweep .codeTrailDraw{animation:codeDraw var(--lap) linear forwards;animation-delay:var(--delay)}.gather .codeRow{gap:0}.gather .codeCell{border-color:currentColor;animation:.85s cubic-bezier(.22,.68,.28,1) forwards codeGatherIn}.gather .codeSpark{opacity:0;visibility:hidden;animation:none}.gather .codeTrailDraw{opacity:1;stroke-dashoffset:0}.ok .codeRow,.bad .codeRow{opacity:0;pointer-events:none}.ok .codeCell,.bad .codeCell{opacity:0;animation:none;transform:scale(.2)}.ok .codeSpark,.bad .codeSpark{opacity:0;visibility:hidden;animation:none}.ok .codeTrailDraw,.bad .codeTrailDraw{opacity:1;stroke-dashoffset:0}.toneOk{color:#3dcf8a}.toneOk .codeTrailDraw{stroke:#3dcf8a}.toneOk .codeCell{border-color:#3dcf8a}.toneBad{color:#ff6b84}.toneBad .codeTrailDraw{stroke:#ff6b84}.toneBad .codeCell{border-color:#ff6b84}.codeSubmit{cursor:pointer;color:#fff;letter-spacing:.04em;text-transform:uppercase;background:linear-gradient(100deg,#012d4a,#007bff 46%,#01cffb);border:0;border-radius:12px;justify-content:center;align-items:center;gap:.55rem;width:100%;padding:14px 18px;font-weight:700;display:inline-flex}.codeSubmit:disabled{opacity:.6;cursor:wait}.codeSubmitBusy,.codeSubmitBusy:disabled{opacity:1;cursor:wait;color:#cfd8e0;background:linear-gradient(#3a4a58,#243443)}.codeResend{color:#aabac7;cursor:pointer;background:0 0;border:0;justify-self:start;padding:0}.codeResend:disabled{opacity:.5}.codeResend strong{color:#a3d4f7;font-weight:600}.codeSeal{pointer-events:none;place-items:center;animation:.4s both codePop;display:grid;position:absolute;inset:0}.codeRing,.codeRing2,.codeCore{border:2px solid #01cffbb3;border-radius:50%;position:absolute}.codeRing{width:5.6rem;height:5.6rem;animation:1.1s infinite codePulse}.codeRing2{width:4rem;height:4rem;animation:1.1s .15s infinite codePulse}.codeCore{color:#041820;background:radial-gradient(circle,#01cffb,#007bff);border:0;place-items:center;width:2.8rem;height:2.8rem;animation:.45s both codePop;display:grid}.codeNote{color:#ffb4c4;margin:0}.codeGood{color:#a3d4f7;margin:0}.codeSpin{flex-shrink:0;place-items:center;animation:.75s linear infinite codeSpinTurn;display:inline-grid}.codeSpinTrack{stroke:#ffffff2e}.codeSpinArc{stroke:currentColor;stroke-dasharray:40 80;transform-origin:50%}@keyframes codeSettle{0%{opacity:0;transform:translate3d(var(--x), var(--y), 0) rotate(var(--spin)) scale(.72);filter:blur(3px)}to{opacity:1;filter:none;transform:none}}@keyframes codeLap{0%{offset-distance:0%;opacity:1;visibility:visible}92%{offset-distance:100%;opacity:1;visibility:visible}to{offset-distance:100%;opacity:0;visibility:hidden}}@keyframes codeDraw{0%{stroke-dashoffset:100px;opacity:1}to{stroke-dashoffset:0;opacity:1}}@keyframes codeGatherIn{to{transform:translate3d(calc((2.5 - var(--i)) * 3.2rem), 0, 0) scale(.35);opacity:0}}@keyframes codePop{0%{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}@keyframes codePulse{0%{opacity:.2;transform:scale(.86)}to{opacity:1;transform:scale(1.08)}}@keyframes codeSpinTurn{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.codeSpark,.codeTrailDraw{animation:none!important}.sweep .codeTrailDraw,.gather .codeTrailDraw,.ok .codeTrailDraw,.bad .codeTrailDraw{opacity:1;stroke-dashoffset:0}.gather .codeCell,.ok .codeCell,.bad .codeCell{opacity:0;animation:none!important}.codeSpin{opacity:.7;animation:none}}
