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

    .comparison-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 680px;
      margin: 0 auto;
    }

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

    .col-header {
      text-align: center;
      padding: 10px 8px;
      border-radius: 10px;
      font-size: 15px;
      font-weight: 700;
      letter-spacing: -0.01em;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }

    /* Blue Theme: Inherited */
    .blue-theme .col-header {
      background: #dbeafe;
      color: #1e40af;
      border: 1px solid #bfdbfe;
    }

    .blue-theme .item-card {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-left: 4px solid #3b82f6;
    }

    .blue-theme .rule-card {
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      color: #1e3a8a;
    }

    /* Green Theme: Learned */
    .green-theme .col-header {
      background: #dcfce7;
      color: #15803d;
      border: 1px solid #bbf7d0;
    }

    .green-theme .item-card {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-left: 4px solid #22c55e;
    }

    .green-theme .rule-card {
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
      color: #14532d;
    }

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

    .item-card {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 8px;
      transition: background-color 0.2s ease, border-color 0.2s ease;
      cursor: default;
    }

    .item-card:hover {
      background: #ffffff;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    }

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

    .item-label {
      font-size: 14px;
      font-weight: 600;
      color: #334155;
      line-height: 1.25;
    }

    .rule-card {
      padding: 10px 8px;
      border-radius: 8px;
      text-align: center;
      margin-top: 4px;
    }

    .rule-main {
      font-size: 13px;
      font-weight: 700;
      display: block;
      margin-bottom: 2px;
    }

    .rule-sub {
      font-size: 12px;
      opacity: 0.85;
      display: block;
      font-weight: 500;
    }

    @media (max-width: 400px) {
      body {
        padding: 8px;
      }
      .comparison-grid {
        gap: 8px;
      }
      .col-header {
        font-size: 13px;
        padding: 8px 4px;
      }
      .item-card {
        padding: 8px;
        gap: 6px;
      }
      .item-icon {
        font-size: 18px;
      }
      .item-label {
        font-size: 12px;
      }
      .rule-main {
        font-size: 11px;
      }
      .rule-sub {
        font-size: 10px;
      }
    }
  </style>
</head>
<body>

  <div class="comparison-grid">
    
    <div class="column blue-theme">
      <div class="col-header">
        <span>🧬</span>
        <span>Inherited Traits</span>
      </div>

      <div class="item-list">
        <div class="item-card">
          <span class="item-icon">👂</span>
          <span class="item-label">Attached<br>Earlobes</span>
        </div>
        <div class="item-card">
          <span class="item-icon">👁️</span>
          <span class="item-label">Brown<br>Eyes</span>
        </div>
        <div class="item-card">
          <span class="item-icon">🐅</span>
          <span class="item-label">Striped<br>Fur</span>
        </div>
      </div>

      <div class="rule-card">
        <span class="rule-main">Coded in DNA</span>
        <span class="rule-sub">Born With It</span>
      </div>
    </div>

    
    <div class="column green-theme">
      <div class="col-header">
        <span>🧠</span>
        <span>Learned Behaviors</span>
      </div>

      <div class="item-list">
        <div class="item-card">
          <span class="item-icon">🚲</span>
          <span class="item-label">Riding a<br>Bicycle</span>
        </div>
        <div class="item-card">
          <span class="item-icon">🗣️</span>
          <span class="item-label">Speaking<br>English</span>
        </div>
        <div class="item-card">
          <span class="item-icon">🐕</span>
          <span class="item-label">Catching a<br>Frisbee</span>
        </div>
      </div>

      <div class="rule-card">
        <span class="rule-main">Developed Through Practice</span>
        <span class="rule-sub">Experience</span>
      </div>
    </div>
  </div>

</body>
</html>

Inherited Traits vs. Learned Behaviors

<!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;
      -webkit-tap-highlight-color: transparent;
    }

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

    .toolbar {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
      width: 100%;
      max-width: 540px;
    }

    .tab-btn {
      flex: 1;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #64748b;
      padding: 8px 6px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: all 0.25s ease;
    }

    .tab-btn.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
      box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
    }

    .cards-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 540px;
    }

    @media (max-width: 420px) {
      .cards-grid {
        grid-template-columns: 1fr;
      }
    }

    .behavior-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 14px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      cursor: pointer;
      position: relative;
      transition: opacity 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .behavior-card.dimmed {
      opacity: 0.35;
    }

    .behavior-card.highlighted {
      border-color: #2563eb;
      box-shadow: 0 4px 14px rgba(37, 99, 235, 0.15);
    }

    .card-title {
      font-size: 15px;
      font-weight: 700;
      margin-bottom: 2px;
      color: #0f172a;
    }

    .card-subtitle {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      margin-bottom: 10px;
    }

    .visual-stage {
      width: 100%;
      height: 96px;
      background: #f8fafc;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      margin-bottom: 10px;
      border: 1px solid #edf2f7;
    }

    /* Spider Web Art */
    .web-lines {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      stroke: #cbd5e1;
      stroke-width: 1.2;
    }

    .spider-icon {
      font-size: 38px;
      z-index: 2;
      animation: gentle-bob 3s ease-in-out infinite;
    }

    /* Bear Fishing Art */
    .scene-icons {
      display: flex;
      align-items: center;
      gap: 6px;
      z-index: 2;
    }

    .elder-bear {
      font-size: 34px;
      opacity: 0.9;
    }

    .watch-arrow {
      font-size: 16px;
      color: #3b82f6;
      font-weight: bold;
    }

    .cub-bear {
      font-size: 26px;
    }

    .fish-icon {
      font-size: 18px;
      animation: splash 2.5s ease-in-out infinite;
    }

    @keyframes gentle-bob {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(4px); }
    }

    @keyframes splash {
      0%, 100% { transform: translate(0, 0) rotate(0deg); }
      50% { transform: translate(-2px, -4px) rotate(-15deg); }
    }

    .tag-badge {
      font-size: 12px;
      font-weight: 700;
      padding: 5px 8px;
      border-radius: 6px;
      width: 100%;
      letter-spacing: -0.2px;
    }

    .tag-instinct {
      background: #ecfdf5;
      color: #059669;
      border: 1px solid #a7f3d0;
    }

    .tag-learned {
      background: #eff6ff;
      color: #2563eb;
      border: 1px solid #bfdbfe;
    }

    .trait-label {
      font-size: 11px;
      font-weight: 600;
      color: #475569;
      margin-top: 6px;
    }
  </style>
