.zc-material-universe {
  --bg-top: #f5f5f7;
  --bg-bottom: #f5f5f7;
  --ink: #1f2133;
  --muted: #73758a;
  --accent: #7771bc;
  --accent-deep: #2b2b67;
  --line: rgba(119, 113, 188, 0.16);
  --card: rgba(255, 255, 255, 0.68);
  --shadow: 0 24px 60px rgba(92, 87, 140, 0.10);
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #f5f5f7;
  background-color: #f5f5f7;
  color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow: hidden;
  isolation: isolate;
}

.zc-material-universe * {
  box-sizing: border-box;
}

.zc-material-universe img {
  display: block;
  max-width: 100%;
}

.zc-material-universe a,
.zc-material-universe button {
  font: inherit;
}

.zc-material-universe .page {
  width: min(100%, 1320px);
  min-height: calc(100vh + 120px);
  margin: 0 auto;
  padding: 0 16px 48px;
  position: relative;
  overflow: hidden;
}

.zc-material-universe .page__ornament {
  position: absolute;
  display: block;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  opacity: 0.08;
  filter: blur(0.6px);
}

.zc-material-universe .page__ornament img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.zc-material-universe .page__ornament--bottom-left {
  /* 底角装饰在详情模块底边会露出残影，直接禁用，避免左右角出现被截断的“脏边”。 */
  display: none;
}

.zc-material-universe .page__ornament--bottom-right {
  /* 底角装饰在详情模块底边会露出残影，直接禁用，避免左右角出现被截断的“脏边”。 */
  display: none;
}

.zc-material-universe .module {
  display: grid;
  grid-template-columns: 352px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  min-height: 872px;
  padding: 20px 0 0;
  position: relative;
}

.zc-material-universe .copy {
  padding-top: 112px;
  max-width: 336px;
  position: relative;
  z-index: 1;
  margin-left: 0;
}

.zc-material-universe .eyebrow {
  color: #7b7eb6;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.zc-material-universe .title {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 49px;
  line-height: 0.96;
  letter-spacing: -0.03em;
  color: #232537;
}

.zc-material-universe .title .accent {
  color: #6e68b6;
}

.zc-material-universe .spark {
  color: #a7a2da;
  font-size: 18px;
  vertical-align: middle;
  margin-left: 6px;
}

.zc-material-universe .divider {
  width: 146px;
  height: 16px;
  margin: 18px 0 22px;
  position: relative;
}

.zc-material-universe .divider::before,
.zc-material-universe .divider::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.zc-material-universe .divider::before {
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(140, 142, 167, 0), rgba(140, 142, 167, 0.28), rgba(140, 142, 167, 0));
}

.zc-material-universe .divider::after {
  right: 20px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(166, 160, 221, 0.84);
}

.zc-material-universe .lead {
  margin: 0 0 28px;
  color: #4f5368;
  font-size: 14px;
  line-height: 1.68;
  max-width: 282px;
}

.zc-material-universe .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 170px;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  text-decoration: none;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.zc-material-universe .button:hover {
  transform: translateY(-1px);
}

.zc-material-universe .button--primary {
  color: #fff;
  background: linear-gradient(180deg, #8078ce, #6b63c3);
  box-shadow: 0 18px 34px rgba(114, 104, 201, 0.22);
  min-width: 176px;
  min-height: 48px;
}

.zc-material-universe .button--secondary {
  min-width: auto;
  min-height: auto;
  padding: 0;
  margin-top: 18px;
  color: #7578b0;
  border-radius: 0;
  background: none;
  font-size: 10px;
  box-shadow: none;
  justify-content: flex-start;
}

.zc-material-universe .button__arrow {
  margin-left: 10px;
  font-size: 16px;
  line-height: 1;
}

.zc-material-universe .card {
  width: 252px;
  margin-top: 56px;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(119, 113, 188, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.56);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 42px rgba(92, 87, 140, 0.08);
}

.zc-material-universe .card__visual {
  width: 44px;
  height: 60px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0) 38%),
    linear-gradient(180deg, rgba(238, 236, 251, 0.96), rgba(209, 205, 241, 0.72));
  border: 1px solid rgba(132, 124, 196, 0.18);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.8), 0 12px 24px rgba(129, 123, 184, 0.12);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}

.zc-material-universe .card__visual::before {
  content: "M";
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 32px;
  color: rgba(110, 104, 182, 0.86);
}

.zc-material-universe .card__visual::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.48);
}

.zc-material-universe .card__meta {
  display: grid;
  align-content: center;
  gap: 8px;
}

.zc-material-universe .card__title {
  color: #2d3040;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.zc-material-universe .card__copy {
  color: #5f6377;
  font-size: 12px;
  line-height: 1.45;
  max-width: 116px;
}

.zc-material-universe .card__link {
  color: #7670c7;
  font-size: 16px;
  text-decoration: none;
  line-height: 1;
}

.zc-material-universe .universe {
  position: relative;
  min-height: 872px;
  z-index: 1;
  overflow: visible;
  margin-right: -12px;
}

.zc-material-universe .constellation {
  --orbit-center-x: 388px;
  --orbit-center-y: 374px;
  --planet-radius: 242px;
  position: absolute;
  inset: 0;
  transform: translateX(42px) translateY(10px) scale(1.14);
  transform-origin: center top;
}

.zc-material-universe .orbit {
  position: absolute;
  left: var(--orbit-center-x);
  top: var(--orbit-center-y);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(185, 182, 213, 0.22);
  box-shadow: inset 0 0 28px rgba(255, 255, 255, 0.86), 0 0 34px rgba(169, 162, 231, 0.08);
}

.zc-material-universe .orbit--outer { width: 600px; height: 600px; }
.zc-material-universe .orbit--middle { width: 504px; height: 504px; border-color: rgba(185, 182, 213, 0.12); }
.zc-material-universe .orbit--inner { width: 382px; height: 382px; border-color: rgba(185, 182, 213, 0.10); }

.zc-material-universe .glow {
  position: absolute;
  left: var(--orbit-center-x);
  top: var(--orbit-center-y);
  width: 720px;
  height: 720px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.34) 28%, rgba(255, 255, 255, 0.10) 52%, rgba(255, 255, 255, 0) 76%);
  filter: blur(12px);
  pointer-events: none;
}

.zc-material-universe .brand-core {
  position: absolute;
  left: var(--orbit-center-x);
  top: var(--orbit-center-y);
  width: 260px;
  height: 260px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.16) 54%, rgba(255, 255, 255, 0.04) 100%);
  display: grid;
  place-items: center;
  text-align: center;
  box-shadow: 0 0 0 1px rgba(146, 140, 202, 0.05), inset 0 0 46px rgba(255, 255, 255, 0.34), 0 20px 44px rgba(118, 113, 173, 0.08);
}

.zc-material-universe .brand-core::before,
.zc-material-universe .brand-core::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}

.zc-material-universe .brand-core::before {
  inset: -14px;
  border: 1px solid rgba(139, 132, 204, 0.16);
  opacity: 0.86;
}

.zc-material-universe .brand-core::after {
  inset: -30px;
  border: 1px solid rgba(139, 132, 204, 0.09);
  opacity: 0.92;
}

