/* Общий стиль интерактивных визуализаций (chapters/NN/visual/*.html). Тема повторяет переключатель учебника. */
:root {
  --bg:#fff; --fg:#1f2330; --muted:#6b7183; --pane:#f6f7fb; --border:#dfe2ec;
  --a:#7c5cff; --b:#0f9d8a; --c:#2a7fd4; --d:#d9822b; --e:#c0398b; --ok:#3c9a3c; --bad:#d4453a;
}
:root[data-theme="dark"] {
  --bg:#1e2129; --fg:#e3e6ef; --muted:#9aa0b2; --pane:#252933; --border:#343947;
  --a:#a08cff; --b:#3cc4b0; --c:#5aa4f0; --d:#f0a254; --e:#e46bb2; --ok:#6cc46c; --bad:#f07268;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#1e2129; --fg:#e3e6ef; --muted:#9aa0b2; --pane:#252933; --border:#343947;
    --a:#a08cff; --b:#3cc4b0; --c:#5aa4f0; --d:#f0a254; --e:#e46bb2; --ok:#6cc46c; --bad:#f07268;
  }
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:14px/1.45 Inter,system-ui,-apple-system,"Segoe UI",sans-serif; }
header { padding:12px 16px 4px; }
header h1 { font-size:16px; margin:0 0 4px; }
header p { margin:0; color:var(--muted); font-size:13px; }
main { padding:8px 16px 16px; }
.bar { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:6px 0 10px; }
button, select { font:inherit; font-size:13px; color:var(--fg); background:var(--pane); border:1px solid var(--border); border-radius:6px; padding:4px 10px; cursor:pointer; }
button:hover:not(:disabled) { border-color:var(--c); }
button:disabled { opacity:.45; cursor:default; }
button.primary { background:var(--c); border-color:var(--c); color:#fff; }
label.opt { display:inline-flex; gap:6px; align-items:center; padding:3px 8px; border:1px solid var(--border); border-radius:6px; background:var(--pane); font-size:13px; cursor:pointer; }
.note { margin:8px 0; padding:8px 12px; border-left:4px solid var(--border); background:var(--pane); border-radius:4px; min-height:44px; font-size:13px; }
.note b { font-weight:600; }
.box { border:1px solid var(--border); background:var(--pane); border-radius:6px; padding:8px 10px; }
.box h2 { font-size:13px; margin:0 0 6px; color:var(--muted); font-weight:600; }
code, .mono { font:12px/1.5 "JetBrains Mono",Consolas,monospace; }
.tag { display:inline-block; border:1px solid var(--border); border-radius:999px; padding:1px 8px; font-size:12px; margin:1px 2px; background:var(--bg); }
.cell { display:inline-block; min-width:2.2em; text-align:center; padding:2px 8px; margin:2px; border-radius:5px; border:1px solid var(--border); background:var(--bg); font:12px "JetBrains Mono",Consolas,monospace; }
.hl { outline:2px solid var(--c); }
.good { color:var(--ok); } .badc { color:var(--bad); }
.grid2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
@media (max-width:760px) { .grid2 { grid-template-columns:minmax(0,1fr); } }
svg text { fill:var(--fg); font:12px Inter,system-ui,sans-serif; }
svg .mut { fill:var(--muted); }
svg .nd { fill:var(--pane); stroke:var(--border); stroke-width:1.2; }
svg .on { stroke:var(--c); stroke-width:2.4; fill:color-mix(in srgb, var(--c) 14%, var(--pane)); }
svg .ln { stroke:var(--border); stroke-width:1.5; fill:none; }
svg .lnon { stroke:var(--c); stroke-width:2.6; fill:none; }