<!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, sans-serif; }
    body {
      padding: 12px;
      background: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      gap: 10px;
      user-select: none;
      -webkit-user-select: none;
    }
    
    .stack-container {
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 100%;
    }

    .layer {
      position: relative;
      border-radius: 12px;
      padding: 12px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      transition: box-shadow 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
      border: 2px solid transparent;
    }

    .layer.active {
      border-color: #d97706;
      box-shadow: 0 4px 14px rgba(217, 119, 6, 0.25);
    }

    .layer-top {
      background: #fef3c7;
      color: #78350f;
    }

    .layer-mid {
      background: #fed7aa;
      color: #7c2d12;
    }

    .layer-bot {
      background: #78350f;
      color: #fef3c7;
    }

    .layer-info {
      display: flex;
      flex-direction: column;
      gap: 2px;
      z-index: 2;
    }

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

    .layer-sub {
      font-size: 13px;
      opacity: 0.85;
      font-weight: 500;
    }

    .creature-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(255, 255, 255, 0.9);
      color: #1e2945;
      padding: 6px 10px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid #e6e6e6;
      box-shadow: 0 2px 5px rgba(0,0,0,0.06);
      transition: transform 0.2s ease, background-color 0.2s ease;
      z-index: 2;
    }

    .layer-bot .creature-badge {
      background: rgba(254, 243, 199, 0.95);
      border-color: rgba(255, 255, 255, 0.2);
    }

    .icon-anim {
      font-size: 20px;
      line-height: 1;
    }

    /* Ambient texture accents */
    .texture-bg {
      position: absolute;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      opacity: 0.18;
      font-size: 42px;
      pointer-events: none;
      z-index: 1;
    }

    /* Filter / Tab Bar */
    .filter-row {
      display: flex;
      justify-content: center;
      gap: 8px;
    }

    .filter-btn {
      padding: 6px 12px;
      font-size: 12px;
      font-weight: 600;
      border-radius: 16px;
      border: 1px solid #e6e6e6;
      background: #ffffff;
      color: #1e2945;
      cursor: pointer;
      transition: background-color 0.2s, color 0.2s, border-color 0.2s;
    }

    .filter-btn.active {
      background: #d97706;
      color: #ffffff;
      border-color: #d97706;
    }
  </style>
</head>
<body>

  <div class="filter-row">
    <button class="filter-btn active" onclick="selectLayer('all')">Show All</button>
    <button class="filter-btn" onclick="selectLayer('top')">Top</button>
    <button class="filter-btn" onclick="selectLayer('mid')">Middle</button>
    <button class="filter-btn" onclick="selectLayer('bot')">Soil</button>
  </div>

  <div class="stack-container">
    
    <div class="layer layer-top" id="layer-top" onclick="selectLayer('top')">
      <div class="layer-info">
        <span class="layer-title">🍂 Dry Leaves</span>
        <span class="layer-sub">Wind Shield</span>
      </div>
      <div class="creature-badge">
        <span class="icon-anim">🪲</span>
        <span>Ground Beetle</span>
      </div>
      <div class="texture-bg">🍃</div>
    </div>

    
    <div class="layer layer-mid" id="layer-mid" onclick="selectLayer('mid')">
      <div class="layer-info">
        <span class="layer-title">💧 Damp Leaves</span>
        <span class="layer-sub">Food &amp; Moisture</span>
      </div>
      <div class="creature-badge">
        <span class="icon-anim">🐌</span>
        <span>Snail</span>
      </div>
      <div class="texture-bg">🍂</div>
    </div>

    
    <div class="layer layer-bot" id="layer-bot" onclick="selectLayer('bot')">
      <div class="layer-info">
        <span class="layer-title">🌱 Rich Soil</span>
        <span class="layer-sub">Deep Shelter</span>
      </div>
      <div class="creature-badge">
        <span class="icon-anim">🐛</span>
        <span>Millipede</span>
      </div>
      <div class="texture-bg">🪱</div>
    </div>
  </div>

  <script>
    function selectLayer(type) {
      const layers = ['top', 'mid', 'bot'];
      const buttons = document.querySelectorAll('.filter-btn');
      
      buttons.forEach(b => {
        const txt = b.textContent.toLowerCase();
        if ((type === 'all' && txt.includes('all')) ||
            (type === 'top' && txt.includes('top')) ||
            (type === 'mid' && txt.includes('middle')) ||
            (type === 'bot' && txt.includes('soil'))) {
          b.classList.add('active');
        } else {
          b.classList.remove('active');
        }
      });

      layers.forEach(id => {
        const el = document.getElementById('layer-' + id);
        if (type === 'all' || type === id) {
          el.style.opacity = '1';
          el.classList.toggle('active', type === id);
        } else {
          el.style.opacity = '0.4';
          el.classList.remove('active');
        }
      });
    }
  </script>
