<!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: 12px;
      line-height: 1.35;
    }

    /* Formula Header */
    .formula-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      flex-wrap: wrap;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 8px 10px;
      margin-bottom: 12px;
      font-size: 13px;
      font-weight: 600;
    }
    .f-pill {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 8px;
      border-radius: 6px;
      font-size: 12px;
      white-space: nowrap;
    }
    .f-clue { background: #e0f2fe; color: #0369a1; }
    .f-stance { background: #f3e8ff; color: #7e22ce; }
    .f-result { background: #dcfce7; color: #15803d; }
    .op { color: #94a3b8; font-weight: 700; }

    /* Sample Box */
    .sample-context {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 12px;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      font-size: 13px;
    }
    .sample-title {
      font-weight: 700;
      color: #0f172a;
    }
    .sample-tag {
      background: #f1f5f9;
      color: #475569;
      font-size: 11px;
      padding: 2px 6px;
      border-radius: 4px;
      font-weight: 600;
      white-space: nowrap;
    }

    /* Interactive Stance Tabs */
    .stance-tabs {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-bottom: 12px;
    }
    .tab-btn {
      border: 2px solid transparent;
      border-radius: 8px;
      padding: 8px 4px;
      cursor: pointer;
      font-size: 13px;
      font-weight: 700;
      text-align: center;
      transition: background-color 0.2s, box-shadow 0.2s;
      outline: none;
      user-select: none;
    }
    .tab-btn[data-stance="info"] {
      background: #eff6ff;
      color: #1d4ed8;
      border-color: #bfdbfe;
    }
    .tab-btn[data-stance="info"].active {
      background: #1d4ed8;
      color: #ffffff;
      box-shadow: 0 2px 8px rgba(29, 78, 216, 0.3);
    }
    .tab-btn[data-stance="aest"] {
      background: #faf5ff;
      color: #7e22ce;
      border-color: #e9d5ff;
    }
    .tab-btn[data-stance="aest"].active {
      background: #7e22ce;
      color: #ffffff;
      box-shadow: 0 2px 8px rgba(126, 34, 206, 0.3);
    }
    .tab-btn[data-stance="crit"] {
      background: #fffbeb;
      color: #b45309;
      border-color: #fde68a;
    }
    .tab-btn[data-stance="crit"].active {
      background: #b45309;
      color: #ffffff;
      box-shadow: 0 2px 8px rgba(180, 83, 9, 0.3);
    }

    /* Output Card */
    .output-card {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      border-radius: 10px;
      padding: 14px;
      min-height: 140px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
    }
    .output-card.info-active { border-color: #93c5fd; background: #f8faff; }
    .output-card.aest-active { border-color: #d8b4fe; background: #fdfaff; }
    .output-card.crit-active { border-color: #fcd34d; background: #fffdf5; }

    .output-meta {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 8px;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      font-weight: 700;
    }
    .output-question {
      font-size: 15px;
      font-weight: 600;
      color: #0f172a;
      line-height: 1.4;
    }

    .output-focus {
      margin-top: 8px;
      font-size: 12px;
      color: #64748b;
      font-weight: 500;
    }

    /* Indicators */
    .nav-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 10px;
    }
    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      border: none;
      padding: 0;
      transition: background-color 0.2s;
    }
    .dot.active {
      background: #1e2945;
    }
  </style>
</head>
<body>

  
  <div class="formula-bar">
    <span class="f-pill f-clue">🏷️ Title + Genre</span>
    <span class="op">+</span>
    <span class="f-pill f-stance">🎯 Chosen Stance</span>
    <span class="op">→</span>
    <span class="f-pill f-result">❓ Inquiry Question</span>
  </div>

  
  <div class="sample-context">
    <span class="sample-title">📖 "The Concrete Canopy: Urban Heat in Major Cities"</span>
    <span class="sample-tag">Nonfiction Essay</span>
  </div>

  
  <div class="stance-tabs" role="tablist">
    <button class="tab-btn active" data-stance="info" onclick="setStance(0)">
      1. Informational
    </button>
    <button class="tab-btn" data-stance="aest" onclick="setStance(1)">
      2. Aesthetic
    </button>
    <button class="tab-btn" data-stance="crit" onclick="setStance(2)">
      3. Critical
    </button>
  </div>

  
  <div id="outputCard" class="output-card info-active">
    <div id="outputMeta" class="output-meta" style="color: #1d4ed8;">
      <span>● Informational Lens</span>
    </div>
    <div id="outputQuestion" class="output-question">
      "What mechanisms cause urban areas to trap more heat than rural zones?"
    </div>
    <div id="outputFocus" class="output-focus">
      Focus: Facts, scientific processes, and explanatory systems.
    </div>
  </div>

  
  <div class="nav-row">
    <button class="dot active" onclick="setStance(0)" aria-label="Informational"></button>
    <button class="dot" onclick="setStance(1)" aria-label="Aesthetic"></button>
    <button class="dot" onclick="setStance(2)" aria-label="Critical"></button>
  </div>

  <script>
    const stances = [
      {
        id: "info",
        name: "Informational Lens",
        color: "#1d4ed8",
        className: "info-active",
        question: "“What mechanisms cause urban areas to trap more heat than rural zones?”",
        focus: "Focus: Facts, scientific processes, and explanatory systems."
      },
      {
        id: "aest",
        name: "Aesthetic Lens",
        color: "#7e22ce",
        className: "aest-active",
        question: "“How does the author use metaphor to create a sense of suffocation?”",
        focus: "Focus: Language, imagery, emotional resonance, and author's craft."
      },
      {
        id: "crit",
        name: "Critical Lens",
        color: "#b45309",
        className: "crit-active",
        question: "“Whose economic interests are defended when the author discusses municipal cooling costs?”",
        focus: "Focus: Power dynamics, bias, underlying assumptions, and silenced voices."
      }
    ];

    let currentIndex = 0;
    const tabBtns = document.querySelectorAll('.tab-btn');
    const dots = document.querySelectorAll('.dot');
    const outputCard = document.getElementById('outputCard');
    const outputMeta = document.getElementById('outputMeta');
    const outputQuestion = document.getElementById('outputQuestion');
    const outputFocus = document.getElementById('outputFocus');

    function setStance(index) {
      currentIndex = index;
      const data = stances[index];

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

      // Update Dots
      dots.forEach((dot, i) => {
        dot.classList.toggle('active', i === index);
      });

      // Update Output Card
      outputCard.className = 'output-card ' + data.className;
      outputMeta.style.color = data.color;
      outputMeta.innerHTML = `<span>● ${data.name}</span>`;
      outputQuestion.textContent = data.question;
      outputFocus.textContent = data.focus;
    }
  </script>
</body>
</html>

Establishing Reading Purpose and Framing Inquiry

<!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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }

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

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

    /* Lens Switcher */
    .lens-tabs {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }

    .tab-btn {
      appearance: none;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      color: #64748b;
      padding: 10px 8px;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: all 0.25s ease;
      user-select: none;
    }

    .tab-btn:hover {
      background: #f1f5f9;
      color: #1e2945;
    }

    .tab-btn.active[data-lens="info"] {
      background: #eff6ff;
      border-color: #3b82f6;
      color: #1d4ed8;
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    }

    .tab-btn.active[data-lens="aesthetic"] {
      background: #faf5ff;
      border-color: #a855f7;
      color: #7e22ce;
      box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.2);
    }

    .tab-btn.active[data-lens="critical"] {
      background: #fff7ed;
      border-color: #f97316;
      color: #c2410c;
      box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.2);
    }

    /* Excerpt Box */
    .excerpt-box {
      background: #fbfcfe;
      border: 1px solid #e2e8f0;
      border-radius: 14px;
      padding: 20px 22px;
      font-size: 17px;
      line-height: 1.65;
      color: #475569;
      position: relative;
    }

    .hl {
      border-radius: 4px;
      padding: 2px 4px;
      margin: 0 -2px;
      transition: background-color 0.3s ease, color 0.3s ease, font-weight 0.3s ease;
    }

    /* Informational Highlights */
    .lens-info .hl-info {
      background: #dbeafe;
      color: #1e3a8a;
      font-weight: 600;
    }

    /* Aesthetic Highlights */
    .lens-aesthetic .hl-aesthetic {
      background: #f3e8ff;
      color: #581c87;
      font-weight: 600;
    }

    /* Critical Highlights */
    .lens-critical .hl-critical {
      background: #ffedd5;
      color: #7c2d12;
      font-weight: 600;
    }

    /* Focus Badges Container */
    .focus-panel {
      position: relative;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .badge-group {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      opacity: 0;
      pointer-events: none;
      transform: translateY(4px);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .badge-group.active {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      white-space: nowrap;
    }

    .badge-info {
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      color: #1d4ed8;
    }

    .badge-aesthetic {
      background: #faf5ff;
      border: 1px solid #e9d5ff;
      color: #7e22ce;
    }

    .badge-critical {
      background: #fff7ed;
      border: 1px solid #fed7aa;
      color: #c2410c;
    }

    @media (max-width: 420px) {
      .excerpt-box {
        font-size: 15px;
        padding: 16px;
      }
      .tab-btn {
        font-size: 12px;
        padding: 8px 4px;
      }
      .badge {
        font-size: 11.5px;
        padding: 5px 9px;
      }
    }
  </style>
</head>
<body>

  <div class="frame">
    
    <div class="lens-tabs" role="tablist">
      <button class="tab-btn active" data-lens="info" role="tab" aria-selected="true">
        🔬 Informational
      </button>
      <button class="tab-btn" data-lens="aesthetic" role="tab" aria-selected="false">
        🎨 Aesthetic
      </button>
      <button class="tab-btn" data-lens="critical" role="tab" aria-selected="false">
        ⚖️ Critical
      </button>
    </div>

    
    <div id="excerpt" class="excerpt-box lens-info">
      During heatwaves, <span class="hl hl-critical">low-income apartment blocks</span> <span class="hl hl-aesthetic">bake under a relentless August sun</span>, <span class="hl hl-info">radiating trapped thermal energy</span> while they <span class="hl hl-info hl-critical">lack tree cover or central cooling</span>.
    </div>

    
    <div class="focus-panel">
      
      <div id="badge-info" class="badge-group active">
        <span class="badge badge-info">🌡️ Thermal Physics</span>
        <span class="badge badge-info">🏗️ Infrastructure Deficit</span>
      </div>

      
      <div id="badge-aesthetic" class="badge-group">
        <span class="badge badge-aesthetic">☀️ Personification</span>
        <span class="badge badge-aesthetic">🔥 Oppressive Atmosphere</span>
      </div>

      
      <div id="badge-critical" class="badge-group">
        <span class="badge badge-critical">🏙️ Socioeconomic Disparity</span>
        <span class="badge badge-critical">🌳 Environmental Inequity</span>
      </div>
    </div>
  </div>

  <script>
    const tabs = document.querySelectorAll('.tab-btn');
    const excerpt = document.getElementById('excerpt');
    const badgeGroups = {
      info: document.getElementById('badge-info'),
      aesthetic: document.getElementById('badge-aesthetic'),
      critical: document.getElementById('badge-critical')
    };

    function setLens(lens) {
      tabs.forEach(tab => {
        const isActive = tab.dataset.lens === lens;
        tab.classList.toggle('active', isActive);
        tab.setAttribute('aria-selected', isActive);
      });

      excerpt.className = 'excerpt-box lens-' + lens;

      Object.entries(badgeGroups).forEach(([key, group]) => {
        group.classList.toggle('active', key === lens);
      });
    }

    tabs.forEach(tab => {
      tab.addEventListener('click', () => {
        setLens(tab.dataset.lens);
      });
    });
  </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, sans-serif;
    }

    body {
      background: #f8f9fa;
      color: #1e2945;
      padding: 12px;
      width: 100%;
      min-height: 100%;
    }

    .grid-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 640px;
      margin: 0 auto;
    }

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

    .column {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    .col-header {
      font-size: 14px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 6px;
    }

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

    .tag-low {
      background: #fee2e2;
      color: #b91c1c;
    }

    .tag-high {
      background: #e0f2fe;
      color: #0284c7;
    }

    .page-box {
      width: 100%;
      height: 230px;
      background: #ffffff;
      border-radius: 10px;
      border: 1px solid #e2e8f0;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      padding: 16px 14px;
      gap: 8px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    }

    .text-line {
      height: 7px;
      background: #e2e8f0;
      border-radius: 4px;
      width: 100%;
      transition: background 0.3s ease;
    }

    .text-line.short { width: 60%; }
    .text-line.med { width: 85%; }

    /* Left Side: Wandering Animation */
    .scattered-path {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    .trail-line {
      stroke: #f87171;
      stroke-width: 2;
      stroke-dasharray: 6 4;
      fill: none;
      opacity: 0.85;
      animation: dashMove 12s linear infinite;
    }

    @keyframes dashMove {
      to { stroke-dashoffset: -100; }
    }

    .eye-dot {
      fill: #ef4444;
      animation: eyeWander 8s ease-in-out infinite alternate;
    }

    @keyframes eyeWander {
      0%   { cx: 30; cy: 40; }
      25%  { cx: 160; cy: 190; }
      50%  { cx: 40; cy: 160; }
      75%  { cx: 170; cy: 50; }
      100% { cx: 100; cy: 110; }
    }

    .floating-mark {
      position: absolute;
      font-size: 16px;
      font-weight: bold;
      color: #f87171;
      opacity: 0.6;
      animation: floatQ 3s ease-in-out infinite alternate;
      user-select: none;
    }

    @keyframes floatQ {
      from { transform: translateY(0) scale(0.9); opacity: 0.3; }
      to { transform: translateY(-6px) scale(1.1); opacity: 0.7; }
    }

    /* Right Side: Purpose Spotlight */
    .lens-target {
      position: absolute;
      left: 10px;
      right: 10px;
      height: 42px;
      border-radius: 6px;
      background: rgba(34, 183, 255, 0.12);
      border: 1.5px solid #22b7ff;
      pointer-events: none;
      transition: top 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 8px;
    }

    .spotlight-beam {
      position: absolute;
      top: -30px;
      left: 50%;
      transform: translateX(-50%);
      width: 140%;
      height: 120px;
      background: radial-gradient(ellipse at top, rgba(34, 183, 255, 0.28), transparent 70%);
      pointer-events: none;
      animation: beamPulse 3s ease-in-out infinite;
    }

    @keyframes beamPulse {
      0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
      50% { opacity: 0.95; transform: translateX(-50%) scale(1.04); }
    }

    .target-badge {
      font-size: 10px;
      font-weight: 700;
      color: #0284c7;
      background: #ffffff;
      padding: 2px 6px;
      border-radius: 4px;
      border: 1px solid #bae6fd;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    /* Target Selector Controls */
    .controls {
      display: flex;
      gap: 6px;
      width: 100%;
      justify-content: center;
    }

    .control-btn {
      flex: 1;
      font-size: 12px;
      font-weight: 600;
      padding: 6px 4px;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      color: #1e2945;
      cursor: pointer;
      text-align: center;
      transition: all 0.2s ease;
    }

    .control-btn.active {
      background: #22b7ff;
      border-color: #0284c7;
      color: #ffffff;
    }

    .status-foot {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      display: flex;
      align-items: center;
      gap: 4px;
    }
  </style>
</head>
<body>

  <div class="grid-container">
    
    
    <div class="column">
      <div class="col-header">
        <span>Unfocused Reading</span>
        <span class="tag tag-low">Low Focus</span>
      </div>

      <div class="page-box">
        <div class="text-line"></div>
        <div class="text-line med"></div>
        <div class="text-line"></div>
        <div class="text-line short"></div>
        <div class="text-line"></div>
        <div class="text-line med"></div>
        <div class="text-line"></div>
        <div class="text-line short"></div>

        
        <svg class="scattered-path" viewBox="0 0 200 230">
          <path class="trail-line" d="M 30 40 Q 150 20, 160 80 T 40 140 T 170 180 T 60 210" />
          <circle class="eye-dot" r="5" cx="30" cy="40" />
        </svg>

        <div class="floating-mark" style="top: 25%; left: 20%;">?</div>
        <div class="floating-mark" style="top: 60%; right: 25%; animation-delay: 1.2s;">?</div>
        <div class="floating-mark" style="bottom: 15%; left: 35%; animation-delay: 0.6s;">?</div>
      </div>

      <div class="status-foot">
        <span>⚠️ Aimless Scanning</span>
      </div>
    </div>

    
    <div class="column">
      <div class="col-header">
        <span>Purpose-Driven</span>
        <span class="tag tag-high">Targeted</span>
      </div>

      <div class="page-box" id="targetPage">
        <div class="spotlight-beam" id="spotlightBeam"></div>
        
        <div class="text-line" id="line-0"></div>
        <div class="text-line med" id="line-1"></div>
        <div class="text-line" id="line-2"></div>
        <div class="text-line short" id="line-3"></div>
        <div class="text-line" id="line-4"></div>
        <div class="text-line med" id="line-5"></div>
        <div class="text-line" id="line-6"></div>
        <div class="text-line short" id="line-7"></div>

        
        <div class="lens-target" id="lensTarget" style="top: 14px;">
          <span class="target-badge" id="targetBadge">Target Focus</span>
        </div>
      </div>

      
      <div class="controls">
        <button class="control-btn active" onclick="setFocus(0, 'Main Idea', this)">Focus: Idea</button>
        <button class="control-btn" onclick="setFocus(1, 'Evidence', this)">Focus: Data</button>
        <button class="control-btn" onclick="setFocus(2, 'Conclusion', this)">Focus: End</button>
      </div>

    </div>

  </div>

  <script>
    const positions = [14, 82, 158];

    function setFocus(index, label, btn) {
      const lens = document.getElementById('lensTarget');
      const badge = document.getElementById('targetBadge');
      const beam = document.getElementById('spotlightBeam');
      const buttons = document.querySelectorAll('.control-btn');

      buttons.forEach(b => b.classList.remove('active'));
      if (btn) btn.classList.add('active');

      const targetTop = positions[index];
      lens.style.top = targetTop + 'px';
      badge.textContent = '🎯 ' + label;
      beam.style.top = (targetTop - 45) + 'px';

      // Highlight corresponding lines
      for (let i = 0; i < 8; i++) {
        const line = document.getElementById('line-' + i);
        if (!line) continue;
        const activeRange = [index * 2.5, index * 2.5 + 2];
        if (i >= activeRange[0] && i <= activeRange[1]) {
          line.style.background = '#22b7ff';
        } else {
          line.style.background = '#e2e8f0';
        }
      }
    }

    // Initialize first focus target
    setFocus(0, 'Main Idea', document.querySelectorAll('.control-btn')[0]);
  </script>
</body>
</html>

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

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e293b;
      background: transparent;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      user-select: none;
    }

    .header {
      text-align: center;
    }

    .title {
      font-size: 16px;
      font-weight: 700;
      color: #0f172a;
      letter-spacing: -0.01em;
    }

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

    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }

    .stance-card {
      background: #ffffff;
      border-radius: 12px;
      padding: 14px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      cursor: pointer;
      transition: box-shadow 0.25s ease, background-color 0.25s ease;
      position: relative;
    }

    /* Blue Theme: Informational */
    .card-blue {
      border: 2px solid #bae6fd;
      background: #f0f9ff;
    }
    .card-blue.active, .card-blue:hover {
      border-color: #0284c7;
      box-shadow: 0 4px 14px rgba(2, 132, 199, 0.2);
    }
    .card-blue .icon-box {
      background: #e0f2fe;
      color: #0284c7;
    }
    .card-blue .badge {
      background: #0284c7;
      color: #ffffff;
    }

    /* Coral Theme: Aesthetic */
    .card-coral {
      border: 2px solid #fed7aa;
      background: #fff7ed;
    }
    .card-coral.active, .card-coral:hover {
      border-color: #ea580c;
      box-shadow: 0 4px 14px rgba(234, 88, 12, 0.2);
    }
    .card-coral .icon-box {
      background: #ffedd5;
      color: #ea580c;
    }
    .card-coral .badge {
      background: #ea580c;
      color: #ffffff;
    }

    /* Purple Theme: Critical */
    .card-purple {
      border: 2px solid #ddd6fe;
      background: #faf5ff;
    }
    .card-purple.active, .card-purple:hover {
      border-color: #7c3aed;
      box-shadow: 0 4px 14px rgba(124, 58, 237, 0.2);
    }
    .card-purple .icon-box {
      background: #ede9fe;
      color: #7c3aed;
    }
    .card-purple .badge {
      background: #7c3aed;
      color: #ffffff;
    }

    .icon-box {
      width: 44px;
      height: 44px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      margin-bottom: 8px;
    }

    .stance-name {
      font-size: 14px;
      font-weight: 700;
      line-height: 1.2;
    }

    .stance-type {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      opacity: 0.75;
      margin-top: 2px;
      margin-bottom: 8px;
    }

    .tags {
      display: flex;
      flex-direction: column;
      gap: 4px;
      width: 100%;
      margin-top: 4px;
    }

    .tag {
      font-size: 11px;
      font-weight: 600;
      padding: 3px 6px;
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.85);
      color: #334155;
      border: 1px solid rgba(0, 0, 0, 0.05);
      white-space: nowrap;
    }

    /* Interactive Focus Box */
    .lens-display {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 52px;
    }

    .lens-icon {
      font-size: 20px;
      flex-shrink: 0;
    }

    .lens-text-group {
      display: flex;
      flex-direction: column;
      gap: 1px;
    }

    .lens-label {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .lens-question {
      font-size: 13px;
      font-weight: 500;
      color: #1e293b;
    }

    @media (max-width: 440px) {
      .grid {
        grid-template-columns: 1fr;
      }
      .stance-card {
        flex-direction: row;
        text-align: left;
        padding: 10px 12px;
        gap: 12px;
      }
      .icon-box {
        margin-bottom: 0;
      }
      .card-info {
        flex: 1;
      }
      .tags {
        flex-direction: row;
        flex-wrap: wrap;
      }
    }
  </style>
</head>
<body>

  <div class="header">
    <div class="title">The 3 Reading Stances</div>
    <div class="subtitle">Select a stance to frame your inquiry</div>
  </div>

  <div class="grid">
    
    <div class="stance-card card-blue active" onclick="selectStance(0)">
      <div class="icon-box">📋</div>
      <div class="card-info">
        <div class="stance-name">Informational</div>
        <div class="stance-type">Efferent</div>
        <div class="tags">
          <span class="tag">Facts & Data</span>
          <span class="tag">Logical Steps</span>
          <span class="tag">Key Findings</span>
        </div>
      </div>
    </div>

    
    <div class="stance-card card-coral" onclick="selectStance(1)">
      <div class="icon-box">✨</div>
      <div class="card-info">
        <div class="stance-name">Aesthetic</div>
        <div class="stance-type">Experiential</div>
        <div class="tags">
          <span class="tag">Sensory Images</span>
          <span class="tag">Tone & Mood</span>
          <span class="tag">Human Emotion</span>
        </div>
      </div>
    </div>

    
    <div class="stance-card card-purple" onclick="selectStance(2)">
      <div class="icon-box">⚖️</div>
      <div class="card-info">
        <div class="stance-name">Critical</div>
        <div class="stance-type">Analytical</div>
        <div class="tags">
          <span class="tag">Author Bias</span>
          <span class="tag">Hidden Power</span>
          <span class="tag">Assumptions</span>
        </div>
      </div>
    </div>
  </div>

  
  <div class="lens-display" id="lensDisplay">
    <span class="lens-icon" id="lensIcon">📋</span>
    <div class="lens-text-group">
      <span class="lens-label" id="lensLabel" style="color: #0284c7;">Reader's Inquiry Lens</span>
      <span class="lens-question" id="lensQuestion">"What facts and conclusions must I carry away?"</span>
    </div>
  </div>

  <script>
    const stances = [
      {
        icon: "📋",
        label: "Informational Lens",
        color: "#0284c7",
        question: "\"What facts and conclusions must I carry away?\""
      },
      {
        icon: "✨",
        label: "Aesthetic Lens",
        color: "#ea580c",
        question: "\"What emotions, rhythm, and imagery do I feel?\""
      },
      {
        icon: "⚖️",
        label: "Critical Lens",
        color: "#7c3aed",
        question: "\"Whose perspective is favored, and what is assumed?\""
      }
    ];

    function selectStance(index) {
      const cards = document.querySelectorAll('.stance-card');
      cards.forEach((card, idx) => {
        if (idx === index) {
          card.classList.add('active');
        } else {
          card.classList.remove('active');
        }
      });

      const data = stances[index];
      document.getElementById('lensIcon').textContent = data.icon;
      const labelEl = document.getElementById('lensLabel');
      labelEl.textContent = data.label;
      labelEl.style.color = data.color;
      document.getElementById('lensQuestion').textContent = data.question;
    }
  </script>
</body>
</html>

Generating Predictive Hypotheses Using Text Clues

Visualizing Complex Descriptive and Technical Prose

Generating Clarifying and Analytical Questions During Reading

Asking Evaluative and Theoretical Questions After Reading

Synthesizing Themes and Arguments Across a Single Text

Cross-Text Synthesis and Comparative Thematic Framing

Active Reading Strategies and Comprehension Cycles

Setting Purpose for Self-Selected Independent Reading

Setting Purpose for Assigned Literary Texts

Setting Purpose for Assigned Informational Texts

Why Reading Purpose Matters in College and Career Texts

Reading as Inspiration: Using Texts to Spark Ideas

Setting Purpose for Reading Poetry and Drama

Setting Purpose for Reading Digital and Multimedia Texts

Setting Purpose for Research and Argumentative Texts

Choosing Your Reading Purpose: Skim, Scan, Study, or Enjoy

Adjusting Your Reading Purpose as Text Complexity Changes

Setting Reading Purpose for Complex Texts

Questioning Strategies Before Reading Complex Texts

Generating Questions During Reading to Track Understanding

Asking Questions After Reading to Extend Thinking

Generating Questions About Author's Craft and Style

Generating Questions About Character Motivations and Choices

Generating Questions About Text Structure and Organization

Generating Questions About Vocabulary and Word Choice in Context

Using Questions to Identify Gaps in Your Understanding

From Reading Questions to Research Inquiries

Evaluating the Quality of Your Reading Questions

Generating Purposeful Questions for Complex Texts

Using Text Features to Predict in Complex Texts

Using Genre Characteristics to Predict Content

Using Text Structure to Anticipate Ideas

Using Vocabulary to Make Predictions While Reading

Predicting Outcomes and Events in Narrative Texts

Predicting Arguments and Claims in Persuasive Texts

Using Prior Knowledge to Make Topic Predictions

Verifying and Revising Predictions During Reading

When Predictions Fail: Adjusting Your Mental Model

Making, Confirming, and Revising Predictions While Reading

Using Mental Images to Retain Complex Information

Visualizing Scenes From Descriptive Details

Picturing Abstract Ideas in Informational Texts

Visualizing Characters, Settings, and Actions

Visualizing Data, Charts, and Statistics

Using Visualization to Track Plot and Conflict

Combining Visualization With Note-Taking for Retention

Visualizing to Deepen Comprehension of Complex Texts

Comparing the Same Events From Different Points of View

Exploring How Literary Texts Reflect the Values of Their Time

Understanding First Nations Australian Perspectives in Literary Texts

Comparing Cultural Contexts in Australian and World Literature

Sharing Opinions on Language Features That Define an Author's Style

Discussing How Literary Devices Contribute to Text Style

Identifying Intertextual References in Literary Texts

How Intertextual References Create New Layers of Meaning

Recognising Intertextual References in Visual Texts

Linking Ideas Across Different Texts and Authors

Analysing Literature and Intertextuality

Citing Textual Evidence to Support Inferences

Advanced Inference: Reading Between the Lines

Using Vocabulary to Understand Implicit Meanings in Grade 8 Texts

Using Vocabulary Knowledge to Identify Author's Perspective

Inferring What the Author Takes for Granted

Drawing Inferences Across Multiple Texts

Telling Reasonable Inferences From Stretching

Making and Evaluating Evidence-Based Inferences

Using Visualisation to Interpret Complex Texts

Making and Adjusting Predictions While Reading

Summarising Key Ideas in Informational Texts

Monitoring Comprehension and Fixing Breakdowns

Asking Questions to Deepen Understanding of Texts

Inferring Implicit Meanings from Textual Clues

Connecting Prior Knowledge to New Texts

Reading Comprehension Strategies for Complex Texts

Using General Academic Words Accurately in Writing

Academic Words for Synthesizing Information From Multiple Sources

Words with More Than One Meaning

Identifying Word Patterns That Indicate Different Meanings

Applying Spelling Rules to Complex Words

Using Etymology to Learn and Remember New Words

Academic Vocabulary and Word Knowledge

El principio de coherencia global: unidad temática del texto

Coherencia lineal y relaciones lógicas entre párrafos

Progresión temática: tema constante, lineal e hipertema

Mecanismos de referencia: anáfora, catáfora y deixis

Sustitución léxica: sinonimia, hiperonimia e hiponimia

Elipsis nominal y verbal en la cohesión textual

Coherencia textual y mecanismos de cohesión referencial y léxica

What Are Key Ideas in a Complex Text?

Telling Main Ideas From Supporting Details

Following How Details Add Up to Key Ideas

Judging Which Details Support Key Ideas

Examining Details That Complicate Key Ideas

Distinguishing Major From Minor Supporting Details

Checking Whether Details Are Credible

Identifying Contradictory and Redundant Details

How Images and Visuals Support or Challenge Text

Identifying and Evaluating Details in Complex Texts

Setting Purpose for Reading Assigned Literary Texts

Setting Purpose for Reading Assigned Informational Texts

Setting Purpose for Reading Argumentative Texts

Asking Questions About a Text You Read

Generating Questions After Reading to Extend Thinking

Setting Purpose and Questioning Texts

Making Predictions From Text Features

Making Predictions From Genre Characteristics and Structure

Confirming and Correcting Predictions as You Read

Creating Mental Images From Descriptive Text

Creating Mental Images for Informational Texts

Using Mental Images to Track Understanding

Making Text-to-Self Connections With Complex Texts

Making Text-to-Text Connections Across Multiple Texts

Making Text-to-World Connections to Society

Connecting Texts to Society and Culture

Predicting, Visualizing, and Connecting With Complex Texts

What Does Synthesis Mean in Reading?

Creating New Ideas by Combining Texts

Combining Information Across Different Text Types

Making Sense of Contradictory Sources

Blending Multiple Perspectives Into New Ideas

Using Synthesis to Build Your Own Argument

Combining Themes Across Multiple Texts

Drawing Original Conclusions Through Synthesis

Synthesizing Ideas Across Multiple Texts

Repaso de la oración simple: sujeto, predicado y complementos

Distinción entre frase, sintagma, proposición y oración

Oraciones compuestas por yuxtaposición y signos de puntuación

Oraciones coordinadas copulativas y disyuntivas

Oraciones coordinadas adversativas, distributivas y explicativas

Fundamentos de la oración y oraciones coordinadas

Understanding Synthesis in Eighth-Grade Reading

Combining Information Across Multiple Texts

Creating New Understanding Through Synthesis

Synthesizing Information to Formulate Original Arguments

Monitoring Comprehension During Reading

Recognizing and Repairing Comprehension Breakdowns

Using Multiple Strategies to Repair Understanding

Synthesizing Multiple Texts and Monitoring Comprehension

Annotating to Stay Engaged With the Text

Clarifying Vocabulary During Reading to Monitor Comprehension

How Vocabulary Knowledge Supports Reading Comprehension

Identifying Key Vocabulary Before Reading a Complex Text

Using Several Strategies Together for Hard Texts

Active Reading and Vocabulary Strategies for Comprehension

Estrategias de clave de contexto para términos desconocidos

Estructura morfológica de la palabra: lexemas y morfemas derivativos

Prefijos de origen griego y su aplicación en el vocabulario científico

Sufijos griegos y campos conceptuales disciplinares

Prefijos y sufijos latinos en las ciencias sociales y humanas

Familias léxicas y etimologías grecolatinas compartidas

Morfología y etimología grecolatina

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

OGE.9.RC.1

OGE.9.RC.1

Aligned learning resources

Related diagrams