.zc-material-universe .brand-core__star {
  color: #7d78c0;
  font-size: 24px;
  line-height: 1;
  margin-bottom: 10px;
}

.zc-material-universe .brand-core__mark {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 98px;
  line-height: 0.9;
  color: #635ca8;
  letter-spacing: -0.03em;
  text-shadow: 0 8px 18px rgba(119, 112, 191, 0.12);
}

.zc-material-universe .brand-core__name {
  margin-top: 8px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 29px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #1f2235;
}

.zc-material-universe .brand-core__hint {
  margin-top: 10px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(103, 96, 178, 0.72);
}

.zc-material-universe .planet {
  --ring-color: rgba(122, 124, 151, 0.34);
  --ring-rotate: -16deg;
  --planet-filter: none;
  --anchor-x: 0px;
  --anchor-y: 0px;
  --anchor-offset-x: 84px;
  --anchor-offset-y: 84px;
  --planet-size: 116px;
  position: absolute;
  width: 176px;
  left: calc(var(--anchor-x) - var(--anchor-offset-x));
  top: calc(var(--anchor-y) - var(--anchor-offset-y));
  text-align: center;
  cursor: pointer;
  transition: opacity 220ms ease, transform 220ms ease;
}

.zc-material-universe .planet__media-wrap {
  position: relative;
  width: var(--planet-size);
  height: var(--planet-size);
  margin: 0 auto 12px;
}

.zc-material-universe .planet__media-wrap::before {
  /* 只去掉每个单独行星外面的椭圆圈，保留整体宇宙轨道和其它层级结构。 */
  content: none;
}

.zc-material-universe .planet__media {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  /* 这些球体素材本身已经是透明图，不能再用 clip-path 二次裁切，否则外层椭圆圈会被切掉。 */
  clip-path: none;
  filter: var(--planet-filter) drop-shadow(0 16px 24px rgba(79, 76, 117, 0.14));
  animation: zc-mu-float 8s ease-in-out infinite;
  transition: transform 220ms ease, filter 220ms ease;
}

.zc-material-universe .planet__index {
  font-size: 13.5px;
  font-weight: 700;
  color: #2a2e42;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.44);
}

.zc-material-universe .planet__name {
  font-size: 12.6px;
  line-height: 1.12;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: #202437;
  white-space: normal;
  text-wrap: balance;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.60);
}

.zc-material-universe .planet__tags {
  margin-top: 4px;
  font-size: 10.2px;
  line-height: 1.28;
  color: #454b63;
  font-weight: 600;
  white-space: normal;
  text-wrap: balance;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.56);
}

.zc-material-universe .planet--01 { --planet-size: 122px; --ring-color: rgba(176, 177, 198, 0.16); --planet-filter: none; --anchor-offset-x: 84px; --anchor-offset-y: 108px; }
.zc-material-universe .planet--02 { --planet-size: 102px; --ring-color: rgba(194, 154, 71, 0.78); --ring-rotate: -21deg; --anchor-offset-x: 84px; --anchor-offset-y: 98px; }
.zc-material-universe .planet--03 { --planet-size: 102px; --ring-color: rgba(194, 154, 71, 0.78); --ring-rotate: 24deg; --anchor-offset-x: 84px; --anchor-offset-y: 98px; }
.zc-material-universe .planet--04 { --planet-size: 98px; --ring-color: rgba(170, 156, 214, 0.46); --ring-rotate: -22deg; --planet-filter: saturate(1.05) brightness(1.01); --anchor-offset-x: 62px; --anchor-offset-y: 56px; width: 206px; padding-left: 108px; min-height: 120px; text-align: left; }
.zc-material-universe .planet--05 { --planet-size: 100px; --ring-color: rgba(151, 153, 179, 0.56); --ring-rotate: 22deg; --anchor-offset-x: 52px; --anchor-offset-y: 52px; width: 148px; text-align: left; }
.zc-material-universe .planet--06 { --planet-size: 112px; --ring-color: rgba(194, 154, 71, 0.82); --ring-rotate: 10deg; --anchor-offset-x: 86px; --anchor-offset-y: 52px; width: 150px; }
.zc-material-universe .planet--07 { --planet-size: 104px; --ring-color: rgba(111, 191, 194, 0.7); --ring-rotate: -18deg; --anchor-offset-x: 86px; --anchor-offset-y: 52px; width: 150px; }
.zc-material-universe .planet--08 { --planet-size: 88px; --ring-color: rgba(194, 154, 71, 0.2); --ring-rotate: 18deg; --planet-filter: none; --anchor-offset-x: 184px; --anchor-offset-y: 54px; width: 246px; padding-right: 96px; min-height: 112px; text-align: right; }

.zc-material-universe .planet--08 .planet__name,
.zc-material-universe .planet--08 .planet__tags {
  white-space: normal;
}

.zc-material-universe .planet--05 .planet__media-wrap,
.zc-material-universe .planet--06 .planet__media-wrap,
.zc-material-universe .planet--07 .planet__media-wrap {
  /* 这两颗在当前构图里文字区离球体偏远，单独收紧图文垂直间距。 */
  margin-bottom: 2px;
}

.zc-material-universe .planet--04 .planet__media-wrap {
  position: absolute;
  left: 0;
  top: 6px;
  margin: 0;
}

.zc-material-universe .planet--04 .planet__index {
  margin-top: 24px;
}

.zc-material-universe .planet--08 .planet__media-wrap::before {
  display: none;
}

.zc-material-universe .planet--01 .planet__media-wrap::before {
  display: none;
}

.zc-material-universe .planet--08 .planet__media-wrap {
  position: absolute;
  right: 0;
  top: 4px;
  margin: 0;
}

.zc-material-universe .planet--08 .planet__index {
  margin-top: 12px;
}

.zc-material-universe .planet--05 .planet__index {
  margin-top: 1px;
}

.zc-material-universe .planet--06 .planet__index {
  margin-top: 2px;
}

.zc-material-universe .planet--07 .planet__index {
  margin-top: 1px;
}

.zc-material-universe .planet:hover .planet__media,
.zc-material-universe .planet.is-active .planet__media {
  transform: scale(1.045);
  filter: var(--planet-filter) drop-shadow(0 24px 30px rgba(79, 76, 117, 0.18));
}

.zc-material-universe .planet:hover .planet__name,
.zc-material-universe .planet.is-active .planet__index,
.zc-material-universe .planet.is-active .planet__name {
  color: #6760b2;
}

.zc-material-universe .planet.is-active .planet__tags {
  color: #4f5368;
  opacity: 0.98;
}

.zc-material-universe .constellation.has-active .planet:not(.is-active) {
  opacity: 0.78;
}

.zc-material-universe .rail {
  position: absolute;
  right: 4px;
  top: 306px;
  display: grid;
  gap: 10px;
  align-items: center;
  padding-left: 4px;
  z-index: 3;
}

.zc-material-universe .rail::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  right: 11px;
  width: 1px;
  background: linear-gradient(180deg, rgba(133, 126, 196, 0.08), rgba(133, 126, 196, 0.44), rgba(133, 126, 196, 0.08));
}

