<!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>Context Clue Breakdown</title>
  <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: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .main-layout {
      width: 100%;
      max-width: 580px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    /* Sentence container */
    .sentence-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 18px 16px;
      position: relative;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    }

    .sentence-text {
      font-size: 17px;
      line-height: 1.8;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 5px;
    }

    .word-plain {
      color: #475569;
    }

    .pill {
      display: inline-flex;
      align-items: center;
      padding: 2px 8px;
      border-radius: 6px;
      font-weight: 700;
      font-size: 16px;
      transition: all 0.3s ease;
    }

    .pill-target {
      background: #e0f2fe;
      color: #0369a1;
      border: 1px solid #7dd3fc;
    }

    .pill-signal {
      background: #fef3c7;
      color: #b45309;
      border: 1px solid #fcd34d;
    }

    .pill-clue {
      background: #dcfce7;
      color: #15803d;
      border: 1px solid #86efac;
    }

    .dash-mark {
      font-weight: 800;
      color: #d97706;
      background: #fef3c7;
      padding: 0 4px;
      border-radius: 4px;
      border: 1px solid #fcd34d;
    }

    /* Link indicator */
    .link-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 2px 0;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
    }

    .link-arrow {
      color: #0284c7;
      font-size: 18px;
      font-weight: bold;
    }

    /* Lower Section: Clue Finder & Definition */
    .grid-panels {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
    }

    @media (max-width: 440px) {
      .grid-panels {
        grid-template-columns: 1fr;
      }
      .sentence-text {
        font-size: 15px;
      }
      .pill {
        font-size: 14px;
      }
    }

    .panel-box {
      background: #ffffff;
      border-radius: 10px;
      padding: 12px 14px;
      border: 1px solid #e2e8f0;
      box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    }

    .panel-title {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .clue-panel {
      border-left: 4px solid #f59e0b;
    }
    .clue-panel .panel-title {
      color: #b45309;
    }

    .def-panel {
      border-left: 4px solid #0284c7;
    }
    .def-panel .panel-title {
      color: #0369a1;
    }

    .clue-items {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .clue-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 500;
      color: #334155;
    }

    .tag-badge {
      font-size: 11px;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 4px;
      background: #fef3c7;
      color: #b45309;
      border: 1px solid #fde68a;
      white-space: nowrap;
    }

    .def-content {
      font-size: 14px;
      font-weight: 600;
      line-height: 1.4;
      color: #0f172a;
    }

    .def-target {
      color: #0284c7;
      font-weight: 800;
    }

    .mode-bar {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 2px;
    }

    .tab-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      padding: 5px 12px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .tab-btn.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
    }
  </style>
</head>
<body>
  <div class="main-layout">
    
    <div class="sentence-card">
      <div class="sentence-text">
        <span class="word-plain">The city council decided to</span>
        <span class="pill pill-target" id="targetWord">abolish</span>
        <span class="dash-mark">—</span>
        <span class="pill pill-signal" id="signalWord">or</span>
        <span class="pill pill-clue" id="cluePhrase">completely eliminate</span>
        <span class="dash-mark">—</span>
        <span class="word-plain">the outdated parking tax.</span>
      </div>
    </div>

    
    <div class="link-row">
      <span style="color:#0369a1; font-weight:700;">abolish</span>
      <span class="link-arrow">➔</span>
      <span style="color:#15803d; font-weight:700;">completely eliminate</span>
    </div>

    
    <div class="grid-panels">
      
      <div class="panel-box clue-panel">
        <div class="panel-title">
          <span>🔍</span> Clue Finder
        </div>
        <div class="clue-items">
          <div class="clue-item">
            <span class="tag-badge">— dashes —</span>
            <span>Offset definition</span>
          </div>
          <div class="clue-item">
            <span class="tag-badge">or</span>
            <span>Signal word (restatement)</span>
          </div>
        </div>
      </div>

      
      <div class="panel-box def-panel">
        <div class="panel-title">
          <span>📖</span> Meaning Revealed
        </div>
        <div class="def-content">
          <span class="def-target">Abolish</span> = to officially end or destroy
        </div>
      </div>
    </div>

    
    <div class="mode-bar">
      <button class="tab-btn active" id="btnAll" onclick="setFocus('all')">Full View</button>
      <button class="tab-btn" id="btnClues" onclick="setFocus('clues')">Highlight Clues</button>
      <button class="tab-btn" id="btnMeaning" onclick="setFocus('meaning')">Focus Meaning</button>
    </div>
  </div>

  <script>
    function setFocus(mode) {
      const target = document.getElementById('targetWord');
      const signal = document.getElementById('signalWord');
      const clue = document.getElementById('cluePhrase');
      const dashes = document.querySelectorAll('.dash-mark');

      document.getElementById('btnAll').classList.toggle('active', mode === 'all');
      document.getElementById('btnClues').classList.toggle('active', mode === 'clues');
      document.getElementById('btnMeaning').classList.toggle('active', mode === 'meaning');

      if (mode === 'clues') {
        signal.style.boxShadow = '0 0 0 3px #f59e0b';
        clue.style.boxShadow = '0 0 0 3px #22c55e';
        target.style.boxShadow = 'none';
        dashes.forEach(d => d.style.boxShadow = '0 0 0 2px #f59e0b');
      } else if (mode === 'meaning') {
        target.style.boxShadow = '0 0 0 3px #0284c7';
        clue.style.boxShadow = '0 0 0 3px #22c55e';
        signal.style.boxShadow = 'none';
        dashes.forEach(d => d.style.boxShadow = 'none');
      } else {
        target.style.boxShadow = 'none';
        signal.style.boxShadow = 'none';
        clue.style.boxShadow = 'none';
        dashes.forEach(d => d.style.boxShadow = 'none');
      }
    }
  </script>
