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

    .controls {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: center;
      margin-bottom: 4px;
    }

    .btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: background 0.2s, box-shadow 0.2s, border-color 0.2s;
    }

    .btn:hover {
      background: #e2e8f0;
    }

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

    .stage {
      width: 100%;
      max-width: 480px;
      height: auto;
      flex-grow: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }

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

    /* SVG Elements Styling */
    .num, .den {
      font-size: 48px;
      font-weight: 800;
      fill: #1e2945;
      text-anchor: middle;
      dominant-baseline: central;
      transition: fill 0.3s ease, opacity 0.3s ease;
    }

    .frac-bar {
      stroke: #1e2945;
      stroke-width: 4.5;
      stroke-linecap: round;
      transition: opacity 0.3s ease;
    }

    .eq-sign {
      font-size: 42px;
      font-weight: 700;
      fill: #0ea5e9;
      text-anchor: middle;
      dominant-baseline: central;
      transition: opacity 0.4s ease, transform 0.4s ease;
    }

    .arrow-path {
      fill: none;
      stroke: #0284c7;
      stroke-width: 3.5;
      stroke-dasharray: 240;
      stroke-dashoffset: 240;
      transition: stroke-dashoffset 0.6s ease;
    }

    .arrow-head {
      fill: #0284c7;
      transition: opacity 0.3s ease;
    }

    .scale-pill {
      transition: opacity 0.4s ease, transform 0.4s ease;
    }

    .scale-bg {
      fill: #0284c7;
      rx: 14;
    }

    .scale-text {
      font-size: 15px;
      font-weight: 800;
      fill: #ffffff;
      text-anchor: middle;
      dominant-baseline: central;
    }

    /* States */
    .step-1 .frac-right,
    .step-1 .eq-sign,
    .step-1 .scale-pill,
    .step-1 .arrow-path,
    .step-1 .arrow-head,
    .step-1 .val-badge {
      opacity: 0.15;
    }

    .step-2 .frac-right,
    .step-2 .eq-sign,
    .step-2 .val-badge {
      opacity: 0.25;
    }

    .step-2 .arrow-path {
      stroke-dashoffset: 0;
    }

    .step-2 .scale-pill,
    .step-2 .arrow-head {
      opacity: 1;
    }

    .step-3 .arrow-path {
      stroke-dashoffset: 0;
    }

    .step-3 .frac-right,
    .step-3 .eq-sign,
    .step-3 .scale-pill,
    .step-3 .arrow-head,
    .step-3 .val-badge {
      opacity: 1;
    }

    .step-3 .frac-right .num,
    .step-3 .frac-right .den {
      fill: #059669;
    }

    .step-3 .frac-right .frac-bar {
      stroke: #059669;
    }

    /* Bottom Info Badge */
    .badge-container {
      margin-top: 8px;
      width: 100%;
      max-width: 440px;
      display: flex;
      justify-content: center;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #f0fdf4;
      border: 1.5px solid #86efac;
      padding: 8px 16px;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 700;
      color: #15803d;
      box-shadow: 0 2px 5px rgba(22, 101, 52, 0.08);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .badge .eq-num {
      color: #1e2945;
      font-weight: 800;
    }
  </style>
</head>
<body class="step-3">

  <div class="controls">
    <button class="btn" id="btn1" onclick="setStep(1)">1. Start (3/5)</button>
    <button class="btn" id="btn2" onclick="setStep(2)">2. Multiply (× 4)</button>
    <button class="btn active" id="btn3" onclick="setStep(3)">3. Equal (12/20)</button>
    <button class="btn" id="btnPlay" onclick="togglePlay()" title="Auto Play">▶ Play</button>
  </div>

  <div class="stage">
    <svg viewBox="0 0 460 250">
      <defs>
        <marker id="arrowTop" markerWidth="8" markerHeight="8" refX="5" refY="4" orient="auto">
          <path d="M 1,1 L 7,4 L 1,7 Z" class="arrow-head" />
        </marker>
        <marker id="arrowBottom" markerWidth="8" markerHeight="8" refX="5" refY="4" orient="auto">
          <path d="M 1,1 L 7,4 L 1,7 Z" class="arrow-head" />
        </marker>
      </defs>

      
      <g class="arrow-group">
        <path class="arrow-path" d="M 105,62 C 160,12 280,12 335,62" marker-end="url(#arrowTop)" />
        <g class="scale-pill" transform="translate(220, 24)">
          <rect class="scale-bg" x="-32" y="-14" width="64" height="28" />
          <text class="scale-text" y="1">× 4</text>
        </g>
      </g>

      
      <g class="frac-left">
        <text class="num" x="90" y="85">3</text>
        <line class="frac-bar" x1="60" y1="125" x2="120" y2="125" />
        <text class="den" x="90" y="165">5</text>
      </g>

      
      <text class="eq-sign" x="220" y="125">=</text>

      
      <g class="frac-right">
        <text class="num" x="350" y="85">12</text>
        <line class="frac-bar" x1="315" y1="125" x2="385" y2="125" />
        <text class="den" x="350" y="165">20</text>
      </g>

      
      <g class="arrow-group">
        <path class="arrow-path" d="M 105,188 C 160,238 280,238 335,188" marker-end="url(#arrowBottom)" />
        <g class="scale-pill" transform="translate(220, 226)">
          <rect class="scale-bg" x="-32" y="-14" width="64" height="28" />
          <text class="scale-text" y="1">× 4</text>
        </g>
      </g>
    </svg>
  </div>

  <div class="badge-container val-badge">
    <div class="badge">
      <span>Value remains identical:</span>
      <span class="eq-num">3/5 = 12/20 = 0.6</span>
    </div>
  </div>

  <script>
    let currentStep = 3;
    let autoInterval = null;

    function setStep(step) {
      currentStep = step;
      document.body.className = 'step-' + step;

      document.getElementById('btn1').classList.toggle('active', step === 1);
      document.getElementById('btn2').classList.toggle('active', step === 2);
      document.getElementById('btn3').classList.toggle('active', step === 3);
    }

    function togglePlay() {
      const btn = document.getElementById('btnPlay');
      if (autoInterval) {
        clearInterval(autoInterval);
        autoInterval = null;
        btn.textContent = '▶ Play';
        btn.classList.remove('active');
      } else {
        btn.textContent = '⏸ Pause';
        btn.classList.add('active');
        if (currentStep === 3) setStep(1);
        autoInterval = setInterval(() => {
          let next = currentStep >= 3 ? 1 : currentStep + 1;
          setStep(next);
        }, 3200);
      }
    }
  </script>
</body>
</html>

Generating Equivalent Fractions by Scaling and Simplifying

<!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;
      user-select: none;
      -webkit-user-select: none;
    }

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

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

    /* Comparison Row */
    .compare-stage {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .panel {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }

    .frac-box {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      font-size: 24px;
      font-weight: 800;
      line-height: 1.1;
    }

    .frac-box .num {
      color: #ea580c;
      padding: 0 4px;
    }

    .frac-box .bar {
      width: 100%;
      height: 2.5px;
      background: #1e2945;
      border-radius: 2px;
      margin: 2px 0;
    }

    .frac-box .den {
      color: #1e2945;
      padding: 0 4px;
    }

    /* Visual Grid Containers */
    .bar-grid {
      width: 100%;
      max-width: 170px;
      height: 190px;
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    /* Left: 4 rows of 6 small squares */
    .row-group-left {
      flex: 1;
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 2.5px;
      padding: 3px;
      border-radius: 6px;
      background: #f8fafc;
      border: 1.5px dashed #cbd5e1;
      transition: all 0.25s ease;
      cursor: pointer;
    }

    .row-group-left.active {
      border-color: #ea580c;
      background: #fff7ed;
      box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.25);
    }

    .cell {
      border-radius: 2.5px;
      background: #e2e8f0;
      transition: background-color 0.2s ease;
    }

    .cell.shaded {
      background: #f97316;
    }

    /* Right: 4 large bars */
    .bar-col-right {
      width: 100%;
      max-width: 170px;
      height: 190px;
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .row-group-right {
      flex: 1;
      border-radius: 6px;
      background: #e2e8f0;
      border: 1.5px solid #cbd5e1;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.25s ease;
      cursor: pointer;
    }

    .row-group-right.shaded {
      background: #f97316;
      border-color: #ea580c;
    }

    .row-group-right.active {
      box-shadow: 0 0 0 3px #1e2945;
    }

    /* Transformation Arrow Area */
    .transform-arrow {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 0 4px;
      min-width: 85px;
    }

    .op-badge {
      background: #f1f5f9;
      border: 1.5px solid #cbd5e1;
      border-radius: 20px;
      padding: 6px 10px;
      font-size: 13px;
      font-weight: 700;
      color: #1e2945;
      text-align: center;
      white-space: nowrap;
      margin-bottom: 6px;
    }

    .arrow-icon {
      font-size: 26px;
      color: #ea580c;
      line-height: 1;
    }

    .group-hint {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      text-align: center;
      margin-top: 4px;
    }

    /* Footer message */
    .footer-pill {
      font-size: 14px;
      font-weight: 600;
      color: #1e2945;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      padding: 6px 14px;
      border-radius: 20px;
      text-align: center;
    }

    .footer-pill strong {
      color: #ea580c;
    }
  </style>
</head>
<body>

  <div class="main-diagram">
    <div class="compare-stage">
      
      
      <div class="panel">
        <div class="frac-box">
          <span class="num">18</span>
          <div class="bar"></div>
          <span class="den">24</span>
        </div>
        <div class="bar-grid" id="leftGrid">
          
          <div class="row-group-left" data-row="0">
            <div class="cell shaded"></div><div class="cell shaded"></div>
            <div class="cell shaded"></div><div class="cell shaded"></div>
            <div class="cell shaded"></div><div class="cell shaded"></div>
          </div>
          
          <div class="row-group-left" data-row="1">
            <div class="cell shaded"></div><div class="cell shaded"></div>
            <div class="cell shaded"></div><div class="cell shaded"></div>
            <div class="cell shaded"></div><div class="cell shaded"></div>
          </div>
          
          <div class="row-group-left" data-row="2">
            <div class="cell shaded"></div><div class="cell shaded"></div>
            <div class="cell shaded"></div><div class="cell shaded"></div>
            <div class="cell shaded"></div><div class="cell shaded"></div>
          </div>
          
          <div class="row-group-left" data-row="3">
            <div class="cell"></div><div class="cell"></div>
            <div class="cell"></div><div class="cell"></div>
            <div class="cell"></div><div class="cell"></div>
          </div>
        </div>
      </div>

      
      <div class="transform-arrow">
        <div class="op-badge">÷ 6</div>
        <div class="arrow-icon">➔</div>
        <div class="group-hint">group by 6</div>
      </div>

      
      <div class="panel">
        <div class="frac-box">
          <span class="num">3</span>
          <div class="bar"></div>
          <span class="den">4</span>
        </div>
        <div class="bar-col-right" id="rightGrid">
          <div class="row-group-right shaded" data-row="0"></div>
          <div class="row-group-right shaded" data-row="1"></div>
          <div class="row-group-right shaded" data-row="2"></div>
          <div class="row-group-right" data-row="3"></div>
        </div>
      </div>

    </div>

    
    <div class="footer-pill">
      <strong>18/24</strong> simplifies to <strong>3/4</strong> (simplest form)
    </div>
  </div>

  <script>
    const leftRows = document.querySelectorAll('.row-group-left');
    const rightRows = document.querySelectorAll('.row-group-right');

    function highlightRow(index, active) {
      if (index >= 0 && index < 4) {
        leftRows[index].classList.toggle('active', active);
        rightRows[index].classList.toggle('active', active);
      }
    }

    [...leftRows, ...rightRows].forEach(el => {
      const rowIdx = parseInt(el.dataset.row, 10);
      
      el.addEventListener('pointerenter', () => highlightRow(rowIdx, true));
      el.addEventListener('pointerleave', () => highlightRow(rowIdx, false));
      
      el.addEventListener('click', () => {
        const isCurrentlyActive = el.classList.contains('active');
        // Clear all
        for (let i = 0; i < 4; i++) highlightRow(i, false);
        if (!isCurrentlyActive) {
          highlightRow(rowIdx, true);
        }
      });
    });
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #ffffff;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }
    .controls {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .btn-scale {
      border: 1px solid #d1d5db;
      background: #f8fafc;
      color: #1e2945;
      font-weight: 700;
      font-size: 14px;
      padding: 6px 14px;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .btn-scale.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
      box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
    }
    .comparison-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 620px;
    }
    @media (max-width: 480px) {
      .comparison-grid {
        grid-template-columns: 1fr;
      }
    }
    .card-panel {
      border-radius: 12px;
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      background: #ffffff;
    }
    .card-wrong {
      border: 2px solid #ef4444;
      background: #fef2f2;
    }
    .card-correct {
      border: 2px solid #16a34a;
      background: #f0fdf4;
    }
    .panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-weight: 800;
      font-size: 15px;
    }
    .card-wrong .panel-header {
      color: #dc2626;
    }
    .card-correct .panel-header {
      color: #16a34a;
    }
    .badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      font-size: 16px;
      color: #ffffff;
    }
    .badge-wrong {
      background: #ef4444;
    }
    .badge-correct {
      background: #16a34a;
    }
    .math-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: #ffffff;
      padding: 8px;
      border-radius: 8px;
      font-weight: 700;
      font-size: 17px;
    }
    .fraction {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      vertical-align: middle;
      line-height: 1.1;
    }
    .fraction .num {
      border-bottom: 2px solid currentColor;
      padding: 0 4px 2px;
      width: 100%;
      text-align: center;
    }
    .fraction .den {
      padding: 2px 4px 0;
      width: 100%;
      text-align: center;
    }
    .status-symbol {
      font-size: 20px;
      font-weight: 900;
    }
    .card-wrong .status-symbol {
      color: #dc2626;
    }
    .card-correct .status-symbol {
      color: #16a34a;
    }
    .visual-container {
      display: flex;
      flex-direction: column;
      gap: 6px;
      background: #ffffff;
      padding: 10px;
      border-radius: 8px;
    }
    .bar-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .bar-label {
      width: 32px;
      font-size: 14px;
      font-weight: 800;
      text-align: right;
      color: #334155;
    }
    .bar-track {
      flex: 1;
      height: 24px;
      background: #e2e8f0;
      border-radius: 6px;
      overflow: hidden;
      display: flex;
      border: 1px solid #cbd5e1;
    }
    .bar-segment {
      flex: 1;
      height: 100%;
      border-right: 1px dashed rgba(255, 255, 255, 0.7);
      background: #e2e8f0;
      transition: background 0.3s ease;
    }
    .bar-segment:last-child {
      border-right: none;
    }
    .bar-segment.filled-base {
      background: #3b82f6;
    }
    .bar-segment.filled-wrong {
      background: #ef4444;
    }
    .bar-segment.filled-correct {
      background: #22c55e;
    }
    .status-tag {
      text-align: center;
      font-weight: 800;
      font-size: 13px;
      padding: 4px;
      border-radius: 6px;
    }
    .card-wrong .status-tag {
      color: #dc2626;
      background: #fee2e2;
    }
    .card-correct .status-tag {
      color: #15803d;
      background: #dcfce7;
    }
  </style>
