Advanced

Tutor model

i62 💰:9.4

i52 💰:7.9

🏆 i67 💰:62.5

i70 💰:125.0

i68 💰:125.0

🏆 i66 💰:75.0

i65 💰:125.0

i63 💰:62.5

i61 💰:75.0

i60 💰:9.4

i60 💰:37.5

i58 💰:62.5

i57 💰:22.5

i57 💰:37.5

i56 💰:45.0

⚡ i55 💰:11.25

i55 💰:37.5

i54 💰:62.5

i52 💰:35.0

i51 💰:37.5

i49 💰:15.0

i49 💰:62.5

i48 💰:11.3

i47 💰:7.5

i44 💰:25.0

i43 💰:37.5

i42 💰:187.5

i40 💰:5.0

i39 💰:100.0

i38 💰:37.5

i37 💰:11.0

i36 💰:187.5

i34 💰:12.5

i33 💰:37.5

i30 💰:1.0

i29 💰:1.5

i28 💰:150.0

i23 💰:20.0

i20 💰:4.0

i18 💰:1.0

i16 💰:25.0

i13 💰:1.5

Keep session private

What would you like to learn?

Override for the tutor's lesson content generation calls. Auto uses the system default (Claude Sonnet 5 for lesson text, Opus 5 for diagrams).

Lesson generation model

System default

i58 💰:18.8

i31 💰:11.0

i25 💰:31.3

Tutoring abilities

Have you ever played on a seesaw with a friend who weighs the exact same as you? You both float right in the middle, perfectly level!

In math, an **equation** is just like that level seesaw. It shows that the left side and the right side have the exact same value, connected by an **equal sign** ($=$).

