Abekta

The Encyclopédie of CASSA

User Tools

Site Tools

You are here: root » Courses » AST 100: Our Cosmic History » 0.0. Seven Ages of the Universe
courses:ast100:0

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
courses:ast100:0 [2026/01/26 00:30] – [1. Timelines] asadcourses:ast100:0 [2026/02/01 09:01] (current) – asad
Line 1: Line 1:
-====== Seven Ages of the Universe ======+====== 0.0. Seven Ages of the Universe ======
 Slides: https://drive.google.com/file/d/1DBFDq3OmjU5NfHvFGyoQhV7ZI_SJ2e-j/view Slides: https://drive.google.com/file/d/1DBFDq3OmjU5NfHvFGyoQhV7ZI_SJ2e-j/view
  
Line 12: Line 12:
 ===== - Timelines ===== ===== - Timelines =====
 <html> <html>
-<div id="doku-cosmic-timeline">+<div id="doku-cosmic-light">
     <style scoped>     <style scoped>
         /* SCOPED CSS FOR DOKUWIKI          /* SCOPED CSS FOR DOKUWIKI 
-           Everything is prefixed with #doku-cosmic-timeline to prevent leaking.+           Container ID: #doku-cosmic-light 
 +           Theme: Elegant Light
         */         */
  
-        #doku-cosmic-timeline { +        #doku-cosmic-light { 
-            --bg-color: #0b0d17; +            /* Elegant Light Theme Variables */ 
-            --card-bg: #15192b; +            --bg-color: #ffffff; 
-            --text-primary: #e0e6ed; +            --panel-bg: #f8f9fa; 
-            --text-secondary: #94a3b8; +            --text-primary: #2d3748; 
-            --accent-particle: #f72585; +            --text-secondary: #718096; 
-            --accent-galactic: #7209b7; +            --accent-color: #4a5568; /* Slate gray for elegance */ 
-            --accent-stellar: #4361ee; +            --border-color: #e2e8f0; 
-            --accent-planetary: #4cc9f0; +            --hover-color: #edf2f7; 
-            --accent-chemical: #06d6a0; +            --line-color: #cbd5e0;
-            --accent-biological: #ffd166; +
-            --accent-cultural: #ef476f;+
                          
-            /* Reset fonts and layout just for this container */ +            /* Typography & Layout */ 
-            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
             background-color: var(--bg-color);             background-color: var(--bg-color);
             color: var(--text-primary);             color: var(--text-primary);
             line-height: 1.6;             line-height: 1.6;
-            padding: 20px; 
-            border-radius: 8px; 
             width: 100%;             width: 100%;
             display: block;             display: block;
 +            margin: 0;
 +            padding: 10px 0;
         }         }
  
-        /* Enforce box-sizing only within this component */ +        /* Enforce box-sizing */ 
-        #doku-cosmic-timeline * {+        #doku-cosmic-light * {
             box-sizing: border-box;             box-sizing: border-box;
         }         }
  
-        #doku-cosmic-timeline header { +        /* Accordion Section */ 
-            text-align: center; +        #doku-cosmic-light .age-section { 
-            padding: 40px 20px; +            border-bottom: 1px solid var(--border-color); 
-            background: radial-gradient(circle at center, #1b2735 0%, #090a0f 100%); +            background-color: var(--bg-color); 
-            margin-bottom: 30px; +            transition: background-color 0.2s ease;
-            border-radius: 8px; +
-            border: 1px solid #2d3748;+
         }         }
  
-        #doku-cosmic-timeline h1 { +        #doku-cosmic-light .age-section:first-child { 
-            font-size: 2rem; +            border-top: 1px solid var(--border-color);
-            margin: 0 0 10px 0; +
-            letter-spacing: 2px; +
-            text-transform: uppercase; +
-            color: #fff; +
-            border-bottom: none; /* Dokuwiki reset */+
         }         }
  
-        #doku-cosmic-timeline p.subtitle { +        /* Header Styling */ 
-            color: var(--text-secondary); +        #doku-cosmic-light .age-header { 
-            font-size: 1.1rem; +            padding: 20px 15px;
-            margin: 0; +
-        } +
- +
-        /* Age Section Styling */ +
-        #doku-cosmic-timeline .age-section { +
-            margin-bottom: 15px; +
-            border-radius: 8px; +
-            overflow: hidden; +
-            box-shadow: 0 4px 6px rgba(0,0,0,0.3); +
-            background-color: var(--card-bg); +
-        } +
- +
-        #doku-cosmic-timeline .age-header { +
-            padding: 15px 25px;+
             cursor: pointer;             cursor: pointer;
             display: flex;             display: flex;
             justify-content: space-between;             justify-content: space-between;
             align-items: center;             align-items: center;
-            background-color: rgba(255,255,255,0.05); 
-            border-left: 6px solid transparent; 
             user-select: none;             user-select: none;
 +            position: relative;
         }         }
  
-        #doku-cosmic-timeline .age-header:hover { +        #doku-cosmic-light .age-header:hover { 
-            background-color: rgba(255,255,255,0.1);+            background-color: var(--hover-color);
         }         }
  
-        #doku-cosmic-timeline .age-title { +        #doku-cosmic-light .header-content { 
-            font-size: 1.25rem;+            display: flex; 
 +            flex-direction: column; 
 +        } 
 + 
 +        #doku-cosmic-light .age-title { 
 +            font-size: 1.1rem;
             font-weight: 700;             font-weight: 700;
 +            text-transform: uppercase;
 +            letter-spacing: 1px;
 +            color: var(--text-primary);
 +            margin-bottom: 4px;
         }         }
  
-        #doku-cosmic-timeline .age-meta { +        #doku-cosmic-light .age-period { 
-            font-size: 0.9rem;+            font-size: 0.95rem;
             color: var(--text-secondary);             color: var(--text-secondary);
-            margin-left: 15px;+            font-family: "Georgia", serif; /* Serif for elegant contrast */ 
 +            font-style: italic;
         }         }
  
