<!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;
    }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: transparent;
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      min-height: 100%;
    }
    .controls {
      display: flex;
      gap: 6px;
      margin-bottom: 12px;
      background: #f1f5f9;
      padding: 4px;
      border-radius: 24px;
      border: 1px solid #cbd5e1;
    }
    .tab-btn {
      border: none;
      background: transparent;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      border-radius: 20px;
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease;
    }
    .tab-btn.active {
      background: #ffffff;
      color: #0f172a;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    .stage {
      width: 100%;
      max-width: 520px;
      position: relative;
    }

    .slide-view {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 8px;
      padding: 16px;
      display: none;
      flex-direction: column;
      gap: 12px;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .slide-view.active {
      display: flex;
      opacity: 1;
      animation: fadeIn 0.25s ease forwards;
    }

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

    /* Slide Header Area */
    .slide-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
      flex-wrap: wrap;
      border-bottom: 1px solid #e2e8f0;
      padding-bottom: 8px;
    }
    .slide-top.clean-header {
      border-bottom: none;
      padding-bottom: 0;
    }

    .status-tag {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      padding: 3px 8px;
      border-radius: 4px;
      letter-spacing: 0.5px;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .tag-before {
      background: #fee2e2;
      color: #b91c1c;
    }
    .tag-after {
      background: #dcfce7;
      color: #15803d;
    }

    /* BEFORE SLIDE: Cluttered */
    .before-header {
      font-size: 12px;
      font-weight: 700;
      color: #334155;
      line-height: 1.3;
      flex: 1;
      min-width: 160px;
    }
    .before-body {
      display: flex;
      gap: 10px;
      align-items: flex-end;
    }
    .before-bullets {
      flex: 1;
      list-style-type: disc;
      padding-left: 16px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      font-size: 11px;
      line-height: 1.35;
      color: #475569;
    }
    .before-photo {
      width: 65px;
      height: 56px;
      background: #f8fafc;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 9px;
      color: #94a3b8;
      border: 1px dashed #cbd5e1;
      flex-shrink: 0;
    }

    /* AFTER SLIDE: Clean */
    .after-title {
      font-size: 17px;
      font-weight: 800;
      color: #0f172a;
      line-height: 1.25;
      flex: 1;
      min-width: 180px;
    }
    .after-title span {
      color: #0284c7;
    }
    .after-content {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 8px 0;
    }
    .metric-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .metric-label {
      font-size: 12px;
      font-weight: 600;
      width: 72px;
      color: #475569;
      white-space: nowrap;
    }
    .metric-bar-wrap {
      flex: 1;
      height: 26px;
      background: #f1f5f9;
      border-radius: 6px;
      overflow: hidden;
      display: flex;
    }
    .metric-bar {
      height: 100%;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 8px;
      font-size: 11px;
      font-weight: 700;
      color: #ffffff;
      transition: width 0.5s ease;
    }
    .bar-canopy {
      width: 74%;
      background: #0284c7;
    }
    .bar-street {
      width: 90%;
      background: #ea580c;
    }
    .diff-badge {
      align-self: flex-start;
      margin-left: 80px;
      background: #e0f2fe;
      color: #0369a1;
      font-size: 11px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 12px;
      border: 1px solid #bae6fd;
    }
    .after-footer {
      font-size: 10px;
      color: #94a3b8;
      margin-top: 4px;
    }

    @media (max-width: 380px) {
      .before-body {
        flex-direction: column;
        align-items: stretch;
      }
      .before-photo {
        align-self: flex-start;
        height: 38px;
        width: 100%;
        flex-direction: row;
        gap: 6px;
      }
      .diff-badge {
        margin-left: 0;
      }
    }
  </style>
</head>
<body>

  <div class="controls" role="tablist">
    <button class="tab-btn active" id="btnBefore" onclick="showState('before')" role="tab" aria-selected="true">Before (Dense)</button>
    <button class="tab-btn" id="btnAfter" onclick="showState('after')" role="tab" aria-selected="false">After (Visual)</button>
  </div>

  <div class="stage">
    
    <div id="slideBefore" class="slide-view active">
      <div class="slide-top">
        <div class="before-header">Urban Heat Island Mitigation Strategies &amp; Canopy Analysis</div>
        <span class="status-tag tag-before">❌ Overloaded</span>
      </div>
      <div class="before-body">
        <ul class="before-bullets">
          <li>Urban forestation programs provide substantial shading over paved surfaces.</li>
          <li>Studies demonstrate significant ambient air reduction across urban areas.</li>
          <li>Tree canopies facilitate evapotranspiration, absorbing heat energy.</li>
          <li>Shaded streets experience lower heat-flux compared to open asphalt surfaces.</li>
          <li>Average measured temperature drops approximately 4°F across downtown corridors.</li>
          <li>Municipal planners recommend minimum 30% canopy density for high-traffic zones.</li>
        </ul>
        <div class="before-photo">
          <span style="font-size:14px;">🌳</span>
          <span>Photo</span>
        </div>
      </div>
    </div>

    
    <div id="slideAfter" class="slide-view">
      <div class="slide-top clean-header">
        <div class="after-title">Urban Canopies Cool Cities by <span>4°F</span></div>
        <span class="status-tag tag-after">✓ Clean</span>
      </div>
      
      <div class="after-content">
        <div class="metric-row">
          <span class="metric-label">🌳 Canopy</span>
          <div class="metric-bar-wrap">
            <div class="metric-bar bar-canopy">82°F</div>
          </div>
        </div>
        
        <div class="diff-badge">✦ 4°F Cooler</div>

        <div class="metric-row">
          <span class="metric-label">🏢 Street</span>
          <div class="metric-bar-wrap">
            <div class="metric-bar bar-street">86°F</div>
          </div>
        </div>
      </div>

      <div class="after-footer">Source: EPA Urban Heat Island Study</div>
    </div>
  </div>

  <script>
    function showState(state) {
      const beforeSlide = document.getElementById('slideBefore');
      const afterSlide = document.getElementById('slideAfter');
      const btnBefore = document.getElementById('btnBefore');
      const btnAfter = document.getElementById('btnAfter');

      if (state === 'before') {
        afterSlide.classList.remove('active');
        beforeSlide.classList.add('active');
        btnBefore.classList.add('active');
        btnBefore.setAttribute('aria-selected', 'true');
        btnAfter.classList.remove('active');
        btnAfter.setAttribute('aria-selected', 'false');
      } else {
        beforeSlide.classList.remove('active');
        afterSlide.classList.add('active');
        btnAfter.classList.add('active');
        btnAfter.setAttribute('aria-selected', 'true');
        btnBefore.classList.remove('active');
        btnBefore.setAttribute('aria-selected', 'false');
      }
    }
  </script>
</body>
</html>

Designing Clean Visual Slides and Avoiding Cognitive Overload

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Slide Visual Hierarchy</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 8px;
      user-select: none;
    }

    .wrapper {
      width: 100%;
      max-width: 580px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      /* No outer border or card styling */
    }

    /* 16:9 Slide Canvas Mockup */
    .slide-stage {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      background: #ffffff;
      border-radius: 8px;
      border: 1px solid #cbd5e1;
      overflow: hidden;
    }

    /* SVG Scan Path Overlay */
    .path-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 5;
    }

    .scan-line {
      fill: none;
      stroke: #22b7ff;
      stroke-width: 3;
      stroke-dasharray: 6, 6;
      opacity: 0.15;
      transition: opacity 0.6s ease, stroke 0.6s ease;
    }

    .scan-line.active {
      opacity: 1;
      stroke: #22b7ff;
      filter: drop-shadow(0 0 4px rgba(34, 183, 255, 0.6));
      animation: dash 3s linear infinite;
    }

    @keyframes dash {
      to {
        stroke-dashoffset: -24;
      }
    }

    /* Focal Point Elements */
    .focal-item {
      position: absolute;
      transition: opacity 0.5s ease, filter 0.5s ease;
      cursor: pointer;
      display: flex;
      align-items: center;
      z-index: 6;
    }

    .focal-item.dimmed {
      opacity: 0.45;
    }

    /* #1: Primary Metric */
    .metric-box {
      top: 14%;
      left: 12%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 1px;
    }

    .metric-value {
      font-size: clamp(24px, 6vw, 44px);
      font-weight: 800;
      color: #1e2945;
      line-height: 1.05;
      letter-spacing: -0.03em;
    }

    .metric-label {
      font-size: clamp(9px, 2vw, 12px);
      font-weight: 700;
      color: #475569;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    /* #2: Secondary Bar Chart */
    .chart-box {
      top: 15%;
      right: 10%;
      width: 32%;
      height: 48%;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: clamp(4px, 1.2vw, 8px);
      padding: clamp(6px, 1.5vw, 10px);
      background: #f8fafc;
      border-radius: 6px;
      border: 1px solid #e2e8f0;
    }

    .chart-bar {
      flex: 1;
      background: #94a3b8;
      border-radius: 3px 3px 0 0;
      transition: background-color 0.5s ease, opacity 0.5s ease;
    }

    .chart-bar:nth-child(1) { height: 40%; }
    .chart-bar:nth-child(2) { height: 68%; }
    .chart-bar:nth-child(3) {
      height: 96%;
      background: #22b7ff;
    }

    /* #3: Tertiary Caption */
    .caption-box {
      bottom: 12%;
      left: 14%;
      right: auto;
      max-width: 75%;
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: clamp(10px, 2.2vw, 13px);
      color: #6b7280;
      font-weight: 600;
      white-space: nowrap;
    }

    /* Hierarchy Badges */
    .badge {
      width: clamp(18px, 4.2vw, 24px);
      height: clamp(18px, 4.2vw, 24px);
      border-radius: 50%;
      background: #e2e8f0;
      color: #475569;
      font-size: clamp(10px, 2.2vw, 12px);
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
      flex-shrink: 0;
    }

    .badge-float {
      position: absolute;
      z-index: 20;
      transform: translate(-50%, -50%);
    }

    .badge-float.active {
      background: #1e2945;
      color: #ffffff;
      box-shadow: 0 0 0 2px #22b7ff;
    }

    /* Controls Bar */
    .controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      background: transparent;
      padding: 0;
    }

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

    .btn-step {
      flex: 1;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #1e2945;
      font-size: clamp(10px, 2.2vw, 12px);
      font-weight: 600;
      padding: 8px 4px;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 3px;
      transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease;
    }

    .btn-step:hover {
      background: #f1f5f9;
    }

    .btn-step.active {
      background: #1e2945;
      color: #ffffff;
      border-color: #1e2945;
    }

    .btn-play {
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #1e2945;
      width: 36px;
      height: 36px;
      border-radius: 6px;
      font-size: 13px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.5s ease, color 0.5s ease;
      flex-shrink: 0;
    }

    .btn-play:hover {
      background: #f1f5f9;
    }
  </style>
