/* data figures, bundled from figs/*.css by build.py */
/* ---- flow ---- */
/* Figure 1 · data flow and serial depth (fx-flow). Every selector is scoped to #fx-flow. */
#fx-flow .flw-bar{align-items:center}
#fx-flow .flw-bar + .flw-bar{margin-top:-6px}
#fx-flow .flw-ctl{display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:100%}
#fx-flow .flw-ctl .lab{white-space:nowrap}
#fx-flow .flw-rng{flex-wrap:wrap;gap:6px 18px}
#fx-flow .flw-rng[hidden]{display:none}
#fx-flow .flw-sl{display:inline-flex;align-items:center;gap:8px}
#fx-flow .flw-sl .lab sub{font-size:.78em;vertical-align:-.25em;line-height:0}
#fx-flow .flw-val{font:400 13px/1.4 var(--mono);color:var(--fg);min-width:2ch;text-align:right;font-variant-numeric:tabular-nums}

/* ℓ sliders: native range (keyboard, touch, a11y) over a drawn rail. --tw = thumb box = hit area. */
#fx-flow .flw-slider{--tw:26px;position:relative;width:118px;height:var(--tw);flex:0 0 auto}
#fx-flow .flw-rail{position:absolute;left:calc(var(--tw) / 2);right:calc(var(--tw) / 2);top:calc(var(--tw) / 2 - 1px);height:2px;border-radius:1px;background:var(--line)}
#fx-flow .flw-fill{position:absolute;top:0;left:0;height:2px;width:0;border-radius:1px;background:var(--accent)}
#fx-flow .flw-range{position:absolute;left:0;top:0;display:block;width:100%;height:var(--tw);margin:0;padding:0;background:transparent;
  -webkit-appearance:none;appearance:none;cursor:pointer;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
#fx-flow .flw-range:focus{outline:none}
#fx-flow .flw-range:focus-visible{outline:1px solid var(--accent);outline-offset:1px;border-radius:2px}
#fx-flow .flw-range::-webkit-slider-runnable-track{height:var(--tw);background:transparent;border:0}
#fx-flow .flw-range::-moz-range-track{height:var(--tw);background:transparent;border:0}
#fx-flow .flw-range::-moz-range-progress{background:transparent}
#fx-flow .flw-range::-moz-focus-outer{border:0}
#fx-flow .flw-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:var(--tw);height:var(--tw);margin:0;border:0;border-radius:50%;cursor:grab;
  background:radial-gradient(circle closest-side,var(--bg) 5px,var(--accent) 5.6px 6.6px,transparent 7.2px)}
#fx-flow .flw-range::-moz-range-thumb{width:var(--tw);height:var(--tw);border:0;border-radius:50%;cursor:grab;
  background:radial-gradient(circle closest-side,var(--bg) 5px,var(--accent) 5.6px 6.6px,transparent 7.2px)}
#fx-flow .flw-range:active::-webkit-slider-thumb{cursor:grabbing}

