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

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

    .flow-container {
      width: 100%;
      max-width: 620px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    /* Step Cards Layout */
    .steps-row {
      display: flex;
      gap: 12px;
      width: 100%;
      position: relative;
    }

    @media (max-width: 520px) {
      .steps-row {
        flex-direction: column;
        gap: 10px;
      }
    }

    .step-card {
      flex: 1;
      background: #ffffff;
      border-radius: 14px;
      padding: 16px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 160px;
      box-shadow: 0 4px 16px rgba(30, 41, 69, 0.06), 0 1px 3px rgba(30, 41, 69, 0.04);
      border: 2px solid rgba(0, 0, 0, 0);
      cursor: pointer;
      transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
      user-select: none;
    }

    .step-card:hover {
      box-shadow: 0 6px 20px rgba(34, 183, 255, 0.15);
    }

    .step-card.active {
      border-color: #22b7ff;
      box-shadow: 0 6px 20px rgba(34, 183, 255, 0.22);
      background: #fafcff;
    }

    .step-badge {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      color: #64748b;
      padding: 3px 8px;
      background: #f1f5f9;
      border-radius: 20px;
      transition: background 0.2s ease, color 0.2s ease;
    }

    .step-card.active .step-badge {
      background: #e0f2fe;
      color: #0284c7;
    }

    /* Content Area inside Cards */
    .card-content {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      flex-grow: 1;
      margin: 10px 0;
    }

    /* Step 1 Visual */
    .word-whole {
      font-size: 22px;
      font-weight: 800;
      letter-spacing: 1px;
      color: #1e2945;
      padding: 8px 12px;
      background: #f8fafc;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
    }

    /* Step 2 Visual */
    .split-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      width: 100%;
    }

    .split-boxes {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 2px;
      position: relative;
    }

    .base-box {
      font-size: 18px;
      font-weight: 800;
      padding: 6px 9px;
      border-radius: 6px;
    }

    .base-1 {
      background: #e0f2fe;
      color: #0284c7;
      border: 1.5px solid #38bdf8;
    }

    .divider-line {
      border-left: 2px dashed #94a3b8;
      height: 28px;
      margin: 0 2px;
    }

    .base-2 {
      background: #ccfbf1;
      color: #0f766e;
      border: 1.5px solid #2dd4bf;
    }

    .base-labels {
      display: flex;
      justify-content: space-between;
      width: 100%;
      max-width: 140px;
      font-size: 11px;
      font-weight: 700;
    }

    .label-1 { color: #0284c7; }
    .label-2 { color: #0f766e; }

    /* Step 3 Visual */
    .result-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .check-icon {
      color: #10b981;
      font-size: 20px;
      font-weight: 900;
    }

    .word-final {
      font-size: 20px;
      font-weight: 800;
      color: #1e2945;
    }

    .result-emoji {
      font-size: 24px;
      line-height: 1;
    }

    /* Controller Toolbar */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 4px;
    }

    .nav-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .nav-btn:hover {
      background: #f8fafc;
      border-color: #94a3b8;
    }

    .dots-wrap {
      display: flex;
      gap: 6px;
      align-items: center;
      margin: 0 4px;
    }

    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #cbd5e1;
      border: none;
      cursor: pointer;
      padding: 0;
      transition: background 0.2s ease, transform 0.2s ease;
    }

    .dot.active {
      background: #22b7ff;
      transform: scale(1.25);
    }
  </style>
