:root{--zc-background:#10292e;--zc-surface:#1c363a;--zc-ink:#f0eada;--zc-muted:#a7beb8;--zc-earth-muted:color-mix(in srgb,var(--zc-muted) 75%,var(--zc-ink));--zc-border:#395359;--zc-accent:#d8c292;--zc-accent-ink:#173035;color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:var(--zc-background);color:var(--zc-ink);font:15px/1.65 system-ui,sans-serif}main{max-width:1140px;margin:auto;padding:30px 30px 24px}header{display:flex;justify-content:space-between;align-items:center;gap:20px}.eyebrow{color:var(--zc-earth-muted);font-size:10px;letter-spacing:.17em;font-weight:700;margin:0}h1{font:clamp(35px,5vw,54px)/1.1 Georgia,serif;font-weight:400;margin:10px 0}h2{font:clamp(28px,3vw,38px)/1.2 Georgia,serif;font-weight:400;margin:14px 0 20px}#connection{font-size:11px;color:var(--zc-earth-muted)}.intro{max-width:690px;color:var(--zc-earth-muted);margin:12px 0 0}.world{display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:44px;min-height:430px}.sphere{position:relative;height:430px}canvas{display:block;width:100%;height:calc(100% - 24px);touch-action:pan-y;cursor:grab}.model{position:absolute;bottom:39px;left:0;width:100%;text-align:center;color:var(--zc-earth-muted);font-size:8px;letter-spacing:.12em;pointer-events:none}.turn{position:absolute;bottom:-1px;left:0;width:100%;display:flex;justify-content:center;align-items:center;gap:18px;font-size:11px;color:var(--zc-earth-muted)}button{font:inherit;border:1px solid var(--zc-border);border-radius:25px;background:var(--zc-surface);color:var(--zc-ink);min-height:44px;min-width:44px;padding:8px 17px;cursor:pointer}button:disabled{opacity:.45;cursor:default}button:focus-visible,canvas:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--zc-accent);outline-offset:4px}#explore{background:var(--zc-accent);color:var(--zc-accent-ink);border-color:transparent;margin-right:7px}#text{min-height:100px}.chapter-state{display:flex;gap:16px;align-items:center;margin:20px 0;font-size:11px;color:var(--zc-earth-muted)}progress{accent-color:var(--zc-accent);width:90px;height:5px}#hint{font-size:11px;color:var(--zc-earth-muted)}.timeline{margin-top:30px;border-top:1px solid var(--zc-border);padding-top:20px}.timeline label{font-size:12px;color:var(--zc-earth-muted)}input[type=range]{display:block;width:100%;min-height:44px;margin:0;accent-color:var(--zc-accent)}#chapters{display:grid;grid-template-columns:repeat(8,1fr);gap:7px}#chapters button{font-size:11px;padding:7px 4px;border-radius:10px}#chapters button[aria-current=true]{border-color:var(--zc-accent);color:var(--zc-accent)}#chapters button.done::before{content:'✓ ';color:var(--zc-accent)}.scale,details{font-size:11px;color:var(--zc-earth-muted)}footer{display:flex;justify-content:space-between;gap:12px;font-size:12px;margin-top:22px}#status{font-size:12px;color:var(--zc-earth-muted)}details{border-top:1px solid var(--zc-border);padding-top:8px}summary{min-height:44px;display:flex;align-items:center;cursor:pointer}@media(max-width:600px){main{padding:20px 18px}header{display:block}#connection{display:block;margin:10px 0}.intro{font-size:13px}.world{grid-template-columns:1fr;gap:12px}.sphere{height:330px}.model{font-size:7px;bottom:40px}article h2{font-size:30px;margin:10px 0 14px}#text{min-height:0;margin:0 0 16px;font-size:14px}.chapter-state{margin:14px 0}#chapters{grid-template-columns:repeat(4,1fr)}.timeline{margin-top:12px}footer{font-size:10px}.turn{bottom:0}.scale{font-size:10px}}
/* Each era is a chapter card beside a celestial instrument. */
body{background:radial-gradient(ellipse at 50% -14%,var(--zc-surface),transparent 56%),var(--zc-background)}
main{max-width:1240px}
header{padding-bottom:15px;border-bottom:1px solid var(--zc-border)}
h1{font-size:clamp(42px,5vw,65px)}
.intro{max-width:770px;margin:17px 0 12px;font:italic 17px/1.55 Georgia,serif;color:var(--zc-earth-muted)}
.world{grid-template-columns:minmax(0,1.16fr) minmax(300px,.84fr);gap:clamp(28px,5vw,65px);min-height:490px}
.sphere{height:480px;border:1px solid var(--zc-border);border-radius:50% 50% 5px 5px / 18% 18% 5px 5px;overflow:hidden;background:var(--zc-surface);box-shadow:0 28px 65px color-mix(in srgb,var(--zc-background) 55%,transparent)}
.sphere canvas{height:calc(100% - 47px)}
.model{bottom:54px;letter-spacing:.19em}
.turn{bottom:8px}
.world article{position:relative;padding:30px 0 30px 25px;border-left:1px solid var(--zc-border)}
.world article::before{content:"01 — 08 / CHAPTERS";position:absolute;left:25px;top:4px;color:var(--zc-earth-muted);font-size:9px;letter-spacing:.2em}
.world article h2{font-size:clamp(34px,3.8vw,49px);max-width:13ch}
#text{font:17px/1.65 Georgia,serif;max-width:37ch;min-height:135px}
.chapter-state{border-top:1px solid var(--zc-border);padding-top:17px}
#explore{border-radius:999px;min-width:175px}
#pause{border-radius:999px}
.timeline{position:relative;margin-top:40px;padding-top:25px}
.timeline::before{content:"A SCALE OF AGES";position:absolute;top:-18px;left:0;padding-right:12px;background:var(--zc-background);font-size:9px;letter-spacing:.18em;color:var(--zc-earth-muted)}
#chapters{position:relative;gap:5px;margin-top:7px}
#chapters button{border-radius:2px;min-height:58px;background:color-mix(in srgb,var(--zc-surface) 60%,transparent);text-align:left;padding:7px 9px}
#chapters button[aria-current=true]{background:var(--zc-surface);box-shadow:inset 0 3px 0 var(--zc-accent)}
footer{padding-top:15px;border-top:1px solid var(--zc-border)}
@media(max-width:600px){main{padding:18px 16px 26px}h1{font-size:44px}.intro{font-size:15px;margin:12px 0 16px}.world{grid-template-columns:1fr;gap:15px}.sphere{height:360px;border-radius:47% 47% 4px 4px / 18% 18% 4px 4px}.sphere canvas{height:calc(100% - 46px)}.world article{padding:21px 0 10px 17px}.world article::before{left:17px;top:0}.world article h2{font-size:34px;max-width:none}#text{font-size:16px;min-height:0}.timeline{margin-top:23px}#chapters{grid-template-columns:repeat(4,minmax(0,1fr))}#chapters button{min-height:58px;font-size:10px;padding:6px}footer{margin-top:16px}}
@media(max-width:600px){main{padding:12px 14px 22px}header{padding-bottom:7px}header h1{font-size:34px;line-height:1.02;margin:4px 0}#connection{margin:3px 0;font-size:10px}.intro{font:italic 12px/1.3 Georgia,serif;margin:7px 0 9px}.world{gap:8px}.sphere{height:265px}.sphere canvas{height:calc(100% - 38px)}.model{bottom:43px}.world article{display:grid;grid-template-columns:1fr 1fr;gap:5px 8px;padding:10px 0 0;border-left:0;border-top:1px solid var(--zc-border)}.world article::before{display:none}.world article #age,.world article h2,.world article #text,.world article .chapter-state,.world article #hint{grid-column:1/-1}.world article h2{font-size:27px;line-height:1.1;margin:0 0 2px}.world article #explore{grid-column:1;grid-row:3;margin:0;min-width:0;padding:7px}.world article #pause{grid-column:2;grid-row:3;padding:7px}.world article #text{grid-row:4;font-size:14px;line-height:1.5;margin:5px 0}.world article .chapter-state{grid-row:5;margin:5px 0}.world article #hint{grid-row:6;margin:2px 0}.timeline{margin-top:15px}}
:root{--zc-scene-caption:#c8ddd4;--zc-scene-control:#173b42}
.sphere .model{color:var(--zc-scene-caption);font-size:10px}
.sphere .turn{color:var(--zc-scene-caption)}
.sphere .turn button{color:var(--zc-scene-caption);background:var(--zc-scene-control);border-color:color-mix(in srgb,var(--zc-scene-caption) 35%,transparent)}
@media(max-width:600px){.sphere .model{font-size:9px}}

/* Round two: a deep-space observatory with one luminous chapter in focus. */
:root{--zc-cosmos:#101323;--zc-cosmos-haze:#25233f;--zc-cosmos-ink:#f1e8cf;--zc-cosmos-muted:#bcb9b1;--zc-cosmos-gold:#e8c986;--zc-cosmos-line:#5b5870}
body{background:radial-gradient(ellipse at 56% 28%,var(--zc-cosmos-haze),var(--zc-cosmos) 70%);color:var(--zc-cosmos-ink)}
main{max-width:1400px;padding:18px 35px 29px}
header{border-color:var(--zc-cosmos-line);padding:5px 0 12px}
header .eyebrow,#connection{color:var(--zc-cosmos-muted)}
h1{font:400 clamp(42px,5.5vw,76px)/1 Georgia,serif;color:var(--zc-cosmos-gold);letter-spacing:-.055em;margin:4px 0 0}
.intro{font:13px/1.5 system-ui,sans-serif;color:var(--zc-cosmos-muted);margin:11px 0 16px;max-width:80ch}
.world{position:relative;grid-template-columns:minmax(0,1.25fr) minmax(285px,.75fr);gap:clamp(20px,4vw,70px);min-height:clamp(480px,60vh,630px);background:radial-gradient(circle at 31% 48%,color-mix(in srgb,var(--zc-cosmos-haze) 77%,transparent),transparent 44%),radial-gradient(circle at 6% 18%,var(--zc-cosmos-gold) 0 1px,transparent 2px),radial-gradient(circle at 79% 16%,var(--zc-cosmos-ink) 0 1px,transparent 2px),radial-gradient(circle at 94% 71%,var(--zc-cosmos-muted) 0 1px,transparent 2px),radial-gradient(circle at 53% 82%,var(--zc-cosmos-ink) 0 1px,transparent 2px)}
.world::before{content:"OBSERVATORY  /  4.54 BILLION YEARS";position:absolute;top:16px;left:15px;font:9px system-ui,sans-serif;letter-spacing:.23em;color:var(--zc-cosmos-muted);pointer-events:none}
.sphere{height:clamp(450px,56vh,590px);border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
.sphere canvas{height:calc(100% - 40px)}
.sphere .model{bottom:52px;color:var(--zc-cosmos-muted)}
.sphere .turn{bottom:4px;color:var(--zc-cosmos-muted)}
.sphere .turn button{background:color-mix(in srgb,var(--zc-cosmos-haze) 90%,transparent);color:var(--zc-cosmos-ink);border-color:var(--zc-cosmos-line)}
.world article{z-index:1;border:0;padding:38px 24px 20px 0;background:transparent;color:var(--zc-cosmos-ink)}
.world article::before{content:"01 — 08  /  A GEOLOGIC JOURNEY";left:0;top:10px;color:var(--zc-cosmos-muted)}
.world article .eyebrow{color:var(--zc-cosmos-gold)}
.world article h2{font-size:clamp(38px,4.2vw,60px);line-height:1.02;color:var(--zc-cosmos-ink);margin:16px 0 19px}
#text{font:16px/1.75 Georgia,serif;color:var(--zc-cosmos-ink);min-height:145px}
.chapter-state{border-color:var(--zc-cosmos-line);color:var(--zc-cosmos-muted)}
#explore{background:var(--zc-cosmos-gold);color:var(--zc-cosmos);border-color:var(--zc-cosmos-gold);border-radius:2px}
#pause{background:transparent;color:var(--zc-cosmos-ink);border-color:var(--zc-cosmos-line);border-radius:2px}
#hint{color:var(--zc-cosmos-muted)}
.timeline{border-color:var(--zc-cosmos-line);margin-top:14px;padding-top:18px}
.timeline::before{background:var(--zc-cosmos);color:var(--zc-cosmos-muted)}
.timeline label,.scale,details,#status{color:var(--zc-cosmos-muted)}
input[type=range],progress{accent-color:var(--zc-cosmos-gold)}
#chapters{gap:0;border-left:1px solid var(--zc-cosmos-line);border-top:1px solid var(--zc-cosmos-line)}
#chapters button{min-height:52px;background:transparent;color:var(--zc-cosmos-muted);border:0;border-right:1px solid var(--zc-cosmos-line);border-bottom:1px solid var(--zc-cosmos-line);border-radius:0;box-shadow:none!important}
#chapters button[aria-current=true]{background:color-mix(in srgb,var(--zc-cosmos-gold) 15%,transparent);color:var(--zc-cosmos-gold);box-shadow:inset 0 3px 0 var(--zc-cosmos-gold)!important}
footer,details{border-color:var(--zc-cosmos-line)}
@media(max-width:600px){main{padding:10px 13px 22px}header{padding:2px 0 6px}h1{font-size:35px}#connection{margin:3px 0}.intro{font:11px/1.35 system-ui,sans-serif;margin:6px 0}.world{grid-template-columns:1fr;gap:0;min-height:0}.world::before{top:5px;left:5px;font-size:7px}.sphere{height:252px}.sphere canvas{height:calc(100% - 34px)}.sphere .model{bottom:37px;font-size:8px}.sphere .turn{bottom:0}.world article{display:grid;grid-template-columns:1fr 1fr;gap:4px 8px;padding:7px 0 10px;border:0;border-top:1px solid var(--zc-cosmos-line)}.world article::before{display:none}.world article #age,.world article h2,.world article #text,.world article .chapter-state,.world article #hint{grid-column:1/-1}.world article h2{font-size:29px;margin:0}.world article #explore{grid-column:1;grid-row:3;margin:0;padding:6px;min-width:0}.world article #pause{grid-column:2;grid-row:3;padding:6px}.world article #text{grid-row:4;font-size:13px;line-height:1.5;margin:6px 0}.world article .chapter-state{grid-row:5;margin:5px 0}.timeline{margin-top:12px;padding-top:15px}#chapters{grid-template-columns:repeat(4,minmax(0,1fr))}#chapters button{min-height:42px;font-size:9px}}

/* The globe and chapter share the remaining height; timeline and sources scroll locally. */
html,body{height:100%;overflow:hidden}
main{height:100dvh;max-height:100dvh;display:flex;flex-direction:column;overflow:hidden;padding-bottom:5px}
header,.intro,footer,#status,details{flex:none}
.world{flex:1 1 0;min-height:0}
.sphere{height:100%;min-height:0}
.world article{height:100%;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.timeline{flex:0 1 146px;min-height:78px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
details{max-height:47px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.world article:focus-visible,.timeline:focus-visible,details:focus-visible{outline:2px solid var(--zc-cosmos-gold);outline-offset:-2px}
@media(max-width:600px){main{padding:5px 9px}.intro{margin:3px 0;font-size:10px}.world{display:flex;flex-direction:column}.sphere{flex:0 0 42%;height:42%;min-height:0}.sphere canvas{height:calc(100% - 30px)}.world article{flex:1 1 0;height:auto;min-height:0;padding:4px 0}.world article h2{font-size:23px}.world article #text{font-size:11px;line-height:1.35;margin:3px 0}.world article #explore,.world article #pause{min-height:38px}.timeline{flex:0 1 112px;min-height:65px;margin-top:4px;padding-top:5px}.timeline #chapters button{min-height:34px}footer,#status{margin:1px 0}details{max-height:40px}}
@media(min-width:601px) and (max-height:760px){main{padding:8px 22px 4px}header{padding:2px 0 6px}h1{font-size:clamp(36px,4vw,52px)}.intro{font-size:11px;margin:5px 0 7px;max-width:none}.world article{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:min-content;gap:4px 8px;align-content:start;padding:22px 4px 4px 0}.world article::before{top:4px;font-size:8px}#age{grid-column:1/-1;grid-row:1}#explore{grid-column:1;grid-row:2;min-height:38px;min-width:0}#pause{grid-column:2;grid-row:2;min-height:38px}.world article h2{grid-column:1/-1;grid-row:3;font-size:clamp(25px,3vw,34px);margin:4px 0}#text{grid-column:1/-1;grid-row:4;min-height:0;font-size:12px;line-height:1.35}.chapter-state{grid-column:1/-1;grid-row:5}#hint{grid-column:1/-1;grid-row:6}.timeline{flex-basis:90px;min-height:56px;margin-top:4px;padding-top:5px}.timeline::before{display:none}.timeline label{line-height:1.2}input[type=range]{min-height:22px}#chapters{margin-top:2px}#chapters button{min-height:36px}details{max-height:32px}}