/* Reading pages (courses, AI guides, cheatsheets). Loaded after style.css; matches the learning hub. */

:root {
  --bg: #0b0d12; --panel: #12151c; --panel2: #181c25; --line: #222632; --line2: #323846;
  --text: #e6e8ec; --muted: #a3aab6; --accent: #4c9bff; --brand: #1e6bff; --violet: #f5b83d;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  color-scheme: dark;
}
:root[data-theme=light] {
  --bg: #f6f7f9; --panel: #fff; --panel2: #f1f3f6; --line: #e2e5ea; --line2: #cfd4dc;
  --text: #15181e; --muted: #555d6b; --accent: #1e6bff; --brand: #1e6bff; --violet: #b7791f;
  color-scheme: light;
}
@media screen {
  :root { --text: #e6e8ec; --muted: #a3aab6; }
  :root[data-theme=light] { --text: #15181e; --muted: #555d6b; }
}
body.reader { background: var(--bg); font-family: var(--sans); }
body.reader:before { display: none; }
::selection { background: rgb(76 155 255 / 30%); }
.reader .wrap { max-width: 1240px; padding: 0 32px; }

/* top bar: hub brand, a way back to the course page, language and theme */
.reader-bar { height: 60px; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(10px); }
.reader-bar .wrap { justify-content: flex-start; gap: 22px; }
.reader-bar .brand { font-size: 16px; font-weight: 700; letter-spacing: -.2px; gap: 10px; }
.reader .monogram { width: 28px; height: 28px; border-radius: 8px; background: var(--brand); color: #fff; font-size: 12px; }
.reader-back { padding: 6px 12px; border-radius: 999px; font-size: 13px; color: var(--muted); border: 1px solid var(--line); background: var(--panel); white-space: nowrap; }
.reader-back:hover { color: var(--text); border-color: var(--line2); }
.reader-bar nav { margin-left: auto; gap: 12px; }
.reader .language-switch { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--line); }
.reader .language-switch a { padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--muted); line-height: 1.6; }
.reader .language-switch a[aria-current=page] { background: var(--text); color: var(--bg); }
.reader .theme-button { width: 34px; height: 34px; font-size: 16px; border-color: var(--line); background: var(--panel); }

/* hero */
.reader .course-hero { padding: 40px 0 30px; }
.reader-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.code-chip { font: 600 12.5px/1 var(--mono); letter-spacing: .4px; color: var(--accent); padding: 6px 9px; border-radius: 6px; background: rgb(76 155 255 / 12%); }
.reader-tags .tag { font-size: 12px; padding: 4px 9px; border-radius: 6px; color: var(--muted); background: var(--panel2); }
.reader .course-hero h1 { font-weight: 700; letter-spacing: -.6px; margin: 16px 0 14px; }
:lang(zh) .reader .course-hero h1, .reader:lang(zh) .course-hero h1 { letter-spacing: 0; }
.reader .course-meta { color: var(--muted); }
.reader .button { border-radius: 999px; gap: 10px; padding: 10px 18px; border-color: var(--line2); background: var(--panel); }
.reader .button.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.reader .button:hover { transform: none; filter: none; border-color: var(--accent); }
.reader .button.primary:hover { background: #3a7fff; }

/* contents rail */
.reader .toc { top: 84px; max-height: calc(100vh - 104px); }
.reader .toc summary { font: 600 13px/1.6 var(--sans); letter-spacing: 0; color: var(--text); }
.reader .toc li { padding: 4px 0; }
.reader .toc a { display: block; padding: 2px 8px; margin-left: -8px; border-radius: 6px; }
.reader .toc a:hover { color: var(--text); background: var(--panel2); }
.reader .toc a.is-current { color: var(--accent); background: rgb(76 155 255 / 10%); }
.reader .toc .toc-group { font: 600 12.5px/1.6 var(--sans); color: var(--text); }

/* chapters */
.reader .topic { padding: 52px 0 36px; }
.reader .topic-number { font: 600 12.5px/1.6 var(--sans); letter-spacing: .3px; color: var(--accent); }
.reader .topic h2 { font-weight: 700; letter-spacing: -.3px; margin: 10px 0 26px; }
.reader .topic h3 { font: 600 13px/1.6 var(--sans); letter-spacing: .3px; text-transform: none; color: var(--accent); }
.reader .story { border: 1px solid var(--line); border-radius: 12px; }
.reader .formula { border-radius: 12px; }
.reader .code, .reader pre.code { border-radius: 12px; background: #0e1117; border-color: var(--line); }
:root[data-theme=light] .reader .code, :root[data-theme=light] .reader pre.code { background: #f7f8fa; }
.reader .pitfall { border-left-width: 3px; border-radius: 0 10px 10px 0; }
:root[data-theme=light] .reader .pitfall strong { color: #8a5a12; }
.reader .check { border-radius: 12px; background: var(--panel); }
.reader .check summary { font-weight: 600; }
.reader .map-stage h3 { font: 600 12.5px/1.6 var(--sans); }
.reader .map-nodes a { border-radius: 8px; }
.reader .map-nodes a:hover { border-color: var(--accent); color: var(--text); }
.topic-nav { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px; margin-top: 30px; padding-top: 18px; border-top: 1px dashed var(--line); font-size: 15px; line-height: 1.5; }
.topic-nav .up { grid-column: 1 / -1; justify-self: start; color: var(--muted); }
.topic-nav .up:hover { color: var(--text); }
.topic-nav .prev, .topic-nav .next { display: block; padding: 12px 16px; border-radius: 12px; color: var(--text); background: var(--panel); border: 1px solid var(--line2); }
.topic-nav .prev { grid-column: 1; }
.topic-nav .next { grid-column: 2; text-align: right; }
.topic-nav .prev:hover, .topic-nav .next:hover { border-color: var(--accent); }
.topic-nav small { display: block; margin-bottom: 2px; font-size: 13px; color: var(--muted); }

/* reading tools and footer */
.reader .reading-tools { border-radius: 12px; }
.reader .reading-tools button[aria-pressed=true] { background: var(--text); color: var(--bg); border-color: var(--text); }
.reader-foot { font: 12.5px/1.7 var(--sans); }
.reader-foot a:hover { color: var(--text); }

@media (max-width: 760px) {
  .reader .wrap { padding: 0 16px; }
  .reader-bar .wrap { gap: 10px; }
  .reader-bar .brand { font-size: 0; gap: 0; }
  .reader-back { font-size: 12px; padding: 5px 10px; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .reader-bar nav { gap: 8px; }
  .reader .language-switch { display: inline-flex; }
  .topic-nav { grid-template-columns: minmax(0, 1fr); }
  .topic-nav .next { grid-column: 1; grid-row: 2; text-align: left; }
  .topic-nav .prev { grid-column: 1; grid-row: 3; }
}
@media print {
  .reader-bar, .topic-nav, .reader-back { display: none; }
}

/* labels that only decorated a heading */
.reader .route-heading .eyebrow, .reader .watermark { display: none; }
.reader .course-meta { font-family: var(--sans); letter-spacing: 0; }

/* each course reads in its own colour; darker in the light theme so text keeps its contrast */
body.reader { --accent: var(--course, #4c9bff); }
:root[data-theme=light] body.reader { --accent: color-mix(in srgb, var(--course, #1e6bff) 50%, #000); }
.reader .code-chip { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.reader .toc a.is-current { background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* motion: reading progress, chapter position, blocks rising into view */
.read-progress { position: fixed; z-index: 60; top: 60px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 40%, #c084fc)); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.reader .topic-head { flex-wrap: wrap; }
.chapter-dots { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.chapter-dots a { width: 7px; height: 7px; border-radius: 3px; background: var(--line2); transition: transform .15s, background .15s; }
.chapter-dots a.done { background: color-mix(in srgb, var(--accent) 45%, var(--line2)); }
.chapter-dots a.now { width: 22px; background: var(--accent); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 60%, transparent); }
.chapter-dots a:hover { transform: scaleY(1.6); background: var(--accent); }
.reader .rise { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.reader .rise.in { opacity: 1; transform: none; }
.reader .story { background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 7%, var(--panel)), var(--panel) 55%); }
.reader .formula { background: color-mix(in srgb, var(--accent) 4%, var(--panel2)); }
.reader .topic p { max-width: 46em; }
@media print { .read-progress, .chapter-dots { display: none; } .reader .rise { opacity: 1; transform: none; } }
@media (max-width: 760px) { .read-progress { top: 60px; } .chapter-dots a { width: 6px; height: 6px; } .chapter-dots a.now { width: 16px; } }

/* ---------------------------------------------------------------- step-through diagrams (viz.js) */
.viz { margin: 26px 0; border: 1px solid var(--line); border-radius: 14px; background: radial-gradient(ellipse at 100% 0, color-mix(in srgb, var(--accent) 9%, transparent), transparent 55%), var(--panel); overflow: hidden; }
.viz figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 16px 20px 0; }
.viz-kicker { font-size: 12px; font-weight: 600; color: var(--accent); }
.viz figcaption b { font-size: 16px; font-weight: 650; color: var(--text); }
.viz-hint { flex-basis: 100%; font-size: 12.5px; color: var(--muted); }
.viz noscript p { padding: 12px 20px 18px; color: var(--muted); font-size: 14px; }
.viz-options { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 14px 20px 0; }
.viz-options button { height: 30px; padding: 0 13px; border-radius: 999px; font-size: 12.5px; color: var(--muted); background: var(--panel2); border: 1px solid var(--line); }
.viz-options button[aria-pressed=true] { color: var(--bg); background: var(--accent); border-color: var(--accent); font-weight: 600; }
.viz-input { display: inline-flex; align-items: center; gap: 8px; margin-left: 6px; font-size: 12.5px; color: var(--muted); }
.viz-input input { width: 120px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line2); background: var(--bg); color: var(--text); font: 600 13px/1 var(--mono); letter-spacing: 2px; }
.viz-input input:focus { outline: none; border-color: var(--accent); }
.viz-stage { position: relative; min-height: 210px; margin: 14px 20px 0; padding: 18px; border-radius: 10px; background: color-mix(in srgb, var(--bg) 70%, var(--panel)); border: 1px solid var(--line); display: grid; place-items: center; gap: 14px; overflow: hidden; }
.viz-progress { height: 3px; margin: 12px 20px 0; border-radius: 3px; background: var(--line); overflow: hidden; }
.viz-progress i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .35s ease; }
.viz-msg { min-height: 3.6em; margin: 12px 20px 0 !important; font-size: 15px !important; line-height: 1.75 !important; color: var(--text) !important; max-width: none !important; }
.viz-msg b { color: var(--accent); }
.viz-msg code { font-size: .9em; }
.viz-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px 16px; }
.viz-controls { display: flex; gap: 6px; }
.viz-controls button { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--text); background: var(--panel2); border: 1px solid var(--line2); }
.viz-controls button:hover:not(:disabled) { border-color: var(--accent); }
.viz-controls button:disabled { opacity: .35; cursor: default; }
.viz-controls .viz-play { width: 44px; color: var(--bg); background: var(--accent); border-color: var(--accent); border-radius: 999px; }
.viz-controls svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.viz-count { font: 600 12.5px/1 var(--mono); color: var(--muted); }
.viz .chip, .viz .slot b, .viz .mem-cell b, .viz .tape b { font-family: var(--mono); }

/* sorting bars */
.bars { position: relative; width: min(340px, 100%); height: 160px; }
.bar { position: absolute; left: 0; bottom: 0; width: 25%; padding: 0 7px; background: color-mix(in srgb, var(--accent) 28%, var(--panel2)); background-clip: content-box; border-radius: 8px 8px 3px 3px; transition: transform .45s cubic-bezier(.3,.7,.2,1), background-color .3s; }
.bar span { position: absolute; left: 0; right: 0; top: -24px; text-align: center; font: 700 15px/1 var(--mono); color: var(--text); }
.bar.is-sorted { background-color: color-mix(in srgb, #34d399 45%, var(--panel2)); }
.bar.is-key { background-color: var(--accent); }
.bar.is-hot { background-color: #f5b83d; }
.viz-counter { position: absolute; top: 12px; right: 14px; font: 600 12.5px/1 var(--mono); color: var(--muted); }

/* merge sort rows */
.viz-merge { place-items: stretch; align-content: center; gap: 8px; }
.merge-row { display: flex; align-items: center; gap: 12px; animation: viz-in .35s ease both; }
.merge-label { width: 52px; flex-shrink: 0; font-size: 12px; color: var(--muted); text-align: right; }
.merge-group { display: flex; gap: 3px; padding: 4px; border-radius: 9px; border: 1px dashed var(--line2); min-width: 40px; min-height: 40px; }
.merge-group.is-empty { opacity: .4; }
.chip { display: grid; place-items: center; width: 32px; height: 30px; border-radius: 7px; font-weight: 700; font-size: 14px; background: var(--panel2); color: var(--text); transition: background .3s; }
.chip.is-hot { background: #f5b83d; color: #111; }
.merge-row.is-done .chip { background: color-mix(in srgb, #34d399 50%, var(--panel2)); }
.merge-row.is-level .merge-label { color: var(--accent); font-weight: 700; }
@keyframes viz-in { from { opacity: 0; transform: translateY(6px); } }

/* graphs: BFS and the DFA */
.graph, .dfa { width: min(480px, 100%); height: auto; overflow: visible; }
.graph line { stroke: var(--line2); stroke-width: 2.5; transition: stroke .3s; }
.graph line.is-tree { stroke: color-mix(in srgb, var(--accent) 70%, transparent); stroke-width: 3; }
.graph line.is-look { stroke: #f5b83d; stroke-dasharray: 5 5; }
.graph line.is-path { stroke: #34d399; stroke-width: 5; }
.graph .node circle { fill: var(--panel2); stroke: var(--line2); stroke-width: 2; transition: fill .3s, stroke .3s; }
.graph .node .name { fill: var(--text); font: 700 15px/1 var(--sans); text-anchor: middle; }
.graph .node .dist { fill: var(--muted); font: 600 11.5px/1 var(--mono); text-anchor: middle; }
.graph .node.is-queued circle { stroke: var(--accent); stroke-dasharray: 4 3; }
.graph .node.is-current circle { fill: var(--accent); stroke: var(--accent); }
.graph .node.is-current .name { fill: var(--bg); }
.graph .node.is-done circle { fill: color-mix(in srgb, var(--accent) 22%, var(--panel2)); stroke: color-mix(in srgb, var(--accent) 60%, transparent); }
.queue, .probe-trail, .tape { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.queue span, .probe-trail span { margin-right: 4px; }
.queue b, .probe-trail b { display: grid; place-items: center; min-width: 28px; height: 26px; padding: 0 6px; border-radius: 7px; font: 700 13px/1 var(--mono); color: var(--text); background: var(--panel2); border: 1px solid var(--line2); animation: viz-in .3s ease both; }
.probe-trail i { font-style: normal; color: var(--muted); }
.dfa .edge path { fill: none; stroke: var(--line2); stroke-width: 2; transition: stroke .3s; }
.dfa .edge text { fill: var(--muted); font: 700 13px/1 var(--mono); text-anchor: middle; }
.dfa .edge.is-on path { stroke: var(--accent); stroke-width: 3; }
.dfa .edge.is-on text { fill: var(--accent); }
.dfa marker path, .refs-arrows marker path { fill: var(--muted); }
.dfa .state circle { fill: var(--panel2); stroke: var(--line2); stroke-width: 2; transition: fill .3s, stroke .3s; }
.dfa .state .inner { fill: none; }
.dfa .state text { fill: var(--text); font: 700 18px/1 var(--sans); text-anchor: middle; }
.dfa .state.is-on circle:first-child { fill: color-mix(in srgb, var(--accent) 25%, var(--panel2)); stroke: var(--accent); }
.dfa .state.is-accept circle:first-child { fill: color-mix(in srgb, #34d399 30%, var(--panel2)); stroke: #34d399; }
.dfa .state.is-reject circle:first-child { fill: color-mix(in srgb, #fb7185 25%, var(--panel2)); stroke: #fb7185; }
.tape b { display: grid; place-items: center; width: 30px; height: 34px; border-radius: 6px; font-size: 16px; font-weight: 700; color: var(--text); background: var(--panel2); border: 1px solid var(--line2); transition: all .25s; }
.tape b.is-read { opacity: .45; }
.tape b.is-head { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); transform: translateY(-3px); }
.tape em { font: 700 16px/1 var(--mono); color: var(--muted); font-style: normal; }
.verdict { margin-left: 10px; padding: 4px 12px; border-radius: 999px; font-weight: 700; font-size: 13px; }
.verdict.is-accept { color: #0b0d12; background: #34d399; }
.verdict.is-reject { color: #0b0d12; background: #fb7185; }

/* hash table slots */
.slots { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; width: min(460px, 100%); }
.slot { display: grid; place-items: center; gap: 4px; padding: 8px 0 10px; border-radius: 9px; background: var(--panel2); border: 1px solid var(--line2); transition: all .3s; }
.slot small { font: 600 11px/1 var(--mono); color: var(--muted); }
.slot b { height: 22px; font-size: 17px; font-weight: 700; color: var(--text); }
.slot.is-full { background: color-mix(in srgb, var(--accent) 16%, var(--panel2)); }
.slot.is-tomb b { color: #f5b83d; }
.slot.is-probe { border-color: #f5b83d; transform: translateY(-3px); }
.slot.is-hit { border-color: #34d399; box-shadow: 0 0 0 2px rgb(52 211 153 / 35%); }
.slot.is-miss { border-color: #fb7185; box-shadow: 0 0 0 2px rgb(251 113 133 / 35%); }

/* memory layout */
.mem { position: relative; width: min(480px, 100%); padding-top: 40px; }
.mem-cells { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line2); border-radius: 8px; overflow: hidden; }
.mem-cell { display: grid; place-items: center; gap: 4px; padding: 10px 0; border-left: 1px solid var(--line2); background: var(--panel2); transition: background .3s; }
.mem-cell:first-child { border-left: 0; }
.mem-cell:nth-child(4) { border-left: 2px solid var(--muted); }
.mem-cell b { font-size: 17px; color: var(--text); }
.mem-cell small { font: 600 10.5px/1 var(--mono); color: var(--muted); }
.mem-cell.is-all { background: color-mix(in srgb, var(--accent) 12%, var(--panel2)); }
.mem-cell.is-pointed { background: color-mix(in srgb, var(--accent) 30%, var(--panel2)); }
.mem-cell.is-hot { box-shadow: inset 0 0 0 2px #f5b83d; }
.mem-cell.is-warn { background: repeating-linear-gradient(135deg, rgb(251 113 133 / 22%) 0 6px, transparent 6px 12px), var(--panel2); }
.mem-rows { display: grid; grid-template-columns: 1fr 1fr; margin-top: 8px; font-size: 12px; color: var(--muted); text-align: center; opacity: 0; transition: opacity .3s; }
.mem-rows span { border-top: 2px solid var(--line2); padding-top: 6px; margin: 0 4px; }
.mem-rows.is-on { opacity: 1; }
.mem-ptr { position: absolute; top: 0; height: 34px; opacity: 0; transition: left .45s cubic-bezier(.3,.7,.2,1), width .45s, opacity .3s; }
.mem-ptr.is-on { opacity: 1; }
.mem-ptr span { position: absolute; left: 0; right: 0; bottom: 6px; margin: 0 auto; width: max-content; padding: 2px 9px; border-radius: 6px; font: 700 12px/1.5 var(--mono); color: var(--bg); background: var(--accent); }
.mem-ptr::after { content: ""; position: absolute; left: 50%; bottom: -1px; border: 5px solid transparent; border-top-color: var(--accent); transform: translateX(-50%); }
.mem-ptr.is-warn span { background: #fb7185; }
.mem-ptr.is-warn::after { border-top-color: #fb7185; }

/* references: code, stack and heap */
.viz-refs { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: start; place-items: stretch; }
.refs-code { margin: 0; padding: 10px 0; list-style: none; counter-reset: l; border-radius: 8px; background: var(--panel2); font-size: 13px; }
.refs-code li { counter-increment: l; padding: 3px 12px 3px 34px; position: relative; color: var(--muted); transition: background .25s; }
.refs-code li::before { content: counter(l); position: absolute; left: 10px; font: 11px/1.9 var(--mono); color: var(--line2); }
.refs-code li.is-line { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--text); }
.refs-code code { background: none; padding: 0; font-size: 12.5px; white-space: pre; }
.refs-mem { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; min-height: 180px; }
.refs-col { display: flex; flex-direction: column; gap: 10px; }
.refs-title { font-size: 12px; color: var(--muted); }
.refs-mem .frame, .refs-mem .obj { padding: 8px 10px; border-radius: 9px; background: var(--panel2); border: 1px solid var(--line2); animation: viz-fade .3s ease both; }
@keyframes viz-fade { from { opacity: 0; } }
.refs-mem .frame > span, .refs-mem .obj > span { display: block; margin-bottom: 6px; font-size: 11.5px; color: var(--muted); }
.refs-mem .var { display: flex; justify-content: space-between; align-items: center; padding: 4px 8px; border-radius: 6px; background: var(--bg); }
.refs-mem .var i { font-style: normal; font-size: 10px; color: var(--accent); }
.refs-mem .cells { display: flex; gap: 3px; }
.refs-mem .cells b { display: grid; place-items: center; width: 34px; height: 30px; border-radius: 6px; font: 700 14px/1 var(--mono); color: var(--text); background: var(--bg); transition: background .3s; }
.refs-mem .cells b.is-hot { background: #f5b83d; color: #111; }
.refs-mem .obj.is-gone { opacity: .35; border-style: dashed; }
.refs-arrows { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.refs-arrows path.arrow { fill: none; stroke: var(--accent); stroke-width: 2; }
.refs-arrows path.arrow.is-moved { stroke: #f5b83d; }

/* curves: the loss bowl and the line fit */
.curve, .fit, .spark { width: 100%; height: auto; }
.curve { max-width: 480px; }
.fit-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; width: min(480px, 100%); align-items: center; }
.curve .axis, .fit .axis, .spark .axis { stroke: var(--line2); stroke-width: 1.5; }
.curve .loss { fill: none; stroke: color-mix(in srgb, var(--accent) 70%, transparent); stroke-width: 2.5; }
.curve .min { stroke: #34d399; stroke-dasharray: 4 5; opacity: .6; }
.curve .tick, .fit .tick, .spark .tick { fill: var(--muted); font: 600 11px/1 var(--mono); text-anchor: middle; }
.spark .tick { text-anchor: start; }
.curve .jumps { fill: none; stroke: #f5b83d; stroke-width: 1.5; stroke-dasharray: 4 4; }
.curve .tangent { stroke: var(--text); stroke-width: 1.5; opacity: .5; }
.curve .ball { fill: #f5b83d; stroke: var(--bg); stroke-width: 2; transition: cx .45s cubic-bezier(.3,.7,.2,1), cy .45s cubic-bezier(.3,.7,.2,1); }
.curve .ball-label { fill: var(--text); font: 700 12px/1 var(--mono); text-anchor: middle; }
.fit .pt { fill: #f5b83d; }
.fit .fit-line { stroke: var(--accent); stroke-width: 3; stroke-linecap: round; transition: all .45s cubic-bezier(.3,.7,.2,1); }
.fit .residual { stroke: #fb7185; stroke-width: 1.5; stroke-dasharray: 3 3; transition: all .45s; }
.spark .spark-line { fill: none; stroke: var(--accent); stroke-width: 2; }
.spark .spark-val { fill: var(--text); font: 700 12px/1 var(--mono); text-anchor: end; }

@media (max-width: 760px) {
  .viz-stage { margin: 12px 12px 0; padding: 12px; }
  .viz figcaption, .viz-options { padding-left: 14px; padding-right: 14px; }
  .viz-progress, .viz-msg { margin-left: 14px !important; margin-right: 14px !important; }
  .viz-bar { padding: 10px 14px 14px; }
  .viz-refs { grid-template-columns: minmax(0, 1fr); }
  .refs-mem { gap: 24px; }
  .merge-label { width: 34px; font-size: 11px; }
  .chip { width: 26px; height: 26px; font-size: 13px; }
  .viz-input { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bar, .mem-ptr, .curve .ball, .fit .fit-line, .fit .residual { transition: none; }
  .merge-row, .queue b, .probe-trail b, .refs-mem .frame, .refs-mem .obj { animation: none; }
}
:root[data-theme=light] .viz-stage { background: #f7f8fa; }
:root[data-theme=light] .chip.is-hot, :root[data-theme=light] .bar.is-hot { color: #111; }

/* code: a calmer size and line height than body text, so programs read as programs */
:root { --code-font: 15px; }
:root[data-reading-size=large] { --code-font: 17px; }
.reader .highlighted { line-height: 1.65; padding: 22px 24px; }
.reader pre[tabindex]:focus-visible, .reader .trace-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.code-example.fits .code-hint { display: none; }
@media (max-width: 760px) {
  :root { --code-font: 13.5px; }
  :root[data-reading-size=large] { --code-font: 15.5px; }
  .reader .highlighted { padding: 16px; }
}

/* the end of a reading page: the courses before and after this one on the suggested route */
.route-next { display: block; margin: 64px 0 0; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.route-next header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 16px; margin-bottom: 16px; }
.route-next h2 { margin: 0; font-size: 20px; }
.route-next header span { font-size: 14px; color: var(--muted); }
.route-next .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.route-next .cards a { display: block; padding: 14px 16px; border: 1px solid var(--line2); border-left: 3px solid var(--c); border-radius: 12px; color: var(--text); text-decoration: none; }
.route-next .cards a:hover { border-color: var(--c); }
.route-next small { display: block; font-size: 13px; color: var(--muted); }
.route-next b { display: block; margin-top: 4px; font-size: 16px; line-height: 1.5; }
.route-next .code-chip { margin-right: 6px; }
.route-next .lang-note { font-weight: 400; font-size: 14px; color: var(--muted); }
.route-next .all { display: inline-block; margin-top: 14px; font-size: 15px; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
@media print { .route-next { display: none; } }

/* chapters whose end the reader has reached */
.reader .toc ol a.is-read::after { content: " ✓" / ""; color: var(--accent); }
.reader .sr-note { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Running examples in the browser */
.code-actions button.run-button { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 650; }
.code-actions button.run-button:disabled { opacity: .6; cursor: progress; }
.run-machine { margin: 8px 0; font-size: 14px; line-height: 1.6; color: var(--muted); border-left: 2px solid var(--line); padding-left: 12px; }
.run-editor { display: block; width: 100%; margin: 0; padding: 18px; border: 1px solid var(--accent); border-radius: 10px; background: var(--panel); color: var(--text); font: var(--code-font, 15px) / 1.65 var(--mono); white-space: pre; overflow: auto; tab-size: 4; resize: vertical; }
.run-panel { margin: 10px 0 18px; padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: 8px; background: var(--panel); }
.run-panel[data-state=good] { border-left-color: var(--accent); }
.run-panel[data-state=bad] { border-left-color: #ef6a5e; }
.run-panel[data-state=busy] { border-left-color: var(--muted); }
.run-panel pre.code { margin: 8px 0 0; }
.run-status { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text); }
.run-caution { margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: var(--muted); }

/* Try first: answers fold until the reader asks for them */
details.try-first { margin: 10px 0 18px; border: 1px solid var(--line); border-radius: 8px; }
details.try-first > summary { cursor: pointer; padding: 10px 14px; font-size: 14.5px; line-height: 1.5; color: var(--text); list-style-position: inside; }
details.try-first > summary:hover { color: var(--accent); }
details.try-first[open] > summary { border-bottom: 1px solid var(--line); color: var(--muted); }
.try-body { padding: 4px 14px 8px; }
.answers-toggle { font: inherit; font-size: 13px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--text); cursor: pointer; }
.chapter-study { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 22px 0 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.chapter-study a { font-size: 14.5px; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.chapter-study button { margin-left: auto; font: inherit; font-size: 13px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 7px; background: transparent; color: var(--text); cursor: pointer; }
.chapter-study button:disabled { color: var(--muted); cursor: default; }
.resume-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 9px 12px; border: 1px solid var(--accent); border-radius: 8px; background: var(--panel); font-size: 14px; }
.resume-bar a { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.resume-bar button { margin-left: auto; background: none; border: 0; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; }
.phone-bar, .phone-sheet { display: none; }
@media (max-width: 760px) {
  .phone-bar { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; height: 48px; padding-bottom: env(safe-area-inset-bottom); background: var(--bg); border-top: 1px solid var(--line); }
  .phone-bar a { display: grid; place-items: center; font-size: 26px; color: var(--text); text-decoration: none; }
  .pb-mid { font: inherit; font-size: 14px; background: none; border: 0; border-inline: 1px solid var(--line); color: var(--text); }
  .phone-sheet { display: block; position: fixed; z-index: 59; left: 0; right: 0; bottom: 48px; max-height: 68vh; overflow-y: auto; padding: 10px 16px 14px; background: var(--panel); border-top: 1px solid var(--line); }
  .phone-sheet[hidden] { display: none; }
  .phone-sheet ol { margin: 8px 0 0; padding-left: 26px; }
  .phone-sheet li { padding: 7px 0; font-size: 15px; line-height: 1.45; }
  .phone-sheet a.is-current { color: var(--accent); font-weight: 600; }
  .pb-whole { font: inherit; font-size: 13px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 7px; background: transparent; color: var(--text); }
  .pb-map { margin-left: 12px; font-size: 13px; color: var(--accent); }
  .phone-sheet .answers-toggle { display: block; margin-top: 8px; }
  body.chapter-mode { padding-bottom: 56px; }
  body.chapter-mode article.topic:not(.is-open) { display: none; }
  body.chapter-mode:not(.chapter-overview) main > *:not(.course-layout), body.chapter-mode:not(.chapter-overview) .course-layout > *:not(.course-body), body.chapter-mode:not(.chapter-overview) .course-body > *:not(article.topic) { display: none; }
  body.chapter-mode .chapter-dots { display: none; }
  .trace-wrap { -webkit-overflow-scrolling: touch; }
}
@media print { details.try-first { border: 0; } details.try-first > summary, .answers-toggle, .chapter-study, .resume-bar { display: none; } }

/* First-steps and writing-by-hand guides */
.bridge-body { max-width: 860px; margin-inline: auto; }
.bridge-toc { margin: 20px 0 28px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.bridge-toc h2, .bridge-setup h2, .bridge-next h2 { margin: 0 0 8px; font-size: 20px; }
.bridge-toc ol { margin: 0; padding-left: 22px; }
.bridge-toc li { padding: 3px 0; }
.bridge-toc a:hover { color: var(--accent); }
.bridge-goal { padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--panel); border-radius: 0 8px 8px 0; color: var(--text) !important; }
.bridge-setup { margin: 24px 0 8px; }
.setup-system { margin: 10px 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.setup-system summary { cursor: pointer; font-weight: 600; }
.setup-errors { padding-left: 20px; }
.setup-errors code { color: var(--accent); overflow-wrap: anywhere; }
.muted-note { color: var(--muted); font-size: 14px; }
.mistake { margin: 14px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.mistake h5 { margin: 0 0 4px; font-size: 13px; color: var(--muted); }
.mistake pre.code { margin: 0 0 10px; }
.mistake p { font-size: 15px; }

/* Tap a word to see its meaning */
button.term { display: inline; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline dotted color-mix(in srgb, var(--accent) 70%, transparent); text-underline-offset: 3px; cursor: help; }
button.term:hover, button.term[aria-expanded=true] { color: var(--accent); }
.term-pop { position: absolute; z-index: 70; max-width: min(360px, calc(100vw - 16px)); padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel2, var(--panel)); color: var(--text); font-size: 14px; line-height: 1.6; box-shadow: 0 6px 18px rgb(0 0 0 / 28%); }
.term-pop b { color: var(--accent); }