/* 独立 /era/ 页：黑底全宽通史壳（不依赖首页 radio :has） */

html:has(body.figure-era-page),
body.figure-era-page {
  background-color: #000 !important;
  background-image: none !important;
  overflow-x: hidden !important;
  overflow-x: clip !important;
}

body.figure-era-page .material-layout,
body.figure-era-page .mdl-js-layout,
body.figure-era-page #main,
body.figure-era-page #main.material-layout__content,
body.figure-era-page .material-layout__content,
body.figure-era-page .material-index.mdl-grid,
body.figure-era-page .home-index-bleed {
  background: transparent !important;
  background-color: transparent !important;
}

body.figure-era-page #main.material-layout__content {
  padding-top: 0 !important;
}

body.figure-era-page .mdl-layout__drawer-button {
  display: none !important;
}

body.figure-era-page #home-dimension-tabs.home-dim-tabs.mdl-cell,
body.figure-era-page #home-dimension-tabs {
  background: transparent !important;
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: max(12px, env(safe-area-inset-left, 0px));
  padding-right: max(12px, env(safe-area-inset-right, 0px));
  box-sizing: border-box;
  min-width: 0;
  overflow-x: hidden;
  overflow-x: clip;
}

body.figure-era-page .home-dim-tabs {
  margin: 0 0 15px;
  padding: 0 8px;
  box-sizing: border-box;
}

body.figure-era-page .home-dim-tabs__inputs {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

body.figure-era-page .home-dim-tabs__bar {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  margin-bottom: 0;
  padding: 8px;
  box-sizing: border-box;
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + var(--site-marquee-height, 0px));
  z-index: 8;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: linear-gradient(
    180deg,
    rgba(8, 12, 22, 0.62) 0%,
    rgba(8, 12, 22, 0.42) 52%,
    rgba(8, 12, 22, 0.2) 100%
  ) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: none;
  box-shadow: 0 4px 28px rgba(0, 0, 0, 0.45);
  border-radius: 0 0 16px 16px;
}

body.figure-era-page .home-dim-tabs__bar a,
body.figure-era-page .home-dim-tabs__bar span {
  cursor: pointer;
  flex: 1 1 0;
  text-align: center;
  padding: 11px 14px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(230, 238, 255, 0.9);
}

body.figure-era-page .home-dim-tabs__bar .is-current {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(160, 195, 255, 0.55) !important;
  color: #152238 !important;
  font-weight: 700;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

body.figure-era-page .home-dim-tabs__panel--figures.figure-timeline-panel {
  display: block;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
  border-radius: 0;
  --figure-cosmic-top-bleed: calc(var(--home-dim-primary-bar-h, 52px) + 10px);
  margin-top: calc(6px - var(--home-dim-primary-bar-h, 52px) - 10px);
}

body.figure-era-page .figure-timeline-panel__hscroll {
  padding-top: calc(10px + var(--home-dim-primary-bar-h, 52px) + 10px);
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

body.figure-era-page #figure-timeline-root {
  position: relative;
  z-index: 2;
  padding-left: max(8px, env(safe-area-inset-left, 0px));
  padding-right: max(8px, env(safe-area-inset-right, 0px));
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.home-dim-tabs__panel--figures.figure-timeline-panel.figure-timeline-panel--cosmic {
  position: relative;
  z-index: 1;
  overflow: visible;
  max-height: none;
  --figure-cosmic-top-bleed: 0px;
  --figure-earth-mask-x: 50%;
  --figure-earth-mask-y: 84%;
  --figure-earth-clear-r: calc(25vw + 300px);
  padding: 14px 0 40px;
  border-radius: 0;
  background: transparent;
}

.figure-timeline-panel__hscroll {
  position: relative;
  z-index: 2;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.figure-galaxy-bg {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--figure-cosmic-top-bleed, 0px));
  height: calc(100% + var(--figure-cosmic-top-bleed, 0px));
  bottom: auto;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #000;
  isolation: isolate;
}

.figure-galaxy-bg__stars {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--figure-cosmic-top-bleed, 0px));
  height: calc(100% + var(--figure-cosmic-top-bleed, 0px));
  z-index: 1;
  pointer-events: none;
  opacity: 0.85;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(238, 244, 255, 0.9), transparent),
    radial-gradient(1.2px 1.2px at 28% 42%, rgba(212, 224, 255, 0.7), transparent),
    radial-gradient(1px 1px at 46% 14%, rgba(255, 244, 216, 0.65), transparent),
    radial-gradient(1.4px 1.4px at 63% 36%, rgba(180, 200, 255, 0.75), transparent),
    radial-gradient(1px 1px at 81% 22%, rgba(238, 244, 255, 0.8), transparent),
    radial-gradient(1px 1px at 18% 68%, rgba(160, 180, 230, 0.55), transparent),
    radial-gradient(1.2px 1.2px at 72% 74%, rgba(238, 244, 255, 0.7), transparent),
    radial-gradient(1px 1px at 91% 58%, rgba(212, 160, 72, 0.45), transparent);
  background-size: 220px 180px;
}