<!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>Equations as Balanced Scales</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px 10px;
      user-select: none;
    }

    .equation-display {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-top: 4px;
      background: #ffffff;
      padding: 8px 20px;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
      font-size: 22px;
      font-weight: 700;
      min-height: 48px;
    }

    .side-val {
      color: #1e2945;
      min-width: 50px;
      text-align: center;
    }

    .sign-badge {
      padding: 2px 12px;
      border-radius: 8px;
      font-size: 24px;
      font-weight: 800;
      transition: all 0.3s ease;
    }

    .sign-equal {
      background: #e6f9ed;
      color: #16a34a;
    }

    .sign-unequal {
      background: #fee2e2;
      color: #dc2626;
    }

    .scale-stage {
      position: relative;
      width: 100%;
      max-width: 420px;
      height: 220px;
      margin: 10px 0;
    }

    .fulcrum {
      position: absolute;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 0;
      border-left: 28px solid transparent;
      border-right: 28px solid transparent;
      border-bottom: 56px solid #64748b;
      z-index: 2;
    }

    .stand-base {
      position: absolute;
      bottom: 16px;
      left: 50%;
      transform: translateX(-50%);
      width: 90px;
      height: 8px;
      background: #475569;
      border-radius: 4px;
      z-index: 2;
    }

    .pivot-point {
      position: absolute;
      bottom: 74px;
      left: 50%;
      transform: translate(-50%, 50%);
      width: 14px;
      height: 14px;
      background: #0f172a;
      border-radius: 50%;
      z-index: 5;
    }

    .beam {
      position: absolute;
      bottom: 78px;
      left: 50%;
      width: 300px;
      height: 8px;
      background: #334155;
      border-radius: 4px;
      transform-origin: center center;
      transform: translateX(-50%) rotate(0deg);
      transition: transform 0.4s cubic-bezier(0.34, 1.3, 0.64, 1);
      z-index: 3;
    }

    .pan-assembly {
      position: absolute;
      top: 4px;
      width: 100px;
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: transform 0.4s cubic-bezier(0.34, 1.3, 0.64, 1);
    }

    .pan-assembly.left {
      left: 0;
      transform-origin: top center;
    }

    .pan-assembly.right {
      right: 0;
      transform-origin: top center;
    }

    .ropes {
      width: 80px;
      height: 60px;
    }

    .pan-plate {
      width: 90px;
      height: 8px;
      background: #94a3b8;
      border-radius: 0 0 10px 10px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .weights-container {
      display: flex;
      flex-wrap: wrap-reverse;
      justify-content: center;
      align-content: flex-end;
      gap: 3px;
      width: 86px;
      min-height: 48px;
      margin-bottom: 2px;
    }

    .weight-block {
      display: flex;
      align-items: center;
      justify-content: center;
      background: #22b7ff;
      color: #ffffff;
      font-weight: 700;
      font-size: 13px;
      border-radius: 5px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.15);
      animation: popIn 0.25s ease-out;
    }

    .w-1 { width: 22px; height: 22px; background: #38bdf8; }
    .w-2 { width: 34px; height: 22px; background: #0284c7; }
    .w-3 { width: 44px; height: 24px; background: #2563eb; }
    .w-4 { width: 50px; height: 24px; background: #f59e0b; }
    .w-5 { width: 56px; height: 26px; background: #8b5cf6; }

    @keyframes popIn {
      from { transform: scale(0.6); opacity: 0; }
      to { transform: scale(1); opacity: 1; }
    }

    .controls-panel {
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 100%;
      max-width: 420px;
    }

    .step-buttons {
      display: flex;
      gap: 6px;
      width: 100%;
    }

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

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

    .adjusters {
      display: flex;
      justify-content: space-between;
      gap: 8px;
    }

    .side-adjust {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      background: #ffffff;
      padding: 5px 8px;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
    }

    .side-title {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      margin-right: 2px;
    }

    .btn-mini {
      width: 28px;
      height: 26px;
      border: none;
      border-radius: 6px;
      background: #f1f5f9;
      color: #1e2945;
      font-weight: 700;
      font-size: 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s;
    }

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

    .btn-mini:active {
      background: #cbd5e1;
    }
  </style>
</head>
<body>

  
  <div class="equation-display">
    <span class="side-val" id="leftExpr">3 + 2</span>
    <span class="sign-badge sign-equal" id="signBadge">=</span>
    <span class="side-val" id="rightExpr">5</span>
  </div>

  
  <div class="scale-stage">
    <div class="pivot-point"></div>
    <div class="beam" id="beam">
      
      <div class="pan-assembly left" id="leftPan">
        <div class="weights-container" id="leftWeights"></div>
        <svg class="ropes" viewBox="0 0 80 60">
          <line x1="40" y1="0" x2="8" y2="60" stroke="#94a3b8" stroke-width="2" />
          <line x1="40" y1="0" x2="72" y2="60" stroke="#94a3b8" stroke-width="2" />
        </svg>
        <div class="pan-plate"></div>
      </div>

      
      <div class="pan-assembly right" id="rightPan">
        <div class="weights-container" id="rightWeights"></div>
        <svg class="ropes" viewBox="0 0 80 60">
          <line x1="40" y1="0" x2="8" y2="60" stroke="#94a3b8" stroke-width="2" />
          <line x1="40" y1="0" x2="72" y2="60" stroke="#94a3b8" stroke-width="2" />
        </svg>
        <div class="pan-plate"></div>
      </div>
    </div>
    <div class="fulcrum"></div>
    <div class="stand-base"></div>
  </div>

  
  <div class="controls-panel">
    <div class="step-buttons">
      <button class="step-btn active" onclick="loadPreset(0)">1. Balanced</button>
      <button class="step-btn" onclick="loadPreset(1)">2. Add to Left</button>
      <button class="step-btn" onclick="loadPreset(2)">3. Add to Right</button>
    </div>
    <div class="adjusters">
      <div class="side-adjust">
        <span class="side-title">Left</span>
        <button class="btn-mini" onclick="addWeight('left', -1)">−</button>
        <button class="btn-mini" onclick="addWeight('left', 1)">+</button>
      </div>
      <div class="side-adjust">
        <span class="side-title">Right</span>
        <button class="btn-mini" onclick="addWeight('right', -1)">−</button>
        <button class="btn-mini" onclick="addWeight('right', 1)">+</button>
      </div>
    </div>
  </div>

  <script>
    const presets = [
      { left: [3, 2], right: [5] },
      { left: [3, 2, 4], right: [5] },
      { left: [3, 2, 4], right: [5, 4] }
    ];

    let currentLeft = [3, 2];
    let currentRight = [5];
    let activePreset = 0;

    function sum(arr) {
      return arr.reduce((a, b) => a + b, 0);
    }

    function renderWeights(container, weights) {
      container.innerHTML = '';
      weights.forEach(w => {
        const div = document.createElement('div');
        const boundedW = Math.min(Math.max(w, 1), 5);
        div.className = `weight-block w-${boundedW}`;
        div.textContent = w;
        container.appendChild(div);
      });
    }

    function update() {
      const leftTotal = sum(currentLeft);
      const rightTotal = sum(currentRight);

      // Equation text
      document.getElementById('leftExpr').textContent = currentLeft.length ? currentLeft.join(' + ') : '0';
      document.getElementById('rightExpr').textContent = currentRight.length ? currentRight.join(' + ') : '0';

      // Equal sign
      const signBadge = document.getElementById('signBadge');
      if (leftTotal === rightTotal) {
        signBadge.textContent = '=';
        signBadge.className = 'sign-badge sign-equal';
      } else {
        signBadge.textContent = '≠';
        signBadge.className = 'sign-badge sign-unequal';
      }

      // Physics tilt (max ±14 degrees)
      const diff = leftTotal - rightTotal;
      const angle = Math.max(Math.min(-diff * 3.5, 14), -14);
      
      const beam = document.getElementById('beam');
      const leftPan = document.getElementById('leftPan');
      const rightPan = document.getElementById('rightPan');

      beam.style.transform = `translateX(-50%) rotate(${angle}deg)`;
      // Keep pans hanging upright relative to gravity
      leftPan.style.transform = `rotate(${-angle}deg)`;
      rightPan.style.transform = `rotate(${-angle}deg)`;

      // Render weight blocks
      renderWeights(document.getElementById('leftWeights'), currentLeft);
      renderWeights(document.getElementById('rightWeights'), currentRight);

      // Highlight matching preset button if applicable
      const btns = document.querySelectorAll('.step-btn');
      btns.forEach((btn, idx) => {
        const p = presets[idx];
        const isMatch = JSON.stringify(p.left) === JSON.stringify(currentLeft) &&
                        JSON.stringify(p.right) === JSON.stringify(currentRight);
        btn.classList.toggle('active', isMatch);
      });
    }

    function loadPreset(index) {
      activePreset = index;
      currentLeft = [...presets[index].left];
      currentRight = [...presets[index].right];
      update();
    }

    function addWeight(side, val) {
      const arr = side === 'left' ? currentLeft : currentRight;
      if (val > 0) {
        if (arr.length < 5) arr.push(1);
      } else {
        if (arr.length > 0) arr.pop();
      }
      update();
    }

    // Initialize
    loadPreset(0);
  </script>
</body>
</html>

What happens if you drop a heavy toy onto only one side?

If you add 1 block to the left side, that side sinks down because it is heavier! The scale is not equal anymore.

To make the scale level again, you must add 1 block to the right side too. This is **The Golden Rule of Equality**: any mathematical operation applied to one side must be identically applied to the other ($a = b \implies a \pm c = b \pm c$).

<!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>Balanced Scales Equation</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.8/katex.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.8/katex.min.js"></script>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px 16px;
      user-select: none;
    }

    .equation-display {
      font-size: 24px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
    }

    .scale-container {
      width: 100%;
      max-width: 380px;
      height: 220px;
      position: relative;
      margin: 10px auto;
    }

    /* Fulcrum Base */
    .fulcrum {
      position: absolute;
      bottom: 15px;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 0;
      border-left: 28px solid transparent;
      border-right: 28px solid transparent;
      border-bottom: 50px solid #64748b;
      z-index: 2;
    }
    .base-plate {
      position: absolute;
      bottom: 5px;
      left: 50%;
      transform: translateX(-50%);
      width: 120px;
      height: 10px;
      background: #475569;
      border-radius: 5px;
      z-index: 1;
    }

    /* Beam & Pivot */
    .beam-assembly {
      position: absolute;
      top: 75px;
      left: 50%;
      width: 300px;
      margin-left: -150px;
      transform-origin: 150px 8px;
      transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
      z-index: 3;
    }

    .pivot-dot {
      position: absolute;
      left: 150px;
      top: 8px;
      width: 14px;
      height: 14px;
      margin: -7px 0 0 -7px;
      background: #1e2945;
      border-radius: 50%;
      z-index: 10;
    }

    .beam-bar {
      width: 100%;
      height: 12px;
      background: #334155;
      border-radius: 6px;
    }

    /* Left & Right Suspended Pans */
    .pan-group {
      position: absolute;
      top: 8px;
      width: 90px;
      display: flex;
      flex-direction: column;
      align-items: center;
      transform-origin: top center;
      transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .pan-left { left: 5px; }
    .pan-right { right: 5px; }

    .strings {
      width: 60px;
      height: 45px;
      position: relative;
    }
    .string-line {
      position: absolute;
      top: 0;
      width: 2px;
      height: 48px;
      background: #94a3b8;
    }
    .string-line.l { left: 4px; transform: rotate(-15deg); transform-origin: top; }
    .string-line.r { right: 4px; transform: rotate(15deg); transform-origin: top; }

    .tray {
      width: 86px;
      height: 8px;
      background: #475569;
      border-radius: 4px;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      gap: 4px;
      padding-bottom: 8px;
    }

    /* Blocks */
    .block-stack {
      position: absolute;
      bottom: 8px;
      display: flex;
      gap: 3px;
      align-items: flex-end;
    }

    .block {
      width: 22px;
      height: 22px;
      background: #3b82f6;
      border-radius: 4px;
      color: #fff;
      font-size: 11px;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 4px rgba(0,0,0,0.15);
      transition: all 0.4s ease;
    }
    .block.new {
      background: #22c55e;
      transform: translateY(-20px);
      opacity: 0;
      animation: dropIn 0.4s 0.2s forwards ease;
    }

    @keyframes dropIn {
      to { transform: translateY(0); opacity: 1; }
    }

    /* Status Badge */
    .status-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 600;
      padding: 4px 12px;
      border-radius: 20px;
      transition: all 0.3s ease;
    }
    .status-balanced {
      background: #dcfce7;
      color: #15803d;
    }
    .status-unbalanced {
      background: #fee2e2;
      color: #b91c1c;
    }

    /* Stepper Controls */
    .controls {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 320px;
      justify-content: center;
      margin-top: 6px;
    }
    .step-btn {
      flex: 1;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      padding: 8px 10px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      transition: all 0.2s ease;
    }
    .step-btn.active {
      background: #eff6ff;
      border-color: #3b82f6;
      color: #1d4ed8;
      box-shadow: 0 2px 6px rgba(59, 130, 246, 0.15);
    }
  </style>
</head>
<body>

  <div class="equation-display" id="equation"></div>

  <div class="scale-container">
    <div class="fulcrum"></div>
    <div class="base-plate"></div>

    <div class="beam-assembly" id="beam">
      <div class="pivot-dot"></div>
      <div class="beam-bar"></div>

      
      <div class="pan-group pan-left" id="panLeft">
        <div class="strings">
          <div class="string-line l"></div>
          <div class="string-line r"></div>
        </div>
        <div class="tray">
          <div class="block-stack" id="leftBlocks"></div>
        </div>
      </div>

      
      <div class="pan-group pan-right" id="panRight">
        <div class="strings">
          <div class="string-line l"></div>
          <div class="string-line r"></div>
        </div>
        <div class="tray">
          <div class="block-stack" id="rightBlocks"></div>
        </div>
      </div>
    </div>
  </div>

  <div id="statusBadge" class="status-badge status-balanced">
    <span>✓</span> Balanced
  </div>

  <div class="controls">
    <button class="step-btn active" onclick="setStep(0)">
      <span>Step 1</span>
      <span>Start</span>
    </button>
    <button class="step-btn" onclick="setStep(1)">
      <span>Step 2</span>
      <span>+1 Left</span>
    </button>
    <button class="step-btn" onclick="setStep(2)">
      <span>Step 3</span>
      <span>+1 Right</span>
    </button>
  </div>

  <script>
    const steps = [
      {
        eq: "3 = 3",
        left: [1, 1, 1],
        right: [1, 1, 1],
        angle: 0,
        statusText: "✓ Balanced",
        statusClass: "status-balanced"
      },
      {
        eq: "3 + 1 \\neq 3",
        left: [1, 1, 1, { val: 1, isNew: true }],
        right: [1, 1, 1],
        angle: 12,
        statusText: "✕ Unbalanced",
        statusClass: "status-unbalanced"
      },
      {
        eq: "3 + 1 = 3 + 1",
        left: [1, 1, 1, 1],
        right: [1, 1, 1, { val: 1, isNew: true }],
        angle: 0,
        statusText: "✓ Balanced",
        statusClass: "status-balanced"
      }
    ];

    let currentStep = 0;
    let autoTimer = null;

    function renderBlocks(container, items) {
      container.innerHTML = '';
      items.forEach(item => {
        const div = document.createElement('div');
        div.className = 'block' + (item.isNew ? ' new' : '');
        div.textContent = typeof item === 'object' ? item.val : item;
        container.appendChild(div);
      });
    }

    function setStep(idx, manual = true) {
      currentStep = idx;
      const data = steps[idx];

      // Update Math
      katex.render(data.eq, document.getElementById('equation'), { throwOnError: false });

      // Update Scale Tilt (counter-rotate pans to hang straight)
      const beam = document.getElementById('beam');
      const panL = document.getElementById('panLeft');
      const panR = document.getElementById('panRight');

      beam.style.transform = `rotate(${data.angle}deg)`;
      panL.style.transform = `rotate(${-data.angle}deg)`;
      panR.style.transform = `rotate(${-data.angle}deg)`;

      // Render Blocks
      renderBlocks(document.getElementById('leftBlocks'), data.left);
      renderBlocks(document.getElementById('rightBlocks'), data.right);

      // Status
      const badge = document.getElementById('statusBadge');
      badge.className = `status-badge ${data.statusClass}`;
      badge.innerHTML = data.statusText;

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

      if (manual) {
        clearInterval(autoTimer);
      }
    }

    // Initialize
    setStep(0, false);

    // Pedagogical auto-cycle
    autoTimer = setInterval(() => {
      currentStep = (currentStep + 1) % steps.length;
      setStep(currentStep, false);
    }, 3200);
  </script>
</body>
</html>

What if we want to take blocks away instead of adding them?

The balance rule works for subtraction too! If you take 2 blocks off the left side, you must take 2 blocks off the right side.

<!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>Equations as Balanced Scales</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: #f8f9fa;
    color: #1e2945;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 100%;
    padding: 12px;
    user-select: none;
  }

  .header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
  }

  .equation-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #ffffff;
    padding: 8px 20px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    font-size: 22px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  .side-val {
    color: #1e2945;
    transition: color 0.3s ease;
  }
  .side-val.sub {
    color: #e67e22;
  }

  .sign {
    font-size: 20px;
    color: #2ecc71;
    font-weight: 800;
    transition: all 0.3s ease;
  }
  .sign.unequal {
    color: #e74c3c;
  }

  .status-badge {
    font-size: 13px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    background: #e8f8f0;
    color: #27ae60;
    transition: all 0.3s ease;
  }
  .status-badge.unequal {
    background: #fdeeed;
    color: #c0392b;
  }

  /* Scale Area */
  .scale-stage {
    width: 100%;
    max-width: 440px;
    height: 230px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }

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

  /* SVG Elements transition */
  #beam-group {
    transform-origin: 200px 85px;
    transition: transform 0.6s cubic-bezier(0.34, 1.3, 0.64, 1);
  }
  #left-pan, #right-pan {
    transition: transform 0.6s cubic-bezier(0.34, 1.3, 0.64, 1);
  }

  .block {
    transition: opacity 0.4s ease, transform 0.4s ease;
  }
  .block.removed {
    opacity: 0.15;
    stroke-dasharray: 3,3;
  }

  /* Controls */
  .btn-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 440px;
    margin-top: 4px;
  }

  .btn {
    flex: 1 1 120px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    background: #ffffff;
    color: #1e2945;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    cursor: pointer;
    text-align: center;
    transition: background 0.2s, box-shadow 0.2s, color 0.2s;
  }
  .btn:hover {
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  }
  .btn.active {
    background: #2ecc71;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(46, 204, 113, 0.35);
  }
  .btn.active.warn {
    background: #e74c3c;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.35);
  }
