/* /benchmark charts (viz.js). Chart roles are tokens; both dark blocks must stay identical.
   Sequential scale: one rust hue (the accent's), five OKLCH steps light→dark (dark mode: dark→light),
   generated and checked with the dataviz validator (monotone L, ΔL ≥ 0.06, single hue). Example data uses
   the same steps at near-zero chroma plus a 45° hatch, so a preview never looks like a measurement. */
.vz {
  --vz-fair: var(--accent);
  --vz-legacy: var(--faint);
  --vz-zero-wash: color-mix(in srgb, var(--accent) 7%, transparent);
  --vz-s0: #f8e3dc; --vz-s1: #ebae9b; --vz-s2: #d27d63; --vz-s3: #ac5337; --vz-s4: #812f13;
  --vz-i0: #111214; --vz-i1: #111214; --vz-i2: #111214; --vz-i3: #ffffff; --vz-i4: #ffffff;
  --vz-m0: #f4efed; --vz-m1: #dfdad8; --vz-m2: #cac5c4; --vz-m3: #b6b1af; --vz-m4: #a29d9c; --vz-mi: #111214;
  --vz-hatch: rgba(17, 18, 20, .10);
  --vz-insuff: var(--surface-2);
  display: block; min-width: 0; margin: 0;  /* spacing belongs to the page: viz.css loads late, a margin here shifts layout */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .vz {
    --vz-s0: #3b2923; --vz-s1: #723e2e; --vz-s2: #a75840; --vz-s3: #d47b60; --vz-s4: #fba58a;
    --vz-i0: #ffffff; --vz-i1: #ffffff; --vz-i2: #ffffff; --vz-i3: #111214; --vz-i4: #111214;
    --vz-m0: #292524; --vz-m1: #393534; --vz-m2: #494544; --vz-m3: #5a5655; --vz-m4: #6c6866; --vz-mi: #ffffff;
    --vz-hatch: rgba(236, 235, 230, .10);
  }
}
:root[data-theme="dark"] .vz {
  --vz-s0: #3b2923; --vz-s1: #723e2e; --vz-s2: #a75840; --vz-s3: #d47b60; --vz-s4: #fba58a;
  --vz-i0: #ffffff; --vz-i1: #ffffff; --vz-i2: #ffffff; --vz-i3: #111214; --vz-i4: #111214;
  --vz-m0: #292524; --vz-m1: #393534; --vz-m2: #494544; --vz-m3: #5a5655; --vz-m4: #6c6866; --vz-mi: #ffffff;
  --vz-hatch: rgba(236, 235, 230, .10);
}

.vz-fig { position: relative; margin: 0; padding: 18px 18px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); min-width: 0; }
.vz-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; margin: 0 0 14px; }
.vz-titles { min-width: 0; flex: 1 1 280px; }
.vz-title { margin: 0; font: 600 1.02rem/1.3 var(--display); color: var(--text); }
.vz-sub { margin: 4px 0 0; max-width: 72ch; font-size: .84rem; color: var(--muted); }
.vz-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vz-chip { font: 500 .62rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 5px 8px; border: 1px solid var(--border-strong); border-radius: 2px; color: var(--muted); background: var(--surface); white-space: nowrap; max-width: 100%; }
/* a long chip (the model-version label) wraps instead of running past a phone's edge */
.vz-chip { overflow-wrap: anywhere; }
@media (max-width: 480px) { .vz-chip { white-space: normal; line-height: 1.3; } }
.vz-chip-warn, .vz-chip-example { color: var(--accent); border-color: var(--warn-border); background: var(--warn-soft); }
.vz-plot { position: relative; min-width: 0; }
.vz-svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.vz-note, .vz-empty { margin: 10px 0 0; font-size: .8rem; color: var(--muted); max-width: 72ch; }
.vz-empty { padding: 28px 0; text-align: center; margin: 0 auto; }

