<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Picture Clues: Proboscis</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      width: 100%;
      background: #faf8f5;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #0f172a;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 12px 14px;
      gap: 10px;
      user-select: none;
      min-height: auto;
    }

    /* Sentence Card */
    .sentence-card {
      width: 100%;
      max-width: 440px;
      background: #ffffff;
      border: 2px solid #cbd5e1;
      border-radius: 12px;
      padding: 10px 14px;
      text-align: center;
      font-size: 16px;
      font-weight: 600;
      color: #1e293b;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    }

    .word-box {
      display: inline-block;
      background: #fef08a;
      color: #451a03;
      padding: 2px 8px;
      border-radius: 6px;
      cursor: pointer;
      border: 2px solid #ca8a04;
      transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
    }
    .word-box.active {
      background: #7c3aed;
      color: #ffffff;
      border-color: #5b21b6;
      box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.3);
    }

    /* Interactive Art Canvas */
    .scene-wrap {
      width: 100%;
      max-width: 440px;
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 4px 6px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    }

    svg {
      width: 100%;
      height: auto;
      max-height: 200px;
      display: block;
      overflow: visible;
    }

    /* Clue Animated Line */
    .clue-line {
      stroke: #7c3aed;
      stroke-width: 3.5;
      stroke-dasharray: 6 6;
      fill: none;
      animation: dash 3s linear infinite;
      transition: opacity 0.6s ease;
    }
    @keyframes dash {
      to {
        stroke-dashoffset: -24;
      }
    }

    /* Straw Pulse - Gentle and non-strobing */
    .straw-pulse {
      animation: strawGlow 3.5s ease-in-out infinite alternate;
    }
    @keyframes strawGlow {
      0% {
        stroke-width: 4;
        stroke: #7c3aed;
      }
      100% {
        stroke-width: 5.5;
        stroke: #6d28d9;
      }
    }

    /* Clue Callout placed in normal document flow below illustration */
    .clue-callout {
      width: 100%;
      max-width: 440px;
      background: #f5f3ff;
      border: 2px solid #7c3aed;
      padding: 8px 14px;
      border-radius: 10px;
      font-size: 14.5px;
      font-weight: 700;
      color: #4c1d95;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      text-align: center;
      transition: background-color 0.5s ease, border-color 0.5s ease, color 0.5s ease;
      min-height: 42px;
    }
    .clue-callout.highlight {
      background: #ede9fe;
      border-color: #6d28d9;
      color: #3b0764;
    }

    /* Step Controls */
    .controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      width: 100%;
      max-width: 440px;
    }
    .step-btn {
      flex: 1;
      padding: 8px 6px;
      font-size: 13px;
      font-weight: 700;
      background: #ffffff;
      border: 2px solid #94a3b8;
      color: #1e293b;
      border-radius: 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
    }
    .step-btn:focus-visible {
      outline: 2px solid #7c3aed;
      outline-offset: 2px;
    }
    .step-btn.active {
      background: #6d28d9;
      color: #ffffff;
      border-color: #5b21b6;
      box-shadow: 0 2px 6px rgba(109, 40, 217, 0.35);
    }

    @media (max-width: 380px) {
      .sentence-card {
        font-size: 14.5px;
        padding: 8px 10px;
      }
      .clue-callout {
        font-size: 13px;
        padding: 6px 10px;
      }
      .step-btn {
        font-size: 11.5px;
        padding: 6px 4px;
      }
    }
  </style>