/* panels: the data-flow panel gets more width than the chart */
#fx-flow .flw-panels{grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:22px}
@media (max-width:600px){#fx-flow .flw-panels{grid-template-columns:1fr;gap:18px}}
#fx-flow .fx-ptitle{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* main svg */
#fx-flow #fx-flow-svg{cursor:pointer;outline:none;border-radius:2px}
#fx-flow #fx-flow-svg:focus-visible{outline:1px solid var(--accent);outline-offset:4px}
#fx-flow .fx-svg text.num{font-size:12px;fill:var(--muted);font-variant-numeric:tabular-nums}
#fx-flow .fx-svg text.num.on{fill:var(--accent);font-weight:500}
#fx-flow .fx-svg text.tok{fill:var(--muted)}
#fx-flow .fx-svg text.tok.on{fill:var(--fg)}
#fx-flow .fx-svg text.cap{font-size:9.5px;letter-spacing:.02em}
#fx-flow .fx-svg text.tk.on{fill:var(--fg)}
#fx-flow .fx-svg .col.fut{opacity:.5}
#fx-flow .fx-svg .rec{fill:none;stroke:color-mix(in srgb,var(--fg) 60%,transparent);stroke-width:1.25;stroke-linejoin:round;stroke-linecap:round}
#fx-flow .fx-svg .rec.fut{stroke:color-mix(in srgb,var(--fg) 25%,transparent)}
#fx-flow .fx-svg .ah{fill:color-mix(in srgb,var(--fg) 60%,transparent)}
#fx-flow .fx-svg .ah.fut{fill:color-mix(in srgb,var(--fg) 25%,transparent)}
#fx-flow .fx-svg .ah.on{fill:var(--accent)}
#fx-flow .fx-svg .chip rect{fill:var(--bg);stroke:color-mix(in srgb,var(--fg) 60%,transparent);stroke-width:1}
#fx-flow .fx-svg .chip text{fill:var(--fg);font-size:10.5px}
#fx-flow .fx-svg .chip.fut rect{stroke:color-mix(in srgb,var(--fg) 25%,transparent)}
#fx-flow .fx-svg .chip.fut text{fill:var(--muted)}
#fx-flow .fx-svg .chip.on rect{stroke:var(--accent)}
#fx-flow .fx-svg .chip.on text{fill:var(--accent)}
#fx-flow .fx-svg text.phi{font-size:10.5px;fill:var(--muted)}
#fx-flow .fx-svg text.phi.on{fill:var(--accent)}
#fx-flow .fx-svg .phit{stroke:color-mix(in srgb,var(--fg) 60%,transparent);stroke-width:1.5;shape-rendering:crispEdges}
#fx-flow .fx-svg .path{fill:none;stroke:var(--accent);stroke-width:1.75;stroke-linejoin:round;stroke-linecap:round}
#fx-flow .fx-svg .brk{stroke:var(--accent);stroke-width:2;shape-rendering:crispEdges}
#fx-flow .fx-svg .cellh{fill:none;stroke:var(--fg);stroke-width:1;pointer-events:none}

/* legend swatches */
#fx-flow .flw-leg{gap:4px 14px;font-size:11.5px}
#fx-flow .flw-leg span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
#fx-flow .flw-leg .box{margin-right:0}
#fx-flow .flw-leg .ln{display:inline-block;width:16px;height:0;border-top:1.75px solid var(--accent)}

/* chart */
#fx-flow .fx-svg .s-tr{fill:none;stroke:var(--fx-base2);stroke-width:1.25}
#fx-flow .fx-svg .s-ctx{fill:none;stroke:var(--fx-base2);stroke-width:1.25;stroke-dasharray:1.5 2.5}
#fx-flow .fx-svg .s-sel{fill:none;stroke:var(--accent);stroke-width:1.75;stroke-linejoin:round}
#fx-flow .fx-svg .s-loop{fill:none;stroke:var(--accent);stroke-width:1.75;stroke-dasharray:5 3}
#fx-flow .fx-svg .d-sel{fill:var(--accent);stroke:var(--bg);stroke-width:1.25}
#fx-flow .fx-svg .d-tr{fill:var(--fx-base2);stroke:var(--bg);stroke-width:1.25}
#fx-flow .fx-svg text.lb-sel{fill:var(--accent)}
#fx-flow .fx-svg text.lb-tr{fill:var(--muted)}
#fx-flow .fx-svg .tband{fill:var(--fx-band)}
#fx-flow .fx-svg .hit{fill:transparent}
#fx-flow .fx-tip .flw-tt{display:grid;grid-template-columns:auto auto;column-gap:12px;margin-top:2px}
#fx-flow .fx-tip .flw-tt span:nth-child(2n){text-align:right;font-variant-numeric:tabular-nums}
#fx-flow .fx-tip .flw-tn{color:var(--muted);margin-top:3px;white-space:normal;max-width:260px}

/* ---- jacobi ---- */
/* Figure 2 · Jacobi approximation of the recurrent cache (fx-jacobi). Every selector is scoped to #fx-jacobi. */
#fx-jacobi .jb-bar{align-items:flex-start;gap:6px 22px}
#fx-jacobi .lab sub,#fx-jacobi .fx-status sub,#fx-jacobi .jb-leg sub{font-size:.78em;line-height:0;vertical-align:-.3em}

/* γ sliders: native range (keyboard, touch, a11y) over a drawn rail; --tw is the thumb box and hit area */
#fx-jacobi .jb-sl{display:flex;align-items:flex-start;gap:10px;flex:1 1 250px;min-width:0;max-width:300px}
#fx-jacobi .jb-sl .lab,#fx-jacobi .jb-val{padding-top:5px;white-space:nowrap}
#fx-jacobi .jb-sl .lab{min-width:2.9em}
#fx-jacobi .jb-val{font:400 13px/1.4 var(--mono);color:var(--fg);min-width:3.2em;text-align:right;font-variant-numeric:tabular-nums}
#fx-jacobi .jb-slider{--tw:28px;position:relative;flex:1 1 auto;min-width:120px;height:40px}
#fx-jacobi .jb-rail{position:absolute;left:calc(var(--tw) / 2);right:calc(var(--tw) / 2);top:13px;height:2px;border-radius:1px;background:var(--line)}
#fx-jacobi .jb-fill{position:absolute;top:0;height:2px;left:50%;width:0;border-radius:1px;background:var(--accent)}
#fx-jacobi .jb-zero{position:absolute;left:50%;top:-3.5px;width:1px;height:9px;margin-left:-.5px;background:var(--muted)}
#fx-jacobi .jb-range{position:absolute;left:0;top:0;display:block;width:100%;height:var(--tw);margin:0;padding:0;background:transparent;
  -webkit-appearance:none;appearance:none;cursor:pointer;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
#fx-jacobi .jb-range:focus{outline:none}
#fx-jacobi .jb-range::-webkit-slider-runnable-track{height:var(--tw);background:transparent;border:0}
#fx-jacobi .jb-range::-moz-range-track{height:var(--tw);background:transparent;border:0}
#fx-jacobi .jb-range::-moz-range-progress{background:transparent}
#fx-jacobi .jb-range::-moz-focus-outer{border:0}
#fx-jacobi .jb-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:var(--tw);height:var(--tw);margin:0;border:0;border-radius:50%;cursor:grab;
  background:radial-gradient(circle closest-side,var(--bg) 5.3px,var(--accent) 5.9px 6.7px,transparent 7.3px)}
