:root {
  color-scheme: light dark;
  font-family: system-ui, sans-serif;
  background: #f4f7f5;
  color: #18251f;
  line-height: 1.65;
}
body { max-width: 46rem; margin: auto; padding: 0 1.25rem 3rem; }
header { display: flex; justify-content: space-between; padding: 1.25rem 0; }
header a:first-child { font-weight: 750; }
main { padding: clamp(1.25rem, 4vw, 2.5rem); background: #fff; border: 1px solid #d4e2da; border-radius: 1rem; }
h1 { margin: 0 0 1rem; line-height: 1.15; }
h2 { margin: 1.5rem 0 .25rem; font-size: 1.18rem; }
p { margin: 0 0 1rem; overflow-wrap: anywhere; }
p:last-child { margin-bottom: 0; }
a { color: #12614f; text-underline-offset: .18em; }
nav { display: flex; flex-wrap: wrap; gap: .5rem 1rem; padding-top: 1rem; }
@media (prefers-color-scheme: dark) {
  :root { background: #111a16; color: #eef5f0; }
  main { background: #18251f; border-color: #374f44; }
  a { color: #a3e1cc; }
}