/* ==========================================================================
   viz-kit.css · Graphite Mono figures for technical writeups
   Monochrome by design: identity is carried by lightness, dash, and labels,
   never hue. Load DM Sans + DM Mono (see VIZ-KIT.md) before this file.
   ========================================================================== */

:root {
  --vk-bg: #0a0a0a;
  --vk-card: #141414;
  --vk-raised: #1c1c1c;
  --vk-border: #262626;
  --vk-border-strong: #3a3a3a;
  --vk-fg: #fafafa;
  --vk-fg-2: #d4d4d4;
  --vk-muted: #a3a3a3;
  --vk-faint: #8a8a8a;
  --vk-primary: #e5e5e5;      /* the "after", the highlighted series, the active path */
  --vk-secondary: #737373;    /* the "before", the comparison series */
  --vk-grid: #1f1f1f;
  --vk-radius: 16px;
  --vk-radius-sm: 10px;
  --vk-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --vk-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- Figure frame: every visual sits in one ---------- */
.vk-fig {
  margin: 0;
  background: var(--vk-card);
  border: 1px solid var(--vk-border);
  border-radius: var(--vk-radius);
  padding: 24px;
  color: var(--vk-fg);
  font-family: var(--vk-sans);
  font-size: 14px;
  line-height: 1.5;
  box-sizing: border-box;
}
.vk-fig *, .vk-fig *::before, .vk-fig *::after { box-sizing: border-box; }
.vk-fig > header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 20px; }
.vk-title { margin: 0; font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }
.vk-sub { margin: 2px 0 0; font-size: 13.5px; color: var(--vk-muted); }
.vk-fig > figcaption {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--vk-border);
  display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--vk-faint);
}
.vk-fig > figcaption b { color: var(--vk-muted); font-weight: 500; }

/* Legend (any figure with 2+ series) */
.vk-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--vk-muted); }
.vk-legend span { display: inline-flex; align-items: center; gap: 7px; }
.vk-key { width: 14px; height: 4px; border-radius: 2px; background: var(--vk-primary); }
.vk-key.is-2 { background: var(--vk-secondary); }
.vk-key.is-dash { background: repeating-linear-gradient(90deg, var(--vk-primary) 0 4px, transparent 4px 7px); }

/* Badges & mono labels */
.vk-badge { display: inline-flex; align-items: center; border: 1px solid var(--vk-border); border-radius: 999px; padding: 2px 9px; font-size: 12px; font-weight: 500; color: var(--vk-fg-2); white-space: nowrap; }
.vk-badge.is-solid { background: var(--vk-primary); border-color: var(--vk-primary); color: var(--vk-bg); }
.vk-badge.is-muted { background: var(--vk-border); border-color: var(--vk-border); }
.vk-mono { font-family: var(--vk-mono); font-size: 12px; color: var(--vk-muted); }

/* ---------- 1. Stat tiles ---------- */
.vk-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 12px; }
.vk-stat { background: var(--vk-raised); border: 1px solid var(--vk-border); border-radius: var(--vk-radius-sm); padding: 18px; }
.vk-stat-v { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.vk-stat-k { margin-top: 6px; font-size: 13px; color: var(--vk-muted); line-height: 1.4; }

/* ---------- 2. Pipeline / flow ---------- */
.vk-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 0; counter-reset: vk-step; }
.vk-step { position: relative; padding: 0 20px 4px 0; }
.vk-step::before {
  counter-increment: vk-step; content: counter(vk-step);
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 999px; background: var(--vk-border);
  font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; position: relative; z-index: 1;
}
.vk-step::after { content: ""; position: absolute; top: 14px; left: 28px; right: 0; height: 1px; background: var(--vk-border-strong); }
.vk-step:last-child::after { display: none; }
.vk-step.is-key::before { background: var(--vk-primary); color: var(--vk-bg); }
.vk-step h4 { margin: 14px 0 4px; font-size: 14.5px; font-weight: 600; }
.vk-step p { margin: 0; font-size: 13px; color: var(--vk-muted); line-height: 1.5; }
.vk-step .vk-mono { display: block; margin-top: 8px; }

