feat(math6): полировка Гл.2 — pieGrow, balanceScale, constAreaRect

Math6Anim.pieGrow (растущие сектора, §7 — заменил статичный Math6.pie,
цвета синхронны легенде), balanceScale (весы a·d ? b·c, §3, кнопка «другой
пример»), constAreaRect (обратная проп. = постоянная площадь, §4, ползунок x).
Headless-safe. Тесты math6: 20/20 (поправлен ассерт §7 svg→canvas).

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

frontend/textbooks/math_6_ch2.html

@@ -269,9 +269,16 @@ function buildP3(){
     +'<div id="p3-vq" class="qbox"></div>'
     +'<div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap"><button class="btn primary" data-v="1">Верна</button><button class="btn primary" data-v="0">Неверна</button></div>'
     +'<div class="feedback" id="p3-vfb"></div></div>';
+  h+='<div class="wg" id="p3-bal"><div class="wg-header"><span class="wg-badge">Анимация</span><div class="wg-title">Весы пропорции</div></div>'
+    +'<div class="wg-help">Пропорция верна, когда произведение крайних равно произведению средних: $a\\cdot d = b\\cdot c$ — весы в равновесии. Жми «другой пример».</div>'
+    +'<div id="p3-balfig"></div><div style="text-align:center;margin-top:6px"><button class="btn primary" id="p3-bal-next">Другой пример</button></div></div>';
   h+=secNav('p2','p4')+readBtn('p3');
   box.innerHTML=h; renderMath(box);
 
+  (function(){ if(!window.Math6Anim) return; var EX=[[3,4,6,8],[2,5,4,10],[3,4,5,8],[6,9,2,3],[2,3,5,8]];
+    var bal=Math6Anim.balanceScale(document.getElementById('p3-balfig'),{a:EX[0][0],b:EX[0][1],c:EX[0][2],d:EX[0][3]}); var k=0;
+    document.getElementById('p3-bal-next').addEventListener('click',function(){ k=(k+1)%EX.length; var e=EX[k]; bal.set(e[0],e[1],e[2],e[3]); }); })();
+
   (function(){
     var i=0,score=0,cur=null;
     function gen(){ var a=_ri(2,6), b=_ri(2,9), m=_ri(2,6); cur={a:a,b:b,c:a*m,x:b*m}; }
@@ -333,9 +340,16 @@ function buildP4(){
     +'<div id="p4-tq" class="qbox"></div>'
     +'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap"><input type="text" id="p4-ta" class="tinp" style="width:100px;text-align:center"><button class="btn primary" id="p4-tgo">Проверить</button></div>'
     +'<div class="feedback" id="p4-tfb"></div></div>';
+  h+='<div class="wg" id="p4-car"><div class="wg-header"><span class="wg-badge">Анимация</span><div class="wg-title">Обратная пропорция: постоянная площадь</div></div>'
+    +'<div class="wg-help">Двигай ширину $x$ — высота $y$ сама подстраивается так, что площадь $x\\cdot y$ остаётся постоянной. Это и есть обратная пропорциональность.</div>'
+    +'<div class="sliders"><label>Ширина $x$ = <b id="p4-cwv">3</b><input type="range" id="p4-cw" min="1" max="12" value="3"></label></div>'
+    +'<div id="p4-carfig"></div></div>';
   h+=secNav('p3','p5')+readBtn('p4');
   box.innerHTML=h; renderMath(box);
 
+  (function(){ if(!window.Math6Anim) return; var car=Math6Anim.constAreaRect(document.getElementById('p4-carfig'),{area:12});
+    var sl=document.getElementById('p4-cw'); sl.oninput=function(){ document.getElementById('p4-cwv').textContent=sl.value; car.set(+sl.value); }; })();
+
   (function(){
     var Q=[
       {t:'d',q:'Количество тетрадей и их общая стоимость (цена постоянна).'},
@@ -551,11 +565,12 @@ function buildP7(){
       {name:'Оценки класса', segs:[{label:'«9–10»',value:30},{label:'«7–8»',value:45},{label:'«5–6»',value:25}]},
       {name:'Сутки школьника', segs:[{label:'Сон',value:33},{label:'Учёба',value:25},{label:'Отдых',value:42}]}
     ];
-    var pick=document.getElementById('p7-pick'), fig=document.getElementById('p7-fig'), leg=document.getElementById('p7-leg');
-    var pal=['#4f46e5','#0891b2','#e11d48','#059669','#d97706'];
+    var pick=document.getElementById('p7-pick'), fig=document.getElementById('p7-fig'), leg=document.getElementById('p7-leg'), grow=null;
+    var pal=['#0891b2','#f59e0b','#e11d48','#059669','#7c3aed'];
     pick.innerHTML=DS.map(function(d,k){ return '<button class="btn'+(k===0?' primary':'')+'" data-k="'+k+'">'+d.name+'</button>'; }).join('');
-    function render(k){ var d=DS[k]; fig.innerHTML=Math6.pie(d.segs,{size:200});
-      leg.innerHTML=d.segs.map(function(s,j){ return '<div style="display:flex;align-items:center;gap:8px;margin:4px 0;font-size:.9rem"><span style="width:14px;height:14px;border-radius:3px;background:'+pal[j%pal.length]+';display:inline-block"></span>'+s.label+' — <b>'+s.value+'%</b></div>'; }).join(''); }
+    function render(k){ var d=DS[k]; var segs=d.segs.map(function(s,j){ return {label:s.label,value:s.value,color:pal[j%pal.length]}; });
+      if(window.Math6Anim){ if(!grow) grow=Math6Anim.pieGrow(fig,{segs:segs}); else grow.set(segs); } else { fig.innerHTML=Math6.pie(d.segs,{size:200}); }
+      leg.innerHTML=segs.map(function(s){ return '<div style="display:flex;align-items:center;gap:8px;margin:4px 0;font-size:.9rem"><span style="width:14px;height:14px;border-radius:3px;background:'+s.color+';display:inline-block"></span>'+s.label+' — <b>'+s.value+'%</b></div>'; }).join(''); }
     pick.querySelectorAll('[data-k]').forEach(function(b){ b.addEventListener('click',function(){ pick.querySelectorAll('button').forEach(function(x){x.classList.remove('primary');}); b.classList.add('primary'); render(+b.getAttribute('data-k')); }); });
     render(0);
   })();