<!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 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      width: 100%;
      max-width: 580px;
    }

    .organism-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 14px;
      padding: 10px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-shadow: 0 2px 8px rgba(30, 41, 69, 0.05);
      position: relative;
    }

    .role-tag {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
      margin-bottom: 4px;
    }

    .organism-stage {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
    }

    .icon-box {
      font-size: 32px;
      line-height: 1;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .name-label {
      font-size: 14px;
      font-weight: 700;
      color: #1e2945;
      margin-top: 2px;
    }

    .arrow-divider {
      color: #94a3b8;
      font-size: 16px;
      line-height: 1;
      margin: 6px 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .offspring-box {
      width: 100%;
      min-height: 84px;
      background: #f8fafc;
      border: 1px dashed #cbd5e1;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 6px 4px;
      position: relative;
      overflow: hidden;
      transition: all 0.3s ease;
    }

    .offspring-card.revealed .offspring-box {
      background: #f0fdf4;
      border: 1px solid #86efac;
    }

    .offspring-content {
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 0.3s ease, transform 0.3s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      pointer-events: none;
    }

    .offspring-card.revealed .offspring-content {
      opacity: 1;
      transform: translateY(0);
    }

    .reveal-btn {
      position: absolute;
      background: #0284c7;
      color: #ffffff;
      border: none;
      border-radius: 6px;
      padding: 6px 10px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(2, 132, 199, 0.25);
      transition: opacity 0.3s ease, transform 0.2s ease;
    }

    .offspring-card.revealed .reveal-btn {
      opacity: 0;
      pointer-events: none;
      transform: scale(0.9);
    }

    .offspring-tag {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #16a34a;
      margin-bottom: 2px;
    }
  </style>
</head>
<body>
  <div class="gallery-grid">
    
    <div class="organism-card offspring-card" id="card1">
      <span class="role-tag">Parent</span>
      <div class="organism-stage">
        <div class="icon-box">🐕</div>
        <div class="name-label">Dog</div>
      </div>
      
      <div class="arrow-divider">↓</div>
      
      <div class="offspring-box">
        <button class="reveal-btn" onclick="toggleCard('card1')">Reveal</button>
        <div class="offspring-content">
          <span class="offspring-tag">Offspring</span>
          <div class="icon-box">🐶</div>
          <div class="name-label">Puppy</div>
        </div>
      </div>
    </div>

    
    <div class="organism-card offspring-card" id="card2">
      <span class="role-tag">Parent</span>
      <div class="organism-stage">
        <div class="icon-box">🐦</div>
        <div class="name-label">Robin</div>
      </div>
      
      <div class="arrow-divider">↓</div>
      
      <div class="offspring-box">
        <button class="reveal-btn" onclick="toggleCard('card2')">Reveal</button>
        <div class="offspring-content">
          <span class="offspring-tag">Offspring</span>
          <div class="icon-box">🐣</div>
          <div class="name-label">Chick</div>
        </div>
      </div>
    </div>

    
    <div class="organism-card offspring-card" id="card3">
      <span class="role-tag">Parent</span>
      <div class="organism-stage">
        <div class="icon-box">🌻</div>
        <div class="name-label">Sunflower</div>
      </div>
      
      <div class="arrow-divider">↓</div>
      
      <div class="offspring-box">
        <button class="reveal-btn" onclick="toggleCard('card3')">Reveal</button>
        <div class="offspring-content">
          <span class="offspring-tag">Offspring</span>
          <div class="icon-box">🌱</div>
          <div class="name-label">Sprout</div>
        </div>
      </div>
    </div>
  </div>

  <script>
    function toggleCard(id) {
      const card = document.getElementById(id);
      if (card) {
        card.classList.toggle('revealed');
      }
    }
  </script>
</body>
</html>

What Is an Offspring?

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

    /* Tab Switcher */
    .tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 16px;
      background: #f1f5f9;
      padding: 4px;
      border-radius: 999px;
    }

    .tab-btn {
      border: none;
      background: transparent;
      padding: 8px 18px;
      font-size: 15px;
      font-weight: 700;
      color: #64748b;
      border-radius: 999px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.25s ease;
    }

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

    /* Comparison Area */
    .comparison-grid {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 12px;
      align-items: center;
      width: 100%;
      max-width: 520px;
    }

    .organism-card {
      background: #ffffff;
      border: 2px solid #e6e6e6;
      border-radius: 18px;
      padding: 16px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      position: relative;
      transition: border-color 0.25s ease;
    }

    .organism-card.parent-card {
      border-color: #38bdf8;
      background: #f0f9ff;
    }

    .organism-card.offspring-card {
      border-color: #a7f3d0;
      background: #f0fdf4;
    }

    .role-badge {
      font-size: 13px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 4px 10px;
      border-radius: 999px;
      margin-bottom: 12px;
      white-space: nowrap;
    }

    .parent-badge {
      background: #22b7ff;
      color: #ffffff;
    }

    .offspring-badge {
      background: #10b981;
      color: #ffffff;
    }

    .stage-view {
      height: 110px;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      margin-bottom: 10px;
    }

    .entity-icon {
      transition: transform 0.3s ease;
      filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.08));
    }

    .parent-size {
      font-size: 80px;
      line-height: 1;
    }

    .offspring-size {
      font-size: 42px;
      line-height: 1;
      margin-bottom: 6px;
    }

    .organism-name {
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
    }

    /* Arrow Connector */
    .relation-arrow {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #94a3b8;
      font-size: 22px;
      font-weight: 900;
    }

    .relation-arrow span {
      font-size: 11px;
      text-transform: uppercase;
      font-weight: 700;
      color: #64748b;
      margin-top: 2px;
    }

    @media (max-width: 400px) {
      .comparison-grid {
        gap: 6px;
      }
      .parent-size {
        font-size: 64px;
      }
      .offspring-size {
        font-size: 34px;
      }
      .role-badge {
        font-size: 11px;
        padding: 3px 8px;
      }
      .organism-name {
        font-size: 13px;
      }
    }
  </style>
