:root { color-scheme: light dark; font-family: system-ui, sans-serif; line-height: 1.6; }
body { margin: 0; color: #243447; background: #f4f7f6; }
header { background: #243447; color: white; }
nav { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; max-width: 70rem; margin: auto; padding: 1rem; }
nav a { color: white; }
main { max-width: 70rem; margin: 1.5rem auto; padding: 1.5rem; background: white; overflow-wrap: anywhere; }
a { color: #126294; text-underline-offset: .15em; }
a:focus-visible { outline: 3px solid #d59100; outline-offset: 3px; }
h1, h2, h3 { line-height: 1.25; }
h2 { margin-top: 2rem; }
pre { background: #edf1f4; padding: 1rem; overflow: auto; }
code { font-size: .95em; }
table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
th, td { text-align: left; vertical-align: top; border: 1px solid #ccd4dc; padding: .5rem .75rem; }
img { max-width: 100%; height: auto; }
.source { margin-top: 2rem; border-top: 1px solid #ccd4dc; padding-top: 1rem; font-size: .9rem; }
.skip { position: absolute; left: -10000px; }
.skip:focus { position: static; display: block; padding: .5rem; }
@media (max-width: 40rem) { main { margin: 0; padding: 1rem; } h1 { font-size: 1.8rem; } }
@media (prefers-color-scheme: dark) {
  body { color: #e1e7ed; background: #17212b; }
  main { background: #202c38; }
  a { color: #8ccdf8; }
  pre { background: #17212b; }
  th, td, .source { border-color: #556675; }
}