<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="1:1">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      color: #1e2945;
      background: transparent;
      padding: 8px;
    }
    .wrapper {
      display: flex;
      flex-direction: column;
      gap: 8px;
      max-width: 600px;
      margin: 0 auto;
    }
    .controls {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 6px;
    }
    .step-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 4px 10px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
    }
    .step-btn.active {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
    }
    .play-btn {
      background: #2563eb;
      color: white;
      border: none;
      border-radius: 6px;
      padding: 4px 12px;
      font-size: 13px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .panels {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    @media (max-width: 440px) {
      .panels { gap: 4px; }
    }
    .panel {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 290px;
      position: relative;
    }
    .panel-header {
      font-size: 15px;
      font-weight: 700;
      margin-bottom: 8px;
      color: #0f172a;
    }
    .long-division {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 14px;
      line-height: 1.25;
      position: relative;
      width: 100%;
      max-width: 150px;
      margin: 0 auto;
    }
    .row {
      display: flex;
      justify-content: flex-end;
      min-height: 18px;
    }
    .char {
      width: 11px;
      text-align: center;
      display: inline-block;
      transition: opacity 0.3s ease;
    }
    .bracket-row {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
    .divisor {
      font-weight: 600;
      padding-right: 4px;
    }
    .dividend-box {
      border-top: 2px solid #1e2945;
      border-left: 2px solid #1e2945;
      border-top-left-radius: 4px;
      padding-left: 3px;
      display: flex;
    }
    .sub-line {
      border-bottom: 1.5px solid #64748b;
      margin-top: 1px;
      margin-bottom: 1px;
    }
    .rem-highlight-green {
      background: #dcfce7;
      color: #15803d;
      font-weight: 700;
      border-radius: 3px;
      padding: 0 1px;
    }
    .rem-highlight-purple {
      background: #f3e8ff;
      color: #7e22ce;
      font-weight: 700;
      border-radius: 3px;
      padding: 0 1px;
    }
    .badge {
      margin-top: auto;
      padding: 6px 8px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 700;
      text-align: center;
      width: 100%;
      transition: opacity 0.3s ease;
    }
    .badge-terminating {
      background: #dcfce7;
      border: 1px solid #86efac;
      color: #166534;
    }
    .badge-repeating {
      background: #f3e8ff;
      border: 1px solid #d8b4fe;
      color: #6b21a8;
    }
    .loop-svg {
      position: absolute;
      right: 0px;
      top: 112px;
      width: 32px;
      height: 90px;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }
    .hidden {
      opacity: 0;
      visibility: hidden;
    }
  </style>
</head>
<body>

<div class="wrapper">
  <div class="controls">
    <button class="step-btn active" onclick="setStep(0)">Step 1</button>
    <button class="step-btn" onclick="setStep(1)">Step 2</button>
    <button class="step-btn" onclick="setStep(2)">Step 3</button>
    <button class="step-btn" onclick="setStep(3)">Step 4</button>
    <button class="play-btn" id="playBtn" onclick="togglePlay()">⏸</button>
  </div>

  <div class="panels">
    
    <div class="panel">
      <div class="panel-header">3 ÷ 8</div>
      
      <div class="long-division">
        
        <div class="row">
          <span class="char"></span>
          <span class="char"></span>
          <span class="char">0</span>
          <span class="char">.</span>
          <span class="char s1">3</span>
          <span class="char s2">7</span>
          <span class="char s3">5</span>
        </div>
        
        
        <div class="bracket-row">
          <span class="divisor">8</span>
          <div class="dividend-box">
            <span class="char">3</span>
            <span class="char">.</span>
            <span class="char">0</span>
            <span class="char s2">0</span>
            <span class="char s3">0</span>
          </div>
        </div>

        
        <div class="row s1">
          <span class="char">-</span>
          <span class="char">2</span>
          <span class="char">4</span>
          <span class="char"></span>
          <span class="char"></span>
        </div>
        <div class="sub-line s1"></div>
        <div class="row s1">
          <span class="char"></span>
          <span class="char">6</span>
          <span class="char s2">0</span>
          <span class="char"></span>
        </div>

        
        <div class="row s2">
          <span class="char">-</span>
          <span class="char">5</span>
          <span class="char">6</span>
          <span class="char"></span>
        </div>
        <div class="sub-line s2"></div>
        <div class="row s2">
          <span class="char"></span>
          <span class="char"></span>
          <span class="char">4</span>
          <span class="char s3">0</span>
        </div>

        
        <div class="row s3">
          <span class="char"></span>
          <span class="char">-</span>
          <span class="char">4</span>
          <span class="char">0</span>
        </div>
        <div class="sub-line s3"></div>
        <div class="row s3">
          <span class="char"></span>
          <span class="char"></span>
          <span class="char"></span>
          <span class="char rem-highlight-green s3">0</span>
        </div>
      </div>

      <div class="badge badge-terminating s3">
        Remainder = 0<br>Terminating
      </div>
    </div>

    
    <div class="panel">
      <div class="panel-header">4 ÷ 11</div>

      <div class="long-division">
        
        <div class="row">
          <span class="char"></span>
          <span class="char"></span>
          <span class="char"></span>
          <span class="char">0</span>
          <span class="char">.</span>
          <span class="char s1">3</span>
          <span class="char s2">6</span>
          <span class="char s3">3</span>
          <span class="char s4">6</span>
        </div>

        
        <div class="bracket-row">
          <span class="divisor">11</span>
          <div class="dividend-box">
            <span class="char">4</span>
            <span class="char">.</span>
            <span class="char">0</span>
            <span class="char s2">0</span>
            <span class="char s3">0</span>
            <span class="char s4">0</span>
          </div>
        </div>

        
        <div class="row s1">
          <span class="char">-</span>
          <span class="char">3</span>
          <span class="char">3</span>
          <span class="char"></span>
          <span class="char"></span>
          <span class="char"></span>
        </div>
        <div class="sub-line s1"></div>
        <div class="row s1">
          <span class="char"></span>
          <span class="char rem-highlight-purple">7</span>
          <span class="char s2">0</span>
          <span class="char"></span>
          <span class="char"></span>
        </div>

        
        <div class="row s2">
          <span class="char">-</span>
          <span class="char">6</span>
          <span class="char">6</span>
          <span class="char"></span>
          <span class="char"></span>
        </div>
        <div class="sub-line s2"></div>
        <div class="row s2">
          <span class="char"></span>
          <span class="char"></span>
          <span class="char rem-highlight-purple">4</span>
          <span class="char s3">0</span>
          <span class="char"></span>
        </div>

        
        <div class="row s3">
          <span class="char"></span>
          <span class="char">-</span>
          <span class="char">3</span>
          <span class="char">3</span>
          <span class="char"></span>
        </div>
        <div class="sub-line s3"></div>
        <div class="row s3">
          <span class="char"></span>
          <span class="char"></span>
          <span class="char rem-highlight-purple">7</span>
          <span class="char s4">0</span>
        </div>

        
        <div class="row s4">
          <span class="char"></span>
          <span class="char">-</span>
          <span class="char">6</span>
          <span class="char">6</span>
        </div>
        <div class="sub-line s4"></div>
        <div class="row s4">
          <span class="char"></span>
          <span class="char"></span>
          <span class="char"></span>
          <span class="char rem-highlight-purple">4</span>
        </div>
      </div>

      
      <svg class="loop-svg s3" viewBox="0 0 32 90">
        <path d="M 4,10 C 28,15 28,65 6,75" fill="none" stroke="#9333ea" stroke-width="2" stroke-dasharray="3,3" />
        <polyline points="10,70 4,76 12,80" fill="none" stroke="#9333ea" stroke-width="2" />
      </svg>

      <div class="badge badge-repeating s4">
        Repeats 7, 4...<br>0.3̄6̄
      </div>
    </div>
  </div>
</div>

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

  function updateView() {
    // Update step buttons
    document.querySelectorAll('.step-btn').forEach((btn, idx) => {
      btn.classList.toggle('active', idx === currentStep);
    });

    // Elements visibility for step 1, 2, 3, 4
    const s1 = currentStep >= 0;
    const s2 = currentStep >= 1;
    const s3 = currentStep >= 2;
    const s4 = currentStep >= 3;

    document.querySelectorAll('.s1').forEach(el => el.classList.toggle('hidden', !s1));
    document.querySelectorAll('.s2').forEach(el => el.classList.toggle('hidden', !s2));
    document.querySelectorAll('.s3').forEach(el => el.classList.toggle('hidden', !s3));
    document.querySelectorAll('.s4').forEach(el => el.classList.toggle('hidden', !s4));
  }

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

  function togglePlay() {
    isPlaying = !isPlaying;
    document.getElementById('playBtn').textContent = isPlaying ? '⏸' : '▶';
  }

  // Auto-play loop
  timer = setInterval(() => {
    if (isPlaying) {
      currentStep = (currentStep + 1) % 4;
      updateView();
    }
  }, 3200);

  updateView();
</script>

</body>
</html>

Rational Numbers as Fractions and Terminating or Repeating Decimals

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <link rel="stylesheet" href="{{VENDOR_CDN}}/katex.min.css" />
  <script src="{{VENDOR_CDN}}/katex.min.js"></script>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: #ffffff;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      user-select: none;
    }

    .stepper-nav {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
      width: 100%;
      max-width: 420px;
      justify-content: center;
    }

    .step-btn {
      flex: 1;
      padding: 8px 4px;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      text-align: center;
      transition: all 0.2s ease;
    }

    .step-btn.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #22b7ff;
      box-shadow: 0 2px 8px rgba(34, 183, 255, 0.3);
    }

    .stage-container {
      width: 100%;
      max-width: 420px;
      min-height: 230px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 16px;
      position: relative;
    }

    .math-row {
      font-size: 20px;
      font-family: "KaTeX_Main", "Times New Roman", serif;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 4px 0;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    /* Stacked subtraction layout */
    .calc-table {
      font-size: 20px;
      font-family: "KaTeX_Main", "Times New Roman", serif;
      display: inline-grid;
      grid-template-columns: auto auto auto;
      column-gap: 8px;
      row-gap: 6px;
      align-items: center;
      text-align: right;
    }

    .op-sign {
      color: #64748b;
      font-weight: 600;
      text-align: left;
    }

    .dec-part {
      position: relative;
      display: inline-block;
      text-align: left;
    }

    .strike-line {
      position: absolute;
      top: 50%;
      left: -4px;
      right: -4px;
      height: 3px;
      background: #ef4444;
      border-radius: 2px;
      transform: translateY(-50%) rotate(-6deg) scaleX(0);
      transform-origin: left center;
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .strike-line.active {
      transform: translateY(-50%) rotate(-6deg) scaleX(1);
    }

    .calc-divider {
      grid-column: 1 / -1;
      height: 2px;
      background: #1e2945;
      margin: 2px 0;
      border-radius: 1px;
    }

    .final-box {
      margin-top: 10px;
      padding: 8px 18px;
      background: #ffffff;
      border: 2px solid #22b7ff;
      border-radius: 10px;
      box-shadow: 0 4px 12px rgba(34, 183, 255, 0.18);
      transform: scale(0.95);
      opacity: 0;
      transition: all 0.3s ease;
    }

    .final-box.show {
      transform: scale(1);
      opacity: 1;
    }

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

    .ctrl-btn {
      padding: 6px 14px;
      border-radius: 20px;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
    }
  </style>
</head>
<body>

  <div class="stepper-nav">
    <button class="step-btn active" onclick="goToStep(0)">1. Let x</button>
    <button class="step-btn" onclick="goToStep(1)">2. &times;10</button>
    <button class="step-btn" onclick="goToStep(2)">3. Subtract</button>
    <button class="step-btn" onclick="goToStep(3)">4. Solve</button>
  </div>

  <div class="stage-container" id="stage">
    
  </div>

  <div class="controls">
    <button class="ctrl-btn" id="playBtn" onclick="togglePlay()">⏸ Pause</button>
  </div>

  <script>
    let currentStep = 0;
    let timer = null;
    let isPlaying = true;
    const TOTAL_STEPS = 4;
    const STEP_DURATION = 3500;

    function renderStep(idx) {
      const stage = document.getElementById('stage');
      const btns = document.querySelectorAll('.step-btn');
      btns.forEach((b, i) => b.classList.toggle('active', i === idx));

      if (idx === 0) {
        stage.innerHTML = `
          <div class="math-row" style="font-size: 24px;">
            <span id="eq1">x = 0.777...</span>
          </div>
        `;
      } else if (idx === 1) {
        stage.innerHTML = `
          <div class="math-row" style="color: #64748b; font-size: 18px; margin-bottom: 8px;">
            10 &times; (x = 0.777...)
          </div>
          <div class="math-row" style="font-size: 24px; color: #0284c7; font-weight: bold;">
            10x = 7.777...
          </div>
        `;
      } else if (idx === 2) {
        stage.innerHTML = `
          <div class="calc-table">
            <span class="op-sign"></span>
            <span>10x</span>
            <span>= 7<span class="dec-part">.777...<span class="strike-line" id="slash1"></span></span></span>

            <span class="op-sign">&minus;</span>
            <span>x</span>
            <span>= 0<span class="dec-part">.777...<span class="strike-line" id="slash2"></span></span></span>

            <div class="calc-divider"></div>

            <span></span>
            <span style="font-weight:bold; color:#0284c7;">9x</span>
            <span style="font-weight:bold; color:#0284c7; text-align: left;">= 7</span>
          </div>
        `;
        setTimeout(() => {
          const s1 = document.getElementById('slash1');
          const s2 = document.getElementById('slash2');
          if (s1 && s2) {
            s1.classList.add('active');
            s2.classList.add('active');
          }
        }, 300);
      } else if (idx === 3) {
        stage.innerHTML = `
          <div class="math-row" style="color: #64748b; font-size: 18px; margin-bottom: 6px;">
            9x = 7
          </div>
          <div class="final-box" id="finalBox">
            <div class="math-row" style="font-size: 26px; color: #0284c7; margin: 0;">
              x = <span style="display:inline-flex; flex-direction:column; vertical-align:middle; text-align:center; margin-left:6px; font-size: 0.9em; line-height: 1.1;">
                <span>7</span>
                <span style="border-top:2px solid #0284c7;">9</span>
              </span>
            </div>
          </div>
        `;
        setTimeout(() => {
          const box = document.getElementById('finalBox');
          if (box) box.classList.add('show');
        }, 100);
      }
    }

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

    function nextStep() {
      currentStep = (currentStep + 1) % TOTAL_STEPS;
      renderStep(currentStep);
    }

    function startAutoPlay() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, STEP_DURATION);
    }

    function togglePlay() {
      isPlaying = !isPlaying;
      const btn = document.getElementById('playBtn');
      if (isPlaying) {
        btn.textContent = '⏸ Pause';
        startAutoPlay();
      } else {
        btn.textContent = '▶ Play';
        clearInterval(timer);
      }
    }

    // Initialize
    renderStep(0);
    startAutoPlay();
  </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>Pigeonhole Principle - Decimal Cycles</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: #ffffff;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      user-select: none;
    }

    .header {
      font-size: 16px;
      font-weight: 700;
      color: #1e2945;
      text-align: center;
      margin-bottom: 6px;
    }

    .formula-tag {
      display: inline-block;
      background: #f1f5f9;
      padding: 2px 8px;
      border-radius: 6px;
      font-family: monospace;
      font-size: 15px;
      color: #0284c7;
      border: 1px solid #e2e8f0;
    }

    /* Remainder Slots (Pigeonholes) */
    .slots-container {
      width: 100%;
      max-width: 480px;
      display: grid;
      grid-template-columns: 1.1fr repeat(6, 1fr);
      gap: 5px;
      margin: 8px 0;
    }

    .slot {
      background: #f8fafc;
      border: 2px dashed #cbd5e1;
      border-radius: 8px;
      padding: 6px 2px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 68px;
      transition: all 0.3s ease;
      position: relative;
    }

    .slot.term-slot {
      border-color: #86efac;
      background: #f0fdf4;
    }

    .slot-label {
      font-size: 12px;
      font-weight: 700;
      color: #64748b;
    }

    .slot.term-slot .slot-label {
      color: #16a34a;
    }

    .slot-content {
      font-size: 18px;
      min-height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.3s ease;
    }

    .slot.occupied {
      background: #eff6ff;
      border-color: #38bdf8;
      border-style: solid;
    }

    .slot.collision {
      background: #fef2f2;
      border-color: #f87171;
      border-style: solid;
      box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.4);
    }

    /* Main Visual Stage */
    .stage-area {
      width: 100%;
      max-width: 480px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 125px;
      position: relative;
    }

    .step-view {
      display: none;
      width: 100%;
      text-align: center;
      animation: fadeIn 0.3s ease;
    }

    .step-view.active {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(4px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .badge-pill {
      font-size: 13px;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: 20px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }
    .badge-green { background: #dcfce7; color: #15803d; }
    .badge-blue { background: #e0f2fe; color: #0369a1; }
    .badge-orange { background: #ffedd5; color: #c2410c; }
    .badge-purple { background: #f3e8ff; color: #7e22ce; }

    .step-desc {
      font-size: 14px;
      font-weight: 600;
      color: #334155;
    }

    .cycle-circle {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-family: monospace;
      font-size: 16px;
      font-weight: 700;
      color: #0284c7;
      background: #ffffff;
      padding: 6px 14px;
      border-radius: 30px;
      border: 1px solid #bae6fd;
    }

    .loop-arrow {
      font-size: 18px;
      color: #0284c7;
      animation: spinSlow 6s linear infinite;
    }
    @keyframes spinSlow {
      100% { transform: rotate(360deg); }
    }

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

    .btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #334155;
      padding: 6px 14px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: background 0.2s, border-color 0.2s;
    }
    .btn:active { background: #f1f5f9; }
    .btn-play {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
    }
    .btn-play:active { background: #0369a1; }

    .dots-nav {
      display: flex;
      gap: 6px;
    }

    .dot-btn {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #cbd5e1;
      border: none;
      cursor: pointer;
      padding: 0;
      transition: background 0.2s;
    }

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

  <div class="header">
    Divide by <span class="formula-tag">b = 7</span>: Exactly 7 Remainders
  </div>

  
  <div class="slots-container">
    <div class="slot term-slot" id="slot-0">
      <span class="slot-label">R = 0</span>
      <span class="slot-content" id="pigeon-0">🛑</span>
    </div>
    <div class="slot" id="slot-1">
      <span class="slot-label">R = 1</span>
      <span class="slot-content" id="pigeon-1"></span>
    </div>
    <div class="slot" id="slot-2">
      <span class="slot-label">R = 2</span>
      <span class="slot-content" id="pigeon-2"></span>
    </div>
    <div class="slot" id="slot-3">
      <span class="slot-label">R = 3</span>
      <span class="slot-content" id="pigeon-3"></span>
    </div>
    <div class="slot" id="slot-4">
      <span class="slot-label">R = 4</span>
      <span class="slot-content" id="pigeon-4"></span>
    </div>
    <div class="slot" id="slot-5">
      <span class="slot-label">R = 5</span>
      <span class="slot-content" id="pigeon-5"></span>
    </div>
    <div class="slot" id="slot-6">
      <span class="slot-label">R = 6</span>
      <span class="slot-content" id="pigeon-6"></span>
    </div>
  </div>

  
  <div class="stage-area">
    
    <div class="step-view active" id="step-view-0">
      <div class="badge-pill badge-green">✓ Case 1: Remainder = 0</div>
      <div class="step-desc">Decimal terminates cleanly</div>
      <div style="font-family: monospace; font-size: 15px; color: #16a34a; font-weight: 700;">
        1 ÷ 4 = 0.25 (R = 0)
      </div>
    </div>

    
    <div class="step-view" id="step-view-1">
      <div class="badge-pill badge-blue">Case 2: 6 Non-Zero Slots</div>
      <div class="step-desc">Remainders {1, 2, 3, 4, 5, 6} available</div>
      <div style="font-size: 13px; color: #64748b; font-weight: 600;">
        🕊️ Steps 1–3 fill empty holes
      </div>
    </div>

    
    <div class="step-view" id="step-view-2">
      <div class="badge-pill badge-blue">Steps 1–6: All Slots Filled</div>
      <div class="step-desc">At most 6 steps without zero</div>
      <div style="font-size: 13px; color: #64748b; font-weight: 600;">
        6 holes completely occupied!
      </div>
    </div>

    
    <div class="step-view" id="step-view-3">
      <div class="badge-pill badge-orange">✦ 7th Step: Pigeonhole Principle!</div>
      <div class="step-desc">7th remainder MUST repeat an occupied slot</div>
      <div style="font-size: 13px; color: #c2410c; font-weight: 700;">
        Overlap forces duplicate remainder
      </div>
    </div>

    
    <div class="step-view" id="step-view-4">
      <div class="badge-pill badge-purple">🔁 Endless Decimal Loop</div>
      <div class="cycle-circle">
        <span class="loop-arrow">↻</span>
        <span>1 ÷ 7 = 0.142857142857...</span>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button class="btn" id="prevBtn" aria-label="Previous step">←</button>
    <div class="dots-nav">
      <button class="dot-btn active" data-idx="0"></button>
      <button class="dot-btn" data-idx="1"></button>
      <button class="dot-btn" data-idx="2"></button>
      <button class="dot-btn" data-idx="3"></button>
      <button class="dot-btn" data-idx="4"></button>
    </div>
    <button class="btn" id="nextBtn" aria-label="Next step">→</button>
    <button class="btn btn-play" id="playBtn">⏸</button>
  </div>

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

    const views = [0, 1, 2, 3, 4].map(i => document.getElementById(`step-view-${i}`));
    const dots = document.querySelectorAll('.dot-btn');
    const playBtn = document.getElementById('playBtn');

    function updateSlots(step) {
      // Clear all non-zero slots
      for (let i = 1; i <= 6; i++) {
        const slot = document.getElementById(`slot-${i}`);
        const pigeon = document.getElementById(`pigeon-${i}`);
        slot.className = 'slot';
        pigeon.textContent = '';
      }

      const slot0 = document.getElementById('slot-0');
      slot0.className = 'slot term-slot';

      if (step === 0) {
        slot0.className = 'slot term-slot collision';
      } else if (step === 1) {
        // First few remainders for 1/7: 3, 2, 6
        ['3', '2', '6'].forEach(id => {
          document.getElementById(`slot-${id}`).className = 'slot occupied';
          document.getElementById(`pigeon-${id}`).textContent = '🕊️';
        });
      } else if (step === 2) {
        // All 6 non-zero slots filled
        for (let i = 1; i <= 6; i++) {
          document.getElementById(`slot-${i}`).className = 'slot occupied';
          document.getElementById(`pigeon-${i}`).textContent = '🕊️';
        }
      } else if (step === 3 || step === 4) {
        // Collision on remainder 3
        for (let i = 1; i <= 6; i++) {
          document.getElementById(`slot-${i}`).className = 'slot occupied';
          document.getElementById(`pigeon-${i}`).textContent = '🕊️';
        }
        const collSlot = document.getElementById('slot-3');
        collSlot.className = 'slot collision';
        document.getElementById('pigeon-3').textContent = '🕊️🕊️';
      }
    }

    function render(step) {
      views.forEach((v, idx) => {
        v.classList.toggle('active', idx === step);
      });
      dots.forEach((d, idx) => {
        d.classList.toggle('active', idx === step);
      });
      updateSlots(step);
    }

    function setStep(newStep) {
      currentStep = (newStep + totalSteps) % totalSteps;
      render(currentStep);
    }

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

    function prevStep() {
      setStep(currentStep - 1);
    }

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

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

    document.getElementById('nextBtn').addEventListener('click', () => {
      pauseTimer();
      nextStep();
    });

    document.getElementById('prevBtn').addEventListener('click', () => {
      pauseTimer();
      prevStep();
    });

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

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

    // Initialize
    render(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;
      -webkit-tap-highlight-color: transparent;
    }

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

    /* Header & Badge */
    .header-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-bottom: 8px;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 10px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 600;
      background: #eff6ff;
      color: #1d4ed8;
      border: 1px solid #bfdbfe;
    }

    /* Preset selector pills */
    .preset-bar {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: center;
      margin-bottom: 10px;
    }

    .pill-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 4px 10px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      transition: background 0.2s, color 0.2s, box-shadow 0.2s, border-color 0.2s;
    }

    .pill-btn.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
      box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
    }

    /* Main Fraction Structure Card */
    .main-fraction-card {
      width: 100%;
      max-width: 480px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 14px;
      display: grid;
      grid-template-columns: 80px 1fr;
      align-items: center;
      gap: 12px;
      margin-bottom: 8px;
    }

    .fraction-display {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      font-weight: 700;
      color: #0f172a;
      line-height: 1;
      padding: 4px 0;
    }

    .frac-num {
      color: #2563eb;
      padding-bottom: 3px;
      transition: color 0.2s;
    }

    .frac-line {
      width: 100%;
      height: 3px;
      background: #334155;
      border-radius: 2px;
      margin: 2px 0;
    }

    .frac-den {
      color: #0891b2;
      padding-top: 3px;
      transition: color 0.2s;
    }

    .labels-col {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .label-row {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
    }

    .label-tag {
      font-weight: 700;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 2px 6px;
      border-radius: 4px;
    }

    .tag-num {
      background: #dbeafe;
      color: #1e40af;
    }

    .tag-den {
      background: #cffafe;
      color: #0e7490;
    }

    .label-desc {
      color: #334155;
      font-size: 12px;
    }

    .label-desc span {
      font-weight: 600;
    }

    /* Branching Section */
    .branches-container {
      width: 100%;
      max-width: 480px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .branch-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 8px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      transition: border-color 0.25s, box-shadow 0.25s, background 0.25s, opacity 0.25s;
      opacity: 0.5;
    }

    .branch-card.active {
      opacity: 1;
      border-color: #2563eb;
      background: #f8fafc;
      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.12);
    }

    .branch-title {
      font-size: 13px;
      font-weight: 700;
      margin-bottom: 4px;
      color: #0f172a;
    }

    .branch-card.active .branch-title.term-title {
      color: #059669;
    }

    .branch-card.active .branch-title.rep-title {
      color: #7c3aed;
    }

    .branch-formula {
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
      margin: 4px 0;
      background: #ffffff;
      padding: 3px 6px;
      border-radius: 4px;
      border: 1px solid #e2e8f0;
      width: 100%;
    }

    .bar-notation {
      text-decoration: overline;
    }

    .branch-sub {
      font-size: 11px;
      color: #64748b;
      font-weight: 500;
      margin-top: 2px;
    }

    /* Small Screen Tuning */
    @media (max-width: 380px) {
      .main-fraction-card {
        grid-template-columns: 65px 1fr;
        gap: 8px;
        padding: 8px 10px;
      }
      .fraction-display {
        font-size: 22px;
      }
      .branch-formula {
        font-size: 13px;
      }
      .branch-title {
        font-size: 12px;
      }
    }
  </style>
</head>
<body>

  
  <div class="header-row">
    <div class="badge">
      <span>✦</span> Ratio of Integers (Rational)
    </div>
  </div>

  
  <div class="preset-bar" id="presetBar">
    <button class="pill-btn active" data-num="3" data-den="4" data-type="term" data-res="0.75" data-alt="">3/4</button>
    <button class="pill-btn" data-num="2" data-den="3" data-type="rep" data-res="0.666..." data-alt="0.6̄">2/3</button>
    <button class="pill-btn" data-num="-5" data-den="8" data-type="term" data-res="-0.625" data-alt="">-5/8</button>
    <button class="pill-btn" data-num="1" data-den="6" data-type="rep" data-res="0.166..." data-alt="0.16̄">1/6</button>
    <button class="pill-btn" data-num="7" data-den="9" data-type="rep" data-res="0.777..." data-alt="0.7̄">7/9</button>
  </div>

  
  <div class="main-fraction-card">
    <div class="fraction-display">
      <span class="frac-num" id="fracNum">3</span>
      <div class="frac-line"></div>
      <span class="frac-den" id="fracDen">4</span>
    </div>
    <div class="labels-col">
      <div class="label-row">
        <span class="label-tag tag-num">Numerator</span>
        <span class="label-desc">Integer <b id="valA">a = 3</b></span>
      </div>
      <div class="label-row">
        <span class="label-tag tag-den">Denominator</span>
        <span class="label-desc">Non-zero <b id="valB">b = 4</b></span>
      </div>
    </div>
  </div>

  
  <div class="branches-container">
    
    <div class="branch-card active" id="cardTerm">
      <div class="branch-title term-title">Terminating Decimal</div>
      <div class="branch-formula" id="formulaTerm">3 ÷ 4 = 0.75</div>
      <div class="branch-sub">Stops cleanly</div>
    </div>

    
    <div class="branch-card" id="cardRep">
      <div class="branch-title rep-title">Repeating Decimal</div>
      <div class="branch-formula" id="formulaRep">2 ÷ 3 = 0.6̄</div>
      <div class="branch-sub">Periodic pattern</div>
    </div>
  </div>

  <script>
    const buttons = document.querySelectorAll('.pill-btn');
    const fracNum = document.getElementById('fracNum');
    const fracDen = document.getElementById('fracDen');
    const valA = document.getElementById('valA');
    const valB = document.getElementById('valB');
    const cardTerm = document.getElementById('cardTerm');
    const cardRep = document.getElementById('cardRep');
    const formulaTerm = document.getElementById('formulaTerm');
    const formulaRep = document.getElementById('formulaRep');

    buttons.forEach(btn => {
      btn.addEventListener('click', () => {
        buttons.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');

        const num = btn.dataset.num;
        const den = btn.dataset.den;
        const type = btn.dataset.type;
        const res = btn.dataset.res;
        const alt = btn.dataset.alt;

        fracNum.textContent = num;
        fracDen.textContent = den;
        valA.textContent = `a = ${num}`;
        valB.textContent = `b = ${den}`;

        if (type === 'term') {
          cardTerm.classList.add('active');
          cardRep.classList.remove('active');
          formulaTerm.textContent = `${num} ÷ ${den} = ${res}`;
          formulaRep.textContent = '2 ÷ 3 = 0.6̄';
        } else {
          cardRep.classList.add('active');
          cardTerm.classList.remove('active');
          formulaRep.textContent = `${num} ÷ ${den} = ${alt || res}`;
          formulaTerm.textContent = '3 ÷ 4 = 0.75';
        }
      });
    });
  </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>Scaling Denominators - Finding Fractions Between</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: #ffffff;
      padding: 12px;
      user-select: none;
      -webkit-user-select: none;
      max-width: 600px;
      margin: 0 auto;
    }

    /* Math Fraction Formatting */
    .frac {
      display: inline-flex;
      flex-direction: column;
      vertical-align: middle;
      text-align: center;
      font-weight: 700;
      line-height: 1;
      font-size: 0.95em;
    }
    .frac .num {
      border-bottom: 1.5px solid currentColor;
      padding: 0 2px 2px;
    }
    .frac .den {
      padding: 2px 2px 0;
    }

    /* Step Navigation */
    .nav-steps {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-bottom: 12px;
    }
    .step-btn {
      background: #f1f5f9;
      border: 1.5px solid #cbd5e1;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 700;
      color: #475569;
      cursor: pointer;
      transition: background-color 0.2s, color 0.2s, border-color 0.2s;
    }
    .step-btn:hover {
      background: #e2e8f0;
      color: #1e2945;
    }
    .step-btn.active {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
    }

    /* Main Display Stage */
    .stage-container {
      position: relative;
      height: 110px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f8fafc;
      border-radius: 12px;
      padding: 8px 12px;
      margin-bottom: 12px;
      overflow: hidden;
    }

    .stage {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      padding: 6px 12px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }
    .stage.active {
      opacity: 1;
      pointer-events: auto;
    }

    .frac-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }
    .frac-val {
      font-size: 18px;
      font-weight: 700;
      color: #1e2945;
    }

    /* Fraction Bars */
    .bar-grid {
      display: flex;
      width: 100px;
      height: 20px;
      border: 2px solid #1e2945;
      border-radius: 4px;
      overflow: hidden;
      background: #ffffff;
    }
    .bar-cell {
      flex: 1;
      border-right: 1px solid #cbd5e1;
    }
    .bar-cell:last-child { border-right: none; }
    .bar-cell.filled { background: #2563eb; }

    .transform-arrow {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 12px;
      font-weight: 700;
      color: #d97706;
      gap: 2px;
    }
    .transform-arrow svg {
      width: 28px;
      height: 16px;
      stroke: #d97706;
      stroke-width: 2.5;
      fill: none;
    }

    /* Magnified Section */
    .zoom-section {
      background: #f8fafc;
      border-radius: 12px;
      padding: 10px 8px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .zoom-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 0 8px 6px;
    }
    .zoom-title {
      font-size: 13px;
      font-weight: 700;
      color: #1e2945;
    }
    .zoom-badge {
      background: #fef3c7;
      color: #b45309;
      padding: 2px 8px;
      border-radius: 10px;
      font-size: 11px;
      font-weight: 700;
    }

    .number-line-svg {
      width: 100%;
      height: auto;
      max-height: 120px;
      display: block;
    }

    .tick-hitbox {
      cursor: pointer;
      fill: transparent;
    }
    .tick-hitbox:hover + .tick-line-mid {
      stroke: #2563eb;
      stroke-width: 3;
    }

    /* Active Details Area */
    .active-bubble {
      margin-top: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 8px;
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
      min-height: 32px;
    }
    .found-pill {
      background: #f59e0b;
      color: #1e2945;
      padding: 2px 10px;
      border-radius: 14px;
      display: inline-flex;
      align-items: center;
      font-weight: 800;
      font-size: 14px;
    }
  </style>
</head>
<body>

  
  <div class="nav-steps">
    <button class="step-btn active" id="btn0" onclick="setStep(0)">1. Given 5ths</button>
    <button class="step-btn" id="btn1" onclick="setStep(1)">2. Scale × 10/10</button>
    <button class="step-btn" id="btn2" onclick="setStep(2)">3. Find Between</button>
  </div>

  
  <div class="stage-container">
    
    <div class="stage active" id="stage0">
      <div class="frac-card">
        <div class="frac-val"><span class="frac"><span class="num">2</span><span class="den">5</span></span></div>
        <div class="bar-grid">
          <div class="bar-cell filled"></div>
          <div class="bar-cell filled"></div>
          <div class="bar-cell"></div>
          <div class="bar-cell"></div>
          <div class="bar-cell"></div>
        </div>
      </div>

      <div style="font-size: 13px; font-weight: 700; color: #64748b; text-align: center;">
        Adjacent fractions<br><span style="font-size: 11px; font-weight: 600;">(no simple 5ths in between)</span>
      </div>

      <div class="frac-card">
        <div class="frac-val"><span class="frac"><span class="num">3</span><span class="den">5</span></span></div>
        <div class="bar-grid">
          <div class="bar-cell filled"></div>
          <div class="bar-cell filled"></div>
          <div class="bar-cell filled"></div>
          <div class="bar-cell"></div>
          <div class="bar-cell"></div>
        </div>
      </div>
    </div>

    
    <div class="stage" id="stage1">
      <div class="frac-card">
        <div class="frac-val" style="font-size: 15px;">
          <span class="frac"><span class="num">2 · 10</span><span class="den">5 · 10</span></span>
          <span style="margin: 0 3px;">=</span>
          <span class="frac" style="color:#2563eb;"><span class="num">20</span><span class="den">50</span></span>
        </div>
      </div>

      <div class="transform-arrow">
        <span>Multiply by <span class="frac"><span class="num">10</span><span class="den">10</span></span></span>
        <svg viewBox="0 0 28 16">
          <line x1="2" y1="8" x2="24" y2="8" stroke-linecap="round"/>
          <polyline points="18,3 24,8 18,13" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>

      <div class="frac-card">
        <div class="frac-val" style="font-size: 15px;">
          <span class="frac"><span class="num">3 · 10</span><span class="den">5 · 10</span></span>
          <span style="margin: 0 3px;">=</span>
          <span class="frac" style="color:#2563eb;"><span class="num">30</span><span class="den">50</span></span>
        </div>
      </div>
    </div>

    
    <div class="stage" id="stage2">
      <div class="frac-card" style="color:#2563eb;">
        <div class="frac-val"><span class="frac"><span class="num">20</span><span class="den">50</span></span></div>
        <div style="font-size: 12px; color: #64748b; font-weight: 700;">= 2/5</div>
      </div>
      <div style="font-size: 13px; font-weight: 800; color: #d97706; text-align: center; line-height: 1.3;">
        ✨ 9 new fractions<br><span style="color: #1e2945; font-weight: 600; font-size: 12px;">unlocked in the gap!</span>
      </div>
      <div class="frac-card" style="color:#2563eb;">
        <div class="frac-val"><span class="frac"><span class="num">30</span><span class="den">50</span></span></div>
        <div style="font-size: 12px; color: #64748b; font-weight: 700;">= 3/5</div>
      </div>
    </div>
  </div>

  
  <div class="zoom-section">
    <div class="zoom-header">
      <span class="zoom-title">Magnified Number Line Segment (/50)</span>
      <span class="zoom-badge">Tap any tick mark</span>
    </div>

    <svg class="number-line-svg" viewBox="0 0 500 115" id="numberLineSvg">
      <defs>
        <filter id="badgeShadow" x="-20%" y="-20%" width="140%" height="140%">
          <feDropShadow dx="0" dy="1" stdDeviation="1.5" flood-color="#000000" flood-opacity="0.15"/>
        </filter>
      </defs>

      
      <line x1="45" y1="58" x2="455" y2="58" stroke="#1e2945" stroke-width="3" stroke-linecap="round"/>

      
      <g id="ticksGroup"></g>
      <g id="calloutGroup"></g>
    </svg>

    <div class="active-bubble">
      <span>Selected fraction:</span>
      <span class="found-pill" id="selectedFraction">
        <span class="frac"><span class="num">25</span><span class="den">50</span></span>
      </span>
      <span id="simplificationText" style="color: #475569;">
        (simplified: <strong>1/2</strong>)
      </span>
    </div>
  </div>

  <script>
    let selectedNum = 25;

    // GCD for fraction simplification
    function gcd(a, b) {
      return b === 0 ? a : gcd(b, a % b);
    }

    function renderTicks() {
      const gTicks = document.getElementById('ticksGroup');
      const gCallout = document.getElementById('calloutGroup');
      gTicks.innerHTML = '';
      gCallout.innerHTML = '';

      const xMin = 50;
      const xMax = 450;
      const total = 10; // 20 to 30

      for (let i = 0; i <= total; i++) {
        const num = 20 + i;
        const x = xMin + (i / total) * (xMax - xMin);
        const isEnd = (i === 0 || i === total);
        const isSelected = (num === selectedNum);

        // Tick mark line
        const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
        line.setAttribute('x1', x);
        line.setAttribute('x2', x);

        if (isEnd) {
          line.setAttribute('y1', 40);
          line.setAttribute('y2', 76);
          line.setAttribute('stroke', '#1e2945');
          line.setAttribute('stroke-width', '3.5');
          line.setAttribute('stroke-linecap', 'round');
        } else {
          line.setAttribute('y1', isSelected ? 44 : 48);
          line.setAttribute('y2', isSelected ? 72 : 68);
          line.setAttribute('stroke', isSelected ? '#f59e0b' : '#94a3b8');
          line.setAttribute('stroke-width', isSelected ? '3.5' : '2');
          line.setAttribute('stroke-linecap', 'round');
          line.setAttribute('class', 'tick-line-mid');
        }
        gTicks.appendChild(line);

        // Tick Labels
        if (isEnd) {
          // Left & Right Endpoint Full Labels
          const textMain = document.createElementNS('http://www.w3.org/2000/svg', 'text');
          textMain.setAttribute('x', x);
          textMain.setAttribute('y', 93);
          textMain.setAttribute('text-anchor', 'middle');
          textMain.setAttribute('font-weight', '800');
          textMain.setAttribute('font-size', '14');
          textMain.setAttribute('fill', '#1e2945');
          textMain.textContent = `${num}/50`;
          gTicks.appendChild(textMain);

          const textSub = document.createElementNS('http://www.w3.org/2000/svg', 'text');
          textSub.setAttribute('x', x);
          textSub.setAttribute('y', 108);
          textSub.setAttribute('text-anchor', 'middle');
          textSub.setAttribute('font-weight', '700');
          textSub.setAttribute('font-size', '12');
          textSub.setAttribute('fill', '#2563eb');
          textSub.textContent = (i === 0) ? '(= 2/5)' : '(= 3/5)';
          gTicks.appendChild(textSub);
        } else {
          // Clear, highly legible intermediate numerator
          const textMid = document.createElementNS('http://www.w3.org/2000/svg', 'text');
          textMid.setAttribute('x', x);
          textMid.setAttribute('y', 86);
          textMid.setAttribute('text-anchor', 'middle');
          textMid.setAttribute('font-weight', isSelected ? '800' : '700');
          textMid.setAttribute('font-size', isSelected ? '14' : '12');
          textMid.setAttribute('fill', isSelected ? '#d97706' : '#475569');
          textMid.textContent = `${num}`;
          gTicks.appendChild(textMid);
        }

        // Invisible clickable hitbox
        const hitbox = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
        hitbox.setAttribute('x', x - 18);
        hitbox.setAttribute('y', 20);
        hitbox.setAttribute('width', 36);
        hitbox.setAttribute('height', 85);
        hitbox.setAttribute('class', 'tick-hitbox');
        hitbox.onclick = () => selectTick(num);
        gTicks.appendChild(hitbox);

        // Render dynamic callout pin directly over selected tick
        if (isSelected) {
          const calloutG = document.createElementNS('http://www.w3.org/2000/svg', 'g');
          
          // Badge background
          const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
          rect.setAttribute('x', x - 26);
          rect.setAttribute('y', 12);
          rect.setAttribute('width', 52);
          rect.setAttribute('height', 24);
          rect.setAttribute('rx', 6);
          rect.setAttribute('fill', '#f59e0b');
          rect.setAttribute('filter', 'url(#badgeShadow)');
          calloutG.appendChild(rect);

          // Pointer arrow
          const poly = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
          poly.setAttribute('points', `${x-5},36 ${x+5},36 ${x},42`);
          poly.setAttribute('fill', '#f59e0b');
          calloutG.appendChild(poly);

          // Text inside badge
          const badgeText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
          badgeText.setAttribute('x', x);
          badgeText.setAttribute('y', 28);
          badgeText.setAttribute('text-anchor', 'middle');
          badgeText.setAttribute('font-weight', '800');
          badgeText.setAttribute('font-size', '13');
          badgeText.setAttribute('fill', '#1e2945');
          badgeText.textContent = `${num}/50`;
          calloutG.appendChild(badgeText);

          gCallout.appendChild(calloutG);
        }
      }
    }

    function selectTick(num) {
      selectedNum = num;
      
      // Update active bubble display
      document.getElementById('selectedFraction').innerHTML =
        `<span class="frac"><span class="num">${num}</span><span class="den">50</span></span>`;

      const divisor = gcd(num, 50);
      const simpNum = num / divisor;
      const simpDen = 50 / divisor;

      const simpTextEl = document.getElementById('simplificationText');
      if (divisor > 1) {
        simpTextEl.innerHTML = `(simplifies to <strong><span class="frac"><span class="num">${simpNum}</span><span class="den">${simpDen}</span></span></strong>)`;
      } else {
        simpTextEl.innerHTML = `(in lowest terms, lies strictly between <strong>2/5</strong> & <strong>3/5</strong>)`;
      }

      renderTicks();
    }

    function setStep(index) {
      for (let i = 0; i < 3; i++) {
        document.getElementById(`btn${i}`).classList.toggle('active', i === index);
        document.getElementById(`stage${i}`).classList.toggle('active', i === index);
      }
    }

    // Initial render
    renderTicks();
    selectTick(25);
  </script>
</body>
</html>

Finding Rational Numbers Between Two Given Numbers

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

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

    .main-view {
      width: 100%;
      max-width: 540px;
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* Step Controller Bar */
    .controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      flex-wrap: nowrap;
      width: 100%;
    }

    .step-btn {
      background: #ffffff;
      border: 1px solid #d1d5db;
      border-radius: 16px;
      padding: 5px 10px;
      font-size: 12px;
      font-weight: 600;
      color: #4b5563;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      transition: background-color 0.2s, color 0.2s, border-color 0.2s;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      white-space: nowrap;
      flex: 1 1 auto;
      justify-content: center;
    }

    .step-btn:hover {
      border-color: #9ca3af;
      color: #1e2945;
    }

    .step-btn.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
    }

    .play-btn {
      background: #ffffff;
      border: 1px solid #d1d5db;
      border-radius: 50%;
      width: 28px;
      height: 28px;
      flex: 0 0 28px;
      font-size: 11px;
      color: #1e2945;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.2s;
    }

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

    /* Diagram Stage */
    .stage {
      position: relative;
      width: 100%;
      background: transparent;
      border: none;
      padding: 24px 8px 8px 8px;
      display: flex;
      flex-direction: column;
      gap: 26px;
    }

    /* Connecting Rays SVG */
    .connector-svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
    }

    .zoom-ray-1, .zoom-ray-2 {
      transition: opacity 0.35s ease;
    }

    /* Number Line Row */
    .line-row {
      position: relative;
      z-index: 2;
      width: 100%;
      height: 48px;
      display: flex;
      align-items: center;
      transition: opacity 0.35s ease, transform 0.35s ease;
    }

    .line-row.dimmed {
      opacity: 0.68;
    }

    .line-row.hidden {
      opacity: 0;
      transform: translateY(-6px);
      pointer-events: none;
    }

    .axis-bar {
      position: absolute;
      left: 5%;
      right: 5%;
      height: 4px;
      background: #cbd5e1;
      border-radius: 2px;
      top: 12px;
    }

    .axis-highlight {
      position: absolute;
      top: 12px;
      height: 4px;
      border-radius: 2px;
      transition: all 0.35s ease;
    }

    .hl-blue {
      background: #2563eb;
    }

    .hl-coral {
      background: #f43f5e;
    }

    /* Point Markers */
    .point-marker {
      position: absolute;
      top: 4px;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }

    .tick {
      width: 2px;
      height: 16px;
      background: #64748b;
      border-radius: 1px;
    }

    .tick.major {
      width: 3px;
      height: 18px;
      margin-top: -1px;
      background: #1e2945;
    }

    .tick.active-blue {
      background: #2563eb;
    }

    .tick.active-coral {
      background: #f43f5e;
      width: 3px;
      height: 18px;
      margin-top: -1px;
    }

    .point-dot {
      position: absolute;
      top: 4px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #ffffff;
      border: 2px solid #1e2945;
    }

    .dot-coral {
      border-color: #f43f5e;
      background: #f43f5e;
      width: 12px;
      height: 12px;
      top: 3px;
      box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.25);
    }

    .point-label {
      font-size: 14px;
      font-weight: 700;
      color: #0f172a;
      margin-top: 10px;
      line-height: 1;
      white-space: nowrap;
    }

    .point-label.sub {
      font-size: 11px;
      color: #334155;
      font-weight: 600;
      margin-top: 2px;
    }

    .point-label.coral-text {
      color: #e11d48;
    }

    .point-label.blue-text {
      color: #1d4ed8;
    }

    .fraction {
      display: inline-flex;
      flex-direction: column;
      vertical-align: middle;
      text-align: center;
      font-size: 13px;
      line-height: 1.05;
    }

    .fraction .num {
      border-bottom: 1.5px solid currentColor;
      padding: 0 1px;
    }

    .fraction .den {
      padding: 0 1px;
    }

    /* Magnifier Badge */
    .mag-badge {
      position: absolute;
      right: 4px;
      top: -2px;
      font-size: 11px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 14px;
      background: #eff6ff;
      color: #1d4ed8;
      border: 1px solid #bfdbfe;
      display: flex;
      align-items: center;
      gap: 3px;
      z-index: 10;
    }
  </style>
