<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Darwin's Giraffe Model</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #1e293b;
      width: 100%;
      min-height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 8px 12px;
    }

    /* Controls Header */
    .controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: 540px;
      margin-bottom: 8px;
      gap: 6px;
    }

    .step-tabs {
      display: flex;
      gap: 6px;
      flex: 1;
    }

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

    .tab-btn.active {
      background: #10b981;
      color: #ffffff;
      border-color: #10b981;
    }

    .play-btn {
      padding: 7px 12px;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      background: #f1f5f9;
      color: #1e293b;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Main Scene Area - Flat, no outer card border/shadow */
    .scene-container {
      width: 100%;
      max-width: 540px;
      aspect-ratio: 540 / 280;
      position: relative;
      overflow: hidden;
    }

    .step-view {
      position: absolute;
      inset: 0;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
      display: flex;
      flex-direction: column;
    }

    .step-view.active {
      opacity: 1;
      pointer-events: auto;
    }

    /* SVG Canvas */
    svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    /* Labels inside SVG */
    .svg-title {
      font-size: 14px;
      font-weight: 700;
      fill: #1e293b;
    }
    .badge-text {
      font-size: 11px;
      font-weight: 700;
    }
    .giraffe-label {
      font-size: 12px;
      font-weight: 700;
      fill: #1e293b;
      text-anchor: middle;
    }
    .status-label-bad {
      font-size: 12px;
      font-weight: 700;
      fill: #b91c1c;
      text-anchor: middle;
    }
    .status-label-good {
      font-size: 12px;
      font-weight: 700;
      fill: #047857;
      text-anchor: middle;
    }
  </style>
</head>
<body>

  <div class="controls">
    <div class="step-tabs">
      <button class="tab-btn active" onclick="setStep(0)">1. Variation</button>
      <button class="tab-btn" onclick="setStep(1)">2. Selection</button>
      <button class="tab-btn" onclick="setStep(2)">3. Next Gen</button>
    </div>
    <button class="play-btn" id="playBtn" onclick="togglePlay()" aria-label="Toggle autoplay">⏸</button>
  </div>

  <div class="scene-container">
    
    <div class="step-view active" id="view0">
      <svg viewBox="0 0 540 280">
        
        <rect x="0" y="260" width="540" height="20" fill="#e2e8f0"/>
        <line x1="0" y1="260" x2="540" y2="260" stroke="#cbd5e1" stroke-width="2"/>

        <text x="16" y="24" class="svg-title">1. Natural Variation in Neck Length</text>

        
        <g transform="translate(60, 100)">
          
          <rect x="35" y="110" width="8" height="50" fill="#f59e0b" rx="3"/>
          <rect x="55" y="110" width="8" height="50" fill="#d97706" rx="3"/>
          <rect x="75" y="110" width="8" height="50" fill="#f59e0b" rx="3"/>
          <rect x="95" y="110" width="8" height="50" fill="#d97706" rx="3"/>
          
          <rect x="30" y="80" width="80" height="35" rx="14" fill="#fbbf24"/>
          <circle cx="50" cy="95" r="4" fill="#b45309"/>
          <circle cx="75" cy="92" r="5" fill="#b45309"/>
          <circle cx="95" cy="100" r="4" fill="#b45309"/>
          
          <rect x="90" y="45" width="16" height="40" rx="6" fill="#fbbf24"/>
          <circle cx="98" cy="65" r="3" fill="#b45309"/>
          
          <ellipse cx="104" cy="40" rx="12" ry="8" fill="#fbbf24"/>
          <line x1="102" y1="33" x2="100" y2="27" stroke="#b45309" stroke-width="2" stroke-linecap="round"/>
          <line x1="106" y1="33" x2="108" y2="27" stroke="#b45309" stroke-width="2" stroke-linecap="round"/>
          <circle cx="107" cy="38" r="2" fill="#1e293b"/>
          <text x="70" y="174" class="giraffe-label">Short Neck</text>
        </g>

        
        <g transform="translate(215, 65)">
          
          <rect x="35" y="145" width="8" height="50" fill="#f59e0b" rx="3"/>
          <rect x="55" y="145" width="8" height="50" fill="#d97706" rx="3"/>
          <rect x="75" y="145" width="8" height="50" fill="#f59e0b" rx="3"/>
          <rect x="95" y="145" width="8" height="50" fill="#d97706" rx="3"/>
          
          <rect x="30" y="115" width="80" height="35" rx="14" fill="#fbbf24"/>
          <circle cx="50" cy="130" r="4" fill="#b45309"/>
          <circle cx="75" cy="127" r="5" fill="#b45309"/>
          <circle cx="95" cy="135" r="4" fill="#b45309"/>
          
          <rect x="90" y="40" width="16" height="80" rx="6" fill="#fbbf24"/>
          <circle cx="98" cy="65" r="3" fill="#b45309"/>
          <circle cx="98" cy="95" r="3" fill="#b45309"/>
          
          <ellipse cx="104" cy="35" rx="12" ry="8" fill="#fbbf24"/>
          <line x1="102" y1="28" x2="100" y2="22" stroke="#b45309" stroke-width="2" stroke-linecap="round"/>
          <line x1="106" y1="28" x2="108" y2="22" stroke="#b45309" stroke-width="2" stroke-linecap="round"/>
          <circle cx="107" cy="33" r="2" fill="#1e293b"/>
          <text x="70" y="209" class="giraffe-label">Medium Neck</text>
        </g>

        
        <g transform="translate(370, 20)">
          
          <rect x="35" y="190" width="8" height="50" fill="#f59e0b" rx="3"/>
          <rect x="55" y="190" width="8" height="50" fill="#d97706" rx="3"/>
          <rect x="75" y="190" width="8" height="50" fill="#f59e0b" rx="3"/>
          <rect x="95" y="190" width="8" height="50" fill="#d97706" rx="3"/>
          
          <rect x="30" y="160" width="80" height="35" rx="14" fill="#fbbf24"/>
          <circle cx="50" cy="175" r="4" fill="#b45309"/>
          <circle cx="75" cy="172" r="5" fill="#b45309"/>
          <circle cx="95" cy="180" r="4" fill="#b45309"/>
          
          <rect x="90" y="30" width="16" height="135" rx="6" fill="#fbbf24"/>
          <circle cx="98" cy="55" r="3" fill="#b45309"/>
          <circle cx="98" cy="85" r="3" fill="#b45309"/>
          <circle cx="98" cy="120" r="3" fill="#b45309"/>
          
          <ellipse cx="104" cy="25" rx="12" ry="8" fill="#fbbf24"/>
          <line x1="102" y1="18" x2="100" y2="12" stroke="#b45309" stroke-width="2" stroke-linecap="round"/>
          <line x1="106" y1="18" x2="108" y2="12" stroke="#b45309" stroke-width="2" stroke-linecap="round"/>
          <circle cx="107" cy="23" r="2" fill="#1e293b"/>
          <text x="70" y="254" class="giraffe-label">Long Neck</text>
        </g>
      </svg>
    </div>

    
    <div class="step-view" id="view1">
      <svg viewBox="0 0 540 280">
        
        <rect x="0" y="260" width="540" height="20" fill="#e2e8f0"/>
        <line x1="0" y1="260" x2="540" y2="260" stroke="#cbd5e1" stroke-width="2"/>

        <text x="16" y="24" class="svg-title">2. Environmental Pressure &amp; Selection</text>

        
        <g transform="translate(230, 10)">
          
          <path d="M45,250 C40,160 30,110 5,65 L25,65 C45,110 55,160 55,250 Z" fill="#854d0e"/>
          
          <ellipse cx="10" cy="55" rx="55" ry="20" fill="#10b981"/>
          <ellipse cx="40" cy="45" rx="45" ry="18" fill="#059669"/>
          <ellipse cx="-15" cy="50" rx="35" ry="15" fill="#34d399"/>
        </g>

        
        <g transform="translate(50, 100)">
          
          <g opacity="0.55">
            <rect x="35" y="110" width="8" height="50" fill="#f59e0b" rx="3"/>
            <rect x="55" y="110" width="8" height="50" fill="#d97706" rx="3"/>
            <rect x="75" y="110" width="8" height="50" fill="#f59e0b" rx="3"/>
            <rect x="95" y="110" width="8" height="50" fill="#d97706" rx="3"/>
            <rect x="30" y="80" width="80" height="35" rx="14" fill="#fbbf24"/>
            <rect x="90" y="45" width="16" height="40" rx="6" fill="#fbbf24"/>
            <ellipse cx="104" cy="40" rx="12" ry="8" fill="#fbbf24"/>
          </g>
          
          <circle cx="70" cy="30" r="11" fill="#ef4444"/>
          <text x="70" y="34.5" fill="#ffffff" font-size="13" font-weight="900" text-anchor="middle" dominant-baseline="middle">✕</text>
          <text x="70" y="174" class="status-label-bad">Cannot reach (Dies)</text>
        </g>

        
        <g transform="translate(190, 20)">
          <rect x="35" y="190" width="8" height="50" fill="#f59e0b" rx="3"/>
          <rect x="55" y="190" width="8" height="50" fill="#d97706" rx="3"/>
          <rect x="75" y="190" width="8" height="50" fill="#f59e0b" rx="3"/>
          <rect x="95" y="190" width="8" height="50" fill="#d97706" rx="3"/>
          <rect x="30" y="160" width="80" height="35" rx="14" fill="#fbbf24"/>
          <circle cx="50" cy="175" r="4" fill="#b45309"/>
          <circle cx="75" cy="172" r="5" fill="#b45309"/>
          
          <path d="M90,165 L60,42 L76,38 L106,165 Z" fill="#fbbf24"/>
          <circle cx="85" cy="115" r="3" fill="#b45309"/>
          <circle cx="75" cy="75" r="3" fill="#b45309"/>
          <ellipse cx="58" cy="35" rx="12" ry="8" fill="#fbbf24" transform="rotate(-20 58 35)"/>
          <circle cx="54" cy="33" r="2" fill="#1e293b"/>
          
          <circle cx="120" cy="70" r="11" fill="#10b981"/>
          <text x="120" y="74.5" fill="#ffffff" font-size="13" font-weight="900" text-anchor="middle" dominant-baseline="middle">✓</text>
          <text x="120" y="96" class="status-label-good">Survives &amp; Eats</text>
        </g>
      </svg>
    </div>

    
    <div class="step-view" id="view2">
      <svg viewBox="0 0 540 280">
        
        <rect x="0" y="260" width="540" height="20" fill="#e2e8f0"/>
        <line x1="0" y1="260" x2="540" y2="260" stroke="#cbd5e1" stroke-width="2"/>

        <text x="16" y="24" class="svg-title">3. Next Generation: Mostly Long Necks</text>

        
        <g transform="translate(40, 20)">
          <rect x="35" y="190" width="8" height="50" fill="#f59e0b" rx="3"/>
          <rect x="55" y="190" width="8" height="50" fill="#d97706" rx="3"/>
          <rect x="75" y="190" width="8" height="50" fill="#f59e0b" rx="3"/>
          <rect x="95" y="190" width="8" height="50" fill="#d97706" rx="3"/>
          <rect x="30" y="160" width="80" height="35" rx="14" fill="#fbbf24"/>
          <circle cx="50" cy="175" r="4" fill="#b45309"/>
          <circle cx="75" cy="172" r="5" fill="#b45309"/>
          <rect x="90" y="30" width="16" height="135" rx="6" fill="#fbbf24"/>
          <circle cx="98" cy="70" r="3" fill="#b45309"/>
          <circle cx="98" cy="110" r="3" fill="#b45309"/>
          <ellipse cx="104" cy="25" rx="12" ry="8" fill="#fbbf24"/>
          <circle cx="107" cy="23" r="2" fill="#1e293b"/>
          <text x="70" y="254" class="giraffe-label">Long Neck</text>
        </g>

        
        <g transform="translate(195, 20)">
          <rect x="35" y="190" width="8" height="50" fill="#f59e0b" rx="3"/>
          <rect x="55" y="190" width="8" height="50" fill="#d97706" rx="3"/>
          <rect x="75" y="190" width="8" height="50" fill="#f59e0b" rx="3"/>
          <rect x="95" y="190" width="8" height="50" fill="#d97706" rx="3"/>
          <rect x="30" y="160" width="80" height="35" rx="14" fill="#fbbf24"/>
          <circle cx="50" cy="175" r="4" fill="#b45309"/>
          <circle cx="75" cy="172" r="5" fill="#b45309"/>
          <rect x="90" y="30" width="16" height="135" rx="6" fill="#fbbf24"/>
          <circle cx="98" cy="60" r="3" fill="#b45309"/>
          <circle cx="98" cy="100" r="3" fill="#b45309"/>
          <ellipse cx="104" cy="25" rx="12" ry="8" fill="#fbbf24"/>
          <circle cx="107" cy="23" r="2" fill="#1e293b"/>
          <text x="70" y="254" class="giraffe-label">Long Neck</text>
        </g>

        
        <g transform="translate(350, 50)">
          <rect x="35" y="160" width="7" height="50" fill="#f59e0b" rx="3"/>
          <rect x="53" y="160" width="7" height="50" fill="#d97706" rx="3"/>
          <rect x="70" y="160" width="7" height="50" fill="#f59e0b" rx="3"/>
          <rect x="88" y="160" width="7" height="50" fill="#d97706" rx="3"/>
          <rect x="30" y="135" width="70" height="30" rx="12" fill="#fbbf24"/>
          <circle cx="48" cy="148" r="4" fill="#b45309"/>
          <circle cx="70" cy="145" r="4" fill="#b45309"/>
          <rect x="82" y="25" width="14" height="115" rx="5" fill="#fbbf24"/>
          <circle cx="89" cy="55" r="3" fill="#b45309"/>
          <circle cx="89" cy="90" r="3" fill="#b45309"/>
          <ellipse cx="94" cy="20" rx="10" ry="7" fill="#fbbf24"/>
          <circle cx="97" cy="19" r="2" fill="#1e293b"/>
          <text x="65" y="224" class="giraffe-label">Offspring</text>
        </g>
      </svg>
    </div>
  </div>

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

    const views = [
      document.getElementById('view0'),
      document.getElementById('view1'),
      document.getElementById('view2')
    ];
    const tabs = document.querySelectorAll('.tab-btn');
    const playBtn = document.getElementById('playBtn');

    function setStep(idx) {
      currentStep = idx;
      views.forEach((v, i) => {
        if (i === idx) v.classList.add('active');
        else v.classList.remove('active');
      });
      tabs.forEach((t, i) => {
        if (i === idx) t.classList.add('active');
        else t.classList.remove('active');
      });
    }

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

    function startTimer() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, 3500);
      isPlaying = true;
      playBtn.textContent = '⏸';
    }

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

    function togglePlay() {
      if (isPlaying) pauseTimer();
      else {
        nextStep();
        startTimer();
      }
    }

    // Initialize auto-play
    startTimer();
  </script>
