<!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, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: transparent;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      user-select: none;
    }

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

    .tier {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 14px;
      border-radius: 12px;
      background: #ffffff;
      border: 2px solid transparent;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }

    .tier:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .tier.active {
      transform: scale(1.02);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    }

    /* Tier Specific Colors */
    .tier-1 {
      border-color: #8b5cf6;
      background: #faf5ff;
    }
    .tier-1 .badge {
      background: #7c3aed;
      color: #ffffff;
    }
    .tier-1 .tier-title {
      color: #5b21b6;
    }

    .tier-2 {
      border-color: #3b82f6;
      background: #eff6ff;
    }
    .tier-2 .badge {
      background: #2563eb;
      color: #ffffff;
    }
    .tier-2 .tier-title {
      color: #1e40af;
    }

    .tier-3 {
      border-color: #f59e0b;
      background: #fffbeb;
    }
    .tier-3 .badge {
      background: #d97706;
      color: #ffffff;
    }
    .tier-3 .tier-title {
      color: #92400e;
    }

    .tier-4 {
      border-color: #10b981;
      background: #ecfdf5;
    }
    .tier-4 .badge {
      background: #059669;
      color: #ffffff;
    }
    .tier-4 .tier-title {
      color: #065f46;
    }

    .tier-left {
      display: flex;
      align-items: center;
      gap: 10px;
    }

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

    .tier-content {
      display: flex;
      flex-direction: column;
    }

    .tier-title {
      font-size: 15px;
      font-weight: 700;
      line-height: 1.2;
    }

    .tier-subtitle {
      font-size: 12px;
      font-weight: 600;
      color: #6b7280;
      margin-top: 2px;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .tier-right {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }

    .symbol-pill {
      background: #ffffff;
      border: 1px solid rgba(0, 0, 0, 0.08);
      padding: 4px 10px;
      border-radius: 8px;
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 0.5px;
      color: #1e2945;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }

    /* Priority Arrow Bar */
    .flow-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 8px;
      font-size: 12px;
      font-weight: 700;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.8px;
    }

    .flow-line {
      flex: 1;
      height: 2px;
      background: #cbd5e1;
      margin: 0 10px;
      position: relative;
    }

    .flow-line::after {
      content: '▼';
      position: absolute;
      right: -4px;
      top: -6px;
      font-size: 9px;
      color: #94a3b8;
    }

    /* Interactive Example Box */
    .example-card {
      margin-top: 8px;
      padding: 10px 14px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
    }

    .example-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      font-weight: 700;
      color: #64748b;
    }

    .math-steps {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 17px;
      font-weight: 700;
      min-height: 32px;
    }

    .highlight-exp {
      color: #2563eb;
      background: #dbeafe;
      padding: 1px 6px;
      border-radius: 6px;
    }

    .highlight-mult {
      color: #d97706;
      background: #fef3c7;
      padding: 1px 6px;
      border-radius: 6px;
    }

    .highlight-add {
      color: #059669;
      background: #d1fae5;
      padding: 1px 6px;
      border-radius: 6px;
    }

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

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

  <div class="ladder-container">
    <div class="flow-bar">
      <span>First Priority</span>
      <div class="flow-line"></div>
      <span>Order of Operations</span>
    </div>

    
    <div class="tier tier-1" id="t1" onclick="selectTier(1)">
      <div class="tier-left">
        <div class="badge">1</div>
        <div class="tier-content">
          <div class="tier-title">Parentheses</div>
          <div class="tier-subtitle">Grouping & brackets</div>
        </div>
      </div>
      <div class="tier-right">
        <span class="symbol-pill">( ) [ ]</span>
      </div>
    </div>

    
    <div class="tier tier-2" id="t2" onclick="selectTier(2)">
      <div class="tier-left">
        <div class="badge">2</div>
        <div class="tier-content">
          <div class="tier-title">Exponents</div>
          <div class="tier-subtitle">Powers & roots</div>
        </div>
      </div>
      <div class="tier-right">
        <span class="symbol-pill">x² &radic;</span>
      </div>
    </div>

    
    <div class="tier tier-3" id="t3" onclick="selectTier(3)">
      <div class="tier-left">
        <div class="badge">3</div>
        <div class="tier-content">
          <div class="tier-title">Multiply &amp; Divide</div>
          <div class="tier-subtitle">Left to Right &rarr;</div>
        </div>
      </div>
      <div class="tier-right">
        <span class="symbol-pill">&times; &divide;</span>
      </div>
    </div>

    
    <div class="tier tier-4" id="t4" onclick="selectTier(4)">
      <div class="tier-left">
        <div class="badge">4</div>
        <div class="tier-content">
          <div class="tier-title">Add &amp; Subtract</div>
          <div class="tier-subtitle">Left to Right &rarr;</div>
        </div>
      </div>
      <div class="tier-right">
        <span class="symbol-pill">+ &minus;</span>
      </div>
    </div>

    
    <div class="example-card">
      <div class="example-header">
        <span id="stepLabel">STEP 1: EXPONENTS</span>
        <button class="step-btn" onclick="nextExampleStep()">Next Step &rarr;</button>
      </div>
      <div class="math-steps" id="mathDisplay">
        2 + 3 &times; <span class="highlight-exp">4²</span>
      </div>
    </div>
  </div>

  <script>
    const steps = [
      {
        tier: 2,
        label: "STEP 1: EXPONENTS (4² = 16)",
        html: "2 + 3 &times; <span class='highlight-exp'>4²</span> &rarr; 2 + 3 &times; 16"
      },
      {
        tier: 3,
        label: "STEP 2: MULTIPLY (3 &times; 16 = 48)",
        html: "2 + <span class='highlight-mult'>3 &times; 16</span> &rarr; 2 + 48"
      },
      {
        tier: 4,
        label: "STEP 3: ADD (2 + 48 = 50)",
        html: "<span class='highlight-add'>2 + 48</span> &rarr; <strong>50</strong>"
      }
    ];

    let currentStep = 0;

    function updateView() {
      const s = steps[currentStep];
      document.getElementById('stepLabel').innerHTML = s.label;
      document.getElementById('mathDisplay').innerHTML = s.html;

      for (let i = 1; i <= 4; i++) {
        const el = document.getElementById('t' + i);
        if (i === s.tier) {
          el.classList.add('active');
        } else {
          el.classList.remove('active');
        }
      }
    }

    function nextExampleStep() {
      currentStep = (currentStep + 1) % steps.length;
      updateView();
    }

    function selectTier(tierNum) {
      for (let i = 1; i <= 4; i++) {
        document.getElementById('t' + i).classList.toggle('active', i === tierNum);
      }
      const foundIdx = steps.findIndex(s => s.tier === tierNum);
      if (foundIdx !== -1) {
        currentStep = foundIdx;
        document.getElementById('stepLabel').innerHTML = steps[currentStep].label;
        document.getElementById('mathDisplay').innerHTML = steps[currentStep].html;
      }
    }

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

