/*
 * CELESTIA — stylesheet.
 * Order: embedded @font-face (local woff2) · design tokens on :root (colours, radii) ·
 * base/layout · per-view sections · the dossier panel · the onboarding tour ·
 * responsive rules (<=900px, <=640px) and pointer:coarse (touch) adaptations.
 */
@font-face{font-family:'Michroma';font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/font-01.woff2") format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:300;font-display:swap;src:url("../assets/fonts/font-02.woff2") format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/font-03.woff2") format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url("../assets/fonts/font-04.woff2") format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url("../assets/fonts/font-05.woff2") format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/font-06.woff2") format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url("../assets/fonts/font-07.woff2") format('woff2')}

:root{
  --void:#04060e;
  --glass:rgba(13,20,38,.55);
  --line:rgba(90,120,200,.22);
  --star:#e9eeff;
  --dim:#93a0c2;
  --gold:#f2c46d;--rose:#ff9dc0;--mint:#7fe3b8;--violet:#c39dff;--amber:#ffb968;--sky:#8fd4ff;
  --ion:#6fd2ff;
  --rose:#e08fb0;
  --r:16px;
  /* --ink was referenced in six places but never declared, so every one of them
     resolved to nothing - most visibly the hamburger button, whose three bars
     are painted with it and were therefore transparent. */
  --ink:#e9eeff;
  /* Same omission: --display had no fallback, so the gallery titles and the
     tour headings rendered in the browser's default face instead of Michroma.
     --panel and --mono were already written with fallbacks, but declaring them
     here makes the set complete. */
  --display:'Michroma',sans-serif;
  --mono:'IBM Plex Mono',monospace;
  --panel:#121a2e;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:radial-gradient(1400px 800px at 75% -10%,#0d1530 0%,transparent 55%),
             radial-gradient(1000px 700px at 10% 110%,#150d2c 0%,transparent 55%),var(--void);
  color:var(--star);
  font-family:'IBM Plex Sans',system-ui,sans-serif;font-weight:300;line-height:1.6;
  overflow-x:hidden;
}
::selection{background:rgba(111,210,255,.25)}
p{text-align:justify;text-justify:inter-word;hyphens:auto}

/* ---------- chrome ---------- */
.wrap{position:relative;z-index:2;max-width:1280px;margin:0 auto;padding:0 22px 90px}
header{padding:28px 0 14px;display:flex;flex-direction:column;gap:20px}
.masthead{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:10px}
.logo{font-family:'Michroma',sans-serif;font-size:clamp(22px,4vw,32px);letter-spacing:.3em;
  background:linear-gradient(92deg,#fff 0%,#bcd6ff 45%,var(--gold) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.tagline{font-family:'IBM Plex Mono',monospace;font-size:9.5px;opacity:.8;color:var(--dim);letter-spacing:.16em;text-transform:uppercase}
nav{display:flex;gap:8px;flex-wrap:wrap;padding:8px;border:1px solid var(--line);border-radius:999px;
  background:var(--glass);backdrop-filter:blur(14px);width:max-content;max-width:100%}
nav button{
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  background:none;border:1px solid transparent;color:var(--dim);padding:9px 16px;border-radius:999px;cursor:pointer;
  transition:.25s;
}
nav button:hover{color:var(--star)}
nav button.active{color:#08101f;background:linear-gradient(120deg,var(--ion),#9db8ff);font-weight:500;box-shadow:0 0 24px rgba(111,210,255,.35)}
button:focus-visible,.star-pt:focus-visible{outline:2px solid var(--ion);outline-offset:3px}

.view{display:none;animation:fade .5s ease}
.view.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ion);margin:14px 0 5px;opacity:.75}
h1.viewtitle{font-family:'Michroma',sans-serif;font-size:clamp(17px,2.7vw,24px);letter-spacing:.1em;margin-bottom:7px;text-shadow:0 0 30px rgba(111,180,255,.25)}
/* Was capped at 760px inside a 1280px wrap, which left the intro text sitting
   in a narrow column beside a full-width visualiser. It now runs the same width
   as the stage below it. 1100px is about 130 characters at this size - wide, but
   the alternative looked like a mistake. */
.lede{max-width:min(100%,1100px);color:var(--dim);font-size:14px;line-height:1.55;margin-bottom:16px}
.lede b{color:var(--star);font-weight:500}
.note{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--dim);letter-spacing:.06em;margin-top:12px}

/* ---------- 3D stages ---------- */
.stage{position:relative;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:radial-gradient(900px 500px at 50% 30%,rgba(10,18,38,.80) 0%,rgba(4,6,14,.90) 75%);
  box-shadow:0 30px 80px rgba(0,0,0,.5),inset 0 0 120px rgba(20,40,90,.25)}
.stage canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
.stage canvas:active{cursor:grabbing}
.stage .hud{position:absolute;left:14px;bottom:12px;font-family:'IBM Plex Mono',monospace;font-size:10px;
  color:var(--dim);letter-spacing:.12em;text-transform:uppercase;pointer-events:none;
  background:rgba(5,8,18,.55);padding:6px 10px;border-radius:8px}
.stage .legend{position:absolute;right:14px;top:12px;font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--dim);
  letter-spacing:.1em;text-transform:uppercase;pointer-events:none;background:rgba(5,8,18,.55);padding:6px 10px;border-radius:8px}
#tooltip{position:fixed;z-index:60;pointer-events:none;display:none;
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;color:#08101f;
  background:linear-gradient(120deg,var(--gold),#ffe1a3);padding:6px 12px;border-radius:999px;
  box-shadow:0 6px 24px rgba(0,0,0,.5);transform:translate(-50%,-160%);white-space:nowrap}
/* left/top pinned to the origin because positioning is now done with a
   composited transform; the -50% centring moved into that inline transform */
