:root { color-scheme: light dark; }
body { max-width: 46rem; margin: 0 auto; padding: 2rem 1.25rem 6rem;
       font: 16px/1.65 system-ui, -apple-system, "Segoe UI", sans-serif; }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
pre { padding: .9rem 1rem; overflow-x: auto; border-radius: 6px;
      background: #f5f5f7; }
code { font-size: .9em; }
pre code { font-size: .85em; }
table { border-collapse: collapse; width: 100%; display: block;
        overflow-x: auto; margin: 1rem 0; }
th, td { border: 1px solid #d0d0d6; padding: .4rem .6rem; text-align: left; }
th { background: #f5f5f7; }
img { max-width: 100%; height: auto; display: block; }
.screenshots { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.screenshots a { flex: 1 1 180px; min-width: 0; }
.screenshots img { width: 100%; border-radius: 4px; }
h1, h2, h3 { line-height: 1.25; }
h2 { margin-top: 2.2rem; }
nav { margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid #d0d0d6; }
@media (prefers-color-scheme: dark) {
  body { background: #16161a; color: #d8d8de; }
  pre, th { background: #202027; }
  th, td { border-color: #33333c; }
  a { color: #7fb2f0; }
  nav { border-color: #33333c; }
}