@font-face{font-family:"Martian Mono";src:url(/fonts/martian-mono-latin.woff2) format("woff2");font-weight:300 600;font-style:normal;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url(/fonts/schibsted-grotesk-latin.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --paper:#E6EBE8; --panel:#F7F9F7; --ink:#13201B; --muted:#53625C; --rule:#C6D0CB;
  --signal:#2941BF; --on-signal:#FFFFFF; --rust:#88392B;
  --font-display:"Martian Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-body:"Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{--paper:#0B1210; --panel:#121B18; --ink:#DCE6E1; --muted:#8D9D97; --rule:#28352F; --signal:#97A6FF; --on-signal:#0B1210; --rust:#E79F8D; color-scheme:dark}
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
html,body{background:var(--paper);color:var(--ink)}
body{margin:0;min-height:100vh;min-height:100dvh;display:grid;place-content:center;gap:16px;font-family:var(--font-body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;
  padding:calc(24px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px))}
.card{width:min(420px, 100%);background:var(--panel);border:1px solid var(--rule);border-radius:16px;padding:28px 24px;display:grid;gap:20px}
.wordmark{font-family:var(--font-display);font-weight:500;font-size:18px;letter-spacing:.16em;text-transform:uppercase;margin:0;display:flex;align-items:center;gap:12px}
.wordmark svg{width:40px;height:16px;flex:none}
.wordmark path{stroke:var(--signal);fill:none;stroke-width:1.6;stroke-linecap:round}
.step{display:grid;gap:12px}
h2{margin:0;font-size:22px;line-height:1.25}
.hint{margin:0;color:var(--muted);font-size:14px;text-wrap:pretty}
form{display:grid;gap:8px}
.label{font-family:var(--font-display);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
input{font:inherit;color:inherit;border:1px solid var(--rule);border-radius:10px;background:var(--paper);padding:12px 14px;font-size:16px}
input:focus{outline:2px solid var(--signal);outline-offset:1px}
.btn{appearance:none;font:inherit;font-weight:600;border-radius:999px;padding:13px 18px;cursor:pointer;border:1px solid var(--signal);background:var(--signal);color:var(--on-signal)}
.btn:disabled{opacity:.5;cursor:wait}
.btn:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.status{margin:0;min-height:1.5em;font-size:14px}
.status.bad{color:var(--rust)}
.foot{margin:0;text-align:center;color:var(--muted);font-size:12px;font-family:var(--font-display);letter-spacing:.04em}