.lbl3d{position:absolute;left:0;top:0;will-change:transform;
  z-index:5;pointer-events:none;font-family:'IBM Plex Mono',monospace;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:#dbe6ff;white-space:nowrap;transform:translate(-50%,-50%);
  background:rgba(4,8,18,.62);padding:2px 8px;border-radius:7px;border:1px solid rgba(90,120,200,.25);
  text-shadow:0 1px 4px #000}
.lbl3d.hot{color:var(--gold);font-size:10.5px;border-color:rgba(242,196,109,.4)}
.lbl3d.you{color:#ff7080;font-size:12px;font-weight:600;letter-spacing:.18em;border-color:rgba(255,90,110,.5);text-shadow:0 0 14px rgba(255,60,90,.8),0 1px 4px #000}
.lbl3d.you .tick{background:linear-gradient(180deg,#ff5a6e,transparent)}
.lbl3d.arm{color:#9fc2ff;opacity:.95;letter-spacing:.2em}
.lbl3d .tick{display:block;width:1px;height:16px;background:linear-gradient(180deg,var(--gold),transparent);margin:2px auto 0}
.lbl3d.dim{color:#cfe0ff;opacity:.95}

/* ---------- constellations (SVG) ---------- */
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px}
.sky-card{background:linear-gradient(180deg,rgba(15,23,44,.75) 0%,rgba(8,12,24,.85) 100%);
  border:1px solid var(--line);border-radius:var(--r);padding:20px 20px 14px;backdrop-filter:blur(10px);
  transition:transform .25s,border-color .25s,box-shadow .25s}
.sky-card:hover{border-color:rgba(111,210,255,.45);transform:translateY(-4px);box-shadow:0 18px 50px rgba(0,0,0,.45)}
.sky-card h3{font-family:'Michroma',sans-serif;font-size:14px;letter-spacing:.14em;margin-bottom:2px}
.sky-card .latin{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--ion);letter-spacing:.16em;text-transform:uppercase}
.sky-card p.story{color:var(--dim);font-size:13px;margin:10px 0 4px}
.skysvg{width:100%;height:auto;display:block}
.cline{stroke:rgba(140,180,255,.4);stroke-width:1.2;filter:drop-shadow(0 0 3px rgba(120,170,255,.5))}
.star-pt{cursor:pointer}
.star-pt circle.core{filter:drop-shadow(0 0 5px rgba(255,255,255,.40))}
.star-pt circle.halo{fill:rgba(255,255,255,.1);transition:.2s}
.star-pt:hover circle.halo{fill:rgba(242,196,109,.4)}
.star-pt text{fill:var(--dim);font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.08em;pointer-events:none}
.star-pt.neb circle.core{fill:var(--rose);filter:drop-shadow(0 0 6px rgba(224,143,176,.95))}
.hint{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--dim);letter-spacing:.1em;text-transform:uppercase;margin-top:8px}

/* ---------- cosmos cards ---------- */
.obj-band{margin-bottom:38px}
.band-title{font-family:'Michroma',sans-serif;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:16px}
.obj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:14px}
.obj-card{background:linear-gradient(180deg,rgba(15,23,44,.7),rgba(8,12,24,.85));border:1px solid var(--line);border-radius:var(--r);
  padding:18px;text-align:left;cursor:pointer;color:var(--star);font-family:inherit;backdrop-filter:blur(8px);
  transition:border-color .2s,transform .2s,box-shadow .2s}
.obj-card:hover{border-color:rgba(111,210,255,.5);transform:translateY(-4px);box-shadow:0 16px 44px rgba(0,0,0,.5)}
.obj-card .glyph{width:54px;height:54px;border-radius:50%;margin-bottom:12px;display:block}
.obj-card h4{font-weight:500;font-size:15px}
.obj-card .sub{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--ion);letter-spacing:.12em;text-transform:uppercase;margin-top:2px}
.obj-card p{font-size:12.5px;color:var(--dim);margin-top:8px}
.gl-bh{background:radial-gradient(circle,#000 0 38%,rgba(255,170,60,.9) 44% 52%,rgba(255,120,40,.25) 60%,transparent 70%);box-shadow:0 0 18px rgba(255,150,60,.35)}
.gl-rock{background:radial-gradient(circle at 35% 30%,#9a8f80 0%,#5d554b 55%,#2c2822 100%);border-radius:46% 54% 52% 48%/55% 46% 54% 45%!important}
.gl-comet{background:radial-gradient(circle at 30% 50%,#dfeaff 0 22%,rgba(150,190,255,.35) 34%,transparent 60%),linear-gradient(115deg,transparent 30%,rgba(140,180,255,.35) 55%,transparent 80%)}
.gl-neb{background:radial-gradient(circle at 40% 40%,rgba(224,143,176,.85) 0 30%,rgba(111,180,232,.5) 55%,transparent 78%);filter:blur(.5px)}

/* ---------- detail overlay ---------- */
#overlay{position:fixed;inset:0;z-index:50;display:none}
#overlay.open{display:block}
#overlay /* No blur, and only a light dim: the point of flying to something is seeing it,
   so the visualiser stays legible behind the dossier. A backdrop-filter here
   also cost a full-screen composite on every frame the canvas repainted. */
.scrim{position:absolute;inset:0;background:rgba(2,4,10,.32)}
#sheet{position:absolute;top:0;right:0;height:100%;width:min(580px,100%);
  background:linear-gradient(180deg,rgba(14,22,42,.92) 0%,rgba(7,11,22,.96) 100%);
  border-left:1px solid var(--line);overflow-y:auto;padding:28px 30px 60px;
  transform:translateX(30px);opacity:0;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .3s}
#overlay.open #sheet{transform:none;opacity:1}
#closeBtn{position:sticky;top:0;float:right;background:rgba(20,30,55,.8);border:1px solid var(--line);color:var(--dim);
  width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:15px;z-index:2}
#closeBtn:hover{color:var(--star);border-color:var(--ion)}
.d-kind{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ion)}
.d-name{font-family:'Michroma',sans-serif;font-size:clamp(22px,4vw,30px);letter-spacing:.08em;margin:6px 0 2px}
.d-alias{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--dim);letter-spacing:.1em}
.d-visual{display:flex;justify-content:center;align-items:center;min-height:250px;margin:20px 0 6px;position:relative}
/* real photograph in the dossier, when one exists for this object */
.d-visual{flex-direction:column;gap:8px}
.d-photonote{font-size:11.5px;line-height:1.5;color:var(--dim);margin:0;text-align:center;max-width:46ch}
.d-photo{max-width:100%;max-height:260px;border-radius:12px;object-fit:cover;
  box-shadow:0 10px 34px rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.08)}
/* procedural piece for objects with no photograph: sized like .blob but the
   background is supplied per object, so no two look alike */
.artpiece{width:210px;height:210px;border-radius:50%;position:relative;overflow:hidden}
.artpiece.wide{width:250px;height:170px;border-radius:14px}
#miniView{width:280px;height:280px}
.bigstar{width:190px;height:190px;border-radius:50%;box-shadow:0 0 70px 26px var(--glow,rgba(255,255,255,.35))}
.bh-visual{width:220px;height:220px;border-radius:50%;background:
  radial-gradient(circle,#000 0 40%,transparent 41%),
  radial-gradient(circle,rgba(255,190,90,.95) 42% 47%,rgba(255,130,50,.5) 55%,rgba(120,60,160,.25) 68%,transparent 76%);
  box-shadow:0 0 80px rgba(255,150,60,.3);position:relative}
.bh-visual::after{content:"";position:absolute;top:50%;left:-10%;width:120%;height:16px;transform:translateY(-50%) rotate(-8deg);
  background:linear-gradient(90deg,transparent,rgba(255,190,110,.85),transparent);border-radius:50%}
.blob{width:210px;height:210px;border-radius:50%}
.d-desc{color:#c3ccdf;font-size:14.5px;margin:16px 0 22px}
.statgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.stat{background:rgba(10,16,32,.9);padding:12px 14px}
.stat .k{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.stat .v{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--gold);margin-top:3px}
.d-extra{margin-top:22px}
.only-touch{display:none}
@media(pointer:coarse){.only-mouse{display:none}.only-touch{display:inline}}
.d-fold{margin-top:18px;border-top:1px solid var(--line)}
.d-fold>summary{list-style:none;cursor:pointer;padding:13px 2px;display:flex;align-items:center;justify-content:space-between;
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sky);
  user-select:none;touch-action:manipulation;min-height:44px}
.d-fold>summary::-webkit-details-marker{display:none}
.d-fold>summary::after{content:'+';font-size:16px;color:var(--dim);transition:transform .2s}
.d-fold[open]>summary::after{content:'\2212'}
.d-fold>summary:hover{color:var(--star)}
.d-fold-body{padding-bottom:4px}
.d-fold .d-extra{margin-top:16px}
.d-extra h5{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ion);margin-bottom:8px}
.d-extra ul{list-style:none}
.d-extra li{font-size:13.5px;color:#c3ccdf;padding:7px 0;border-bottom:1px dashed rgba(70,95,160,.35)}
.d-extra li b{color:var(--star);font-weight:500}
.srcline{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--dim);margin-top:26px;letter-spacing:.06em}

footer{border-top:1px solid var(--line);margin-top:18px;padding-top:10px;font-family:'IBM Plex Mono',monospace;font-size:9px;opacity:.7;color:var(--dim);letter-spacing:.08em;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
@media(max-width:640px){
  #sheet{padding:22px 18px 50px}
  .statgrid{grid-template-columns:1fr}
  #miniView{width:220px;height:220px}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001s!important}}

/* ---------- planetarium & figures ---------- */
.skyctl{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:12px;align-items:center;
  background:rgba(5,8,18,.65);padding:9px 16px;border-radius:999px;border:1px solid var(--line)}
.skyctl span{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--dim);letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}
.skyctl input{width:min(220px,40vw);accent-color:var(--ion)}
.lbl3d.cardinal{color:#e9eeff;font-size:14px;font-weight:600;letter-spacing:.1em;background:none;border:none;backdrop-filter:none;text-shadow:0 0 12px rgba(120,170,255,.6),0 2px 6px #000}
.lbl3d.con{color:var(--gold);font-size:11px;letter-spacing:.22em;text-shadow:0 2px 10px #000}
.viewbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin:36px 0 16px;border-top:1px solid var(--line);padding-top:18px}
.chart-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ion)}
.figtoggle{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);background:rgba(242,196,109,.07);border:1px solid var(--gold);padding:8px 16px;border-radius:999px;cursor:pointer;transition:.2s}
.figtoggle.off{color:var(--dim);border-color:var(--line);background:none}
.figure{fill:none;stroke:rgba(242,196,109,.55);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 3.5px rgba(242,196,109,.35));opacity:1;transition:opacity .35s}
.figure.figdetail{stroke:rgba(245,205,128,.44);stroke-width:1;filter:none}
.sky-card:hover .figure{stroke:rgba(250,212,130,.75)}
.grid2.nofig .figure{opacity:0;pointer-events:none}
.meaning{font-size:12.5px;color:#d4c49a;margin-top:9px;line-height:1.55}
.meaning b{color:var(--gold);font-weight:500;font-style:normal}

.imglink{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:#08101f;background:linear-gradient(120deg,var(--gold),#ffe1a3);padding:9px 18px;border-radius:999px;
  text-decoration:none;margin:0 0 18px;box-shadow:0 6px 20px rgba(242,196,109,.2);transition:transform .2s,box-shadow .2s}
.imglink:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(242,196,109,.35)}

