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

    .toggle-bar {
      display: flex;
      gap: 8px;
      margin-bottom: 8px;
    }
    .toggle-btn {
      border: 2px solid #e2e8f0;
      background: #ffffff;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      color: #64748b;
      transition: all 0.25s ease;
    }
    .toggle-btn.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
      box-shadow: 0 3px 8px rgba(2, 132, 199, 0.25);
    }

    .scene-container {
      width: 100%;
      max-width: 420px;
      height: 250px;
      position: relative;
    }
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .crayon-group {
      transition: transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1);
    }

    .badge-container {
      margin-top: 6px;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 16px;
      border-radius: 999px;
      font-size: 15px;
      font-weight: 700;
      transition: all 0.3s ease;
    }
    .badge.fair {
      background: #ecfdf5;
      color: #059669;
      border: 1.5px solid #a7f3d0;
      box-shadow: 0 2px 10px rgba(16, 185, 129, 0.15);
    }
    .badge.unfair {
      background: #fef2f2;
      color: #dc2626;
      border: 1.5px solid #fecaca;
      box-shadow: 0 2px 10px rgba(239, 68, 68, 0.15);
    }
  </style>
</head>
<body>

  <div class="toggle-bar">
    <button id="btnFair" class="toggle-btn active" onclick="setMode('fair')">Aligned (Fair)</button>
    <button id="btnUnfair" class="toggle-btn" onclick="setMode('unfair')">Not Aligned</button>
  </div>

  <div class="scene-container">
    <svg viewBox="0 0 400 250">
      <defs>
        
        <linearGradient id="tableGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#f8fafc"/>
          <stop offset="100%" stop-color="#e2e8f0"/>
        </linearGradient>

        
        <linearGradient id="blueGrad" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stop-color="#38bdf8"/>
          <stop offset="70%" stop-color="#0284c7"/>
          <stop offset="100%" stop-color="#0369a1"/>
        </linearGradient>
        <linearGradient id="blueWrap" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stop-color="#bae6fd"/>
          <stop offset="100%" stop-color="#7dd3fc"/>
        </linearGradient>

        
        <linearGradient id="purpleGrad" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stop-color="#c084fc"/>
          <stop offset="70%" stop-color="#9333ea"/>
          <stop offset="100%" stop-color="#7e22ce"/>
        </linearGradient>
        <linearGradient id="purpleWrap" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stop-color="#e9d5ff"/>
          <stop offset="100%" stop-color="#d8b4fe"/>
        </linearGradient>

        
        <filter id="crayonShadow" x="-20%" y="-10%" width="140%" height="130%">
          <feDropShadow dx="0" dy="4" stdDeviation="3" flood-color="#0f172a" flood-opacity="0.15"/>
        </filter>
      </defs>

      
      <rect x="20" y="200" width="360" height="42" rx="6" fill="url(#tableGrad)" stroke="#cbd5e1" stroke-width="2"/>
      
      
      <line x1="30" y1="200" x2="370" y2="200" stroke="#10b981" stroke-width="3" stroke-dasharray="6,4" id="baselineLine"/>
      <text x="32" y="222" font-size="12" font-weight="700" fill="#059669" letter-spacing="0.5">STARTING LINE</text>

      
      
      <g class="crayon-group" id="blueCrayon" filter="url(#crayonShadow)">
        
        <polygon points="120,80 145,45 170,80" fill="#0284c7"/>
        <polygon points="135,45 145,45 170,80 155,80" fill="#0369a1" opacity="0.3"/>
        
        <rect x="120" y="80" width="50" height="120" rx="3" fill="url(#blueGrad)"/>
        
        <rect x="120" y="95" width="50" height="90" fill="url(#blueWrap)"/>
        <path d="M120,115 C135,110 155,120 170,115 L170,125 C155,130 135,120 120,125 Z" fill="#0284c7" opacity="0.4"/>
        <path d="M120,155 C135,150 155,160 170,155 L170,165 C155,170 135,160 120,165 Z" fill="#0284c7" opacity="0.4"/>
        
        <line x1="120" y1="200" x2="170" y2="200" stroke="#0369a1" stroke-width="2"/>
      </g>

      
      
      <g class="crayon-group" id="purpleCrayon" filter="url(#crayonShadow)">
        
        <polygon points="230,115 255,85 280,115" fill="#9333ea"/>
        <polygon points="245,85 255,85 280,115 265,115" fill="#7e22ce" opacity="0.3"/>
        
        <rect x="230" y="115" width="50" height="85" rx="3" fill="url(#purpleGrad)"/>
        
        <rect x="230" y="127" width="50" height="60" fill="url(#purpleWrap)"/>
        <path d="M230,140 C245,136 265,144 280,140 L280,148 C265,152 245,144 230,148 Z" fill="#9333ea" opacity="0.4"/>
        <path d="M230,165 C245,161 265,169 280,165 L280,173 C265,177 245,169 230,173 Z" fill="#9333ea" opacity="0.4"/>
        
        <line x1="230" y1="200" x2="280" y2="200" stroke="#7e22ce" stroke-width="2"/>
      </g>

      
      <g id="heightGuides" opacity="1" style="transition: opacity 0.3s ease;">
        
        <line x1="145" y1="45" x2="310" y2="45" stroke="#0284c7" stroke-width="1.5" stroke-dasharray="3,3"/>
        
        <line id="purpleGuide" x1="255" y1="85" x2="310" y2="85" stroke="#9333ea" stroke-width="1.5" stroke-dasharray="3,3"/>
      </g>
    </svg>
  </div>

  <div class="badge-container">
    <div id="badge" class="badge fair">
      <span id="badgeIcon">✓</span>
      <span id="badgeText">Fair comparison! Blue is taller.</span>
    </div>
  </div>

  <script>
    function setMode(mode) {
      const btnFair = document.getElementById('btnFair');
      const btnUnfair = document.getElementById('btnUnfair');
      const purpleCrayon = document.getElementById('purpleCrayon');
      const baselineLine = document.getElementById('baselineLine');
      const purpleGuide = document.getElementById('purpleGuide');
      const badge = document.getElementById('badge');
      const badgeIcon = document.getElementById('badgeIcon');
      const badgeText = document.getElementById('badgeText');

      if (mode === 'fair') {
        btnFair.classList.add('active');
        btnUnfair.classList.remove('active');
        purpleCrayon.style.transform = 'translateY(0px)';
        baselineLine.setAttribute('stroke', '#10b981');
        purpleGuide.setAttribute('y1', '85');
        purpleGuide.setAttribute('y2', '85');

        badge.className = 'badge fair';
        badgeIcon.textContent = '✓';
        badgeText.textContent = 'Fair comparison! Blue is taller.';
      } else {
        btnUnfair.classList.add('active');
        btnFair.classList.remove('active');
        // Lift purple up by 60px so it deceptively looks taller than blue
        purpleCrayon.style.transform = 'translateY(-60px)';
        baselineLine.setAttribute('stroke', '#ef4444');
        purpleGuide.setAttribute('y1', '25');
        purpleGuide.setAttribute('y2', '25');

        badge.className = 'badge unfair';
        badgeIcon.textContent = '✕';
        badgeText.textContent = 'Unfair! Endpoints do not match.';
      }
    }
  </script>
</body>
</html>