</head>
<body>

  <div class="controls">
    <button class="btn-scale active" onclick="setScale(2)">Scale: 2</button>
    <button class="btn-scale" onclick="setScale(3)">Scale: 3</button>
    <button class="btn-scale" onclick="setScale(4)">Scale: 4</button>
  </div>

  <div class="comparison-grid">
    
    <div class="card-panel card-wrong">
      <div class="panel-header">
        <span>WRONG: Adding</span>
        <span class="badge badge-wrong">✗</span>
      </div>

      <div class="math-row">
        <div class="fraction">
          <span class="num">1 + <span id="add-val-num">2</span></span>
          <span class="den">2 + <span id="add-val-den">2</span></span>
        </div>
        <span>=</span>
        <div class="fraction">
          <span class="num" id="wrong-res-num">3</span>
          <span class="den" id="wrong-res-den">4</span>
        </div>
        <span class="status-symbol">≠</span>
        <div class="fraction">
          <span class="num">1</span>
          <span class="den">2</span>
        </div>
      </div>

      <div class="visual-container">
        <div class="bar-row">
          <span class="bar-label">1/2</span>
          <div class="bar-track">
            <div class="bar-segment filled-base"></div>
            <div class="bar-segment"></div>
          </div>
        </div>
        <div class="bar-row">
          <span class="bar-label" id="wrong-bar-label">3/4</span>
          <div class="bar-track" id="wrong-bar-track"></div>
        </div>
      </div>

      <div class="status-tag">Changes Value (≠ 1/2)</div>
    </div>

    
    <div class="card-panel card-correct">
      <div class="panel-header">
        <span>CORRECT: Multiplying</span>
        <span class="badge badge-correct">✓</span>
      </div>

      <div class="math-row">
        <div class="fraction">
          <span class="num">1 × <span id="mul-val-num">2</span></span>
          <span class="den">2 × <span id="mul-val-den">2</span></span>
        </div>
        <span>=</span>
        <div class="fraction">
          <span class="num" id="correct-res-num">2</span>
          <span class="den" id="correct-res-den">4</span>
        </div>
        <span class="status-symbol">=</span>
        <div class="fraction">
          <span class="num">1</span>
          <span class="den">2</span>
        </div>
      </div>

      <div class="visual-container">
        <div class="bar-row">
          <span class="bar-label">1/2</span>
          <div class="bar-track">
            <div class="bar-segment filled-base"></div>
            <div class="bar-segment"></div>
          </div>
        </div>
        <div class="bar-row">
          <span class="bar-label" id="correct-bar-label">2/4</span>
          <div class="bar-track" id="correct-bar-track"></div>
        </div>
      </div>

      <div class="status-tag">Same Value (= 1/2)</div>
    </div>
  </div>

  <script>
    function setScale(n) {
      document.querySelectorAll('.btn-scale').forEach((btn, idx) => {
        btn.classList.toggle('active', idx === (n - 2));
      });

      // Wrong rule (+ n)
      const wrongNum = 1 + n;
      const wrongDen = 2 + n;
      document.getElementById('add-val-num').textContent = n;
      document.getElementById('add-val-den').textContent = n;
      document.getElementById('wrong-res-num').textContent = wrongNum;
      document.getElementById('wrong-res-den').textContent = wrongDen;
      document.getElementById('wrong-bar-label').textContent = `${wrongNum}/${wrongDen}`;

      const wrongTrack = document.getElementById('wrong-bar-track');
      wrongTrack.innerHTML = '';
      for (let i = 0; i < wrongDen; i++) {
        const seg = document.createElement('div');
        seg.className = 'bar-segment' + (i < wrongNum ? ' filled-wrong' : '');
        wrongTrack.appendChild(seg);
      }

      // Correct rule (× n)
      const correctNum = 1 * n;
      const correctDen = 2 * n;
      document.getElementById('mul-val-num').textContent = n;
      document.getElementById('mul-val-den').textContent = n;
      document.getElementById('correct-res-num').textContent = correctNum;
      document.getElementById('correct-res-den').textContent = correctDen;
      document.getElementById('correct-bar-label').textContent = `${correctNum}/${correctDen}`;

      const correctTrack = document.getElementById('correct-bar-track');
      correctTrack.innerHTML = '';
      for (let i = 0; i < correctDen; i++) {
        const seg = document.createElement('div');
        seg.className = 'bar-segment' + (i < correctNum ? ' filled-correct' : '');
        correctTrack.appendChild(seg);
      }
    }

    // Initialize with n = 2
    setScale(2);
  </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;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }
    body {
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 16px;
      user-select: none;
    }
    .diagram-wrap {
      width: 100%;
      max-width: 520px;
      display: flex;
      flex-direction: column;
      gap: 18px;
      position: relative;
    }
    .fraction-row {
      display: flex;
      align-items: center;
      gap: 14px;
      width: 100%;
    }
    .frac-label {
      width: 44px;
      font-weight: 700;
      font-size: 18px;
      text-align: center;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      line-height: 1.1;
    }
    .frac-label span.num {
      border-bottom: 2px solid #1e2945;
      padding: 0 4px;
      display: inline-block;
    }
    .frac-label span.den {
      padding: 0 4px;
      display: inline-block;
    }
    .bar-container {
      flex: 1;
      height: 48px;
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 8px;
      display: flex;
      overflow: hidden;
      position: relative;
    }
    .segment {
      flex: 1;
      height: 100%;
      border-right: 1px solid #cbd5e1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      transition: background-color 0.3s ease, color 0.3s ease;
    }
    .segment:last-child {
      border-right: none;
    }
    .segment.shaded {
      background: #0284c7;
      color: #ffffff;
    }
    .bars-area {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 16px;
      width: 100%;
    }
    /* Alignment Line */
    .align-line {
      position: absolute;
      top: -8px;
      bottom: -8px;
      left: calc(44px + 14px + (100% - 58px) * 0.5);
      width: 2px;
      border-left: 2px dashed #0284c7;
      z-index: 10;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }
    .align-pill {
      position: absolute;
      top: -10px;
      left: 50%;
      transform: translateX(-50%);
      background: #0284c7;
      color: #ffffff;
      font-size: 11px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 10px;
      white-space: nowrap;
      letter-spacing: 0.5px;
    }
    .footer-eq {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-top: 8px;
      font-size: 16px;
      font-weight: 700;
      color: #0284c7;
      background: #f0f9ff;
      border: 1px solid #bae6fd;
      border-radius: 8px;
      padding: 8px 16px;
    }
    .footer-eq span.eq {
      color: #64748b;
      font-size: 18px;
    }
    .interactive-btn {
      cursor: pointer;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      border-radius: 6px;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      align-self: center;
      transition: background 0.2s ease, border-color 0.2s ease;
    }
    .interactive-btn:active {
      background: #f1f5f9;
    }
  </style>