/* ---------- 3. Layered architecture ---------- */
.vk-arch { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; }
.vk-layer { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.vk-layer-h { font-family: var(--vk-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--vk-faint); padding: 0 2px 4px; }
.vk-zone { border: 1px dashed var(--vk-border-strong); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.vk-zone-h { font-size: 11.5px; color: var(--vk-muted); padding: 0 4px; }
.vk-node { background: var(--vk-raised); border: 1px solid var(--vk-border); border-radius: 10px; padding: 10px 12px; }
.vk-node b { display: block; font-size: 13.5px; font-weight: 600; }
.vk-node span { display: block; font-size: 12px; color: var(--vk-muted); margin-top: 2px; }
.vk-node.is-key { border-color: var(--vk-primary); }
.vk-node.is-ext { background: transparent; border-style: dashed; }
.vk-link { flex: 0 0 36px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; color: var(--vk-faint); }
.vk-link::before { content: ""; width: 100%; height: 1px; background: var(--vk-border-strong); }
.vk-link::after { content: "→"; font-size: 13px; line-height: 1; margin-top: -11px; align-self: flex-end; }
.vk-link small { font-family: var(--vk-mono); font-size: 10px; order: -1; }
@media (max-width: 640px) {
  .vk-arch { flex-direction: column; }
  .vk-link { flex-basis: 28px; }
  .vk-link::before { width: 1px; height: 100%; }
  .vk-link::after { content: "↓"; align-self: center; margin-top: -8px; }
}

/* ---------- 4. Sequence diagram (rendered by viz-kit.js: VizKit.sequence) ---------- */
.vk-seq-wrap { overflow-x: auto; }
.vk-seq { display: grid; min-width: 520px; position: relative; }
.vk-actor { text-align: center; padding: 8px 6px; background: var(--vk-raised); border: 1px solid var(--vk-border); border-radius: 10px; margin: 0 6px 4px; font-size: 13px; font-weight: 600; position: relative; z-index: 1; }
.vk-actor small { display: block; font-weight: 400; color: var(--vk-muted); font-size: 11.5px; }
.vk-lifeline { justify-self: center; width: 1px; background: var(--vk-border); }
.vk-msg { position: relative; z-index: 1; padding: 12px 0 12px; font-size: 12.5px; color: var(--vk-fg-2); text-align: center; line-height: 1.35; }
.vk-msg::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: var(--vk-fg-2); }
.vk-msg::before { position: absolute; bottom: -1px; font-size: 13px; line-height: 1; color: var(--vk-fg-2); }
.vk-msg.is-r::before { content: "▸"; right: -3px; }
.vk-msg.is-l::before { content: "◂"; left: -3px; }
.vk-msg.is-reply { color: var(--vk-muted); }
.vk-msg.is-reply::after { background: repeating-linear-gradient(90deg, var(--vk-muted) 0 4px, transparent 4px 7px); }
.vk-msg.is-reply::before { color: var(--vk-muted); }
.vk-msg.is-note { padding: 8px 10px; margin: 6px 4px; border: 1px dashed var(--vk-border-strong); border-radius: 8px; background: var(--vk-card); color: var(--vk-muted); }
.vk-msg.is-note::after, .vk-msg.is-note::before { display: none; }
.vk-msg .vk-mono { display: block; font-size: 11px; margin-top: 2px; }

/* ---------- 5. Bars (comparison / before–after / ranked) ---------- */
.vk-bars { display: flex; flex-direction: column; gap: 14px; }
.vk-bar { display: grid; grid-template-columns: minmax(0, 180px) minmax(0, 1fr) 72px; gap: 14px; align-items: center; }
.vk-bar-label { font-size: 13px; color: var(--vk-fg-2); }
.vk-bar-track { display: flex; flex-direction: column; gap: 3px; }
.vk-bar-fill { height: 10px; border-radius: 0 4px 4px 0; background: var(--vk-primary); width: var(--v, 0%); min-width: 2px; }
.vk-bar-fill.is-2 { background: var(--vk-secondary); }
.vk-bar-val { font-size: 13px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.vk-bar-val small { display: block; font-weight: 400; color: var(--vk-faint); font-size: 11.5px; }
@media (max-width: 560px) { .vk-bar { grid-template-columns: minmax(0, 1fr) 64px; } .vk-bar-label { grid-column: 1 / -1; } }

/* ---------- 6. Line / area chart (rendered by viz-kit.js) ---------- */
.vk-chart { position: relative; width: 100%; }
.vk-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.vk-chart .vk-axis text { fill: var(--vk-faint); font: 11px var(--vk-sans); font-variant-numeric: tabular-nums; }
.vk-chart .vk-gridline { stroke: var(--vk-grid); stroke-width: 1; }
.vk-chart .vk-baseline { stroke: var(--vk-border-strong); stroke-width: 1; }
.vk-chart .vk-series { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.vk-chart .vk-event line { stroke: var(--vk-muted); stroke-dasharray: 3 4; }
.vk-chart .vk-event text { fill: var(--vk-muted); font: 500 11px var(--vk-sans); }
.vk-chart .vk-cross { stroke: var(--vk-border-strong); }
.vk-tip {
  position: absolute; pointer-events: none; z-index: 5; background: var(--vk-raised); border: 1px solid var(--vk-border-strong);
  border-radius: 8px; padding: 6px 10px; font-size: 12px; color: var(--vk-fg); white-space: nowrap; transform: translate(-50%, calc(-100% - 10px));
  box-shadow: 0 8px 24px -8px rgba(0,0,0,.6); font-variant-numeric: tabular-nums;
}
.vk-tip small { color: var(--vk-muted); display: block; }

/* ---------- 7. Cascade / fallback ladder (cheapest-first, retry gates) ---------- */
.vk-ladder { display: flex; flex-direction: column; gap: 0; }
.vk-rung { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 12px 0; position: relative; }
.vk-rung + .vk-rung { border-top: 1px solid var(--vk-border); }
.vk-rung-n { font-family: var(--vk-mono); font-size: 12px; color: var(--vk-faint); padding-top: 1px; }
.vk-rung b { font-size: 14px; font-weight: 600; }
.vk-rung p { margin: 2px 0 0; font-size: 13px; color: var(--vk-muted); }
.vk-cost { display: inline-flex; gap: 3px; padding-top: 5px; }
.vk-cost i { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--vk-border-strong); }
.vk-cost i.on { background: var(--vk-primary); border-color: var(--vk-primary); }
.vk-exit { margin-top: 10px; display: inline-flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--vk-muted); }
.vk-exit::before { content: "↳"; color: var(--vk-faint); }

/* ---------- 8. Gantt / timeline ---------- */
.vk-gantt { --cols: 12; display: grid; grid-template-columns: minmax(0, 150px) repeat(var(--cols), minmax(0, 1fr)); row-gap: 10px; align-items: center; }
.vk-gantt-scale { display: contents; }
.vk-gantt-scale span { font-family: var(--vk-mono); font-size: 10.5px; color: var(--vk-faint); border-left: 1px solid var(--vk-border); padding: 0 0 6px 5px; }
.vk-gantt-scale span:first-child { border: 0; }
.vk-gantt-label { grid-column: 1; font-size: 13px; color: var(--vk-fg-2); padding-right: 12px; }
.vk-gantt-bar { height: 12px; border-radius: 4px; background: var(--vk-secondary); }
.vk-gantt-bar.is-key { background: var(--vk-primary); }
.vk-gantt-bar.is-milestone { width: 12px; height: 12px; border-radius: 2px; transform: rotate(45deg); justify-self: start; background: var(--vk-primary); }

/* ---------- 9. Code, schema, terminal ---------- */
.vk-code {
  margin: 0; background: var(--vk-bg); border: 1px solid var(--vk-border); border-radius: var(--vk-radius-sm);
  padding: 16px 18px; overflow-x: auto; font: 12.5px/1.7 var(--vk-mono); color: var(--vk-fg-2); tab-size: 2;
}
.vk-code .k { color: var(--vk-fg); font-weight: 500; }   /* keys, keywords */
.vk-code .s { color: var(--vk-muted); }                  /* strings */
.vk-code .c { color: var(--vk-faint); font-style: italic; } /* comments */
.vk-code .n { color: var(--vk-fg); }                     /* numbers, literals */
.vk-code-h { display: flex; justify-content: space-between; gap: 12px; padding: 0 2px 8px; font: 11.5px var(--vk-mono); color: var(--vk-faint); }

/* Schema / data-model card */
.vk-schema { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 12px; }
.vk-entity { border: 1px solid var(--vk-border); border-radius: var(--vk-radius-sm); overflow: hidden; background: var(--vk-raised); }
.vk-entity h4 { margin: 0; padding: 10px 14px; font: 600 13px var(--vk-mono); border-bottom: 1px solid var(--vk-border); }
.vk-entity dl { margin: 0; }
.vk-entity dl div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 14px; font: 12px var(--vk-mono); }
.vk-entity dl div + div { border-top: 1px solid var(--vk-grid); }
.vk-entity dt { color: var(--vk-fg-2); }
.vk-entity dd { margin: 0; color: var(--vk-faint); }
.vk-entity .pk dt::after { content: " · pk"; color: var(--vk-faint); }

