<!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 {
      width: 100%;
      min-height: 100%;
      background: #f8fafc;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px;
    }

    .broadcast-container {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    /* Track selector tabs */
    .controls {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px;
      width: 100%;
    }

    .track-btn {
      flex: 1 1 calc(25% - 6px);
      min-width: 80px;
      max-width: 110px;
      padding: 8px 4px;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: all 0.25s ease;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
    }

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

    /* TV Monitor Bezel */
    .tv-frame {
      width: 100%;
      background: #1e293b;
      padding: 10px;
      border-radius: 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    }

    /* TV Screen */
    .tv-screen {
      position: relative;
      width: 100%;
      height: 230px;
      background: #0f172a;
      border-radius: 8px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    /* Visual Track Elements */
    .visual-layer {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity 0.3s ease, filter 0.3s ease;
      background: radial-gradient(circle at 50% 40%, #1e3a8a 0%, #0f172a 80%);
    }

    .studio-backdrop {
      position: absolute;
      top: 15%;
      width: 80%;
      height: 45%;
      border-radius: 6px;
      background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
      opacity: 0.6;
      border: 1px solid #60a5fa;
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding: 6px;
    }

    .chart-box {
      width: 32px;
      height: 24px;
      background: rgba(255, 255, 255, 0.15);
      border-radius: 4px;
      display: flex;
      align-items: flex-end;
      gap: 2px;
      padding: 2px;
    }

    .chart-bar {
      flex: 1;
      background: #38bdf8;
      border-radius: 1px;
    }

    .anchor-figure {
      position: absolute;
      bottom: 24px;
      font-size: 58px;
      line-height: 1;
      filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5));
      z-index: 2;
    }

    .desk {
      position: absolute;
      bottom: 24px;
      width: 65%;
      height: 24px;
      background: linear-gradient(180deg, #334155, #1e293b);
      border-radius: 12px 12px 0 0;
      border-top: 2px solid #64748b;
      z-index: 3;
    }

    /* Top Tags */
    .screen-header {
      position: relative;
      z-index: 10;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 10px;
    }

    .live-tag {
      background: #ef4444;
      color: #fff;
      font-size: 11px;
      font-weight: 800;
      padding: 2px 6px;
      border-radius: 3px;
      letter-spacing: 0.5px;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .live-dot {
      width: 6px;
      height: 6px;
      background: #fff;
      border-radius: 50%;
      animation: blink 1.2s infinite;
    }

    @keyframes blink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.3; }
    }

    /* Auditory Track Elements */
    .auditory-layer {
      position: absolute;
      top: 38px;
      right: 10px;
      z-index: 10;
      display: flex;
      flex-direction: column;
      gap: 6px;
      align-items: flex-end;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .audio-badge {
      background: rgba(15, 23, 42, 0.85);
      border: 1px solid #38bdf8;
      border-radius: 20px;
      padding: 4px 8px;
      display: flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 0 10px rgba(56, 189, 248, 0.2);
    }

    .sound-waves {
      display: flex;
      align-items: center;
      gap: 2px;
      height: 12px;
    }

    .wave-bar {
      width: 3px;
      background: #38bdf8;
      border-radius: 2px;
      animation: wave 1s ease-in-out infinite alternate;
    }

    .wave-bar:nth-child(1) { height: 4px; animation-delay: 0.1s; }
    .wave-bar:nth-child(2) { height: 12px; animation-delay: 0.3s; }
    .wave-bar:nth-child(3) { height: 8px; animation-delay: 0.2s; }
    .wave-bar:nth-child(4) { height: 14px; animation-delay: 0.4s; }

    @keyframes wave {
      0% { transform: scaleY(0.4); }
      100% { transform: scaleY(1.2); }
    }

    /* Written Track Elements */
    .written-layer {
      position: relative;
      z-index: 10;
      width: 100%;
      display: flex;
      flex-direction: column;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .lower-third {
      background: #dc2626;
      color: #ffffff;
      padding: 4px 8px;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.5px;
      display: flex;
      align-items: center;
      gap: 6px;
      border-left: 4px solid #facc15;
    }

    .ticker-bar {
      background: #000000;
      color: #facc15;
      font-size: 11px;
      font-weight: 600;
      padding: 3px 6px;
      white-space: nowrap;
      overflow: hidden;
      border-top: 1px solid #334155;
    }

    .ticker-text {
      display: inline-block;
      animation: scroll 10s linear infinite;
    }

    @keyframes scroll {
      0% { transform: translateX(100%); }
      100% { transform: translateX(-100%); }
    }

    /* TV Stand */
    .tv-stand-neck {
      width: 36px;
      height: 8px;
      background: #0f172a;
    }

    .tv-stand-base {
      width: 90px;
      height: 4px;
      background: #334155;
      border-radius: 2px;
    }

    /* States & Dimming */
    .dimmed {
      opacity: 0.2 !important;
      filter: grayscale(80%);
    }

    .highlighted {
      opacity: 1 !important;
      filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.8));
    }
  </style>
</head>
<body>

  <div class="broadcast-container">
    
    <div class="controls">
      <button class="track-btn active" data-track="all">✨ All</button>
      <button class="track-btn" data-track="visual">👁️ Visual</button>
      <button class="track-btn" data-track="auditory">🔊 Auditory</button>
      <button class="track-btn" data-track="written">📝 Written</button>
    </div>

    
    <div class="tv-frame">
      <div class="tv-screen">
        
        
        <div class="screen-header">
          <div class="live-tag">
            <div class="live-dot"></div>
            LIVE
          </div>
        </div>

        
        <div class="visual-layer" id="visualLayer">
          <div class="studio-backdrop">
            <div class="chart-box">
              <div class="chart-bar" style="height: 40%;"></div>
              <div class="chart-bar" style="height: 80%;"></div>
              <div class="chart-bar" style="height: 60%;"></div>
            </div>
            <div class="chart-box">
              <div class="chart-bar" style="height: 90%;"></div>
              <div class="chart-bar" style="height: 50%;"></div>
              <div class="chart-bar" style="height: 75%;"></div>
            </div>
          </div>
          <div class="anchor-figure">👩‍💼</div>
          <div class="desk"></div>
        </div>

        
        <div class="auditory-layer" id="auditoryLayer">
          <div class="audio-badge">
            <span style="font-size:12px;">🎙️</span>
            <div class="sound-waves">
              <div class="wave-bar"></div>
              <div class="wave-bar"></div>
              <div class="wave-bar"></div>
              <div class="wave-bar"></div>
            </div>
          </div>
          <div class="audio-badge">
            <span style="font-size:12px;">🎵</span>
            <div class="sound-waves">
              <div class="wave-bar" style="animation-delay: 0.15s;"></div>
              <div class="wave-bar" style="animation-delay: 0.35s;"></div>
              <div class="wave-bar" style="animation-delay: 0.25s;"></div>
            </div>
          </div>
        </div>

        
        <div class="written-layer" id="writtenLayer">
          <div class="lower-third">
            <span>BREAKING NEWS</span>
          </div>
          <div class="ticker-bar">
            <span class="ticker-text">WEATHER ALERT • STOCK MARKET RISES • SPORTS UPDATE</span>
          </div>
        </div>

      </div>
    </div>

    
    <div class="tv-stand-neck"></div>
    <div class="tv-stand-base"></div>
  </div>

  <script>
    const buttons = document.querySelectorAll('.track-btn');
    const visualLayer = document.getElementById('visualLayer');
    const auditoryLayer = document.getElementById('auditoryLayer');
    const writtenLayer = document.getElementById('writtenLayer');

    function setTrack(track) {
      buttons.forEach(btn => {
        btn.classList.toggle('active', btn.dataset.track === track);
      });

      if (track === 'all') {
        visualLayer.classList.remove('dimmed', 'highlighted');
        auditoryLayer.classList.remove('dimmed', 'highlighted');
        writtenLayer.classList.remove('dimmed', 'highlighted');
      } else if (track === 'visual') {
        visualLayer.classList.remove('dimmed');
        visualLayer.classList.add('highlighted');
        auditoryLayer.classList.add('dimmed');
        auditoryLayer.classList.remove('highlighted');
        writtenLayer.classList.add('dimmed');
        writtenLayer.classList.remove('highlighted');
      } else if (track === 'auditory') {
        auditoryLayer.classList.remove('dimmed');
        auditoryLayer.classList.add('highlighted');
        visualLayer.classList.add('dimmed');
        visualLayer.classList.remove('highlighted');
        writtenLayer.classList.add('dimmed');
        writtenLayer.classList.remove('highlighted');
      } else if (track === 'written') {
        writtenLayer.classList.remove('dimmed');
        writtenLayer.classList.add('highlighted');
        visualLayer.classList.add('dimmed');
        visualLayer.classList.remove('highlighted');
        auditoryLayer.classList.add('dimmed');
        auditoryLayer.classList.remove('highlighted');
      }
    }

    buttons.forEach(btn => {
      btn.addEventListener('click', () => {
        setTrack(btn.dataset.track);
      });
    });
  </script>
</body>
</html>

Identifying the Format and Purpose of News Broadcasts

<!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">
  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      color: #1e2945;
      background: #ffffff;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      user-select: none;
    }

    /* Flow Stepper Bar */
    .flow-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 4px;
      background: #f1f5f9;
      padding: 6px;
      border-radius: 12px;
      overflow-x: auto;
    }
    .flow-btn {
      flex: 1;
      min-width: 58px;
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 4px;
      font-size: 11px;
      font-weight: 700;
      color: #64748b;
      cursor: pointer;
      text-align: center;
      line-height: 1.2;
      transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    }
    .flow-btn .num {
      display: block;
      font-size: 10px;
      opacity: 0.75;
      margin-bottom: 2px;
    }
    .flow-btn.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.35);
    }

    /* Main Broadcast Stage */
    .stage {
      position: relative;
      background: #0f172a;
      border-radius: 14px;
      overflow: hidden;
      min-height: 240px;
      display: flex;
      flex-direction: column;
      box-shadow: 0 4px 16px rgba(15, 23, 42, 0.15);
    }

    /* TV Screen Visual Area */
    .tv-screen {
      position: relative;
      flex: 1;
      min-height: 160px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: radial-gradient(circle at center, #1e293b 0%, #0f172a 100%);
      color: #ffffff;
      padding: 12px;
      overflow: hidden;
    }

    /* Top Broadcast Bug (Live indicator) */
    .tv-header {
      position: absolute;
      top: 10px;
      left: 12px;
      right: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.5px;
    }
    .live-badge {
      background: #ef4444;
      color: #ffffff;
      padding: 2px 8px;
      border-radius: 4px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .live-dot {
      width: 6px;
      height: 6px;
      background: #fff;
      border-radius: 50%;
    }
    .channel-tag {
      color: #94a3b8;
      background: rgba(255,255,255,0.08);
      padding: 2px 8px;
      border-radius: 4px;
    }

    /* Scene Visuals */
    .scene-view {
      display: none;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 8px;
      width: 100%;
      animation: fadeIn 0.3s ease;
    }
    .scene-view.active {
      display: flex;
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(4px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .scene-icon {
      font-size: 42px;
      filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
    }
    .scene-speech {
      background: rgba(255, 255, 255, 0.95);
      color: #0f172a;
      padding: 6px 14px;
      border-radius: 16px;
      font-size: 13px;
      font-weight: 600;
      max-width: 90%;
      box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    }

    /* Lower Third / News Banner */
    .lower-third {
      background: #0284c7;
      color: #ffffff;
      padding: 8px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-top: 2px solid #38bdf8;
    }
    .lower-tag {
      background: #facc15;
      color: #0f172a;
      font-size: 10px;
      font-weight: 900;
      padding: 2px 6px;
      border-radius: 3px;
      text-transform: uppercase;
      margin-right: 8px;
      flex-shrink: 0;
    }
    .lower-text {
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex: 1;
    }

    /* Educational Info Card below screen */
    .info-bar {
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .info-content {
      flex: 1;
    }
    .info-title {
      font-size: 13px;
      font-weight: 800;
      color: #0284c7;
      margin-bottom: 2px;
    }
    .info-desc {
      font-size: 12px;
      color: #475569;
      font-weight: 500;
    }

    /* Playback Controls */
    .controls {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
    }
    .ctrl-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      width: 32px;
      height: 32px;
      font-size: 13px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: #1e2945;
      transition: background 0.15s;
    }
    .ctrl-btn:hover {
      background: #f1f5f9;
    }
  </style>
</head>
<body>

  
  <div class="flow-nav" role="tablist" aria-label="Broadcast Steps">
    <button class="flow-btn active" data-step="0" role="tab">
      <span class="num">STEP 1</span>Teaser
    </button>
    <button class="flow-btn" data-step="1" role="tab">
      <span class="num">STEP 2</span>Lead-In
    </button>
    <button class="flow-btn" data-step="2" role="tab">
      <span class="num">STEP 3</span>Package
    </button>
    <button class="flow-btn" data-step="3" role="tab">
      <span class="num">STEP 4</span>Soundbite
    </button>
    <button class="flow-btn" data-step="4" role="tab">
      <span class="num">STEP 5</span>Wrap-Up
    </button>
  </div>

  
  <div class="stage">
    <div class="tv-screen">
      <div class="tv-header">
        <span class="live-badge"><span class="live-dot"></span> LIVE</span>
        <span class="channel-tag">KIDS NEWS 24</span>
      </div>

      
      <div class="scene-view active" id="scene-0">
        <div class="scene-icon">⚡🦖</div>
        <div class="scene-speech">"Huge fossil discovery unearthed today!"</div>
      </div>

      
      <div class="scene-view" id="scene-1">
        <div class="scene-icon">🎙️📺</div>
        <div class="scene-speech">"Good evening. Scientists made an exciting find..."</div>
      </div>

      
      <div class="scene-view" id="scene-2">
        <div class="scene-icon">📹⛏️</div>
        <div class="scene-speech">"Here at the dig site, teams are excavating..."</div>
      </div>

      
      <div class="scene-view" id="scene-3">
        <div class="scene-icon">🔬💬</div>
        <div class="scene-speech">"We found a rare prehistoric skull!"</div>
      </div>

      
      <div class="scene-view" id="scene-4">
        <div class="scene-icon">📋✨</div>
        <div class="scene-speech">"That's tonight's top story. Back to you!"</div>
      </div>
    </div>

    
    <div class="lower-third">
      <span class="lower-tag" id="chyron-tag">ALERT</span>
      <span class="lower-text" id="chyron-text">HEADLINE: BIG DISCOVERY TODAY</span>
    </div>
  </div>

  
  <div class="info-bar">
    <div class="info-content">
      <div class="info-title" id="info-title">1. Teaser / Headline</div>
      <div class="info-desc" id="info-desc">Hooks viewers and grabs attention before the story starts.</div>
    </div>
    <div class="controls">
      <button class="ctrl-btn" id="prevBtn" title="Previous Step">◀</button>
      <button class="ctrl-btn" id="playBtn" title="Play/Pause">⏸</button>
      <button class="ctrl-btn" id="nextBtn" title="Next Step">▶</button>
    </div>
  </div>

  <script>
    const stepsData = [
      {
        tag: "HEADLINE",
        chyron: "BIG DISCOVERY: Fossil unearthed in desert",
        title: "1. Teaser / Headline",
        desc: "Hooks viewers' attention before the commercial or intro."
      },
      {
        tag: "STUDIO",
        chyron: "DESK LEAD: Ancient dinosaur skull uncovered",
        title: "2. Anchor Lead",
        desc: "The studio anchor introduces the story's main facts."
      },
      {
        tag: "ON SCENE",
        chyron: "FIELD REPORT: Live at the desert dig site",
        title: "3. Field Package",
        desc: "Pre-recorded footage showing the reporter on location."
      },
      {
        tag: "INTERVIEW",
        chyron: "EXPERT QUOTE: Lead Paleontologist",
        title: "4. Soundbite Interview",
        desc: "A short clip of an eyewitness or expert sharing facts."
      },
      {
        tag: "WRAP-UP",
        chyron: "STUDIO CLOSING: Next up, tomorrow's weather",
        title: "5. Anchor Wrap",
        desc: "Anchor summarizes the takeaway and moves to next topic."
      }
    ];

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

    const flowBtns = $$('.flow-btn');
    const sceneViews = $$('.scene-view');
    const chyronTag = $('#chyron-tag');
    const chyronText = $('#chyron-text');
    const infoTitle = $('#info-title');
    const infoDesc = $('#info-desc');
    const playBtn = $('#playBtn');
    const prevBtn = $('#prevBtn');
    const nextBtn = $('#nextBtn');

    function showStep(index) {
      currentStep = (index + stepsData.length) % stepsData.length;

      flowBtns.forEach((btn, idx) => {
        btn.classList.toggle('active', idx === currentStep);
      });

      sceneViews.forEach((view, idx) => {
        view.classList.toggle('active', idx === currentStep);
      });

      const data = stepsData[currentStep];
      chyronTag.textContent = data.tag;
      chyronText.textContent = data.chyron;
      infoTitle.textContent = data.title;
      infoDesc.textContent = data.desc;
    }

    function nextStep() {
      showStep(currentStep + 1);
    }

    function prevStep() {
      showStep(currentStep - 1);
    }

    function startAutoPlay() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, 3800);
      isPlaying = true;
      playBtn.textContent = '⏸';
    }

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

    function toggleAutoPlay() {
      if (isPlaying) pauseAutoPlay();
      else {
        nextStep();
        startAutoPlay();
      }
    }

    flowBtns.forEach((btn, idx) => {
      onTap(btn, () => {
        pauseAutoPlay();
        showStep(idx);
      });
    });

    onTap(prevBtn, () => {
      pauseAutoPlay();
      prevStep();
    });

    onTap(nextBtn, () => {
      pauseAutoPlay();
      nextStep();
    });

    onTap(playBtn, toggleAutoPlay);

    // Initialize
    showStep(0);
    startAutoPlay();
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

    body {
      background: #f8fafc;
      color: #1e293b;
      padding: 14px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 100%;
    }

    /* Controls Bar */
    .header-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
    }

    .flow-tag {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      color: #0284c7;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .live-dot {
      width: 8px;
      height: 8px;
      background: #ef4444;
      border-radius: 50%;
      box-shadow: 0 0 6px #ef4444;
    }

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

    .btn-play {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 20px;
      padding: 4px 12px;
      font-size: 12px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: background 0.2s, border-color 0.2s;
    }

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

    /* Cards Grid */
    .flow-grid {
      display: grid;
      grid-template-columns: 1fr auto 1fr auto 1fr;
      align-items: center;
      gap: 6px;
      margin-bottom: 12px;
    }

    @media (max-width: 520px) {
      .flow-grid {
        grid-template-columns: 1fr;
        gap: 8px;
      }
      .arrow {
        transform: rotate(90deg);
        justify-content: center;
        padding: 2px 0;
      }
    }

    .step-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 14px;
      padding: 12px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      cursor: pointer;
      position: relative;
      transition: box-shadow 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
      opacity: 0.65;
      min-height: 180px;
      justify-content: space-between;
    }

    .step-card.active {
      opacity: 1;
      border-color: #0284c7;
      box-shadow: 0 4px 16px rgba(2, 132, 199, 0.18);
    }

    .step-badge {
      font-size: 11px;
      font-weight: 700;
      color: #64748b;
      background: #f1f5f9;
      padding: 2px 8px;
      border-radius: 10px;
      margin-bottom: 6px;
    }

    .step-card.active .step-badge {
      background: #e0f2fe;
      color: #0369a1;
    }

    .avatar-wrap {
      font-size: 38px;
      line-height: 1;
      margin: 4px 0 6px;
      position: relative;
    }

    .role-title {
      font-size: 14px;
      font-weight: 750;
      color: #0f172a;
      line-height: 1.2;
      margin-bottom: 2px;
    }

    .location-tag {
      font-size: 11px;
      color: #64748b;
      font-weight: 500;
      margin-bottom: 8px;
    }

    /* Speech Bubble */
    .speech-bubble {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 8px;
      font-size: 11.5px;
      font-style: italic;
      color: #334155;
      line-height: 1.3;
      position: relative;
      width: 100%;
    }

    .step-card.active .speech-bubble {
      background: #f0f9ff;
      border-color: #bae6fd;
      color: #0c4a6e;
      font-weight: 500;
    }

    /* Arrow Connector */
    .arrow {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #94a3b8;
      font-size: 20px;
      font-weight: 800;
      transition: color 0.3s ease;
    }

    .arrow.active {
      color: #0284c7;
    }

    /* Stepper Dots Navigation */
    .stepper-nav {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      padding: 4px 0;
    }

    .nav-btn {
      background: #e2e8f0;
      border: none;
      height: 8px;
      width: 24px;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .nav-btn.active {
      background: #0284c7;
      width: 38px;
    }
  </style>
</head>
<body>

  <div class="header-bar">
    <div class="flow-tag">
      <span class="live-dot"></span>
      How News Travels
    </div>
    <div class="controls">
      <button class="btn-play" id="playBtn" onclick="togglePlay()">
        <span id="playIcon">⏸</span>
        <span id="playText">Pause</span>
      </button>
    </div>
  </div>

  <div class="flow-grid">
    
    <div class="step-card active" id="card-0" onclick="goToStep(0)">
      <span class="step-badge">STEP 1</span>
      <div class="avatar-wrap">🎙️ 📺</div>
      <div class="role-title">News Anchor</div>
      <div class="location-tag">Studio Desk</div>
      <div class="speech-bubble">“Let's go live to Maya at the scene!”</div>
    </div>

    
    <div class="arrow active" id="arrow-0">➔</div>

    
    <div class="step-card" id="card-1" onclick="goToStep(1)">
      <span class="step-badge">STEP 2</span>
      <div class="avatar-wrap">🌧️ 🎤</div>
      <div class="role-title">Field Reporter</div>
      <div class="location-tag">On Location</div>
      <div class="speech-bubble">“Thanks! I'm here at the flooded river...”</div>
    </div>

    
    <div class="arrow" id="arrow-1">➔</div>

    
    <div class="step-card" id="card-2" onclick="goToStep(2)">
      <span class="step-badge">STEP 3</span>
      <div class="avatar-wrap">🌲 📋</div>
      <div class="role-title">Park Ranger</div>
      <div class="location-tag">Eyewitness Expert</div>
      <div class="speech-bubble">“The water rose 3 feet overnight.”</div>
    </div>
  </div>

  
  <div class="stepper-nav">
    <button class="nav-btn active" id="dot-0" onclick="goToStep(0)" title="Step 1"></button>
    <button class="nav-btn" id="dot-1" onclick="goToStep(1)" title="Step 2"></button>
    <button class="nav-btn" id="dot-2" onclick="goToStep(2)" title="Step 3"></button>
  </div>

  <script>
    let currentStep = 0;
    let isPlaying = true;
    let timer = null;
    const totalSteps = 3;
    const intervalTime = 3200;

    function renderStep(idx) {
      currentStep = idx;

      for (let i = 0; i < totalSteps; i++) {
        const card = document.getElementById(`card-${i}`);
        const dot = document.getElementById(`dot-${i}`);
        if (card) {
          if (i === idx) {
            card.classList.add('active');
          } else {
            card.classList.remove('active');
          }
        }
        if (dot) {
          if (i === idx) {
            dot.classList.add('active');
          } else {
            dot.classList.remove('active');
          }
        }
      }

      // Arrows highlight logic
      const arrow0 = document.getElementById('arrow-0');
      const arrow1 = document.getElementById('arrow-1');
      if (arrow0) arrow0.classList.toggle('active', idx >= 1);
      if (arrow1) arrow1.classList.toggle('active', idx >= 2);
    }

    function nextStep() {
      const next = (currentStep + 1) % totalSteps;
      renderStep(next);
    }

    function startTimer() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, intervalTime);
    }

    function stopTimer() {
      if (timer) {
        clearInterval(timer);
        timer = null;
      }
    }

    function goToStep(idx) {
      renderStep(idx);
      if (isPlaying) {
        startTimer();
      }
    }

    function togglePlay() {
      isPlaying = !isPlaying;
      const playIcon = document.getElementById('playIcon');
      const playText = document.getElementById('playText');
      if (isPlaying) {
        playIcon.textContent = '⏸';
        playText.textContent = 'Pause';
        startTimer();
      } else {
        playIcon.textContent = '▶';
        playText.textContent = 'Play';
        stopTimer();
      }
    }

    // Initialize
    renderStep(0);
    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, BlinkMacSystemFont, "Segoe UI", Roboto, 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;
      -webkit-user-select: none;
    }

    .headline-bar {
      width: 100%;
      max-width: 520px;
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 12px;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .news-tag {
      background: #0284c7;
      color: #ffffff;
      font-size: 11px;
      font-weight: 800;
      padding: 2px 6px;
      border-radius: 4px;
      letter-spacing: 0.5px;
      white-space: nowrap;
    }

    .headline-text {
      font-size: 13px;
      font-weight: 600;
      color: #0f172a;
      line-height: 1.3;
    }

    .cards-grid {
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 100%;
      max-width: 520px;
    }

    .w-card {
      display: flex;
      align-items: center;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 10px;
      cursor: pointer;
      transition: background 0.2s ease, border-color 0.2s ease;
      min-height: 48px;
    }

    .w-card:hover {
      background: #f1f5f9;
    }

    .w-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 82px;
      padding: 5px 8px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 800;
      color: #ffffff;
      letter-spacing: 0.5px;
      flex-shrink: 0;
    }

    .badge-who   { background: #2563eb; }
    .badge-what  { background: #d97706; }
    .badge-where { background: #059669; }
    .badge-when  { background: #7c3aed; }
    .badge-why   { background: #0891b2; }

    .w-content {
      flex: 1;
      margin-left: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      overflow: hidden;
    }

    .w-answer {
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
      opacity: 0;
      transform: translateX(-4px);
      transition: opacity 0.25s ease, transform 0.25s ease;
    }

    .w-placeholder {
      font-size: 12px;
      color: #94a3b8;
      font-style: italic;
      transition: opacity 0.2s ease;
    }

    .w-check {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #e2e8f0;
      color: #ffffff;
      font-size: 12px;
      font-weight: 900;
      flex-shrink: 0;
      transition: background 0.2s ease, transform 0.2s ease;
    }

    .w-card.revealed {
      background: #ffffff;
      border-color: #cbd5e1;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }

    .w-card.revealed .w-placeholder {
      display: none;
    }

    .w-card.revealed .w-answer {
      opacity: 1;
      transform: translateX(0);
    }

    .w-card.revealed .w-check {
      background: #16a34a;
      transform: scale(1.05);
    }

    .controls-row {
      margin-top: 10px;
      display: flex;
      gap: 8px;
    }

    .btn-toggle {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      padding: 5px 14px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      transition: background 0.2s ease;
    }

    .btn-toggle:hover {
      background: #f8fafc;
      color: #0f172a;
    }
  </style>
</head>
<body>

  <div class="headline-bar">
    <span class="news-tag">STORY</span>
    <span class="headline-text">Elementary students build solar ovens on Friday.</span>
  </div>

  <div class="cards-grid">
    
    <div class="w-card" onclick="toggleCard(this)">
      <div class="w-badge badge-who">WHO?</div>
      <div class="w-content">
        <span class="w-placeholder">Tap to identify</span>
        <span class="w-answer">Lincoln Elementary 3rd Graders</span>
        <span class="w-check">✓</span>
      </div>
    </div>

    
    <div class="w-card" onclick="toggleCard(this)">
      <div class="w-badge badge-what">WHAT?</div>
      <div class="w-content">
        <span class="w-placeholder">Tap to identify</span>
        <span class="w-answer">Built cardboard solar pizza ovens</span>
        <span class="w-check">✓</span>
      </div>
    </div>

    
    <div class="w-card" onclick="toggleCard(this)">
      <div class="w-badge badge-where">WHERE?</div>
      <div class="w-content">
        <span class="w-placeholder">Tap to identify</span>
        <span class="w-answer">School Courtyard</span>
        <span class="w-check">✓</span>
      </div>
    </div>

    
    <div class="w-card" onclick="toggleCard(this)">
      <div class="w-badge badge-when">WHEN?</div>
      <div class="w-content">
        <span class="w-placeholder">Tap to identify</span>
        <span class="w-answer">Friday morning at 10 AM</span>
        <span class="w-check">✓</span>
      </div>
    </div>

    
    <div class="w-card" onclick="toggleCard(this)">
      <div class="w-badge badge-why">WHY?</div>
      <div class="w-content">
        <span class="w-placeholder">Tap to identify</span>
        <span class="w-answer">To test clean solar energy</span>
        <span class="w-check">✓</span>
      </div>
    </div>
  </div>

  <div class="controls-row">
    <button class="btn-toggle" onclick="toggleAll()">Reveal All</button>
  </div>

  <script>
    function toggleCard(card) {
      card.classList.toggle('revealed');
      updateButtonState();
    }

    function toggleAll() {
      const cards = document.querySelectorAll('.w-card');
      const allRevealed = Array.from(cards).every(c => c.classList.contains('revealed'));
      cards.forEach(c => {
        if (allRevealed) {
          c.classList.remove('revealed');
        } else {
          c.classList.add('revealed');
        }
      });
      updateButtonState();
    }

    function updateButtonState() {
      const cards = document.querySelectorAll('.w-card');
      const btn = document.querySelector('.btn-toggle');
      const allRevealed = Array.from(cards).every(c => c.classList.contains('revealed'));
      btn.textContent = allRevealed ? 'Reset' : 'Reveal All';
    }
  </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>TV News Broadcast Layout</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 12px;
      gap: 10px;
    }

    /* Controls */
    .controls {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
      width: 100%;
      max-width: 540px;
    }
    .btn-tab {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 20px;
      border: 1.5px solid #d0d7de;
      background: #ffffff;
      color: #334155;
      cursor: pointer;
      transition: all 0.25s ease;
      user-select: none;
    }
    .btn-tab:hover {
      border-color: #0284c7;
      color: #0284c7;
    }
    .btn-tab.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
      box-shadow: 0 2px 8px rgba(2, 132, 199, 0.35);
    }

    /* TV Frame */
    .tv-wrapper {
      width: 100%;
      max-width: 540px;
      background: #1e293b;
      border-radius: 12px;
      padding: 8px;
      box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15);
      position: relative;
    }
    .tv-screen {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      background: linear-gradient(135deg, #0b1e3f 0%, #1e3a8a 50%, #172554 100%);
      border-radius: 6px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    /* Studio Background Elements */
    .studio-bg {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: 
        radial-gradient(circle at 50% 40%, rgba(56, 189, 248, 0.25) 0%, transparent 60%),
        radial-gradient(circle at 85% 25%, rgba(96, 165, 250, 0.2) 0%, transparent 40%);
    }
    .studio-grid {
      position: absolute;
      inset: 0;
      opacity: 0.12;
      background-size: 24px 24px;
      background-image: 
        linear-gradient(to right, #ffffff 1px, transparent 1px),
        linear-gradient(to bottom, #ffffff 1px, transparent 1px);
    }
    .live-badge {
      position: absolute;
      top: 10px;
      left: 12px;
      background: #dc2626;
      color: #fff;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 1px;
      padding: 2px 6px;
      border-radius: 3px;
      display: flex;
      align-items: center;
      gap: 4px;
      z-index: 2;
    }
    .live-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #fff;
      animation: pulse 1.4s infinite;
    }
    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.3; }
    }

    /* Interactive Element 1: Graphic Box */
    .graphic-box-zone {
      position: absolute;
      top: 10px;
      right: 12px;
      width: 25%;
      min-width: 80px;
      max-width: 120px;
      aspect-ratio: 4 / 3;
      background: #0f172a;
      border: 2px solid #38bdf8;
      border-radius: 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #fff;
      z-index: 3;
      cursor: pointer;
      transition: all 0.3s ease;
      overflow: hidden;
    }
    .graphic-box-zone .icon {
      font-size: 26px;
      line-height: 1;
    }
    .graphic-box-zone .caption {
      font-size: 9px;
      font-weight: 700;
      text-transform: uppercase;
      background: #0284c7;
      width: 100%;
      text-align: center;
      padding: 2px 0;
      margin-top: 4px;
      letter-spacing: 0.5px;
    }

    /* Interactive Element 2: News Anchor */
    .anchor-zone {
      position: absolute;
      bottom: 22%;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      z-index: 3;
      padding: 4px 12px;
      border-radius: 12px;
      transition: all 0.3s ease;
    }
    .anchor-avatar {
      font-size: 56px;
      line-height: 1;
      filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
    }
    .anchor-desk {
      position: absolute;
      bottom: 18%;
      left: 15%;
      right: 15%;
      height: 14%;
      background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
      border-top: 2px solid #64748b;
      border-radius: 8px 8px 0 0;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      z-index: 2;
    }
    .desk-mic {
      font-size: 14px;
      margin-top: -6px;
      filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));
    }

    /* Interactive Element 3: Lower Third Banner */
    .lower-third-zone {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 4;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      flex-direction: column;
    }
    .lower-third-top {
      background: #facc15;
      color: #0f172a;
      font-size: 9px;
      font-weight: 800;
      padding: 2px 10px;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      width: fit-content;
      border-top-right-radius: 4px;
    }
    .lower-third-main {
      background: rgba(15, 23, 42, 0.95);
      border-top: 2px solid #facc15;
      padding: 6px 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .headline-text {
      color: #ffffff;
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Target Highlights */
    .highlight-active {
      box-shadow: 0 0 0 3px #38bdf8, 0 0 16px #38bdf8 !important;
      background: rgba(56, 189, 248, 0.2) !important;
    }
    .lower-third-zone.highlight-active {
      box-shadow: 0 -2px 16px #38bdf8 !important;
    }

    /* Pointer callout label */
    .callout-tag {
      position: absolute;
      background: #0284c7;
      color: #ffffff;
      padding: 3px 8px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 700;
      pointer-events: none;
      opacity: 0;
      transform: translateY(4px);
      transition: all 0.25s ease;
      z-index: 10;
      box-shadow: 0 2px 6px rgba(0,0,0,0.3);
      white-space: nowrap;
    }
    .callout-tag.show {
      opacity: 1;
      transform: translateY(0);
    }
    #tag-anchor {
      top: 15%;
      left: 50%;
      transform: translateX(-50%) translateY(4px);
    }
    #tag-anchor.show {
      transform: translateX(-50%) translateY(0);
    }
    #tag-graphic {
      top: 55%;
      right: 12px;
    }
    #tag-lower {
      bottom: 26%;
      left: 12px;
    }

    /* Info Bar */
    .info-bar {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 600;
      color: #475569;
      background: #e2e8f0;
      padding: 4px 12px;
      border-radius: 12px;
    }
  </style>
