/* site.css — "study desk" design system.
   Cool drafting-paper page, ink-blue text, one memorable device: the highlighter stroke
   that marks the running line of code and the thing being examined in every picture.
   Pen colours carry meaning everywhere: blue = running/active, green = finished/returned,
   highlighter = being examined, red pencil = swap/violation. */

:root {
  --paper: #f2f4f3;
  --sheet: #fbfcfb;
  --ink: #1c2733;
  --graphite: #566370;
  --faint: #8a96a1;
  --rule: #d3dbd8;
  --rule-strong: #b7c3bf;
  --grid: rgba(43, 87, 154, 0.065);

  --pen: #2b579a;
  --pen-soft: #dfe8f6;
  --pen-mid: #9db6dc;
  --hl: #ffe36e;
  --hl-soft: #fff4be;
  --hl-deep: #b88a00;
  --check: #2f7a57;
  --check-soft: #dcefe4;
  --red: #b3402f;
  --red-soft: #f7e1dc;
  --path: #e5eefa;

  --font-prose: Charter, "Bitstream Charter", "Iowan Old Style", "Sitka Text", Georgia, serif;
  --font-ui: "Avenir Next", Avenir, "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-code: "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --sidebar-w: 252px;
  --measure: 68ch;
  --radius-s: 4px;
  --radius-m: 8px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 18px/1.62 var(--font-prose);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}
a { color: var(--pen); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--pen); outline-offset: 2px; border-radius: 2px; }
.muted { color: var(--graphite); }
[hidden] { display: none !important; }

/* ---------- layout ---------- */
.topbar { display: none; }
.has-sidebar main { margin-left: var(--sidebar-w); }
main { min-width: 0; }
.content {
  max-width: 1080px;
  margin: 0 auto;
  padding: 48px 48px 80px;
}
.content > p, .content > ul, .content > ol, .content > blockquote, .content > h1, .content > h2, .content > h3,
.content > .lede, .content > .def, .content > .callout, .content > details, .content > .mathblock {
  max-width: var(--measure);
}

/* ---------- sidebar ---------- */
.sidebar {
  position: fixed; inset: 0 auto 0 0;
  width: var(--sidebar-w);
  overflow-y: auto;
  background: #e8ecea;
  border-right: 1px solid var(--rule);
  padding: 22px 0 40px;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.35;
  z-index: 20;
}
.brand { display: block; padding: 0 20px 18px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); margin-bottom: 10px; }
.brand-title { display: block; font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.brand-sub { display: block; color: var(--graphite); font-size: 12.5px; margin-top: 2px; }
.toc-group { padding: 10px 0 6px; }
.toc-chapter { padding: 4px 20px 6px; font-weight: 600; color: var(--ink); font-size: 13.5px; }
.toc-chapter-code { color: var(--pen); font-weight: 700; margin-right: 2px; }
.toc-list { list-style: none; margin: 0; padding: 0; }
.toc-item { position: relative; }
.toc-item > a, .toc-pending { display: grid; grid-template-columns: 2.6em 1fr; gap: 4px; padding: 5px 26px 5px 20px; color: var(--ink); text-decoration: none; }
.toc-item > a:hover { background: rgba(43, 87, 154, 0.07); }
.toc-num { color: var(--graphite); font-variant-numeric: tabular-nums; }
.toc-item.is-current > a { background: var(--sheet); box-shadow: inset 3px 0 0 var(--pen); font-weight: 600; }
.toc-item.is-current .toc-num { color: var(--pen); }
.toc-pending { color: var(--faint); cursor: default; }
.toc-pending .toc-num { color: var(--faint); }
.toc-check { position: absolute; right: 10px; top: 5px; color: var(--check); font-weight: 700; }
.toc-sub { list-style: none; margin: 0 0 6px; padding: 2px 10px 4px calc(20px + 2.6em + 4px); font-size: 13px; }
.toc-sub a { display: block; padding: 3px 0; color: var(--graphite); text-decoration: none; }
.toc-sub a:hover { color: var(--pen); }

/* ---------- typography ---------- */
h1, h2, h3, h4 { font-family: var(--font-ui); color: var(--ink); line-height: 1.2; letter-spacing: -0.012em; }
h1 { font-size: 2.15rem; font-weight: 600; margin: 0 0 0.5em; }
h1 .secnum { color: var(--pen); font-weight: 700; margin-right: 0.35em; }
h2 { font-size: 1.45rem; font-weight: 600; margin: 2.4em 0 0.6em; padding-top: 0.9em; border-top: 1px solid var(--rule); }
h3 { font-size: 1.12rem; font-weight: 600; margin: 1.8em 0 0.5em; }
p { margin: 0 0 1em; }
.lede { font-size: 1.08em; color: #2a3846; }
strong { font-weight: 700; }
em.term, .term { font-style: italic; font-weight: 700; }
ul, ol { padding-left: 1.4em; }
li { margin: 0.25em 0; }
code, .mono {
  font-family: var(--font-code);
  font-size: 0.82em;
  background: rgba(43, 87, 154, 0.07);
  padding: 0.06em 0.18em;
  border-radius: 3px;
  white-space: nowrap;
}
.katex { font-size: 1.06em; }
/* DSA.renderMath glues an inline formula to adjacent punctuation; the formula itself may still break between its parts */
.math-glue { white-space: nowrap; }
.math-glue .katex { white-space: normal; }
.math-glue .math-glue-edge { white-space: nowrap; }
/* table.data.keep-math: formulas in narrow cells never break mid-expression (the table scrolls inside .table-wrap instead) */
table.data.keep-math .katex { white-space: nowrap; }
.mathblock { margin: 1em 0 1.3em; overflow-x: auto; overflow-y: hidden; padding: 2px 0; }
.mathblock .katex-display { margin: 0.4em 0; }

/* intuition / definition / exam-tip blocks */
.def, .callout {
  border-left: 3px solid var(--pen);
  background: var(--sheet);
  padding: 14px 18px;
  margin: 1.2em 0 1.4em;
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
}
.def > :last-child, .callout > :last-child { margin-bottom: 0; }
.def-title, .callout-title { font-family: var(--font-ui); font-weight: 600; font-size: 15px; margin: 0 0 4px; color: var(--pen); }
.callout.is-tip { border-left-color: var(--hl-deep); }
.callout.is-tip .callout-title { color: #7a5c00; }
.callout.is-warn { border-left-color: var(--red); }
.callout.is-warn .callout-title { color: var(--red); }

/* static code */
pre.java, pre.code {
  font: 13.5px/1.55 var(--font-code);
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--radius-m);
  padding: 12px 16px;
  overflow-x: auto;
  max-width: 100%;
}

/* figures */
.figure { margin: 1.6em 0 2em; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius-m); padding: 16px 18px 14px; }
.figure-title { font-family: var(--font-ui); font-size: 15px; font-weight: 600; margin: 0 0 12px; }
.figure-title .fignum { color: var(--pen); }
.figure-note { font-family: var(--font-ui); font-size: 14px; color: var(--graphite); margin: 10px 0 0; line-height: 1.45; }
.figure-row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: start; }
.figure-cell h4 { font-size: 14px; margin: 0 0 6px; }
.figure-cell p { font-family: var(--font-ui); font-size: 14px; color: var(--graphite); line-height: 1.45; margin: 6px 0 0; }
.graph-paper {
  background-color: #fdfefd;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 16px 16px;
}

