<!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>Topic to Theme Transformation</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: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
    }

    .header-bar {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
    }

    .badge-title {
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #0284c7;
      background: #e0f2fe;
      padding: 4px 10px;
      border-radius: 12px;
    }

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

    .ctrl-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      padding: 4px 10px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: background 0.2s, border-color 0.2s;
    }

    .ctrl-btn:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }

    .pipeline-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      width: 100%;
      margin: 6px 0;
      position: relative;
    }

    @media (max-width: 580px) {
      .pipeline-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }
    }

    .step-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 8px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      transition: border-color 0.25s, box-shadow 0.25s, background-color 0.25s;
      position: relative;
      user-select: none;
    }

    .step-card.active {
      border-color: #0284c7;
      background: #f0f9ff;
      box-shadow: 0 4px 12px rgba(2, 132, 199, 0.15);
    }

    .step-num {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #e2e8f0;
      color: #64748b;
      font-size: 11px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 6px;
      transition: background 0.25s, color 0.25s;
    }

    .step-card.active .step-num {
      background: #0284c7;
      color: #ffffff;
    }

    .step-label {
      font-size: 11px;
      font-weight: 700;
      color: #475569;
      text-transform: uppercase;
      letter-spacing: 0.3px;
      line-height: 1.2;
    }

    .step-card.active .step-label {
      color: #0369a1;
    }

    /* Focus Panel */
    .focus-panel {
      width: 100%;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 12px;
      padding: 14px;
      margin-top: 4px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
      min-height: 145px;
      justify-content: center;
    }

    .stage-indicator {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      font-weight: 700;
      color: #0284c7;
    }

    .stage-pill {
      background: #0284c7;
      color: #fff;
      padding: 2px 8px;
      border-radius: 10px;
      font-size: 11px;
    }

    .stage-content-box {
      background: #f8fafc;
      border-left: 4px solid #0284c7;
      padding: 10px 12px;
      border-radius: 0 8px 8px 0;
      font-size: 15px;
      line-height: 1.45;
      font-weight: 600;
      color: #0f172a;
    }

    .stage-role {
      font-size: 12px;
      color: #64748b;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 5px;
    }

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

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

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

  <div class="header-bar">
    <div class="badge-title">From Topic to Theme</div>
    <div class="controls">
      <button class="ctrl-btn" id="prevBtn" title="Previous Stage">◀</button>
      <button class="ctrl-btn" id="playBtn" title="Auto Play">▶ Play</button>
      <button class="ctrl-btn" id="nextBtn" title="Next Stage">▶</button>
    </div>
  </div>

  <div class="pipeline-grid">
    <div class="step-card active" data-index="0">
      <div class="step-num">1</div>
      <div class="step-label">Abstract<br>Topic</div>
    </div>
    <div class="step-card" data-index="1">
      <div class="step-num">2</div>
      <div class="step-label">Thematic<br>Question</div>
    </div>
    <div class="step-card" data-index="2">
      <div class="step-num">3</div>
      <div class="step-label">Draft<br>Assertion</div>
    </div>
    <div class="step-card" data-index="3">
      <div class="step-num">4</div>
      <div class="step-label">Refine &amp;<br>Polish</div>
    </div>
  </div>

  <div class="focus-panel">
    <div class="stage-indicator">
      <span class="stage-pill" id="stagePill">Step 1 of 4</span>
      <span id="stageName">Abstract Topic</span>
    </div>
    <div class="stage-content-box" id="stageText">
      "Ambition"
    </div>
    <div class="stage-role" id="stageRole">
      ✦ One-word subject or central concept.
    </div>
  </div>

  <div class="stepper-dots">
    <div class="dot active" data-index="0"></div>
    <div class="dot" data-index="1"></div>
    <div class="dot" data-index="2"></div>
    <div class="dot" data-index="3"></div>
  </div>

  <script>
    const stages = [
      {
        pill: "Step 1 of 4",
        name: "Abstract Topic",
        text: "“Ambition”",
        role: "✦ One-word concept (the subject, not the message)"
      },
      {
        pill: "Step 2 of 4",
        name: "Thematic Question",
        text: "“What does unchecked ambition do to a person’s relationships?”",
        role: "✦ Probes human nature and story consequences"
      },
      {
        pill: "Step 3 of 4",
        name: "Draft Assertion",
        text: "“Unchecked ambition leads to isolation.”",
        role: "✦ A complete sentence stating a direct cause & effect"
      },
      {
        pill: "Step 4 of 4",
        name: "Refine & Polish",
        text: "“When individuals prioritize personal ambition over loyalty, they inevitably alienate the community that supports them.”",
        role: "✦ Nuanced, universal truth applied beyond plot"
      }
    ];

    let currentIndex = 0;
    let timer = null;

    const cards = document.querySelectorAll('.step-card');
    const dots = document.querySelectorAll('.dot');
    const stagePill = document.getElementById('stagePill');
    const stageName = document.getElementById('stageName');
    const stageText = document.getElementById('stageText');
    const stageRole = document.getElementById('stageRole');
    const playBtn = document.getElementById('playBtn');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');

    function renderStage(index) {
      currentIndex = index;
      const data = stages[index];

      cards.forEach((c, i) => c.classList.toggle('active', i === index));
      dots.forEach((d, i) => d.classList.toggle('active', i === index));

      stagePill.textContent = data.pill;
      stageName.textContent = data.name;
      stageText.textContent = data.text;
      stageRole.textContent = data.role;
    }

    function nextStage() {
      renderStage((currentIndex + 1) % stages.length);
    }

    function prevStage() {
      renderStage((currentIndex - 1 + stages.length) % stages.length);
    }

    function togglePlay() {
      if (timer) {
        clearInterval(timer);
        timer = null;
        playBtn.textContent = '▶ Play';
      } else {
        nextStage();
        timer = setInterval(nextStage, 3500);
        playBtn.textContent = '⏸ Pause';
      }
    }

    cards.forEach(card => {
      card.addEventListener('click', () => {
        if (timer) togglePlay();
        renderStage(parseInt(card.getAttribute('data-index'), 10));
      });
    });

    dots.forEach(dot => {
      dot.addEventListener('click', () => {
        if (timer) togglePlay();
        renderStage(parseInt(dot.getAttribute('data-index'), 10));
      });
    });

    playBtn.addEventListener('click', togglePlay);
    nextBtn.addEventListener('click', () => {
      if (timer) togglePlay();
      nextStage();
    });
    prevBtn.addEventListener('click', () => {
      if (timer) togglePlay();
      prevStage();
    });
  </script>
