:root {
  color-scheme: light dark;
}

body {
  font-family: monospace;
  background: light-dark(#ffffff, #111111);
  max-width: 100ch;
  margin: 4ch auto;
  padding: 0 2ch;
}

.site-header {
  display: flex;
  justify-content: space-between;
  gap: 2ch;
  align-items: baseline;
  margin-bottom: 4ch;
}

.site-nav {
  display: flex;
  gap: 2ch;
}

.site-header a,
.site-header a:visited {
  color: inherit;
  text-decoration: none;
}

pre {
  background: light-dark(#f2f2f2, #1f1f1f);
  padding: 2ch;
  overflow-x: auto;
}

dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.75ch 2ch;
}

dt {
  font-weight: bold;
}

dd {
  margin: 0;
}

:is(h1, h2, h3, h4, h5, h6) > a,
:is(h1, h2, h3, h4, h5, h6) > a:visited {
  color: inherit;
  text-decoration: none;
}

:is(h1, h2, h3, h4, h5, h6) > a:hover,
:is(h1, h2, h3, h4, h5, h6) > a:focus-visible {
  text-decoration: underline;
}

:is(h1, h2, h3, h4, h5, h6) > a::before {
  content: "#";
  display: inline-block;
  width: 2ch;
  margin-left: -2ch;
  opacity: 0;
}

:is(h1, h2, h3, h4, h5, h6):hover > a::before,
:is(h1, h2, h3, h4, h5, h6) > a:focus-visible::before {
  opacity: 0.5;
}

.prompt,
.comment {
  opacity: 0.65;
}

code,
.cmd,
.kw {
  color: light-dark(#003c8f, #8ab4ff);
}

.opt {
  color: light-dark(#8a2a00, #ffb86c);
}

.str {
  color: light-dark(#006400, #7ee787);
}

.var {
  color: light-dark(#6f42c1, #d2a8ff);
}