/* Scoped neural-network plot. Charcoal/gold reference in dark mode;
   warm paper/ochre in light mode. No outer card. */
.nn-chart {
  --nn-surface:#20201f; --nn-gold:#d7bc6e; --nn-text:#eeeae1;
  --nn-muted:#aca99f; --nn-border:#ffffff18; --nn-font:Roboto,sans-serif;
  --nn-xs:12px; --nn-sm:13px; --nn-md:16px;
  --nn-space-1:4px; --nn-space-2:8px; --nn-space-3:12px; --nn-space-4:16px;
  position:relative; display:flex; flex-direction:column; width:100%; height:100%;
  min-width:0; min-height:0; color:var(--nn-text); background:var(--nn-surface);
  font:400 var(--nn-xs)/1.4 var(--nn-font); overflow:hidden;
  color-scheme:dark; isolation:isolate; text-align:left;
}
.nn-chart *, .nn-chart *::before, .nn-chart *::after {box-sizing:border-box;}
.nn-chart button, .nn-chart select {font-family:var(--nn-font);}
.nn-toolbar {flex:none; display:flex; align-items:center; justify-content:space-between; gap:var(--nn-space-3); padding:var(--nn-space-3) var(--nn-space-4) var(--nn-space-1);}
.nn-architecture {color:var(--nn-gold); font-size:var(--nn-sm); letter-spacing:2px; font-variant-numeric:tabular-nums;}
.nn-meta {color:var(--nn-muted); font-size:var(--nn-xs);}
.nn-stage {position:relative; flex:1 1 auto; min-height:0; min-width:0; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#666155 var(--nn-surface);}
.nn-plot {position:relative; min-width:100%;}
.nn-canvas {position:absolute; inset:0; display:block; max-width:none; pointer-events:none;}
.nn-overlay {position:absolute; inset:0; pointer-events:none;}
/* Layer captions: a quiet uppercase eyebrow over a hairline tick, so the
   column headings never compete with the wiring underneath. */
.nn-layer {position:absolute; transform:translateX(-50%); text-align:center; line-height:1.25; font-size:var(--nn-xs); pointer-events:none;}
.nn-layer-name {display:block; color:var(--nn-gold); font-weight:600; font-size:10px; letter-spacing:.7px; text-transform:uppercase;}
.nn-layer-count {display:block; color:var(--nn-muted); margin-top:2px; font-size:10px; font-variant-numeric:tabular-nums;}
.nn-layer::after {content:'';display:block;width:26px;height:0;border-top:1px solid #d7bc6e59;margin:var(--nn-space-2) auto 0;}
.nn-node {position:absolute; transform:translate(-50%,-50%); width:44px; height:44px; padding:0; margin:0; border:0; background:transparent; color:var(--nn-text); pointer-events:auto; cursor:pointer; border-radius:50%; outline-offset:3px;}
.nn-disc {position:absolute; inset:3px; display:flex; align-items:center; justify-content:center; border:1.5px solid var(--nn-gold); background:var(--nn-surface); border-radius:50%; font-size:var(--nn-xs); font-weight:500; font-variant-numeric:tabular-nums; letter-spacing:-.5px; outline-offset:1px; transition:border-color 140ms,box-shadow 140ms,outline-color 140ms,filter 140ms;}
.nn-node-name {position:absolute; display:block; top:44px; left:50%; transform:translateX(-50%); max-width:72px; color:var(--nn-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--nn-xs); line-height:12px; font-weight:400; letter-spacing:.1px;}
/* Hover and selection use outline rings so they compose with the inline
   activation glow instead of overwriting it. */
.nn-node:hover .nn-disc {outline:2px solid #f0d89066;}
.nn-node:focus-visible {outline:2px solid #eeeae1;}
.nn-node.is-selected .nn-disc {border-width:2px; outline:3px solid #f1d48866;}
.nn-node.is-selected .nn-node-name {color:#eedb9f;}
.nn-node.is-muted .nn-disc {filter:grayscale(.72) opacity(.5); color:#bab5a7;}
.nn-node.is-muted .nn-node-name {color:#9e998c;}
.nn-legend {flex:none; display:flex; flex-wrap:wrap; align-items:center; gap:var(--nn-space-2); padding:var(--nn-space-2) var(--nn-space-4); color:var(--nn-muted); font-size:var(--nn-xs);}
.nn-scale {display:flex; gap:2px;}
.nn-scale i {display:block; width:13px; height:9px; border:1px solid #bfa75f66; border-radius:1px;}
.nn-scale i:first-child {border-top-left-radius:3px;border-bottom-left-radius:3px;}
.nn-scale i:last-child {border-top-right-radius:3px;border-bottom-right-radius:3px;}
.nn-mono,.nn-term code,.nn-equation,.nn-exact {font-family:var(--font-mono,'SFMono-Regular',Consolas,monospace); font-variant-numeric:tabular-nums;}
.nn-legend-rule {margin-left:auto;}
.nn-inspector {flex:none; padding:var(--nn-space-2) var(--nn-space-4); border-top:1px solid var(--nn-border);}
.nn-inspect-hint {margin:0; color:var(--nn-text); font-size:var(--nn-xs); line-height:1.5; max-width:none;}
.nn-inspect-hint span {color:var(--nn-muted);}
.nn-inspector-head {display:flex; gap:var(--nn-space-2); align-items:center; justify-content:space-between;}
.nn-inspector-title {font-size:var(--nn-sm);font-weight:500;color:var(--nn-gold);}
.nn-inspector-actions {display:flex;align-items:center;gap:var(--nn-space-2);}
.nn-focus-label {display:flex;align-items:center;gap:var(--nn-space-2);color:var(--nn-muted);font-size:var(--nn-xs);}
.nn-chart .nn-focus {background:#282824;border:1px solid #ffffff24;border-radius:3px;color:var(--nn-text);height:44px;padding:0 var(--nn-space-2);max-width:125px;font:400 var(--nn-xs)/1.4 var(--nn-font);cursor:pointer;}
.nn-reset {color:var(--nn-gold);border:0;background:transparent;padding:var(--nn-space-2);min-height:44px;font-size:var(--nn-xs);cursor:pointer;white-space:nowrap;}
.nn-reset:hover {color:#ffebaf;}
.nn-chart select:focus-visible,.nn-chart .nn-reset:focus-visible {outline:2px solid var(--nn-gold);outline-offset:2px;}
.nn-work {display:grid;grid-template-columns:minmax(180px,1fr) minmax(220px,1.25fr);gap:var(--nn-space-4);align-items:center;max-height:126px;overflow:auto;margin-bottom:var(--nn-space-1);scrollbar-width:thin;}
.nn-terms {padding-right:var(--nn-space-4);border-right:1px solid var(--nn-border);}
.nn-term {display:flex;justify-content:space-between;gap:var(--nn-space-3);line-height:1.6;font-size:var(--nn-xs);}
.nn-term-id {color:var(--nn-muted);min-width:28px;overflow:hidden;text-overflow:ellipsis;max-width:80px;white-space:nowrap;}
.nn-term code {font-size:var(--nn-xs);color:var(--nn-text);background:none;padding:0;white-space:nowrap;}
.nn-calculation {min-width:0;}
.nn-equation {color:var(--nn-muted);font-size:var(--nn-xs);overflow-wrap:anywhere;}
.nn-output {display:flex;gap:var(--nn-space-3);align-items:baseline;margin-top:var(--nn-space-2);color:var(--nn-text);}
.nn-output span {font-size:var(--nn-sm);}
.nn-output span::after {content:' →';color:var(--nn-muted);}
.nn-output strong {font-size:20px;font-weight:500;letter-spacing:-.5px;color:#e8ce85;font-variant-numeric:tabular-nums;}
.nn-exact {font-size:var(--nn-xs);color:var(--nn-muted);overflow-wrap:anywhere;margin-top:var(--nn-space-1);}
.nn-input-readout {color:var(--nn-text);font-size:var(--nn-xs);margin:0 0 var(--nn-space-2);max-width:none;}
.nn-side-inspector {display:grid;grid-template-columns:minmax(0,1fr) 240px;grid-template-rows:auto minmax(0,1fr) auto auto;}
.nn-side-inspector .nn-toolbar {grid-column:1 / 3;grid-row:1;}
.nn-side-inspector .nn-stage {grid-column:1;grid-row:2;}
.nn-side-inspector .nn-legend {grid-column:1;grid-row:3;}
.nn-side-inspector .nn-legend-rule {width:100%;margin-left:0;}
.nn-side-inspector .nn-inspector {grid-column:2;grid-row:2 / 4;border-top:0;border-left:1px solid var(--nn-border);align-self:stretch;overflow:auto;padding-top:var(--nn-space-4);}
.nn-side-inspector .nn-inspector-head {display:block;}
.nn-side-inspector .nn-inspector-actions {margin-block:var(--nn-space-2) var(--nn-space-3);}
.nn-side-inspector .nn-focus-label {font-size:0;gap:0;}
.nn-side-inspector .nn-focus {max-width:104px;}
.nn-side-inspector .nn-work {display:flex;flex-direction:column;align-items:stretch;gap:var(--nn-space-4);max-height:none;overflow:visible;}
.nn-side-inspector .nn-terms {border-right:0;border-bottom:1px solid var(--nn-border);padding:0 0 var(--nn-space-3);}
.nn-side-inspector .nn-term {line-height:1.9;gap:var(--nn-space-1);}
.nn-side-inspector .nn-term-id {min-width:22px;}
.nn-side-inspector .nn-term code {font-size:11px;}
.nn-side-inspector .nn-footer {grid-column:1 / 3;grid-row:4;}
.nn-footer {flex:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--nn-space-1) var(--nn-space-3);padding:var(--nn-space-2) var(--nn-space-4);color:var(--nn-muted);font-size:var(--nn-xs);border-top:1px solid var(--nn-border);}
.nn-tooltip {position:absolute;z-index:3;display:flex;flex-direction:column;gap:var(--nn-space-1);padding:var(--nn-space-2) var(--nn-space-3);border:1px solid #827454;border-radius:4px;background:#292823;color:var(--nn-text);max-width:290px;overflow-wrap:anywhere;font-size:var(--nn-xs);pointer-events:none;box-shadow:0 5px 15px #0003;}
.nn-tooltip[hidden] {display:none;}
.nn-tooltip strong {color:var(--nn-gold);font-weight:500;}
.nn-tb .nn-layer {transform:translateY(-50%);text-align:left;}
.nn-tb .nn-layer::after {display:none;}
.nn-narrow .nn-toolbar {padding-inline:var(--nn-space-3);}
.nn-narrow .nn-meta {max-width:145px;text-align:right;}
.nn-narrow .nn-inspector,.nn-narrow .nn-footer,.nn-narrow .nn-legend {padding-inline:var(--nn-space-3);}
.nn-narrow .nn-inspector-head {align-items:center;flex-wrap:wrap;}
.nn-narrow .nn-focus-label {font-size:0;gap:0;}
.nn-narrow .nn-focus {min-height:44px;}
.nn-narrow .nn-work {grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--nn-space-2);}
.nn-narrow .nn-terms {padding-right:var(--nn-space-2);}
.nn-narrow .nn-term {gap:var(--nn-space-1);flex-wrap:wrap;}
.nn-narrow .nn-term code {white-space:normal;overflow-wrap:anywhere;}
.nn-narrow .nn-output {gap:var(--nn-space-2);flex-wrap:wrap;margin-top:var(--nn-space-1);}
.nn-narrow .nn-output strong {font-size:var(--nn-md);}
.nn-narrow .nn-legend-rule {margin-left:0;width:100%;}
.nn-narrow .nn-exact {font-family:var(--nn-font);}
/* Short mobile tiles keep the complete default topology visible. The inspector
   becomes a dismissible bottom overlay instead of crushing the plot to 80px. */
.nn-compact .nn-toolbar {display:none;}
.nn-compact .nn-inspector:not(.is-selected) {display:none;}
.nn-compact .nn-inspector.is-selected {position:absolute;left:0;right:0;bottom:0;z-index:4;background:#25251f;border-top:1px solid #d7bc6e66;box-shadow:0 -8px 20px #0003;max-height:65%;overflow:auto;}
.nn-compact.nn-inspector-at-top .nn-inspector.is-selected {top:0;bottom:auto;border-top:0;border-bottom:1px solid #d7bc6e66;box-shadow:0 8px 20px #0003;}
.nn-compact .nn-layer-count {display:none;}
.nn-compact .nn-layer::after {margin-top:var(--nn-space-1);height:4px;}
.nn-compact .nn-disc {inset:6px;font-size:10px;letter-spacing:-.3px;}
.nn-compact .nn-node-name {top:39px;font-size:9px;line-height:10px;}
.nn-compact .nn-inspector-head {flex-wrap:nowrap;}
.nn-compact .nn-inspector-title {font-size:var(--nn-xs);}
.nn-compact .nn-work {grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);max-height:150px;}
.nn-compact .nn-term {flex-wrap:nowrap;font-size:10px;line-height:1.9;}
.nn-compact .nn-term-id {min-width:24px;font-size:10px;}
.nn-compact .nn-term code {font-size:10px;letter-spacing:-.3px;white-space:nowrap;}
.nn-thumb {pointer-events:none;}
.nn-thumb .nn-stage {overflow:hidden;}
.nn-thumb .nn-layer-name {font-size:12px;font-weight:500;letter-spacing:0;}
.nn-thumb .nn-layer-count {font-size:10px;margin-top:2px;color:#baac83;}
.nn-thumb .nn-layer::after {width:20px;height:5px;margin-top:5px;border-color:#d7bc6e80;}
.nn-tiny-thumb .nn-layer-name {font-size:9px;}
.nn-tiny-thumb .nn-layer-count,.nn-tiny-thumb .nn-layer::after {display:none;}
@media (prefers-reduced-motion:reduce) {.nn-chart * {transition:none!important;}}

/* Light mode mirrors the same activation and signed-edge semantics. */
.nn-chart.nn-light {--nn-surface:#f7f5ee;--nn-gold:#94701c;--nn-text:#2e2b21;--nn-muted:#6e6a5d;--nn-border:#30271924;color-scheme:light;}
.nn-light .nn-stage {scrollbar-color:#b3a884 var(--nn-surface);}
.nn-light .nn-layer::after {border-color:#94701c80;}
.nn-light .nn-node:hover .nn-disc {outline-color:#94701c59;}
.nn-light .nn-node:focus-visible {outline-color:#5e4d21;}
.nn-light .nn-node.is-selected .nn-disc {outline:3px solid #94701c4d;}
.nn-light .nn-node.is-selected .nn-node-name {color:#765714;}
.nn-light .nn-node.is-muted .nn-disc {filter:grayscale(.72) opacity(.55);color:#786c4c;}
.nn-light .nn-node.is-muted .nn-node-name {color:#756b52;}
.nn-chart.nn-light .nn-focus {background:#eeeade;border-color:#877d603d;color:var(--nn-text);}
.nn-light .nn-reset:hover {color:#624609;}
.nn-light .nn-output strong {color:#806017;}
.nn-light .nn-tooltip {background:#fffdf6;border-color:#b5a780;box-shadow:0 5px 15px #6855231a;}
.nn-light .nn-layer-count {color:var(--nn-muted);}
.nn-light.nn-compact .nn-inspector.is-selected {background:#eeeadc;border-color:#94701c66;box-shadow:0 -8px 20px #6855231a;}
.nn-light.nn-compact.nn-inspector-at-top .nn-inspector.is-selected {box-shadow:0 8px 20px #6855231a;}