</head>
<body>

  <div class="flow-container">
    
    <div class="steps-row">
      
      
      <div class="step-card active" id="card-0" onclick="goToStep(0)">
        <span class="step-badge">Step 1</span>
        <div class="card-content">
          <div class="word-whole">backpack</div>
        </div>
      </div>

      
      <div class="step-card" id="card-1" onclick="goToStep(1)">
        <span class="step-badge">Step 2</span>
        <div class="card-content">
          <div class="split-wrap">
            <div class="split-boxes">
              <div class="base-box base-1">back</div>
              <div class="divider-line"></div>
              <div class="base-box base-2">pack</div>
            </div>
            <div class="base-labels">
              <span class="label-1">Base 1</span>
              <span class="label-2">Base 2</span>
            </div>
          </div>
        </div>
      </div>

      
      <div class="step-card" id="card-2" onclick="goToStep(2)">
        <span class="step-badge">Step 3</span>
        <div class="card-content">
          <div class="result-wrap">
            <span class="check-icon">✓</span>
            <span class="word-final">backpack</span>
            <span class="result-emoji">🎒</span>
          </div>
        </div>
      </div>

    </div>

    
    <div class="controls">
      <button class="nav-btn" onclick="prevStep()">◀</button>
      <div class="dots-wrap">
        <button class="dot active" id="dot-0" onclick="goToStep(0)" aria-label="Step 1"></button>
        <button class="dot" id="dot-1" onclick="goToStep(1)" aria-label="Step 2"></button>
        <button class="dot" id="dot-2" onclick="goToStep(2)" aria-label="Step 3"></button>
      </div>
      <button class="nav-btn" onclick="nextStep()">▶</button>
      <button class="nav-btn" id="play-btn" onclick="togglePlay()">⏸</button>
    </div>
  </div>

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

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

    function goToStep(index) {
      currentStep = index;
      updateView();
      resetInterval();
    }

    function nextStep() {
      currentStep = (currentStep + 1) % totalSteps;
      updateView();
      resetInterval();
    }

    function prevStep() {
      currentStep = (currentStep - 1 + totalSteps) % totalSteps;
      updateView();
      resetInterval();
    }

    function togglePlay() {
      isPlaying = !isPlaying;
      document.getElementById('play-btn').textContent = isPlaying ? '⏸' : '▶';
      if (isPlaying) {
        startInterval();
      } else {
        clearInterval(timer);
      }
    }

    function startInterval() {
      clearInterval(timer);
      timer = setInterval(() => {
        currentStep = (currentStep + 1) % totalSteps;
        updateView();
      }, 3200);
    }

    function resetInterval() {
      if (isPlaying) {
        startInterval();
      }
    }

    // Initialize auto-play
    startInterval();
  </script>
</body>
</html>