-        #doku-cosmic-timeline .toggle-icon {+        #doku-cosmic-light .toggle-icon {
             font-size: 1.2rem;             font-size: 1.2rem;
 +            color: var(--text-secondary);
             transition: transform 0.3s ease;             transition: transform 0.3s ease;
-            color: var(--text-primary);+            margin-left: 15px;
         }         }
  
-        #doku-cosmic-timeline .age-content {+        /* Content Area */ 
 +        #doku-cosmic-light .age-content {
             max-height: 0;             max-height: 0;
             overflow: hidden;             overflow: hidden;
             transition: max-height 0.5s ease-out;             transition: max-height 0.5s ease-out;
-            background-color: #10121b;+            background-color: var(--panel-bg);
         }         }
  
-        /* Timeline Items */ +        /* Timeline Styling */ 
-        #doku-cosmic-timeline .timeline {+        #doku-cosmic-light .timeline {
             position: relative;             position: relative;
-            padding: 30px 30px 30px 50px;+            padding: 40px 20px 40px 40px; 
 +            max-width: 800px; 
 +            margin: 0 auto;
         }         }
  
-        #doku-cosmic-timeline .timeline::before {+        /* Vertical Line */ 
 +        #doku-cosmic-light .timeline::before {
             content: '';             content: '';
             position: absolute;             position: absolute;
-            left: 24px; +            left: 19px; /* Aligns with the dot center */ 
-            top: 0; +            top: 45px; 
-            bottom: 0;+            bottom: 45px;
             width: 2px;             width: 2px;
-            background: rgba(255,255,255,0.1);+            background: var(--line-color);
         }         }
  
-        #doku-cosmic-timeline .event-item {+        #doku-cosmic-light .event-item {
             position: relative;             position: relative;
-            margin-bottom: 30px;+            padding-left: 30px; 
 +            margin-bottom: 40px;
         }         }
  
-        #doku-cosmic-timeline .event-item:last-child {+        #doku-cosmic-light .event-item:last-child {
             margin-bottom: 0;             margin-bottom: 0;
         }         }
  
-        #doku-cosmic-timeline .event-dot {+        /* Timeline Dot */ 
 +        #doku-cosmic-light .event-dot {
             position: absolute;             position: absolute;
-            left: -33px; +            left: -26px; /* Adjust based on padding-left */ 
-            top: 5px; +            top: 6px; 
-            width: 14px; +            width: 12px; 
-            height: 14px;+            height: 12px;
             border-radius: 50%;             border-radius: 50%;
             background-color: var(--bg-color);             background-color: var(--bg-color);
-            border: 2px solid #fff; +            border: 2px solid var(--accent-color); 
-            z-index: 1;+            z-index: 2;
         }         }
  
-        #doku-cosmic-timeline .time-badge {+        #doku-cosmic-light .time-badge {
             display: inline-block;             display: inline-block;
             font-size: 0.85rem;             font-size: 0.85rem;
-            font-weight: bold; +            font-weight: 600; 
-            color: var(--text-secondary); +            color: var(--accent-color); 
-            margin-bottom: 5px; +            margin-bottom: 6px; 
-            font-family: monospace; +            background: #e2e8f0;
-            background: rgba(255,255,255,0.05);+
             padding: 2px 8px;             padding: 2px 8px;
             border-radius: 4px;             border-radius: 4px;
         }         }
  
-        #doku-cosmic-timeline .event-title { +        #doku-cosmic-light .event-title { 
-            font-size: 1.1rem;+            font-size: 1.15rem;
             margin: 0 0 8px 0;             margin: 0 0 8px 0;
-            color: #fff; +            color: #1a202c; 
-            border: none; +            font-weight: 700; 
-            font-weight: bold;+            line-height: 1.3;
         }         }
  
-        #doku-cosmic-timeline .event-desc { +        #doku-cosmic-light .event-desc { 
-            color: var(--text-secondary);+            color: #4a5568;
             font-size: 0.95rem;             font-size: 0.95rem;
             margin: 0;             margin: 0;
-            line-height: 1.5;+            line-height: 1.6;
         }         }
  
-        /* Specific Age Colors */ +        /* Math Superscripts */ 
-        #doku-cosmic-timeline .age-particle { border-color: var(--accent-particle); } +        #doku-cosmic-light sup {
-        #doku-cosmic-timeline .age-particle .age-title { color: var(--accent-particle); } +
-        #doku-cosmic-timeline .age-particle .event-dot { border-color: var(--accent-particle); } +
- +
-        #doku-cosmic-timeline .age-galactic { border-color: var(--accent-galactic); } +
-        #doku-cosmic-timeline .age-galactic .age-title { color: var(--accent-galactic); } +
-        #doku-cosmic-timeline .age-galactic .event-dot { border-color: var(--accent-galactic); } +
- +
-        #doku-cosmic-timeline .age-stellar { border-color: var(--accent-stellar); } +
-        #doku-cosmic-timeline .age-stellar .age-title { color: var(--accent-stellar); } +
-        #doku-cosmic-timeline .age-stellar .event-dot { border-color: var(--accent-stellar); } +
- +
-        #doku-cosmic-timeline .age-planetary { border-color: var(--accent-planetary); } +
-        #doku-cosmic-timeline .age-planetary .age-title { color: var(--accent-planetary); } +
-        #doku-cosmic-timeline .age-planetary .event-dot { border-color: var(--accent-planetary); } +
- +
-        #doku-cosmic-timeline .age-chemical { border-color: var(--accent-chemical); } +
-        #doku-cosmic-timeline .age-chemical .age-title { color: var(--accent-chemical); } +
-        #doku-cosmic-timeline .age-chemical .event-dot { border-color: var(--accent-chemical); } +
- +
-        #doku-cosmic-timeline .age-biological { border-color: var(--accent-biological); } +
-        #doku-cosmic-timeline .age-biological .age-title { color: var(--accent-biological); } +
-        #doku-cosmic-timeline .age-biological .event-dot { border-color: var(--accent-biological); } +
- +
-        #doku-cosmic-timeline .age-cultural { border-color: var(--accent-cultural); } +
-        #doku-cosmic-timeline .age-cultural .age-title { color: var(--accent-cultural); } +
-        #doku-cosmic-timeline .age-cultural .event-dot { border-color: var(--accent-cultural); } +
- +
-        /* Utility */ +
-        #doku-cosmic-timeline sup {+
             font-size: 0.7em;             font-size: 0.7em;
             vertical-align: super;             vertical-align: super;
 +            line-height: 0;
         }         }
  