</style>
</head>
<body>

<div class="header">
  <div class="equation-box">
    <span class="side-val" id="eq-left">5</span>
    <span class="sign" id="eq-sign">=</span>
    <span class="side-val" id="eq-right">5</span>
  </div>
  <div class="status-badge" id="status-tag">Balanced ✓</div>
</div>

<div class="scale-stage">
  <svg viewBox="0 0 400 230">
    
    <path d="M 185 210 L 215 210 L 204 90 L 196 90 Z" fill="#94a3b8" />
    <path d="M 160 215 L 240 215 L 240 210 L 160 210 Z" fill="#64748b" rx="2" />
    <circle cx="200" cy="85" r="7" fill="#475569" />
    <circle cx="200" cy="85" r="3" fill="#f8f9fa" />

    
    <g id="beam-group">
      
      <rect x="55" y="82" width="290" height="6" rx="3" fill="#475569" />
      <circle cx="70" cy="85" r="4" fill="#334155" />
      <circle cx="330" cy="85" r="4" fill="#334155" />

      
      <g id="left-pan">
        <line x1="70" y1="85" x2="45" y2="155" stroke="#94a3b8" stroke-width="1.5" />
        <line x1="70" y1="85" x2="95" y2="155" stroke="#94a3b8" stroke-width="1.5" />
        <path d="M 35 155 Q 70 165 105 155 Z" fill="#cbd5e1" stroke="#94a3b8" stroke-width="1.5" />
        
        
        <g id="lb1" class="block"><rect x="42" y="137" width="16" height="16" rx="3" fill="#3b82f6" stroke="#1d4ed8" stroke-width="1.5"/></g>
        <g id="lb2" class="block"><rect x="62" y="137" width="16" height="16" rx="3" fill="#3b82f6" stroke="#1d4ed8" stroke-width="1.5"/></g>
        <g id="lb3" class="block"><rect x="82" y="137" width="16" height="16" rx="3" fill="#3b82f6" stroke="#1d4ed8" stroke-width="1.5"/></g>
        <g id="lb4" class="block"><rect x="52" y="119" width="16" height="16" rx="3" fill="#3b82f6" stroke="#1d4ed8" stroke-width="1.5"/></g>
        <g id="lb5" class="block"><rect x="72" y="119" width="16" height="16" rx="3" fill="#3b82f6" stroke="#1d4ed8" stroke-width="1.5"/></g>
      </g>

      
      <g id="right-pan">
        <line x1="330" y1="85" x2="305" y2="155" stroke="#94a3b8" stroke-width="1.5" />
        <line x1="330" y1="85" x2="355" y2="155" stroke="#94a3b8" stroke-width="1.5" />
        <path d="M 295 155 Q 330 165 365 155 Z" fill="#cbd5e1" stroke="#94a3b8" stroke-width="1.5" />

        
        <g id="rb1" class="block"><rect x="302" y="137" width="16" height="16" rx="3" fill="#10b981" stroke="#047857" stroke-width="1.5"/></g>
        <g id="rb2" class="block"><rect x="322" y="137" width="16" height="16" rx="3" fill="#10b981" stroke="#047857" stroke-width="1.5"/></g>
        <g id="rb3" class="block"><rect x="342" y="137" width="16" height="16" rx="3" fill="#10b981" stroke="#047857" stroke-width="1.5"/></g>
        <g id="rb4" class="block"><rect x="312" y="119" width="16" height="16" rx="3" fill="#10b981" stroke="#047857" stroke-width="1.5"/></g>
        <g id="rb5" class="block"><rect x="332" y="119" width="16" height="16" rx="3" fill="#10b981" stroke="#047857" stroke-width="1.5"/></g>
      </g>
    </g>
  </svg>