.conhead{display:block;width:100%;text-align:left;background:none;border:none;padding:0;cursor:pointer;color:inherit;font-family:inherit}
.conhead:hover h3{color:var(--gold)}
.conhead h3{transition:color .2s}
.zbadge{display:inline-block;margin-left:9px;font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#08101f;background:linear-gradient(120deg,var(--gold),#ffe1a3);padding:2px 7px;border-radius:999px;vertical-align:middle}
.cmeta{display:flex;flex-wrap:wrap;gap:5px;margin:9px 0 4px}
.cmeta span{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:3px 8px}
.barctl{display:inline-flex;gap:6px}
.barctl button{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);background:none;border:1px solid var(--line);padding:7px 14px;border-radius:999px;cursor:pointer;transition:.2s}
.barctl button:hover{color:var(--star)}
.barctl button.on{color:#08101f;background:linear-gradient(120deg,var(--ion),#9db8ff);border-color:transparent;font-weight:500}

/* medallion charts */
.medal{width:100%;height:auto;display:block;margin:4px 0 2px}
.medal .cline{stroke:rgba(150,185,255,.45);stroke-width:1.1;filter:none}
.medal .star-pt circle.core{filter:none}
.medal .star-pt circle.halo{fill:rgba(255,255,255,.06)}
.medal .star-pt:hover circle.halo{fill:rgba(242,196,109,.32)}
.medal .star-pt text{fill:rgba(200,215,245,.78);font-size:8.4px}
.medal .figure{transition:opacity .35s}
.medal .figfill{stroke:none;transition:opacity .35s}
.medal .figedge{fill:none;stroke:rgba(186,213,255,.42);stroke-linejoin:round;stroke-linecap:round;transition:stroke .35s}
.medal .figdetail{fill:none;stroke:rgba(198,220,255,.30);stroke-linecap:round;stroke-linejoin:round;transition:stroke .35s}
.sky-card:hover .medal .figedge{stroke:rgba(220,238,255,.70)}
.sky-card:hover .medal .figdetail{stroke:rgba(224,238,255,.46)}
.sky-card:hover .medal .figfill{opacity:1.5}
/* spectral legend */
.speclegend{display:flex;flex-wrap:wrap;gap:7px;margin:4px 0 10px}
.speclegend .chip{display:inline-flex;align-items:center;gap:6px;font-family:'IBM Plex Mono',monospace;
  font-size:9.5px;letter-spacing:.06em;color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:4px 10px}
.speclegend .chip i{width:9px;height:9px;border-radius:50%;display:inline-block;box-shadow:0 0 6px currentColor}
/* 88 facts + the other 66 */
.factstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:6px}
.fact{background:linear-gradient(180deg,rgba(15,23,44,.7),rgba(8,12,24,.85));border:1px solid var(--line);
  border-radius:var(--r);padding:14px 16px;text-align:center}
.fact b{display:block;font-family:'Michroma',sans-serif;font-size:22px;color:var(--gold);letter-spacing:.04em}
.fact span{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.other88{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:10px}
.o88{background:rgba(11,17,34,.6);border:1px solid var(--line);border-radius:12px;padding:13px 14px;transition:border-color .2s}
.o88:hover{border-color:rgba(111,210,255,.4)}
.o88 h5{font-family:'IBM Plex Sans',sans-serif;font-weight:500;font-size:13.5px;letter-spacing:.02em}
.o88m{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ion);margin-top:2px}
.o88 p{font-size:12px;color:var(--dim);margin-top:7px;line-height:1.5}
.o88b{font-family:'IBM Plex Mono',monospace;font-size:9.5px;color:var(--gold);margin-top:8px;letter-spacing:.08em}
/* ambient backdrop — one fixed layer behind every page */
#ambientCanvas{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.9}

.skyctl .skytoggle{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:#08101f;background:linear-gradient(120deg,var(--ion),#9db8ff);border:1px solid transparent;padding:5px 12px;
  border-radius:999px;cursor:pointer;transition:.2s;white-space:nowrap}
.skyctl .skytoggle.off{color:var(--dim);background:none;border-color:var(--line)}

