:root {
  --ground: #edf1ea; --raised: #ffffff; --ink: #16231d; --ink2: #4d5f56; --line: #d3ddd4;
  --fern: #2b7a50; --margin: #e8b4a4;
}
@media (prefers-color-scheme: dark) {
  :root { --ground: #0c1411; --raised: #192720; --ink: #e2ebe4; --ink2: #a2b4a9; --line: #26372e;
          --fern: #6bcf96; --margin: #5a3a30; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--ground); color: var(--ink);
  font: 16px/1.6 "Atkinson Hyperlegible", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
main { max-width: 720px; margin: 0 auto; padding: 32px 16px 64px; }
.page { background: var(--raised); border: 1px solid var(--line); border-radius: 22px;
  padding: 28px 28px 28px 44px; position: relative;
  background-image: repeating-linear-gradient(transparent 0 31px, color-mix(in srgb, var(--ink) 5%, transparent) 31px 32px); }
.page::before { content: ""; position: absolute; left: 26px; top: 0; bottom: 0; width: 1.5px; background: var(--margin); }
header { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
header img { width: 56px; height: 56px; border-radius: 14px; }
h1 { font-size: 28px; line-height: 1.2; margin: 0; }
h2 { font-size: 19px; margin: 28px 0 6px; }
p, li { color: var(--ink2); }
a { color: var(--fern); }
.small { font-size: 13px; }