:root {
  color-scheme: light;
  --ink: #101318;
  --muted: #526071;
  --blue: #245eea;
  --blue-hover: #1649bf;
  --surface: #f4f7fc;
  --gap: 16px;
  --radius: 16px;
  font: 100%/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: grid; place-items: center; }
main { width: min(100%, 560px); padding: 48px 24px; }
.brand { color: var(--blue); font-size: 28px; font-weight: 750; }
h1 { font-size: clamp(28px, 6vw, 40px); line-height: 1.15; text-wrap: balance; }
p { color: var(--muted); text-wrap: pretty; }
nav { display: grid; gap: var(--gap); margin-block: 32px 24px; }
nav a {
  display: grid; place-items: center; min-height: 56px; padding: var(--gap);
  border-radius: var(--radius); background: var(--blue); color: white;
  text-align: center; text-decoration: none; font-weight: 650;
}
nav a:hover { background: var(--blue-hover); }
nav a:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.help { font-size: 14px; }