/* Reusable components */

/* ===== Callouts ===== */
.callout {
  margin: 16px 0;
  padding: 12px 16px;
  border-radius: var(--radius);
  border-left: 3px solid;
  font-size: var(--text-sm);
  line-height: var(--leading);
}
.callout-title {
  font-weight: 600;
  margin-bottom: 4px;
  font-size: var(--text-sm);
}
.callout-info {
  background: var(--info-bg);
  border-color: var(--accent);
}
.callout-info .callout-title { color: var(--accent); }
.callout-tip {
  background: var(--success-bg);
  border-color: var(--success);
}
.callout-tip .callout-title { color: var(--success); }
.callout-warn {
  background: var(--warning-bg);
  border-color: var(--warning);
}
.callout-warn .callout-title { color: var(--warning); }

/* ===== Tables ===== */
.doc-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: var(--text-sm);
}
.doc-table th,
.doc-table td {
  border: 1px solid var(--border);
  padding: 8px 10px;
  text-align: center;
}
.doc-table th {
  background: var(--bg-subtle);
  font-weight: 500;
  color: var(--text-secondary);
  font-size: var(--text-xs);
}
.doc-table tbody tr:hover { background: #fafbfc; }
.doc-table td.hl {
  background: var(--warning-bg);
  font-weight: 600;
}

/* ===== Code blocks ===== */
.codeblock {
  margin: 16px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.code-tabs {
  display: flex;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
}
.code-tabs button {
  background: none;
  border: none;
  padding: 8px 16px;
  font-size: var(--text-xs);
  font-family: inherit;
  color: var(--text-tertiary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .12s;
}
.code-tabs button:hover { color: var(--text-secondary); }
.code-tabs button.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: var(--bg-code);
  font-weight: 500;
}
.codeblock pre {
  display: none;
  background: var(--bg-code);
  padding: 16px 18px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-primary);
  margin: 0;
}
.codeblock pre.active { display: block; }
.codeblock .kw  { color: #7c3aed; }
.codeblock .num { color: #d97706; }
.codeblock .cmt { color: var(--text-tertiary); }
.codeblock .str { color: #059669; }

/* ===== Demo / Interactive ===== */
.demo {
  margin: 20px 0;
  padding: 20px;
  background: var(--bg-demo);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.demo-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 14px;
}
.demo-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  align-items: center;
}
.demo-controls input {
  flex: 1;
  min-width: 200px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  outline: none;
}
.demo-controls input:focus { border-color: var(--accent); }
.demo-controls button {
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font-size: var(--text-sm);
  font-family: inherit;
  cursor: pointer;
  transition: background .12s;
}
.demo-controls button:hover { background: var(--accent-hover); }
.demo-controls button:disabled {
  background: var(--bg-subtle);
  border-color: var(--border);
  color: var(--text-tertiary);
  cursor: not-allowed;
}
.demo-controls button.btn-ghost {
  background: #fff;
  color: var(--accent);
}
.demo-controls button.btn-ghost:hover { background: var(--accent-bg); }

.demo-state {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.stat {
  padding: 3px 10px;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--text-secondary);
}
.stat b { color: var(--accent); font-weight: 600; }

.demo-msg {
  margin-top: 12px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  min-height: 44px;
  line-height: 1.65;
}
.demo-msg .step-no {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* ===== Bar chart visualization ===== */
.viz {
  overflow-x: auto;
  padding: 8px 0;
}
.viz-cols {
  display: flex;
  gap: 2px;
  align-items: flex-end;
  width: max-content;
  margin: 0 auto;
}
.viz-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.viz-cell {
  width: 26px;
  height: 26px;
  border-radius: 3px;
}
.viz-cell.bar   { background: var(--viz-bar); }
.viz-cell.water { background: var(--viz-water); }
.viz-cell.empty { background: transparent; }
.viz-cell.ghost {
  background: transparent;
  border: 1px dashed var(--border);
}
.viz-label {
  text-align: center;
  font-size: 11px;
  color: var(--text-tertiary);
  width: 26px;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.viz-idx {
  text-align: center;
  font-size: 10px;
  color: var(--text-tertiary);
  width: 26px;
  opacity: .7;
}
.viz-mark {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  height: 18px;
  width: 26px;
}
.viz-mark.l { color: var(--viz-ptr-l); }
.viz-mark.r { color: var(--viz-ptr-r); }
.viz-col.ptr-l .viz-label { color: var(--viz-ptr-l); font-weight: 600; }
.viz-col.ptr-r .viz-label { color: var(--viz-ptr-r); font-weight: 600; }
.viz-col.active-col .viz-cell.bar { background: var(--viz-active); }
.viz-caption {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: 8px;
}

@media (max-width: 640px) {
  .viz-cell, .viz-label, .viz-idx, .viz-mark { width: 20px; }
  .viz-cell { height: 20px; }
}

/* ===== Array visualization (Two Sum etc.) ===== */
.array-viz {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 12px 0;
}
.array-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 44px;
}
.array-cell .val {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-subtle);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  transition: all .15s;
}
.array-cell .idx {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-tertiary);
}
.array-cell.current .val {
  border-color: var(--accent);
  background: var(--accent-bg);
  color: var(--accent);
}
.array-cell.partner .val {
  border-color: var(--success);
  background: var(--success-bg);
  color: var(--success);
}
.array-cell.done .val {
  border-color: var(--success);
  background: var(--success);
  color: #fff;
}
.map-viz {
  margin-top: 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  min-height: 40px;
}
.map-viz b { color: var(--accent); }
.map-viz .empty { color: var(--text-tertiary); font-style: italic; }

/* ===== renderStack ===== */
/* Vertical stack: top cell drawn highest, bottom cell lowest. */
.viz-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  width: max-content;
  min-width: 96px;
  margin: 0 auto;
  padding: 12px 0;
}
.viz-stack-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 72px;
  height: 34px;
  padding: 0 12px;
  background: var(--bg-subtle);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  transition: all .15s;
}
.viz-stack-cell.top {
  border-color: var(--accent);
  background: var(--accent-bg);
  color: var(--accent);
}
.viz-stack-cell.pushed {
  border-color: var(--success);
  background: var(--success-bg);
  color: var(--success);
}
.viz-stack-cell.popped {
  border-color: var(--danger);
  background: var(--danger-bg);
  color: var(--danger);
}
.viz-stack-arrow {
  font-size: var(--text-xs);
  font-weight: 700;
}
.viz-stack-tag {
  position: absolute;
  right: -44px;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-tertiary);
  font-family: var(--font-sans);
}
.viz-stack-empty {
  padding: 8px 16px;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-style: italic;
}
/* Monotonic colouring: tint cells to signal increasing / decreasing stacks. */
.viz-stack.mono-inc .viz-stack-cell { background: var(--info-bg); }
.viz-stack.mono-dec .viz-stack-cell { background: var(--warning-bg); }
.viz-stack.mono-inc .viz-stack-cell.top,
.viz-stack.mono-dec .viz-stack-cell.top {
  background: var(--accent-bg);
}