Aligning Endpoints to Compare Length Fairly

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Aligning Endpoints to Compare Length</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      width: 100%;
      min-height: 100vh;
      background: #fdfbf7;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px;
      user-select: none;
    }

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

    .status-badge {
      font-size: 13px;
      font-weight: 700;
      padding: 6px 14px;
      border-radius: 999px;
      text-align: center;
      transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    }

    .badge-uneven {
      background: #fef2f2;
      color: #b91c1c;
      border: 1px solid #fecaca;
    }

    .badge-fair {
      background: #f0fdf4;
      color: #15803d;
      border: 1px solid #bbf7d0;
    }

    .svg-wrapper {
      width: 100%;
      aspect-ratio: 4 / 3;
      max-height: 340px;
      position: relative;
    }

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

    /* Pencil group smooth animation */
    .pencil-group {
      transition: transform 0.6s cubic-bezier(0.34, 1.25, 0.64, 1);
    }

    .tap-bubble {
      opacity: 0;
      transform: scale(0.6) translateY(6px);
      transform-origin: 186px 216px;
      transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    }

    .tap-bubble.visible {
      opacity: 1;
      transform: scale(1) translateY(0);
    }

    .baseline-glow {
      stroke: #22c55e;
      stroke-width: 4;
      filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.5));
      transition: stroke 0.3s ease, opacity 0.3s ease;
    }

    .tip-guide {
      transition: opacity 0.3s ease;
    }

    /* Control buttons */
    .controls {
      display: flex;
      gap: 12px;
      width: 100%;
      justify-content: center;
    }

    .btn {
      flex: 1;
      max-width: 190px;
      padding: 10px 14px;
      font-size: 14px;
      font-weight: 700;
      border-radius: 999px;
      border: 2px solid transparent;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
    }

    .btn-inactive {
      background: #f1ede4;
      color: #64748b;
      border-color: #e2dcd2;
    }

    .btn-inactive:hover {
      background: #e8e2d5;
      color: #334155;
    }

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

    .btn-active:hover {
      background: #0369a1;
    }
  </style>