/* text in charts wears text tokens, never the series colour */
.vz-svg text { font: 400 11px var(--mono); fill: var(--muted); }
.vz-svg .vz-rowlab { font: 500 13px var(--font); fill: var(--text); }
.vz-svg .vz-strong { font-weight: 650; }
.vz-svg .vz-val { font: 500 12px var(--mono); fill: var(--text); font-variant-numeric: tabular-nums; }
.vz-svg .vz-val-sub { font: 400 10.5px var(--mono); fill: var(--muted); }
.vz-svg .vz-flag { fill: var(--text); }
.vz-svg .vz-muted { fill: var(--faint); }
.vz-grid { stroke: var(--border); stroke-width: 1; }
.vz-axis, .vz-rule { stroke: var(--border-strong); stroke-width: 1; }
.vz-zero { stroke: var(--text); stroke-width: 1; }
.vz-zero-band { fill: var(--vz-zero-wash); }
.vz-placeholder { stroke: var(--border); stroke-width: 2; stroke-linecap: round; }
.vz-withheld rect { fill: var(--surface); stroke: var(--warn-border); }
.vz-svg .vz-withheld text { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; fill: var(--accent); }

/* marks: 2px whiskers with end caps, ≥8px dots with a 2px surface ring; legacy hollow, fair solid */
.vz-ci { stroke-width: 2; stroke-linecap: round; }
.vz-ci.vz-fair { stroke: var(--vz-fair); }
.vz-ci.vz-legacy { stroke: var(--vz-legacy); }
.vz-ci.vz-ci-zero { stroke-opacity: .55; }
.vz-dot { stroke: var(--surface); stroke-width: 2; paint-order: stroke; }
.vz-dot.vz-fair { fill: var(--vz-fair); }
.vz-dot.vz-legacy { fill: var(--surface); stroke: var(--vz-legacy); stroke-width: 2; }
.vz-band { fill: color-mix(in srgb, var(--vz-fair) 12%, transparent); }
.vz-trend { fill: none; stroke: var(--vz-fair); stroke-width: 1; stroke-opacity: .45; }
.vz-mean { stroke: var(--text); stroke-width: 2; stroke-linecap: round; }

.vz-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 10px; font: 400 .7rem var(--mono); color: var(--muted); }
.vz-key span { display: inline-flex; align-items: center; gap: 6px; }
.vz-key i { display: inline-block; flex: none; }
.vz-k-fair { width: 10px; height: 10px; border-radius: 50%; background: var(--vz-fair); }
.vz-k-legacy { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--vz-legacy); }
.vz-k-ci { width: 18px; height: 2px; background: var(--muted); }
.vz-k-zero { width: 18px; height: 10px; background: var(--vz-zero-wash); border-radius: 2px; }

/* hit targets: real buttons over the marks, larger than the marks */
.vz-hit { position: absolute; padding: 0; margin: 0; border: 0; border-radius: 4px; background: transparent; cursor: default; }
.vz-hit:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.vz-hit:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.vz-tip { position: absolute; z-index: 5; pointer-events: none; display: grid; gap: 2px; padding: 7px 9px; max-width: 260px; border: 1px solid var(--border-strong); border-radius: 2px; background: var(--surface); box-shadow: 0 4px 14px rgba(0,0,0,.12); font: 400 .7rem/1.35 var(--mono); color: var(--muted); }
.vz-tip[hidden] { display: none; }
.vz-tip .vz-tip-v { font: 600 .9rem var(--font); color: var(--text); }
.vz-tip .vz-tip-l { color: var(--muted); }

