<!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: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px;
      min-height: 100%;
      user-select: none;
    }

    .ladder-container {
      width: 100%;
      max-width: 440px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      position: relative;
    }

    .rung {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 16px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      transition: all 0.25s ease;
      cursor: pointer;
    }

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

    .rung.negative-zone {
      background: #f0fdf4;
      border-color: #86efac;
    }

    .rung.negative-zone.active {
      background: #dcfce7;
      border-color: #16a34a;
      box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.25);
    }

    .power-expr {
      font-size: 19px;
      font-weight: 700;
      color: #1e2945;
      font-family: "SF Pro Rounded", "Comic Sans MS", system-ui, sans-serif;
    }

    .power-expr sup {
      font-size: 14px;
      color: #2563eb;
      font-weight: 800;
    }

    .rung.negative-zone .power-expr sup {
      color: #059669;
    }

    .eq-sign {
      color: #94a3b8;
      font-weight: 600;
      font-size: 16px;
    }

    .value-result {
      font-size: 19px;
      font-weight: 800;
      color: #0f172a;
      min-width: 48px;
      text-align: right;
    }

    .fraction {
      display: inline-flex;
      flex-direction: column;
      vertical-align: middle;
      text-align: center;
      font-size: 15px;
      line-height: 1;
      font-weight: 800;
      color: #047857;
    }

    .fraction .num {
      border-bottom: 1.5px solid #047857;
      padding-bottom: 1px;
    }

    .fraction .den {
      padding-top: 1px;
    }

    .divider-step {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      height: 22px;
      position: relative;
    }

    .step-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: #0d9488;
      color: #ffffff;
      font-size: 12px;
      font-weight: 700;
      padding: 1px 9px;
      border-radius: 12px;
      letter-spacing: 0.5px;
    }

    .highlight-banner {
      width: 100%;
      margin-top: 6px;
      padding: 6px 12px;
      background: #ecfdf5;
      border: 1.5px dashed #10b981;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 700;
      color: #065f46;
    }

    .not-neg {
      color: #dc2626;
      font-weight: 800;
      text-decoration: line-through;
    }

    .controls {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 8px;
    }

    .btn-step {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #334155;
      font-size: 13px;
      font-weight: 600;
      padding: 4px 12px;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .btn-step:hover {
      background: #e2e8f0;
    }
  </style>
</head>
<body>

  <div class="ladder-container">
    
    <div class="rung" data-step="0">
      <span class="power-expr">2<sup>3</sup></span>
      <span class="eq-sign">=</span>
      <span class="value-result">8</span>
    </div>

    <div class="divider-step">
      <span class="step-badge">↓ ÷ 2</span>
    </div>

    
    <div class="rung" data-step="1">
      <span class="power-expr">2<sup>2</sup></span>
      <span class="eq-sign">=</span>
      <span class="value-result">4</span>
    </div>

    <div class="divider-step">
      <span class="step-badge">↓ ÷ 2</span>
    </div>

    
    <div class="rung" data-step="2">
      <span class="power-expr">2<sup>1</sup></span>
      <span class="eq-sign">=</span>
      <span class="value-result">2</span>
    </div>

    <div class="divider-step">
      <span class="step-badge">↓ ÷ 2</span>
    </div>

    
    <div class="rung" data-step="3">
      <span class="power-expr">2<sup>0</sup></span>
      <span class="eq-sign">=</span>
      <span class="value-result">1</span>
    </div>

    <div class="divider-step">
      <span class="step-badge">↓ ÷ 2</span>
    </div>

    
    <div class="rung negative-zone" data-step="4">
      <span class="power-expr">2<sup>−1</sup></span>
      <span class="eq-sign">=</span>
      <span class="value-result">
        <span class="fraction"><span class="num">1</span><span class="den">2</span></span>
      </span>
    </div>

    <div class="divider-step">
      <span class="step-badge">↓ ÷ 2</span>
    </div>

    
    <div class="rung negative-zone" data-step="5">
      <span class="power-expr">2<sup>−2</sup></span>
      <span class="eq-sign">=</span>
      <span class="value-result">
        <span class="fraction"><span class="num">1</span><span class="den">4</span></span>
      </span>
    </div>

    
    <div class="highlight-banner">
      <span>Fractions &gt; 0</span>
      <span>•</span>
      <span class="not-neg">Negative</span>
    </div>

    
    <div class="controls">
      <button class="btn-step" id="playBtn">⏸ Pause</button>
      <button class="btn-step" id="nextBtn">Step ↓</button>
    </div>
  </div>

  <script>
    const rungs = document.querySelectorAll('.rung');
    const playBtn = document.getElementById('playBtn');
    const nextBtn = document.getElementById('nextBtn');
    
    let currentStep = 0;
    let isPlaying = true;
    let timer = null;

    function setStep(idx) {
      currentStep = (idx + rungs.length) % rungs.length;
      rungs.forEach((r, i) => {
        if (i === currentStep) {
          r.classList.add('active');
        } else {
          r.classList.remove('active');
        }
      });
    }

    function advance() {
      setStep(currentStep + 1);
    }

    function startTimer() {
      if (timer) clearInterval(timer);
      timer = setInterval(advance, 2500);
      isPlaying = true;
      playBtn.textContent = '⏸ Pause';
    }

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

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

    nextBtn.addEventListener('click', () => {
      advance();
      if (isPlaying) {
        startTimer();
      }
    });

    rungs.forEach((r, i) => {
      r.addEventListener('click', () => {
        setStep(i);
        if (isPlaying) startTimer();
      });
    });

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

Simplifying Algebraic Expressions with Integer Exponents

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simplifying Algebraic Exponents Flowchart</title>
  <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: #0f172a;
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
    }

    .stepper-nav {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 10px;
      flex-wrap: wrap;
      justify-content: center;
      width: 100%;
      max-width: 600px;
    }

    .step-btn {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 5px 10px;
      background: #f1f5f9;
      border: 1.5px solid #cbd5e1;
      border-radius: 18px;
      font-size: 12px;
      font-weight: 700;
      color: #334155;
      cursor: pointer;
      transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
    }

    .step-btn:hover {
      background: #e2e8f0;
      color: #0f172a;
    }

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

    .step-btn.final-btn.active {
      background: #16a34a;
      border-color: #16a34a;
      box-shadow: 0 2px 6px rgba(22, 163, 74, 0.35);
    }

    .play-btn {
      background: #0f172a;
      color: #ffffff;
      border: none;
      border-radius: 18px;
      padding: 5px 12px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: background 0.2s;
    }

    .play-btn:hover {
      background: #1e293b;
    }

    .flow-container {
      width: 100%;
      max-width: 580px;
      display: flex;
      flex-direction: column;
      gap: 5px;
      position: relative;
    }

    /* Step Card Base */
    .step-card {
      position: relative;
      background: #ffffff;
      border: 2px solid #cbd5e1;
      border-radius: 10px;
      padding: 8px 12px;
      display: grid;
      grid-template-columns: 32px 1fr;
      align-items: center;
      gap: 12px;
      cursor: pointer;
      transition: background-color 0.25s, border-color 0.25s, box-shadow 0.25s;
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    }

    .step-card:hover {
      border-color: #94a3b8;
    }

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

    /* Step 4 (Final Result) Styling */
    .step-card.final {
      border-color: #86efac;
      background: #f0fdf4;
    }

    .step-card.final:hover {
      border-color: #4ade80;
    }

    .step-card.final.active {
      border-color: #16a34a;
      background: #dcfce7;
      box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25);
    }

    /* Step Badges */
    .badge {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: #e2e8f0;
      color: #1e293b;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 13px;
      transition: background 0.2s, color 0.2s;
      border: 1px solid #cbd5e1;
    }

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

    .step-card.final .badge {
      background: #dcfce7;
      color: #166534;
      border-color: #86efac;
    }

    .step-card.final.active .badge {
      background: #16a34a;
      color: #ffffff;
      border-color: #16a34a;
    }

    .content-area {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    /* Inline Math Styling */
    .math-view {
      display: inline-flex;
      align-items: center;
      font-family: 'Cambria Math', 'STIX Two Math', 'Times New Roman', Cambria, Georgia, serif;
      font-size: 17px;
      color: #0f172a;
      user-select: none;
    }

    .fraction {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      vertical-align: middle;
      padding: 0 3px;
    }

    .num {
      border-bottom: 1.5px solid #0f172a;
      padding: 0 3px 2px 3px;
      text-align: center;
      line-height: 1.15;
    }

    .den {
      padding: 2px 3px 0 3px;
      text-align: center;
      line-height: 1.15;
    }

    .paren {
      font-size: 1.6em;
      font-weight: 300;
      line-height: 0.9;
      font-family: 'Times New Roman', Times, serif;
    }

    .sup {
      font-size: 0.72em;
      vertical-align: 0.55em;
      line-height: 0;
    }

    .outer-exp {
      font-size: 0.75em;
      vertical-align: 0.8em;
      line-height: 0;
      margin-left: 1px;
      font-weight: 600;
    }

    i {
      font-style: italic;
      padding: 0 0.5px;
    }

    /* Note Badges */
    .step-note {
      font-size: 11px;
      font-weight: 700;
      color: #334155;
      text-transform: uppercase;
      letter-spacing: 0.4px;
      background: #f1f5f9;
      padding: 4px 8px;
      border-radius: 6px;
      border: 1px solid #cbd5e1;
      white-space: nowrap;
      text-align: right;
    }

    .step-card.active .step-note {
      color: #0369a1;
      background: #e0f2fe;
      border-color: #7dd3fc;
    }

    .step-card.final .step-note {
      color: #166534;
      background: #dcfce7;
      border-color: #86efac;
    }

    .step-card.final.active .step-note {
      color: #14532d;
      background: #bbf7d0;
      border-color: #4ade80;
    }

    /* Connectors */
    .flow-connector {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 2px 0;
      color: #334155;
      font-size: 11px;
      font-weight: 700;
    }

    .flow-connector span {
      background: #ffffff;
      padding: 2px 10px;
      border-radius: 12px;
      border: 1px dashed #94a3b8;
      box-shadow: 0 1px 2px rgba(0,0,0,0.03);
      transition: all 0.2s ease;
    }

    .flow-connector.active {
      color: #0284c7;
    }

    .flow-connector.active span {
      border: 1px solid #0284c7;
      background: #f0f9ff;
      box-shadow: 0 2px 5px rgba(2, 132, 199, 0.15);
    }

    @media (max-width: 480px) {
      body {
        padding: 6px;
      }
      .math-view {
        font-size: 15px;
      }
      .step-card {
        padding: 6px 8px;
        gap: 8px;
      }
      .content-area {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
      }
      .step-note {
        font-size: 10px;
        padding: 2px 6px;
        align-self: flex-start;
      }
      .flow-connector {
        font-size: 10px;
      }
      .flow-connector span {
        padding: 1px 8px;
      }
      .step-btn {
        padding: 4px 8px;
        font-size: 11px;
      }
      .play-btn {
        padding: 4px 10px;
        font-size: 11px;
      }
    }
  </style>
</head>
<body>

  
  <div class="stepper-nav">
    <button class="step-btn active" data-step="0">1. Original</button>
    <button class="step-btn" data-step="1">2. Inside</button>
    <button class="step-btn" data-step="2">3. Power</button>
    <button class="step-btn final-btn" data-step="3">4. Positive</button>
    <button class="play-btn" id="playBtn" aria-label="Auto play sequence">
      <span id="playIcon">⏸</span> Pause
    </button>
  </div>

  <div class="flow-container">
    
    <div class="step-card active" data-step="0">
      <div class="badge">1</div>
      <div class="content-area">
        <div class="math-view">
          <span class="paren">(</span>
          <span class="fraction">
            <span class="num">2<i>x</i><span class="sup">3</span><i>y</i><span class="sup">−2</span></span>
            <span class="den">4<i>x</i><span class="sup">−1</span><i>y</i><span class="sup">4</span></span>
          </span>
          <span class="paren">)</span><span class="outer-exp">−2</span>
        </div>
        <div class="step-note">Given Expression</div>
      </div>
    </div>

    
    <div class="flow-connector active" id="conn1">
      <span>↓ Simplify Inside</span>
    </div>

    
    <div class="step-card" data-step="1">
      <div class="badge">2</div>
      <div class="content-area">
        <div class="math-view">
          <span class="paren">(</span>
          <span class="fraction">
            <span class="num"><i>x</i><span class="sup">4</span><i>y</i><span class="sup">−6</span></span>
            <span class="den">2</span>
          </span>
          <span class="paren">)</span><span class="outer-exp">−2</span>
        </div>
        <div class="step-note">Subtract Exponents</div>
      </div>
    </div>

    
    <div class="flow-connector" id="conn2">
      <span>↓ Apply Outer Power</span>
    </div>

    
    <div class="step-card" data-step="2">
      <div class="badge">3</div>
      <div class="content-area">
        <div class="math-view">
          <span class="fraction">
            <span class="num"><i>x</i><span class="sup">−8</span><i>y</i><span class="sup">12</span></span>
            <span class="den">2<span class="sup">−2</span></span>
          </span>
        </div>
        <div class="step-note">Multiply Powers</div>
      </div>
    </div>

    
    <div class="flow-connector" id="conn3">
      <span>↓ Convert to Positive Powers</span>
    </div>

    
    <div class="step-card final" data-step="3">
      <div class="badge">4</div>
      <div class="content-area">
        <div class="math-view">
          <span class="fraction">
            <span class="num">4<i>y</i><span class="sup">12</span></span>
            <span class="den"><i>x</i><span class="sup">8</span></span>
          </span>
        </div>
        <div class="step-note">✓ Final Simplified Result</div>
      </div>
    </div>
  </div>

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

    const stepCards = document.querySelectorAll('.step-card');
    const stepBtns = document.querySelectorAll('.step-btn');
    const connectors = [
      document.getElementById('conn1'),
      document.getElementById('conn2'),
      document.getElementById('conn3')
    ];
    const playBtn = document.getElementById('playBtn');
    const playIcon = document.getElementById('playIcon');

    function setActiveStep(idx) {
      currentStep = idx;

      // Update Cards
      stepCards.forEach((card, i) => {
        card.classList.toggle('active', i === idx);
      });

      // Update Nav Buttons
      stepBtns.forEach((btn, i) => {
        btn.classList.toggle('active', i === idx);
      });

      // Update Connectors
      connectors.forEach((conn, i) => {
        conn.classList.toggle('active', idx > i);
      });
    }

    function nextStep() {
      const next = (currentStep + 1) % totalSteps;
      setActiveStep(next);
    }

    function startTimer() {
      stopTimer();
      timer = setInterval(nextStep, 3200);
      isPlaying = true;
      playBtn.innerHTML = '<span id="playIcon">⏸</span> Pause';
    }

    function stopTimer() {
      if (timer) clearInterval(timer);
      timer = null;
      isPlaying = false;
      playBtn.innerHTML = '<span id="playIcon">▶</span> Play';
    }

    // Nav Button clicks
    stepBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        const step = parseInt(btn.getAttribute('data-step'), 10);
        setActiveStep(step);
        stopTimer();
      });
    });

    // Card clicks
    stepCards.forEach(card => {
      card.addEventListener('click', () => {
        const step = parseInt(card.getAttribute('data-step'), 10);
        setActiveStep(step);
        stopTimer();
      });
    });

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

    // Start auto-play initially
    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">
  <title>Anatomy of an Algebraic Term</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }

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

    .main-layout {
      width: 100%;
      max-width: 580px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* Header & Navigation Pills */
    .header-section {
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: center;
      text-align: center;
    }

    .title {
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
      letter-spacing: -0.01em;
    }

    .pill-group {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: center;
    }

    .pill-btn {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 20px;
      padding: 5px 12px;
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      transition: all 0.2s ease;
      outline: none;
    }

    .pill-btn:hover {
      border-color: #cbd5e1;
      color: #334155;
    }

    .pill-btn.active-all {
      background: #0f172a;
      color: #ffffff;
      border-color: #0f172a;
    }

    .pill-btn.active-coeff {
      background: #eff6ff;
      color: #2563eb;
      border-color: #2563eb;
    }

    .pill-btn.active-base {
      background: #f5f3ff;
      color: #7c3aed;
      border-color: #7c3aed;
    }

    .pill-btn.active-exp {
      background: #fffbeb;
      color: #d97706;
      border-color: #d97706;
    }

    /* Term Anatomy Display Card */
    .anatomy-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 16px 12px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
      position: relative;
    }

    /* Top Term & Callouts */
    .term-wrapper {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 90px;
      width: 100%;
      max-width: 380px;
    }

    .term-display {
      font-size: 54px;
      font-weight: 800;
      line-height: 1;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      letter-spacing: 0.5px;
      z-index: 2;
    }

    .interactive-part {
      cursor: pointer;
      display: inline-block;
      transition: opacity 0.25s ease, filter 0.25s ease;
      padding: 2px 4px;
      border-radius: 6px;
    }

    .part-coeff {
      color: #2563eb;
    }

    .part-base {
      color: #7c3aed;
      font-style: italic;
      font-family: "Times New Roman", Times, serif;
      padding: 0 1px;
    }

    .part-exp {
      color: #d97706;
      font-size: 32px;
      font-weight: 800;
      vertical-align: top;
      margin-top: -6px;
      margin-left: 2px;
    }

    /* Callout labels around term */
    .callout-badge {
      position: absolute;
      font-size: 11px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 6px;
      pointer-events: none;
      transition: opacity 0.25s ease, transform 0.25s ease;
      white-space: nowrap;
      z-index: 3;
    }

    .badge-coeff {
      left: 12%;
      top: 10px;
      color: #2563eb;
      background: #eff6ff;
      border: 1px solid #bfdbfe;
    }

    .badge-base {
      left: 20%;
      bottom: 2px;
      color: #7c3aed;
      background: #f5f3ff;
      border: 1px solid #ddd6fe;
    }

    .badge-exp {
      right: 12%;
      top: 4px;
      color: #d97706;
      background: #fffbeb;
      border: 1px solid #fde68a;
    }

    /* SVG pointer connectors */
    .pointer-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
    }

    .pointer-line {
      fill: none;
      stroke-width: 1.5;
      stroke-dasharray: 3 3;
      transition: stroke-opacity 0.25s ease, stroke-width 0.25s ease;
    }

    .line-coeff { stroke: #3b82f6; }
    .line-base  { stroke: #8b5cf6; }
    .line-exp   { stroke: #f59e0b; }

    /* Divider Arrow */
    .transition-indicator {
      display: flex;
      align-items: center;
      gap: 6px;
      color: #94a3b8;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin: 4px 0 8px;
    }

    .arrow-icon {
      font-size: 13px;
      color: #64748b;
    }

    /* Expanded Section */
    .expanded-container {
      width: 100%;
      background: #f8fafc;
      border: 1px dashed #cbd5e1;
      border-radius: 10px;
      padding: 12px 8px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }

    .expanded-formula {
      font-size: 24px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 5px;
      color: #334155;
    }

    .mult-sign {
      color: #94a3b8;
      font-weight: 900;
      padding: 0 1px;
    }

    .base-cluster {
      display: inline-flex;
      align-items: center;
      background: #f5f3ff;
      border: 1px solid #ddd6fe;
      border-radius: 6px;
      padding: 2px 8px;
      color: #7c3aed;
      font-style: italic;
      font-family: "Times New Roman", Times, serif;
      gap: 4px;
      transition: all 0.25s ease;
    }

    .base-cluster .mult-sign {
      color: #c4b5fd;
      font-style: normal;
      font-family: system-ui, sans-serif;
    }

    /* Bracket under repeated factor */
    .bracket-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 4px;
    }

    .bracket-line {
      font-size: 11px;
      line-height: 1;
      color: #d97706;
      font-weight: 700;
    }

    .bracket-tag {
      font-size: 11px;
      font-weight: 700;
      color: #d97706;
      background: #fffbeb;
      border: 1px solid #fde68a;
      border-radius: 12px;
      padding: 1px 7px;
      margin-top: 2px;
      transition: all 0.25s ease;
    }

    /* Dynamic Detail Panel */
    .detail-panel {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-left: 4px solid #2563eb;
      border-radius: 8px;
      padding: 10px 14px;
      font-size: 13px;
      line-height: 1.45;
      color: #334155;
      min-height: 56px;
      display: flex;
      align-items: center;
      transition: border-color 0.2s ease, background 0.2s ease;
    }

    .detail-text {
      width: 100%;
    }

    /* Dimming logic when specific component is filtered */
    .dimmed {
      opacity: 0.22 !important;
      filter: grayscale(40%);
    }

    .highlighted {
      opacity: 1 !important;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
    }
  </style>
</head>
<body>

<div class="main-layout">
  
  <div class="header-section">
    <div class="title">Anatomy of an Algebraic Term</div>
    <div class="pill-group" role="tablist">
      <button class="pill-btn active-all" id="btnAll" onclick="setFilter('all')">Explore All</button>
      <button class="pill-btn" id="btnCoeff" onclick="setFilter('coeff')">Coefficient (5)</button>
      <button class="pill-btn" id="btnBase" onclick="setFilter('base')">Base (x)</button>
      <button class="pill-btn" id="btnExp" onclick="setFilter('exp')">Exponent (3)</button>
    </div>
  </div>

  
  <div class="anatomy-card">
    
    <div class="term-wrapper">
      <svg class="pointer-svg" viewBox="0 0 380 90" preserveAspectRatio="none">
        
        <path id="lineCoeff" class="pointer-line line-coeff" d="M 95 24 Q 145 24 165 42" />
        
        <path id="lineBase" class="pointer-line line-base" d="M 120 72 Q 165 72 188 56" />
        
        <path id="lineExp" class="pointer-line line-exp" d="M 285 18 Q 235 18 214 30" />
      </svg>

      
      <div id="badgeCoeff" class="callout-badge badge-coeff">Coefficient</div>
      <div id="badgeBase" class="callout-badge badge-base">Base</div>
      <div id="badgeExp" class="callout-badge badge-exp">Exponent</div>

      
      <div class="term-display">
        <span id="termCoeff" class="interactive-part part-coeff" onclick="setFilter('coeff')" title="Click Coefficient">5</span>
        <span id="termBase" class="interactive-part part-base" onclick="setFilter('base')" title="Click Base">x</span>
        <span id="termExp" class="interactive-part part-exp" onclick="setFilter('exp')" title="Click Exponent">3</span>
      </div>
    </div>

    
    <div class="transition-indicator">
      <span>Equivalent Expanded Form</span>
      <span class="arrow-icon">↓</span>
    </div>

    
    <div class="expanded-container">
      <div class="expanded-formula">
        <span id="expCoeff" class="part-coeff interactive-part" onclick="setFilter('coeff')">5</span>
        <span class="mult-sign">&middot;</span>
        <span id="expCluster" class="base-cluster interactive-part" onclick="setFilter('base')">
          <span class="part-base">x</span>
          <span class="mult-sign">&middot;</span>
          <span class="part-base">x</span>
          <span class="mult-sign">&middot;</span>
          <span class="part-base">x</span>
        </span>
      </div>

      
      <div id="expBracket" class="bracket-wrapper interactive-part" onclick="setFilter('exp')">
        <div class="bracket-line">⎵</div>
        <div class="bracket-tag">3 copies of <i>x</i></div>
      </div>
    </div>
  </div>

  
  <div class="detail-panel" id="detailPanel">
    <div class="detail-text" id="detailText">
      <strong>Interactive Term:</strong> Tap any component (5, x, or 3) to inspect its exact role.
    </div>
  </div>
</div>

<script>
  const details = {
    all: {
      border: '#2563eb',
      bg: '#ffffff',
      html: '<strong>Full Term (5x³):</strong> Combines a scaling multiplier with repeated variable factors.'
    },
    coeff: {
      border: '#2563eb',
      bg: '#eff6ff',
      html: '<strong>Coefficient (5):</strong> The constant multiplier scaling the entire power <i>x³</i>.'
    },
    base: {
      border: '#7c3aed',
      bg: '#f5f3ff',
      html: '<strong>Base (<i>x</i>):</strong> The repeated factor multiplied by itself.'
    },
    exp: {
      border: '#d97706',
      bg: '#fffbeb',
      html: '<strong>Exponent (3):</strong> Count of factors. <strong>Rule:</strong> Applies <em>only</em> to <i>x</i>, NOT to 5!'
    }
  };

  function setFilter(type) {
    // Update pill states
    const pills = {
      all: document.getElementById('btnAll'),
      coeff: document.getElementById('btnCoeff'),
      base: document.getElementById('btnBase'),
      exp: document.getElementById('btnExp')
    };

    Object.keys(pills).forEach(key => {
      pills[key].className = 'pill-btn' + (key === type ? ` active-${key}` : '');
    });

    // Elements mapping
    const elCoeff = [document.getElementById('termCoeff'), document.getElementById('badgeCoeff'), document.getElementById('lineCoeff'), document.getElementById('expCoeff')];
    const elBase = [document.getElementById('termBase'), document.getElementById('badgeBase'), document.getElementById('lineBase'), document.getElementById('expCluster')];
    const elExp = [document.getElementById('termExp'), document.getElementById('badgeExp'), document.getElementById('lineExp'), document.getElementById('expBracket')];

    const allGroups = [
      { key: 'coeff', els: elCoeff },
      { key: 'base', els: elBase },
      { key: 'exp', els: elExp }
    ];

    allGroups.forEach(group => {
      const isTarget = (type === 'all' || type === group.key);
      group.els.forEach(el => {
        if (!el) return;
        if (isTarget) {
          el.classList.remove('dimmed');
          el.classList.add('highlighted');
        } else {
          el.classList.add('dimmed');
          el.classList.remove('highlighted');
        }
      });
    });

    // Update detail panel text and accent colors
    const panel = document.getElementById('detailPanel');
    const textEl = document.getElementById('detailText');
    const currentDetail = details[type] || details.all;

    panel.style.borderLeftColor = currentDetail.border;
    panel.style.background = currentDetail.bg;
    textEl.innerHTML = currentDetail.html;
  }
</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">
  <title>Principal Square Root vs Equation</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

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

    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      width: 100%;
      max-width: 620px;
    }

    @media (max-width: 480px) {
      .grid {
        grid-template-columns: 1fr;
        gap: 12px;
      }
    }

    .panel {
      background: #f8f9fa;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      transition: box-shadow 0.2s ease, border-color 0.2s ease;
      cursor: pointer;
    }

    .panel.active {
      border-color: #22b7ff;
      box-shadow: 0 0 0 2px rgba(34, 183, 255, 0.25);
    }

    .label {
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
      margin-bottom: 6px;
    }

    .expr {
      font-size: 26px;
      font-weight: 800;
      color: #1e2945;
      margin-bottom: 14px;
    }

    .solutions {
      display: flex;
      flex-direction: column;
      gap: 10px;
      width: 100%;
    }

    .item {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 16px;
      font-weight: 700;
    }

    .badge {
      font-size: 12px;
      font-weight: 600;
      padding: 3px 8px;
      border-radius: 6px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .badge-check {
      background: #e0f2fe;
      color: #0284c7;
    }

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

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

    .caption {
      font-size: 12px;
      color: #64748b;
      margin-top: 12px;
      line-height: 1.35;
      font-weight: 500;
    }

    .caption code {
      font-family: inherit;
      font-weight: 700;
      color: #1e2945;
      background: #e2e8f0;
      padding: 1px 4px;
      border-radius: 4px;
    }

    .interactive-hint {
      font-size: 12px;
      color: #94a3b8;
      margin-top: 10px;
      text-align: center;
    }
  </style>
</head>
<body>

  <div class="grid">
    
    <div class="panel active" id="leftPanel">
      <div class="label">Equation</div>
      <div class="expr">x² = 49</div>
      <div class="solutions">
        <div class="item">
          <span>+7</span>
          <span class="badge badge-check">✓ (+7)² = 49</span>
        </div>
        <div class="item">
          <span>−7</span>
          <span class="badge badge-check">✓ (−7)² = 49</span>
        </div>
      </div>
      <div class="caption">
        Two numbers solve the equation.
      </div>
    </div>

    
    <div class="panel" id="rightPanel">
      <div class="label">Radical Notation</div>
      <div class="expr">√49</div>
      <div class="solutions">
        <div class="item">
          <span>+7</span>
          <span class="badge badge-principal">✓ Principal Root</span>
        </div>
        <div class="item">
          <span style="color: #94a3b8; text-decoration: line-through;">−7</span>
          <span class="badge badge-cross">✕ Not √49</span>
        </div>
      </div>
      <div class="caption">
        √ asks for non-negative only.<br>To get −7, write <code>−√49</code>.
      </div>
    </div>
  </div>

  <div class="interactive-hint">Tap either card to compare</div>

  <script>
    const left = document.getElementById('leftPanel');
    const right = document.getElementById('rightPanel');

    left.addEventListener('click', () => {
      left.classList.add('active');
      right.classList.remove('active');
    });

    right.addEventListener('click', () => {
      right.classList.add('active');
      left.classList.remove('active');
    });
  </script>
</body>
</html>

Evaluating Square Roots, Cube Roots, and nth Roots

<!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">
  <title>Odd Index Roots Sign Comparison</title>
  <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: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
    }

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

    @media (max-width: 440px) {
      .main-grid {
        grid-template-columns: 1fr;
        gap: 8px;
      }
      .panel {
        padding: 10px 8px !important;
      }
    }

    .panel {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      transition: box-shadow 0.2s ease;
    }

    .panel-pos {
      border-color: #bfdbfe;
      background: linear-gradient(180deg, #f8faff 0%, #f0f7ff 100%);
    }

    .panel-neg {
      border-color: #fed7aa;
      background: linear-gradient(180deg, #fffbf7 0%, #fff4ed 100%);
    }

    .root-title {
      font-size: 19px;
      font-weight: 700;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .radicand-pos { color: #1d4ed8; }
    .radicand-neg { color: #c2410c; }

    .rad-symbol {
      font-size: 22px;
      line-height: 1;
      position: relative;
      top: -1px;
    }

    .sup {
      font-size: 11px;
      position: relative;
      top: -8px;
      left: 2px;
      margin-right: -2px;
      font-weight: 800;
      color: #64748b;
    }

    .chain-box {
      width: 100%;
      min-height: 86px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 6px 0;
    }

    .factors-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      font-weight: 700;
      font-size: 15px;
    }

    .block {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 38px;
      height: 32px;
      padding: 0 6px;
      border-radius: 6px;
      font-weight: 800;
      font-size: 15px;
      transition: all 0.3s ease;
    }

    .block-pos {
      background: #3b82f6;
      color: #ffffff;
      box-shadow: 0 2px 4px rgba(59, 130, 246, 0.25);
    }

    .block-neg {
      background: #f97316;
      color: #ffffff;
      box-shadow: 0 2px 4px rgba(249, 115, 22, 0.25);
    }

    .step-bracket {
      font-size: 13px;
      font-weight: 700;
      height: 26px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      opacity: 0.4;
      transition: opacity 0.3s ease;
    }

    .step-bracket.active {
      opacity: 1;
    }

    .tag-result {
      padding: 3px 8px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 800;
    }

    .tag-pos {
      background: #dbeafe;
      color: #1e40af;
      border: 1px solid #93c5fd;
    }

    .tag-neg {
      background: #ffedd5;
      color: #9a3412;
      border: 1px solid #fdba74;
    }

    .result-row {
      font-size: 15px;
      font-weight: 800;
      margin-top: 4px;
      padding: 4px 10px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin: 10px 0 6px;
      width: 100%;
    }

    .step-btn {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      color: #475569;
      padding: 4px 12px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .step-btn.active {
      background: #1e2945;
      border-color: #1e2945;
      color: #ffffff;
    }

    .play-btn {
      background: #f1f5f9;
      border: 1.5px solid #cbd5e1;
      color: #1e2945;
      border-radius: 50%;
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 11px;
      padding-left: 2px;
    }

    .summary-pill {
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 24px;
      padding: 7px 16px;
      font-size: 13px;
      font-weight: 700;
      color: #1e2945;
      text-align: center;
      max-width: 620px;
      width: 100%;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }
  </style>
</head>
<body>

  <div class="main-grid">
    
    <div class="panel panel-pos">
      <div class="root-title">
        <span><span class="sup">3</span><span class="rad-symbol">√</span>125</span>
        <span style="color:#64748b; font-weight:400;">=</span>
        <span class="radicand-pos">+5</span>
      </div>

      <div class="chain-box">
        <div class="factors-row" id="posRow">
          <span class="block block-pos">+5</span>
          <span>×</span>
          <span class="block block-pos">+5</span>
          <span>×</span>
          <span class="block block-pos">+5</span>
        </div>

        <div class="step-bracket active" id="posStep">
          <span>(+) × (+) =</span>
          <span class="tag-result tag-pos">+25</span>
        </div>
      </div>

      <div class="result-row" style="background:#eff6ff; color:#1d4ed8;">
        <span>(+25) × (+5) =</span>
        <span>+125</span>
      </div>
    </div>

    
    <div class="panel panel-neg">
      <div class="root-title">
        <span><span class="sup">3</span><span class="rad-symbol">√</span>−125</span>
        <span style="color:#64748b; font-weight:400;">=</span>
        <span class="radicand-neg">−5</span>
      </div>

      <div class="chain-box">
        <div class="factors-row" id="negRow">
          <span class="block block-neg">−5</span>
          <span>×</span>
          <span class="block block-neg">−5</span>
          <span>×</span>
          <span class="block block-neg">−5</span>
        </div>

        <div class="step-bracket active" id="negStep">
          <span>(−) × (−) =</span>
          <span class="tag-result tag-pos">+25</span>
        </div>
      </div>

      <div class="result-row" style="background:#fff7ed; color:#c2410c;">
        <span>(+25) × (−5) =</span>
        <span>−125</span>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button class="play-btn" id="playToggle" onclick="togglePlay()" aria-label="Play/Pause">⏸</button>
    <button class="step-btn active" id="sbtn0" onclick="setStep(0)">1. Factors</button>
    <button class="step-btn" id="sbtn1" onclick="setStep(1)">2. Pair Sign</button>
    <button class="step-btn" id="sbtn2" onclick="setStep(2)">3. Final Sign</button>
  </div>

  
  <div class="summary-pill">
    Odd Index: Exactly ONE real root, matching radicand sign.
  </div>

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

    const posRow = document.getElementById('posRow');
    const negRow = document.getElementById('negRow');
    const posStep = document.getElementById('posStep');
    const negStep = document.getElementById('negStep');

    function updateView() {
      // Update buttons
      for (let i = 0; i < 3; i++) {
        const btn = document.getElementById('sbtn' + i);
        if (btn) {
          if (i === currentStep) btn.classList.add('active');
          else btn.classList.remove('active');
        }
      }

      if (currentStep === 0) {
        posRow.innerHTML = `
          <span class="block block-pos">+5</span>
          <span>×</span>
          <span class="block block-pos">+5</span>
          <span>×</span>
          <span class="block block-pos">+5</span>
        `;
        negRow.innerHTML = `
          <span class="block block-neg">−5</span>
          <span>×</span>
          <span class="block block-neg">−5</span>
          <span>×</span>
          <span class="block block-neg">−5</span>
        `;
        posStep.style.opacity = '0.3';
        posStep.innerHTML = `<span>(+) × (+) × (+)</span>`;
        negStep.style.opacity = '0.3';
        negStep.innerHTML = `<span>(−) × (−) × (−)</span>`;
      } else if (currentStep === 1) {
        posRow.innerHTML = `
          <span class="block block-pos" style="outline: 2px solid #2563eb;">+5</span>
          <span>×</span>
          <span class="block block-pos" style="outline: 2px solid #2563eb;">+5</span>
          <span style="opacity:0.5">×</span>
          <span class="block block-pos" style="opacity:0.5">+5</span>
        `;
        negRow.innerHTML = `
          <span class="block block-neg" style="outline: 2px solid #ea580c;">−5</span>
          <span>×</span>
          <span class="block block-neg" style="outline: 2px solid #ea580c;">−5</span>
          <span style="opacity:0.5">×</span>
          <span class="block block-neg" style="opacity:0.5">−5</span>
        `;
        posStep.style.opacity = '1';
        posStep.innerHTML = `<span>(+) × (+) =</span> <span class="tag-result tag-pos">+25</span>`;
        negStep.style.opacity = '1';
        negStep.innerHTML = `<span>(−) × (−) =</span> <span class="tag-result tag-pos">+25</span>`;
      } else {
        posRow.innerHTML = `
          <span class="block block-pos">+25</span>
          <span>×</span>
          <span class="block block-pos">+5</span>
        `;
        negRow.innerHTML = `
          <span class="block block-pos" style="border:1.5px solid #2563eb;">+25</span>
          <span>×</span>
          <span class="block block-neg">−5</span>
        `;
        posStep.style.opacity = '1';
        posStep.innerHTML = `<span>(+) × (+) =</span> <span class="tag-result tag-pos">+125</span>`;
        negStep.style.opacity = '1';
        negStep.innerHTML = `<span>(+) × (−) =</span> <span class="tag-result tag-neg">−125</span>`;
      }
    }

    function setStep(idx) {
      currentStep = idx;
      updateView();
    }

    function togglePlay() {
      isPlaying = !isPlaying;
      const btn = document.getElementById('playToggle');
      if (isPlaying) {
        btn.textContent = '⏸';
        startTimer();
      } else {
        btn.textContent = '▶';
        clearInterval(timer);
      }
    }

    function startTimer() {
      clearInterval(timer);
      timer = setInterval(() => {
        currentStep = (currentStep + 1) % 3;
        updateView();
      }, 3200);
    }

    updateView();
    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">
  <title>Evaluating Real nth Roots</title>
  <style>
    * { 
      box-sizing: border-box; 
      margin: 0; 
      padding: 0; 
    }
    
    body {
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: #ffffff;
      padding: 12px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: 12px;
      user-select: none;
      -webkit-user-select: none;
      min-height: 100%;
    }

    /* Example selector pills */
    .pill-group {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 8px;
      width: 100%;
      max-width: 540px;
    }
    
    .pill-label {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      margin-right: 2px;
    }

    .pill {
      background: #f1f5f9;
      border: 1.5px solid #cbd5e1;
      border-radius: 20px;
      padding: 4px 12px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      color: #334155;
      transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
      font-family: inherit;
    }
    
    .pill:hover {
      background: #e2e8f0;
      color: #0f172a;
      border-color: #94a3b8;
    }
    
    .pill.active {
      background: #1e2945;
      color: #ffffff;
      border-color: #1e2945;
      box-shadow: 0 2px 6px rgba(30, 41, 69, 0.25);
    }

    /* Tree Layout */
    .tree {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      max-width: 580px;
      gap: 6px;
      position: relative;
    }

    .node {
      border-radius: 8px;
      padding: 7px 10px;
      font-size: 13px;
      text-align: center;
      font-weight: 600;
      transition: opacity 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, filter 0.2s ease;
      position: relative;
      border: 1.5px solid transparent;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      cursor: pointer;
    }

    /* Legible Inactive Paths */
    .tree.has-selection .node:not(.highlighted) {
      opacity: 0.58;
      filter: grayscale(0.2);
    }
    
    .tree.has-selection .arrow:not(.highlighted-arrow) {
      opacity: 0.5;
    }

    .root-node {
      background: #f8fafc;
      border-color: #cbd5e1;
      color: #1e2945;
      padding: 8px 16px;
      font-size: 14px;
      cursor: default;
    }

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

    .sub-tree {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      background: #fafbfc;
      border: 1px dashed #cbd5e1;
      border-radius: 10px;
      padding: 8px 6px;
    }

    /* Node Themes */
    .even-node {
      background: #e0f2fe;
      border-color: #7dd3fc;
      color: #0369a1;
      width: 100%;
    }
    
    .odd-node {
      background: #f3e8ff;
      border-color: #d8b4fe;
      color: #6b21a8;
      width: 100%;
    }

    /* Condition Row inside Even */
    .sub-split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
      width: 100%;
    }

    .sub-split-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      height: 100%;
    }

    .cond-node {
      background: #ffffff;
      border-color: #cbd5e1;
      font-size: 12px;
      padding: 5px 6px;
      width: 100%;
      color: #334155;
    }

    /* Leaves */
    .leaf-pos {
      background: #f0fdf4;
      border-color: #86efac;
      color: #15803d;
      flex: 1;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .leaf-neg {
      background: #fef2f2;
      border-color: #fca5a5;
      color: #b91c1c;
      flex: 1;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .leaf-odd {
      background: #faf5ff;
      border-color: #d8b4fe;
      color: #6b21a8;
      flex: 1;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .leaf-content {
      display: flex;
      flex-direction: column;
      gap: 4px;
      align-items: center;
      justify-content: center;
      width: 100%;
    }
    
    .leaf-title {
      font-size: 12px;
      font-weight: 700;
      line-height: 1.2;
    }
    
    .leaf-subtitle {
      font-size: 11px;
      font-weight: 500;
      opacity: 0.9;
    }

    .leaf-math {
      font-size: 13px;
      font-weight: 700;
      background: rgba(255, 255, 255, 0.85);
      padding: 3px 6px;
      border-radius: 5px;
      border: 1px solid rgba(0, 0, 0, 0.08);
      font-family: "Cambria Math", "Segoe UI Symbol", system-ui, serif;
      letter-spacing: 0.3px;
      margin-top: 2px;
    }

    /* Highlighted State */
    .highlighted {
      box-shadow: 0 0 0 2px #0284c7, 0 3px 8px rgba(2, 132, 199, 0.25) !important;
      opacity: 1 !important;
      filter: none !important;
    }
    
    .highlighted-arrow {
      color: #0284c7 !important;
      font-weight: 900;
      opacity: 1 !important;
    }

    /* Math text styles */
    .math {
      font-family: "Cambria Math", "Segoe UI Symbol", system-ui, serif;
      font-style: normal;
    }
    
    .math i {
      font-style: italic;
      font-family: "Cambria Math", "Times New Roman", serif;
    }

    /* Arrow connect indicators */
    .arrow {
      font-size: 11px;
      color: #94a3b8;
      line-height: 1;
      transition: color 0.2s ease, opacity 0.2s ease;
    }

    /* Responsive adjustments */
    @media (max-width: 480px) {
      .branch-row {
        grid-template-columns: 1fr;
        gap: 10px;
      }
      .pill {
        font-size: 12px;
        padding: 3px 8px;
      }
      .node {
        font-size: 12px;
        padding: 5px 6px;
      }
      .root-node {
        font-size: 13px;
      }
      .leaf-title {
        font-size: 11px;
      }
      .leaf-math {
        font-size: 12px;
      }
    }
  </style>
</head>
<body>

  
  <div class="pill-group">
    <span class="pill-label">Examples:</span>
    <button class="pill active" data-target="even-pos">∜81</button>
    <button class="pill" data-target="even-neg">∜(-16)</button>
    <button class="pill" data-target="odd-pos">∛27</button>
    <button class="pill" data-target="odd-neg">⁵√(-32)</button>
  </div>

  
  <div class="tree" id="flowchart">
    
    
    <div class="node root-node" id="node-root">
      Examine Index <span class="math"><i>n</i></span> in <span class="math"><sup><i>n</i></sup>√<i>a</i></span>
    </div>

    <div class="arrow" id="arrow-root">▼</div>

    
    <div class="branch-row">
      
      
      <div class="sub-tree">
        <div class="node even-node" id="node-even">
          <span class="math"><i>n</i></span> is Even (2, 4, 6...)
        </div>
        <div class="arrow" id="arrow-even">▼</div>

        <div class="sub-split">
          
          <div class="sub-split-col">
            <div class="node cond-node" id="node-even-pos-cond">
              <span class="math"><i>a</i> &gt; 0</span>
            </div>
            <div class="arrow" id="arrow-even-pos">▼</div>
            <div class="node leaf-pos" id="node-even-pos-leaf">
              <div class="leaf-content">
                <div class="leaf-title">1 Positive Real Root</div>
                <div class="leaf-math">∜81 = 3</div>
              </div>
            </div>
          </div>

          
          <div class="sub-split-col">
            <div class="node cond-node" id="node-even-neg-cond">
              <span class="math"><i>a</i> &lt; 0</span>
            </div>
            <div class="arrow" id="arrow-even-neg">▼</div>
            <div class="node leaf-neg" id="node-even-neg-leaf">
              <div class="leaf-content">
                <div class="leaf-title">No Real Root</div>
                <div class="leaf-math">∜(-16) ∉ ℝ</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      
      <div class="sub-tree">
        <div class="node odd-node" id="node-odd">
          <span class="math"><i>n</i></span> is Odd (3, 5, 7...)
        </div>
        <div class="arrow" id="arrow-odd">▼</div>

        <div style="display:flex; flex-direction:column; align-items:center; gap:6px; width:100%; height:100%;">
          <div class="node cond-node" id="node-odd-cond" style="width:100%;">
            Any Real <span class="math"><i>a</i></span> (<span class="math"><i>a</i> &gt; 0</span> or <span class="math"><i>a</i> &lt; 0</span>)
          </div>
          <div class="arrow" id="arrow-odd-leaf">▼</div>
          <div class="node leaf-odd" id="node-odd-leaf" style="width:100%;">
            <div class="leaf-content">
              <div class="leaf-title">Always 1 Real Root</div>
              <div class="leaf-subtitle">(same sign as <span class="math"><i>a</i></span>)</div>
              <div class="leaf-math" id="odd-math-sample">⁵√(-32) = -2</div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>

  <script>
    const paths = {
      'even-pos': {
        nodes: ['node-root', 'node-even', 'node-even-pos-cond', 'node-even-pos-leaf'],
        arrows: ['arrow-root', 'arrow-even', 'arrow-even-pos']
      },
      'even-neg': {
        nodes: ['node-root', 'node-even', 'node-even-neg-cond', 'node-even-neg-leaf'],
        arrows: ['arrow-root', 'arrow-even', 'arrow-even-neg']
      },
      'odd-pos': {
        nodes: ['node-root', 'node-odd', 'node-odd-cond', 'node-odd-leaf'],
        arrows: ['arrow-root', 'arrow-odd', 'arrow-odd-leaf']
      },
      'odd-neg': {
        nodes: ['node-root', 'node-odd', 'node-odd-cond', 'node-odd-leaf'],
        arrows: ['arrow-root', 'arrow-odd', 'arrow-odd-leaf']
      }
    };

    function highlightPath(targetKey) {
      const tree = document.getElementById('flowchart');
      tree.classList.add('has-selection');

      // Update Odd math sample dynamically based on selection
      const oddSample = document.getElementById('odd-math-sample');
      if (targetKey === 'odd-pos') {
        oddSample.textContent = '∛27 = 3';
      } else if (targetKey === 'odd-neg') {
        oddSample.textContent = '⁵√(-32) = -2';
      }

      // Clear existing highlights
      document.querySelectorAll('.node').forEach(n => n.classList.remove('highlighted'));
      document.querySelectorAll('.arrow').forEach(a => a.classList.remove('highlighted-arrow'));

      // Apply new highlights
      const targetConfig = paths[targetKey] || { nodes: [], arrows: [] };
      targetConfig.nodes.forEach(id => {
        const el = document.getElementById(id);
        if (el) el.classList.add('highlighted');
      });
      targetConfig.arrows.forEach(id => {
        const el = document.getElementById(id);
        if (el) el.classList.add('highlighted-arrow');
      });
    }

    // Button interactions
    const pills = document.querySelectorAll('.pill');
    pills.forEach(pill => {
      pill.addEventListener('click', () => {
        pills.forEach(p => p.classList.remove('active'));
        pill.classList.add('active');
        highlightPath(pill.getAttribute('data-target'));
      });
    });

    // Node direct clicks to switch example
    function activatePill(targetKey) {
      const btn = document.querySelector(`.pill[data-target="${targetKey}"]`);
      if (btn) btn.click();
    }

    document.getElementById('node-even-pos-leaf').addEventListener('click', () => activatePill('even-pos'));
    document.getElementById('node-even-pos-cond').addEventListener('click', () => activatePill('even-pos'));
    
    document.getElementById('node-even-neg-leaf').addEventListener('click', () => activatePill('even-neg'));
    document.getElementById('node-even-neg-cond').addEventListener('click', () => activatePill('even-neg'));
    
    document.getElementById('node-even').addEventListener('click', () => {
      const current = document.querySelector('.pill.active').getAttribute('data-target');
      activatePill(current === 'even-neg' ? 'even-pos' : 'even-pos');
    });

    document.getElementById('node-odd').addEventListener('click', () => {
      const current = document.querySelector('.pill.active').getAttribute('data-target');
      activatePill(current === 'odd-pos' ? 'odd-neg' : 'odd-pos');
    });
    
    document.getElementById('node-odd-cond').addEventListener('click', () => {
      const current = document.querySelector('.pill.active').getAttribute('data-target');
      activatePill(current === 'odd-pos' ? 'odd-neg' : 'odd-pos');
    });

    document.getElementById('node-odd-leaf').addEventListener('click', () => {
      const current = document.querySelector('.pill.active').getAttribute('data-target');
      activatePill(current === 'odd-pos' ? 'odd-neg' : 'odd-pos');
    });

    // Initial state
    highlightPath('even-pos');
  </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>Prime Factorization 4th Root of 1296</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    body {
      background: transparent;
      color: #1e2945;
      padding: 12px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100vh;
      max-width: 600px;
      margin: 0 auto;
    }

    /* Math typography helpers */
    .math-expr {
      display: inline-flex;
      align-items: center;
      font-family: "Cambria Math", "Times New Roman", serif;
      font-style: italic;
    }

    .math-expr .math-num {
      font-style: normal;
      font-family: inherit;
    }

    .radical-container {
      display: inline-flex;
      align-items: center;
      position: relative;
      padding-left: 10px;
    }

    .root-idx {
      font-size: 0.65em;
      position: absolute;
      left: 0;
      top: -2px;
      font-weight: 700;
      font-style: normal;
      color: #00b894;
    }

    .rad-symbol {
      font-size: 1.35em;
      line-height: 1;
      font-style: normal;
      font-weight: 300;
      margin-right: 1px;
    }

    .rad-content {
      border-top: 1.5px solid currentColor;
      padding-top: 1px;
      padding-left: 2px;
      padding-right: 2px;
      line-height: 1.1;
      font-style: normal;
    }

    .sup {
      font-size: 0.7em;
      vertical-align: super;
      line-height: 0;
      font-style: normal;
      font-weight: bold;
    }

    /* Header */
    .header-bar {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      margin-bottom: 6px;
      text-align: center;
    }

    .title-sub {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-weight: 700;
      color: #64748b;
    }

    .header-target {
      font-size: 22px;
      font-weight: 700;
      color: #1e2945;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    /* Stage Container (no outer card shell/borders) */
    .stage-container {
      position: relative;
      width: 100%;
      min-height: 310px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .step-panel {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease, transform 0.25s ease;
      transform: translateY(6px);
      padding: 4px;
    }

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

    /* Step Title */
    .step-header-label {
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
      margin-bottom: 8px;
      background: #f1f5f9;
      padding: 3px 10px;
      border-radius: 12px;
    }

    /* Tree Diagram Visuals */
    .tree-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      width: 100%;
    }

    .tree-node-top {
      background: #1e2945;
      color: white;
      font-weight: 700;
      font-size: 15px;
      padding: 4px 14px;
      border-radius: 16px;
      box-shadow: 0 2px 4px rgba(30, 41, 69, 0.15);
    }

    .tree-svg {
      width: 100%;
      max-width: 320px;
      height: 36px;
    }

    .tree-branches {
      display: flex;
      justify-content: center;
      gap: 40px;
      width: 100%;
    }

    .tree-branch-node {
      font-size: 13px;
      font-weight: 700;
      color: #475569;
      background: #e2e8f0;
      padding: 2px 10px;
      border-radius: 10px;
    }

    .factors-chain {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 4px;
      margin-top: 4px;
      max-width: 100%;
    }

    .factor-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      font-weight: 700;
      font-size: 13px;
      color: #ffffff;
    }

    .pill-2 {
      background: #00b894;
    }

    .pill-3 {
      background: #6c5ce7;
    }

    .op-sym {
      color: #94a3b8;
      font-weight: 700;
      font-size: 14px;
      user-select: none;
    }

    .sub-result-text {
      margin-top: 10px;
      font-size: 17px;
      font-weight: 700;
      color: #1e2945;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    /* Step 2: Grouping */
    .groups-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      flex-wrap: nowrap;
    }

    .group-card {
      background: #f8fafc;
      border: 2px dashed #00b894;
      border-radius: 10px;
      padding: 8px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      flex: 1;
      max-width: 160px;
    }

    .group-card.group-3 {
      border-color: #6c5ce7;
    }

    .group-badge {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      padding: 2px 6px;
      border-radius: 4px;
      color: #ffffff;
    }

    .badge-2 { background: #00b894; }
    .badge-3 { background: #6c5ce7; }

    .group-pill-row {
      display: flex;
      gap: 3px;
      justify-content: center;
      flex-wrap: wrap;
    }

    .group-eval-text {
      font-weight: 800;
      font-size: 16px;
      margin-top: 2px;
    }

    .group-eval-text.color-2 { color: #00b894; }
    .group-eval-text.color-3 { color: #6c5ce7; }

    /* Step 3: Root Evaluation */
    .step3-formula {
      font-size: 20px;
      font-weight: 700;
      color: #1e2945;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .extraction-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background: #f0fdf4;
      border-left: 4px solid #00b894;
      padding: 10px 18px;
      border-radius: 8px;
    }

    .large-pill {
      width: 36px;
      height: 36px;
      font-size: 16px;
    }

    .final-ans {
      font-size: 28px;
      font-weight: 800;
      color: #00b894;
      margin-left: 2px;
    }

    /* Step 4: Verification */
    .check-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      width: 100%;
    }

    .verify-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #e6f9f4;
      border: 1.5px solid #00b894;
      color: #00876c;
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 17px;
      font-weight: 700;
    }

    .check-icon {
      background: #00b894;
      color: white;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 900;
    }

    .verify-details {
      color: #475569;
      font-size: 15px;
      font-weight: 600;
      text-align: center;
      line-height: 1.6;
    }

    .conclusion-tag {
      margin-top: 4px;
      font-size: 14px;
      font-weight: 700;
      color: #00b894;
    }

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

    .btn-step {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      padding: 6px 10px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
      user-select: none;
    }

    .btn-step:hover {
      background: #e2e8f0;
    }

    .btn-step.active {
      background: #1e2945;
      border-color: #1e2945;
      color: #ffffff;
    }

    .btn-play {
      background: #00b894;
      border: none;
      color: #ffffff;
      width: 30px;
      height: 30px;
      border-radius: 6px;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: opacity 0.15s ease;
      user-select: none;
    }

    .btn-play:hover {
      opacity: 0.85;
    }

    @media (max-width: 380px) {
      .header-target {
        font-size: 19px;
      }
      .factor-pill {
        width: 24px;
        height: 24px;
        font-size: 12px;
      }
      .group-card {
        padding: 6px 4px;
      }
      .step3-formula {
        font-size: 17px;
      }
      .btn-step {
        padding: 5px 8px;
        font-size: 11px;
      }
    }
  </style>
</head>
<body>

  
  <div class="header-bar">
    <span class="title-sub">Prime Factorization Method</span>
    <div class="header-target">
      <div class="radical-container">
        <span class="root-idx">4</span>
        <span class="rad-symbol">√</span>
        <span class="rad-content">1296</span>
      </div>
      <span>= ?</span>
    </div>
  </div>

  
  <div class="stage-container">

    
    <div class="step-panel active" id="step0">
      <div class="step-header-label">Step 1: Prime Factor Tree</div>
      <div class="tree-wrapper">
        <div class="tree-node-top">1296</div>
        
        
        <svg class="tree-svg" viewBox="0 0 300 36">
          <line x1="150" y1="2" x2="75" y2="34" stroke="#94a3b8" stroke-width="2" stroke-dasharray="3,3" />
          <line x1="150" y1="2" x2="225" y2="34" stroke="#94a3b8" stroke-width="2" stroke-dasharray="3,3" />
        </svg>

        <div class="tree-branches">
          <div class="tree-branch-node">16 (2⁴)</div>
          <div class="tree-branch-node">81 (3⁴)</div>
        </div>

        <div class="factors-chain" style="margin-top: 10px;">
          <span class="factor-pill pill-2">2</span>
          <span class="op-sym">×</span>
          <span class="factor-pill pill-2">2</span>
          <span class="op-sym">×</span>
          <span class="factor-pill pill-2">2</span>
          <span class="op-sym">×</span>
          <span class="factor-pill pill-2">2</span>
          <span class="op-sym" style="margin: 0 4px; color: #1e2945;">•</span>
          <span class="factor-pill pill-3">3</span>
          <span class="op-sym">×</span>
          <span class="factor-pill pill-3">3</span>
          <span class="op-sym">×</span>
          <span class="factor-pill pill-3">3</span>
          <span class="op-sym">×</span>
          <span class="factor-pill pill-3">3</span>
        </div>

        <div class="sub-result-text">
          <span>1296 = </span>
          <span style="color:#00b894;">2<span class="sup">4</span></span>
          <span class="op-sym">×</span>
          <span style="color:#6c5ce7;">3<span class="sup">4</span></span>
        </div>
      </div>
    </div>

    
    <div class="step-panel" id="step1">
      <div class="step-header-label">Step 2: Group into Bundles of 4</div>
      <div class="groups-wrapper">
        
        <div class="group-card">
          <div class="group-badge badge-2">Group of 4</div>
          <div class="group-pill-row">
            <span class="factor-pill pill-2">2</span>
            <span class="factor-pill pill-2">2</span>
            <span class="factor-pill pill-2">2</span>
            <span class="factor-pill pill-2">2</span>
          </div>
          <div class="group-eval-text color-2">2<span class="sup">4</span></div>
        </div>

        <span class="op-sym" style="font-size: 20px;">×</span>

        
        <div class="group-card group-3">
          <div class="group-badge badge-3">Group of 4</div>
          <div class="group-pill-row">
            <span class="factor-pill pill-3">3</span>
            <span class="factor-pill pill-3">3</span>
            <span class="factor-pill pill-3">3</span>
            <span class="factor-pill pill-3">3</span>
          </div>
          <div class="group-eval-text color-3">3<span class="sup">4</span></div>
        </div>
      </div>
      <div class="sub-result-text" style="margin-top: 14px;">
        <span>(2<span class="sup">4</span>) × (3<span class="sup">4</span>)</span>
      </div>
    </div>

    
    <div class="step-panel" id="step2">
      <div class="step-header-label">Step 3: Evaluate 4th Root</div>
      <div class="step3-formula">
        <div class="radical-container">
          <span class="root-idx">4</span>
          <span class="rad-symbol">√</span>
          <span class="rad-content">2<span class="sup">4</span> × 3<span class="sup">4</span></span>
        </div>
        <span>=</span>
        <span>2 × 3</span>
      </div>

      <div class="extraction-row">
        <span class="factor-pill pill-2 large-pill">2</span>
        <span class="op-sym">×</span>
        <span class="factor-pill pill-3 large-pill">3</span>
        <span class="op-sym">=</span>
        <span class="final-ans">6</span>
      </div>

      <div style="margin-top: 12px; font-size: 13px; color: #64748b; font-weight: 600;">
        Each bundle of 4 releases 1 base factor.
      </div>
    </div>

    
    <div class="step-panel" id="step3">
      <div class="step-header-label">Step 4: Verification</div>
      <div class="check-container">
        <div class="verify-badge">
          <span class="check-icon">✓</span>
          <span>Check: 6<span class="sup">4</span> = 1296</span>
        </div>

        <div class="verify-details">
          6 × 6 × 6 × 6<br>
          = 36 × 36 = <strong>1296</strong>
        </div>

        <div class="conclusion-tag">
          Hence, 
          <span class="radical-container" style="color:#1e2945; font-size: 15px;">
            <span class="root-idx">4</span>
            <span class="rad-symbol">√</span>
            <span class="rad-content">1296</span>
          </span>
          <span style="color:#00b894;">= 6</span>
        </div>
      </div>
    </div>

  </div>

  
  <div class="controls-bar">
    <button class="btn-play" id="playBtn" title="Play / Pause">▶</button>
    <button class="btn-step active" data-step="0">1: Factor</button>
    <button class="btn-step" data-step="1">2: Group 4s</button>
    <button class="btn-step" data-step="2">3: Evaluate</button>
    <button class="btn-step" data-step="3">4: Check</button>
  </div>

  <script>
    const panels = document.querySelectorAll('.step-panel');
    const buttons = document.querySelectorAll('.btn-step');
    const playBtn = document.getElementById('playBtn');
    let currentStep = 0;
    let autoPlayTimer = null;

    function goToStep(index) {
      currentStep = index;
      panels.forEach((p, i) => p.classList.toggle('active', i === index));
      buttons.forEach((b, i) => b.classList.toggle('active', i === index));
    }

    buttons.forEach((btn, idx) => {
      btn.addEventListener('click', () => {
        pause();
        goToStep(idx);
      });
    });

    function nextStep() {
      goToStep((currentStep + 1) % panels.length);
    }

    function play() {
      playBtn.textContent = '⏸';
      if (!autoPlayTimer) {
        autoPlayTimer = setInterval(nextStep, 3200);
      }
    }

    function pause() {
      playBtn.textContent = '▶';
      if (autoPlayTimer) {
        clearInterval(autoPlayTimer);
        autoPlayTimer = null;
      }
    }

    playBtn.addEventListener('click', () => {
      if (autoPlayTimer) {
        pause();
      } else {
        play();
      }
    });

    // Start playback
    play();
  </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 {
      width: 100%;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background: #ffffff;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
    }

    .title {
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
      letter-spacing: -0.01em;
      margin-bottom: 8px;
      text-align: center;
    }

    .math-stage {
      width: 100%;
      max-width: 380px;
      height: 110px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 12px;
      position: relative;
    }

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

    .svg-target {
      cursor: pointer;
      transition: filter 0.2s ease, transform 0.2s ease;
    }

    .svg-target:hover {
      filter: brightness(0.92);
    }

    .svg-glow {
      fill: transparent;
      stroke: transparent;
      stroke-width: 2px;
      rx: 8px;
      transition: fill 0.25s ease, stroke 0.25s ease;
    }

    /* Active Glow states in SVG */
    .active-index .glow-index {
      fill: rgba(231, 76, 60, 0.12);
      stroke: #e74c3c;
    }
    .active-radical .glow-radical {
      fill: rgba(9, 132, 227, 0.1);
      stroke: #0984e3;
    }
    .active-radicand .glow-radicand {
      fill: rgba(0, 184, 148, 0.12);
      stroke: #00b894;
    }
    .active-root .glow-root {
      fill: rgba(142, 68, 173, 0.12);
      stroke: #8e44ad;
    }

    /* Grid cards */
    .components-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
      width: 100%;
      max-width: 380px;
      margin-bottom: 10px;
    }

    .comp-btn {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 10px;
      padding: 8px 10px;
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      text-align: left;
      font-family: inherit;
      transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .comp-badge {
      width: 28px;
      height: 28px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 15px;
      flex-shrink: 0;
    }

    .badge-index { background: #fde8e7; color: #e74c3c; }
    .badge-radical { background: #e3f2fd; color: #0984e3; font-size: 18px; font-weight: 400; }
    .badge-radicand { background: #e0f7f2; color: #00b894; }
    .badge-root { background: #f3e8f8; color: #8e44ad; }

    .comp-label {
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      line-height: 1.2;
    }

    .comp-btn.active[data-part="index"] {
      border-color: #e74c3c;
      background: #fdf5f4;
      box-shadow: 0 0 0 1px #e74c3c;
    }
    .comp-btn.active[data-part="radical"] {
      border-color: #0984e3;
      background: #f0f7fe;
      box-shadow: 0 0 0 1px #0984e3;
    }
    .comp-btn.active[data-part="radicand"] {
      border-color: #00b894;
      background: #f0faf7;
      box-shadow: 0 0 0 1px #00b894;
    }
    .comp-btn.active[data-part="root"] {
      border-color: #8e44ad;
      background: #f9f2fb;
      box-shadow: 0 0 0 1px #8e44ad;
    }

    /* Info Banner */
    .banner {
      width: 100%;
      max-width: 380px;
      min-height: 52px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-size: 13px;
      color: #1e293b;
      line-height: 1.35;
    }

    .banner-highlight {
      font-weight: 700;
    }

    .banner-math {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 12px;
      background: #f1f5f9;
      padding: 1px 5px;
      border-radius: 4px;
      margin-left: 4px;
      font-weight: 600;
      color: #0f172a;
    }
  </style>
</head>
<body>

  <div class="title">Anatomy of a Radical</div>

  <div class="math-stage active-index" id="mathStage">
    <svg viewBox="0 0 320 90">
      
      <rect id="glowIndex" class="svg-glow glow-index" x="38" y="10" width="34" height="42" />
      <rect id="glowRadical" class="svg-glow glow-radical" x="52" y="12" width="138" height="66" />
      <rect id="glowRadicand" class="svg-glow glow-radicand" x="110" y="24" width="70" height="52" />
      <rect id="glowRoot" class="svg-glow glow-root" x="242" y="22" width="46" height="54" />

      
      
      <g class="svg-target" onclick="selectPart('radical')">
        <path d="M 68 52 L 78 52 L 92 74 L 112 18 L 184 18" 
              fill="none" 
              stroke="#0984e3" 
              stroke-width="3.5" 
              stroke-linecap="round" 
              stroke-linejoin="round" />
      </g>

      
      <g class="svg-target" onclick="selectPart('index')">
        <text x="55" y="38" 
              fill="#e74c3c" 
              font-size="24" 
              font-weight="800" 
              font-family="-apple-system, sans-serif" 
              text-anchor="middle">3</text>
      </g>

      
      <g class="svg-target" onclick="selectPart('radicand')">
        <text x="145" y="64" 
              fill="#00b894" 
              font-size="38" 
              font-weight="800" 
              font-family="-apple-system, sans-serif" 
              letter-spacing="1" 
              text-anchor="middle">64</text>
      </g>

      
      <text x="214" y="60" 
            fill="#64748b" 
            font-size="32" 
            font-weight="600" 
            font-family="-apple-system, sans-serif" 
            text-anchor="middle">=</text>

      
      <g class="svg-target" onclick="selectPart('root')">
        <text x="265" y="64" 
              fill="#8e44ad" 
              font-size="38" 
              font-weight="800" 
              font-family="-apple-system, sans-serif" 
              text-anchor="middle">4</text>
      </g>
    </svg>
  </div>

  <div class="components-grid">
    <button class="comp-btn active" data-part="index" onclick="selectPart('index')">
      <div class="comp-badge badge-index">3</div>
      <div class="comp-label">Index<br><span style="font-size:11px;font-weight:400;color:#64748b;">Root degree</span></div>
    </button>
    <button class="comp-btn" data-part="radical" onclick="selectPart('radical')">
      <div class="comp-badge badge-radical">√</div>
      <div class="comp-label">Radical<br><span style="font-size:11px;font-weight:400;color:#64748b;">Operator</span></div>
    </button>
    <button class="comp-btn" data-part="radicand" onclick="selectPart('radicand')">
      <div class="comp-badge badge-radicand">64</div>
      <div class="comp-label">Radicand<br><span style="font-size:11px;font-weight:400;color:#64748b;">Input value</span></div>
    </button>
    <button class="comp-btn" data-part="root" onclick="selectPart('root')">
      <div class="comp-badge badge-root">4</div>
      <div class="comp-label">Root<br><span style="font-size:11px;font-weight:400;color:#64748b;">Result value</span></div>
    </button>
  </div>

  <div class="banner" id="banner">
    <div>
      <span class="banner-highlight" style="color:#e74c3c;">Index (3):</span>
      The root degree.
      <span class="banner-math">4³ = 64</span>
    </div>
  </div>

  <script>
    const data = {
      index: {
        color: '#e74c3c',
        title: 'Index (3)',
        desc: 'The root degree — repeats 3 times.',
        math: '4³ = 64'
      },
      radical: {
        color: '#0984e3',
        title: 'Radical Symbol (√)',
        desc: 'The operator indicating a root operation.',
        math: 'Latin radix'
      },
      radicand: {
        color: '#00b894',
        title: 'Radicand (64)',
        desc: 'The input value inside the radical.',
        math: 'Volume = 64'
      },
      root: {
        color: '#8e44ad',
        title: 'Root (4)',
        desc: 'The evaluated single side or base factor.',
        math: '4 × 4 × 4 = 64'
      }
    };

    function selectPart(partKey) {
      const stage = document.getElementById('mathStage');
      stage.className = 'math-stage active-' + partKey;

      // Update button active states
      const buttons = document.querySelectorAll('.comp-btn');
      buttons.forEach(btn => {
        if (btn.getAttribute('data-part') === partKey) {
          btn.classList.add('active');
        } else {
          btn.classList.remove('active');
        }
      });

      // Update banner
      const info = data[partKey];
      const banner = document.getElementById('banner');
      banner.innerHTML = `
        <div>
          <span class="banner-highlight" style="color:${info.color};">${info.title}:</span>
          ${info.desc}
          <span class="banner-math">${info.math}</span>
        </div>
      `;
    }
  </script>
</body>
</html>

OGM.10.RNQ.2

Aligned learning resources

Related diagrams