.canonical-preview-stage[data-canonical-slot="home.hero"][data-home-earth-mounted],
[data-canonical-slot="home.hero"][data-home-earth-mounted],
[data-canonical-slot="home.hero"][data-home-earth-prepaint="true"] {
  min-height: max(760px, 100dvh);
  display: block;
  padding: 0;
  overflow: hidden;
  background: #02060b;
}

[data-canonical-slot="home.hero"][data-home-earth-mounted]::after { display: none; }
[data-canonical-slot="home.hero"][data-home-earth-prepaint="true"]::after { display: none; }
[data-canonical-slot="home.hero"][data-home-earth-mounted] > .home-earth-root { width: 100%; }
[data-canonical-slot="home.hero"][data-home-earth-prepaint="true"] > .home-earth-root { width: 100%; }

.home-earth-root {
  --earth-x: 78%;
  --earth-y: 47%;
  --earth-r: 220px;
  --earth-left: calc(78% - 220px);
  --earth-top: calc(47% - 220px);
  --earth-diameter: 440px;
  --earth-readout-left: 82%;
  --earth-readout-top: 53%;
  --earth-readout-mobile-top: 20%;
  position: relative;
  isolation: isolate;
  min-height: max(760px, 100svh);
  overflow: hidden;
  border: 1px solid rgba(194, 204, 201, 0.14);
  background: #010203;
  color: #edf2ef;
  font-family: var(--sans, Inter, ui-sans-serif, system-ui, sans-serif);
}

