<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Giants of the Abyssal Plains - Text Features</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: #1e293b;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      user-select: none;
      max-width: 680px;
      margin: 0 auto;
    }

    /* Stepper Bar */
    .controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      flex-wrap: wrap;
    }
    .step-nav {
      display: flex;
      gap: 4px;
      flex-wrap: wrap;
      flex: 1;
    }
    .step-btn {
      padding: 4px 8px;
      font-size: 12px;
      font-weight: 600;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      background: #ffffff;
      color: #475569;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 3px;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
    }
    .step-btn.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
      box-shadow: 0 1px 4px rgba(2, 132, 199, 0.3);
    }
    .play-btn {
      padding: 4px 10px;
      font-size: 12px;
      font-weight: 600;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      background: #ffffff;
      color: #1e293b;
      cursor: pointer;
      transition: background 0.15s;
    }
    .play-btn:active, .step-btn:active {
      filter: brightness(0.95);
    }

    /* Reader Purpose Banner */
    .purpose-banner {
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      border-radius: 6px;
      padding: 6px 10px;
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      font-weight: 600;
      color: #1e40af;
      min-height: 34px;
    }
    .purpose-tag {
      background: #2563eb;
      color: #fff;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.4px;
      padding: 2px 6px;
      border-radius: 4px;
      white-space: nowrap;
    }
    .purpose-text {
      line-height: 1.3;
    }

    /* Mock Article Layout - seamless without redundant outer borders */
    .mock-article {
      background: #ffffff;
      border-radius: 8px;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      position: relative;
    }

    /* Target Elements */
    .target {
      position: relative;
      border-radius: 5px;
      transition: box-shadow 0.2s ease, background-color 0.2s ease;
      border: 1.5px solid transparent;
    }
    .target.active {
      border-color: #0284c7;
      background-color: #f0f9ff;
      box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.25), 0 2px 8px rgba(2, 132, 199, 0.15);
    }

    /* Floating Callout Pointer Badge */
    .callout-badge {
      display: none;
      position: absolute;
      background: #0284c7;
      color: #ffffff;
      font-size: 10px;
      font-weight: 700;
      padding: 2px 7px;
      border-radius: 12px;
      white-space: nowrap;
      z-index: 10;
      box-shadow: 0 2px 6px rgba(0,0,0,0.15);
      animation: bounce 1.4s ease-in-out infinite alternate;
    }
    @keyframes bounce {
      from { transform: translateY(0); }
      to { transform: translateY(-3px); }
    }
    .target.active > .callout-badge {
      display: inline-flex;
      align-items: center;
      gap: 3px;
    }

    /* Callout Badge Positions */
    #feat-title > .callout-badge {
      top: -9px;
      right: 12px;
    }
    #feat-head1 > .callout-badge,
    #feat-head2 > .callout-badge {
      top: -8px;
      right: 6px;
    }
    #feat-vocab > .callout-badge {
      bottom: calc(100% + 4px);
      left: 50%;
      transform: translateX(-50%);
    }
    #feat-diagram > .callout-badge {
      top: -9px;
      left: 12px;
    }
    #feat-summary > .callout-badge {
      top: -9px;
      right: 10px;
    }

    /* Feature 1: Title */
    .art-title {
      padding: 4px 6px;
      font-size: 15px;
      font-weight: 800;
      color: #0f172a;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
    }
    .art-badge {
      font-size: 10px;
      font-weight: 600;
      color: #64748b;
      background: #f1f5f9;
      padding: 2px 6px;
      border-radius: 4px;
      white-space: nowrap;
    }

    /* Content Grid */
    .art-grid {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 8px;
    }
    @media (max-width: 480px) {
      .art-grid { grid-template-columns: 1fr; }
    }

    .art-col {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    /* Feature 2: Subheadings */
    .art-subhead {
      padding: 3px 6px;
      font-size: 12px;
      font-weight: 700;
      color: #1e293b;
    }

    /* Dummy Text Lines */
    .dummy-para {
      font-size: 11.5px;
      line-height: 1.45;
      color: #475569;
      padding: 0 4px;
    }

    /* Feature 4: Bold Vocab */
    .art-vocab {
      padding: 1px 4px;
      font-weight: 700;
      color: #0f172a;
      background: #fef08a;
      border-radius: 3px;
      display: inline-block;
      cursor: pointer;
    }

    /* Feature 3: Deep Sea Vent Diagram */
    .vent-diagram {
      padding: 6px;
      background: #0a192f;
      border-radius: 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      min-height: 86px;
      justify-content: flex-end;
    }
    .plume {
      font-size: 22px;
      line-height: 1;
      animation: drift 2.2s ease-in-out infinite alternate;
    }
    @keyframes drift {
      from { transform: translateY(0); opacity: 0.85; }
      to { transform: translateY(-3px); opacity: 1; }
    }
    .vent-rock {
      font-size: 24px;
      line-height: 1;
      margin-top: -6px;
    }
    .diag-label {
      position: absolute;
      background: rgba(255,255,255,0.92);
      color: #0f172a;
      font-size: 9px;
      font-weight: 700;
      padding: 2px 4px;
      border-radius: 3px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    }
    .label-top { top: 6px; left: 6px; }
    .label-bottom { bottom: 6px; right: 6px; }

    /* Feature 5: Summary Box */
    .summary-box {
      padding: 6px 8px;
      background: #f8fafc;
      border: 1px dashed #94a3b8;
      border-radius: 6px;
      font-size: 11px;
      color: #334155;
      line-height: 1.35;
    }
    .summary-box strong {
      color: #0f172a;
      display: block;
      margin-bottom: 2px;
      font-size: 11px;
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <div class="step-nav" role="tablist">
      <button class="step-btn active" data-step="0">1. Title</button>
      <button class="step-btn" data-step="1">2. Headings</button>
      <button class="step-btn" data-step="2">3. Visuals</button>
      <button class="step-btn" data-step="3">4. Vocab</button>
      <button class="step-btn" data-step="4">5. Summary</button>
    </div>
    <button id="playBtn" class="play-btn">⏸ Pause</button>
  </div>

  
  <div class="purpose-banner">
    <span id="clueTag" class="purpose-tag">1. Main Title</span>
    <span id="clueText" class="purpose-text">🎯 Identifies the big topic and central subject.</span>
  </div>

  
  <div class="mock-article">
    
    
    <div class="art-title target active" id="feat-title">
      <span>🌊 Giants of the Abyssal Plains</span>
      <span class="art-badge">Science Monthly</span>
      <span class="callout-badge">👈 Focus: Topic & Scope</span>
    </div>

    
    <div class="art-grid">
      
      <div class="art-col">
        
        <div class="art-subhead target" id="feat-head1">
          ✦ Chemosynthesis at Depth
          <span class="callout-badge">👈 Section Roadmap</span>
        </div>
        
        <div class="dummy-para">
          Deep ocean life relies on 
          
          <span class="art-vocab target" id="feat-vocab">
            chemosynthesis
            <span class="callout-badge">👆 Key Term</span>
          </span> 
          to convert toxic minerals into organic nutrients without any sunlight.
        </div>

        
        <div class="art-subhead target" id="feat-head2">
          ✦ Thermal Vent Zones
          <span class="callout-badge">👈 Subtopic Breakdown</span>
        </div>
        <div class="dummy-para">
          Tectonic rifts release superheated mineral plumes that sustain dense micro-ecosystems.
        </div>
      </div>

      
      <div class="art-col">
        
        <div class="vent-diagram target" id="feat-diagram">
          <span class="callout-badge">👇 Diagram & Labels</span>
          <span class="diag-label label-top">350°C Mineral Plume</span>
          <div class="plume">💨</div>
          <div class="vent-rock">🌋</div>
          <span class="diag-label label-bottom">Basalt Chimney</span>
        </div>

        
        <div class="summary-box target" id="feat-summary">
          <span class="callout-badge">👈 Core Conclusion</span>
          <strong>✦ Key Takeaway</strong>
          Chemical reactions, not solar rays, fuel abyssal food chains.
        </div>
      </div>
    </div>

  </div>

  <script>
    const clues = [
      { tag: "1. Main Title", text: "🎯 Identifies the big topic and central subject." },
      { tag: "2. Subheadings", text: "🗺️ Provides a mental roadmap of each section." },
      { tag: "3. Visual Diagram", text: "👁️ Builds an immediate mental model of key processes." },
      { tag: "4. Bold Term", text: "🔑 Highlights critical domain vocabulary to watch for." },
      { tag: "5. Summary Box", text: "💡 Previews the essential core conclusion." }
    ];

    const targetSelectors = [
      ['#feat-title'],
      ['#feat-head1', '#feat-head2'],
      ['#feat-diagram'],
      ['#feat-vocab'],
      ['#feat-summary']
    ];

    const buttons = document.querySelectorAll('.step-btn');
    const clueTag = document.getElementById('clueTag');
    const clueText = document.getElementById('clueText');
    const playBtn = document.getElementById('playBtn');

    let currentStep = 0;
    let timer = null;
    let isPlaying = true;

    function applyStep(index) {
      currentStep = index;

      // Update Nav Buttons
      buttons.forEach((btn, i) => {
        btn.classList.toggle('active', i === index);
      });

      // Clear all active highlights
      document.querySelectorAll('.target').forEach(el => el.classList.remove('active'));

      // Highlight target(s) for this step
      targetSelectors[index].forEach(sel => {
        const el = document.querySelector(sel);
        if (el) el.classList.add('active');
      });

      // Update purpose banner
      if (clues[index]) {
        clueTag.textContent = clues[index].tag;
        clueText.textContent = clues[index].text;
      }
    }

    function nextStep() {
      applyStep((currentStep + 1) % clues.length);
    }

    function startTimer() {
      stopTimer();
      timer = setInterval(nextStep, 3500);
      isPlaying = true;
      playBtn.textContent = '⏸ Pause';
    }

    function stopTimer() {
      if (timer) clearInterval(timer);
      isPlaying = false;
      playBtn.textContent = '▶ Play';
    }

    // Button interactions
    buttons.forEach((btn, i) => {
      btn.addEventListener('click', () => {
        applyStep(i);
        stopTimer();
      });
    });

    playBtn.addEventListener('click', () => {
      if (isPlaying) {
        stopTimer();
      } else {
        nextStep();
        startTimer();
      }
    });

    // Make target elements clickable to jump directly to that step
    const targetToStepMap = {
      '#feat-title': 0,
      '#feat-head1': 1,
      '#feat-head2': 1,
      '#feat-diagram': 2,
      '#feat-vocab': 3,
      '#feat-summary': 4
    };

    Object.entries(targetToStepMap).forEach(([sel, stepIdx]) => {
      const el = document.querySelector(sel);
      if (el) {
        el.style.cursor = 'pointer';
        el.addEventListener('click', (e) => {
          e.stopPropagation();
          applyStep(stepIdx);
          stopTimer();
        });
      }
    });

    // Initialize
    applyStep(0);
    startTimer();
  </script>
</body>
</html>

Setting a Purpose and Previewing Complex Texts

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Preview Routine</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }
    body {
      background: transparent;
      color: #1e293b;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      min-height: 100vh;
    }

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

    /* Header info */
    .header-bar {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      flex-wrap: wrap;
      gap: 4px;
    }

    .diagram-title {
      font-size: 16px;
      font-weight: 700;
      color: #0f172a;
    }

    .diagram-subtitle {
      font-size: 12px;
      color: #64748b;
    }

    /* Controls bar */
    .controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .step-pills {
      display: flex;
      gap: 6px;
      flex: 1;
    }

    .pill {
      flex: 1;
      padding: 8px 4px;
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      text-align: center;
      transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
    }

    .pill:hover {
      background: #e2e8f0;
    }

    .pill.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
      box-shadow: 0 2px 8px rgba(2, 132, 199, 0.35);
    }

    .play-btn {
      padding: 8px 12px;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      font-size: 14px;
      color: #1e293b;
      cursor: pointer;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.2s ease, border-color 0.2s ease;
      min-width: 44px;
    }

    .play-btn:hover {
      background: #f8fafc;
      border-color: #94a3b8;
    }

    /* Progress bar */
    .track-bar {
      width: 100%;
      height: 4px;
      background: #e2e8f0;
      border-radius: 2px;
      overflow: hidden;
    }

    .track-fill {
      height: 100%;
      width: 33.333%;
      background: #0284c7;
      transition: width 0.35s ease;
    }

    /* Visual stage */
    .stage {
      position: relative;
      min-height: 250px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .step-view {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 16px;
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 0.3s ease, transform 0.3s ease;
      pointer-events: none;
      text-align: center;
    }

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

    /* Step 1: Lock Goal */
    .step-heading {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      font-weight: 700;
      color: #0284c7;
      margin-bottom: 6px;
    }

    .goal-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #eff6ff;
      border: 2px solid #3b82f6;
      border-radius: 999px;
      padding: 6px 14px;
      font-weight: 700;
      font-size: 15px;
      color: #1d4ed8;
      margin-bottom: 12px;
    }

    .target-box {
      background: #ffffff;
      border: 2px dashed #93c5fd;
      border-radius: 10px;
      padding: 12px 18px;
      font-size: 14px;
      font-weight: 600;
      color: #1e293b;
      display: flex;
      align-items: center;
      gap: 8px;
      max-width: 90%;
    }

    .target-box strong {
      color: #2563eb;
    }

    .sub-note {
      margin-top: 10px;
      font-size: 12px;
      color: #64748b;
    }

    /* Step 2: Scan */
    .doc-preview {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 480px;
      justify-content: center;
      margin-top: 6px;
    }

    .doc-col {
      flex: 1;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 8px 6px;
      display: flex;
      flex-direction: column;
      gap: 5px;
      align-items: center;
      opacity: 0.55;
      transition: opacity 0.3s ease, border-color 0.3s ease, background 0.3s ease;
    }

    .doc-col.match {
      opacity: 1;
      border: 2px solid #0284c7;
      background: #f0f9ff;
      box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
    }

    .doc-sec-num {
      font-size: 10px;
      font-weight: 700;
      color: #64748b;
      text-transform: uppercase;
    }

    .doc-title {
      font-size: 11px;
      font-weight: 700;
      text-align: center;
      color: #1e293b;
      line-height: 1.2;
      min-height: 26px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .doc-col.match .doc-title {
      color: #0369a1;
    }

    .doc-line {
      width: 80%;
      height: 3px;
      background: #e2e8f0;
      border-radius: 2px;
    }

    .doc-col.match .doc-line {
      background: #bae6fd;
    }

    .doc-icon {
      font-size: 22px;
      margin-top: 2px;
    }

    .scan-tag {
      font-size: 10px;
      background: #0284c7;
      color: #ffffff;
      padding: 2px 6px;
      border-radius: 4px;
      font-weight: 700;
      margin-top: 4px;
    }

    /* Step 3: Roadmap */
    .roadmap-container {
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 100%;
      max-width: 500px;
      align-items: center;
    }

    .route-map {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      width: 100%;
      flex-wrap: wrap;
    }

    .route-node {
      padding: 8px 10px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 700;
      text-align: center;
      line-height: 1.2;
    }

    .route-skip {
      background: #f1f5f9;
      color: #64748b;
      border: 1px dashed #cbd5e1;
    }

    .route-skip span {
      text-decoration: line-through;
      color: #94a3b8;
      display: block;
      font-size: 11px;
      font-weight: 500;
    }

    .route-hit {
      background: #ecfdf5;
      color: #047857;
      border: 2px solid #10b981;
      box-shadow: 0 2px 6px rgba(16, 185, 129, 0.2);
    }

    .route-hit span {
      display: block;
      font-size: 11px;
      font-weight: 600;
      color: #059669;
    }

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

    .benefit-tag {
      margin-top: 8px;
      font-size: 12px;
      font-weight: 700;
      color: #065f46;
      background: #d1fae5;
      border: 1px solid #a7f3d0;
      padding: 5px 14px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }

    /* Responsive adjustments */
    @media (max-width: 480px) {
      .pill {
        font-size: 11px;
        padding: 6px 2px;
      }
      .stage {
        min-height: 270px;
      }
      .target-box {
        font-size: 13px;
        padding: 10px 12px;
      }
      .doc-title {
        font-size: 10px;
      }
      .doc-icon {
        font-size: 18px;
      }
      .route-node {
        padding: 6px 8px;
        font-size: 11px;
      }
      .route-arrow {
        font-size: 14px;
      }
    }
  </style>
</head>
<body>
  <div class="main-wrap">
    <div class="header-bar">
      <div class="diagram-title">The 3-Step Preview Routine</div>
      <div class="diagram-subtitle">Active Reading Strategy</div>
    </div>

    <div class="controls">
      <div class="step-pills" role="tablist">
        <button class="pill active" data-step="0" role="tab" aria-selected="true">1. Target 🎯</button>
        <button class="pill" data-step="1" role="tab" aria-selected="false">2. Scan 🔍</button>
        <button class="pill" data-step="2" role="tab" aria-selected="false">3. Predict 🗺️</button>
      </div>
      <button class="play-btn" id="playBtn" aria-label="Pause autoplay">⏸</button>
    </div>

    <div class="track-bar">
      <div class="track-fill" id="trackFill"></div>
    </div>

    <div class="stage">
      
      <div class="step-view active" id="view-0" role="tabpanel">
        <div class="step-heading">Step 1 • Target</div>
        <div class="goal-badge">🎯 Lock in Goal</div>
        <div class="target-box">
          📝 Target: "Find turbine &amp; steam process"
        </div>
        <div class="sub-note">Know exactly what question you need to answer before reading.</div>
      </div>

      
      <div class="step-view" id="view-1" role="tabpanel">
        <div class="step-heading">Step 2 • Scan</div>
        <div class="goal-badge" style="background:#f0f9ff; border-color:#0284c7; color:#0369a1;">
          🔍 Skim Headings &amp; Visuals
        </div>
        <div class="doc-preview">
          <div class="doc-col">
            <span class="doc-sec-num">Sec 1</span>
            <div class="doc-title">History</div>
            <div class="doc-line"></div>
            <div class="doc-line"></div>
            <div class="doc-icon">🏛️</div>
          </div>
          <div class="doc-col">
            <span class="doc-sec-num">Sec 2</span>
            <div class="doc-title">Geology</div>
            <div class="doc-line"></div>
            <div class="doc-line"></div>
            <div class="doc-icon">⛰️</div>
          </div>
          <div class="doc-col match">
            <span class="doc-sec-num" style="color:#0284c7;">Sec 3</span>
            <div class="doc-title">From Steam to Grid</div>
            <div class="doc-line"></div>
            <div class="doc-icon">⚙️</div>
            <span class="scan-tag">Match Found!</span>
          </div>
        </div>
      </div>

      
      <div class="step-view" id="view-2" role="tabpanel">
        <div class="step-heading">Step 3 • Predict</div>
        <div class="goal-badge" style="background:#ecfdf5; border-color:#10b981; color:#047857;">
          🗺️ Frame the Roadmap
        </div>
        <div class="roadmap-container">
          <div class="route-map">
            <div class="route-node route-skip">
              Sec 1: History
              <span>(Skip deep read)</span>
            </div>
            <div class="route-arrow">➔</div>
            <div class="route-node route-skip">
              Sec 2: Geology
              <span>(Skip deep read)</span>
            </div>
            <div class="route-arrow">➔</div>
            <div class="route-node route-hit">
              Sec 3: Turbine &amp; Steam
              <span>🎯 Has my answer!</span>
            </div>
          </div>
          <div class="benefit-tag">⚡ Previewing saves reading time &amp; boosts focus</div>
        </div>
      </div>
    </div>
  </div>

  <script>
    (function () {
      class StepPlayer {
        constructor(viewSelector, options = {}) {
          this.views = Array.from(document.querySelectorAll(viewSelector));
          this.interval = options.interval || 3200;
          this.onChange = options.onChange || function () {};
          this.currentIndex = 0;
          this.timer = null;
          this.playing = false;
        }

        goTo(index) {
          if (index < 0 || index >= this.views.length) return;
          this.currentIndex = index;
          this.onChange(this.currentIndex);
        }

        next() {
          const nextIndex = (this.currentIndex + 1) % this.views.length;
          this.goTo(nextIndex);
        }

        start() {
          if (this.playing) return;
          this.playing = true;
          this.timer = setInterval(() => this.next(), this.interval);
        }

        stop() {
          this.playing = false;
          if (this.timer) {
            clearInterval(this.timer);
            this.timer = null;
          }
        }

        toggle() {
          if (this.playing) {
            this.stop();
          } else {
            this.start();
          }
        }
      }

      const pills = document.querySelectorAll('.pill');
      const views = document.querySelectorAll('.step-view');
      const trackFill = document.getElementById('trackFill');
      const playBtn = document.getElementById('playBtn');

      const player = new StepPlayer('.step-view', {
        interval: 3200,
        onChange: (index) => {
          pills.forEach((p, i) => {
            const isActive = i === index;
            p.classList.toggle('active', isActive);
            p.setAttribute('aria-selected', isActive ? 'true' : 'false');
          });
          views.forEach((v, i) => {
            v.classList.toggle('active', i === index);
          });
          trackFill.style.width = (((index + 1) / views.length) * 100) + '%';
        }
      });

      player.start();

      pills.forEach((pill, i) => {
        pill.addEventListener('click', () => {
          player.goTo(i);
        });
      });

      playBtn.addEventListener('click', () => {
        player.toggle();
        playBtn.textContent = player.playing ? '⏸' : '▶';
        playBtn.setAttribute('aria-label', player.playing ? 'Pause autoplay' : 'Play autoplay');
      });
    })();
  </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;
      background: #f8fafc;
      color: #1e293b;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    /* Landmark Selector Filter */
    .filter-bar {
      display: flex;
      justify-content: center;
      gap: 6px;
      flex-wrap: wrap;
    }
    .filter-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 20px;
      padding: 4px 10px;
      font-size: 12px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    }
    .filter-btn.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
      box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
    }

    /* Main Grid */
    .comparison-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      flex: 1;
    }
    @media (max-width: 480px) {
      .comparison-grid {
        grid-template-columns: 1fr;
      }
    }

    /* Column Headers */
    .column-header {
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #334155;
    }

    /* Print Page Simulation */
    .print-page {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      position: relative;
    }

    /* Digital Browser Simulation */
    .browser-window {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    .browser-chrome {
      background: #f1f5f9;
      border-bottom: 1px solid #e2e8f0;
      padding: 5px 8px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .browser-dots {
      display: flex;
      gap: 3px;
    }
    .browser-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #cbd5e1;
    }
    .browser-url {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 4px;
      padding: 2px 8px;
      font-size: 10px;
      color: #64748b;
      flex: 1;
    }
    .browser-content {
      padding: 8px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      flex: 1;
    }

    /* Landmark Elements */
    .landmark {
      border: 1.5px solid transparent;
      border-radius: 6px;
      padding: 5px 7px;
      transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
      position: relative;
    }
    .landmark.highlight {
      border-color: #2563eb;
      background: #eff6ff;
      box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
    }
    .tag {
      font-size: 9px;
      font-weight: 700;
      text-transform: uppercase;
      color: #64748b;
      display: block;
      margin-bottom: 2px;
    }
    .landmark.highlight .tag {
      color: #1d4ed8;
    }

    /* Print Elements */
    .toc-box {
      background: #f8fafc;
      border: 1px dashed #cbd5e1;
    }
    .toc-item {
      display: flex;
      justify-content: space-between;
      font-size: 11px;
      color: #334155;
    }
    .dots-leader {
      border-bottom: 1px dotted #94a3b8;
      flex: 1;
      margin: 0 4px 3px;
    }
    .print-img-box {
      display: flex;
      gap: 8px;
      align-items: center;
      background: #f8fafc;
    }
    .img-preview {
      width: 48px;
      height: 38px;
      background: #e2e8f0;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      flex-shrink: 0;
    }
    .caption-text {
      font-size: 10px;
      color: #475569;
      line-height: 1.3;
    }
    .footnote-box {
      border-top: 1px solid #e2e8f0;
      padding-top: 4px;
      font-size: 10px;
      color: #64748b;
    }
    .page-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 10px;
      color: #94a3b8;
      margin-top: auto;
    }

    /* Digital Elements */
    .sticky-nav {
      background: #0f172a;
      color: #ffffff;
      border-radius: 4px;
      padding: 4px 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 10px;
      font-weight: 600;
    }
    .nav-links {
      display: flex;
      gap: 6px;
      color: #94a3b8;
      font-weight: 400;
      font-size: 9px;
    }
    .breadcrumbs {
      font-size: 10px;
      color: #64748b;
      display: flex;
      gap: 3px;
    }
    .breadcrumbs span {
      color: #2563eb;
      cursor: pointer;
      text-decoration: underline;
    }

    /* Digital Slider */
    .slider-box {
      background: #f8fafc;
      border-radius: 6px;
      padding: 4px;
    }
    .slider-display {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #e2e8f0;
      border-radius: 4px;
      height: 48px;
      padding: 0 6px;
      position: relative;
    }
    .slider-btn {
      background: rgba(255,255,255,0.9);
      border: 1px solid #cbd5e1;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 10px;
      font-weight: bold;
      color: #1e293b;
    }
    .slider-btn:active {
      background: #e2e8f0;
    }
    .slide-content {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 600;
    }
    .slider-dots {
      display: flex;
      justify-content: center;
      gap: 4px;
      margin-top: 4px;
    }
    .slider-dot-btn {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #cbd5e1;
      border: none;
      cursor: pointer;
      padding: 0;
    }
    .slider-dot-btn.active {
      background: #2563eb;
    }

    .digital-body {
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: 6px;
    }
    .article-snippet {
      font-size: 10px;
      color: #334155;
      line-height: 1.3;
    }
    .hyperlink {
      color: #2563eb;
      text-decoration: underline;
      cursor: pointer;
      font-weight: 600;
    }
    .sidebar-box {
      background: #f8fafc;
      border-left: 2px solid #3b82f6;
    }
    .sidebar-link {
      font-size: 9px;
      color: #2563eb;
      display: block;
      margin-top: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  </style>
</head>
<body>

  
  <div class="filter-bar">
    <button class="filter-btn active" onclick="setHighlight('all', this)">✦ All Landmarks</button>
    <button class="filter-btn" onclick="setHighlight('nav', this)">🧭 Navigation</button>
    <button class="filter-btn" onclick="setHighlight('links', this)">🔗 References</button>
    <button class="filter-btn" onclick="setHighlight('media', this)">🖼️ Media</button>
  </div>

  <div class="comparison-grid">
    
    <div class="print-page">
      <div class="column-header">
        <span>📖 Print Text</span>
        <span style="font-size:10px; color:#64748b; font-weight:normal;">Static Page</span>
      </div>

      
      <div class="landmark toc-box group-nav">
        <span class="tag">Table of Contents</span>
        <div class="toc-item"><span>1. Solar System</span><span class="dots-leader"></span><span>p. 42</span></div>
        <div class="toc-item"><span>2. Deep Space</span><span class="dots-leader"></span><span>p. 58</span></div>
      </div>

      
      <div class="landmark print-img-box group-media">
        <div class="img-preview">🪐</div>
        <div>
          <span class="tag">Static Caption</span>
          <p class="caption-text">Fig 1.2: Saturn's rings composed of ice and dust.</p>
        </div>
      </div>

      
      <div class="landmark footnote-box group-links">
        <span class="tag">Footnote Citation</span>
        <p>[1] NASA Cassini Mission archive (2017).</p>
      </div>

      
      <div class="page-footer landmark group-nav">
        <span>Preview Marker</span>
        <span style="font-weight:700; color:#1e293b;">Page 42</span>
      </div>
    </div>

    
    <div class="browser-window">
      <div class="browser-chrome">
        <div class="browser-dots">
          <div class="browser-dot"></div>
          <div class="browser-dot"></div>
          <div class="browser-dot"></div>
        </div>
        <div class="browser-url">https://encyclopedia.org/space/saturn</div>
      </div>

      <div class="browser-content">
        
        <div class="landmark sticky-nav group-nav">
          <span>🌌 Cosmos</span>
          <div class="nav-links">
            <span>Solar System ▾</span>
            <span>Search 🔍</span>
          </div>
        </div>

        
        <div class="landmark breadcrumbs group-nav">
          <span class="tag" style="margin-right:2px;">Path:</span>
          <span>Home</span> &gt; <span>Space</span> &gt; <strong>Saturn</strong>
        </div>

        
        <div class="landmark slider-box group-media">
          <span class="tag">Interactive Media Slider</span>
          <div class="slider-display">
            <button class="slider-btn" onclick="prevSlide()">‹</button>
            <div class="slide-content" id="slideContent">
              <span>🪐</span> <span>Saturn's Orbit</span>
            </div>
            <button class="slider-btn" onclick="nextSlide()">›</button>
          </div>
          <div class="slider-dots">
            <button class="slider-dot-btn active" onclick="setSlide(0)"></button>
            <button class="slider-dot-btn" onclick="setSlide(1)"></button>
            <button class="slider-dot-btn" onclick="setSlide(2)"></button>
          </div>
        </div>

        
        <div class="digital-body">
          <div class="landmark group-links">
            <span class="tag">Live Hyperlink</span>
            <p class="article-snippet">
              Examined by the <span class="hyperlink">Cassini Probe ↗</span> in 2017.
            </p>
          </div>

          <div class="landmark sidebar-box group-links">
            <span class="tag">Related Sidebar</span>
            <a class="sidebar-link">→ Gas Giants</a>
            <a class="sidebar-link">→ Moons of Saturn</a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    // Landmark Highlighting Logic
    function setHighlight(group, btn) {
      document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
      if (btn) btn.classList.add('active');

      const landmarks = document.querySelectorAll('.landmark');
      landmarks.forEach(el => {
        if (group === 'all') {
          el.classList.remove('highlight');
        } else if (el.classList.contains('group-' + group)) {
          el.classList.add('highlight');
        } else {
          el.classList.remove('highlight');
        }
      });
    }

    // Interactive Slider Logic
    const slides = [
      { icon: '🪐', title: "Saturn's Rings" },
      { icon: '🛰️', title: 'Cassini Flyby' },
      { icon: '🌑', title: 'Titan Moon' }
    ];
    let currentSlide = 0;

    function renderSlide() {
      const container = document.getElementById('slideContent');
      container.innerHTML = `<span>${slides[currentSlide].icon}</span> <span>${slides[currentSlide].title}</span>`;
      
      const dots = document.querySelectorAll('.slider-dot-btn');
      dots.forEach((dot, idx) => {
        dot.classList.toggle('active', idx === currentSlide);
      });
    }

    function nextSlide() {
      currentSlide = (currentSlide + 1) % slides.length;
      renderSlide();
    }

    function prevSlide() {
      currentSlide = (currentSlide - 1 + slides.length) % slides.length;
      renderSlide();
    }

    function setSlide(idx) {
      currentSlide = idx;
      renderSlide();
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <title>3 Reading Purposes</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      background: #f8f9fa;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .header-bar {
      text-align: center;
      margin-bottom: 12px;
    }
    .header-title {
      font-size: 16px;
      font-weight: 700;
      letter-spacing: -0.01em;
    }

    .cards-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      width: 100%;
      max-width: 620px;
    }

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

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

    .purpose-card:focus-visible {
      outline: 2px solid #0284c7;
      outline-offset: 2px;
    }

    /* Card Themes */
    .card-hunt {
      --accent: #0284c7;
      --bg-pill: #e0f2fe;
    }
    .card-build {
      --accent: #7c3aed;
      --bg-pill: #f3e8ff;
    }
    .card-judge {
      --accent: #ea580c;
      --bg-pill: #ffedd5;
    }

    .purpose-card.active {
      border-color: var(--accent);
      box-shadow: 0 4px 14px rgba(0,0,0,0.1);
    }

    .icon-badge {
      font-size: 26px;
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: var(--bg-pill);
      margin-bottom: 8px;
    }

    .card-title {
      font-size: 15px;
      font-weight: 700;
      color: var(--accent);
      margin-bottom: 2px;
    }

    .card-subtitle {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 12px;
    }

    /* Speed Meter Component */
    .speed-gauge {
      width: 100%;
      padding: 6px 8px;
      background: #f8fafc;
      border-radius: 8px;
      margin-bottom: 10px;
      border: 1px solid #edf2f7;
    }

    .speed-label-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 11px;
      font-weight: 600;
      color: #475569;
      margin-bottom: 4px;
    }

    .speed-tag {
      font-size: 10px;
      font-weight: 700;
      padding: 1px 6px;
      border-radius: 4px;
      background: var(--bg-pill);
      color: var(--accent);
    }

    .meter-track {
      height: 6px;
      width: 100%;
      background: #e2e8f0;
      border-radius: 3px;
      position: relative;
      overflow: hidden;
    }

    .meter-fill {
      height: 100%;
      border-radius: 3px;
      background: var(--accent);
      transition: width 0.3s ease;
    }

    /* Mental Question Box */
    .question-box {
      font-size: 12px;
      line-height: 1.35;
      font-style: italic;
      color: #334155;
      background: #f8fafc;
      padding: 8px;
      border-radius: 6px;
      border-left: 3px solid var(--accent);
      width: 100%;
      min-height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Active Indicator pill */
    .status-dot {
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--accent);
      margin-right: 4px;
    }
  </style>
