/* Cosmic Experiences: immersive journey and source-backed event center. */
.cosmic-hub-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(126, 206, 255, 0.34);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(28, 113, 190, 0.2), rgba(123, 78, 197, 0.2));
  color: var(--text);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.cosmic-hub-button > span:first-child { color: #b9e6ff; font-size: 1.1rem; }
.cosmic-hub-button:hover { border-color: rgba(160, 221, 255, 0.76); background: rgba(36, 109, 184, 0.3); }
.cosmic-feature-backdrop,
.cosmic-experience-overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(1, 3, 10, 0.78);
  z-index: 300;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.cosmic-feature-backdrop[hidden],
.cosmic-experience-overlay[hidden] { display: none !important; }
.cosmic-hub-panel {
  width: min(820px, 100%);
  max-height: min(820px, 92dvh);
  overflow: auto;
  padding: clamp(18px, 3vw, 30px);
  border: 1px solid rgba(156, 198, 255, 0.22);
  border-radius: 24px;
  background:
    radial-gradient(circle at 84% 7%, rgba(94, 73, 191, 0.2), transparent 33%),
    linear-gradient(145deg, rgba(9, 17, 34, 0.98), rgba(3, 7, 17, 0.99));
  box-shadow: 0 28px 100px rgba(0, 0, 0, 0.6);
}
.cosmic-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}
.cosmic-eyebrow {
  margin: 0 0 8px;
  color: #9bcfff;
  font-size: 0.67rem;
  font-weight: 900;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}
