:root {
  --ink: #1a1a1a;
  --paper: #ffffff;
  --panel: #ffffff;
  --line: #dedbd3;
  --accent: #16645a;
  --radius: 8px;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
  --ink: #f0f0f0;
  --paper: #14140f;
  --panel: #1e1d18;
  --line: #34322b;
  --accent: #5fd0c0;
}
}
:root[data-theme="dark"] {
  --ink: #f0f0f0;
  --paper: #14140f;
  --panel: #1e1d18;
  --line: #34322b;
  --accent: #5fd0c0;
}
body { margin: 0; }
body { font-family: ui-serif, Georgia, Cambria, serif; }
body { color: var(--ink); }
body { background: var(--paper); }
body { line-height: 1.7; }
main { max-width: 820px; }
main { margin: 0 auto; }
main { padding: 3rem 2rem 5rem; }
h1 { font-size: 3rem; }
h1 { line-height: 1; }
h2 { margin-top: 2.4rem; }
h2 { border-top: 1px solid var(--line); }
h2 { padding-top: 1.2rem; }
a { color: var(--accent); }
pre { background: var(--panel); }
pre { border: 1px solid var(--line); }
pre { padding: 1rem; }
pre { border-radius: var(--radius); }
pre { overflow-x: auto; }
.swatch { border: 1px solid var(--line); }
.swatch { background: var(--panel); }
.swatch { color: var(--ink); }
.swatch { padding: 1.4rem; }
.swatch { margin: 1.5rem 0; }
.swatch { border-radius: var(--radius); }