<!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: #1e293b;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
    }

    .diagram {
      width: 100%;
      max-width: 520px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }

    /* Sentence Banner */
    .sentence-card {
      width: 100%;
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 16px;
      font-size: 15px;
      line-height: 1.5;
      text-align: center;
      color: #334155;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

    .clue-badge {
      background: #fef08a;
      color: #854d0e;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 6px;
      border: 1px solid #facc15;
      display: inline-block;
    }

    .highlight-sluggish {
      font-weight: 700;
      color: #0284c7;
      border-bottom: 2px dashed #0284c7;
      padding-bottom: 1px;
    }

    .highlight-energetic {
      font-weight: 700;
      color: #ea580c;
      border-bottom: 2px dashed #ea580c;
      padding-bottom: 1px;
    }

    /* Seesaw Stage */
    .seesaw-stage {
      position: relative;
      width: 100%;
      height: 220px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: visible;
    }

    .seesaw-system {
      position: relative;
      width: 94%;
      max-width: 440px;
      height: 180px;
    }

    /* Beam & Cards */
    .beam-wrapper {
      position: absolute;
      top: 84px;
      left: 0;
      width: 100%;
      height: 14px;
      transform-origin: 50% 50%;
      /* Tilted down on left (sluggish), up on right (energetic) */
      transform: rotate(-8.5deg);
      transition: transform 0.8s cubic-bezier(0.34, 1.3, 0.64, 1);
      z-index: 10;
    }

    .beam-bar {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, #94a3b8 0%, #475569 100%);
      border-radius: 7px;
      box-shadow: 0 3px 8px rgba(15, 23, 42, 0.2);
      z-index: 1;
    }

    /* Word Pods positioned cleanly on top of the beam */
    .pod {
      position: absolute;
      bottom: 20px;
      width: 120px;
      padding: 10px 8px;
      background: #ffffff;
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
      transform-origin: center bottom;
      /* Counter-rotate to remain upright */
      transform: rotate(8.5deg);
      transition: transform 0.8s cubic-bezier(0.34, 1.3, 0.64, 1);
      z-index: 5;
    }

    .pod-left {
      left: 10px;
      border: 2px solid #38bdf8;
    }

    .pod-right {
      right: 10px;
      border: 2px solid #fb923c;
    }

    .pod-icon {
      font-size: 28px;
      line-height: 1;
      margin-bottom: 4px;
    }

    .pod-word {
      font-size: 15px;
      font-weight: 800;
      letter-spacing: -0.2px;
      line-height: 1.2;
    }

    .pod-left .pod-word {
      color: #0369a1;
    }

    .pod-right .pod-word {
      color: #c2410c;
    }

    .pod-tag {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      margin-top: 3px;
      text-align: center;
      line-height: 1.2;
    }

    /* Center VS Badge */
    .vs-badge {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #0f172a;
      color: #fbbf24;
      font-size: 14px;
      font-weight: 900;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 0 3.5px #ffffff, 0 4px 10px rgba(0, 0, 0, 0.25);
      z-index: 20;
      letter-spacing: 0.5px;
      pointer-events: none;
    }

    /* Fulcrum Base */
    .fulcrum {
      position: absolute;
      top: 86px;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 0;
      border-left: 30px solid transparent;
      border-right: 30px solid transparent;
      border-bottom: 56px solid #334155;
      filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.15));
      z-index: 2;
    }

    .fulcrum-pin {
      position: absolute;
      top: 84px;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #cbd5e1;
      border: 3px solid #1e293b;
      z-index: 3;
    }

    .ground-line {
      position: absolute;
      bottom: 34px;
      left: 3%;
      width: 94%;
      height: 4px;
      background: #cbd5e1;
      border-radius: 2px;
      z-index: 1;
    }

    /* Caption */
    .caption-card {
      width: 100%;
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 14px;
      font-size: 13.5px;
      line-height: 1.45;
      text-align: center;
      color: #334155;
      font-weight: 500;
    }

    .caption-card strong {
      color: #0f172a;
    }

    @media (max-width: 400px) {
      .pod {
        width: 105px;
        padding: 8px 4px;
      }
      .pod-word {
        font-size: 13.5px;
      }
      .pod-tag {
        font-size: 10px;
      }
      .sentence-card {
        font-size: 13.5px;
        padding: 10px 12px;
      }
    }
  </style>