</body>
</html>

Distinguishing Literary Topics from Thematic Statements

<!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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background: transparent;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-height: 100%;
    }

    .header-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 4px;
    }

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

    .cards-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 12px;
      width: 100%;
    }

    .compare-card {
      background: #ffffff;
      border-radius: 12px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      border: 2px solid #e2e8f0;
      transition: box-shadow 0.2s ease, border-color 0.2s ease;
      position: relative;
    }

    /* Left - Moral Cliché */
    .compare-card.flawed {
      border-color: #fecaca;
      background: #fffafa;
    }

    /* Right - Thematic Assertion */
    .compare-card.effective {
      border-color: #bbf7d0;
      background: #f8fdf9;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 700;
      width: fit-content;
    }

    .badge-flawed {
      background: #fee2e2;
      color: #dc2626;
    }

    .badge-effective {
      background: #dcfce7;
      color: #16a34a;
    }

    .quote-box {
      font-size: 16px;
      line-height: 1.45;
      font-weight: 600;
      padding: 12px;
      border-radius: 8px;
      position: relative;
    }

    .flawed .quote-box {
      background: #ffffff;
      border: 1px dashed #fca5a5;
      color: #7f1d1d;
    }

    .effective .quote-box {
      background: #ffffff;
      border: 1px solid #86efac;
      color: #14532d;
    }

    .highlight-flaw {
      text-decoration: underline wavy #ef4444;
      background: #fee2e2;
      padding: 0 2px;
      border-radius: 3px;
    }

    .highlight-topic {
      background: #e0f2fe;
      color: #0369a1;
      padding: 0 3px;
      border-radius: 3px;
    }

    .highlight-claim {
      background: #dcfce7;
      color: #15803d;
      padding: 0 3px;
      border-radius: 3px;
    }

    .traits-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: auto;
    }

    .trait-item {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      font-size: 13.5px;
      line-height: 1.35;
      padding: 6px 8px;
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.7);
    }

    .trait-item.negative {
      color: #991b1b;
    }

    .trait-item.positive {
      color: #166534;
    }

    .trait-icon {
      font-weight: bold;
      font-size: 14px;
      flex-shrink: 0;
      line-height: 1.2;
    }

    .bottom-hint {
      font-size: 12.5px;
      color: #64748b;
      text-align: center;
      padding: 2px 0;
    }
  </style>
