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

    .tabs {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 440px;
      margin-bottom: 8px;
      z-index: 10;
    }

    .tab-btn {
      flex: 1;
      padding: 8px 12px;
      font-size: 14px;
      font-weight: 600;
      border-radius: 8px;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: background-color 0.2s, color 0.2s, box-shadow 0.2s, border-color 0.2s;
    }

    .tab-btn.active-clean {
      background: #e0f2fe;
      color: #0369a1;
      border-color: #38bdf8;
      box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25);
    }

    .tab-btn.active-vape {
      background: #fef2f2;
      color: #b91c1c;
      border-color: #f87171;
      box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.25);
    }

    .stage-wrap {
      position: relative;
      width: 100%;
      max-width: 440px;
      height: 280px;
      background: #ffffff;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      overflow: hidden;
    }

    canvas {
      display: block;
      width: 100%;
      height: 100%;
    }

    .status-badge {
      position: absolute;
      top: 10px;
      left: 10px;
      font-size: 13px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 6px;
      pointer-events: none;
      transition: background 0.3s, color 0.3s;
    }

    .badge-clean {
      background: #e0f2fe;
      color: #0284c7;
    }

    .badge-vape {
      background: #fee2e2;
      color: #dc2626;
    }

    .footer-note {
      width: 100%;
      max-width: 440px;
      margin-top: 8px;
      text-align: center;
      font-size: 14px;
      font-weight: 600;
      color: #475569;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 7px 10px;
      transition: color 0.3s, border-color 0.3s, background-color 0.3s;
    }

    .footer-note.alert {
      color: #991b1b;
      background: #fef2f2;
      border-color: #fecaca;
    }
  </style>
