<!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: system-ui, -apple-system, sans-serif;
    }

    body {
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px 16px;
      user-select: none;
    }

    /* Controls Bar */
    .controls {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
      z-index: 10;
    }

    .step-btn {
      background: #f1f5f9;
      border: 2px solid transparent;
      color: #475569;
      font-size: 14px;
      font-weight: 600;
      padding: 6px 14px;
      border-radius: 20px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .step-btn.active {
      background: #e0f2fe;
      border-color: #22b7ff;
      color: #0284c7;
    }

    .play-btn {
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      color: #64748b;
      font-size: 13px;
      padding: 6px 10px;
      border-radius: 20px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    /* SVG Scale Container */
    .scale-container {
      width: 100%;
      max-width: 460px;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }

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

    /* Animated parts */
    .beam-group {
      transform-origin: 200px 120px;
      transition: transform 0.6s cubic-bezier(0.34, 1.2, 0.64, 1);
    }

    .pan-left-group, .pan-right-group {
      transition: transform 0.6s cubic-bezier(0.34, 1.2, 0.64, 1);
    }

    .pan-left-group {
      transform-origin: 70px 120px;
    }

    .pan-right-group {
      transform-origin: 330px 120px;
    }

    .marble {
      transition: opacity 0.3s ease, transform 0.4s ease;
      transform-origin: center;
    }

    .marble.hidden {
      opacity: 0;
      transform: translateY(-20px) scale(0.6);
      pointer-events: none;
    }

    /* Status Banner */
    .status-badge {
      font-size: 15px;
      font-weight: 700;
      padding: 8px 18px;
      border-radius: 30px;
      text-align: center;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: all 0.3s ease;
      background: #f8fafc;
      color: #64748b;
      border: 1px solid #e2e8f0;
      min-height: 40px;
    }

    .status-badge.balanced {
      background: #ecfdf5;
      color: #059669;
      border-color: #10b981;
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
      font-size: 16px;
    }
  </style>
</head>
<body>

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

  
  <div class="scale-container">
    <svg viewBox="0 0 400 280">
      <defs>
        
        <radialGradient id="marbleGlow" cx="35%" cy="30%" r="65%">
          <stop offset="0%" stop-color="#86efac" />
          <stop offset="35%" stop-color="#22c55e" />
          <stop offset="85%" stop-color="#15803d" />
          <stop offset="100%" stop-color="#14532d" />
        </radialGradient>
        
        
        <linearGradient id="beamGrad" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stop-color="#94a3b8" />
          <stop offset="50%" stop-color="#64748b" />
          <stop offset="100%" stop-color="#475569" />
        </linearGradient>

        
        <linearGradient id="standGrad" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" stop-color="#cbd5e1" />
          <stop offset="50%" stop-color="#94a3b8" />
          <stop offset="100%" stop-color="#64748b" />
        </linearGradient>
      </defs>

      
      <polygon points="175,250 225,250 210,135 190,135" fill="url(#standGrad)" />
      <rect x="150" y="250" width="100" height="12" rx="6" fill="#475569" />
      <circle cx="200" cy="120" r="14" fill="#334155" />
      <circle cx="200" cy="120" r="6" fill="#f8fafc" />

      
      <g id="beam" class="beam-group">
        
        <rect x="65" y="115" width="270" height="10" rx="5" fill="url(#beamGrad)" />
        <circle cx="70" cy="120" r="5" fill="#334155" />
        <circle cx="330" cy="120" r="5" fill="#334155" />
        <line x1="200" y1="120" x2="200" y2="85" stroke="#ef4444" stroke-width="3" stroke-linecap="round" />

        
        <g id="leftPan" class="pan-left-group">
          
          <line x1="70" y1="120" x2="40" y2="185" stroke="#94a3b8" stroke-width="1.5" />
          <line x1="70" y1="120" x2="100" y2="185" stroke="#94a3b8" stroke-width="1.5" />
          
          <path d="M 35 185 Q 70 205 105 185 Z" fill="#64748b" />
          <ellipse cx="70" cy="185" rx="35" ry="6" fill="#94a3b8" />
          
          
          <g transform="translate(48, 150)">
            
            <path d="M 4 24 C 4 18, 8 16, 14 16 L 20 16 L 26 8 L 36 8 L 40 16 L 44 16 C 47 16, 48 19, 48 24 Z" fill="#ef4444" />
            
            <polygon points="21,15 26,9 35,9 38,15" fill="#bae6fd" opacity="0.9" />
            
            <circle cx="14" cy="25" r="5" fill="#1e293b" />
            <circle cx="14" cy="25" r="2" fill="#94a3b8" />
            <circle cx="38" cy="25" r="5" fill="#1e293b" />
            <circle cx="38" cy="25" r="2" fill="#94a3b8" />
            
            <rect x="4" y="19" width="2" height="3" rx="1" fill="#fef08a" />
          </g>
        </g>

        
        <g id="rightPan" class="pan-right-group">
          
          <line x1="330" y1="120" x2="300" y2="185" stroke="#94a3b8" stroke-width="1.5" />
          <line x1="330" y1="120" x2="360" y2="185" stroke="#94a3b8" stroke-width="1.5" />
          
          <path d="M 295 185 Q 330 205 365 185 Z" fill="#64748b" />
          <ellipse cx="330" cy="185" rx="35" ry="6" fill="#94a3b8" />

          
          
          <g id="m1" class="marble hidden" transform="translate(315, 175)">
            <circle cx="0" cy="0" r="10" fill="url(#marbleGlow)" />
            <path d="M -5 -4 Q 0 1 5 -2" stroke="rgba(255,255,255,0.7)" stroke-width="1.5" fill="none" stroke-linecap="round" />
            <circle cx="-3" cy="-4" r="2" fill="#ffffff" opacity="0.8" />
          </g>

          
          <g id="m2" class="marble hidden" transform="translate(345, 175)">
            <circle cx="0" cy="0" r="10" fill="url(#marbleGlow)" />
            <path d="M -5 -4 Q 0 1 5 -2" stroke="rgba(255,255,255,0.7)" stroke-width="1.5" fill="none" stroke-linecap="round" />
            <circle cx="-3" cy="-4" r="2" fill="#ffffff" opacity="0.8" />
          </g>

          
          <g id="m3" class="marble hidden" transform="translate(330, 177)">
            <circle cx="0" cy="0" r="10" fill="url(#marbleGlow)" />
            <path d="M -5 -4 Q 0 1 5 -2" stroke="rgba(255,255,255,0.7)" stroke-width="1.5" fill="none" stroke-linecap="round" />
            <circle cx="-3" cy="-4" r="2" fill="#ffffff" opacity="0.8" />
          </g>

          
          <g id="m4" class="marble hidden" transform="translate(330, 160)">
            <circle cx="0" cy="0" r="10" fill="url(#marbleGlow)" />
            <path d="M -5 -4 Q 0 1 5 -2" stroke="rgba(255,255,255,0.7)" stroke-width="1.5" fill="none" stroke-linecap="round" />
            <circle cx="-3" cy="-4" r="2" fill="#ffffff" opacity="0.8" />
          </g>
        </g>
      </g>
    </svg>
  </div>

  
  <div id="statusBadge" class="status-badge">
    0 Marbles Added
  </div>

  <script>
    const steps = [
      {
        angle: 12,
        marbles: [false, false, false, false],
        text: '0 Marbles · Left side tilted down',
        balanced: false
      },
      {
        angle: 6,
        marbles: [true, true, false, false],
        text: '2 Marbles added',
        balanced: false
      },
      {
        angle: 0,
        marbles: [true, true, true, true],
        text: '✓ Balanced! Weight = 4 marbles',
        balanced: true
      }
    ];

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

    const beam = document.getElementById('beam');
    const leftPan = document.getElementById('leftPan');
    const rightPan = document.getElementById('rightPan');
    const badge = document.getElementById('statusBadge');
    const playBtn = document.getElementById('playBtn');

    function render() {
      const s = steps[currentStep];

      // Update button tabs
      for (let i = 0; i < 3; i++) {
        document.getElementById('btn' + i).classList.toggle('active', i === currentStep);
      }

      // Rotate beam (positive angle in SVG tilts left pan DOWN)
      beam.style.transform = `rotate(${s.angle}deg)`;
      leftPan.style.transform = `rotate(${-s.angle}deg)`;
      rightPan.style.transform = `rotate(${-s.angle}deg)`;

      // Toggle marbles
      for (let i = 1; i <= 4; i++) {
        const m = document.getElementById('m' + i);
        if (s.marbles[i - 1]) {
          m.classList.remove('hidden');
        } else {
          m.classList.add('hidden');
        }
      }

      // Update status badge
      badge.textContent = s.text;
      badge.classList.toggle('balanced', s.balanced);
    }

    function setStep(idx) {
      currentStep = idx;
      render();
    }

    function nextStep() {
      currentStep = (currentStep + 1) % steps.length;
      render();
    }

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

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

    // Initial run
    render();
    startTimer();
  </script>
</body>
</html>

Measuring Weight Using Marbles as Units

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

    .nav-tabs {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 440px;
      justify-content: center;
    }

    .tab-btn {
      flex: 1;
      padding: 8px 4px;
      border: 2px solid #e2e8f0;
      border-radius: 10px;
      background: #ffffff;
      color: #64748b;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      transition: all 0.25s ease;
    }

    .tab-btn span {
      font-size: 11px;
      font-weight: 500;
      color: #94a3b8;
    }

    .tab-btn.active {
      border-color: #0284c7;
      background: #f0f9ff;
      color: #0284c7;
      box-shadow: 0 2px 8px rgba(2, 132, 199, 0.15);
    }
    .tab-btn.active span {
      color: #0369a1;
      font-weight: 600;
    }

    .scale-container {
      width: 100%;
      max-width: 460px;
      height: 240px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

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

    .beam-group, .left-pan, .right-pan {
      transition: transform 0.5s cubic-bezier(0.34, 1.3, 0.64, 1);
    }

    .status-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 16px;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 700;
      background: #e2e8f0;
      color: #334155;
      transition: all 0.3s ease;
    }

    .status-badge.balanced {
      background: #ecfdf5;
      color: #059669;
      border: 1px solid #a7f3d0;
    }
    .status-badge.tilted {
      background: #f8fafc;
      color: #475569;
      border: 1px solid #cbd5e1;
    }

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

    .play-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #475569;
      border-radius: 8px;
      padding: 4px 10px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
    }
  </style>
</head>
<body>

  
  <div class="nav-tabs">
    <button class="tab-btn active" onclick="setStep(0)">
      2 Marbles
      <span>Too Few</span>
    </button>
    <button class="tab-btn" onclick="setStep(1)">
      3 Marbles
      <span>Just Right ✨</span>
    </button>
    <button class="tab-btn" onclick="setStep(2)">
      5 Marbles
      <span>Too Many</span>
    </button>
  </div>

  
  <div class="scale-container">
    <svg viewBox="0 0 400 240">
      <defs>
        
        <radialGradient id="marbleGrad" cx="35%" cy="35%" r="65%">
          <stop offset="0%" stop-color="#93c5fd" />
          <stop offset="40%" stop-color="#3b82f6" />
          <stop offset="100%" stop-color="#1d4ed8" />
        </radialGradient>
        <radialGradient id="marbleGlow" cx="30%" cy="30%" r="40%">
          <stop offset="0%" stop-color="#ffffff" stop-opacity="0.8" />
          <stop offset="100%" stop-color="#ffffff" stop-opacity="0" />
        </radialGradient>

        
        <linearGradient id="metalGrad" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stop-color="#cbd5e1" />
          <stop offset="100%" stop-color="#94a3b8" />
        </linearGradient>
      </defs>

      
      <line x1="50" y1="90" x2="350" y2="90" stroke="#cbd5e1" stroke-width="1.5" stroke-dasharray="4,4" />

      
      <polygon points="200,86 175,200 225,200" fill="#64748b" />
      <rect x="155" y="198" width="90" height="12" rx="4" fill="#475569" />
      <circle cx="200" cy="90" r="7" fill="#0f172a" />
      <circle cx="200" cy="90" r="3.5" fill="#f8fafc" />

      
      <g id="beamGroup" class="beam-group" style="transform-origin: 200px 90px; transform: rotate(-10deg);">
        
        <rect x="60" y="86" width="280" height="8" rx="4" fill="#334155" />

        
        <g id="leftPan" class="left-pan" style="transform-origin: 75px 90px; transform: rotate(10deg);">
          
          <line x1="75" y1="90" x2="45" y2="148" stroke="#94a3b8" stroke-width="1.5" />
          <line x1="75" y1="90" x2="105" y2="148" stroke="#94a3b8" stroke-width="1.5" />
          
          <path d="M 40 148 Q 75 162 110 148 Z" fill="url(#metalGrad)" stroke="#64748b" stroke-width="1.5" />
          
          <text x="75" y="142" font-size="34" text-anchor="middle" dominant-baseline="auto">🦆</text>
        </g>

        
        <g id="rightPan" class="right-pan" style="transform-origin: 325px 90px; transform: rotate(10deg);">
          
          <line x1="325" y1="90" x2="295" y2="148" stroke="#94a3b8" stroke-width="1.5" />
          <line x1="325" y1="90" x2="355" y2="148" stroke="#94a3b8" stroke-width="1.5" />
          
          <path d="M 290 148 Q 325 162 360 148 Z" fill="url(#metalGrad)" stroke="#64748b" stroke-width="1.5" />
          
          
          <g id="marblesContainer">
            
            <g id="m1" transform="translate(312, 140)">
              <circle cx="0" cy="0" r="9" fill="url(#marbleGrad)" />
              <circle cx="0" cy="0" r="9" fill="url(#marbleGlow)" />
            </g>
            
            <g id="m2" transform="translate(338, 140)">
              <circle cx="0" cy="0" r="9" fill="url(#marbleGrad)" />
              <circle cx="0" cy="0" r="9" fill="url(#marbleGlow)" />
            </g>
            
            <g id="m3" transform="translate(325, 124)">
              <circle cx="0" cy="0" r="9" fill="url(#marbleGrad)" />
              <circle cx="0" cy="0" r="9" fill="url(#marbleGlow)" />
            </g>
            
            <g id="m4" transform="translate(305, 120)" style="display: none;">
              <circle cx="0" cy="0" r="9" fill="url(#marbleGrad)" />
              <circle cx="0" cy="0" r="9" fill="url(#marbleGlow)" />
            </g>
            
            <g id="m5" transform="translate(345, 120)" style="display: none;">
              <circle cx="0" cy="0" r="9" fill="url(#marbleGrad)" />
              <circle cx="0" cy="0" r="9" fill="url(#marbleGlow)" />
            </g>
          </g>
        </g>
      </g>

      
      <g id="starGroup" style="opacity: 0; transition: opacity 0.3s ease;">
        <text x="200" y="60" font-size="20" text-anchor="middle" fill="#eab308">✨ LEVEL ✨</text>
      </g>
    </svg>
  </div>

  
  <div class="status-badge tilted" id="statusBadge">
    <span>🦆 Duck is Heavier</span>
  </div>

  <div class="controls-row">
    <button class="play-btn" id="playBtn" onclick="toggleAuto()">
      <span id="playIcon">⏸</span> Auto-Play
    </button>
  </div>

  <script>
    const states = [
      {
        angle: -10,
        marbles: 2,
        badgeClass: 'status-badge tilted',
        badgeText: '🦆 Duck is Heavier (Too Few)',
        showStars: false
      },
      {
        angle: 0,
        marbles: 3,
        badgeClass: 'status-badge balanced',
        badgeText: '⚖️ Perfectly Balanced (3 Marbles)',
        showStars: true
      },
      {
        angle: 10,
        marbles: 5,
        badgeClass: 'status-badge tilted',
        badgeText: '🔵 Marbles are Heavier (Too Many)',
        showStars: false
      }
    ];

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

    const beam = document.getElementById('beamGroup');
    const leftPan = document.getElementById('leftPan');
    const rightPan = document.getElementById('rightPan');
    const starGroup = document.getElementById('starGroup');
    const statusBadge = document.getElementById('statusBadge');
    const tabs = document.querySelectorAll('.tab-btn');
    const playIcon = document.getElementById('playIcon');

    function setStep(index) {
      currentStep = index;
      const s = states[index];

      // Update tabs
      tabs.forEach((tab, i) => {
        tab.classList.toggle('active', i === index);
      });

      // Update rotation
      beam.style.transform = `rotate(${s.angle}deg)`;
      leftPan.style.transform = `rotate(${-s.angle}deg)`;
      rightPan.style.transform = `rotate(${-s.angle}deg)`;

      // Update marbles visibility
      for (let i = 1; i <= 5; i++) {
        const m = document.getElementById(`m${i}`);
        m.style.display = i <= s.marbles ? 'block' : 'none';
      }

      // Update stars
      starGroup.style.opacity = s.showStars ? '1' : '0';

      // Update status badge
      statusBadge.className = s.badgeClass;
      statusBadge.innerHTML = s.badgeText;
    }

    function nextStep() {
      setStep((currentStep + 1) % states.length);
    }

    function startAuto() {
      if (autoInterval) clearInterval(autoInterval);
      autoInterval = setInterval(nextStep, 3200);
      isPlaying = true;
      playIcon.textContent = '⏸';
    }

    function stopAuto() {
      if (autoInterval) clearInterval(autoInterval);
      isPlaying = false;
      playIcon.textContent = '▶';
    }

    function toggleAuto() {
      if (isPlaying) {
        stopAuto();
      } else {
        nextStep();
        startAuto();
      }
    }

    // Initialize
    setStep(0);
    startAuto();
  </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;
      width: 100%;
      min-height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px 16px;
      user-select: none;
      -webkit-user-select: none;
    }

    .controls {
      display: flex;
      gap: 8px;
      margin-bottom: 8px;
      z-index: 10;
    }

    .tab-btn {
      background: #f1f5f9;
      border: 2px solid #e2e8f0;
      color: #475569;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.25s ease;
    }

    .tab-btn.active {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
    }

    .diagram-area {
      width: 100%;
      max-width: 540px;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      flex: 1;
    }

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

    .label-badge {
      font-size: 15px;
      font-weight: 800;
      letter-spacing: -0.2px;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .badge-down {
      fill: #1e40af;
    }
    .badge-up {
      fill: #b45309;
    }
    .badge-equal {
      fill: #047857;
    }
  </style>
</head>
<body>

  <div class="controls">
    <button class="tab-btn active" id="btnLeft" onclick="setState('left')">Left Heavy</button>
    <button class="tab-btn" id="btnEqual" onclick="setState('equal')">Balanced</button>
    <button class="tab-btn" id="btnRight" onclick="setState('right')">Right Heavy</button>
  </div>

  <div class="diagram-area">
    <svg viewBox="0 0 540 360">
      <defs>
        
        <linearGradient id="fulcrumGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#38bdf8"/>
          <stop offset="100%" stop-color="#0284c7"/>
        </linearGradient>

        <linearGradient id="beamGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#fbbf24"/>
          <stop offset="100%" stop-color="#d97706"/>
        </linearGradient>

        <linearGradient id="blockGrad" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stop-color="#3b82f6"/>
          <stop offset="100%" stop-color="#1d4ed8"/>
        </linearGradient>

        <linearGradient id="panGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#94a3b8"/>
          <stop offset="100%" stop-color="#64748b"/>
        </linearGradient>

        
        <filter id="shadow" x="-10%" y="-10%" width="130%" height="130%">
          <feDropShadow dx="0" dy="4" stdDeviation="3" flood-opacity="0.15"/>
        </filter>
      </defs>

      
      <line x1="30" y1="330" x2="510" y2="330" stroke="#e2e8f0" stroke-width="4" stroke-linecap="round"/>

      
      <g>
        <polygon points="270,185 210,330 330,330" fill="url(#fulcrumGrad)"/>
        
        <rect x="195" y="322" width="150" height="10" rx="5" fill="#0369a1"/>
        
        <circle cx="270" cy="185" r="9" fill="#0f172a"/>
        <circle cx="270" cy="185" r="4" fill="#ffffff"/>
      </g>

      
      <g id="scaleSystem">
        
        <g id="beamWrapper" style="transform-origin: 270px 185px; transition: transform 0.6s cubic-bezier(0.34, 1.4, 0.64, 1);">
          <rect x="70" y="177" width="400" height="16" rx="8" fill="url(#beamGrad)" filter="url(#shadow)"/>
          <circle cx="95" cy="185" r="5" fill="#b45309"/>
          <circle cx="445" cy="185" r="5" fill="#b45309"/>
        </g>

        
        <g id="leftAssembly" style="transition: transform 0.6s cubic-bezier(0.34, 1.4, 0.64, 1);">
          
          <line x1="95" y1="185" x2="55" y2="255" stroke="#94a3b8" stroke-width="2.5" stroke-linecap="round"/>
          <line x1="95" y1="185" x2="135" y2="255" stroke="#94a3b8" stroke-width="2.5" stroke-linecap="round"/>
          
          <path d="M 45 255 Q 95 285 145 255 Z" fill="url(#panGrad)" filter="url(#shadow)"/>
          <ellipse cx="95" cy="255" rx="50" ry="6" fill="#cbd5e1"/>

          
          <g id="leftBlock">
            <rect x="70" y="206" width="50" height="50" rx="8" fill="url(#blockGrad)" filter="url(#shadow)"/>
            <rect x="74" y="210" width="42" height="42" rx="6" fill="none" stroke="#60a5fa" stroke-width="2" opacity="0.8"/>
            <text x="95" y="238" fill="#ffffff" font-size="22" font-weight="900" text-anchor="middle" dominant-baseline="middle">A</text>
          </g>
        </g>

        
        <g id="rightAssembly" style="transition: transform 0.6s cubic-bezier(0.34, 1.4, 0.64, 1);">
          
          <line x1="445" y1="185" x2="405" y2="255" stroke="#94a3b8" stroke-width="2.5" stroke-linecap="round"/>
          <line x1="445" y1="185" x2="485" y2="255" stroke="#94a3b8" stroke-width="2.5" stroke-linecap="round"/>
          
          <path d="M 395 255 Q 445 285 495 255 Z" fill="url(#panGrad)" filter="url(#shadow)"/>
          <ellipse cx="445" cy="255" rx="50" ry="6" fill="#cbd5e1"/>

          
          <g id="rightBlock" style="opacity: 0;">
            <rect x="420" y="206" width="50" height="50" rx="8" fill="url(#blockGrad)" filter="url(#shadow)"/>
            <rect x="424" y="210" width="42" height="42" rx="6" fill="none" stroke="#60a5fa" stroke-width="2" opacity="0.8"/>
            <text x="445" y="238" fill="#ffffff" font-size="22" font-weight="900" text-anchor="middle" dominant-baseline="middle">B</text>
          </g>
        </g>
      </g>

      
      
      <g id="leftLabelGroup" style="transition: transform 0.6s ease, opacity 0.4s ease;">
        <rect id="leftLabelBg" x="12" y="32" width="180" height="46" rx="12" fill="#eff6ff" stroke="#bfdbfe" stroke-width="2"/>
        <text id="leftLabelText" x="102" y="55" class="label-badge badge-down" text-anchor="middle" dominant-baseline="middle">
          Heavier side goes DOWN
        </text>
        <path id="leftArrow" d="M 102 84 L 102 96 M 96 90 L 102 96 L 108 90" stroke="#1d4ed8" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
      </g>

      
      <g id="rightLabelGroup" style="transition: transform 0.6s ease, opacity 0.4s ease;">
        <rect id="rightLabelBg" x="348" y="32" width="180" height="46" rx="12" fill="#fef3c7" stroke="#fde68a" stroke-width="2"/>
        <text id="rightLabelText" x="438" y="55" class="label-badge badge-up" text-anchor="middle" dominant-baseline="middle">
          Lighter side goes UP
        </text>
        <path id="rightArrow" d="M 438 96 L 438 84 M 432 90 L 438 84 L 444 90" stroke="#d97706" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
      </g>

    </svg>
  </div>

  <script>
    const beamWrapper = document.getElementById('beamWrapper');
    const leftAssembly = document.getElementById('leftAssembly');
    const rightAssembly = document.getElementById('rightAssembly');
    const leftBlock = document.getElementById('leftBlock');
    const rightBlock = document.getElementById('rightBlock');

    const leftLabelGroup = document.getElementById('leftLabelGroup');
    const rightLabelGroup = document.getElementById('rightLabelGroup');
    const leftLabelText = document.getElementById('leftLabelText');
    const rightLabelText = document.getElementById('rightLabelText');
    const leftLabelBg = document.getElementById('leftLabelBg');
    const rightLabelBg = document.getElementById('rightLabelBg');
    const leftArrow = document.getElementById('leftArrow');
    const rightArrow = document.getElementById('rightArrow');

    const btnLeft = document.getElementById('btnLeft');
    const btnEqual = document.getElementById('btnEqual');
    const btnRight = document.getElementById('btnRight');

    const TILT_ANGLE = 11;
    const VERTICAL_OFFSET = 34;

    function setState(mode) {
      btnLeft.classList.toggle('active', mode === 'left');
      btnEqual.classList.toggle('active', mode === 'equal');
      btnRight.classList.toggle('active', mode === 'right');

      if (mode === 'left') {
        beamWrapper.style.transform = `rotate(-${TILT_ANGLE}deg)`;
        leftAssembly.style.transform = `translateY(${VERTICAL_OFFSET}px)`;
        rightAssembly.style.transform = `translateY(-${VERTICAL_OFFSET}px)`;

        leftBlock.style.opacity = '1';
        rightBlock.style.opacity = '0';

        // Left Label: Heavy (Down)
        leftLabelGroup.style.opacity = '1';
        leftLabelGroup.style.transform = `translateY(${VERTICAL_OFFSET}px)`;
        leftLabelBg.setAttribute('fill', '#eff6ff');
        leftLabelBg.setAttribute('stroke', '#bfdbfe');
        leftLabelText.textContent = 'Heavier side goes DOWN';
        leftLabelText.className.baseVal = 'label-badge badge-down';
        leftArrow.setAttribute('d', 'M 102 84 L 102 96 M 96 90 L 102 96 L 108 90');
        leftArrow.setAttribute('stroke', '#1d4ed8');

        // Right Label: Light (Up)
        rightLabelGroup.style.opacity = '1';
        rightLabelGroup.style.transform = `translateY(-${VERTICAL_OFFSET}px)`;
        rightLabelBg.setAttribute('fill', '#fef3c7');
        rightLabelBg.setAttribute('stroke', '#fde68a');
        rightLabelText.textContent = 'Lighter side goes UP';
        rightLabelText.className.baseVal = 'label-badge badge-up';
        rightArrow.setAttribute('d', 'M 438 96 L 438 84 M 432 90 L 438 84 L 444 90');
        rightArrow.setAttribute('stroke', '#d97706');

      } else if (mode === 'right') {
        beamWrapper.style.transform = `rotate(${TILT_ANGLE}deg)`;
        leftAssembly.style.transform = `translateY(-${VERTICAL_OFFSET}px)`;
        rightAssembly.style.transform = `translateY(${VERTICAL_OFFSET}px)`;

        leftBlock.style.opacity = '0';
        rightBlock.style.opacity = '1';

        // Left Label: Light (Up)
        leftLabelGroup.style.opacity = '1';
        leftLabelGroup.style.transform = `translateY(-${VERTICAL_OFFSET}px)`;
        leftLabelBg.setAttribute('fill', '#fef3c7');
        leftLabelBg.setAttribute('stroke', '#fde68a');
        leftLabelText.textContent = 'Lighter side goes UP';
        leftLabelText.className.baseVal = 'label-badge badge-up';
        leftArrow.setAttribute('d', 'M 102 96 L 102 84 M 96 90 L 102 84 L 108 90');
        leftArrow.setAttribute('stroke', '#d97706');

        // Right Label: Heavy (Down)
        rightLabelGroup.style.opacity = '1';
        rightLabelGroup.style.transform = `translateY(${VERTICAL_OFFSET}px)`;
        rightLabelBg.setAttribute('fill', '#eff6ff');
        rightLabelBg.setAttribute('stroke', '#bfdbfe');
        rightLabelText.textContent = 'Heavier side goes DOWN';
        rightLabelText.className.baseVal = 'label-badge badge-down';
        rightArrow.setAttribute('d', 'M 438 84 L 438 96 M 432 90 L 438 96 L 444 90');
        rightArrow.setAttribute('stroke', '#1d4ed8');

      } else if (mode === 'equal') {
        beamWrapper.style.transform = 'rotate(0deg)';
        leftAssembly.style.transform = 'translateY(0px)';
        rightAssembly.style.transform = 'translateY(0px)';

        leftBlock.style.opacity = '1';
        rightBlock.style.opacity = '1';

        leftLabelGroup.style.opacity = '1';
        leftLabelGroup.style.transform = 'translateY(0px)';
        leftLabelBg.setAttribute('fill', '#ecfdf5');
        leftLabelBg.setAttribute('stroke', '#a7f3d0');
        leftLabelText.textContent = 'Equal weight: Level';
        leftLabelText.className.baseVal = 'label-badge badge-equal';
        leftArrow.setAttribute('d', 'M 88 90 L 116 90');
        leftArrow.setAttribute('stroke', '#059669');

        rightLabelGroup.style.opacity = '1';
        rightLabelGroup.style.transform = 'translateY(0px)';
        rightLabelBg.setAttribute('fill', '#ecfdf5');
        rightLabelBg.setAttribute('stroke', '#a7f3d0');
        rightLabelText.textContent = 'Equal weight: Level';
        rightLabelText.className.baseVal = 'label-badge badge-equal';
        rightArrow.setAttribute('d', 'M 424 90 L 452 90');
        rightArrow.setAttribute('stroke', '#059669');
      }
    }

    // Set initial state matching prompt
    setState('left');
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="1:1">
  <title>Measuring with Cubes</title>
  <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;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 10px;
      width: 100%;
      min-height: 100%;
      justify-content: center;
    }

    .panel {
      position: relative;
      border-radius: 12px;
      padding: 8px 12px;
      cursor: pointer;
      transition: background-color 0.2s ease, box-shadow 0.2s ease;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .panel-correct {
      background: #f0fdf4;
      border: 2px solid #86efac;
    }
    .panel-correct:active {
      background: #dcfce7;
      box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
    }

    .panel-incorrect {
      background: #fef2f2;
      border: 2px solid #fca5a5;
    }
    .panel-incorrect:active {
      background: #fee2e2;
      box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
    }

    .header-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-weight: 800;
      font-size: 14px;
      border-radius: 6px;
      padding: 2px 8px;
    }

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

    .badge-incorrect {
      background: #ef4444;
      color: #ffffff;
    }

    .count-tag {
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
    }

    .svg-container {
      width: 100%;
      height: 72px;
      display: block;
    }

    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }
  </style>
