@

feat(chemistry-8): Phase 6b — Глава 6 «Растворы» (§46–52) — учебник завершён

Глава на движке (7 § + ПР4 + финал-босс):
- §46 смеси (классификатор однородные/неоднородные)
- §47 растворение в воде (гидратация, анимация частиц)
- §48 растворимость — кривая s=f(t) (KNO₃ vs NaCl)
- §49 качественные характеристики (насыщ./ненасыщ.)
- §50 массовая доля (калькулятор w); §51 молярная концентрация (калькулятор c=n/V) + ПР4
- §52 вода в жизни; финал-босс; POOLS ~25 задач

chem8_ch6_widgets.js: классификатор смесей, кривая растворимости, калькуляторы w и c.

ИТОГО: учебник «Химия 8» завершён — вводный раздел + 6 глав, все 52 §, 4 лаб. опыта,
4 практические работы, движок + 12 химических виджетов. Тесты: 37/37.
--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

@@ -141,3 +141,17 @@ test('ch5: SPA без ошибок, 5 карточек, §42 активен, с.
   doc.defaultView.goTo('p44'); await wait(120);
   assert.ok(doc.querySelector('#c-redox-pick option'), 'электронный баланс §44');
 });
+
+/* ── Глава 6 ── */
+test('ch6: SPA без ошибок, 8 карточек, §46 активен, w/c калькуляторы', async () => {
+  const { doc, errors } = await loadDom('chemistry_8_ch6.html', '/js/chem8_ch6_widgets.js');
+  assert.deepEqual(errors, [], 'нет ошибок: ' + errors.join(' | '));
+  assert.equal(doc.querySelectorAll('#psel-grid .psel-card').length, 8, '7 § + финал');
+  assert.ok(doc.querySelector('.sec.active') && doc.querySelector('.sec.active').id === 'sec-p46', '§46 активен');
+  await wait(120);
+  assert.ok(doc.querySelector('#c-mix .cls-chip'), 'классификатор смесей §46');
+  doc.defaultView.goTo('p50'); await wait(120);
+  assert.ok(doc.querySelector('#c-wcalc #w-go'), 'калькулятор w §50');
+  doc.defaultView.goTo('p51'); await wait(120);
+  assert.ok(doc.querySelector('#c-ccalc #c-go'), 'калькулятор c §51');
+});

backend/tests/chemistry8.test.js

@@ -113,13 +113,9 @@ 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', 'chemistry-8-ch4', 'chemistry-8-ch5'].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 + ' подключает движок');
-    } else {
-      assert.ok(html.includes("const _TB_SLUG = '" + ch.slug + "'"), ch.file + ' slug (каркас)');
-    }
+    // все 8 страниц (intro + 6 глав) перестроены на движок chem8_engine.js (SPA)
+    assert.ok(html.includes("slug:'" + ch.slug + "'"), ch.file + ' slug в CHEM8_CFG');
+    assert.ok(html.includes('/js/chem8_engine.js'), ch.file + ' подключает движок');
   }
 });
 
@@ -197,6 +193,16 @@ test('Phase 6 — Глава 5 построена + oxStates корректен'
   assert.equal(C.oxStates('HNO3').N, 5, 'N в HNO₃ = +5');
 });
 
+test('Phase 6 — Глава 6 построена (§46–52 + ПР4 + финал)', () => {
+  const html = fs.readFileSync(path.join(TB, 'chemistry_8_ch6.html'), 'utf8');
+  for (let i = 46; i <= 52; i++) assert.ok(html.includes('id="sec-p' + i + '"'), '§' + i + ' секция');
+  assert.ok(html.includes('id="c-mix"'), 'классификатор смесей §46');
+  assert.ok(html.includes('id="c-wcalc"'), 'калькулятор w §50');
+  assert.ok(html.includes('id="c-ccalc"'), 'калькулятор c §51');
+  assert.ok(html.includes('Практическая работа 4'), 'ПР4');
+  assert.ok(html.includes('/js/chem8_ch6_widgets.js'), 'виджеты главы 6');
+});
+
 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/js/chem8_ch6_widgets.js