</body>
</html>

Discovering Micro-habitats

<!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: transparent;
      padding: 12px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 100%;
    }
    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      width: 100%;
    }
    @media (max-width: 560px) {
      .grid {
        grid-template-columns: 1fr;
        gap: 10px;
      }
    }
    .habitat-card {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      padding: 14px 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      transition: box-shadow 0.2s ease, border-color 0.2s ease;
      cursor: pointer;
    }
    .habitat-card:hover, .habitat-card.active {
      border-color: #22b7ff;
      box-shadow: 0 4px 12px rgba(34, 183, 255, 0.15);
    }
    .card-header {
      display: flex;
      align-items: center;
      gap: 8px;
      border-bottom: 1px solid #f1f5f9;
      padding-bottom: 8px;
    }
    .icon-badge {
      width: 34px;
      height: 34px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      flex-shrink: 0;
    }
    .badge-log { background: #fef3c7; }
    .badge-leaf { background: #ffedd5; }
    .badge-flower { background: #fce7f3; }

    .card-title {
      font-size: 15px;
      font-weight: 700;
      line-height: 1.2;
      color: #1e2945;
    }
    .section-label {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
      margin-bottom: 4px;
    }
    .pill-group {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }
    .pill {
      font-size: 13px;
      font-weight: 500;
      padding: 3px 8px;
      border-radius: 20px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      color: #334155;
    }
    .pill-creature {
      background: #f0fdf4;
      border-color: #bbf7d0;
      color: #166534;
      font-weight: 600;
    }
  </style>
</head>
<body>

  <div class="grid">
    
    <div class="habitat-card" onclick="selectCard(this)">
      <div class="card-header">
        <div class="icon-badge badge-log">🪵</div>
        <div class="card-title">Under a Log</div>
      </div>
      <div>
        <div class="section-label">Conditions</div>
        <div class="pill-group">
          <span class="pill">🌑 Dark</span>
          <span class="pill">❄️ Cool</span>
          <span class="pill">💧 Damp</span>
        </div>
      </div>
      <div>
        <div class="section-label">Minibeasts</div>
        <div class="pill-group">
          <span class="pill pill-creature">🪳 Woodlice</span>
          <span class="pill pill-creature">🐌 Slugs</span>
        </div>
      </div>
    </div>

    
    <div class="habitat-card" onclick="selectCard(this)">
      <div class="card-header">
        <div class="icon-badge badge-leaf">🍂</div>
        <div class="card-title">Leaf Litter</div>
      </div>
      <div>
        <div class="section-label">Conditions</div>
        <div class="pill-group">
          <span class="pill">⛅ Shaded</span>
          <span class="pill">💧 Moist</span>
          <span class="pill">🌱 Decaying</span>
        </div>
      </div>
      <div>
        <div class="section-label">Minibeasts</div>
        <div class="pill-group">
          <span class="pill pill-creature">🪲 Beetles</span>
          <span class="pill pill-creature">🐛 Millipedes</span>
        </div>
      </div>
    </div>

    
    <div class="habitat-card" onclick="selectCard(this)">
      <div class="card-header">
        <div class="icon-badge badge-flower">🌸</div>
        <div class="card-title">Flower Bed</div>
      </div>
      <div>
        <div class="section-label">Conditions</div>
        <div class="pill-group">
          <span class="pill">☀️ Bright</span>
          <span class="pill">🌡️ Warm</span>
          <span class="pill">🌺 Flowering</span>
        </div>
      </div>
      <div>
        <div class="section-label">Minibeasts</div>
        <div class="pill-group">
          <span class="pill pill-creature">🐝 Bees</span>
          <span class="pill pill-creature">🦋 Butterflies</span>
          <span class="pill pill-creature">🐜 Ants</span>
        </div>
      </div>
    </div>
  </div>

  <script>
    function selectCard(element) {
      document.querySelectorAll('.habitat-card').forEach(card => card.classList.remove('active'));
      element.classList.add('active');
    }
  </script>
</body>
</html>

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

    .wrapper {
      width: 100%;
      max-width: 520px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    /* Forest Box */
    .forest-card {
      width: 100%;
      background: #ffffff;
      border: 2px solid #e6e6e6;
      border-radius: 12px;
      padding: 10px 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .forest-card.active {
      border-color: #10b981;
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
    }

    .forest-title {
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .forest-scene {
      font-size: 28px;
      letter-spacing: 4px;
      margin-top: 2px;
      line-height: 1.1;
    }

    /* Connector lines */
    .connector-svg {
      width: 100%;
      height: 36px;
      display: block;
    }

    .connector-line {
      stroke: #d1d5db;
      stroke-width: 2.5;
      stroke-dasharray: 4 4;
      fill: none;
      transition: stroke 0.3s ease, stroke-width 0.3s ease;
    }

    .connector-line.active {
      stroke: #10b981;
      stroke-width: 3;
      stroke-dasharray: none;
    }

    /* Micro-habitats grid */
    .micro-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      width: 100%;
    }

    .micro-card {
      background: #ffffff;
      border: 2px solid #e6e6e6;
      border-radius: 12px;
      padding: 10px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      cursor: pointer;
      transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
    }

    .micro-card.active {
      border-color: #10b981;
      background: #ecfdf5;
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
    }

    .micro-icon {
      font-size: 28px;
      line-height: 1.1;
      margin-bottom: 4px;
    }

    .micro-label {
      font-size: 13px;
      font-weight: 700;
      color: #1e2945;
      line-height: 1.2;
    }

    .creatures {
      font-size: 18px;
      height: 22px;
      margin-top: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 2px;
      opacity: 0.4;
      transition: opacity 0.25s ease;
    }

    .micro-card.active .creatures {
      opacity: 1;
    }

    /* Stepper / Controls */
    .controls {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 6px;
    }

    .step-btn {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 20px;
      padding: 5px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: background-color 0.2s ease, border-color 0.2s ease;
    }

    .step-btn:active {
      background: #f1f5f9;
    }

    .nav-dots {
      display: flex;
      gap: 6px;
    }

    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      transition: background-color 0.2s ease;
    }

    .dot.active {
      background: #10b981;
    }
  </style>
</head>
<body>

<div class="wrapper">
  
  <div class="forest-card active" id="forestCard">
    <div class="forest-title">
      <span>🌲</span> Large Habitat: Forest
    </div>
    <div class="forest-scene">
      🌲 🌳 🦌 🌲 🌳
    </div>
  </div>

  
  <svg class="connector-svg" viewBox="0 0 300 36" preserveAspectRatio="none">
    <line id="line0" class="connector-line active" x1="150" y1="0" x2="50" y2="36" />
    <line id="line1" class="connector-line" x1="150" y1="0" x2="150" y2="36" />
    <line id="line2" class="connector-line" x1="150" y1="0" x2="250" y2="36" />
  </svg>

  
  <div class="micro-grid">
    
    <div class="micro-card active" data-index="0">
      <div class="micro-icon">🪵</div>
      <div class="micro-label">Under a Log</div>
      <div class="creatures">🪱 🐌 🐜</div>
    </div>

    
    <div class="micro-card" data-index="1">
      <div class="micro-icon">🍂</div>
      <div class="micro-label">Leaf Litter</div>
      <div class="creatures">🕷️ 🪲 🍄</div>
    </div>

    
    <div class="micro-card" data-index="2">
      <div class="micro-icon">🌸</div>
      <div class="micro-label">Flower Bed</div>
      <div class="creatures">🐝 🦋 🐞</div>
    </div>
  </div>

  
  <div class="controls">
    <button class="step-btn" id="toggleBtn">⏸ Pause</button>
    <div class="nav-dots">
      <div class="dot active" data-index="0"></div>
      <div class="dot" data-index="1"></div>
      <div class="dot" data-index="2"></div>
    </div>
  </div>
</div>

<script>
  let currentIdx = 0;
  let isPlaying = true;
  let timer = null;

  const cards = document.querySelectorAll('.micro-card');
  const dots = document.querySelectorAll('.dot');
  const lines = [
    document.getElementById('line0'),
    document.getElementById('line1'),
    document.getElementById('line2')
  ];
  const toggleBtn = document.getElementById('toggleBtn');

  function setMicro(index) {
    currentIdx = index;
    cards.forEach((card, i) => {
      card.classList.toggle('active', i === index);
    });
    dots.forEach((dot, i) => {
      dot.classList.toggle('active', i === index);
    });
    lines.forEach((line, i) => {
      line.classList.toggle('active', i === index);
    });
  }

  function nextMicro() {
    setMicro((currentIdx + 1) % 3);
  }

  function startTimer() {
    if (timer) clearInterval(timer);
    timer = setInterval(nextMicro, 3000);
  }

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

  toggleBtn.addEventListener('click', () => {
    isPlaying = !isPlaying;
    if (isPlaying) {
      toggleBtn.textContent = '⏸ Pause';
      nextMicro();
      startTimer();
    } else {
      toggleBtn.textContent = '▶ Play';
      stopTimer();
    }
  });

  cards.forEach((card) => {
    card.addEventListener('click', () => {
      const idx = parseInt(card.getAttribute('data-index'), 10);
      setMicro(idx);
      if (isPlaying) startTimer(); // reset timer cycle
    });
  });

  dots.forEach((dot) => {
    dot.addEventListener('click', () => {
      const idx = parseInt(dot.getAttribute('data-index'), 10);
      setMicro(idx);
      if (isPlaying) startTimer();
    });
  });

  startTimer();
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fallen Log Micro-habitat</title>
  <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: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 12px;
      user-select: none;
    }

    .scene-container {
      width: 100%;
      max-width: 540px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

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

    .title {
      font-size: 17px;
      font-weight: 700;
      color: #1e2945;
      letter-spacing: -0.01em;
    }

    .subtitle {
      font-size: 13px;
      color: #64748b;
      margin-top: 2px;
    }

    /* Diagram Canvas */
    .cross-section {
      position: relative;
      width: 100%;
      min-height: 320px;
      border-radius: 16px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      box-shadow: 0 4px 12px rgba(61, 46, 36, 0.08);
      border: 1.5px solid #e2e8f0;
    }

    /* Top Habitat: Dry & Bright */
    .top-habitat {
      position: relative;
      flex: 1;
      min-height: 110px;
      background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 60%, #fde68a 100%);
      padding: 10px 14px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      z-index: 1;
    }

    .sky-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
    }

    .integrated-label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 16px;
      letter-spacing: 0.01em;
    }

    .top-label {
      background: rgba(255, 255, 255, 0.85);
      color: #b45309;
      border: 1px solid #fde68a;
      backdrop-filter: blur(4px);
    }

    .sun-group {
      display: flex;
      align-items: center;
      gap: 6px;
      color: #d97706;
      font-size: 13px;
      font-weight: 600;
    }

    .sun-icon {
      font-size: 20px;
      line-height: 1;
      animation: pulse-sun 3.5s ease-in-out infinite alternate;
    }

    @keyframes pulse-sun {
      0% { opacity: 0.85; transform: scale(0.96); }
      100% { opacity: 1; transform: scale(1.06); }
    }

    /* Log Graphic & Interactive layer */
    .log-wrapper {
      position: relative;
      z-index: 10;
      margin: -22px 14px -22px 14px;
      cursor: pointer;
    }

    .log {
      height: 52px;
      background: linear-gradient(180deg, #a16b5a 0%, #8d5b4c 45%, #6e4235 100%);
      border-radius: 26px;
      border: 3px solid #543126;
      box-shadow: 0 6px 14px rgba(61, 46, 36, 0.35);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.6s ease;
      position: relative;
    }

    .log:hover {
      box-shadow: 0 8px 18px rgba(61, 46, 36, 0.45);
    }

    .log.lifted {
      transform: translateY(-28px);
      box-shadow: 0 16px 24px rgba(61, 46, 36, 0.4);
    }

    .log-grain {
      width: 75%;
      height: 2px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 2px;
      box-shadow: 0 6px 0 rgba(0, 0, 0, 0.18), 0 -6px 0 rgba(255, 255, 255, 0.15);
    }

    .log-text {
      position: absolute;
      font-size: 12px;
      font-weight: 700;
      color: rgba(255, 255, 255, 0.95);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
      background: rgba(0, 0, 0, 0.2);
      padding: 2px 8px;
      border-radius: 10px;
    }

    /* Underneath Soil Habitat */
    .soil-habitat {
      position: relative;
      flex: 1.3;
      min-height: 170px;
      background: #3d2e24;
      border-top: 3px solid #271d17;
      padding: 26px 12px 14px 12px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      z-index: 2;
    }

    .soil-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 2px;
      margin-bottom: 8px;
    }

    .bottom-label {
      background: rgba(14, 116, 144, 0.4);
      color: #e0f2fe;
      border: 1px solid rgba(56, 189, 248, 0.35);
    }

    .moisture-status {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      color: #38bdf8;
      font-size: 12px;
      font-weight: 600;
    }

    .drop {
      color: #38bdf8;
      display: inline-block;
      animation: gentle-moisture 2.8s ease-in-out infinite alternate;
    }

    .drop:nth-child(2) { animation-delay: 0.9s; }
    .drop:nth-child(3) { animation-delay: 1.8s; }

    @keyframes gentle-moisture {
      0% { opacity: 0.5; transform: translateY(0); }
      100% { opacity: 1; transform: translateY(2px); }
    }

    /* Animals Badges Container */
    .animals-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 8px;
      width: 100%;
    }

    .organism-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(255, 255, 255, 0.13);
      border: 1px solid rgba(255, 255, 255, 0.22);
      border-radius: 20px;
      padding: 6px 12px;
      color: #f8fafc;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.01em;
      backdrop-filter: blur(4px);
      flex: 1 1 auto;
      max-width: fit-content;
      min-width: 95px;
      justify-content: center;
    }

    .organism-badge span.emoji {
      font-size: 16px;
      line-height: 1;
    }

    /* Interactive hint */
    .interactive-hint {
      text-align: center;
      font-size: 12px;
      color: #64748b;
      font-weight: 500;
      margin-top: 2px;
    }

    @media (max-width: 380px) {
      .cross-section {
        min-height: 310px;
      }
      .organism-badge {
        font-size: 12px;
        padding: 5px 9px;
      }
      .integrated-label {
        font-size: 12px;
        padding: 3px 8px;
      }
    }
  </style>