</head>
<body>

  <div class="main-container">
    <div id="statusBadge" class="status-badge badge-fair">
      ✓ Aligned at baseline: Yellow is longer!
    </div>

    <div class="svg-wrapper">
      <svg viewBox="0 0 400 300">
        <defs>
          <linearGradient id="tableGrad" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stop-color="#dfb179"/>
            <stop offset="100%" stop-color="#ba874e"/>
          </linearGradient>
          <linearGradient id="redPencil" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stop-color="#f87171"/>
            <stop offset="50%" stop-color="#ef4444"/>
            <stop offset="100%" stop-color="#b91c1c"/>
          </linearGradient>
          <linearGradient id="yellowPencil" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stop-color="#fde047"/>
            <stop offset="50%" stop-color="#eab308"/>
            <stop offset="100%" stop-color="#ca8a04"/>
          </linearGradient>
          <linearGradient id="woodTip" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stop-color="#fde68a"/>
            <stop offset="100%" stop-color="#d97706"/>
          </linearGradient>
          <linearGradient id="ferruleGrad" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stop-color="#e2e8f0"/>
            <stop offset="50%" stop-color="#94a3b8"/>
            <stop offset="100%" stop-color="#64748b"/>
          </linearGradient>
          <linearGradient id="eraserGrad" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stop-color="#fda4af"/>
            <stop offset="100%" stop-color="#f43f5e"/>
          </linearGradient>
          <linearGradient id="skinGrad" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stop-color="#fed7aa"/>
            <stop offset="100%" stop-color="#fb923c"/>
          </linearGradient>
          <filter id="handShadow" x="-20%" y="-20%" width="140%" height="140%">
            <feDropShadow dx="0" dy="2" stdDeviation="2" flood-opacity="0.18"/>
          </filter>
        </defs>

        
        <rect x="20" y="240" width="360" height="48" rx="8" fill="url(#tableGrad)" stroke="#a16207" stroke-width="2"/>
        <line x1="20" y1="240" x2="380" y2="240" stroke="#78350f" stroke-width="1.5"/>

        
        <line id="baseline" x1="30" y1="240" x2="370" y2="240" class="baseline-glow"/>
        <text x="200" y="268" text-anchor="middle" font-size="13" font-weight="700" fill="#78350f">
          — Flat Table Baseline —
        </text>

        
        <g id="tipGuideGroup" class="tip-guide">
          
          <line x1="225" y1="60" x2="280" y2="60" stroke="#15803d" stroke-width="1.5" stroke-dasharray="4 3"/>
          
          <line x1="165" y1="90" x2="280" y2="90" stroke="#b91c1c" stroke-width="1.5" stroke-dasharray="4 3"/>
          <text id="tipGuideText" x="286" y="79" font-size="12" font-weight="800" fill="#15803d">Yellow is taller!</text>
        </g>

        
        <g id="redPencilGroup" class="pencil-group" transform="translate(0, 0)">
          
          <rect x="145" y="222" width="22" height="18" rx="3" fill="url(#eraserGrad)"/>
          
          <rect x="144" y="210" width="24" height="12" rx="1" fill="url(#ferruleGrad)"/>
          <line x1="144" y1="214" x2="168" y2="214" stroke="#475569" stroke-width="1"/>
          <line x1="144" y1="218" x2="168" y2="218" stroke="#475569" stroke-width="1"/>
          
          <rect x="145" y="115" width="22" height="95" fill="url(#redPencil)"/>
          <line x1="152" y1="115" x2="152" y2="210" stroke="#fca5a5" stroke-width="1"/>
          
          <polygon points="145,115 167,115 156,90" fill="url(#woodTip)"/>
          
          <polygon points="153,97 159,97 156,90" fill="#1e293b"/>
          
          
          <g transform="translate(68, 122)">
            <rect width="66" height="24" rx="12" fill="#fee2e2" stroke="#ef4444" stroke-width="1.5"/>
            <text x="33" y="16" text-anchor="middle" font-size="12" font-weight="800" fill="#b91c1c">Red</text>
            <path d="M 66 12 L 74 12" stroke="#ef4444" stroke-width="1.5" stroke-linecap="round"/>
          </g>
        </g>

        
        <g id="yellowPencilGroup" class="pencil-group" transform="translate(0, 0)">
          
          <rect x="205" y="222" width="22" height="18" rx="3" fill="url(#eraserGrad)"/>
          
          <rect x="204" y="210" width="24" height="12" rx="1" fill="url(#ferruleGrad)"/>
          <line x1="204" y1="214" x2="228" y2="214" stroke="#475569" stroke-width="1"/>
          <line x1="204" y1="218" x2="228" y2="218" stroke="#475569" stroke-width="1"/>
          
          <rect x="205" y="85" width="22" height="125" fill="url(#yellowPencil)"/>
          <line x1="212" y1="85" x2="212" y2="210" stroke="#fef08a" stroke-width="1"/>
          
          <polygon points="205,85 227,85 216,60" fill="url(#woodTip)"/>
          
          <polygon points="213,67 219,67 216,60" fill="#1e293b"/>

          
          <g transform="translate(238, 102)">
            <rect width="66" height="24" rx="12" fill="#fef9c3" stroke="#ca8a04" stroke-width="1.5"/>
            <text x="33" y="16" text-anchor="middle" font-size="12" font-weight="800" fill="#854d0e">Yellow</text>
            <path d="M 0 12 L -8 12" stroke="#ca8a04" stroke-width="1.5" stroke-linecap="round"/>
          </g>
        </g>

        
        <g id="handGroup" transform="translate(0, 0)" class="pencil-group" filter="url(#handShadow)">
          
          <path d="M 144 164 C 130 164 124 172 124 180 C 124 188 132 194 144 194" fill="none" stroke="#ea580c" stroke-width="1.5"/>
          <path d="M 145 166 C 134 166 128 172 128 180 C 128 186 134 192 145 192 Z" fill="url(#skinGrad)"/>
          
          
          <path d="M 228 160 C 255 156 285 164 300 172 C 300 196 280 206 235 204 Z" fill="url(#skinGrad)" stroke="#ea580c" stroke-width="1.5"/>

          
          <path d="M 238 168 C 220 168 185 170 165 174 C 158 175 154 182 158 187 C 163 192 172 192 185 190 C 205 187 230 186 244 190 Z" 
                fill="url(#skinGrad)" stroke="#ea580c" stroke-width="1.5" stroke-linejoin="round"/>

          
          <path d="M 210 173 C 213 177 213 183 210 187" fill="none" stroke="#ea580c" stroke-width="1.2" stroke-linecap="round" opacity="0.6"/>
          <path d="M 180 176 C 182 179 182 184 180 187" fill="none" stroke="#ea580c" stroke-width="1.2" stroke-linecap="round" opacity="0.6"/>
        </g>

        
        <g id="tapBubble" class="tap-bubble visible">
          <rect x="156" y="206" width="62" height="24" rx="12" fill="#facc15" stroke="#ca8a04" stroke-width="1.5" filter="url(#handShadow)"/>
          <polygon points="187,230 181,238 193,230" fill="#facc15" stroke="#ca8a04" stroke-width="1"/>
          <rect x="183" y="228" width="8" height="3" fill="#facc15"/>
          <text x="187" y="222" text-anchor="middle" font-size="11" font-weight="800" fill="#78350f">Tap-tap! 🔊</text>
        </g>

      </svg>
    </div>

    
    <div class="controls">
      <button id="btnUneven" class="btn btn-inactive">
        <span>Uneven Start</span>
      </button>
      <button id="btnAligned" class="btn btn-active">
        <span>Tap to Align 🔊</span>
      </button>
    </div>
  </div>

  <script>
    const btnUneven = document.getElementById('btnUneven');
    const btnAligned = document.getElementById('btnAligned');
    const redPencilGroup = document.getElementById('redPencilGroup');
    const yellowPencilGroup = document.getElementById('yellowPencilGroup');
    const handGroup = document.getElementById('handGroup');
    const tapBubble = document.getElementById('tapBubble');
    const tipGuideGroup = document.getElementById('tipGuideGroup');
    const baseline = document.getElementById('baseline');
    const statusBadge = document.getElementById('statusBadge');

    let audioCtx = null;

    function playWoodTap() {
      try {
        if (!audioCtx) {
          audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        }
        if (audioCtx.state === 'suspended') {
          audioCtx.resume();
        }
        
        // Two quick wood tap clicks ("tap-tap")
        [0, 0.11].forEach((delay, idx) => {
          const osc = audioCtx.createOscillator();
          const gain = audioCtx.createGain();
          
          osc.type = 'triangle';
          osc.frequency.setValueAtTime(idx === 0 ? 380 : 440, audioCtx.currentTime + delay);
          osc.frequency.exponentialRampToValueAtTime(70, audioCtx.currentTime + delay + 0.08);

          gain.gain.setValueAtTime(0.3, audioCtx.currentTime + delay);
          gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + delay + 0.08);

          osc.connect(gain);
          gain.connect(audioCtx.destination);

          osc.start(audioCtx.currentTime + delay);
          osc.stop(audioCtx.currentTime + delay + 0.09);
        });
      } catch (e) {
        // Audio fallback safe
      }
    }

    function setAlignedState(aligned, playSound = false) {
      if (aligned) {
        // Aligned: Both pencil bottoms rest at baseline (y=240)
        redPencilGroup.style.transform = 'translate(0, 0)';
        yellowPencilGroup.style.transform = 'translate(0, 0)';
        handGroup.style.transform = 'translate(0, 0)';
        
        tapBubble.classList.add('visible');
        baseline.style.stroke = '#22c55e';
        baseline.style.opacity = '1';

        tipGuideGroup.style.opacity = '1';
        tipGuideGroup.innerHTML = `
          <line x1="225" y1="60" x2="280" y2="60" stroke="#15803d" stroke-width="1.5" stroke-dasharray="4 3"/>
          <line x1="165" y1="90" x2="280" y2="90" stroke="#b91c1c" stroke-width="1.5" stroke-dasharray="4 3"/>
          <text x="286" y="79" font-size="12" font-weight="800" fill="#15803d">Yellow is taller!</text>
        `;

        statusBadge.textContent = '✓ Aligned at baseline: Yellow is longer!';
        statusBadge.className = 'status-badge badge-fair';

        btnAligned.className = 'btn btn-active';
        btnUneven.className = 'btn btn-inactive';

        if (playSound) playWoodTap();
      } else {
        // Uneven: Red pencil held 50px higher than Yellow
        redPencilGroup.style.transform = 'translate(0, -50px)';
        yellowPencilGroup.style.transform = 'translate(0, 10px)';
        handGroup.style.transform = 'translate(0, -20px)';

        tapBubble.classList.remove('visible');
        baseline.style.stroke = '#ef4444';
        baseline.style.opacity = '0.4';

        tipGuideGroup.style.opacity = '1';
        tipGuideGroup.innerHTML = `
          <line x1="165" y1="40" x2="280" y2="40" stroke="#ef4444" stroke-width="1.5" stroke-dasharray="4 3"/>
          <line x1="225" y1="70" x2="280" y2="70" stroke="#ca8a04" stroke-width="1.5" stroke-dasharray="4 3"/>
          <text x="286" y="58" font-size="12" font-weight="800" fill="#b91c1c">Unequal start!</text>
        `;

        statusBadge.textContent = '✕ Uneven base: Red looks taller, but is it?';
        statusBadge.className = 'status-badge badge-uneven';

        btnUneven.className = 'btn btn-active';
        btnAligned.className = 'btn btn-inactive';
      }
    }

    btnAligned.addEventListener('click', () => setAlignedState(true, true));
    btnUneven.addEventListener('click', () => setAlignedState(false, false));

    // Initialize in aligned state
    setAlignedState(true, false);
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }

    body {
      width: 100%;
      background: #fdfbf7;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 12px;
    }

    .canvas-wrap {
      width: 100%;
      max-width: 360px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

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

    /* Animated elements */
    .red-pencil {
      transition: transform 0.6s cubic-bezier(0.34, 1.25, 0.64, 1);
    }

    .state-unfair .red-pencil {
      transform: translateY(0px);
    }

    .state-aligned .red-pencil {
      transform: translateY(90px);
    }

    .unfair-elements {
      transition: opacity 0.3s ease;
    }

    .aligned-elements {
      transition: opacity 0.3s ease;
      opacity: 0;
      pointer-events: none;
    }

    .state-unfair .unfair-elements { opacity: 1; }
    .state-unfair .aligned-elements { opacity: 0; }

    .state-aligned .unfair-elements { opacity: 0; }
    .state-aligned .aligned-elements { opacity: 1; }

    .btn-toggle {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #ffffff;
      color: #1e2945;
      border: 2px solid #e2dcd0;
      border-radius: 999px;
      padding: 8px 18px;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(30, 41, 69, 0.06);
      transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .btn-toggle:hover {
      background-color: #f7f3eb;
      border-color: #d1c8b8;
    }

    .btn-toggle:active {
      background-color: #eee7da;
    }
  </style>
</head>
<body>

  <div class="canvas-wrap state-unfair" id="diagramRoot">
    <svg viewBox="0 0 320 270" aria-label="Comparing two pencils with uneven starting endpoints">
      
      <g class="unfair-elements" transform="translate(142, 28)">
        <ellipse cx="0" cy="0" rx="14" ry="14" fill="#fee2e2" stroke="#fca5a5" stroke-width="1.5" />
        <path d="M -3 -5 C -3 -9, 4 -9, 4 -5 C 4 -2, -1 -1, -1 2" fill="none" stroke="#e11d48" stroke-width="2.2" stroke-linecap="round"/>
        <circle cx="-1" cy="6" r="1.3" fill="#e11d48" />
      </g>

      
      
      <g class="red-pencil" transform="translate(74, 32)">
        
        <polygon points="15,0 2,22 28,22" fill="#fde68a"/>
        <polygon points="15,0 9,10 21,10" fill="#334155"/>
        
        <rect x="2" y="22" width="26" height="58" rx="2" fill="#ef4444"/>
        <rect x="10" y="22" width="10" height="58" fill="#dc2626"/>
        
        <rect x="2" y="80" width="26" height="9" fill="#cbd5e1"/>
        <line x1="2" y1="84.5" x2="28" y2="84.5" stroke="#94a3b8" stroke-width="1"/>
        
        <path d="M 2 89 Q 2 100, 15 100 Q 28 100, 28 89 Z" fill="#fb7185"/>
      </g>

      
      
      <g transform="translate(196, 32)">
        
        <polygon points="15,0 2,22 28,22" fill="#fde68a"/>
        <polygon points="15,0 9,10 21,10" fill="#334155"/>
        
        <rect x="2" y="22" width="26" height="148" rx="2" fill="#f59e0b"/>
        <rect x="10" y="22" width="10" height="148" fill="#d97706"/>
        
        <rect x="2" y="170" width="26" height="9" fill="#cbd5e1"/>
        <line x1="2" y1="174.5" x2="28" y2="174.5" stroke="#94a3b8" stroke-width="1"/>
        
        <path d="M 2 179 Q 2 190, 15 190 Q 28 190, 28 179 Z" fill="#fb7185"/>
      </g>

      
      <g class="unfair-elements">
        
        <line x1="50" y1="132" x2="128" y2="132" stroke="#ef4444" stroke-width="2" stroke-dasharray="4,4"/>
        
        <line x1="172" y1="222" x2="250" y2="222" stroke="#ef4444" stroke-width="2" stroke-dasharray="4,4"/>
        
        
        <path d="M 89 132 L 89 177 L 211 177 L 211 222" fill="none" stroke="#ef4444" stroke-width="2" stroke-dasharray="4,4"/>

        
        <g transform="translate(150, 177)">
          <rect x="-65" y="-13" width="130" height="26" rx="13" fill="#fee2e2" stroke="#ef4444" stroke-width="1.5"/>
          <text x="0" y="4.5" text-anchor="middle" font-size="12.5" font-weight="800" fill="#991b1b">Not a fair start!</text>
        </g>
      </g>

      
      <g class="aligned-elements">
        
        <line x1="45" y1="222" x2="255" y2="222" stroke="#10b981" stroke-width="2.5"/>
        
        
        <g transform="translate(150, 246)">
          <rect x="-56" y="-11" width="112" height="22" rx="11" fill="#d1fae5" stroke="#10b981" stroke-width="1.5"/>
          <text x="0" y="4" text-anchor="middle" font-size="11.5" font-weight="800" fill="#065f46">Fair start! ✦</text>
        </g>
      </g>
    </svg>

    <button class="btn-toggle" id="toggleBtn" aria-label="Toggle pencil alignment">
      <span id="btnIcon">✨</span>
      <span id="btnText">Align Endpoints</span>
    </button>
  </div>

  <script>
    const root = document.getElementById('diagramRoot');
    const btn = document.getElementById('toggleBtn');
    const btnText = document.getElementById('btnText');
    const btnIcon = document.getElementById('btnIcon');

    let aligned = false;

    btn.addEventListener('click', () => {
      aligned = !aligned;
      if (aligned) {
        root.classList.remove('state-unfair');
        root.classList.add('state-aligned');
        btnText.textContent = 'Reset';
        btnIcon.textContent = '↩';
      } else {
        root.classList.remove('state-aligned');
        root.classList.add('state-unfair');
        btnText.textContent = 'Align Endpoints';
        btnIcon.textContent = '✨';
      }
    });
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <title>Aligning Endpoints</title>
  <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: #0f172a;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      min-height: 100vh;
      padding: 16px 12px;
      user-select: none;
    }

    /* Controls */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 12px;
      z-index: 10;
      width: 100%;
      max-width: 440px;
    }
    .btn-step {
      background: #ffffff;
      border: 2px solid #94a3b8;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 14px;
      font-weight: 700;
      color: #334155;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
      transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }
    .btn-step:hover {
      background: #f1f5f9;
      border-color: #64748b;
    }
    .btn-step.active {
      background: #1d4ed8;
      border-color: #1d4ed8;
      color: #ffffff;
    }
    .btn-play {
      background: #ffffff;
      border: 2px solid #94a3b8;
      border-radius: 50%;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      cursor: pointer;
      color: #1e293b;
      transition: background-color 0.2s ease, border-color 0.2s ease;
    }
    .btn-play:hover {
      background: #f1f5f9;
      border-color: #64748b;
    }

    /* Stage Area - renders directly without extra card wrappers */
    .stage {
      position: relative;
      width: 100%;
      max-width: 440px;
      height: 340px;
      display: flex;
      justify-content: center;
      overflow: visible;
    }

    /* Stage guides */
    .table-line {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 44px;
      background: #78350f;
      border-top: 4px solid #b45309;
      border-radius: 6px 6px 0 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fef08a;
      font-size: 15px;
      font-weight: 800;
      letter-spacing: 0.75px;
      text-transform: uppercase;
      z-index: 5;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }

    .alignment-guide {
      position: absolute;
      left: 6%;
      right: 6%;
      bottom: 44px;
      height: 0;
      border-top: 3px dashed #0284c7;
      opacity: 0;
      transition: opacity 0.4s ease;
      z-index: 4;
    }
    .alignment-guide.show {
      opacity: 1;
    }

    /* Pencil Trackers */
    .pencil-area {
      position: absolute;
      inset: 0 0 44px 0;
      display: flex;
      justify-content: space-around;
      align-items: flex-end;
      padding: 0 30px;
    }

    .pencil-wrapper {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: transform 0.8s cubic-bezier(0.34, 1.25, 0.64, 1);
    }

    /* Pencil Visuals */
    .pencil {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.15));
    }

    /* Pencil Tip */
    .tip {
      width: 0;
      height: 0;
      border-left: 16px solid transparent;
      border-right: 16px solid transparent;
      border-bottom: 26px solid #fed7aa;
      position: relative;
    }
    .tip::after {
      content: '';
      position: absolute;
      top: -26px;
      left: -5px;
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-bottom: 9px solid #0f172a;
    }

    /* Pencil Body */
    .body {
      width: 32px;
      display: flex;
      justify-content: space-between;
      padding: 0 4px;
    }
    .body::before, .body::after {
      content: '';
      width: 3px;
      height: 100%;
      background: rgba(0, 0, 0, 0.12);
      border-radius: 2px;
    }

    /* Red Short Pencil */
    .pencil-red .body {
      height: 90px;
      background: #dc2626;
    }
    /* Yellow Long Pencil */
    .pencil-yellow .body {
      height: 155px;
      background: #eab308;
    }

    /* Ferrule & Eraser */
    .ferrule {
      width: 32px;
      height: 12px;
      background: linear-gradient(to right, #94a3b8, #e2e8f0, #94a3b8);
      border-top: 1px solid #64748b;
      border-bottom: 1px solid #64748b;
    }
    .eraser {
      width: 32px;
      height: 16px;
      background: #fb7185;
      border-radius: 0 0 4px 4px;
    }

    /* Badges / Labels - High contrast */
    .badge {
      position: absolute;
      top: -34px;
      padding: 4px 12px;
      border-radius: 14px;
      font-size: 13px;
      font-weight: 900;
      letter-spacing: 0.5px;
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 0.35s ease, transform 0.35s ease;
      white-space: nowrap;
      pointer-events: none;
      z-index: 6;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    .badge-shorter {
      background: #fee2e2;
      color: #991b1b;
      border: 2px solid #ef4444;
    }
    .badge-longer {
      background: #dcfce7;
      color: #14532d;
      border: 2px solid #16a34a;
    }
    .badge.show {
      opacity: 1;
      transform: translateY(0);
    }

    /* Star highlight */
    .star-highlight {
      position: absolute;
      top: -68px;
      font-size: 26px;
      opacity: 0;
      transform: scale(0.5);
      transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
      z-index: 7;
      pointer-events: none;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
    }
    .star-highlight.show {
      opacity: 1;
      transform: scale(1.15);
    }

    /* Snap effect indicator */
    .snap-ring {
      position: absolute;
      bottom: -6px;
      width: 48px;
      height: 14px;
      border-radius: 50%;
      border: 3px solid #16a34a;
      opacity: 0;
      transform: scale(0.5);
      transition: opacity 0.3s ease, transform 0.3s ease;
      pointer-events: none;
    }
    .snap-ring.show {
      opacity: 0.9;
      transform: scale(1.25);
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="btn-step active" id="step1Btn">1. Uneven</button>
    <button class="btn-step" id="step2Btn">2. Align</button>
    <button class="btn-step" id="step3Btn">3. Compare</button>
    <button class="btn-play" id="playBtn" title="Play / Pause">⏸</button>
  </div>

  
  <div class="stage">
    <div class="alignment-guide" id="guide"></div>
    
    <div class="pencil-area">
      
      <div class="pencil-wrapper" id="redWrapper" style="transform: translateY(-75px);">
        <div class="badge badge-shorter" id="redBadge">SHORTER</div>
        <div class="pencil pencil-red">
          <div class="tip"></div>
          <div class="body"></div>
          <div class="ferrule"></div>
          <div class="eraser"></div>
        </div>
        <div class="snap-ring" id="redSnap"></div>
      </div>

      
      <div class="pencil-wrapper" id="yellowWrapper" style="transform: translateY(-10px);">
        <div class="star-highlight" id="starBadge">⭐</div>
        <div class="badge badge-longer" id="yellowBadge">LONGER!</div>
        <div class="pencil pencil-yellow">
          <div class="tip"></div>
          <div class="body"></div>
          <div class="ferrule"></div>
          <div class="eraser"></div>
        </div>
        <div class="snap-ring" id="yellowSnap"></div>
      </div>
    </div>

    
    <div class="table-line">Starting Line</div>
  </div>

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

    const steps = [
      {
        // Step 1: Floating unevenly (Red is raised high so it deceptively looks taller)
        redY: -75,
        yellowY: -10,
        guide: false,
        snaps: false,
        labels: false,
        star: false
      },
      {
        // Step 2: Slide down to line up at the flat starting line
        redY: 0,
        yellowY: 0,
        guide: true,
        snaps: true,
        labels: false,
        star: false
      },
      {
        // Step 3: Compare results - Fair alignment reveals true length
        redY: 0,
        yellowY: 0,
        guide: true,
        snaps: false,
        labels: true,
        star: true
      }
    ];

    const redWrapper = document.getElementById('redWrapper');
    const yellowWrapper = document.getElementById('yellowWrapper');
    const guide = document.getElementById('guide');
    const redBadge = document.getElementById('redBadge');
    const yellowBadge = document.getElementById('yellowBadge');
    const starBadge = document.getElementById('starBadge');
    const redSnap = document.getElementById('redSnap');
    const yellowSnap = document.getElementById('yellowSnap');
    const playBtn = document.getElementById('playBtn');

    const stepBtns = [
      document.getElementById('step1Btn'),
      document.getElementById('step2Btn'),
      document.getElementById('step3Btn')
    ];

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

      // Update buttons
      stepBtns.forEach((b, i) => b.classList.toggle('active', i === index));

      // Move pencils
      redWrapper.style.transform = `translateY(${s.redY}px)`;
      yellowWrapper.style.transform = `translateY(${s.yellowY}px)`;

      // Guide line
      guide.classList.toggle('show', s.guide);

      // Snap highlight
      redSnap.classList.toggle('show', s.snaps);
      yellowSnap.classList.toggle('show', s.snaps);

      // Result badges
      redBadge.classList.toggle('show', s.labels);
      yellowBadge.classList.toggle('show', s.labels);
      starBadge.classList.toggle('show', s.star);
    }

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

    function startLoop() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, 3000);
      isPlaying = true;
      playBtn.textContent = '⏸';
    }

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

    stepBtns.forEach((btn, idx) => {
      btn.addEventListener('click', () => {
        pauseLoop();
        applyStep(idx);
      });
    });

    playBtn.addEventListener('click', () => {
      if (isPlaying) {
        pauseLoop();
      } else {
        nextStep();
        startLoop();
      }
    });

    // Start auto-play
    startLoop();
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      user-select: none;
      -webkit-user-select: none;
    }

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

    /* Speech Bubble */
    .callout {
      background: #eff6ff;
      border: 2px solid #bfdbfe;
      color: #1d4ed8;
      font-weight: 700;
      font-size: 15px;
      padding: 8px 18px;
      border-radius: 24px;
      position: relative;
      text-align: center;
      max-width: 90%;
      box-shadow: 0 2px 6px rgba(37, 99, 235, 0.08);
      z-index: 10;
    }

    .callout::after {
      content: '';
      position: absolute;
      bottom: -8px;
      left: 50%;
      transform: translateX(-50%);
      border-width: 8px 8px 0;
      border-style: solid;
      border-color: #bfdbfe transparent transparent;
      display: block;
      width: 0;
    }

    /* Main Stage */
    .stage {
      position: relative;
      width: 100%;
      max-width: 440px;
      height: 250px;
      margin: 10px 0;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
    }

    /* Arms & Pivot Visual */
    .beam {
      position: absolute;
      bottom: 70px;
      left: 12%;
      right: 12%;
      height: 8px;
      background: #cbd5e1;
      border-radius: 4px;
      transform-origin: center center;
      transform: rotate(14deg);
      transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .fulcrum {
      position: absolute;
      bottom: 25px;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 0;
      border-left: 20px solid transparent;
      border-right: 20px solid transparent;
      border-bottom: 45px solid #94a3b8;
    }

    .fulcrum-base {
      position: absolute;
      bottom: 18px;
      left: 50%;
      transform: translateX(-50%);
      width: 80px;
      height: 8px;
      background: #64748b;
      border-radius: 4px;
    }

    /* Hand Columns */
    .side {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 45%;
      position: absolute;
      transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
      cursor: pointer;
    }

    .side-left {
      left: 2%;
      bottom: 70px;
      transform: translateY(-40px);
    }

    .side-right {
      right: 2%;
      bottom: 70px;
      transform: translateY(35px);
    }

    /* Objects */
    .sponge {
      width: 86px;
      height: 54px;
      background: #fde047;
      border: 3px solid #eab308;
      border-radius: 12px;
      position: relative;
      box-shadow: 0 4px 10px rgba(234, 179, 8, 0.25);
      display: flex;
      flex-wrap: wrap;
      padding: 6px;
      gap: 6px;
      align-content: space-around;
      justify-content: space-around;
    }

    .pore {
      background: #ca8a04;
      opacity: 0.35;
      border-radius: 50%;
    }
    .p1 { width: 10px; height: 10px; }
    .p2 { width: 6px; height: 6px; }
    .p3 { width: 12px; height: 8px; }
    .p4 { width: 8px; height: 8px; }
    .p5 { width: 7px; height: 11px; }

    .car {
      width: 46px;
      height: 28px;
      background: linear-gradient(145deg, #ef4444, #991b1b);
      border: 2px solid #7f1d1d;
      border-radius: 8px 12px 4px 4px;
      position: relative;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
    }

    .car-roof {
      position: absolute;
      top: -12px;
      left: 10px;
      width: 22px;
      height: 12px;
      background: linear-gradient(145deg, #f87171, #b91c1c);
      border: 2px solid #7f1d1d;
      border-bottom: none;
      border-radius: 6px 8px 0 0;
    }

    .car-window {
      position: absolute;
      top: -8px;
      left: 13px;
      width: 16px;
      height: 7px;
      background: #e0f2fe;
      border-radius: 3px 5px 0 0;
    }

    .car-wheel {
      position: absolute;
      bottom: -6px;
      width: 12px;
      height: 12px;
      background: #1e293b;
      border: 2px solid #94a3b8;
      border-radius: 50%;
    }
    .wheel-left { left: 4px; }
    .wheel-right { right: 4px; }

    .hand {
      font-size: 38px;
      line-height: 1;
      margin-top: 4px;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
    }

    /* Badges */
    .badge {
      font-size: 14px;
      font-weight: 800;
      padding: 4px 12px;
      border-radius: 20px;
      margin-top: 6px;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .badge-light {
      background: #ecfdf5;
      color: #059669;
      border: 1.5px solid #a7f3d0;
    }

    .badge-heavy {
      background: #fef2f2;
      color: #dc2626;
      border: 1.5px solid #fecaca;
    }

    /* Interactivity Bar */
    .controls {
      display: flex;
      gap: 8px;
      background: #f1f5f9;
      padding: 4px;
      border-radius: 30px;
    }

    .btn {
      border: none;
      background: transparent;
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
      padding: 6px 14px;
      border-radius: 20px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 5px;
      transition: all 0.2s ease;
    }

    .btn.active {
      background: #ffffff;
      color: #0284c7;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    }
  </style>
</head>
<body>

  
  <div class="callout">
    Feel with your hands, not just your eyes! 😊
  </div>

  
  <div class="stage">
    <div class="fulcrum"></div>
    <div class="fulcrum-base"></div>
    <div class="beam" id="beam"></div>

    
    <div class="side side-left" id="leftSide">
      <div class="sponge">
        <div class="pore p1"></div>
        <div class="pore p2"></div>
        <div class="pore p3"></div>
        <div class="pore p4"></div>
        <div class="pore p5"></div>
      </div>
      <div class="hand">🫲</div>
      <div class="badge badge-light" id="leftBadge">
        <span>⬆</span> Lighter
      </div>
    </div>

    
    <div class="side side-right" id="rightSide">
      <div class="car">
        <div class="car-roof"></div>
        <div class="car-window"></div>
        <div class="car-wheel wheel-left"></div>
        <div class="car-wheel wheel-right"></div>
      </div>
      <div class="hand">🫱</div>
      <div class="badge badge-heavy" id="rightBadge">
        <span>⬇</span> Heavier
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button class="btn active" id="btnWeight">🤲 Hands (Weight)</button>
    <button class="btn" id="btnEyes">👀 Eyes (Size)</button>
  </div>

  <script>
    const beam = document.getElementById('beam');
    const leftSide = document.getElementById('leftSide');
    const rightSide = document.getElementById('rightSide');
    const leftBadge = document.getElementById('leftBadge');
    const rightBadge = document.getElementById('rightBadge');
    const btnWeight = document.getElementById('btnWeight');
    const btnEyes = document.getElementById('btnEyes');

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

    function setWeightMode() {
      btnWeight.classList.add('active');
      btnEyes.classList.remove('active');
      
      beam.style.transform = 'rotate(14deg)';
      leftSide.style.transform = 'translateY(-40px)';
      rightSide.style.transform = 'translateY(35px)';

      leftBadge.innerHTML = '<span>⬆</span> Lighter';
      leftBadge.className = 'badge badge-light';

      rightBadge.innerHTML = '<span>⬇</span> Heavier';
      rightBadge.className = 'badge badge-heavy';
    }

    function setEyesMode() {
      btnEyes.classList.add('active');
      btnWeight.classList.remove('active');

      beam.style.transform = 'rotate(0deg)';
      leftSide.style.transform = 'translateY(0px)';
      rightSide.style.transform = 'translateY(0px)';

      leftBadge.innerHTML = '<span>🔍</span> Big';
      leftBadge.className = 'badge badge-light';

      rightBadge.innerHTML = '<span>🔍</span> Small';
      rightBadge.className = 'badge badge-heavy';
    }

    btnWeight.addEventListener('click', () => {
      playTone(440);
      setWeightMode();
    });

    btnEyes.addEventListener('click', () => {
      playTone(330);
      setEyesMode();
    });

    // Tap sides to feel a playful weight response
    leftSide.addEventListener('click', () => {
      playTone(520, 0.15);
      leftSide.style.transform = 'translateY(-52px)';
      setTimeout(() => {
        if (btnWeight.classList.contains('active')) {
          leftSide.style.transform = 'translateY(-40px)';
        } else {
          leftSide.style.transform = 'translateY(0px)';
        }
      }, 250);
    });

    rightSide.addEventListener('click', () => {
      playTone(220, 0.25);
      rightSide.style.transform = 'translateY(45px)';
      setTimeout(() => {
        if (btnWeight.classList.contains('active')) {
          rightSide.style.transform = 'translateY(35px)';
        } else {
          rightSide.style.transform = 'translateY(0px)';
        }
      }, 250);
    });
  </script>
</body>
</html>

Feeling and Comparing Weight: Heavier and Lighter

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Heavier vs Lighter</title>
  <style>
    * { 
      box-sizing: border-box; 
      margin: 0; 
      padding: 0; 
    }
    
    body {
      width: 100%;
      min-height: 100%;
      background-color: #f8f9fa;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px 10px;
      gap: 10px;
      user-select: none;
      overflow-x: hidden;
    }

    /* Labels & Badges */
    .labels-row {
      width: 100%;
      max-width: 440px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
    }

    .tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 16px;
      font-weight: 800;
      letter-spacing: 0.3px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
      transition: opacity 0.5s ease, background-color 0.5s ease;
    }

    .tag-heavy {
      background: #e1f0ff;
      color: #0265dc;
      border: 2px solid #8ec5fc;
    }

    .tag-light {
      background: #fff3e6;
      color: #d96500;
      border: 2px solid #ffcca1;
    }

    .tag-icon {
      font-size: 18px;
      line-height: 1;
      font-weight: 900;
    }

    /* Scene Container */
    .scene-container {
      position: relative;
      width: 100%;
      max-width: 440px;
      height: 250px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    svg.scale-svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    /* Balance Arms Group - Pivot at (240, 205) */
    .arms-assembly {
      transform-origin: 240px 205px;
      transition: transform 0.85s cubic-bezier(0.34, 1.3, 0.64, 1);
    }

    /* Counter-clockwise rotation: Left sinks down (+y), Right lifts up (-y) */
    .tilted .arms-assembly {
      transform: rotate(-15deg);
    }

    /* Soft Feather Floating Motion */
    @keyframes floatSoft {
      0%, 100% { transform: translateY(0px) rotate(0deg); }
      50% { transform: translateY(-5px) rotate(-2deg); }
    }
    .feather-group {
      animation: floatSoft 3s ease-in-out infinite;
      transform-origin: 385px 160px;
    }

    /* Dynamic weight visual cues */
    .sink-arrows {
      transition: opacity 0.6s ease;
      opacity: 1;
    }
    .lift-arrows {
      transition: opacity 0.6s ease;
      opacity: 1;
    }
    .balanced .sink-arrows,
    .balanced .lift-arrows {
      opacity: 0.3;
    }

    /* Interactive Button */
    .controls {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }

    .btn-weigh {
      background: #1e293b;
      color: #ffffff;
      border: none;
      padding: 8px 18px;
      font-size: 14px;
      font-weight: 700;
      border-radius: 20px;
      cursor: pointer;
      box-shadow: 0 3px 10px rgba(30, 41, 59, 0.15);
      transition: background-color 0.3s ease, box-shadow 0.3s ease;
    }

    .btn-weigh:hover {
      background: #334155;
      box-shadow: 0 4px 12px rgba(30, 41, 59, 0.25);
    }

    .btn-weigh:active {
      background: #0f172a;
    }

    .status-text {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      min-height: 16px;
    }

    @media (max-width: 380px) {
      .tag {
        font-size: 14px;
        padding: 5px 10px;
      }
      .tag-icon {
        font-size: 16px;
      }
      .scene-container {
        height: 220px;
      }
      .btn-weigh {
        font-size: 13px;
        padding: 7px 15px;
      }
    }
  </style>
</head>
<body>

  
  <div class="labels-row">
    <div class="tag tag-heavy" id="heavyTag">
      <span>Heavier</span>
      <span class="tag-icon">↓</span>
    </div>
    <div class="tag tag-light" id="lightTag">
      <span>Lighter</span>
      <span class="tag-icon">↑</span>
    </div>
  </div>

  
  <div class="scene-container tilted" id="sceneBox">
    <svg class="scale-svg" viewBox="0 0 480 270">
      <defs>
        
        <filter id="softShadow" x="-20%" y="-20%" width="140%" height="140%">
          <feDropShadow dx="0" dy="3" stdDeviation="3" flood-opacity="0.15"/>
        </filter>
        
        
        <linearGradient id="skinGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#fed7aa"/>
          <stop offset="100%" stop-color="#fba857"/>
        </linearGradient>

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

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

        <linearGradient id="featherGrad" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stop-color="#ffffff"/>
          <stop offset="100%" stop-color="#e2e8f0"/>
        </linearGradient>
      </defs>

      
      <g transform="translate(240, 260)">
        
        <path d="M-48,0 C-44,-60 44,-60 48,0 Z" fill="url(#sleeveGrad)"/>
        
        <circle cx="0" cy="-58" r="20" fill="url(#skinGrad)"/>
        
        <circle cx="-6" cy="-60" r="2" fill="#1e293b"/>
        <circle cx="6" cy="-60" r="2" fill="#1e293b"/>
        
        <path d="M-6,-52 Q0,-46 6,-52" stroke="#b45309" stroke-width="2" stroke-linecap="round" fill="none"/>
      </g>

      
      <line x1="80" y1="205" x2="400" y2="205" stroke="#cbd5e1" stroke-width="2" stroke-dasharray="5 5"/>

      
      <g class="arms-assembly" id="armsGroup">
        
        
        <path d="M100,205 Q240,215 380,205" stroke="#2563eb" stroke-width="18" stroke-linecap="round" fill="none"/>

        
        <g id="leftArmRock">
          
          <path d="M220,208 C170,206 130,206 95,205" stroke="url(#sleeveGrad)" stroke-width="20" stroke-linecap="round" fill="none"/>
          
          
          <g transform="translate(95, 205)">
            
            <ellipse cx="0" cy="0" rx="24" ry="11" fill="url(#skinGrad)"/>
            
            <circle cx="-15" cy="-2" r="5.5" fill="url(#skinGrad)"/>
            <circle cx="-5" cy="-4" r="6" fill="url(#skinGrad)"/>
            <circle cx="5" cy="-4" r="6" fill="url(#skinGrad)"/>
            <circle cx="15" cy="-2" r="5.5" fill="url(#skinGrad)"/>
            <ellipse cx="14" cy="4" rx="4.5" ry="3.5" fill="#fba857"/>
            
            
            <g transform="translate(0, -25)" filter="url(#softShadow)">
              <polygon points="-30,16 -24,-10 2,-22 26,-12 32,15 8,24 -18,22" fill="url(#rockGrad)" stroke="#1e293b" stroke-width="2.5" stroke-linejoin="round"/>
              
              <path d="M-24,-10 L2,-3 L26,-12" stroke="#cbd5e1" stroke-width="1.6" fill="none" opacity="0.7"/>
              <path d="M2,-3 L-2,22" stroke="#1e293b" stroke-width="1.8" fill="none" opacity="0.4"/>
              <path d="M2,-3 L32,15" stroke="#1e293b" stroke-width="1.8" fill="none" opacity="0.4"/>
            </g>

            
            <g class="sink-arrows" stroke="#0265dc" stroke-width="2.5" stroke-linecap="round">
              <line x1="-36" y1="8" x2="-36" y2="24"/>
              <polyline points="-40,19 -36,24 -32,19" fill="none"/>
              <line x1="36" y1="8" x2="36" y2="24"/>
              <polyline points="32,19 36,24 40,19" fill="none"/>
            </g>
          </g>
        </g>

        
        <g id="rightArmFeather">
          
          <path d="M260,208 C310,206 350,206 385,205" stroke="url(#sleeveGrad)" stroke-width="20" stroke-linecap="round" fill="none"/>
          
          
          <g transform="translate(385, 205)">
            
            <ellipse cx="0" cy="0" rx="24" ry="11" fill="url(#skinGrad)"/>
            
            <circle cx="-15" cy="-2" r="5.5" fill="url(#skinGrad)"/>
            <circle cx="-5" cy="-4" r="6" fill="url(#skinGrad)"/>
            <circle cx="5" cy="-4" r="6.5" fill="url(#skinGrad)"/>
            <circle cx="15" cy="-2" r="5.5" fill="url(#skinGrad)"/>
            <ellipse cx="-14" cy="4" rx="4.5" ry="3.5" fill="#fba857"/>

            
            <g class="feather-group" transform="translate(0, -28)" filter="url(#softShadow)">
              
              <path d="M-20,10 C-24,-8 -4,-26 16,-32 C12,-15 2,10 -20,10 Z" fill="url(#featherGrad)" stroke="#cbd5e1" stroke-width="1.5"/>
              
              <path d="M-26,16 C-8,-1 5,-16 18,-34" stroke="#ea580c" stroke-width="2" stroke-linecap="round" fill="none"/>
              
              <line x1="-10" y1="1" x2="0" y2="-5" stroke="#cbd5e1" stroke-width="1.2"/>
              <line x1="-3" y1="-8" x2="7" y2="-14" stroke="#cbd5e1" stroke-width="1.2"/>
              <line x1="5" y1="-17" x2="13" y2="-23" stroke="#cbd5e1" stroke-width="1.2"/>
            </g>

            
            <g class="lift-arrows" stroke="#ea580c" stroke-width="2.5" stroke-linecap="round">
              <line x1="30" y1="-10" x2="30" y2="-26"/>
              <polyline points="26,-21 30,-26 34,-21" fill="none"/>
              
              <circle cx="-28" cy="-30" r="2" fill="#f97316" stroke="none"/>
              <circle cx="26" cy="-40" r="2.5" fill="#f97316" stroke="none"/>
            </g>
          </g>
        </g>

      </g>
    </svg>
  </div>

  
  <div class="controls">
    <button class="btn-weigh" id="weighBtn" onclick="toggleTilt()" aria-label="Toggle scale balance">
      ⚖️ Test Balance
    </button>
    <span class="status-text" id="statusLabel">Heavy sinks down • Light floats up</span>
  </div>

  <script>
    const sceneBox = document.getElementById('sceneBox');
    const statusLabel = document.getElementById('statusLabel');
    let isTilted = true;
    let autoResetTimer = null;

    function toggleTilt() {
      clearTimeout(autoResetTimer);
      isTilted = !isTilted;

      if (isTilted) {
        sceneBox.classList.remove('balanced');
        sceneBox.classList.add('tilted');
        statusLabel.textContent = "Heavy sinks down • Light floats up";
      } else {
        sceneBox.classList.remove('tilted');
        sceneBox.classList.add('balanced');
        statusLabel.textContent = "Arms held level (releasing...)";

        // Smoothly auto-tilt back after a relaxed educational delay (2.2s)
        autoResetTimer = setTimeout(() => {
          if (!isTilted) {
            isTilted = true;
            sceneBox.classList.remove('balanced');
            sceneBox.classList.add('tilted');
            statusLabel.textContent = "Heavy sinks down • Light floats up";
          }
        }, 2200);
      }
    }
  </script>
</body>
</html>

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

    body {
      width: 100%;
      height: 100%;
      min-height: 360px;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 12px;
      user-select: none;
    }

    .comparison-container {
      width: 100%;
      max-width: 580px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      position: relative;
    }

    .weight-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 20px;
      padding: 16px 12px 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
      min-height: 290px;
      position: relative;
      overflow: hidden;
    }

    .weight-card:active {
      transform: translateY(2px);
    }

    .heavy-card {
      background: linear-gradient(180deg, #fff5f5 0%, #ffffff 60%);
      border-color: #fecaca;
    }
    .heavy-card:hover {
      box-shadow: 0 6px 16px rgba(239, 68, 68, 0.15);
      border-color: #f87171;
    }

    .light-card {
      background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 60%);
      border-color: #bbf7d0;
    }
    .light-card:hover {
      box-shadow: 0 6px 16px rgba(34, 197, 94, 0.15);
      border-color: #4ade80;
    }

    .badge {
      font-size: 20px;
      font-weight: 800;
      padding: 6px 18px;
      border-radius: 999px;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }

    .heavy-badge {
      background-color: #ef4444;
      color: #ffffff;
      box-shadow: 0 3px 8px rgba(239, 68, 68, 0.3);
    }

    .light-badge {
      background-color: #22c55e;
      color: #ffffff;
      box-shadow: 0 3px 8px rgba(34, 197, 94, 0.3);
    }

    .stage {
      position: relative;
      width: 100%;
      height: 160px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Dashed level reference line */
    .reference-line {
      position: absolute;
      top: 50%;
      left: 6%;
      right: 6%;
      height: 2px;
      border-top: 2px dashed #cbd5e1;
      z-index: 1;
    }

    .hand-rig {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      z-index: 2;
      transition: top 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .hand-rig.heavy-pos {
      top: 52px; /* Low position */
    }

    .hand-rig.light-pos {
      top: 4px; /* High position */
    }

    .object-emoji {
      font-size: 54px;
      line-height: 1;
      filter: drop-shadow(0 4px 6px rgba(0,0,0,0.12));
      transform-origin: center bottom;
      transition: transform 0.3s ease;
    }

    .hand-art {
      width: 80px;
      height: 48px;
      margin-top: -6px;
    }

    .direction-cue {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 15px;
      font-weight: 700;
      border-radius: 12px;
      padding: 6px 12px;
    }

    .cue-down {
      color: #dc2626;
      background: #fee2e2;
    }

    .cue-up {
      color: #16a34a;
      background: #dcfce7;
    }

    .cue-arrow {
      font-size: 18px;
      line-height: 1;
      display: inline-block;
      transition: transform 0.3s ease;
    }

    .anim-drop {
      animation: heavyDrop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .anim-float {
      animation: lightFloat 0.6s ease-in-out;
    }

    @keyframes heavyDrop {
      0% { transform: translateX(-50%) translateY(-18px); }
      60% { transform: translateX(-50%) translateY(8px); }
      100% { transform: translateX(-50%) translateY(0); }
    }

    @keyframes lightFloat {
      0% { transform: translateX(-50%) translateY(12px); }
      50% { transform: translateX(-50%) translateY(-8px); }
      100% { transform: translateX(-50%) translateY(0); }
    }

    @media (max-width: 380px) {
      .badge {
        font-size: 17px;
        padding: 5px 14px;
      }
      .object-emoji {
        font-size: 46px;
      }
      .hand-art {
        width: 68px;
        height: 42px;
      }
      .direction-cue {
        font-size: 13px;
        padding: 4px 8px;
      }
      .weight-card {
        padding: 12px 8px 10px;
        min-height: 260px;
      }
    }
  </style>
</head>
<body>

  <div class="comparison-container">
    
    
    <div class="weight-card heavy-card" id="heavyCard" role="button" aria-label="Apple is heavier, pushes hand down">
      <div class="badge heavy-badge">Heavier</div>
      
      <div class="stage">
        <div class="reference-line"></div>
        <div class="hand-rig heavy-pos" id="heavyRig">
          <div class="object-emoji">🍎</div>
          
          <svg class="hand-art" viewBox="0 0 100 60" fill="none" xmlns="http://www.w3.org/2000/svg">
            
            <path d="M 0 35 L 30 35 L 30 55 L 0 55 Z" fill="#3B82F6" rx="4" />
            
            <path d="M 28 36 L 50 36 C 65 36 78 40 88 44 C 92 46 92 50 86 52 C 75 55 60 54 45 54 L 28 54 Z" fill="#FDBA74" />
            
            <path d="M 52 36 C 66 33 82 34 94 37 C 97 38 97 42 93 43 C 82 46 68 45 52 45 Z" fill="#FDBA74" />
            
            <path d="M 45 36 C 48 26 56 26 60 30 C 62 33 58 38 50 38 Z" fill="#FDBA74" />
          </svg>
        </div>
      </div>

      <div class="direction-cue cue-down">
        <span class="cue-arrow">⬇</span> Pushes down
      </div>
    </div>

    
    <div class="weight-card light-card" id="lightCard" role="button" aria-label="Leaf is lighter, hand floats up">
      <div class="badge light-badge">Lighter</div>
      
      <div class="stage">
        <div class="reference-line"></div>
        <div class="hand-rig light-pos" id="lightRig">
          <div class="object-emoji">🍃</div>
          
          <svg class="hand-art" viewBox="0 0 100 60" fill="none" xmlns="http://www.w3.org/2000/svg">
            
            <path d="M 0 35 L 30 35 L 30 55 L 0 55 Z" fill="#EC4899" rx="4" />
            
            <path d="M 28 36 L 50 36 C 65 36 78 40 88 44 C 92 46 92 50 86 52 C 75 55 60 54 45 54 L 28 54 Z" fill="#FDBA74" />
            
            <path d="M 52 36 C 66 33 82 34 94 37 C 97 38 97 42 93 43 C 82 46 68 45 52 45 Z" fill="#FDBA74" />
            
            <path d="M 45 36 C 48 26 56 26 60 30 C 62 33 58 38 50 38 Z" fill="#FDBA74" />
          </svg>
        </div>
      </div>

      <div class="direction-cue cue-up">
        <span class="cue-arrow">⬆</span> Stays high
      </div>
    </div>

  </div>

  <script>
    // Web Audio Sound synthesis for interactive feedback
    function playWeightTone(isHeavy) {
      try {
        const AudioCtx = window.AudioContext || window.webkitAudioContext;
        if (!AudioCtx) return;
        const ctx = new AudioCtx();
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();

        osc.connect(gain);
        gain.connect(ctx.destination);

        const now = ctx.currentTime;
        if (isHeavy) {
          // Low, weighty downward thud
          osc.type = 'sine';
          osc.frequency.setValueAtTime(220, now);
          osc.frequency.exponentialRampToValueAtTime(80, now + 0.35);
          gain.gain.setValueAtTime(0.3, now);
          gain.gain.exponentialRampToValueAtTime(0.001, now + 0.35);
          osc.start(now);
          osc.stop(now + 0.35);
        } else {
          // Light, sweet uplifting chime
          osc.type = 'triangle';
          osc.frequency.setValueAtTime(520, now);
          osc.frequency.exponentialRampToValueAtTime(780, now + 0.3);
          gain.gain.setValueAtTime(0.25, now);
          gain.gain.exponentialRampToValueAtTime(0.001, now + 0.3);
          osc.start(now);
          osc.stop(now + 0.3);
        }
      } catch (e) {
        // Silent fallback if audio context is restricted
      }
    }

    const heavyCard = document.getElementById('heavyCard');
    const lightCard = document.getElementById('lightCard');
    const heavyRig = document.getElementById('heavyRig');
    const lightRig = document.getElementById('lightRig');

    function triggerHeavy() {
      playWeightTone(true);
      heavyRig.classList.remove('anim-drop');
      void heavyRig.offsetWidth; // Reflow to restart animation
      heavyRig.classList.add('anim-drop');
    }

    function triggerLight() {
      playWeightTone(false);
      lightRig.classList.remove('anim-float');
      void lightRig.offsetWidth; // Reflow to restart animation
      lightRig.classList.add('anim-float');
    }

    heavyCard.addEventListener('click', triggerHeavy);
    lightCard.addEventListener('click', triggerLight);
  </script>
</body>
</html>

OGM.0.MD.1

Aligned learning resources

Related diagrams