</head>
<body>

  <div class="wrapper">
    
    <div class="slide-stage" id="slideStage">
      
      
      <svg class="path-svg" viewBox="0 0 100 100" preserveAspectRatio="none">
        <defs>
          <marker id="arrow" viewBox="0 0 10 10" refX="7" refY="5" markerWidth="4.5" markerHeight="4.5" orient="auto">
            <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#22b7ff" />
          </marker>
        </defs>
        
        <path id="path12" class="scan-line" d="M 38 28 L 62 33" marker-end="url(#arrow)" />
        
        <path id="path23" class="scan-line" d="M 68 64 L 20 73" marker-end="url(#arrow)" />
      </svg>

      
      <div id="badge1" class="badge badge-float" style="left: 6%; top: 22%;">1</div>
      <div id="badge2" class="badge badge-float" style="left: 94%; top: 20%;">2</div>
      <div id="badge3" class="badge badge-float" style="left: 6%; top: 84%;">3</div>

      
      <div class="focal-item metric-box" id="focal1" onclick="setStep(0)">
        <div class="metric-value">84%</div>
        <div class="metric-label">Retention Rate</div>
      </div>

      
      <div class="focal-item chart-box" id="focal2" onclick="setStep(1)">
        <div class="chart-bar"></div>
        <div class="chart-bar"></div>
        <div class="chart-bar"></div>
      </div>

      
      <div class="focal-item caption-box" id="focal3" onclick="setStep(2)">
        <span>✦ Source: Q3 Performance Benchmark</span>
      </div>

    </div>

    
    <div class="controls">
      <div class="step-buttons">
        <button class="btn-step active" id="btn0" onclick="setStep(0)">1. Metric</button>
        <button class="btn-step" id="btn1" onclick="setStep(1)">2. Chart</button>
        <button class="btn-step" id="btn2" onclick="setStep(2)">3. Note</button>
        <button class="btn-step" id="btn3" onclick="setStep(3)">Z-Path</button>
      </div>
      <button class="btn-play" id="playBtn" onclick="togglePlay()" title="Play / Pause">⏸</button>
    </div>
  </div>

  <script>
    let currentStep = 0;
    let isPlaying = true;
    let timer = null;

    const focals = [
      document.getElementById('focal1'),
      document.getElementById('focal2'),
      document.getElementById('focal3')
    ];

    const badges = [
      document.getElementById('badge1'),
      document.getElementById('badge2'),
      document.getElementById('badge3')
    ];

    const buttons = [
      document.getElementById('btn0'),
      document.getElementById('btn1'),
      document.getElementById('btn2'),
      document.getElementById('btn3')
    ];

    const path12 = document.getElementById('path12');
    const path23 = document.getElementById('path23');
    const playBtn = document.getElementById('playBtn');

    function updateState() {
      // Update Buttons
      buttons.forEach((b, idx) => {
        b.classList.toggle('active', idx === currentStep);
      });

      // Update Badges & Focal items with smooth >= 500ms transitions
      if (currentStep < 3) {
        focals.forEach((el, idx) => {
          el.classList.toggle('dimmed', idx !== currentStep);
        });
        badges.forEach((b, idx) => {
          b.classList.toggle('active', idx === currentStep);
        });
        path12.classList.toggle('active', currentStep === 1);
        path23.classList.toggle('active', currentStep === 2);
      } else {
        // Full Z-Pattern view
        focals.forEach(el => el.classList.remove('dimmed'));
        badges.forEach(b => b.classList.add('active'));
        path12.classList.add('active');
        path23.classList.add('active');
      }
    }

    function setStep(step) {
      currentStep = step;
      updateState();
      if (isPlaying) {
        startTimer();
      }
    }

    function nextStep() {
      currentStep = (currentStep + 1) % 4;
      updateState();
    }

    function togglePlay() {
      isPlaying = !isPlaying;
      playBtn.textContent = isPlaying ? '⏸' : '▶';
      if (isPlaying) {
        startTimer();
      } else {
        clearInterval(timer);
      }
    }

    function startTimer() {
      clearInterval(timer);
      timer = setInterval(() => {
        if (isPlaying) {
          nextStep();
        }
      }, 3200);
    }

    // Initialize
    updateState();
    startTimer();
  </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, sans-serif;
      background: #ffffff;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      user-select: none;
    }

    .toolbar {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
    }

    .btn {
      padding: 6px 14px;
      font-size: 14px;
      font-weight: 600;
      border-radius: 20px;
      border: 1px solid #cbd5e1;
      background: #f8fafc;
      color: #475569;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.2s ease;
    }

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

    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      width: 100%;
      max-width: 640px;
    }

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

    .slide-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }

    .slide-title {
      font-size: 14px;
      font-weight: 700;
      color: #334155;
    }

    .slide-frame {
      width: 100%;
      aspect-ratio: 16 / 10;
      background: #f8f9fa;
      border-radius: 8px;
      border: 2px solid #e2e8f0;
      position: relative;
      overflow: hidden;
      cursor: pointer;
      transition: border-color 0.2s ease;
    }

    /* Left Cramped Slide */
    .cramped-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr;
      gap: 1px;
      width: 100%;
      height: 100%;
      background: #cbd5e1;
      padding: 0;
    }

    .cramped-item {
      background: #ffffff;
      padding: 6px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 4px;
    }

    /* Right Whitespace Slide */
    .whitespace-container {
      width: 100%;
      height: 100%;
      padding: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .buffer-highlight {
      position: absolute;
      inset: 0;
      background: rgba(34, 183, 255, 0.22);
      border: 2px dashed #0284c7;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease;
      display: flex;
      align-items: flex-start;
      justify-content: flex-end;
      padding: 4px 8px;
    }

    .buffer-tag {
      font-size: 11px;
      font-weight: 700;
      color: #0369a1;
      background: rgba(255,255,255,0.9);
      padding: 2px 6px;
      border-radius: 4px;
    }

    .show-buffer .buffer-highlight,
    .slide-frame:hover .buffer-highlight {
      opacity: 1;
    }

    .clean-card {
      width: 100%;
      height: 100%;
      background: #ffffff;
      border-radius: 6px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 10px;
      padding: 10px;
      align-items: center;
      position: relative;
      z-index: 1;
    }

    /* Abstract Text & Chart Elements */
    .txt-box {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .bar-line {
      height: 5px;
      background: #94a3b8;
      border-radius: 3px;
      width: 100%;
    }
    .bar-line.short { width: 65%; }
    .bar-line.primary { background: #0284c7; height: 6px; width: 45%; }
    .bar-line.accent { background: #38bdf8; }

    .mini-chart {
      display: flex;
      align-items: flex-end;
      gap: 3px;
      height: 28px;
      padding-top: 4px;
    }
    .chart-bar {
      flex: 1;
      background: #cbd5e1;
      border-radius: 2px 2px 0 0;
    }
    .chart-bar.c1 { height: 45%; }
    .chart-bar.c2 { height: 75%; background: #38bdf8; }
    .chart-bar.c3 { height: 100%; background: #0284c7; }
    .chart-bar.c4 { height: 60%; }
  </style>
</head>
<body>

  <div class="toolbar">
    <button id="toggleBtn" class="btn">
      <span>✦</span> Show Whitespace Buffer
    </button>
  </div>

  <div class="grid">
    
    <div class="slide-col">
      <div class="slide-title">Cramped (0% Margin)</div>
      <div class="slide-frame">
        <div class="cramped-grid">
          <div class="cramped-item">
            <div class="bar-line primary"></div>
            <div class="bar-line"></div>
            <div class="bar-line short"></div>
          </div>
          <div class="cramped-item">
            <div class="mini-chart">
              <div class="chart-bar c1"></div>
              <div class="chart-bar c2"></div>
              <div class="chart-bar c3"></div>
              <div class="chart-bar c4"></div>
            </div>
          </div>
          <div class="cramped-item">
            <div class="bar-line"></div>
            <div class="bar-line accent"></div>
          </div>
          <div class="cramped-item">
            <div class="bar-line"></div>
            <div class="bar-line short"></div>
          </div>
          <div class="cramped-item">
            <div class="mini-chart">
              <div class="chart-bar c3"></div>
              <div class="chart-bar c1"></div>
              <div class="chart-bar c4"></div>
              <div class="chart-bar c2"></div>
            </div>
          </div>
          <div class="cramped-item">
            <div class="bar-line"></div>
            <div class="bar-line short"></div>
          </div>
        </div>
      </div>
    </div>

    
    <div class="slide-col">
      <div class="slide-title">Clean (40% Open Canvas)</div>
      <div class="slide-frame" id="cleanSlide">
        <div class="whitespace-container">
          <div class="buffer-highlight">
            <span class="buffer-tag">40% Buffer</span>
          </div>
          <div class="clean-card">
            <div class="txt-box">
              <div class="bar-line primary"></div>
              <div class="bar-line" style="margin-top:2px;"></div>
              <div class="bar-line short"></div>
              <div class="bar-line" style="margin-top:4px;"></div>
              <div class="bar-line short"></div>
            </div>
            <div class="mini-chart" style="height: 44px;">
              <div class="chart-bar c1"></div>
              <div class="chart-bar c2"></div>
              <div class="chart-bar c3"></div>
              <div class="chart-bar c4"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    const toggleBtn = document.getElementById('toggleBtn');
    const cleanSlide = document.getElementById('cleanSlide');
    let active = false;

    function setBuffer(state) {
      active = state;
      toggleBtn.classList.toggle('active', active);
      cleanSlide.classList.toggle('show-buffer', active);
    }

    toggleBtn.addEventListener('click', () => setBuffer(!active));
    cleanSlide.addEventListener('click', () => setBuffer(!active));
  </script>
</body>
</html>

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

    /* Top Step Indicator / Phase Pill */
    .phase-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
    }
    .phase-tag {
      padding: 4px 10px;
      border-radius: 999px;
      background: #f1f5f9;
      color: #334155;
      transition: all 0.3s ease;
    }
    .phase-tag.active {
      background: #e0f2fe;
      color: #0284c7;
    }

    /* Slide Canvas */
    .slide-wrapper {
      width: 100%;
      max-width: 480px;
      aspect-ratio: 16 / 10;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 12px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
      position: relative;
      overflow: hidden;
    }

    .slide-step {
      position: absolute;
      inset: 0;
      padding: 16px 20px;
      display: flex;
      flex-direction: column;
      opacity: 0;
      visibility: hidden;
      transform: translateY(6px);
      transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease;
    }
    .slide-step.active {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    /* Step 1: Dense Text */
    .step-1-title {
      font-size: 13px;
      font-weight: 700;
      color: #1e2945;
      margin-bottom: 8px;
      border-bottom: 1px solid #e2e8f0;
      padding-bottom: 4px;
    }
    .step-1-bullets {
      font-size: 11px;
      line-height: 1.35;
      color: #475569;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .bullet-item {
      display: flex;
      gap: 6px;
      align-items: flex-start;
    }
    .bullet-dot {
      color: #94a3b8;
      font-size: 12px;
      line-height: 1;
    }

    /* Step 2: Extracted Core Metric */
    .step-2-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 10px;
    }
    .extract-badge {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      font-weight: 700;
      color: #0284c7;
      background: #e0f2fe;
      padding: 3px 8px;
      border-radius: 4px;
    }
    .step-2-stat {
      font-size: 22px;
      font-weight: 800;
      color: #0f172a;
      line-height: 1.25;
      max-width: 280px;
    }
    .highlight-word {
      color: #0284c7;
      background: #f0f9ff;
      padding: 2px 6px;
      border-radius: 4px;
      border: 1px dashed #7dd3fc;
    }

    /* Step 3: Final Designed Slide */
    .step-3-content {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 4px 6px;
    }
    .step-3-headline {
      font-size: 19px;
      font-weight: 800;
      color: #0f172a;
      letter-spacing: -0.3px;
    }
    .step-3-chart-area {
      display: flex;
      align-items: flex-end;
      justify-content: center;
      gap: 24px;
      height: 105px;
      padding-bottom: 6px;
    }
    .bar-group {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      height: 100%;
      justify-content: flex-end;
    }
    .bar-val {
      font-size: 11px;
      font-weight: 700;
      color: #64748b;
    }
    .bar {
      width: 44px;
      border-radius: 6px 6px 0 0;
      transition: height 0.4s ease;
    }
    .bar-2022 {
      height: 52px;
      background: #cbd5e1;
    }
    .bar-2023 {
      height: 74px;
      background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%);
    }
    .bar-label {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
    }
    .growth-tag {
      position: absolute;
      top: 38px;
      right: 28px;
      background: #ecfdf5;
      border: 1px solid #6ee7b7;
      color: #047857;
      font-size: 12px;
      font-weight: 700;
      padding: 4px 8px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      gap: 3px;
    }

    /* Controls */
    .controls {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .step-btn {
      appearance: none;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #334155;
      padding: 7px 14px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      transition: background 0.2s, border-color 0.2s, color 0.2s;
    }
    .step-btn.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
    }
    .play-btn {
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #475569;
      width: 34px;
      height: 34px;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 13px;
    }

    /* Mobile adjustments */
    @media (max-width: 400px) {
      .step-1-bullets { font-size: 10px; gap: 4px; }
      .step-2-stat { font-size: 18px; }
      .step-3-headline { font-size: 16px; }
      .bar { width: 36px; }
      .growth-tag { top: 32px; right: 16px; font-size: 11px; }
    }
  </style>
</head>
<body>

  
  <div class="phase-bar">
    <span>Phase:</span>
    <span id="phaseLabel" class="phase-tag active">1. Raw Text Overload</span>
  </div>

  
  <div class="slide-wrapper">
    
    <div id="step-0" class="slide-step active">
      <div class="step-1-title">Renewable Energy Growth &amp; Solar Trends</div>
      <div class="step-1-bullets">
        <div class="bullet-item">
          <span class="bullet-dot">•</span>
          <span>Clean electricity generation accelerated globally during fiscal 2023 due to increased commercial and residential investments.</span>
        </div>
        <div class="bullet-item">
          <span class="bullet-dot">•</span>
          <span>Grid operators integrated novel photovoltaic storage systems across multiple regional supply networks.</span>
        </div>
        <div class="bullet-item">
          <span class="bullet-dot">•</span>
          <span><strong>Solar output specifically grew by 35% in 2023</strong>, representing the fastest pace of all renewable resources.</span>
        </div>
        <div class="bullet-item">
          <span class="bullet-dot">•</span>
          <span>Long-term projections indicate ongoing decentralized capacity expansion throughout the next decade.</span>
        </div>
      </div>
    </div>

    
    <div id="step-1" class="slide-step">
      <div class="step-2-content">
        <span class="extract-badge">Extracted Key Metric</span>
        <div class="step-2-stat">
          Solar output grew <span class="highlight-word">35%</span> in 2023.
        </div>
      </div>
    </div>

    
    <div id="step-2" class="slide-step">
      <div class="growth-tag">▲ +35% Growth</div>
      <div class="step-3-content">
        <div class="step-3-headline">Solar Output Surged in 2023</div>
        <div class="step-3-chart-area">
          <div class="bar-group">
            <span class="bar-val">100 TWh</span>
            <div class="bar bar-2022"></div>
            <span class="bar-label">2022</span>
          </div>
          <div class="bar-group">
            <span class="bar-val" style="color:#0284c7;">135 TWh</span>
            <div class="bar bar-2023"></div>
            <span class="bar-label">2023</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button class="step-btn active" data-idx="0">Step 1: Raw</button>
    <button class="step-btn" data-idx="1">Step 2: Core Fact</button>
    <button class="step-btn" data-idx="2">Step 3: Visual</button>
    <button id="playBtn" class="play-btn" aria-label="Play/Pause">⏸</button>
  </div>

  <script>
    const phases = [
      '1. Raw Text Overload',
      '2. Extract Single Takeaway',
      '3. Visual + 45% Whitespace'
    ];

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

    const steps = [
      document.getElementById('step-0'),
      document.getElementById('step-1'),
      document.getElementById('step-2')
    ];
    const buttons = document.querySelectorAll('.step-btn');
    const phaseLabel = document.getElementById('phaseLabel');
    const playBtn = document.getElementById('playBtn');

    function setStep(index) {
      currentStep = index;
      steps.forEach((step, i) => {
        step.classList.toggle('active', i === index);
      });
      buttons.forEach((btn, i) => {
        btn.classList.toggle('active', i === index);
      });
      phaseLabel.textContent = phases[index];
    }

    function nextStep() {
      const next = (currentStep + 1) % steps.length;
      setStep(next);
    }

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

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

    buttons.forEach((btn) => {
      btn.addEventListener('click', () => {
        const idx = parseInt(btn.getAttribute('data-idx'), 10);
        setStep(idx);
        pauseTimer();
      });
    });

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

    // Start auto-progression
    startTimer();
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cognitive Load Theory: Dual Coding vs Redundancy</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

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

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

    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      width: 100%;
    }

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

    .pathway-column {
      display: flex;
      flex-direction: column;
      gap: 8px;
      background: transparent;
      padding: 4px;
    }

    .panel-header {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.3px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 4px;
      border-bottom: 2px solid #e2e8f0;
    }

    .overload .panel-header {
      color: #b91c1c;
      border-bottom-color: #fecaca;
    }

    .optimal .panel-header {
      color: #15803d;
      border-bottom-color: #bbf7d0;
    }

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

    .tag-red {
      background: #fee2e2;
      color: #991b1b;
    }

    .tag-green {
      background: #dcfce7;
      color: #166534;
    }

    .inputs {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-top: 4px;
    }

    .input-row {
      display: flex;
      align-items: center;
      gap: 8px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      padding: 6px 10px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 600;
      color: #334155;
    }

    .icon {
      font-size: 15px;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .flow-svg {
      width: 100%;
      height: 40px;
      display: block;
    }

    .flow-svg-short {
      width: 100%;
      height: 24px;
      display: block;
    }

    .flow-line {
      fill: none;
      stroke-width: 3;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 6 6;
    }

    .flow-line.red {
      stroke: #ef4444;
      animation: smoothDashRed 1.6s linear infinite;
    }

    .flow-line.blue {
      stroke: #0284c7;
      animation: smoothDashBlue 1.6s linear infinite;
    }

    .flow-line.green {
      stroke: #16a34a;
      animation: smoothDashGreen 1.6s linear infinite;
    }

    @keyframes smoothDashRed {
      0% {
        stroke-dashoffset: 0;
      }
      100% {
        stroke-dashoffset: -24;
      }
    }

    @keyframes smoothDashBlue {
      0% {
        stroke-dashoffset: 0;
      }
      100% {
        stroke-dashoffset: -24;
      }
    }

    @keyframes smoothDashGreen {
      0% {
        stroke-dashoffset: 0;
      }
      100% {
        stroke-dashoffset: -24;
      }
    }

    .bottleneck, .memory-box {
      border-radius: 8px;
      padding: 10px 8px;
      text-align: center;
      font-size: 12px;
      font-weight: 700;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
    }

    .bottleneck {
      background: #fef2f2;
      border: 1.5px dashed #f87171;
      color: #991b1b;
    }

    .channels-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .channel-box {
      padding: 6px 4px;
      border-radius: 6px;
      text-align: center;
      font-size: 11px;
      font-weight: 600;
      border: 1px solid transparent;
    }

    .chan-vis {
      background: #f0f9ff;
      border-color: #bae6fd;
      color: #0369a1;
    }

    .chan-aud {
      background: #f0fdf4;
      border-color: #bbf7d0;
      color: #15803d;
    }

    .memory-box.balanced {
      background: #f0fdf4;
      border: 1.5px solid #86efac;
      color: #166534;
    }

    .subtitle {
      font-size: 11px;
      font-weight: 500;
      opacity: 0.9;
    }

    /* Explanation interactive strip */
    .info-footer {
      font-size: 11px;
      line-height: 1.4;
      color: #64748b;
      text-align: center;
      padding-top: 4px;
      border-top: 1px dashed #cbd5e1;
    }
  </style>
</head>
<body>

  <div class="container">
    <div class="grid">
      
      <div class="pathway-column overload">
        <div class="panel-header">
          <span>Redundant Layout</span>
          <span class="tag tag-red">Overload</span>
        </div>

        <div class="inputs">
          <div class="input-row">
            <span class="icon">👁️</span>
            <span>Reading On-Screen Text</span>
          </div>
          <div class="input-row">
            <span class="icon">👂</span>
            <span>Hearing Spoken Speech</span>
          </div>
        </div>

        <svg class="flow-svg" viewBox="0 0 200 40" preserveAspectRatio="none">
          <defs>
            <marker id="arrow-red" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto">
              <path d="M 0 1 L 8 5 L 0 9 z" fill="#ef4444" />
            </marker>
          </defs>
          <path d="M 45,2 C 45,20 95,20 95,36" class="flow-line red" marker-end="url(#arrow-red)" />
          <path d="M 155,2 C 155,20 105,20 105,36" class="flow-line red" marker-end="url(#arrow-red)" />
        </svg>

        <div class="bottleneck">
          <span>⚠️ Verbal Working Memory</span>
          <span class="subtitle">Both inputs compete for phonetic loop</span>
        </div>
      </div>

      
      <div class="pathway-column optimal">
        <div class="panel-header">
          <span>Dual Coding</span>
          <span class="tag tag-green">Optimal</span>
        </div>

        <div class="inputs">
          <div class="input-row">
            <span class="icon">👁️</span>
            <span>Viewing Visual / Diagram</span>
          </div>
          <div class="input-row">
            <span class="icon">👂</span>
            <span>Hearing Spoken Speech</span>
          </div>
        </div>

        <svg class="flow-svg-short" viewBox="0 0 200 24" preserveAspectRatio="none">
          <defs>
            <marker id="arrow-blue" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="5" markerHeight="5" orient="auto">
              <path d="M 0 1 L 8 5 L 0 9 z" fill="#0284c7" />
            </marker>
            <marker id="arrow-green" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="5" markerHeight="5" orient="auto">
              <path d="M 0 1 L 8 5 L 0 9 z" fill="#16a34a" />
            </marker>
          </defs>
          <path d="M 50,2 L 50,20" class="flow-line blue" marker-end="url(#arrow-blue)" />
          <path d="M 150,2 L 150,20" class="flow-line green" marker-end="url(#arrow-green)" />
        </svg>

        <div class="channels-row">
          <div class="channel-box chan-vis">Visual Channel</div>
          <div class="channel-box chan-aud">Auditory Channel</div>
        </div>

        <svg class="flow-svg-short" viewBox="0 0 200 24" preserveAspectRatio="none">
          <path d="M 50,2 C 50,14 95,12 95,20" class="flow-line blue" marker-end="url(#arrow-blue)" />
          <path d="M 150,2 C 150,14 105,12 105,20" class="flow-line green" marker-end="url(#arrow-green)" />
        </svg>

        <div class="memory-box balanced">
          <span>✓ Working Memory</span>
          <span class="subtitle">Simultaneous parallel processing</span>
        </div>
      </div>
    </div>

    <div class="info-footer">
      Dual coding utilizes independent visual and auditory sub-systems, preventing cognitive bottlenecking.
    </div>
  </div>

</body>
</html>

OGE.10.SL.4

Aligned learning resources

Related diagrams