#fx-jacobi .jb-range::-moz-range-thumb{width:var(--tw);height:var(--tw);border:0;border-radius:50%;cursor:grab;
  background:radial-gradient(circle closest-side,var(--bg) 5.3px,var(--accent) 5.9px 6.7px,transparent 7.3px)}
#fx-jacobi .jb-range:hover::-webkit-slider-thumb,#fx-jacobi .jb-range:active::-webkit-slider-thumb{
  background:radial-gradient(circle closest-side,var(--bg) 4.8px,var(--accent) 5.4px 6.9px,transparent 7.5px)}
#fx-jacobi .jb-range:hover::-moz-range-thumb,#fx-jacobi .jb-range:active::-moz-range-thumb{
  background:radial-gradient(circle closest-side,var(--bg) 4.8px,var(--accent) 5.4px 6.9px,transparent 7.5px)}
#fx-jacobi .jb-range:active::-webkit-slider-thumb{cursor:grabbing}
#fx-jacobi .jb-range:active::-moz-range-thumb{cursor:grabbing}
#fx-jacobi .jb-range:focus-visible::-webkit-slider-thumb{
  background:radial-gradient(circle closest-side,var(--bg) 5.3px,var(--accent) 5.9px 6.7px,color-mix(in srgb,var(--accent) 24%,transparent) 7.3px 10.4px,transparent 11px)}
#fx-jacobi .jb-range:focus-visible::-moz-range-thumb{
  background:radial-gradient(circle closest-side,var(--bg) 5.3px,var(--accent) 5.9px 6.7px,color-mix(in srgb,var(--accent) 24%,transparent) 7.3px 10.4px,transparent 11px)}
#fx-jacobi .jb-ticks{position:absolute;left:0;right:0;top:24px;height:14px}
#fx-jacobi .jb-ticks span{position:absolute;top:0;transform:translateX(-50%);font:400 10.5px/1 var(--mono);color:var(--muted);white-space:nowrap}
#fx-jacobi .jb-ticks span:nth-child(1){left:calc(var(--tw) / 2)}
#fx-jacobi .jb-ticks span:nth-child(2){left:50%}
#fx-jacobi .jb-ticks span:nth-child(3){left:calc(100% - var(--tw) / 2)}

#fx-jacobi .jb-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;flex:1 1 100%}
#fx-jacobi .jb-ctl{display:inline-flex;align-items:center;gap:8px;min-width:0}

/* heatmap */
#fx-jacobi .jb-heat{position:relative;border-radius:2px;outline:none}
#fx-jacobi .jb-heat:focus-visible{outline:1px solid var(--accent);outline-offset:4px}
#fx-jacobi .jb-line{position:relative;min-width:0}
#fx-jacobi .fx-svg .hit{fill:transparent;cursor:crosshair}
#fx-jacobi .fx-svg .front{fill:none;stroke:var(--fg);stroke-opacity:.7;stroke-width:1;stroke-dasharray:2 2;pointer-events:none}
#fx-jacobi .fx-svg text.exl{font-size:10px;fill:var(--muted);pointer-events:none}
#fx-jacobi .fx-svg text.df{fill:var(--accent)}
#fx-jacobi .fx-svg .dfrow{fill:none;stroke:var(--accent);stroke-width:1.5;pointer-events:none}
#fx-jacobi .fx-svg .hrow{fill:none;stroke:var(--fg);stroke-opacity:.4;stroke-width:1;pointer-events:none}
#fx-jacobi .fx-svg .hcell{fill:none;stroke:var(--fg);stroke-width:1.5;pointer-events:none}

/* keys under the heatmap */
#fx-jacobi .jb-keys{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:6px 16px;margin-top:2px}
#fx-jacobi .jb-scale{flex:0 1 150px;min-width:120px}
#fx-jacobi .jb-ramp{position:relative;width:100%;height:24px}
#fx-jacobi .jb-ramp i{display:block;height:8px;width:100%;border-radius:1px;background:linear-gradient(in oklab 90deg,var(--loss),var(--bg));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg) 8%,transparent)}
#fx-jacobi .jb-rl{position:relative;height:14px;margin-top:3px}
#fx-jacobi .jb-rl span{position:absolute;top:0;font:300 10.5px/1 var(--mono);color:var(--muted);white-space:nowrap}
#fx-jacobi .jb-rl span:nth-child(1){left:0}
#fx-jacobi .jb-rl span:nth-child(2){left:33.33%;transform:translateX(-50%)}
#fx-jacobi .jb-rl span:nth-child(3){left:66.67%;transform:translateX(-50%)}
#fx-jacobi .jb-rl span:nth-child(4){right:0}
#fx-jacobi .jb-rl sup,#fx-jacobi .fx-tip sup,#fx-jacobi .fx-status sup{font-size:.78em;line-height:0;vertical-align:.45em}
#fx-jacobi .jb-leg{gap:2px 14px;font-size:11.5px}
#fx-jacobi .jb-leg span{display:inline-flex;align-items:center;white-space:nowrap}
#fx-jacobi .jb-sw{display:inline-block;flex:none;margin-right:6px;overflow:visible}
#fx-jacobi .jb-sw .fr{stroke:var(--fg);stroke-opacity:.7;stroke-width:1;stroke-dasharray:2 2}
#fx-jacobi .jb-box{display:inline-block;width:16px;height:6px;margin-right:6px;border:1.5px solid var(--accent);border-radius:1px}