</head>
<body>

  <div class="tabs">
    <button id="btnClean" class="tab-btn active-clean">
      <span>✦</span> Clean Air
    </button>
    <button id="btnVape" class="tab-btn">
      <span>⚠</span> Vape Aerosol / Smoke
    </button>
  </div>

  <div class="stage-wrap">
    <canvas id="airwayCanvas"></canvas>
    <div id="statusBadge" class="status-badge badge-clean">Healthy Airway</div>
  </div>

  <div id="footerNote" class="footer-note">
    Aerosol is NOT water vapor — it is a chemical mist.
  </div>

  <script>
    const canvas = document.getElementById('airwayCanvas');
    const ctx = canvas.getContext('2d');
    const btnClean = document.getElementById('btnClean');
    const btnVape = document.getElementById('btnVape');
    const statusBadge = document.getElementById('statusBadge');
    const footerNote = document.getElementById('footerNote');

    let mode = 'clean'; // 'clean' or 'vape'
    let swellingFactor = 0; // 0 = normal, 1 = swollen
    let particles = [];
    let stuckParticles = [];

    function resize() {
      const rect = canvas.getBoundingClientRect();
      const dpr = window.devicePixelRatio || 1;
      canvas.width = rect.width * dpr;
      canvas.height = rect.height * dpr;
      ctx.resetTransform();
      ctx.scale(dpr, dpr);
    }
    window.addEventListener('resize', resize);
    resize();

    // Mode Switching
    btnClean.addEventListener('click', () => {
      if (mode === 'clean') return;
      mode = 'clean';
      btnClean.className = 'tab-btn active-clean';
      btnVape.className = 'tab-btn';
      statusBadge.textContent = 'Healthy Airway';
      statusBadge.className = 'status-badge badge-clean';
      footerNote.classList.remove('alert');
      stuckParticles = [];
    });

    btnVape.addEventListener('click', () => {
      if (mode === 'vape') return;
      mode = 'vape';
      btnVape.className = 'tab-btn active-vape';
      btnClean.className = 'tab-btn';
      statusBadge.textContent = 'Swollen Airway';
      statusBadge.className = 'status-badge badge-vape';
      footerNote.classList.add('alert');
    });

    class Particle {
      constructor(type) {
        this.type = type; // 'air', 'chemical', 'ash'
        this.progress = 0;
        this.speed = 0.006 + Math.random() * 0.004;
        this.branch = Math.random() < 0.5 ? -1 : 1; // left or right
        this.offset = (Math.random() - 0.5) * 0.6; // normalized lateral position
        this.size = type === 'air' ? 5 : (type === 'chemical' ? 4.5 : 3.5);
        this.stuck = false;
        this.stickProgress = 0.25 + Math.random() * 0.55;
      }

      update() {
        if (this.stuck) return;
        this.progress += this.speed;

        if (mode === 'vape' && this.type !== 'air' && this.progress >= this.stickProgress) {
          if (Math.random() < 0.35) {
            this.stuck = true;
            stuckParticles.push({
              x: this.lastX,
              y: this.lastY,
              type: this.type,
              size: this.size,
              alpha: 0.9
            });
            if (stuckParticles.length > 70) stuckParticles.shift();
          }
        }
      }
    }

    // Geometry Helpers
    function getAirwayPosition(progress, branch, offset, w, h) {
      const startX = w * 0.5;
      const startY = 15;
      const forkY = h * 0.38;

      let x, y;
      if (progress < 0.35) {
        const t = progress / 0.35;
        x = startX + offset * 18 * (1 - swellingFactor * 0.45);
        y = startY + t * (forkY - startY);
      } else {
        const t = (progress - 0.35) / 0.65;
        const branchX = branch === -1 ? w * 0.24 : w * 0.76;
        const branchY = h * 0.78;

        // Quadratic curve through bronchi to alveoli
        const p0x = startX + (branch * 8);
        const p0y = forkY;
        const p1x = startX + (branch * 40);
        const p1y = forkY + 30;
        const p2x = branchX;
        const p2y = branchY;

        const u = 1 - t;
        x = u * u * p0x + 2 * u * t * p1x + t * t * p2x + (offset * 14 * (1 - swellingFactor * 0.45));
        y = u * u * p0y + 2 * u * t * p1y + t * t * p2y;
      }
      return { x, y };
    }

    function drawAlveoli(ctx, cx, cy, radius, isSwollen) {
      ctx.save();
      const count = 7;
      for (let i = 0; i < count; i++) {
        const angle = (i / count) * Math.PI * 2;
        const ax = cx + Math.cos(angle) * (radius * 0.65);
        const ay = cy + Math.sin(angle) * (radius * 0.65);

        ctx.beginPath();
        ctx.arc(ax, ay, radius * 0.55, 0, Math.PI * 2);
        ctx.fillStyle = isSwollen ? '#fecaca' : '#fed7aa';
        ctx.fill();
        ctx.strokeStyle = isSwollen ? '#ef4444' : '#f97316';
        ctx.lineWidth = isSwollen ? 2 : 1.5;
        ctx.stroke();
      }
      // Center hub
      ctx.beginPath();
      ctx.arc(cx, cy, radius * 0.45, 0, Math.PI * 2);
      ctx.fillStyle = isSwollen ? '#fee2e2' : '#ffedd5';
      ctx.fill();
      ctx.restore();
    }

    function drawAirwayTubes(w, h) {
      const startX = w * 0.5;
      const forkY = h * 0.38;
      const leftEnd = { x: w * 0.24, y: h * 0.78 };
      const rightEnd = { x: w * 0.76, y: h * 0.78 };

      const baseWidth = 36;
      const swellPx = swellingFactor * 10;
      const innerWidth = baseWidth - swellPx;

      ctx.save();
      ctx.lineCap = 'round';
      ctx.lineJoin = 'round';

      // Outer wall / healthy tissue
      ctx.lineWidth = baseWidth + 12;
      ctx.strokeStyle = '#f1f5f9';
      drawBranchPaths(ctx, startX, forkY, leftEnd, rightEnd);

      // Swelling / inflammation layer
      if (swellingFactor > 0.05) {
        ctx.lineWidth = baseWidth + 4;
        ctx.strokeStyle = `rgba(239, 68, 68, ${swellingFactor * 0.85})`;
        drawBranchPaths(ctx, startX, forkY, leftEnd, rightEnd);
      }

      // Airway lumen (passage)
      ctx.lineWidth = innerWidth;
      ctx.strokeStyle = '#ffffff';
      drawBranchPaths(ctx, startX, forkY, leftEnd, rightEnd);

      // Trachea cartilage rings
      ctx.strokeStyle = '#e2e8f0';
      ctx.lineWidth = 2;
      for (let y = 30; y < forkY - 10; y += 14) {
        ctx.beginPath();
        ctx.moveTo(startX - (innerWidth / 2) + 2, y);
        ctx.lineTo(startX + (innerWidth / 2) - 2, y);
        ctx.stroke();
      }

      ctx.restore();

      // Alveoli clusters at ends
      drawAlveoli(ctx, leftEnd.x - 6, leftEnd.y + 12, 22, swellingFactor > 0.4);
      drawAlveoli(ctx, rightEnd.x + 6, rightEnd.y + 12, 22, swellingFactor > 0.4);
    }

    function drawBranchPaths(ctx, startX, forkY, leftEnd, rightEnd) {
      // Main trachea
      ctx.beginPath();
      ctx.moveTo(startX, 15);
      ctx.lineTo(startX, forkY);
      ctx.stroke();

      // Left branch
      ctx.beginPath();
      ctx.moveTo(startX, forkY);
      ctx.quadraticCurveTo(startX - 40, forkY + 30, leftEnd.x, leftEnd.y);
      ctx.stroke();

      // Right branch
      ctx.beginPath();
      ctx.moveTo(startX, forkY);
      ctx.quadraticCurveTo(startX + 40, forkY + 30, rightEnd.x, rightEnd.y);
      ctx.stroke();
    }

    let spawnTimer = 0;

    function animate() {
      const rect = canvas.getBoundingClientRect();
      const w = rect.width;
      const h = rect.height;

      ctx.clearRect(0, 0, w, h);

      // Smooth swelling transition
      const targetSwelling = mode === 'vape' ? 1 : 0;
      swellingFactor += (targetSwelling - swellingFactor) * 0.05;

      // Draw Airway structure
      drawAirwayTubes(w, h);

      // Particle Spawning
      spawnTimer++;
      if (spawnTimer % 5 === 0) {
        if (mode === 'clean') {
          particles.push(new Particle('air'));
        } else {
          // Vape mode: chemicals (yellow), ash/tar (gray), and very few air
          const rnd = Math.random();
          if (rnd < 0.55) {
            particles.push(new Particle('chemical'));
          } else if (rnd < 0.85) {
            particles.push(new Particle('ash'));
          } else {
            particles.push(new Particle('air'));
          }
        }
      }

      // Draw Stuck Particles
      for (const sp of stuckParticles) {
        ctx.beginPath();
        ctx.arc(sp.x, sp.y, sp.size, 0, Math.PI * 2);
        ctx.fillStyle = sp.type === 'chemical' ? '#eab308' : '#475569';
        ctx.fill();
      }

      // Update and Draw Moving Particles
      for (let i = particles.length - 1; i >= 0; i--) {
        const p = particles[i];
        p.update();

        if (p.stuck || p.progress >= 1) {
          particles.splice(i, 1);
          continue;
        }

        const pos = getAirwayPosition(p.progress, p.branch, p.offset, w, h);
        p.lastX = pos.x;
        p.lastY = pos.y;

        ctx.beginPath();
        ctx.arc(pos.x, pos.y, p.size, 0, Math.PI * 2);

        if (p.type === 'air') {
          ctx.fillStyle = '#0284c7';
        } else if (p.type === 'chemical') {
          ctx.fillStyle = '#eab308'; // nicotine & flavoring chemicals
        } else {
          ctx.fillStyle = '#475569'; // heavy metals / ash
        }
        ctx.fill();
      }

      requestAnimationFrame(animate);
    }

    animate();
  </script>