/* ===== Generic array / string visualization (LK100.renderArray/renderString) ===== */
.viz-array {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: flex-start;
  justify-content: center;
  padding: 8px 0;
}
.viz-array-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 34px;
}
.viz-array-cell {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-subtle);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  transition: background .15s, border-color .15s, color .15s;
}
.viz-array-cell.in-window {
  background: var(--info-bg);
  border-color: var(--accent);
}
.viz-array-cell.sorted {
  background: var(--success-bg);
  border-color: var(--success);
  color: var(--success);
}
.viz-array-cell.active {
  background: var(--warning-bg);
  border-color: var(--viz-active);
  color: var(--viz-active);
}
.viz-array-cell.hit {
  background: var(--danger-bg);
  border-color: var(--danger);
  color: var(--danger);
}
.viz-array-idx {
  margin-top: 4px;
  font-size: 10px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.viz-pointers {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  margin-top: 2px;
  min-height: 14px;
}
.viz-pointer {
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-secondary);
}
.viz-pointer.p-left    { color: var(--viz-ptr-l); }
.viz-pointer.p-right   { color: var(--viz-ptr-r); }
.viz-pointer.p-i       { color: var(--accent); }
.viz-pointer.p-j       { color: var(--viz-active); }
.viz-pointer.p-default { color: var(--text-secondary); }

.viz-counts {
  margin: 12px auto 0;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}
.viz-counts th,
.viz-counts td {
  border: 1px solid var(--border);
  padding: 4px 8px;
  text-align: center;
  min-width: 24px;
}
.viz-counts th {
  background: var(--bg-subtle);
  color: var(--text-secondary);
  font-weight: 600;
}
.viz-counts td {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .viz-array-col { min-width: 26px; }
  .viz-array-cell { width: 26px; height: 26px; font-size: var(--text-xs); }
}