-        #doku-cosmic-timeline .rotate {+        /* Animation States */ 
 +        #doku-cosmic-light .rotate {
             transform: rotate(180deg);             transform: rotate(180deg);
         }         }
                  
-        #doku-cosmic-timeline .open { +        #doku-cosmic-light .open { 
-            max-height: 2500px;+            max-height: 3000px; /* Large enough to fit content */ 
 +            border-bottom: 1px solid var(--border-color);
         }         }
  
-        /* Mobile Adjustments */+        /* Mobile Optimization */
         @media (max-width: 600px) {         @media (max-width: 600px) {
-            #doku-cosmic-timeline .age-header { padding: 15px; flex-wrap: wrap; } +            #doku-cosmic-light .age-header { padding: 15px; } 
-            #doku-cosmic-timeline .timeline { padding: 20px 15px 20px 30px; } +            #doku-cosmic-light .timeline { padding: 30px 15px 30px 30px; } 
-            #doku-cosmic-timeline .timeline::before { left: 14px; } +            #doku-cosmic-light .timeline::before { left: 14px; } 
-            #doku-cosmic-timeline .event-dot { left: -22px; width: 12px; height: 12px; } +            #doku-cosmic-light .event-dot { left: -22px; width: 10px; height: 10px; } 
-            #doku-cosmic-timeline .age-meta { display: block; margin-left: 0; margin-top: 5px; font-size: 0.8rem; width: 100%; } +            #doku-cosmic-light .age-title { font-size: 1rem; } 
-            #doku-cosmic-timeline .toggle-icon { margin-left: auto; position: absolute; right: 20px; }+            #doku-cosmic-light .age-period { font-size: 0.85rem; }
         }         }
     </style>     </style>
  
-    <header> +    <div class="age-section">
-        <h1>Cosmic History</h1> +
-        <p class="subtitle">From the Big Bang to the Life Era</p> +
-    </header> +
- +
-    <div class="age-section age-particle">+
         <div class="age-header">         <div class="age-header">
-            <div>+            <div class="header-content">
                 <span class="age-title">1. Particle Age</span>                 <span class="age-title">1. Particle Age</span>
-                <span class="age-meta">Time after Big Bang</span>+                <span class="age-period">[ 0 to 380,000 years ]</span>
             </div>             </div>
             <span class="toggle-icon">▼</span>             <span class="toggle-icon">▼</span>
Line 255: Line 217:
                     <span class="time-badge">0</span>                     <span class="time-badge">0</span>
                     <h3 class="event-title">The Big Bang</h3>                     <h3 class="event-title">The Big Bang</h3>
-                    <p class="event-desc">The singularity event marking the origin of space, time, energy and matter. The universe emerges as a hot, dense "primeval fireball".</p>+                    <p class="event-desc">The singularity event marking the origin of space, time, energy and matter (STEM). The universe emerges as an unimaginably hot and dense "primeval fireball".</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
                 <div class="event-item">                 <div class="event-item">
-                    <span class="time-badge">10<sup>-35</sup> to 10<sup>-32</sup> s</span>+                    <span class="time-badge">10<sup>-35</sup> to 10<sup>-32</sup> seconds</span>
                     <h3 class="event-title">Cosmic Inflation</h3>                     <h3 class="event-title">Cosmic Inflation</h3>
-                    <p class="event-desc">A brief, exponential expansion where the universe swells in size by a factor of roughly 10<sup>50</sup>, smoothing out initial irregularities.</p>+                    <p class="event-desc">A brief, exponential expansion where the universe swells in size by a factor of roughly 10<sup>50</sup>. This process smoothed out initial irregularities.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
                 <div class="event-item">                 <div class="event-item">
-                    <span class="time-badge">10<sup>-43</sup> to 10<sup>-10</sup> s</span>+                    <span class="time-badge">10<sup>-43</sup> to 10<sup>-10</sup> seconds</span>
                     <h3 class="event-title">Separation of Forces</h3>                     <h3 class="event-title">Separation of Forces</h3>
-                    <p class="event-desc">The single unified "superforce" separates into gravity, the strong nuclear force, the weak nuclear force, and electromagnetism.</p>+                    <p class="event-desc">As the universe cooled, the single unified "superforce" separated into the four fundamental forces (energies) of nature: gravity, the strong nuclear force, the weak nuclear force, and electromagnetism.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
                 <div class="event-item">                 <div class="event-item">
-                    <span class="time-badge">10<sup>-35</sup> to 1 s</span> +                    <span class="time-badge">10<sup>-35</sup> to 1 second</span> 
-                    <h3 class="event-title">Particle Creation</h3> +                    <h3 class="event-title">Particle Creation & Annihilation</h3> 
-                    <p class="event-desc">Energy converts to matter (quarks, leptons). Matter and antimatter annihilate, leaving a slight excess of ordinary matter.</p>+                    <p class="event-desc">Energy converted into matter via "pair production". Quarks and leptons (e.g., electrons) emerged. Matter and antimatter collided and annihilated, leaving a slight excess of ordinary matter.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
                 <div class="event-item">                 <div class="event-item">
-                    <span class="time-badge">3 to 15 mins</span>+                    <span class="time-badge">3 minutes to 15 minutes</span>
                     <h3 class="event-title">Primordial Nucleosynthesis</h3>                     <h3 class="event-title">Primordial Nucleosynthesis</h3>
-                    <p class="event-desc">The universe cools enough for protons and neutrons to fuse, producing deuterium, helium, and trace lithium.</p>+                    <p class="event-desc">The universe cooled sufficiently (below 10<sup>9</sup> K) for protons and neutrons to fuse. This "Nuclear Epoch" produced the first atomic nuclei: heavy hydrogen (deuterium), helium, and trace amounts of lithium.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
Line 285: Line 247:
                     <span class="time-badge">50,000 years</span>                     <span class="time-badge">50,000 years</span>
                     <h3 class="event-title">Matter Domination</h3>                     <h3 class="event-title">Matter Domination</h3>
