Differences

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

--- courses:ast100:1 [2026/01/27 11:31] – asad
+++ courses:ast100:1 [2026/03/22 02:16] (current) – asad
@@ Line 1: / Line 1: @@
 ====== 1. Particle Age ======
-^ Time ^ Event ^ Details ^
-| $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". |
-| $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. |
-| $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. |
-| $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. |
-| 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. |
-| 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. |
-| 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). |
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Particle Age Table</title>
+</head>
+<body>
+<div id="doku-cosmic-light">
+    <style>
+        /* Container ID: #doku-cosmic-light
+           Theme: Minimal Modern Elegant - Collapsible Table Version
+        */
-The saga of our cosmos began at "time zero" with the Big Bang—a singular event that marked the simultaneous birth of space, time, energy, and matter. Emerging from a state of unimaginable density, the universe was not a traditional explosion bursting into an empty void; rather, it was a sudden eruption of space itself. This "primeval fireball" was so incredibly hot and compact that the standard laws of physics we rely on today simply did not yet exist.
+        #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;
+        }
-Almost instantly, in the blink of an eye between $10^{-35}$ and $10^{-32}$ seconds, the infant universe experienced a period of breath-taking growth known as Cosmic Inflation. In this fleeting moment, the fabric of space stretched by a staggering factor, expanding exponentially. This rapid transformation was vital for the future of the cosmos, as it smoothed out the early chaos and ensured that energy was distributed evenly enough to eventually allow for a stable and balanced universe.
+        #doku-cosmic-light * {
+            box-sizing: border-box;
+        }
-As the intense heat of the beginning began to fade within the first fraction of a second, the fundamental rules of nature started to take shape through the Separation of Forces. Initially, all of nature’s energy was bound together in a single "superforce." However, as the temperature dropped, this unity shattered, and the forces began to act independently. Gravity was the first to break away, followed by the nuclear and electromagnetic forces, setting the stage for the physical interactions that govern the world around us today.
+        /* 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;
+        }
-During the first full second of existence, the universe functioned as a colossal, high-energy furnace where light was constantly transforming into substance. In this era of Particle Creation and Annihilation, energy was converted into the basic building blocks of matter, such as quarks and electrons. While matter and antimatter engaged in a violent struggle, destroying one another upon contact, a tiny, fortunate excess of ordinary matter survived the conflict. This small remnant became the raw material used to build every star, planet, and person in existence.
+        #doku-cosmic-light .t-row {
+            border-bottom: 1px solid var(--border);
+        }
-By the time the universe was three minutes old, it entered a crucial phase of "cosmic cooking" called Primordial Nucleosynthesis. This process was initially held back by a "bottleneck" where the environment was still too intense for simple atoms to hold together. However, once the temperature dipped below one billion degrees, the first atomic nuclei—primarily hydrogen and helium—could finally form and remain stable. This assembly line lasted only about fifteen minutes before the universe cooled too much to create anything heavier, leaving behind a chemical signature of roughly 75% hydrogen and 25% helium that we still see in the stars today.
+        #doku-cosmic-light .t-row:last-child {
+            border-bottom: none;
+        }
-Following this initial frenzy, the universe expanded in total darkness for many thousands of years until it reached a pivotal turning point known as Matter Domination. At this stage, roughly 50,000 years after the start, the influence of matter finally became stronger than the influence of radiation. This shift was a defining moment in cosmic history; it allowed gravity to finally begin pulling matter together into the first large-scale structures, creating the invisible scaffolding upon which the first galaxies would eventually grow.
+        /* 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);
+        }
-Finally, between 300,000 and 380,000 years after the Big Bang, the universe cooled enough for electrons to settle into orbits around nuclei, forming the very first neutral atoms. This event, known as Recombination, cleared away the "charged fog" of particles that had previously trapped light. For the first time, the universe became transparent, allowing light to travel freely across the vastness of space. Today, we can still detect this ancient light as the Cosmic Microwave Background—a fossilized afterglow that serves as the ultimate "baby picture" of our universe.
+        #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>