/* ===== renderList (linked list) ===== */
.viz-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 0;
}
.viz-node-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.viz-ptr-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3px;
  min-height: 18px;
  margin-bottom: 3px;
}
.viz-ptr-label {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--radius);
  background: var(--accent-bg);
  color: var(--accent);
  font-family: var(--font-mono);
  line-height: 1.5;
}
.viz-ptr-label[data-ptr="slow"] { background: var(--danger-bg); color: var(--danger); }
.viz-ptr-label[data-ptr="fast"] { background: var(--success-bg); color: var(--success); }
.viz-ptr-label[data-ptr="prev"] { background: var(--bg-subtle); color: var(--text-secondary); }
.viz-ptr-label[data-ptr="dummy"] { background: var(--bg-subtle); color: var(--text-tertiary); }
.viz-node {
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-subtle);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  transition: all .15s;
}
.viz-node.active {
  border-color: var(--accent);
  background: var(--accent-bg);
  color: var(--accent);
}
.viz-node.cycle-entry {
  border-color: var(--warning);
  background: var(--warning-bg);
  color: var(--warning);
}
.viz-node.viz-node-dummy {
  border-style: dashed;
  color: var(--text-tertiary);
}
.viz-node-idx {
  margin-top: 4px;
  font-size: 10px;
  color: var(--text-tertiary);
}
.viz-arrow {
  color: var(--text-tertiary);
  font-size: 16px;
  font-weight: 700;
  padding: 0 2px;
}
.viz-arrow.link-hl { color: var(--accent); }
.viz-arrow.viz-arrow-cycle {
  color: var(--warning);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
}
.viz-arrow.viz-arrow-null {
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
}

/* ===== renderDPTable (LK100.renderDPTable) ===== */
/* Grid of DP cells; a 1-D table renders as a single row. Sentinels (∞ / ·)
   are produced by the primitive, styled uniformly here. */
.viz-dp {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 0;
  margin: 0 auto;
  font-family: var(--font-mono);
}
.viz-dp-row {
  display: flex;
  gap: 3px;
}
.viz-dp-cell {
  min-width: 40px;
  height: 36px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-subtle);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  transition: background .15s, border-color .15s, color .15s;
}
/* Optimal backtrack path (base highlight). */
.viz-dp-cell.path {
  background: var(--success-bg);
  border-color: var(--success);
  color: var(--success);
}
/* Dependency source cells feeding the current computation. */
.viz-dp-cell.dep {
  background: var(--info-bg);
  border-color: var(--accent);
  color: var(--accent);
}
/* Cell currently being filled — wins over path/dep when overlapping. */
.viz-dp-cell.active {
  background: var(--warning-bg);
  border-color: var(--viz-active);
  color: var(--viz-active);
}
/* Row / column header labels (borderless, muted). */
.viz-dp-cell.viz-dp-label {
  background: transparent;
  border-color: transparent;
  color: var(--text-tertiary);
  font-weight: 500;
  font-size: var(--text-xs);
}
.viz-dp-cell.viz-dp-corner {
  background: transparent;
  border-color: transparent;
}
@media (max-width: 640px) {
  .viz-dp-cell { min-width: 30px; height: 28px; font-size: var(--text-xs); }
}

/* ===== renderTree (binary tree) ===== */
/* Layered layout: the JS primitive absolutely positions nodes by depth/column
   and draws parent→child connectors as rotated line divs. These classes only
   supply appearance; positional geometry is set inline by LK100.renderTree. */
