:root {
  --ink: #062a52;
  --muted: #58748f;
  --deep: #e7f0fb;
  --navy: #062a52;
  --panel: #1f5f9f;
  --panel-soft: #4f8fc9;
  --blue: #155cc4;
  --cyan: #5f98d8;
  --teal: #1f65a6;
  --line: rgba(47, 116, 181, 0.25);
  --glass: rgba(47, 116, 181, 0.86);
  --white: #f8fbff;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 14% 8%, rgba(110, 161, 213, 0.32), transparent 30rem),
    radial-gradient(circle at 88% 18%, rgba(184, 205, 226, 0.28), transparent 28rem),
    linear-gradient(180deg, #e7f0fb 0%, #d7e7f7 45%, #edf5fc 100%);
  min-height: 100vh;
  letter-spacing: 0;
}
a { color: inherit; text-decoration: none; }
p { color: var(--muted); line-height: 1.72; font-size: 1rem; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem clamp(1rem, 4vw, 4rem);
  border-bottom: 1px solid rgba(7, 59, 115, 0.18);
  background: rgba(6, 42, 82, 0.96);
  backdrop-filter: blur(18px);
}
.brand { display: flex; align-items: center; gap: .75rem; min-width: max-content; }
.brand-mark {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 8px;
  font-family: "JetBrains Mono", monospace;
  font-weight: 800;
  background: linear-gradient(135deg, #155cc4, #659bd5);
  color: #031321;
  box-shadow: 0 0 24px rgba(75, 216, 255, .35);
}
.brand strong, .brand small { display: block; }
.brand strong { color: #f7fcff; }
.brand small { color: #bfe4f8; margin-top: .08rem; }
.nav-links { display: flex; gap: 1.35rem; color: #d8f2ff; font-weight: 700; font-size: .92rem; }
.nav-links a { opacity: .78; transition: opacity .2s ease, color .2s ease; }
.nav-links a:hover { opacity: 1; color: #ffffff; }
.nav-cta, .button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.85rem;
  padding: .8rem 1.05rem;
  border-radius: 8px;
  font-weight: 800;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.nav-cta, .button.primary { background: linear-gradient(135deg, #062a52, #155cc4); color: #ffffff; box-shadow: 0 16px 38px rgba(6, 42, 82, .2); }
.button.secondary { border: 1px solid rgba(6,42,82,.22); color: #062a52; background: rgba(255,255,255,.56); }
.nav-cta:hover, .button:hover { transform: translateY(-2px); }
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(20rem, .86fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding: clamp(4rem, 8vw, 7.5rem) clamp(1rem, 5vw, 5rem) 3rem;
  overflow: hidden;
}
.hero:before {
  content: "";
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(47,116,181,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(47,116,181,.10) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, black, transparent 88%);
  pointer-events: none;
}
.hero-copy, .hero-visual { position: relative; z-index: 1; }
.eyebrow {
  margin: 0 0 1rem;
  color: #1f65a6;
  font-family: "JetBrains Mono", monospace;
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
}
h1, h2, h3 { margin: 0; color: #062a52; line-height: 1.04; letter-spacing: 0; }
h1 { max-width: 12ch; font-size: clamp(3rem, 7vw, 6.8rem); font-weight: 900; }
h2 { font-size: clamp(2rem, 4vw, 4.2rem); font-weight: 900; }
h3 { font-size: 1.1rem; }
.hero-highlight {
  position: relative;
  display: inline-block;
  color: #155cc4;
}
.hero-highlight:after {
  content: "";
  position: absolute;
  left: -.04em;
  right: -.04em;
  bottom: .08em;
  height: .18em;
  z-index: -1;
  border-radius: 999px;
  background: rgba(95, 152, 216, .34);
}
.hero-highlight.red {
  color: #155cc4;
}
.hero-highlight.red:after {
  background: rgba(21, 92, 196, .18);
}
.hero-lede { max-width: 43rem; margin: 1.4rem 0 0; font-size: clamp(1.05rem, 1.7vw, 1.25rem); color: #365e7d; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; }
.quick-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem;
  max-width: 47rem;
  margin-top: 2rem;
}
.stats-band div, .program-grid article, .instructor-grid article, .timeline-item, .outcome-list div {
  border: 1px solid rgba(255,255,255,.26);
  background: #1f5f9f;
  box-shadow: 0 12px 26px rgba(6, 42, 82, .16);
}
.quick-facts span {
  position: relative;
  min-height: 5rem;
  padding: 1rem 1rem 1rem 1.15rem;
  border-radius: 8px;
  color: #315b7d;
  border: 1px solid rgba(31, 101, 166, .34);
  background: rgba(192, 216, 239, .86);
  box-shadow: 0 6px 18px rgba(45, 113, 153, .08);
}
.quick-facts span:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 8px 0 0 8px;
  background: #155cc4;
}
.quick-facts strong { display: block; color: #062a52; font-size: 1.12rem; margin-bottom: .25rem; }
.hero-visual { min-height: 38rem; display: grid; place-items: center; overflow: hidden; }
.orbit { position: absolute; border: 1px solid rgba(75,216,255,.32); border-radius: 50%; transform: rotate(-18deg); }
.orbit-one { width: min(34vw, 31rem); height: min(34vw, 31rem); animation: spin 18s linear infinite; }
.orbit-two { width: min(28vw, 25rem); height: min(28vw, 25rem); animation: spin 13s linear infinite reverse; }
.mission-panel {
  position: relative;
  width: min(100%, 31rem);
  aspect-ratio: 1 / 1.12;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 8px;
  padding: 1rem;
  background: #1f5f9f;
  overflow: hidden;
  box-shadow: 0 18px 42px rgba(6, 42, 82, .18);
}
.mission-panel:after {
  content: ""; position: absolute; inset: 16%;
  background: radial-gradient(circle, rgba(160, 194, 230, .28), transparent 58%);
  filter: blur(6px);
}
.mission-topline, .data-strip { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: .6rem; font-family: "JetBrains Mono", monospace; font-size: .72rem; color: #bfeeff; text-transform: uppercase; }
.signal-grid { position: absolute; inset: 4rem 1.2rem 4rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; opacity: .35; }
.signal-grid span { border: 1px solid rgba(118,204,255,.24); border-radius: 8px; background: rgba(75,216,255,.06); }
.mission-node { position: absolute; z-index: 3; display: grid; place-items: center; border: 1px solid rgba(183,236,255,.45); border-radius: 999px; font-family: "JetBrains Mono", monospace; font-weight: 800; color: #042033; background: var(--cyan); box-shadow: 0 0 26px rgba(75,216,255,.45); }
.main-node { width: 9rem; height: 9rem; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 1rem; box-shadow: none; }
.node-a, .node-b, .node-c { width: 7rem; height: 7rem; font-size: .78rem; color: #f4fbff; background: #062a52; box-shadow: none; }
.node-a { left: 7%; top: 28%; }
.node-b { right: 7%; top: 28%; }
.node-c { left: 50%; bottom: 14%; transform: translateX(-50%); }
.data-strip { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; flex-wrap: wrap; }
.data-strip span { padding: .45rem .55rem; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; background: rgba(36,95,153,.72); }
.stats-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; padding: 0 clamp(1rem, 5vw, 5rem) 4rem; }
.stats-band div { min-height: 9rem; padding: 1.35rem; border-radius: 8px; }
.stats-band strong { display: block; font-size: 1.55rem; margin-bottom: .45rem; color: #ffffff; }
.stats-band span { color: #e4f0fb; line-height: 1.6; }
.section {
  position: relative;
  padding: clamp(4rem, 7vw, 6.5rem) clamp(1rem, 5vw, 5rem);
}
.section:not(.story):not(.institutions)::before {
  content: "";
  position: absolute;
  left: clamp(1rem, 5vw, 5rem);
  right: clamp(1rem, 5vw, 5rem);
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(21, 92, 196, .28), rgba(214, 40, 57, .22), rgba(21, 92, 196, .28), transparent);
}
.section:not(.story):not(.institutions)::after {
  content: "";
  position: absolute;
  right: clamp(1rem, 5vw, 5rem);
  top: -.32rem;
  width: .65rem;
  height: .65rem;
  border-radius: 999px;
  border: 2px solid rgba(21, 92, 196, .32);
  background: #edf5fc;
  box-shadow: -16rem 0 0 -2px rgba(214, 40, 57, .42), -28rem 0 0 -2px rgba(95, 152, 216, .5);
}
.section-bridge {
  position: relative;
}
.section-bridge:before {
  content: "";
  position: absolute;
  left: 50%;
  top: -2.2rem;
  width: min(34rem, 62vw);
  height: 4.4rem;
  transform: translateX(-50%);
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 18%, rgba(21, 92, 196, .16) 18% 19%, transparent 19% 42%, rgba(214, 40, 57, .13) 42% 43%, transparent 43% 100%),
    linear-gradient(0deg, transparent 0 48%, rgba(6, 42, 82, .12) 48% 52%, transparent 52% 100%);
  mask-image: linear-gradient(90deg, transparent, black 18%, black 82%, transparent);
}
.split { display: grid; grid-template-columns: .8fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.program-grid, .instructor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.program-grid article, .instructor-grid article { min-height: 13rem; padding: 1.3rem; border-radius: 8px; }
.program-grid span { color: var(--cyan); font-family: "JetBrains Mono", monospace; font-weight: 800; }
.program-grid h3, .instructor-grid h3 { margin-top: 1rem; color: #ffffff; }
.program-grid p, .instructor-grid p { margin-bottom: 0; color: #e4f0fb; }
.story { display: grid; grid-template-columns: minmax(17rem, .75fr) 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; background: rgba(214, 229, 244, .62); border-block: 1px solid rgba(32,103,148,.18); }
.story-image { border-radius: 8px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(54,116,151,.14); background: var(--navy); }
.story-image img { display: block; width: 100%; height: 100%; max-height: 42rem; object-fit: cover; }
.story-image span { display: block; padding: .55rem .75rem; color: #dcecff; font-size: .78rem; line-height: 1.4; background: #062a52; }
.story-copy p { max-width: 52rem; }
.institutions {
  overflow: hidden;
}
.institutions .section-heading p:not(.eyebrow) {
  max-width: 48rem;
}
.institution-ring {
  position: relative;
  min-height: clamp(31rem, 54vw, 40rem);
  width: 100%;
  max-width: 70rem;
  margin: 1.5rem auto 0;
  perspective: 900px;
  --orbit-x1: min(31.2rem, 46vw);
  --orbit-y1: min(8.7rem, 13vw);
  --orbit-x2: min(16.5rem, 24vw);
  --orbit-y2: min(12.6rem, 18vw);
  --orbit-x3: min(7.7rem, 12vw);
  --orbit-y3: min(9.1rem, 14vw);
  --orbit-x4: min(27.3rem, 40vw);
  --orbit-y4: min(.65rem, 1vw);
}
.institution-track {
  position: absolute;
  left: 57%;
  top: 50%;
  width: min(100%, 58rem);
  height: clamp(16rem, 31vw, 22rem);
  border: 2px solid rgba(6, 42, 82, .24);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotateX(56deg) rotateZ(-35deg);
  box-shadow: inset 0 0 28px rgba(31, 101, 166, .12), 0 20px 48px rgba(6, 42, 82, .1);
}
.institution-track:before,
.institution-track:after {
  content: "";
  position: absolute;
  inset: 10%;
  border: 1px solid rgba(214, 40, 57, .22);
  border-radius: inherit;
}
.institution-track:after {
  inset: 24%;
  border-color: rgba(95, 152, 216, .34);
}
.institution-card {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(5.9rem, 11vw, 8rem);
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.institution-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
  background: transparent;
  padding: 0;
  filter:
    drop-shadow(0 0 1px rgba(237, 245, 252, .95))
    drop-shadow(0 0 3px rgba(6, 42, 82, .32))
    drop-shadow(0 12px 18px rgba(6, 42, 82, .16));
}
.inst-umd img {
  object-position: 32% center;
}
.institution-card {
  left: 50%;
  top: 50%;
  animation: institutionOrbit 34s linear infinite;
}
.inst-nasa { animation-delay: 0s; }
.inst-jhu { animation-delay: -2.615s; }
.inst-mit { animation-delay: -5.23s; }
.inst-umd { animation-delay: -7.845s; }
.inst-cyoc { animation-delay: -10.46s; }
.inst-nih { animation-delay: -13.075s; }
.inst-apl { animation-delay: -15.69s; }
.inst-dulaney { animation-delay: -18.305s; }
.inst-wootton { animation-delay: -20.92s; }
.inst-eths { animation-delay: -23.535s; }
.inst-towson { animation-delay: -26.15s; }
.inst-mesa { animation-delay: -28.765s; }
.inst-som { animation-delay: -31.38s; }

@keyframes institutionOrbit {
  0% { transform: translate(calc(-50% + var(--orbit-x1)), calc(-50% - var(--orbit-y1))) scale(.9); z-index: 5; opacity: .82; filter: brightness(.92); }
  12.5% { transform: translate(calc(-50% + var(--orbit-x2)), calc(-50% - var(--orbit-y2))) scale(.78); z-index: 3; opacity: .62; filter: brightness(.8); }
  25% { transform: translate(calc(-50% - var(--orbit-x3)), calc(-50% - var(--orbit-y3))) scale(.72); z-index: 2; opacity: .52; filter: brightness(.74); }
  37.5% { transform: translate(calc(-50% - var(--orbit-x4)), calc(-50% - var(--orbit-y4))) scale(.88); z-index: 4; opacity: .76; filter: brightness(.88); }
  50% { transform: translate(calc(-50% - var(--orbit-x1)), calc(-50% + var(--orbit-y1))) scale(1.02); z-index: 7; opacity: .96; filter: brightness(1); }
  62.5% { transform: translate(calc(-50% - var(--orbit-x2)), calc(-50% + var(--orbit-y2))) scale(1.14); z-index: 9; opacity: 1; filter: brightness(1.08); }
  75% { transform: translate(calc(-50% + var(--orbit-x3)), calc(-50% + var(--orbit-y3))) scale(1.08); z-index: 8; opacity: 1; filter: brightness(1.04); }
  87.5% { transform: translate(calc(-50% + var(--orbit-x4)), calc(-50% + var(--orbit-y4))) scale(1); z-index: 7; opacity: .94; filter: brightness(1); }
  100% { transform: translate(calc(-50% + var(--orbit-x1)), calc(-50% - var(--orbit-y1))) scale(.9); z-index: 5; opacity: .82; filter: brightness(.92); }
}
.section-heading { max-width: 53rem; margin-bottom: 2rem; }
.avatar { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 8px; font-family: "JetBrains Mono", monospace; font-weight: 800; color: #031321; background: var(--cyan); }
.avatar.nasa { background: linear-gradient(135deg, #4bd8ff, #1664ff); color: white; }
.avatar.pitch { background: linear-gradient(135deg, #b8f3ff, #5bf0c7); }
.avatar.st { background: linear-gradient(135deg, #82a7ff, #4bd8ff); }
.avatar.tg { background: linear-gradient(135deg, #25e6bf, #1597ff); }
.avatar.mystery { background: transparent; border: 2px solid rgba(237,245,252,.72); color: #ffffff; font-size: 2rem; }
.schedule { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.schedule::before,
.schedule::after {
  display: none;
}
.schedule-intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.schedule-intro h2 {
  max-width: none;
}
.schedule-intro p:not(.eyebrow) {
  max-width: none;
  margin: 0;
}
.timeline {
  position: relative;
  display: grid;
  grid-template-columns: .9fr 1.25fr .9fr;
  gap: 1rem;
  align-items: stretch;
}
.timeline:before {
  content: "";
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  top: 1.35rem;
  height: 2px;
  background: linear-gradient(90deg, rgba(214,40,57,.65), rgba(95,152,216,.48), rgba(21,92,196,.45));
}
.timeline-item { position: relative; padding: 1.35rem 1.35rem 1.35rem 1.55rem; border-radius: 8px; }
.timeline-item.featured {
  transform: translateY(-.7rem);
  border-color: rgba(255,255,255,.34);
  box-shadow: 0 20px 38px rgba(6,42,82,.22);
}
.timeline-item:before { content: ""; position: absolute; left: 0; top: 1rem; bottom: 1rem; width: 4px; border-radius: 999px; background: linear-gradient(var(--cyan), var(--blue)); }
.timeline-item span { color: var(--cyan); font-family: "JetBrains Mono", monospace; font-weight: 800; }
.timeline-item h3 { margin-top: .6rem; color: #ffffff; }
.timeline-item p { color: #e4f0fb; }
.outcome-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: .85rem; }
.outcome-list div {
  min-height: 8rem;
  padding: 1rem;
  border-radius: 8px;
  color: #e9f8ff;
  line-height: 1.55;
  font-weight: 700;
  background:
    radial-gradient(ellipse at var(--glow-x) 14%, rgba(95,152,216,var(--blue-glow)), transparent 74%),
    radial-gradient(ellipse at var(--glow-x) 20%, rgba(214,40,57,var(--red-glow)), transparent 62%),
    linear-gradient(145deg, #062a52, #0b376a);
}
.outcome-list div:nth-child(1) { --glow-x: 250%; --blue-glow: .3; --red-glow: .1; }
.outcome-list div:nth-child(2) { --glow-x: 165%; --blue-glow: .42; --red-glow: .14; }
.outcome-list div:nth-child(3) { --glow-x: 88%; --blue-glow: .64; --red-glow: .22; }
.outcome-list div:nth-child(4) { --glow-x: 12%; --blue-glow: .64; --red-glow: .22; }
.outcome-list div:nth-child(5) { --glow-x: -60%; --blue-glow: .42; --red-glow: .14; }
.faq-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.faq-grid article {
  min-height: 13rem;
  padding: 1.25rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.22);
  color: #eef6ff;
  background:
    radial-gradient(circle at 90% 0%, rgba(214,40,57,.16), transparent 42%),
    linear-gradient(145deg, #062a52, #0b376a);
  box-shadow: 0 14px 30px rgba(6,42,82,.18);
}
.faq-grid h3 {
  margin-bottom: .85rem;
  color: #ffffff;
  font-size: 1.18rem;
}
.faq-grid p {
  color: #e9f4ff;
  line-height: 1.65;
}
.faq-actions {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.final-cta { margin: 2rem clamp(1rem, 5vw, 5rem) 5rem; padding: clamp(2rem, 5vw, 4rem); border-radius: 8px; border: 1px solid rgba(118,204,255,.32); background: #1f5f9f; text-align: center; box-shadow: 0 28px 90px rgba(0,0,0,.28); }
.final-cta h2 { max-width: 12ch; margin: 0 auto; }
.final-cta p { max-width: 44rem; margin: 1rem auto 1.7rem; color: #ffffff; }
.final-cta a:not(.button) {
  color: #062a52;
  font-weight: 900;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
footer { display: flex; justify-content: space-between; gap: 1rem; padding: 1.4rem clamp(1rem, 5vw, 5rem); color: #365e7d; border-top: 1px solid rgba(32,103,148,.18); }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@keyframes spin { to { transform: rotate(342deg); } }
@media (max-width: 920px) {
  .site-header { align-items: flex-start; flex-wrap: wrap; row-gap: .75rem; }
  .nav-links {
    order: 3;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    font-size: .82rem;
  }
  .nav-links a {
    opacity: 1;
    padding: .38rem .55rem;
    border: 1px solid rgba(216, 242, 255, .24);
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
  }
  .hero, .split, .story, .schedule { grid-template-columns: 1fr; }
  .hero { padding-top: 3rem; }
  .hero-visual { min-height: 30rem; }
  .quick-facts, .stats-band, .outcome-list, .faq-grid { grid-template-columns: 1fr; }
  .schedule-intro,
  .timeline {
    grid-template-columns: 1fr;
  }
  .timeline:before {
    display: none;
  }
  .timeline-item.featured {
    transform: none;
  }
  .institution-ring {
    min-height: clamp(28rem, 74vw, 34rem);
    --orbit-x1: min(18rem, 36vw);
    --orbit-y1: min(6.4rem, 13vw);
    --orbit-x2: min(10rem, 20vw);
    --orbit-y2: min(9rem, 18vw);
    --orbit-x3: min(4.8rem, 10vw);
    --orbit-y3: min(6.8rem, 14vw);
    --orbit-x4: min(15.8rem, 31vw);
    --orbit-y4: .5rem;
  }
  .institution-track {
    width: min(90vw, 42rem);
    height: clamp(12rem, 36vw, 17rem);
  }
  .institution-card {
    width: clamp(4.3rem, 10vw, 6rem);
  }
}
@media (max-width:640px){.site-header{padding:.85rem 1rem}.brand small{display:none}.nav-cta{min-height:2.5rem;padding:.65rem .8rem}h1{font-size:clamp(2.65rem,14vw,4.2rem);max-width:10ch}h2{font-size:clamp(2rem,10vw,3rem)}.program-grid,.instructor-grid{grid-template-columns:1fr}.hero-visual{min-height:24rem}.mission-panel{width:min(100%,23rem)}.main-node{width:7rem;height:7rem}.node-a,.node-b,.node-c{width:5.6rem;height:5.6rem;font-size:.68rem}.institution-ring{min-height:28rem;overflow:visible;--orbit-x1:min(11.8rem,43vw);--orbit-y1:min(5.8rem,21vw);--orbit-x2:min(6.6rem,25vw);--orbit-y2:min(8rem,29vw);--orbit-x3:min(3.2rem,13vw);--orbit-y3:min(6rem,22vw);--orbit-x4:min(10.4rem,38vw);--orbit-y4:.4rem}.institution-track{left:50%;top:50%;width:min(96vw,23rem);height:13rem;transform:translate(-50%,-50%) rotateX(58deg) rotateZ(-28deg)}.institution-card{left:50%;top:50%;width:clamp(2.25rem,10.8vw,3.2rem);min-height:0;aspect-ratio:1}}
.people-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.person-card {
  display: block;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.26);
  background: #1f5f9f;
  box-shadow: 0 12px 26px rgba(6, 42, 82, .16);
  overflow: hidden;
}
.photo-card {
  color: #ffffff;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.photo-card:hover {
  transform: translateY(-4px);
  background: #376fa5;
  box-shadow: 0 16px 34px rgba(54, 116, 151, .18);
}
.photo-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: #dcebf8;
}
.photo-card .person-kicker,
.photo-card h3,
.photo-card p,
.guest-card h3,
.guest-card p {
  margin-left: 1rem;
  margin-right: 1rem;
}
.person-kicker {
  display: block;
  margin-top: 1rem;
  color: #dcecff;
  font-family: "JetBrains Mono", monospace;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
}
.photo-card h3 { margin-top: .55rem; color: #ffffff; }
.photo-card p { margin-top: .65rem; margin-bottom: 1.1rem; color: #eef6ff; line-height: 1.55; }
.guest-speakers { margin-top: clamp(3rem, 6vw, 5rem); }
.advisor-section { margin-top: clamp(2.5rem, 5vw, 4rem); }
.advisor-section.is-hidden { display: none; }
.compact-heading { max-width: 46rem; }
.guest-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.guest-card { min-height: 15rem; padding: 1.25rem 0 1.35rem; }
.guest-card h3 { margin-top: 1rem; color: #ffffff; }
.guest-card p { color: #eef6ff; }
.guest-photo-card {
  padding-top: 0;
}
.guest-photo-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 26%;
  background: #dcebf8;
}
.guest-photo-card .person-kicker {
  margin: 1rem 1rem 0;
}
.bio-hero {
  min-height: calc(100vh - 5rem);
  padding: clamp(2rem, 5vw, 5rem);
  background:
    radial-gradient(circle at 14% 8%, rgba(110, 161, 213, 0.32), transparent 30rem),
    linear-gradient(180deg, #e7f0fb 0%, #edf5fc 100%);
}
.back-link {
  display: inline-flex;
  margin-bottom: 1.5rem;
  color: #062a52;
  font-weight: 900;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.bio-layout {
  display: grid;
  grid-template-columns: minmax(18rem, .72fr) 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.bio-photo {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(48, 128, 174, .28);
  background: #dcebf8;
  box-shadow: 0 16px 34px rgba(54, 116, 151, .14);
}
.bio-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.bio-copy {
  max-width: 48rem;
}
.bio-copy h1 {
  max-width: 12ch;
  font-size: clamp(3rem, 7vw, 6rem);
}
.bio-copy p:not(.eyebrow) {
  color: #365e7d;
  font-size: 1.08rem;
}
@media (max-width: 920px) {
  .people-grid,
  .guest-grid,
  .bio-layout {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
  .people-grid,
  .guest-grid,
  .bio-layout {
    grid-template-columns: 1fr;
  }
  .bio-copy h1 { max-width: 100%; }
}

.bio-achievements {
  margin-top: 1.5rem;
  padding: 1.2rem;
  border-radius: 8px;
  border: 1px solid rgba(48, 128, 174, .28);
  background: rgba(218, 234, 249, .78);
}
.bio-achievements h2 {
  font-size: 1.25rem;
  color: #062a52;
  margin-bottom: .75rem;
}
.bio-achievements ul {
  margin: 0;
  padding-left: 1.2rem;
  color: #365e7d;
  line-height: 1.65;
}
.bio-achievements li + li { margin-top: .35rem; }


/* Final requested contrast refinements */
.instructor-photo-grid .person-card,
.guest-grid .person-card {
  background: #062a52;
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 12px 28px rgba(6,42,82,.18);
}
.instructor-photo-grid .photo-card:hover {
  background: #0b376a;
}
.instructor-photo-grid .person-kicker,
.guest-grid .person-kicker {
  color: #b9d8f5;
}
.instructor-photo-grid h3,
.guest-grid h3,
.instructor-photo-grid p,
.guest-grid p {
  color: #ffffff;
}
.final-cta h2 {
  color: #ffffff;
}


/* Unified dark-blue item system */
.stats-band div,
.program-grid article,
.instructor-grid article,
.timeline-item,
.person-card,
.guest-card,
.final-cta,
.mission-panel {
  background: #062a52;
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 14px 30px rgba(6,42,82,.18);
}

.stats-band strong,
.program-grid h3,
.instructor-grid h3,
.timeline-item h3,
.outcome-list div,
.person-card h3,
.guest-card h3,
.final-cta h2 {
  color: #ffffff;
}

.stats-band span,
.program-grid p,
.instructor-grid p,
.timeline-item p,
.person-card p,
.guest-card p {
  color: #e9f4ff;
}

.program-grid span,
.timeline-item span,
.person-kicker,
.mission-topline,
.data-strip {
  color: #b9d8f5;
}

/* Keep these top facts light; only the left rule becomes dark blue. */
.quick-facts span {
  background: rgba(192, 216, 239, .86);
  color: #315b7d;
  border-color: rgba(6,42,82,.2);
}
.quick-facts span:before {
  background: #062a52;
}
.quick-facts strong {
  color: #062a52;
}

/* Nested contrast inside the hero diagram. */
.mission-panel:after {
  background: radial-gradient(circle, rgba(111,166,220,.26), transparent 58%);
}
.signal-grid span {
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
}
.mission-node {
  border-color: rgba(255,255,255,.36);
  box-shadow: none;
}
.main-node {
  background: #8bb8e8;
  color: #062a52;
}
.node-a,
.node-b,
.node-c {
  background: #2b6da8;
  color: #ffffff;
}
.data-strip span {
  border-color: rgba(255,255,255,.22);
  background: #164b80;
  color: #ffffff;
}

.photo-card:hover {
  background: #0b376a;
}


/* Keep item colors solid instead of faded during scroll reveal. */
.reveal,
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Local experiment: restrained NASA-red accents for contrast. */
:root {
  --nasa-red: #d62839;
  --nasa-red-dark: #a51627;
}

.brand-mark,
.nav-cta,
.button.primary {
  box-shadow: 0 16px 34px rgba(214, 40, 57, .26), 0 12px 28px rgba(6,42,82,.16);
}

.nav-cta,
.button.primary {
  background: linear-gradient(135deg, #a51627 0%, var(--nasa-red) 58%, #f04a5a 100%);
}

.eyebrow,
.program-grid span,
.timeline-item span,
.person-kicker {
  color: #c9283a;
}

.quick-facts span:before,
.timeline-item:before {
  background: linear-gradient(#062a52, var(--nasa-red));
}

.mission-topline span:last-child,
.data-strip span:first-child {
  color: #ffd9de;
  border-color: rgba(214, 40, 57, .36);
}

.main-node {
  border-color: rgba(214, 40, 57, .46);
}
.final-cta {
  border-color: rgba(214, 40, 57, .35);
  box-shadow: 0 16px 38px rgba(214,40,57,.12), 0 14px 30px rgba(6,42,82,.18);
}
.final-cta a:not(.button) {
  color: #ffd9de;
}

/* Local mission animation experiment: Problem/User core with outer orbit. */
.mission-node {
  will-change: transform;
}
.main-node,
.user-node,
.node-a,
.node-b,
.node-c {
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
}
.main-node,
.user-node {
  width: 6.4rem;
  height: 6.4rem;
  font-size: .88rem;
  z-index: 5;
}
.main-node {
  background: #8bb8e8;
  color: #062a52;
  border-color: rgba(214, 40, 57, .46);
  animation: coreProblemOrbit 7s linear infinite;
}
.user-node {
  background: #e8f2ff;
  color: #062a52;
  border-color: rgba(255,255,255,.72);
  animation: coreUserOrbit 7s linear infinite;
}
.node-a,
.node-b,
.node-c {
  width: 6.4rem;
  height: 6.4rem;
  background: #2b6da8;
  color: #ffffff;
  z-index: 4;
}
.node-a { animation: outerOrbitA 16s linear infinite; }
.node-b { animation: outerOrbitB 16s linear infinite; }
.node-c { animation: outerOrbitC 16s linear infinite; }

@keyframes coreProblemOrbit {
  from { transform: translate(-50%, -50%) rotate(0deg) translateX(-3.65rem) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg) translateX(-3.65rem) rotate(-360deg); }
}
@keyframes coreUserOrbit {
  from { transform: translate(-50%, -50%) rotate(180deg) translateX(-3.65rem) rotate(-180deg); }
  to { transform: translate(-50%, -50%) rotate(540deg) translateX(-3.65rem) rotate(-540deg); }
}
@keyframes outerOrbitA {
  from { transform: translate(-50%, -50%) rotate(0deg) translateX(10.2rem) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg) translateX(10.2rem) rotate(-360deg); }
}
@keyframes outerOrbitB {
  from { transform: translate(-50%, -50%) rotate(120deg) translateX(10.2rem) rotate(-120deg); }
  to { transform: translate(-50%, -50%) rotate(480deg) translateX(10.2rem) rotate(-480deg); }
}
@keyframes outerOrbitC {
  from { transform: translate(-50%, -50%) rotate(240deg) translateX(10.2rem) rotate(-240deg); }
  to { transform: translate(-50%, -50%) rotate(600deg) translateX(10.2rem) rotate(-600deg); }
}

@media (max-width: 640px) {
  .main-node,
  .user-node,
  .node-a,
  .node-b,
  .node-c {
    width: 5.25rem;
    height: 5.25rem;
    font-size: .68rem;
  }
  @keyframes coreProblemOrbit {
    from { transform: translate(-50%, -50%) rotate(0deg) translateX(-3rem) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg) translateX(-3rem) rotate(-360deg); }
  }
  @keyframes coreUserOrbit {
    from { transform: translate(-50%, -50%) rotate(180deg) translateX(-3rem) rotate(-180deg); }
    to { transform: translate(-50%, -50%) rotate(540deg) translateX(-3rem) rotate(-540deg); }
  }
  @keyframes outerOrbitA {
    from { transform: translate(-50%, -50%) rotate(0deg) translateX(8rem) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg) translateX(8rem) rotate(-360deg); }
  }
  @keyframes outerOrbitB {
    from { transform: translate(-50%, -50%) rotate(120deg) translateX(8rem) rotate(-120deg); }
    to { transform: translate(-50%, -50%) rotate(480deg) translateX(8rem) rotate(-480deg); }
  }
  @keyframes outerOrbitC {
    from { transform: translate(-50%, -50%) rotate(240deg) translateX(8rem) rotate(-240deg); }
    to { transform: translate(-50%, -50%) rotate(600deg) translateX(8rem) rotate(-600deg); }
  }
}

/* Refine outer orbit into a 3D-ish elliptical motion. */
.node-a,
.node-b,
.node-c {
  transform-origin: center;
  transition: z-index .2s linear;
}
.node-a { animation: outerOrbit3dA 18s linear infinite; }
.node-b { animation: outerOrbit3dB 18s linear infinite; }
.node-c { animation: outerOrbit3dC 18s linear infinite; }

@keyframes outerOrbit3dA {
  0% { transform: translate(-50%, -50%) translate3d(10.4rem, 0, 0) scale(1.12); z-index: 7; opacity: 1; filter: brightness(1.08); }
  25% { transform: translate(-50%, -50%) translate3d(0, 4.4rem, 0) scale(.96); z-index: 5; opacity: .88; filter: brightness(.96); }
  50% { transform: translate(-50%, -50%) translate3d(-10.4rem, 0, 0) scale(.74); z-index: 2; opacity: .56; filter: brightness(.72); }
  75% { transform: translate(-50%, -50%) translate3d(0, -4.4rem, 0) scale(.96); z-index: 5; opacity: .88; filter: brightness(.96); }
  100% { transform: translate(-50%, -50%) translate3d(10.4rem, 0, 0) scale(1.12); z-index: 7; opacity: 1; filter: brightness(1.08); }
}
@keyframes outerOrbit3dB {
  0% { transform: translate(-50%, -50%) translate3d(-5.2rem, 3.8rem, 0) scale(.83); z-index: 3; opacity: .66; filter: brightness(.8); }
  16.66% { transform: translate(-50%, -50%) translate3d(-10.4rem, 0, 0) scale(.74); z-index: 2; opacity: .56; filter: brightness(.72); }
  41.66% { transform: translate(-50%, -50%) translate3d(0, -4.4rem, 0) scale(.96); z-index: 5; opacity: .88; filter: brightness(.96); }
  66.66% { transform: translate(-50%, -50%) translate3d(10.4rem, 0, 0) scale(1.12); z-index: 7; opacity: 1; filter: brightness(1.08); }
  91.66% { transform: translate(-50%, -50%) translate3d(0, 4.4rem, 0) scale(.96); z-index: 5; opacity: .88; filter: brightness(.96); }
  100% { transform: translate(-50%, -50%) translate3d(-5.2rem, 3.8rem, 0) scale(.83); z-index: 3; opacity: .66; filter: brightness(.8); }
}
@keyframes outerOrbit3dC {
  0% { transform: translate(-50%, -50%) translate3d(-5.2rem, -3.8rem, 0) scale(.83); z-index: 3; opacity: .66; filter: brightness(.8); }
  8.33% { transform: translate(-50%, -50%) translate3d(0, -4.4rem, 0) scale(.96); z-index: 5; opacity: .88; filter: brightness(.96); }
  33.33% { transform: translate(-50%, -50%) translate3d(10.4rem, 0, 0) scale(1.12); z-index: 7; opacity: 1; filter: brightness(1.08); }
  58.33% { transform: translate(-50%, -50%) translate3d(0, 4.4rem, 0) scale(.96); z-index: 5; opacity: .88; filter: brightness(.96); }
  83.33% { transform: translate(-50%, -50%) translate3d(-10.4rem, 0, 0) scale(.74); z-index: 2; opacity: .56; filter: brightness(.72); }
  100% { transform: translate(-50%, -50%) translate3d(-5.2rem, -3.8rem, 0) scale(.83); z-index: 3; opacity: .66; filter: brightness(.8); }
}

@media (max-width: 640px) {
  @keyframes outerOrbit3dA {
    0% { transform: translate(-50%, -50%) translate3d(8.1rem, 0, 0) scale(1.08); z-index: 7; opacity: 1; filter: brightness(1.08); }
    25% { transform: translate(-50%, -50%) translate3d(0, 3.35rem, 0) scale(.94); z-index: 5; opacity: .88; filter: brightness(.96); }
    50% { transform: translate(-50%, -50%) translate3d(-8.1rem, 0, 0) scale(.72); z-index: 2; opacity: .56; filter: brightness(.72); }
    75% { transform: translate(-50%, -50%) translate3d(0, -3.35rem, 0) scale(.94); z-index: 5; opacity: .88; filter: brightness(.96); }
    100% { transform: translate(-50%, -50%) translate3d(8.1rem, 0, 0) scale(1.08); z-index: 7; opacity: 1; filter: brightness(1.08); }
  }
  @keyframes outerOrbit3dB {
    0% { transform: translate(-50%, -50%) translate3d(-4.05rem, 2.9rem, 0) scale(.82); z-index: 3; opacity: .66; filter: brightness(.8); }
    16.66% { transform: translate(-50%, -50%) translate3d(-8.1rem, 0, 0) scale(.72); z-index: 2; opacity: .56; filter: brightness(.72); }
    41.66% { transform: translate(-50%, -50%) translate3d(0, -3.35rem, 0) scale(.94); z-index: 5; opacity: .88; filter: brightness(.96); }
    66.66% { transform: translate(-50%, -50%) translate3d(8.1rem, 0, 0) scale(1.08); z-index: 7; opacity: 1; filter: brightness(1.08); }
    91.66% { transform: translate(-50%, -50%) translate3d(0, 3.35rem, 0) scale(.94); z-index: 5; opacity: .88; filter: brightness(.96); }
    100% { transform: translate(-50%, -50%) translate3d(-4.05rem, 2.9rem, 0) scale(.82); z-index: 3; opacity: .66; filter: brightness(.8); }
  }
  @keyframes outerOrbit3dC {
    0% { transform: translate(-50%, -50%) translate3d(-4.05rem, -2.9rem, 0) scale(.82); z-index: 3; opacity: .66; filter: brightness(.8); }
    8.33% { transform: translate(-50%, -50%) translate3d(0, -3.35rem, 0) scale(.94); z-index: 5; opacity: .88; filter: brightness(.96); }
    33.33% { transform: translate(-50%, -50%) translate3d(8.1rem, 0, 0) scale(1.08); z-index: 7; opacity: 1; filter: brightness(1.08); }
    58.33% { transform: translate(-50%, -50%) translate3d(0, 3.35rem, 0) scale(.94); z-index: 5; opacity: .88; filter: brightness(.96); }
    83.33% { transform: translate(-50%, -50%) translate3d(-8.1rem, 0, 0) scale(.72); z-index: 2; opacity: .56; filter: brightness(.72); }
    100% { transform: translate(-50%, -50%) translate3d(-4.05rem, -2.9rem, 0) scale(.82); z-index: 3; opacity: .66; filter: brightness(.8); }
  }
}

/* Refine outer orbit again: wider electron/planet orbit that avoids the core pair. */
.node-a { animation: outerElectronA 20s linear infinite; }
.node-b { animation: outerElectronB 20s linear infinite; }
.node-c { animation: outerElectronC 20s linear infinite; }

@keyframes outerElectronA {
  0% { transform: translate(-50%, -50%) translate3d(13.2rem, 0, 0) scale(1.1); z-index: 7; opacity: 1; filter: brightness(1.08); }
  25% { transform: translate(-50%, -50%) translate3d(0, 8.2rem, 0) scale(.98); z-index: 6; opacity: .9; filter: brightness(.98); }
  50% { transform: translate(-50%, -50%) translate3d(-13.2rem, 0, 0) scale(.78); z-index: 2; opacity: .58; filter: brightness(.76); }
  75% { transform: translate(-50%, -50%) translate3d(0, -8.2rem, 0) scale(.98); z-index: 6; opacity: .9; filter: brightness(.98); }
  100% { transform: translate(-50%, -50%) translate3d(13.2rem, 0, 0) scale(1.1); z-index: 7; opacity: 1; filter: brightness(1.08); }
}
@keyframes outerElectronB {
  0% { transform: translate(-50%, -50%) translate3d(-6.6rem, 7.1rem, 0) scale(.88); z-index: 4; opacity: .78; filter: brightness(.88); }
  16.66% { transform: translate(-50%, -50%) translate3d(-13.2rem, 0, 0) scale(.78); z-index: 2; opacity: .58; filter: brightness(.76); }
  41.66% { transform: translate(-50%, -50%) translate3d(0, -8.2rem, 0) scale(.98); z-index: 6; opacity: .9; filter: brightness(.98); }
  66.66% { transform: translate(-50%, -50%) translate3d(13.2rem, 0, 0) scale(1.1); z-index: 7; opacity: 1; filter: brightness(1.08); }
  91.66% { transform: translate(-50%, -50%) translate3d(0, 8.2rem, 0) scale(.98); z-index: 6; opacity: .9; filter: brightness(.98); }
  100% { transform: translate(-50%, -50%) translate3d(-6.6rem, 7.1rem, 0) scale(.88); z-index: 4; opacity: .78; filter: brightness(.88); }
}
@keyframes outerElectronC {
  0% { transform: translate(-50%, -50%) translate3d(-6.6rem, -7.1rem, 0) scale(.88); z-index: 4; opacity: .78; filter: brightness(.88); }
  8.33% { transform: translate(-50%, -50%) translate3d(0, -8.2rem, 0) scale(.98); z-index: 6; opacity: .9; filter: brightness(.98); }
  33.33% { transform: translate(-50%, -50%) translate3d(13.2rem, 0, 0) scale(1.1); z-index: 7; opacity: 1; filter: brightness(1.08); }
  58.33% { transform: translate(-50%, -50%) translate3d(0, 8.2rem, 0) scale(.98); z-index: 6; opacity: .9; filter: brightness(.98); }
  83.33% { transform: translate(-50%, -50%) translate3d(-13.2rem, 0, 0) scale(.78); z-index: 2; opacity: .58; filter: brightness(.76); }
  100% { transform: translate(-50%, -50%) translate3d(-6.6rem, -7.1rem, 0) scale(.88); z-index: 4; opacity: .78; filter: brightness(.88); }
}

@media (max-width: 640px) {
  @keyframes outerElectronA {
    0% { transform: translate(-50%, -50%) translate3d(9.2rem, 0, 0) scale(1.05); z-index: 7; opacity: 1; filter: brightness(1.08); }
    25% { transform: translate(-50%, -50%) translate3d(0, 6rem, 0) scale(.95); z-index: 6; opacity: .9; filter: brightness(.98); }
    50% { transform: translate(-50%, -50%) translate3d(-9.2rem, 0, 0) scale(.76); z-index: 2; opacity: .58; filter: brightness(.76); }
    75% { transform: translate(-50%, -50%) translate3d(0, -6rem, 0) scale(.95); z-index: 6; opacity: .9; filter: brightness(.98); }
    100% { transform: translate(-50%, -50%) translate3d(9.2rem, 0, 0) scale(1.05); z-index: 7; opacity: 1; filter: brightness(1.08); }
  }
  @keyframes outerElectronB {
    0% { transform: translate(-50%, -50%) translate3d(-4.6rem, 5.2rem, 0) scale(.86); z-index: 4; opacity: .78; filter: brightness(.88); }
    16.66% { transform: translate(-50%, -50%) translate3d(-9.2rem, 0, 0) scale(.76); z-index: 2; opacity: .58; filter: brightness(.76); }
    41.66% { transform: translate(-50%, -50%) translate3d(0, -6rem, 0) scale(.95); z-index: 6; opacity: .9; filter: brightness(.98); }
    66.66% { transform: translate(-50%, -50%) translate3d(9.2rem, 0, 0) scale(1.05); z-index: 7; opacity: 1; filter: brightness(1.08); }
    91.66% { transform: translate(-50%, -50%) translate3d(0, 6rem, 0) scale(.95); z-index: 6; opacity: .9; filter: brightness(.98); }
    100% { transform: translate(-50%, -50%) translate3d(-4.6rem, 5.2rem, 0) scale(.86); z-index: 4; opacity: .78; filter: brightness(.88); }
  }
  @keyframes outerElectronC {
    0% { transform: translate(-50%, -50%) translate3d(-4.6rem, -5.2rem, 0) scale(.86); z-index: 4; opacity: .78; filter: brightness(.88); }
    8.33% { transform: translate(-50%, -50%) translate3d(0, -6rem, 0) scale(.95); z-index: 6; opacity: .9; filter: brightness(.98); }
    33.33% { transform: translate(-50%, -50%) translate3d(9.2rem, 0, 0) scale(1.05); z-index: 7; opacity: 1; filter: brightness(1.08); }
    58.33% { transform: translate(-50%, -50%) translate3d(0, 6rem, 0) scale(.95); z-index: 6; opacity: .9; filter: brightness(.98); }
    83.33% { transform: translate(-50%, -50%) translate3d(-9.2rem, 0, 0) scale(.76); z-index: 2; opacity: .58; filter: brightness(.76); }
    100% { transform: translate(-50%, -50%) translate3d(-4.6rem, -5.2rem, 0) scale(.86); z-index: 4; opacity: .78; filter: brightness(.88); }
  }
}

/* Tighten center pair and regularize the orbital system. */
.main-node,
.user-node {
  width: 5.8rem;
  height: 5.8rem;
}
.main-node { animation: tightCoreProblemOrbit 7s linear infinite; }
.user-node { animation: tightCoreUserOrbit 7s linear infinite; }
.node-a { animation: orderlyElectronA 20s linear infinite; }
.node-b { animation: orderlyElectronB 20s linear infinite; }
.node-c { animation: orderlyElectronC 20s linear infinite; }

@keyframes tightCoreProblemOrbit {
  from { transform: translate(-50%, -50%) rotate(0deg) translateX(-2.85rem) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg) translateX(-2.85rem) rotate(-360deg); }
}
@keyframes tightCoreUserOrbit {
  from { transform: translate(-50%, -50%) rotate(180deg) translateX(-2.85rem) rotate(-180deg); }
  to { transform: translate(-50%, -50%) rotate(540deg) translateX(-2.85rem) rotate(-540deg); }
}
@keyframes orderlyElectronA {
  0% { transform: translate(-50%, -50%) translate3d(12.4rem, 0, 0) scale(1.08); z-index: 7; opacity: 1; filter: brightness(1.06); }
  25% { transform: translate(-50%, -50%) translate3d(0, 7.2rem, 0) scale(.96); z-index: 5; opacity: .86; filter: brightness(.96); }
  50% { transform: translate(-50%, -50%) translate3d(-12.4rem, 0, 0) scale(.82); z-index: 2; opacity: .62; filter: brightness(.78); }
  75% { transform: translate(-50%, -50%) translate3d(0, -7.2rem, 0) scale(.96); z-index: 5; opacity: .86; filter: brightness(.96); }
  100% { transform: translate(-50%, -50%) translate3d(12.4rem, 0, 0) scale(1.08); z-index: 7; opacity: 1; filter: brightness(1.06); }
}
@keyframes orderlyElectronB {
  0% { transform: translate(-50%, -50%) translate3d(-10.7rem, 3.6rem, 0) scale(.86); z-index: 3; opacity: .72; filter: brightness(.84); }
  16.66% { transform: translate(-50%, -50%) translate3d(-12.4rem, 0, 0) scale(.82); z-index: 2; opacity: .62; filter: brightness(.78); }
  41.66% { transform: translate(-50%, -50%) translate3d(0, -7.2rem, 0) scale(.96); z-index: 5; opacity: .86; filter: brightness(.96); }
  66.66% { transform: translate(-50%, -50%) translate3d(12.4rem, 0, 0) scale(1.08); z-index: 7; opacity: 1; filter: brightness(1.06); }
  91.66% { transform: translate(-50%, -50%) translate3d(0, 7.2rem, 0) scale(.96); z-index: 5; opacity: .86; filter: brightness(.96); }
  100% { transform: translate(-50%, -50%) translate3d(-10.7rem, 3.6rem, 0) scale(.86); z-index: 3; opacity: .72; filter: brightness(.84); }
}
@keyframes orderlyElectronC {
  0% { transform: translate(-50%, -50%) translate3d(-10.7rem, -3.6rem, 0) scale(.86); z-index: 3; opacity: .72; filter: brightness(.84); }
  8.33% { transform: translate(-50%, -50%) translate3d(0, -7.2rem, 0) scale(.96); z-index: 5; opacity: .86; filter: brightness(.96); }
  33.33% { transform: translate(-50%, -50%) translate3d(12.4rem, 0, 0) scale(1.08); z-index: 7; opacity: 1; filter: brightness(1.06); }
  58.33% { transform: translate(-50%, -50%) translate3d(0, 7.2rem, 0) scale(.96); z-index: 5; opacity: .86; filter: brightness(.96); }
  83.33% { transform: translate(-50%, -50%) translate3d(-12.4rem, 0, 0) scale(.82); z-index: 2; opacity: .62; filter: brightness(.78); }
  100% { transform: translate(-50%, -50%) translate3d(-10.7rem, -3.6rem, 0) scale(.86); z-index: 3; opacity: .72; filter: brightness(.84); }
}

@media (max-width: 640px) {
  .main-node,
  .user-node {
    width: 4.9rem;
    height: 4.9rem;
  }
  @keyframes tightCoreProblemOrbit {
    from { transform: translate(-50%, -50%) rotate(0deg) translateX(-2.35rem) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg) translateX(-2.35rem) rotate(-360deg); }
  }
  @keyframes tightCoreUserOrbit {
    from { transform: translate(-50%, -50%) rotate(180deg) translateX(-2.35rem) rotate(-180deg); }
    to { transform: translate(-50%, -50%) rotate(540deg) translateX(-2.35rem) rotate(-540deg); }
  }
}

/* Smooth actual elliptical orbit for the outer three circles. */
.node-a,
.node-b,
.node-c {
  transform-origin: center;
}
.node-a { animation: smoothOrbitA 18s linear infinite; }
.node-b { animation: smoothOrbitB 18s linear infinite; }
.node-c { animation: smoothOrbitC 18s linear infinite; }

@keyframes smoothOrbitA {
  0% { transform: translate(-50%, -50%) rotate(0deg) translateX(12.8rem) scale(1.08) rotate(0deg); z-index: 7; opacity: 1; filter: brightness(1.06); }
  12.5% { transform: translate(-50%, -50%) rotate(45deg) translateX(12.8rem) scale(1.02) rotate(-45deg); z-index: 6; opacity: .94; filter: brightness(1); }
  25% { transform: translate(-50%, -50%) rotate(90deg) translateX(7.2rem) scale(.94) rotate(-90deg); z-index: 5; opacity: .84; filter: brightness(.94); }
  37.5% { transform: translate(-50%, -50%) rotate(135deg) translateX(12.8rem) scale(.84) rotate(-135deg); z-index: 3; opacity: .68; filter: brightness(.84); }
  50% { transform: translate(-50%, -50%) rotate(180deg) translateX(12.8rem) scale(.78) rotate(-180deg); z-index: 2; opacity: .58; filter: brightness(.76); }
  62.5% { transform: translate(-50%, -50%) rotate(225deg) translateX(12.8rem) scale(.84) rotate(-225deg); z-index: 3; opacity: .68; filter: brightness(.84); }
  75% { transform: translate(-50%, -50%) rotate(270deg) translateX(7.2rem) scale(.94) rotate(-270deg); z-index: 5; opacity: .84; filter: brightness(.94); }
  87.5% { transform: translate(-50%, -50%) rotate(315deg) translateX(12.8rem) scale(1.02) rotate(-315deg); z-index: 6; opacity: .94; filter: brightness(1); }
  100% { transform: translate(-50%, -50%) rotate(360deg) translateX(12.8rem) scale(1.08) rotate(-360deg); z-index: 7; opacity: 1; filter: brightness(1.06); }
}
@keyframes smoothOrbitB {
  0% { transform: translate(-50%, -50%) rotate(120deg) translateX(12.8rem) scale(.88) rotate(-120deg); z-index: 4; opacity: .76; filter: brightness(.88); }
  12.5% { transform: translate(-50%, -50%) rotate(165deg) translateX(12.8rem) scale(.8) rotate(-165deg); z-index: 2; opacity: .62; filter: brightness(.8); }
  25% { transform: translate(-50%, -50%) rotate(210deg) translateX(12.8rem) scale(.82) rotate(-210deg); z-index: 3; opacity: .64; filter: brightness(.82); }
  37.5% { transform: translate(-50%, -50%) rotate(255deg) translateX(9rem) scale(.9) rotate(-255deg); z-index: 4; opacity: .78; filter: brightness(.9); }
  50% { transform: translate(-50%, -50%) rotate(300deg) translateX(10.2rem) scale(1) rotate(-300deg); z-index: 6; opacity: .92; filter: brightness(1); }
  62.5% { transform: translate(-50%, -50%) rotate(345deg) translateX(12.8rem) scale(1.08) rotate(-345deg); z-index: 7; opacity: 1; filter: brightness(1.06); }
  75% { transform: translate(-50%, -50%) rotate(390deg) translateX(12.8rem) scale(1.04) rotate(-390deg); z-index: 6; opacity: .96; filter: brightness(1.02); }
  87.5% { transform: translate(-50%, -50%) rotate(435deg) translateX(8rem) scale(.94) rotate(-435deg); z-index: 5; opacity: .84; filter: brightness(.94); }
  100% { transform: translate(-50%, -50%) rotate(480deg) translateX(12.8rem) scale(.88) rotate(-480deg); z-index: 4; opacity: .76; filter: brightness(.88); }
}
@keyframes smoothOrbitC {
  0% { transform: translate(-50%, -50%) rotate(240deg) translateX(12.8rem) scale(.88) rotate(-240deg); z-index: 4; opacity: .76; filter: brightness(.88); }
  12.5% { transform: translate(-50%, -50%) rotate(285deg) translateX(8rem) scale(.94) rotate(-285deg); z-index: 5; opacity: .84; filter: brightness(.94); }
  25% { transform: translate(-50%, -50%) rotate(330deg) translateX(12.8rem) scale(1.06) rotate(-330deg); z-index: 7; opacity: .98; filter: brightness(1.05); }
  37.5% { transform: translate(-50%, -50%) rotate(375deg) translateX(12.8rem) scale(1.06) rotate(-375deg); z-index: 7; opacity: .98; filter: brightness(1.05); }
  50% { transform: translate(-50%, -50%) rotate(420deg) translateX(9rem) scale(.98) rotate(-420deg); z-index: 5; opacity: .88; filter: brightness(.96); }
  62.5% { transform: translate(-50%, -50%) rotate(465deg) translateX(12.8rem) scale(.86) rotate(-465deg); z-index: 3; opacity: .72; filter: brightness(.86); }
  75% { transform: translate(-50%, -50%) rotate(510deg) translateX(12.8rem) scale(.78) rotate(-510deg); z-index: 2; opacity: .58; filter: brightness(.76); }
  87.5% { transform: translate(-50%, -50%) rotate(555deg) translateX(12.8rem) scale(.82) rotate(-555deg); z-index: 3; opacity: .66; filter: brightness(.82); }
  100% { transform: translate(-50%, -50%) rotate(600deg) translateX(12.8rem) scale(.88) rotate(-600deg); z-index: 4; opacity: .76; filter: brightness(.88); }
}

/* Final compact smooth orbit: continuous ellipse contained inside the mission panel. */
.node-a { animation: compactOrbitA 18s linear infinite; }
.node-b { animation: compactOrbitB 18s linear infinite; }
.node-c { animation: compactOrbitC 18s linear infinite; }

@keyframes compactOrbitA {
  0% { transform: translate(-50%, -50%) translate3d(9.4rem, 0, 0) scale(1.02); z-index: 6; opacity: .94; filter: brightness(1); }
  12.5% { transform: translate(-50%, -50%) translate3d(6.65rem, 3.75rem, 0) scale(1.06); z-index: 7; opacity: 1; filter: brightness(1.06); }
  25% { transform: translate(-50%, -50%) translate3d(0, 5.3rem, 0) scale(1.08); z-index: 7; opacity: 1; filter: brightness(1.08); }
  37.5% { transform: translate(-50%, -50%) translate3d(-6.65rem, 3.75rem, 0) scale(.96); z-index: 5; opacity: .86; filter: brightness(.94); }
  50% { transform: translate(-50%, -50%) translate3d(-9.4rem, 0, 0) scale(.82); z-index: 2; opacity: .62; filter: brightness(.78); }
  62.5% { transform: translate(-50%, -50%) translate3d(-6.65rem, -3.75rem, 0) scale(.88); z-index: 3; opacity: .72; filter: brightness(.84); }
  75% { transform: translate(-50%, -50%) translate3d(0, -5.3rem, 0) scale(.92); z-index: 4; opacity: .8; filter: brightness(.9); }
  87.5% { transform: translate(-50%, -50%) translate3d(6.65rem, -3.75rem, 0) scale(.96); z-index: 5; opacity: .88; filter: brightness(.96); }
  100% { transform: translate(-50%, -50%) translate3d(9.4rem, 0, 0) scale(1.02); z-index: 6; opacity: .94; filter: brightness(1); }
}
@keyframes compactOrbitB {
  0% { transform: translate(-50%, -50%) translate3d(-4.7rem, 4.59rem, 0) scale(1.02); z-index: 6; opacity: .94; filter: brightness(1); }
  12.5% { transform: translate(-50%, -50%) translate3d(-9.08rem, 1.37rem, 0) scale(.86); z-index: 3; opacity: .7; filter: brightness(.82); }
  25% { transform: translate(-50%, -50%) translate3d(-8.14rem, -2.65rem, 0) scale(.84); z-index: 2; opacity: .66; filter: brightness(.8); }
  37.5% { transform: translate(-50%, -50%) translate3d(-2.43rem, -5.12rem, 0) scale(.9); z-index: 4; opacity: .76; filter: brightness(.88); }
  50% { transform: translate(-50%, -50%) translate3d(4.7rem, -4.59rem, 0) scale(.95); z-index: 5; opacity: .86; filter: brightness(.94); }
  62.5% { transform: translate(-50%, -50%) translate3d(9.08rem, -1.37rem, 0) scale(1.02); z-index: 6; opacity: .94; filter: brightness(1); }
  75% { transform: translate(-50%, -50%) translate3d(8.14rem, 2.65rem, 0) scale(1.07); z-index: 7; opacity: 1; filter: brightness(1.08); }
  87.5% { transform: translate(-50%, -50%) translate3d(2.43rem, 5.12rem, 0) scale(1.08); z-index: 7; opacity: 1; filter: brightness(1.08); }
  100% { transform: translate(-50%, -50%) translate3d(-4.7rem, 4.59rem, 0) scale(1.02); z-index: 6; opacity: .94; filter: brightness(1); }
}
@keyframes compactOrbitC {
  0% { transform: translate(-50%, -50%) translate3d(-4.7rem, -4.59rem, 0) scale(.9); z-index: 4; opacity: .76; filter: brightness(.88); }
  12.5% { transform: translate(-50%, -50%) translate3d(2.43rem, -5.12rem, 0) scale(.93); z-index: 5; opacity: .82; filter: brightness(.92); }
  25% { transform: translate(-50%, -50%) translate3d(8.14rem, -2.65rem, 0) scale(.98); z-index: 5; opacity: .9; filter: brightness(.98); }
  37.5% { transform: translate(-50%, -50%) translate3d(9.08rem, 1.37rem, 0) scale(1.04); z-index: 6; opacity: .96; filter: brightness(1.04); }
  50% { transform: translate(-50%, -50%) translate3d(4.7rem, 4.59rem, 0) scale(1.08); z-index: 7; opacity: 1; filter: brightness(1.08); }
  62.5% { transform: translate(-50%, -50%) translate3d(-2.43rem, 5.12rem, 0) scale(1.05); z-index: 7; opacity: .98; filter: brightness(1.04); }
  75% { transform: translate(-50%, -50%) translate3d(-8.14rem, 2.65rem, 0) scale(.92); z-index: 4; opacity: .8; filter: brightness(.9); }
  87.5% { transform: translate(-50%, -50%) translate3d(-9.08rem, -1.37rem, 0) scale(.82); z-index: 2; opacity: .62; filter: brightness(.78); }
  100% { transform: translate(-50%, -50%) translate3d(-4.7rem, -4.59rem, 0) scale(.9); z-index: 4; opacity: .76; filter: brightness(.88); }
}

/* Wider contained orbit radius. */
.node-a { animation: wideOrbitA 18s linear infinite; }
.node-b { animation: wideOrbitB 18s linear infinite; }
.node-c { animation: wideOrbitC 18s linear infinite; }

@keyframes wideOrbitA {
  0% { transform: translate(-50%, -50%) translate3d(10.8rem, 0, 0) scale(1.04); z-index: 6; opacity: .96; filter: brightness(1); }
  12.5% { transform: translate(-50%, -50%) translate3d(7.64rem, 4.28rem, 0) scale(1.08); z-index: 7; opacity: 1; filter: brightness(1.06); }
  25% { transform: translate(-50%, -50%) translate3d(0, 6.05rem, 0) scale(1.1); z-index: 7; opacity: 1; filter: brightness(1.08); }
  37.5% { transform: translate(-50%, -50%) translate3d(-7.64rem, 4.28rem, 0) scale(.96); z-index: 5; opacity: .86; filter: brightness(.94); }
  50% { transform: translate(-50%, -50%) translate3d(-10.8rem, 0, 0) scale(.8); z-index: 2; opacity: .6; filter: brightness(.76); }
  62.5% { transform: translate(-50%, -50%) translate3d(-7.64rem, -4.28rem, 0) scale(.86); z-index: 3; opacity: .7; filter: brightness(.84); }
  75% { transform: translate(-50%, -50%) translate3d(0, -6.05rem, 0) scale(.9); z-index: 4; opacity: .78; filter: brightness(.9); }
  87.5% { transform: translate(-50%, -50%) translate3d(7.64rem, -4.28rem, 0) scale(.96); z-index: 5; opacity: .88; filter: brightness(.96); }
  100% { transform: translate(-50%, -50%) translate3d(10.8rem, 0, 0) scale(1.04); z-index: 6; opacity: .96; filter: brightness(1); }
}
@keyframes wideOrbitB {
  0% { transform: translate(-50%, -50%) translate3d(-5.4rem, 5.24rem, 0) scale(1.04); z-index: 6; opacity: .96; filter: brightness(1); }
  12.5% { transform: translate(-50%, -50%) translate3d(-10.44rem, 1.56rem, 0) scale(.84); z-index: 3; opacity: .68; filter: brightness(.82); }
  25% { transform: translate(-50%, -50%) translate3d(-9.35rem, -3.03rem, 0) scale(.82); z-index: 2; opacity: .64; filter: brightness(.8); }
  37.5% { transform: translate(-50%, -50%) translate3d(-2.79rem, -5.84rem, 0) scale(.9); z-index: 4; opacity: .76; filter: brightness(.88); }
  50% { transform: translate(-50%, -50%) translate3d(5.4rem, -5.24rem, 0) scale(.95); z-index: 5; opacity: .86; filter: brightness(.94); }
  62.5% { transform: translate(-50%, -50%) translate3d(10.44rem, -1.56rem, 0) scale(1.04); z-index: 6; opacity: .96; filter: brightness(1); }
  75% { transform: translate(-50%, -50%) translate3d(9.35rem, 3.03rem, 0) scale(1.09); z-index: 7; opacity: 1; filter: brightness(1.08); }
  87.5% { transform: translate(-50%, -50%) translate3d(2.79rem, 5.84rem, 0) scale(1.1); z-index: 7; opacity: 1; filter: brightness(1.08); }
  100% { transform: translate(-50%, -50%) translate3d(-5.4rem, 5.24rem, 0) scale(1.04); z-index: 6; opacity: .96; filter: brightness(1); }
}
@keyframes wideOrbitC {
  0% { transform: translate(-50%, -50%) translate3d(-5.4rem, -5.24rem, 0) scale(.9); z-index: 4; opacity: .76; filter: brightness(.88); }
  12.5% { transform: translate(-50%, -50%) translate3d(2.79rem, -5.84rem, 0) scale(.93); z-index: 5; opacity: .82; filter: brightness(.92); }
  25% { transform: translate(-50%, -50%) translate3d(9.35rem, -3.03rem, 0) scale(.98); z-index: 5; opacity: .9; filter: brightness(.98); }
  37.5% { transform: translate(-50%, -50%) translate3d(10.44rem, 1.56rem, 0) scale(1.05); z-index: 6; opacity: .98; filter: brightness(1.04); }
  50% { transform: translate(-50%, -50%) translate3d(5.4rem, 5.24rem, 0) scale(1.1); z-index: 7; opacity: 1; filter: brightness(1.08); }
  62.5% { transform: translate(-50%, -50%) translate3d(-2.79rem, 5.84rem, 0) scale(1.06); z-index: 7; opacity: .98; filter: brightness(1.04); }
  75% { transform: translate(-50%, -50%) translate3d(-9.35rem, 3.03rem, 0) scale(.92); z-index: 4; opacity: .8; filter: brightness(.9); }
  87.5% { transform: translate(-50%, -50%) translate3d(-10.44rem, -1.56rem, 0) scale(.8); z-index: 2; opacity: .6; filter: brightness(.78); }
  100% { transform: translate(-50%, -50%) translate3d(-5.4rem, -5.24rem, 0) scale(.9); z-index: 4; opacity: .76; filter: brightness(.88); }
}

/* Make outer orbiting circles smaller. */
.node-a,
.node-b,
.node-c {
  width: 5.15rem;
  height: 5.15rem;
  font-size: .68rem;
}

@media (max-width: 640px) {
  .node-a,
  .node-b,
  .node-c {
    width: 4.45rem;
    height: 4.45rem;
    font-size: .6rem;
  }
}

/* Faster outer orbit only. */
.node-a { animation-duration: 10s; }
.node-b { animation-duration: 10s; }
.node-c { animation-duration: 10s; }

/* Continuous outer orbit: rotating wrappers remove bounce. */
.outer-system {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  width: 19.5rem;
  height: 11rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
}
.orbit-slot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  animation: continuousOuterOrbit 9s linear infinite;
  transform-origin: 0 0;
}
.slot-a { animation-delay: 0s; }
.slot-b { animation-delay: -3s; }
.slot-c { animation-delay: -6s; }
.orbit-slot .mission-node {
  left: 0;
  top: 0;
  right: auto;
  bottom: auto;
  width: 5.15rem;
  height: 5.15rem;
  font-size: .68rem;
  animation: keepOrbitTextUpright 9s linear infinite;
  transform-origin: center;
}
.slot-a .mission-node { animation-delay: 0s; }
.slot-b .mission-node { animation-delay: -3s; }
.slot-c .mission-node { animation-delay: -6s; }

@keyframes continuousOuterOrbit {
  from { transform: rotate(0deg) translateX(9.75rem) scaleY(.56); }
  to { transform: rotate(360deg) translateX(9.75rem) scaleY(.56); }
}
@keyframes keepOrbitTextUpright {
  from { transform: translate(-50%, -50%) scaleY(1.7857) rotate(0deg); opacity: .96; filter: brightness(1); }
  25% { opacity: .82; filter: brightness(.92); }
  50% { opacity: .62; filter: brightness(.76); }
  75% { opacity: .9; filter: brightness(.98); }
  to { transform: translate(-50%, -50%) scaleY(1.7857) rotate(-360deg); opacity: .96; filter: brightness(1); }
}

@media (max-width: 640px) {
  .outer-system {
    width: 15.8rem;
    height: 9rem;
  }
  .orbit-slot .mission-node {
    width: 4.45rem;
    height: 4.45rem;
    font-size: .6rem;
  }
  @keyframes continuousOuterOrbit {
    from { transform: rotate(0deg) translateX(7.9rem) scaleY(.57); }
    to { transform: rotate(360deg) translateX(7.9rem) scaleY(.57); }
  }
  @keyframes keepOrbitTextUpright {
    from { transform: translate(-50%, -50%) scaleY(1.7544) rotate(0deg); opacity: .96; filter: brightness(1); }
    25% { opacity: .82; filter: brightness(.92); }
    50% { opacity: .62; filter: brightness(.76); }
    75% { opacity: .9; filter: brightness(.98); }
    to { transform: translate(-50%, -50%) scaleY(1.7544) rotate(-360deg); opacity: .96; filter: brightness(1); }
  }
}

/* Slightly faster continuous outer orbit. */
.orbit-slot,
.orbit-slot .mission-node {
  animation-duration: 7s;
}

/* Fix outer orbit spacing: keep slots 120 degrees apart, counter-rotate labels independently. */
.slot-a { transform: rotate(0deg); }
.slot-b { transform: rotate(120deg); }
.slot-c { transform: rotate(240deg); }
.orbit-slot {
  animation: evenlySpacedOrbit 7s linear infinite;
}
.slot-a { animation-delay: 0s; }
.slot-b { animation-delay: -2.333333s; }
.slot-c { animation-delay: -4.666666s; }
.orbit-slot .mission-node {
  animation: uprightEvenOrbit 7s linear infinite;
}
.slot-a .mission-node { animation-delay: 0s; }
.slot-b .mission-node { animation-delay: 2.333333s; }
.slot-c .mission-node { animation-delay: 4.666666s; }

@keyframes evenlySpacedOrbit {
  from { transform: rotate(0deg) translateX(9.75rem) scaleY(.56); }
  to { transform: rotate(360deg) translateX(9.75rem) scaleY(.56); }
}
@keyframes uprightEvenOrbit {
  from { transform: translate(-50%, -50%) scaleY(1.7857) rotate(0deg); opacity: .94; filter: brightness(1); }
  25% { opacity: .86; filter: brightness(.94); }
  50% { opacity: .62; filter: brightness(.76); }
  75% { opacity: .9; filter: brightness(.98); }
  to { transform: translate(-50%, -50%) scaleY(1.7857) rotate(-360deg); opacity: .94; filter: brightness(1); }
}

@media (max-width: 640px) {
  @keyframes evenlySpacedOrbit {
    from { transform: rotate(0deg) translateX(7.9rem) scaleY(.57); }
    to { transform: rotate(360deg) translateX(7.9rem) scaleY(.57); }
  }
  @keyframes uprightEvenOrbit {
    from { transform: translate(-50%, -50%) scaleY(1.7544) rotate(0deg); opacity: .94; filter: brightness(1); }
    25% { opacity: .86; filter: brightness(.94); }
    50% { opacity: .62; filter: brightness(.76); }
    75% { opacity: .9; filter: brightness(.98); }
    to { transform: translate(-50%, -50%) scaleY(1.7544) rotate(-360deg); opacity: .94; filter: brightness(1); }
  }
}

/* Keep orbit labels upright while preserving even 120-degree spacing. */
.slot-a .mission-node { animation-delay: 0s; }
.slot-b .mission-node { animation-delay: -2.333333s; }
.slot-c .mission-node { animation-delay: -4.666666s; }

/* Mission animation color polish for current navy/light-blue scheme. */
.mission-panel {
  background: #062a52;
}
.mission-panel:after {
  background: radial-gradient(circle, rgba(95, 152, 216, .24), transparent 58%);
}
.outer-system .mission-node {
  background: #1f5f9f;
  color: #f8fbff;
  border-color: rgba(139, 184, 232, .45);
  box-shadow: 0 8px 20px rgba(3, 18, 35, .18);
}
.slot-a .mission-node {
  background: #2f74b5;
}
.slot-b .mission-node {
  background: #245f99;
}
.slot-c .mission-node {
  background: #1f5f9f;
}
.main-node {
  background: #8bb8e8;
  color: #062a52;
  border-color: rgba(214, 40, 57, .36);
  box-shadow: 0 0 0 3px rgba(214, 40, 57, .08), 0 10px 24px rgba(3,18,35,.16);
}
.user-node {
  background: #edf5fc;
  color: #062a52;
  border-color: rgba(139, 184, 232, .76);
  box-shadow: 0 10px 24px rgba(3,18,35,.14);
}
.signal-grid span {
  border-color: rgba(139, 184, 232, .14);
  background: rgba(139, 184, 232, .035);
}
.data-strip span {
  background: #103f73;
  border-color: rgba(139, 184, 232, .28);
  color: #dcecff;
}
.data-strip span:first-child {
  background: #6f1f35;
  border-color: rgba(214, 40, 57, .42);
  color: #ffd9de;
}
.mission-topline span:last-child {
  color: #ffd9de;
}

/* Stronger mission animation contrast pass. */
.mission-panel {
  background: #041f3f;
  border-color: rgba(139, 184, 232, .28);
}
.mission-panel:after {
  background: radial-gradient(circle, rgba(139, 184, 232, .32), transparent 58%);
}
.outer-system .mission-node {
  color: #ffffff;
  border-color: rgba(237, 245, 252, .58);
  box-shadow: 0 10px 24px rgba(0, 8, 18, .28);
}
.slot-a .mission-node {
  background: #0e4f91;
}
.slot-b .mission-node {
  background: #123f73;
}
.slot-c .mission-node {
  background: #1f65a6;
}
.main-node {
  background: #9ecbff;
  color: #041f3f;
  border: 2px solid #d62839;
  box-shadow: 0 0 0 4px rgba(214, 40, 57, .16), 0 14px 30px rgba(0, 8, 18, .25);
}
.user-node {
  background: #ffffff;
  color: #041f3f;
  border: 2px solid #6aa2df;
  box-shadow: 0 0 0 4px rgba(106, 162, 223, .14), 0 14px 30px rgba(0, 8, 18, .22);
}
.signal-grid span {
  border-color: rgba(139, 184, 232, .2);
  background: rgba(139, 184, 232, .05);
}
.mission-topline {
  color: #edf5fc;
}
.mission-topline span:last-child {
  color: #ffb6bf;
}
.data-strip span {
  background: #0b376a;
  color: #edf5fc;
  border-color: rgba(139, 184, 232, .34);
}
.data-strip span:first-child {
  background: #8f1f33;
  color: #ffffff;
  border-color: rgba(255, 182, 191, .62);
}

/* Make the central Problem node intentionally red while keeping the NASA-blue system. */
.main-node {
  background: linear-gradient(145deg, #b7273c 0%, #8f1f33 58%, #64182b 100%);
  color: #ffffff;
  border: 2px solid #ffb6bf;
  box-shadow: 0 0 0 4px rgba(214, 40, 57, .18), 0 14px 30px rgba(0, 8, 18, .3);
}
.main-node:before {
  background: rgba(255, 255, 255, .2);
}

/* Desynchronize the center pair and outer orbit so the geometry keeps changing. */
.main-node,
.user-node {
  animation-duration: 16s;
}
.orbit-slot,
.orbit-slot .mission-node {
  animation-duration: 4.8s;
}
.slot-a { animation-delay: 0s; }
.slot-b { animation-delay: -1.6s; }
.slot-c { animation-delay: -3.2s; }
.slot-a .mission-node { animation-delay: 0s; }
.slot-b .mission-node { animation-delay: -1.6s; }
.slot-c .mission-node { animation-delay: -3.2s; }