.zc-material-universe .rail__item {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  display: grid;
  grid-template-columns: auto 22px;
  align-items: center;
  gap: 7px;
  color: #6d68b4;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  opacity: 0.9;
}

.zc-material-universe .rail__label,
.zc-material-universe .mobile-selection {
  display: none;
}

.zc-material-universe .rail__line {
  width: 22px;
  height: 1px;
  background: rgba(127, 121, 198, 0.68);
  position: relative;
}

.zc-material-universe .rail__line::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  width: 9px;
  height: 9px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #7d78c0;
}

.zc-material-universe .rail__item.is-active {
  color: #655fb0;
  opacity: 1;
}

.zc-material-universe .rail__item.is-active .rail__line {
  width: 22px;
  background: rgba(103, 96, 178, 0.86);
}

.zc-material-universe .rail__item.is-active .rail__line::after {
  background: #655fb0;
  box-shadow: 0 0 0 4px rgba(119, 113, 188, 0.12);
}

.zc-material-universe .detail-shell {
  margin-top: 56px;
  border-top: 1px solid rgba(125, 119, 191, 0.06);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.32)),
    linear-gradient(180deg, rgba(248, 246, 252, 0.98), rgba(241, 239, 247, 0.96));
  box-shadow: 0 -14px 44px rgba(97, 92, 145, 0.05);
  position: relative;
  overflow: hidden;
  scroll-margin-top: 110px;
}

.zc-material-universe .detail-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 28% 58%, rgba(255, 255, 255, 0.66), transparent 18%),
    radial-gradient(circle at 78% 18%, rgba(218, 213, 246, 0.20), transparent 24%);
  pointer-events: none;
}

.zc-material-universe .detail-shell::after {
  /* 顶部不要再单独叠一条跟上一层背景走的浅灰过渡带，直接使用 detail-shell 自身背景，避免出现“上半截颜色不对”的断层。 */
  content: none;
}

.zc-material-universe .detail-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 132px minmax(0, 1.08fr) minmax(0, 0.96fr) minmax(236px, 0.72fr);
  /* 不同材质切换时标题行数和 match trait 文案长度不同，固定桌面详情区高度，避免 hover 时整块轻微抖动。 */
  min-height: 684px;
}

.zc-material-universe .detail-sidebar,
.zc-material-universe .detail-story,
.zc-material-universe .detail-products {
  border-right: 1px solid rgba(125, 119, 191, 0.08);
}

.zc-material-universe .detail-sidebar { padding: 24px 12px 18px; }
.zc-material-universe .detail-sidebar { padding: 26px 14px 18px; }

.zc-material-universe .detail-back {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  align-items: start;
  column-gap: 6px;
  color: #7478a8;
  text-decoration: none;
  font-size: 8.5px;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 0 4px;
  margin-bottom: 14px;
}

.zc-material-universe .detail-back::before {
  content: "←";
  font-size: 12px;
  line-height: 1;
  margin-top: 1px;
}

.zc-material-universe .detail-nav {
  display: grid;
  gap: 0;
}

.zc-material-universe .detail-nav__item {
  appearance: none;
  width: 100%;
  border: 0;
  background: transparent;
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  padding: 10px 8px;
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
  transform: none !important;
  transition-property: background-color, border-color, box-shadow, opacity !important;
}

.zc-material-universe .detail-nav__item.is-active {
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 26px rgba(97, 92, 145, 0.10);
  border: 1px solid rgba(125, 119, 191, 0.10);
  transform: none !important;
}

.zc-material-universe .detail-nav__thumb {
  width: 24px;
  height: 24px;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 6px 10px rgba(91, 88, 134, 0.12));
}

.zc-material-universe .detail-nav__item:hover {
  background: rgba(255, 255, 255, 0.70);
  transform: none !important;
}

.zc-material-universe .detail-nav__item:active,
.zc-material-universe .detail-nav__item:focus-visible {
  transform: none !important;
}

.zc-material-universe .detail-nav__label {
  font-size: 8.5px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #2f3348;
}

.zc-material-universe .detail-stage {
  position: relative;
  display: grid;
  place-items: center;
  padding: 28px 20px;
  overflow: hidden;
}

.zc-material-universe .detail-stage::before,
.zc-material-universe .detail-stage::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.zc-material-universe .detail-stage::before {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.28) 45%, rgba(255, 255, 255, 0) 72%);
  filter: blur(8px);
}

.zc-material-universe .detail-stage::after {
  width: 560px;
  height: 560px;
  border: 1px solid rgba(188, 182, 226, 0.18);
}

.zc-material-universe .detail-sphere {
  position: relative;
  width: 420px;
  height: 420px;
  display: grid;
  place-items: center;
}

.zc-material-universe .detail-sphere::before,
.zc-material-universe .detail-sphere::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.zc-material-universe .detail-sphere::before {
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.14) 52%, rgba(255, 255, 255, 0) 76%);
  filter: blur(10px);
}

.zc-material-universe .detail-sphere::after {
  /* 详情大图区域只保留素材自身的主环，去掉额外叠加的浅色辅助椭圆线，避免在左侧/右侧露出残线。 */
  content: none;
}

.zc-material-universe[data-active-planet="01"] .detail-sphere::after {
  display: none;
}

.zc-material-universe .detail-sphere__img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 24px 44px rgba(114, 114, 138, 0.18));
  transform: translate(var(--detail-img-shift-x, 0), var(--detail-img-shift-y, 0));
  transition: transform 180ms ease, filter 180ms ease, opacity 180ms ease;
  will-change: transform;
}

/* 详情区使用同一尺寸容器切换不同星球时，素材的可见中心并不完全一致。
   这里做极小的逐星球对位，保留 hover 切换，同时消掉“图在跳”的体感。 */
.zc-material-universe[data-active-planet="01"] .detail-sphere__img {
  --detail-img-shift-x: 0px;
  --detail-img-shift-y: 6px;
}

.zc-material-universe[data-active-planet="02"] .detail-sphere__img {
  --detail-img-shift-x: 3px;
  --detail-img-shift-y: -18px;
}

.zc-material-universe[data-active-planet="03"] .detail-sphere__img {
  --detail-img-shift-x: 0px;
  --detail-img-shift-y: 17px;
}

.zc-material-universe[data-active-planet="04"] .detail-sphere__img {
  --detail-img-shift-x: 8px;
  --detail-img-shift-y: 11px;
}

.zc-material-universe[data-active-planet="05"] .detail-sphere__img {
  --detail-img-shift-x: 2px;
  --detail-img-shift-y: 6px;
}

.zc-material-universe[data-active-planet="06"] .detail-sphere__img {
  --detail-img-shift-x: 0px;
  --detail-img-shift-y: 11px;
}

.zc-material-universe[data-active-planet="07"] .detail-sphere__img {
  --detail-img-shift-x: -2px;
  --detail-img-shift-y: -16px;
}

.zc-material-universe[data-active-planet="08"] .detail-sphere__img {
  --detail-img-shift-x: 3px;
  --detail-img-shift-y: 15px;
}

