:root {
  --paper: #F6F5F1;
  --ink: #171814;
  --muted: #5A5C54;
  --faint: #8B8D84;
  --accent: #4E7357;
  --rule: #E3E1DA;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #171814;
    --ink: #F6F5F1;
    --muted: #A8AAA1;
    --faint: #74766E;
    --accent: #93B896;
    --rule: #2A2C27;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
main { max-width: 34rem; margin: 0 auto; padding: 4rem 1.5rem 6rem; }
h1 { font-size: 1.9rem; line-height: 1.25; margin: 0 0 .4rem; letter-spacing: -.02em; }
h2 { font-size: 1.05rem; margin: 2.6rem 0 .6rem; letter-spacing: -.01em; }
p { margin: 0 0 1rem; color: var(--muted); }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.lede { color: var(--muted); font-size: 1.05rem; margin-bottom: 2.2rem; }
.mark {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid var(--accent); border-top-color: transparent;
  transform: rotate(-45deg); margin-bottom: 1.6rem;
}
hr { border: 0; border-top: 1px solid var(--rule); margin: 3.5rem 0; }
.lang { font-size: .78rem; text-transform: uppercase; letter-spacing: .09em;
        color: var(--faint); margin: 0 0 1.4rem; }
footer { margin-top: 4rem; padding-top: 1.4rem; border-top: 1px solid var(--rule);
         font-size: .88rem; color: var(--faint); }
footer a { color: var(--faint); }
ul { color: var(--muted); padding-left: 1.1rem; margin: 0 0 1rem; }
li { margin-bottom: .4rem; }