-                    <p class="event-desc">The energy density of matter exceeds that of radiation, marking the end of the "Radiation Era" and start of the "Matter Era."</p>+                    <p class="event-desc">The "crossover point" where the energy density of matter finally exceeded that of radiation (or energy). This marked the end of the "Radiation Era" and the beginning of the "Matter Era," setting the stage for structure formation.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
                 <div class="event-item">                 <div class="event-item">
-                    <span class="time-badge">380,000 years</span> +                    <span class="time-badge">300,000 to 380,000 years</span> 
-                    <h3 class="event-title">Recombination (CMB)</h3> +                    <h3 class="event-title">Recombination & Decoupling</h3> 
-                    <p class="event-desc">Atoms form, neutralizing the charged fog. Photons travel freely, creating the Cosmic Microwave Background.</p>+                    <p class="event-desc">Electrons combined with nuclei to form neutral atoms (recombination). This neutralized the charged fog, allowing photons to travel freely (decoupling), observable today as the Cosmic Microwave Background (CMB).</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
Line 298: Line 260:
     </div>     </div>
  
-    <div class="age-section age-galactic">+    <div class="age-section">
         <div class="age-header">         <div class="age-header">
-            <div>+            <div class="header-content">
                 <span class="age-title">2. Galactic Age</span>                 <span class="age-title">2. Galactic Age</span>
-                <span class="age-meta">Years after Big Bang</span>+                <span class="age-period">[ 300 ky – 4 Gy ]</span>
             </div>             </div>
             <span class="toggle-icon">▼</span>             <span class="toggle-icon">▼</span>
Line 311: Line 273:
                     <span class="time-badge">300 ky – 200 My</span>                     <span class="time-badge">300 ky – 200 My</span>
                     <h3 class="event-title">The Cosmic Dark Ages</h3>                     <h3 class="event-title">The Cosmic Dark Ages</h3>
-                    <p class="event-desc">The universe is filled with neutral hydrogen. Gravity slowly pulls matter into denser clumps in the dark.</p>+                    <p class="event-desc">Following recombination, the universe was filled with neutral hydrogen and helium but lacked luminous objects. Gravity slowly pulled matter into denser clumps within a dark, expanding cosmos.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
                 <div class="event-item">                 <div class="event-item">
                     <span class="time-badge">200 My</span>                     <span class="time-badge">200 My</span>
-                    <h3 class="event-title">Cosmic Dawn</h3> +                    <h3 class="event-title">Cosmic Dawn (Reionization)</h3> 
-                    <p class="event-desc">First massive stars ignite. Their intense UV radiation re-ionizes the hydrogen fog, ending the Dark Ages.</p>+                    <p class="event-desc">The first massive stars and protogalaxies ignited. Their intense ultraviolet radiation re-ionized the surrounding neutral hydrogen, ending the Dark Ages and making the universe transparent to ultraviolet light.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
Line 323: Line 285:
                     <span class="time-badge">500 My – 1 Gy</span>                     <span class="time-badge">500 My – 1 Gy</span>
                     <h3 class="event-title">Hierarchical Merging</h3>                     <h3 class="event-title">Hierarchical Merging</h3>
-                    <p class="event-desc">Small "blobs" merge to build large galaxies. This "bottom-up" process creates structures like the Milky Way's halo.</p>+                    <p class="event-desc">Small "pregalactic blobs" and dwarf galaxies collided and merged to build up larger galactic structures. This "bottom-up" process created the massive galaxies we see today, including the Milky Way's halo.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
                 <div class="event-item">                 <div class="event-item">
                     <span class="time-badge">1 – 2 Gy</span>                     <span class="time-badge">1 – 2 Gy</span>
-                    <h3 class="event-title">Rise of Black Holes</h3> +                    <h3 class="event-title">Rise of Supermassive Black Holes</h3> 
-                    <p class="event-desc">Massive collapses form supermassive black holes, powering quasars that outshine entire galaxies.</p>+                    <p class="event-desc">Massive concentrations of matter collapsed in the centers of young galaxies to form black holes. The accretion of matter into these holes powered the first quasars, which shone with the brightness of a trillion suns.</p> 
 +                    <div class="event-dot"></div> 
 +                </div> 
 +                <div class="event-item"> 
 +                    <span class="time-badge">2 – 3 Gy</span> 
 +                    <h3 class="event-title">Peak Quasar Epoch</h3> 
 +                    <p class="event-desc">The era of maximum activity for Active Galactic Nuclei (AGN; quasars). As galactic cores consumed their fuel supplies, this violent activity eventually subsided, leaving dormant supermassive black holes at the centers of most normal galaxies.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
                 <div class="event-item">                 <div class="event-item">
                     <span class="time-badge">3 Gy</span>                     <span class="time-badge">3 Gy</span>
-                    <h3 class="event-title">Large-Scale Structure</h3> +                    <h3 class="event-title">Large-Scale Structure Formation</h3> 
-                    <p class="event-desc">Galaxies organize into the "cosmic web" of sheets, filaments, and clusters separated by voids.</p>+                    <p class="event-desc">Galaxies organized themselves into vast sheets, filaments, and clusters (such as the Local Group), separated by immense voids, creating the "frothy" bubble-like architecture of the cosmic web.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
                 <div class="event-item">                 <div class="event-item">
                     <span class="time-badge">4 Gy</span>                     <span class="time-badge">4 Gy</span>
-                    <h3 class="event-title">Population I Stars</h3> +                    <h3 class="event-title">Birth of Population I Stars</h3> 
-                    <p class="event-desc">Supernovae enrich the cosmos with heavy elements, allowing the first metal-rich stars to form.</p>+                    <p class="event-desc">Enrichment of the interstellar medium by earlier supernovae allowed the formation of metal-rich stars (Population I) in galactic disks. This marked the transition toward the Stellar Age and set the conditions for future planetary systems.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
Line 348: Line 316:
     </div>     </div>
  
