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

    .header-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: 480px;
      margin-bottom: 8px;
    }

    .title-tag {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      color: #64748b;
    }

    .play-btn {
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      padding: 4px 10px;
      font-size: 12px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .play-btn:active { background: #e2e8f0; }

    .pyramid-stage {
      position: relative;
      width: 100%;
      max-width: 460px;
      height: 280px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
      gap: 8px;
    }

    .tier {
      position: relative;
      height: 52px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 14px;
      color: #ffffff;
      font-weight: 700;
      box-shadow: 0 2px 6px rgba(0,0,0,0.06);
      border: 2px solid transparent;
      cursor: pointer;
      transition: opacity 0.3s ease, filter 0.3s ease, transform 0.2s ease;
    }

    .tier:hover {
      filter: brightness(1.05);
    }

    .tier.dimmed {
      opacity: 0.35;
      filter: grayscale(0.2);
    }

    .tier.active {
      border-color: #1e2945;
      box-shadow: 0 0 0 2px #ffffff, 0 4px 12px rgba(0,0,0,0.15);
    }

    .tier-4 { width: 38%; background: #ef4444; z-index: 4; }
    .tier-3 { width: 58%; background: #f97316; z-index: 3; }
    .tier-2 { width: 78%; background: #84cc16; z-index: 2; }
    .tier-1 { width: 98%; background: #16a34a; z-index: 1; }

    .tier-label {
      font-size: 13px;
      display: flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
    }

    .tier-joules {
      font-size: 14px;
      font-weight: 800;
      background: rgba(0, 0, 0, 0.2);
      padding: 3px 7px;
      border-radius: 5px;
      letter-spacing: 0.3px;
    }

    /* Heat Loss Callouts */
    .heat-callout {
      position: absolute;
      right: 2px;
      display: flex;
      align-items: center;
      gap: 4px;
      background: #fff;
      border: 1px dashed #f87171;
      color: #dc2626;
      font-size: 11px;
      font-weight: 700;
      padding: 2px 7px;
      border-radius: 12px;
      pointer-events: none;
      transition: opacity 0.3s ease;
      z-index: 10;
      white-space: nowrap;
    }

    .heat-1 { bottom: 56px; }
    .heat-2 { bottom: 116px; }
    .heat-3 { bottom: 176px; }

    .transfer-arrow {
      position: absolute;
      left: 14px;
      color: #0284c7;
      font-size: 11px;
      font-weight: 800;
      background: #e0f2fe;
      border: 1px solid #bae6fd;
      padding: 1px 6px;
      border-radius: 10px;
      pointer-events: none;
      z-index: 10;
      transition: opacity 0.3s ease;
    }

    .arrow-1 { bottom: 57px; }
    .arrow-2 { bottom: 117px; }
    .arrow-3 { bottom: 177px; }

    /* Stepper Controls */
    .nav-bar {
      display: flex;
      justify-content: center;
      gap: 6px;
      width: 100%;
      max-width: 460px;
      margin-top: 10px;
      flex-wrap: wrap;
    }

    .nav-pill {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      color: #64748b;
      font-size: 12px;
      font-weight: 600;
      padding: 6px 12px;
      border-radius: 20px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .nav-pill.active {
      background: #1e2945;
      color: #ffffff;
      border-color: #1e2945;
    }
  </style>
</head>
<body>

  <div class="header-bar">
    <span class="title-tag">10% Rule: Energy Transfer</span>
    <button class="play-btn" id="playBtn" aria-label="Toggle Auto Play">
      <span id="playIcon">⏸</span> Auto
    </button>
  </div>

  <div class="pyramid-stage">
    
    <div class="tier tier-4" data-index="3" role="button" tabindex="0">
      <span class="tier-label">🦅 Apex</span>
      <span class="tier-joules">10 J</span>
    </div>

    <div class="heat-callout heat-3">90% Heat ♨</div>
    <div class="transfer-arrow arrow-3">↑ 10%</div>

    
    <div class="tier tier-3" data-index="2" role="button" tabindex="0">
      <span class="tier-label">🐍 Secondary</span>
      <span class="tier-joules">100 J</span>
    </div>

    <div class="heat-callout heat-2">90% Heat ♨</div>
    <div class="transfer-arrow arrow-2">↑ 10%</div>

    
    <div class="tier tier-2" data-index="1" role="button" tabindex="0">
      <span class="tier-label">🦗 Primary</span>
      <span class="tier-joules">1,000 J</span>
    </div>

    <div class="heat-callout heat-1">90% Heat ♨</div>
    <div class="transfer-arrow arrow-1">↑ 10%</div>

    
    <div class="tier tier-1" data-index="0" role="button" tabindex="0">
      <span class="tier-label">🌱 Producers</span>
      <span class="tier-joules">10,000 J</span>
    </div>
  </div>

  <div class="nav-bar">
    <button class="nav-pill active" data-step="0">Producers</button>
    <button class="nav-pill" data-step="1">Primary</button>
    <button class="nav-pill" data-step="2">Secondary</button>
    <button class="nav-pill" data-step="3">Apex</button>
    <button class="nav-pill" data-step="4">All Levels</button>
  </div>

  <script>
    const tiers = document.querySelectorAll('.tier');
    const pills = document.querySelectorAll('.nav-pill');
    const heats = document.querySelectorAll('.heat-callout');
    const arrows = document.querySelectorAll('.transfer-arrow');
    const playBtn = document.getElementById('playBtn');
    const playIcon = document.getElementById('playIcon');

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

    function applyStep(step) {
      currentStep = step;

      pills.forEach((p, idx) => {
        p.classList.toggle('active', idx === step);
      });

      if (step === 4) {
        // Show All
        tiers.forEach(t => {
          t.classList.remove('dimmed');
          t.classList.remove('active');
        });
        heats.forEach(h => h.style.opacity = '1');
        arrows.forEach(a => a.style.opacity = '1');
      } else {
        tiers.forEach((t, idx) => {
          t.classList.toggle('active', idx === step);
          t.classList.toggle('dimmed', idx !== step);
        });

        heats.forEach((h, idx) => {
          h.style.opacity = (idx < step) ? '1' : '0.2';
        });

        arrows.forEach((a, idx) => {
          a.style.opacity = (idx < step) ? '1' : '0.2';
        });
      }
    }

    function nextStep() {
      const next = (currentStep + 1) % 5;
      applyStep(next);
    }

    function startTimer() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, 3200);
      autoPlay = true;
      playIcon.textContent = '⏸';
    }

    function stopTimer() {
      if (timer) clearInterval(timer);
      timer = null;
      autoPlay = false;
      playIcon.textContent = '▶';
    }

    playBtn.addEventListener('click', () => {
      if (autoPlay) {
        stopTimer();
      } else {
        nextStep();
        startTimer();
      }
    });

    pills.forEach(pill => {
      pill.addEventListener('click', () => {
        stopTimer();
        applyStep(parseInt(pill.dataset.step, 10));
      });
    });

    tiers.forEach(tier => {
      tier.addEventListener('click', () => {
        stopTimer();
        applyStep(parseInt(tier.dataset.index, 10));
      });
    });

    // Start in step 0
    applyStep(0);
    startTimer();
  </script>
</body>
</html>

Comparing Food Chains Across Different Biomes

Structural and Behavioral Adaptations in Extreme Biomes

Plate Tectonics, Continental Drift, and Biogeography

Geographic Isolation and Allopatric Speciation

Climate History and Mass Extinction Events

Adaptive Radiation and Post-Extinction Biodiversity Recovery

science

Biome Adaptations, Geological Isolation, and Speciation

La teoría de la deriva continental y la tectónica de placas

Modelos de placas tectónicas y deriva continental

De Pangea a los continentes actuales: aislamiento geográfico

El gran intercambio biótico americano y el istmo de Panamá

Orogenia andina y la especiación en los Andes colombianos

Pisos bioclimáticos y zonas de vida en Colombia

Corrientes oceánicas, vientos alisios y régimen de lluvias

Biomas del mundo: tundra, taiga, bosque templado y desierto

El cinturón tropical y los bosques húmedos ecuatoriales

Endemismo y refugios del Pleistoceno

Síntesis biogeográfica: geología, clima y evolución

Tectónica de placas, clima y biogeografía

Adaptaciones morfológicas, fisiológicas y etológicas

Adaptaciones al frío y a la radiación en los páramos

Adaptaciones a la aridez en La Guajira y el desierto de La Tatacoa

Adaptaciones a la salinidad y anoxia en los manglares del Caribe y Pacífico

Adaptaciones en la selva húmeda del Chocó y la Amazonía

Adaptaciones emblemáticas de Colombia: del cóndor andino al oso de anteojos

Adaptaciones de la fauna y flora colombiana a sus ecosistemas

Las grandes extinciones masivas en la historia de la Tierra

Formulación de hipótesis sobre la extinción de los dinosaurios

Causas antrópicas de extinción: la sexta gran extinción

Especies amenazadas y en peligro de extinción en Colombia

Especies invasoras y su impacto en la fauna nativa colombiana

Origen de la biodiversidad y conservación biológica

Extinción de especies y conservación en Colombia

OGS.8.LS.8

OGS.8.LS.8

Aligned learning resources

Related diagrams