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

    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 10px;
    }

    .comparison-wrap {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      max-width: 640px;
    }

    .sand-card {
      flex: 1;
      min-width: 120px;
      height: 250px;
      background: #fef7ea;
      border: 2px solid #fde68a;
      border-radius: 18px;
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(217, 119, 6, 0.08);
    }

    .card-title {
      text-align: center;
      font-size: 15px;
      font-weight: 700;
      color: #b45309;
      padding: 8px 4px 4px;
      letter-spacing: 0.3px;
    }

    .sand-area {
      flex: 1;
      position: relative;
      margin: 4px;
      border-radius: 12px;
      background: #fffdf9;
    }

    /* Shell Element */
    .shell-item {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transform: translate(-50%, -50%);
      transition: transform 0.25s ease, filter 0.25s ease;
    }

    .shell-icon {
      font-size: 28px;
      line-height: 1;
      filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.12));
    }

    .badge {
      position: absolute;
      top: -4px;
      right: -6px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #0284c7;
      color: #ffffff;
      font-size: 11px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
      border: 1.5px solid #ffffff;
    }

    /* Highlight state during counting */
    .shell-item.active {
      transform: translate(-50%, -50%) scale(1.2);
    }

    .shell-item.active .badge {
      background: #16a34a;
      transform: scale(1.15);
    }

    /* Bunched layout (clustered tightly in center) */
    .bunched .s1 { top: 38%; left: 38%; }
    .bunched .s2 { top: 35%; left: 62%; }
    .bunched .s3 { top: 58%; left: 28%; }
    .bunched .s4 { top: 62%; left: 52%; }
    .bunched .s5 { top: 56%; left: 74%; }

    /* Spread out layout (spaced far apart) */
    .spread .s1 { top: 22%; left: 24%; }
    .spread .s2 { top: 24%; left: 76%; }
    .spread .s3 { top: 52%; left: 50%; }
    .spread .s4 { top: 80%; left: 24%; }
    .spread .s5 { top: 78%; left: 76%; }

    /* Center connector */
    .center-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      flex-shrink: 0;
      width: 80px;
    }

    .equals-box {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      background: #e0f2fe;
      border: 2px solid #38bdf8;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      font-weight: 900;
      color: #0284c7;
      animation: pulse-eq 2.4s ease-in-out infinite;
    }

    @keyframes pulse-eq {
      0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.4); }
      50% { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(56, 189, 248, 0); }
    }

    .result-badge {
      background: #22c55e;
      color: #ffffff;
      font-size: 12px;
      font-weight: 800;
      padding: 5px 8px;
      border-radius: 12px;
      text-align: center;
      white-space: nowrap;
      box-shadow: 0 2px 6px rgba(34, 197, 94, 0.3);
    }

    .count-btn {
      margin-top: 12px;
      background: #0284c7;
      color: #ffffff;
      border: none;
      padding: 8px 18px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 2px 8px rgba(2, 132, 199, 0.25);
      transition: background 0.2s, transform 0.1s;
    }

    .count-btn:active {
      transform: scale(0.96);
      background: #0369a1;
    }

    @media (max-width: 400px) {
      .card-title { font-size: 13px; }
      .shell-icon { font-size: 22px; }
      .badge { width: 16px; height: 16px; font-size: 9px; }
      .equals-box { width: 38px; height: 38px; font-size: 22px; }
      .result-badge { font-size: 10px; padding: 4px 6px; }
      .center-col { width: 68px; }
      .sand-card { height: 220px; }
    }
  </style>
