<!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: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .grid {
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: 12px;
      width: 100%;
    }

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

    /* Mock Slide */
    .slide-panel {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 8px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 260px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.03);
    }

    .slide-content {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .h-item {
      padding: 6px 8px;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.2s ease, box-shadow 0.2s ease;
      position: relative;
    }

    .h-item:hover, .h-item.active {
      background: #f1f5f9;
      box-shadow: inset 3px 0 0 #2563eb;
    }

    .tag {
      display: inline-block;
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 2px 6px;
      border-radius: 4px;
      margin-bottom: 2px;
      background: #e2e8f0;
      color: #475569;
    }

    .l1-text {
      font-size: 18px;
      font-weight: 800;
      color: #0f172a;
      line-height: 1.2;
    }

    .l2-text {
      font-size: 15px;
      font-weight: 600;
      color: #2563eb;
      line-height: 1.2;
    }

    .l3-text {
      font-size: 13px;
      font-weight: 400;
      color: #475569;
      line-height: 1.3;
    }

    .l4-text {
      font-size: 11px;
      font-weight: 300;
      color: #94a3b8;
    }

    /* Contrast Box */
    .contrast-panel {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 8px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .panel-title {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .toggle-row {
      display: flex;
      gap: 6px;
      background: #e2e8f0;
      padding: 3px;
      border-radius: 6px;
    }

    .toggle-btn {
      flex: 1;
      font-size: 12px;
      font-weight: 600;
      padding: 6px 4px;
      border: none;
      border-radius: 4px;
      background: transparent;
      color: #64748b;
      cursor: pointer;
      transition: all 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-card {
      border-radius: 6px;
      padding: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 72px;
      transition: background 0.3s ease, color 0.3s ease;
      border: 1px solid rgba(0,0,0,0.06);
    }

    .sample-text {
      font-size: 15px;
      font-weight: 700;
    }

    .status-badge {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      font-weight: 700;
      padding: 4px 8px;
      border-radius: 20px;
    }

    .pass {
      background: #dcfce7;
      color: #15803d;
    }

    .fail {
      background: #fee2e2;
      color: #b91c1c;
    }

    /* Specs Banner */
    .spec-bar {
      background: #0f172a;
      color: #f8fafc;
      border-radius: 6px;
      padding: 8px 12px;
      font-size: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .spec-val {
      font-weight: 600;
      color: #38bdf8;
    }
  </style>
</head>
<body>

  <div class="grid">
    
    <div class="slide-panel">
      <div class="slide-content">
        <div class="h-item active" onclick="selectLevel(0)">
          <div class="tag">1 • Headline (36–44pt Bold)</div>
          <div class="l1-text">Renewable Energy Surpasses Coal</div>
        </div>

        <div class="h-item" onclick="selectLevel(1)">
          <div class="tag">2 • Sub-claim (28–32pt Semibold)</div>
          <div class="l2-text">+42% Growth Across Key Markets</div>
        </div>

        <div class="h-item" onclick="selectLevel(2)">
          <div class="tag">3 • Supporting (18–24pt Regular)</div>
          <div class="l3-text">Solar and wind capacity doubled over five years.</div>
        </div>
      </div>

      <div class="h-item" onclick="selectLevel(3)">
        <div class="tag">4 • Source (12–14pt Light)</div>
        <div class="l4-text">Source: Global Energy Report 2024</div>
      </div>
    </div>

    
    <div class="contrast-panel">
      <div class="panel-title">
        <span>Contrast Test</span>
        <span id="contrastRatio" style="color:#0f172a; font-weight:800;">14.2:1</span>
      </div>

      <div class="toggle-row">
        <button class="toggle-btn active" id="btnLight" onclick="setMode('light')">Light BG</button>
        <button class="toggle-btn" id="btnDark" onclick="setMode('dark')">Dark BG</button>
      </div>

      
      <div class="sample-card" id="highCard">
        <span class="sample-text" id="highText">High Contrast</span>
        <span class="status-badge pass">✓ Pass</span>
      </div>

      
      <div class="sample-card" id="lowCard">
        <span class="sample-text" id="lowText">Low Contrast</span>
        <span class="status-badge fail">✗ Fail</span>
      </div>
    </div>
  </div>

  
  <div class="spec-bar" id="specBar">
    <span id="levelName">1. Core Claim</span>
    <span class="spec-val" id="levelSpec">36pt–44pt Bold • #0f172a</span>
  </div>

  <script>
    const levels = [
      { name: '1. Headline / Core Claim', spec: '36pt–44pt Bold • Navy #0f172a' },
      { name: '2. Sub-claim / Data', spec: '28pt–32pt Semi-Bold • Cobalt #2563eb' },
      { name: '3. Supporting Text', spec: '18pt–24pt Regular • Slate #475569' },
      { name: '4. Source Note', spec: '12pt–14pt Light • Gray #94a3b8' }
    ];

    function selectLevel(idx) {
      const items = document.querySelectorAll('.h-item');
      items.forEach((el, i) => {
        el.classList.toggle('active', i === idx);
      });
      document.getElementById('levelName').textContent = levels[idx].name;
      document.getElementById('levelSpec').textContent = levels[idx].spec;
    }

    const contrastModes = {
      light: {
        ratio: '12.6 : 1',
        highBg: '#ffffff',
        highColor: '#0f172a',
        lowBg: '#ffffff',
        lowColor: '#cbd5e1'
      },
      dark: {
        ratio: '15.4 : 1',
        highBg: '#0f172a',
        highColor: '#facc15',
        lowBg: '#0f172a',
        lowColor: '#1e293b'
      }
    };

    function setMode(mode) {
      document.getElementById('btnLight').classList.toggle('active', mode === 'light');
      document.getElementById('btnDark').classList.toggle('active', mode === 'dark');

      const data = contrastModes[mode];
      document.getElementById('contrastRatio').textContent = data.ratio;

      const high = document.getElementById('highCard');
      high.style.background = data.highBg;
      high.style.color = data.highColor;

      const low = document.getElementById('lowCard');
      low.style.background = data.lowBg;
      low.style.color = data.lowColor;
    }

    // Init
    setMode('light');
  </script>
</body>
</html>

Designing Clean, Legible Digital Slide Decks That Highlight Core Claims

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

    body {
      width: 100%;
      min-height: 100%;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: transparent;
      color: #0f172a;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 8px 12px;
      gap: 8px;
    }

    /* Top Segmented Proportion Bar */
    .bar-container {
      width: 100%;
      max-width: 520px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .controls-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      gap: 8px;
    }

    .all-btn {
      background: #0f172a;
      border: 1px solid #0f172a;
      color: #ffffff;
      padding: 4px 10px;
      border-radius: 6px;
      font-weight: 700;
      font-size: 11px;
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .all-btn:not(.active) {
      background: #ffffff;
      border-color: #cbd5e1;
      color: #334155;
    }

    .role-badge {
      font-weight: 700;
      font-size: 11px;
      color: #1e293b;
      letter-spacing: -0.01em;
      text-align: right;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .proportion-bar {
      display: flex;
      width: 100%;
      height: 36px;
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid #cbd5e1;
      background: #e2e8f0;
      gap: 2px;
      padding: 1px;
    }

    .seg-btn {
      border: none;
      outline: none;
      cursor: pointer;
      font-size: 11.5px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
      position: relative;
      padding: 0 4px;
      border-radius: 5px;
      letter-spacing: -0.01em;
    }

    .seg-btn:focus-visible {
      outline: 2px solid #2563eb;
    }

    .seg-60 {
      width: 60%;
      background: #f8fafc;
      color: #334155;
      border: 1px solid #cbd5e1;
    }

    .seg-30 {
      width: 30%;
      background: #0f172a;
      color: #ffffff;
    }

    .seg-10 {
      width: 10%;
      background: #b45309;
      color: #ffffff;
    }

    /* Active segment styling */
    .seg-btn.active {
      box-shadow: inset 0 0 0 2px #2563eb, 0 0 0 1px #2563eb;
    }

    /* Slide Canvas */
    .slide-wrapper {
      width: 100%;
      max-width: 520px;
      aspect-ratio: 16 / 9;
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 10px;
      position: relative;
      padding: 4.5% 5.5%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
      transition: background 0.3s ease, outline 0.3s ease;
    }

    /* Layer Elements */
    .layer {
      transition: opacity 0.25s ease, filter 0.25s ease;
    }

    .slide-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .slide-title {
      font-size: clamp(13px, 3.2vw, 17px);
      font-weight: 800;
      color: #0f172a;
      letter-spacing: -0.02em;
    }

    .slide-tag {
      font-size: clamp(9px, 2vw, 11px);
      font-weight: 800;
      background: #b45309;
      color: #ffffff;
      padding: 3px 8px;
      border-radius: 12px;
      letter-spacing: 0.02em;
    }

    .cards-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 3.5%;
      height: 64%;
    }

    .slide-card {
      background: #ffffff;
      border: 1.5px solid #0f172a;
      border-radius: 6px;
      padding: 8% 7%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .card-label {
      font-size: clamp(9.5px, 2.1vw, 11.5px);
      font-weight: 700;
      color: #0f172a;
    }

    .card-metric-neutral {
      font-size: clamp(12px, 2.6vw, 15px);
      font-weight: 800;
      color: #0f172a;
    }

    .card-metric-accent {
      font-size: clamp(12.5px, 2.8vw, 16px);
      font-weight: 900;
      color: #b45309;
      display: flex;
      align-items: center;
      gap: 2px;
    }

    .placeholder-bars {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .p-bar {
      height: 3.5px;
      background: #cbd5e1;
      border-radius: 2px;
      width: 85%;
    }

    .p-bar.short {
      width: 55%;
    }

    /* Grid Overlay for 60% space */
    .space-grid {
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: 0;
      background-size: 16px 16px;
      background-image: radial-gradient(circle, #64748b 1.2px, transparent 1.2px);
      transition: opacity 0.25s ease;
    }

    /* Highlight States */
    body[data-filter="60"] .space-grid {
      opacity: 0.75;
    }

    body[data-filter="60"] .layer-30,
    body[data-filter="60"] .layer-10 {
      opacity: 0.2;
      filter: grayscale(0.7);
    }

    body[data-filter="30"] .layer-60,
    body[data-filter="30"] .layer-10 {
      opacity: 0.16;
      filter: grayscale(0.9);
    }

    body[data-filter="10"] .layer-60,
    body[data-filter="10"] .layer-30 {
      opacity: 0.15;
      filter: grayscale(0.9);
    }

    body[data-filter="10"] .layer-10 {
      transform-origin: center;
      animation: pulse 1.6s ease-in-out infinite;
    }

    @keyframes pulse {
      0%, 100% { filter: drop-shadow(0 0 0 transparent); }
      50% { filter: drop-shadow(0 0 5px rgba(180, 83, 9, 0.7)); }
    }

    /* Bottom Contextual Explanation Panel */
    .info-panel {
      width: 100%;
      max-width: 520px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-left: 4px solid #0f172a;
      border-radius: 6px;
      padding: 8px 12px;
      display: flex;
      flex-direction: column;
      gap: 3px;
      transition: border-left-color 0.25s ease;
    }

    .info-panel.theme-60 {
      border-left-color: #64748b;
    }

    .info-panel.theme-30 {
      border-left-color: #0f172a;
    }

    .info-panel.theme-10 {
      border-left-color: #b45309;
    }

    .info-title {
      font-size: 11.5px;
      font-weight: 800;
      color: #0f172a;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .info-tag {
      font-size: 10px;
      font-weight: 700;
      padding: 1px 6px;
      border-radius: 4px;
      background: #e2e8f0;
      color: #334155;
    }

    .info-desc {
      font-size: 11.5px;
      line-height: 1.35;
      color: #334155;
    }

    @media (max-width: 400px) {
      .seg-btn {
        font-size: 10.5px;
      }
      .proportion-bar {
        height: 32px;
      }
      .info-desc {
        font-size: 11px;
      }
    }
  </style>
</head>
<body data-filter="all">

  <div class="bar-container">
    <div class="controls-row">
      <button class="all-btn active" id="btnAll" onclick="setLayer('all')">All Layers</button>
      <span class="role-badge" id="roleLabel">60 : 30 : 10 Balanced Rule</span>
    </div>

    <div class="proportion-bar" role="group" aria-label="Slide Color Ratios">
      <button class="seg-btn seg-60" id="btn60" onclick="setLayer('60')" title="60% Canvas">60% Canvas</button>
      <button class="seg-btn seg-30" id="btn30" onclick="setLayer('30')" title="30% Structure">30% Structure</button>
      <button class="seg-btn seg-10" id="btn10" onclick="setLayer('10')" title="10% Accent">10% Focus</button>
    </div>
  </div>

  <div class="slide-wrapper" id="slide">
    <div class="space-grid layer layer-60"></div>

    <div class="slide-header">
      <div class="slide-title layer layer-30">Q3 Expansion</div>
      <div class="slide-tag layer layer-10">✦ Core Finding</div>
    </div>

    <div class="cards-row">
      <div class="slide-card layer layer-30">
        <span class="card-label">Audience</span>
        <span class="card-metric-neutral">84k</span>
        <div class="placeholder-bars">
          <div class="p-bar"></div>
          <div class="p-bar short"></div>
        </div>
      </div>

      <div class="slide-card layer layer-30">
        <span class="card-label">Retention</span>
        <span class="card-metric-neutral">92%</span>
        <div class="placeholder-bars">
          <div class="p-bar"></div>
          <div class="p-bar short"></div>
        </div>
      </div>

      <div class="slide-card layer layer-30">
        <span class="card-label">Conversion</span>
        <span class="card-metric-accent layer layer-10">+64% ▲</span>
        <div class="placeholder-bars">
          <div class="p-bar" style="background: #fcd34d;"></div>
          <div class="p-bar short" style="background: #fcd34d;"></div>
        </div>
      </div>
    </div>
  </div>

  <div class="info-panel" id="infoPanel">
    <div class="info-title">
      <span id="infoTitle">60-30-10 Presentation Rule</span>
      <span class="info-tag" id="infoTag">Overview</span>
    </div>
    <div class="info-desc" id="infoDesc">
      The 60-30-10 rule establishes clean visual balance: 60% dominant space for breathing room, 30% structural slate for scannability, and 10% vibrant accent to guide audience gaze directly to key insights.
    </div>
  </div>

  <script>
    const explanations = {
      'all': {
        title: '60-30-10 Presentation Rule',
        tag: 'Overview',
        label: '60 : 30 : 10 Balanced Rule',
        theme: '',
        desc: 'The 60-30-10 rule establishes clean visual balance: 60% dominant space for breathing room, 30% structural slate for scannability, and 10% vibrant accent to guide audience gaze directly to key insights.'
      },
      '60': {
        title: '60% Dominant Canvas',
        tag: 'Space & Margins',
        label: '60% Dominant Canvas (Space)',
        theme: 'theme-60',
        desc: 'Forms the neutral background and generous whitespace. It provides visual breathing room and prevents cognitive overload across dense slides.'
      },
      '30': {
        title: '30% Structural Slate',
        tag: 'Typography & Layout',
        label: '30% Structural Slate (Text)',
        theme: 'theme-30',
        desc: 'Shapes slide titles, card outlines, structured containers, and body text to create clear visual hierarchy and organized chunking.'
      },
      '10': {
        title: '10% Vibrant Accent',
        tag: 'Focal Points',
        label: '10% Vibrant Accent (Focal Point)',
        theme: 'theme-10',
        desc: 'Reserved exclusively for critical metrics, status badges, and core takeaways—instantly directing audience focus per the CRAP Contrast principle.'
      }
    };

    function setLayer(layer) {
      document.body.setAttribute('data-filter', layer);
      
      document.getElementById('btnAll').classList.toggle('active', layer === 'all');
      document.getElementById('btn60').classList.toggle('active', layer === '60');
      document.getElementById('btn30').classList.toggle('active', layer === '30');
      document.getElementById('btn10').classList.toggle('active', layer === '10');
      
      const data = explanations[layer] || explanations['all'];
      document.getElementById('roleLabel').textContent = data.label;
      document.getElementById('infoTitle').textContent = data.title;
      document.getElementById('infoTag').textContent = data.tag;
      document.getElementById('infoDesc').textContent = data.desc;

      const panel = document.getElementById('infoPanel');
      panel.className = 'info-panel ' + (data.theme || '');
    }
  </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>Slide Deck Transformation Sandbox</title>
  <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: #1e293b;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      width: 100%;
      min-height: 100%;
    }

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

    .nav-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #334155;
      padding: 6px 12px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s, color 0.2s;
    }

    .nav-btn:hover:not(:disabled) {
      background: #e2e8f0;
    }

    .nav-btn:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }

    .step-tabs {
      display: flex;
      gap: 4px;
      flex: 1;
      justify-content: center;
      min-width: 200px;
    }

    .tab-btn {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      color: #64748b;
      padding: 6px 10px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
      white-space: nowrap;
    }

    .tab-btn.active {
      background: #1e293b;
      color: #ffffff;
      border-color: #1e293b;
    }

    /* Slide Screen Container */
    .slide-viewport {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      min-height: 220px;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }

    .slide-stage {
      position: absolute;
      inset: 0;
      padding: 16px 20px;
      display: flex;
      flex-direction: column;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease, transform 0.3s ease;
      transform: translateY(6px);
    }

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

    /* Step 1: Raw Text */
    #stage-1 {
      background: #f1f5f9;
      justify-content: flex-start;
      gap: 10px;
    }

    .raw-title {
      font-size: 15px;
      font-weight: 700;
      color: #475569;
    }

    .raw-paragraph {
      font-size: 11px;
      line-height: 1.5;
      color: #64748b;
      text-align: justify;
    }

    .warning-badge {
      margin-top: auto;
      align-self: flex-start;
      background: #fef2f2;
      border: 1px solid #fecaca;
      color: #dc2626;
      font-size: 11px;
      font-weight: 600;
      padding: 4px 8px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    /* Step 2: Extraction Stage */
    #stage-2 {
      background: #f8fafc;
      justify-content: space-between;
    }

    .extract-bg-ghost {
      position: absolute;
      inset: 16px 20px;
      font-size: 10.5px;
      line-height: 1.4;
      color: #94a3b8;
      opacity: 0.25;
      pointer-events: none;
      z-index: 1;
      text-align: justify;
    }

    .extract-layer {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      height: 100%;
      justify-content: space-between;
    }

    .extract-box {
      background: rgba(255, 255, 255, 0.95);
      border: 1.5px dashed #0284c7;
      border-radius: 6px;
      padding: 8px 12px;
      box-shadow: 0 2px 8px rgba(2, 132, 199, 0.08);
    }

    .extract-tag {
      font-size: 9px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #0284c7;
      margin-bottom: 2px;
    }

    .extract-headline {
      font-size: 13px;
      font-weight: 700;
      color: #0f172a;
    }

    .extract-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .extract-pill {
      background: #ffffff;
      border: 1px solid #38bdf8;
      border-radius: 6px;
      padding: 6px 10px;
      font-size: 11px;
      font-weight: 600;
      color: #0369a1;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    /* Step 3: Assertion-Evidence Slide */
    #stage-3 {
      background: #ffffff;
      justify-content: space-between;
      padding: 16px 20px;
    }

    .assertion-header {
      font-size: 15px;
      font-weight: 800;
      color: #0f172a;
      line-height: 1.3;
      margin-bottom: 6px;
    }

    .comparison-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      flex: 1;
      align-items: stretch;
    }

    .slide-card {
      border-radius: 6px;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
    }

    .slide-card.active-contrast {
      border: 1.5px solid #10b981;
      background: #ecfdf5;
      box-shadow: 0 2px 10px rgba(16, 185, 129, 0.12);
    }

    .card-badge {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      padding: 2px 6px;
      border-radius: 4px;
      margin-bottom: 4px;
    }

    .badge-slate {
      background: #e2e8f0;
      color: #475569;
    }

    .badge-green {
      background: #10b981;
      color: #ffffff;
    }

    .stat-number {
      font-size: 26px;
      font-weight: 800;
      line-height: 1;
      color: #1e293b;
      margin: 2px 0;
    }

    .stat-number.green-val {
      color: #059669;
    }

    .stat-unit {
      font-size: 10px;
      font-weight: 600;
      color: #64748b;
    }

    /* Commentary Callout */
    .commentary-bar {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      padding: 10px 12px;
      display: flex;
      align-items: flex-start;
      gap: 8px;
    }

    .commentary-icon {
      font-size: 14px;
      line-height: 1.2;
    }

    .commentary-text {
      font-size: 12px;
      color: #334155;
      line-height: 1.4;
    }

    .commentary-text strong {
      color: #0f172a;
    }

    @media (max-width: 480px) {
      .assertion-header {
        font-size: 13px;
      }
      .stat-number {
        font-size: 20px;
      }
      .slide-viewport {
        min-height: 240px;
      }
      .raw-paragraph {
        font-size: 10px;
      }
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="nav-btn" id="prevBtn" onclick="prevStep()">← Prev</button>
    <div class="step-tabs">
      <button class="tab-btn active" id="tab-0" onclick="setStep(0)">1. Raw Text</button>
      <button class="tab-btn" id="tab-1" onclick="setStep(1)">2. Extract</button>
      <button class="tab-btn" id="tab-2" onclick="setStep(2)">3. Visual Slide</button>
    </div>
    <button class="nav-btn" id="nextBtn" onclick="nextStep()">Next →</button>
  </div>

  
  <div class="slide-viewport">
    
    
    <div class="slide-stage active" id="stage-1">
      <div class="raw-title">Electric Vehicle Environmental Impact</div>
      <p class="raw-paragraph">
        Electric vehicles have been widely discussed in environmental literature regarding lifetime emissions. When assessing total manufacturing and operational life cycles, conventional internal combustion vehicles produce approximately 410 grams of CO₂ per mile driven. In contrast, modern electric vehicle fleet data demonstrates substantial efficiency, generating an average of 200 grams of CO₂ per mile across mixed power grids.
      </p>
      <div class="warning-badge">
        <span>⚠️</span>
        <span>High Cognitive Load: Audience reads instead of listening</span>
      </div>
    </div>

    
    <div class="slide-stage" id="stage-2">
      <div class="extract-bg-ghost">
        Electric vehicles have been widely discussed in environmental literature regarding lifetime emissions. When assessing total manufacturing and operational life cycles, conventional internal combustion vehicles produce approximately 410 grams of CO₂ per mile driven. In contrast, modern electric vehicle fleet data demonstrates substantial efficiency, generating an average of 200 grams of CO₂ per mile across mixed power grids.
      </div>
      <div class="extract-layer">
        <div class="extract-box">
          <div class="extract-tag">Step 1: Extract Core Assertion Headline</div>
          <div class="extract-headline">EV Lifecycle Emissions Are 50% Lower Than Gas Cars</div>
        </div>
        <div class="extract-grid">
          <div class="extract-pill">
            <span>⛽</span>
            <span><strong>Baseline:</strong> 410g CO₂/mi</span>
          </div>
          <div class="extract-pill">
            <span>⚡</span>
            <span><strong>EV Fleet:</strong> 200g CO₂/mi</span>
          </div>
        </div>
      </div>
    </div>

    
    <div class="slide-stage" id="stage-3">
      <div class="assertion-header">EV Lifecycle Emissions Are 50% Lower Than Gas Cars</div>
      <div class="comparison-grid">
        <div class="slide-card">
          <div class="card-badge badge-slate">Gasoline Baseline</div>
          <div class="stat-number">410g</div>
          <div class="stat-unit">CO₂ per mile</div>
        </div>
        <div class="slide-card active-contrast">
          <div class="card-badge badge-green">-50% Cleaner</div>
          <div class="stat-number green-val">200g</div>
          <div class="stat-unit">CO₂ per mile</div>
        </div>
      </div>
    </div>

  </div>

  
  <div class="commentary-bar">
    <div class="commentary-icon" id="commentaryIcon">📄</div>
    <div class="commentary-text" id="commentaryText">
      <strong>Raw Text Wall:</strong> Unstructured paragraphs force the audience's brain to read, breaking connection with the presenter.
    </div>
  </div>

  <script>
    let currentStep = 0;
    const totalSteps = 3;

    const commentaries = [
      {
        icon: "📄",
        title: "Raw Text Wall:",
        desc: "Unstructured paragraphs force the audience's brain to read, breaking connection with the presenter."
      },
      {
        icon: "🔍",
        title: "Isolate & Filter:",
        desc: "Strip filler text. Pull out the single core claim and the two critical comparative metrics."
      },
      {
        icon: "✨",
        title: "Assertion-Evidence Slide:",
        desc: "A bold sentence-headline states the takeaway; structured visual cards prove it in under 3 seconds."
      }
    ];

    function updateView() {
      // Update stages
      for (let i = 0; i < totalSteps; i++) {
        const stage = document.getElementById(`stage-${i + 1}`);
        const tab = document.getElementById(`tab-${i}`);
        
        if (i === currentStep) {
          stage.classList.add('active');
          tab.classList.add('active');
        } else {
          stage.classList.remove('active');
          tab.classList.remove('active');
        }
      }

      // Update Nav Buttons
      document.getElementById('prevBtn').disabled = currentStep === 0;
      document.getElementById('nextBtn').disabled = currentStep === totalSteps - 1;

      // Update Commentary
      const data = commentaries[currentStep];
      document.getElementById('commentaryIcon').textContent = data.icon;
      document.getElementById('commentaryText').innerHTML = `<strong>${data.title}</strong> ${data.desc}`;
    }

    function setStep(index) {
      currentStep = index;
      updateView();
    }

    function nextStep() {
      if (currentStep < totalSteps - 1) {
        currentStep++;
        updateView();
      }
    }

    function prevStep() {
      if (currentStep > 0) {
        currentStep--;
        updateView();
      }
    }

    // Initialize on load
    updateView();
  </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>Assertion-Evidence Slide Design Comparison</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8fafc;
      color: #0f172a;
      padding: 12px;
      line-height: 1.4;
    }

    /* Controls */
    .controls {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 12px;
      justify-content: center;
    }

    .pill-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #475569;
      padding: 6px 12px;
      border-radius: 9999px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
      user-select: none;
    }

    .pill-btn:hover {
      background: #f1f5f9;
      color: #0f172a;
    }

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

    /* Comparison Grid */
    .comparison-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 12px;
    }

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

    /* Slide Card */
    .slide-card {
      background: #ffffff;
      border-radius: 10px;
      border: 1px solid #e2e8f0;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .slide-tag {
      font-size: 11px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 6px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      width: fit-content;
    }

    .slide-tag.bad {
      background: #fee2e2;
      color: #dc2626;
      border: 1px solid #fecaca;
    }

    .slide-tag.good {
      background: #dcfce7;
      color: #15803d;
      border: 1px solid #bbf7d0;
    }

    /* 16:9 Aspect Frame */
    .slide-canvas {
      aspect-ratio: 16 / 9;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }

    /* Inspector Zones & Highlighting */
    .zone {
      border-radius: 4px;
      padding: 4px;
      transition: opacity 0.25s ease, filter 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
    }

    .dimmed {
      opacity: 0.25 !important;
      filter: grayscale(80%);
    }

    .highlight-red {
      box-shadow: 0 0 0 2px #ef4444 !important;
      background-color: rgba(239, 68, 68, 0.06);
    }

    .highlight-green {
      box-shadow: 0 0 0 2px #10b981 !important;
      background-color: rgba(16, 185, 129, 0.06);
    }

    /* Left Slide Contents */
    .trad-headline {
      text-align: center;
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
      margin-bottom: 6px;
    }

    .trad-body {
      display: grid;
      grid-template-columns: 1fr 44px;
      gap: 6px;
      align-items: start;
      flex: 1;
    }

    .trad-bullets {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .trad-bullets li {
      font-size: 9px;
      color: #475569;
      display: flex;
      align-items: flex-start;
      gap: 4px;
      line-height: 1.25;
    }

    .bullet-sq {
      width: 4px;
      height: 4px;
      background: #64748b;
      margin-top: 3px;
      flex-shrink: 0;
    }

    .trad-art {
      width: 44px;
      height: 44px;
      background: #f1f5f9;
      border: 1px dashed #cbd5e1;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      color: #94a3b8;
    }

    .art-label {
      font-size: 7px;
      color: #94a3b8;
      text-transform: uppercase;
      font-weight: 600;
    }

    /* Right Slide Contents */
    .ae-headline {
      font-size: 12px;
      font-weight: 800;
      color: #0f172a;
      line-height: 1.25;
      margin-bottom: 6px;
    }

    .ae-body {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      align-items: center;
      flex: 1;
    }

    .metric-box {
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
      border-radius: 6px;
      padding: 6px;
      text-align: center;
    }

    .metric-value {
      font-size: 24px;
      font-weight: 900;
      color: #16a34a;
      line-height: 1;
    }

    .metric-label {
      font-size: 8px;
      font-weight: 700;
      color: #15803d;
      margin-top: 2px;
      text-transform: uppercase;
    }

    .chart-box {
      display: flex;
      flex-direction: column;
      gap: 5px;
      justify-content: center;
    }

    .chart-row {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .chart-header {
      display: flex;
      justify-content: space-between;
      font-size: 8px;
      font-weight: 700;
      color: #334155;
    }

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

    .bar-fill {
      height: 100%;
      border-radius: 999px;
    }

    .bar-2010 {
      width: 100%;
      background: #94a3b8;
    }

    .bar-2020 {
      width: 15%;
      background: #10b981;
    }

    /* Card Footers */
    .card-footer {
      font-size: 11px;
      line-height: 1.3;
      padding: 6px 8px;
      border-radius: 6px;
      font-weight: 500;
    }

    .card-footer.bad {
      background: #fef2f2;
      color: #991b1b;
      border-left: 3px solid #ef4444;
    }

    .card-footer.good {
      background: #f0fdf4;
      color: #166534;
      border-left: 3px solid #10b981;
    }

    /* Pedagogical Banner */
    .pedagogy-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

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

    .pedagogy-text {
      font-size: 12px;
      color: #1e293b;
      line-height: 1.4;
    }

    .pedagogy-text strong {
      color: #0f172a;
    }
  </style>
</head>
<body>

  
  <div class="controls" role="tablist" aria-label="Comparison Filters">
    <button class="pill-btn active" id="btn-overview" role="tab" aria-selected="true" tabindex="0">Compare Overview</button>
    <button class="pill-btn" id="btn-claim" role="tab" aria-selected="false" tabindex="0">1. Headline / Claim</button>
    <button class="pill-btn" id="btn-text" role="tab" aria-selected="false" tabindex="0">2. Cognitive Load</button>
    <button class="pill-btn" id="btn-visuals" role="tab" aria-selected="false" tabindex="0">3. Evidence &amp; Visuals</button>
  </div>

  
  <div class="comparison-grid">
    
    
    <div class="slide-card">
      <span class="slide-tag bad">✕ Traditional Topic Slide</span>
      
      <div class="slide-canvas">
        
        <div class="zone" id="trad-zone-claim">
          <div class="trad-headline">Solar Energy Trends</div>
        </div>

        <div class="trad-body">
          
          <div class="zone" id="trad-zone-text">
            <ul class="trad-bullets">
              <li><span class="bullet-sq"></span>Photovoltaic cell manufacturing scales up globally</li>
              <li><span class="bullet-sq"></span>Supply chain efficiencies reduce unit production costs</li>
              <li><span class="bullet-sq"></span>Subsidies historically assisted early adoption phases</li>
              <li><span class="bullet-sq"></span>Utility and residential sectors see rapid expansion</li>
            </ul>
          </div>

          
          <div class="zone" id="trad-zone-visuals">
            <div class="trad-art">
              ☀️
              <span class="art-label">Clip Art</span>
            </div>
          </div>
        </div>
      </div>

      <div class="card-footer bad">
        Split-attention: audience reads dense text while tuning out the speaker.
      </div>
    </div>

    
    <div class="slide-card">
      <span class="slide-tag good">✓ Assertion-Evidence Slide</span>
      
      <div class="slide-canvas">
        
        <div class="zone" id="ae-zone-claim">
          <div class="ae-headline">Solar Power Costs Dropped 85% in Ten Years</div>
        </div>

        
        <div class="ae-body">
          
          <div class="zone" id="ae-zone-visuals-stat">
            <div class="metric-box">
              <div class="metric-value">−85%</div>
              <div class="metric-label">Cost Reduction</div>
            </div>
          </div>

          
          <div class="zone" id="ae-zone-visuals-chart">
            <div class="chart-box">
              <div class="chart-row">
                <div class="chart-header">
                  <span>2010</span>
                  <span>$381/MWh</span>
                </div>
                <div class="bar-track">
                  <div class="bar-fill bar-2010"></div>
                </div>
              </div>

              <div class="chart-row">
                <div class="chart-header">
                  <span>2020</span>
                  <span>$57/MWh</span>
                </div>
                <div class="bar-track">
                  <div class="bar-fill bar-2020"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="card-footer good">
        Takeaway understood in 3 seconds; visual validates speaker's claim.
      </div>
    </div>

  </div>

  
  <div class="pedagogy-card">
    <div class="pedagogy-icon" id="banner-icon">✦</div>
    <div class="pedagogy-text" id="banner-text">
      <strong>Assertion-Evidence Structure:</strong> Replace vague topic headers with full-sentence claims supported directly by quantitative or visual proof.
    </div>
  </div>

  <script>
    const buttons = [
      { id: 'btn-overview', mode: 'overview' },
      { id: 'btn-claim', mode: 'claim' },
      { id: 'btn-text', mode: 'text' },
      { id: 'btn-visuals', mode: 'visuals' }
    ];

    const pedagogyData = {
      overview: {
        icon: '✦',
        text: '<strong>Assertion-Evidence Structure:</strong> Replace vague topic titles with full-sentence claims supported directly by quantitative visual proof.'
      },
      claim: {
        icon: '📌',
        text: '<strong>Headline vs Claim:</strong> Topic headers ("Solar Trends") force audiences to guess. Complete sentence claims state the key conclusion upfront.'
      },
      text: {
        icon: '🧠',
        text: '<strong>Cognitive Load:</strong> Bullet lists cause split-attention. Visuals let the audience absorb data instantly while actively listening to the speaker.'
      },
      visuals: {
        icon: '📊',
        text: '<strong>Concrete Evidence:</strong> Decorative icons add no statistical value. Replace clipart with charts and data that validate your assertion.'
      }
    };

    const tradClaim = document.getElementById('trad-zone-claim');
    const tradText = document.getElementById('trad-zone-text');
    const tradVisuals = document.getElementById('trad-zone-visuals');

    const aeClaim = document.getElementById('ae-zone-claim');
    const aeStat = document.getElementById('ae-zone-visuals-stat');
    const aeChart = document.getElementById('ae-zone-visuals-chart');

    const bannerIcon = document.getElementById('banner-icon');
    const bannerText = document.getElementById('banner-text');

    function resetZones() {
      [tradClaim, tradText, tradVisuals, aeClaim, aeStat, aeChart].forEach(el => {
        el.className = 'zone';
      });
    }

    function setMode(mode) {
      buttons.forEach(btnObj => {
        const btn = document.getElementById(btnObj.id);
        const isActive = btnObj.mode === mode;
        btn.classList.toggle('active', isActive);
        btn.setAttribute('aria-selected', isActive);
      });

      resetZones();

      if (mode === 'claim') {
        tradClaim.classList.add('highlight-red');
        aeClaim.classList.add('highlight-green');

        tradText.classList.add('dimmed');
        tradVisuals.classList.add('dimmed');
        aeStat.classList.add('dimmed');
        aeChart.classList.add('dimmed');
      } else if (mode === 'text') {
        tradText.classList.add('highlight-red');
        aeStat.classList.add('highlight-green');
        aeChart.classList.add('highlight-green');

        tradClaim.classList.add('dimmed');
        tradVisuals.classList.add('dimmed');
        aeClaim.classList.add('dimmed');
      } else if (mode === 'visuals') {
        tradVisuals.classList.add('highlight-red');
        aeStat.classList.add('highlight-green');
        aeChart.classList.add('highlight-green');

        tradClaim.classList.add('dimmed');
        tradText.classList.add('dimmed');
        aeClaim.classList.add('dimmed');
      }

      bannerIcon.textContent = pedagogyData[mode].icon;
      bannerText.innerHTML = pedagogyData[mode].text;
    }

    buttons.forEach(btnObj => {
      const btn = document.getElementById(btnObj.id);
      btn.addEventListener('click', () => setMode(btnObj.mode));
      btn.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          setMode(btnObj.mode);
        }
      });
    });
  </script>
</body>
</html>

OGE.9.SL.6

Aligned learning resources

Related diagrams