Order of Operations with Whole Number Exponents

<!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>Order of Operations</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: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      box-sizing: border-box;
    }
    .stepper-nav {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      width: 100%;
      max-width: 380px;
      margin-bottom: 6px;
    }
    .tab-btn {
      flex: 1;
      padding: 5px 3px;
      font-size: 12px;
      font-weight: 700;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      background: #f8fafc;
      color: #475569;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }
    .tab-btn .tab-num {
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      opacity: 0.9;
    }
    .tab-btn.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
      box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
    }
    .steps-container {
      width: 100%;
      max-width: 380px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      flex: 1;
    }
    .step-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 6px 10px;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #334155;
      opacity: 0.88;
      transition: all 0.2s ease;
      cursor: pointer;
      gap: 6px;
    }
    .step-row.active {
      opacity: 1;
      border-color: #2563eb;
      background: #eff6ff;
      color: #1e2945;
      box-shadow: 0 2px 6px rgba(37, 99, 235, 0.12);
    }
    .step-row.final.active {
      border-color: #16a34a;
      background: #f0fdf4;
      box-shadow: 0 2px 6px rgba(22, 163, 74, 0.15);
    }
    .op-tag {
      font-size: 11px;
      font-weight: 700;
      padding: 3px 6px;
      border-radius: 5px;
      background: #f1f5f9;
      color: #334155;
      border: 1px solid #cbd5e1;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .step-row.active .op-tag {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
    }
    .step-row.final.active .op-tag {
      background: #16a34a;
      color: #ffffff;
      border-color: #16a34a;
    }
    .math-expr {
      font-size: 14px;
      font-family: "Cambria Math", "Latin Modern Math", "Times New Roman", serif;
      font-weight: 600;
      letter-spacing: 0.3px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 3px;
      white-space: nowrap;
      flex: 1;
    }
    .arr {
      color: #64748b;
      font-size: 12px;
      margin: 0 2px;
    }
    .hl {
      padding: 1px 4px;
      border-radius: 4px;
      background: #dbeafe;
      color: #1d4ed8;
      font-weight: 700;
      white-space: nowrap;
    }
    .res {
      padding: 1px 4px;
      border-radius: 4px;
      background: #fef08a;
      color: #854d0e;
      font-weight: 700;
      white-space: nowrap;
    }
    .step-row:not(.active) .hl {
      background: #e2e8f0;
      color: #334155;
    }
    .step-row:not(.active) .res {
      background: #e2e8f0;
      color: #334155;
    }
    .final-val {
      font-size: 17px;
      font-weight: 800;
      color: #16a34a;
      padding: 1px 8px;
      background: #dcfce7;
      border-radius: 6px;
      border: 1px solid #86efac;
    }
    .controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: 380px;
      margin-top: 6px;
      gap: 8px;
    }
    .ctrl-btn {
      padding: 6px 12px;
      font-size: 12px;
      font-weight: 600;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      background: #ffffff;
      color: #1e2945;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: background 0.15s ease;
    }
    .ctrl-btn:active {
      background: #f1f5f9;
    }
    .play-btn {
      padding: 6px 10px;
      min-width: 78px;
    }

    @media (min-width: 400px) {
      .step-row {
        padding: 8px 12px;
        gap: 8px;
      }
      .op-tag {
        font-size: 12px;
        padding: 3px 8px;
      }
      .math-expr {
        font-size: 16px;
        gap: 4px;
      }
      .arr {
        font-size: 14px;
        margin: 0 4px;
      }
      .tab-btn {
        font-size: 13px;
        padding: 6px 4px;
      }
      .final-val {
        font-size: 19px;
      }
      .ctrl-btn {
        font-size: 13px;
        padding: 7px 14px;
      }
    }
  </style>