</head>
<body>
  <div class="diagram">
    
    <div class="sentence-card">
      <span class="clue-badge">Unlike</span> her <span class="highlight-sluggish">sluggish</span> brother who stayed in bed, Maya was <span class="highlight-energetic">energetic</span>.
    </div>

    
    <div class="seesaw-stage">
      <div class="seesaw-system">
        <div class="ground-line"></div>
        <div class="fulcrum"></div>
        <div class="fulcrum-pin"></div>

        <div class="beam-wrapper" id="beam">
          
          <div class="beam-bar"></div>

          
          <div class="pod pod-left" id="podLeft">
            <div class="pod-icon">🐢</div>
            <div class="pod-word">sluggish</div>
            <div class="pod-tag">slow &amp; sleepy</div>
          </div>

          
          <div class="vs-badge">VS</div>

          
          <div class="pod pod-right" id="podRight">
            <div class="pod-icon">⚡</div>
            <div class="pod-word">energetic</div>
            <div class="pod-tag">full of energy</div>
          </div>
        </div>
      </div>
    </div>

    
    <div class="caption-card">
      <strong>Flip the opposite:</strong> Energetic = full of energy, so Sluggish = slow and sleepy.
    </div>
  </div>

  <script>
    const beam = document.getElementById('beam');
    const podLeft = document.getElementById('podLeft');
    const podRight = document.getElementById('podRight');

    let tilted = true;

    function applyAngle(angle) {
      beam.style.transform = `rotate(${angle}deg)`;
      podLeft.style.transform = `rotate(${-angle}deg)`;
      podRight.style.transform = `rotate(${-angle}deg)`;
    }

    // Subtle breathing animation maintaining the left-down / right-up orientation
    setInterval(() => {
      tilted = !tilted;
      const angle = tilted ? -8.5 : -6;
      applyAngle(angle);
    }, 2400);
  </script>
</body>
</html>

Using Synonyms and Antonyms as Word Relationships to Determine Meaning