</div>

<div class="btn-group">
  <button class="btn active" onclick="setMode(0)">Start (5 = 5)</button>
  <button class="btn" onclick="setMode(1)">−2 Both Sides</button>
  <button class="btn" onclick="setMode(2)">−2 Left Side</button>
</div>

<script>
  const states = [
    {
      angle: 0,
      eqLeft: "5",
      eqRight: "5",
      sign: "=",
      equal: true,
      leftRemoved: 0,
      rightRemoved: 0,
      status: "Balanced ✓"
    },
    {
      angle: 0,
      eqLeft: "5 − 2",
      eqRight: "5 − 2",
      sign: "=",
      equal: true,
      leftRemoved: 2,
      rightRemoved: 2,
      status: "Balanced ✓"
    },
    {
      angle: 9, // Left goes UP (lighter), right goes DOWN
      eqLeft: "5 − 2",
      eqRight: "5",
      sign: "≠",
      equal: false,
      leftRemoved: 2,
      rightRemoved: 0,
      status: "Unbalanced ✕"
    }
  ];

  function setMode(idx) {
    const s = states[idx];
    const beam = document.getElementById('beam-group');
    const leftPan = document.getElementById('left-pan');
    const rightPan = document.getElementById('right-pan');
    const eqLeft = document.getElementById('eq-left');
    const eqRight = document.getElementById('eq-right');
    const eqSign = document.getElementById('eq-sign');
    const statusTag = document.getElementById('status-tag');
    const buttons = document.querySelectorAll('.btn');

    // Update buttons
    buttons.forEach((b, i) => {
      b.classList.toggle('active', i === idx);
      b.classList.toggle('warn', i === idx && !s.equal);
    });

    // Rotate beam & counter-rotate pans to stay upright
    beam.style.transform = `rotate(${s.angle}deg)`;
    leftPan.style.transform = `rotate(${-s.angle}deg)`;
    leftPan.style.transformOrigin = `70px 85px`;
    rightPan.style.transform = `rotate(${-s.angle}deg)`;
    rightPan.style.transformOrigin = `330px 85px`;

    // Blocks visibility
    ['lb4', 'lb5'].forEach((id, i) => {
      document.getElementById(id).classList.toggle('removed', i < s.leftRemoved);
    });
    ['rb4', 'rb5'].forEach((id, i) => {
      document.getElementById(id).classList.toggle('removed', i < s.rightRemoved);
    });

    // Update equation & badge
    eqLeft.textContent = s.eqLeft;
    eqRight.textContent = s.eqRight;
    eqLeft.classList.toggle('sub', s.leftRemoved > 0);
    eqRight.classList.toggle('sub', s.rightRemoved > 0);

    eqSign.textContent = s.sign;
    eqSign.classList.toggle('unequal', !s.equal);

    statusTag.textContent = s.status;
    statusTag.classList.toggle('unequal', !s.equal);
  }