/* line chart */
#fx-jacobi .fx-svg tspan.ex{font-size:8.5px}
#fx-jacobi .fx-svg tspan.sb{font-size:8.5px}
#fx-jacobi .fx-svg .l1{fill:none;stroke:var(--accent);stroke-width:1.75;stroke-linejoin:round;stroke-linecap:round}
#fx-jacobi .fx-svg .l0{fill:none;stroke:var(--fx-base2);stroke-width:1.25;stroke-linejoin:round;stroke-linecap:round}
#fx-jacobi .fx-svg text.lab1{fill:var(--accent)}
#fx-jacobi .fx-svg text.lab0{fill:var(--muted)}
#fx-jacobi .fx-svg .dfm{stroke:var(--accent);stroke-width:1;stroke-dasharray:3 3;shape-rendering:crispEdges}
#fx-jacobi .fx-svg text.dfl{fill:var(--accent)}
#fx-jacobi .fx-svg .d1{fill:var(--accent);stroke:var(--bg);stroke-width:1}
#fx-jacobi .fx-svg .d0{fill:var(--fx-base2);stroke:var(--bg);stroke-width:1}
#fx-jacobi .fx-tip .jb-tt{display:grid;grid-template-columns:auto auto;column-gap:12px;margin-top:2px}

@media (max-width:420px){
  #fx-jacobi .jb-sl{flex-basis:100%;max-width:none}
}

/* ---- grad ---- */
/* Figure 3 · gradient agreement with the (32, 32) anchor (fx-grad). Everything is scoped to #fx-grad. */
:root{ --fx-grad-ink-hi:var(--fg) }
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){ --fx-grad-ink-hi:var(--bg) }}
:root[data-theme="dark"]{ --fx-grad-ink-hi:var(--bg) }

#fx-grad .grad-ctl{display:inline-flex;align-items:center;gap:8px;min-width:0}
#fx-grad .fx-seg sub{font-size:.75em;line-height:0}
#fx-grad .grad-n{display:none}
#fx-grad .fx-status{margin:0}
#fx-grad .fx-status sub{font-size:.75em;line-height:0}
#fx-grad .fx-status .nw{white-space:nowrap}

#fx-grad .grad-body{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 28px;min-width:0}
#fx-grad .grad-plot{flex:0 0 auto;min-width:0;max-width:100%;line-height:0}
#fx-grad .grad-plot svg{cursor:default;-webkit-tap-highlight-color:transparent}
#fx-grad .grad-plot svg:focus{outline:none}
#fx-grad .grad-plot svg:focus-visible{outline:1px solid var(--accent);outline-offset:4px;border-radius:2px}

/* cells and marks */
#fx-grad .fx-svg .cell{stroke:var(--rule);stroke-width:1;shape-rendering:crispEdges}
#fx-grad .fx-svg text.v{fill:var(--fg);pointer-events:none}
#fx-grad .fx-svg text.v.hi{fill:var(--fx-grad-ink-hi)}
#fx-grad .fx-svg text.ttl{fill:var(--muted)}
#fx-grad .fx-svg text.tk.on{fill:var(--fg)}
#fx-grad .fx-svg .tr{fill:none;stroke:var(--accent);stroke-width:1.5;pointer-events:none}
#fx-grad .fx-svg .an{fill:var(--muted);stroke:none;pointer-events:none}
#fx-grad .fx-svg .brk{fill:none;stroke:var(--line);stroke-width:1;shape-rendering:crispEdges}
#fx-grad .fx-svg .ov rect{fill:none;stroke:var(--fg);stroke-width:1;shape-rendering:crispEdges;pointer-events:none}
#fx-grad .fx-svg .ov .ln{stroke-opacity:.3}
#fx-grad .fx-svg .ov .cur{stroke-opacity:.95;stroke-width:1.5}

/* key */
#fx-grad .grad-key{flex:1 1 170px;min-width:0;display:flex;flex-direction:column;gap:7px;padding-bottom:2px}
#fx-grad .grad-key p{margin:0}
#fx-grad .fx-scale i{flex:0 0 72px;height:9px;box-shadow:inset 0 0 0 1px var(--rule);
  background:linear-gradient(90deg,var(--bg),var(--loss));background:linear-gradient(90deg in oklab,var(--bg),var(--loss))}
#fx-grad .grad-snote{margin-top:-3px}
#fx-grad .grad-mk{display:flex;align-items:center;gap:8px;font:300 12px/1.5 var(--mono);color:var(--muted)}
#fx-grad .grad-box{flex:none;width:16px;height:11px;box-sizing:border-box}
#fx-grad .grad-box.tr{border:1.5px solid var(--accent)}
#fx-grad .grad-box.an{border:1px solid var(--rule);background:linear-gradient(135deg,var(--muted) 0 6px,transparent 6px)}

