:root{
  --bg:#ffffff;
  --ink:#111;
  --muted:#5b5b5b;
  --line:#e7e7e7;
  --panel:#f7f7f7;
  --accent:#0b3a6a;

  --radius:14px;
  --max:980px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.55;
}

a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
a:hover{ text-decoration-thickness:2px; }

.wrap{ max-width:var(--max); margin:0 auto; padding:24px; }

.header{
  border-bottom:1px solid var(--line);
  background:#fff;
}
.brand{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px;
}
.brand__name{
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.brand__nav{
  display:flex; gap:14px; flex-wrap:wrap;
  font-size:14px;
}

.h1{
  margin:10px 0 0;
  font-size:40px;
  letter-spacing:-.02em;
}
.lede{
  margin:10px 0 0;
  color:var(--muted);
  max-width:70ch;
}

.card{
  margin-top:20px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--panel);
}

.label{ display:block; font-size:13px; color:var(--muted); margin-bottom:6px; }
.row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.input{
  font:inherit;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid #cfcfcf;
  background:#fff;
  min-width:260px;
}
.btn{
  font:inherit;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid #bdbdbd;
  background:#fff;
  cursor:pointer;
}
.btn:hover{ border-color:#999; }
.btn--primary{
  border-color:var(--accent);
  background:var(--accent);
  color:#fff;
}
.btn--primary:hover{ filter:brightness(0.95); }

.note{ color:var(--muted); font-size:14px; margin:10px 0 0; }
.error{ color:#8a1f11; font-size:14px; margin:10px 0 0; }

.footer{
  margin-top:40px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:14px;
}
.small{ font-size:13px; color:var(--muted); }

code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background:#f0f0f0;
  padding:2px 6px;
  border-radius:8px;
}