.medal .fighatch{fill:none;stroke:#bcd6ff;stroke-linecap:round;transition:stroke .35s,opacity .35s;opacity:.93}
.medal .fighatch2{stroke:#8fb0ee}
.sky-card:hover .medal .fighatch{opacity:1;stroke:#d6e6ff}

.inlink{color:var(--gold);text-decoration:none;border-bottom:1px dotted rgba(242,196,109,.45);transition:.2s}
.inlink:hover{color:#ffe1a3;border-bottom-color:rgba(242,196,109,.9)}

.fsbtn{position:absolute;top:10px;right:10px;z-index:6;width:30px;height:30px;line-height:1;
  font-size:14px;color:var(--dim);background:rgba(8,13,26,.62);border:1px solid var(--line);
  border-radius:8px;cursor:pointer;transition:.18s}
.fsbtn:hover{color:var(--star);border-color:rgba(111,210,255,.5);background:rgba(12,20,38,.85)}
.stage:fullscreen{height:100vh!important;height:100dvh!important;width:100vw;border-radius:0;margin:0}
.stage:fullscreen canvas{border-radius:0}
.stage.faux-full{position:fixed;inset:0;height:100vh!important;height:100dvh!important;width:100vw;z-index:200;border-radius:0}
@media(max-width:680px){.fsbtn{top:8px;right:8px;width:34px;height:34px}
  .homebtn{right:48px}}

/* ---- accent variation: each deck carries its own hue ---- */
#view-solar{--accent:var(--gold)}
#view-galaxy{--accent:var(--sky)}
#view-universe{--accent:var(--violet)}
#view-constellations{--accent:var(--mint)}
#view-cosmos{--accent:var(--rose)}
.view .eyebrow{color:var(--accent,var(--ion))}
.view .viewtitle{text-shadow:0 0 30px color-mix(in srgb,var(--accent,#6fb4ff) 30%,transparent)}
.view .lede b{color:color-mix(in srgb,var(--accent,#e8eeff) 78%,#ffffff)}
.view .chart-eyebrow{color:var(--accent,var(--ion))}
/* stat keys cycle through the palette so long tables stay readable */
.d-stats .stat:nth-child(6n+1) .k{color:var(--gold)}
.d-stats .stat:nth-child(6n+2) .k{color:var(--sky)}
.d-stats .stat:nth-child(6n+3) .k{color:var(--mint)}
.d-stats .stat:nth-child(6n+4) .k{color:var(--rose)}
.d-stats .stat:nth-child(6n+5) .k{color:var(--violet)}
.d-stats .stat:nth-child(6n+6) .k{color:var(--amber)}
/* the 88-constellation fact strip */
.factstrip .fact:nth-child(6n+1) b{color:var(--gold)}
.factstrip .fact:nth-child(6n+2) b{color:var(--sky)}
.factstrip .fact:nth-child(6n+3) b{color:var(--mint)}
.factstrip .fact:nth-child(6n+4) b{color:var(--rose)}
.factstrip .fact:nth-child(6n+5) b{color:var(--violet)}
.factstrip .fact:nth-child(6n+6) b{color:var(--amber)}
/* the reference grid of remaining constellations */
.other88 .o88:nth-child(5n+1) .o88m{color:var(--sky)}
.other88 .o88:nth-child(5n+2) .o88m{color:var(--mint)}
.other88 .o88:nth-child(5n+3) .o88m{color:var(--rose)}
.other88 .o88:nth-child(5n+4) .o88m{color:var(--violet)}
.other88 .o88:nth-child(5n+5) .o88m{color:var(--amber)}
.other88 .o88:hover{border-color:color-mix(in srgb,var(--mint) 45%,transparent)}
/* shelf headings on the celestial-bodies page */
#cosmosBands > div:nth-child(5n+1) h3{color:var(--rose)}
#cosmosBands > div:nth-child(5n+2) h3{color:var(--amber)}
#cosmosBands > div:nth-child(5n+3) h3{color:var(--mint)}
#cosmosBands > div:nth-child(5n+4) h3{color:var(--sky)}
#cosmosBands > div:nth-child(5n+5) h3{color:var(--violet)}
/* dossier visual for constellation medallions */
.svgvisual{width:min(280px,72vw);margin:0 auto 6px}
.svgvisual svg{width:100%;height:auto;display:block}

/* ================= PHONE & TABLET ================= */
html{-webkit-text-size-adjust:100%}
body{overscroll-behavior-y:contain}
.stage{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.wrap{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}
footer{padding-bottom:max(10px,env(safe-area-inset-bottom))}

/* ---- telescope photographs + catalogue ---- */
.galtitle{font-family:var(--display);font-size:clamp(19px,2.5vw,26px);margin:34px 0 6px;letter-spacing:.02em}
.shotgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:20px;margin:22px 0 10px}
.shotcard{background:linear-gradient(180deg,#101728,#0b1020);border:1px solid var(--line);
  border-radius:14px;overflow:hidden;display:flex;flex-direction:column;margin:0}
.shotimg{position:relative;aspect-ratio:16/10;background-size:cover;background-position:center;
  background-color:#070c18;
  background-image:radial-gradient(circle at 32% 30%,color-mix(in srgb,var(--tint,#7fa8ff) 55%,transparent) 0 12%,
    color-mix(in srgb,var(--tint,#7fa8ff) 22%,transparent) 34%,rgba(8,12,26,.96) 78%);
  transition:opacity .5s}
.shotimg.shot{background-image:none}
.shotpic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;z-index:1}
.shotimg .shotbadge{z-index:2}
.shotimg.shot::after{content:"";position:absolute;inset:0;box-shadow:inset 0 -46px 46px -30px rgba(6,10,20,.9)}
.shotbadge{position:absolute;left:10px;bottom:10px;z-index:2;font-size:11px;letter-spacing:.04em;
  background:rgba(6,10,20,.76);border:1px solid rgba(255,255,255,.14);padding:4px 9px;border-radius:999px;color:#dce8ff}
.shotcard figcaption{padding:14px 16px 16px}
.shotcard h4{margin:0 0 7px;font-size:16px;letter-spacing:.01em}
.shotcard p{margin:0 0 9px;font-size:13.5px;line-height:1.62;color:var(--dim)}
.why{color:#c3d4f2!important}
.why b{color:var(--gold)}
.scopegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:20px;margin:24px 0}
.scopecard{background:linear-gradient(180deg,#101728,#0b1020);border:1px solid var(--line);
  border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.scopeimg{aspect-ratio:16/9;--tint:#8fd4ff}
.scopebody{padding:15px 17px 17px}
.scopehead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.scopehead h4{margin:0;font-size:16.5px}
.scopekind{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--sky)}
.scopestatus{font-size:12px;color:var(--gold);margin:3px 0 9px}
.scopecard p{margin:0 0 10px;font-size:13.5px;line-height:1.62;color:var(--dim)}
.scopespec{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;margin:0 0 11px;font-size:12.5px}
.scopespec dt{color:var(--sky);white-space:nowrap}
.scopespec dd{margin:0;color:#c9d6ef}
.foot-note{font-size:12.5px;color:var(--dim);opacity:.8;margin-top:18px}
@media(max-width:640px){
  .shotgrid,.scopegrid{grid-template-columns:1fr}
  .scopespec{grid-template-columns:1fr;gap:2px}
  .scopespec dt{margin-top:6px}
}
.navtoggle{display:none;position:absolute;top:14px;right:14px;z-index:130;
  width:44px;height:44px;border-radius:11px;background:rgba(18,26,46,.9);
  border:1px solid var(--line);flex-direction:column;gap:5px;align-items:center;justify-content:center;cursor:pointer;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;padding:0}
/* flex-shrink:0 so the three bars cannot be squashed to nothing inside the
   column flex button, which is how Safari renders them otherwise */
.navtoggle span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;
  transition:.25s;flex:0 0 auto}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.navscrim{position:fixed;inset:0;background:rgba(3,6,14,.62);z-index:115;backdrop-filter:blur(2px)}
@media(max-width:900px){
  .navtoggle{display:flex}
  #nav{position:fixed;top:0;right:0;z-index:120;
    height:100vh;height:100dvh;width:min(80vw,330px);
    flex-direction:column;align-items:stretch;gap:8px;
    /* Generous bottom padding: on iOS Safari and Chrome for Android the
       browser's own toolbar sits over the foot of the panel, and the first tap
       there goes to the toolbar rather than the button underneath. This keeps
       the last entries clear of it, and the panel scrolls if a short screen
       still cannot fit them. */
    padding:76px 16px calc(56px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg,#0d1424,#080d18);
    border-left:1px solid var(--line);box-shadow:-18px 0 46px rgba(0,0,0,.6);
    overflow-y:auto;overflow-x:hidden;
    overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    transform:translateX(102%);transition:transform .28s cubic-bezier(.4,0,.2,1)}
  #nav.open{transform:translateX(0)}
  #nav button{width:100%;text-align:left;padding:14px 16px;font-size:15px;
    border-radius:10px;min-height:48px;flex:0 0 auto;
    /* manipulation removes the ~300ms double-tap-to-zoom wait, which was part
       of why a single tap felt like it had not registered */
    touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  /* immediate visual acknowledgement of the touch, before the view switches */
  #nav button:active{background:rgba(143,212,255,.16)}
}
@media(prefers-reduced-motion:reduce){#nav{transition:none}}
@media(max-width:820px){
  /* shorter stages so there is page left to scroll past them */
  .stage{height:min(56vh,460px)!important;height:min(56dvh,460px)!important}
  #stage-sky{height:min(60vh,500px)!important;height:min(60dvh,500px)!important}
  .viewtitle{font-size:clamp(16px,5vw,21px)}
  .lede{font-size:13.5px;line-height:1.5}
  .grid2{grid-template-columns:1fr}
  .other88{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .factstrip{grid-template-columns:repeat(2,1fr)}
  /* nav becomes a horizontal scroller instead of wrapping into a wall */
  nav{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;
      scrollbar-width:none;padding-bottom:4px}
  nav::-webkit-scrollbar{display:none}
  nav button{flex:0 0 auto;white-space:nowrap;min-height:40px;font-size:10.5px}
  /* touch targets: 44px is the accessibility minimum */
  .skyctl .skytoggle,.barctl button,.figtoggle,.imglink,.reflink{min-height:40px;padding:10px 16px}
  .fsbtn{width:42px;height:42px;font-size:17px}
  .d-stats{grid-template-columns:1fr}
  .hud,.legend{font-size:9px;max-width:62%}
  .obj-card,.sky-card{padding:14px}
  #detailSheet{max-height:88vh;max-height:88dvh}
}
@media(max-width:520px){
  .factstrip{grid-template-columns:1fr}
  .other88{grid-template-columns:1fr}
  .stage{height:min(50vh,380px)!important;height:min(50dvh,380px)!important}
  .cmeta span{font-size:8.5px}
}
/* a coarse pointer cannot hover, so surface the affordance permanently */
@media(pointer:coarse){
  .medal .figedge{stroke:rgba(214,234,255,.58)}
  .medal .fighatch{opacity:.9}
  .hint{opacity:.85}
}

.linkrow{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.linkrow .imglink{margin:0}
.reflink{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ion);background:none;border:1px solid rgba(111,210,255,.45);
  padding:8px 17px;border-radius:999px;text-decoration:none;transition:transform .2s,background .2s,color .2s}
.reflink:hover{transform:translateY(-2px);background:rgba(111,210,255,.13);color:#bfeaff}

.mw-hero{margin:6px 0 22px;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#05070f}
.mw-hero-img{width:100%;height:auto;display:block;aspect-ratio:1280/470;object-fit:cover}
/* ESO require the credit to be clear, visible and linked - keep it on the image */
.mw-hero-cap a{color:var(--sky);text-decoration:none;border-bottom:1px solid rgba(143,212,255,.35)}
.mw-hero-cap a:hover{color:var(--star)}
.mw-hero-note{padding:0 16px 13px;font-size:12.5px;color:var(--dim);line-height:1.55;
  background:linear-gradient(#0b1124,#0b1124)}
.mw-hero-cap{padding:11px 16px 6px;margin:0;font-size:12px;color:var(--dim);line-height:1.5;background:linear-gradient(#080c1a,#0b1124)}
.mw-gk{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 20px}
.mw-card{background:var(--panel,#121a2e);border:1px solid var(--line);border-radius:12px;padding:15px 17px}
.mw-card h3{margin:0 0 8px;font-size:14px;letter-spacing:.02em;color:var(--sky)}
.mw-card p{margin:0;font-size:13.5px;line-height:1.62;color:var(--ink)}
.mw-tidbit{background:linear-gradient(155deg,#1a1330,#101a2e);border-color:#3a2a5e}
.mw-tidbit h3{color:var(--violet,#c39dff)}
.mw-spots{margin:0 0 22px;border:1px solid var(--line);border-radius:12px;padding:16px 18px;background:#0b1022}
.mw-spots-h{font-size:14px;color:var(--gold);letter-spacing:.03em;margin-bottom:13px;text-transform:uppercase;font-family:'IBM Plex Mono',monospace}
.mw-spot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}
.mw-spot{background:#0e1526;border:1px solid var(--line);border-radius:9px;padding:10px 12px}
.mw-spot b{display:block;font-size:13px;color:var(--ink)}
.mw-spot span{display:block;font-size:11px;color:var(--sky);margin:1px 0 6px}
.mw-spot em{font-style:normal;font-size:11.5px;line-height:1.5;color:var(--dim)}
.mw-spots-foot{margin-top:13px;font-size:12.5px;color:var(--dim);line-height:1.55;border-top:1px solid var(--line);padding-top:11px}
@media(max-width:820px){
  .mw-gk{grid-template-columns:1fr}
  .mw-spot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .mw-spot-grid{grid-template-columns:1fr}
}

/* ===== onboarding tour + deep-link toast ===== */
/* The scrim is now just an invisible click-catcher that blocks the page while a
   tour step is up. All the dimming is done by the spotlight's surround (below),
   which has a real hole, so the highlighted box is genuinely clear — never blurred. */
.tour-scrim{position:fixed;inset:0;z-index:398;background:transparent;
  opacity:0;transition:opacity .3s;pointer-events:none}
.tour-scrim.on{opacity:1;pointer-events:auto}
/* interactive step: let clicks/scroll reach the highlighted box */
.tour-scrim.pass{pointer-events:none}
.tour-card{position:fixed;z-index:401;max-width:340px;width:calc(100vw - 40px);
  background:linear-gradient(180deg,#141d33,#0d1424);border:1px solid var(--line);
  border-radius:16px;padding:20px 22px 18px;box-shadow:0 24px 70px -18px rgba(0,0,0,.85);
  opacity:0;transform:translateY(8px) scale(.98);transition:opacity .3s,transform .3s;
  /* A long step on a short screen used to push the buttons past the bottom of
     the window. Cap the card at the viewport, let the body text scroll, and
     keep the button row pinned so Next / Start exploring is always reachable. */
  display:flex;flex-direction:column;
  max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px)}
#tBody{overflow-y:auto;overscroll-behavior:contain;flex:1 1 auto;min-height:0}
.tour-card .tour-row{flex:0 0 auto}
.tour-card{pointer-events:none}.tour-card.on{opacity:1;transform:none;pointer-events:auto}
.tour-step{font-family:var(--mono,monospace);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--sky);margin-bottom:8px}
.tour-card h3{margin:0 0 8px;font-family:var(--display);font-size:19px;letter-spacing:.01em}
.tour-card p{margin:0 0 16px;font-size:14px;line-height:1.6;color:var(--dim)}
.tour-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tour-dots{display:flex;gap:6px;flex:1 1 auto;min-width:0;overflow:hidden;flex-wrap:nowrap}
.tour-dots i{width:6px;height:6px;border-radius:50%;background:var(--line);transition:.25s}
.tour-dots i.on{background:var(--gold);width:18px;border-radius:3px}
.tour-btns{display:flex;gap:8px;flex:0 0 auto}
.tour-btns button{font-family:inherit;font-size:13px;border-radius:9px;padding:9px 15px;
  cursor:pointer;border:1px solid var(--line);transition:.18s;min-height:40px}
.tour-skip{background:transparent;color:var(--dim)}
.tour-skip:hover{color:var(--ink)}
.tour-next{background:var(--gold);color:#1a1204;border-color:var(--gold);font-weight:600}.tour-skip,.tour-next{min-height:40px;padding:9px 16px;white-space:nowrap;touch-action:manipulation}
.tour-next:hover{filter:brightness(1.08)}
.tour-spot{position:fixed;z-index:399;border-radius:14px;pointer-events:none;
  box-shadow:0 0 0 4px rgba(242,196,109,.95),0 0 0 9999px rgba(4,7,16,.68);
  transition:all .34s cubic-bezier(.4,0,.2,1);opacity:0}
/* a gentle pulse so people notice the highlighted area invites interaction */
.tour-spot.live{box-shadow:0 0 0 4px rgba(242,196,109,.95),0 0 22px 4px rgba(242,196,109,.35),0 0 0 9999px rgba(4,7,16,.68);
  animation:tourPulse 1.9s ease-in-out infinite}
@keyframes tourPulse{0%,100%{box-shadow:0 0 0 4px rgba(242,196,109,.95),0 0 22px 4px rgba(242,196,109,.30),0 0 0 9999px rgba(4,7,16,.68)}
  50%{box-shadow:0 0 0 4px rgba(242,196,109,1),0 0 30px 8px rgba(242,196,109,.5),0 0 0 9999px rgba(4,7,16,.66)}}
.tour-spot.on{opacity:1}
@media(prefers-reduced-motion:reduce){
  .tour-scrim,.tour-card,.tour-spot{transition:none}
  .tour-spot.live{animation:none}
}

/* the little "link copied" toast used by the share button */
.share-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  z-index:420;background:#141d33;border:1px solid var(--line);border-radius:999px;
  padding:11px 20px;font-size:13.5px;color:var(--ink);box-shadow:0 12px 34px rgba(0,0,0,.5);
  opacity:0;transition:opacity .28s,transform .28s;pointer-events:none}
.share-toast.on{opacity:1;transform:translateX(-50%)}

/* a "share this" button inside each dossier */
.d-share{display:inline-flex;align-items:center;gap:7px;margin-top:4px;
  background:transparent;border:1px solid var(--line);color:var(--sky);
  border-radius:9px;padding:8px 13px;font:inherit;font-size:12.5px;cursor:pointer;transition:.18s}
.d-share:hover{border-color:var(--sky);color:var(--ink)}

/* replay-tour hint in the footer */
.tour-replay{background:none;border:none;color:var(--sky);cursor:pointer;
  font:inherit;font-size:inherit;text-decoration:underline;padding:0}


.typesblock{margin:0 0 46px}
.types-deck{margin-top:4px}
.types-lede{max-width:min(100%,1100px)}
.typegroup{margin:26px 0 0}
.typegroup-h{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.typelist{display:flex;flex-direction:column;gap:10px}

/* ---- true-scale planet comparison ---------------------------------------- */
.sizecmp{margin:26px 0 8px}
.sizesub{font-family:var(--display);font-size:15px;letter-spacing:.02em;color:var(--star);
  margin:22px 0 2px;font-weight:400}
.dwarfrow{min-height:330px}
/* the note reads better beside this row than under it, and the row is short
   enough that the space to its right would otherwise go to waste */
.dwarfsplit{display:flex;align-items:stretch;gap:22px}
.dwarfsplit .sizescroll{flex:1 1 auto;min-width:0}
.sizenote-aside{flex:0 0 clamp(220px,26%,320px);align-self:center;margin:0}
@media(max-width:900px){
  .dwarfsplit{flex-direction:column;gap:6px}
  .sizenote-aside{flex:1 1 auto;align-self:stretch}
}
.sizescroll{overflow-x:auto;overflow-y:hidden;padding:10px 0 4px;
  overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
/* Columns stretch to full height and the cards sit at the top of that space,
   so a card is never clipped by the scroller and never depends on how tall its
   own planet happens to be. The side padding gives the end columns somewhere to
   put a card that is wider than they are. */
.sizerow{display:flex;align-items:stretch;gap:22px;min-height:420px;padding:0 130px}
.sizeitem{position:relative;flex:0 0 auto;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;min-width:62px;cursor:pointer;
  padding-bottom:26px;background:none;border:0;font:inherit;color:inherit}
/* the disc is truly proportional, so the hover target is the whole column */
.sizeitem:focus-visible{outline:2px solid var(--sky);outline-offset:4px;border-radius:10px}
.pv{border-radius:50%;position:relative;flex:0 0 auto;
  box-shadow:inset -6px -5px 16px rgba(0,0,8,.62), 0 0 12px rgba(140,180,255,.10)}
.sizeitem .cap{position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);white-space:nowrap}
.sizeitem:hover .cap,.sizeitem:focus-visible .cap{color:var(--star)}
.sizeitem .tick{width:1px;height:8px;background:var(--line);margin:5px 0 0}
.sizeitem .dw{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--rose);white-space:nowrap;opacity:.85}
.sizeitem.isdwarf{padding-bottom:38px}

/* the hover card */
.pvcard{position:absolute;top:6px;left:50%;transform:translateX(-50%) translateY(4px);
  width:244px;background:rgba(11,17,34,.97);border:1px solid var(--line);border-radius:11px;
  padding:11px 13px;text-align:left;opacity:0;pointer-events:none;transition:.18s;z-index:6;
  box-shadow:0 16px 40px -12px rgba(0,0,0,.85)}
.sizeitem:hover .pvcard,.sizeitem:focus-visible .pvcard,.sizeitem.open .pvcard{opacity:1;transform:translateX(-50%)}
.pvcard dd{overflow-wrap:anywhere}
.pvcard b{display:block;font-family:var(--display);font-size:13px;color:var(--star);
  letter-spacing:.02em;margin-bottom:5px}
.pvcard dl{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;margin:0}
.pvcard dt{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.pvcard dd{font-size:11.5px;color:#cfdcf5;margin:0}
.sizenote{font-size:12px;color:var(--dim);line-height:1.6;margin:10px 0 0;max-width:min(100%,1100px)}

/* the Sun: at this scale only its limb fits, so show the limb */
.sunlimb{position:relative;flex:0 0 auto;overflow:hidden;align-self:flex-end;
  border-radius:12px 0 0 12px;border:1px solid var(--line);border-right:0}
.sunlimb i{position:absolute;display:block;border-radius:50%;
  background:radial-gradient(circle at 32% 30%,#fffdf2 0 16%,#ffe9a8 34%,#ffb347 66%,#f08a20 100%);
  box-shadow:0 0 90px 24px rgba(255,170,60,.35)}
.sunlimb .cap{position:absolute;left:14px;bottom:12px;max-width:210px;z-index:2;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:#3a2a08;text-shadow:0 1px 0 rgba(255,255,255,.35)}

/* --- surfaces: real colours, and the markings each world is known for --- */
.pv-mercury{background:radial-gradient(circle at 34% 30%,#a9a49c 0 30%,#7d7871 62%,#4a4641 100%),
  radial-gradient(circle at 62% 58%,rgba(60,56,52,.5) 0 9%,transparent 10%)}
.pv-venus{background:radial-gradient(circle at 34% 30%,#f6e6bd 0 30%,#e3c98d 60%,#a8834a 100%),
  linear-gradient(28deg,rgba(255,255,255,.18) 0 12%,transparent 13% 42%,rgba(255,255,255,.12) 43% 52%,transparent 53%)}
.pv-earth{background:radial-gradient(circle at 30% 26%,#bfe0ff 0 8%,transparent 9%),
  radial-gradient(ellipse 30% 22% at 62% 40%,#5c9c52 0 60%,transparent 62%),
  radial-gradient(ellipse 22% 26% at 36% 66%,#4e8c48 0 60%,transparent 62%),
  radial-gradient(circle at 50% 50%,rgba(255,255,255,.30) 0 12%,transparent 40%),
  radial-gradient(circle at 34% 30%,#3d86d8 0 40%,#1f5798 74%,#0e3162 100%)}
.pv-mars{background:radial-gradient(circle at 50% 8%,rgba(255,255,255,.85) 0 9%,transparent 11%),
  radial-gradient(ellipse 26% 16% at 60% 56%,rgba(96,52,32,.75) 0 60%,transparent 64%),
  radial-gradient(circle at 34% 30%,#e08b56 0 30%,#b4552c 62%,#6d2f18 100%)}
.pv-jupiter{background:
  linear-gradient(#00000000 0 6%,rgba(120,84,54,.55) 7% 12%,#00000000 13% 20%,
    rgba(232,209,178,.55) 21% 28%,#00000000 29% 36%,rgba(146,101,64,.55) 37% 45%,
    #00000000 46% 54%,rgba(226,201,168,.5) 55% 63%,#00000000 64% 72%,
    rgba(129,90,58,.5) 73% 80%,#00000000 81%),
  radial-gradient(ellipse 15% 9% at 68% 62%,#d2603f 0 62%,transparent 66%),
  radial-gradient(circle at 34% 30%,#e8cfa8 0 30%,#c9a377 62%,#8a6238 100%)}
.pv-saturn{background:
  linear-gradient(#00000000 0 12%,rgba(196,166,112,.45) 13% 22%,#00000000 23% 40%,
    rgba(232,213,170,.45) 41% 52%,#00000000 53% 70%,rgba(190,160,108,.4) 71% 80%,#00000000 81%),
  radial-gradient(circle at 34% 30%,#f0dcae 0 30%,#cfae74 62%,#8f7440 100%)}
.pv-saturn::after{content:"";position:absolute;left:50%;top:50%;
  width:230%;height:26%;transform:translate(-50%,-50%) rotate(-16deg);
  border-radius:50%;border:2px solid rgba(226,206,164,.55);
  box-shadow:0 0 0 3px rgba(226,206,164,.16);pointer-events:none}
.pv-uranus{background:radial-gradient(circle at 34% 30%,#cdf0f2 0 32%,#8fd3dd 64%,#4e97a8 100%)}
.pv-neptune{background:radial-gradient(ellipse 16% 11% at 62% 58%,rgba(20,40,110,.75) 0 60%,transparent 64%),
  radial-gradient(circle at 34% 30%,#7fb2f0 0 30%,#3a68c8 62%,#1b3a86 100%)}
.pv-ceres{background:radial-gradient(circle at 62% 42%,rgba(255,255,255,.9) 0 7%,transparent 9%),
  radial-gradient(circle at 34% 30%,#a49b8c 0 30%,#7b7365 62%,#48423a 100%)}
.pv-haumea{background:radial-gradient(circle at 34% 30%,#f2efe8 0 32%,#cdc7bb 64%,#807a6f 100%)}
.pv-makemake{background:radial-gradient(circle at 34% 30%,#d59a70 0 30%,#a8603a 62%,#5f3320 100%)}
.pv-eris{background:radial-gradient(circle at 34% 30%,#f4f2ec 0 34%,#cfcbc0 66%,#7e7a71 100%)}
.pv-pluto{background:radial-gradient(ellipse 30% 24% at 58% 60%,rgba(240,228,206,.85) 0 60%,transparent 64%),
  radial-gradient(circle at 34% 30%,#c9b49a 0 30%,#96806a 62%,#5c4d3f 100%)}

@media(max-width:640px){
  .sizerow{gap:16px;min-height:min(68vh,520px);padding:0 90px}
  .sizeitem{min-width:52px}
  .pvcard{width:210px}
}


/* ---- jump-to control -------------------------------------------------------
   Mirrors the sound toggle on the opposite corner, and sits above the dossier
   overlay (z 50) so it stays usable from inside a popup. */
.jumpbtn{position:fixed;right:14px;top:calc(14px + env(safe-area-inset-top));z-index:160;
  display:flex;align-items:center;gap:9px;padding:9px 14px;border-radius:999px;
  background:rgba(10,16,32,.86);border:1px solid var(--line);color:var(--dim);
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  cursor:pointer;transition:color .25s,border-color .25s;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent}
/* A dossier puts its close button in the same top-right corner, and this sits
   above it at z-index 160 - it was swallowing every click on the X. While a
   panel is open, move to the opposite corner: still reachable from inside a
   dossier, as intended, but no longer covering the way out of one. */
body.sheet-open .jumpbtn{right:auto;left:14px}
@media(max-width:640px){body.sheet-open .jumpbtn{right:auto;left:14px}}
.jumpbtn:hover,.jumpbtn:focus-visible{color:var(--star);
  border-color:color-mix(in srgb,var(--sky) 45%,var(--line))}
.jumpbtn:focus-visible{outline:2px solid var(--sky);outline-offset:3px}
.jumpbtn .jk{width:13px;height:13px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7}

.jumpwrap{position:fixed;inset:0;z-index:161;display:none}
.jumpwrap.open{display:block}
.jumpscrim{position:absolute;inset:0;background:rgba(3,6,14,.35)}
.jumppanel{position:absolute;right:14px;top:calc(62px + env(safe-area-inset-top));
  width:min(340px,calc(100vw - 28px));max-height:min(60vh,460px);max-height:min(60dvh,460px);
  display:flex;flex-direction:column;overflow:hidden;
  background:linear-gradient(180deg,#141d33,#0d1424);border:1px solid var(--line);
  border-radius:14px;box-shadow:0 24px 70px -18px rgba(0,0,0,.85)}
.jumphead{padding:12px 13px 9px;border-bottom:1px solid var(--line);flex:0 0 auto}
.jumphead label{display:block;font-family:'IBM Plex Mono',monospace;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:7px}
#jumpInput{width:100%;padding:9px 11px;border-radius:9px;background:rgba(6,10,22,.9);
  border:1px solid var(--line);color:var(--star);font-family:inherit;font-size:14px}
#jumpInput:focus{outline:none;border-color:color-mix(in srgb,var(--sky) 55%,var(--line))}
#jumpInput::placeholder{color:#61708f}
.jumplist{list-style:none;margin:0;padding:6px;overflow-y:auto;flex:1 1 auto;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.jumplist li{margin:0}
.jumpitem{display:flex;align-items:baseline;gap:9px;width:100%;text-align:left;
  padding:9px 11px;border-radius:9px;background:none;border:0;cursor:pointer;
  color:var(--star);font:inherit;font-size:13.5px;min-height:40px;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.jumpitem .jsub{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dim);margin-left:auto;white-space:nowrap}
.jumpitem:hover,.jumpitem[aria-selected="true"]{background:rgba(143,212,255,.14)}
.jumpitem[aria-selected="true"]{outline:1px solid color-mix(in srgb,var(--sky) 45%,transparent)}
.jumpempty{padding:14px 12px;color:var(--dim);font-size:12.5px}
@media(max-width:640px){
  .jumpbtn .jlabel{display:none}
  .jumpbtn{padding:10px;border-radius:50%}
  .jumppanel{left:14px;right:14px;width:auto;top:calc(66px + env(safe-area-inset-top))}
  /* clear of the hamburger, which owns the top-right corner on small screens */
  .jumpbtn{right:66px}
}
@media(prefers-reduced-motion:reduce){.jumpbtn{transition:none}}

/* ---- sonification controls ---- */
.soundtoggle{position:fixed;left:14px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:140;
  display:flex;align-items:center;gap:9px;padding:9px 14px 9px 11px;border-radius:999px;
  background:rgba(10,16,32,.86);border:1px solid var(--line);color:var(--dim);
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  cursor:pointer;transition:color .25s,border-color .25s,background .25s;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.soundtoggle:hover{color:var(--star);border-color:color-mix(in srgb,var(--sky) 45%,var(--line))}
.soundtoggle.on{color:var(--sky);border-color:color-mix(in srgb,var(--sky) 55%,var(--line))}
.soundtoggle.armed{border-color:color-mix(in srgb,var(--gold) 45%,var(--line))}
/* blocked by the browser's autoplay policy, waiting for any interaction */
.soundtoggle.pending{color:var(--gold);border-color:color-mix(in srgb,var(--gold) 55%,var(--line))}
.sbars{display:flex;align-items:flex-end;gap:2px;height:14px}
.sbars i{display:block;width:2px;background:currentColor;border-radius:1px;height:5px}
.soundtoggle.on .sbars i{animation:sbar 1.1s ease-in-out infinite}
.soundtoggle.on .sbars i:nth-child(2){animation-delay:.18s}
.soundtoggle.on .sbars i:nth-child(3){animation-delay:.36s}
.soundtoggle.on .sbars i:nth-child(4){animation-delay:.54s}
@keyframes sbar{0%,100%{height:4px}50%{height:14px}}
.sbars.off i:nth-child(2){height:8px}.sbars.off i:nth-child(3){height:6px}
@media(max-width:640px){.slabel{display:none}.soundtoggle{padding:10px;border-radius:50%}}
@media(prefers-reduced-motion:reduce){.soundtoggle.on .sbars i{animation:none;height:9px}}

/* the "hear it spin" control inside a dossier */
.d-sonify{margin:14px 0 4px;display:flex;flex-direction:column;gap:7px}
.sonbtn{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  padding:10px 16px;border-radius:10px;cursor:pointer;min-height:44px;
  background:rgba(143,212,255,.10);border:1px solid color-mix(in srgb,var(--sky) 40%,var(--line));
  color:var(--sky);transition:background .2s,border-color .2s;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.sonbtn:hover{background:rgba(143,212,255,.18)}
.sonicon{width:0;height:0;border-left:9px solid currentColor;
  border-top:6px solid transparent;border-bottom:6px solid transparent}
.sonbtn.playing .sonicon{width:9px;height:12px;border:none;background:currentColor;
  clip-path:polygon(0 0,3px 0,3px 100%,0 100%,0 0,6px 0,9px 0,9px 100%,6px 100%)}
.sonbtn.playing{background:rgba(143,212,255,.2)}
.sonnote{font-size:11.5px;line-height:1.55;color:var(--dim);max-width:46ch;margin:0}

/* ---- animated pulsar in the dossier ---- */
.pulsarwrap{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
.pulsarviz{position:relative;width:220px;height:220px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 50% 50%,#0a1024 0 58%,#05080f 100%)}
.pv-halo{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(140,190,255,.22) 0 18%,transparent 58%)}
/* the rotor carries both beams; one turn = one pulse past the observer */
.pv-rotor{position:absolute;inset:0;display:block;
  animation:pvspin var(--spin,1s) linear infinite;
  transform-origin:50% 50%}
.pv-beam{position:absolute;left:50%;top:50%;display:block;
  width:132px;height:34px;margin:-17px 0 0 0;transform-origin:0 50%;
  background:linear-gradient(90deg,rgba(190,225,255,.85) 0%,rgba(150,200,255,.34) 42%,transparent 100%);
  clip-path:polygon(0 46%,100% 0,100% 100%,0 54%);
  /* magnetic axis tilted ~22 degrees off the spin axis, as in a real pulsar */
  transform:rotate(-22deg)}
.pv-beam.alt{transform:rotate(158deg)}
.pv-core{position:absolute;width:26px;height:26px;border-radius:50%;
  background:radial-gradient(circle at 40% 36%,#fff 0 42%,#bcdcff 70%,#6f9dff 100%);
  box-shadow:0 0 22px 6px rgba(150,200,255,.55)}
.pulsarviz.beating .pv-core{animation:pvbeat var(--spin,1s) ease-out infinite}
@keyframes pvspin{to{transform:rotate(360deg)}}
@keyframes pvbeat{0%{box-shadow:0 0 34px 12px rgba(190,225,255,.85)}
  40%,100%{box-shadow:0 0 18px 5px rgba(150,200,255,.45)}}
.pv-note{font-size:11.5px;line-height:1.55;color:var(--dim);text-align:center;max-width:44ch;margin:0}
@media(prefers-reduced-motion:reduce){
  .pv-rotor,.pulsarviz.beating .pv-core{animation:none}
}
@media(max-width:640px){.pulsarviz{width:180px;height:180px}.pv-beam{width:108px}}

/* pulsar shelf glyph: a neutron star with two sweeping beams */
.gl-pulsar{background:
  conic-gradient(from 0deg,transparent 0 9deg,rgba(160,205,255,.75) 11deg 15deg,transparent 17deg 189deg,rgba(160,205,255,.75) 191deg 195deg,transparent 197deg),
  radial-gradient(circle,#ffffff 0 20%,#9fd0ff 34%,rgba(70,110,210,.35) 55%,transparent 72%);
  box-shadow:0 0 16px rgba(140,190,255,.4)}

/* field-guide thumbnail: photograph for categories with a representative
   instrument, schematic for the ones that describe an orbit or a purpose */
.typethumb{width:86px;height:86px;border-radius:9px;overflow:hidden;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 40% 34%,rgba(90,120,200,.20),rgba(6,10,22,.85));
  border:1px solid var(--line);color:var(--tt,var(--sky))}
.typethumb.isphoto{background:#06101f}
.typethumb img{width:100%;height:100%;object-fit:cover;display:block}
.typethumb svg{width:58px;height:58px;display:block}
@media(max-width:640px){.typethumb{width:64px;height:64px}.typethumb svg{width:44px;height:44px}}
@media(prefers-reduced-motion:no-preference){.typerow:hover .typethumb{border-color:color-mix(in srgb,var(--tt) 50%,var(--line))}}
.typerow{display:grid;grid-template-columns:4px 86px 1fr auto;gap:16px;align-items:center;
  background:linear-gradient(100deg,color-mix(in srgb,var(--tt) 9%,transparent),transparent 60%);
  border:1px solid var(--line);border-radius:12px;padding:14px 16px;transition:border-color .25s,transform .25s}
.typerow:hover{border-color:color-mix(in srgb,var(--tt) 55%,var(--line));transform:translateX(3px)}
.typebar{width:4px;align-self:stretch;border-radius:4px;background:var(--tt);box-shadow:0 0 14px color-mix(in srgb,var(--tt) 60%,transparent)}
.typename{font-family:'IBM Plex Sans',sans-serif;font-weight:600;font-size:15px;color:var(--star);margin-bottom:3px}
.typedesc{margin:0;font-size:13.5px;line-height:1.55;color:var(--dim)}
.typedoc{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;white-space:nowrap;
  color:var(--tt);text-decoration:none;padding:6px 11px;border:1px solid color-mix(in srgb,var(--tt) 40%,transparent);
  border-radius:999px;transition:background .25s,color .25s}
.typedoc:hover{background:color-mix(in srgb,var(--tt) 18%,transparent);color:var(--star)}
@media(max-width:640px){.typerow{grid-template-columns:4px 64px 1fr;gap:10px}.typedoc{grid-column:3;justify-self:start;margin-top:4px}}