.smallcaps{font-variant:small-caps;}
/* House style matching the standard OpenStax / XYZ PDF eBook (College Algebra 2e reference). */
/* One serif family across prose, math, and figure labels (STIX Two Text = what the figures are rendered in). */
@font-face{font-family:"STIX Two Text";src:url("/ebooks/html/_fonts/03a2c069ac25/STIXTwoText.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"STIX Two Text";src:url("/ebooks/html/_fonts/03a2c069ac25/STIXTwoText-Italic.woff2") format("woff2");font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:"STIX Two Math";src:url("/ebooks/html/_fonts/03a2c069ac25/STIXTwoMath-Regular.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Open Sans";src:url("/ebooks/html/_fonts/03a2c069ac25/open-sans-latin-wdth-wght-normal.woff2") format("woff2");font-weight:300 800;font-stretch:75% 100%;font-style:normal;font-display:swap}
@font-face{font-family:"Open Sans";src:url("/ebooks/html/_fonts/03a2c069ac25/open-sans-latin-wght-italic.woff2") format("woff2");font-weight:300 800;font-style:italic;font-display:swap}
:root{
  /* eBook content palette — the ADA set (Patrick, 2026-08-03: Title II / WCAG 2.1):
     ADA Blue #1D56A6 · ADA Orange #E66425 · ADA Red #D62128 · ADA Green #00874A ·
     Table Border #B6D4DA. Chrome (header/footer band) stays on the WEBSITE brand
     tokens (--xyz-*) and must keep matching rxh's xyz-tokens.css — different palette
     on purpose.
     Two ADA colors CANNOT be applied verbatim where this sheet puts that hue on text,
     and keep their AA-safe shades instead (same rule the brand applies to display
     orange #FF6E2D):
       --orange stays primary-700 #A94509 — it carries TEXT (h2 / section cards; the
       sidebar nav item moved to brand #FF6E2D by ruling 2026-09-03, waived),
       and ADA Orange #E66425 is 3.40:1 on white: large-text/graphics only, never body text.
       --green-text stays #007942 — ADA Green #00874A is 4.60:1 on white (AA, used for
       --green) but only 4.03:1 on the green-tint callout background, under the 4.5:1 bar
       the small bold callout labels need.
     White on ADA Blue is 7.16:1; ADA Blue on white 7.16:1; ADA Red on white 5.11:1. */
  --blue:#1D56A6; --orange:#A94509; --red:#DA2128; --green:#00874A;
  --purple:#7F3F98; --purple-tint:#F4EFF6;
  /* Sidebar chapter number. Its own token, and deliberately NOT --xyz-orange:
     the --xyz-* band tokens are BRAND-DEPENDENT (brand.css_override re-points
     --xyz-orange to VL's #0075C8), so binding the nav to one would silently
     repaint VL's sidebar in VL's band blue — a colour nobody has ruled on for
     this rail. This token is brand-independent and carries the XYZ Figma value;
     css_override points it back at --orange for every non-XYZ brand. */
  --nav-num:#FF6E2D;
  --blue-tint:#EFF1F5; --blue-line:#CFDDF0; --green-tint:#EAF3EC;
  --ink:#111827; --rule:#D9D9D9;
  --navy2:#154984;   /* 2026-09 Figma: opener rail chapter rows + section rail heading (7.69:1 on --xyz-bg) */
  /* WCAG-safe variants (see contrast_check.py's PAIRS): brand success-600 --green is only
     3.77:1 on white / 3.32:1 on green-tint, so SMALL green text (callout labels, free badge)
     uses --green-text; --green itself is border/decoration-only. --gray-meta is brand
     neutral-500. Never use these two as backgrounds. */
  --gray-meta:#586170; --green-text:#007942;
  /* STIX Two Math sits SECOND in both text stacks: the STIX Two Text subset carries none
     of ≤ ≥ ≠ ≈ ∞ ∈ √ ∫ → ⋅ ∘ (763 codepoints, measured 2026-09-07), so every prose-maths
     symbol used to fall to Georgia or an OS symbol font beside STIX variables. The math
     face is already loaded on every page; per-glyph fallback lands there first now. */
  --serif:"STIX Two Text","STIX Two Math",Georgia,"Times New Roman",serif;
  --math:"STIX Two Math","STIX Two Text",serif;   /* real MATH-table font -> correct fraction/radical sizing */
  /* 2026-09 design: Open Sans, self-hosted variable (wght 300-800) from the
     shared font prefix -- the same face the XYZ Homework site serves. The
     fallbacks stay: the latin cut covers 63 of the 64 codepoints the sans
     surfaces actually use, and U+221E in one 4.8 heading resolves through
     them by ordinary per-glyph fallback. See fonts/web/NOTICE-OpenSans.txt. */
  --sans:"Open Sans","STIX Two Math",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
body{margin:0;display:flex;flex-direction:column;min-height:100vh;
  font:18px/1.6 var(--serif);color:var(--ink);background:#fff}
/* reading area = the original two-column grid, now between the XYZ header & footer */
.reader-shell{display:grid;grid-template-columns:clamp(18rem,28vw,25.5rem) minmax(0,1fr);flex:1 0 auto;width:100%}
/* left-rail nav (sticky under the fixed-height XYZ header + book bar) */
nav.toc{position:sticky;top:var(--stack-h,6.6rem);align-self:start;
  height:calc(100vh - var(--stack-h,6.6rem));overflow:auto;
  font-family:var(--sans);font-size:1rem;line-height:1.36;background:var(--xyz-bg);
  padding:2.1rem 1.5rem 1rem clamp(1.25rem,5.5vw,5rem)}
/* 2026-09 Figma rail (Sidebar Nav Item 16/700, 37px pitch, #EEECEB ground, no rule):
   section titles 600 ink, numbers 800 in --nav-num, the CURRENT row wholly --nav-num with
   no fill; the chapter heading and the opener's chapter rows Open Sans Condensed 24/700
   navy. Orange text is --orange #A94509 (5.03:1 on this ground); the demo's #FF6E2D
   waiver (2026-09-07) was retired before the first live wave carried this rail. */
nav.toc a{display:block;color:var(--ink);font-weight:600;text-decoration:none;padding:0;margin:0 0 .95rem;line-height:1.36}
nav.toc a:hover{text-decoration:underline}
nav.toc a b{font-weight:800;color:var(--nav-num)}
nav.toc a.current,nav.toc a.current b{color:var(--nav-num);font-weight:800}
nav.toc a.apparatus{font-size:.94rem}
nav.toc .toc-ch,nav.toc.chapters a{font-size:1.5rem;line-height:1.36;font-weight:700;font-stretch:condensed;color:var(--navy2)}
nav.toc .toc-ch{margin:0 0 1.1rem}
nav.toc.chapters a{margin:0 0 1.5rem}
nav.toc .toc-ch b,nav.toc.chapters a b{color:var(--navy2);font-weight:700}
nav.toc.chapters a.current,nav.toc.chapters a.current b{color:var(--nav-num)}
main{max-width:48rem;width:100%;padding:0 2.2rem 6rem}
article{scroll-margin-top:1rem}
/* SC 2.4.11 Focus Not Obscured: keep anchor/focus scroll targets clear of the sticky
   header + book-bar stack (6.6rem) instead of letting them land underneath it */
html{scroll-padding-top:calc(var(--stack-h,6.6rem) + .75rem)}
/* section header = full-width blue bar (OpenStax "1.1" bar) */
h1{font-family:var(--sans);font-weight:700;font-size:1.22rem;letter-spacing:.01em;text-transform:uppercase;
  color:#fff;background:var(--blue);margin:1.9rem 0 1.2rem;padding:.62rem 1rem;border-radius:3px;line-height:1.25}
/* subsection headings = orange (OpenStax). Brand --orange is AA-safe at NORMAL text size
   (5.93:1 on white), so inline heading MATH sub-glyphs (super/subscript digits, which render
   below the large-text bar) pass 4.5:1 too — no h2-math color override needed anymore. */
h2{font-family:var(--sans);font-stretch:condensed;font-weight:700;font-size:1.3rem;color:var(--orange);margin:1.9rem 0 .5rem;line-height:1.25}
h3{font-family:var(--sans);font-weight:700;font-size:1.06rem;color:var(--blue);margin:1.3rem 0 .3rem}
p{margin:.7rem 0}
/* A URL is one unbreakable "word". Kozak's reference lists print the source URL
   in full ("Retrieved from http://data.worldbank.org/indicator/SH.XPD.TOTL.ZS"),
   sometimes as bare text rather than a link, and at the 320px reflow viewport a
   single one of those made its <p> 641px wide and took the whole document with
   it — WCAG 2.2 SC 1.4.10 again, and live on the deployed book. break-word only
   engages when the line would otherwise overflow, so ordinary prose is
   untouched. Scoped to the prose carriers: table cells stay as they are, since
   .table-scroll already contains them and breaking there would wreck the
   column widths of the critical-value tables. */
p,li,dd,figcaption{overflow-wrap:break-word}
strong,b{font-weight:700}
dfn{font-style:normal;font-weight:700;color:var(--ink)}    /* bold inline key terms, like the PDF */
/* worked example: white-on-blue "Example N" chip */
aside.example{background:var(--blue-tint);border:1px solid var(--blue-line);border-radius:6px;padding:.7rem 1rem;margin:1.5rem 0}
.ex-head{margin:.05rem 0 .55rem;font-family:var(--sans);font-stretch:condensed;font-size:1rem;font-weight:700;color:var(--ink)}
.ex-label{display:inline-block;background:var(--blue);color:#fff;font-family:var(--sans);font-weight:700;font-size:.82rem;
  padding:.14rem .55rem;border-radius:3px;margin-right:.55rem}
.solution::before{content:"Solution";display:block;font-family:var(--sans);font-weight:700;font-size:.85rem;color:var(--blue);margin:.4rem 0 .15rem}
.run-title{font-family:var(--sans);font-weight:700;color:var(--blue)} /* run-in Strategy/Solution/Significance labels — same --blue-on-white/blue-tint pairs as .solution::before */
.solution.hint::before{content:"Hint"}
.solution.answer::before{content:"Answer"}
/* callouts by role */
aside{border-left:4px solid #8a94a6;background:#f7f8fa;padding:.6rem 1rem;margin:1.3rem 0;border-radius:0 6px 6px 0}
.callout-label{display:block;font-family:var(--sans);font-weight:700;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;margin:0 0 .35rem;color:#566}
.note-title{font-weight:700;font-style:italic;margin:.1rem 0 .35rem}
aside.note-check-point,aside.note-checkpoint,aside.note-formula,aside.note-work-out{border-left-color:var(--green);background:var(--green-tint)}
aside.note-check-point .callout-label,aside.note-checkpoint .callout-label,aside.note-formula .callout-label,aside.note-work-out .callout-label{color:var(--green-text)}
aside.note-who-knew,aside.note-people-mathematics,aside.note-tech-check{border-left-color:var(--blue);background:var(--blue-tint)}
aside.note-who-knew .callout-label,aside.note-people-mathematics .callout-label,aside.note-tech-check .callout-label{color:var(--blue)}
aside.note-video{border-left-color:var(--red)} aside.note-video .callout-label{color:var(--red)}
/* Stitz-Zeager amsthm callouts: definition/theorem/corollary share the blue bucket,
   equation joins the green one. Labels are SMALL text, so they use --green-text
   (--green is 3.32:1 on green-tint and would fail the contrast gate). */
aside.note-theorem,aside.note-corollary{border-left-color:var(--blue);background:var(--blue-tint)}
aside.note-theorem .callout-label,aside.note-corollary .callout-label{color:var(--blue)}
aside.note-try,aside.note-practice-program{border-left-color:var(--purple);background:var(--purple-tint)}
aside.note-try .callout-label,aside.note-practice-program .callout-label{color:var(--purple)}
aside.note-equation{border-left-color:var(--green);background:var(--green-tint)}
aside.note-equation .callout-label{color:var(--green-text)}
/* Stitz exercise answer keys: collapsible, keyboard-operable, no JS */
details.answer{margin:.5rem 0 .9rem;border:1px solid var(--rule);border-radius:6px;padding:.15rem .7rem;background:var(--blue-tint)}
details.answer summary{cursor:pointer;font-family:var(--sans);font-weight:700;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);padding:.3rem 0}
details.answer[open] summary{border-bottom:1px solid var(--rule);margin-bottom:.4rem}
aside.note-tip{border-left-color:var(--green);background:var(--green-tint)}
aside.note-tip .callout-label{color:var(--green-text)}
aside.note-important{border-left-color:var(--red)}
aside.note-important .callout-label{color:var(--red)}
/* Mojo Manual lane: build-verified example cells. The output disclosure is a
   native <details> (zero JS, keyboard/AT accessible); its <pre> reuses
   .code-block for styling + the clean_artifacts shield. */
.code-title{font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace;
  font-size:.78rem;color:#555;background:#eef0f3;border:1px solid #dde1e6;border-bottom:0;
  border-radius:6px 6px 0 0;padding:.3rem .8rem;margin-top:.9rem}
.code-title+pre.code-block{margin-top:0;border-top-left-radius:0;border-top-right-radius:0}
.code-example{margin:.9rem 0}
.code-example pre.code-block{margin-bottom:0}
details.code-output{margin:0 0 .9rem}
details.code-output summary{cursor:pointer;font-size:.85rem;font-weight:600;color:#3b4551;
  background:#f4f6f8;border:1px solid #dde1e6;border-top:0;border-radius:0 0 6px 6px;
  padding:.4rem .8rem}
details.code-output summary:hover{background:#eceff2}
details.code-output summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
details.code-output[open] summary{border-radius:0}
details.code-output pre.code-block{margin:0;border-top:0;border-radius:0 0 6px 6px;
  background:#0f1419;color:#e6e6e6}
.verified-chip{font-weight:600;font-size:.72rem;color:var(--green-text);

  background:var(--green-tint);border:1px solid var(--green);border-radius:99px;
  padding:.1rem .55rem;white-space:nowrap}
.cas-result{margin:1.25rem 0;padding:.75rem 1rem;border-left:3px solid var(--rule);
  background:var(--green-tint);overflow-x:auto}
.cas-result math{margin:0}
.cas-result figcaption{margin-top:.5rem;font-size:.86rem;color:var(--gray-meta);flex-wrap:wrap}
/* An authored caption folded into the single figcaption keeps its own visual
   line: full flex row under the title+chips row (see cas_result_html). */
.cas-result .cas-cap{flex-basis:100%;display:block}
.cas-unchecked{font-weight:600;font-size:.72rem;color:var(--orange)}
/* The provenance sentence is for assistive tech: a sighted reader already has
   the chips, and repeating the same claim in prose next to them is noise. */
.cas-a11y{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}
/* disclosed divergence: what the pinned toolchain printed vs what the source
   documentation claims (the runner flags it; the page shows it) */
p.output-drift{font-family:var(--sans);font-size:.8rem;color:#3b4551;
  background:#f4f6f8;border-top:1px solid #dde1e6;margin:0;padding:.45rem .8rem}
pre.code-block.claimed{background:#f7f8fa;color:#3b4551;border-top:0;
  border-radius:0 0 6px 6px}
/* footnotes: superscript marker in prose + flat endnote list at the page foot
   (NOT the gray callout box the generic aside rule gives) — text inherits the
   --ink-on-white pair, --rule is decoration-only */
.fn-ref a{text-decoration:none;font-weight:700;padding:0 .08em}
aside.footnotes{border-left:0;background:none;border-radius:0;border-top:1px solid var(--rule);
  margin-top:2.4rem;padding:.8rem 0 0;font-size:.92rem}
aside.footnotes ol{margin:.2rem 0 0 1.3rem;padding:0}
aside.footnotes li{margin:.3rem 0}
/* SC 2.5.8 Target Size (Minimum): a footnote's "return" glyph is a single character
   sitting immediately beside the footnote's own link, so neither cleared the 24px
   minimum NOR the spacing exception (their 24px circles intersect). Give both a real
   24px box. max-width + overflow-wrap keep a long bare URL breaking inside its own
   inline-block instead of pushing the page sideways. */
aside.footnotes a[href^="#fnref-"]{display:inline-block;min-width:24px;min-height:24px;line-height:24px;text-align:center;vertical-align:middle;text-decoration:none}
aside.footnotes li>a{display:inline-block;min-height:24px;line-height:24px;max-width:100%;overflow-wrap:anywhere}
/* SC 1.4.10 Reflow: a link whose visible text IS a bare URL cannot wrap at any
   normal break opportunity, so at the 320px viewport it pushes the whole page
   sideways (Lebl cites six of them by full URL — jirka.org/diffyqs,
   conf.math.illinois.edu/iode/fsgui.html — and each one failed the reflow lane
   on its own page). `anywhere`, not `break-word`: only `anywhere` shrinks the
   element's min-content width, which is what the overflow is measured against.
   Scoped to prose links inside <main>, so nav/header/footer chrome is untouched. */
main a{overflow-wrap:anywhere}
.exercise-ref{display:block;font-family:var(--sans);font-size:.9rem;color:#566;padding:.15rem 0}
/* standalone code sample (Introduction to Python Programming). white-space:pre-wrap +
   overflow-wrap (not plain `pre`'s default horizontal scroll) so a long line reflows
   instead of requiring horizontal scroll — WCAG 1.4.10 Reflow, same as everything else
   on the page at 320px/400% zoom. */
pre.code-block{font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace;
  font-size:.92rem;line-height:1.5;background:#f7f8fa;border:1px solid var(--rule);border-radius:6px;
  padding:.7rem 1rem;margin:1rem 0;white-space:pre-wrap;overflow-wrap:anywhere}
pre.code-block code{font-family:inherit;background:none;padding:0}
/* inline video player (XYZ "+ to play") */
.video{display:block;margin:.35rem 0}
.vbtn{font-family:var(--sans);font-size:.85rem;font-weight:600;color:#fff;background:var(--red);border:0;border-radius:4px;padding:.22rem .6rem;cursor:pointer}
.vbtn:hover{filter:brightness(.92)}
.vtitle{font-weight:600}
.vlink{font-family:var(--sans);font-size:.8rem;color:#566;margin-left:.4rem;text-decoration:none}
.vlink:hover{text-decoration:underline}
.vwrap{display:block;margin-top:.6rem}
.vframe{display:block;width:100%;max-width:40rem;aspect-ratio:16/9;border:1px solid var(--rule);border-radius:6px}
/* FBD Studio self-check widget (standalone pages only — never in sections/ fragments).
   Shell styles (.fbd, .fbd-pv-*, launcher) are ours; the .fbd-root subtree is the engine's
   own UI (fbd.css from IMathAS-FORK master) re-tokened onto the reader palette —
   every text/bg pair is pinned in contrast_check.py. The engine's SVG vector strokes
   (Okabe-Ito) are set in fbd.js, not here. */
.fbd{margin:1.5rem 0;padding:.8rem 1rem;border:1px solid var(--blue-line);border-left:4px solid var(--blue);
  border-radius:0 6px 6px 0;background:#fff}
.fbd>figcaption{font-family:var(--sans);font-weight:700;color:var(--ink);margin:0 0 .5rem}
.fbd-kicker{display:inline-block;background:var(--blue);color:#fff;font-family:var(--sans);font-weight:700;
  font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;padding:.14rem .55rem;border-radius:3px;margin-right:.55rem}
.fbd-preview{display:block;max-width:100%;height:auto;margin:.3rem 0}
.fbd-pv-ground{stroke:var(--gray-meta);stroke-width:2}
.fbd-pv-hatch{stroke:var(--gray-meta);stroke-width:1}
.fbd-pv-body{fill:var(--blue-tint);stroke:var(--ink);stroke-width:2}
.fbd-pv-label{font-family:var(--sans);font-size:13px;fill:var(--ink)}
.fbd-pv-motion{stroke:var(--gray-meta);stroke-width:2;stroke-dasharray:4 3}
.fbd-pv-motionhead{fill:var(--gray-meta)}
.fbd-prompt{margin:.4rem 0}
.fbd-actions{margin:.5rem 0}
.fbd-toggle{font-family:var(--sans);font-size:.9rem;font-weight:600;color:#fff;background:var(--blue);
  border:0;border-radius:4px;padding:.45rem .8rem;min-height:44px;cursor:pointer}
.fbd-toggle:hover{filter:brightness(.92)}
.fbd-toggle[aria-pressed="true"]{box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px var(--blue)}
.fbd-simlink{font-family:var(--sans);font-size:.8rem;color:#566;margin-left:.6rem;text-decoration:none}
.fbd-simlink:hover{text-decoration:underline}
.fbd-status{font-family:var(--sans);font-size:.9rem;color:var(--ink);margin:.3rem 0}
.fbd-mount{margin-top:.5rem}
/* --- engine UI (classes emitted by fbd.js) --- */
.fbd-root{--fbd-ink:var(--ink);--fbd-rule:#c7ccd3;--fbd-bg:#fff;--fbd-surface:#f6f7f9;
  --fbd-accent:var(--blue);--fbd-ok:var(--green);--fbd-warn:var(--orange);
  font-family:var(--sans);color:var(--fbd-ink);max-width:540px;border:1px solid var(--fbd-rule);
  border-radius:8px;padding:10px;background:var(--fbd-bg)}
.fbd-sronly{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fbd-stagewrap{text-align:center}
.fbd-stage{border:1px solid var(--fbd-rule);border-radius:6px;background:var(--fbd-bg);max-width:100%;height:auto;touch-action:none}
.fbd-stage:focus{outline:3px solid var(--fbd-accent);outline-offset:2px}
.fbd-ground,.fbd-hatch{stroke:var(--gray-meta);stroke-width:2}
.fbd-hatch{stroke-width:1}
.fbd-wedge{fill:var(--blue-tint);stroke:var(--gray-meta);stroke-width:1.5}
.fbd-circpath{fill:none;stroke:#8a94a6;stroke-width:1.5;stroke-dasharray:6 5}
.fbd-circcenter{fill:var(--gray-meta)}
.fbd-envlabel,.fbd-axislabel,.fbd-bodylabel{font-size:13px;fill:var(--gray-meta)}
.fbd-body{fill:var(--blue-tint);stroke:var(--ink);stroke-width:2}
.fbd-com{fill:#000}
.fbd-axis{stroke:#000;stroke-width:1.6}
.fbd-vec .fbd-shaft,.fbd-vec .fbd-head{cursor:grab}
.fbd-grab{fill:transparent;cursor:grab}
.fbd-selhalo{stroke:#F0E442;stroke-width:9;stroke-linecap:round;opacity:.85} /* selection halo — decoration-only, never text */
.fbd-scratch{opacity:.45}
.fbd-veclabel{font-size:13px;fill:var(--fbd-ink);paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round;pointer-events:none}
.fbd-angreadout{font-size:12px;fill:var(--gray-meta);paint-order:stroke;stroke:#fff;stroke-width:3px;pointer-events:none}
.fbd-motionarrow{stroke:var(--gray-meta);stroke-width:2;stroke-dasharray:4 3}
.fbd-motionhead{fill:var(--gray-meta)}
.fbd-motionlabel{font-size:12px;font-style:italic;fill:var(--gray-meta)}
.fbd-btn{min-height:44px;min-width:44px;padding:6px 12px;margin:2px;border:1px solid var(--fbd-rule);
  border-radius:6px;background:var(--fbd-surface);color:var(--fbd-ink);font-size:14px;cursor:pointer}
.fbd-btn:hover{background:#e7edf7}
.fbd-btn:focus-visible{outline:3px solid var(--fbd-accent);outline-offset:1px}
.fbd-btn:disabled{opacity:.5;cursor:default}
.fbd-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:2px;margin:6px 0}
.fbd-barlabel{font-weight:600;margin-right:4px}
.fbd-swatch{display:inline-block;width:14px;height:14px;border-radius:3px;border:1px solid #566;vertical-align:-2px}
.fbd-bodytabs{display:flex;gap:4px;margin-bottom:4px}
.fbd-tab[aria-selected="true"]{background:var(--fbd-accent);color:#fff;border-color:var(--fbd-accent)}
.fbd-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:6px 0}
.fbd-sum{font-family:ui-monospace,Menlo,monospace;font-size:14px;border:1px solid var(--fbd-rule);
  border-radius:6px;padding:6px 10px;background:var(--fbd-surface)}
.fbd-axesctl{font-size:14px}
.fbd-axesctl input{width:64px;min-height:36px;font-size:14px}
.fbd-spctl{margin:4px 0}
.fbd-sp{font-size:18px}
.fbd-list{border:1px solid var(--fbd-rule);border-radius:6px;margin:8px 0;padding:6px 10px}
.fbd-list legend{font-weight:600;font-size:14px;padding:0 4px}
.fbd-listul{list-style:none;margin:0;padding:0}
.fbd-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:6px 0;border-bottom:1px dashed var(--fbd-rule)}
.fbd-row:last-child{border-bottom:none}
.fbd-row select,.fbd-row input[type="number"],.fbd-row input[type="text"]{min-height:40px;font-size:14px;
  border:1px solid var(--fbd-rule);border-radius:4px;padding:2px 6px}
.fbd-f-angle,.fbd-f-len{width:76px}
.fbd-f-custom{width:110px}
.fbd-fieldw{font-size:13px}
.fbd-scratchw input{width:20px;height:20px}
.fbd-empty{color:#555;font-style:italic;padding:6px 0}
.fbd-rm{min-width:40px}
.fbd-steps{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.fbd-steplabel{margin:0;font-weight:600;font-size:14px}
.fbd-stepnav{display:flex;gap:4px}
.fbd-hints{border:1px solid var(--fbd-rule);border-radius:6px;padding:8px 10px;margin:8px 0;background:var(--fbd-surface)}
.fbd-hinthead{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.fbd-hinttitle{font-weight:600;font-size:14px}
.fbd-hintcost{font-size:12.5px;color:#566}
.fbd-hint{margin:6px 0;font-size:14px;padding-left:10px;border-left:3px solid var(--fbd-accent)}
.fbd-tier3{border-left-color:var(--fbd-warn)}
.fbd-feedback{margin:6px 0}
.fbd-mis{margin:5px 0;padding:7px 10px;border-left:4px solid var(--fbd-warn);background:#ffd9c5;font-size:14px;border-radius:0 6px 6px 0}
.fbd-ok{margin:5px 0;padding:7px 10px;border-left:4px solid var(--fbd-ok);background:var(--green-tint);font-size:14px;border-radius:0 6px 6px 0}
.fbd-help{font-size:12.5px;color:#566;margin:6px 0 0}
.fbd-static .fbd-root{border:none;padding:0}
.fbd-staticlist{font-size:13px;color:#566;margin:6px 0 0;padding-left:20px}
@media (prefers-reduced-motion:reduce){.fbd-root *{transition:none!important;animation:none!important}}
@media (prefers-contrast:more){.fbd-root{--fbd-rule:#000}.fbd-veclabel{stroke-width:4px}}
@media (forced-colors:active){.fbd-btn,.fbd-stage,.fbd-list,.fbd-hints{border:1px solid ButtonText}.fbd-selhalo{stroke:Highlight}}
@media (max-width:560px){.fbd-root{max-width:100%}.fbd-row{flex-direction:column;align-items:stretch}}
/* math — STIX Two Math (matches STIX Two Text body, has the MATH table for proper fractions/radicals) */
math{font-family:var(--math);font-size:1.05em}
/* NO display override: the UA renders <math display=block> as the special
   `block math` display type; forcing plain block makes Chrome stack each
   top-level MathML child on its own line (MathJax-shaped MathML has bare
   top-level children — equations collapsed into vertical slivers). */
/* Preserve the complete expression's intrinsic width. fit-content can shrink
   nested MathML rows independently, making successive fractions/relations
   overlap even when the parent correctly contains horizontal overflow. */
math[display="block"]{width:max-content;margin:1rem auto;font-size:1.1em}
/* Chrome (MathML Core) + a MATH-table font (STIX Two Math) skips the script-size
   step for a radical that is a DIRECT child of a fraction: the √n in σ/√n keeps
   full size and overflows the fraction bar (denominator most visibly; live report
   was PDS §4.1's E = z_c σ/√n, broken twice on one screen). Re-asserting the UA
   sizing here fixes it; on engines that already size correctly it re-declares the
   same value — a no-op. Verified headless against display/inline, numerator,
   both-sides, and expression-radicand cases. */
mfrac>msqrt,mfrac>mroot{math-depth:auto-add;font-size:math}
/* Prime in a script: request the font's ssty alternate on the emitter-stamped depth-1 prime only,
   per MathML 3.0 §7.7.2 (pseudo-scripts are pre-shrunk/raised) and Mozilla bug 442637. */
math mo.prime{font-feature-settings:"ssty" 1}
/* numbered display equation — OpenStax right-margin "(2.9)". Grid keeps the
   formula optically centred in the text column (equally-weighted 1fr gutters)
   with the number pinned to the right edge; the centre track can scroll a
   too-wide formula (min-width:0 + overflow-x) instead of overflowing the page. */
/* middle track is minmax(0,auto): sizes to the formula when it fits, but may shrink
   below its content so a too-wide formula scrolls inside .eqn-body instead of pushing
   the grid (and the page) wider than the viewport. */
.eqn{display:grid;grid-template-columns:1fr minmax(0,auto) 1fr;align-items:center;column-gap:.5rem;margin:1rem 0}
.eqn-body{grid-column:2;min-width:0;overflow-x:auto}
/* Same containment for UNnumbered display math, which is not in the .eqn grid:
   a wide formula scrolls instead of dragging the page sideways (SC 1.4.10 Reflow).
   The scroller is the math's PARENT, never the <math> itself. Putting overflow-x
   on <math> looks like it leaves the other axis alone, but CSS Overflow 3 says a
   `visible` axis computes to `auto` when the other one is not visible — so
   overflow-y:visible silently became overflow-y:auto, every tall formula
   (fractions, radicals, matrices) became a VERTICALLY scrollable region, and
   axe flagged all of them scrollable-region-focusable: 1076 across this book.
   Tall radicals were being cut too, which that declaration existed to prevent.
   Padding cannot fix it — the overflow scales with content, so it just moves the
   threshold. A parent block box sizes to its content vertically, so it scrolls on
   one axis only. This mirrors .eqn-body and .table-scroll, the two containers
   that already got this right. */
:has(> math[display="block"]){max-width:100%;overflow-x:auto}
math[display="block"]{max-width:none;overflow-x:visible;overflow-y:visible}
/* ...except inside the numbered-equation grid, which is ALREADY the scroller:
   nesting a second one there would double the scroll containers and the tab stops. */
.eqn-body :has(> math[display="block"]),
.eqn-body math[display="block"]{max-width:none;overflow-x:visible}
.eqn-body p{margin:0}
.eqn-body math[display="block"]{margin:0 auto}
/* number chip inherits the allowlisted caption gray (#555 on white) */
.eqn-num{grid-column:3;justify-self:end;white-space:nowrap;font-family:var(--sans);font-size:.9rem;color:#555}
/* Author \alert{} emphasis renders as mathcolor="magenta" (#FF00FF, 3.14:1 on white — fails
   the 4.5:1 normal-text bar; caught by the WCAG 2.2 AA gate on the Yoshiwara build). Remap to
   an AA-safe magenta (mediumvioletred #c71585, 5.42:1) via CSS color, which overrides the
   presentation attribute and cascades to descendants — preserves the alert emphasis, accessibly. */
[mathcolor="magenta"]{color:#c71585}
/* EVERY image is responsive, not just the ones inside a <figure>. Every sizing
   rule below is scoped `figure img[...]`, so an <img> emitted as a bare child of
   an <li> or <p> matched nothing and kept `max-width:none` — it rendered at its
   intrinsic pixel width and pushed the document wider than the viewport. Kozak
   §6.4 puts its TI-84 screenshots (345-347px) straight into list items: at the
   320px reflow viewport the page scrolled to 405px, failing WCAG 2.2 SC 1.4.10,
   and it did so on the LIVE deployment for as long as that book has been up. The
   figure-scoped rules keep specificity over this one and still specialise. */
img{max-width:100%;height:auto}
.inline-media-run{display:inline-block;white-space:nowrap}
.inline-media-stack{display:inline-block;max-width:100%;text-align:center;vertical-align:middle;white-space:nowrap}
.inline-media-run--three{display:inline-flex;max-width:100%;gap:.25em;align-items:baseline}
.inline-media-run--three>img{min-width:0;flex:0 1 auto;height:auto}
.inline-media-blank{flex:0 1 100px;min-width:0}
/* figures — figure box shrinks to the image so the caption can't exceed the image width */
figure{width:fit-content;max-width:100%;margin:1.6rem auto;text-align:center}
figure img{height:auto}
/* white card for RASTERS only (photos) — vector figures stay transparent so they
   blend with tinted callout backgrounds (white boxes on shaded asides looked broken) */
figure img[src$=".jpg"],figure img[src$=".jpeg"],figure img[src$=".png"]{border:1px solid #eee;border-radius:6px;background:#fff;padding:6px}
figure img[src^="figures/"]{width:min(100%,30rem);max-height:32rem}   /* vector diagrams: scale dense ones (area models) up to a legible width */
figure img[src^="photos/"]:not([src$=".svg"]){max-width:min(100%,20rem);max-height:18rem}  /* raster photos: keep modest */
/* Vector figures the InDesign ingest stages under photos/ carry their print width on
   the <figure>; the raster cap pinned 131 of them at 320px (audit G1). Never capped. */
figure img[src^="photos/"][src$=".svg"]{max-width:100%;max-height:none}
/* math-chip rasters (OpenStax equation/step strips, tagged .eqchip at emit): no
   white card — the baked white canvas is blended away (multiply) so chips sit
   flush on tinted step-table cells; the emit-time em height (~1.4x natural,
   font-relative) restores legibility and width follows the aspect ratio. */
figure img.eqchip{border:0;border-radius:0;background:transparent;padding:0;
  mix-blend-mode:multiply;height:auto;max-width:100%;max-height:none}
/* re-typeset equation SVGs (eq_arrows lane): transparent vectors sized by their
   own pt width at emit — never the 30rem diagram width. height:auto on both
   classes so any width cap scales, never stretches. */
figure img.eqvec{height:auto;max-width:100%;max-height:none}
/* step tables: the roomy standalone-figure margin reads as empty space inside a cell */
td figure{margin:.4rem 0}
/* caption: one line, description only; credit hidden behind an ⓘ rollover */
figcaption{display:flex;justify-content:center;align-items:baseline;gap:.3rem;font-family:var(--sans);font-size:.85rem;color:#555;margin:.45rem 0 0;max-width:100%}
.cap-desc{min-width:0}
/* "Figure 5.3" / "Table 1.1" number chip (bold, inherits the caption gray #555 —
   an allowlisted pair); flex:none so the description column does the truncating */
.cap-label{flex:none;font-weight:700}
.credit-wrap{flex:none;position:relative}
.credit{cursor:pointer;color:#2156b8;background:none;border:0;padding:0;font:inherit;font-weight:700;line-height:1;display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:24px}
.credit-pop{position:absolute;left:50%;transform:translateX(-50%);bottom:150%;width:min(22rem,80vw);background:#222;color:#fff;font:400 .78rem/1.4 var(--sans);padding:.45rem .65rem;border-radius:6px;white-space:normal;text-align:left;display:none;z-index:10;box-shadow:0 2px 9px rgba(0,0,0,.28)}
/* shown by pointer hover (pop is inside the wrap, so it stays hoverable — SC 1.4.13) or by
   the button's JS toggle; .dismissed is set by Escape (PLAYER_JS) until the pointer leaves */
.credit-wrap:hover:not(.dismissed) .credit-pop,.credit[aria-expanded="true"]+.credit-pop{display:block}
/* tables */
table{border-collapse:collapse;margin:1.3rem auto;font-size:.95rem}
/* Wide data tables scroll inside their own container rather than forcing the page
   to scroll (SC 1.4.10). The wrapper is keyboard-focusable and labelled so the
   scroll region is reachable without a mouse (SC 2.1.1). */
.table-scroll{overflow-x:auto;max-width:100%;margin:1.3rem 0}
.table-scroll>table{margin:0 auto}
.table-scroll:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
/* table number/title ("Table 1.1 Fundamental SI Units") — same visual family as
   figcaption (#555 on white is the allowlisted caption pair) */
table caption{caption-side:top;text-align:center;font-family:var(--sans);font-size:.85rem;color:#555;padding:0 .5rem .35rem}
th,td{border:1px solid #B6D4DA;padding:.4rem .7rem;text-align:left;vertical-align:middle}
th{background:#eef1f5;font-family:var(--sans);font-size:.9rem}
/* pager */
.pager{display:flex;justify-content:space-between;gap:1.5rem;margin-top:3rem;padding-top:1rem;border-top:2px solid var(--rule);font-family:var(--sans);font-size:.9rem}
.pager a{color:var(--blue);text-decoration:none;max-width:46%}.pager a:hover{text-decoration:underline}
/* chapter landing, 2026-09 Figma: hero photograph, then an orange band with the title
   left (Open Sans Condensed 45/700) and the numeral right (Open Sans 79/800), then the
   unnumbered Introduction. Text on the brand orange is --xyz-ink (4.71:1); the demo's
   white-on-orange waiver (2026-09-07) was retired before the first live wave. */
.chap-landing figure.hero{margin:0 0 .2rem;width:100%;max-width:none}
.chap-landing figure.hero img{width:100%;max-width:none;height:21rem;max-height:none;object-fit:cover;display:block;border:0;border-radius:0;padding:0;background:none}
.chap-landing figure.hero figcaption{font-size:.86rem;color:var(--gray-meta);margin:.45rem 0 .9rem}
.chap-band{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:7.5rem;padding:0 2.2rem 0 2.4rem;background:var(--xyz-orange);color:var(--xyz-ink);margin:0 0 1.4rem}
.chap-band h1{font:700 2.8rem/1 var(--sans);font-stretch:condensed;color:var(--xyz-ink);background:none;margin:0;padding:0;text-transform:none;letter-spacing:0;text-wrap:balance;min-width:0;overflow-wrap:anywhere}
.chap-num{font:800 4.9rem/1 var(--sans);letter-spacing:.02em;color:var(--xyz-ink);flex:none}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.chap-landing>p{font-size:1.05rem}
.chap-landing > ol{font-family:var(--sans);font-size:1.02rem;list-style:none;padding:0;margin-top:1.2rem}
.chap-landing > ol li{margin:.45rem 0}
.chap-landing > ol a{display:block;color:var(--blue);text-decoration:none;padding:.55rem .85rem;border:1px solid var(--rule);border-radius:6px}
.chap-landing > ol a:hover{background:var(--blue-tint)}
.chap-landing > ol a b{color:var(--orange);margin-right:.45rem}
/* chapter-opener intro (lead of section 1) shown on the landing */
.chap-intro{font-size:1.06rem;line-height:1.65;color:var(--ink);margin:.2rem 0 1.2rem}
.chap-intro p{margin:.7rem 0}
.chap-intro figure{margin:1rem auto 1.2rem}
.chap-intro figure img[src^="photos/"]:not([src$=".svg"]){max-width:min(100%,26rem);max-height:22rem}
.chap-sub{font-size:1.05rem;color:#566}
.sec-list-head{font-family:var(--sans);text-transform:none;color:var(--ink);background:none;
  font-size:1.1rem;font-weight:700;margin:1.7rem 0 .7rem;padding:0}
.sec-meta{font-family:var(--sans);font-size:.78rem;color:var(--gray-meta);margin:.2rem 0 1rem}
/* per-page source + license notice (page_attrib) — same muted meta treatment as
   .sec-meta, ruled off from the content it attributes. The link keeps the global
   `a` color; both pairs are already in contrast_check's allowlist. */
.page-attrib{font-family:var(--sans);font-size:.78rem;line-height:1.5;color:var(--gray-meta);
  border-top:1px solid var(--rule);margin:2.5rem 0 0;padding:.9rem 0 0}
.skip{position:absolute;left:-9999px;top:auto}
.skip:focus{left:.6rem;top:.6rem;z-index:80;background:#fff;border:2px solid var(--blue);padding:.4rem .7rem;border-radius:6px;font-family:var(--sans)}
/* minmax(0,1fr), NOT 1fr: a bare 1fr track is minmax(AUTO,1fr), whose automatic
   minimum is the content size — so at mobile widths the single column refused to
   shrink below its widest table and <main> stayed ~733px inside a 320px viewport,
   taking the page with it (SC 1.4.10). The desktop track at .reader-shell already
   guards this; the mobile override silently dropped the guard. */
@media(max-width:820px){.reader-shell{grid-template-columns:minmax(0,1fr)}
  nav.toc{position:static;height:auto;border-right:0;border-bottom:1px solid var(--rule);padding:1.25rem 1.1rem .5rem}
  nav.toc .toc-ch,nav.toc.chapters a{font-size:1.25rem}
  main{padding:0 1.1rem 4rem}
  .book-bar-in{flex-wrap:wrap;gap:.4rem .9rem}}

/* ===== XYZ Homework site header + footer (brand band; reader colors unchanged) =====
   --xyz-orange is the BAND fill: the orange that sits behind text in the site header
   CTA and the footer. It is the canonical brand primary #FF6E2D (owner decision,
   2026-08-06, restoring the pre-2026-08 brand: PRIMARY #FF6E2D / SECONDARY #154984 /
   BACKGROUND #EEECEB). White on it is 2.79:1, so the band pairs it with dark ink
   text (4.71:1, clears AA) — the readers' original scheme. --xyz-orange-dark stays
   declared for cross-repo token parity with www but must not sit under ink text
   (3.70:1). Keep both in step with --color-xyz-orange/-dark in
   refresh-xyzhomework/resources/css/xyz-tokens.css; tests/test_brand_band_tokens.py
   pins both to the shared token. */
/* --xyz-ftr-bg/--xyz-ftr-text are the FOOTER band. RULING (Patrick, #502,
   reconfirmed 2026-08-29 resolving #514): the footer is WHITE text on XYZ
   Orange (#ff6e2d), the brand primary — recorded so it stops flipping. The
   wordmark is knocked out to white (brightness(0) invert(1)) to match. The
   tokens stay separate from --xyz-orange because VL re-points them.
   An earlier comment here narrated the opposite (a same-day reversal to
   ink-on-orange) above values that said white — a #504 merge artifact; #514
   has the archaeology. KNOWN, ACCEPTED DEVIATION: white on #ff6e2d measures
   2.79:1, below the 4.5:1 AA body-text threshold, on the band that carries
   the prerelease ADA notice. That trade is the ruling's to make and it is
   made here explicitly, not by accident — do not "fix" it to ink without a
   new ruling. The contrast gate audits this pair and carries the ruling as
   a WAIVED entry (contrast_check.py, owner+date+verbatim quote, with the
   Title II revisit note); a value change here must retire that waiver in
   the same commit, and vice versa. */
:root{--xyz-orange:#ff6e2d;--xyz-orange-dark:#e85a1d;--xyz-ftr-bg:#ff6e2d;--xyz-ftr-text:#ffffff;--xyz-ink:#263238;--xyz-bg:#EEECEB;--hdr-h:3.6rem;--bar-h:3rem;--stack-h:6.6rem}
.xyz-hdr{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid #ececec;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.xyz-hdr-in{max-width:80rem;margin:0 auto;height:var(--hdr-h);display:flex;align-items:center;gap:1.2rem;padding:0 1.1rem}
.xyz-logo{display:flex;align-items:center;flex:none}
.xyz-logo img{height:1.7rem;width:auto;display:block}
.xyz-hdr-nav{display:flex;gap:1.25rem;margin-left:.4rem}
.xyz-hdr-nav a{font-family:var(--sans);font-size:.93rem;font-weight:600;color:var(--xyz-ink);text-decoration:none}
.xyz-hdr-nav a:hover{color:var(--orange)}
/* SC 1.4.10 Reflow. This hide used to live in the @media block above, where the
   unconditional .xyz-hdr-nav{display:flex} that follows it overrode it at equal
   specificity — so the suite nav never actually hid, and its ~400px of links forced
   horizontal page scroll at 320px on every page of every book. Same rule, placed
   after the base declaration so the cascade lets it apply. */
@media(max-width:820px){.xyz-hdr-nav{display:none}}
/* Below ~380px the logo + Login pill alone no longer fit the 1.2rem gap and
   1.1rem side padding, and the pill pushed ~29px past the viewport. Tighten the
   row rather than let the page scroll sideways (SC 1.4.10). */
@media(max-width:380px){.xyz-hdr-in{gap:.5rem;padding:0 .6rem}
  .xyz-logo img,.xyz-logo svg{max-width:9rem}}
/* --xyz-orange as a BACKGROUND only clears WCAG AA with dark ink text (4.71:1);
   white-on-xyz-orange is 2.79:1 (fails even the 3:1 large-text floor) — same for
   the footer below. A darker hover background only lowers the ratio against ink
   text (both getting darker shrinks the contrast between them: ink on
   --xyz-orange-dark is 3.72:1), so hover uses an underline instead of a
   background swap. */
.xyz-hdr-cta{margin-left:auto;font-family:var(--sans);font-size:.86rem;font-weight:700;color:var(--xyz-ink);background:var(--xyz-orange);
  border-radius:9999px;padding:.42rem 1.15rem;text-decoration:none;flex:none}
.xyz-hdr-cta:hover{text-decoration:underline}
/* book band, 2026-09 Figma: cover thumbnail + title + edition on the brand orange, above
   the slim sticky breadcrumb bar. Static — it scrolls away — so --stack-h (header +
   .book-bar) is untouched. Text is --xyz-ink on the band (4.71:1); the demo's
   white-on-orange waiver (2026-09-07) was retired before the first live wave. */
.book-band{background:var(--xyz-orange);color:var(--xyz-ink)}
.book-band-in{max-width:80rem;margin:0 auto;min-height:9.7rem;display:flex;align-items:center;gap:1.6rem;padding:1.4rem 1.1rem 1.4rem clamp(1.1rem,5.5vw,5rem)}
.book-cover{width:5.3rem;height:6.9rem;border-radius:8px;object-fit:cover;flex:none;background:#fff}
.book-title{margin:0;font:600 2.4rem/1 var(--serif);color:var(--xyz-ink)}
.book-title a{color:var(--xyz-ink);text-decoration:none}.book-title a:hover{text-decoration:underline}
.book-edition{display:block;font:700 1.125rem/1.25 var(--sans);text-transform:uppercase;letter-spacing:.02em;margin-top:.5rem}
@media(max-width:820px){.book-band-in{min-height:0;gap:1rem;padding:1rem 1.1rem}.book-title{font-size:1.6rem}.book-cover{width:3.6rem;height:4.7rem}
  .chap-band{min-height:5.5rem;padding:0 1.1rem}.chap-band h1{font-size:2rem}.chap-num{font-size:3.4rem}
  .chap-landing figure.hero img{height:13rem}}
/* book navigation bar (breadcrumb + jump-to-chapter) — under the site header */
.book-bar{position:sticky;top:var(--hdr-h);z-index:55;background:var(--blue);color:#fff}
.book-bar-in{max-width:80rem;margin:0 auto;min-height:var(--bar-h);display:flex;align-items:center;gap:1rem;
  padding:.35rem 1.1rem;font-family:var(--sans);font-size:.86rem}
.book-bar a{color:#fff;text-decoration:none}
.book-home{font-weight:700;letter-spacing:.01em;flex:none}
.book-home:hover{text-decoration:underline}
/* flex:none never shrinks: a long book title (the Lab Workbook's runs 343px at
   .86rem bold) holds the bar wider than a 320px viewport and the whole page
   scrolls sideways — SC 1.4.10, the same failure mode as .xyz-hdr-nav above,
   caught by the blocking reflow-320 lane. Below the tablet cut let the home
   link shrink and wrap instead of forcing the bar wide; the crumb beside it
   already yields via min-width:0 + ellipsis. */
@media(max-width:820px){.book-home{flex:0 1 auto;min-width:0}}
.crumb{color:#cfe0f6;display:flex;gap:.35rem;align-items:center;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.crumb a:hover{text-decoration:underline}.crumb .sep{opacity:.6}
.chap-jump{margin-left:auto;position:relative;flex:none}
.chap-jump>summary{list-style:none;cursor:pointer;font-weight:700;background:rgba(255,255,255,.15);
  border-radius:6px;padding:.28rem .7rem}
.chap-jump>summary::-webkit-details-marker{display:none}
/* box-shadow ring, not a brighter fill — a brighter rgba(255,255,255,N) fill
   composited over --blue drops white summary text below 4.5:1 past N≈.30
   (base state N=.15 over --blue #154984: 6.12:1) */
.chap-jump>summary:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.chap-menu{position:absolute;right:0;top:130%;background:#fff;color:var(--ink);min-width:19rem;max-height:70vh;overflow:auto;
  border:1px solid var(--rule);border-radius:8px;box-shadow:0 6px 22px rgba(0,0,0,.18);padding:.4rem;z-index:70}
.chap-menu a{display:block;color:var(--blue);padding:.4rem .6rem;border-radius:6px;line-height:1.3}
.chap-menu a:hover{background:var(--blue-tint)}.chap-menu a b{color:var(--orange);margin-right:.4rem}
.chap-menu a.here{background:var(--blue);color:#fff}.chap-menu a.here b{color:#ffd9c5}
/* download menu: sits just right of the chapter jump (no second auto-margin) */
.dl-jump{margin-left:.5rem}
.dl-menu{min-width:14rem}
/* footer */
.xyz-ftr{background:var(--xyz-ftr-bg);color:var(--xyz-ftr-text);font-family:var(--sans);margin-top:auto}
.xyz-ftr-in{max-width:80rem;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;padding:2.4rem 1.4rem}
/* Preview chrome leaves ONE child in a 4-column grid, so the note rendered a
   quarter of the page wide and ran far down. One column instead, and the note
   runs the width with its own measure. */
.xyz-ftr-in.preview{grid-template-columns:1fr;gap:.6rem;padding:1.8rem 1.4rem}
.preview-note{max-width:80rem;margin:0 auto;padding:1.1rem 1.4rem 0}
.preview-note .ftr-a11y{font-size:.8rem;line-height:1.5;margin:0;color:var(--ink);font-family:var(--sans)}
.xyz-ftr-in.preview .copy,.xyz-ftr-in.preview .ftr-report,
.xyz-ftr-in.preview .ftr-support{font-size:.8rem;margin:.15rem 0}
/* explicit color: the global h3 rule (var(--blue), 2.56:1 on --xyz-orange) would
   otherwise beat the container's inherited ink — footer headings stay on the
   footer's ink-on-orange scheme (4.71:1) */
.xyz-ftr h3{font-size:1.05rem;font-weight:700;margin:0 0 .9rem;color:var(--xyz-ftr-text)}
.xyz-ftr ul{list-style:none;padding:0;margin:0}
.xyz-ftr li{margin:.5rem 0;font-size:.9rem}
.xyz-ftr a{color:var(--xyz-ftr-text);text-decoration:none}.xyz-ftr a:hover{text-decoration:underline}
.xyz-ftr-logo{height:1.5rem;width:auto;margin-bottom:1rem;filter:brightness(0) invert(1)}
.xyz-ftr address{font-style:normal;font-size:.9rem;line-height:1.5}
.xyz-ftr .copy{margin-top:1.1rem;font-size:.85rem}   /* no opacity: composited over --xyz-orange it drops ink text below 4.5:1 */
/* ── Report a content issue (standalone pages only — never in ingest fragments) ──
   Footer link is the no-JS baseline (mailto). PLAYER_JS upgrades it to a button
   (ink on the band, the same pinned pair as every other footer link and
   heading, underlined so it reads as actionable) and builds the .report-dlg
   <dialog> on demand. Every colour below
   is an already-reviewed token/literal; the ONE deliberate choice: field borders
   use #8a94a6 (3.06:1 on #fff — SC 1.4.11's 3:1 UI-component bar), NOT --rule,
   which stays decoration-only (see the errata-strip rationale in contrast_check). */
.xyz-ftr .ftr-report{margin-top:.35rem;font-size:.85rem}
.xyz-ftr .ftr-report a{text-decoration:underline}
.xyz-ftr button.report-issue{background:none;border:0;padding:0;font:inherit;color:var(--xyz-ftr-text);text-decoration:underline;cursor:pointer}
.report-dlg{font-family:var(--sans);color:var(--ink);background:#fff;border:1px solid #8a94a6;border-radius:8px;
  padding:1.1rem 1.25rem;max-width:26rem;width:calc(100vw - 2.5rem);box-sizing:border-box}
.report-dlg::backdrop{background:rgba(17,24,39,.55)}
.report-dlg h2{font-family:var(--sans);font-size:1.02rem;color:var(--ink);margin:0 0 .35rem}  /* override global orange h2 */
.report-dlg .rpt-page{font-size:.78rem;color:var(--gray-meta);margin:0 0 .5rem;overflow-wrap:anywhere}
.report-dlg label{display:block;font-family:var(--sans);font-size:.84rem;font-weight:600;color:var(--ink);margin:.55rem 0 .15rem}
.report-dlg label .opt{font-weight:400;color:var(--gray-meta)}
.report-dlg textarea,.report-dlg input{display:block;width:100%;box-sizing:border-box;font:inherit;font-size:.9rem;
  color:var(--ink);background:#fff;border:1px solid #8a94a6;border-radius:4px;padding:.4rem .55rem}
.report-dlg textarea{resize:vertical;min-height:5.5rem}
.report-dlg .rpt-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}  /* honeypot: off-screen, tabindex=-1, aria-hidden */
.report-dlg .rpt-status{font-size:.85rem;margin:.6rem 0 0}
.report-dlg .rpt-status.ok{color:var(--green-text);font-weight:600}
.report-dlg .rpt-status.err{color:var(--red)}
.report-dlg .rpt-status a{color:var(--blue)}
.report-dlg .rpt-actions{display:flex;gap:.6rem;justify-content:flex-end;margin-top:.9rem}
.report-dlg .rpt-send{font-family:var(--sans);font-weight:700;font-size:.88rem;color:#fff;background:var(--blue);border:0;border-radius:4px;padding:.45rem 1rem;cursor:pointer}
.report-dlg .rpt-send:hover{filter:brightness(.92)}
.report-dlg .rpt-send[disabled]{opacity:.55;cursor:default}   /* inactive control: exempt from 1.4.3 */
.report-dlg .rpt-cancel{font-family:var(--sans);font-size:.88rem;color:var(--blue);background:#fff;border:1px solid #8a94a6;border-radius:4px;padding:.45rem 1rem;cursor:pointer}
.report-dlg .rpt-cancel:hover{background:#f6f7f9}
@media(max-width:820px){.xyz-ftr-in{grid-template-columns:1fr 1fr;gap:1.6rem;padding:2rem 1.2rem}}
@media(max-width:520px){.xyz-ftr-in{grid-template-columns:1fr}}
/* book home (top-level index): single centered column, no left rail */
.book-shell{grid-template-columns:minmax(0,1fr)}
.book-shell main{margin-inline:auto}
.book-hero{font-family:var(--sans);color:#566;font-size:1.02rem;margin:.2rem 0 1.4rem}
.book-hero .free{display:inline-block;background:var(--green-tint);color:var(--green-text);font-weight:700;
  font-size:.82rem;padding:.18rem .6rem;border-radius:9999px;margin-left:.4rem}
/* ── live code cell. <pre class="code-cell lang-python"> ships as a readable
   listing; CODE_CELL_JS upgrades it to an editable Run widget (progressive
   enhancement — with JS off the reader sees the book exactly as before). ── */
.code-cell{font-family:var(--mono,ui-monospace,"SF Mono",Menlo,Consolas,monospace);font-size:.9rem;
  background:#f6f7f9;border:1px solid var(--rule);border-left:3px solid var(--blue);
  border-radius:6px;padding:.7rem .85rem;overflow-x:auto;white-space:pre;line-height:1.5;color:var(--ink);margin:1.1rem 0}
.code-cell code{font-family:inherit;white-space:pre}
/* per-section dataset download affordance (ID4_DATA_DOWNLOADS lanes): real
   download links for the files the live cells read, at the first cell on the
   page that reads each — styled like the dl-menu rows. Colors reuse pinned
   pairs only (--gray-meta / --blue on the page background). */
.cell-data{font-family:var(--sans);font-size:.78rem;color:var(--gray-meta);margin:1.1rem 0 -.6rem}
/* no white-space:nowrap here — "Download MonthlyCoalConsumption.xlsx (Excel)"
   is 296px at this size and nowrap made the page scroll at a 320px viewport
   (SC 1.4.10, caught by the axe lane's reflow re-measure). Links wrap. */
.cell-data a{color:var(--blue);font-weight:600;text-decoration:none;margin-left:.6rem}
.cell-data a:hover{text-decoration:underline}
.cell-data a:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.code-cell-wrap{margin:1.1rem 0;border:1px solid var(--rule);border-radius:8px;overflow:hidden;
  font-family:var(--mono,ui-monospace,"SF Mono",Menlo,Consolas,monospace)}
.code-cell-bar{display:flex;align-items:center;gap:.5rem;background:#f6f7f9;border-bottom:1px solid var(--rule);padding:.35rem .55rem}
.code-cell-lang{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.06em;color:var(--blue)}
.code-cell-hint{font-family:var(--sans);font-size:.72rem;color:var(--gray-meta);margin-left:.15rem}
.code-cell-run{margin-left:auto;font-family:var(--sans);font-size:.8rem;font-weight:600;color:#fff;
  background:var(--blue);border:0;border-radius:4px;padding:.25rem .75rem;cursor:pointer}
.code-cell-run:hover{filter:brightness(1.08)}
/* ── authored XYZ Graph figure: one card, three zones ───────────────────────
   .xg-bar      blue-tinted chrome — kind chip, authored title, open link, hint
   .xg-hydrate  the stage: poster pre-mount, shadow-root canvas post-mount
   .xg-foot     pale apparatus line — tool and pinned viewer build
   Bar and foot sit OUTSIDE .xg-hydrate on purpose: the hydrator replaces the
   root's CHILDREN, so anything inside it is a pre-mount fallback only.  They
   also sit outside the <!--XG--> markers, so an ingest fragment keeps the whole
   card even when the live control is dropped.
   Every colour is an existing :root token — no new hex enters the sheet. */
:root{--xgf-accent:var(--blue);--xgf-bar:var(--blue-tint);--xgf-line:var(--blue-line)}
.xg-figure{width:auto;max-width:100%;margin:1.8rem 0;text-align:left;
  border:1px solid var(--xgf-line);border-radius:8px;overflow:hidden;background:#fff}
.xg-bar{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem .6rem;
  background:var(--xgf-bar);border-bottom:1px solid var(--xgf-line);padding:.4rem .7rem}
.xg-kind{flex:none;display:inline-block;background:var(--xgf-accent);color:#fff;
  font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:.14rem .55rem;border-radius:3px}
.xg-title{min-width:0;overflow-wrap:anywhere;font-family:var(--sans);font-size:.82rem;
  font-weight:700;color:var(--ink)}
.xg-hint{flex:1 0 100%;min-width:0;overflow-wrap:anywhere;font-family:var(--sans);
  font-size:.72rem;color:var(--gray-meta)}
/* ONE height for BOTH states.  The measured +117px lazy-mount jump was mounted
   31rem against unmounted auto; pinning them equal makes the jump zero by
   construction at every width.  Height, not aspect-ratio: the mounted figure is
   canvas (76/47) PLUS the slider strip. */
.xg-figure .xg-hydrate{display:flex;align-items:center;justify-content:center;
  position:relative;height:31rem;margin:0;background:#fff;overflow:hidden}
.xg-figure .xg-hydrate[data-xyzfigure-mounted]{display:block;border:0;border-radius:0}
.xg-figure .xg-hydrate>img{width:100%;max-width:100%;max-height:100%;height:auto;
  object-fit:contain;border:0;border-radius:0;background:transparent;padding:0}
.xg-figure img[hidden]{display:none}
/* Pre-interaction signal: one centred pill over a light scrim, scoped with
   :has() so it applies only while the click-to-open iframe is still hidden.
   Browsers without :has() get the in-flow pill — degraded, never broken. */
.xg-live{margin:.4rem 0 .1rem;text-align:center}
.xg-figure .xg-hydrate:not([data-xyzfigure-mounted]):has(.xg-frame-wrap[hidden])::after{
  content:"";position:absolute;inset:0;background:rgba(29,86,166,.06);pointer-events:none}
.xg-figure .xg-hydrate:not([data-xyzfigure-mounted]):has(.xg-frame-wrap[hidden]) .xg-live{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;z-index:1}
.xg-explore{font-family:var(--sans);font-size:.82rem;font-weight:700;color:#fff;
  background:var(--xgf-accent);border:0;border-radius:9999px;padding:.55rem 1.1rem;
  min-height:2.75rem;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.18)}
.xg-explore:hover{filter:brightness(1.08)}
.xg-explore:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.xg-frame-wrap{margin-top:.5rem}
.xg-frame{display:block;width:100%;aspect-ratio:76/47;border:1px solid var(--rule);
  border-radius:6px;background:#fff}
.xg-foot{font-family:var(--sans);font-size:.72rem;color:var(--gray-meta);
  background:#fbfbfc;border-top:1px solid var(--rule);padding:.3rem .7rem;
  overflow-wrap:anywhere}
/* The caption: left-ranged and one register up from a footnote.  Overrides the
   generic figcaption{justify-content:center;font-size:.85rem;color:#555}. */
.xg-figure figcaption{display:block;text-align:left;font-family:var(--sans);
  font-size:.82rem;line-height:1.5;color:var(--gray-meta);margin:.55rem 0 0;max-width:42rem}
/* 320px reflow lane (SC 1.4.10): both states move together, so the no-jump
   invariant holds at every width. */
@media(max-width:560px){
  .xg-figure .xg-hydrate,
  .xg-figure .xg-hydrate[data-xyzfigure-mounted]{height:24rem}
  .xg-bar{padding:.35rem .55rem}
}
@media print{
  .xg-figure{break-inside:avoid;border-color:#c7ccd3}
  .xg-figure .xg-hydrate{height:auto;display:block}
  .xg-live{display:none}
}
/* Dark: OPT-IN ONLY.  The reader hard-declares color-scheme:light and ships no
   prefers-color-scheme block, so this is inert on every page built today.  It
   exists so the figure chrome need not be redesigned when the fleet adopts dark. */
:root[data-theme="dark"] figure img[src^="figures/"]{background:#fff;padding:6px;border-radius:6px}
:root[data-theme="dark"] .xg-figure{background:#0f1419;border-color:#3b4551}
:root[data-theme="dark"] .xg-bar{background:#3b4551;border-bottom-color:#3b4551}
:root[data-theme="dark"] .xg-title{color:#e6e6e6}
:root[data-theme="dark"] .xg-hint{color:#c7ccd3}
:root[data-theme="dark"] .xg-figure .xg-hydrate,
:root[data-theme="dark"] .xg-foot{background:#0f1419;color:#c7ccd3;border-top-color:#3b4551}
:root[data-theme="dark"] .xg-figure figcaption{color:#c7ccd3}
/* Authored XYZ 3D figures: the facade is a plain img-in-a-link; the loader
   (when running) swaps it for the live viewer iframe on click. The un-upgraded
   custom element is display:contents-like by default (unknown element =
   inline), so give it block flow; .x3-open is the visible link caption. */
.x3-figure xyz-figure{display:block;margin:.4rem 0}
.x3-figure img{display:block;max-width:100%;height:auto;border:1px solid var(--rule);
  border-radius:6px;background:#fff}
.x3-figure .x3-open{display:inline-block;margin:.35rem 0 .1rem;
  font-family:var(--sans);font-size:.8rem;font-weight:600;color:var(--blue)}
.code-cell-run[disabled]{opacity:.55;cursor:progress}
.code-cell-ta{display:block;width:100%;box-sizing:border-box;border:0;resize:vertical;min-height:2.4rem;
  font-family:inherit;font-size:.9rem;line-height:1.5;padding:.6rem .85rem;color:var(--ink);background:#fff;tab-size:4}
.code-cell-ta:focus{outline:2px solid var(--orange);outline-offset:-2px}
.code-cell-out{font-size:.86rem;line-height:1.45;white-space:pre-wrap;padding:.55rem .85rem;
  background:#fbfbfc;border-top:1px solid var(--rule);color:var(--ink);min-height:1rem}
.code-cell-out:empty{display:none}
.code-cell-out .cell-err{color:var(--red)}
.code-cell-out figure{margin:.3rem 0 0}
.code-cell-out img{max-width:100%;height:auto;border:1px solid var(--rule);border-radius:4px;background:#fff}
.code-cell-boot{font-family:var(--sans);font-size:.72rem;color:var(--gray-meta);margin:.2rem 0 1.1rem}
/* worked-example solution disclosure (ID4_SOLUTION_REVEAL) */
.solution-reveal{margin:.9rem 0;border:1px solid var(--rule);border-radius:6px;background:#fbfbfc}
.solution-reveal>summary{cursor:pointer;padding:.5rem .85rem;font-family:var(--sans);font-size:.85rem;
  font-weight:700;color:var(--blue);border-radius:6px}
.solution-reveal>summary:hover{background:var(--blue-tint)}
.solution-reveal>summary:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
.solution-reveal[open]>summary{border-bottom:1px solid var(--rule);border-radius:6px 6px 0 0}
.solution-reveal .solution{margin:0;padding:.2rem .85rem .6rem}
/* A closed <details> prints its summary and nothing else, so an edition that
   collapses its answers would drop every worked solution from paper and from
   print-to-PDF. Measured in Chrome 153 with checkVisibility(): the
   ::details-content rule is what reveals it; the older child-selector rule is
   a no-op there and is kept only for engines that still hide by display. The
   summary is a dead control on paper, and .solution::before already prints the
   "Solution" label, so it goes. Scoped to .solution-reveal: no book that has
   not opted in emits this class, so nothing else changes. */
@media print{
  .solution-reveal::details-content{content-visibility:visible}
  .solution-reveal:not([open])>*:not(summary){display:block}
  .solution-reveal>summary{display:none}
}
/* secondary cell controls: Reset (per cell, appears once edited) + Restart session (per page) */
.code-cell-reset{font-family:var(--sans);font-size:.75rem;font-weight:600;color:var(--gray-meta);
  background:transparent;border:1px solid var(--rule);border-radius:4px;padding:.2rem .5rem;cursor:pointer}
.code-cell-reset:hover{color:var(--ink);border-color:var(--gray-meta)}
.code-cell-reset[hidden]{display:none}
.code-cell-restart{font-family:var(--sans);font-size:.72rem;font-weight:600;color:var(--gray-meta);
  background:transparent;border:1px solid var(--rule);border-radius:9999px;padding:.15rem .7rem;
  cursor:pointer;margin:0 0 1.1rem}
.code-cell-restart:hover{color:var(--ink);border-color:var(--gray-meta)}
.code-cell-restart[disabled]{opacity:.55;cursor:progress}
/* declared code-errata note: this cell runs a corrected copy of the book's code */
.code-cell-errata{font-family:var(--sans);font-size:.74rem;line-height:1.45;color:var(--gray-meta);
  background:#fffaf3;border-bottom:1px solid var(--rule);padding:.4rem .85rem}
.code-cell-errata b{color:var(--orange);font-weight:700}
/* reference-solution disclosure on a practice cell (native <details>, no ARIA needed) */
.code-cell-sol{border-top:1px solid var(--rule);font-family:var(--sans)}
.code-cell-sol>summary{cursor:pointer;padding:.4rem .85rem;font-size:.78rem;font-weight:600;color:var(--blue)}
.code-cell-sol>summary:hover{background:var(--blue-tint)}
.code-cell-sol>summary:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
.code-cell-sol pre{margin:0;padding:.6rem .85rem;background:#fbfbfc;border-top:1px solid var(--rule);
  font-family:var(--mono,ui-monospace,"SF Mono",Menlo,Consolas,monospace);font-size:.86rem;
  line-height:1.5;white-space:pre;overflow-x:auto;color:var(--ink)}

/* Current Figma 2397341532216317699, lastModified 2026-09-09T22:21:59Z.
   Opt-in profile; default reader is untouched.
   Desktop source: 1440px frame, 408px rail, 768px main, 700px prose.
   Mobile behavior is a flowing adaptation, not a nonexistent Figma frame. */
@font-face{font-family:"Open Sans Condensed";src:url("OpenSansCondensed-Bold-624301f0b3df.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Roboto Serif";src:url("RobotoSerif-SemiBold-dce89252d02b.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
:root{
  --reader-design-profile:figma-ebooks-2026-09;
  --figma-brand-orange:#ff6e2d; --figma-gradient-end:#ff9500;
  --figma-section-gradient-end:#ffae00; --figma-chapter-opacity:.9;
  --figma-orange:#e66425; --figma-red:#da2128; --figma-green:#00874a;
  --figma-purple:#7f3f98; --figma-blue:#1d56a6; --figma-navy:#154984;
  --figma-rail:#eeeceb; --figma-gray:#d9d9d9; --figma-ink:#000000; --figma-white:#ffffff;
  --figma-section-blue:#174585; --figma-objectives-bg:#e7ecf2;
  --figma-definition-bg:#e5f3ec; --figma-try-bg:#f2ebf4;
  --figma-student-project-bg:rgba(29,86,166,.1);
  --figma-collaborative-exercise-bg:rgba(29,86,166,.1);
  --figma-note-bg:rgba(255,204,0,.2);
  --figma-stats-lab-bg:rgba(230,100,37,.1);
  /* The owner confirmed the red 10px opener grid as visible artwork on
     2026-09-09. Keep it as a profile token so the spacing and alpha travel
     with every title that adopts this design. */
  --figma-opener-grid-size:10px;
  --figma-opener-grid-line:rgba(218,33,40,.16);
  --figma-definition-icon:url("definition-book-836e9bd1709e.svg"); --figma-try-icon:url("try-it-edit-square-cee990da2e88.svg");
  --figma-student-project-icon:url("student-project-cb6d4087e25a.svg");
  --figma-collaborative-exercise-icon:url("collaborative-exercise-b7ae8666ef50.svg");
  --figma-note-icon:url("note-60763dc2cb1a.svg"); --figma-stats-lab-icon:url("stats-lab-7ae769805179.svg");
  --hdr-h:80px; --bar-h:0px; --stack-h:80px;
  scroll-padding-top:calc(var(--hdr-h) + .75rem);
}
/* The shared script measures header + book bar on the root. This profile puts
   the bar below the content, so only the header belongs to its sticky stack.
   A body-level value also keeps descendants independent of that inline value.
   Root rules live directly on :root in this opt-in stylesheet: WebKit can retain
   the base scroll-padding value after root inline updates despite a matching
   html:has(> body[data-design-profile]) rule. */
body[data-design-profile]{--stack-h:var(--hdr-h);font:400 16px/24px var(--serif);color:var(--figma-ink)}
body[data-design-profile] .xyz-hdr{border:0;box-shadow:0 1px 4px #00000040}
body[data-design-profile] .xyz-hdr-in{max-width:1440px;height:80px;padding:0 90.5625px 0 80px;gap:0}
body[data-design-profile] .xyz-logo img{height:28.689091px;width:255.250275px;max-width:100%}
body[data-design-profile] .xyz-hdr-nav{margin-left:160px;gap:48px}
body[data-design-profile] .xyz-hdr-nav a{font-size:15px;line-height:20.427246px;font-weight:600;color:#333333}
.figma-account{margin-left:auto;display:block;width:45.5625px;height:45.5625px;flex:none}
.figma-account img{display:block;width:100%;height:100%}
body[data-design-profile] .book-band{background:linear-gradient(90deg,var(--figma-brand-orange),var(--figma-section-gradient-end));color:var(--figma-white)}
body[data-reader-page="opener"] .book-band{background:var(--figma-brand-orange)}
body[data-design-profile] .book-band-in{max-width:1440px;min-height:155px;padding:23px 34px 22px 81px;gap:58px}
body[data-design-profile] .book-cover{width:85px;height:110px;border-radius:8px;object-fit:contain;background:none}
body[data-design-profile] .book-title{font:600 38px/38px "Roboto Serif",var(--serif);font-optical-sizing:none;color:var(--figma-white);letter-spacing:0}
body[data-design-profile] .book-title a{color:var(--figma-white)}
body[data-design-profile] .book-edition{font:700 18px/22.5px var(--sans);margin-top:10px;letter-spacing:0}
body[data-design-profile] .reader-shell{grid-template-columns:clamp(240px,28.333333vw,408px) minmax(0,1fr);max-width:1440px;margin:0 auto;background:linear-gradient(to right,var(--figma-rail) 0,var(--figma-rail) clamp(240px,28.333333vw,408px),#fff 0)}
body[data-design-profile] main{max-width:768px;padding:30px 34px 80px;min-width:0}
body[data-design-profile] nav.toc{height:calc(100vh - 80px);padding:31px 29px 24px clamp(24px,5.555556vw,80px);background:var(--figma-rail)}
/* September 10 rail density: current Figma nodes 7231:4060 and 7063:3742.
   Chapter/section rows use distinct font roles on both opener and section pages.
   Keep native destination links and the selected chapter's initial HTML state. */
body[data-design-profile] nav.toc{--rail-chapter-gap:16px;--rail-section-gap:8px}
body[data-design-profile] nav.toc a{font:600 14px/19px var(--sans);font-stretch:normal;letter-spacing:0;color:var(--figma-ink)}
body[data-design-profile] nav.toc > a:not(.toc-ch){margin:0 0 var(--rail-section-gap) 20px}
body[data-design-profile] nav.toc a.current{color:var(--figma-brand-orange);font-weight:800}
body[data-design-profile] nav.toc a>b{margin-inline-end:.259765625em;color:var(--figma-brand-orange);font-weight:800}
body[data-design-profile] nav.toc.chapters{padding-top:24px;--rail-chapter-gap:14px}
body[data-design-profile] nav.toc .toc-chapter{margin:0 0 var(--rail-chapter-gap)}
body[data-design-profile] nav.toc .toc-ch,
body[data-design-profile] nav.toc.chapters > a,
body[data-design-profile] nav.toc .toc-chapter > a{display:block;font:700 20px/27px "Open Sans Condensed",var(--sans);font-stretch:normal;color:var(--figma-navy);margin:0}
body[data-design-profile] nav.toc > .toc-ch,
body[data-design-profile] nav.toc.chapters > a{margin-bottom:var(--rail-chapter-gap)}
body[data-design-profile] nav.toc .toc-chapter > a>b,
body[data-design-profile] nav.toc > .toc-ch>b,
body[data-design-profile] nav.toc.chapters > a>b{color:var(--figma-navy);font-weight:700;margin-inline-end:.2470703125em}
body[data-design-profile] nav.toc .toc-chapter > a.current,
body[data-design-profile] nav.toc .toc-chapter > a.current b,
body[data-design-profile] nav.toc.chapters > a.current,
body[data-design-profile] nav.toc.chapters > a.current b{color:var(--figma-brand-orange)}
body[data-design-profile] nav.toc .toc-sections{margin:16px 0 0 20px}
body[data-design-profile] nav.toc .toc-sections[hidden]{display:none}
body[data-design-profile] nav.toc .toc-section-list{display:flex;flex-direction:column;gap:var(--rail-section-gap)}
body[data-design-profile] nav.toc .toc-section-list a{margin:0}
body[data-design-profile] nav.toc .toc-section-list a:last-child{margin-bottom:0}
body[data-reader-page="opener"] main{padding:0 0 80px}
body[data-design-profile] .chap-landing figure.hero{margin:0;position:relative}
body[data-design-profile] .chap-landing figure.hero img{height:auto;aspect-ratio:768/336;width:100%;object-fit:cover}
/* Figma's opener reference shows the same fine red square grid over the
   hero, chapter band and introduction. It is a decorative background layer:
   it never changes flow, clips content or captures pointer/keyboard input. */
body[data-design-profile] .chap-landing figure.hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  background-image:linear-gradient(to right,var(--figma-opener-grid-line) 1px,transparent 1px),linear-gradient(to bottom,var(--figma-opener-grid-line) 1px,transparent 1px);
  background-size:var(--figma-opener-grid-size) var(--figma-opener-grid-size);
}
/* Captions/credits remain available without separating the image from its band.
   Native disclosure requires no new page script or downstream ingestion pin. */
.hero-caption{position:absolute;right:12px;bottom:12px;font:400 13px/20px var(--sans);z-index:2;max-width:calc(100% - 24px)}
.hero-caption summary{cursor:pointer;background:#fff;color:#222;border-radius:4px;padding:3px 8px;min-height:26px;width:max-content;margin-left:auto}
body[data-design-profile] .chap-landing figure.hero>figcaption{margin:0}
body[data-design-profile] .chap-landing figure.hero .hero-caption-text{margin:0;padding:8px 12px;background:#fff;color:#222;border-radius:4px;max-width:400px;text-align:left}
body[data-design-profile] .chap-band{min-height:121px;padding:16px 34px 26px 39px;margin:0;position:relative;background-image:linear-gradient(to right,var(--figma-opener-grid-line) 1px,transparent 1px),linear-gradient(to bottom,var(--figma-opener-grid-line) 1px,transparent 1px),linear-gradient(90deg,rgb(from var(--figma-brand-orange) r g b / var(--figma-chapter-opacity)),rgb(from var(--figma-gradient-end) r g b / var(--figma-chapter-opacity)));background-size:var(--figma-opener-grid-size) var(--figma-opener-grid-size),var(--figma-opener-grid-size) var(--figma-opener-grid-size),100% 100%;color:var(--figma-white)}
body[data-design-profile] .chap-band h1{font-size:45px;line-height:45px;color:var(--figma-white);align-self:flex-start;margin-top:23px}
body[data-design-profile] .chap-num{font-size:79px;line-height:79px;letter-spacing:1.58px;color:var(--figma-white)}
body[data-design-profile] .chap-intro{font:400 16px/24px var(--serif);color:var(--figma-ink);margin:25px 34px 0;position:relative;}
body[data-design-profile] .chap-intro::before{content:"";position:absolute;z-index:0;pointer-events:none;inset:0 -34px;background-image:linear-gradient(to right,var(--figma-opener-grid-line) 1px,transparent 1px),linear-gradient(to bottom,var(--figma-opener-grid-line) 1px,transparent 1px);background-size:var(--figma-opener-grid-size) var(--figma-opener-grid-size);}
body[data-design-profile] .chap-intro > *{position:relative;z-index:1}
body[data-design-profile] .chap-intro h2{margin:0 0 10px}
body[data-design-profile] .chap-intro p{margin:0 0 12px}
body[data-design-profile] .chap-landing .landing-start,body[data-reader-page="opener"] .page-attrib{margin-left:34px;margin-right:34px}
/* Production navigation belongs below the reading content, outside the Figma
   image/header stack; preserve the existing breadcrumb/download disclosures. */
body[data-design-profile] .book-bar{position:static;order:2;background:var(--figma-blue)}
body[data-design-profile] .book-bar-in{min-height:44px;max-width:1440px;padding:8px 34px 8px 80px}
body[data-design-profile] .xyz-ftr,body[data-design-profile] .preview-note{order:3}
body[data-design-profile] .book-shell{display:block;background:#fff}
body[data-design-profile] .book-shell main{margin:auto;padding-top:30px}
@media(max-width:1250px){body[data-design-profile] .xyz-hdr-in{padding-left:32px;padding-right:32px}body[data-design-profile] .xyz-hdr-nav{margin-left:auto;gap:24px}.figma-account{margin-left:32px}}
@media(max-width:1024px){body[data-design-profile] .xyz-hdr-nav{gap:16px}body[data-design-profile] .xyz-logo img{width:210px}body[data-design-profile] main{padding-left:24px;padding-right:24px}body[data-design-profile] nav.toc{padding-left:24px;padding-right:16px}body[data-design-profile] .book-band-in{padding-left:32px;gap:32px}}
@media(max-width:820px){
  :root{--hdr-h:64px}
  body[data-design-profile] .xyz-hdr-in{height:64px;padding:0 18px}
  body[data-design-profile]{--hdr-h:64px;--stack-h:64px}
  body[data-design-profile] .xyz-hdr-nav{display:none}
  .figma-account{width:36px;height:36px;margin-left:auto}
  body[data-design-profile] .book-band-in{min-height:0;padding:18px;gap:18px}
  body[data-design-profile] .book-cover{width:62px;height:80px}
  body[data-design-profile] .book-title{font-size:26px;line-height:30px}
  body[data-design-profile] .book-edition{font-size:13px;line-height:18px;margin-top:6px}
  body[data-design-profile] .reader-shell{display:flex;flex-direction:column;background:#fff}
  body[data-design-profile] nav.toc{position:static;height:auto;padding:18px;width:100%}
  body[data-design-profile] nav.toc.chapters{padding-top:18px}
  body[data-design-profile] nav.toc a:not(.toc-ch){margin-left:0}
  body[data-design-profile] nav.toc .toc-sections{margin-left:12px}
  body[data-design-profile] main{max-width:768px;padding:24px 18px 48px}
  body[data-reader-page="opener"] main{padding:0 0 48px}
  body[data-design-profile] .chap-band{min-height:90px;padding:16px 18px;gap:12px}
  body[data-design-profile] .chap-band h1{font-size:32px;line-height:36px;margin-top:0;align-self:center}
  body[data-design-profile] .chap-num{font-size:56px;line-height:60px}
  body[data-design-profile] .chap-intro{margin:24px 18px 0}
  body[data-design-profile] .chap-intro::before{inset:0 -18px}
  body[data-design-profile] .chap-landing .landing-start,body[data-reader-page="opener"] .page-attrib{margin-left:18px;margin-right:18px}
  body[data-design-profile] .book-bar-in{padding:10px 18px}
}

body[data-design-profile="figma-ebooks-2026-09"] .chap-band h1{font-family:"Open Sans Condensed",var(--sans);font-stretch:normal}
/* Section components from Figma file 1jfidPXRnYO577pYxIroNZ,
   version 2397341532216317699, lastModified 2026-09-09T22:21:59Z,
   section instance 7062:3610.
   Appended after PREVIEW_CSS only for this explicitly selected profile.
   The profile owns the 700px content measure, body 16/24 and font assets. */

body[data-design-profile="figma-ebooks-2026-09"] main > h1,
body[data-design-profile="figma-ebooks-2026-09"] main > article:not(.chap-landing) > h1 {
  min-height: 62px;
  margin: 0;
  padding: 18px 20px;
  border: 0;
  border-radius: 0;
  background: var(--figma-section-blue, #174585);
  color: #fff;
  font: 700 26px/26px "Open Sans Condensed",var(--sans);
  font-stretch: normal;
  letter-spacing: .52px;
  text-transform: uppercase;
  text-wrap: balance;
}

body[data-design-profile="figma-ebooks-2026-09"] main h2 {
  margin: 16px 0 10px;
  color: var(--figma-orange, #e66425);
  font: 700 22px/33px var(--sans);
  font-stretch: normal;
  letter-spacing: 0;
  text-transform: none;
}

body[data-design-profile="figma-ebooks-2026-09"] main h3 {
  color: var(--figma-blue, #1d56a6);
  font: 700 18px/27px var(--sans);
  font-stretch: normal;
}

/* Set only the MathML root's base size. Keep the shared native script-depth,
   radical-in-fraction and prime rules; descendants must retain UA sizing. */
body[data-design-profile="figma-ebooks-2026-09"] main math {
  font-family: var(--math);
  font-size: 1em;
}

/* A legacy normal-size bold wrapper must not reset a superscript to body size.
   Keep the authored boldness and let the native MathML depth choose its size. */
body[data-design-profile="figma-ebooks-2026-09"] main msup > mstyle[mathsize="normal"]:nth-child(2) {
  font-size: math;
}

body[data-design-profile="figma-ebooks-2026-09"] main p {
  margin-block: 12px;
}

body[data-design-profile="figma-ebooks-2026-09"] main p a:not([class]) {
  color: inherit;
  text-decoration: underline;
}

/* Exercise numbers are native list markers supplied by the print-source
   mapping. This extension uses the existing Figma prose color/type; no counter
   invents a number, and removing CSS leaves the source labels intact. */
body[data-design-profile="figma-ebooks-2026-09"] ol.exercise-set {
  margin-block: 16px;
  padding-inline-start: 2.5em;
  list-style-type: decimal;
}

body[data-design-profile="figma-ebooks-2026-09"] li.exercise {
  margin-block: 14px;
  padding-inline-start: .25em;
}

body[data-design-profile="figma-ebooks-2026-09"] li.exercise::marker {
  font-weight: 700;
}

body[data-design-profile="figma-ebooks-2026-09"] .exercise-body {
  min-width: 0;
}

/* A leading table/diagram image otherwise sets the first line's baseline at
   its bottom, pulling the native question marker down with it (CV1 1.1 #1–6).
   Keep the image inline and align its top with the marker's text line. */
body[data-design-profile="figma-ebooks-2026-09"] .exercise-body > img:first-child {
  vertical-align: top;
}

body[data-design-profile="figma-ebooks-2026-09"] .exercise-body > :first-child {
  margin-top: 0;
}

body[data-design-profile="figma-ebooks-2026-09"] .exercise-body > :last-child {
  margin-bottom: 0;
}

/* The emitted section heading may be followed by zero-width anchor spans.
   The objectives box therefore owns its own zero top margin. */
body[data-design-profile="figma-ebooks-2026-09"] aside.note-objectives {
  margin: 0 0 30px;
  padding: 16px 21px;
  border: 0;
  border-radius: 0;
  background: var(--figma-objectives-bg, #e7ecf2);
  color: var(--figma-ink, #000);
}

body[data-design-profile="figma-ebooks-2026-09"] aside.note-objectives > .note-title,
body[data-design-profile="figma-ebooks-2026-09"] aside.note-objectives > .callout-label {
  display: block;
  margin: 0 0 17px;
  color: inherit;
  font: 700 16px/16px var(--sans);
  letter-spacing: 0;
  text-transform: none;
}

/* The source title is "Learning Objectives"; the generic label duplicates it.
   Retain the label when a future export has no authored title. */
body[data-design-profile="figma-ebooks-2026-09"] aside.note-objectives:has(> .note-title) > .callout-label {
  display: none;
}

body[data-design-profile="figma-ebooks-2026-09"] aside.note-objectives > ul,
body[data-design-profile="figma-ebooks-2026-09"] aside.note-objectives > ol {
  margin: 0;
  padding-left: 24px;
  font: 400 16px/24px var(--serif);
}

body[data-design-profile="figma-ebooks-2026-09"] aside.note-objectives li {
  margin: 0;
}

/* The semantic wrapper must come from the ingest's source structure. CSS
   deliberately does not infer definition boundaries from paragraph wording. */
body[data-design-profile="figma-ebooks-2026-09"] aside:is(.note-definition, .note-formula, .note-theorem, .note-corollary, .note-equation, .note-indesign-box, .indesign-box):has(> .note-title, > .callout-label) {
  margin: 14px 0 16px;
  padding: 12px 15px;
  border: 0;
  border-radius: 10px;
  background: var(--figma-definition-bg, #e5f3ec);
  color: var(--figma-ink, #000);
}

body[data-design-profile="figma-ebooks-2026-09"] aside:is(.note-definition, .note-formula, .note-theorem, .note-corollary, .note-equation, .note-indesign-box, .indesign-box):has(> .note-title, > .callout-label) > .note-title,
body[data-design-profile="figma-ebooks-2026-09"] aside:is(.note-definition, .note-formula, .note-theorem, .note-corollary, .note-equation, .note-indesign-box, .indesign-box):has(> .note-title, > .callout-label) > .callout-label {
  margin: 0 0 11.5px;
  position: relative;
  padding-left: 31px;
  color: var(--figma-green, #00874a);
  font: 700 19px/28.5px var(--serif);
  letter-spacing: 0;
  text-transform: none;
}

body[data-design-profile="figma-ebooks-2026-09"] aside:is(.note-definition, .note-formula, .note-theorem, .note-corollary, .note-equation, .note-indesign-box, .indesign-box):has(> .note-title, > .callout-label) > :is(.note-title, .callout-label)::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 0;
  width: 24px;
  height: 24px;
  background: var(--figma-definition-icon, none) center / 24px 24px no-repeat;
  pointer-events: none;
}

body[data-design-profile="figma-ebooks-2026-09"] aside:is(.note-definition, .note-formula, .note-theorem, .note-corollary, .note-equation, .note-indesign-box, .indesign-box):has(> .note-title) > .callout-label {
  display: none;
}

body[data-design-profile="figma-ebooks-2026-09"] aside:is(.note-definition, .note-formula, .note-theorem, .note-corollary, .note-equation, .note-indesign-box, .indesign-box):has(> .note-title, > .callout-label) > :last-child {
  margin-bottom: 0;
}

/* Four source-authored feature roles now have dedicated Figma masters.
   Their 700×164 specimens specify offsets, not a fixed reading height.
   Keep long prose, tables, math and wrapped titles in normal document flow. */
body[data-design-profile="figma-ebooks-2026-09"] aside:is(.note-student-project, .note-collaborative-exercise, .note-note, .note-stats-lab) {
  margin: 14px 0 16px;
  padding: 12px 15px 16px;
  border: 0;
  border-radius: 10px;
  background: var(--figma-feature-bg);
  color: var(--figma-ink, #000);
  font: 400 16px/24px var(--serif);
}

body[data-design-profile="figma-ebooks-2026-09"] aside.note-student-project {
  --figma-feature-bg: var(--figma-student-project-bg);
  --figma-feature-color: var(--figma-blue, #1d56a6);
  --figma-feature-icon: var(--figma-student-project-icon);
}

body[data-design-profile="figma-ebooks-2026-09"] aside.note-collaborative-exercise {
  --figma-feature-bg: var(--figma-collaborative-exercise-bg);
  --figma-feature-color: var(--figma-blue, #1d56a6);
  --figma-feature-icon: var(--figma-collaborative-exercise-icon);
}

body[data-design-profile="figma-ebooks-2026-09"] aside.note-note {
  --figma-feature-bg: var(--figma-note-bg);
  --figma-feature-color: var(--figma-ink, #000);
  --figma-feature-icon: var(--figma-note-icon);
}

body[data-design-profile="figma-ebooks-2026-09"] aside.note-stats-lab {
  --figma-feature-bg: var(--figma-stats-lab-bg);
  --figma-feature-color: var(--figma-orange, #e66425);
  --figma-feature-icon: var(--figma-stats-lab-icon);
}

body[data-design-profile="figma-ebooks-2026-09"] aside:is(.note-student-project, .note-collaborative-exercise, .note-note, .note-stats-lab) > .callout-label {
  display: block;
  position: relative;
  margin: 0 0 11.5px;
  padding-left: 31px;
  color: var(--figma-feature-color);
  font: 700 19px/28.5px var(--serif);
  letter-spacing: 0;
  text-transform: none;
}

body[data-design-profile="figma-ebooks-2026-09"] aside:is(.note-student-project, .note-collaborative-exercise, .note-note, .note-stats-lab) > .callout-label::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 0;
  width: 24px;
  height: 24px;
  background: var(--figma-feature-icon) center / 24px 24px no-repeat;
  pointer-events: none;
}

body[data-design-profile="figma-ebooks-2026-09"] aside.note-stats-lab > .callout-label {
  font-style: italic;
}

/* The renderer preserves the authored project title as an inline span after
   its source label. It shares one wrapping heading and one decorative icon. */
body[data-design-profile="figma-ebooks-2026-09"] aside.note-student-project > .callout-label > .feature-title {
  color: #333;
  font: italic 600 18px/27px var(--serif);
}

/* Retain CM's earlier source-title shape alongside the shared inline title. */
body[data-design-profile="figma-ebooks-2026-09"] aside.note-student-project > .note-title {
  display: inline;
  margin: 0 0 12px;
  color: #333;
  font: italic 600 18px/27px var(--serif);
}

body[data-design-profile="figma-ebooks-2026-09"] aside:is(.note-student-project, .note-collaborative-exercise, .note-note, .note-stats-lab) > .callout-label + p {
  margin-top: 0;
}

body[data-design-profile="figma-ebooks-2026-09"] aside:is(.note-student-project, .note-collaborative-exercise, .note-note, .note-stats-lab) > :last-child {
  margin-bottom: 0;
}

body[data-design-profile="figma-ebooks-2026-09"] aside.example {
  margin: 32px 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--figma-ink, #000);
}

body[data-design-profile="figma-ebooks-2026-09"] aside.example > .ex-head {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0 0 16px;
  color: inherit;
  font: 700 16px/24px var(--sans);
  font-stretch: normal;
}

body[data-design-profile="figma-ebooks-2026-09"] .ex-head > .ex-label {
  flex: none;
  min-width: 127px;
  min-height: 39px;
  margin: 0;
  padding: 3px 12px;
  border-radius: 7px;
  background: var(--figma-orange, #e66425);
  color: #fff;
  text-align: center;
  font: 700 22px/33px "Open Sans Condensed",var(--sans);
  font-stretch: normal;
  letter-spacing: .44px;
  text-transform: uppercase;
}

body[data-design-profile="figma-ebooks-2026-09"] .ex-head > :is(.ex-title, strong) {
  min-width: 0;
  font: inherit;
}

/* The September 9 Figma revision removes the example end decoration. */
body[data-design-profile="figma-ebooks-2026-09"] aside.example::after {
  content: none;
}

/* The profile emits a real inline label from the source Solution word. The
   base reader's generated block label would duplicate that content. */
body[data-design-profile="figma-ebooks-2026-09"] .solution::before {
  content: none;
}

body[data-design-profile="figma-ebooks-2026-09"] :is(.solution-label, .run-title) {
  display: inline;
  color: var(--figma-blue, #1d56a6);
  font: 700 16px/24px var(--sans);
  font-stretch: normal;
}

/* Authored Try It and other practice roles retain their source labels and
   numbers; CSS only supplies the shared Figma practice style. */
body[data-design-profile="figma-ebooks-2026-09"] aside:is(.note-try, .note-practice-program, .note-check-point, .note-checkpoint) {
  position: relative;
  margin: 24px 0;
  padding: 6px 39px 7px 44px;
  min-height: 43px;
  border: 0;
  border-radius: 10px;
  background: var(--figma-try-bg, #f2ebf4);
  color: var(--figma-ink, #000);
}

/* A source calculator heading within a Try It belongs to that feature's
   instructions. Use the existing body ink on its lavender background while
   preserving the heading's semantic level and type scale. */
body[data-design-profile="figma-ebooks-2026-09"] aside.note-try :is(h2, h3, h4).calculator-heading {
  color: var(--figma-ink, #000);
}

body[data-design-profile="figma-ebooks-2026-09"] aside:is(.note-try, .note-practice-program, .note-check-point, .note-checkpoint)::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 10px;
  width: 24px;
  height: 24px;
  background: var(--figma-try-icon, none) center / 24px 24px no-repeat;
  pointer-events: none;
}

body[data-design-profile="figma-ebooks-2026-09"] aside:is(.note-try, .note-practice-program, .note-check-point, .note-checkpoint) > .callout-label {
  display: inline;
  margin: 0 12px 0 0;
  color: var(--figma-purple, #7f3f98);
  font: italic 700 20px/30px var(--serif);
  letter-spacing: 0;
  text-transform: none;
}

body[data-design-profile="figma-ebooks-2026-09"] aside:is(.note-try, .note-practice-program, .note-check-point, .note-checkpoint) > .callout-label + p:not(.note-title) {
  display: inline;
  margin: 0;
}

/* Display equations need a block parent for the existing horizontal scroller.
   Keep ordinary and inline-math checkpoints on the label's line. */
body[data-design-profile="figma-ebooks-2026-09"] aside:is(.note-try, .note-practice-program, .note-check-point, .note-checkpoint) > .callout-label + p:not(.note-title):has(> math[display="block"]) {
  display: block;
}

body[data-design-profile="figma-ebooks-2026-09"] aside:is(.note-try, .note-practice-program, .note-check-point, .note-checkpoint) > :last-child {
  margin-bottom: 0;
}

/* Features without a dedicated frame retain their interaction and overflow
   rules. Bring their text into the same scale without changing their markup. */
body[data-design-profile="figma-ebooks-2026-09"] main :is(figcaption, .table-scroll, table, th, td, details.answer, details.solution-reveal) {
  font-size: 16px;
  line-height: 24px;
}

body[data-design-profile="figma-ebooks-2026-09"] .table-scroll {
  max-width: 100%;
}

/* A caption is flowing text, not two competing flex columns. Its figure owns
   the reading measure; only the illustration retains a print-relative width. */
body[data-design-profile="figma-ebooks-2026-09"] main figure:not(.hero) {
  width: 100%;
}

body[data-design-profile="figma-ebooks-2026-09"] main figure:not(.hero) > img[src^="figures/"]:not(.eqvec) {
  width: min(100%, 45rem);
  max-height: 48rem;
}

body[data-design-profile="figma-ebooks-2026-09"] main figure:not(.hero) > figcaption {
  display: block;
  width: 100%;
  max-width: 100%;
  text-align: center;
  white-space: normal;
}

body[data-design-profile="figma-ebooks-2026-09"] main figure:not(.hero) > figcaption > .cap-label {
  margin-right: .3em;
}

/* A caption holding a display equation keeps the base sheet's flex row.

   The base sheet lays a caption out as `figcaption{display:flex}` with
   `.cap-desc{min-width:0}`, which blockifies the description and lets it shrink —
   that is what makes the shared `:has(> math[display="block"])` scroller work. This
   profile overrides the caption to `display:block`, so `.cap-desc` is an INLINE span
   again, and overflow does not apply to an inline box: its scrollWidth is 0, the
   runtime containment pass reads "no overflow", sets overflow:visible, and the
   equation escapes the page (college-algebra-2e 5.6 in twu-math-2203: scrollWidth
   408 at 320 px, WCAG 1.4.10).

   Restoring flex for exactly these captions scrolls the equation and lets the pass
   give it a tab stop, while the label and the ⓘ credit disclosure stay on the row
   with it — `figcaption{display:block}` plus a blockified description would have put
   the credit button alone on a third line. Captions of ordinary text or inline math
   are untouched. */
body[data-design-profile="figma-ebooks-2026-09"] main figure:not(.hero) > figcaption:has(> .cap-desc > math[display="block"]) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: .3rem;
  position: relative;
}

/* `flex: 1 1 0`, not the base sheet's auto basis: an equation wider than the
   caption has a hypothetical main size of 390 px, so with an auto basis the
   description wraps to its own line and pushes the credit button onto a third
   one. From a zero basis it stays on the row and shrinks into the space the
   label and the button leave, which is the box the scroller needs anyway. */
body[data-design-profile="figma-ebooks-2026-09"] main figure:not(.hero) > figcaption:has(> .cap-desc > math[display="block"]) > .cap-desc {
  flex: 1 1 0;
  min-width: 0;
}

/* The credit popover hangs off the button, and the button now sits at the
   caption's right edge, so `left: 50%; width: min(22rem, 80vw)` put most of it
   outside a 320 px viewport and widened the page to 413 px — the same SC 1.4.10
   failure this rule set exists to remove, one interaction later. Making the
   wrapper static hands the popover's containing block to the caption above, which
   is centred and no wider than the page, so the popover centres on the caption
   instead of on the button. `bottom` is re-stated because it now resolves against
   the caption's height rather than the button's. */
body[data-design-profile="figma-ebooks-2026-09"] main figure:not(.hero) > figcaption:has(> .cap-desc > math[display="block"]) > .credit-wrap {
  position: static;
}

body[data-design-profile="figma-ebooks-2026-09"] main figure:not(.hero) > figcaption:has(> .cap-desc > math[display="block"]) > .credit-wrap > .credit-pop {
  bottom: calc(100% + .4rem);
}

/* Reviewed extension: original graph labels can be read at a larger scale
   without widening the page or requiring a pointer-only image viewer. */
body[data-design-profile="figma-ebooks-2026-09"] .figure-enlargement {
  margin-top: 8px;
  text-align: left;
}

body[data-design-profile="figma-ebooks-2026-09"] .figure-enlargement > summary {
  cursor: default;
  list-style: none;
  padding: 0;
}
body[data-design-profile="figma-ebooks-2026-09"] .figure-enlargement > summary::-webkit-details-marker {
  display: none;
}
body[data-design-profile="figma-ebooks-2026-09"] .figure-enlargement > summary img {
  cursor: zoom-in;
}
body[data-design-profile="figma-ebooks-2026-09"] .figure-enlargement > summary:focus-visible {
  /* The image remains the visual target; focus is still visible for keyboard
     users without introducing a separate icon or instruction. */
  outline: 2px solid var(--figma-blue, #1d56a6);
  outline-offset: 2px;
}

/* Figures without an authored print width still receive the shared 1.5×
   reading treatment when the image lives inside the native summary. Inline
   width declarations from the source remain authoritative. */
body[data-design-profile="figma-ebooks-2026-09"] .figure-enlargement > summary img[src^="figures/"]:not(.eqvec) {
  width: min(100%, 45rem);
  max-width: 100%;
  max-height: 48rem;
}

body[data-design-profile="figma-ebooks-2026-09"] .figure-enlargement > div {
  margin-top: 8px;
}

/* Print-relative figure widths must not trap the enlarged view in a small
   fraction of the available reading column. Closed figures keep their width. */
body[data-design-profile="figma-ebooks-2026-09"] figure:has(> .figure-enlargement[open]) {
  width: 100% !important;
}

body[data-design-profile="figma-ebooks-2026-09"] .figure-panels-scroll::before {
  content: "Scroll horizontally to see both graphs.";
  display: block;
  margin-block: 4px;
  font: 400 14px/20px var(--sans);
  color: var(--ink);
}

body[data-design-profile="figma-ebooks-2026-09"] :is(details.answer, details.solution-reveal) > summary {
  font: 700 16px/24px var(--sans);
  text-transform: none;
  letter-spacing: 0;
}

@media (max-width: 560px) {
  body[data-design-profile="figma-ebooks-2026-09"] aside.example > .ex-head {
    flex-wrap: wrap;
    column-gap: 16px;
    row-gap: 0;
  }

  body[data-design-profile="figma-ebooks-2026-09"] aside:is(.note-try, .note-practice-program, .note-check-point, .note-checkpoint) {
    padding-right: 16px;
  }
}
/* Book entry, Figma 7333:330 retrieved 2026-09-11. Responsive layouts flow;
   authored cover, title, contributors, chapter destinations and colophon remain. */
@font-face{font-family:"Roboto Serif";src:url("RobotoSerif-Bold-cde2e07b317b.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
:root{--figma-contents-version:2026-09-11;--figma-contents-ink:#333333;--figma-contents-row-opacity:.1;--figma-contents-author-opacity:.5}
body[data-reader-page="contents"] .book-shell{display:grid;background:linear-gradient(to right,var(--figma-rail) 0,var(--figma-rail) clamp(240px,28.333333vw,408px),#fff 0)}
body[data-reader-page="contents"] .book-shell main{width:100%;margin:0;padding:30px 34px 43px}
body[data-reader-page="contents"] .book-identity{display:grid;grid-template-columns:235px minmax(0,1fr);gap:42px;min-height:304px;align-items:start}
body[data-reader-page="contents"] .book-contents-cover{display:block;width:235px;height:304px;max-width:100%;object-fit:contain;border-radius:8px;border:0;padding:0;background:none}
body[data-reader-page="contents"] .book-contents-title{font:700 37px/55.5px "Roboto Serif",var(--serif);font-optical-sizing:none;font-synthesis:none;letter-spacing:0;color:#000;margin:0;padding:0;border:0;border-radius:0;background:none;text-transform:none}
body[data-reader-page="contents"] .book-contents-edition{font:700 20px/25px var(--sans);color:var(--figma-brand-orange);text-transform:uppercase;margin:4px 0 0}
body[data-reader-page="contents"] .book-authors{margin-top:43.5px}
body[data-reader-page="contents"] .book-authors-label{font:700 16px/24px var(--sans);color:rgba(0,0,0,var(--figma-contents-author-opacity));text-transform:uppercase;margin:0 0 16px}
body[data-reader-page="contents"] .book-author{margin:0 0 16px}
body[data-reader-page="contents"] .book-author:last-child{margin-bottom:0}
body[data-reader-page="contents"] .book-author-name{font:600 23px/28px "Roboto Serif",var(--serif);font-optical-sizing:none;font-synthesis:none;color:#000;margin:0 0 2px}
body[data-reader-page="contents"] .book-author-affiliation{font:400 16px/20px var(--sans);color:#000;margin:0}
body[data-reader-page="contents"] .contents-list{list-style:none;display:flex;flex-direction:column;gap:10px;margin:35px 0 0;padding:0;font:600 21px/24px var(--sans)}
body[data-reader-page="contents"] .contents-list li{margin:0;padding:0}
body[data-reader-page="contents"] .contents-list a{display:flex;align-items:baseline;gap:16px;min-height:56px;padding:16px 20px;background:rgba(255,110,45,var(--figma-contents-row-opacity));border:0;border-radius:10px;color:var(--figma-contents-ink);text-decoration:none;font:600 21px/24px var(--sans)}
body[data-reader-page="contents"] .contents-list a b{color:var(--figma-brand-orange);font-weight:800;flex:none;margin:0}
body[data-reader-page="contents"] .contents-list a span{min-width:0;overflow-wrap:anywhere}
body[data-reader-page="contents"] .contents-list a:hover span{text-decoration:underline}
body[data-reader-page="contents"] .contents-list a:focus-visible{outline:3px solid var(--figma-navy);outline-offset:3px}
body[data-reader-page="contents"] .book-contents .colophon{border:0;margin:32px 0 0;padding:0;font:600 14px/21px var(--sans);color:var(--figma-contents-ink)}
body[data-reader-page="contents"] .book-contents .colophon p{font:inherit;margin:0 0 12px}
body[data-reader-page="contents"] .book-contents .colophon p:last-child{margin-bottom:0}
body[data-reader-page="contents"] .book-contents .colophon a{color:inherit}
@media(min-width:821px) and (max-width:1100px){
  body[data-reader-page="contents"] .book-shell main{padding-left:24px;padding-right:24px}
  body[data-reader-page="contents"] .book-identity{grid-template-columns:160px minmax(0,1fr);gap:24px}
  body[data-reader-page="contents"] .book-contents-cover{width:160px;height:auto;aspect-ratio:235/304}
  body[data-reader-page="contents"] .book-contents-title{font-size:30px;line-height:39px}
  body[data-reader-page="contents"] .book-authors{margin-top:24px}
}
@media(max-width:820px){
  body[data-reader-page="contents"] .book-shell{display:flex;flex-direction:column;background:#fff}
  body[data-reader-page="contents"] .book-shell main{padding:24px 18px 40px;margin:0 auto}
  body[data-reader-page="contents"] .book-identity{grid-template-columns:minmax(100px,180px) minmax(0,1fr);gap:24px;min-height:0}
  body[data-reader-page="contents"] .book-contents-cover{width:100%;height:auto;aspect-ratio:235/304}
  body[data-reader-page="contents"] .book-contents-title{font-size:30px;line-height:39px}
  body[data-reader-page="contents"] .book-authors{margin-top:24px}
  body[data-reader-page="contents"] .contents-list{margin-top:28px}
}
@media(max-width:540px){
  body[data-reader-page="contents"] .book-identity{grid-template-columns:minmax(0,1fr);gap:20px}
  body[data-reader-page="contents"] .book-contents-cover{width:180px;justify-self:center}
  body[data-reader-page="contents"] .book-contents-title{font-size:28px;line-height:36px}
  body[data-reader-page="contents"] .contents-list a{padding-left:16px;padding-right:16px}
}
/* An explicit source/permission omission is compatible reader output, while
   full cover-reference acceptance remains pending a cleared source asset. */
body[data-reader-page="contents"][data-reader-cover="source-unavailable"] .book-identity--no-cover{display:block;min-height:0}

/* Book-selected amendment: remove the decorative grid from all opener regions.
   Preserve the chapter band's orange gradient, photo, captions and geometry. */
body[data-design-profile] .chap-landing figure.hero::before,
body[data-design-profile] .chap-intro::before{content:none;background-image:none}
body[data-design-profile] .chap-band{
  background-image:linear-gradient(90deg,rgb(from var(--figma-brand-orange) r g b / var(--figma-chapter-opacity)),rgb(from var(--figma-gradient-end) r g b / var(--figma-chapter-opacity)));
  background-size:100% 100%;
}

@media print {
  body[data-design-profile="figma-ebooks-2026-09"] :is(.skip, .xyz-hdr, .book-band, .book-bar, nav.toc, .pager, .preview-note, .xyz-ftr) { display:none }
  body[data-design-profile="figma-ebooks-2026-09"] .reader-shell { display:block; max-width:none; margin:0; background:none }
  body[data-design-profile="figma-ebooks-2026-09"] main { max-width:none; padding:0; margin:0 }
  body[data-design-profile="figma-ebooks-2026-09"] .page-attrib { margin-top:.75rem; padding-top:.25rem; break-before:avoid-page }
  body[data-design-profile="figma-ebooks-2026-09"] main :is(h1, h2, h3, h4, .ex-head, .callout-label, p:has(> .solution-label)) { break-after:avoid-page }
  body[data-design-profile="figma-ebooks-2026-09"] main :is(p, li) { orphans:2; widows:2 }
  body[data-design-profile="figma-ebooks-2026-09"] main p:has(math) { break-inside:avoid-page }
  body[data-design-profile="figma-ebooks-2026-09"] main :is(figure, .note-try) { break-inside:avoid-page }
  body[data-design-profile="figma-ebooks-2026-09"] .table-scroll { overflow:visible }
  body[data-design-profile="figma-ebooks-2026-09"] main :is(caption, thead) { break-after:avoid-page }
  body[data-design-profile="figma-ebooks-2026-09"] main thead { display:table-header-group }
  body[data-design-profile="figma-ebooks-2026-09"] main tr { break-inside:avoid-page }
  body[data-design-profile="figma-ebooks-2026-09"] main tbody > tr:first-child { break-before:avoid-page }
}