</head>
<body>

  <div class="header-bar">
    <span class="title">Cliché vs. Thematic Statement</span>
  </div>

  <div class="cards-grid">
    
    <div class="compare-card flawed">
      <span class="badge badge-flawed">✕ Preachy Command</span>
      
      <div class="quote-box">
        "<span class="highlight-flaw">You should never</span> give up on your family."
      </div>

      <div class="traits-list">
        <div class="trait-item negative">
          <span class="trait-icon">✕</span>
          <span><strong>Prescriptive advice:</strong> Tells reader how to act</span>
        </div>
        <div class="trait-item negative">
          <span class="trait-icon">✕</span>
          <span><strong>Moral cliché:</strong> Simplifies human conflict</span>
        </div>
      </div>
    </div>

    
    <div class="compare-card effective">
      <span class="badge badge-effective">✓ Analytical Assertion</span>
      
      <div class="quote-box">
        "<span class="highlight-topic">Familial loyalty</span> <span class="highlight-claim">forces individuals to choose between desire and duty</span>."
      </div>

      <div class="traits-list">
        <div class="trait-item positive">
          <span class="trait-icon">✓</span>
          <span><strong>Human observation:</strong> Explores life as it is</span>
        </div>
        <div class="trait-item positive">
          <span class="trait-icon">✓</span>
          <span><strong>Nuanced & arguable:</strong> Opens analytical debate</span>
        </div>
      </div>
    </div>
  </div>

  <div class="bottom-hint">
    Themes make <strong>observations</strong> about reality — they do not preach moral rules.
  </div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Topic vs. Thematic Statement</title>
  <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: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
    }

    .main-wrap {
      width: 100%;
      max-width: 640px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* Example selector tabs */
    .tab-bar {
      display: flex;
      justify-content: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    .tab-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #475569;
      font-size: 13px;
      font-weight: 600;
      padding: 6px 12px;
      border-radius: 20px;
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
      outline: none;
    }

    .tab-btn:hover {
      border-color: #94a3b8;
      color: #1e2945;
    }

    .tab-btn.active {
      background: #1e2945;
      color: #ffffff;
      border-color: #1e2945;
      box-shadow: 0 2px 6px rgba(30, 41, 69, 0.15);
    }

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

    /* Cards */
    .card-box {
      background: #ffffff;
      border-radius: 12px;
      padding: 14px;
      border: 1px solid #e2e8f0;
      display: flex;
      flex-direction: column;
      gap: 10px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      position: relative;
    }

    .card-box.topic-box {
      border-top: 4px solid #f97316;
    }

    .card-box.theme-box {
      border-top: 4px solid #0284c7;
    }

    .header-tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      padding: 3px 8px;
      border-radius: 6px;
      width: fit-content;
    }

    .topic-tag {
      background: #fff7ed;
      color: #c2410c;
    }

    .theme-tag {
      background: #f0f9ff;
      color: #0369a1;
    }

    .traits-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .trait-item {
      font-size: 13px;
      color: #64748b;
      display: flex;
      align-items: center;
      gap: 6px;
      font-weight: 500;
      line-height: 1.3;
    }

    .trait-bullet {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .topic-box .trait-bullet {
      background: #f97316;
    }

    .theme-box .trait-bullet {
      background: #0284c7;
    }

    .example-display {
      background: #f8fafc;
      border-radius: 8px;
      padding: 10px 12px;
      border: 1px dashed #cbd5e1;
      min-height: 72px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .example-label {
      font-size: 10px;
      font-weight: 700;
      color: #94a3b8;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 3px;
    }

    .example-text {
      font-size: 14px;
      font-weight: 600;
      color: #1e2945;
      line-height: 1.35;
      transition: opacity 0.2s ease;
    }

    .topic-box .example-text {
      color: #c2410c;
      font-size: 16px;
    }

    .theme-box .example-text {
      color: #0f172a;
    }

    /* Connector */
    .arrow-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 0 4px;
    }

    .arrow-circle {
      width: 36px;
      height: 36px;
      background: #e0f2fe;
      border: 1px solid #bae6fd;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #0284c7;
      font-size: 18px;
      font-weight: bold;
      box-shadow: 0 0 12px rgba(2, 132, 199, 0.2);
      flex-shrink: 0;
    }

    .arrow-label {
      font-size: 11px;
      font-weight: 700;
      color: #0369a1;
      text-align: center;
      white-space: nowrap;
    }

    /* Responsive Mobile Layout */
    @media (max-width: 560px) {
      body {
        padding: 8px;
      }

      .tab-btn {
        font-size: 12px;
        padding: 5px 10px;
      }

      .comparison-grid {
        grid-template-columns: 1fr;
        gap: 6px;
      }

      .card-box {
        padding: 12px;
        gap: 8px;
      }

      .example-display {
        min-height: 60px;
        padding: 8px 10px;
      }

      .arrow-col {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 8px;
        padding: 4px 0;
      }

      .arrow-circle {
        width: 28px;
        height: 28px;
        font-size: 15px;
        transform: rotate(90deg);
      }

      .arrow-label {
        font-size: 11px;
      }
    }
  </style>
</head>
<body>

  <div class="main-wrap">
    
    <div class="tab-bar">
      <button class="tab-btn active" data-index="0">1. Courage</button>
      <button class="tab-btn" data-index="1">2. Survival</button>
      <button class="tab-btn" data-index="2">3. Ambition</button>
    </div>

    
    <div class="comparison-grid">
      
      
      <div class="card-box topic-box">
        <div>
          <div class="header-tag topic-tag">
            <span>●</span> Topic (Subject)
          </div>
          <ul class="traits-list" style="margin-top: 8px;">
            <li class="trait-item">
              <span class="trait-bullet"></span> 1–2 words
            </li>
            <li class="trait-item">
              <span class="trait-bullet"></span> Abstract concept
            </li>
          </ul>
        </div>

        <div class="example-display">
          <div class="example-label">Example</div>
          <div class="example-text" id="topic-text">Courage</div>
        </div>
      </div>

      
      <div class="arrow-col">
        <div class="arrow-circle">→</div>
        <div class="arrow-label">+ adds message</div>
      </div>

      
      <div class="card-box theme-box">
        <div>
          <div class="header-tag theme-tag">
            <span>✦</span> Thematic Statement
          </div>
          <ul class="traits-list" style="margin-top: 8px;">
            <li class="trait-item">
              <span class="trait-bullet"></span> Complete sentence
            </li>
            <li class="trait-item">
              <span class="trait-bullet"></span> Universal claim about life
            </li>
          </ul>
        </div>

        <div class="example-display">
          <div class="example-label">Example</div>
          <div class="example-text" id="theme-text">True courage requires confronting fear rather than pretending it does not exist.</div>
        </div>
      </div>

    </div>
  </div>

  <script>
    const examples = [
      {
        topic: "Courage",
        theme: "True courage requires confronting fear rather than pretending it does not exist."
      },
      {
        topic: "Survival",
        theme: "Desperation for survival can test human morality and empathy."
      },
      {
        topic: "Ambition",
        theme: "Unchecked ambition often destroys the relationships that matter most."
      }
    ];

    const buttons = document.querySelectorAll('.tab-btn');
    const topicEl = document.getElementById('topic-text');
    const themeEl = document.getElementById('theme-text');

    function setExample(idx) {
      buttons.forEach((btn, i) => {
        btn.classList.toggle('active', i === idx);
      });

      topicEl.style.opacity = '0';
      themeEl.style.opacity = '0';

      setTimeout(() => {
        topicEl.textContent = examples[idx].topic;
        themeEl.textContent = examples[idx].theme;
        topicEl.style.opacity = '1';
        themeEl.style.opacity = '1';
      }, 150);
    }

    buttons.forEach((btn) => {
      btn.addEventListener('click', () => {
        const idx = parseInt(btn.getAttribute('data-index'), 10);
        setExample(idx);
      });
    });
  </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;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 16px;
      gap: 16px;
      min-height: 100%;
    }

    .selector-bar {
      display: flex;
      gap: 8px;
      background: #f1f5f9;
      padding: 4px;
      border-radius: 12px;
      width: 100%;
      max-width: 480px;
    }

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

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

    .sample-box {
      font-size: 16px;
      font-weight: 700;
      color: #0f172a;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      padding: 10px 18px;
      border-radius: 10px;
      text-align: center;
      width: 100%;
      max-width: 480px;
      letter-spacing: -0.01em;
    }

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

    .step-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      transition: border-color 0.25s ease, background-color 0.25s ease;
    }

    .step-card.pass {
      border-color: #a7f3d0;
      background-color: #f0fdf4;
    }

    .step-card.fail {
      border-color: #fecaca;
      background-color: #fef2f2;
    }

    .left-group {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .status-icon {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      font-weight: bold;
      flex-shrink: 0;
      transition: background-color 0.2s ease, color 0.2s ease;
    }

    .pass .status-icon {
      background: #10b981;
      color: #ffffff;
    }

    .fail .status-icon {
      background: #ef4444;
      color: #ffffff;
    }

    .title-group {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .step-num {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #64748b;
    }

    .step-title {
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
    }

    .badge {
      font-size: 12px;
      font-weight: 600;
      padding: 4px 10px;
      border-radius: 20px;
      white-space: nowrap;
      transition: background-color 0.2s ease, color 0.2s ease;
    }

    .badge-sentence { background: #e0f2fe; color: #0369a1; }
    .badge-universal { background: #ede9fe; color: #6d28d9; }
    .badge-arguable { background: #fef3c7; color: #b45309; }

    .fail .badge {
      background: #fee2e2;
      color: #b91c1c;
    }
  </style>
</head>
<body>

  <div class="selector-bar">
    <button class="toggle-btn" id="btnTopic" onclick="setMode('topic')">Topic</button>
    <button class="toggle-btn active" id="btnTheme" onclick="setMode('theme')">Thematic Statement</button>
  </div>

  <div class="sample-box" id="sampleText">"Survival requires sacrifice."</div>

  <div class="checklist">
    
    <div class="step-card pass" id="step1">
      <div class="left-group">
        <div class="status-icon" id="icon1">✓</div>
        <div class="title-group">
          <span class="step-num">Rule 1</span>
          <span class="step-title">Complete Sentence</span>
        </div>
      </div>
      <span class="badge badge-sentence" id="badge1">Subject + Verb</span>
    </div>

    
    <div class="step-card pass" id="step2">
      <div class="left-group">
        <div class="status-icon" id="icon2">✓</div>
        <div class="title-group">
          <span class="step-num">Rule 2</span>
          <span class="step-title">Universal</span>
        </div>
      </div>
      <span class="badge badge-universal" id="badge2">All Humans</span>
    </div>

    
    <div class="step-card pass" id="step3">
      <div class="left-group">
        <div class="status-icon" id="icon3">✓</div>
        <div class="title-group">
          <span class="step-num">Rule 3</span>
          <span class="step-title">Arguable Assertion</span>
        </div>
      </div>
      <span class="badge badge-arguable" id="badge3">Debatable Stance</span>
    </div>
  </div>

  <script>
    const data = {
      theme: {
        text: '"Survival requires sacrifice."',
        cards: ['pass', 'pass', 'pass'],
        icons: ['✓', '✓', '✓'],
        badges: ['Subject + Verb', 'All Humans', 'Debatable Stance'],
        badgeClasses: ['badge-sentence', 'badge-universal', 'badge-arguable']
      },
      topic: {
        text: '"Survival"',
        cards: ['fail', 'fail', 'fail'],
        icons: ['✕', '✕', '✕'],
        badges: ['Fragment', '1-Word Topic', 'No Stance'],
        badgeClasses: ['', '', '']
      }
    };

    function setMode(mode) {
      document.getElementById('btnTopic').classList.toggle('active', mode === 'topic');
      document.getElementById('btnTheme').classList.toggle('active', mode === 'theme');

      const current = data[mode];
      document.getElementById('sampleText').textContent = current.text;

      for (let i = 1; i <= 3; i++) {
        const card = document.getElementById(`step${i}`);
        const icon = document.getElementById(`icon${i}`);
        const badge = document.getElementById(`badge${i}`);

        card.className = `step-card ${current.cards[i - 1]}`;
        icon.textContent = current.icons[i - 1];
        badge.textContent = current.badges[i - 1];
        badge.className = `badge ${current.badgeClasses[i - 1]}`;
      }
    }
  </script>
</body>
</html>

What Is Character Motivation?

Internal vs. External Motivations

Primary vs. Secondary Motivations

How Motivations Create Conflict

Character Behavior as Motivation in Action

How Character Choices Drive Plot Events

How Motivations Shape Conflict Resolution

Analyzing Multiple Characters' Motivations in a Story

Character Motivation and Conflict

Distinguishing Explicit Text Details from Deeper Literary Inferences

Selecting and Ranking the Strongest Textual Evidence

Drawing Text Evidence from Literary Works to Support Thematic Claims

Comparative Evidence Analysis Across Diverse Literary Genres

Identifying and Interpreting Authorial Ambiguity and Nuance

Integrating Quoted Evidence Smoothly into Analytical Writing

Textual Evidence, Inference, and Thematic Interpretation

Evaluating Why an Author Chose a Particular Structure

Comparing Text Structures Across Texts on the Same Topic

Identifying Hybrid Texts That Combine Multiple Genres

How Text Purpose Shapes Organisation and Language Choices

Recognising How Texts Reflect Their Historical and Cultural Contexts

Identifying Social and Cultural Values Embedded in Texts

Distinguishing Stated From Implied Purpose

Evaluating Whether an Author Achieved Their Purpose

Tracing How Authors Develop and Shape Meaning

Analysing How Quotations and Sources Are Used to Support Claims

Understanding Text Structures and Purposes

Writing an Objective Summary With Central Ideas

Tracing How Central Ideas Develop Across a Text

Determining Theme in Complex Literature

Tracing Theme Through Characters, Setting, and Plot

Writing an Objective Summary of Complex Literature

Determining Central Idea in Complex Informational Text

Analyzing How Central Ideas Connect to Supporting Ideas

Writing an Objective Summary of Complex Informational Text

Comparing Theme and Central Idea Across Text Types

Analyzing Theme and Central Idea Development

What Is Theme in Literature?

Distinguishing Theme from Topic and Subject

How Characters Embody and Express Themes

How Events Reveal and Develop Themes

How Characters and Events Interact to Build Theme

Tracing a Theme Across a Full Text

How Character Change Reveals Theme

Analyzing Multiple Interconnected Themes

Theme Development Through Characters and Events

Tracing Theme Evolution Through Character Interactions

Analyzing How Symbolic Settings Mirror Thematic Shifts

Tracking Thematic Threads Across Plot Turning Points

Crafting Concise and Objective Literary Summaries

Discovering Universal Human Experiences Across Diverse World Texts

Theme Development, Plot Dynamics, and Objective Summaries

What Is Paraphrasing? Restating in Your Own Words

Paraphrasing Sentences From Literary Texts

Paraphrasing Sentences From Informational Texts

Paraphrasing Longer Passages While Keeping Meaning

Maintaining Logical Order When Paraphrasing

Paraphrasing Texts: Restating Meaning in Your Own Words

What Is Linear Plot Development?

The Classic Plot Arc: Exposition to Resolution

What Is Non-Linear Plot Development?

Flashbacks: Looking Back to Move the Story Forward

Foreshadowing: Planting Clues for the Reader

Subplots: Stories Within the Story

Parallel Plot Structures: Intertwining Narratives

Why Authors Choose Non-Linear Structures

Comparing Linear and Non-Linear Plot Development

Analyzing Plot Structure in a Complete Text

Plot Structures: Linear and Non-Linear Narratives

What Is Summarizing? Finding the Most Important Ideas

Summarizing Narrative Texts: Plot, Character, and Theme

Summarizing Informational Texts: Central Ideas and Key Details

Summarizing Argumentative Texts: Claims and Evidence

Writing Objective Summaries Without Adding Opinions

Summarizing Texts: Capturing Central Ideas

Analyzing Conventions of Realistic Fiction and Social Realism

Evaluating Speculative Worldbuilding in Science Fiction and Fantasy

Analyzing Historical Fiction: Blending Fact with Narrative Invention

Comparing Themes Across Different Literary Genres

Evaluating Genre Subversion and Hybrid Literary Forms

Genre Taxonomy and Comparative Form Analysis

Writing Responses That Show Understanding of a Single Text

Writing Responses That Compare Multiple Texts

Selecting the Right Details to Include in a Response

Organizing a Written Response With Clear Structure

Reconciling Conflicting Information Across Texts

Application: Writing a Comparative Response Across Texts

Writing Responses That Demonstrate Textual Understanding

Paraphrasing Short Passages Without Losing Meaning

Summarizing Informational Texts Effectively

Summarizing Narrative Texts Effectively

Summarizing Argumentative Texts Effectively

Maintaining Logical Order in Paraphrases and Summaries

Paraphrasing and Summarizing Texts

How Theme Emerges From Character and Plot Interaction

Analyzing Character Choices That Reveal Theme

Analyzing How Events Reveal Theme

Tracing Theme Development Across a Full Text

Analyzing Theme in Literary Texts

Denotación y connotación en el análisis semántico

Polisemia, monosemia y homonimia en el discurso académico

Relaciones semánticas de antonimia: gradual, complementaria y recíproca

Analogías verbales: relaciones de causa, parte-todo y equivalencia

Semántica avanzada y relaciones léxicas

Precisión léxica y sustitución de verbos comodín

Tecnicismos, neologismos, préstamos léxicos y extranjerismos

Eufemismos, disfemismos y lenguaje políticamente correcto

Campos semánticos asociativos en la creación de sentido

Aplicación de vocabulario académico en ensayos disciplinares

Precisión léxica y aplicación del vocabulario académico

Elaboración de hipótesis de lectura: paratextos y títulos

Identificación de la idea principal explícita e implícita

Distinción entre ideas principales, secundarias y detalles de apoyo

Síntesis de información mediante cuadros sinópticos y mapas conceptuales

Caracterización de textos según la intención comunicativa

Análisis de textos discontinuos: infografías, gráficos y mapas

Lectura e interpretación de tablas estadísticas y diagramas de flujo

Comprensión y organización de textos informativos y discontinuos

Inferencia de sentidos implícitos e intenciones no declaradas

Reconocimiento del contexto sociohistórico y cultural de producción

Distinción entre hechos verificables, opiniones y juicios de valor

Análisis del tono y la postura enunciativa del autor

Comparación intertextual de dos artículos sobre el mismo fenómeno

Citación de evidencias textuales para sustentar interpretaciones

Evaluación crítica de la solidez global de textos divulgativos

Análisis crítico y evaluación de textos informativos

Estructura de los textos argumentativos: tesis, cuerpo y conclusión

Identificación de la tesis en posiciones inicial, media o final

Argumentos de tipo descriptivo y caracterización de situaciones

Argumentos lógico-racionales: deducción, inducción y causa

Argumentos de autoridad: testimonios y citas de expertos

Argumentos afectivo-emotivos: apelación a los sentimientos y empatía

Análisis de contraargumentos y estrategias de concesión

Estructura y tipos de argumentos en textos argumentativos

Detección de falacias: ad hominem, ad verecundiam y ad populum

Detección de falacias: generalización apresurada y falsa causa

Detección de falacias: hombre de paja y falso dilema

Evaluación de la suficiencia, relevancia y validez de las evidencias

Identificación de supuestos e ideologías en el discurso argumentativo

Confrontación crítica de dos posturas opuestas sobre un dilema social

Redacción de un comentario crítico sobre un texto argumentativo

Falacias lógicas y evaluación crítica del discurso argumentativo

OGE.9.RL.2

OGE.9.RL.2

Aligned learning resources

Related diagrams