/* figures.css (built from figures.src.css by scale_css.py; edit the source) - native HTML/SVG versions of the paper figures (mounts: <div class="nfig" data-fig="fig-N">, drawn by
   figures.js).

   The figures are built from the page's shared figure vocabulary (--figure-font, the --fig-* size steps, the dotted
   plot field, .fig-title / .fig-seg / .fig-btn / .fig-pager / .fig-chip / .fig-legend / .fig-swatch / .fig-readout /
   .fig-dots and the .tone-* classes), so on the page they take exactly the look of the interactive figures.
   Part 1 repeats that vocabulary as fallbacks inside :where(), which has zero specificity: the page's own rules always
   win, and the two files still work on a page that defines none of it. Part 2 holds what only the native figures need,
   scoped under .nfig. */

/* ---------------------------------------------------------------------------------------------- 1. fallbacks */
:where(:root) {
  --figure-font: "Palatino Linotype", Palatino, "Palatino LT STD", "Book Antiqua", "URW Palladio L", "TeX Gyre Pagella", Georgia, serif;
  --fig-fine: 9px; --fig-xs: 10px; --fig-sm: 11px; --fig-ctl: 12px; --fig-chip: 13px;
  --fig-label: 14px; --fig-value: 15px; --fig-head: 19px;
  --dot-gap: 6px; --dot-color: #d4d4d4;
  --alg: #6E55A6; --geo: #3F8FD2; --ind: #E884B6; --cog: #E3A51A; --ari: #4E9A55; --gra: #B8304E;
  --refc: #9a8f95; --pmc: #D65C9A;
  --alg-fill: #dfdaeb; --geo-fill: #cfe6f5; --ind-fill: #f8dae9; --cog-fill: #fde8a0; --ari-fill: #d3ecd6;
  --gra-fill: #f1d6dc; --pmc-fill: #f5d8e7;
  --fig-on: #f6d3e1;
}
:where(.nfig .fig-title) { display: block; margin: 0; font-family: var(--figure-font); font-size: var(--fig-head); font-weight: 400; line-height: 1.3; text-align: center; text-wrap: balance; text-decoration: underline dotted; text-decoration-thickness: calc(1px * var(--k, 1)); text-underline-offset: calc(5px * var(--k, 1)); }
:where(.nfig button) { margin: 0; font-family: var(--figure-font); font-size: var(--fig-ctl); line-height: 1.3; color: var(--fg, #000); background: var(--bg, #fff); border: calc(1px * var(--k, 1)) solid var(--fg, #000); border-radius: 0; padding: calc(2px * var(--k, 1)) calc(7px * var(--k, 1)); cursor: pointer; transition: background-color .12s ease, box-shadow .12s ease; }
:where(.nfig button[aria-pressed="true"]) { background: var(--fig-on); }
:where(.nfig button:not([aria-pressed="true"]):not(:disabled):hover) { box-shadow: calc(2px * var(--k, 1)) calc(2px * var(--k, 1)) 0 rgba(0, 0, 0, .6); }
:where(.nfig button:active) { box-shadow: none; }
:where(.nfig button:focus-visible) { outline: calc(2px * var(--k, 1)) solid var(--fg, #000); outline-offset: calc(3px * var(--k, 1)); }
:where(.nfig .fig-btn) { box-shadow: calc(1px * var(--k, 1)) calc(1px * var(--k, 1)) 0 rgba(0, 0, 0, .4); }
:where(.nfig .fig-seg) { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; row-gap: calc(6px * var(--k, 1)); }
:where(.nfig .fig-seg > button + button) { margin-left: calc(-1px * var(--k, 1)); }
:where(.nfig .fig-pager) { display: flex; justify-content: center; align-items: center; gap: calc(8px * var(--k, 1)); font-family: var(--figure-font); font-size: var(--fig-label); line-height: 1.3; font-variant-numeric: tabular-nums; }
:where(.nfig .fig-pager > span) { white-space: nowrap; }
:where(.nfig .fig-pager > button) { flex: 0 0 calc(22px * var(--k, 1)); width: calc(22px * var(--k, 1)); height: calc(22px * var(--k, 1)); padding: 0; border: 0; background: transparent; box-shadow: none; font-size: var(--fig-label); line-height: 1; }
:where(.nfig .fig-pager > button:disabled) { opacity: .35; cursor: default; }
:where(.nfig .fig-pager > button:not(:disabled):hover) { box-shadow: none; outline: calc(1px * var(--k, 1)) solid var(--fg, #000); }
:where(.nfig .fig-chip) { display: inline-block; font-family: var(--figure-font); font-size: var(--fig-chip); line-height: 1.2; padding: calc(1px * var(--k, 1)) calc(4px * var(--k, 1)); border: calc(1px * var(--k, 1)) solid var(--chip-border, var(--fg, #000)); background: var(--chip-fill, var(--bg, #fff)); color: var(--fg, #000); white-space: pre; box-shadow: calc(1px * var(--k, 1)) calc(1px * var(--k, 1)) 0 rgba(0, 0, 0, .4); box-shadow: calc(1px * var(--k, 1)) calc(1px * var(--k, 1)) 0 color-mix(in srgb, var(--chip-border, #000) 40%, transparent); }
:where(.nfig .tone-alg) { --c: var(--alg); --chip-border: var(--alg); --chip-fill: var(--alg-fill); }
:where(.nfig .tone-geo) { --c: var(--geo); --chip-border: var(--geo); --chip-fill: var(--geo-fill); }
:where(.nfig .tone-ind) { --c: var(--ind); --chip-border: var(--ind); --chip-fill: var(--ind-fill); }
:where(.nfig .tone-cog) { --c: var(--cog); --chip-border: var(--cog); --chip-fill: var(--cog-fill); }
:where(.nfig .tone-ari) { --c: var(--ari); --chip-border: var(--ari); --chip-fill: var(--ari-fill); }
:where(.nfig .tone-gra) { --c: var(--gra); --chip-border: var(--gra); --chip-fill: var(--gra-fill); }
:where(.nfig .tone-pm) { --c: var(--pmc); --chip-border: var(--pmc); --chip-fill: var(--pmc-fill); }
:where(.nfig .fig-legend) { display: flex; flex-wrap: wrap; gap: calc(6px * var(--k, 1)) calc(18px * var(--k, 1)); font-family: var(--figure-font); font-size: var(--fig-sm); line-height: 1.3; }
:where(.nfig .fig-legend > span) { white-space: nowrap; }
:where(.nfig .fig-swatch) { flex: 0 0 auto; display: inline-block; width: calc(9px * var(--k, 1)); height: calc(9px * var(--k, 1)); margin-right: calc(5px * var(--k, 1)); background: var(--c, var(--fg, #000)); }
:where(.nfig .fig-swatch.line) { width: calc(12px * var(--k, 1)); height: calc(2px * var(--k, 1)); vertical-align: middle; }
:where(.nfig .fig-readout) { font-family: var(--figure-font); font-size: var(--fig-ctl); line-height: 1.6; font-variant-numeric: tabular-nums; }
:where(.nfig .fig-readout b) { font-weight: 600; }
:where(.nfig .fig-dots) { background-color: var(--bg, #fff); background-image: radial-gradient(circle, var(--dot-color) calc(0.65px * var(--k, 1)), transparent calc(0.8px * var(--k, 1))); background-size: var(--dot-gap) var(--dot-gap); background-position: center bottom; }
@media (max-width: 640px) {
  :where(.nfig .fig-title) { font-size: var(--fig-value); }
}

/* ------------------------------------------------------------------------------------- 2. native figures only */
.nfig {
  position: relative; display: block; width: 100%; min-width: 0;
  font-family: var(--figure-font); font-size: var(--fig-ctl); font-weight: 400; font-style: normal; line-height: 1.3;
  font-variant-numeric: tabular-nums; letter-spacing: 0; text-align: left; color: var(--fg, #000);
  -webkit-text-size-adjust: none; text-size-adjust: none;
}
.nfig *, .nfig *::before, .nfig *::after { box-sizing: border-box; }
.nfig [hidden] { display: none !important; }
.nfig p, .nfig h4 { margin: 0; padding: 0; color: inherit; font-family: inherit; }

/* Under an enforced minimum font size (see figures.js) everything a figure holds is laid out --nfk times larger in real
   px, inside a wrapper that a transform scales back by the same factor: every font size the browser sees then clears
   its minimum, and what is painted has the designed size. In this file every px length is multiplied by var(--k)
   (the build does that: figures.src.css is the source, in plain design px); --k is --nfk inside a wrapper and 1
   everywhere else. The mount keeps the design width and takes the wrapper's painted height from the script.
   An svg is scaled as a whole through its viewBox, so inside it (not on the svg's own box) the tokens are back at
   their design values.
   The figure font stays mono in there: the page's serif fallback for small mono labels is not needed, and would
   change the design. The page's interactive figures (.frame.anim) get the same treatment through a host element. */
.nfig-in { font-size: var(--fig-ctl); }
html.nfig-zoom .nfig, html.nfig-zoom .frame.anim { --figure-font: "Palatino Linotype", Palatino, "Palatino LT STD", "Book Antiqua", "URW Palladio L", "TeX Gyre Pagella", Georgia, serif; }
html.nfig-zoom .nfig-in, html.nfig-zoom .nfig-host > .frame.anim {
  --k: var(--nfk);
  --fig-fine: calc(9px * var(--nfk)); --fig-xs: calc(10px * var(--nfk)); --fig-sm: calc(11px * var(--nfk)); --fig-ctl: calc(12px * var(--nfk));
  --fig-chip: calc(13px * var(--nfk)); --fig-label: calc(14px * var(--nfk)); --fig-value: calc(15px * var(--nfk)); --fig-head: calc(19px * var(--nfk));
  --dot-gap: calc(6px * var(--nfk));
  position: absolute; left: 0; top: 0; width: calc(100% * var(--nfk)); margin: 0;
  transform: scale(calc(1 / var(--nfk))); transform-origin: 0 0; }
html.nfig-zoom .nfig-in svg > * { --k: 1; --fig-fine: 9px; --fig-xs: 10px; --fig-sm: 11px; --fig-ctl: 12px; --fig-chip: 13px; --fig-label: 14px; --fig-value: 15px; --fig-head: 19px; --dot-gap: 6px; }
html.nfig-zoom .nfig-host { position: relative; width: var(--wide, 100%); margin: 40px calc((100% - var(--wide, 100%)) / 2); }
html.nfig-zoom .nfig-host > .cap:last-child { margin-top: 12px; }
/* KaTeX inside a wrapper: its 1px strut would be raised to the minimum, so it gets a zero font size (which is exempt)
   and the height the 1px font gave it; its hairlines keep one painted px */
html.nfig-zoom :is(.nfig-in, .nfig-host > .frame.anim) .katex .vlist-s { font-size: 0; height: calc(1.2px * var(--nfk)); }
html.nfig-zoom :is(.nfig-in, .nfig-host > .frame.anim) .katex :is(.frac-line, .overline-line, .underline-line, .rule) { min-height: calc(1px * var(--nfk)); }
html.nfig-zoom :is(.nfig-in, .nfig-host > .frame.anim) :focus-visible { outline-width: calc(2px * var(--nfk)); outline-offset: calc(3px * var(--nfk)); }

/* row of controls above a figure: paging / facets on the left, table view and help on the right */
.nfig .nfig-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(8px * var(--k, 1)) calc(12px * var(--k, 1)); min-height: calc(22px * var(--k, 1)); margin: 0 0 calc(12px * var(--k, 1)); }
.nfig .nfig-top-l, .nfig .nfig-top-r { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8px * var(--k, 1)) calc(12px * var(--k, 1)); }
.nfig .nfig-top-r { margin-left: auto; }
.nfig button.nfig-q { flex: none; width: calc(22px * var(--k, 1)); height: calc(22px * var(--k, 1)); padding: 0; border: 0; background: transparent; box-shadow: none !important; text-align: center; font-size: var(--fig-value); font-weight: 700; line-height: calc(22px * var(--k, 1)); color: var(--accent, #d95087); }
.nfig button.nfig-q:hover { color: var(--accent-hover, #b8336a); }
.nfig .nfig-helptext { margin: 0 0 calc(12px * var(--k, 1)); max-width: calc(736px * var(--k, 1)); font-size: var(--fig-ctl); line-height: 1.5; }

/* panel titles laid out over the panels of a plot; legends; axis captions */
.nfig .nfig-heads { display: grid; align-items: end; margin: 0 0 calc(6px * var(--k, 1)); }
.nfig .nfig-heads .fig-title.nf-sm { font-size: var(--fig-value); }
.nfig .nfig-sub { display: block; margin-top: calc(3px * var(--k, 1)); font-size: var(--fig-xs); line-height: 1.3; text-align: center; text-decoration: none; }
.nfig .nfig-axis { margin: calc(4px * var(--k, 1)) 0 0; font-size: var(--fig-ctl); line-height: 1.4; text-align: center; }
.nfig .fig-legend.nfig-center { justify-content: center; align-items: center; margin: calc(12px * var(--k, 1)) 0 0; }
.nfig .fig-legend.nfig-center.nf-top { margin: 0 0 calc(12px * var(--k, 1)); }
.nfig .fig-legend > span { display: inline-flex; align-items: center; }
.nfig .nfig-key { display: inline-block; flex: none; margin-right: calc(6px * var(--k, 1)); }
.nfig .nfig-key.nf-mix { display: inline-flex; width: calc(22px * var(--k, 1)); height: calc(6px * var(--k, 1)); }
.nfig .nfig-key.nf-mix > i { display: block; flex: 1 1 0; height: 100%; }
.nfig .nfig-key.nf-dash { width: calc(18px * var(--k, 1)); height: 0; border-top: calc(1px * var(--k, 1)) dashed var(--fg, #000); }
.nfig .nfig-key.nf-tick { width: calc(2px * var(--k, 1)); height: calc(12px * var(--k, 1)); background: var(--fg, #000); }
.nfig .nfig-key.nf-band { width: calc(14px * var(--k, 1)); height: calc(10px * var(--k, 1)); }
.nfig .nfig-key.nf-sq { width: calc(9px * var(--k, 1)); height: calc(9px * var(--k, 1)); background: var(--fg, #000); }
.nfig .nfig-key.nf-dotk { width: calc(8px * var(--k, 1)); height: calc(8px * var(--k, 1)); border-radius: 50%; background: var(--fg, #000); }
.nfig .nfig-key.nf-ring { width: calc(10px * var(--k, 1)); height: calc(10px * var(--k, 1)); border-radius: 50%; border: calc(1.6px * var(--k, 1)) solid var(--fg, #000); background: var(--bg, #fff); }
.nfig .nfig-key.nf-star { width: calc(12px * var(--k, 1)); height: calc(12px * var(--k, 1)); }
.nfig .nfig-fade { opacity: .45; }
.nfig .katex { font-size: 1.08em; line-height: 1; }

/* plot: dotted fields (HTML, under the svg) and the svg that draws on them */
.nfig .nfig-body { min-width: 0; }
.nfig .nfig-plot { position: relative; margin: 0 auto; max-width: 100%; }
.nfig .nfig-plot + .nfig-plot, .nfig .nfig-plot + .nfig-heads { margin-top: calc(18px * var(--k, 1)); }
.nfig .nfig-field, .nfig .nfig-band { position: absolute; }
.nfig .nfig-plot > svg { position: relative; display: block; overflow: visible; }
.nfig svg text { font-family: var(--figure-font); font-variant-numeric: tabular-nums; fill: var(--fg, #000); }
.nfig .nf-t9 { font-size: var(--fig-fine); } .nfig .nf-t10 { font-size: var(--fig-xs); } .nfig .nf-t11 { font-size: var(--fig-sm); }
.nfig .nf-t12 { font-size: var(--fig-ctl); } .nfig .nf-t13 { font-size: var(--fig-chip); } .nfig .nf-t14 { font-size: var(--fig-label); }
.nfig .nf-t15 { font-size: var(--fig-value); }
.nfig svg .nf-b { font-weight: 600; }
.nfig .nf-ax { stroke: var(--fg, #000); stroke-width: 1; shape-rendering: crispEdges; fill: none; }
.nfig .nf-ref { stroke: var(--fg, #000); stroke-width: 1; stroke-opacity: .38; shape-rendering: crispEdges; fill: none; }
.nfig .nf-base { stroke: var(--fg, #000); stroke-width: 1; stroke-dasharray: 4 2.5; shape-rendering: crispEdges; fill: none; }
.nfig .nf-whisk { stroke: var(--fg, #000); stroke-width: 1; shape-rendering: crispEdges; fill: none; }
.nfig .nf-tk { fill: var(--fg, #000); shape-rendering: crispEdges; }
.nfig .nf-hit { fill: #000; fill-opacity: 0; stroke: none; }
.nfig .nf-row { transition: opacity 180ms ease; }
.nfig .nf-row.nf-dim { opacity: .25; }
.nfig .nf-cross { stroke: var(--fg, #000); stroke-width: 1; shape-rendering: crispEdges; pointer-events: none; }
.nfig .nf-curve { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.nfig svg [tabindex]:focus { outline: none; }
.nfig svg [tabindex]:focus-visible { outline: calc(2px * var(--k, 1)) solid var(--fg, #000); outline-offset: calc(2px * var(--k, 1)); }

/* floating readout: values lead, labels follow */
.nfig .nfig-tip { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; max-width: min(calc(360px * var(--k, 1)), 92vw); padding: calc(6px * var(--k, 1)) calc(8px * var(--k, 1)); background: var(--bg, #fff); border: calc(1px * var(--k, 1)) solid var(--fg, #000); box-shadow: calc(2px * var(--k, 1)) calc(2px * var(--k, 1)) 0 rgba(0, 0, 0, .25); font-size: var(--fig-sm); line-height: 1.5; white-space: nowrap; }
.nfig .nfig-tip > b { display: block; margin: 0 0 calc(2px * var(--k, 1)); }
.nfig .nfig-tip > div { display: flex; align-items: center; gap: calc(6px * var(--k, 1)); }
.nfig .nfig-tip > div > i { display: inline-block; flex: none; width: calc(12px * var(--k, 1)); height: calc(2px * var(--k, 1)); }
.nfig .nfig-tip > div > b { min-width: 4.6em; }
.nfig .nfig-tip > div.nf-hot > span { font-weight: 600; }

/* table view */
.nfig .nfig-tablewrap { overflow-x: auto; }
.nfig table { width: 100%; border-collapse: collapse; font-family: var(--figure-font); font-size: var(--fig-ctl); line-height: 1.4; font-variant-numeric: tabular-nums; }
.nfig th, .nfig td { padding: calc(5px * var(--k, 1)) calc(10px * var(--k, 1)); border: 0; border-bottom: calc(1px * var(--k, 1)) solid var(--fg, #000); text-align: right; font-weight: 400; white-space: nowrap; color: var(--fg, #000); }
.nfig th { font-weight: 600; vertical-align: bottom; }
.nfig th:first-child, .nfig td:first-child { text-align: left; }
.nfig tr.nf-grp td { padding-top: calc(14px * var(--k, 1)); font-weight: 600; }

/* schematics (Figures 1 and 11): stages of outlined boxes joined by arrows */
.nfig .nfig-flow { display: grid; grid-template-columns: var(--nf-cols, minmax(0, 1fr)); align-items: stretch; column-gap: 0; row-gap: calc(6px * var(--k, 1)); }
.nfig .nfig-stage { display: flex; flex-direction: column; gap: calc(12px * var(--k, 1)); min-width: 0; }
.nfig .nfig-stage-body { display: flex; flex-direction: column; gap: calc(10px * var(--k, 1)); min-width: 0; margin-block: auto; }
.nfig .nfig-stage > .fig-title { font-size: var(--fig-value); min-height: 2.6em; display: flex; align-items: flex-end; justify-content: center; }
.nfig .nfig-stage > .fig-title > span { display: block; min-width: 0; }
.nfig .nfig-arrow { display: flex; align-items: center; justify-content: center; min-width: calc(34px * var(--k, 1)); min-height: calc(28px * var(--k, 1)); }
.nfig .nfig-box { padding: calc(8px * var(--k, 1)); border: calc(1px * var(--k, 1)) solid var(--cb, var(--fg, #000)); background: var(--cf, var(--bg, #fff)); min-width: 0; }
.nfig .nfig-box.nf-dash { border-style: dashed; }
.nfig .nfig-box.nf-grow { flex: 1 1 auto; }
.nfig .nfig-row { display: flex; align-items: center; gap: calc(6px * var(--k, 1)) calc(8px * var(--k, 1)); min-width: 0; }
.nfig .nfig-row.nf-wrap { flex-wrap: wrap; }
.nfig .nfig-row.nf-between { justify-content: space-between; }
.nfig .nfig-row.nf-center { justify-content: center; }
.nfig .nfig-row.nf-top { align-items: flex-start; }
.nfig .nfig-col { display: flex; flex-direction: column; gap: calc(8px * var(--k, 1)); min-width: 0; }
.nfig .nfig-small { font-size: var(--fig-sm); line-height: 1.45; }
.nfig .nfig-math { font-size: var(--fig-chip); line-height: 1.6; text-align: center; overflow-x: auto; overflow-y: hidden; padding-block: calc(2px * var(--k, 1)); }
.nfig .nfig-track { position: relative; flex: 1 1 auto; height: calc(10px * var(--k, 1)); min-width: calc(24px * var(--k, 1)); border: calc(1px * var(--k, 1)) solid var(--fg, #000); background: var(--bg, #fff); }
.nfig .nfig-track > i { position: absolute; left: 0; top: 0; bottom: 0; }
.nfig .nfig-track > u { position: absolute; top: calc(-4px * var(--k, 1)); bottom: calc(-4px * var(--k, 1)); width: calc(2px * var(--k, 1)); margin-left: calc(-1px * var(--k, 1)); background: var(--fg, #000); }
.nfig .nfig-num { flex: none; font-size: var(--fig-chip); font-weight: 600; }
.nfig .nfig-glyph { display: block; overflow: visible; }

/* opening figure: one example carried left to right. Nodes are placed on a stage (.nft-at, by an anchor point) and
   joined by svg wires drawn from their measured boxes; below 900px the three panels stack and lay out on their own. */
.nfig .nft { position: relative; margin: 0 auto; }
.nfig .nft-narrow { display: flex; flex-direction: column; gap: calc(8px * var(--k, 1)); }
.nfig .nft-narrow > .nfig-arrow { align-self: center; }
.nfig .nft-at { position: absolute; z-index: 1; }
.nfig .nft .fig-title { white-space: nowrap; }
.nfig .nft-pane { position: absolute; border: calc(1px * var(--k, 1)) solid var(--fg, #000); }
.nfig .nft-narrow .nft-pane { position: relative; }
.nfig .nft-flowpane { display: flex; flex-direction: column; gap: calc(12px * var(--k, 1)); padding: calc(10px * var(--k, 1)); }
.nfig svg.nft-wires { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.nfig .nft-lab { font-size: var(--fig-sm); line-height: 1.3; text-align: center; white-space: nowrap; }
/* a policy's next-token distribution */
.nfig .nft-card { display: flex; align-items: center; justify-content: space-between; gap: calc(6px * var(--k, 1)); width: calc(104px * var(--k, 1)); height: calc(40px * var(--k, 1)); padding: 0 calc(8px * var(--k, 1)); border: calc(1px * var(--k, 1)) solid var(--cb, var(--fg, #000)); background: var(--cf, var(--bg, #fff)); }
.nfig .nft-card.nft-pm { flex-direction: column; align-items: stretch; justify-content: center; gap: calc(4px * var(--k, 1)); width: calc(110px * var(--k, 1)); height: calc(96px * var(--k, 1)); padding: calc(6px * var(--k, 1)) calc(10px * var(--k, 1)); background: var(--bg, #fff); }
.nfig .nft-pmhead { display: flex; align-items: baseline; justify-content: space-between; gap: calc(6px * var(--k, 1)); }
.nfig .nft-cardcol { display: flex; flex-direction: column; align-items: center; gap: calc(4px * var(--k, 1)); }
.nfig .nft-cardcol > .nft-card { width: 100%; }
.nfig .nft-coef { font-size: var(--fig-sm); line-height: 1.3; white-space: nowrap; }
/* soft glow behind what a claim touches (the paper palette at half strength) */
.nfig .nft-glow { --glow: rgba(214, 92, 154, .5); box-shadow: 0 0 calc(14px * var(--k, 1)) calc(4px * var(--k, 1)) var(--glow); }
.nfig .nft-glow.nft-g-cog { --glow: rgba(227, 165, 26, .6); }
.nfig .nft-glow.nft-g-ari { --glow: rgba(78, 154, 85, .55); }
.nfig .fig-chip.nft-glow { box-shadow: calc(1px * var(--k, 1)) calc(1px * var(--k, 1)) 0 rgba(0, 0, 0, .25), 0 0 calc(12px * var(--k, 1)) calc(3px * var(--k, 1)) var(--glow); }
/* the prompt, the empty next position, the model that is never trained */
.nfig .nft-bubble { padding: calc(6px * var(--k, 1)) calc(10px * var(--k, 1)); border: calc(1px * var(--k, 1)) solid var(--fg, #000); background: #f5f5f5; font-size: var(--fig-chip); line-height: 1.3; white-space: nowrap; }
.nfig .nft-bubble > svg { position: absolute; left: calc(16px * var(--k, 1)); top: 100%; margin-top: calc(-0.5px * var(--k, 1)); overflow: visible; }
.nfig .fig-chip.nft-slot { border-style: dashed; box-shadow: none; }
.nfig .nft-ghost { display: flex; align-items: center; justify-content: center; gap: calc(5px * var(--k, 1)); height: calc(34px * var(--k, 1)); padding: 0 calc(7px * var(--k, 1)); border: calc(1px * var(--k, 1)) dashed var(--fg, #000); background: var(--bg, #fff); font-size: var(--fig-xs); white-space: nowrap; }
/* what it predicts: one block per claim */
.nfig .nft-col { display: flex; flex-direction: column; gap: calc(12px * var(--k, 1)); }
.nfig .nft-block { display: flex; flex-direction: column; gap: calc(5px * var(--k, 1)); padding: calc(8px * var(--k, 1)) calc(10px * var(--k, 1)); border: calc(1px * var(--k, 1)) solid var(--chip-border, var(--fg, #000)); background: var(--chip-fill, var(--bg, #fff)); font-size: var(--fig-sm); line-height: 1.4; }
.nfig .nft-row { display: flex; align-items: baseline; justify-content: space-between; gap: calc(8px * var(--k, 1)); }
.nfig .nft-ok { font-style: italic; font-weight: 600; white-space: nowrap; color: var(--ok, #166534); }
.nfig .nft-answer { display: flex; flex-wrap: wrap; align-items: center; gap: calc(3px * var(--k, 1)); }
.nfig .nft-answer .fig-chip { font-size: var(--fig-sm); background: var(--bg, #fff); }
.nfig .nft-cands { display: flex; flex-direction: column; gap: calc(3px * var(--k, 1)); }
.nfig .nft-cand { display: grid; grid-template-columns: calc(50px * var(--k, 1)) minmax(calc(40px * var(--k, 1)), calc(84px * var(--k, 1))) auto; align-items: center; column-gap: calc(8px * var(--k, 1)); padding: calc(3px * var(--k, 1)) calc(5px * var(--k, 1)); white-space: nowrap; }
.nfig .nft-cand.nft-pick { background: var(--bg, #fff); outline: calc(1px * var(--k, 1)) solid var(--cog, #E3A51A); }
.nfig .nft-mix { display: flex; height: calc(7px * var(--k, 1)); }
.nfig .nft-mix > i { display: block; height: 100%; }
.nfig .nft-score { display: block; height: calc(7px * var(--k, 1)); border: calc(1px * var(--k, 1)) solid var(--fg, #000); background: var(--bg, #fff); }
.nfig .nft-score > i { display: block; height: 100%; }
.nfig .nft-opd { display: grid; grid-template-columns: repeat(5, auto); justify-content: start; align-items: center; justify-items: center; column-gap: calc(5px * var(--k, 1)); row-gap: calc(3px * var(--k, 1)); white-space: nowrap; }
.nfig .nft-teachers { display: flex; flex-direction: column; gap: calc(6px * var(--k, 1)); }
/* narrow layout: a pile, the run on it, the policy it gives */
.nfig .nft-train { display: grid; grid-template-columns: calc(76px * var(--k, 1)) minmax(calc(24px * var(--k, 1)), 1fr) auto; align-items: center; column-gap: calc(10px * var(--k, 1)); }
.nfig .nft-doc { display: flex; flex-direction: column; align-items: center; gap: calc(3px * var(--k, 1)); }
.nfig .nft-run { position: relative; height: 0; border-top: calc(2px * var(--k, 1)) solid var(--c, var(--fg, #000)); }
.nfig .nft-run.nft-dashed { border-top: calc(1.5px * var(--k, 1)) dashed var(--c, var(--fg, #000)); }
.nfig .nft-run > .nft-lab { position: absolute; left: 50%; top: calc(-10px * var(--k, 1)); transform: translate(-50%, -50%); }
.nfig .nft-run > .nft-lab:empty { display: none; }

/* the opening figure laid out for the paper (data-layout="paper" on the mount): a row of 720 design px that is set at
   the 5.5in text width of the ICLR style, so one design px prints at 0.55pt. Type is on three steps, panel titles
   15px (8.3pt), chips and the prompt 13px (7.2pt), every other label 11px (6.1pt); math is set at 15.72px, the size
   whose subscripts are 11px as well. Space is taken out of the panels and the gaps between them, not out of the type. */
.nfig .nft-paper .fig-title { font-size: calc(15px * var(--k, 1)); text-underline-offset: calc(4px * var(--k, 1)); }
.nfig .nft-paper .katex { font-size: calc(15.72px * var(--k, 1)); }
.nfig .nft-paper .fig-chip, .nfig .nft-paper .nft-bubble, .nfig .nft-paper .nft-answer .fig-chip { font-size: calc(13px * var(--k, 1)); }
.nfig .nft-paper .nft-lab, .nfig .nft-paper .nft-ghost, .nfig .nft-paper .nft-block, .nfig .nft-paper .nfig-small { font-size: calc(11px * var(--k, 1)); }
.nfig .nft-paper .nft-card { width: calc(96px * var(--k, 1)); height: calc(36px * var(--k, 1)); padding: 0 calc(7px * var(--k, 1)); }
.nfig .nft-paper .nft-card.nft-pm { width: calc(110px * var(--k, 1)); height: calc(96px * var(--k, 1)); padding: calc(6px * var(--k, 1)) calc(10px * var(--k, 1)); }
.nfig .nft-paper .nft-ghost { height: calc(28px * var(--k, 1)); }
.nfig .nft-paper .nft-col { gap: calc(8px * var(--k, 1)); }
.nfig .nft-paper .nft-block { gap: calc(4px * var(--k, 1)); padding: calc(6px * var(--k, 1)) calc(7px * var(--k, 1)); }
.nfig .nft-paper .nft-opd { column-gap: calc(4px * var(--k, 1)); }
.nfig .nft-paper .nft-ok { display: inline-flex; align-items: center; gap: calc(5px * var(--k, 1)); }
.nfig .nft-paper .nf-ax { shape-rendering: auto; }     /* crisp-edged strokes come out as hairlines in a printed pdf */

/* the paper layout in Palatino (its default; data-face="mono" on the mount keeps the figure font). Every glyph is
   Palatino, the math too (palMath in figures.js sets it from spans: .nfm). Palatino is narrower than the mono face
   and has a smaller x-height, so the type is a step larger at about the same printed size: titles 16px (8.8pt),
   formulas 15px (8.3pt), chips and the prompt 14px (7.7pt), every other label 13px (7.2pt), subscripts 11px (6.1pt). */
.nfig .nft-pal { --figure-font: "Palatino Linotype", Palatino, "Palatino LT STD", "Book Antiqua", "URW Palladio L", "TeX Gyre Pagella", Georgia, serif; font-family: var(--figure-font); }
.nfig .nft-pal .fig-title { font-size: calc(16px * var(--k, 1)); }
.nfig .nft-pal .fig-chip, .nfig .nft-pal .nft-bubble, .nfig .nft-pal .nft-answer .fig-chip { font-size: calc(14px * var(--k, 1)); }
.nfig .nft-pal .nft-lab, .nfig .nft-pal .nft-ghost, .nfig .nft-pal .nft-block, .nfig .nft-pal .nfig-small { font-size: calc(13px * var(--k, 1)); }
.nfig .nft-pal .nft-col { gap: calc(6px * var(--k, 1)); }
.nfig .nft-pal .nft-block { line-height: 1.25; padding: calc(5px * var(--k, 1)) calc(7px * var(--k, 1)); }
.nfig .nft-pal .nft-card.nft-pm { width: calc(116px * var(--k, 1)); }
.nfig .nft-pal .nft-go { display: inline-flex; align-items: center; gap: calc(5px * var(--k, 1)); }
.nfig .nft-pal .nft-sl { margin: 0 calc(-1.2px * var(--k, 1)); }             /* Palatino's slash carries wide side bearings */
.nfig .nfm { font-size: calc(15px * var(--k, 1)); font-style: normal; font-weight: 400; line-height: 1; white-space: nowrap; }
.nfig .nfm i { font-style: italic; }
.nfig .nfm b { font-weight: 700; }
.nfig .nfm sub { position: relative; top: calc(3.5px * var(--k, 1)); margin-left: calc(0.5px * var(--k, 1)); font-size: calc(11px * var(--k, 1)); line-height: 0; vertical-align: baseline; }
.nfig .nfm-rel { margin: 0 calc(4px * var(--k, 1)); }
.nfig .nfm-bin { margin: 0 calc(3px * var(--k, 1)); }
.nfig .nfm-op { margin-right: calc(1px * var(--k, 1)); }
.nfig .nfm-thin { display: inline-block; width: calc(2.5px * var(--k, 1)); }

/* the short arrangement of the paper layout (its default; data-shape="tall" gives the one above): the same type at
   about two thirds of the height. Cards, the prompt and the blocks lose padding and leading, never size; the blocks of
   the third panel are rearranged in figures.js (blocksShort). */
.nfig .nft-short .nft-lab { line-height: 1.25; }
.nfig .nft-short .nft-card { width: calc(76px * var(--k, 1)); height: calc(30px * var(--k, 1)); padding: 0 calc(6px * var(--k, 1)); gap: calc(4px * var(--k, 1)); }
.nfig .nft-short .nft-card.nft-pm { width: calc(106px * var(--k, 1)); height: calc(80px * var(--k, 1)); padding: calc(4px * var(--k, 1)) calc(6px * var(--k, 1)); gap: calc(3px * var(--k, 1)); }
.nfig .nft-short .nft-pm.nft-glow { box-shadow: 0 0 calc(10px * var(--k, 1)) calc(3px * var(--k, 1)) var(--glow); }      /* a tighter glow: the coefficients stand close by */
.nfig .nft-short .nft-pmhead .nfig-small { line-height: 1.2; }
.nfig .nft-short .nft-bubble { padding: calc(4px * var(--k, 1)) calc(9px * var(--k, 1)); line-height: 1.2; }
.nfig .nft-short .nft-bubble > svg { left: calc(8px * var(--k, 1)); }
.nfig .nft-short .nft-ghost { height: calc(24px * var(--k, 1)); padding: 0 calc(6px * var(--k, 1)); }
.nfig .nft-short .nft-col { gap: calc(9px * var(--k, 1)); }
.nfig .nft-short .nft-block { gap: calc(2px * var(--k, 1)); padding: calc(5px * var(--k, 1)) calc(6px * var(--k, 1)); }
.nfig .nft-short .nft-row { align-items: center; }
.nfig .nft-short .nft-answer { flex-wrap: nowrap; }
.nfig .nft-short .nft-two { flex-direction: row; align-items: center; justify-content: space-between; gap: calc(6px * var(--k, 1)); }
.nfig .nft-short .nft-lines { display: flex; flex-direction: column; white-space: nowrap; }
.nfig .nft-short .nft-cands { gap: 0; }
.nfig .nft-short .nft-cand { grid-template-columns: calc(22px * var(--k, 1)) calc(26px * var(--k, 1)) auto; column-gap: calc(5px * var(--k, 1)); min-height: calc(16.25px * var(--k, 1)); padding: 0 calc(4px * var(--k, 1)); }
.nfig .nft-short .nft-teachers { flex-direction: row; gap: calc(3px * var(--k, 1)); }
.nfig .nft-short .nft-opd { column-gap: calc(6px * var(--k, 1)); row-gap: calc(1px * var(--k, 1)); }

/* figures 3 and 4 for the paper (render_p.js): plots in the same Palatino vocabulary, on a root that is also
   .nft-paper.nft-pal, so titles, chips and labels take the opening figure's sizes */
.nfig .nfp .nft-lab { line-height: 1.2; }
.nfig .nfp-slot .fig-chip { line-height: 1.1; padding-top: 0; padding-bottom: 0; }      /* figures 3 and 4 in the paper's slot: slimmer chips, the same type */
.nfig .nfp-keys { display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; }
.nfig .nft-pal .fig-chip.nfp-key { display: flex; align-items: center; gap: calc(5px * var(--k, 1)); font-size: calc(13px * var(--k, 1)); }
.nfig .nfp-key > .nft-mix { flex: none; width: calc(18px * var(--k, 1)); }
.nfig .nfp-key > .nfp-sw { flex: none; width: calc(10px * var(--k, 1)); height: calc(10px * var(--k, 1)); background: var(--c, var(--fg, #000)); }
.nfig .nfp-legend { display: flex; align-items: center; gap: calc(7px * var(--k, 1)); white-space: nowrap; }
.nfig .nfp .fig-chip.nfp-grp { display: flex; flex-direction: column; padding: 0; font-size: calc(13px * var(--k, 1)); line-height: 1.15; white-space: nowrap; }
.nfig .nfp-grp > .nft-mix { height: calc(4px * var(--k, 1)); }
.nfig .nfp-grp > span { padding: 0 calc(5px * var(--k, 1)) calc(1px * var(--k, 1)); }
.nfig .nfp .nft-pane.nfp-open { border-bottom: 0; }       /* figure 2: the bottom of the frame is drawn torn, the axis starts above zero */
.nfig .nfm-acc { position: relative; display: inline-block; }
.nfig .nfm-mark { position: absolute; left: 50%; top: 0; transform: translateX(-50%); }
.nfig .nfm sup { position: relative; top: calc(-5px * var(--k, 1)); margin-left: calc(0.5px * var(--k, 1)); font-size: calc(11px * var(--k, 1)); line-height: 0; vertical-align: baseline; }
/* figure 2, designs a and b: marks in the keys, the panel of coefficients, numbers in the series' inks */
.nfig .nfp-key > svg { flex: none; }
.nfig .fig-title .nfm { font-size: 1em; }
.nfig .nfp-r2a .fig-chip.nfp-key, .nfig .nfp-r2b .fig-chip.nfp-key { line-height: 1.15; padding-top: 0; padding-bottom: 0; }
.nfig .nfp-leg { display: flex; flex-direction: column; justify-content: center; gap: calc(9px * var(--k, 1)); padding: 0 calc(7px * var(--k, 1)); }
.nfig .nfp-ent { display: flex; flex-direction: column; align-items: flex-start; gap: calc(1px * var(--k, 1)); }
.nfig .nfp-say { padding-left: calc(2px * var(--k, 1)); font-size: calc(13px * var(--k, 1)); line-height: 1.2; white-space: nowrap; }
/* figure 2, design c: a bar drawn as a tall chip standing on the baseline (no bottom border, the shadow to the right
   only), its value inside its top; in the keys the two bars' chips need no mark, they are the same fill and border */
.nfig .nfp-tall { display: flex; justify-content: center; align-items: flex-start; border: calc(1px * var(--k, 1)) solid var(--chip-border, var(--fg, #000)); border-bottom: 0; background: var(--chip-fill, var(--bg, #fff)); box-shadow: calc(1px * var(--k, 1)) 0 0 rgba(0, 0, 0, .4); z-index: 0; }
.nfig .nfp-tall > .nfp-val { font-size: calc(13px * var(--k, 1)); line-height: 1.2; padding-top: calc(2px * var(--k, 1)); white-space: nowrap; }
.nfig .nfp-r2c .fig-chip.nfp-key { line-height: 1.15; padding-top: 0; padding-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .nfig, .nfig * { transition: none !important; animation: none !important; }
}

/* ------------------------------------------------------------------------------------------ 3. SAGE figures
   Built from the same vocabulary. The palette is pinks, purples and blues only: the Setter is pink, the Opponent blue,
   the Verifier purple. */
.nfig { --setter: var(--pmc); --setter-fill: var(--pmc-fill); --opp: var(--geo); --opp-fill: var(--geo-fill); --ver: var(--alg); --ver-fill: var(--alg-fill); --ok: #2f3f9e; --ok-fill: #d6ddf3; --bad: #b0306a; --bad-fill: #f8dae9; }
.nfig .sg-flow { display: grid; grid-template-columns: minmax(0, 1.3fr) auto minmax(0, 1fr) auto minmax(0, 1.15fr); align-items: stretch; }
.nfig .sg-flow.sg-narrow { grid-template-columns: minmax(0, 1fr); row-gap: calc(4px * var(--k, 1)); }
.nfig .sg-arrow { display: flex; align-items: center; justify-content: center; min-width: calc(30px * var(--k, 1)); min-height: calc(26px * var(--k, 1)); }
.nfig .sg-narrow .sg-arrow svg { transform: rotate(90deg); }
.nfig .sg-pane { display: flex; flex-direction: column; min-width: 0; border: calc(1px * var(--k, 1)) solid var(--cb, var(--fg, #000)); background: var(--bg, #fff); }
.nfig .sg-head { display: flex; align-items: baseline; justify-content: space-between; gap: calc(8px * var(--k, 1)); padding: calc(6px * var(--k, 1)) calc(10px * var(--k, 1)); border-bottom: calc(1px * var(--k, 1)) solid var(--cb, var(--fg, #000)); background: var(--cf, var(--bg, #fff)); }
.nfig .sg-head > b { font-size: var(--fig-value); font-weight: 400; text-decoration: underline dotted; text-decoration-thickness: calc(1px * var(--k, 1)); text-underline-offset: calc(4px * var(--k, 1)); }
.nfig .sg-head > span { font-size: var(--fig-sm); white-space: nowrap; }
.nfig .sg-body { display: flex; flex-direction: column; gap: calc(9px * var(--k, 1)); padding: calc(10px * var(--k, 1)); flex: 1 1 auto; min-width: 0; }
.nfig .sg-note { font-size: var(--fig-sm); line-height: 1.45; }
.nfig .sg-code { margin: 0; padding: calc(8px * var(--k, 1)); border: calc(1px * var(--k, 1)) solid var(--fg, #000); background: #f5f5f5; font-family: var(--figure-font); font-size: var(--fig-sm); line-height: 1.5; white-space: pre; overflow-x: auto; }
.nfig .sg-code .k { color: var(--alg, #6E55A6); font-weight: 600; }
.nfig .sg-code .s { color: #c2407f; }
.nfig .sg-prob { padding: calc(8px * var(--k, 1)); border: calc(1px * var(--k, 1)) solid var(--fg, #000); background: #f5f5f5; font-size: var(--fig-ctl); line-height: 1.5; }
.nfig .sg-kv { display: flex; flex-wrap: wrap; align-items: center; gap: calc(4px * var(--k, 1)) calc(8px * var(--k, 1)); font-size: var(--fig-ctl); }
.nfig .sg-ok { font-style: italic; font-weight: 600; color: var(--ok, #166534); white-space: nowrap; }
.nfig .sg-bad { font-style: italic; font-weight: 600; color: var(--bad, #991b1b); white-space: nowrap; }
.nfig .sg-rewards { display: grid; gap: 0; border-top: calc(1px * var(--k, 1)) solid var(--fg, #000); margin-top: auto; }
.nfig .sg-rewards > div { display: flex; justify-content: space-between; gap: calc(10px * var(--k, 1)); padding: calc(3px * var(--k, 1)) calc(6px * var(--k, 1)); border-bottom: calc(1px * var(--k, 1)) solid var(--line, #d4d4d4); font-size: var(--fig-sm); }
.nfig .sg-rewards > div > b { font-weight: 600; font-variant-numeric: tabular-nums; }
.nfig .sg-rewards > div.sg-on { background: var(--setter-fill); box-shadow: inset 0 0 0 calc(1px * var(--k, 1)) var(--setter); font-weight: 600; }
.nfig .sg-update { font-size: var(--fig-sm); text-align: right; }

/* the reward matrix */
.nfig .sg-mx { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: calc(24px * var(--k, 1)); align-items: center; }
.nfig .sg-mx.sg-narrow { grid-template-columns: minmax(0, 1fr); gap: calc(16px * var(--k, 1)); }
.nfig .sg-grid { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); gap: calc(9px * var(--k, 1)); align-items: stretch; }
.nfig .sg-grid .sg-ch, .nfig .sg-grid .sg-rh { display: flex; align-items: center; justify-content: center; font-size: var(--fig-sm); line-height: 1.3; text-align: center; padding: calc(2px * var(--k, 1)) calc(4px * var(--k, 1)); }
.nfig .sg-grid .sg-rh { justify-content: flex-end; text-align: right; max-width: 6.5em; }
.nfig button.sg-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(4px * var(--k, 1)); min-height: calc(74px * var(--k, 1)); padding: calc(8px * var(--k, 1)) calc(6px * var(--k, 1)); background: var(--cf, var(--bg, #fff)); border: calc(1px * var(--k, 1)) solid var(--cb, var(--fg, #000)); }
.nfig button.sg-cell[aria-pressed="true"] { background: var(--cf, var(--bg, #fff)); box-shadow: calc(3px * var(--k, 1)) calc(3px * var(--k, 1)) 0 var(--cb, var(--fg, #000)); }
.nfig button.sg-cell > b { font-size: calc(22px * var(--k, 1)); font-weight: 400; font-variant-numeric: tabular-nums; line-height: 1; }
.nfig button.sg-cell > span { font-size: var(--fig-sm); }
.nfig .sg-read { display: flex; flex-direction: column; gap: calc(10px * var(--k, 1)); }
.nfig .sg-read > p { font-family: var(--serif, Georgia, serif); font-size: calc(16px * var(--k, 1)); line-height: 1.5; min-height: 4.5em; }
.nfig .sg-side { display: grid; gap: 0; border-top: calc(1px * var(--k, 1)) solid var(--fg, #000); }
.nfig .sg-side > div { display: flex; justify-content: space-between; gap: calc(10px * var(--k, 1)); padding: calc(4px * var(--k, 1)) 0; border-bottom: calc(1px * var(--k, 1)) solid var(--line, #d4d4d4); font-size: var(--fig-ctl); }
.nfig .sg-side > div > b { font-weight: 600; }

/* the two games, one above the other */
.nfig .sg-game + .sg-game { margin-top: calc(18px * var(--k, 1)); padding-top: calc(18px * var(--k, 1)); border-top: calc(1px * var(--k, 1)) dashed var(--fg, #000); }
.nfig .sg-game > h4 { display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(4px * var(--k, 1)) calc(12px * var(--k, 1)); margin: 0 0 calc(10px * var(--k, 1)); font-size: var(--fig-label); font-weight: 600; }
.nfig .sg-game > h4 > span { font-size: var(--fig-sm); font-weight: 400; }
.nfig .sg-out { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: calc(6px * var(--k, 1)) calc(10px * var(--k, 1)); margin-top: calc(10px * var(--k, 1)); font-size: var(--fig-ctl); }
.nfig .sg-out > b { font-size: var(--fig-head); font-weight: 400; font-variant-numeric: tabular-nums; }
.nfig .sg-json { margin: 0; padding: calc(8px * var(--k, 1)); border: calc(1px * var(--k, 1)) solid var(--ver); background: var(--ver-fill); font-family: var(--figure-font); font-size: var(--fig-sm); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }

/* plots */
.nfig .sg-ctl { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: calc(8px * var(--k, 1)) calc(18px * var(--k, 1)); margin: 0 0 calc(12px * var(--k, 1)); }
.nfig .sg-ctl > label { display: inline-flex; align-items: center; gap: calc(8px * var(--k, 1)); font-size: var(--fig-sm); }
.nfig .sg-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(18px * var(--k, 1)) calc(24px * var(--k, 1)); }
.nfig .sg-panels.sg-narrow { grid-template-columns: minmax(0, 1fr); }
.nfig .sg-panel > .fig-title { font-size: var(--fig-value); margin-bottom: calc(8px * var(--k, 1)); }
.nfig .sg-plot { position: relative; }
.nfig .sg-plot > .fig-dots { position: absolute; }
.nfig .sg-plot > svg { position: relative; display: block; overflow: visible; }
.nfig .sg-legend { justify-content: center; margin: 0 0 calc(12px * var(--k, 1)); }
.nfig .sg-legend > span { cursor: default; transition: opacity 180ms ease; }
.nfig .sg-legend.sg-dimming > span:not(.sg-hot) { opacity: .3; }
.nfig .sg-series { transition: opacity 180ms ease; }
.nfig .sg-dimming .sg-series:not(.sg-hot) { opacity: .15; }

/* problem cards */
.nfig .sg-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(16px * var(--k, 1)); align-items: start; }
.nfig .sg-cards.sg-narrow { grid-template-columns: minmax(0, 1fr); }
.nfig .sg-tex { padding: calc(10px * var(--k, 1)) calc(4px * var(--k, 1)); text-align: center; overflow-x: auto; overflow-y: hidden; font-size: calc(15px * var(--k, 1)); }
.nfig .sg-tex .katex { font-size: 1.15em; line-height: 1.2; }
.nfig .sg-foot { padding-top: calc(8px * var(--k, 1)); border-top: calc(1px * var(--k, 1)) solid var(--line, #d4d4d4); font-family: var(--serif, Georgia, serif); font-style: italic; font-size: calc(14px * var(--k, 1)); line-height: 1.4; }

/* opening figure on its stage */
.nfig .sg-stage .sg-code { width: calc(272px * var(--k, 1)); overflow: hidden; padding: calc(7px * var(--k, 1)) calc(8px * var(--k, 1)); background: #f5f5f5; }
.nfig .sg-player { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(2px * var(--k, 1)); width: calc(150px * var(--k, 1)); height: calc(50px * var(--k, 1)); border: calc(1px * var(--k, 1)) solid var(--cb, #000); background: var(--cf, #fff); }
.nfig .sg-player > b { font-size: var(--fig-label); font-weight: 600; }
.nfig .sg-player > span { font-size: var(--fig-sm); white-space: nowrap; }
.nfig .sg-player.nft-glow { --glow: rgba(214, 92, 154, .5); }
.nfig .sg-verifier { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(5px * var(--k, 1)); width: calc(132px * var(--k, 1)); height: calc(64px * var(--k, 1)); border: calc(1px * var(--k, 1)) solid var(--ver); background: var(--ver-fill); box-shadow: 0 0 calc(14px * var(--k, 1)) calc(4px * var(--k, 1)) rgba(110, 85, 166, .4); }
.nfig .sg-verifier > b { font-size: var(--fig-label); font-weight: 600; }
.nfig .sg-verifier > span { display: inline-flex; align-items: center; gap: calc(4px * var(--k, 1)); font-size: var(--fig-sm); white-space: nowrap; }
.nfig .sg-stage .sg-ok, .nfig .sg-stage .sg-bad { font-size: var(--fig-value); font-style: normal; }
.nfig .sg-claims { width: calc(238px * var(--k, 1)); gap: calc(9px * var(--k, 1)); }
.nfig .sg-claims .nft-block { white-space: nowrap; }
.nfig .sg-big { display: flex; align-items: baseline; gap: calc(8px * var(--k, 1)); }
.nfig .sg-big > b { font-size: var(--fig-head); font-weight: 400; line-height: 1.1; }
.nfig .sg-step { display: flex; align-items: center; gap: calc(6px * var(--k, 1)); }
.nfig .sg-step .fig-chip { font-size: var(--fig-xs); background: var(--bg, #fff); }
.nfig .sg-meter { display: grid; grid-template-columns: calc(34px * var(--k, 1)) minmax(0, 1fr) calc(50px * var(--k, 1)); align-items: center; column-gap: calc(6px * var(--k, 1)); }
.nfig .sg-meter > span:last-child { text-align: right; }
.nfig .sg-meter .nfig-track { height: calc(8px * var(--k, 1)); }

/* inside a minimum-font-size wrapper the page's own chip and button rules are in plain px: scale them too */
html.nfig-zoom .nfig-in .fig-chip { padding: calc(1px * var(--k, 1)) calc(4px * var(--k, 1)); border-width: calc(1px * var(--k, 1)); }
html.nfig-zoom .nfig-in button { padding: calc(2px * var(--k, 1)) calc(7px * var(--k, 1)); border-width: calc(1px * var(--k, 1)); }
html.nfig-zoom .nfig-in .fig-seg > button + button { margin-left: calc(-1px * var(--k, 1)); }
html.nfig-zoom .nfig-in .fig-swatch { width: calc(9px * var(--k, 1)); height: calc(9px * var(--k, 1)); margin-right: calc(5px * var(--k, 1)); }
html.nfig-zoom .nfig-in .fig-swatch.line { width: calc(12px * var(--k, 1)); height: calc(2px * var(--k, 1)); }
html.nfig-zoom .nfig-in .fig-legend { gap: calc(6px * var(--k, 1)) calc(18px * var(--k, 1)); }


/* ------------------------------------------------------------------------------------ 4. flawed-thinking figures
   A different palette from the other posts: teal (the mixed model, and what is right), olive (clean), amber
   (calculation errors), coral (reasoning errors, and what is wrong). */
.nfig { --ok: #116a6e; --ok-fill: #c9f4f6; --bad: #c94f4f; --bad-fill: #fbdcdc; }
.nfig .tone-base { --c: #8e8e86; --chip-border: #8e8e86; --chip-fill: #ebebe6; }
.nfig .tone-clean { --c: #a86fce; --chip-border: #a86fce; --chip-fill: #f1e0f8; }
.nfig .tone-calc { --c: #c4b02c; --chip-border: #c4b02c; --chip-fill: #f7f0bd; }
.nfig .tone-reas { --c: #e06c6c; --chip-border: #e06c6c; --chip-fill: #fbdcdc; }
.nfig .tone-mix { --c: #17888d; --chip-border: #17888d; --chip-fill: #c9f4f6; }
.nfig .sg-player.nft-glow { --glow: rgba(136, 231, 235, .95); }
.nfig .ft-err { font-weight: 700; color: var(--bad); }
.nfig .ft-prefill { padding: calc(7px * var(--k, 1)) calc(8px * var(--k, 1)); border: calc(1px * var(--k, 1)) dashed #c4b02c; background: #f7f0bd; font-size: var(--fig-sm); line-height: 1.5; }
.nfig .ft-cont { padding: calc(7px * var(--k, 1)) calc(8px * var(--k, 1)); border: calc(1px * var(--k, 1)) solid #17888d; background: #fff; font-size: var(--fig-sm); line-height: 1.5; }
.nfig .ft-box { width: calc(256px * var(--k, 1)); white-space: normal; }
.nfig .ft-cont.ft-box { width: calc(300px * var(--k, 1)); }
.nfig .ft-tag { display: block; margin-bottom: calc(2px * var(--k, 1)); font-size: var(--fig-xs); font-weight: 600; letter-spacing: .02em; }
.nfig .ft-kinds { display: flex; gap: calc(6px * var(--k, 1)); }
.nfig .ft-kinds .fig-chip { font-size: var(--fig-xs); }
.nfig .sg-stage .nft-bubble { background: #f5f5f5; }
.nfig .sg-claims .sg-meter { grid-template-columns: calc(56px * var(--k, 1)) minmax(0, 1fr) calc(34px * var(--k, 1)); }
.nfig .sg-flow .sg-meter { grid-template-columns: calc(62px * var(--k, 1)) minmax(0, 1fr) calc(36px * var(--k, 1)); font-size: var(--fig-sm); }

/* steps of a solution */
.nfig .ft-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(10px * var(--k, 1)); align-items: stretch; }
.nfig .ft-steps.sg-narrow { grid-template-columns: minmax(0, 1fr); }
.nfig .ft-steps .sg-body { gap: calc(5px * var(--k, 1)); }
.nfig .ft-steptitle { font-size: var(--fig-chip); font-weight: 600; margin-bottom: calc(3px * var(--k, 1)); }
.nfig .ft-math { font-size: var(--fig-ctl); line-height: 1.45; }
.nfig .ft-errline { font-weight: 700; color: var(--bad); }
.nfig .ft-fixline { font-weight: 700; color: var(--ok); }

/* training sets as mixture bars */
.nfig .ft-sets { margin-top: calc(18px * var(--k, 1)); padding-top: calc(16px * var(--k, 1)); border-top: calc(1px * var(--k, 1)) dashed var(--fg, #000); display: grid; gap: calc(7px * var(--k, 1)); }
.nfig .ft-setshead { font-size: var(--fig-label); font-weight: 600; margin-bottom: calc(3px * var(--k, 1)); }
.nfig .ft-set { display: grid; grid-template-columns: calc(104px * var(--k, 1)) minmax(0, 1fr); align-items: center; column-gap: calc(10px * var(--k, 1)); font-size: var(--fig-ctl); }
.nfig .ft-mixbar { display: flex; height: calc(24px * var(--k, 1)); }
.nfig .ft-mixbar > i { display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden; white-space: nowrap; font-style: normal; font-size: var(--fig-sm); border: calc(1px * var(--k, 1)) solid #000; }
.nfig .ft-mixbar > i + i { border-left: 0; }

/* the prompt as a conversation */
.nfig .ft-chat { display: grid; gap: calc(8px * var(--k, 1)); max-width: calc(720px * var(--k, 1)); margin: 0 auto; }
.nfig .ft-turn { display: grid; grid-template-columns: calc(150px * var(--k, 1)) minmax(0, 1fr); column-gap: calc(12px * var(--k, 1)); align-items: start; }
.nfig .ft-who { padding-top: calc(7px * var(--k, 1)); font-size: var(--fig-sm); font-weight: 600; text-align: right; }
.nfig .ft-say { padding: calc(7px * var(--k, 1)) calc(10px * var(--k, 1)); border: calc(1px * var(--k, 1)) solid var(--fg, #000); background: #fff; font-size: var(--fig-chip); line-height: 1.5; display: grid; gap: calc(5px * var(--k, 1)); }
.nfig .ft-sys .ft-say { background: #f5f5f5; }
.nfig .ft-pre .ft-say { border-style: dashed; }
.nfig .ft-precalc .ft-say { border-color: #c4b02c; background: #f7f0bd; }
.nfig .ft-prereas .ft-say { border-color: #e06c6c; background: #fbdcdc; }
.nfig .ft-model .ft-say { border-color: #17888d; box-shadow: calc(3px * var(--k, 1)) calc(3px * var(--k, 1)) 0 #17888d; }
@media (max-width: 640px) {
  .nfig .ft-turn { grid-template-columns: minmax(0, 1fr); row-gap: calc(2px * var(--k, 1)); }
  .nfig .ft-who { text-align: left; padding-top: 0; }
}

/* Perturbed-Math-100 */
.nfig .ft-levels { display: grid; gap: calc(7px * var(--k, 1)); align-content: start; }
.nfig .ft-level { display: grid; grid-template-columns: calc(56px * var(--k, 1)) minmax(0, 1fr) calc(22px * var(--k, 1)); align-items: center; column-gap: calc(8px * var(--k, 1)); font-size: var(--fig-ctl); }
.nfig .ft-level > span:last-child { text-align: right; }
.nfig .ft-lvbar { display: flex; height: calc(22px * var(--k, 1)); }
.nfig .ft-lvbar > i { display: flex; align-items: center; justify-content: center; font-style: normal; font-size: var(--fig-sm); border: calc(1px * var(--k, 1)) solid #000; }
.nfig .ft-lvbar > i + i { border-left: 0; }

/* free-form opening figure: no frames around the three groups, soft corners, slight tilts (set in the script) */
.nfig .sg-free .sg-player { border-radius: calc(26px * var(--k, 1)); }
.nfig .sg-free .nft-ghost { border-radius: calc(17px * var(--k, 1)); }
.nfig .sg-free .nft-bubble, .nfig .sg-free .ft-box, .nfig .sg-free .sg-code, .nfig .sg-free .nft-block { border-radius: calc(12px * var(--k, 1)); }
.nfig .sg-free .sg-verifier { border-radius: calc(20px * var(--k, 1)); }