Decoding Compound Words by Identifying Base Words

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

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

    .word-card {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      cursor: pointer;
      transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
      user-select: none;
    }

    .word-card:hover {
      border-color: #cbd5e1;
      background-color: #fafbfc;
    }

    .word-card.active {
      border-color: #22b7ff;
      box-shadow: 0 0 0 1px #22b7ff, 0 3px 8px rgba(34, 183, 255, 0.12);
      background-color: #f8fcff;
    }

    .equation-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 6px;
    }

    .base-group {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .base-pill {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: #f1f5f9;
      padding: 4px 8px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 700;
      color: #1e2945;
      border: 1px solid rgba(0, 0, 0, 0.04);
    }

    .base-pill .emoji {
      font-size: 16px;
      line-height: 1;
    }

    .symbol {
      font-size: 14px;
      font-weight: 800;
      color: #94a3b8;
    }

    .compound-pill {
      display: inline-flex;
      align-items: center;
      padding: 4px 10px;
      border-radius: 8px;
      font-size: 15px;
      font-weight: 800;
      background: #e0f2fe;
      border: 1px solid #bae6fd;
      color: #0369a1;
      letter-spacing: 0.2px;
    }

    .compound-pill .b1 {
      color: #0284c7;
    }

    .compound-pill .b2 {
      color: #0d9488;
    }

    .meaning-box {
      font-size: 13px;
      color: #475569;
      background: #f8fafc;
      padding: 5px 10px;
      border-radius: 6px;
      border-left: 3px solid #cbd5e1;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .word-card.active .meaning-box {
      border-left-color: #22b7ff;
      color: #1e2945;
      background: #f0f9ff;
    }

    .hint {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #94a3b8;
      text-align: center;
      margin-top: 2px;
    }
  </style>
</head>
<body>

  
  <div class="word-card active" onclick="activate(this)">
    <div class="equation-row">
      <div class="base-group">
        <span class="base-pill"><span class="emoji">🌧️</span>rain</span>
        <span class="symbol">+</span>
        <span class="base-pill"><span class="emoji">🧥</span>coat</span>
      </div>
      <span class="symbol">=</span>
      <div class="compound-pill">
        <span class="b1">rain</span><span class="b2">coat</span>
      </div>
    </div>
    <div class="meaning-box">
      A coat that keeps you dry in the rain
    </div>
  </div>

  
  <div class="word-card" onclick="activate(this)">
    <div class="equation-row">
      <div class="base-group">
        <span class="base-pill"><span class="emoji">🐕</span>dog</span>
        <span class="symbol">+</span>
        <span class="base-pill"><span class="emoji">🏠</span>house</span>
      </div>
      <span class="symbol">=</span>
      <div class="compound-pill">
        <span class="b1">dog</span><span class="b2">house</span>
      </div>
    </div>
    <div class="meaning-box">
      A small house for a pet dog
    </div>
  </div>

  
  <div class="word-card" onclick="activate(this)">
    <div class="equation-row">
      <div class="base-group">
        <span class="base-pill"><span class="emoji">🌟</span>star</span>
        <span class="symbol">+</span>
        <span class="base-pill"><span class="emoji">🐟</span>fish</span>
      </div>
      <span class="symbol">=</span>
      <div class="compound-pill">
        <span class="b1">star</span><span class="b2">fish</span>
      </div>
    </div>
    <div class="meaning-box">
      A sea creature shaped like a star
    </div>
  </div>

  <div class="hint">Tap any card to inspect base words</div>

  <script>
    function activate(el) {
      document.querySelectorAll('.word-card').forEach(card => card.classList.remove('active'));
      el.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">
  <title>Compound Word Equation</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

    body {
      background: #f8f9fa;
      color: #1e2945;
      min-height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }

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

    .base-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
    }

    .word-card {
      background: #ffffff;
      border: 2px solid #22b7ff;
      border-radius: 14px;
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-width: 110px;
      box-shadow: 0 4px 12px rgba(34, 183, 255, 0.1);
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
    }

    .word-card .emoji {
      font-size: 28px;
      line-height: 1.2;
      margin-bottom: 2px;
    }

    .word-card .word {
      font-size: 18px;
      font-weight: 700;
      color: #1e2945;
      letter-spacing: -0.2px;
    }

    .word-card .tag {
      font-size: 11px;
      font-weight: 600;
      color: #22b7ff;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-top: 2px;
    }

    .math-symbol {
      font-size: 22px;
      font-weight: 800;
      color: #22b7ff;
      user-select: none;
    }

    .connector-arrow {
      font-size: 24px;
      color: #22b7ff;
      animation: bounce 1.8s ease infinite;
      user-select: none;
      line-height: 1;
    }

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

    .compound-card {
      background: #ffffff;
      border: 2px solid #22b7ff;
      border-radius: 16px;
      padding: 14px 24px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      max-width: 290px;
      box-shadow: 0 6px 16px rgba(34, 183, 255, 0.15);
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .compound-card .emoji-row {
      display: flex;
      gap: 6px;
      font-size: 30px;
      line-height: 1.2;
      margin-bottom: 4px;
    }

    .compound-card .word {
      font-size: 22px;
      font-weight: 800;
      color: #1e2945;
      letter-spacing: -0.3px;
    }

    .compound-card .tag {
      font-size: 11px;
      font-weight: 700;
      color: #22b7ff;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-top: 3px;
    }

    .highlight-1 {
      color: #22b7ff;
    }

    .highlight-2 {
      color: #1e2945;
    }

    .interactive-btn {
      margin-top: 8px;
      background: #ffffff;
      color: #1e2945;
      border: 2px solid #22b7ff;
      border-radius: 999px;
      padding: 6px 18px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: background 0.2s ease, transform 0.1s ease;
    }

    .interactive-btn:active {
      transform: scale(0.96);
      background: #f0f9ff;
    }

    /* Animated entry slide */
    .slide-left {
      animation: slideInLeft 0.7s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
    }

    .slide-right {
      animation: slideInRight 0.7s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
    }

    .pop-in {
      animation: popIn 0.8s 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }

    @keyframes slideInLeft {
      0% { transform: translateX(-30px); opacity: 0; }
      100% { transform: translateX(0); opacity: 1; }
    }

    @keyframes slideInRight {
      0% { transform: translateX(30px); opacity: 0; }
      100% { transform: translateX(0); opacity: 1; }
    }

    @keyframes popIn {
      0% { transform: scale(0.85); opacity: 0; }
      100% { transform: scale(1); opacity: 1; }
    }
  </style>
</head>
<body>

  <div class="equation-area" id="equation">
    
    <div class="base-row">
      <div class="word-card slide-left" id="card1">
        <span class="emoji">☀️</span>
        <span class="word highlight-1">sun</span>
        <span class="tag">Base Word 1</span>
      </div>

      <span class="math-symbol">+</span>

      <div class="word-card slide-right" id="card2">
        <span class="emoji">🕶️</span>
        <span class="word highlight-2">glasses</span>
        <span class="tag">Base Word 2</span>
      </div>
    </div>

    
    <div class="connector-arrow">⬇</div>

    
    <div class="compound-card pop-in" id="cardCompound">
      <div class="emoji-row">
        <span>☀️</span>
        <span>🕶️</span>
      </div>
      <div class="word">
        <span class="highlight-1">sun</span><span class="highlight-2">glasses</span>
      </div>
      <span class="tag">Compound Word</span>
    </div>

    
    <button class="interactive-btn" id="replayBtn" type="button">
      <span>▶</span> Play Again
    </button>
  </div>

  <script>
    const replayBtn = document.getElementById('replayBtn');
    const card1 = document.getElementById('card1');
    const card2 = document.getElementById('card2');
    const cardCompound = document.getElementById('cardCompound');

    function replayAnimation() {
      // Reset classes
      card1.classList.remove('slide-left');
      card2.classList.remove('slide-right');
      cardCompound.classList.remove('pop-in');

      // Trigger reflow
      void card1.offsetWidth;

      // Reapply animation classes
      card1.classList.add('slide-left');
      card2.classList.add('slide-right');
      cardCompound.classList.add('pop-in');
    }

    replayBtn.addEventListener('click', replayAnimation);
  </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="1:1">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      background: #ffffff;
      color: #1e2945;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px 8px;
    }
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #faf5ff;
      border: 1px solid #d8b4fe;
      color: #6b21a8;
      font-size: 13px;
      font-weight: 700;
      padding: 6px 14px;
      border-radius: 20px;
      margin-bottom: 12px;
      text-align: center;
    }
    .words-container {
      display: flex;
      flex-direction: column;
      gap: 12px;
      width: 100%;
      max-width: 320px;
    }
    .word-card {
      position: relative;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 14px;
      padding: 8px 12px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      user-select: none;
      transition: box-shadow 0.2s ease;
    }
    .word-card:hover {
      box-shadow: 0 4px 12px rgba(147, 51, 234, 0.12);
    }
    .arc-svg {
      width: 232px;
      height: 38px;
      overflow: visible;
      margin-bottom: 2px;
    }
    .magic-path {
      fill: none;
      stroke: #9333ea;
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-dasharray: 5 4;
      animation: dashMove 1.5s linear infinite;
    }
    @keyframes dashMove {
      to {
        stroke-dashoffset: 18;
      }
    }
    .sparkle-icon {
      animation: pulseGlow 1.8s ease-in-out infinite;
      transform-origin: center;
    }
    @keyframes pulseGlow {
      0%, 100% { transform: scale(1); opacity: 0.85; }
      50% { transform: scale(1.25); opacity: 1; }
    }
    .letters-row {
      display: grid;
      grid-template-columns: repeat(4, 52px);
      gap: 8px;
    }
    .tile {
      height: 52px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      font-weight: 800;
      border-radius: 10px;
      position: relative;
    }
    .tile-consonant-start {
      background: #ffffff;
      color: #1e2945;
      border: 1.5px solid #cbd5e1;
    }
    .tile-vowel {
      background: #eff6ff;
      color: #2563eb;
      border: 2px solid #3b82f6;
      box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
    }
    .tile-consonant {
      background: #f1f5f9;
      color: #64748b;
      border: 1.5px solid #94a3b8;
    }
    .tile-silent-e {
      background: #faf5ff;
      color: #9333ea;
      border: 2px dashed #a855f7;
      box-shadow: 0 0 0 2px rgba(147, 51, 234, 0.15);
    }
    .labels-row {
      display: grid;
      grid-template-columns: repeat(4, 52px);
      gap: 8px;
      margin-top: 4px;
    }
    .tag {
      font-size: 11px;
      font-weight: 800;
      text-align: center;
      padding: 2px 0;
      border-radius: 4px;
      letter-spacing: 0.5px;
    }
    .tag-v {
      background: #dbeafe;
      color: #1d4ed8;
    }
    .tag-c {
      background: #e2e8f0;
      color: #475569;
    }
    .tag-e {
      background: #f3e8ff;
      color: #7e22ce;
    }
    .tag-empty {
      visibility: hidden;
    }
    .macron {
      position: absolute;
      top: -2px;
      font-size: 13px;
      font-weight: 900;
      color: #2563eb;
    }
  </style>