</head>
<body>

  
  <div class="tabs">
    <button class="tab-btn active" id="tabAnimals" onclick="setMode('animals')">
      🐾 Animals
    </button>
    <button class="tab-btn" id="tabPlants" onclick="setMode('plants')">
      🌱 Plants
    </button>
  </div>

  
  <div class="comparison-grid">
    
    
    <div class="organism-card parent-card">
      <div class="role-badge parent-badge">Parent</div>
      <div class="stage-view">
        <div id="parentIcon" class="entity-icon parent-size">🐈</div>
      </div>
      <div id="parentName" class="organism-name">Mother Cat</div>
    </div>

    
    <div class="relation-arrow">
      ➔
      <span>Makes</span>
    </div>

    
    <div class="organism-card offspring-card">
      <div class="role-badge offspring-badge">Offspring (Young)</div>
      <div class="stage-view">
        <div id="offspringIcon" class="entity-icon offspring-size">🐱</div>
      </div>
      <div id="offspringName" class="organism-name">Kitten</div>
    </div>

  </div>

  <script>
    const data = {
      animals: {
        parentIcon: '🐈',
        parentName: 'Mother Cat',
        offspringIcon: '🐱',
        offspringName: 'Kitten'
      },
      plants: {
        parentIcon: '🌳',
        parentName: 'Oak Tree',
        offspringIcon: '🌱',
        offspringName: 'Oak Sprout'
      }
    };

    function setMode(mode) {
      const isAnimals = mode === 'animals';
      document.getElementById('tabAnimals').classList.toggle('active', isAnimals);
      document.getElementById('tabPlants').classList.toggle('active', !isAnimals);

      const d = data[mode];
      const pIcon = document.getElementById('parentIcon');
      const oIcon = document.getElementById('offspringIcon');

      pIcon.textContent = d.parentIcon;
      document.getElementById('parentName').textContent = d.parentName;

      oIcon.textContent = d.offspringIcon;
      document.getElementById('offspringName').textContent = d.offspringName;
    }
  </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;
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 16px;
      user-select: none;
    }

    .stepper-nav {
      display: flex;
      gap: 8px;
      margin-bottom: 20px;
    }

    .step-btn {
      background: #ffffff;
      border: 2px solid transparent;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
      border-radius: 999px;
      padding: 6px 14px;
      font-size: 14px;
      font-weight: 600;
      color: #6b7280;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.3s ease;
    }

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

    .diagram-stage {
      width: 100%;
      max-width: 620px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      position: relative;
    }

    .stage-card {
      flex: 1;
      background: #ffffff;
      border-radius: 16px;
      padding: 18px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      border: 2px solid #e6e8eb;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      transition: border-color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
      opacity: 0.45;
      min-width: 110px;
    }

    .stage-card.active {
      opacity: 1;
      border-color: #22b7ff;
      box-shadow: 0 4px 16px rgba(34, 183, 255, 0.2);
    }

    .icon-box {
      font-size: 44px;
      line-height: 1;
      height: 54px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 8px;
    }

    .card-title {
      font-size: 16px;
      font-weight: 700;
      color: #1e2945;
      margin-bottom: 2px;
    }

    .card-sub {
      font-size: 13px;
      color: #6b7280;
      font-weight: 500;
    }

    .arrow-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      padding: 0 4px;
      opacity: 0.45;
      transition: opacity 0.3s ease;
    }

    .arrow-container.active {
      opacity: 1;
    }

    .process-badge {
      background: #e6f6ff;
      color: #0284c7;
      border: 1px solid #b9e6fe;
      border-radius: 6px;
      padding: 3px 8px;
      font-size: 12px;
      font-weight: 700;
      margin-bottom: 8px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .arrow-track {
      width: 60px;
      height: 10px;
      position: relative;
      display: flex;
      align-items: center;
    }

    .arrow-line {
      width: 100%;
      height: 4px;
      background: #22b7ff;
      border-radius: 2px;
    }

    .arrow-head {
      position: absolute;
      right: 0;
      width: 0;
      height: 0;
      border-top: 6px solid transparent;
      border-bottom: 6px solid transparent;
      border-left: 8px solid #22b7ff;
    }

    .pulse-dot {
      position: absolute;
      left: 0;
      width: 10px;
      height: 10px;
      background: #0284c7;
      border-radius: 50%;
      box-shadow: 0 0 6px #22b7ff;
      animation: pulseMove 2s infinite linear;
    }

    @keyframes pulseMove {
      0% { left: 0; opacity: 0; }
      20% { opacity: 1; }
      80% { opacity: 1; }
      100% { left: calc(100% - 10px); opacity: 0; }
    }

    .play-bar {
      margin-top: 24px;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .control-btn {
      background: #ffffff;
      border: 1px solid #e6e8eb;
      border-radius: 50%;
      width: 38px;
      height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 14px;
      color: #1e2945;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      transition: all 0.2s ease;
    }

    .control-btn:active {
      transform: scale(0.95);
    }

    @media (max-width: 480px) {
      .diagram-stage {
        flex-direction: column;
        gap: 12px;
      }
      .stage-card {
        width: 100%;
        max-width: 220px;
        padding: 12px;
      }
      .arrow-container {
        transform: rotate(90deg);
        margin: 6px 0;
      }
      .process-badge {
        display: none;
      }
    }
  </style>
</head>
<body>

  <div class="stepper-nav">
    <button class="step-btn active" onclick="setStep(0)">1. Parent</button>
    <button class="step-btn" onclick="setStep(1)">2. Process</button>
    <button class="step-btn" onclick="setStep(2)">3. Offspring</button>
  </div>

  <div class="diagram-stage">
    
    <div class="stage-card active" id="card-parent" onclick="setStep(0)">
      <div class="icon-box">🐸</div>
      <div class="card-title">Parent</div>
      <div class="card-sub">Adult Frog</div>
    </div>

    
    <div class="arrow-container" id="arrow-reproduce" onclick="setStep(1)">
      <div class="process-badge">Reproduction</div>
      <div class="icon-box" style="font-size: 26px; height: 32px;">🫧🥚</div>
      <div class="arrow-track">
        <div class="arrow-line"></div>
        <div class="pulse-dot"></div>
        <div class="arrow-head"></div>
      </div>
    </div>

    
    <div class="stage-card" id="card-offspring" onclick="setStep(2)">
      <div class="icon-box">🌱🐸</div>
      <div class="card-title">Offspring</div>
      <div class="card-sub">Young Frog</div>
    </div>
  </div>

  <div class="play-bar">
    <button class="control-btn" id="toggle-btn" title="Pause / Play" onclick="togglePlay()">⏸</button>
  </div>

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

    const cards = [
      document.getElementById('card-parent'),
      document.getElementById('arrow-reproduce'),
      document.getElementById('card-offspring')
    ];
    const buttons = document.querySelectorAll('.step-btn');
    const toggleBtn = document.getElementById('toggle-btn');

    function updateView() {
      buttons.forEach((btn, idx) => {
        btn.classList.toggle('active', idx === currentStep);
      });

      cards.forEach((card, idx) => {
        if (currentStep === 0) {
          card.classList.toggle('active', idx === 0);
        } else if (currentStep === 1) {
          card.classList.toggle('active', idx <= 1);
        } else {
          card.classList.toggle('active', true);
        }
      });
    }

    function setStep(index) {
      currentStep = index;
      updateView();
      resetInterval();
    }

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

    function togglePlay() {
      isPlaying = !isPlaying;
      toggleBtn.textContent = isPlaying ? '⏸' : '▶';
      if (isPlaying) {
        nextStep();
        resetInterval();
      } else {
        clearInterval(timer);
      }
    }

    function resetInterval() {
      clearInterval(timer);
      if (isPlaying) {
        timer = setInterval(nextStep, 3200);
      }
    }

    updateView();
    resetInterval();
  </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 {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #0f172a;
      background: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 12px 10px;
    }
    .comparison-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      width: 100%;
      max-width: 540px;
    }
    .leaf-section {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    .leaf-title {
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 4px;
      color: #0f172a;
      letter-spacing: -0.01em;
    }
    .svg-wrapper {
      width: 100%;
      max-width: 230px;
      aspect-ratio: 1 / 1.08;
      position: relative;
    }
    svg {
      width: 100%;
      height: 100%;
      display: block;
      overflow: visible;
    }
    .counter-badge {
      margin-top: 6px;
      padding: 5px 14px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 700;
      display: inline-block;
    }
    .oak-counter {
      background: #e0f2fe;
      color: #0369a1;
      border: 1px solid #bae6fd;
    }
    .holly-counter {
      background: #fee2e2;
      color: #b91c1c;
      border: 1px solid #fecaca;
    }
    .badge-oak {
      fill: #0284c7;
      stroke: #ffffff;
      stroke-width: 1.5;
    }
    .badge-holly {
      fill: #dc2626;
      stroke: #ffffff;
      stroke-width: 1.5;
    }
    .badge-text {
      fill: #ffffff;
      font-size: 11px;
      font-weight: 800;
      text-anchor: middle;
      dominant-baseline: central;
      font-family: inherit;
    }
    .leaf-oak {
      fill: #86efac;
      stroke: #15803d;
      stroke-width: 2.5;
      stroke-linejoin: round;
    }
    .leaf-holly {
      fill: #166534;
      stroke: #052e16;
      stroke-width: 2.5;
      stroke-linejoin: round;
    }
    .vein-oak {
      stroke: #166534;
      stroke-width: 2;
      stroke-linecap: round;
    }
    .vein-holly {
      stroke: #86efac;
      stroke-width: 2;
      stroke-linecap: round;
      opacity: 0.85;
    }
    .gloss {
      fill: #4ade80;
      opacity: 0.3;
    }
    @media (max-width: 380px) {
      .leaf-title { font-size: 14px; }
      .counter-badge { font-size: 12px; padding: 4px 10px; }
      .comparison-container { gap: 8px; }
    }
  </style>
</head>
<body>

  <div class="comparison-container">
    
    <div class="leaf-section">
      <h2 class="leaf-title">Oak Leaf</h2>
      <div class="svg-wrapper">
        <svg viewBox="0 0 200 216">
          
          <path d="M 100 188 Q 100 200 102 210" stroke="#78350f" stroke-width="4" stroke-linecap="round" fill="none" />
          
          
          <path class="leaf-oak" d="
            M 100 188
            C 88 184, 76 178, 68 170
            C 44 172, 38 152, 46 140
            C 60 134, 70 136, 70 130
            C 38 132, 30 108, 42 94
            C 58 88, 72 92, 74 86
            C 46 82, 40 58, 56 46
            C 72 40, 84 50, 88 44
            C 88 28, 112 28, 112 44
            C 116 50, 128 40, 144 46
            C 160 58, 154 82, 126 86
            C 128 92, 142 88, 158 94
            C 170 108, 162 132, 130 130
            C 130 136, 140 134, 154 140
            C 162 152, 156 172, 132 170
            C 124 178, 112 184, 100 188 Z
          " />

          
          <path class="vein-oak" d="M 100 188 L 100 40" />

          
          <path class="vein-oak" d="M 100 155 Q 74 153 50 152" />
          <path class="vein-oak" d="M 100 155 Q 126 153 150 152" />
          
          <path class="vein-oak" d="M 100 114 Q 70 112 42 110" />
          <path class="vein-oak" d="M 100 114 Q 130 112 158 110" />

          <path class="vein-oak" d="M 100 70 Q 75 66 54 62" />
          <path class="vein-oak" d="M 100 70 Q 125 66 146 62" />

          
          
          <circle cx="100" cy="20" r="9.5" class="badge-oak" />
          <text x="100" y="20.5" class="badge-text">1</text>

          
          <circle cx="34" cy="56" r="9.5" class="badge-oak" />
          <text x="34" y="56.5" class="badge-text">2</text>

          <circle cx="24" cy="106" r="9.5" class="badge-oak" />
          <text x="24" y="106.5" class="badge-text">3</text>

          <circle cx="28" cy="154" r="9.5" class="badge-oak" />
          <text x="28" y="154.5" class="badge-text">4</text>

          
          <circle cx="166" cy="56" r="9.5" class="badge-oak" />
          <text x="166" y="56.5" class="badge-text">5</text>

          <circle cx="176" cy="106" r="9.5" class="badge-oak" />
          <text x="176" y="106.5" class="badge-text">6</text>

          <circle cx="172" cy="154" r="9.5" class="badge-oak" />
          <text x="172" y="154.5" class="badge-text">7</text>
        </svg>
      </div>
      <div class="counter-badge oak-counter">Oak: 7 Lobes</div>
    </div>

    
    <div class="leaf-section">
      <h2 class="leaf-title">Holly Leaf</h2>
      <div class="svg-wrapper">
        <svg viewBox="0 0 200 216">
          
          <path d="M 100 188 Q 100 200 98 210" stroke="#78350f" stroke-width="4" stroke-linecap="round" fill="none" />

          
          <path class="leaf-holly" d="
            M 100 188
            C 88 178, 76 160, 48 146
            C 72 132, 70 114, 44 92
            C 76 78, 84 52, 100 22
            C 116 52, 124 78, 156 92
            C 130 114, 128 132, 152 146
            C 124 160, 112 178, 100 188 Z
          " />

          
          <path class="gloss" d="M 98 38 C 86 60, 80 82, 54 94 C 74 107, 72 122, 56 142 C 78 152, 90 168, 98 182 Z" />

          
          <path class="vein-holly" d="M 100 188 L 100 32" />
          <path class="vein-holly" d="M 100 138 L 52 146" />
          <path class="vein-holly" d="M 100 138 L 148 146" />
          <path class="vein-holly" d="M 100 86 L 48 92" />
          <path class="vein-holly" d="M 100 86 L 152 92" />

          
          
          <circle cx="100" cy="14" r="9.5" class="badge-holly" />
          <text x="100" y="14.5" class="badge-text">1</text>

          
          <circle cx="32" cy="90" r="9.5" class="badge-holly" />
          <text x="32" y="90.5" class="badge-text">2</text>

          <circle cx="36" cy="148" r="9.5" class="badge-holly" />
          <text x="36" y="148.5" class="badge-text">3</text>

          
          <circle cx="168" cy="90" r="9.5" class="badge-holly" />
          <text x="168" y="90.5" class="badge-text">4</text>

          <circle cx="164" cy="148" r="9.5" class="badge-holly" />
          <text x="164" y="148.5" class="badge-text">5</text>
        </svg>
      </div>
      <div class="counter-badge holly-counter">Holly: 5 Spines</div>
    </div>
  </div>

</body>
</html>

Measuring Variation in Leaf Sizes and Shapes

<!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;
      background: #ffffff;
      color: #1e2945;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-height: 100%;
    }

    .samples-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }

    .leaf-card {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      transition: box-shadow 0.2s ease, border-color 0.2s ease;
    }

    .leaf-card.active {
      border-color: #22b7ff;
      box-shadow: 0 0 0 1px #22b7ff;
    }

    .leaf-name {
      font-weight: 700;
      font-size: 14px;
      margin-bottom: 4px;
      color: #0f172a;
    }

    .leaf-art {
      width: 100%;
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 6px;
    }

    .badges {
      display: flex;
      flex-direction: column;
      gap: 3px;
      width: 100%;
    }

    .badge {
      font-size: 11px;
      font-weight: 600;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 4px;
      padding: 2px 4px;
      display: flex;
      justify-content: space-between;
      color: #475569;
    }

    .badge span {
      font-weight: 700;
      color: #1e2945;
    }

    .badge.highlight {
      background: #e0f2fe;
      border-color: #38bdf8;
      color: #0369a1;
    }
    .badge.highlight span {
      color: #0284c7;
    }

    .chart-section {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .nav-buttons {
      display: flex;
      gap: 6px;
      justify-content: center;
    }

    .btn {
      flex: 1;
      padding: 6px 4px;
      font-size: 12px;
      font-weight: 600;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      border-radius: 6px;
      color: #475569;
      cursor: pointer;
      text-align: center;
      transition: all 0.2s ease;
    }

    .btn.active {
      background: #22b7ff;
      border-color: #0284c7;
      color: #ffffff;
    }

    .chart-bars {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 2px 0;
    }

    .bar-row {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      font-weight: 700;
    }

    .bar-label {
      width: 52px;
      color: #475569;
      flex-shrink: 0;
    }

    .bar-track {
      flex: 1;
      height: 20px;
      background: #e2e8f0;
      border-radius: 4px;
      overflow: hidden;
      position: relative;
    }

    .bar-fill {
      height: 100%;
      width: 0%;
      background: #10b981;
      border-radius: 4px;
      transition: width 0.4s ease, background-color 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 6px;
      color: #ffffff;
      font-size: 11px;
      font-weight: 700;
    }

    .bar-row:nth-child(1) .bar-fill { background: #3b82f6; }
    .bar-row:nth-child(2) .bar-fill { background: #10b981; }
    .bar-row:nth-child(3) .bar-fill { background: #f59e0b; }
  </style>
</head>
<body>

  <div class="samples-grid">
    
    <div class="leaf-card" id="card-a">
      <div class="leaf-name">Leaf A</div>
      <div class="leaf-art">
        <svg viewBox="0 0 80 100" width="48" height="60">
          
          <path d="M 40,92 L 40,84 C 36,82 28,78 30,70 C 32,64 22,58 24,48 C 25,40 28,34 32,28 C 36,22 38,14 40,10 C 42,14 44,22 48,28 C 52,34 55,40 56,48 C 58,58 48,64 50,70 C 52,78 44,82 40,84 Z" fill="#4ade80" stroke="#15803d" stroke-width="2"/>
          <line x1="40" y1="84" x2="40" y2="16" stroke="#15803d" stroke-width="1.5" />
          <line x1="40" y1="92" x2="40" y2="84" stroke="#854d0e" stroke-width="2.5" />
        </svg>
      </div>
      <div class="badges">
        <div class="badge" data-type="length">Length <span>11 cm</span></div>
        <div class="badge" data-type="width">Width <span>6 cm</span></div>
        <div class="badge" data-type="lobes">Lobes <span>7</span></div>
      </div>
    </div>

    
    <div class="leaf-card" id="card-b">
      <div class="leaf-name">Leaf B</div>
      <div class="leaf-art">
        <svg viewBox="0 0 80 100" width="34" height="42">
          
          <path d="M 40,92 L 40,84 C 34,80 28,68 31,56 C 33,46 30,34 35,24 C 37,18 39,14 40,10 C 41,14 43,18 45,24 C 50,34 47,46 49,56 C 52,68 46,80 40,84 Z" fill="#86efac" stroke="#16a34a" stroke-width="2.2"/>
          <line x1="40" y1="84" x2="40" y2="20" stroke="#16a34a" stroke-width="1.5" />
          <line x1="40" y1="92" x2="40" y2="84" stroke="#854d0e" stroke-width="2.5" />
        </svg>
      </div>
      <div class="badges">
        <div class="badge" data-type="length">Length <span>7 cm</span></div>
        <div class="badge" data-type="width">Width <span>4 cm</span></div>
        <div class="badge" data-type="lobes">Lobes <span>5</span></div>
      </div>
    </div>

    
    <div class="leaf-card" id="card-c">
      <div class="leaf-name">Leaf C</div>
      <div class="leaf-art">
        <svg viewBox="0 0 80 100" width="58" height="70">
          
          <path d="M 40,92 L 40,84 C 34,82 24,78 26,68 C 28,62 16,56 18,46 C 20,38 22,30 28,24 C 32,18 37,13 40,9 C 43,13 48,18 52,24 C 58,30 60,38 62,46 C 64,56 52,62 54,68 C 56,78 46,82 40,84 Z" fill="#22c55e" stroke="#15803d" stroke-width="1.8"/>
          <line x1="40" y1="84" x2="40" y2="14" stroke="#15803d" stroke-width="1.5" />
          <line x1="40" y1="92" x2="40" y2="84" stroke="#854d0e" stroke-width="2.5" />
        </svg>
      </div>
      <div class="badges">
        <div class="badge" data-type="length">Length <span>13 cm</span></div>
        <div class="badge" data-type="width">Width <span>8 cm</span></div>
        <div class="badge" data-type="lobes">Lobes <span>9</span></div>
      </div>
    </div>
  </div>

  <div class="chart-section">
    <div class="nav-buttons">
      <button class="btn active" onclick="setMetric('length')">Lengths</button>
      <button class="btn" onclick="setMetric('width')">Widths</button>
      <button class="btn" onclick="setMetric('lobes')">Lobes</button>
    </div>

    <div class="chart-bars">
      <div class="bar-row">
        <div class="bar-label">Leaf A</div>
        <div class="bar-track">
          <div class="bar-fill" id="bar-a">11 cm</div>
        </div>
      </div>
      <div class="bar-row">
        <div class="bar-label">Leaf B</div>
        <div class="bar-track">
          <div class="bar-fill" id="bar-b">7 cm</div>
        </div>
      </div>
      <div class="bar-row">
        <div class="bar-label">Leaf C</div>
        <div class="bar-track">
          <div class="bar-fill" id="bar-c">13 cm</div>
        </div>
      </div>
    </div>
  </div>

  <script>
    const data = {
      length: { max: 15, unit: ' cm', a: 11, b: 7, c: 13 },
      width:  { max: 10, unit: ' cm', a: 6,  b: 4, c: 8  },
      lobes:  { max: 10, unit: '',    a: 7,  b: 5, c: 9  }
    };

    function setMetric(metric) {
      // Toggle button states
      const buttons = document.querySelectorAll('.nav-buttons .btn');
      buttons.forEach(btn => {
        btn.classList.toggle('active', btn.getAttribute('onclick').includes(metric));
      });

      // Highlight badges on cards
      const badges = document.querySelectorAll('.badge');
      badges.forEach(b => {
        b.classList.toggle('highlight', b.dataset.type === metric);
      });

      // Update comparison bars
      const m = data[metric];
      const barA = document.getElementById('bar-a');
      const barB = document.getElementById('bar-b');
      const barC = document.getElementById('bar-c');

      barA.style.width = ((m.a / m.max) * 100) + '%';
      barA.textContent = m.a + m.unit;

      barB.style.width = ((m.b / m.max) * 100) + '%';
      barB.textContent = m.b + m.unit;

      barC.style.width = ((m.c / m.max) * 100) + '%';
      barC.textContent = m.c + m.unit;
    }

    // Initialize with length
    setMetric('length');
  </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="1:1">
  <title>Measuring an Oak Leaf</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }

    body {
      width: 100%;
      height: 100%;
      background-color: #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: space-between;
      padding: 12px;
    }

    .toolbar {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 380px;
      justify-content: center;
    }

    .btn-toggle {
      flex: 1;
      padding: 10px 14px;
      font-size: 14px;
      font-weight: 700;
      border-radius: 10px;
      border: 2px solid transparent;
      background: #e9ecef;
      color: #495057;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
    }

    .btn-toggle.active-length {
      background: #e0f2fe;
      color: #0369a1;
      border-color: #0284c7;
    }

    .btn-toggle.active-width {
      background: #ffedd5;
      color: #c2410c;
      border-color: #ea580c;
    }

    .stage {
      position: relative;
      width: 100%;
      max-width: 380px;
      flex: 1;
      min-height: 280px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    /* Interactive layer transitions */
    .guide-layer {
      transition: opacity 0.3s ease;
    }

    .layer-hidden {
      opacity: 0;
      pointer-events: none;
    }

    .layer-visible {
      opacity: 1;
    }

    .badge-info {
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 700;
      text-align: center;
      transition: all 0.25s ease;
    }

    .badge-length {
      background: #e0f2fe;
      color: #0369a1;
      border: 1px solid #bae6fd;
    }

    .badge-width {
      background: #ffedd5;
      color: #c2410c;
      border: 1px solid #fed7aa;
    }
  </style>
</head>
<body>

  <div class="toolbar">
    <button class="btn-toggle active-length" id="btnLength" onclick="setMode('length')">
      ↕ Blade Length
    </button>
    <button class="btn-toggle" id="btnWidth" onclick="setMode('width')">
      ↔ Max Width
    </button>
  </div>

  <div class="stage">
    <svg viewBox="0 0 400 400" aria-label="Oak Leaf Diagram">
      <defs>
        
        <marker id="arrowBlue" markerWidth="6" markerHeight="6" refX="3" refY="3" orient="auto">
          <path d="M 0 0 L 6 3 L 0 6 z" fill="#0284c7" />
        </marker>
        <marker id="arrowBlueStart" markerWidth="6" markerHeight="6" refX="3" refY="3" orient="auto-start-reverse">
          <path d="M 0 0 L 6 3 L 0 6 z" fill="#0284c7" />
        </marker>
        <marker id="arrowOrange" markerWidth="6" markerHeight="6" refX="3" refY="3" orient="auto">
          <path d="M 0 0 L 6 3 L 0 6 z" fill="#ea580c" />
        </marker>
        <marker id="arrowOrangeStart" markerWidth="6" markerHeight="6" refX="3" refY="3" orient="auto-start-reverse">
          <path d="M 0 0 L 6 3 L 0 6 z" fill="#ea580c" />
        </marker>
      </defs>

      
      <path d="M 200 318 C 200 340 196 360 194 376 L 204 376 C 204 360 202 340 200 318 Z" 
            fill="#a16207" opacity="0.8" />
      
      
      <path d="M 200 45 
               C 220 55 240 70 238 92 
               C 236 108 214 116 220 132 
               C 255 138 290 156 288 188 
               C 286 214 240 226 244 248 
               C 272 258 270 290 238 304 
               C 220 312 208 316 200 318 
               C 192 316 180 312 162 304 
               C 130 290 128 258 156 248 
               C 160 226 114 214 112 188 
               C 110 156 145 138 180 132 
               C 186 116 164 108 162 92 
               C 160 70 180 55 200 45 Z" 
            fill="#4ade80" 
            stroke="#15803d" 
            stroke-width="3.5" 
            stroke-linejoin="round" />

      
      <path d="M 200 318 Q 200 180 200 52" stroke="#166534" stroke-width="3" stroke-linecap="round" fill="none" opacity="0.6"/>
      <path d="M 200 270 Q 230 268 250 280" stroke="#166534" stroke-width="2" fill="none" opacity="0.5"/>
      <path d="M 200 270 Q 170 268 150 280" stroke="#166534" stroke-width="2" fill="none" opacity="0.5"/>
      <path d="M 200 215 Q 245 200 270 192" stroke="#166534" stroke-width="2" fill="none" opacity="0.5"/>
      <path d="M 200 215 Q 155 200 130 192" stroke="#166534" stroke-width="2" fill="none" opacity="0.5"/>
      <path d="M 200 115 Q 225 105 230 92" stroke="#166534" stroke-width="2" fill="none" opacity="0.5"/>
      <path d="M 200 115 Q 175 105 170 92" stroke="#166534" stroke-width="2" fill="none" opacity="0.5"/>

      
      <g id="stalkCue">
        <line x1="170" y1="318" x2="230" y2="318" stroke="#64748b" stroke-width="1.5" stroke-dasharray="3 3"/>
        <text x="250" y="352" font-size="12" font-weight="600" fill="#64748b">Stalk (skip)</text>
        <path d="M 245 348 Q 215 348 206 350" stroke="#94a3b8" stroke-width="1.5" fill="none" marker-end="url(#arrowOrange)"/>
      </g>

      
      <g id="layerLength" class="guide-layer layer-visible">
        
        <g transform="translate(48, 45)">
          <rect x="0" y="0" width="30" height="273" rx="4" fill="#ffffff" stroke="#cbd5e1" stroke-width="2" filter="drop-shadow(0 2px 4px rgba(0,0,0,0.06))"/>
          
          
          <line x1="15" y1="0" x2="30" y2="0" stroke="#0284c7" stroke-width="2"/>
          <text x="10" y="5" font-size="11" font-weight="bold" fill="#0284c7" text-anchor="end">12</text>
          
          <line x1="20" y1="45.5" x2="30" y2="45.5" stroke="#64748b" stroke-width="1.5"/>
          <line x1="20" y1="91" x2="30" y2="91" stroke="#64748b" stroke-width="1.5"/>
          
          <line x1="15" y1="136.5" x2="30" y2="136.5" stroke="#0284c7" stroke-width="2"/>
          <text x="10" y="140.5" font-size="11" font-weight="bold" fill="#0284c7" text-anchor="end">6</text>
          
          <line x1="20" y1="182" x2="30" y2="182" stroke="#64748b" stroke-width="1.5"/>
          <line x1="20" y1="227.5" x2="30" y2="227.5" stroke="#64748b" stroke-width="1.5"/>
          
          <line x1="15" y1="273" x2="30" y2="273" stroke="#0284c7" stroke-width="2"/>
          <text x="10" y="276" font-size="11" font-weight="bold" fill="#0284c7" text-anchor="end">0</text>
          <text x="6" y="290" font-size="10" font-weight="600" fill="#64748b">cm</text>
        </g>

        
        <line x1="78" y1="45" x2="195" y2="45" stroke="#0284c7" stroke-width="1.5" stroke-dasharray="3 3"/>
        <line x1="78" y1="318" x2="195" y2="318" stroke="#0284c7" stroke-width="1.5" stroke-dasharray="3 3"/>

        
        <line x1="92" y1="47" x2="92" y2="316" stroke="#0284c7" stroke-width="2.5" 
              marker-start="url(#arrowBlueStart)" marker-end="url(#arrowBlue)"/>
        
        
        <rect x="75" y="165" width="85" height="34" rx="8" fill="#0284c7" />
        <text x="117.5" y="180" font-size="11" font-weight="600" fill="#ffffff" text-anchor="middle">Blade Length</text>
        <text x="117.5" y="193" font-size="12" font-weight="bold" fill="#e0f2fe" text-anchor="middle">12 cm</text>
      </g>

      
      <g id="layerWidth" class="guide-layer layer-hidden">
        
        <g transform="translate(112, 13)">
          <rect x="0" y="0" width="176" height="26" rx="4" fill="#ffffff" stroke="#cbd5e1" stroke-width="2" filter="drop-shadow(0 2px 4px rgba(0,0,0,0.06))"/>
          
          <line x1="0" y1="12" x2="0" y2="26" stroke="#ea580c" stroke-width="2"/>
          <text x="0" y="9" font-size="10" font-weight="bold" fill="#ea580c" text-anchor="middle">0</text>
          
          <line x1="44" y1="16" x2="44" y2="26" stroke="#64748b" stroke-width="1.5"/>
          
          <line x1="88" y1="12" x2="88" y2="26" stroke="#ea580c" stroke-width="2"/>
          <text x="88" y="9" font-size="10" font-weight="bold" fill="#ea580c" text-anchor="middle">3.5</text>
          
          <line x1="132" y1="16" x2="132" y2="26" stroke="#64748b" stroke-width="1.5"/>
          
          <line x1="176" y1="12" x2="176" y2="26" stroke="#ea580c" stroke-width="2"/>
          <text x="176" y="9" font-size="10" font-weight="bold" fill="#ea580c" text-anchor="middle">7</text>
          <text x="190" y="18" font-size="10" font-weight="600" fill="#64748b">cm</text>
        </g>

        
        <line x1="112" y1="39" x2="112" y2="188" stroke="#ea580c" stroke-width="1.5" stroke-dasharray="3 3"/>
        <line x1="288" y1="39" x2="288" y2="188" stroke="#ea580c" stroke-width="1.5" stroke-dasharray="3 3"/>

        
        <line x1="114" y1="188" x2="286" y2="188" stroke="#ea580c" stroke-width="2.5" 
              marker-start="url(#arrowOrangeStart)" marker-end="url(#arrowOrange)"/>

        
        <rect x="156" y="200" width="88" height="34" rx="8" fill="#ea580c" />
        <text x="200" y="215" font-size="11" font-weight="600" fill="#ffffff" text-anchor="middle">Max Width</text>
        <text x="200" y="228" font-size="12" font-weight="bold" fill="#ffedd5" text-anchor="middle">7 cm</text>
      </g>
    </svg>
  </div>

  <div id="badgeText" class="badge-info badge-length">
    Tip to blade base = 12 cm
  </div>

  <script>
    function setMode(mode) {
      const btnLength = document.getElementById('btnLength');
      const btnWidth = document.getElementById('btnWidth');
      const layerLength = document.getElementById('layerLength');
      const layerWidth = document.getElementById('layerWidth');
      const badge = document.getElementById('badgeText');

      if (mode === 'length') {
        btnLength.className = 'btn-toggle active-length';
        btnWidth.className = 'btn-toggle';
        layerLength.className = 'guide-layer layer-visible';
        layerWidth.className = 'guide-layer layer-hidden';
        badge.className = 'badge-info badge-length';
        badge.textContent = 'Tip to blade base = 12 cm';
      } else {
        btnLength.className = 'btn-toggle';
        btnWidth.className = 'btn-toggle active-width';
        layerLength.className = 'guide-layer layer-hidden';
        layerWidth.className = 'guide-layer layer-visible';
        badge.className = 'badge-info badge-width';
        badge.textContent = 'Across widest lobes = 7 cm';
      }
    }
  </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="1:1">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      width: 100%;
      min-height: 100%;
      background: transparent;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px;
    }

    .grid-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 480px;
      aspect-ratio: 1 / 1;
    }

    .quadrant {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    .circle {
      width: 110px;
      height: 110px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      transition: background-color 0.25s ease, box-shadow 0.25s ease;
    }

    .q-weather .circle { background: #eff6ff; }
    .q-weather .circle:hover { box-shadow: 0 0 0 4px #bae6fd; }

    .q-diet .circle { background: #f0fdf4; }
    .q-diet .circle:hover { box-shadow: 0 0 0 4px #bbf7d0; }

    .q-scar .circle { background: #fff1f2; }
    .q-scar .circle:hover { box-shadow: 0 0 0 4px #fecdd3; }

    .q-skill .circle { background: #fef3c7; }
    .q-skill .circle:hover { box-shadow: 0 0 0 4px #fde68a; }

    .title {
      font-size: 14px;
      font-weight: 700;
      color: #1e2945;
      margin-top: 6px;
      line-height: 1.2;
    }

    .subtitle {
      font-size: 12px;
      color: #64748b;
      margin-top: 2px;
      line-height: 1.2;
    }

    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    /* Speech bubbles in Q4 */
    .bubble {
      position: absolute;
      padding: 2px 7px;
      border-radius: 8px;
      font-size: 10px;
      font-weight: 700;
      color: #ffffff;
      white-space: nowrap;
      pointer-events: none;
    }
    .bubble-blue {
      background: #0284c7;
      top: 10px;
      left: -4px;
    }
    .bubble-amber {
      background: #d97706;
      top: 18px;
      right: -4px;
    }

    @media (max-width: 380px) {
      .circle {
        width: 90px;
        height: 90px;
      }
      .title {
        font-size: 13px;
      }
      .subtitle {
        font-size: 11px;
      }
    }
  </style>
</head>
<body>

  <div class="grid-container">
    
    <div class="quadrant q-weather">
      <div class="circle">
        <svg viewBox="0 0 100 100">
          
          <ellipse cx="50" cy="85" rx="36" ry="6" fill="#cbd5e1" />
          
          <path d="M 12 28 Q 45 22 78 28" fill="none" stroke="#7dd3fc" stroke-width="2.5" stroke-linecap="round" />
          <path d="M 20 40 Q 55 35 88 42" fill="none" stroke="#0284c7" stroke-width="2" stroke-linecap="round" />
          
          <path d="M 38 85 Q 40 68 55 58 Q 65 52 70 48" fill="none" stroke="#854d0e" stroke-width="5" stroke-linecap="round" />
          
          <ellipse cx="68" cy="42" rx="18" ry="12" fill="#15803d" />
          <ellipse cx="76" cy="46" rx="14" ry="9" fill="#16a34a" />
          <ellipse cx="60" cy="48" rx="12" ry="8" fill="#166534" />
        </svg>
      </div>
      <div class="title">Weather</div>
      <div class="subtitle">Wind shapes growth</div>
    </div>

    
    <div class="quadrant q-diet">
      <div class="circle">
        <svg viewBox="0 0 100 100">
          
          <ellipse cx="32" cy="82" rx="18" ry="5" fill="#854d0e" opacity="0.6" />
          <path d="M 32 82 L 32 40" stroke="#16a34a" stroke-width="3" stroke-linecap="round" />
          
          <path d="M 32 62 Q 18 56 18 46 Q 28 50 32 58" fill="#22c55e" />
          <path d="M 32 50 Q 46 44 46 34 Q 36 38 32 46" fill="#16a34a" />
          <circle cx="32" cy="36" r="6" fill="#15803d" />

          
          <ellipse cx="70" cy="82" rx="14" ry="4" fill="#cbd5e1" />
          <path d="M 70 82 L 70 58" stroke="#ca8a04" stroke-width="2" stroke-linecap="round" />
          
          <path d="M 70 70 Q 80 66 82 60 Q 74 62 70 68" fill="#eab308" />
          <circle cx="70" cy="56" r="3.5" fill="#ca8a04" />
        </svg>
      </div>
      <div class="title">Diet & Soil</div>
      <div class="subtitle">Nutrients affect size</div>
    </div>

    
    <div class="quadrant q-scar">
      <div class="circle">
        <svg viewBox="0 0 100 100">
          
          <path d="M 30 18 Q 42 45 42 55 Q 42 70 34 86" fill="none" stroke="#fed7aa" stroke-width="18" stroke-linecap="round" />
          <path d="M 30 18 Q 42 45 42 55 Q 42 70 34 86" fill="none" stroke="#fdba74" stroke-width="2" stroke-linecap="round" />
          
          <line x1="39" y1="52" x2="45" y2="58" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" />
          <line x1="43" y1="52" x2="41" y2="58" stroke="#fca5a5" stroke-width="1.5" stroke-linecap="round" />
          
          
          <g transform="translate(62, 44) rotate(-20)">
            <rect x="-8" y="-14" width="16" height="28" rx="4" fill="#fde68a" stroke="#d97706" stroke-width="1.5" />
            <rect x="-8" y="-4" width="16" height="8" fill="#ffffff" />
            <circle cx="-3" cy="0" r="0.7" fill="#d97706" />
            <circle cx="0" cy="0" r="0.7" fill="#d97706" />
            <circle cx="3" cy="0" r="0.7" fill="#d97706" />
          </g>
        </svg>
      </div>
      <div class="title">Injury</div>
      <div class="subtitle">Healed marks & scars</div>
    </div>

    
    <div class="quadrant q-skill">
      <div class="circle">
        
        <div class="bubble bubble-blue">Hello!</div>
        <div class="bubble bubble-amber">¡Hola!</div>

        <svg viewBox="0 0 100 100">
          
          <circle cx="50" cy="58" r="22" fill="#fed7aa" />
          
          <path d="M 28 54 C 28 35 72 35 72 54 C 65 40 35 40 28 54 Z" fill="#78350f" />
          
          <circle cx="43" cy="56" r="2.2" fill="#1e2945" />
          <circle cx="57" cy="56" r="2.2" fill="#1e2945" />
          
          <circle cx="39" cy="62" r="2.5" fill="#fca5a5" opacity="0.7" />
          <circle cx="61" cy="62" r="2.5" fill="#fca5a5" opacity="0.7" />
          
          <path d="M 45 64 Q 50 69 55 64" fill="none" stroke="#1e2945" stroke-width="2" stroke-linecap="round" />
        </svg>
      </div>
      <div class="title">Learned Skills</div>
      <div class="subtitle">Acquired practice</div>
    </div>
  </div>

</body>
</html>

What Is an Environmental Characteristic?

<!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;
    }

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

    .flowchart {
      width: 100%;
      max-width: 380px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    /* Parent Node */
    .parent-node {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 14px;
      padding: 10px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      position: relative;
    }

    .dog-avatar {
      position: relative;
      font-size: 38px;
      line-height: 1;
    }

    .dye-patch {
      position: absolute;
      top: -2px;
      right: 2px;
      background: #8b5cf6;
      color: #ffffff;
      font-size: 10px;
      font-weight: 700;
      padding: 2px 5px;
      border-radius: 6px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    }

    .node-text {
      font-size: 14px;
      font-weight: 700;
      color: #1e2945;
      line-height: 1.2;
    }

    .node-tag {
      font-size: 11px;
      font-weight: 600;
      color: #8b5cf6;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    /* Arrow Connector */
    .connector {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #64748b;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      gap: 2px;
    }

    .arrow-icon {
      font-size: 16px;
      line-height: 1;
      color: #94a3b8;
    }

    /* Offspring Outcomes */
    .outcomes-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      width: 100%;
    }

    .outcome-card {
      border-radius: 12px;
      padding: 12px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      position: relative;
    }

    .outcome-card.valid {
      background: #f0fdf4;
      border: 2px solid #86efac;
    }

    .outcome-card.invalid {
      background: #fef2f2;
      border: 2px dashed #fca5a5;
      opacity: 0.9;
    }

    .puppies-row {
      font-size: 24px;
      line-height: 1.2;
      min-height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 2px;
    }

    .purple-puppy {
      position: relative;
      filter: hue-rotate(250deg) saturate(1.8);
    }

    .status-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 14px;
      font-weight: 800;
      margin-top: 6px;
      line-height: 1.2;
    }

    .valid .status-badge {
      color: #16a34a;
    }

    .invalid .status-badge {
      color: #dc2626;
    }

    .outcome-desc {
      font-size: 12px;
      font-weight: 700;
      margin-top: 4px;
      line-height: 1.2;
    }

    .valid .outcome-desc {
      color: #15803d;
    }

    .invalid .outcome-desc {
      color: #b91c1c;
    }
  </style>
</head>
<body>
  <div class="flowchart">
    
    <div class="parent-node">
      <div class="dog-avatar">
        🐕
        <span class="dye-patch">Dye</span>
      </div>
      <div>
        <div class="node-tag">Acquired Trait</div>
        <div class="node-text">Dyed Purple Fur</div>
      </div>
    </div>

    
    <div class="connector">
      <span>Reproduction</span>
      <span class="arrow-icon">▼</span>
    </div>

    
    <div class="outcomes-grid">
      
      <div class="outcome-card valid">
        <div class="puppies-row">
          <span>🐕</span><span>🐕</span><span>🐕</span>
        </div>
        <div class="status-badge">✓</div>
        <div class="outcome-desc">Natural Coat</div>
      </div>

      
      <div class="outcome-card invalid">
        <div class="puppies-row">
          <span class="purple-puppy">🐕</span>
        </div>
        <div class="status-badge">✗</div>
        <div class="outcome-desc">Cannot inherit<br>acquired traits</div>
      </div>
    </div>
  </div>
</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: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px 8px;
    }

    .badge {
      background: #e0f2fe;
      color: #0369a1;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.2px;
      padding: 6px 14px;
      border-radius: 20px;
      text-align: center;
      margin-bottom: 14px;
      border: 1px solid #bae6fd;
    }

    .comparison-container {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      max-width: 520px;
    }

    .stage-card {
      flex: 1;
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 16px;
      padding: 12px 8px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
      min-width: 110px;
    }

    .stage-card.highlight {
      border-color: #38bdf8;
      box-shadow: 0 4px 12px rgba(56, 189, 248, 0.15);
    }

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

    .art-box {
      width: 90px;
      height: 90px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 6px;
    }

    .trait-label {
      font-size: 12px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 6px;
    }

    .gray-trait {
      background: #f1f5f9;
      color: #475569;
    }

    .pink-trait {
      background: #ffe4e6;
      color: #e11d48;
    }

    .flow-connector {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 0 4px;
      flex-shrink: 0;
      max-width: 110px;
      text-align: center;
    }

    .diet-icon {
      font-size: 20px;
      line-height: 1;
      margin-bottom: 2px;
      filter: drop-shadow(0 2px 3px rgba(0,0,0,0.1));
    }

    .arrow-svg {
      width: 48px;
      height: 20px;
      margin: 2px 0;
    }

    .flow-label {
      font-size: 11px;
      font-weight: 700;
      color: #0284c7;
      line-height: 1.2;
    }

    /* Small screens under 360px */
    @media (max-width: 360px) {
      .badge {
        font-size: 11.5px;
        padding: 5px 10px;
        margin-bottom: 10px;
      }
      .art-box {
        width: 72px;
        height: 72px;
      }
      .stage-card {
        padding: 8px 4px;
        min-width: 95px;
      }
      .stage-title {
        font-size: 11px;
      }
      .trait-label {
        font-size: 11px;
      }
      .flow-connector {
        max-width: 80px;
      }
      .arrow-svg {
        width: 32px;
      }
      .flow-label {
        font-size: 10px;
      }
    }
  </style>
</head>
<body>

  
  <div class="badge">
    Feather color = Environmental Trait
  </div>

  
  <div class="comparison-container">
    
    
    <div class="stage-card">
      <div class="stage-title">At Birth</div>
      <div class="art-box">
        <svg viewBox="0 0 100 100" width="100%" height="100%">
          
          <line x1="42" y1="72" x2="42" y2="92" stroke="#64748b" stroke-width="3" stroke-linecap="round" />
          <line x1="56" y1="72" x2="56" y2="92" stroke="#64748b" stroke-width="3" stroke-linecap="round" />
          <path d="M38 92 L46 92 M52 92 L60 92" stroke="#64748b" stroke-width="2.5" stroke-linecap="round" />
          
          <ellipse cx="50" cy="58" rx="26" ry="21" fill="#cbd5e1" />
          <ellipse cx="44" cy="55" rx="20" ry="16" fill="#94a3b8" />
          <ellipse cx="50" cy="58" rx="22" ry="17" fill="#e2e8f0" />
          
          <circle cx="56" cy="32" r="15" fill="#cbd5e1" />
          <circle cx="56" cy="32" r="13" fill="#e2e8f0" />
          
          <circle cx="60" cy="29" r="2.5" fill="#1e293b" />
          <circle cx="61" cy="28" r="0.8" fill="#ffffff" />
          
          <path d="M68 31 C74 32, 77 36, 75 40 C72 40, 68 36, 68 35 Z" fill="#64748b" />
        </svg>
      </div>
      <span class="trait-label gray-trait">Gray</span>
    </div>

    
    <div class="flow-connector">
      <div class="diet-icon">🦐🌿</div>
      <svg class="arrow-svg" viewBox="0 0 60 20">
        <defs>
          <marker id="arrowhead" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
            <polygon points="0 0, 6 3, 0 6" fill="#0284c7" />
          </marker>
        </defs>
        <line x1="4" y1="10" x2="52" y2="10" stroke="#0284c7" stroke-width="3" stroke-linecap="round" marker-end="url(#arrowhead)" />
      </svg>
      <div class="flow-label">Diet:<br>Algae &amp; shrimp</div>
    </div>

    
    <div class="stage-card highlight">
      <div class="stage-title">Later in Life</div>
      <div class="art-box">
        <svg viewBox="0 0 100 100" width="100%" height="100%">
          
          <line x1="48" y1="62" x2="48" y2="92" stroke="#f43f5e" stroke-width="2.5" stroke-linecap="round" />
          <line x1="48" y1="68" x2="38" y2="78" stroke="#f43f5e" stroke-width="2" stroke-linecap="round" />
          <line x1="38" y1="78" x2="42" y2="86" stroke="#f43f5e" stroke-width="2" stroke-linecap="round" />
          <path d="M44 92 L52 92" stroke="#f43f5e" stroke-width="2.5" stroke-linecap="round" />
          
          <ellipse cx="50" cy="50" rx="22" ry="16" fill="#fb7185" />
          
          <path d="M35 48 C42 43, 56 46, 64 54 C54 59, 42 58, 35 48 Z" fill="#f43f5e" />
          
          <path d="M60 52 C72 45, 70 24, 58 20 C54 18, 52 14, 56 10" fill="none" stroke="#fb7185" stroke-width="6" stroke-linecap="round" />
          
          <circle cx="56" cy="10" r="7" fill="#fb7185" />
          
          <circle cx="55" cy="9" r="1.5" fill="#fef08a" />
          <circle cx="55" cy="9" r="0.8" fill="#0f172a" />
          
          <path d="M60 11 C65 12, 67 17, 65 22 C62 20, 60 15, 60 14 Z" fill="#0f172a" />
          <path d="M60 11 C62 11.5, 63 14, 61 15 Z" fill="#fecdd3" />
        </svg>
      </div>
      <span class="trait-label pink-trait">Bright Pink</span>
    </div>

  </div>

</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="1:1">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #ffffff;
      color: #1e2945;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      user-select: none;
    }

    .grid-wrap {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      width: 100%;
    }

    .column-card {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .col-header {
      padding: 10px 8px;
      text-align: center;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.25;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
    }

    .col-header .sub {
      font-size: 11px;
      font-weight: 500;
      opacity: 0.9;
    }

    .inherited-header {
      background: #f0fdf4;
      color: #15803d;
      border-bottom: 2px solid #86efac;
    }

    .acquired-header {
      background: #fff7ed;
      color: #c2410c;
      border-bottom: 2px solid #fdba74;
    }

    .list {
      padding: 8px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      flex: 1;
    }

    .item {
      background: #fafafa;
      border: 1px solid #e6e6e6;
      border-radius: 8px;
      padding: 8px 6px;
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      transition: background-color 0.2s ease, border-color 0.2s ease;
    }

    .item:active {
      background: #f1f5f9;
    }

    .item.active-inherited {
      background: #ecfdf5;
      border-color: #34d399;
      box-shadow: 0 0 0 1px #34d399;
    }

    .item.active-acquired {
      background: #fff7ed;
      border-color: #fb923c;
      box-shadow: 0 0 0 1px #fb923c;
    }

    .icon {
      font-size: 18px;
      line-height: 1;
      flex-shrink: 0;
    }

    .label {
      line-height: 1.2;
    }

    .footer-hint {
      text-align: center;
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      background: #f8fafc;
      border: 1px dashed #e2e8f0;
      border-radius: 6px;
      padding: 6px 4px;
    }
  </style>
</head>
<body>

  <div class="grid-wrap">
    
    <div class="column-card">
      <div class="col-header inherited-header">
        <span>Inherited Traits</span>
        <span class="sub">(Born With)</span>
      </div>
      <div class="list">
        <div class="item" onclick="toggleSelect(this, 'active-inherited')">
          <span class="icon">🦅</span>
          <span class="label">Eagle's sharp talons</span>
        </div>
        <div class="item" onclick="toggleSelect(this, 'active-inherited')">
          <span class="icon">🦓</span>
          <span class="label">Zebra's stripes</span>
        </div>
        <div class="item" onclick="toggleSelect(this, 'active-inherited')">
          <span class="icon">👁️</span>
          <span class="label">Human eye color</span>
        </div>
      </div>
    </div>

    
    <div class="column-card">
      <div class="col-header acquired-header">
        <span>Acquired or Learned</span>
        <span class="sub">(Gained in Life)</span>
      </div>
      <div class="list">
        <div class="item" onclick="toggleSelect(this, 'active-acquired')">
          <span class="icon">🥏</span>
          <span class="label">Dog catching frisbee</span>
        </div>
        <div class="item" onclick="toggleSelect(this, 'active-acquired')">
          <span class="icon">🌳</span>
          <span class="label">Broken tree branch</span>
        </div>
        <div class="item" onclick="toggleSelect(this, 'active-acquired')">
          <span class="icon">🎵</span>
          <span class="label">Bird's song trick</span>
        </div>
      </div>
    </div>
  </div>

  <div class="footer-hint" id="status">
    Tap any trait to compare
  </div>

  <script>
    function toggleSelect(el, activeClass) {
      const isInherited = activeClass === 'active-inherited';
      const wasActive = el.classList.contains(activeClass);
      
      document.querySelectorAll('.item').forEach(item => {
        item.classList.remove('active-inherited', 'active-acquired');
      });

      const statusEl = document.getElementById('status');

      if (!wasActive) {
        el.classList.add(activeClass);
        if (isInherited) {
          statusEl.textContent = "🧬 Inherited: Passed from parents through DNA";
          statusEl.style.color = "#15803d";
        } else {
          statusEl.textContent = "🌍 Acquired: Shaped by learning or environment";
          statusEl.style.color = "#c2410c";
        }
      } else {
        statusEl.textContent = "Tap any trait to compare";
        statusEl.style.color = "#64748b";
      }
    }
  </script>
</body>
</html>

science.ks3.y2.t3.s2

Aligned learning resources

Related diagrams