@font-face{font-family:"Newsreader";font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/newsreader-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/newsreader-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/newsreader-italic-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/newsreader-italic-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/IBMPlexMono-Regular.woff2) format("woff2")}

/* Light: paper and basalt. Dark: the planet at night. The cross-section keeps its rock colours in both. */
:root{
  --bg:#f2ede3;--bg-2:#e8e0d0;--card:#fbf8f2;--ink:#17130f;--ink-2:#3d352c;--rule:#cdbfa6;--rule-2:#8a7c66;
  --accent:#7a2c00;--link:#1f3f8f;--hot:#a33a00;
  --bar-bg:rgba(242,237,227,.93);
  --e-space:#efe8da;--e-sky:#d7e2ea;--e-atm:rgba(120,160,210,.45);--e-ink:#17130f;--e-ink-2:#3d352c;--e-tunnel:#17130f;--e-faller:#0b62d6;
  --e-crust-0:#8c7a64;--e-crust-1:#6f5f4c;--e-um-0:#b0532b;--e-um-1:#a14a24;--e-tz-0:#b95a26;--e-tz-1:#b15324;
  --e-lm-0:#c46a2a;--e-lm-1:#d9822e;--e-oc-0:#f09a2e;--e-oc-1:#ffc056;--e-ic-0:#ffe39a;--e-ic-1:#fff6dc;
  --g-sea:#cfdce6;--g-land:#8c7a64;--g-grid:rgba(23,19,15,.14);--g-border:rgba(242,237,227,.8);--g-rim:#3d352c;
  --chart-prem:#a33a00;--chart-uni:#3d352c;--band-a:rgba(140,122,100,.14);--band-b:rgba(240,154,46,.16);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#0b0a0c;--bg-2:#151216;--card:#1a161a;--ink:#f1ebe2;--ink-2:#cfc4b6;--rule:#3a3238;--rule-2:#7b6e6a;
  --accent:#ffb061;--link:#a8c4ff;--hot:#ffb061;--bar-bg:rgba(11,10,12,.9);
  --e-space:#070609;--e-sky:#0c1422;--e-atm:rgba(90,140,230,.5);--e-ink:#f6efe4;--e-ink-2:#d5c9b8;--e-tunnel:#050406;--e-faller:#7fd4ff;
  --e-crust-0:#5b4d40;--e-crust-1:#463b31;--e-um-0:#7a2c14;--e-um-1:#6c2711;--e-tz-0:#8a3314;--e-tz-1:#832f12;
  --e-lm-0:#983a14;--e-lm-1:#bb5217;--e-oc-0:#e2761c;--e-oc-1:#ffae3d;--e-ic-0:#ffd98a;--e-ic-1:#fff4d6;
  --g-sea:#122033;--g-land:#6d5c4a;--g-grid:rgba(241,235,226,.12);--g-border:rgba(11,10,12,.7);--g-rim:#cfc4b6;
  --chart-prem:#ffb061;--chart-uni:#cfc4b6;--band-a:rgba(140,122,100,.16);--band-b:rgba(255,174,61,.12);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0b0a0c;--bg-2:#151216;--card:#1a161a;--ink:#f1ebe2;--ink-2:#cfc4b6;--rule:#3a3238;--rule-2:#7b6e6a;
    --accent:#ffb061;--link:#a8c4ff;--hot:#ffb061;--bar-bg:rgba(11,10,12,.9);
    --e-space:#070609;--e-sky:#0c1422;--e-atm:rgba(90,140,230,.5);--e-ink:#f6efe4;--e-ink-2:#d5c9b8;--e-tunnel:#050406;--e-faller:#7fd4ff;
    --e-crust-0:#5b4d40;--e-crust-1:#463b31;--e-um-0:#7a2c14;--e-um-1:#6c2711;--e-tz-0:#8a3314;--e-tz-1:#832f12;
    --e-lm-0:#983a14;--e-lm-1:#bb5217;--e-oc-0:#e2761c;--e-oc-1:#ffae3d;--e-ic-0:#ffd98a;--e-ic-1:#fff4d6;
    --g-sea:#122033;--g-land:#6d5c4a;--g-grid:rgba(241,235,226,.12);--g-border:rgba(11,10,12,.7);--g-rim:#cfc4b6;
    --chart-prem:#ffb061;--chart-uni:#cfc4b6;--band-a:rgba(140,122,100,.16);--band-b:rgba(255,174,61,.12);
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.1875rem/1.62 "Newsreader",Georgia,serif;font-optical-sizing:auto}
body.living{overflow:hidden}
a{color:var(--link);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:3px}
img{max-width:100%;height:auto;display:block}
b,strong{font-weight:640}
.num,.mono{font-family:"Plex Mono",ui-monospace,monospace;font-size:.86em;letter-spacing:-.01em}
.skip{position:absolute;left:-999px;top:0;background:var(--card);color:var(--ink);padding:.5rem .8rem;z-index:99}
.skip:focus{left:.5rem;top:.5rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- top bar ---- */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:.9rem;height:3rem;padding:0 1rem;background:var(--bar-bg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--rule);font:500 .9rem/1 "Newsreader",Georgia,serif;white-space:nowrap}
.topbar a{color:var(--ink);text-decoration:none}
.home{font-weight:640;flex:none}
.topnav{display:flex;gap:1rem;overflow-x:auto;scrollbar-width:none;min-width:0;flex:1 1 auto}
.topnav::-webkit-scrollbar{display:none}
.topnav a{color:var(--ink-2);padding:.4rem 0;border-bottom:2px solid transparent}
.topnav a[aria-current]{color:var(--ink);border-bottom-color:var(--accent)}
.spacer{flex:0 0 0}
.chip{flex:none;border:1px solid var(--rule-2);border-radius:999px;padding:.35rem .7rem;font-size:.82rem}
.icon-btn{flex:none;display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;border:1px solid var(--rule-2);background:transparent;color:var(--ink);cursor:pointer;padding:0}
.icon-btn svg{display:block}
.icon-btn svg[hidden]{display:none}
section[id]{scroll-margin-top:3.4rem}