</head>
<body>

  <div class="badge">
    <span>🪄</span>
    <span>Silent e makes the vowel say its name!</span>
  </div>

  <div class="words-container">
    
    <div class="word-card" onclick="playMagic(this)">
      <svg class="arc-svg" viewBox="0 0 232 38">
        <defs>
          <marker id="arrow1" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
            <polygon points="6 0, 0 3, 6 6" fill="#9333ea" />
          </marker>
        </defs>
        
        <path class="magic-path" d="M 206,34 C 180,4 112,4 88,30" marker-end="url(#arrow1)" />
        <text x="206" y="16" class="sparkle-icon" font-size="14" text-anchor="middle">✨</text>
      </svg>

      <div class="letters-row">
        <div class="tile tile-consonant-start">t</div>
        <div class="tile tile-vowel">
          <span class="macron">¯</span>
          i
        </div>
        <div class="tile tile-consonant">l</div>
        <div class="tile tile-silent-e">e</div>
      </div>

      <div class="labels-row">
        <div class="tag tag-empty">-</div>
        <div class="tag tag-v">V</div>
        <div class="tag tag-c">C</div>
        <div class="tag tag-e">e</div>
      </div>
    </div>

    
    <div class="word-card" onclick="playMagic(this)">
      <svg class="arc-svg" viewBox="0 0 232 38">
        <defs>
          <marker id="arrow2" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
            <polygon points="6 0, 0 3, 6 6" fill="#9333ea" />
          </marker>
        </defs>
        
        <path class="magic-path" d="M 206,34 C 180,4 112,4 88,30" marker-end="url(#arrow2)" />
        <text x="206" y="16" class="sparkle-icon" font-size="14" text-anchor="middle">✨</text>
      </svg>

      <div class="letters-row">
        <div class="tile tile-consonant-start">c</div>
        <div class="tile tile-vowel">
          <span class="macron">¯</span>
          a
        </div>
        <div class="tile tile-consonant">k</div>
        <div class="tile tile-silent-e">e</div>
      </div>

      <div class="labels-row">
        <div class="tag tag-empty">-</div>
        <div class="tag tag-v">V</div>
        <div class="tag tag-c">C</div>
        <div class="tag tag-e">e</div>
      </div>
    </div>
  </div>

  <script>
    function playMagic(card) {
      try {
        const ctx = new (window.AudioContext || window.webkitAudioContext)();
        [587.33, 880].forEach((freq, i) => {
          const osc = ctx.createOscillator();
          const gain = ctx.createGain();
          osc.type = 'sine';
          osc.frequency.setValueAtTime(freq, ctx.currentTime + i * 0.1);
          gain.gain.setValueAtTime(0.12, ctx.currentTime + i * 0.1);
          gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + i * 0.1 + 0.35);
          osc.connect(gain);
          gain.connect(ctx.destination);
          osc.start(ctx.currentTime + i * 0.1);
          osc.stop(ctx.currentTime + i * 0.1 + 0.35);
        });
      } catch (e) {}

      const vowel = card.querySelector('.tile-vowel');
      vowel.style.transition = 'transform 0.25s ease, box-shadow 0.25s ease';
      vowel.style.transform = 'scale(1.1)';
      vowel.style.boxShadow = '0 0 16px rgba(37, 99, 235, 0.4)';
      setTimeout(() => {
        vowel.style.transform = 'scale(1)';
        vowel.style.boxShadow = '0 0 0 2px rgba(37, 99, 235, 0.15)';
      }, 350);
    }
  </script>