/* ---------- 10. Data table ---------- */
.vk-table-wrap { overflow-x: auto; }
.vk-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.vk-table th { text-align: left; font-weight: 500; color: var(--vk-muted); font-size: 12px; padding: 0 12px 10px 0; border-bottom: 1px solid var(--vk-border-strong); white-space: nowrap; }
.vk-table td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--vk-border); color: var(--vk-fg-2); }
.vk-table tr:last-child td { border-bottom: 0; }
.vk-table .num { text-align: right; }
.vk-table tbody tr:hover td { background: rgba(255,255,255,.025); }

/* ---------- 11. Decision / trade-off cards ---------- */
.vk-decisions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 12px; }
.vk-decision { background: var(--vk-raised); border: 1px solid var(--vk-border); border-radius: var(--vk-radius-sm); padding: 18px; }
.vk-decision h4 { margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.vk-decision p { margin: 8px 0 0; font-size: 13px; color: var(--vk-muted); }
.vk-tradeoff { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--vk-border); display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font-size: 12.5px; }
.vk-tradeoff dt { color: var(--vk-faint); }
.vk-tradeoff dd { margin: 0; color: var(--vk-fg-2); }

/* Placeholder / sample-data marker: use whenever numbers are not real */
.vk-sample { display: inline-flex; align-items: center; gap: 6px; font: 11px var(--vk-mono); color: var(--vk-faint); border: 1px dashed var(--vk-border-strong); border-radius: 999px; padding: 2px 9px; }