@@ -0,0 +1,81 @@
+/* chem8_ch6_widgets.js — виджеты Главы 6 «Растворы».
+ * Использует window.Chem8: classifier, solubilityTable, molarMass.
+ */
+(function (W) {
+  'use strict';
+  function C() { return W.Chem8 || {}; }
+  function $(id) { return document.getElementById(id); }
+  function rr(v, d) { var p = Math.pow(10, d == null ? 2 : d); return (Math.round(v * p) / p).toString().replace('.', ','); }
+
+  /* §46 — классификатор смесей */
+  function mount_p46() {
+    var el = $('c-mix'); if (!el || el._b || !C().classifier) return; el._b = 1;
+    C().classifier(el, {
+      items: [
+        { id: 'air', label: 'воздух', cat: 'odn' }, { id: 'saltsol', label: 'раствор соли', cat: 'odn' }, { id: 'steel', label: 'сталь', cat: 'odn' },
+        { id: 'sandwater', label: 'песок + вода', cat: 'neod' }, { id: 'milk', label: 'молоко', cat: 'neod' }, { id: 'granite', label: 'гранит', cat: 'neod' }
+      ],
+      buckets: [{ cat: 'odn', label: 'Однородные (растворы)' }, { cat: 'neod', label: 'Неоднородные' }],
+      onCheck: function (ok) { if (ok && W.addXp) W.addXp(8, 'p46-mix'); }
+    });
+  }
+
+  /* §48 — кривая растворимости s = f(t) */
+  var CURVE = { KNO3: [13, 21, 32, 46, 64, 88, 110, 138, 169, 202, 246], NaCl: [35.7, 35.8, 36, 36.3, 36.6, 37, 37.3, 37.8, 38.4, 39, 39.8] };
+  function mount_p48() {
+    var el = $('c-solcurve'); if (!el || el._b) return; el._b = 1;
+    el.innerHTML = '<div class="fld"><label>Вещество</label><select id="sc-sub"><option value="KNO3">KNO₃ (нитрат калия)</option><option value="NaCl">NaCl (соль)</option></select><label>t, °C</label><input type="range" id="sc-t" min="0" max="100" step="10" value="40"><span class="bd" id="sc-tv"></span></div><div id="sc-plot"></div><div class="out" id="sc-out"></div>';
+    var sub = $('sc-sub'), tr = $('sc-t'), tv = $('sc-tv'), plot = $('sc-plot'), out = $('sc-out');
+    function draw() {
+      var data = CURVE[sub.value], t = +tr.value, idx = t / 10, s = data[idx];
+      tv.textContent = t + ' °C';
+      var maxS = Math.max.apply(null, CURVE.KNO3);
+      var W0 = 280, H0 = 140, pad = 24;
+      var pts = data.map(function (v, i) { var x = pad + i / 10 * (W0 - pad * 2); var y = H0 - pad - v / maxS * (H0 - pad * 2); return x.toFixed(1) + ',' + y.toFixed(1); }).join(' ');
+      var cx = pad + idx / 10 * (W0 - pad * 2), cy = H0 - pad - s / maxS * (H0 - pad * 2);
+      plot.innerHTML = '<svg viewBox="0 0 ' + W0 + ' ' + H0 + '" style="width:100%;max-width:340px;color:var(--pri)">'
+        + '<line x1="' + pad + '" y1="' + (H0 - pad) + '" x2="' + (W0 - pad) + '" y2="' + (H0 - pad) + '" stroke="currentColor" opacity=".4"/>'
+        + '<line x1="' + pad + '" y1="' + pad + '" x2="' + pad + '" y2="' + (H0 - pad) + '" stroke="currentColor" opacity=".4"/>'
+        + '<polyline points="' + pts + '" fill="none" stroke="var(--pri)" stroke-width="2"/>'
+        + '<circle cx="' + cx.toFixed(1) + '" cy="' + cy.toFixed(1) + '" r="5" fill="var(--pri)"/>'
+        + '<text x="' + (W0 - pad) + '" y="' + (H0 - 6) + '" text-anchor="end" font-size="9" fill="currentColor">t, °C</text>'
+        + '<text x="' + pad + '" y="' + (pad - 8) + '" font-size="9" fill="currentColor">s, г/100г</text>'
+        + '</svg>';
+      out.className = 'out ok';
+      out.innerHTML = '<span class="bd">При ' + t + ' °C растворимость ' + sub.value + ' ≈ <b>' + rr(s, 1) + ' г</b> на 100 г воды.' + (sub.value === 'KNO3' ? ' Растворимость сильно растёт с температурой.' : ' У NaCl почти не зависит от t.') + '</span>';
+    }
+    sub.addEventListener('change', draw); tr.addEventListener('input', draw); draw();
+  }
+
+  /* §50 — массовая доля w */
+  function mount_p50() {
+    var el = $('c-wcalc'); if (!el || el._b) return; el._b = 1;
+    el.innerHTML = '<div class="fld"><label>m(вещества), г</label><input type="number" id="w-ms" value="20" style="width:80px"><label>m(воды), г</label><input type="number" id="w-mw" value="80" style="width:80px"><button class="btn primary" id="w-go">Найти w</button></div><div class="out" id="w-out"></div>';
+    function calc() {
+      var ms = parseFloat($('w-ms').value), mw = parseFloat($('w-mw').value);
+      if (isNaN(ms) || isNaN(mw) || ms + mw <= 0) { $('w-out').className = 'out bad'; $('w-out').textContent = 'Введите массы.'; return; }
+      var w = ms / (ms + mw) * 100;
+      $('w-out').className = 'out ok';
+      $('w-out').innerHTML = '<span class="bd">m(раствора) = ' + ms + ' + ' + mw + ' = ' + (ms + mw) + ' г<br>w = m(в-ва)/m(р-ра) = ' + ms + '/' + (ms + mw) + ' = <b>' + rr(w, 1) + ' %</b></span>';
+    }
+    $('w-go').addEventListener('click', calc); calc();
+  }
+
+  /* §51 — молярная концентрация c = n/V */
+  function mount_p51() {
+    var el = $('c-ccalc'); if (!el || el._b) return; el._b = 1;
+    el.innerHTML = '<div class="fld"><label>Вещество</label><input type="text" id="c-f" value="NaOH" style="width:110px;font-family:var(--mono)"><label>m, г</label><input type="number" id="c-m" value="40" style="width:70px"><label>V, л</label><input type="number" id="c-v" value="1" step="0.1" style="width:70px"><button class="btn primary" id="c-go">Найти c</button></div><div class="out" id="c-out"></div>';
+    function calc() {
+      var f = $('c-f').value.trim(), M = C().molarMass ? C().molarMass(f) : NaN, m = parseFloat($('c-m').value), V = parseFloat($('c-v').value);
+      if (isNaN(M)) { $('c-out').className = 'out bad'; $('c-out').textContent = 'Не удалось разобрать формулу.'; return; }
+      if (isNaN(m) || isNaN(V) || V <= 0) { $('c-out').className = 'out bad'; $('c-out').textContent = 'Введите m и V.'; return; }
+      var n = m / M, c = n / V;
+      $('c-out').className = 'out ok';
+      $('c-out').innerHTML = '<span class="bd">M(' + f + ') = ' + M + ' г/моль<br>n = m/M = ' + m + '/' + M + ' = ' + rr(n) + ' моль<br>c = n/V = ' + rr(n) + '/' + rr(V) + ' = <b>' + rr(c) + ' моль/л</b></span>';
+    }
+    $('c-go').addEventListener('click', calc); calc();
+  }
+
+  W.CHEM8_WIDGETS = { p46: mount_p46, p50: mount_p50, p51: mount_p51 };
+  W.FLAG_MOUNTS = { p48: mount_p48 };
+})(window);

