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

    body {
      background-color: #f4ecd8;
      color: #2c1810;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      user-select: none;
    }

    /* Controls Bar */
    .controls {
      display: flex;
      gap: 6px;
      margin-bottom: 10px;
      width: 100%;
      max-width: 500px;
      justify-content: center;
    }

    .step-btn {
      flex: 1;
      background: #e8dcbf;
      border: 2px solid transparent;
      border-radius: 20px;
      padding: 6px 4px;
      font-size: 13px;
      font-weight: 700;
      color: #614126;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: background 0.2s, border-color 0.2s, color 0.2s;
    }

    .step-btn.active {
      background: #ffffff;
      border-color: #4a7c59;
      color: #4a7c59;
    }

    /* Main Diagram Grid */
    .cycle-grid {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 8px;
      width: 100%;
      max-width: 600px;
      align-items: center;
      margin: auto 0;
    }

    /* Cards */
    .stage-card {
      background: #ffffff;
      border-radius: 12px;
      padding: 12px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      min-height: 160px;
      justify-content: space-between;
      box-shadow: 0 2px 6px rgba(90, 50, 20, 0.06);
      border: 2px solid rgba(0,0,0,0);
      transition: border-color 0.3s, background-color 0.3s;
    }

    .stage-card.active {
      border-color: #4a7c59;
      background-color: #fcfbf7;
    }

    .stage-title {
      font-size: 13px;
      font-weight: 800;
      color: #8b5a2b;
      margin-top: 6px;
      line-height: 1.2;
    }

    .stage-card.rich .stage-title {
      color: #4a7c59;
    }

    /* Visual Scene Containers */
    .scene {
      width: 100%;
      height: 90px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Center Bridge / Action Card */
    .action-bridge {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 6px;
      text-align: center;
    }

    .mushroom-badge {
      background: #ffffff;
      border-radius: 50%;
      width: 64px;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 3px 8px rgba(90, 50, 20, 0.1);
      border: 2px solid rgba(0,0,0,0);
      transition: border-color 0.3s, transform 0.3s ease;
      cursor: pointer;
    }

    .action-bridge.active .mushroom-badge {
      border-color: #8b5a2b;
      transform: scale(1.06);
    }

    .action-title {
      font-size: 12px;
      font-weight: 800;
      color: #8b5a2b;
      margin-top: 6px;
      line-height: 1.1;
    }

    .arrow-indicator {
      display: flex;
      align-items: center;
      gap: 2px;
      margin-top: 4px;
      color: #8b5a2b;
      font-weight: 900;
      font-size: 16px;
    }

    /* SVG & Visual Details */
    .log-graphic {
      width: 80px;
      height: 28px;
      background: #8b5a2b;
      border-radius: 14px;
      position: relative;
      box-shadow: inset 0 -3px 0 rgba(0,0,0,0.2);
    }

    .log-graphic::before {
      content: "";
      position: absolute;
      left: 3px;
      top: 3px;
      width: 22px;
      height: 22px;
      background: #a26d39;
      border-radius: 50%;
      border: 2px dashed #6b431e;
    }

    .leaf {
      position: absolute;
      font-size: 20px;
      transition: transform 0.3s;
    }

    .soil-graphic {
      width: 85px;
      height: 36px;
      background: #3d2614;
      border-radius: 10px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: inset 0 2px 4px rgba(255,255,255,0.1);
    }

    .soil-dots {
      position: absolute;
      width: 100%;
      height: 100%;
      background-image: radial-gradient(#5a3920 20%, transparent 20%), radial-gradient(#2b1809 20%, transparent 20%);
      background-position: 0 0, 4px 4px;
      background-size: 8px 8px;
      border-radius: 10px;
      opacity: 0.6;
    }

    .sprout-icon {
      font-size: 32px;
      position: relative;
      top: -12px;
      filter: drop-shadow(0 2px 3px rgba(0,0,0,0.15));
      animation: gentle-bob 3s ease-in-out infinite alternate;
    }

    @keyframes gentle-bob {
      0% { transform: translateY(0px) rotate(0deg); }
      100% { transform: translateY(-3px) rotate(2deg); }
    }

    /* Nutrient flow particles */
    .particle {
      position: absolute;
      width: 6px;
      height: 6px;
      background-color: #4a7c59;
      border-radius: 50%;
      opacity: 0;
    }

    .animating .p1 { animation: flow 2s infinite ease-in; left: 20%; top: 45%; }
    .animating .p2 { animation: flow 2s infinite ease-in 0.6s; left: 50%; top: 35%; }
    .animating .p3 { animation: flow 2s infinite ease-in 1.2s; left: 75%; top: 55%; }

    @keyframes flow {
      0% { transform: translateX(-30px); opacity: 0; }
      50% { opacity: 0.8; }
      100% { transform: translateX(30px); opacity: 0; }
    }

    /* Small Screen Optimization */
    @media (max-width: 380px) {
      .cycle-grid {
        grid-template-columns: 1fr;
        gap: 6px;
      }
      .stage-card {
        min-height: auto;
        padding: 8px;
        flex-direction: row;
        justify-content: space-around;
      }
      .scene {
        width: 100px;
        height: 50px;
      }
      .action-bridge {
        flex-direction: row;
        gap: 12px;
      }
      .mushroom-badge {
        width: 48px;
        height: 48px;
      }
      .arrow-indicator {
        transform: rotate(90deg);
      }
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="step-btn active" id="btn0">1. Waste</button>
    <button class="step-btn" id="btn1">2. Fungi</button>
    <button class="step-btn" id="btn2">3. Soil</button>
    <button class="step-btn" id="playBtn" style="flex:0.6;">▶</button>
  </div>

  
  <div class="cycle-grid animating" id="cycleGrid">
    
    
    <div class="stage-card active" id="card0">
      <div class="scene">
        <div class="log-graphic"></div>
        <div class="leaf" style="left: 10px; top: 12px;">🍂</div>
        <div class="leaf" style="right: 12px; top: 30px;">🍁</div>
        <div class="leaf" style="left: 32px; bottom: 8px;">🍂</div>
      </div>
      <div class="stage-title">Dead Plant<br>Waste</div>
    </div>

    
    <div class="action-bridge" id="card1">
      <div class="mushroom-badge" title="Fungi break down dead matter">
        <svg width="36" height="36" viewBox="0 0 36 36">
          
          <path d="M4 19 C4 9, 32 9, 32 19 Z" fill="#e76f51"/>
          
          <circle cx="12" cy="14" r="2" fill="#ffffff" opacity="0.9"/>
          <circle cx="20" cy="12" r="2.5" fill="#ffffff" opacity="0.9"/>
          <circle cx="26" cy="15" r="1.5" fill="#ffffff" opacity="0.9"/>
          
          <path d="M13 19 L13 29 C13 31, 23 31, 23 29 L23 19 Z" fill="#fdfbf7"/>
          
          <circle cx="16" cy="23" r="1" fill="#3d2614"/>
          <circle cx="20" cy="23" r="1" fill="#3d2614"/>
          <path d="M17 26 Q18 27.5 19 26" stroke="#3d2614" stroke-width="0.8" fill="none" stroke-linecap="round"/>
        </svg>
      </div>
      <div class="action-title">Fungi<br>at Work</div>
      <div class="arrow-indicator">➔</div>
    </div>

    
    <div class="stage-card rich" id="card2">
      <div class="scene">
        <div class="sprout-icon">🌱</div>
        <div class="soil-graphic" style="position: absolute; bottom: 6px;">
          <div class="soil-dots"></div>
        </div>
      </div>
      <div class="stage-title">Rich<br>Soil</div>
    </div>

  </div>

  <script>
    const cards = [document.getElementById('card0'), document.getElementById('card1'), document.getElementById('card2')];
    const btns = [document.getElementById('btn0'), document.getElementById('btn1'), document.getElementById('btn2')];
    const playBtn = document.getElementById('playBtn');

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

    function setStep(idx) {
      currentStep = idx;
      cards.forEach((c, i) => {
        if (i === idx) {
          c.classList.add('active');
        } else {
          c.classList.remove('active');
        }
      });

      btns.forEach((b, i) => {
        if (i === idx) {
          b.classList.add('active');
        } else {
          b.classList.remove('active');
        }
      });
    }

    function nextStep() {
      setStep((currentStep + 1) % 3);
    }

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

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

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

    cards.forEach((card, idx) => {
      card.addEventListener('click', () => {
        pauseAutoPlay();
        setStep(idx);
      });
    });

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

    // Start auto loop
    startAutoPlay();
  </script>
</body>
</html>

Nature Recyclers: Mushrooms and Fungi

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="1:1">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }

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

    .header-text {
      font-size: 14px;
      font-weight: 700;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 10px;
      text-align: center;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      width: 100%;
      max-width: 440px;
    }

    .tile {
      position: relative;
      border-radius: 16px;
      padding: 14px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      border: 2px solid transparent;
      transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, border-color 0.2s ease;
      overflow: hidden;
      aspect-ratio: 1 / 1;
      justify-content: center;
    }

    .tile:active {
      transform: scale(0.96);
    }

    .tile.checked {
      border-color: #22c55e;
      box-shadow: 0 6px 16px rgba(34, 197, 94, 0.2);
    }

    .tile.bounce {
      animation: gentle-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    @keyframes gentle-pop {
      0% { transform: scale(1); }
      50% { transform: scale(1.05); }
      100% { transform: scale(1); }
    }

    /* Card Themes */
    .tile-food { background: #ffe8d6; }
    .tile-water { background: #e0f2fe; }
    .tile-shelter { background: #dcfce7; }
    .tile-space { background: #f3e8ff; }

    .icon-wrap {
      font-size: 38px;
      line-height: 1;
      margin-bottom: 6px;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
    }

    .title {
      font-size: 17px;
      font-weight: 800;
      color: #1e2945;
      margin-bottom: 4px;
    }

    .subtitle {
      font-size: 11.5px;
      line-height: 1.25;
      font-weight: 600;
      color: #475569;
      max-width: 140px;
    }

    .badge-check {
      position: absolute;
      top: 8px;
      right: 8px;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: #22c55e;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 900;
      box-shadow: 0 2px 6px rgba(34, 197, 94, 0.35);
      opacity: 0;
      transform: scale(0.4);
      transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .tile.checked .badge-check {
      opacity: 1;
      transform: scale(1);
    }

    .footer-bar {
      margin-top: 12px;
      font-size: 12.5px;
      font-weight: 600;
      color: #64748b;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .counter-pill {
      background: #e2e8f0;
      color: #1e2945;
      padding: 2px 8px;
      border-radius: 12px;
      font-weight: 700;
      font-size: 12px;
      transition: background 0.3s ease, color 0.3s ease;
    }

    .counter-pill.all-done {
      background: #22c55e;
      color: #ffffff;
    }

    @media (max-width: 360px) {
      .grid {
        gap: 8px;
      }
      .icon-wrap {
        font-size: 32px;
      }
      .title {
        font-size: 15px;
      }
      .subtitle {
        font-size: 10.5px;
      }
    }
  </style>
</head>
<body>

  <div class="header-text">Tap the 4 Needs of Every Living Thing</div>

  <div class="grid" id="grid">
    
    <div class="tile tile-food" data-id="food" tabindex="0" role="button" aria-label="Food: Gives energy to grow and move">
      <div class="badge-check">✓</div>
      <div class="icon-wrap">🍎</div>
      <div class="title">Food</div>
      <div class="subtitle">Energy to grow and move</div>
    </div>

    
    <div class="tile tile-water" data-id="water" tabindex="0" role="button" aria-label="Water: Keeps bodies healthy and hydrated">
      <div class="badge-check">✓</div>
      <div class="icon-wrap">💧</div>
      <div class="title">Water</div>
      <div class="subtitle">Keeps bodies hydrated</div>
    </div>

    
    <div class="tile tile-shelter" data-id="shelter" tabindex="0" role="button" aria-label="Shelter: A safe place to rest and hide">
      <div class="badge-check">✓</div>
      <div class="icon-wrap">🌲</div>
      <div class="title">Shelter</div>
      <div class="subtitle">Safe place to rest and hide</div>
    </div>

    
    <div class="tile tile-space" data-id="space" tabindex="0" role="button" aria-label="Space: Room to hunt, explore, and raise babies">
      <div class="badge-check">✓</div>
      <div class="icon-wrap">🗺️</div>
      <div class="title">Space</div>
      <div class="subtitle">Room to live and grow</div>
    </div>
  </div>

  <div class="footer-bar">
    <span>Discovered:</span>
    <span class="counter-pill" id="counter">0 of 4</span>
  </div>

  <script>
    const tiles = document.querySelectorAll('.tile');
    const counter = document.getElementById('counter');
    const found = new Set();

    let audioCtx = null;
    function playChime(pitchIndex) {
      try {
        if (!audioCtx) {
          audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        }
        if (audioCtx.state === 'suspended') {
          audioCtx.resume();
        }
        const freqs = [392.00, 523.25, 659.25, 783.99, 1046.50]; // G4, C5, E5, G5, C6
        const freq = freqs[pitchIndex % freqs.length];

        const osc = audioCtx.createOscillator();
        const gain = audioCtx.createGain();
        osc.type = 'sine';
        osc.frequency.setValueAtTime(freq, audioCtx.currentTime);

        gain.gain.setValueAtTime(0.2, audioCtx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.35);

        osc.connect(gain);
        gain.connect(audioCtx.destination);

        osc.start();
        osc.stop(audioCtx.currentTime + 0.35);
      } catch (e) {
        // Audio playback fallback safe
      }
    }

    tiles.forEach((tile, index) => {
      function activate() {
        const id = tile.getAttribute('data-id');
        
        // Bounce animation
        tile.classList.remove('bounce');
        void tile.offsetWidth; // trigger reflow
        tile.classList.add('bounce');

        if (!tile.classList.contains('checked')) {
          tile.classList.add('checked');
          found.add(id);
          playChime(found.size - 1);
        } else {
          playChime(index);
        }

        const count = found.size;
        counter.textContent = `${count} of 4`;
        if (count === 4) {
          counter.textContent = 'All 4 Complete! 🌟';
          counter.classList.add('all-done');
        }
      }

      tile.addEventListener('click', activate);
      tile.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          activate();
        }
      });
    });
  </script>
</body>
</html>

What Makes a Habitat: Food, Water, Shelter, Space

<!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: #f4f8f3;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      user-select: none;
      -webkit-user-select: none;
    }

    .scene-wrap {
      position: relative;
      width: 100%;
      max-width: 580px;
      aspect-ratio: 4 / 3;
    }

    svg {
      width: 100%;
      height: 100%;
      display: block;
      border-radius: 12px;
      overflow: hidden;
    }

    /* Interactive overlay elements */
    .badge {
      position: absolute;
      background: rgba(255, 255, 255, 0.94);
      border: 1.5px solid #22c55e;
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
      border-radius: 20px;
      padding: 4px 10px;
      font-size: 13px;
      font-weight: 700;
      color: #15803d;
      display: flex;
      align-items: center;
      gap: 5px;
      transition: all 0.35s ease;
      pointer-events: none;
    }

    .badge.shelter { top: 14%; left: 6%; }
    .badge.space { top: 12%; right: 8%; border-color: #3b82f6; color: #1d4ed8; }
    .badge.food { bottom: 18%; left: 6%; border-color: #eab308; color: #a16207; }
    .badge.water { bottom: 18%; right: 8%; border-color: #0284c7; color: #0369a1; }

    /* Drought state alterations */
    .drought .badge.water {
      border-color: #ef4444;
      background: #fee2e2;
      color: #b91c1c;
    }

    .water-stream {
      transition: fill 0.5s ease, opacity 0.5s ease;
    }
    .drought .water-stream {
      fill: #d7c9a9 !important;
    }
    .drought .water-wave {
      opacity: 0;
    }
    .drought .fish {
      opacity: 0.15;
      transform: scale(0.8);
    }

    .bear-face-happy { transition: opacity 0.3s ease; }
    .bear-face-sad { opacity: 0; transition: opacity 0.3s ease; }
    .thought-bubble { opacity: 0; transform: scale(0.6); transition: all 0.35s ease; transform-origin: 300px 170px; }

    .drought .bear-face-happy { opacity: 0; }
    .drought .bear-face-sad { opacity: 1; }
    .drought .thought-bubble { opacity: 1; transform: scale(1); }

    /* UI Controls & Alert Bar */
    .controls {
      position: absolute;
      bottom: 8px;
      left: 0;
      right: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      z-index: 10;
      padding: 0 12px;
    }

    .toggle-btn {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      box-shadow: 0 2px 5px rgba(0,0,0,0.06);
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background 0.2s, box-shadow 0.2s;
    }
    .toggle-btn:active {
      box-shadow: inset 0 1px 3px rgba(0,0,0,0.15);
    }

    .alert-banner {
      background: #ef4444;
      color: #ffffff;
      font-size: 13px;
      font-weight: 700;
      padding: 4px 12px;
      border-radius: 12px;
      box-shadow: 0 2px 6px rgba(239, 68, 68, 0.35);
      opacity: 0;
      transform: translateY(6px);
      transition: all 0.3s ease;
      pointer-events: none;
    }
    .drought .alert-banner {
      opacity: 1;
      transform: translateY(0);
    }

    @media (max-width: 420px) {
      .badge { font-size: 11px; padding: 3px 7px; }
      .toggle-btn { font-size: 12px; padding: 5px 10px; }
      .alert-banner { font-size: 11px; }
    }
  </style>
</head>
<body>

  <div class="scene-wrap" id="sceneWrap">
    <svg viewBox="0 0 600 450" xmlns="http://www.w3.org/2000/svg">
      <defs>
        
        <linearGradient id="skyGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#d4eaf7" />
          <stop offset="60%" stop-color="#eef7fa" />
          <stop offset="100%" stop-color="#f2faea" />
        </linearGradient>
        
        <linearGradient id="mountainGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#a8c0d6" />
          <stop offset="100%" stop-color="#c5d8e6" />
        </linearGradient>

        <linearGradient id="waterGrad" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stop-color="#38bdf8" />
          <stop offset="100%" stop-color="#0284c7" />
        </linearGradient>
      </defs>

      
      <rect width="600" height="450" fill="url(#skyGrad)" />

      
      <circle cx="480" cy="75" r="28" fill="#fef08a" opacity="0.9" />

      
      <polygon points="180,210 270,110 360,210" fill="url(#mountainGrad)" opacity="0.75" />
      <polygon points="280,210 390,95 490,210" fill="url(#mountainGrad)" opacity="0.85" />
      <polygon points="410,210 490,125 570,210" fill="url(#mountainGrad)" opacity="0.65" />
      
      <polygon points="270,110 252,130 262,126 270,132 278,126 288,130" fill="#ffffff" opacity="0.85" />
      <polygon points="390,95 368,120 380,115 390,122 400,115 412,120" fill="#ffffff" opacity="0.85" />

      
      <ellipse cx="440" cy="240" rx="190" ry="65" fill="#84cc89" opacity="0.7" />
      <ellipse cx="160" cy="240" rx="180" ry="60" fill="#93d998" opacity="0.7" />

      
      <g fill="#4e8c56" opacity="0.85">
        <polygon points="360,195 354,208 366,208" />
        <polygon points="375,190 368,206 382,206" />
        <polygon points="390,193 384,207 396,207" />
        <polygon points="410,190 404,205 416,205" />
        <polygon points="430,194 424,208 436,208" />
        <polygon points="450,191 443,207 457,207" />
      </g>

      
      <path d="M-20,230 Q140,205 300,225 T620,215 L620,460 L-20,460 Z" fill="#86c66c" />
      <path d="M-20,270 Q200,250 360,280 T620,260 L620,460 L-20,460 Z" fill="#76b85b" />

      
      
      <rect x="75" y="160" width="16" height="70" fill="#6d4c41" rx="4" />
      <polygon points="83,90 45,145 121,145" fill="#2d6a4f" />
      <polygon points="83,125 40,175 126,175" fill="#245a42" />
      <polygon points="83,155 35,210 131,210" fill="#1b4d37" />

      
      <path d="M20,330 C20,220 150,220 160,330 Z" fill="#818cf8" opacity="0.15" />
      <path d="M25,325 C25,235 145,235 155,325 Z" fill="#71717a" />
      <path d="M35,325 C40,255 130,255 140,325 Z" fill="#52525b" />
      
      <path d="M52,325 C52,270 118,270 120,325 Z" fill="#27272a" />
      <ellipse cx="86" cy="324" rx="34" ry="12" fill="#18181b" />
      
      <ellipse cx="60" cy="260" rx="16" ry="10" fill="#a1a1aa" />
      <ellipse cx="120" cy="265" rx="18" ry="11" fill="#9ca3af" />
      <ellipse cx="90" cy="245" rx="22" ry="12" fill="#d1d5db" />
      <path d="M60,252 Q90,260 120,252" stroke="#4ade80" stroke-width="4" fill="none" stroke-linecap="round" />

      
      <path id="streamPath" class="water-stream" d="M340,245 C380,265 420,285 410,315 C395,360 480,380 500,450 L620,450 L620,245 C540,240 420,235 340,245 Z" fill="url(#waterGrad)" />
      
      
      <ellipse cx="375" cy="305" rx="8" ry="5" fill="#a8a29e" />
      <ellipse cx="445" cy="365" rx="10" ry="6" fill="#78716c" />
      <ellipse cx="475" cy="340" rx="7" ry="4" fill="#a8a29e" />
      
      
      <g class="water-wave" stroke="#ffffff" stroke-width="2" stroke-linecap="round" opacity="0.7">
        <line x1="430" y1="280" x2="455" y2="280" />
        <line x1="460" y1="300" x2="490" y2="300" />
        <line x1="480" y1="380" x2="520" y2="380" />
        <line x1="530" y1="410" x2="565" y2="410" />
      </g>

      
      <g class="fish" transform="translate(450, 320)">
        <ellipse cx="15" cy="0" rx="14" ry="6" fill="#f43f5e" />
        <polygon points="0,0 -8,-5 -8,5" fill="#f43f5e" />
        <circle cx="22" cy="-2" r="1.5" fill="#ffffff" />
        <circle cx="23" cy="-2" r="0.8" fill="#1e293b" />
      </g>

      
      <g transform="translate(140, 320)">
        
        <circle cx="15" cy="20" r="24" fill="#22c55e" />
        <circle cx="40" cy="12" r="28" fill="#16a34a" />
        <circle cx="65" cy="22" r="22" fill="#15803d" />
        <circle cx="38" cy="32" r="20" fill="#15803d" />
        
        <circle cx="18" cy="12" r="5" fill="#dc2626" />
        <circle cx="22" cy="24" r="4.5" fill="#7c3aed" />
        <circle cx="35" cy="6" r="5" fill="#dc2626" />
        <circle cx="48" cy="18" r="5" fill="#dc2626" />
        <circle cx="38" cy="26" r="4.5" fill="#7c3aed" />
        <circle cx="60" cy="16" r="5" fill="#dc2626" />
        <circle cx="68" cy="28" r="4.5" fill="#7c3aed" />
      </g>

      
      <g id="bear" transform="translate(260, 240)">
        
        <ellipse cx="40" cy="115" rx="46" ry="12" fill="#1e3a1e" opacity="0.3" />

        
        <ellipse cx="40" cy="72" rx="36" ry="42" fill="#78350f" />
        
        <ellipse cx="40" cy="76" rx="24" ry="28" fill="#b45309" />

        
        <ellipse cx="14" cy="108" rx="14" ry="10" fill="#592407" />
        <ellipse cx="66" cy="108" rx="14" ry="10" fill="#592407" />
        
        <circle cx="14" cy="108" r="5" fill="#d97706" />
        <circle cx="66" cy="108" r="5" fill="#d97706" />

        
        <ellipse cx="6" cy="72" rx="10" ry="18" fill="#78350f" transform="rotate(15 6 72)" />
        <ellipse cx="74" cy="72" rx="10" ry="18" fill="#78350f" transform="rotate(-15 74 72)" />

        
        <circle cx="40" cy="28" r="28" fill="#78350f" />

        
        <circle cx="18" cy="8" r="10" fill="#78350f" />
        <circle cx="18" cy="8" r="5.5" fill="#fbcfe8" />
        <circle cx="62" cy="8" r="10" fill="#78350f" />
        <circle cx="62" cy="8" r="5.5" fill="#fbcfe8" />

        
        <ellipse cx="40" cy="34" rx="15" ry="11" fill="#fde68a" />
        <ellipse cx="40" cy="28" rx="6" ry="4.5" fill="#1e293b" />

        
        <g class="bear-face-happy">
          
          <circle cx="28" cy="22" r="3.5" fill="#1e293b" />
          <circle cx="52" cy="22" r="3.5" fill="#1e293b" />
          <circle cx="29" cy="20.5" r="1.2" fill="#ffffff" />
          <circle cx="53" cy="20.5" r="1.2" fill="#ffffff" />
          
          <path d="M34,34 Q40,40 46,34" stroke="#1e293b" stroke-width="2" fill="none" stroke-linecap="round" />
          
          <circle cx="22" cy="29" r="4" fill="#f472b6" opacity="0.5" />
          <circle cx="58" cy="29" r="4" fill="#f472b6" opacity="0.5" />
        </g>

        
        <g class="bear-face-sad">
          
          <path d="M25,23 Q29,20 33,24" stroke="#1e293b" stroke-width="2.5" fill="none" stroke-linecap="round" />
          <path d="M47,24 Q51,20 55,23" stroke="#1e293b" stroke-width="2.5" fill="none" stroke-linecap="round" />
          
          <ellipse cx="26" cy="30" rx="2" ry="3" fill="#38bdf8" />
          
          <path d="M35,38 Q40,33 45,38" stroke="#1e293b" stroke-width="2" fill="none" stroke-linecap="round" />
        </g>
      </g>

      
      <g class="thought-bubble">
        <circle cx="340" cy="220" r="4" fill="#ffffff" stroke="#94a3b8" stroke-width="1.5" />
        <circle cx="355" cy="200" r="7" fill="#ffffff" stroke="#94a3b8" stroke-width="1.5" />
        <rect x="345" y="140" width="70" height="42" rx="14" fill="#ffffff" stroke="#94a3b8" stroke-width="2" />
        <text x="380" y="167" font-size="20" text-anchor="middle" dominant-baseline="central">💧❓</text>
      </g>

      
      
      <path d="M90,105 L90,230" stroke="#15803d" stroke-width="2.5" stroke-dasharray="4,4" opacity="0.75" />
      <circle cx="90" cy="230" r="4" fill="#15803d" />

      
      <path d="M480,95 L440,165" stroke="#1d4ed8" stroke-width="2.5" stroke-dasharray="4,4" opacity="0.75" />
      <circle cx="440" cy="165" r="4" fill="#1d4ed8" />

      
      <path d="M90,340 L160,340" stroke="#a16207" stroke-width="2.5" stroke-dasharray="4,4" opacity="0.75" />
      <circle cx="160" cy="340" r="4" fill="#a16207" />

      
      <path d="M500,345 L460,345" stroke="#0369a1" stroke-width="2.5" stroke-dasharray="4,4" opacity="0.75" />
      <circle cx="460" cy="345" r="4" fill="#0369a1" />
    </svg>

    
    <div class="badge shelter">🪨 Shelter</div>
    <div class="badge space">🌲 Space to Roam</div>
    <div class="badge food">🍎 Food</div>
    <div class="badge water" id="waterBadge">💧 Water</div>

    
    <div class="controls">
      <div class="alert-banner" id="alertBanner">⚠️ All 4 parts are needed to survive!</div>
      <button class="toggle-btn" id="toggleBtn" aria-pressed="false">
        <span>What if water dries up?</span>
        <span>🏜️</span>
      </button>
    </div>
  </div>

  <script>
    const scene = document.getElementById('sceneWrap');
    const toggleBtn = document.getElementById('toggleBtn');
    let isDrought = false;

    toggleBtn.addEventListener('click', () => {
      isDrought = !isDrought;
      if (isDrought) {
        scene.classList.add('drought');
        toggleBtn.innerHTML = '<span>Restore water</span> <span>💧</span>';
        toggleBtn.setAttribute('aria-pressed', 'true');
      } else {
        scene.classList.remove('drought');
        toggleBtn.innerHTML = '<span>What if water dries up?</span> <span>🏜️</span>';
        toggleBtn.setAttribute('aria-pressed', 'false');
      }
    });
  </script>
</body>
</html>

What Makes Something Living?

Basic Needs of Plants and Animals

How Plants Get What They Need

How Animals Get What They Need

Exploring Different Habitats

How a Garden Meets Animals' Needs

How a Pond Meets Living Things' Needs

Comparing Animals and Their Young

Sorting Living Things by Features

science

Living Things and Their Habitats

Roots: Anchors and Water Absorbers

Stems: Plant Elevators and Supports

Leaves: The Food Factories of Plants

Flowers: Colors, Scents, and Pollination

Fruits: Seed Protectors and Helpers

Inside a Seed: Embryo and Food Store

What Seeds Need to Sprout

How Plants Move Toward Light and Water

How Wind and Water Help Spread Seeds

How Animals Help Plants: Pollination and Seeds

Eating Parts of Plants: Roots, Leaves, and Fruits

Plant Parts, Functions, and Growth

Body Coverings: Fur, Feathers, Scales, and Skin

Claws, Talons, and Paws: Tools for Gripping

Beaks and Mouthparts: Tools for Feeding

Teeth Types: Carnivores, Herbivores, and Omnivores

Legs, Fins, and Wings: Moving on Land, Water, and Air

Armor, Shells, and Spines: Defense Structures

Camouflage Patterns: Blending into Habitats

Antennae, Whiskers, and Sensory Adaptations

How Fish and Aquatic Creatures Breathe and Swim

Comparing Warm-Blooded and Cold-Blooded Animals

Animal Body Parts and Physical Adaptations

Łąka jako środowisko życia

Las jako środowisko życia — warstwy lasu

Środowisko wodne — jezioro i rzeka

Przyroda w mieście

Producenci w łańcuchu pokarmowym — rośliny

Konsumenci — roślinożercy i drapieżniki

Reducenty — grzyby i bakterie

Sieci pokarmowe w ekosystemie

Adaptacje roślin do środowiska

Adaptacje zwierząt do środowiska

Organizmy i ekosystemy

Exploring Land Habitats: Forests, Grasslands, and Deserts

Exploring Water Habitats: Ponds, Rivers, and Oceans

Living and Nonliving Interactions in Ecosystems

Sunlight Powers the Chain of Life

Producers: Plants That Make Their Own Food

Consumers: Animals That Eat Other Living Things

Building Food Chains From Producers to Consumers

Pond and Ocean Food Chains

Predator and Prey Relationships

How Living Things Share and Compete for Resources

Habitats, Food Chains, and Ecosystems

Helpful Bacteria and Yeast in Foods

Tiny Living Things: Looking Through a Magnifier

How Microbes Recycle Nutrients into Soil

Spotting Poisonous Plants: Ivy, Oak, and Berries

Staying Safe Around Wild Mushrooms

Venomous Critters: Wasps, Spiders, and Snakes

What to Do During Bites, Stings, and Plant Contact

Microorganisms, Fungi, and Nature Safety

Elementy żywe i nieożywione ekosystemu — biotop i biocenoza

Wzajemne powiązania między środowiskiem nieożywionym a organizmami

Producenci w ekosystemie — organizmy samożywne

Konsumenci I rzędu — zwierzęta roślinożerne

Konsumenci II i wyższych rzędów — drapieżniki i padlinożercy

Destruenci (reducenci) — rola grzybów i bakterii w glebie

Zamknięty obieg materii w ekosystemie

Jednokierunkowy przepływ energii przez ekosystem

Piramidy ekologiczne — struktura liczb, biomasy i energii

Ekosystemy naturalne, półnaturalne i sztuczne (antropogeniczne)

Ekosystem, poziomy troficzne i obieg materii

O que é uma cadeia alimentar?

O Sol como fonte de energia para a vida

Produtores, consumidores e decompositores

Construindo cadeias alimentares simples

Fluxo de energia nos ecossistemas

Ciclo da matéria: a matéria se transforma, não se perde

Diferenças entre fluxo de energia e ciclo da matéria

Cadeias alimentares e fluxo de energia nos ecossistemas

Łańcuchy i sieci pokarmowe — przepływ energii w ekosystemie

Konstruowanie łańcuchów spasania w ekosystemie lądowym (las, łąka)

Konstruowanie łańcuchów spasania w ekosystemie wodnym (jezioro, rzeka)

Łańcuchy detrytusowe — rozkład martwej materii organicznej

Określanie zależności pokarmowych na podstawie fragmentów sieci pokarmowych

Złożoność sieci troficznych — organizmy wszystkożerne i stabilność biocenozy

Wpływ wyginięcia lub usunięcia gatunku na strukturę sieci troficznej

Bioakumulacja i biomagnifikacja zanieczyszczeń w łańcuchu pokarmowym

Łańcuchy i sieci troficzne w ekosystemach

Czym jest populacja — definicja i cechy

Liczebność i zagęszczenie populacji — obliczanie

Rozrodczość i śmiertelność — wskaźniki populacyjne

Struktura przestrzenna populacji — typy rozmieszczenia

Struktura wiekowa populacji — piramidy wiekowe

Struktura płciowa populacji — analiza i znaczenie

Metodyka badań terenowych — metoda kwadratów i transektów

Obserwacja cech populacji wybranego gatunku — ćwiczenia

Czynniki ograniczające wzrost populacji i pojemność środowiska

Cechy populacji, struktura demograficzna i metody badań terenowych

Przegląd oddziaływań międzygatunkowych — tabela zależności (+ / - / 0)

Konkurencja wewnątrzgatunkowa i międzygatunkowa — przyczyny i skutki

Zasada konkurencyjnego wypierania i rozdzielenie nisz ekologicznych

Oddziaływania antagonistyczne — drapieżnictwo i roślinożerność

Przystosowania drapieżników oraz mechanizmy obronne ofiar

Pasożytnictwo — pasożyty zewnętrzne i wewnętrzne

Zależności nieantagonistyczne — mutualizm obligatoryjny

Zależności nieantagonistyczne — mutualizm fakultatywny

Zależności nieantagonistyczne — komensalizm

Planowanie doświadczenia — oddziaływania antagonistyczne

Oddziaływania międzygatunkowe w ekosystemie

Czynniki abiotyczne środowiska — wpływ na organizmy

Prawo tolerancji ekologicznej — minimum, optimum i maksimum

Stenobionty i eurybionty — organizmy wyspecjalizowane i plastyczne

Wpływ temperatury i wilgotności na procesy życiowe organizmów

Wpływ stężenia dwutlenku siarki (SO2) na organizmy żywe

Czym jest bioindykacja — organizmy wskaźnikowe w monitoringu środowiska

Porosty jako organizmy wskaźnikowe — ocena czystości powietrza

Skala porostowa — formy skorupiaste, listkowate i krzaczkowate

Praktyczna ocena czystości powietrza w okolicy — ćwiczenie terenowe

Inne bioindykatory — ocena czystości wód i gleb

Czynniki abiotyczne, tolerancja ekologiczna i bioindykatory

What Makes Something Alive?

What Makes Something Nonliving?

Do Living Things Have Basic Needs?

Do Living Things Produce Young?

What Living Things Need: Energy, Gases, Water, Soil, and Temperature

Sorting Living and Nonliving Things

What Is a Terrarium?

What Is an Aquarium?

How Living and Nonliving Things Work Together

Living and Nonliving Things in Ecosystems

Istota różnorodności biologicznej — definicja i trzy poziomy

Różnorodność genetyczna, gatunkowa i ekosystemowa — przykłady

Czynniki kształtujące bogactwo biologiczne na Ziemi

Gospodarcze użytkowanie ekosystemów — rolnictwo, leśnictwo i rybołówstwo

Usługi ekosystemowe — wartość przyrody dla człowieka

Wpływ działalności człowieka na bioróżnorodność — przegląd

Niszczenie i fragmentacja siedlisk przyrodniczych

Gatunki inwazyjne jako zagrożenie dla rodzimej flory i fauny

Zanieczyszczenia środowiska a bioróżnorodność — eutrofizacja, smog i kwaśne deszcze

Wpływ rozwoju komunikacji i turystyki na różnorodność biologiczną

Nadmierna eksploatacja zasobów — kłusownictwo, przełowienie i handel dziką przyrodą

Różnorodność biologiczna, użytkowanie ekosystemów i zagrożenia antropogeniczne

Napięcie elektryczne jako siła napędowa przepływu ładunków — jednostka wolt (V = J/C)

Jednostka napięcia wolt (V) i jej wielokrotności oraz podwielokrotności: mV, kV

Obliczenia z wzoru na napięcie elektryczne: U = W / q

Źródła napięcia: ogniwa galwaniczne, akumulatory, baterie i zasilacze

Analiza wykresu zależności ładunku od czasu q(t)

Synteza pojęć natężenia, napięcia i ładunku w zadaniach

Napięcie elektryczne, źródła zasilania i powiązania wielkości

Odnawialne i nieodnawialne zasoby przyrody — podział i przykłady

Wyczerpywanie się zasobów nieodnawialnych i poszukiwanie alternatyw

Istota zrównoważonego rozwoju — definicja i filary

Racjonalne gospodarowanie zasobami wody, gleby i lasów

Gospodarka o obiegu zamkniętym i zasada 3R (Reduce, Reuse, Recycle)

Ochrona gatunkowa roślin, grzybów i zwierząt w Polsce

Ochrona obszarowa — parki narodowe i rezerwaty przyrody

Parki krajobrazowe, pomniki przyrody i użytki ekologiczne

Europejska sieć ekologiczna Natura 2000 w Polsce

Ochrona in situ i ex situ oraz restytucja gatunków

Świadome działanie na rzecz ochrony przyrody

Ochrona przyrody, zasoby naturalne i zrównoważony rozwój

What Is a Food Chain?

Who Eats Whom in a Food Chain?

Drawing Our Own Food Chains

Tracing Food Chains

Co to jest ekosystem — biocenoza i biotop

Morze jako ekosystem

Morze Bałtyckie — nasze morze i jego organizmy

Pole uprawne jako ekosystem

Staw jako ekosystem

Różnorodność ekosystemów — od łąki po morze

Las gospodarczy a las naturalny — różnice

Składowe ekosystemu na przykładzie lasu

Funkcje ekosystemu — co robi i dla kogo

Martwe drzewo w lesie — rola w ekosystemie

Polany leśne — znaczenie dla bioróżnorodności

Torfowiska — specyficzny ekosystem

Porównywanie różnych ekosystemów — las, łąka, pole, staw

Ekosystemy a zmiany pór roku — jak zmienia się przyroda

Funkcjonowanie ekosystemów — las i nie tylko

Przemiana energii elektrycznej w energię termiczną — prawo Joule'a-Lenza

Przemiana energii elektrycznej w energię mechaniczną — silnik elektryczny

Przemiana energii elektrycznej w energię promienistą, akustyczną i chemiczną

OGS.2.LS.5

Aligned learning resources

Related diagrams