/* ==========================================================================
   INSIGHT FIGURES · each one makes a single point. Pair every one with a
   one-sentence takeaway in .vk-takeaway, placed above the plot.
   ========================================================================== */
.vk-takeaway { margin: 0 0 20px; font-size: 20px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; color: var(--vk-fg); max-width: 40ch; text-wrap: balance; }
.vk-takeaway em { font-style: normal; color: var(--vk-muted); }
.vk-ramp { --s0: #1f1f1f; --s1: #333333; --s2: #4d4d4d; --s3: #737373; --s4: #a3a3a3; --s5: #e5e5e5; }

/* 12. Unit chart: one dot = one thing */
.vk-units { display: flex; flex-direction: column; gap: 18px; }
.vk-unit-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) 64px; gap: 16px; align-items: center; }
.vk-unit-label { font-size: 13px; color: var(--vk-fg-2); }
.vk-unit-label small { display: block; color: var(--vk-faint); font-size: 12px; }
.vk-unit-dots { display: grid; grid-template-columns: repeat(var(--per, 30), minmax(0, 1fr)); gap: 3px; max-width: 100%; }
.vk-unit-dots i { aspect-ratio: 1; border-radius: 50%; background: var(--vk-primary); }
.vk-unit-dots.is-2 i { background: var(--vk-secondary); }
.vk-unit-dots i.is-extra { background: transparent; box-shadow: inset 0 0 0 1.5px var(--vk-primary); }
.vk-unit-n { font-size: 22px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .vk-unit-row { grid-template-columns: minmax(0, 1fr) 56px; } .vk-unit-label { grid-column: 1 / -1; } }

