:root {
  color-scheme: light dark;
  --canvas: #eaf2e4;
  --card: #ffffff;
  --text: rgba(14, 22, 10, 0.88);
  --text-2: rgba(14, 22, 10, 0.6);
  --hairline: rgba(24, 48, 16, 0.12);
  --link: #1f4d14;
  --serif: ui-serif, "New York", "Newsreader", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #141d13;
    --card: #1c281a;
    --text: rgba(255, 255, 255, 0.92);
    --text-2: rgba(255, 255, 255, 0.64);
    --hairline: rgba(255, 255, 255, 0.12);
    --link: #c9e6b8;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--text); font: 16px/1.6 var(--sans); }
main { max-width: 680px; margin: 0 auto; padding: 64px 20px 80px; }
h1, h2 { font-family: var(--serif); font-weight: 500; line-height: 1.2; }
h1 { font-size: 2.4rem; margin: 0 0 8px; }
h2 { font-size: 1.35rem; margin: 40px 0 8px; }
p, li { color: var(--text); }
.lede { color: var(--text-2); font-size: 1.1rem; margin: 0 0 40px; }
.muted { color: var(--text-2); font-size: 0.9rem; }
a { color: var(--link); }
.cards { display: grid; gap: 12px; padding: 0; list-style: none; }
.cards a { display: block; padding: 18px 20px; background: var(--card); border: 1px solid var(--hairline); border-radius: 14px; text-decoration: none; color: var(--text); }
.cards strong { display: block; font-weight: 600; }
.cards span { color: var(--text-2); font-size: 0.95rem; }
footer { margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--hairline); color: var(--text-2); font-size: 0.9rem; }