/* Informative drawings share one web-owned vocabulary with marketing.
   Geometry and family hue are data; themes, type and motion stay here. */
.hiw-fig {
  margin: var(--s-7) 0 var(--s-4);
  max-width: 640px;
  overflow-x: auto;
}
.essay-body .hiw-fig {
  margin: var(--s-8) auto;
}
.hiw-fig svg {
  display: block;
  width: 100%;
  min-width: 480px;
  height: auto;
}
.fig-label {
  font-family: var(--font-label);
  font-size: var(--fs-label);
  fill: var(--fg-1);
}
.fig-mono {
  font-family: var(--font-mono);
  font-size: 11px;
  fill: var(--fg-0);
}
.fig-mono-dim {
  font-family: var(--font-mono);
  font-size: 11px;
  fill: var(--fg-1);
}
.fig-name {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  fill: var(--fg-0);
}
.fig-frame {
  fill: none;
  stroke: var(--fg-3);
  stroke-width: 1;
}
.fig-edge {
  stroke: var(--rule-2);
  fill: none;
}
.fig-hair {
  stroke: var(--rule-2);
}
.fig-thread {
  fill: none;
  stroke: var(--fg-3);
  stroke-width: 1;
  opacity: 0.75;
}
/* Source drawings use inline family paint. The data-only receiver supplies
   just its numeric hue; both use the same theme-dependent paint formula. */
.fig-thread[style] {
  stroke: oklch(from var(--pat-mark-l) l 0.08 var(--pat-hue) / 0.7);
}
.fig-family {
  fill: var(--fg-2);
}
.fig-family[style] {
  fill: oklch(from var(--pat-mark-l) l 0.1 var(--pat-hue));
}
/* Dashed package bounds separate regions from symbols and the hot path. */
.fig-region {
  fill: none;
  stroke: var(--rule-2);
  stroke-dasharray: 3 5;
}
.fig-dot {
  fill: var(--dim);
}
.fig-dot-named {
  fill: var(--fg-0);
}
.fig-bar {
  fill: var(--dim);
}
.fig-tiphead {
  fill: none;
  stroke: var(--fg-3);
}
.fig-hot {
  fill: none;
  stroke: var(--fg-0);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}
/* On carries a bright knob; off stays in the chrome register. */
.fig-track {
  fill: none;
  stroke: var(--rule-2);
}
.fig-track-on {
  fill: none;
  stroke: var(--fg-3);
}
.fig-knob {
  fill: var(--dim);
}
.fig-knob-on {
  fill: var(--fg-0);
}
.fig-hyp {
  fill: var(--fg-1);
}
.fig-ok {
  fill: none;
  stroke: var(--ok);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Reduced-motion readers see the solid path without its drifting overlay. */
.fig-flow {
  display: none;
}
@media (prefers-reduced-motion: no-preference) {
  .fig-flow {
    display: block;
    fill: none;
    stroke: var(--g-800);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-dasharray: 2 14;
    animation: fig-flow-drift 4s linear infinite;
  }
  @keyframes fig-flow-drift {
    to {
      stroke-dashoffset: -64;
    }
  }
}