</head>
<body>
  <div class="scene-container">
    <div class="header-bar">
      <h1 class="title">Fallen Log Micro-habitat</h1>
      <p class="subtitle">Different conditions create distinct living zones</p>
    </div>

    
    <div class="cross-section">
      
      <div class="top-habitat">
        <div class="sky-header">
          <div class="integrated-label top-label">
            ☀️ Top: Dry &amp; Bright
          </div>
          <div class="sun-group">
            <span class="sun-icon">☀️</span>
            <span>Direct Sun</span>
          </div>
        </div>
      </div>

      
      <div id="logWrapper" class="log-wrapper" title="Click to lift log">
        <div id="logElement" class="log">
          <div class="log-grain"></div>
          <div class="log-text">🪵 Fallen Log (Tap to lift)</div>
        </div>
      </div>

      
      <div class="soil-habitat">
        <div class="soil-header">
          <div class="integrated-label bottom-label">
            💧 Underneath: Dark, Damp, Cool
          </div>
          <div class="moisture-status">
            <span class="drop">💧</span>
            <span class="drop">💧</span>
            <span class="drop">💧</span>
            <span>High Moisture</span>
          </div>
        </div>

        
        <div class="animals-container">
          <div class="organism-badge">
            <span class="emoji">🪲</span>
            <span>Woodlouse</span>
          </div>
          <div class="organism-badge">
            <span class="emoji">🐛</span>
            <span>Centipede</span>
          </div>
          <div class="organism-badge">
            <span class="emoji">🪱</span>
            <span>Earthworm</span>
          </div>
        </div>
      </div>
    </div>

    <div id="hintText" class="interactive-hint">
      👆 Tap the log to explore beneath the surface
    </div>
  </div>

  <script>
    const logWrapper = document.getElementById('logWrapper');
    const logElement = document.getElementById('logElement');
    const hintText = document.getElementById('hintText');
    let isLifted = false;

    logWrapper.addEventListener('click', () => {
      isLifted = !isLifted;
      if (isLifted) {
        logElement.classList.add('lifted');
        hintText.textContent = '✨ Lifted! Sheltered underside retains moisture and protection.';
      } else {
        logElement.classList.remove('lifted');
        hintText.textContent = '👆 Tap the log to explore beneath the surface';
      }
    });
  </script>
</body>
</html>

science.ks1.y2.t1.s3

Aligned learning resources

Related diagrams