/* 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 sounding's magenta from the
   family list (site-theme's family.ts); millpond's blue marks what millpond
   does. */
:root {
  --sd-font-display: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif;
  --sd-font-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --sd-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sd-panel: #f7f6f2;
  --sd-surface: #e9e7e0;
  --sd-fg: #0e1116;
  --sd-muted: #5d6370;
  --sd-line: #c9c7bf;
  --sd-accent: #a3358f;
  --sd-accent-soft: #ecdde5;
  --sd-mp: #2160b0;
  --sd-mp-soft: #dde7f4;
}
html.coal, html.navy, html.ayu {
  --sd-panel: #0e1116;
  --sd-surface: #161a21;
  --sd-fg: #f2f1ec;
  --sd-muted: #8c92a0;
  --sd-line: #2a2f38;
  --sd-accent: #e486d2;
  --sd-accent-soft: #2e2332;
  --sd-mp: #6ea8fe;
  --sd-mp-soft: #172438;
}

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

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

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

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