</body>
</html>

Determining Meanings of General Academic Words in Informational Contexts

<!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;
    }

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

    .stepper {
      display: flex;
      gap: 6px;
      margin-bottom: 8px;
    }

    .step-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 20px;
      padding: 4px 12px;
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .step-btn.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
      box-shadow: 0 2px 4px rgba(2, 132, 199, 0.25);
    }

    .scene {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* Comparison Area */
    .comparison-grid {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 8px;
      align-items: center;
      width: 100%;
    }

    .side-card {
      border-radius: 12px;
      padding: 12px 8px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .left-side {
      background: #f0f9ff;
      border: 1.5px solid #bae6fd;
    }

    .right-side {
      background: #f0fdf4;
      border: 1.5px solid #bbf7d0;
    }

    .avatar-box {
      font-size: 32px;
      line-height: 1;
    }

    .name-tag {
      font-size: 13px;
      font-weight: 700;
    }

    .left-side .name-tag { color: #0369a1; }
    .right-side .name-tag { color: #15803d; }

    .trait-badge {
      font-size: 11px;
      font-weight: 600;
      padding: 3px 8px;
      border-radius: 6px;
      white-space: nowrap;
    }

    .left-side .trait-badge {
      background: #e0f2fe;
      color: #0284c7;
    }

    .right-side .trait-badge {
      background: #dcfce7;
      color: #16a34a;
    }

    /* Center Balance / Clue */
    .pivot-center {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      min-width: 72px;
    }

    .scale-icon {
      font-size: 26px;
      line-height: 1;
      transition: transform 0.3s ease;
    }

    .clue-tag {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      background: #fef08a;
      color: #854d0e;
      border: 1px solid #fde047;
      padding: 3px 6px;
      border-radius: 6px;
      text-align: center;
      transition: all 0.3s ease;
    }

    .highlight-clue {
      box-shadow: 0 0 0 3px #facc15;
      transform: scale(1.05);
    }

    /* Contrast Arrow / Connector */
    .arrow-connector {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 700;
      color: #64748b;
      gap: 4px;
      height: 20px;
    }

    /* Bottom Result Card */
    .result-box {
      background: #faf5ff;
      border: 1.5px solid #e9d5ff;
      border-radius: 10px;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      text-align: center;
      transition: opacity 0.3s ease;
    }

    .word-target {
      font-weight: 800;
      color: #7e22ce;
      font-size: 14px;
    }

    .equals-sign {
      color: #a855f7;
      font-weight: 700;
      font-size: 14px;
    }

    .definition {
      font-weight: 700;
      color: #15803d;
      font-size: 14px;
    }

    /* State management */
    .dimmed {
      opacity: 0.35;
    }

    .focused {
      opacity: 1;
      transform: scale(1.02);
    }
  </style>
</head>
<body>

  
  <div class="stepper">
    <button class="step-btn active" onclick="setStep(0)">1. Context</button>
    <button class="step-btn" onclick="setStep(1)">2. Contrast</button>
    <button class="step-btn" onclick="setStep(2)">3. Meaning</button>
  </div>

  <div class="scene">
    
    <div class="comparison-grid">
      
      <div id="cardLeft" class="side-card left-side">
        <div class="avatar-box">📖👤</div>
        <div class="name-tag">Marcus</div>
        <div class="trait-badge">Quiet & Solitary</div>
      </div>

      
      <div class="pivot-center">
        <div id="scaleIcon" class="scale-icon">⚖️</div>
        <div id="clueBadge" class="clue-tag">"Unlike"</div>
      </div>

      
      <div id="cardRight" class="side-card right-side">
        <div class="avatar-box">🎉👥</div>
        <div class="name-tag">Brother</div>
        <div class="trait-badge">"Gregarious"</div>
      </div>
    </div>

    
    <div id="connector" class="arrow-connector">
      <span>Opposite Traits</span>
      <span>⇄</span>
    </div>

    
    <div id="resultCard" class="result-box">
      <span class="word-target">Gregarious</span>
      <span class="equals-sign">=</span>
      <span class="definition">Sociable & Outgoing</span>
    </div>
  </div>

  <script>
    let currentStep = 0;
    const cardLeft = document.getElementById('cardLeft');
    const cardRight = document.getElementById('cardRight');
    const clueBadge = document.getElementById('clueBadge');
    const scaleIcon = document.getElementById('scaleIcon');
    const resultCard = document.getElementById('resultCard');
    const buttons = document.querySelectorAll('.step-btn');

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

      if (step === 0) {
        // Step 1: Show both characters side-by-side
        cardLeft.className = 'side-card left-side focused';
        cardRight.className = 'side-card right-side focused';
        clueBadge.classList.remove('highlight-clue');
        scaleIcon.style.transform = 'rotate(0deg)';
        resultCard.style.opacity = '0.35';
      } else if (step === 1) {
        // Step 2: Highlight contrast clue ("Unlike")
        cardLeft.className = 'side-card left-side focused';
        cardRight.className = 'side-card right-side focused';
        clueBadge.classList.add('highlight-clue');
        scaleIcon.style.transform = 'rotate(-8deg)';
        resultCard.style.opacity = '0.4';
      } else if (step === 2) {
        // Step 3: Solve definition
        cardLeft.className = 'side-card left-side dimmed';
        cardRight.className = 'side-card right-side focused';
        clueBadge.classList.remove('highlight-clue');
        scaleIcon.style.transform = 'rotate(0deg)';
        resultCard.style.opacity = '1';
      }
    }

    // Auto-advance gently if untouched
    let timer = setInterval(() => {
      setStep((currentStep + 1) % 3);
    }, 4000);

    // Stop auto-timer on interaction
    document.body.addEventListener('pointerdown', () => {
      clearInterval(timer);
    });

    setStep(0);
  </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, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

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

    .flow-container {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      max-width: 620px;
    }

    .card-box {
      flex: 1;
      min-width: 0;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 14px 10px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      transition: all 0.3s ease;
    }

    .card-box.highlight {
      background: #f0fdf4;
      border-color: #86efac;
    }

    .card-box.focus-target {
      background: #eff6ff;
      border-color: #3b82f6;
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
      cursor: pointer;
      position: relative;
    }

    .tag {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 2px 8px;
      border-radius: 12px;
      display: inline-block;
    }

    .tag-cause { background: #e0f2fe; color: #0284c7; }
    .tag-word { background: #dbeafe; color: #1d4ed8; }
    .tag-result { background: #fef3c7; color: #d97706; }

    .card-text {
      font-size: 13.5px;
      font-weight: 600;
      line-height: 1.35;
      color: #1e2945;
    }

    .target-word {
      color: #1d4ed8;
      font-weight: 800;
      text-decoration: underline;
      text-decoration-color: #60a5fa;
      text-underline-offset: 3px;
    }

    .arrow {
      font-size: 18px;
      font-weight: bold;
      color: #94a3b8;
      flex-shrink: 0;
      user-select: none;
    }

    /* Magnifier Reveal Callout */
    .lens-panel {
      width: 100%;
      max-width: 480px;
      background: #ffffff;
      border: 2px solid #3b82f6;
      border-radius: 14px;
      padding: 12px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      box-shadow: 0 6px 16px rgba(59, 130, 246, 0.12);
      transition: all 0.3s ease;
    }

    .lens-icon {
      font-size: 26px;
      background: #dbeafe;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      box-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
    }

    .lens-content {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .lens-label {
      font-size: 12px;
      font-weight: 700;
      color: #2563eb;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .lens-meaning {
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
    }

    .helper-hint {
      font-size: 12px;
      color: #64748b;
      font-weight: 500;
    }

    @media (max-width: 480px) {
      .flow-container {
        flex-direction: column;
        gap: 6px;
      }
      .card-box {
        width: 100%;
        padding: 10px 12px;
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
        gap: 10px;
      }
      .arrow {
        transform: rotate(90deg);
        line-height: 12px;
      }
      .lens-panel {
        padding: 10px 12px;
      }
      .lens-meaning {
        font-size: 14px;
      }
    }
  </style>
</head>
<body>

  
  <div class="flow-container">
    
    <div class="card-box">
      <span class="tag tag-cause">Cause</span>
      <span class="card-text">❄️ Harsh winter &amp;<br>scarce food</span>
    </div>

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

    
    <div class="card-box focus-target" id="wordCard">
      <span class="tag tag-word">Action</span>
      <span class="card-text"><span class="target-word">Jeopardized</span><br>deer survival</span>
    </div>

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

    
    <div class="card-box">
      <span class="tag tag-result">Result</span>
      <span class="card-text">🦌 Deer at risk<br>of dying out</span>
    </div>
  </div>

  
  <div class="lens-panel">
    <div class="lens-icon">🔍</div>
    <div class="lens-content">
      <span class="lens-label">Context Clue Meaning</span>
      <span class="lens-meaning">Put into danger or risk</span>
    </div>
  </div>

  <div class="helper-hint">Cause + Result clarify the academic word</div>

</body>
</html>

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

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

    .header {
      text-align: center;
      margin-bottom: 12px;
    }

    .title {
      font-size: 16px;
      font-weight: 800;
      letter-spacing: -0.01em;
      color: #1e2945;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }

    .subtitle {
      font-size: 12px;
      color: #64748b;
      margin-top: 2px;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      width: 100%;
      max-width: 600px;
      perspective: 1000px;
    }

    .card-wrap {
      height: 145px;
      cursor: pointer;
      perspective: 1000px;
    }

    .card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      text-align: left;
      transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
      transform-style: preserve-3d;
    }

    .card-wrap.flipped .card-inner {
      transform: rotateY(180deg);
    }

    .card-face {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      border-radius: 12px;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
      border: 2px solid transparent;
      background: #ffffff;
    }

    .card-back {
      transform: rotateY(180deg);
      justify-content: center;
      gap: 8px;
    }

    /* Card 1: Restatement (Indigo) */
    .c-restatement .card-face {
      border-color: #c7d2fe;
      background: #faf5ff;
    }
    .c-restatement.flipped .card-back {
      background: #eef2ff;
    }
    .c-restatement .tag {
      background: #6366f1;
      color: #ffffff;
    }
    .c-restatement .pill {
      background: #e0e7ff;
      color: #3730a3;
    }
    .c-restatement .hl {
      color: #4338ca;
      font-weight: 700;
    }

    /* Card 2: Contrast (Rose) */
    .c-contrast .card-face {
      border-color: #fecdd3;
      background: #fff1f2;
    }
    .c-contrast.flipped .card-back {
      background: #ffe4e6;
    }
    .c-contrast .tag {
      background: #f43f5e;
      color: #ffffff;
    }
    .c-contrast .pill {
      background: #ffe4e6;
      color: #9f1239;
    }
    .c-contrast .hl {
      color: #be123c;
      font-weight: 700;
    }

    /* Card 3: Cause & Effect (Sky) */
    .c-cause .card-face {
      border-color: #bae6fd;
      background: #f0f9ff;
    }
    .c-cause.flipped .card-back {
      background: #e0f2fe;
    }
    .c-cause .tag {
      background: #0284c7;
      color: #ffffff;
    }
    .c-cause .pill {
      background: #e0f2fe;
      color: #075985;
    }
    .c-cause .hl {
      color: #0369a1;
      font-weight: 700;
    }

    /* Card 4: Example (Emerald) */
    .c-example .card-face {
      border-color: #a7f3d0;
      background: #f0fdf4;
    }
    .c-example.flipped .card-back {
      background: #dcfce7;
    }
    .c-example .tag {
      background: #059669;
      color: #ffffff;
    }
    .c-example .pill {
      background: #dcfce7;
      color: #065f46;
    }
    .c-example .hl {
      color: #047857;
      font-weight: 700;
    }

    .card-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .type-name {
      font-size: 14px;
      font-weight: 800;
      color: #1e2945;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .tag {
      font-size: 11px;
      font-weight: 700;
      padding: 2px 7px;
      border-radius: 999px;
      letter-spacing: 0.02em;
    }

    .keywords {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin: 4px 0;
    }

    .pill {
      font-size: 11px;
      font-weight: 600;
      padding: 2px 6px;
      border-radius: 4px;
    }

    .tap-hint {
      font-size: 10px;
      color: #64748b;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .example-title {
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #64748b;
    }

    .example-sentence {
      font-size: 13px;
      line-height: 1.35;
      color: #1e2945;
    }

    .target-word {
      text-decoration: underline;
      text-underline-offset: 3px;
      text-decoration-thickness: 2px;
      font-weight: 700;
    }

    @media (max-width: 380px) {
      .card-wrap {
        height: 155px;
      }
      .example-sentence {
        font-size: 12px;
      }
      .type-name {
        font-size: 13px;
      }
    }
  </style>
</head>
<body>

  <div class="header">
    <div class="title">🔍 4 Context Clue Detectives</div>
    <div class="subtitle">Tap any clue card to inspect an example</div>
  </div>

  <div class="grid">
    
    <div class="card-wrap c-restatement" onclick="toggleCard(this)" role="button" tabindex="0" aria-label="Restatement clue card">
      <div class="card-inner">
        <div class="card-face card-front">
          <div class="card-top">
            <span class="type-name">✦ Restatement</span>
            <span class="tag">A = B</span>
          </div>
          <div class="keywords">
            <span class="pill">that is</span>
            <span class="pill">or</span>
            <span class="pill">, commas ,</span>
          </div>
          <div class="tap-hint">Tap to see in sentence ↻</div>
        </div>
        <div class="card-face card-back">
          <div class="example-title">Clue in Action</div>
          <div class="example-sentence">
            "The <span class="target-word">canine</span>, <span class="hl">or dog</span>, barked loudly."
          </div>
          <div class="tap-hint">Tap to flip back ↻</div>
        </div>
      </div>
    </div>

    
    <div class="card-wrap c-contrast" onclick="toggleCard(this)" role="button" tabindex="0" aria-label="Contrast clue card">
      <div class="card-inner">
        <div class="card-face card-front">
          <div class="card-top">
            <span class="type-name">⇄ Contrast</span>
            <span class="tag">A ≠ B</span>
          </div>
          <div class="keywords">
            <span class="pill">unlike</span>
            <span class="pill">but</span>
            <span class="pill">whereas</span>
          </div>
          <div class="tap-hint">Tap to see in sentence ↻</div>
        </div>
        <div class="card-face card-back">
          <div class="example-title">Clue in Action</div>
          <div class="example-sentence">
            "<span class="hl">Unlike</span> calm rivers, the sea was <span class="target-word">turbulent</span>."
          </div>
          <div class="tap-hint">Tap to flip back ↻</div>
        </div>
      </div>
    </div>

    
    <div class="card-wrap c-cause" onclick="toggleCard(this)" role="button" tabindex="0" aria-label="Cause and effect clue card">
      <div class="card-inner">
        <div class="card-face card-front">
          <div class="card-top">
            <span class="type-name">➔ Cause / Effect</span>
            <span class="tag">Cause ➔ Result</span>
          </div>
          <div class="keywords">
            <span class="pill">because</span>
            <span class="pill">therefore</span>
            <span class="pill">as a result</span>
          </div>
          <div class="tap-hint">Tap to see in sentence ↻</div>
        </div>
        <div class="card-face card-back">
          <div class="example-title">Clue in Action</div>
          <div class="example-sentence">
            "No rain fell; <span class="hl">as a result</span>, crops <span class="target-word">withered</span>."
          </div>
          <div class="tap-hint">Tap to flip back ↻</div>
        </div>
      </div>
    </div>

    
    <div class="card-wrap c-example" onclick="toggleCard(this)" role="button" tabindex="0" aria-label="Example clue card">
      <div class="card-inner">
        <div class="card-face card-front">
          <div class="card-top">
            <span class="type-name">★ Example</span>
            <span class="tag">Group ⊃ Item</span>
          </div>
          <div class="keywords">
            <span class="pill">such as</span>
            <span class="pill">including</span>
            <span class="pill">for instance</span>
          </div>
          <div class="tap-hint">Tap to see in sentence ↻</div>
        </div>
        <div class="card-face card-back">
          <div class="example-title">Clue in Action</div>
          <div class="example-sentence">
            "<span class="target-word">Piscivores</span>, <span class="hl">such as</span> otters and pelicans, eat fish."
          </div>
          <div class="tap-hint">Tap to flip back ↻</div>
        </div>
      </div>
    </div>
  </div>

  <script>
    function toggleCard(card) {
      card.classList.toggle('flipped');
    }

    document.querySelectorAll('.card-wrap').forEach(card => {
      card.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          toggleCard(card);
        }
      });
    });
  </script>
</body>
</html>

OGE.6.RI.4

Aligned learning resources

Related diagrams