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

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

    .title {
      font-size: 17px;
      font-weight: 700;
      color: #1e2945;
      letter-spacing: -0.2px;
      text-align: center;
    }

    .frame-container {
      width: 100%;
      max-width: 440px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }

    .row-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 8px;
      width: 100%;
    }

    /* Leaf slots */
    .slot {
      aspect-ratio: 1;
      border-radius: 12px;
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      cursor: pointer;
      transition: background-color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    }

    .slot.empty {
      background: #ffffff;
      border: 2px dashed #cbd5e1;
      cursor: default;
      opacity: 0.5;
    }

    .slot.active {
      background: #ecfdf5;
      border-color: #10b981;
      box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
    }

    /* Connectors */
    .connectors-row {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 8px;
      width: 100%;
      height: 22px;
    }

    .line-box {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
    }

    .line {
      width: 2px;
      height: 100%;
      background-image: repeating-linear-gradient(to bottom, #cbd5e1 0, #cbd5e1 3px, transparent 3px, transparent 6px);
      transition: background-image 0.25s ease, opacity 0.25s ease;
    }

    .line.active {
      background-image: repeating-linear-gradient(to bottom, #3b82f6 0, #3b82f6 3px, transparent 3px, transparent 6px);
      opacity: 1;
    }

    .line.empty {
      opacity: 0.25;
    }

    /* Five Frame */
    .five-frame {
      background: #f1f5f9;
      padding: 6px;
      border-radius: 14px;
      border: 2px solid #e2e8f0;
      width: 100%;
    }

    .counter-cell {
      aspect-ratio: 1;
      background: #ffffff;
      border-radius: 8px;
      border: 2px solid #e2e8f0;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background-color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    }

    .counter-cell.empty {
      border: 2px dashed #cbd5e1;
      cursor: default;
      opacity: 0.5;
    }

    .counter-cell.active {
      border-color: #3b82f6;
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
    }

    .token {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: #2563eb;
      color: #ffffff;
      font-size: 15px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 4px rgba(37, 99, 235, 0.25);
      transition: background-color 0.25s ease;
    }

    .counter-cell.active .token {
      background: #1d4ed8;
    }

    /* Status Bar */
    .status-card {
      min-height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 600;
      color: #334155;
      margin-top: 4px;
    }

    .tag {
      background: #eff6ff;
      color: #2563eb;
      padding: 3px 10px;
      border-radius: 12px;
      font-weight: 700;
      border: 1px solid #bfdbfe;
    }

    /* Action Buttons */
    .controls {
      display: flex;
      gap: 10px;
      margin-top: 4px;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 7px 16px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      border: 1px solid transparent;
      transition: opacity 0.2s, background-color 0.2s;
    }

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

    .btn-primary:active {
      background: #1d4ed8;
    }

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

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

  <div class="title">1-to-1 Counting in a Five-Frame</div>

  <div class="frame-container">
    
    <div class="row-grid">
      <div class="slot" data-index="1" title="Leaf 1">🍃</div>
      <div class="slot" data-index="2" title="Leaf 2">🍃</div>
      <div class="slot" data-index="3" title="Leaf 3">🍃</div>
      <div class="slot" data-index="4" title="Leaf 4">🍃</div>
      <div class="slot empty" title="Empty slot"></div>
    </div>

    
    <div class="connectors-row">
      <div class="line-box"><div class="line" data-index="1"></div></div>
      <div class="line-box"><div class="line" data-index="2"></div></div>
      <div class="line-box"><div class="line" data-index="3"></div></div>
      <div class="line-box"><div class="line" data-index="4"></div></div>
      <div class="line-box"><div class="line empty"></div></div>
    </div>

    
    <div class="five-frame">
      <div class="row-grid">
        <div class="counter-cell" data-index="1" title="Cell 1"><div class="token">1</div></div>
        <div class="counter-cell" data-index="2" title="Cell 2"><div class="token">2</div></div>
        <div class="counter-cell" data-index="3" title="Cell 3"><div class="token">3</div></div>
        <div class="counter-cell" data-index="4" title="Cell 4"><div class="token">4</div></div>
        <div class="counter-cell empty" title="Empty cell"></div>
      </div>
    </div>
  </div>

  <div class="status-card" id="statusBar">
    <span>Total:</span> <span class="tag">4 items</span>
  </div>

  <div class="controls">
    <button class="btn btn-primary" id="countBtn">▶ Count Along</button>
    <button class="btn btn-secondary" id="resetBtn">↺ Reset</button>
  </div>

  <script>
    let audioCtx = null;
    let timer = null;
    let activeIndex = null;

    const pitches = { 1: 330, 2: 392, 3: 494, 4: 587 };

    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) {}
    }

    function setActive(idx) {
      activeIndex = idx;
      
      document.querySelectorAll('.slot:not(.empty)').forEach(el => {
        el.classList.toggle('active', parseInt(el.dataset.index) === idx);
      });

      document.querySelectorAll('.line:not(.empty)').forEach(el => {
        el.classList.toggle('active', parseInt(el.dataset.index) === idx);
      });

      document.querySelectorAll('.counter-cell:not(.empty)').forEach(el => {
        el.classList.toggle('active', parseInt(el.dataset.index) === idx);
      });

      const statusBar = document.getElementById('statusBar');
      if (idx) {
        statusBar.innerHTML = `<span>Leaf ${idx}</span> ➔ <span class="tag">Box ${idx}</span>`;
        playTone(pitches[idx]);
      } else {
        statusBar.innerHTML = `<span>Total:</span> <span class="tag">4 items</span>`;
      }
    }

    function stopCounting() {
      if (timer) {
        clearInterval(timer);
        timer = null;
      }
      document.getElementById('countBtn').textContent = '▶ Count Along';
    }

    function startCounting() {
      stopCounting();
      let step = 1;
      setActive(step);
      document.getElementById('countBtn').textContent = '⏸ Pause';

      timer = setInterval(() => {
        step++;
        if (step > 4) {
          stopCounting();
          setActive(null);
        } else {
          setActive(step);
        }
      }, 1000);
    }

    // Event listeners
    document.querySelectorAll('.slot:not(.empty), .counter-cell:not(.empty)').forEach(el => {
      el.addEventListener('click', () => {
        stopCounting();
        const idx = parseInt(el.dataset.index);
        setActive(activeIndex === idx ? null : idx);
      });
    });

    document.getElementById('countBtn').addEventListener('click', () => {
      if (timer) {
        stopCounting();
      } else {
        startCounting();
      }
    });

    document.getElementById('resetBtn').addEventListener('click', () => {
      stopCounting();
      setActive(null);
    });
  </script>
</body>
</html>

Representing Quantities with Drawings and Marks

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

    .header-tag {
      font-size: 14px;
      font-weight: 700;
      color: #475569;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 6px;
    }

    .scene-container {
      width: 100%;
      max-width: 600px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      position: relative;
    }

    .panel {
      border-radius: 16px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      height: 240px;
      position: relative;
      border: 2px solid #e2e8f0;
      background: #ffffff;
    }

    .panel-title {
      font-size: 13px;
      font-weight: 700;
      text-align: center;
      padding: 6px 0;
      background: rgba(255, 255, 255, 0.9);
      border-bottom: 1px solid #e2e8f0;
      z-index: 2;
    }

    /* Left panel: Outdoor Soil */
    .nature-panel {
      background: #ecfccb;
      position: relative;
    }

    .soil {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 110px;
      background: #78350f;
      border-top: 8px solid #65a30d;
      border-radius: 0 0 14px 14px;
    }

    /* Right panel: Field Journal */
    .journal-panel {
      background: #fffbeb;
      background-image: linear-gradient(#e5e7eb 1px, transparent 1px);
      background-size: 100% 24px;
    }

    .spiral {
      position: absolute;
      left: 6px;
      top: 36px;
      bottom: 10px;
      width: 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      z-index: 3;
    }

    .spiral-ring {
      width: 14px;
      height: 6px;
      background: #94a3b8;
      border-radius: 4px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    }

    /* Items display */
    .items-row {
      display: flex;
      justify-content: space-around;
      align-items: flex-end;
      height: 100%;
      padding-bottom: 16px;
      position: relative;
      z-index: 2;
    }

    .item-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      transition: transform 0.25s ease, opacity 0.25s ease;
    }

    .num-badge {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: #2563eb;
      color: #ffffff;
      font-size: 18px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
      transition: transform 0.25s ease, background-color 0.25s ease;
    }

    .dimmed {
      opacity: 0.25;
      transform: scale(0.92);
    }

    .highlighted .num-badge {
      transform: scale(1.15);
      background: #d97706;
      box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.25);
    }

    /* Controls */
    .controls {
      display: flex;
      gap: 8px;
      margin-top: 10px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .btn {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      color: #334155;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 20px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.2s ease;
    }

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

    svg {
      display: block;
    }
  </style>
</head>
<body>

  <div class="header-tag">1-to-1 Matching</div>

  <div class="scene-container">
    
    
    <div class="panel nature-panel">
      <div class="panel-title">🌿 Real Garden</div>
      <div class="soil"></div>
      
      <div class="items-row">
        
        <div class="item-col" id="real-1">
          <div class="num-badge">1</div>
          <svg width="60" height="90" viewBox="0 0 60 90">
            
            <path d="M 28 90 Q 22 65 32 45 Q 40 28 28 15 Q 24 10 28 6" fill="none" stroke="#f472b6" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" />
            
            <path d="M 24 55 Q 28 53 33 56" fill="none" stroke="#f687b3" stroke-width="2.5" />
            <path d="M 22 40 Q 28 38 34 41" fill="none" stroke="#f687b3" stroke-width="2.5" />
            
            <circle cx="26" cy="12" r="2" fill="#1e293b" />
            <circle cx="34" cy="13" r="2" fill="#1e293b" />
            <path d="M 28 18 Q 30 21 33 18" fill="none" stroke="#9d174d" stroke-width="1.5" stroke-linecap="round" />
            
            <circle cx="23" cy="16" r="2" fill="#fda4af" />
            <circle cx="37" cy="17" r="2" fill="#fda4af" />
          </svg>
        </div>

        
        <div class="item-col" id="real-2">
          <div class="num-badge">2</div>
          <svg width="60" height="90" viewBox="0 0 60 90">
            
            <path d="M 32 90 Q 38 65 26 45 Q 18 28 30 15 Q 35 10 32 6" fill="none" stroke="#f472b6" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" />
            
            <path d="M 26 55 Q 32 53 37 56" fill="none" stroke="#f687b3" stroke-width="2.5" />
            <path d="M 24 40 Q 30 38 36 41" fill="none" stroke="#f687b3" stroke-width="2.5" />
            
            <circle cx="28" cy="13" r="2" fill="#1e293b" />
            <circle cx="36" cy="12" r="2" fill="#1e293b" />
            <path d="M 30 18 Q 33 21 35 18" fill="none" stroke="#9d174d" stroke-width="1.5" stroke-linecap="round" />
            
            <circle cx="25" cy="17" r="2" fill="#fda4af" />
            <circle cx="39" cy="16" r="2" fill="#fda4af" />
          </svg>
        </div>
      </div>
    </div>

    
    <div class="panel journal-panel">
      <div class="spiral">
        <div class="spiral-ring"></div>
        <div class="spiral-ring"></div>
        <div class="spiral-ring"></div>
        <div class="spiral-ring"></div>
        <div class="spiral-ring"></div>
      </div>
      <div class="panel-title">📒 Field Journal Drawing</div>

      <div class="items-row" style="padding-left: 14px;">
        
        <div class="item-col" id="draw-1">
          <div class="num-badge">1</div>
          <svg width="60" height="90" viewBox="0 0 60 90">
            
            <path d="M 28 85 C 20 62 36 48 28 20 C 26 12 30 8 30 8" fill="none" stroke="#ec4899" stroke-width="11" stroke-linecap="round" stroke-dasharray="280" />
            
            <circle cx="27" cy="15" r="2" fill="#831843" />
            <circle cx="34" cy="16" r="2" fill="#831843" />
            <path d="M 28 21 Q 31 23 33 20" fill="none" stroke="#831843" stroke-width="1.5" stroke-linecap="round" />
          </svg>
        </div>

        
        <div class="item-col" id="draw-2">
          <div class="num-badge">2</div>
          <svg width="60" height="90" viewBox="0 0 60 90">
            
            <path d="M 30 85 C 38 62 22 48 30 20 C 32 12 28 8 28 8" fill="none" stroke="#ec4899" stroke-width="11" stroke-linecap="round" stroke-dasharray="280" />
            
            <circle cx="28" cy="16" r="2" fill="#831843" />
            <circle cx="35" cy="15" r="2" fill="#831843" />
            <path d="M 29 20 Q 31 23 34 21" fill="none" stroke="#831843" stroke-width="1.5" stroke-linecap="round" />
          </svg>
        </div>
      </div>
    </div>

  </div>

  
  <div class="controls">
    <button class="btn active" id="btn-all" onclick="setMode('all')">Show Both (2 = 2)</button>
    <button class="btn" id="btn-1" onclick="setMode('1')">Match First (1)</button>
    <button class="btn" id="btn-2" onclick="setMode('2')">Match Second (2)</button>
  </div>

  <script>
    function setMode(mode) {
      const r1 = document.getElementById('real-1');
      const r2 = document.getElementById('real-2');
      const d1 = document.getElementById('draw-1');
      const d2 = document.getElementById('draw-2');

      const btnAll = document.getElementById('btn-all');
      const btn1 = document.getElementById('btn-1');
      const btn2 = document.getElementById('btn-2');

      [btnAll, btn1, btn2].forEach(b => b.classList.remove('active'));
      [r1, r2, d1, d2].forEach(el => el.classList.remove('dimmed', 'highlighted'));

      if (mode === '1') {
        btn1.classList.add('active');
        r1.classList.add('highlighted');
        d1.classList.add('highlighted');
        r2.classList.add('dimmed');
        d2.classList.add('dimmed');
      } else if (mode === '2') {
        btn2.classList.add('active');
        r2.classList.add('highlighted');
        d2.classList.add('highlighted');
        r1.classList.add('dimmed');
        d1.classList.add('dimmed');
      } else {
        btnAll.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;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }

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

    /* Top Banner Badge */
    .top-banner {
      background: #ede9fe;
      border: 2px solid #c4b5fd;
      color: #5b21b6;
      font-size: 15px;
      font-weight: 700;
      padding: 6px 16px;
      border-radius: 20px;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    /* Main Visual Layout */
    .matching-stage {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 8px;
      width: 100%;
      max-width: 600px;
      flex: 1;
    }

    /* Left: In Nature Card */
    .nature-card {
      background: #f0fdf4;
      border: 2px solid #86efac;
      border-radius: 14px;
      padding: 8px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .column-label {
      font-size: 14px;
      font-weight: 700;
      text-align: center;
      margin-bottom: 2px;
    }
    .nature-label { color: #166534; }
    .notebook-label { color: #5b21b6; }

    /* Rows */
    .specimen-row {
      background: #ffffff;
      border: 2px solid #bbf7d0;
      border-radius: 10px;
      padding: 8px 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
      min-height: 52px;
    }

    .row-badge {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: #dcfce7;
      color: #15803d;
      font-weight: 800;
      font-size: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .acorn-icon {
      font-size: 26px;
      line-height: 1;
    }

    /* Center: Connectors */
    .connectors-col {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      gap: 8px;
      padding-top: 24px;
    }

    .connector-arrow {
      height: 52px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #cbd5e1;
      font-size: 22px;
      font-weight: 900;
      cursor: pointer;
      transition: color 0.2s ease, transform 0.2s ease;
      padding: 0 4px;
    }

    /* Right: Field Notebook Card */
    .notebook-card {
      background: #faf5ff;
      border: 2px solid #d8b4fe;
      border-radius: 14px;
      padding: 8px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      position: relative;
    }

    /* Spiral rings */
    .spiral-track {
      position: absolute;
      top: -8px;
      left: 12px;
      right: 12px;
      display: flex;
      justify-content: space-around;
      pointer-events: none;
    }
    .spiral-ring {
      width: 8px;
      height: 14px;
      background: #94a3b8;
      border-radius: 4px;
      border: 1px solid #64748b;
    }

    .notebook-row {
      background: #ffffff;
      border: 2px solid #e9d5ff;
      background-image: linear-gradient(#f1f5f9 1px, transparent 1px);
      background-size: 100% 12px;
      border-radius: 10px;
      padding: 8px 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
      min-height: 52px;
    }

    .tally-circle {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: #a855f7;
      color: #ffffff;
      font-weight: 800;
      font-size: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 4px rgba(168, 85, 247, 0.3);
      transition: transform 0.2s ease;
    }

    /* Active Highlight States */
    .specimen-row.active {
      border-color: #15803d;
      box-shadow: 0 0 0 3px #86efac;
    }
    .notebook-row.active {
      border-color: #7e22ce;
      box-shadow: 0 0 0 3px #c084fc;
    }
    .connector-arrow.active {
      color: #9333ea;
    }

    /* Bottom Control Bar */
    .controls {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px;
      margin-top: 10px;
      width: 100%;
    }

    .btn {
      background: #ffffff;
      border: 2px solid #cbd5e1;
      border-radius: 8px;
      padding: 8px 12px;
      font-size: 13px;
      font-weight: 700;
      color: #334155;
      cursor: pointer;
      transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
      min-height: 38px;
    }

    .btn:active {
      background: #f1f5f9;
    }

    .btn.active {
      background: #7e22ce;
      border-color: #6b21a8;
      color: #ffffff;
    }
  </style>
</head>
<body>

  
  <div class="top-banner">
    <span>3 Nature Finds</span>
    <span>=</span>
    <span>3 Purple Marks</span>
  </div>

  
  <div class="matching-stage">
    
    
    <div class="nature-card">
      <div class="column-label nature-label">🌿 In Nature</div>
      
      <div class="specimen-row active" id="specimen-1" onclick="matchPair(1)">
        <span class="row-badge">1</span>
        <span class="acorn-icon">🌰</span>
      </div>
      
      <div class="specimen-row" id="specimen-2" onclick="matchPair(2)">
        <span class="row-badge">2</span>
        <span class="acorn-icon">🌰</span>
      </div>
      
      <div class="specimen-row" id="specimen-3" onclick="matchPair(3)">
        <span class="row-badge">3</span>
        <span class="acorn-icon">🌰</span>
      </div>
    </div>

    
    <div class="connectors-col">
      <div class="connector-arrow active" id="arrow-1" onclick="matchPair(1)">➔</div>
      <div class="connector-arrow" id="arrow-2" onclick="matchPair(2)">➔</div>
      <div class="connector-arrow" id="arrow-3" onclick="matchPair(3)">➔</div>
    </div>

    
    <div class="notebook-card">
      <div class="spiral-track">
        <div class="spiral-ring"></div>
        <div class="spiral-ring"></div>
        <div class="spiral-ring"></div>
        <div class="spiral-ring"></div>
      </div>
      <div class="column-label notebook-label">📝 Field Notebook</div>
      
      <div class="notebook-row active" id="notebook-1" onclick="matchPair(1)">
        <div class="tally-circle">1</div>
        <span class="row-badge" style="background:#f3e8ff; color:#7e22ce;">•</span>
      </div>
      
      <div class="notebook-row" id="notebook-2" onclick="matchPair(2)">
        <div class="tally-circle">2</div>
        <span class="row-badge" style="background:#f3e8ff; color:#7e22ce;">•</span>
      </div>
      
      <div class="notebook-row" id="notebook-3" onclick="matchPair(3)">
        <div class="tally-circle">3</div>
        <span class="row-badge" style="background:#f3e8ff; color:#7e22ce;">•</span>
      </div>
    </div>

  </div>

  
  <div class="controls">
    <button class="btn active" id="btn-1" onclick="matchPair(1)">Pair 1</button>
    <button class="btn" id="btn-2" onclick="matchPair(2)">Pair 2</button>
    <button class="btn" id="btn-3" onclick="matchPair(3)">Pair 3</button>
    <button class="btn" id="btn-all" onclick="matchAll()">Match All 3</button>
  </div>

  <script>
    // Audio Feedback for Pre-K exploration
    function playTone(freq, dur = 0.2) {
      try {
        const AudioContext = window.AudioContext || window.webkitAudioContext;
        if (!AudioContext) return;
        const ctx = new AudioContext();
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.type = "sine";
        osc.frequency.setValueAtTime(freq, ctx.currentTime);
        osc.connect(gain);
        gain.connect(ctx.destination);
        gain.gain.setValueAtTime(0.2, ctx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + dur);
        osc.start();
        osc.stop(ctx.currentTime + dur);
      } catch (e) {}
    }

    const tones = { 1: 440, 2: 554.37, 3: 659.25 };

    function clearAll() {
      for (let i = 1; i <= 3; i++) {
        document.getElementById(`specimen-${i}`).classList.remove('active');
        document.getElementById(`arrow-${i}`).classList.remove('active');
        document.getElementById(`notebook-${i}`).classList.remove('active');
        document.getElementById(`btn-${i}`).classList.remove('active');
      }
      document.getElementById('btn-all').classList.remove('active');
    }

    function matchPair(num) {
      clearAll();
      document.getElementById(`specimen-${num}`).classList.add('active');
      document.getElementById(`arrow-${num}`).classList.add('active');
      document.getElementById(`notebook-${num}`).classList.add('active');
      document.getElementById(`btn-${num}`).classList.add('active');
      playTone(tones[num] || 520, 0.25);
    }

    function matchAll() {
      clearAll();
      for (let i = 1; i <= 3; i++) {
        document.getElementById(`specimen-${i}`).classList.add('active');
        document.getElementById(`arrow-${i}`).classList.add('active');
        document.getElementById(`notebook-${i}`).classList.add('active');
      }
      document.getElementById('btn-all').classList.add('active');
      
      // Happy 3-note chime
      playTone(440, 0.15);
      setTimeout(() => playTone(554.37, 0.15), 120);
      setTimeout(() => playTone(659.25, 0.3), 240);
    }
  </script>
</body>
</html>

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

    .main-grid {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 8px;
      width: 100%;
      max-width: 540px;
      align-items: center;
      margin: auto 0;
    }

    /* Left panel: Leaves */
    .panel {
      background: #ffffff;
      border-radius: 16px;
      padding: 12px 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      border: 2px solid #e2e8f0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .panel-header {
      font-size: 14px;
      font-weight: 800;
      text-align: center;
      color: #166534;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    /* Clipboard Panel */
    .clipboard-panel {
      background: #fefce8;
      border-color: #fde047;
    }
    .clipboard-panel .panel-header {
      color: #854d0e;
    }

    .item-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 6px 10px;
      border-radius: 12px;
      background: #f0fdf4;
      border: 2px solid transparent;
      transition: all 0.3s ease;
      cursor: pointer;
    }

    .clipboard-panel .item-row {
      background: #ffffff;
      justify-content: center;
      gap: 12px;
    }

    .item-row.active {
      border-color: #22c55e;
      background: #dcfce7;
      box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
    }

    .clipboard-panel .item-row.active {
      border-color: #0284c7;
      background: #e0f2fe;
      box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.2);
    }

    .leaf-icon {
      font-size: 24px;
      line-height: 1;
    }

    .num-badge {
      font-size: 16px;
      font-weight: 800;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: #22c55e;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Blue Stick Marks */
    .stick-mark {
      width: 6px;
      height: 28px;
      background: #0284c7;
      border-radius: 4px;
      transition: transform 0.2s ease;
    }

    .item-row.active .stick-mark {
      background: #0369a1;
      transform: scaleY(1.1);
    }

    /* Center Arrows */
    .arrows-col {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 32px 0 0 0;
      align-items: center;
    }

    .arrow-indicator {
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-weight: 800;
      color: #94a3b8;
      transition: all 0.3s ease;
    }

    .arrow-indicator.active {
      color: #0284c7;
      transform: scale(1.25);
    }

    /* Bottom Bar */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      margin-top: 8px;
    }

    .step-btn {
      background: #ffffff;
      border: 2px solid #cbd5e1;
      border-radius: 999px;
      padding: 6px 14px;
      font-size: 14px;
      font-weight: 700;
      color: #475569;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: all 0.2s ease;
    }

    .step-btn.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
    }

    .play-btn {
      background: #22c55e;
      border-color: #22c55e;
      color: #ffffff;
    }

    .summary-text {
      font-size: 14px;
      font-weight: 700;
      color: #334155;
      text-align: center;
      min-height: 20px;
    }
  </style>
</head>
<body>

  <div class="main-grid">
    
    <div class="panel">
      <div class="panel-header">🍃 4 Leaves</div>
      <div class="item-row active" data-idx="0">
        <span class="leaf-icon">🍃</span>
        <span class="num-badge">1</span>
      </div>
      <div class="item-row" data-idx="1">
        <span class="leaf-icon">🍃</span>
        <span class="num-badge">2</span>
      </div>
      <div class="item-row" data-idx="2">
        <span class="leaf-icon">🍃</span>
        <span class="num-badge">3</span>
      </div>
      <div class="item-row" data-idx="3">
        <span class="leaf-icon">🍃</span>
        <span class="num-badge">4</span>
      </div>
    </div>

    
    <div class="arrows-col">
      <div class="arrow-indicator active" data-idx="0">➔</div>
      <div class="arrow-indicator" data-idx="1">➔</div>
      <div class="arrow-indicator" data-idx="2">➔</div>
      <div class="arrow-indicator" data-idx="3">➔</div>
    </div>

    
    <div class="panel clipboard-panel">
      <div class="panel-header">📋 Marks</div>
      <div class="item-row active" data-idx="0">
        <div class="stick-mark"></div>
      </div>
      <div class="item-row" data-idx="1">
        <div class="stick-mark"></div>
      </div>
      <div class="item-row" data-idx="2">
        <div class="stick-mark"></div>
      </div>
      <div class="item-row" data-idx="3">
        <div class="stick-mark"></div>
      </div>
    </div>
  </div>

  <div class="summary-text" id="statusText">1 leaf = 1 mark</div>

  
  <div class="controls">
    <button class="step-btn play-btn" id="playBtn">⏸ Pause</button>
    <button class="step-btn active" data-step="0">1</button>
    <button class="step-btn" data-step="1">2</button>
    <button class="step-btn" data-step="2">3</button>
    <button class="step-btn" data-step="3">4</button>
  </div>

  <script>
    const leafRows = document.querySelectorAll('.panel:not(.clipboard-panel) .item-row');
    const markRows = document.querySelectorAll('.clipboard-panel .item-row');
    const arrows = document.querySelectorAll('.arrow-indicator');
    const stepBtns = document.querySelectorAll('.step-btn[data-step]');
    const playBtn = document.getElementById('playBtn');
    const statusText = document.getElementById('statusText');

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

    function setStep(idx) {
      current = idx;
      
      leafRows.forEach((el, i) => el.classList.toggle('active', i === idx));
      markRows.forEach((el, i) => el.classList.toggle('active', i === idx));
      arrows.forEach((el, i) => el.classList.toggle('active', i === idx));
      stepBtns.forEach((el, i) => el.classList.toggle('active', i === idx));

      statusText.textContent = `Leaf ${idx + 1} ➔ Mark ${idx + 1}`;
    }

    function nextStep() {
      setStep((current + 1) % 4);
    }

    function startAuto() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, 3000);
      playing = true;
      playBtn.textContent = '⏸ Pause';
      playBtn.style.background = '#22c55e';
    }

    function stopAuto() {
      if (timer) clearInterval(timer);
      timer = null;
      playing = false;
      playBtn.textContent = '▶ Count';
      playBtn.style.background = '#0284c7';
    }

    playBtn.addEventListener('click', () => {
      if (playing) stopAuto();
      else {
        nextStep();
        startAuto();
      }
    });

    stepBtns.forEach((btn) => {
      btn.addEventListener('click', () => {
        stopAuto();
        setStep(parseInt(btn.getAttribute('data-step'), 10));
      });
    });

    document.querySelectorAll('[data-idx]').forEach((el) => {
      el.addEventListener('click', () => {
        stopAuto();
        setStep(parseInt(el.getAttribute('data-idx'), 10));
      });
    });

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      width: 100%;
      min-height: 100%;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #ffffff;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 10px;
    }

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 4px;
    }
    .title {
      font-size: 16px;
      font-weight: 700;
      color: #1e2945;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .rule-pill {
      font-size: 13px;
      font-weight: 600;
      color: #0284c7;
      background: #e0f2fe;
      padding: 4px 10px;
      border-radius: 999px;
    }

    .tracker-board {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .tracker-row {
      display: grid;
      grid-template-columns: 88px 1fr auto 1fr;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      background: #f8fafc;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      transition: background 0.2s ease, border-color 0.2s ease;
      cursor: pointer;
    }
    .tracker-row:hover, .tracker-row.active {
      background: #f0f9ff;
      border-color: #22b7ff;
    }

    .category-badge {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 14px;
      font-weight: 700;
      color: #1e2945;
    }

    .items-box {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 8px;
      padding: 6px 8px;
      min-height: 44px;
      flex-wrap: wrap;
    }

    .item-icon {
      font-size: 22px;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      filter: drop-shadow(0 1px 2px rgba(0,0,0,0.08));
      transition: transform 0.2s ease;
    }

    .arrow-sync {
      font-size: 16px;
      color: #94a3b8;
      font-weight: 700;
    }

    .tally-box {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 8px;
      padding: 6px 12px;
      min-height: 44px;
    }

    .tally-mark {
      width: 5px;
      height: 28px;
      border-radius: 3px;
      background: #0284c7;
      box-shadow: 0 1px 2px rgba(2, 132, 199, 0.25);
      position: relative;
    }

    .row-birds .tally-mark { background: #0284c7; }
    .row-bugs .tally-mark { background: #e11d48; }
    .row-leaves .tally-mark { background: #d97706; }

    .count-pill {
      font-size: 14px;
      font-weight: 700;
      width: 26px;
      height: 26px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      margin-left: 4px;
    }
    .row-birds .count-pill { background: #e0f2fe; color: #0369a1; }
    .row-bugs .count-pill { background: #ffe4e6; color: #be123c; }
    .row-leaves .count-pill { background: #fef3c7; color: #b45309; }

    @media (max-width: 400px) {
      .tracker-row {
        grid-template-columns: 75px 1fr auto 1fr;
        gap: 6px;
        padding: 6px 8px;
      }
      .category-badge { font-size: 13px; }
      .item-icon { font-size: 18px; }
      .tally-mark { width: 4px; height: 24px; }
      .tally-box { gap: 6px; padding: 4px 8px; }
    }
  </style>
</head>
<body>

  <div class="header">
    <div class="title">📋 Nature Tracker</div>
    <div class="rule-pill">1 Item = 1 Mark |</div>
  </div>

  <div class="tracker-board">
    
    <div class="tracker-row row-birds" onclick="pulseRow(this)">
      <div class="category-badge">
        <span>Birds</span>
      </div>
      <div class="items-box">
        <span class="item-icon">🐦</span>
        <span class="item-icon">🐦</span>
      </div>
      <div class="arrow-sync">→</div>
      <div class="tally-box">
        <div class="tally-mark"></div>
        <div class="tally-mark"></div>
        <div class="count-pill">2</div>
      </div>
    </div>

    
    <div class="tracker-row row-bugs" onclick="pulseRow(this)">
      <div class="category-badge">
        <span>Insects</span>
      </div>
      <div class="items-box">
        <span class="item-icon">🐞</span>
        <span class="item-icon">🐞</span>
        <span class="item-icon">🐞</span>
      </div>
      <div class="arrow-sync">→</div>
      <div class="tally-box">
        <div class="tally-mark"></div>
        <div class="tally-mark"></div>
        <div class="tally-mark"></div>
        <div class="count-pill">3</div>
      </div>
    </div>

    
    <div class="tracker-row row-leaves" onclick="pulseRow(this)">
      <div class="category-badge">
        <span>Leaves</span>
      </div>
      <div class="items-box">
        <span class="item-icon">🍁</span>
        <span class="item-icon">🍁</span>
        <span class="item-icon">🍁</span>
        <span class="item-icon">🍁</span>
      </div>
      <div class="arrow-sync">→</div>
      <div class="tally-box">
        <div class="tally-mark"></div>
        <div class="tally-mark"></div>
        <div class="tally-mark"></div>
        <div class="tally-mark"></div>
        <div class="count-pill">4</div>
      </div>
    </div>
  </div>

  <script>
    function pulseRow(row) {
      document.querySelectorAll('.tracker-row').forEach(r => r.classList.remove('active'));
      row.classList.add('active');
      
      const icons = row.querySelectorAll('.item-icon');
      const marks = row.querySelectorAll('.tally-mark');
      
      icons.forEach((ic, i) => {
        setTimeout(() => {
          ic.style.transform = 'translateY(-3px)';
          if (marks[i]) marks[i].style.filter = 'brightness(1.3)';
          setTimeout(() => {
            ic.style.transform = 'translateY(0)';
            if (marks[i]) marks[i].style.filter = 'none';
          }, 300);
        }, i * 150);
      });
    }
  </script>
</body>
</html>

Drawing Single Tally Marks for Each Item Seen

<!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>Tally Mark Introduction</title>
  <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: #f8fafc;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 10px 14px;
      overflow-x: hidden;
    }

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

    .main-stage {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
    }

    /* Cards */
    .card-box {
      flex: 1;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 18px;
      padding: 12px 10px 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      height: 220px;
      position: relative;
      box-shadow: 0 4px 14px rgba(30, 41, 69, 0.06);
    }

    .card-label {
      font-size: 15px;
      font-weight: 800;
      color: #475569;
      letter-spacing: 0.3px;
      text-align: center;
    }

    /* Bird SVG & Animation */
    .bird-container {
      width: 140px;
      height: 140px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .bird-body-group {
      transform-origin: 65px 75px;
      animation: birdBob 3.6s ease-in-out infinite;
    }

    .wing {
      transform-origin: 48px 66px;
      animation: wingFlap 3.6s ease-in-out infinite;
    }

    @keyframes birdBob {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      15% { transform: translateY(-7px) rotate(-3deg); }
      30% { transform: translateY(0) rotate(0deg); }
      45% { transform: translateY(-3px) rotate(2deg); }
      60% { transform: translateY(0) rotate(0deg); }
    }

    @keyframes wingFlap {
      0%, 100% { transform: rotate(0deg); }
      15% { transform: rotate(-18deg); }
      25% { transform: rotate(8deg); }
      35% { transform: rotate(0deg); }
    }

    /* Arrow Connector */
    .arrow-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 44px;
      flex-shrink: 0;
    }

    .arrow-svg {
      width: 38px;
      height: 38px;
      animation: pulseArrow 3.6s ease-in-out infinite;
    }

    @keyframes pulseArrow {
      0%, 100% { transform: translateX(0); opacity: 0.6; }
      25%, 45% { transform: translateX(5px); opacity: 1; }
      65% { transform: translateX(0); opacity: 0.8; }
    }

    /* Notepad & Clipboard */
    .notepad-container {
      width: 140px;
      height: 140px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .clipboard {
      width: 110px;
      height: 136px;
      background: #fef08a;
      border: 3px solid #eab308;
      border-radius: 12px;
      box-shadow: 0 4px 10px rgba(234, 179, 8, 0.18);
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #fffdf5;
    }

    .clipboard-clip {
      position: absolute;
      top: -9px;
      width: 44px;
      height: 14px;
      background: #94a3b8;
      border-radius: 5px;
      border: 2px solid #475569;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      z-index: 4;
    }

    .clipboard-clip::after {
      content: '';
      position: absolute;
      top: 3px;
      left: 10px;
      right: 10px;
      height: 3px;
      background: #cbd5e1;
      border-radius: 2px;
    }

    .ruled-lines {
      position: absolute;
      top: 22px;
      left: 8px;
      right: 8px;
      bottom: 10px;
      background-image: repeating-linear-gradient(
        to bottom,
        transparent,
        transparent 21px,
        #f1f5f9 22px
      );
      pointer-events: none;
      z-index: 1;
    }

    /* Tally Mark Drawing SVG */
    .tally-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
    }

    .tally-line-guide {
      stroke: #e2e8f0;
      stroke-dasharray: 4 4;
    }

    .tally-line {
      stroke-dasharray: 75;
      stroke-dashoffset: 75;
      animation: drawTally 3.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }

    @keyframes drawTally {
      0%, 15% {
        stroke-dashoffset: 75;
      }
      40%, 90% {
        stroke-dashoffset: 0;
      }
      100% {
        stroke-dashoffset: 75;
      }
    }

    /* Animated Crayon */
    .crayon-wrapper {
      position: absolute;
      width: 38px;
      height: 52px;
      top: 0;
      left: 0;
      pointer-events: none;
      z-index: 5;
      animation: crayonMove 3.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }

    @keyframes crayonMove {
      0%, 12% {
        transform: translate(62px, 8px) rotate(24deg);
        opacity: 0;
      }
      16% {
        transform: translate(44px, 14px) rotate(22deg);
        opacity: 1;
      }
      40% {
        transform: translate(44px, 78px) rotate(20deg);
        opacity: 1;
      }
      55%, 88% {
        transform: translate(64px, 72px) rotate(32deg);
        opacity: 0.9;
      }
      96%, 100% {
        transform: translate(64px, 72px) rotate(32deg);
        opacity: 0;
      }
    }

    /* Bottom Equality Banner */
    .banner {
      width: 100%;
      background: #ffffff;
      border: 2px solid #38bdf8;
      border-radius: 14px;
      padding: 9px 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      box-shadow: 0 4px 10px rgba(56, 189, 248, 0.12);
    }

    .banner-text {
      font-size: 20px;
      font-weight: 800;
      color: #1e2945;
      letter-spacing: -0.2px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .highlight-tally {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #0284c7;
      font-size: 26px;
      line-height: 1;
      font-family: monospace, ui-monospace, sans-serif;
      font-weight: 900;
      background: #e0f2fe;
      padding: 0 10px;
      height: 32px;
      border-radius: 6px;
      border: 1.5px solid #bae6fd;
    }

    @media (max-width: 440px) {
      body {
        padding: 8px;
      }
      .container {
        gap: 8px;
      }
      .main-stage {
        gap: 6px;
      }
      .card-box {
        height: 195px;
        padding: 8px 4px 10px;
        border-radius: 14px;
      }
      .bird-container, .notepad-container {
        width: 115px;
        height: 115px;
      }
      .clipboard {
        width: 92px;
        height: 116px;
      }
      .clipboard-clip {
        width: 36px;
        height: 12px;
        top: -7px;
      }
      @keyframes crayonMove {
        0%, 12% { transform: translate(52px, 5px) rotate(24deg); opacity: 0; }
        16% { transform: translate(36px, 12px) rotate(22deg); opacity: 1; }
        40% { transform: translate(36px, 66px) rotate(20deg); opacity: 1; }
        55%, 88% { transform: translate(52px, 60px) rotate(32deg); opacity: 0.9; }
        96%, 100% { transform: translate(52px, 60px) rotate(32deg); opacity: 0; }
      }
      .banner {
        padding: 7px 12px;
        border-radius: 10px;
      }
      .banner-text {
        font-size: 16px;
      }
      .highlight-tally {
        font-size: 20px;
        height: 26px;
        padding: 0 7px;
      }
      .card-label {
        font-size: 13px;
      }
    }
  </style>
</head>
<body>

  <div class="container">
    <div class="main-stage">
      
      <div class="card-box">
        <div class="bird-container">
          <svg viewBox="0 0 130 130" width="100%" height="100%">
            
            <path d="M 10 102 Q 55 106 120 98" stroke="#854d0e" stroke-width="7" stroke-linecap="round" fill="none" />
            <path d="M 85 100 Q 100 88 112 90" stroke="#854d0e" stroke-width="4.5" stroke-linecap="round" fill="none" />
            
            
            <ellipse cx="114" cy="88" rx="8" ry="4.5" fill="#22c55e" transform="rotate(-20 114 88)" />
            <ellipse cx="78" cy="103" rx="7" ry="4" fill="#16a34a" transform="rotate(30 78 103)" />

            
            <g class="bird-body-group">
              
              <polygon points="32,78 14,84 20,72" fill="#0284c7" />
              <polygon points="30,76 10,78 18,68" fill="#0369a1" />

              
              <line x1="58" y1="90" x2="56" y2="102" stroke="#ea580c" stroke-width="3.5" stroke-linecap="round" />
              <line x1="68" y1="90" x2="68" y2="101" stroke="#ea580c" stroke-width="3.5" stroke-linecap="round" />

              
              <ellipse cx="64" cy="74" rx="26" ry="21" fill="#38bdf8" />
              
              <ellipse cx="72" cy="78" rx="16" ry="14" fill="#e0f2fe" />

              
              <circle cx="78" cy="50" r="17" fill="#38bdf8" />

              
              <polygon points="93,47 108,52 93,57" fill="#f97316" stroke="#ea580c" stroke-width="1" />

              
              <circle cx="84" cy="46" r="4.2" fill="#1e2945" />
              <circle cx="85.5" cy="44.5" r="1.6" fill="#ffffff" />

              
              <circle cx="78" cy="56" r="3.5" fill="#fda4af" opacity="0.8" />

              
              <path class="wing" d="M 46 68 Q 62 62 66 77 Q 56 86 42 76 Z" fill="#0284c7" />
            </g>
          </svg>
        </div>
        <div class="card-label">1 Bird</div>
      </div>

      
      <div class="arrow-container">
        <svg class="arrow-svg" viewBox="0 0 38 38" fill="none">
          <circle cx="19" cy="19" r="17" fill="#f0f9ff" stroke="#bae6fd" stroke-width="2.5" />
          <path d="M 12 19 L 24 19 M 19 14 L 25 19 L 19 24" stroke="#0284c7" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
      </div>

      
      <div class="card-box">
        <div class="notepad-container">
          <div class="clipboard">
            <div class="clipboard-clip"></div>
            <div class="ruled-lines"></div>

            
            <svg class="tally-svg" viewBox="0 0 110 136">
              
              <line class="tally-line-guide" x1="55" y1="30" x2="55" y2="102" stroke-width="2" stroke-linecap="round" />
              
              <line class="tally-line" x1="55" y1="30" x2="55" y2="102" stroke="#0284c7" stroke-width="8.5" stroke-linecap="round" />
            </svg>

            
            <div class="crayon-wrapper">
              <svg viewBox="0 0 38 52" width="100%" height="100%">
                
                <polygon points="12,50 6,36 18,36" fill="#0284c7" />
                <polygon points="12,50 10,43 14,43" fill="#0369a1" />
                
                <rect x="6" y="8" width="12" height="28" rx="1.5" fill="#38bdf8" />
                
                <rect x="6" y="16" width="12" height="14" fill="#0284c7" />
                <line x1="6" y1="20" x2="18" y2="20" stroke="#bae6fd" stroke-width="1.5" />
                <line x1="6" y1="26" x2="18" y2="26" stroke="#bae6fd" stroke-width="1.5" />
                
                <rect x="6" y="5" width="12" height="3" rx="1" fill="#38bdf8" />
              </svg>
            </div>
          </div>
        </div>
        <div class="card-label">1 Tally Mark</div>
      </div>
    </div>

    
    <div class="banner">
      <div class="banner-text">
        <span>1 Bird = 1 Line</span>
        <span class="highlight-tally">|</span>
      </div>
    </div>
  </div>

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

    .stepper {
      display: flex;
      gap: 8px;
      margin-bottom: 8px;
    }
    .step-btn {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 14px;
      font-weight: 700;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.25s ease;
    }
    .step-btn.active {
      border-color: #0284c7;
      background: #e0f2fe;
      color: #0369a1;
    }

    .diagram-area {
      position: relative;
      width: 100%;
      max-width: 440px;
      aspect-ratio: 4 / 3;
    }

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

    .item-group {
      cursor: pointer;
      transition: opacity 0.3s ease;
    }
    .dimmed {
      opacity: 0.25;
    }
    .active-item {
      opacity: 1;
    }

    /* Dotted line animation */
    .link-line {
      stroke-dasharray: 6 6;
      animation: dashMove 1.5s linear infinite;
    }
    @keyframes dashMove {
      to {
        stroke-dashoffset: -24;
      }
    }

    .summary-badge {
      margin-top: 6px;
      font-size: 15px;
      font-weight: 800;
      color: #0369a1;
      background: #e0f2fe;
      padding: 4px 16px;
      border-radius: 12px;
    }
  </style>
</head>
<body>

  
  <div class="stepper">
    <button class="step-btn active" onclick="setStep(0)">Bird 1</button>
    <button class="step-btn" onclick="setStep(1)">Bird 2</button>
    <button class="step-btn" onclick="setStep(2)">Both</button>
  </div>

  
  <div class="diagram-area">
    <svg viewBox="0 0 400 300">
      <defs>
        
        <filter id="card-shadow" x="-5%" y="-5%" width="110%" height="110%">
          <feDropShadow dx="0" dy="3" stdDeviation="3" flood-opacity="0.08" />
        </filter>
      </defs>

      
      <g transform="translate(16, 16)">
        <rect width="168" height="248" rx="16" fill="#f0fdf4" stroke="#86efac" stroke-width="2" filter="url(#card-shadow)" />
        
        
        <rect x="14" y="160" width="140" height="12" rx="4" fill="#d97706" opacity="0.85" />
        <rect x="36" y="140" width="16" height="70" rx="3" fill="#b45309" opacity="0.9" />
        <rect x="116" y="140" width="16" height="70" rx="3" fill="#b45309" opacity="0.9" />

        
        <g id="birdGroup1" class="item-group active-item" onclick="setStep(0)">
          <circle cx="44" cy="115" r="26" fill="#fef08a" stroke="#eab308" stroke-width="2" />
          <text x="44" y="125" font-size="28" text-anchor="middle">🐤</text>
          
          <rect x="16" y="44" width="56" height="22" rx="11" fill="#0284c7" />
          <text x="44" y="59" fill="#ffffff" font-size="12" font-weight="bold" text-anchor="middle">Bird 1</text>
        </g>

        
        <g id="birdGroup2" class="item-group active-item" onclick="setStep(1)">
          <circle cx="124" cy="115" r="26" fill="#fef08a" stroke="#eab308" stroke-width="2" />
          <text x="124" y="125" font-size="28" text-anchor="middle">🐤</text>
          
          <rect x="96" y="44" width="56" height="22" rx="11" fill="#ea580c" />
          <text x="124" y="59" fill="#ffffff" font-size="12" font-weight="bold" text-anchor="middle">Bird 2</text>
        </g>
      </g>

      
      <g transform="translate(216, 16)">
        <rect width="168" height="248" rx="16" fill="#ffffff" stroke="#cbd5e1" stroke-width="2" filter="url(#card-shadow)" />
        
        
        <line x1="36" y1="0" x2="36" y2="248" stroke="#fca5a5" stroke-width="1.5" />
        <line x1="0" y1="70" x2="168" y2="70" stroke="#e2e8f0" stroke-width="1.5" />
        <line x1="0" y1="120" x2="168" y2="120" stroke="#e2e8f0" stroke-width="1.5" />
        <line x1="0" y1="170" x2="168" y2="170" stroke="#e2e8f0" stroke-width="1.5" />
        <line x1="0" y1="220" x2="168" y2="220" stroke="#e2e8f0" stroke-width="1.5" />

        
        <g id="tallyGroup1" class="item-group active-item" onclick="setStep(0)">
          <rect x="52" y="44" width="50" height="22" rx="11" fill="#0284c7" />
          <text x="77" y="59" fill="#ffffff" font-size="12" font-weight="bold" text-anchor="middle">Tally 1</text>
          
          <line x1="77" y1="95" x2="77" y2="155" stroke="#0284c7" stroke-width="7" stroke-linecap="round" />
        </g>

        
        <g id="tallyGroup2" class="item-group active-item" onclick="setStep(1)">
          <rect x="108" y="44" width="50" height="22" rx="11" fill="#ea580c" />
          <text x="133" y="59" fill="#ffffff" font-size="12" font-weight="bold" text-anchor="middle">Tally 2</text>
          
          <line x1="133" y1="95" x2="133" y2="155" stroke="#ea580c" stroke-width="7" stroke-linecap="round" />
        </g>
      </g>

      
      
      <g id="link1" class="item-group active-item">
        <path d="M 60 100 C 130 10, 240 40, 293 115" fill="none" stroke="#0284c7" stroke-width="3.5" class="link-line" />
        <circle cx="293" cy="115" r="4.5" fill="#0284c7" />
      </g>

      
      <g id="link2" class="item-group active-item">
        <path d="M 140 140 C 190 220, 270 220, 349 140" fill="none" stroke="#ea580c" stroke-width="3.5" class="link-line" />
        <circle cx="349" cy="140" r="4.5" fill="#ea580c" />
      </g>
    </svg>
  </div>

  
  <div class="summary-badge" id="summaryText">1 Bird = 1 Mark</div>

  <script>
    let currentStep = 2; // Start showing both for full overview

    function setStep(step) {
      currentStep = step;
      
      const buttons = document.querySelectorAll('.step-btn');
      buttons.forEach((btn, idx) => {
        btn.classList.toggle('active', idx === step);
      });

      const gBird1 = document.getElementById('birdGroup1');
      const gBird2 = document.getElementById('birdGroup2');
      const gTally1 = document.getElementById('tallyGroup1');
      const gTally2 = document.getElementById('tallyGroup2');
      const l1 = document.getElementById('link1');
      const l2 = document.getElementById('link2');
      const summary = document.getElementById('summaryText');

      if (step === 0) {
        gBird1.className.baseVal = 'item-group active-item';
        gTally1.className.baseVal = 'item-group active-item';
        l1.style.display = 'block';

        gBird2.className.baseVal = 'item-group dimmed';
        gTally2.className.baseVal = 'item-group dimmed';
        l2.style.display = 'none';

        summary.textContent = '1st Bird = 1st Mark';
      } else if (step === 1) {
        gBird1.className.baseVal = 'item-group dimmed';
        gTally1.className.baseVal = 'item-group dimmed';
        l1.style.display = 'none';

        gBird2.className.baseVal = 'item-group active-item';
        gTally2.className.baseVal = 'item-group active-item';
        l2.style.display = 'block';

        summary.textContent = '2nd Bird = 2nd Mark';
      } else {
        gBird1.className.baseVal = 'item-group active-item';
        gTally1.className.baseVal = 'item-group active-item';
        l1.style.display = 'block';

        gBird2.className.baseVal = 'item-group active-item';
        gTally2.className.baseVal = 'item-group active-item';
        l2.style.display = 'block';

        summary.textContent = '2 Birds = 2 Marks ( | | )';
      }
    }

    // Initialize to full view
    setStep(2);
  </script>
</body>
</html>

OGS.0.SEP.3

Aligned learning resources

Related diagrams