</head>
<body>

  <div class="toolbar">
    <button class="tab-btn active" data-mode="all">Both</button>
    <button class="tab-btn" data-mode="instinct">🧬 Instinct</button>
    <button class="tab-btn" data-mode="learned">🎓 Learned</button>
  </div>

  <div class="cards-grid">
    
    <div class="behavior-card highlighted" id="cardA" data-type="instinct">
      <div class="card-title">Spider Web</div>
      <div class="card-subtitle">Inherited Trait</div>
      <div class="visual-stage">
        <svg class="web-lines" viewBox="0 0 100 80">
          <line x1="0" y1="0" x2="100" y2="80" />
          <line x1="100" y1="0" x2="0" y2="80" />
          <line x1="50" y1="0" x2="50" y2="80" />
          <polygon points="50,15 75,40 50,65 25,40" fill="none" />
          <polygon points="50,26 65,40 50,54 35,40" fill="none" />
        </svg>
        <div class="spider-icon">🕷️</div>
      </div>
      <div class="tag-badge tag-instinct">Automatic at Birth</div>
      <div class="trait-label">No teacher needed</div>
    </div>

    
    <div class="behavior-card highlighted" id="cardB" data-type="learned">
      <div class="card-title">Bear Fishing</div>
      <div class="card-subtitle">Learned Trait</div>
      <div class="visual-stage">
        <div class="scene-icons">
          <span class="elder-bear">🐻</span>
          <span class="watch-arrow">👀</span>
          <span class="cub-bear">🧸</span>
          <span class="fish-icon">🐟</span>
        </div>
      </div>
      <div class="tag-badge tag-learned">Acquired by Experience</div>
      <div class="trait-label">Watching & practicing</div>
    </div>
  </div>

  <script>
    const buttons = document.querySelectorAll('.tab-btn');
    const cardA = document.getElementById('cardA');
    const cardB = document.getElementById('cardB');

    function setMode(mode) {
      buttons.forEach(btn => {
        btn.classList.toggle('active', btn.dataset.mode === mode);
      });

      if (mode === 'all') {
        cardA.classList.remove('dimmed');
        cardA.classList.add('highlighted');
        cardB.classList.remove('dimmed');
        cardB.classList.add('highlighted');
      } else if (mode === 'instinct') {
        cardA.classList.remove('dimmed');
        cardA.classList.add('highlighted');
        cardB.classList.add('dimmed');
        cardB.classList.remove('highlighted');
      } else if (mode === 'learned') {
        cardB.classList.remove('dimmed');
        cardB.classList.add('highlighted');
        cardA.classList.add('dimmed');
        cardA.classList.remove('highlighted');
      }
    }

    buttons.forEach(btn => {
      btn.addEventListener('click', () => setMode(btn.dataset.mode));
    });

    cardA.addEventListener('click', () => setMode('instinct'));
    cardB.addEventListener('click', () => setMode('learned'));
  </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">
  <title>The Quick Inheritance Test</title>
  <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;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
    }

    /* Trait selector bar */
    .tester-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: center;
      width: 100%;
      max-width: 580px;
      margin-bottom: 8px;
    }
    .trait-btn {
      background: #f1f5f9;
      border: 1.5px solid #cbd5e1;
      border-radius: 20px;
      padding: 5px 11px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: all 0.2s ease;
    }
    .trait-btn:hover {
      background: #e2e8f0;
    }
    .trait-btn.active {
      background: #22b7ff;
      border-color: #0284c7;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(34, 183, 255, 0.35);
    }

    /* Flowchart Container */
    .flow-wrapper {
      width: 100%;
      max-width: 580px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      position: relative;
    }

    /* Step Question Box */
    .step-card {
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 14px;
      transition: all 0.3s ease;
      position: relative;
    }
    .step-card.active-step {
      border-color: #22b7ff;
      background: #f0f9ff;
      box-shadow: 0 0 0 2px rgba(34, 183, 255, 0.2);
    }
    .step-header {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
      margin-bottom: 4px;
    }
    .step-title {
      font-size: 14.5px;
      font-weight: 700;
      color: #0f172a;
      line-height: 1.3;
    }

    /* Branch Container */
    .branch-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-top: 4px;
    }

    /* Outcome Badges */
    .outcome-card {
      border-radius: 12px;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      border: 2px solid transparent;
      opacity: 0.6;
      transition: all 0.3s ease;
    }
    .outcome-card.active-outcome {
      opacity: 1;
      transform: translateY(-1px);
    }

    /* Inherited / Instinct = Green */
    .outcome-green {
      background: #f0fdf4;
      border-color: #bbf7d0;
    }
    .outcome-green.active-outcome {
      border-color: #22c55e;
      box-shadow: 0 4px 12px rgba(34, 197, 94, 0.18);
    }
    .badge-green {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      align-self: flex-start;
      background: #16a34a;
      color: #fff;
      font-size: 12px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 6px;
    }

    /* Learned / Acquired = Orange */
    .outcome-orange {
      background: #fff7ed;
      border-color: #fed7aa;
    }
    .outcome-orange.active-outcome {
      border-color: #f97316;
      box-shadow: 0 4px 12px rgba(249, 115, 22, 0.18);
    }
    .badge-orange {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      align-self: flex-start;
      background: #ea580c;
      color: #fff;
      font-size: 12px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 6px;
    }

    /* Mini Examples */
    .examples-list {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      font-size: 11.5px;
      font-weight: 600;
      color: #475569;
    }
    .ex-chip {
      background: rgba(255,255,255,0.85);
      border: 1px solid rgba(0,0,0,0.08);
      border-radius: 4px;
      padding: 2px 6px;
      display: inline-flex;
      align-items: center;
      gap: 3px;
    }
    .ex-chip.highlight {
      background: #ffffff;
      font-weight: 700;
      color: #0f172a;
      border-color: #94a3b8;
    }

    /* Arrow connect indicators */
    .flow-connector {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      font-size: 12px;
      font-weight: 800;
      color: #64748b;
      margin: -4px 0;
    }
    .tag-yes { color: #16a34a; }
    .tag-no { color: #d97706; }
  </style>
</head>
<body>

  
  <div class="tester-bar" id="traitBar">
    <button class="trait-btn active" data-trait="fur">🐕 Golden Fur</button>
    <button class="trait-btn" data-trait="trick">🐾 High Five</button>
    <button class="trait-btn" data-trait="eyes">👁️ Eye Color</button>
    <button class="trait-btn" data-trait="guitar">🎸 Guitar Skill</button>
  </div>

  <div class="flow-wrapper">

    
    <div class="step-card active-step" id="step1">
      <div class="step-header">
        <span>Step 1</span>
        <span>•</span>
        <span>Origin Check</span>
      </div>
      <div class="step-title">Was the organism born with this feature in its genes?</div>
    </div>

    
    <div class="branch-row">

      
      <div class="outcome-card outcome-green active-outcome" id="cardInherited">
        <div class="flow-connector" style="justify-content: flex-start;">
          <span class="tag-yes">↳ YES</span>
        </div>
        <div class="badge-green">🧬 Inherited Trait or Instinct</div>
        <div class="examples-list">
          <span class="ex-chip" id="ex-eyes">👁️ Eye color</span>
          <span class="ex-chip" id="ex-fur">🐕 Golden fur</span>
          <span class="ex-chip" id="ex-web">🕸️ Web spinning</span>
        </div>
      </div>

      
      <div style="display: flex; flex-direction: column; gap: 8px;">
        <div class="step-card" id="step2" style="padding: 8px 10px;">
          <div class="flow-connector" style="justify-content: flex-start; margin-bottom: 2px;">
            <span class="tag-no">↳ NO</span>
            <span style="font-size: 10px; color: #94a3b8;">(Step 2)</span>
          </div>
          <div class="step-title" style="font-size: 12.5px;">Did it learn it or acquire it during life?</div>
        </div>

        
        <div class="outcome-card outcome-orange" id="cardAcquired">
          <div class="flow-connector" style="justify-content: flex-start;">
            <span class="tag-yes" style="color: #ea580c;">↳ YES</span>
          </div>
          <div class="badge-orange">💡 Learned Behavior or Acquired Trait</div>
          <div class="examples-list">
            <span class="ex-chip" id="ex-trick">🐾 High five trick</span>
            <span class="ex-chip" id="ex-guitar">🎸 Guitar playing</span>
            <span class="ex-chip" id="ex-scar">🩹 Scars</span>
          </div>
        </div>
      </div>

    </div>

  </div>

  <script>
    const traits = {
      fur:    { type: 'inherited', highlight: 'ex-fur',     step: 1 },
      trick:  { type: 'acquired',  highlight: 'ex-trick',   step: 2 },
      eyes:   { type: 'inherited', highlight: 'ex-eyes',    step: 1 },
      guitar: { type: 'acquired',  highlight: 'ex-guitar',  step: 2 }
    };

    const buttons = document.querySelectorAll('.trait-btn');
    const step1El = document.getElementById('step1');
    const step2El = document.getElementById('step2');
    const cardInherited = document.getElementById('cardInherited');
    const cardAcquired = document.getElementById('cardAcquired');
    const allChips = document.querySelectorAll('.ex-chip');

    function selectTrait(traitKey) {
      const data = traits[traitKey];
      if (!data) return;

      // Update button state
      buttons.forEach(b => b.classList.toggle('active', b.dataset.trait === traitKey));

      // Reset chip highlights
      allChips.forEach(chip => chip.classList.remove('highlight'));
      const activeChip = document.getElementById(data.highlight);
      if (activeChip) activeChip.classList.add('highlight');

      if (data.type === 'inherited') {
        step1El.classList.add('active-step');
        step2El.classList.remove('active-step');
        cardInherited.classList.add('active-outcome');
        cardAcquired.classList.remove('active-outcome');
      } else {
        step1El.classList.remove('active-step');
        step2El.classList.add('active-step');
        cardInherited.classList.remove('active-outcome');
        cardAcquired.classList.add('active-outcome');
      }
    }

    buttons.forEach(btn => {
      btn.addEventListener('click', () => {
        selectTrait(btn.dataset.trait);
      });
    });

    // Auto initial selection
    selectTrait('fur');
  </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, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 12px;
      min-height: 100%;
      user-select: none;
    }

    .header-tag {
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #2563eb;
      background: #e0edff;
      padding: 4px 12px;
      border-radius: 20px;
    }

    .tree-container {
      width: 100%;
      max-width: 440px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      position: relative;
    }

    .parents-row {
      display: flex;
      justify-content: space-between;
      width: 100%;
      gap: 12px;
    }

    .dog-card {
      flex: 1;
      background: #ffffff;
      border: 2px solid #e6e6e6;
      border-radius: 12px;
      padding: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      transition: border-color 0.25s, box-shadow 0.25s;
    }

    .dog-card.puppy-card {
      width: 60%;
      flex: none;
      border-color: #22b7ff;
      background: #ffffff;
    }

    .dog-name {
      font-size: 13px;
      font-weight: 700;
      margin-top: 4px;
    }

    .trait-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 4px;
      margin-top: 4px;
    }

    .trait-badge {
      font-size: 11px;
      font-weight: 600;
      padding: 2px 6px;
      border-radius: 6px;
      background: #f1f5f9;
      color: #475569;
      border: 1px solid transparent;
      transition: all 0.2s ease;
    }

    .trait-badge.active-gold {
      background: #fef3c7;
      color: #92400e;
      border-color: #f59e0b;
      box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
    }

    .trait-badge.active-white {
      background: #f1f5f9;
      color: #0f172a;
      border-color: #94a3b8;
      box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.3);
    }

    .trait-badge.active-ear {
      background: #dbeafe;
      color: #1e40af;
      border-color: #3b82f6;
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    }

    /* SVG Avatar visuals */
    .avatar-svg {
      width: 68px;
      height: 60px;
    }

    /* Flow Connectors */
    .flow-svg {
      width: 100%;
      height: 38px;
      margin: -2px 0;
    }

    .flow-path {
      stroke: #cbd5e1;
      stroke-width: 2.5;
      fill: none;
      stroke-dasharray: 4 3;
      transition: stroke 0.3s;
    }

    .flow-path.active {
      stroke: #22b7ff;
      stroke-width: 3;
      stroke-dasharray: none;
    }

    /* Control Filter Buttons */
    .controls {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px;
      margin-top: 4px;
    }

    .btn-trait {
      appearance: none;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      padding: 5px 10px;
      font-size: 12px;
      font-weight: 600;
      border-radius: 8px;
      color: #475569;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: all 0.2s ease;
    }

    .btn-trait.selected {
      background: #1e2945;
      color: #ffffff;
      border-color: #1e2945;
    }

    .dot-indicator {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      display: inline-block;
    }
  </style>
