/* Native infographic statement. Inherits --xi-accent / --xi-soft from the chapter family. */
.xs-sheet{--xs-accent:var(--xi-accent,var(--live));--xs-soft:var(--xi-soft,var(--live-soft));--xs-ink:var(--ink);--xs-line:var(--line);
 display:grid;min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);box-shadow:var(--shadow-1);color:var(--ink);container-type:inline-size}
.xs-sheet ::selection{background:var(--xs-soft);color:var(--ink)}
.xs-sheet code{padding:1px 5px;border-radius:var(--r-xs);background:var(--slate-100);font:600 .92em/1.3 var(--font-mono)}
.xs-sheet strong{font-weight:780;color:var(--ink)}
.xs-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Mission: the one sentence the student must hold on to. */
.xs-mission{display:grid;gap:12px;padding:clamp(22px,4cqi,40px) clamp(18px,4cqi,44px) clamp(18px,3cqi,30px)}
.xs-mission h2{max-width:34ch;margin:0;font-size:clamp(23px,3.4cqi,34px);line-height:1.22;font-weight:780;letter-spacing:-.022em;text-wrap:balance;overflow-wrap:anywhere}
.xs-mission p{max-width:68ch;margin:0;color:var(--ink-2);font-size:clamp(15px,1.7cqi,17px);line-height:1.62;text-wrap:pretty}

/* Scene plate: the illustrated situation, tinted by the chapter. */
.xs-scene{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:clamp(14px,2.4cqi,24px);padding:clamp(18px,3.4cqi,34px) clamp(14px,4cqi,44px);background:var(--xs-soft);border-block:1px solid color-mix(in srgb,var(--xs-accent) 18%,transparent)}
.xs-block{display:grid;align-content:start;gap:12px;min-width:0;padding:clamp(14px,2.2cqi,20px);border-radius:var(--r-md);background:var(--paper);box-shadow:0 1px 2px rgba(16,33,58,.06),0 6px 18px -10px rgba(16,33,58,.18)}
.xs-span-full,.xs-block--rule,.xs-block--formula,.xs-block--transform,.xs-block--ranges,.xs-block--file,.xs-block--numberline{grid-column:1/-1}
.xs-block-title{margin:0;color:var(--ink);font-size:15px;line-height:1.35;font-weight:760;letter-spacing:-.005em}
.xs-caption{margin:0;color:var(--ink-2);font-size:14px;line-height:1.5}
.xs-rule-text{margin:0;font-size:clamp(17px,2.1cqi,21px);line-height:1.5;color:var(--ink);text-wrap:pretty}
.xs-var{display:inline-grid;place-items:center;flex:none;min-width:28px;height:28px;padding:0 8px;white-space:nowrap;border-radius:var(--r-sm);background:var(--ink);color:var(--paper);font:700 14px/1 var(--font-mono)}

/* Formula and legend. */
.xs-formula{margin:0;padding:12px 16px;border-radius:var(--r-sm);background:var(--slate-50);font-size:clamp(20px,2.8cqi,28px);line-height:1.3;font-weight:650;font-variant-numeric:tabular-nums;text-align:center;overflow-wrap:anywhere}
.xs-formula--small{font-size:clamp(17px,2.2cqi,21px)}
.xs-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:6px 16px;margin:0}
.xs-legend div{display:flex;gap:10px;align-items:baseline}.xs-legend dt{min-width:2.2ch;font:700 15px/1.4 var(--font-mono);color:var(--xs-accent)}.xs-legend dd{margin:0;font-size:14px;line-height:1.45;color:var(--ink-2)}

