/* Design tokens and reset.
   One quiet dark ground, one accent, four muted topic hues. Nothing on this
   page glows: colour carries meaning (which topic a thing belongs to), never
   emphasis. Emphasis comes from weight, size and space instead. */
:root {
  color-scheme: dark;   /* the page ships its own dark palette — tell the browser */

  /* ---- surfaces ----
     One ground and five steps up from it, each step the same size it has
     always been. They move together: a ground that changes on its own leaves
     the panels either brighter than the page or invisible against it. */
  --bg: #0a0e15;
  --bg-2: #0d1119;
  --panel: #11161e;
  --panel-2: #151b25;
  --line: #1f252f;
  --line-soft: #191e27;

  /* ---- text ---- */
  --ink: #e6e8ec;
  --ink-dim: #c2c6ce;
  --muted: #8b91a0;

  /* ---- accent ----
     A single colour for links, focus rings and the current item. Kept close in
     lightness to the body text so it reads as a different *kind* of text
     rather than as a light source. */
  --accent: #7fa6d9;

  /* ---- topic hues ----
     Desaturated siblings of the accent. They differ enough to tell four
     sections apart at a glance and are all dimmer than --ink, so a coloured
     label never outshouts the sentence beside it. cats.js and graphview.js
     read these by name. */
  --cyber: #7fa6d9;
  --tux:   #cfa06a;
  --code:  #86b394;
  --comp:  #a294c6;

  --radius: 10px;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  /* Flat. The old page stacked a fog gradient and an animated perspective grid
     behind everything; both are gone, and the panels do the separating now. */
  background: var(--bg);
  color: var(--ink);
  /* Prose reads in the sans; the mono is kept for labels, paths, code and the
     terminal-flavoured bits, which is where it earns its keep. */
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { line-height: 1.22; margin: 0 0 .6em; font-weight: 600; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
a { color: inherit; }

.mono { font-family: var(--mono); }
.sans { font-family: var(--sans); }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: color-mix(in srgb, var(--accent) 34%, transparent); color: var(--ink); }

/* One focus ring for the whole site, so keyboard users get the same signal
   everywhere instead of a per-component invention. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* the shared icon sprite is a definitions block, never rendered itself */
.sprite { display: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition-duration: .01ms !important; }
}