/* alg7-fx.js — универсальные эффекты для всех глав Алгебры 7
 * Подключается всеми ch1..ch4. Автоматически:
 *  - наблюдает за элементами .feedback, при появлении .ok → pulse + комбо,
 *    при .fail → shake + сброс комбо
 *  - показывает значок комбо при сериях 3/5/10 правильных подряд
 *  - даёт бонусный XP через global addXp(), если он определён
 *
 * Публичный API на window.ALG7:
 *   ALG7.shake(el), ALG7.pulse(el)
 *   ALG7.combo, ALG7.maxCombo, ALG7.resetCombo()
 *   ALG7.buildQuadSumViz(container)    — виз. квадрата суммы (Ch2 §12)
 *   ALG7.buildDiffSquaresViz(container)— виз. разности квадратов (Ch2 §13)
 */
(function(){
'use strict';

if (window.ALG7 && window.ALG7.__installed) return;
const ALG7 = window.ALG7 = window.ALG7 || {};
ALG7.__installed = true;

ALG7.combo = 0;
ALG7.maxCombo = 0;

/* === KATEX HELPER (использует те же делимитеры, что и страницы) === */
const _KATEX_OPTS = {
  delimiters: [
    { left:'$$', right:'$$', display:true },
    { left:'$',  right:'$',  display:false },
    { left:'\\[', right:'\\]', display:true },
    { left:'\\(', right:'\\)', display:false }
  ],
  throwOnError: false
};
ALG7.renderMath = function(root){
  if(!root || !window.renderMathInElement) return;
  try{ window.renderMathInElement(root, _KATEX_OPTS); }catch(e){}
};

/* === ANIMATIONS === */
ALG7.shake = function(el){
  if(!el) return;
  el.classList.remove('alg7-shake');
  void el.offsetWidth;
  el.classList.add('alg7-shake');
  setTimeout(()=>el.classList.remove('alg7-shake'), 600);
};
ALG7.pulse = function(el){
  if(!el) return;
  el.classList.remove('alg7-pulse');
  void el.offsetWidth;
  el.classList.add('alg7-pulse');
  setTimeout(()=>el.classList.remove('alg7-pulse'), 950);
};

ALG7.resetCombo = function(silent){
  if(ALG7.combo > 0 && !silent){
    /* fade streak indicator */
    const s = document.querySelector('.alg7-streak');
    if(s){ s.style.opacity = '0'; setTimeout(()=>{ s.classList.remove('show'); s.style.opacity = ''; }, 300); }
  }
  ALG7.combo = 0;
};

function _ensureStreak(){
  let s = document.querySelector('.alg7-streak');
  if(!s){
    s = document.createElement('div');
    s.className = 'alg7-streak';
    s.innerHTML = '<svg class="ic-fire" viewBox="0 0 24 24" fill="#fff7ed"><path d="M12 2c-1 4-5 5-5 10a5 5 0 0 0 10 0c0-3-2-5-2-7 0-1 1-1.5 0-3z M9 16c0-2 1.5-3 3-3 1 2 2 2 2 4a2.5 2.5 0 0 1-5 0z" /></svg><span class="streak-text">3</span>';
    document.body.appendChild(s);
  }
  return s;
}

function _showStreak(n){
  const s = _ensureStreak();
  s.classList.add('show');
  s.querySelector('.streak-text').textContent = '×' + n;
}

function _showComboBadge(n, bonusXp){
  const badge = document.createElement('div');
  badge.className = 'alg7-combo-badge';
  badge.innerHTML = '<svg class="ic-fire" viewBox="0 0 24 24" fill="#fff7ed"><path d="M12 2c-1 4-5 5-5 10a5 5 0 0 0 10 0c0-3-2-5-2-7 0-1 1-1.5 0-3z M9 16c0-2 1.5-3 3-3 1 2 2 2 2 4a2.5 2.5 0 0 1-5 0z" /></svg> КОМБО <span class="badge-x">×' + n + '</span> +' + bonusXp + ' XP';
  /* position center top-ish */
  const vw = window.innerWidth, vh = window.innerHeight;
  badge.style.left = (vw / 2 - 130) + 'px';
  badge.style.top = (vh / 2 - 80) + 'px';
  document.body.appendChild(badge);
  setTimeout(()=>badge.remove(), 2300);
}

function _addSparkles(el){
  if(!el) return;
  const r = el.getBoundingClientRect();
  for(let i = 0; i < 6; i++){
    const sp = document.createElement('div');
    sp.className = 'alg7-sparkle';
    sp.style.left = (r.left + r.width * Math.random()) + 'px';
    sp.style.top = (r.top + r.height * Math.random()) + 'px';
    sp.style.position = 'fixed';
    sp.style.zIndex = '9999';
    sp.style.animationDelay = (i * 60) + 'ms';
    document.body.appendChild(sp);
    setTimeout(()=>sp.remove(), 1000);
  }
}

ALG7.onCorrect = function(elm){
  ALG7.combo++;
  if(ALG7.combo > ALG7.maxCombo) ALG7.maxCombo = ALG7.combo;
  if(elm) { ALG7.pulse(elm); _addSparkles(elm); }
  if(ALG7.combo >= 3) _showStreak(ALG7.combo);
  /* милестоны: 3, 5, 10 — бонусные XP */
  const milestones = { 3:5, 5:15, 10:50, 15:75, 20:100 };
  if(milestones[ALG7.combo]){
    const bonus = milestones[ALG7.combo];
    _showComboBadge(ALG7.combo, bonus);
    if(typeof window.addXp === 'function') window.addXp(bonus, 'combo-' + ALG7.combo);
  }
};

ALG7.onWrong = function(elm){
  if(elm) ALG7.shake(elm);
  ALG7.resetCombo();
};

/* === АВТО-ХУК НА FEEDBACK ЧЕРЕЗ MUTATIONOBSERVER === */
const _seenFeedback = new WeakMap();
function _processFeedback(el){
  const display = window.getComputedStyle(el).display;
  if(display === 'none') return;
  const isOk = el.classList.contains('ok');
  const isFail = el.classList.contains('fail');
  if(!isOk && !isFail) return;
  /* Дебаунс — каждый элемент обрабатываем не чаще раза в 700мс */
  const now = Date.now();
  const last = _seenFeedback.get(el) || 0;
  if(now - last < 700) return;
  _seenFeedback.set(el, now);

  /* Найти ближайший .wg или родительскую карточку */
  const target = el.closest('.wg') || el.closest('.card') || el.parentElement;
  if(isOk) ALG7.onCorrect(target);
  else ALG7.onWrong(target);
}

function _initObserver(){
  if(!document.body) { setTimeout(_initObserver, 50); return; }
  const obs = new MutationObserver(muts => {
    for(const m of muts){
      if(m.type === 'attributes'){
        const t = m.target;
        if(t && t.classList && t.classList.contains('feedback')) _processFeedback(t);
      } else if(m.type === 'childList'){
        m.addedNodes && m.addedNodes.forEach(n => {
          if(n.nodeType === 1 && n.classList && n.classList.contains('feedback')) _processFeedback(n);
        });
      }
    }
  });
  obs.observe(document.body, { subtree:true, attributes:true, childList:true, attributeFilter:['class','style'] });
}

if(document.readyState === 'loading') document.addEventListener('DOMContentLoaded', _initObserver);
else _initObserver();


/* ============================================================
   ВИЗУАЛИЗАТОР КВАДРАТА СУММЫ (Ch2 §12)
   Геометрическое доказательство (a+b)² = a² + 2ab + b²
   ============================================================ */
ALG7.buildQuadSumViz = function(container){
  if(!container) return;
  container.innerHTML = ''
    + '<div class="alg7-qsum-stage">'
    +   '<div class="alg7-qsum-controls">'
    +     '<label>$a$ = <b id="alg7-qsum-a">3</b><input type="range" id="alg7-qsum-a-sl" min="1" max="6" step="1" value="3"></label>'
    +     '<label>$b$ = <b id="alg7-qsum-b">2</b><input type="range" id="alg7-qsum-b-sl" min="1" max="5" step="1" value="2"></label>'
    +   '</div>'
    +   '<div class="alg7-qsum-mode">'
    +     '<button data-mode="sum" class="active">Сумма $(a+b)$</button>'
    +     '<button data-mode="diff">Разность $(a-b)$</button>'
    +   '</div>'
    +   '<svg class="alg7-qsum-svg" id="alg7-qsum-svg" viewBox="0 0 320 320"></svg>'
    +   '<div class="alg7-qsum-formula" id="alg7-qsum-formula"></div>'
    +   '<div style="font-size:.85rem;color:var(--muted);text-align:center;max-width:380px">Кликни цветную область — она «подсветится» в формуле</div>'
    + '</div>';

  const aSl = container.querySelector('#alg7-qsum-a-sl');
  const bSl = container.querySelector('#alg7-qsum-b-sl');
  const aV = container.querySelector('#alg7-qsum-a');
  const bV = container.querySelector('#alg7-qsum-b');
  const svg = container.querySelector('#alg7-qsum-svg');
  const formula = container.querySelector('#alg7-qsum-formula');
  const modeButtons = container.querySelectorAll('.alg7-qsum-mode button');
  let mode = 'sum';

  function render(){
    const a = +aSl.value;
    const b = +bSl.value;
    aV.textContent = a;
    bV.textContent = b;

    const isSum = mode === 'sum';
    /* Масштаб: общая сторона = a + b (для sum) или a (для diff) */
    const side = isSum ? (a + b) : a;
    const PX = 300; /* размер квадрата в px */
    const offX = 10, offY = 10;
    const unit = PX / side;
    const aPx = a * unit;
    const bPx = b * unit;

    let html = '';
    if(isSum){
      /* Большой квадрат (a+b) × (a+b) разбит на 4 области:
         a×a (top-left), a×b (top-right), b×a (bottom-left), b×b (bottom-right) */
      /* 1. a² (top-left, красный) */
      html += '<rect class="area-aa" x="'+offX+'" y="'+offY+'" width="'+aPx+'" height="'+aPx+'" data-part="aa" rx="2"/>';
      /* 2. a*b (top-right, оранжевый) */
      html += '<rect class="area-ab" x="'+(offX+aPx)+'" y="'+offY+'" width="'+bPx+'" height="'+aPx+'" data-part="ab1" rx="2"/>';
      /* 3. b*a (bottom-left, оранжевый) */
      html += '<rect class="area-ab" x="'+offX+'" y="'+(offY+aPx)+'" width="'+aPx+'" height="'+bPx+'" data-part="ab2" rx="2"/>';
      /* 4. b² (bottom-right, зелёный) */
      html += '<rect class="area-bb" x="'+(offX+aPx)+'" y="'+(offY+aPx)+'" width="'+bPx+'" height="'+bPx+'" data-part="bb" rx="2"/>';
      /* Подписи */
      if(aPx > 32) html += '<text class="area-label" x="'+(offX+aPx/2)+'" y="'+(offY+aPx/2+5)+'">a²='+(a*a)+'</text>';
      if(bPx > 22 && aPx > 28) html += '<text class="area-label" x="'+(offX+aPx+bPx/2)+'" y="'+(offY+aPx/2+5)+'">ab='+(a*b)+'</text>';
      if(bPx > 22 && aPx > 28) html += '<text class="area-label" x="'+(offX+aPx/2)+'" y="'+(offY+aPx+bPx/2+5)+'">ab='+(a*b)+'</text>';
      if(bPx > 32) html += '<text class="area-label" x="'+(offX+aPx+bPx/2)+'" y="'+(offY+aPx+bPx/2+5)+'">b²='+(b*b)+'</text>';
      /* Стороны (внешняя разметка) */
      html += '<text x="'+(offX+aPx/2)+'" y="'+(offY+PX+22)+'" text-anchor="middle" font-size="13" fill="#475569" font-family="JetBrains Mono">a='+a+'</text>';
      html += '<text x="'+(offX+aPx+bPx/2)+'" y="'+(offY+PX+22)+'" text-anchor="middle" font-size="13" fill="#475569" font-family="JetBrains Mono">b='+b+'</text>';
      html += '<text x="'+(offX+PX/2)+'" y="'+(offY-2)+'" text-anchor="middle" font-size="12" fill="#1e293b" font-weight="700" font-family="Unbounded">сторона = a+b = '+(a+b)+'</text>';
      /* Скобка снизу */
      html += '<line x1="'+offX+'" y1="'+(offY+PX+4)+'" x2="'+(offX+PX)+'" y2="'+(offY+PX+4)+'" stroke="#94a3b8" stroke-width="1.2"/>';
      html += '<line x1="'+offX+'" y1="'+(offY+PX+4)+'" x2="'+offX+'" y2="'+(offY+PX+10)+'" stroke="#94a3b8" stroke-width="1.2"/>';
      html += '<line x1="'+(offX+PX)+'" y1="'+(offY+PX+4)+'" x2="'+(offX+PX)+'" y2="'+(offY+PX+10)+'" stroke="#94a3b8" stroke-width="1.2"/>';
      /* Формула */
      formula.innerHTML =
        '$(' + a + ' + ' + b + ')^2 = ' +
        '\\underbrace{' + a + '^2}_{\\color{#dc2626}{' + (a*a) + '}} + ' +
        '\\underbrace{2 \\cdot ' + a + ' \\cdot ' + b + '}_{\\color{#d97706}{' + (2*a*b) + '}} + ' +
        '\\underbrace{' + b + '^2}_{\\color{#047857}{' + (b*b) + '}} = ' +
        ((a+b)*(a+b)) + '$';
    } else {
      /* DIFF mode: показываем (a-b)² внутри a×a, выделяя верхний-левый угол */
      if(b >= a){
        html += '<text x="160" y="160" text-anchor="middle" font-size="14" fill="#dc2626" font-family="Inter,sans-serif">$b \\ge a$ — выбери $b < a$</text>';
        formula.innerHTML = '<span style="color:#dc2626">Условие: $b < a$ для $(a-b)^2$</span>';
      } else {
        const diff = a - b;
        const dPx = diff * unit;
        /* (a-b)² в углу (красный) */
        html += '<rect class="area-aa" x="'+offX+'" y="'+offY+'" width="'+dPx+'" height="'+dPx+'" rx="2"/>';
        /* Полосы 2ab внутри */
        html += '<rect class="area-ab" x="'+(offX+dPx)+'" y="'+offY+'" width="'+bPx+'" height="'+dPx+'" rx="2"/>';
        html += '<rect class="area-ab" x="'+offX+'" y="'+(offY+dPx)+'" width="'+dPx+'" height="'+bPx+'" rx="2"/>';
        /* b² в углу */
        html += '<rect class="area-bb" x="'+(offX+dPx)+'" y="'+(offY+dPx)+'" width="'+bPx+'" height="'+bPx+'" rx="2"/>';
        /* Подписи */
        if(dPx > 30) html += '<text class="area-label" x="'+(offX+dPx/2)+'" y="'+(offY+dPx/2+5)+'">(a-b)²='+(diff*diff)+'</text>';
        if(bPx > 22 && dPx > 25) html += '<text class="area-label" x="'+(offX+dPx+bPx/2)+'" y="'+(offY+dPx/2+5)+'">'+(diff*b)+'</text>';
        if(bPx > 22 && dPx > 25) html += '<text class="area-label" x="'+(offX+dPx/2)+'" y="'+(offY+dPx+bPx/2+5)+'">'+(diff*b)+'</text>';
        if(bPx > 30) html += '<text class="area-label" x="'+(offX+dPx+bPx/2)+'" y="'+(offY+dPx+bPx/2+5)+'">b²='+(b*b)+'</text>';
        html += '<text x="'+(offX+PX/2)+'" y="'+(offY-2)+'" text-anchor="middle" font-size="12" fill="#1e293b" font-weight="700" font-family="Unbounded">сторона a='+a+'; b='+b+'; a−b='+diff+'</text>';
        /* Формула */
        formula.innerHTML =
          '$(' + a + ' - ' + b + ')^2 = a^2 - 2ab + b^2 = ' +
          a + '^2 - 2 \\cdot ' + a + ' \\cdot ' + b + ' + ' + b + '^2 = ' +
          (a*a) + ' - ' + (2*a*b) + ' + ' + (b*b) + ' = ' + (diff*diff) + '$';
      }
    }
    svg.innerHTML = html;
    ALG7.renderMath(formula);

    /* Hover-эффект: при клике подсветить термин */
    svg.querySelectorAll('rect[data-part]').forEach(r=>{
      r.style.cursor = 'pointer';
      r.addEventListener('click', ()=>{
        const part = r.dataset.part;
        svg.querySelectorAll('rect.area-aa, rect.area-ab, rect.area-bb').forEach(x=>x.classList.add('dim'));
        const sameClass = part==='aa' ? 'area-aa' : (part==='bb' ? 'area-bb' : 'area-ab');
        svg.querySelectorAll('.' + sameClass).forEach(x=>x.classList.remove('dim'));
        setTimeout(()=>{ svg.querySelectorAll('rect.area-aa, rect.area-ab, rect.area-bb').forEach(x=>x.classList.remove('dim')); }, 1500);
      });
    });
  }

  aSl.addEventListener('input', render);
  bSl.addEventListener('input', render);
  modeButtons.forEach(btn => btn.addEventListener('click', ()=>{
    modeButtons.forEach(b=>b.classList.remove('active'));
    btn.classList.add('active');
    mode = btn.dataset.mode;
    render();
  }));
  render();
};


/* ============================================================
   ВИЗУАЛИЗАТОР РАЗНОСТИ КВАДРАТОВ (Ch2 §13)
   a² - b² = (a-b)(a+b) — анимация перестроения
   ============================================================ */
ALG7.buildDiffSquaresViz = function(container){
  if(!container) return;
  container.innerHTML = ''
    + '<div class="alg7-dsq-stage">'
    +   '<div class="alg7-qsum-controls">'
    +     '<label>$a$ = <b id="alg7-dsq-a">5</b><input type="range" id="alg7-dsq-a-sl" min="3" max="8" step="1" value="5"></label>'
    +     '<label>$b$ = <b id="alg7-dsq-b">2</b><input type="range" id="alg7-dsq-b-sl" min="1" max="6" step="1" value="2"></label>'
    +   '</div>'
    +   '<svg class="alg7-dsq-svg" id="alg7-dsq-svg" viewBox="0 0 460 280"></svg>'
    +   '<div class="alg7-dsq-formula" id="alg7-dsq-formula"></div>'
    +   '<button class="alg7-dsq-step-btn" id="alg7-dsq-step">'
    +     '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:18px;height:18px"><polygon points="6 4 20 12 6 20 6 4"/></svg>'
    +     '<span id="alg7-dsq-step-text">Шаг 1: вырезать $b^2$</span>'
    +   '</button>'
    + '</div>';

  const aSl = container.querySelector('#alg7-dsq-a-sl');
  const bSl = container.querySelector('#alg7-dsq-b-sl');
  const aV = container.querySelector('#alg7-dsq-a');
  const bV = container.querySelector('#alg7-dsq-b');
  const svg = container.querySelector('#alg7-dsq-svg');
  const formula = container.querySelector('#alg7-dsq-formula');
  const stepBtn = container.querySelector('#alg7-dsq-step');
  const stepText = container.querySelector('#alg7-dsq-step-text');

  let stage = 0; /* 0 = большой a² с вырезанной b²; 1 = две части L-формы; 2 = собранный прямоугольник */

  function render(){
    const a = +aSl.value;
    const b = +bSl.value;
    aV.textContent = a;
    bV.textContent = b;
    if(b >= a){
      svg.innerHTML = '<text x="230" y="140" text-anchor="middle" font-size="14" fill="#dc2626" font-family="Inter,sans-serif">Выбери $b &lt; a$</text>';
      formula.innerHTML = '<span style="color:#dc2626">Условие: $b < a$</span>';
      stepBtn.disabled = true;
      return;
    }
    stepBtn.disabled = false;
    const diff = a - b;
    const sum = a + b;

    /* Площади 200x200 для исходного, 200x200 для финального — рядом */
    const PX = 200;
    const unit = PX / Math.max(a, sum);  /* единичная клетка */
    const aPx = a * unit;
    const bPx = b * unit;
    const dPx = diff * unit;
    const sumPx = sum * unit;
    const offX = 20, offY = 30;
    const off2X = 250, off2Y = 30;

    let html = '';

    /* === ЭТАП 0 — исходное состояние === */
    /* Левая сторона: большой квадрат a² */
    html += '<text x="'+(offX+aPx/2)+'" y="'+(offY-8)+'" text-anchor="middle" font-size="12" fill="#1e293b" font-weight="700" font-family="Unbounded">a² (сторона a='+a+')</text>';
    /* Большой квадрат (рыжий) */
    html += '<rect class="big-square" x="'+offX+'" y="'+offY+'" width="'+aPx+'" height="'+aPx+'" rx="2"/>';
    /* Голубой квадрат b² в правом верхнем углу */
    if(stage >= 0){
      html += '<rect class="small-square" x="'+(offX+aPx-bPx)+'" y="'+offY+'" width="'+bPx+'" height="'+bPx+'" rx="2"/>';
      html += '<text class="label" x="'+(offX+aPx-bPx/2)+'" y="'+(offY+bPx/2+5)+'">b²='+(b*b)+'</text>';
    }
    /* Подпись большой стороны */
    html += '<text class="label dark" x="'+(offX+aPx/2)+'" y="'+(offY+aPx/2+5)+'" style="font-size:14px;fill:#fff">a²='+(a*a)+'</text>';

    /* === ЭТАП 1+ — L-форма (большой квадрат минус b²) разделена на 2 прямоугольника === */
    /* L-форма состоит из двух частей:
       - Нижний прямоугольник: a × (a-b)   = a × diff
       - Верхний-левый прямоугольник: (a-b) × b = diff × b
       Они собираются в прямоугольник (a-b) × (a+b)
    */
    /* Этап 1: показываем линию разреза в исходном квадрате */
    if(stage === 1){
      const cutY = offY + dPx; /* горизонтальная линия разреза на высоте a-b */
      html += '<line x1="'+offX+'" y1="'+cutY+'" x2="'+(offX+aPx)+'" y2="'+cutY+'" stroke="#1e293b" stroke-width="2" stroke-dasharray="6 3"/>';
      html += '<text x="'+(offX+aPx+20)+'" y="'+(cutY+4)+'" font-size="11" fill="#1e293b" font-family="JetBrains Mono">разрез</text>';
    }
    /* Этап 2: показываем «улетающие» части и финальный прямоугольник справа */
    if(stage === 2){
      /* Призрак исходного квадрата */
      html += '<rect class="ghost-rect" x="'+offX+'" y="'+offY+'" width="'+aPx+'" height="'+aPx+'"/>';
      /* Финальный прямоугольник (a-b) × (a+b) справа */
      html += '<text x="'+(off2X+sumPx/2)+'" y="'+(off2Y-8)+'" text-anchor="middle" font-size="12" fill="#1e293b" font-weight="700" font-family="Unbounded">(a-b)(a+b) = '+(diff*sum)+'</text>';
      /* Часть 1: нижний прямоугольник a × (a-b) — поворачиваем в финале на правую часть */
      html += '<rect class="rect-piece" x="'+off2X+'" y="'+off2Y+'" width="'+(a*unit)+'" height="'+dPx+'" rx="2"/>';
      html += '<text class="label" x="'+(off2X+a*unit/2)+'" y="'+(off2Y+dPx/2+5)+'">a·(a-b)='+(a*diff)+'</text>';
      /* Часть 2: верхний-левый прямоугольник (a-b) × b — приклеиваем к правому концу */
      html += '<rect class="rect-piece" x="'+(off2X+a*unit)+'" y="'+off2Y+'" width="'+bPx+'" height="'+dPx+'" rx="2"/>';
      html += '<text class="label" x="'+(off2X+a*unit+bPx/2)+'" y="'+(off2Y+dPx/2+5)+'">b(a-b)='+(b*diff)+'</text>';
      /* Подписи сторон финального прямоугольника */
      html += '<text x="'+(off2X+sumPx/2)+'" y="'+(off2Y+dPx+18)+'" text-anchor="middle" font-size="11" fill="#475569" font-family="JetBrains Mono">a+b='+sum+'</text>';
      html += '<text x="'+(off2X-8)+'" y="'+(off2Y+dPx/2+3)+'" text-anchor="end" font-size="11" fill="#475569" font-family="JetBrains Mono">a-b='+diff+'</text>';
      /* Линия разделения */
      html += '<line x1="'+(off2X+a*unit)+'" y1="'+off2Y+'" x2="'+(off2X+a*unit)+'" y2="'+(off2Y+dPx)+'" stroke="#fff" stroke-width="1.5" stroke-dasharray="4 3"/>';
    }

    svg.innerHTML = html;

    /* Формула */
    let formulaText;
    if(stage === 0){
      formulaText = '$a^2 - b^2 = ' + a + '^2 - ' + b + '^2 = ' + (a*a) + ' - ' + (b*b) + ' = ' + (a*a - b*b) + '$';
      stepText.textContent = 'Шаг 1: разрезать L-форму';
    } else if(stage === 1){
      formulaText = 'Разрезаем L-форму горизонтально: $a \\cdot (a-b)$ + $(a-b) \\cdot b$';
      stepText.textContent = 'Шаг 2: собрать в прямоугольник';
    } else {
      formulaText = '$a^2 - b^2 = (a-b)(a+b) = ' + diff + ' \\cdot ' + sum + ' = ' + (diff*sum) + '$ ✓';
      stepText.textContent = 'Сбросить';
    }
    formula.innerHTML = formulaText;
    ALG7.renderMath(formula);
  }

  stepBtn.addEventListener('click', ()=>{
    stage = (stage + 1) % 3;
    render();
  });
  aSl.addEventListener('input', ()=>{ stage = 0; render(); });
  bSl.addEventListener('input', ()=>{ stage = 0; render(); });
  render();
};

})();