</head>
<body>

  
  <div class="sentence-card">
    The butterfly sips with its <span id="targetWord" class="word-box active" role="button" tabindex="0">proboscis</span>.
  </div>

  
  <div class="scene-wrap">
    <svg viewBox="0 0 380 210" aria-label="Illustration of a butterfly perched on a pink flower drinking nectar with a long coiled purple mouth tube">
      <defs>
        
        <linearGradient id="petalGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#f472b6"/>
          <stop offset="100%" stop-color="#db2777"/>
        </linearGradient>
        
        <linearGradient id="wingGrad" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stop-color="#38bdf8"/>
          <stop offset="100%" stop-color="#0284c7"/>
        </linearGradient>
        
        <marker id="arrow" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1 L 9 5 L 0 9 z" fill="#6d28d9" />
        </marker>
      </defs>

      
      <path d="M 270 210 Q 262 165 260 135" fill="none" stroke="#15803d" stroke-width="7" stroke-linecap="round"/>
      <path d="M 264 175 Q 300 170 310 152 Q 288 190 262 185" fill="#16a34a"/>

      
      <g transform="translate(260, 135)">
        
        <ellipse cx="0" cy="-30" rx="15" ry="22" fill="url(#petalGrad)"/>
        <ellipse cx="26" cy="-15" rx="15" ry="22" transform="rotate(60, 26, -15)" fill="url(#petalGrad)"/>
        <ellipse cx="26" cy="18" rx="15" ry="22" transform="rotate(120, 26, 18)" fill="url(#petalGrad)"/>
        <ellipse cx="0" cy="30" rx="15" ry="22" fill="url(#petalGrad)"/>
        <ellipse cx="-26" cy="18" rx="15" ry="22" transform="rotate(240, -26, 18)" fill="url(#petalGrad)"/>
        <ellipse cx="-26" cy="-15" rx="15" ry="22" transform="rotate(300, -26, -15)" fill="url(#petalGrad)"/>
        
        <circle cx="0" cy="0" r="18" fill="#facc15" stroke="#ca8a04" stroke-width="2.5"/>
        <circle cx="0" cy="0" r="13" fill="#fbbf24"/>
        <circle cx="-4" cy="-4" r="2" fill="#854d0e"/>
        <circle cx="4" cy="-2" r="2" fill="#854d0e"/>
        <circle cx="0" cy="5" r="2" fill="#854d0e"/>
      </g>

      
      <g transform="translate(130, 52)">
        
        <path d="M 0 20 C -35 -25 -80 -10 -75 28 C -72 50 -45 55 0 35" fill="url(#wingGrad)" opacity="0.95"/>
        <path d="M 0 35 C -55 45 -65 85 -35 88 C -15 90 -5 65 0 45" fill="#ea580c"/>
        <circle cx="-40" cy="20" r="6" fill="#fef08a"/>

        
        <ellipse cx="0" cy="32" rx="6" ry="24" fill="#0f172a" transform="rotate(22, 0, 32)"/>
        <circle cx="9" cy="10" r="7" fill="#0f172a"/>
        
        <circle cx="11" cy="9" r="2" fill="#ffffff"/>

        
        <path d="M 12 6 Q 22 -8 28 -10" fill="none" stroke="#0f172a" stroke-width="2" stroke-linecap="round"/>
        <circle cx="28" cy="-10" r="2.5" fill="#0f172a"/>
        <path d="M 8 4 Q 14 -12 18 -15" fill="none" stroke="#0f172a" stroke-width="2" stroke-linecap="round"/>
        <circle cx="18" cy="-15" r="2.5" fill="#0f172a"/>

        
        <path d="M 5 48 L 26 70 L 52 78" fill="none" stroke="#0f172a" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M 0 44 L 18 66 L 40 72" fill="none" stroke="#0f172a" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>

        
        <path d="M 3 24 C -20 -30 -65 -15 -60 22 C -57 42 -30 46 3 35" fill="#0284c7"/>
        <circle cx="-30" cy="12" r="5" fill="#fef08a"/>
      </g>

      
      <path id="proboscisTube"
            d="M 143 65 C 160 76 168 116 195 100 C 218 86 230 128 258 133"
            fill="none"
            stroke="#7c3aed"
            stroke-width="4.5"
            stroke-linecap="round"
            class="straw-pulse" />

      
      <circle cx="258" cy="133" r="4.5" fill="#7c3aed" />

      
      <path id="clueArrow"
            class="clue-line"
            d="M 90 14 C 115 14 140 32 170 82"
            marker-end="url(#arrow)" />

      
      <g transform="translate(148, 62)">
        <rect x="0" y="0" width="88" height="24" rx="12" fill="#5b21b6" />
        <text x="44" y="16" fill="#ffffff" font-size="11.5" font-weight="bold" text-anchor="middle">Straw Mouth</text>
      </g>
    </svg>
  </div>

  
  <div id="clueCallout" class="clue-callout highlight" aria-live="polite">
    <span aria-hidden="true">🔍</span>
    <span>I see a long straw mouth drinking nectar!</span>
  </div>

  
  <div class="controls" role="group" aria-label="Step through clue discovery">
    <button class="step-btn" id="btn1" onclick="setStep(0)">1. Tricky Word</button>
    <button class="step-btn active" id="btn2" onclick="setStep(1)">2. Picture Clue</button>
    <button class="step-btn" id="btn3" onclick="setStep(2)">3. Meaning</button>
  </div>

  <script>
    const targetWord = document.getElementById('targetWord');
    const clueArrow = document.getElementById('clueArrow');
    const clueCallout = document.getElementById('clueCallout');
    const tube = document.getElementById('proboscisTube');
    const buttons = [
      document.getElementById('btn1'),
      document.getElementById('btn2'),
      document.getElementById('btn3')
    ];

    let currentStep = 1;
    let timer = null;

    function setStep(idx) {
      currentStep = idx;
      buttons.forEach((btn, i) => {
        btn.classList.toggle('active', i === idx);
        btn.setAttribute('aria-pressed', i === idx ? 'true' : 'false');
      });

      if (idx === 0) {
        // Step 1: Word focus
        targetWord.classList.add('active');
        clueArrow.style.opacity = '0.2';
        clueCallout.innerHTML = '<span>📖</span><span>Find the tricky word: <strong>proboscis</strong></span>';
        clueCallout.classList.remove('highlight');
        tube.classList.remove('straw-pulse');
      } else if (idx === 1) {
        // Step 2: Picture Clue
        targetWord.classList.remove('active');
        clueArrow.style.opacity = '1';
        clueCallout.innerHTML = '<span>🔍</span><span>I see a long straw mouth drinking nectar!</span>';
        clueCallout.classList.add('highlight');
        tube.classList.add('straw-pulse');
      } else {
        // Step 3: Connect Word + Meaning
        targetWord.classList.add('active');
        clueArrow.style.opacity = '1';
        clueCallout.innerHTML = '<span>💡</span><span>Proboscis = Long straw-like mouth!</span>';
        clueCallout.classList.add('highlight');
        tube.classList.add('straw-pulse');
      }
    }

    function startLoop() {
      clearInterval(timer);
      timer = setInterval(() => {
        currentStep = (currentStep + 1) % 3;
        setStep(currentStep);
      }, 5000);
    }

    buttons.forEach((btn) => {
      btn.addEventListener('click', () => {
        startLoop();
      });
    });

    targetWord.addEventListener('click', () => {
      setStep((currentStep + 1) % 3);
      startLoop();
    });

    targetWord.addEventListener('keydown', (e) => {
      if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        setStep((currentStep + 1) % 3);
        startLoop();
      }
    });

    // Initial state
    setStep(1);
    startLoop();
  </script>