</head>
<body>

  <div class="stepper-nav" role="tablist">
    <button class="tab-btn active" id="tab0" onclick="goToStep(0)">
      <span class="tab-num">Step 1</span>
      <span>( )</span>
    </button>
    <button class="tab-btn" id="tab1" onclick="goToStep(1)">
      <span class="tab-num">Step 2</span>
      <span>x²</span>
    </button>
    <button class="tab-btn" id="tab2" onclick="goToStep(2)">
      <span class="tab-num">Step 3</span>
      <span>÷</span>
    </button>
    <button class="tab-btn" id="tab3" onclick="goToStep(3)">
      <span class="tab-num">Step 4</span>
      <span>+</span>
    </button>
  </div>

  <div class="steps-container">
    <div class="step-row active" id="row0" onclick="goToStep(0)">
      <div class="op-tag">Parentheses</div>
      <div class="math-expr">
        5 + <span class="hl">(8 − 2)</span>² ÷ 4
        <span class="arr">→</span>
        5 + <span class="res">6</span>² ÷ 4
      </div>
    </div>

    <div class="step-row" id="row1" onclick="goToStep(1)">
      <div class="op-tag">Exponents</div>
      <div class="math-expr">
        5 + <span class="hl">6²</span> ÷ 4
        <span class="arr">→</span>
        5 + <span class="res">36</span> ÷ 4
      </div>
    </div>

    <div class="step-row" id="row2" onclick="goToStep(2)">
      <div class="op-tag">Divide</div>
      <div class="math-expr">
        5 + <span class="hl">36 ÷ 4</span>
        <span class="arr">→</span>
        5 + <span class="res">9</span>
      </div>
    </div>

    <div class="step-row final" id="row3" onclick="goToStep(3)">
      <div class="op-tag">Add</div>
      <div class="math-expr">
        <span class="hl">5 + 9</span>
        <span class="arr">=</span>
        <span class="final-val">14</span>
      </div>
    </div>
  </div>

  <div class="controls">
    <button class="ctrl-btn" onclick="prevStep()">◀ Back</button>
    <button class="ctrl-btn play-btn" id="autoBtn" onclick="toggleAuto()">⏸ Pause</button>
    <button class="ctrl-btn" onclick="nextStep()">Next ▶</button>
  </div>

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

    function render() {
      for (let i = 0; i < 4; i++) {
        const tab = document.getElementById('tab' + i);
        const row = document.getElementById('row' + i);
        if (i === currentStep) {
          tab.classList.add('active');
          row.classList.add('active');
        } else {
          tab.classList.remove('active');
          row.classList.remove('active');
        }
      }
    }

    function goToStep(step) {
      currentStep = step;
      render();
    }

    function nextStep() {
      currentStep = (currentStep + 1) % 4;
      render();
    }

    function prevStep() {
      currentStep = (currentStep - 1 + 4) % 4;
      render();
    }

    function toggleAuto() {
      autoPlaying = !autoPlaying;
      const btn = document.getElementById('autoBtn');
      if (autoPlaying) {
        btn.textContent = '⏸ Pause';
        startTimer();
      } else {
        btn.textContent = '▶ Play';
        clearInterval(timer);
      }
    }

    function startTimer() {
      clearInterval(timer);
      timer = setInterval(() => {
        if (autoPlaying) {
          nextStep();
        }
      }, 3500);
    }

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <title>Order of Operations</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: center;
      min-height: 100%;
    }

    .main-expr {
      font-size: 22px;
      font-weight: 700;
      letter-spacing: 1px;
      padding: 6px 16px;
      background: #f1f5f9;
      border-radius: 20px;
      margin-bottom: 12px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .columns {
      display: flex;
      gap: 12px;
      width: 100%;
      max-width: 580px;
    }

    .col-card {
      flex: 1;
      border-radius: 12px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .col-correct {
      background: #f0fdf4;
      border: 1.5px solid #86efac;
    }

    .col-wrong {
      background: #fef2f2;
      border: 1.5px solid #fca5a5;
    }

    .col-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 13px;
      font-weight: 700;
      padding-bottom: 4px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }

    .col-correct .col-header {
      color: #15803d;
    }

    .col-wrong .col-header {
      color: #b91c1c;
    }

    .step-box {
      background: #ffffff;
      border-radius: 8px;
      padding: 6px 10px;
      font-size: 15px;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
      min-height: 38px;
    }

    .op-highlight-green {
      background: #dcfce7;
      color: #15803d;
      padding: 1px 5px;
      border-radius: 4px;
    }

    .op-highlight-red {
      background: #fee2e2;
      color: #b91c1c;
      padding: 1px 5px;
      border-radius: 4px;
    }

    .arrow {
      text-align: center;
      color: #94a3b8;
      font-size: 12px;
      line-height: 1;
      margin: -4px 0;
    }

    .result-box {
      margin-top: 2px;
      padding: 8px 10px;
      border-radius: 8px;
      font-size: 18px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .result-correct {
      background: #22c55e;
      color: #ffffff;
    }

    .result-wrong {
      background: #ef4444;
      color: #ffffff;
    }

    .tag {
      font-size: 11px;
      font-weight: 600;
      padding: 2px 6px;
      border-radius: 4px;
      background: #f8fafc;
      color: #64748b;
    }

    @media (max-width: 360px) {
      .columns {
        flex-direction: column;
      }
      .main-expr {
        font-size: 18px;
      }
      .step-box {
        font-size: 14px;
      }
    }
  </style>
</head>
<body>

  <div class="main-expr">
    12 ÷ 3 × 2<sup>3</sup>
  </div>

  <div class="columns">
    
    <div class="col-card col-correct">
      <div class="col-header">
        <span>Correct (L → R)</span>
        <span>✓</span>
      </div>

      <div class="step-box">
        <span>12 ÷ 3 × <span class="op-highlight-green">2<sup>3</sup></span></span>
        <span class="tag">2<sup>3</sup> = 8</span>
      </div>

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

      <div class="step-box">
        <span><span class="op-highlight-green">12 ÷ 3</span> × 8</span>
        <span class="tag">12 ÷ 3 = 4</span>
      </div>

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

      <div class="step-box">
        <span><span class="op-highlight-green">4 × 8</span></span>
        <span class="tag">4 × 8</span>
      </div>

      <div class="result-box result-correct">
        = 32 ✓
      </div>
    </div>

    
    <div class="col-card col-wrong">
      <div class="col-header">
        <span>Mistake (× first)</span>
        <span>✕</span>
      </div>

      <div class="step-box">
        <span>12 ÷ 3 × <span class="op-highlight-green">2<sup>3</sup></span></span>
        <span class="tag">2<sup>3</sup> = 8</span>
      </div>

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

      <div class="step-box">
        <span>12 ÷ <span class="op-highlight-red">3 × 8</span></span>
        <span class="tag">3 × 8 = 24</span>
      </div>

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

      <div class="step-box">
        <span><span class="op-highlight-red">12 ÷ 24</span></span>
        <span class="tag">12 ÷ 24</span>
      </div>

      <div class="result-box result-wrong">
        = 0.5 ✕
      </div>
    </div>
  </div>

</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;
      color: #1e2945;
      background: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 16px;
    }

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

    /* Main expression card */
    .expression-box {
      position: relative;
      width: 100%;
      background: #f8fafc;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      padding: 24px 16px 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .math-display {
      display: flex;
      align-items: baseline;
      justify-content: center;
      font-weight: 800;
      line-height: 1;
      margin-bottom: 8px;
    }

    .base-num {
      font-size: 68px;
      color: #2563eb;
      cursor: pointer;
      padding: 4px 8px;
      border-radius: 8px;
      transition: background-color 0.2s ease, box-shadow 0.2s ease;
    }
    .base-num:hover, .base-num.active {
      background: #dbeafe;
      box-shadow: 0 0 0 2px #2563eb;
    }

    .exponent-num {
      font-size: 40px;
      color: #d97706;
      cursor: pointer;
      vertical-align: super;
      margin-left: 2px;
      padding: 2px 6px;
      border-radius: 6px;
      transition: background-color 0.2s ease, box-shadow 0.2s ease;
    }
    .exponent-num:hover, .exponent-num.active {
      background: #fef3c7;
      box-shadow: 0 0 0 2px #d97706;
    }

    /* Callout labels */
    .callouts {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      margin-top: 12px;
    }

    .callout {
      padding: 10px 12px;
      border-radius: 8px;
      font-size: 13px;
      line-height: 1.35;
      text-align: center;
      transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .callout-base {
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      color: #1d4ed8;
    }
    .callout-base strong {
      display: block;
      font-size: 14px;
      color: #1e40af;
      margin-bottom: 2px;
    }

    .callout-exp {
      background: #fffbeb;
      border: 1px solid #fde68a;
      color: #b45309;
    }
    .callout-exp strong {
      display: block;
      font-size: 14px;
      color: #92400e;
      margin-bottom: 2px;
    }

    /* Expanded form */
    .expanded-card {
      width: 100%;
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      border-radius: 12px;
      padding: 14px 16px;
      text-align: center;
    }

    .expanded-label {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #3b82f6;
      margin-bottom: 6px;
    }

    .expanded-math {
      font-size: 22px;
      font-weight: 700;
      color: #1e2945;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    .factor {
      color: #2563eb;
      background: #ffffff;
      padding: 2px 8px;
      border-radius: 6px;
      border: 1px solid #93c5fd;
    }

    .op {
      color: #64748b;
      font-size: 18px;
    }

    .result {
      color: #0f172a;
      background: #dbeafe;
      padding: 2px 10px;
      border-radius: 6px;
      border: 1px solid #60a5fa;
    }

    /* Warning trap */
    .warning-card {
      width: 100%;
      background: #fef2f2;
      border: 1px solid #fecaca;
      border-radius: 12px;
      padding: 12px 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 13.5px;
      font-weight: 600;
      color: #991b1b;
      text-align: center;
    }

    .trap-strike {
      text-decoration: line-through 2px #dc2626;
      color: #dc2626;
      font-weight: 700;
      margin: 0 4px;
    }

    .warn-icon {
      font-size: 16px;
      flex-shrink: 0;
    }
  </style>
</head>
<body>

  <div class="diagram-grid">
    
    <div class="expression-box">
      <div class="math-display">
        <span class="base-num" id="baseEl" title="Base">4</span>
        <span class="exponent-num" id="expEl" title="Exponent">3</span>
      </div>

      <div class="callouts">
        <div class="callout callout-base" id="calloutBase">
          <strong>Base (4)</strong>
          The factor being multiplied
        </div>
        <div class="callout callout-exp" id="calloutExp">
          <strong>Exponent (3)</strong>
          Repeated 3 times
        </div>
      </div>
    </div>

    
    <div class="expanded-card">
      <div class="expanded-label">Expanded Form</div>
      <div class="expanded-math">
        <span class="factor">4</span>
        <span class="op">×</span>
        <span class="factor">4</span>
        <span class="op">×</span>
        <span class="factor">4</span>
        <span class="op">=</span>
        <span class="result">64</span>
      </div>
    </div>

    
    <div class="warning-card">
      <span class="warn-icon">⚠️</span>
      <span>Common Trap: 4³ is <strong>NOT</strong> <span class="trap-strike">4 × 3 = 12</span></span>
    </div>
  </div>

  <script>
    const baseEl = document.getElementById('baseEl');
    const expEl = document.getElementById('expEl');
    const calloutBase = document.getElementById('calloutBase');
    const calloutExp = document.getElementById('calloutExp');

    function highlight(target) {
      if (target === 'base') {
        baseEl.classList.add('active');
        expEl.classList.remove('active');
        calloutBase.style.transform = 'scale(1.02)';
        calloutExp.style.opacity = '0.5';
        calloutBase.style.opacity = '1';
      } else if (target === 'exp') {
        expEl.classList.add('active');
        baseEl.classList.remove('active');
        calloutExp.style.transform = 'scale(1.02)';
        calloutBase.style.opacity = '0.5';
        calloutExp.style.opacity = '1';
      } else {
        baseEl.classList.remove('active');
        expEl.classList.remove('active');
        calloutBase.style.transform = 'none';
        calloutExp.style.transform = 'none';
        calloutBase.style.opacity = '1';
        calloutExp.style.opacity = '1';
      }
    }

    baseEl.addEventListener('mouseenter', () => highlight('base'));
    baseEl.addEventListener('mouseleave', () => highlight(null));
    baseEl.addEventListener('click', () => highlight('base'));

    expEl.addEventListener('mouseenter', () => highlight('exp'));
    expEl.addEventListener('mouseleave', () => highlight(null));
    expEl.addEventListener('click', () => highlight('exp'));
  </script>
</body>
</html>

111.26(b)(7)(A)

Aligned learning resources

Related diagrams