-    <div class="age-section age-stellar">+    <div class="age-section">
         <div class="age-header">         <div class="age-header">
-            <div>+            <div class="header-content">
                 <span class="age-title">3. Stellar Age</span>                 <span class="age-title">3. Stellar Age</span>
-                <span class="age-meta">Years after Big Bang</span>+                <span class="age-period">[ 4 Gy – 9 Gy ]</span>
             </div>             </div>
             <span class="toggle-icon">▼</span>             <span class="toggle-icon">▼</span>
Line 360: Line 328:
                 <div class="event-item">                 <div class="event-item">
                     <span class="time-badge">4 Gy</span>                     <span class="time-badge">4 Gy</span>
-                    <h3 class="event-title">Milky Way Thin Disk</h3> +                    <h3 class="event-title">Formation of the Milky Way's Thin Disk</h3> 
-                    <p class="event-desc">The Milky Way flattens into a thin disk, coinciding with the birth of metal-rich stars needed for planets.</p>+                    <p class="event-desc">Following the earlier formation of the galactic halo, the Milky Way flattened into a thin disk. This structural change coincided with the birth of metal-rich Population I stars, which contained heavy elements produced by earlier generations of stars.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
                 <div class="event-item">                 <div class="event-item">
                     <span class="time-badge">4 – 5 Gy</span>                     <span class="time-badge">4 – 5 Gy</span>
-                    <h3 class="event-title">Peak Star Formation</h3> +                    <h3 class="event-title">Peak Star Formation Rate</h3> 
-                    <p class="event-desc">The "baby boom" of the universe. Massive stars forge carbon, oxygen, and iron.</p>+                    <p class="event-desc">The universe experienced its maximum rate of star formation. Massive stars fused hydrogen and helium into heavier elements like carbon, oxygen, and iron, acting as "nuclear forges" to create the building blocks of future complexity.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
                 <div class="event-item">                 <div class="event-item">
                     <span class="time-badge">6 Gy</span>                     <span class="time-badge">6 Gy</span>
-                    <h3 class="event-title">Galactic Habitable Zone</h3> +                    <h3 class="event-title">Emergence of the Galactic Habitable Zone</h3> 
-                    <p class="event-desc">Metallicity spreads and supernovae frequency drops, creating safe zones for potential life.</p>+                    <p class="event-desc">A region within the galaxy emerged where conditions favored the development of complex life. By this time, metallicity (heavy element abundance) had spread outward, and the frequency of sterilizing supernovae in the inner galaxy had decreased sufficiently to allow safe orbits for planets.</p> 
 +                    <div class="event-dot"></div> 
 +                </div> 
 +                <div class="event-item"> 
 +                    <span class="time-badge">Ongoing (4 – 9 Gy)</span> 
 +                    <h3 class="event-title">Stellar Nucleosynthesis</h3> 
 +                    <p class="event-desc">Main-sequence stars fused hydrogen into helium, while massive evolved stars fused helium into carbon, neon, oxygen, silicon, and finally iron in their cores. This process created the chemical complexity required for planetary bodies.</p> 
 +                    <div class="event-dot"></div> 
 +                </div> 
 +                <div class="event-item"> 
 +                    <span class="time-badge">Ongoing (4 – 9 Gy)</span> 
 +                    <h3 class="event-title">Supernova Enrichment</h3> 
 +                    <p class="event-desc">Massive stars died in core-collapse explosions, scattering chemically enriched material into the interstellar medium. These explosions also synthesized elements heavier than iron (such as gold and uranium) via the r-process (rapid neutron capture).</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
                 <div class="event-item">                 <div class="event-item">
                     <span class="time-badge">7 Gy</span>                     <span class="time-badge">7 Gy</span>
-                    <h3 class="event-title">Expansion Accelerates</h3> +                    <h3 class="event-title">Acceleration of Cosmic Expansion</h3> 
-                    <p class="event-desc">Dark energy begins to dominate gravity, accelerating the expansion of the universe.</p>+                    <p class="event-desc">The expansion of the universe began to accelerate due to the influence of repulsive "dark energy." This marked the transition from a matter-dominated era to a dark-energy-dominated era, influencing the formation of large-scale structures.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
Line 385: Line 365:
                     <span class="time-badge">9 Gy</span>                     <span class="time-badge">9 Gy</span>
                     <h3 class="event-title">Solar Nebula Collapse</h3>                     <h3 class="event-title">Solar Nebula Collapse</h3>
-                    <p class="event-desc">Triggered by a supernova, a gas cloud collapses to form the Sun and Solar System (4.6 billion years ago).</p>+                    <p class="event-desc">The Stellar Age concluded with the gravitational collapse of a chemically enriched interstellar cloud in our region of the Milky Way. Triggered perhaps by a nearby supernova, this event initiated the formation of the Sun and the Solar System about 4.6 billion years ago.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
Line 392: Line 372:
     </div>     </div>
  
-    <div class="age-section age-planetary">+    <div class="age-section">
         <div class="age-header">         <div class="age-header">
-            <div>+            <div class="header-content">
                 <span class="age-title">4. Planetary Age</span>                 <span class="age-title">4. Planetary Age</span>
-                <span class="age-meta">Years after Big Bang</span>+                <span class="age-period">[ 9.1 Gy – 11 Gy ]</span>
             </div>             </div>
             <span class="toggle-icon">▼</span>             <span class="toggle-icon">▼</span>
Line 404: Line 384:
                 <div class="event-item">                 <div class="event-item">
                     <span class="time-badge">9.1 Gy</span>                     <span class="time-badge">9.1 Gy</span>
