<!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: #0f172a;
      padding: 12px;
      line-height: 1.4;
    }

    /* Side-by-side comparison grid */
    .comparison-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      width: 100%;
      max-width: 720px;
      margin: 0 auto;
    }

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

    .column {
      display: flex;
      flex-direction: column;
      background: #f8fafc;
      border-radius: 12px;
      padding: 14px;
      position: relative;
    }

    .header {
      margin-bottom: 10px;
      text-align: center;
    }

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

    .subtitle {
      font-size: 12px;
      font-weight: 600;
      margin-top: 2px;
    }

    .subtitle-complete {
      color: #2563eb;
    }

    .subtitle-incomplete {
      color: #d97706;
    }

    /* Burner & Flame Display */
    .burner-stage {
      height: 160px;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      margin-bottom: 12px;
    }

    .burner-svg {
      width: 130px;
      height: 160px;
      overflow: visible;
    }

    /* Product Badges */
    .products-container {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 12px;
      min-height: 84px;
      justify-content: flex-end;
    }

    .product-badge {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 5px 10px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 600;
    }

    .badge-co2 {
      background: #dcfce7;
      color: #166534;
    }

    .badge-h2o {
      background: #e0f2fe;
      color: #0369a1;
    }

    .badge-co {
      background: #ffedd5;
      color: #9a3412;
    }

    .badge-c {
      background: #334155;
      color: #f8fafc;
    }

    .badge-tag {
      font-size: 10px;
      font-weight: 500;
      opacity: 0.9;
      margin-left: 6px;
    }

    /* Callout & Equations */
    .callout {
      font-size: 11px;
      font-weight: 600;
      text-align: center;
      padding: 6px 8px;
      border-radius: 6px;
      margin-bottom: 8px;
    }

    .callout-complete {
      background: #eff6ff;
      color: #1d4ed8;
    }

    .callout-incomplete {
      background: #fffbeb;
      color: #b45309;
    }

    .equation-pill {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      padding: 6px 4px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 11px;
      font-weight: 600;
      text-align: center;
      color: #1e293b;
    }

    sub {
      font-size: 75%;
      bottom: -0.2em;
      position: relative;
    }

    /* Animations */
    @keyframes bluePulse {
      0%, 100% { transform: scale(1); opacity: 0.95; }
      50% { transform: scale(1.02, 0.98); opacity: 1; }
    }

    @keyframes yellowFlicker {
      0%, 100% { transform: scale(1) rotate(-0.5deg); }
      33% { transform: scale(0.98, 1.04) rotate(1deg); }
      66% { transform: scale(1.03, 0.96) rotate(-1deg); }
    }

    @keyframes riseSoot {
      0% { transform: translateY(0) scale(0.7); opacity: 0.8; }
      50% { opacity: 0.5; }
      100% { transform: translateY(-35px) translateX(6px) scale(1.2); opacity: 0; }
    }

    .flame-blue {
      transform-origin: 65px 95px;
      animation: bluePulse 2s ease-in-out infinite;
    }

    .flame-yellow {
      transform-origin: 65px 95px;
      animation: yellowFlicker 1.8s ease-in-out infinite;
    }

    .soot-p1 { animation: riseSoot 2.2s infinite ease-out; }
    .soot-p2 { animation: riseSoot 2.7s infinite ease-out 0.7s; }
    .soot-p3 { animation: riseSoot 2.4s infinite ease-out 1.3s; }
  </style>