</head>
<body>

  
  <div class="panel panel-correct" id="panel1" role="button" tabindex="0" aria-label="Correct measurement: 4 cubes touch end to end">
    <div class="header-row">
      <span class="badge badge-correct">✓ Correct!</span>
      <span class="count-tag">4 cubes</span>
    </div>
    <div class="svg-container">
      <svg viewBox="0 0 320 70">
        
        <line x1="50" y1="4" x2="50" y2="66" stroke="#22c55e" stroke-width="1.5" stroke-dasharray="3 3"/>
        <line x1="290" y1="4" x2="290" y2="66" stroke="#22c55e" stroke-width="1.5" stroke-dasharray="3 3"/>
        
        
        <g id="crayon-1">
          
          <polygon points="50,18 75,9 75,27" fill="#86efac"/>
          <polygon points="50,18 58,15 58,21" fill="#15803d"/>
          
          <rect x="75" y="9" width="215" height="18" rx="2" fill="#22c55e"/>
          
          <rect x="115" y="9" width="135" height="18" fill="#16a34a"/>
          
          <line x1="125" y1="9" x2="125" y2="27" stroke="#15803d" stroke-width="3"/>
          <line x1="240" y1="9" x2="240" y2="27" stroke="#15803d" stroke-width="3"/>
          <circle cx="182" cy="18" r="6" fill="#15803d" opacity="0.6"/>
        </g>

        
        <g>
          
          <rect x="50" y="36" width="58" height="26" rx="4" fill="#38bdf8" stroke="#0284c7" stroke-width="2"/>
          <rect x="108" y="44" width="2" height="10" fill="#0284c7"/>
          <circle cx="79" cy="49" r="6" fill="#0284c7" opacity="0.25"/>
          <text x="79" y="53" text-anchor="middle" font-size="12" font-weight="bold" fill="#0369a1">1</text>

          
          <rect x="110" y="36" width="58" height="26" rx="4" fill="#38bdf8" stroke="#0284c7" stroke-width="2"/>
          <rect x="168" y="44" width="2" height="10" fill="#0284c7"/>
          <circle cx="139" cy="49" r="6" fill="#0284c7" opacity="0.25"/>
          <text x="139" y="53" text-anchor="middle" font-size="12" font-weight="bold" fill="#0369a1">2</text>

          
          <rect x="170" y="36" width="58" height="26" rx="4" fill="#38bdf8" stroke="#0284c7" stroke-width="2"/>
          <rect x="228" y="44" width="2" height="10" fill="#0284c7"/>
          <circle cx="199" cy="49" r="6" fill="#0284c7" opacity="0.25"/>
          <text x="199" y="53" text-anchor="middle" font-size="12" font-weight="bold" fill="#0369a1">3</text>

          
          <rect x="230" y="36" width="58" height="26" rx="4" fill="#38bdf8" stroke="#0284c7" stroke-width="2"/>
          <circle cx="259" cy="49" r="6" fill="#0284c7" opacity="0.25"/>
          <text x="259" y="53" text-anchor="middle" font-size="12" font-weight="bold" fill="#0369a1">4</text>
        </g>
      </svg>
    </div>
  </div>

  
  <div class="panel panel-incorrect" id="panel2" role="button" tabindex="0" aria-label="Incorrect measurement: gaps between cubes">
    <div class="header-row">
      <span class="badge badge-incorrect">✕ Gaps!</span>
      <span class="count-tag">Only 3 counted</span>
    </div>
    <div class="svg-container">
      <svg viewBox="0 0 320 70">
        
        <line x1="50" y1="4" x2="50" y2="66" stroke="#ef4444" stroke-width="1.5" stroke-dasharray="3 3"/>
        <line x1="290" y1="4" x2="290" y2="66" stroke="#ef4444" stroke-width="1.5" stroke-dasharray="3 3"/>
        
        
        <g id="crayon-2">
          <polygon points="50,18 75,9 75,27" fill="#86efac"/>
          <polygon points="50,18 58,15 58,21" fill="#15803d"/>
          <rect x="75" y="9" width="215" height="18" rx="2" fill="#22c55e"/>
          <rect x="115" y="9" width="135" height="18" fill="#16a34a"/>
          <line x1="125" y1="9" x2="125" y2="27" stroke="#15803d" stroke-width="3"/>
          <line x1="240" y1="9" x2="240" y2="27" stroke="#15803d" stroke-width="3"/>
          <circle cx="182" cy="18" r="6" fill="#15803d" opacity="0.6"/>
        </g>

        
        <g>
          
          <rect x="50" y="36" width="58" height="26" rx="4" fill="#38bdf8" stroke="#0284c7" stroke-width="2"/>
          <circle cx="79" cy="49" r="6" fill="#0284c7" opacity="0.25"/>
          <text x="79" y="53" text-anchor="middle" font-size="12" font-weight="bold" fill="#0369a1">1</text>

          
          <rect x="112" y="38" width="26" height="22" rx="3" fill="#fee2e2" stroke="#ef4444" stroke-width="1.5" stroke-dasharray="2 2"/>
          <text x="125" y="53" text-anchor="middle" font-size="10" font-weight="bold" fill="#ef4444">↔</text>

          
          <rect x="141" y="36" width="58" height="26" rx="4" fill="#38bdf8" stroke="#0284c7" stroke-width="2"/>
          <circle cx="170" cy="49" r="6" fill="#0284c7" opacity="0.25"/>
          <text x="170" y="53" text-anchor="middle" font-size="12" font-weight="bold" fill="#0369a1">2</text>

          
          <rect x="203" y="38" width="26" height="22" rx="3" fill="#fee2e2" stroke="#ef4444" stroke-width="1.5" stroke-dasharray="2 2"/>
          <text x="216" y="53" text-anchor="middle" font-size="10" font-weight="bold" fill="#ef4444">↔</text>

          
          <rect x="232" y="36" width="58" height="26" rx="4" fill="#38bdf8" stroke="#0284c7" stroke-width="2"/>
          <circle cx="261" cy="49" r="6" fill="#0284c7" opacity="0.25"/>
          <text x="261" y="53" text-anchor="middle" font-size="12" font-weight="bold" fill="#0369a1">3</text>
        </g>
      </svg>
    </div>
  </div>

  
  <div class="panel panel-incorrect" id="panel3" role="button" tabindex="0" aria-label="Incorrect measurement: cubes overlapping">
    <div class="header-row">
      <span class="badge badge-incorrect">✕ Overlaps!</span>
      <span class="count-tag">Too many counted</span>
    </div>
    <div class="svg-container">
      <svg viewBox="0 0 320 70">
        
        <line x1="50" y1="4" x2="50" y2="66" stroke="#ef4444" stroke-width="1.5" stroke-dasharray="3 3"/>
        <line x1="290" y1="4" x2="290" y2="66" stroke="#ef4444" stroke-width="1.5" stroke-dasharray="3 3"/>
        
        
        <g id="crayon-3">
          <polygon points="50,18 75,9 75,27" fill="#86efac"/>
          <polygon points="50,18 58,15 58,21" fill="#15803d"/>
          <rect x="75" y="9" width="215" height="18" rx="2" fill="#22c55e"/>
          <rect x="115" y="9" width="135" height="18" fill="#16a34a"/>
          <line x1="125" y1="9" x2="125" y2="27" stroke="#15803d" stroke-width="3"/>
          <line x1="240" y1="9" x2="240" y2="27" stroke="#15803d" stroke-width="3"/>
          <circle cx="182" cy="18" r="6" fill="#15803d" opacity="0.6"/>
        </g>

        
        <g>
          
          <g transform="translate(50, 36)">
            <rect x="0" y="0" width="56" height="26" rx="4" fill="#38bdf8" stroke="#0284c7" stroke-width="2"/>
            <circle cx="28" cy="13" r="6" fill="#0284c7" opacity="0.25"/>
            <text x="28" y="17" text-anchor="middle" font-size="12" font-weight="bold" fill="#0369a1">1</text>
          </g>

          
          <g transform="translate(94, 32) rotate(6)">
            <rect x="0" y="0" width="56" height="26" rx="4" fill="#7dd3fc" stroke="#0284c7" stroke-width="2"/>
            <circle cx="28" cy="13" r="6" fill="#0284c7" opacity="0.25"/>
            <text x="28" y="17" text-anchor="middle" font-size="12" font-weight="bold" fill="#0369a1">2</text>
          </g>

          
          <g transform="translate(142, 38) rotate(-5)">
            <rect x="0" y="0" width="56" height="26" rx="4" fill="#38bdf8" stroke="#0284c7" stroke-width="2"/>
            <circle cx="28" cy="13" r="6" fill="#0284c7" opacity="0.25"/>
            <text x="28" y="17" text-anchor="middle" font-size="12" font-weight="bold" fill="#0369a1">3</text>
          </g>

          
          <g transform="translate(190, 33) rotate(5)">
            <rect x="0" y="0" width="56" height="26" rx="4" fill="#7dd3fc" stroke="#0284c7" stroke-width="2"/>
            <circle cx="28" cy="13" r="6" fill="#0284c7" opacity="0.25"/>
            <text x="28" y="17" text-anchor="middle" font-size="12" font-weight="bold" fill="#0369a1">4</text>
          </g>

          
          <g transform="translate(236, 36)">
            <rect x="0" y="0" width="54" height="26" rx="4" fill="#38bdf8" stroke="#0284c7" stroke-width="2"/>
            <circle cx="27" cy="13" r="6" fill="#0284c7" opacity="0.25"/>
            <text x="27" y="17" text-anchor="middle" font-size="12" font-weight="bold" fill="#0369a1">5</text>
          </g>
        </g>
      </svg>
    </div>
  </div>

  <script>
    function playTone(freq, type = 'sine', dur = 0.15) {
      try {
        const ctx = new (window.AudioContext || window.webkitAudioContext)();
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.type = type;
        osc.frequency.setValueAtTime(freq, ctx.currentTime);
        gain.gain.setValueAtTime(0.2, ctx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + dur);
        osc.connect(gain);
        gain.connect(ctx.destination);
        osc.start();
        osc.stop(ctx.currentTime + dur);
      } catch (e) {}
    }

    document.getElementById('panel1').addEventListener('click', () => {
      playTone(587.33, 'triangle', 0.25); // D5 chime
    });

    document.getElementById('panel2').addEventListener('click', () => {
      playTone(220, 'sawtooth', 0.18); // Low alert
    });

    document.getElementById('panel3').addEventListener('click', () => {
      playTone(196, 'sawtooth', 0.18); // Low alert
    });
  </script>
