<!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">
  <link rel="stylesheet" href="{{VENDOR_CDN}}/katex.min.css">
  <script src="{{VENDOR_CDN}}/katex.min.js"></script>
  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <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: 100vh;
      padding: 12px;
      user-select: none;
    }

    .diagram-content {
      width: 100%;
      max-width: 350px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    /* Equation header */
    .start-pill {
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      border-radius: 20px;
      padding: 6px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 2px;
    }

    .start-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      color: #64748b;
    }

    .start-math {
      font-size: 16px;
      font-weight: 600;
      color: #0f172a;
    }

    /* Steps list */
    .steps-container {
      display: flex;
      flex-direction: column;
      gap: 6px;
      position: relative;
    }

    .step-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 8px 10px;
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      transition: all 0.25s ease;
      box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    }

    .step-card.active {
      border-color: #22b7ff;
      background: #f0f9ff;
      box-shadow: 0 0 0 1px #22b7ff, 0 2px 8px rgba(34, 183, 255, 0.15);
    }

    .step-card.completed:not(.active) {
      border-color: #cbd5e1;
      opacity: 0.9;
    }

    /* Step Badge */
    .step-badge {
      width: 26px;
      height: 26px;
      min-width: 26px;
      border-radius: 50%;
      background: #e2e8f0;
      color: #475569;
      font-size: 12px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.25s ease;
    }

    .step-card.active .step-badge {
      background: #0284c7;
      color: #ffffff;
    }

    .step-card:nth-child(1).active .step-badge { background: #0284c7; }
    .step-card:nth-child(2).active .step-badge { background: #0d9488; }
    .step-card:nth-child(3).active .step-badge { background: #d97706; }
    .step-card:nth-child(4).active .step-badge { background: #16a34a; }

    /* Action Pill */
    .step-op {
      font-size: 11px;
      font-weight: 700;
      padding: 3px 7px;
      border-radius: 6px;
      background: #f1f5f9;
      color: #475569;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 58px;
      white-space: nowrap;
    }

    .step-card.active .step-op {
      background: #e0f2fe;
      color: #0369a1;
    }

    .step-arrow {
      color: #94a3b8;
      font-size: 12px;
      display: flex;
      align-items: center;
    }

    .step-card.active .step-arrow {
      color: #0284c7;
    }

    /* Result Math */
    .step-result {
      flex: 1;
      text-align: right;
      font-size: 15px;
      font-weight: 600;
      color: #1e2945;
      padding-right: 4px;
    }

    .step-card.active .step-result {
      color: #0f172a;
    }

    /* Step 4 special highlighting */
    .step-card:nth-child(4).active {
      background: #f0fdf4;
      border-color: #22c55e;
      box-shadow: 0 0 0 1px #22c55e, 0 2px 8px rgba(34, 197, 94, 0.15);
    }
    .step-card:nth-child(4).active .step-op {
      background: #dcfce7;
      color: #15803d;
    }
    .step-card:nth-child(4).active .step-arrow {
      color: #16a34a;
    }

    /* Stepper Controls */
    .controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 4px;
      padding: 0 2px;
    }

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

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

    .dots-row {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .dot.active {
      background: #0284c7;
      transform: scale(1.2);
    }
  </style>
</head>
<body>

<div class="diagram-content">
  
  <div class="start-pill">
    <span class="start-label">Start</span>
    <span class="start-math" id="math-start"></span>
  </div>

  
  <div class="steps-container">
    
    <div class="step-card step active" data-step="0">
      <div class="step-badge">1</div>
      <div class="step-op">+ 32</div>
      <div class="step-arrow">→</div>
      <div class="step-result" id="math-step1"></div>
    </div>

    
    <div class="step-card step" data-step="1">
      <div class="step-badge">2</div>
      <div class="step-op">÷ 2</div>
      <div class="step-arrow">→</div>
      <div class="step-result" id="math-step2"></div>
    </div>

    
    <div class="step-card step" data-step="2">
      <div class="step-badge">3</div>
      <div class="step-op">√</div>
      <div class="step-arrow">→</div>
      <div class="step-result" id="math-step3"></div>
    </div>

    
    <div class="step-card step" data-step="3">
      <div class="step-badge">4</div>
      <div class="step-op">±4</div>
      <div class="step-arrow">→</div>
      <div class="step-result" id="math-step4"></div>
    </div>
  </div>

  
  <div class="controls">
    <button class="btn-ctrl" id="prevBtn" aria-label="Previous step">◀</button>
    <div class="dots-row">
      <div class="dot active" data-index="0" title="Step 1"></div>
      <div class="dot" data-index="1" title="Step 2"></div>
      <div class="dot" data-index="2" title="Step 3"></div>
      <div class="dot" data-index="3" title="Step 4"></div>
    </div>
    <button class="btn-ctrl" id="playBtn" aria-label="Play/Pause">⏸</button>
    <button class="btn-ctrl" id="nextBtn" aria-label="Next step">▶</button>
  </div>
</div>

<script>
  // Render KaTeX Math Expressions safely
  function renderEquations() {
    if (typeof katex !== 'undefined') {
      katex.render("2x^2 - 32 = 0", document.getElementById('math-start'), { throwOnError: false });
      katex.render("2x^2 = 32", document.getElementById('math-step1'), { throwOnError: false });
      katex.render("x^2 = 16", document.getElementById('math-step2'), { throwOnError: false });
      katex.render("x = \\pm\\sqrt{16}", document.getElementById('math-step3'), { throwOnError: false });
      katex.render("x = \\pm 4", document.getElementById('math-step4'), { throwOnError: false });
    } else {
      document.getElementById('math-start').textContent = "2x² - 32 = 0";
      document.getElementById('math-step1').textContent = "2x² = 32";
      document.getElementById('math-step2').textContent = "x² = 16";
      document.getElementById('math-step3').textContent = "x = ±√16";
      document.getElementById('math-step4').textContent = "x = ±4";
    }
  }

  renderEquations();

  const stepCards = document.querySelectorAll('.step-card');
  const dots = document.querySelectorAll('.dot');
  const playBtn = document.getElementById('playBtn');
  const prevBtn = document.getElementById('prevBtn');
  const nextBtn = document.getElementById('nextBtn');

  let currentStep = 0;
  let isPlaying = true;
  let timer = null;
  const STEP_INTERVAL = 3200;

  function setStep(index) {
    currentStep = (index + stepCards.length) % stepCards.length;
    
    stepCards.forEach((card, i) => {
      card.classList.toggle('active', i === currentStep);
      card.classList.toggle('completed', i < currentStep);
    });

    dots.forEach((dot, i) => {
      dot.classList.toggle('active', i === currentStep);
    });
  }

  function startAutoPlay() {
    clearInterval(timer);
    timer = setInterval(() => {
      setStep(currentStep + 1);
    }, STEP_INTERVAL);
    isPlaying = true;
    playBtn.textContent = '⏸';
  }

  function pauseAutoPlay() {
    clearInterval(timer);
    isPlaying = false;
    playBtn.textContent = '▶';
  }

  function togglePlay() {
    if (isPlaying) {
      pauseAutoPlay();
    } else {
      setStep(currentStep + 1);
      startAutoPlay();
    }
  }

  // Event handlers
  stepCards.forEach((card, index) => {
    card.addEventListener('click', () => {
      pauseAutoPlay();
      setStep(index);
    });
  });

  dots.forEach((dot, index) => {
    dot.addEventListener('click', () => {
      pauseAutoPlay();
      setStep(index);
    });
  });

  prevBtn.addEventListener('click', () => {
    pauseAutoPlay();
    setStep(currentStep - 1);
  });

  nextBtn.addEventListener('click', () => {
    pauseAutoPlay();
    setStep(currentStep + 1);
  });

  playBtn.addEventListener('click', togglePlay);

  // Initialize
  setStep(0);
  startAutoPlay();
</script>
</body>
</html>

Solving Quadratic Equations Using Square Roots

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <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 {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8fafc;
      color: #0f172a;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 12px 10px;
      user-select: none;
    }

    .flow-container {
      width: 100%;
      max-width: 440px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }

    /* Cards */
    .math-card {
      background: #ffffff;
      border: 2px solid #cbd5e1;
      border-radius: 10px;
      padding: 7px 18px;
      text-align: center;
      box-shadow: 0 1px 4px rgba(0,0,0,0.05);
      transition: all 0.3s ease;
      font-size: 16px;
      font-weight: 600;
      color: #0f172a;
    }

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

    /* Flow connector arrows */
    .arrow-connector {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #0284c7;
      margin: -1px 0;
      transition: opacity 0.3s ease;
    }

    .arrow-icon {
      width: 16px;
      height: 14px;
      fill: none;
      stroke: #0284c7;
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* Operation connector pill */
    .op-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      background: #e0f2fe;
      color: #0369a1;
      font-size: 12px;
      font-weight: 700;
      padding: 3px 12px;
      border-radius: 16px;
      border: 1.5px solid #7dd3fc;
      transition: all 0.3s ease;
      margin: 1px 0;
    }

    /* Fork / Branching connector */
    .fork-container {
      width: 100%;
      height: 22px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 1px 0 -2px 0;
      transition: opacity 0.3s ease;
    }

    .fork-svg {
      width: 70%;
      max-width: 240px;
      height: 22px;
      overflow: visible;
    }

    /* Branching section */
    .branches-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      width: 100%;
    }

    .branch-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      background: #ffffff;
      border: 2px solid #cbd5e1;
      border-radius: 10px;
      padding: 8px 6px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.05);
      transition: all 0.3s ease;
    }

    .branch-col.case-pos {
      border-top: 4px solid #16a34a;
    }

    .branch-col.case-neg {
      border-top: 4px solid #ea580c;
    }

    .branch-col.active {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      border-color: #94a3b8;
    }

    .branch-col.case-pos.active {
      border-color: #16a34a;
      background: #fcfdfc;
    }

    .branch-col.case-neg.active {
      border-color: #ea580c;
      background: #fdfcfb;
    }

    .case-title {
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .case-pos .case-title { color: #15803d; }
    .case-neg .case-title { color: #c2410c; }

    .step-line {
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
    }

    .sub-op {
      font-size: 11px;
      color: #334155;
      font-weight: 700;
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      padding: 2px 7px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      gap: 3px;
    }

    .sub-arrow {
      width: 12px;
      height: 12px;
      fill: none;
      stroke: #64748b;
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* Solution badges */
    .solution-badge {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      font-weight: 800;
      padding: 4px 10px;
      border-radius: 6px;
      width: 90%;
      transition: all 0.3s ease;
      color: #0f172a;
    }

    .case-pos .solution-badge {
      background: #dcfce7;
      color: #14532d;
      border: 1.5px solid #86efac;
    }

    .case-neg .solution-badge {
      background: #ffedd5;
      color: #7c2d12;
      border: 1.5px solid #fdba74;
    }

    /* Visibility states for step pacing */
    .step-hidden {
      opacity: 0.25;
      filter: grayscale(60%);
      pointer-events: none;
    }

    .step-visible {
      opacity: 1;
      filter: none;
    }

    /* Controls bar */
    .controls-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      width: 100%;
      margin-top: 10px;
      flex-wrap: wrap;
    }

    .ctrl-btn {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      border-radius: 8px;
      padding: 5px 12px;
      font-size: 13px;
      font-weight: 700;
      color: #334155;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.2s ease, border-color 0.2s ease;
    }

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

    .step-indicator {
      display: flex;
      gap: 5px;
    }

    .dot {
      width: 26px;
      height: 26px;
      border-radius: 6px;
      border: 1.5px solid #cbd5e1;
      background: #ffffff;
      color: #475569;
      font-size: 12px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }

    .dot:hover {
      border-color: #94a3b8;
      background: #f8fafc;
    }

    .dot.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
    }

    @media (max-width: 360px) {
      body {
        padding: 8px 6px;
      }
      .math-card {
        padding: 5px 12px;
        font-size: 15px;
      }
      .branch-col {
        padding: 6px 4px;
        gap: 4px;
      }
      .case-title {
        font-size: 10px;
      }
      .step-line {
        font-size: 13.5px;
      }
      .sub-op {
        font-size: 10px;
        padding: 1px 4px;
      }
      .solution-badge {
        font-size: 13.5px;
        padding: 3px 6px;
      }
    }
  </style>
</head>
<body>

  <div class="flow-container">
    
    <div id="card0" class="math-card step-visible">
      <span class="katex-render" data-tex="(x - 3)^2 = 25">(x - 3)² = 25</span>
    </div>

    
    <div id="arr0" class="arrow-connector step-hidden">
      <svg class="arrow-icon" viewBox="0 0 24 24">
        <path d="M12 4v16m0 0l-6-6m6 6l6-6"/>
      </svg>
    </div>

    
    <div id="op0" class="op-pill step-hidden">
      <span>Take √ of both sides</span>
    </div>

    
    <div id="arr1" class="arrow-connector step-hidden">
      <svg class="arrow-icon" viewBox="0 0 24 24">
        <path d="M12 4v16m0 0l-6-6m6 6l6-6"/>
      </svg>
    </div>

    
    <div id="card1" class="math-card step-hidden">
      <span class="katex-render" data-tex="x - 3 = \pm 5">x - 3 = ±5</span>
    </div>

    
    <div id="forkBranch" class="fork-container step-hidden">
      <svg class="fork-svg" viewBox="0 0 200 24" preserveAspectRatio="none">
        <path d="M100,0 L100,8 L35,8 L35,22 M30,16 L35,22 L40,16 M100,8 L165,8 L165,22 M160,16 L165,22 L170,16" 
              fill="none" stroke="#0284c7" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </div>

    
    <div class="branches-row">
      
      <div id="branchPos" class="branch-col case-pos step-hidden">
        <span class="case-title">Positive Case (+)</span>
        <div class="step-line">
          <span class="katex-render" data-tex="x - 3 = +5">x - 3 = +5</span>
        </div>
        
        <div id="addPos" class="sub-op step-hidden">
          <svg class="sub-arrow" viewBox="0 0 24 24">
            <path d="M12 4v16m0 0l-5-5m5 5l5-5"/>
          </svg>
          <span>add 3</span>
        </div>
        
        <div id="solPos" class="solution-badge step-hidden">
          <span class="katex-render" data-tex="x = 8">x = 8</span>
        </div>
      </div>

      
      <div id="branchNeg" class="branch-col case-neg step-hidden">
        <span class="case-title">Negative Case (−)</span>
        <div class="step-line">
          <span class="katex-render" data-tex="x - 3 = -5">x - 3 = -5</span>
        </div>
        
        <div id="addNeg" class="sub-op step-hidden">
          <svg class="sub-arrow" viewBox="0 0 24 24">
            <path d="M12 4v16m0 0l-5-5m5 5l5-5"/>
          </svg>
          <span>add 3</span>
        </div>
        
        <div id="solNeg" class="solution-badge step-hidden">
          <span class="katex-render" data-tex="x = -2">x = -2</span>
        </div>
      </div>
    </div>
  </div>

  
  <div class="controls-bar">
    <button id="playBtn" class="ctrl-btn" aria-label="Play or pause animation">
      <span id="playIcon">⏸</span>
    </button>
    <div class="step-indicator">
      <button class="dot active" data-step="0" aria-label="Step 1">1</button>
      <button class="dot" data-step="1" aria-label="Step 2">2</button>
      <button class="dot" data-step="2" aria-label="Step 3">3</button>
      <button class="dot" data-step="3" aria-label="Step 4">4</button>
    </div>
  </div>

  <script>
    // Render math formulas with KaTeX
    function initMath() {
      if (window.katex) {
        document.querySelectorAll('.katex-render').forEach(el => {
          const tex = el.getAttribute('data-tex');
          if (tex) {
            katex.render(tex, el, { throwOnError: false, displayMode: false });
          }
        });
      }
    }
    initMath();

    let currentStep = 0;
    const totalSteps = 4;
    let isPlaying = true;
    let timer = null;

    const elCard0 = document.getElementById('card0');
    const elArr0 = document.getElementById('arr0');
    const elOp0 = document.getElementById('op0');
    const elArr1 = document.getElementById('arr1');
    const elCard1 = document.getElementById('card1');
    const elForkBranch = document.getElementById('forkBranch');
    const elBranchPos = document.getElementById('branchPos');
    const elBranchNeg = document.getElementById('branchNeg');
    const elAddPos = document.getElementById('addPos');
    const elAddNeg = document.getElementById('addNeg');
    const elSolPos = document.getElementById('solPos');
    const elSolNeg = document.getElementById('solNeg');
    const dots = document.querySelectorAll('.dot');
    const playBtn = document.getElementById('playBtn');
    const playIcon = document.getElementById('playIcon');

    function setVisible(el, visible, active = false) {
      if (visible) {
        el.classList.remove('step-hidden');
        el.classList.add('step-visible');
      } else {
        el.classList.add('step-hidden');
        el.classList.remove('step-visible');
      }
      if (active) {
        el.classList.add('active');
      } else {
        el.classList.remove('active');
      }
    }

    function renderState(step) {
      currentStep = step;
      dots.forEach((d, idx) => {
        d.classList.toggle('active', idx === step);
      });

      // Step 0: Given equation
      setVisible(elCard0, true, step === 0);
      setVisible(elArr0, step >= 1);
      setVisible(elOp0, step >= 1);
      setVisible(elArr1, step >= 1);
      
      // Step 1: Take square root -> ±5
      setVisible(elCard1, step >= 1, step === 1);

      // Step 2: Split into two branches
      setVisible(elForkBranch, step >= 2);
      setVisible(elBranchPos, step >= 2, step === 2);
      setVisible(elBranchNeg, step >= 2, step === 2);
      setVisible(elAddPos, step >= 3);
      setVisible(elAddNeg, step >= 3);

      // Step 3: Final Solutions
      setVisible(elSolPos, step >= 3, step === 3);
      setVisible(elSolNeg, step >= 3, step === 3);
    }

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

    function startTimer() {
      stopTimer();
      timer = setInterval(nextStep, 3500);
      isPlaying = true;
      playIcon.textContent = '⏸';
    }

    function stopTimer() {
      if (timer) {
        clearInterval(timer);
        timer = null;
      }
      isPlaying = false;
      playIcon.textContent = '▶';
    }

    playBtn.addEventListener('click', () => {
      if (isPlaying) {
        stopTimer();
      } else {
        nextStep();
        startTimer();
      }
    });

    dots.forEach((dot) => {
      dot.addEventListener('click', () => {
        stopTimer();
        const step = parseInt(dot.getAttribute('data-step'), 10);
        renderState(step);
      });
    });

    // Initial render and start timer
    renderState(0);
    startTimer();
  </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 {
      background: #f8fafc;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 16px;
      user-select: none;
    }

    .diagram {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    /* Math typography */
    .math {
      font-family: "Cambria Math", "Times New Roman", STIXGeneral, serif;
      font-style: normal;
    }
    .math i {
      font-style: italic;
    }

    /* Main Equation Card */
    .eq-card {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 12px;
      padding: 10px 24px;
      font-size: 24px;
      font-weight: 600;
      color: #1e2945;
      box-shadow: 0 2px 8px rgba(30, 41, 69, 0.06);
      text-align: center;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

    /* SVG Connecting Tree */
    .tree-svg {
      width: 100%;
      height: 46px;
      overflow: visible;
    }

    /* Branch Container */
    .branches {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
    }

    .branch-card {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 8px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
      cursor: pointer;
      transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .branch-card:active {
      transform: scale(0.98);
    }

    .branch-card.active-pos {
      border-color: #3b82f6;
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
      background: #eff6ff;
    }

    .branch-card.active-neg {
      border-color: #6366f1;
      box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
      background: #eef2ff;
    }

    .tag {
      font-size: 13px;
      font-weight: 700;
      padding: 2px 10px;
      border-radius: 20px;
      letter-spacing: 0.5px;
    }
    .tag-pos {
      background: #dbeafe;
      color: #1d4ed8;
    }
    .tag-neg {
      background: #e0e7ff;
      color: #4338ca;
    }

    .branch-math {
      font-size: 18px;
      font-weight: 600;
      color: #1e2945;
    }

    .status {
      font-size: 13px;
      font-weight: 600;
      color: #16a34a;
      display: flex;
      align-items: center;
      gap: 3px;
    }

    /* Down arrow */
    .arrow-down {
      color: #94a3b8;
      font-size: 18px;
      line-height: 1;
    }

    /* Conclusion Box */
    .conclusion-box {
      width: 100%;
      background: linear-gradient(135deg, #eff6ff 0%, #eef2ff 100%);
      border: 2px solid #6366f1;
      border-radius: 12px;
      padding: 12px 16px;
      text-align: center;
      box-shadow: 0 4px 12px rgba(99, 102, 241, 0.12);
    }

    .conclusion-math {
      font-size: 22px;
      font-weight: 700;
      color: #1e2945;
    }

    .sub-note {
      font-size: 13px;
      color: #4b5563;
      margin-top: 4px;
      font-weight: 500;
    }

    /* Interactive hint */
    .hint {
      font-size: 12px;
      color: #64748b;
      margin-top: 2px;
    }
  </style>
</head>
<body>

  <div class="diagram">
    
    <div class="eq-card math">
      <i>u</i><sup>2</sup> = 25
    </div>

    
    <svg class="tree-svg" viewBox="0 0 300 46" preserveAspectRatio="none">
      <defs>
        <linearGradient id="gradL" x1="50%" y1="0%" x2="15%" y2="100%">
          <stop offset="0%" stop-color="#94a3b8"/>
          <stop offset="100%" stop-color="#3b82f6"/>
        </linearGradient>
        <linearGradient id="gradR" x1="50%" y1="0%" x2="85%" y2="100%">
          <stop offset="0%" stop-color="#94a3b8"/>
          <stop offset="100%" stop-color="#6366f1"/>
        </linearGradient>
      </defs>
      
      <line x1="150" y1="0" x2="150" y2="12" stroke="#94a3b8" stroke-width="2" stroke-linecap="round"/>
      
      <path d="M 150 12 C 150 28, 75 22, 75 46" fill="none" stroke="url(#gradL)" stroke-width="2.5" stroke-linecap="round"/>
      
      <path d="M 150 12 C 150 28, 225 22, 225 46" fill="none" stroke="url(#gradR)" stroke-width="2.5" stroke-linecap="round"/>
    </svg>

    
    <div class="branches">
      <div id="cardPos" class="branch-card active-pos" onclick="toggleCard('pos')">
        <span class="tag tag-pos">(+) Positive</span>
        <div class="branch-math math">(5)<sup>2</sup> = 25</div>
        <div class="status">✓ <i>u</i> = +5</div>
      </div>

      <div id="cardNeg" class="branch-card active-neg" onclick="toggleCard('neg')">
        <span class="tag tag-neg">(-) Negative</span>
        <div class="branch-math math">(-5)<sup>2</sup> = 25</div>
        <div class="status">✓ <i>u</i> = -5</div>
      </div>
    </div>

    <div class="arrow-down">↓</div>

    
    <div class="conclusion-box">
      <div class="conclusion-math math">
        <i>u</i> = ±√25 = ±5
      </div>
      <div class="sub-note math">
        Two roots: <i>u</i> = +5 or <i>u</i> = -5
      </div>
    </div>
  </div>

  <script>
    let posActive = true;
    let negActive = true;

    function toggleCard(type) {
      if (type === 'pos') {
        posActive = !posActive;
        if (!posActive && !negActive) negActive = true;
      } else {
        negActive = !negActive;
        if (!posActive && !negActive) posActive = true;
      }
      updateUI();
    }

    function updateUI() {
      const cPos = document.getElementById('cardPos');
      const cNeg = document.getElementById('cardNeg');

      if (posActive) {
        cPos.classList.add('active-pos');
        cPos.style.opacity = '1';
      } else {
        cPos.classList.remove('active-pos');
        cPos.style.opacity = '0.55';
      }

      if (negActive) {
        cNeg.classList.add('active-neg');
        cNeg.style.opacity = '1';
      } else {
        cNeg.classList.remove('active-neg');
        cNeg.style.opacity = '0.55';
      }
    }
  </script>
</body>
</html>

OGM.9.ALG.6

Aligned learning resources

Related diagrams