<!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">
  <title>Lean Replacement Table</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      font-family: system-ui, -apple-system, sans-serif;
      color: #1e2945;
      background: transparent;
      padding: 12px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 100%;
    }

    .table-container {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .header-row {
      display: grid;
      grid-template-columns: 1fr 28px 1fr;
      gap: 8px;
      padding: 0 8px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #64748b;
    }

    .header-right {
      text-align: right;
    }

    .swap-row {
      display: grid;
      grid-template-columns: 1fr 28px 1fr;
      align-items: center;
      gap: 8px;
      padding: 10px 12px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      cursor: pointer;
      user-select: none;
      transition: background-color 0.25s ease, box-shadow 0.25s ease;
    }

    .swap-row:hover {
      background: #f1f5f9;
    }

    .swap-row.active {
      background: #ffffff;
      box-shadow: 0 0 0 2px #22b7ff, 0 4px 12px rgba(34, 183, 255, 0.15);
    }

    .phrase-col {
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 38px;
    }

    .wordy-text {
      font-size: 13.5px;
      font-weight: 500;
      color: #475569;
      line-height: 1.25;
      transition: color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
    }

    .swap-row.active .wordy-text {
      color: #94a3b8;
      text-decoration: line-through;
      text-decoration-color: #ef4444;
      text-decoration-thickness: 2px;
    }

    .arrow-col {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #94a3b8;
      font-size: 16px;
      font-weight: bold;
      transition: color 0.3s ease, transform 0.3s ease;
    }

    .swap-row.active .arrow-col {
      color: #22b7ff;
      transform: translateX(2px);
    }

    .lean-col {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 6px;
      flex-wrap: wrap;
    }

    .lean-text {
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
      transition: color 0.3s ease, transform 0.3s ease;
    }

    .swap-row.active .lean-text {
      color: #16a34a;
      transform: scale(1.05);
    }

    .badge {
      font-size: 11px;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 999px;
      background: #e2e8f0;
      color: #475569;
      white-space: nowrap;
      transition: all 0.3s ease;
    }

    .swap-row.active .badge {
      background: #dcfce7;
      color: #15803d;
      box-shadow: 0 1px 3px rgba(22, 163, 74, 0.2);
    }

    .instruction {
      text-align: center;
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <div class="table-container">
    <div class="header-row">
      <div>Wordy Phrase</div>
      <div></div>
      <div class="header-right">Lean Replacement</div>
    </div>

    <div class="swap-row active" data-index="0">
      <div class="phrase-col">
        <span class="wordy-text">Due to the fact that</span>
      </div>
      <div class="arrow-col">→</div>
      <div class="lean-col">
        <span class="lean-text">Because</span>
        <span class="badge">−4 words</span>
      </div>
    </div>

    <div class="swap-row" data-index="1">
      <div class="phrase-col">
        <span class="wordy-text">At the present point in time</span>
      </div>
      <div class="arrow-col">→</div>
      <div class="lean-col">
        <span class="lean-text">Now</span>
        <span class="badge">−5 words</span>
      </div>
    </div>

    <div class="swap-row" data-index="2">
      <div class="phrase-col">
        <span class="wordy-text">In order to</span>
      </div>
      <div class="arrow-col">→</div>
      <div class="lean-col">
        <span class="lean-text">To</span>
        <span class="badge">−2 words</span>
      </div>
    </div>

    <div class="swap-row" data-index="3">
      <div class="phrase-col">
        <span class="wordy-text">For the purpose of</span>
      </div>
      <div class="arrow-col">→</div>
      <div class="lean-col">
        <span class="lean-text">For</span>
        <span class="badge">−3 words</span>
      </div>
    </div>

    <div class="swap-row" data-index="4">
      <div class="phrase-col">
        <span class="wordy-text">In the event that</span>
      </div>
      <div class="arrow-col">→</div>
      <div class="lean-col">
        <span class="lean-text">If</span>
        <span class="badge">−3 words</span>
      </div>
    </div>

    <div class="instruction">✦ Tap any row to collapse wordiness</div>
  </div>

  <script>
    const rows = document.querySelectorAll('.swap-row');
    let currentIndex = 0;
    let autoTimer = null;

    function activateRow(index) {
      rows.forEach((row, i) => {
        if (i === index) {
          row.classList.add('active');
        } else {
          row.classList.remove('active');
        }
      });
      currentIndex = index;
    }

    rows.forEach((row, i) => {
      row.addEventListener('click', () => {
        clearInterval(autoTimer);
        activateRow(i);
        startAutoCycle();
      });
    });

    function startAutoCycle() {
      clearInterval(autoTimer);
      autoTimer = setInterval(() => {
        const nextIndex = (currentIndex + 1) % rows.length;
        activateRow(nextIndex);
      }, 3200);
    }

    startAutoCycle();
  </script>
</body>
</html>

Eliminating Wordiness, Pleonasms, and Redundant Phrasing

<!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, sans-serif;
      background: #f8fafc;
      color: #1e2945;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      user-select: none;
    }

    /* Controls Bar */
    .controls {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 600px;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
    }
    .step-tabs {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }
    .tab-btn {
      background: #fff;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: all 0.2s ease;
    }
    .tab-btn.active {
      background: #0284c7;
      color: #fff;
      border-color: #0284c7;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25);
    }
    .play-btn {
      background: #fff;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 6px 12px;
      font-size: 14px;
      cursor: pointer;
      color: #1e2945;
    }

    /* Main Sentence Board */
    .board {
      background: #fff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 18px 14px;
      width: 100%;
      max-width: 600px;
      min-height: 175px;
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      justify-content: center;
      gap: 6px 8px;
      line-height: 1.6;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    .word {
      font-size: 15px;
      font-weight: 500;
      padding: 3px 6px;
      border-radius: 6px;
      display: inline-flex;
      align-items: center;
      transition: all 0.35s ease;
      white-space: nowrap;
    }

    /* Word state styling */
    .word.normal { color: #1e2945; background: transparent; }
    
    .word.deleted {
      background: #fee2e2;
      color: #dc2626;
      text-decoration: line-through;
      opacity: 0.45;
      transform: scale(0.92);
    }
    
    .word.replaced-old {
      background: #fef3c7;
      color: #b45309;
      text-decoration: line-through;
      opacity: 0.4;
    }
    .word.replaced-new {
      background: #e0f2fe;
      color: #0369a1;
      font-weight: 700;
      border-bottom: 2px solid #0284c7;
    }
    
    .word.activated-old {
      background: #f3e8ff;
      color: #7e22ce;
      text-decoration: line-through;
      opacity: 0.4;
    }
    .word.activated-new {
      background: #dcfce7;
      color: #15803d;
      font-weight: 700;
      border-bottom: 2px solid #16a34a;
    }

    .word.final-clean {
      font-size: 16px;
      font-weight: 600;
      color: #0f172a;
      background: #f1f5f9;
    }

    /* Reduction Meter & Result Panel */
    .meter-panel {
      width: 100%;
      max-width: 600px;
      background: #fff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 16px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 12px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    .meter-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
      font-weight: 600;
    }

    .reduction-tag {
      background: #dcfce7;
      color: #166534;
      padding: 2px 8px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 700;
    }

    .bar-bg {
      height: 10px;
      background: #e2e8f0;
      border-radius: 6px;
      overflow: hidden;
      display: flex;
    }
    .bar-fill {
      height: 100%;
      background: #0284c7;
      transition: width 0.4s ease, background-color 0.4s ease;
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <div class="step-tabs">
      <button class="tab-btn active" data-step="0">1: Pleonasms</button>
      <button class="tab-btn" data-step="1">2: Wordiness</button>
      <button class="tab-btn" data-step="2">3: Active Verb</button>
      <button class="tab-btn" data-step="3">✓ Result</button>
    </div>
    <button class="play-btn" id="playBtn" title="Auto play">⏸</button>
  </div>

  
  <div class="board" id="sentenceBoard"></div>

  
  <div class="meter-panel">
    <div class="meter-header">
      <span id="wordCountLabel" style="color: #475569;">Word Count: 23 words</span>
      <span class="reduction-tag" id="reductionLabel">8% cut</span>
    </div>
    <div class="bar-bg">
      <div class="bar-fill" id="meterBar" style="width: 92%;"></div>
    </div>
  </div>

  <script>
    const stepsData = [
      {
        words: 23,
        cut: "8% cut",
        barWidth: "92%",
        barColor: "#ef4444",
        html: `
          <span class="word normal">Due to the fact that</span>
          <span class="word normal">the team made an</span>
          <span class="word deleted">unexpected</span>
          <span class="word normal">discovery of an innovation,</span>
          <span class="word normal">it is necessary that we</span>
          <span class="word normal">overhaul the</span>
          <span class="word deleted">entire</span>
          <span class="word normal">system.</span>
        `
      },
      {
        words: 15,
        cut: "40% cut",
        barWidth: "60%",
        barColor: "#f59e0b",
        html: `
          <span class="word replaced-old">Due to the fact that</span>
          <span class="word replaced-new">Because</span>
          <span class="word normal">the team made a discovery of an innovation,</span>
          <span class="word replaced-old">it is necessary that we</span>
          <span class="word replaced-new">we must</span>
          <span class="word normal">overhaul the system.</span>
        `
      },
      {
        words: 11,
        cut: "56% cut",
        barWidth: "44%",
        barColor: "#0284c7",
        html: `
          <span class="word normal">Because the team</span>
          <span class="word activated-old">made a discovery of an</span>
          <span class="word activated-new">discovered an</span>
          <span class="word normal">innovation, we must overhaul the system.</span>
        `
      },
      {
        words: 11,
        cut: "25 → 11 words (-56%)",
        barWidth: "44%",
        barColor: "#16a34a",
        html: `
          <span class="word final-clean">Because the team discovered an innovation, we must overhaul the system.</span>
        `
      }
    ];

    let currentStep = 0;
    let autoPlayInterval = null;

    const board = document.getElementById('sentenceBoard');
    const wordCountLabel = document.getElementById('wordCountLabel');
    const reductionLabel = document.getElementById('reductionLabel');
    const meterBar = document.getElementById('meterBar');
    const playBtn = document.getElementById('playBtn');
    const tabButtons = document.querySelectorAll('.tab-btn');

    function renderStep(index) {
      currentStep = index;
      const data = stepsData[index];

      // Update Tabs
      tabButtons.forEach((btn, i) => {
        btn.classList.toggle('active', i === index);
      });

      // Update Sentence Content
      board.innerHTML = data.html;

      // Update Meter
      wordCountLabel.textContent = index === 3 ? "Final Result" : `Word Count: ${data.words} words`;
      reductionLabel.textContent = data.cut;
      meterBar.style.width = data.barWidth;
      meterBar.style.backgroundColor = data.barColor;
    }

    function nextStep() {
      currentStep = (currentStep + 1) % stepsData.length;
      renderStep(currentStep);
    }

    function startAutoPlay() {
      if (autoPlayInterval) clearInterval(autoPlayInterval);
      autoPlayInterval = setInterval(nextStep, 3500);
      playBtn.textContent = '⏸';
    }

    function stopAutoPlay() {
      if (autoPlayInterval) {
        clearInterval(autoPlayInterval);
        autoPlayInterval = null;
      }
      playBtn.textContent = '▶';
    }

    tabButtons.forEach((btn) => {
      btn.addEventListener('click', (e) => {
        stopAutoPlay();
        const stepIdx = parseInt(btn.dataset.step, 10);
        renderStep(stepIdx);
      });
    });

    playBtn.addEventListener('click', () => {
      if (autoPlayInterval) {
        stopAutoPlay();
      } else {
        nextStep();
        startAutoPlay();
      }
    });

    // Initialize
    renderStep(0);
    startAutoPlay();
  </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;
      color: #1e2945;
      background: #ffffff;
      padding: 16px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 100%;
    }

    .gauge-card {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 14px 16px;
      margin-bottom: 14px;
    }

    .gauge-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
      font-weight: 700;
      font-size: 14px;
    }

    .count-badge {
      font-variant-numeric: tabular-nums;
      padding: 3px 10px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 700;
      transition: all 0.35s ease;
      background: #fee2e2;
      color: #b91c1c;
    }

    .pruned .count-badge {
      background: #dcfce7;
      color: #15803d;
    }

    .bar-track {
      width: 100%;
      height: 8px;
      background: #e2e8f0;
      border-radius: 999px;
      overflow: hidden;
    }

    .bar-fill {
      height: 100%;
      width: 100%;
      background: #ef4444;
      border-radius: 999px;
      transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease;
    }

    .pruned .bar-fill {
      width: 31.8%; /* 7 of 22 */
      background: #10b981;
    }

    /* Sentence Canvas */
    .sentence-box {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 18px 16px;
      font-size: 18px;
      line-height: 1.65;
      letter-spacing: -0.01em;
      min-height: 140px;
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      gap: 5px 6px;
      transition: border-color 0.3s ease;
    }

    .pruned .sentence-box {
      border-color: #86efac;
    }

    .phrase {
      position: relative;
      display: inline-flex;
      align-items: center;
      border-radius: 4px;
      padding: 1px 3px;
      transition: all 0.35s ease;
    }

    /* Redundant phrase styling */
    .redundant {
      color: #475569;
    }

    .strike-line {
      position: absolute;
      left: 0;
      top: 50%;
      width: 0%;
      height: 2px;
      background: #ef4444;
      border-radius: 1px;
      transform: translateY(-50%);
      transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .pruned .redundant {
      color: #94a3b8;
    }

    .pruned .redundant .strike-line {
      width: 100%;
    }

    /* Kept phrase styling */
    .kept {
      font-weight: 600;
      color: #1e2945;
      border-radius: 6px;
    }

    .pruned .kept {
      color: #047857;
      background: #ecfdf5;
      padding: 1px 6px;
    }

    .cap-switch::first-letter {
      text-transform: lowercase;
    }

    .pruned .cap-switch::first-letter {
      text-transform: uppercase;
    }

    /* Controls */
    .control-row {
      margin-top: 14px;
      display: flex;
      justify-content: center;
    }

    .prune-btn {
      appearance: none;
      border: none;
      cursor: pointer;
      background: #1e2945;
      color: #ffffff;
      font-size: 14px;
      font-weight: 600;
      padding: 10px 22px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: background-color 0.2s, box-shadow 0.2s;
      outline: none;
    }

    .prune-btn:hover {
      background: #0f172a;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    }

    .prune-btn:active {
      background: #020617;
    }

    .pruned .prune-btn {
      background: #059669;
    }

    .pruned .prune-btn:hover {
      background: #047857;
    }

    .icon-symbol {
      display: inline-block;
      font-size: 15px;
      transition: transform 0.3s ease;
    }

    .pruned .icon-symbol {
      transform: rotate(180deg);
    }
  </style>
</head>
<body>

  <div id="root">
    <div class="gauge-card">
      <div class="gauge-header">
        <span>Word Count</span>
        <span id="counter" class="count-badge">22 words</span>
      </div>
      <div class="bar-track">
        <div class="bar-fill"></div>
      </div>
    </div>

    <div class="sentence-box">
      <span class="phrase redundant">
        In my personal opinion,
        <span class="strike-line"></span>
      </span>
      <span class="phrase redundant">
        I think that
        <span class="strike-line"></span>
      </span>
      <span class="phrase kept cap-switch">the</span>
      <span class="phrase redundant">
        unexpected
        <span class="strike-line"></span>
      </span>
      <span class="phrase kept">surprise party</span>
      <span class="phrase kept">was</span>
      <span class="phrase redundant">
        completely and totally
        <span class="strike-line"></span>
      </span>
      <span class="phrase kept">ruined.</span>
    </div>

    <div class="control-row">
      <button id="toggleBtn" class="prune-btn" type="button" aria-pressed="false">
        <span class="icon-symbol">✂</span>
        <span id="btnLabel">Prune Sentence</span>
      </button>
    </div>
  </div>

  <script>
    const root = document.getElementById('root');
    const toggleBtn = document.getElementById('toggleBtn');
    const counter = document.getElementById('counter');
    const btnLabel = document.getElementById('btnLabel');

    let isPruned = false;

    function toggle() {
      isPruned = !isPruned;
      root.classList.toggle('pruned', isPruned);
      toggleBtn.setAttribute('aria-pressed', isPruned);

      if (isPruned) {
        counter.textContent = '7 words (68% trimmed)';
        btnLabel.textContent = 'Restore Sentence';
      } else {
        counter.textContent = '22 words';
        btnLabel.textContent = 'Prune Sentence';
      }
    }

    toggleBtn.addEventListener('click', toggle);
  </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 {
      background: #f8fafc;
      color: #1e293b;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .widget {
      width: 100%;
      max-width: 520px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    /* Tabs */
    .tab-bar {
      display: flex;
      background: #e2e8f0;
      padding: 4px;
      border-radius: 12px;
      gap: 4px;
    }

    .tab-btn {
      flex: 1;
      border: none;
      background: transparent;
      padding: 8px 14px;
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s ease;
      text-align: center;
    }

    .tab-btn.active {
      background: #ffffff;
      color: #0f172a;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    /* Cards container */
    .cards-wrapper {
      position: relative;
      min-height: 220px;
    }

    .tab-panel {
      display: none;
      flex-direction: column;
      gap: 10px;
      animation: fadeIn 0.25s ease forwards;
    }

    .tab-panel.active {
      display: flex;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(4px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* Comparison Row */
    .item-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    }

    .phrase-box {
      font-size: 15px;
      font-weight: 600;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 4px;
    }

    .redundant {
      color: #ef4444;
      background: #fee2e2;
      padding: 2px 6px;
      border-radius: 6px;
      text-decoration: line-through;
      text-decoration-thickness: 2px;
    }

    .arrow {
      color: #94a3b8;
      font-size: 16px;
      font-weight: bold;
    }

    .clean-box {
      font-size: 15px;
      font-weight: 700;
      color: #15803d;
      background: #dcfce7;
      padding: 4px 10px;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
    }

    .check {
      font-size: 13px;
      font-weight: 800;
    }
  </style>
</head>
<body>

  <div class="widget">
    
    <div class="tab-bar">
      <button class="tab-btn active" onclick="showTab('pleonasms', this)">Pleonasms</button>
      <button class="tab-btn" onclick="showTab('tautologies', this)">Tautologies</button>
    </div>

    
    <div class="cards-wrapper">
      
      
      <div id="pleonasms" class="tab-panel active">
        <div class="item-card">
          <div class="phrase-box">
            <span class="redundant">Past</span> history
          </div>
          <span class="arrow">→</span>
          <div class="clean-box">
            <span class="check">✓</span> History
          </div>
        </div>

        <div class="item-card">
          <div class="phrase-box">
            <span class="redundant">Unexpected</span> surprise
          </div>
          <span class="arrow">→</span>
          <div class="clean-box">
            <span class="check">✓</span> Surprise
          </div>
        </div>

        <div class="item-card">
          <div class="phrase-box">
            ATM <span class="redundant">machine</span>
          </div>
          <span class="arrow">→</span>
          <div class="clean-box">
            <span class="check">✓</span> ATM
          </div>
        </div>
      </div>

      
      <div id="tautologies" class="tab-panel">
        <div class="item-card">
          <div class="phrase-box">
            Adequate <span class="redundant">enough</span>
          </div>
          <span class="arrow">→</span>
          <div class="clean-box">
            <span class="check">✓</span> Adequate
          </div>
        </div>

        <div class="item-card">
          <div class="phrase-box">
            Short <span class="redundant">in duration</span>
          </div>
          <span class="arrow">→</span>
          <div class="clean-box">
            <span class="check">✓</span> Short
          </div>
        </div>
      </div>

    </div>
  </div>

  <script>
    function showTab(panelId, btn) {
      document.querySelectorAll('.tab-panel').forEach(panel => {
        panel.classList.remove('active');
      });
      document.querySelectorAll('.tab-btn').forEach(b => {
        b.classList.remove('active');
      });

      document.getElementById(panelId).classList.add('active');
      btn.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;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

    body {
      background: #ffffff;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      user-select: none;
    }

    .header-row {
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: 10px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
      padding: 0 4px;
    }

    .cards-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .pair-row {
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: 10px;
      align-items: stretch;
      cursor: pointer;
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 8px;
      padding: 10px 12px;
      transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
    }

    .pair-row:hover {
      border-color: #cbd5e1;
      background: #f1f5f9;
    }

    .pair-row.active {
      border-color: #10b981;
      background: #f0fdf4;
      box-shadow: 0 2px 6px rgba(16, 185, 129, 0.12);
    }

    .side {
      display: flex;
      align-items: center;
      font-size: 13.5px;
      line-height: 1.35;
      font-weight: 500;
    }

    .clunky-side {
      color: #1e2945;
      position: relative;
    }

    .strike-text {
      color: #94a3b8;
      position: relative;
      display: inline-block;
      transition: color 0.3s ease;
    }

    .pair-row.active .strike-text {
      color: #ef4444;
      text-decoration: line-through;
      text-decoration-color: #ef4444;
      text-decoration-thickness: 2px;
    }

    .keep-text {
      color: #1e2945;
      font-weight: 600;
      transition: color 0.3s ease;
    }

    .pair-row.active .clunky-side .keep-text {
      color: #0f172a;
    }

    .lean-side {
      display: flex;
      align-items: center;
      gap: 6px;
      color: #64748b;
      transition: color 0.3s ease;
    }

    .arrow {
      color: #94a3b8;
      font-size: 13px;
      transition: transform 0.3s ease, color 0.3s ease;
    }

    .pair-row.active .arrow {
      color: #10b981;
      transform: translateX(2px);
    }

    .lean-badge {
      font-weight: 700;
      color: #475569;
      background: transparent;
      padding: 2px 6px;
      border-radius: 4px;
      transition: all 0.3s ease;
    }

    .pair-row.active .lean-badge {
      background: #10b981;
      color: #ffffff;
    }

    .hint-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      color: #64748b;
      padding: 2px 4px;
    }

    .hint-btn {
      background: #1e2945;
      color: #ffffff;
      border: none;
      border-radius: 6px;
      padding: 5px 10px;
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .hint-btn:hover {
      background: #0f172a;
    }

    @media (max-width: 380px) {
      .header-row, .pair-row {
        grid-template-columns: 1.1fr 0.9fr;
        gap: 6px;
      }
      .side {
        font-size: 12.5px;
      }
      .lean-badge {
        padding: 2px 4px;
      }
    }
  </style>
</head>
<body>

  <div class="header-row">
    <div>Clunky Construction</div>
    <div>Lean Action</div>
  </div>

  <div class="cards-list" id="cardsList">
    
    <div class="pair-row active" onclick="toggleRow(this)">
      <div class="side clunky-side">
        <span><span class="strike-text">There are</span> <span class="keep-text">several studies</span> <span class="strike-text">that</span> <span class="keep-text">show</span></span>
      </div>
      <div class="side lean-side">
        <span class="arrow">→</span>
        <span class="lean-badge">Several studies show</span>
      </div>
    </div>

    
    <div class="pair-row active" onclick="toggleRow(this)">
      <div class="side clunky-side">
        <span><span class="strike-text">It is believed by</span> <span class="keep-text">the team</span> <span class="strike-text">that</span></span>
      </div>
      <div class="side lean-side">
        <span class="arrow">→</span>
        <span class="lean-badge">The team believes</span>
      </div>
    </div>

    
    <div class="pair-row active" onclick="toggleRow(this)">
      <div class="side clunky-side">
        <span><span class="strike-text">Conduct an</span> <span class="keep-text">examination</span> <span class="strike-text">of</span></span>
      </div>
      <div class="side lean-side">
        <span class="arrow">→</span>
        <span class="lean-badge">Examine</span>
      </div>
    </div>

    
    <div class="pair-row active" onclick="toggleRow(this)">
      <div class="side clunky-side">
        <span><span class="strike-text">Reach a</span> <span class="keep-text">conclusion</span></span>
      </div>
      <div class="side lean-side">
        <span class="arrow">→</span>
        <span class="lean-badge">Conclude</span>
      </div>
    </div>
  </div>

  <div class="hint-bar">
    <span>Tap any row to compare</span>
    <button class="hint-btn" onclick="toggleAll()">Toggle All</button>
  </div>

  <script>
    function toggleRow(el) {
      el.classList.toggle('active');
    }

    function toggleAll() {
      const rows = document.querySelectorAll('.pair-row');
      const anyActive = Array.from(rows).some(r => r.classList.contains('active'));
      rows.forEach(r => {
        if (anyActive) {
          r.classList.remove('active');
        } else {
          r.classList.add('active');
        }
      });
    }
  </script>
</body>
</html>

OGE.8.L.8

Aligned learning resources

Related diagrams