<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Two Ways Food Is Broken Down</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #0f172a;
      background: transparent;
      padding: 8px 10px;
      user-select: none;
      -webkit-user-select: none;
      max-width: 720px;
      margin: 0 auto;
    }

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

    .main-title {
      font-size: 16px;
      font-weight: 800;
      color: #0f172a;
      letter-spacing: -0.2px;
    }

    .main-subtitle {
      font-size: 11px;
      color: #475569;
      font-weight: 500;
      margin-top: 1px;
    }

    .main-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 8px;
    }

    @media (max-width: 480px) {
      .main-grid {
        grid-template-columns: 1fr;
        gap: 8px;
      }
      .main-title { font-size: 15px; }
      body { padding: 6px 8px; }
    }

    .panel {
      background: #ffffff;
      border-radius: 10px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      position: relative;
      min-height: 180px;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    }

    .panel-mech {
      border: 2px solid #f59e0b;
      background: linear-gradient(180deg, #fffbeb 0%, #ffffff 40%);
    }

    .panel-chem {
      border: 2px solid #8b5cf6;
      background: linear-gradient(180deg, #f5f3ff 0%, #ffffff 40%);
    }

    .panel-header-block {
      text-align: center;
      width: 100%;
      margin-bottom: 4px;
    }

    .panel-title {
      font-size: 13px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .title-mech { color: #b45309; }
    .title-chem { color: #6d28d9; }

    .pedagogical-rule {
      font-size: 11px;
      font-weight: 600;
      line-height: 1.25;
      margin-top: 2px;
      padding: 2px 4px;
      border-radius: 4px;
    }

    .rule-mech {
      color: #92400e;
      background: rgba(245, 158, 11, 0.12);
    }

    .rule-chem {
      color: #5b21b6;
      background: rgba(139, 92, 246, 0.12);
    }

    .stage-view {
      position: relative;
      width: 100%;
      height: 76px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      margin: 4px 0;
    }

    /* Mechanical visual elements */
    .tooth-top, .tooth-bottom {
      position: absolute;
      width: 60px;
      height: 16px;
      background: #ffffff;
      border: 2px solid #94a3b8;
      z-index: 5;
      transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .tooth-top {
      top: 0;
      border-radius: 0 0 8px 8px;
      border-top: none;
      box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    }
    .tooth-bottom {
      bottom: 0;
      border-radius: 8px 8px 0 0;
      border-bottom: none;
      box-shadow: 0 -2px 4px rgba(0,0,0,0.08);
    }

    .biting .tooth-top { transform: translateY(22px); }
    .biting .tooth-bottom { transform: translateY(-22px); }

    .food-large {
      width: 44px;
      height: 44px;
      background: #d97706;
      border: 2px solid #b45309;
      border-radius: 8px;
      transition: all 0.28s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: inset 0 -4px 0 rgba(0,0,0,0.18);
    }

    .chunks-group {
      display: grid;
      grid-template-columns: repeat(2, 18px);
      gap: 6px;
      opacity: 0;
      transform: scale(0.6);
      transition: all 0.28s ease;
      position: absolute;
    }

    .chunk {
      width: 18px;
      height: 18px;
      background: #d97706;
      border: 1.5px solid #b45309;
      border-radius: 4px;
      box-shadow: inset 0 -2px 0 rgba(0,0,0,0.18);
    }

    .state-chopped .food-large {
      opacity: 0;
      transform: scale(0.3);
    }
    .state-chopped .chunks-group {
      opacity: 1;
      transform: scale(1);
    }

    /* Chemical visual elements */
    .complex-molecule {
      display: flex;
      align-items: center;
      gap: 3px;
      transition: all 0.3s ease;
    }

    .mol-node {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #7c3aed;
      border: 2px solid #5b21b6;
      box-shadow: inset -2px -2px 0 rgba(0,0,0,0.25);
    }

    .mol-bond {
      width: 8px;
      height: 4px;
      background: #a78bfa;
      border-radius: 2px;
    }

    .enzymes-container {
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.25s ease;
    }

    .enzyme-drop {
      position: absolute;
      width: 14px;
      height: 14px;
      border-radius: 50% 50% 50% 0;
      transform: rotate(-45deg);
      background: #0284c7;
      border: 1px solid #0369a1;
      box-shadow: 0 0 6px rgba(2, 132, 199, 0.6);
    }

    .simple-nutrients {
      position: absolute;
      display: flex;
      gap: 14px;
      opacity: 0;
      transform: scale(0.5);
      transition: all 0.3s ease;
    }

    .nutrient-particle {
      width: 13px;
      height: 13px;
      border-radius: 50%;
      background: #10b981;
      border: 2px solid #047857;
      box-shadow: 0 0 6px rgba(16, 185, 129, 0.7);
    }

    .state-enzymes .enzymes-container { opacity: 1; }
    .state-digested .complex-molecule { opacity: 0; transform: scale(0.2); }
    .state-digested .simple-nutrients { opacity: 1; transform: scale(1); }

    /* Interactive Buttons */
    .btn {
      width: 100%;
      padding: 6px 10px;
      border-radius: 6px;
      border: 1.5px solid transparent;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
    }
    .btn:active { opacity: 0.85; }
    .btn-mech {
      background: #fef3c7;
      color: #92400e;
      border-color: #fde68a;
    }
    .btn-mech:hover { background: #fde68a; }
    .btn-chem {
      background: #ede9fe;
      color: #5b21b6;
      border-color: #ddd6fe;
    }
    .btn-chem:hover { background: #ddd6fe; }

    /* Convergence Bottom Banner */
    .absorption-bar {
      background: #ffffff;
      border: 2px solid #059669;
      border-radius: 10px;
      padding: 8px 10px;
      box-shadow: 0 1px 4px rgba(5, 150, 105, 0.1);
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .bar-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 4px;
    }

    .bar-title-group {
      display: flex;
      align-items: baseline;
      gap: 6px;
    }

    .bar-title {
      font-size: 13px;
      font-weight: 800;
      color: #065f46;
      text-transform: uppercase;
      letter-spacing: 0.4px;
    }

    .bar-subtitle {
      font-size: 11px;
      font-weight: 600;
      color: #047857;
    }

    .btn-together {
      background: #059669;
      color: #ffffff;
      border: 1px solid #047857;
      padding: 5px 10px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      transition: background-color 0.15s ease, opacity 0.15s ease;
    }
    .btn-together:hover { background: #047857; }
    .btn-together:active { opacity: 0.85; }

    /* Absorption Flow Stage */
    .stream-stage {
      position: relative;
      height: 60px;
      background: #f8fafc;
      border-radius: 8px;
      border: 1.5px solid #cbd5e1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      overflow: hidden;
    }

    .zone-gut {
      background: #f0fdf4;
      display: flex;
      align-items: flex-start;
      padding: 4px 6px;
      position: relative;
    }

    .zone-blood {
      background: #ffe4e6;
      display: flex;
      align-items: flex-start;
      justify-content: flex-end;
      padding: 4px 8px;
      position: relative;
      border-left: 3px dashed #e11d48;
    }

    .zone-badge {
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.3px;
      padding: 1px 5px;
      border-radius: 3px;
      z-index: 3;
    }

    .badge-gut {
      background: #dcfce7;
      color: #166534;
      border: 1px solid #86efac;
    }

    .badge-blood {
      background: #fecdd3;
      color: #9f1239;
      border: 1px solid #fda4af;
    }

    /* Clear Gut Wall Marker - avoids text overlaps */
    .membrane-marker {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 22px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 4;
      pointer-events: none;
    }

    .wall-tag {
      background: #0f172a;
      color: #ffffff;
      font-size: 8px;
      font-weight: 800;
      text-transform: uppercase;
      padding: 1px 3px;
      border-radius: 3px;
      white-space: nowrap;
      letter-spacing: 0.2px;
      margin-bottom: 2px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.25);
    }

    .wall-pores {
      width: 4px;
      height: 38px;
      background: repeating-linear-gradient(
        to bottom,
        #f59e0b 0px,
        #f59e0b 5px,
        transparent 5px,
        transparent 9px
      );
      border-radius: 2px;
    }

    /* Particles in Absorption Flow */
    .flow-particle {
      position: absolute;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #10b981;
      border: 2px solid #047857;
      box-shadow: 0 0 5px rgba(16, 185, 129, 0.8);
      left: 20%;
      opacity: 0.9;
      z-index: 6;
      transition: left 1.1s cubic-bezier(0.34, 1.3, 0.64, 1), background-color 0.8s ease, border-color 0.8s ease, box-shadow 0.8s ease;
    }

    .flow-particle.p1 { top: 12px; }
    .flow-particle.p2 { top: 26px; left: 14%; }
    .flow-particle.p3 { top: 40px; left: 24%; }

    .absorbed .flow-particle.p1 {
      left: 74%;
      background: #e11d48;
      border-color: #9f1239;
      box-shadow: 0 0 6px rgba(225, 29, 72, 0.8);
    }
    .absorbed .flow-particle.p2 {
      left: 82%;
      background: #e11d48;
      border-color: #9f1239;
      box-shadow: 0 0 6px rgba(225, 29, 72, 0.8);
    }
    .absorbed .flow-particle.p3 {
      left: 68%;
      background: #e11d48;
      border-color: #9f1239;
      box-shadow: 0 0 6px rgba(225, 29, 72, 0.8);
    }
  </style>
</head>
<body>

  <header class="main-header">
    <h1 class="main-title">Two Ways Food Is Broken Down</h1>
    <p class="main-subtitle">Physical vs. Chemical processes working together for nutrient absorption</p>
  </header>

  <div class="main-grid">
    
    <div class="panel panel-mech" id="panelMech">
      <div class="panel-header-block">
        <div class="panel-title title-mech">Mechanical Breakdown</div>
        <div class="pedagogical-rule rule-mech">Changes size &amp; shape, not the substance</div>
      </div>
      
      <div class="stage-view" id="stageMech">
        <div class="tooth-top"></div>
        <div class="food-large" title="Large Food Chunk"></div>
        <div class="chunks-group">
          <div class="chunk"></div>
          <div class="chunk"></div>
          <div class="chunk"></div>
          <div class="chunk"></div>
        </div>
        <div class="tooth-bottom"></div>
      </div>

      <button class="btn btn-mech" id="btnMech">
        <span>🦷</span> Chomp!
      </button>
    </div>

    
    <div class="panel panel-chem" id="panelChem">
      <div class="panel-header-block">
        <div class="panel-title title-chem">Chemical Breakdown</div>
        <div class="pedagogical-rule rule-chem">Turns complex molecules into simple nutrients</div>
      </div>
      
      <div class="stage-view" id="stageChem">
        <div class="complex-molecule" title="Complex Starch / Protein">
          <div class="mol-node"></div>
          <div class="mol-bond"></div>
          <div class="mol-node"></div>
          <div class="mol-bond"></div>
          <div class="mol-node"></div>
        </div>

        <div class="enzymes-container">
          <div class="enzyme-drop" style="top:12px; left:22%;"></div>
          <div class="enzyme-drop" style="top:16px; right:22%;"></div>
          <div class="enzyme-drop" style="bottom:12px; left:46%;"></div>
        </div>

        <div class="simple-nutrients" title="Simple Soluble Nutrients">
          <div class="nutrient-particle"></div>
          <div class="nutrient-particle"></div>
          <div class="nutrient-particle"></div>
        </div>
      </div>

      <button class="btn btn-chem" id="btnChem">
        <span>💧</span> Add Saliva &amp; Enzymes
      </button>
    </div>
  </div>

  
  <div class="absorption-bar" id="absorptionBar">
    <div class="bar-header">
      <div class="bar-title-group">
        <span class="bar-title">Outcome: Ready for Absorption</span>
        <span class="bar-subtitle">(Soluble nutrients enter blood)</span>
      </div>
      <button class="btn-together" id="btnTogether">
        <span>▶</span> See Both Work Together
      </button>
    </div>

    <div class="stream-stage" id="streamWrapper">
      <div class="zone-gut">
        <span class="zone-badge badge-gut">Gut Cavity</span>
      </div>

      <div class="membrane-marker">
        <span class="wall-tag">Gut Wall</span>
        <div class="wall-pores" title="Semi-permeable membrane"></div>
      </div>

      <div class="zone-blood">
        <span class="zone-badge badge-blood">Bloodstream</span>
      </div>

      <div class="flow-particle p1"></div>
      <div class="flow-particle p2"></div>
      <div class="flow-particle p3"></div>
    </div>
  </div>

  <script>
    const stageMech = document.getElementById('stageMech');
    const stageChem = document.getElementById('stageChem');
    const streamWrapper = document.getElementById('streamWrapper');
    const btnMech = document.getElementById('btnMech');
    const btnChem = document.getElementById('btnChem');
    const btnTogether = document.getElementById('btnTogether');

    let audioCtx = null;
    function getAudioContext() {
      if (!audioCtx) {
        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      }
      if (audioCtx.state === 'suspended') {
        audioCtx.resume();
      }
      return audioCtx;
    }

    function playSound(type) {
      try {
        const ctx = getAudioContext();
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.connect(gain);
        gain.connect(ctx.destination);

        const now = ctx.currentTime;

        if (type === 'crunch') {
          osc.type = 'triangle';
          osc.frequency.setValueAtTime(160, now);
          osc.frequency.exponentialRampToValueAtTime(35, now + 0.12);
          gain.gain.setValueAtTime(0.35, now);
          gain.gain.exponentialRampToValueAtTime(0.01, now + 0.12);
          osc.start(now);
          osc.stop(now + 0.12);
        } else if (type === 'fizz') {
          osc.type = 'sine';
          osc.frequency.setValueAtTime(540, now);
          osc.frequency.exponentialRampToValueAtTime(920, now + 0.22);
          gain.gain.setValueAtTime(0.25, now);
          gain.gain.exponentialRampToValueAtTime(0.01, now + 0.25);
          osc.start(now);
          osc.stop(now + 0.25);
        } else if (type === 'absorb') {
          osc.type = 'sine';
          osc.frequency.setValueAtTime(340, now);
          osc.frequency.exponentialRampToValueAtTime(680, now + 0.35);
          gain.gain.setValueAtTime(0.25, now);
          gain.gain.exponentialRampToValueAtTime(0.01, now + 0.38);
          osc.start(now);
          osc.stop(now + 0.38);
        }
      } catch (e) {}
    }

    let isMechChopped = false;
    function triggerMechanical(playAudio = true) {
      if (playAudio) playSound('crunch');
      stageMech.classList.add('biting');
      setTimeout(() => {
        isMechChopped = !isMechChopped;
        stageMech.classList.toggle('state-chopped', isMechChopped);
        stageMech.classList.remove('biting');
      }, 180);
    }

    let isChemDigested = false;
    function triggerChemical(playAudio = true) {
      if (playAudio) playSound('fizz');
      stageChem.classList.add('state-enzymes');
      setTimeout(() => {
        isChemDigested = !isChemDigested;
        stageChem.classList.toggle('state-digested', isChemDigested);
        stageChem.classList.remove('state-enzymes');
      }, 300);
    }

    function triggerAbsorption(playAudio = true) {
      if (playAudio) playSound('absorb');
      streamWrapper.classList.toggle('absorbed');
    }

    btnMech.addEventListener('click', () => triggerMechanical(true));
    btnChem.addEventListener('click', () => triggerChemical(true));
    streamWrapper.addEventListener('click', () => triggerAbsorption(true));

    let isSequenceRunning = false;
    btnTogether.addEventListener('click', () => {
      if (isSequenceRunning) return;
      isSequenceRunning = true;
      btnTogether.style.opacity = '0.6';

      // Reset states first for clean sequence
      isMechChopped = false;
      isChemDigested = false;
      stageMech.classList.remove('state-chopped', 'biting');
      stageChem.classList.remove('state-digested', 'state-enzymes');
      streamWrapper.classList.remove('absorbed');

      // Step 1: Mechanical Chomp
      setTimeout(() => {
        triggerMechanical(true);
      }, 250);

      // Step 2: Chemical Enzyme Action
      setTimeout(() => {
        triggerChemical(true);
      }, 1050);

      // Step 3: Absorption into Bloodstream
      setTimeout(() => {
        triggerAbsorption(true);
      }, 1900);

      setTimeout(() => {
        isSequenceRunning = false;
        btnTogether.style.opacity = '1';
      }, 3000);
    });
  </script>
</body>
</html>

What Is Digestion?

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

    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;
      justify-content: center;
      min-height: 100vh;
      padding: 12px;
    }

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

    /* Step Navigation Controls */
    .controls {
      display: flex;
      align-items: center;
      gap: 6px;
      width: 100%;
      z-index: 10;
    }

    .step-btn {
      flex: 1;
      padding: 10px 6px;
      font-size: 12px;
      font-weight: 600;
      color: #1e2945;
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
      white-space: nowrap;
    }

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

    .step-btn.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #22b7ff;
      box-shadow: 0 2px 8px rgba(34, 183, 255, 0.35);
    }

    .play-btn {
      width: 38px;
      height: 38px;
      padding: 0;
      flex: 0 0 38px;
      border-radius: 8px;
      background: #ffffff;
      border: 1px solid #e6e6e6;
      color: #1e2945;
      font-size: 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.3s ease, border-color 0.3s ease;
    }

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

    /* Main Stage */
    .diagram-area {
      position: relative;
      width: 100%;
      height: 260px;
      background: #ffffff;
      border-radius: 12px;
      border: 1px solid #e6e6e6;
      overflow: hidden;
      display: flex;
    }

    /* Digestive Tract Section */
    .chamber-gut {
      flex: 6;
      background: #fafbfc;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    /* Bloodstream Section */
    .chamber-blood {
      flex: 4;
      background: #fff1f2;
      position: relative;
      border-left: 2px dashed #fda4af;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    /* Clean Corner Headers */
    .chamber-header {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 32px;
      padding: 8px 12px;
      z-index: 15;
      display: flex;
      align-items: center;
      pointer-events: none;
    }

    .chamber-gut .chamber-header {
      justify-content: flex-start;
      background: linear-gradient(180deg, rgba(250, 251, 252, 0.95) 0%, rgba(250, 251, 252, 0) 100%);
    }

    .chamber-blood .chamber-header {
      justify-content: flex-end;
      background: linear-gradient(180deg, rgba(255, 241, 242, 0.95) 0%, rgba(255, 241, 242, 0) 100%);
    }

    .label {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.6px;
      text-transform: uppercase;
    }
    
    .gut-label {
      color: #475569;
    }
    
    .blood-label {
      color: #991b1b;
    }

    /* Permeable Barrier (Gut Wall) */
    .gut-wall {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      width: 14px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      z-index: 8;
    }

    .wall-cell {
      width: 8px;
      height: 15%;
      background: #e2e8f0;
      border-radius: 4px;
      border: 1px solid #94a3b8;
    }

    /* Bloodstream Flow & Cells */
    .blood-stream-track {
      position: absolute;
      top: 32px;
      bottom: 0;
      left: 0;
      right: 0;
      overflow: hidden;
    }

    .blood-stream-flow {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 200%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      animation: bloodFlow 8s linear infinite;
    }

    .rbc {
      width: 22px;
      height: 22px;
      background: #e11d48;
      border: 2px solid #9f1239;
      border-radius: 50%;
      box-shadow: inset 0 2px 4px rgba(0,0,0,0.25);
    }

    @keyframes bloodFlow {
      0% { transform: translateY(0); }
      100% { transform: translateY(-50%); }
    }

    /* Stage Content Placement (Centered below header) */
    .stage-content {
      position: absolute;
      top: 32px;
      left: 0;
      right: 14px;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.6s ease, visibility 0.6s ease;
      z-index: 6;
    }

    .stage-content.active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    /* Step 1: Whole Food */
    .whole-food {
      font-size: 54px;
      filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
      animation: gentleFloat 3.5s ease-in-out infinite alternate;
    }

    /* Step 2: Chewed Chunks */
    .chunks-grid {
      display: grid;
      grid-template-columns: repeat(2, 44px);
      grid-template-rows: repeat(2, 44px);
      gap: 12px;
      align-items: center;
      justify-items: center;
    }

    .chunk {
      font-size: 28px;
      line-height: 1;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08));
      animation: chunkJiggle 3s ease-in-out infinite alternate;
    }

    .chunk:nth-child(1) { animation-delay: 0s; }
    .chunk:nth-child(2) { animation-delay: 0.7s; }
    .chunk:nth-child(3) { animation-delay: 1.4s; }
    .chunk:nth-child(4) { animation-delay: 2.1s; }

    /* Step 3: Microscopic Nutrients Overlay */
    .particles-stage {
      position: absolute;
      top: 32px;
      left: 0;
      right: 0;
      bottom: 0;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.6s ease, visibility 0.6s ease;
      z-index: 10;
    }

    .particles-stage.active {
      opacity: 1;
      visibility: visible;
    }

    .nutrient-dot {
      position: absolute;
      width: 11px;
      height: 11px;
      background: #0284c7;
      border: 2px solid #ffffff;
      border-radius: 50%;
      box-shadow: 0 0 8px #22b7ff, 0 0 14px rgba(34, 183, 255, 0.9);
      animation: absorbPass 3.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }

    /* Staggered particle pathways */
    .nutrient-dot:nth-child(1) { top: 22%; animation-delay: 0.0s; }
    .nutrient-dot:nth-child(2) { top: 38%; animation-delay: 0.5s; }
    .nutrient-dot:nth-child(3) { top: 54%; animation-delay: 1.0s; }
    .nutrient-dot:nth-child(4) { top: 70%; animation-delay: 1.5s; }
    .nutrient-dot:nth-child(5) { top: 30%; animation-delay: 2.0s; }
    .nutrient-dot:nth-child(6) { top: 62%; animation-delay: 2.5s; }

    @keyframes absorbPass {
      0% {
        left: 20%;
        opacity: 0;
        transform: scale(0.7);
      }
      18% {
        opacity: 1;
        transform: scale(1);
      }
      58% {
        left: 58%;
      }
      80% {
        left: 80%;
        opacity: 1;
      }
      100% {
        left: 90%;
        top: 15%;
        opacity: 0;
        transform: scale(0.8);
      }
    }

    @keyframes gentleFloat {
      0% { transform: translateY(-4px); }
      100% { transform: translateY(4px); }
    }

    @keyframes chunkJiggle {
      0% { transform: translate(0, 0); }
      50% { transform: translate(2px, -2px); }
      100% { transform: translate(-2px, 2px); }
    }

    /* Informative Status Text */
    .status-bar {
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 8px;
      padding: 10px 14px;
      text-align: center;
      min-height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: color 0.5s ease;
    }

    @media (max-width: 380px) {
      .step-btn {
        font-size: 11px;
        padding: 8px 3px;
      }
      .label {
        font-size: 10px;
      }
      .status-bar {
        font-size: 12px;
      }
    }
  </style>
</head>
<body>

  <div class="main-container">
    
    <div class="controls">
      <button class="step-btn active" id="btn-0">1. Whole Food</button>
      <button class="step-btn" id="btn-1">2. Chewed</button>
      <button class="step-btn" id="btn-2">3. Absorbed</button>
      <button class="play-btn" id="playBtn" title="Pause Auto-play" aria-label="Pause Auto-play">⏸</button>
    </div>

    
    <div class="diagram-area">
      
      <div class="chamber-gut">
        <div class="chamber-header">
          <span class="label gut-label">Digestive Tract</span>
        </div>

        <div class="gut-wall">
          <div class="wall-cell"></div>
          <div class="wall-cell"></div>
          <div class="wall-cell"></div>
          <div class="wall-cell"></div>
          <div class="wall-cell"></div>
        </div>

        
        <div class="stage-content active" id="stage-0">
          <div class="whole-food" role="img" aria-label="Whole sandwich">🥪</div>
        </div>

        
        <div class="stage-content" id="stage-1">
          <div class="chunks-grid">
            <div class="chunk" role="img" aria-label="Bread piece">🍞</div>
            <div class="chunk" role="img" aria-label="Cheese piece">🧀</div>
            <div class="chunk" role="img" aria-label="Lettuce piece">🥬</div>
            <div class="chunk" role="img" aria-label="Tomato piece">🍅</div>
          </div>
        </div>
      </div>

      
      <div class="chamber-blood">
        <div class="chamber-header">
          <span class="label blood-label">Bloodstream</span>
        </div>
        
        <div class="blood-stream-track">
          <div class="blood-stream-flow">
            <div class="rbc"></div>
            <div class="rbc"></div>
            <div class="rbc"></div>
            <div class="rbc"></div>
            <div class="rbc"></div>
            <div class="rbc"></div>
            <div class="rbc"></div>
            <div class="rbc"></div>
          </div>
        </div>
      </div>

      
      <div class="particles-stage" id="stage-2">
        <div class="nutrient-dot"></div>
        <div class="nutrient-dot"></div>
        <div class="nutrient-dot"></div>
        <div class="nutrient-dot"></div>
        <div class="nutrient-dot"></div>
        <div class="nutrient-dot"></div>
      </div>
    </div>

    
    <div class="status-bar" id="statusText">Step 1: Whole food is too large to pass through the gut wall.</div>
  </div>

  <script>
    const stages = [
      { text: "Step 1: Whole food is too large to pass through the gut wall." },
      { text: "Step 2: Chewed food is smaller, but still cannot pass through." },
      { text: "Step 3: Microscopic nutrients pass through into the bloodstream." }
    ];

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

    const btns = [
      document.getElementById('btn-0'),
      document.getElementById('btn-1'),
      document.getElementById('btn-2')
    ];

    const stageEls = [
      document.getElementById('stage-0'),
      document.getElementById('stage-1'),
      document.getElementById('stage-2')
    ];

    const statusText = document.getElementById('statusText');
    const playBtn = document.getElementById('playBtn');

    function showStep(index) {
      currentStep = index;
      btns.forEach((b, i) => b.classList.toggle('active', i === index));
      stageEls.forEach((s, i) => s.classList.toggle('active', i === index));
      statusText.textContent = stages[index].text;
    }

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

    function startAutoPlay() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, 3800);
      isPlaying = true;
      playBtn.textContent = '⏸';
      playBtn.setAttribute('title', 'Pause Auto-play');
      playBtn.setAttribute('aria-label', 'Pause Auto-play');
    }

    function pauseAutoPlay() {
      if (timer) clearInterval(timer);
      isPlaying = false;
      playBtn.textContent = '▶';
      playBtn.setAttribute('title', 'Play Auto-play');
      playBtn.setAttribute('aria-label', 'Play Auto-play');
    }

    btns.forEach((btn, index) => {
      btn.addEventListener('click', () => {
        showStep(index);
        pauseAutoPlay();
      });
    });

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

    // Start smooth playback
    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">
  <title>What Nutrients Do</title>
  <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: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 16px 12px;
      overflow-x: hidden;
      user-select: none;
      -webkit-user-select: none;
    }

    .canvas-wrap {
      position: relative;
      width: 100%;
      max-width: 540px;
      height: 320px;
      margin: 0 auto;
    }

    /* SVG Connecting Lines */
    .flow-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
    }

    .path-line {
      fill: none;
      stroke: #cbd5e1;
      stroke-width: 4;
      stroke-linecap: round;
      stroke-dasharray: 6 6;
      transition: stroke 0.3s ease, stroke-width 0.3s ease;
    }

    .path-active-energy {
      stroke: #f59e0b;
      stroke-width: 5;
      animation: dashMove 1.5s linear infinite;
    }

    .path-active-growth {
      stroke: #10b981;
      stroke-width: 5;
      animation: dashMove 1.5s linear infinite;
    }

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

    /* Central Hub: Nutrients */
    .center-hub {
      position: absolute;
      top: 14%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 3;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      cursor: pointer;
    }

    .nutrient-badge {
      width: 68px;
      height: 68px;
      border-radius: 50%;
      background: #ffffff;
      border: 3px solid #3b82f6;
      box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      position: relative;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .nutrient-badge::after {
      content: '';
      position: absolute;
      inset: -6px;
      border-radius: 50%;
      border: 2px dashed #93c5fd;
      animation: spin 12s linear infinite;
    }

    @keyframes spin {
      100% { transform: rotate(360deg); }
    }

    .hub-label {
      font-size: 14px;
      font-weight: 700;
      color: #1e3a8a;
      background: #eff6ff;
      padding: 3px 10px;
      border-radius: 12px;
      border: 1px solid #bfdbfe;
      letter-spacing: 0.2px;
    }

    /* Destination Nodes */
    .dest-card {
      position: absolute;
      bottom: 6%;
      width: 44%;
      max-width: 220px;
      background: #ffffff;
      border-radius: 16px;
      padding: 12px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      z-index: 3;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
      border: 2px solid transparent;
      transition: all 0.3s ease;
      cursor: pointer;
    }

    .dest-card.energy {
      left: 3%;
      border-color: #fde68a;
    }

    .dest-card.growth {
      right: 3%;
      border-color: #a7f3d0;
    }

    .dest-card.active.energy {
      border-color: #f59e0b;
      box-shadow: 0 6px 18px rgba(245, 158, 11, 0.25);
      background: #fffbeb;
      transform: translateY(-4px);
    }

    .dest-card.active.growth {
      border-color: #10b981;
      box-shadow: 0 6px 18px rgba(16, 185, 129, 0.25);
      background: #ecfdf5;
      transform: translateY(-4px);
    }

    .dest-card.dimmed {
      opacity: 0.45;
      transform: scale(0.96);
    }

    .dest-title {
      font-size: 14px;
      font-weight: 700;
      text-align: center;
      line-height: 1.2;
    }

    .energy .dest-title { color: #b45309; }
    .growth .dest-title { color: #047857; }

    .icon-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }

    .icon-pill {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      transition: transform 0.2s ease;
    }

    .active .icon-pill {
      transform: scale(1.08);
      background: #ffffff;
    }

    /* Interactive Buttons */
    .controls {
      display: flex;
      justify-content: center;
      gap: 8px;
      width: 100%;
      max-width: 500px;
      margin-top: 8px;
    }

    .btn {
      flex: 1;
      min-height: 42px;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #475569;
      font-size: 13px;
      font-weight: 600;
      border-radius: 10px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
    }

    .btn.active {
      background: #1e2945;
      color: #ffffff;
      border-color: #1e2945;
      box-shadow: 0 2px 6px rgba(30, 41, 69, 0.2);
    }

    @media (max-width: 380px) {
      .canvas-wrap {
        height: 290px;
      }
      .dest-card {
        padding: 10px 4px;
      }
      .icon-pill {
        width: 38px;
        height: 38px;
        font-size: 18px;
      }
      .dest-title {
        font-size: 13px;
      }
      .btn {
        font-size: 12px;
        padding: 0 4px;
      }
    }
  </style>
</head>
<body>

  <div class="canvas-wrap" id="canvas">
    
    <svg class="flow-svg" viewBox="0 0 100 100" preserveAspectRatio="none">
      
      <path id="pathEnergy" class="path-line path-active-energy" d="M 50,22 C 50,50 25,48 25,65" />
      
      <path id="pathGrowth" class="path-line path-active-growth" d="M 50,22 C 50,50 75,48 75,65" />
    </svg>

    
    <div class="center-hub" id="hubNutrients">
      <div class="nutrient-badge">✨</div>
      <div class="hub-label">Nutrients</div>
    </div>

    
    <div class="dest-card energy active" id="cardEnergy">
      <div class="dest-title">Energy</div>
      <div class="icon-row">
        <div class="icon-pill" title="Battery">🔋</div>
        <div class="icon-pill" title="Sneaker">👟</div>
      </div>
    </div>

    
    <div class="dest-card growth active" id="cardGrowth">
      <div class="dest-title">Growth &amp;<br>Repair</div>
      <div class="icon-row">
        <div class="icon-pill" title="Blocks">🧱</div>
        <div class="icon-pill" title="Band-aid">🩹</div>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button class="btn active" id="btnAll">✦ All Paths</button>
    <button class="btn" id="btnEnergy">🔋 Energy</button>
    <button class="btn" id="btnGrowth">🌱 Growth &amp; Repair</button>
  </div>

  <script>
    const cardEnergy = document.getElementById('cardEnergy');
    const cardGrowth = document.getElementById('cardGrowth');
    const pathEnergy = document.getElementById('pathEnergy');
    const pathGrowth = document.getElementById('pathGrowth');

    const btnAll = document.getElementById('btnAll');
    const btnEnergy = document.getElementById('btnEnergy');
    const btnGrowth = document.getElementById('btnGrowth');

    function setMode(mode) {
      // Buttons
      btnAll.classList.toggle('active', mode === 'all');
      btnEnergy.classList.toggle('active', mode === 'energy');
      btnGrowth.classList.toggle('active', mode === 'growth');

      if (mode === 'all') {
        cardEnergy.className = 'dest-card energy active';
        cardGrowth.className = 'dest-card growth active';
        pathEnergy.className.baseVal = 'path-line path-active-energy';
        pathGrowth.className.baseVal = 'path-line path-active-growth';
      } else if (mode === 'energy') {
        cardEnergy.className = 'dest-card energy active';
        cardGrowth.className = 'dest-card growth dimmed';
        pathEnergy.className.baseVal = 'path-line path-active-energy';
        pathGrowth.className.baseVal = 'path-line';
      } else if (mode === 'growth') {
        cardEnergy.className = 'dest-card energy dimmed';
        cardGrowth.className = 'dest-card growth active';
        pathEnergy.className.baseVal = 'path-line';
        pathGrowth.className.baseVal = 'path-line path-active-growth';
      }
    }

    btnAll.addEventListener('click', () => setMode('all'));
    btnEnergy.addEventListener('click', () => setMode('energy'));
    btnGrowth.addEventListener('click', () => setMode('growth'));

    cardEnergy.addEventListener('click', () => setMode('energy'));
    cardGrowth.addEventListener('click', () => setMode('growth'));
    document.getElementById('hubNutrients').addEventListener('click', () => setMode('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">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      width: 100%;
      background: #f8fafc;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      color: #0f172a;
      padding: 12px 12px 16px;
      user-select: none;
    }
    .diagram-stage {
      width: 100%;
      max-width: 520px;
      position: relative;
    }
    svg {
      width: 100%;
      height: auto;
      display: block;
    }
    .label-box {
      font-size: 14px;
      font-weight: 700;
      fill: #0f172a;
    }
    .sub-tag {
      font-size: 13px;
      font-weight: 700;
      fill: #0f172a;
    }
    .btn-ctrl {
      margin-top: 8px;
      background: #1d4ed8;
      color: #ffffff;
      border: none;
      border-radius: 20px;
      padding: 8px 18px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 2px 6px rgba(29, 78, 216, 0.3);
      transition: background-color 0.2s;
    }
    .btn-ctrl:hover {
      background: #1e40af;
    }
    .btn-ctrl:active {
      transform: translateY(1px);
    }
    
    /* Droplet & Squeeze Animations */
    .drop {
      animation: drip 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }
    .d1 { animation-delay: 0.1s; }
    .d2 { animation-delay: 0.8s; }
    .d3 { animation-delay: 1.5s; }
    .d4 { animation-delay: 2.2s; }
    .d5 { animation-delay: 1.1s; }
    .d6 { animation-delay: 1.9s; }

    @keyframes drip {
      0% {
        transform: translateY(0) scale(0.6);
        opacity: 0;
      }
      20% {
        transform: translateY(8px) scale(1);
        opacity: 1;
      }
      70% {
        transform: translateY(55px) scale(1.1);
        opacity: 1;
      }
      85% {
        transform: translateY(68px) scale(0.8);
        opacity: 0.3;
      }
      100% {
        transform: translateY(72px) scale(0.3);
        opacity: 0;
      }
    }

    .squeeze-hand {
      animation: squeezePulse 2.8s ease-in-out infinite;
      transform-origin: 240px 145px;
    }
    @keyframes squeezePulse {
      0%, 100% { transform: scaleY(1); }
      40%, 60% { transform: scaleY(0.86); }
    }

    .press-arrow {
      animation: arrowPulse 2.8s ease-in-out infinite;
    }
    @keyframes arrowPulse {
      0%, 100% { opacity: 0.45; transform: translateY(0); }
      40%, 60% { opacity: 1; transform: translateY(3px); }
    }
    .press-arrow-up {
      animation: arrowPulseUp 2.8s ease-in-out infinite;
    }
    @keyframes arrowPulseUp {
      0%, 100% { opacity: 0.45; transform: translateY(0); }
      40%, 60% { opacity: 1; transform: translateY(-3px); }
    }

    .paused * {
      animation-play-state: paused !important;
    }
  </style>
</head>
<body>

  <div class="diagram-stage" id="stage">
    <svg viewBox="0 0 480 325" aria-label="Tights model of small intestine absorption">
      <defs>
        
        <pattern id="meshPattern" width="10" height="10" patternUnits="userSpaceOnUse">
          <path d="M 0 5 L 10 5 M 5 0 L 5 10" stroke="#b45309" stroke-width="0.8" opacity="0.6"/>
          <circle cx="5" cy="5" r="0.7" fill="#92400e" opacity="0.75"/>
        </pattern>

        
        <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
          <feDropShadow dx="0" dy="1" stdDeviation="1.5" flood-color="#d97706" flood-opacity="0.5"/>
        </filter>

        
        <linearGradient id="bloodGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#fee2e2" stop-opacity="0.85"/>
          <stop offset="100%" stop-color="#fecaca" stop-opacity="0.95"/>
        </linearGradient>
      </defs>

      
      <rect x="50" y="210" width="380" height="95" rx="14" fill="url(#bloodGrad)" stroke="#ef4444" stroke-width="2"/>
      <rect x="52" y="265" width="376" height="38" rx="10" fill="#dc2626" fill-opacity="0.15"/>
      <path d="M 50 250 Q 145 245 240 250 T 430 250" fill="none" stroke="#f87171" stroke-width="2" stroke-dasharray="6,4"/>

      
      <g transform="translate(68, 290)">
        <rect x="-6" y="-16" width="114" height="24" rx="6" fill="#ffffff" stroke="#fca5a5" stroke-width="1"/>
        <text x="51" y="0" text-anchor="middle" class="label-box" fill="#991b1b">Bloodstream</text>
      </g>

      
      <g id="tightsTube" class="squeeze-hand">
        
        <rect x="40" y="110" width="400" height="70" rx="35" fill="#fef3c7" stroke="#b45309" stroke-width="1.8"/>
        
        
        <rect x="40" y="110" width="400" height="70" rx="35" fill="url(#meshPattern)"/>

        
        <path d="M 60 145 Q 150 135 240 145 T 420 145 L 420 160 Q 240 175 60 160 Z" fill="#d97706" fill-opacity="0.3"/>

        
        
        <polygon points="120,132 145,128 152,148 138,162 118,154" fill="#b45309" stroke="#451a03" stroke-width="1.5"/>
        <circle cx="132" cy="144" r="2" fill="#451a03"/>
        <circle cx="142" cy="138" r="1.5" fill="#451a03"/>

        
        <polygon points="210,130 238,126 248,142 232,164 205,152" fill="#b45309" stroke="#451a03" stroke-width="1.5"/>
        <circle cx="222" cy="140" r="2" fill="#451a03"/>
        <circle cx="230" cy="150" r="1.5" fill="#451a03"/>

        
        <polygon points="310,134 335,128 348,146 332,162 308,150" fill="#b45309" stroke="#451a03" stroke-width="1.5"/>
        <circle cx="324" cy="144" r="2" fill="#451a03"/>

        
        <polygon points="85,140 100,132 106,148 92,156" fill="#78350f"/>
        <polygon points="175,142 190,136 195,150 182,158" fill="#78350f"/>
        <polygon points="275,138 290,132 296,148 280,158" fill="#78350f"/>
        <polygon points="375,138 392,132 398,148 382,158" fill="#78350f"/>

        
        <g transform="translate(38, 98)">
          <rect x="0" y="-16" width="206" height="22" rx="4" fill="#ffffff" fill-opacity="0.9" stroke="#cbd5e1" stroke-width="1"/>
          <text x="6" y="-1" class="sub-tag">Stocking (Small Intestine Wall)</text>
        </g>
      </g>

      
      <g class="press-arrow">
        <path d="M 235 68 L 245 80 L 255 68" fill="none" stroke="#1d4ed8" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
        <line x1="245" y1="54" x2="245" y2="78" stroke="#1d4ed8" stroke-width="3.5" stroke-linecap="round"/>
        <text x="245" y="44" text-anchor="middle" font-size="14" font-weight="800" fill="#1e40af">Squeeze</text>
      </g>
      <g class="press-arrow-up">
        <path d="M 235 204 L 245 192 L 255 204" fill="none" stroke="#1d4ed8" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
        <line x1="245" y1="216" x2="245" y2="194" stroke="#1d4ed8" stroke-width="3.5" stroke-linecap="round"/>
      </g>

      
      <g id="droplets" filter="url(#glow)">
        <g transform="translate(130, 175)">
          <path class="drop d1" d="M 0 0 C -4 6 -6 10 0 16 C 6 10 4 6 0 0 Z" fill="#f59e0b" stroke="#b45309" stroke-width="1"/>
        </g>
        <g transform="translate(180, 175)">
          <path class="drop d2" d="M 0 0 C -4 6 -6 10 0 16 C 6 10 4 6 0 0 Z" fill="#d97706" stroke="#92400e" stroke-width="1"/>
        </g>
        <g transform="translate(240, 175)">
          <path class="drop d3" d="M 0 0 C -5 7 -7 12 0 18 C 7 12 5 7 0 0 Z" fill="#f59e0b" stroke="#b45309" stroke-width="1.2"/>
        </g>
        <g transform="translate(300, 175)">
          <path class="drop d4" d="M 0 0 C -4 6 -6 10 0 16 C 6 10 4 6 0 0 Z" fill="#d97706" stroke="#92400e" stroke-width="1"/>
        </g>
        <g transform="translate(350, 175)">
          <path class="drop d5" d="M 0 0 C -4 6 -6 10 0 16 C 6 10 4 6 0 0 Z" fill="#f59e0b" stroke="#b45309" stroke-width="1"/>
        </g>
        <g transform="translate(210, 175)">
          <path class="drop d6" d="M 0 0 C -3 5 -5 8 0 12 C 5 8 3 5 0 0 Z" fill="#f59e0b" stroke="#b45309" stroke-width="1"/>
        </g>
      </g>

      
      <g transform="translate(305, 96)">
        <rect x="-8" y="-18" width="148" height="26" rx="6" fill="#ffffff" stroke="#cbd5e1" stroke-width="1" filter="drop-shadow(0 2px 4px rgba(0,0,0,0.06))"/>
        <circle cx="4" cy="-5" r="5" fill="#92400e"/>
        <text x="16" y="0" class="label-box" fill="#451a03">Undigested Waste</text>
        
        <path d="M 38 10 L 25 32" stroke="#78350f" stroke-width="1.5" stroke-dasharray="2,2"/>
      </g>

      
      <g transform="translate(295, 246)">
        <rect x="-8" y="-18" width="155" height="26" rx="6" fill="#ffffff" stroke="#fcd34d" stroke-width="1.5" filter="drop-shadow(0 2px 4px rgba(0,0,0,0.06))"/>
        <circle cx="5" cy="-5" r="5" fill="#d97706"/>
        <text x="17" y="0" class="label-box" fill="#78350f">Nutrients &amp; Water</text>
        
        <path d="M 0 -5 L -20 -15" stroke="#b45309" stroke-width="1.5" stroke-dasharray="2,2"/>
      </g>
    </svg>
  </div>

  
  <button class="btn-ctrl" id="toggleBtn" aria-label="Pause or resume digestion model animation">
    <span id="btnIcon">⏸</span> <span id="btnText">Pause Animation</span>
  </button>

  <script>
    const stage = document.getElementById('stage');
    const btn = document.getElementById('toggleBtn');
    const btnIcon = document.getElementById('btnIcon');
    const btnText = document.getElementById('btnText');
    let isPlaying = true;

    btn.addEventListener('click', () => {
      isPlaying = !isPlaying;
      if (isPlaying) {
        stage.classList.remove('paused');
        btnIcon.textContent = '⏸';
        btnText.textContent = 'Pause Animation';
      } else {
        stage.classList.add('paused');
        btnIcon.textContent = '▶';
        btnText.textContent = 'Play Animation';
      }
    });
  </script>
</body>
</html>

Modelling the Digestive System with Everyday Items

<!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;
      color: #1e2945;
      background: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 12px;
      min-height: 100%;
      user-select: none;
    }

    .header-step {
      font-size: 15px;
      font-weight: 700;
      color: #0284c7;
      min-height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    .stage {
      width: 100%;
      max-width: 580px;
      position: relative;
      margin: 8px 0;
    }

    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }

    /* SVG Elements Transition */
    .smooth-path {
      transition: d 0.5s ease, stroke 0.3s ease, fill 0.3s ease;
    }
    .smooth-elem {
      transition: transform 0.5s ease, opacity 0.4s ease;
    }

    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      max-width: 480px;
      flex-wrap: wrap;
    }

    .btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
    }
    .btn:active {
      background: #e2e8f0;
    }
    .btn.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3);
    }
    .btn-play {
      background: #0f172a;
      border-color: #0f172a;
      color: #ffffff;
      border-radius: 50%;
      width: 32px;
      height: 32px;
      padding: 0;
      justify-content: center;
    }
  </style>
