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

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

    .header-bar {
      width: 100%;
      max-width: 480px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
    }

    .chant-display {
      font-size: 18px;
      font-weight: 700;
      color: #0f172a;
      display: flex;
      align-items: baseline;
      gap: 6px;
    }

    .chant-word {
      color: #2563eb;
      text-transform: capitalize;
      font-size: 20px;
    }

    .controls {
      display: flex;
      gap: 6px;
    }

    .btn-ctrl {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 5px 10px;
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .btn-ctrl:active {
      background: #f1f5f9;
    }

    .train-container {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex-grow: 1;
      justify-content: center;
    }

    .train-row {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 6px;
      position: relative;
    }

    .car {
      position: relative;
      background: #ffffff;
      border: 2px solid transparent;
      border-radius: 8px;
      padding: 6px 2px 4px 2px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
      min-height: 64px;
    }

    /* Group Color Sets */
    .group-green {
      background: #f0fdf4;
      border-color: #86efac;
    }

    .group-blue {
      background: #f0f9ff;
      border-color: #93c5fd;
    }

    .group-purple {
      background: #faf5ff;
      border-color: #c084fc;
    }

    .car.active {
      transform: translateY(-3px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
      z-index: 2;
    }

    .group-green.active {
      background: #86efac;
      border-color: #22c55e;
    }

    .group-blue.active {
      background: #93c5fd;
      border-color: #3b82f6;
    }

    .group-purple.active {
      background: #c084fc;
      border-color: #a855f7;
    }

    .car-num {
      font-size: 19px;
      font-weight: 800;
      line-height: 1;
      color: #0f172a;
    }

    .car-word {
      font-size: 11px;
      font-weight: 600;
      color: #475569;
      margin-top: 3px;
      line-height: 1.1;
      text-align: center;
    }

    .car.active .car-word {
      color: #0f172a;
      font-weight: 700;
    }

    .star-marker {
      position: absolute;
      top: -9px;
      font-size: 14px;
      color: #eab308;
      filter: drop-shadow(0 0 4px rgba(234, 179, 8, 0.8));
      opacity: 0;
      transition: opacity 0.2s ease, transform 0.2s ease;
      pointer-events: none;
    }

    .car.active .star-marker {
      opacity: 1;
      transform: scale(1.1);
    }

    .wheels {
      display: flex;
      justify-content: space-around;
      width: 80%;
      margin-top: 3px;
    }

    .wheel {
      width: 7px;
      height: 7px;
      background: #475569;
      border-radius: 50%;
      border: 1px solid #1e2945;
    }

    .beat-container {
      width: 100%;
      max-width: 480px;
      margin-top: 10px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .beat-bar {
      display: grid;
      grid-template-columns: repeat(15, 1fr);
      gap: 3px;
      height: 8px;
      background: #e2e8f0;
      border-radius: 4px;
      padding: 2px;
    }

    .beat-pip {
      border-radius: 2px;
      background: transparent;
      transition: background 0.15s ease;
    }

    .beat-pip.past {
      background: #94a3b8;
    }

    .beat-pip.current {
      background: #2563eb;
      box-shadow: 0 0 6px #2563eb;
    }

    .group-labels {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      text-align: center;
      font-size: 11px;
      font-weight: 700;
      color: #64748b;
    }
  </style>
</head>
<body>

  <div class="header-bar">
    <div class="chant-display">
      <span>Beat <span id="numDisplay">1</span>:</span>
      <span class="chant-word" id="wordDisplay">one</span>
    </div>
    <div class="controls">
      <button class="btn-ctrl" id="soundBtn" aria-label="Toggle Sound">🔊 Sound</button>
      <button class="btn-ctrl" id="playBtn" aria-label="Play or Pause">⏸ Pause</button>
    </div>
  </div>

  <div class="train-container" id="train">
    
    <div class="train-row">
      <div class="car group-green active" data-idx="0">
        <span class="star-marker">★</span>
        <span class="car-num">1</span>
        <span class="car-word">one</span>
        <div class="wheels"><div class="wheel"></div><div class="wheel"></div></div>
      </div>
      <div class="car group-green" data-idx="1">
        <span class="star-marker">★</span>
        <span class="car-num">2</span>
        <span class="car-word">two</span>
        <div class="wheels"><div class="wheel"></div><div class="wheel"></div></div>
      </div>
      <div class="car group-green" data-idx="2">
        <span class="star-marker">★</span>
        <span class="car-num">3</span>
        <span class="car-word">three</span>
        <div class="wheels"><div class="wheel"></div><div class="wheel"></div></div>
      </div>
      <div class="car group-green" data-idx="3">
        <span class="star-marker">★</span>
        <span class="car-num">4</span>
        <span class="car-word">four</span>
        <div class="wheels"><div class="wheel"></div><div class="wheel"></div></div>
      </div>
      <div class="car group-green" data-idx="4">
        <span class="star-marker">★</span>
        <span class="car-num">5</span>
        <span class="car-word">five</span>
        <div class="wheels"><div class="wheel"></div><div class="wheel"></div></div>
      </div>
    </div>

    
    <div class="train-row">
      <div class="car group-blue" data-idx="5">
        <span class="star-marker">★</span>
        <span class="car-num">6</span>
        <span class="car-word">six</span>
        <div class="wheels"><div class="wheel"></div><div class="wheel"></div></div>
      </div>
      <div class="car group-blue" data-idx="6">
        <span class="star-marker">★</span>
        <span class="car-num">7</span>
        <span class="car-word">seven</span>
        <div class="wheels"><div class="wheel"></div><div class="wheel"></div></div>
      </div>
      <div class="car group-blue" data-idx="7">
        <span class="star-marker">★</span>
        <span class="car-num">8</span>
        <span class="car-word">eight</span>
        <div class="wheels"><div class="wheel"></div><div class="wheel"></div></div>
      </div>
      <div class="car group-blue" data-idx="8">
        <span class="star-marker">★</span>
        <span class="car-num">9</span>
        <span class="car-word">nine</span>
        <div class="wheels"><div class="wheel"></div><div class="wheel"></div></div>
      </div>
      <div class="car group-blue" data-idx="9">
        <span class="star-marker">★</span>
        <span class="car-num">10</span>
        <span class="car-word">ten</span>
        <div class="wheels"><div class="wheel"></div><div class="wheel"></div></div>
      </div>
    </div>

    
    <div class="train-row">
      <div class="car group-purple" data-idx="10">
        <span class="star-marker">★</span>
        <span class="car-num">11</span>
        <span class="car-word">eleven</span>
        <div class="wheels"><div class="wheel"></div><div class="wheel"></div></div>
      </div>
      <div class="car group-purple" data-idx="11">
        <span class="star-marker">★</span>
        <span class="car-num">12</span>
        <span class="car-word">twelve</span>
        <div class="wheels"><div class="wheel"></div><div class="wheel"></div></div>
      </div>
      <div class="car group-purple" data-idx="12">
        <span class="star-marker">★</span>
        <span class="car-num">13</span>
        <span class="car-word">thirteen</span>
        <div class="wheels"><div class="wheel"></div><div class="wheel"></div></div>
      </div>
      <div class="car group-purple" data-idx="13">
        <span class="star-marker">★</span>
        <span class="car-num">14</span>
        <span class="car-word">fourteen</span>
        <div class="wheels"><div class="wheel"></div><div class="wheel"></div></div>
      </div>
      <div class="car group-purple" data-idx="14">
        <span class="star-marker">★</span>
        <span class="car-num">15</span>
        <span class="car-word">fifteen</span>
        <div class="wheels"><div class="wheel"></div><div class="wheel"></div></div>
      </div>
    </div>
  </div>

  <div class="beat-container">
    <div class="beat-bar" id="beatBar">
      <div class="beat-pip current"></div>
      <div class="beat-pip"></div>
      <div class="beat-pip"></div>
      <div class="beat-pip"></div>
      <div class="beat-pip"></div>
      <div class="beat-pip"></div>
      <div class="beat-pip"></div>
      <div class="beat-pip"></div>
      <div class="beat-pip"></div>
      <div class="beat-pip"></div>
      <div class="beat-pip"></div>
      <div class="beat-pip"></div>
      <div class="beat-pip"></div>
      <div class="beat-pip"></div>
      <div class="beat-pip"></div>
    </div>
    <div class="group-labels">
      <span style="color:#16a34a">Set 1: 1–5</span>
      <span style="color:#2563eb">Set 2: 6–10</span>
      <span style="color:#9333ea">Set 3: 11–15</span>
    </div>
  </div>

  <script>
    const words = [
      'one', 'two', 'three', 'four', 'five',
      'six', 'seven', 'eight', 'nine', 'ten',
      'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen'
    ];

    const notes = [
      261.63, 293.66, 329.63, 349.23, 392.00,
      440.00, 493.88, 523.25, 587.33, 659.25,
      698.46, 783.99, 880.00, 987.77, 1046.50
    ];

    let currentIndex = 0;
    let isPlaying = true;
    let soundEnabled = false;
    let timer = null;
    let audioCtx = null;

    const cars = Array.from(document.querySelectorAll('.car'));
    const pips = Array.from(document.querySelectorAll('.beat-pip'));
    const numDisplay = document.getElementById('numDisplay');
    const wordDisplay = document.getElementById('wordDisplay');
    const playBtn = document.getElementById('playBtn');
    const soundBtn = document.getElementById('soundBtn');

    function playTone(freq) {
      if (!soundEnabled) return;
      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 = 'triangle';
        osc.frequency.setValueAtTime(freq, audioCtx.currentTime);
        gain.gain.setValueAtTime(0.18, 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.36);
      } catch (e) {}
    }

    function updateView(index) {
      currentIndex = index;
      cars.forEach((car, i) => {
        car.classList.toggle('active', i === currentIndex);
      });
      pips.forEach((pip, i) => {
        pip.className = 'beat-pip';
        if (i < currentIndex) pip.classList.add('past');
        if (i === currentIndex) pip.classList.add('current');
      });
      numDisplay.textContent = currentIndex + 1;
      wordDisplay.textContent = words[currentIndex];
      playTone(notes[currentIndex]);
    }

    function tick() {
      const nextIndex = (currentIndex + 1) % 15;
      updateView(nextIndex);
    }

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

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

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

    soundBtn.addEventListener('click', () => {
      soundEnabled = !soundEnabled;
      soundBtn.textContent = soundEnabled ? '🔊 Sound: ON' : '🔈 Sound: OFF';
      soundBtn.style.color = soundEnabled ? '#2563eb' : '#334155';
      if (soundEnabled && !audioCtx) {
        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      }
    });

    cars.forEach((car) => {
      car.addEventListener('click', () => {
        const idx = parseInt(car.getAttribute('data-idx'), 10);
        updateView(idx);
        if (isPlaying) {
          clearInterval(timer);
          timer = setInterval(tick, 800);
        }
      });
    });

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

Chanting the Number Sequence from 1 to 15

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="1:1">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: #f0fdf4;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px;
      user-select: none;
    }

    .stream-area {
      position: relative;
      width: 100%;
      max-width: 420px;
      height: 250px;
      background: linear-gradient(180deg, #dbeafe 0%, #bfdbfe 50%, #93c5fd 100%);
      border-radius: 20px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      padding: 16px 12px;
      box-shadow: inset 0 2px 6px rgba(0,0,0,0.06);
    }

    /* Water wave accents */
    .wave {
      position: absolute;
      width: 60px;
      height: 6px;
      background: rgba(255, 255, 255, 0.45);
      border-radius: 999px;
      pointer-events: none;
    }

    .stone-row {
      display: flex;
      justify-content: space-around;
      position: relative;
      z-index: 2;
    }

    .stone {
      position: relative;
      width: 46px;
      height: 46px;
      border-radius: 50%;
      background: #e2e8f0;
      border: 3px solid #cbd5e1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-weight: 800;
      color: #475569;
      cursor: pointer;
      transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }

    .stone.active {
      background: #4ade80;
      border-color: #22c55e;
      color: #064e3b;
      transform: scale(1.12);
      box-shadow: 0 0 12px rgba(74, 222, 128, 0.8), 0 4px 8px rgba(0,0,0,0.15);
    }

    .note-badge {
      position: absolute;
      top: -14px;
      right: -8px;
      font-size: 16px;
      opacity: 0;
      transform: translateY(4px);
      transition: opacity 0.25s ease, transform 0.25s ease;
      pointer-events: none;
    }

    .stone.active .note-badge {
      opacity: 1;
      transform: translateY(0);
    }

    /* Animated Frog Indicator */
    #frog {
      position: absolute;
      width: 42px;
      height: 42px;
      font-size: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10;
      pointer-events: none;
      transition: left 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), top 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
      transform: translate(-50%, -50%);
    }

    /* Bottom Rhythm & Controls */
    .controls-panel {
      width: 100%;
      max-width: 420px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 12px;
    }

    .chant-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      background: #ffffff;
      padding: 10px 16px;
      border-radius: 14px;
      border: 1px solid #e2e8f0;
      font-weight: 700;
      font-size: 17px;
      color: #1e2945;
    }

    .clap-icon {
      font-size: 26px;
      display: inline-block;
      transition: transform 0.15s ease;
    }

    .clap-icon.clapping {
      transform: scale(1.35) rotate(-10deg);
    }

    .btn-row {
      display: flex;
      justify-content: center;
      gap: 10px;
    }

    .btn {
      flex: 1;
      max-width: 110px;
      padding: 9px 12px;
      border-radius: 10px;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      font-size: 15px;
      font-weight: 700;
      color: #334155;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }

    .btn:active {
      background: #f1f5f9;
    }

    .btn-primary {
      background: #22c55e;
      border-color: #16a34a;
      color: #ffffff;
    }

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

  <div class="stream-area" id="stream">
    <div class="wave" style="top: 18%; left: 8%;"></div>
    <div class="wave" style="top: 48%; right: 12%;"></div>
    <div class="wave" style="bottom: 18%; left: 30%;"></div>

    
    <div class="stone-row" id="row1">
      <div class="stone" data-step="0">1<span class="note-badge">🎵</span></div>
      <div class="stone" data-step="1">2<span class="note-badge">🎵</span></div>
      <div class="stone" data-step="2">3<span class="note-badge">🎵</span></div>
      <div class="stone" data-step="3">4<span class="note-badge">🎵</span></div>
      <div class="stone" data-step="4">5<span class="note-badge">🎵</span></div>
    </div>

    
    <div class="stone-row" id="row2">
      <div class="stone" data-step="5">6<span class="note-badge">🎵</span></div>
      <div class="stone" data-step="6">7<span class="note-badge">🎵</span></div>
      <div class="stone" data-step="7">8<span class="note-badge">🎵</span></div>
      <div class="stone" data-step="8">9<span class="note-badge">🎵</span></div>
      <div class="stone" data-step="9">10<span class="note-badge">🎵</span></div>
    </div>

    <div id="frog">🐸</div>
  </div>

  <div class="controls-panel">
    <div class="chant-bar">
      <span>Count: <strong id="countDisplay" style="color:#16a34a; font-size:20px;">1</strong></span>
      <span class="clap-icon" id="clap">👏</span>
      <span style="font-size: 14px; color: #64748b;">(Chant along!)</span>
    </div>

    <div class="btn-row">
      <button class="btn" id="prevBtn">◀ Back</button>
      <button class="btn btn-primary" id="playBtn">⏸ Pause</button>
      <button class="btn" id="nextBtn">Next ▶</button>
    </div>
  </div>

  <script>
    const stones = Array.from(document.querySelectorAll('.stone'));
    const frog = document.getElementById('frog');
    const stream = document.getElementById('stream');
    const clapIcon = document.getElementById('clap');
    const countDisplay = document.getElementById('countDisplay');
    const playBtn = document.getElementById('playBtn');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');

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

    // Frequencies for pentatonic scale chanting notes (C4 up)
    const tones = [261.63, 293.66, 329.63, 392.00, 440.00, 523.25, 587.33, 659.25, 783.99, 880.00];

    function playChantTone(index) {
      if (!audioCtx) return;
      try {
        if (audioCtx.state === 'suspended') audioCtx.resume();
        const osc = audioCtx.createOscillator();
        const gain = audioCtx.createGain();
        osc.type = 'triangle';
        osc.frequency.setValueAtTime(tones[index % tones.length], audioCtx.currentTime);
        gain.gain.setValueAtTime(0.2, audioCtx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.4);
        osc.connect(gain);
        gain.connect(audioCtx.destination);
        osc.start();
        osc.stop(audioCtx.currentTime + 0.4);
      } catch (e) {}
    }

    function updatePosition() {
      const activeStone = stones[currentStep];
      const streamRect = stream.getBoundingClientRect();
      const stoneRect = activeStone.getBoundingClientRect();

      const left = stoneRect.left - streamRect.left + (stoneRect.width / 2);
      const top = stoneRect.top - streamRect.top + (stoneRect.height / 2) - 16;

      frog.style.left = left + 'px';
      frog.style.top = top + 'px';

      stones.forEach((s, idx) => {
        if (idx === currentStep) {
          s.classList.add('active');
        } else {
          s.classList.remove('active');
        }
      });

      countDisplay.textContent = (currentStep + 1);

      // Pulse clap icon
      clapIcon.classList.remove('clapping');
      void clapIcon.offsetWidth; // trigger reflow
      clapIcon.classList.add('clapping');
      setTimeout(() => clapIcon.classList.remove('clapping'), 300);

      playChantTone(currentStep);
    }

    function setStep(index) {
      currentStep = (index + stones.length) % stones.length;
      updatePosition();
    }

    function nextStep() {
      setStep(currentStep + 1);
    }

    function prevStep() {
      setStep(currentStep - 1);
    }

    function startAutoPlay() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, 1500);
      isPlaying = true;
      playBtn.textContent = '⏸ Pause';
      playBtn.classList.add('btn-primary');
    }

    function pauseAutoPlay() {
      if (timer) clearInterval(timer);
      timer = null;
      isPlaying = false;
      playBtn.textContent = '▶ Play';
      playBtn.classList.remove('btn-primary');
    }

    function initAudio() {
      if (!audioCtx) {
        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      }
    }

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

    nextBtn.addEventListener('click', () => {
      initAudio();
      pauseAutoPlay();
      nextStep();
    });

    prevBtn.addEventListener('click', () => {
      initAudio();
      pauseAutoPlay();
      prevStep();
    });

    stones.forEach((stone, idx) => {
      stone.addEventListener('click', () => {
        initAudio();
        pauseAutoPlay();
        setStep(idx);
      });
    });

    window.addEventListener('resize', updatePosition);

    // Initial render
    setTimeout(() => {
      updatePosition();
      startAutoPlay();
    }, 100);
  </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>Number Sequence 11 to 15</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }

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

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

    /* Stepping Stone Strip */
    .strip-wrapper {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 6px 2px;
    }

    .bubble-card {
      flex: 1;
      min-width: 0;
      aspect-ratio: 1 / 1.25;
      max-width: 110px;
      border-radius: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      cursor: pointer;
      transition: box-shadow 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06), inset 0 2px 0 rgba(255, 255, 255, 0.6);
      border: 3px solid rgba(255, 255, 255, 0.8);
    }

    /* Colors per card */
    .card-11 { background: #e0f2fe; }
    .card-12 { background: #ede9fe; }
    .card-13 { background: #fef3c7; }
    .card-14 { background: #ffedd5; }
    .card-15 { background: #dcfce7; }

    /* Active highlighted state */
    .bubble-card.active {
      box-shadow: 0 0 0 4px #22b7ff, 0 10px 20px rgba(34, 183, 255, 0.25), inset 0 2px 0 rgba(255, 255, 255, 0.9);
      transform: translateY(-4px);
    }

    /* Star Badge for 11 & 12 */
    .star-badge {
      position: absolute;
      top: -10px;
      background: #facc15;
      color: #713f12;
      font-size: 14px;
      font-weight: 800;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
      border: 2px solid #ffffff;
    }

    .num-val {
      font-size: clamp(28px, 6vw, 44px);
      font-weight: 800;
      color: #0f172a;
      line-height: 1;
      margin-bottom: 2px;
    }

    .word-label {
      font-size: clamp(11px, 2.4vw, 14px);
      font-weight: 700;
      color: #475569;
      text-align: center;
      line-height: 1.1;
    }

    .teen-highlight {
      color: #f97316;
      font-weight: 800;
    }

    /* Progress Flow / Stepper */
    .flow-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
    }

    .step-dot {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #e2e8f0;
      cursor: pointer;
      transition: background 0.3s ease, transform 0.3s ease;
      border: 2px solid #cbd5e1;
    }

    .step-dot.active {
      background: #22b7ff;
      border-color: #0284c7;
      transform: scale(1.2);
    }

    .controls-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }

    .ctrl-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      padding: 8px 18px;
      border-radius: 9999px;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: background 0.2s ease, border-color 0.2s ease;
    }

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

    .ctrl-btn.playing {
      background: #e0f2fe;
      border-color: #38bdf8;
      color: #0284c7;
    }
  </style>
</head>
<body>

  <div class="main-container">
    
    <div class="strip-wrapper">
      
      <div class="bubble-card card-11 active" id="card-0" onclick="goToStep(0)">
        <div class="star-badge" title="Special Name">★</div>
        <div class="num-val">11</div>
        <div class="word-label">eleven</div>
      </div>

      
      <div class="bubble-card card-12" id="card-1" onclick="goToStep(1)">
        <div class="star-badge" title="Special Name">★</div>
        <div class="num-val">12</div>
        <div class="word-label">twelve</div>
      </div>

      
      <div class="bubble-card card-13" id="card-2" onclick="goToStep(2)">
        <div class="num-val">13</div>
        <div class="word-label">thir<span class="teen-highlight">teen</span></div>
      </div>

      
      <div class="bubble-card card-14" id="card-3" onclick="goToStep(3)">
        <div class="num-val">14</div>
        <div class="word-label">four<span class="teen-highlight">teen</span></div>
      </div>

      
      <div class="bubble-card card-15" id="card-4" onclick="goToStep(4)">
        <div class="num-val">15</div>
        <div class="word-label">fif<span class="teen-highlight">teen</span></div>
      </div>
    </div>

    
    <div class="flow-bar">
      <div class="step-dot active" id="dot-0" onclick="goToStep(0)"></div>
      <div class="step-dot" id="dot-1" onclick="goToStep(1)"></div>
      <div class="step-dot" id="dot-2" onclick="goToStep(2)"></div>
      <div class="step-dot" id="dot-3" onclick="goToStep(3)"></div>
      <div class="step-dot" id="dot-4" onclick="goToStep(4)"></div>
    </div>

    
    <div class="controls-row">
      <button class="ctrl-btn" id="playBtn" onclick="togglePlay()">
        <span id="playIcon">▶</span>
        <span id="playText">Chant 11 → 15</span>
      </button>
    </div>
  </div>

  <script>
    let currentStep = 0;
    let isPlaying = false;
    let timer = null;
    let audioCtx = null;

    // Musical ascending pitches for chanting 11 to 15 (C4, D4, E4, F4, G4)
    const pitches = [261.63, 293.66, 329.63, 349.23, 392.00];

    function playTone(freq, duration = 0.35) {
      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 = 'triangle';
        osc.frequency.setValueAtTime(freq, audioCtx.currentTime);
        gain.gain.setValueAtTime(0.2, audioCtx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + duration);
        osc.connect(gain);
        gain.connect(audioCtx.destination);
        osc.start();
        osc.stop(audioCtx.currentTime + duration);
      } catch (e) {
        // Audio optional fallback
      }
    }

    function updateView() {
      for (let i = 0; i < 5; i++) {
        const card = document.getElementById(`card-${i}`);
        const dot = document.getElementById(`dot-${i}`);
        if (i === currentStep) {
          card.classList.add('active');
          dot.classList.add('active');
        } else {
          card.classList.remove('active');
          dot.classList.remove('active');
        }
      }
    }

    function goToStep(index, playSound = true) {
      currentStep = index;
      updateView();
      if (playSound) {
        playTone(pitches[currentStep]);
      }
    }

    function nextStep() {
      currentStep = (currentStep + 1) % 5;
      updateView();
      playTone(pitches[currentStep]);
    }

    function togglePlay() {
      isPlaying = !isPlaying;
      const btn = document.getElementById('playBtn');
      const icon = document.getElementById('playIcon');
      const text = document.getElementById('playText');

      if (isPlaying) {
        btn.classList.add('playing');
        icon.textContent = '⏸';
        text.textContent = 'Pause';
        playTone(pitches[currentStep]);
        timer = setInterval(nextStep, 1300);
      } else {
        btn.classList.remove('playing');
        icon.textContent = '▶';
        text.textContent = 'Chant 11 → 15';
        clearInterval(timer);
        timer = null;
      }
    }
  </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 {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 10px 12px;
      height: 100vh;
      max-height: 560px;
      overflow: hidden;
      box-sizing: border-box;
    }

    /* Top Bar */
    .header {
      width: 100%;
      max-width: 580px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 2px 4px;
      margin-bottom: 8px;
      flex-shrink: 0;
    }

    .counter-badge {
      font-size: 15px;
      font-weight: 700;
      color: #2d6a4f;
      background: #e8f5e9;
      padding: 5px 12px;
      border-radius: 20px;
      border: 1px solid #b7e4c7;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .btn-reset {
      background: #f8f9fa;
      border: 1px solid #e6e6e6;
      color: #555e6d;
      font-size: 13px;
      font-weight: 600;
      padding: 5px 12px;
      border-radius: 20px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: background 0.15s ease, border-color 0.15s ease;
    }

    .btn-reset:hover {
      background: #f1f3f5;
      border-color: #d0d5dd;
    }

    .btn-reset:active {
      background: #e9ecef;
    }

    /* Arena Container */
    .arena {
      position: relative;
      width: 100%;
      max-width: 580px;
      flex: 1;
      min-height: 220px;
      display: flex;
      gap: 12px;
    }

    /* Trays */
    .tray {
      flex: 1;
      position: relative;
      background: #fafaf8;
      border: 2px dashed #d6dbdc;
      border-radius: 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 8px;
      overflow: hidden;
    }

    .tray.counted-tray {
      background: #f4f9f4;
      border-color: #95d5b2;
    }

    .tray-title {
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.5px;
      color: #6c757d;
      text-transform: uppercase;
      pointer-events: none;
      z-index: 2;
    }

    .counted-tray .tray-title {
      color: #2d6a4f;
    }

    /* Slot Placeholders */
    .slot {
      position: absolute;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      border: 2px dashed #b7e4c7;
      background: rgba(255, 255, 255, 0.4);
      transform: translate(-50%, -50%);
      pointer-events: none;
      z-index: 1;
    }

    /* Center Divider */
    .divider {
      position: absolute;
      left: 50%;
      top: 8%;
      bottom: 8%;
      width: 2px;
      border-left: 2px dashed #b7c0cd;
      transform: translateX(-50%);
      pointer-events: none;
      z-index: 3;
    }

    .divider-arrow {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background: #ffffff;
      border: 1px solid #d6dbdc;
      color: #52b788;
      font-size: 13px;
      font-weight: bold;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    }

    /* Interactive Acorns */
    .acorn {
      position: absolute;
      width: 48px;
      height: 48px;
      transform: translate(-50%, -50%);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30px;
      border-radius: 50%;
      background: #ffffff;
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
      border: 1.5px solid #e0e0e0;
      transition: left 0.45s cubic-bezier(0.34, 1.25, 0.64, 1),
                  top 0.45s cubic-bezier(0.34, 1.25, 0.64, 1),
                  box-shadow 0.2s ease,
                  border-color 0.2s ease;
      z-index: 10;
    }

    .acorn.pulse {
      animation: gentle-pulse 1.8s infinite ease-in-out;
    }

    @keyframes gentle-pulse {
      0%, 100% { box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1); }
      50% { box-shadow: 0 0 0 5px rgba(82, 183, 136, 0.3); }
    }

    .acorn.counted {
      border-color: #52b788;
      box-shadow: 0 2px 6px rgba(45, 106, 79, 0.15);
      cursor: default;
    }

    /* Count Number Badge on Acorn */
    .num-badge {
      position: absolute;
      bottom: -3px;
      right: -3px;
      background: #2d6a4f;
      color: #ffffff;
      font-size: 12px;
      font-weight: 800;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 2px solid #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.25s ease, transform 0.25s ease;
      transform: scale(0.5);
    }

    .acorn.counted .num-badge {
      opacity: 1;
      transform: scale(1);
    }

    /* Mobile Responsive Stacking */
    @media (max-width: 520px) {
      body {
        padding: 6px 8px;
      }
      .header {
        margin-bottom: 6px;
      }
      .counter-badge {
        font-size: 13px;
        padding: 4px 10px;
      }
      .btn-reset {
        font-size: 12px;
        padding: 4px 10px;
      }
      .arena {
        flex-direction: column;
        gap: 8px;
      }
      .tray-title {
        font-size: 12px;
        padding-top: 2px;
      }
      .divider {
        left: 12%;
        right: 12%;
        top: 50%;
        bottom: auto;
        width: auto;
        height: 2px;
        border-left: none;
        border-top: 2px dashed #b7c0cd;
        transform: translateY(-50%);
      }
      .divider-arrow {
        transform: translate(-50%, -50%) rotate(90deg);
      }
      .acorn {
        width: 42px;
        height: 42px;
        font-size: 24px;
      }
      .slot {
        width: 40px;
        height: 40px;
      }
      .num-badge {
        width: 18px;
        height: 18px;
        font-size: 11px;
      }
    }
  </style>
