Differences

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

--- courses:ast100:1 [2026/01/19 22:28] – asad
+++ courses:ast100:1 [2026/03/22 02:16] (current) – asad
@@ Line 1: / Line 1: @@
 ====== 1. Particle Age ======
-{{:courses:ast100:particleage.jpg?nolink|}}
-^ Time ^ Event ^ Details ^
+<html>
-| $0$ | **The Big Bang** | The singularity event marking the origin of space, time, energy and matter (STEM). The universe emerges as an unimaginably hot and dense "primeval fireball". |
+<head>
-| $10^{-35}$ to $10^{-32}$ seconds | **Cosmic Inflation** | A brief, exponential expansion where the universe swells in size by a factor of roughly $10^{50}$. This process smoothed out initial irregularities. |
+    <meta charset="UTF-8">
-| $10^{-43}$ to $10^{-10}$ seconds | **Separation of Forces** | 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. |
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-| $10^{-35}$ to 1 second | **Particle Creation & Annihilation** | 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. |
+    <title>Particle Age Table</title>
-| 3 minutes to 15 minutes | **Primordial Nucleosynthesis** | The universe cooled sufficiently (below $10^9$ K) for protons and neutrons to fuse. This "Nuclear Epoch" produced the first atomic nuclei: heavy hydrogen (deuterium), helium, and trace amounts of lithium. |
+</head>
-| 50,000 years | **Matter Domination** | 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. |
+<body>
-| 300,000 to 380,000 years | **Recombination & Decoupling** | 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). |
+<div id="doku-cosmic-light">
+    <style>
+        /* Container ID: #doku-cosmic-light
+           Theme: Minimal Modern Elegant - Collapsible Table Version
+        */
+        #doku-cosmic-light {
+            /* Elegant Theme Variables */
+            --bg: #ffffff;
+            --text-main: #1a202c;
+            --text-muted: #4a5568;
+            --border: #e2e8f0;
+            --hover: #f8fafc;
+            --accent: #2b6cb0;
+            --transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+            /* Typography & Layout */
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+            background-color: transparent;
+            max-width: 950px;
+            margin: 40px auto;
+            padding: 0 15px;
+        }
+        #doku-cosmic-light * {
+            box-sizing: border-box;
+        }
+        /* Table Architecture */
+        #doku-cosmic-light .timeline-table {
+            width: 100%;
+            background: var(--bg);
+            border: 1px solid var(--border);
+            border-radius: 12px;
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
+            overflow: hidden;
+        }
+        #doku-cosmic-light .t-row {
+            border-bottom: 1px solid var(--border);
+        }
+        #doku-cosmic-light .t-row:last-child {
+            border-bottom: none;
+        }
+        /* Collapsible Header (The "Row") */
+        #doku-cosmic-light .t-header {
+            display: flex;
+            padding: 22px 30px;
+            cursor: pointer;
+            align-items: center;
+            background: var(--bg);
+            transition: var(--transition);
+        }
+        #doku-cosmic-light .t-header:hover {
+            background: var(--hover);
+        }
+        #doku-cosmic-light .col-time {
+            flex: 0 0 150px;
+            font-weight: 700;
+            font-size: 0.95rem;
+            color: var(--accent);
+            letter-spacing: 0.5px;
+        }
+        #doku-cosmic-light .col-title {
+            flex: 1 1 auto;
+            font-weight: 600;
+            font-size: 1.15rem;
+            color: var(--text-main);
+            padding-right: 20px;
+            line-height: 1.4;
+        }
+        /* Chevron Icon */
+        #doku-cosmic-light .col-toggle {
+            flex: 0 0 32px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: #edf2f7;
+            color: var(--text-muted);
+            transition: var(--transition);
+        }
+        #doku-cosmic-light .col-toggle svg {
+            width: 16px;
+            height: 16px;
+            transition: var(--transition);
+            fill: none;
+            stroke: currentColor;
+            stroke-width: 2.5;
+            stroke-linecap: round;
+            stroke-linejoin: round;
+        }
+        /* Active State */
+        #doku-cosmic-light .t-row.active .t-header {
+            background: var(--hover);
+        }
+        #doku-cosmic-light .t-row.active .col-toggle {
+            transform: rotate(180deg);
+            background: var(--accent);
+            color: var(--bg);
+        }
+        /* Expanded Content */
+        #doku-cosmic-light .t-content {
+            max-height: 0;
+            overflow: hidden;
+            transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+            background: var(--hover);
+        }
+        #doku-cosmic-light .t-content-inner {
+            padding: 0 30px 30px 180px; /* Aligns with the title text (150 width + 30 padding) */
+            font-size: 1.05rem;
+            line-height: 1.75;
+            color: var(--text-muted);
+            text-align: justify;
+        }
+        /* Mobile Optimization */
+        @media (max-width: 768px) {
+            #doku-cosmic-light .t-header {
+                flex-wrap: wrap;
+                padding: 18px 20px;
+            }
+            #doku-cosmic-light .col-time {
+                flex: 1 1 100%;
+                margin-bottom: 6px;
+                font-size: 0.85rem;
+            }
+            #doku-cosmic-light .col-title {
+                font-size: 1.05rem;
+                padding-right: 15px;
+            }
+            #doku-cosmic-light .t-content-inner {
+                padding: 0 20px 24px 20px;
+            }
+        }
+    </style>
+    <div class="timeline-table">
+        <!-- Row 1 -->
+        <div class="t-row">
+            <div class="t-header" onclick="toggleRow(this)">
+                <div class="col-time">0</div>
+                <div class="col-title">The Big Bang</div>
+                <div class="col-toggle">
+                    <svg viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"></polyline></svg>
+                </div>
+            </div>
+            <div class="t-content">
+                <div class="t-content-inner">
+                    The saga of our cosmos began at "time zero" with the Big Bang—a singular, monumental event that marked the simultaneous origin of space, time, energy, and matter (STEM). Emerging from a state of unimaginable and infinite density, the universe was not a traditional explosion of matter bursting out into a pre-existing, empty void. Rather, it was a sudden, violent eruption and rapid expansion of space itself. This "primeval fireball" was so incredibly hot, dense, and energetic that the standard laws of physics we rely on today simply did not yet exist. In this initial instant, the entire observable universe was compressed into an infinitesimally small point, possessing infinite temperature and pressure. This foundational singularity set into motion the relentless expansion and complex evolutionary trajectory of the cosmos, establishing the ultimate starting point for the 14-billion-year history of everything that currently exists.
+                </div>
+            </div>
+        </div>
+        <!-- Row 2 -->
+        <div class="t-row">
+            <div class="t-header" onclick="toggleRow(this)">
+                <div class="col-time">10<sup>-35</sup> to 10<sup>-32</sup> seconds</div>
+                <div class="col-title">Cosmic Inflation</div>
+                <div class="col-toggle">
+                    <svg viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"></polyline></svg>
+                </div>
+            </div>
+            <div class="t-content">
+                <div class="t-content-inner">
+                    Almost instantly following the initial singularity, in the fleeting blink of an eye between 10<sup>-35</sup> and 10<sup>-32</sup> seconds, the infant universe experienced a period of breathtaking, exponential growth known as Cosmic Inflation. During this infinitesimally brief moment, the very fabric of space stretched by a staggering factor of roughly 10<sup>50</sup>, causing the universe to swell from a subatomic scale to macroscopic proportions at speeds far exceeding the speed of light. This rapid, dramatic transformation was absolutely vital for the future structural integrity of the cosmos. By expanding so violently, inflation effectively ironed out and smoothed the extreme early chaos and initial quantum irregularities. It ensured that energy and matter were distributed evenly and uniformly across vast distances, laying the essential, balanced groundwork necessary to eventually allow for a stable, highly organized universe rather than a hopelessly chaotic one.
+                </div>
+            </div>
+        </div>
+        <!-- Row 3 -->
+        <div class="t-row">
+            <div class="t-header" onclick="toggleRow(this)">
+                <div class="col-time">10<sup>-43</sup> to 10<sup>-10</sup> seconds</div>
+                <div class="col-title">Separation of Forces</div>
+                <div class="col-toggle">
+                    <svg viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"></polyline></svg>
+                </div>
+            </div>
+            <div class="t-content">
+                <div class="t-content-inner">
+                    As the intense, unfathomable heat of the universe's absolute beginning began to gradually fade within the first microscopic fractions of a second, the fundamental rules of nature started to take definitive shape through the Separation of Forces. Initially, under extreme temperatures, all of nature’s energy and interactions were perfectly bound together in a single, unified "superforce." However, as the universe rapidly expanded and the temperature systematically dropped, this primordial unity shattered in a series of phase transitions. The forces began to "freeze out" and act completely independently. Gravity was the first force to break away and separate from the others, establishing the rules of mass and attraction. This was sequentially followed by the decoupling of the strong nuclear force, the weak nuclear force, and finally electromagnetism. This critical separation established the distinct physical interactions and diverse energetic rules that govern the complex behavior of the world around us today.
+                </div>
+            </div>
+        </div>
+        <!-- Row 4 -->
+        <div class="t-row">
+            <div class="t-header" onclick="toggleRow(this)">
+                <div class="col-time">10<sup>-35</sup> to 1 second</div>
+                <div class="col-title">Particle Creation & Annihilation</div>
+                <div class="col-toggle">
+                    <svg viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"></polyline></svg>
+                </div>
+            </div>
+            <div class="t-content">
+                <div class="t-content-inner">
+                    During the turbulent first full second of existence, the incredibly hot universe functioned as a colossal, high-energy furnace where pure radiant energy was constantly transforming into physical substance. In this dynamic era of Particle Creation and Annihilation, energy was directly converted into the very first basic building blocks of matter, such as quarks and leptons (including electrons), via a process known as "pair production." As these elementary particles rapidly emerged, matter and its counterpart, antimatter, engaged in a violent, continuous cosmic struggle, colliding and instantaneously destroying one another upon contact to release bursts of energy. Fortunately for the future cosmos, this annihilation was not perfectly symmetrical. A tiny, miraculous imbalance existed, leaving a slight but immensely consequential excess of ordinary matter surviving the conflict. This small, surviving remnant of particles became the foundational raw material eventually used to build every star, planet, galaxy, and living being in existence.
+                </div>
+            </div>
+        </div>
+        <!-- Row 5 -->
+        <div class="t-row">
+            <div class="t-header" onclick="toggleRow(this)">
+                <div class="col-time">3 minutes to 15 minutes</div>
+                <div class="col-title">Primordial Nucleosynthesis</div>
+                <div class="col-toggle">
+                    <svg viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"></polyline></svg>
+                </div>
+            </div>
+            <div class="t-content">
+                <div class="t-content-inner">
+                    By the time the universe was exactly three minutes old, it entered a crucial, transformative phase of "cosmic cooking" scientifically termed Primordial Nucleosynthesis. This vital process was initially held back by a physical "bottleneck," as the environment remained too intensely hot and energetic for simple atoms to bind and hold together without instantly being blasted apart. However, once the ambient temperature successfully dipped below one billion degrees Kelvin, protons and neutrons could finally fuse and remain stable. This brief "Nuclear Epoch" produced the very first atomic nuclei in the universe, primarily forming heavy hydrogen (deuterium), large quantities of stable helium, and trace amounts of lithium. This grand atomic assembly line was extraordinarily brief, lasting only about fifteen minutes before the universe expanded and cooled too much to create anything heavier. It left behind a permanent chemical signature of roughly 75% hydrogen and 25% helium—a primordial ratio that we still observe in the oldest stars today.
+                </div>
+            </div>
+        </div>
+        <!-- Row 6 -->
+        <div class="t-row">
+            <div class="t-header" onclick="toggleRow(this)">
+                <div class="col-time">50,000 years</div>
+                <div class="col-title">Matter Domination</div>
+                <div class="col-toggle">
+                    <svg viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"></polyline></svg>
+                </div>
+            </div>
+            <div class="t-content">
+                <div class="t-content-inner">
+                    Following the initial frenzy of particle creation and rapid nuclear fusion, the cosmos continued to expand in total, featureless darkness for many thousands of years until it reached a profound, pivotal turning point known as Matter Domination. At this critical stage, occurring roughly 50,000 years after the Big Bang, the universe experienced a fundamental "crossover point." Because the expansion of space diluted the energy of radiation much faster than the density of matter, the energy density of physical matter finally exceeded and overpowered that of radiation. This fundamental shift marked the definitive end of the early "Radiation Era" and the beginning of the "Matter Era." It was a defining moment in cosmic history because it allowed the persistent, slow influence of gravity to finally begin pulling matter together. This subtle clumping initiated the formation of the first large-scale structures, creating the vast, invisible dark-matter scaffolding upon which all future galaxies would eventually grow.
+                </div>
+            </div>
+        </div>
+        <!-- Row 7 -->
+        <div class="t-row">
+            <div class="t-header" onclick="toggleRow(this)">
+                <div class="col-time">300,000 to 380,000 years</div>
+                <div class="col-title">Recombination & Decoupling</div>
+                <div class="col-toggle">
+                    <svg viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"></polyline></svg>
+                </div>
+            </div>
+            <div class="t-content">
+                <div class="t-content-inner">
+                    Finally, in a momentous epoch spanning between 300,000 and 380,000 years after the Big Bang, the expanding universe cooled sufficiently for slow-moving electrons to be successfully captured by atomic nuclei, settling into stable orbits. This critical event, scientifically known as Recombination, formed the very first neutral atoms of hydrogen and helium. Previously, the universe had been a dense, opaque plasma where free-roaming electrons continuously scattered light, trapping photons in a thick, electrically charged fog. By sweeping up these free electrons to form neutral atoms, the universe was suddenly neutralized. This allowed photons to completely decouple from matter and travel freely across the vastness of space without interference. For the very first time, the universe became entirely transparent. Today, we can still detect these ancient, newly freed photons as the Cosmic Microwave Background (CMB)—a faint, stretched, fossilized afterglow that serves as the ultimate, direct "baby picture" of our newborn universe.
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        function toggleRow(element) {
+            const row = element.parentElement;
+            const content = row.querySelector('.t-content');
+            const inner = row.querySelector('.t-content-inner');
+            // Toggle the active class for styling and rotation
+            row.classList.toggle('active');
+            // Calculate and set the max-height to smoothly animate the opening
+            if (row.classList.contains('active')) {
+                content.style.maxHeight = inner.scrollHeight + "px";
+            } else {
+                content.style.maxHeight = "0px";
+            }
+        }
+        // Ensure heights are recalculated if the window is resized to prevent content clipping
+        window.addEventListener('resize', () => {
+            document.querySelectorAll('.t-row.active .t-content').forEach(content => {
+                const inner = content.querySelector('.t-content-inner');
+                content.style.maxHeight = inner.scrollHeight + "px";
+            });
+        });
+    </script>
+</div>
+</body>
+</html>