</head>
<body>

  <div class="header-tag">Inherited Traits</div>

  <div class="tree-container">
    
    <div class="parents-row">
      
      <div class="dog-card" id="card-mother">
        <svg class="avatar-svg" viewBox="0 0 80 70">
          
          <ellipse cx="20" cy="38" rx="8" ry="16" fill="#d97706" transform="rotate(15 20 38)" />
          <ellipse cx="60" cy="38" rx="8" ry="16" fill="#d97706" transform="rotate(-15 60 38)" />
          
          <ellipse cx="40" cy="35" rx="26" ry="22" fill="#f59e0b" />
          
          <ellipse cx="40" cy="42" rx="14" ry="11" fill="#fbbf24" />
          
          <circle cx="31" cy="31" r="3.5" fill="#451a03" />
          <circle cx="49" cy="31" r="3.5" fill="#451a03" />
          <circle cx="32" cy="30" r="1" fill="#ffffff" />
          <circle cx="50" cy="30" r="1" fill="#ffffff" />
          
          <ellipse cx="40" cy="39" rx="4" ry="3" fill="#1e2945" />
        </svg>
        <div class="dog-name">Mother</div>
        <div class="trait-list">
          <span class="trait-badge badge-gold">Golden Fur</span>
          <span class="trait-badge badge-ear">Floppy Ears</span>
        </div>
      </div>

      
      <div class="dog-card" id="card-father">
        <svg class="avatar-svg" viewBox="0 0 80 70">
          
          <polygon points="16,30 24,10 32,26" fill="#475569" />
          <polygon points="64,30 56,10 48,26" fill="#475569" />
          
          <ellipse cx="40" cy="35" rx="26" ry="22" fill="#334155" />
          
          <path d="M 33 22 Q 40 28 47 22 Q 48 45 40 50 Q 32 45 33 22 Z" fill="#f8fafc" />
          
          <circle cx="31" cy="31" r="3.5" fill="#0f172a" />
          <circle cx="49" cy="31" r="3.5" fill="#0f172a" />
          <circle cx="32" cy="30" r="1" fill="#ffffff" />
          <circle cx="50" cy="30" r="1" fill="#ffffff" />
          
          <ellipse cx="40" cy="39" rx="4" ry="3" fill="#0f172a" />
        </svg>
        <div class="dog-name">Father</div>
        <div class="trait-list">
          <span class="trait-badge badge-white">White Patch</span>
          <span class="trait-badge badge-nose">Black Nose</span>
        </div>
      </div>
    </div>

    
    <svg class="flow-svg" viewBox="0 0 300 40">
      <path id="path-left" class="flow-path active" d="M 75 0 L 75 18 Q 75 28 100 28 L 150 28 L 150 38" />
      <path id="path-right" class="flow-path active" d="M 225 0 L 225 18 Q 225 28 200 28 L 150 28 L 150 38" />
      <polygon points="146,33 154,33 150,39" fill="#22b7ff" />
      <text x="150" y="16" text-anchor="middle" font-size="10" font-weight="700" fill="#64748b">PASSED GENES</text>
    </svg>

    
    <div class="dog-card puppy-card" id="card-puppy">
      <svg class="avatar-svg" viewBox="0 0 80 70">
        
        <ellipse cx="20" cy="38" rx="8" ry="16" fill="#d97706" transform="rotate(15 20 38)" />
        <ellipse cx="60" cy="38" rx="8" ry="16" fill="#d97706" transform="rotate(-15 60 38)" />
        
        <ellipse cx="40" cy="35" rx="26" ry="22" fill="#f59e0b" />
        
        <path d="M 36 32 Q 40 36 44 32 Q 46 48 40 52 Q 34 48 36 32 Z" fill="#ffffff" />
        
        <ellipse cx="40" cy="42" rx="12" ry="9" fill="#fbbf24" fill-opacity="0.8" />
        
        <circle cx="31" cy="31" r="3.5" fill="#451a03" />
        <circle cx="49" cy="31" r="3.5" fill="#451a03" />
        <circle cx="32" cy="30" r="1" fill="#ffffff" />
        <circle cx="50" cy="30" r="1" fill="#ffffff" />
        
        <ellipse cx="40" cy="39" rx="4" ry="3" fill="#1e2945" />
      </svg>
      <div class="dog-name">Puppy</div>
      <div class="trait-list">
        <span class="trait-badge badge-gold">Golden Fur</span>
        <span class="trait-badge badge-ear">Floppy Ears</span>
        <span class="trait-badge badge-white">White Patch</span>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button class="btn-trait selected" data-trait="all">All Traits</button>
    <button class="btn-trait" data-trait="fur">
      <span class="dot-indicator" style="background:#f59e0b;"></span>Fur Color
    </button>
    <button class="btn-trait" data-trait="ears">
      <span class="dot-indicator" style="background:#3b82f6;"></span>Ears
    </button>
    <button class="btn-trait" data-trait="patch">
      <span class="dot-indicator" style="background:#94a3b8;"></span>Patch
    </button>
  </div>

  <script>
    const buttons = document.querySelectorAll('.btn-trait');
    const pathLeft = document.getElementById('path-left');
    const pathRight = document.getElementById('path-right');

    const badgesGold = document.querySelectorAll('.badge-gold');
    const badgesEar = document.querySelectorAll('.badge-ear');
    const badgesWhite = document.querySelectorAll('.badge-white');
    const badgesNose = document.querySelectorAll('.badge-nose');

    function applyFilter(trait) {
      // Clear previous active states
      badgesGold.forEach(b => b.classList.remove('active-gold'));
      badgesEar.forEach(b => b.classList.remove('active-ear'));
      badgesWhite.forEach(b => b.classList.remove('active-white'));

      if (trait === 'all') {
        badgesGold.forEach(b => b.classList.add('active-gold'));
        badgesEar.forEach(b => b.classList.add('active-ear'));
        badgesWhite.forEach(b => b.classList.add('active-white'));
        pathLeft.classList.add('active');
        pathRight.classList.add('active');
      } else if (trait === 'fur') {
        badgesGold.forEach(b => b.classList.add('active-gold'));
        pathLeft.classList.add('active');
        pathRight.classList.remove('active');
      } else if (trait === 'ears') {
        badgesEar.forEach(b => b.classList.add('active-ear'));
        pathLeft.classList.add('active');
        pathRight.classList.remove('active');
      } else if (trait === 'patch') {
        badgesWhite.forEach(b => b.classList.add('active-white'));
        pathLeft.classList.remove('active');
        pathRight.classList.add('active');
      }
    }

    buttons.forEach(btn => {
      btn.addEventListener('click', () => {
        buttons.forEach(b => b.classList.remove('selected'));
        btn.classList.add('selected');
        applyFilter(btn.dataset.trait);
      });
    });

    // Initialize with all traits active
    applyFilter('all');
  </script>
