<!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>Reciprocal Proof</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: transparent;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 340px;
    }

    /* Step Navigation Header */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      width: 100%;
      max-width: 350px;
    }
    .step-btn {
      flex: 1;
      padding: 6px 0;
      border: 1px solid #cbd5e1;
      background: #f8fafc;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      text-align: center;
      transition: all 0.2s ease;
    }
    .step-btn.active {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
      box-shadow: 0 2px 4px rgba(37, 99, 235, 0.25);
    }
    .play-btn {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #cbd5e1;
      background: #f8fafc;
      border-radius: 6px;
      font-size: 13px;
      cursor: pointer;
      color: #1e2945;
    }

    /* Main Stage */
    .stage {
      position: relative;
      width: 100%;
      max-width: 350px;
      height: 200px;
      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;
      pointer-events: none;
      transition: opacity 0.3s ease, transform 0.3s ease;
      transform: translateY(4px);
    }
    .step-card.active {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }

    /* Math Elements & Typography */
    .math-row {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      font-weight: 700;
      gap: 10px;
    }

    .frac {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      vertical-align: middle;
      padding: 0 4px;
    }
    .num, .den {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2px 4px;
    }
    .bar {
      width: 100%;
      height: 2.5px;
      background: #1e2945;
      border-radius: 2px;
      margin: 3px 0;
    }
    .bar-thick {
      height: 3.5px;
      background: #1e2945;
      margin: 4px 0;
    }

    /* Highlight Pills */
    .pill-yellow {
      background: #fef08a;
      border: 1.5px solid #eab308;
      color: #854d0e;
      border-radius: 6px;
      padding: 2px 6px;
      display: inline-flex;
      align-items: center;
    }
    .pill-green {
      background: #dcfce7;
      border: 1.5px solid #16a34a;
      color: #15803d;
      border-radius: 6px;
      padding: 2px 10px;
    }
    .pill-blue {
      background: #dbeafe;
      border: 1.5px solid #2563eb;
      color: #1d4ed8;
      border-radius: 6px;
      padding: 2px 8px;
    }

    .subtext {
      margin-top: 10px;
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
    }

    /* Bottom Explanation Tag */
    .bottom-tag {
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 12px;
      font-size: 13.5px;
      font-weight: 600;
      color: #1e2945;
      text-align: center;
      width: 100%;
      max-width: 350px;
    }
    .accent {
      color: #2563eb;
    }
  </style>
</head>
<body>

  
  <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()" title="Play/Pause">⏸</button>
  </div>

  
  <div class="stage">
    
    
    <div class="step-card active" id="step-0">
      <div class="math-row">
        <div class="frac">
          <div class="num" style="font-size: 32px;">6</div>
          <div class="bar bar-thick"></div>
          <div class="den">
            <div class="frac" style="font-size: 20px;">
              <div class="num">1</div>
              <div class="bar"></div>
              <div class="den">2</div>
            </div>
          </div>
        </div>
      </div>
      <div class="subtext">Original complex fraction: 6 ÷ ½</div>
    </div>

    
    <div class="step-card" id="step-1">
      <div class="math-row">
        <div class="frac">
          <div class="num">
            <span>6</span>
            <span style="margin: 0 4px; font-size: 18px;">×</span>
            <div class="pill-yellow">
              <div class="frac" style="font-size: 18px;">
                <div class="num">2</div>
                <div class="bar" style="background:#854d0e;"></div>
                <div class="den">1</div>
              </div>
            </div>
          </div>
          <div class="bar bar-thick"></div>
          <div class="den">
            <div class="frac" style="font-size: 18px;">
              <div class="num">1</div>
              <div class="bar"></div>
              <div class="den">2</div>
            </div>
            <span style="margin: 0 4px; font-size: 18px;">×</span>
            <div class="pill-yellow">
              <div class="frac" style="font-size: 18px;">
                <div class="num">2</div>
                <div class="bar" style="background:#854d0e;"></div>
                <div class="den">1</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="subtext">Multiply numerator & denominator by ⅖</div>
    </div>

    
    <div class="step-card" id="step-2">
      <div class="math-row">
        <div class="frac">
          <div class="num">
            <span>6</span>
            <span style="margin: 0 6px;">×</span>
            <span class="pill-blue" style="font-size: 22px;">2</span>
          </div>
          <div class="bar bar-thick"></div>
          <div class="den" style="padding-top: 4px;">
            <span class="pill-green" style="font-size: 22px;">1</span>
          </div>
        </div>
      </div>
      <div class="subtext">Denominator simplifies: ½ × ²⁄₁ = 1</div>
    </div>

    
    <div class="step-card" id="step-3">
      <div class="math-row">
        <div class="frac">
          <div class="num" style="font-size: 28px;">12</div>
          <div class="bar bar-thick"></div>
          <div class="den" style="font-size: 24px;">1</div>
        </div>
        <span style="font-size: 30px; margin: 0 4px;">=</span>
        <span style="font-size: 38px; color: #2563eb; font-weight: 800;">12</span>
      </div>
      <div class="subtext">6 ÷ ½ = 6 × 2 = 12 servings</div>
    </div>

  </div>

  
  <div class="bottom-tag">
    Multiplying by the <span class="accent">reciprocal</span> clears the denominator to <span class="accent">1</span>!
  </div>

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

    const cards = [
      document.getElementById('step-0'),
      document.getElementById('step-1'),
      document.getElementById('step-2'),
      document.getElementById('step-3')
    ];
    const buttons = document.querySelectorAll('.step-btn');
    const playBtn = document.getElementById('playBtn');

    function setStep(index) {
      currentStep = index;
      cards.forEach((card, i) => {
        card.classList.toggle('active', i === currentStep);
      });
      buttons.forEach((btn, i) => {
        btn.classList.toggle('active', i === currentStep);
      });
    }

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

    function startAutoPlay() {
      stopAutoPlay();
      timer = setInterval(nextStep, 3600);
      isPlaying = true;
      playBtn.textContent = '⏸';
    }

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

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

    // Initialize auto play with comfortable pedagogical pacing
    startAutoPlay();
  </script>
