/* ==========================================================================
   artifact.css — visual-article kit for taozhangnyu.com
   --------------------------------------------------------------------------
   Everything is scoped under .ax so it can never touch the site's nav,
   footer or ordinary posts. Type and neutrals INHERIT the site; only the
   three-layer accents and the diagram chrome are the kit's own.

   To retune to your palette, override these on .ax in your own stylesheet —
   nothing else in this file needs editing.
   ========================================================================== */

.ax {
  /* Derived from the site's own tokens (:root in about.*.css), with the live
     values as fallbacks — retune the site and the kit follows. */
  /* Figures are hand-positioned artwork whose coordinates were laid out against
     IBM Plex metrics; inheriting an unknown sans overflows the boxes. Prose still
     inherits the site's serif — only diagram and control chrome use these. */
  --ax-font-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --ax-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --ax-bg:       var(--bg,    #f6f3ec);   /* warm paper ground        */
  --ax-text:     var(--ink,   #1c1915);
  --ax-text-dim: var(--faint, #6b6459);

  /* Card surfaces sit ON the paper, so they are warm off-whites, not cool greys.
     --bg-2 is the site's own card colour; the kit reuses it. */
  --ax-surface:  var(--bg-2,  #fffdf8);
  --ax-surface2: #f2ede2;
  --ax-surface3: #e8e2d5;
  --ax-border:        var(--line, #e4ddd0);
  --ax-border-bright: #bdb5a5;
  --ax-diagram-bg:    #fffaf0;
  --ax-shadow: 0 1px 2px rgba(60,45,25,.05), 0 8px 24px -14px rgba(60,45,25,.22);

  /* The same semantic quartet used by the editorial system. */
  --ax-cap:  var(--ochre, #a36f16); --ax-cap-dim:  rgba(163, 111, 22, 0.11);
  --ax-proc: var(--teal, #2b7b6c);  --ax-proc-dim: rgba(43, 123, 108, 0.11);
  --ax-run:  var(--navy, #123b67);  --ax-run-dim:  rgba(18, 59, 103, 0.10);
  --ax-warn: var(--accent, #9a563f); --ax-warn-dim: rgba(154, 86, 63, 0.10);

  color: var(--ax-text);
  overflow-wrap: break-word;
}

/* Reset only inside the kit; the site's prose rules keep working. */
.ax *, .ax *::before, .ax *::after { box-sizing: border-box; }
.ax figure { margin: 0; }
.ax ul, .ax ol { margin: 0; padding: 0; }

/* --------------------------------------------------------------------------
   FULL-BLEED — the single most important rule here.
   Prose stays at the site's reading width; figures and wide tables escape it.
   --ax-sbw is set by artifact.js so the escape is scrollbar-safe.
   -------------------------------------------------------------------------- */
/* Specificity note: `.ax figure` (0,1,1) sets a margin shorthand, so the bleed
   must be at least (0,2,0) or it gets silently reset to margin-inline:0. */
.ax .ax-bleed {
  --_w: min(1400px, calc(100vw - var(--ax-sbw, 0px) - 48px));
  width: var(--_w);
  margin-inline: calc(50% - var(--_w) / 2);
  max-width: none;
}
@media (max-width: 900px) {
  .ax .ax-bleed { --_w: calc(100vw - var(--ax-sbw, 0px) - 24px); }
}

/* Vertical rhythm between kit blocks, without touching the site's margins. */
.ax > * + * { margin-top: 22px; }
.ax h2, .ax h3 { margin-top: 40px; }

.ax :focus-visible { outline: 2px solid var(--ax-run); outline-offset: 3px; border-radius: 4px; }
.ax .ax-formula { background: var(--ax-surface); border: 1px solid var(--ax-border); border-radius: 12px; padding: 24px 26px; box-shadow: var(--ax-shadow); margin-bottom: 16px; }
.ax .ax-formula + .ax-formula { margin-top: 0; }
.ax .ax-formula-label { font-family: var(--ax-font-mono); font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.8px; color: var(--ax-text-dim); margin-bottom: 16px; }
.ax .ax-formula-body { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-family: var(--ax-font-mono); font-size: 14px; }
.ax .ax-formula-lhs { font-weight: 600; font-size: 15px; }
.ax .ax-op { color: var(--ax-text-dim); }
.ax .ax-term { padding: 5px 11px; border-radius: 6px; font-size: 12.5px; font-weight: 500; border: 1px solid; }
.ax .ax-term--cap { background: var(--ax-cap-dim); color: var(--ax-cap); border-color: color-mix(in srgb, var(--ax-cap) 32%, transparent); }
.ax .ax-term--proc { background: var(--ax-proc-dim); color: var(--ax-proc); border-color: color-mix(in srgb, var(--ax-proc) 32%, transparent); }
.ax .ax-term--run { background: var(--ax-run-dim); color: var(--ax-run); border-color: color-mix(in srgb, var(--ax-run) 32%, transparent); }
.ax .ax-formula-note { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ax-border); font-size: 13px; color: var(--ax-text-dim); max-width: 72ch; }
.ax .ax-layers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 8px; }
.ax .ax-layers > * { min-width: 0; }
.ax .ax-layer { background: var(--ax-surface); border: 1px solid var(--ax-border); border-top: 3px solid var(--lc); border-radius: 10px; padding: 20px; box-shadow: var(--ax-shadow); display: flex; flex-direction: column; }
.ax .ax-layer--cap { --lc: var(--ax-cap); --lcd: var(--ax-cap-dim); }
.ax .ax-layer--proc { --lc: var(--ax-proc); --lcd: var(--ax-proc-dim); }
.ax .ax-layer--run { --lc: var(--ax-run); --lcd: var(--ax-run-dim); }
.ax .ax-layer-kicker { font-family: var(--ax-font-mono); font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.8px; color: var(--lc); margin-bottom: 8px; }
.ax .ax-layer-q { font-size: 19px; font-weight: 600; letter-spacing: -0.3px; margin-bottom: 6px; }
.ax .ax-layer-desc { font-size: 13px; color: var(--ax-text-dim); line-height: 1.6; margin-bottom: 16px; }
.ax .ax-layer-list { list-style: none; font-size: 13px; line-height: 1.55; }
.ax .ax-layer-list li { position: relative; padding-left: 15px; margin-bottom: 9px; }
.ax .ax-layer-list li::before { content: ''; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--lc); }
.ax .ax-layer-list b { font-weight: 600; font-family: var(--ax-font-mono); font-size: 12px; }
.ax .ax-layer-list span { color: var(--ax-text-dim); }
.ax figure { margin: 8px 0 10px; background: var(--ax-diagram-bg); border: 1px solid var(--ax-border); border-radius: 12px; overflow: hidden; box-shadow: var(--ax-shadow); }
.ax .ax-fig-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--ax-border); background: var(--ax-surface2); }
.ax .ax-fig-legend { display: flex; flex-wrap: wrap; gap: 14px; }
.ax .ax-leg { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ax-font-mono); font-size: 10px; color: var(--ax-text-dim); letter-spacing: .3px; }
.ax .ax-leg i { width: 9px; height: 9px; border-radius: 2.5px; display: block; }
.ax .ax-leg--cap i { background: var(--ax-cap); }
.ax .ax-leg--proc i { background: var(--ax-proc); }
.ax .ax-leg--run i { background: var(--ax-run); }
.ax figcaption { padding: 13px 18px 15px; border-top: 1px solid color-mix(in srgb, var(--ax-run) 20%, var(--ax-border)); background: var(--ax-surface); font-size: 12.5px; color: var(--ax-text-dim); line-height: 1.6; }
.ax figcaption b { color: var(--ax-run); font-weight: 650; }
.ax .ax-svg { font-family: var(--ax-font-sans); }
.ax .ax-fig-bar, .ax .ax-zoom, .ax figcaption { font-family: var(--ax-font-sans); }
.ax .ax-bx { fill: var(--ax-surface); stroke-width: 1.4; }
.ax .ax-bx--cap { stroke: var(--ax-cap); }
.ax .ax-bx--proc { stroke: var(--ax-proc); }
.ax .ax-bx--run { stroke: var(--ax-run); }
.ax .ax-bx--mute { stroke: var(--ax-border-bright); }
.ax .ax-bxf--cap { fill: var(--ax-cap-dim); }
.ax .ax-bxf--proc { fill: var(--ax-proc-dim); }
.ax .ax-bxf--run { fill: var(--ax-run-dim); }
.ax .ax-cont { fill: none; stroke-width: 1.4; stroke-dasharray: 6 5; }
.ax .ax-cont--run { stroke: var(--ax-run); }
.ax .ax-cont--proc { stroke: var(--ax-proc); }
.ax .ax-t { fill: var(--ax-text); font-size: 13px; font-weight: 600; }
.ax .ax-ts { fill: var(--ax-text-dim); font-size: 10px; font-weight: 400; }
.ax .ax-tm { fill: var(--ax-text-dim); font-family: var(--ax-font-mono); font-size: 10px; letter-spacing: .3px; }
.ax .ax-thd { font-family: var(--ax-font-mono); font-size: 11px; font-weight: 600; letter-spacing: 1.6px; }
.ax .ax-thd--run { fill: var(--ax-run); }
.ax .ax-thd--proc { fill: var(--ax-proc); }
.ax .ax-ln { fill: none; stroke: var(--ax-border-bright); stroke-width: 1.4; }
.ax .ax-ln--dash { stroke-dasharray: 4 4; }
.ax .ax-lbl { fill: var(--ax-text-dim); font-family: var(--ax-font-mono); font-size: 10px; }
dialog.ax-modal { border: none; border-radius: 12px; padding: 0; background: var(--ax-diagram-bg); color: var(--ax-text); max-width: 96vw; max-height: 94vh; width: 96vw; box-shadow: 0 20px 60px -20px rgba(0,0,0,.5); }
dialog.ax-modal::backdrop { background: rgba(6, 12, 18, .72); backdrop-filter: blur(2px); }
.ax .ax-modal-bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--ax-border); background: var(--ax-surface2); }
.ax .ax-modal-bar span { font-family: var(--ax-font-mono); font-size: 11px; color: var(--ax-text-dim); }
.ax .ax-modal-body { overflow: auto; padding: 16px; max-height: calc(94vh - 54px); }
.ax .ax-table-wrap { background: var(--ax-surface); border: 1px solid var(--ax-border); border-radius: 12px; overflow: hidden; box-shadow: var(--ax-shadow); margin-bottom: 14px; }
.ax .ax-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ax .ax-table-scroll::-webkit-scrollbar { height: 7px; }
.ax .ax-table-scroll::-webkit-scrollbar-thumb { background: var(--ax-border-bright); border-radius: 4px; }
.ax table.ax-dt { width: 100%; border-collapse: collapse; font-size: 12.5px; line-height: 1.6; }
.ax table.ax-dt thead { position: sticky; top: 0; z-index: 2; }
.ax table.ax-dt th { background: var(--ax-surface3); font-family: var(--ax-font-mono); font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; color: var(--ax-text-dim); text-align: left; padding: 12px 14px; border-bottom: 2px solid var(--ax-border-bright); white-space: nowrap; }
.ax table.ax-dt td { padding: 13px 14px; border-bottom: 1px solid var(--ax-border); vertical-align: top; }
.ax table.ax-dt tbody tr:last-child td { border-bottom: none; }
.ax table.ax-dt tbody tr { transition: background .15s; }
.ax table.ax-dt tbody tr:hover { background: var(--ax-surface2); }
.ax table.ax-dt .ax-obj { min-width: 168px; }
.ax table.ax-dt .ax-obj .ax-name { font-family: var(--ax-font-mono); font-size: 13px; font-weight: 600; display: block; margin-bottom: 2px; }
.ax table.ax-dt .ax-obj .ax-role { color: var(--ax-text-dim); font-size: 11px; display: block; line-height: 1.5; }
.ax table.ax-dt .ax-wide { min-width: 190px; max-width: 300px; }
.ax table.ax-dt .ax-mid { min-width: 160px; max-width: 250px; }
.ax table.ax-dt code { font-family: var(--ax-font-mono); font-size: 11px; background: var(--ax-surface3); padding: 1px 5px; border-radius: 3px; }
.ax tr.ax-lay--cap  td:first-child { box-shadow: inset 3px 0 0 var(--ax-cap); }
.ax tr.ax-lay--proc td:first-child { box-shadow: inset 3px 0 0 var(--ax-proc); }
.ax tr.ax-lay--run  td:first-child { box-shadow: inset 3px 0 0 var(--ax-run); }
.ax .ax-pill { display: inline-block; font-family: var(--ax-font-mono); font-size: 9.5px; font-weight: 500; padding: 2.5px 8px; border-radius: 4px; white-space: nowrap; letter-spacing: .3px; }
.ax .ax-pill--cap { background: var(--ax-cap-dim); color: var(--ax-cap); }
.ax .ax-pill--proc { background: var(--ax-proc-dim); color: var(--ax-proc); }
.ax .ax-pill--run { background: var(--ax-run-dim); color: var(--ax-run); }
.ax .ax-pill--hi { background: var(--ax-warn-dim); color: var(--ax-warn); }
.ax .ax-pill--mid { background: var(--ax-cap-dim); color: var(--ax-cap); }
.ax .ax-pill--lo { background: var(--ax-surface3); color: var(--ax-text-dim); }
.ax .ax-table-note { font-size: 12px; color: var(--ax-text-dim); margin-bottom: 8px; font-family: var(--ax-font-mono); }
.ax .ax-neq { margin-bottom: 18px; }
.ax .ax-neq-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.ax .ax-neq-idx { font-family: var(--ax-font-mono); font-size: 10px; font-weight: 600; color: var(--ax-text-dim); letter-spacing: 1.5px; }
.ax .ax-neq-title { font-family: var(--ax-font-mono); font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ax .ax-neq-title .ax-ne { color: var(--ax-warn); font-size: 18px; }
.ax .ax-neq-ask { font-size: 13px; color: var(--ax-text-dim); }
.ax .ax-panes { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--ax-border); border-radius: 10px; overflow: hidden; background: var(--ax-surface); box-shadow: var(--ax-shadow); }
.ax .ax-panes > * { min-width: 0; overflow-wrap: break-word; }
.ax .ax-pane-hd { font-family: var(--ax-font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 1.2px; padding: 10px 16px; background: var(--ax-surface2); }
.ax .ax-pane-hd--l { color: var(--ax-run); border-bottom: 2px solid var(--ax-run); }
.ax .ax-pane-hd--r { color: var(--ax-cap); border-bottom: 2px solid var(--ax-cap); }
.ax .ax-pane-bd { padding: 16px; font-size: 13px; line-height: 1.7; }
.ax .ax-pane-bd + .ax-pane-bd { border-left: 1px solid var(--ax-border); }
.ax .ax-pane-bd ul { list-style: none; }
.ax .ax-pane-bd li { position: relative; padding-left: 15px; margin-bottom: 6px; }
.ax .ax-pane-bd li::before { content: ''; position: absolute; left: 1px; top: 9px; width: 6px; height: 1.5px; background: var(--ax-text-dim); }
.ax .ax-pane-bd code { font-family: var(--ax-font-mono); font-size: 11.5px; background: var(--ax-surface3); padding: 1px 5px; border-radius: 3px; }
.ax .ax-pane-bd .ax-mono { font-family: var(--ax-font-mono); font-size: 11.5px; line-height: 1.85; color: var(--ax-text-dim); white-space: pre-wrap; }
.ax .ax-take { margin-top: 12px; padding: 12px 16px; background: var(--ax-surface2); border: 1px solid var(--ax-border); border-left: 3px solid var(--ax-warn); border-radius: 0 8px 8px 0; font-size: 13px; line-height: 1.65; }
.ax .ax-take b { color: var(--ax-warn); font-family: var(--ax-font-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; display: block; margin-bottom: 4px; }
.ax .ax-own { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 12px; margin-bottom: 24px; }
.ax .ax-own > * { min-width: 0; }
.ax .ax-own-card { background: var(--ax-surface); border: 1px solid var(--ax-border); border-left: 3px solid var(--oc); border-radius: 0 9px 9px 0; padding: 14px 16px; }
.ax .ax-own-card--cap { --oc: var(--ax-cap); }
.ax .ax-own-card--proc { --oc: var(--ax-proc); }
.ax .ax-own-card--run { --oc: var(--ax-run); }
.ax .ax-own-card--none { --oc: var(--ax-border-bright); }
.ax .ax-own-name { font-family: var(--ax-font-mono); font-size: 12.5px; font-weight: 600; margin-bottom: 4px; }
.ax .ax-own-what { font-size: 12.5px; color: var(--ax-text-dim); line-height: 1.6; }
.ax .ax-own-card--none .ax-own-what { color: var(--ax-warn); }
.ax .ax-callout { padding: 18px 22px; border-radius: 10px; border-left: 4px solid var(--ax-warn); background: var(--ax-warn-dim); margin: 22px 0; }
.ax .ax-callout-title { font-weight: 600; margin-bottom: 10px; color: var(--ax-warn); font-size: 14px; }
.ax .ax-callout ul { list-style: none; font-size: 13.5px; line-height: 1.8; }
.ax .ax-callout li { position: relative; padding-left: 16px; }
.ax .ax-callout li::before { content: '×'; position: absolute; left: 0; color: var(--ax-warn); font-weight: 600; }
.ax .ax-callout p { font-size: 13.5px; margin-top: 12px; margin-bottom: 0; color: var(--ax-text-dim); }
.ax .ax-code { background: var(--ax-surface); border: 1px solid var(--ax-border); border-radius: 10px; overflow: hidden; box-shadow: var(--ax-shadow); margin-bottom: 16px; }
.ax .ax-code-hd { display: flex; align-items: center; gap: 10px; padding: 9px 16px; background: var(--ax-surface2); border-bottom: 1px solid var(--ax-border); font-family: var(--ax-font-mono); font-size: 10.5px; color: var(--ax-text-dim); letter-spacing: .5px; }
.ax .ax-code-hd .ax-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ax-proc); flex-shrink: 0; }
.ax .ax-code pre { overflow-x: auto; padding: 16px 18px; font-family: var(--ax-font-mono); font-size: 12.5px; line-height: 1.75; }
.ax .ax-code pre::-webkit-scrollbar { height: 7px; }
.ax .ax-code pre::-webkit-scrollbar-thumb { background: var(--ax-border-bright); border-radius: 4px; }
.ax .ax-code .ax-kw { color: var(--ax-run); }
.ax .ax-code .ax-fn { color: var(--ax-cap); }
.ax .ax-code .ax-st { color: var(--ax-proc); }
.ax .ax-code .ax-cm { color: var(--ax-text-dim); font-style: italic; }
.ax .ax-haves { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ax .ax-haves > * { min-width: 0; }
.ax .ax-have { background: var(--ax-surface); border: 1px solid var(--ax-border); border-radius: 10px; padding: 16px 18px; }
.ax .ax-have h4 { font-family: var(--ax-font-mono); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.4px; margin-bottom: 12px; }
.ax .ax-have--yes h4 { color: var(--ax-proc); }
.ax .ax-have--no h4 { color: var(--ax-warn); }
.ax .ax-have ul { list-style: none; font-size: 13px; line-height: 1.8; }
.ax .ax-have li { position: relative; padding-left: 18px; }
.ax .ax-have--yes li::before { content: '✓'; position: absolute; left: 0; color: var(--ax-proc); font-weight: 600; }
.ax .ax-have--no li::before { content: '−'; position: absolute; left: 0; color: var(--ax-warn); font-weight: 600; }
.ax .ax-def { background: var(--ax-surface); border: 1px solid var(--ax-border-bright); border-radius: 12px; padding: 26px 30px; box-shadow: var(--ax-shadow); margin-bottom: 30px; position: relative; }
.ax .ax-def::before { content: 'DEFINITION'; position: absolute; top: -8px; left: 24px; font-family: var(--ax-font-mono); font-size: 9px; font-weight: 600; letter-spacing: 2px; color: var(--ax-text-dim); background: var(--ax-bg); padding: 0 8px; }
.ax .ax-def em { font-style: normal; font-weight: 600; padding: 0 2px; }
.ax .ax-def .ax-k-cap { color: var(--ax-cap); }
.ax .ax-def .ax-k-proc { color: var(--ax-proc); }
.ax .ax-def .ax-k-run { color: var(--ax-run); }
.ax .ax-recap { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 10px; margin-bottom: 30px; }
.ax .ax-recap > * { min-width: 0; }
.ax .ax-recap-item { display: flex; align-items: baseline; gap: 10px; padding: 11px 14px; background: var(--ax-surface); border: 1px solid var(--ax-border); border-radius: 8px; font-size: 13px; }
.ax .ax-recap-item .ax-k { font-family: var(--ax-font-mono); font-size: 12px; font-weight: 600; flex-shrink: 0; }
.ax .ax-recap-item .ax-v { color: var(--ax-text-dim); }
.ax .ax-recap-item--cap .ax-k { color: var(--ax-cap); }
.ax .ax-recap-item--proc .ax-k { color: var(--ax-proc); }
.ax .ax-recap-item--run .ax-k { color: var(--ax-run); }
.ax .ax-review { background: var(--ax-surface); border: 1px solid var(--ax-border); border-radius: 12px; padding: 24px 28px; box-shadow: var(--ax-shadow); }
.ax .ax-review ol { list-style: none; counter-reset: ck; }
.ax .ax-review li { counter-increment: ck; position: relative; padding-left: 34px; margin-bottom: 12px; font-size: 14px; line-height: 1.6; }
.ax .ax-review li::before { content: counter(ck, decimal-leading-zero); position: absolute; left: 0; top: 1px; font-family: var(--ax-font-mono); font-size: 10px; font-weight: 600; color: var(--ax-run); background: var(--ax-run-dim); padding: 2px 6px; border-radius: 4px; }
.ax .ax-an { animation: fadeUp .34s ease-out both; animation-delay: calc(var(--i, 0) * .05s); }
@media (prefers-reduced-motion: reduce) {
  .ax *::before, .ax *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
}
@media (max-width: 1080px) {
  .ax .ax-layers { grid-template-columns: 1fr; }
  .ax .ax-haves { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .ax .ax-panes { grid-template-columns: 1fr; }
  .ax .ax-pane-bd + .ax-pane-bd { border-left: none; border-top: 1px solid var(--ax-border); }
  .ax .ax-recap { grid-template-columns: 1fr; }
}
.ax .ax-part { display: flex; align-items: flex-start; gap: 16px; margin: 70px 0 0; padding-top: 8px; scroll-margin-top: 20px; }
.ax .ax-part-no { font-family: var(--ax-font-mono); font-size: 10px; font-weight: 600; letter-spacing: 1.6px; color: var(--ax-run); background: var(--ax-run-dim); border: 1px solid color-mix(in srgb, var(--ax-run) 26%, transparent); padding: 5px 9px; border-radius: 5px; flex-shrink: 0; margin-top: 6px; white-space: nowrap; }
.ax .ax-ans { display: grid; grid-template-columns: auto 1fr; gap: 0 16px; margin: 16px 0 26px; padding-left: 2px; }
.ax .ax-ans-tag { font-family: var(--ax-font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ax-cap); padding: 4px 0 0; white-space: nowrap; }
.ax .ax-ans-body { min-width: 0; font-size: 16px; line-height: 1.8; border-left: 2px solid var(--ax-cap); padding-left: 18px; }
.ax .ax-ans-body strong { font-weight: 600; }
.ax .ax-subq { margin: 30px 0 0; border-top: 1px solid var(--ax-border); padding-top: 26px; }
.ax .ax-subq:first-of-type { border-top: none; padding-top: 4px; }
.ax .ax-subq-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.ax .ax-subq-no { font-family: var(--ax-font-mono); font-size: 10.5px; font-weight: 600; color: var(--ax-text-dim); letter-spacing: 1px; flex-shrink: 0; }
.ax .ax-subq-q { font-size: 18px; font-weight: 600; letter-spacing: -0.25px; min-width: 0; }
.ax .ax-subq-a { font-size: 15px; line-height: 1.75; color: var(--ax-text); margin: 8px 0 16px 0; padding-left: 14px; border-left: 2px solid var(--ax-cap); max-width: 74ch; }
.ax .ax-subq-a strong { font-weight: 600; }
.ax .ax-vs { font-family: var(--ax-font-mono); color: var(--ax-warn); font-weight: 600; padding: 0 3px; }
.ax .ax-reqs { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 12px; margin-bottom: 24px; }
.ax .ax-reqs > * { min-width: 0; }
.ax .ax-req { background: var(--ax-surface); border: 1px solid var(--ax-border); border-top: 3px solid var(--rc); border-radius: 9px; padding: 16px 18px; }
.ax .ax-req--cap { --rc: var(--ax-cap); }
.ax .ax-req--proc { --rc: var(--ax-proc); }
.ax .ax-req--run { --rc: var(--ax-run); }
.ax .ax-req-n { font-family: var(--ax-font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 1.5px; color: var(--ax-text-dim); margin-bottom: 8px; }
.ax .ax-req-name { font-family: var(--ax-font-mono); font-size: 14px; font-weight: 600; color: var(--rc); margin-bottom: 5px; }
.ax .ax-req-why { font-size: 12.5px; color: var(--ax-text-dim); line-height: 1.6; }
.ax .ax-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ax .ax-chip { font-family: var(--ax-font-mono); font-size: 11.5px; padding: 5px 11px; border-radius: 6px; background: var(--ax-warn-dim); color: var(--ax-warn); border: 1px solid color-mix(in srgb, var(--ax-warn) 24%, transparent); }
.ax .ax-review { background: var(--ax-surface); border: 1px solid var(--ax-border); border-radius: 12px; padding: 26px 30px; box-shadow: var(--ax-shadow); }
.ax .ax-review ol { list-style: none; counter-reset: rq; display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 10px 22px; }
.ax .ax-review ol > * { min-width: 0; }
.ax .ax-review li { counter-increment: rq; position: relative; padding-left: 36px; font-size: 14px; line-height: 1.55; }
.ax .ax-review li::before { content: counter(rq, decimal-leading-zero); position: absolute; left: 0; top: 2px; font-family: var(--ax-font-mono); font-size: 10px; font-weight: 600; color: var(--ax-run); background: var(--ax-run-dim); padding: 2px 6px; border-radius: 4px; }
.ax .ax-review li.ax-crit::before { color: var(--ax-warn); background: var(--ax-warn-dim); }
@media (max-width: 760px) {
  .ax .ax-part { flex-direction: column; gap: 8px; }
  .ax .ax-part-no { margin-top: 0; }
  .ax .ax-ans { grid-template-columns: 1fr; gap: 8px; }
  .ax .ax-ans-body { font-size: 15px; }
}
.ax .ax-fig { position: relative; }
.ax .ax-fig-wrap { position: relative; background: var(--ax-diagram-bg); border: 1px solid var(--ax-border); border-top: none; overflow: hidden; cursor: grab; touch-action: pan-y; }
.ax .ax-fig-wrap.ax-canpan { cursor: grab; }
.ax .ax-fig-wrap:not(.ax-canpan) { cursor: default; }
.ax .ax-fig-wrap.ax-panning { cursor: grabbing; user-select: none; }
.ax .ax-fig-vp { position: relative; overflow: hidden; width: 100%; height: 100%; }
.ax .ax-fig-canvas { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; }
.ax .ax-fig-canvas > svg { display: block; width: 100%; height: 100%; }
.ax .ax-fig-pair { display: grid; grid-template-columns: 520px 520px; gap: 24px; width: 1064px; height: 340px; }
.ax .ax-fig-pair > svg { display: block; width: 520px; height: 340px; }
.ax .ax-zoom { position: absolute; top: 8px; right: 8px; display: flex; align-items: center; gap: 2px; z-index: 10; background: color-mix(in srgb, var(--ax-surface) 88%, transparent); backdrop-filter: blur(6px); border: 1px solid var(--ax-border); border-radius: 7px; padding: 2px; }
.ax .ax-zoom button { width: 28px; height: 26px; border: none; background: transparent; color: var(--ax-text-dim); font-family: var(--ax-font-mono); font-size: 13px; line-height: 1; cursor: pointer; border-radius: 4px; display: flex; align-items: center; justify-content: center; transition: background .15s ease, color .15s ease; }
.ax .ax-zoom button:hover { background: var(--ax-surface3); color: var(--ax-text); }
.ax .ax-zoom button[data-a="one"] { font-size: 10px; letter-spacing: -.3px; }
.ax .ax-zoom-label { font-family: var(--ax-font-mono); font-size: 9.5px; color: var(--ax-text-dim); padding: 0 8px 0 6px; white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 84px; text-align: right; }
.ax .ax-fig-hint { font-family: var(--ax-font-mono); font-size: 10px; color: var(--ax-text-dim); opacity: .8; white-space: nowrap; }
@media (max-width: 860px) {
  .ax .ax-fig-hint { display: none; }
  .ax .ax-zoom-label { display: none; }
}
dialog.ax-modal .ax-modal-body { padding: 0; overflow: hidden; }
dialog.ax-modal .ax-fig { height: calc(94vh - 54px); }
dialog.ax-modal .ax-fig-wrap { border: none; height: 100%; border-radius: 0; }
/* Close control in the expanded view (the old .expand-btn is gone). */
.ax #ax-modal-close {
  font-family: var(--ax-font-mono); font-size: 10px; color: var(--ax-text-dim);
  background: var(--ax-surface); border: 1px solid var(--ax-border); border-radius: 5px;
  padding: 4px 10px; cursor: pointer; transition: color .15s, border-color .15s;
}
.ax #ax-modal-close:hover { color: var(--ax-text); border-color: var(--ax-border-bright); }

/* Collapsible contents block — replaces the standalone page's sticky sidebar,
   because inside a post column there is no room for a rail. */
.ax .ax-toc { border: 1px solid var(--ax-border); border-radius: 10px; background: var(--ax-surface2); overflow: hidden; }
.ax .ax-toc summary { padding: 11px 16px; cursor: pointer; list-style: none; font-family: var(--ax-font-mono); font-size: 10px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: var(--ax-text-dim); display: flex; align-items: center; gap: 8px; }
.ax .ax-toc summary::-webkit-details-marker { display: none; }
.ax .ax-toc summary::before { content: '▸'; font-size: 10px; transition: transform .15s ease; }
.ax .ax-toc[open] summary::before { transform: rotate(90deg); }
.ax .ax-toc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 16px; padding: 4px 16px 14px; border-top: 1px solid var(--ax-border); }
.ax .ax-toc-list a { font-size: 13px; color: var(--ax-text-dim); text-decoration: none; padding: 4px 0; display: block; }
.ax .ax-toc-list a:hover { color: var(--ax-text); }
.ax .ax-toc-list b { font-family: var(--ax-font-mono); font-size: 9.5px; color: var(--ax-run); margin-right: 8px; font-weight: 600; }

/* --------------------------------------------------------------------------
   The site styles h2/h3 with large own margins (h2{margin:2em 0 .6em}).
   Inside kit components the container owns the spacing, so neutralise them —
   otherwise the PART chip and its question fall out of alignment.
   -------------------------------------------------------------------------- */
.ax .ax-part { align-items: baseline; }
.ax .ax-part-q { margin: 0; font-size: 1.35rem; line-height: 1.3; font-weight: 600; }
.ax .ax-review h3 { margin: 0 0 6px; }
.ax .ax-def + h3, .ax figure + h3 { margin-top: 1.6em; }

/* --------------------------------------------------------------------------
   Data-dense components use the sans face. The site itself already sets meta,
   nav and tag rows in sans — a 12.5px serif in a twelve-column reference table
   is the one place the inherited serif actively hurts legibility.
   Narrative blocks (answers, panes, takeaways) keep the site's serif.
   -------------------------------------------------------------------------- */
.ax .ax-dt { font-family: var(--ax-font-sans); font-size: 13px; }
.ax .ax-dt th { font-size: 10px; }
.ax .ax-own-what, .ax .ax-req-why, .ax .ax-layer-desc, .ax .ax-layer-list,
.ax .ax-recap-item, .ax .ax-formula-note, .ax .ax-table-note {
  font-family: var(--ax-font-sans);
}

/* Anchor targets get breathing room when jumped to from the contents block. */
.ax .ax-part, .ax .ax-subq { scroll-margin-top: 28px; }

/* Three-panel figure. Same idea as .ax-fig-pair, one column wider: at 424px a
   panel is still under a 600px email column, so all three survive the export
   at full size instead of becoming link-only. */
.ax .ax-fig-trio { display: grid; grid-template-columns: repeat(3, 424px); gap: 24px; width: 1320px; height: 380px; }
.ax .ax-fig-trio > svg { display: block; width: 424px; height: 380px; }

/* Section headings and legend swatches for the two accents that had none. */
.ax .ax-thd--cap { fill: var(--ax-cap); }
.ax .ax-thd--mute { fill: var(--ax-text-dim); }
.ax .ax-leg--mute i { background: var(--ax-border-bright); }

/* --------------------------------------------------------------------------
   ONE ADDITION. Nothing existing is changed.

   Panel grid for a two-panel figure. `ax-fig-pair` (520px) and `ax-fig-trio`
   (424px) already exist; 588px is chosen deliberately here: the newsletter's
   email column is 600px, so a panel narrower than that exports at 1:1 instead
   of being scaled down past the 8px label floor.
   -------------------------------------------------------------------------- */
.ax .ax-fig-duo { display: grid; grid-template-columns: repeat(2, 588px); gap: 24px; width: 1200px; height: 470px; }
.ax .ax-fig-duo > svg { display: block; width: 588px; height: 470px; }