:root {
  color-scheme: light dark;
  --bg: #f5f3ed;
  --panel: #fffdf8;
  --ink: #252821;
  --muted: #62675d;
  --line: #d8d5ca;
  --accent: #4d7363;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1d1f1b;
    --panel: #272a24;
    --ink: #f1efe7;
    --muted: #b7b9b0;
    --line: #454940;
    --accent: #8db7a6;
  }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); line-height: 1.68; }
main { width: min(48rem, calc(100% - 2rem)); margin: 2rem auto 4rem; }
article { background: var(--panel); border: 1px solid var(--line); border-radius: 1rem; padding: clamp(1.25rem, 4vw, 2.75rem); }
h1 { margin: 0 0 .35rem; font-size: clamp(1.8rem, 5vw, 2.6rem); line-height: 1.2; }
h2 { margin: 2rem 0 .55rem; font-size: 1.2rem; }
h3 { margin: 1.4rem 0 .35rem; font-size: 1rem; }
p, li { max-width: 72ch; }
ul, ol { padding-left: 1.35rem; }
a { color: var(--accent); text-underline-offset: .18em; }
.meta { color: var(--muted); margin: 0 0 1.6rem; }
.language { border-top: 1px solid var(--line); margin-top: 2.5rem; padding-top: .5rem; }
.notice { border-left: .25rem solid var(--accent); padding: .7rem 1rem; background: color-mix(in srgb, var(--accent) 9%, transparent); }
nav { margin: 0 0 1rem; font-size: .92rem; }
footer { color: var(--muted); font-size: .88rem; margin-top: 1.5rem; }
code { overflow-wrap: anywhere; }