</head>
<body>

  <div class="main-view">
    
    <div class="controls">
      <button class="step-btn active" id="step0" onclick="setStep(0)">
        <span>1</span> Integers
      </button>
      <button class="step-btn" id="step1" onclick="setStep(1)">
        <span>2</span> Fourths
      </button>
      <button class="step-btn" id="step2" onclick="setStep(2)">
        <span>3</span> Eighths
      </button>
      <button class="play-btn" id="playToggle" onclick="togglePlay()" title="Play / Pause">
        ⏸
      </button>
    </div>

    
    <div class="stage" id="stage">
      <div class="mag-badge" id="magBadge">🔍 Level 1</div>

      <svg class="connector-svg" id="svgCone">
        
        <polygon id="cone1" class="zoom-ray-1" fill="rgba(37, 99, 235, 0.12)" stroke="rgba(37, 99, 235, 0.4)" stroke-dasharray="3,3" points="0,0 0,0 0,0 0,0" opacity="0" />
        <polygon id="cone2" class="zoom-ray-2" fill="rgba(244, 63, 94, 0.12)" stroke="rgba(244, 63, 94, 0.4)" stroke-dasharray="3,3" points="0,0 0,0 0,0 0,0" opacity="0" />
      </svg>

      
      <div class="line-row" id="row0">
        <div class="axis-bar"></div>
        <div class="axis-highlight hl-blue" style="left: 5%; width: 90%;"></div>
        
        <div class="point-marker" style="left: 5%;">
          <div class="tick major"></div>
          <div class="point-label">0</div>
        </div>

        <div class="point-marker" style="left: 95%;">
          <div class="tick major"></div>
          <div class="point-label">1</div>
        </div>
      </div>

      
      <div class="line-row hidden" id="row1">
        <div class="axis-bar"></div>
        <div class="axis-highlight hl-coral" id="coralHL" style="left: 27.5%; width: 22.5%;"></div>

        <div class="point-marker" style="left: 5%;">
          <div class="tick major"></div>
          <div class="point-label">0</div>
        </div>

        <div class="point-marker" style="left: 27.5%;">
          <div class="tick major active-coral"></div>
          <div class="point-label coral-text">
            <span class="fraction"><span class="num">1</span><span class="den">4</span></span>
          </div>
        </div>

        <div class="point-marker" style="left: 50%;">
          <div class="tick major active-coral"></div>
          <div class="point-label coral-text">
            <span class="fraction"><span class="num">2</span><span class="den">4</span></span>
          </div>
        </div>

        <div class="point-marker" style="left: 72.5%;">
          <div class="tick major"></div>
          <div class="point-label blue-text">
            <span class="fraction"><span class="num">3</span><span class="den">4</span></span>
          </div>
        </div>

        <div class="point-marker" style="left: 95%;">
          <div class="tick major"></div>
          <div class="point-label">1</div>
        </div>
      </div>

      
      <div class="line-row hidden" id="row2">
        <div class="axis-bar"></div>

        <div class="point-marker" style="left: 5%;">
          <div class="tick major active-coral"></div>
          <div class="point-label coral-text">
            <span class="fraction"><span class="num">1</span><span class="den">4</span></span>
            <div class="point-label sub"><span class="fraction"><span class="num">2</span><span class="den">8</span></span></div>
          </div>
        </div>

        <div class="point-marker" style="left: 50%;">
          <div class="dot-coral point-dot"></div>
          <div class="point-label coral-text" style="font-size: 15px; margin-top: 12px;">
            <span class="fraction"><span class="num">3</span><span class="den">8</span></span>
          </div>
        </div>

        <div class="point-marker" style="left: 95%;">
          <div class="tick major active-coral"></div>
          <div class="point-label coral-text">
            <span class="fraction"><span class="num">2</span><span class="den">4</span></span>
            <div class="point-label sub"><span class="fraction"><span class="num">4</span><span class="den">8</span></span></div>
          </div>
        </div>
      </div>

    </div>
  </div>

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

    const row0 = document.getElementById('row0');
    const row1 = document.getElementById('row1');
    const row2 = document.getElementById('row2');
    const cone1 = document.getElementById('cone1');
    const cone2 = document.getElementById('cone2');
    const stage = document.getElementById('stage');
    const magBadge = document.getElementById('magBadge');
    const playBtn = document.getElementById('playToggle');

    function updateConnectors() {
      const stageRect = stage.getBoundingClientRect();
      if (!stageRect.width) return;

      // Row 0 coords
      const r0Rect = row0.getBoundingClientRect();
      const r0Top = r0Rect.top - stageRect.top + 14;
      const r0Left = stageRect.width * 0.05;
      const r0Right = stageRect.width * 0.95;

      // Row 1 coords
      const r1Rect = row1.getBoundingClientRect();
      const r1Top = r1Rect.top - stageRect.top + 12;
      const r1Left = stageRect.width * 0.05;
      const r1Right = stageRect.width * 0.95;

      const r1HL_left = stageRect.width * 0.275;
      const r1HL_right = stageRect.width * 0.50;

      // Row 2 coords
      const r2Rect = row2.getBoundingClientRect();
      const r2Top = r2Rect.top - stageRect.top + 12;
      const r2Left = stageRect.width * 0.05;
      const r2Right = stageRect.width * 0.95;

      // Cone 1: from [0, 1] on row 0 to entire row 1
      cone1.setAttribute('points', `${r0Left},${r0Top} ${r0Right},${r0Top} ${r1Right},${r1Top} ${r1Left},${r1Top}`);

      // Cone 2: from [1/4, 2/4] on row 1 to entire row 2
      cone2.setAttribute('points', `${r1HL_left},${r1Top} ${r1HL_right},${r1Top} ${r2Right},${r2Top} ${r2Left},${r2Top}`);
    }

    function setStep(step) {
      currentStep = step;

      // Update buttons
      for (let i = 0; i < 3; i++) {
        document.getElementById(`step${i}`).classList.toggle('active', i === step);
      }

      // Update rows & zoom rays
      if (step === 0) {
        row0.className = 'line-row';
        row1.className = 'line-row hidden';
        row2.className = 'line-row hidden';
        cone1.setAttribute('opacity', '0');
        cone2.setAttribute('opacity', '0');
        magBadge.innerHTML = '🔍 Integers';
        magBadge.style.color = '#1d4ed8';
        magBadge.style.borderColor = '#bfdbfe';
        magBadge.style.background = '#eff6ff';
      } else if (step === 1) {
        row0.className = 'line-row dimmed';
        row1.className = 'line-row';
        row2.className = 'line-row hidden';
        cone1.setAttribute('opacity', '1');
        cone2.setAttribute('opacity', '0');
        magBadge.innerHTML = '🔍 Zoom: Fourths';
        magBadge.style.color = '#1d4ed8';
        magBadge.style.borderColor = '#bfdbfe';
        magBadge.style.background = '#eff6ff';
      } else if (step === 2) {
        row0.className = 'line-row dimmed';
        row1.className = 'line-row dimmed';
        row2.className = 'line-row';
        cone1.setAttribute('opacity', '0.45');
        cone2.setAttribute('opacity', '1');
        magBadge.innerHTML = '🔍 Zoom: Eighths';
        magBadge.style.color = '#e11d48';
        magBadge.style.borderColor = '#fecdd3';
        magBadge.style.background = '#fff1f2';
      }

      requestAnimationFrame(updateConnectors);
    }

    function nextStep() {
      setStep((currentStep + 1) % 3);
    }

    function startAutoPlay() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, 3200);
      isPlaying = true;
      playBtn.textContent = '⏸';
    }

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

    function togglePlay() {
      if (isPlaying) {
        stopAutoPlay();
      } else {
        startAutoPlay();
      }
    }

    window.addEventListener('resize', updateConnectors);

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="1:1">
  <title>Midpoint Method</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      background: #ffffff;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px 8px;
    }

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

    /* Controls */
    .controls {
      display: flex;
      align-items: center;
      gap: 6px;
      background: #f1f5f9;
      padding: 4px;
      border-radius: 20px;
    }

    .btn-step {
      border: none;
      background: transparent;
      padding: 5px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      border-radius: 16px;
      cursor: pointer;
      transition: all 0.25s ease;
    }

    .btn-step.active {
      background: #ffffff;
      color: #0f172a;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    }

    .play-btn {
      border: none;
      background: #ffffff;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      color: #2563eb;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      margin-left: 2px;
    }

    /* SVG Canvas */
    .svg-container {
      width: 100%;
      height: auto;
      overflow: visible;
    }

    /* Animated SVG Elements */
    .arc-path {
      fill: none;
      stroke: #f43f5e;
      stroke-width: 2.5;
      stroke-dasharray: 120;
      stroke-dashoffset: 120;
      stroke-linecap: round;
      transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .step-2 .arc-path,
    .step-3 .arc-path {
      stroke-dashoffset: 0;
    }

    .midpoint-node {
      opacity: 0;
      transform: scale(0.6);
      transform-origin: 140px 75px;
      transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .step-3 .midpoint-node {
      opacity: 1;
      transform: scale(1);
    }

    .glow-ring {
      animation: pulseGlow 2s infinite;
      transform-origin: 140px 75px;
    }

    @keyframes pulseGlow {
      0%, 100% { opacity: 0.3; transform: scale(1); }
      50% { opacity: 0.8; transform: scale(1.35); }
    }

    /* Math Formula Display */
    .math-card {
      width: 100%;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      font-size: 15px;
      font-weight: 600;
      color: #334155;
    }

    .frac {
      display: inline-flex;
      flex-direction: column;
      vertical-align: middle;
      text-align: center;
      padding: 0 3px;
      font-size: 0.9em;
      line-height: 1;
    }

    .frac-top {
      border-bottom: 1.5px solid currentColor;
      padding-bottom: 2px;
    }

    .frac-bot {
      padding-top: 2px;
    }

    .math-step {
      display: none;
      align-items: center;
      gap: 6px;
    }

    .math-step.active {
      display: inline-flex;
    }

    .c-blue { color: #2563eb; font-weight: 700; }
    .c-coral { color: #f43f5e; font-weight: 700; }
  </style>
</head>
<body>

  <div class="diagram-wrap">
    
    <div class="controls">
      <button class="btn-step active" onclick="setStep(1)">1. Bounds</button>
      <button class="btn-step" onclick="setStep(2)">2. Average</button>
      <button class="btn-step" onclick="setStep(3)">3. Midpoint</button>
      <button class="play-btn" id="playBtn" onclick="togglePlay()" aria-label="Play/Pause">⏸</button>
    </div>

    
    <svg id="nlSvg" class="svg-container step-1" viewBox="0 0 350 135">
      <defs>
        <filter id="coralGlow" x="-50%" y="-50%" width="200%" height="200%">
          <feGaussianBlur stdDeviation="3" result="blur" />
          <feMerge>
            <feMergeNode in="blur" />
            <feMergeNode in="SourceGraphic" />
          </feMerge>
        </filter>
      </defs>

      
      <line x1="30" y1="75" x2="320" y2="75" stroke="#cbd5e1" stroke-width="3" stroke-linecap="round" />

      
      
      <line x1="70" y1="71" x2="70" y2="79" stroke="#94a3b8" stroke-width="1.5" />
      <line x1="210" y1="71" x2="210" y2="79" stroke="#94a3b8" stroke-width="1.5" />
      <line x1="245" y1="71" x2="245" y2="79" stroke="#94a3b8" stroke-width="1.5" />
      <line x1="280" y1="71" x2="280" y2="79" stroke="#94a3b8" stroke-width="1.5" />

      
      <line x1="35" y1="67" x2="35" y2="83" stroke="#64748b" stroke-width="2" />
      <text x="35" y="102" text-anchor="middle" font-size="13" font-weight="600" fill="#64748b">0</text>

      <line x1="315" y1="67" x2="315" y2="83" stroke="#64748b" stroke-width="2" />
      <text x="315" y="102" text-anchor="middle" font-size="13" font-weight="600" fill="#64748b">1</text>

      
      <path class="arc-path" d="M 105 67 C 105 28, 140 28, 140 46" />
      <path class="arc-path" d="M 175 67 C 175 28, 140 28, 140 46" />
      <circle cx="140" cy="46" r="3.5" fill="#f43f5e" />

      
      <g>
        <line x1="105" y1="63" x2="105" y2="87" stroke="#2563eb" stroke-width="2.5" />
        <circle cx="105" cy="75" r="5.5" fill="#2563eb" />
        <text x="105" y="100" text-anchor="middle" font-size="14" font-weight="700" fill="#2563eb">¼</text>
        <text x="105" y="116" text-anchor="middle" font-size="11" font-weight="600" fill="#64748b">(2/8)</text>
      </g>

      
      <g>
        <line x1="175" y1="63" x2="175" y2="87" stroke="#2563eb" stroke-width="2.5" />
        <circle cx="175" cy="75" r="5.5" fill="#2563eb" />
        <text x="175" y="100" text-anchor="middle" font-size="14" font-weight="700" fill="#2563eb">½</text>
        <text x="175" y="116" text-anchor="middle" font-size="11" font-weight="600" fill="#64748b">(4/8)</text>
      </g>

      
      <g class="midpoint-node">
        <circle class="glow-ring" cx="140" cy="75" r="9" fill="#f43f5e" />
        <line x1="140" y1="61" x2="140" y2="89" stroke="#f43f5e" stroke-width="2.5" />
        <circle cx="140" cy="75" r="6" fill="#f43f5e" filter="url(#coralGlow)" />
        <circle cx="140" cy="75" r="2.5" fill="#ffffff" />
        <text x="140" y="101" text-anchor="middle" font-size="15" font-weight="800" fill="#f43f5e">⅜</text>
      </g>
    </svg>

    
    <div class="math-card">
      <div id="m1" class="math-step active">
        <span>Find number between <span class="c-blue">¼</span> and <span class="c-blue">½</span></span>
      </div>

      <div id="m2" class="math-step">
        <div class="frac">
          <div class="frac-top"><span class="c-blue">2/8</span> + <span class="c-blue">4/8</span></div>
          <div class="frac-bot">2</div>
        </div>
        <span>=</span>
        <div class="frac">
          <div class="frac-top">6/8</div>
          <div class="frac-bot">2</div>
        </div>
      </div>

      <div id="m3" class="math-step">
        <div class="frac">
          <div class="frac-top"><span class="c-blue">¼</span> + <span class="c-blue">½</span></div>
          <div class="frac-bot">2</div>
        </div>
        <span>=</span>
        <span class="c-coral" style="font-size: 1.25em;">⅜</span>
      </div>
    </div>
  </div>

  <script>
    let step = 1;
    let playing = true;
    let timer = null;

    const svg = document.getElementById('nlSvg');
    const btns = document.querySelectorAll('.btn-step');
    const mathSteps = [
      document.getElementById('m1'),
      document.getElementById('m2'),
      document.getElementById('m3')
    ];
    const playBtn = document.getElementById('playBtn');

    function setStep(s) {
      step = s;
      svg.className.baseVal = `svg-container step-${s}`;
      btns.forEach((b, i) => b.classList.toggle('active', i === s - 1));
      mathSteps.forEach((m, i) => m.classList.toggle('active', i === s - 1));
    }

    function autoStep() {
      step = (step % 3) + 1;
      setStep(step);
    }

    function startCycle() {
      clearInterval(timer);
      timer = setInterval(autoStep, 3500);
      playing = true;
      playBtn.textContent = '⏸';
    }

    function stopCycle() {
      clearInterval(timer);
      playing = false;
      playBtn.textContent = '▶';
    }

    function togglePlay() {
      if (playing) stopCycle();
      else { autoStep(); startCycle(); }
    }

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <link rel="stylesheet" href="{{VENDOR_CDN}}/katex.min.css">
  <script src="{{VENDOR_CDN}}/katex.min.js"></script>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: #ffffff;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      user-select: none;
    }

    /* Variable Mapping Pills */
    .mapping-row {
      display: flex;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .var-chip {
      padding: 4px 10px;
      border-radius: 999px;
      font-weight: 700;
      font-size: 14px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      border: 1.5px solid transparent;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .var-a { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
    .var-b { background: #fffbeb; color: #b45309; border-color: #fde68a; }
    .var-c { background: #faf5ff; color: #7e22ce; border-color: #e9d5ff; }
    .var-d { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
    .var-chip.active {
      box-shadow: 0 0 0 2px currentColor;
    }

    /* Side by Side Grid */
    .comparison-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    @media (max-width: 480px) {
      .comparison-grid {
        grid-template-columns: 1fr;
      }
    }

    .panel-box {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      min-height: 120px;
      justify-content: center;
      text-align: center;
    }
    .panel-title {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
    }
    .math-display {
      font-size: 18px;
      line-height: 1.4;
    }

    /* Step Timeline Controls */
    .controls {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
    }
    .step-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #334155;
      padding: 4px 12px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.15s ease;
    }
    .step-btn.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
    }

    /* Closure Checklist */
    .checklist {
      display: flex;
      flex-direction: column;
      gap: 6px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 14px;
    }
    .check-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      padding: 3px 0;
      border-bottom: 1px dashed #e2e8f0;
    }
    .check-item:last-child {
      border-bottom: none;
      color: #047857;
      font-weight: 700;
    }
    .check-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #dcfce7;
      color: #15803d;
      font-size: 12px;
      font-weight: 800;
    }

    /* Math Color Classes */
    .c-a { color: #1d4ed8; font-weight: 700; }
    .c-b { color: #b45309; font-weight: 700; }
    .c-c { color: #7e22ce; font-weight: 700; }
    .c-d { color: #047857; font-weight: 700; }
    .highlight-focus {
      border-radius: 4px;
      padding: 0 2px;
      outline: 2px solid #3b82f6;
      background: #eff6ff;
    }
  </style>
</head>
<body>

  
  <div class="mapping-row">
    <div class="var-chip var-a" data-var="a"><span>a = 2</span></div>
    <div class="var-chip var-b" data-var="b"><span>b = 3</span></div>
    <div class="var-chip var-c" data-var="c"><span>c = 4</span></div>
    <div class="var-chip var-d" data-var="d"><span>d = 5</span></div>
  </div>

  
  <div class="comparison-grid">
    <div class="panel-box">
      <div class="panel-title">Algebraic Formula</div>
      <div class="math-display" id="algMath"></div>
    </div>
    <div class="panel-box">
      <div class="panel-title">Concrete Values</div>
      <div class="math-display" id="numMath"></div>
    </div>
  </div>

  
  <div class="controls">
    <button class="step-btn active" data-step="0">1. Fractions</button>
    <button class="step-btn" data-step="1">2. Substitute</button>
    <button class="step-btn" data-step="2">3. Simplify</button>
  </div>

  
  <div class="checklist">
    <div class="check-item">
      <span id="chk1">Numerator: 22 is an integer</span>
      <span class="check-badge">✓</span>
    </div>
    <div class="check-item">
      <span id="chk2">Denominator: 15 is a non-zero integer</span>
      <span class="check-badge">✓</span>
    </div>
    <div class="check-item">
      <span id="chk3">Result: 22/15 is rational</span>
      <span class="check-badge">✓</span>
    </div>
  </div>

  <script>
    const stepsData = [
      {
        alg: "\\frac{\\textcolor{#1d4ed8}{a}}{\\textcolor{#b45309}{b}} + \\frac{\\textcolor{#7e22ce}{c}}{\\textcolor{#047857}{d}}",
        num: "\\frac{\\textcolor{#1d4ed8}{2}}{\\textcolor{#b45309}{3}} + \\frac{\\textcolor{#7e22ce}{4}}{\\textcolor{#047857}{5}}"
      },
      {
        alg: "\\frac{\\textcolor{#1d4ed8}{a}\\textcolor{#047857}{d} + \\textcolor{#b45309}{b}\\textcolor{#7e22ce}{c}}{\\textcolor{#b45309}{b}\\textcolor{#047857}{d}}",
        num: "\\frac{(\\textcolor{#1d4ed8}{2})(\\textcolor{#047857}{5}) + (\\textcolor{#b45309}{3})(\\textcolor{#7e22ce}{4})}{(\\textcolor{#b45309}{3})(\\textcolor{#047857}{5})}"
      },
      {
        alg: "\\frac{\\text{integer}}{\\text{non-zero integer}}",
        num: "\\frac{10 + 12}{15} = \\frac{22}{15}"
      }
    ];

    let currentStep = 1;

    function renderStep(idx) {
      currentStep = idx;
      document.querySelectorAll('.step-btn').forEach((btn, i) => {
        btn.classList.toggle('active', i === idx);
      });

      const algEl = document.getElementById('algMath');
      const numEl = document.getElementById('numMath');

      if (window.katex) {
        katex.render(stepsData[idx].alg, algEl, { throwOnError: false });
        katex.render(stepsData[idx].num, numEl, { throwOnError: false });
      } else {
        algEl.textContent = idx === 1 ? '(ad + bc) / bd' : 'a/b + c/d';
        numEl.textContent = idx === 1 ? '((2)(5)+(3)(4)) / (3)(5)' : (idx === 2 ? '22/15' : '2/3 + 4/5');
      }
    }

    // Step button interactions
    document.querySelectorAll('.step-btn').forEach(btn => {
      btn.addEventListener('click', () => {
        const step = parseInt(btn.dataset.step, 10);
        renderStep(step);
      });
    });

    // Chip highlights
    document.querySelectorAll('.var-chip').forEach(chip => {
      chip.addEventListener('click', () => {
        const wasActive = chip.classList.contains('active');
        document.querySelectorAll('.var-chip').forEach(c => c.classList.remove('active'));
        if (!wasActive) chip.classList.add('active');
      });
    });

    // Initial render
    window.addEventListener('load', () => renderStep(1));
  </script>
</body>
</html>

Proving the Sum of Two Rational Numbers is Rational

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

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

    .title {
      font-size: 17px;
      font-weight: 700;
      color: #1e2945;
      margin-bottom: 20px;
      letter-spacing: -0.01em;
      text-align: center;
    }

    .fraction-anatomy {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 16px;
      max-width: 480px;
      width: 100%;
      margin-bottom: 24px;
    }

    .label-col {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      height: 120px;
    }

    .label-box {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 10px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      line-height: 1.3;
      transition: all 0.25s ease;
    }

    .label-box.active {
      background: #eff6ff;
      border-color: #93c5fd;
      color: #1d4ed8;
      box-shadow: 0 2px 6px rgba(37, 99, 235, 0.08);
    }

    .label-box span {
      display: block;
      font-size: 11px;
      font-weight: 500;
      color: #64748b;
    }

    .label-box.active span {
      color: #3b82f6;
    }

    .center-fraction {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 24px;
      min-width: 90px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    }

    .numerator, .denominator {
      font-size: 34px;
      font-weight: 700;
      color: #2563eb;
      line-height: 1.1;
      transition: color 0.2s ease;
    }

    .fraction-bar {
      width: 100%;
      height: 3px;
      background: #1e2945;
      border-radius: 2px;
      margin: 4px 0;
    }

    .arrow-col {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      height: 120px;
      color: #94a3b8;
      font-size: 18px;
    }

    .examples-header {
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #64748b;
      margin-bottom: 8px;
    }

    .examples-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
      width: 100%;
      max-width: 480px;
    }

    .badge {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: all 0.2s ease;
    }

    .badge:hover {
      border-color: #93c5fd;
      background: #f8fafc;
    }

    .badge.active {
      border-color: #2563eb;
      background: #eff6ff;
      color: #1d4ed8;
      box-shadow: 0 2px 8px rgba(37, 99, 235, 0.12);
    }

    .badge-sub {
      font-size: 11px;
      font-weight: 500;
      color: #64748b;
    }

    .badge.active .badge-sub {
      color: #2563eb;
    }

    @media (max-width: 420px) {
      .fraction-anatomy {
        gap: 8px;
      }
      .label-box {
        font-size: 11px;
        padding: 4px 6px;
      }
      .label-box span {
        font-size: 10px;
      }
      .numerator, .denominator {
        font-size: 28px;
      }
      .center-fraction {
        padding: 8px 16px;
        min-width: 76px;
      }
      .badge {
        font-size: 12px;
        padding: 6px 10px;
      }
    }
  </style>
</head>
<body>

  <div class="title">Rational Number Definition</div>

  <div class="fraction-anatomy">
    
    <div class="center-fraction">
      <div class="numerator" id="numDisplay">a</div>
      <div class="fraction-bar"></div>
      <div class="denominator" id="denDisplay">b</div>
    </div>

    
    <div class="arrow-col">
      <div>←</div>
      <div>←</div>
    </div>

    
    <div class="label-col">
      <div class="label-box active" id="labelNum">
        Integer (a)
        <span>Any whole number or negative</span>
      </div>
      <div class="label-box active" id="labelDen">
        Non-zero Integer (b)
        <span>b ≠ 0</span>
      </div>
    </div>
  </div>

  <div class="examples-header">Tap to test examples</div>

  <div class="examples-grid">
    <button class="badge active" onclick="showFraction('3', '4', 0)">
      <span>3/4</span>
      <span class="badge-sub">Fraction</span>
    </button>
    <button class="badge" onclick="showFraction('-5', '1', 1)">
      <span>-5/1 = -5</span>
      <span class="badge-sub">Integer</span>
    </button>
    <button class="badge" onclick="showFraction('1', '5', 2)">
      <span>0.2 = 1/5</span>
      <span class="badge-sub">Decimal</span>
    </button>
  </div>

  <script>
    const examples = [
      { a: '3', b: '4' },
      { a: '-5', b: '1' },
      { a: '1', b: '5' }
    ];

    function showFraction(a, b, index) {
      document.getElementById('numDisplay').textContent = a;
      document.getElementById('denDisplay').textContent = b;

      const badges = document.querySelectorAll('.badge');
      badges.forEach((badge, idx) => {
        if (idx === index) {
          badge.classList.add('active');
        } else {
          badge.classList.remove('active');
        }
      });
    }
  </script>
</body>
</html>

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

    /* Step Navigation Tabs */
    .tabs {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 480px;
      margin-bottom: 12px;
    }
    .tab {
      flex: 1;
      text-align: center;
      padding: 8px 4px;
      font-size: 13px;
      font-weight: 600;
      color: #6b7280;
      background: #f1f5f9;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.25s ease;
    }
    .tab.active {
      color: #0284c7;
      background: #e0f2fe;
      box-shadow: 0 0 0 2px #38bdf8;
    }

    /* Stage Container */
    .stage {
      position: relative;
      width: 100%;
      max-width: 520px;
      height: 250px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .step-card {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transform: translateY(8px);
      pointer-events: none;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    .step-card.active {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    /* Math Typography */
    .math-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      font-size: 24px;
      font-weight: 600;
      color: #0f172a;
    }

    .fraction {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      vertical-align: middle;
      padding: 0 4px;
    }
    .num {
      padding: 2px 8px;
      border-bottom: 2px solid #1e2945;
      text-align: center;
      display: block;
      border-radius: 4px 4px 0 0;
      transition: background 0.3s ease;
    }
    .den {
      padding: 2px 8px;
      text-align: center;
      display: block;
      border-radius: 0 0 4px 4px;
      transition: background 0.3s ease;
    }

    /* Badges & Tags */
    .tag-group {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: center;
      margin-top: 18px;
    }
    .badge {
      font-size: 13px;
      font-weight: 600;
      padding: 6px 12px;
      border-radius: 999px;
      border: 1px solid transparent;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .badge-slate {
      background: #f1f5f9;
      color: #475569;
      border-color: #cbd5e1;
    }
    .badge-green {
      background: #ecfdf5;
      color: #065f46;
      border-color: #6ee7b7;
    }
    .badge-teal {
      background: #f0fdfa;
      color: #115e59;
      border-color: #5eead4;
    }
    .badge-blue {
      background: #eff6ff;
      color: #1e40af;
      border-color: #93c5fd;
    }

    /* Highlighted Numerator/Denominator in Step 3 */
    .num-highlight {
      background: #d1fae5;
      color: #065f46;
      box-shadow: 0 0 0 2px #10b981;
      border-radius: 6px;
    }
    .den-highlight {
      background: #ccfbf1;
      color: #0f766e;
      box-shadow: 0 0 0 2px #14b8a6;
      border-radius: 6px;
      margin-top: 2px;
    }

    /* Conclusion Result Banner */
    .result-box {
      background: linear-gradient(135deg, #f0fdf4, #e0f2fe);
      border: 2px solid #38bdf8;
      border-radius: 12px;
      padding: 16px 20px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }
    .result-title {
      font-size: 20px;
      font-weight: 700;
      color: #0369a1;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    /* Controls Bottom Bar */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
      margin-top: 8px;
    }
    .btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #334155;
      padding: 8px 16px;
      font-size: 14px;
      font-weight: 600;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.15s ease;
    }
    .btn:hover {
      background: #f8fafc;
    }
    .btn-play {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
    }
    .btn-play:hover {
      background: #0369a1;
    }
  </style>
</head>
<body>

  
  <div class="tabs">
    <div class="tab active" onclick="setStep(0)">1. Definitions</div>
    <div class="tab" onclick="setStep(1)">2. Common Denominator</div>
    <div class="tab" onclick="setStep(2)">3. Closure Proof</div>
    <div class="tab" onclick="setStep(3)">4. Conclusion</div>
  </div>

  
  <div class="stage">

    
    <div class="step-card active" id="card-0">
      <div class="math-row">
        <span>x + y</span>
        <span>=</span>
        <div class="fraction">
          <span class="num">a</span>
          <span class="den">b</span>
        </div>
        <span>+</span>
        <div class="fraction">
          <span class="num">c</span>
          <span class="den">d</span>
        </div>
      </div>
      <div class="tag-group">
        <span class="badge badge-slate">a, b, c, d ∈ Integers</span>
        <span class="badge badge-slate">b ≠ 0, d ≠ 0</span>
      </div>
    </div>

    
    <div class="step-card" id="card-1">
      <div class="math-row">
        <span>=</span>
        <div class="fraction">
          <span class="num">a · d</span>
          <span class="den">b · d</span>
        </div>
        <span>+</span>
        <div class="fraction">
          <span class="num">b · c</span>
          <span class="den">b · d</span>
        </div>
      </div>
      <div class="tag-group">
        <span class="badge badge-blue">Multiply by d/d and b/b</span>
      </div>
    </div>

    
    <div class="step-card" id="card-2">
      <div class="math-row">
        <span>=</span>
        <div class="fraction" style="font-size: 26px;">
          <span class="num num-highlight">ad + bc</span>
          <span class="den den-highlight">bd</span>
        </div>
      </div>
      <div class="tag-group" style="max-width: 440px;">
        <span class="badge badge-green">Top: Integer (closed under ×, +)</span>
        <span class="badge badge-teal">Bottom: Non-zero Integer (b, d ≠ 0)</span>
      </div>
    </div>

    
    <div class="step-card" id="card-3">
      <div class="result-box">
        <div class="math-row">
          <div class="fraction" style="font-size: 20px;">
            <span class="num" style="border-bottom-color: #0284c7; color: #065f46; font-weight:700;">Integer</span>
            <span class="den" style="color: #0f766e; font-weight:700;">Non-zero Integer</span>
          </div>
          <span>=</span>
          <span style="color: #0284c7;">Rational</span>
        </div>
        <div class="result-title">
          <span>✓ Sum is always Rational</span>
        </div>
      </div>
    </div>

  </div>

  
  <div class="controls">
    <button class="btn" onclick="prevStep()">← Prev</button>
    <button class="btn btn-play" id="playBtn" onclick="togglePlay()">⏸ Pause</button>
    <button class="btn" onclick="nextStep()">Next →</button>
  </div>

  <script>
    let current = 0;
    const total = 4;
    let playing = true;
    let timer = null;

    const tabs = document.querySelectorAll('.tab');
    const cards = document.querySelectorAll('.step-card');
    const playBtn = document.getElementById('playBtn');

    function setStep(idx) {
      current = (idx + total) % total;
      tabs.forEach((t, i) => t.classList.toggle('active', i === current));
      cards.forEach((c, i) => c.classList.toggle('active', i === current));
    }

    function nextStep() {
      setStep(current + 1);
    }

    function prevStep() {
      setStep(current - 1);
    }

    function togglePlay() {
      playing = !playing;
      playBtn.textContent = playing ? '⏸ Pause' : '▶ Play';
      if (playing) startTimer();
      else clearInterval(timer);
    }

    function startTimer() {
      clearInterval(timer);
      timer = setInterval(() => {
        if (playing) nextStep();
      }, 3600);
    }

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

HSN.RN.B.3

Aligned learning resources

Related diagrams