-                    <h3 class="event-title">Accretion</h3> +                    <h3 class="event-title">Accretion of Planetesimals</h3> 
-                    <p class="event-desc">Dust coalesces into planetesimals, then protoplanets. The Sun's T-Tauri wind strips early atmospheres.</p>+                    <p class="event-desc">Following the solar nebula collapse, dust grains in the disk collided and stuck together via electrostatic forces and gravity to form "planetesimals." These kilometer-sized objects further coalesced to form the protoplanets of the inner and outer Solar System.</p> 
 +                    <div class="event-dot"></div> 
 +                </div> 
 +                <div class="event-item"> 
 +                    <span class="time-badge">9.1 Gy</span> 
 +                    <h3 class="event-title">The T-Tauri Solar Wind</h3> 
 +                    <p class="event-desc">The young Sun entered a highly active "T-Tauri" phase, generating intense solar winds. This stream of charged particles swept away the remaining nebular gas and dust, halting the growth of the Jovian planets and stripping the primordial atmospheres from the inner planets.</p> 
 +                    <div class="event-dot"></div> 
 +                </div> 
 +                <div class="event-item"> 
 +                    <span class="time-badge">9.2 Gy</span> 
 +                    <h3 class="event-title">Planetary Differentiation</h3> 
 +                    <p class="event-desc">Intense heat from accretion and radioactive decay caused the early Earth to melt. Heavy elements like iron and nickel sank to the center to form the metallic core (generating the magnetic field), while lighter silicates rose to form the mantle and crust.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
                 <div class="event-item">                 <div class="event-item">
                     <span class="time-badge">9.2 Gy</span>                     <span class="time-badge">9.2 Gy</span>
-                    <h3 class="event-title">Earth Differentiates</h3> +                    <h3 class="event-title">Formation of the Moon</h3> 
-                    <p class="event-desc">Heavy metals sink to form Earth's core. A collision with a protoplanet forms the Moon.</p>+                    <p class="event-desc">A Mars-sized protoplanet collided with the newly differentiated Earth. The debris from this cataclysmic impact formed a ring around Earth, which rapidly accreted to form the Moon.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
                 <div class="event-item">                 <div class="event-item">
                     <span class="time-badge">9.4 Gy</span>                     <span class="time-badge">9.4 Gy</span>
-                    <h3 class="event-title">Oceans Form</h3> +                    <h3 class="event-title">Formation of Atmosphere and Oceans</h3> 
-                    <p class="event-desc">Volcanic outgassing and icy comets create the atmosphere and the first oceans.</p>+                    <p class="event-desc">As Earth cooled, volcanic activity outgassed volatiles (water vapor, carbon dioxide) from the interior to form a secondary atmosphere. As temperatures dropped further, this water vapor condensed to form the first oceans, augmented by water delivered by comets.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
                 <div class="event-item">                 <div class="event-item">
-                    <span class="time-badge">9.6 – 10 Gy</span>+                    <span class="time-badge">9.6 Gy – 10 Gy</span>
                     <h3 class="event-title">Late Heavy Bombardment</h3>                     <h3 class="event-title">Late Heavy Bombardment</h3>
-                    <p class="event-desc">A barrage of asteroids pulverizes the crust, keeping Earth hostile for millions of years.</p>+                    <p class="event-desc">A period of intense asteroid and comet impacts scarred planetary surfaces and pulverized the early crust. This "cleaning up" of leftover solar system debris kept Earth's surface molten and hostile for millions of years.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
                 <div class="event-item">                 <div class="event-item">
-                    <span class="time-badge">10 – 11 Gy</span> +                    <span class="time-badge">10 Gy – 11 Gy</span> 
-                    <h3 class="event-title">Stable Lithosphere</h3> +                    <h3 class="event-title">Stabilization of the Lithosphere</h3> 
-                    <p class="event-desc">The crust solidifies and the first continents form, providing a platform for chemical evolution.</p>+                    <p class="event-desc">The Planetary Age concluded with the stabilization of Earth's solid crust and the formation of the first continents (such as the Vaalbara supercontinent). This transformed Earth from a chaotic, molten "battlefield" into a stable environment capable of sustaining complex chemical evolution.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
Line 436: Line 428:
     </div>     </div>
  
-    <div class="age-section age-chemical">+    <div class="age-section">
         <div class="age-header">         <div class="age-header">
-            <div>+            <div class="header-content">
                 <span class="age-title">5. Chemical Age</span>                 <span class="age-title">5. Chemical Age</span>
-                <span class="age-meta">Years after Big Bang</span>+                <span class="age-period">[ 10.5 Gy – 12.5 Gy ]</span>
             </div>             </div>
             <span class="toggle-icon">▼</span>             <span class="toggle-icon">▼</span>
Line 448: Line 440:
                 <div class="event-item">                 <div class="event-item">
                     <span class="time-badge">10.5 – 11 Gy</span>                     <span class="time-badge">10.5 – 11 Gy</span>
-                    <h3 class="event-title">Prebiotic Synthesis</h3> +                    <h3 class="event-title">Synthesis of Prebiotic Molecules</h3> 
-                    <p class="event-desc">Lightning and UV radiation synthesize amino acids and nucleotides from simple gases.</p>+                    <p class="event-desc">In the energy-rich environment of the early Earth, simple atmospheric gases (like methane and ammonia) interacted with lightning and UV radiation to synthesize the building blocks of life: amino acids and nucleotide bases.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
                 <div class="event-item">                 <div class="event-item">
                     <span class="time-badge">11 Gy</span>                     <span class="time-badge">11 Gy</span>
-                    <h3 class="event-title">The RNA World</h3> +                    <h3 class="event-title">Formation of Protocells</h3> 
-                    <p class="event-desc">Protocells form. RNA likely acts as both genetic code and chemical catalyst.</p>+                    <p class="event-desc">Organic molecules concentrated in water to form "proteinoid microspheres" or droplets with semi-permeable membranes. These prebiotic structures displayed primitive metabolism and growth but lacked true hereditary mechanisms.</p> 
 +                    <div class="event-dot"></div> 
 +                </div> 
 +                <div class="event-item"> 
 +                    <span class="time-badge">11 Gy</span> 
 +                    <h3 class="event-title">The "RNA World"</h3> 
 +                    <p class="event-desc">Before the dominance of DNA and proteins, RNA likely served a dual role as both the carrier of genetic information and the catalyst for chemical reactions (ribozymes), bridging the gap between non-living chemistry and true biology.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
                 <div class="event-item">                 <div class="event-item">
                     <span class="time-badge">11.5 Gy</span>                     <span class="time-badge">11.5 Gy</span>
