:root { --w: 780px; --pad: 20px; }
html, body { height: 100%; }
body {
  margin: 0;
  padding: var(--pad);
  font: 14px/1.4 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  background: #ffffff;
  color: #000000;
}
main { max-width: var(--w); margin: 0 auto; }
h1, h2 { margin: 0 0 8px; }
h1 { font-size: 24px; }
h2 { font-size: 16px; }
.bar { border-top: 1px solid #000; margin: 18px 0; }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
a { color: #0000ff; text-decoration: underline; }
a:focus, button:focus { outline: 2px solid #000; outline-offset: 2px; }
ul { padding-left: 18px; margin: 8px 0; }
code, pre { background: #f2f2f2; padding: 2px 4px; }
footer { margin-top: 28px; font-size: 12px; }
/* @media (prefers-color-scheme: dark) {
  body { background: #000; color: #fff; }
  a { color: #7aa2ff; }
  .bar { border-color: #fff; }
  code, pre { background: #111; }
} */