</body>
</html>

Identifying Six Basic Syllable Types

<!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>Vowel Team vs Bossy R</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: #ffffff;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }
    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 620px;
    }
    @media (max-width: 440px) {
      .grid {
        grid-template-columns: 1fr;
      }
    }
    .panel {
      background: #f8fafc;
      border: 1px solid #e6e6e6;
      border-radius: 14px;
      padding: 16px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      position: relative;
      cursor: pointer;
      user-select: none;
      transition: box-shadow 0.25s ease, background-color 0.25s ease;
    }
    .panel:hover {
      box-shadow: 0 4px 14px rgba(30, 41, 69, 0.08);
      background: #ffffff;
    }
    .panel.active {
      box-shadow: 0 0 0 2px #22b7ff;
      background: #ffffff;
    }
    .title {
      font-size: 17px;
      font-weight: 700;
      color: #1e2945;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .stage {
      height: 110px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      margin-bottom: 8px;
    }
    /* Team Jerseys */
    .jersey-pair {
      display: flex;
      gap: 8px;
      align-items: center;
    }
    .jersey {
      width: 52px;
      height: 64px;
      background: #22b7ff;
      border-radius: 8px 8px 12px 12px;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      box-shadow: 0 3px 6px rgba(34, 183, 255, 0.25);
    }
    .jersey::before {
      content: "";
      position: absolute;
      top: 0;
      width: 20px;
      height: 8px;
      background: #f8fafc;
      border-radius: 0 0 10px 10px;
    }
    .jersey .letter {
      font-size: 28px;
      font-weight: 800;
      line-height: 1;
      margin-top: 4px;
    }
    .jersey .stripe {
      position: absolute;
      bottom: 6px;
      width: 32px;
      height: 3px;
      background: rgba(255, 255, 255, 0.6);
      border-radius: 2px;
    }
    .team-badge {
      position: absolute;
      bottom: 2px;
      background: #1e2945;
      color: #ffffff;
      font-size: 11px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 10px;
    }

    /* Bossy R elements */
    .bossy-pair {
      display: flex;
      gap: 12px;
      align-items: flex-end;
      position: relative;
    }
    .char-card {
      width: 52px;
      height: 64px;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      font-weight: 800;
      color: #64748b;
      position: relative;
    }
    .char-card.boss {
      background: #fef3c7;
      border-color: #f59e0b;
      color: #b45309;
      box-shadow: 0 3px 6px rgba(245, 158, 11, 0.2);
    }
    .hat {
      position: absolute;
      top: -20px;
      font-size: 22px;
      line-height: 1;
    }
    .boss-pointer {
      position: absolute;
      top: -12px;
      left: 18px;
      font-size: 15px;
      animation: nudge 2s ease-in-out infinite;
    }
    @keyframes nudge {
      0%, 100% { transform: translateX(0); }
      50% { transform: translateX(-4px); }
    }

    /* Sound Pill & Word Breakdown */
    .sound-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
      background: #e2e8f0;
      padding: 4px 10px;
      border-radius: 20px;
      margin-bottom: 8px;
    }
    .word-box {
      font-size: 22px;
      letter-spacing: 1px;
      color: #64748b;
      font-weight: 600;
      background: #ffffff;
      border: 1px solid #e6e6e6;
      padding: 6px 14px;
      border-radius: 8px;
      width: 100%;
      max-width: 180px;
    }
    .highlight-blue {
      color: #0284c7;
      font-weight: 800;
      background: #e0f2fe;
      padding: 0 4px;
      border-radius: 4px;
    }
    .highlight-amber {
      color: #b45309;
      font-weight: 800;
      background: #fef3c7;
      padding: 0 4px;
      border-radius: 4px;
    }
    .sound-btn {
      margin-top: 8px;
      background: transparent;
      border: none;
      color: #64748b;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 8px;
      border-radius: 6px;
    }
    .sound-btn:hover {
      color: #1e2945;
      background: #f1f5f9;
    }
  </style>