</head>
<body>

  
  <div class="header">
    <div class="counter-badge">
      <span>Counted:</span>
      <span id="counterText">0 of 5</span>
    </div>
    <button class="btn-reset" id="resetBtn">↺ Reset</button>
  </div>

  
  <div class="arena" id="arena">
    <div class="tray uncounted-tray">
      <div class="tray-title">Uncounted</div>
    </div>

    <div class="divider">
      <div class="divider-arrow">→</div>
    </div>

    <div class="tray counted-tray">
      <div class="tray-title">Counted</div>
    </div>

    
    <div class="slot" id="slot0"></div>
    <div class="slot" id="slot1"></div>
    <div class="slot" id="slot2"></div>
    <div class="slot" id="slot3"></div>
    <div class="slot" id="slot4"></div>

    
    <div class="acorn pulse" id="acorn0">🌰<span class="num-badge">1</span></div>
    <div class="acorn" id="acorn1">🌰<span class="num-badge">2</span></div>
    <div class="acorn" id="acorn2">🌰<span class="num-badge">3</span></div>
    <div class="acorn" id="acorn3">🌰<span class="num-badge">4</span></div>
    <div class="acorn" id="acorn4">🌰<span class="num-badge">5</span></div>
  </div>

  <script>
    // Pentatonic frequencies for audio feedback
    const tones = [329.63, 392.00, 440.00, 523.25, 659.25];
    let audioCtx = null;

    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.18, 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) {}
    }

    // Side-by-side coordinates (desktop/tablet)
    const desktopStart = [
      { left: 25, top: 30 },
      { left: 15, top: 54 },
      { left: 35, top: 54 },
      { left: 19, top: 78 },
      { left: 31, top: 78 }
    ];
    const desktopTarget = [
      { left: 75, top: 30 },
      { left: 65, top: 54 },
      { left: 85, top: 54 },
      { left: 69, top: 78 },
      { left: 81, top: 78 }
    ];

    // Stacked vertical coordinates (narrow mobile)
    const mobileStart = [
      { left: 22, top: 22 },
      { left: 50, top: 22 },
      { left: 78, top: 22 },
      { left: 36, top: 38 },
      { left: 64, top: 38 }
    ];
    const mobileTarget = [
      { left: 22, top: 70 },
      { left: 50, top: 70 },
      { left: 78, top: 70 },
      { left: 36, top: 86 },
      { left: 64, top: 86 }
    ];

    const mediaQuery = window.matchMedia('(max-width: 520px)');
    let count = 0;

    const acorns = [
      document.getElementById('acorn0'),
      document.getElementById('acorn1'),
      document.getElementById('acorn2'),
      document.getElementById('acorn3'),
      document.getElementById('acorn4')
    ];

    const slots = [
      document.getElementById('slot0'),
      document.getElementById('slot1'),
      document.getElementById('slot2'),
      document.getElementById('slot3'),
      document.getElementById('slot4')
    ];

    const counterText = document.getElementById('counterText');
    const resetBtn = document.getElementById('resetBtn');

    function getPositions() {
      const isMobile = mediaQuery.matches;
      return {
        start: isMobile ? mobileStart : desktopStart,
        target: isMobile ? mobileTarget : desktopTarget
      };
    }

    function updateAllPositions() {
      const { start, target } = getPositions();

      slots.forEach((slot, i) => {
        slot.style.left = target[i].left + '%';
        slot.style.top = target[i].top + '%';
      });

      acorns.forEach((acorn, i) => {
        const isCounted = acorn.classList.contains('counted');
        const targetIdx = acorn.dataset.slotIndex !== undefined ? parseInt(acorn.dataset.slotIndex, 10) : i;
        const pos = isCounted ? target[targetIdx] : start[i];
        acorn.style.left = pos.left + '%';
        acorn.style.top = pos.top + '%';
      });
    }

    function updatePulse() {
      acorns.forEach((a, i) => {
        a.classList.remove('pulse');
        if (!a.classList.contains('counted') && i === count) {
          a.classList.add('pulse');
        }
      });
    }

    function countAcorn(index) {
      const acorn = acorns[index];
      if (acorn.classList.contains('counted')) return;

      const currentStep = count;
      count++;

      playTone(tones[currentStep]);

      acorn.dataset.slotIndex = currentStep;
      const { target } = getPositions();
      acorn.style.left = target[currentStep].left + '%';
      acorn.style.top = target[currentStep].top + '%';
      acorn.classList.add('counted');

      const badge = acorn.querySelector('.num-badge');
      badge.textContent = count;

      counterText.textContent = count + ' of 5';
      if (count === 5) {
        counterText.textContent = '5 of 5 ✓';
      }

      updatePulse();
    }

    acorns.forEach((acorn, i) => {
      acorn.addEventListener('click', () => countAcorn(i));
      acorn.addEventListener('touchstart', (e) => {
        e.preventDefault();
        countAcorn(i);
      }, { passive: false });
    });

    function reset() {
      count = 0;
      counterText.textContent = '0 of 5';
      const { start } = getPositions();
      acorns.forEach((acorn, i) => {
        delete acorn.dataset.slotIndex;
        acorn.classList.remove('counted');
        acorn.style.left = start[i].left + '%';
        acorn.style.top = start[i].top + '%';
        const badge = acorn.querySelector('.num-badge');
        badge.textContent = i + 1;
      });
      updatePulse();
    }

    resetBtn.addEventListener('click', reset);
    resetBtn.addEventListener('touchstart', (e) => {
      e.preventDefault();
      reset();
    }, { passive: false });

    mediaQuery.addEventListener('change', updateAllPositions);
    window.addEventListener('resize', updateAllPositions);

    // Initial positioning
    updateAllPositions();
  </script>