</head>
<body>

  <div class="comparison-wrap">
    
    <div class="sand-card">
      <div class="card-title">Bunched</div>
      <div class="sand-area bunched" id="leftArea">
        <div class="shell-item s1" data-num="1"><span class="shell-icon">🐚</span><span class="badge">1</span></div>
        <div class="shell-item s2" data-num="2"><span class="shell-icon">🐚</span><span class="badge">2</span></div>
        <div class="shell-item s3" data-num="3"><span class="shell-icon">🐚</span><span class="badge">3</span></div>
        <div class="shell-item s4" data-num="4"><span class="shell-icon">🐚</span><span class="badge">4</span></div>
        <div class="shell-item s5" data-num="5"><span class="shell-icon">🐚</span><span class="badge">5</span></div>
      </div>
    </div>

    
    <div class="center-col">
      <div class="equals-box" aria-label="Equal to">=</div>
      <div class="result-badge">Both have 5!</div>
    </div>

    
    <div class="sand-card">
      <div class="card-title">Spread Out</div>
      <div class="sand-area spread" id="rightArea">
        <div class="shell-item s1" data-num="1"><span class="shell-icon">🐚</span><span class="badge">1</span></div>
        <div class="shell-item s2" data-num="2"><span class="shell-icon">🐚</span><span class="badge">2</span></div>
        <div class="shell-item s3" data-num="3"><span class="shell-icon">🐚</span><span class="badge">3</span></div>
        <div class="shell-item s4" data-num="4"><span class="shell-icon">🐚</span><span class="badge">4</span></div>
        <div class="shell-item s5" data-num="5"><span class="shell-icon">🐚</span><span class="badge">5</span></div>
      </div>
    </div>
  </div>

  <button class="count-btn" id="countBtn">
    <span>▶</span> <span>Count 1 to 5</span>
  </button>

  <script>
    // Audio synthesis on user interaction
    let audioCtx = null;
    const notes = [261.63, 293.66, 329.63, 392.00, 523.25]; // C4, D4, E4, G4, C5

    function playTone(freq) {
      try {
        if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        if (audioCtx.state === 'suspended') audioCtx.resume();
        const osc = audioCtx.createOscillator();
        const gain = audioCtx.createGain();
        osc.type = 'sine';
        osc.frequency.setValueAtTime(freq, audioCtx.currentTime);
        gain.gain.setValueAtTime(0.2, audioCtx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.35);
        osc.connect(gain);
        gain.connect(audioCtx.destination);
        osc.start();
        osc.stop(audioCtx.currentTime + 0.35);
      } catch (e) {}
    }

    const countBtn = document.getElementById('countBtn');
    const allShells = document.querySelectorAll('.shell-item');
    let isCounting = false;

    function highlightPair(num) {
      allShells.forEach(s => {
        if (s.getAttribute('data-num') == num) {
          s.classList.add('active');
        } else {
          s.classList.remove('active');
        }
      });
      playTone(notes[num - 1]);
    }

    function clearHighlight() {
      allShells.forEach(s => s.classList.remove('active'));
    }

    function runCount() {
      if (isCounting) return;
      isCounting = true;
      let step = 1;
      
      highlightPair(step);
      
      const interval = setInterval(() => {
        step++;
        if (step <= 5) {
          highlightPair(step);
        } else {
          clearInterval(interval);
          setTimeout(() => {
            clearHighlight();
            isCounting = false;
          }, 800);
        }
      }, 700);
    }

    countBtn.addEventListener('click', runCount);

    // Direct tap on individual shells
    allShells.forEach(shell => {
      shell.addEventListener('click', () => {
        const num = parseInt(shell.getAttribute('data-num'), 10);
        highlightPair(num);
        setTimeout(clearHighlight, 1200);
      });
    });
  </script>
</body>
</html>

Same Amount Even When Spread Out

