/* Astraeum: the star library of humankind. Warm vault-gold light, teal as the second light. Dark only. */
:root{--bg:#0c0810;--bg2:#140d14;--panel:#170f14;--ink:#f4e9d2;--muted:#c2b295;--gold:#f6c26b;--amber:#ff9d3f;--burnt:#d4561f;--teal:#40e8d4;--mag:#ff4aa8;--rule:rgba(246,194,107,.3);
--f-wide:"Syncopate","Arial Black","Segoe UI",system-ui,sans-serif;--f-hud:"Chakra Petch","Segoe UI",system-ui,sans-serif;--f-body:"Space Grotesk","Segoe UI",system-ui,-apple-system,sans-serif;color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--f-body);min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.5;background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
main{flex:1;width:100%}
.wrap{max-width:1180px;margin:0 auto;width:100%;padding-inline:20px}
h1,h2,h3{margin:0;font-weight:700;line-height:1.05}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--gold);color:#1a0f08;padding:10px 16px;font:600 .9rem var(--f-hud);text-decoration:none}
.skip:focus{top:10px}
.hud-label,.eyebrow{font:500 .76rem/1.4 var(--f-hud);letter-spacing:.18em;text-transform:uppercase;color:var(--teal)}
.gl{width:1.2em;height:1.2em;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.dotlive{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px var(--teal);margin-right:8px;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
/* nav */
.hubnav{position:sticky;top:0;z-index:50;background:rgba(12,8,16,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.hubnav-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px;padding-inline:20px}
.brand{display:inline-flex;align-items:center;gap:10px;font:700 .95rem/1 var(--f-wide);letter-spacing:.16em;text-decoration:none;color:var(--ink)}
.brand svg{width:30px;height:30px;color:var(--gold)}
.hubnav nav{display:flex;gap:4px}
.hubnav nav a{position:relative;font:600 .82rem var(--f-hud);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:10px 12px;color:var(--muted)}
.hubnav nav a:hover{color:var(--ink)}
.hubnav nav a[aria-current]{color:var(--gold)}
.hubnav nav a[aria-current]::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;background:var(--gold);box-shadow:0 0 10px var(--amber)}
.status{border-bottom:1px solid rgba(246,194,107,.14);background:rgba(8,5,11,.7)}
.status .wrap{display:flex;gap:6px 26px;flex-wrap:wrap;padding-block:7px;font:500 .72rem var(--f-hud);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.status b{color:var(--gold);font-weight:600}
/* hero */
.hero-sci{position:relative;isolation:isolate;overflow:hidden;min-height:min(86vh,780px);display:flex;align-items:center;background:linear-gradient(180deg,#06040a 0%,#160c18 30%,#3a1a18 58%,#8a3b19 74%,#e08a3a 88%);border-bottom:1px solid var(--rule)}
.ly{position:absolute;inset:0;z-index:-1;pointer-events:none;will-change:transform;transform:translate3d(calc(var(--mx,0)*var(--kx,0)*1px),calc(var(--sy,0)*var(--ky,0)*1px),0)}
.ly svg{display:block;width:100%;height:100%}
.beams{opacity:.9;animation:breathe 9s ease-in-out infinite}
@keyframes breathe{50%{opacity:.55}}
#dust{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.grain{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.22;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}
.scrim{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(8,5,11,.82) 0%,rgba(8,5,11,.55) 38%,rgba(8,5,11,0) 66%)}
.hero-copy{position:relative;padding-block:44px 56px;max-width:760px}
.boot{font:500 .85rem/1.6 var(--f-hud);letter-spacing:.14em;text-transform:uppercase;color:var(--teal);min-height:1.6em;margin-bottom:14px;text-shadow:0 0 14px rgba(64,232,212,.5)}
.boot .cur{display:inline-block;width:.6em;height:1em;background:var(--teal);vertical-align:-.15em;margin-left:3px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.wordmark{font:700 clamp(2.5rem,10.6vw,9rem)/.95 var(--f-wide);letter-spacing:.02em;color:var(--ink);text-shadow:0 0 38px rgba(255,157,63,.55),0 2px 0 #7a3512;margin-left:-.04em}
.wordmark span{display:inline-block;background:linear-gradient(180deg,#fff2cf 10%,var(--gold) 55%,var(--amber) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 0 22px rgba(255,157,63,.45))}
.tagline{margin-top:14px;font:600 .9rem var(--f-hud);letter-spacing:.34em;text-transform:uppercase;color:var(--gold)}
.hero-line{margin-top:26px;font:700 clamp(1.5rem,3.6vw,2.5rem)/1.15 var(--f-body);max-width:20em;text-wrap:balance;text-shadow:0 2px 18px rgba(0,0,0,.6)}
.hero-sub{margin-top:10px;font-size:1.2rem;color:#f0dcb8;max-width:34em;text-shadow:0 2px 14px rgba(0,0,0,.7)}
.term{display:flex;align-items:center;gap:10px;max-width:640px;margin-top:28px;background:rgba(9,6,12,.88);border:1px solid rgba(64,232,212,.55);padding:4px 16px;box-shadow:0 0 0 1px rgba(64,232,212,.12),0 0 26px -6px rgba(64,232,212,.4);position:relative}
.term:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px rgba(64,232,212,.28),0 0 34px -4px rgba(64,232,212,.6)}
.term .prompt{font:700 1.1rem var(--f-hud);color:var(--amber)}
.term input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--ink);font:500 1.08rem var(--f-hud);letter-spacing:.04em;padding:13px 0;caret-color:var(--amber);-webkit-appearance:none;appearance:none}
.term input::placeholder{color:#a99c82;opacity:1}
.try{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px;font:500 .78rem var(--f-hud);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.try button{font:500 .78rem var(--f-hud);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);background:rgba(9,6,12,.7);border:1px solid var(--rule);padding:5px 11px;cursor:pointer}
.try button:hover{border-color:var(--gold);box-shadow:0 0 14px -2px rgba(246,194,107,.5)}
/* welcome transmission */
.welcome{position:relative;max-width:640px;margin-top:26px;padding:20px 22px 18px;background:rgba(14,9,14,.9);border:1px solid var(--gold);box-shadow:0 0 40px -8px rgba(246,194,107,.5)}
.welcome[hidden]{display:none}
.welcome h2{font:700 1.15rem var(--f-wide);letter-spacing:.14em;color:var(--gold);margin:6px 0 10px}
.welcome p{font-size:1.04rem;color:var(--ink);margin-bottom:8px}
.welcome .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.btn{display:inline-flex;align-items:center;gap:8px;font:700 .86rem var(--f-hud);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;background:linear-gradient(180deg,var(--gold),var(--amber));color:#1c0f06;border:0;padding:12px 20px;cursor:pointer;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.btn:hover{filter:brightness(1.1);box-shadow:0 0 24px rgba(255,157,63,.6)}
.btn.ghost{background:transparent;color:var(--gold);outline:1px solid var(--rule);outline-offset:-1px}
/* results */
.results{display:flex;flex-direction:column;gap:10px;padding-block:28px 20px;max-width:860px}
.results .none{color:var(--muted);font-family:var(--f-hud)}
.res{display:grid;grid-template-columns:8px 1fr;gap:16px;background:var(--panel);border:1px solid var(--rule);padding:12px 16px 12px 0;text-decoration:none;position:relative}
.res i{background:var(--c);box-shadow:0 0 14px var(--c)}
.res:hover{border-color:var(--gold);box-shadow:0 0 26px -6px rgba(246,194,107,.5)}
.res b{font:600 1.2rem/1.2 var(--f-body);display:block}
.res small{display:block;color:var(--muted);font-size:.92rem;line-height:1.45;margin-top:2px}
.res .sec{font:500 .72rem var(--f-hud);letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
mark{background:rgba(246,194,107,.3);color:var(--ink);padding:0 2px}
/* sections */
.sect{padding-block:56px 8px}
.sect-head{display:flex;flex-direction:column;gap:8px;margin-bottom:26px}
.sect-head h2{font:700 clamp(1.5rem,4vw,2.5rem)/1.1 var(--f-wide);letter-spacing:.04em}
.sect-head p{color:var(--muted);max-width:40em}
.glyphrow{display:flex;gap:18px;align-items:center;color:var(--gold);opacity:.75;margin:0 0 18px}
.glyphrow::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--rule),transparent)}
.glyphrow .gl{width:22px;height:22px}
/* HUD cards */
.hud{position:relative;background:linear-gradient(180deg,rgba(34,21,22,.9),rgba(16,10,15,.94));border:1px solid var(--rule);transition:border-color .25s,box-shadow .25s,transform .25s}
.hud::before{content:"";position:absolute;inset:-1px;pointer-events:none;z-index:2;--b:var(--teal);background:
linear-gradient(var(--b),var(--b)) top left/16px 2px no-repeat,linear-gradient(var(--b),var(--b)) top left/2px 16px no-repeat,
linear-gradient(var(--b),var(--b)) top right/16px 2px no-repeat,linear-gradient(var(--b),var(--b)) top right/2px 16px no-repeat,
linear-gradient(var(--b),var(--b)) bottom left/16px 2px no-repeat,linear-gradient(var(--b),var(--b)) bottom left/2px 16px no-repeat,
linear-gradient(var(--b),var(--b)) bottom right/16px 2px no-repeat,linear-gradient(var(--b),var(--b)) bottom right/2px 16px no-repeat;transition:filter .25s}
a.hud:hover,.hud:hover{border-color:var(--gold);box-shadow:0 0 0 1px rgba(246,194,107,.35),0 24px 50px -20px rgba(255,157,63,.55)}
a.hud:hover{transform:translateY(-4px)}
a.hud:hover::before{--b:var(--gold)}
.vaults{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media (max-width:900px){.vaults{grid-template-columns:1fr}}
.vault{display:flex;flex-direction:column;text-decoration:none;color:inherit;overflow:hidden}
.vault .art{height:190px;position:relative;border-bottom:1px solid var(--rule);display:flex;align-items:flex-end;justify-content:center;overflow:hidden;background:radial-gradient(ellipse at 50% 100%,rgba(255,157,63,.55),rgba(60,26,22,.6) 55%,rgba(12,8,16,.9))}
.vault .num{position:absolute;right:16px;top:8px;font:700 3.4rem/1 var(--f-hud);color:transparent;-webkit-text-stroke:1px rgba(246,194,107,.45)}
.vbody{padding:20px 22px 24px;display:flex;flex-direction:column;gap:9px;flex:1}
.vbody h3{font:700 1.45rem/1.15 var(--f-wide);letter-spacing:.03em}
.vbody p{color:var(--muted);font-size:1rem}
.vbody .go{margin-top:auto;padding-top:10px;font:700 .86rem var(--f-hud);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.spines{display:flex;align-items:flex-end;gap:6px;height:128px;margin-bottom:0;padding-bottom:0;position:relative}
.spines span{width:24px;height:100%;background:var(--c);transform:rotate(var(--r));transform-origin:bottom;box-shadow:inset 4px 0 0 rgba(0,0,0,.28),0 0 22px -4px var(--c);clip-path:polygon(0 4px,100% 0,100% 100%,0 100%)}
.spines span:nth-child(2n){height:86%}.spines span:nth-child(3n){height:94%}.spines span:nth-child(5n){height:78%}
.vault .art svg.orrery{width:200px;height:200px;color:var(--gold);align-self:center}
.sealed{opacity:.92}
.sealed .art{background:radial-gradient(ellipse at 50% 60%,rgba(64,232,212,.14),rgba(12,8,16,.95) 70%)}
.sealed::before{--b:rgba(246,194,107,.45)}
.sealed .vbody h3,.sealed .vbody p{opacity:.9}
.sealed-tag{font:600 .74rem var(--f-hud);letter-spacing:.18em;text-transform:uppercase;color:var(--teal)}
/* memory-core cards */
.xgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:24px;padding-block:6px 72px}
.xcard{display:flex;flex-direction:column}
.xthumb{display:block;position:relative;aspect-ratio:210/124;border-bottom:1px solid var(--rule);overflow:hidden;background:#0a060c}
.xthumb svg,.xthumb img{width:100%;height:100%;display:block;object-fit:cover}
.xthumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(12,8,16,.65)),repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px)}
.xcard:hover .xthumb img,.xcard:hover .xthumb svg{transform:scale(1.04)}
.xthumb img,.xthumb svg{transition:transform .5s}
.coreid{position:absolute;left:10px;top:10px;z-index:1;font:600 .72rem var(--f-hud);letter-spacing:.16em;text-transform:uppercase;color:#1c0f06;background:var(--gold);padding:3px 9px}
.xbody{display:flex;flex-direction:column;gap:10px;padding:18px 20px 22px;flex:1}
.xbody h2{font:700 1.4rem/1.2 var(--f-body)}
.xbody h2 a{text-decoration:none}
.xbody h2 a:hover{color:var(--gold)}
.xbody p{color:var(--muted);font-size:1rem}
.readout{display:flex;flex-wrap:wrap;gap:4px 14px;font:500 .72rem var(--f-hud);letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.badge{align-self:flex-start;font:700 .7rem var(--f-hud);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold);padding:2px 9px}
.tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.tags li{font:500 .78rem var(--f-hud);letter-spacing:.08em;border:1px solid var(--rule);padding:2px 10px;color:var(--muted)}
.xbody .btn{align-self:flex-start;margin-top:auto}
/* feature + note */
.feature{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);overflow:hidden}
@media (max-width:820px){.feature{grid-template-columns:1fr}}
.feature .xthumb{aspect-ratio:auto;min-height:240px;border-bottom:0;border-right:1px solid var(--rule)}
.feature .fbody{padding:26px 28px;display:flex;flex-direction:column;gap:12px;justify-content:center}
.feature h3{font:700 clamp(1.4rem,3vw,2rem)/1.15 var(--f-body)}
.feature p{color:var(--muted)}
.note{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;padding:26px 28px}
@media (max-width:640px){.note{grid-template-columns:1fr}}
.note .marks{display:flex;gap:14px;color:var(--gold)}
.note .marks .gl{width:44px;height:44px;stroke-width:1.3;filter:drop-shadow(0 0 10px rgba(255,157,63,.55))}
.note h3{font:700 1.3rem var(--f-body);margin-bottom:6px}
.note p{color:var(--muted);max-width:44em}
.hero-small{padding-block:54px 18px;position:relative}
.hero-small h1{font:700 clamp(2.2rem,8vw,5rem)/1 var(--f-wide);letter-spacing:.02em;margin:10px 0 14px;text-shadow:0 0 34px rgba(255,157,63,.4)}
.hero-small .lede{font-size:1.18rem;color:#ecd9b6;max-width:36em}
.hubfoot{margin-top:56px;border-top:1px solid var(--rule);background:rgba(8,5,11,.8);padding:26px 0 34px}
.hubfoot .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 24px;font:500 .8rem var(--f-hud);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.hubfoot b{color:var(--gold);font-weight:600}
.hubfoot button{font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--teal);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
/* page-load reveal */
.rise{animation:rise .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0)*110ms)}
@keyframes rise{from{opacity:0;transform:translateY(22px)}}
.ring-spin{transform-box:fill-box;transform-origin:center;animation:spin 90s linear infinite}
.ring-spin.rev{animation-duration:140s;animation-direction:reverse}
.ring-spin.fast{animation-duration:55s}
@keyframes spin{to{transform:rotate(360deg)}}
.ripple{transform-box:fill-box;transform-origin:center;animation:ripple 7s ease-out infinite;opacity:0}
@keyframes ripple{0%{transform:scale(.3);opacity:.7}100%{transform:scale(1.4);opacity:0}}
.twinkle{animation:tw 4s ease-in-out infinite}
@keyframes tw{50%{opacity:.25}}
@media (max-width:700px){.ly svg{position:absolute;top:0;left:50%;height:100%;width:auto;aspect-ratio:1440/800;transform:translateX(-72%)}.hubnav-in{padding-inline:14px}.hubnav nav{gap:0}.hubnav nav a{padding:10px 6px;font-size:.68rem;letter-spacing:.05em;white-space:nowrap}.brand{font-size:.72rem;letter-spacing:.08em;gap:7px}.brand svg{width:26px;height:26px}.hero-copy{padding-block:40px 56px}.scrim{background:linear-gradient(180deg,rgba(8,5,11,.5),rgba(8,5,11,.38) 50%,rgba(8,5,11,.62))}.hero-line,.hero-sub,.tagline{text-shadow:0 1px 3px rgba(0,0,0,.9),0 2px 16px rgba(0,0,0,.8)}.status .wrap span:nth-child(n+3){display:none}.hide-m{display:none}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.ly{transform:none!important}.rise{opacity:1;transform:none}#dust{display:none}}
/* ---- star chart ---- */
.chartbox{padding:16px 12px 14px}
.swipe{display:none;font:500 .78rem var(--f-hud);letter-spacing:.14em;text-transform:uppercase;color:var(--teal);padding:0 8px 8px}
.chartscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.chart{display:block;width:100%;height:auto;min-width:760px;background:radial-gradient(ellipse at 50% 50%,rgba(255,157,63,.1),transparent 65%)}
.chart .cap{font:600 15px var(--f-hud);letter-spacing:.18em}
.chart .st{cursor:pointer;outline:none}
.chart .halo{opacity:.16;transition:opacity .25s,r .25s}
.chart .spark{transform-box:fill-box;transform-origin:center;transition:transform .25s}
.chart .spark.tw{animation:tw 3.6s ease-in-out infinite}
.chart .lbl{font:600 17px var(--f-body);fill:var(--ink);paint-order:stroke;stroke:#0c0810;stroke-width:5px;opacity:0;transition:opacity .2s;pointer-events:none}
.chart .st:hover .lbl,.chart .st:focus .lbl,.chart .st:focus-visible .lbl{opacity:1}
.chart .st:hover .halo,.chart .st:focus .halo{opacity:.5;r:24px}
.chart .st:hover .spark,.chart .st:focus .spark{transform:scale(1.7)}
.chart .st:focus-visible .hit{stroke:var(--teal);stroke-width:2}
.chart .uncharted{opacity:.8}
.starread{margin-top:10px;padding:12px 16px;border-top:1px solid var(--rule);color:var(--muted);font-size:1rem;min-height:4.4em}
.starread b{color:var(--gold);font-family:var(--f-hud);letter-spacing:.06em}
@media (max-width:760px){.swipe{display:block}.starread{min-height:6.6em}}

#chart-h,#vaults-h{scroll-margin-top:90px}
.sect-head h2,.vbody h3,.welcome h2{text-transform:uppercase}