@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")}

/* The night sky stays dark in both themes, with light type on it; the page around it follows the theme. */
:root{
  --bg:#f4f2ec;--card:#fffdf8;--ink:#15161f;--ink-2:#3d3f4f;--rule:#d6d3c8;--rule-2:#7b7d8c;
  --link:#2d3a8c;--bar-bg:rgba(244,242,236,.9);
  --s-ink:#f5f2ea;--s-ink-2:#cfd0e2;--s-acc:#f3d99e;--s-glass:rgba(7,10,26,.62);--s-rule:rgba(220,225,255,.16);
  --moon-lit:#ece8dc;--moon-dark:#252a44;--bar-up:#f3d99e;--bar-dn:#9fb2ff;
  color-scheme:light;
}
:root[data-theme="dark"]{--bg:#080b18;--card:#0f1326;--ink:#eeece6;--ink-2:#c3c4d6;--rule:#262b45;--rule-2:#7d80a0;--link:#b9c6ff;--bar-bg:rgba(8,11,24,.86);color-scheme:dark}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#080b18;--card:#0f1326;--ink:#eeece6;--ink-2:#c3c4d6;--rule:#262b45;--rule-2:#7d80a0;--link:#b9c6ff;--bar-bg:rgba(8,11,24,.86);color-scheme:dark}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#070a18;color:var(--ink);font:400 1.1875rem/1.6 "Newsreader",Georgia,serif;font-optical-sizing:auto;overflow-x:hidden}
a{color:var(--link);text-underline-offset:.18em;text-decoration-thickness:1px}
:focus-visible{outline:3px solid var(--s-acc);outline-offset:3px;border-radius:4px}
b,strong{font-weight:620}
.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}
section[id],header[id],.ch{scroll-margin-top:3.5rem}
.hero{padding-bottom:5.5rem!important}
[hidden]{display:none!important}
html:not(.js) .js-only{display:none!important}
.nojs-note{display:none}
html:not(.js) .nojs-note{display:block;color:var(--s-ink-2);font-size:1rem;max-width:32rem}

/* ---- top bar ---- */
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:.9rem;height:2.75rem;padding:0 1rem;background:var(--bar-bg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--rule);font-size:.9rem}
.topbar a{color:var(--ink);text-decoration:none}
.topbar .home{font-weight:600;white-space:nowrap}
.topnav{display:flex;gap:1rem;overflow-x:auto;scrollbar-width:none;min-width:0;flex:0 1 auto}
.topnav::-webkit-scrollbar{display:none}
.topnav a{white-space:nowrap;color:var(--ink-2)}
.topnav a:hover,.topnav a[aria-current="true"]{color:var(--ink);text-decoration:underline}
.spacer{flex:1 1 0}
.chip{border:1px solid var(--rule-2);border-radius:99px;padding:.1rem .6rem;font-size:.82rem;white-space:nowrap}
.icon-btn{display:inline-grid;place-items:center;width:2.75rem;height:2.75rem;margin-right:-.6rem;background:none;border:0;color:var(--ink);cursor:pointer;border-radius:50%}
.icon-btn svg[hidden]{display:none}
@media (max-width:720px){.topnav{display:none}.topbar{gap:.6rem}}

/* ---- reading rail ---- */
.rail{position:fixed;right:.9rem;top:50%;transform:translateY(-50%);z-index:30;display:flex;flex-direction:column;gap:.55rem}
.rail a{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;text-decoration:none;color:var(--s-ink-2);font-size:.8rem;min-height:24px}
.rail a span{opacity:0;transform:translateX(6px);transition:opacity .2s,transform .2s;background:var(--s-glass);color:var(--s-ink);padding:.1rem .5rem;border-radius:4px;white-space:nowrap}
.rail a:hover span,.rail a:focus-visible span{opacity:1;transform:none}
.rail i{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--s-ink-2);flex:none;transition:background .2s,transform .2s}
.rail a[aria-current="true"] i{background:var(--s-acc);border-color:var(--s-acc);transform:scale(1.35)}
@media (max-width:900px){.rail{display:none}}