/* flow diagram */
.vz-node rect { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1; }
.vz-node-strong rect { fill: var(--surface-2); stroke: var(--text); }
.vz-node-ghost rect { fill: transparent; stroke: var(--border-strong); stroke-dasharray: 3 3; }
.vz-svg .vz-node-t { font: 600 12.5px var(--font); fill: var(--text); }
.vz-svg .vz-node-s { font: 400 10.5px var(--mono); fill: var(--muted); }
.vz-group { fill: none; stroke: var(--border); stroke-width: 1; }
.vz-svg .vz-group-l { font: 400 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; fill: var(--faint); }
.vz-edge { fill: none; stroke: var(--border-strong); stroke-width: 1.25; }
.vz-arrowhead { fill: var(--border-strong); }
.vz-flow .vz-edge, .vz-flow .vz-node { transition: opacity .18s var(--ease), stroke .18s var(--ease); }
.vz-path-on .vz-edge:not(.lit) { opacity: .18; }
.vz-path-on .vz-node:not(.lit) { opacity: .35; }
.vz-edge.lit { stroke: var(--accent); stroke-width: 1.75; }
.vz-arrowhead-lit { fill: var(--accent); }
.vz-node.lit rect { stroke: var(--accent); }
.vz-node-new { animation: vz-node-in .32s var(--ease) both; }
@keyframes vz-node-in { from { opacity: 0; transform: translateY(-6px); } }
/* buttons over the diagram's boxes: the box is the hit target */
.vz-node-btn { position: absolute; z-index: 2; padding: 0; margin: 0; border: 0; border-radius: 2px; background: transparent; cursor: pointer; }
.vz-node-btn:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.vz-node-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vz-node-btn[aria-expanded="true"] { box-shadow: inset 0 0 0 2px var(--accent); }

