:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body {
  margin: 0 auto; padding: 2rem 1.25rem 4rem; max-width: 46rem;
  font: 16px/1.7 -apple-system, "SF Pro Text", "PingFang SC", "Segoe UI", Roboto, sans-serif;
  color: #1d1d1f; background: #ffffff;
}
h1 { font-size: 1.7rem; line-height: 1.3; margin: 0.5rem 0 0.25rem; }
h2 { font-size: 1.25rem; margin-top: 2.2rem; border-bottom: 1px solid rgba(128,128,128,.25); padding-bottom: .3rem; }
h3 { font-size: 1.05rem; margin-top: 1.4rem; }
p, li { max-width: 65ch; }
a { color: #0066cc; text-decoration: none; }
a:hover { text-decoration: underline; }
nav.top { font-size: .9rem; margin-bottom: 1.5rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.lang-switch { font-size: .9rem; margin: 0 0 1rem; }
.meta { color: #6e6e73; font-size: .9rem; }
hr.lang { margin: 3rem 0; border: none; border-top: 2px solid rgba(128,128,128,.35); }
footer { margin-top: 3.5rem; font-size: .85rem; color: #6e6e73; }
code { background: rgba(128,128,128,.12); padding: .1em .35em; border-radius: 4px; font-size: .92em; }
@media (prefers-color-scheme: dark) {
  body { color: #f5f5f7; background: #1c1c1e; }
  a { color: #6cb2ff; }
  .meta, footer { color: #98989d; }
}