/* ---- the sky ---- */
.stage{position:fixed;inset:0;z-index:0;background:radial-gradient(ellipse at 70% 40%,#1a2146 0%,#0b1026 45%,#05070f 100%)}
.stage canvas{display:block;width:100%;height:100%}
.stage .still{display:none;position:absolute}
html.no-gl .stage canvas{display:none}
html.no-gl .stage .still,html:not(.js) .stage .still{display:block}
main,.foot{position:relative;z-index:1}
.stage .still.south{transform:rotate(180deg)}

/* ---- opening: the Moon tonight ---- */
.hero{min-height:calc(100svh - 2.75rem);display:flex;flex-direction:column;justify-content:center;padding:2rem max(16px,6vw) 3rem;color:var(--s-ink);max-width:40rem;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.kicker{font:400 .8rem/1.3 "Plex Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--s-acc);margin:0 0 1rem}
.hero h1{font-weight:300;font-size:clamp(2.6rem,6.4vw,5.4rem);line-height:1;letter-spacing:-.02em;margin:0 0 1.2rem;text-wrap:balance;text-shadow:0 2px 30px rgba(0,0,10,.7)}
.deck{font-size:clamp(1.12rem,2vw,1.35rem);line-height:1.5;max-width:31rem;margin:0 0 1.6rem;text-shadow:0 1px 18px rgba(0,0,10,.8)}
.when{background:var(--s-glass);border:1px solid var(--s-rule);border-radius:16px;padding:1rem 1.1rem;max-width:31rem;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);user-select:auto;-webkit-user-select:auto}
.when label{display:block;font:400 .78rem/1 "Plex Mono",ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--s-ink-2);margin:0 0 .6rem}
.when .row{display:flex;gap:.6rem;flex-wrap:wrap}
.when input{font:inherit;font-size:1.1rem;min-height:2.9rem;padding:.35rem .8rem;border-radius:10px;border:1px solid rgba(220,225,255,.35);background:rgba(255,255,255,.07);color:var(--s-ink);color-scheme:dark;flex:1 1 11rem;min-width:0}
.when .fine{margin:.7rem 0 0}
.err{color:#ffc9b8}
.btn{font:inherit;font-size:1rem;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:2.9rem;padding:.5rem 1.15rem;border-radius:99px;border:1px solid var(--s-rule);background:rgba(230,235,255,.08);color:var(--s-ink);cursor:pointer;transition:background .2s}
.btn:hover{background:rgba(230,235,255,.16)}
.btn.primary{background:#f3eee0;color:#10132a;border-color:#f3eee0;font-weight:560}
.btn.primary:hover{background:#fff}
.fine{font-size:.92rem;color:var(--s-ink-2);max-width:31rem;margin:1rem 0 0}
.drag{font-size:.95rem;color:var(--s-ink-2);margin:1.2rem 0 0;text-shadow:0 1px 12px rgba(0,0,10,.9)}
@media (max-width:1001px),(max-aspect-ratio:20/23){
  .hero{justify-content:flex-end;padding-top:calc(min(27vh,52vw) + min(34vw,19vh) + 4rem)}
  .hero h1{font-size:clamp(2.3rem,11vw,3.4rem)}
}

/* ---- the story ---- */
.chapter{padding:0 max(16px,6vw)}
.ch{font-weight:300;font-size:clamp(2rem,5vw,3.3rem);line-height:1.05;letter-spacing:-.01em;color:var(--s-ink);max-width:40rem;margin:0;padding:26vh 0 4vh;text-wrap:balance;text-shadow:0 2px 26px rgba(0,0,10,.8)}
.ch a,.block h2 a{color:inherit;text-decoration:none}
.ch a:hover::after,.block h2 a:hover::after{content:" #";color:var(--s-acc);font-size:.6em}
.step{min-height:70vh;display:flex;align-items:center;padding:5vh 0}
.card{max-width:33rem;background:var(--s-glass);color:var(--s-ink);padding:1.4rem 1.6rem;border-radius:16px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--s-rule)}
.card p{margin:0 0 .9rem}.card p:last-child{margin-bottom:0}
.card .wk{font:400 .78rem/1.3 "Plex Mono",ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--s-acc);margin-bottom:.8rem}
.result .big{font-weight:300;font-size:clamp(2rem,5.5vw,2.9rem);line-height:1.05;margin:0 0 .5rem}
.result .sub{font-size:1.15rem;color:var(--s-ink-2);margin:0 0 1rem}
.facts{list-style:none;padding:0;margin:0 0 1.1rem;border-top:1px solid var(--s-rule)}
.facts li{padding:.6rem 0;border-bottom:1px solid var(--s-rule)}
.facts b{color:var(--s-acc);font-weight:560}
.share{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.copied{font-size:.9rem;color:var(--s-acc)}
.coda{font-size:1.25rem;line-height:1.55}
.step.end{min-height:85vh}

/* ---- panels ---- */
.step.wide{display:block;min-height:auto;padding:6vh 0}
.panel{max-width:46rem;background:rgba(6,9,24,.8);color:var(--s-ink);padding:1.5rem 1.6rem 1.3rem;border-radius:18px;border:1px solid var(--s-rule);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.panel h3{font-weight:420;font-size:1.5rem;line-height:1.2;margin:0 0 .9rem}
.panel>p{margin:0 0 .9rem}
.next b{color:var(--s-acc);font-weight:560}

/* birthday strip */
.strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(3.1rem,1fr));gap:.35rem .25rem;margin:.6rem 0 0}
.strip button{display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.35rem 0;min-height:44px;background:none;border:1px solid transparent;border-radius:10px;color:var(--s-ink-2);font:400 .72rem/1 "Plex Mono",ui-monospace,monospace;cursor:pointer}
.strip button:hover{border-color:var(--s-rule)}
.strip button[aria-current="true"]{border-color:var(--s-acc);color:var(--s-ink)}
.strip svg{width:1.9rem;height:1.9rem;opacity:.55}
.strip .same svg{opacity:1;filter:drop-shadow(0 0 6px rgba(243,217,158,.75))}
.strip .same{color:var(--s-acc)}
.strip .birth svg{opacity:1}
.strip .birth{color:var(--s-ink)}
.strip .future{font-style:normal}
svg .dk{fill:var(--moon-dark);stroke:rgba(220,225,255,.35);stroke-width:1} svg .lt{fill:var(--moon-lit)}

/* births by phase */
.charts{margin:.6rem 0 0}
.phasechart{margin:0 0 1.4rem;position:relative}
.phasechart .cn{font-size:1.02rem;color:var(--s-ink);margin:0 0 .4rem}
.phasechart .cn span{color:var(--s-ink-2);font-size:.9rem;margin-left:.4rem}
.phasechart ol{list-style:none;display:grid;grid-template-columns:repeat(8,1fr);gap:.2rem;padding:0;margin:0}
.phasechart li{display:flex;flex-direction:column;align-items:center;text-align:center}
.plot{position:relative;display:block;width:100%;height:6.4rem}
.plot::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px solid rgba(220,225,255,.5)}
.plot::after{content:"";position:absolute;left:0;right:0;top:0;border-top:1px dashed rgba(243,217,158,.6)}
.bar{position:absolute;left:30%;right:30%;height:calc(3.2rem * var(--h) / 100);min-height:2px}
.bar.up{bottom:50%;background:var(--bar-up)}
.bar.dn{top:50%;background:var(--bar-dn)}
.phasechart li svg{width:1.6rem;height:1.6rem;flex:none;margin-top:.3rem}
.phasechart .v{font:400 .7rem/1.2 "Plex Mono",ui-monospace,monospace;color:var(--s-ink-2);margin-top:.25rem;white-space:nowrap}
.phasechart li.full .v{color:var(--s-acc)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.chart-note{font-size:.9rem;color:var(--s-ink-2);margin:.2rem 0 0;display:flex;gap:.5rem;align-items:center}
.chart-note .dash{display:inline-block;width:1.6rem;border-top:1px dashed rgba(243,217,158,.8);flex:none}

/* ---- the Moon's date, bottom right ---- */
.hud{position:fixed;left:50%;transform:translateX(-50%);bottom:max(10px,1.2vw);z-index:35;display:flex;align-items:center;gap:.3rem;padding:.25rem;border-radius:99px;background:var(--s-glass);color:var(--s-ink);border:1px solid var(--s-rule);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font:400 .76rem/1.2 "Plex Mono",ui-monospace,monospace;letter-spacing:.04em;max-width:calc(100vw - 20px)}
.hud .ph{display:none}@media (min-width:520px){.hud .ph{display:inline;padding:0}}
.hud span{padding:0 .4rem;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nb{width:2.75rem;height:2.75rem;flex:none;border-radius:50%;border:0;background:rgba(230,235,255,.1);color:inherit;font:400 1.4rem/1 "Newsreader",Georgia,serif;cursor:pointer}
.nb:hover{background:rgba(230,235,255,.2)}
html:not(.js) .hud{display:none}
@media (min-width:1002px) and (min-aspect-ratio:20/23){.hud{left:auto;right:max(12px,1.2vw);transform:none}}

/* ---- sources and footer ---- */
.block{position:relative;z-index:1;background:var(--bg);color:var(--ink);padding:4rem max(16px,6vw) 3rem;margin-top:12vh}
.block h2{font-weight:400;font-size:1.9rem;margin:0 0 1.2rem}
.block h2 a{color:inherit}
.method{max-width:44rem;color:var(--ink-2);font-size:1.02rem}
.srcs{padding-left:1.1rem;max-width:52rem;font-size:.95rem;color:var(--ink-2)}
.srcs li{margin:0 0 .45rem}
.srcs a{word-break:break-word}
.foot{background:var(--bg);color:var(--ink-2);padding:1.5rem max(16px,6vw) 5rem;border-top:1px solid var(--rule);font-size:.92rem}
.foot p{margin:.2rem 0}.foot a{color:var(--ink)}
body.nf{background:var(--bg);min-height:100vh;display:grid;place-items:center;text-align:center}
body.nf h1{font-weight:300;font-size:2.4rem}

@media (max-width:640px){
  .card{padding:1.15rem 1.2rem}
  .panel{padding:1.15rem 1rem}
  .ch{padding-top:20vh}
  .step{min-height:62vh}
  .phasechart .v{font-size:.6rem}
  .phasechart li svg{width:1.3rem;height:1.3rem}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
/* bar heights as classes (inline styles are blocked by the CSP) */
.bh0{--h:0}.bh1{--h:1}.bh2{--h:2}.bh3{--h:3}.bh4{--h:4}.bh5{--h:5}.bh6{--h:6}.bh7{--h:7}.bh8{--h:8}.bh9{--h:9}.bh10{--h:10}.bh11{--h:11}.bh12{--h:12}.bh13{--h:13}.bh14{--h:14}.bh15{--h:15}.bh16{--h:16}.bh17{--h:17}.bh18{--h:18}.bh19{--h:19}.bh20{--h:20}.bh21{--h:21}.bh22{--h:22}.bh23{--h:23}.bh24{--h:24}.bh25{--h:25}.bh26{--h:26}.bh27{--h:27}.bh28{--h:28}.bh29{--h:29}.bh30{--h:30}.bh31{--h:31}.bh32{--h:32}.bh33{--h:33}.bh34{--h:34}.bh35{--h:35}.bh36{--h:36}.bh37{--h:37}.bh38{--h:38}.bh39{--h:39}.bh40{--h:40}.bh41{--h:41}.bh42{--h:42}.bh43{--h:43}.bh44{--h:44}.bh45{--h:45}.bh46{--h:46}.bh47{--h:47}.bh48{--h:48}.bh49{--h:49}.bh50{--h:50}.bh51{--h:51}.bh52{--h:52}.bh53{--h:53}.bh54{--h:54}.bh55{--h:55}.bh56{--h:56}.bh57{--h:57}.bh58{--h:58}.bh59{--h:59}.bh60{--h:60}.bh61{--h:61}.bh62{--h:62}.bh63{--h:63}.bh64{--h:64}.bh65{--h:65}.bh66{--h:66}.bh67{--h:67}.bh68{--h:68}.bh69{--h:69}.bh70{--h:70}.bh71{--h:71}.bh72{--h:72}.bh73{--h:73}.bh74{--h:74}.bh75{--h:75}.bh76{--h:76}.bh77{--h:77}.bh78{--h:78}.bh79{--h:79}.bh80{--h:80}.bh81{--h:81}.bh82{--h:82}.bh83{--h:83}.bh84{--h:84}.bh85{--h:85}.bh86{--h:86}.bh87{--h:87}.bh88{--h:88}.bh89{--h:89}.bh90{--h:90}.bh91{--h:91}.bh92{--h:92}.bh93{--h:93}.bh94{--h:94}.bh95{--h:95}.bh96{--h:96}.bh97{--h:97}.bh98{--h:98}.bh99{--h:99}.bh100{--h:100}
html.hud-under .hud{bottom:auto}
.hud{transition:opacity .3s}
.hero,.when{max-width:min(40rem,100%)}.when input{flex:1 1 8rem}.kicker{overflow-wrap:anywhere}
html,body{overflow-x:clip}

/* v1.1: dragging the Moon, links and focus on the dark sky */
html.over-moon body{cursor:grab} html.grabbing,html.grabbing *{cursor:grabbing!important;user-select:none;-webkit-user-select:none}
body{touch-action:pan-y}
.hero a,.card a,.panel a,.hero-result a{color:var(--s-acc)}
.topbar :focus-visible,.block :focus-visible,.foot :focus-visible{outline-color:var(--link)}
.when-note{margin:-.4rem 0 1rem}
.strip{list-style:none;padding:0}
.strip li{display:contents}
.btn.small{min-height:2.75rem;font-size:.92rem;padding:.3rem .9rem}