/* One sky behind every page. Content decides how much of it to reveal. */
html { background: #040b15; }
html, body { overflow-x: clip; }
body { background: transparent; }
.universe-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(3, 10, 22, .08), rgba(2, 8, 18, .44)),
    url('/site-static/universe-edge-stars.svg') center center / cover no-repeat,
    radial-gradient(ellipse at 68% 49%, #162544 0%, #0a1830 30%, #06111d 67%, #040b14 100%);
}
.universe-backdrop canvas { display: block; width: 100%; height: 100%; }
.about-universe-page .universe-backdrop::before,
.explore-universe-page .universe-backdrop::before,
.research-page .universe-backdrop::before,
.universe-hub-page .universe-backdrop::before {
  content: "";
  position: absolute;
  top: -12%;
  right: -7%;
  width: min(76vw, 1050px);
  aspect-ratio: 2;
  background: url('/site-static/universe-star-formation.webp') center / contain no-repeat;
  opacity: .18;
  filter: blur(2px);
}
.site-shell { position: relative; z-index: 1; background: transparent; }

/* The footer closes the projected navigation with a full HUD screen. */
.site-shell > .site-footer {
  position: relative;
  isolation: isolate;
  margin-bottom: 24px;
  padding: clamp(18px, 2vw, 24px) clamp(24px, 3vw, 40px);
  border: 1px solid rgba(var(--hud-rgb), .4);
  border-radius: 12px;
  background:
    linear-gradient(90deg, transparent 12%, rgba(var(--hud-rgb), .47), transparent 88%) top / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 12%, rgba(var(--hud-rgb), .27), transparent 88%) bottom / 100% 1px no-repeat,
    radial-gradient(ellipse at 50% 0, rgba(var(--hud-rgb), .14), transparent 58%),
    linear-gradient(90deg, rgba(8, 29, 50, .95), rgba(5, 19, 35, .91) 50%, rgba(8, 29, 50, .95));
  box-shadow: 0 18px 54px rgba(0, 0, 0, .23), inset 0 0 36px rgba(var(--hud-rgb), .04);
  backdrop-filter: blur(10px);
}
.site-shell > .site-footer::before,
.site-shell > .site-footer::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: -4px;
  bottom: -4px;
  width: 13px;
  pointer-events: none;
  clip-path: polygon(0 0, 100% 0, 100% 12%, 60% 16%, 60% 84%, 100% 88%, 100% 100%, 0 100%);
  background: linear-gradient(90deg, rgba(var(--hud-rgb), .65), rgba(var(--hud-rgb), .1) 45%, transparent), linear-gradient(180deg, rgba(var(--hud-rgb), .47), transparent 22%, rgba(var(--hud-rgb), .18) 50%, transparent 78%, rgba(var(--hud-rgb), .47));
  filter: drop-shadow(0 0 7px rgba(var(--hud-rgb), .34));
}
.site-shell > .site-footer::before { left: 0; }
.site-shell > .site-footer::after { right: 0;transform: scaleX(-1); }
.site-footer-heading { color: #ccecf4; }
.site-footer a:hover { color: #a9edff; }

/* Cinematic pages share the sky directly. Their local color is light, not a
   replacement background, so navigation between them retains one setting. */
.universe-page #sky { background: transparent; }
.universe-page #sky::before { display: none; }
.universe-page .universe-home { background: transparent; }
.about-universe-page .about-universe,
.explore-universe-page .explore-universe,
.research-page .research-mcp { background: transparent; }
.about-universe-page .about-universe::before,
.explore-universe-page .explore-universe::before,
.research-page .research-mcp::before { display: none; }

/* Reading surfaces sit above the same field like quiet instrumentation. */
body:not(.universe-page):not(.about-universe-page):not(.explore-universe-page):not(.research-page) .site-shell main {
  isolation: isolate;
}
/* Article pages keep a calm reading panel over the same sky. */
.docs-layout,
.docs-grid {
  border: 1px solid rgba(149, 207, 240, .2);
  background: linear-gradient(145deg, rgba(11, 29, 49, .9), rgba(5, 16, 30, .88));
  box-shadow: 0 16px 44px rgba(0, 0, 0, .19);
  backdrop-filter: blur(8px);
}
.docs-layout::after,
.docs-grid::after { display: none; }
/* Inner work areas keep quiet full borders; the hero has its own brighter frame. */
.universe-hub-page .catalog-browser,
.universe-hub-page .docs-nav-grid,
.universe-hub-page .docs-layout,
.universe-hub-page .projects-screen {
  position: relative;
  isolation: isolate;
  border: 1px solid rgba(149, 207, 240, .22);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(11, 29, 49, .92), rgba(5, 16, 30, .9));
  box-shadow: 0 16px 44px rgba(0, 0, 0, .2), inset 0 1px rgba(226, 246, 255, .04);
  backdrop-filter: blur(8px);
}
.universe-hub-page .catalog-browser,
.universe-hub-page .projects-screen { padding: clamp(22px, 3vw, 40px); margin-top: 24px; }
.universe-hub-page .catalog-browser::before,
.universe-hub-page .docs-nav-grid::before,
.universe-hub-page .docs-layout::before,
.universe-hub-page .projects-screen::before {
  content: "";
  display: block;
  position: absolute;
  inset: 11px;
  z-index: 0;
  pointer-events: none;
  opacity: .28;
  mask-image: none;
  background:
    linear-gradient(#8cecff, #8cecff) left top / 16px 1px no-repeat,
    linear-gradient(#8cecff, #8cecff) left top / 1px 16px no-repeat,
    linear-gradient(#8cecff, #8cecff) right top / 16px 1px no-repeat,
    linear-gradient(#8cecff, #8cecff) right top / 1px 16px no-repeat,
    linear-gradient(#8cecff, #8cecff) left bottom / 16px 1px no-repeat,
    linear-gradient(#8cecff, #8cecff) left bottom / 1px 16px no-repeat,
    linear-gradient(#8cecff, #8cecff) right bottom / 16px 1px no-repeat,
    linear-gradient(#8cecff, #8cecff) right bottom / 1px 16px no-repeat;
}
.universe-hub-page .catalog-browser::after,
.universe-hub-page .docs-nav-grid::after,
.universe-hub-page .docs-layout::after,
.universe-hub-page .projects-screen::after { display: none; }
/* The hero and footer share a full frame with illuminated instrument rails. */
.universe-hub-page .page-hero {
  position: relative;
  isolation: isolate;
  border: 1px solid rgba(var(--hud-rgb), .46);
  border-radius: 12px;
  background:
    linear-gradient(90deg, transparent 10%, rgba(var(--hud-rgb), .32), transparent 90%) top / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 10%, rgba(var(--hud-rgb), .2), transparent 90%) bottom / 100% 1px no-repeat,
    radial-gradient(ellipse at 77% 19%, rgba(var(--hero-glow-rgb, 117, 103, 194), .05), transparent 44%),
    radial-gradient(ellipse at 18% 0, rgba(var(--hud-rgb), .04), transparent 58%),
    linear-gradient(105deg, rgba(5, 17, 31, .94), rgba(5, 17, 31, .94));
  box-shadow: 0 20px 62px rgba(0, 0, 0, .22), inset 0 0 40px rgba(var(--hud-rgb), .02);
  backdrop-filter: blur(10px);
}
.universe-hub-page .page-hero.page-hero-roomy {
  margin-top: calc(var(--sp-6) + 14px);
  padding-top: calc(var(--sp-16) - 14px);
  padding-bottom: calc(var(--sp-14) - 14px);
}
.universe-hub-page .page-hero::before,
.universe-hub-page .page-hero::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 3;
  inset: auto;
  top: -4px;
  bottom: -4px;
  width: 17px;
  height: auto;
  opacity: .8;
  pointer-events: none;
  mask-image: none;
  clip-path: polygon(0 0, 100% 0, 100% 11%, 55% 15%, 55% 85%, 100% 89%, 100% 100%, 0 100%);
  background: linear-gradient(90deg, rgba(var(--hud-rgb), .74), rgba(var(--hud-rgb), .18) 46%, transparent), linear-gradient(180deg, rgba(var(--hud-rgb), .45), transparent 20%, rgba(var(--hud-rgb), .2) 50%, transparent 80%, rgba(var(--hud-rgb), .45));
  filter: drop-shadow(0 0 8px rgba(var(--hud-rgb), .35));
}
.universe-hub-page .page-hero::before { left: 0; }
.universe-hub-page .page-hero::after { right: 0;transform: scaleX(-1); }
@media (max-width: 760px) {
  .universe-hub-page .page-hero.page-hero-roomy {
    margin-top: calc(var(--sp-6) + 8px);
    padding-top: calc(var(--sp-8) - 8px);
    padding-bottom: calc(var(--sp-6) - 8px);
  }
}
.universe-hub-page .docs-nav-grid {
  border-color: rgba(var(--hud-rgb), .16);
  background: rgba(5, 17, 31, .94);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .14);
}
.universe-hub-page .docs-nav-grid::before { display: none; }
.universe-hub-page .catalog-browser .catalog-bar-panel {
  border: 1px solid rgba(143, 198, 231, .15);
  background: rgba(6, 23, 40, .42);
  box-shadow: none;
  backdrop-filter: none;
}
.universe-hub-page .projects-screen { display: grid; gap: 42px; }
.universe-hub-page .projects-screen .docs-grid {
  margin-top: 16px;
  border: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
}
.universe-hub-page .projects-screen .docs-grid::after { display: none; }
.universe-hub-page .catalog-marker-copy { padding-top: 0; }
.universe-hub-page .catalog-marker-hero .catalog-marker-copy > .eyebrow {
  position: static;
  margin-bottom: 14px;
}
.docs-article,
.docs-aside,
.docs-card,
.universe-hub-page .docs-card,
.docs-note {
  border-color: rgba(143, 198, 231, .22);
  background: rgba(8, 27, 47, .7);
  box-shadow: inset 0 1px rgba(229, 246, 255, .04), 0 11px 28px rgba(0, 0, 0, .13);
}
.docs-article { background: rgba(7, 23, 41, .88); }
@media (prefers-reduced-motion: reduce) {
  .universe-backdrop canvas { opacity: .7; }
}