</body>
</html>

Measuring Length with Non-Standard Units: Cubes and Paperclips

<!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 {
      width: 100%;
      height: 100%;
      background: #ffffff;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      user-select: none;
    }

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

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

    /* Paperclip styles */
    .clip-group {
      cursor: pointer;
      transition: opacity 0.3s ease;
    }
    .clip-path {
      fill: none;
      stroke: #94a3b8;
      stroke-width: 7;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: stroke 0.3s ease, filter 0.3s ease;
    }
    .clip-group.active .clip-path {
      stroke: #0284c7;
      filter: drop-shadow(0 2px 6px rgba(2, 132, 199, 0.35));
    }

    /* Badge styles */
    .badge-bg {
      fill: #e2e8f0;
      transition: fill 0.3s ease, transform 0.3s ease;
    }
    .badge-text {
      fill: #64748b;
      font-size: 20px;
      font-weight: 800;
      text-anchor: middle;
      dominant-baseline: central;
      transition: fill 0.3s ease;
    }
    .clip-group.active .badge-bg {
      fill: #0284c7;
    }
    .clip-group.active .badge-text {
      fill: #ffffff;
    }

    /* Alignment lines */
    .guide-line {
      stroke: #0284c7;
      stroke-width: 2;
      stroke-dasharray: 5, 5;
      opacity: 0.8;
    }
    .inner-guide {
      stroke: #cbd5e1;
      stroke-width: 1.5;
      stroke-dasharray: 4, 4;
    }

    /* Controls & bottom banner */
    .controls {
      display: flex;
      gap: 8px;
      align-items: center;
      justify-content: center;
      margin-top: 2px;
    }
    .step-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 14px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }
    .step-btn.active {
      background: #e0f2fe;
      border-color: #0284c7;
      color: #0284c7;
    }

    .summary-card {
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 20px;
      font-size: 18px;
      font-weight: 800;
      color: #1e2945;
      text-align: center;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .highlight {
      color: #0284c7;
    }
  </style>
</head>
<body>

  <div class="main-wrap">
    <svg viewBox="0 0 540 250" aria-label="Measuring a paintbrush with 3 paperclips">
      <defs>
        
        <linearGradient id="handleGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#f43f5e"/>
          <stop offset="40%" stop-color="#e11d48"/>
          <stop offset="100%" stop-color="#be123c"/>
        </linearGradient>
        <linearGradient id="ferruleGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#f1f5f9"/>
          <stop offset="50%" stop-color="#cbd5e1"/>
          <stop offset="100%" stop-color="#94a3b8"/>
        </linearGradient>
        <linearGradient id="bristleGrad" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stop-color="#475569"/>
          <stop offset="60%" stop-color="#1e293b"/>
          <stop offset="100%" stop-color="#0f172a"/>
        </linearGradient>
      </defs>

      
      <line x1="30" y1="20" x2="30" y2="230" class="guide-line" />
      <line x1="510" y1="20" x2="510" y2="230" class="guide-line" />
      <line x1="190" y1="75" x2="190" y2="225" class="inner-guide" />
      <line x1="350" y1="75" x2="350" y2="225" class="inner-guide" />

      
      <path d="M 24 20 L 36 20 M 30 20 L 30 28" stroke="#0284c7" stroke-width="2" stroke-linecap="round"/>
      <path d="M 504 20 L 516 20 M 510 20 L 510 28" stroke="#0284c7" stroke-width="2" stroke-linecap="round"/>

      
      <g id="paintbrush">
        
        <path d="M 50 36 
                 C 30 36, 30 60, 50 60 
                 L 330 64 
                 L 330 32 
                 Z" 
              fill="url(#handleGrad)"/>
        
        <path d="M 55 42 L 328 40" stroke="#fda4af" stroke-width="2" stroke-linecap="round" opacity="0.6"/>

        
        <rect x="330" y="30" width="70" height="36" rx="2" fill="url(#ferruleGrad)"/>
        <line x1="345" y1="30" x2="345" y2="66" stroke="#64748b" stroke-width="1.5"/>
        <line x1="385" y1="30" x2="385" y2="66" stroke="#64748b" stroke-width="1.5"/>

        
        <path d="M 400 30 
                 C 450 30, 485 42, 510 48 
                 C 485 54, 450 66, 400 66 
                 Z" 
              fill="url(#bristleGrad)"/>
        
        <path d="M 470 38 
                 C 490 44, 505 47, 510 48 
                 C 505 49, 490 52, 470 58 
                 Z" 
              fill="#e11d48"/>
      </g>

      

      
      <g class="clip-group active" id="clip1" onclick="setCount(1)">
        <path class="clip-path" 
              d="M 55 155 
                 L 165 155 
                 A 20 20 0 0 0 165 115 
                 L 45 115 
                 A 28 28 0 0 0 45 171 
                 L 175 171 
                 A 14 14 0 0 0 175 143 
                 L 75 143" />
        
        <circle cx="110" cy="143" r="18" class="badge-bg" />
        <text x="110" y="143" class="badge-text">1</text>
      </g>

      
      <g class="clip-group active" id="clip2" onclick="setCount(2)">
        <path class="clip-path" 
              d="M 215 155 
                 L 325 155 
                 A 20 20 0 0 0 325 115 
                 L 205 115 
                 A 28 28 0 0 0 205 171 
                 L 335 171 
                 A 14 14 0 0 0 335 143 
                 L 235 143" />
        
        <circle cx="270" cy="143" r="18" class="badge-bg" />
        <text x="270" y="143" class="badge-text">2</text>
      </g>

      
      <g class="clip-group active" id="clip3" onclick="setCount(3)">
        <path class="clip-path" 
              d="M 375 155 
                 L 485 155 
                 A 20 20 0 0 0 485 115 
                 L 365 115 
                 A 28 28 0 0 0 365 171 
                 L 495 171 
                 A 14 14 0 0 0 495 143 
                 L 395 143" />
        
        <circle cx="430" cy="143" r="18" class="badge-bg" />
        <text x="430" y="143" class="badge-text">3</text>
      </g>
    </svg>

    
    <div class="controls">
      <button class="step-btn" id="btn-count" onclick="toggleAutoPlay()">▶ Auto Count</button>
      <button class="step-btn" onclick="setCount(1)">1</button>
      <button class="step-btn" onclick="setCount(2)">2</button>
      <button class="step-btn active" id="btn-all" onclick="setCount(3)">All (3)</button>
    </div>

    
    <div class="summary-card">
      Length = <span class="highlight" id="count-label">3</span> paperclips long
    </div>
  </div>

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

    function setCount(num) {
      activeCount = num;
      for (let i = 1; i <= 3; i++) {
        const clip = document.getElementById('clip' + i);
        if (i <= num) {
          clip.classList.add('active');
        } else {
          clip.classList.remove('active');
        }
      }
      document.getElementById('count-label').textContent = num;
      
      // Update quick button states
      const allBtn = document.getElementById('btn-all');
      if (num === 3) {
        allBtn.classList.add('active');
      } else {
        allBtn.classList.remove('active');
      }
    }

    function toggleAutoPlay() {
      const btn = document.getElementById('btn-count');
      if (autoInterval) {
        clearInterval(autoInterval);
        autoInterval = null;
        btn.textContent = '▶ Auto Count';
        btn.classList.remove('active');
      } else {
        btn.textContent = '⏸ Pause';
        btn.classList.add('active');
        let step = 1;
        setCount(step);
        autoInterval = setInterval(() => {
          step = (step % 3) + 1;
          setCount(step);
        }, 1200);
      }
    }
  </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;
      user-select: none;
      -webkit-user-select: none;
    }

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

    .header-banner {
      background: #ffffff;
      padding: 8px 18px;
      border-radius: 999px;
      font-size: 17px;
      font-weight: 700;
      color: #0f172a;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
      border: 1px solid #e2e8f0;
      display: flex;
      align-items: center;
      gap: 8px;
      letter-spacing: -0.2px;
    }

    .header-banner .badge {
      background: #3b82f6;
      color: #ffffff;
      font-size: 13px;
      padding: 2px 8px;
      border-radius: 999px;
      font-weight: 800;
    }

    .svg-stage {
      width: 100%;
      max-width: 580px;
      flex: 1;
      min-height: 240px;
      touch-action: manipulation;
    }

    .cube-group {
      cursor: pointer;
      transition: opacity 0.25s ease, transform 0.25s ease;
    }

    .cube-group.dimmed {
      opacity: 0.25;
    }

    .cube-group:hover rect.cube-body {
      filter: brightness(1.06);
    }

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

    .btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      padding: 6px 14px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }

    .btn:active {
      background: #f1f5f9;
    }

    .btn-primary {
      background: #3b82f6;
      border-color: #2563eb;
      color: #ffffff;
    }

    .btn-primary:active {
      background: #1d4ed8;
    }
  </style>