-                    <h3 class="event-title">First Life (Prokaryotes)</h3> +                    <h3 class="event-title">Emergence of Prokaryotes</h3> 
-                    <p class="event-desc">Simple single-celled bacteria appear, likely feeding on organic chemicals in hydrothermal vents.</p>+                    <p class="event-desc">The first true living cells appeared, likely as heterotrophic bacteria in hydrothermal vents. These simple, single-celled organisms (lacking a nucleus) fed on the organic "soup" of the early oceans.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
                 <div class="event-item">                 <div class="event-item">
                     <span class="time-badge">12 Gy</span>                     <span class="time-badge">12 Gy</span>
-                    <h3 class="event-title">Photosynthesis</h3> +                    <h3 class="event-title">Invention of Photosynthesis</h3> 
-                    <p class="event-desc">Cyanobacteria learn to use sunlight for food. The resulting oxygen is toxic to early life ("Oxygen Crisis").</p>+                    <p class="event-desc">Certain bacteria (autotrophs), such as cyanobacteria, evolved the ability to use sunlight to convert carbon dioxide and water into food. This reduced life's dependence on scarce organic molecules and allowed life to spread globally.</p> 
 +                    <div class="event-dot"></div> 
 +                </div> 
 +                <div class="event-item"> 
 +                    <span class="time-badge">12.2 Gy</span> 
 +                    <h3 class="event-title">The Oxygen Crisis</h3> 
 +                    <p class="event-desc">As a byproduct of photosynthesis, free oxygen accumulated in the atmosphere. This "Oxygen Holocaust" was toxic to many early anaerobic organisms but paved the way for more efficient energy production via respiration.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
Line 473: Line 477:
                     <span class="time-badge">12.5 Gy</span>                     <span class="time-badge">12.5 Gy</span>
                     <h3 class="event-title">Eukaryotic Symbiosis</h3>                     <h3 class="event-title">Eukaryotic Symbiosis</h3>
-                    <p class="event-desc">Cells merge to form complex Eukaryotes (with nuclei and mitochondria), ancestors of all plants and animals.</p>+                    <p class="event-desc">Large cells ingested smaller specialized bacteria (which became mitochondria and chloroplasts) without digesting them. This symbiosis led to the first eukaryotes: complex cells with distinct nuclei and organelles that became the ancestors of all plants and animals.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
Line 480: Line 484:
     </div>     </div>
  
-    <div class="age-section age-biological">+    <div class="age-section">
         <div class="age-header">         <div class="age-header">
-            <div>+            <div class="header-content">
                 <span class="age-title">6. Biological Age</span>                 <span class="age-title">6. Biological Age</span>
-                <span class="age-meta">Years Ago</span>+                <span class="age-period">[ 1 Gy – 5 My ago ]</span>
             </div>             </div>
             <span class="toggle-icon">▼</span>             <span class="toggle-icon">▼</span>
Line 492: Line 496:
                 <div class="event-item">                 <div class="event-item">
                     <span class="time-badge">1 Gy</span>                     <span class="time-badge">1 Gy</span>
-                    <h3 class="event-title">Multicellularity</h3> +                    <h3 class="event-title">Rise of Multicellularity</h3> 
-                    <p class="event-desc">Cells specialize and cooperate, forming true multicellular organisms.</p>+                    <p class="event-desc">Single-celled eukaryotes began to cluster and cooperate, leading to the first true multicellular organisms. This transition involved a division of labor among cells, allowing for specialization and increased complexity beyond simple colonial living.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
                 <div class="event-item">                 <div class="event-item">
-                    <span class="time-badge">540 My</span> +                    <span class="time-badge">540 – 600 My</span> 
-                    <h3 class="event-title">Cambrian Explosion</h3> +                    <h3 class="event-title">The Cambrian Explosion</h3> 
-                    <p class="event-desc">"Biology's Big Bang": complex body plans, hard shells, and predators appear rapidly.</p>+                    <p class="event-desc">A rapid burst of biological diversification often called "biology's big bang." This period saw the emergence of most modern animal body plans, the development of hard shells and skeletons, and a sophisticated predator-prey "arms race".</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
                 <div class="event-item">                 <div class="event-item">
-                    <span class="time-badge">400 My</span> +                    <span class="time-badge">400 – 475 My</span> 
-                    <h3 class="event-title">Land Colonization</h3> +                    <h3 class="event-title">Colonization of Land</h3> 
-                    <p class="event-desc">Life leaves the ocean. Plants, insects, and amphibians adapt to air and gravity.</p>+                    <p class="event-desc">Life migrated from the oceans to the barren continents. Simple plants (like mosses) were the first to adapt to the harsh terrestrial environment, followed by arthropods and early amphibians, which required major adaptations to survive gravity and desiccation.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
                 <div class="event-item">                 <div class="event-item">
                     <span class="time-badge">300 My</span>                     <span class="time-badge">300 My</span>
-                    <h3 class="event-title">Reptiles Dominate</h3> +                    <h3 class="event-title">Dominance of Reptiles</h3> 
-                    <p class="event-desc">Watertight skin and hard-shelled eggs allow reptiles to conquer dry land.</p>+                    <p class="event-desc">Reptiles evolved watertight skin and amniotic eggs with hard shells, allowing them to reproduce on dry land without returning to water. This adaptation enabled them to spread across the supercontinent Pangea and dominate the planet.</p> 
 +                    <div class="event-dot"></div> 
 +                </div> 
 +                <div class="event-item"> 
 +                    <span class="time-badge">200 My</span> 
 +                    <h3 class="event-title">Emergence of Mammals</h3> 
 +                    <p class="event-desc">The first small, warm-blooded (endothermic) mammals appeared during the Triassic period. While overshadowed by dinosaurs for millions of years, they developed key traits like fur, milk production, and larger brains relative to body size.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
                 <div class="event-item">                 <div class="event-item">
                     <span class="time-badge">65 My</span>                     <span class="time-badge">65 My</span>
