body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 1.05rem/1.65 var(--sans);
}
header, main, footer { max-width: 52rem; margin: auto; padding: 1.5rem; }
header { font-weight: 700; font-size: 1.3rem; }
main { padding-top: 0; }
article { border-top: 1px solid var(--line); margin-top: 2rem; }
h1, h2 { line-height: 1.25; }
h1 { font-size: 2rem; letter-spacing: -.02em; }
h2 { font-size: 1.4rem; letter-spacing: normal; margin-top: 2rem; }
a { color: var(--red); text-underline-offset: .18em; overflow-wrap: anywhere; }
a:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
li { margin-block: .5rem; }
pre {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: .5rem;
  padding: 1rem;
  overflow-x: auto;
  font-size: .9rem;
  line-height: 1.5;
}
pre:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
code { font-family: ui-monospace, monospace; }
:not(pre) > code { overflow-wrap: anywhere; }
.intro { font-size: 1.2rem; }
footer { border-top: 1px solid var(--line); font-size: .95rem; }