/* ---- reading rail ---- */
.rail{position:fixed;right:.9rem;top:50%;transform:translateY(-50%);z-index:20;display:none;flex-direction:column;gap:.55rem;align-items:flex-end}
.rail a{display:flex;align-items:center;gap:.5rem;color:var(--ink-2);text-decoration:none;font-size:.78rem}
.rail a span{opacity:0;transition:opacity .2s;background:var(--card);padding:.1rem .4rem;border-radius:4px}
.rail a:hover span,.rail a:focus-visible span,.rail a[aria-current] span{opacity:1}
.rail a i{display:block;width:.5rem;height:.5rem;border-radius:50%;border:1.5px solid var(--rule-2)}
.rail a[aria-current] i{background:var(--accent);border-color:var(--accent)}
@media (min-width:1180px){.rail{display:flex}}

/* ---- the fall: sticky cross-section with steps over it ---- */
.fall{position:relative;background:var(--e-space)}
.stage{position:sticky;top:3rem;height:calc(100vh - 3rem);height:calc(100svh - 3rem);overflow:hidden}
.stage canvas{display:block;width:100%;height:100%}
.steps{position:relative;margin-top:calc(-100vh + 3rem);margin-top:calc(-100svh + 3rem);z-index:2;pointer-events:none}
.step{min-height:95vh;min-height:95svh;display:flex;align-items:center;padding:0 1rem}
.step>*{pointer-events:auto}
.card{max-width:26rem;background:var(--card);border:1px solid var(--rule);border-radius:10px;padding:1.05rem 1.2rem;box-shadow:0 12px 40px rgba(0,0,0,.18);transition:opacity .35s}
.step:not(.on) .card{opacity:.72}
@media (prefers-reduced-motion:reduce){.card{transition:none}}
.card p{margin:.3rem 0}
.stamp{font:500 .82rem/1 "Plex Mono",ui-monospace,monospace;color:var(--accent);letter-spacing:.02em}
@media (min-width:900px){.step{padding-left:max(4vw,2rem)}.card{max-width:27rem}}
@media (max-width:899px){.step{align-items:flex-end;padding-bottom:5.5rem}.card{margin:0 auto}}
.hero{min-height:100vh;min-height:100svh;align-items:flex-start;padding-top:8vh}
.hero-inner{max-width:40rem;background:color-mix(in srgb,var(--e-space) 72%,transparent);border-radius:14px;padding:1rem 1.2rem 1.3rem;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.kicker{font:500 .85rem/1.2 "Plex Mono",ui-monospace,monospace;color:var(--accent);letter-spacing:.04em;margin:0 0 .6rem}
h1{font:620 clamp(2.4rem,6.6vw,4.7rem)/1.02 "Newsreader",Georgia,serif;letter-spacing:-.025em;margin:0 0 1rem;color:var(--ink);text-wrap:balance}
.lede{font-size:clamp(1.12rem,2.1vw,1.35rem);line-height:1.5;margin:0 0 1.2rem;color:var(--ink)}
.cta{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.btn{font:600 1rem/1 "Newsreader",Georgia,serif;border-radius:999px;padding:.8rem 1.15rem;border:1.5px solid var(--ink);background:var(--ink);color:var(--bg);cursor:pointer;text-decoration:none;display:inline-flex;gap:.5rem;align-items:center}
.btn.ghost{background:transparent;color:var(--ink)}
.btn .mono{font-size:.8rem;opacity:.9}
.btn[disabled]{opacity:.5;cursor:default}
.earth-failed .btn[data-a=live]{display:none}
.hud{position:absolute;right:1rem;top:1rem;z-index:3;display:grid;grid-template-columns:auto auto;gap:.15rem .9rem;align-items:baseline;background:color-mix(in srgb,var(--card) 90%,transparent);border:1px solid var(--rule);border-radius:10px;padding:.65rem .85rem;font:400 .8rem/1.35 "Plex Mono",ui-monospace,monospace;color:var(--ink);opacity:0;transition:opacity .3s;pointer-events:none;min-width:15.5rem}
.hud.shown{opacity:1}
.hud dt{color:var(--ink-2)}
.hud dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.hud .big{grid-column:1/-1;font-size:1.6rem;line-height:1.1;text-align:left;color:var(--accent);margin-bottom:.2rem}
@media (min-width:900px){.fall .hud{left:auto;right:1.2rem;top:1.2rem}}
@media (max-width:899px){.fall .hud{left:.6rem;right:.6rem;top:.6rem;grid-template-columns:repeat(4,auto);min-width:0;font-size:.72rem;gap:.05rem .5rem}.fall .hud .big{grid-column:auto;font-size:1.05rem;margin:0}.fall .hud .hx{display:none}}
.earth-failed .hud{display:none}

/* ---- live mode ---- */
.live{position:fixed;inset:0;z-index:50;background:var(--e-space);display:flex;flex-direction:column}
.live[hidden]{display:none}
.live canvas{flex:1;width:100%;min-height:0;display:block}
.live .hud{opacity:1;top:1rem;left:1rem;right:auto}
.live .hud .big{font-size:2.6rem}
.live-bar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:space-between;padding:.7rem 1rem;border-top:1px solid var(--rule);background:var(--card)}
.live-line{margin:0;flex:1 1 18rem;font-size:1.02rem;min-height:1.6em}
.live-ctl{display:flex;gap:.4rem;flex-wrap:wrap}
.live-ctl button{font:500 .85rem/1 "Plex Mono",ui-monospace,monospace;padding:.55rem .75rem;border-radius:999px;border:1px solid var(--rule-2);background:transparent;color:var(--ink);cursor:pointer}
.live-ctl button[aria-pressed=true]{background:var(--ink);color:var(--bg)}
@media (max-width:640px){.live .hud{left:.5rem;right:.5rem;top:.5rem}.live .hud .big{font-size:1.9rem}}

/* ---- reading blocks ---- */
.block{max-width:44rem;margin:0 auto;padding:4.5rem 1.1rem 1rem}
.wide{max-width:70rem}
.block h2{font:620 clamp(1.8rem,4vw,2.7rem)/1.08 "Newsreader",Georgia,serif;letter-spacing:-.018em;margin:0 0 1.1rem;text-wrap:balance}
.block h3{font:640 1.25rem/1.25 "Newsreader",Georgia,serif;margin:2rem 0 .5rem}
.eyebrow{font:500 .8rem/1.2 "Plex Mono",ui-monospace,monospace;color:var(--accent);letter-spacing:.05em;margin:0 0 .5rem;text-transform:uppercase}
.anchor{color:inherit;text-decoration:none}
.anchor:hover::after{content:" #";color:var(--rule-2)}
.prose{max-width:40rem}
.prose p{margin:0 0 1rem}
.pull{font:500 clamp(1.4rem,3vw,1.9rem)/1.3 "Newsreader",Georgia,serif;border-left:3px solid var(--accent);padding-left:1rem;margin:2rem 0}

figure{margin:1.8rem 0}
figcaption{font-size:.96rem;line-height:1.5;color:var(--ink-2);margin-top:.6rem}
.chart svg{width:100%;height:auto;display:block;overflow:visible;touch-action:pan-y}
.chart text{font:400 12px "Plex Mono",ui-monospace,monospace;fill:var(--ink-2)}
.chart .lab{fill:var(--ink);font-size:13px}
.chart .axis{stroke:var(--rule-2);stroke-width:1}
.chart .grid{stroke:var(--rule);stroke-width:1;stroke-dasharray:2 4}
.chart .prem{fill:none;stroke:var(--chart-prem);stroke-width:3}
.chart .uni{fill:none;stroke:var(--chart-uni);stroke-width:1.6;stroke-dasharray:6 5}
.chart .band-a{fill:var(--band-a)}.chart .band-b{fill:var(--band-b)}
.chart .cursor{stroke:var(--ink);stroke-width:1;opacity:0}
.chart .cursor-dot{fill:var(--chart-prem);opacity:0}.chart .cursor-dot-u{fill:var(--chart-uni);opacity:0}
.live-chart .cursor,.live-chart .cursor-dot,.live-chart .cursor-dot-u{opacity:1}
.readout{font:400 .88rem/1.45 "Plex Mono",ui-monospace,monospace;color:var(--ink);min-height:2.9em;margin:.4rem 0 0}
.massrow{display:flex;gap:.6rem;align-items:center;margin:.2rem 0 .8rem;font-size:1rem}
.massrow input{width:5.5rem;font:500 1rem "Plex Mono",ui-monospace,monospace;padding:.45rem .5rem;border-radius:6px;border:1px solid var(--rule-2);background:var(--card);color:var(--ink)}

.thirds .seg-a{fill:var(--e-lm-0)}.thirds .seg-b{fill:var(--e-oc-0)}
.thirds text.in{fill:#17130f;font-size:13px}
.thirds text.cap{fill:var(--ink);font:600 14px "Newsreader",Georgia,serif}

/* globes */
.globes{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;align-items:start}
.globes figure{margin:0}
.globes canvas{width:100%;aspect-ratio:1;display:block;border-radius:50%;touch-action:none}
#globe-a{cursor:grab}
#globe-a:active{cursor:grabbing}
.globes figcaption{text-align:center}
.globe-ctl{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:1rem 0}
.globe-ctl select{font:500 1rem "Newsreader",Georgia,serif;padding:.5rem .6rem;border-radius:6px;border:1px solid var(--rule-2);background:var(--card);color:var(--ink);max-width:100%}
.exit-out{min-height:5.2em}
.exit-out p{margin:.2rem 0}
.exit-to{font-size:1.25rem;font-weight:560}
.globes-wrap:not(.ready) .globes,.globes-wrap:not(.ready) .globe-ctl{display:none}
.globes-wrap.ready .globes-fallback{display:none}
@media (max-width:600px){.globes{gap:.6rem}}

/* chords */
.chords{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:1.5rem;align-items:center}
@media (max-width:800px){.chords{grid-template-columns:1fr}}
.chords svg{width:100%;height:auto;max-width:30rem;margin:0 auto;display:block}
.chords .globe-disc{fill:var(--e-lm-0)}
.chords .core-disc{fill:var(--e-oc-0)}
.chords .icore-disc{fill:var(--e-ic-0)}
.chords .chord{stroke:var(--ink);stroke-width:1.5;opacity:.45;cursor:pointer}
.chords .chord.on{stroke:var(--e-faller);stroke-width:3.5;opacity:1}
.chords .bead{fill:var(--e-faller);stroke:var(--bg);stroke-width:2}
.chords .city{fill:var(--ink)}
.chords .clab{font:400 12px "Plex Mono",ui-monospace,monospace;fill:var(--ink)}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{text-align:right;padding:.45rem .5rem;border-bottom:1px solid var(--rule);font-variant-numeric:tabular-nums}
th:first-child,td:first-child{text-align:left}
th{font:500 .78rem/1.25 "Plex Mono",ui-monospace,monospace;color:var(--ink-2);vertical-align:bottom}
tr[data-id]{cursor:pointer}
tr[aria-selected=true] td{background:var(--bg-2)}
tr[aria-selected=true] td:first-child{box-shadow:inset 3px 0 0 var(--e-faller)}
.tablewrap{overflow-x:auto}

/* depth ribbon */
.ribbon svg{width:100%;height:auto}
.ribbon .col{fill:var(--bg-2);stroke:var(--rule-2)}
.ribbon .kola{stroke:var(--hot);stroke-width:2}
.ribbon text{font:400 12px "Plex Mono",ui-monospace,monospace;fill:var(--ink)}

/* people */
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1.4rem;margin-top:1.5rem}
.person{margin:0;display:flex;flex-direction:column;gap:.5rem}
.person img{border-radius:6px;background:var(--bg-2);aspect-ratio:4/3;object-fit:cover;width:100%}
.person.tall img{aspect-ratio:3/4;object-fit:cover}
.person .yr{font:500 .85rem/1 "Plex Mono",ui-monospace,monospace;color:var(--accent)}
.person p{margin:0;font-size:1rem;line-height:1.5}
.person .cr{font-size:.78rem;color:var(--ink-2)}
blockquote{margin:1rem 0;padding:0 0 0 1rem;border-left:2px solid var(--rule-2);font-style:italic}

.photo{margin:2rem 0}
.photo img{border-radius:6px}
.srcs{padding-left:1.1rem;font-size:.95rem}
.srcs li{margin:.35rem 0}
.method{font-size:1rem}
.foot{max-width:44rem;margin:3rem auto 0;padding:2rem 1.1rem 3rem;border-top:1px solid var(--rule);font-size:.95rem;color:var(--ink-2)}
.foot a{color:var(--ink-2)}
.nf main{max-width:36rem;margin:20vh auto;padding:0 1rem}
.srcs a,.cr a{overflow-wrap:anywhere}
.chords svg{overflow:hidden}
td{white-space:nowrap}
.chords>*{min-width:0}@media (max-width:800px){.chords{grid-template-columns:minmax(0,1fr)}}
.answer{font-size:1.02rem;line-height:1.5;margin:1rem 0 0;color:var(--ink)}
.note{font-size:.9rem;color:var(--ink-2)}
.constg .uni-bar{fill:#cdbfa6}.constg .cg-bar{fill:#e0924a}.constg .prem-bar{fill:#ffc056}
.constg text.in{fill:#17130f;font-weight:600}
@media (max-width:420px){.home{display:none}}