.figure-galaxy-bg__shard {
  position: absolute;
  z-index: 0;
  mix-blend-mode: screen;
  transform-origin: center center;
  contain: paint;
  box-sizing: border-box;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #fff 33.33%, #fff 66.67%, transparent),
    linear-gradient(to bottom, transparent, #fff 33.33%, #fff 66.67%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #fff 33.33%, #fff 66.67%, transparent),
    linear-gradient(to bottom, transparent, #fff 33.33%, #fff 66.67%, transparent);
  mask-composite: intersect;
}

.figure-galaxy-bg__shard picture,
.figure-galaxy-bg__shard img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

.figure-galaxy-bg__spiral {
  left: 50%;
  right: auto;
  top: clamp(4%, 8vh, 14%);
  width: 50vw;
  max-width: min(50vw, 920px);
  height: calc(min(50vw, 920px) * 816 / 1022);
  transform: translateX(-50%) rotate(-10deg);
  opacity: 0.76;
}

.figure-galaxy-bg__spiral-sm {
  width: min(14vw, 220px);
  height: calc(min(14vw, 220px) * 816 / 1022);
  opacity: 0.58;
}

.figure-galaxy-bg__spiral-sm--a { left: 2%; top: 12%; transform: rotate(72deg) scale(0.92); }
.figure-galaxy-bg__spiral-sm--b { right: 1%; top: 8%; transform: rotate(-48deg) scale(0.88); }
.figure-galaxy-bg__spiral-sm--c { right: 8%; bottom: 18%; transform: rotate(18deg) scale(0.9); }
.figure-galaxy-bg__spiral-sm--d { left: 6%; bottom: 10%; transform: rotate(-112deg) scale(0.85); }

.figure-galaxy-bg__spiral-layer {
  position: absolute;
  inset: 0;
  top: calc(-1 * var(--figure-cosmic-top-bleed, 0px));
  height: calc(100% + var(--figure-cosmic-top-bleed, 0px));
  z-index: 0;
  pointer-events: none;
}

.figure-galaxy-bg__earth-wrap {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--figure-cosmic-top-bleed, 0px));
  height: calc(100% + var(--figure-cosmic-top-bleed, 0px));
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: clamp(28px, 7.5vh, 96px);
  pointer-events: none;
  box-sizing: border-box;
}

.figure-galaxy-bg__earth-wrap .figure-galaxy-bg__shard.figure-galaxy-bg__earth {
  position: relative;
  width: 50vw;
  max-width: min(50vw, 920px);
  opacity: 0.88;
}

.figure-galaxy-bg__earth img {
  width: 100%;
  height: auto;
}

.figure-galaxy-bg__spiral-layer,
.figure-galaxy-bg__earth-wrap {
  opacity: 0;
  transition: opacity 0.65s ease-out;
}

.figure-timeline-panel--cosmic.figure-timeline-panel--galaxy-images-ready .figure-galaxy-bg__spiral-layer,
.figure-timeline-panel--cosmic.figure-timeline-panel--galaxy-images-ready .figure-galaxy-bg__earth-wrap {
  opacity: 1;
}

.figure-galaxy-bg__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.38) 0%,
    rgba(0, 0, 0, 0.06) 42%,
    rgba(0, 0, 0, 0.36) 100%
  );
}

@media (hover: none) and (pointer: coarse) {
  .figure-galaxy-bg__shard {
    mix-blend-mode: normal;
    opacity: 0.44;
  }
  .figure-galaxy-bg {
    background: #070810;
  }
}

html.is-in-app body.figure-era-page .home-dim-tabs__bar {
  display: none !important;
}

@media (min-width: 992px) {
  body.figure-era-page #main.material-layout__content,
  body.figure-era-page #main {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    flex: 0 1 auto !important;
    min-height: 0 !important;
  }
}