:root {
  font: menu;
  font-family:
    "TX-02", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  /* The palette is agent-share's, which carries a matched dark half the 1994
     browser defaults never had. The switch goes through color-scheme rather
     than a prefers-color-scheme query so the UA's own rendering follows too:
     section's 100vh guarantees a page scrollbar and every transcript has its
     own, and a media query would flip the tokens below and leave both of those
     painted light on a dark page. */
  color-scheme: light dark;
  line-height: 150%;
  /* On the scroll container itself: scroll-snap-type set on body does not
     propagate to the viewport the way overflow does. Sections taller than the
     viewport stay freely scrollable even under mandatory — a snap area larger
     than the snapport lets the snapport rest anywhere inside it. */
  scroll-snap-type: y mandatory;

  --bg: light-dark(#ffffff, #272727);
  --fg: light-dark(#272727, #ffffff);
  --link: light-dark(#0f62c8, #5aaafa);
  --visited: light-dark(#7b3fc4, #c99cf5);
  --active: light-dark(#c62435, #ff7d87);
  --dim: light-dark(#595859, #a6a5a6);
  --code-bg: light-dark(#f6f6f6, #1e1d1e);
}

body {
  margin: 0;
  /* Inline only. The block padding would stack on top of each section's
     100dvh and push the first screen into a scrollbar; sections carry their
     own vertical space now. The 1rem inline value is load-bearing — pre
     bleeds outward by exactly this much. */
  padding-inline: 1rem;
  background: var(--bg);
  color: var(--fg);
  box-sizing: border-box;
}

a {
  color: var(--link);
}

a:visited {
  color: var(--visited);
}

a:active {
  color: var(--active);
}

h1 a {
  color: inherit;
  text-decoration: none;
}

main {
  /* Wider than the 66ch measure the sibling site uses: the transcripts are
     real 80-column terminal output and must not wrap. */
  max-width: 80ch;
  /* As a flex item main defaults to min-width:auto, which is the min-content
     width of the widest transcript — so on a phone it refuses to shrink and
     the whole page scrolls sideways. Zero lets it shrink and hands the
     overflow to the pre blocks, which scroll on their own. */
  min-width: 0;
  margin: 0 auto;
}

section {
  box-sizing: border-box;
  min-height: 100vh;
  padding-block: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

h1,
h2,
h3,
p,
ul,
li {
  font-size: 1em;
  font-weight: normal;
  margin: 0;
}

h1,
h2,
h3,
p,
ul {
  margin-block: 1em;
}

h1,
h2 {
  text-transform: uppercase;
  font-weight: bold;
}

/* Bold but not uppercased, so a subheading reads as one rank below h2
   rather than as another of them. */
h3 {
  font-weight: bold;
}

/* A command keeps its case inside a heading — /GOSSIP-CREATE is not a
   command anyone can type. */
h2 code {
  text-transform: none;
}

h2 {
  margin-bottom: 0;
}

/* A list zeroes its own top margin so it can sit flush under the paragraph
   that introduces it, so a heading directly above one has to pay for the gap
   itself. */
h2:has(+ ul) {
  margin-bottom: 1em;
}

ul {
  list-style: none;
  padding: 0;
  margin-top: 0;
}

li::before {
  content: " - ";
}

pre {
  /* The browser default shrinks pre below the OS UI size `font: menu` sets. */
  font: inherit;
  margin-block: 1em;
  /* The padding is paid for by an equal negative margin, so the content box
     stays exactly 80ch — these are real 80-column transcripts, and eating into
     that would set every line scrolling. rem, not em: this has to match body's
     1rem padding exactly or the bleed pushes past the viewport on a phone, and
     `font: menu` means 1em is whatever the OS UI size happens to be. */
  margin-inline: -1rem;
  padding: 1rem;
  background: var(--code-bg);
  overflow-x: auto;
  border-radius: 4px;
}

code {
  background: var(--code-bg);
  /* Horizontal only: vertical padding on an inline box does not grow the line
     box, so it would run under the lines above and below. */
  padding: 0 0.3em;
  /* A span that wraps mid-sentence would otherwise be padded on its first and
     last fragment only; clone repaints the box on every line. */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  border-radius: 4px;
}

.dim {
  color: var(--dim);
}

video {
  display: block;
  width: 100%;
  height: auto;
  margin-block: 1em;
  border-radius: 8px;
}