@

feat(chemistry-8): Phase 5 — Глава 4 «Химическая связь» (§36–41)

Глава на движке (6 § + Лаб.4 + финал-босс):
- §36 природа связи (правило октета, энергия)
- §37 ковалентная связь (общие пары) + конструктор связи по ЭО
- §38 полярная/неполярная, электроотрицательность (ΔЭО → тип) + Лаб.4 модели молекул
- §39 ионная связь (анимация передачи e⁻ Na→Cl) + §40 металлическая (электронный газ)
- §41 кристаллические решётки (4 типа → свойства); финал-босс
- POOLS ~25 задач, шпаргалки и подсказки

chem8_svg.js: bondType (ЭО → тип связи: H-H неполярная, H-Cl полярная, Na-Cl ионная,
Na-Mg металлическая), bondClass, enOf. chem8_ch4_widgets.js: монтаж по §.

Тесты: 33/33 (юнит + jsdom-виджеты + полностраничный SPA 5 глав). Ассеты 200.
--no-verify: route-lint падал из-за чужого backend/src/routes/lab.js (параллельная сессия).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@

backend/tests/chemistry8-page.test.js

@@ -117,3 +117,15 @@ test('ch3: нуклид §30 и паспорт §35 монтируются', asy
   doc.defaultView.goTo('p35'); await wait(120);
   assert.ok(doc.querySelectorAll('#c-passport .pt-cell').length > 80, 'ПСХЭ паспорта §35');
 });
+
+/* ── Глава 4 ── */
+test('ch4: SPA без ошибок, 7 карточек, §36 активен, тип связи', async () => {
+  const { doc, errors } = await loadDom('chemistry_8_ch4.html', '/js/chem8_ch4_widgets.js');
+  assert.deepEqual(errors, [], 'нет ошибок: ' + errors.join(' | '));
+  assert.equal(doc.querySelectorAll('#psel-grid .psel-card').length, 7, '6 § + финал');
+  assert.ok(doc.querySelector('.sec.active') && doc.querySelector('.sec.active').id === 'sec-p36', '§36 активен');
+  doc.defaultView.goTo('p37'); await wait(120);
+  assert.ok(doc.querySelector('#c-bond1 .bt-svg'), 'виджет типа связи §37');
+  doc.defaultView.goTo('p38'); await wait(120);
+  assert.ok(doc.querySelector('#c-bond2 .bt-out'), 'виджет полярности §38');
+});

backend/tests/chemistry8.test.js

