<!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>Counting Syllables: Oliver</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background-color: #f7fee7;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 16px 12px;
      user-select: none;
    }

    .app-wrap {
      width: 100%;
      max-width: 540px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      align-items: center;
    }

    /* Word Header */
    .word-header {
      font-size: 20px;
      font-weight: 800;
      color: #166534;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .word-badge {
      background: #ea580c;
      color: #fff;
      padding: 3px 10px;
      border-radius: 999px;
      font-size: 17px;
      letter-spacing: 0.5px;
    }

    /* Stage Area */
    .stage {
      position: relative;
      width: 100%;
      height: 200px;
      background: linear-gradient(180deg, #ecfdf5 0%, #dcfce7 100%);
      border-radius: 20px;
      border: 2px solid #86efac;
      display: flex;
      align-items: flex-end;
      justify-content: space-around;
      padding: 0 16px 20px;
      overflow: visible;
    }

    /* Path line */
    .path-line {
      position: absolute;
      bottom: 52px;
      left: 12%;
      right: 12%;
      height: 6px;
      background: repeating-linear-gradient(90deg, #bbf7d0, #bbf7d0 10px, transparent 10px, transparent 18px);
      z-index: 1;
    }

    /* Stepping Stones */
    .stone-col {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      flex: 1;
      max-width: 110px;
      cursor: pointer;
    }

    .stomp-bubble {
      position: absolute;
      top: -66px;
      background: #ffedd5;
      color: #ea580c;
      border: 2px solid #fb923c;
      font-weight: 900;
      font-size: 13px;
      padding: 3px 8px;
      border-radius: 12px;
      box-shadow: 0 4px 10px rgba(234, 88, 12, 0.2);
      opacity: 0;
      transform: translateY(6px) scale(0.85);
      transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
      pointer-events: none;
      white-space: nowrap;
    }
    .stomp-bubble::after {
      content: '';
      position: absolute;
      bottom: -6px;
      left: 50%;
      transform: translateX(-50%);
      border-width: 6px 5px 0 5px;
      border-style: solid;
      border-color: #fb923c transparent transparent transparent;
    }

    .sneaker-slot {
      position: absolute;
      top: -46px;
      font-size: 34px;
      opacity: 0;
      transform: translateY(-8px);
      transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
      pointer-events: none;
      filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15));
    }

    .stone {
      width: 100%;
      height: 64px;
      background: #ffffff;
      border: 3px solid #cbd5e1;
      border-radius: 18px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      box-shadow: 0 4px 0 #94a3b8;
      transition: border-color 0.25s, box-shadow 0.25s, background-color 0.25s;
    }

    .syllable-text {
      font-size: 20px;
      font-weight: 800;
      color: #334155;
      line-height: 1;
    }

    .beat-num {
      font-size: 11px;
      font-weight: 700;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    /* Active Stone State */
    .stone-col.active .stomp-bubble {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
    .stone-col.active .sneaker-slot {
      opacity: 1;
      transform: translateY(0);
    }
    .stone-col.active .stone {
      background: #ffedd5;
      border-color: #f97316;
      box-shadow: 0 4px 0 #ea580c, 0 0 14px rgba(249, 115, 22, 0.4);
    }
    .stone-col.active .syllable-text {
      color: #ea580c;
    }
    .stone-col.active .beat-num {
      color: #c2410c;
    }

    /* Summary Result Badge */
    .result-badge {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: #ffffff;
      border: 2px solid #fdba74;
      border-radius: 999px;
      padding: 8px 18px;
      box-shadow: 0 2px 8px rgba(249, 115, 22, 0.12);
    }
    .result-text {
      font-size: 16px;
      font-weight: 800;
      color: #ea580c;
    }
    .result-dots {
      display: flex;
      gap: 4px;
    }
    .result-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #fed7aa;
      transition: background-color 0.25s, transform 0.25s;
    }
    .result-dot.lit {
      background: #ea580c;
      transform: scale(1.25);
    }

    /* Controls Bar */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
      width: 100%;
    }
    .btn {
      background: #ffffff;
      border: 2px solid #bbf7d0;
      color: #166534;
      font-size: 14px;
      font-weight: 700;
      padding: 7px 14px;
      border-radius: 12px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      transition: background-color 0.15s, border-color 0.15s;
      box-shadow: 0 2px 4px rgba(0,0,0,0.04);
    }
    .btn:active {
      transform: translateY(1px);
    }
    .btn-step {
      padding: 7px 12px;
    }
    .btn-step.selected {
      background: #ea580c;
      border-color: #ea580c;
      color: #ffffff;
    }
    .btn-primary {
      background: #22c55e;
      border-color: #16a34a;
      color: #ffffff;
    }
  </style>