</head>
<body>

  
  <div class="header-banner" id="banner">
    <span>The pencil is <span style="color:#2563eb;">6 cubes</span> long!</span>
    <span class="badge" id="countBadge">6 / 6</span>
  </div>

  
  <svg class="svg-stage" viewBox="0 0 600 330">
    <defs>
      
      <filter id="softShadow" x="-5%" y="-5%" width="115%" height="120%" filterUnits="userSpaceOnUse">
        <feDropShadow dx="0" dy="3" stdDeviation="3" flood-opacity="0.1" />
      </filter>
      <filter id="pencilShadow" x="-2%" y="-5%" width="104%" height="130%" filterUnits="userSpaceOnUse">
        <feDropShadow dx="0" dy="4" stdDeviation="4" flood-opacity="0.12" />
      </filter>
    </defs>

    
    <line x1="60" y1="36" x2="60" y2="295" stroke="#3b82f6" stroke-width="2.5" stroke-dasharray="6,6" />
    <circle cx="60" cy="36" r="4" fill="#3b82f6" />
    <circle cx="60" cy="295" r="4" fill="#3b82f6" />
    <text x="60" y="24" text-anchor="middle" font-size="12" font-weight="700" fill="#3b82f6">START</text>

    
    <line x1="540" y1="36" x2="540" y2="295" stroke="#3b82f6" stroke-width="2.5" stroke-dasharray="6,6" />
    <circle cx="540" cy="36" r="4" fill="#3b82f6" />
    <circle cx="540" cy="295" r="4" fill="#3b82f6" />
    <text x="540" y="24" text-anchor="middle" font-size="12" font-weight="700" fill="#3b82f6">END</text>

    
    <g filter="url(#pencilShadow)">
      
      <rect x="60" y="68" width="35" height="54" rx="8" fill="#fb7185" />
      
      <path d="M 64 74 Q 68 74 74 74" stroke="#fda4af" stroke-width="3" stroke-linecap="round" fill="none" />

      
      <rect x="90" y="66" width="32" height="58" rx="2" fill="#94a3b8" />
      <rect x="96" y="66" width="6" height="58" fill="#cbd5e1" />
      <rect x="110" y="66" width="4" height="58" fill="#64748b" />

      
      
      <rect x="122" y="68" width="353" height="18" fill="#fde047" />
      
      <rect x="122" y="86" width="353" height="18" fill="#eab308" />
      
      <rect x="122" y="104" width="353" height="18" fill="#ca8a04" />

      
      <polygon points="475,68 525,88 525,102 475,122" fill="#fed7aa" />
      <polygon points="475,86 525,92 525,98 475,104" fill="#fdba74" />

      
      <polygon points="525,88 540,95 525,102" fill="#1e293b" />
    </g>

    
    
    <g class="cube-group" id="cube1" data-index="1" onclick="selectCube(1)" filter="url(#softShadow)">
      <rect class="cube-body" x="60" y="180" width="80" height="80" rx="10" fill="#ef4444" stroke="#dc2626" stroke-width="2" />
      <rect x="66" y="186" width="68" height="68" rx="6" fill="#f87171" opacity="0.3" />
      
      <rect x="135" y="208" width="10" height="24" rx="3" fill="#dc2626" />
      
      <circle cx="100" cy="220" r="16" fill="#dc2626" opacity="0.4" />
      <text x="100" y="227" font-size="22" font-weight="900" fill="#ffffff" text-anchor="middle">1</text>
    </g>

    
    <g class="cube-group" id="cube2" data-index="2" onclick="selectCube(2)" filter="url(#softShadow)">
      <rect class="cube-body" x="140" y="180" width="80" height="80" rx="10" fill="#f97316" stroke="#ea580c" stroke-width="2" />
      <rect x="146" y="186" width="68" height="68" rx="6" fill="#fb923c" opacity="0.3" />
      <rect x="215" y="208" width="10" height="24" rx="3" fill="#ea580c" />
      <circle cx="180" cy="220" r="16" fill="#ea580c" opacity="0.4" />
      <text x="180" y="227" font-size="22" font-weight="900" fill="#ffffff" text-anchor="middle">2</text>
    </g>

    
    <g class="cube-group" id="cube3" data-index="3" onclick="selectCube(3)" filter="url(#softShadow)">
      <rect class="cube-body" x="220" y="180" width="80" height="80" rx="10" fill="#84cc16" stroke="#65a30d" stroke-width="2" />
      <rect x="226" y="186" width="68" height="68" rx="6" fill="#a3e635" opacity="0.3" />
      <rect x="295" y="208" width="10" height="24" rx="3" fill="#65a30d" />
      <circle cx="260" cy="220" r="16" fill="#65a30d" opacity="0.4" />
      <text x="260" y="227" font-size="22" font-weight="900" fill="#ffffff" text-anchor="middle">3</text>
    </g>

    
    <g class="cube-group" id="cube4" data-index="4" onclick="selectCube(4)" filter="url(#softShadow)">
      <rect class="cube-body" x="300" y="180" width="80" height="80" rx="10" fill="#10b981" stroke="#059669" stroke-width="2" />
      <rect x="306" y="186" width="68" height="68" rx="6" fill="#34d399" opacity="0.3" />
      <rect x="375" y="208" width="10" height="24" rx="3" fill="#059669" />
      <circle cx="340" cy="220" r="16" fill="#059669" opacity="0.4" />
      <text x="340" y="227" font-size="22" font-weight="900" fill="#ffffff" text-anchor="middle">4</text>
    </g>

    
    <g class="cube-group" id="cube5" data-index="5" onclick="selectCube(5)" filter="url(#softShadow)">
      <rect class="cube-body" x="380" y="180" width="80" height="80" rx="10" fill="#0284c7" stroke="#0369a1" stroke-width="2" />
      <rect x="386" y="186" width="68" height="68" rx="6" fill="#38bdf8" opacity="0.3" />
      <rect x="455" y="208" width="10" height="24" rx="3" fill="#0369a1" />
      <circle cx="420" cy="220" r="16" fill="#0369a1" opacity="0.4" />
      <text x="420" y="227" font-size="22" font-weight="900" fill="#ffffff" text-anchor="middle">5</text>
    </g>

    
    <g class="cube-group" id="cube6" data-index="6" onclick="selectCube(6)" filter="url(#softShadow)">
      <rect class="cube-body" x="460" y="180" width="80" height="80" rx="10" fill="#8b5cf6" stroke="#7c3aed" stroke-width="2" />
      <rect x="466" y="186" width="68" height="68" rx="6" fill="#a78bfa" opacity="0.3" />
      <circle cx="500" cy="220" r="16" fill="#7c3aed" opacity="0.4" />
      <text x="500" y="227" font-size="22" font-weight="900" fill="#ffffff" text-anchor="middle">6</text>
    </g>
  </svg>

  
  <div class="controls">
    <button class="btn btn-primary" onclick="countAlong()">▶ Count Cubes</button>
    <button class="btn" onclick="resetAll()">Reset</button>
  </div>

  <script>
    let activeCount = 6;
    let autoInterval = null;

    // Web Audio synthesizer for pleasant counting clicks
    function playPop(pitch) {
      try {
        const AudioCtx = window.AudioContext || window.webkitAudioContext;
        if (!AudioCtx) return;
        const ctx = new AudioCtx();
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.type = 'sine';
        osc.frequency.setValueAtTime(pitch, ctx.currentTime);
        gain.gain.setValueAtTime(0.18, ctx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.15);
        osc.connect(gain);
        gain.connect(ctx.destination);
        osc.start();
        osc.stop(ctx.currentTime + 0.15);
      } catch(e) {}
    }

    const tones = [261.6, 293.7, 329.6, 349.2, 392.0, 523.3];

    function updateVisuals(count, playSound = false) {
      activeCount = count;
      for (let i = 1; i <= 6; i++) {
        const cube = document.getElementById('cube' + i);
        if (i <= count) {
          cube.classList.remove('dimmed');
        } else {
          cube.classList.add('dimmed');
        }
      }

      const badge = document.getElementById('countBadge');
      badge.textContent = count + ' / 6';
      
      const banner = document.getElementById('banner');
      if (count === 6) {
        banner.innerHTML = `<span>The pencil is <span style="color:#2563eb;">6 cubes</span> long!</span> <span class="badge" id="countBadge">6 / 6</span>`;
      } else {
        banner.innerHTML = `<span>Counting: <span style="color:#2563eb;">${count} cube${count === 1 ? '' : 's'}</span></span> <span class="badge" id="countBadge">${count} / 6</span>`;
      }

      if (playSound && count >= 1 && count <= 6) {
        playPop(tones[count - 1]);
      }
    }

    function selectCube(index) {
      if (autoInterval) clearInterval(autoInterval);
      updateVisuals(index, true);
    }

    function resetAll() {
      if (autoInterval) clearInterval(autoInterval);
      updateVisuals(6, false);
    }

    function countAlong() {
      if (autoInterval) clearInterval(autoInterval);
      let step = 1;
      updateVisuals(step, true);
      
      autoInterval = setInterval(() => {
        step++;
        if (step <= 6) {
          updateVisuals(step, true);
        } else {
          clearInterval(autoInterval);
          autoInterval = null;
        }
      }, 600);
    }
  </script>
</body>
</html>

OGM.1.MD.2

Aligned learning resources

Related diagrams