*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  /* Light theme — default */
  --bg:#f1f0ec; --panel:#f9f8f5; --panel2:#eae7e0;
  --border:#dcd8ce; --border2:#c8c3b7;
  --text:#2c2f36; --muted:#62656d;
  /* Chrome accent is NEUTRAL graphite — it marks interaction & active state
     only (tabs, focus, selection, the live layer). It is deliberately NOT a
     data role, so color never means two things at once. */
  --accent:#4a5160; --accent2:#363c49;
  --accent-tint:rgba(74,81,96,.07); --accent-tint2:rgba(74,81,96,.13); --accent-glow:rgba(74,81,96,.18);
  --value:#3f8268; --grad:#a6762e;
  --error:#bb524a; --shape:#516f9c;
  --mono:'JetBrains Mono',monospace; --sans:'Inter',sans-serif;
  /* ── One color = one MEANING ──
     The five role hues below are the ONLY saturated color in the app, and they
     appear ONLY on data:  Blue = shape (sizes)  ·  Green = data (x, y)  ·
     Purple = weights (W, b)  ·  Amber = gradients (∂L)  ·  Red = loss.
     Everything structural — tabs, buttons, focus, the active layer — uses the
     neutral graphite --accent above, so purple now means weights and nothing
     else. Layer-category colors stay as dots on the map only, never on numbers. */
  --c-shape:#2f5ea6; --c-data:#0a7a4e;
  --c-weight:#6a43c0; --c-grad:#8a5410; --c-loss:var(--error);
}
[data-theme="dark"] {
  --bg:#0f1117; --panel:#1a1d27; --panel2:#20243a;
  --border:#2a2f45; --border2:#363c58;
  --text:#e2e8f0; --muted:#9aa1b2;
  --accent:#aab4c8; --accent2:#d2dae8;
  --accent-tint:rgba(170,180,200,.10); --accent-tint2:rgba(170,180,200,.18); --accent-glow:rgba(170,180,200,.24);
  --value:#22d3a0; --grad:#f59e0b;
  --error:#f87171; --shape:#60a5fa;
  /* dark theme: brighten the role text colors for contrast on dark panels */
  --c-shape:#6db1ff; --c-data:#2ee0ab;
  --c-weight:#bda4ff; --c-grad:#fbb442; --c-loss:var(--error);
}
body { background:var(--bg); color:var(--text); font-family:var(--sans); font-size:13px; height:100vh; display:flex; flex-direction:column; overflow:hidden; }
header { display:flex; align-items:center; gap:12px; padding:9px 16px; border-bottom:1px solid var(--border); flex-shrink:0; background:var(--panel); }
.logo { font-family:var(--mono); font-weight:700; font-size:15px; color:var(--accent2); letter-spacing:-0.5px; }
.logo span { color:var(--value); }
.header-meta { color:var(--muted); font-size:11px; }
.header-controls { margin-left:auto; display:flex; gap:7px; align-items:center; }
.btn { font-family:var(--mono); font-size:11px; padding:5px 11px; border-radius:4px; border:1px solid var(--border2); background:transparent; color:var(--text); cursor:pointer; transition:all .15s; white-space:nowrap; }
.btn:hover { border-color:var(--accent); color:var(--accent2); }
.btn.run { background:var(--value); border-color:var(--value); color:#ffffff; font-weight:600; }
.btn.run:hover { filter:brightness(1.08); }
[data-theme="dark"] .btn.run { background:#14532d; color:var(--value); }
[data-theme="dark"] .btn.run:hover { background:#166534; filter:none; }
.btn.on { background:var(--accent-tint2); border-color:var(--accent); color:var(--accent2); }
.btn.danger { border-color:var(--error); color:var(--error); }
.btn.danger:hover { background:rgba(248,113,113,.1); }
.icon-btn { padding:4px 8px; font-size:12px; line-height:1; color:var(--muted); }
.icon-btn:hover { color:var(--accent2); border-color:var(--accent); }
.workspace { position:relative; display:grid; grid-template-columns:190px 1fr var(--dataflow-w,0px) var(--insp-w,480px); flex:1; overflow:hidden; transition:grid-template-columns .18s ease; }
/* Collapse either side panel to give the canvas / walkthrough full width. */
.workspace.sidebar-collapsed { grid-template-columns:0 1fr var(--dataflow-w,0px) var(--insp-w,480px); }
.workspace.inspector-collapsed { grid-template-columns:190px 1fr var(--dataflow-w,0px) 0; }
.workspace.sidebar-collapsed.inspector-collapsed { grid-template-columns:0 1fr var(--dataflow-w,0px) 0; }
/* Collapse by zeroing the column track and clipping — NOT display:none, which
   would drop the panel out of the grid and shift the center "main" column into
   the zero-width track. The center canvas-area always keeps its 1fr and can
   never be collapsed. */
.sidebar, .inspector, .dataflow-lane { min-width:0; }
.workspace.sidebar-collapsed .sidebar { border-right:none; }
.workspace.inspector-collapsed .inspector { border-left:none; }
.workspace.inspector-collapsed .insp-resizer { display:none; }
/* Reopen handles — only visible while the matching panel is collapsed. */
.panel-reveal { display:none; position:absolute; top:50%; transform:translateY(-50%); z-index:40;
  width:18px; height:46px; align-items:center; justify-content:center; cursor:pointer;
  font-family:var(--mono); font-size:12px; color:var(--muted);
  background:var(--panel); border:1px solid var(--border2); }
.panel-reveal:hover { color:var(--accent2); border-color:var(--accent); background:var(--panel2); }
.panel-reveal.left { left:0; border-left:none; border-radius:0 7px 7px 0; }
.panel-reveal.right { right:0; border-right:none; border-radius:7px 0 0 7px; }
.workspace.sidebar-collapsed .panel-reveal.left { display:flex; }
.workspace.inspector-collapsed .panel-reveal.right { display:flex; }
/* SIDEBAR */
.sidebar { border-right:1px solid var(--border); display:flex; flex-direction:column; overflow:hidden; }
.sidebar-section { padding:10px; border-bottom:1px solid var(--border); flex-shrink:0; }
.sidebar-label { font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:1.5px; color:var(--muted); text-transform:uppercase; margin-bottom:6px; }
.layer-palette { overflow-y:auto; flex:1; padding:6px; }
.palette-filter { width:100%; margin-top:6px; font-family:var(--mono); font-size:11px; padding:4px 8px;
  background:var(--panel2); border:1px solid var(--border2); border-radius:5px; color:var(--text); outline:none; }
.palette-filter::placeholder { color:var(--muted); }
.palette-filter:focus { border-color:var(--accent); }
.layer-group { margin-bottom:2px; }
.layer-group-label { display:flex; align-items:center; gap:6px; font-size:10px; color:var(--muted);
  font-weight:700; letter-spacing:.6px; margin:7px 0 3px; padding:2px 4px; text-transform:uppercase;
  cursor:pointer; border-radius:4px; user-select:none; }
.layer-group-label:hover { color:var(--text); background:var(--panel2); }
.lg-caret { font-size:8px; transition:transform .15s; }
.layer-group.collapsed .lg-caret { transform:rotate(-90deg); }
.lg-name { flex:1; }
.lg-count { font-weight:600; color:var(--muted); opacity:.8; }
.layer-group.collapsed .layer-group-items { display:none; }
.palette-item { display:flex; align-items:center; gap:8px; padding:6px 9px; margin-bottom:2px; border-radius:4px; border:1px solid transparent; cursor:grab; transition:all .15s; background:var(--panel2); user-select:none; }
.palette-item:hover { border-color:var(--accent); background:var(--accent-tint); }
.palette-item:active { cursor:grabbing; }
.pi-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.pi-name { font-family:var(--mono); font-size:11px; font-weight:500; }
/* INPUT SECTION */
.input-section { padding:8px; border-bottom:1px solid var(--border); flex-shrink:0; }
.input-mode-tabs { display:flex; gap:4px; margin-bottom:8px; }
.imt { font-family:var(--mono); font-size:10px; padding:3px 8px; border-radius:3px; border:1px solid var(--border2); background:transparent; color:var(--muted); cursor:pointer; }
.imt.active { border-color:var(--shape); color:var(--shape); background:rgba(96,165,250,.08); }
.image-drop-zone { border:1px dashed var(--border2); border-radius:5px; padding:10px; text-align:center; cursor:pointer; transition:all .15s; }
.image-drop-zone:hover { border-color:var(--accent); }
.image-drop-zone.has-image { border-color:var(--value); border-style:solid; }
.image-preview-wrap { position:relative; }
.image-preview-wrap canvas { width:100%; border-radius:3px; display:block; }
.img-badge { font-family:var(--mono); font-size:9px; color:var(--value); margin-top:4px; }
.img-hint { font-size:10px; color:var(--muted); line-height:1.5; }
.channel-select { display:flex; gap:4px; margin-top:6px; flex-wrap:wrap; }
.ch-btn { font-family:var(--mono); font-size:9px; padding:2px 7px; border-radius:3px; border:1px solid var(--border2); background:transparent; color:var(--muted); cursor:pointer; }
.ch-btn.active { border-color:var(--grad); color:var(--grad); }
.shape-row { display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; color:var(--muted); }
.shape-input { font-family:var(--mono); font-size:11px; background:var(--panel2); border:1px solid var(--border2); border-radius:3px; color:var(--shape); padding:2px 6px; width:110px; outline:none; }
.shape-input:focus { border-color:var(--shape); }
/* CANVAS */
.canvas-area { display:flex; flex-direction:column; overflow:hidden; }
.canvas-toolbar { display:flex; align-items:center; gap:8px; padding:7px 12px; border-bottom:1px solid var(--border); flex-shrink:0; }
.network-canvas { flex:1; overflow-y:auto; padding:14px; }
.drop-zone { min-height:100%; display:flex; flex-direction:column; gap:4px; }
.drop-hint { display:flex; align-items:center; justify-content:center; height:80px; border:1px dashed var(--border2); border-radius:6px; color:var(--muted); font-size:12px; }
.drop-zone.drag-over { background:var(--accent-tint); outline:1px dashed var(--accent); border-radius:6px; }
/* Drag-to-reorder / insert-at-position */
.net-node.dragging { opacity:.35; }
.node-grip { cursor:grab; color:var(--muted); font-size:12px; line-height:1; padding:0 1px; user-select:none; flex-shrink:0; }
.node-grip:hover { color:var(--text); }
.node-grip:active { cursor:grabbing; }
.drop-insert-line { height:2px; background:var(--accent); border-radius:2px; margin:1px 2px; box-shadow:0 0 6px var(--accent); }
/* Next-layer suggestion bar */
.suggest-bar { flex-shrink:0; border-top:1px solid var(--border); padding:8px 12px; background:var(--panel); }
.suggest-head { font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:1px; color:var(--muted); text-transform:uppercase; margin-bottom:6px; }
.suggest-chips { display:flex; flex-wrap:wrap; gap:6px; }
.suggest-chip { display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; padding:4px 10px; border-radius:14px; background:var(--panel2); border:1px solid var(--border2); color:var(--text); cursor:pointer; transition:border-color .15s,background .15s; }
.suggest-chip:hover { border-color:var(--accent); background:var(--accent-tint); }
.suggest-chip .sc-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.suggest-chip .sc-why { color:var(--muted); font-size:10px; }
.suggest-warn { margin-top:7px; font-family:var(--mono); font-size:10px; color:var(--grad); line-height:1.55; }
/* Vertical dataflow lane — one thumbnail row per layer, aligned to its canvas block */
.dataflow-lane { position:relative; overflow:hidden; border-left:1px solid var(--border); background:var(--bg); display:flex; flex-direction:column; }
.dataflow-lane-spacer { flex-shrink:0; }
/* Rows stack vertically: layer name on top, thumbnail in the middle, shape below. */
.df-input-row { position:relative; flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:3px; padding:5px 6px; border-bottom:1px solid var(--border2); cursor:pointer; overflow:hidden; }
.df-input-row:hover { background:var(--panel2); }
.df-input-row canvas { flex-shrink:0; max-width:100%; image-rendering:pixelated; border-radius:3px; background:var(--panel2); object-fit:contain; }
.df-input-row .df-name { display:flex; align-items:center; justify-content:center; gap:4px; max-width:100%; font-family:var(--mono); font-size:10px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.df-input-row .df-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.df-input-row .df-shape { font-family:var(--mono); font-size:9px; color:var(--shape); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dataflow-lane-body { position:relative; flex:1; overflow-y:auto; overflow-x:hidden; }
.dataflow-lane-resizer { position:absolute; left:-3px; top:0; bottom:0; width:8px; cursor:col-resize; z-index:30; }
.dataflow-lane-resizer::after { content:''; position:absolute; left:3px; top:0; bottom:0; width:2px; background:transparent; transition:background .15s, box-shadow .15s; }
.dataflow-lane-resizer:hover::after, .dataflow-lane-resizer.dragging::after { background:var(--accent); box-shadow:0 0 8px var(--accent); }
.dataflow-lane-track { position:relative; }
.df-row { position:absolute; left:4px; right:4px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:4px 6px; box-sizing:border-box; cursor:pointer; border-radius:6px; border:1px solid transparent; overflow:hidden; }
.df-row:hover { border-color:var(--border2); background:var(--panel2); }
.df-row.active { border-color:var(--accent); background:var(--accent-tint2); }
.df-row canvas { flex-shrink:0; max-width:100%; image-rendering:pixelated; border-radius:3px; background:var(--panel2); object-fit:contain; }
/* When the lane is shown, give every layer block a floor height so the taller
   thumbnails still line up with their block (short layers like ReLU/Flatten
   would otherwise be shorter than the thumbnail). Centering keeps the block's
   text vertically aligned with the centered thumbnail beside it. */
.workspace.has-dataflow .net-node { min-height:56px; display:flex; flex-direction:column; justify-content:center; }
.df-row .df-name { display:flex; align-items:center; justify-content:center; gap:4px; max-width:100%; font-family:var(--mono); font-size:10px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.df-row .df-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.df-row .df-shape { font-family:var(--mono); font-size:9px; color:var(--shape); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* NODES */
.net-node { border:1px solid var(--border2); border-radius:6px; background:var(--panel2); overflow:hidden; transition:border-color .15s,box-shadow .15s; align-self:center; width:fit-content; max-width:min(460px,100%); }
.net-node.computed { border-color:rgba(34,211,160,.35); }
.net-node.active { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent),0 4px 20px var(--accent-glow); }
.node-header { display:flex; align-items:center; gap:8px; padding:7px 11px; cursor:pointer; border-bottom:1px solid var(--border); }
.node-header:hover { background:rgba(255,255,255,.02); }
.node-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.node-name { font-family:var(--mono); font-weight:600; font-size:12px; }
.node-shape-badge { margin-left:auto; display:inline-flex; align-items:baseline; gap:4px; font-family:var(--mono); font-size:10px; padding:2px 7px; border-radius:10px; background:rgba(96,165,250,.1); color:var(--shape); border:1px solid rgba(96,165,250,.25); cursor:help; }
/* quiet "out" prefix so the badge reads as this layer's OUTPUT, not its input */
.nsb-label { font-size:9px; letter-spacing:.04em; text-transform:uppercase; opacity:.62; }
.node-del { background:none; border:none; color:var(--muted); cursor:pointer; font-size:15px; padding:0 3px; line-height:1; transition:color .15s; margin-left:4px; }
.node-del:hover { color:var(--error); }
.node-params { padding:7px 11px; display:flex; flex-wrap:wrap; gap:5px; }
.param-row { display:flex; align-items:center; gap:4px; font-size:11px; }
.param-label { color:var(--muted); font-family:var(--mono); font-size:10px; }
.param-val { font-family:var(--mono); font-size:11px; background:var(--panel); border:1px solid var(--border); border-radius:3px; color:var(--text); padding:2px 5px; width:60px; outline:none; }
.param-val:focus { border-color:var(--accent); }
.node-skinny-tag { display:none; margin-left:6px; font-family:var(--mono); font-size:10px; color:var(--muted); }
.net-node.skinny .node-header,
.net-node:has(.node-params:empty) .node-header { padding:5px 11px; border-bottom:none; }
.net-node.skinny .node-skinny-tag { display:inline; }
.net-node.skinny .node-params,
.net-node.skinny .param-preview { display:none; }
.node-params:empty { display:none; }
.node-connector { display:flex; justify-content:center; padding:2px 0; }
.connector-line { width:1px; height:10px; background:var(--border2); }
/* INSPECTOR */
.inspector { border-left:1px solid var(--border); display:flex; flex-direction:column; overflow:hidden; background:var(--panel); position:relative; }
/* Drag-to-resize handle on the inspector's left edge */
.insp-resizer { position:absolute; left:-3px; top:0; bottom:0; width:8px; cursor:col-resize; z-index:30; }
.insp-resizer::after { content:''; position:absolute; left:3px; top:0; bottom:0; width:2px; background:transparent; transition:background .15s, box-shadow .15s; }
.insp-resizer:hover::after, .insp-resizer.dragging::after { background:var(--accent); box-shadow:0 0 8px var(--accent); }
body.col-resizing { cursor:col-resize; user-select:none; }
body.col-resizing iframe, body.col-resizing canvas { pointer-events:none; }
.inspector-tabs { display:flex; border-bottom:1px solid var(--border); flex-shrink:0; }
.tab { flex:1; padding:9px 4px; text-align:center; font-size:11px; font-family:var(--mono); color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; transition:all .15s; }
.tab.active { color:var(--accent2); border-bottom-color:var(--accent); }
.tab:hover:not(.active) { color:var(--text); }
.inspector-body { flex:1; overflow-y:auto; padding:14px 14px 22px; }
.insp-section { margin-bottom:20px; }
.insp-label { font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:1.4px; color:var(--muted); text-transform:uppercase; margin-bottom:8px; }
.insp-note { font-size:11px; color:var(--muted); font-family:var(--mono); line-height:1.7; }
.tensor-display { font-family:var(--mono); font-size:11px; line-height:1.8; background:var(--bg); border:1px solid var(--border); border-radius:5px; padding:9px; overflow-x:auto; }
.tensor-shape { font-size:10px; color:var(--shape); font-weight:600; margin-bottom:5px; }
.tensor-note { font-size:10px; color:var(--muted); font-style:italic; line-height:1.5; margin-bottom:7px; }
.tensor-row { white-space:nowrap; }
/* Tall tensors collapse to a peek; click to expand the rest. */
.tensor-body { position:relative; }
.tensor-body.collapsed { max-height:58px; overflow:hidden; }
.tb-fade { display:none; }
.tensor-body.collapsed .tb-fade { display:block; position:absolute; left:0; right:0; bottom:0; height:24px; background:linear-gradient(transparent,var(--bg)); pointer-events:none; }
.tb-toggle { font-family:var(--mono); font-size:9px; color:var(--accent2); background:none; border:none; cursor:pointer; padding:5px 0 0; letter-spacing:.3px; }
.tb-toggle:hover { text-decoration:underline; }
/* Tensor numbers carry the color of their ROLE (the block they live in),
   not their sign — so red never means "negative" (red is reserved for loss).
   Sign is shown by the minus glyph; near-zero values dim to muted. */
.num { font-weight:600; }
.num-data { color:var(--c-data); }
.num-weight { color:var(--c-weight); }
.num-grad { color:var(--c-grad); }
.num.is-neg { opacity:.82; }
.num.is-zero { color:var(--muted); opacity:.55; font-weight:400; }
.tv { color:var(--c-data); }   /* legacy alias */
.tv-label { color:var(--muted); margin-right:4px; font-size:10px; }
.eq-block { background:var(--bg); border:1px solid var(--border); border-radius:5px; padding:11px; font-family:var(--mono); font-size:12px; line-height:1.9; overflow-x:auto; }
.eq-main { color:var(--accent2); font-size:13px; word-break:break-word; }
.eq-note { color:var(--muted); font-size:10px; margin-top:3px; }
/* Code is a dark editor panel in BOTH themes — so it needs its own light text
   and dark-bg-friendly syntax colors, independent of the (light) theme tokens. */
.code-block { background:#0d1018; color:#d7deee; border:1px solid var(--border2); border-radius:5px; padding:11px; font-family:var(--mono); font-size:11px; line-height:1.8; overflow-x:auto; white-space:pre; }
.ck{color:#c792ea}.cs{color:#5fd0a8}.cn{color:#f3a06a}.cc{color:#7d8590;font-style:italic}.cf{color:#82aaff}.ct{color:#c7a4ff}
.step-controls { display:flex; align-items:center; gap:6px; padding:9px 12px; border-top:1px solid var(--border); flex-shrink:0; }
.step-indicator { font-family:var(--mono); font-size:11px; color:var(--muted); flex:1; text-align:center; }
.step-indicator strong { color:var(--text); }
.grad-display { background:var(--bg); border:1px solid rgba(245,158,11,.3); border-radius:5px; padding:9px; font-family:var(--mono); font-size:11px; line-height:1.9; }
.grad-val { color:var(--c-grad); font-weight:600; }
.grad-mag { color:var(--muted); font-weight:400; font-size:9.5px; }
.grad-mag.tiny { color:var(--c-grad); }
/* Plain-English explanation of which way the gradient flows and to whom */
.grad-flow-note { font-family:var(--mono); font-size:11px; line-height:1.7; color:var(--muted);
  background:rgba(245,158,11,.06); border:1px solid rgba(245,158,11,.22); border-left:3px solid var(--c-grad);
  border-radius:6px; padding:9px 11px; margin-bottom:14px; }
.grad-flow-note b { color:var(--text); font-weight:600; }
.grad-flow-note em { color:var(--c-grad); font-style:normal; font-weight:600; }
/* Pointer from the Trace to the Tensors tab */
.trace-tip { font-family:var(--mono); font-size:10px; color:var(--muted); text-align:center;
  padding:8px; border:1px dashed var(--border2); border-radius:6px; margin-top:4px; }
.trace-tip b { color:var(--accent2); }
.empty-inspector { display:flex; flex-direction:column; align-items:center; justify-content:center; height:200px; color:var(--muted); font-size:12px; gap:8px; text-align:center; }
.empty-icon { font-size:28px; opacity:.3; }
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:3px; }
.statusbar { display:flex; align-items:center; gap:14px; padding:4px 14px; background:var(--panel); border-top:1px solid var(--border); font-family:var(--mono); font-size:10px; color:var(--muted); flex-shrink:0; }
.sb-ok{color:var(--value)} .sb-err{color:var(--error)}
.loss-badge { display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; padding:3px 9px; background:rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.3); border-radius:4px; color:var(--grad); }
/* After Apply step the weights have moved but this number hasn't been
   recomputed yet — flag it so "nothing happened" isn't the takeaway. */
.loss-badge.stale { background:rgba(124,106,247,.1); border-color:rgba(124,106,247,.4); color:var(--c-weight,#7c6af7); }
.loss-badge.stale::after { content:' · stale, re-run ▶'; opacity:.85; }
.chain-rule { font-size:10px; color:var(--muted); font-family:var(--mono); line-height:1.9; background:var(--bg); border:1px solid rgba(245,158,11,.2); border-radius:5px; padding:8px 10px; overflow-x:auto; }
.chain-rule .cr-step { color:var(--c-grad); word-break:break-word; }
.chain-rule .cr-num { color:var(--c-grad); }   /* these are gradient values */
.grad-display { overflow-x:auto; }
/* Worked numeric example — the bridge between Tensor, Math, and Grad tabs */
.worked { background:var(--bg); border:1px solid var(--border2); border-radius:5px; padding:10px 11px; font-family:var(--mono); font-size:11px; line-height:1.85; overflow-x:hidden; }
/* Let a long expanded term list wrap onto a second line instead of running off
   the panel edge with no visible way to scroll to it. */
.worked .wk-line { white-space:normal; word-break:break-word; }
.worked .wk-x { color:var(--c-data); }
.worked .wk-w { color:var(--c-weight); }
.worked .wk-y { color:var(--c-data); }
.worked .wk-g { color:var(--c-grad); }
.xtab-link { font-size:10px; color:var(--muted); margin-top:7px; line-height:1.5; }

/* ── Shared symbol colors — one hue per role (equation ↔ player ↔ values) ──
   x & y are both DATA (green); W & b are both WEIGHTS (purple). */
.sym-x, .sym-w, .sym-b, .sym-y { font-weight:700; }
.sym-x { color:var(--c-data); }    /* input  (data)   */
.sym-w { color:var(--c-weight); }  /* weights         */
.sym-b { color:var(--c-weight); }  /* bias   (weight) */
.sym-y { color:var(--c-data); }    /* output (data)   */

/* Forward block: equation hero + the compute card, read as one unit */
.math-forward { margin-bottom:20px; }
.math-backward { margin-bottom:20px; }
.eq-hero { position:relative; background:var(--bg); border:1px solid var(--border2); border-radius:8px 8px 0 0; padding:14px 16px 14px 18px; overflow:hidden; }
.eq-hero::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg,var(--accent),var(--value)); }
/* Backward equation hero — amber accent (grad role) instead of the forward green. */
.eq-hero-grad::before { background:var(--c-grad); }
.eq-hero-grad .eqh-main { color:var(--c-grad); }
.eq-hero .eqh-main { font-family:var(--mono); font-size:16px; line-height:1.5; letter-spacing:.2px; color:var(--text); white-space:pre-wrap; word-break:break-word; }
.eq-hero .eqh-dims { font-family:var(--mono); font-size:10px; color:var(--muted); margin-top:7px; line-height:1.5; }

/* Compute card — flush under the hero so it reads as "the equation, evaluated".
   The real per-element numbers live in the interactive ledger below, not pinned
   to element 0, so the formula appears exactly once (no duplicate equations). */
.compute { border:1px solid var(--border2); border-top:none; border-radius:0 0 8px 8px; background:var(--bg); overflow:hidden; }
.compute-head { display:flex; align-items:baseline; gap:10px; padding:8px 14px; background:var(--accent-tint); border-bottom:1px solid var(--border); }
.compute-head .ch-title { font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--accent2); }
.compute-head .ch-trace { font-family:var(--mono); font-size:11px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.compute-head .ch-sub { font-family:var(--mono); font-size:9px; color:var(--muted); margin-left:auto; text-transform:uppercase; letter-spacing:.5px; }
/* Backward player wears the gradient hue so direction is obvious at a glance */
.compute-bwd .compute-head { background:rgba(244,114,98,.07); }
.compute-bwd .compute-head .ch-title { color:var(--c-grad); }
/* Line selector — pick which output neuron the card traces */
.mv-linesel { margin-left:auto; display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:10px; }
.mv-linesel .mvln-tag { font-size:8px; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); }
.mv-linesel .mvln-of { font-size:9px; color:var(--muted); }
.mvln-btn { font-family:var(--mono); font-size:10px; line-height:1; padding:3px 6px; border-radius:4px; border:1px solid var(--border2); background:var(--panel2); color:var(--text); cursor:pointer; transition:all .12s; }
.mvln-btn:hover:not(:disabled) { border-color:var(--accent); color:var(--accent2); }
.mvln-btn:disabled { opacity:.35; cursor:default; }
.mvln-cur { min-width:42px; text-align:center; }
.compute-body { padding:13px 14px; }
.mviz-intro { font-size:11px; line-height:1.55; color:var(--muted); margin-bottom:10px; }
.mviz-intro b { color:var(--text); font-weight:600; }
.compute-empty { font-family:var(--mono); font-size:11px; color:var(--muted); line-height:1.6; padding:14px 16px; border:1px dashed var(--border2); border-top:none; border-radius:0 0 8px 8px; background:var(--bg); }

/* Player controls */
.mviz-ctrl { display:flex; align-items:center; gap:7px; margin-bottom:14px; }
.mviz-btn { font-family:var(--mono); font-size:10px; padding:4px 12px; border-radius:5px; border:1px solid var(--border2); background:var(--panel2); color:var(--text); cursor:pointer; transition:all .15s; }
.mviz-btn:hover { border-color:var(--accent); color:var(--accent2); }
.mviz-btn.play { border-color:var(--value); color:var(--value); background:rgba(34,211,160,.08); font-weight:600; }
.mviz-status { margin-left:auto; font-size:10px; color:var(--muted); font-family:var(--mono); }

/* Number grid — each row is a labelled, color-keyed strip of cells */
.mviz-grid { display:flex; flex-direction:column; gap:11px; overflow-x:auto; padding-bottom:4px; }
.mviz-row { display:grid; grid-template-columns:72px 1fr; align-items:center; gap:12px; }
.mviz-rowlbl { font-family:var(--mono); text-align:right; line-height:1.25; }
.mviz-rowlbl .rl-sym { display:block; font-size:11px; font-weight:600; }
.mviz-rowlbl .rl-name { display:block; font-size:8px; color:var(--muted); letter-spacing:.5px; text-transform:uppercase; margin-top:1px; }
.mviz-rowlbl.x .rl-sym { color:var(--c-data); }
.mviz-rowlbl.w .rl-sym { color:var(--c-weight); }
.mviz-rowlbl.p .rl-sym { color:var(--text); }
.mviz-rowlbl.y .rl-sym { color:var(--c-data); }
.mviz-cells { display:flex; gap:5px; }
.mviz-more { padding-left:84px; font-family:var(--mono); font-size:9.5px; color:var(--muted); font-style:italic; }
.mvc { min-width:46px; text-align:center; padding:6px 7px; border-radius:5px; border:1px solid var(--border); background:var(--panel2); transition:all .14s; white-space:nowrap; font-size:11px; font-weight:600; }
.mvc.x { color:var(--c-data); }
.mvc.w { color:var(--c-weight); }
.mvc.p { color:var(--muted); }
.mvc.y { color:var(--c-data); }
.mvc.active { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent),0 0 12px var(--accent-glow); background:var(--accent-tint2); transform:translateY(-1px); }
.mvc.done { opacity:.4; }
.mvc.rest { font-style:italic; color:var(--muted); }
.mviz-sum { margin-top:14px; padding:11px 13px; border-radius:6px; background:rgba(34,211,160,.05); border:1px solid rgba(34,211,160,.16); font-family:var(--mono); font-size:12.5px; color:var(--muted); line-height:1.7; }
.mviz-sum .acc { color:var(--value); font-weight:700; }
.mviz-sum .lhs { color:var(--text); }
.mviz-sum b { color:var(--accent2); font-weight:600; }
.mviz-cap { margin-top:10px; font-size:10px; color:var(--muted); line-height:1.55; }

/* ── Interactive activation heatmap: the visual ↔ math bridge in Compute ──────
   Sits flush between the equation hero (rounded top) and the ledger card
   (rounded bottom), so equation → picture → math read as one stacked card. */
.compute-hm { background:var(--bg); border-left:1px solid var(--border2); border-right:1px solid var(--border2); border-bottom:1px solid var(--border); padding:12px 14px; text-align:center; }
.chm-row { display:flex; align-items:flex-start; justify-content:center; gap:14px; flex-wrap:wrap; }
.chm-unit { display:flex; flex-direction:column; align-items:center; gap:5px; }
.chm-cap2 { font-family:var(--mono); font-size:10px; color:var(--text); letter-spacing:.2px; }
.chm-cap2 .sym-x { color:var(--c-data); } .chm-cap2 .sym-y { color:var(--c-data); font-weight:600; }
.chm-arrow { color:var(--muted); font-size:15px; align-self:center; margin-top:26px; }
/* row/col rulers OUTSIDE the image: corner | x-ticks ; y-ticks | grid. */
.chm-axgrid { display:inline-grid; grid-template-columns:auto auto; grid-template-rows:auto auto; }
.chm-corner { grid-area:1/1; }
.chm-xticks { grid-area:1/2; display:flex; }
.chm-yticks { grid-area:2/1; display:flex; flex-direction:column; }
.chm-wrap { grid-area:2/2; position:relative; display:inline-block; line-height:0; max-width:100%; }
.chm-tick { flex:1 1 0; min-width:0; font-family:var(--mono); font-size:8px; color:var(--muted); line-height:1; white-space:nowrap; overflow:visible; }
.chm-xticks .chm-tick { text-align:center; padding-bottom:2px; }
.chm-yticks .chm-tick { display:flex; align-items:center; justify-content:flex-end; padding-right:3px; }
.chm-canvas { image-rendering:pixelated; image-rendering:crisp-edges; border:1px solid var(--border2); border-radius:3px; display:block; max-width:100%; }
.chm-out { cursor:crosshair; }
.chm-overlay { position:absolute; inset:0; pointer-events:none; overflow:visible; }
/* High-contrast selection: a black band edged in white, so it reads on the
   colored heatmap cells (blue/green/red) in either theme. */
.chm-ring { position:absolute; box-sizing:border-box; border:2px solid #000; border-radius:1px; pointer-events:none; box-shadow:0 0 0 1.5px rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.9); display:none; z-index:2; }
/* contributing input region: ONE black box around the whole group (the input
   row for Linear, the K×K window for Conv) — edged in white to read on color. */
.chm-rgroup { position:absolute; box-sizing:border-box; border:2px solid #000; border-radius:2px; box-shadow:0 0 0 1.5px rgba(255,255,255,.9); pointer-events:none; z-index:2; }
/* per-cell: no border of its own — just the play highlight (the term folding in
   now is "active", terms already folded are "done"). */
.chm-rcell { position:absolute; box-sizing:border-box; transition:box-shadow .12s, background .12s; }
.chm-rcell.done { background:rgba(0,0,0,.16); }
.chm-rcell.active { background:rgba(0,0,0,.34); box-shadow:inset 0 0 0 1.5px #fff; z-index:3; }
/* fold-order number stamped inside each patch cell (white on a black chip so it
   survives any cell color). */
.chm-rnum { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-family:var(--mono); font-size:9px; font-weight:700; color:#fff; text-shadow:0 0 2px #000,0 0 2px #000,0 1px 1px #000; line-height:1; }
.chm-cap { margin-top:9px; font-size:10px; color:var(--muted); line-height:1.5; }
.chm-cap b { color:var(--accent2); font-weight:600; }
.chm-tip { position:fixed; z-index:9999; pointer-events:none; background:var(--panel); color:var(--text); border:1px solid var(--border2); border-radius:5px; padding:4px 8px; font-family:var(--mono); font-size:11px; box-shadow:0 4px 14px rgba(0,0,0,.18); display:none; white-space:nowrap; }
.chm-tip .ct-lbl { color:var(--muted); }
.chm-tip .ct-val { color:var(--c-data); font-weight:600; }
.chm-tip .ct-arr { color:var(--muted); margin:0 3px; }
/* Hover highlight: a soft accent band on the cell under the cursor (and its match
   on the other plane). Distinct from the solid black traced-cell ring. */
.chm-hov { position:absolute; box-sizing:border-box; border:2px solid var(--accent2); border-radius:1px; pointer-events:none; box-shadow:0 0 0 1px rgba(255,255,255,.85); display:none; z-index:1; }
/* Toolbar above the heatmaps: channel stepper on the left, magnifier toggle right. */
.chm-toolbar { display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:9px; flex-wrap:wrap; }
.chm-zoom-tog { display:inline-flex; align-items:center; gap:4px; font-family:var(--mono); font-size:10px; color:var(--muted); cursor:pointer; user-select:none; }
.chm-zoom-tog input { margin:0; cursor:pointer; }
/* Per-tensor colorbar under each heatmap: the exact blue→green→red scale the cells
   use, labelled with this plane's own min and max. */
.chm-bar { display:flex; align-items:center; gap:5px; margin-top:5px; font-family:var(--mono); font-size:8.5px; color:var(--muted); }
.chm-bar-grad { flex:1; height:7px; border-radius:2px; border:1px solid var(--border2); background:linear-gradient(90deg, rgb(0,0,255), rgb(0,255,0), rgb(255,0,0)); }
.chm-bar-end { white-space:nowrap; }
/* Gradient symbol (backward heatmap captions/labels). */
.sym-g { color:var(--c-grad); font-weight:600; }
.chm-cap2 .sym-g { color:var(--c-grad); }
/* Backward heatmap reads in the gradient color, not the data green. */
.compute-hm.chm-bwd .chm-cap2 .sym-y, .compute-hm.chm-bwd .chm-cap2 .sym-x { color:var(--c-grad); }
/* Channel stepper — same chrome as the ledger's line selector. */
.chm-chan { display:inline-flex; align-items:center; gap:5px; margin-bottom:9px; font-family:var(--mono); font-size:10px; color:var(--muted); }
.chm-chan-tag { text-transform:uppercase; letter-spacing:.4px; font-size:8.5px; color:var(--muted); }
.chm-chan .mvln-cur { color:var(--text); font-weight:600; min-width:1em; text-align:center; }
/* Linked hover loupes: two crisp magnifiers (input + output) side by side, so a
   single cell is readable on large images and you see the matching region on each. */
.chm-loupe { position:fixed; z-index:9999; pointer-events:none; display:none; align-items:center; gap:8px; padding:9px 11px; border:1px solid var(--border2); border-radius:8px; background:var(--panel); box-shadow:0 6px 18px rgba(0,0,0,.22); }
.chm-loupe .clp-unit { display:flex; flex-direction:column; align-items:center; gap:4px; }
.chm-loupe .clp-cap { font-family:var(--mono); font-size:9px; color:var(--muted); letter-spacing:.2px; }
.chm-loupe .clp-cvs { width:120px; height:120px; image-rendering:pixelated; image-rendering:crisp-edges; border:1px solid var(--border2); border-radius:4px; background:var(--bg); }
.chm-loupe .clp-arrow { color:var(--muted); font-size:14px; margin-top:14px; }

/* ── Source vectors: shows where x[k] and W[i,k] come from before the ledger ── */
.ldg-src { margin-bottom:11px; font-family:var(--mono); }
.ldg-src-head { font-size:9.5px; color:var(--muted); line-height:1.45; margin-bottom:7px; }
.ldg-src-row { display:grid; grid-template-columns:118px 1fr; gap:9px; align-items:baseline; padding:3px 0; font-size:11px; }
.ldg-src-lbl { color:var(--muted); line-height:1.3; }
.ldg-src-from { display:block; font-size:8px; opacity:.85; letter-spacing:.2px; }
.ldg-src-vals { white-space:nowrap; overflow-x:auto; padding-bottom:2px; }

/* Forward/Backward segmented toggle on the compute card */
.math-update { margin-bottom:20px; }

/* Phase rail — "you are here" map of Forward → Backward → Update, with the artifact
   handed between stages labelled and the current stage lit. Muted by default; only
   the artifacts carry role color. */
.phase-rail { margin:0 0 14px; padding:10px 12px; background:var(--panel2); border:1px solid var(--border2); border-radius:8px; }
/* flex-wrap so Forward/Backward/Update never get pushed off-screen at the
   default inspector width — they drop to a second row instead of clipping. */
.pr-track { display:flex; flex-wrap:wrap; align-items:stretch; gap:4px; }
.pr-node { flex:1 1 88px; min-width:0; display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 8px; border:1px solid var(--border2); border-radius:6px; background:var(--bg); text-align:center; opacity:.6; transition:all .12s; cursor:pointer; font:inherit; }
.pr-node .pr-name { font-family:var(--mono); font-size:11px; font-weight:600; color:var(--text); }
.pr-node .pr-desc { font-family:var(--mono); font-size:9px; color:var(--muted); white-space:normal; overflow-wrap:break-word; }
.pr-node:hover { opacity:.85; border-color:var(--accent); }
.pr-node.on { opacity:1; cursor:default; }
.pr-node.pr-fwd.on { border-color:var(--c-data); box-shadow:inset 0 0 0 1px var(--c-data); }
.pr-node.pr-bwd.on { border-color:var(--c-grad); box-shadow:inset 0 0 0 1px var(--c-grad); }
.pr-node.pr-upd.on { border-color:var(--c-weight); box-shadow:inset 0 0 0 1px var(--c-weight); }
.pr-link { flex:0 1 56px; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; padding:0 2px; }
.pr-link .pr-art { font-family:var(--mono); font-size:8.5px; line-height:1.2; white-space:normal; overflow-wrap:break-word; text-align:center; }
.pr-link .pr-tip { font-size:11px; color:var(--muted); line-height:1; }
.pr-ext { display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:8px; padding-top:8px; border-top:1px dashed var(--border2); font-family:var(--mono); font-size:9px; color:var(--muted); }
.pr-ext b { color:var(--text); font-weight:600; }
.art-data { color:var(--c-data); }
.art-grad { color:var(--c-grad); }
.art-weight { color:var(--c-weight); }
.art-none { color:var(--muted); }

/* Parameter-gradient worked block — shows ∂L/∂W, ∂L/∂b being built from real δ and x,
   so the values Update consumes are traceable back to here. */
.pgw { padding:10px 12px; background:var(--bg); border:1px solid var(--border2); border-radius:8px; }
.pgw-intro { font-family:var(--mono); font-size:10px; line-height:1.6; color:var(--muted); margin-bottom:7px; }
.pgw-line { font-family:var(--mono); font-size:11px; line-height:1.9; color:var(--text); word-break:break-word; }
.pgw-line .pgw-sym { color:var(--c-grad); font-weight:700; }
.pgw-line .pgw-val { color:var(--c-grad); font-weight:700; background:rgba(245,158,11,.10); padding:0 4px; border-radius:3px; }
.pgw-tie { margin-top:8px; padding-top:7px; border-top:1px dashed var(--border2); font-family:var(--mono); font-size:9.5px; color:var(--muted); }
.pgw-tie b { color:var(--c-weight); }

/* Notation key — a compact glossary so the symbols (θ, ∂L/∂θ, Δθ, θ′, …) aren't
   left unexplained. Muted card; the defined symbol is bold, the gloss is quiet. */
.notation-key { display:grid; grid-template-columns:1fr 1fr; gap:3px 18px; margin:0 0 14px; padding:10px 12px; background:var(--panel2); border:1px solid var(--border2); border-radius:8px; }
.notation-key .nk-title { grid-column:1 / -1; font-family:var(--mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:2px; }
.nk-item { font-family:var(--mono); font-size:10px; line-height:1.6; color:var(--muted); }
.nk-item b { color:var(--c-weight); font-weight:700; }
.nk-item em { color:var(--c-grad); font-style:normal; }
/* The gradient column header in the step table is what Backward fed in — tint it amber. */
.opt-table th.opt-gh { color:var(--c-grad); }
@media (max-width:560px) { .notation-key { grid-template-columns:1fr; } }

/* Loss trend — the visible payoff of Apply step → Run forward. */
.loss-trend { padding:10px 12px; background:var(--bg); border:1px solid var(--border2); border-radius:8px; }
.lt-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; }
.lt-now { font-family:var(--mono); font-size:12px; color:var(--text); }
.lt-now b { color:var(--c-loss); }
.lt-step { font-size:9px; color:var(--muted); }
.lt-delta { font-family:var(--mono); font-size:12px; font-weight:700; }
.lt-delta.lt-down { color:var(--c-data); }   /* loss fell — good — green */
.lt-delta.lt-up   { color:var(--c-loss); }   /* loss rose — red */
.lt-delta.lt-flat { color:var(--muted); }
.lt-msg { font-family:var(--mono); font-size:9.5px; color:var(--muted); }
.lt-spark { display:block; width:100%; height:44px; margin-top:8px; }
.lt-spark path { stroke-width:1.6; }
.lt-spark circle { fill:currentColor; }
.lt-spark.lt-good { color:var(--c-data); }
.lt-spark.lt-bad { color:var(--c-loss); }
.lt-spark path { stroke:currentColor; }
/* Backward accumulation is colored as gradient (amber), not data (green) */
.lc-acc.acc-grad, .lc-acc-h.acc-grad, .mviz-sum .acc.acc-grad { color:var(--c-grad); }

/* ── Vertical compute ledger — term per row, with a running Σ you watch build ── */
.ledger { border:1px solid var(--border); border-radius:6px; overflow:hidden; font-family:var(--mono); }
.ledger-scroll { max-height:300px; overflow-y:auto; }
.ldg-row { display:grid; align-items:center; gap:8px; padding:5px 10px; font-size:11px; border-top:1px solid var(--border); transition:background .12s,opacity .12s; }
.ldg-row:first-child { border-top:none; }
.ldg-reduce { grid-template-columns:56px 1fr 1fr 1fr 1.1fr; }
.ldg-reduce3 { grid-template-columns:56px 1fr 1.2fr; }
.ldg-map { grid-template-columns:28px 1fr 1.5fr; }
.ldg-row > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ldg-head { background:var(--panel2); color:var(--muted); font-size:8.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; position:sticky; top:0; z-index:1; }
.ldg-head .lc-acc-h { text-align:right; color:var(--c-data); }
.lc-k { color:var(--muted); text-align:center; }
.lc-p { color:var(--text); }
.lc-acc { text-align:right; font-weight:700; color:var(--c-data); }
.ldg-row.pending { opacity:.38; }
.ldg-row.pending .lc-acc { color:var(--muted); }
.ldg-row.active { background:var(--accent-tint2); box-shadow:inset 3px 0 0 var(--accent); opacity:1; }
.ldg-row.done { opacity:1; }
.ldg-row.ldg-out { border-top:1px solid var(--border2); background:rgba(34,211,160,.06); }
.ldg-row.ldg-out.active { background:rgba(34,211,160,.14); box-shadow:inset 3px 0 0 var(--c-data); }
.ldg-row.ldg-out .lc-k { color:var(--c-weight); font-weight:700; }
.ldg-more { padding:6px 10px; border-top:1px solid var(--border); font-size:9.5px; color:var(--muted); font-style:italic; }
.ldg-scalar { grid-template-columns:1fr auto; }
.ldg-scalar .lc-k { text-align:left; }

/* ── Attention: stage / head picker, and the softmax row as labelled bars ── */
.mv-attnnav { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.mv-attnrow { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.mvst-tag { font-family:var(--mono); font-size:8.5px; font-weight:700; letter-spacing:.5px;
  text-transform:uppercase; color:var(--muted); margin-right:2px; }
.mvst-btn { font-family:var(--mono); font-size:9.5px; line-height:1; padding:4px 8px; border-radius:4px;
  border:1px solid var(--border2); background:var(--panel2); color:var(--muted); cursor:pointer; transition:all .12s; }
.mvst-btn:hover { border-color:var(--accent); color:var(--accent2); }
.mvst-btn.on { border-color:var(--accent); background:var(--accent-tint2); color:var(--accent2); font-weight:700; }
.mvst-note { font-size:9px; color:var(--muted); font-style:italic; margin-left:4px; }

.attnbars { border:1px solid var(--border); border-radius:6px; padding:8px 10px; font-family:var(--mono); }
.attnbar-row { display:grid; grid-template-columns:minmax(60px,1.2fr) 3fr auto; align-items:center;
  gap:9px; padding:3px 0; font-size:11px; }
.attnbar-lbl { color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.attnbar-track { height:9px; background:var(--panel2); border-radius:3px; overflow:hidden; }
.attnbar-fill { display:block; height:100%; background:var(--c-data); border-radius:3px; transition:width .18s; }
.attnbar-val { text-align:right; }
.attnbar-sum { margin-top:7px; padding-top:7px; border-top:1px solid var(--border);
  font-size:10.5px; color:var(--muted); text-align:right; }

/* Backward equation block + shape-flow chip row */
.eq-grad { border-color:rgba(245,158,11,.3); }
.eq-grad .eq-main { color:var(--grad); white-space:pre-wrap; }
.shape-flow { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-family:var(--mono); font-size:11px; background:var(--bg); border:1px solid var(--border); border-radius:6px; padding:10px 12px; }
.shape-flow .sf-in { color:var(--c-shape); }
.shape-flow .sf-out { color:var(--c-shape); }   /* both are shapes — same hue */
.shape-flow .sf-op { color:var(--muted); font-size:10px; padding:1px 8px; border:1px solid var(--border2); border-radius:10px; }
.shape-flow .sf-op::before { content:'↓ '; }
/* Input mode ↔ example compatibility hint */
.input-hint { font-size:9px; line-height:1.55; color:var(--muted); margin-top:8px; padding-top:7px; border-top:1px dashed var(--border); }
.input-hint.warn { color:var(--grad); }
.input-hint.ok { color:var(--value); }
.input-hint b { color:var(--shape); font-weight:600; }
.imt.incompat { opacity:.5; }
.xtab-link b { color:var(--accent2); font-weight:500; }
/* Prediction / final-output banner */
.pred-banner {
  background:linear-gradient(90deg, rgba(34,211,160,.12), rgba(74,81,96,.08));
  border:1px solid rgba(34,211,160,.4); border-radius:6px; padding:10px 12px; margin-bottom:14px;
}
.pred-banner .pb-h { font-family:var(--mono); font-size:9px; letter-spacing:1px; text-transform:uppercase; color:var(--value); margin-bottom:4px; }
.pred-banner .pb-main { font-size:14px; color:var(--text); font-weight:500; }
.pred-banner .pb-main b { color:var(--value); }
.pred-banner .pb-sub { font-size:10.5px; color:var(--muted); margin-top:4px; line-height:1.5; }
/* Image heatmap canvas in inspector */
.img-canvas-wrap { position:relative; display:inline-block; }
.img-canvas-wrap canvas { image-rendering:pixelated; display:block; border-radius:3px; }
.img-canvas-label { font-family:var(--mono); font-size:9px; color:var(--muted); text-align:center; margin-top:3px; }
.feature-grid { display:flex; flex-wrap:wrap; gap:4px; }
/* Shape flow labels on connectors */
.node-connector { flex-direction:column; align-items:center; gap:1px; }
.shape-flow-label {
  font-family:var(--mono); font-size:9px; color:var(--shape);
  text-align:center; padding:1px 6px; opacity:.75; line-height:1.3;
  border:1px solid rgba(96,165,250,.2); border-radius:8px; background:rgba(96,165,250,.05);
}
.shape-flow-label .sf-tag { color:var(--grad); margin-left:4px; opacity:.9; }
/* Stage dividers — group layers into sequential stages (model chaining) */
.stage-header {
  display:flex; align-items:center; gap:8px; margin:10px 0 2px; padding:3px 2px;
  border-top:1px dashed var(--border2);
}
.stage-header:first-child { margin-top:2px; border-top:none; }
.stage-badge {
  font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.6px;
  padding:2px 8px; border-radius:10px; color:var(--accent2);
  background:var(--accent-tint2); border:1px solid var(--accent);
}
.stage-shape { font-family:var(--mono); font-size:9px; color:var(--shape); opacity:.85; }
/* Repeat-block modal */
.repeat-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; margin-bottom:12px; }
.rb-field { display:flex; flex-direction:column; gap:3px; }
.rb-field span { font-family:var(--mono); font-size:9px; color:var(--muted); letter-spacing:.3px; }
.rb-field select, .rb-field input {
  font-family:var(--mono); font-size:11px; background:var(--panel2); color:var(--text);
  border:1px solid var(--border2); border-radius:4px; padding:4px 6px; outline:none;
}
.rb-field select:focus, .rb-field input:focus { border-color:var(--accent); }
.rb-field input:disabled { opacity:.4; }
.repeat-summary { font-family:var(--mono); font-size:11px; color:var(--text); line-height:1.6; margin-bottom:6px; }
.repeat-summary .rb-dim { color:var(--shape); }
.repeat-note { font-size:11px; color:var(--muted); line-height:1.5; margin-bottom:10px; min-height:14px; }
.rb-check { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--text); margin-bottom:14px; cursor:pointer; }
/* Narrative panel */
.narrative-panel {
  margin-top:12px; padding:10px 12px;
  background:var(--accent-tint); border-left:2px solid var(--accent);
  border-radius:0 4px 4px 0; font-size:12px; line-height:1.75; color:var(--text);
}
/* Param doc trigger + popover */
.param-help {
  display:inline-flex; align-items:center; justify-content:center;
  width:13px; height:13px; border-radius:50%; border:1px solid var(--border2);
  color:var(--muted); font-size:9px; font-family:var(--mono); cursor:pointer; user-select:none;
}
.param-help:hover { border-color:var(--accent); color:var(--accent2); }
.param-popover {
  position:absolute; z-index:100; background:var(--panel);
  border:1px solid var(--accent); border-radius:6px; padding:10px 12px;
  width:260px; font-size:11px; line-height:1.65; box-shadow:0 8px 32px rgba(0,0,0,.4);
}
.param-popover .pp-title { font-family:var(--mono); font-weight:700; color:var(--accent2); font-size:12px; margin-bottom:5px; }
.param-popover .pp-what { color:var(--text); margin-bottom:7px; }
.param-popover .pp-row { margin-bottom:4px; color:var(--muted); }
.param-popover .pp-arrow { font-family:var(--mono); font-weight:600; margin-right:4px; }
.param-popover .pp-arrow.up { color:var(--value); }
.param-popover .pp-arrow.dn { color:var(--grad); }
.param-popover .pp-formula { margin-top:7px; padding-top:6px; border-top:1px solid var(--border); font-family:var(--mono); color:var(--shape); font-size:10px; word-break:break-word; }
.param-popover .pp-range { margin-top:4px; font-family:var(--mono); font-size:10px; color:var(--muted); }
/* Warning badge on nodes */
.node-warning {
  font-family:var(--mono); font-size:9px; padding:1px 6px; border-radius:3px;
  background:rgba(248,113,113,.12); border:1px solid rgba(248,113,113,.35);
  color:var(--error); cursor:pointer; margin-left:6px;
}
.node-warning:hover { background:rgba(248,113,113,.22); }

/* ── Phase 2: Import modal ─────────────────────── */
.modal-overlay {
  position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.6);
  display:none; align-items:center; justify-content:center;
}
.modal-overlay.open { display:flex; }
.modal {
  background:var(--panel); border:1px solid var(--border2); border-radius:8px;
  width:min(680px,92vw); max-height:88vh; display:flex; flex-direction:column;
  box-shadow:0 16px 64px rgba(0,0,0,.5);
}
.modal-head {
  display:flex; align-items:center; gap:10px; padding:12px 16px;
  border-bottom:1px solid var(--border);
}
.modal-head .modal-title { font-weight:600; font-size:14px; }
.modal-head .modal-sub { font-size:11px; color:var(--muted); }
.modal-head .modal-x {
  margin-left:auto; cursor:pointer; color:var(--muted); font-size:18px;
  background:none; border:none; line-height:1;
}
.modal-head .modal-x:hover { color:var(--text); }
.modal-body { padding:14px 16px; overflow:auto; }
.import-textarea {
  width:100%; height:240px; resize:vertical; background:var(--bg);
  border:1px solid var(--border2); border-radius:6px; color:var(--text);
  font-family:var(--mono); font-size:12px; line-height:1.6; padding:10px 12px;
  white-space:pre; overflow:auto; tab-size:4;
}
.import-textarea:focus { outline:none; border-color:var(--accent); }
.import-foot { display:flex; align-items:center; gap:10px; margin-top:12px; }
.import-error {
  color:var(--error); font-family:var(--mono); font-size:11px; flex:1;
  white-space:pre-wrap;
}
.import-warn-banner {
  background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.35);
  color:var(--grad); border-radius:6px; padding:8px 12px; margin:8px 16px 0;
  font-family:var(--mono); font-size:11px; line-height:1.6; white-space:pre-wrap;
}
.import-hint {
  font-size:11px; color:var(--muted); line-height:1.6; margin-bottom:10px;
}
.import-hint code { font-family:var(--mono); color:var(--accent2); }

/* ── Phase 2: Changelog panel ──────────────────── */
.changelog-panel { border-top:1px solid var(--border); margin-top:auto; flex-shrink:0; }
.changelog-header {
  display:flex; align-items:center; gap:6px; padding:8px 12px; cursor:pointer;
  font-family:var(--mono); font-size:10px; letter-spacing:.06em;
  color:var(--muted); text-transform:uppercase; user-select:none;
}
.changelog-header:hover { color:var(--text); }
.changelog-header .cl-caret { transition:transform .15s; }
.changelog-header.open .cl-caret { transform:rotate(180deg); }
.changelog-count {
  margin-left:auto; font-size:9px; color:var(--muted);
  background:var(--panel2); border-radius:8px; padding:1px 7px;
}
.changelog-list { max-height:200px; overflow:auto; padding:0 8px 8px; }
.cl-entry {
  display:flex; align-items:baseline; gap:8px; padding:4px 6px; border-radius:4px;
  cursor:pointer; font-family:var(--mono); font-size:10px; line-height:1.5;
}
.cl-entry:hover { background:var(--panel2); }
.cl-entry .cl-ts { color:var(--muted); flex-shrink:0; }
.cl-entry .cl-label { color:var(--text); }
.cl-entry .cl-icon { flex-shrink:0; }
.cl-empty { padding:8px 6px; font-size:10px; color:var(--muted); font-family:var(--mono); }

/* ── Phase 2: Spatial viewer ───────────────────── */
.spatial-grid { display:flex; flex-wrap:wrap; gap:10px; }
.spatial-tile {
  background:var(--bg); border:1px solid var(--border); border-radius:5px;
  padding:6px; display:flex; flex-direction:column; gap:4px; cursor:pointer;
}
.spatial-tile:hover { border-color:var(--accent); }
.spatial-tile canvas { image-rendering:pixelated; border-radius:3px; align-self:center; }
.spatial-tile .st-head {
  font-family:var(--mono); font-size:9px; color:var(--shape);
  display:flex; justify-content:space-between; gap:6px;
}
.spatial-tile .st-stats {
  font-family:var(--mono); font-size:8.5px; color:var(--muted); line-height:1.4;
}
.spatial-tile .st-stats b { color:var(--value); font-weight:500; }
.spatial-tile .st-hist { display:flex; align-items:flex-end; gap:1px; height:18px; }
.spatial-tile .st-hist .hb { flex:1; background:var(--accent); min-height:1px; opacity:.65; border-radius:1px 1px 0 0; }
.spatial-tile .st-flat { font-family:var(--mono); font-size:8px; color:var(--grad); }

/* ── Colormap legend (what the colors mean) ────── */
.cmap-legend { margin:4px 0 8px; }
.cmap-bar {
  height:9px; border-radius:3px; border:1px solid var(--border2);
  background:linear-gradient(to right, rgb(0,0,255) 0%, rgb(0,255,0) 50%, rgb(255,0,0) 100%);
}
.cmap-scale {
  display:flex; justify-content:space-between; font-family:var(--mono);
  font-size:8.5px; color:var(--muted); margin-top:2px;
}
.cmap-note {
  font-size:10px; color:var(--muted); line-height:1.5; margin-top:4px;
}
.cmap-note b { color:var(--shape); font-weight:500; }
.zoom-hint { font-family:var(--mono); font-size:9px; color:var(--accent2); opacity:.85; }

/* ── Heatmap tiles for non-spatial tensors (Linear vectors / weight matrices) ── */
.heat-row { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-start; }
.heat-tile {
  background:var(--bg); border:1px solid var(--border); border-radius:5px;
  padding:6px; display:flex; flex-direction:column; gap:4px; cursor:pointer; max-width:100%;
}
.heat-tile:hover { border-color:var(--accent); }
.heat-tile canvas { image-rendering:pixelated; border-radius:3px; max-width:100%; }
.heat-tile .ht-head { font-family:var(--mono); font-size:9px; color:var(--shape); }
.heat-tile .ht-sub  { font-family:var(--mono); font-size:8.5px; color:var(--muted); }

/* ── Zoom lightbox (make any heatmap bigger) ───── */
.modal.zoom { width:auto; max-width:94vw; }
.zoom-canvas-wrap {
  display:flex; justify-content:center; align-items:center; background:var(--bg);
  border:1px solid var(--border); border-radius:6px; padding:10px;
}
.zoom-canvas-wrap canvas { image-rendering:pixelated; border-radius:4px; max-width:86vw; max-height:62vh; }
.zoom-meta { font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:10px; line-height:1.6; }
.zoom-meta b { color:var(--value); font-weight:500; }

/* ── Layer walkthrough lightbox (enlarge + step through the pipeline) ── */
.modal.walk { width:min(820px,94vw); }
.walk-grid { display:grid; grid-template-columns:minmax(220px,360px) 1fr; gap:18px; align-items:start; }
.walk-canvas-wrap {
  display:flex; justify-content:center; align-items:center; background:var(--bg);
  border:1px solid var(--border); border-radius:6px; padding:10px; min-height:200px;
}
.walk-canvas-wrap canvas { image-rendering:pixelated; border-radius:4px; max-width:100%; max-height:46vh; }
.walk-concept { font-size:12.5px; line-height:1.65; }
.walk-concept .wc-is { color:var(--text); font-size:13.5px; margin-bottom:10px; }
.walk-concept .wc-block { margin-bottom:10px; }
.walk-concept .wc-h {
  font-family:var(--mono); font-size:9px; letter-spacing:1px; text-transform:uppercase;
  color:var(--accent2); margin-bottom:2px;
}
.walk-concept .wc-body { color:var(--muted); }
.walk-concept .wc-body b { color:var(--shape); font-weight:500; }
.walk-nav { display:flex; align-items:center; gap:12px; justify-content:center; margin-top:16px; }
.walk-nav .walk-count { font-family:var(--mono); font-size:11px; color:var(--muted); min-width:120px; text-align:center; }
.walk-nav .btn:disabled { opacity:.35; cursor:default; }
@media (max-width:680px) { .walk-grid { grid-template-columns:1fr; } }

/* ── Toolbar dropdown menus (Compare / More) ── */
.tool-menu-wrap { position:relative; display:inline-flex; }
.tool-menu-wrap .btn.active-mode { border-color:var(--value); color:var(--value); }
.tool-menu { position:absolute; top:100%; right:0; margin-top:4px; min-width:170px; display:none; flex-direction:column; padding:4px; gap:1px; background:var(--panel); border:1px solid var(--border2); border-radius:6px; box-shadow:0 8px 22px rgba(0,0,0,.22); z-index:120; }
.tool-menu.open { display:flex; }
.tool-menu .tm-item { font-family:var(--mono); font-size:11px; text-align:left; padding:6px 9px; border:none; border-radius:4px; background:transparent; color:var(--text); cursor:pointer; white-space:nowrap; }
.tool-menu .tm-item:hover { background:var(--panel2); color:var(--accent2); }
.tool-menu .tm-item.run { color:var(--value); font-weight:600; }
.tool-menu .tm-sub { font-family:var(--mono); font-size:8.5px; letter-spacing:.4px; text-transform:uppercase; color:var(--muted); padding:6px 9px 2px; border-top:1px solid var(--border2); margin-top:2px; }
.tool-menu .tm-item + .tm-sub { margin-top:2px; }

/* ── Phase 3: comparison mode ── */
.quick-compare { font-family:var(--mono); font-size:10px; background:var(--panel2); color:var(--text); border:1px solid var(--border2); border-radius:3px; padding:3px 4px; cursor:pointer; }
.preset-select { font-family:var(--mono); font-size:11px; background:transparent; color:var(--text); border:1px solid var(--border2); border-radius:4px; padding:5px 8px; cursor:pointer; }
.preset-select:hover { border-color:var(--accent); color:var(--accent2); }
.preset-select optgroup, .preset-select option { background:var(--panel); color:var(--text); }
.compare-wrap { display:flex; gap:0; min-height:100%; }
.compare-col { flex:1; min-width:0; display:flex; flex-direction:column; padding:0 10px; }
.compare-col.slot-a { border-right:1px solid var(--border2); }
.compare-col-head { font-family:var(--mono); font-size:9px; letter-spacing:1px; font-weight:600; padding:3px 0 8px; position:sticky; top:0; }
.compare-col.slot-a .compare-col-head { color:var(--accent); }
.compare-col.slot-b .compare-col-head { color:var(--value); }
.compare-col.slot-a .drop-zone { border-left:2px solid rgba(74,81,96,.45); padding-left:8px; }
.compare-col.slot-b .drop-zone { border-left:2px solid rgba(34,211,160,.4); padding-left:8px; }

/* Live parameter shape preview */
.param-preview { font-family:var(--mono); font-size:9px; color:var(--muted); padding:2px 8px 5px; line-height:1.5; }
.param-preview .pp-old { color:var(--muted); }
.param-preview .pp-new { color:var(--shape); }
.param-preview .pp-new.pp-chg { color:var(--grad); font-weight:600; }
.param-preview .pp-muted { color:var(--muted); opacity:.7; }

/* Comparison inspector */
.cmp-banner { display:flex; align-items:center; gap:4px; font-family:var(--mono); font-size:10px; font-weight:600; padding:4px 0 8px; color:var(--text); flex-wrap:wrap; }
.cmp-banner .cmp-layer { color:var(--muted); font-weight:400; margin-left:6px; }
.cmp-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.cmp-dot.a { background:var(--accent); }
.cmp-dot.b { background:var(--value); }
.cmp-paramdiff { font-family:var(--mono); font-size:10px; color:var(--grad); background:rgba(248,191,113,.08); border-left:2px solid var(--grad); padding:4px 8px; border-radius:0 3px 3px 0; margin-bottom:8px; }
.cmp-table { width:100%; border-collapse:collapse; font-family:var(--mono); font-size:10px; }
.cmp-table th { text-align:right; color:var(--muted); font-weight:500; padding:3px 8px; border-bottom:1px solid var(--border2); }
.cmp-table th:first-child { text-align:left; }
.cmp-table td { text-align:right; padding:3px 8px; border-bottom:1px solid var(--border); }
.cmp-table td.cmp-k { text-align:left; color:var(--muted); }
.cmp-table td.cmp-d { color:var(--shape); }
.cmp-table tr.cmp-hi td.cmp-d { color:var(--grad); font-weight:600; }
.cmp-table tr.cmp-hi { background:rgba(248,191,113,.06); }
.cmp-cols { display:flex; gap:8px; margin-top:8px; }
.cmp-cols .cmp-col { flex:1; min-width:0; }
.cmp-cols .cmp-col-a .insp-label { color:var(--accent); }
.cmp-cols .cmp-col-b .insp-label { color:var(--value); }

/* ── Phase 4: advanced views ── */
/* Gradient-flow heatmap (∇FLOW tab) */
.gf-chart { display:flex; flex-direction:column; gap:5px; margin-top:4px; }
.gf-row { display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:10px; }
.gf-name { width:84px; flex-shrink:0; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gf-track { flex:1; height:12px; background:var(--bg); border:1px solid var(--border); border-radius:3px; overflow:hidden; }
.gf-bar { height:100%; background:linear-gradient(90deg,var(--accent),var(--value)); border-radius:2px 0 0 2px; }
.gf-bar.gf-vanish { background:var(--grad); }
.gf-bar.gf-explode { background:var(--error); }
.gf-val { width:64px; flex-shrink:0; text-align:right; color:var(--muted); }
.gf-legend { font-family:var(--mono); font-size:9px; color:var(--muted); margin-top:8px; line-height:1.5; }
.gf-legend .gf-vanish-t { color:var(--grad); }

/* Activation distribution (input → output overlap) */
.dh-key { float:right; font-family:var(--mono); font-size:9px; color:var(--muted); font-weight:400; }
.dh-key i { display:inline-block; width:8px; height:8px; border-radius:2px; margin:0 3px 0 8px; vertical-align:middle; }
/* input & output are both DATA (green); the lighter fill is the input. */
i.dh-in, .dh-col .dh-in { background:var(--c-data); }
i.dh-in { opacity:.5; }
i.dh-out, .dh-col .dh-out { background:var(--c-data); }
.dh-chart { display:flex; align-items:flex-end; gap:2px; height:64px; padding:4px 2px 0; background:var(--bg); border:1px solid var(--border); border-radius:4px; }
.dh-col { position:relative; flex:1; height:100%; display:flex; align-items:flex-end; }
.dh-col .dh-in { position:absolute; bottom:0; left:0; right:0; opacity:.45; border-radius:1px 1px 0 0; }
.dh-col .dh-out { position:absolute; bottom:0; left:25%; right:25%; opacity:.85; border-radius:1px 1px 0 0; }
.dh-axis { display:flex; justify-content:space-between; font-family:var(--mono); font-size:9px; color:var(--muted); margin-top:2px; }

/* Receptive-field visualizer */
.rf-head { font-family:var(--mono); font-size:10px; color:var(--text); line-height:1.6; }
.rf-head b { color:var(--shape); }
.rf-wrap { display:flex; gap:12px; align-items:flex-start; margin-top:6px; }
.rf-wrap canvas { image-rendering:pixelated; border:1px solid var(--border); border-radius:3px; }
.rf-note { font-family:var(--mono); font-size:9px; color:var(--muted); line-height:1.6; }

/* Spatial-view clarity (input → output labelling) */
.spatial-caption { font-size:10.5px; line-height:1.6; color:var(--muted); margin-bottom:10px; }
.spatial-caption code { font-family:var(--mono); background:var(--bg); padding:0 3px; border-radius:3px; color:var(--shape); }
.spatial-caption b { color:var(--text); font-weight:600; }
.spatial-block { margin-bottom:12px; }
.spatial-sub { font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.5px; margin-bottom:6px; }
.sc-in  { color:var(--shape); }
.sc-out { color:var(--value); }
.spatial-caption .sc-in, .spatial-caption .sc-out { font-weight:700; }

/* Node move-handle + duplicate controls */
.node-grip { cursor:grab; color:var(--muted); font-size:12px; line-height:1; flex-shrink:0; user-select:none; }
.node-grip:hover { color:var(--text); }
.node-grip:active { cursor:grabbing; }
.node-dup { background:none; border:none; color:var(--muted); cursor:pointer; font-size:13px; padding:0 2px; line-height:1; transition:color .15s; }
.node-dup:hover { color:var(--accent); }
.net-node.drop-target { border-color:var(--accent); box-shadow:0 -2px 0 var(--accent); }

/* Residual / skip connections */
.net-node.on-skip { box-shadow:inset 3px 0 0 var(--grad); }
.net-node.on-skip.active { box-shadow:inset 3px 0 0 var(--grad),0 0 0 1px var(--accent),0 4px 20px var(--accent-glow); }
.skip-badge { font-family:var(--mono); font-size:9px; padding:2px 7px; border-radius:10px; background:rgba(245,158,11,.12); color:var(--grad); border:1px solid rgba(245,158,11,.35); white-space:nowrap; }
.skip-badge.src { margin-left:auto; background:rgba(245,158,11,.06); }

/* Trace view: layer position + provenance signpost */
.trace-pos { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:7px 9px; margin-bottom:8px;
  border:1px solid var(--border2); border-radius:6px; background:var(--panel2); font-family:var(--mono); font-size:10px; }
.tp-step { color:var(--muted); font-weight:600; letter-spacing:.5px; }
.tp-type { color:var(--text); font-weight:700; }
.tp-flow { margin-left:auto; color:var(--muted); }
.tp-flow b { color:var(--text); font-weight:600; }   /* layer names, not shapes */
.tp-prov { font-family:var(--mono); font-size:9px; color:var(--muted); font-weight:400; margin-left:4px; }
/* Layer-category chip: the ONE place a function color appears in the inspector,
   shown as a dot + name so it reads as "category", never as a math value. */
.tp-cat { display:inline-flex; align-items:center; gap:5px; font-weight:700; color:var(--cat,var(--accent2)); }
.tp-cat i { width:8px; height:8px; border-radius:50%; background:var(--cat,var(--accent2)); flex-shrink:0; }

/* ── Color key: teaches the one-hue-per-role language, pinned atop the trace ── */
.trace-legend { display:flex; flex-wrap:wrap; gap:6px 14px; padding:7px 10px; margin-bottom:10px;
  border:1px solid var(--border); border-radius:6px; background:var(--bg);
  font-family:var(--mono); font-size:9.5px; color:var(--muted); }
.tl-item { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.tl-dot { width:9px; height:9px; border-radius:2px; flex-shrink:0; }
.tl-dot.d-shape  { background:var(--c-shape); }
.tl-dot.d-data   { background:var(--c-data); }
.tl-dot.d-weight { background:var(--c-weight); }
.tl-dot.d-grad   { background:var(--c-grad); }

/* ── Collapsible trace phases: tame "a lot is happening" into foldable groups ── */
.tphase { border:1px solid var(--border); border-radius:7px; margin-bottom:12px; overflow:hidden; background:var(--panel); }
.tphase-head { display:flex; align-items:center; gap:8px; padding:9px 11px; cursor:pointer; user-select:none;
  border-left:3px solid var(--acc,var(--border2)); transition:background .12s; }
.tphase-head:hover { background:var(--panel2); }
.tphase-caret { font-size:9px; color:var(--muted); transition:transform .15s; flex-shrink:0; }
.tphase.collapsed .tphase-caret { transform:rotate(-90deg); }
.tphase-title { font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--text); }
.tphase-sub { font-family:var(--mono); font-size:9px; color:var(--muted); margin-left:auto; font-weight:400; letter-spacing:.3px; }
.tphase-body { padding:12px 12px 4px; border-top:1px solid var(--border); }
.tphase.collapsed .tphase-body { display:none; }
.tphase-body > .insp-section:last-child { margin-bottom:8px; }
/* The walkthrough rail — one continuous thread from input to output. Each beat
   sits on the rail with a node dot tinted by the DATA ROLE it concerns (green =
   activations, amber = gradient, purple = weight update), so the layer's story
   reads as a single colored sequence rather than a stack of separate cards. */
.walkthrough { position:relative; margin:2px 0 4px; padding-left:18px; }
.walkthrough::before { content:''; position:absolute; left:5px; top:12px; bottom:12px; width:2px; background:var(--border2); border-radius:2px; }
.walkthrough .tphase::before { content:''; position:absolute; left:-15px; top:12px; width:9px; height:9px; border-radius:50%;
  background:var(--panel); border:2px solid var(--acc,var(--border2)); box-shadow:0 0 0 3px var(--panel); }
.walkthrough .tphase { position:relative; }
/* Model tab header */
.model-head { margin-bottom:14px; }
.mh-title { font-family:var(--mono); font-size:13px; font-weight:700; color:var(--text); letter-spacing:.3px; }
.mh-sub { display:block; font-size:11px; color:var(--muted); margin-top:3px; line-height:1.5; }
/* Update beat lead-in */
.update-lead { font-size:12px; line-height:1.7; color:var(--text); margin-bottom:10px; }
.update-stale { font-size:12px; line-height:1.6; color:var(--text); margin-bottom:12px; padding:9px 12px; background:rgba(124,106,247,.08); border:1px solid rgba(124,106,247,.35); border-radius:8px; }

/* Network filmstrip: a category dot per stage, so the whole flow reads by function */
.flow-cell .fc-dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:5px; vertical-align:middle; flex-shrink:0; }

/* ── OPTIM tab: optimizer config + per-layer weight-update step ── */
.opt-controls { display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end; }
.opt-select { font-family:var(--mono); font-size:11px; background:var(--panel2); color:var(--text);
  border:1px solid var(--border2); border-radius:4px; padding:4px 6px; }
.opt-hp { display:flex; flex-direction:column; gap:2px; }
.opt-hp > span { font-family:var(--mono); font-size:9px; color:var(--muted); }
.opt-hp-in { width:62px; font-family:var(--mono); font-size:11px; background:var(--bg); color:var(--text);
  border:1px solid var(--border); border-radius:4px; padding:3px 5px; }
.opt-hp-in:focus { outline:none; border-color:var(--accent); }
.opt-table { width:100%; border-collapse:collapse; font-family:var(--mono); font-size:10px; margin-top:4px; }
.opt-table th { text-align:right; color:var(--muted); font-weight:500; padding:3px 7px; border-bottom:1px solid var(--border2); }
.opt-table th:first-child { text-align:left; }
.opt-table td { text-align:right; padding:3px 7px; border-bottom:1px solid var(--border); }
.opt-table td.opt-i { text-align:left; color:var(--muted); }
.opt-table td.opt-d { color:var(--grad); font-weight:600; }
.opt-table td.opt-d.neg { color:var(--accent); }
.opt-more { font-family:var(--mono); font-size:9px; color:var(--muted); margin-top:4px; }
.opt-actions { display:flex; gap:8px; margin:12px 0 4px; }

/* TRAIN view */
.train-view { padding: 4px 2px; }
.dataset-card { background: var(--panel2); border-left: 2px solid var(--accent); border-radius: 0 6px 6px 0; padding: 10px 12px; margin-bottom: 12px; }
.dc-head { display: flex; align-items: center; justify-content: space-between; }
.dc-name { font-weight: 600; }
.dc-desc { font-size: 12px; color: var(--text); opacity: 0.85; margin: 4px 0 8px; line-height: 1.6; }
.dc-meta { display: flex; gap: 12px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; color: var(--shape); }
.btn-mini { font-size: 11px; padding: 2px 8px; }
.train-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.train-curve { margin-top: 4px; }
.tc-status { font-family: var(--mono); font-size: 12px; margin-bottom: 6px; }
.tc-svg { width: 100%; height: 120px; display: block; }
.tc-loss { stroke: var(--accent); stroke-width: 1.6; }
.tc-acc { stroke: var(--value); stroke-width: 1.2; stroke-dasharray: 3 3; }
.tc-legend { display: flex; gap: 14px; font-size: 11px; margin-top: 4px; }
.tc-k::before { content: '—'; margin-right: 4px; }
.tc-k-loss { color: var(--accent); }
.tc-k-acc { color: var(--value); }
.train-narrative { font-size: 12px; line-height: 1.7; margin-top: 8px; color: var(--text); }

/* TRAIN view — curve marker, scrubber, step detail, batch preview */
.tc-mark { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 2; opacity: 0.7; }
.tc-dot { fill: var(--accent2); }
.tc-live { color: var(--value); font-weight: 600; }
.train-scrub { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; }
.scrub-range { flex: 1; accent-color: var(--accent); height: 3px; cursor: pointer; }
.scrub-label { font-family: var(--mono); font-size: 10px; color: var(--muted); white-space: nowrap; }
.scrub-live { font-family: var(--mono); font-size: 10px; margin-left: 6px; padding: 1px 6px; border: 1px solid var(--border2); border-radius: 3px; background: transparent; color: var(--value); cursor: pointer; }
.scrub-live:hover { border-color: var(--value); }
.step-detail { background: var(--panel2); border-radius: 6px; padding: 10px 12px; margin-top: 10px; }
.sd-head { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.sd-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.sd-table td { padding: 3px 4px; vertical-align: top; }
.sd-k { font-family: var(--mono); color: var(--shape); white-space: nowrap; }
.sd-v { font-family: var(--mono); font-weight: 600; white-space: nowrap; }
.sd-note { color: var(--muted); font-size: 11px; line-height: 1.5; }
.sd-delta { font-family: var(--mono); font-size: 11px; margin-left: 4px; }
.sd-delta.neg { color: var(--value); }
.sd-delta.pos { color: var(--grad); }
.sd-why { font-size: 11px; line-height: 1.6; color: var(--text); opacity: 0.9; margin-top: 8px; }
.batch-preview { margin-top: 12px; }
.bp-head { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-bottom: 8px; }
.bp-sub { opacity: 0.8; }
.bp-svg { width: 100%; max-width: 240px; height: auto; background: var(--panel2); border-radius: 4px; }
.bp-legend { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; font-size: 11px; }
.bp-k { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); color: var(--muted); }
.bp-sw { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.bp-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.bp-chip { font-family: var(--mono); font-size: 11px; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid; border-radius: 4px; }
.bp-tiles { display: flex; flex-wrap: wrap; gap: 8px; }
.bp-tile { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bp-tile svg { border-radius: 2px; background: var(--panel2); }
.bp-tlabel { font-family: var(--mono); font-size: 10px; font-weight: 600; }
.bp-bars { display: flex; align-items: flex-end; gap: 4px; height: 60px; }
.bp-bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.bp-bar span { width: 14px; background: var(--accent); border-radius: 2px 2px 0 0; display: block; }
.bp-bar i { font-family: var(--mono); font-size: 9px; color: var(--muted); font-style: normal; margin-top: 2px; }
.bp-reg { border-collapse: collapse; font-family: var(--mono); font-size: 11px; }
.bp-reg td { padding: 2px 6px; text-align: right; color: var(--text); }
.bp-note { font-size: 10px; color: var(--muted); margin-top: 6px; line-height: 1.5; }

/* TRAIN batch preview — input/output sections */
.bp-section { margin-top: 10px; }
.bp-label { font-family: var(--mono); font-size: 10px; color: var(--accent); margin-bottom: 6px; opacity: 0.9; }
.bp-preds { display: flex; flex-wrap: wrap; gap: 6px; }
.bp-pred { display: inline-flex; flex-direction: column; align-items: center; min-width: 34px; padding: 3px 5px; border: 1px solid var(--border2); border-radius: 4px; font-family: var(--mono); }
.bp-pred.ok { border-color: color-mix(in srgb, var(--value) 45%, transparent); }
.bp-pred.bad { border-color: color-mix(in srgb, var(--error) 45%, transparent); }
.bp-pred b { font-size: 13px; line-height: 1.1; }
.bp-pred i { font-size: 9px; color: var(--muted); font-style: normal; }
.bp-pred em { font-size: 9px; font-style: normal; color: var(--muted); }
.bp-pred.ok em { color: var(--value); }
.bp-pred.bad em { color: var(--error); }

.filmstrip { margin-top: 12px; border: 1px solid var(--border, #d8d8e0); border-radius: 8px; padding: 10px; }
.film-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 600; margin-bottom: 8px; }
.film-pick { font-weight: 400; font-size: 11px; }
.film-pick select { font: inherit; padding: 1px 4px; }
.film-track { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.film-frame { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.film-map svg { display: block; border-radius: 3px; }
.film-nomap { width: 54px; height: 54px; display: grid; place-items: center; color: #999; }
.film-pred { font-size: 11px; line-height: 1.2; text-align: center; }
.film-pred i { font-style: normal; opacity: .7; }
.film-step { font-size: 10px; opacity: .6; }
.film-cap { margin-top: 6px; font-size: 10px; opacity: .65; }
.film-tools { display: flex; align-items: center; gap: 12px; font-weight: 400; }
.film-size { font-size: 11px; display: inline-flex; align-items: center; gap: 3px; }
.film-size .btn.on { background: var(--accent2, #6a7ba2); color: #fff; }
.film-frame.key .film-map svg { outline: 2px solid var(--accent2, #6a7ba2); outline-offset: 1px; }
.film-frame.key .film-step { font-weight: 700; opacity: .9; color: var(--accent2, #6a7ba2); }
.film-sample { margin: 4px 0 10px; padding: 8px; border-radius: 6px; background: var(--panel-2, rgba(0,0,0,.03)); }
.fs-label { font-size: 11px; font-weight: 600; margin-bottom: 5px; }
.fs-img { display: block; border-radius: 4px; image-rendering: pixelated; }
.fs-note { font-size: 10px; opacity: .6; margin-top: 4px; }
.of-hint { font-size: 10px; opacity: .6; align-self: center; }
.film-probe { width: 46px; }
.dc-derive { font-size: 11px; line-height: 1.6; color: var(--muted); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.dc-derive b { color: var(--accent2); }
.dc-add { display: inline-flex; gap: 6px; margin-left: 4px; }
.train-imgnote { font-size: 11px; line-height: 1.6; color: var(--text); opacity: 0.9; background: var(--panel2); border-radius: 6px; padding: 9px 11px; margin-bottom: 12px; }
.train-imgnote b { color: var(--accent2); }
.train-autoloss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 11px; line-height: 1.55; color: var(--text); background: color-mix(in srgb, var(--c-grad) 10%, var(--panel2));
  border: 1px solid color-mix(in srgb, var(--c-grad) 35%, var(--border)); border-radius: 6px; padding: 9px 11px; margin-bottom: 12px; }
.train-autoloss .al-msg { flex: 1 1 220px; }
.train-autoloss .al-msg b { color: var(--accent2); }
.train-autoloss .al-actions { display: inline-flex; gap: 6px; flex-shrink: 0; }
.train-epoch-note { margin-top: 2px; margin-bottom: 10px; }
.of-row { margin-top: -4px; }
.of-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text); cursor: pointer; }
.of-toggle input { accent-color: var(--accent); cursor: pointer; }

/* ── Attention maps: one S×S matrix per head, shared 0..1 color scale ── */
.am-wrap { display:grid; gap:14px; margin-top:10px; }
.am-cell-wrap { border:1px solid var(--border); border-radius:6px; padding:9px 10px; background:var(--panel2); min-width:0; }
.am-head { font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.5px;
  text-transform:uppercase; color:var(--muted); margin-bottom:7px; }
.am-grid { display:flex; flex-direction:column; gap:2px; font-family:var(--mono); }
.am-row { display:grid; grid-template-columns:minmax(34px,52px) 1fr; align-items:center; gap:6px; }
.am-rlbl { font-size:9px; color:var(--muted); text-align:right; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.am-cells { display:grid; gap:2px; }
.am-cell { display:block; aspect-ratio:1; border-radius:2px; cursor:help; }
.am-clbl { font-size:8px; color:var(--muted); text-align:center; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.am-note { font-size:9.5px; color:var(--muted); font-style:italic; margin-bottom:6px; }
.am-caption { margin-top:10px; font-size:10.5px; color:var(--muted); line-height:1.5; }