.home-earth-root::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.22;
  background-image:
    linear-gradient(rgba(178, 191, 188, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(178, 191, 188, 0.045) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(90deg, #000, transparent 62%);
  pointer-events: none;
}

.home-earth-canvas,
.home-earth-surface-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.home-earth-canvas { z-index: 0; }

.home-earth-surface-canvas {
  z-index: 1;
  pointer-events: none;
}

.home-earth-frame {
  position: relative;
  z-index: 2;
  width: min(calc(100% - 48px), 1240px);
  min-height: calc(max(760px, 100svh) - 92px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.46fr) minmax(0, 0.54fr);
  grid-template-areas: "copy visual";
}

.home-earth-copy {
  grid-area: copy;
  align-self: center;
  min-width: 0;
  padding: clamp(48px, 6vw, 92px) 0;
  text-wrap: balance;
}

.home-earth-copy,
.home-earth-readout,
.home-earth-routes {
  transition: opacity 280ms ease;
}

.home-earth-root[data-earth-intro-phase="STAR_DUST_LOCATE"] .home-earth-readout,
.home-earth-root[data-earth-intro-phase="CONTINENTS_RESOLVE"] .home-earth-readout {
  opacity: 0;
  pointer-events: none;
}

.home-earth-root[data-earth-intro-phase="STAR_DUST_LOCATE"] .home-earth-copy,
.home-earth-root[data-earth-intro-phase="CONTINENTS_RESOLVE"] .home-earth-copy {
  opacity: 1;
}

.home-earth-root[data-earth-intro-phase="STAR_DUST_LOCATE"] .home-earth-routes,
.home-earth-root[data-earth-intro-phase="CONTINENTS_RESOLVE"] .home-earth-routes {
  opacity: 0.7;
}

.home-earth-root[data-earth-intro-phase="BEIJING_BEACON"] .home-earth-readout {
  opacity: 0.82;
}

.home-earth-root[data-earth-intro-phase="BEIJING_BEACON"] .home-earth-copy {
  opacity: 1;
}

.home-earth-kicker,
.home-earth-readout,
.home-earth-routes,
.home-earth-hint,
.home-earth-live {
  font-family: var(--mono, "SFMono-Regular", Menlo, Consolas, monospace);
  letter-spacing: 0.08em;
}

.home-earth-kicker {
  margin: 0 0 24px;
  color: rgba(191, 205, 207, 0.68);
  font-size: 10px;
  font-weight: 750;
}

.home-earth-copy h1 {
  max-width: 590px;
  margin: 0;
  font-size: clamp(52px, 5.8vw, 88px);
  font-weight: 570;
  line-height: 0.91;
  letter-spacing: -0.065em;
}

.home-earth-copy h1 span { display: block; }

.home-earth-copy h1 > span:last-child {
  max-width: 9em;
  margin-top: 8px;
  font-size: 0.64em;
  line-height: 1.04;
  letter-spacing: -0.035em;
  white-space: pre-line;
}

.home-earth-copy .home-earth-present {
  max-width: 520px;
  margin-bottom: 18px;
  color: #aeb8b8;
  font: 500 clamp(20px, 2.2vw, 32px)/1.05 var(--serif, Georgia, serif);
  letter-spacing: -0.035em;
}

.home-earth-thesis {
  max-width: 520px;
  margin: 30px 0 0;
  color: #e4e9e5;
  font-size: clamp(18px, 1.65vw, 24px);
  font-weight: 620;
  line-height: 1.28;
}

.home-earth-lede {
  max-width: 520px;
  margin: 18px 0 0;
  color: #a6b1b4;
  font-size: 14px;
  line-height: 1.8;
  white-space: pre-line;
  text-wrap: auto;
}

.home-earth-visual { grid-area: visual; min-width: 0; }

.home-earth-orthographic-surface {
  position: absolute;
  z-index: 3;
  left: var(--earth-left);
  top: var(--earth-top);
  width: var(--earth-diameter);
  height: var(--earth-diameter);
  display: none;
  overflow: hidden;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 34%, rgba(88, 120, 124, 0.16), rgba(4, 11, 18, 0.92) 66%, #02060a 100%);
  filter: drop-shadow(0 0 26px rgba(105, 153, 164, 0.15));
  pointer-events: none;
  transition: opacity 320ms ease, filter 320ms ease;
}

.home-earth-root[data-earth-surface-mode="canvas2d-natural-atlas"] .home-earth-orthographic-surface {
  display: block;
}

.home-earth-root.home-earth-root--prepaint[data-earth-surface-mode="prepaint-poster"] .home-earth-orthographic-surface {
  display: block;
  opacity: 0.92;
  background:
    radial-gradient(circle at 37% 32%, rgba(46, 112, 126, 0.88), rgba(5, 29, 42, 0.96) 63%, #02060a 100%);
  filter: drop-shadow(0 0 28px rgba(105, 153, 164, 0.12));
}

.home-earth-root--prepaint .home-earth-orthographic-image {
  opacity: 0.22;
  filter: grayscale(0.42) saturate(0.68) brightness(0.76) contrast(1.08);
}

.home-earth-root--prepaint .home-earth-control {
  cursor: default;
  pointer-events: none;
}

.home-earth-orthographic-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 31% 28%, rgba(222, 230, 220, 0.07), transparent 42%),
    linear-gradient(112deg, transparent 48%, rgba(0, 0, 0, 0.34) 76%, rgba(0, 0, 0, 0.58));
  mix-blend-mode: screen;
  pointer-events: none;
}

.home-earth-orthographic-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.home-earth-root[data-earth-intro-phase="STAR_DUST_LOCATE"] .home-earth-orthographic-surface {
  opacity: 0.12;
  filter: blur(1px) drop-shadow(0 0 18px rgba(105, 153, 164, 0.08));
}

.home-earth-root[data-earth-intro-phase="CONTINENTS_RESOLVE"] .home-earth-orthographic-surface {
  opacity: 0.76;
}

.home-earth-root[data-earth-intro-phase="BEIJING_BEACON"] .home-earth-orthographic-surface,
.home-earth-root[data-earth-intro-phase="EARTH_READY"] .home-earth-orthographic-surface {
  opacity: 1;
}

.home-earth-control {
  position: absolute;
  z-index: 4;
  left: var(--earth-left);
  top: var(--earth-top);
  width: var(--earth-diameter);
  height: var(--earth-diameter);
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  outline: 0;
  background: transparent;
  color: inherit;
  cursor: grab;
  touch-action: none;
}

.home-earth-control:active,
.home-earth-control[data-earth-dragging="true"] { cursor: grabbing; }
.home-earth-control:focus-visible {
  outline: 1px solid rgba(196, 139, 102, 0.78);
  outline-offset: 4px;
  box-shadow: 0 0 0 3px rgba(196, 139, 102, 0.10);
}

.home-earth-beacon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  opacity: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #ef6a50;
  box-shadow: 0 0 8px rgba(239, 106, 80, 0.82), 0 0 18px rgba(239, 106, 80, 0.34);
  pointer-events: none;
  transition: opacity 140ms ease;
}

.home-earth-beacon::before {
  content: "";
  position: absolute;
  inset: -8px;
  border: 1px solid rgba(239, 106, 80, 0.58);
  border-radius: 50%;
  animation: home-earth-beacon-pulse 2.6s ease-out infinite;
}

@keyframes home-earth-beacon-pulse {
  0%, 22% { opacity: 0.86; transform: scale(0.48); }
  72%, 100% { opacity: 0; transform: scale(1.24); }
}

.home-earth-readout {
  position: absolute;
  z-index: 5;
  left: var(--earth-readout-left);
  top: var(--earth-readout-top);
  width: min(230px, 18vw);
  padding: 13px 14px;
  border-left: 1px solid rgba(196, 139, 102, 0.62);
  background: linear-gradient(90deg, rgba(3, 8, 13, 0.88), rgba(3, 8, 13, 0.14));
  pointer-events: none;
}

.home-earth-readout > * { display: block; }
.home-earth-status { margin-bottom: 8px; color: rgba(211, 160, 126, 0.86); font-size: 8px; font-weight: 750; }
.home-earth-readout strong { color: #eff5f2; font-size: 12px; }
.home-earth-coordinates { margin-top: 6px; color: #a9bcc1; font-size: 9px; }
.home-earth-readout small { margin-top: 6px; color: #70858d; font-size: 8px; }

.home-earth-routes {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 34px;
  width: min(calc(100% - 48px), 820px);
  min-height: 58px;
  display: grid;
  grid-template-columns: auto repeat(4, minmax(0, 1fr)) auto;
  align-items: stretch;
  transform: translateX(-50%);
  border-top: 1px solid rgba(200, 225, 232, 0.18);
  border-bottom: 1px solid rgba(200, 225, 232, 0.12);
  background: rgba(2, 7, 12, 0.46);
  backdrop-filter: blur(10px);
}

.home-earth-route-label,
.home-earth-route-status,
.home-earth-routes a {
  min-height: 56px;
  display: flex;
  align-items: center;
  padding: 8px 14px;
  font-size: 9px;
  font-weight: 700;
}

.home-earth-route-label { color: rgba(211, 160, 126, 0.78); }
.home-earth-route-status { color: #6f848c; }
.home-earth-routes a {
  justify-content: center;
  border-left: 1px solid rgba(200, 225, 232, 0.12);
  color: #b9c7c8;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-decoration: none;
}

.home-earth-routes a:hover,
.home-earth-routes a:focus-visible { background: rgba(196, 139, 102, 0.10); color: #efd8c9; }

@media (min-width: 1200px) {
  .home-earth-frame,
  .home-earth-routes {
    width: min(calc(100% - 96px), 1240px);
  }

  .home-earth-frame {
    grid-template-columns: minmax(0, 0.46fr) minmax(0, 0.54fr);
  }

  .home-earth-routes { width: min(calc(100% - 96px), 820px); }
}

.home-earth-hint {
  margin: 10px 0 0;
  padding-top: 8px;
  border-top: 1px solid rgba(200, 225, 232, 0.10);
  color: rgba(167, 187, 192, 0.64);
  font-size: 8px;
  line-height: 1.45;
  pointer-events: none;
}

.home-earth-live {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 760px) {
  .canonical-preview-stage[data-canonical-slot="home.hero"][data-home-earth-mounted],
  [data-canonical-slot="home.hero"][data-home-earth-mounted],
  [data-canonical-slot="home.hero"][data-home-earth-prepaint="true"] { min-height: max(820px, 100dvh); }

  .home-earth-root { min-height: max(820px, 100svh); }
  .home-earth-root::after { opacity: 0.14; mask-image: linear-gradient(#000, transparent 78%); }

  .home-earth-frame {
    width: min(calc(100% - 36px), 560px);
    min-height: calc(max(820px, 100svh) - 142px);
    grid-template-columns: 1fr;
    grid-template-rows: minmax(300px, 36svh) auto;
    grid-template-areas:
      "visual"
      "copy";
  }

  .home-earth-copy {
    align-self: start;
    padding: 20px 0 164px;
    text-align: center;
  }

  .home-earth-root--prepaint .home-earth-orthographic-surface,
  .home-earth-root--prepaint .home-earth-control {
    left: 50%;
    top: 88px;
    width: min(70vw, 280px);
    height: min(70vw, 280px);
    transform: translateX(-50%);
  }

  .home-earth-control { touch-action: pan-y; }

  .home-earth-copy h1 { max-width: 480px; margin-inline: auto; font-size: clamp(46px, 14vw, 68px); }
  .home-earth-copy h1 > span:last-child {
    max-width: 6.2em;
    margin: 8px auto 0;
    font-size: clamp(44px, 13vw, 58px);
    line-height: 1.02;
  }
  .home-earth-copy .home-earth-present { margin-inline: auto; font-size: clamp(18px, 5.8vw, 25px); }
  .home-earth-thesis { max-width: 440px; margin: 22px auto 0; font-size: clamp(17px, 5vw, 22px); }
  .home-earth-lede { max-width: 440px; margin: 14px auto 0; font-size: 13px; line-height: 1.7; }

  .home-earth-readout {
    left: 50%;
    top: var(--earth-readout-mobile-top);
    width: min(306px, calc(100% - 42px));
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    column-gap: 14px;
    row-gap: 3px;
    padding: 9px 12px 8px;
    transform: translate(-50%, -10px);
    border-left: 0;
    border-top: 1px solid rgba(196, 139, 102, 0.58);
    background: linear-gradient(rgba(3, 8, 13, 0.82), rgba(3, 8, 13, 0.16));
    text-align: left;
  }

  .home-earth-status,
  .home-earth-coordinates,
  .home-earth-readout small { margin: 0; }

  .home-earth-readout strong,
  .home-earth-readout small { text-align: right; }

  .home-earth-hint {
    grid-column: 1 / -1;
    margin: 2px 0 0;
    padding-top: 5px;
    text-align: left;
    white-space: nowrap;
  }

  .home-earth-routes {
    bottom: 22px;
    width: calc(100% - 24px);
    min-height: 102px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: 34px 56px;
  }

  .home-earth-route-label,
  .home-earth-route-status {
    min-height: 34px;
    grid-column: span 2;
    justify-content: center;
    padding: 6px 8px;
    border-bottom: 1px solid rgba(200, 225, 232, 0.12);
    font-size: 8px;
  }

  .home-earth-routes a {
    min-height: 56px;
    padding: 7px 4px;
    border-left: 0;
    border-right: 1px solid rgba(200, 225, 232, 0.12);
    font-size: 10px;
  }

  .home-earth-routes a:last-of-type { border-right: 0; }
}

@media (max-width: 380px) {
  .home-earth-copy { padding-bottom: 172px; }
  .home-earth-copy h1 { font-size: clamp(42px, 13.6vw, 58px); }
  .home-earth-lede { font-size: 12px; }
  .home-earth-routes { width: calc(100% - 16px); }
}

@media (prefers-reduced-motion: reduce) {
  .home-earth-control,
  .home-earth-copy,
  .home-earth-orthographic-surface,
  .home-earth-readout,
  .home-earth-routes { transition: none; }
  .home-earth-beacon::before { animation: none; opacity: 0.54; transform: scale(0.72); }
}

/* K1 candidate: hero.earth.code-relief. Every rule is scoped to the code-relief
   variant root so the accepted deep-atlas variant cannot change appearance. */
[data-home-earth-mounted="hero.earth.code-relief"] .home-earth-control:focus-visible {
  outline-color: rgba(232, 168, 56, 0.82);
  box-shadow: 0 0 0 3px rgba(232, 168, 56, 0.12);
}

[data-home-earth-mounted="hero.earth.code-relief"] .home-earth-readout {
  border-left-color: rgba(232, 168, 56, 0.58);
}

@media (max-width: 760px) {
  [data-home-earth-mounted="hero.earth.code-relief"] .home-earth-readout {
    border-top-color: rgba(232, 168, 56, 0.54);
  }
}

/* Short landscape screens need a true first-fold composition instead of the
 * 760px-tall desktop canvas: identity stays left, Earth stays right, and the
 * route rail becomes immediately usable without changing portrait mobile. */
@media (orientation: landscape) and (max-height: 560px) and (min-width: 701px) and (max-width: 980px) {
  .canonical-preview-stage[data-canonical-slot="home.hero"][data-home-earth-mounted],
  [data-canonical-slot="home.hero"][data-home-earth-mounted],
  .home-earth-root {
    min-height: 100svh;
  }

  .home-earth-root {
    --earth-x: 78%;
    --earth-y: 58%;
    --earth-r: 130px;
    --earth-left: calc(78% - 130px);
    --earth-top: calc(58% - 130px);
    --earth-diameter: 260px;
    --earth-readout-left: 82%;
    --earth-readout-top: 52%;
  }

  .home-earth-frame {
    min-height: 100svh;
    grid-template-columns: minmax(0, 0.55fr) minmax(0, 0.45fr);
  }

  .home-earth-copy {
    align-self: start;
    padding: 106px 0 62px;
  }

  .home-earth-kicker {
    margin-bottom: 7px;
    font-size: 8px;
  }

  .home-earth-copy h1 {
    max-width: 420px;
    font-size: clamp(35px, 4.8vw, 41px);
    line-height: 0.88;
  }

  .home-earth-copy .home-earth-present {
    margin-bottom: 7px;
    font-size: 15px;
    line-height: 1.05;
  }

  .home-earth-copy h1 > span:last-child {
    max-width: 16em;
    margin-top: 4px;
    font-size: 0.46em;
    line-height: 1.03;
  }

  .home-earth-thesis {
    margin-top: 7px;
    font-size: 14px;
    line-height: 1.2;
  }

  .home-earth-lede {
    max-width: 430px;
    margin-top: 5px;
    font-size: 10px;
    line-height: 1.35;
  }

  .home-earth-readout {
    width: min(145px, 18vw);
    padding: 8px 10px;
  }

  .home-earth-hint {
    margin-top: 5px;
    padding-top: 4px;
    line-height: 1.25;
  }

  .home-earth-routes {
    bottom: 10px;
    width: min(calc(100% - 48px), 920px);
    min-height: 46px;
  }

  .home-earth-route-label,
  .home-earth-route-status,
  .home-earth-routes a {
    min-height: 44px;
    padding: 6px 9px;
    font-size: 8px;
  }

  .home-earth-routes a {
    font-size: 9px;
  }
}