.zc-material-universe .detail-story {
  padding: 34px 32px 24px;
  display: grid;
  align-content: start;
  gap: 18px;
}

.zc-material-universe .detail-story__eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #7975bc;
}

.zc-material-universe .detail-story__title {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 56px;
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: #232639;
  min-height: 85px;
}

.zc-material-universe .detail-story__subtitle {
  margin-top: -8px;
  color: #686d85;
  font-size: 13px;
  font-weight: 700;
}

.zc-material-universe .detail-story__lead {
  margin: -4px 0 0;
  color: #44495f;
  font-size: 17px;
  line-height: 1.32;
  font-weight: 600;
  max-width: 312px;
}

.zc-material-universe .detail-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 6px;
}

.zc-material-universe .detail-action {
  padding: 12px 10px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(125, 119, 191, 0.10);
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
  box-shadow: 0 14px 28px rgba(95, 92, 137, 0.07);
}

.zc-material-universe .detail-action__icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(118, 113, 188, 0.22);
  display: grid;
  place-items: center;
  color: #6d67b7;
  background: rgba(255, 255, 255, 0.82);
  font-size: 14px;
  font-weight: 700;
}

.zc-material-universe .detail-action__label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #2b2f44;
}

.zc-material-universe .detail-action__meta {
  margin-top: -3px;
  font-size: 8px;
  color: #7a7d92;
  font-weight: 600;
}

.zc-material-universe .detail-story__section-title,
.zc-material-universe .detail-products__title {
  margin: 10px 0 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7975bc;
}

.zc-material-universe .match-grid,
.zc-material-universe #detail-products-list {
  display: grid;
  gap: 12px;
}

.zc-material-universe .match-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.zc-material-universe .match-card {
  padding: 8px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(125, 119, 191, 0.10);
  box-shadow: 0 16px 30px rgba(95, 92, 137, 0.07);
  display: grid;
  grid-template-rows: 132px auto minmax(33px, auto);
}

.zc-material-universe .match-card__portrait {
  height: 132px;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.34), transparent 28%),
    linear-gradient(180deg, rgba(246, 245, 249, 0.98), rgba(223, 225, 234, 0.92));
}

.zc-material-universe .match-card__portrait::before,
.zc-material-universe .match-card__portrait::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 999px;
}

.zc-material-universe .match-card__portrait::before {
  top: 18px;
  width: 40px;
  height: 48px;
  background: radial-gradient(circle at 50% 34%, #f8dfd4 0%, #dfbdaa 72%);
  box-shadow: 0 10px 16px rgba(90, 74, 66, 0.08);
}

.zc-material-universe .match-card__portrait::after {
  bottom: -4px;
  width: 92px;
  height: 104px;
  background: linear-gradient(180deg, rgba(44, 48, 67, 0.96), rgba(26, 28, 40, 1));
}

.zc-material-universe .match-card--ruler .match-card__portrait::after {
  background: linear-gradient(180deg, rgba(28, 30, 39, 0.98), rgba(12, 14, 20, 1));
}

.zc-material-universe .match-card--everyman .match-card__portrait::after {
  background: linear-gradient(180deg, rgba(51, 54, 63, 0.98), rgba(31, 33, 41, 1));
}

.zc-material-universe .match-card__role {
  margin-top: 10px;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  color: #262a3d;
  line-height: 1.15;
  /* 角色名在不同材质下有单行和双行两种情况，不钉死高度会把整张 match card 撑高，
     进而让 detail-shell / body 高度重新出现波动。这里统一锁定角色名高度，保持切换稳定。 */
  height: 25px;
  min-height: 25px;
}

.zc-material-universe .match-card__trait {
  margin-top: 3px;
  font-size: 9.2px;
  line-height: 1.24;
  color: #666c83;
  font-weight: 600;
  /* 不同材质的 trait 文案长度略有差异，桌面端如果只设最小高度，
     某些组合会把这一行撑到 33.46875px，继而让 detail-shell / body 高度一起发生亚像素波动，
     用户就会感觉整页在上下晃。这里直接钉死高度，切断 hover 切换时的 reflow。 */
  height: 34px;
  min-height: 34px;
}

.zc-material-universe .detail-cta {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 164px;
  min-height: 42px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid rgba(125, 119, 191, 0.16);
  text-decoration: none;
  color: #6964b4;
  background: rgba(255, 255, 255, 0.90);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 14px 28px rgba(95, 92, 137, 0.07);
}

.zc-material-universe .detail-products {
  padding: 30px 14px 24px;
  display: grid;
  align-content: start;
  gap: 12px;
}

.zc-material-universe .product-card {
  position: relative;
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 10px;
  align-items: center;
  padding: 12px 12px 12px 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(125, 119, 191, 0.10);
  box-shadow: 0 16px 30px rgba(95, 92, 137, 0.07);
}

.zc-material-universe .product-card__save {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(125, 119, 191, 0.12);
  display: grid;
  place-items: center;
  color: #8a86c2;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.88);
}

.zc-material-universe .product-card__thumb {
  width: 82px;
  height: 82px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(241, 241, 246, 0.96));
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
}

.zc-material-universe .product-card__thumb-bg {
  position: absolute;
  inset: 8px;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  object-fit: contain;
  object-position: center;
  opacity: 0.34;
  filter: saturate(1.02) drop-shadow(0 10px 16px rgba(103, 99, 150, 0.10));
  transform: scale(0.92);
  pointer-events: none;
}

.zc-material-universe .product-card__thumb::before,
.zc-material-universe .product-card__thumb::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1.5px solid rgba(175, 177, 190, 0.92);
}

.zc-material-universe .product-card__thumb--necklace::before {
  width: 42px;
  height: 26px;
  border-bottom: 0;
  border-top-left-radius: 40px 24px;
  border-top-right-radius: 40px 24px;
  top: 27px;
}

.zc-material-universe .product-card__thumb--necklace::after {
  width: 12px;
  height: 12px;
  top: 44px;
  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.92), rgba(192, 196, 204, 0.96));
  border-color: rgba(175, 177, 190, 0.64);
  box-shadow: 0 6px 10px rgba(145, 149, 162, 0.16);
}

.zc-material-universe .product-card__thumb--bracelet::before {
  width: 44px;
  height: 26px;
  transform: translate(-50%, -50%) rotate(10deg);
}

.zc-material-universe .product-card__thumb--bracelet::after {
  display: none;
}

.zc-material-universe .product-card__thumb--charms::before {
  width: 40px;
  height: 24px;
  transform: translate(-50%, -50%) rotate(-6deg);
}

.zc-material-universe .product-card__thumb--charms::after {
  width: 5px;
  height: 5px;
  background: rgba(188, 192, 200, 0.94);
  border-color: rgba(188, 192, 200, 0.94);
  box-shadow: -16px -4px 0 0 rgba(188, 192, 200, 0.94), -10px 10px 0 0 rgba(188, 192, 200, 0.94), 0 12px 0 0 rgba(188, 192, 200, 0.94), 10px 9px 0 0 rgba(188, 192, 200, 0.94), 16px -2px 0 0 rgba(188, 192, 200, 0.94);
}