</head>
<body>

  <div class="app-wrap">
    
    <div class="word-header">
      <span>Name:</span>
      <div class="word-badge">Ol • i • ver</div>
    </div>

    
    <div class="stage">
      <div class="path-line"></div>

      
      <div class="stone-col active" id="stone0" onclick="goToStep(0)">
        <div class="stomp-bubble">💥 STOMP 1!</div>
        <div class="sneaker-slot">👟</div>
        <div class="stone">
          <div class="syllable-text">Ol</div>
          <div class="beat-num">Beat 1</div>
        </div>
      </div>

      
      <div class="stone-col" id="stone1" onclick="goToStep(1)">
        <div class="stomp-bubble">💥 STOMP 2!</div>
        <div class="sneaker-slot">👟</div>
        <div class="stone">
          <div class="syllable-text">i</div>
          <div class="beat-num">Beat 2</div>
        </div>
      </div>

      
      <div class="stone-col" id="stone2" onclick="goToStep(2)">
        <div class="stomp-bubble">💥 STOMP 3!</div>
        <div class="sneaker-slot">👟</div>
        <div class="stone">
          <div class="syllable-text">ver</div>
          <div class="beat-num">Beat 3</div>
        </div>
      </div>
    </div>

    
    <div class="result-badge">
      <div class="result-dots">
        <div class="result-dot lit" id="dot0"></div>
        <div class="result-dot" id="dot1"></div>
        <div class="result-dot" id="dot2"></div>
      </div>
      <div class="result-text" id="badgeText">= 3 Stomps! (3 Syllables)</div>
    </div>

    
    <div class="controls">
      <button class="btn btn-primary" id="playBtn" onclick="toggleAuto()">
        <span id="playIcon">⏸</span> <span id="playLabel">Pause</span>
      </button>
      <button class="btn btn-step selected" id="btn0" onclick="goToStep(0)">1: Ol</button>
      <button class="btn btn-step" id="btn1" onclick="goToStep(1)">2: i</button>
      <button class="btn btn-step" id="btn2" onclick="goToStep(2)">3: ver</button>
      <button class="btn" id="soundBtn" onclick="toggleSound()">
        <span id="soundIcon">🔊</span> Sound
      </button>
    </div>
  </div>

  <script>
    let currentStep = 0;
    let isPlaying = true;
    let soundEnabled = true;
    let timer = null;
    const totalSteps = 3;

    // Friendly pleasant synth tone for beat stomps
    const tones = [261.63, 329.63, 392.00]; // C4, E4, G4

    function playStompSound(stepIndex) {
      if (!soundEnabled) return;
      try {
        const AudioContext = window.AudioContext || window.webkitAudioContext;
        if (!AudioContext) return;
        const ctx = new AudioContext();
        if (ctx.state === 'suspended') {
          ctx.resume();
        }
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.type = 'triangle';
        osc.frequency.setValueAtTime(tones[stepIndex], ctx.currentTime);
        gain.gain.setValueAtTime(0.3, ctx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.35);
        osc.connect(gain);
        gain.connect(ctx.destination);
        osc.start();
        osc.stop(ctx.currentTime + 0.35);
      } catch (e) {
        // AudioContext restricted or unavailable
      }
    }

    function render() {
      for (let i = 0; i < totalSteps; i++) {
        const stone = document.getElementById('stone' + i);
        const btn = document.getElementById('btn' + i);
        const dot = document.getElementById('dot' + i);

        if (i === currentStep) {
          stone.classList.add('active');
          btn.classList.add('selected');
          dot.classList.add('lit');
        } else {
          stone.classList.remove('active');
          btn.classList.remove('selected');
          dot.classList.remove('lit');
        }
      }
    }

    function goToStep(index, playAudio = true) {
      currentStep = index;
      render();
      if (playAudio) {
        playStompSound(index);
      }
    }

    function nextStep() {
      currentStep = (currentStep + 1) % totalSteps;
      goToStep(currentStep, true);
    }

    function startAuto() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, 1800);
      isPlaying = true;
      document.getElementById('playIcon').textContent = '⏸';
      document.getElementById('playLabel').textContent = 'Pause';
    }

    function stopAuto() {
      if (timer) clearInterval(timer);
      timer = null;
      isPlaying = false;
      document.getElementById('playIcon').textContent = '▶';
      document.getElementById('playLabel').textContent = 'Play';
    }

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

    function toggleSound() {
      soundEnabled = !soundEnabled;
      const soundBtn = document.getElementById('soundBtn');
      const soundIcon = document.getElementById('soundIcon');
      if (soundEnabled) {
        soundIcon.textContent = '🔊';
        playStompSound(currentStep);
      } else {
        soundIcon.textContent = '🔇';
      }
    }

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

Clapping and Counting Word Parts in Names

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

    body {
      width: 100vw;
      min-height: 100vh;
      background-color: #f0fdf4;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Comic Sans MS", sans-serif;
      color: #0f172a;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 12px;
      overflow-x: hidden;
    }

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

    /* Top Selector & Rule */
    .header-section {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      width: 100%;
    }

    .pill-group {
      display: inline-flex;
      background: #dcfce7;
      padding: 4px;
      border-radius: 999px;
      gap: 4px;
      border: 1px solid #bbf7d0;
    }

    .pill-btn {
      border: none;
      background: transparent;
      padding: 7px 20px;
      border-radius: 999px;
      font-size: 15px;
      font-weight: 700;
      color: #166534;
      cursor: pointer;
      transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }

    .pill-btn.active {
      background: #16a34a;
      color: #ffffff;
      box-shadow: 0 2px 8px rgba(22, 163, 74, 0.35);
    }

    .badge-rule {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 700;
      color: #15803d;
      background: #ffffff;
      padding: 4px 14px;
      border-radius: 999px;
      border: 1.5px solid #86efac;
      box-shadow: 0 2px 6px rgba(34, 197, 94, 0.1);
    }

    .badge-icon {
      font-size: 14px;
    }

    /* Main Stage */
    .stage {
      display: grid;
      grid-template-columns: 1fr 1fr;
      width: 100%;
      align-items: center;
      justify-items: center;
      gap: 12px;
      background: rgba(255, 255, 255, 0.6);
      padding: 12px 10px;
      border-radius: 20px;
      border: 1.5px dashed #86efac;
    }

    /* Left Zone: Character illustration */
    .char-zone {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      position: relative;
    }

    .char-svg {
      width: 100%;
      max-width: 220px;
      height: auto;
      max-height: 190px;
      overflow: visible;
      filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.05));
    }

    .zone-label {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.6px;
      color: #166534;
      margin-top: 2px;
    }

    /* Drop Motion Animation */
    .drop-motion {
      transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
      transform: translateY(0);
    }

    .drop-motion.dropped {
      transform: translateY(12px);
    }

    .mouth-open {
      opacity: 0;
      transition: opacity 0.15s ease;
    }

    .mouth-open.show {
      opacity: 1;
    }

    .mouth-closed {
      transition: opacity 0.15s ease;
    }

    .mouth-closed.hide {
      opacity: 0;
    }

    .arrow-indicator {
      opacity: 0;
      transition: opacity 0.2s ease, transform 0.2s ease;
      transform: translateY(-4px);
    }

    .arrow-indicator.show {
      opacity: 1;
      transform: translateY(0);
    }

    /* Right Zone: Syllable Drums Counter */
    .drums-zone {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      gap: 10px;
    }

    .drums-wrapper {
      display: flex;
      gap: 12px;
      align-items: center;
      justify-content: center;
      min-height: 100px;
      width: 100%;
    }

    .drum-pad {
      width: 82px;
      height: 82px;
      border-radius: 50%;
      background: #ffffff;
      border: 3.5px solid #86efac;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 12px rgba(22, 163, 74, 0.12);
      transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
      cursor: pointer;
    }

    .drum-text {
      font-size: 20px;
      font-weight: 800;
      color: #1e293b;
      line-height: 1.1;
    }

    .drum-sub {
      font-size: 10px;
      font-weight: 800;
      color: #15803d;
      background: #dcfce7;
      padding: 1px 6px;
      border-radius: 8px;
      margin-top: 3px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .drum-pad.hit {
      background: #22c55e;
      border-color: #15803d;
      box-shadow: 0 0 20px rgba(34, 197, 94, 0.6), inset 0 0 8px rgba(255, 255, 255, 0.4);
      transform: translateY(-2px);
    }

    .drum-pad.hit .drum-text {
      color: #ffffff;
    }

    .drum-pad.hit .drum-sub {
      background: #ffffff;
      color: #166534;
    }

    .count-pill {
      font-size: 13px;
      font-weight: 800;
      color: #166534;
      background: #dcfce7;
      padding: 5px 14px;
      border-radius: 999px;
      border: 1px solid #86efac;
      text-align: center;
    }

    /* Bottom Action */
    .bottom-bar {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      width: 100%;
    }

    .action-btn {
      background: #16a34a;
      color: #ffffff;
      border: none;
      padding: 12px 36px;
      font-size: 17px;
      font-weight: 800;
      border-radius: 999px;
      cursor: pointer;
      box-shadow: 0 4px 14px rgba(22, 163, 74, 0.35);
      display: inline-flex;
      align-items: center;
      gap: 10px;
      transition: background-color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
    }

    .action-btn:hover {
      background: #15803d;
      box-shadow: 0 6px 16px rgba(22, 163, 74, 0.45);
    }

    .action-btn:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      box-shadow: none;
    }

    .hint-text {
      font-size: 11px;
      font-weight: 600;
      color: #15803d;
    }

    @media (max-width: 420px) {
      .stage {
        gap: 8px;
        padding: 8px 6px;
      }
      .drum-pad {
        width: 70px;
        height: 70px;
      }
      .drum-text {
        font-size: 17px;
      }
      .pill-btn {
        padding: 6px 14px;
        font-size: 14px;
      }
      .action-btn {
        padding: 10px 28px;
        font-size: 15px;
      }
    }
  </style>
