:root {
  color-scheme: light dark;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  color: #242424;
  background: #fafaf8;
}
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 54rem; margin: 0 auto; padding: 3rem 1.25rem; }
nav { margin-bottom: 2rem; }
h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); line-height: 1.2; margin: 0 0 0.6rem; }
h2, h3 { line-height: 1.3; }
header { margin-bottom: 2rem; }
a { color: #245a9a; text-underline-offset: 0.18em; }
time { color: #626262; font-size: 0.875rem; }
img, svg, video { display: block; max-width: 100%; height: auto; }
figure { margin: 2rem 0; }
figcaption { color: #626262; font-size: 0.9rem; margin-top: 0.5rem; }
pre { overflow-x: auto; padding: 1rem; background: #efefeb; border-radius: 0.4rem; }
code { font-size: 0.9em; }
blockquote { margin-left: 0; padding-left: 1rem; border-left: 3px solid #bcbcb7; }
table { border-collapse: collapse; display: block; overflow-x: auto; }
th, td { padding: 0.4rem 0.75rem; border-bottom: 1px solid #bcbcb7; text-align: left; }
.page-list { list-style: none; padding: 0; }
.page-list li { padding: 1rem 0; border-top: 1px solid #d9d9d2; }
.page-list a { font-weight: 600; }
.page-list time { display: block; }
.page-list p { margin: 0.4rem 0 0; }
@media (max-width: 480px) {
  main { padding-top: 1.5rem; }
}
@media (prefers-color-scheme: dark) {
  :root { color: #e6e6e0; background: #1b1b1a; }
  a { color: #96bdf2; }
  time, figcaption { color: #b0b0a8; }
  pre { background: #292927; }
  .page-list li, th, td { border-color: #484842; }
}