<!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%;
      font-family: system-ui, -apple-system, sans-serif;
      background: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      user-select: none;
    }
    .header {
      text-align: center;
      margin-bottom: 6px;
    }
    .title-badge {
      display: inline-block;
      background: #fed7aa;
      color: #9a3412;
      font-weight: 700;
      font-size: 15px;
      padding: 5px 14px;
      border-radius: 20px;
      border: 1px solid #fdba74;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    .sand-stage {
      position: relative;
      width: 100%;
      max-width: 440px;
      height: 250px;
      background: radial-gradient(ellipse at center, #fef3c7 0%, #fde68a 65%, #fcd34d 100%);
      border-radius: 24px;
      box-shadow: inset 0 2px 8px rgba(180, 83, 9, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
      overflow: hidden;
      margin: 4px 0;
    }
    .sand-texture {
      position: absolute;
      inset: 0;
      opacity: 0.18;
      background-image: radial-gradient(#92400e 1px, transparent 1px);
      background-size: 14px 14px;
      pointer-events: none;
    }
    .bunch-ring {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 250px;
      height: 190px;
      border-radius: 50%;
      border: 2px dashed rgba(217, 119, 6, 0.25);
      pointer-events: none;
    }
    .shell-item {
      position: absolute;
      width: 68px;
      height: 68px;
      transform: translate(-50%, -50%);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
      z-index: 2;
    }
    .shell-item:hover {
      filter: brightness(1.05);
    }
    .shell-item.active {
      transform: translate(-50%, -50%) scale(1.12);
    }
    .shell-svg {
      width: 100%;
      height: 100%;
      filter: drop-shadow(0 4px 5px rgba(180, 83, 9, 0.2));
    }
    .count-badge {
      position: absolute;
      top: -6px;
      right: -4px;
      width: 26px;
      height: 26px;
      background: #f43f5e;
      color: #ffffff;
      border: 2px solid #ffffff;
      border-radius: 50%;
      font-weight: 800;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 6px rgba(225, 29, 72, 0.35);
      opacity: 0;
      transform: scale(0.4);
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
      pointer-events: none;
    }
    .shell-item.active .count-badge {
      opacity: 1;
      transform: scale(1);
    }
    .finger-pointer {
      position: absolute;
      font-size: 32px;
      pointer-events: none;
      z-index: 10;
      transition: left 0.4s cubic-bezier(0.22, 1, 0.36, 1), top 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.25s ease, opacity 0.3s;
      transform: translate(-20%, -10%);
      filter: drop-shadow(0 3px 6px rgba(0,0,0,0.2));
      opacity: 0;
    }
    .finger-pointer.tapping {
      transform: translate(-20%, 6%) scale(0.92);
    }
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      margin-top: 4px;
    }
    .btn {
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      color: #334155;
      padding: 6px 14px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      transition: background 0.15s, border-color 0.15s;
    }
    .btn:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }
    .btn-primary {
      background: #ea580c;
      border-color: #c2410c;
      color: #ffffff;
    }
    .btn-primary:hover {
      background: #c2410c;
    }
    .status-text {
      font-size: 14px;
      font-weight: 700;
      color: #9a3412;
      min-height: 20px;
      text-align: center;
    }
  </style>
</head>
<body>

  <div class="header">
    <div class="title-badge">5 Shells in a Bunch</div>
  </div>

  <div class="sand-stage" id="stage">
    <div class="sand-texture"></div>
    <div class="bunch-ring"></div>

    
    <div class="shell-item" id="shell-0" style="left: 35%; top: 38%;" onclick="countTo(0)">
      <svg class="shell-svg" viewBox="0 0 100 100">
        <path d="M50 12 C25 12 14 38 18 68 C20 84 32 90 50 90 C68 90 80 84 82 68 C86 38 75 12 50 12 Z" fill="#fb7185"/>
        <path d="M50 14 C30 14 20 38 23 66 C25 80 34 86 50 86 C66 86 75 80 77 66 C80 38 70 14 50 14 Z" fill="#fda4af"/>
        <path d="M50 14 L50 86" stroke="#f43f5e" stroke-width="3" stroke-linecap="round"/>
        <path d="M42 16 C35 34 32 60 38 84" stroke="#f43f5e" stroke-width="2.5" fill="none" stroke-linecap="round"/>
        <path d="M58 16 C65 34 68 60 62 84" stroke="#f43f5e" stroke-width="2.5" fill="none" stroke-linecap="round"/>
        <path d="M34 22 C26 40 24 62 30 80" stroke="#f43f5e" stroke-width="2" fill="none" stroke-linecap="round"/>
        <path d="M66 22 C74 40 76 62 70 80" stroke="#f43f5e" stroke-width="2" fill="none" stroke-linecap="round"/>
        <ellipse cx="50" cy="85" rx="14" ry="5" fill="#e11d48"/>
      </svg>
      <div class="count-badge">1</div>
    </div>

    <div class="shell-item" id="shell-1" style="left: 62%; top: 35%;" onclick="countTo(1)">
      <svg class="shell-svg" viewBox="0 0 100 100">
        <path d="M50 12 C25 12 14 38 18 68 C20 84 32 90 50 90 C68 90 80 84 82 68 C86 38 75 12 50 12 Z" fill="#f87171"/>
        <path d="M50 14 C30 14 20 38 23 66 C25 80 34 86 50 86 C66 86 75 80 77 66 C80 38 70 14 50 14 Z" fill="#fca5a5"/>
        <path d="M50 14 L50 86" stroke="#ef4444" stroke-width="3" stroke-linecap="round"/>
        <path d="M42 16 C35 34 32 60 38 84" stroke="#ef4444" stroke-width="2.5" fill="none" stroke-linecap="round"/>
        <path d="M58 16 C65 34 68 60 62 84" stroke="#ef4444" stroke-width="2.5" fill="none" stroke-linecap="round"/>
        <path d="M34 22 C26 40 24 62 30 80" stroke="#ef4444" stroke-width="2" fill="none" stroke-linecap="round"/>
        <path d="M66 22 C74 40 76 62 70 80" stroke="#ef4444" stroke-width="2" fill="none" stroke-linecap="round"/>
        <ellipse cx="50" cy="85" rx="14" ry="5" fill="#dc2626"/>
      </svg>
      <div class="count-badge">2</div>
    </div>

    <div class="shell-item" id="shell-2" style="left: 48%; top: 50%;" onclick="countTo(2)">
      <svg class="shell-svg" viewBox="0 0 100 100">
        <path d="M50 12 C25 12 14 38 18 68 C20 84 32 90 50 90 C68 90 80 84 82 68 C86 38 75 12 50 12 Z" fill="#fb923c"/>
        <path d="M50 14 C30 14 20 38 23 66 C25 80 34 86 50 86 C66 86 75 80 77 66 C80 38 70 14 50 14 Z" fill="#fdba74"/>
        <path d="M50 14 L50 86" stroke="#f97316" stroke-width="3" stroke-linecap="round"/>
        <path d="M42 16 C35 34 32 60 38 84" stroke="#f97316" stroke-width="2.5" fill="none" stroke-linecap="round"/>
        <path d="M58 16 C65 34 68 60 62 84" stroke="#f97316" stroke-width="2.5" fill="none" stroke-linecap="round"/>
        <path d="M34 22 C26 40 24 62 30 80" stroke="#f97316" stroke-width="2" fill="none" stroke-linecap="round"/>
        <path d="M66 22 C74 40 76 62 70 80" stroke="#f97316" stroke-width="2" fill="none" stroke-linecap="round"/>
        <ellipse cx="50" cy="85" rx="14" ry="5" fill="#ea580c"/>
      </svg>
      <div class="count-badge">3</div>
    </div>

    <div class="shell-item" id="shell-3" style="left: 32%; top: 68%;" onclick="countTo(3)">
      <svg class="shell-svg" viewBox="0 0 100 100">
        <path d="M50 12 C25 12 14 38 18 68 C20 84 32 90 50 90 C68 90 80 84 82 68 C86 38 75 12 50 12 Z" fill="#f87171"/>
        <path d="M50 14 C30 14 20 38 23 66 C25 80 34 86 50 86 C66 86 75 80 77 66 C80 38 70 14 50 14 Z" fill="#fca5a5"/>
        <path d="M50 14 L50 86" stroke="#ef4444" stroke-width="3" stroke-linecap="round"/>
        <path d="M42 16 C35 34 32 60 38 84" stroke="#ef4444" stroke-width="2.5" fill="none" stroke-linecap="round"/>
        <path d="M58 16 C65 34 68 60 62 84" stroke="#ef4444" stroke-width="2.5" fill="none" stroke-linecap="round"/>
        <path d="M34 22 C26 40 24 62 30 80" stroke="#ef4444" stroke-width="2" fill="none" stroke-linecap="round"/>
        <path d="M66 22 C74 40 76 62 70 80" stroke="#ef4444" stroke-width="2" fill="none" stroke-linecap="round"/>
        <ellipse cx="50" cy="85" rx="14" ry="5" fill="#dc2626"/>
      </svg>
      <div class="count-badge">4</div>
    </div>

    <div class="shell-item" id="shell-4" style="left: 64%; top: 66%;" onclick="countTo(4)">
      <svg class="shell-svg" viewBox="0 0 100 100">
        <path d="M50 12 C25 12 14 38 18 68 C20 84 32 90 50 90 C68 90 80 84 82 68 C86 38 75 12 50 12 Z" fill="#fb7185"/>
        <path d="M50 14 C30 14 20 38 23 66 C25 80 34 86 50 86 C66 86 75 80 77 66 C80 38 70 14 50 14 Z" fill="#fda4af"/>
        <path d="M50 14 L50 86" stroke="#f43f5e" stroke-width="3" stroke-linecap="round"/>
        <path d="M42 16 C35 34 32 60 38 84" stroke="#f43f5e" stroke-width="2.5" fill="none" stroke-linecap="round"/>
        <path d="M58 16 C65 34 68 60 62 84" stroke="#f43f5e" stroke-width="2.5" fill="none" stroke-linecap="round"/>
        <path d="M34 22 C26 40 24 62 30 80" stroke="#f43f5e" stroke-width="2" fill="none" stroke-linecap="round"/>
        <path d="M66 22 C74 40 76 62 70 80" stroke="#f43f5e" stroke-width="2" fill="none" stroke-linecap="round"/>
        <ellipse cx="50" cy="85" rx="14" ry="5" fill="#e11d48"/>
      </svg>
      <div class="count-badge">5</div>
    </div>

    <div class="finger-pointer" id="finger">👆</div>
  </div>

  <div class="status-text" id="statusText">Total: 5 Shells</div>

  <div class="controls">
    <button class="btn btn-primary" id="countBtn" onclick="togglePlay()">
      <span id="playIcon">▶</span> Count Shells
    </button>
    <button class="btn" onclick="resetCount()">↺ Reset</button>
  </div>

  <script>
    const shellCoords = [
      { left: '35%', top: '38%' },
      { left: '62%', top: '35%' },
      { left: '48%', top: '50%' },
      { left: '32%', top: '68%' },
      { left: '64%', top: '66%' }
    ];

    const shells = [
      document.getElementById('shell-0'),
      document.getElementById('shell-1'),
      document.getElementById('shell-2'),
      document.getElementById('shell-3'),
      document.getElementById('shell-4')
    ];

    const finger = document.getElementById('finger');
    const statusText = document.getElementById('statusText');
    const playIcon = document.getElementById('playIcon');

    let currentStep = -1;
    let timer = null;
    let isPlaying = false;

    function showStep(idx) {
      currentStep = idx;

      // Update shells
      shells.forEach((shell, i) => {
        if (i <= idx) {
          shell.classList.add('active');
        } else {
          shell.classList.remove('active');
        }
      });

      if (idx >= 0 && idx < 5) {
        finger.style.opacity = '1';
        finger.style.left = shellCoords[idx].left;
        finger.style.top = shellCoords[idx].top;
        
        finger.classList.add('tapping');
        setTimeout(() => finger.classList.remove('tapping'), 180);

        statusText.textContent = `Counting: ${idx + 1}`;
      } else if (idx >= 5) {
        finger.style.opacity = '0';
        statusText.textContent = 'Total: 5 Shells';
      } else {
        finger.style.opacity = '0';
        statusText.textContent = '5 Shells in a Bunch';
      }
    }

    function stepForward() {
      if (currentStep < 4) {
        showStep(currentStep + 1);
      } else {
        stopPlay();
        showStep(5);
      }
    }

    function togglePlay() {
      if (isPlaying) {
        stopPlay();
      } else {
        startPlay();
      }
    }

    function startPlay() {
      isPlaying = true;
      playIcon.textContent = '⏸';
      if (currentStep >= 4 || currentStep === -1) {
        resetCount();
      }
      stepForward();
      timer = setInterval(() => {
        stepForward();
      }, 1000);
    }

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

    function countTo(idx) {
      stopPlay();
      showStep(idx);
    }

    function resetCount() {
      stopPlay();
      showStep(-1);
    }

    // Initialize in all-counted state so it is static-readable
    shells.forEach(s => s.classList.add('active'));
  </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;
      color: #1e2945;
      background: #fdfbf7;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 16px;
      user-select: none;
      -webkit-user-select: none;
    }

    /* Controls header */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      max-width: 480px;
    }

    .btn {
      font-size: 14px;
      font-weight: 600;
      padding: 8px 16px;
      border-radius: 999px;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #475569;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: all 0.2s ease;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }

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

    .play-btn {
      margin-left: auto;
      padding: 8px 12px;
    }

    /* Sand Play Area */
    .sand-area {
      position: relative;
      width: 100%;
      max-width: 520px;
      height: 220px;
      background: radial-gradient(circle at 50% 50%, #fef3c7 0%, #fde68a 100%);
      border-radius: 20px;
      overflow: hidden;
      box-shadow: inset 0 2px 8px rgba(180, 83, 9, 0.08);
      margin: 12px 0;
    }

    /* Decorative sand texture ripples */
    .ripple {
      position: absolute;
      border: 2px dashed rgba(217, 119, 6, 0.15);
      border-radius: 50%;
      pointer-events: none;
    }
    .ripple-1 { width: 340px; height: 160px; top: 30px; left: 50%; transform: translateX(-50%); }
    .ripple-2 { width: 460px; height: 200px; top: 10px; left: 50%; transform: translateX(-50%); }

    /* Shell Item */
    .shell-item {
      position: absolute;
      width: 56px;
      height: 56px;
      margin-left: -28px;
      margin-top: -28px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      transition: left 1s cubic-bezier(0.34, 1.3, 0.64, 1),
                  top 1s cubic-bezier(0.34, 1.3, 0.64, 1);
      z-index: 2;
    }

    .number-tag {
      position: absolute;
      top: -26px;
      background: #0284c7;
      color: #ffffff;
      font-size: 14px;
      font-weight: 700;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 10px rgba(2, 132, 199, 0.6), 0 2px 4px rgba(0,0,0,0.15);
      opacity: 0;
      transform: scale(0.4);
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      pointer-events: none;
    }

    .shell-icon {
      font-size: 40px;
      line-height: 1;
      filter: drop-shadow(0 4px 6px rgba(120, 53, 15, 0.25));
      transform: rotate(0deg);
      transition: transform 0.8s ease;
    }

    /* Tags visible state */
    .sand-area.spread .number-tag {
      opacity: 1;
      transform: scale(1);
    }

    /* Tag delays for sequential pop */
    .sand-area.spread .shell-item:nth-child(1) .number-tag { transition-delay: 0.6s; }
    .sand-area.spread .shell-item:nth-child(2) .number-tag { transition-delay: 0.75s; }
    .sand-area.spread .shell-item:nth-child(3) .number-tag { transition-delay: 0.9s; }
    .sand-area.spread .shell-item:nth-child(4) .number-tag { transition-delay: 1.05s; }
    .sand-area.spread .shell-item:nth-child(5) .number-tag { transition-delay: 1.2s; }

    /* Clumped positions */
    .sand-area.clump .s1 { left: 42%; top: 48%; }
    .sand-area.clump .s2 { left: 47%; top: 38%; }
    .sand-area.clump .s3 { left: 53%; top: 46%; }
    .sand-area.clump .s4 { left: 58%; top: 39%; }
    .sand-area.clump .s5 { left: 50%; top: 62%; }

    .sand-area.clump .s1 .shell-icon { transform: rotate(-18deg); }
    .sand-area.clump .s2 .shell-icon { transform: rotate(10deg); }
    .sand-area.clump .s3 .shell-icon { transform: rotate(-8deg); }
    .sand-area.clump .s4 .shell-icon { transform: rotate(15deg); }
    .sand-area.clump .s5 .shell-icon { transform: rotate(4deg); }

    /* Spread positions */
    .sand-area.spread .s1 { left: 14%; top: 54%; }
    .sand-area.spread .s2 { left: 32%; top: 54%; }
    .sand-area.spread .s3 { left: 50%; top: 54%; }
    .sand-area.spread .s4 { left: 68%; top: 54%; }
    .sand-area.spread .s5 { left: 86%; top: 54%; }

    .sand-area.spread .shell-icon { transform: rotate(0deg); }

    /* Bottom Banner */
    .banner {
      width: 100%;
      max-width: 480px;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 16px;
      text-align: center;
      font-size: 16px;
      font-weight: 700;
      color: #0f172a;
      transition: all 0.3s ease;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    }

    .banner.spread {
      background: #eff6ff;
      border-color: #38bdf8;
      color: #0369a1;
      box-shadow: 0 4px 12px rgba(2, 132, 199, 0.15);
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button id="btnClump" class="btn active" onclick="setMode('clump')">Clumped (5)</button>
    <button id="btnSpread" class="btn" onclick="setMode('spread')">Spread Out (5)</button>
    <button id="btnPlay" class="btn play-btn" onclick="toggleAutoPlay()" title="Toggle auto-play">⏸</button>
  </div>

  
  <div id="sandArea" class="sand-area clump">
    <div class="ripple ripple-1"></div>
    <div class="ripple ripple-2"></div>

    <div class="shell-item s1">
      <div class="number-tag">1</div>
      <div class="shell-icon">🐚</div>
    </div>
    <div class="shell-item s2">
      <div class="number-tag">2</div>
      <div class="shell-icon">🐚</div>
    </div>
    <div class="shell-item s3">
      <div class="number-tag">3</div>
      <div class="shell-icon">🐚</div>
    </div>
    <div class="shell-item s4">
      <div class="number-tag">4</div>
      <div class="shell-icon">🐚</div>
    </div>
    <div class="shell-item s5">
      <div class="number-tag">5</div>
      <div class="shell-icon">🐚</div>
    </div>
  </div>

  
  <div id="banner" class="banner">
    Clumped Together = 5
  </div>

  <script>
    const sandArea = document.getElementById('sandArea');
    const banner = document.getElementById('banner');
    const btnClump = document.getElementById('btnClump');
    const btnSpread = document.getElementById('btnSpread');
    const btnPlay = document.getElementById('btnPlay');

    let currentMode = 'clump';
    let isPlaying = true;
    let loopTimer = null;

    function setMode(mode, userInitiated = false) {
      currentMode = mode;

      if (mode === 'spread') {
        sandArea.className = 'sand-area spread';
        banner.className = 'banner spread';
        banner.textContent = 'Spread Out = Still 5!';
        btnSpread.classList.add('active');
        btnClump.classList.remove('active');
      } else {
        sandArea.className = 'sand-area clump';
        banner.className = 'banner';
        banner.textContent = 'Clumped Together = 5';
        btnClump.classList.add('active');
        btnSpread.classList.remove('active');
      }

      if (userInitiated && isPlaying) {
        restartTimer();
      }
    }

    function toggleAutoPlay() {
      isPlaying = !isPlaying;
      btnPlay.textContent = isPlaying ? '⏸' : '▶';
      if (isPlaying) {
        cycle();
        restartTimer();
      } else if (loopTimer) {
        clearInterval(loopTimer);
      }
    }

    function cycle() {
      setMode(currentMode === 'clump' ? 'spread' : 'clump');
    }

    function restartTimer() {
      if (loopTimer) clearInterval(loopTimer);
      loopTimer = setInterval(cycle, 4000);
    }

    // Start auto loop
    restartTimer();
  </script>
</body>
</html>

OGS.0.SEP.5

Aligned learning resources

Related diagrams