</head>
<body>

  
  <div class="tv-wrapper">
    <div class="tv-screen">
      <div class="studio-bg"></div>
      <div class="studio-grid"></div>
      
      <div class="live-badge">
        <div class="live-dot"></div> LIVE
      </div>

      
      <div id="tag-anchor" class="callout-tag">News Anchor (Host)</div>
      <div id="tag-graphic" class="callout-tag">Graphic Box (Visual Cue)</div>
      <div id="tag-lower" class="callout-tag">Lower Third (Headline)</div>

      
      <div id="zone-graphic" class="graphic-box-zone" onclick="selectPart(1)">
        <div class="icon">🐢</div>
        <div class="caption">Turtle Rescue</div>
      </div>

      
      <div id="zone-anchor" class="anchor-zone" onclick="selectPart(0)">
        <div class="anchor-avatar">👩‍💼</div>
      </div>
      <div class="anchor-desk">
        <div class="desk-mic">🎙️</div>
      </div>

      
      <div id="zone-lower" class="lower-third-zone" onclick="selectPart(2)">
        <div class="lower-third-top">BREAKING NEWS</div>
        <div class="lower-third-main">
          <div class="headline-text">🐢 Turtle Rescue at City Beach!</div>
        </div>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button class="btn-tab" id="btn-0" onclick="selectPart(0)">👩‍💼 News Anchor</button>
    <button class="btn-tab" id="btn-1" onclick="selectPart(1)">🖼️ Graphic Box</button>
    <button class="btn-tab" id="btn-2" onclick="selectPart(2)">🏷️ Lower Third</button>
  </div>

  <div class="info-bar">
    <span>✦ Tap parts to explore the broadcast layout</span>
  </div>

  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <script>
    let activeIdx = 0;

    const parts = [
      { zone: 'zone-anchor', tag: 'tag-anchor', btn: 'btn-0' },
      { zone: 'zone-graphic', tag: 'tag-graphic', btn: 'btn-1' },
      { zone: 'zone-lower', tag: 'tag-lower', btn: 'btn-2' }
    ];

    function selectPart(idx) {
      activeIdx = idx;
      parts.forEach((p, i) => {
        const isMatch = (i === idx);
        const zoneEl = document.getElementById(p.zone);
        const tagEl = document.getElementById(p.tag);
        const btnEl = document.getElementById(p.btn);

        if (zoneEl) zoneEl.classList.toggle('highlight-active', isMatch);
        if (tagEl) tagEl.classList.toggle('show', isMatch);
        if (btnEl) btnEl.classList.toggle('active', isMatch);
      });
    }

    // Initialize with first element active
    selectPart(0);
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <title>Media Purposes</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      width: 100%;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: transparent;
      padding: 10px 6px;
    }
    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      width: 100%;
      max-width: 680px;
      margin: 0 auto;
    }
    @media (max-width: 480px) {
      .grid {
        grid-template-columns: 1fr;
        gap: 8px;
      }
    }
    .purpose-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 14px 10px;
      border-radius: 12px;
      cursor: pointer;
      transition: box-shadow 0.25s ease, opacity 0.25s ease;
      position: relative;
      user-select: none;
      -webkit-user-select: none;
    }
    .purpose-card:focus-visible {
      outline: 2px solid #22b7ff;
    }
    .purpose-card.active {
      box-shadow: 0 0 0 2.5px #1e2945, 0 4px 12px rgba(0,0,0,0.08);
    }

    /* Teal - Inform */
    .card-inform {
      background: #f0fdfa;
      border: 1px solid #99f6e4;
    }
    .card-inform .badge {
      background: #ccfbf1;
      color: #0f766e;
      border: 1px solid #5eead4;
    }

    /* Orange - Persuade */
    .card-persuade {
      background: #fff7ed;
      border: 1px solid #fed7aa;
    }
    .card-persuade .badge {
      background: #ffedd5;
      color: #c2410c;
      border: 1px solid #fdba74;
    }

    /* Purple - Entertain */
    .card-entertain {
      background: #faf5ff;
      border: 1px solid #e9d5ff;
    }
    .card-entertain .badge {
      background: #f3e8ff;
      color: #7e22ce;
      border: 1px solid #d8b4fe;
    }

    .icon-wrap {
      font-size: 28px;
      line-height: 1;
      margin-bottom: 6px;
    }
    .purpose-title {
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 6px;
      letter-spacing: -0.01em;
    }
    .badge {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      padding: 3px 8px;
      border-radius: 20px;
      margin-bottom: 10px;
      white-space: nowrap;
    }
    .quote-box {
      background: rgba(255, 255, 255, 0.85);
      border-radius: 8px;
      padding: 8px 6px;
      font-size: 13px;
      line-height: 1.35;
      font-weight: 500;
      color: #334155;
      width: 100%;
      min-height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(0,0,0,0.06);
    }
    .instruction {
      text-align: center;
      font-size: 12px;
      color: #64748b;
      margin-top: 8px;
      font-weight: 500;
    }
  </style>
