untitled

Pasted Sep 27, 2026, 4:46 PM1 file333 lines

Scan to open on your phone

Point a camera at the QR code - it opens this exact paste, no app needed.

https://codepastes.com/zzgt97bh5x00rz2x
untitled
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>The Long Argument — A History of Science</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Source+Sans+3:wght@400;500;600&display=swap" rel="stylesheet">
<style>
:root{
  --ink:#0f1b2b; --paper:#f6f2e8; --paper2:#eee7d6; --rule:#c9bfa2;
  --brass:#a9762c; --teal:#1f5d5a; --text:#1c2430; --muted:#5b5f6b;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
:root[data-theme="dark"]{
  --paper:#141a22; --paper2:#1b232e; --rule:#3a4250; --text:#e7e2d4; --muted:#9aa0ad;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:env(safe-area-inset-top,0px);}
html,body{margin:0; background:var(--paper);}
body{
  font-family:'Source Sans 3',sans-serif; color:var(--text);
  line-height:1.55;
}
h1,h2,h3{ font-family:'Fraunces',serif; margin:0; }
a{ color:inherit; }
.container{ max-width:920px; margin:0 auto; padding:0 20px; }

/* HERO */
.hero{
  background:linear-gradient(180deg,var(--ink) 0%, #16283e 100%);
  color:#f2ede0; padding:64px 0 48px; text-align:left;
}
.hero .eyebrow{ color:#d9c48b; font-size:.85rem; letter-spacing:.4px; margin-bottom:10px; }
.hero h1{ font-size:clamp(2.1rem,6vw,3.4rem); font-weight:700; line-height:1.08; max-width:14ch; }
.hero p{ max-width:56ch; color:#cdd3d8; margin-top:16px; font-size:1.05rem; }
.hero .meta{ margin-top:22px; display:flex; gap:18px; flex-wrap:wrap; font-size:.85rem; color:#9fb0bd; }

/* NAV */
nav{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:10;
  background:var(--paper); border-bottom:1px solid var(--rule);
  overflow-x:auto; white-space:nowrap;
}
nav .container{ display:flex; gap:2px; padding:0 20px; }
nav a{
  display:inline-block; padding:12px 14px; font-size:.85rem; text-decoration:none;
  color:var(--muted); border-bottom:2px solid transparent;
}
nav a:hover{ color:var(--text); border-bottom-color:var(--brass); }

/* SECTIONS */
section.field{ padding:46px 0 10px; border-bottom:1px solid var(--rule); }
.field-head{ display:flex; align-items:baseline; gap:14px; margin-bottom:6px; }
.field-num{ font-family:'Fraunces',serif; color:var(--brass); font-size:1rem; }
.field-head h2{ font-size:clamp(1.4rem,4vw,1.9rem); }
.field-intro{ color:var(--muted); max-width:62ch; margin:6px 0 28px; font-size:.98rem; }

.theory{ padding:22px 0; border-top:1px dashed var(--rule); }
.theory:first-of-type{ border-top:none; }
.theory h3{ font-size:1.2rem; margin-bottom:10px; }
.theory .tag{ display:inline-block; font-size:.72rem; color:var(--teal); border:1px solid var(--teal); border-radius:20px; padding:2px 10px; margin-bottom:10px; }
.dsr{ display:grid; grid-template-columns:1fr; gap:14px; margin-top:8px; }
@media(min-width:680px){ .dsr{ grid-template-columns:1fr 1fr 1fr; } }
.dsr div{ background:var(--paper2); border-radius:10px; padding:12px 14px; }
.dsr .lbl{ font-size:.72rem; text-transform:uppercase; letter-spacing:.6px; color:var(--brass); margin-bottom:6px; font-weight:600; }
.dsr p{ margin:0; font-size:.92rem; color:var(--text); }

/* INVENTIONS TIMELINE */
.inventions{ margin-top:26px; }
.inventions h4{ font-family:'Fraunces',serif; font-size:1rem; color:var(--muted); margin-bottom:12px; font-weight:600; }
.timeline{ position:relative; padding-left:20px; border-left:2px solid var(--rule); display:flex; flex-direction:column; gap:14px; }
.tl-item{ position:relative; }
.tl-item::before{ content:''; position:absolute; left:-25px; top:5px; width:9px; height:9px; border-radius:50%; background:var(--brass); }
.tl-item .yr{ font-weight:600; color:var(--brass); font-size:.85rem; margin-right:8px; }
.tl-item span.desc{ font-size:.92rem; color:var(--text); }

/* FRONTIERS */
.frontiers{ background:var(--ink); color:#f2ede0; padding:48px 0 56px; margin-top:10px; }
.frontiers h2{ font-size:clamp(1.4rem,4vw,1.9rem); color:#f2ede0; }
.frontiers p.lead{ color:#b9c2ca; max-width:60ch; margin:10px 0 26px; }
.fgrid{ display:grid; grid-template-columns:1fr; gap:14px; }
@media(min-width:680px){ .fgrid{ grid-template-columns:1fr 1fr; } }
.fcard{ background:#1a2c42; border-radius:12px; padding:16px 18px; border:1px solid #2c4460; }
.fcard h4{ font-family:'Fraunces',serif; font-size:1.05rem; margin-bottom:6px; color:#f2ede0; }
.fcard p{ margin:0; font-size:.88rem; color:#aab6bf; }

footer{ text-align:center; padding:30px 20px 40px; color:var(--muted); font-size:.8rem; }
footer a{ color:var(--brass); text-decoration:none; }
</style>
</head>
<body>

<header class="hero">
  <div class="container">
    <div class="eyebrow">A reference on how we came to know what we know</div>
    <h1>The Long Argument</h1>
    <p>Every major science begins as a doubt about the world as it was explained. This is a working map of the big theories that answered those doubts, the inventions that came from them, and the questions still open today.</p>
    <div class="meta">
      <span>7 fields</span><span>·</span><span>19 landmark theories</span><span>·</span><span>40+ inventions</span><span>·</span><span>8 open frontiers</span>
    </div>
  </div>
</header>

<nav>
  <div class="container">
    <a href="#physics">Physics</a>
    <a href="#chemistry">Chemistry</a>
    <a href="#biology">Biology</a>
    <a href="#astronomy">Astronomy</a>
    <a href="#earth">Earth &amp; Climate</a>
    <a href="#medicine">Medicine</a>
    <a href="#computing">Computing</a>
    <a href="#frontiers">Open Frontiers</a>
  </div>
</nav>

<main>

<section class="field" id="physics">
  <div class="container">
    <div class="field-head"><span class="field-num">01</span><h2>Physics</h2></div>
    <p class="field-intro">The study of matter, motion, and force — and the field that has most often had to throw out its own foundations and start again.</p>

    <div class="theory">
      <span class="tag">1687</span>
      <h3>Newtonian Mechanics</h3>
      <div class="dsr">
        <div><div class="lbl">The doubt</div><p>Why do the planets trace ellipses, and why does a dropped apple and an orbiting moon obey what looks like the same rule?</p></div>
        <div><div class="lbl">The resolution</div><p>Newton unified motion and gravity into three laws and an inverse-square force, predicting orbits, tides, and projectile paths from one framework.</p></div>
        <div><div class="lbl">Where it broke</div><p>It fails at very high speeds and near strong gravity — the anomalous orbit of Mercury couldn't be explained by Newton's math alone.</p></div>
      </div>
    </div>

    <div class="theory">
      <span class="tag">1865–1905</span>
      <h3>Electromagnetism &amp; Special Relativity</h3>
      <div class="dsr">
        <div><div class="lbl">The doubt</div><p>Maxwell's equations implied light always travels at the same speed — but relative to what? Motion seemed to break the symmetry of physics.</p></div>
        <div><div class="lbl">The resolution</div><p>Einstein discarded absolute space and time: the speed of light is constant for all observers, and time and length become relative to motion.</p></div>
        <div><div class="lbl">Where it broke</div><p>Special relativity ignores gravity entirely, and couldn't explain Mercury's orbit or how mass bends spacetime.</p></div>
      </div>
    </div>

    <div class="theory">
      <span class="tag">1915</span>
      <h3>General Relativity</h3>
      <div class="dsr">
        <div><div class="lbl">The doubt</div><p>If time is relative, how can gravity — which acts instantly at a distance in Newton's model — fit into the same picture at all?</p></div>
        <div><div class="lbl">The resolution</div><p>Gravity isn't a force but the curvature of spacetime itself, caused by mass and energy. It correctly predicted Mercury's orbit and starlight bending around the sun.</p></div>
        <div><div class="lbl">Where it strains</div><p>It cannot be reconciled mathematically with quantum mechanics at the smallest scales, such as inside a black hole.</p></div>
      </div>
    </div>

    <div class="theory">
      <span class="tag">1900–1927</span>
      <h3>Quantum Mechanics</h3>
      <div class="dsr">
        <div><div class="lbl">The doubt</div><p>Why did hot objects radiate energy in a way classical physics predicted should be infinite? And why did light sometimes behave like particles?</p></div>
        <div><div class="lbl">The resolution</div><p>Planck, Einstein, Bohr, Heisenberg and Schrödinger showed energy is quantized and particles exist as probability waves until measured.</p></div>
        <div><div class="lbl">Where it strains</div><p>It offers no agreed explanation for what "measurement" actually does to a system — the interpretation debate is still unresolved.</p></div>
      </div>
    </div>

    <div class="theory">
      <span class="tag">1970s</span>
      <h3>The Standard Model</h3>
      <div class="dsr">
        <div><div class="lbl">The doubt</div><p>Dozens of subatomic particles kept turning up in accelerators with no organizing logic between them.</p></div>
        <div><div class="lbl">The resolution</div><p>A single framework of quarks, leptons and force-carrying bosons — confirmed in 2012 with the discovery of the Higgs boson.</p></div>
        <div><div class="lbl">Where it strains</div><p>It has no explanation for gravity, dark matter, or dark energy, which together outweigh ordinary matter in the universe.</p></div>
      </div>
    </div>

    <div class="inventions">
      <h4>What it produced</h4>
      <div class="timeline">
        <div class="tl-item"><span class="yr">1826</span><span class="desc">The electric motor, from Faraday's work on electromagnetic induction</span></div>
        <div class="tl-item"><span class="yr">1947</span><span class="desc">The transistor, born from quantum theory of semiconductors</span></div>
        <div class="tl-item"><span class="yr">1960</span><span class="desc">The laser, an engineered application of stimulated emission</span></div>
        <div class="tl-item"><span class="yr">1971</span><span class="desc">GPS satellites, which require relativistic time correction to stay accurate</span></div>
        <div class="tl-item"><span class="yr">2001</span><span class="desc">MRI machines, using nuclear magnetic resonance from quantum spin</span></div>
      </div>
    </div>
  </div>
</section>

<section class="field" id="chemistry">
  <div class="container">
    <div class="field-head"><span class="field-num">02</span><h2>Chemistry</h2></div>
    <p class="field-intro">The search for what things are made of, and how those parts recombine.</p>

    <div class="theory">
      <span class="tag">1789</span>
      <h3>Conservation of Mass &amp; the End of Phlogiston</h3>
      <div class="dsr">
        <div><div class="lbl">The doubt</div><p>Burning objects seemed to lose a mysterious substance called "phlogiston" — but some metals gained weight when burned, not lost it.</p></div>
        <div><div class="lbl">The resolution</div><p>Lavoisier weighed reactions precisely and showed combustion is combination with oxygen, not loss of a substance — founding modern chemistry.</p></div>
        <div><div class="lbl">Where it's incomplete</div><p>Mass isn't strictly conserved in nuclear reactions, where mass converts to energy under relativity.</p></div>
      </div>
    </div>

    <div class="theory">
      <span class="tag">1869</span>
      <h3>The Periodic Table</h3>
      <div class="dsr">
        <div><div class="lbl">The doubt</div><p>Dozens of known elements showed recurring chemical behavior, but no one could explain why the pattern repeated.</p></div>
        <div><div class="lbl">The resolution</div><p>Mendeleev arranged elements by atomic weight and reactivity, leaving gaps that correctly predicted undiscovered elements like gallium.</p></div>
        <div><div class="lbl">Where it needed revision</div><p>The true ordering principle turned out to be atomic number, not weight — understood only once atomic structure was known.</p></div>
      </div>
    </div>

    <div class="theory">
      <span class="tag">1913–1926</span>
      <h3>Atomic &amp; Molecular Orbital Theory</h3>
      <div class="dsr">
        <div><div class="lbl">The doubt</div><p>If atoms had electrons orbiting a nucleus like tiny planets, physics said they should spiral in and collapse within moments.</p></div>
        <div><div class="lbl">The resolution</div><p>Bohr and later Schrödinger showed electrons occupy discrete quantized energy levels and probability clouds, not fixed orbits.</p></div>
        <div><div class="lbl">Where it strains</div><p>Exact orbital calculations become computationally intractable for anything larger than small molecules.</p></div>
      </div>
    </div>

    <div class="inventions">
      <h4>What it produced</h4>
      <div class="timeline">
        <div class="tl-item"><span class="yr">1856</span><span class="desc">Synthetic dyes, the first products of organic chemistry as an industry</span></div>
        <div class="tl-item"><span class="yr">1909</span><span class="desc">The Haber-Bosch process, synthesizing ammonia for fertilizer at scale</span></div>
        <div class="tl-item"><span class="yr">1930s</span><span class="desc">Plastics such as nylon and polyethylene</span></div>
        <div class="tl-item"><span class="yr">1953</span><span class="desc">Structural understanding of DNA, built on chemical bonding theory</span></div>
        <div class="tl-item"><span class="yr">1991</span><span class="desc">Lithium-ion batteries, from decades of electrochemistry research</span></div>
      </div>
    </div>
  </div>
</section>

<section class="field" id="biology">
  <div class="container">
    <div class="field-head"><span class="field-num">03</span><h2>Biology</h2></div>
    <p class="field-intro">How life organizes itself, changes over time, and replicates its own instructions.</p>

    <div class="theory">
      <span class="tag">1859</span>
      <h3>Evolution by Natural Selection</h3>
      <div class="dsr">
        <div><div class="lbl">The doubt</div><p>Species seemed perfectly suited to their environments, and fossils showed forms that no longer existed — but no mechanism explained either.</p></div>
        <div><div class="lbl">The resolution</div><p>Darwin and Wallace proposed that traits improving survival and reproduction become more common over generations, reshaping species over time.</p></div>
        <div><div class="lbl">Where it needed a mechanism</div><p>Darwin had no explanation for how traits were inherited — that gap wasn't closed until genetics arrived decades later.</p></div>
      </div>
    </div>

    <div class="theory">
      <span class="tag">1865–1953</span>
      <h3>Genetics &amp; the Structure of DNA</h3>
      <div class="dsr">
        <div><div class="lbl">The doubt</div><p>Mendel showed traits pass in predictable ratios, but no one knew what physical substance carried that information, or how it was copied.</p></div>
        <div><div class="lbl">The resolution</div><p>Watson, Crick, and Franklin's X-ray data revealed DNA's double helix, showing exactly how genetic information is stored and duplicated.</p></div>
        <div><div class="lbl">Where it's still being filled in</div><p>Most of the genome doesn't code for proteins, and its regulatory role is still being mapped.</p></div>
      </div>
    </div>

    <div class="theory">
      <span class="tag">1838–1858</span>
      <h3>Cell Theory</h3>
      <div class="dsr">
        <div><div class="lbl">The doubt</div><p>Plants and animals looked structurally unrelated under early microscopes, with no shared basic unit proposed.</p></div>
        <div><div class="lbl">The resolution</div><p>Schleiden, Schwann and Virchow established that all living things are made of cells, and all cells come from pre-existing cells.</p></div>
        <div><div class="lbl">Where it's tested at the edges</div><p>Viruses complicate the picture — they replicate but aren't made of cells and are not fully considered "alive."</p></div>
      </div>
    </div>

    <div class="inventions">
      <h4>What it produced</h4>
      <div class="timeline">
        <div class="tl-item"><span class="yr">1928</span><span class="desc">Penicillin, the first mass-produced antibiotic</span></div>
        <div class="tl-item"><span class="yr">1953</span><span class="desc">Recombinant insight that enabled genetic engineering decades later</span></div>
        <div class="tl-item"><span class="yr">1983</span><span class="desc">PCR, allowing DNA to be copied and read cheaply</span></div>
        <div class="tl-item"><span class="yr">2012</span><span class="desc">CRISPR gene editing, adapted from a bacterial immune system</span></div>
        <div class="tl-item"><span class="yr">2020</span><span class="desc">mRNA vaccines, translating genetic sequences directly into immunity</span></div>
      </div>
    </div>
  </div>
</section>

<section class="field" id="astronomy">
  <div class="container">
    <div class="field-head"><span class="field-num">04</span><h2>Astronomy &amp; Cosmology</h2></div>
    <p class="field-intro">Where we sit in the universe, and how the universe itself began.</p>

    <div class="theory">
      <span class="tag">1543</span>
      <h3>Heliocentrism</h3>
      <div class="dsr">
        <div><div class="lbl">The doubt</div><p>Planets appeared to move backward in the sky at times — a motion that made no sense if Earth sat still at the center.</p></div>
        <div><div class="lbl">The resolution</div><p>Copernicus placed the sun at the center; Galileo's telescope observations and Kepler's elliptical orbits confirmed it.</p></div>
        <div><div class="lbl">Where it was refined</div><p>The sun isn't the center of the universe either — it's an ordinary star in one arm of an ordinary galaxy.</p></div>
      </div>
    </div>

    <div class="theory">
      <span class="tag">1927–1965</span>
      <h3>The Big Bang</h3>
      <div class="dsr">
        <div><div class="lbl">The doubt</div><p>Hubble found distant galaxies moving away from us in every direction — implying the universe itself was expanding.</p></div>
        <div><div class="lbl">The resolution</div><p>Running that expansion backward implies a hot, dense origin; the 1965 discovery of the cosmic microwave background confirmed it directly.</p></div>
        <div><div class="lbl">Where it strains</div><p>What happened in the very first fraction of a second, and what caused the expansion to begin, remains unresolved.</p></div>
      </div>
    </div>

    <div class="inventions">
      <h4>What it produced</h4>
      <div class="timeline">
        <div class="tl-item"><span class="yr">1608</span><span class="desc">The telescope, and Galileo's refinements of it</span></div>
        <div class="tl-item"><span class="yr">1957</span><span class="desc">Sputnik, the first artificial satellite</span></div>
        <div class="tl-item"><span class="yr">1990</span><span class="desc">The Hubble Space Telescope</span></div>
        <div class="tl-item"><span class="yr">2021</span><span class="desc">The James Webb Space Telescope, imaging infrared light from the early universe</span></div>
      </div>
    </div>
  </div>
</section>

<section class="field" id="earth">
  <div class="container">
    <div class="field-head"><span class="field-num">05</span><h2>Earth &amp; Climate Science</h2></div>
    <p class="field-intro">The planet as a system of moving plates, cycling carbon, and shifting climate.</p>

    <div class="theory">
      <span class="tag">1912–1960s</span>
      <h3>Plate Tectonics</h3>
      <div class="dsr">
        <div><div class="lbl">The doubt</div><p>The coas

20,000 chars · codepastes.com