</head>
<body>

  <div class="grid">
    
    <div class="panel active" id="vowelTeamPanel" onclick="playSound('team')">
      <div class="title">🤝 Vowel Team</div>
      <div class="stage">
        <div class="jersey-pair">
          <div class="jersey">
            <span class="letter">o</span>
            <div class="stripe"></div>
          </div>
          <div class="jersey">
            <span class="letter">a</span>
            <div class="stripe"></div>
          </div>
        </div>
        <div class="team-badge">1 Sound</div>
      </div>
      <div class="sound-badge">→ /ō/</div>
      <div class="word-box">b - <span class="highlight-blue">oa</span> - t</div>
      <button class="sound-btn" aria-label="Listen to vowel team sound">🔊 Listen</button>
    </div>

    
    <div class="panel" id="bossyRPanel" onclick="playSound('bossy')">
      <div class="title">👑 Bossy R</div>
      <div class="stage">
        <div class="bossy-pair">
          <div class="char-card">
            <span>a</span>
          </div>
          <div class="char-card boss">
            <span class="hat">🧢</span>
            <span class="boss-pointer">👈</span>
            <span>r</span>
          </div>
        </div>
      </div>
      <div class="sound-badge">→ /ar/</div>
      <div class="word-box">c - <span class="highlight-amber">ar</span> - pet</div>
      <button class="sound-btn" aria-label="Listen to Bossy R sound">🔊 Listen</button>
    </div>
  </div>

  <script>
    function playTone(freq, type, duration = 0.3) {
      try {
        const AudioContext = window.AudioContext || window.webkitAudioContext;
        if (!AudioContext) return;
        const ctx = new AudioContext();
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.type = type || 'sine';
        osc.frequency.setValueAtTime(freq, ctx.currentTime);
        osc.connect(gain);
        gain.connect(ctx.destination);
        gain.gain.setValueAtTime(0.18, ctx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + duration);
        osc.start();
        osc.stop(ctx.currentTime + duration);
      } catch (e) {}
    }

    function playSound(type) {
      const left = document.getElementById('vowelTeamPanel');
      const right = document.getElementById('bossyRPanel');
      
      if (type === 'team') {
        left.classList.add('active');
        right.classList.remove('active');
        // Harmonious chord for teamwork
        playTone(330, 'sine', 0.35);
        setTimeout(() => playTone(440, 'triangle', 0.4), 100);
      } else {
        right.classList.add('active');
        left.classList.remove('active');
        // Stronger commanding note
        playTone(260, 'sawtooth', 0.25);
        setTimeout(() => playTone(392, 'sine', 0.35), 80);
      }
    }
  </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 {
      background: #f8f9fa;
      font-family: system-ui, -apple-system, sans-serif;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

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

    @media (max-width: 480px) {
      .grid {
        grid-template-columns: 1fr;
        gap: 10px;
      }
    }

    .syllable-card {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 14px;
      padding: 14px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      position: relative;
      cursor: pointer;
      user-select: none;
      transition: box-shadow 0.2s ease, border-color 0.2s ease;
    }

    .syllable-card:hover {
      box-shadow: 0 4px 12px rgba(34, 183, 255, 0.15);
      border-color: #22b7ff;
    }

    .card-title {
      font-size: 15px;
      font-weight: 700;
      letter-spacing: -0.2px;
      margin-bottom: 8px;
      color: #1e2945;
    }

    /* Doorway Stage */
    .stage {
      width: 100%;
      height: 100px;
      background: #f1f5f9;
      border-radius: 8px;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 10px;
      border: 1px solid #e2e8f0;
    }

    .door-frame {
      width: 64px;
      height: 82px;
      border: 3px solid #64748b;
      border-bottom: none;
      border-radius: 4px 4px 0 0;
      position: relative;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .door-leaf {
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
      background: #3b82f6;
      border-radius: 2px 2px 0 0;
      transform-origin: right center;
      transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-weight: 800;
      font-size: 20px;
      box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.2);
    }

    /* Closed state */
    .door-closed .door-leaf {
      transform: scaleX(1);
    }

    /* Open state */
    .door-open .door-leaf {
      transform: perspective(300px) rotateY(-80deg);
      background: #94a3b8;
    }

    .vowel-inside {
      font-size: 24px;
      font-weight: 800;
      color: #1e2945;
      position: relative;
      z-index: 1;
    }

    .escape-arrow {
      position: absolute;
      right: 14px;
      font-size: 16px;
      color: #22b7ff;
      font-weight: bold;
      animation: nudge 1.5s infinite ease-in-out;
    }

    @keyframes nudge {
      0%, 100% { transform: translateX(0); opacity: 0.4; }
      50% { transform: translateX(4px); opacity: 1; }
    }

    /* Word & Diacritics */
    .word-display {
      font-size: 32px;
      font-weight: 800;
      letter-spacing: 2px;
      color: #1e2945;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      margin-bottom: 6px;
    }

    .vowel-mark {
      color: #22b7ff;
      position: relative;
    }

    .tag-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 20px;
      background: #e0f2fe;
      color: #0284c7;
    }

    .sound-btn {
      margin-top: 8px;
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 4px 10px;
      font-size: 12px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: background 0.15s;
    }

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

  <div class="grid">
    
    <div class="syllable-card" onclick="triggerSound('closed')">
      <div class="card-title">Closed Syllable</div>
      
      <div class="stage">
        <div class="door-frame door-closed" id="doorClosed">
          <div class="vowel-inside">a</div>
          <div class="door-leaf">p</div>
        </div>
      </div>

      <div class="word-display">
        c<span class="vowel-mark">ă</span>p
      </div>

      <div class="tag-badge">Short /ă/</div>
      <button class="sound-btn" aria-label="Listen to closed syllable">🔊 Hear /æ/</button>
    </div>

    
    <div class="syllable-card" onclick="triggerSound('open')">
      <div class="card-title">Open Syllable</div>
      
      <div class="stage">
        <div class="door-frame door-open" id="doorOpen">
          <div class="vowel-inside" style="color:#22b7ff;">o</div>
          <div class="door-leaf"></div>
        </div>
        <div class="escape-arrow">→</div>
      </div>

      <div class="word-display">
        n<span class="vowel-mark">ō</span>
      </div>

      <div class="tag-badge">Long /ō/</div>
      <button class="sound-btn" aria-label="Listen to open syllable">🔊 Hear /oʊ/</button>
    </div>
  </div>

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

        if (type === 'closed') {
          // Snappy low short tone
          const osc = ctx.createOscillator();
          const gain = ctx.createGain();
          osc.type = 'triangle';
          osc.frequency.setValueAtTime(260, ctx.currentTime);
          gain.gain.setValueAtTime(0.3, ctx.currentTime);
          gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.18);
          osc.connect(gain);
          gain.connect(ctx.destination);
          osc.start();
          osc.stop(ctx.currentTime + 0.18);
        } else {
          // Sustained open ringing tone
          const osc = ctx.createOscillator();
          const gain = ctx.createGain();
          osc.type = 'sine';
          osc.frequency.setValueAtTime(440, ctx.currentTime);
          osc.frequency.exponentialRampToValueAtTime(520, ctx.currentTime + 0.4);
          gain.gain.setValueAtTime(0.25, ctx.currentTime);
          gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.5);
          osc.connect(gain);
          gain.connect(ctx.destination);
          osc.start();
          osc.stop(ctx.currentTime + 0.5);
        }
      } catch (e) {}
    }

    function triggerSound(type) {
      // Audio synth
      playAudioTone(type);

      // Speech synthesis fallback/enhancement if supported
      if ('speechSynthesis' in window) {
        window.speechSynthesis.cancel();
        const text = type === 'closed' ? 'cap' : 'no';
        const utterance = new SpeechSynthesisUtterance(text);
        utterance.rate = 0.85;
        window.speechSynthesis.speak(utterance);
      }
    }
  </script>
</body>
</html>

OGE.3.RF.3

Aligned learning resources

Related diagrams