-                    <h3 class="event-title">K-T Extinction</h3> +                    <h3 class="event-title">K-T Mass Extinction</h3> 
-                    <p class="event-desc">Asteroid impact wipes out dinosaurs. Mammals survive and radiate into empty niches.</p>+                    <p class="event-desc">A massive asteroid impact (likely at Chicxulub, Mexico) caused global climatic upheaval, wiping out the dinosaurs and roughly half of all plant species. This catastrophic event cleared ecological niches, allowing mammals to radiate and dominate the Cenozoic era.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
                 <div class="event-item">                 <div class="event-item">
                     <span class="time-badge">5 – 7 My</span>                     <span class="time-badge">5 – 7 My</span>
-                    <h3 class="event-title">Hominid Divergence</h3> +                    <h3 class="event-title">Divergence of Hominids</h3> 
-                    <p class="event-desc">Human ancestors split from apes and begin walking upright.</p>+                    <p class="event-desc">In response to changing climates and shrinking forests in Africa, the ancestors of humans separated from the lineage of great apes. This period marked the beginning of bipedalism (walking upright), setting the stage for the Cultural Age.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
Line 530: Line 540:
     </div>     </div>
  
-    <div class="age-section age-cultural">+    <div class="age-section">
         <div class="age-header">         <div class="age-header">
-            <div>+            <div class="header-content">
                 <span class="age-title">7. Cultural Age</span>                 <span class="age-title">7. Cultural Age</span>
-                <span class="age-meta">Years Ago</span>+                <span class="age-period">[ 1 My ago – Future ]</span>
             </div>             </div>
             <span class="toggle-icon">▼</span>             <span class="toggle-icon">▼</span>
Line 541: Line 551:
             <div class="timeline">             <div class="timeline">
                 <div class="event-item">                 <div class="event-item">
-                    <span class="time-badge">1 My</span>+                    <span class="time-badge">1 My – 500 ky</span>
                     <h3 class="event-title">Control of Fire</h3>                     <h3 class="event-title">Control of Fire</h3>
-                    <p class="event-desc">Fire provides warmth and cooked food, fueling brain growth.</p>+                    <p class="event-desc">Humans mastered the use of fire for warmth, protection, and cooking. This "technological" advance predated modern brain size and acted as an external digestive system, allowing for higher energy intake and brain growth.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
                 <div class="event-item">                 <div class="event-item">
-                    <span class="time-badge">200 ky</span> +                    <span class="time-badge">200 – 300 ky</span> 
-                    <h3 class="event-title">Modern Humans</h3> +                    <h3 class="event-title">Emergence of humans</h3> 
-                    <p class="event-desc">Homo sapiens appear in Africa.</p>+                    <p class="event-desc">Modern humans appeared in Africa. While genetically similar to ancestors, they possessed superior potential for communication and technological adaptation, marking the biological start of the Cultural Age.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
                 <div class="event-item">                 <div class="event-item">
                     <span class="time-badge">50 ky</span>                     <span class="time-badge">50 ky</span>
-                    <h3 class="event-title">Cultural Explosion</h3> +                    <h3 class="event-title">The "Cultural Explosion"</h3> 
-                    <p class="event-desc">Art, advanced tools, and symbolic language emerge ("Culture's Big Bang").</p>+                    <p class="event-desc">A sudden flowering of behavioral modernity characterized by sophisticated tool kits, cave art (e.g., Lascaux), and the full development of symbolic language. This period is often called "culture's big bang."</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
                 <div class="event-item">                 <div class="event-item">
                     <span class="time-badge">10 ky</span>                     <span class="time-badge">10 ky</span>
-                    <h3 class="event-title">Agriculture</h3> +                    <h3 class="event-title">The Agricultural Revolution</h3> 
-                    <p class="event-desc">Farming leads to permanent settlements and population growth.</p>+                    <p class="event-desc">Following the last ice age, humans shifted from hunter-gatherer lifestyles to farming and animal domestication. This ability to harvest increased solar energy led to population surges and settled village life.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
                 <div class="event-item">                 <div class="event-item">
                     <span class="time-badge">5 ky</span>                     <span class="time-badge">5 ky</span>
-                    <h3 class="event-title">Civilization</h3> +                    <h3 class="event-title">Rise of Civilization and State</h3> 
-                    <p class="event-desc">City-states, social hierarchies, and writing begin.</p>+                    <p class="event-desc">The emergence of dense populations, complex social hierarchies, and the invention of writing (e.g., Sumerian cuneiform). This marked the transition from prehistory to recorded history and the formation of the first city-states.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
                 <div class="event-item">                 <div class="event-item">
                     <span class="time-badge">250 years</span>                     <span class="time-badge">250 years</span>
-                    <h3 class="event-title">Industrial Revolution</h3> +                    <h3 class="event-title">The Industrial Revolution</h3> 
-                    <p class="event-desc">Fossil fuels power machines, globalizing society.</p>+                    <p class="event-desc">Humanity learned to exploit energy stored in fossil fuels (coal and oil), increasing per capita energy use by nearly a factor of 100. This transition powered machines, mechanizing production and globalizing human society.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
                 <div class="event-item">                 <div class="event-item">
-                    <span class="time-badge">Future</span> +                    <span class="time-badge">Present / Future</span> 
-                    <h3 class="event-title">The Life Era</h3> +                    <h3 class="event-title">The "Life Era"</h3> 
-                    <p class="event-desc">Technological life controls evolution and expands into the cosmos.</p>+                    <p class="event-desc">A potential new phase of cosmic evolution where technological life begins to manipulate matter and genetic evolution itself. Humans have become agents of change, capable of leaving Earth and potentially dominating matter on a cosmic scale.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
Line 587: Line 597:
  
     <script>     <script>
-        // Scoped script to avoid interfering with other DokuWiki JS 
         (function() {         (function() {
-            const wrapper = document.getElementById('doku-cosmic-timeline');+            const wrapper = document.getElementById('doku-cosmic-light');
             if (!wrapper) return;             if (!wrapper) return;
  
courses/ast100/0.1769412615.txt.gz · Last modified: by asad
Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki