/* Mercury is independent: none of these rules change the existing Earth or Mars composition. */
.mercury-scene { position: absolute; inset: 0; overflow: hidden; z-index: 4; background: #030812; opacity: 0; }
.mercury-scene[hidden] { display: none; }
.mercury-space-haze { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 65% 40%, #15213255, transparent 58%), radial-gradient(ellipse at 55% 55%, #6f4b2015, transparent 45%); }
.mercury-viewport { position: absolute; inset: 0; }
.mercury-viewport canvas { display: block; width: 100%; height: 100%; }
.mercury-edge-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, #03081299, transparent 20%, transparent 82%, #03081233); }
.mercury-caption { position: absolute; left: 10%; bottom: 17%; opacity: 0; transform: translateY(12px); pointer-events: none; }
.mercury-caption.is-visible { pointer-events: auto; }
.mercury-caption .eyebrow { justify-content: flex-start; font-size: 8px; letter-spacing: 3.5px; gap: 12px; }
.mercury-caption .eyebrow span { width: 30px; height: 1px; background: #edc57e88; }
.mercury-caption h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: clamp(68px, 8vw, 120px); line-height: 1; letter-spacing: -3px; margin: 19px 0 15px; outline: none; color: #f9f4e8; }
.mercury-caption h2 span { color: #edc57e; }
.mercury-whisper { color: #a1acba; font-size: 12px; letter-spacing: .6px; }
.mercury-caption .replay-button { margin-top: 20px; padding-left: 0; border: 0; color: #b7bfcc; font-size: 10px; letter-spacing: .4px; }
.mercury-caption .replay-button:hover { color: #edc57e; }
.mercury-credit { position: absolute; right: 3.5%; bottom: 83px; font-size: 7px; letter-spacing: .5px; color: #78828e; text-decoration: none; opacity: 0; }
.mercury-credit:hover { color: #d6c3a5; }
.is-mercury .masthead { opacity: 1; transition: opacity 2s; }
.is-mercury .preparation { opacity: 0; }
.mercury-emergency-sphere { position: absolute; width: 200px; height: 200px; transform: translate(-50%, -50%); border-radius: 50%; background: #a26f3b; box-shadow: inset -45px -15px 65px #000e, inset 8px 4px 12px #efb18244; }
@media (max-width: 700px) {
  .mercury-caption { left: 8%; right: 8%; bottom: 17%; text-align: center; }
  .mercury-caption .eyebrow { justify-content: center; font-size: 7px; letter-spacing: 3px; }
  .mercury-caption .eyebrow span { display: none; }
  .mercury-caption h2 { font-size: 66px; margin: 14px 0 10px; }
  .mercury-whisper { font-size: 10px; }
  .mercury-caption .replay-button { margin-top: 9px; }
  .mercury-credit { right: 0; left: 0; bottom: 76px; text-align: center; font-size: 6px; }
}
@media (max-height: 700px) and (min-width: 701px) { .mercury-caption { bottom: 18%; } .mercury-caption h2 { font-size: 76px; } }

/* Mercury exploration extends the arrival scene without changing the launch or landing composition. */
.mercury-arrival-actions {
  display: grid; grid-template-columns: minmax(130px, 1fr) auto minmax(130px, 1fr); align-items: center; gap: 14px;
  width: min(680px, 73vw); margin-top: 22px;
}
.mercury-caption .mercury-explore-button {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 28px;
  min-height: 48px; padding: 0 18px 0 21px; border-radius: 2px; border: 1px solid #f0cf92;
  background: linear-gradient(120deg, #ecc987, #dcae61); color: #171b24; font-size: 10px;
  font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 7px 28px #b9792e1f, inset 0 1px #fff4cf;
  transition: transform .28s ease, background .28s ease, box-shadow .28s ease;
}
.mercury-caption .mercury-explore-button svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.5; transition: transform .3s ease; }
.mercury-caption .mercury-explore-button:hover { transform: translateY(-2px); background: #f2d49a; box-shadow: 0 9px 34px #b9792e33, inset 0 1px #fff4cf; }
.mercury-caption .mercury-explore-button:hover svg { transform: translateX(3px); }
.mercury-caption .mercury-explore-button:active { transform: translateY(0) scale(.985); }
.mercury-planet-nav {
  min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 4px; border: 0; border-top: 1px solid #d5dce821; border-bottom: 1px solid #d5dce821;
  background: transparent; color: #929daa; text-align: left; transition: color .25s ease, border-color .25s ease, opacity .25s ease;
}
.mercury-planet-nav svg { flex: 0 0 auto; width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.25; }
.mercury-planet-nav span { display: grid; gap: 3px; min-width: 0; }
.mercury-planet-nav small, .mercury-planet-nav strong { display: block; font-weight: 500; text-transform: uppercase; white-space: nowrap; }
.mercury-planet-nav small { color: #6f7c8b; font-size: 6px; letter-spacing: 1.45px; }
.mercury-planet-nav strong { color: inherit; font-size: 8px; letter-spacing: 1.15px; }
.mercury-planet-prev { justify-content: flex-start; }
.mercury-planet-next { justify-content: flex-end; text-align: right; }
.mercury-planet-nav:hover:not(:disabled) { color: #dfc38f; border-color: #edc57e62; }
.mercury-planet-nav:disabled { opacity: .38; cursor: default; }

.mercury-exploration {
  position: absolute; z-index: 6; top: 20%; left: 6.5%; width: min(390px, 34vw); height: clamp(430px, 58vh, 560px); max-height: calc(100vh - 180px); max-height: calc(100dvh - 180px); padding: 24px 25px 22px;
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid #d8c29625; border-left-color: #edc57e77; border-radius: 2px;
  background: linear-gradient(145deg, #07101ad9, #050b14b8); box-shadow: 0 25px 90px #00000038;
  backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
  opacity: 0; transform: translate3d(-14px, 8px, 0); pointer-events: none; visibility: hidden;
  transition: opacity .65s ease, transform .8s cubic-bezier(.2,.75,.2,1), visibility 0s linear .8s;
}
.mercury-scene.is-exploring .mercury-exploration { opacity: 1; transform: translate3d(0,0,0); pointer-events: auto; visibility: visible; transition-delay: .18s, .18s, 0s; }
.mercury-scene.is-exploring .mercury-caption { opacity: 0 !important; transform: translateY(14px) !important; pointer-events: none; transition: opacity .42s ease, transform .55s ease; }
.mercury-scene.is-exploring .mercury-credit { opacity: 0 !important; pointer-events: none; }
.mercury-exploration-topline { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-bottom: 15px; border-bottom: 1px solid #d8e0ea14; }
.mercury-topic-kicker, .mercury-topic-count { font-size: 7px; letter-spacing: 2.4px; color: #d5be91; }
.mercury-topic-count { color: #8f9aaa; letter-spacing: 1.7px; font-variant-numeric: tabular-nums; }
.mercury-topic-count #mercury-topic-current { color: #edc57e; }
.mercury-exploration h3 { margin: 20px 0 5px; color: #f9f4e8; font-family: Georgia, "Times New Roman", serif; font-size: clamp(31px, 3vw, 43px); line-height: 1.03; font-weight: 400; letter-spacing: -1px; outline: none; }
.mercury-topic-subtitle { margin: 0 0 17px; color: #d8bf91; font-size: 8px; line-height: 1.5; letter-spacing: 2.1px; text-transform: uppercase; }
.mercury-exploration-topline, .mercury-exploration h3, .mercury-topic-subtitle, .mercury-topic-source, .mercury-exploration-controls, .mercury-exploration-close { flex: 0 0 auto; }
.mercury-topic-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-gutter: stable; padding-right: 14px; scrollbar-width: thin; scrollbar-color: #aa90696e transparent; }
.mercury-topic-scroll::-webkit-scrollbar { width: 5px; }
.mercury-topic-scroll::-webkit-scrollbar-track { background: transparent; }
.mercury-topic-scroll::-webkit-scrollbar-thumb { background: #aa90696e; border-radius: 999px; }
.mercury-topic-scroll::-webkit-scrollbar-thumb:hover { background: #c7aa768f; }
.mercury-topic-summary { margin: 0; color: #c0c9d4; font-size: 12px; line-height: 1.65; letter-spacing: .12px; }
.mercury-topic-facts { display: grid; gap: 9px; margin: 18px 0 17px; padding: 0; list-style: none; }
.mercury-topic-facts li { position: relative; padding-left: 15px; color: #9eabb9; font-size: 10px; line-height: 1.55; }
.mercury-topic-facts li::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 1px; background: #edc57eaa; }
.mercury-topic-source { display: inline-flex; align-self: flex-start; align-items: center; gap: 7px; margin-top: 12px; color: #768595; font-size: 7px; letter-spacing: 1.25px; text-decoration: none; text-transform: uppercase; transition: color .22s ease; }
.mercury-topic-source:hover { color: #d8c293; }
.mercury-exploration-controls { display: grid; grid-template-columns: 38px 1fr 38px; align-items: center; gap: 13px; margin-top: 22px; }
.mercury-topic-nav { width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 1px solid #d5dce82a; border-radius: 50%; background: #07101a99; color: #d6dde7; transition: border-color .25s ease, color .25s ease, transform .25s ease, opacity .25s ease; }
.mercury-topic-nav svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.35; }
.mercury-topic-nav:hover:not(:disabled) { border-color: #edc57e88; color: #edc57e; transform: scale(1.055); }
.mercury-topic-nav:disabled { opacity: .24; cursor: default; }
.mercury-topic-progress { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 5px; }
.mercury-topic-progress span { height: 1px; background: #8793a129; transition: background .35s ease, transform .35s ease; transform-origin: left; }
.mercury-topic-progress span.is-active { background: #edc57e; transform: scaleY(2); }
.mercury-exploration-close { display: block; margin: 17px auto 0; padding: 7px 0 0; border: 0; background: transparent; color: #758291; font-size: 7px; letter-spacing: 1.2px; text-transform: uppercase; transition: color .2s ease; }
.mercury-exploration-close:hover { color: #c9d0d8; }
.mercury-exploration.is-switching h3, .mercury-exploration.is-switching .mercury-topic-subtitle, .mercury-exploration.is-switching .mercury-topic-summary, .mercury-exploration.is-switching .mercury-topic-facts, .mercury-exploration.is-switching .mercury-topic-source { animation: mercury-topic-in .48s ease both; }

.mercury-focus-reticle {
  position: absolute; z-index: 5; left: 0; top: 0;
  width: 24px; height: 24px; transform: translate(-50%, -50%) scale(.72); opacity: 0; pointer-events: none;
  transition: opacity .45s ease, transform .6s ease;
}
.mercury-scene.is-exploring .mercury-focus-reticle { opacity: var(--marker-opacity, .92); transform: translate(-50%, -50%) scale(1); transition-delay: .45s, .45s; }
.mercury-focus-ring { position: absolute; inset: 0; border: 1px solid #f1cf8cb8; border-radius: 50%; box-shadow: 0 0 16px #e6aa5252, inset 0 0 10px #e6aa5224; animation: mercury-focus-pulse 2.8s ease-in-out infinite; }
.mercury-focus-dot { position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: #f4d494; transform: translate(-50%, -50%); box-shadow: 0 0 8px #f3c56f; }
.mercury-focus-line { position: absolute; left: 26px; top: 12px; width: 42px; height: 1px; background: linear-gradient(90deg, #edc57e8f, #edc57e12); }
.mercury-focus-label { position: absolute; left: 73px; top: 8px; width: 130px; color: #d4c09a; font-size: 6px; line-height: 1.3; letter-spacing: 1.7px; text-transform: uppercase; white-space: nowrap; }

@keyframes mercury-focus-pulse { 0%,100% { transform: scale(.9); opacity: .55; } 50% { transform: scale(1.18); opacity: 1; } }
@keyframes mercury-topic-in { from { opacity: .25; transform: translateY(5px); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) and (min-width: 701px) {
  .mercury-exploration { left: 4.5%; width: min(350px, 43vw); padding: 20px; }
  .mercury-exploration h3 { font-size: 34px; }
  .mercury-topic-summary { font-size: 11px; }
}

@media (max-width: 700px) {
  .mercury-arrival-actions { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; width: 100%; margin-top: 17px; }
  .mercury-caption .mercury-explore-button { min-height: 45px; padding: 0 13px 0 15px; gap: 13px; font-size: 8px; }
  .mercury-caption .mercury-explore-button svg { width: 15px; height: 15px; }
  .mercury-planet-nav { min-height: 45px; gap: 5px; padding: 0 2px; }
  .mercury-planet-nav svg { width: 14px; height: 14px; }
  .mercury-planet-nav small { font-size: 5px; letter-spacing: .9px; }
  .mercury-planet-nav strong { font-size: 6.5px; letter-spacing: .75px; }
  .mercury-exploration { top: auto; left: 5%; right: 5%; bottom: 5.5%; width: auto; height: min(46vh, 330px); height: min(46dvh, 330px); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow: hidden; padding: 16px 17px 14px; background: linear-gradient(145deg, #06101bed, #040b14dc); }
  .mercury-exploration h3 { margin-top: 15px; font-size: 29px; }
  .mercury-topic-subtitle { margin-bottom: 10px; font-size: 7px; }
  .mercury-topic-summary { font-size: 10px; line-height: 1.55; }
  .mercury-topic-facts { gap: 6px; margin: 12px 0 11px; }
  .mercury-topic-facts li { font-size: 8.5px; line-height: 1.45; }
  .mercury-topic-source { margin-top: 8px; }
  .mercury-exploration-controls { margin-top: 14px; }
  .mercury-exploration-close { margin-top: 10px; }
  .mercury-topic-scroll { padding-right: 12px; }
  .mercury-focus-line { width: 26px; }
  .mercury-focus-label { left: 57px; width: 100px; font-size: 5.5px; }
}

@media (max-height: 650px) and (max-width: 700px) {
  .mercury-exploration { height: min(48vh, 300px); height: min(48dvh, 300px); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); bottom: 4%; }
}

@media (prefers-reduced-motion: reduce) {
  .mercury-exploration, .mercury-focus-reticle, .mercury-topic-progress span, .mercury-caption .mercury-explore-button, .mercury-topic-nav { transition-duration: .01ms !important; }
  .mercury-focus-ring { animation: none; }
  .mercury-exploration.is-switching h3, .mercury-exploration.is-switching .mercury-topic-subtitle, .mercury-exploration.is-switching .mercury-topic-summary, .mercury-exploration.is-switching .mercury-topic-facts, .mercury-exploration.is-switching .mercury-topic-source { animation: none; }
}

/* Mercury marker now mirrors the Earth annotation system: label + contextual visual preview. */
.mercury-focus-label {
  display: grid;
  gap: 4px;
  width: 190px;
  white-space: normal;
}
.mercury-focus-title { color: #dcc79f; font-size: 7px; letter-spacing: 1.4px; }
.mercury-focus-context { color: #8995a4; font-size: 5.5px; letter-spacing: 1.25px; }
.mercury-focus-reticle .exploration-marker-media {
  left: 73px;
  bottom: 30px;
}
.mercury-focus-reticle.is-left .mercury-focus-line { left: auto; right: 26px; background: linear-gradient(270deg, #edc57e8f, #edc57e12); }
.mercury-focus-reticle.is-left .mercury-focus-label { left: auto; right: 73px; text-align: right; }
.mercury-focus-reticle.is-left .exploration-marker-media { left: auto; right: 73px; }
.mercury-focus-reticle.is-below .exploration-marker-media { top: 48px; bottom: auto; }
.mercury-focus-reticle.is-relocating .exploration-marker-media { opacity: 0; transition-delay: 0s; }
@media (max-width: 700px) {
  .mercury-focus-line { left: 12px; top: auto; bottom: 29px; width: 1px; height: 24px; background: linear-gradient(0deg, #edc57e8f, #edc57e12); }
  .mercury-focus-label,
  .mercury-focus-reticle.is-left .mercury-focus-label {
    left: calc(12px + var(--marker-shift, 0px));
    right: auto;
    top: auto;
    bottom: 60px;
    width: min(200px, calc(100vw - 32px));
    transform: translateX(-50%);
    text-align: center;
  }
  .mercury-focus-reticle .exploration-marker-media,
  .mercury-focus-reticle.is-left .exploration-marker-media {
    left: calc(12px + var(--marker-shift, 0px));
    right: auto;
    bottom: 96px;
    transform: translateX(-50%) translateY(7px) scale(.985);
  }
  .mercury-focus-reticle.is-marker-visible .exploration-marker-media { transform: translateX(-50%); }
  .mercury-focus-reticle.is-below .exploration-marker-media { top: 42px; bottom: auto; }
  .mercury-focus-reticle.is-below .mercury-focus-label { top: 74px; bottom: auto; }
  .mercury-focus-title { font-size: 6.5px; }
  .mercury-focus-context { font-size: 5px; }
}


/* Shared secondary action for returning from Earth/Mercury exploration. */
.mercury-exploration-close.return-panorama-button {
  width: fit-content;
  min-width: 188px;
  padding: 8px 14px;
  border: 1px solid #b9a57a4a;
  border-radius: 2px;
  background: #07101a66;
  color: #7f8b98;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease, transform .16s ease;
}
.mercury-exploration-close.return-panorama-button:hover {
  border-color: #ccb8897a;
  background: #0a142080;
  color: #cbd2d9;
}
.mercury-exploration-close.return-panorama-button:active {
  transform: translateY(1px);
}
.mercury-exploration-close.return-panorama-button:focus-visible {
  outline: 1px solid #d5c292;
  outline-offset: 3px;
}

/* Non-geographic Mercury topics keep the shared preview system without inventing a marker. */
.mercury-context-media {
  position: absolute;
  z-index: 7;
  top: clamp(100px, 15vh, 165px);
  right: clamp(32px, 5vw, 88px);
  left: auto;
  bottom: auto;
  pointer-events: auto;
}
.mercury-scene.is-exploring .mercury-context-media:not([hidden]) {
  opacity: 1;
  transform: none;
}
.mercury-scene:not(.is-exploring) .mercury-context-media { opacity: 0; pointer-events: none; }
.mercury-emergency-sphere {
  position: absolute;
  left: 64%;
  top: 45%;
  width: min(58vh, 48vw);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 34% 30%, #e9c889 0 5%, #b8864c 24%, #775031 58%, #271a13 83%, #08080a 100%);
  box-shadow: inset -50px -28px 90px #000b, 0 0 42px #b7782b24;
}
@media (max-width: 700px) {
  .mercury-context-media {
    top: 76px;
    right: 16px;
    width: 194px;
  }
  .mercury-emergency-sphere { left: 50%; top: 35%; width: min(70vw, 44vh); }
}


/* Mercury-specific solar character. There is no dense atmospheric shell. */
.mercury-scene::before {
  background:
    radial-gradient(circle at 18% 28%, rgba(255, 218, 163, .075), transparent 29%),
    radial-gradient(circle at 70% 62%, rgba(126, 141, 160, .045), transparent 34%);
}
.mercury-space-haze {
  background:
    radial-gradient(circle at 16% 42%, rgba(229, 188, 126, .075), transparent 26%),
    radial-gradient(circle at 62% 52%, rgba(122, 134, 151, .035), transparent 35%);
}
.mercury-emergency-sphere {
  background:
    radial-gradient(circle at 31% 28%, rgba(238, 226, 207, .78), rgba(149, 139, 126, .72) 22%, rgba(88, 82, 75, .92) 57%, rgba(21, 23, 27, 1) 83%),
    repeating-radial-gradient(circle at 68% 54%, rgba(22,22,22,.20) 0 2px, rgba(174,164,151,.08) 3px 7px);
  box-shadow: inset -38px -20px 80px rgba(0,0,0,.72), 0 0 22px rgba(219,201,174,.05);
}
.mercury-scene.is-leaving .mercury-caption,
.mercury-scene.is-leaving .mercury-credit { pointer-events: none; }


/* Only appears when every scientific Mercury texture source fails. */
.mercury-texture-warning {
  position: absolute;
  right: clamp(18px, 3vw, 46px);
  bottom: clamp(18px, 3vw, 38px);
  z-index: 12;
  max-width: min(360px, calc(100% - 36px));
  padding: 10px 13px;
  border: 1px solid rgba(199, 174, 109, .42);
  border-radius: 10px;
  background: rgba(6, 10, 17, .88);
  color: rgba(235, 230, 216, .88);
  font: 600 11px/1.45 system-ui, sans-serif;
  letter-spacing: .04em;
  backdrop-filter: blur(12px);
}
.mercury-texture-warning[hidden] { display: none; }


/* 2026-10-03 CHILD EDUCATION MOBILE READABILITY
   Keep the longer child-friendly lessons readable without turning the mobile
   exploration sheet into tiny textbook text. */
@media(max-width:700px){
  .mercury-exploration{height:min(56dvh,420px)!important;max-height:calc(100dvh - 48px)!important}
  .mercury-exploration h3{font-size:clamp(25px,7.4vw,29px)!important;line-height:1.05!important}
  .mercury-topic-summary{font-size:12px!important;line-height:1.62!important}
  .mercury-topic-facts li{font-size:10px!important;line-height:1.5!important}
  .mercury-topic-facts{gap:8px!important;margin:15px 0 14px!important}
}
@media(max-width:340px){
  .mercury-exploration{height:min(58dvh,420px)!important;left:4%!important;right:4%!important;padding:15px 15px 13px!important}
  .mercury-exploration h3{font-size:24px!important}
  .mercury-exploration-controls{margin-top:11px!important}
  .mercury-exploration-close{margin-top:8px!important}
}