</body>
</html>

Touch-Counting Specimens from 1 to 5

<!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>Touch Counting Comparison</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #1e2945;
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }
    .comparison-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 580px;
    }
    @media (max-width: 420px) {
      .comparison-grid {
        grid-template-columns: 1fr;
        gap: 10px;
      }
    }
    .panel-card {
      background: #ffffff;
      border: 2px solid #e6e6e6;
      border-radius: 16px;
      padding: 12px 10px 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      overflow: hidden;
    }
    .card-oops {
      border-color: #fecaca;
      background: #fffafa;
    }
    .card-correct {
      border-color: #bbf7d0;
      background: #f8fdf9;
    }
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 15px;
      font-weight: 700;
      padding: 4px 12px;
      border-radius: 999px;
      margin-bottom: 8px;
    }
    .badge-oops {
      background: #fee2e2;
      color: #dc2626;
    }
    .badge-correct {
      background: #dcfce7;
      color: #16a34a;
    }
    .stage {
      position: relative;
      width: 100%;
      height: 125px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding-top: 15px;
    }
    .item-slot {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      width: 80px;
    }
    .acorn-emoji {
      font-size: 44px;
      line-height: 1;
      user-select: none;
      filter: drop-shadow(0 4px 6px rgba(0,0,0,0.08));
      transition: transform 0.2s ease;
    }
    .bubble {
      position: absolute;
      top: -24px;
      background: #1e2945;
      color: #ffffff;
      font-size: 14px;
      font-weight: 800;
      padding: 2px 9px;
      border-radius: 12px;
      opacity: 0;
      transform: scale(0.6);
      transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
      box-shadow: 0 2px 5px rgba(0,0,0,0.15);
      z-index: 10;
    }
    .bubble::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 50%;
      transform: translateX(-50%);
      border-width: 4px 4px 0;
      border-style: solid;
      border-color: #1e2945 transparent;
      display: block;
      width: 0;
    }
    .bubble.show {
      opacity: 1;
      transform: scale(1);
    }
    .hand-cursor {
      position: absolute;
      font-size: 34px;
      line-height: 1;
      pointer-events: none;
      transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.2s ease;
      z-index: 20;
      filter: drop-shadow(0 3px 4px rgba(0,0,0,0.15));
    }
    .tap-ring {
      position: absolute;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      border: 3px solid;
      pointer-events: none;
      opacity: 0;
      transform: scale(0.3);
      transition: all 0.35s ease-out;
    }
    .tap-ring.oops {
      border-color: #ef4444;
    }
    .tap-ring.good {
      border-color: #22c55e;
    }
    .tap-ring.active {
      opacity: 0.8;
      transform: scale(1.3);
    }
    .card-footer {
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      margin-top: 4px;
      text-align: center;
    }
    .oops-text {
      color: #ef4444;
    }
    .good-text {
      color: #16a34a;
    }
    .control-row {
      margin-top: 10px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .btn-replay {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      padding: 6px 14px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: background 0.2s;
    }
    .btn-replay:active {
      background: #e2e8f0;
    }
  </style>
</head>
<body>

  <div class="comparison-grid">
    
    <div class="panel-card card-oops">
      <div class="badge badge-oops">
        <span>✕</span> Oops!
      </div>
      
      <div class="stage" id="stageOops">
        <div class="item-slot" style="margin: 0 auto;">
          <div class="bubble" id="bubbleOops">"1, 2"</div>
          <div class="tap-ring oops" id="ringOops"></div>
          <div class="acorn-emoji" id="acornOops">🌰</div>
        </div>
        <div class="hand-cursor" id="handOops">👆</div>
      </div>

      <div class="card-footer oops-text">2 taps on 1 acorn</div>
    </div>

    
    <div class="panel-card card-correct">
      <div class="badge badge-correct">
        <span>✓</span> Just Right!
      </div>

      <div class="stage" id="stageGood">
        <div class="item-slot" id="slotGood1">
          <div class="bubble" id="bubbleGood1">"1"</div>
          <div class="tap-ring good" id="ringGood1"></div>
          <div class="acorn-emoji" id="acornGood1">🌰</div>
        </div>

        <div class="item-slot" id="slotGood2">
          <div class="bubble" id="bubbleGood2">"2"</div>
          <div class="tap-ring good" id="ringGood2"></div>
          <div class="acorn-emoji" id="acornGood2">🌰</div>
        </div>
        
        <div class="hand-cursor" id="handGood">👆</div>
      </div>

      <div class="card-footer good-text">1 tap for each acorn</div>
    </div>
  </div>

  <div class="control-row">
    <button class="btn-replay" id="replayBtn" onclick="runDemo()">
      <span>🔄</span> Watch Again
    </button>
  </div>

  <script>
    let stepTimer = null;

    function resetVisuals() {
      if (stepTimer) clearTimeout(stepTimer);

      // Oops resets
      const handOops = document.getElementById('handOops');
      const bubbleOops = document.getElementById('bubbleOops');
      const ringOops = document.getElementById('ringOops');
      const acornOops = document.getElementById('acornOops');

      bubbleOops.className = 'bubble';
      bubbleOops.textContent = '"1"';
      ringOops.className = 'tap-ring oops';
      acornOops.style.transform = 'scale(1)';
      handOops.style.transform = 'translate(0px, 35px)';
      handOops.style.opacity = '1';

      // Good resets
      const handGood = document.getElementById('handGood');
      const b1 = document.getElementById('bubbleGood1');
      const b2 = document.getElementById('bubbleGood2');
      const r1 = document.getElementById('ringGood1');
      const r2 = document.getElementById('ringGood2');
      const a1 = document.getElementById('acornGood1');
      const a2 = document.getElementById('acornGood2');

      b1.className = 'bubble';
      b2.className = 'bubble';
      r1.className = 'tap-ring good';
      r2.className = 'tap-ring good';
      a1.style.transform = 'scale(1)';
      a2.style.transform = 'scale(1)';
      handGood.style.transform = 'translate(-70px, 35px)';
      handGood.style.opacity = '1';
    }

    function runDemo() {
      resetVisuals();

      const handOops = document.getElementById('handOops');
      const bubbleOops = document.getElementById('bubbleOops');
      const ringOops = document.getElementById('ringOops');
      const acornOops = document.getElementById('acornOops');

      const handGood = document.getElementById('handGood');
      const b1 = document.getElementById('bubbleGood1');
      const b2 = document.getElementById('bubbleGood2');
      const r1 = document.getElementById('ringGood1');
      const r2 = document.getElementById('ringGood2');
      const a1 = document.getElementById('acornGood1');
      const a2 = document.getElementById('acornGood2');

      // Step 1: Tap first acorn (Both sides say "1")
      setTimeout(() => {
        // Oops side tap 1
        handOops.style.transform = 'translate(0px, 8px) scale(0.9)';
        bubbleOops.textContent = '"1"';
        bubbleOops.classList.add('show');
        ringOops.classList.add('active');
        acornOops.style.transform = 'scale(1.12)';

        // Good side tap 1
        handGood.style.transform = 'translate(-65px, 8px) scale(0.9)';
        b1.classList.add('show');
        r1.classList.add('active');
        a1.style.transform = 'scale(1.12)';
      }, 500);

      // Relax after tap 1
      setTimeout(() => {
        handOops.style.transform = 'translate(0px, 22px)';
        ringOops.classList.remove('active');
        acornOops.style.transform = 'scale(1)';

        handGood.style.transform = 'translate(-20px, 25px)';
        r1.classList.remove('active');
        a1.style.transform = 'scale(1)';
      }, 1500);

      // Step 2: Second Tap
      setTimeout(() => {
        // Oops taps the SAME acorn again saying "2!"
        handOops.style.transform = 'translate(0px, 8px) scale(0.9)';
        bubbleOops.textContent = '"2"';
        ringOops.classList.add('active');
        acornOops.style.transform = 'scale(1.12)';

        // Good side moves to tap acorn 2 saying "2"
        handGood.style.transform = 'translate(65px, 8px) scale(0.9)';
        b2.classList.add('show');
        r2.classList.add('active');
        a2.style.transform = 'scale(1.12)';
      }, 2500);

      // Step 3: Settle & Hold
      setTimeout(() => {
        handOops.style.transform = 'translate(0px, 25px)';
        ringOops.classList.remove('active');
        acornOops.style.transform = 'scale(1)';

        handGood.style.transform = 'translate(65px, 25px)';
        r2.classList.remove('active');
        a2.style.transform = 'scale(1)';
      }, 3500);

      // Loop after comfortable pause
      stepTimer = setTimeout(runDemo, 5500);
    }

    window.addEventListener('DOMContentLoaded', () => {
      runDemo();
    });
  </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>One-to-One Touch Counting</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }

    body {
      width: 100%;
      min-height: 100%;
      background: transparent;
      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: 8px;
      gap: 10px;
    }

    /* Container */
    .stage-wrapper {
      width: 100%;
      max-width: 500px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }

    /* Top Badge */
    .top-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #e8f5e9;
      color: #2e7d32;
      border: 1.5px solid #a5d6a7;
      padding: 4px 12px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }

    /* Specimen Board / Tray */
    .tray {
      position: relative;
      width: 100%;
      height: 230px;
      background: #f7efe6;
      border: 2px solid #e5d7c7;
      border-radius: 20px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      align-items: center;
      overflow: hidden;
      box-shadow: inset 0 2px 6px rgba(92, 58, 33, 0.06);
    }

    /* Specimen Item Column */
    .specimen-col {
      position: relative;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      padding-bottom: 26px;
      cursor: pointer;
      z-index: 2;
    }

    /* Speech Bubble + Number Badge Container */
    .callout-group {
      position: absolute;
      top: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      opacity: 0;
      transform: translateY(8px) scale(0.6);
      transition: opacity 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
      pointer-events: none;
    }

    /* Persisted counted state */
    .callout-group.counted {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .word-bubble {
      background: #2e7d32;
      color: #ffffff;
      font-size: 14px;
      font-weight: 800;
      padding: 3px 10px;
      border-radius: 12px;
      box-shadow: 0 3px 8px rgba(46, 125, 50, 0.25);
      position: relative;
      letter-spacing: 0.3px;
    }

    .word-bubble::after {
      content: "";
      position: absolute;
      bottom: -4px;
      left: 50%;
      transform: translateX(-50%);
      border-width: 4px 4px 0;
      border-style: solid;
      border-color: #2e7d32 transparent;
      display: block;
      width: 0;
    }

    .number-badge {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: #ffffff;
      border: 2px solid #2e7d32;
      color: #2e7d32;
      font-size: 13px;
      font-weight: 900;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    }

    .callout-group.current .word-bubble {
      background: #1b5e20;
    }

    .callout-group.current .word-bubble::after {
      border-color: #1b5e20 transparent;
    }

    .callout-group.current .number-badge {
      background: #2e7d32;
      color: #ffffff;
    }

    /* Acorn Illustration Graphic */
    .acorn-wrap {
      width: 62px;
      height: 78px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
      position: relative;
      z-index: 3;
    }

    .specimen-col.active .acorn-wrap {
      transform: scale(0.92) translateY(4px);
    }

    .acorn-svg {
      width: 100%;
      height: 100%;
      filter: drop-shadow(0 4px 5px rgba(92, 58, 33, 0.18));
    }

    /* Base Touch Target Ring */
    .touch-target {
      position: absolute;
      bottom: 18px;
      width: 54px;
      height: 20px;
      border-radius: 50%;
      border: 2px dashed #d5c3b0;
      background: transparent;
      transition: all 0.3s ease;
      z-index: 1;
    }

    .specimen-col.active .touch-target {
      border-color: #4caf50;
      background: rgba(76, 175, 80, 0.25);
      transform: scale(1.18);
      box-shadow: 0 0 10px rgba(76, 175, 80, 0.45);
    }

    /* Animated Pointer Hand */
    .hand-pointer {
      position: absolute;
      bottom: 2px;
      left: 0;
      width: 33.333%;
      height: 48px;
      display: flex;
      justify-content: center;
      align-items: center;
      pointer-events: none;
      z-index: 10;
      transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .hand-icon {
      font-size: 32px;
      transform-origin: 40% 20%;
      transform: rotate(-30deg) translateY(0);
      transition: transform 0.2s ease;
      filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.2));
    }

    .hand-pointer.tapping .hand-icon {
      transform: rotate(-30deg) translateY(-8px) scale(1.08);
    }

    /* Bottom Interactive Controls */
    .controls-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      flex-wrap: nowrap;
      width: 100%;
    }

    .btn {
      background: #ffffff;
      border: 1.5px solid #d5dbe4;
      color: #1e2945;
      font-size: 13px;
      font-weight: 700;
      padding: 6px 12px;
      border-radius: 10px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .btn:hover {
      background: #f1f5f9;
      border-color: #cbd5e1;
    }

    .btn.active {
      background: #2e7d32;
      border-color: #2e7d32;
      color: #ffffff;
    }

    .step-btn {
      min-width: 38px;
      padding: 6px 8px;
      font-size: 14px;
    }

    .step-btn.counted {
      border-color: #a5d6a7;
      background: #f1f8e9;
      color: #2e7d32;
    }

    .step-btn.active {
      background: #2e7d32;
      border-color: #2e7d32;
      color: #ffffff;
    }

    .sound-btn {
      color: #475569;
      padding: 6px 10px;
    }

    .sound-btn.on {
      color: #2e7d32;
      border-color: #a5d6a7;
      background: #e8f5e9;
    }

    /* Mobile Responsive Adjustments (320px - 380px) */
    @media (max-width: 380px) {
      .controls-row {
        gap: 4px;
      }
      .btn {
        padding: 5px 8px;
        font-size: 12px;
        border-radius: 8px;
      }
      .step-btn {
        min-width: 32px;
        padding: 5px 4px;
      }
      .sound-btn {
        padding: 5px 6px;
      }
      .top-badge {
        font-size: 11px;
        padding: 4px 10px;
      }
      .word-bubble {
        font-size: 12px;
        padding: 2px 7px;
      }
      .number-badge {
        width: 20px;
        height: 20px;
        font-size: 11px;
      }
    }
  </style>
</head>
<body>

  <div class="stage-wrapper">
    
    <div class="top-badge">
      <span>●</span> ONE TOUCH = ONE NUMBER NAME
    </div>

    
    <div class="tray" id="tray">
      
      <div class="specimen-col" id="col-0" onclick="goToStep(0)">
        <div class="callout-group" id="callout-0">
          <div class="word-bubble">"One!"</div>
          <div class="number-badge">1</div>
        </div>
        <div class="acorn-wrap">
          <svg class="acorn-svg" viewBox="0 0 60 76">
            
            <path d="M30 14 Q28 4 33 2" stroke="#4a2e1b" stroke-width="3.5" fill="none" stroke-linecap="round" />
            
            <path d="M12 24 C12 16, 48 16, 48 24 C48 29, 12 29, 12 24 Z" fill="#5c3a21" />
            <ellipse cx="30" cy="22" rx="19" ry="8" fill="#6d4528" />
            
            <path d="M14 26 C13 46, 22 68, 30 72 C38 68, 47 46, 46 26 Z" fill="#8d5b4c" />
            
            <path d="M19 32 C18 44, 23 58, 26 62" stroke="rgba(255,255,255,0.3)" stroke-width="2.5" fill="none" stroke-linecap="round" />
          </svg>
        </div>
        <div class="touch-target"></div>
      </div>

      
      <div class="specimen-col" id="col-1" onclick="goToStep(1)">
        <div class="callout-group" id="callout-1">
          <div class="word-bubble">"Two!"</div>
          <div class="number-badge">2</div>
        </div>
        <div class="acorn-wrap">
          <svg class="acorn-svg" viewBox="0 0 60 76">
            
            <path d="M30 14 Q32 4 27 2" stroke="#4a2e1b" stroke-width="3.5" fill="none" stroke-linecap="round" />
            
            <path d="M12 24 C12 16, 48 16, 48 24 C48 29, 12 29, 12 24 Z" fill="#5c3a21" />
            <ellipse cx="30" cy="22" rx="19" ry="8" fill="#6d4528" />
            
            <path d="M14 26 C13 46, 22 68, 30 72 C38 68, 47 46, 46 26 Z" fill="#8d5b4c" />
            
            <path d="M19 32 C18 44, 23 58, 26 62" stroke="rgba(255,255,255,0.3)" stroke-width="2.5" fill="none" stroke-linecap="round" />
          </svg>
        </div>
        <div class="touch-target"></div>
      </div>

      
      <div class="specimen-col" id="col-2" onclick="goToStep(2)">
        <div class="callout-group" id="callout-2">
          <div class="word-bubble">"Three!"</div>
          <div class="number-badge">3</div>
        </div>
        <div class="acorn-wrap">
          <svg class="acorn-svg" viewBox="0 0 60 76">
            
            <path d="M30 14 Q29 5 34 3" stroke="#4a2e1b" stroke-width="3.5" fill="none" stroke-linecap="round" />
            
            <path d="M12 24 C12 16, 48 16, 48 24 C48 29, 12 29, 12 24 Z" fill="#5c3a21" />
            <ellipse cx="30" cy="22" rx="19" ry="8" fill="#6d4528" />
            
            <path d="M14 26 C13 46, 22 68, 30 72 C38 68, 47 46, 46 26 Z" fill="#8d5b4c" />
            
            <path d="M19 32 C18 44, 23 58, 26 62" stroke="rgba(255,255,255,0.3)" stroke-width="2.5" fill="none" stroke-linecap="round" />
          </svg>
        </div>
        <div class="touch-target"></div>
      </div>

      
      <div class="hand-pointer" id="hand">
        <div class="hand-icon">👉</div>
      </div>
    </div>

    
    <div class="controls-row">
      <button class="btn" id="playBtn" onclick="togglePlay()" aria-label="Play or Pause counting">
        <span id="playIcon">⏸</span> <span id="playLabel">Pause</span>
      </button>
      <button class="btn step-btn" id="step-0" onclick="goToStep(0)">1</button>
      <button class="btn step-btn" id="step-1" onclick="goToStep(1)">2</button>
      <button class="btn step-btn" id="step-2" onclick="goToStep(2)">3</button>
      <button class="btn sound-btn on" id="soundBtn" onclick="toggleSound()" aria-label="Toggle Sound">
        <span id="soundIcon">🔊 Sound</span>
      </button>
    </div>
  </div>

  <script>
    const TOTAL_STEPS = 3;
    const STEP_DURATION = 1500; // ms per step
    const FREQUENCIES = [523.25, 659.25, 783.99]; // C5, E5, G5

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

    // Web Audio Chime
    function playChime(index) {
      if (!soundEnabled) return;
      try {
        if (!audioCtx) {
          audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        }
        if (audioCtx.state === 'suspended') {
          audioCtx.resume();
        }
        const osc = audioCtx.createOscillator();
        const gain = audioCtx.createGain();
        const now = audioCtx.currentTime;

        osc.type = 'sine';
        osc.frequency.setValueAtTime(FREQUENCIES[index] || 523.25, now);

        gain.gain.setValueAtTime(0.18, now);
        gain.gain.exponentialRampToValueAtTime(0.001, now + 0.35);

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

        osc.start(now);
        osc.stop(now + 0.35);
      } catch (e) {
        // AudioContext disabled or restricted
      }
    }

    function updateView(step) {
      const hand = document.getElementById('hand');

      // Move Hand Horizontally
      hand.style.transform = `translateX(${step * 100}%)`;

      // Hand Tap Gesture
      hand.classList.remove('tapping');
      void hand.offsetWidth; // Force reflow
      hand.classList.add('tapping');

      // Update Specimen States: cumulative persistence for counted acorns
      for (let i = 0; i < TOTAL_STEPS; i++) {
        const col = document.getElementById(`col-${i}`);
        const callout = document.getElementById(`callout-${i}`);
        const btn = document.getElementById(`step-${i}`);

        if (i <= step) {
          // Counted items remain fully visible with clear contrast
          callout.classList.add('counted');
          btn.classList.add('counted');
        } else {
          // Uncounted items remain hidden
          callout.classList.remove('counted');
          btn.classList.remove('counted');
        }

        if (i === step) {
          col.classList.add('active');
          callout.classList.add('current');
          btn.classList.add('active');
        } else {
          col.classList.remove('active');
          callout.classList.remove('current');
          btn.classList.remove('active');
        }
      }

      playChime(step);
    }

    function advance() {
      currentStep = (currentStep + 1) % TOTAL_STEPS;
      updateView(currentStep);
    }

    function startLoop() {
      if (timer) clearInterval(timer);
      timer = setInterval(advance, STEP_DURATION);
      isPlaying = true;
      document.getElementById('playIcon').textContent = '⏸';
      document.getElementById('playLabel').textContent = 'Pause';
      document.getElementById('playBtn').classList.remove('active');
    }

    function pauseLoop() {
      if (timer) clearInterval(timer);
      timer = null;
      isPlaying = false;
      document.getElementById('playIcon').textContent = '▶';
      document.getElementById('playLabel').textContent = 'Play';
      document.getElementById('playBtn').classList.add('active');
    }

    function togglePlay() {
      if (isPlaying) {
        pauseLoop();
      } else {
        advance();
        startLoop();
      }
    }

    function goToStep(index) {
      currentStep = index;
      updateView(currentStep);
      if (isPlaying) {
        clearInterval(timer);
        timer = setInterval(advance, STEP_DURATION);
      }
    }

    function toggleSound() {
      soundEnabled = !soundEnabled;
      const soundBtn = document.getElementById('soundBtn');
      if (soundEnabled) {
        soundBtn.classList.add('on');
        soundBtn.innerHTML = '<span id="soundIcon">🔊 Sound</span>';
        playChime(currentStep);
      } else {
        soundBtn.classList.remove('on');
        soundBtn.innerHTML = '<span id="soundIcon">🔇 Muted</span>';
      }
    }

    // Initialize
    updateView(0);
    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">
  <title>Touch-Counting Specimens 1 to 5</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }

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

    .main-stage {
      position: relative;
      width: 100%;
      max-width: 580px;
      margin: auto 0;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    /* 5 Pinecone columns */
    .specimens-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      width: 100%;
      padding: 0 8px;
      position: relative;
      z-index: 2;
    }

    .specimen-slot {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 18%;
      cursor: pointer;
      position: relative;
    }

    /* Number badge above specimen */
    .count-badge {
      font-size: 28px;
      font-weight: 800;
      color: #2d6a4f;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .specimen-slot.counted .count-badge {
      opacity: 1;
      transform: translateY(0);
    }

    .specimen-slot.active .count-badge {
      color: #1b4332;
      text-shadow: 0 0 12px rgba(82, 183, 136, 0.6);
    }

    /* Pinecone card container */
    .pinecone-wrapper {
      width: 100%;
      aspect-ratio: 1/1;
      max-width: 76px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: rgba(230, 230, 230, 0.4);
      transition: background 0.3s ease, box-shadow 0.3s ease;
      position: relative;
    }

    .specimen-slot.counted .pinecone-wrapper {
      background: rgba(82, 183, 136, 0.2);
      box-shadow: 0 0 0 3px #52b788;
    }

    .specimen-slot.active .pinecone-wrapper {
      background: rgba(82, 183, 136, 0.35);
      box-shadow: 0 0 0 4px #2d6a4f, 0 4px 16px rgba(45, 106, 79, 0.3);
    }

    .pinecone-svg {
      width: 72%;
      height: 72%;
      transition: filter 0.3s ease;
    }

    .specimen-slot.counted .pinecone-svg {
      filter: drop-shadow(0 2px 4px rgba(45, 106, 79, 0.3));
    }

    /* Wood Plank Shelf */
    .wood-plank {
      width: 100%;
      height: 24px;
      background: linear-gradient(180deg, #ddb892 0%, #b08968 100%);
      border-radius: 6px;
      border-bottom: 4px solid #7f5539;
      box-shadow: 0 6px 12px rgba(30, 41, 69, 0.08);
      margin-top: -6px;
      position: relative;
      z-index: 1;
    }

    /* Finger Pointer Track */
    .pointer-track {
      position: relative;
      width: 100%;
      height: 48px;
      margin-top: 8px;
    }

    .pointer-finger {
      position: absolute;
      top: 0;
      left: 10%;
      transform: translateX(-50%);
      font-size: 32px;
      line-height: 1;
      transition: left 0.4s cubic-bezier(0.25, 1, 0.5, 1), transform 0.2s ease;
      cursor: default;
      pointer-events: none;
    }

    .pointer-finger.tapping {
      transform: translateX(-50%) translateY(-6px);
    }

    /* Banner output at bottom */
    .count-banner {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 18px;
      font-size: 20px;
      font-weight: 700;
      color: #64748b;
      margin-top: 14px;
      min-height: 48px;
    }

    .banner-num {
      transition: color 0.3s ease;
    }

    .banner-num.lit {
      color: #2d6a4f;
      font-weight: 800;
    }

    .banner-num.current {
      color: #1b4332;
    }

    /* Stepper navigation bar */
    .controls-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
      max-width: 580px;
      margin-top: 12px;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 36px;
      padding: 0 14px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #1e2945;
      cursor: pointer;
      transition: background 0.2s ease, border-color 0.2s ease;
    }

    .btn:active {
      background: #f1f5f9;
    }

    .step-dots {
      display: flex;
      gap: 8px;
    }

    .dot-btn {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #64748b;
      font-weight: 700;
      font-size: 13px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
    }

    .dot-btn.active {
      background: #2d6a4f;
      border-color: #2d6a4f;
      color: #ffffff;
    }
  </style>