</head>
<body>

  <div class="comparison-grid">
    
    <div class="column">
      <div class="header">
        <div class="title">Complete Combustion</div>
        <div class="subtitle subtitle-complete">Abundant O₂ Supply (Air hole open)</div>
      </div>

      <div class="burner-stage">
        <svg class="burner-svg" viewBox="0 0 130 160">
          <defs>
            <radialGradient id="blueCore" cx="50%" cy="85%" r="75%">
              <stop offset="0%" stop-color="#ffffff" />
              <stop offset="35%" stop-color="#67e8f9" />
              <stop offset="100%" stop-color="#0284c7" />
            </radialGradient>
            <linearGradient id="blueOuter" x1="0%" y1="100%" x2="0%" y2="0%">
              <stop offset="0%" stop-color="#0284c7" stop-opacity="0.9" />
              <stop offset="70%" stop-color="#38bdf8" stop-opacity="0.7" />
              <stop offset="100%" stop-color="#bae6fd" stop-opacity="0" />
            </linearGradient>
            <linearGradient id="metal" x1="0%" y1="0%" x2="100%" y2="0%">
              <stop offset="0%" stop-color="#64748b" />
              <stop offset="50%" stop-color="#cbd5e1" />
              <stop offset="100%" stop-color="#475569" />
            </linearGradient>
          </defs>

          
          <g class="flame-blue">
            
            <path d="M 50 95 C 46 65, 52 35, 65 15 C 78 35, 84 65, 80 95 Z" fill="url(#blueOuter)" />
            
            <path d="M 55 95 C 53 75, 58 52, 65 42 C 72 52, 77 75, 75 95 Z" fill="url(#blueCore)" />
          </g>

          
          
          <rect x="58" y="95" width="14" height="42" fill="url(#metal)" rx="1" />
          
          <rect x="56" y="118" width="18" height="12" fill="#334155" rx="1" />
          <rect x="61" y="121" width="8" height="6" fill="#0f172a" rx="1" />
          
          <path d="M 45 152 L 85 152 L 88 157 L 42 157 Z" fill="url(#metal)" />
          <rect x="35" y="157" width="60" height="3" fill="#334155" rx="1.5" />
          <rect x="63" y="137" width="4" height="15" fill="url(#metal)" />
        </svg>
      </div>

      
      <div class="products-container">
        <div class="product-badge badge-co2">
          <span>Carbon Dioxide (CO₂)</span>
          <span class="badge-tag">Harmless (in small vol)</span>
        </div>
        <div class="product-badge badge-h2o">
          <span>Water Vapour (H₂O)</span>
          <span class="badge-tag">Clean Steam</span>
        </div>
      </div>

      
      <div class="callout callout-complete">
        Clean, roaring blue flame • Maximum heat
      </div>
      <div class="equation-pill">
        CH₄ + 2O₂ → CO₂ + 2H₂O
      </div>
    </div>

    
    <div class="column">
      <div class="header">
        <div class="title">Incomplete Combustion</div>
        <div class="subtitle subtitle-incomplete">Limited O₂ Supply (Air hole closed)</div>
      </div>

      <div class="burner-stage">
        <svg class="burner-svg" viewBox="0 0 130 160">
          <defs>
            <radialGradient id="yellowCore" cx="50%" cy="80%" r="70%">
              <stop offset="0%" stop-color="#fef08a" />
              <stop offset="50%" stop-color="#f59e0b" />
              <stop offset="100%" stop-color="#ea580c" />
            </radialGradient>
          </defs>

          
          <g>
            <circle class="soot-p1" cx="64" cy="22" r="2.5" fill="#1e293b" />
            <circle class="soot-p2" cx="68" cy="18" r="3" fill="#334155" />
            <circle class="soot-p3" cx="60" cy="15" r="2" fill="#475569" />
          </g>

          
          <g class="flame-yellow">
            <path d="M 52 95 C 44 68, 50 30, 63 8 C 76 25, 88 62, 78 95 C 72 98, 58 98, 52 95 Z" fill="url(#yellowCore)" opacity="0.95" />
            <path d="M 58 95 C 54 75, 59 55, 65 38 C 71 55, 75 75, 72 95 Z" fill="#fef08a" opacity="0.8" />
          </g>

          
          
          <rect x="58" y="95" width="14" height="42" fill="url(#metal)" rx="1" />
          
          <rect x="56" y="118" width="18" height="12" fill="#475569" rx="1" />
          
          <path d="M 45 152 L 85 152 L 88 157 L 42 157 Z" fill="url(#metal)" />
          <rect x="35" y="157" width="60" height="3" fill="#334155" rx="1.5" />
          <rect x="63" y="137" width="4" height="15" fill="url(#metal)" />
        </svg>
      </div>

      
      <div class="products-container">
        <div class="product-badge badge-co">
          <span>Carbon Monoxide (CO)</span>
          <span class="badge-tag">Toxic Gas ⚠️</span>
        </div>
        <div class="product-badge badge-c">
          <span>Carbon Soot (C)</span>
          <span class="badge-tag">Black Smoke</span>
        </div>
        <div class="product-badge badge-h2o">
          <span>Water Vapour (H₂O)</span>
          <span class="badge-tag">Steam</span>
        </div>
      </div>

      
      <div class="callout callout-incomplete">
        Smoky, orange flame • Dangerous pollutants
      </div>
      <div class="equation-pill">
        2CH₄ + 3O₂ → 2CO + 4H₂O
      </div>
    </div>
  </div>

</body>
</html>

How Burning Fossil Fuels Changes the Atmosphere

