@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');
    :root { --ink:#17211f; --muted:#66746f; --paper:#f4f1e8; --panel:#fffdf7; --line:#d8d7cd; --lime:#c8f169; --coral:#e8735c; --teal:#196c68; }
    * { box-sizing:border-box; } body { margin:0; color:var(--ink); background:radial-gradient(circle at 85% 5%, #dce8cf 0, transparent 31%), var(--paper); font-family:'Space Grotesk', sans-serif; }
    .eyebrow { color:var(--teal); font:500 12px 'DM Mono', monospace; text-transform:uppercase; }
    .card { background:var(--panel); border:1px solid var(--line); padding:30px; max-width:430px; margin:9vh auto; }
    .card h1 { font-size:34px; line-height:1; margin:12px 0 6px; } .card p { color:var(--muted); font-size:14px; margin:0 0 22px; line-height:1.55; }
    label { display:block; font:12px 'DM Mono', monospace; text-transform:uppercase; color:var(--muted); margin:14px 0 6px; }
    input { width:100%; padding:11px 12px; border:1px solid var(--line); background:#fff; font:15px 'DM Mono', monospace; color:var(--ink); }
    input:focus { outline:2px solid var(--teal); outline-offset:-2px; }
    button { margin-top:20px; width:100%; padding:13px; border:0; background:var(--ink); color:var(--paper); font:600 15px 'Space Grotesk', sans-serif; cursor:pointer; }
    button:hover { background:var(--teal); } button:disabled { opacity:.5; cursor:not-allowed; }
    .err { margin-top:15px; padding:11px; background:#fdeceb; border-left:4px solid var(--coral); color:#8f3325; font-size:13px; display:none; }
    .ok-msg { margin-top:15px; padding:11px; background:#eef7e4; border-left:4px solid var(--teal); color:#1d5b3f; font-size:13px; display:none; }
    code { font-family:'DM Mono', monospace; background:#efece2; padding:2px 5px; }