body {
  max-width: 38em;
  margin: 3em auto;
  padding: 0 1em;
  font: 1.05rem/1.6 Georgia, "Times New Roman", serif;
  color: #222;
  background: #fdfdfb;
}
h1 { font-size: 2em; margin: 1em 0 .25em; }
h2 { font-size: 1.3em; margin-top: 2em; }
a { color: #1a4a8a; }
li { margin-bottom: .5em; }
@media (prefers-color-scheme: dark) {
  body { color: #ddd; background: #161616; }
  a { color: #8ab4f8; }
}
.toc { font-size: .9em; color: #666; }
@media (prefers-color-scheme: dark) { .toc { color: #999; } }

/* Instant tooltips. The build moves each link's title into data-title;
   native title tooltips appear only after a delay we cannot control.
   Titled links stay on one line: a tooltip inside a link that wraps has
   no well-defined box to hang from. */
a[data-title] { position: relative; white-space: nowrap; }
a[data-title]:hover::after,
a[data-title]:focus-visible::after {
  content: attr(data-title);
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  margin-top: .4em;
  padding: .35em .7em;
  width: max-content;
  max-width: min(24em, 90vw);
  white-space: normal;
  font: italic .85rem/1.35 Georgia, "Times New Roman", serif;
  color: #555;
  background: #efefef;
  border: 1px solid #d4d4d4;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
  z-index: 1;
  pointer-events: none;
}
@media (prefers-color-scheme: dark) {
  a[data-title]:hover::after,
  a[data-title]:focus-visible::after {
    color: #c4c4c4;
    background: #262626;
    border-color: #444;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
  }
}