@font-face {
  font-family: Geist;
  src: url("geist.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --bg:#080b12; --text:#f7f6f3; --muted:#c0bfbd; --accent:#f5f2ea;
  --line:#a5b8d237; --button-ink:#081020;
  --panel-bg:#f4f8fff2; --panel-ink:#181d27; --panel-muted:#4b4f57;
  --panel-accent:#263044; --panel-line:#a7b6c9; --panel-inset:#e9f0fa;
  --gutter:clamp(20px,4.5vw,88px); --header:76px;
  --ease:cubic-bezier(.2,.72,.22,1); color-scheme:dark;
}
.knowledge {
  --bg:#e9e8f7; --text:var(--panel-ink); --muted:var(--panel-muted); --accent:var(--panel-accent);
  --line:#bcb9d6; --button-ink:#fff; --track:#aaa7cf; color-scheme:light;
}
*,*::before,*::after { box-sizing:border-box; }
[hidden] { display:none !important; }
html { background:var(--bg); scroll-padding-top:var(--header); scroll-behavior:smooth; }
body { margin:0; color:var(--text); font-family:Geist,Inter,Arial,sans-serif; background:var(--bg); }
body.portal { isolation:isolate; }
.portal-sky {
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-position:center; background-size:cover; background-repeat:no-repeat;
}
@media (prefers-reduced-motion:no-preference) {
  @view-transition { navigation:auto; }
  ::view-transition-group(root) { animation-duration:250ms; animation-timing-function:ease-in-out; }

  @supports (animation-timeline:scroll(root block)) and (animation-range:0px 1800px) {
    .portal-sky::after {
      content:""; position:absolute; inset:-18px 0;
      background-image:
        radial-gradient(circle at 17% 27%,#e1ecff91 0,.7px,transparent 1.3px),
        radial-gradient(circle at 79% 62%,#b4d7e56b 0,.55px,transparent 1.15px),
        radial-gradient(circle at 42% 88%,#c7d7f17d 0,.75px,transparent 1.35px);
      background-size:227px 281px,313px 193px,379px 263px;
      animation:portal-stars-drift linear both;
      animation-duration:auto;
      animation-timeline:scroll(root block);
      animation-range:0px 1800px;
    }
    @keyframes portal-stars-drift { from { translate:0 0; } to { translate:0 -16px; } }
  }
}
button,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button { color:inherit; cursor:pointer; }
a { color:inherit; }
:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.masthead {
  height:var(--header); position:sticky; top:0; z-index:4; padding-inline:var(--gutter);
  display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line);
  background:#080b12f0; backdrop-filter:blur(16px);
}
.brand { display:flex; align-items:center; gap:12px; font-size:clamp(16px,2vw,25px); letter-spacing:-.055em; font-weight:720; text-decoration:none; }
.brand-mark { width:22px; aspect-ratio:1; border-radius:50%; box-shadow:-6px 2px 0 0 var(--accent); margin-left:6px; transform:rotate(-19deg); }
.nav { display:flex; align-self:stretch; gap:clamp(14px,3.4vw,54px); }
.nav a { display:grid; place-items:center; position:relative; text-decoration:none; color:var(--muted); font-size:clamp(14px,1.5vw,18px); transition:color 180ms; }
.nav a:hover,.nav a[aria-current] { color:var(--accent); }
.nav a[aria-current]::after { content:""; position:absolute; inset:auto 0 -1px; height:2px; background:currentColor; }
.skip-link {
  position:fixed; z-index:8; top:8px; left:var(--gutter); transform:translateY(-150%);
  padding:12px 18px; border-radius:8px; background:var(--accent); color:var(--button-ink);
}
.skip-link:focus { transform:none; }
.text-link { display:inline-flex; align-items:baseline; gap:.45em; width:fit-content; color:var(--accent); text-underline-offset:.22em; text-decoration-color:color-mix(in srgb,var(--accent),transparent 45%); }
.text-link:hover { text-decoration-color:currentColor; }
.knowledge {
  background:var(--bg); color:var(--text); padding:clamp(48px,9vw,132px) var(--gutter);
}
.portal-knowledge {
  position:relative; isolation:isolate; overflow:clip;
}
.portal-earth {
  position:absolute; right:clamp(16px,5vw,90px); bottom:clamp(26px,4vw,74px);
  width:clamp(208px,39vw,620px); aspect-ratio:1; z-index:-1; pointer-events:none;
  background:center / contain no-repeat;
}
@media (max-width:690px) {
  .portal-earth {
    right:clamp(12px,4vw,28px); bottom:clamp(90px,20vw,125px);
    width:min(72vw,400px);
  }
}
@media (prefers-reduced-motion:no-preference) {
  @supports (animation-timeline:view(block)) and (animation-range:entry) {
    .portal-earth {
      animation:portal-earth-reveal ease-out both;
      animation-duration:auto;
      animation-timeline:view(block);
      animation-range:entry;
    }
    @keyframes portal-earth-reveal {
      from { opacity:0; }
      to { opacity:1; }
    }
  }
}
.portal-home .knowledge {
  --bg:#080b12; --text:inherit; --muted:inherit; --accent:inherit;
  --line:#a5b8d25c; --button-ink:#081020; color-scheme:dark;
  background:transparent;
}
.portal-home .guide { border-top:0; }
.portal-home .guide-grid {
  padding:clamp(18px,3vw,38px); border-radius:clamp(16px,2vw,24px);
}
.portal-home .calendar-download { border-color:#7f9ab8; color:var(--accent); }
.portal-home .calendar-download:hover { background:#17273b; }

.reading { max-width:1420px; margin:auto; }
.home-discovery-region { padding-top:clamp(16px,2.5vw,36px); }
.knowledge h2 { margin:0; font-size:clamp(42px,6.2vw,104px); font-weight:720; letter-spacing:-.075em; line-height:1; }
.knowledge p { margin:18px 0 0; max-width:58ch; line-height:1.6; font-size:clamp(15px,1.4vw,19px); color:var(--muted); }
.knowledge .text-link { font-size:14px; font-weight:610; }
.phase-icon { display:inline-block; width:16px; height:16px; border-radius:50%; background:#22203d; border:1px solid #7774a7; }
.phase-icon.first { background:linear-gradient(90deg,#22203d 50%,#f2f1ff 50%); }
.phase-icon.full { background:#f2f1ff; }
.phase-icon.last { background:linear-gradient(90deg,#f2f1ff 50%,#22203d 50%); }
.guide { background:#f3f1fc; border-top:1px solid #cfcae6; }
.guide-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,6vw,92px); }
.guide-grid h2 { font-size:clamp(40px,5vw,80px); }
.guide .text-link { margin-top:20px; }
.questions details { border-bottom:1px solid var(--line); padding:14px 0 16px; }
.questions details:first-child { border-top:1px solid var(--line); }
.questions summary { cursor:pointer; font-weight:660; font-size:clamp(15px,1.4vw,20px); }
.questions details p { margin-top:10px; font-size:16px; }
.footer {
  padding:clamp(32px,5vw,72px) var(--gutter);
  border-top:1px solid var(--line);
  background:linear-gradient(140deg,#111a29,var(--bg) 62%);
}
.footer-inner {
  max-width:1420px; margin:auto; display:grid;
  grid-template-columns:minmax(175px,1fr) minmax(0,3fr); align-items:start;
  gap:clamp(24px,5vw,80px);
}
.footer-brand { display:grid; justify-items:start; gap:12px; }
.footer-brand .brand { width:fit-content; }
.footer .text-link { color:var(--muted); min-height:44px; align-items:center; font-size:14px; }
.footer-nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px 26px; }
.footer-nav h2 { margin:2px 0 8px; color:var(--text); font-size:15px; font-weight:690; }
.footer-nav ul { list-style:none; padding:0; margin:0; }
.footer-nav a {
  display:flex; align-items:center; width:fit-content; min-height:38px;
  color:var(--muted); font-size:14px; line-height:1.35; text-decoration:none;
}
.footer-nav a:hover,.footer-nav a[aria-current] {
  color:var(--accent); text-decoration:underline; text-underline-offset:.25em;
}
@media (max-width:850px) {
  .footer-inner { grid-template-columns:1fr; }
  .footer-brand { display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; }
}
@media (max-width:560px) {
  .footer-nav { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 14px; }
  .footer-nav a { min-height:44px; }
}
@media (max-width:760px) {
  .guide-grid { grid-template-columns:1fr; }
}
@media (max-width:530px) {
  .masthead { gap:8px; }
  .brand { gap:8px; }
  .brand-mark { width:16px; }
  .nav { gap:clamp(8px,2.5vw,13px); }
  .nav a { font-size:13px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none !important; transition:none !important; }
}
/* Daily lunar map */
.moon-guide {
  --observation-width:390px;
  padding:clamp(26px,3.1vw,50px) var(--gutter) clamp(30px,5vw,74px);
  background:radial-gradient(ellipse 74% 55% at 46% 45%,#0b13217d,transparent);
}
.moon-heading {
  position:relative; z-index:1; max-width:1400px; margin:auto;
  display:grid; grid-template-columns:minmax(0,1fr) var(--observation-width);
  align-items:center; gap:clamp(20px,3vw,48px);
}
.moon-title-block { text-align:center; }
.moon-heading:has(.local-observation[hidden]) { grid-template-columns:1fr; }
.moon-heading h1 { margin:0; font-size:clamp(32px,4.65vw,76px); line-height:1.02; letter-spacing:-.069em; font-weight:730; }
.moon-date-nav {
  width:min(100%,clamp(276px,32vw,365px)); margin:8px auto 0;
  display:grid; grid-template-columns:44px minmax(0,1fr) 44px; align-items:center; gap:6px;
}
.moon-date-nav button {
  display:grid; place-items:center; width:44px; height:44px; padding:0;
  border:1px solid var(--line); border-radius:50%; background:#131b28; color:var(--accent);
  transition:background 180ms,border-color 180ms;
}
.moon-date-nav button:hover:not([aria-disabled=true]) { background:#23374e; border-color:var(--accent); }
.moon-date-nav button[aria-disabled=true] { opacity:.43; cursor:default; }
.moon-date-nav button span { width:9px; height:9px; border:solid currentColor; border-width:2px 2px 0 0; rotate:45deg; translate:-1px 0; }
#previous-day span { rotate:-135deg; translate:1px 0; }
.moon-date { margin:0; display:flex; align-items:baseline; justify-content:center; flex-wrap:wrap; gap:2px 7px; }
.moon-date span { color:var(--accent); font-size:13px; font-weight:700; }
.moon-date time { color:var(--text); font-size:clamp(15px,1.6vw,22px); letter-spacing:-.025em; }
.observatory { position:relative; max-width:1400px; margin:18px auto 0; display:grid; grid-template-columns:minmax(0,1fr) var(--observation-width); align-items:center; gap:clamp(26px,4vw,64px); }
.moon-visual { display:grid; place-items:center; padding:4px 0 12px; min-width:0; }
.moon-object {
  position:relative; width:min(100%,max(325px,calc(100svh - 267px)),650px); aspect-ratio:1; isolation:isolate;
  animation:moon-arrival 700ms var(--ease) both;
}
@keyframes moon-arrival { from { opacity:.35; scale:.975; } to { opacity:1; scale:1; } }
.moon-object::before {
  content:""; position:absolute; inset:1%; z-index:-1; border-radius:50%;
  background:radial-gradient(circle at 70% 40%,#151b25,#0b1018 73%);
  box-shadow:0 0 65px #92bae01d;
}
#phase-moon { display:block; position:absolute; inset:0; width:100%; height:100%; border-radius:50%; }
.moon-markers { position:absolute; inset:0; pointer-events:none; }
.moon-pin {
  position:absolute; left:var(--x); top:var(--y); width:44px; height:44px; translate:-50% -50%;
  display:grid; place-items:center; border:0; border-radius:50%; padding:0; background:transparent;
  color:#d9edff; pointer-events:auto; transition:color 180ms;
}
.moon-pin::before {
  content:""; width:21px; aspect-ratio:1; border:2px solid currentColor; border-radius:50%;
  background:radial-gradient(circle,currentColor 0 22%,#0a101ad4 25% 100%);
  box-shadow:0 0 13px #0b1428a8; transition:scale 200ms var(--ease), box-shadow 200ms;
}
.moon-pin:hover,.moon-pin[aria-pressed=true],.moon-pin:focus-visible { color:#a5d8ff; z-index:2; }
.moon-pin:hover::before,.moon-pin[aria-pressed=true]::before,.moon-pin:focus-visible::before { scale:1.22; box-shadow:0 0 17px #74c5fdab; }
.pin-label {
  position:absolute; left:calc(50% + 16px); width:max-content; max-width:11ch; text-align:left;
  color:#f4f8ff; font-size:clamp(10px,1vw,14px); font-weight:680; line-height:1.05;
  text-shadow:0 1px 5px #000,0 0 7px #000;
}
.moon-pin[data-side=left] .pin-label { left:auto; right:calc(50% + 16px); text-align:right; }
.portal-home .phase-info {
  min-width:0; padding:clamp(12px,1.7vw,20px); border-radius:16px; overflow-wrap:anywhere;
}
.portal-home .phase-info:not(:has(> :not([hidden]))) { display:none; }
.phase-info .phase-stats:not([hidden]) + .feature-panel:not([hidden]) {
  margin-top:18px; padding-top:16px; border-top:1px solid var(--line);
}
.meta-label { margin:0 0 9px; color:var(--accent); font-size:11px; text-transform:uppercase; letter-spacing:.13em; font-weight:700; }
.phase-stats h2 { margin:0; font-size:clamp(26px,3vw,44px); line-height:1; letter-spacing:-.056em; font-weight:720; }
.illumination { margin:9px 0 0; display:flex; flex-wrap:wrap; align-items:baseline; gap:5px 8px; }
.illumination strong { font-size:clamp(33px,4vw,54px); line-height:1; color:var(--accent); font-variant-numeric:tabular-nums; letter-spacing:-.06em; }
.illumination span,.phase-note,.feature-panel p:not(.meta-label) { color:var(--muted); font-size:14px; line-height:1.45; }
.phase-note { margin:9px 0 0; }
.feature-panel h3 { margin:4px 0; font-size:21px; letter-spacing:-.04em; }
.feature-panel p:not(.meta-label) { margin:6px 0 0; }
.feature-latin { font-style:italic; }
@media(max-width:880px) {
  .observatory { gap:22px; }
}
@media(max-width:690px) {
  :root { --header:66px; }
  .masthead { padding-inline:clamp(12px,3vw,20px); }
  .nav { gap:clamp(9px,2.3vw,16px); }
  .nav a { font-size:clamp(11px,2.9vw,13px); line-height:1.1; text-align:center; }
  .masthead .brand { font-size:clamp(14px,3.8vw,19px); white-space:nowrap; }
  .brand-mark { display:none; }
  .moon-guide { padding-top:24px; }
  .moon-visual { padding:2px 0 4px; }
  .moon-object { width:min(100%,470px); }
  .phase-info { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .phase-info .phase-stats:not([hidden]) + .feature-panel:not([hidden]) {
    margin:0; padding:0 0 0 12px; border-top:0; border-inline-start:1px solid var(--line);
  }
  .phase-stats h2 { font-size:24px; }
  .phase-note,.feature-panel p:not(.meta-label) { font-size:12px; }
  .feature-panel h3 { font-size:17px; }
  .moon-pin::before { width:17px; }
  .pin-label { max-width:9ch; left:calc(50% + 13px); }
  .moon-pin[data-side=left] .pin-label { right:calc(50% + 13px); }
}
@media(max-width:360px) {
  .phase-info { gap:11px; }
  .phase-stats h2 { font-size:21px; }
  .moon-heading h1 { font-size:30px; }
}
.map-credit { max-width:1400px; margin:12px auto 0; color:var(--muted); font-size:11px; }
.map-credit a { text-underline-offset:.2em; }

.local-observation {
  padding:12px 14px; border-radius:14px;
}
.local-observation-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.local-observation-heading h2 { margin:0; font-size:14px; font-weight:700; }
.local-observation select {
  display:block; max-width:54%; min-height:44px; padding:6px 9px;
  color:var(--text); background:var(--panel-inset); border:1px solid var(--line); border-radius:8px; font:inherit; font-size:14px;
}
.horizon-times { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:10px 0 0; }
.horizon-times dt,.horizon-times dd span,.lunar-horizon > p { color:var(--muted); font-size:11px; line-height:1.35; }
.horizon-times dd { margin:0; }
.horizon-times dd strong { display:block; margin:2px 0; font-size:17px; font-variant-numeric:tabular-nums; }
.horizon-times dd span { display:block; }
.lunar-horizon > p { margin:9px 0 0; }
.feature-suggestion-link {
  border:0; padding:0; min-height:28px; background:none; color:var(--accent); font-size:17px; font-weight:700;
  text-align:left; text-decoration:underline; text-underline-offset:.2em;
}
.feature-suggestion-link:disabled { opacity:.65; }
.moon-pin-recommended::before { box-shadow:0 0 0 3px #75bdf255,0 0 16px #79c3f6ab; }
.feature-panel #feature-detail { margin-top:10px; padding-top:7px; border-top:1px solid var(--line); }
.sky-events { max-width:860px; margin-top:clamp(38px,6vw,86px); }
.knowledge .sky-events h2 { font-size:clamp(29px,4.8vw,56px); }
.sky-events > p { margin-top:9px; }
.sky-events-list { list-style:none; padding:0; margin:22px 0 0; border-top:1px solid var(--line); }
.sky-events-list li { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:9px 16px; padding:11px 0; border-bottom:1px solid var(--line); }
.sky-events-list li a { color:var(--accent); font-weight:670; text-underline-offset:.18em; }
.sky-events-list time { display:block; color:var(--muted); font-size:13px; margin-top:3px; }
.calendar-download {
  min-height:44px; border:1px solid #777cae; border-radius:8px; padding:7px 11px;
  font-size:13px; background:transparent; color:var(--panel-accent); font-weight:650;
}
.calendar-download:hover { background:#dddff7; }

.home-discovery {
  --button-ink:#f8faff; --discovery-gap:clamp(18px,2.5vw,36px);
  display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); align-items:start;
  gap:var(--discovery-gap);
  border-radius:clamp(16px,2vw,24px);
  padding:clamp(16px,2.4vw,32px);
  box-shadow:0 24px 70px #04081059;
}
.home-discovery:has(> .sky-events[hidden]) { grid-template-columns:minmax(0,1fr); }
.home-discovery > * { min-width:0; }
.home-discovery .sky-events {
  max-width:none; margin:0; padding-inline-start:var(--discovery-gap);
  border-inline-start:1px solid var(--line);
}
.knowledge .home-discovery .sky-events h2 {
  font-size:clamp(24px,2.8vw,40px); line-height:1.05; letter-spacing:-.045em;
}
.home-discovery .sky-events > p { font-size:14px; }
.sky-events-links { display:flex; flex-wrap:wrap; gap:4px 14px; }
.sky-events-links .text-link { min-height:30px; align-items:center; }
.home-discovery .sky-events-list { margin-top:14px; }
.home-discovery .sky-events { container:sky-events / inline-size; }
.home-discovery .sky-events-list li {
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  padding-block:6px; gap:8px 10px;
}
.home-discovery .sky-events-list li > div { min-width:0; }
.home-discovery .calendar-download { border-color:#718aa8; color:var(--accent); }
.home-discovery .calendar-download:hover { background:#d9e8fb; }
.home-discovery .sky-events-list a.calendar-download {
  display:inline-flex; align-items:center; justify-content:center; text-align:center;
  text-decoration:none; font-weight:650;
}
.calendar-download-short { display:none; }

@container sky-events (max-width:350px) {
  .knowledge .home-discovery .sky-events h2 { font-size:clamp(20px,7.3cqi,24px); }
  .home-discovery .sky-events > p { font-size:13px; line-height:1.45; }
  .home-discovery .sky-events-list { margin-top:12px; }
  .home-discovery .sky-events-list li {
    grid-template-columns:minmax(0,1fr) 72px;
    font-size:14px; line-height:1.3;
  }
  .home-discovery .sky-events-list time { font-size:12px; }
  .home-discovery .calendar-download { padding:6px; white-space:nowrap; }
  .calendar-download-full { display:none; }
  .calendar-download-short { display:inline; }
}
@media (max-width:820px) {
  .home-discovery { grid-template-columns:minmax(0,1fr); }
  .home-discovery .sky-events {
    border-inline-start:0; padding-inline-start:0;
    border-top:1px solid var(--line); padding-top:var(--discovery-gap);
  }
}
@media (max-width:760px) {
  .moon-heading { grid-template-columns:1fr; gap:14px; }
  .observatory { display:flex; flex-direction:column; align-items:stretch; gap:9px; margin-top:12px; }
  :is(.local-observation,.phase-info) { width:min(100%,430px); margin-inline:auto; }
}
@media (max-width:690px) {
  .feature-suggestion-link { min-height:44px; font-size:14px; }
}

.observation-forecast { margin-top:9px; padding-top:8px; border-top:1px solid var(--line); }
.observation-forecast h3 { margin:0 0 6px; font-size:14px; line-height:1.25; }
.observation-forecast p { margin:3px 0 0; font-size:12px; line-height:1.4; color:var(--muted); }
.observation-forecast time { display:block; margin-top:5px; color:var(--accent); font-size:17px; font-weight:690; }
.observation-forecast .observation-source { margin-top:9px; font-size:10px; }
.observation-source a { text-underline-offset:.2em; }
.observation-retry { min-height:44px; border:0; padding:0; color:var(--accent); background:none; font-size:13px; text-decoration:underline; text-underline-offset:.2em; }

.observation-expand,.observation-forecast .observation-short-status { display:none; }
@media(max-width:760px) {
  .moon-heading { gap:10px; }
  .local-observation {
    display:flex; flex-direction:column; padding:6px 10px 7px;
  }
  .lunar-horizon { order:1; margin-top:7px; border-top:1px solid var(--line); }
  .observation-forecast { margin-top:3px; padding-top:2px; }
  .observation-forecast h3 { display:none; }
  .observation-overview {
    display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px;
  }
  .observation-overview p { margin:0; }
  .observation-forecast time { margin-top:1px; font-size:15px; }
  .observation-expand {
    display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:4px 0 4px 5px;
    border:0; background:none; color:var(--accent); font-size:12px; font-weight:650;
  }
  .observation-expand::after {
    content:""; width:6px; height:6px; border:solid currentColor; border-width:0 1.5px 1.5px 0;
    rotate:45deg; translate:0 -1px;
  }
  .observation-expand[aria-expanded=true]::after { rotate:225deg; translate:0 1px; }
  .local-observation:has(.observation-expand[aria-expanded=false]) :is(.lunar-horizon,#observation-conditions,.observation-source,.observation-retry),
  .observation-forecast:has(.observation-expand[aria-expanded=false]):has(.observation-short-status:not([hidden])) #observation-status { display:none; }
  .observation-forecast:has(.observation-expand[aria-expanded=false]) .observation-short-status:not([hidden]) { display:block; }
}

/* Keep the angular field centered on the detailed lunar disk. */
.moon-scene {
  --moon-diameter:92%;
  position:relative; width:min(100%,max(325px,calc(100svh - 215px)),710px); aspect-ratio:1;
  display:grid; place-items:center; isolation:isolate;
  translate:var(--drift-x,0px) var(--drift-y,0px);
  transition:translate 420ms var(--ease);
}
@media(prefers-reduced-motion:reduce) {
  .moon-scene { translate:none; }
}
.moon-scene .moon-object { width:var(--moon-diameter); transition:width 300ms var(--ease); }
.show-nearby-stars .moon-scene { --moon-diameter:64%; }
.constellation-layer { position:absolute; inset:0; pointer-events:none; }
#constellation-lines {
  position:absolute; inset:0; width:100%; height:100%;
  mask-image:radial-gradient(circle closest-side, transparent calc(var(--moon-diameter) - 1%), #000 var(--moon-diameter));
}
#constellation-lines path {
  fill:none; stroke:#8fb4e5; stroke-width:1px; stroke-opacity:.29;
  stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke;
}
#constellation-lines path[data-asterism] { stroke:#bad7ff; stroke-opacity:.39; }
.constellation-name {
  position:absolute; z-index:1; translate:-50% -50%; white-space:nowrap;
  color:var(--text); font-size:11px; line-height:1.2; font-weight:650;
  text-shadow:0 0 4px #080b12,0 0 8px #080b12,0 1px 2px #080b12;
}
.nearby-stars { position:absolute; inset:0; z-index:1; pointer-events:none; }
.sky-star-point {
  position:absolute; left:var(--star-x); top:var(--star-y); width:var(--star-size); aspect-ratio:1;
  translate:-50% -50%; border-radius:50%; background:#e1ebff; opacity:var(--star-opacity);
  box-shadow:0 0 4px #b8d5ff55;
}
.sky-star {
  position:absolute; left:var(--star-x); top:var(--star-y); width:44px; height:44px;
  translate:-50% -50%; display:grid; place-items:center; border:0; padding:0; border-radius:50%;
  background:none; color:#f0f4ff; pointer-events:auto;
}
.sky-star::before {
  content:""; width:var(--star-size); aspect-ratio:1; border-radius:50%;
  background:currentColor; opacity:var(--star-opacity); box-shadow:0 0 8px #b8d5ff85; transition:scale 160ms,opacity 160ms;
}
.sky-star:hover,.sky-star:focus-visible,.sky-star[aria-pressed=true] { z-index:2; color:#fff; }
.sky-star:hover::before,.sky-star:focus-visible::before,.sky-star[aria-pressed=true]::before { scale:1.35; opacity:1; }
.sky-star-label {
  position:absolute; top:50%; left:calc(50% + 11px); translate:0 -50%; width:max-content;
  max-width:11ch; color:var(--text); text-shadow:0 1px 5px #000; text-align:left;
  font-size:11px; line-height:1.1; font-weight:650; opacity:0; pointer-events:none;
}
.sky-star[data-side=left] .sky-star-label { left:auto; right:calc(50% + 11px); text-align:right; }
.sky-star:hover .sky-star-label,.sky-star:focus-visible .sky-star-label,.sky-star[aria-pressed=true] .sky-star-label { opacity:1; }
.star-controls { width:min(100%,620px); margin:0 auto; text-align:center; }
.star-legend { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:0 6px; }
.star-legend button {
  min-height:44px; padding:6px 10px; border:0; border-radius:8px;
  background:none; color:var(--muted); font-size:13px; font-weight:650;
}
.star-legend button:hover,.star-legend button[aria-pressed=true] { color:var(--accent); }
#star-toggle > span { padding-right:3px; }
.star-legend .star-expand {
  display:inline-flex; align-items:center; gap:7px; color:var(--accent); font-size:12px;
}
.star-expand::after {
  content:""; width:6px; height:6px; border:solid currentColor; border-width:0 1.5px 1.5px 0;
  rotate:45deg; translate:0 -1px;
}
.star-expand[aria-expanded=true]::after { rotate:225deg; translate:0 1px; }
.star-disclosure { padding:0 6px 6px; }
@media(max-width:360px) {
  .star-legend { gap:0 4px; }
  .star-legend button { padding-inline:5px; font-size:12px; }
}
#star-hint,.star-source { margin:0; color:var(--muted); font-size:11px; line-height:1.45; }
.star-source { margin-top:2px; }
.star-source a { text-underline-offset:.2em; }
#star-detail { margin:3px 0 8px; color:var(--accent); font-size:13px; line-height:1.4; }
@media(max-width:690px) {
  .moon-scene { width:min(100%,470px); }
}
@media(min-width:1440px) {
  .portal-home .moon-guide { --observation-width:clamp(300px,24vw,390px); padding-top:34px; }
  .portal-home .local-observation { position:absolute; top:0; right:0; width:var(--observation-width); }
  .portal-home .observatory { margin-top:10px; }
  .portal-home .moon-scene { width:min(100%,52vw,940px); }
}

/* Light reading surfaces across the dark portal. */
.home-discovery,
.portal-home :is(.local-observation,.phase-info,.guide-grid),
.guide-page :is(.next-phase,.article-dates,.guide-section,.guide-sources,.guide-related) {
  --bg:var(--panel-bg); --text:var(--panel-ink); --muted:var(--panel-muted);
  --accent:var(--panel-accent); --line:var(--panel-line);
  background:var(--panel-bg); color:var(--panel-ink); color-scheme:light;
  border:1px solid #fff9;
}