:root { --paper:#f1eadf; --paper-strong:#fffaf1; --ink:#171716; --coral:#ff595e; --blue:#006fc9; --display:"Anton",sans-serif; --body:"Space Grotesk",sans-serif; --mono:"Space Mono",monospace; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); font-family:var(--body); background:radial-gradient(rgba(23,23,22,.045) 1px,transparent 1px),var(--paper); background-size:4px 4px; }
.pin-screen { min-height:100vh; display:grid; place-items:center; padding:18px; }
.pin-card { width:min(100%,430px); border:2px solid var(--ink); background:var(--paper-strong); padding:18px; box-shadow:6px 6px 0 var(--ink); }
.kicker { margin:0 0 4px; font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
h1 { margin:0 0 20px; font-family:var(--display); font-size:clamp(48px,15vw,64px); font-weight:400; line-height:.95; text-transform:uppercase; }
label { display:block; margin-bottom:7px; font-weight:700; }
input { width:100%; border:2px solid var(--ink); background:#fff; padding:13px; font:inherit; font-size:18px; }
.button { width:100%; margin-top:12px; border:2px solid var(--ink); background:var(--blue); color:#fff; padding:12px 16px; box-shadow:3px 3px 0 var(--ink); font:700 15px var(--body); cursor:pointer; }
.button:disabled { cursor:wait; opacity:.65; }
.pin-error { min-height:22px; margin:10px 0 0; color:var(--coral); font:700 12px var(--mono); text-transform:uppercase; }