</head>
<body>
  <div class="grid" role="tablist" aria-label="Media Purposes">
    
    <div class="purpose-card card-inform active" tabindex="0" role="tab" aria-selected="true" onclick="selectCard(0)">
      <div class="icon-wrap" aria-hidden="true">🎙️</div>
      <div class="purpose-title">Inform</div>
      <div class="badge">True Facts</div>
      <div class="quote-box">"City Park opens new playground!"</div>
    </div>

    
    <div class="purpose-card card-persuade" tabindex="0" role="tab" aria-selected="false" onclick="selectCard(1)">
      <div class="icon-wrap" aria-hidden="true">🏷️</div>
      <div class="purpose-title">Persuade</div>
      <div class="badge">Tries to Sell</div>
      <div class="quote-box">"Buy Super Crunch cereal now!"</div>
    </div>

    
    <div class="purpose-card card-entertain" tabindex="0" role="tab" aria-selected="false" onclick="selectCard(2)">
      <div class="icon-wrap" aria-hidden="true">🎬</div>
      <div class="purpose-title">Entertain</div>
      <div class="badge">Fun & Fiction</div>
      <div class="quote-box">"Space Cat flies to Mars!"</div>
    </div>
  </div>

  <div class="instruction">Tap any purpose to highlight</div>

  <script>
    function selectCard(index) {
      const cards = document.querySelectorAll('.purpose-card');
      cards.forEach((card, i) => {
        const isActive = i === index;
        card.classList.toggle('active', isActive);
        card.setAttribute('aria-selected', isActive ? 'true' : 'false');
      });
    }

    document.querySelectorAll('.purpose-card').forEach((card, index) => {
      card.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          selectCard(index);
        }
      });
    });
  </script>
</body>
</html>

OGE.3.RI.11

Aligned learning resources

Related diagrams