</body>
</html>

Effects of Tobacco, Nicotine, and Vaping on Lungs and Heart

<!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>Heart Rate and Blood Vessel Simulator</title>
  <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: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .nav-toggle {
      display: flex;
      background: #f1f5f9;
      padding: 4px;
      border-radius: 30px;
      gap: 6px;
      margin-bottom: 12px;
    }

    .toggle-btn {
      border: none;
      background: transparent;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 700;
      color: #64748b;
      cursor: pointer;
      transition: all 0.25s ease;
    }

    .toggle-btn.active {
      background: #ffffff;
      color: #0f172a;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    }

    .cards-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 620px;
    }

    @media (max-width: 480px) {
      .cards-grid {
        grid-template-columns: 1fr;
      }
      .card-item.hidden-mobile {
        display: none;
      }
    }

    .sim-card {
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 16px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      position: relative;
    }

    .sim-card.nicotine-card {
      background: #fff8f6;
      border-color: #fed7aa;
    }

    .card-title {
      font-size: 15px;
      font-weight: 800;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .resting-title { color: #15803d; }
    .nicotine-title { color: #dc2626; }

    /* Heart Display */
    .heart-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }

    .heart-icon {
      font-size: 40px;
      line-height: 1;
      display: inline-block;
      transform-origin: center;
    }

    .heart-resting {
      animation: beatResting 0.857s ease-in-out infinite; /* ~70 BPM */
    }

    .heart-nicotine {
      animation: beatNicotine 0.5s ease-in-out infinite; /* 120 BPM */
    }

    @keyframes beatResting {
      0%, 100% { transform: scale(1); }
      15% { transform: scale(1.15); }
      30% { transform: scale(1); }
      45% { transform: scale(1.1); }
    }

    @keyframes beatNicotine {
      0%, 100% { transform: scale(1); }
      20% { transform: scale(1.25); }
      40% { transform: scale(1); }
      60% { transform: scale(1.18); }
    }

    .bpm-badge {
      font-size: 13px;
      font-weight: 800;
      padding: 2px 10px;
      border-radius: 12px;
    }

    .bpm-rest { background: #dcfce7; color: #166534; }
    .bpm-nico { background: #fee2e2; color: #991b1b; }

    /* Vessel Container */
    .vessel-container {
      width: 100%;
      height: 60px;
      position: relative;
      overflow: hidden;
      border-radius: 10px;
      background: #f1f5f9;
      display: flex;
      align-items: center;
    }

    .vessel-svg {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }

    /* Pressure Gauge */
    .gauge-box {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
    }

    .gauge-label {
      font-size: 12px;
      font-weight: 700;
    }

    .label-rest { color: #16a34a; }
    .label-nico { color: #ea580c; }
  </style>
</head>
<body>

  
  <div class="nav-toggle">
    <button class="toggle-btn active" id="btn-all" onclick="showMode('all')">Compare</button>
    <button class="toggle-btn" id="btn-rest" onclick="showMode('rest')">🌿 Resting</button>
    <button class="toggle-btn" id="btn-nico" onclick="showMode('nico')">⚡ Nicotine</button>
  </div>

  <div class="cards-grid">
    
    <div class="sim-card card-item" id="card-rest">
      <div class="card-title resting-title">Resting Heart</div>
      
      <div class="heart-box">
        <div class="heart-icon heart-resting">❤️</div>
        <div class="bpm-badge bpm-rest">70 BPM</div>
      </div>

      
      <div class="vessel-container">
        <svg class="vessel-svg" viewBox="0 0 200 60" preserveAspectRatio="none">
          
          <path d="M 0 10 L 200 10 L 200 50 L 0 50 Z" fill="#ffcdd2" stroke="#e57373" stroke-width="2" />
          
          <line x1="0" y1="30" x2="200" y2="30" stroke="#ef9a9a" stroke-dasharray="8 6" stroke-width="2"/>
          
          <circle cy="30" r="7" fill="#e11d48">
            <animate attributeName="cx" from="-10" to="210" dur="2.4s" repeatCount="indefinite" />
          </circle>
          <circle cy="24" r="6.5" fill="#e11d48">
            <animate attributeName="cx" from="-10" to="210" dur="2.4s" begin="0.8s" repeatCount="indefinite" />
          </circle>
          <circle cy="36" r="6.5" fill="#be123c">
            <animate attributeName="cx" from="-10" to="210" dur="2.4s" begin="1.6s" repeatCount="indefinite" />
          </circle>
        </svg>
      </div>

      
      <div class="gauge-box">
        <svg width="120" height="42" viewBox="0 0 120 45">
          <path d="M 15 40 A 45 45 0 0 1 105 40" fill="none" stroke="#e2e8f0" stroke-width="8" stroke-linecap="round" />
          <path d="M 15 40 A 45 45 0 0 1 50 14" fill="none" stroke="#22c55e" stroke-width="8" stroke-linecap="round" />
          
          <circle cx="60" cy="40" r="4" fill="#334155" />
          <line x1="60" y1="40" x2="35" y2="20" stroke="#0f172a" stroke-width="3" stroke-linecap="round" />
        </svg>
        <span class="gauge-label label-rest">Normal Pressure</span>
      </div>
    </div>

    
    <div class="sim-card nicotine-card card-item" id="card-nico">
      <div class="card-title nicotine-title">Nicotine Effect</div>
      
      <div class="heart-box">
        <div class="heart-icon heart-nicotine">❤️</div>
        <div class="bpm-badge bpm-nico">120 BPM</div>
      </div>

      
      <div class="vessel-container">
        <svg class="vessel-svg" viewBox="0 0 200 60" preserveAspectRatio="none">
          
          <path d="M 0 10 Q 100 24 200 10 L 200 50 Q 100 36 0 50 Z" fill="#fee2e2" stroke="#f87171" stroke-width="2" />
          
          <path d="M 100 2 L 100 16 M 97 12 L 100 16 L 103 12" stroke="#dc2626" stroke-width="2" stroke-linecap="round" />
          <path d="M 100 58 L 100 44 M 97 48 L 100 44 L 103 48" stroke="#dc2626" stroke-width="2" stroke-linecap="round" />
          
          <ellipse cy="30" rx="7" ry="6" fill="#be123c">
            <animate attributeName="cx" from="-10" to="210" dur="1.2s" keyTimes="0; 0.4; 0.6; 1" values="-10; 80; 120; 210" repeatCount="indefinite" />
            <animate attributeName="ry" keyTimes="0; 0.45; 0.55; 1" values="6; 3; 3; 6" dur="1.2s" repeatCount="indefinite" />
            <animate attributeName="rx" keyTimes="0; 0.45; 0.55; 1" values="7; 9; 9; 7" dur="1.2s" repeatCount="indefinite" />
          </ellipse>
          <ellipse cy="30" rx="6.5" ry="6" fill="#991b1b">
            <animate attributeName="cx" from="-10" to="210" dur="1.2s" begin="0.4s" keyTimes="0; 0.4; 0.6; 1" values="-10; 80; 120; 210" repeatCount="indefinite" />
            <animate attributeName="ry" keyTimes="0; 0.45; 0.55; 1" values="6; 3; 3; 6" dur="1.2s" begin="0.4s" repeatCount="indefinite" />
            <animate attributeName="rx" keyTimes="0; 0.45; 0.55; 1" values="6.5; 8.5; 8.5; 6.5" dur="1.2s" begin="0.4s" repeatCount="indefinite" />
          </ellipse>
        </svg>
      </div>

      
      <div class="gauge-box">
        <svg width="120" height="42" viewBox="0 0 120 45">
          <path d="M 15 40 A 45 45 0 0 1 105 40" fill="none" stroke="#e2e8f0" stroke-width="8" stroke-linecap="round" />
          <path d="M 70 14 A 45 45 0 0 1 105 40" fill="none" stroke="#ef4444" stroke-width="8" stroke-linecap="round" />
          
          <circle cx="60" cy="40" r="4" fill="#334155" />
          <line x1="60" y1="40" x2="85" y2="20" stroke="#dc2626" stroke-width="3" stroke-linecap="round" />
        </svg>
        <span class="gauge-label label-nico">High Stress</span>
      </div>
    </div>
  </div>

  <script>
    function showMode(mode) {
      const restCard = document.getElementById('card-rest');
      const nicoCard = document.getElementById('card-nico');
      const btnAll = document.getElementById('btn-all');
      const btnRest = document.getElementById('btn-rest');
      const btnNico = document.getElementById('btn-nico');

      [btnAll, btnRest, btnNico].forEach(b => b.classList.remove('active'));

      if (mode === 'rest') {
        btnRest.classList.add('active');
        restCard.style.display = 'flex';
        nicoCard.style.display = 'none';
      } else if (mode === 'nico') {
        btnNico.classList.add('active');
        restCard.style.display = 'none';
        nicoCard.style.display = 'flex';
      } else {
        btnAll.classList.add('active');
        restCard.style.display = 'flex';
        nicoCard.style.display = 'flex';
      }
    }
  </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;
      -webkit-tap-highlight-color: transparent;
    }

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

    /* Header & Toggle */
    .header {
      width: 100%;
      max-width: 620px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
    }

    .title {
      font-size: 15px;
      font-weight: 700;
      text-align: center;
      color: #1e2945;
    }

    .toggle-group {
      display: flex;
      background: #f1f5f9;
      padding: 3px;
      border-radius: 999px;
      border: 1px solid #e2e8f0;
      gap: 2px;
    }

    .toggle-btn {
      border: none;
      background: transparent;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 999px;
      cursor: pointer;
      color: #64748b;
      transition: all 0.25s ease;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .toggle-btn.active {
      background: #ffffff;
      color: #0284c7;
      box-shadow: 0 2px 4px rgba(0,0,0,0.06);
    }

    /* Comparison Area */
    .comparison-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      width: 100%;
      max-width: 620px;
      flex: 1;
    }

    .alveoli-card {
      background: #f8fafc;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      padding: 8px 8px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      overflow: hidden;
    }

    .card-label {
      font-size: 13px;
      font-weight: 700;
      margin-bottom: 4px;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .tag-healthy { color: #059669; }
    .tag-damaged { color: #dc2626; }

    .view-svg {
      width: 100%;
      height: 190px;
      display: block;
    }

    /* Visual badge */
    .badge {
      font-size: 11px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 6px;
      margin-top: 4px;
      text-align: center;
      width: 90%;
    }

    .badge-healthy {
      background: #ecfdf5;
      color: #047857;
      border: 1px solid #a7f3d0;
    }

    .badge-damaged {
      background: #fef2f2;
      color: #b91c1c;
      border: 1px solid #fecaca;
    }

    /* Bottom Summary Bar */
    .summary-bar {
      width: 100%;
      max-width: 620px;
      margin-top: 8px;
      display: flex;
      justify-content: space-between;
      gap: 8px;
      background: #f1f5f9;
      border-radius: 8px;
      padding: 6px 12px;
      font-size: 12px;
      font-weight: 600;
      color: #334155;
    }

    .stat-item {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    /* Animations */
    @keyframes breathe {
      0%, 100% { transform: scale(1); transform-origin: 100px 105px; }
      50% { transform: scale(1.05); transform-origin: 100px 105px; }
    }

    @keyframes damagedBreathe {
      0%, 100% { transform: scale(1); transform-origin: 100px 105px; }
      50% { transform: scale(1.015); transform-origin: 100px 105px; }
    }

    @keyframes flowLeft {
      0% { transform: translate(0, 0); opacity: 0; }
      20% { opacity: 1; }
      80% { opacity: 1; }
      100% { transform: translate(-38px, 16px); opacity: 0; }
    }

    @keyframes flowRight {
      0% { transform: translate(0, 0); opacity: 0; }
      20% { opacity: 1; }
      80% { opacity: 1; }
      100% { transform: translate(38px, 16px); opacity: 0; }
    }

    @keyframes flowDown {
      0% { transform: translate(0, 0); opacity: 0; }
      20% { opacity: 1; }
      80% { opacity: 1; }
      100% { transform: translate(0, 42px); opacity: 0; }
    }

    @keyframes mistFlow {
      0% { transform: translateY(-10px); opacity: 0; }
      50% { opacity: 0.85; }
      100% { transform: translateY(40px); opacity: 0; }
    }

    .healthy-cluster {
      animation: breathe 3.5s ease-in-out infinite;
    }

    .damaged-cluster {
      animation: damagedBreathe 3.5s ease-in-out infinite;
    }

    /* Particle styling */
    .o2-particle {
      fill: #0284c7;
      filter: drop-shadow(0 0 2px rgba(2, 132, 199, 0.6));
    }

    .o2-p1 { animation: flowLeft 2.4s ease-in-out infinite; }
    .o2-p2 { animation: flowRight 2.4s ease-in-out infinite 0.6s; }
    .o2-p3 { animation: flowDown 2.4s ease-in-out infinite 1.2s; }
    .o2-p4 { animation: flowLeft 2.4s ease-in-out infinite 1.8s; }

    .smoke-layer {
      transition: opacity 0.4s ease;
      opacity: 0;
      pointer-events: none;
    }

    .smoke-layer.active {
      opacity: 1;
    }

    .soot-particle {
      animation: mistFlow 2s linear infinite;
    }

    .soot-p1 { animation-delay: 0s; }
    .soot-p2 { animation-delay: 0.5s; }
    .soot-p3 { animation-delay: 1s; }
    .soot-p4 { animation-delay: 1.5s; }

    @media (max-width: 480px) {
      .title { font-size: 13px; }
      .toggle-btn { font-size: 11px; padding: 4px 10px; }
      .view-svg { height: 160px; }
      .badge { font-size: 10px; }
      .summary-bar { font-size: 11px; flex-direction: column; align-items: center; gap: 2px; }
    }
  </style>
</head>
<body>

  
  <div class="header">
    <div class="title">Alveoli: Fresh Air vs. Smoke & Mist</div>
    <div class="toggle-group" role="tablist">
      <button id="cleanBtn" class="toggle-btn active" role="tab" aria-selected="true">🍃 Fresh Air</button>
      <button id="smokeBtn" class="toggle-btn" role="tab" aria-selected="false">💨 Smoke & Mist</button>
    </div>
  </div>

  
  <div class="comparison-grid">
    
    
    <div class="alveoli-card">
      <div class="card-label tag-healthy">✓ Healthy Alveoli</div>
      
      <svg class="view-svg" viewBox="0 0 200 180" aria-label="Healthy Alveoli Diagram">
        <defs>
          <radialGradient id="healthySac" cx="40%" cy="40%" r="60%">
            <stop offset="0%" stop-color="#fda4af" />
            <stop offset="100%" stop-color="#fb7185" />
          </radialGradient>
          <radialGradient id="tarGrad" cx="30%" cy="30%" r="70%">
            <stop offset="0%" stop-color="#ca8a04" />
            <stop offset="60%" stop-color="#44403c" />
            <stop offset="100%" stop-color="#1c1917" />
          </radialGradient>
        </defs>

        
        <path d="M 25,60 C 20,110 35,150 75,165 C 120,175 170,150 175,100 C 180,50 150,35 125,35" 
              fill="none" stroke="#ef4444" stroke-width="12" stroke-linecap="round" opacity="0.35" />
        <path d="M 25,60 C 20,110 35,150 75,165 C 120,175 170,150 175,100 C 180,50 150,35 125,35" 
              fill="none" stroke="#ef4444" stroke-width="4" stroke-linecap="round" opacity="0.9" />

        
        <path d="M 90,0 L 90,45 C 90,55 80,65 70,75 M 110,0 L 110,45 C 110,55 120,65 130,75" 
              fill="none" stroke="#cbd5e1" stroke-width="10" stroke-linecap="round" />

        
        <g class="healthy-cluster">
          
          <circle cx="78" cy="85" r="21" fill="url(#healthySac)" stroke="#f43f5e" stroke-width="1.5" />
          <circle cx="122" cy="85" r="21" fill="url(#healthySac)" stroke="#f43f5e" stroke-width="1.5" />
          <circle cx="100" cy="130" r="22" fill="url(#healthySac)" stroke="#f43f5e" stroke-width="1.5" />
          
          
          <circle cx="62" cy="112" r="22" fill="url(#healthySac)" stroke="#f43f5e" stroke-width="1.5" />
          <circle cx="138" cy="112" r="22" fill="url(#healthySac)" stroke="#f43f5e" stroke-width="1.5" />
          <circle cx="100" cy="98" r="23" fill="url(#healthySac)" stroke="#f43f5e" stroke-width="1.5" />
          
          
          <circle cx="100" cy="98" r="16" fill="none" stroke="#fda4af" stroke-width="1" stroke-dasharray="3,3" />
        </g>

        
        <g id="healthyOxygen">
          <circle class="o2-particle o2-p1" cx="65" cy="110" r="4.5" />
          <circle class="o2-particle o2-p2" cx="135" cy="110" r="4.5" />
          <circle class="o2-particle o2-p3" cx="100" cy="130" r="4.5" />
          <circle class="o2-particle o2-p4" cx="75" cy="85" r="4" />
        </g>

        
        <g class="smoke-layer" id="healthySmoke">
          <circle class="soot-particle soot-p1" cx="100" cy="20" r="6" fill="#475569" opacity="0.7" />
          <circle class="soot-particle soot-p2" cx="95" cy="40" r="8" fill="#ca8a04" opacity="0.6" />
          <circle class="soot-particle soot-p3" cx="105" cy="55" r="9" fill="#1e293b" opacity="0.7" />
          <circle class="soot-particle soot-p4" cx="100" cy="75" r="11" fill="#334155" opacity="0.7" />
        </g>
      </svg>

      <div class="badge badge-healthy">Many Sacs = Fast Oxygen</div>
    </div>

    
    <div class="alveoli-card">
      <div class="card-label tag-damaged">✕ Damaged Alveoli</div>
      
      <svg class="view-svg" viewBox="0 0 200 180" aria-label="Damaged Alveoli Diagram">
        
        <path d="M 25,60 C 20,110 35,150 75,165 C 120,175 170,150 175,100 C 180,50 150,35 125,35" 
              fill="none" stroke="#94a3b8" stroke-width="8" stroke-linecap="round" opacity="0.4" />
        <path d="M 25,60 C 20,110 35,150 75,165 C 120,175 170,150 175,100 C 180,50 150,35 125,35" 
              fill="none" stroke="#dc2626" stroke-width="2.5" stroke-linecap="round" opacity="0.6" />

        
        <path d="M 90,0 L 90,45 C 90,55 80,65 70,75 M 110,0 L 110,45 C 110,55 120,65 130,75" 
              fill="none" stroke="#94a3b8" stroke-width="10" stroke-linecap="round" />

        
        <g class="damaged-cluster">
          
          <path d="M 70,75 C 40,85 45,140 75,150 C 120,160 160,145 155,100 C 150,75 125,70 110,75 Z" 
                fill="#a8a29e" stroke="#78716c" stroke-width="2.5" />
          
          
          <path d="M 70,110 C 82,112 88,110 92,105" fill="none" stroke="#57534e" stroke-width="3" stroke-linecap="round" />
          <path d="M 145,115 C 132,114 125,120 120,126" fill="none" stroke="#57534e" stroke-width="3" stroke-linecap="round" />
          
          
          <path d="M 54,95 C 50,120 60,142 80,148" fill="none" stroke="#1c1917" stroke-width="7" stroke-linecap="round" />
          <path d="M 130,146 C 148,138 152,115 148,92" fill="none" stroke="#ca8a04" stroke-width="6" stroke-linecap="round" />
          <circle cx="102" cy="142" r="10" fill="url(#tarGrad)" opacity="0.9" />
        </g>

        
        <g id="damagedOxygen">
          
          <circle cx="96" cy="110" r="4.5" fill="#0284c7" opacity="0.4" />
          
          <circle class="o2-particle o2-p3" cx="100" cy="100" r="3.5" opacity="0.5" />
        </g>

        
        <g class="smoke-layer" id="damagedSmoke">
          <circle class="soot-particle soot-p1" cx="100" cy="20" r="7" fill="#1c1917" opacity="0.85" />
          <circle class="soot-particle soot-p2" cx="92" cy="45" r="9" fill="#ca8a04" opacity="0.75" />
          <circle class="soot-particle soot-p3" cx="108" cy="65" r="12" fill="#292524" opacity="0.8" />
          <circle class="soot-particle soot-p4" cx="100" cy="95" r="14" fill="#1c1917" opacity="0.85" />
        </g>
      </svg>

      <div class="badge badge-damaged">Broken Walls = Trapped Air</div>
    </div>

  </div>

  
  <div class="summary-bar">
    <div class="stat-item">
      <span>🎾</span>
      <span>Healthy Area: <b>Huge (~Tennis Court)</b></span>
    </div>
    <div class="stat-item">
      <span>⚠️</span>
      <span>Damaged: <b>Surface Area Lost</b></span>
    </div>
  </div>

  <script>
    const cleanBtn = document.getElementById('cleanBtn');
    const smokeBtn = document.getElementById('smokeBtn');
    const healthySmoke = document.getElementById('healthySmoke');
    const damagedSmoke = document.getElementById('damagedSmoke');
    const healthyOxygen = document.getElementById('healthyOxygen');
    const damagedOxygen = document.getElementById('damagedOxygen');

    function setMode(mode) {
      if (mode === 'smoke') {
        cleanBtn.classList.remove('active');
        cleanBtn.setAttribute('aria-selected', 'false');
        smokeBtn.classList.add('active');
        smokeBtn.setAttribute('aria-selected', 'true');

        healthySmoke.classList.add('active');
        damagedSmoke.classList.add('active');
        healthyOxygen.style.opacity = '0.4';
        damagedOxygen.style.opacity = '0.2';
      } else {
        smokeBtn.classList.remove('active');
        smokeBtn.setAttribute('aria-selected', 'false');
        cleanBtn.classList.add('active');
        cleanBtn.setAttribute('aria-selected', 'true');

        healthySmoke.classList.remove('active');
        damagedSmoke.classList.remove('active');
        healthyOxygen.style.opacity = '1';
        damagedOxygen.style.opacity = '1';
      }
    }

    cleanBtn.addEventListener('click', () => setMode('clean'));
    smokeBtn.addEventListener('click', () => setMode('smoke'));
  </script>
</body>
</html>

Skład chemiczny żywej materii — wprowadzenie

Węgiel — znaczenie biologiczne jako pierwiastek biogenny

Wodór — znaczenie biologiczne jako pierwiastek biogenny

Tlen — znaczenie biologiczne jako pierwiastek biogenny

Azot — znaczenie biologiczne jako pierwiastek biogenny

Fosfor — znaczenie biologiczne jako pierwiastek biogenny

Siarka — składnik białek i wytworów naskórka

Sześć głównych pierwiastków biogennych — reguła CHONPS

Makroelementy i mikroelementy — podział i proporcje w ciele

Ważne metale w organizmie — wapń, magnez, żelazo i sód

Skutki niedoboru i nadmiaru pierwiastków w organizmie

science

Pierwiastki biogenne i skład chemiczny organizmów

Alcohol and the Nervous System: Brain and Coordination Impacts

Caffeine, Energy Drinks, and Nervous System Stimulation

Safe Medication Use: Prescriptions and Dosage Rules

Recognizing Screen Overuse and Building Balanced Digital Habits

Restorative Sleep, Circadian Rhythms, and Brain Repair

Exercise, Stress Management, and Active Recreation

Substance Awareness, Body Health, and Wellness

Zdrowie jako dynamiczna równowaga organizmu

Choroba jako zaburzenie homeostazy organizmu

Czynniki sprzyjające utrzymaniu zdrowia — styl życia i dieta

Budowa i analiza informacji dołączanej do leku

Leki ogólnodostępne (OTC) a leki wydawane na receptę

Zagrożenia wynikające z nadużywania suplementów diety

Czym są antybiotyki i przeciw jakim patogenom działają

Zasady prawidłowej antybiotykoterapii — dawka i czas kuracji

Antybiotykooporność bakterii — przyczyny powstawania i globalne zagrożenie

Interakcje leków z żywnością i napojami

Profilaktyka zdrowotna — rola badań przesiewowych i szczepień ochronnych

Zdrowie, profilaktyka chorób i racjonalne stosowanie leków

Wpływ czynnego palenia tytoniu na drogi oddechowe

Palenie bierne — zagrożenia dla układu oddechowego

E-papierosy i wapowanie — zagrożenia chemiczne aerozoli

Wpływ smogu i pyłów zawieszonych (PM10, PM2.5) na oddychanie

Wpływ zanieczyszczeń powietrza i używek na układ oddechowy

Podział związków chemicznych w organizmach — organiczne i nieorganiczne

Woda jako główny składnik masy ciała organizmów

Woda jako uniwersalny rozpuszczalnik w komórce

Woda jako medium transportu substancji w organizmach

Woda — ciepło właściwe i termoregulacja organizmów

Napięcie powierzchniowe i właściwości mechaniczne wody

Woda jako substrat i produkt reakcji biochemicznych

Sole mineralne — podział na makro- i mikroelementy

Rola soli rozpuszczalnych i nierozpuszczalnych w organizmie

Regulacja gospodarki wodno-mineralnej i nawodnienie organizmu

Woda — znaczenie biologiczne, synteza wiedzy

Związki nieorganiczne — woda i sole mineralne

Białka jako główne cegiełki życia — aminokwasy

Różnorodne funkcje białek — budulcowe, enzymatyczne i odpornościowe

Enzymy jako katalizatory biologiczne — jak działają

Czynniki wpływające na białka — ścinanie i denaturacja

Kwasy nukleinowe — DNA i RNA, pojęcie i przegląd

Budowa podwójnej helisy DNA — nukleotydy i informacja

Porównanie głównych grup związków organicznych

Zbilansowana dieta a składniki organiczne

Białka i kwasy nukleinowe — struktura, enzymy i informacja genetyczna

Antagonistyczna praca mięśni — zginacze i prostowniki

Synergizm mięśniowy i koordynacja ruchowa

Współdziałanie mięśni, ścięgien, stawów i kości — pełny schemat

Współdziałanie mięśni w wykonywaniu ruchów złożonych

Układ ruchu — współdziałanie szkieletu i mięśni oraz biomechanika

Zmęczenie i regeneracja mięśni — rola odpoczynku i rozciągania

Podsumowanie i zadania z biomechaniki układu ruchu

Biomechanika i koordynacja układu ruchu

Wpływ aktywności fizycznej i prawidłowej postawy ciała

Prawidłowa postawa ciała i ergonomia miejsca nauki

Skrzywienia kręgosłupa — skolioza, nadmierna kifoza i lordoza

Płaskostopie — przyczyny, objawy, badanie i ćwiczenia korekcyjne

Krzywica u dzieci — niedobór witaminy D i wapnia w kościach

Osteoporoza — ubytek masy kostnej, czynniki ryzyka i dieta

Urazy mechaniczne — skręcenie, zwichnięcie i złamanie kości

Pierwsza pomoc w urazach kończyn — unieruchamianie i chłodzenie

Doping wydolnościowy a zagrożenia dla układu ruchu i zdrowia

Podsumowanie i studium przypadków — profilaktyka układu ruchu

Profilaktyka i schorzenia układu ruchu

Nieprawdziwe informacje w internecie i przestrzeni publicznej

Jak sprawdzać informacje — pytanie dorosłych

Bezpieczne korzystanie z komputera

Zasady netykiety — kultura w sieci

Ograniczenia czasu pracy z urządzeniami cyfrowymi

Zasady korzystania z technologii w szkole

Wpływ technologii na zdrowie — nadmiar ekranów

Pozytywne znaczenie technologii w życiu człowieka

Technologia w życiu człowieka

Rola autonomicznego (wegetatywnego) układu nerwowego

Część współczulna (sympatyczna) — reakcja „walcz lub uciekaj”

Część przywspółczulna (parasympatyczna) — odpoczynek i trawienie

Porównanie działania części współczulnej i przywspółczulnej

Czym jest stres — eustres, dystres i reakcja adaptacyjna

Hormony stresu — współdziałanie układu nerwowego i nadnerczy

Wpływ przewlekłego stresu na odporność, serce i samopoczucie

Zdrowie psychiczne — stres i strategie radzenia sobie

Konstruktywne radzenie sobie ze stresem — metody i zasady

Wsparcie społeczne, pasje i odpoczynek w redukcji stresu

Mój plan radzenia sobie ze stresem przed sprawdzianem i egzaminem

Autonomiczny układ nerwowy i radzenie sobie ze stresem

Co to jest zdrowie — definicja i wymiary

Czym jest choroba — rodzaje i przyczyny

Choroby zakaźne — jak się rozprzestrzeniają

Higiena a zapobieganie chorobom — mycie rąk

Szczepienia ochronne — dlaczego są ważne

Zdrowa dieta jako zapobieganie chorobom

Ruch i aktywność fizyczna w profilaktyce chorób

Zdrowie i zapobieganie chorobom — podstawy

Stres a zdrowie — jak radzić sobie z napięciem

Słońce a zdrowie — ochrona przed promieniowaniem

Zanieczyszczenia powietrza a zdrowie

Zachowania zagrażające zdrowiu — przykłady z życia nastolatków

Czynniki wpływające na zdrowie

Łuk odruchowy — elementy i droga impulsu nerwowego

Odruchy bezwarunkowe (wrodzone) — obrona i automatyzm

Odruchy warunkowe (nabyte) — mechanizm powstawania i Pawłow

Porównanie odruchów bezwarunkowych i warunkowych

Obserwacja odruchu kolanowego — badanie odruchu monosynaptycznego

Inne odruchy obronne — mruganie, kichanie, kaszel i odruch źreniczny

Fizjologia snu — fazy NREM i REM oraz regeneracja mózgu

Konsolidacja pamięci i oczyszczanie mózgu podczas snu

Skutki niedoboru snu (deprywacji) dla nauki i nastroju

Zasady higieny snu — melatonina, niebieskie światło i rytm dobowy

Podsumowanie — odruchy, nawyki i regeneracja układu nerwowego

Odruchy, łuk odruchowy i fizjologia snu

Co to jest zdrowy styl życia — definicja i elementy

Sen i regeneracja — znaczenie dla zdrowia organizmu

Higiena osobista i otoczenia jako bariera przeciw zarazkom

Wpływ diety i nawodnienia na odporność i rozwój

Zagrożenia ze strony używek — nikotyna, alkohol, energetyki

Higiena pracy przy ekranach i odpoczynek psychiczny

Profilaktyka chorób zakaźnych — szczepienia i odporność

Sytuacje wymagające konsultacji lekarskiej — rozpoznawanie

Podstawy pierwszej pomocy — skaleczenia, krwawienia i alarmowanie

Analiza własnego postępowania — mój plan prozdrowotny

Własne zdrowie, profilaktyka i pierwsza pomoc

Co to jest stan zagrożenia życia?

Reagowanie w sytuacjach zagrożenia bezpieczeństwa

Zagrożenia w różnych środowiskach i zapewnienie bezpieczeństwa

Bezpieczeństwo podczas burzy i piorunów — praktyka

Bezpieczeństwo nad wodą i w górach — zasady

Numery alarmowe i wezwanie pomocy — praktyka

Mój plan zdrowia — zapobieganie chorobom

Bezpieczeństwo i reagowanie w sytuacjach zagrożenia

¿Qué son las sustancias estimulantes y cómo actúan?

Efectos fisiológicos del consumo excesivo de cafeína y bebidas energizantes

El humo del tabaco y el daño al sistema respiratorio

Los cigarrillos electrónicos y vapeadores: mitos y realidades

El fumador pasivo y el derecho a espacios libres de humo

El alcohol y sus efectos en el cerebro y los reflejos

El impacto del consumo de licor en el hígado y el cuerpo

¿Qué son las drogas ilícitas y cómo generan adicción?

Presión social, asertividad y habilidades para decir ¡no!

Mitos populares sobre el consumo de sustancias estimulantes

Redes de apoyo familiar, escolar y líneas de orientación

Prevención, sustancias nocivas y autocuidado

Substancje psychoaktywne — definicja, podział i układ nagrody

Alkohol etylowy — mechanizm działania jako depresant

Nikotyna i e-papierosy — wpływ na mózg rozwijającego się nastolatka

Marihuana — działanie, skutki i zagrożenia zdrowotne

Amfetaminy i kokaina — mechanizm działania i zagrożenia

Dopalacze — mechanizm działania i zagrożenia zdrowotne

Substancje psychoaktywne, alkohol i narkotyki a układ nerwowy

El corazón y los pulmones durante el ejercicio físico

Fortalecimiento de huesos y músculos a través del movimiento

La química de la felicidad: endorfinas y reducción del estrés

Salud mental, autoestima y gestión del estrés escolar

Deportes de equipo: cooperación, respeto y trabajo colaborativo

Riesgos del sedentarismo y el exceso de tiempo frente a pantallas

La hidratación en el deporte: ¿por qué debemos tomar agua?

Nutrición balanceada para la actividad física diaria

Sueño reparador y descanso: el cuerpo se repara de noche

Prevención del acoso escolar y burlas hacia cambios físicos

Diseño de un plan semanal de actividad física y juegos activos

Actividad física, deporte y bienestar integral

Środki dopingujące — sterydy anaboliczne a zachowanie i mózg

Nadużywanie kofeiny i napojów energetyzujących

Lekomania — zagrożenia samowolnego zażywania leków uspokajających i przeciwbólowych

Uzależnienia behawioralne — gry cyfrowe, smartfony i social media

Asertywność i profilaktyka — jak odmawiać w sytuacjach presji rówieśniczej

Wpływ substancji psychoaktywnych na układ nerwowy — podsumowanie

Doping, leki, uzależnienia behawioralne i profilaktyka

Rola głównych składników krwi — krwinki, płytki i osocze

Zasady zgodności grup krwi i znaczenie krwiodawstwa

Doświadczenie: wpływ wysiłku fizycznego na tętno i ciśnienie tętnicze

Wpływ aktywności fizycznej i prawidłowej diety na układ krążenia

Anemia (niedokrwistość) — przyczyny, rola żelaza i profilaktyka

Białaczki — zaburzenia układu krwiotwórczego i szpiku kostnego

Choroby układu krążenia — miażdżyca, nadciśnienie tętnicze i zawał serca

OGS.4.HSS.3

Aligned learning resources

Related diagrams