/* tooltip */
#fx-grad .fx-tip .sw{display:inline-block;width:9px;height:9px;border-radius:1px;margin-right:7px;vertical-align:-1px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg) 18%,transparent)}
#fx-grad .fx-tip .v{font-weight:400;color:var(--fg)}
#fx-grad .fx-tip sub{font-size:.75em;line-height:0}
#fx-grad .fx-tip .tag{color:var(--accent)}

@media (max-width:520px){
  #fx-grad .grad-w{display:none}
  #fx-grad .grad-n{display:inline}
  #fx-grad .fx-status{min-height:3em}
}

/* ---- s5 ---- */
/* Figure 4 · S5-Retrieval, generated live (fx-s5). Every selector is scoped to #fx-s5. */
#fx-s5{--s5-labw:96px}
#fx-s5.s5-narrow{--s5-labw:54px}

/* ---- toolbar: N slider + new instance ---- */
#fx-s5 .s5-bar{align-items:flex-start;justify-content:space-between}
#fx-s5 .s5-nctl{display:flex;align-items:flex-start;gap:10px;flex:1 1 380px;min-width:0}
#fx-s5 .s5-nctl .lab,#fx-s5 .s5-nval{padding-top:5px;white-space:nowrap}
#fx-s5 .s5-nval{font:400 13px/1.4 var(--mono);color:var(--fg);min-width:4.4em;font-variant-numeric:tabular-nums}
#fx-s5 .s5-nval.over{color:var(--loss)}
#fx-s5 .s5-inst{display:flex;align-items:center;gap:10px;padding-top:1px}
#fx-s5 .s5-seed{font:300 12px/1.4 var(--mono);color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}

/* native range (keyboard, touch, a11y) over a hand-drawn rail; --tw = thumb box = hit area */
#fx-s5 .s5-slider{--tw:28px;position:relative;flex:1 1 240px;min-width:0;max-width:360px;height:52px}
#fx-s5 .s5-rail{position:absolute;left:calc(var(--tw) / 2);right:calc(var(--tw) / 2);top:13px;height:2px;border-radius:1px;background:var(--line)}
#fx-s5 .s5-rail i{position:absolute;top:0;height:2px;border-radius:1px}
#fx-s5 .s5-fa{left:0;background:var(--accent)}
#fx-s5 .s5-fl{background:var(--loss)}
#fx-s5 .s5-rail i.s5-tk{top:-3.5px;width:1px;height:9px;margin-left:-.5px;background:var(--muted);border-radius:0}
#fx-s5 .s5-range{position:absolute;left:0;top:0;display:block;width:100%;height:var(--tw);margin:0;padding:0;background:transparent;
  -webkit-appearance:none;appearance:none;cursor:pointer;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
#fx-s5 .s5-range:focus{outline:none}
#fx-s5 .s5-range::-webkit-slider-runnable-track{height:var(--tw);background:transparent;border:0}
#fx-s5 .s5-range::-moz-range-track{height:var(--tw);background:transparent;border:0}
#fx-s5 .s5-range::-moz-range-progress{background:transparent}
#fx-s5 .s5-range::-moz-focus-outer{border:0}
#fx-s5 .s5-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:var(--tw);height:var(--tw);margin:0;border:0;border-radius:50%;cursor:grab;
  background:radial-gradient(circle closest-side,var(--bg) 5.3px,var(--accent) 5.9px 6.7px,transparent 7.3px)}
#fx-s5 .s5-range::-moz-range-thumb{width:var(--tw);height:var(--tw);border:0;border-radius:50%;cursor:grab;
  background:radial-gradient(circle closest-side,var(--bg) 5.3px,var(--accent) 5.9px 6.7px,transparent 7.3px)}
#fx-s5 .s5-range:hover::-webkit-slider-thumb,#fx-s5 .s5-range:active::-webkit-slider-thumb{
  background:radial-gradient(circle closest-side,var(--bg) 4.8px,var(--accent) 5.4px 6.9px,transparent 7.5px)}
#fx-s5 .s5-range:hover::-moz-range-thumb,#fx-s5 .s5-range:active::-moz-range-thumb{
  background:radial-gradient(circle closest-side,var(--bg) 4.8px,var(--accent) 5.4px 6.9px,transparent 7.5px)}
#fx-s5 .s5-range:active::-webkit-slider-thumb{cursor:grabbing}
#fx-s5 .s5-range:active::-moz-range-thumb{cursor:grabbing}
#fx-s5 .s5-range:focus-visible::-webkit-slider-thumb{
  background:radial-gradient(circle closest-side,var(--bg) 5.3px,var(--accent) 5.9px 6.7px,color-mix(in srgb,var(--accent) 24%,transparent) 7.3px 10.4px,transparent 11px)}
#fx-s5 .s5-range:focus-visible::-moz-range-thumb{
  background:radial-gradient(circle closest-side,var(--bg) 5.3px,var(--accent) 5.9px 6.7px,color-mix(in srgb,var(--accent) 24%,transparent) 7.3px 10.4px,transparent 11px)}