</body>
</html>

¿Qué es la célula?: La unidad de la vida

Partes principales de la célula

Células animales y células vegetales

Organismos unicelulares y pluricelulares

Niveles de organización biológica

¿Por qué clasificamos a los seres vivos?

Los reinos de la naturaleza: Mónera y Protista

El reino de los hongos: Características e importancia

Introducción al reino vegetal y animal

science

La célula y la clasificación de los seres vivos

La raíz: Anclaje y absorción de nutrientes

El tallo: Soporte y transporte

Las hojas: Fábricas de alimento y respiración

El proceso de la fotosíntesis paso a paso

Plantas vasculares y no vasculares

La flor y sus estructuras reproductivas

Polinización y formación del fruto

Germinación y dispersión de semillas

Adaptaciones de las plantas a diferentes climas

Estructuras vegetales y fotosíntesis

Animales vertebrados e invertebrados

Los cinco grupos de vertebrados

Grupos principales de invertebrados

Sistemas de respiración en los animales

Alimentación y digestión en los animales

Los sentidos y la percepción del entorno

Adaptaciones físicas y camuflaje

Adaptaciones de comportamiento: Migración e hibernación

Rasgos heredados y rasgos adquiridos

Estructuras animales, sentidos y adaptaciones

Factores bióticos y abióticos del ecosistema

Tipos de ecosistemas: Terrestres y acuáticos

Productores, consumidores y descomponedores

Cadenas y redes alimentarias

Pirámides de energía y flujo energético

Relaciones entre especies: Simbiosis, competencia y depredación

Equilibrio ecológico y cambios en las poblaciones

Impacto humano en los ecosistemas

Estrategias de conservación y protección de la biodiversidad

Ecosistemas, cadenas tróficas y flujo de energía

Od DNA do chromosomu — upakowanie materiału genetycznego

Budowa chromosomu — chromatydy siostrzane i centromer

Kariotyp człowieka — liczba i zestaw chromosomów w komórkach

Autosomy a chromosomy płci — podobieństwa i różnice

Komórki haploidalne (n) i diploidalne (2n)

Organizacja materiału genetycznego i kariotyp człowieka

Przebieg mitozy — kluczowe etapy podziału jądra

Biologiczne znaczenie mitozy — wzrost, rozwój i regeneracja

Przebieg mejozy — redukcyjny podział komórkowy

Biologiczne znaczenie mejozy — stałość liczby chromosomów i różnorodność

OGS.4.LS.7

Aligned learning resources

Related diagrams