.zc-material-universe .product-card__name {
  font-size: 13.5px;
  line-height: 1.34;
  font-weight: 700;
  color: #262a3d;
  max-width: 112px;
}

.zc-material-universe .product-card__price {
  margin-top: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: #353950;
}

@keyframes zc-mu-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@media (max-width: 1320px) {
  .zc-material-universe .page { padding-left: 18px; padding-right: 18px; }
  .zc-material-universe .module { grid-template-columns: 260px 1fr; gap: 26px; }
  .zc-material-universe .title { font-size: 34px; }
  .zc-material-universe .universe { transform: scale(0.92); transform-origin: center top; }
  .zc-material-universe .detail-layout { grid-template-columns: 116px minmax(0, 1fr) minmax(280px, 0.94fr) minmax(208px, 0.7fr); }
  .zc-material-universe .detail-sphere { width: 320px; height: 320px; }
  .zc-material-universe .detail-story__title { font-size: 46px; }
}

@media (min-width: 1181px) {
  /* 真正的 Chrome 全屏桌面会走这层样式，单独给 04 与右侧 rail 预留更大的避让空间。 */
  .zc-material-universe .rail {
    right: 0;
    top: 300px;
  }

  .zc-material-universe .rail__item {
    grid-template-columns: auto 18px;
    gap: 7px;
    font-size: 10px;
  }

  .zc-material-universe .rail__line {
    width: 18px;
  }

  .zc-material-universe .rail__item.is-active .rail__line {
    width: 22px;
  }

  .zc-material-universe .planet--04 {
    width: 190px;
    padding-left: 98px;
    min-height: 112px;
  }

  .zc-material-universe .planet--04 .planet__index {
    margin-top: 22px;
  }

  .zc-material-universe .planet--04 .planet__name {
    max-width: 88px;
    font-size: 10.8px;
    line-height: 1.12;
  }

  .zc-material-universe .planet--04 .planet__tags {
    max-width: 92px;
    font-size: 8.5px;
    line-height: 1.18;
  }
}

@media (max-width: 1180px) {
  .zc-material-universe .page {
    padding-left: 14px;
    padding-right: 14px;
  }

  .zc-material-universe .module {
    grid-template-columns: 236px minmax(0, 1fr);
    gap: 18px;
    /* 窄桌面命中缩放样式后，原来的 664px 会留下明显底部空白。
       这里改成随视口宽度收缩的高度，让 Trae 预览与 Chrome 窄桌面更接近。 */
    min-height: clamp(626px, 59vw, 650px);
  }

  .zc-material-universe .copy {
    padding-top: 74px;
    max-width: 236px;
  }

  .zc-material-universe .eyebrow {
    font-size: 10.5px;
    margin-bottom: 12px;
  }

  .zc-material-universe .title {
    font-size: 31px;
    line-height: 0.97;
  }

  .zc-material-universe .divider {
    margin: 14px 0 18px;
    width: 118px;
  }

  .zc-material-universe .lead {
    font-size: 13px;
    line-height: 1.58;
    margin-bottom: 20px;
    max-width: 224px;
  }

  .zc-material-universe .button--primary {
    min-width: 160px;
  }

  .zc-material-universe .card {
    width: 100%;
    max-width: 230px;
    margin-top: 14px;
  }

  .zc-material-universe .universe {
    /* 和 .module 同步收高，避免右侧画布比实际星轨内容多留一截空壳。 */
    min-height: clamp(626px, 59vw, 650px);
  }

  /* 窄桌面断点把 08 / 04 / 06 三颗最容易贴边的行星向圆心收一档。 */
  .zc-material-universe .constellation {
    --orbit-center-x: 356px;
    --orbit-center-y: 338px;
    --planet-radius: 210px;
    transform: translateX(0) translateY(2px) scale(0.93);
    transform-origin: center top;
  }

  .zc-material-universe .orbit--outer { width: 552px; height: 552px; }
  .zc-material-universe .orbit--middle { width: 464px; height: 464px; }
  .zc-material-universe .orbit--inner { width: 348px; height: 348px; }

  .zc-material-universe .glow {
    width: 612px;
    height: 612px;
  }

  .zc-material-universe .brand-core {
    width: 236px;
    height: 236px;
  }

  .zc-material-universe .brand-core__mark {
    font-size: 86px;
  }

  .zc-material-universe .brand-core__name {
    font-size: 26px;
  }

  .zc-material-universe .rail {
    right: 8px;
    top: 280px;
  }

  .zc-material-universe .planet__name {
    font-size: 11.4px;
  }

  .zc-material-universe .planet__tags {
    font-size: 9.2px;
  }

  .zc-material-universe .planet--04 {
    --planet-size: 94px;
    width: 198px;
    padding-left: 102px;
    min-height: 112px;
  }

  .zc-material-universe .planet--04 .planet__media-wrap {
    top: 4px;
  }

  .zc-material-universe .planet--04 .planet__index {
    margin-top: 22px;
  }

  .zc-material-universe .planet--04 .planet__name {
    max-width: 92px;
    font-size: 10.8px;
    line-height: 1.12;
  }

  .zc-material-universe .planet--04 .planet__tags {
    max-width: 96px;
    font-size: 8.7px;
    line-height: 1.18;
  }

  .zc-material-universe .planet--05 {
    --anchor-offset-x: 48px;
    --anchor-offset-y: 52px;
    width: 142px;
  }

  .zc-material-universe .planet--05 .planet__index {
    margin-top: 2px;
  }

  .zc-material-universe .planet--06 {
    --planet-size: 108px;
    --anchor-offset-x: 82px;
    --anchor-offset-y: 62px;
    width: 152px;
  }

  .zc-material-universe .planet--06 .planet__index {
    margin-top: 2px;
  }

  .zc-material-universe .planet--07 {
    --planet-size: 100px;
    --anchor-offset-x: 82px;
    --anchor-offset-y: 54px;
    width: 144px;
  }

  .zc-material-universe .planet--07 .planet__index {
    margin-top: 2px;
  }

  .zc-material-universe .planet--08 {
    --planet-size: 84px;
    width: 224px;
    padding-right: 82px;
    min-height: 102px;
  }

  .zc-material-universe .planet--08 .planet__index {
    margin-top: 12px;
  }

  .zc-material-universe .planet--08 .planet__name {
    max-width: 118px;
    font-size: 10.2px;
    line-height: 1.12;
  }

  .zc-material-universe .planet--08 .planet__tags {
    max-width: 120px;
    font-size: 8.5px;
    line-height: 1.18;
  }

  .zc-material-universe .detail-layout {
    grid-template-columns: 114px minmax(0, 0.90fr) minmax(272px, 0.98fr) minmax(180px, 0.64fr);
    min-height: 612px;
  }

  .zc-material-universe .detail-sidebar {
    padding: 24px 12px 16px;
  }

  .zc-material-universe .detail-nav__item {
    grid-template-columns: 22px 1fr;
    gap: 8px;
    padding: 8px 6px;
  }

  .zc-material-universe .detail-nav__thumb {
    width: 22px;
    height: 22px;
  }

  .zc-material-universe .detail-nav__label {
    font-size: 8px;
  }

  .zc-material-universe .detail-stage {
    padding: 24px 12px 20px 10px;
  }

  .zc-material-universe .detail-stage::before {
    width: 414px;
    height: 414px;
  }

  .zc-material-universe .detail-stage::after {
    width: 462px;
    height: 462px;
  }

  .zc-material-universe .detail-sphere {
    width: 288px;
    height: 288px;
  }

  .zc-material-universe .detail-story {
    padding: 30px 28px 22px;
    gap: 18px;
  }

  .zc-material-universe .detail-story__title {
    font-size: 44px;
  }

  .zc-material-universe .detail-story__lead {
    font-size: 15.5px;
    max-width: 292px;
  }

  .zc-material-universe .detail-actions {
    gap: 12px;
    margin-top: 8px;
  }

  .zc-material-universe .detail-action {
    padding: 12px 10px;
  }

  /* 让 CTA 区与 Best Match 之间的过渡更从容，但不要把故事区整体拉散。 */
  .zc-material-universe .detail-story__section-title,
  .zc-material-universe .detail-products__title {
    margin: 14px 0 4px;
  }

  .zc-material-universe .match-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .zc-material-universe .detail-products {
    padding: 30px 14px 18px;
  }

  .zc-material-universe .product-card {
    grid-template-columns: 76px 1fr;
    gap: 8px;
    padding: 10px 10px 10px 8px;
  }

  .zc-material-universe .product-card__thumb {
    width: 76px;
    height: 76px;
  }

  .zc-material-universe .product-card__name {
    font-size: 12.6px;
  }

  .zc-material-universe .detail-shell {
    margin-top: 14px;
  }
}

@media (max-width: 1180px) and (min-width: 980px) {
  /* 980-1180 是最容易在 Trae/Chrome 之间出现“看着没撞，但整体偏松”的区间。
     这里单独把画布和 rail 再收一档，让右侧导航别漂得太远。 */
  .zc-material-universe .module {
    min-height: clamp(600px, 55.5vw, 620px);
  }

  .zc-material-universe .universe {
    min-height: clamp(600px, 55.5vw, 620px);
  }

  .zc-material-universe .constellation {
    transform: translateX(0) translateY(4px) scale(0.915);
  }

  .zc-material-universe .detail-layout {
    min-height: 584px;
    padding-top: 0;
  }

  .zc-material-universe .detail-shell {
    margin-top: 0;
    border-top: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  .zc-material-universe .detail-shell::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -50px;
    bottom: auto;
    height: 50px;
    background: var(--bg-top);
    pointer-events: none;
  }

  .zc-material-universe .detail-shell::after {
    display: block;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: auto;
    background: rgba(245, 243, 249, 0.96);
    box-shadow: none;
    pointer-events: none;
  }

  .zc-material-universe .detail-back {
    font-size: 8px;
    line-height: 1.24;
  }

  /* 三列首行必须共用同一条起跑线，否则会出现横向断层感。 */
  .zc-material-universe .detail-sidebar {
    padding-top: 14px;
  }

  .zc-material-universe .detail-story {
    padding-top: 12px;
    padding-right: 26px;
    padding-bottom: 22px;
    padding-left: 26px;
    gap: 8px;
  }

  .zc-material-universe .detail-products {
    padding-top: 12px;
    padding-right: 12px;
    padding-bottom: 18px;
    padding-left: 12px;
    gap: 8px;
  }

  .zc-material-universe .detail-stage {
    padding-top: 12px;
  }

  .zc-material-universe .detail-story__eyebrow,
  .zc-material-universe .detail-products__title {
    margin-top: 0;
  }

  .zc-material-universe .detail-story__eyebrow {
    line-height: 1;
  }

  .zc-material-universe .detail-story__title {
    margin-top: -6px;
  }

  .zc-material-universe .rail {
    right: 4px;
    top: 280px;
  }

  .zc-material-universe .rail__item {
    grid-template-columns: auto 14px;
    gap: 5px;
    font-size: 9px;
  }

  .zc-material-universe .rail__line {
    width: 14px;
  }

  .zc-material-universe .rail__item.is-active .rail__line {
    width: 18px;
  }

  .zc-material-universe .planet--04 {
    width: 182px;
    padding-left: 94px;
    min-height: 104px;
  }

  .zc-material-universe .planet--04 .planet__index {
    margin-top: 20px;
  }

  .zc-material-universe .planet--04 .planet__name {
    max-width: 86px;
    font-size: 10.2px;
    line-height: 1.12;
  }

  .zc-material-universe .planet--04 .planet__tags {
    max-width: 88px;
    font-size: 8.1px;
    line-height: 1.18;
  }
}

@media (max-width: 1024px) {
  .zc-material-universe .module,
  .zc-material-universe .detail-layout {
    grid-template-columns: 1fr;
  }

  .zc-material-universe .copy {
    padding-top: 72px;
    max-width: none;
    margin-left: 0;
  }

  .zc-material-universe .universe {
    min-height: 760px;
    margin-right: 0;
  }

  .zc-material-universe .constellation {
    transform: translateX(0) translateY(0) scale(1);
  }

  .zc-material-universe .rail {
    right: 0;
    top: auto;
    bottom: 36px;
  }
}

/* 与站点的折叠菜单保持同一断点。768–1024px 的竖屏设备也采用
   单列阅读流，避免桌面四栏详情区在移动导航下被横向截断。 */
@media (max-width: 1024px) {
  .zc-material-universe .page {
    min-height: auto;
    padding: 0 14px 36px;
  }

  .zc-material-universe .module {
    min-height: auto;
    gap: 22px;
    padding-top: 10px;
  }

  .zc-material-universe .copy {
    /* iPhone 上站点 header 占高明显，首屏文案需要额外顶部留白，
       否则 eyebrow 和标题会被压得像贴在 logo 底下。 */
    padding-top: 88px;
  }

  .zc-material-universe .eyebrow {
    margin-bottom: 12px;
    font-size: 11px;
  }

  .zc-material-universe .title {
    font-size: 42px;
    line-height: 0.98;
  }

  .zc-material-universe .lead {
    max-width: none;
    margin-bottom: 18px;
    font-size: 13px;
    line-height: 1.58;
  }

  .zc-material-universe .button {
    width: 100%;
    min-height: 46px;
  }

  .zc-material-universe .button--secondary {
    width: 100%;
  }

  .zc-material-universe .card {
    width: 100%;
    max-width: none;
    margin-top: 20px;
    border-radius: 16px;
  }

  /* 中小屏让宇宙画布继续保留完整圆周，同时把整体压回安全可视区。 */
  .zc-material-universe .universe {
    min-height: 604px;
  }

  .zc-material-universe .constellation {
    --orbit-center-x: 50%;
    --orbit-center-y: 248px;
    --planet-radius: 160px;
    transform: translateX(0) translateY(0) scale(0.78);
    transform-origin: center top;
  }

  .zc-material-universe .orbit--outer { width: 432px; height: 432px; }
  .zc-material-universe .orbit--middle { width: 360px; height: 360px; }
  .zc-material-universe .orbit--inner { width: 274px; height: 274px; }

  .zc-material-universe .glow {
    width: 500px;
    height: 500px;
  }

  .zc-material-universe .brand-core {
    width: 190px;
    height: 190px;
  }

  .zc-material-universe .brand-core__mark {
    font-size: 66px;
  }

  .zc-material-universe .brand-core__name {
    font-size: 20px;
    letter-spacing: 0.2em;
  }

  .zc-material-universe .planet__index {
    opacity: 0;
    pointer-events: none;
  }

  .zc-material-universe .planet__name,
  .zc-material-universe .planet__tags {
    opacity: 0;
    pointer-events: none;
  }

  .zc-material-universe .rail {
    left: 0;
    right: 0;
    bottom: 10px;
    top: auto;
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: none;
    padding: 4px 2px 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    transform: none;
    -webkit-overflow-scrolling: touch;
  }

  .zc-material-universe .rail::before {
    display: none;
  }

  .zc-material-universe .rail::-webkit-scrollbar {
    display: none;
  }

  .zc-material-universe .rail__item {
    flex: 0 0 132px;
    min-width: 132px;
    min-height: 48px;
    padding: 8px 10px;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 8px;
    justify-items: start;
    text-align: left;
    border: 1px solid rgba(119, 113, 188, 0.14);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.56);
    box-shadow: 0 6px 16px rgba(92, 87, 140, 0.05);
    scroll-snap-align: center;
    transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  }

  .zc-material-universe .rail__number {
    align-self: center;
    color: #7771bc;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
  }

  .zc-material-universe .rail__label {
    display: block;
    align-self: center;
    overflow: hidden;
    color: #393b50;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.14;
    text-transform: uppercase;
  }

  .zc-material-universe .rail__line {
    display: none;
  }

  .zc-material-universe .rail__item.is-active {
    border-color: rgba(108, 101, 187, 0.52);
    background: rgba(232, 229, 250, 0.82);
    box-shadow: 0 8px 20px rgba(100, 93, 174, 0.14);
  }

  .zc-material-universe .rail__item.is-active .rail__number,
  .zc-material-universe .rail__item.is-active .rail__label {
    color: #5e58ad;
  }

  .zc-material-universe .mobile-selection {
    display: block;
    margin: -2px 0 2px;
    padding: 18px 18px 17px;
    border: 1px solid rgba(119, 113, 188, 0.12);
    border-radius: 18px;
    background:
      radial-gradient(circle at 86% 12%, rgba(209, 205, 243, 0.42), transparent 34%),
      rgba(255, 255, 255, 0.62);
    box-shadow: 0 16px 34px rgba(92, 87, 140, 0.07);
  }

  .zc-material-universe .mobile-selection__eyebrow {
    color: #7771bc;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }

  .zc-material-universe .mobile-selection__main {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    margin-top: 8px;
  }

  .zc-material-universe .mobile-selection__index {
    color: #7771bc;
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  .zc-material-universe .mobile-selection__name {
    margin: 0;
    color: #242638;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 29px;
    font-weight: 600;
    line-height: 0.95;
  }

  .zc-material-universe .mobile-selection__tags {
    margin: 5px 0 0;
    color: #5c6077;
    font-size: 13px;
    line-height: 1.35;
  }

  .zc-material-universe .detail-shell {
    margin-top: 22px;
    border-radius: 24px;
  }

  .zc-material-universe .detail-layout {
    /* 手机端不要再沿用桌面四列语义，明确改成单列阅读流。 */
    grid-template-columns: 1fr;
    min-height: auto;
  }

  /* Grid 子项默认的最小内容宽度会继承桌面卡片的内在尺寸；在 768–1024px
     设备上会把单列轨道撑回桌面宽度并被父层裁切。此处只允许该模块的移动
     阅读流收缩至视口宽度。 */
  .zc-material-universe .detail-layout > *,
  .zc-material-universe .detail-story,
  .zc-material-universe .detail-stage,
  .zc-material-universe .detail-products,
  .zc-material-universe .detail-actions,
  .zc-material-universe .match-grid,
  .zc-material-universe .match-card,
  .zc-material-universe #detail-products-list,
  .zc-material-universe .product-card {
    min-width: 0;
  }

  .zc-material-universe .detail-sidebar,
  .zc-material-universe .detail-story,
  .zc-material-universe .detail-products {
    border-right: 0;
  }

  .zc-material-universe .detail-sidebar { order: 1; }
  .zc-material-universe .detail-story { order: 2; }
  .zc-material-universe .detail-stage { order: 3; }
  .zc-material-universe .detail-products { order: 4; }

  /* 把左侧材质列表改成横向滚动条，避免移动端出现一整列很高的导航。 */
  .zc-material-universe .detail-sidebar {
    padding: 16px 14px 10px;
    border-bottom: 1px solid rgba(125, 119, 191, 0.08);
  }

  .zc-material-universe .detail-back {
    margin-bottom: 8px;
  }

  .zc-material-universe .detail-nav {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding: 2px 2px 6px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .zc-material-universe .detail-nav::-webkit-scrollbar {
    display: none;
  }

  .zc-material-universe .detail-nav__item {
    min-width: 124px;
    padding: 10px 12px;
    border-radius: 999px;
    grid-template-columns: 24px 1fr;
    gap: 8px;
    scroll-snap-align: start;
  }

  .zc-material-universe .detail-nav__item.is-active {
    box-shadow: 0 8px 18px rgba(97, 92, 145, 0.10);
  }

  .zc-material-universe .detail-nav__thumb {
    width: 24px;
    height: 24px;
  }

  .zc-material-universe .detail-nav__label {
    font-size: 9px;
    line-height: 1.16;
  }

  .zc-material-universe .detail-stage {
    min-height: 272px;
    padding: 20px 12px 12px;
    border-top: 1px solid rgba(125, 119, 191, 0.08);
    background:
      radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.98), rgba(247, 245, 250, 0.78) 58%, rgba(241, 238, 247, 0.46) 100%);
  }

  .zc-material-universe .detail-stage::before {
    width: 312px;
    height: 312px;
  }

  .zc-material-universe .detail-stage::after {
    width: 352px;
    height: 352px;
  }

  .zc-material-universe .detail-sphere {
    width: 224px;
    height: 224px;
  }

  .zc-material-universe .detail-story {
    padding: 16px 16px 14px;
    gap: 12px;
  }

  .zc-material-universe .detail-story__title {
    font-size: 36px;
    min-height: auto;
  }

  .zc-material-universe .detail-story__lead {
    max-width: none;
    font-size: 15px;
    line-height: 1.42;
  }

  .zc-material-universe .detail-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .zc-material-universe .detail-action {
    padding: 10px 8px;
    border-radius: 14px;
  }

  .zc-material-universe .detail-action__label {
    font-size: 9px;
  }

  .zc-material-universe .detail-action__meta {
    font-size: 7px;
    line-height: 1.25;
  }

  .zc-material-universe .match-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .zc-material-universe .match-card {
    grid-template-columns: 84px 1fr;
    grid-template-rows: none;
    align-items: center;
    gap: 10px;
    padding: 10px;
  }

  .zc-material-universe .match-card__portrait {
    grid-column: 1;
    grid-row: 1 / span 2;
    height: 92px;
  }

  .zc-material-universe .match-card__role {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
    height: auto;
    min-height: 0;
  }

  .zc-material-universe .match-card__trait {
    grid-column: 2;
    grid-row: 2;
    height: auto;
    min-height: 0;
    margin-top: 2px;
  }

  .zc-material-universe .detail-cta {
    width: 100%;
  }

  .zc-material-universe .detail-products {
    padding: 16px 16px 20px;
    border-top: 1px solid rgba(125, 119, 191, 0.08);
  }

  .zc-material-universe #detail-products-list {
    gap: 12px;
  }

  .zc-material-universe .product-card__name {
    max-width: none;
  }
}

