.pin{min-height:100dvh;font-family:var(--font-sans), -apple-system, Helvetica, Arial, sans-serif;-webkit-font-smoothing:antialiased;place-items:center;padding:24px;display:grid}.pin.dark{color:#f2efe8;--muted:#888682;--rule:#353532;--key:#151513;--accent:#e8442a;background:#0a0a09}.pin.light{color:#0a0a09;--muted:#615f5c;--rule:#c1bfb9;--key:#fbfaf7;--accent:#a81409;background:#f2efe8}.pin-box{text-align:center;justify-items:center;gap:10px;width:100%;max-width:300px;display:grid}.pin-kicker{font-family:var(--font-mono), monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-size:11px}.pin h1{font-family:var(--font-display), Georgia, serif;letter-spacing:-.03em;margin:0;font-size:34px;font-weight:400;line-height:1.05}.pin p{color:var(--muted);margin:0;font-size:15px}.pin-dots{gap:14px;margin:14px 0 18px;display:flex}.pin-dots i{border:1.5px solid var(--muted);border-radius:50%;width:13px;height:13px;transition:background-color .12s,border-color .12s}.pin-dots i.on{background:currentColor;border-color:currentColor}.pin-dots.wrong{animation:.4s pin-shake}.pin-dots.wrong i.on{background:var(--accent);border-color:var(--accent)}@keyframes pin-shake{20%,60%{transform:translate(-9px)}40%,80%{transform:translate(9px)}}.pin-pad{grid-template-columns:repeat(3,1fr);gap:12px;width:100%;display:grid}.pin-pad button{aspect-ratio:1;border:1px solid var(--rule);background:var(--key);height:66px;color:inherit;font:500 26px var(--font-sans), -apple-system, sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:50%;justify-self:center;transition:transform 80ms,background-color .12s}.pin-pad button:active{background:var(--rule);transform:scale(.94)}.pin-pad button.del{color:var(--muted);background:0 0;border:0;font-size:22px}.pin-msg{min-height:20px;color:var(--accent);margin-top:8px;font-size:14px}@media (prefers-reduced-motion:reduce){.pin-dots.wrong{animation:none}}