<!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 {
      background: #ffffff;
      color: #1e2945;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }
    .wrapper {
      width: 100%;
      max-width: 620px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .cards-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }
    @media (max-width: 480px) {
      .cards-grid {
        grid-template-columns: 1fr;
        gap: 10px;
      }
    }
    .sentence-card {
      border-radius: 12px;
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      transition: box-shadow 0.25s ease;
    }
    .card-draft {
      background: #fff8f8;
      border: 1.5px solid #fecaca;
    }
    .card-upgrade {
      background: #f0fdf4;
      border: 1.5px solid #bbf7d0;
    }
    .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.02em;
      text-transform: uppercase;
    }
    .card-draft .card-header {
      color: #dc2626;
    }
    .card-upgrade .card-header {
      color: #16a34a;
    }
    .sentence-text {
      font-size: 15px;
      line-height: 1.6;
      color: #334155;
    }
    .hl {
      display: inline-block;
      padding: 1px 6px;
      border-radius: 6px;
      font-weight: 600;
      transition: all 0.25s ease;
      cursor: pointer;
    }
    .hl-1 { background: #fee2e2; color: #991b1b; }
    .hl-2 { background: #ffedd5; color: #9a3412; }
    .hl-3 { background: #fef3c7; color: #92400e; }

    .up-1 { background: #dcfce7; color: #166534; }
    .up-2 { background: #e0e7ff; color: #3730a3; }
    .up-3 { background: #ccfbf1; color: #115e59; }

    .active-1 { box-shadow: 0 0 0 2px #ef4444; font-weight: 700; }
    .active-up-1 { box-shadow: 0 0 0 2px #22c55e; font-weight: 700; }
    .active-2 { box-shadow: 0 0 0 2px #f97316; font-weight: 700; }
    .active-up-2 { box-shadow: 0 0 0 2px #6366f1; font-weight: 700; }
    .active-3 { box-shadow: 0 0 0 2px #f59e0b; font-weight: 700; }
    .active-up-3 { box-shadow: 0 0 0 2px #14b8a6; font-weight: 700; }

    .pairs-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }
    @media (max-width: 420px) {
      .pairs-container {
        grid-template-columns: 1fr;
      }
    }
    .pair-btn {
      appearance: none;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      border-radius: 10px;
      padding: 8px 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      cursor: pointer;
      font-size: 13px;
      color: #475569;
      transition: all 0.2s ease;
    }
    .pair-btn.active {
      background: #ffffff;
      border-color: #94a3b8;
      box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    }
    .pair-btn .arrow {
      color: #94a3b8;
      font-size: 12px;
    }
    .pair-btn .target-word {
      font-weight: 700;
    }
    .p1 .target-word { color: #166534; }
    .p2 .target-word { color: #3730a3; }
    .p3 .target-word { color: #115e59; }

    .dimmed {
      opacity: 0.35;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="cards-grid">
      
      <div class="sentence-card card-draft">
        <div class="card-header">
          <span>Repetitive Draft</span>
          <span>⚠️</span>
        </div>
        <p class="sentence-text">
          The <span class="hl hl-1" data-pair="1">big</span> giant had a <span class="hl hl-2" data-pair="2">big</span> club and lived in a <span class="hl hl-3" data-pair="3">big</span> cave.
        </p>
      </div>

      
      <div class="sentence-card card-upgrade">
        <div class="card-header">
          <span>Polished Upgrade</span>
          <span>✦</span>
        </div>
        <p class="sentence-text">
          The <span class="hl up-1" data-pair="1">colossal</span> giant held an <span class="hl up-2" data-pair="2">enormous</span> club and lived in a <span class="hl up-3" data-pair="3">cavernous</span> cave.
        </p>
      </div>
    </div>

    
    <div class="pairs-container">
      <button class="pair-btn p1 active" data-pair="1" type="button">
        <span>big</span>
        <span class="arrow">→</span>
        <span class="target-word">colossal</span>
      </button>
      <button class="pair-btn p2" data-pair="2" type="button">
        <span>big</span>
        <span class="arrow">→</span>
        <span class="target-word">enormous</span>
      </button>
      <button class="pair-btn p3" data-pair="3" type="button">
        <span>big</span>
        <span class="arrow">→</span>
        <span class="target-word">cavernous</span>
      </button>
    </div>
  </div>

  <script>
    const buttons = document.querySelectorAll('.pair-btn');
    const highlights = document.querySelectorAll('.hl');
    let activeIdx = 1;
    let autoTimer = null;

    function activatePair(id, manual = false) {
      activeIdx = parseInt(id, 10);
      buttons.forEach(btn => {
        btn.classList.toggle('active', btn.dataset.pair === String(id));
      });
      highlights.forEach(hl => {
        const match = hl.dataset.pair === String(id);
        const pNum = hl.dataset.pair;
        hl.classList.toggle('dimmed', !match);
        if (hl.classList.contains('hl-1')) hl.classList.toggle('active-1', match);
        if (hl.classList.contains('up-1')) hl.classList.toggle('active-up-1', match);
        if (hl.classList.contains('hl-2')) hl.classList.toggle('active-2', match);
        if (hl.classList.contains('up-2')) hl.classList.toggle('active-up-2', match);
        if (hl.classList.contains('hl-3')) hl.classList.toggle('active-3', match);
        if (hl.classList.contains('up-3')) hl.classList.toggle('active-up-3', match);
      });
      if (manual && autoTimer) {
        clearInterval(autoTimer);
      }
    }

    buttons.forEach(btn => {
      btn.addEventListener('click', () => activatePair(btn.dataset.pair, true));
    });

    highlights.forEach(hl => {
      hl.addEventListener('click', () => activatePair(hl.dataset.pair, true));
    });

    // Auto step through slowly
    autoTimer = setInterval(() => {
      activeIdx = (activeIdx % 3) + 1;
      activatePair(activeIdx, false);
    }, 3200);

    activatePair(1);
  </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>Semantic Gradient</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

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

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

    .title {
      font-size: 20px;
      font-weight: 800;
      color: #1e2945;
      margin-bottom: 4px;
    }

    .subtitle {
      font-size: 14px;
      color: #6b7280;
      font-weight: 500;
    }

    .gradient-container {
      width: 100%;
      max-width: 540px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      position: relative;
    }

    /* Gradient track arrow */
    .track-wrapper {
      position: relative;
      width: 100%;
      height: 24px;
      display: flex;
      align-items: center;
    }

    .track-bar {
      width: 100%;
      height: 10px;
      border-radius: 5px;
      background: linear-gradient(to right, #fde047, #f97316, #ef4444);
      position: relative;
      overflow: hidden;
    }

    .track-arrow {
      position: absolute;
      right: -6px;
      top: 50%;
      transform: translateY(-50%);
      width: 0;
      height: 0;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      border-left: 12px solid #ef4444;
    }

    .intensity-labels {
      display: flex;
      justify-content: space-between;
      width: 100%;
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #8c95a6;
      margin-top: -8px;
      padding: 0 4px;
    }

    /* Word Cards Container */
    .cards-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      width: 100%;
    }

    .word-card {
      background: #ffffff;
      border: 2px solid transparent;
      border-radius: 12px;
      padding: 14px 8px;
      text-align: center;
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
      transition: box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }

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

    .word-label {
      font-size: 16px;
      font-weight: 800;
      letter-spacing: -0.2px;
    }

    .strength-badge {
      font-size: 12px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 8px;
      text-transform: uppercase;
    }

    /* Level-specific styling */
    .level-1 {
      border-color: #fef08a;
    }
    .level-1 .word-label { color: #854d0e; }
    .level-1 .strength-badge {
      background: #fef9c3;
      color: #854d0e;
    }
    .level-1.active {
      border-color: #eab308;
      background: #fefce8;
      box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.25);
    }

    .level-2 {
      border-color: #fed7aa;
    }
    .level-2 .word-label { color: #c2410c; }
    .level-2 .strength-badge {
      background: #ffedd5;
      color: #c2410c;
    }
    .level-2.active {
      border-color: #f97316;
      background: #fff7ed;
      box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.25);
    }

    .level-3 {
      border-color: #fecaca;
    }
    .level-3 .word-label { color: #b91c1c; }
    .level-3 .strength-badge {
      background: #fee2e2;
      color: #b91c1c;
    }
    .level-3.active {
      border-color: #ef4444;
      background: #fef2f2;
      box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3), 0 0 16px rgba(239, 68, 68, 0.2);
    }

    /* Stepper dots */
    .stepper-nav {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 4px;
    }

    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #e2e8f0;
      cursor: pointer;
      transition: background-color 0.2s ease;
    }

    .dot.active-1 { background: #eab308; }
    .dot.active-2 { background: #f97316; }
    .dot.active-3 { background: #ef4444; }

    @media (max-width: 420px) {
      .emoji-icon { font-size: 26px; }
      .word-label { font-size: 14px; }
      .strength-badge { font-size: 10px; padding: 2px 6px; }
      .title { font-size: 18px; }
      .subtitle { font-size: 13px; }
    }
  </style>
</head>
<body>

  <div class="header">
    <div class="title">Semantic Gradient</div>
    <div class="subtitle">Placing synonyms in order of strength</div>
  </div>

  <div class="gradient-container">
    
    <div class="track-wrapper">
      <div class="track-bar"></div>
      <div class="track-arrow"></div>
    </div>

    <div class="intensity-labels">
      <span>Mild</span>
      <span>Medium</span>
      <span>Intense</span>
    </div>

    <div class="cards-row">
      
      <div class="word-card level-1 active" id="card-1" onclick="selectStep(0)">
        <span class="emoji-icon">😒</span>
        <span class="word-label">Annoyed</span>
        <span class="strength-badge">Mild</span>
      </div>

      
      <div class="word-card level-2" id="card-2" onclick="selectStep(1)">
        <span class="emoji-icon">😠</span>
        <span class="word-label">Furious</span>
        <span class="strength-badge">Medium</span>
      </div>

      
      <div class="word-card level-3" id="card-3" onclick="selectStep(2)">
        <span class="emoji-icon">😤</span>
        <span class="word-label">Livid</span>
        <span class="strength-badge">Extreme</span>
      </div>
    </div>

    <div class="stepper-nav">
      <div class="dot active-1" id="dot-0" onclick="selectStep(0)"></div>
      <div class="dot" id="dot-1" onclick="selectStep(1)"></div>
      <div class="dot" id="dot-2" onclick="selectStep(2)"></div>
    </div>

  </div>

  <script>
    let currentStep = 0;
    const cards = [
      document.getElementById('card-1'),
      document.getElementById('card-2'),
      document.getElementById('card-3')
    ];
    const dots = [
      document.getElementById('dot-0'),
      document.getElementById('dot-1'),
      document.getElementById('dot-2')
    ];
    const dotClasses = ['active-1', 'active-2', 'active-3'];

    function selectStep(index) {
      currentStep = index;
      cards.forEach((card, i) => {
        if (i === index) {
          card.classList.add('active');
        } else {
          card.classList.remove('active');
        }
      });

      dots.forEach((dot, i) => {
        dot.className = 'dot';
        if (i === index) {
          dot.classList.add(dotClasses[index]);
        }
      });
    }

    // Gentle auto-advance every 3.5 seconds
    let autoInterval = setInterval(() => {
      currentStep = (currentStep + 1) % 3;
      selectStep(currentStep);
    }, 3500);

    // Pause auto-cycle on manual click
    document.querySelectorAll('.word-card, .dot').forEach(el => {
      el.addEventListener('click', () => {
        clearInterval(autoInterval);
      });
    });
  </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>Synonym Bridge</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }

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

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

    /* Sentence Box */
    .sentence-box {
      width: 100%;
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 14px 18px;
      font-size: 16px;
      line-height: 1.5;
      text-align: center;
      color: #334155;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    }

    .target-word {
      display: inline-block;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 6px;
      transition: all 0.3s ease;
      cursor: pointer;
    }

    .target-word.w1 {
      color: #2563eb;
      background: #eff6ff;
    }

    .target-word.w2 {
      color: #0284c7;
      background: #f0f9ff;
    }

    .target-word.active {
      box-shadow: 0 0 0 2px #2563eb;
    }

    /* Bridge Area */
    .bridge-container {
      width: 100%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 8px;
    }

    .word-card {
      width: 110px;
      height: 74px;
      background: #ffffff;
      border: 2px solid #93c5fd;
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      box-shadow: 0 4px 14px rgba(37, 99, 235, 0.08);
      z-index: 2;
      cursor: pointer;
      transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    }

    .word-card.active {
      border-color: #2563eb;
      box-shadow: 0 0 16px rgba(37, 99, 235, 0.25);
      background-color: #f8faff;
    }

    .word-label {
      font-size: 18px;
      font-weight: 800;
      letter-spacing: 0.2px;
      color: #1e3a8a;
    }

    .word-role {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    /* SVG Bridge Connector */
    .bridge-connector {
      position: absolute;
      top: 0;
      left: 100px;
      right: 100px;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 1;
    }

    .bridge-svg {
      width: 100%;
      height: 48px;
      overflow: visible;
    }

    .bridge-arc {
      stroke: #cbd5e1;
      stroke-width: 3;
      stroke-dasharray: 4 3;
      fill: none;
      transition: stroke 0.3s ease;
    }

    .bridge-arc.glow {
      stroke: #2563eb;
      stroke-dasharray: none;
    }

    .equal-badge {
      position: absolute;
      width: 36px;
      height: 36px;
      background: #2563eb;
      color: #ffffff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-weight: 700;
      box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3);
      cursor: pointer;
      z-index: 3;
      transition: box-shadow 0.3s ease, background-color 0.3s ease;
    }

    .equal-badge:hover {
      box-shadow: 0 0 14px rgba(37, 99, 235, 0.5);
    }

    /* Explanation Footer */
    .explanation-badge {
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      border-radius: 12px;
      padding: 10px 18px;
      font-size: 14px;
      font-weight: 600;
      color: #1d4ed8;
      display: flex;
      align-items: center;
      gap: 8px;
      text-align: center;
    }

    .sparkle {
      font-size: 16px;
    }
  </style>
</head>
<body>

  <div class="diagram">
    
    <div class="sentence-box">
      The puppy was <span id="wTimid" class="target-word w1 active">timid</span>, acting <span id="wShy" class="target-word w2 active">shy</span> around new visitors.
    </div>

    
    <div class="bridge-container">
      
      <div id="cardTimid" class="word-card active">
        <span class="word-label">timid</span>
        <span class="word-role">Unknown Word</span>
      </div>

      
      <div class="bridge-connector">
        <svg class="bridge-svg" viewBox="0 0 160 48" preserveAspectRatio="none">
          
          <path class="bridge-arc glow" d="M 0 36 Q 80 -4 160 36" />
          
          <line x1="0" y1="36" x2="160" y2="36" stroke="#94a3b8" stroke-width="2" />
        </svg>
        <div id="equalBtn" class="equal-badge" title="Equal Meaning">=</div>
      </div>

      
      <div id="cardShy" class="word-card active">
        <span class="word-label">shy</span>
        <span class="word-role">Context Clue</span>
      </div>
    </div>

    
    <div class="explanation-badge">
      <span class="sparkle">🌉</span>
      <span>Synonym Clue: <strong>timid</strong> means <strong>shy</strong></span>
    </div>
  </div>

  <script>
    const timidCard = document.getElementById('cardTimid');
    const shyCard = document.getElementById('cardShy');
    const timidWord = document.getElementById('wTimid');
    const shyWord = document.getElementById('wShy');
    const equalBtn = document.getElementById('equalBtn');
    const bridgeArc = document.querySelector('.bridge-arc');

    let active = true;

    function toggleBridge() {
      active = !active;
      
      timidCard.classList.toggle('active', active);
      shyCard.classList.toggle('active', active);
      timidWord.classList.toggle('active', active);
      shyWord.classList.toggle('active', active);
      bridgeArc.classList.toggle('glow', active);
      equalBtn.style.backgroundColor = active ? '#2563eb' : '#64748b';
    }

    [timidCard, shyCard, timidWord, shyWord, equalBtn].forEach(el => {
      el.addEventListener('click', toggleBridge);
    });
  </script>
</body>
</html>

OGE.4.L.10

Aligned learning resources

Related diagrams