feat(chemistry7): Phase 1 Волна 1 — Глава 1, §§1–3 + ПР1

§1 Химия — наука о веществах (классификатор тело/вещество),
§2 Чистые вещества и смеси (разделитель смесей: фильтр/выпаривание/
магнит/отстаивание/перегонка), ПР1 разделение смеси соль+песок,
§3 Атомы и химические элементы (каталог элементов + тренажёр символов).
Теория, тренажёры задач (POOLS), глоссарные шпаргалки. chem7_ch1_widgets.js.
Тест: 7/7 pass.

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

backend/tests/chemistry7-page.test.js

@@ -23,6 +23,7 @@ function buildPage(file) {
     '/js/biochem-core.js': readF('frontend/js/biochem-core.js'),
     '/js/chem8_svg.js': readF('frontend/js/chem8_svg.js'),
     '/js/chem7_svg.js': readF('frontend/js/chem7_svg.js'),
+    '/js/chem7_ch1_widgets.js': readF('frontend/js/chem7_ch1_widgets.js'),
     '/js/chem8_engine.js': readF('frontend/js/chem8_engine.js')
   };
   html = html
@@ -67,6 +68,21 @@ for (const ch of CHAPTERS) {
   });
 }
 
+test('ch1 Волна 1: интерактивы §1–§3 + ПР1 монтируются без ошибок', async () => {
+  const { doc, errors } = await loadDom('chemistry_7_ch1.html');
+  // §1 строится при загрузке (первый §) — классификатор «тело/вещество»
+  assert.ok(doc.querySelector('#p1-cls .c7-chip'), 'классификатор §1');
+  doc.defaultView.goTo('p2'); await wait(100);
+  assert.ok(doc.querySelector('#p2-sep .c7-m'), 'разделитель смесей §2');
+  doc.defaultView.goTo('pr1'); await wait(100);
+  assert.ok(doc.querySelector('#pr1-sep .c7-m'), 'разделитель смесей ПР1');
+  doc.defaultView.goTo('p3'); await wait(100);
+  assert.ok(doc.querySelectorAll('#p3-el .el-cell').length > 10, 'каталог элементов §3');
+  assert.ok(doc.querySelector('#p3-drill .c7-d'), 'тренажёр символов §3');
+  assert.ok(doc.querySelectorAll('#navDotsp3 .nav-dot').length >= 4, 'тренажёр задач §3');
+  assert.deepEqual(errors, [], 'нет ошибок: ' + errors.join(' | '));
+});
+
 test('ch1: переход к §9 и финалу строит заглушку без ошибок', async () => {
   const { doc, errors } = await loadDom('chemistry_7_ch1.html');
   doc.defaultView.goTo('p9'); await wait(80);

frontend/js/chem7_ch1_widgets.js

@@ -0,0 +1,161 @@
+/* chem7_ch1_widgets.js — интерактивы главы 1 «Первоначальные химические понятия» (Химия 7).
+ * Монтируются движком chem8_engine.js: window.CHEM8_WIDGETS[id] / window.FLAG_MOUNTS[id].
+ * Используют window.Chem8 (chem8_svg.js): molarMass, elementCounts, arOf, fmt, equationBalancer.
+ * Без эмоджи; KaTeX-рендер — через window.chem8RenderMath.
+ */
+(function (W) {
+  'use strict';
+  function C() { return W.Chem8 || {}; }
+  function $(id) { return document.getElementById(id); }
+  function esc(s){ return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
+
+  /* ── общий мини-классификатор: чипы → 2 корзины ──────────────────── */
+  function classifier(mount, opts) {
+    if (!mount || mount._built) return; mount._built = 1;
+    var items = opts.items.slice();   // {t, b} t=подпись, b=индекс корзины
+    var buckets = opts.buckets;       // [name0, name1]
+    var placed = {};                  // idx -> bucket
+    var pool = items.map(function (it, i) { return i; });
+    function colorOf(ok){ return ok ? '#059669' : '#dc2626'; }
+    function render() {
+      var chips = pool.map(function (i) {
+        return '<button class="c7-chip" data-i="' + i + '" style="padding:7px 12px;border:1.5px solid var(--border);border-radius:9px;background:var(--card);color:var(--text);font-weight:600;font-size:.9rem;cursor:pointer;margin:3px">' + esc(items[i].t) + '</button>';
+      }).join('') || '<span style="color:var(--muted)">Все карточки распределены.</span>';
+      var cols = buckets.map(function (name, bi) {
+        var inb = Object.keys(placed).filter(function (k) { return placed[k] === bi; });
+        var cells = inb.map(function (k) {
+          var ok = items[k].b === bi;
+          return '<div style="padding:5px 10px;margin:3px 0;border-radius:8px;font-size:.86rem;font-weight:600;color:#fff;background:' + colorOf(ok) + '">' + esc(items[k].t) + (ok ? ' &#10003;' : ' &#10007;') + '</div>';
+        }).join('') || '<div style="color:var(--muted);font-size:.82rem">перетащите сюда…</div>';
+        return '<div class="c7-bucket" data-b="' + bi + '" style="flex:1;min-width:140px;border:1.5px dashed var(--border);border-radius:11px;padding:10px;background:var(--pri-soft)"><div style="font-weight:700;margin-bottom:6px">' + esc(name) + '</div>' + cells + '</div>';
+      }).join('');
+      mount.innerHTML = '<div style="margin-bottom:10px">' + chips + '</div><div style="display:flex;gap:10px;flex-wrap:wrap">' + cols + '</div>'
+        + '<div style="margin-top:8px;font-size:.84rem;color:var(--muted)">Кликни карточку, затем — корзину. Зелёный — верно, красный — ошибка.</div>';
+      bind();
+    }
+    var sel = null;
+    function bind() {
+      mount.querySelectorAll('.c7-chip').forEach(function (b) {
+        b.addEventListener('click', function () {
+          mount.querySelectorAll('.c7-chip').forEach(function (x) { x.style.outline = ''; });
+          sel = +b.dataset.i; b.style.outline = '2px solid var(--pri)';
+        });
+      });
+      mount.querySelectorAll('.c7-bucket').forEach(function (col) {
+        col.addEventListener('click', function () {
+          if (sel == null) return;
+          placed[sel] = +col.dataset.b;
+          pool = pool.filter(function (x) { return x !== sel; });
+          sel = null; render();
+        });
+      });
+    }
+    render();
+  }
+
+  /* §1 — классификатор «тело / вещество» */
+  function mount_p1() {
+    var m = $('p1-cls'); if (!m) return;
+    classifier(m, {
+      buckets: ['Физическое тело', 'Вещество'],
+      items: [
+        { t: 'стакан', b: 0 }, { t: 'вода', b: 1 }, { t: 'гвоздь', b: 0 }, { t: 'железо', b: 1 },
+        { t: 'ложка', b: 0 }, { t: 'сахар', b: 1 }, { t: 'медь', b: 1 }, { t: 'линейка', b: 0 }
+      ]
+    });
+  }
+
+  /* §2 / ПР1 — разделитель смесей: выбери метод для смеси */
+  var MIX = [
+    { mix: 'Песок и вода', method: 'Фильтрование', why: 'Песок не растворяется — задерживается фильтром, вода проходит.' },
+    { mix: 'Соль и вода', method: 'Выпаривание', why: 'Вода испаряется, соль остаётся на дне.' },
+    { mix: 'Железные опилки и сера', method: 'Магнит', why: 'Железо притягивается магнитом, сера — нет.' },
+    { mix: 'Вода и растительное масло', method: 'Отстаивание (делительная воронка)', why: 'Масло легче воды и не смешивается — слои разделяют.' },
+    { mix: 'Спирт и вода', method: 'Перегонка (дистилляция)', why: 'У спирта и воды разные температуры кипения.' }
+  ];
+  var METHODS = ['Фильтрование', 'Выпаривание', 'Магнит', 'Отстаивание (делительная воронка)', 'Перегонка (дистилляция)'];
+  function mount_sep(mountId) {
+    var m = $(mountId); if (!m || m._built) return; m._built = 1;
+    var idx = 0;
+    function render() {
+      var cur = MIX[idx];
+      m.innerHTML = '<div class="fld"><label>Смесь</label><select id="' + mountId + '-pick">'
+        + MIX.map(function (x, i) { return '<option value="' + i + '"' + (i === idx ? ' selected' : '') + '>' + esc(x.mix) + '</option>'; }).join('') + '</select></div>'
+        + '<div style="margin:8px 0;font-weight:600">Каким способом разделить смесь «' + esc(cur.mix) + '»?</div>'
+        + '<div style="display:flex;flex-wrap:wrap;gap:6px">' + METHODS.map(function (mt) {
+            return '<button class="c7-m btn" data-m="' + esc(mt) + '">' + esc(mt) + '</button>';
+          }).join('') + '</div>'
+        + '<div class="out" id="' + mountId + '-out" style="margin-top:8px">Выбери способ разделения.</div>';
+      $(mountId + '-pick').addEventListener('change', function (e) { idx = +e.target.value; m._built = 0; render(); });
+      var out = $(mountId + '-out');
+      m.querySelectorAll('.c7-m').forEach(function (b) {
+        b.addEventListener('click', function () {
+          var ok = b.dataset.m === cur.method;
+          out.className = 'out ' + (ok ? 'ok' : 'bad');
+          out.innerHTML = ok
+            ? '<b>Верно!</b> ' + esc(cur.method) + '. ' + esc(cur.why)
+            : '<b>Не подходит.</b> Подумай, чем различаются вещества в смеси (растворимость, магнитные свойства, температура кипения, плотность).';
+        });
+      });
+    }
+    render();
+  }
+  function mount_p2() { mount_sep('p2-sep'); }
+  function mount_pr1() { mount_sep('pr1-sep'); }
+
+  /* §3 — каталог элементов + тренажёр «символ ↔ название» */
+  var EL = {
+    H: [1, 'Водород'], He: [2, 'Гелий'], Li: [3, 'Литий'], C: [6, 'Углерод'], N: [7, 'Азот'],
+    O: [8, 'Кислород'], F: [9, 'Фтор'], Na: [11, 'Натрий'], Mg: [12, 'Магний'], Al: [13, 'Алюминий'],
+    Si: [14, 'Кремний'], P: [15, 'Фосфор'], S: [16, 'Сера'], Cl: [17, 'Хлор'], K: [19, 'Калий'],
+    Ca: [20, 'Кальций'], Fe: [26, 'Железо'], Cu: [29, 'Медь'], Zn: [30, 'Цинк'], Ag: [47, 'Серебро']
+  };
+  function mount_p3() {
+    var grid = $('p3-el'), info = $('p3-elinfo');
+    if (grid && !grid._built) {
+      grid._built = 1;
+      Object.keys(EL).forEach(function (s) {
+        var ar = C().arOf ? C().arOf(s) : '';
+        var c = document.createElement('div'); c.className = 'el-cell';
+        c.innerHTML = '<span class="z">' + EL[s][0] + '</span><span class="s">' + s + '</span><span class="a">' + ar + '</span>';
+        c.addEventListener('click', function () {
+          grid.querySelectorAll('.el-cell').forEach(function (x) { x.classList.remove('on'); }); c.classList.add('on');
+          if (info) info.innerHTML = '<b>' + EL[s][1] + '</b> (' + s + ') &middot; порядковый номер Z = ' + EL[s][0] + ' &middot; A_r = ' + ar;
+        });
+        grid.appendChild(c);
+      });
+    }
+    /* drill: дан символ → выбери название */
+    var d = $('p3-drill'); if (d && !d._built) {
+      d._built = 1;
+      var keys = Object.keys(EL), order = keys.slice(), qi = 0, score = 0, total = 0;
+      function nextQ() {
+        var sym = order[qi % order.length];
+        var correct = EL[sym][1];
+        var opts = [correct];
+        while (opts.length < 4) { var r = EL[keys[(qi * 7 + opts.length * 13 + 3) % keys.length]][1]; if (opts.indexOf(r) < 0) opts.push(r); }
+        // детерминированная перестановка
+        opts = opts.sort(function (a, b) { return ((a.length + qi) % 3) - ((b.length + qi) % 3); });
+        d.innerHTML = '<div style="font-weight:700;margin-bottom:6px">Какому элементу соответствует символ <span style="font-family:var(--mono);color:var(--pri-d);font-size:1.1rem">' + sym + '</span>?</div>'
+          + '<div style="display:flex;flex-wrap:wrap;gap:6px">' + opts.map(function (o) { return '<button class="c7-d btn" data-o="' + esc(o) + '">' + esc(o) + '</button>'; }).join('') + '</div>'
+          + '<div class="out" id="p3-drill-out" style="margin-top:8px">Счёт: ' + score + ' из ' + total + '</div>';
+        var out = $('p3-drill-out');
+        d.querySelectorAll('.c7-d').forEach(function (b) {
+          b.addEventListener('click', function () {
+            total++; var ok = b.dataset.o === correct; if (ok) score++;
+            out.className = 'out ' + (ok ? 'ok' : 'bad');
+            out.innerHTML = (ok ? '<b>Верно!</b> ' : '<b>Нет.</b> ') + sym + ' — это ' + correct + '. Счёт: ' + score + ' из ' + total;
+            qi++;
+            setTimeout(nextQ, 850);
+          });
+        });
+      }
+      nextQ();
+    }
+  }
+
+  W.CHEM8_WIDGETS = Object.assign(W.CHEM8_WIDGETS || {}, {
+    p1: mount_p1, p2: mount_p2, pr1: mount_pr1, p3: mount_p3
+  });
+  W.FLAG_MOUNTS = Object.assign(W.FLAG_MOUNTS || {}, {});
+})(window);

frontend/textbooks/chemistry_7_ch1.html

@@ -17,6 +17,7 @@
 <script src="/js/biochem-core.js" defer></script>
 <script src="/js/chem8_svg.js" defer></script>
 <script src="/js/chem7_svg.js" defer></script>
+<script src="/js/chem7_ch1_widgets.js" defer></script>
 <script src="/js/chem8_engine.js" defer></script>
 </head>
 <body>
@@ -102,11 +103,121 @@ window.PARAS = [
   {id:'final1', num:'★', name:'Финал главы', sub:'босс · ачивка', final:true}
 ];
 
-window.ACH_LABELS = { start:'Начало главы 1!', final1_tasks:'Глава 1 пройдена!' };
-window.SIDEBARS = { p1:{ title:'Глава 1 · Химия 7', rows:[['Раздел','Первоначальные понятия'],['§§','1–12'],['Лаб/ПР','ЛО 1 · ПР 1']] } };
-window.TIPS = [{ sec:'p1', html:'Глава наполняется содержанием по фазам. Сейчас доступны навигация по параграфам и отметка о прочтении (+10 XP).' }];
+window.ACH_LABELS = { start:'Начало главы 1!', p1_done:'§1 изучен!', p2_done:'§2 изучен!',
+  pr1_done:'Практическая работа 1 выполнена!', p3_done:'§3 изучен!', final1_tasks:'Глава 1 пройдена!' };
+window.SIDEBARS = {
+  p1:{ title:'Шпаргалка §1', rows:[['Вещество','то, из чего состоит тело'],['Тело','предмет из вещества'],['Свойства','цвет, запах, плотность, $t_{пл}$…']] },
+  p2:{ title:'Шпаргалка §2', rows:[['Чистое','постоянный состав'],['Смесь','2+ вещества'],['Разделение','по различию свойств']] },
+  pr1:{ title:'Практическая 1', rows:[['Цель','разделить смесь'],['Соль+песок','раствор → фильтр → выпаривание'],['ТБ','аккуратно с нагревом']] },
+  p3:{ title:'Шпаргалка §3', rows:[['Атом','мельчайшая частица'],['Элемент','атомы с одинаковым $Z$'],['Символ','H, O, Fe, Cu…']] }
+};
+window.TIPS = [
+  { sec:'p1', html:'Тело — это <b>предмет</b> (гвоздь, стакан), а вещество — <b>то, из чего</b> он сделан (железо, стекло). Из одного вещества можно сделать много тел.' },
+  { sec:'p2', html:'Способ разделения подбирают по тому, <b>чем различаются</b> вещества смеси: растворимостью, магнитными свойствами, температурой кипения, плотностью.' },
+  { sec:'pr1', html:'Соль растворяется в воде, а песок — нет. Сначала отфильтруй песок, потом выпари воду — на дне останется соль.' },
+  { sec:'p3', html:'Химический элемент определяется <b>зарядом ядра</b> (числом протонов) — это и есть порядковый номер $Z$.' }
+];
 
-/* Phase 0: заглушки-builder'ы из PARAS (теория и интерактивы добавляются в фазах 1–4). */
+/* ── задачи (тренажёр) ── */
+window.POOLS = {
+  p1:[
+    {q:'Что изучает химия?',opts:['Только движение тел','Вещества, их свойства и превращения','Только живые организмы','Звёзды и планеты'],a:1,ex:'Химия — наука о веществах, их свойствах и превращениях.'},
+    {q:'Что из перечисленного — физическое тело (а не вещество)?',opts:['Вода','Медь','Гвоздь','Кислород'],a:2,ex:'Гвоздь — предмет (тело); медь, вода, кислород — вещества.'},
+    {q:'«Железо» — это…',opts:['Физическое тело','Вещество','Смесь','Явление'],a:1,ex:'Железо — вещество, из которого можно сделать разные тела.'},
+    {q:'Какое из свойств НЕ является свойством вещества?',opts:['Цвет','Плотность','Растворимость','Номер дома'],a:3,ex:'Цвет, плотность, растворимость — свойства вещества; номер дома — нет.'}
+  ],
+  p2:[
+    {q:'Смесь песка и воды — какая?',opts:['Однородная','Неоднородная','Чистое вещество','Раствор'],a:1,ex:'Песчинки видны и не растворяются — смесь неоднородная.'},
+    {q:'Как разделить раствор соли в воде, чтобы получить соль?',opts:['Фильтрованием','Выпариванием','Магнитом','Никак'],a:1,ex:'Вода испаряется при нагревании, соль остаётся.'},
+    {q:'Раствор сахара в воде — это…',opts:['Чистое вещество','Однородная смесь','Неоднородная смесь','Простое вещество'],a:1,ex:'Сахар растворён равномерно — однородная смесь (раствор).'},
+    {q:'Чем удобно разделить смесь железных опилок и серы?',opts:['Магнитом','Выпариванием','Перегонкой','Фильтрованием'],a:0,ex:'Железо притягивается магнитом, сера — нет.'}
+  ],
+  p3:[
+    {q:'Атом — это…',opts:['Самое крупное тело','Мельчайшая химически неделимая частица','Смесь веществ','Молекула воды'],a:1,ex:'Атом — мельчайшая химически неделимая частица вещества.'},
+    {q:'Химический элемент — это…',opts:['Любая частица','Вид атомов с одинаковым зарядом ядра','Молекула','Смесь атомов'],a:1,ex:'Элемент определяется зарядом ядра (числом протонов).'},
+    {q:'Каков порядковый номер $Z$ кислорода?',hint:'число протонов в ядре',unit:'',a:8,ex:'У кислорода Z = 8.'},
+    {q:'Какой символ у железа?',opts:['Fe','Ir','F','Zn'],a:0,ex:'Железо — Fe (от лат. ferrum).'}
+  ]
+};
+
+/* ── вспомогательные конструкторы контента ── */
+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 wgt(title, inner){
+  return '<div class="wgt"><div class="wgt-h"><svg class="ic" viewBox="0 0 24 24"><path d="M4 7h16M4 12h16M4 17h10"/></svg> '+title+'</div>'+inner+'</div>';
+}
+
+/* ── BUILDERS: реальные (Волна 1) + заглушки для остальных ── */
+function build_p1(){
+  document.getElementById('p1-body').innerHTML =
+    '<div class="para-hero"><div class="ph-label">§ 1 · Химия 7</div><h2>Химия — наука о веществах</h2>'
+    +'<div class="ph-desc">С чего начинается химия: чем тело отличается от вещества и как химики изучают вещества.</div>'
+    +'<div class="ph-tags"><span class="ph-tag">вещество</span><span class="ph-tag">тело</span><span class="ph-tag">свойства</span></div></div>'
+    +makeCard('theory','Вещества и тела','§1','<p><b>Химия</b> — наука о веществах, их свойствах и превращениях. <b>Физическое тело</b> — это предмет (гвоздь, стакан, ложка). <b>Вещество</b> — то, из чего состоит тело (железо, стекло, вода).</p>'
+      +'<div class="def-box">Из <b>одного</b> вещества можно изготовить <b>много разных</b> тел: из стекла — стакан, колбу, линзу. И наоборот, одно тело может состоять из нескольких веществ.</div>')
+    +makeCard('theory','Свойства веществ','§1','<p>Каждое вещество узнают по его <b>свойствам</b>: цвет, запах, агрегатное состояние, плотность, температуры плавления и кипения, растворимость в воде, тепло- и электропроводность.</p>'
+      +'<p>По набору свойств одно вещество отличают от другого: например, медь — красная и проводит ток, а сера — жёлтая и ток не проводит.</p>')
+    +makeCard('rule','Наблюдение и эксперимент','§1','<p>Химия — <b>экспериментальная</b> наука. Главные методы — <b>наблюдение</b> и <b>опыт (эксперимент)</b>. Опыты проводят в химической лаборатории, используя оборудование: пробирки, колбы, стаканы, спиртовку, штатив. Работать нужно по <b>правилам техники безопасности</b>.</p>')
+    +wgt('Распредели: физическое тело или вещество?','<div id="p1-cls"></div>')
+    +rememberBox(['Тело — предмет; вещество — то, из чего он сделан.','Вещество узнают по свойствам (цвет, плотность, растворимость…).','Химия изучает вещества опытным путём в лаборатории.'])
+    +qList(['Чем тело отличается от вещества? Приведи примеры.','Назови 3 свойства, по которым можно отличить медь от серы.','Почему в лаборатории важно соблюдать правила безопасности?'])
+    +secNav(null,'p2')+readButton('p1');
+  wireReadBtn('p1');
+}
+
+function build_p2(){
+  document.getElementById('p2-body').innerHTML =
+    '<div class="para-hero"><div class="ph-label">§ 2 · Химия 7</div><h2>Чистые вещества и смеси</h2>'
+    +'<div class="ph-desc">Чем чистое вещество отличается от смеси и как смеси разделяют на составные части.</div>'
+    +'<div class="ph-tags"><span class="ph-tag">смесь</span><span class="ph-tag">однородная</span><span class="ph-tag">разделение</span></div></div>'
+    +makeCard('theory','Чистое вещество и смесь','§2','<p><b>Чистое вещество</b> имеет постоянный состав и постоянные свойства. <b>Смесь</b> состоит из двух и более веществ, и её свойства зависят от состава.</p>'
+      +'<div class="def-box"><b>Однородные</b> смеси: состав одинаков во всём объёме, частицы не видны (раствор соли или сахара в воде, воздух). <b>Неоднородные</b>: составные части видны (песок в воде, смесь железа и серы).</div>')
+    +makeCard('rule','Способы разделения смесей','§2','<p>Смеси разделяют, используя <b>различие свойств</b> веществ:</p>'
+      +'<ul><li><b>Фильтрование</b> — нерастворимое отделяют от жидкости.</li><li><b>Выпаривание</b> — выделяют растворённое вещество, испаряя воду.</li><li><b>Отстаивание</b> (делительная воронка) — несмешивающиеся жидкости разной плотности.</li><li><b>Перегонка (дистилляция)</b> — вещества с разной температурой кипения.</li><li><b>Действие магнитом</b> — если одно вещество притягивается.</li></ul>')
+    +makeCard('example','Разделение смеси соли и песка',null,'<div class="exa-step">1) Добавить воду — соль растворится, песок нет. 2) <b>Фильтрование</b> — песок останется на фильтре. 3) <b>Выпаривание</b> фильтрата — получим чистую соль.</div>')
+    +wgt('Подбери способ разделения смеси','<div id="p2-sep"></div>')
+    +rememberBox(['Чистое вещество — постоянный состав и свойства.','Смеси бывают однородные и неоднородные.','Способ разделения выбирают по различию свойств веществ.'])
+    +qList(['Приведи пример однородной и неоднородной смеси.','Как разделить смесь воды и растительного масла?','Почему смесь соли и песка нельзя разделить только фильтрованием?'])
+    +secNav('p1','pr1')+readButton('p2');
+  wireReadBtn('p2');
+}
+
+function build_pr1(){
+  document.getElementById('pr1-body').innerHTML =
+    '<div class="para-hero"><div class="ph-label">Практическая работа 1</div><h2>Знакомство с лабораторией. Разделение смесей</h2>'
+    +'<div class="ph-desc">Познакомиться с лабораторным оборудованием и разделить неоднородную смесь на чистые вещества.</div></div>'
+    +makeCard('lab','Оборудование и порядок работы',null,'<p><b>Оборудование:</b> стакан, стеклянная палочка, воронка с фильтром, фарфоровая чашка, спиртовка, штатив.</p>'
+      +'<ol><li>Рассмотри смесь поваренной соли и песка — она <b>неоднородная</b>.</li><li>Пересыпь смесь в стакан, добавь воды и размешай — соль растворится.</li><li><b>Профильтруй</b> смесь: песок останется на фильтре, раствор соли пройдёт.</li><li><b>Выпари</b> фильтрат в фарфоровой чашке — вода испарится, останется соль.</li><li>Сделай вывод: какие свойства позволили разделить смесь.</li></ol>'
+      +'<div class="note-safe"><svg viewBox="0 0 24 24"><path d="M12 9v4M12 17h.01"/><path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"/></svg> Со спиртовкой и горячей чашкой работай осторожно; не пробуй вещества на вкус.</div>')
+    +wgt('Тренажёр: выбери способ разделения','<div id="pr1-sep"></div>')
+    +secNav('p2','p3')+readButton('pr1');
+  wireReadBtn('pr1');
+}
+
+function build_p3(){
+  document.getElementById('p3-body').innerHTML =
+    '<div class="para-hero"><div class="ph-label">§ 3 · Химия 7</div><h2>Атомы. Химические элементы</h2>'
+    +'<div class="ph-desc">Из каких мельчайших частиц состоят вещества и что такое химический элемент.</div>'
+    +'<div class="ph-tags"><span class="ph-tag">атом</span><span class="ph-tag">элемент</span><span class="ph-tag">символ</span></div></div>'
+    +makeCard('theory','Атомы','§3','<p>Все вещества состоят из мельчайших частиц. <b>Атом</b> — мельчайшая химически неделимая частица вещества. Атомы очень малы: их нельзя увидеть даже в обычный микроскоп.</p>')
+    +makeCard('theory','Химические элементы','§3','<p><b>Химический элемент</b> — это вид атомов с одинаковым зарядом ядра. Каждый элемент имеет <b>название</b> и <b>символ</b> (знак): водород — $\\text{H}$, кислород — $\\text{O}$, железо — $\\text{Fe}$. Порядковый номер элемента $Z$ равен числу протонов в ядре его атомов.</p>'
+      +'<div class="def-box">Известно более 100 химических элементов. В земной коре больше всего атомов кислорода и кремния, а во Вселенной — водорода.</div>')
+    +wgt('Каталог элементов: клик → номер, название, $A_r$','<div class="el-grid" id="p3-el"></div><div class="el-info" id="p3-elinfo">Выбери элемент, чтобы увидеть его характеристики.</div>')
+    +wgt('Тренажёр: символ → название элемента','<div id="p3-drill"></div>')
+    +rememberBox(['Атом — мельчайшая химически неделимая частица.','Химический элемент — вид атомов с одинаковым зарядом ядра.','У каждого элемента есть символ и порядковый номер $Z$.'])
+    +qList(['Чем атом отличается от химического элемента?','Запиши символы водорода, кислорода, железа и меди.','Что показывает порядковый номер элемента?'])
+    +secNav('pr1','p4')+readButton('p3');
+  wireReadBtn('p3');
+}
+
+/* заглушки для ещё не наполненных § (фазы — следующие волны) */
 (function(){
   var P = window.PARAS, B = {};
   function ph(p, prev, next){
@@ -116,7 +227,7 @@ window.TIPS = [{ sec:'p1', html:'Глава наполняется содерж
         '<div class="para-hero"><div class="ph-label">' + p.num + ' · Химия 7</div><h2>' + p.name + '</h2>'
         + '<div class="ph-desc">Содержание этого ' + (p.final ? 'раздела' : 'параграфа') + ' готовится.</div></div>'
         + makeCard('theory', p.name, p.num,
-            '<p>Скоро здесь появятся теория, наглядные SVG-схемы, молекулярные модели и интерактивные тренажёры по теме «' + p.name + '». Пока доступна навигация по главе' + (p.final ? '.' : ' и отметка о прочтении.') + '</p>')
+            '<p>Скоро здесь появятся теория, наглядные SVG-схемы и интерактивные тренажёры по теме «' + p.name + '». Пока доступна навигация по главе' + (p.final ? '.' : ' и отметка о прочтении.') + '</p>')
         + secNav(prev, next) + (p.final ? '' : readButton(p.id));
       if (!p.final) wireReadBtn(p.id);
     };
@@ -126,6 +237,12 @@ window.TIPS = [{ sec:'p1', html:'Глава наполняется содерж
   }
   window.BUILDERS = B;
 })();
+
+/* переопределяем заглушки реальными builder'ами Волны 1 */
+window.BUILDERS.p1 = build_p1;
+window.BUILDERS.p2 = build_p2;
+window.BUILDERS.pr1 = build_pr1;
+window.BUILDERS.p3 = build_p3;
 </script>
 
 </body>