/* detail cards: a hover/focus preview, or a pinned non-modal dialog */
.vz-card { position: absolute; z-index: 6; width: min(340px, calc(100% - 4px)); max-height: min(70vh, 520px); overflow: auto; padding: 14px 16px; border: 1px solid var(--border-strong); border-radius: 2px; background: var(--surface); color: var(--text); box-shadow: 0 10px 30px rgba(0,0,0,.14); font-size: .84rem; line-height: 1.45; text-align: left; }
.vz-card[hidden] { display: none; }
/* a preview never blocks the diagram under it; links become reachable once the card is pinned */
.vz-card:not(.is-pinned) { pointer-events: none; }
.vz-card.is-pinned { border-color: var(--text); }
.vz-card:focus { outline: none; }
.vz-card-hd { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 8px; }
.vz-card-t { flex: 1; min-width: 0; margin: 0; font: 600 .95rem/1.3 var(--display); }
.vz-card-x { flex: none; width: 32px; height: 32px; margin: -6px -8px 0 0; border: 1px solid var(--border-strong); border-radius: 2px; background: var(--surface); color: var(--text); font: 400 1.1rem/1 var(--font); cursor: pointer; }
.vz-card-x:focus-visible, .vz-card-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vz-card-pics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 10px; }
.vz-card-pic { margin: 0; padding: 6px; border: 1px solid var(--border); border-radius: 2px; background: var(--tile); text-align: center; }
.vz-card-pic img { display: block; width: 100%; height: 96px; object-fit: contain; }
.vz-card-pic figcaption { margin-top: 4px; font: 400 .64rem/1.3 var(--mono); color: #3b3d42; }
.vz-card-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; margin: 0 0 10px; }
.vz-card-facts dt { font: 400 .6rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.vz-card-facts dd { margin: 1px 0 0; font-size: .82rem; }
.vz-card-p { margin: 0 0 10px; color: var(--muted); }
.vz-card-k { margin: 8px 0 4px; font: 500 .62rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.vz-card-list { margin: 0 0 6px; padding-left: 1.1em; }
.vz-card-list li { margin: 2px 0; }
.vz-card-sub { color: var(--muted); font-size: .76rem; }
.vz-card-hint { margin: 6px 0 0; font: 400 .7rem var(--mono); color: var(--muted); }
.vz-card-code { display: block; margin: 0 0 8px; padding: 8px 10px; border-left: 2px solid var(--accent); background: var(--surface-2); font: 400 .74rem/1.45 var(--mono); white-space: normal; }
.vz-card-tasks { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.vz-card-tasks li { display: flex; align-items: center; gap: 10px; }
.vz-card-tasks img { flex: none; width: 52px; height: 52px; object-fit: cover; border-radius: 2px; border: 1px solid var(--border); }
.vz-card-tasks div { display: grid; gap: 1px; min-width: 0; }
.vz-card-tasks strong { font-weight: 600; font-size: .84rem; }
.vz-card-links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 0; }
.vz-card-link { color: var(--accent); font: 500 .76rem var(--mono); text-decoration: underline; text-underline-offset: 2px; }
.vz-card-tasks .vz-card-link { font-size: .68rem; }
.vz-card-list .vz-card-link { font: 500 .84rem var(--font); }  /* π₀ subscripts are unreadable in the mono face */
.vz-card-cta { padding: 7px 10px; border: 1px solid var(--accent); border-radius: 2px; text-decoration: none; }
/* ≤640px: a pinned card is a bottom sheet */
.vz-sheet { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 72vh; z-index: 1001; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); border-width: 1px 0 0; box-shadow: 0 -12px 30px rgba(0,0,0,.2); }
.vz-sheet-bg { position: fixed; inset: 0; z-index: 1000; border: 0; padding: 0; background: rgba(8, 9, 11, .42); cursor: default; }
@media (prefers-reduced-motion: no-preference) {
  .vz-sheet { animation: vz-sheet-in .24s var(--ease) both; }
  @keyframes vz-sheet-in { from { transform: translateY(24px); opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) {
  .vz-flow .vz-edge, .vz-flow .vz-node { transition: none; }
  .vz-node-new { animation: none; }
}

/* matrix: an HTML table so every cell is a real, focusable button */
.vz-mx-scroll { overflow-x: auto; overscroll-behavior-x: contain; container-type: inline-size; }
.vz-mx-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vz-mx { width: 100%; border-collapse: separate; border-spacing: 2px; table-layout: fixed; min-width: 330px; }
.vz-mx th, .vz-mx td { padding: 0; text-align: center; vertical-align: middle; }
.vz-mx thead th { font: 500 .7rem/1.25 var(--mono); color: var(--text); padding: 4px 2px 8px; overflow-wrap: anywhere; }
.vz-mx .vz-mx-corner { text-align: left; color: var(--muted); font-weight: 400; width: 34%; }
.vz-mx tbody th, .vz-mx tfoot th { text-align: left; padding: 4px 8px 4px 0; }
.vz-mx-arm { display: block; font: 500 .78rem/1.2 var(--font); color: var(--text); }
.vz-mx-hand { display: block; font: 400 .66rem/1.2 var(--mono); color: var(--muted); }
.vz-mx tfoot th, .vz-mx tfoot td { border-top: 1px solid var(--border-strong); padding-top: 8px; }
.vz-mx-na span { color: var(--faint); font: 400 .8rem var(--mono); }
.vz-cell { display: grid; place-content: center; gap: 1px; width: 100%; min-height: 54px; padding: 6px 2px; border: 0; border-radius: 2px; cursor: pointer; font: inherit; color: var(--vz-ink, var(--text)); background: var(--vz-fill, var(--surface-2)); transition: filter .15s var(--ease); }
.vz-cell:hover { filter: brightness(1.06) saturate(1.05); }
.vz-cell:focus-visible, .vz-cell[aria-expanded="true"] { outline: 2px solid var(--text); outline-offset: 1px; }
.vz-cell-v { font: 600 .95rem/1.1 var(--font); }
.vz-cell-n, .vz-cell-ci { font: 400 .6rem/1.2 var(--mono); opacity: .82; font-variant-numeric: tabular-nums; }
.vz-s0 { --vz-fill: var(--vz-s0); --vz-ink: var(--vz-i0); } .vz-s1 { --vz-fill: var(--vz-s1); --vz-ink: var(--vz-i1); }
.vz-s2 { --vz-fill: var(--vz-s2); --vz-ink: var(--vz-i2); } .vz-s3 { --vz-fill: var(--vz-s3); --vz-ink: var(--vz-i3); }
.vz-s4 { --vz-fill: var(--vz-s4); --vz-ink: var(--vz-i4); }
.vz-cell-ex.vz-s0 { --vz-fill: var(--vz-m0); } .vz-cell-ex.vz-s1 { --vz-fill: var(--vz-m1); } .vz-cell-ex.vz-s2 { --vz-fill: var(--vz-m2); }
.vz-cell-ex.vz-s3 { --vz-fill: var(--vz-m3); } .vz-cell-ex.vz-s4 { --vz-fill: var(--vz-m4); }
.vz-cell-ex { --vz-ink: var(--vz-mi); background-image: repeating-linear-gradient(45deg, var(--vz-hatch) 0 1px, transparent 1px 7px); }
.vz-cell-insuff { --vz-fill: var(--vz-insuff); --vz-ink: var(--muted); background-image: repeating-linear-gradient(135deg, var(--border-strong) 0 1px, transparent 1px 6px); }
.vz-cell-insuff .vz-cell-v { font: 500 .66rem var(--mono); letter-spacing: .04em; }
.vz-short { display: none; }
@container (max-width: 520px) { .vz-cell-ci { display: none; } .vz-cell-v { font-size: .86rem; } .vz-cell-insuff .vz-cell-v { font-size: .62rem; } .vz-mx .vz-mx-corner { width: 30%; } .vz-long { display: none; } .vz-short { display: inline; } }
.vz-sigma { padding: 8px 2px 2px; }
.vz-sigma .vz-cell-v { display: block; font: 600 .9rem var(--font); color: var(--text); }
.vz-sigma .vz-cell-v::after { content: " pp"; font: 400 .62rem var(--mono); color: var(--muted); }
.vz-sigma .vz-cell-v.vz-muted::after { content: ""; }
.vz-sigma .vz-cell-n { display: block; color: var(--muted); }
.vz-muted { color: var(--faint); }

.vz-scale { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 12px 0 0; font: 400 .66rem var(--mono); color: var(--muted); }
.vz-ramp { display: inline-flex; gap: 2px; }
.vz-ramp i, .vz-swatch { display: inline-block; width: 22px; height: 12px; border-radius: 2px; background-color: var(--vz-fill); }
.vz-swatch { margin-left: 10px; }
.vz-ramp i.vz-cell-ex, .vz-swatch.vz-cell-ex { --vz-ink: var(--vz-mi); background-image: repeating-linear-gradient(45deg, var(--vz-hatch) 0 1px, transparent 1px 7px); }

.vz-drill { margin: 14px 0 0; padding: 14px 16px; border: 1px solid var(--border-strong); border-left: 2px solid var(--accent); border-radius: 2px; background: var(--bg); }
.vz-drill[hidden] { display: none; }
.vz-drill-hd { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.vz-drill-t { margin: 0; flex: 1; min-width: 0; font: 600 .95rem var(--display); color: var(--text); }
.vz-drill-x { flex: none; width: 32px; height: 32px; border: 1px solid var(--border-strong); border-radius: 2px; background: var(--surface); color: var(--text); font: 400 1.1rem/1 var(--font); cursor: pointer; }
.vz-drill-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vz-drill-ci { margin: 4px 0 8px; }
.vz-drill-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px 18px; margin: 0; }
.vz-drill-dl dt { font: 400 .62rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.vz-drill-dl dd { margin: 2px 0 0; font-size: .85rem; color: var(--text); overflow-wrap: anywhere; }

/* protocol dial and demos calculator: segmented radio groups over one animated number line */
.vz-seg { display: flex; flex-wrap: wrap; gap: 1px; padding: 1px; background: var(--border-strong); border-radius: 2px; width: fit-content; max-width: 100%; }
.vz-seg-b { display: grid; gap: 1px; min-height: 40px; padding: 8px 12px; border: 0; background: var(--surface); color: var(--muted); font: 500 .78rem/1.25 var(--font); text-align: left; cursor: pointer; }
.vz-seg-b[aria-checked="true"] { background: var(--text); color: var(--bg); }
.vz-seg-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; position: relative; z-index: 1; }
.vz-seg-off:not([aria-checked="true"]) .vz-seg-t { text-decoration: line-through; text-decoration-color: var(--faint); }
.vz-seg-s { font: 400 .62rem var(--mono); opacity: .8; }
.vz-line { margin: 12px 0 0; }
.vz-line .vz-ghost { fill: var(--surface); stroke: var(--vz-legacy); stroke-width: 1.5; }
.vz-svg .vz-mark-l { font: 600 12px var(--mono); fill: var(--text); }
.vz-line-off .vz-mark, .vz-line-off .vz-ghosts { opacity: 0; }
.vz-dial-why { margin: 8px 0 0; max-width: 72ch; font-size: .86rem; color: var(--muted); min-height: 2.6em; }
.vz-dial-why strong { color: var(--text); font-weight: 600; }
.vz-calc-ctl { display: grid; gap: 10px; margin: 0 0 4px; }
.vz-calc-row { display: grid; gap: 4px; }
.vz-calc-k { margin: 0; font: 400 .62rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.vz-calc-out { margin: 8px 0 0; min-height: 7.5em; }
.vz-calc-big { margin: 0; font-size: .86rem; color: var(--muted); }
.vz-calc-big strong { font: 600 1.6rem/1.1 var(--display); color: var(--text); margin-right: 6px; }
.vz-calc-p, .vz-calc-none, .vz-calc-match { margin: 6px 0 0; max-width: 72ch; font-size: .86rem; color: var(--muted); }
.vz-calc-none { color: var(--text); font-weight: 600; }
.vz-calc-match { padding: 8px 10px; border-left: 2px solid var(--accent); background: var(--surface-2); color: var(--text); }
.vz-lbl-short { display: none; }
.vz-flag-p { color: var(--text); }
@media (max-width: 640px) {
  .vz-seg { width: 100%; } .vz-seg-b { flex: 1 1 auto; }
  /* calculator on a phone: one-line scrolling selectors, a shorter axis, context sentence dropped */
  .vz-calc-ctl { gap: 6px; }
  .vz-calc-k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .vz-calc-ctl .vz-seg { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .vz-calc-ctl .vz-seg::-webkit-scrollbar { display: none; }
  .vz-calc-ctl .vz-seg.vz-more-right { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); }
  .vz-calc-ctl .vz-seg-b { flex: 1 0 auto; min-height: 36px; padding: 7px 10px; white-space: nowrap; }
  .vz-calc-ctl .vz-lbl-long { display: none; } .vz-calc-ctl .vz-lbl-short { display: inline; }
  .vz-calc-ctx { display: none; }
  .vz-calc-out { min-height: 0; margin-top: 4px; }
  .vz-calc-big strong { font-size: 1.3rem; }
  .vz-calc-match { padding: 6px 8px; font-size: .8rem; }
  .vz-calc-note { margin-top: 6px; font-size: .7rem; line-height: 1.4; }
}

/* screen-reader data tables */
.vz-sr, .vz-sr-cap { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* inside the page's .viz-frame figure, which already draws the border */
.vz-fig-bare { padding: 0; border: 0; background: none; }
@media (max-width: 640px) {
  .vz-fig { padding: 14px 12px 12px; }
  .vz-fig-bare { padding: 0; }
  .vz-wide-only { display: none; }
  .vz-head { margin-bottom: 10px; }
}
@media (prefers-reduced-motion: no-preference) {
  .vz-svg { animation: vz-in .35s var(--ease) both; }
  @keyframes vz-in { from { opacity: 0; } to { opacity: 1; } }
}
@media (forced-colors: active) {
  .vz-cell { border: 1px solid CanvasText; }
  .vz-dot.vz-fair { fill: CanvasText; }
}