</body>
</html>

Using Picture Clues to Understand New 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: #f0fdf4;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 10px;
      user-select: none;
      -webkit-user-select: none;
    }

    .diagram-stage {
      position: relative;
      width: 100%;
      max-width: 420px;
      height: 330px;
      border-radius: 12px;
      overflow: hidden;
      background: linear-gradient(180deg, #bae6fd 0%, #e0f2fe 35%, #dcfce7 65%, #86efac 100%);
      display: flex;
      flex-direction: column;
      box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
    }

    /* Layer regions */
    .layer {
      position: relative;
      width: 100%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 12px;
      transition: filter 0.25s ease, transform 0.25s ease;
    }

    /* Canopy Layer */
    .layer-canopy {
      height: 120px;
      background: #15803d;
      border-radius: 0 0 40px 40px;
      box-shadow: 0 8px 16px rgba(21, 128, 61, 0.25);
      z-index: 3;
    }
    .layer-canopy.active {
      animation: pulseEmerald 1.2s infinite alternate ease-in-out;
    }
    @keyframes pulseEmerald {
      0% { background: #15803d; filter: drop-shadow(0 0 4px #10b981); }
      100% { background: #059669; filter: drop-shadow(0 0 14px #34d399); }
    }

    /* Canopy Leaves Decor (CSS shapes) */
    .leaf-clouds {
      position: absolute;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
    }
    .leaf-puff {
      position: absolute;
      background: inherit;
      border-radius: 50%;
    }
    .lp1 { width: 90px; height: 90px; top: -20px; left: -10px; background: #16a34a; }
    .lp2 { width: 110px; height: 110px; top: -30px; left: 60px; background: #15803d; }
    .lp3 { width: 100px; height: 100px; top: -20px; right: 50px; background: #16a34a; }
    .lp4 { width: 90px; height: 90px; top: -20px; right: -15px; background: #15803d; }

    /* Trunk Layer */
    .layer-trunk {
      height: 140px;
      background: transparent;
      z-index: 2;
      justify-content: center;
    }
    .trunk-wood {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 54px;
      background: linear-gradient(90deg, #854d0e 0%, #a16207 40%, #78350f 100%);
      border-left: 2px solid #582607;
      border-right: 2px solid #582607;
      transition: filter 0.25s ease;
    }
    .layer-trunk.active .trunk-wood {
      filter: drop-shadow(0 0 10px #f59e0b) brightness(1.15);
    }
    .vine {
      position: absolute;
      font-size: 18px;
      left: 52%;
      top: 30px;
      transform: translateX(-50%);
    }

    /* Forest Floor Layer */
    .layer-floor {
      height: 70px;
      background: #451a03;
      border-top: 5px solid #292524;
      z-index: 3;
    }
    .layer-floor.active {
      filter: brightness(1.3) drop-shadow(0 -4px 8px rgba(180, 83, 9, 0.4));
    }

    /* Cute animals & plants */
    .toucan {
      position: absolute;
      left: 28px;
      top: 38px;
      font-size: 42px;
      z-index: 4;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
      animation: bob 3s ease-in-out infinite;
    }
    @keyframes bob {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-4px); }
    }

    .floor-life {
      position: absolute;
      bottom: 10px;
      left: 24px;
      font-size: 20px;
      letter-spacing: 4px;
    }

    /* Callout labels */
    .label-badge {
      position: relative;
      background: #ffffff;
      color: #1e2945;
      font-size: 14px;
      font-weight: 700;
      padding: 6px 12px;
      border-radius: 20px;
      box-shadow: 0 3px 8px rgba(0,0,0,0.18);
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: 2px solid transparent;
      transition: all 0.2s ease;
      z-index: 5;
    }
    .label-badge.active-badge {
      border-color: #059669;
      background: #ecfdf5;
      color: #065f46;
      box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.35);
    }
    .arrow-icon {
      font-size: 15px;
      font-weight: 900;
    }

    .canopy-badge-wrap {
      margin-left: auto;
      margin-right: 8px;
    }
    .trunk-badge-wrap {
      margin-left: auto;
      margin-right: 12px;
    }
    .floor-badge-wrap {
      margin-left: auto;
      margin-right: 8px;
    }

    /* Interactive layer buttons at bottom */
    .controls {
      display: flex;
      gap: 8px;
      margin-top: 10px;
      width: 100%;
      max-width: 420px;
    }
    .layer-btn {
      flex: 1;
      padding: 8px 4px;
      font-size: 13px;
      font-weight: 700;
      color: #1e2945;
      background: #ffffff;
      border: 2px solid #cbd5e1;
      border-radius: 8px;
      cursor: pointer;
      text-align: center;
      transition: all 0.2s ease;
    }
    .layer-btn.active {
      background: #059669;
      color: #ffffff;
      border-color: #047857;
      box-shadow: 0 2px 6px rgba(5, 150, 105, 0.3);
    }
  </style>
</head>
<body>

  <div class="diagram-stage">
    
    <div class="layer layer-canopy active" id="canopyLayer" onclick="selectLayer('canopy')">
      <div class="leaf-clouds">
        <div class="leaf-puff lp1"></div>
        <div class="leaf-puff lp2"></div>
        <div class="leaf-puff lp3"></div>
        <div class="leaf-puff lp4"></div>
      </div>
      <div class="toucan" title="Toucan">🦜</div>
      <div class="canopy-badge-wrap">
        <div class="label-badge active-badge" id="canopyBadge">
          <span class="arrow-icon">➔</span> Canopy (leafy roof)
        </div>
      </div>
    </div>

    
    <div class="layer layer-trunk" id="trunkLayer" onclick="selectLayer('trunk')">
      <div class="trunk-wood"></div>
      <div class="vine">🌿</div>
      <div class="trunk-badge-wrap">
        <div class="label-badge" id="trunkBadge">
          <span class="arrow-icon">➔</span> Trunk
        </div>
      </div>
    </div>

    
    <div class="layer layer-floor" id="floorLayer" onclick="selectLayer('floor')">
      <div class="floor-life">🍄 🌱</div>
      <div class="floor-badge-wrap">
        <div class="label-badge" id="floorBadge">
          <span class="arrow-icon">➔</span> Forest floor
        </div>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button class="layer-btn active" id="btnCanopy" onclick="selectLayer('canopy')">Canopy</button>
    <button class="layer-btn" id="btnTrunk" onclick="selectLayer('trunk')">Trunk</button>
    <button class="layer-btn" id="btnFloor" onclick="selectLayer('floor')">Forest Floor</button>
  </div>

  <script>
    function selectLayer(name) {
      // Clear active states
      document.querySelectorAll('.layer').forEach(el => el.classList.remove('active'));
      document.querySelectorAll('.label-badge').forEach(el => el.classList.remove('active-badge'));
      document.querySelectorAll('.layer-btn').forEach(el => el.classList.remove('active'));

      // Set active
      if (name === 'canopy') {
        document.getElementById('canopyLayer').classList.add('active');
        document.getElementById('canopyBadge').classList.add('active-badge');
        document.getElementById('btnCanopy').classList.add('active');
      } else if (name === 'trunk') {
        document.getElementById('trunkLayer').classList.add('active');
        document.getElementById('trunkBadge').classList.add('active-badge');
        document.getElementById('btnTrunk').classList.add('active');
      } else if (name === 'floor') {
        document.getElementById('floorLayer').classList.add('active');
        document.getElementById('floorBadge').classList.add('active-badge');
        document.getElementById('btnFloor').classList.add('active');
      }
    }
  </script>
</body>
</html>

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

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

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

    .panel {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 16px;
      padding: 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .panel.active {
      border-color: #22b7ff;
      box-shadow: 0 4px 16px rgba(34, 183, 255, 0.2);
    }

    .panel-header {
      font-size: 13px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    /* Book Page */
    .book-box {
      width: 100%;
      background: #fefce8;
      border: 1px solid #fde047;
      border-radius: 12px;
      padding: 14px 12px;
      font-size: 17px;
      line-height: 1.4;
      color: #334155;
      font-weight: 500;
      text-align: center;
    }

    .word-talon {
      display: inline-block;
      background: #ffd159;
      color: #78350f;
      padding: 2px 8px;
      border-radius: 8px;
      font-weight: 800;
      cursor: pointer;
      box-shadow: 0 2px 0 #d97706;
      transition: transform 0.2s, background-color 0.2s;
    }

    .word-talon.highlight {
      background: #22b7ff;
      color: #ffffff;
      box-shadow: 0 0 12px rgba(34, 183, 255, 0.6);
      transform: scale(1.05);
    }

    /* Eagle Scene */
    .scene-box {
      width: 100%;
      height: 150px;
      background: linear-gradient(180deg, #e0f2fe 0%, #bae6fd 100%);
      border-radius: 12px;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .branch {
      position: absolute;
      bottom: 24px;
      left: 10%;
      width: 80%;
      height: 12px;
      background: #854d0e;
      border-radius: 6px;
    }

    .eagle {
      font-size: 64px;
      position: absolute;
      bottom: 20px;
      left: 36%;
      transform: translateX(-50%);
      user-select: none;
    }

    /* Magnifier */
    .zoom-circle {
      position: absolute;
      right: 12px;
      top: 14px;
      width: 90px;
      height: 90px;
      background: #ffffff;
      border: 4px solid #22b7ff;
      border-radius: 50%;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 2;
    }

    .zoom-icon {
      font-size: 32px;
      line-height: 1;
    }

    .pointer-line {
      position: absolute;
      left: 38%;
      bottom: 28px;
      width: 42px;
      height: 38px;
      border-right: 3px dashed #22b7ff;
      border-top: 3px dashed #22b7ff;
      border-top-right-radius: 12px;
      pointer-events: none;
    }

    /* Clue Badge */
    .clue-badge {
      margin-top: 10px;
      background: #fef08a;
      border: 2px solid #eab308;
      color: #854d0e;
      font-size: 14px;
      font-weight: 800;
      padding: 6px 12px;
      border-radius: 20px;
      text-align: center;
      width: 100%;
      box-shadow: 0 2px 6px rgba(234, 179, 8, 0.2);
    }

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

    .step-btn {
      flex: 1;
      max-width: 180px;
      padding: 8px 10px;
      font-size: 13px;
      font-weight: 700;
      border-radius: 10px;
      border: 2px solid #cbd5e1;
      background: #ffffff;
      color: #64748b;
      cursor: pointer;
      text-align: center;
      transition: all 0.2s ease;
    }

    .step-btn.active {
      background: #22b7ff;
      border-color: #0284c7;
      color: #ffffff;
      box-shadow: 0 2px 8px rgba(34, 183, 255, 0.3);
    }
  </style>
</head>
<body>

  <div class="main-grid">
    
    <div class="panel" id="panelLeft">
      <div class="panel-header">📖 Book Page</div>
      <div class="book-box">
        The eagle catches fish with its sharp <span class="word-talon" id="wordTalon">talon</span>.
      </div>
      <div class="clue-badge" style="background:#f1f5f9; border-color:#cbd5e1; color:#475569;" id="textNote">
        Tricky new word: <b>talon</b>
      </div>
    </div>

    
    <div class="panel" id="panelRight">
      <div class="panel-header">🔍 Picture Clue</div>
      <div class="scene-box">
        <div class="branch"></div>
        <div class="eagle">🦅</div>
        <div class="pointer-line" id="pointerLine"></div>
        <div class="zoom-circle" id="zoomCircle">
          <div class="zoom-icon">🦅🦶</div>
        </div>
      </div>
      <div class="clue-badge" id="clueBadge">
        Talon = Sharp claw!
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button class="step-btn" id="btn1" onclick="setStep(1)">1. Find Word</button>
    <button class="step-btn" id="btn2" onclick="setStep(2)">2. Check Picture</button>
    <button class="step-btn active" id="btn3" onclick="setStep(3)">3. Meaning!</button>
  </div>

  <script>
    function setStep(step) {
      const pLeft = document.getElementById('panelLeft');
      const pRight = document.getElementById('panelRight');
      const word = document.getElementById('wordTalon');
      const zoom = document.getElementById('zoomCircle');
      const clue = document.getElementById('clueBadge');
      const btn1 = document.getElementById('btn1');
      const btn2 = document.getElementById('btn2');
      const btn3 = document.getElementById('btn3');

      btn1.classList.remove('active');
      btn2.classList.remove('active');
      btn3.classList.remove('active');

      if (step === 1) {
        btn1.classList.add('active');
        pLeft.classList.add('active');
        pRight.classList.remove('active');
        word.classList.add('highlight');
        zoom.style.transform = 'scale(0.9)';
        zoom.style.borderColor = '#cbd5e1';
        clue.style.opacity = '0.4';
      } else if (step === 2) {
        btn2.classList.add('active');
        pLeft.classList.remove('active');
        pRight.classList.add('active');
        word.classList.remove('highlight');
        zoom.style.transform = 'scale(1.1)';
        zoom.style.borderColor = '#22b7ff';
        clue.style.opacity = '0.7';
      } else {
        btn3.classList.add('active');
        pLeft.classList.add('active');
        pRight.classList.add('active');
        word.classList.add('highlight');
        zoom.style.transform = 'scale(1.05)';
        zoom.style.borderColor = '#eab308';
        clue.style.opacity = '1';
      }
    }

    document.getElementById('wordTalon').onclick = () => setStep(1);
    document.getElementById('zoomCircle').onclick = () => setStep(2);
    setStep(3);
  </script>
</body>
</html>

OGE.1.RI.3

Aligned learning resources

Related diagrams