:root {
  color-scheme: light dark;

  --default-base-color: light-dark(#f2f2f2, #1d2331);
  --default-link-color: light-dark(royalblue, deepskyblue);

  /* backgrounds */
  --b0: light-dark(white, #1a1a1a);
  --b1: var(--base-color, var(--default-base-color));
  --button-color: light-dark(royalblue, royalblue);

  /* text colors */
  --c0: oklch(from var(--b0) calc(100 * (0.78 - l)) 0 0 / 0.82);
  --c1: oklch(from var(--b1) calc(100 * (0.78 - l)) 0 0 / 0.82);
  --c2: oklch(from var(--button-color) calc(100 * (0.75 - l)) 0 0 / 0.82);

  /* link colors */
  --a0: var(--default-link-color);
  --a1: var(--link-color, var(--default-link-color));

  --a0-light: hsl(from var(--a1) calc(h + 50) s 55%);
  --a0-dark: hsl(from var(--a1) calc(h + 50) s 65%);

  /* spacing */
  --max-content-width: 64em;
  --content-padding-x: 1.75rem;
  --content-padding-y: 1.75rem;
  --space-x: var(--content-padding-x);
  --block-margin-y: 1em;

  /* borders */
  --hr-border: 0.3rem solid var(--overlay-background-color);
  --link-border: 0.05em solid;

  --overlay-background-color: hsl(from var(--b1) h s 50% / 0.2);
  --overlay-border-color: hsl(from var(--b1) h s 60% / 0.7);

  font: normal 100% / 1.45 sans-serif;
}
html {
  color: var(--c0);
  background-color: var(--b0);
  background-position: 50% 0;
}
body {
  color: inherit;
  background-color: transparent;
  padding: 0;
  margin: 0;
}
@media (max-width: 840px) {
  :root {
    --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(--a0);
  text-decoration: none;
  border-bottom: var(--link-border);
}

a.button {
  --bc1: color(from var(--c0) srgb r g b / 0.25);
  --bc2: color(
    from var(--c0) srgb calc(0.8 * r) calc(0.8 * g) calc(0.8 * b) /
    0.35
  );

  display: inline-block;
  text-decoration: none;
  text-align: center;
  color: color(from var(--b0) srgb r g b / 0.9);
  background: color(from var(--c0) srgb r g b / 0.65);
  border: 0.075em solid var(--c0);
  border-color: var(--bc1) var(--bc2) var(--bc2) var(--bc1);
  border-radius: var(--r);
  padding: 0.25em 1.25em;
  margin: 0.5em 0.35em;
  box-shadow: 0 0 0.1em 0 var(--c0);
  transition: box-shadow 0.1s;
  box-sizing: border-box;
}
a.button:hover {
  box-shadow: 0 0 0.25em 0 var(--c0);
}
a.button.primary {
  --bc1: color(from var(--button-color) srgb r g b / 0.55);
  --bc2: color(
    from var(--button-color) srgb calc(0.8 * r) calc(0.8 * g) calc(0.8 * b) /
    0.7
  );

  font-weight: bold;
  color: var(--c2);
  background: var(--button-color);
  box-shadow: 0 0 0.2em 0 var(--button-color);
}
a.button.primary:hover {
  box-shadow: 0 0 0.35em 0 var(--button-color);
}

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.5em;
}
h3 {
  font-size: 1.3em;
}
h4 {
  font-size: 1.15em;
}

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;
}

.b1 {
  color: color(from var(--c1) srgb r g b / 0.5);
  background: var(--b1);
}
.b1 a,
.b1 a:link,
.b1 a:hover,
.b1 a:visited,
.b1 a:active {
  color: var(--a1);
}

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

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