</head>
<body>

  <div class="container">
    
    <div class="header-section">
      <div class="pill-group">
        <button id="btnSam" class="pill-btn active" onclick="selectWord('sam')">Sam (1 part)</button>
        <button id="btnMaya" class="pill-btn" onclick="selectWord('maya')">Ma-ya (2 parts)</button>
      </div>
      <div class="badge-rule">
        <span class="badge-icon">👇</span>
        <span>1 Chin Drop = 1 Word Part</span>
      </div>
    </div>

    
    <div class="stage">
      
      <div class="char-zone">
        <svg class="char-svg" viewBox="0 0 200 190" fill="none" xmlns="http://www.w3.org/2000/svg">
          
          <path d="M 45,190 C 45,160 70,148 100,148 C 130,148 155,160 155,190 Z" fill="#38bdf8" />
          
          <path d="M 85,148 Q 100,158 115,148" stroke="#0284c7" stroke-width="3" fill="none" stroke-linecap="round" />

          
          <path d="M 86,120 L 86,150 L 114,150 L 114,120 Z" fill="#fed7aa" />
          <path d="M 86,126 Q 100,134 114,126 L 114,132 Q 100,140 86,132 Z" fill="#fdba74" opacity="0.5" />

          
          <circle cx="70" cy="98" r="10" fill="#fed7aa" stroke="#ea580c" stroke-width="1.2" />
          <path d="M 68,95 Q 71,98 68,101" stroke="#ea580c" stroke-width="1.2" fill="none" stroke-linecap="round" />
          <path d="M 55,95 C 55,54 85,42 120,44 C 145,46 156,66 152,98 C 146,120 134,130 114,132 C 80,132 55,124 55,95 Z" fill="#fed7aa" />
          
          
          <path d="M 52,96 C 48,60 68,34 108,34 C 138,34 154,48 154,72 C 148,62 136,50 114,50 C 88,50 72,66 70,96 Z" fill="#78350f" />
          
          <path d="M 88,38 C 114,38 138,52 144,72 C 134,65 120,65 110,69 C 100,65 85,65 74,73 C 80,56 84,43 88,38 Z" fill="#9a3412" />

          
          <ellipse cx="127" cy="84" rx="4.5" ry="6.5" fill="#0f172a" />
          <circle cx="129" cy="81.5" r="1.8" fill="#ffffff" />
          <circle cx="126" cy="85.5" r="1" fill="#ffffff" />
          <path d="M 119,73 Q 128,69 135,74" stroke="#78350f" stroke-width="2.5" stroke-linecap="round" fill="none" />
          <path d="M 140,84 Q 150,90 142,96" stroke="#ea580c" stroke-width="2.5" stroke-linecap="round" fill="#fed7aa" />
          <ellipse cx="118" cy="98" rx="8" ry="4.5" fill="#fca5a5" opacity="0.65" />

          
          <path id="mouthClosed" class="mouth-closed" d="M 134,106 Q 142,106 144,108" stroke="#b91c1c" stroke-width="3" stroke-linecap="round" fill="none" />

          
          <g id="jawHand" class="drop-motion">
            
            <path id="mouthOpen" class="mouth-open" d="M 134,105 Q 146,106 144,118 Q 134,120 134,105 Z" fill="#881337" />
            <path id="tongue" class="mouth-open" d="M 135,115 Q 140,111 143,115" fill="#f87171" stroke="#f87171" stroke-width="2" stroke-linecap="round" />

            
            <path d="M 114,122 C 124,133 140,130 144,115" fill="#fed7aa" />
            <path d="M 134,115 Q 140,117 144,115" stroke="#ea580c" stroke-width="2" stroke-linecap="round" fill="none" />

            
            <path d="M 148,190 L 166,150 L 152,143 L 136,180 Z" fill="#38bdf8" />
            
            
            <path d="M 154,146 L 138,127 L 126,133 L 142,154 Z" fill="#fed7aa" />
            
            
            <path d="M 110,123 C 110,119 143,119 143,123 L 141,133 C 141,137 110,137 110,133 Z" fill="#fed7aa" stroke="#ea580c" stroke-width="2" />
            
            
            <line x1="118" y1="123" x2="118" y2="133" stroke="#ea580c" stroke-width="1.6" stroke-linecap="round" />
            <line x1="126" y1="123" x2="126" y2="133" stroke="#ea580c" stroke-width="1.6" stroke-linecap="round" />
            <line x1="134" y1="123" x2="134" y2="133" stroke="#ea580c" stroke-width="1.6" stroke-linecap="round" />
            
            
            <path d="M 140,127 C 145,127 148,131 144,135" stroke="#ea580c" stroke-width="2" stroke-linecap="round" fill="none" />
          </g>

          
          <g id="arrowIndicator" class="arrow-indicator">
            <path d="M 164,110 L 164,134" stroke="#16a34a" stroke-width="3.5" stroke-linecap="round" />
            <path d="M 158,126 L 164,134 L 170,126" stroke="#16a34a" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" />
            <text x="160" y="148" font-size="10" font-weight="900" fill="#16a34a" text-anchor="middle" font-family="system-ui">DROP</text>
          </g>
        </svg>
        <span class="zone-label">Hand Under Chin</span>
      </div>

      
      <div class="drums-zone">
        <div id="drumsContainer" class="drums-wrapper">
          
        </div>
        <div id="countSummary" class="count-pill">1 Drop = 1 Word Part</div>
      </div>
    </div>

    
    <div class="bottom-bar">
      <button id="sayBtn" class="action-btn" onclick="playCurrentWord()">
        <span>Say & Count</span>
        <span>▶</span>
      </button>
      <span class="hint-text">Watch the chin drop and drum light up!</span>
    </div>
  </div>

  <script>
    const words = {
      sam: {
        name: 'Sam',
        syllables: [{ text: 'Sam', label: '1 Drop' }],
        summary: '1 Chin Drop = 1 Word Part'
      },
      maya: {
        name: 'Ma-ya',
        syllables: [
          { text: 'Ma', label: 'Drop 1' },
          { text: 'ya', label: 'Drop 2' }
        ],
        summary: '2 Chin Drops = 2 Word Parts'
      }
    };

    let currentKey = 'sam';
    let isAnimating = false;
    let audioCtx = null;

    function getAudioContext() {
      if (!audioCtx) {
        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      }
      if (audioCtx.state === 'suspended') {
        audioCtx.resume();
      }
      return audioCtx;
    }

    function playPop(freq = 280) {
      try {
        const ctx = getAudioContext();
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        
        osc.type = 'sine';
        osc.frequency.setValueAtTime(freq, ctx.currentTime);
        osc.frequency.exponentialRampToValueAtTime(120, ctx.currentTime + 0.18);
        
        gain.gain.setValueAtTime(0.35, ctx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.18);
        
        osc.connect(gain);
        gain.connect(ctx.destination);
        
        osc.start();
        osc.stop(ctx.currentTime + 0.2);
      } catch (e) {}
    }

    function renderDrums() {
      const container = document.getElementById('drumsContainer');
      const data = words[currentKey];
      container.innerHTML = '';
      
      data.syllables.forEach((s, idx) => {
        const pad = document.createElement('div');
        pad.className = 'drum-pad';
        pad.id = `drum-${idx}`;
        pad.setAttribute('title', `Click to test ${s.text}`);
        pad.innerHTML = `
          <span class="drum-text">${s.text}</span>
          <span class="drum-sub">${s.label}</span>
        `;
        pad.onclick = () => {
          if (!isAnimating) {
            triggerChin(true);
            highlightDrum(idx, true);
            playPop(idx === 0 ? 260 : 340);
            setTimeout(() => {
              triggerChin(false);
              highlightDrum(idx, false);
            }, 500);
          }
        };
        container.appendChild(pad);
      });

      document.getElementById('countSummary').textContent = data.summary;
    }

    function selectWord(key) {
      if (isAnimating) return;
      currentKey = key;
      document.getElementById('btnSam').classList.toggle('active', key === 'sam');
      document.getElementById('btnMaya').classList.toggle('active', key === 'maya');
      renderDrums();
    }

    function triggerChin(isDropped) {
      const jaw = document.getElementById('jawHand');
      const mouthOpen = document.getElementById('mouthOpen');
      const tongue = document.getElementById('tongue');
      const mouthClosed = document.getElementById('mouthClosed');
      const arrow = document.getElementById('arrowIndicator');

      if (isDropped) {
        jaw.classList.add('dropped');
        mouthOpen.classList.add('show');
        tongue.classList.add('show');
        mouthClosed.classList.add('hide');
        arrow.classList.add('show');
      } else {
        jaw.classList.remove('dropped');
        mouthOpen.classList.remove('show');
        tongue.classList.remove('show');
        mouthClosed.classList.remove('hide');
        arrow.classList.remove('show');
      }
    }

    function highlightDrum(idx, active) {
      const pad = document.getElementById(`drum-${idx}`);
      if (pad) {
        if (active) pad.classList.add('hit');
        else pad.classList.remove('hit');
      }
    }

    function playCurrentWord() {
      if (isAnimating) return;
      isAnimating = true;
      document.getElementById('sayBtn').disabled = true;

      const sylCount = words[currentKey].syllables.length;

      if (sylCount === 1) {
        // Single Syllable ("Sam")
        setTimeout(() => {
          triggerChin(true);
          highlightDrum(0, true);
          playPop(260);
        }, 100);

        setTimeout(() => {
          triggerChin(false);
          highlightDrum(0, false);
          isAnimating = false;
          document.getElementById('sayBtn').disabled = false;
        }, 900);

      } else {
        // Two Syllables ("Ma - ya")
        // Beat 1: "Ma"
        setTimeout(() => {
          triggerChin(true);
          highlightDrum(0, true);
          playPop(260);
        }, 100);

        setTimeout(() => {
          triggerChin(false);
          highlightDrum(0, false);
        }, 600);

        // Beat 2: "ya"
        setTimeout(() => {
          triggerChin(true);
          highlightDrum(1, true);
          playPop(340);
        }, 800);

        setTimeout(() => {
          triggerChin(false);
          highlightDrum(1, false);
          isAnimating = false;
          document.getElementById('sayBtn').disabled = false;
        }, 1400);
      }
    }

    // Initialize display
    renderDrums();
  </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 {
      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;
      min-height: 100%;
      padding: 12px;
    }

    .instructions {
      font-size: 15px;
      font-weight: 700;
      color: #475569;
      margin-bottom: 12px;
      text-align: center;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .cards-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 520px;
    }

    .name-card {
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 20px;
      padding: 16px 10px 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      position: relative;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      min-height: 220px;
    }

    .name-card:active {
      transform: scale(0.98);
    }

    /* Left Card: Jack (Warm Yellow Pastel) */
    .card-jack {
      background: #fffdf0;
      border-color: #fde68a;
    }

    /* Right Card: Maya (Soft Blue Pastel) */
    .card-maya {
      background: #f0f9ff;
      border-color: #bae6fd;
    }

    .name-title {
      font-size: 26px;
      font-weight: 800;
      color: #1e2945;
      letter-spacing: 0.5px;
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .name-part {
      display: inline-block;
      transition: color 0.3s ease;
    }

    .name-dot {
      color: #94a3b8;
      font-size: 20px;
    }

    .claps-container {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      height: 70px;
      margin: 4px 0;
    }

    .clap-unit {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.9);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
      position: relative;
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease;
    }

    .card-jack .clap-unit {
      width: 64px;
      height: 64px;
    }

    .clap-emoji {
      font-size: 30px;
      line-height: 1;
      transition: transform 0.3s ease;
    }

    .card-jack .clap-emoji {
      font-size: 38px;
    }

    .claps-divider {
      color: #94a3b8;
      font-size: 18px;
      font-weight: bold;
    }

    /* Beat Active States */
    .clap-unit.active {
      transform: scale(1.18);
      box-shadow: 0 0 0 4px #22b7ff;
      background: #ffffff;
    }

    .card-jack .clap-unit.active {
      box-shadow: 0 0 0 4px #f59e0b;
    }

    .star-badge-wrap {
      position: relative;
      width: 58px;
      height: 58px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 4px;
    }

    .star-svg {
      width: 100%;
      height: 100%;
      position: absolute;
      inset: 0;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
    }

    .star-number {
      position: relative;
      z-index: 2;
      font-size: 24px;
      font-weight: 900;
      color: #ffffff;
      line-height: 1;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    }

    .tap-hint {
      font-size: 11px;
      font-weight: 700;
      color: #64748b;
      margin-top: 4px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    @media (max-width: 380px) {
      .name-title { font-size: 22px; }
      .card-jack .clap-unit { width: 54px; height: 54px; }
      .card-jack .clap-emoji { font-size: 32px; }
      .clap-unit { width: 44px; height: 44px; }
      .clap-emoji { font-size: 24px; }
      .star-badge-wrap { width: 50px; height: 50px; }
      .star-number { font-size: 20px; }
    }
  </style>
</head>
<body>

  <div class="instructions">
    <span>Tap a name to count the claps</span>
  </div>

  <div class="cards-grid">
    
    <div class="name-card card-jack" id="jackCard" onclick="playJack()">
      <div class="name-title">
        <span class="name-part" id="textJack">Jack</span>
      </div>

      <div class="claps-container">
        <div class="clap-unit" id="jackClap">
          <span class="clap-emoji">👏</span>
        </div>
      </div>

      <div class="star-badge-wrap">
        <svg class="star-svg" viewBox="0 0 100 100">
          <polygon points="50,4 64,36 98,38 72,61 79,95 50,77 21,95 28,61 2,38 36,36" fill="#FBBF24" stroke="#F59E0B" stroke-width="4" stroke-linejoin="round"/>
        </svg>
        <span class="star-number">1</span>
      </div>

      <div class="tap-hint">1 Clap</div>
    </div>

    
    <div class="name-card card-maya" id="mayaCard" onclick="playMaya()">
      <div class="name-title">
        <span class="name-part" id="textMay">May</span>
        <span class="name-dot">•</span>
        <span class="name-part" id="textA">a</span>
      </div>

      <div class="claps-container">
        <div class="clap-unit" id="mayaClap1">
          <span class="clap-emoji">👏</span>
        </div>
        <span class="claps-divider">•</span>
        <div class="clap-unit" id="mayaClap2">
          <span class="clap-emoji">👏</span>
        </div>
      </div>

      <div class="star-badge-wrap">
        <svg class="star-svg" viewBox="0 0 100 100">
          <polygon points="50,4 64,36 98,38 72,61 79,95 50,77 21,95 28,61 2,38 36,36" fill="#38BDF8" stroke="#0284C7" stroke-width="4" stroke-linejoin="round"/>
        </svg>
        <span class="star-number">2</span>
      </div>

      <div class="tap-hint">2 Claps</div>
    </div>
  </div>

  <script>
    let isAnimating = false;

    function playTone(frequency, duration = 0.12) {
      try {
        const AudioContext = window.AudioContext || window.webkitAudioContext;
        if (!AudioContext) return;
        const ctx = new AudioContext();
        
        // Gentle percussive woodblock / clap pop
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();

        osc.type = 'triangle';
        osc.frequency.setValueAtTime(frequency, ctx.currentTime);
        osc.frequency.exponentialRampToValueAtTime(80, ctx.currentTime + duration);

        gain.gain.setValueAtTime(0.3, ctx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + duration);

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

        osc.start();
        osc.stop(ctx.currentTime + duration);
      } catch (e) {}
    }

    function resetJack() {
      document.getElementById('jackClap').classList.remove('active');
      document.getElementById('textJack').style.color = '#1e2945';
    }

    function resetMaya() {
      document.getElementById('mayaClap1').classList.remove('active');
      document.getElementById('mayaClap2').classList.remove('active');
      document.getElementById('textMay').style.color = '#1e2945';
      document.getElementById('textA').style.color = '#1e2945';
    }

    function playJack() {
      if (isAnimating) return;
      isAnimating = true;
      resetJack();
      resetMaya();

      // Beat 1
      playTone(420);
      const clap = document.getElementById('jackClap');
      const text = document.getElementById('textJack');
      clap.classList.add('active');
      text.style.color = '#d97706';

      setTimeout(() => {
        resetJack();
        isAnimating = false;
      }, 700);
    }

    function playMaya() {
      if (isAnimating) return;
      isAnimating = true;
      resetJack();
      resetMaya();

      const clap1 = document.getElementById('mayaClap1');
      const clap2 = document.getElementById('mayaClap2');
      const textMay = document.getElementById('textMay');
      const textA = document.getElementById('textA');

      // Beat 1: "May"
      playTone(380);
      clap1.classList.add('active');
      textMay.style.color = '#0284c7';

      // Beat 2: "a"
      setTimeout(() => {
        clap1.classList.remove('active');
        textMay.style.color = '#1e2945';

        playTone(480);
        clap2.classList.add('active');
        textA.style.color = '#0284c7';

        setTimeout(() => {
          resetMaya();
          isAnimating = false;
        }, 600);
      }, 550);
    }

    // Auto-demonstrate Maya on gentle loop to show 2 beats visually
    let autoDemoCount = 0;
    const initialTimer = setInterval(() => {
      if (autoDemoCount === 0) {
        // Visual cue only without sound until user interacts
        const clap1 = document.getElementById('mayaClap1');
        const clap2 = document.getElementById('mayaClap2');
        clap1.classList.add('active');
        setTimeout(() => {
          clap1.classList.remove('active');
          clap2.classList.add('active');
          setTimeout(() => {
            clap2.classList.remove('active');
          }, 450);
        }, 450);
      }
      autoDemoCount++;
      if (autoDemoCount > 2) clearInterval(initialTimer);
    }, 3200);
  </script>
</body>
</html>

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

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

    /* Main Stage Container */
    .stage {
      position: relative;
      width: 100%;
      max-width: 480px;
      height: 300px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
    }

    /* Floating Notes & Match Badge */
    .notes-layer {
      position: absolute;
      top: 10px;
      left: 0;
      right: 0;
      display: flex;
      justify-content: space-around;
      font-size: 24px;
      opacity: 0;
      transition: opacity 0.4s ease, transform 0.4s ease;
      transform: translateY(6px);
      pointer-events: none;
    }

    .notes-layer.show {
      opacity: 1;
      transform: translateY(0);
    }

    .star-badge {
      position: absolute;
      top: 24px;
      background: #fbbf24;
      color: #78350f;
      font-weight: 800;
      font-size: 18px;
      padding: 8px 18px;
      border-radius: 999px;
      box-shadow: 0 4px 12px rgba(251, 191, 36, 0.45);
      border: 3px solid #ffffff;
      opacity: 0;
      transform: scale(0.7);
      transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
      z-index: 10;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .star-badge.show {
      opacity: 1;
      transform: scale(1);
    }

    /* Speech Bubbles */
    .speech-group {
      position: absolute;
      top: 70px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding: 0 10px;
      z-index: 5;
    }

    .speech-bubble {
      background: #ffffff;
      border-radius: 18px;
      padding: 8px 14px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      border: 3px solid #e2e8f0;
      font-size: 20px;
      font-weight: 800;
      opacity: 0.35;
      transform: scale(0.9);
      transition: all 0.35s ease;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .speech-bubble.active {
      opacity: 1;
      transform: scale(1.05);
      border-color: #fb923c;
      box-shadow: 0 6px 16px rgba(251, 146, 60, 0.3);
    }

    .speech-bubble.box-active {
      opacity: 1;
      transform: scale(1.05);
      border-color: #a855f7;
      box-shadow: 0 6px 16px rgba(168, 85, 247, 0.3);
    }

    .sound-chunk {
      color: #ea580c;
      background: #ffedd5;
      padding: 2px 6px;
      border-radius: 8px;
    }

    .sound-chunk-purple {
      color: #9333ea;
      background: #f3e8ff;
      padding: 2px 6px;
      border-radius: 8px;
    }

    /* Fox & Box Composite Visual */
    .character-wrap {
      position: relative;
      width: 190px;
      height: 180px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
    }

    .fox {
      font-size: 80px;
      line-height: 1;
      position: absolute;
      bottom: 60px;
      z-index: 2;
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
      transform: translateY(12px);
    }

    .fox.peek {
      transform: translateY(-16px);
    }

    .box-container {
      position: relative;
      width: 140px;
      height: 90px;
      background: #a855f7;
      border-radius: 16px;
      z-index: 3;
      box-shadow: 0 8px 20px rgba(168, 85, 247, 0.35);
      display: flex;
      align-items: center;
      justify-content: center;
      border: 4px solid #9333ea;
    }

    /* Box Ribbon */
    .box-ribbon-v {
      position: absolute;
      width: 24px;
      height: 100%;
      background: #fde047;
    }

    .box-ribbon-h {
      position: absolute;
      width: 100%;
      height: 20px;
      background: #fde047;
    }

    .box-icon {
      position: relative;
      z-index: 4;
      font-size: 32px;
    }

    /* Rhyme Bar Highlight */
    .rhyme-bar {
      margin-top: 8px;
      background: #ffffff;
      padding: 6px 16px;
      border-radius: 12px;
      font-size: 15px;
      font-weight: 700;
      color: #6b7280;
      border: 2px solid #fed7aa;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .rhyme-bar .highlight {
      color: #ea580c;
      font-size: 17px;
    }

    /* Step Controls */
    .controls {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
      margin-top: 12px;
      width: 100%;
      max-width: 480px;
    }

    .btn {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      color: #475569;
      font-size: 14px;
      font-weight: 700;
      padding: 8px 14px;
      border-radius: 10px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
    }

    .btn:active {
      transform: translateY(1px);
    }

    .btn.active {
      background: #f97316;
      border-color: #ea580c;
      color: #ffffff;
      box-shadow: 0 4px 10px rgba(249, 115, 22, 0.35);
    }

    .sound-btn {
      background: #fef08a;
      border-color: #facc15;
      color: #854d0e;
    }
  </style>
</head>
<body>

  <div class="stage">
    
    <div class="notes-layer" id="notes">
      <span>🎵</span>
      <span>🎶</span>
      <span>🎵</span>
    </div>

    
    <div class="star-badge" id="starBadge">
      ✦ Match! ✦
    </div>

    
    <div class="speech-group">
      <div class="speech-bubble" id="foxBubble">
        F-<span class="sound-chunk">OX</span> 🦊
      </div>
      <div class="speech-bubble" id="boxBubble">
        B-<span class="sound-chunk-purple">OX</span> 📦
      </div>
    </div>

    
    <div class="character-wrap">
      <div class="fox" id="foxChar">🦊</div>
      <div class="box-container" id="boxChar">
        <div class="box-ribbon-v"></div>
        <div class="box-ribbon-h"></div>
        <div class="box-icon">🎁</div>
      </div>
    </div>

    
    <div class="rhyme-bar" id="rhymeBar">
      Both end with <span class="highlight">-OX</span>!
    </div>
  </div>

  
  <div class="controls">
    <button class="btn active" id="btnFox" onclick="setStep(0)">1. Fox 🦊</button>
    <button class="btn" id="btnBox" onclick="setStep(1)">2. Box 📦</button>
    <button class="btn" id="btnMatch" onclick="setStep(2)">3. Rhyme! 🎵</button>
    <button class="btn sound-btn" id="btnSound" onclick="triggerAudio()">🔊 Listen</button>
  </div>

  <script>
    let currentStep = 0;
    let autoInterval = null;

    const foxChar = document.getElementById('foxChar');
    const foxBubble = document.getElementById('foxBubble');
    const boxBubble = document.getElementById('boxBubble');
    const notes = document.getElementById('notes');
    const starBadge = document.getElementById('starBadge');
    const rhymeBar = document.getElementById('rhymeBar');

    const btnFox = document.getElementById('btnFox');
    const btnBox = document.getElementById('btnBox');
    const btnMatch = document.getElementById('btnMatch');

    // Web Audio Tone Synthesis
    function playTone(freq, dur = 0.25, type = 'sine') {
      try {
        const AudioCtx = window.AudioContext || window.webkitAudioContext;
        if (!AudioCtx) return;
        const ctx = new AudioCtx();
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.type = type;
        osc.frequency.setValueAtTime(freq, ctx.currentTime);
        gain.gain.setValueAtTime(0.2, ctx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + dur);
        osc.connect(gain);
        gain.connect(ctx.destination);
        osc.start();
        osc.stop(ctx.currentTime + dur);
      } catch (e) {}
    }

    function soundStep(step) {
      if (step === 0) {
        // High playful blip for Fox
        playTone(523.25, 0.2); // C5
        setTimeout(() => playTone(659.25, 0.3), 150); // E5
      } else if (step === 1) {
        // Warm tone for Box
        playTone(392.00, 0.2); // G4
        setTimeout(() => playTone(659.25, 0.3), 150); // E5
      } else {
        // Cheerful arpeggio for Match!
        playTone(523.25, 0.15);
        setTimeout(() => playTone(659.25, 0.15), 120);
        setTimeout(() => playTone(783.99, 0.15), 240);
        setTimeout(() => playTone(1046.50, 0.35), 360);
      }
    }

    function setStep(step, userTriggered = false) {
      currentStep = step;

      // Update button states
      btnFox.classList.toggle('active', step === 0);
      btnBox.classList.toggle('active', step === 1);
      btnMatch.classList.toggle('active', step === 2);

      if (step === 0) {
        foxChar.classList.add('peek');
        foxBubble.classList.add('active');
        boxBubble.classList.remove('box-active');
        notes.classList.remove('show');
        starBadge.classList.remove('show');
        rhymeBar.innerHTML = 'Listen: <span class="highlight">F - OX</span>';
      } else if (step === 1) {
        foxChar.classList.remove('peek');
        foxBubble.classList.remove('active');
        boxBubble.classList.add('box-active');
        notes.classList.remove('show');
        starBadge.classList.remove('show');
        rhymeBar.innerHTML = 'Listen: <span class="highlight">B - OX</span>';
      } else {
        foxChar.classList.add('peek');
        foxBubble.classList.add('active');
        boxBubble.classList.add('box-active');
        notes.classList.add('show');
        starBadge.classList.add('show');
        rhymeBar.innerHTML = 'Same ending sound: <span class="highlight">-OX = -OX!</span>';
      }

      if (userTriggered) {
        soundStep(step);
        resetAutoLoop();
      }
    }

    function triggerAudio() {
      soundStep(currentStep);
    }

    function autoAdvance() {
      const next = (currentStep + 1) % 3;
      setStep(next, false);
    }

    function resetAutoLoop() {
      clearInterval(autoInterval);
      autoInterval = setInterval(autoAdvance, 3200);
    }

    // Initialize at step 0 and start calm loop
    setStep(0);
    resetAutoLoop();
  </script>
</body>
</html>

Identifying Words That Rhyme

<!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%;
      background-color: #eef7ff;
      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: 16px;
      user-select: none;
      -webkit-user-select: none;
    }

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

    /* Top Illustration */
    .illustration-wrap {
      position: relative;
      width: 150px;
      height: 140px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .cat-svg {
      width: 100%;
      height: 100%;
      filter: drop-shadow(0 4px 10px rgba(34, 183, 255, 0.15));
    }

    /* Ear Sound Wave Indicator */
    .ear-wave-badge {
      position: absolute;
      top: 10px;
      right: -8px;
      background: #ffffff;
      border: 2px solid #bae6fd;
      border-radius: 50%;
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
      cursor: pointer;
    }

    .pulse-ring {
      position: absolute;
      inset: -4px;
      border: 2px solid #38bdf8;
      border-radius: 50%;
      opacity: 0;
      animation: pulse 2.4s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
      pointer-events: none;
    }

    @keyframes pulse {
      0% { transform: scale(0.85); opacity: 0.9; }
      70% { transform: scale(1.35); opacity: 0; }
      100% { transform: scale(1.35); opacity: 0; }
    }

    /* Rhyme Word Blocks */
    .words-container {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      width: 100%;
    }

    .word-card {
      background: #ffffff;
      border: 2px solid #dbeafe;
      border-radius: 16px;
      padding: 10px 18px;
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 32px;
      font-weight: 800;
      box-shadow: 0 4px 12px rgba(30, 41, 69, 0.05);
      letter-spacing: 0.5px;
    }

    .onset {
      color: #64748b;
    }

    .rime-bubble {
      background: #fef08a;
      color: #854d0e;
      border: 2px solid #facc15;
      border-radius: 12px;
      padding: 2px 10px;
      display: inline-flex;
      align-items: center;
      position: relative;
      animation: gentle-bob 2.4s ease-in-out infinite;
    }

    .word-card:nth-child(3) .rime-bubble {
      animation-delay: 0.2s;
    }

    @keyframes gentle-bob {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-4px); }
    }

    .sparkle {
      position: absolute;
      font-size: 13px;
      top: -10px;
      right: -6px;
      animation: spin-twinkle 2.4s ease-in-out infinite;
    }

    @keyframes spin-twinkle {
      0%, 100% { opacity: 0.4; transform: scale(0.8); }
      50% { opacity: 1; transform: scale(1.2) rotate(15deg); }
    }

    .match-icon {
      font-size: 24px;
      color: #38bdf8;
      font-weight: bold;
    }

    /* Result Banner */
    .result-pill {
      background: #e0f2fe;
      border: 2px solid #7dd3fc;
      color: #0369a1;
      padding: 8px 20px;
      border-radius: 999px;
      font-size: 19px;
      font-weight: 800;
      display: flex;
      align-items: center;
      gap: 8px;
      box-shadow: 0 2px 8px rgba(3, 105, 161, 0.08);
    }

    /* Interactive Audio Button */
    .listen-btn {
      background: #38bdf8;
      color: #ffffff;
      border: none;
      border-radius: 12px;
      padding: 8px 18px;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 4px 10px rgba(56, 189, 248, 0.35);
      transition: background-color 0.2s, box-shadow 0.2s;
    }

    .listen-btn:hover {
      background: #0284c7;
      box-shadow: 0 4px 12px rgba(2, 132, 199, 0.4);
    }

    .listen-btn:active {
      background: #0369a1;
    }
  </style>
</head>
<body>
  <div class="main-stage">
    
    
    <div class="illustration-wrap">
      <svg class="cat-svg" viewBox="0 0 160 150" fill="none" xmlns="http://www.w3.org/2000/svg">
        
        <polygon points="38,62 20,24 60,44" fill="#fb923c" stroke="#ea580c" stroke-width="3" stroke-linejoin="round"/>
        <polygon points="40,56 28,32 54,46" fill="#fecdd3"/>
        
        <polygon points="122,62 140,24 100,44" fill="#fb923c" stroke="#ea580c" stroke-width="3" stroke-linejoin="round"/>
        <polygon points="120,56 132,32 106,46" fill="#fecdd3"/>

        
        <circle cx="80" cy="85" r="48" fill="#fdba74" stroke="#ea580c" stroke-width="3"/>
        
        
        <ellipse cx="80" cy="98" rx="24" ry="18" fill="#ffffff"/>

        
        <polygon points="80,10 52,60 108,60" fill="#a855f7" stroke="#7e22ce" stroke-width="3" stroke-linejoin="round"/>
        
        <circle cx="80" cy="28" r="4" fill="#facc15"/>
        <circle cx="70" cy="45" r="4" fill="#38bdf8"/>
        <circle cx="90" cy="45" r="4" fill="#f43f5e"/>
        
        <circle cx="80" cy="8" r="7" fill="#facc15" stroke="#ca8a04" stroke-width="2"/>
        
        
        <ellipse cx="62" cy="80" rx="5" ry="7" fill="#1e293b"/>
        <circle cx="60" cy="78" r="2" fill="#ffffff"/>
        <ellipse cx="98" cy="80" rx="5" ry="7" fill="#1e293b"/>
        <circle cx="96" cy="78" r="2" fill="#ffffff"/>

        
        <ellipse cx="50" cy="92" rx="6" ry="4" fill="#f43f5e" opacity="0.4"/>
        <ellipse cx="110" cy="92" rx="6" ry="4" fill="#f43f5e" opacity="0.4"/>

        
        <polygon points="80,92 75,87 85,87" fill="#f43f5e"/>
        <path d="M75,94 Q80,99 80,94 Q80,99 85,94" stroke="#1e293b" stroke-width="2" stroke-linecap="round" fill="none"/>
        
        
        <line x1="36" y1="88" x2="20" y2="86" stroke="#ea580c" stroke-width="2" stroke-linecap="round"/>
        <line x1="36" y1="94" x2="22" y2="98" stroke="#ea580c" stroke-width="2" stroke-linecap="round"/>
        <line x1="124" y1="88" x2="140" y2="86" stroke="#ea580c" stroke-width="2" stroke-linecap="round"/>
        <line x1="124" y1="94" x2="138" y2="98" stroke="#ea580c" stroke-width="2" stroke-linecap="round"/>
      </svg>

      
      <div class="ear-wave-badge" id="earBadge" title="Listen to rhyme">
        <div class="pulse-ring"></div>
        👂
      </div>
    </div>

    
    <div class="words-container">
      <div class="word-card">
        <span class="onset">c</span>
        <div class="rime-bubble">
          -at
          <span class="sparkle">✨</span>
        </div>
      </div>

      <div class="match-icon">=</div>

      <div class="word-card">
        <span class="onset">h</span>
        <div class="rime-bubble">
          -at
          <span class="sparkle">✨</span>
        </div>
      </div>
    </div>

    
    <div class="result-pill">
      <span>Cat &amp; Hat = Rhyme!</span>
      <span>🎵</span>
    </div>

    
    <button class="listen-btn" id="playAudioBtn">
      <span>Hear Rhyme</span>
      <span>🔊</span>
    </button>

  </div>

  <script>
    function playRhymeChime() {
      try {
        const AudioContext = window.AudioContext || window.webkitAudioContext;
        if (!AudioContext) return;
        const ctx = new AudioContext();

        const notes = [
          { f: 392.00, t: 0.0, d: 0.25 }, // G4 ("c-")
          { f: 523.25, t: 0.22, d: 0.45 }, // C5 ("-AT")
          { f: 392.00, t: 0.70, d: 0.25 }, // G4 ("h-")
          { f: 523.25, t: 0.92, d: 0.55 }  // C5 ("-AT")
        ];

        notes.forEach(n => {
          const osc = ctx.createOscillator();
          const gain = ctx.createGain();
          osc.type = 'triangle';
          osc.frequency.setValueAtTime(n.f, ctx.currentTime + n.t);
          
          gain.gain.setValueAtTime(0.001, ctx.currentTime + n.t);
          gain.gain.exponentialRampToValueAtTime(0.25, ctx.currentTime + n.t + 0.04);
          gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + n.t + n.d);

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

          osc.start(ctx.currentTime + n.t);
          osc.stop(ctx.currentTime + n.t + n.d);
        });
      } catch (e) {
        // Fallback gracefully if Web Audio is unavailable
      }
    }

    document.getElementById('playAudioBtn').addEventListener('click', playRhymeChime);
    document.getElementById('earBadge').addEventListener('click', playRhymeChime);
  </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>Rhyming Words</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: #f8fafc;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
    }

    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 560px;
    }

    .rhyme-card {
      background: #ffffff;
      border-radius: 20px;
      padding: 14px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

    .rhyme-card:active {
      transform: scale(0.97);
    }

    /* Left Card: Rhyme */
    .rhyme-card.yes {
      border: 3.5px solid #22c55e;
      background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 40%);
    }

    /* Right Card: No Rhyme */
    .rhyme-card.no {
      border: 3.5px solid #f97316;
      background: linear-gradient(180deg, #fff7ed 0%, #ffffff 40%);
    }

    .pair {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
    }

    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
    }

    .emoji {
      font-size: 42px;
      line-height: 1.1;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
    }

    .word {
      font-size: 18px;
      font-weight: 800;
      color: #334155;
      margin-top: 2px;
    }

    .highlight-yes {
      color: #16a34a;
      background: #dcfce7;
      padding: 0 4px;
      border-radius: 6px;
    }

    .highlight-no-1 {
      color: #ea580c;
      background: #ffedd5;
      padding: 0 4px;
      border-radius: 6px;
    }

    .highlight-no-2 {
      color: #dc2626;
      background: #fee2e2;
      padding: 0 4px;
      border-radius: 6px;
    }

    .plus {
      font-size: 20px;
      font-weight: 900;
      color: #94a3b8;
    }

    .end-sound {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 16px;
      font-weight: 800;
      padding: 4px 10px;
      border-radius: 12px;
      width: 90%;
    }

    .end-sound.yes {
      background: #dcfce7;
      color: #15803d;
      border: 1.5px dashed #22c55e;
    }

    .end-sound.no {
      background: #ffedd5;
      color: #c2410c;
      border: 1.5px dashed #f97316;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      width: 100%;
      padding: 8px 12px;
      border-radius: 14px;
      font-size: 17px;
      font-weight: 900;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }

    .badge.yes {
      background: #22c55e;
      color: #ffffff;
      box-shadow: 0 3px 0 #16a34a;
    }

    .badge.no {
      background: #ef4444;
      color: #ffffff;
      box-shadow: 0 3px 0 #b91c1c;
    }

    .hint {
      margin-top: 10px;
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    @media (max-width: 360px) {
      .emoji { font-size: 34px; }
      .word { font-size: 16px; }
      .badge { font-size: 14px; padding: 6px 8px; }
      .end-sound { font-size: 13px; }
    }
  </style>
</head>
<body>

  <div class="grid">
    
    <div class="rhyme-card yes" id="cardYes" onclick="playMatchSound()">
      <div class="pair">
        <div class="item">
          <span class="emoji">🐱</span>
          <span class="word">c<span class="highlight-yes">at</span></span>
        </div>
        <span class="plus">+</span>
        <div class="item">
          <span class="emoji">🎩</span>
          <span class="word">h<span class="highlight-yes">at</span></span>
        </div>
      </div>

      <div class="end-sound yes">
        <span>-at</span>
        <span>=</span>
        <span>-at</span>
      </div>

      <div class="badge yes">
        <span>✓</span> RHYME!
      </div>
    </div>

    
    <div class="rhyme-card no" id="cardNo" onclick="playMismatchSound()">
      <div class="pair">
        <div class="item">
          <span class="emoji">🐱</span>
          <span class="word">c<span class="highlight-no-1">at</span></span>
        </div>
        <span class="plus">+</span>
        <div class="item">
          <span class="emoji">🐶</span>
          <span class="word">d<span class="highlight-no-2">og</span></span>
        </div>
      </div>

      <div class="end-sound no">
        <span>-at</span>
        <span>≠</span>
        <span>-og</span>
      </div>

      <div class="badge no">
        <span>✕</span> NO RHYME
      </div>
    </div>
  </div>

  <div class="hint">
    <span>🔊 Tap cards to listen!</span>
  </div>

  <script>
    let audioCtx = null;

    function getAudioContext() {
      if (!audioCtx) {
        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      }
      if (audioCtx.state === 'suspended') {
        audioCtx.resume();
      }
      return audioCtx;
    }

    function playMatchSound() {
      try {
        const ctx = getAudioContext();
        const now = ctx.currentTime;
        
        // Happy ascending chord (C5 -> G5)
        [523.25, 659.25, 783.99].forEach((freq, i) => {
          const osc = ctx.createOscillator();
          const gain = ctx.createGain();
          osc.type = 'triangle';
          osc.frequency.setValueAtTime(freq, now + i * 0.08);
          gain.gain.setValueAtTime(0.2, now + i * 0.08);
          gain.gain.exponentialRampToValueAtTime(0.001, now + i * 0.08 + 0.35);
          osc.connect(gain);
          gain.connect(ctx.destination);
          osc.start(now + i * 0.08);
          osc.stop(now + i * 0.08 + 0.35);
        });
      } catch (e) {}
    }

    function playMismatchSound() {
      try {
        const ctx = getAudioContext();
        const now = ctx.currentTime;
        
        // Gentle downward boop (E4 -> C4)
        [329.63, 261.63].forEach((freq, i) => {
          const osc = ctx.createOscillator();
          const gain = ctx.createGain();
          osc.type = 'sine';
          osc.frequency.setValueAtTime(freq, now + i * 0.12);
          gain.gain.setValueAtTime(0.2, now + i * 0.12);
          gain.gain.exponentialRampToValueAtTime(0.001, now + i * 0.12 + 0.3);
          osc.connect(gain);
          gain.connect(ctx.destination);
          osc.start(now + i * 0.12);
          osc.stop(now + i * 0.12 + 0.3);
        });
      } catch (e) {}
    }
  </script>
</body>
</html>

OGE.0.RF.2

Aligned learning resources

Related diagrams