:root {
  --bg: #f6f4ef;
  --ink: #1d2327;
  --soft: #556068;
  --line: #d9d4c8;
  --accent: #1f6f5c;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #14181a; --ink: #e9e6df; --soft: #a3adb3; --line: #2c3438; --accent: #6fcfb4; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.6 ui-serif, Georgia, "Times New Roman", serif;
}
main, footer { max-width: 40rem; margin: 0 auto; padding: 0 1.25rem; }
main { padding-top: 4.5rem; }
.logo { display: block; width: 64px; height: 64px; margin: 0 0 1.5rem; }
h1 {
  font: 600 2.5rem/1.1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: -0.02em;
  margin: 0 0 .75rem;
}
h2 {
  font: 600 .8rem/1.3 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--soft);
  margin: 0 0 .5rem;
}
.lead { font-size: 1.2rem; line-height: 1.5; color: var(--soft); margin: 0 0 2.5rem; }
.back { margin: 0 0 1.5rem; font: 500 .9rem ui-sans-serif, system-ui, sans-serif; }
section { border-top: 1px solid var(--line); padding: 1.5rem 0; }
section p, section ul { margin: 0; }
section ul { padding-left: 1.15rem; }
section li + li { margin-top: .4rem; }
a { color: var(--accent); text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
code { font: .9em ui-monospace, SFMono-Regular, Menlo, monospace; background: color-mix(in srgb, var(--line) 60%, transparent); padding: .1em .35em; border-radius: 4px; }
footer { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: 1.25rem; padding-bottom: 3rem; color: var(--soft); font: .9rem ui-sans-serif, system-ui, sans-serif; }