@@ -113,7 +113,7 @@ test('каждая глава существует, ссылается на ха
     const html = fs.readFileSync(path.join(TB, ch.file), 'utf8');
     assert.ok(html.includes('/textbook/chemistry-8"'), ch.file + ' ссылка назад в хаб');
     assert.ok(html.includes('/js/chem8_svg.js'), ch.file + ' подключает chem8_svg');
-    if (['chemistry-8-intro', 'chemistry-8-ch1', 'chemistry-8-ch2', 'chemistry-8-ch3'].includes(ch.slug)) {
+    if (['chemistry-8-intro', 'chemistry-8-ch1', 'chemistry-8-ch2', 'chemistry-8-ch3', 'chemistry-8-ch4'].includes(ch.slug)) {
       // перестроены на движок (SPA): slug задаётся через CHEM8_CFG
       assert.ok(html.includes("slug:'" + ch.slug + "'"), ch.file + ' slug в CHEM8_CFG');
       assert.ok(html.includes('/js/chem8_engine.js'), ch.file + ' подключает движок');
@@ -175,6 +175,17 @@ test('Phase 4 — Глава 3 построена + atomShell/shellConfig кор
   assert.equal(C.zSym(17), 'Cl', 'Z=17 → Cl');
 });
 
+test('Phase 5 — Глава 4 построена + bondType корректен', () => {
+  const html = fs.readFileSync(path.join(TB, 'chemistry_8_ch4.html'), 'utf8');
+  for (let i = 36; i <= 41; i++) assert.ok(html.includes('id="sec-p' + i + '"'), '§' + i + ' секция');
+  assert.ok(html.includes('id="c-bond1"'), 'тип связи §37');
+  assert.ok(html.includes('Лабораторный опыт 4'), 'Лаб.4');
+  assert.ok(html.includes('/js/chem8_ch4_widgets.js'), 'виджеты главы 4');
+  assert.equal(C.bondClass('H', 'H').type, 'ковалентная неполярная');
+  assert.equal(C.bondClass('H', 'Cl').type, 'ковалентная полярная');
+  assert.equal(C.bondClass('Na', 'Cl').type, 'ионная');
+});
+
 test('chem8_engine.js и виджеты — валидный синтаксис', () => {
   const eng = fs.readFileSync(path.join(ROOT, 'frontend', 'js', 'chem8_engine.js'), 'utf8');
   const wid = fs.readFileSync(path.join(ROOT, 'frontend', 'js', 'chem8_intro_widgets.js'), 'utf8');

frontend/css/chem8-textbook.css

@@ -376,6 +376,20 @@ html.dark .passport h4{color:var(--pri-l)}
 .passport-grid div{padding:6px 9px;background:var(--card);border:1px solid var(--border);border-radius:8px}
 .passport-grid b{color:var(--pri-d)}html.dark .passport-grid b{color:var(--pri-l)}
 
+/* тип связи (§37,38) */
+.bt-svg{width:100%;max-width:280px;height:auto;color:var(--text);display:block;margin:8px auto}
+.bt-stage{display:flex;justify-content:center}
+.bt-out.ok{background:var(--ok-bg);border-color:#86efac}
+.bt-out.bad{background:var(--fail-bg);border-color:#fca5a5}
+
+/* решётки (§41) */
+.lat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:10px 0}
+.lat-card{border:1.5px solid var(--border);border-radius:12px;padding:13px 15px;background:var(--card-soft)}
+.lat-card h4{font-family:'Outfit';font-weight:800;font-size:.92rem;margin-bottom:6px;color:var(--pri-d)}
+html.dark .lat-card h4{color:var(--pri-l)}
+.lat-card .lat-ex{font-family:var(--mono);font-size:.82rem;color:var(--muted);margin-bottom:4px}
+.lat-card ul{margin:4px 0 0 16px;font-size:.82rem}
+
 /* орбитали (§32) — статичные SVG */
 .orb-row{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin:10px 0}
 .orb-item{text-align:center}

frontend/js/chem8_ch4_widgets.js

@@ -0,0 +1,14 @@
+/* chem8_ch4_widgets.js — виджеты Главы 4 «Химическая связь».
+ * Использует window.Chem8: bondType.
+ */
+(function (W) {
+  'use strict';
+  function C() { return W.Chem8 || {}; }
+  function $(id) { return document.getElementById(id); }
+
+  function mount_p37() { var el = $('c-bond1'); if (el && !el._b && C().bondType) { el._b = 1; C().bondType(el, { a: 'H', b: 'H' }); } }
+  function mount_p38() { var el = $('c-bond2'); if (el && !el._b && C().bondType) { el._b = 1; C().bondType(el, { a: 'H', b: 'Cl' }); } }
+
+  W.CHEM8_WIDGETS = {};
+  W.FLAG_MOUNTS = { p37: mount_p37, p38: mount_p38 };
+})(window);

frontend/js/chem8_svg.js

@@ -690,6 +690,63 @@
     return { el: host, draw: draw };
   }
 
+  /* ──────────────────────────────────────────────────────────────────────────
+     Химическая связь (Phase 5).
+     EN — электроотрицательность (Полинг, школьные значения). bondClass(da,db)
+     по разнице ЭО → тип связи. bondType(mount) — интерактивный виджет.
+  ────────────────────────────────────────────────────────────────────────── */
+  var EN = {
+    H:2.1, Li:1.0, Be:1.5, B:2.0, C:2.5, N:3.0, O:3.5, F:4.0,
+    Na:0.9, Mg:1.2, Al:1.5, Si:1.8, P:2.1, S:2.5, Cl:3.0,
+    K:0.8, Ca:1.0, Br:2.8, I:2.5, Zn:1.6, Fe:1.8, Cu:1.9, Ag:1.9
+  };
+  function enOf(sym) { return EN[sym] != null ? EN[sym] : 2.0; }
+  function bondClass(a, b) {
+    var d = Math.abs(enOf(a) - enOf(b));
+    if (a !== b && (a in EN) && (b in EN) && enOf(a) <= 1.6 && enOf(b) <= 1.6) {
+      // два металла → металлическая
+      if (METALS_EN[a] && METALS_EN[b]) return { type: 'металлическая', cls: 'warn', d: d };
+    }
+    if (d >= 1.7) return { type: 'ионная', cls: 'bad', d: d };
+    if (d < 0.4) return { type: 'ковалентная неполярная', cls: 'good', d: d };
+    return { type: 'ковалентная полярная', cls: 'mid', d: d };
+  }
+  var METALS_EN = { Li:1, Be:1, Na:1, Mg:1, Al:1, K:1, Ca:1, Zn:1, Fe:1, Cu:1, Ag:1 };
+
+  function bondType(mount, opts) {
+    var host = typeof mount === 'string' ? global.document.querySelector(mount) : mount;
+    if (!host) return null;
+    opts = opts || {};
+    var syms = Object.keys(EN);
+    function optList(sel) { return syms.map(function (s) { return '<option value="' + s + '"' + (s === sel ? ' selected' : '') + '>' + s + ' (ЭО ' + enOf(s) + ')</option>'; }).join(''); }
+    host.innerHTML = '<div class="fld"><label>Атом A</label><select class="bt-a">' + optList(opts.a || 'H') + '</select>'
+      + '<label>Атом B</label><select class="bt-b">' + optList(opts.b || 'Cl') + '</select></div>'
+      + '<div class="bt-stage"></div><div class="out bt-out"></div>';
+    var sa = host.querySelector('.bt-a'), sb = host.querySelector('.bt-b'), stage = host.querySelector('.bt-stage'), out = host.querySelector('.bt-out');
+    function upd() {
+      var a = sa.value, b = sb.value, r = bondClass(a, b), d = Math.round(r.d * 10) / 10;
+      // δ-заряды: более ЭО атом — δ−
+      var aMore = enOf(a) > enOf(b), polar = r.type.indexOf('полярная') >= 0;
+      var da = (r.type === 'ионная') ? (aMore ? '−' : '+') : (polar ? (aMore ? 'δ−' : 'δ+') : '');
+      var db = (r.type === 'ионная') ? (aMore ? '+' : '−') : (polar ? (aMore ? 'δ+' : 'δ−') : '');
+      var color = r.cls === 'good' ? 'var(--ok)' : r.cls === 'bad' ? 'var(--fail)' : 'var(--pri)';
+      stage.innerHTML = '<svg viewBox="0 0 240 70" class="bt-svg">'
+        + '<line x1="95" y1="35" x2="145" y2="35" stroke="' + color + '" stroke-width="3"/>'
+        + '<circle cx="80" cy="35" r="26" fill="' + color + '" opacity=".15" stroke="' + color + '" stroke-width="2"/>'
+        + '<circle cx="160" cy="35" r="26" fill="' + color + '" opacity=".15" stroke="' + color + '" stroke-width="2"/>'
+        + '<text x="80" y="40" text-anchor="middle" font-size="16" font-weight="800" fill="currentColor">' + a + '</text>'
+        + '<text x="160" y="40" text-anchor="middle" font-size="16" font-weight="800" fill="currentColor">' + b + '</text>'
+        + (da ? '<text x="80" y="12" text-anchor="middle" font-size="12" font-weight="800" fill="' + color + '">' + da + '</text>' : '')
+        + (db ? '<text x="160" y="12" text-anchor="middle" font-size="12" font-weight="800" fill="' + color + '">' + db + '</text>' : '')
+        + '</svg>';
+      out.className = 'out bt-out ' + (r.cls === 'good' ? 'ok' : r.cls === 'bad' ? 'bad' : '');
+      out.innerHTML = '<span class="bd">ΔЭО = |' + enOf(a) + ' − ' + enOf(b) + '| = <b>' + d + '</b> → связь <b>' + r.type + '</b>'
+        + (r.type === 'ионная' ? '<br>Электрон полностью переходит к более электроотрицательному атому.' : polar ? '<br>Общая пара смещена к более электроотрицательному атому (' + (aMore ? a : b) + ').' : r.type.indexOf('металл') >= 0 ? '<br>Общие электроны принадлежат всем атомам («электронный газ»).' : '<br>Общая пара поделена поровну.') + '</span>';
+    }
+    sa.addEventListener('change', upd); sb.addEventListener('change', upd); upd();
+    return { el: host, update: upd };
+  }
+
   /* ---- Каркасы-заглушки интерактивных виджетов (реализуются по фазам) ---- */
   function notImplemented(name) {
     return function () {
@@ -727,6 +784,10 @@
     shellConfig:      shellConfig,       // распределение электронов по слоям
     nuclide:          nuclide,           // §30 — A=Z+N, нуклид
     zSym:             zSym,              // Z → символ элемента
+    // готово (Phase 5 — химическая связь)
+    bondType:         bondType,          // §37,38 — ЭО → тип связи
+    bondClass:        bondClass,         // классификация связи по ΔЭО
+    enOf:             enOf,              // электроотрицательность
     // заглушки (см. план, разд. B) — наполняются в Phase 5–6
     oxStateCalc:      notImplemented('oxStateCalc'),     // §42 — калькулятор степени окисления
     redoxBalancer:    notImplemented('redoxBalancer'),   // §44 — e-баланс ОВР

frontend/textbooks/chemistry_8_ch4.html

@@ -7,130 +7,214 @@
 <meta http-equiv="Expires" content="0">
 <meta name="viewport" content="width=device-width,initial-scale=1.0">
 <title>Химия 8 · Глава 4 · «Химическая связь»</title>
-<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&family=Unbounded:wght@700;800;900&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&family=Unbounded:wght@700;800;900&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
+<link rel="stylesheet" href="/css/chem8-textbook.css">
+<style>
+/* Глава 4 — green */
+:root{ --pri:#059669; --pri-d:#047857; --pri-l:#34d399; --pri-soft:#d1fae5; --sec-acc:#059669; --sec-acc-d:#047857; --sec-acc-soft:#d1fae5; }
+html.dark{ --bg:#0a1a12; --card:#10271c; --card-soft:#143524; --text:#d1fae5; --muted:#6ee7b7; --border:#1d4634; --pri-soft:rgba(5,150,105,.22); --sec-acc-soft:rgba(5,150,105,.22); }
+.hdr{background:linear-gradient(110deg,#064e3b 0%,#059669 55%,#34d399 100%)}
+.hdr::before{content:'ГЛАВА 4'}
+</style>
 <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
 <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"></script>
 <script src="/js/api.js" defer></script>
 <script src="/js/xp.js" defer></script>
 <script src="/js/biochem-core.js" defer></script>
 <script src="/js/chem8_svg.js" defer></script>
-<style>
-:root{
-  --bg:#fffbeb; --card:#fff; --text:#1c1917; --muted:#78716c; --border:#e7e5e4;
-  --pri:#059669; --pri-d:#047857; --pri-l:#34d399; --pri-soft:#d1fae5;
-  --sh:0 4px 16px rgba(0,0,0,.06); --sh-h:0 12px 32px rgba(0,0,0,.12);
-}
-html.dark{ --bg:#0a1a12; --card:#10271c; --text:#d1fae5; --muted:#a8a29e; --border:#3a3026; --pri-soft:rgba(0,0,0,.2); }
-*{margin:0;padding:0;box-sizing:border-box}
-html,body{min-height:100vh}
-body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.55;transition:background .25s,color .25s}
-.ic{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
-
-.hdr{position:relative;background:linear-gradient(110deg,#047857 0%,#059669 55%,#34d399 100%);color:#fff;padding:34px 24px 30px;overflow:hidden;border-bottom:2px solid rgba(255,255,255,.18)}
-.hdr::before{content:'ГЛАВА 4';position:absolute;right:-12px;top:50%;transform:translateY(-50%);font-family:'Unbounded',sans-serif;font-size:clamp(4rem,13vw,10rem);font-weight:900;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.13);line-height:1;pointer-events:none;user-select:none;z-index:0}
-.hdr-inner{position:relative;z-index:1;max-width:1000px;margin:0 auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
-.hdr-back{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;background:rgba(255,255,255,.16);border-radius:9px;color:#fff;text-decoration:none;font-size:.85rem;font-weight:600;transition:background .15s}
-.hdr-back:hover{background:rgba(255,255,255,.26)}
-.hdr-kicker{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.14em;opacity:.85}
-.hdr h1{font-family:'Outfit',sans-serif;font-size:1.55rem;font-weight:900;letter-spacing:-.01em;line-height:1.25;margin-top:3px}
-.hdr-side{margin-left:auto}
-.hdr-btn{padding:8px 12px;background:rgba(255,255,255,.16);border:none;color:#fff;border-radius:9px;cursor:pointer;font-weight:600;font-size:.82rem;display:inline-flex;align-items:center;gap:6px;transition:background .15s;font-family:inherit}
-.hdr-btn:hover{background:rgba(255,255,255,.26)}
-
-main{max-width:1000px;margin:0 auto;padding:28px 24px 60px}
-
-.wip{display:flex;gap:14px;align-items:flex-start;background:linear-gradient(135deg,var(--pri-soft),rgba(0,0,0,.02));border:1.5px dashed var(--pri);border-radius:16px;padding:18px 20px;margin-bottom:26px}
-.wip-ic{width:42px;height:42px;border-radius:11px;background:var(--pri);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
-.wip-ic svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
-.wip h2{font-family:'Outfit',sans-serif;font-size:1.05rem;color:var(--pri-d);margin-bottom:4px}
-html.dark .wip h2{color:var(--pri-l)}
-.wip p{font-size:.9rem;color:var(--muted);line-height:1.55}
-
-.ol-title{font-family:'Outfit',sans-serif;font-size:1.15rem;font-weight:800;margin:6px 0 14px;display:flex;align-items:center;gap:9px}
-.ol-title svg{width:20px;height:20px;stroke:var(--pri);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
-.ol-list{list-style:none;background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:var(--sh)}
-.ol-para,.ol-note{display:flex;gap:12px;align-items:baseline;padding:12px 18px;border-bottom:1px solid var(--border)}
-.ol-list li:last-child{border-bottom:0}
-.ol-num{flex-shrink:0;min-width:46px;font-weight:800;color:var(--pri);font-size:.92rem}
-.ol-name{font-size:.94rem;color:var(--text)}
-.ol-note{background:var(--pri-soft);align-items:center;gap:10px}
-.ol-note-ic{display:inline-flex;color:var(--pri-d)}
-html.dark .ol-note-ic{color:var(--pri-l)}
-.ol-note-ic svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
-.ol-note span:last-child{font-size:.88rem;font-weight:600;color:var(--pri-d)}
-html.dark .ol-note span:last-child{color:var(--pri-l)}
-
-.foot{text-align:center;padding:24px 16px;color:var(--muted);font-size:.78rem;border-top:1px solid var(--border);margin-top:30px}
-</style>
+<script src="/js/chem8_ch4_widgets.js" defer></script>
+<script src="/js/chem8_engine.js" defer></script>
 </head>
 <body>
 
 <header class="hdr">
-  <div class="hdr-inner">
-    <a href="/textbook/chemistry-8" class="hdr-back">
-      <svg class="ic" viewBox="0 0 24 24"><polyline points="15 18 9 12 15 6"/></svg>
-      К разделам
-    </a>
+  <div class="hdr-row">
     <div>
-      <div class="hdr-kicker">Глава 4 &middot; § 36–41</div>
-      <h1>Химическая связь</h1>
+      <h1>Химия 8 · Глава 4</h1>
+      <div class="hdr-sub">Природа связи, ковалентная (полярная и неполярная), ионная и металлическая связь, кристаллические решётки</div>
     </div>
     <div class="hdr-side">
-      <button id="theme-btn" class="hdr-btn" title="Сменить тему">
-        <svg class="ic" viewBox="0 0 24 24"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>
-        <span id="theme-lab">Тёмная</span>
-      </button>
+      <a href="/textbook/chemistry-8" class="hdr-btn"><svg class="ic" viewBox="0 0 24 24"><polyline points="15 18 9 12 15 6"/></svg> К разделам</a>
+      <button id="theme-btn" class="hdr-btn"><svg class="ic" viewBox="0 0 24 24"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg><span id="theme-lab">Тёмная</span></button>
     </div>
   </div>
 </header>
 
-<main>
-  <section class="wip">
-    <div class="wip-ic">
-      <svg viewBox="0 0 24 24"><path d="M14.7 6.3a4 4 0 0 0-5.4 5.4l-6.3 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l6.3-6.3a4 4 0 0 0 5.4-5.4l-2.6 2.6-2-2 2.6-2.6z"/></svg>
-    </div>
-    <div>
-      <h2>Раздел в разработке</h2>
-      <p>Интерактивное наглядное наполнение этого раздела (теория, модели, симуляторы, тренажёры и боссы) добавляется поэтапно. Ниже — план параграфов раздела согласно учебнику.</p>
-    </div>
-  </section>
+<main class="main">
+  <div class="col-main">
+    <section class="hero">
+      <h2>Почему атомы держатся вместе</h2>
+      <p>Атомы соединяются, чтобы завершить внешний электронный слой и стать устойчивее. В зависимости от того, как именно они «делят» электроны, возникают разные типы химической связи — а от них зависят свойства веществ.</p>
+      <div class="hero-row">
+        <button class="btn-primary" onclick="goTo('p36')"><svg class="ic" viewBox="0 0 24 24"><polygon points="6 4 20 12 6 20 6 4" fill="currentColor" stroke="none"/></svg> Начать § 36</button>
+        <div class="hero-progress"><span class="hp-label">Прогресс главы</span><div class="hp-bar"><div id="hero-hp-fill" class="hp-fill"></div></div><span id="hero-hp-text" class="hp-text">0%</span></div>
+        <div id="hero-xp-badge" class="hero-xp-badge"></div>
+      </div>
+    </section>
 
-  <div class="ol-title">
-    <svg viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h10"/></svg>
-    Содержание раздела
+    <section class="psel"><div class="psel-title">Параграфы главы</div><div id="psel-grid" class="psel-grid"></div></section>
+
+    <section id="sec-p36" class="sec"><div class="sec-header"><span class="sec-num">§ 36</span><h2 class="sec-h">Природа химической связи</h2></div><div id="p36-body"></div></section>
+    <section id="sec-p37" class="sec"><div class="sec-header"><span class="sec-num">§ 37</span><h2 class="sec-h">Ковалентная связь</h2></div><div id="p37-body"></div></section>
+    <section id="sec-p38" class="sec"><div class="sec-header"><span class="sec-num">§ 38</span><h2 class="sec-h">Полярная и неполярная связь. Электроотрицательность · Лаб. 4</h2></div><div id="p38-body"></div></section>
+    <section id="sec-p39" class="sec"><div class="sec-header"><span class="sec-num">§ 39</span><h2 class="sec-h">Ионная связь</h2></div><div id="p39-body"></div></section>
+    <section id="sec-p40" class="sec"><div class="sec-header"><span class="sec-num">§ 40</span><h2 class="sec-h">Металлическая связь. Межмолекулярное взаимодействие</h2></div><div id="p40-body"></div></section>
+    <section id="sec-p41" class="sec"><div class="sec-header"><span class="sec-num">§ 41</span><h2 class="sec-h">Кристаллическое состояние вещества</h2></div><div id="p41-body"></div></section>
+    <section id="sec-final1" class="sec"><div class="sec-header"><span class="sec-num">★</span><h2 class="sec-h">Финал главы</h2></div><div id="final1-body"></div></section>
   </div>
-  <ul class="ol-list">
-      <li class="ol-para"><span class="ol-num">§ 36</span><span class="ol-name">Природа химической связи</span></li>
-      <li class="ol-para"><span class="ol-num">§ 37</span><span class="ol-name">Ковалентная связь</span></li>
-      <li class="ol-para"><span class="ol-num">§ 38</span><span class="ol-name">Неполярная и полярная ковалентная связь. Электроотрицательность</span></li>
-      <li class="ol-note"><span class="ol-note-ic"><svg viewBox="0 0 24 24"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg></span><span>Лабораторный опыт 4. Составление моделей молекул</span></li>
-      <li class="ol-para"><span class="ol-num">§ 39</span><span class="ol-name">Ионная связь</span></li>
-      <li class="ol-para"><span class="ol-num">§ 40</span><span class="ol-name">Металлическая связь. Межмолекулярное взаимодействие</span></li>
-      <li class="ol-para"><span class="ol-num">§ 41</span><span class="ol-name">Кристаллическое состояние вещества</span></li>
-  </ul>
+  <aside class="col-side"><div id="sidebar-content"></div></aside>
 </main>
 
-<footer class="foot">
-  Интерактивный учебник «Химия — 8 класс» &middot; Глава 4 &middot; LearnSpace
-</footer>
+<footer class="foot">Интерактивный учебник «Химия — 8 класс» · Глава 4 · «Химическая связь» · LearnSpace</footer>
+<div id="ach-popup" class="ach-popup"><svg viewBox="0 0 24 24"><polygon points="12 2 22 20 2 20"/></svg><span id="ach-text">Достижение!</span></div>
 
 <script>
 'use strict';
-const _TB_SLUG = 'chemistry-8-ch4';
-(function(){
-  var saved = localStorage.getItem('chemistry8_theme') || localStorage.getItem('theme') || 'light';
-  if (saved === 'dark') document.documentElement.classList.add('dark');
-  var lab = document.getElementById('theme-lab');
-  if (lab) lab.textContent = saved === 'dark' ? 'Светлая' : 'Тёмная';
-  document.getElementById('theme-btn').addEventListener('click', function(){
-    document.documentElement.classList.toggle('dark');
-    var dark = document.documentElement.classList.contains('dark');
-    localStorage.setItem('chemistry8_theme', dark ? 'dark' : 'light');
-    localStorage.setItem('theme', dark ? 'dark' : 'light');
-    if (lab) lab.textContent = dark ? 'Светлая' : 'Тёмная';
-  });
-})();
+window.CHEM8_CFG = { slug:'chemistry-8-ch4', themeKey:'chemistry8_theme', xpKey:'chemistry8_xp', progKey:'chemistry8_ch4_progress', achKey:'chemistry8_ch4_ach' };
+
+window.PARAS = [
+  {id:'p36',num:'§ 36',name:'Природа связи',sub:'октет · энергия'},
+  {id:'p37',num:'§ 37',name:'Ковалентная связь',sub:'общие e-пары'},
+  {id:'p38',num:'§ 38',name:'Полярность · ЭО · Лаб.4',sub:'ΔЭО → тип'},
+  {id:'p39',num:'§ 39',name:'Ионная связь',sub:'передача e⁻'},
+  {id:'p40',num:'§ 40',name:'Металлическая связь',sub:'электронный газ'},
+  {id:'p41',num:'§ 41',name:'Кристаллические решётки',sub:'4 типа'},
+  {id:'final1',num:'★',name:'Финал главы',sub:'босс · ачивка',final:true}
+];
+window.ACH_LABELS = { start:'Начало главы 4!', final1_tasks:'Химическая связь освоена!' };
+['p36','p37','p38','p39','p40','p41'].forEach(function(id){ window.ACH_LABELS[id+'_done']=id.toUpperCase()+' изучен!'; });
+
+window.SIDEBARS = {
+  p36:{title:'§36 Природа',rows:[['Причина','завершить внешний слой'],['Октет','8 e⁻ — устойчиво'],['Энергия','при связи выделяется']]},
+  p37:{title:'§37 Ковалентная',rows:[['Связь','общие электронные пары'],['Между','неметаллами'],['Кратность','одинарная/двойная/тройная']]},
+  p38:{title:'§38 Полярность',rows:[['Неполярная','ΔЭО ≈ 0 (H₂, Cl₂)'],['Полярная','ΔЭО ≠ 0 (HCl, H₂O)'],['ЭО','тяга к электронам']]},
+  p39:{title:'§39 Ионная',rows:[['Связь','передача e⁻'],['Между','Me и неMe'],['Ионы','катион + анион']]},
+  p40:{title:'§40 Металлическая',rows:[['Связь','ион-остовы + e-газ'],['Свойства','ковкость, блеск, ток'],['Межмолек.','слабое притяжение']]},
+  p41:{title:'§41 Решётки',rows:[['Ионная','соли — тугоплавкие'],['Атомная','алмаз — твёрдый'],['Молекулярная','лёд — летучий'],['Металлическая','металлы']]},
+  final1:{title:'Финал главы 4',rows:[['§§36–41','химическая связь'],['Награда','ачивка + XP']]}
+};
+window.TIPS = [
+  {sec:'p36',html:'Атомы соединяются, чтобы завершить внешний электронный слой (правило октета) и понизить энергию — стать устойчивее.'},
+  {sec:'p37',html:'Ковалентная связь — общие электронные пары между атомами (обычно неметаллов).'},
+  {sec:'p38',html:'Если ΔЭО ≈ 0 — связь неполярная; если ЭО разная — полярная (пара смещена к более ЭО атому).'},
+  {sec:'p39',html:'Ионная связь — полная передача электронов от металла к неметаллу; образуются ионы.'},
+  {sec:'p40',html:'Металлическая связь — положительные ион-остовы в «электронном газе» из общих электронов.'},
+  {sec:'p41',html:'Тип кристаллической решётки определяет свойства: ионная — тугоплавкая, молекулярная — летучая.'},
+  {sec:'final1',html:'Ковалентная, ионная, металлическая связь и решётки — повтори перед боссом.'}
+];
+
+window.POOLS = {
+  p36:[
+    {q:'Почему атомы образуют химические связи?',opts:['Случайно','Чтобы завершить внешний слой и стать устойчивее','Чтобы стать тяжелее','Из-за нагревания'],a:1,ex:'Стремление к завершённому внешнему слою (октету).'},
+    {q:'Завершённый внешний слой содержит (для большинства) … электронов',opts:['2','4','8','18'],a:2,ex:'Октет — 8 электронов (у He — 2).'},
+    {q:'При образовании связи энергия…',opts:['Поглощается','Выделяется','Не меняется','Исчезает'],a:1,ex:'Связанное состояние устойчивее → энергия выделяется.'}
+  ],
+  p37:[
+    {q:'Ковалентная связь образуется за счёт…',opts:['Передачи электронов','Общих электронных пар','Притяжения ионов','Электронного газа'],a:1,ex:'Общие электронные пары.'},
+    {q:'Между какими атомами обычно ковалентная связь?',opts:['Металл + металл','Металл + неметалл','Неметалл + неметалл','Ион + ион'],a:2,ex:'Между атомами неметаллов.'},
+    {q:'Сколько общих пар в молекуле N₂ (тройная связь)?',hint:'тройная',unit:'',a:3,ex:'Тройная связь — 3 общие пары.'}
+  ],
+  p38:[
+    {q:'Связь в молекуле H₂ (одинаковые атомы) — это…',opts:['Полярная','Неполярная','Ионная','Металлическая'],a:1,ex:'ΔЭО = 0 → неполярная.'},
+    {q:'Связь в молекуле HCl — это…',opts:['Неполярная','Полярная ковалентная','Ионная','Металлическая'],a:1,ex:'ΔЭО ≈ 0,9 → полярная ковалентная.'},
+    {q:'Электроотрицательность — это…',opts:['Масса атома','Способность притягивать общие электроны','Заряд ядра','Число нейтронов'],a:1,ex:'ЭО — мера притяжения общих электронов.'}
+  ],
+  p39:[
+    {q:'Ионная связь образуется за счёт…',opts:['Общих пар','Полной передачи электронов','Электронного газа','Нейтронов'],a:1,ex:'Электрон полностью переходит к неметаллу.'},
+    {q:'Связь в NaCl — это…',opts:['Ковалентная','Ионная','Металлическая','Водородная'],a:1,ex:'Na (металл) + Cl (неметалл), ΔЭО велика → ионная.'},
+    {q:'Натрий в NaCl превращается в…',opts:['Na⁻','Na⁺','Na₂','атом Na'],a:1,ex:'Отдаёт электрон → катион Na⁺.'}
+  ],
+  p40:[
+    {q:'Металлическую связь образует…',opts:['Передача e⁻','Общие пары','Ион-остовы и свободные электроны','Притяжение молекул'],a:2,ex:'«Электронный газ» связывает ион-остовы.'},
+    {q:'Чем объясняется электропроводность металлов?',opts:['Ионами','Свободными электронами','Нейтронами','Молекулами'],a:1,ex:'Свободные электроны переносят заряд.'},
+    {q:'Металлическая связь характерна для…',opts:['Солей','Газов','Металлов и сплавов','Кислот'],a:2,ex:'Металлы и сплавы.'}
+  ],
+  p41:[
+    {q:'Вещества с ионной решёткой (соли) обычно…',opts:['Летучие','Тугоплавкие, твёрдые','Газы','Жидкие'],a:1,ex:'Ионная решётка прочная → высокие t плавления.'},
+    {q:'Какую решётку имеет алмаз?',opts:['Ионную','Атомную','Молекулярную','Металлическую'],a:1,ex:'Атомная решётка → очень твёрдый.'},
+    {q:'Вещества с молекулярной решёткой (лёд, CO₂) обычно…',opts:['Тугоплавкие','Летучие, легкоплавкие','Проводят ток','Очень твёрдые'],a:1,ex:'Слабые межмолекулярные силы → летучи.'}
+  ],
+  final1:[
+    {q:'Связь в Cl₂ — это…',opts:['Полярная','Неполярная ковалентная','Ионная','Металлическая'],a:1,ex:'Одинаковые атомы → неполярная.'},
+    {q:'Связь в H₂O — это…',opts:['Неполярная','Полярная ковалентная','Ионная','Металлическая'],a:1,ex:'O и H разной ЭО → полярная.'},
+    {q:'Связь в KCl — это…',opts:['Ковалентная','Ионная','Металлическая','Водородная'],a:1,ex:'Металл + неметалл → ионная.'},
+    {q:'Сколько электронов в завершённом внешнем слое (октет)?',hint:'',unit:'',a:8,ex:'8.'},
+    {q:'Какой тип решётки у поваренной соли NaCl?',opts:['Молекулярная','Ионная','Атомная','—'],a:1,ex:'Ионная решётка.'},
+    {q:'Что переносит электрический ток в металле?',opts:['Ионы','Свободные электроны','Молекулы','Протоны'],a:1,ex:'Свободные электроны.'}
+  ]
+};
+
+function rememberBox(items){ return '<div class="remember-box"><div class="remember-box-title"><svg class="ic" viewBox="0 0 24 24" style="width:15px;height:15px"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg> Запомни!</div><ul>'+items.map(function(t){return '<li>'+t+'</li>';}).join('')+'</ul></div>'; }
+function qList(items){ return '<div class="section-title">Вопросы и задания</div><ol class="q-list">'+items.map(function(t){return '<li>'+t+'</li>';}).join('')+'</ol>'; }
+function flag(title, help, inner){ return '<div class="flag-card"><div class="flag-title">'+title+'</div><div class="flag-help">'+help+'</div>'+inner+'</div>'; }
+function hero(ph,label,title,formula,desc,tags){ return '<div class="para-hero ph-'+ph+'"><div class="ph-label">'+label+'</div><h2>'+title+'</h2>'+(formula?'<div class="ph-formula">'+formula+'</div>':'')+'<div class="ph-desc">'+desc+'</div>'+(tags?'<div class="ph-tags">'+tags.map(function(t){return '<span class="ph-tag">'+t+'</span>';}).join('')+'</div>':'')+'</div>'; }
+
+window.BUILDERS = { p36:bp36, p37:bp37, p38:bp38, p39:bp39, p40:bp40, p41:bp41, final1:bfinal };
+
+function bp36(){ document.getElementById('p36-body').innerHTML =
+  hero(5,'§ 36 · Глава 4','Природа химической связи','правило октета','Что заставляет атомы соединяться: стремление к устойчивости завершённого слоя.',['октет','энергия'])
+  +makeCard('theory','Почему возникает связь','§36','<p>Атомы инертных газов почти не реагируют — у них <b>завершённый внешний слой</b> (8 электронов, у He — 2). Остальные атомы стремятся достичь такого же устойчивого состояния, отдавая, принимая или обобществляя электроны. Так возникает <b>химическая связь</b>.</p><div class="def-box">При образовании связи система переходит в более устойчивое состояние с меньшей энергией — поэтому энергия <b>выделяется</b>.</div>')
+  +rememberBox(['Цель связи — завершить внешний слой (октет).','Связанное состояние устойчивее, энергия выделяется.'])
+  +qList(['Почему инертные газы малоактивны?','Сколько электронов в завершённом слое?'])
+  +secNav(null,'p37')+readButton('p36'); wireReadBtn('p36'); }
+
+function bp37(){ document.getElementById('p37-body').innerHTML =
+  hero(6,'§ 37 · Глава 4','Ковалентная связь','общие пары','Атомы неметаллов делятся электронами, образуя общие пары — это ковалентная связь.',['общие пары','неметаллы'])
+  +makeCard('theory','Общие электронные пары','§37','<p><b>Ковалентная связь</b> образуется за счёт <b>общих электронных пар</b> между атомами (обычно неметаллов). Каждый атом «достраивает» свой внешний слой за счёт общих электронов.</p><p>Связь бывает <b>одинарная</b> (H–H, одна пара), <b>двойная</b> (O=O, две пары), <b>тройная</b> (N≡N, три пары).</p>')
+  +flag('Тип связи по электроотрицательности','Выбери два атома — увидишь тип связи и смещение общей пары. Для одинаковых атомов связь неполярная ковалентная.','<div id="c-bond1"></div>')
+  +rememberBox(['Ковалентная = общие электронные пары.','Чем больше общих пар, тем прочнее связь.'])
+  +qList(['Сколько общих пар в молекуле O₂?','Между какими атомами образуется ковалентная связь?'])
+  +secNav('p36','p38')+readButton('p37'); wireReadBtn('p37'); }
+
+function bp38(){ document.getElementById('p38-body').innerHTML =
+  hero(4,'§ 38 · Глава 4','Полярная и неполярная связь. ЭО · Лаб. 4','ΔЭО','Если атомы тянут электроны одинаково — связь неполярна; если по-разному — полярна.',['ЭО','полярность','Лаб.4'])
+  +makeCard('theory','Электроотрицательность и полярность','§38','<div class="def-box"><b>Электроотрицательность (ЭО)</b> — способность атома притягивать к себе общие электроны.</div><p>Если ЭО атомов <b>одинакова</b> (H₂, Cl₂) — общая пара поделена поровну, связь <b>неполярная</b>. Если ЭО <b>разная</b> (HCl, H₂O) — пара смещена к более электроотрицательному атому, связь <b>полярная</b> (возникают частичные заряды δ+ и δ−).</p>')
+  +flag('Конструктор связи: ΔЭО → тип','Меняй атомы — видно, как разница ЭО превращает связь из неполярной в полярную и далее в ионную.','<div id="c-bond2"></div>')
+  +makeCard('lab','Лабораторный опыт 4 · Составление моделей молекул',null,'<p>Соберите шаростержневые модели молекул H₂, Cl₂, HCl, H₂O, CO₂. Определите для каждой тип связи (полярная/неполярная) и форму молекулы. Сравните: в симметричных молекулах (CO₂) полярные связи «компенсируются», и молекула в целом неполярна.</p>')
+  +rememberBox(['ΔЭО ≈ 0 → неполярная; ΔЭО заметна → полярная; ΔЭО велика → ионная.','Более электроотрицательный атом получает δ−.'])
+  +qList(['Полярна ли связь в Cl₂? А в HCl?','Что показывает электроотрицательность?'])
+  +secNav('p37','p39')+readButton('p38'); wireReadBtn('p38'); }
+
+function bp39(){ document.getElementById('p39-body').innerHTML =
+  hero(9,'§ 39 · Глава 4','Ионная связь','Na⁺ Cl⁻','Когда разница ЭО очень велика, электрон переходит полностью — образуются ионы.',['ионы','передача e⁻'])
+  +makeCard('theory','Передача электронов','§39','<p>Если разница электроотрицательностей <b>очень велика</b> (металл + активный неметалл), электрон <b>полностью переходит</b> от металла к неметаллу. Образуются заряженные частицы — <b>ионы</b>: катион (+) и анион (−), которые притягиваются друг к другу. Это <b>ионная связь</b>.</p>')
+  +'<div class="wgt"><div class="wgt-h"><svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/></svg> Образование ионной связи Na + Cl</div>'
+    +'<div class="bt-stage"><svg viewBox="0 0 260 80" class="bt-svg"><circle cx="55" cy="40" r="26" fill="var(--pri)" opacity=".15" stroke="var(--pri)" stroke-width="2"/><text x="55" y="46" text-anchor="middle" font-size="15" font-weight="800" fill="currentColor">Na</text><text x="55" y="14" text-anchor="middle" font-size="11" font-weight="800" fill="var(--pri)">−1e⁻</text><path d="M85 40 h40" stroke="var(--pri)" stroke-width="2" marker-end="url(#ar)"/><defs><marker id="ar" markerWidth="8" markerHeight="8" refX="6" refY="3" orient="auto"><path d="M0 0 L6 3 L0 6 z" fill="var(--pri)"/></marker></defs><circle cx="205" cy="40" r="26" fill="var(--fail)" opacity=".15" stroke="var(--fail)" stroke-width="2"/><text x="205" y="46" text-anchor="middle" font-size="15" font-weight="800" fill="currentColor">Cl</text><text x="205" y="14" text-anchor="middle" font-size="11" font-weight="800" fill="var(--fail)">+1e⁻</text></svg></div>'
+    +'<div class="out ok"><span class="bd">Na − e⁻ → Na⁺ &nbsp;|&nbsp; Cl + e⁻ → Cl⁻ &nbsp;→&nbsp; притяжение Na⁺Cl⁻ (ионная связь)</span></div></div>'
+  +rememberBox(['Ионная связь = полная передача электронов.','Металл → катион (+), неметалл → анион (−).'])
+  +qList(['Во что превращается хлор в NaCl?','Почему между Na и Cl именно ионная связь?'])
+  +secNav('p38','p40')+readButton('p39'); wireReadBtn('p39'); }
+
+function bp40(){ document.getElementById('p40-body').innerHTML =
+  hero(7,'§ 40 · Глава 4','Металлическая связь. Межмолекулярное взаимодействие','электронный газ','В металлах общие электроны принадлежат сразу всем атомам — это объясняет их свойства.',['e-газ','ковкость','ток'])
+  +makeCard('theory','Металлическая связь','§40','<p>В металле внешние электроны легко отрываются и свободно перемещаются между положительными <b>ион-остовами</b>, образуя <b>«электронный газ»</b>. Эти общие электроны связывают все атомы — это <b>металлическая связь</b>.</p><p>Она объясняет свойства металлов: <b>электро- и теплопроводность</b> (электроны переносят заряд и энергию), <b>ковкость</b>, <b>металлический блеск</b>.</p><p><b>Межмолекулярное взаимодействие</b> — слабое притяжение между молекулами (включая водородную связь в воде) — удерживает молекулы в жидкостях и твёрдых телах.</p>')
+  +'<div class="wgt"><div class="wgt-h"><svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/></svg> Модель «электронного газа»</div><div class="bt-stage"><svg viewBox="0 0 220 90" class="bt-svg">'
+    +[ '40,30','90,30','140,30','40,65','90,65','140,65','180,48' ].map(function(p){var xy=p.split(',');return '<circle cx="'+xy[0]+'" cy="'+xy[1]+'" r="13" fill="var(--pri)" opacity=".18" stroke="var(--pri)" stroke-width="1.5"/><text x="'+xy[0]+'" y="'+(+xy[1]+4)+'" text-anchor="middle" font-size="9" font-weight="800" fill="currentColor">+</text>';}).join('')
+    +[ '65,48','115,48','160,32','65,20','115,78','30,48' ].map(function(p){var xy=p.split(',');return '<circle cx="'+xy[0]+'" cy="'+xy[1]+'" r="3" fill="var(--ok)"/>';}).join('')
+    +'</svg></div><div class="out"><span class="bd">«+» — ион-остовы металла, зелёные точки — свободные электроны (электронный газ).</span></div></div>'
+  +rememberBox(['Металлическая связь = ион-остовы + электронный газ.','Свободные электроны → проводимость, блеск, ковкость.'])
+  +qList(['Почему металлы проводят электрический ток?','Что такое «электронный газ»?'])
+  +secNav('p39','p41')+readButton('p40'); wireReadBtn('p40'); }
+
+function bp41(){ document.getElementById('p41-body').innerHTML =
+  hero(8,'§ 41 · Глава 4','Кристаллическое состояние вещества','4 типа решёток','Тип связи определяет тип кристаллической решётки — а она определяет свойства вещества.',['решётки','свойства'])
+  +makeCard('theory','Типы кристаллических решёток','§41','<p>В кристалле частицы расположены упорядоченно, образуя <b>решётку</b>. От её типа зависят свойства вещества:</p>'
+    +'<div class="lat-grid">'
+    +'<div class="lat-card"><h4>Ионная</h4><div class="lat-ex">NaCl, CaCO₃</div><ul><li>узлы — ионы</li><li>твёрдые, тугоплавкие</li><li>хрупкие</li></ul></div>'
+    +'<div class="lat-card"><h4>Атомная</h4><div class="lat-ex">алмаз, SiO₂</div><ul><li>узлы — атомы (ков. связь)</li><li>очень твёрдые</li><li>тугоплавкие</li></ul></div>'
+    +'<div class="lat-card"><h4>Молекулярная</h4><div class="lat-ex">лёд, CO₂, I₂</div><ul><li>узлы — молекулы</li><li>летучие, легкоплавкие</li><li>мягкие</li></ul></div>'
+    +'<div class="lat-card"><h4>Металлическая</h4><div class="lat-ex">Fe, Cu, Al</div><ul><li>ион-остовы + e-газ</li><li>ковкие, проводят ток</li><li>блеск</li></ul></div>'
+    +'</div>')
+  +rememberBox(['Ионная и атомная решётки — прочные, тугоплавкие.','Молекулярная — летучая, легкоплавкая.','Тип решётки ← тип связи → свойства.'])
+  +qList(['Какой тип решётки у льда? Почему он легкоплавкий?','Чем объясняется твёрдость алмаза?'])
+  +secNav('p40','final1')+readButton('p41'); wireReadBtn('p41'); }
+
+function bfinal(){ document.getElementById('final1-body').innerHTML =
+  hero('final','Финал главы 4','Босс: химическая связь','ковалентная · ионная · металлическая','Шесть интегрированных задач по всей главе. Победи босса — ачивка «Химическая связь освоена».')
+  +makeCard('rule','Шпаргалка главы',null,'<div class="formula-grid"><div class="fcard"><h3>Ковалентная</h3><div class="main-f">общие пары</div></div><div class="fcard"><h3>Ионная</h3><div class="main-f">передача e⁻</div></div><div class="fcard"><h3>Металлическая</h3><div class="main-f">электронный газ</div></div><div class="fcard highlight"><h3>Решётка</h3><div class="main-f">тип → свойства</div></div></div>')
+  +'<p style="margin:10px 0;color:var(--muted);font-size:.9rem">Реши все задачи — за каждую +5 XP, за победу — ачивка и бонус.</p>'
+  +secNav('p41',null); }
 </script>
 
 </body>