</body>
</html>

Comparing Evolutionary Theories: Lamarck vs. Darwin

<!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: 8px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      user-select: none;
    }

    .controls {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 6px;
    }

    .btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 4px 10px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: background 0.2s, color 0.2s, border-color 0.2s;
    }
    .btn:hover { background: #e2e8f0; }
    .btn.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
    }

    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .col-panel {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .col-header {
      padding: 6px 8px;
      border-radius: 6px;
      color: #ffffff;
      font-size: 13px;
      font-weight: 700;
      text-align: center;
      letter-spacing: 0.2px;
    }
    .header-lamarck { background: #2563eb; }
    .header-darwin { background: #d97706; }

    .step-card {
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 8px;
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 52px;
      transition: opacity 0.3s, border-color 0.3s, background 0.3s;
      opacity: 0.35;
    }
    .step-card.active {
      opacity: 1;
      background: #ffffff;
      border-color: #94a3b8;
      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }
    .lamarck .step-card.active { border-color: #2563eb; }
    .darwin .step-card.active { border-color: #d97706; }

    .step-badge {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #e2e8f0;
      color: #64748b;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
      flex-shrink: 0;
    }
    .lamarck .step-card.active .step-badge {
      background: #2563eb;
      color: #ffffff;
    }
    .darwin .step-card.active .step-badge {
      background: #d97706;
      color: #ffffff;
    }

    .step-visual {
      font-size: 20px;
      line-height: 1;
      flex-shrink: 0;
    }

    .step-text {
      font-size: 12px;
      font-weight: 600;
      line-height: 1.25;
      color: #1e2945;
    }

    .callout {
      background: #f1f5f9;
      border: 1px dashed #94a3b8;
      border-radius: 6px;
      padding: 6px 10px;
      text-align: center;
      font-size: 12px;
      font-weight: 700;
      color: #334155;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
    }
    .tag-lamarck { color: #2563eb; }
    .tag-darwin { color: #d97706; }

    @media (max-width: 420px) {
      .col-header { font-size: 11px; padding: 4px; }
      .step-card { padding: 4px 6px; min-height: 48px; gap: 6px; }
      .step-text { font-size: 11px; }
      .step-visual { font-size: 17px; }
      .step-badge { width: 18px; height: 18px; font-size: 10px; }
      .callout { font-size: 11px; padding: 4px 6px; }
    }
  </style>
</head>
<body>

  <div class="controls">
    <button class="btn" id="playBtn">⏸ Pause</button>
    <button class="btn active" data-step="0">Step A</button>
    <button class="btn" data-step="1">Step B</button>
    <button class="btn" data-step="2">Step C</button>
    <button class="btn" data-step="all">View All</button>
  </div>

  <div class="grid">
    
    <div class="col-panel lamarck">
      <div class="col-header header-lamarck">Lamarck: Acquired Traits</div>
      
      <div class="step-card active" data-step="0">
        <div class="step-badge">A</div>
        <div class="step-visual">🦒🌿</div>
        <div class="step-text">Organism feels<br>a need</div>
      </div>

      <div class="step-card" data-step="1">
        <div class="step-badge">B</div>
        <div class="step-visual">🦒⤊</div>
        <div class="step-text">Individual stretches<br>own body</div>
      </div>

      <div class="step-card" data-step="2">
        <div class="step-badge">C</div>
        <div class="step-visual">🦒✨</div>
        <div class="step-text">Offspring inherits<br>modified trait</div>
      </div>
    </div>

    
    <div class="col-panel darwin">
      <div class="col-header header-darwin">Darwin: Natural Selection</div>

      <div class="step-card active" data-step="0">
        <div class="step-badge">A</div>
        <div class="step-visual">🦒🦒</div>
        <div class="step-text">Born differences<br>(variation)</div>
      </div>

      <div class="step-card" data-step="1">
        <div class="step-badge">B</div>
        <div class="step-visual">🌿✓</div>
        <div class="step-text">Environment favors<br>helpful traits</div>
      </div>

      <div class="step-card" data-step="2">
        <div class="step-badge">C</div>
        <div class="step-visual">📈🦒</div>
        <div class="step-text">Trait spreads over<br>generations</div>
      </div>
    </div>
  </div>

  <div class="callout">
    <span class="tag-lamarck">Individual changes</span>
    <span>⚡ vs ⚡</span>
    <span class="tag-darwin">Population shifts</span>
  </div>

  <script>
    const cards = document.querySelectorAll('.step-card');
    const stepBtns = document.querySelectorAll('.controls button[data-step]');
    const playBtn = document.getElementById('playBtn');

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

    function setStep(step) {
      stepBtns.forEach(btn => {
        btn.classList.toggle('active', btn.dataset.step === String(step));
      });

      cards.forEach(card => {
        if (step === 'all') {
          card.classList.add('active');
        } else {
          card.classList.toggle('active', card.dataset.step === String(step));
        }
      });
    }

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

    function startTimer() {
      if (timer) clearInterval(timer);
      timer = setInterval(advance, 3200);
      playBtn.textContent = '⏸ Pause';
      isPlaying = true;
    }

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

    playBtn.addEventListener('click', () => {
      if (isPlaying) {
        stopTimer();
      } else {
        if (document.querySelector('button[data-step="all"].active')) {
          currentStep = 0;
          setStep(0);
        }
        startTimer();
      }
    });

    stepBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        stopTimer();
        const s = btn.dataset.step;
        if (s !== 'all') currentStep = parseInt(s, 10);
        setStep(s);
      });
    });

    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">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      background: #f8f9fa;
      color: #1e2945;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

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

    .step-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 8px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
      transition: box-shadow 0.2s ease, border-color 0.2s ease;
    }

    .step-card.active {
      border-color: #ff7a00;
      box-shadow: 0 0 0 2px rgba(255, 122, 0, 0.25);
    }

    .step-badge {
      position: absolute;
      top: 8px;
      left: 8px;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #1e2945;
      color: #ffffff;
      font-size: 12px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .step-card.active .step-badge {
      background: #ff7a00;
    }

    .scene {
      width: 100%;
      height: 160px;
      margin: 12px 0 6px;
    }

    .step-label {
      font-size: 13px;
      font-weight: 700;
      text-align: center;
      line-height: 1.2;
      color: #1e2945;
      min-height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .controls {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 10px;
    }

    .btn-ctrl {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 4px 10px;
      font-size: 12px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
    }

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

    .dot-track {
      display: flex;
      gap: 6px;
      align-items: center;
    }

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

    .dot.active {
      background: #ff7a00;
    }

    @media (max-width: 480px) {
      .comic-grid {
        grid-template-columns: 1fr;
        gap: 8px;
      }
      .scene {
        height: 120px;
      }
      .step-label {
        min-height: auto;
      }
    }
  </style>
</head>
<body>

  <div class="comic-grid">
    
    <div class="step-card active" data-step="0" onclick="selectStep(0)">
      <div class="step-badge">1</div>
      <svg class="scene" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
        
        <rect x="22" y="30" width="8" height="110" rx="3" fill="#8c6239"/>
        <ellipse cx="26" cy="35" rx="22" ry="16" fill="#48bb78"/>
        <ellipse cx="26" cy="22" rx="16" ry="12" fill="#38a169"/>
        <ellipse cx="38" cy="30" rx="14" ry="10" fill="#2f855a"/>
        
        <line x1="10" y1="140" x2="150" y2="140" stroke="#cbd5e1" stroke-width="3" stroke-linecap="round"/>
        
        
        <line x1="95" y1="115" x2="95" y2="140" stroke="#d97706" stroke-width="4" stroke-linecap="round"/>
        <line x1="105" y1="115" x2="105" y2="140" stroke="#d97706" stroke-width="4" stroke-linecap="round"/>
        <line x1="125" y1="115" x2="125" y2="140" stroke="#d97706" stroke-width="4" stroke-linecap="round"/>
        <line x1="133" y1="115" x2="133" y2="140" stroke="#d97706" stroke-width="4" stroke-linecap="round"/>
        
        <ellipse cx="115" cy="112" rx="22" ry="14" fill="#f59e0b"/>
        
        <circle cx="112" cy="110" r="3" fill="#b45309"/>
        <circle cx="122" cy="114" r="2.5" fill="#b45309"/>
        
        <path d="M 98 108 Q 94 92 88 84" stroke="#f59e0b" stroke-width="10" stroke-linecap="round"/>
        <circle cx="94" cy="95" r="2" fill="#b45309"/>
        
        <ellipse cx="84" cy="80" rx="7" ry="5" fill="#f59e0b" transform="rotate(-15 84 80)"/>
        <circle cx="82" cy="79" r="1.2" fill="#1e2945"/>
        <line x1="86" y1="76" x2="88" y2="72" stroke="#b45309" stroke-width="2" stroke-linecap="round"/>
      </svg>
      <div class="step-label">Short neck<br>cannot reach</div>
    </div>

    
    <div class="step-card" data-step="1" onclick="selectStep(1)">
      <div class="step-badge">2</div>
      <svg class="scene" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
        
        <rect x="22" y="30" width="8" height="110" rx="3" fill="#8c6239"/>
        <ellipse cx="26" cy="35" rx="22" ry="16" fill="#48bb78"/>
        <ellipse cx="26" cy="22" rx="16" ry="12" fill="#38a169"/>
        <ellipse cx="38" cy="30" rx="14" ry="10" fill="#2f855a"/>
        
        <line x1="10" y1="140" x2="150" y2="140" stroke="#cbd5e1" stroke-width="3" stroke-linecap="round"/>
        
        <path d="M 68 75 L 56 46" stroke="#ff7a00" stroke-width="2.5" stroke-dasharray="3 3"/>
        <polygon points="54,42 62,47 55,51" fill="#ff7a00"/>
        
        
        <line x1="95" y1="115" x2="95" y2="140" stroke="#d97706" stroke-width="4" stroke-linecap="round"/>
        <line x1="105" y1="115" x2="105" y2="140" stroke="#d97706" stroke-width="4" stroke-linecap="round"/>
        <line x1="125" y1="115" x2="125" y2="140" stroke="#d97706" stroke-width="4" stroke-linecap="round"/>
        <line x1="133" y1="115" x2="133" y2="140" stroke="#d97706" stroke-width="4" stroke-linecap="round"/>
        
        <ellipse cx="115" cy="110" rx="22" ry="14" fill="#f59e0b" transform="rotate(-8 115 110)"/>
        
        <circle cx="110" cy="108" r="3" fill="#b45309"/>
        <circle cx="120" cy="112" r="2.5" fill="#b45309"/>
        
        <path d="M 96 104 Q 80 72 58 48" stroke="#f59e0b" stroke-width="9" stroke-linecap="round"/>
        <circle cx="82" cy="85" r="2" fill="#b45309"/>
        <circle cx="70" cy="67" r="2" fill="#b45309"/>
        
        <ellipse cx="54" cy="44" rx="7" ry="5" fill="#f59e0b" transform="rotate(-40 54 44)"/>
        <circle cx="52" cy="43" r="1.2" fill="#1e2945"/>
        <line x1="56" y1="40" x2="59" y2="36" stroke="#b45309" stroke-width="2" stroke-linecap="round"/>
      </svg>
      <div class="step-label">Stretching neck<br>during life</div>
    </div>

    
    <div class="step-card" data-step="2" onclick="selectStep(2)">
      <div class="step-badge">3</div>
      <svg class="scene" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
        
        <line x1="10" y1="140" x2="150" y2="140" stroke="#cbd5e1" stroke-width="3" stroke-linecap="round"/>
        
        
        <line x1="100" y1="115" x2="100" y2="140" stroke="#d97706" stroke-width="3.5" stroke-linecap="round"/>
        <line x1="108" y1="115" x2="108" y2="140" stroke="#d97706" stroke-width="3.5" stroke-linecap="round"/>
        <line x1="124" y1="115" x2="124" y2="140" stroke="#d97706" stroke-width="3.5" stroke-linecap="round"/>
        <line x1="130" y1="115" x2="130" y2="140" stroke="#d97706" stroke-width="3.5" stroke-linecap="round"/>
        <ellipse cx="116" cy="112" rx="18" ry="12" fill="#f59e0b"/>
        <circle cx="114" cy="110" r="2.5" fill="#b45309"/>
        
        <path d="M 102 106 Q 94 65 86 42" stroke="#f59e0b" stroke-width="8" stroke-linecap="round"/>
        <circle cx="96" cy="85" r="2" fill="#b45309"/>
        <circle cx="91" cy="62" r="2" fill="#b45309"/>
        <ellipse cx="83" cy="38" rx="6" ry="4.5" fill="#f59e0b" transform="rotate(-15 83 38)"/>
        <circle cx="81" cy="37" r="1" fill="#1e2945"/>
        <line x1="85" y1="34" x2="87" y2="30" stroke="#b45309" stroke-width="1.8" stroke-linecap="round"/>

        
        
        <path d="M 52 76 Q 52 70 58 70" stroke="#ff7a00" stroke-width="2" stroke-dasharray="2 2"/>
        <text x="50" y="64" font-size="10" font-weight="800" fill="#ff7a00" text-anchor="middle">Inherited!</text>
        
        <line x1="38" y1="126" x2="38" y2="140" stroke="#d97706" stroke-width="2.5" stroke-linecap="round"/>
        <line x1="44" y1="126" x2="44" y2="140" stroke="#d97706" stroke-width="2.5" stroke-linecap="round"/>
        <line x1="56" y1="126" x2="56" y2="140" stroke="#d97706" stroke-width="2.5" stroke-linecap="round"/>
        <line x1="61" y1="126" x2="61" y2="140" stroke="#d97706" stroke-width="2.5" stroke-linecap="round"/>
        <ellipse cx="50" cy="124" rx="12" ry="8" fill="#f59e0b"/>
        <circle cx="48" cy="123" r="1.5" fill="#b45309"/>
        
        <path d="M 42 120 Q 36 96 32 80" stroke="#f59e0b" stroke-width="5" stroke-linecap="round"/>
        <circle cx="37" cy="106" r="1.2" fill="#b45309"/>
        <circle cx="34" cy="92" r="1.2" fill="#b45309"/>
        <ellipse cx="30" cy="77" rx="4.5" ry="3.5" fill="#f59e0b" transform="rotate(-15 30 77)"/>
        <circle cx="29" cy="76" r="0.8" fill="#1e2945"/>
        <line x1="31" y1="74" x2="33" y2="70" stroke="#b45309" stroke-width="1.2" stroke-linecap="round"/>
      </svg>
      <div class="step-label">Baby born with<br>longer neck</div>
    </div>
  </div>

  
  <div class="controls">
    <button class="btn-ctrl" id="playBtn" onclick="togglePlay()">
      <span id="playIcon">⏸</span> <span id="playText">Pause</span>
    </button>
    <div class="dot-track">
      <div class="dot active" onclick="selectStep(0)"></div>
      <div class="dot" onclick="selectStep(1)"></div>
      <div class="dot" onclick="selectStep(2)"></div>
    </div>
  </div>

  <script>
    let current = 0;
    let playing = true;
    let timer = null;

    const cards = document.querySelectorAll('.step-card');
    const dots = document.querySelectorAll('.dot');
    const playIcon = document.getElementById('playIcon');
    const playText = document.getElementById('playText');

    function updateView() {
      cards.forEach((card, i) => {
        card.classList.toggle('active', i === current);
      });
      dots.forEach((dot, i) => {
        dot.classList.toggle('active', i === current);
      });
    }

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

    function selectStep(index) {
      current = index;
      updateView();
    }

    function startAutoPlay() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, 3200);
      playing = true;
      playIcon.textContent = '⏸';
      playText.textContent = 'Pause';
    }

    function pauseAutoPlay() {
      if (timer) clearInterval(timer);
      playing = false;
      playIcon.textContent = '▶';
      playText.textContent = 'Play';
    }

    function togglePlay() {
      if (playing) {
        pauseAutoPlay();
      } else {
        startAutoPlay();
      }
    }

    startAutoPlay();
  </script>
</body>
</html>

OGS.7.LS.6

Aligned learning resources

Related diagrams