/* 真正的手机阅读节奏：压缩行星画布，顶部材质条负责选择，
   详情区不再重复一份横向材质导航。 */
@media (max-width: 767px) {
  .zc-material-universe .copy {
    /* 站点页头固定在顶部；标题必须从页头安全区之后开始。 */
    padding-top: 132px;
  }

  .zc-material-universe .universe {
    min-height: 448px;
  }

  .zc-material-universe .constellation {
    --orbit-center-y: 194px;
    --planet-radius: 132px;
    transform: translateX(0) translateY(0) scale(0.64);
  }

  .zc-material-universe .rail {
    bottom: 0;
  }

  .zc-material-universe .detail-sidebar,
  .zc-material-universe .mobile-selection,
  .zc-material-universe .detail-stage {
    display: none;
  }

  .zc-material-universe .detail-story {
    /* 选中的材质已在上方 rail 中明确，不再插入重复摘要卡。 */
    padding-top: 24px;
  }

  .zc-material-universe .match-card { padding: 8px; }

  .zc-material-universe .match-card__portrait { height: 76px; }
}

@media (max-width: 560px) {
  .zc-material-universe .copy {
    padding-top: 124px;
  }

  .zc-material-universe .page {
    padding-inline: 12px;
  }

  .zc-material-universe .title {
    font-size: 32px;
    line-height: 1.02;
  }

  .zc-material-universe .lead {
    font-size: 12.5px;
    margin-bottom: 16px;
  }

  .zc-material-universe .card {
    grid-template-columns: 48px 1fr;
    gap: 12px;
    padding: 12px;
  }

  .zc-material-universe .card__visual {
    width: 40px;
    height: 54px;
  }

  .zc-material-universe .universe { min-height: 414px; }

  .zc-material-universe .constellation {
    --orbit-center-y: 184px;
    --planet-radius: 122px;
    transform: translateX(0) translateY(0) scale(0.60);
  }

  .zc-material-universe .brand-core {
    width: 170px;
    height: 170px;
  }

  .zc-material-universe .brand-core__mark {
    font-size: 58px;
  }

  .zc-material-universe .brand-core__name {
    font-size: 18px;
    letter-spacing: 0.18em;
  }

  .zc-material-universe .planet__index {
    opacity: 0;
  }

  .zc-material-universe .planet__name {
    opacity: 0;
  }

  .zc-material-universe .planet__tags {
    opacity: 0;
  }

  .zc-material-universe .rail__item {
    flex-basis: 124px;
    min-width: 124px;
  }

  .zc-material-universe .mobile-selection {
    padding: 16px;
  }

  .zc-material-universe .mobile-selection__name {
    font-size: 27px;
  }

  .zc-material-universe .detail-stage {
    min-height: 248px;
  }

  .zc-material-universe .detail-sphere {
    width: 204px;
    height: 204px;
  }

  .zc-material-universe .detail-story__title {
    font-size: 31px;
  }

  .zc-material-universe .detail-actions {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .zc-material-universe .detail-action {
    grid-template-columns: 28px 1fr;
    justify-items: start;
    align-items: center;
    text-align: left;
    gap: 8px 10px;
  }

  .zc-material-universe .detail-action__icon {
    grid-row: span 2;
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .zc-material-universe .detail-action__meta {
    margin-top: 0;
  }

  .zc-material-universe .product-card {
    grid-template-columns: 72px 1fr;
  }

  .zc-material-universe .product-card__thumb {
    width: 72px;
    height: 72px;
  }
}

@media (max-width: 420px) {
  .zc-material-universe .page {
    padding-inline: 10px;
  }

  .zc-material-universe .copy { padding-top: 118px; }

  .zc-material-universe .title {
    font-size: 29px;
  }

  .zc-material-universe .universe { min-height: 392px; }

  .zc-material-universe .constellation {
    --orbit-center-y: 174px;
    --planet-radius: 114px;
    transform: translateX(0) translateY(0) scale(0.56);
  }

  .zc-material-universe .rail {
    bottom: 6px;
  }

  .zc-material-universe .rail__item {
    flex-basis: 118px;
    min-width: 118px;
    min-height: 46px;
    padding: 7px 8px;
  }

  .zc-material-universe .rail__label {
    font-size: 10px;
  }

  .zc-material-universe .mobile-selection__name {
    font-size: 25px;
  }

  .zc-material-universe .mobile-selection__tags {
    font-size: 12px;
  }

  .zc-material-universe .detail-shell {
    margin-top: 18px;
    border-radius: 20px;
  }

  .zc-material-universe .detail-nav__item {
    min-width: 116px;
    padding: 9px 10px;
  }

  .zc-material-universe .detail-stage {
    min-height: 228px;
  }

  .zc-material-universe .detail-sphere {
    width: 188px;
    height: 188px;
  }

  .zc-material-universe .detail-story {
    padding: 14px 14px 12px;
  }

  .zc-material-universe .detail-story__title {
    font-size: 28px;
  }

  .zc-material-universe .detail-products {
    padding: 14px 14px 18px;
  }
}


/* Desktop: keep the three lower labels close to their planets and inside the
   clipped universe card. Mobile owns its label placement at <= 1024px. */
@media (min-width: 1025px) {
  .zc-material-universe .planet--05 .planet__index,
  .zc-material-universe .planet--07 .planet__index {
    margin-top: -12px;
  }

  .zc-material-universe .planet--06 .planet__index {
    margin-top: -62px;
  }
}


/* Desktop: balance the wide universe artwork and keep planet labels crisp. */
@media (min-width: 1025px) {
  .zc-material-universe .planet__index,
  .zc-material-universe .planet__name,
  .zc-material-universe .planet__tags {
    text-shadow: none;
  }
}

@media (min-width: 1321px) {
  .zc-material-universe .universe {
    top: -32px;
  }
}

/* Mobile: scale the complete circular universe artwork to exactly 90% of the
   viewport width after the inherited 0.92 mobile parent scale. The first
   transform is a conservative fallback for older browsers; modern Safari
   resolves the unit division to a responsive number. */
@media (max-width: 767px) {
  .zc-material-universe .universe {
    min-height: calc(90vw + 160px);
  }

  .zc-material-universe .constellation {
    transform: translateX(0) translateY(0) scale(0.89);
    transform: translateX(0) translateY(0) scale(calc(90vw / 397.44px));
  }
}