</head>
<body>

  
  <div id="stepLabel" class="header-step">1. Muscle squeezes behind</div>

  
  <div class="stage">
    <svg viewBox="0 0 560 220">
      <defs>
        
        <linearGradient id="tractGrad" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stop-color="#fda4af" stop-opacity="0.35"/>
          <stop offset="100%" stop-color="#f43f5e" stop-opacity="0.1"/>
        </linearGradient>

        <linearGradient id="bolusGrad" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stop-color="#b45309" />
          <stop offset="100%" stop-color="#78350f" />
        </linearGradient>

        
        <marker id="arrowSqueeze" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
          <polygon points="0 0, 6 3, 0 6" fill="#e11d48"/>
        </marker>
        <marker id="arrowRelax" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
          <polygon points="0 0, 6 3, 0 6" fill="#0284c7"/>
        </marker>
        <marker id="arrowPush" markerWidth="7" markerHeight="6" refX="6" refY="3" orient="auto">
          <polygon points="0 0, 7 3, 0 6" fill="#16a34a"/>
        </marker>
      </defs>

      
      <path id="cavityFill" class="smooth-path" d="M 30,50 Q 110,105 180,60 Q 300,50 530,50 L 530,170 Q 300,170 180,160 Q 110,115 30,170 Z" fill="url(#tractGrad)"/>

      
      <g id="bolusGroup" class="smooth-elem" transform="translate(180, 110)">
        <circle r="32" fill="url(#bolusGrad)" filter="drop-shadow(0 2px 4px rgba(0,0,0,0.15))" />
        <circle cx="-8" cy="-8" r="4" fill="#d97706" opacity="0.6"/>
        <circle cx="10" cy="6" r="5" fill="#5f2908" opacity="0.6"/>
        <circle cx="4" cy="-12" r="3" fill="#d97706" opacity="0.7"/>
      </g>

      
      <path id="topWall" class="smooth-path" d="M 30,50 Q 110,105 180,60 Q 300,50 530,50" fill="none" stroke="#f43f5e" stroke-width="14" stroke-linecap="round"/>

      
      <path id="bottomWall" class="smooth-path" d="M 30,170 Q 110,115 180,160 Q 300,170 530,170" fill="none" stroke="#f43f5e" stroke-width="14" stroke-linecap="round"/>

      
      <g id="squeezeArrows" class="smooth-elem" opacity="1">
        
        <line x1="110" y1="20" x2="110" y2="78" stroke="#e11d48" stroke-width="4" stroke-linecap="round" marker-end="url(#arrowSqueeze)"/>
        
        <line x1="110" y1="200" x2="110" y2="142" stroke="#e11d48" stroke-width="4" stroke-linecap="round" marker-end="url(#arrowSqueeze)"/>
      </g>

      
      <g id="relaxArrows" class="smooth-elem" opacity="0">
        
        <line x1="270" y1="65" x2="270" y2="25" stroke="#0284c7" stroke-width="4" stroke-linecap="round" marker-end="url(#arrowRelax)"/>
        
        <line x1="270" y1="155" x2="270" y2="195" stroke="#0284c7" stroke-width="4" stroke-linecap="round" marker-end="url(#arrowRelax)"/>
      </g>

      
      <g id="forwardArrow" class="smooth-elem" opacity="0">
        <line x1="225" y1="110" x2="340" y2="110" stroke="#16a34a" stroke-width="6" stroke-linecap="round" marker-end="url(#arrowPush)"/>
      </g>
    </svg>
  </div>

  
  <div class="controls">
    <button id="playBtn" class="btn btn-play" title="Play/Pause">⏸</button>
    <button class="btn active" onclick="setStep(0)">1. Squeeze</button>
    <button class="btn" onclick="setStep(1)">2. Relax</button>
    <button class="btn" onclick="setStep(2)">3. Move</button>
  </div>

  <script>
    const stepsData = [
      {
        text: "1. Muscle squeezes behind",
        topD: "M 30,50 Q 110,105 180,60 Q 300,50 530,50",
        botD: "M 30,170 Q 110,115 180,160 Q 300,170 530,170",
        cavityD: "M 30,50 Q 110,105 180,60 Q 300,50 530,50 L 530,170 Q 300,170 180,160 Q 110,115 30,170 Z",
        bolusX: 180,
        sqOpacity: 1,
        relOpacity: 0,
        fwdOpacity: 0,
        sqX: 110
      },
      {
        text: "2. Tube relaxes ahead",
        topD: "M 30,50 Q 110,105 180,60 Q 270,35 530,50",
        botD: "M 30,170 Q 110,115 180,160 Q 270,185 530,170",
        cavityD: "M 30,50 Q 110,105 180,60 Q 270,35 530,50 L 530,170 Q 270,185 180,160 Q 110,115 30,170 Z",
        bolusX: 180,
        sqOpacity: 0.3,
        relOpacity: 1,
        fwdOpacity: 0,
        sqX: 110
      },
      {
        text: "3. Waste moves forward",
        topD: "M 30,50 Q 230,50 280,105 Q 360,60 530,50",
        botD: "M 30,170 Q 230,170 280,115 Q 360,160 530,170",
        cavityD: "M 30,50 Q 230,50 280,105 Q 360,60 530,50 L 530,170 Q 360,160 280,115 Q 230,170 30,170 Z",
        bolusX: 360,
        sqOpacity: 0,
        relOpacity: 0,
        fwdOpacity: 1,
        sqX: 280
      }
    ];

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

    const stepLabel = document.getElementById('stepLabel');
    const topWall = document.getElementById('topWall');
    const bottomWall = document.getElementById('bottomWall');
    const cavityFill = document.getElementById('cavityFill');
    const bolusGroup = document.getElementById('bolusGroup');
    const squeezeArrows = document.getElementById('squeezeArrows');
    const relaxArrows = document.getElementById('relaxArrows');
    const forwardArrow = document.getElementById('forwardArrow');
    const playBtn = document.getElementById('playBtn');
    const stepBtns = document.querySelectorAll('.controls .btn:not(.btn-play)');

    function renderState(idx) {
      const data = stepsData[idx];
      stepLabel.textContent = data.text;
      topWall.setAttribute('d', data.topD);
      bottomWall.setAttribute('d', data.botD);
      cavityFill.setAttribute('d', data.cavityD);

      bolusGroup.style.transform = `translate(${data.bolusX}px, 110px)`;
      squeezeArrows.style.transform = `translateX(${data.sqX - 110}px)`;
      squeezeArrows.style.opacity = data.sqOpacity;
      relaxArrows.style.opacity = data.relOpacity;
      forwardArrow.style.opacity = data.fwdOpacity;

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

    function setStep(idx) {
      currentStep = idx;
      renderState(currentStep);
    }

    function nextStep() {
      currentStep = (currentStep + 1) % stepsData.length;
      renderState(currentStep);
    }

    function startLoop() {
      stopLoop();
      timer = setInterval(nextStep, 3000);
      isPlaying = true;
      playBtn.textContent = '⏸';
    }

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

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

    // Start auto cycle on mount
    renderState(0);
    startLoop();
  </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;
      user-select: none;
      -webkit-user-select: none;
    }

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

    .toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: center;
      margin-bottom: 12px;
      width: 100%;
      max-width: 580px;
    }

    .filter-btn {
      background: #ffffff;
      border: 1px solid #dbe2ea;
      border-radius: 20px;
      padding: 5px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #4b5563;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
      transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }

    .filter-btn:focus {
      outline: none;
    }

    .filter-btn.active {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(34, 183, 255, 0.35);
    }

    .action-btn {
      background: #f97316;
      border-color: #f97316;
      color: #ffffff;
      margin-left: 4px;
    }

    .action-btn.active {
      background: #ea580c;
      border-color: #ea580c;
    }

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

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

    .model-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

    .card-title {
      font-size: 14px;
      font-weight: 700;
      color: #1e2945;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .stage-view {
      width: 100%;
      height: 180px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* SVG Styling & Animation */
    .organ-svg {
      width: 100%;
      height: 100%;
      max-width: 200px;
      overflow: visible;
    }

    .bag-body {
      fill: rgba(224, 242, 254, 0.45);
      stroke: #38bdf8;
      stroke-width: 2.5;
      stroke-linejoin: round;
      transition: stroke 0.3s ease, filter 0.3s ease;
    }

    .stomach-wall {
      fill: #fecdd3;
      stroke: #f43f5e;
      stroke-width: 2.5;
      stroke-linejoin: round;
      transition: stroke 0.3s ease, filter 0.3s ease;
    }

    .liquid-juice {
      fill: #fed7aa;
      transition: fill 0.3s ease;
    }

    .liquid-acid {
      fill: #ffedd5;
      transition: fill 0.3s ease;
    }

    .cracker {
      fill: #d97706;
      stroke: #b45309;
      stroke-width: 1;
    }

    .hand-emoji {
      position: absolute;
      font-size: 26px;
      transition: transform 0.4s ease;
      z-index: 10;
    }

    .hand-left {
      left: 12%;
      top: 45%;
    }

    .hand-right {
      right: 12%;
      top: 45%;
      transform: scaleX(-1);
    }

    /* Squeeze animations */
    .churning .hand-left {
      animation: squeezeL 1.2s ease-in-out infinite alternate;
    }
    .churning .hand-right {
      animation: squeezeR 1.2s ease-in-out infinite alternate;
    }

    @keyframes squeezeL {
      0% { transform: translate(0, 0); }
      100% { transform: translate(14px, 0); }
    }
    @keyframes squeezeR {
      0% { transform: scaleX(-1) translate(0, 0); }
      100% { transform: scaleX(-1) translate(14px, 0); }
    }

    .churning .bag-shape {
      animation: bagSquish 1.2s ease-in-out infinite alternate;
      transform-origin: center;
    }
    @keyframes bagSquish {
      0% { transform: scale(1, 1); }
      100% { transform: scale(0.86, 1.08); }
    }

    .churning .stomach-shape {
      animation: stomachChurn 1.2s ease-in-out infinite alternate;
      transform-origin: center;
    }
    @keyframes stomachChurn {
      0% { transform: scale(1, 1) rotate(0deg); }
      50% { transform: scale(0.92, 1.05) rotate(-2deg); }
      100% { transform: scale(1.04, 0.94) rotate(2deg); }
    }

    .churning .food-chunk {
      animation: foodMix 1.2s ease-in-out infinite alternate;
    }
    @keyframes foodMix {
      0% { transform: translateY(0); }
      100% { transform: translateY(6px); }
    }

    /* Matching Badges */
    .badges-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
      width: 100%;
      margin-top: 8px;
    }

    .match-pill {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 5px 10px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 600;
      background: #f1f5f9;
      color: #64748b;
      border: 1px solid transparent;
      transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }

    .match-pill .pill-label {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .dot-indicator {
      width: 8px;
      height: 8px;
      border-radius: 50%;
    }

    /* Highlight states */
    .hl-wall .target-wall,
    .hl-all .target-wall {
      background: #e0f2fe;
      color: #0284c7;
      border-color: #bae6fd;
    }
    .hl-wall .bag-body,
    .hl-all .bag-body {
      stroke: #0284c7;
      stroke-width: 3.5;
    }
    .hl-wall .stomach-wall,
    .hl-all .stomach-wall {
      stroke: #e11d48;
      stroke-width: 3.5;
    }

    .hl-acid .target-acid,
    .hl-all .target-acid {
      background: #ffedd5;
      color: #ea580c;
      border-color: #fed7aa;
    }
    .hl-acid .liquid-juice,
    .hl-all .liquid-juice {
      fill: #fdba74;
    }
    .hl-acid .liquid-acid,
    .hl-all .liquid-acid {
      fill: #fdba74;
    }

    .hl-squeeze .target-squeeze,
    .hl-all .target-squeeze {
      background: #fdf4ff;
      color: #c026d3;
      border-color: #f5d0fe;
    }
    .hl-squeeze .hand-emoji {
      filter: drop-shadow(0 0 4px #c026d3);
    }
  </style>
</head>
<body class="hl-all churning">

  
  <div class="toolbar">
    <button class="filter-btn active" data-mode="all">✦ All</button>
    <button class="filter-btn" data-mode="wall">1. Bag ↔ Wall</button>
    <button class="filter-btn" data-mode="acid">2. Juice ↔ Acid</button>
    <button class="filter-btn" data-mode="squeeze">3. Hands ↔ Muscles</button>
    <button class="filter-btn action-btn active" id="churnToggle">Squeeze ⏸</button>
  </div>

  
  <div class="cards-grid">
    
    
    <div class="model-card">
      <div class="card-title">🧃 Kitchen Model</div>
      <div class="stage-view">
        <span class="hand-emoji hand-left">👉</span>
        <span class="hand-emoji hand-right">👉</span>
        
        <svg class="organ-svg bag-shape" viewBox="0 0 160 160">
          
          <rect x="40" y="24" width="80" height="8" rx="2" fill="#0284c7" />
          <rect x="45" y="32" width="70" height="3" fill="#38bdf8" />
          
          
          <rect class="bag-body" x="40" y="34" width="80" height="100" rx="8" />
          
          
          <path class="liquid-juice" d="M 42 75 Q 80 70 118 75 L 118 126 Q 118 132 112 132 L 48 132 Q 42 132 42 126 Z" />
          
          
          <g class="food-chunk">
            <rect class="cracker" x="55" y="88" width="14" height="14" rx="2" transform="rotate(12 62 95)" />
            <rect class="cracker" x="88" y="92" width="16" height="12" rx="2" transform="rotate(-15 96 98)" />
            <circle class="cracker" cx="76" cy="112" r="5" />
            <circle class="cracker" cx="102" cy="116" r="3" />
            <circle class="cracker" cx="58" cy="115" r="3" />
          </g>
        </svg>
      </div>

      <div class="badges-list">
        <div class="match-pill target-wall">
          <span class="pill-label"><span class="dot-indicator" style="background:#0284c7"></span>Plastic Bag</span>
          <span>Container</span>
        </div>
        <div class="match-pill target-acid">
          <span class="pill-label"><span class="dot-indicator" style="background:#ea580c"></span>Orange Juice</span>
          <span>Acid</span>
        </div>
        <div class="match-pill target-squeeze">
          <span class="pill-label"><span class="dot-indicator" style="background:#c026d3"></span>Hands Squeezing</span>
          <span>Physical</span>
        </div>
      </div>
    </div>

    
    <div class="model-card">
      <div class="card-title">🫁 Human Stomach</div>
      <div class="stage-view">
        <svg class="organ-svg stomach-shape" viewBox="0 0 160 160">
          
          <path d="M 70 15 L 70 42 L 82 42 L 82 15" fill="#fda4af" stroke="#f43f5e" stroke-width="2" />
          
          
          <path d="M 52 118 Q 42 124 36 138" fill="none" stroke="#f43f5e" stroke-width="6" stroke-linecap="round" />

          
          <path class="stomach-wall" d="M 70 40 C 45 40 40 70 45 95 C 48 112 58 122 75 125 C 105 130 128 115 128 85 C 128 50 102 38 82 40 Z" />

          
          <path class="liquid-acid" d="M 45 82 C 55 80 105 78 126 80 C 126 102 110 123 75 122 C 56 120 48 108 45 95 Z" />

          
          <g class="food-chunk">
            <circle class="cracker" cx="80" cy="94" r="7" />
            <circle class="cracker" cx="96" cy="100" r="5" />
            <circle class="cracker" cx="66" cy="102" r="5" />
            <circle class="cracker" cx="86" cy="112" r="3.5" />
          </g>
        </svg>
      </div>

      <div class="badges-list">
        <div class="match-pill target-wall">
          <span class="pill-label"><span class="dot-indicator" style="background:#0284c7"></span>Stomach Wall</span>
          <span>Organ</span>
        </div>
        <div class="match-pill target-acid">
          <span class="pill-label"><span class="dot-indicator" style="background:#ea580c"></span>Stomach Acid</span>
          <span>Acid</span>
        </div>
        <div class="match-pill target-squeeze">
          <span class="pill-label"><span class="dot-indicator" style="background:#c026d3"></span>Churning Muscles</span>
          <span>Physical</span>
        </div>
      </div>
    </div>

  </div>

  <script>
    const filterBtns = document.querySelectorAll('.filter-btn:not(.action-btn)');
    const churnToggle = document.getElementById('churnToggle');

    // Highlight filter tabs
    filterBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        filterBtns.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');

        document.body.classList.remove('hl-all', 'hl-wall', 'hl-acid', 'hl-squeeze');
        document.body.classList.add('hl-' + btn.dataset.mode);
      });
    });

    // Play/Pause Squeeze motion
    churnToggle.addEventListener('click', () => {
      const isChurning = document.body.classList.toggle('churning');
      churnToggle.classList.toggle('active', isChurning);
      churnToggle.textContent = isChurning ? 'Squeeze ⏸' : 'Squeeze ▶';
    });
  </script>
</body>
</html>

science.ks2.y2.t2.s1

Aligned learning resources

Related diagrams