<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: #ffffff;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
    }

    /* Equation Header */
    .orig-func {
      font-size: 15px;
      font-weight: 600;
      color: #475569;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      padding: 6px 14px;
      border-radius: 20px;
      margin-bottom: 8px;
    }

    /* Color semantics */
    .coeff { color: #dc2626; font-weight: 700; }
    .expo { color: #2563eb; font-weight: 700; }
    .x-var { color: #0f172a; font-weight: 600; }

    /* Stepper Container */
    .stage-wrapper {
      position: relative;
      width: 100%;
      max-width: 520px;
      height: 230px;
      overflow: hidden;
    }

    .step-card {
      position: absolute;
      inset: 0;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease, transform 0.3s ease;
      transform: translateY(6px);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 16px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }

    .step-card.active {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }

    .step-tag {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
      background: #f1f5f9;
      padding: 3px 8px;
      border-radius: 6px;
    }

    .math-display {
      font-size: 20px;
      font-family: 'Cambria Math', 'Times New Roman', serif;
      letter-spacing: 0.5px;
      text-align: center;
    }

    .math-sub {
      font-size: 16px;
      color: #475569;
      font-family: 'Cambria Math', 'Times New Roman', serif;
    }

    /* Breakdown Pill Grid */
    .pill-grid {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .badge {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 6px 12px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
    }
    .badge-coeff { background: #fee2e2; border: 1px solid #fecaca; color: #991b1b; }
    .badge-expo { background: #dbeafe; border: 1px solid #bfdbfe; color: #1e40af; }
    .badge-label { font-size: 10px; opacity: 0.8; text-transform: uppercase; }

    /* Graph Visual in Step 4 */
    .graph-box {
      width: 140px;
      height: 90px;
      border-left: 2px solid #94a3b8;
      border-bottom: 2px solid #94a3b8;
      position: relative;
      margin: 4px auto;
    }
    .arrow-left, .arrow-right {
      position: absolute;
      width: 32px;
      height: 32px;
      color: #dc2626;
      font-size: 24px;
      font-weight: 900;
      line-height: 1;
    }
    .arrow-left { bottom: -10px; left: 6px; }
    .arrow-right { bottom: -10px; right: 6px; }

    .curve-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    /* Controls Bar */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      max-width: 520px;
      margin-top: 10px;
    }

    .step-btn {
      flex: 1;
      padding: 8px 4px;
      font-size: 12px;
      font-weight: 600;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      color: #64748b;
      border-radius: 6px;
      cursor: pointer;
      text-align: center;
      transition: all 0.2s;
    }
    .step-btn:hover { background: #f1f5f9; color: #1e2945; }
    .step-btn.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
    }

    .play-toggle {
      width: 34px;
      height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      background: #f8fafc;
      color: #1e2945;
      cursor: pointer;
      font-size: 13px;
    }
  </style>
</head>
<body>

  
  <div class="orig-func">
    g(x) = <span class="coeff">-2</span>(x - 3)<span class="expo"><sup>2</sup></span>(2x + 1)(x + 4)<span class="expo"><sup>3</sup></span>
  </div>

  
  <div class="stage-wrapper">

    
    <div class="step-card active" id="card-0">
      <span class="step-tag">Step 1 • Extract Highest Terms</span>
      <div class="math-display">
        (<span class="coeff">-2</span>) · (<span class="x-var">x</span>)<span class="expo"><sup>2</sup></span> · (<span class="coeff">2</span><span class="x-var">x</span>)<span class="expo"><sup>1</sup></span> · (<span class="x-var">x</span>)<span class="expo"><sup>3</sup></span>
      </div>
      <div class="math-sub">Leading term of each factor</div>
    </div>

    
    <div class="step-card" id="card-1">
      <span class="step-tag">Step 2 • Multiply &amp; Add</span>
      <div class="math-display">
        [<span class="coeff">-2 · 1 · 2 · 1</span>] · <span class="x-var">x</span><span class="expo"><sup>2 + 1 + 3</sup></span>
      </div>
      <div class="math-display">
        = <span class="coeff">-4</span><span class="x-var">x</span><span class="expo"><sup>6</sup></span>
      </div>
    </div>

    
    <div class="step-card" id="card-2">
      <span class="step-tag">Step 3 • Analyze Leading Term</span>
      <div class="math-display" style="margin-bottom: 4px;">
        <span class="coeff">-4</span><span class="x-var">x</span><span class="expo"><sup>6</sup></span>
      </div>
      <div class="pill-grid">
        <div class="badge badge-coeff">
          <span class="badge-label">Leading Coeff</span>
          <span>-4 (Negative)</span>
        </div>
        <div class="badge badge-expo">
          <span class="badge-label">Degree</span>
          <span>6 (Even)</span>
        </div>
      </div>
    </div>

    
    <div class="step-card" id="card-3">
      <span class="step-tag">Step 4 • End Behavior</span>
      <div class="graph-box">
        <svg class="curve-svg" viewBox="0 0 140 90">
          <path d="M 15,85 C 35,-10 105,-10 125,85" fill="none" stroke="#2563eb" stroke-width="2.5" stroke-dasharray="3,3" />
        </svg>
        <span class="arrow-left">↙</span>
        <span class="arrow-right">↘</span>
      </div>
      <div class="pill-grid">
        <span class="badge badge-coeff">Down on Left (↙)</span>
        <span class="badge badge-coeff">Down on Right (↘)</span>
      </div>
    </div>

  </div>

  
  <div class="controls">
    <button class="play-toggle" id="playBtn" title="Auto play / Pause">⏸</button>
    <button class="step-btn active" data-step="0">1. Extract</button>
    <button class="step-btn" data-step="1">2. Multiply</button>
    <button class="step-btn" data-step="2">3. Analyze</button>
    <button class="step-btn" data-step="3">4. Behavior</button>
  </div>

  <script>
    let currentStep = 0;
    const totalSteps = 4;
    let playing = true;
    let timer = null;

    const cards = [0, 1, 2, 3].map(i => document.getElementById('card-' + i));
    const btns = document.querySelectorAll('.step-btn');
    const playBtn = document.getElementById('playBtn');

    function goTo(idx) {
      currentStep = idx;
      cards.forEach((c, i) => c.classList.toggle('active', i === currentStep));
      btns.forEach((b, i) => b.classList.toggle('active', i === currentStep));
    }

    function next() {
      goTo((currentStep + 1) % totalSteps);
    }

    function startTimer() {
      timer = setInterval(next, 3800);
    }

    function stopTimer() {
      if (timer) clearInterval(timer);
      timer = null;
    }

    btns.forEach((b, i) => {
      b.addEventListener('click', () => {
        goTo(i);
        if (playing) {
          stopTimer();
          startTimer();
        }
      });
    });

    playBtn.addEventListener('click', () => {
      playing = !playing;
      playBtn.textContent = playing ? '⏸' : '▶';
      if (playing) {
        startTimer();
      } else {
        stopTimer();
      }
    });

    startTimer();
  </script>
</body>
</html>

End Behavior and the Leading Coefficient Test

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      user-select: none;
      max-width: 680px;
      margin: 0 auto;
    }
    
    /* Top: Equation & Callouts */
    .analysis-panel {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 12px 14px;
    }
    .equation-row {
      font-size: clamp(16px, 4vw, 21px);
      font-weight: 700;
      letter-spacing: 0.5px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 3px;
    }
    .badge-coeff {
      background: #eff6ff;
      color: #0284c7;
      border: 1.5px solid #0284c7;
      padding: 1px 6px;
      border-radius: 6px;
      line-height: 1.2;
    }
    .badge-degree {
      background: #faf5ff;
      color: #7c3aed;
      border: 1.5px solid #7c3aed;
      padding: 0 5px;
      border-radius: 5px;
      font-size: 0.75em;
      position: relative;
      top: -0.5em;
      line-height: 1.1;
    }
    .callout-row {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: center;
      width: 100%;
    }
    .tag {
      font-size: 11px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 20px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      text-align: center;
    }
    .tag-blue { background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }
    .tag-purple { background: #f3e8ff; color: #6b21a8; border: 1px solid #e9d5ff; }
    .tag-dark { background: #f1f5f9; color: #334155; border: 1px solid #cbd5e1; }

    /* Bottom: Side-by-Side Coordinate Graphs */
    .graphs-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      width: 100%;
    }
    @media (max-width: 480px) {
      .graphs-row {
        grid-template-columns: 1fr;
      }
    }
    .graph-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      overflow: hidden;
    }
    .graph-header {
      font-size: 12px;
      font-weight: 700;
      color: #334155;
      margin-bottom: 6px;
      text-align: center;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 4px;
    }
    .svg-wrap {
      width: 100%;
      position: relative;
      overflow: hidden;
      border-radius: 6px;
      background: #fafbfc;
      border: 1px solid #edf2f7;
    }
    svg {
      display: block;
      width: 100%;
      height: auto;
      overflow: hidden;
    }
    .legend-row {
      display: flex;
      justify-content: center;
      gap: 12px;
      margin-top: 6px;
      font-size: 11px;
      font-weight: 600;
    }
    .legend-item {
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .line-f {
      width: 14px;
      height: 3px;
      background: #2563eb;
      border-radius: 2px;
    }
    .line-lead {
      width: 14px;
      height: 2px;
      border-top: 2px dashed #9333ea;
    }
  </style>
</head>
<body>

  
  <div class="analysis-panel">
    <div class="equation-row">
      <span>f(x) = </span>
      <span class="badge-coeff">-3</span>
      <span>x</span>
      <span class="badge-degree">4</span>
      <span>+ 5x³ - 2x + 7</span>
    </div>
    <div class="callout-row">
      <div class="tag tag-blue">Leading Coeff: -3 (Negative)</div>
      <div class="tag tag-purple">Degree: 4 (Even)</div>
      <div class="tag tag-dark">Dominates: -3x⁴</div>
    </div>
  </div>

  
  <div class="graphs-row">
    
    <div class="graph-card">
      <div class="graph-header">Standard View (Local Extrema)</div>
      <div class="svg-wrap">
        <svg id="svgLocal" viewBox="0 0 220 160"></svg>
      </div>
      <div class="legend-row">
        <div class="legend-item" style="color: #2563eb;">
          <span class="line-f"></span> f(x)
        </div>
        <div class="legend-item" style="color: #7c3aed;">
          <span style="display:inline-block; width:6px; height:6px; background:#7c3aed; border-radius:50%;"></span> Extrema
        </div>
      </div>
    </div>

    
    <div class="graph-card">
      <div class="graph-header">Zoomed Out (End Behavior: ↓ ↓)</div>
      <div class="svg-wrap">
        <svg id="svgZoom" viewBox="0 0 220 160"></svg>
      </div>
      <div class="legend-row">
        <div class="legend-item" style="color: #2563eb;">
          <span class="line-f"></span> f(x)
        </div>
        <div class="legend-item" style="color: #9333ea;">
          <span class="line-lead"></span> -3x⁴
        </div>
      </div>
    </div>
  </div>

  <script>
    const f = (x) => -3 * Math.pow(x, 4) + 5 * Math.pow(x, 3) - 2 * x + 7;

    function renderPlot(svgId, xMin, xMax, yMin, yMax, isZoomed) {
      const svg = document.getElementById(svgId);
      const W = 220, H = 160;
      const pad = 10;
      const plotW = W - 2 * pad;
      const plotH = H - 2 * pad;

      const toX = (x) => pad + ((x - xMin) / (xMax - xMin)) * plotW;
      const toY = (y) => pad + plotH - ((y - yMin) / (yMax - yMin)) * plotH;

      const xAxisY = Math.max(pad, Math.min(pad + plotH, toY(0)));
      const yAxisX = Math.max(pad, Math.min(pad + plotW, toX(0)));

      let content = `
        <defs>
          <clipPath id="clip-${svgId}">
            <rect x="${pad}" y="${pad}" width="${plotW}" height="${plotH}" rx="4" />
          </clipPath>
        </defs>
        
        
        <rect x="${pad}" y="${pad}" width="${plotW}" height="${plotH}" fill="#ffffff" stroke="#e2e8f0" stroke-width="1" rx="4"/>
        
        
        <g stroke="#cbd5e1" stroke-width="1.2">
          <line x1="${pad}" y1="${xAxisY}" x2="${pad + plotW}" y2="${xAxisY}" />
          <line x1="${yAxisX}" y1="${pad}" x2="${yAxisX}" y2="${pad + plotH}" />
        </g>
        <text x="${pad + plotW - 8}" y="${xAxisY - 4}" font-size="9" fill="#94a3b8" font-weight="600">x</text>
        <text x="${yAxisX + 4}" y="${pad + 10}" font-size="9" fill="#94a3b8" font-weight="600">y</text>
        
        
        <g clip-path="url(#clip-${svgId})">
      `;

      // Helper to generate path
      function generateCurve(fn, stepCount) {
        let d = "";
        for (let i = 0; i <= stepCount; i++) {
          const x = xMin + (i / stepCount) * (xMax - xMin);
          const y = fn(x);
          const px = toX(x);
          const py = toY(y);
          d += (i === 0 ? "M" : " L") + ` ${px.toFixed(1)} ${py.toFixed(1)}`;
        }
        return d;
      }

      if (isZoomed) {
        // Overlay -3x^4 comparison reference
        const refD = generateCurve((x) => -3 * Math.pow(x, 4), 160);
        content += `<path d="${refD}" fill="none" stroke="#9333ea" stroke-dasharray="3,3" stroke-width="2" opacity="0.8" />`;

        // Main curve f(x)
        const pathD = generateCurve(f, 160);
        content += `<path d="${pathD}" fill="none" stroke="#2563eb" stroke-width="2.5" stroke-linecap="round" />`;

        content += `</g>`; // End clipped group

        // Clean Red End-behavior annotations (above clipping layer for crisp rendering)
        content += `
          
          <g>
            <rect x="18" y="112" width="62" height="32" rx="4" fill="#fee2e2" fill-opacity="0.9" stroke="#fca5a5" stroke-width="0.8"/>
            <text x="49" y="125" font-size="10" font-weight="700" fill="#dc2626" text-anchor="middle">y → -∞</text>
            <text x="49" y="138" font-size="11" font-weight="900" fill="#dc2626" text-anchor="middle">↓</text>
          </g>

          
          <g>
            <rect x="140" y="112" width="62" height="32" rx="4" fill="#fee2e2" fill-opacity="0.9" stroke="#fca5a5" stroke-width="0.8"/>
            <text x="171" y="125" font-size="10" font-weight="700" fill="#dc2626" text-anchor="middle">y → -∞</text>
            <text x="171" y="138" font-size="11" font-weight="900" fill="#dc2626" text-anchor="middle">↓</text>
          </g>
        `;
      } else {
        // Main curve f(x)
        const pathD = generateCurve(f, 160);
        content += `<path d="${pathD}" fill="none" stroke="#2563eb" stroke-width="2.5" stroke-linecap="round" />`;

        // Local extrema points
        const extrema = [
          { x: -0.32, y: f(-0.32), label: "Min" },
          { x: 0.41, y: f(0.41), label: "Max" },
          { x: 1.16, y: f(1.16), label: "Max" }
        ];

        extrema.forEach(p => {
          const cx = toX(p.x);
          const cy = toY(p.y);
          content += `
            <circle cx="${cx}" cy="${cy}" r="3.5" fill="#7c3aed" stroke="#ffffff" stroke-width="1.5" />
          `;
        });

        content += `</g>`; // End clipped group
      }

      svg.innerHTML = content;
    }

    // Render Local View (standard zoom showing inner local extrema)
    renderPlot("svgLocal", -1.8, 2.2, -12, 14, false);

    // Render Zoomed Out View (showing dominant -3x^4 end behavior)
    renderPlot("svgZoom", -5, 5, -1900, 300, true);
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="1:1">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: transparent;
      padding: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      user-select: none;
    }

    .main-grid {
      display: grid;
      grid-template-columns: 56px 1fr 1fr;
      grid-template-rows: auto 1fr 1fr;
      gap: 8px;
      width: 100%;
      max-width: 480px;
    }

    .header-col {
      text-align: center;
      padding: 4px 2px;
    }

    .title-main {
      font-size: 13px;
      font-weight: 700;
      color: #0284c7;
    }

    .title-sub {
      font-size: 11px;
      color: #64748b;
    }

    .header-row {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding-right: 4px;
    }

    .row-tag {
      font-size: 13px;
      font-weight: 700;
      color: #0f766e;
    }

    .row-sub {
      font-size: 10px;
      color: #64748b;
    }

    .card-cell {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 8px 6px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
      transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
      position: relative;
    }

    .card-cell:hover {
      border-color: #0284c7;
      background: #f0f9ff;
    }

    .card-cell.active {
      border-color: #0284c7;
      background: #f0f9ff;
      box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.25);
    }

    .svg-wrap {
      width: 100%;
      height: 90px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .axis {
      stroke: #cbd5e1;
      stroke-width: 1.2;
      stroke-dasharray: 2 2;
    }

    .curve {
      fill: none;
      stroke: #0284c7;
      stroke-width: 3;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .knot {
      fill: none;
      stroke: #94a3b8;
      stroke-width: 1.5;
      stroke-dasharray: 2 2;
    }

    .arrow-head {
      fill: #0284c7;
    }

    .notation-box {
      width: 100%;
      display: flex;
      justify-content: space-between;
      font-size: 11px;
      font-weight: 600;
      color: #334155;
      margin-top: 4px;
      padding-top: 4px;
      border-top: 1px dashed #e2e8f0;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    }

    .not-item {
      display: flex;
      align-items: center;
      gap: 2px;
    }

    .dir-sym {
      color: #0284c7;
      font-weight: 700;
      font-size: 13px;
    }

    .hint-bar {
      margin-top: 8px;
      font-size: 12px;
      color: #64748b;
      font-weight: 500;
      text-align: center;
    }

    @media (max-width: 380px) {
      .main-grid {
        grid-template-columns: 46px 1fr 1fr;
        gap: 6px;
      }
      .title-main { font-size: 11px; }
      .title-sub { font-size: 9px; }
      .row-tag { font-size: 11px; }
      .row-sub { font-size: 9px; }
      .svg-wrap { height: 75px; }
      .notation-box { font-size: 9px; }
    }
  </style>
</head>
<body>

  <div class="main-grid">
    
    <div></div>

    
    <div class="header-col">
      <div class="title-main">Even Degree</div>
      <div class="title-sub">Same Direction (↖↗ / ↙↘)</div>
    </div>

    
    <div class="header-col">
      <div class="title-main">Odd Degree</div>
      <div class="title-sub">Opposite (↙↗ / ↖↘)</div>
    </div>

    
    <div class="header-row">
      <div class="row-tag">a &gt; 0</div>
      <div class="row-sub">Positive</div>
    </div>

    
    <div class="card-cell active" onclick="selectCell(this)">
      <div class="svg-wrap">
        <svg viewBox="0 0 120 90">
          <defs>
            <marker id="arr1" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
              <path d="M 0 1.5 L 8 5 L 0 8.5 z" class="arrow-head"/>
            </marker>
          </defs>
          <line x1="10" y1="55" x2="110" y2="55" class="axis" />
          <line x1="60" y1="10" x2="60" y2="80" class="axis" />
          
          <path d="M 42 50 C 48 65, 52 40, 60 55 C 68 70, 72 45, 78 50" class="knot" />
          
          <path d="M 20 22 C 30 40, 40 50, 48 55" class="curve" marker-start="url(#arr1)" />
          <path d="M 72 55 C 80 50, 90 40, 100 22" class="curve" marker-end="url(#arr1)" />
        </svg>
      </div>
      <div class="notation-box">
        <span class="not-item"><span class="dir-sym">↖</span> x→-∞, y→+∞</span>
        <span class="not-item"><span class="dir-sym">↗</span> x→+∞, y→+∞</span>
      </div>
    </div>

    
    <div class="card-cell" onclick="selectCell(this)">
      <div class="svg-wrap">
        <svg viewBox="0 0 120 90">
          <defs>
            <marker id="arr2" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
              <path d="M 0 1.5 L 8 5 L 0 8.5 z" class="arrow-head"/>
            </marker>
          </defs>
          <line x1="10" y1="45" x2="110" y2="45" class="axis" />
          <line x1="60" y1="10" x2="60" y2="80" class="axis" />
          
          <path d="M 45 48 C 50 32, 55 60, 60 45 C 65 30, 70 58, 75 42" class="knot" />
          
          <path d="M 22 72 C 32 60, 40 50, 48 45" class="curve" marker-start="url(#arr2)" />
          <path d="M 72 45 C 80 40, 88 30, 98 18" class="curve" marker-end="url(#arr2)" />
        </svg>
      </div>
      <div class="notation-box">
        <span class="not-item"><span class="dir-sym">↙</span> x→-∞, y→-∞</span>
        <span class="not-item"><span class="dir-sym">↗</span> x→+∞, y→+∞</span>
      </div>
    </div>

    
    <div class="header-row">
      <div class="row-tag">a &lt; 0</div>
      <div class="row-sub">Negative</div>
    </div>

    
    <div class="card-cell" onclick="selectCell(this)">
      <div class="svg-wrap">
        <svg viewBox="0 0 120 90">
          <defs>
            <marker id="arr3" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
              <path d="M 0 1.5 L 8 5 L 0 8.5 z" class="arrow-head"/>
            </marker>
          </defs>
          <line x1="10" y1="35" x2="110" y2="35" class="axis" />
          <line x1="60" y1="10" x2="60" y2="80" class="axis" />
          
          <path d="M 42 40 C 48 25, 52 50, 60 35 C 68 20, 72 45, 78 40" class="knot" />
          
          <path d="M 20 68 C 30 50, 40 40, 48 35" class="curve" marker-start="url(#arr3)" />
          <path d="M 72 35 C 80 40, 90 50, 100 68" class="curve" marker-end="url(#arr3)" />
        </svg>
      </div>
      <div class="notation-box">
        <span class="not-item"><span class="dir-sym">↙</span> x→-∞, y→-∞</span>
        <span class="not-item"><span class="dir-sym">↘</span> x→+∞, y→-∞</span>
      </div>
    </div>

    
    <div class="card-cell" onclick="selectCell(this)">
      <div class="svg-wrap">
        <svg viewBox="0 0 120 90">
          <defs>
            <marker id="arr4" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
              <path d="M 0 1.5 L 8 5 L 0 8.5 z" class="arrow-head"/>
            </marker>
          </defs>
          <line x1="10" y1="45" x2="110" y2="45" class="axis" />
          <line x1="60" y1="10" x2="60" y2="80" class="axis" />
          
          <path d="M 45 42 C 50 58, 55 30, 60 45 C 65 60, 70 32, 75 48" class="knot" />
          
          <path d="M 22 18 C 32 30, 40 40, 48 45" class="curve" marker-start="url(#arr4)" />
          <path d="M 72 45 C 80 50, 88 60, 98 72" class="curve" marker-end="url(#arr4)" />
        </svg>
      </div>
      <div class="notation-box">
        <span class="not-item"><span class="dir-sym">↖</span> x→-∞, y→+∞</span>
        <span class="not-item"><span class="dir-sym">↘</span> x→+∞, y→-∞</span>
      </div>
    </div>
  </div>

  <div class="hint-bar">Tap a case to focus</div>

  <script>
    function selectCell(element) {
      document.querySelectorAll('.card-cell').forEach(c => c.classList.remove('active'));
      element.classList.add('active');
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 12px 8px;
      min-height: 100%;
      user-select: none;
    }

    /* Top Controls & Badges */
    .controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: 480px;
      margin-bottom: 8px;
      gap: 8px;
    }
    .step-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      padding: 6px 14px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: background 0.2s;
    }
    .step-btn:hover { background: #e2e8f0; }
    .step-btn:disabled { opacity: 0.35; cursor: not-allowed; }

    .dmsb-pills {
      display: flex;
      gap: 4px;
    }
    .pill {
      font-size: 11px;
      font-weight: 700;
      padding: 3px 6px;
      border-radius: 4px;
      background: #f1f5f9;
      color: #64748b;
      letter-spacing: 0.5px;
    }
    .pill.active {
      background: #22b7ff;
      color: #ffffff;
    }

    /* Division Board */
    .math-stage {
      width: 100%;
      max-width: 480px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 16px 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }

    /* Math Grid Layout */
    .division-grid {
      display: grid;
      grid-template-columns: 75px auto;
      row-gap: 2px;
      font-family: "Courier New", Courier, monospace;
      font-size: 17px;
      font-weight: 700;
      line-height: 1.35;
      letter-spacing: 0.5px;
    }

    .divisor-col {
      text-align: right;
      padding-right: 12px;
      color: #475569;
    }

    .dividend-col {
      position: relative;
      padding-left: 10px;
    }

    /* Long division bracket lines */
    .bracket-top {
      border-top: 2px solid #1e2945;
    }
    .bracket-side {
      border-left: 2px solid #1e2945;
      border-top-left-radius: 6px;
      border-bottom-left-radius: 6px;
    }

    .quotient-row {
      color: #0284c7;
      min-height: 24px;
    }

    .sub-line {
      border-bottom: 2px solid #94a3b8;
      display: inline-block;
      width: 100%;
    }

    /* Animated Subtraction & Sign Change */
    .sign-flip {
      display: inline-block;
      transition: color 0.3s ease, transform 0.3s ease;
      color: #ef4444;
      font-weight: 800;
    }
    .sign-flip.flipped {
      color: #ea580c; /* Bright Orange */
      transform: scale(1.15);
    }

    .term-fade {
      opacity: 0;
      transition: opacity 0.35s ease;
    }
    .term-fade.visible {
      opacity: 1;
    }

    .highlight-quotient {
      background: #e0f2fe;
      padding: 2px 6px;
      border-radius: 4px;
      color: #0369a1;
      border: 1px solid #38bdf8;
    }

    .highlight-remainder {
      background: #ecfdf5;
      padding: 1px 6px;
      border-radius: 4px;
      color: #047857;
      border: 1px solid #34d399;
    }

    /* Mini Action Callout Footer */
    .step-desc {
      margin-top: 12px;
      font-size: 13px;
      color: #334155;
      font-weight: 600;
      text-align: center;
      min-height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #ffffff;
      width: 100%;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      padding: 4px 12px;
    }

    .nav-dots {
      display: flex;
      gap: 6px;
      margin-top: 10px;
    }
    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      transition: all 0.2s;
    }
    .dot.active {
      background: #22b7ff;
      transform: scale(1.25);
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="step-btn" id="prevBtn" onclick="prevStep()">◀ Prev</button>
    <div class="dmsb-pills">
      <span class="pill" id="pill-d">D: DIVIDE</span>
      <span class="pill" id="pill-m">M: MULTIPLY</span>
      <span class="pill" id="pill-s">S: SUBTRACT</span>
      <span class="pill" id="pill-b">B: BRING DOWN</span>
    </div>
    <button class="step-btn" id="nextBtn" onclick="nextStep()">Next ▶</button>
  </div>

  
  <div class="math-stage">
    <div class="division-grid">
      
      <div class="divisor-col"></div>
      <div class="dividend-col quotient-row" id="quotientRow">
        
      </div>

      
      <div class="divisor-col">x − 3</div>
      <div class="dividend-col bracket-top bracket-side">
        2x³ − 3x² − 11x + 6
      </div>

      
      <div class="divisor-col"></div>
      <div class="dividend-col term-fade" id="s1-mult">
        <span id="s1-sign1">−</span>(2x³ <span id="s1-sign2" class="sign-flip">−</span> 6x²)
      </div>

      <div class="divisor-col"></div>
      <div class="dividend-col term-fade" id="s1-res">
        <div class="sub-line"></div>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 3x² <span id="s1-bring" class="term-fade">− 11x</span>
      </div>

      
      <div class="divisor-col"></div>
      <div class="dividend-col term-fade" id="s2-mult">
        &nbsp;&nbsp;&nbsp;&nbsp;<span id="s2-sign1">−</span>(3x² <span id="s2-sign2" class="sign-flip">−</span> 9x)
      </div>

      <div class="divisor-col"></div>
      <div class="dividend-col term-fade" id="s2-res">
        &nbsp;&nbsp;&nbsp;&nbsp;<span class="sub-line"></span>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; −2x <span id="s2-bring" class="term-fade">+ 6</span>
      </div>

      
      <div class="divisor-col"></div>
      <div class="dividend-col term-fade" id="s3-mult">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="s3-sign1">−</span>(−2x <span id="s3-sign2" class="sign-flip">+</span> 6)
      </div>

      <div class="divisor-col"></div>
      <div class="dividend-col term-fade" id="s3-res">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="sub-line"></span>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="rem-zero">0</span>
      </div>
    </div>

    
    <div class="step-desc" id="stepDesc"></div>
  </div>

  
  <div class="nav-dots">
    <div class="dot active" onclick="goToStep(0)"></div>
    <div class="dot" onclick="goToStep(1)"></div>
    <div class="dot" onclick="goToStep(2)"></div>
    <div class="dot" onclick="goToStep(3)"></div>
  </div>

  <script>
    let currentStep = 0;
    const totalSteps = 4;

    const stepData = [
      {
        quotient: "<b>2x²</b>",
        desc: "2x³ ÷ x = <b>2x²</b> → Multiply & subtract (signs flip: − to <b>+</b>) → Bring down <b>−11x</b>",
        pills: ["pill-d", "pill-m", "pill-s", "pill-b"],
        apply: () => {
          show('s1-mult', true);
          flip('s1-sign2', true, '+');
          show('s1-res', true);
          show('s1-bring', true);

          show('s2-mult', false);
          show('s2-res', false);
          show('s3-mult', false);
          show('s3-res', false);
        }
      },
      {
        quotient: "2x² + <b>3x</b>",
        desc: "3x² ÷ x = <b>+3x</b> → Multiply & subtract (signs flip: − to <b>+</b>) → Bring down <b>+6</b>",
        pills: ["pill-d", "pill-m", "pill-s", "pill-b"],
        apply: () => {
          show('s1-mult', true);
          flip('s1-sign2', true, '+');
          show('s1-res', true);
          show('s1-bring', true);

          show('s2-mult', true);
          flip('s2-sign2', true, '+');
          show('s2-res', true);
          show('s2-bring', true);

          show('s3-mult', false);
          show('s3-res', false);
        }
      },
      {
        quotient: "2x² + 3x − <b>2</b>",
        desc: "−2x ÷ x = <b>−2</b> → Multiply & subtract (signs flip: + to <b>−</b>) → Remainder is <b>0</b>",
        pills: ["pill-d", "pill-m", "pill-s"],
        apply: () => {
          show('s1-mult', true);
          flip('s1-sign2', true, '+');
          show('s1-res', true);
          show('s1-bring', true);

          show('s2-mult', true);
          flip('s2-sign2', true, '+');
          show('s2-res', true);
          show('s2-bring', true);

          show('s3-mult', true);
          flip('s3-sign2', true, '−');
          show('s3-res', true);
        }
      },
      {
        quotient: '<span class="highlight-quotient">Quotient: 2x² + 3x − 2</span>',
        desc: 'Division complete! <span class="highlight-quotient">Quotient: 2x² + 3x − 2</span> | <span class="highlight-remainder">Remainder: 0</span>',
        pills: [],
        apply: () => {
          show('s1-mult', true);
          flip('s1-sign2', true, '+');
          show('s1-res', true);
          show('s1-bring', true);

          show('s2-mult', true);
          flip('s2-sign2', true, '+');
          show('s2-res', true);
          show('s2-bring', true);

          show('s3-mult', true);
          flip('s3-sign2', true, '−');
          show('s3-res', true);
          document.getElementById('rem-zero').className = 'highlight-remainder';
        }
      }
    ];

    function show(id, visible) {
      const el = document.getElementById(id);
      if (visible) {
        el.classList.add('visible');
      } else {
        el.classList.remove('visible');
      }
    }

    function flip(id, flipped, signChar) {
      const el = document.getElementById(id);
      if (flipped) {
        el.classList.add('flipped');
        el.textContent = signChar;
      } else {
        el.classList.remove('flipped');
      }
    }

    function render() {
      const data = stepData[currentStep];
      document.getElementById('quotientRow').innerHTML = data.quotient;
      document.getElementById('stepDesc').innerHTML = data.desc;

      // Reset remainder zero highlight if not last step
      if (currentStep < 3) {
        document.getElementById('rem-zero').className = '';
      }

      // Update DMSB pills
      ['pill-d', 'pill-m', 'pill-s', 'pill-b'].forEach(pId => {
        const pill = document.getElementById(pId);
        if (data.pills.includes(pId)) {
          pill.classList.add('active');
        } else {
          pill.classList.remove('active');
        }
      });

      // Update Navigation buttons
      document.getElementById('prevBtn').disabled = currentStep === 0;
      document.getElementById('nextBtn').disabled = currentStep === totalSteps - 1;

      // Update Dots
      const dots = document.querySelectorAll('.dot');
      dots.forEach((dot, idx) => {
        dot.classList.toggle('active', idx === currentStep);
      });

      data.apply();
    }

    function nextStep() {
      if (currentStep < totalSteps - 1) {
        currentStep++;
        render();
      }
    }

    function prevStep() {
      if (currentStep > 0) {
        currentStep--;
        render();
      }
    }

    function goToStep(idx) {
      currentStep = idx;
      render();
    }

    // Initial load
    render();
  </script>
</body>
</html>

Polynomial Long Division with Linear Divisors

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Polynomial Division Placeholders</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e293b;
      background: transparent;
      padding: 12px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
    }

    .container {
      width: 100%;
      max-width: 680px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .nav-bar {
      display: flex;
      gap: 10px;
      margin-bottom: 14px;
      background: #f1f5f9;
      padding: 4px;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
    }

    .step-btn {
      background: transparent;
      border: none;
      border-radius: 6px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }

    .step-btn.active {
      background: #0284c7;
      color: #ffffff;
      box-shadow: 0 1px 3px rgba(2, 132, 199, 0.3);
    }

    .panels {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
      gap: 14px;
      width: 100%;
    }

    .panel {
      background: #ffffff;
      border-radius: 10px;
      border: 1px solid #e2e8f0;
      padding: 14px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    }

    .panel-header {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 12px;
    }
    .panel-wrong .panel-header { color: #dc2626; }
    .panel-right .panel-header { color: #16a34a; }

    /* Division Layout Tables */
    .division-table {
      border-collapse: collapse;
      font-family: "Consolas", "Courier New", monospace;
      font-size: 14px;
      font-weight: 700;
      line-height: 1.4;
      user-select: none;
      margin-bottom: auto;
    }

    .division-table td {
      padding: 3px 4px;
      text-align: center;
      vertical-align: middle;
      height: 28px;
    }

    .col-header-cell {
      font-size: 11px;
      color: #64748b;
      font-weight: 600;
      border-bottom: 1.5px dashed #cbd5e1;
      padding-bottom: 4px !important;
      height: auto !important;
    }

    .divisor-cell {
      text-align: right !important;
      padding-right: 6px !important;
      color: #334155;
      white-space: nowrap;
    }

    /* Long division bar / radix */
    .dividend-bracket {
      border-left: 2px solid #334155;
      border-top-left-radius: 4px;
    }

    .dividend-top-bar {
      border-top: 2px solid #334155;
    }

    .sub-sign {
      color: #64748b;
      font-weight: 800;
      text-align: right !important;
      padding-right: 4px !important;
    }

    .sub-bar-cell {
      border-bottom: 2px solid #94a3b8;
      padding: 0 !important;
      height: 2px !important;
    }

    /* Educational Highlights */
    .placeholder {
      color: #0284c7;
      background: #e0f2fe;
      border-radius: 4px;
      padding: 1px 4px;
    }

    .term-error {
      background: #fee2e2;
      color: #dc2626;
      border: 1.5px dashed #ef4444;
      border-radius: 4px;
      padding: 1px 4px;
    }

    .term-target-error {
      background: #fef3c7;
      color: #b45309;
      border-radius: 4px;
      padding: 1px 4px;
    }

    .term-aligned {
      background: #dcfce7;
      color: #15803d;
      border-radius: 4px;
      padding: 1px 4px;
    }

    /* Result Badges */
    .badge {
      margin-top: 14px;
      padding: 8px 10px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 600;
      line-height: 1.35;
      text-align: center;
      width: 100%;
      min-height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .badge-wrong {
      background: #fef2f2;
      color: #b91c1c;
      border: 1px solid #fecaca;
    }

    .badge-right {
      background: #f0fdf4;
      color: #15803d;
      border: 1px solid #bbf7d0;
    }

    /* Step Transition Controller */
    .step-2-content {
      visibility: hidden;
      opacity: 0;
      transition: opacity 0.25s ease, visibility 0.25s ease;
    }

    .show-step-2 .step-2-content {
      visibility: visible;
      opacity: 1;
    }

    @media (max-width: 420px) {
      .division-table {
        font-size: 12px;
      }
      .division-table td {
        padding: 2px 2px;
      }
      .badge {
        font-size: 11px;
      }
    }
  </style>
</head>
<body>

  <div class="container" id="mainContainer">
    
    <div class="nav-bar">
      <button class="step-btn active" id="btn1" onclick="setStep(1)">Step 1: Setup</button>
      <button class="step-btn" id="btn2" onclick="setStep(2)">Step 2: First Subtraction</button>
    </div>

    <div class="panels">
      
      <div class="panel panel-wrong">
        <div class="panel-header">
          <span>✕</span> Without Placeholders
        </div>

        <table class="division-table">
          
          <tr>
            <td></td>
            <td class="col-header-cell" style="width:50px;">x³</td>
            <td class="col-header-cell" style="width:50px;">x⁰</td>
          </tr>
          
          <tr>
            <td></td>
            <td class="step-2-content">x²</td>
            <td></td>
          </tr>
          
          <tr>
            <td class="divisor-cell">x − 2</td>
            <td class="dividend-top-bar dividend-bracket">x³</td>
            <td class="dividend-top-bar"><span class="term-target-error">−8</span></td>
          </tr>
          
          <tr class="step-2-content">
            <td class="sub-sign">− (</td>
            <td>x³</td>
            <td><span class="term-error">−2x²</span> )</td>
          </tr>
          
          <tr class="step-2-content">
            <td></td>
            <td class="sub-bar-cell"></td>
            <td class="sub-bar-cell"></td>
          </tr>
          
          <tr class="step-2-content">
            <td></td>
            <td>0</td>
            <td class="term-error">???</td>
          </tr>
        </table>

        <div class="badge badge-wrong step-2-content">
          ⚠️ <strong>Mismatch!</strong> Cannot subtract unlike terms: constant (−8) and quadratic (−2x²).
        </div>
      </div>

      
      <div class="panel panel-right">
        <div class="panel-header">
          <span>✓</span> With Placeholders
        </div>

        <table class="division-table">
          
          <tr>
            <td></td>
            <td class="col-header-cell" style="width:38px;">x³</td>
            <td class="col-header-cell" style="width:46px;">x²</td>
            <td class="col-header-cell" style="width:42px;">x¹</td>
            <td class="col-header-cell" style="width:38px;">x⁰</td>
          </tr>
          
          <tr>
            <td></td>
            <td></td>
            <td class="step-2-content">x²</td>
            <td></td>
            <td></td>
          </tr>
          
          <tr>
            <td class="divisor-cell">x − 2</td>
            <td class="dividend-top-bar dividend-bracket">x³</td>
            <td class="dividend-top-bar"><span class="placeholder">+0x²</span></td>
            <td class="dividend-top-bar"><span class="placeholder">+0x</span></td>
            <td class="dividend-top-bar">−8</td>
          </tr>
          
          <tr class="step-2-content">
            <td class="sub-sign">− (</td>
            <td>x³</td>
            <td><span class="term-aligned">−2x²</span></td>
            <td style="color:#64748b;">)</td>
            <td></td>
          </tr>
          
          <tr class="step-2-content">
            <td></td>
            <td class="sub-bar-cell"></td>
            <td class="sub-bar-cell"></td>
            <td class="sub-bar-cell"></td>
            <td class="sub-bar-cell"></td>
          </tr>
          
          <tr class="step-2-content">
            <td></td>
            <td>0</td>
            <td><span class="term-aligned">+2x²</span></td>
            <td>+0x</td>
            <td>−8</td>
          </tr>
        </table>

        <div class="badge badge-right step-2-content">
          ✓ <strong>Aligned:</strong> Columns align by power. 0x² − (−2x²) = +2x² subtracts cleanly.
        </div>
      </div>
    </div>
  </div>

  <script>
    function setStep(step) {
      const container = document.getElementById('mainContainer');
      const b1 = document.getElementById('btn1');
      const b2 = document.getElementById('btn2');

      if (step === 2) {
        container.classList.add('show-step-2');
        b2.classList.add('active');
        b1.classList.remove('active');
      } else {
        container.classList.remove('show-step-2');
        b1.classList.add('active');
        b2.classList.remove('active');
      }
    }

    // Default to Step 2 for immediate educational impact after initial load
    setTimeout(() => {
      setStep(2);
    }, 600);
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Polynomial Long Division</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #0f172a;
      background: transparent;
      padding: 14px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100vh;
      max-height: 580px;
      user-select: none;
    }

    /* Controls Header */
    .controls {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: center;
      width: 100%;
      max-width: 520px;
      margin-bottom: 12px;
    }
    .btn {
      appearance: none;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #334155;
      font-size: 13px;
      font-weight: 600;
      padding: 6px 13px;
      border-radius: 6px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
    }
    .btn:hover {
      background: #f1f5f9;
      color: #0f172a;
      border-color: #94a3b8;
    }
    .btn.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
    }
    .btn-check {
      border-color: #059669;
      color: #047857;
    }
    .btn-check:hover {
      background: #ecfdf5;
      color: #065f46;
      border-color: #059669;
    }
    .btn-check.active {
      background: #059669;
      border-color: #059669;
      color: #ffffff;
    }

    /* Main Stage */
    .stage {
      width: 100%;
      max-width: 520px;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
      min-height: 290px;
    }

    /* Long Division Tableau - No card wrapper/border */
    .tableau {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-family: "SF Mono", Monaco, "Cascadia Code", "Consolas", monospace;
      font-size: 15px;
      line-height: 1.45;
      width: 100%;
      padding: 4px 0;
    }

    .table-grid {
      display: grid;
      grid-template-columns: auto auto;
      column-gap: 8px;
      row-gap: 2px;
      align-items: center;
    }

    .divisor-col {
      text-align: right;
      font-weight: 700;
      color: #334155;
      padding-right: 6px;
      white-space: nowrap;
    }

    .dividend-box {
      border-top: 2px solid #0f172a;
      border-left: 2px solid #0f172a;
      padding-left: 10px;
      padding-top: 2px;
      border-top-left-radius: 4px;
      font-weight: 600;
      color: #0f172a;
      white-space: nowrap;
    }

    .quotient-row {
      grid-column: 2;
      padding-left: 10px;
      font-weight: 700;
      color: #0369a1;
      min-height: 24px;
      white-space: nowrap;
    }

    .steps-container {
      grid-column: 2;
      padding-left: 10px;
    }

    /* Step Lines - Hidden completely when inactive */
    .step-line {
      white-space: pre;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s ease;
      color: #1e293b;
      font-weight: 500;
    }
    .step-line.visible {
      opacity: 1;
      visibility: visible;
    }
    .step-line.current {
      color: #0284c7;
      font-weight: 700;
    }
    .step-line.sub-bar {
      border-bottom: 1.5px solid #64748b;
      display: inline-block;
      margin-bottom: 2px;
      color: #64748b;
    }

    /* Verification Box */
    .check-view {
      display: none;
      width: 100%;
      padding: 12px 16px;
      border-left: 4px solid #059669;
      background: #f0fdf4;
      border-radius: 0 6px 6px 0;
      color: #065f46;
      font-size: 14px;
      line-height: 1.6;
    }
    .check-view.visible {
      display: block;
    }
    .check-title {
      font-weight: 700;
      font-size: 13px;
      color: #047857;
      margin-bottom: 8px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .math-row {
      font-family: "SF Mono", Monaco, "Consolas", monospace;
      margin-top: 6px;
      word-break: break-word;
      color: #0f172a;
    }
    .math-row b {
      color: #047857;
    }

    /* Status Bar & Pills */
    .status-bar {
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: 520px;
      font-size: 13px;
      color: #334155;
      gap: 8px;
    }
    .dmsb-pills {
      display: flex;
      gap: 4px;
      flex-shrink: 0;
    }
    .pill {
      padding: 3px 8px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 700;
      background: #f1f5f9;
      color: #475569;
      border: 1px solid #cbd5e1;
    }
    .pill.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
    }

    .rem-tag {
      color: #b91c1c;
      font-weight: 700;
    }

    .step-desc {
      font-weight: 600;
      color: #0f172a;
      text-align: right;
      font-family: "SF Mono", Monaco, "Consolas", monospace;
      font-size: 12.5px;
    }

    @media (max-width: 440px) {
      .tableau { font-size: 13px; }
      .dividend-box, .quotient-row, .steps-container { padding-left: 6px; }
      .btn { font-size: 12px; padding: 5px 9px; }
      .step-desc { font-size: 11.5px; }
      .status-bar { flex-direction: column; align-items: flex-start; gap: 6px; }
      .step-desc { text-align: left; }
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="btn active" id="btn-1" aria-label="Step 1">Step 1</button>
    <button class="btn" id="btn-2" aria-label="Step 2">Step 2</button>
    <button class="btn" id="btn-3" aria-label="Step 3">Step 3</button>
    <button class="btn btn-check" id="btn-check" aria-label="Check Verification">Check ✓</button>
    <button class="btn" id="btn-play" title="Auto Play" aria-label="Auto play">▶</button>
  </div>

  
  <div class="stage">
    
    <div class="tableau" id="divisionTable">
      <div class="table-grid">
        
        <div></div>
        <div class="quotient-row" id="quotientDisplay">
          <span id="q-1">3x²</span><span id="q-2" style="display:none"> − x</span><span id="q-3" style="display:none"> + 1</span> <span id="q-r" style="display:none" class="rem-tag">R 1</span>
        </div>

        
        <div class="divisor-col">2x + 3</div>
        <div class="dividend-box">
          <span>6x³ + 7x² − x + 4</span>
        </div>

        
        <div></div>
        <div class="steps-container">
          
          <div id="s1-mult" class="step-line visible current">−(6x³ + 9x²)</div>
          <div id="s1-bar" class="step-line sub-bar visible">─────────────</div>
          <div id="s1-res" class="step-line visible">     −2x² − x</div>

          
          <div id="s2-mult" class="step-line">−(−2x² − 3x)</div>
          <div id="s2-bar" class="step-line sub-bar">──────────────</div>
          <div id="s2-res" class="step-line">          2x + 4</div>

          
          <div id="s3-mult" class="step-line">       −(2x + 3)</div>
          <div id="s3-bar" class="step-line sub-bar">       ─────────</div>
          <div id="s3-res" class="step-line rem-tag">               1</div>
        </div>
      </div>
    </div>

    
    <div class="check-view" id="checkView">
      <div class="check-title">Verification: (Divisor × Quotient) + Remainder</div>
      <div class="math-row">(2x + 3)(3x² − x + 1) + 1</div>
      <div class="math-row">= (6x³ − 2x² + 2x + 9x² − 3x + 3) + 1</div>
      <div class="math-row">= <b>6x³ + 7x² − x + 4</b> ✓</div>
    </div>
  </div>

  
  <div class="status-bar">
    <div class="dmsb-pills" title="Divide, Multiply, Subtract, Bring down">
      <span class="pill active" id="p-d">D</span>
      <span class="pill active" id="p-m">M</span>
      <span class="pill active" id="p-s">S</span>
      <span class="pill active" id="p-b">B</span>
    </div>
    <div class="step-desc" id="step-label">Step 1: 6x³ ÷ 2x = 3x²</div>
  </div>

  <script>
    let curStep = 1;
    let autoPlayTimer = null;

    const btn1 = document.getElementById('btn-1');
    const btn2 = document.getElementById('btn-2');
    const btn3 = document.getElementById('btn-3');
    const btnCheck = document.getElementById('btn-check');
    const btnPlay = document.getElementById('btn-play');

    const divisionTable = document.getElementById('divisionTable');
    const checkView = document.getElementById('checkView');
    const stepLabel = document.getElementById('step-label');

    const q1 = document.getElementById('q-1');
    const q2 = document.getElementById('q-2');
    const q3 = document.getElementById('q-3');
    const qr = document.getElementById('q-r');

    const s1Mult = document.getElementById('s1-mult');
    const s1Bar = document.getElementById('s1-bar');
    const s1Res = document.getElementById('s1-res');

    const s2Mult = document.getElementById('s2-mult');
    const s2Bar = document.getElementById('s2-bar');
    const s2Res = document.getElementById('s2-res');

    const s3Mult = document.getElementById('s3-mult');
    const s3Bar = document.getElementById('s3-bar');
    const s3Res = document.getElementById('s3-res');

    const pD = document.getElementById('p-d');
    const pM = document.getElementById('p-m');
    const pS = document.getElementById('p-s');
    const pB = document.getElementById('p-b');

    function setPills(d, m, s, b) {
      pD.className = 'pill ' + (d ? 'active' : '');
      pM.className = 'pill ' + (m ? 'active' : '');
      pS.className = 'pill ' + (s ? 'active' : '');
      pB.className = 'pill ' + (b ? 'active' : '');
    }

    function setStep(step) {
      curStep = step;
      [btn1, btn2, btn3, btnCheck].forEach(b => b.classList.remove('active'));

      if (step === 4) {
        btnCheck.classList.add('active');
        divisionTable.style.display = 'none';
        checkView.classList.add('visible');
        stepLabel.textContent = 'Dividend Reconstructed ✓';
        setPills(true, true, true, true);
        return;
      }

      divisionTable.style.display = 'flex';
      checkView.classList.remove('visible');

      if (step === 1) {
        btn1.classList.add('active');
        q1.style.display = 'inline';
        q2.style.display = 'none';
        q3.style.display = 'none';
        qr.style.display = 'none';

        s1Mult.className = 'step-line visible current';
        s1Bar.className = 'step-line sub-bar visible';
        s1Res.className = 'step-line visible';

        s2Mult.className = 'step-line';
        s2Bar.className = 'step-line sub-bar';
        s2Res.className = 'step-line';

        s3Mult.className = 'step-line';
        s3Bar.className = 'step-line sub-bar';
        s3Res.className = 'step-line rem-tag';

        stepLabel.textContent = 'Step 1: 6x³ ÷ 2x = 3x²';
        setPills(true, true, true, true);
      } else if (step === 2) {
        btn2.classList.add('active');
        q1.style.display = 'inline';
        q2.style.display = 'inline';
        q3.style.display = 'none';
        qr.style.display = 'none';

        s1Mult.className = 'step-line visible';
        s1Bar.className = 'step-line sub-bar visible';
        s1Res.className = 'step-line visible';

        s2Mult.className = 'step-line visible current';
        s2Bar.className = 'step-line sub-bar visible';
        s2Res.className = 'step-line visible';

        s3Mult.className = 'step-line';
        s3Bar.className = 'step-line sub-bar';
        s3Res.className = 'step-line rem-tag';

        stepLabel.textContent = 'Step 2: −2x² ÷ 2x = −x';
        setPills(true, true, true, true);
      } else if (step === 3) {
        btn3.classList.add('active');
        q1.style.display = 'inline';
        q2.style.display = 'inline';
        q3.style.display = 'inline';
        qr.style.display = 'inline';

        s1Mult.className = 'step-line visible';
        s1Bar.className = 'step-line sub-bar visible';
        s1Res.className = 'step-line visible';

        s2Mult.className = 'step-line visible';
        s2Bar.className = 'step-line sub-bar visible';
        s2Res.className = 'step-line visible';

        s3Mult.className = 'step-line visible current';
        s3Bar.className = 'step-line sub-bar visible';
        s3Res.className = 'step-line rem-tag visible';

        stepLabel.textContent = 'Step 3: 2x ÷ 2x = 1 (Rem: 1)';
        setPills(true, true, true, false);
      }
    }

    btn1.addEventListener('click', () => { stopAuto(); setStep(1); });
    btn2.addEventListener('click', () => { stopAuto(); setStep(2); });
    btn3.addEventListener('click', () => { stopAuto(); setStep(3); });
    btnCheck.addEventListener('click', () => { stopAuto(); setStep(4); });

    function toggleAuto() {
      if (autoPlayTimer) {
        stopAuto();
      } else {
        btnPlay.textContent = '⏸';
        autoPlayTimer = setInterval(() => {
          let next = curStep + 1;
          if (next > 4) next = 1;
          setStep(next);
        }, 3000);
      }
    }

    function stopAuto() {
      if (autoPlayTimer) {
        clearInterval(autoPlayTimer);
        autoPlayTimer = null;
        btnPlay.textContent = '▶';
      }
    }

    btnPlay.addEventListener('click', toggleAuto);

    // Initial view
    setStep(1);
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; font-family: system-ui, -apple-system, sans-serif; }
    
    body {
      background: #f8fafc;
      color: #1e293b;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-height: 100%;
      justify-content: center;
      max-width: 680px;
      margin: 0 auto;
    }

    .math-var {
      font-family: "Times New Roman", Times, "Cambria Math", serif;
      font-style: italic;
    }

    /* Controls */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .ctrl-label {
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .btn-group {
      display: inline-flex;
      background: #e2e8f0;
      padding: 3px;
      border-radius: 8px;
      gap: 2px;
    }
    .btn-deg {
      border: none;
      background: transparent;
      padding: 5px 12px;
      font-size: 13px;
      font-weight: 700;
      color: #475569;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.15s ease, color 0.15s ease;
    }
    .btn-deg:hover {
      background: rgba(255, 255, 255, 0.6);
    }
    .btn-deg.active {
      background: #ffffff;
      color: #0284c7;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    /* Identity Formula Row */
    .formula-row {
      display: grid;
      grid-template-columns: repeat(7, auto);
      align-items: center;
      justify-content: center;
      gap: 4px;
      width: 100%;
    }

    .term-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: #ffffff;
      border-radius: 8px;
      padding: 6px 8px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.05);
      border-top: 3px solid var(--accent);
      min-width: 60px;
      text-align: center;
    }
    .term-box.dividend  { --accent: #6366f1; }
    .term-box.divisor   { --accent: #0d9488; }
    .term-box.quotient  { --accent: #d97706; }
    .term-box.remainder { --accent: #e11d48; }

    .term-name {
      font-size: 10px;
      font-weight: 700;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.3px;
      margin-bottom: 2px;
      white-space: nowrap;
    }
    .term-math {
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
      line-height: 1.2;
    }
    .term-deg {
      margin-top: 3px;
      font-size: 10px;
      font-weight: 700;
      padding: 2px 4px;
      border-radius: 4px;
      background: #f1f5f9;
      color: var(--accent);
      white-space: nowrap;
    }
    .op {
      font-size: 16px;
      font-weight: 700;
      color: #94a3b8;
      text-align: center;
      user-select: none;
      padding: 0 1px;
    }

    /* Degree Arithmetic Bar */
    .degree-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      flex-wrap: wrap;
      background: #ffffff;
      border: 1px dashed #cbd5e1;
      border-radius: 8px;
      padding: 8px 10px;
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      text-align: center;
    }
    .badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 3px 7px;
      border-radius: 5px;
      font-weight: 700;
      font-size: 12px;
      white-space: nowrap;
    }
    .badge.b-p { background: #e0e7ff; color: #4338ca; }
    .badge.b-d { background: #ccfbf1; color: #0f766e; }
    .badge.b-q { background: #fef3c7; color: #b45309; }
    .badge.b-r { background: #ffe4e6; color: #be123c; }

    /* Callout Grid */
    .grid-bottom {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .info-tile {
      background: #ffffff;
      border-radius: 8px;
      padding: 8px 10px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
      display: flex;
      flex-direction: column;
      gap: 4px;
      border: 1px solid #e2e8f0;
    }
    .tile-title {
      font-size: 10px;
      font-weight: 700;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.3px;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .tile-body {
      font-size: 12px;
      font-weight: 600;
      color: #0f172a;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 32px;
      text-align: center;
      line-height: 1.3;
      word-break: break-word;
    }
    .highlight-rule {
      background: #fff1f2;
      border-color: #fecdd3;
    }

    sup {
      font-size: 0.75em;
      line-height: 0;
      position: relative;
      vertical-align: baseline;
      top: -0.45em;
    }

    /* Small Screen Adjustments (350px) */
    @media (max-width: 440px) {
      body {
        padding: 8px;
        gap: 8px;
      }
      .term-box {
        min-width: 52px;
        padding: 5px 3px;
      }
      .term-name {
        font-size: 9px;
      }
      .term-math {
        font-size: 13px;
      }
      .term-deg {
        font-size: 9px;
        padding: 1px 3px;
      }
      .op {
        font-size: 14px;
        padding: 0;
      }
      .degree-bar {
        font-size: 11px;
        padding: 6px 8px;
        gap: 4px;
      }
      .badge {
        padding: 2px 5px;
        font-size: 11px;
      }
      .grid-bottom {
        grid-template-columns: 1fr;
      }
      .tile-body {
        font-size: 11.5px;
        min-height: 24px;
      }
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <span class="ctrl-label">Degree <span class="math-var">n</span>:</span>
    <div class="btn-group" id="btnGroup" role="group" aria-label="Select degree">
      <button class="btn-deg" onclick="setDegree(2)">2</button>
      <button class="btn-deg active" onclick="setDegree(3)">3</button>
      <button class="btn-deg" onclick="setDegree(4)">4</button>
      <button class="btn-deg" onclick="setDegree(5)">5</button>
    </div>
  </div>

  
  <div class="formula-row">
    <div class="term-box dividend">
      <span class="term-name">Dividend</span>
      <span class="term-math"><span class="math-var">P</span>(<span class="math-var">x</span>)</span>
      <span class="term-deg" id="degP">deg = 3</span>
    </div>

    <span class="op">=</span>

    <div class="term-box divisor">
      <span class="term-name">Divisor</span>
      <span class="term-math"><span class="math-var">D</span>(<span class="math-var">x</span>)</span>
      <span class="term-deg" id="degD">deg = 1</span>
    </div>

    <span class="op">×</span>

    <div class="term-box quotient">
      <span class="term-name">Quotient</span>
      <span class="term-math"><span class="math-var">Q</span>(<span class="math-var">x</span>)</span>
      <span class="term-deg" id="degQ">deg = 2</span>
    </div>

    <span class="op">+</span>

    <div class="term-box remainder">
      <span class="term-name">Remainder</span>
      <span class="term-math"><span class="math-var">R</span></span>
      <span class="term-deg" id="degR">deg = 0</span>
    </div>
  </div>

  
  <div class="degree-bar" id="degreeBar"></div>

  
  <div class="grid-bottom">
    <div class="info-tile highlight-rule">
      <span class="tile-title">✦ Remainder Rule</span>
      <div class="tile-body" id="remRule">
        <span>deg(<span class="math-var">R</span>) &lt; deg(<span class="math-var">D</span>) &rarr; deg(<span class="math-var">R</span>) = 0&nbsp;<strong>(Constant)</strong></span>
      </div>
    </div>
    <div class="info-tile">
      <span class="tile-title">✦ Example Equation</span>
      <div class="tile-body" id="exampleEq"></div>
    </div>
  </div>

  <script>
    const examples = {
      2: "<i>x</i><sup>2</sup> + 5<i>x</i> + 6 = (<i>x</i> + 2)(<i>x</i> + 3) + 0",
      3: "2<i>x</i><sup>3</sup> − 3<i>x</i> + 4 = (<i>x</i> − 1)(2<i>x</i><sup>2</sup> + 2<i>x</i> − 1) + 3",
      4: "<i>x</i><sup>4</sup> + 2<i>x</i><sup>2</sup> − 1 = (<i>x</i> + 3)(<i>x</i><sup>3</sup> − 3<i>x</i><sup>2</sup> + 11<i>x</i> − 33) + 98",
      5: "3<i>x</i><sup>5</sup> − <i>x</i><sup>3</sup> + 2 = (<i>x</i> − 2)(3<i>x</i><sup>4</sup> + 6<i>x</i><sup>3</sup> + 11<i>x</i><sup>2</sup> + 22<i>x</i> + 44) + 90"
    };

    let currentN = 3;

    function renderMath() {
      const n = currentN;

      // Update degree labels in boxes
      document.getElementById("degP").innerHTML = `deg = <strong>${n}</strong>`;
      document.getElementById("degD").innerHTML = `deg = <strong>1</strong>`;
      document.getElementById("degQ").innerHTML = `deg = <strong>${n - 1}</strong>`;
      document.getElementById("degR").innerHTML = `deg = <strong>0</strong>`;

      // Degree Arithmetic bar
      const bar = document.getElementById("degreeBar");
      bar.innerHTML = `
        <span class="badge b-p">deg(<span class="math-var">P</span>) = ${n}</span>
        <span>=</span>
        <span class="badge b-d">deg(<span class="math-var">D</span>) = 1</span>
        <span>+</span>
        <span class="badge b-q">deg(<span class="math-var">Q</span>) = ${n - 1}</span>
      `;

      // Concrete Example
      document.getElementById("exampleEq").innerHTML = examples[n];

      // Buttons
      document.querySelectorAll(".btn-deg").forEach(btn => {
        btn.classList.toggle("active", parseInt(btn.textContent) === n);
      });
    }

    function setDegree(n) {
      currentN = n;
      renderMath();
    }

    window.addEventListener("DOMContentLoaded", renderMath);
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <link rel="stylesheet" href="{{VENDOR_CDN}}/katex.min.css">
  <script src="{{VENDOR_CDN}}/katex.min.js"></script>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      background: #f8f9fa;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      color: #1e2945;
      padding: 8px 10px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      max-width: 760px;
      margin: 0 auto;
    }
    .btn-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px;
    }
    .pill-btn {
      appearance: none;
      border: 1.5px solid #cbd5e1;
      background: #ffffff;
      color: #475569;
      padding: 4px 12px;
      border-radius: 9999px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
      transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }
    .pill-btn:hover {
      background: #f1f5f9;
    }
    .pill-btn.active[data-target="all"] {
      border-color: #475569;
      background: #f1f5f9;
      color: #0f172a;
    }
    .pill-btn.active[data-target="divisor"] {
      border-color: #9333ea;
      background: #faf5ff;
      color: #7e22ce;
      box-shadow: 0 0 0 1px #9333ea;
    }
    .pill-btn.active[data-target="dividend"] {
      border-color: #2563eb;
      background: #eff6ff;
      color: #1d4ed8;
      box-shadow: 0 0 0 1px #2563eb;
    }
    .pill-btn.active[data-target="quotient"] {
      border-color: #059669;
      background: #ecfdf5;
      color: #047857;
      box-shadow: 0 0 0 1px #059669;
    }
    .pill-btn.active[data-target="remainder"] {
      border-color: #d97706;
      background: #fffbeb;
      color: #b45309;
      box-shadow: 0 0 0 1px #d97706;
    }

    .cards-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    @media (max-width: 480px) {
      .cards-grid {
        grid-template-columns: 1fr;
      }
    }
    .panel-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 10px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .panel-title {
      font-size: 12px;
      font-weight: 700;
      color: #475569;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-bottom: 6px;
      text-align: center;
    }

    .division-layout {
      font-size: 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
    }

    .math-token {
      display: inline-block;
      padding: 1px 4px;
      border-radius: 4px;
      font-weight: 700;
      transition: opacity 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
    }

    /* Base colors */
    .token-divisor {
      color: #9333ea;
    }
    .token-dividend {
      color: #2563eb;
    }
    .token-quotient {
      color: #059669;
    }
    .token-remainder {
      color: #d97706;
    }

    /* Highlight glows */
    body[data-filter="divisor"] .token-divisor,
    body[data-filter="dividend"] .token-dividend,
    body[data-filter="quotient"] .token-quotient,
    body[data-filter="remainder"] .token-remainder {
      box-shadow: 0 0 0 2px currentColor;
    }
    body[data-filter="divisor"] .token-divisor { background: #faf5ff; }
    body[data-filter="dividend"] .token-dividend { background: #eff6ff; }
    body[data-filter="quotient"] .token-quotient { background: #ecfdf5; }
    body[data-filter="remainder"] .token-remainder { background: #fffbeb; }

    /* Dimming */
    body[data-filter="divisor"] .math-token:not(.token-divisor),
    body[data-filter="dividend"] .math-token:not(.token-dividend),
    body[data-filter="quotient"] .math-token:not(.token-quotient),
    body[data-filter="remainder"] .math-token:not(.token-remainder),
    body[data-filter="divisor"] .working-row,
    body[data-filter="dividend"] .working-row,
    body[data-filter="quotient"] .working-row,
    body[data-filter="remainder"] .working-row:not(.remainder-row) {
      opacity: 0.22;
    }

    .working-row {
      transition: opacity 0.25s ease;
      color: #475569;
    }

    /* Integer long division table formatting */
    .int-division-table {
      border-collapse: collapse;
      font-family: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Consolas, monospace;
      font-size: 14px;
      font-variant-numeric: tabular-nums;
      margin: 0 auto;
    }
    .int-division-table td {
      padding: 1px 3px;
      text-align: center;
      min-width: 14px;
    }
    .int-division-table .cell-divisor {
      text-align: right;
      padding-right: 6px;
    }
    .int-division-table .cell-b-left {
      border-left: 2px solid #334155;
      border-top: 2px solid #334155;
    }
    .int-division-table .cell-b-top {
      border-top: 2px solid #334155;
    }
    .sub-border {
      border-bottom: 1.5px solid #94a3b8 !important;
    }

    /* Polynomial long division table */
    .poly-division-table {
      border-collapse: collapse;
      font-family: "KaTeX_Main", "Times New Roman", Cambria, serif;
      font-size: 14px;
      margin: 0 auto;
    }
    .poly-division-table td {
      padding: 1px 4px;
      white-space: nowrap;
    }
    .poly-division-table .cell-divisor {
      text-align: right;
      padding-right: 6px;
    }
    .poly-division-table .cell-main {
      border-top: 2px solid #334155;
      border-left: 2px solid #334155;
      text-align: left;
      padding-left: 6px;
    }

    .bottom-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 10px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }
    .eq-general {
      font-size: 13px;
      text-align: center;
      font-weight: 500;
    }
    .eq-instances {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px;
      font-size: 13px;
      font-family: "KaTeX_Main", "Times New Roman", Cambria, serif;
    }
    .eq-item {
      display: inline-flex;
      align-items: center;
      gap: 2px;
    }
    .math-sym {
      margin: 0 1px;
    }
  </style>
</head>
<body data-filter="all">

  
  <div class="btn-row">
    <button class="pill-btn active" data-target="all">Show All</button>
    <button class="pill-btn" data-target="divisor">Divisor</button>
    <button class="pill-btn" data-target="dividend">Dividend</button>
    <button class="pill-btn" data-target="quotient">Quotient</button>
    <button class="pill-btn" data-target="remainder">Remainder</button>
  </div>

  
  <div class="cards-grid">
    
    <div class="panel-card">
      <div class="panel-title">Integer Division</div>
      <div class="division-layout">
        <table class="int-division-table">
          
          <tr>
            <td></td>
            <td></td>
            <td colspan="3" style="text-align: right;">
              <span class="math-token token-quotient">188</span>
            </td>
          </tr>
          
          <tr>
            <td class="cell-divisor">
              <span class="math-token token-divisor">4</span>
            </td>
            <td class="cell-b-left">
              <span class="math-token token-dividend">7</span>
            </td>
            <td class="cell-b-top">
              <span class="math-token token-dividend">5</span>
            </td>
            <td class="cell-b-top">
              <span class="math-token token-dividend">3</span>
            </td>
          </tr>
          
          <tr class="working-row">
            <td></td>
            <td class="sub-border">−4</td>
            <td class="sub-border"></td>
            <td class="sub-border"></td>
          </tr>
          
          <tr class="working-row">
            <td></td>
            <td>3</td>
            <td>5</td>
            <td></td>
          </tr>
          
          <tr class="working-row">
            <td></td>
            <td class="sub-border">−3</td>
            <td class="sub-border">2</td>
            <td class="sub-border"></td>
          </tr>
          
          <tr class="working-row">
            <td></td>
            <td></td>
            <td>3</td>
            <td>3</td>
          </tr>
          
          <tr class="working-row">
            <td></td>
            <td></td>
            <td class="sub-border">−3</td>
            <td class="sub-border">2</td>
          </tr>
          
          <tr class="working-row remainder-row">
            <td></td>
            <td></td>
            <td></td>
            <td>
              <span class="math-token token-remainder">1</span>
            </td>
          </tr>
        </table>
      </div>
    </div>

    
    <div class="panel-card">
      <div class="panel-title">Polynomial Long Division</div>
      <div class="division-layout">
        <table class="poly-division-table">
          
          <tr>
            <td></td>
            <td style="text-align: left; padding-left: 8px;">
              <span class="math-token token-quotient">2<i>x</i> + 3</span>
            </td>
          </tr>
          
          <tr>
            <td class="cell-divisor">
              <span class="math-token token-divisor"><i>x</i> + 2</span>
            </td>
            <td class="cell-main">
              <span class="math-token token-dividend">2<i>x</i><sup>2</sup> + 7<i>x</i> + 5</span>
            </td>
          </tr>
          
          <tr class="working-row">
            <td></td>
            <td class="sub-border" style="text-align: left; padding-left: 6px;">
              −(2<i>x</i><sup>2</sup> + 4<i>x</i>)
            </td>
          </tr>
          
          <tr class="working-row">
            <td></td>
            <td style="text-align: left; padding-left: 48px;">
              3<i>x</i> + 5
            </td>
          </tr>
          
          <tr class="working-row">
            <td></td>
            <td class="sub-border" style="text-align: left; padding-left: 36px;">
              −(3<i>x</i> + 6)
            </td>
          </tr>
          
          <tr class="working-row remainder-row">
            <td></td>
            <td style="text-align: left; padding-left: 78px;">
              <span class="math-token token-remainder">−1</span>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>

  
  <div class="bottom-card">
    <div class="eq-general">
      <span class="math-token token-dividend">Dividend</span> = 
      (<span class="math-token token-divisor">Divisor</span> × 
      <span class="math-token token-quotient">Quotient</span>) + 
      <span class="math-token token-remainder">Remainder</span>
    </div>
    <div class="eq-instances">
      
      <div class="eq-item">
        <span class="math-token token-dividend">753</span>
        <span class="math-sym">=</span>
        (<span class="math-token token-divisor">4</span>
        <span class="math-sym">×</span>
        <span class="math-token token-quotient">188</span>)
        <span class="math-sym">+</span>
        <span class="math-token token-remainder">1</span>
      </div>
      
      <div class="eq-item">
        <span class="math-token token-dividend">2<i>x</i><sup>2</sup> + 7<i>x</i> + 5</span>
        <span class="math-sym">=</span>
        (<span class="math-token token-divisor"><i>x</i> + 2</span>)(<span class="math-token token-quotient">2<i>x</i> + 3</span>)
        <span class="math-sym">+</span>
        (<span class="math-token token-remainder">−1</span>)
      </div>
    </div>
  </div>

  <script>
    // Optional KaTeX dynamic enhancer if loaded
    document.addEventListener('DOMContentLoaded', () => {
      if (window.katex) {
        document.querySelectorAll('[data-katex]').forEach(el => {
          try {
            katex.render(el.getAttribute('data-katex'), el, { throwOnError: false });
          } catch (e) {}
        });
      }
    });

    // Handle filter interactions
    const buttons = document.querySelectorAll('.pill-btn');
    buttons.forEach(btn => {
      btn.addEventListener('click', () => {
        buttons.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        const target = btn.getAttribute('data-target');
        document.body.setAttribute('data-filter', target);
      });
    });
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
      gap: 12px;
    }

    .comparison-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 580px;
    }

    .panel {
      background: #ffffff;
      border-radius: 12px;
      padding: 14px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      transition: all 0.3s ease;
    }

    .panel-wrong {
      border: 2px solid #fecaca;
      background: #fffafa;
    }

    .panel-correct {
      border: 2px solid #bbf7d0;
      background: #f8fdf9;
    }

    .badge {
      font-size: 13px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 20px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin-bottom: 12px;
      letter-spacing: 0.02em;
    }

    .badge-wrong {
      background: #fee2e2;
      color: #dc2626;
    }

    .badge-correct {
      background: #dcfce7;
      color: #16a34a;
    }

    .math-block {
      font-family: "Courier New", Courier, monospace;
      font-size: 16px;
      font-weight: 700;
      line-height: 1.7;
      text-align: right;
      width: 100%;
      max-width: 180px;
      user-select: none;
    }

    .row {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      position: relative;
      height: 30px;
    }

    .sub-sign {
      position: absolute;
      left: 0;
      font-size: 18px;
      font-weight: bold;
    }

    .divider-line {
      width: 100%;
      height: 2px;
      background: #94a3b8;
      margin: 4px 0 6px 0;
    }

    .flip-circle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #fef08a;
      border: 2px solid #eab308;
      color: #854d0e;
      border-radius: 50%;
      width: 24px;
      height: 24px;
      font-size: 16px;
      font-weight: 900;
      margin-right: 2px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
      animation: pulse 2s infinite ease-in-out;
    }

    .strikethrough {
      position: relative;
      color: #94a3b8;
      margin-right: 4px;
      font-size: 14px;
      text-decoration: line-through;
      text-decoration-color: #ef4444;
      text-decoration-thickness: 2px;
    }

    .res-wrong {
      color: #dc2626;
      font-weight: 800;
    }

    .res-correct {
      color: #16a34a;
      font-weight: 800;
      background: #dcfce7;
      padding: 1px 6px;
      border-radius: 4px;
    }

    .tip-banner {
      width: 100%;
      max-width: 580px;
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      border-radius: 8px;
      padding: 8px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #1e40af;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      text-align: center;
    }

    @keyframes pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.1); }
    }

    @media (max-width: 380px) {
      .math-block {
        font-size: 14px;
        max-width: 150px;
      }
      .flip-circle {
        width: 20px;
        height: 20px;
        font-size: 14px;
      }
      .badge {
        font-size: 11px;
        padding: 3px 8px;
      }
      .tip-banner {
        font-size: 12px;
      }
    }
  </style>
</head>
<body>

  <div class="comparison-grid">
    
    <div class="panel panel-wrong">
      <div class="badge badge-wrong">✕ Wrong</div>
      <div class="math-block">
        <div class="row">
          <span>3x² − 11x</span>
        </div>
        <div class="row">
          <span class="sub-sign">−</span>
          <span>(3x² − 9x)</span>
        </div>
        <div class="divider-line"></div>
        <div class="row">
          <span class="res-wrong">−20x</span>
        </div>
      </div>
    </div>

    
    <div class="panel panel-correct">
      <div class="badge badge-correct">✓ Correct</div>
      <div class="math-block">
        <div class="row">
          <span>3x² − 11x</span>
        </div>
        <div class="row">
          <span class="sub-sign" style="color:#16a34a;">+</span>
          <span>−3x² <span class="strikethrough">−</span><span class="flip-circle">+</span>9x</span>
        </div>
        <div class="divider-line"></div>
        <div class="row">
          <span class="res-correct">−2x</span>
        </div>
      </div>
    </div>
  </div>

  
  <div class="tip-banner">
    <span>💡</span>
    <span>Circle and flip every sign on the bottom row before adding.</span>
  </div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8fafc;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 16px 12px;
      user-select: none;
      -webkit-user-select: none;
    }

    .diagram-wrap {
      width: 100%;
      max-width: 520px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      position: relative;
    }

    .cycle-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      width: 100%;
      position: relative;
    }

    /* Cards */
    .step-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      cursor: pointer;
      position: relative;
      transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
      min-height: 94px;
      justify-content: center;
    }

    .step-card:hover {
      background: #f8fafc;
    }

    .step-header {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 4px;
    }

    .step-badge {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 800;
      color: #ffffff;
    }

    .step-action {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      font-family: ui-monospace, "SF Mono", monospace;
      background: #f1f5f9;
      padding: 3px 8px;
      border-radius: 6px;
      margin-top: 4px;
    }

    /* Specific step accents */
    .card-1 .step-badge { background: #2563eb; }
    .card-1.active {
      border-color: #2563eb;
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
      background: #eff6ff;
    }
    .card-1.active .step-header { color: #1d4ed8; }
    .card-1.active .step-action { background: #dbeafe; color: #1e40af; }

    .card-2 .step-badge { background: #7c3aed; }
    .card-2.active {
      border-color: #7c3aed;
      box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18);
      background: #f5f3ff;
    }
    .card-2.active .step-header { color: #6d28d9; }
    .card-2.active .step-action { background: #ede9fe; color: #5b21b6; }

    .card-3 .step-badge { background: #e11d48; }
    .card-3.active {
      border-color: #e11d48;
      box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.18);
      background: #fff1f2;
    }
    .card-3.active .step-header { color: #be123c; }
    .card-3.active .step-action { background: #ffe4e6; color: #9f1239; }

    .card-4 .step-badge { background: #059669; }
    .card-4.active {
      border-color: #059669;
      box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.18);
      background: #ecfdf5;
    }
    .card-4.active .step-header { color: #047857; }
    .card-4.active .step-action { background: #d1fae5; color: #065f46; }

    /* Center Cycle Indicator */
    .center-hub {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: #ffffff;
      border: 2px solid #cbd5e1;
      border-radius: 50%;
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      color: #475569;
      box-shadow: 0 2px 6px rgba(0,0,0,0.06);
      z-index: 2;
      pointer-events: none;
    }

    /* Stop Condition Bar */
    .stop-condition {
      width: 100%;
      background: #ffffff;
      border: 1.5px dashed #cbd5e1;
      border-radius: 10px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 12px;
      font-weight: 600;
      color: #475569;
      text-align: center;
    }

    .stop-flag {
      background: #fee2e2;
      color: #b91c1c;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.5px;
    }

    .stop-rule {
      font-family: ui-monospace, "SF Mono", monospace;
      color: #0f172a;
    }

    /* Stepper Controls */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }

    .btn-ctrl {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 20px;
      padding: 5px 14px;
      font-size: 12px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: background 0.2s, border-color 0.2s;
    }

    .btn-ctrl:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }

    .indicators {
      display: flex;
      gap: 6px;
    }

    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      transition: background 0.3s, transform 0.3s;
    }

    .dot.active {
      background: #2563eb;
      transform: scale(1.25);
    }
  </style>
</head>
<body>

<div class="diagram-wrap">
  <div class="cycle-grid">
    
    <div class="step-card card-1 active" id="step0" onclick="goToStep(0)">
      <div class="step-header">
        <span class="step-badge">D</span>
        <span>1. Divide</span>
      </div>
      <div class="step-action">Lead ÷ Lead</div>
    </div>

    
    <div class="step-card card-2" id="step1" onclick="goToStep(1)">
      <div class="step-header">
        <span class="step-badge">M</span>
        <span>2. Multiply</span>
      </div>
      <div class="step-action">Quotient × Divisor</div>
    </div>

    
    <div class="step-card card-4" id="step3" onclick="goToStep(3)">
      <div class="step-header">
        <span class="step-badge">B</span>
        <span>4. Bring Down</span>
      </div>
      <div class="step-action">Next Term ↓</div>
    </div>

    
    <div class="step-card card-3" id="step2" onclick="goToStep(2)">
      <div class="step-header">
        <span class="step-badge">S</span>
        <span>3. Subtract</span>
      </div>
      <div class="step-action">Flip Signs &amp; Add</div>
    </div>

    
    <div class="center-hub">↻</div>
  </div>

  
  <div class="stop-condition">
    <span class="stop-flag">STOP</span>
    <span>When <span class="stop-rule">deg(Remainder) &lt; deg(Divisor)</span></span>
  </div>

  
  <div class="controls">
    <button class="btn-ctrl" id="playBtn" onclick="togglePlay()">
      <span id="playIcon">⏸</span> <span id="playText">Pause</span>
    </button>
    <div class="indicators">
      <span class="dot active" onclick="goToStep(0)"></span>
      <span class="dot" onclick="goToStep(1)"></span>
      <span class="dot" onclick="goToStep(2)"></span>
      <span class="dot" onclick="goToStep(3)"></span>
    </div>
  </div>
</div>

<script>
  let currentStep = 0;
  let isPlaying = true;
  let intervalId = null;

  const cards = [
    document.getElementById('step0'),
    document.getElementById('step1'),
    document.getElementById('step2'),
    document.getElementById('step3')
  ];

  const dots = document.querySelectorAll('.dot');
  const playBtn = document.getElementById('playBtn');
  const playIcon = document.getElementById('playIcon');
  const playText = document.getElementById('playText');

  function renderState() {
    cards.forEach((card, idx) => {
      if (idx === currentStep) {
        card.classList.add('active');
      } else {
        card.classList.remove('active');
      }
    });

    dots.forEach((dot, idx) => {
      if (idx === currentStep) {
        dot.classList.add('active');
      } else {
        dot.classList.remove('active');
      }
    });
  }

  function nextStep() {
    currentStep = (currentStep + 1) % 4;
    renderState();
  }

  function goToStep(index) {
    currentStep = index;
    renderState();
    if (isPlaying) {
      restartInterval();
    }
  }

  function togglePlay() {
    isPlaying = !isPlaying;
    if (isPlaying) {
      playIcon.textContent = '⏸';
      playText.textContent = 'Pause';
      restartInterval();
    } else {
      playIcon.textContent = '▶';
      playText.textContent = 'Play';
      clearInterval(intervalId);
    }
  }

  function restartInterval() {
    clearInterval(intervalId);
    intervalId = setInterval(nextStep, 3000);
  }

  // Start auto-play loop (3 seconds per step)
  restartInterval();
</script>

</body>
</html>

OGM.10.ALG.4

Aligned learning resources

Related diagrams