/* Key facts. */
.xs-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:10px;margin:0}
.xs-fact{display:grid;gap:4px;padding:12px 14px;border-radius:var(--r-sm);background:var(--slate-50)}
.xs-fact dt{color:var(--muted);font-size:13px;font-weight:650}.xs-fact dd{margin:0;font-size:19px;font-weight:760;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

/* Cells: digits, characters, array slots. */
.xs-strip-row{display:flex;align-items:flex-start;gap:12px;min-width:0}.xs-strip-row>.xs-var{margin-top:9px}
.xs-strip{display:flex;flex-wrap:wrap;gap:6px;min-width:0;--xs-cell:clamp(32px,7cqi,44px)}
.xs-cell{position:relative;display:grid;justify-items:center;align-content:start;gap:3px;min-width:var(--xs-cell,42px)}
.xs-cell>b{display:grid;place-items:center;min-width:var(--xs-cell,42px);height:calc(var(--xs-cell,42px) + 4px);padding:0 8px;border:1.5px solid var(--line-strong);border-radius:var(--r-sm);background:var(--paper);font:750 21px/1 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.xs-cell small{color:var(--muted);font:600 12px/1 var(--font-mono)}
.xs-cell em{max-width:9ch;color:var(--xs-accent);font-size:12px;font-style:normal;font-weight:700;line-height:1.2;text-align:center}
.xs-space>b{color:var(--muted);background:repeating-linear-gradient(135deg,var(--slate-50) 0 6px,var(--paper) 6px 12px)}
.xs-ellipsis{display:grid;place-items:center;min-width:20px;height:calc(var(--xs-cell,42px) + 4px);color:var(--muted);font-size:21px}
.xs-tone-accent>b,td.xs-tone-accent{border-color:var(--xs-accent);border-width:2.5px;background:color-mix(in srgb,var(--xs-accent) 16%,var(--paper));color:var(--ink);font-weight:800}
.xs-tone-positive>b,td.xs-tone-positive{border-color:var(--success);background:var(--success-soft)}
.xs-tone-negative>b,td.xs-tone-negative{border-color:var(--danger);background:var(--danger-soft)}
.xs-tone-muted>b,td.xs-tone-muted{color:var(--muted);background:var(--slate-100);border-style:dashed}
.xs-tone-neutral>b,td.xs-tone-neutral{border-color:var(--ink-2);background:var(--paper)}
.xs-digits{display:grid;grid-template-columns:repeat(var(--xs-cols),minmax(24px,56px));column-gap:6px;row-gap:8px;justify-content:start}
.xs-digits .xs-cell{grid-row:1;min-width:0}.xs-digits .xs-cell>b{width:100%;min-width:0;height:clamp(40px,9cqi,58px);padding:0;font-size:clamp(17px,4.4cqi,28px)}
.xs-bracket{grid-row:2;display:grid;justify-items:center;padding-top:8px;border-top:2px solid var(--xs-accent);color:var(--xs-accent);font-size:14px;font-weight:760;text-align:center}
.xs-bracket.xs-tone-positive{border-color:var(--success);color:var(--success-text)}.xs-bracket.xs-tone-negative{border-color:var(--danger);color:var(--danger-text)}

/* Matrices and tables. */
.xs-matrix-wrap{display:flex;align-items:center;gap:12px;min-width:0}
.xs-matrix-scroll,.xs-table-scroll{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}
.xs-matrix{border-collapse:separate;border-spacing:4px;font-variant-numeric:tabular-nums}
.xs-matrix th{padding:2px 6px;color:var(--muted);font:600 12px/1 var(--font-mono)}
.xs-matrix td{min-width:52px;height:44px;padding:4px 10px;border:1.5px solid var(--line-strong);border-radius:var(--r-sm);background:var(--paper);font:700 17px/1 var(--font-mono);text-align:center}
.xs-matrix--plain td{min-width:40px}
/* Highlighted cells must win over the base cell rule (same specificity, declared later). */
.xs-matrix td.xs-tone-accent{border-color:var(--xs-accent);border-width:2.5px;background:color-mix(in srgb,var(--xs-accent) 18%,var(--paper));font-weight:800}
.xs-matrix td.xs-tone-positive{border-color:var(--success);border-width:2.5px;background:var(--success-soft)}
.xs-matrix td.xs-tone-negative{border-color:var(--danger);border-width:2.5px;background:var(--danger-soft)}
.xs-matrix td.xs-tone-muted{color:var(--muted);background:var(--slate-100);border-style:dashed}
.xs-table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45}
.xs-table th,.xs-table td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;overflow-wrap:break-word;hyphens:auto}
.xs-table thead th{color:var(--ink);font-size:14px;font-weight:760;border-bottom:2px solid var(--xs-accent);overflow-wrap:normal;word-break:normal;hyphens:auto}
.xs-table tbody th{min-width:8ch;font-weight:700;overflow-wrap:normal;hyphens:auto}
@container (max-width:560px){
 .xs-table--stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
 .xs-table--stack,.xs-table--stack tbody,.xs-table--stack tr,.xs-table--stack th,.xs-table--stack td{display:block;width:100%}
 .xs-table--stack tr{margin-bottom:10px;padding:8px 12px;border-radius:var(--r-sm);background:var(--slate-50)}
 .xs-table--stack th,.xs-table--stack td{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:10px;padding:6px 0;border-bottom:1px solid var(--line);overflow-wrap:normal}
 .xs-table--stack tr>:last-child{border-bottom:0}
 .xs-table--stack [data-label]::before{content:attr(data-label);color:var(--muted);font-size:13px;font-weight:650}
}
.xs-grid{display:grid;grid-template-columns:repeat(var(--xs-cols),minmax(0,34px));gap:clamp(1px,.6cqi,3px);justify-content:start;max-width:100%}
.xs-grid-cell{display:grid;place-items:center;aspect-ratio:1;min-width:0;border-radius:var(--r-xs);background:var(--slate-50);font:700 clamp(11px,3.4cqi,17px)/1 var(--font-mono)}

