* { box-sizing: border-box; }

:root {
  --bg:             #fff;
  --fg:             #000;

  --nav-bg:         #14171a;
  --nav-fg:         #fff;

  --hover-fg:       #000;
  --hover-bg:       #8ff;
  --true-fg:        #000;
  --selected-bg:    #ff8;
  --max-width:      80ch;
  --ml:             0.25em;
  --hr-fg:          #000;
  --hr-bg:          #ffdfff;

  --pre-bg:         #ffffff;
  --ln-fg:          #999;
}

html.dark {
  --bg:             #14171a;
  --fg:             #fff;

  --nav-bg:         #fff;
  --nav-fg:         #14171a;

  --hr-fg:          #fff;
  --hr-bg:          #4f2f4f;

  --pre-bg:         #222;
  --ln-fg:          #555;
}

body {
  margin: 0;
  padding-left: 2em;
  font-family: monospace;
  font-size: 16px;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.5;
  image-rendering: pixelated;
}

#content {
  max-width: var(--max-width);
  margin: 1em auto 0 var(--ml);
}

h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: 500;
    width: fit-content;
    color: var(--hr-fg);
}
h1                  { margin-left: auto; margin-right: auto; }

#nav-brand { background: var(--nav-bg); color: var(--nav-fg); padding: 0.25em 0.4em; margin: -0.25em 0 -0.25em -0.5em; }

nav {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    background: var(--bg);
    color: var(--fg);
    padding: 0em 0.5em;
    max-width: var(--max-width);
    margin-left: var(--ml);
    margin-right: auto;
}

.controls { display: flex; align-items: baseline; gap: 1em; }
.controls button { background: none; border: none; font: inherit; color: inherit; cursor: pointer; padding: 0; }
.controls button[aria-pressed="true"] { color: var(--true-fg); background-color: var(--selected-bg); }
.controls button:hover { color: var(--hover-fg); background-color: var(--hover-bg); }

a { color: inherit; }
a:hover { color: var(--hover-fg); background-color: var(--hover-bg); }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { text-decoration: none; }

hr  { border: none; border-top: 1px solid var(--fg); margin: 2em 0; }
pre { overflow-x: auto; padding: 1rem; background-color: var(--pre-bg); color: var(--fg); }
img { max-width: 100%; }





/* syntax highlighting — structure */
pre > code.sourceCode { white-space: pre; position: relative; counter-reset: line; }
pre > code.sourceCode > span { display: inline-block; line-height: 1.25; counter-increment: line; }
pre > code.sourceCode > span:empty { height: 1.2em; }
pre > code.sourceCode > span::before {
  content: counter(line);
  display: inline-block;
  width: 2em;
  padding-right: 0.75em;
  margin-right: 0.75em;
  text-align: right;
  color: var(--ln-fg);
  border-right: 1px solid var(--ln-fg);
  user-select: none;
  -webkit-user-select: none;
}
code.sourceCode > span { color: inherit; text-decoration: inherit; }
div.sourceCode { overflow: auto; }

/* light theme (lunaperche) */
code span.kw { color: #000000; font-weight: bold; } /* Statement */
code span.cf { color: #000000; font-weight: bold; } /* Statement */
code span.ot { color: #000000; font-weight: bold; } /* Statement */
code span.dt { color: #008700; }                    /* Type */
code span.cn { color: #af00af; }                    /* Constant */
code span.dv { color: #af00af; }                    /* Number→Constant */
code span.bn { color: #af00af; }                    /* Number→Constant */
code span.fl { color: #af00af; }                    /* Float→Constant */
code span.st { color: #af5f00; }                    /* String */
code span.ch { color: #af5f00; }                    /* String */
code span.vs { color: #af5f00; }                    /* String */
code span.ss { color: #af5f00; }                    /* String */
code span.co { color: #005fd7; }                    /* Comment */
code span.cv { color: #005fd7; }                    /* Comment */
code span.do { color: #005fd7; }                    /* Comment */
code span.in { color: #005fd7; }                    /* Comment */
code span.pp { color: #005f5f; }                    /* PreProc */
code span.an { color: #005f5f; }                    /* PreProc */
code span.im { color: #005f5f; }                    /* PreProc */
code span.at { color: #005f5f; }                    /* PreProc */
code span.sc { color: #008787; }                    /* Special */
code span.bu { color: #008787; }                    /* Special */
code span.er { color: #ffffff; background-color: #d70000; } /* Error */
code span.wa { color: #d70000; font-weight: bold; } /* WarningMsg */
code span.al { color: #ffffff; background-color: #d70000; } /* Error */

/* dark theme (lunaperche) */
html.dark code span    { color: #c6c6c6; }          /* Normal */
html.dark code span.kw { color: #e4e4e4; font-weight: bold; } /* Statement */
html.dark code span.cf { color: #e4e4e4; font-weight: bold; } /* Statement */
html.dark code span.ot { color: #e4e4e4; font-weight: bold; } /* Statement */
html.dark code span.dt { color: #5fd75f; }          /* Type */
html.dark code span.cn { color: #ff87ff; }          /* Constant */
html.dark code span.dv { color: #ff87ff; }          /* Constant */
html.dark code span.bn { color: #ff87ff; }          /* Constant */
html.dark code span.fl { color: #ff87ff; }          /* Constant */
html.dark code span.st { color: #ffd787; }          /* String */
html.dark code span.ch { color: #ffd787; }          /* String */
html.dark code span.vs { color: #ffd787; }          /* String */
html.dark code span.ss { color: #ffd787; }          /* String */
html.dark code span.co { color: #5fafff; }          /* Comment */
html.dark code span.cv { color: #5fafff; }          /* Comment */
html.dark code span.do { color: #5fafff; }          /* Comment */
html.dark code span.in { color: #5fafff; }          /* Comment */
html.dark code span.pp { color: #5fd7d7; }          /* PreProc */
html.dark code span.an { color: #5fd7d7; }          /* PreProc */
html.dark code span.im { color: #5fd7d7; }          /* PreProc */
html.dark code span.at { color: #5fd7d7; }          /* PreProc */
html.dark code span.sc { color: #5fafaf; }          /* Special */
html.dark code span.bu { color: #5fafaf; }          /* Special */
html.dark code span.er { color: #ff5f5f; background-color: #ffffff; } /* Error */
html.dark code span.wa { color: #ff5f5f; }          /* WarningMsg */
html.dark code span.al { color: #ff5f5f; }          /* Alert */