<!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; 
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 
    }
    
    body {
      background: transparent;
      color: #1e2945;
      padding: 6px 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      user-select: none;
      width: 100%;
    }

    .app-container {
      width: 100%;
      max-width: 460px;
      display: flex;
      flex-direction: column;
    }

    /* Mode selector tabs */
    .filter-bar {
      display: flex;
      gap: 3px;
      margin-bottom: 8px;
      width: 100%;
      background: #f1f5f9;
      padding: 2px;
      border-radius: 8px;
    }
    .filter-btn {
      flex: 1;
      border: none;
      background: transparent;
      font-size: 10px;
      font-weight: 600;
      color: #64748b;
      padding: 5px 2px;
      border-radius: 6px;
      cursor: pointer;
      text-align: center;
      transition: background 0.2s ease, color 0.2s ease;
      white-space: nowrap;
    }
    .filter-btn.active {
      background: #ffffff;
      color: #1e2945;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    /* Flow Layout */
    .flow-grid {
      display: grid;
      grid-template-columns: 1fr 68px 1.45fr;
      align-items: stretch;
      gap: 5px;
      width: 100%;
    }

    /* Column containers */
    .col-inputs {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      gap: 6px;
      height: 100%;
    }

    .col-outputs {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    /* Center Chamber Column */
    .col-chamber {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      position: relative;
    }

    .chamber-box {
      background: #fff7ed;
      border: 1.5px solid #fdba74;
      border-radius: 8px;
      padding: 8px 2px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      width: 100%;
      box-shadow: 0 2px 5px rgba(249, 115, 22, 0.1);
      box-sizing: border-box;
    }
    .chamber-icon { 
      font-size: 18px; 
      line-height: 1; 
      margin-bottom: 2px; 
    }
    .chamber-title { 
      font-size: 9.5px; 
      font-weight: 700; 
      color: #9a3412; 
      line-height: 1.15;
      word-break: normal;
    }
    .temp-badge {
      margin-top: 4px;
      background: #ea580c;
      color: #ffffff;
      font-size: 8px;
      font-weight: 700;
      padding: 2px 3px;
      border-radius: 4px;
      letter-spacing: -0.2px;
      white-space: nowrap;
      display: inline-block;
    }

    /* Card Items */
    .node {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      padding: 4px 6px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: opacity 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
      cursor: pointer;
    }
    .node:hover {
      border-color: #94a3b8;
      box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    }
    .node.dimmed {
      opacity: 0.25;
      filter: grayscale(0.7);
    }
    .node.highlight {
      border-color: #3b82f6;
      box-shadow: 0 0 0 1.5px #3b82f6;
      background: #eff6ff;
    }

    .node-info {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }
    .node-title {
      font-size: 10.5px;
      font-weight: 600;
      color: #1e2945;
      line-height: 1.2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .node-formula {
      font-size: 9.5px;
      font-weight: 500;
      color: #64748b;
      line-height: 1.1;
    }

    /* Output Pills */
    .pill {
      font-size: 8px;
      font-weight: 700;
      padding: 1.5px 3.5px;
      border-radius: 4px;
      text-transform: uppercase;
      letter-spacing: 0.2px;
      white-space: nowrap;
      margin-left: 3px;
      flex-shrink: 0;
    }
    .pill-ghg { background: #f3e8ff; color: #7e22ce; border: 1px solid #d8b4fe; }
    .pill-toxic { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }
    .pill-particulate { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }
    .pill-acid { background: #fef3c7; color: #b45309; border: 1px solid #fcd34d; }

    /* Legend */
    .legend {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 4px 10px;
      margin-top: 8px;
      font-size: 9.5px;
      color: #64748b;
    }
    .legend-item { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
    .legend-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

    @media (min-width: 400px) {
      body { padding: 8px 6px; }
      .filter-bar { gap: 4px; margin-bottom: 10px; padding: 3px; }
      .filter-btn { font-size: 11px; padding: 6px 3px; }
      .flow-grid { grid-template-columns: 1fr 76px 1.4fr; gap: 8px; }
      .col-outputs { gap: 6px; }
      .node { padding: 5px 8px; border-radius: 7px; }
      .node-title { font-size: 11.5px; }
      .node-formula { font-size: 10px; }
      .chamber-box { padding: 10px 4px; border-radius: 10px; }
      .chamber-icon { font-size: 20px; }
      .chamber-title { font-size: 10.5px; }
      .temp-badge { font-size: 8.5px; padding: 2px 5px; margin-top: 5px; }
      .pill { font-size: 8.5px; padding: 2px 5px; }
      .legend { margin-top: 10px; font-size: 10.5px; gap: 6px 12px; }
      .legend-dot { width: 7px; height: 7px; }
    }
  </style>
</head>
<body>

  <div class="app-container">
    
    <div class="filter-bar">
      <button class="filter-btn active" data-filter="all">All Outputs</button>
      <button class="filter-btn" data-filter="complete">Complete</button>
      <button class="filter-btn" data-filter="incomplete">Incomplete</button>
      <button class="filter-btn" data-filter="pollutants">Impurities/NOₓ</button>
    </div>

    <div class="flow-grid">
      
      <div class="col-inputs">
        <div class="node" id="in-fuel" data-group="fuel complete incomplete">
          <div class="node-info">
            <span class="node-title">Fuel</span>
            <span class="node-formula">C, H</span>
          </div>
        </div>
        <div class="node" id="in-air" data-group="air complete incomplete pollutants">
          <div class="node-info">
            <span class="node-title">Air Intake</span>
            <span class="node-formula">O₂, N₂</span>
          </div>
        </div>
        <div class="node" id="in-sulfur" data-group="sulfur pollutants">
          <div class="node-info">
            <span class="node-title">Impurities</span>
            <span class="node-formula">S</span>
          </div>
        </div>
      </div>

      
      <div class="col-chamber">
        <div class="chamber-box" id="chamber">
          <div class="chamber-icon">🔥</div>
          <div class="chamber-title">Engine<br>Chamber</div>
          <div class="temp-badge">1500°C+</div>
        </div>
      </div>

      
      <div class="col-outputs">
        <div class="node" id="out-co2" data-group="complete ghg">
          <div class="node-info">
            <span class="node-title">Carbon Dioxide</span>
            <span class="node-formula">CO₂</span>
          </div>
          <span class="pill pill-ghg">Greenhouse</span>
        </div>

        <div class="node" id="out-h2o" data-group="complete ghg">
          <div class="node-info">
            <span class="node-title">Water Vapour</span>
            <span class="node-formula">H₂O</span>
          </div>
          <span class="pill pill-ghg">Greenhouse</span>
        </div>

        <div class="node" id="out-co" data-group="incomplete toxic">
          <div class="node-info">
            <span class="node-title">Carbon Monoxide</span>
            <span class="node-formula">CO</span>
          </div>
          <span class="pill pill-toxic">Toxic</span>
        </div>

        <div class="node" id="out-c" data-group="incomplete particulate">
          <div class="node-info">
            <span class="node-title">Soot</span>
            <span class="node-formula">C</span>
          </div>
          <span class="pill pill-particulate">Particulate</span>
        </div>

        <div class="node" id="out-so2" data-group="pollutants acid">
          <div class="node-info">
            <span class="node-title">Sulfur Dioxide</span>
            <span class="node-formula">SO₂</span>
          </div>
          <span class="pill pill-acid">Acid Rain</span>
        </div>

        <div class="node" id="out-nox" data-group="pollutants acid toxic">
          <div class="node-info">
            <span class="node-title">Nitrogen Oxides</span>
            <span class="node-formula">NOₓ</span>
          </div>
          <span class="pill pill-acid">Acid / Toxic</span>
        </div>
      </div>
    </div>

    
    <div class="legend">
      <div class="legend-item"><span class="legend-dot" style="background:#a855f7;"></span> Greenhouse Gas</div>
      <div class="legend-item"><span class="legend-dot" style="background:#ef4444;"></span> Toxic Gas</div>
      <div class="legend-item"><span class="legend-dot" style="background:#64748b;"></span> Particulate</div>
      <div class="legend-item"><span class="legend-dot" style="background:#f59e0b;"></span> Acid Precursor</div>
    </div>
  </div>

  <script>
    const buttons = document.querySelectorAll('.filter-btn');
    const nodes = document.querySelectorAll('.node');

    function applyFilter(filterKey) {
      nodes.forEach(node => {
        const groups = node.getAttribute('data-group') || '';
        if (filterKey === 'all' || groups.includes(filterKey)) {
          node.classList.remove('dimmed');
          if (filterKey !== 'all') {
            node.classList.add('highlight');
          } else {
            node.classList.remove('highlight');
          }
        } else {
          node.classList.add('dimmed');
          node.classList.remove('highlight');
        }
      });
    }

    buttons.forEach(btn => {
      btn.addEventListener('click', () => {
        buttons.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        applyFilter(btn.getAttribute('data-filter'));
      });
    });

    // Tap single output/input to isolate its specific pathway
    nodes.forEach(node => {
      node.addEventListener('click', () => {
        const id = node.id;
        buttons.forEach(b => b.classList.remove('active'));
        
        let activeInputs = [];
        let activeOutputs = [id];

        if (id === 'out-co2' || id === 'out-h2o') {
          activeInputs = ['in-fuel', 'in-air'];
          activeOutputs = ['out-co2', 'out-h2o'];
        } else if (id === 'out-co' || id === 'out-c') {
          activeInputs = ['in-fuel', 'in-air'];
          activeOutputs = ['out-co', 'out-c'];
        } else if (id === 'out-so2') {
          activeInputs = ['in-sulfur', 'in-air'];
          activeOutputs = ['out-so2'];
        } else if (id === 'out-nox') {
          activeInputs = ['in-air'];
          activeOutputs = ['out-nox'];
        } else if (id === 'in-fuel') {
          activeInputs = ['in-fuel', 'in-air'];
          activeOutputs = ['out-co2', 'out-h2o', 'out-co', 'out-c'];
        } else if (id === 'in-sulfur') {
          activeInputs = ['in-sulfur', 'in-air'];
          activeOutputs = ['out-so2'];
        } else if (id === 'in-air') {
          applyFilter('all');
          document.querySelector('[data-filter="all"]').classList.add('active');
          return;
        }

        nodes.forEach(n => {
          if (activeInputs.includes(n.id) || activeOutputs.includes(n.id)) {
            n.classList.remove('dimmed');
            n.classList.add('highlight');
          } else {
            n.classList.add('dimmed');
            n.classList.remove('highlight');
          }
        });
      });
    });
  </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="1:1">
  <title>Pure Hydrocarbons vs. Impure Fossil Fuels</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    body {
      background: #f8f9fa;
      color: #1e2945;
      padding: 10px 12px;
      width: 100%;
      max-width: 400px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .header {
      text-align: center;
    }

    .header h1 {
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
      line-height: 1.2;
    }

    .header p {
      font-size: 11px;
      color: #64748b;
      margin-top: 2px;
    }

    /* Segmented Control */
    .segmented-control {
      display: flex;
      background: #e2e8f0;
      border-radius: 8px;
      padding: 2px;
      gap: 2px;
    }

    .seg-btn {
      flex: 1;
      border: none;
      background: transparent;
      padding: 5px 8px;
      font-size: 11px;
      font-weight: 600;
      color: #475569;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.25s ease;
      white-space: nowrap;
    }

    .seg-btn.active {
      background: #ffffff;
      color: #0f172a;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }

    /* Cards */
    .cards-container {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .fuel-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 6px 10px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      transition: border-color 0.25s ease, box-shadow 0.25s ease;
    }

    .fuel-card.highlighted {
      border-color: #f59e0b;
      box-shadow: 0 0 0 1px #f59e0b;
    }

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

    .card-title {
      font-size: 12px;
      font-weight: 700;
      color: #1e293b;
    }

    .badge {
      font-size: 10px;
      font-weight: 600;
      padding: 2px 6px;
      border-radius: 999px;
    }

    .badge-pure {
      background: #dcfce7;
      color: #166534;
    }

    .badge-impure {
      background: #fef3c7;
      color: #92400e;
    }

    /* SVG Structure Views */
    .svg-wrap {
      width: 100%;
      height: 52px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .bond {
      stroke: #cbd5e1;
      stroke-width: 2.5;
      stroke-linecap: round;
    }

    .atom-c {
      fill: #334155;
    }

    .atom-h {
      fill: #94a3b8;
    }

    .atom-s {
      fill: #f59e0b;
      cursor: pointer;
      transition: transform 0.2s ease;
    }

    .atom-label {
      font-size: 8px;
      font-weight: 700;
      text-anchor: middle;
      dominant-baseline: central;
      fill: #ffffff;
      pointer-events: none;
      user-select: none;
    }

    .atom-label-h {
      font-size: 7px;
      fill: #0f172a;
    }

    /* Sulfur Pulse Animation */
    .pulse-s {
      animation: sulfurGlow 1.4s ease-in-out infinite alternate;
    }

    @keyframes sulfurGlow {
      0% {
        filter: drop-shadow(0 0 1px #f59e0b);
        stroke: #d97706;
        stroke-width: 1;
      }
      100% {
        filter: drop-shadow(0 0 6px #d97706);
        stroke: #b45309;
        stroke-width: 2.5;
      }
    }

    /* Callout Box */
    .callout {
      background: #fffbeb;
      border: 1px solid #fde68a;
      border-radius: 8px;
      padding: 6px 8px;
      font-size: 11px;
      color: #92400e;
      line-height: 1.3;
      display: flex;
      align-items: flex-start;
      gap: 6px;
      transition: opacity 0.25s ease;
    }

    .callout strong {
      color: #78350f;
    }

    /* Legend */
    .legend-bar {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 14px;
      padding: 4px 0 0;
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 11px;
      font-weight: 600;
      color: #475569;
    }

    .swatch {
      width: 11px;
      height: 11px;
      border-radius: 3px;
    }

    .swatch-carbon {
      background: #334155;
    }

    .swatch-hydrogen {
      background: #94a3b8;
    }

    .swatch-sulfur {
      background: #f59e0b;
      box-shadow: 0 0 3px #f59e0b;
    }
  </style>
</head>
<body>

  <div class="header">
    <h1>Pure Hydrocarbons vs. Impure Fossil Fuels</h1>
    <p>Raw fossil fuels naturally contain trapped sulfur impurities</p>
  </div>

  
  <div class="segmented-control">
    <button class="seg-btn active" id="btnCompare" onclick="setMode('compare')">Compare Side-by-Side</button>
    <button class="seg-btn" id="btnInspect" onclick="setMode('inspect')">Inspect Impurities (Sulfur)</button>
  </div>

  <div class="cards-container">
    
    <div class="fuel-card" id="cardPure">
      <div class="card-header">
        <span class="card-title">Refined Fuel (Octane - C₈H₁₈)</span>
        <span class="badge badge-pure">100% Hydrocarbons</span>
      </div>
      <div class="svg-wrap">
        <svg viewBox="0 0 330 52">
          
          <line x1="30" y1="26" x2="290" y2="26" class="bond" />
          
          
          
          <line x1="30" y1="26" x2="30" y2="8" class="bond" />
          <line x1="30" y1="26" x2="30" y2="44" class="bond" />
          <line x1="30" y1="26" x2="12" y2="26" class="bond" />
          
          <line x1="67" y1="26" x2="67" y2="8" class="bond" />
          <line x1="67" y1="26" x2="67" y2="44" class="bond" />
          
          <line x1="104" y1="26" x2="104" y2="8" class="bond" />
          <line x1="104" y1="26" x2="104" y2="44" class="bond" />
          
          <line x1="141" y1="26" x2="141" y2="8" class="bond" />
          <line x1="141" y1="26" x2="141" y2="44" class="bond" />
          
          <line x1="178" y1="26" x2="178" y2="8" class="bond" />
          <line x1="178" y1="26" x2="178" y2="44" class="bond" />
          
          <line x1="215" y1="26" x2="215" y2="8" class="bond" />
          <line x1="215" y1="26" x2="215" y2="44" class="bond" />
          
          <line x1="252" y1="26" x2="252" y2="8" class="bond" />
          <line x1="252" y1="26" x2="252" y2="44" class="bond" />
          
          <line x1="289" y1="26" x2="289" y2="8" class="bond" />
          <line x1="289" y1="26" x2="289" y2="44" class="bond" />
          <line x1="289" y1="26" x2="307" y2="26" class="bond" />

          
          
          <circle cx="30" cy="8" r="5" class="atom-h" /><text x="30" y="8" class="atom-label atom-label-h">H</text>
          <circle cx="67" cy="8" r="5" class="atom-h" /><text x="67" y="8" class="atom-label atom-label-h">H</text>
          <circle cx="104" cy="8" r="5" class="atom-h" /><text x="104" y="8" class="atom-label atom-label-h">H</text>
          <circle cx="141" cy="8" r="5" class="atom-h" /><text x="141" y="8" class="atom-label atom-label-h">H</text>
          <circle cx="178" cy="8" r="5" class="atom-h" /><text x="178" y="8" class="atom-label atom-label-h">H</text>
          <circle cx="215" cy="8" r="5" class="atom-h" /><text x="215" y="8" class="atom-label atom-label-h">H</text>
          <circle cx="252" cy="8" r="5" class="atom-h" /><text x="252" y="8" class="atom-label atom-label-h">H</text>
          <circle cx="289" cy="8" r="5" class="atom-h" /><text x="289" y="8" class="atom-label atom-label-h">H</text>

          
          <circle cx="30" cy="44" r="5" class="atom-h" /><text x="30" y="44" class="atom-label atom-label-h">H</text>
          <circle cx="67" cy="44" r="5" class="atom-h" /><text x="67" y="44" class="atom-label atom-label-h">H</text>
          <circle cx="104" cy="44" r="5" class="atom-h" /><text x="104" y="44" class="atom-label atom-label-h">H</text>
          <circle cx="141" cy="44" r="5" class="atom-h" /><text x="141" y="44" class="atom-label atom-label-h">H</text>
          <circle cx="178" cy="44" r="5" class="atom-h" /><text x="178" y="44" class="atom-label atom-label-h">H</text>
          <circle cx="215" cy="44" r="5" class="atom-h" /><text x="215" y="44" class="atom-label atom-label-h">H</text>
          <circle cx="252" cy="44" r="5" class="atom-h" /><text x="252" y="44" class="atom-label atom-label-h">H</text>
          <circle cx="289" cy="44" r="5" class="atom-h" /><text x="289" y="44" class="atom-label atom-label-h">H</text>

          
          <circle cx="12" cy="26" r="5" class="atom-h" /><text x="12" y="26" class="atom-label atom-label-h">H</text>
          <circle cx="307" cy="26" r="5" class="atom-h" /><text x="307" y="26" class="atom-label atom-label-h">H</text>

          
          <circle cx="30" cy="26" r="7.5" class="atom-c" /><text x="30" y="26" class="atom-label">C</text>
          <circle cx="67" cy="26" r="7.5" class="atom-c" /><text x="67" y="26" class="atom-label">C</text>
          <circle cx="104" cy="26" r="7.5" class="atom-c" /><text x="104" y="26" class="atom-label">C</text>
          <circle cx="141" cy="26" r="7.5" class="atom-c" /><text x="141" y="26" class="atom-label">C</text>
          <circle cx="178" cy="26" r="7.5" class="atom-c" /><text x="178" y="26" class="atom-label">C</text>
          <circle cx="215" cy="26" r="7.5" class="atom-c" /><text x="215" y="26" class="atom-label">C</text>
          <circle cx="252" cy="26" r="7.5" class="atom-c" /><text x="252" y="26" class="atom-label">C</text>
          <circle cx="289" cy="26" r="7.5" class="atom-c" /><text x="289" y="26" class="atom-label">C</text>
        </svg>
      </div>
    </div>

    
    <div class="fuel-card" id="cardImpure">
      <div class="card-header">
        <span class="card-title">Raw Fossil Fuel (Crude Oil / Coal)</span>
        <span class="badge badge-impure">Contains S Impurities</span>
      </div>
      <div class="svg-wrap">
        <svg viewBox="0 0 330 52">
          
          <line x1="28" y1="26" x2="148" y2="26" class="bond" />
          <line x1="28" y1="26" x2="28" y2="8" class="bond" />
          <line x1="28" y1="26" x2="28" y2="44" class="bond" />
          <line x1="28" y1="26" x2="12" y2="26" class="bond" />
          
          <line x1="68" y1="26" x2="68" y2="8" class="bond" />
          <line x1="68" y1="26" x2="68" y2="44" class="bond" />

          
          <line x1="148" y1="26" x2="148" y2="8" class="bond" />
          <line x1="148" y1="26" x2="148" y2="44" class="bond" />

          
          <circle cx="12" cy="26" r="5" class="atom-h" /><text x="12" y="26" class="atom-label atom-label-h">H</text>
          <circle cx="28" cy="8" r="5" class="atom-h" /><text x="28" y="8" class="atom-label atom-label-h">H</text>
          <circle cx="28" cy="44" r="5" class="atom-h" /><text x="28" y="44" class="atom-label atom-label-h">H</text>
          <circle cx="68" cy="8" r="5" class="atom-h" /><text x="68" y="8" class="atom-label atom-label-h">H</text>
          <circle cx="68" cy="44" r="5" class="atom-h" /><text x="68" y="44" class="atom-label atom-label-h">H</text>
          <circle cx="148" cy="8" r="5" class="atom-h" /><text x="148" y="8" class="atom-label atom-label-h">H</text>
          <circle cx="148" cy="44" r="5" class="atom-h" /><text x="148" y="44" class="atom-label atom-label-h">H</text>

          <circle cx="28" cy="26" r="7.5" class="atom-c" /><text x="28" y="26" class="atom-label">C</text>
          <circle cx="68" cy="26" r="7.5" class="atom-c" /><text x="68" y="26" class="atom-label">C</text>
          <circle cx="148" cy="26" r="7.5" class="atom-c" /><text x="148" y="26" class="atom-label">C</text>

          
          <g class="sulfur-group" onclick="setMode('inspect')">
            <circle cx="108" cy="26" r="9" class="atom-s sulfur-elem" />
            <text x="108" y="26" class="atom-label">S</text>
          </g>

          
          <line x1="188" y1="26" x2="308" y2="26" class="bond" />
          <line x1="188" y1="26" x2="188" y2="8" class="bond" />
          <line x1="188" y1="26" x2="188" y2="44" class="bond" />
          
          <line x1="228" y1="26" x2="228" y2="8" class="bond" />
          
          <line x1="228" y1="26" x2="228" y2="44" class="bond" />
          
          <line x1="268" y1="26" x2="268" y2="8" class="bond" />
          <line x1="268" y1="26" x2="268" y2="44" class="bond" />
          
          <line x1="308" y1="26" x2="308" y2="8" class="bond" />
          <line x1="308" y1="26" x2="308" y2="44" class="bond" />
          <line x1="308" y1="26" x2="322" y2="26" class="bond" />

          
          <circle cx="188" cy="8" r="5" class="atom-h" /><text x="188" y="8" class="atom-label atom-label-h">H</text>
          <circle cx="188" cy="44" r="5" class="atom-h" /><text x="188" y="44" class="atom-label atom-label-h">H</text>
          <circle cx="228" cy="8" r="5" class="atom-h" /><text x="228" y="8" class="atom-label atom-label-h">H</text>
          <circle cx="268" cy="8" r="5" class="atom-h" /><text x="268" y="8" class="atom-label atom-label-h">H</text>
          <circle cx="268" cy="44" r="5" class="atom-h" /><text x="268" y="44" class="atom-label atom-label-h">H</text>
          <circle cx="308" cy="8" r="5" class="atom-h" /><text x="308" y="8" class="atom-label atom-label-h">H</text>
          <circle cx="308" cy="44" r="5" class="atom-h" /><text x="308" y="44" class="atom-label atom-label-h">H</text>
          <circle cx="322" cy="26" r="5" class="atom-h" /><text x="322" y="26" class="atom-label atom-label-h">H</text>

          <circle cx="188" cy="26" r="7.5" class="atom-c" /><text x="188" y="26" class="atom-label">C</text>
          <circle cx="228" cy="26" r="7.5" class="atom-c" /><text x="228" y="26" class="atom-label">C</text>
          <circle cx="268" cy="26" r="7.5" class="atom-c" /><text x="268" y="26" class="atom-label">C</text>
          <circle cx="308" cy="26" r="7.5" class="atom-c" /><text x="308" y="26" class="atom-label">C</text>

          
          <g class="sulfur-group" onclick="setMode('inspect')">
            <circle cx="228" cy="44" r="8" class="atom-s sulfur-elem" />
            <text x="228" y="44" class="atom-label">S</text>
          </g>
        </svg>
      </div>
    </div>
  </div>

  
  <div class="callout" id="calloutBox">
    <span>⚠️</span>
    <div>
      <strong>Sulfur Impurity:</strong> When burned, trapped sulfur reacts with oxygen to form sulfur dioxide (SO₂), a major cause of acid rain.
    </div>
  </div>

  
  <div class="legend-bar">
    <div class="legend-item">
      <div class="swatch swatch-carbon"></div>
      <span>Carbon (C)</span>
    </div>
    <div class="legend-item">
      <div class="swatch swatch-hydrogen"></div>
      <span>Hydrogen (H)</span>
    </div>
    <div class="legend-item">
      <div class="swatch swatch-sulfur"></div>
      <span>Sulfur (S)</span>
    </div>
  </div>

  <script>
    function setMode(mode) {
      const btnCompare = document.getElementById('btnCompare');
      const btnInspect = document.getElementById('btnInspect');
      const cardImpure = document.getElementById('cardImpure');
      const sulfurs = document.querySelectorAll('.sulfur-elem');
      const callout = document.getElementById('calloutBox');

      if (mode === 'inspect') {
        btnInspect.classList.add('active');
        btnCompare.classList.remove('active');
        cardImpure.classList.add('highlighted');
        sulfurs.forEach(s => s.classList.add('pulse-s'));
        callout.style.borderColor = '#f59e0b';
        callout.style.background = '#fef3c7';
      } else {
        btnCompare.classList.add('active');
        btnInspect.classList.remove('active');
        cardImpure.classList.remove('highlighted');
        sulfurs.forEach(s => s.classList.remove('pulse-s'));
        callout.style.borderColor = '#fde68a';
        callout.style.background = '#fffbeb';
      }
    }
  </script>
</body>
</html>

UK-GCSE-SCIENCE-CHEM-EA-03

Child standards (1)

Aligned learning resources

Related diagrams