</head>
<body>

  <div class="header-bar">
    <div class="header-title">Set Your Reading Purpose</div>
  </div>

  <div class="cards-grid" role="tablist">
    
    <div class="purpose-card card-hunt active" id="card-1" role="tab" tabindex="0" aria-selected="true">
      <div class="icon-badge">🔍</div>
      <div class="card-title">Hunt</div>
      <div class="card-subtitle">Specific Fact</div>

      <div class="speed-gauge">
        <div class="speed-label-row">
          <span>Speed</span>
          <span class="speed-tag">⚡ Fast (Scan)</span>
        </div>
        <div class="meter-track">
          <div class="meter-fill" style="width: 90%;"></div>
        </div>
      </div>

      <div class="question-box">
        “What year did the mission launch?”
      </div>
    </div>

    
    <div class="purpose-card card-build" id="card-2" role="tab" tabindex="0" aria-selected="false">
      <div class="icon-badge">🧩</div>
      <div class="card-title">Build</div>
      <div class="card-subtitle">Deep Model</div>

      <div class="speed-gauge">
        <div class="speed-label-row">
          <span>Speed</span>
          <span class="speed-tag">🔄 Steady</span>
        </div>
        <div class="meter-track">
          <div class="meter-fill" style="width: 55%;"></div>
        </div>
      </div>

      <div class="question-box">
        “How does geothermal energy work?”
      </div>
    </div>

    
    <div class="purpose-card card-judge" id="card-3" role="tab" tabindex="0" aria-selected="false">
      <div class="icon-badge">⚖️</div>
      <div class="card-title">Judge</div>
      <div class="card-subtitle">Evaluate Argument</div>

      <div class="speed-gauge">
        <div class="speed-label-row">
          <span>Speed</span>
          <span class="speed-tag">🛑 Careful</span>
        </div>
        <div class="meter-track">
          <div class="meter-fill" style="width: 25%;"></div>
        </div>
      </div>

      <div class="question-box">
        “Is this claim backed by evidence?”
      </div>
    </div>
  </div>

  <script>
    const cards = document.querySelectorAll('.purpose-card');

    cards.forEach((card) => {
      function activate() {
        cards.forEach((c) => {
          c.classList.remove('active');
          c.setAttribute('aria-selected', 'false');
        });
        card.classList.add('active');
        card.setAttribute('aria-selected', 'true');
      }

      card.addEventListener('click', activate);
      card.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          activate();
        }
      });
    });
  </script>
</body>
</html>

OGE.7.RF.2

Aligned learning resources

Related diagrams