#fx-s5 .s5-ticks{position:absolute;left:0;right:0;top:24px;height:28px}
#fx-s5 .s5-ticks span{position:absolute;top:0;transform:translateX(-50%);padding:0 3px 2px;font:400 10.5px/1 var(--mono);color:var(--muted);
  cursor:pointer;white-space:nowrap;font-variant-numeric:tabular-nums}
#fx-s5 .s5-ticks span:hover,#fx-s5 .s5-ticks span.on{color:var(--fg)}
#fx-s5 .s5-cap{position:absolute;top:14px;font:300 9.5px/1.2 var(--mono);color:var(--muted);white-space:nowrap;cursor:pointer}
#fx-s5 .s5-c16{transform:translateX(-100%);padding-right:2px}
#fx-s5 .s5-c32{padding-left:2px}
#fx-s5 .s5-cap:hover{color:var(--fg)}
/* narrow: label and value share a line, the slider gets the full row */
#fx-s5.s5-narrow .s5-nctl{flex-wrap:wrap;justify-content:space-between;row-gap:2px;flex-basis:100%}
#fx-s5.s5-narrow .s5-nctl .lab,#fx-s5.s5-narrow .s5-nval{padding-top:0}
#fx-s5.s5-narrow .s5-nval{min-width:0;text-align:right}
#fx-s5.s5-narrow .s5-slider{order:3;flex:1 1 100%;max-width:none}

/* ---- panel A: context line ---- */
#fx-s5 .s5-ctx{display:flex;align-items:center;gap:10px;font:300 11px/1.4 var(--mono);color:var(--muted);min-width:0;margin-top:2px}
#fx-s5 .s5-ctxlab,#fx-s5 .s5-ctxn{flex:none;white-space:nowrap}
#fx-s5 .s5-ctxscroll{position:relative;flex:1 1 auto;min-width:0;overflow-x:hidden;overflow-y:hidden;white-space:nowrap;padding:3px 0 6px;
  font:400 11px/1.4 var(--mono);color:var(--fg);outline:none;scrollbar-width:thin}
/* fade only the edge that hides content (classes set by edges() in s5.js) */
#fx-s5 .s5-mL:not(.s5-mR){-webkit-mask-image:linear-gradient(90deg,transparent,var(--fg) 22px);mask-image:linear-gradient(90deg,transparent,var(--fg) 22px)}
#fx-s5 .s5-mR:not(.s5-mL){-webkit-mask-image:linear-gradient(90deg,var(--fg) calc(100% - 22px),transparent);mask-image:linear-gradient(90deg,var(--fg) calc(100% - 22px),transparent)}
#fx-s5 .s5-mL.s5-mR{-webkit-mask-image:linear-gradient(90deg,transparent,var(--fg) 22px,var(--fg) calc(100% - 22px),transparent);
  mask-image:linear-gradient(90deg,transparent,var(--fg) 22px,var(--fg) calc(100% - 22px),transparent)}
#fx-s5 .s5-ctxscroll:focus-visible{outline:1px solid var(--accent);outline-offset:2px}
#fx-s5 .s5-e{padding:1px 2px;border-radius:2px}
#fx-s5 .s5-e .k{color:var(--muted)}
#fx-s5 .s5-e.on{background:color-mix(in srgb,var(--accent) 25%,transparent)}
#fx-s5 .s5-e.on .k{color:var(--fg)}
#fx-s5.s5-narrow .s5-ctxn{display:none}

/* ---- panel A: rows of chips ---- */
#fx-s5 .s5-rows{display:flex;flex-direction:column;gap:10px;outline:none;border-radius:2px;margin-top:4px}
#fx-s5 .s5-rows:focus-visible{outline:1px solid var(--accent);outline-offset:4px}
#fx-s5 .s5-grp{display:grid;grid-template-columns:var(--s5-labw) repeat(var(--s5-per,8),minmax(0,1fr));gap:3px 4px;align-items:center}
#fx-s5 .s5-lab{font:300 10.5px/1.15 var(--mono);color:var(--muted);padding-right:6px}
#fx-s5 .s5-lab.sh{font-style:italic;text-align:right;padding-right:10px}
#fx-s5 .s5-ix{font:400 9.5px/1 var(--mono);color:var(--muted);text-align:center;padding-bottom:1px;font-variant-numeric:tabular-nums}
#fx-s5 .s5-ix.on{color:var(--fg)}
#fx-s5 .s5-ch{font:400 11px/1 var(--mono);color:var(--fg);text-align:center;padding:5px 0;border-radius:2px;cursor:pointer;
  background:color-mix(in srgb,var(--fg) 4.5%,transparent);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;
  transition:background-color .12s,box-shadow .12s}
#fx-s5 .s5-ch.d{color:var(--muted)}
#fx-s5 .s5-ch.a.in{box-shadow:inset 0 -2px 0 var(--accent)}
#fx-s5 .s5-ch.s.on,#fx-s5 .s5-ch.d.on{background:color-mix(in srgb,var(--accent) 25%,transparent);color:var(--fg)}
#fx-s5 .s5-ch.s.pick{box-shadow:inset 0 0 0 1px var(--accent)}
#fx-s5 .s5-gap{font:300 11px/1.4 var(--mono);color:var(--muted);padding-left:var(--s5-labw)}
#fx-s5.s5-narrow .s5-lab{font-size:10px}

