:root {
  --bg: #0d1110;
  --fg: #c9d1c7;
  --bright: #eef3ec;
  --dim: #6f7a70;
  --green: #8bd17c;
  --blue: #7fb4e8;
  --amber: #e6c07b;
  --rule: #26302a;
  --code-bg: #141a17;
  --sel: #2b4a33;
  --mono: ui-monospace, "JetBrains Mono", "DejaVu Sans Mono", "Cascadia Mono",
          Menlo, Consolas, "Liberation Mono", monospace;
  color-scheme: dark;
}
/* Always dark, whatever the browser or OS prefers. */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.55 var(--mono);
}
::selection { background: var(--sel); }

.term {
  max-width: 120ch;
  margin: 0 auto;
  padding: 24px 16px 40vh;
}

a { color: inherit; text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
a:focus-visible { outline: 1px dashed var(--amber); outline-offset: 2px; }
a.d { color: var(--blue); font-weight: 700; }
.dim { color: var(--dim); }

/* prompt */
.cmdline { white-space: pre-wrap; overflow-wrap: anywhere; }
.ps1 .uh { color: var(--green); font-weight: 700; }
.ps1 .cwd { color: var(--blue); font-weight: 700; }
.ps1 .cwd a { color: inherit; }
kbd.cmd { font: inherit; color: var(--bright); }
.step { margin: 0 0 1.1em; }
.step[id] { scroll-margin-top: 16px; }
.out { margin: 0; }
pre.out { font: inherit; white-space: pre; overflow-x: auto; }

.cursor {
  display: inline-block; width: .6em; height: 1.15em;
  background: var(--fg); vertical-align: text-bottom;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }

/* login banner (inserted by term.js on first visit) */
.login { white-space: pre-wrap; margin: 0 0 1.1em; }
.motd { font: inherit; white-space: pre-wrap; margin: 0 0 1.1em; }
.motd .banner { color: var(--amber); font-weight: 700; }
.anim .motd:not(.on) { display: none; }

/* ls -Ca: names fill each column top to bottom, then the next, like ls -C */
.lsc { column-gap: 0; }
.lsc > span { display: block; white-space: pre; overflow: hidden; text-overflow: ellipsis; }

/* mdview index.md */
header.doc { max-width: 80ch; margin: 1.6em 0 1.4em; }
header.doc h1 {
  font: inherit; font-size: 1.7em; line-height: 1.25; font-weight: 700;
  color: var(--bright); margin: 0;
  padding-bottom: .3em; border-bottom: 1px solid var(--rule);
}
header.doc p { margin: .5em 0 0; }
.md { max-width: 80ch; overflow-wrap: break-word; }
.md > :first-child { margin-top: 0; }
.md p, .md ul, .md ol, .md pre, .md blockquote { margin: 0 0 1em; }
.md h1, .md h2, .md h3, .md h4, .md h5, .md h6 {
  font: inherit; font-weight: 700; line-height: 1.3; color: var(--bright);
  margin: 1.6em 0 .6em;
}
.md h1 { font-size: 1.6em; }
.md h2 { font-size: 1.4em; }
.md h3 { font-size: 1.2em; }
.md h4 { font-size: 1.05em; }
.md h5, .md h6 { font-size: 1em; color: var(--fg); }
.md strong { color: var(--bright); }
.md em { font-style: italic; color: var(--amber); }
.md a { color: var(--blue); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--blue) 40%, transparent); text-underline-offset: 3px; }
.md a:hover { text-decoration-color: currentColor; }
.md ul, .md ol { padding-left: 3ch; }
.md ul { list-style: none; }
.md ul > li { position: relative; }
.md ul > li::before { content: "-"; color: var(--dim); position: absolute; left: -2ch; }
.md li { margin: .25em 0; }
.md code { font: inherit; color: var(--bright); }
.md pre {
  background: var(--code-bg);
  border-left: 2px solid var(--rule);
  padding: .7em 1ch;
  overflow-x: auto;
  font: inherit;
  line-height: 1.45;
}
.md img {
  display: block; max-width: 100%; height: auto;
  margin: .4em 0; border: 1px solid var(--rule);
}
.md blockquote { border-left: 2px solid var(--rule); padding-left: 2ch; color: var(--dim); }
.md hr { border: 0; border-top: 1px dashed var(--rule); }

.comment { border-top: 1px dashed var(--rule); padding-top: .8em; margin-top: .8em; }
.comment header { margin-bottom: .4em; }
.comment header a { color: var(--green); }

/* animation states (only when term.js runs) */
.anim .step { display: none; }
.anim .step.on { display: block; }
.anim .step.on:not(.done) .out { display: none; }
.skip-hint {
  position: fixed; right: 16px; bottom: 12px; color: var(--dim); font-size: 13px;
}

@media (max-width: 600px) {
  body { font-size: 13.5px; }
  .term { padding-top: 16px; }
}