</script>

</body>
</html>

How can this balance trick help us find a secret hidden number?

Imagine a **mystery box** and 2 coins on the left side, perfectly balanced with 5 coins on the right side.

If you take 2 coins away from both sides, only the mystery box is left on the left — and it balances with 3 coins on the right! That means the box has **3** inside.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <link rel="stylesheet" href="{{VENDOR_CDN}}/katex.min.css">
  <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;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px;
      user-select: none;
    }

    .eq-display {
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      font-weight: 600;
      color: #1e2945;
    }

    .scale-container {
      width: 100%;
      max-width: 480px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

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

    /* Interactive item transitions */
    .removable {
      transition: transform 0.4s ease, opacity 0.4s ease;
      transform-box: fill-box;
      transform-origin: center;
    }

    .state-1 .removable {
      transform: translateY(-16px);
      opacity: 0.35;
    }

    .state-2 .removable {
      transform: translateY(-24px);
      opacity: 0;
      pointer-events: none;
    }

    .badge-sub {
      opacity: 0;
      transition: opacity 0.3s ease, transform 0.3s ease;
      transform-origin: center;
    }

    .state-1 .badge-sub {
      opacity: 1;
      transform: translateY(-4px);
    }

    .state-2 .badge-sub {
      opacity: 0;
    }

    .box-val {
      font-weight: 700;
      font-size: 16px;
      fill: #ffffff;
      transition: fill 0.3s ease;
    }

    .box-rect {
      transition: fill 0.3s ease, stroke 0.3s ease;
    }

    .state-2 .box-rect {
      fill: #8e44ad;
      stroke: #732d91;
    }

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

    .step-btn {
      flex: 1;
      padding: 8px 10px;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      background: #ffffff;
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }

    .step-btn.active {
      background: #8e44ad;
      border-color: #8e44ad;
      color: #ffffff;
    }

    .play-btn {
      width: 38px;
      padding: 0;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: #1e2945;
    }
  </style>
</head>
<body>

  
  <div class="eq-display" id="mathEq"></div>

  
  <div class="scale-container">
    <svg id="scaleSvg" viewBox="0 0 420 210" class="state-0">
      <defs>
        <linearGradient id="coinGrad" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stop-color="#fcd34d" />
          <stop offset="100%" stop-color="#f59e0b" />
        </linearGradient>
        <filter id="shadow" x="-10%" y="-10%" width="120%" height="130%">
          <feDropShadow dx="0" dy="2" stdDeviation="2" flood-opacity="0.12" />
        </filter>
      </defs>

      
      <path d="M 210,130 L 195,185 L 225,185 Z" fill="#94a3b8" />
      <rect x="175" y="185" width="70" height="8" rx="4" fill="#64748b" />

      
      <circle cx="210" cy="130" r="5" fill="#475569" />

      
      <line x1="85" y1="130" x2="335" y2="130" stroke="#64748b" stroke-width="5" stroke-linecap="round" />

      
      <line x1="85" y1="130" x2="55" y2="175" stroke="#cbd5e1" stroke-width="2" />
      <line x1="85" y1="130" x2="115" y2="175" stroke="#cbd5e1" stroke-width="2" />
      <rect x="45" y="175" width="80" height="6" rx="3" fill="#64748b" />

      
      <line x1="335" y1="130" x2="305" y2="175" stroke="#cbd5e1" stroke-width="2" />
      <line x1="335" y1="130" x2="365" y2="175" stroke="#cbd5e1" stroke-width="2" />
      <rect x="295" y="175" width="80" height="6" rx="3" fill="#64748b" />

      
      <g id="leftItems">
        
        <g filter="url(#shadow)">
          <rect id="mysteryBox" class="box-rect" x="52" y="137" width="34" height="34" rx="6" fill="#9333ea" stroke="#7e22ce" stroke-width="1.5" />
          <text id="boxText" class="box-val" x="69" y="160" text-anchor="middle" dominant-baseline="middle">x</text>
        </g>

        
        <g class="removable" filter="url(#shadow)">
          <circle cx="102" cy="162" r="10" fill="url(#coinGrad)" stroke="#d97706" stroke-width="1.2" />
          <text x="102" y="163" font-size="11" font-weight="700" fill="#78350f" text-anchor="middle" dominant-baseline="middle">1</text>

          <circle cx="102" cy="140" r="10" fill="url(#coinGrad)" stroke="#d97706" stroke-width="1.2" />
          <text x="102" y="141" font-size="11" font-weight="700" fill="#78350f" text-anchor="middle" dominant-baseline="middle">1</text>
        </g>

        
        <g class="badge-sub">
          <rect x="88" y="105" width="28" height="18" rx="4" fill="#ef4444" />
          <text x="102" y="115" font-size="11" font-weight="700" fill="#ffffff" text-anchor="middle" dominant-baseline="middle">−2</text>
        </g>
      </g>

      
      <g id="rightItems">
        
        <g filter="url(#shadow)">
          
          <circle cx="312" cy="162" r="10" fill="url(#coinGrad)" stroke="#d97706" stroke-width="1.2" />
          <text x="312" y="163" font-size="11" font-weight="700" fill="#78350f" text-anchor="middle" dominant-baseline="middle">1</text>

          
          <circle cx="335" cy="162" r="10" fill="url(#coinGrad)" stroke="#d97706" stroke-width="1.2" />
          <text x="335" y="163" font-size="11" font-weight="700" fill="#78350f" text-anchor="middle" dominant-baseline="middle">1</text>

          
          <circle cx="323.5" cy="140" r="10" fill="url(#coinGrad)" stroke="#d97706" stroke-width="1.2" />
          <text x="323.5" y="141" font-size="11" font-weight="700" fill="#78350f" text-anchor="middle" dominant-baseline="middle">1</text>
        </g>

        
        <g class="removable" filter="url(#shadow)">
          <circle cx="356" cy="162" r="10" fill="url(#coinGrad)" stroke="#d97706" stroke-width="1.2" />
          <text x="356" y="163" font-size="11" font-weight="700" fill="#78350f" text-anchor="middle" dominant-baseline="middle">1</text>

          <circle cx="345" cy="140" r="10" fill="url(#coinGrad)" stroke="#d97706" stroke-width="1.2" />
          <text x="345" y="141" font-size="11" font-weight="700" fill="#78350f" text-anchor="middle" dominant-baseline="middle">1</text>
        </g>

        
        <g class="badge-sub">
          <rect x="338" y="105" width="28" height="18" rx="4" fill="#ef4444" />
          <text x="352" y="115" font-size="11" font-weight="700" fill="#ffffff" text-anchor="middle" dominant-baseline="middle">−2</text>
        </g>
      </g>
    </svg>
  </div>

  
  <div class="controls">
    <button class="step-btn active" data-step="0">1. Start</button>
    <button class="step-btn" data-step="1">2. − 2</button>
    <button class="step-btn" data-step="2">3. Solved</button>
    <button class="play-btn" id="playBtn" title="Play/Pause">⏸</button>
  </div>

  <script src="{{VENDOR_CDN}}/katex.min.js"></script>
  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <script>
    const equations = [
      "x + 2 = 5",
      "x + 2 \\mathbf{\\color{#ef4444}{- 2}} = 5 \\mathbf{\\color{#ef4444}{- 2}}",
      "x = 3"
    ];

    const boxTexts = ["x", "x", "3"];
    const mathEq = document.getElementById("mathEq");
    const scaleSvg = document.getElementById("scaleSvg");
    const boxText = document.getElementById("boxText");
    const stepBtns = document.querySelectorAll(".step-btn");
    const playBtn = document.getElementById("playBtn");

    let currentStep = 0;
    let isPlaying = true;
    let timer = null;

    function renderStep(idx) {
      currentStep = idx;
      scaleSvg.setAttribute("class", "state-" + idx);
      boxText.textContent = boxTexts[idx];

      if (window.katex) {
        katex.render(equations[idx], mathEq, { throwOnError: false });
      } else {
        mathEq.textContent = equations[idx].replace(/\\mathbf\{|\\color\{#[a-f0-9]+\}|\}/g, "");
      }

      stepBtns.forEach((btn, i) => {
        btn.classList.toggle("active", i === idx);
      });
    }

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

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

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

    stepBtns.forEach((btn) => {
      btn.addEventListener("click", () => {
        renderStep(parseInt(btn.getAttribute("data-step"), 10));
        pauseAutoPlay();
      });
    });

    playBtn.addEventListener("click", () => {
      if (isPlaying) {
        pauseAutoPlay();
      } else {
        nextStep();
        startAutoPlay();
      }
    });

    // Initialize
    renderStep(0);
    startAutoPlay();
  </script>
</body>
</html>

This fundamental principle is known as **The Golden Rule of Equality**: any operation performed on one side of an equation must be identically applied to the other side ($a = b \implies a \pm c = b \pm c$).

Whether you use **addition, subtraction, multiplication, or division**, performing the same operation on both sides keeps the scale perfectly in **balance**.

math

Understanding Equations as Balanced Scales. Model equations visually and recognize that equal operations must be performed on both sides.

Equality Explorer: Basics & Variables

Why We Do the Same Thing to Both Sides of Simple Equations

Number Balance and Balance Scale Problems

Adopt a Concrete-Representational-Abstract (CRA) instructional sequence. Begin with hands-on pan balances and physical weights or counters with opaque mystery containers. Progress to schematic drawings of scales and bar models to reinforce equivalence before introducing purely symbolic algebraic manipulation. Continually emphasize the relational meaning of the equals sign by verbalizing 'balances with' or 'is equivalent to' alongside 'equals'.

Understanding Equations as Balanced Scales

Keeping the Balance

Taking Away from Both Sides