frontend/textbooks/chemistry_8_ch6.html

@@ -7,131 +7,224 @@
 <meta http-equiv="Expires" content="0">
 <meta name="viewport" content="width=device-width,initial-scale=1.0">
 <title>Химия 8 · Глава 6 · «Растворы»</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>
+/* Глава 6 — cyan */
+:root{ --pri:#0891b2; --pri-d:#0e7490; --pri-l:#22d3ee; --pri-soft:#cffafe; --sec-acc:#0891b2; --sec-acc-d:#0e7490; --sec-acc-soft:#cffafe; }
+html.dark{ --bg:#08191c; --card:#10282d; --card-soft:#143539; --text:#cffafe; --muted:#67e8f9; --border:#1a4046; --pri-soft:rgba(8,145,178,.22); --sec-acc-soft:rgba(8,145,178,.22); }
+.hdr{background:linear-gradient(110deg,#164e63 0%,#0891b2 55%,#22d3ee 100%)}
+.hdr::before{content:'ГЛАВА 6'}
+</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:#0891b2; --pri-d:#0e7490; --pri-l:#22d3ee; --pri-soft:#cffafe;
-  --sh:0 4px 16px rgba(0,0,0,.06); --sh-h:0 12px 32px rgba(0,0,0,.12);
-}
-html.dark{ --bg:#08191c; --card:#10282d; --text:#cffafe; --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,#0e7490 0%,#0891b2 55%,#22d3ee 100%);color:#fff;padding:34px 24px 30px;overflow:hidden;border-bottom:2px solid rgba(255,255,255,.18)}
-.hdr::before{content:'ГЛАВА 6';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_ch6_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">Глава 6 &middot; § 46–52</div>
-      <h1>Растворы</h1>
+      <h1>Химия 8 · Глава 6</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('p46')"><svg class="ic" viewBox="0 0 24 24"><polygon points="6 4 20 12 6 20 6 4" fill="currentColor" stroke="none"/></svg> Начать § 46</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-p46" class="sec"><div class="sec-header"><span class="sec-num">§ 46</span><h2 class="sec-h">Смеси веществ</h2></div><div id="p46-body"></div></section>
+    <section id="sec-p47" class="sec"><div class="sec-header"><span class="sec-num">§ 47</span><h2 class="sec-h">Растворение веществ в воде</h2></div><div id="p47-body"></div></section>
+    <section id="sec-p48" class="sec"><div class="sec-header"><span class="sec-num">§ 48</span><h2 class="sec-h">Характеристики растворимости веществ</h2></div><div id="p48-body"></div></section>
+    <section id="sec-p49" class="sec"><div class="sec-header"><span class="sec-num">§ 49</span><h2 class="sec-h">Качественные характеристики состава растворов</h2></div><div id="p49-body"></div></section>
+    <section id="sec-p50" class="sec"><div class="sec-header"><span class="sec-num">§ 50</span><h2 class="sec-h">Массовая доля растворённого вещества</h2></div><div id="p50-body"></div></section>
+    <section id="sec-p51" class="sec"><div class="sec-header"><span class="sec-num">§ 51</span><h2 class="sec-h">Молярная концентрация · ПР 4</h2></div><div id="p51-body"></div></section>
+    <section id="sec-p52" class="sec"><div class="sec-header"><span class="sec-num">§ 52</span><h2 class="sec-h">Вода и растворы в жизни человека</h2></div><div id="p52-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">§ 46</span><span class="ol-name">Смеси веществ</span></li>
-      <li class="ol-para"><span class="ol-num">§ 47</span><span class="ol-name">Растворение веществ в воде</span></li>
-      <li class="ol-para"><span class="ol-num">§ 48</span><span class="ol-name">Характеристики растворимости веществ</span></li>
-      <li class="ol-para"><span class="ol-num">§ 49</span><span class="ol-name">Качественные характеристики состава растворов</span></li>
-      <li class="ol-para"><span class="ol-num">§ 50</span><span class="ol-name">Количественные характеристики растворённых веществ. Массовая доля растворённого вещества</span></li>
-      <li class="ol-para"><span class="ol-num">§ 51</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">§ 52</span><span class="ol-name">Вода и растворы в жизни и деятельности человека</span></li>
-  </ul>
+  <aside class="col-side"><div id="sidebar-content"></div></aside>
 </main>
 
-<footer class="foot">
-  Интерактивный учебник «Химия — 8 класс» &middot; Глава 6 &middot; LearnSpace
-</footer>
+<footer class="foot">Интерактивный учебник «Химия — 8 класс» · Глава 6 · «Растворы» · 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-ch6';
-(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-ch6', themeKey:'chemistry8_theme', xpKey:'chemistry8_xp', progKey:'chemistry8_ch6_progress', achKey:'chemistry8_ch6_ach' };
+
+window.PARAS = [
+  {id:'p46',num:'§ 46',name:'Смеси веществ',sub:'однород./неоднород.'},
+  {id:'p47',num:'§ 47',name:'Растворение в воде',sub:'гидратация'},
+  {id:'p48',num:'§ 48',name:'Растворимость',sub:'s = f(t)'},
+  {id:'p49',num:'§ 49',name:'Качественные характеристики',sub:'насыщ./ненасыщ.'},
+  {id:'p50',num:'§ 50',name:'Массовая доля',sub:'w = m/m'},
+  {id:'p51',num:'§ 51',name:'Молярная концентрация · ПР4',sub:'c = n/V'},
+  {id:'p52',num:'§ 52',name:'Вода в жизни',sub:'значение'},
+  {id:'final1',num:'★',name:'Финал главы',sub:'босс · ачивка',final:true}
+];
+window.ACH_LABELS = { start:'Начало главы 6!', final1_tasks:'Растворы освоены!' };
+['p46','p47','p48','p49','p50','p51','p52'].forEach(function(id){ window.ACH_LABELS[id+'_done']=id.toUpperCase()+' изучен!'; });
+
+window.SIDEBARS = {
+  p46:{title:'§46 Смеси',rows:[['Однородные','раствор, воздух, сплав'],['Неоднородные','песок+вода, гранит'],['Разделение','фильтрование, выпаривание']]},
+  p47:{title:'§47 Растворение',rows:[['Раствор','растворитель + в-во'],['Гидратация','вода окружает частицы'],['Тепловой эффект','+ или − тепло']]},
+  p48:{title:'§48 Растворимость',rows:[['Растворимость','г на 100 г воды'],['Зависит','от t (для большинства)'],['Кривая','s = f(t)']]},
+  p49:{title:'§49 Характеристики',rows:[['Ненасыщенный','можно ещё растворить'],['Насыщенный','предел растворения'],['Разбавл./конц.','мало/много в-ва']]},
+  p50:{title:'§50 Массовая доля',rows:[['w','= m(в-ва)/m(р-ра)'],['В %','×100%'],['m(р-ра)','= m(в-ва)+m(воды)']]},
+  p51:{title:'§51 Концентрация',rows:[['c','= n/V'],['Единица','моль/л'],['ПР4','приготовление раствора']]},
+  p52:{title:'§52 Вода',rows:[['Растворитель','№1 в природе'],['Очистка','фильтрование, кипячение'],['В быту','напитки, лекарства']]},
+  final1:{title:'Финал главы 6',rows:[['§§46–52','растворы'],['Награда','ачивка + XP']]}
+};
+window.TIPS = [
+  {sec:'p46',html:'Однородные смеси (растворы) — состав одинаков во всём объёме (воздух, раствор соли, сплав). Неоднородные — видны части (песок + вода).'},
+  {sec:'p47',html:'При растворении частицы вещества окружаются молекулами воды (гидратация). Может выделяться или поглощаться тепло.'},
+  {sec:'p48',html:'Растворимость — масса вещества, растворяющаяся в 100 г воды. У большинства твёрдых веществ растёт с температурой.'},
+  {sec:'p49',html:'Ненасыщенный раствор может растворить ещё; насыщенный — достиг предела при данной температуре.'},
+  {sec:'p50',html:'Массовая доля w = m(вещества) / m(раствора); m(раствора) = m(вещества) + m(воды).'},
+  {sec:'p51',html:'Молярная концентрация c = n/V (моль/л). Сначала найди n = m/M.'},
+  {sec:'p52',html:'Вода — универсальный растворитель и основа жизни; её очищают фильтрованием, отстаиванием, кипячением.'},
+  {sec:'final1',html:'Смеси, растворимость, w и c — повтори перед боссом.'}
+];
+
+window.POOLS = {
+  p46:[
+    {q:'Однородная смесь (раствор) — это смесь, в которой…',opts:['Видны отдельные части','Состав одинаков во всём объёме','Всегда есть осадок','Только газы'],a:1,ex:'В растворе компоненты не различимы.'},
+    {q:'Какая смесь неоднородная?',opts:['Воздух','Раствор сахара','Песок и вода','Сталь'],a:2,ex:'Песок + вода — видны части.'},
+    {q:'Как разделить смесь песка и воды?',opts:['Выпариванием','Фильтрованием','Перегонкой','Намагничиванием'],a:1,ex:'Фильтрование отделяет нерастворимый песок.'}
+  ],
+  p47:[
+    {q:'Раствор состоит из…',opts:['Только растворителя','Растворителя и растворённого вещества','Только осадка','Двух газов'],a:1,ex:'Растворитель + растворённое вещество.'},
+    {q:'Процесс окружения частиц вещества молекулами воды называют…',opts:['Гидратацией','Фильтрованием','Кипением','Кристаллизацией'],a:0,ex:'Гидратация.'},
+    {q:'При растворении некоторых веществ раствор нагревается, потому что…',opts:['Вода кипит','Выделяется тепло','Свет','Газ'],a:1,ex:'Тепловой эффект растворения.'}
+  ],
+  p48:[
+    {q:'Растворимость измеряют в…',opts:['Граммах на 100 г воды','Литрах','Молях на грамм','Процентах массы ядра'],a:0,ex:'г вещества на 100 г воды.'},
+    {q:'Как меняется растворимость большинства твёрдых веществ при нагревании?',opts:['Падает','Растёт','Не меняется','Исчезает'],a:1,ex:'Обычно растёт с температурой.'},
+    {q:'У какого вещества растворимость почти не зависит от температуры?',opts:['KNO₃','NaCl','сахар','—'],a:1,ex:'У NaCl растворимость почти постоянна.'}
+  ],
+  p49:[
+    {q:'Насыщенный раствор — это раствор, в котором…',opts:['Мало вещества','Вещество больше не растворяется при данной t','Есть осадок всегда','Только вода'],a:1,ex:'Достигнут предел растворения.'},
+    {q:'Ненасыщенный раствор…',opts:['Нельзя разбавить','Может растворить ещё вещества','Всегда с осадком','Кипит'],a:1,ex:'Ещё не достиг предела.'},
+    {q:'«Концентрированный» раствор означает, что вещества в нём…',opts:['Мало','Много','Нет','Только газ'],a:1,ex:'Много растворённого вещества.'}
+  ],
+  p50:[
+    {q:'Массовая доля w равна…',opts:['m(в-ва)/m(воды)','m(в-ва)/m(раствора)','m(раствора)/m(в-ва)','n/V'],a:1,ex:'w = m(вещества)/m(раствора).'},
+    {q:'В 80 г воды растворили 20 г соли. Чему равна w (%)?',hint:'20/(20+80)·100',unit:'%',a:20,ex:'20/100·100 = 20 %.'},
+    {q:'Масса раствора при растворении 5 г соли в 95 г воды равна…',hint:'5+95',unit:'г',a:100,ex:'m(р-ра)=100 г.'}
+  ],
+  p51:[
+    {q:'Молярная концентрация c равна…',opts:['m/V','n/V','n·V','m·M'],a:1,ex:'c = n/V (моль/л).'},
+    {q:'40 г NaOH (M=40) растворили до объёма 1 л. Чему равна c?',hint:'n=m/M=1; c=n/V',unit:'моль/л',a:1,ex:'n=1 моль, c=1/1=1 моль/л.'},
+    {q:'В 2 л раствора содержится 1 моль вещества. Концентрация равна…',hint:'c=n/V',unit:'моль/л',a:0.5,ex:'1/2 = 0,5 моль/л.'}
+  ],
+  p52:[
+    {q:'Почему воду называют универсальным растворителем?',opts:['Она прозрачна','Растворяет очень многие вещества','Она лёгкая','Она кипит'],a:1,ex:'Вода растворяет множество веществ.'},
+    {q:'Какой способ НЕ используют для очистки воды?',opts:['Фильтрование','Отстаивание','Кипячение','Замораживание соли в неё'],a:3,ex:'Очищают фильтрованием, отстаиванием, кипячением.'},
+    {q:'Морская вода — это…',opts:['Чистое вещество','Раствор солей','Простое вещество','Оксид'],a:1,ex:'Раствор солей в воде.'}
+  ],
+  final1:[
+    {q:'Какая смесь однородная?',opts:['Песок + вода','Молоко','Раствор соли','Гранит'],a:2,ex:'Раствор соли — однородная.'},
+    {q:'Растворимость большинства твёрдых веществ при нагревании…',opts:['Падает','Растёт','Не меняется','—'],a:1,ex:'Растёт.'},
+    {q:'В 150 г воды растворили 50 г соли. w (%) =',hint:'50/200·100',unit:'%',a:25,ex:'25 %.'},
+    {q:'20 г NaOH (M=40) в 0,5 л раствора. c (моль/л) =',hint:'n=0,5; c=0,5/0,5',unit:'моль/л',a:1,ex:'1 моль/л.'},
+    {q:'Раствор, который больше не растворяет вещество, называют…',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 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>'; }
+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 = { p46:bp46, p47:bp47, p48:bp48, p49:bp49, p50:bp50, p51:bp51, p52:bp52, final1:bfinal };
+
+function bp46(){ document.getElementById('p46-body').innerHTML =
+  hero(7,'§ 46 · Глава 6','Смеси веществ','однород. / неоднород.','Большинство веществ вокруг — смеси. Их делят по тому, видны ли компоненты.',['смесь','разделение'])
+  +makeCard('theory','Виды смесей','§46','<p><b>Смесь</b> — несколько веществ вместе. <b>Однородные</b> смеси (растворы) — состав одинаков во всём объёме, частицы не видны (воздух, раствор соли, сплав). <b>Неоднородные</b> — компоненты различимы (песок + вода, молоко, гранит).</p><p>Смеси разделяют физическими способами: <b>фильтрование</b>, <b>отстаивание</b>, <b>выпаривание</b>, <b>перегонка</b>, действие магнитом.</p>')
+  +flag('Классификатор смесей','Распредели смеси на однородные и неоднородные.','<div id="c-mix"></div>')
+  +rememberBox(['Раствор — это однородная смесь.','Смеси разделяют физическими методами, без реакций.'])
+  +qList(['Чем раствор отличается от неоднородной смеси?','Как разделить смесь соли и песка?'])
+  +secNav(null,'p47')+readButton('p46'); wireReadBtn('p46'); }
+
+function bp47(){ document.getElementById('p47-body').innerHTML =
+  hero(4,'§ 47 · Глава 6','Растворение веществ в воде','растворитель + в-во','Что происходит, когда сахар «исчезает» в чае: вода разбирает вещество на частицы.',['раствор','гидратация'])
+  +makeCard('theory','Как идёт растворение','§47','<p><b>Раствор</b> = растворитель (чаще вода) + растворённое вещество. При растворении молекулы воды окружают частицы вещества и «растаскивают» их — это <b>гидратация</b>. При этом тепло может выделяться (растворение щёлочи) или поглощаться (растворение соли).</p>')
+  +'<div class="wgt"><div class="wgt-h"><svg class="ic" viewBox="0 0 24 24"><path d="M12 2v6M12 22a7 7 0 0 0 7-7c0-4-7-13-7-13S5 11 5 15a7 7 0 0 0 7 7z"/></svg> Растворение частиц вещества</div><div class="bt-stage"><svg viewBox="0 0 220 90" style="width:100%;max-width:300px;color:var(--pri)"><rect x="10" y="10" width="200" height="70" rx="10" fill="var(--pri)" opacity=".08" stroke="var(--pri)" stroke-width="1.5"/>'
+    +[ '40,30','70,55','110,35','150,60','185,30' ].map(function(p,i){var xy=p.split(',');return '<circle cx="'+xy[0]+'" cy="'+xy[1]+'" r="6" fill="var(--pri)"><animate attributeName="cy" values="'+xy[1]+';'+(+xy[1]-6)+';'+xy[1]+'" dur="'+(2+i*0.3)+'s" repeatCount="indefinite"/></circle>';}).join('')
+    +'</svg></div><div class="out"><span class="bd">Частицы вещества (точки) равномерно распределяются среди молекул воды.</span></div></div>'
+  +rememberBox(['Раствор = растворитель + растворённое вещество.','Гидратация — окружение частиц молекулами воды.'])
+  +qList(['Из чего состоит любой раствор?','Что такое гидратация?'])
+  +secNav('p46','p48')+readButton('p47'); wireReadBtn('p47'); }
+
+function bp48(){ document.getElementById('p48-body').innerHTML =
+  hero(8,'§ 48 · Глава 6','Характеристики растворимости веществ','s = f(t)','Сколько вещества можно растворить и как на это влияет температура.',['растворимость','кривая'])
+  +makeCard('theory','Растворимость','§48','<div class="def-box"><b>Растворимость</b> — масса вещества (в граммах), которая растворяется в 100 г воды при данной температуре до образования насыщенного раствора.</div><p>У большинства твёрдых веществ растворимость <b>растёт</b> с температурой (KNO₃), у некоторых почти не меняется (NaCl). Зависимость показывает <b>кривая растворимости</b>.</p>')
+  +flag('Кривая растворимости s = f(t)','Двигай температуру — точка идёт по кривой; сравни KNO₃ и NaCl.','<div id="c-solcurve"></div>')
+  +rememberBox(['Растворимость — г на 100 г воды.','У большинства твёрдых веществ растёт с t.'])
+  +qList(['Как меняется растворимость KNO₃ при нагревании?','Почему растворимость NaCl почти постоянна?'])
+  +secNav('p47','p49')+readButton('p48'); wireReadBtn('p48'); }
+
+function bp49(){ document.getElementById('p49-body').innerHTML =
+  hero(5,'§ 49 · Глава 6','Качественные характеристики состава растворов','насыщ. / ненасыщ.','Как «на словах» описать раствор: много или мало вещества, можно ли растворить ещё.',['насыщенный','концентрированный'])
+  +makeCard('theory','Качественные характеристики','§49','<p><b>Ненасыщенный</b> раствор — может растворить ещё вещества. <b>Насыщенный</b> — достиг предела растворения при данной температуре. <b>Пересыщенный</b> — содержит больше вещества, чем в насыщенном (неустойчив).</p><p><b>Разбавленный</b> — мало растворённого вещества, <b>концентрированный</b> — много. Это <b>качественные</b> (приблизительные) характеристики; точные — массовая доля и концентрация.</p>')
+  +rememberBox(['Насыщенный — предел растворения при данной t.','«Разбавленный/концентрированный» — приблизительно.'])
+  +qList(['Чем насыщенный раствор отличается от ненасыщенного?','Можно ли в насыщенный раствор добавить ещё вещества?'])
+  +secNav('p48','p50')+readButton('p49'); wireReadBtn('p49'); }
+
+function bp50(){ document.getElementById('p50-body').innerHTML =
+  hero(6,'§ 50 · Глава 6','Массовая доля растворённого вещества','w = m(в-ва)/m(р-ра)','Главная количественная характеристика раствора в быту и на этикетках.',['w','%'])
+  +makeCard('theory','Массовая доля','§50','<div class="def-box"><b>Массовая доля</b> w = m(растворённого вещества) / m(раствора). Часто выражают в процентах (× 100 %). Масса раствора = масса вещества + масса растворителя.</div><p>Пример: в 80 г воды растворили 20 г соли. m(р-ра) = 100 г, w = 20/100 = 0,2 = 20 %.</p>')
+  +flag('Калькулятор массовой доли','Введи массы вещества и воды — получишь w.','<div id="c-wcalc"></div>')
+  +rememberBox(['w = m(в-ва)/m(р-ра); m(р-ра) = m(в-ва)+m(воды).','w часто выражают в %.'])
+  +qList(['Найди w, если 30 г сахара растворили в 120 г воды.','Сколько соли в 200 г раствора с w = 10 %?'])
+  +secNav('p49','p51')+readButton('p50'); wireReadBtn('p50'); }
+
+function bp51(){ document.getElementById('p51-body').innerHTML =
+  hero(9,'§ 51 · Глава 6','Молярная концентрация · ПР 4','c = n/V','Точная «химическая» характеристика раствора — сколько моль вещества в литре.',['c','моль/л','ПР.4'])
+  +makeCard('theory','Молярная концентрация','§51','<div class="def-box"><b>Молярная концентрация</b> c = n/V — химическое количество растворённого вещества в 1 литре раствора, моль/л.</div><p>Чтобы найти c по массе: сначала n = m/M, затем c = n/V. Пример: 40 г NaOH (M = 40) в 1 л → n = 1 моль, c = 1 моль/л.</p>')
+  +flag('Калькулятор молярной концентрации','Введи формулу, массу и объём — получишь c = n/V.','<div id="c-ccalc"></div>')
+  +makeCard('lab','Практическая работа 4 · Приготовление раствора',null,'<p>Приготовь раствор с заданной массовой долей и молярной концентрацией: рассчитай нужную массу вещества, взвесь её, раствори в воде и доведи до нужного объёма в мерной колбе.</p>')
+  +rememberBox(['c = n/V (моль/л); сначала найди n = m/M.','Для приготовления раствора используют мерную колбу.'])
+  +qList(['Найди c, если 0,5 моль вещества в 2 л раствора.','Какую массу NaCl (M=58,5) нужно для 0,5 л раствора c = 1 моль/л?'])
+  +secNav('p50','p52')+readButton('p51'); wireReadBtn('p51'); }
+
+function bp52(){ document.getElementById('p52-body').innerHTML =
+  hero(7,'§ 52 · Глава 6','Вода и растворы в жизни человека','H₂O','Вода — основа жизни и самый важный растворитель на планете.',['вода','очистка','значение'])
+  +makeCard('theory','Значение воды','§52','<p>Вода — <b>универсальный растворитель</b>: в ней растворяются соли, газы, питательные вещества. Растворы — это кровь, морская вода, почвенный раствор, напитки, лекарства.</p><p>Питьевую воду <b>очищают</b>: отстаиванием, фильтрованием, обеззараживанием, кипячением. Беречь чистую воду — задача каждого.</p>')
+  +'<div class="lat-grid"><div class="lat-card"><h4>В организме</h4><ul><li>кровь, лимфа — растворы</li><li>перенос веществ</li></ul></div><div class="lat-card"><h4>В природе</h4><ul><li>морская вода</li><li>почвенный раствор</li></ul></div><div class="lat-card"><h4>В быту</h4><ul><li>напитки, чай</li><li>лекарства</li></ul></div><div class="lat-card"><h4>Очистка</h4><ul><li>фильтрование</li><li>кипячение</li></ul></div></div>'
+  +rememberBox(['Вода — универсальный растворитель и основа жизни.','Воду очищают фильтрованием, отстаиванием, кипячением.'])
+  +qList(['Почему воду называют универсальным растворителем?','Назови способы очистки воды.'])
+  +secNav('p51','final1')+readButton('p52'); wireReadBtn('p52'); }
+
+function bfinal(){ document.getElementById('final1-body').innerHTML =
+  hero('final','Финал главы 6','Босс: растворы','смеси · растворимость · w · c','Шесть интегрированных задач по всей главе. Победи босса — ачивка «Растворы освоены».')
+  +makeCard('rule','Шпаргалка главы',null,'<div class="formula-grid"><div class="fcard"><h3>Массовая доля</h3><div class="main-f">w = m(в-ва)/m(р-ра)</div></div><div class="fcard"><h3>Концентрация</h3><div class="main-f">c = n/V</div></div><div class="fcard"><h3>Растворимость</h3><div class="main-f">г / 100 г воды</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('p52',null); }
 </script>
 
 </body>