.cosmic-dialog-header h2,
.cosmic-journey-story h2,
.universe-now-header h2 {
  margin: 0;
  color: #f4f8ff;
  font-size: clamp(1.55rem, 4vw, 2.45rem);
  line-height: 1.06;
  letter-spacing: -0.045em;
}
.cosmic-dialog-header p:not(.cosmic-eyebrow) {
  max-width: 580px;
  margin: 10px 0 0;
  color: #adbed6;
  line-height: 1.6;
  font-size: 0.9rem;
}
.cosmic-close-button {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border: 1px solid rgba(175, 201, 238, 0.2);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.05);
  color: #f4f8ff;
  cursor: pointer;
  font-size: 1.3rem;
}
.cosmic-close-button:hover { background: rgba(255, 255, 255, 0.11); }
.cosmic-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.cosmic-choice {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 250px;
  flex-direction: column;
  align-items: flex-start;
  padding: 21px;
  overflow: hidden;
  border: 1px solid rgba(156, 198, 255, 0.19);
  border-radius: 19px;
  background: linear-gradient(145deg, rgba(16, 31, 57, 0.91), rgba(5, 11, 23, 0.94));
  color: #f5f8ff;
  text-align: left;
}
.cosmic-choice::after {
  position: absolute;
  right: -36px;
  bottom: -56px;
  width: 176px;
  height: 176px;
  border: 1px solid rgba(137, 191, 255, 0.18);
  border-radius: 50%;
  box-shadow: 0 0 0 18px rgba(137, 191, 255, 0.025), 0 0 0 42px rgba(137, 191, 255, 0.025);
  content: "";
  pointer-events: none;
}
.cosmic-choice-icon {
  display: grid;
  width: 46px;
  height: 46px;
  margin-bottom: 22px;
  place-items: center;
  border: 1px solid rgba(141, 203, 255, 0.28);
  border-radius: 15px;
  background: rgba(65, 131, 222, 0.13);
  color: #c7eaff;
  font-size: 1.35rem;
}
.cosmic-choice h3 { margin: 0 0 8px; font-size: 1.14rem; letter-spacing: -0.02em; }
.cosmic-choice p { margin: 0 0 20px; color: #aebed4; font-size: 0.86rem; line-height: 1.55; }
.cosmic-choice button,
.cosmic-action-button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  min-height: 43px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border: 1px solid rgba(118, 194, 255, 0.35);
  border-radius: 12px;
  background: linear-gradient(110deg, rgba(27, 128, 206, 0.28), rgba(123, 84, 210, 0.28));
  color: #eff8ff;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
}
.cosmic-choice button:hover,
.cosmic-action-button:hover { border-color: rgba(168, 223, 255, 0.8); }
.cosmic-action-button.secondary {
  border-color: rgba(175, 201, 238, 0.2);
  background: rgba(255, 255, 255, 0.045);
}
.cosmic-feature-note { margin: 18px 0 0; color: #91a5c1; font-size: 0.73rem; line-height: 1.5; }
.cosmic-experience-overlay {
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  overflow: auto;
  background: #02040c;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.infinite-journey {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 100dvh;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(18, 48, 91, 0.32), transparent 54%),
    #02040a;
}
.infinite-journey::before {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    radial-gradient(1px 1px at 6% 17%, rgba(230, 244, 255, .85) 50%, transparent 100%),
    radial-gradient(1px 1px at 14% 73%, rgba(211, 230, 255, .8) 50%, transparent 100%),
    radial-gradient(1px 1px at 21% 35%, rgba(255, 255, 255, .74) 50%, transparent 100%),
    radial-gradient(2px 2px at 28% 82%, rgba(183, 219, 255, .7) 50%, transparent 100%),
    radial-gradient(1px 1px at 37% 22%, rgba(255, 255, 255, .9) 50%, transparent 100%),
    radial-gradient(1px 1px at 43% 67%, rgba(226, 238, 255, .7) 50%, transparent 100%),
    radial-gradient(2px 2px at 53% 14%, rgba(255, 255, 255, .7) 50%, transparent 100%),
    radial-gradient(1px 1px at 58% 77%, rgba(217, 231, 255, .9) 50%, transparent 100%),
    radial-gradient(1px 1px at 67% 35%, rgba(255, 255, 255, .8) 50%, transparent 100%),
    radial-gradient(2px 2px at 72% 58%, rgba(193, 219, 255, .7) 50%, transparent 100%),
    radial-gradient(1px 1px at 81% 18%, rgba(255, 255, 255, .8) 50%, transparent 100%),
    radial-gradient(1px 1px at 89% 76%, rgba(232, 240, 255, .75) 50%, transparent 100%),
    radial-gradient(1px 1px at 95% 42%, rgba(255, 255, 255, .7) 50%, transparent 100%);
  content: "";
  opacity: .9;
  pointer-events: none;
}
.infinite-journey::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(2,4,10,.14), transparent 32%, rgba(2,4,10,.35) 63%, #02040a 100%);
  content: "";
  pointer-events: none;
}
.journey-header {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  gap: 18px;
  padding: max(18px, env(safe-area-inset-top)) clamp(18px, 4vw, 54px) 10px;
}
.journey-brand { display: flex; min-width: 0; align-items: center; gap: 12px; }
.journey-brand-mark {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(147, 214, 255, .35);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #7bd9ff, #164c8c 42%, #050a18 78%);
  box-shadow: 0 0 32px rgba(61, 163, 255, .25);
  font-weight: 900;
}
.journey-brand strong { display: block; font-size: .79rem; letter-spacing: .14em; }
.journey-brand small { display: block; margin-top: 4px; color: #91a5bf; font-size: .61rem; letter-spacing: .1em; }
.journey-exit { display: inline-flex; min-height: 42px; align-items: center; gap: 8px; padding: 0 14px; border: 1px solid rgba(160,197,244,.18); border-radius: 12px; background: rgba(9,16,30,.65); color: #eaf4ff; cursor: pointer; font: inherit; font-size: .78rem; }
.journey-main { display: grid; flex: 1; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; padding: clamp(22px, 3vh, 30px) clamp(18px, 5vw, 68px) max(18px, env(safe-area-inset-bottom)); }
.journey-visual-region { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; }
.journey-stage-line { display: flex; align-items: center; justify-content: space-between; gap: 15px; color: #8fa8c7; font-size: .66rem; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.journey-stage-number { color: #cfeaff; font-variant-numeric: tabular-nums; }
.journey-visual {
  position: relative;
  display: grid;
  min-height: 0;
  overflow: hidden;
  place-items: center;
  perspective: 900px;
  isolation: isolate;
}
.journey-visual-glow {
  position: absolute;
  width: min(54vw, 680px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(30,119,211,.13), rgba(61,66,177,.07) 35%, transparent 69%);
  filter: blur(9px);
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1), opacity 1s ease;
}
.journey-celestial-art {
  position: relative;
  width: min(65vw, 500px);
  aspect-ratio: 1;
  transition: transform 1.3s cubic-bezier(.16,.72,.2,1), filter 1s ease, opacity .8s ease;
  transform: scale(1);
  filter: drop-shadow(0 0 30px rgba(70, 157, 255, .1));
}
.journey-earth,
.journey-moon {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.journey-earth {
  width: 53%;
  aspect-ratio: 1;
  background:
    radial-gradient(ellipse at 26% 24%, rgba(211,246,255,.9) 0 1%, transparent 10%),
    radial-gradient(ellipse at 30% 44%, #5dbd9b 0 7%, transparent 8%),
    radial-gradient(ellipse at 66% 34%, #66c5a1 0 11%, transparent 12%),
    radial-gradient(ellipse at 41% 70%, #d4c782 0 7%, transparent 8%),
    radial-gradient(circle at 31% 30%, #8fe5ff 0, #2e90e9 28%, #16509f 56%, #04132d 79%);
  box-shadow: inset -27px -8px 45px rgba(0,0,0,.56), inset 5px 5px 22px rgba(209,247,255,.14), 0 0 62px rgba(55,156,255,.4);
}
.journey-earth::before {
  position: absolute;
  inset: -7%;
  border: 1px solid rgba(143, 222, 255, .22);
  border-radius: 50%;
  box-shadow: 0 0 38px rgba(71, 176, 255, .2);
  content: "";
}
.journey-moon {
  width: 10%;
  aspect-ratio: 1;
  top: 31%;
  left: 75%;
  background: radial-gradient(circle at 32% 28%, #f5f3e6 0, #a4a8ad 44%, #3b4656 80%);
  box-shadow: 0 0 14px rgba(218, 228, 242, .22);
  transition: all 1.2s ease;
}
.journey-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 86%;
  height: 40%;
  border: 1px solid rgba(153, 204, 255, .24);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-24deg);
  opacity: .8;
}
.journey-solar-system { position: absolute; inset: 0; opacity: 0; transform: scale(.78); transition: opacity 1s ease, transform 1.2s ease; }
.journey-sun {
  position: absolute; left: 50%; top: 50%; width: 16%; aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle at 35% 32%, #fff5cc, #ffb347 34%, #f06a30 67%, #7a2317 100%);
  box-shadow: 0 0 40px rgba(255,160,74,.48), 0 0 110px rgba(255,117,47,.17);
}
.journey-orbit-ring { position: absolute; left: 50%; top: 50%; width: var(--orbit-size); height: calc(var(--orbit-size) * .42); border: 1px solid rgba(169, 197, 255, .4); border-radius: 50%; transform: translate(-50%,-50%) rotate(-22deg); }
.journey-orbit-ring::after { position: absolute; top: 50%; left: 100%; width: 9px; height: 9px; border-radius: 50%; background: var(--planet-color, #9ec4e9); box-shadow: 0 0 15px var(--planet-color, #9ec4e9); content: ""; transform: translate(-50%,-50%); }
.journey-galaxy {
  position: absolute; inset: 4%; opacity: 0; transform: scale(.55) rotate(-26deg); transition: opacity 1s ease, transform 1.3s ease, filter .35s ease;
  filter: brightness(var(--galaxy-brightness, 1.5)) saturate(1.18);
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255,251,235,1) 0 2.5%, rgba(255,228,180,.92) 4.5%, rgba(255,173,128,.68) 8%, rgba(197,128,255,.45) 16%, rgba(88,151,255,.28) 29%, rgba(50,99,205,.12) 43%, transparent 68%);
}
.journey-galaxy::before {
  position: absolute; inset: 16%; border-radius: 50%;
  background: repeating-conic-gradient(from 12deg, rgba(160,200,255,0) 0 8deg, rgba(182,150,255,.72) 10deg 13deg, rgba(133,190,255,.48) 15deg 19deg, rgba(255,211,176,.15) 20deg 22deg, transparent 23deg 31deg);
  filter: blur(6px); transform: rotate(24deg) scaleY(.55); content: "";
}
.journey-galaxy::after {
  position: absolute; top: 49%; left: 7%; right: 7%; height: 3px;
  background: linear-gradient(90deg, transparent, rgba(196,222,255,.78), rgba(255,250,226,1), rgba(255,206,160,.92), rgba(196,222,255,.78), transparent);
  transform: rotate(-13deg); filter: blur(1px); content: "";
}
.journey-cosmic-web { position: absolute; inset: 0; opacity: 0; transform: scale(.8); transition: opacity 1s ease, transform 1.3s ease; }
.journey-cosmic-web svg { width: 100%; height: 100%; overflow: visible; }
.journey-cosmic-web line { stroke: rgba(117, 174, 255, .52); stroke-width: .6; }
.journey-cosmic-web circle { fill: rgba(183, 145, 255, .96); filter: drop-shadow(0 0 3px rgba(118, 169, 255, .8)); }
.journey-visual[data-scope="earth"] .journey-celestial-art { transform: scale(1.02); }
.journey-visual[data-scope="moon"] .journey-celestial-art { transform: scale(.8); }
.journey-visual[data-scope="moon"] .journey-earth { width: 36%; opacity: .82; }
.journey-visual[data-scope="moon"] .journey-moon { width: 23%; top: 50%; left: 67%; }
.journey-visual[data-scope="solar-system"] .journey-celestial-art { transform: scale(.73); opacity: .28; filter: blur(2px); }
.journey-visual[data-scope="solar-system"] .journey-solar-system { opacity: 1; transform: scale(1); }
.journey-visual[data-scope="solar-system"] .journey-orbit { opacity: 0; }
.journey-visual[data-scope="galaxy"] .journey-celestial-art { opacity: .05; transform: scale(.12); }
.journey-visual[data-scope="galaxy"] .journey-solar-system { opacity: .12; transform: scale(.55); }
.journey-visual[data-scope="galaxy"] .journey-galaxy { opacity: 1; transform: scale(1) rotate(0); }
.journey-visual[data-scope="cosmos"] .journey-celestial-art { opacity: 0; transform: scale(.04); }
.journey-visual[data-scope="cosmos"] .journey-galaxy { opacity: .2; transform: scale(.12) rotate(0); }
.journey-visual[data-scope="cosmos"] .journey-cosmic-web { opacity: 1; transform: scale(1); }
.journey-visual[data-scope="cosmos"] .journey-visual-glow { transform: scale(1.6); opacity: .2; }
.journey-stage-caption {
  position: absolute;
  right: 10px;
  bottom: 16px;
  left: 10px;
  color: rgba(183, 205, 234, .62);
  text-align: center;
  font-size: .65rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.journey-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.journey-legend-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(165, 187, 218, .35); }
.journey-legend-dot.is-active { width: 17px; border-radius: 999px; background: #9edaff; box-shadow: 0 0 12px rgba(99, 183, 255, .6); }
.journey-story {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: end;
  gap: clamp(20px, 5vw, 70px);
  padding: clamp(14px, 2.5vw, 28px) 0 0;
  border-top: 1px solid rgba(135, 175, 231, .15);
}
.journey-story-copy { min-width: 0; }
.journey-galaxy-controls {
  display: grid;
  gap: 10px;
  width: min(100%, 390px);
  margin-top: 18px;
  padding: 13px 15px;
  border: 1px solid rgba(141, 188, 255, .24);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(16, 29, 53, .84), rgba(6, 12, 25, .82));
}
.journey-galaxy-controls[hidden] { display: none !important; }
.journey-galaxy-controls-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.journey-galaxy-controls label { color:#edf5ff; font-size:.77rem; font-weight:800; }
.journey-galaxy-controls output { color:#a8d8ff; font-size:.74rem; font-weight:850; font-variant-numeric:tabular-nums; }
.journey-galaxy-controls input[type="range"] { width:100%; min-height:25px; margin:0; accent-color:#a4d8ff; cursor:pointer; }
.journey-galaxy-controls input[type="range"]:focus-visible { outline:2px solid #a4d8ff; outline-offset:4px; border-radius:8px; }
.journey-galaxy-controls-hint { margin:0 !important; color:#93a9c6 !important; font-size:.72rem !important; line-height:1.45 !important; }
.journey-galaxy-controls .cosmic-action-button { justify-self:start; min-height:32px; min-width:70px; padding:0 10px; font-size:.7rem; }
.journey-story h2 { margin: 10px 0 12px; font-size: clamp(1.8rem, 4.5vw, 3.8rem); }
.journey-story p { max-width: 750px; margin: 0; color: #b5c6df; font-size: clamp(.88rem, 1.25vw, 1.02rem); line-height: 1.65; }
.journey-fact-card {
  padding: 19px;
  border: 1px solid rgba(144, 189, 245, .17);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(11, 25, 47, .78), rgba(5, 10, 22, .8));
}
.journey-fact-label { color: #8ea8c6; font-size: .62rem; font-weight: 850; letter-spacing: .16em; }
.journey-fact { margin: 9px 0 8px; color: #eef7ff; font-size: clamp(1.1rem, 2vw, 1.6rem); font-weight: 800; letter-spacing: -.02em; }
.journey-fact-note { margin: 0; color: #91a6c0; font-size: .75rem; line-height: 1.5; }
.journey-bottom-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 20px; }
.journey-bottom-meta { color: #8398b2; font-size: .7rem; }
.journey-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.journey-controls button { min-width: 106px; }
.cosmic-time-chip { display: inline-flex; align-items: center; gap: 7px; color: #8ba6c2; font-size: .66rem; }
.cosmic-time-chip::before { width: 6px; height: 6px; border-radius: 50%; background: #65e8ae; box-shadow: 0 0 12px rgba(101,232,174,.65); content: ""; }
.cosmic-journey-start-screen { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 22px; background: rgba(1, 4, 12, .42); backdrop-filter: blur(2px); transition: opacity .6s ease, visibility .6s ease; }
.cosmic-journey-start-screen[hidden] { display: none; }
.cosmic-journey-start-card { width: min(490px, 100%); padding: clamp(22px, 4vw, 38px); border: 1px solid rgba(153, 204, 255, .25); border-radius: 24px; background: rgba(3, 9, 21, .85); box-shadow: 0 20px 80px rgba(0,0,0,.32); text-align: center; }
.cosmic-journey-start-card .cosmic-choice-icon { margin-right: auto; margin-left: auto; }
.cosmic-journey-start-card h2 { margin: 0 0 12px; color: #f5f8ff; font-size: clamp(1.8rem, 5vw, 3.2rem); line-height: 1.05; letter-spacing: -.045em; }
.cosmic-journey-start-card p { color: #b1c3dd; font-size: .91rem; line-height: 1.6; }
.cosmic-journey-start-card .cosmic-action-button { margin-top: 10px; min-width: 190px; }
.universe-now-shell {
  display: flex;
  width: min(1120px, 100%);
  max-height: 92dvh;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(155, 199, 255, .22);
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0%, rgba(77, 80, 173, .2), transparent 38%),
    linear-gradient(150deg, rgba(8, 16, 33, .99), rgba(3, 7, 16, .99));
  box-shadow: 0 28px 110px rgba(0, 0, 0, .62);
}
.universe-now-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: clamp(18px, 3vw, 30px) clamp(18px, 3vw, 32px) 15px; }
.universe-now-header h2 { margin-top: 0; }
.universe-now-header p:not(.cosmic-eyebrow) { margin: 10px 0 0; color: #a7bad3; font-size: .88rem; line-height: 1.55; }
.universe-live-badge { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; padding: 6px 9px; border: 1px solid rgba(109, 230, 178, .25); border-radius: 999px; background: rgba(34, 151, 104, .1); color: #8fe9bc; font-size: .59rem; font-weight: 900; letter-spacing: .13em; }
.universe-live-badge::before { width: 6px; height: 6px; border-radius: 50%; background: #6bf0b2; box-shadow: 0 0 12px rgba(107, 240, 178, .65); content: ""; }
.universe-now-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 0 clamp(18px, 3vw, 32px) 16px; border-bottom: 1px solid rgba(135, 175, 231, .14); }
.universe-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.universe-tabs button { min-height: 38px; padding: 0 13px; border: 1px solid rgba(155, 190, 232, .15); border-radius: 11px; background: rgba(255,255,255,.035); color: #a9bdd7; cursor: pointer; font: inherit; font-size: .75rem; font-weight: 800; }
.universe-tabs button[aria-selected="true"] { border-color: rgba(126, 205, 255, .4); background: rgba(41, 126, 205, .16); color: #ecf7ff; }
.universe-refresh { display: inline-flex; min-height: 38px; align-items: center; gap: 7px; margin-left: auto; padding: 0 12px; border: 1px solid rgba(155, 190, 232, .18); border-radius: 11px; background: rgba(255,255,255,.04); color: #e6f2ff; cursor: pointer; font: inherit; font-size: .73rem; font-weight: 800; }
.universe-now-content { min-height: 220px; overflow: auto; padding: 20px clamp(18px, 3vw, 32px) 26px; overscroll-behavior: contain; }
.universe-feed-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 15px; color: #8ea4bf; font-size: .72rem; }
.universe-event-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.universe-event-card { display: grid; grid-template-columns: 46px minmax(0,1fr); align-content: start; gap: 12px; min-width: 0; padding: 16px; border: 1px solid rgba(143, 184, 238, .16); border-radius: 16px; background: linear-gradient(140deg, rgba(15,28,51,.82), rgba(5,11,22,.88)); }
.universe-event-icon { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid rgba(143,196,255,.2); border-radius: 14px; background: rgba(64,120,193,.1); color: #cceaff; font-size: 1.25rem; }
.universe-event-copy { min-width: 0; }
.universe-event-category { margin: 1px 0 6px; color: #8fc8f7; font-size: .58rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.universe-event-title { margin: 0 0 7px; color: #f1f7ff; font-size: .97rem; line-height: 1.3; }
.universe-event-description { margin: 0; color: #a8bad2; font-size: .79rem; line-height: 1.55; }
.universe-event-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; color: #d6e6fb; font-size: .72rem; font-weight: 700; }
.universe-event-pill { display: inline-flex; align-items: center; padding: 4px 7px; border: 1px solid rgba(151,190,235,.16); border-radius: 999px; background: rgba(255,255,255,.035); color: #bad3ee; font-size: .63rem; }
.universe-event-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 11px; }
.universe-event-links a { color: #91d3ff; font-size: .75rem; text-underline-offset: 3px; }
.universe-empty { padding: 40px 20px; border: 1px dashed rgba(151,190,235,.2); border-radius: 16px; color: #9eb2cd; text-align: center; line-height: 1.6; }
.universe-now-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 13px clamp(18px, 3vw, 32px) 16px; border-top: 1px solid rgba(135,175,231,.14); color: #8297b2; font-size: .68rem; line-height: 1.5; }
.universe-now-footer a { color: #8fd0ff; text-underline-offset: 3px; }
.cosmic-accessible-focus:focus-visible,
.cosmic-experiences button:focus-visible,
.cosmic-experiences a:focus-visible { outline: 3px solid #9ddcff; outline-offset: 3px; }
.cosmic-experiences button:disabled { cursor: wait; opacity: .6; }
.cosmic-experiences [hidden] { display: none !important; }
.cosmic-experiences-body-lock { overflow: hidden !important; }
@media (max-width: 800px) {
  .cosmic-hub-button {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
    min-height: 34px;
    margin-top: 1px;
    padding: 0 10px;
  }
  .cosmic-hub-button > span:last-child { display: inline; }
  .cosmic-feature-backdrop { padding: max(10px, env(safe-area-inset-top)) 12px max(10px, env(safe-area-inset-bottom)); }
  .cosmic-hub-panel { max-height: 94dvh; padding: 18px; border-radius: 21px; }
  .cosmic-choice-grid { grid-template-columns: 1fr; }
  .cosmic-choice { min-height: 0; padding: 16px; }
  .cosmic-choice-icon { margin-bottom: 12px; }
  .cosmic-choice p { margin-bottom: 14px; }
  .cosmic-experience-overlay { padding: 0; }
  .journey-header { padding-right: 14px; padding-left: 14px; }
  .journey-main { grid-template-rows: minmax(220px, 38dvh) auto; padding-top: 22px; padding-right: 18px; padding-left: 18px; }
  .journey-celestial-art { width: min(82vw, 430px); }
  .journey-story { grid-template-columns: 1fr; gap: 13px; padding-top: 13px; }
  .journey-story h2 { margin: 6px 0 8px; font-size: clamp(1.65rem, 8vw, 2.5rem); }
  .journey-story p { font-size: .81rem; line-height: 1.5; }
  .journey-fact-card { padding: 12px 14px; }
  .journey-fact { margin: 5px 0; font-size: 1rem; }
  .journey-fact-note { font-size: .68rem; }
  .journey-bottom-bar { flex-direction: column; align-items: stretch; gap: 12px; padding-top: 13px; }
  .journey-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: stretch; }
  .journey-controls button { min-width: 0; padding: 0 8px; font-size: .75rem; }
  .journey-stage-caption { bottom: 10px; font-size: .55rem; }
  .universe-now-shell { max-height: 100dvh; border-radius: 0; }
  .universe-now-header { padding-top: max(16px, env(safe-area-inset-top)); padding-right: 15px; padding-left: 15px; }
  .universe-now-toolbar { padding-right: 15px; padding-left: 15px; }
  .universe-refresh { margin-left: 0; }
  .universe-now-content { padding-right: 15px; padding-left: 15px; }
  .universe-event-grid { grid-template-columns: 1fr; }
  .universe-now-footer { padding-right: 15px; padding-left: 15px; }
}
@media (max-width: 400px) {
  .top-actions .cosmic-hub-button { display: flex; }
}
@media (max-height: 760px) and (min-width: 801px) {
  .journey-main { grid-template-rows: minmax(210px, 1fr) auto; padding-top: 22px; }
  .journey-fact-card { padding: 13px 16px; }
  .journey-story { gap: 22px; padding-top: 14px; }
  .journey-story h2 { font-size: clamp(1.6rem, 3.5vw, 2.6rem); }
}
@media (max-width: 740px) {
  .journey-galaxy-controls { width:100%; margin-top:14px; }
}
@media (prefers-reduced-motion: reduce) {
  .journey-celestial-art, .journey-visual-glow, .journey-solar-system, .journey-galaxy, .journey-cosmic-web, .journey-moon, .journey-earth, .journey-legend-dot, .cosmic-journey-start-screen {
    transition: none !important;
  }
  .cosmic-hub-button, .cosmic-action-button { transition: none !important; }
}

/* Cosmic Origins link and four-card Discover layout. */
.cosmic-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cosmic-choice:last-child { grid-column: auto; }
.cosmic-choice-link {
  position: relative; z-index: 1; display: inline-flex; min-height: 43px; align-items: center; justify-content: center; gap: 8px;
  margin-top: auto; padding: 0 16px; border: 1px solid rgba(118, 194, 255, .35); border-radius: 12px;
  background: linear-gradient(110deg, rgba(27, 128, 206, .28), rgba(123, 84, 210, .28));
  color: #eff8ff; text-decoration: none; font-size: .82rem; font-weight: 800;
}
.cosmic-choice-link:hover { border-color: rgba(168, 223, 255, .8); }
/* Gravity Lab: accessible, responsive spacetime-curvature analogy. */
.cosmic-choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gravity-lab-shell {
  display: flex;
  width: min(1160px, 100%);
  max-height: min(900px, 94dvh);
  flex-direction: column;
  gap: 20px;
  overflow: auto;
  padding: clamp(18px, 3vw, 32px);
  border: 1px solid rgba(144, 199, 255, .24);
  border-radius: 24px;
  background:
    radial-gradient(circle at 76% 22%, rgba(51, 118, 208, .16), transparent 34%),
    linear-gradient(145deg, rgba(7, 14, 30, .98), rgba(3, 7, 17, .99));
  box-shadow: 0 32px 100px rgba(0, 0, 0, .48);
}
.gravity-lab-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.gravity-lab-header h2 {
  margin: 5px 0 9px;
  color: #f4f8ff;
  font-size: clamp(1.8rem, 4vw, 3.1rem);
  letter-spacing: -.045em;
}
.gravity-lab-header > div > p:last-child {
  max-width: 720px;
  margin: 0;
  color: #b6c9e4;
  font-size: .92rem;
  line-height: 1.55;
}
.gravity-lab-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(250px, .75fr);
  gap: 18px;
  align-items: stretch;
}
.gravity-lab-visual-shell {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(130, 186, 245, .21);
  border-radius: 18px;
  background: #030914;
}
.gravity-lab-visual-shell canvas {
  display: block;
  width: 100%;
  height: clamp(300px, 42vh, 470px);
  outline: none;
}
.gravity-lab-visual-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 14px;
  border-top: 1px solid rgba(133, 174, 229, .13);
  color: #a7c5e7;
  font-size: .6rem;
  font-weight: 850;
  letter-spacing: .12em;
}
.gravity-lab-status {
  padding: 5px 8px;
  border: 1px solid rgba(103, 220, 190, .25);
  border-radius: 999px;
  background: rgba(38, 150, 130, .1);
  color: #98f5dc;
  font-size: .55rem;
  white-space: nowrap;
}
.gravity-lab-controls {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 17px;
  padding: 18px;
  border: 1px solid rgba(132, 182, 240, .17);
  border-radius: 18px;
  background: rgba(7, 16, 34, .76);
}
.gravity-control-row { display: grid; gap: 9px; }
.gravity-control-row label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: #eef6ff;
  font-size: .78rem;
  font-weight: 800;
}
.gravity-control-row output {
  color: #a9dfff;
  font-size: .76rem;
  font-variant-numeric: tabular-nums;
}
.gravity-control-row input[type="range"] {
  width: 100%;
  min-height: 28px;
  margin: 0;
  accent-color: #8bd9ff;
  cursor: pointer;
}
.gravity-control-row input[type="range"]:focus-visible,
.gravity-lab-controls button:focus-visible {
  outline: 2px solid #a6e2ff;
  outline-offset: 4px;
  border-radius: 8px;
}
.gravity-control-hint {
  margin: 0;
  color: #91a9c7;
  font-size: .73rem;
  line-height: 1.5;
}
.gravity-lab-controls > .cosmic-action-button { align-self: flex-start; }
.gravity-lab-insight {
  padding: 14px;
  border: 1px solid rgba(120, 190, 255, .2);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(35, 91, 150, .19), rgba(89, 57, 148, .12));
}
.gravity-lab-insight p {
  margin: 8px 0 0;
  color: #d8eaff;
  font-size: .82rem;
  line-height: 1.55;
}
.gravity-lab-accuracy-note {
  margin: auto 0 0;
  color: #8199b8;
  font-size: .69rem;
  line-height: 1.55;
}
.gravity-lab-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(133, 174, 229, .13);
  color: #758dab;
  font-size: .61rem;
  letter-spacing: .08em;
}
@media (max-width: 940px) {
  .cosmic-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cosmic-choice:last-child { grid-column: 1 / -1; }
  .gravity-lab-layout { grid-template-columns: minmax(0, 1fr); }
  .gravity-lab-visual-shell canvas { height: clamp(260px, 38vh, 390px); }
  .gravity-lab-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gravity-lab-controls > .cosmic-action-button,
  .gravity-lab-insight,
  .gravity-lab-accuracy-note { grid-column: 1 / -1; }
}
@media (max-width: 580px) {
  .cosmic-choice-grid { grid-template-columns: minmax(0, 1fr); }
  .cosmic-choice:last-child { grid-column: auto; }
  .gravity-lab-overlay { padding: 10px; }
  .gravity-lab-shell { max-height: 96dvh; padding: 15px; gap: 14px; border-radius: 18px; }
  .gravity-lab-header { gap: 10px; }
  .gravity-lab-header > div > p:last-child { font-size: .81rem; }
  .gravity-lab-visual-shell canvas { height: 285px; }
  .gravity-lab-controls { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .gravity-lab-controls > .cosmic-action-button,
  .gravity-lab-insight,
  .gravity-lab-accuracy-note { grid-column: auto; }
  .gravity-lab-footer { font-size: .56rem; }
}
@media (prefers-reduced-motion: reduce) {
  .gravity-lab-shell *, .gravity-lab-shell *::before, .gravity-lab-shell *::after { animation: none !important; transition: none !important; }
}


/* Moon Mission Simulator */
.moon-mission-choice{position:relative;overflow:hidden}
.moon-mission-choice::after{content:"";position:absolute;inset:auto -30px -65px auto;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,rgba(74,154,255,.23),transparent 70%);pointer-events:none}
.moon-mission-overlay{overflow-y:auto}
.moon-mission-shell{width:min(1000px,100%);max-height:calc(100dvh - 32px);overflow:auto;border:1px solid rgba(131,185,255,.25);border-radius:24px;background:radial-gradient(ellipse at 10% 0%,rgba(36,87,153,.18),transparent 48%),linear-gradient(145deg,rgba(8,15,31,.98),rgba(3,6,15,.98));box-shadow:0 30px 100px rgba(0,0,0,.5);color:#edf4ff}
.moon-mission-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 26px 18px;border-bottom:1px solid rgba(149,187,235,.13)}
.moon-mission-brand{display:flex;align-items:center;gap:13px}.moon-mission-brand>span{display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(114,187,255,.4);border-radius:14px;background:rgba(49,132,225,.15);color:#9bd7ff;font-size:22px}.moon-mission-brand p{margin:0 0 4px;color:#83b9ee;font-size:.62rem;font-weight:850;letter-spacing:.17em}.moon-mission-brand h2{margin:0;font-size:clamp(1.25rem,3vw,1.75rem);letter-spacing:-.035em}
.moon-mission-progress{height:3px;background:rgba(255,255,255,.07)}.moon-mission-progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,#4b9fff,#86e8ff);transition:width .35s ease}
.moon-mission-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(22px,4vw,42px);padding:clamp(20px,4vw,34px)}
.moon-mission-scene{position:relative;min-height:390px;overflow:hidden;border:1px solid rgba(129,177,239,.15);border-radius:20px;background:radial-gradient(ellipse at 55% 52%,rgba(31,66,116,.36),transparent 52%),linear-gradient(155deg,#08132b,#030610 78%);isolation:isolate}
.moon-mission-stars{position:absolute;inset:0;opacity:.8;background-image:radial-gradient(1px 1px at 13% 22%,#fff 99%,transparent),radial-gradient(1.5px 1.5px at 29% 71%,#c6e3ff 99%,transparent),radial-gradient(1px 1px at 78% 18%,#fff 99%,transparent),radial-gradient(1px 1px at 86% 64%,#fff 99%,transparent),radial-gradient(1.5px 1.5px at 61% 84%,#fff 99%,transparent),radial-gradient(1px 1px at 42% 13%,#b8d9ff 99%,transparent),radial-gradient(1px 1px at 8% 89%,#fff 99%,transparent);background-size:100% 100%}
.moon-mission-earth,.moon-mission-moon{position:absolute;border-radius:50%;aspect-ratio:1;box-shadow:inset -18px -8px 24px rgba(0,0,0,.7),0 0 30px rgba(64,145,255,.17)}
.moon-mission-earth{width:clamp(112px,17vw,172px);left:8%;bottom:14%;background:radial-gradient(ellipse at 30% 27%,rgba(190,241,255,.8),transparent 8%),radial-gradient(ellipse at 60% 35%,#4da879 0 10%,transparent 11%),radial-gradient(ellipse at 35% 60%,#5bb17b 0 12%,transparent 13%),radial-gradient(circle at 35% 32%,#76d9f5,#2676c8 46%,#10305f 72%);border:1px solid rgba(166,222,255,.45)}
.moon-mission-moon{width:clamp(54px,8vw,86px);right:9%;top:15%;background:radial-gradient(circle at 33% 27%,#d8dbe2,#858d9b 55%,#3e4656 78%);border:1px solid rgba(229,237,255,.24)}
.moon-mission-orbit{position:absolute;width:78%;height:58%;left:10%;top:20%;border:1px solid rgba(111,176,255,.28);border-radius:50%;transform:rotate(-32deg);transition:transform .6s ease,opacity .4s ease}
.moon-mission-craft{position:absolute;left:25%;bottom:33%;display:grid;place-items:center;width:35px;height:35px;border:1px solid rgba(144,219,255,.48);border-radius:12px;background:rgba(50,129,221,.2);box-shadow:0 0 28px rgba(77,161,255,.4);color:#b9e9ff;font-size:19px;transition:left .8s ease,bottom .8s ease,transform .8s ease}
.moon-mission-scene[data-stage="1"] .moon-mission-craft{left:44%;bottom:48%}.moon-mission-scene[data-stage="2"] .moon-mission-craft{left:72%;bottom:63%;transform:rotate(35deg)}.moon-mission-scene[data-stage="3"] .moon-mission-craft{left:79%;bottom:36%;transform:rotate(90deg)}.moon-mission-scene[data-stage="4"] .moon-mission-craft{left:78%;bottom:24%;transform:rotate(135deg)}
.moon-mission-scene>span:last-child{position:absolute;left:16px;bottom:15px;color:#9ab9e2;font-size:.6rem;font-weight:850;letter-spacing:.13em}
.moon-mission-briefing{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:4px 0}.moon-mission-eyebrow{margin:0 0 10px;color:#8ed9ff;font-size:.65rem;font-weight:850;letter-spacing:.16em}.moon-mission-briefing h3{margin:0 0 12px;font-size:clamp(1.5rem,3.5vw,2.25rem);line-height:1.1;letter-spacing:-.045em}.moon-mission-briefing>p:not(.moon-mission-eyebrow):not(.moon-mission-disclaimer){margin:0;color:#b8c8df;font-size:.9rem;line-height:1.65}
.moon-mission-telemetry{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:8px;margin:22px 0 16px}.moon-mission-telemetry>div{min-width:0;padding:10px;border:1px solid rgba(139,178,231,.15);border-radius:12px;background:rgba(255,255,255,.025)}.moon-mission-telemetry span,.moon-mission-fact>span{display:block;margin-bottom:6px;color:#7e9bbc;font-size:.55rem;font-weight:850;letter-spacing:.1em}.moon-mission-telemetry strong{display:block;overflow:hidden;color:#dcecff;font-size:.65rem;letter-spacing:.03em;text-overflow:ellipsis;white-space:nowrap}
.moon-mission-fact{width:100%;padding:13px 14px;border:1px solid rgba(100,177,255,.17);border-radius:13px;background:rgba(47,111,186,.08)}.moon-mission-fact p{margin:0;color:#c4d7ef;font-size:.78rem;line-height:1.55}
.moon-mission-actions{display:flex;flex-wrap:wrap;gap:9px;width:100%;margin-top:20px}.moon-mission-primary,.moon-mission-secondary{min-height:43px;padding:0 16px;border-radius:12px;cursor:pointer;font:inherit;font-size:.77rem;font-weight:850}.moon-mission-primary{display:flex;align-items:center;justify-content:center;gap:12px;flex:1;border:1px solid rgba(143,212,255,.48);background:linear-gradient(115deg,#247ac8,#4b9fe5);color:#fff;box-shadow:0 8px 24px rgba(31,111,200,.18)}.moon-mission-primary:hover{filter:brightness(1.12)}.moon-mission-secondary{border:1px solid rgba(151,182,226,.2);background:rgba(255,255,255,.04);color:#c7d8ee}
.moon-mission-disclaimer{margin:14px 0 0;color:#6f85a3;font-size:.62rem;line-height:1.5}
@media(max-width:720px){.moon-mission-shell{max-height:calc(100dvh - 16px);border-radius:18px}.moon-mission-header{padding:16px}.moon-mission-layout{grid-template-columns:1fr;gap:18px;padding:16px}.moon-mission-scene{min-height:220px;max-height:250px}.moon-mission-earth{width:110px}.moon-mission-moon{width:58px}.moon-mission-telemetry{margin:15px 0 12px}.moon-mission-briefing{padding:0}.moon-mission-briefing h3{font-size:1.55rem}.moon-mission-briefing>p:not(.moon-mission-eyebrow):not(.moon-mission-disclaimer){font-size:.83rem}}
@media(prefers-reduced-motion:reduce){.moon-mission-progress span,.moon-mission-craft,.moon-mission-orbit{transition:none}}

/* Cinematic surface-level reveal for lunar touchdown. */
.moon-mission-lunar-view{position:absolute;inset:0;overflow:hidden;opacity:0;visibility:hidden;transform:scale(1.035);transition:opacity .65s ease,transform 1.1s ease;isolation:isolate;background:radial-gradient(ellipse at 72% 25%,rgba(255,221,154,.16),transparent 32%),linear-gradient(180deg,#030611 0%,#080d18 56%,#272a30 100%)}
.moon-mission-lunar-view:before{content:"";position:absolute;inset:0;z-index:-1;opacity:.55;background-image:radial-gradient(1px 1px at 13% 20%,#fff 99%,transparent),radial-gradient(1px 1px at 35% 14%,#b9d8ff 99%,transparent),radial-gradient(1px 1px at 83% 12%,#fff 99%,transparent),radial-gradient(1px 1px at 92% 36%,#fff 99%,transparent),radial-gradient(1px 1px at 54% 31%,#dce8ff 99%,transparent);background-size:100% 100%}
.moon-mission-lunar-sunlight{position:absolute;right:4%;top:8%;width:45%;height:60%;background:radial-gradient(ellipse at 65% 20%,rgba(255,224,167,.2),rgba(255,199,123,.07) 28%,transparent 68%);filter:blur(9px)}
.moon-mission-lunar-earth{position:absolute;z-index:1;top:16%;left:19%;width:clamp(26px,4vw,43px);aspect-ratio:1;border-radius:50%;background:radial-gradient(ellipse at 31% 28%,#bdeeff 0 7%,transparent 8%),radial-gradient(ellipse at 60% 62%,#69ad86 0 15%,transparent 16%),radial-gradient(circle at 34% 30%,#64bde8,#2465a6 60%,#101d3a 82%);box-shadow:inset -7px -3px 10px #02040b,0 0 18px rgba(95,162,255,.18);border:1px solid rgba(185,219,255,.42)}
.moon-mission-lunar-ridge{position:absolute;left:-8%;right:-8%;bottom:24%;height:48%;background:linear-gradient(165deg,#77756f 0%,#494a4b 28%,#272a30 72%);clip-path:polygon(0 73%,9% 53%,15% 58%,24% 31%,31% 43%,39% 22%,46% 49%,53% 37%,61% 58%,68% 27%,75% 39%,84% 18%,92% 47%,100% 35%,100% 100%,0 100%);filter:drop-shadow(0 -7px 14px rgba(0,0,0,.5))}
.moon-mission-lunar-ground{position:absolute;left:-10%;right:-10%;bottom:-18%;height:59%;background:radial-gradient(ellipse at 64% 20%,rgba(183,171,151,.45),transparent 30%),linear-gradient(174deg,#69665f 0%,#393a3c 38%,#15181e 82%);clip-path:polygon(0 22%,12% 10%,22% 18%,34% 7%,44% 17%,56% 4%,67% 18%,79% 8%,90% 17%,100% 4%,100% 100%,0 100%);box-shadow:0 -14px 35px rgba(0,0,0,.4)}
.moon-mission-lunar-craters{position:absolute;left:8%;right:4%;bottom:7%;height:23%;opacity:.72;background:radial-gradient(ellipse at 18% 60%,transparent 0 6%,rgba(11,13,16,.75) 6.5% 8%,rgba(171,163,149,.42) 8.5% 10%,transparent 10.5%),radial-gradient(ellipse at 47% 38%,transparent 0 8%,rgba(14,15,18,.72) 8.5% 10%,rgba(177,168,154,.35) 10.5% 12%,transparent 12.5%),radial-gradient(ellipse at 79% 69%,transparent 0 5%,rgba(10,12,15,.8) 5.5% 7%,rgba(179,170,156,.35) 7.5% 9%,transparent 9.5%)}
.moon-mission-lunar-rocks{position:absolute;z-index:2;left:0;right:0;bottom:0;height:29%;background:linear-gradient(145deg,transparent 0 18%,#202226 18.5% 26%,transparent 26.5%),linear-gradient(32deg,transparent 0 72%,#27292c 72.5% 80%,transparent 80.5%);clip-path:polygon(0 62%,7% 50%,12% 72%,19% 42%,24% 65%,31% 55%,39% 78%,48% 43%,54% 68%,61% 54%,70% 76%,78% 38%,86% 64%,93% 48%,100% 59%,100% 100%,0 100%);background-color:rgba(20,22,26,.7);filter:drop-shadow(0 -4px 7px rgba(0,0,0,.65))}
.moon-mission-scene[data-stage="4"]{background:#030611}
.moon-mission-scene[data-stage="4"]>.moon-mission-stars,.moon-mission-scene[data-stage="4"]>.moon-mission-earth,.moon-mission-scene[data-stage="4"]>.moon-mission-moon,.moon-mission-scene[data-stage="4"]>.moon-mission-orbit,.moon-mission-scene[data-stage="4"]>.moon-mission-craft{opacity:0;visibility:hidden}
.moon-mission-scene[data-stage="4"]>.moon-mission-lunar-view{opacity:1;visibility:visible;transform:scale(1)}
.moon-mission-scene[data-stage="4"]>span:last-child{z-index:3;color:#d7d3ca;text-shadow:0 1px 8px #000}
@media(prefers-reduced-motion:reduce){.moon-mission-lunar-view{transition:none}}


/* Lunar touchdown realism pass: layered regolith texture, crater rims and grazing light. */
.moon-mission-lunar-view{background:linear-gradient(180deg,#02050c 0%,#060b14 49%,#171a20 100%);contain:paint}
.moon-mission-lunar-view:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;background:linear-gradient(180deg,rgba(1,3,8,.05) 0%,transparent 42%,rgba(2,3,6,.18) 100%),radial-gradient(ellipse at 52% 95%,transparent 0 35%,rgba(0,0,0,.34) 100%);mix-blend-mode:multiply}
.moon-mission-lunar-sunlight{right:0;top:2%;width:56%;height:66%;background:radial-gradient(ellipse at 69% 28%,rgba(255,231,184,.22),rgba(255,213,153,.08) 26%,rgba(213,184,143,.025) 47%,transparent 69%);filter:blur(13px)}
.moon-mission-lunar-ridge{bottom:23%;height:48%;background:linear-gradient(164deg,#8a857a 0%,#68645f 10%,#48484a 35%,#292c32 78%);clip-path:polygon(0 68%,4% 61%,8% 66%,13% 48%,18% 54%,23% 30%,27% 38%,32% 19%,37% 45%,42% 38%,47% 57%,53% 34%,58% 46%,63% 21%,68% 31%,73% 51%,78% 40%,83% 16%,88% 35%,93% 48%,97% 42%,100% 50%,100% 100%,0 100%);filter:drop-shadow(0 -8px 12px rgba(0,0,0,.45))}
.moon-mission-lunar-ground{bottom:-20%;height:62%;background:radial-gradient(ellipse at 70% 18%,rgba(220,205,178,.58),transparent 27%),radial-gradient(ellipse at 20% 34%,rgba(151,145,132,.22),transparent 35%),linear-gradient(174deg,#827b6e 0%,#5b5854 24%,#38393c 58%,#17191e 92%);clip-path:polygon(0 21%,6% 14%,13% 22%,20% 12%,27% 18%,34% 10%,41% 20%,49% 7%,56% 18%,63% 12%,70% 21%,78% 9%,85% 17%,92% 11%,100% 20%,100% 100%,0 100%);box-shadow:0 -18px 38px rgba(0,0,0,.48)}
.moon-mission-lunar-texture{position:absolute;z-index:1;inset:38% 0 0;opacity:.2;mix-blend-mode:soft-light;background-image:url("./assets/moon-displacement-1k.jpg");background-size:cover;background-position:center 48%;filter:contrast(1.2) brightness(.9);mask-image:linear-gradient(180deg,transparent 0%,#000 24%,#000 100%)}
.moon-mission-lunar-craters{position:absolute;z-index:2;inset:0;opacity:1;background:none}
.lunar-crater{position:absolute;display:block;border-radius:50%;transform:rotate(-8deg);background:radial-gradient(ellipse at 50% 46%,rgba(14,15,17,.92) 0 31%,rgba(31,31,31,.82) 42%,rgba(177,166,146,.76) 48%,rgba(211,199,175,.38) 53%,rgba(43,43,43,.1) 62%,transparent 70%);filter:drop-shadow(0 4px 3px rgba(0,0,0,.38))}
.lunar-crater:before{content:"";position:absolute;inset:13% 16% 24% 12%;border-radius:50%;background:radial-gradient(ellipse at 44% 28%,rgba(4,5,7,.1),rgba(5,6,8,.84) 66%,rgba(0,0,0,.93));box-shadow:inset 0 3px 5px rgba(0,0,0,.6)}
.lunar-crater--far{width:10%;height:4%;left:47%;bottom:25%;opacity:.52;transform:rotate(3deg)}
.lunar-crater--mid{width:14%;height:6%;right:18%;bottom:17%;opacity:.7;transform:rotate(-4deg)}
.lunar-crater--near{width:23%;height:9%;left:9%;bottom:7%;opacity:.85;transform:rotate(5deg)}
.moon-mission-lunar-rocks{z-index:3;height:25%;background:radial-gradient(ellipse at 14% 100%,#101216 0 8%,transparent 8.5%),radial-gradient(ellipse at 82% 100%,#111318 0 11%,transparent 11.5%),linear-gradient(153deg,transparent 0 20%,#343438 20.5% 27%,transparent 27.5%),linear-gradient(27deg,transparent 0 70%,#25272b 70.5% 78%,transparent 78.5%);clip-path:polygon(0 61%,5% 53%,10% 66%,16% 42%,22% 61%,28% 53%,35% 73%,42% 46%,49% 69%,56% 57%,63% 75%,71% 43%,78% 61%,85% 47%,92% 66%,100% 55%,100% 100%,0 100%);filter:drop-shadow(0 -6px 9px rgba(0,0,0,.72))}
.moon-mission-lunar-earth{top:15%;left:19%;width:clamp(27px,4.2vw,45px);background:radial-gradient(ellipse at 29% 24%,rgba(225,249,255,.95) 0 5%,transparent 6%),radial-gradient(ellipse at 61% 55%,#78b58a 0 12%,transparent 13%),radial-gradient(ellipse at 35% 69%,#62a77b 0 9%,transparent 10%),radial-gradient(circle at 32% 28%,#9fe0f8 0%,#347bb5 39%,#15335f 72%,#030913 100%);box-shadow:inset -8px -4px 10px rgba(0,0,0,.82),0 0 15px rgba(95,162,255,.12)}
@media(max-width:520px){.moon-mission-lunar-texture{opacity:.16}.lunar-crater--near{width:26%;height:10%}.moon-mission-lunar-ridge{bottom:23%;height:45%}}
@media(prefers-reduced-motion:reduce){.moon-mission-lunar-view{transform:none}}