/* Ranges: a stepped band on wide screens, a rail on narrow ones. */
.xs-ranges{display:grid;grid-template-columns:repeat(var(--xs-count),minmax(0,1fr));gap:4px;margin:0;padding:0;list-style:none}
.xs-range{display:grid;grid-template-rows:auto 1fr;min-width:0;border-radius:var(--r-sm);overflow:hidden;background:var(--slate-50)}
.xs-range-span{padding:10px 8px;background:var(--ink);color:var(--paper);font-size:13px;font-weight:700;line-height:1.3;text-align:center;font-variant-numeric:tabular-nums}
.xs-range-label{display:grid;place-items:center;padding:12px 8px;font-size:15px;font-weight:720;line-height:1.3;text-align:center;overflow-wrap:anywhere}
.xs-range:nth-child(even) .xs-range-span{background:var(--ink-700,var(--navy))}
.xs-range.xs-tone-accent .xs-range-span{background:var(--xs-accent)}
@container (max-width:720px){
 .xs-ranges{grid-template-columns:1fr;gap:0;border-left:3px solid var(--ink);margin-left:6px}
 .xs-range{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:none;border-radius:0;background:none;border-bottom:1px solid var(--line)}
 .xs-range-span{background:none!important;color:var(--ink-2);text-align:left;padding:12px 12px}
 .xs-range.xs-tone-accent{background:var(--xs-soft)}.xs-range.xs-tone-accent .xs-range-span{color:var(--ink);font-weight:760}
 .xs-range-label{place-items:center start;text-align:left}
}

/* Decision cases. */
.xs-cases{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.xs-case{display:grid;grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr);align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-sm);background:var(--slate-50)}
.xs-case-when{font-size:15px;line-height:1.4;font-weight:650}
.xs-case-then{font-size:15px;line-height:1.4;font-weight:760}
.xs-case.xs-tone-positive{background:var(--success-soft)}.xs-case.xs-tone-negative{background:var(--danger-soft)}.xs-case.xs-tone-accent{background:var(--xs-soft)}
.xs-arrow{width:22px;height:22px;flex:none;color:var(--xs-accent)}