/* takeaways */
.takeaways { max-width: var(--measure); background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius-m); padding: 6px 22px 10px; }
.takeaways ol { padding-left: 1.2em; }
.takeaways li { margin: 0.55em 0; }

/* ---------- buttons & form ---------- */
.btn {
  font: 600 14px/1 var(--font-ui);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-s);
  padding: 8px 12px;
  cursor: pointer;
  min-height: 34px;
  white-space: nowrap;
}
.btn:hover:not(:disabled) { border-color: var(--pen); color: var(--pen); }
.btn:disabled { opacity: 0.42; cursor: default; }
.btn-primary { background: var(--pen); border-color: var(--pen); color: #fff; }
.btn-primary:hover:not(:disabled) { background: #224a85; color: #fff; }
.btn-quiet { background: transparent; border-color: transparent; color: var(--graphite); }
.btn-quiet:hover:not(:disabled) { border-color: var(--rule-strong); }
.btn-icon { padding: 8px 10px; }
.btn-play.is-playing { background: var(--hl-soft); border-color: var(--hl-deep); }
.linklike { font: inherit; color: var(--pen); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
input[type=text], select {
  font: 15px/1.2 var(--font-code);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-s);
  padding: 7px 9px;
  min-height: 34px;
}
select { font-family: var(--font-ui); font-size: 14px; }
input[type=text]:focus, select:focus { outline: 2px solid var(--pen-mid); outline-offset: 0; border-color: var(--pen); }

/* ---------- CodeLab ---------- */
.codelab {
  container-type: inline-size;
  container-name: lab;
  margin: 1.6em 0 2.4em;
  background: var(--sheet);
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.45;
}
.lab-head { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; justify-content: space-between; padding: 14px 18px 10px; border-bottom: 1px solid var(--rule); }
.lab-title { margin: 0; font-size: 16.5px; font-weight: 600; }
.lab-head-tools { display: flex; gap: 14px; align-items: center; color: var(--graphite); font-size: 13.5px; }
.lab-toggle { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; color: var(--ink); }
.lab-toggle input { accent-color: var(--pen); width: 16px; height: 16px; margin: 0; }
.lab-intro { padding: 10px 18px 0; color: var(--graphite); font-size: 14.5px; }
.lab-intro p { margin: 0 0 6px; }
.lab-inputs, .lab-actions { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-start; padding: 12px 18px; border-bottom: 1px solid var(--rule); background: #f6f8f7; }
.lab-actions { align-items: center; }
.lab-field { display: flex; flex-direction: column; gap: 4px; }
.lab-field label { font-size: 13px; font-weight: 600; color: var(--graphite); }
.lab-field input { width: 7.5em; }
.lab-field.is-wide { flex: 1 1 16em; }
.lab-field.is-wide input { width: 100%; }
.lab-help { font-size: 12.5px; color: var(--graphite); }
.lab-run { display: flex; gap: 6px; margin-top: 23px; }
.lab-message { margin: 10px 18px 0; padding: 9px 12px; border-radius: var(--radius-s); font-size: 14px; }
.lab-message.is-error { background: var(--red-soft); color: #7d2416; border: 1px solid #e3b4aa; }
.lab-message.is-warn { background: var(--hl-soft); color: #5e4700; border: 1px solid #ead27a; }

.lab-grid {
  display: grid;
  gap: 14px;
  padding: 14px 18px 18px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "code" "control" "visual" "stack";
}
.lab-code { grid-area: code; min-width: 0; }
.lab-control { grid-area: control; min-width: 0; }
.lab-stack { grid-area: stack; min-width: 0; align-self: start; }
.lab-visual { grid-area: visual; min-width: 0; display: flex; flex-direction: column; gap: 14px; }

@container lab (min-width: 820px) {
  .lab-grid { grid-template-columns: minmax(0, 1fr) 240px; grid-template-areas: "code code" "control control" "visual stack"; }
  .lab-grid.no-stack { grid-template-columns: minmax(0, 1fr); grid-template-areas: "code" "control" "visual"; }
  .lab-grid.no-visual { grid-template-columns: minmax(0, 1fr); grid-template-areas: "code" "control" "stack"; }
}
.lab-grid.no-stack.no-visual { grid-template-columns: minmax(0, 1fr); grid-template-areas: "code" "control"; }
@container lab (min-width: 1180px) {
  .lab-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-areas: "code visual" "control visual" "stack visual"; align-items: start; }
  .lab-grid.no-stack { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-areas: "code visual" "control visual"; }
  .lab-grid.no-visual { grid-template-columns: minmax(0, 1fr) 260px; grid-template-areas: "code stack" "control stack"; }
}
@container lab (max-width: 1179px) {
  .lab-control { position: sticky; bottom: 0; z-index: 3; background: var(--sheet); box-shadow: 0 -8px 12px -10px rgba(28, 39, 51, 0.35); padding-top: 4px; }
}
@container lab (max-width: 819px) {
  .codelab .code-lines:not(.is-pseudo) { font-size: 12px; }
}

/* code listing */
.code-scroll { max-height: 420px; overflow: auto; border: 1px solid var(--rule); border-radius: var(--radius-m); background: #fff; }
.code-lines { list-style: none; margin: 0; padding: 8px 0; font: 13px/1.6 var(--font-code); counter-reset: none; min-width: max-content; }
.code-line { display: grid; grid-template-columns: 3.2em auto; margin: 0; padding: 0 14px 0 0; cursor: pointer; position: relative; }
.code-line.is-blank { cursor: default; }
.code-line .ln { color: var(--faint); text-align: right; padding-right: 1em; user-select: none; background: #f1f4f3; border-right: 1px solid var(--rule); margin-right: 0.9em; }
.code-text { white-space: pre; }
.code-line:not(.is-blank):hover .code-text { background: rgba(43, 87, 154, 0.06); }
.code-line.is-pinned .code-text { background: rgba(43, 87, 154, 0.1); }
.code-line.is-current .code-text {
  background: linear-gradient(176deg, transparent 6%, var(--hl) 6%, var(--hl) 94%, transparent 94%);
  border-radius: 2px;
  box-shadow: -6px 0 0 var(--hl), 6px 0 0 var(--hl);
}
.code-line.is-current .ln { color: var(--ink); font-weight: 700; background: var(--hl-soft); }
.code-note { display: none; grid-column: 2; font: 13.5px/1.45 var(--font-ui); color: var(--graphite); white-space: normal; padding: 1px 0 7px; max-width: 64ch; }
.codelab.show-notes .code-note { display: block; }
.codelab.show-notes .code-lines { min-width: 0; }
.codelab.show-notes .code-text { white-space: pre-wrap; }
.code-lines.is-pseudo { font-family: var(--font-prose); font-size: 15px; line-height: 1.65; }
.code-lines.is-pseudo .ln { font-family: var(--font-code); font-size: 12px; line-height: 2.05; }
/* pseudocode wraps inside the box: lab.js turns leading spaces into --indent; continuation rows hang 1.5em deeper */
.code-lines.is-pseudo { min-width: 0; }
.code-lines.is-pseudo .code-line { grid-template-columns: 3.2em minmax(0, 1fr); }
.code-lines.is-pseudo .code-text { white-space: pre-wrap; padding-left: calc(var(--indent, 0em) + 1.5em); text-indent: -1.5em; }
.code-lines .tok-kw { color: #7a2d8c; font-weight: 600; }
.code-lines .tok-type, pre .tok-type { color: #0b6e75; }
.code-lines .tok-num, pre .tok-num { color: #2f7a57; }
.code-lines .tok-str, pre .tok-str { color: #a3461d; }
.code-lines .tok-com, pre .tok-com { color: #6d7b87; font-style: italic; }
.code-lines .tok-fn, pre .tok-fn { color: #1f4f9a; }
.code-lines .tok-ann, pre .tok-ann { color: #8a5a00; }
pre .tok-kw { color: #7a2d8c; font-weight: 600; }
.pc-kw { font-weight: 700; }
.pc-com { color: var(--pen); }
.line-note { min-height: 2.9em; margin-top: 8px; padding: 8px 12px; font-size: 14px; background: #f6f8f7; border-radius: var(--radius-s); border: 1px dashed var(--rule-strong); }
.line-note-num { font-weight: 700; color: var(--pen); margin-right: 4px; }
.line-note-hint { color: var(--faint); }

/* narration & player */
.lab-narration {
  min-height: 3.4em;
  padding: 10px 14px;
  border-left: 3px solid var(--hl-deep);
  background: var(--hl-soft);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  font-family: var(--font-prose);
  font-size: 16px;
  line-height: 1.5;
}
.lab-narration code { font-size: 0.85em; background: rgba(255, 255, 255, 0.6); }
.lab-player { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.lab-speed { min-height: 34px; }
.lab-scrubwrap { flex: 1 1 200px; display: flex; gap: 10px; align-items: center; min-width: 180px; }
.lab-scrub { flex: 1; accent-color: var(--pen); }
.lab-counter { font-size: 13px; color: var(--graphite); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 8.5em; text-align: right; }
.lab-output { margin-top: 10px; border: 1px solid var(--rule); border-radius: var(--radius-s); background: #fff; padding: 8px 12px; }
.out-list { margin: 4px 0 0; padding: 0; list-style-position: inside; font-family: var(--font-code); font-size: 13px; display: grid; grid-template-columns: repeat(auto-fill, minmax(11em, 1fr)); gap: 1px 16px; }
.out-list li { margin: 0; }

/* panels */
.lab-panel { border: 1px solid var(--rule); border-radius: var(--radius-m); background: #fff; padding: 10px 12px 12px; min-width: 0; }
.lab-visual .lab-panel { background-color: #fdfefd; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 16px 16px; }
.panel-title { font-weight: 600; font-size: 13.5px; color: var(--ink); margin-bottom: 8px; display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
.panel-sub { font-weight: 500; color: var(--graphite); font-size: 12.5px; }

/* ---------- visualizers ---------- */
.viz { font-family: var(--font-ui); }
.viz-empty { color: var(--faint); font-size: 14px; padding: 10px 2px; }
.viz-caption { font-size: 13.5px; color: var(--graphite); margin-top: 8px; line-height: 1.45; }
.viz-panel-title { font-weight: 600; font-size: 13.5px; margin: 8px 0 4px; }
.viz-multi .viz-panel + .viz-panel-title { margin-top: 14px; }

/* array */
.arr { margin: 2px 0 10px; overflow-x: auto; padding-bottom: 2px; }
.arr:last-of-type { margin-bottom: 2px; }
.arr-title { font-size: 13px; font-weight: 600; color: var(--graphite); margin-bottom: 2px; font-family: var(--font-code); }
.arr-strip { display: flex; flex-wrap: wrap; row-gap: 6px; }   /* rows that still do not fit after .arr-tight wrap */
.arr-cell { --cell: 2.6rem; width: var(--cell); flex: none; text-align: center; position: relative; }
.arr-dense .arr-cell { --cell: 2.15rem; }
.arr-wide .arr-box { font-size: 13px; white-space: nowrap; }   /* long labels: cell width set inline by ArrayViz */
/* ArrayViz adds .arr-tight when a row is wider than its box (wide rows also get a narrower inline width) */
.arr-tight .arr-cell { --cell: 1.85rem; }
.arr-tight .arr-box { font-size: 13.5px; }
.arr-wide.arr-tight .arr-box { font-size: 11.5px; }
.arr-tight .arr-ptr { font-size: 11px; }
.arr-idx { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; height: 17px; }
.arr-box {
  height: var(--cell);
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--ink);
  margin-left: -1.5px;
  background: #fff;
  font: 600 16px var(--font-ui);
  font-variant-numeric: tabular-nums;
  transition: background-color 0.18s;
}
.arr-cell:first-child .arr-box { margin-left: 0; }
.arr-ptr { font: 600 12px/1.25 var(--font-code); color: var(--pen); min-height: 16px; padding-top: 3px; white-space: nowrap; }
.arr-note { font-size: 11.5px; color: var(--graphite); }
.arr-cell.in-range .arr-box { background: #c9d6f4; }
.arr-cell.in-range.hl-visit .arr-box { background: #c9d6f4; }
.arr-cell.in-range.hl-done .arr-box { background: var(--check-soft); }
.arr-cell.in-range.hl-muted .arr-box { background: #e9eceb; }
.arr-cell.in-range.hl-path .arr-box { background: var(--path); }
.arr-cell.hl-active .arr-box { background: var(--pen); color: #fff; }
.arr-cell.hl-visit .arr-box { background: var(--hl); }
.arr-cell.hl-done .arr-box { background: var(--check-soft); border-color: var(--check); color: #164d33; }
.arr-cell.hl-swap .arr-box { background: var(--red-soft); border-color: var(--red); color: var(--red); }
.arr-cell.hl-warn .arr-box { background: var(--red); color: #fff; }
.arr-cell.hl-muted .arr-box { color: var(--faint); background: #eef1f0; }
.arr-cell.hl-new .arr-box { box-shadow: inset 0 0 0 2px var(--check); }
.arr-cell.hl-path .arr-box { background: var(--path); }
.arr-cell.is-hover .arr-box { outline: 3px solid var(--hl-deep); outline-offset: -3px; }
.arr-cell.has-boundary::before { content: ""; position: absolute; left: -3px; top: 14px; bottom: 10px; width: 3px; background: var(--red); z-index: 1; }
.arr-empty { font-size: 14px; color: var(--faint); border: 1.5px dashed var(--rule-strong); padding: 10px 14px; border-radius: var(--radius-s); }
.arr-outside { font: 12.5px var(--font-code); color: var(--pen); margin-top: 2px; }
.arr-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--graphite); margin-top: 4px; }
.legend-item { display: inline-flex; gap: 6px; align-items: center; }
.legend-swatch { width: 14px; height: 14px; border: 1px solid var(--ink); background: #c9d6f4; display: inline-block; }
.legend-item.hl-done .legend-swatch { background: var(--check-soft); }
.legend-item.hl-muted .legend-swatch { background: #e9eceb; }

/* tree (SVG) */
.tree-scroll { overflow: auto; max-height: 520px; }
.tree-svg { display: block; height: auto; width: 100%; margin: 0 auto; }
.tedge { stroke: #43515e; stroke-width: 1.5; }
.tedge.hl-path, .tedge.hl-active { stroke: var(--pen); stroke-width: 3; }
.tedge.hl-visit { stroke: var(--hl-deep); stroke-width: 3; }
.tedge.hl-done { stroke: var(--check); stroke-width: 2.5; }
.tedge.hl-warn, .tedge.hl-swap { stroke: var(--red); stroke-width: 3; }
.tedge.hl-muted { stroke: #c4ccd2; }
.tedge-null { stroke: #b9c2c9; stroke-dasharray: 3 3; }
.tnull { fill: #fff; stroke: #9aa5ae; stroke-width: 1.2; }
.tshape { fill: #fff; stroke: var(--ink); stroke-width: 1.6; transition: fill 0.18s; }
.tlabel { font: 600 13px var(--font-ui); fill: var(--ink); }
.tlabel.is-mono { font: 500 12px var(--font-code); }
.tnote, .tbadge { font: 600 11px var(--font-ui); }
.tnote { fill: var(--check); }
.tnote-bg { fill: #fdfefd; opacity: 0.92; }
.tbadge { fill: var(--faint); paint-order: stroke; stroke: #fdfefd; stroke-width: 4px; stroke-linejoin: round; }
.tnode.hl-active .tshape { fill: var(--pen); stroke: var(--pen); }
.tnode.hl-active .tlabel { fill: #fff; }
.tnode.hl-waiting .tshape { fill: var(--pen-soft); stroke: var(--pen); stroke-dasharray: 4 3; }
.tnode.hl-visit .tshape { fill: var(--hl); stroke: var(--hl-deep); }
.tnode.hl-done .tshape { fill: var(--check-soft); stroke: var(--check); }
.tnode.hl-path .tshape { fill: var(--path); stroke: var(--pen); }
.tnode.hl-muted .tshape { fill: #f0f2f1; stroke: #b8c1c7; }
.tnode.hl-muted .tlabel { fill: var(--faint); }
.tnode.hl-new .tshape { stroke: var(--check); stroke-width: 3; }
.tnode.hl-swap .tshape { fill: var(--red-soft); stroke: var(--red); stroke-width: 2.5; }
.tnode.hl-warn .tshape { fill: var(--red); stroke: var(--red); }
.tnode.hl-warn .tlabel { fill: #fff; }
.tnode.is-clickable { cursor: pointer; }
.tnode.is-clickable:hover .tshape, .tnode.is-hover .tshape { stroke: var(--hl-deep); stroke-width: 3; }
.tnode:focus-visible { outline: none; }
.tnode:focus-visible .tshape { stroke: var(--pen); stroke-width: 3.5; }
.viz-calltree .tree-scroll { max-height: 470px; }

/* stack */
.stack-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.stack-frame { border: 1px solid var(--rule-strong); border-radius: var(--radius-s); padding: 5px 9px; background: #f7f9f8; font-size: 13px; }
.stack-frame.is-top { border-color: var(--pen); background: var(--pen-soft); box-shadow: inset 3px 0 0 var(--pen); }
.frame-label { font: 500 12.5px/1.35 var(--font-code); word-break: break-word; }
.stack-frame.is-top .frame-label { font-weight: 700; color: var(--pen); }
.frame-vars { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 1px 10px; margin: 4px 0 1px; font: 12.5px/1.4 var(--font-code); }
.frame-vars dt { color: var(--graphite); }
.frame-vars dd { margin: 0; word-break: break-word; font-weight: 600; }
.stack-frame:not(.is-top) .frame-vars { opacity: 0.75; }
.stack-foot { font-size: 12px; color: var(--graphite); margin-top: 6px; }

/* lists (sequences / sets) */
.lists-row { display: grid; grid-template-columns: minmax(6em, max-content) 1fr; gap: 4px 12px; align-items: center; margin: 6px 0; }
.lists-label { font-size: 14px; font-weight: 600; color: var(--graphite); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 36px; }
.chip { min-width: 2.1em; height: 2.1em; padding: 0 0.5em; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--ink); border-radius: 6px; background: #fff; font: 600 15px var(--font-ui); }
.chips-set .chip { border-radius: 999px; }
.chip.hl-active { background: var(--pen); color: #fff; border-color: var(--pen); }
.chip.hl-visit { background: var(--hl); border-color: var(--hl-deep); }
.chip.hl-done { background: var(--check-soft); border-color: var(--check); }
.chip.hl-new { box-shadow: 0 0 0 3px var(--check-soft); border-color: var(--check); }
.chip.hl-swap { background: var(--red-soft); border-color: var(--red); }
.chip.hl-muted { color: var(--faint); border-color: var(--rule-strong); }
.chips-brace { font: 300 26px/1 var(--font-prose); color: var(--graphite); }
.chips-empty { color: var(--faint); font-size: 14px; font-style: italic; }
.lists-note { grid-column: 2; font-size: 13px; color: var(--graphite); }

/* positional list (doubly linked, header/trailer sentinels; added in Task 6) */
.pl-scroll { overflow-x: auto; padding-bottom: 2px; }
.pl-strip { display: flex; flex-wrap: wrap; align-items: flex-start; row-gap: 6px; }
.pl-cell { display: flex; flex-direction: column; align-items: center; }
.pl-ptr { font: 600 12px/1.25 var(--font-code); color: var(--pen); min-height: 17px; white-space: nowrap; padding: 0 2px; }
.pl-box { min-width: 3.4em; height: 2.2em; padding: 0 0.5em; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--ink); border-radius: 6px; background: #fff; font: 600 14.5px var(--font-ui); font-variant-numeric: tabular-nums; white-space: nowrap; transition: background-color 0.18s; }
.pl-note { font-size: 11.5px; color: var(--graphite); min-height: 15px; white-space: nowrap; }
.pl-arrow { height: 2.2em; display: flex; align-items: center; padding: 0 3px; color: var(--graphite); font-size: 15px; }
.pl-sentinel .pl-box { border-style: dashed; border-color: var(--rule-strong); color: var(--faint); background: #f4f6f5; font-weight: 500; font-size: 12.5px; min-width: 0; }
.pl-cell.hl-active .pl-box { background: var(--pen); color: #fff; border-color: var(--pen); }
.pl-cell.hl-visit .pl-box { background: var(--hl); border-color: var(--hl-deep); }
.pl-cell.hl-done .pl-box { background: var(--check-soft); border-color: var(--check); color: #164d33; }
.pl-cell.hl-new .pl-box { box-shadow: 0 0 0 3px var(--check-soft); border-color: var(--check); }
.pl-cell.hl-swap .pl-box, .pl-removed .pl-box { background: var(--red-soft); border-color: var(--red); color: var(--red); }
.pl-cell.hl-path .pl-box { background: var(--path); border-color: var(--pen); }
.pl-cell.hl-muted .pl-box { color: var(--faint); border-color: var(--rule-strong); }
.pl-removed { margin-left: 18px; }
.pl-removed .pl-ptr { color: var(--red); }

/* bars */
.bar-row { display: grid; grid-template-columns: minmax(8em, 13em) 1fr 5.5em; gap: 10px; align-items: center; margin: 7px 0; font-size: 14px; }
.bar-label { line-height: 1.3; }
.bar-track { height: 18px; background: #eef1f0; border-radius: 3px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--pen); border-radius: 3px; transition: width 0.25s; }
.bar-fill.hl-done { background: var(--check); }
.bar-fill.hl-warn { background: var(--red); }
.bar-fill.hl-visit { background: var(--hl-deep); }
.bar-value { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.compare-control { display: flex; align-items: center; gap: 12px; font-family: var(--font-ui); font-size: 15px; margin-bottom: 6px; }
.compare-control input[type=range] { flex: 1; max-width: 420px; accent-color: var(--pen); }

/* data tables (value tables, recursion tables): wrap in .table-wrap so wide tables scroll */
.table-wrap { overflow-x: auto; margin: 0.8em 0 1.2em; max-width: 100%; }
table.data { border-collapse: collapse; font-family: var(--font-ui); font-size: 14.5px; background: #fff; }
table.data caption { caption-side: bottom; text-align: left; font-size: 13.5px; color: var(--graphite); padding-top: 6px; }
table.data th, table.data td { border: 1px solid var(--rule-strong); padding: 6px 12px; text-align: center; vertical-align: middle; }
table.data th { background: #eef2f1; font-weight: 600; }
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data td.left, table.data th.left { text-align: left; }
table.data tr.hl-active td { background: var(--pen-soft); }
table.data tr.hl-visit td { background: var(--hl-soft); }
table.data tr.hl-done td { background: var(--check-soft); }
table.data tr.hl-warn td { background: var(--red-soft); }
table.data tr.hl-muted td { color: var(--faint); }
table.data tfoot td { font-weight: 600; background: #f6f8f7; }

/* interactive tools on a page (calculators, builders): labelled fields in a row, then results */
.tool-controls { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; font-family: var(--font-ui); margin: 0 0 12px; }
.tool-field { display: flex; flex-direction: column; gap: 4px; }
.tool-field label, .tool-field .tool-label { font-size: 13px; font-weight: 600; color: var(--graphite); }
.tool-field input[type=text] { width: 6.5em; }
.tool-field input[type=range] { accent-color: var(--pen); min-width: 160px; }
.tool-field.is-wide { flex: 1 1 14em; }
.tool-field.is-wide input[type=text] { width: 100%; }
.tool-result { font-family: var(--font-ui); font-size: 15px; line-height: 1.5; }
.tool-result h4 { font-size: 14.5px; margin: 14px 0 6px; }
.tool-result p { margin: 0 0 8px; }
.tool-verdict { padding: 10px 14px; border-left: 3px solid var(--check); background: var(--check-soft); border-radius: 0 var(--radius-s) var(--radius-s) 0; margin: 4px 0 10px; }
.tool-verdict.is-warn { border-left-color: var(--red); background: var(--red-soft); }
.tool-verdict.is-tip { border-left-color: var(--hl-deep); background: var(--hl-soft); }
.tool-presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.tool-presets .btn { padding: 6px 10px; font-size: 13px; font-weight: 500; }
.output-lines { font: 13px/1.35 var(--font-code); background: #fff; border: 1px solid var(--rule); border-radius: var(--radius-s); padding: 8px 12px; margin: 0; white-space: pre; overflow-x: auto; min-height: 2.2em; }
.output-lines .is-new { background: var(--hl); }

/* heap */
.viz-heap .heap-array { margin-top: 6px; }

/* node-and-pointer diagram (DSA.viz.links, models.js) */
.lk-row { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: flex-start; }
.lk-tree { min-width: 0; max-width: 100%; }
.lk-title { font: 600 13px var(--font-ui); color: var(--graphite); margin-bottom: 2px; }
.lk-svg { display: block; height: auto; width: 100%; }
.lk-box { fill: #fff; stroke: var(--ink); stroke-width: 1.5; transition: fill 0.18s; }
.lk-rule { stroke: var(--ink); stroke-width: 1; }
.lk-dot { fill: var(--pen); }
.lk-label { font: 600 12px var(--font-ui); fill: var(--ink); }
.lk-field { fill: var(--pen-soft); }
.lk-field.hl-active { fill: var(--pen-mid); }
.lk-field.hl-new, .lk-field.hl-done { fill: var(--check-soft); }
.lk-field.hl-visit { fill: var(--hl); }
.lk-field.hl-warn, .lk-field.hl-swap { fill: var(--red-soft); }
.lk-arrow { fill: none; stroke: var(--pen); stroke-width: 1.4; }
.lk-arrow.lk-up { stroke: var(--pen-mid); stroke-width: 1.2; }
.lk-arrow.hl-active { stroke: var(--pen); stroke-width: 2.8; }
.lk-arrow.hl-new, .lk-arrow.hl-done { stroke: var(--check); stroke-width: 2.8; }
.lk-arrow.hl-visit { stroke: var(--hl-deep); stroke-width: 2.8; }
.lk-arrow.hl-warn, .lk-arrow.hl-swap { stroke: var(--red); stroke-width: 2.4; }
.lk-arrow.hl-muted { stroke: #c4ccd2; }
.lk-head { fill: var(--pen); }
.lk-head.hl-active { fill: var(--pen); }
.lk-head.hl-new, .lk-head.hl-done { fill: var(--check); }
.lk-head.hl-visit { fill: var(--hl-deep); }
.lk-head.hl-warn { fill: var(--red); }
.lk-head.hl-muted { fill: #c4ccd2; }
.lk-null { font: 600 12px var(--font-ui); fill: var(--faint); }
.lk-null.hl-new, .lk-null.hl-done { fill: var(--check); }
.lk-null.hl-active { fill: var(--pen); }
.lk-null.hl-warn { fill: var(--red); }
.lk-name { font: 700 13px var(--font-code); fill: var(--ink); }
.lk-var { fill: #fff; stroke: var(--ink); stroke-width: 1.3; }
.lk-var.hl-active { fill: var(--pen-soft); stroke: var(--pen); stroke-width: 2.2; }
.lk-var.hl-new, .lk-var.hl-done { fill: var(--check-soft); stroke: var(--check); stroke-width: 2.2; }
.lk-var.hl-visit { fill: var(--hl); stroke: var(--hl-deep); }
.lk-varlab { font: 600 11px var(--font-ui); fill: var(--graphite); }
.lk-size { font: 700 13px var(--font-ui); fill: var(--ink); }
.lk-tag { font: 700 11.5px var(--font-code); fill: var(--pen); paint-order: stroke; stroke: #fdfefd; stroke-width: 4px; stroke-linejoin: round; }
.lk-node.hl-active .lk-box { fill: var(--pen-soft); stroke: var(--pen); stroke-width: 2.6; }
.lk-node.hl-visit .lk-box { fill: var(--hl-soft); stroke: var(--hl-deep); stroke-width: 2.4; }
.lk-node.hl-new .lk-box, .lk-node.hl-done .lk-box { fill: var(--check-soft); stroke: var(--check); stroke-width: 2.6; }
.lk-node.hl-swap .lk-box, .lk-node.hl-warn .lk-box { fill: var(--red-soft); stroke: var(--red); stroke-width: 2.4; }
.lk-node.hl-muted .lk-box { fill: #f0f2f1; stroke: #b8c1c7; }
.lk-node.hl-muted .lk-label { fill: var(--faint); }
.lk-node.is-clickable { cursor: pointer; }
.lk-node.is-clickable:hover .lk-box { stroke: var(--hl-deep); stroke-width: 2.6; }
.lk-node:focus-visible { outline: none; }
.lk-node:focus-visible .lk-box { stroke: var(--pen); stroke-width: 3.2; }

/* tree explorers (pages 5-x): a node-facts list next to a clickable tree; tiny cell grids for array sizes */
.facts { font-family: var(--font-ui); font-size: 14.5px; line-height: 1.45; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 14px; margin: 0; }
.facts dt { color: var(--graphite); font-weight: 600; }
.facts dd { margin: 0; }
.mini-grid { display: flex; flex-wrap: wrap; gap: 2px; max-width: 100%; }
.mini-cell { width: 9px; height: 9px; border: 1px solid var(--rule-strong); background: #fff; }
.mini-cell.hl-done { background: var(--check); border-color: var(--check); }
.mini-cell.hl-muted { background: #eef1f0; }

/* ---------- quiz ---------- */
.quiz { font-family: var(--font-ui); max-width: 820px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; padding: 8px 22px 16px; }
.quiz-title { margin-top: 0.8em; }
.quiz-list { padding-left: 1.3em; margin: 0.8em 0 0; }
.quiz-q { margin: 0 0 1.4em; }
.quiz-prompt { font-family: var(--font-prose); font-size: 17px; margin-bottom: 8px; }
.quiz-choices { display: flex; flex-direction: column; gap: 6px; }
.quiz-choice { text-align: left; font: 15px/1.4 var(--font-ui); color: var(--ink); background: #fff; border: 1px solid var(--rule-strong); border-radius: var(--radius-s); padding: 8px 12px; cursor: pointer; }
.quiz-choice:hover:not(:disabled) { border-color: var(--pen); }
.quiz-choice:disabled { cursor: default; }
.quiz-choice.is-right { border-color: var(--check); background: var(--check-soft); box-shadow: inset 3px 0 0 var(--check); opacity: 1; }
.quiz-choice.is-wrong { border-color: var(--red); background: var(--red-soft); box-shadow: inset 3px 0 0 var(--red); }
.quiz-choice:disabled:not(.is-right):not(.is-wrong) { opacity: 0.55; }
.quiz-feedback { margin-top: 8px; font-size: 15px; line-height: 1.5; }
.quiz-feedback:empty { display: none; }
.quiz-feedback.is-right { color: #1f5a3f; }
.quiz-feedback.is-wrong { color: #7d2416; }
.quiz-feedback.is-shown { color: var(--ink); }
.quiz-score { color: var(--graphite); font-size: 14px; margin: 0; }

/* ---------- stepper ---------- */
.stepper { font-family: var(--font-ui); margin: 1.4em 0 2em; background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; padding: 14px 18px; }
.stepper-title { font-weight: 600; font-size: 15px; margin-bottom: 10px; }
.stepper-stage { min-height: 120px; padding: 10px; border: 1px solid var(--rule); border-radius: var(--radius-m); background-color: #fdfefd; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 16px 16px; overflow-x: auto; }
.stepper-caption { font-family: var(--font-prose); font-size: 16px; line-height: 1.5; min-height: 3em; margin: 10px 0; max-width: 72ch; }
.stepper-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.stepper-dots { display: flex; flex-wrap: wrap; gap: 5px; margin-left: 6px; }
.stepper-dot { width: 12px; height: 12px; padding: 0; border-radius: 50%; border: 1.5px solid var(--pen); background: #fff; cursor: pointer; }
.stepper-dot.is-on { background: var(--pen); }
.stepper-count { color: var(--graphite); font-size: 13px; margin-left: auto; font-variant-numeric: tabular-nums; }

/* ---------- tabs ---------- */
.tabs { margin: 1.4em 0 2em; }
.tab-bar { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--rule-strong); margin-bottom: 12px; }
.tab-btn { font: 600 14.5px var(--font-ui); color: var(--graphite); background: none; border: 0; border-bottom: 3px solid transparent; padding: 8px 14px 7px; cursor: pointer; margin-bottom: -1px; }
.tab-btn[aria-selected=true] { color: var(--pen); border-bottom-color: var(--pen); }
.tab-btn:hover { color: var(--ink); }

/* ---------- reveal ---------- */
details.reveal { margin: 1em 0 1.4em; border: 1px solid var(--rule); border-radius: var(--radius-m); background: var(--sheet); padding: 0 16px; }
details.reveal > summary { font: 600 15px var(--font-ui); cursor: pointer; padding: 10px 0; color: var(--pen); }
details.reveal[open] > summary { border-bottom: 1px solid var(--rule); margin-bottom: 10px; }
details.reveal > :last-child { margin-bottom: 14px; }

/* ---------- pager ---------- */
.pager { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; margin-top: 4em; padding-top: 1.4em; border-top: 1px solid var(--rule); font-family: var(--font-ui); font-size: 15px; }
.pager a { text-decoration: none; display: flex; flex-direction: column; gap: 2px; }
.pager-next { text-align: right; }
.pager-dir { font-size: 13px; color: var(--graphite); }
.studied-toggle.is-on { background: var(--check-soft); border-color: var(--check); color: #1f5a3f; }

/* ---------- home ---------- */
.home { max-width: 980px; margin: 0 auto; padding: 56px 40px 80px; }
.home-head { max-width: 62ch; margin-bottom: 2.4em; }
.home-head h1 { font-size: 2.5rem; margin-bottom: 0.3em; }
.home-head p { color: #2a3846; }
.home-how { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px 28px; font-family: var(--font-ui); font-size: 15px; margin: 0 0 2.6em; padding: 0; list-style: none; }
.home-how li { margin: 0; padding-left: 14px; border-left: 3px solid var(--rule-strong); }
.home-how strong { display: block; }
.chapter { margin-bottom: 2.4em; }
.chapter-title { border-top: 0; padding-top: 0; margin: 0 0 0.2em; font-size: 1.5rem; display: flex; gap: 0.5em; align-items: baseline; }
.chapter-code { color: var(--pen); font-weight: 700; }
.chapter-progress { font-family: var(--font-ui); font-size: 14px; color: var(--graphite); margin: 0 0 0.6em; }
.chapter-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); font-family: var(--font-ui); }
.chapter-item { margin: 0; border-bottom: 1px solid var(--rule); }
.chapter-item a, .ci-row { display: grid; grid-template-columns: 3.4em 1fr auto; gap: 10px; padding: 11px 8px; color: var(--ink); text-decoration: none; align-items: baseline; }
.chapter-item a:hover { background: var(--sheet); }
.ci-num { font-weight: 700; color: var(--pen); font-variant-numeric: tabular-nums; }
.ci-title { font-size: 16.5px; }
.ci-state { font-size: 13px; color: var(--graphite); }
.chapter-item.is-pending .ci-num, .chapter-item.is-pending .ci-title, .chapter-item.is-pending .ci-state { color: var(--faint); }
.chapter-item.is-studied .ci-state { color: var(--check); font-weight: 600; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .has-sidebar main { margin-left: 0; }
  .topbar {
    display: flex; gap: 12px; align-items: center;
    position: sticky; top: 0; z-index: 30;
    background: rgba(242, 244, 243, 0.96);
    border-bottom: 1px solid var(--rule);
    padding: 8px 16px;
    font-family: var(--font-ui);
  }
  .topbar-title { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sidebar { transform: translateX(-100%); transition: transform 0.2s ease; box-shadow: none; top: 0; }
  body.nav-open .sidebar { transform: none; box-shadow: 8px 0 30px rgba(28, 39, 51, 0.22); }
  .content { padding: 28px 22px 64px; }
  html { scroll-padding-top: 64px; }
}
@media (max-width: 560px) {
  body { font-size: 17px; }
  .content { padding: 22px 14px 56px; }
  h1 { font-size: 1.75rem; }
  .lab-grid { padding: 12px; }
  .lab-head, .lab-inputs, .lab-actions { padding-left: 12px; padding-right: 12px; }
  .pager { grid-template-columns: 1fr; }
  .pager-next { text-align: left; }
  .home { padding: 32px 18px 60px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
  .sidebar, .topbar, .lab-player, .pager, .lab-inputs { display: none !important; }
  .has-sidebar main { margin-left: 0; }
}

/* TreeViz node kinds (Task 5): sentinel leaves and subtree triangles */
.tshape.is-leaf { stroke-width: 1.4; }
.tshape.is-subtree { fill: #d3dcf3; stroke: #43515e; stroke-width: 1.4; }