/* ---- panel B: prefix-scan network ---- */
#fx-s5 .s5-pb{margin-top:10px}
#fx-s5 .s5-net{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:16px;align-items:start}
#fx-s5.s5-narrow .s5-net{grid-template-columns:minmax(0,1fr);gap:4px}
#fx-s5 .s5-svgwrap{position:relative;min-width:0;outline:none;border-radius:2px}
#fx-s5 .s5-svgwrap:focus-visible{outline:1px solid var(--accent);outline-offset:4px}
#fx-s5 .s5-svgwrap .fx-svg{cursor:pointer}
#fx-s5 .fx-svg .e{stroke:var(--fx-base2);stroke-width:1;stroke-opacity:.75}
#fx-s5 .fx-svg .e.cp{stroke:var(--fx-base1);stroke-opacity:1}
#fx-s5 .fx-svg .e.x{stroke:var(--loss);stroke-opacity:.7}
#fx-s5 .fx-svg .e.x.cp{stroke-opacity:.3}
#fx-s5 .fx-svg .n{fill:var(--fx-base2)}
#fx-s5 .fx-svg .n.end{fill:var(--fx-base3)}
#fx-s5 .fx-svg .n.x{fill:var(--loss)}
#fx-s5 .fx-svg .ce{stroke:var(--accent);stroke-width:1.75;stroke-linecap:round}
#fx-s5 .fx-svg .cn{fill:var(--accent);stroke:var(--bg);stroke-width:.75}
#fx-s5 .fx-svg .ring{fill:none;stroke:var(--fg);stroke-width:1.25}
#fx-s5 .fx-svg .lim{stroke:var(--loss);stroke-width:1;stroke-dasharray:4 3;stroke-opacity:.75;shape-rendering:crispEdges}
#fx-s5 .fx-svg text.lx{fill:var(--loss)}
#fx-s5 .fx-svg text.fa{fill:var(--fx-base1)}
#fx-s5 .fx-svg text.on{fill:var(--fg)}
#fx-s5 .s5-read{font:300 12px/1.45 var(--mono);color:var(--muted);padding-top:62px}
#fx-s5 .s5-rbig{font:400 15px/1.35 var(--mono);color:var(--fg);white-space:nowrap}
#fx-s5 .s5-rl{color:var(--fg)}
#fx-s5 .s5-rs{margin-top:4px}
#fx-s5 .s5-read.over .s5-rbig,#fx-s5 .s5-read.over .s5-rl,#fx-s5 .s5-read.over .s5-rs{color:var(--loss)}
#fx-s5.s5-narrow .s5-read{padding-top:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px}
#fx-s5.s5-narrow .s5-rs{margin-top:0;flex-basis:100%}

/* ---- the recurrent chain ---- */
#fx-s5 .s5-t2{margin-top:12px}
#fx-s5 .s5-chain{display:flex;align-items:flex-end;overflow-x:hidden;overflow-y:hidden;padding:2px 0 8px;position:relative;outline:none;scrollbar-width:thin}
#fx-s5 .s5-chain:focus-visible{outline:1px solid var(--accent);outline-offset:2px}
#fx-s5 .s5-k{flex:none;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer}
#fx-s5 .s5-k small{font:400 9.5px/1 var(--mono);color:var(--muted)}
#fx-s5 .s5-k .v{font:400 10.5px/1 var(--mono);color:var(--fg);padding:4px 5px;border-radius:2px;font-variant-numeric:tabular-nums;
  background:color-mix(in srgb,var(--fg) 4.5%,transparent);transition:background-color .12s}
#fx-s5 .s5-k.on .v{background:color-mix(in srgb,var(--accent) 25%,transparent)}
#fx-s5 .s5-k.on small{color:var(--fg)}
#fx-s5 .s5-ar{flex:none;display:flex;flex-direction:column;align-items:center;gap:1px;font:300 11px/1 var(--mono);color:var(--fx-base2);padding:0 4px 4px}
#fx-s5 .s5-ar small{font:400 9px/1 var(--mono);color:var(--muted)}
#fx-s5 .s5-ar.in{color:var(--accent)}
#fx-s5 .s5-ar.in small{color:var(--accent)}
#fx-s5 .s5-cnote{margin:0}
#fx-s5 sub{font-size:.78em;line-height:0;vertical-align:-.25em}
#fx-s5 .fx-svg.dense .e{stroke-width:.6}

/* ---- placement ---- */
/* Figure 5 · where the recurrent block sits (fx-placement). Everything is scoped to #fx-placement. */
#fx-placement .fx-placement-ctl{display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:100%}
#fx-placement .fx-placement-met .fx-select{flex:0 1 auto;min-width:0;text-overflow:ellipsis}
#fx-placement .fx-seg .s{display:none}
@media (max-width:560px){
  #fx-placement .fx-placement-grp{display:flex;width:100%}
  #fx-placement .fx-placement-grp .fx-seg{display:grid;grid-template-columns:1fr 1fr;flex:1 1 auto;min-width:0}
  #fx-placement .fx-seg button{padding:4px 6px}
  #fx-placement .fx-seg button:nth-child(3){border-left:0}
  #fx-placement .fx-seg button:nth-child(n+3){border-top:1px solid var(--line)}
  #fx-placement .fx-seg .l{display:none}
  #fx-placement .fx-seg .s{display:inline}
}