</body>
</html>

Recognizing Division by a Rational Number as Multiplying by Its Reciprocal

<!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: #1e293b;
      background: transparent;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .main-wrap {
      width: 100%;
      max-width: 540px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      align-items: center;
    }

    /* Strategy Cards Row */
    .strategy-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
    }

    .card-box {
      flex: 1;
      max-width: 150px;
      padding: 12px 8px;
      border-radius: 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
      position: relative;
    }

    .card-keep {
      background: #f0fdf4;
      border: 2px solid #86efac;
    }

    .card-change {
      background: #f0f9ff;
      border: 2px solid #7dd3fc;
    }

    .card-flip {
      background: #fff7ed;
      border: 2px solid #fdba74;
    }

    .card-label {
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.05em;
      margin-bottom: 8px;
    }

    .card-keep .card-label { color: #16a34a; }
    .card-change .card-label { color: #0284c7; }
    .card-flip .card-label { color: #ea580c; }

    /* Fraction display */
    .frac {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      vertical-align: middle;
      font-weight: 700;
      font-size: 22px;
      line-height: 1.1;
    }
    .frac .num { padding: 0 4px; }
    .frac .den { border-top: 2px solid currentColor; padding: 0 4px; }

    /* Change Symbol */
    .sym-change {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 24px;
      font-weight: 800;
      color: #0284c7;
    }
    .pulse-circle {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: #bae6fd;
      display: flex;
      align-items: center;
      justify-content: center;
      animation: pulseAnim 2s infinite ease-in-out;
    }
    @keyframes pulseAnim {
      0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(2, 132, 199, 0.3); }
      50% { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(2, 132, 199, 0); }
    }

    /* Flip Transition */
    .flip-group {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .flip-arrow-svg {
      width: 24px;
      height: 32px;
      color: #ea580c;
    }

    /* Active Highlight States */
    .active-step {
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
      transform: translateY(-2px);
    }
    .dimmed {
      opacity: 0.45;
    }

    /* Computation Bar */
    .calc-bar {
      width: 100%;
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      font-size: 20px;
      font-weight: 700;
      color: #334155;
      flex-wrap: wrap;
    }

    .green-txt { color: #16a34a; }
    .orange-txt { color: #ea580c; }
    .blue-txt { color: #0284c7; }

    /* Controls */
    .stepper-nav {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .btn-step {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      border-radius: 8px;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: background 0.2s;
    }
    .btn-step:hover {
      background: #f1f5f9;
    }
    .btn-step.active {
      background: #1e293b;
      color: #ffffff;
      border-color: #1e293b;
    }

    @media (max-width: 420px) {
      .strategy-row { gap: 6px; }
      .card-box { padding: 8px 4px; }
      .frac { font-size: 18px; }
      .card-label { font-size: 11px; }
      .calc-bar { font-size: 16px; gap: 8px; padding: 10px; }
      .pulse-circle { width: 36px; height: 36px; }
    }
  </style>
</head>
<body>
  <div class="main-wrap">
    
    <div class="strategy-row">
      
      <div id="card1" class="card-box card-keep active-step">
        <div class="card-label">1. KEEP</div>
        <div class="frac green-txt">
          <span class="num">3</span>
          <span class="den">4</span>
        </div>
      </div>

      
      <div id="card2" class="card-box card-change">
        <div class="card-label">2. CHANGE</div>
        <div class="pulse-circle">
          <span class="sym-change">×</span>
        </div>
      </div>

      
      <div id="card3" class="card-box card-flip">
        <div class="card-label">3. FLIP</div>
        <div class="flip-group">
          <div class="frac orange-txt dimmed" id="origFraction" style="font-size: 16px;">
            <span class="num">2</span>
            <span class="den">5</span>
          </div>
          <svg class="flip-arrow-svg" viewBox="0 0 24 32" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
            <path d="M7 8 C17 8 17 24 7 24" />
            <polyline points="10 5 6 8 10 11" />
            <polyline points="10 21 6 24 10 27" />
          </svg>
          <div class="frac orange-txt">
            <span class="num">5</span>
            <span class="den">2</span>
          </div>
        </div>
      </div>
    </div>

    
    <div class="calc-bar" id="calcBar">
      <div class="frac">
        <span class="num green-txt">3</span>
        <span class="den green-txt">4</span>
      </div>
      <span class="blue-txt">×</span>
      <div class="frac">
        <span class="num orange-txt">5</span>
        <span class="den orange-txt">2</span>
      </div>
      <span>=</span>
      <div class="frac">
        <span class="num"><span class="green-txt">3</span> × <span class="orange-txt">5</span></span>
        <span class="den"><span class="green-txt">4</span> × <span class="orange-txt">2</span></span>
      </div>
      <span>=</span>
      <div class="frac">
        <span class="num">15</span>
        <span class="den">8</span>
      </div>
      <span>=</span>
      <span>1 <span class="frac"><span class="num">7</span><span class="den">8</span></span></span>
    </div>

    
    <div class="stepper-nav">
      <button class="btn-step" id="btnAll" onclick="setStep(0)">All Steps</button>
      <button class="btn-step active" id="btn1" onclick="setStep(1)">1. Keep</button>
      <button class="btn-step" id="btn2" onclick="setStep(2)">2. Change</button>
      <button class="btn-step" id="btn3" onclick="setStep(3)">3. Flip</button>
      <button class="btn-step" id="btnAuto" onclick="toggleAuto()">▶</button>
    </div>
  </div>

  <script>
    let currentStep = 1;
    let autoTimer = null;

    function setStep(step) {
      currentStep = step;
      const c1 = document.getElementById('card1');
      const c2 = document.getElementById('card2');
      const c3 = document.getElementById('card3');
      const bAll = document.getElementById('btnAll');
      const b1 = document.getElementById('btn1');
      const b2 = document.getElementById('btn2');
      const b3 = document.getElementById('btn3');

      // Reset active button styles
      [bAll, b1, b2, b3].forEach(b => b.classList.remove('active'));

      if (step === 0) {
        bAll.classList.add('active');
        [c1, c2, c3].forEach(c => {
          c.classList.remove('dimmed');
          c.classList.add('active-step');
        });
      } else {
        if (step === 1) b1.classList.add('active');
        if (step === 2) b2.classList.add('active');
        if (step === 3) b3.classList.add('active');

        c1.classList.toggle('active-step', step === 1);
        c1.classList.toggle('dimmed', step !== 1);

        c2.classList.toggle('active-step', step === 2);
        c2.classList.toggle('dimmed', step !== 2);

        c3.classList.toggle('active-step', step === 3);
        c3.classList.toggle('dimmed', step !== 3);
      }
    }

    function toggleAuto() {
      const btn = document.getElementById('btnAuto');
      if (autoTimer) {
        clearInterval(autoTimer);
        autoTimer = null;
        btn.textContent = '▶';
      } else {
        btn.textContent = '⏸';
        autoTimer = setInterval(() => {
          let next = (currentStep + 1) % 4;
          setStep(next === 0 ? 1 : next);
        }, 3000);
      }
    }

    // Initialize Step 1
    setStep(1);
  </script>
</body>
</html>

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

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

    .main-grid {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      max-width: 580px;
      gap: 16px;
    }

    /* Pizza grid */
    .pizzas-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      width: 100%;
      max-width: 380px;
      justify-items: center;
    }

    .pizza-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }

    .pizza {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      border: 3px solid #d1d5db;
      display: flex;
      overflow: hidden;
      box-shadow: 0 3px 8px rgba(30, 41, 69, 0.08);
      background: #ffffff;
      position: relative;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .half {
      flex: 1;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 700;
      color: #1e2945;
      user-select: none;
      position: relative;
    }

    .half.orange {
      background: #fed7aa;
      border-right: 1.5px dashed rgba(30, 41, 69, 0.25);
    }

    .half.teal {
      background: #99f6e4;
      border-left: 1.5px dashed rgba(30, 41, 69, 0.25);
    }

    /* Comparison cards */
    .models-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
    }

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

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

    .badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 4px 10px;
      border-radius: 9999px;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.02em;
    }

    .badge-div {
      background: #ffedd5;
      color: #c2410c;
    }

    .badge-mul {
      background: #ccfbf1;
      color: #0f766e;
    }

    .formula {
      font-size: 17px;
      font-weight: 700;
      color: #1e2945;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .fraction {
      display: inline-flex;
      flex-direction: column;
      vertical-align: middle;
      text-align: center;
      font-size: 14px;
      line-height: 1;
      margin: 0 2px;
    }

    .fraction-top {
      border-bottom: 1.5px solid #1e2945;
      padding-bottom: 1px;
    }

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

    .equal-sign {
      font-size: 26px;
      font-weight: 800;
      color: #22b7ff;
      user-select: none;
    }

    .result-pill {
      background: #f1f5f9;
      padding: 4px 12px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
    }

    /* Small screens adjustments */
    @media (max-width: 400px) {
      .pizza {
        width: 66px;
        height: 66px;
      }
      .half {
        font-size: 11px;
      }
      .formula {
        font-size: 15px;
      }
      .badge {
        font-size: 12px;
        padding: 3px 8px;
      }
    }
  </style>
</head>
<body>

  <div class="main-grid">
    
    <div class="pizzas-container" id="pizzaGrid">
      <div class="pizza-item">
        <div class="pizza">
          <div class="half orange">1</div>
          <div class="half teal">2</div>
        </div>
      </div>
      <div class="pizza-item">
        <div class="pizza">
          <div class="half orange">3</div>
          <div class="half teal">4</div>
        </div>
      </div>
      <div class="pizza-item">
        <div class="pizza">
          <div class="half orange">5</div>
          <div class="half teal">6</div>
        </div>
      </div>
      <div class="pizza-item">
        <div class="pizza">
          <div class="half orange">7</div>
          <div class="half teal">8</div>
        </div>
      </div>
      <div class="pizza-item">
        <div class="pizza">
          <div class="half orange">9</div>
          <div class="half teal">10</div>
        </div>
      </div>
      <div class="pizza-item">
        <div class="pizza">
          <div class="half orange">11</div>
          <div class="half teal">12</div>
        </div>
      </div>
    </div>

    
    <div class="models-row">
      
      <div class="model-card active" id="divCard">
        <span class="badge badge-div">÷ <span class="fraction"><span class="fraction-top">1</span><span class="fraction-bottom">2</span></span></span>
        <div class="formula">
          6 ÷ <span class="fraction"><span class="fraction-top">1</span><span class="fraction-bottom">2</span></span> = 12
        </div>
        <span class="result-pill">12 servings</span>
      </div>

      <div class="equal-sign">=</div>

      
      <div class="model-card active" id="mulCard">
        <span class="badge badge-mul">× 2</span>
        <div class="formula">
          6 × 2 = 12
        </div>
        <span class="result-pill">12 servings</span>
      </div>
    </div>
  </div>

  <script>
    const divCard = document.getElementById('divCard');
    const mulCard = document.getElementById('mulCard');
    const orangeHalves = document.querySelectorAll('.half.orange');
    const tealHalves = document.querySelectorAll('.half.teal');

    function highlightDivision() {
      divCard.classList.add('active');
      mulCard.classList.remove('active');
      orangeHalves.forEach(el => el.style.opacity = '1');
      tealHalves.forEach(el => el.style.opacity = '1');
    }

    function highlightMultiplication() {
      mulCard.classList.add('active');
      divCard.classList.remove('active');
      orangeHalves.forEach(el => el.style.opacity = '1');
      tealHalves.forEach(el => el.style.opacity = '1');
    }

    divCard.addEventListener('click', () => {
      divCard.classList.add('active');
      mulCard.classList.add('active');
    });

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <title>Fraction Reciprocals</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: transparent;
      padding: 12px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }
    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      width: 100%;
      max-width: 660px;
    }
    @media (max-width: 540px) {
      .grid {
        grid-template-columns: 1fr;
        gap: 10px;
      }
    }
    .box {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 14px;
      padding: 14px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 2px 6px rgba(30, 41, 69, 0.04);
      position: relative;
    }
    .badge-row {
      display: flex;
      justify-content: space-between;
      width: 100%;
      padding: 0 4px 6px;
    }
    .badge {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 3px 8px;
      border-radius: 6px;
    }
    .badge-orig {
      background: #f1f5f9;
      color: #475569;
    }
    .badge-recip {
      background: #e0f2fe;
      color: #0284c7;
    }
    .swap-stage {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin: 8px 0;
      width: 100%;
    }
    .frac-unit {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-weight: 700;
      color: #1e2945;
      line-height: 1;
      min-width: 28px;
    }
    .frac-top {
      padding-bottom: 2px;
      transition: color 0.3s ease;
    }
    .frac-bar {
      width: 100%;
      height: 2px;
      background: #1e2945;
      border-radius: 2px;
      margin: 2px 0;
    }
    .frac-bot {
      padding-top: 2px;
      transition: color 0.3s ease;
    }
    .num-a {
      color: #0284c7;
    }
    .num-b {
      color: #d97706;
    }
    .swap-arrow {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      position: relative;
    }
    .swap-arrow svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .equiv-note {
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      margin-bottom: 4px;
    }
    .product-row {
      width: 100%;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 8px;
      text-align: center;
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
      margin-top: 4px;
    }
    .product-row strong {
      color: #059669;
      font-weight: 800;
      background: #d1fae5;
      padding: 1px 6px;
      border-radius: 4px;
      margin-left: 2px;
    }
    .controls {
      display: flex;
      gap: 8px;
      margin-top: 14px;
    }
    .flip-btn {
      background: #0284c7;
      color: #ffffff;
      border: none;
      font-size: 13px;
      font-weight: 600;
      padding: 6px 16px;
      border-radius: 20px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: background 0.2s ease;
    }
    .flip-btn:hover {
      background: #0369a1;
    }
    .flip-btn:active {
      transform: translateY(1px);
    }
    .curved-path {
      stroke-dasharray: 40;
      stroke-dashoffset: 0;
      transition: stroke-dashoffset 0.5s ease;
    }
    .animating .curved-path {
      animation: dash 1s ease infinite;
    }
    @keyframes dash {
      0% { stroke-dashoffset: 40; }
      100% { stroke-dashoffset: 0; }
    }
  </style>
</head>
<body>

  <div class="grid">
    
    <div class="box">
      <div class="badge-row">
        <span class="badge badge-orig">Original</span>
        <span class="badge badge-recip">Reciprocal</span>
      </div>

      <div class="swap-stage">
        <div class="frac-unit">
          <span class="frac-top num-a">3</span>
          <span class="frac-bar"></span>
          <span class="frac-bot num-b">4</span>
        </div>

        <div class="swap-arrow">
          <svg viewBox="0 0 36 36">
            
            <path class="curved-path" d="M 6,10 C 18,4 24,14 28,24" fill="none" stroke="#0284c7" stroke-width="2" stroke-linecap="round"/>
            <polygon points="30,26 25,23 29,20" fill="#0284c7" />
            
            <path class="curved-path" d="M 6,26 C 18,32 24,22 28,12" fill="none" stroke="#d97706" stroke-width="2" stroke-linecap="round"/>
            <polygon points="30,10 29,16 25,13" fill="#d97706" />
          </svg>
        </div>

        <div class="frac-unit">
          <span class="frac-top num-b">4</span>
          <span class="frac-bar"></span>
          <span class="frac-bot num-a">3</span>
        </div>
      </div>

      <div class="product-row">
        <span style="white-space: nowrap;">(<sup>3</sup>/<sub>4</sub>) × (<sup>4</sup>/<sub>3</sub>) = <sup>12</sup>/<sub>12</sub> =</span>
        <strong>1</strong>
      </div>
    </div>

    
    <div class="box">
      <div class="badge-row">
        <span class="badge badge-orig">Original</span>
        <span class="badge badge-recip">Reciprocal</span>
      </div>

      <div class="equiv-note">5 = <sup>5</sup>/<sub>1</sub></div>

      <div class="swap-stage">
        <div class="frac-unit">
          <span class="frac-top num-a">5</span>
          <span class="frac-bar"></span>
          <span class="frac-bot num-b">1</span>
        </div>

        <div class="swap-arrow">
          <svg viewBox="0 0 36 36">
            <path class="curved-path" d="M 6,10 C 18,4 24,14 28,24" fill="none" stroke="#0284c7" stroke-width="2" stroke-linecap="round"/>
            <polygon points="30,26 25,23 29,20" fill="#0284c7" />
            <path class="curved-path" d="M 6,26 C 18,32 24,22 28,12" fill="none" stroke="#d97706" stroke-width="2" stroke-linecap="round"/>
            <polygon points="30,10 29,16 25,13" fill="#d97706" />
          </svg>
        </div>

        <div class="frac-unit">
          <span class="frac-top num-b">1</span>
          <span class="frac-bar"></span>
          <span class="frac-bot num-a">5</span>
        </div>
      </div>

      <div class="product-row">
        <span style="white-space: nowrap;">5 × (<sup>1</sup>/<sub>5</sub>) = <sup>5</sup>/<sub>5</sub> =</span>
        <strong>1</strong>
      </div>
    </div>

    
    <div class="box">
      <div class="badge-row">
        <span class="badge badge-orig">Original</span>
        <span class="badge badge-recip">Reciprocal</span>
      </div>

      <div class="swap-stage">
        <span style="font-size:22px; font-weight:700; color:#1e2945; margin-right:-6px;">−</span>
        <div class="frac-unit">
          <span class="frac-top num-a">2</span>
          <span class="frac-bar"></span>
          <span class="frac-bot num-b">3</span>
        </div>

        <div class="swap-arrow">
          <svg viewBox="0 0 36 36">
            <path class="curved-path" d="M 6,10 C 18,4 24,14 28,24" fill="none" stroke="#0284c7" stroke-width="2" stroke-linecap="round"/>
            <polygon points="30,26 25,23 29,20" fill="#0284c7" />
            <path class="curved-path" d="M 6,26 C 18,32 24,22 28,12" fill="none" stroke="#d97706" stroke-width="2" stroke-linecap="round"/>
            <polygon points="30,10 29,16 25,13" fill="#d97706" />
          </svg>
        </div>

        <span style="font-size:22px; font-weight:700; color:#1e2945; margin-right:-6px;">−</span>
        <div class="frac-unit">
          <span class="frac-top num-b">3</span>
          <span class="frac-bar"></span>
          <span class="frac-bot num-a">2</span>
        </div>
      </div>

      <div class="product-row">
        <span style="white-space: nowrap;">(−<sup>2</sup>/<sub>3</sub>) × (−<sup>3</sup>/<sub>2</sub>) = <sup>6</sup>/<sub>6</sub> =</span>
        <strong>1</strong>
      </div>
    </div>
  </div>

  <div class="controls">
    <button class="flip-btn" id="animBtn" onclick="toggleSwap()">
      <span>⇄</span> Swap Numbers
    </button>
  </div>

  <script>
    let active = false;
    function toggleSwap() {
      active = !active;
      const paths = document.querySelectorAll('.swap-arrow');
      paths.forEach(el => {
        if (active) {
          el.classList.add('animating');
        } else {
          el.classList.remove('animating');
        }
      });
      const tops = document.querySelectorAll('.frac-top');
      const bots = document.querySelectorAll('.frac-bot');
      tops.forEach(t => t.style.transform = active ? 'translateY(1px)' : 'none');
      bots.forEach(b => b.style.transform = active ? 'translateY(-1px)' : 'none');
    }
  </script>
</body>
</html>

111.26(b)(3)(A)

Aligned learning resources

Related diagrams