/* Colours: dataviz reference palette, categorical slots 1-3 (validated light
   and dark with validate_palette.js). Key k0 = no key (counts, matches). */
:root {
  --surface: #fcfcfb; --ink: #0b0b0b; --ink-2: #52514e; --muted: #898781;
  --axis: #c3c2b7; --box: #f0efec;
  --k1: #2a78d6; --k2: #eb6834; --k3: #1baf7a; --k0: #52514e; --k0-ink: #ffffff;
}
/* mdBook's dark themes (coal, navy, ayu) set a class on <html>; the media
   query covers the widget outside mdBook. */
:root.coal, :root.navy, :root.ayu {
  --surface: #1a1a19; --ink: #f0efec; --ink-2: #c3c2b7; --muted: #898781;
  --axis: #383835; --box: #2c2c2a;
  --k1: #3987e5; --k2: #d95926; --k3: #199e70; --k0: #898781; --k0-ink: #0b0b0b;
}
@media (prefers-color-scheme: dark) {
  :root:not(.light):not(.rust) {
    --surface: #1a1a19; --ink: #f0efec; --ink-2: #c3c2b7; --muted: #898781;
    --axis: #383835; --box: #2c2c2a;
    --k1: #3987e5; --k2: #d95926; --k3: #199e70; --k0: #898781; --k0-ink: #0b0b0b;
  }
}
.trill-marbles { border-radius: 6px; padding: 8px 8px 4px; }
.trill-marbles { background: var(--surface); color: var(--ink); padding: 8px 0; max-width: 100%; overflow-x: auto; }
.marbles { font: 12px system-ui, sans-serif; max-width: 100%; height: auto; touch-action: none; }
.lane-name { fill: var(--ink-2); font-weight: 600; }
.axis { stroke: var(--axis); stroke-width: 2; }
.tick { stroke: var(--axis); }
.tick-label { fill: var(--muted); font-size: 11px; }
.ev .fill { stroke: var(--surface); stroke-width: 2; }
.k0 .fill { fill: var(--k0); } .k1 .fill { fill: var(--k1); }
.k2 .fill { fill: var(--k2); } .k3 .fill { fill: var(--k3); }
.ev .edge { fill: var(--ink); }
.ev .in-label { fill: #ffffff; font-weight: 600; pointer-events: none; }
.k0 .in-label { fill: var(--k0-ink); }
.ev .out-label, .legend { fill: var(--ink-2); font-weight: 600; }
.ev .inf { fill: var(--ink-2); }
.ev .grip { fill: transparent; cursor: ew-resize; }
.ev:has(.grip) { cursor: grab; }
.op-box { fill: var(--box); stroke: var(--axis); }
.code { fill: var(--ink); font: 12px ui-monospace, monospace; white-space: pre; }
.status { color: var(--muted); font: 12px system-ui, sans-serif; margin-top: 4px; }