/* The figures are inline SVG drawn with these classes. The tokens follow
   mdBook's theme class on <html>: light and rust, or coal, navy and ayu.
   The neutrals and fonts are the family's (site-theme's tokens.css: page,
   panel, rule, ink and muted); the accent is flume's from the family list
   (site-theme's family.ts). millpond's blue marks what millpond does,
   sounding's magenta a sounding, and sluice's green a landing. */
:root {
  --fl-font-display: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif;
  --fl-font-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --fl-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --fl-panel: #f7f6f2;
  --fl-surface: #e9e7e0;
  --fl-fg: #0e1116;
  --fl-muted: #5d6370;
  --fl-line: #c9c7bf;
  --fl-accent: #2f6e7a;
  --fl-accent-soft: #dfe6e4;
  --fl-mp: #2160b0;
  --fl-mp-soft: #dde7f4;
  --fl-sd: #a3358f;
  --fl-sd-soft: #ecdde5;
  --fl-sl: #1f8a4c;
  --fl-sl-soft: #dbe8dc;
}
html.coal, html.navy, html.ayu {
  --fl-panel: #0e1116;
  --fl-surface: #161a21;
  --fl-fg: #f2f1ec;
  --fl-muted: #8c92a0;
  --fl-line: #2a2f38;
  --fl-accent: #7fb8c4;
  --fl-accent-soft: #1f2a30;
  --fl-mp: #6ea8fe;
  --fl-mp-soft: #172438;
  --fl-sd: #e486d2;
  --fl-sd-soft: #2e2332;
  --fl-sl: #45c27a;
  --fl-sl-soft: #162c25;
}

.fl-fig { margin: 1.75em 0; font-family: var(--fl-font-sans); }
.fl-fig .fl-scroll {
  overflow-x: auto;
  border: 1px solid var(--fl-line);
  border-radius: 8px;
  background: var(--fl-panel);
}
.fl-fig svg { display: block; width: 100%; height: auto; min-width: 640px; }
.fl-fig figcaption {
  color: var(--fl-muted);
  font-size: 0.875em;
  line-height: 1.5;
  margin-top: 0.6em;
}

.fl-fig text { fill: var(--fl-fg); font-family: var(--fl-font-sans); font-size: 13px; }
.fl-fig .fl-t { font-weight: 600; font-size: 14px; }
.fl-fig .fl-tb { font-family: var(--fl-font-display); font-weight: 700; font-size: 16px; letter-spacing: -0.015em; }
.fl-fig .fl-ts { fill: var(--fl-muted); font-size: 12.5px; }
.fl-fig .fl-tm { font-family: var(--fl-font-mono); font-size: 12px; }
.fl-fig .fl-tl { fill: var(--fl-accent); font-weight: 600; font-size: 12px; }
.fl-fig .fl-tl-mp { fill: var(--fl-mp); font-weight: 600; font-size: 12px; }
.fl-fig .fl-tl-sd { fill: var(--fl-sd); font-weight: 600; font-size: 12px; }
.fl-fig .fl-th { fill: var(--fl-muted); font-family: var(--fl-font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; }

.fl-fig .fl-bx { fill: var(--fl-surface); stroke: var(--fl-line); stroke-width: 1.2; }
.fl-fig .fl-bx-fl { fill: var(--fl-accent-soft); stroke: var(--fl-accent); stroke-width: 1.5; }
.fl-fig .fl-bx-hl { fill: var(--fl-surface); stroke: var(--fl-accent); stroke-width: 1.5; }
.fl-fig .fl-bx-mp { fill: var(--fl-mp-soft); stroke: var(--fl-mp); stroke-width: 1.5; }
.fl-fig .fl-bx-sd { fill: var(--fl-sd-soft); stroke: var(--fl-sd); stroke-width: 1.5; }
.fl-fig .fl-bx-sl { fill: var(--fl-sl-soft); stroke: var(--fl-sl); stroke-width: 1.5; }
.fl-fig .fl-bx-dash { fill: none; stroke: var(--fl-muted); stroke-width: 1.2; stroke-dasharray: 6 5; }
.fl-fig .fl-chip { fill: var(--fl-panel); stroke: var(--fl-line); stroke-width: 1; }
.fl-fig .fl-chip-fl { fill: var(--fl-panel); stroke: var(--fl-accent); stroke-width: 1.4; }
.fl-fig .fl-dot { fill: var(--fl-accent); }
.fl-fig .fl-dot-off { fill: none; stroke: var(--fl-muted); stroke-width: 1.2; }

.fl-fig .fl-ar { stroke: var(--fl-muted); stroke-width: 1.4; fill: none; }
.fl-fig .fl-ar-a { stroke: var(--fl-accent); stroke-width: 1.8; fill: none; }
.fl-fig .fl-ar-mp { stroke: var(--fl-mp); stroke-width: 1.8; fill: none; }
.fl-fig .fl-ar-sd { stroke: var(--fl-sd); stroke-width: 1.8; fill: none; }
.fl-fig .fl-ar-sl { stroke: var(--fl-sl); stroke-width: 1.8; fill: none; }
.fl-fig .fl-ar-d { stroke: var(--fl-muted); stroke-width: 1.3; fill: none; stroke-dasharray: 5 4; }
.fl-fig .fl-x { stroke: var(--fl-muted); stroke-width: 2.2; fill: none; stroke-linecap: round; }
.fl-fig .fl-hd { fill: var(--fl-muted); }
.fl-fig .fl-hd-a { fill: var(--fl-accent); }
.fl-fig .fl-hd-mp { fill: var(--fl-mp); }
.fl-fig .fl-hd-sd { fill: var(--fl-sd); }
.fl-fig .fl-hd-sl { fill: var(--fl-sl); }