/* 13. Waffle: a share of 100 */
.vk-waffles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 28px; }
.vk-waffle { display: flex; flex-direction: column; gap: 12px; }
.vk-waffle-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; max-width: 220px; }
.vk-waffle-grid i { aspect-ratio: 1; border-radius: 3px; background: var(--vk-border); }
.vk-waffle-grid i.on { background: var(--vk-primary); }
.vk-waffle.is-2 .vk-waffle-grid i.on { background: var(--vk-secondary); }
.vk-waffle-v { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.vk-waffle-k { font-size: 13px; color: var(--vk-muted); }
.vk-waffle-arrow { align-self: center; justify-self: center; font-size: 22px; color: var(--vk-faint); }

/* 14. Heatmap */
.vk-heat-wrap { overflow-x: auto; }
.vk-heat { display: grid; gap: 3px; min-width: 520px; align-items: center; }
.vk-heat-h { font: 10.5px var(--vk-mono); color: var(--vk-faint); text-align: center; padding-bottom: 4px; }
.vk-heat-name { font-size: 12.5px; color: var(--vk-muted); padding-right: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vk-heat-name.is-key { color: var(--vk-fg); font-weight: 600; }
.vk-heat-cell { height: 22px; border-radius: 4px; }
.vk-heat-cell.is-key { outline: 1px solid var(--vk-fg-2); outline-offset: 1px; }
.vk-heat-legend { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--vk-faint); }
.vk-heat-legend i { width: 18px; height: 10px; border-radius: 2px; }

/* 15. Coverage waterfall (cumulative gain per step) */
.vk-cover { display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: 10px; align-items: end; }
.vk-cover-col { display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 0; }
.vk-cover-plot { height: 200px; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; position: relative; }
.vk-cover-gain { background: var(--vk-primary); border-radius: 4px 4px 0 0; }
.vk-cover-prev { background: var(--vk-secondary); opacity: .45; }
.vk-cover-v { font-size: 13px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.vk-cover-v small { display: block; font-weight: 400; color: var(--vk-faint); font-size: 11.5px; }
.vk-cover-name { font-size: 12px; color: var(--vk-muted); text-align: center; line-height: 1.3; border-top: 1px solid var(--vk-border-strong); padding-top: 8px; min-height: 3.2em; }
.vk-cover-cost { display: flex; justify-content: center; gap: 3px; }
.vk-cover-cost i { width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid var(--vk-border-strong); }
.vk-cover-cost i.on { background: var(--vk-fg-2); border-color: var(--vk-fg-2); }
@media (max-width: 560px) { .vk-cover { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 24px; } }

/* 16. Time budget: what fits inside a fixed window */
.vk-budget { position: relative; display: flex; flex-direction: column; gap: 14px; padding-top: 28px; }
.vk-budget-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; align-items: center; }
.vk-budget-label { font-size: 13px; color: var(--vk-fg-2); }
.vk-budget-label small { display: block; color: var(--vk-faint); font-size: 12px; }
.vk-budget-track { position: relative; height: 14px; background: var(--vk-grid); border-radius: 4px; }
.vk-budget-bar { position: absolute; top: 0; bottom: 0; left: var(--a, 0%); width: calc(var(--b, 0%) - var(--a, 0%)); min-width: 3px; background: var(--vk-primary); border-radius: 4px; }
.vk-budget-bar.is-2 { background: var(--vk-secondary); }
.vk-budget-bar.is-range { background: repeating-linear-gradient(135deg, var(--vk-secondary) 0 4px, transparent 4px 8px); box-shadow: inset 0 0 0 1px var(--vk-secondary); }
.vk-budget-line { position: absolute; top: 0; bottom: 22px; left: calc(186px + (100% - 186px) * var(--at)); width: 0; border-left: 1px dashed var(--vk-fg-2); }
.vk-budget-line span { position: absolute; top: 0; left: 6px; white-space: nowrap; font-size: 12px; font-weight: 500; color: var(--vk-fg); }
.vk-budget-axis { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; }
.vk-budget-axis div { display: flex; justify-content: space-between; font: 10.5px var(--vk-mono); color: var(--vk-faint); }

/* 17. Before / after day lanes */
.vk-lanes { display: flex; flex-direction: column; gap: 16px; }
.vk-lane { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 16px; align-items: center; }
.vk-lane-label { font-size: 13px; font-weight: 600; }
.vk-lane-track { display: flex; gap: 2px; height: 40px; }
.vk-seg { flex: var(--m) 1 0; min-width: 0; border-radius: 6px; background: var(--vk-raised); border: 1px solid var(--vk-border-strong); display: flex; align-items: center; padding: 0 8px; font-size: 11.5px; color: var(--vk-muted); overflow: hidden; white-space: nowrap; }
.vk-seg.is-key { background: var(--vk-primary); border-color: var(--vk-primary); color: var(--vk-bg); font-weight: 600; }
.vk-seg.is-free { background: transparent; border-style: dashed; }
.vk-lane-axis { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 16px; }
.vk-lane-axis div { display: flex; justify-content: space-between; font: 10.5px var(--vk-mono); color: var(--vk-faint); }

/* 18. Numbered callouts on any figure */
.vk-pin { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 999px; background: var(--vk-primary); color: var(--vk-bg); font: 600 11px var(--vk-sans); font-variant-numeric: tabular-nums; flex: none; }
.vk-node .vk-pin { float: right; margin: -2px -4px 0 6px; }
.vk-notes { margin: 20px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 14px 24px; }
.vk-notes li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; font-size: 13px; color: var(--vk-muted); line-height: 1.5; }
.vk-notes b { color: var(--vk-fg); font-weight: 600; }

/* 19. Cost math */
.vk-math { display: flex; align-items: flex-end; gap: 14px 20px; flex-wrap: wrap; }
.vk-term { display: flex; flex-direction: column; gap: 4px; }
.vk-term-v { font-size: clamp(28px, 4vw, 40px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.vk-term-k { font-size: 12.5px; color: var(--vk-faint); }
.vk-op { font-size: 28px; color: var(--vk-faint); line-height: 1.2; padding-bottom: 18px; }
.vk-term.is-result .vk-term-v { padding: 6px 12px; margin: -6px -12px; border-radius: 10px; background: var(--vk-primary); color: var(--vk-bg); }
.vk-term.is-result .vk-term-k { margin-top: 6px; }

/* Sankey + slope (SVG, rendered by viz-kit.js) */
.vk-svg { position: relative; width: 100%; }
.vk-svg svg { display: block; width: 100%; height: auto; overflow: visible; }
.vk-svg text { font-family: var(--vk-sans); font-variant-numeric: tabular-nums; }
.vk-hit { cursor: default; }
.vk-node .vk-pin { display: inline-flex; color: var(--vk-bg); font-size: 11px; margin-top: 0; }
.vk-term { align-items: flex-start; }