/* Shared reading palette. Collection stylesheets own layout; change colors here. */
:root {
  color-scheme: dark;
  --bg: #141715;
  --paper: #141715;
  --panel: #1c211d;
  --white: #1c211d;
  --panel-2: #252c26;
  --panel2: #252c26;
  --line: #404740;
  --line-soft: #353c36;
  --text: #cfd2c8;
  --ink: #cfd2c8;
  --body: #b7bdb3;
  --muted: #9ea79e;
  --dim: #88938a;
  --mint: #aac3ce;
  --blue: #aac3ce;
  --blue-soft: #343d42;
  --orange: #cfb394;
  --orange-soft: #3b352e;
  --navy: #181d19;
  --deep: #171c18;
  --code-bg: #151b17;
  --violet: #beb7d2;
  --red: #d4a49b;
  --on-accent: #263136;
  --accent-hover: #bdd0d7;
  --selection: #53636a;
  --illustration-text: #adbfcc;
  --syntax-name: #c4cbc6;
  --syntax-keyword: #beb7d2;
  --syntax-function: #aac5d5;
  --syntax-string: #cbb89b;
  --syntax-number: #d3b49c;
  --syntax-comment: #9ca99e;
  --syntax-punctuation: #b5bdb5;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #eeeae2; --paper: #eeeae2;
  --panel: #f7f4ed; --white: #f7f4ed;
  --panel-2: #e6e5de; --panel2: #e6e5de;
  --line: #c6cbc2; --line-soft: #d6d9d0;
  --text: #303932; --ink: #303932; --body: #465148;
  --muted: #5e6a60; --dim: #657367;
  --blue: #356479; --mint: #356479; --blue-soft: #dce6e9;
  --orange: #8b5931; --orange-soft: #e9dfd0;
  --navy: #e1e5dc; --deep: #e9ece4; --code-bg: #e8ece5;
  --violet: #715282; --red: #a65349;
  --on-accent: #f7f4ed; --accent-hover: #2d576a; --selection: #cbd9de;
  --syntax-name: #34433a; --syntax-keyword: #705080;
  --syntax-function: #285f7b; --syntax-string: #796020;
  --syntax-number: #935028; --syntax-comment: #627367;
  --syntax-punctuation: #53645a;
}
body { background: var(--bg); color: var(--body); padding-top: 38px; }
code { color: var(--text); }
.theme-toggle { position: fixed; top: 10px; right: 18px; z-index: 150; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--body); font: 650 12px/1.3 system-ui,sans-serif; padding: 8px 12px; cursor: pointer; }
.theme-toggle:hover { border-color: var(--blue); }
.lesson-shell, .content-layout { display: block; max-width: 860px; margin-inline: auto; padding-inline: 30px; }
.lesson-intro, .page-top, .topline { max-width: 860px; margin-inline: auto; }
.lesson-navigation { position: fixed; left: 20px; top: 70px; width: clamp(160px, calc((100vw - 920px) / 2), 250px); max-height: calc(100vh - 90px); overflow-y: auto; }
.lesson-navigation > summary { display: none; }
.lesson-navigation .side, .lesson-navigation .side-nav, .lesson-navigation .side-rail { position: static; display: block; width: auto; padding-top: 0; }
.lesson-navigation aside a { font-size: 13.5px; line-height: 1.35; padding: 7px 10px; }
.lesson-tree .lesson-group { margin: 0 0 6px; }
.lesson-tree .lesson-group > summary { cursor: pointer; font: 700 12.5px/1.4 system-ui,sans-serif; letter-spacing: .03em; color: var(--dim); padding: 6px 0; list-style: none; }
.lesson-tree .lesson-group > summary::-webkit-details-marker { display: none; }
.lesson-tree .lesson-group > summary::before { content: "▸"; display: inline-block; width: 1.1em; color: var(--dim); }
.lesson-tree .lesson-group[open] > summary::before { content: "▾"; }
.lesson-tree .lesson-group > summary:hover { color: var(--text); }
.lesson-tree ol { list-style: none; margin: 2px 0 8px; padding: 0; }
.lesson-tree .lesson-link { display: block; font-size: 14.5px; line-height: 1.35; color: var(--muted); padding: 6px 10px; border-left: 1px solid var(--line); }
.lesson-tree .lesson-link:hover { color: var(--blue); border-color: var(--blue); text-decoration: none; }
.lesson-tree li.current > .lesson-link { color: var(--text); font-weight: 700; border-left: 2px solid var(--blue); }
.lesson-tree li.current > aside { margin: 2px 0 6px 12px; }
.full-source { border-top: 1px solid var(--line); background: var(--panel); }
.full-source summary { padding: 13px 17px; font-size: 13px; font-weight: 650; color: var(--blue); cursor: pointer; }
.full-source pre { max-height: 640px; overflow: auto; margin: 0; padding: 18px; background: var(--code-bg); font-size: 13px; line-height: 1.7; }
.source-library .full-source { border: 1px solid var(--line); border-radius: 8px; margin: 12px 0; }
.update-walk { padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); margin: 20px 0 38px; }
.update-phases, .update-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.update-phases button, .update-actions button { padding: 8px 11px; border: 1px solid var(--line); border-radius: 6px; font: 400 14px/1.4 system-ui,sans-serif; background: var(--panel-2); color: var(--body); cursor: pointer; }
.update-phases button.active { border-color: var(--blue); color: var(--blue); }
.update-actions button:disabled { opacity: .5; cursor: default; }
.update-scroll { overflow-x: auto; margin: 14px 0; }
.diagram-hint { display: none; color: var(--muted); font-size: 12px; }
.update-svg { display: block; width: 100%; min-width: 620px; color: var(--blue); }
.update-svg text { fill: var(--body); font: 14px ui-monospace,SFMono-Regular,Menlo,monospace; }
.update-svg rect { fill: var(--deep); stroke: var(--line); stroke-width: 1.5; }
.update-svg .active rect { stroke: var(--blue); stroke-width: 2; fill: var(--panel-2); }
.update-svg .update-name { fill: var(--text); font-size: 16px; font-weight: 400; }
.update-svg .update-number { fill: var(--blue); font-size: 25px; }
.update-svg .update-caption { fill: var(--muted); font: 11px system-ui,sans-serif; }
.update-wire { fill: none; stroke: var(--blue); stroke-width: 1.5; marker-end: url(#update-arrow); }
.update-explanation { border-top: 1px solid var(--line); padding-top: 14px; min-height: 100px; font-size: 14px; color: var(--body); }
@media (max-width: 1199px) {
  .lesson-navigation { position: static; width: auto; max-height: none; margin: 8px 0 22px; padding: 10px 15px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
  .lesson-navigation > summary { display: list-item; font-size: 13px; color: var(--blue); cursor: pointer; }
  .lesson-navigation aside { margin-top: 14px; }
}
@media (max-width: 600px) {
  .diagram-hint { display: block; }
  .lesson-shell, .content-layout { padding-inline: 20px; }
  .theme-toggle { right: 12px; }
}
h1, h2, h3 { color: var(--text); }
::selection { background: var(--selection); color: var(--text); }
.article-head h1, .chapter-head h2 { font-size: 26px; line-height: 1.18; letter-spacing: -.025em; }
.overview h1, .hero h1 { font-size: 26px; line-height: 1.16; letter-spacing: -.03em; }
.hero { min-height: 0; padding-block: 52px 54px; }
.hero-visual { min-height: 320px; }

/* Neutral surfaces keep the accent on actions and data, not whole cards. */
.hero-visual { background: linear-gradient(145deg, #2b302c, #222723); border-color: var(--line); box-shadow: none; }
.chain-item, .journey-list a, .worked-example, .self-check, .lab,
.chart, .readout, .takeaway, .handoff-cell, .network-diagram,
.recap-grid > div, .lesson-pagination a, .film-frame,
.course-card, .compact-trace, .code-file, .code-map-card,
.concept-card, .trace, .code-card, .check, .bottom-nav a,
.lesson-card, .field, .plot { background: var(--panel); border-color: var(--line); box-shadow: none; }
.chain-accent, .handoff-highlight, .metric-card.highlight,
.experiment-output .readout { background: var(--panel-2); border-color: var(--line); }
.journey-list a:hover, .button-secondary:hover, .side-rail a.active,
.side-rail a:hover, .side-nav a.active, .side a:hover,
.code-steps button.active, .code-map-link:hover { background: var(--panel-2); }
.lesson-card:hover { background: var(--panel-2); border-color: var(--blue); }
.lab { background: var(--panel); border-color: var(--line); }
.readout, .code-steps button, .metric-card, .field,
.segmented button, .controls button, .control-button { background: var(--panel-2); border-color: var(--line); }
.field input[type=number], .field select { background: var(--deep); border-color: var(--line); color: var(--text); }
.plot, .chart, .network-diagram, .world-stage { background-color: var(--deep); }
.code-card pre, .code-file pre, .step-output { background: var(--code-bg); color: var(--text); }
.check, .self-check { background: var(--panel-2); }
.check p, .self-check p { border-color: var(--line); color: var(--body); }
.code-route a, .code-map-link { background: var(--panel); border-color: var(--line); }
.route span { background: var(--panel-2); border-color: var(--line); color: var(--text); }
.lab-actions button { background: var(--panel-2); border-color: var(--line); color: var(--blue); }
.lab-actions button:hover { background: var(--blue-soft); }
.lab-actions button.primary, .controls button.active, .control-button.active,
.control-button.primary, .segmented button.active, .button-primary { background: var(--blue); border-color: var(--blue); color: var(--on-accent); }
.button-primary:hover { background: var(--accent-hover); }
.course-card:hover { border-color: var(--blue); box-shadow: none; }
.code-map-link:hover, .side a:hover { text-decoration: none; }

/* Paragraphs should read softly even where earlier styles used bright literals. */
.hero-lead, .chapter-head > p, .prose p, .lesson-story p,
.lesson-goal, .lab-observation, .network-caption p, .recap > p,
.callout, .callout strong, .takeaway, .takeaway span,
.code-question { color: var(--body); }
.lesson-story strong, .prose strong { color: var(--text); }
.trace-row > span, .trace-row code, .trace-line code, .step-output p { color: var(--body); }
.code-file .explain strong { color: var(--text); }

/* Keep chart guides visible without the former bright blue-green glow. */
.plot .grid, svg .grid-line { stroke: #4b514d; }
.plot .axis, svg .axis-line { stroke: #8b948e; }
:root[data-theme="light"] .hero-visual { background: var(--panel); }
:root[data-theme="light"] .hero-visual-top,
:root[data-theme="light"] .hero-visual-bottom { border-color: var(--line); }
:root[data-theme="light"] .media figcaption { background: var(--navy); color: var(--body); }
:root[data-theme="light"] .formula code,
:root[data-theme="light"] .self-check summary,
:root[data-theme="light"] .readout p,
:root[data-theme="light"] .range-label { color: var(--body); }
:root[data-theme="light"] .button-primary,
:root[data-theme="light"] .segmented button.active,
:root[data-theme="light"] .controls button.active,
:root[data-theme="light"] .control-button.primary,
:root[data-theme="light"] .control-button.active,
:root[data-theme="light"] .lab-actions button.primary { color: var(--on-accent); }
:root[data-theme="light"] .button-primary:hover { background: var(--accent-hover); }
:root[data-theme="light"] .plot .grid,
:root[data-theme="light"] svg .grid-line { stroke: var(--line); }
.chart svg text, .plot svg text { fill: var(--muted); }
svg .diagram-label, svg .diagram-small { fill: var(--body); }
svg .diagram-value { fill: var(--text); }
svg .diagram-node { fill: var(--panel); stroke: var(--dim); }
svg .diagram-node.active { fill: var(--panel-2); }

/* Pygments renders these spans into the HTML; highlighting works over file://. */
pre code.language-python { color: var(--text); }
pre code.language-python .py-n { color: var(--syntax-name); }
pre code.language-python .py-k,
pre code.language-python .py-kn,
pre code.language-python .py-kc,
pre code.language-python .py-ow { color: var(--syntax-keyword); }
pre code.language-python .py-nf,
pre code.language-python .py-nn,
pre code.language-python .py-nb { color: var(--syntax-function); }
pre code.language-python .py-s1,
pre code.language-python .py-sd,
pre code.language-python .py-se,
pre code.language-python .py-s2,
pre code.language-python .py-sa,
pre code.language-python .py-si { color: var(--syntax-string); }
pre code.language-python .py-mi,
pre code.language-python .py-mf { color: var(--syntax-number); }
pre code.language-python .py-c1 { color: var(--syntax-comment); font-style: italic; }
pre code.language-python .py-o,
pre code.language-python .py-p { color: var(--syntax-punctuation); }
.code-card pre, .code-file pre { font-size: 13px; line-height: 1.7; }
@media (max-width: 600px) {
  .article-head h1, .chapter-head h2 { font-size: 24px; }
  .overview h1, .hero h1 { font-size: 24px; }
  .hero { padding-block: 36px 40px; }
}

/* Large, regular-weight mechanism cards, shared by both foundation lessons. */
.route { gap: 10px; align-items: stretch; margin-block: 24px 32px; }
.route > span { flex: 1 1 110px; padding: 17px 13px; min-height: 94px; font-size: 16px; font-weight: 400; line-height: 1.45; display: flex; flex-direction: column; justify-content: center; }
.route > b { align-self: center; font-size: 20px; font-weight: 400; }
.route small { display: block; margin-top: 8px; font-size: 14px; color: var(--muted); }
.world-stage .stage-top, .world-stage .stage-floor { color: var(--illustration-text); }
.tensor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px 0; }
.tensor-grid > div { padding: 17px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.tensor-grid h3 { font-size: 16px; font-weight: 400; }
.tensor-grid p { font-size: 14px; margin-bottom: 0; }
@media (max-width: 600px) {
  .route { flex-direction: column; gap: 6px; }
  .route > span { flex: auto; min-height: 72px; }
  .route > b { transform: rotate(90deg); }
  .tensor-grid { grid-template-columns: 1fr; }
}

/* Reading headings: compact type across every collection. */
body h1, body .article-head h1, body .overview h1, body .hero h1 { font-size: 26px; font-weight: 600; line-height: 1.3; letter-spacing: -.015em; }
body h2, body .chapter-head h2, body .lab h2, body .lesson-card h2, body .definitions h2, body .overview-note h2 { font-size: 22px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; }
body h3 { font-size: 18px; font-weight: 700; line-height: 1.4; letter-spacing: 0; margin: 26px 0 8px; }
body .tensor-grid h3 { font-size: 16px; font-weight: 400; }
@media (max-width: 600px) {
  body h1, body .article-head h1, body .overview h1, body .hero h1 { font-size: 24px; }
  body h2, body .chapter-head h2, body .lab h2, body .lesson-card h2, body .definitions h2 { font-size: 21px; }
}

.notebook-callout { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 16px 18px; margin: 10px 0 30px; }
.notebook-callout > p:first-child { color: var(--text); margin: 0 0 12px; }
.notebook-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.notebook-actions a { display: inline-block; padding: 9px 13px; border: 1px solid var(--blue); border-radius: 6px; color: var(--blue); font-size: 14px; }
.notebook-actions a:hover { background: var(--blue-soft); text-decoration: none; }
.notebook-callout .notebook-help { font-size: 13px; color: var(--muted); margin: 12px 0 0; line-height: 1.7; }
.teaching-figure { margin: 24px 0; padding: 16px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); }
.loss-curve-svg { display: block; width: 100%; height: auto; }
.teaching-figure figcaption { padding: 12px 6px 2px; color: var(--body); font-size: 14px; line-height: 1.65; }
@media (max-width: 600px) { .teaching-figure { padding: 8px; overflow-x: auto; } .loss-curve-svg { min-width: 540px; } }

/* Glossaries use the same size as lesson prose, with terms next to definitions. */
body .definitions dl > div, body .concepts dl > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 14px; padding-block: 12px; }
body .definitions dt, body .definitions dd, body .concepts dt, body .concepts dd { font-size: 16px; line-height: 1.7; }
body .definitions dt, body .concepts dt { text-align: right; font-weight: 700; }
body .definitions dd, body .concepts dd { margin: 0; }
.workflow-breakdown { padding-left: 22px; }
.workflow-breakdown li { margin-bottom: 14px; line-height: 1.75; }
body .plot-card figcaption, body .readout > span, body .kicker, body .eyebrow, body .lab-label, body .mini-label { text-transform: none; letter-spacing: normal; font-weight: 400; }
body .plot-card figcaption { font-size: 14px; }
body .readout > span { font-size: 12px; }
@media (max-width: 680px) {
  body .definitions dl > div, body .concepts dl > div { display: block; }
  body .definitions dt, body .concepts dt { text-align: left; margin-bottom: 4px; }
}

/* Inline code references stay distinct from prose and wrap on small screens. */
code:not(pre code) {
  background: var(--blue-soft);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: .1em .3em;
  color: var(--blue);
  overflow-wrap: anywhere;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* LaTeX (KaTeX) display formulas never widen the page; long ones scroll inside their own box. */
.katex-display { overflow-x: auto; overflow-y: hidden; padding: 2px 0; }
p.formula { display: block; max-width: 100%; overflow-x: auto; font-family: inherit; }

/* Key terms: one per line, bold term, colon, then its definition (web-lessons skill, "Introducing terms"). */
.terms { margin: 4px 0 18px; }
.terms > div { margin: 0 0 6px; line-height: 1.7; }
.terms dt { display: inline; font-weight: 700; color: var(--text); }
.terms dt::after { content: ":"; }
.terms dd { display: inline; margin: 0 0 0 4px; }

/* One-click choices: radio buttons styled as pills (web-lessons skill, "Controls"). */
.choice { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.choice label { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px 5px 9px; font-size: 13px; cursor: pointer; background: var(--panel-2); color: var(--body); }
.choice input { accent-color: var(--blue); margin: 0; }
.choice label:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); color: var(--text); }

/* Graph colours: inside SVG drawings only, a three-hue set (blue, orange, magenta) checked for colour-blind
   separation and contrast with the dataviz palette validator, in each theme. Text, links and code keep the
   reading palette above. Graphs that say "violet" draw it as magenta. */
svg { --blue: #3987e5; --mint: #3987e5; --orange: #d95926; --violet: #c64fa0; --red: #e66767; --blue-soft: #1e3450; --orange-soft: #3f2a1d; }
:root[data-theme="light"] svg { --blue: #2f6fb0; --mint: #2f6fb0; --orange: #c0622a; --violet: #a8457f; --red: #a65349; --blue-soft: #dce6e9; --orange-soft: #e9dfd0; }

/* Lists inside the reading flow (web writing style: parallel facts are a list). */
.reading-list { padding-left: 20px; margin: 4px 0 16px; }
.reading-list li { margin-bottom: 8px; line-height: 1.7; }

/* Math size: KaTeX's default (1.21em) reads small next to the body text. Inline math a little bigger,
   display formulas bigger still. "body" outranks katex.min.css, which pages load after this file. */
body .katex { font-size: 1.3em; }
body .katex-display > .katex { font-size: 1.5em; }
.full-source-note { margin: 0; padding: 10px 17px; border-top: 1px solid var(--line); font-size: 13px; background: var(--panel); }