/* Sequences and transformations. */
.xs-sequence{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.xs-term{display:grid;gap:2px;min-width:58px;padding:8px 10px;border-radius:var(--r-sm);background:var(--slate-50);text-align:center}
.xs-term small{color:var(--muted);font:600 12px/1.2 var(--font-mono)}.xs-term b{font:750 19px/1.2 var(--font-mono);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.xs-term.xs-tone-accent{background:var(--xs-soft)}.xs-term--more{display:grid;place-items:center;background:none}
.xs-transform{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px}
.xs-transform-side{display:grid;gap:6px;padding:12px 14px;border-radius:var(--r-sm);background:var(--slate-50);min-width:0}
.xs-transform-side small{color:var(--muted);font-size:13px;font-weight:650}
.xs-transform-side b{font:750 clamp(17px,2.2cqi,21px)/1.3 var(--font-mono);white-space:pre-wrap;overflow-wrap:anywhere}
.xs-to{background:var(--xs-soft)}
.xs-transform-via{display:grid;justify-items:center;gap:4px;max-width:12ch;color:var(--xs-accent);font-size:12px;font-weight:700;text-align:center}

/* Record and file. */
.xs-record{border:1.5px solid var(--ink);border-radius:var(--r-sm);overflow:hidden}
.xs-record-name{padding:8px 14px;background:var(--ink);color:var(--paper);font-weight:760;font-size:15px}
.xs-record dl{margin:0}.xs-field{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:12px;padding:10px 14px;border-top:1px solid var(--line)}
.xs-field:first-child{border-top:0}.xs-field dt{font-weight:720;font-size:15px}.xs-field dd{display:grid;gap:3px;margin:0}
.xs-type{font:650 14px/1.35 var(--font-mono);color:var(--xs-accent)}.xs-field-detail{color:var(--ink-2);font-size:14px;line-height:1.4}
.xs-file{max-width:640px;border:1.5px solid var(--line-strong);border-radius:var(--r-sm);overflow:hidden;background:var(--paper)}
.xs-file-tab{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--slate-100);font:700 14px/1.2 var(--font-mono)}
.xs-file-tab svg{width:18px;height:18px;color:var(--xs-accent)}
.xs-file-mode{margin-left:auto;padding:2px 8px;border-radius:var(--r-pill);background:var(--paper);color:var(--ink-2);font:650 12px/1.5 var(--font-sans)}
.xs-file-lines{margin:0;padding:8px 0;counter-reset:line;list-style:none;font:600 15px/1.6 var(--font-mono)}
.xs-file-lines li{counter-increment:line;display:grid;grid-template-columns:3ch minmax(0,1fr);gap:12px;padding:0 14px;white-space:pre-wrap;overflow-wrap:anywhere}
.xs-file-lines li::before{content:counter(line);color:var(--muted);text-align:right;font-weight:500}
.xs-file-lines .xs-file-more::before{content:''}
.xs-file-empty{margin:0;padding:14px;color:var(--ink-2);font-size:14px}
.xs-steps{display:grid;gap:8px;margin:0;padding:0;list-style:none;counter-reset:step}
.xs-steps li{counter-increment:step;display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start;font-size:15px;line-height:1.5}
.xs-steps li::before{content:counter(step);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--paper);font-weight:760;font-size:13px}

/* Geometric figures. */
.xs-figure svg{display:block;width:100%;max-width:300px;height:auto;margin-inline:auto;overflow:visible}
.xs-figure text{fill:var(--ink);font:700 15px var(--font-mono);paint-order:stroke;stroke:var(--paper);stroke-width:5px;stroke-linejoin:round}
.xs-figure--wide svg{max-width:640px}.xs-shape--thin{stroke-width:1.4}
.xs-axis-tick{stroke:var(--ink);stroke-width:2}.xs-nl-seg{stroke:var(--xs-accent);stroke-width:8;stroke-linecap:round;opacity:.85}
.xs-nl-seg.xs-nl-positive{stroke:var(--success)}.xs-nl-seg.xs-nl-negative{stroke:var(--danger)}.xs-figure .xs-nl-label{font-size:13px;fill:var(--xs-accent)}
.xs-shape{fill:none;stroke:var(--ink);stroke-width:2}.xs-shape--fill{fill:var(--xs-soft)}.xs-shape--hole{fill:var(--paper)}.xs-shape--dash{stroke-dasharray:5 5;stroke-width:1.4;stroke:var(--muted)}
.xs-dim{stroke:var(--xs-accent);stroke-width:2;stroke-dasharray:4 3}.xs-dot{fill:var(--xs-accent)}.xs-axis{stroke:var(--line-strong);stroke-width:1.5}