</head>
<body>
  <div class="diagram-wrap">
    <div class="bars-area">
      
      <div class="align-line" id="alignLine">
        <div class="align-pill">SAME SIZE</div>
      </div>

      
      <div class="fraction-row">
        <div class="frac-label">
          <span class="num">1</span>
          <span class="den">2</span>
        </div>
        <div class="bar-container">
          <div class="segment shaded">1/2</div>
          <div class="segment">1/2</div>
        </div>
      </div>

      
      <div class="fraction-row">
        <div class="frac-label">
          <span class="num">2</span>
          <span class="den">4</span>
        </div>
        <div class="bar-container">
          <div class="segment shaded">1/4</div>
          <div class="segment shaded">1/4</div>
          <div class="segment">1/4</div>
          <div class="segment">1/4</div>
        </div>
      </div>

      
      <div class="fraction-row">
        <div class="frac-label">
          <span class="num">4</span>
          <span class="den">8</span>
        </div>
        <div class="bar-container">
          <div class="segment shaded">1/8</div>
          <div class="segment shaded">1/8</div>
          <div class="segment shaded">1/8</div>
          <div class="segment shaded">1/8</div>
          <div class="segment">1/8</div>
          <div class="segment">1/8</div>
          <div class="segment">1/8</div>
          <div class="segment">1/8</div>
        </div>
      </div>
    </div>

    
    <div class="footer-eq">
      <span>1/2</span>
      <span class="eq">=</span>
      <span>2/4</span>
      <span class="eq">=</span>
      <span>4/8</span>
    </div>
  </div>
</body>
</html>

OGM.6.NF.2

Aligned learning resources

Related diagrams