/*
 * Stellar Broadcast shared theme: self-hosted fonts, color tokens, and the sky.
 * Pages set their edition accent on <body> (--accent / --accent-rgb); every
 * derived token lives on body so those overrides flow into it.
 */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("/fonts/InterVariable-latin.woff2") format("woff2")}
@font-face{font-family:"Michroma";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/Michroma-latin.woff2") format("woff2")}

:root{
  color-scheme:dark;
  --void:#060a12;
  --deep:#030711;
  --hull:#0a1424;
  --hull-2:#0e1b30;
  --accent:#00e5ff;
  --accent-rgb:0,229,255;
  --ice:#e6fbff;
  --violet:#7b61ff;
  --violet-rgb:123,97,255;
  --text:#c8d6e5;
  --soft:#a9bfcd;
  --muted:#7c96a7;
  --sans:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --display:"Michroma","Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
body{
  --line:rgba(var(--accent-rgb),.16);
  --line-strong:rgba(var(--accent-rgb),.34);
  --tint:rgba(var(--accent-rgb),.06);
  --glow:0 0 30px rgba(var(--accent-rgb),.28);
  --glow-soft:0 0 60px rgba(var(--accent-rgb),.12);
  font-family:var(--sans);
  font-feature-settings:"cv11","ss01","calt";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Sky: a fixed star field canvas, two slow nebula washes, and a vignette. */
#starfield{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.sky-wash{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.sky-wash::before,.sky-wash::after{content:"";position:absolute;border-radius:50%;filter:blur(110px);opacity:.14;animation:sky-drift 36s ease-in-out infinite alternate}
.sky-wash::before{width:56vw;height:56vw;left:-16vw;top:-22vw;background:radial-gradient(circle,rgba(var(--accent-rgb),.9),transparent 68%)}
.sky-wash::after{width:50vw;height:50vw;right:-18vw;bottom:-22vw;background:radial-gradient(circle,rgba(var(--violet-rgb),.85),transparent 68%);animation-duration:44s;animation-direction:alternate-reverse}
.vignette{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 50% 38%,transparent 52%,rgba(0,0,0,.55) 100%)}
@keyframes sky-drift{to{transform:translate3d(4vw,5vh,0) scale(1.1)}}

/* Wordmark: the brand set in the display face, as on the store art. */
.wordmark{font-family:var(--display);font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--ice)}

/* Display headings share one recipe: quiet size, wide face, a faint cyan halo,
   and a short luminous rule that stands in for the orbit line in the art. */
.display-title{font-family:var(--display);font-weight:400;line-height:1.25;letter-spacing:.02em;color:var(--ice);text-wrap:balance}
.signal-rule::after{content:"";display:block;width:56px;height:1px;margin-top:18px;background:linear-gradient(90deg,transparent,var(--accent) 35%,var(--accent) 65%,transparent);box-shadow:0 0 14px rgba(var(--accent-rgb),.55)}
.signal-rule.is-centered::after{margin-inline:auto}

@media(prefers-reduced-motion:reduce){
  .sky-wash::before,.sky-wash::after{animation:none!important}
  #starfield{display:none}
}