/* Shared by every page: fonts, colors, base type, links, cursors and typing. */

/* IBM Plex Mono, self-hosted (SIL OFL 1.1, see fonts/OFL.txt). */
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(fonts/ibm-plex-mono-latin-600-normal.woff2) format("woff2");
}

:root {
  --bg: #0e0e0e;
  --fg: #d4d4d0;
  --muted: #6b6b66;
  --rule: #262624;
  --accent: #e5383b;
  --dim: #3d3d3a;
}
@media (prefers-color-scheme: light) {
  :root { --bg: #f2f1ed; --fg: #1c1c1a; --muted: #85847e; --rule: #dcdbd5; --dim: #bab9b2; }
}

* { box-sizing: border-box; margin: 0; }
html { background: var(--bg); color: var(--fg); }
body {
  font: 15px/1.6 "IBM Plex Mono", ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  background-image: radial-gradient(var(--rule) 1px, transparent 1px);
  background-size: 24px 24px;
}
a { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--rule); }
a:hover { border-color: var(--accent); }
.prompt { color: var(--muted); }

/* The blinking red cursor at the end of a page. */
.cursor {
  display: inline-block;
  width: 0.6em; height: 1.1em;
  vertical-align: text-bottom;
  background: var(--accent);
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* Each prompt appears at --d, its command (--n characters) types in from
   --t with a text-colored cursor riding along, and the cursor stays until
   --e, when the next prompt (or the final red cursor) takes over. .out
   elements appear at their --d, .fade ones fade in. The finished page is the
   default state, so without animations everything is simply there and the
   stray cursors stay hidden. */
.type {
  display: inline-block; vertical-align: bottom; overflow: hidden; white-space: nowrap;
  width: calc(var(--n) * 1ch);
  animation: type calc(var(--n) * 55ms) steps(var(--n)) var(--t) backwards;
}
@keyframes type { from { width: 0; } }
.prompt[style*="--t"]::after {
  content: ""; display: inline-block; visibility: hidden;
  width: 0.6em; height: 1.1em; vertical-align: text-bottom;
  background: currentColor;
  animation: caret calc(var(--e) - var(--d)) var(--d) forwards;
}
@keyframes caret { from { visibility: visible; } to { visibility: hidden; } }
.out { animation: show 0s var(--d) both; }
@keyframes show { from { visibility: hidden; } }
.fade { animation: fade 0.8s ease var(--d) both; }
@keyframes fade { from { opacity: 0; } }

/* A prompt shows its directory (--w characters) until its command's
   output appears (--o, or --e when they coincide), then drops it, like a
   transient prompt. Gone is the finished state. */
.cwd {
  display: inline-block; vertical-align: bottom; overflow: hidden; white-space: pre;
  width: 0;
  animation: cwd var(--o, var(--e)) backwards;
}
.cwd { color: var(--accent); }
@keyframes cwd { from, to { width: calc(var(--w) * 1ch); } }

@media (prefers-reduced-motion: reduce) {
  .cursor, .type, .out, .fade, .cwd, .prompt::after { animation: none; }
}