</head>
<body>

  <div class="main-stage">
    
    <div class="specimens-row" id="specimensRow">
      
      <div class="specimen-slot" data-step="1">
        <div class="count-badge">1</div>
        <div class="pinecone-wrapper">
          <svg class="pinecone-svg" viewBox="0 0 60 70">
            <ellipse cx="30" cy="40" rx="20" ry="26" fill="#8c5836"/>
            
            <ellipse cx="30" cy="18" rx="8" ry="6" fill="#6f4223"/>
            <ellipse cx="23" cy="26" rx="9" ry="7" fill="#5a351b"/>
            <ellipse cx="37" cy="26" rx="9" ry="7" fill="#5a351b"/>
            <ellipse cx="30" cy="32" rx="10" ry="7.5" fill="#7a4827"/>
            <ellipse cx="19" cy="40" rx="9.5" ry="8" fill="#5a351b"/>
            <ellipse cx="41" cy="40" rx="9.5" ry="8" fill="#5a351b"/>
            <ellipse cx="30" cy="46" rx="11" ry="8" fill="#7a4827"/>
            <ellipse cx="22" cy="54" rx="9" ry="7" fill="#5a351b"/>
            <ellipse cx="38" cy="54" rx="9" ry="7" fill="#5a351b"/>
            <ellipse cx="30" cy="60" rx="8" ry="6" fill="#6f4223"/>
          </svg>
        </div>
      </div>

      
      <div class="specimen-slot" data-step="2">
        <div class="count-badge">2</div>
        <div class="pinecone-wrapper">
          <svg class="pinecone-svg" viewBox="0 0 60 70">
            <ellipse cx="30" cy="40" rx="20" ry="26" fill="#8c5836"/>
            <ellipse cx="30" cy="18" rx="8" ry="6" fill="#6f4223"/>
            <ellipse cx="23" cy="26" rx="9" ry="7" fill="#5a351b"/>
            <ellipse cx="37" cy="26" rx="9" ry="7" fill="#5a351b"/>
            <ellipse cx="30" cy="32" rx="10" ry="7.5" fill="#7a4827"/>
            <ellipse cx="19" cy="40" rx="9.5" ry="8" fill="#5a351b"/>
            <ellipse cx="41" cy="40" rx="9.5" ry="8" fill="#5a351b"/>
            <ellipse cx="30" cy="46" rx="11" ry="8" fill="#7a4827"/>
            <ellipse cx="22" cy="54" rx="9" ry="7" fill="#5a351b"/>
            <ellipse cx="38" cy="54" rx="9" ry="7" fill="#5a351b"/>
            <ellipse cx="30" cy="60" rx="8" ry="6" fill="#6f4223"/>
          </svg>
        </div>
      </div>

      
      <div class="specimen-slot" data-step="3">
        <div class="count-badge">3</div>
        <div class="pinecone-wrapper">
          <svg class="pinecone-svg" viewBox="0 0 60 70">
            <ellipse cx="30" cy="40" rx="20" ry="26" fill="#8c5836"/>
            <ellipse cx="30" cy="18" rx="8" ry="6" fill="#6f4223"/>
            <ellipse cx="23" cy="26" rx="9" ry="7" fill="#5a351b"/>
            <ellipse cx="37" cy="26" rx="9" ry="7" fill="#5a351b"/>
            <ellipse cx="30" cy="32" rx="10" ry="7.5" fill="#7a4827"/>
            <ellipse cx="19" cy="40" rx="9.5" ry="8" fill="#5a351b"/>
            <ellipse cx="41" cy="40" rx="9.5" ry="8" fill="#5a351b"/>
            <ellipse cx="30" cy="46" rx="11" ry="8" fill="#7a4827"/>
            <ellipse cx="22" cy="54" rx="9" ry="7" fill="#5a351b"/>
            <ellipse cx="38" cy="54" rx="9" ry="7" fill="#5a351b"/>
            <ellipse cx="30" cy="60" rx="8" ry="6" fill="#6f4223"/>
          </svg>
        </div>
      </div>

      
      <div class="specimen-slot" data-step="4">
        <div class="count-badge">4</div>
        <div class="pinecone-wrapper">
          <svg class="pinecone-svg" viewBox="0 0 60 70">
            <ellipse cx="30" cy="40" rx="20" ry="26" fill="#8c5836"/>
            <ellipse cx="30" cy="18" rx="8" ry="6" fill="#6f4223"/>
            <ellipse cx="23" cy="26" rx="9" ry="7" fill="#5a351b"/>
            <ellipse cx="37" cy="26" rx="9" ry="7" fill="#5a351b"/>
            <ellipse cx="30" cy="32" rx="10" ry="7.5" fill="#7a4827"/>
            <ellipse cx="19" cy="40" rx="9.5" ry="8" fill="#5a351b"/>
            <ellipse cx="41" cy="40" rx="9.5" ry="8" fill="#5a351b"/>
            <ellipse cx="30" cy="46" rx="11" ry="8" fill="#7a4827"/>
            <ellipse cx="22" cy="54" rx="9" ry="7" fill="#5a351b"/>
            <ellipse cx="38" cy="54" rx="9" ry="7" fill="#5a351b"/>
            <ellipse cx="30" cy="60" rx="8" ry="6" fill="#6f4223"/>
          </svg>
        </div>
      </div>

      
      <div class="specimen-slot" data-step="5">
        <div class="count-badge">5</div>
        <div class="pinecone-wrapper">
          <svg class="pinecone-svg" viewBox="0 0 60 70">
            <ellipse cx="30" cy="40" rx="20" ry="26" fill="#8c5836"/>
            <ellipse cx="30" cy="18" rx="8" ry="6" fill="#6f4223"/>
            <ellipse cx="23" cy="26" rx="9" ry="7" fill="#5a351b"/>
            <ellipse cx="37" cy="26" rx="9" ry="7" fill="#5a351b"/>
            <ellipse cx="30" cy="32" rx="10" ry="7.5" fill="#7a4827"/>
            <ellipse cx="19" cy="40" rx="9.5" ry="8" fill="#5a351b"/>
            <ellipse cx="41" cy="40" rx="9.5" ry="8" fill="#5a351b"/>
            <ellipse cx="30" cy="46" rx="11" ry="8" fill="#7a4827"/>
            <ellipse cx="22" cy="54" rx="9" ry="7" fill="#5a351b"/>
            <ellipse cx="38" cy="54" rx="9" ry="7" fill="#5a351b"/>
            <ellipse cx="30" cy="60" rx="8" ry="6" fill="#6f4223"/>
          </svg>
        </div>
      </div>
    </div>

    
    <div class="wood-plank"></div>

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

    
    <div class="count-banner">
      <span class="banner-num" id="b1">1</span>
      <span>-</span>
      <span class="banner-num" id="b2">2</span>
      <span>-</span>
      <span class="banner-num" id="b3">3</span>
      <span>-</span>
      <span class="banner-num" id="b4">4</span>
      <span>-</span>
      <span class="banner-num" id="b5">5!</span>
    </div>
  </div>

  
  <div class="controls-row">
    <button class="btn" id="playBtn" aria-label="Play or Pause">⏸</button>
    <div class="step-dots">
      <button class="dot-btn" data-step="1">1</button>
      <button class="dot-btn" data-step="2">2</button>
      <button class="dot-btn" data-step="3">3</button>
      <button class="dot-btn" data-step="4">4</button>
      <button class="dot-btn" data-step="5">5</button>
    </div>
  </div>

  <script>
    const slots = Array.from(document.querySelectorAll('.specimen-slot'));
    const dots = Array.from(document.querySelectorAll('.dot-btn'));
    const bannerNums = [
      document.getElementById('b1'),
      document.getElementById('b2'),
      document.getElementById('b3'),
      document.getElementById('b4'),
      document.getElementById('b5')
    ];
    const finger = document.getElementById('finger');
    const playBtn = document.getElementById('playBtn');

    // Percentage positions corresponding to the center of each of the 5 slots
    const fingerPositions = [9, 29.5, 50, 70.5, 91];

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

    function renderStep(step) {
      currentStep = step;

      // Update pointer finger position and tap bounce
      finger.style.left = fingerPositions[step - 1] + '%';
      finger.classList.add('tapping');
      setTimeout(() => finger.classList.remove('tapping'), 200);

      // Update Specimen Slots
      slots.forEach((slot, idx) => {
        const slotNum = idx + 1;
        if (slotNum < step) {
          slot.className = 'specimen-slot counted';
        } else if (slotNum === step) {
          slot.className = 'specimen-slot counted active';
        } else {
          slot.className = 'specimen-slot';
        }
      });

      // Update Banner Numbers
      bannerNums.forEach((bNum, idx) => {
        const num = idx + 1;
        if (num < step) {
          bNum.className = 'banner-num lit';
        } else if (num === step) {
          bNum.className = 'banner-num lit current';
        } else {
          bNum.className = 'banner-num';
        }
      });

      // Update Dot Buttons
      dots.forEach((dot, idx) => {
        if (idx + 1 === step) {
          dot.classList.add('active');
        } else {
          dot.classList.remove('active');
        }
      });
    }

    function advance() {
      let nextStep = currentStep + 1;
      if (nextStep > 5) {
        nextStep = 1;
      }
      renderStep(nextStep);
    }

    function startAutoPlay() {
      stopAutoPlay();
      isPlaying = true;
      playBtn.textContent = '⏸';
      timer = setInterval(advance, 3000);
    }

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

    function togglePlay() {
      if (isPlaying) {
        stopAutoPlay();
      } else {
        advance();
        startAutoPlay();
      }
    }

    // Direct Interaction Handlers
    playBtn.addEventListener('click', togglePlay);

    dots.forEach((dot) => {
      dot.addEventListener('click', () => {
        const step = parseInt(dot.getAttribute('data-step'), 10);
        renderStep(step);
        startAutoPlay();
      });
    });

    slots.forEach((slot) => {
      slot.addEventListener('click', () => {
        const step = parseInt(slot.getAttribute('data-step'), 10);
        renderStep(step);
        startAutoPlay();
      });
    });

    // Initial Start
    renderStep(1);
    startAutoPlay();
  </script>
</body>
</html>

OGS.0.SEP.2

Aligned learning resources

Related diagrams