:root {
  color-scheme: light dark;
  --b: #fff;
  --f: #181a1f;
  --m: #5d6470;
  --l: #d8dde5;
  --c: #f2f4f7;
  --a: #155eef;
  --k: #9f1239;
  --s: #047857;
  --n: #b45309;
  --i: #1d4ed8;
}
@media (prefers-color-scheme: dark) {
  :root {
    --b: #101114;
    --f: #eceff3;
    --m: #a9b0bb;
    --l: #30343b;
    --c: #1c1f25;
    --a: #8ab4ff;
    --k: #f9a8d4;
    --s: #6ee7b7;
    --n: #fcd34d;
    --i: #93c5fd;
  }
}
* {
  box-sizing: border-box;
}
html {
  background: var(--b);
  color: var(--f);
  font-family: system-ui, sans-serif;
}
body,
h1,
h2,
h3,
p,
ul,
footer {
  margin: 0;
}
header,
main {
  max-width: 58em;
  margin: auto;
  padding: 0 1em;
}
header {
  display: flex;
  justify-content: space-between;
  gap: 1.5em;
  padding-block: 1.125em;
  border-bottom: thin solid var(--l);
}
nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875em;
  font-size: 0.875em;
}
a {
  color: var(--a);
}
.brand {
  color: var(--f);
  font-weight: 700;
  text-decoration: none;
}
main {
  padding-block: 2.75em 4.5em;
}
section {
  padding-block: 1.75em;
  border-bottom: thin solid var(--l);
}
.intro {
  padding-top: 0;
}
h1 {
  max-width: 13.6em;
  font-size: 3.5em;
  line-height: 1;
}
h2 {
  margin-bottom: 0.58em;
  font-size: 1.5em;
}
h3 {
  margin-bottom: 0.67em;
  font-size: 1.25em;
}
p,
dd,
li,
footer {
  max-width: 45em;
  color: var(--m);
  line-height: 1.6;
}
p + p,
p + ul,
pre + p,
dl + p {
  margin-top: 0.875em;
}
p + h3,
ul + h3,
pre + h3 {
  margin-top: 1.6em;
}
.use-cases {
  padding: 0;
  list-style: none;
}
.use-cases li {
  max-width: none;
  padding: 0.75em 0;
  border-top: thin solid var(--l);
}
strong {
  color: var(--f);
}
code,
pre {
  font-family: ui-monospace, monospace;
}
code {
  padding: 0.125em 0.3125em;
  border-radius: 0.25em;
  background: var(--c);
  color: var(--f);
  font-size: 0.92em;
}
pre {
  overflow-x: auto;
  margin: 1em 0;
  padding: 0.875em;
  border: thin solid var(--l);
  border-radius: 0.375em;
  background: var(--c);
  line-height: 1.5;
}
pre code {
  padding: 0;
  background: none;
  font-size: 0.875em;
}
.tok-kw,
.tok-method {
  color: var(--k);
}
.tok-str,
.tok-host,
.tok-bool {
  color: var(--s);
}
.tok-num,
.tok-query,
.tok-proto {
  color: var(--n);
}
.tok-id,
.tok-call,
.tok-prop {
  color: var(--i);
}
.tok-method,
dt {
  font-weight: 700;
}
dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.5em 1.125em;
  margin: 1.125em 0 0;
}
dd {
  margin: 0;
}
.stats dl {
  font-family: ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}
.charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18em), 1fr));
  gap: 1em;
}
.charts article {
  padding: 0.75em;
  border: thin solid var(--l);
  border-radius: 0.375em;
  background: var(--c);
}
.charts h3 {
  font-size: 1em;
}
.charts canvas {
  width: 100%;
  height: 4em;
}
footer {
  padding-block: 2.5em 1.75em;
}
@media (max-width: 40em) {
  header,
  dl {
    display: block;
  }
  nav {
    margin-top: 0.75em;
  }
  h1 {
    font-size: 2.25em;
  }
}