/* Contract: what the program receives and produces. */
.xs-contract{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(12px,2cqi,22px);align-items:stretch;padding:clamp(18px,3cqi,30px) clamp(16px,4cqi,44px)}
.xs-contract h3{margin:0 0 8px;font-size:15px;font-weight:760}
.xs-contract ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.xs-contract li{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:15px;line-height:1.45}
.xs-contract-side{min-width:0}
.xs-contract-core{display:flex;align-items:center;gap:8px;align-self:center;color:var(--ink-2);font-size:13px;font-weight:700;white-space:nowrap}
.xs-contract-core span{padding:8px 12px;border-radius:var(--r-pill);background:var(--ink);color:var(--paper)}
.xs-constraint{padding:2px 8px;border-radius:var(--r-pill);background:var(--warning-soft);color:var(--warning-text);font-size:13px;font-weight:700}
.xs-constraints{grid-column:1/-1;padding-top:14px;border-top:1px solid var(--line)}
.xs-constraints li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--warning);flex:none}
.xs-constraints li,.xs-contract-out li{flex-wrap:nowrap;align-items:baseline}.xs-constraints li>span,.xs-contract-out li>span{min-width:0}
.xs-constraints li::before{transform:translateY(-2px)}
.xs-none{margin:0;color:var(--muted);font-size:15px}

/* Examples: a console transcript; typed values stand out. */
.xs-examples{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px;padding:0 clamp(16px,4cqi,44px) clamp(20px,3.4cqi,36px)}
.xs-example{display:grid;gap:8px;min-width:0;margin:0}
.xs-example figcaption{font-size:14px;font-weight:760;color:var(--ink)}
.xs-console{display:grid;gap:4px;padding:14px 16px;border-radius:var(--r-md);background:var(--ink-900,#0b1626);color:#e6edf6;font:500 15px/1.55 var(--font-mono);overflow-wrap:anywhere}
.xs-line{margin:0;white-space:pre-wrap}
.xs-prompt{color:#9fb3c8}
.xs-console kbd{display:inline-block;max-width:100%;white-space:pre-wrap;vertical-align:top;padding:0 6px;border-radius:var(--r-xs);background:color-mix(in srgb,var(--xs-accent) 55%,#0b1626);color:#fff;font:700 15px/1.55 var(--font-mono)}
.xs-line--out{color:#fff;font-weight:650}

@container (max-width:620px){
 .xs-contract{grid-template-columns:1fr}
 .xs-contract-core{justify-self:start}.xs-contract-core .xs-arrow:first-child{display:none}.xs-contract-core .xs-arrow{transform:rotate(90deg)}
 .xs-transform{grid-template-columns:1fr}.xs-transform-via{justify-self:start}.xs-transform-via .xs-arrow{transform:rotate(90deg)}
 .xs-case{grid-template-columns:1fr;gap:4px}.xs-case .xs-arrow{display:none}.xs-case-then::before{content:'→ ';color:var(--xs-accent)}
 .xs-field{grid-template-columns:1fr;gap:4px}
 .xs-cell>b{font-size:18px}
}
@media (prefers-reduced-motion:no-preference){.xs-block{transition:box-shadow .2s ease-out}}

/* Axis labels stay legible when the 600-unit viewBox shrinks to a phone width. */
.xs-numberline text{font-size:22px}.xs-numberline .xs-nl-label{font-size:20px}
@container (min-width:640px){.xs-numberline text{font-size:15px}.xs-numberline .xs-nl-label{font-size:13px}}

/* Matrices stay whole on a phone: cells and indices tighten before anything scrolls. */
@container (max-width:460px){
 .xs-matrix{border-spacing:3px}
 .xs-matrix td{min-width:0;height:36px;padding:2px 5px;font-size:14px}
 .xs-matrix th{padding:1px 3px;font-size:11px}
 .xs-matrix-wrap{gap:6px}
}