.viz-tree {
  position: relative;
  margin: 12px auto;
  padding: 8px 0;
}
.viz-tree-empty {
  padding: 8px 16px;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-style: italic;
}
.viz-tree-node {
  position: absolute;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background: var(--bg-subtle);
  border: 2px solid var(--border);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  z-index: 2;
  transition: background .15s, border-color .15s, color .15s;
}
.viz-tree.shape-square .viz-tree-node { border-radius: var(--radius); }
.viz-tree-val {
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* Visited path: nodes already walked. */
.viz-tree-node.visited {
  background: var(--success-bg);
  border-color: var(--success);
  color: var(--success);
}
/* Level band: all nodes at a highlighted depth. */
.viz-tree-node.level {
  background: var(--info-bg);
  border-color: var(--accent);
}
/* Subtree membership tint (bounded by .viz-tree-subtree-box). */
.viz-tree-node.in-subtree {
  border-color: var(--warning);
}
/* Current node: strongest highlight, wins over the others. */
.viz-tree-node.active {
  background: var(--warning-bg);
  border-color: var(--viz-active);
  color: var(--viz-active);
  box-shadow: 0 0 0 3px var(--warning-bg);
}
/* Connector line between a parent and a child. */
.viz-tree-edge {
  position: absolute;
  height: 2px;
  background: var(--border);
  transform-origin: left center;
  z-index: 1;
}
.viz-tree-edge.hl { background: var(--viz-active); }
/* Dashed box framing a highlighted subtree. */
.viz-tree-subtree-box {
  position: absolute;
  box-sizing: border-box;
  border: 2px dashed var(--warning);
  border-radius: var(--radius-lg);
  background: var(--warning-bg);
  opacity: .5;
  z-index: 0;
}

/* ===== renderGrid / renderGraph (LK100.renderGrid / renderGraph) ===== */
/* --- Grid --- */
.viz-grid {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
  margin: 0 auto;
}
.viz-grid-row {
  display: flex;
  gap: 2px;
}
.viz-grid-cell {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  transition: background .15s, border-color .15s, color .15s;
}
.viz-grid-cell.visited {
  background: var(--bg-code);
  color: var(--text-tertiary);
}
.viz-grid-cell.path {
  background: var(--success-bg);
  border-color: var(--success);
  color: var(--success);
}
.viz-grid-cell.active {
  background: var(--warning-bg);
  border-color: var(--viz-active);
  color: var(--viz-active);
}
/* BFS ripple layers — cycled colours keyed by layer number. */
.viz-grid-cell.layer-0 { background: #e1eaff; border-color: #adc6ff; }
.viz-grid-cell.layer-1 { background: #d6f5d6; border-color: #95de95; }
.viz-grid-cell.layer-2 { background: #fff1d6; border-color: #ffd591; }
.viz-grid-cell.layer-3 { background: #ffe0dc; border-color: #ffa8a0; }
.viz-grid-cell.layer-4 { background: #ede1ff; border-color: #c7a8ff; }
.viz-grid-cell.layer-5 { background: #d6f7f5; border-color: #8ee0da; }

@media (max-width: 640px) {
  .viz-grid-cell { width: 26px; height: 26px; font-size: var(--text-xs); }
}

/* --- Graph --- */
.viz-graph-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
  justify-content: center;
  padding: 8px 0;
}
.viz-graph {
  position: relative;
  flex: none;
}
.viz-graph-node {
  position: absolute;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background: var(--bg-subtle);
  border: 2px solid var(--border);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  z-index: 2;
  transition: background .15s, border-color .15s, color .15s;
}
.viz-graph-node.visited {
  background: var(--bg-code);
  color: var(--text-tertiary);
}
.viz-graph-node.active {
  background: var(--warning-bg);
  border-color: var(--viz-active);
  color: var(--viz-active);
}
/* Union-find groups — cycled colours keyed by group id. */
.viz-graph-node.group-0 { background: #e1eaff; border-color: #adc6ff; color: #1d39c4; }
.viz-graph-node.group-1 { background: #d6f5d6; border-color: #95de95; color: #237804; }
.viz-graph-node.group-2 { background: #fff1d6; border-color: #ffd591; color: #ad6800; }
.viz-graph-node.group-3 { background: #ffe0dc; border-color: #ffa8a0; color: #a8071a; }
.viz-graph-node.group-4 { background: #ede1ff; border-color: #c7a8ff; color: #531dab; }
.viz-graph-node.group-5 { background: #d6f7f5; border-color: #8ee0da; color: #006d75; }
.viz-graph-indeg {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-mono);
}
.viz-graph-edge {
  position: absolute;
  height: 2px;
  background: var(--border);
  transform-origin: left center;
  z-index: 1;
}
.viz-graph-edge.directed::after {
  content: '';
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  border-left: 6px solid var(--text-tertiary);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}
/* --- Queue / stack side panel --- */
.viz-graph-queue {
  align-self: center;
  min-width: 96px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
}
.viz-graph-queue-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.viz-graph-queue-items {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.viz-graph-queue-item {
  min-width: 24px;
  padding: 2px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-bg);
  color: var(--accent);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
}
.viz-graph-queue-empty {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-style: italic;
}

/* ===== renderCodePanel (LK100.renderCodePanel) ===== */
/* In-sync code view for step demos: source is split into individually
   addressable lines so makeStepper can highlight the line(s) a step executes.
   Only `.viz-code` appears in page HTML; the inner rows are built at runtime. */
.viz-code {
  margin: 12px 0 0;
  padding: 10px 0;
  background: var(--bg-code);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.7;
}
.viz-code-inner {
  display: flex;
  flex-direction: column;
  min-width: max-content;
}
.viz-code-line {
  display: flex;
  align-items: flex-start;
  padding: 1px 12px;
  border-left: 3px solid transparent;
  transition: background .15s, border-color .15s;
}
.viz-code-line.active {
  background: var(--warning-bg);
  border-left-color: var(--viz-active);
}
.viz-code-ln {
  flex: none;
  width: 24px;
  margin-right: 12px;
  text-align: right;
  color: var(--text-tertiary);
  user-select: none;
  font-variant-numeric: tabular-nums;
}
.viz-code-line.active .viz-code-ln {
  color: var(--viz-active);
  font-weight: 600;
}
.viz-code-src {
  white-space: pre;
  color: var(--text-primary);
}