/* legend */
#fx-placement .fx-legend{gap:4px 14px;margin-top:-4px}
#fx-placement .fx-placement-sw{display:inline-block;width:14px;height:9px;border-radius:1px;vertical-align:-1px;margin-right:6px}
#fx-placement .fx-placement-sw.rec{background:color-mix(in oklab,var(--accent) 70%,var(--bg))}
#fx-placement .fx-placement-sw.loop{background:repeating-linear-gradient(135deg,var(--accent) 0 1.2px,color-mix(in oklab,var(--accent) 16%,var(--bg)) 1.2px 3.2px)}
#fx-placement .fx-placement-dot{display:inline-block;width:7px;height:7px;border-radius:50%;vertical-align:0;margin-right:6px}
#fx-placement .fx-placement-dot.up{background:var(--accent)}
#fx-placement .fx-placement-dot.dn{background:var(--loss)}
#fx-placement .fx-placement-bl{display:inline-block;width:0;height:11px;border-left:1px dashed var(--fg);opacity:.55;vertical-align:-1px;margin:0 7px 0 3px}

/* chart */
#fx-placement .fx-placement-chart{min-width:0;line-height:0}
#fx-placement .fx-placement-chart svg{cursor:default;-webkit-tap-highlight-color:transparent}
#fx-placement .fx-placement-chart svg:focus{outline:none}
#fx-placement .fx-placement-chart svg:focus-visible .band.on{stroke:var(--accent);stroke-width:1}
#fx-placement .fx-svg .band{fill:var(--fx-band);shape-rendering:crispEdges;pointer-events:none}
#fx-placement .fx-svg text.nm{fill:var(--fg);font-size:11px}
#fx-placement .fx-svg text.nm .ds{fill:var(--muted)}
#fx-placement .fx-svg text.sec{fill:var(--muted);font-size:10.5px;letter-spacing:.02em;paint-order:stroke;stroke:var(--bg);stroke-width:5px;stroke-linejoin:round}
#fx-placement .fx-svg text.halo{paint-order:stroke;stroke:var(--bg);stroke-width:4px;stroke-linejoin:round}
#fx-placement .fx-svg text.hd{fill:var(--fg)}
#fx-placement .fx-svg text.val{fill:var(--fg)}
#fx-placement .fx-svg text.ne{fill:var(--muted);font-style:italic}
#fx-placement .fx-svg text.ann{fill:var(--accent)}
#fx-placement .fx-svg .cell{shape-rendering:crispEdges}
#fx-placement .fx-svg .cell.off{fill:color-mix(in oklab,var(--fg) 11%,var(--bg))}
#fx-placement .fx-svg .cell.rec{fill:color-mix(in oklab,var(--accent) 70%,var(--bg))}
#fx-placement .fx-svg .cell.loop{fill:url(#fx-placement-hatch)}
#fx-placement .fx-svg .hb{fill:color-mix(in oklab,var(--accent) 16%,var(--bg))}
#fx-placement .fx-svg .hl{stroke:var(--accent);stroke-width:1.2}
#fx-placement .fx-svg .sepl{stroke:var(--rule);stroke-width:1;shape-rendering:crispEdges}
#fx-placement .fx-svg .bl{stroke:var(--fg);stroke-opacity:.55;stroke-width:1;stroke-dasharray:3 3;shape-rendering:crispEdges;pointer-events:none}
#fx-placement .fx-svg .stem{stroke-width:1.5;stroke-opacity:.45}
#fx-placement .fx-svg .up{fill:var(--accent);stroke:var(--accent)}
#fx-placement .fx-svg .dn{fill:var(--loss);stroke:var(--loss)}
#fx-placement .fx-svg .eq{fill:var(--fx-base2);stroke:var(--fx-base2)}

/* tooltip */
#fx-placement .fx-tip{white-space:normal;max-width:300px}
#fx-placement .fx-tip .t1{font-weight:400;color:var(--fg)}
#fx-placement .fx-tip .t2{color:var(--muted);margin-bottom:4px}
#fx-placement .fx-tip .tt{display:grid;grid-template-columns:auto auto auto;column-gap:12px;row-gap:0}
#fx-placement .fx-tip .tt span{white-space:nowrap}
#fx-placement .fx-tip .tt .n{color:var(--muted)}
#fx-placement .fx-tip .tt .v{text-align:right;color:var(--fg)}
#fx-placement .fx-tip .tt .d{text-align:right;color:var(--muted)}
#fx-placement .fx-tip .tt .d.up{color:var(--accent)}
#fx-placement .fx-tip .tt .d.dn{color:var(--loss)}
#fx-placement .fx-tip .tt .on{color:var(--fg);font-weight:400}
#fx-placement .fx-tip .tt .hh{grid-column:1 / -1;color:var(--muted);margin-top:4px;border-top:1px solid var(--rule);padding-top:3px}