claude-scriptorium 0.1.5

/*
 * illumination: the theme layer for a folio.
 *
 * A parchment leaf with an illuminated border: rubricated initials, vine
 * ornaments in the outer margins, and fleuron dividers, all drawn in CSS and
 * inline SVG so the folio stays self-contained. A single light palette lives
 * in the token block, so the dark variant (M3) is a swap of those values.
 *
 * Syntax colors target the canonical TextMate scope roots (comment, string,
 * keyword, ...) that syntect emits as the first class on every span, so the
 * palette covers every language without enumerating their finer scopes.
 */

:root {
  /* Every colour is a light-dark() pair, resolved by `color-scheme`. System
   * preference is the default (`light dark`); the theme toggle forces one side
   * by setting color-scheme to `light` or `dark` on <html> (see [data-theme]
   * below), so the whole palette swaps without a duplicated token block. */
  color-scheme: light dark;

  --page: light-dark(#e7dcc0, #171310);
  --leaf: light-dark(#f7f1e1, #201a14);
  --leaf-sunk: light-dark(#f1e9d4, #29221a);
  --ink: light-dark(#2b2620, #ece2cf);
  --ink-soft: light-dark(#6f6656, #b6ab93);
  --ink-faint: light-dark(#9a9080, #857b66);
  --rule: light-dark(#d8ccae, #3b3327);
  --rule-soft: light-dark(#e6dcc3, #2e2820);

  /* The mineral pigments a scribe actually ground: vermilion and red lead,
   * lapis lazuli, malachite, Tyrian purple, ochre, and burnished gold. The
   * dark side lifts each hue so it holds its chroma against a dark vellum. */
  --rubric: light-dark(#b0281d, #e0715f); /* vermilion / red lead */
  --sienna: light-dark(#9a6410, #cf9a4c); /* yellow ochre / raw sienna */
  --gold: light-dark(#b8860b, #d9ad4e); /* solid gold, for small marks */

  /* Burnished gold leaf: the 135° sheen gilded ornaments take by clipping it to
   * their glyph. Metal reads as gold on either ground, so this is one value,
   * not a light-dark pair. */
  --gold-leaf: linear-gradient(
    135deg,
    #f6e08f 0%,
    #d9ad4e 28%,
    #b8860b 50%,
    #916a12 64%,
    #d9ad4e 82%,
    #f6e08f 100%
  );
  --verdigris: light-dark(#2f7a4d, #58b783); /* malachite green */
  --lapis: light-dark(#274690, #7f9fe6); /* lapis lazuli / ultramarine */
  --tyrian: light-dark(#6b2f74, #bd83c8); /* Tyrian purple / folium */

  /* Not a manuscript pigment, but the assistant's own hue. */
  --claude: light-dark(#d97757, #e08a6a);

  --user-edge: var(--lapis);
  --assistant-edge: var(--claude);
  --sidechain-edge: var(--tyrian);
  --error-edge: var(--rubric);

  /* One axis runs through every edge in the folio: WARM is what the model
   * produced, COOL is what reached it from outside. A reader scrolling learns
   * which side of the exchange they are passing before they read a single
   * label, and a new kind has its hue decided for it rather than chosen.
   *
   * Warm, the model's own: it speaks in `--claude`, reasons in that same hue
   * drawn back toward the ink (the same voice, unvoiced), and reaches for a tool
   * in the ochre a tool's name is already set in.
   *
   * Cool, what entered: the user's own lapis for what they said, that lapis
   * drawn back toward the ink for a command they typed, the teal for a skill's
   * instructions, and malachite for a hook. See the palette note in CLAUDE.md
   * before adding a kind: the side is not a matter of taste. */
  --tool-edge: var(--sienna);
  --thinking-edge: color-mix(in srgb, var(--claude) 55%, var(--ink-faint));

  /* The harness's notes are all on the cool side, because none of them is the
   * model: every one is context that reached it. They differ by how far from the
   * reader each came. A command is the user's own voice, so it takes their lapis
   * drawn back toward the ink, exactly as reasoning takes the assistant's. A
   * skill is theirs at one remove (they wrote it, the model or a command loads
   * it), so it takes the teal. A hook is machinery answering on their behalf, so
   * it takes the malachite, the furthest from a voice while still being cool.
   *
   * Two kinds sit off the axis on purpose. A plan boundary is rubricated, which
   * is what a scribe ground vermilion for: it marks a division in the text
   * rather than anything said in it, so it is warm without being the model's. A
   * rule and a passing note stay in faint ink, because colouring every kind
   * would leave nothing quiet. */
  --gloss-edge: var(--ink-faint);
  --hook-edge: var(--verdigris);
  --skill-edge: light-dark(#1f6f77, #6fc3cb);
  --command-edge: color-mix(in srgb, var(--user-edge) 60%, var(--ink-faint));
  /* A rule and a skill are the same thing at different volumes: both are
   * instruction files the user wrote and the harness pulled in, and rules
   * arrive a dozen at a time at the head of a session where a skill arrives
   * singly. So a rule is the skill's teal drawn back toward the ink, which is
   * the folio's third such pair after reasoning from the assistant and a
   * command from the user: quiet, but no longer merely grey. */
  --rule-edge: color-mix(in srgb, var(--skill-edge) 50%, var(--ink-faint));
  --plan-edge: var(--rubric);

  --measure: 44rem;
  --radius: 4px;

  /* Junicode, Fira Code, and UnifrakturCook are embedded as @font-face rules
   * (see render.rs); the stacks behind them are fallbacks for glyphs the
   * bundled faces lack, since transcripts carry arbitrary Unicode. */
  --serif: "Junicode", "Iowan Old Style", "Palatino Linotype", Palatino,
    "Book Antiqua", Georgia, serif;
  --mono: "Fira Code", ui-monospace, "SF Mono", "Cascadia Code",
    "JetBrains Mono", Menlo, Consolas, monospace;
  --display: "UnifrakturCook", var(--serif);

  /* The eight colours a terminal names, and their bright counterparts, ground
   * into the folio's own pigments so a build log reads in the same palette as
   * everything around it. Bright black is a terminal's usual "this matters
   * less", so it takes the faint ink rather than a lifted black. A colour a
   * tool states outright (256-colour or 24-bit) can't be a token and is carried
   * as its own value. */
  --ansi-black: light-dark(#4a4238, #6f6656);
  --ansi-red: var(--rubric);
  --ansi-green: var(--verdigris);
  --ansi-yellow: var(--sienna);
  --ansi-blue: var(--lapis);
  --ansi-magenta: var(--tyrian);
  --ansi-cyan: light-dark(#1f6f77, #6fc3cb);
  --ansi-white: var(--ink-soft);
  --ansi-bright-black: var(--ink-faint);
  --ansi-bright-red: light-dark(#c8412f, #f08d7b);
  --ansi-bright-green: light-dark(#3d9460, #74d19c);
  --ansi-bright-yellow: light-dark(#b47c1f, #e5b667);
  --ansi-bright-blue: light-dark(#3459ac, #9db6ee);
  --ansi-bright-magenta: light-dark(#84408e, #d09ad9);
  --ansi-bright-cyan: light-dark(#2a8890, #8ed6dd);
  --ansi-bright-white: var(--ink);

  /* Syntax tokens, all resolved against the parchment ground. */
  --syn-comment: light-dark(#948a74, #7f765f);
  --syn-string: var(--verdigris);
  --syn-keyword: var(--rubric);
  --syn-storage: var(--rubric);
  --syn-constant: var(--sienna);
  --syn-entity: var(--lapis);
  --syn-variable: var(--tyrian);
  --syn-support: var(--lapis);
  --syn-inserted: var(--verdigris);
  --syn-deleted: var(--rubric);
}

/* The theme toggle forces one side of every light-dark() pair by pinning
 * color-scheme; absent the attribute (or with data-theme="system") the :root
 * default of `light dark` follows the OS. */
:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  /* The one size the folio is set from: every other length is in `rem` or `em`,
   * so this is the single knob that scales the whole leaf. The reading measure
   * scales with it, which is the point: a measure in `rem` holds the same number
   * of characters to the line whatever the type is set at, so raising this makes
   * the folio more legible without making the lines longer to read. The two
   * lengths deliberately left in `px` are the scrollbar (a system affordance,
   * not type) and the pill radii. */
  font-size: 18px;
  /* Parchment ground with faint mottling, so the page isn't a flat fill. */
  background-color: var(--page);
  /* The parchment mottling inverts for dark: a warm highlight and a deepening
   * shadow rather than the light page's bright bloom. */
  background-image:
    radial-gradient(
      ellipse at 20% 15%,
      light-dark(rgba(255, 255, 255, 0.35), rgba(255, 244, 214, 0.06)),
      transparent 55%
    ),
    radial-gradient(
      ellipse at 85% 80%,
      light-dark(rgba(120, 96, 48, 0.12), rgba(0, 0, 0, 0.28)),
      transparent 60%
    );
}

/* The body is the leaf itself: a centered parchment page. */
body {
  position: relative;
  max-width: var(--measure);
  margin: 2.5rem auto 3rem;
  /* The side margins carry the illuminated borders and want the room; the head
   * and foot only want enough to sit the first and last panel off the edge, so
   * they take half what the sides do rather than matching them. */
  padding: 1.5rem 3.25rem 1.25rem;
  background: var(--leaf);
  color: var(--ink);
  font-family: var(--serif);
  line-height: 1.6;
  border: 1px solid var(--rule);
  box-shadow:
    0 0 0 1px var(--leaf) inset,
    0 0 0 4px var(--rule-soft) inset,
    0 6px 26px rgba(60, 46, 20, 0.18);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Illuminated borders down the outer margins: a per-session strip of vine
 * sections with drolleries seated among them (composed in render.rs, its data
 * URI set inline), tiled to fill the leaf however tall it grows. Each creature
 * is mirrored at random within the strip, so neither margin faces a consistent
 * way; the left copy is flipped whole so the two vines curl as a mirrored
 * frame around the text. */
.margin {
  position: absolute;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 90px;
  background-repeat: repeat-y;
  background-position: center top;
  opacity: 0.9;
  pointer-events: none;
}

.margin--left {
  right: 100%;
  margin-right: 0.5rem;
  transform: scaleX(-1);
}

.margin--right {
  left: 100%;
  margin-left: 0.5rem;
}

@media (max-width: 62rem) {
  .margin {
    display: none;
  }
}

@media (max-width: 34rem) {
  body {
    padding: 1.75rem 1.25rem;
  }
}

/* --- The scroll: what a folio is scrolled by ------------------------- */

/* The thumb is a scroll. Two turned rollers cap it at fixed size and the
 * wound sheet stretches between them, so the drag handle lengthens and
 * shortens with the document the way a real scroll does. It is drawn in
 * gradients rather than an SVG data URI (the way the drolleries are) for one
 * reason: a background-image can't reach the palette, so an SVG roller would
 * need a second copy for the dark scheme and a switch to pick between them,
 * where gradients resolve light-dark() like everything else.
 *
 * Only ::-webkit-scrollbar can draw this, and it is Blink/WebKit only and
 * non-standard. Firefox gets the tinted native bar below instead. The two
 * cannot be combined: setting scrollbar-color on an element makes Blink
 * discard that element's ::-webkit-scrollbar rules outright. */
:root {
  /* The rod the sheet winds onto, and the finial knob that caps each of its
   * ends. A knob is radial and so serves either axis; a rod is shaded across
   * its length, so it takes one per axis, each lit from the side the leaf's
   * own light comes from. */
  --roller-rod: linear-gradient(
    var(--sienna) 0 40%,
    color-mix(in srgb, var(--sienna) 74%, var(--ink)) 100%
  );
  --roller-rod-upright: linear-gradient(
    90deg,
    var(--sienna) 0 40%,
    color-mix(in srgb, var(--sienna) 74%, var(--ink)) 100%
  );
  --roller-knob: radial-gradient(
    circle closest-side at 50% 38%,
    var(--gold) 0 45%,
    var(--sienna) 46% 82%,
    color-mix(in srgb, var(--sienna) 70%, var(--ink)) 83% 99%,
    transparent 100%
  );

  /* The sheet: parchment curved into a cylinder. The ink edge is what makes
   * the thumb identifiable against the track (WCAG 1.4.11 wants 3:1 for that,
   * and parchment on parchment is 1.18:1), so it can't be softened to taste
   * without darkening the sheet to compensate. */
  --roller-sheet: linear-gradient(
    90deg,
    var(--ink-soft) 0 1px,
    color-mix(in srgb, var(--leaf) 72%, var(--ink)) 1px 2px,
    var(--leaf) 5px,
    color-mix(in srgb, var(--leaf) 88%, var(--ink)) 10px,
    color-mix(in srgb, var(--leaf) 66%, var(--ink)) 13px 14px,
    var(--ink-soft) 14px 15px,
    transparent 15px
  );
  --roller-sheet-lying: linear-gradient(
    180deg,
    var(--ink-soft) 0 1px,
    color-mix(in srgb, var(--leaf) 72%, var(--ink)) 1px 2px,
    var(--leaf) 5px,
    color-mix(in srgb, var(--leaf) 88%, var(--ink)) 10px,
    color-mix(in srgb, var(--leaf) 66%, var(--ink)) 13px 14px,
    var(--ink-soft) 14px 15px,
    transparent 15px
  );

  /* Scratched writing, which is what makes the sheet read as a scroll rather
   * than a bar. Faint by intent: the ink edge above is what identifies the
   * thumb, so this stays decorative.
   *
   * A line of writing runs parallel to the rollers, so it crosses the sheet at
   * a right angle to the scroll's length whichever way the scroll lies. Three
   * layers of differing length, each phased a line further on, leave the text
   * ragged over a 12px cycle instead of justified into a block.
   *
   * Laying the scroll down turns it to the left, which carries its left
   * margin to the bottom, so the lines there hang from the bottom edge and
   * run ragged upward. The shading does not turn with it: light comes from
   * above the leaf and stays there however the scroll is set down, so the
   * sheet and rods keep their highlight on the lit side rather than rotating
   * it round to the underside. */
  --roller-writing: repeating-linear-gradient(
    180deg,
    var(--ink-faint) 0 1px,
    transparent 1px 12px
  );
  --roller-writing-sideways: repeating-linear-gradient(
    90deg,
    var(--ink-faint) 0 1px,
    transparent 1px 12px
  );
}

/* Under forced colours the UA repaints the scrollbar and author colours are
 * ignored, but a styled ::-webkit-scrollbar isn't repainted, it is left
 * blank: an 18px channel with nothing drawn in it. Yielding the whole thing
 * back to the UA is the only way it stays visible, which is why the pun lives
 * inside this query rather than merely having its pigments overridden. */
@media not (forced-colors: active) {
  /* Never narrower than the platform default (15px in Blink): the thumb is a
   * drag target, and `scrollbar-width: thin` would cut it to 10px. */
  ::-webkit-scrollbar {
    width: 18px;
    height: 18px;
  }

  ::-webkit-scrollbar-track,
  ::-webkit-scrollbar-corner {
    background: var(--page);
  }

  ::-webkit-scrollbar-thumb {
    /* Painted back to front: the knobs over the rod, the rod over the sheet,
     * so the sheet reads as winding onto the rod.
     *
     * A rod covers only the 4px band it sits in (2.5px to 6.5px from the
     * end), so a sheet sized to the whole length runs straight past it and
     * out of the thumb. Every layer beneath the rollers therefore ends inside
     * that band instead: the sheet 5px in, and each line of writing 6px in,
     * which is why the three phased layers take three different lengths to
     * finish together. */
    background:
      var(--roller-knob) left top 1px / 7px 7px no-repeat,
      var(--roller-knob) right top 1px / 7px 7px no-repeat,
      var(--roller-rod) center top 2.5px / 100% 4px no-repeat,
      var(--roller-knob) left bottom 1px / 7px 7px no-repeat,
      var(--roller-knob) right bottom 1px / 7px 7px no-repeat,
      var(--roller-rod) center bottom 2.5px / 100% 4px no-repeat,
      var(--roller-writing) left 4px top 6px / 10px calc(100% - 12px) no-repeat,
      var(--roller-writing) left 4px top 10px / 6px calc(100% - 16px) no-repeat,
      var(--roller-writing) left 5px top 14px / 8px calc(100% - 20px) no-repeat,
      var(--roller-sheet) center center / 15px calc(100% - 10px) no-repeat;
  }

  /* Laid on its side for a code block that overflows sideways. */
  ::-webkit-scrollbar-thumb:horizontal {
    background:
      var(--roller-knob) left 1px top / 7px 7px no-repeat,
      var(--roller-knob) left 1px bottom / 7px 7px no-repeat,
      var(--roller-rod-upright) left 2.5px center / 4px 100% no-repeat,
      var(--roller-knob) right 1px top / 7px 7px no-repeat,
      var(--roller-knob) right 1px bottom / 7px 7px no-repeat,
      var(--roller-rod-upright) right 2.5px center / 4px 100% no-repeat,
      var(--roller-writing-sideways) left 6px bottom 4px / calc(100% - 12px) 10px
        no-repeat,
      var(--roller-writing-sideways) left 10px bottom 4px / calc(100% - 16px) 6px
        no-repeat,
      var(--roller-writing-sideways) left 14px bottom 5px / calc(100% - 20px) 8px
        no-repeat,
      var(--roller-sheet-lying) center center / calc(100% - 10px) 15px no-repeat;
  }
}

/* Firefox has no scrollbar pseudo-elements, so it takes the standard
 * properties: the same pigments, without the drawing. Blink answers true to
 * the selector() test and so never sees this, which keeps it from discarding
 * the rules above. */
@supports not selector(::-webkit-scrollbar) {
  :root {
    scrollbar-color: var(--sienna) var(--page);
  }
}

/* --- Search: a fixed widget that steps through matches --------------- */

/* The reading rail: a column of panels down the right, each its own card, all of
 * them answering to the key at its head. One declared width, since nothing
 * inside asks for one any more (an `<input>` otherwise reports its `size` as an
 * intrinsic width and silently becomes the widest thing here).
 *
 * It reaches the foot of the leaf because the minimap at its own foot stands for
 * the whole folio, and the taller it is the finer a distinction it can draw. The
 * cards above it are each their own natural height and the map takes what is
 * left, so a short viewport shrinks the map alone rather than the controls. */
.rail {
  position: fixed;
  top: 0.8rem;
  right: 0.8rem;
  bottom: 0.8rem;
  z-index: 10;
  /* The key's two columns of chips are the floor here, and their width is set
   * by the longest labels ("assistant", "command"). Nothing else asks for a
   * width: the search field takes a whole row of its own, and the dock's
   * controls are narrower still. */
  width: 10.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* Every card in the rail is cut the same way, so each rule below carries only
 * its own layout: what is put here is a card by being put here. The minimap is
 * the one deliberate exception, and undoes all of this in its own rules, being
 * the book rather than a card describing it. `flex: none` so a card keeps its
 * natural height however tall the rail is; the minimap alone asks for the
 * slack, and asks for it there too. */
.rail > * {
  flex: none;
  padding: 0.34rem 0.5rem;
  background: var(--leaf);
  border: 1px solid var(--rule);
  border-radius: 0.9rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
  font-family: var(--mono);
  font-size: 0.7rem;
}

.search {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

/* The count and the step arrows, on their own row under the field. The count
 * takes the slack so the arrows sit against the right edge, and it no longer
 * needs to reserve a width: nothing shares its line that a change in its text
 * could push around. */
.search__bar {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* The key: its own card, since it governs the panels above it rather than
 * belonging to any one of them. A column per side of the exchange, what reached
 * the model beside what it produced, so a reader who has learnt the edges in the
 * margin already knows which column a kind will be in. `max-content` columns, so
 * each is only as wide as its own longest label; the chips still stretch to
 * their column, so a column reads as one stack of equal marks. */
/* Five rows and two columns, filled column by column, so `PanelKind::EVERY`'s
 * first half runs down the cool side and its second down the warm one. Flowing
 * by column rather than nesting each side in its own element is what lets the
 * halves be five and five without the odd kind out stranded on a row of its own:
 * the grid balances, and every chip still carries its own `data-side` for the
 * dock and its own pigment for the eye. `max-content` columns, so each is only
 * as wide as its longest label. */
.key {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(5, auto);
  grid-template-columns: repeat(2, max-content);
  gap: 0.2rem 0.35rem;
  justify-content: center;
}

/* The padding is asymmetric because the type is: Fira Code's em box reaches
 * further above its capitals than below its descenders, so a chip padded evenly
 * sets its label visibly high in the pill. Measured rather than guessed, against
 * a label with a descender and one without, so both sit centred on the ink they
 * actually draw. */
.key__chip {
  padding: 0.14rem 0.4rem 0;
  border: 1px solid color-mix(in srgb, var(--kind-hue) 45%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--kind-hue);
  font: inherit;
  line-height: 1.4;
  cursor: pointer;
}

/* What each kind is pigmented in, declared once for both the things that stand
 * for a panel rather than being one: a chip in the key, and a band in the
 * minimap. Each takes the hue of the panels it answers for, so the key doubles
 * as the legend for every edge in the margin and a band reads as the panel it
 * marks. `note` is deliberately absent and keeps the neutral ink below: it is
 * the catch-all, and no pigment can stand for what it collects. */
.key__chip,
.minimap__band {
  --kind-hue: var(--ink-soft);
}

.key__chip[data-scope="user"],
.minimap__band[data-kind="user"] {
  --kind-hue: var(--user-edge);
}

.key__chip[data-scope="command"],
.minimap__band[data-kind="command"] {
  --kind-hue: var(--command-edge);
}

.key__chip[data-scope="skill"],
.minimap__band[data-kind="skill"] {
  --kind-hue: var(--skill-edge);
}

.key__chip[data-scope="rule"],
.minimap__band[data-kind="rule"] {
  --kind-hue: var(--rule-edge);
}

.key__chip[data-scope="hook"],
.minimap__band[data-kind="hook"] {
  --kind-hue: var(--hook-edge);
}

.key__chip[data-scope="assistant"],
.minimap__band[data-kind="assistant"] {
  --kind-hue: var(--assistant-edge);
}

.key__chip[data-scope="thinking"],
.minimap__band[data-kind="thinking"] {
  --kind-hue: var(--thinking-edge);
}

.key__chip[data-scope="tool"],
.minimap__band[data-kind="tool"] {
  --kind-hue: var(--tool-edge);
}

.key__chip[data-scope="plan"],
.minimap__band[data-kind="plan"] {
  --kind-hue: var(--plan-edge);
}

/* Whose turn it is, not what kind: a subagent's band takes the same purple its
 * panel's edge does, and so must be able to outweigh its kind's own hue. */
.minimap__band[data-sidechain] {
  --kind-hue: var(--sidechain-edge);
}

.key__chip[aria-pressed="true"] {
  background: color-mix(in srgb, var(--kind-hue) 20%, transparent);
  border-color: var(--kind-hue);
}

/* Off reads as struck out: dimmed and no longer searched. */
.key__chip[aria-pressed="false"] {
  opacity: 0.5;
  text-decoration: line-through;
}

/* The field takes what the box gives it rather than asking for a width of its
 * own. An `<input>` otherwise reports an intrinsic width (its `size`, or the
 * `9rem` this used to set), and being the widest thing in the box it *was* the
 * box's width: the chips only ever wanted 168px against the bar's 263px. With
 * the field flexible, `.search`'s own declared width is the single knob, and the
 * chips and the field both fall out of it. */
.search__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  outline: none;
}

.search__input::placeholder {
  color: var(--ink-faint);
}

/* Takes the slack on its row so the arrows sit against the right edge. It needs
 * no reserved width now it has a row to itself: nothing shares the line that a
 * change in its text could shove around. */
.search__count {
  flex: 1;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.search__nav {
  padding: 0 0.25rem;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.search__nav:disabled {
  opacity: 0.35;
  cursor: default;
}

mark.search__hit {
  color: inherit;
  background: color-mix(in srgb, var(--gold) 34%, transparent);
  border-radius: 2px;
}

mark.search__hit.is-current {
  background: color-mix(in srgb, var(--gold) 68%, transparent);
  outline: 1px solid var(--gold);
}

/* On narrow screens the widget would crowd the leaf; let it shrink. */
@media (max-width: 34rem) {
  .search__input {
    width: 6rem;
  }
}

/* --- Dock: fixed jump / fold controls -------------------------------- */

/* The last card in the rail rather than a thing off in the far corner: the dock
 * answers to the key exactly as the search does, and standing them in one column
 * is what says so without a word of explanation. */
.dock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}

/* Three columns of up/down arrows: a user (blue) and assistant (orange)
 * column seeking one speaker, flanking the middle column that steps all. */
.dock__nav {
  display: grid;
  grid-template-columns: repeat(3, 2.2rem);
  gap: 0.2rem;
}

.dock__fold,
.dock__leap {
  display: flex;
  justify-content: center;
  gap: 0.2rem;
}

/* The follow toggle lights gold while active, so a live "tailing" reads at a
 * glance and is told apart from the plain jump-to-end beside it. */
.dock__btn--tail[aria-pressed="true"] {
  --dock-hue: var(--gold);
  background: var(--leaf-sunk);
}

.dock__btn {
  --dock-hue: var(--ink-soft);
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--dock-hue);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
}

/* The flanking arrows take the hue of the side they seek: the reader's own lapis
 * for what reached the model, the model's own for what it produced. */
.dock__btn--entered {
  --dock-hue: var(--user-edge);
}

.dock__btn--model {
  --dock-hue: var(--assistant-edge);
}

/* The fold buttons stack two chevrons: outward to unfold, inward to fold. */
/* The chevron glyphs hug the direction they point, so outward and inward need
 * different box gaps to read as the same visual separation. */
.dock__btn--fold {
  display: flex;
  flex-direction: column;
}

.dock__btn--fold[data-fold="expand"] {
  gap: 0.08rem;
}

.dock__btn--fold[data-fold="collapse"] {
  gap: 0.32rem;
}

.dock__chevron {
  font-size: 0.8rem;
  line-height: 0.85;
}

/* Hover brightens each arrow's own hue rather than recolouring it, so a user
 * (blue) or assistant (orange) arrow never flashes the other speaker's colour. */
.dock__btn:hover,
.dock__btn:focus-visible {
  background: var(--leaf-sunk);
  color: color-mix(in srgb, var(--dock-hue), white 30%);
}

/* --- Minimap: the folio seen edge-on --------------------------------- */

/* The last card in the rail, and the only one that asks for the slack: it stands
 * for the whole folio, so the taller it is the finer a distinction it can draw.
 * A floor under it, since a map of a hundred panels in three lines is no map.
 *
 * It is deliberately not cut like the cards above it. Those are leaves of the
 * folio's own chrome; this is the book itself, shut and seen from the fore-edge.
 * The proportion is the whole of it: a session is a *great* many leaves and the
 * binding around them is a few thousandths of that, so the leather is two or
 * three pixels and everything else is paper. A thick spine with cords tooled
 * across it was tried and read as a picture frame, which is what any binding
 * drawn wide enough to see detail in will do at this scale. */
.minimap {
  --leather: color-mix(in srgb, var(--sienna) 38%, #1b1007);
  --leather-lit: color-mix(in srgb, var(--sienna) 66%, #2b1a0b);
  --leather-dark: #150c05;
  /* One recession, shared by both faces that recede. The reader stands above
   * the front board and off to the spine side, so what is farther away is drawn
   * up and to the left: `--away-x` left, `--away-y` up. The board's depth on
   * screen and the spine's width on screen are the same vector seen twice, which
   * is what makes the two faces agree instead of each being eyeballed. */
  --away-x: 15px;
  --away-y: 0.55rem;
  /* The back board shows only its thickness at this angle. */
  --backboard: 3px;
  position: relative;
  flex: 1 1 auto;
  min-height: 5rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  /* The back board's edge: it starts where the leaves do, since the spine's own
   * face carries the rest of it. */
  background: linear-gradient(
      to bottom,
      color-mix(in srgb, var(--leather-lit) 70%, var(--leather)) 0 1px,
      var(--leather) 1px 2px,
      var(--leather-dark) 2px
    )
    var(--away-x) 100% / calc(100% - var(--away-x)) var(--backboard) no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.32));
}

/* The front board, seen from above its own plane: a parallelogram rather than a
 * trapezoid, since a plane leaning away from a viewer who is off to one side
 * shears rather than tapers. Its near edge is the top of the leaves; its far
 * edge is that same edge carried up and left by the recession. */
.minimap::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--away-y);
  clip-path: polygon(
    0 0,
    calc(100% - var(--away-x)) 0,
    100% 100%,
    var(--away-x) 100%
  );
  /* It faces the light, so it is the brightest leather in the composition, and
   * it falls off toward the reader as the surface turns away. The last two
   * pixels are not surface at all but the board's own thickness, seen edge-on,
   * which is what says the leaves below it are underneath rather than beside;
   * it is the leather's own shadow rather than black, or the board reads as
   * having a rule drawn along it. */
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--leather-lit) 74%, #fff) 0,
    var(--leather-lit) 40%,
    var(--leather) calc(100% - 2px),
    color-mix(in srgb, var(--leather-dark) 55%, var(--leather)) calc(100% - 2px)
  );
}

/* The spine, and the reason for the angle: from straight on it is a line, and a
 * line says nothing. Seen from the side it opens into a face of its own, sheared
 * by the same recession as the board so the two share a corner rather than
 * meeting at a seam. It turns away from the light along its width, being the
 * one curved surface a bound book has. */
.minimap::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--away-x);
  clip-path: polygon(
    0 0,
    100% var(--away-y),
    100% 100%,
    0 calc(100% - var(--away-y))
  );
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--leather-dark) 55%, var(--leather)) 0,
    var(--leather) 20%,
    var(--leather-lit) 55%,
    var(--leather) 88%,
    color-mix(in srgb, var(--leather-dark) 35%, var(--leather)) 100%
  );
}

/* The bands are positioned against this, in fractions of the document's own
 * height, so the track is the leaf and the map is to scale.
 *
 * It is drawn as the book itself, seen from the fore-edge: a block of leaves
 * whose edges are painted, the way a gilt binding shows its colour before it is
 * opened. The stack runs down the track (the document's own axis) and the width
 * is the depth of the block, so the shading across it rounds the edge and the
 * striations along it are the leaves. Everything below is a gradient rather than
 * an image, so the whole thing costs no bytes and resolves `light-dark()` like
 * the rest of the palette. */
.minimap__track {
  /* The head of the block: the one face square to the reader, and the only one
   * that may be, since the pointer maths behind the scrub measures against this
   * box. It fills what the binding leaves: the spine's face to its left, the
   * board's above, the back board's edge below. Cut flat, because a book's edge
   * is. */
  position: absolute;
  top: var(--away-y);
  right: 0;
  bottom: var(--backboard);
  left: var(--away-x);
  overflow: hidden;
  border-radius: 0;
  background: var(--leaf-sunk);
  cursor: pointer;
  /* The wheel zooms the map and a drag scrubs the folio, so the browser's own
   * touch panning and pinch-zooming would fight both. */
  touch-action: none;
}

/* The leaves themselves, ruled across the painted edges: a hairline every other
 * pixel, faint enough to read as a texture rather than as content. Over the
 * bands rather than under them, since it is the same paper they are painted on. */
.minimap__track::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    color-mix(in srgb, var(--ink) 13%, transparent) 0 0.5px,
    transparent 0.5px 2px
  );
}

/* Where the block meets the binding: the leaves fall into shadow along the
 * gutter they are sewn into, and under each board where it closes over them.
 * The cut fore-edge, at the right, takes a gilt hairline. No highlight anywhere:
 * a pale wash down the middle was meant to round the block and read instead as a
 * lamp shining out of the rail, which is exactly what painted paper does not do.
 */
.minimap__track::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(
      to right,
      color-mix(in srgb, var(--leather-dark) 34%, transparent) 0,
      transparent 14%
    ),
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--leather-dark) 26%, transparent) 0 1px,
      color-mix(in srgb, var(--leather-dark) 11%, transparent) 1px 0.25rem,
      transparent 0.4rem,
      transparent calc(100% - 0.3rem),
      color-mix(in srgb, var(--leather-dark) 20%, transparent) 100%
    );
  box-shadow: inset -1px 0 0 color-mix(in srgb, var(--gold) 45%, transparent);
}

/* Zoomed, the map is no longer the whole folio but a stretch of it, and a map
 * that has stopped standing for the whole must say so: a gilt edge, the same
 * pigment the reader's own view is drawn in. */
.minimap[data-zoomed] .minimap__track {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 60%, transparent);
}

.minimap__band {
  position: absolute;
  left: 0;
  right: 0;
  background: color-mix(in srgb, var(--kind-hue) 55%, transparent);
}

/* Out of play by the key: still drawn, since the map would misstate where
 * everything else sits if it were not, but no longer somewhere to land. Faded
 * rather than repainted in a neutral, which is what the key's own chips do when
 * they are struck out, and which leaves a stretch still legible as the kind it
 * is. A neutral wash over this parchment reads as a pigment of its own. */
.minimap__band[data-in-play="false"] {
  opacity: 0.2;
}

.minimap__band:hover {
  background: var(--kind-hue);
}

/* What of the leaf the reader has in front of them, drawn over the bands rather
 * than among them, and never a pointer target: the pointer is scrubbing the
 * folio, and the view is the one thing on the map that is not a place to go. */
/* Ruled in ink and haloed in the leaf's own colour, with a gilt wash between:
 * the bands it is drawn over are every pigment the folio has, so the mark that
 * says "here" cannot be one of them. Gold alone was lost the moment it crossed a
 * stretch of tool calls, which are ochre themselves. Ink against page is the one
 * pair that reads over anything, in either scheme, and a folio of any length
 * puts the whole viewport into a few pixels of map. */
.minimap__view {
  position: absolute;
  left: 0;
  right: 0;
  /* Over the leaves and their gilding both: where the reader is is the one
   * thing on the block that is not part of the book. */
  z-index: 3;
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: color-mix(in srgb, var(--gold) 25%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--page) 85%, transparent);
  pointer-events: none;
}

/* A short viewport has no room to spare: the controls above are what a folio
 * cannot be read without, so the map is what goes. */
@media (max-height: 34rem) {
  .minimap {
    display: none;
  }
}

/* --- Plaque: title, facts, and colophon on demand -------------------- */
/* A disclosure in the top corner, opposite the search widget: the reading
 * column stays pure transcript, and the folio's metadata is a click away. */

.plaque {
  position: fixed;
  top: 0.8rem;
  left: 0.8rem;
  z-index: 10;
}

.plaque__seal {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  background: var(--leaf);
  border: 1px solid var(--rule);
  border-radius: 50%;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
  color: var(--gold);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.plaque:hover .plaque__seal,
.plaque:focus-within .plaque__seal {
  color: var(--rubric);
}

.plaque__panel {
  position: absolute;
  display: none;
  top: calc(100% + 0.4rem);
  left: 0;
  width: max-content;
  max-width: min(22rem, 80vw);
  padding: 0.9rem 1.1rem;
  background: var(--leaf);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 0 6px 26px rgba(60, 46, 20, 0.22);
}

/* The panel shows while the seal is hovered or focused. A click focuses the
 * seal (keeping :focus-within true), so it stays open until focus moves away;
 * on touch, a tap focuses it the same way. */
.plaque:hover .plaque__panel,
.plaque:focus-within .plaque__panel {
  display: block;
}

/* A transparent bridge across the seal-to-panel gap so the pointer can travel
 * into the panel without the hover lapsing. */
.plaque__panel::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: 0.5rem;
}

.plaque__title {
  margin: 0 0 0.7rem;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.1;
  color: var(--rubric);
  word-break: break-word;
}

.plaque__facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.15rem 1rem;
  margin: 0;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.plaque__facts dt {
  font-variant: small-caps;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

.plaque__facts dd {
  margin: 0;
  word-break: break-word;
}

.plaque__colophon {
  margin: 0.7rem 0 0;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--ink-faint);
}

/* --- Caveat: the folio's own note to its reader ---------------------- */
/* The only text in the reading column that isn't the session's, so it is drawn
 * as unlike a panel as the leaf allows: flanked by rules rather than boxed, no
 * pigmented left edge, no number, no versal, and set below the reading size in
 * the soft ink. The difference has to be legible before a word of it is read. */

.caveat {
  margin: 0 0 2.2rem;
  padding: 0.9rem 0;
  border-block: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: 0.86rem;
  line-height: 1.65;
}

.caveat__lead {
  font-variant: small-caps;
  letter-spacing: 0.04em;
  color: var(--rubric);
}

/* --- Turns ----------------------------------------------------------- */

.turn {
  position: relative;
  margin: 1.6rem 0;
  padding: 0.2rem 0 0.2rem 1.1rem;
  border-left: 2px solid var(--rule);
  scroll-margin-top: 1rem;
}

/* A deep-linked turn (its number followed, or the page opened at #turn-N) takes
 * a faint gilt wash so the reader sees where they landed. The wash reaches as
 * far right of the turn number as the left padding sets the text in from the
 * border bar, so it sits symmetric; the negative margin lets the box grow
 * rightward (into the leaf's own margin) without reflowing its content.
 *
 * `data-landed` is the same thing for a landing the folio made itself, from the
 * dock, the minimap, or following the end. Those write the URL with
 * `replaceState`, which `:target` does not answer to, so the mark is what says
 * where the reader is; the two are drawn identically because they mean the same
 * thing. */
.turn:target,
.turn[data-landed] {
  background: color-mix(in srgb, var(--gold) 9%, transparent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding-right: 1.1rem;
  margin-right: -1.1rem;
}

/* Hold the copy button on the turn number as the wash widens the box. */
.turn:target .copy-button--meta,
.turn[data-landed] .copy-button--meta {
  right: 1.1rem;
}

.turn--user {
  border-left-color: var(--user-edge);
}

.turn--assistant {
  border-left-color: var(--assistant-edge);
}

/* A panel carrying only a tool call or only reasoning is still the assistant's
 * turn, but it isn't the assistant speaking, so it is marked apart from the
 * prose panels around it rather than sharing their edge. */
.turn[data-kind="tool"] {
  border-left-color: var(--tool-edge);
}

.turn[data-kind="thinking"] {
  border-left-color: var(--thinking-edge);
}

.turn[data-sidechain] {
  border-left-color: var(--sidechain-edge);
  border-left-style: dashed;
  margin-left: 1.5rem;
}

/* A gloss is a note the harness wrote into the session, not a speaker: it takes
 * a pigment no speaker holds, and a dotted edge, which reads as quieter than
 * the sidechain's dashed and is distinct from it. It also sits closer to its
 * neighbours than two speakers do, since it belongs to the exchange around it
 * rather than standing between two of them. */
/* A solid edge like any other panel's. It was dotted back when the glosses
 * shared a few pigments between them and the edge had to say "nobody's speech"
 * by itself; now every kind has its own hue, the dots were a second mark for
 * something already said, and a broken line reads as tentative rather than as
 * quiet. The sidechain's dashes stay, since that is a different axis: whose turn
 * it is, not what kind. A gloss still sits closer to its neighbours than two
 * speakers do, because it belongs to the exchange around it rather than standing
 * between two of them. */
.turn--gloss {
  margin: 0.8rem 0;
  border-left-color: var(--gloss-edge);
}

/* Each kind sets the token rather than the colour, so a subagent's gloss still
 * reads as a subagent: `.turn[data-sidechain]` sets `border-left-color`
 * outright and outweighs the declaration above whatever the token says. */
.turn--gloss[data-kind="hook"] {
  --gloss-edge: var(--hook-edge);
}

.turn--gloss[data-kind="skill"] {
  --gloss-edge: var(--skill-edge);
}

.turn--gloss[data-kind="rule"] {
  --gloss-edge: var(--rule-edge);
}

.turn--gloss[data-kind="command"] {
  --gloss-edge: var(--command-edge);
}

.turn--gloss[data-kind="plan"] {
  --gloss-edge: var(--plan-edge);
}

/* The label takes its panel's own pigment, so the two read as one mark; the
 * ambient kinds keep the faint ink they are set in. */
.turn--gloss .turn__role {
  color: var(--gloss-edge);
}

/* --- Controls: the presentation cluster, opposite the dock ----------- */
/* Bottom-left, mirroring the navigation dock at bottom-right. A bare anchor;
 * the theme toggle inside carries its own floating pill. */
.controls {
  position: fixed;
  left: 0.8rem;
  bottom: 0.8rem;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

/* --- The luminaries: what the folio is read by, and how it is chosen -- */
/* A candle and the sun, side by side in the corner, each a control: press the
 * light you want to read by. Which one is *burning* is the scheme's to say
 * rather than the press's, so by day the sun is up and the candle stands
 * smoking, and after dark the moon hangs and the candle is lit. Every pigment
 * below is a light-dark() pair whose off-scheme half is transparent, which is
 * what makes that one set of rules instead of two. */
.luminaries {
  display: flex;
  align-items: flex-end;
  gap: 0.1rem;
}

.luminary {
  position: relative;
  padding: 0.1rem;
  border: 0;
  border-radius: 0.5rem;
  background: none;
  cursor: pointer;
}

/* The one being read by is the one that is lit, which the scheme already says,
 * so pressing marks nothing further. What hover and focus do is offer: the
 * figure lifts toward its own light. */
.luminary:hover .luminary__figure,
.luminary:focus-visible .luminary__figure {
  filter: brightness(1.12);
}

.luminary:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 1px;
}

/* The light a luminary actually throws: one very faint circle reaching across
 * the leaf, so the corner reads as the page's light source rather than a picture
 * of one. It sits inside the figure that throws it rather than being anchored to
 * the viewport, so the glow comes from whichever of the two is burning, and it
 * is far larger than the viewport so its falloff is gradual wherever the
 * reader's window ends. Above the leaf, since light falls on a page rather than
 * glowing through it, which is only legible at this alpha: a few percent, over
 * text that must stay crisp. */
.luminary__radiance {
  position: absolute;
  left: 50%;
  top: 45%;
  width: 200vmax;
  height: 200vmax;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: warming 7.3s ease-in-out infinite;
}

/* Sunlight brightens what it falls on; a candle warms it. So the day's wash is a
 * pale warm white, which lifts the parchment, where the night's is the amber of
 * the flame itself: an amber this strong over a light page would darken it into
 * a stain rather than lighting it. Each is transparent in the scheme its own
 * light is out in, so only one is ever cast. */
.luminary__radiance--day {
  background: radial-gradient(
    closest-side circle,
    light-dark(rgba(255, 241, 201, 0.5), transparent) 0%,
    light-dark(rgba(255, 241, 201, 0.2), transparent) 26%,
    transparent 62%
  );
}

.luminary__radiance--night {
  background: radial-gradient(
    closest-side circle,
    light-dark(transparent, rgba(246, 198, 90, 0.11)) 0%,
    light-dark(transparent, rgba(246, 198, 90, 0.045)) 26%,
    transparent 62%
  );
}

/* The cast light swells with the flame that throws it, but far slower and far
 * less, so a page-wide wash never reads as flicker. */
@keyframes warming {
  0%,
  100% {
    opacity: 0.85;
  }
  50% {
    opacity: 1;
  }
}

.luminary__figure {
  display: block;
  width: 1.9rem;
  height: 2.7rem;
  overflow: visible;

  /* The candle stands in either scheme, so its wax is drawn in both; only the
   * flame it carries is the night's. The smoke is the day's, being what a
   * candle that has just been put out does. */
  --wax: light-dark(#c8b68d, #e4d8bb);
  --wax-shade: light-dark(#ab9971, #c0b18d);
  --wick: light-dark(#6d6151, #4a4034);
  --flame: light-dark(transparent, #f0b93f);
  --ember: light-dark(transparent, #fff1c8);
  --glow: light-dark(transparent, #f6c65a);
  --smoke: light-dark(#9c9384, transparent);
  --sun-disc: light-dark(#c98a1c, transparent);
  --sun-ray: light-dark(#d2a03a, transparent);
  --sun-glow: light-dark(#e8bb54, transparent);
  --moon: light-dark(transparent, #cfc6ac);
  --star: light-dark(transparent, #e8dfc4);
}

.luminary__wax {
  fill: var(--wax);
}

.luminary__drip {
  fill: var(--wax-shade);
}

.luminary__wick {
  stroke: var(--wick);
  stroke-width: 1.4;
  stroke-linecap: round;
}

.luminary__flame {
  fill: var(--flame);
}

.luminary__ember {
  fill: var(--ember);
}

/* The light each one throws: a blurred disc behind the flame, and a wider one
 * behind the sun. Blur rather than a gradient, so one circle does it. */
.luminary__halo,
.luminary__corona {
  filter: blur(5px);
}

.luminary__halo {
  fill: var(--glow);
  opacity: 0.55;
}

.luminary__corona {
  fill: var(--sun-glow);
  opacity: 0.5;
}

.luminary__disc {
  fill: var(--sun-disc);
}

.luminary__rays path {
  stroke: var(--sun-ray);
  stroke-width: 2.4;
  stroke-linecap: round;
}

.luminary__moon {
  fill: var(--moon);
}

.luminary__star {
  fill: var(--star);
}

/* What a candle does when it is not lit: one thread of smoke off the wick,
 * drifting. Drawn in every folio and coloured only by day, when the flame it
 * replaces is transparent. */
.luminary__smoke {
  fill: none;
  stroke: var(--smoke);
  stroke-width: 1.1;
  stroke-linecap: round;
  opacity: 0.55;
  transform-box: view-box;
  transform-origin: 20px 27px;
  animation: drifting 6.1s ease-in-out infinite;
}

@keyframes drifting {
  0%,
  100% {
    transform: translateX(0) scaleY(1);
    opacity: 0.5;
  }
  35% {
    transform: translateX(0.7px) scaleY(1.07);
    opacity: 0.62;
  }
  70% {
    transform: translateX(-0.5px) scaleY(0.95);
    opacity: 0.42;
  }
}

/* A flame is never still: it leans, gutters, and flares, so the timing is
 * deliberately uneven and the halo breathes on its own period, which keeps the
 * two from beating together into a pulse. Anchored at the wick, so the flame
 * sways from where it is fed rather than sliding about the box. */
.luminary__flame,
.luminary__ember {
  transform-box: view-box;
  transform-origin: 20px 28px;
  animation: guttering 2.7s infinite;
}

.luminary__ember {
  animation-duration: 3.1s;
}

.luminary__halo {
  transform-box: view-box;
  transform-origin: 20px 20px;
  animation: breathing 4.3s ease-in-out infinite;
}

@keyframes guttering {
  0%,
  100% {
    transform: scale(1, 1) skewX(0deg);
    opacity: 1;
  }
  9% {
    transform: scale(0.94, 1.06) skewX(-2deg);
    opacity: 0.88;
  }
  17% {
    transform: scale(1.03, 0.97) skewX(1.5deg);
    opacity: 1;
  }
  31% {
    transform: scale(0.97, 1.09) skewX(2.5deg);
    opacity: 0.93;
  }
  44% {
    transform: scale(1.02, 0.95) skewX(-1deg);
    opacity: 0.97;
  }
  58% {
    transform: scale(0.92, 1.04) skewX(-2.5deg);
    opacity: 0.85;
  }
  73% {
    transform: scale(1.04, 1.01) skewX(1deg);
    opacity: 1;
  }
  86% {
    transform: scale(0.98, 1.05) skewX(-1.5deg);
    opacity: 0.94;
  }
}

@keyframes breathing {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.16);
    opacity: 0.75;
  }
}

/* The sun's rays circle it, slowly enough to read as turning rather than
 * spinning, over a corona that swells behind them. */
/* Both turn about the disc's own centre. An origin left over from where the sun
 * used to sit sends the rays round an orbit instead of round themselves, which
 * reads as the whole sun wandering. Keep these in step with `cx`/`cy` in
 * `luminary/sun.svg`. */
.luminary__rays {
  transform-box: view-box;
  transform-origin: 20px 32px;
  animation: circling 32s linear infinite;
}

.luminary__corona {
  transform-box: view-box;
  transform-origin: 20px 32px;
  animation: breathing 6.5s ease-in-out infinite;
}

@keyframes circling {
  to {
    transform: rotate(360deg);
  }
}

/* A reader who asks for less motion gets a steady flame and still rays: the
 * light is decoration, and none of it carries meaning that the movement holds. */
@media (prefers-reduced-motion: reduce) {
  .luminary__flame,
  .luminary__ember,
  .luminary__halo,
  .luminary__corona,
  .luminary__rays,
  .luminary__smoke,
  .luminary__radiance {
    animation: none;
  }
}

/* Hand the choice back to the reader's system. It is shown only once a light has
 * been chosen, which the choice itself records on the document, so a folio being
 * read by whatever the system asks for carries no control saying so. Quiet
 * beside the two lights, since it undoes rather than chooses. */
.theme-reset {
  display: none;
  place-items: center;
  align-self: center;
  width: 1.2rem;
  height: 1.2rem;
  margin-left: 0.15rem;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--leaf);
  color: var(--ink-faint);
  cursor: pointer;
}

:root[data-theme] .theme-reset {
  display: grid;
}

.theme-reset:hover,
.theme-reset:focus-visible {
  color: var(--gold);
  border-color: color-mix(in srgb, var(--gold) 60%, var(--rule));
}

.theme-reset__mark {
  width: 0.72rem;
  height: 0.72rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.turn__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.9rem;
  margin-bottom: 0.3rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  color: var(--ink-faint);
}

/* The turn number is a permalink to its own panel: click it to put #turn-N in
 * the address bar and share the exact spot. Muted until hovered so it reads as
 * chrome, not prose. The two-class selector outranks the .folio a link rule. */
.turn__meta .turn__index {
  color: var(--ink-faint);
  text-decoration: none;
}

.turn__meta .turn__index:hover,
.turn__meta .turn__index:focus-visible {
  color: var(--gold);
  text-decoration: underline;
}

.turn__role {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-soft);
}

.turn--user .turn__role {
  color: var(--user-edge);
}

.turn--assistant .turn__role {
  color: var(--assistant-edge);
}

/* Every label takes its own panel's edge, so the two read as one mark and a
 * reader scrolling can tell the kinds apart without reading the word. */
.turn[data-kind="tool"] .turn__role {
  color: var(--tool-edge);
}

.turn[data-kind="thinking"] .turn__role {
  color: var(--thinking-edge);
}

/* The turn's input and output sit with its other facts, faint enough to read as
 * an aside until the panel is hovered. Its exact counts, and which scope they
 * cover, are the title. */
.turn__usage {
  opacity: 0.45;
  font-variant-numeric: tabular-nums;
  cursor: help;
  transition: opacity 0.12s ease;
}

.turn:hover .turn__usage {
  opacity: 1;
}

/* Push the timestamp and turn number to the panel's top-right corner. */
.turn__time {
  margin-left: auto;
}

/* --- Blocks ---------------------------------------------------------- */

.block {
  margin: 0.7rem 0;
}

.block--text > :first-child,
.block--thinking > :first-child {
  margin-top: 0;
}

.block--text > :last-child,
.block--thinking > :last-child {
  margin-bottom: 0;
}

/* Rubricated versal: the first letter of a speaker's opening paragraph, set as
 * a dropped blackletter initial in the speaker's own colour. It opens each turn
 * of the conversation the way a manuscript opens a division, doubling as a
 * visual anchor for where the exchange turns. The renderer tags the leading
 * text block of a speech panel with data-versal, so only that paragraph is
 * decorated (and tool and thinking panels never are). The drop is two lines
 * uniformly: enough to read as an initial, shallow enough to keep turns
 * vertically compact and to never dangle far past a one-line message. The
 * `> p:first-child` guard means an opener that leads with a heading or list
 * (no paragraph) simply goes without. */
.block--text[data-versal] > p:first-child::first-letter {
  -webkit-initial-letter: 2 2;
  initial-letter: 2 2;
  margin-right: 0.4rem;
  font-family: var(--display);
  font-weight: 400;
  /* Uppercase the displayed initial so a lowercased opener still gets a
   * full-height capital; the DOM text stays as written, so copy and search
   * still see the original letter. */
  text-transform: uppercase;
  /* Gild the initial by laying a slightly-expanded gold silhouette behind it:
   * a ring of gold text-shadows traces the glyph a pixel or two out on every
   * side (::first-letter ignores text-stroke, so the shadow ring stands in). The
   * ring is lit diagonally, pale gold at the upper-left fading to deep gold at
   * the lower-right, so the gilt reads as the 135° gold-leaf sheen following the
   * glyph's own shape. The letter keeps its speaker colour on top. The golds are
   * baked, not var(--gold): metal reads as gold on either parchment. */
  text-shadow:
    -2px -2px 0 #f6e08f, -1px -1px 0 #f6e08f,
    -2px -1px 0 #ecd074, -1px -2px 0 #ecd074,
    0 -2px 0 #dcb45a, -2px 0 0 #dcb45a,
    1px -1px 0 #cfa347, -1px 1px 0 #cfa347,
    2px 0 0 #b98d22, 0 2px 0 #b98d22,
    1px 1px 0 #916a12, 2px 2px 0 #916a12,
    0 0 3px #b8860b;
}

.turn--user .block--text[data-versal] > p:first-child::first-letter {
  color: var(--user-edge);
}

.turn--assistant .block--text[data-versal] > p:first-child::first-letter {
  color: var(--assistant-edge);
}

.block--thinking {
  padding: 0.6rem 1rem;
  border-left: 2px solid var(--rule-soft);
  background: var(--leaf-sunk);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--ink-soft);
  font-style: italic;
}

/* A slim note where extended reasoning was redacted from the transcript. */
.block--redacted {
  margin: 0.5rem 0;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-variant: small-caps;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}

.block--redacted::before {
  content: "※ ";
  color: var(--gold);
}

.block--image {
  margin: 1rem 0;
}

.block--image img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.block--unknown {
  font-family: var(--mono);
  font-size: 0.82rem;
}

.block--unknown > summary {
  color: var(--ink-faint);
  font-style: italic;
}

/* --- Marginalia: collapsible tool calls and their results ------------ */

.marginalia {
  margin: 0.55rem 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--leaf-sunk);
  font-size: 0.86rem;
}

.marginalia__head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--ink-soft);
  list-style: none;
}

.marginalia > summary::-webkit-details-marker {
  display: none;
}

/* The fleuron is the fold's whole affordance, and on a result's line it can be
 * most of what the line carries, so it is set larger than the text it sits
 * against rather than smaller: at the summary's own size it reads as a speck. */
.marginalia > summary::before {
  content: "❧";
  color: var(--gold);
  font-size: 1.2em;
}

.marginalia[open] > summary::before {
  content: "❧";
  transform: rotate(90deg);
}

/* Gild the fold-marker fleurons and section dividers in the 135° gold leaf by
 * clipping the gradient to the glyph. A lone ::before glyph has no competing
 * background, so the sheen shows cleanly; where the clip is unsupported the
 * solid var(--gold) above remains. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .marginalia > summary::before,
  .folio hr::before {
    background: var(--gold-leaf);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.marginalia[open] > summary {
  border-bottom: 1px solid var(--rule-soft);
}

/* A call the summary line states in full has nothing to open, so it carries the
 * fleuron in the rule's own colour: the line still aligns with the folds around
 * it, and reads as having no fold rather than a shut one. */
.marginalia--flat .marginalia__head {
  cursor: default;
}

.marginalia--flat .marginalia__head::before {
  content: "❧";
  color: var(--rule);
  font-size: 1.2em;
}

.marginalia__tool {
  font-weight: 600;
  color: var(--sienna);
}

/* A folded call's gist is a label, so it can ellipsise: opening the fold shows
 * the subject in full. */
.marginalia__gist {
  overflow: hidden;
  color: var(--ink-faint);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A flat call has no fold to open, so its gist is the only place the subject
 * appears: it wraps rather than being cut off at the column's edge. */
.marginalia--flat .marginalia__gist {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* A qualifier on the call keeps its full width; the gist ellipsises around it.
 * This is why a note must stay a short qualifier and never carry the subject:
 * on a flat line the gist wraps rather than ellipsising, so a note that refuses
 * to shrink squeezes the gist to its narrowest word, one character to the line. */
.marginalia__note {
  flex: none;
  color: var(--ink-faint);
  font-style: italic;
}

/* A result's line opens with the word it answers for, which is a heading rather
 * than a name: faint ink and small caps, so the call's own name and subject
 * follow it set exactly as they are on the call itself and several results in a
 * row say which is which. It never shrinks, being one short word. */
.marginalia__outcome {
  flex: none;
  color: var(--ink-faint);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* A shut harness note is a line under its panel's header, so it sheds its own
 * frame rather than drawing a second box inside the article the panel already
 * is. Opening it gives the frame back, because the body then needs a box: a
 * fold holding output unfurls past the reading measure, and there would be
 * nothing behind the text out there. */
.marginalia--gloss:not([open]) {
  margin: 0;
  border: none;
  background: none;
}

.marginalia--gloss:not([open]) .marginalia__head {
  padding-left: 0;
}

.marginalia[data-error] {
  border-color: var(--error-edge);
  background: color-mix(in srgb, var(--rubric) 7%, var(--leaf-sunk));
}

.marginalia[data-error] > summary,
.marginalia[data-error] .marginalia__outcome {
  color: var(--rubric);
}

/* A fold's body fills it edge to edge: a call's subject and a result's output
 * are the same kind of thing, so neither sits in a second box inside the first.
 * The fold is already a box, so the body sheds the chrome `.folio pre` gives a
 * standalone block and keeps only its padding. A code block nested deeper
 * (inside a result's own prose) stays a block and keeps its own frame. */
.folio details > pre {
  margin: 0;
  background: none;
  border: none;
  border-radius: 0;
}

/* On wide viewports, an open marginalia that holds a code, diff, or JSON block
 * unfurls past the reading measure, so wide content (diffs especially) fits
 * without sideways scrolling. Prose keeps the narrow column; only these panels
 * break out, lifting above the marginal vines on their own shadow. Scoped with
 * :has(pre) so a short text result stays in column. */
@media (min-width: 64rem) {
  .marginalia[open]:has(pre) {
    position: relative;
    z-index: 1;
    width: min(66rem, 92vw);
    margin-inline: calc((100% - min(66rem, 92vw)) / 2);
    box-shadow: 0 3px 20px rgba(40, 30, 12, 0.16);
  }
}

/* --- Tool bodies: the bespoke views for common tools ----------------- */

.tool--todos {
  margin: 0;
  padding: 0.3rem 0.8rem;
  list-style: none;
}

.tool__todo {
  display: flex;
  gap: 0.55rem;
  padding: 0.12rem 0;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--ink);
}

.tool__todo::before {
  content: "☐";
  color: var(--ink-faint);
}

.tool__todo[data-status="in_progress"]::before {
  content: "◐";
  color: var(--sienna);
}

.tool__todo[data-status="completed"]::before {
  content: "☑";
  color: var(--verdigris);
}

.tool__todo[data-status="completed"] {
  color: var(--ink-faint);
  text-decoration: line-through;
}

/* A body that is prose (a prompt, a plan, a message) keeps the reading face and
 * the fold's padding; a body that is a list of small structured things sets
 * those in the mono face, the way the summary line above it is set. */
.tool {
  margin: 0;
  padding: 0.5rem 0.85rem;
}

/* Prose in a fold is read, not scanned, so it is set at the reading size rather
 * than inheriting the marginalia's. A marginalia is pitched down because its
 * summary line is a label and its other bodies are data (a checklist, a set of
 * links, a task's facts), but a skill's whole instructions, a rule pulled into
 * context, or a plan are the same kind of text as the conversation around them
 * and want the same measure of it. */
.tool--prose {
  font-size: 1rem;
}

.tool--questions,
.tool--answers,
.tool--findings,
.tool--prompts,
.tool--references,
.tool--facts {
  font-family: var(--mono);
  font-size: 0.8rem;
}

.tool--questions,
.tool--answers,
.tool--findings,
.tool--prompts,
.tool--references {
  list-style: none;
}

/* A label sits inside a running line, so it is marked by weight and colour
 * rather than by a box that would break the line's rhythm. */
.tool__label {
  color: var(--sienna);
  font-weight: 600;
}

/* A qualifier on the thing the line names: a category, a verdict, a header. */
.tool__header {
  padding: 0 0.35rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--ink-faint);
  font-size: 0.9em;
}

.tool__question + .tool__question {
  margin-top: 0.8rem;
}

.tool__ask {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 0.35rem;
  color: var(--ink);
}

.tool__options {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tool__option {
  padding: 0.15rem 0 0.15rem 0.9rem;
  border-left: 2px solid var(--rule);
  color: var(--ink-faint);
}

.tool__option + .tool__option {
  margin-top: 0.3rem;
}

.tool__label + .tool__description::before {
  content: " — ";
}

/* What a reader chose, against what they were asked. The question is repeated
 * from the call above so the answer stands on its own, but it is the answer
 * that is being reported, so the question recedes to make room for it. */
.tool__answer + .tool__answer {
  margin-top: 0.6rem;
}

.tool__answer .tool__ask {
  display: block;
  margin: 0;
  color: var(--ink-faint);
}

.tool__chosen {
  margin: 0.1rem 0 0 0.9rem;
  border-left: 2px solid var(--sienna);
  padding-left: 0.5rem;
  color: var(--sienna);
  font-weight: 600;
}

/* An answer the reader typed took none of the options offered, so it is set as
 * the prose it is rather than as the label it isn't. */
.tool__chosen[data-typed] {
  border-left-color: var(--rule);
  color: var(--ink);
  font-style: italic;
  font-weight: 400;
}

.tool__finding + .tool__finding {
  margin-top: 0.7rem;
}

.tool__where {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
}

.tool__line {
  color: var(--ink-faint);
}

.tool__summary {
  margin: 0.2rem 0 0;
  color: var(--ink);
}

.tool__scenario {
  margin: 0.2rem 0 0;
  color: var(--ink-faint);
}

.tool__prompt {
  display: flex;
  gap: 0.5rem;
}

.tool__prompt + .tool__prompt {
  margin-top: 0.2rem;
}

.tool--prompts {
  padding-top: 0;
  border-top: 1px solid var(--rule-soft);
}

.tool__reference {
  color: var(--sienna);
}

/* A web search's own preamble, above the links it found. */
.tool__query {
  margin: 0 0 0.4rem;
  color: var(--ink-faint);
}

.tool__links {
  margin: 0;
  padding-left: 1.1rem;
}

.tool__links li {
  padding: 0.1rem 0;
}

/* The facts a background task answers with, before its output. */
.tool--facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.7rem;
}

.tool--facts dt {
  color: var(--ink-faint);
}

.tool--facts dd {
  margin: 0;
  color: var(--ink);
}

/* A prose body reads as the document it is, so it keeps the reading face rather
 * than the mono the structured bodies take, and its first and last paragraphs
 * shed the margins that would double the fold's own padding. */
.tool--prose > :first-child {
  margin-top: 0;
}

.tool--prose > :last-child {
  margin-bottom: 0;
}

/* --- Terminal colour: what a tool wrote its output in ----------------- */

.ansi--black { color: var(--ansi-black); }
.ansi--red { color: var(--ansi-red); }
.ansi--green { color: var(--ansi-green); }
.ansi--yellow { color: var(--ansi-yellow); }
.ansi--blue { color: var(--ansi-blue); }
.ansi--magenta { color: var(--ansi-magenta); }
.ansi--cyan { color: var(--ansi-cyan); }
.ansi--white { color: var(--ansi-white); }
.ansi--bright-black { color: var(--ansi-bright-black); }
.ansi--bright-red { color: var(--ansi-bright-red); }
.ansi--bright-green { color: var(--ansi-bright-green); }
.ansi--bright-yellow { color: var(--ansi-bright-yellow); }
.ansi--bright-blue { color: var(--ansi-bright-blue); }
.ansi--bright-magenta { color: var(--ansi-bright-magenta); }
.ansi--bright-cyan { color: var(--ansi-bright-cyan); }
.ansi--bright-white { color: var(--ansi-bright-white); }

.ansi--bg-black { background-color: var(--ansi-black); }
.ansi--bg-red { background-color: var(--ansi-red); }
.ansi--bg-green { background-color: var(--ansi-green); }
.ansi--bg-yellow { background-color: var(--ansi-yellow); }
.ansi--bg-blue { background-color: var(--ansi-blue); }
.ansi--bg-magenta { background-color: var(--ansi-magenta); }
.ansi--bg-cyan { background-color: var(--ansi-cyan); }
.ansi--bg-white { background-color: var(--ansi-white); }
.ansi--bg-bright-black { background-color: var(--ansi-bright-black); }
.ansi--bg-bright-red { background-color: var(--ansi-bright-red); }
.ansi--bg-bright-green { background-color: var(--ansi-bright-green); }
.ansi--bg-bright-yellow { background-color: var(--ansi-bright-yellow); }
.ansi--bg-bright-blue { background-color: var(--ansi-bright-blue); }
.ansi--bg-bright-magenta { background-color: var(--ansi-bright-magenta); }
.ansi--bg-bright-cyan { background-color: var(--ansi-bright-cyan); }
.ansi--bg-bright-white { background-color: var(--ansi-bright-white); }

/* A background needs a little room around the text it sits behind, or the
 * colour ends flush against the glyphs. */
.ansi[class*="ansi--bg-"] {
  padding: 0 0.15em;
  border-radius: 2px;
}

.ansi--bold {
  font-weight: 700;
}

.ansi--dim {
  opacity: 0.65;
}

.ansi--italic {
  font-style: italic;
}

.ansi--underline {
  text-decoration: underline;
}

/* --- Copy buttons: injected by the app script ------------------------ */

.folio pre {
  position: relative;
}

.copy-button {
  padding: 0.1rem 0.42rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--leaf);
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease;
}

/* A code / output block's copy button sits just inside its top-right corner,
 * over the block's top padding, always visible for discovery. */
.folio pre > .copy-button {
  position: absolute;
  top: 0.3rem;
  right: 0.5rem;
  z-index: 1;
  opacity: 0.6;
}

/* A fold's body butts against its summary, so its button rides the rule between
 * the two, the way a turn's button rides its leading block's edge. The block no
 * longer scrolls (its code does), so nothing clips the overhang. */
.folio details > pre > .copy-button {
  top: 0;
  transform: translateY(-50%);
}

.folio pre:hover > .copy-button,
.copy-button:focus-visible {
  opacity: 1;
}

/* A prose body's button sits where a code block's does. The body is the fold's
 * own box rather than a block inside it, so it establishes the containing block
 * itself and the button rides the rule under the summary the same way. */
.tool--prose {
  position: relative;
}

.tool--prose > .copy-button {
  position: absolute;
  top: 0;
  right: 0.5rem;
  z-index: 1;
  opacity: 0.6;
  transform: translateY(-50%);
}

.tool--prose:hover > .copy-button {
  opacity: 1;
}

/* The turn's copy button rides the panel's top edge, flush-right under the turn
 * number (which keeps the corner). It stays visible for discovery, muted until
 * the panel is hovered. The leading block's clearance below keeps it off text. */
.copy-button--meta {
  position: absolute;
  top: 2.3rem;
  right: 0;
  z-index: 2;
  opacity: 0.6;
  transform: translateY(-50%);
}

.turn:hover .copy-button--meta,
.copy-button--meta:focus-visible {
  opacity: 1;
}

/* Seat the always-on copy button centred on the leading block's top edge: the
 * shaded top border of a thinking block, or the (invisible) top of a prose
 * block, which land in the same place. The block drops by one button-height so
 * its edge sits under the button's centre, which makes the turn-number-to-button
 * gap equal the button-to-edge gap. A prose block also takes the same top
 * padding a thinking block has, so its first line lands where thinking text
 * would and never runs under the button. */
.turn:has(.copy-button--meta) > .turn__meta + * {
  margin-top: 1rem;
}

.turn:has(.copy-button--meta) > .turn__meta + .block--text {
  padding-top: 0.6rem;
}

.copy-button.is-done {
  color: var(--verdigris);
  border-color: var(--verdigris);
  opacity: 1;
}

/* --- Prose the markdown renderer emits ------------------------------- */

.folio :is(h1, h2, h3, h4, h5, h6) {
  margin: 1.3em 0 0.5em;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

/* Blackletter is a display face at one weight: reserve it for the larger
 * headings and let it stand at its native weight rather than faux-bolded. */
.folio :is(h1, h2, h3) {
  font-family: var(--display);
  font-weight: 400;
}

.folio h1 {
  font-size: 1.6rem;
}

.folio h2 {
  font-size: 1.2rem;
}

.folio h3 {
  font-size: 1.05rem;
}

.folio :is(h4, h5, h6) {
  font-size: 1rem;
}

.folio p {
  margin: 0.6em 0;
}

.folio a {
  color: var(--lapis);
  text-underline-offset: 0.15em;
  text-decoration-color: color-mix(in srgb, var(--lapis) 40%, transparent);
}

.folio a:hover {
  text-decoration-color: currentColor;
}

.folio blockquote {
  margin: 0.9em 0;
  padding: 0.1em 1rem;
  border-left: 3px solid var(--rule);
  color: var(--ink-soft);
}

.folio ul,
.folio ol {
  padding-left: 1.4rem;
}

.folio li {
  margin: 0.15em 0;
}

.folio li::marker {
  color: var(--gold);
}

.folio hr {
  margin: 1.5em 0;
  border: none;
  text-align: center;
}

.folio hr::before {
  content: "❧";
  color: var(--gold);
  font-size: 0.95rem;
}

.folio table {
  margin: 1em 0;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.folio :is(th, td) {
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--rule);
  text-align: left;
}

.folio th {
  background: var(--leaf-sunk);
  font-weight: 600;
}

/* Inline code, distinct from fenced blocks. */
/* Inline code runs inside a line of prose, so it has no scroller of its own the
 * way a block does: a single unbreakable token (a flag's comma-separated value
 * list, a deep path, a hash) would otherwise run straight out of whatever holds
 * it, which is worst in a fold, where the body is the box. `break-word` breaks
 * such a token only when it will not fit on a line by itself, so ordinary code
 * still breaks at its spaces and the element's min-content width is unchanged.
 * Code inside a `pre` is deliberately not matched: a block scrolls instead, and
 * breaking its lines would misrepresent the source. */
.folio :not(pre) > code {
  padding: 0.1em 0.35em;
  background: var(--leaf-sunk);
  border: 1px solid var(--rule-soft);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 0.85em;
  overflow-wrap: break-word;
}

.folio pre {
  padding: 0.7rem 0.9rem;
  background: var(--leaf-sunk);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  font-size: 0.82rem;
  line-height: 1.5;
}

/* The code, not the block around it, is what scrolls sideways: an absolutely
 * positioned child of a scroll container travels with the content, so a copy
 * button anchored to a scrolling block would drift off the corner and over the
 * text. Sinking the overflow one level leaves the block a still frame to pin
 * to. */
.folio pre > code {
  display: block;
  overflow-x: auto;
}

.folio pre code {
  font-family: var(--mono);
}

/* --- Syntax highlighting: the canonical scope roots ------------------ */

pre.syntax-highlighting {
  color: var(--ink);
}

.ink-comment {
  color: var(--syn-comment);
  font-style: italic;
}

.ink-string {
  color: var(--syn-string);
}

.ink-constant {
  color: var(--syn-constant);
}

.ink-keyword {
  color: var(--syn-keyword);
}

.ink-storage {
  color: var(--syn-storage);
}

.ink-entity {
  color: var(--syn-entity);
}

.ink-variable {
  color: var(--syn-variable);
}

.ink-support {
  color: var(--syn-support);
}

/* Operators and structural punctuation read as ink, not as color. */
.ink-keyword.ink-operator,
.ink-punctuation {
  color: var(--ink-soft);
}

/* Markup scopes (Markdown, diff) carry weight and hue rather than a palette. */
.ink-markup.ink-bold {
  font-weight: 700;
}

.ink-markup.ink-italic {
  font-style: italic;
}

.ink-markup.ink-heading {
  color: var(--rubric);
  font-weight: 700;
}

.ink-markup.ink-raw {
  color: var(--sienna);
}

.ink-markup.ink-inserted {
  color: var(--syn-inserted);
}

.ink-markup.ink-deleted {
  color: var(--syn-deleted);
}