:root {
  --color: #2e2e2e;
  --background: white;
  --link-color: royalblue;
  --secondary-color: #7f7f7f;
  --emphatic-color: var(--color);
  --line-color: #e6e6e6;

  --aux-color: #797979;
  --aux-background: #f2f2f2;
  --aux-background-end: #e3e3e3;
  --aux-border-color: #828282;
  --aux-link-color: royalblue;
  --aux-secondary-color: var(--color);
  --aux-emphatic-color: #3d3d3d; /* cover title, selected nav item */
  --aux-line-color: #b3b3b3;

  --code-block-color: var(--color);
  --code-block-background: #f2f2f2;
}
@media (prefers-color-scheme: dark) {
  :root {
    --color: #d5d5d5;
    --background: #1a1a1a;
    --link-color: deepskyblue;
    --secondary-color: #8d8d8d;
    --emphatic-color: var(--color);
    --line-color: #383a3e;

    --aux-color: #8e9198;
    --aux-background: #1d2331;
    --aux-background-end: #232738;
    --aux-border-color: #49587b;
    --aux-link-color: deepskyblue;
    --aux-secondary-color: var(--color);
    --aux-emphatic-color: #c6c7cb;
    --aux-line-color: #616e8c;

    --code-block-color: var(--color);
    --code-block-background: #1d2331;
  }
}
:root {
  --max-content-width: 45em;
  --content-padding-x: 1.75rem;
  --content-padding-y: 1.75rem;
  --block-margin-y: 1em;
  --sep-line: 0.3rem solid var(--line-color);

  font: normal 100% / 1.45 sans-serif;
  color: var(--color);
  background: var(--background);
}
.aux {
  --color: var(--aux-color);
  --background: var(--aux-background);
  --link-color: var(--aux-link-color);
  --secondary-color: var(--aux-secondary-color);
  --emphatic-color: var(--aux-emphatic-color);
  --line-color: var(--aux-line-color);

  color: var(--color);
  background: var(--background);
}
body {
  padding: 0;
  margin: 0;
}
@media (max-width: 840px) {
  :root {
    --max-content-width: 100%;
    --content-padding-x: 0.85rem;
    --content-padding-y: 1rem;
  }
  body {
    font-size: 100%;
  }
}
p,
ul,
ol,
table,
pre,
blockquote {
  margin-top: var(--block-margin-y);
  margin-bottom: var(--block-margin-y);
}
ul,
ol {
  padding-inline-start: 2em;
}
a,
a:link,
a:visited,
a:hover,
a:active {
  --color: var(--link-color);
  color: var(--color);
  text-decoration: none;
  border-bottom: 0.05em solid;
}
h1 {
  font-size: 2.25em;
  line-height: 1;
  margin: 0;
}
h2,
h3,
h4 {
  line-height: 1.1;
  padding-top: 0.3em;
  margin: 1em 0 0.65em 0;
}
h2 {
  font-size: 1.3em;
}
h3 {
  font-size: 1.15em;
}
h4 {
  font-size: 1em;
}
main {
  box-sizing: border-box;
}
main ul {
  padding: 0;
  padding-inline-start: 1.5em;
  margin: 1em 0;
}
main ul ul {
  margin: 0.5em 0;
}
main li {
  margin-top: 0;
  margin-bottom: 0.5em;
}

.highlight {
  border-radius: 1em;
  margin: 0;
}
code {
  background: color(from var(--color) srgb r g b / 0.08);
  border-radius: 0.35em;
  padding: 0.15em 0.35em;
}
@media (prefers-color-scheme: dark) {
  code {
    background: color(from var(--color) srgb r g b / 0.12);
  }
}
pre,
pre.highlight {
  line-height: 1.25;
  color: inherit;
  border-radius: 0.5em;
  overflow: auto;
}
pre > code {
  display: block;
  background: var(--code-block-background);
  padding: 1.25em;
}

html.blank h1 {
  font-size: 10vmin;
  color: var(--secondary-color);
}
html.blank .layout {
  display: flex;
  height: 90vh;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}