* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--paper);
  background:
    radial-gradient(90% 74% at 10% -4%, rgba(181, 136, 79, 0.12), transparent 58%),
    radial-gradient(85% 70% at 86% 0%, rgba(79, 143, 151, 0.13), transparent 60%),
    linear-gradient(165deg, var(--bg-0), var(--bg-2));
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

button {
  font: inherit;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.global-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 max(3vw, 1rem);
  backdrop-filter: blur(16px);
  background: rgba(8, 12, 16, 0.86);
  border-bottom: 1px solid var(--line);
}

.global-nav__brand {
  display: grid;
  gap: 0.08rem;
}

.global-nav__links {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.project-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.64rem;
  min-width: max-content;
  color: rgba(247, 238, 220, 0.96);
}

.project-logo__mark {
  width: clamp(3.15rem, 4.7vw, 4.8rem);
  aspect-ratio: 1;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  overflow: visible;
}

.project-logo__mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 7px 14px rgba(0, 0, 0, 0.22))
    drop-shadow(0 0 8px rgba(207, 170, 108, 0.12));
}

.project-logo__wordmark {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.project-logo__wordmark strong {
  display: block;
  font-family: "STKaiti", "Kaiti SC", "KaiTi", "Noto Serif SC", serif;
  font-size: clamp(1.24rem, 1.65vw, 1.68rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.12em;
  color: transparent;
  background: linear-gradient(100deg, #f5ead4 0%, #cfaa6c 42%, #8fc0c2 56%, #f2e2bf 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 7px 18px rgba(0, 0, 0, 0.28);
  white-space: nowrap;
}

.project-logo__wordmark small {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.42rem;
  color: rgba(221, 190, 136, 0.86);
  font-size: 0.66rem;
  line-height: 1;
  letter-spacing: 0.28em;
  white-space: nowrap;
}

.project-logo__wordmark small::before,
.project-logo__wordmark small::after {
  content: "";
  width: 1.25rem;
  height: 1px;
  flex: 0 0 auto;
  background: linear-gradient(90deg, transparent, rgba(207, 170, 108, 0.76));
}

.project-logo__wordmark small::after {
  background: linear-gradient(90deg, rgba(207, 170, 108, 0.76), transparent);
}

.global-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.42rem 0.82rem;
  font-size: 0.84rem;
  transition: all var(--dur-fast) var(--easing);
}

.global-nav__link:hover,
.global-nav__link.is-active {
  border-color: var(--line-strong);
  background: rgba(239, 228, 209, 0.08);
}

.app-main {
  min-height: calc(100vh - var(--nav-h));
}

.site-footer {
  border-top: 1px solid var(--line);
  padding: 0.9rem 1rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--paper-soft);
}

.section {
  width: var(--container);
  margin: 0 auto;
  padding: var(--space-5) 0;
}

.section-title {
  display: grid;
  gap: 0.7rem;
  max-width: 66rem;
}

.section-title--center {
  text-align: center;
  margin: 0 auto;
}

.section-title__eyebrow {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.75rem;
  color: rgba(239, 228, 209, 0.72);
}

.section-title__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xxl);
  line-height: 1.2;
}

.section-title__subtitle {
  margin: 0;
  color: var(--paper-soft);
  font-size: clamp(0.98rem, 1.4vw, 1.16rem);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: all var(--dur-fast) var(--easing);
  letter-spacing: 0.04em;
}

.btn--md {
  padding: 0.66rem 1.3rem;
  font-size: 0.9rem;
}

.btn--sm {
  padding: 0.45rem 1rem;
  font-size: 0.8rem;
}

.btn--primary {
  background: linear-gradient(145deg, #b68950, #7f623d);
  box-shadow: var(--shadow-soft);
}

.btn--secondary {
  border-color: var(--line-strong);
  background: rgba(239, 228, 209, 0.08);
}

.btn--ghost {
  border-color: var(--line);
  background: rgba(239, 228, 209, 0.03);
}

.btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

.bg-decoration {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.bg-decoration__mist {
  position: absolute;
  width: min(56vw, 660px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(48px);
  opacity: 0.24;
}

.bg-decoration__mist--a {
  left: -12%;
  top: -14%;
  background: rgba(181, 136, 79, 0.33);
}

.bg-decoration__mist--b {
  right: -14%;
  top: -6%;
  background: rgba(79, 143, 151, 0.34);
}

.bg-decoration__grain {
  position: absolute;
  inset: 0;
  opacity: 0.06;
  background-image: radial-gradient(circle at 2px 2px, #fff 1px, transparent 0);
  background-size: 10px 10px;
}

.bg-decoration__trace {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -26%;
  height: 62%;
  border-top: 1px solid rgba(239, 228, 209, 0.22);
  border-radius: 70% 30% 0 0;
}

.page-home-map {
  position: relative;
  min-height: calc(100vh - var(--nav-h));
}

.home-map-head {
  position: relative;
  z-index: 1;
  padding-top: 1.6rem;
  padding-bottom: 0.55rem;
}

.home-stage-title {
  width: min(980px, 96%);
  display: grid;
  gap: 0.52rem;
}

.home-stage-title__eyebrow {
  margin: 0;
  font-size: 0.76rem;
  letter-spacing: 0.26em;
  color: rgba(239, 228, 209, 0.72);
  text-transform: uppercase;
}

.home-stage-title h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.05rem, 4.2vw, 3.55rem);
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

.home-stage-title__subtitle {
  margin: 0;
  font-size: clamp(1.02rem, 1.55vw, 1.2rem);
  color: rgba(239, 228, 209, 0.9);
  letter-spacing: 0.08em;
}

.home-stage-title__line {
  margin: 0;
  max-width: 58rem;
  color: var(--paper-soft);
  font-size: 0.92rem;
  line-height: 1.55;
}

.home-map-main {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1.1rem;
  grid-template-columns: minmax(0, 1.9fr) minmax(320px, 1fr);
  align-items: start;
  padding-top: 0.25rem;
}

.home-map-stack {
  display: grid;
  gap: 0.65rem;
}

.china-map {
  --active-accent: var(--accent-main);
  position: relative;
  min-height: min(74vh, 700px);
  border: 1px solid rgba(239, 228, 209, 0.24);
  border-radius: calc(var(--radius-lg) + 0.22rem);
  overflow: hidden;
  box-shadow:
    0 28px 78px rgba(2, 8, 13, 0.55),
    inset 0 0 0 1px rgba(248, 237, 214, 0.08);
  background:
    radial-gradient(130% 110% at 10% 92%, rgba(201, 138, 66, 0.21), transparent 64%),
    radial-gradient(98% 80% at 86% 6%, rgba(89, 153, 162, 0.24), transparent 62%),
    radial-gradient(90% 60% at 48% 50%, rgba(255, 240, 210, 0.05), transparent 72%),
    linear-gradient(160deg, rgba(11, 19, 26, 0.97), rgba(8, 14, 20, 0.98));
  transform: translate(var(--glow-x, 0), var(--glow-y, 0));
  transition: transform 260ms ease-out;
}

.china-map::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 8% 14%, rgba(255, 240, 208, 0.12), transparent 38%),
    radial-gradient(circle at 88% 78%, rgba(255, 226, 180, 0.09), transparent 44%);
  pointer-events: none;
  z-index: 0;
}

.china-map__frame {
  position: absolute;
  inset: 12px;
  border-radius: calc(var(--radius-lg) - 0.1rem);
  border: 1px solid rgba(239, 228, 209, 0.23);
  background:
    linear-gradient(135deg, rgba(171, 136, 80, 0.24) 0 14px, transparent 14px) top left / 36px 36px no-repeat,
    linear-gradient(-135deg, rgba(171, 136, 80, 0.24) 0 14px, transparent 14px) top right / 36px 36px no-repeat,
    linear-gradient(45deg, rgba(171, 136, 80, 0.24) 0 14px, transparent 14px) bottom left / 36px 36px no-repeat,
    linear-gradient(-45deg, rgba(171, 136, 80, 0.24) 0 14px, transparent 14px) bottom right / 36px 36px no-repeat;
  pointer-events: none;
  z-index: 1;
}

.china-map__grain {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 2px 2px, rgba(249, 236, 209, 0.22) 1px, transparent 0);
  background-size: 12px 12px;
  opacity: 0.12;
  pointer-events: none;
  z-index: 1;
}

.china-map__terrain {
  position: absolute;
  inset: 4.5%;
  width: 91%;
  height: 91%;
  z-index: 2;
  filter: drop-shadow(0 20px 35px rgba(0, 0, 0, 0.33));
}

.china-map__shadow {
  fill: rgba(30, 19, 11, 0.42);
  transform: translate(10px, 16px) scale(0.99);
  filter: url(#mapShadowBlur);
}

.china-map__plate {
  fill: url(#mapPlateGradient);
  stroke: rgba(255, 232, 192, 0.38);
  stroke-width: 2.2;
}

.china-map__plate--inner {
  fill: rgba(58, 73, 83, 0.32);
  stroke: rgba(245, 220, 179, 0.18);
  stroke-width: 1.6;
  transform: translate(8px, 10px);
}

.china-map__coast {
  fill: none;
  stroke: rgba(250, 221, 177, 0.36);
  stroke-width: 2;
  stroke-linecap: round;
}

.china-map__ridge {
  fill: none;
  stroke: url(#mapRidgeGradient);
  stroke-width: 2.2;
  stroke-linecap: round;
  opacity: 0.86;
}

.china-map__river {
  fill: none;
  stroke: rgba(125, 191, 215, 0.44);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 2 8;
}

.china-map__river--minor {
  stroke-width: 1.8;
  opacity: 0.58;
}

.china-map__route {
  fill: none;
  stroke: rgba(245, 211, 155, 0.62);
  stroke-width: 1.7;
  stroke-dasharray: 8 8;
}

.china-map__route--alt {
  stroke: rgba(145, 206, 226, 0.46);
  stroke-dasharray: 5 10;
}

.china-map__island {
  fill: rgba(214, 179, 126, 0.42);
  stroke: rgba(255, 229, 188, 0.35);
  stroke-width: 1.2;
}

.region-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.region-glow__mist {
  position: absolute;
  width: min(46vw, 500px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(52px);
  opacity: 0.24;
}

.region-glow__mist--a {
  left: -14%;
  top: -18%;
  background: rgba(188, 143, 83, 0.44);
}

.region-glow__mist--b {
  right: -16%;
  bottom: -20%;
  background: rgba(88, 141, 150, 0.42);
}

.region-glow__spot {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  filter: blur(46px);
  opacity: 0.42;
}

.region-glow__spot--south {
  left: 66.5%;
  top: 67%;
  background: rgba(197, 128, 63, 0.42);
}

.region-glow__spot--coast {
  left: 63.5%;
  top: 53%;
  background: rgba(79, 143, 151, 0.48);
}

.region-glow__spot--north {
  left: 52.4%;
  top: 27.5%;
  background: rgba(138, 151, 123, 0.46);
}

.region-glow__flow {
  position: absolute;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(239, 228, 209, 0.48), transparent);
  opacity: 0.44;
}

.region-glow__flow--one {
  left: 21%;
  right: 14%;
  top: 46%;
}

.region-glow__flow--two {
  left: 26%;
  right: 18%;
  top: 62%;
  opacity: 0.3;
}

.china-map__markers {
  position: absolute;
  inset: 6.4% 4.8% 7.2%;
  z-index: 4;
  overflow: hidden;
}

.bridge-marker {
  position: absolute;
  left: var(--marker-x);
  top: var(--marker-y);
  --marker-line: 82px;
  --marker-card-y: 0px;
  width: 0;
  height: 0;
  background: transparent;
  border: none;
  color: var(--paper);
  cursor: pointer;
  z-index: 2;
  padding: 0;
  overflow: visible;
}

.bridge-marker__halo,
.bridge-marker__pin,
.bridge-marker__connector {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

.bridge-marker__halo,
.bridge-marker__pin {
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.bridge-marker__halo {
  width: 46px;
  height: 46px;
  background: radial-gradient(circle, var(--marker-glow), transparent 72%);
  opacity: 0.46;
}

.bridge-marker__pin {
  width: 10px;
  height: 10px;
  background: linear-gradient(180deg, rgba(247, 238, 215, 0.98), color-mix(in srgb, var(--marker-accent) 52%, #334251));
  box-shadow:
    0 0 0 2px rgba(13, 20, 26, 0.78),
    0 0 0 4px rgba(239, 228, 209, 0.12);
}

.bridge-marker__connector {
  width: var(--connector-length);
  height: 2px;
  transform-origin: 0 50%;
  transform: translateY(-50%) rotate(var(--connector-angle));
  background: linear-gradient(90deg, rgba(247, 236, 210, 0.92), rgba(247, 236, 210, 0.16));
  box-shadow: 0 0 10px rgba(255, 239, 206, 0.2);
}

.bridge-marker__icon {
  position: absolute;
  left: 0;
  top: 0;
  width: 110px;
  height: 64px;
  transform: translate(var(--icon-tx), var(--icon-ty)) rotate(var(--bridge-tilt));
  transform-origin: 50% 58%;
  transition: transform var(--dur-fast) var(--easing), filter var(--dur-fast) var(--easing);
  pointer-events: none;
}

.bridge-marker__toy-shadow {
  position: absolute;
  left: 22px;
  right: 14px;
  bottom: 10px;
  height: 12px;
  border-radius: 50%;
  background: rgba(8, 12, 16, 0.32);
  filter: blur(5px);
}

.bridge-marker__deck {
  position: absolute;
  left: 18px;
  top: 26px;
  width: 82px;
  height: 11px;
  border-radius: 3px;
  border: 1px solid rgba(240, 228, 202, 0.58);
  background:
    linear-gradient(180deg, rgba(242, 235, 220, 0.88), color-mix(in srgb, var(--marker-accent) 46%, #3b4652) 55%, color-mix(in srgb, var(--marker-accent) 66%, #202833));
  box-shadow:
    inset 0 1px 0 rgba(255, 247, 228, 0.42),
    0 4px 10px rgba(13, 16, 20, 0.28);
}

.bridge-marker__deck--rear {
  top: 22px;
  left: 14px;
  width: 90px;
  height: 6px;
  opacity: 0.34;
  border-color: rgba(244, 233, 211, 0.34);
}

.bridge-marker__arch {
  position: absolute;
  left: 34px;
  top: 31px;
  width: 48px;
  height: 17px;
  border: 2px solid rgba(233, 224, 205, 0.82);
  border-color: rgba(233, 224, 205, 0.82) rgba(233, 224, 205, 0.82) transparent rgba(233, 224, 205, 0.82);
  border-radius: 30px 30px 10px 10px;
  opacity: 0;
}

.bridge-marker__tower {
  position: absolute;
  left: 36px;
  top: 34px;
  width: 9px;
  height: 20px;
  border-radius: 2px;
  border: 1px solid rgba(236, 223, 196, 0.4);
  background: linear-gradient(180deg, rgba(224, 217, 202, 0.86), color-mix(in srgb, var(--marker-accent) 40%, #39424d));
  opacity: 0;
}

.bridge-marker__tower--rear {
  left: 64px;
  top: 33px;
  width: 8px;
  height: 18px;
  opacity: 0;
}

.bridge-marker__pontoon {
  position: absolute;
  left: 32px;
  top: 39px;
  width: 17px;
  height: 8px;
  border-radius: 3px 3px 8px 8px;
  border: 1px solid rgba(239, 225, 199, 0.44);
  background: linear-gradient(180deg, rgba(238, 228, 207, 0.84), color-mix(in srgb, var(--marker-accent) 54%, #37414a));
  opacity: 0;
}

.bridge-marker__pontoon--rear {
  left: 58px;
  top: 40px;
  width: 16px;
  height: 7px;
  opacity: 0;
}

.bridge-marker__spark {
  position: absolute;
  right: 16px;
  top: 16px;
  width: 18px;
  height: 2px;
  border-radius: 50%;
  background: linear-gradient(90deg, rgba(255, 246, 225, 0), rgba(255, 246, 225, 0.58), rgba(255, 246, 225, 0));
  opacity: 0.45;
}

.bridge-marker__label {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(var(--label-tx), var(--label-ty));
  padding: 0.14rem 0.58rem;
  font-size: 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(239, 228, 209, 0.22);
  background: rgba(8, 12, 16, 0.78);
  letter-spacing: 0.03em;
  white-space: nowrap;
  backdrop-filter: blur(4px);
}

.bridge-marker__tooltip {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(var(--tooltip-tx), var(--tooltip-ty));
  min-width: 170px;
  border-radius: 10px;
  border: 1px solid rgba(239, 228, 209, 0.3);
  background: rgba(8, 12, 17, 0.8);
  padding: 0.36rem 0.5rem;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: all var(--dur-fast) var(--easing);
}

.bridge-marker--east .bridge-marker__tooltip {
  transform: translate(var(--tooltip-tx), var(--tooltip-ty));
}

.bridge-marker__tooltip strong {
  display: block;
  font-size: 0.78rem;
  color: rgba(255, 244, 219, 0.95);
}

.bridge-marker__tooltip small {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.68rem;
  color: rgba(239, 228, 209, 0.76);
}

.bridge-marker--dir-nw {
  --connector-angle: -147deg;
  --connector-length: 62px;
  --icon-tx: -122px;
  --icon-ty: -82px;
  --bridge-tilt: -4deg;
  --label-tx: -84px;
  --label-ty: -26px;
  --tooltip-tx: 26px;
  --tooltip-ty: -98px;
}

.bridge-marker--dir-se {
  --connector-angle: 31deg;
  --connector-length: 60px;
  --icon-tx: 20px;
  --icon-ty: 14px;
  --bridge-tilt: 3deg;
  --label-tx: 38px;
  --label-ty: 58px;
  --tooltip-tx: -218px;
  --tooltip-ty: -26px;
}

.bridge-marker--dir-sw {
  --connector-angle: 149deg;
  --connector-length: 64px;
  --icon-tx: -126px;
  --icon-ty: 12px;
  --bridge-tilt: -3deg;
  --label-tx: -88px;
  --label-ty: 58px;
  --tooltip-tx: 24px;
  --tooltip-ty: -22px;
}

.bridge-marker--arch .bridge-marker__arch {
  opacity: 1;
}

.bridge-marker--arch .bridge-marker__deck {
  width: 74px;
  left: 22px;
}

.bridge-marker--beam .bridge-marker__tower,
.bridge-marker--beam .bridge-marker__tower--rear {
  opacity: 1;
}

.bridge-marker--beam .bridge-marker__tower {
  box-shadow:
    18px 0 0 color-mix(in srgb, var(--marker-accent) 40%, #39424d),
    36px 0 0 color-mix(in srgb, var(--marker-accent) 40%, #39424d);
}

.bridge-marker--beam .bridge-marker__arch {
  opacity: 0.86;
  left: 20px;
  top: 36px;
  width: 76px;
  height: 3px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(236, 226, 205, 0.9), rgba(172, 187, 191, 0.62), rgba(236, 226, 205, 0.9));
}

.bridge-marker--beam .bridge-marker__deck {
  width: 88px;
  left: 14px;
}

.bridge-marker--pontoon .bridge-marker__pontoon,
.bridge-marker--pontoon .bridge-marker__pontoon--rear,
.bridge-marker--pontoon .bridge-marker__tower {
  opacity: 1;
}

.bridge-marker--pontoon .bridge-marker__tower {
  left: 52px;
  top: 18px;
  width: 10px;
  height: 16px;
}

.bridge-marker--pontoon .bridge-marker__deck {
  width: 74px;
  left: 22px;
}

.bridge-marker:hover .bridge-marker__icon,
.bridge-marker.is-active .bridge-marker__icon {
  transform: translate(var(--icon-tx), calc(var(--icon-ty) - 3px)) rotate(var(--bridge-tilt)) scale(1.04);
  filter: saturate(1.04) brightness(1.04);
}

.bridge-marker.is-active .bridge-marker__tooltip {
  opacity: 1;
}

.bridge-marker:hover .bridge-marker__connector,
.bridge-marker.is-active .bridge-marker__connector {
  background: linear-gradient(90deg, rgba(247, 236, 210, 0.98), rgba(247, 236, 210, 0.3));
}

.bridge-marker--lingnan .bridge-marker__label {
  border-color: rgba(213, 150, 84, 0.5);
}

.bridge-marker--maritime .bridge-marker__label {
  border-color: rgba(116, 186, 199, 0.5);
}

.bridge-marker--rational .bridge-marker__label {
  border-color: rgba(177, 190, 148, 0.52);
}

.china-map__compass {
  position: absolute;
  right: 18px;
  bottom: 16px;
  width: 44px;
  height: 44px;
  z-index: 4;
  display: grid;
  place-items: center;
  color: rgba(239, 228, 209, 0.82);
}

.china-map__compass-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(239, 228, 209, 0.36);
  box-shadow: inset 0 0 0 1px rgba(239, 228, 209, 0.18);
}

.china-map__compass-axis {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
}

.china-map__legend {
  position: absolute;
  left: 20px;
  bottom: 16px;
  margin: 0;
  font-size: 0.79rem;
  color: rgba(239, 228, 209, 0.85);
  max-width: calc(100% - 120px);
  z-index: 4;
}

.home-map-stage-note {
  margin: 0;
  font-size: 0.82rem;
  color: rgba(239, 228, 209, 0.78);
  padding-left: 0.4rem;
}

.home-map-panel {
  border: 1px solid rgba(239, 228, 209, 0.24);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(95% 120% at 10% 0%, rgba(196, 138, 73, 0.12), transparent 58%),
    radial-gradient(120% 95% at 100% 100%, rgba(92, 148, 160, 0.14), transparent 65%),
    rgba(239, 228, 209, 0.05);
  box-shadow:
    0 18px 42px rgba(4, 8, 12, 0.35),
    inset 0 0 0 1px rgba(248, 237, 214, 0.07);
  padding: 0.9rem;
  display: grid;
  gap: 0.72rem;
  align-content: start;
}

.home-focus-card,
.home-compare-card,
.home-guide-card {
  border: 1px solid rgba(239, 228, 209, 0.22);
  border-radius: var(--radius-md);
  background: rgba(239, 228, 209, 0.05);
  padding: 0.72rem;
}

.home-focus-card__head {
  display: grid;
  gap: 0.16rem;
}

.home-focus-card__meta {
  margin: 0;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: rgba(239, 228, 209, 0.7);
  text-transform: uppercase;
}

.home-focus-card__title {
  margin: 0;
  font-size: 1.44rem;
}

.home-focus-card__subtitle {
  margin: 0;
  color: rgba(239, 228, 209, 0.84);
  font-size: 0.86rem;
}

.home-focus-card__body {
  margin-top: 0.58rem;
}

.home-focus-card__actions {
  margin-top: 0.62rem;
}

.home-focus-card__actions .btn {
  width: 100%;
}

.marker-tooltip {
  border-left: 3px solid var(--tooltip-accent, var(--accent-main));
  border-radius: 10px;
  background: rgba(9, 14, 20, 0.62);
  border: 1px solid rgba(239, 228, 209, 0.2);
  padding: 0.55rem 0.62rem;
  display: grid;
  gap: 0.28rem;
}

.marker-tooltip__hint {
  margin: 0;
  color: rgba(239, 228, 209, 0.76);
}

.marker-tooltip__meta,
.marker-tooltip__line,
.marker-tooltip__summary {
  margin: 0;
  color: rgba(239, 228, 209, 0.82);
  font-size: 0.8rem;
}

.marker-tooltip__line {
  color: rgba(239, 228, 209, 0.72);
  font-size: 0.76rem;
}

.marker-tooltip__title {
  margin: 0.1rem 0 0.14rem;
  font-size: 1.2rem;
}

.marker-tooltip__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
  margin-top: 0.2rem;
}

.marker-tooltip__tags span {
  border: 1px solid rgba(239, 228, 209, 0.28);
  border-radius: 999px;
  padding: 0.12rem 0.42rem;
  font-size: 0.7rem;
  color: rgba(239, 228, 209, 0.84);
}

.home-compare-card h4,
.home-guide-card h4 {
  margin: 0;
  font-size: 0.92rem;
  letter-spacing: 0.08em;
}

.home-compare-list {
  margin-top: 0.5rem;
  display: grid;
  gap: 0.36rem;
}

.home-compare-item {
  border: 1px solid rgba(239, 228, 209, 0.22);
  border-radius: 0.72rem;
  background: rgba(239, 228, 209, 0.04);
  padding: 0.4rem 0.5rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.48rem;
  align-items: center;
  color: var(--paper);
  text-align: left;
  cursor: pointer;
  transition: all var(--dur-fast) var(--easing);
}

.home-compare-item__icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(239, 228, 209, 0.34);
  display: grid;
  place-items: center;
  font-size: 0.76rem;
  background: rgba(239, 228, 209, 0.08);
}

.home-compare-item__main strong,
.home-compare-item__main small {
  display: block;
}

.home-compare-item__main small {
  margin-top: 0.08rem;
  color: rgba(239, 228, 209, 0.72);
  font-size: 0.72rem;
}

.home-compare-item:hover,
.home-compare-item.is-active {
  border-color: rgba(239, 228, 209, 0.44);
  background: rgba(239, 228, 209, 0.12);
}

.home-guide-card {
  display: grid;
  gap: 0.45rem;
}

.home-guide-card p {
  margin: 0;
  color: rgba(239, 228, 209, 0.82);
  font-size: 0.82rem;
  line-height: 1.55;
}

.home-guide-card .btn {
  margin-top: 0.2rem;
  width: fit-content;
}

.page-bridge-overview,
.bridge-layout {
  position: relative;
}

.page-bridge-overview--content {
  isolation: isolate;
  overflow: hidden;
  min-height: calc(100vh - var(--nav-h));
  padding-top: var(--space-4);
  background:
    radial-gradient(90% 58% at 50% -10%, var(--bridge-accent-soft), transparent 68%),
    linear-gradient(155deg, var(--bridge-bg-from, #06101a) 0%, #07101a 48%, var(--bridge-bg-to, #11171b) 100%);
}

.page-bridge-overview--content > .section {
  position: relative;
  z-index: 2;
}

@media (min-width: 1180px) {
  .page-home-map--slice-experiment {
    height: calc(100vh - var(--nav-h));
    overflow-y: auto;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-y: contain;
    scroll-padding-top: 1rem;
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
  }

  .page-home-map--slice-experiment > section {
    position: relative;
    min-height: calc(100vh - var(--nav-h) - 1.8rem);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    opacity: 0.5;
    filter: saturate(0.82) blur(1.2px);
    transform: translateY(5vh) scale(0.968);
    transition:
      opacity 420ms ease,
      transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
      filter 420ms ease;
  }

  .page-home-map--slice-experiment > section.is-before {
    opacity: 0.32;
    filter: saturate(0.74) blur(1.8px);
    transform: translateY(-4vh) scale(0.952);
  }

  .page-home-map--slice-experiment > section.is-current {
    opacity: 1;
    filter: saturate(1.02) blur(0);
    transform: translateY(0) scale(1);
  }

  .page-home-map--slice-experiment > section.is-after {
    opacity: 0.44;
    filter: saturate(0.8) blur(1.4px);
    transform: translateY(4.6vh) scale(0.974);
  }

  .page-home-map--slice-experiment > section::before {
    content: "";
    position: absolute;
    inset: 0.35rem;
    border-radius: calc(var(--radius-lg) + 0.25rem);
    background:
      radial-gradient(circle at 14% 12%, rgba(231, 189, 126, 0.08), transparent 34%),
      radial-gradient(circle at 84% 18%, rgba(130, 184, 198, 0.08), transparent 34%);
    opacity: 0;
    transform: scale(0.985);
    transition:
      opacity 420ms ease,
      transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
  }

  .page-home-map--slice-experiment > section.is-current::before {
    opacity: 1;
    transform: scale(1);
  }

  .page-home-map--slice-experiment > section > * {
    transition:
      transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 420ms ease;
  }

  .page-home-map--slice-experiment > section.is-before > * {
    opacity: 0.72;
    transform: translateY(-0.8rem);
  }

  .page-home-map--slice-experiment > section.is-current > * {
    opacity: 1;
    transform: translateY(0);
  }

  .page-home-map--slice-experiment > section.is-after > * {
    opacity: 0.8;
    transform: translateY(0.8rem);
  }

  .bridge-layout--slice-experiment {
    min-height: calc(100vh - var(--nav-h));
    display: flex;
    flex-direction: column;
  }

  .bridge-layout--slice-experiment .bridge-layout__content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-y: contain;
    scroll-padding-top: 1rem;
    padding-top: 0.3rem;
    padding-bottom: 0.6rem;
  }

  .bridge-layout--slice-experiment .bridge-layout__content > .section,
  .bridge-layout--slice-experiment .bridge-layout__content > .culture-page > .section {
    position: relative;
    min-height: calc(100vh - var(--nav-h) - 14rem);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    padding-top: clamp(1rem, 2vw, 1.7rem);
    padding-bottom: clamp(1rem, 2vw, 1.7rem);
    opacity: 0.48;
    filter: saturate(0.82) blur(1.2px);
    transform: translateY(5.2vh) scale(0.965);
    transition:
      opacity 420ms ease,
      transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
      filter 420ms ease;
  }

  .bridge-layout--slice-experiment .bridge-layout__content > .section.is-before,
  .bridge-layout--slice-experiment .bridge-layout__content > .culture-page > .section.is-before {
    opacity: 0.3;
    filter: saturate(0.72) blur(1.8px);
    transform: translateY(-4vh) scale(0.948);
  }

  .bridge-layout--slice-experiment .bridge-layout__content > .section.is-current,
  .bridge-layout--slice-experiment .bridge-layout__content > .culture-page > .section.is-current {
    opacity: 1;
    filter: saturate(1.02) blur(0);
    transform: translateY(0) scale(1);
  }

  .bridge-layout--slice-experiment .bridge-layout__content > .section.is-after,
  .bridge-layout--slice-experiment .bridge-layout__content > .culture-page > .section.is-after {
    opacity: 0.42;
    filter: saturate(0.8) blur(1.4px);
    transform: translateY(4.6vh) scale(0.972);
  }

  .bridge-layout--slice-experiment .bridge-layout__content > .section::before,
  .bridge-layout--slice-experiment .bridge-layout__content > .culture-page > .section::before {
    content: "";
    position: absolute;
    inset: 0.35rem;
    border-radius: calc(var(--radius-lg) + 0.25rem);
    background:
      radial-gradient(circle at 16% 14%, rgba(231, 189, 126, 0.08), transparent 34%),
      radial-gradient(circle at 84% 18%, rgba(130, 184, 198, 0.08), transparent 34%);
    opacity: 0;
    transform: scale(0.985);
    transition:
      opacity 420ms ease,
      transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
  }

  .bridge-layout--slice-experiment .bridge-layout__content > .section.is-current::before,
  .bridge-layout--slice-experiment .bridge-layout__content > .culture-page > .section.is-current::before {
    opacity: 1;
    transform: scale(1);
  }

  .bridge-layout--slice-experiment .bridge-layout__content > .section > *,
  .bridge-layout--slice-experiment .bridge-layout__content > .culture-page > .section > * {
    transition:
      transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 420ms ease;
  }

  .bridge-layout--slice-experiment .bridge-layout__content > .section.is-before > *,
  .bridge-layout--slice-experiment .bridge-layout__content > .culture-page > .section.is-before > * {
    opacity: 0.7;
    transform: translateY(-0.85rem);
  }

  .bridge-layout--slice-experiment .bridge-layout__content > .section.is-current > *,
  .bridge-layout--slice-experiment .bridge-layout__content > .culture-page > .section.is-current > * {
    opacity: 1;
    transform: translateY(0);
  }

  .bridge-layout--slice-experiment .bridge-layout__content > .section.is-after > *,
  .bridge-layout--slice-experiment .bridge-layout__content > .culture-page > .section.is-after > * {
    opacity: 0.78;
    transform: translateY(0.85rem);
  }

  .page-bridge-overview--slice-experiment {
    height: calc(100vh - var(--nav-h));
    overflow-y: auto;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    scroll-padding-top: 1rem;
    scroll-behavior: smooth;
    overscroll-behavior-y: contain;
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
    scrollbar-width: thin;
  }

  .page-bridge-overview--slice-experiment > .section {
    min-height: calc(100vh - var(--nav-h) - 1.8rem);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: grid;
    align-content: center;
    padding-top: clamp(1.2rem, 2.2vh, 1.7rem);
    padding-bottom: clamp(1.1rem, 2vh, 1.45rem);
    opacity: 0.42;
    filter: saturate(0.74) blur(1px);
    transform: scale(0.972) translate3d(0, 28px, 0);
    transform-origin: center center;
    transition:
      opacity 420ms ease,
      filter 420ms ease,
      transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 420ms ease;
  }

  .page-bridge-overview--slice-experiment > .section.is-before {
    opacity: 0.26;
    filter: saturate(0.58) blur(1.4px);
    transform: scale(0.956) translate3d(0, -24px, 0);
  }

  .page-bridge-overview--slice-experiment > .section.is-current {
    opacity: 1;
    filter: saturate(1) blur(0);
    transform: scale(1) translate3d(0, 0, 0);
  }

  .page-bridge-overview--slice-experiment > .section.is-after {
    opacity: 0.52;
    filter: saturate(0.8) blur(0.9px);
    transform: scale(0.98) translate3d(0, 34px, 0);
  }

  .page-bridge-overview--slice-experiment > .section::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 1.05rem;
    pointer-events: none;
    opacity: 0;
    background:
      radial-gradient(80% 58% at 50% 14%, color-mix(in srgb, var(--bridge-accent) 14%, transparent), transparent 72%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 26%);
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--bridge-accent) 18%, transparent),
      0 24px 60px rgba(0, 0, 0, 0.18);
    transition: opacity 420ms ease, box-shadow 420ms ease;
  }

  .page-bridge-overview--slice-experiment > .section.is-current::before {
    opacity: 1;
  }

  .page-bridge-overview--slice-experiment > .section > * {
    transition:
      transform 460ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 320ms ease;
  }

  .page-bridge-overview--slice-experiment > .section.is-before > * {
    transform: translate3d(0, -12px, 0);
    opacity: 0.76;
  }

  .page-bridge-overview--slice-experiment > .section.is-current > * {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }

  .page-bridge-overview--slice-experiment > .section.is-after > * {
    transform: translate3d(0, 14px, 0);
    opacity: 0.84;
  }

  .page-bridge-overview--slice-experiment .bridge-overview-hero {
    gap: 0.9rem;
  }

  .page-bridge-overview--slice-experiment .bridge-overview-dashboard--guangji {
    gap: 0.78rem;
    padding: 0.88rem;
  }

  .page-bridge-overview--slice-experiment .bridge-overview-dashboard--guangji .bridge-overview-dashboard__head {
    gap: 0.72rem;
  }

  .page-bridge-overview--slice-experiment .bridge-overview-dashboard--guangji .bridge-overview-dashboard__head span {
    max-width: 30rem;
    font-size: 0.92rem;
    line-height: 1.62;
  }

  .page-bridge-overview--slice-experiment .bridge-overview-dashboard--guangji .bridge-overview-dashboard__headline {
    gap: 0.58rem;
  }

  .page-bridge-overview--slice-experiment .bridge-overview-dashboard--guangji .bridge-overview-dashboard__headline-card {
    padding: 0.7rem 0.74rem;
  }

  .page-bridge-overview--slice-experiment .bridge-overview-dashboard--guangji .bridge-overview-dashboard__headline-card strong {
    font-size: 1.26rem;
  }

  .page-bridge-overview--slice-experiment .bridge-overview-dashboard--guangji .bridge-overview-dashboard__layout {
    gap: 0.72rem;
  }

  .page-bridge-overview--slice-experiment .bridge-overview-dashboard--guangji .bridge-overview-dashboard__panel {
    padding: 0.82rem;
  }

  .page-bridge-overview--slice-experiment .bridge-overview-dashboard--guangji .bridge-overview-dashboard__scene {
    min-height: 128px;
  }

  .page-bridge-overview--slice-experiment .bridge-overview-dashboard--guangji .bridge-overview-dashboard__stats {
    gap: 0.52rem;
  }

  .page-bridge-overview--slice-experiment .bridge-overview-dashboard--guangji .bridge-overview-dashboard__stat {
    padding: 0.64rem 0.7rem;
  }

  .page-bridge-overview--slice-experiment .bridge-overview-dashboard--guangji .bridge-overview-dashboard__bulletins {
    gap: 0.42rem;
    margin-top: 0.66rem;
  }

  .page-bridge-overview--slice-experiment .bridge-overview-dashboard--guangji .bridge-overview-dashboard__bulletins p {
    padding: 0.62rem 0.7rem;
    font-size: 0.82rem;
    line-height: 1.56;
  }

  .page-bridge-overview--slice-experiment .bridge-overview-dashboard--guangji .bridge-overview-dashboard__gauge {
    gap: 0.72rem;
  }

  .page-bridge-overview--slice-experiment .bridge-overview-dashboard--guangji .bridge-overview-dashboard__radar-stage {
    width: min(100%, 236px);
  }

  .page-bridge-overview--slice-experiment .bridge-overview-dashboard--guangji .bridge-overview-dashboard__radar-labels span {
    min-width: 4.8rem;
    max-width: 5.8rem;
    font-size: 0.72rem;
  }

  .page-bridge-overview--slice-experiment .bridge-overview-dashboard--guangji .bridge-overview-dashboard__bar-row,
  .page-bridge-overview--slice-experiment .bridge-overview-dashboard--guangji .bridge-overview-dashboard__signal,
  .page-bridge-overview--slice-experiment .bridge-overview-dashboard--guangji .bridge-overview-dashboard__mini-dossier-card,
  .page-bridge-overview--slice-experiment .bridge-overview-dashboard--guangji .bridge-overview-dashboard__timeline-item,
  .page-bridge-overview--slice-experiment .bridge-overview-dashboard--guangji .bridge-overview-dashboard__detail-card {
    padding: 0.64rem 0.72rem;
  }

  .page-bridge-overview--slice-experiment .bridge-overview-dashboard--guangji .bridge-overview-dashboard__detail-grid {
    gap: 0.72rem;
  }

  .page-bridge-overview--slice-experiment .bridge-overview-dashboard--guangji .bridge-overview-dashboard__timeline,
  .page-bridge-overview--slice-experiment .bridge-overview-dashboard--guangji .bridge-overview-dashboard__detail-cards,
  .page-bridge-overview--slice-experiment .bridge-overview-dashboard--guangji .bridge-overview-dashboard__mini-dossier-grid {
    gap: 0.52rem;
  }

  .page-bridge-overview--slice-experiment .bridge-overview-dashboard--guangji .bridge-overview-dashboard__timeline-item span,
  .page-bridge-overview--slice-experiment .bridge-overview-dashboard--guangji .bridge-overview-dashboard__detail-card span,
  .page-bridge-overview--slice-experiment .bridge-overview-dashboard--guangji .bridge-overview-dashboard__mini-dossier-card span {
    font-size: 0.8rem;
    line-height: 1.56;
  }

  .page-bridge-overview--slice-experiment .bridge-overview-points,
  .page-bridge-overview--slice-experiment .bridge-overview-compare {
    align-content: start;
  }
}

@media (min-width: 761px) {
  .page-bridge-overview--cover {
    --bridge-cover-nav-overlap: clamp(1.7rem, 2.4vw, 2.3rem);
  }
}

.bridge-hero {
  width: var(--container);
  margin: var(--space-4) auto var(--space-2);
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}

.bridge-hero__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-deep);
}

.bridge-hero__media img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.bridge-hero__content {
  border: 1px solid var(--line);
  border-left: 3px solid var(--bridge-accent, var(--accent-main));
  border-radius: var(--radius-lg);
  background: rgba(239, 228, 209, 0.05);
  padding: 1.05rem;
  display: grid;
  gap: 0.62rem;
  align-content: start;
}

.bridge-hero__meta,
.bridge-hero__subtitle,
.bridge-hero__summary {
  margin: 0;
  color: var(--paper-soft);
}

.bridge-hero__title {
  margin: 0;
  font-size: clamp(1.9rem, 3vw, 2.8rem);
}

.tag-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.tag {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  font-size: 0.76rem;
}

.bridge-overview-intro {
  display: grid;
  gap: 1rem;
  grid-template-columns: 0.85fr 1.15fr;
}

.bridge-overview-intro__lead {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1rem;
  background: rgba(239, 228, 209, 0.04);
  display: grid;
  gap: 1rem;
}

.bridge-overview-intro__lead .btn {
  justify-self: center;
  align-self: end;
  width: fit-content;
  padding: 0.8rem 3.2rem;
}

.bridge-overview-intro__lead p {
  margin: 0;
  color: var(--paper-soft);
}

.bridge-overview-intro__facts,
.card-grid {
  display: grid;
  gap: 0.8rem;
}

.info-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(239, 228, 209, 0.05);
  padding: 0.9rem;
  display: grid;
  gap: 0.44rem;
}

.info-card__meta,
.info-card__content {
  margin: 0;
  color: var(--paper-soft);
}

.info-card__title {
  margin: 0;
  font-size: 1.06rem;
}

.block-title {
  margin: 0 0 0.8rem;
  font-size: 1.3rem;
}

.block-title--icon,
.culture-preface__title,
.culture-section-heading__title,
.culture-paper__title {
  display: inline-flex;
  align-items: center;
  gap: 0.62rem;
}

.bridge-icon {
  display: inline-grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  flex: 0 0 auto;
  border-radius: 50%;
  color: rgba(240, 224, 194, 0.92);
  border: 1px solid rgba(239, 228, 209, 0.22);
  background:
    radial-gradient(circle at 35% 35%, rgba(255, 243, 214, 0.16), transparent 46%),
    rgba(239, 228, 209, 0.06);
}

.bridge-icon svg {
  width: 0.9rem;
  height: 0.9rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bridge-icon--bridge-guangji {
  border-color: rgba(214, 168, 103, 0.34);
  background:
    radial-gradient(circle at 34% 34%, rgba(255, 234, 199, 0.22), transparent 42%),
    linear-gradient(145deg, rgba(131, 92, 54, 0.62), rgba(74, 56, 38, 0.48));
  color: rgba(243, 220, 183, 0.94);
  box-shadow: inset 0 0 0 1px rgba(239, 213, 171, 0.08), 0 0 18px rgba(163, 109, 54, 0.12);
}

.bridge-icon--bridge-guangji svg {
  stroke-width: 1.6;
}

.bridge-icon--bridge-luoyang {
  border-color: rgba(134, 178, 184, 0.34);
  background:
    radial-gradient(circle at 36% 30%, rgba(219, 242, 242, 0.18), transparent 44%),
    linear-gradient(145deg, rgba(58, 92, 101, 0.62), rgba(36, 59, 66, 0.46));
  color: rgba(201, 231, 232, 0.94);
  box-shadow: inset 0 0 0 1px rgba(205, 235, 236, 0.06), 0 0 18px rgba(79, 143, 151, 0.12);
}

.bridge-icon--bridge-luoyang svg {
  stroke-width: 1.5;
}

.bridge-icon--bridge-zhaozhou {
  border-color: rgba(176, 185, 154, 0.34);
  background:
    radial-gradient(circle at 35% 35%, rgba(233, 236, 217, 0.16), transparent 42%),
    linear-gradient(145deg, rgba(88, 94, 78, 0.62), rgba(59, 65, 53, 0.48));
  color: rgba(224, 229, 209, 0.94);
  box-shadow: inset 0 0 0 1px rgba(229, 233, 217, 0.06), 0 0 18px rgba(122, 134, 101, 0.1);
  border-radius: 0.45rem;
}

.bridge-icon--bridge-zhaozhou svg {
  stroke-width: 1.65;
}

.bridge-icon--brand {
  width: 1.55rem;
  height: 1.55rem;
  color: rgba(242, 229, 205, 0.96);
}

.bridge-icon--brand svg {
  width: 1rem;
  height: 1rem;
}

.bridge-nav-cards {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bridge-nav-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(239, 228, 209, 0.05);
  padding: 0.9rem;
  display: grid;
  gap: 0.7rem;
}

.bridge-nav-card h3,
.bridge-nav-card p {
  margin: 0;
}

.bridge-nav-card h3 {
  display: inline-flex;
  align-items: center;
  gap: 0.56rem;
}

.bridge-icon--card {
  width: 1.5rem;
  height: 1.5rem;
}

.bridge-nav-card p {
  color: var(--paper-soft);
  font-size: 0.9rem;
}

.bridge-layout__head {
  width: var(--container);
  margin: 0 auto 1rem;
  display: grid;
  gap: 0.5rem;
}

.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--paper-soft);
}

.breadcrumb__item.is-current {
  color: var(--paper);
}

.bridge-layout__title {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: clamp(1.8rem, 2.8vw, 2.7rem);
}

.bridge-layout__lead {
  margin: 0;
  color: var(--paper-soft);
  max-width: 58rem;
}

.bridge-module-nav {
  width: var(--container);
  margin: 0 auto;
  padding-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.bridge-module-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.4rem 0.86rem;
  font-size: 0.8rem;
  transition: all var(--dur-fast) var(--easing);
}

.bridge-icon--module {
  width: 1.18rem;
  height: 1.18rem;
}

.bridge-icon--module svg {
  width: 0.76rem;
  height: 0.76rem;
}

.bridge-icon--title {
  width: 1.8rem;
  height: 1.8rem;
  border-color: color-mix(in srgb, var(--bridge-accent, var(--accent-main)) 36%, rgba(239, 228, 209, 0.22));
  color: color-mix(in srgb, var(--bridge-accent, var(--accent-main)) 52%, rgba(246, 235, 214, 0.95));
}

.bridge-icon--section-title {
  width: 1.55rem;
  height: 1.55rem;
}

.bridge-icon--section-title svg {
  width: 0.9rem;
  height: 0.9rem;
}

.bridge-module-nav__link:hover,
.bridge-module-nav__link.is-active {
  border-color: var(--line-strong);
  background: rgba(239, 228, 209, 0.1);
}

.bridge-layout__content .section {
  padding-top: 1.2rem;
  padding-bottom: 1.4rem;
}

.two-col-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.culture-page {
  position: relative;
}

.culture-preface,
.culture-section-heading,
.culture-paper,
.culture-timeline__card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    radial-gradient(115% 120% at 0% 0%, rgba(196, 151, 92, 0.14), transparent 52%),
    radial-gradient(100% 120% at 100% 0%, rgba(100, 149, 158, 0.12), transparent 58%),
    rgba(239, 228, 209, 0.05);
  box-shadow:
    0 20px 44px rgba(4, 8, 12, 0.28),
    inset 0 0 0 1px rgba(248, 237, 214, 0.06);
}

.culture-preface::before,
.culture-section-heading::before,
.culture-paper::before,
.culture-timeline__card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(244, 228, 194, 0.08), transparent 22%),
    linear-gradient(315deg, rgba(160, 181, 182, 0.06), transparent 24%);
}

.culture-preface {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.2rem;
  border-radius: calc(var(--radius-lg) + 0.18rem);
  padding: clamp(1.05rem, 2vw, 1.6rem);
}

.culture-preface__seal {
  width: 4.8rem;
  min-height: 8.8rem;
  border-radius: 999px;
  border: 1px solid rgba(239, 228, 209, 0.26);
  background:
    linear-gradient(180deg, rgba(117, 81, 44, 0.78), rgba(77, 58, 40, 0.78)),
    repeating-linear-gradient(180deg, rgba(255, 238, 211, 0.06) 0 7px, transparent 7px 14px);
  color: rgba(247, 235, 214, 0.92);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  letter-spacing: 0.22em;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.culture-preface__content,
.culture-section-heading,
.culture-paper {
  display: grid;
  gap: 0.75rem;
}

.culture-preface__eyebrow,
.culture-section-heading__eyebrow,
.culture-paper__eyebrow {
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(239, 228, 209, 0.68);
}

.culture-preface__title,
.culture-section-heading__title,
.culture-paper__title {
  margin: 0;
  font-family: var(--font-display);
  line-height: 1.3;
  letter-spacing: 0.05em;
}

.culture-preface__title {
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
}

.culture-preface__paragraph,
.culture-section-heading__lead,
.culture-paper__closing,
.culture-links__item p,
.culture-timeline__paragraph,
.culture-timeline__quote {
  margin: 0;
  color: rgba(234, 226, 212, 0.88);
  line-height: 1.9;
  font-size: 0.97rem;
}

.culture-preface__quote,
.culture-timeline__quote {
  margin-top: 0.25rem;
  padding-left: 0.95rem;
  border-left: 2px solid color-mix(in srgb, var(--bridge-accent, var(--accent-main)) 66%, rgba(239, 228, 209, 0.4));
  color: rgba(247, 238, 222, 0.94);
  font-family: var(--font-display);
  letter-spacing: 0.05em;
}

.culture-page__timeline {
  padding-top: 1rem;
}

.culture-section-heading {
  width: 100%;
  margin-bottom: 1.15rem;
  border-radius: var(--radius-lg);
  padding: 1rem 1.08rem;
}

.culture-section-heading__lead {
  width: 100%;
  max-width: 100%;
  justify-self: center;
  overflow: hidden;
  white-space: nowrap;
  text-align: justify;
  text-align-last: justify;
}

.culture-timeline {
  --timeline-axis: 50%;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.15rem;
  position: relative;
}

.culture-timeline::before {
  content: "";
  position: absolute;
  left: var(--timeline-axis);
  top: 1rem;
  bottom: 1rem;
  width: 1px;
  background:
    linear-gradient(180deg, rgba(239, 228, 209, 0.1), color-mix(in srgb, var(--bridge-accent, var(--accent-main)) 52%, rgba(239, 228, 209, 0.42)) 18%, rgba(239, 228, 209, 0.14));
}

.culture-timeline__item {
  position: relative;
  width: calc(50% - 1.7rem);
  display: grid;
  gap: 0.72rem;
  align-items: start;
}

.culture-timeline__item::before {
  content: "";
  position: absolute;
  width: 0.82rem;
  height: 0.82rem;
  border-radius: 50%;
  top: 0.92rem;
  background:
    radial-gradient(circle at 35% 35%, rgba(255, 247, 229, 0.9), transparent 34%),
    color-mix(in srgb, var(--bridge-accent, var(--accent-main)) 70%, #f1dcb1);
  box-shadow:
    0 0 0 4px rgba(13, 18, 22, 0.92),
    0 0 0 5px color-mix(in srgb, var(--bridge-accent, var(--accent-main)) 35%, transparent);
}

.culture-timeline__meta {
  display: grid;
  gap: 0.4rem;
  padding-top: 0.18rem;
}

.culture-timeline__item.is-left .culture-timeline__meta {
  text-align: right;
}

.culture-timeline__item.is-left .culture-timeline__card {
  margin-right: 0;
}

.culture-timeline__item.is-right .culture-timeline__meta {
  text-align: left;
}

.culture-timeline__item.is-right .culture-timeline__card {
  margin-left: 0;
}

.culture-timeline__item.is-left {
  justify-self: start;
  padding-right: 2.4rem;
}

.culture-timeline__item.is-right {
  justify-self: end;
  padding-left: 2.4rem;
}

.culture-timeline__item.is-left::before {
  right: -0.41rem;
}

.culture-timeline__item.is-right::before {
  left: -0.41rem;
}

.culture-timeline__label {
  margin: 0;
  justify-self: end;
  border-radius: 999px;
  padding: 0.18rem 0.62rem;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  color: rgba(247, 237, 214, 0.9);
  border: 1px solid rgba(239, 228, 209, 0.24);
  background: rgba(239, 228, 209, 0.08);
}

.culture-timeline__item.is-right .culture-timeline__label {
  justify-self: start;
}

.culture-timeline__item.is-left .culture-timeline__label {
  justify-self: end;
}

.culture-timeline__label-icon {
  display: inline-grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  margin-right: 0.38rem;
  border-radius: 50%;
  border: 1px solid rgba(239, 228, 209, 0.2);
  background:
    radial-gradient(circle at 35% 35%, rgba(255, 244, 219, 0.18), transparent 44%),
    rgba(239, 228, 209, 0.08);
  vertical-align: -0.16rem;
}

.culture-timeline__label-icon svg {
  width: 0.76rem;
  height: 0.76rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.culture-timeline__label-icon--legend {
  color: #d8b97c;
}

.culture-timeline__label-icon--craft {
  color: #b8d2d2;
}

.culture-timeline__label-icon--civic {
  color: #d5c3a1;
}

.culture-timeline__label-icon--origin {
  color: #c9c59a;
}

.culture-timeline__label-icon--order {
  color: #c8b18d;
}

.culture-timeline__year {
  margin: 0;
  color: rgba(239, 228, 209, 0.78);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
}

.culture-timeline__card {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 1rem 1.05rem 1.08rem;
}

.culture-timeline__card--has-image {
  overflow: visible;
  cursor: pointer;
}

.culture-timeline__card--has-image:hover,
.culture-timeline__card--has-image:focus-within {
  z-index: 12;
}

.culture-timeline__card::after {
  content: "";
  position: absolute;
  top: 1.18rem;
  width: 2.4rem;
  height: 1px;
  background: linear-gradient(90deg, rgba(239, 228, 209, 0.14), color-mix(in srgb, var(--bridge-accent, var(--accent-main)) 52%, rgba(239, 228, 209, 0.5)));
}

.culture-timeline__item.is-left .culture-timeline__card::after {
  right: -2.4rem;
}

.culture-timeline__item.is-right .culture-timeline__card::after {
  left: -2.4rem;
  background: linear-gradient(90deg, color-mix(in srgb, var(--bridge-accent, var(--accent-main)) 52%, rgba(239, 228, 209, 0.5)), rgba(239, 228, 209, 0.14));
}

.culture-timeline__title {
  margin: 0;
  font-size: clamp(1.12rem, 1.8vw, 1.48rem);
  line-height: 1.45;
  color: rgba(248, 238, 220, 0.95);
}

.culture-timeline__body {
  margin-top: 0.72rem;
  display: grid;
  gap: 0.72rem;
}

.culture-timeline__media-popup {
  position: absolute;
  top: 50%;
  z-index: 9;
  width: min(24rem, 34vw);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-50%) translateX(12px) scale(0.98);
  transition:
    opacity 220ms ease,
    transform 220ms ease;
}

.culture-timeline__item.is-left .culture-timeline__media-popup {
  left: calc(100% + 1rem);
}

.culture-timeline__item.is-right .culture-timeline__media-popup {
  right: calc(100% + 1rem);
  transform: translateY(-50%) translateX(-12px) scale(0.98);
}

.culture-timeline__media-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--bridge-accent, var(--accent-main)) 34%, rgba(239, 228, 209, 0.2));
  border-radius: 1rem;
  background:
    linear-gradient(180deg, rgba(10, 16, 21, 0.92), rgba(8, 13, 18, 0.88)),
    radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--bridge-accent, var(--accent-main)) 12%, transparent), transparent 60%);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.3),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  padding: 0.5rem;
  backdrop-filter: blur(10px) saturate(0.86);
}

.culture-timeline__media-image {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 0.72rem;
  background:
    linear-gradient(180deg, rgba(7, 12, 18, 0.16), rgba(7, 12, 18, 0.28)),
    var(--timeline-card-image) center / cover no-repeat;
  filter: saturate(0.82) brightness(0.84);
  opacity: 0.92;
}

.culture-timeline__card--has-image:hover .culture-timeline__media-popup,
.culture-timeline__card--has-image:focus-within .culture-timeline__media-popup {
  opacity: 1;
}

.culture-timeline__item.is-left .culture-timeline__card--has-image:hover .culture-timeline__media-popup,
.culture-timeline__item.is-left .culture-timeline__card--has-image:focus-within .culture-timeline__media-popup {
  transform: translateY(-50%) translateX(0) scale(1);
}

.culture-timeline__item.is-right .culture-timeline__card--has-image:hover .culture-timeline__media-popup,
.culture-timeline__item.is-right .culture-timeline__card--has-image:focus-within .culture-timeline__media-popup {
  transform: translateY(-50%) translateX(0) scale(1);
}

.culture-page__tail {
  align-items: stretch;
}

.culture-paper {
  border-radius: var(--radius-lg);
  padding: 1rem 1.04rem;
}

.culture-page__tail > .culture-paper {
  height: 100%;
}

.culture-paper__block {
  display: grid;
  gap: 0.62rem;
  padding-top: 0.1rem;
}

.culture-paper__block h4 {
  margin: 0;
  font-size: 1rem;
  color: rgba(246, 236, 217, 0.94);
}

.culture-paper__block .tag-group {
  margin-top: 0.05rem;
}

.culture-paper__block .compare-tags {
  margin-top: 0.1rem;
}

.culture-paper__insight {
  display: grid;
  gap: 0.42rem;
  border: 1px solid rgba(239, 228, 209, 0.16);
  border-radius: 8px;
  padding: 0.72rem 0.78rem;
  background: rgba(239, 228, 209, 0.045);
}

.culture-paper__insight span,
.culture-paper__insight strong,
.culture-paper__insight p,
.culture-paper__clues,
.culture-paper__clues p {
  margin: 0;
}

.culture-paper__insight span,
.culture-paper__clues span {
  color: rgba(239, 228, 209, 0.58);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
}

.culture-paper__insight strong {
  color: rgba(255, 247, 232, 0.96);
  font-family: var(--font-display);
  font-size: 1.08rem;
  line-height: 1.35;
}

.culture-paper__insight p,
.culture-paper__clues p {
  color: var(--paper-soft);
  font-size: 0.88rem;
  line-height: 1.64;
}

.culture-paper__clues {
  list-style: none;
  display: grid;
  gap: 0.5rem;
  padding: 0;
}

.culture-paper__clues li {
  display: grid;
  gap: 0.26rem;
  border-top: 1px dashed rgba(239, 228, 209, 0.14);
  padding-top: 0.5rem;
}

.culture-paper__clues li:first-child {
  border-top: 0;
  padding-top: 0;
}

.culture-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.72rem;
}

.culture-links__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.68rem;
  align-items: start;
  padding-bottom: 0.72rem;
  border-bottom: 1px dashed rgba(239, 228, 209, 0.16);
}

.culture-links__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.culture-links__index {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.74rem;
  color: rgba(247, 237, 215, 0.92);
  border: 1px solid rgba(239, 228, 209, 0.24);
  background: rgba(239, 228, 209, 0.08);
}

[data-reveal] .culture-animate {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 640ms var(--easing),
    transform 640ms var(--easing);
  transition-delay: calc(var(--stagger-index, 0) * 90ms);
}

[data-reveal].is-visible .culture-animate {
  opacity: 1;
  transform: translateY(0);
}

.compare-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.compare-tags li {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.72rem;
  background: rgba(239, 228, 209, 0.05);
}

.feature-gallery {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.feature-gallery__item {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--line);
}

.feature-gallery__item img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.expert-grid {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.expert-card {
  --expert-card-wash: color-mix(in srgb, var(--bridge-accent, var(--accent-main)) 18%, transparent);
  --expert-card-wash-2: color-mix(in srgb, var(--bridge-accent, var(--accent-main)) 10%, transparent);
  --expert-card-line: color-mix(in srgb, var(--bridge-accent, var(--accent-main)) 52%, rgba(239, 228, 209, 0.42));
  --expert-card-name: color-mix(in srgb, var(--bridge-accent, var(--accent-main)) 80%, var(--paper));
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background:
    radial-gradient(120% 120% at 0% 0%, var(--expert-card-wash), transparent 56%),
    radial-gradient(110% 120% at 100% 100%, var(--expert-card-wash-2), transparent 60%),
    linear-gradient(145deg, rgba(239, 228, 209, 0.07), rgba(7, 10, 14, 0.32));
  padding: 0.9rem;
  display: grid;
  grid-template-columns: minmax(7.2rem, 8.2rem) 1fr;
  gap: 0.95rem;
  align-items: start;
  box-shadow:
    var(--shadow-inner-line),
    0 16px 32px rgba(0, 0, 0, 0.26),
    0 0 16px color-mix(in srgb, var(--expert-card-line) 7%, transparent);
}

.expert-card > * {
  position: relative;
  z-index: 2;
}

.expert-card::before {
  content: "";
  position: absolute;
  inset: -24% -12%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.46;
  background:
    radial-gradient(60% 74% at 18% 14%, var(--expert-card-wash), transparent 72%),
    radial-gradient(56% 70% at 88% 84%, var(--expert-card-wash-2), transparent 74%),
    linear-gradient(136deg, transparent 18%, color-mix(in srgb, var(--expert-card-line) 20%, transparent) 56%, transparent 86%);
  animation: bridgeNavFocusGlow 7.8s ease-in-out infinite;
}

.expert-card::after {
  content: "";
  position: absolute;
  top: -46%;
  left: -48%;
  z-index: 1;
  width: 38%;
  height: 210%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.12;
  filter: blur(0.8px);
  background: linear-gradient(
    108deg,
    transparent 0%,
    color-mix(in srgb, var(--expert-card-line) 12%, transparent) 22%,
    color-mix(in srgb, var(--expert-card-line) 52%, rgba(255, 255, 255, 0.28)) 50%,
    color-mix(in srgb, var(--expert-card-line) 14%, transparent) 74%,
    transparent 100%
  );
  animation: bridgeNavFocusSweep 7s ease-in-out infinite;
}

.expert-card__media {
  aspect-ratio: 4 / 5;
  border-radius: calc(var(--radius-sm) + 0.1rem);
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--expert-card-line) 44%, var(--line));
  background:
    radial-gradient(circle at 32% 26%, color-mix(in srgb, var(--expert-card-line) 24%, transparent), transparent 32%),
    linear-gradient(145deg, rgba(20, 30, 36, 0.92), rgba(14, 20, 25, 0.88));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--expert-card-line) 14%, transparent),
    0 0 12px color-mix(in srgb, var(--expert-card-line) 8%, transparent);
}

.expert-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.expert-card__media.is-empty {
  gap: 0.55rem;
  align-content: center;
  justify-items: center;
}

.expert-card__avatar {
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  font-family: var(--font-display);
  font-size: 1.24rem;
  color: rgba(247, 237, 214, 0.94);
  background: rgba(239, 228, 209, 0.08);
}

.expert-card__empty {
  margin: 0;
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  color: rgba(239, 228, 209, 0.58);
}

.expert-card h3,
.expert-card p {
  margin: 0;
}

.expert-card__content {
  display: grid;
  gap: 0.72rem;
}

.expert-card__head {
  display: grid;
  gap: 0.28rem;
}

.expert-card__head h3 {
  color: var(--expert-card-name);
  font-family: "STXingkai", "华文行楷", "FZKai-Z03", "KaiTi", "Kaiti SC", "STKaiti", "Noto Serif SC", serif;
  font-size: clamp(1.86rem, 3vw, 2.58rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0;
  text-shadow:
    0 0 8px color-mix(in srgb, var(--expert-card-line) 26%, transparent),
    0 2px 8px rgba(0, 0, 0, 0.36);
}

.expert-card__meta {
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--expert-card-line) 58%, rgba(239, 228, 209, 0.62));
}

.expert-card__role,
.expert-card__contribution,
.expert-card__intro,
.expert-card__section p {
  color: var(--paper-soft);
}

.expert-card__section {
  display: grid;
  gap: 0.34rem;
}

.expert-card__section h4 {
  margin: 0;
  font-size: 0.88rem;
  color: color-mix(in srgb, var(--expert-card-line) 64%, rgba(246, 236, 217, 0.92));
}

.expert-card__focus {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
}

.expert-card__focus li {
  border: 1px solid color-mix(in srgb, var(--expert-card-line) 34%, rgba(239, 228, 209, 0.14));
  border-radius: 999px;
  padding: 0.24rem 0.56rem;
  font-size: 0.76rem;
  color: rgba(245, 236, 217, 0.88);
  background: color-mix(in srgb, var(--expert-card-wash) 28%, rgba(239, 228, 209, 0.06));
}

.sandbox-shell {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(239, 228, 209, 0.05);
  padding: 1rem;
}

.sandbox-shell__header {
  display: grid;
  gap: 0.45rem;
}

.sandbox-shell__header h3,
.sandbox-shell__header p {
  margin: 0;
}

.sandbox-shell__header p {
  color: var(--paper-soft);
}

.sandbox-shell__layout {
  margin-top: 0.95rem;
  display: grid;
  gap: 0.95rem;
  grid-template-columns: minmax(0, 1.22fr) minmax(300px, 0.9fr);
}

.sandbox-shell__scene {
  min-height: 340px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  text-align: center;
  background:
    radial-gradient(95% 70% at 22% 12%, rgba(239, 228, 209, 0.12), transparent 62%),
    linear-gradient(145deg, rgba(16, 24, 29, 0.8), rgba(12, 18, 22, 0.62));
}

.sandbox-shell__scene p,
.sandbox-shell__scene small {
  margin: 0;
}

.sandbox-shell__panel {
  display: grid;
  gap: 0.75rem;
}

.sandbox-shell__panel section {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(239, 228, 209, 0.04);
  padding: 0.68rem;
}

.sandbox-shell__panel h4,
.sandbox-shell__panel p {
  margin: 0;
}

.sandbox-mode-group,
.sandbox-control-group {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.sandbox-mode-group button,
.sandbox-control-group button {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(239, 228, 209, 0.05);
  color: var(--paper);
  padding: 0.32rem 0.7rem;
  font-size: 0.8rem;
  cursor: pointer;
}

.sandbox-mode-group button.is-active,
.sandbox-mode-group button:hover,
.sandbox-control-group button:hover {
  border-color: var(--line-strong);
  background: rgba(239, 228, 209, 0.14);
}

.sandbox-status,
.sandbox-notes,
.placeholder-note p {
  color: var(--paper-soft);
}

.placeholder-note {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0.8rem;
}

.gj-lab {
  border-color: color-mix(in srgb, var(--accent-lingnan) 35%, var(--line));
  background:
    radial-gradient(120% 90% at 8% 8%, rgba(197, 128, 63, 0.18), transparent 60%),
    radial-gradient(90% 70% at 84% 90%, rgba(108, 146, 110, 0.16), transparent 62%),
    rgba(239, 228, 209, 0.05);
}

.gj-lab__layout {
  margin-top: 0.95rem;
  display: grid;
  gap: 0.95rem;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.9fr);
}

.gj-lab__scene {
  position: relative;
  min-height: 365px;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--accent-lingnan) 38%, var(--line));
  overflow: hidden;
  background: linear-gradient(180deg, rgba(204, 166, 109, 0.18), rgba(24, 37, 44, 0.2));
}

.gj-three-stage {
  position: absolute;
  inset: 0;
}

.gj-three-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.gj-three-status {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 240, 210, 0.45);
  background: rgba(57, 37, 22, 0.56);
  color: #f5e8d0;
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  transition: opacity 260ms ease;
}

.gj-three-status.is-hidden {
  opacity: 0;
}

.gj-scene__caption {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 12px;
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: 0.76rem;
  color: #f6e9d0;
  text-shadow: 0 1px 6px rgba(28, 15, 8, 0.75);
  pointer-events: none;
}

.gj-lab__panel {
  display: grid;
  gap: 0.75rem;
}

.gj-lab__card {
  border: 1px solid color-mix(in srgb, var(--accent-lingnan) 28%, var(--line));
  border-radius: var(--radius-sm);
  background: rgba(239, 228, 209, 0.06);
  padding: 0.72rem;
}

.gj-lab__card h4,
.gj-lab__card p {
  margin: 0;
}

.gj-metric {
  margin-top: 0.38rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.82rem;
  color: var(--paper-soft);
}

.gj-metric b {
  color: var(--paper);
  font-size: 0.9rem;
}

.gj-progress {
  margin-top: 0.48rem;
  height: 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(239, 228, 209, 0.14);
  overflow: hidden;
}

.gj-progress i {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #759f56, #97be6f);
  transition: width 240ms ease;
}

.gj-control {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.55rem;
}

.gj-control span {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--paper-soft);
}

.gj-control input[type="range"] {
  width: 100%;
}

.gj-actions {
  margin-top: 0.65rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.gj-actions button {
  border: 1px solid color-mix(in srgb, var(--accent-lingnan) 45%, var(--line));
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(193, 128, 62, 0.82), rgba(132, 85, 43, 0.88));
  color: #f9eed7;
  padding: 0.32rem 0.72rem;
  font-size: 0.78rem;
  cursor: pointer;
}

.gj-actions button.is-ghost {
  background: rgba(239, 228, 209, 0.08);
  color: var(--paper);
}

.gj-actions button:hover {
  filter: brightness(1.08);
}

.gj-hint {
  margin-top: 0.4rem !important;
  color: var(--paper-soft);
  line-height: 1.55;
}

.page-finale .finale-head {
  text-align: center;
}

.finale-river {
  margin: 1.5rem auto;
  width: min(920px, 96%);
  height: 122px;
  position: relative;
}

.finale-river span {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(239, 228, 209, 0.74), transparent);
}

.finale-river span:nth-child(1) { top: 20%; }
.finale-river span:nth-child(2) { top: 50%; }
.finale-river span:nth-child(3) { top: 80%; }

.finale-grid {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.finale-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(239, 228, 209, 0.06);
  padding: 0.85rem;
  text-align: left;
}

.finale-card h3,
.finale-card p,
.finale-note {
  margin: 0;
}

.finale-card p,
.finale-note {
  color: var(--paper-soft);
}

.finale-note {
  margin-top: 1rem;
}

.finale-actions {
  margin-top: 1.2rem;
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
}

.theme-lingnan {
  --bridge-accent: var(--accent-lingnan);
}

.theme-maritime {
  --bridge-accent: var(--accent-maritime);
}

.theme-rational {
  --bridge-accent: var(--accent-rational);
}

@media (max-width: 1060px) {
  .home-map-main,
  .bridge-hero,
  .bridge-overview-intro,
  .two-col-grid,
  .sandbox-shell__layout,
  .gj-lab__layout {
    grid-template-columns: 1fr;
  }

  .bridge-nav-cards,
  .feature-gallery,
  .expert-grid,
  .finale-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-map-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .home-guide-card {
    grid-column: span 2;
  }
}

@media (max-width: 760px) {
  .global-nav {
    flex-wrap: wrap;
    height: auto;
    gap: 0.6rem;
    padding-top: 0.65rem;
    padding-bottom: 0.6rem;
  }

  .global-nav__links {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 0.15rem;
  }

  .global-nav__links::-webkit-scrollbar {
    height: 0;
  }

  .section {
    padding: 1.7rem 0;
  }

  .home-map-head {
    padding-top: 1rem;
  }

  .home-stage-title {
    gap: 0.42rem;
  }

  .home-stage-title__eyebrow {
    letter-spacing: 0.18em;
  }

  .bridge-nav-cards,
  .feature-gallery,
  .expert-grid,
  .finale-grid {
    grid-template-columns: 1fr;
  }

  .expert-grid--count-3 > .expert-card:nth-child(3) {
    width: 100%;
  }

  .expert-card {
    grid-template-columns: 1fr;
  }

  .expert-card__media {
    max-width: 11rem;
  }

  .china-map {
    min-height: 62vh;
  }

  .china-map__legend {
    max-width: calc(100% - 84px);
    font-size: 0.72rem;
  }

  .bridge-marker__tooltip {
    display: none;
  }

  .home-map-panel {
    grid-template-columns: 1fr;
  }

  .home-guide-card {
    grid-column: auto;
  }
}

/* ========================
   Home Rebuild: China Relief Stage
======================== */

.page-home-map {
  position: relative;
  min-height: calc(100vh - var(--nav-h));
  isolation: isolate;
}

.page-home-map::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(120% 100% at 12% -6%, rgba(173, 133, 80, 0.26), transparent 54%),
    radial-gradient(100% 86% at 92% 0%, rgba(74, 113, 126, 0.22), transparent 56%),
    linear-gradient(165deg, #091017 0%, #0f1922 42%, #131f29 100%);
}

.bg-decoration--map {
  z-index: 1;
}

.bg-decoration__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, rgba(26, 35, 43, 0.32), transparent 42%),
    linear-gradient(292deg, rgba(45, 57, 66, 0.26), transparent 38%);
}

.bg-decoration__mist {
  position: absolute;
  border-radius: 50%;
  filter: blur(62px);
  opacity: 0.26;
}

.bg-decoration__mist--a {
  width: min(48vw, 700px);
  aspect-ratio: 1;
  left: -16%;
  top: -24%;
  background: rgba(157, 110, 56, 0.44);
}

.bg-decoration__mist--b {
  width: min(44vw, 620px);
  aspect-ratio: 1;
  right: -10%;
  top: -18%;
  background: rgba(71, 126, 141, 0.42);
}

.bg-decoration__mist--c {
  width: min(58vw, 760px);
  aspect-ratio: 1;
  left: 20%;
  bottom: -34%;
  background: rgba(122, 93, 67, 0.34);
}

.bg-decoration__mountain {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 18%;
  height: 54%;
  opacity: 0.26;
  background:
    radial-gradient(70% 90% at 18% 68%, rgba(237, 216, 182, 0.12), transparent 72%),
    radial-gradient(60% 80% at 48% 78%, rgba(238, 222, 194, 0.08), transparent 74%),
    radial-gradient(56% 76% at 78% 74%, rgba(236, 214, 184, 0.08), transparent 70%);
  filter: blur(8px);
}

.bg-decoration__river {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 56%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(230, 214, 186, 0.5), transparent);
  box-shadow:
    0 -22px 0 rgba(183, 205, 212, 0.16),
    0 24px 0 rgba(183, 205, 212, 0.12);
  opacity: 0.52;
}

.bg-decoration__brocade {
  position: absolute;
  inset: 0;
  opacity: 0.12;
  background-image:
    radial-gradient(circle at 25% 20%, rgba(240, 226, 197, 0.22) 0 1px, transparent 1px),
    radial-gradient(circle at 78% 66%, rgba(239, 224, 193, 0.2) 0 1px, transparent 1px);
  background-size: 34px 34px, 30px 30px;
}

.bg-decoration__grain {
  position: absolute;
  inset: 0;
  opacity: 0.08;
  background-image: radial-gradient(circle at 2px 2px, rgba(255, 244, 220, 0.46) 1px, transparent 0);
  background-size: 10px 10px;
}

.bg-decoration__spark {
  position: absolute;
  inset: 0;
  opacity: 0.2;
  background-image:
    radial-gradient(circle at 14% 34%, rgba(243, 224, 190, 0.72) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 26%, rgba(186, 214, 221, 0.68) 0 1px, transparent 1px),
    radial-gradient(circle at 82% 64%, rgba(245, 230, 204, 0.52) 0 1px, transparent 1px);
  background-size: 420px 420px;
}

.bg-decoration__trace {
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: -18%;
  height: 56%;
  border-top: 1px solid rgba(239, 228, 209, 0.22);
  border-radius: 72% 28% 0 0;
}

.home-map-head {
  position: relative;
  z-index: 2;
  padding-top: 1rem;
  padding-bottom: 0.4rem;
}

.home-stage-title {
  width: min(980px, 96%);
  display: grid;
  gap: 0.45rem;
}

.home-stage-title__eyebrow {
  margin: 0;
  font-size: 0.74rem;
  letter-spacing: 0.26em;
  color: rgba(239, 228, 209, 0.76);
}

.home-stage-title h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.13;
  letter-spacing: 0.04em;
  text-shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
}

.home-stage-title__subtitle {
  margin: 0;
  font-size: clamp(0.96rem, 1.5vw, 1.15rem);
  color: rgba(239, 228, 209, 0.9);
  letter-spacing: 0.12em;
}

.home-stage-title__line {
  margin: 0;
  max-width: 54rem;
  color: rgba(239, 228, 209, 0.84);
  font-size: 0.88rem;
  line-height: 1.6;
}

.home-map-main {
  --home-stage-h: clamp(620px, 74vh, 800px);
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.84fr) minmax(360px, 1fr);
  align-items: stretch;
  gap: 1rem;
  padding-top: 0.3rem;
}

.home-map-stack {
  min-height: var(--home-stage-h);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0.6rem;
}

.china-map {
  --active-accent: var(--accent-main);
  position: relative;
  min-height: 0;
  height: 100%;
  border: 1px solid rgba(239, 228, 209, 0.26);
  border-radius: calc(var(--radius-lg) + 0.18rem);
  overflow: hidden;
  box-shadow:
    0 34px 84px rgba(2, 8, 14, 0.62),
    inset 0 0 0 1px rgba(248, 237, 214, 0.09);
  background:
    radial-gradient(120% 95% at 10% 94%, rgba(191, 133, 75, 0.2), transparent 64%),
    radial-gradient(95% 80% at 88% 6%, rgba(71, 131, 146, 0.2), transparent 62%),
    linear-gradient(160deg, rgba(9, 15, 22, 0.98), rgba(7, 12, 18, 0.99));
  transform: translate(var(--glow-x, 0), var(--glow-y, 0));
  transition: transform 260ms ease-out;
}

.china-map__frame {
  position: absolute;
  inset: 11px;
  border-radius: calc(var(--radius-lg) - 0.18rem);
  border: 1px solid rgba(239, 228, 209, 0.28);
  background:
    linear-gradient(130deg, rgba(171, 136, 80, 0.26) 0 14px, transparent 14px) top left / 36px 36px no-repeat,
    linear-gradient(-130deg, rgba(171, 136, 80, 0.26) 0 14px, transparent 14px) top right / 36px 36px no-repeat,
    linear-gradient(50deg, rgba(171, 136, 80, 0.26) 0 14px, transparent 14px) bottom left / 36px 36px no-repeat,
    linear-gradient(-50deg, rgba(171, 136, 80, 0.26) 0 14px, transparent 14px) bottom right / 36px 36px no-repeat;
  z-index: 1;
  pointer-events: none;
}

.china-map__backdrop {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 16%, rgba(254, 239, 210, 0.13), transparent 34%),
    radial-gradient(circle at 86% 82%, rgba(207, 230, 238, 0.11), transparent 30%);
}

.china-map__grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.1;
  background-image: radial-gradient(circle at 2px 2px, rgba(247, 233, 206, 0.3) 1px, transparent 0);
  background-size: 11px 11px;
}

.china-map__terrain {
  position: absolute;
  inset: 5.8% 5.4% 7.8%;
  width: 89.2%;
  height: 86.4%;
  z-index: 2;
  transform-origin: 50% 56%;
  transform: perspective(980px) rotateX(19deg) rotateZ(-5.5deg) translateY(0.5%);
}

.china-map__shadow {
  fill: rgba(19, 11, 8, 0.58);
}

.china-map__depth {
  fill: url(#chinaDepthGradient);
  stroke: rgba(84, 66, 46, 0.68);
  stroke-width: 1.2;
}

.china-map__surface {
  fill: url(#chinaTopGradient);
  stroke: rgba(244, 223, 185, 0.5);
  stroke-width: 2.2;
}

.china-map__outline {
  fill: none;
  stroke: rgba(255, 239, 210, 0.5);
  stroke-width: 1.2;
  opacity: 0.74;
}

.china-map__bevel {
  fill: none;
  stroke: rgba(252, 244, 225, 0.24);
  stroke-width: 2.4;
  opacity: 0.62;
}

.china-map__ridge {
  fill: none;
  stroke: url(#chinaRidgeGradient);
  stroke-width: 2.3;
  stroke-linecap: round;
  opacity: 0.9;
}

.china-map__river {
  fill: none;
  stroke: rgba(128, 190, 212, 0.52);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 4 8;
}

.china-map__route {
  fill: none;
  stroke: rgba(240, 212, 159, 0.62);
  stroke-width: 1.9;
  stroke-dasharray: 10 10;
}

.china-map__route--silk {
  stroke: rgba(140, 201, 218, 0.5);
  stroke-dasharray: 6 12;
}

.china-map__waterline {
  fill: none;
  stroke: rgba(185, 222, 233, 0.4);
  stroke-width: 1.8;
  stroke-dasharray: 3 9;
}

.china-map__island {
  fill: rgba(181, 152, 115, 0.46);
  stroke: rgba(248, 227, 187, 0.4);
  stroke-width: 1.3;
}

.region-glow {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.region-glow__mist {
  position: absolute;
  width: min(44vw, 540px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.23;
}

.region-glow__mist--a {
  left: -14%;
  top: -20%;
  background: rgba(187, 142, 79, 0.42);
}

.region-glow__mist--b {
  right: -14%;
  bottom: -22%;
  background: rgba(78, 136, 147, 0.4);
}

.region-glow__spot {
  position: absolute;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  filter: blur(52px);
  opacity: 0.42;
}

.region-glow__spot--south {
  left: 61.5%;
  top: 64.5%;
  background: rgba(197, 128, 63, 0.44);
}

.region-glow__spot--coast {
  left: 66.8%;
  top: 56.2%;
  background: rgba(95, 167, 178, 0.44);
}

.region-glow__spot--north {
  left: 57.2%;
  top: 27.8%;
  background: rgba(153, 165, 129, 0.4);
}

.region-glow__flow {
  position: absolute;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(239, 228, 209, 0.44), transparent);
  opacity: 0.44;
}

.region-glow__flow--one {
  left: 20%;
  right: 14%;
  top: 47%;
}

.region-glow__flow--two {
  left: 24%;
  right: 16%;
  top: 61%;
  opacity: 0.3;
}

.china-map__markers {
  position: absolute;
  inset: 0;
  z-index: 5;
  isolation: isolate;
}

.bridge-marker {
  position: absolute;
  left: var(--marker-x);
  top: var(--marker-y);
  width: 0;
  height: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--paper);
  cursor: pointer;
  overflow: visible;
  z-index: 1;
}

.bridge-marker:hover,
.bridge-marker:focus-visible,
.bridge-marker.is-active {
  z-index: 20;
}

.bridge-marker__halo {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.bridge-marker__halo {
  width: 24px;
  height: 24px;
  background: radial-gradient(circle, color-mix(in srgb, var(--marker-accent) 54%, #fff7df) 0 16%, var(--marker-glow) 32%, transparent 74%);
  opacity: 0.86;
}

.bridge-marker__pinpoint {
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid rgba(255, 244, 219, 0.96);
  background: color-mix(in srgb, var(--marker-accent) 74%, #fff1c8);
  box-shadow:
    0 0 0 2px rgba(7, 12, 16, 0.84),
    0 0 14px color-mix(in srgb, var(--marker-accent) 52%, transparent);
  pointer-events: auto;
}

.bridge-marker__lead {
  position: absolute;
  left: 8px;
  top: 0;
  width: var(--marker-line);
  height: 1px;
  transform: translateY(-50%);
  pointer-events: none;
}

.bridge-marker__lead-line {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--marker-accent) 82%, rgba(255, 244, 219, 0.88)), rgba(239, 228, 209, 0.16));
  box-shadow: 0 0 10px color-mix(in srgb, var(--marker-accent) 28%, transparent);
}

.bridge-marker__lead-turn {
  position: absolute;
  right: -2px;
  top: 50%;
  width: 5px;
  height: 5px;
  transform: translateY(-50%) rotate(45deg);
  border-top: 1px solid rgba(239, 228, 209, 0.54);
  border-right: 1px solid rgba(239, 228, 209, 0.54);
}

.bridge-marker__core {
  position: absolute;
  left: calc(var(--marker-line) + 18px);
  top: var(--marker-card-y);
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border-radius: 10px;
  border: 1px solid rgba(248, 233, 202, 0.84);
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 248, 232, 0.4), transparent 50%),
    linear-gradient(165deg, color-mix(in srgb, var(--marker-accent) 62%, #f2d8ad), color-mix(in srgb, var(--marker-accent) 58%, #3c3428));
  box-shadow:
    0 0 0 1px rgba(17, 12, 9, 0.34),
    0 10px 18px rgba(7, 7, 7, 0.42);
  transition:
    box-shadow var(--dur-fast) var(--easing),
    transform var(--dur-fast) var(--easing);
}

.bridge-marker__glyph {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  font-size: 0.84rem;
  color: #fdf0d8;
  text-shadow: 0 1px 5px rgba(38, 22, 13, 0.6);
}

.bridge-marker__glyph svg,
.bridge-marker__sigil svg {
  width: 100%;
  height: 100%;
}

.bridge-marker__glyph svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bridge-marker__sigil {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid rgba(250, 236, 209, 0.78);
  background: rgba(45, 34, 22, 0.88);
  display: grid;
  place-items: center;
  color: rgba(255, 241, 212, 0.94);
}

.bridge-marker__sigil svg {
  width: 8px;
  height: 8px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bridge-marker__label {
  position: absolute;
  left: calc(var(--marker-line) + 56px);
  top: var(--marker-card-y);
  transform: translateY(-50%);
  padding: 0.16rem 0.5rem;
  font-size: 0.68rem;
  border-radius: 8px;
  border: 1px solid rgba(239, 228, 209, 0.36);
  background: rgba(7, 10, 14, 0.72);
  letter-spacing: 0.08em;
  white-space: nowrap;
  pointer-events: none;
}

.bridge-marker__tooltip {
  position: absolute;
  left: calc(var(--marker-line) + 70px);
  top: var(--marker-card-y);
  transform: translateY(-50%) translateX(-8px);
  min-width: 180px;
  border-radius: 10px;
  border: 1px solid rgba(239, 228, 209, 0.34);
  background: rgba(8, 12, 17, 0.84);
  padding: 0.4rem 0.55rem;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: all var(--dur-fast) var(--easing);
}

.bridge-marker--east .bridge-marker__tooltip {
  left: calc(var(--marker-line) + 70px);
  right: auto;
  transform: translateY(-50%) translateX(-8px);
}

.bridge-marker__tooltip strong {
  display: block;
  font-size: 0.8rem;
  color: rgba(255, 244, 219, 0.95);
}

.bridge-marker__tooltip small {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.7rem;
  color: rgba(239, 228, 209, 0.76);
}

.bridge-marker:hover .bridge-marker__core,
.bridge-marker.is-active .bridge-marker__core {
  transform: translateY(-50%) scale(1.06);
  box-shadow:
    0 0 0 1px rgba(17, 12, 9, 0.34),
    0 0 24px color-mix(in srgb, var(--marker-accent) 45%, transparent),
    0 12px 20px rgba(5, 5, 5, 0.46);
}

.bridge-marker:hover .bridge-marker__tooltip,
.bridge-marker:focus-visible .bridge-marker__tooltip,
.bridge-marker.is-active .bridge-marker__tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.bridge-marker--east:hover .bridge-marker__tooltip,
.bridge-marker--east:focus-visible .bridge-marker__tooltip,
.bridge-marker--east.is-active .bridge-marker__tooltip {
  transform: translateY(-50%) translateX(0);
}

.bridge-marker--lingnan .bridge-marker__core {
  border-radius: 9px;
}

.bridge-marker--maritime .bridge-marker__core {
  border-radius: 50%;
}

.bridge-marker--rational .bridge-marker__core {
  border-radius: 6px;
}

.china-map__compass {
  position: absolute;
  right: 20px;
  bottom: 18px;
  width: 46px;
  height: 46px;
  z-index: 5;
  display: grid;
  place-items: center;
  color: rgba(239, 228, 209, 0.84);
}

.china-map__compass-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(239, 228, 209, 0.38);
  box-shadow: inset 0 0 0 1px rgba(239, 228, 209, 0.22);
}

.china-map__compass-axis {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
}

.china-map__legend-wrap {
  position: absolute;
  left: 20px;
  bottom: 18px;
  z-index: 5;
  max-width: calc(100% - 130px);
}

.china-map__legend-title,
.china-map__legend {
  margin: 0;
}

.china-map__legend-title {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: rgba(241, 231, 211, 0.84);
  text-transform: uppercase;
}

.china-map__legend {
  margin-top: 0.14rem;
  font-size: 0.79rem;
  color: rgba(239, 228, 209, 0.85);
}

.china-map__compliance {
  position: absolute;
  right: 72px;
  bottom: 18px;
  z-index: 5;
  display: grid;
  gap: 0.08rem;
  max-width: min(38vw, 260px);
  padding: 0.38rem 0.52rem;
  border: 1px solid rgba(239, 228, 209, 0.16);
  background: rgba(10, 20, 24, 0.42);
  backdrop-filter: blur(6px);
}

.china-map__compliance-line {
  margin: 0;
  font-size: 0.68rem;
  line-height: 1.45;
  color: rgba(239, 228, 209, 0.78);
}

.home-map-stage-note {
  margin: 0;
  padding-left: 0.45rem;
  font-size: 0.81rem;
  color: rgba(239, 228, 209, 0.78);
}

.home-map-panel {
  min-height: var(--home-stage-h);
  border: 1px solid rgba(239, 228, 209, 0.24);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(100% 100% at 8% 0%, color-mix(in srgb, var(--panel-accent) 22%, transparent), transparent 62%),
    radial-gradient(120% 90% at 100% 100%, rgba(84, 126, 139, 0.14), transparent 65%),
    rgba(239, 228, 209, 0.05);
  box-shadow:
    0 22px 52px rgba(4, 8, 12, 0.38),
    inset 0 0 0 1px rgba(248, 237, 214, 0.08);
  padding: 0.94rem;
}

.home-panel-shell {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.home-panel-head,
.home-panel-focus,
.home-panel-switch,
.home-panel-guide,
.home-panel-actions {
  border: 1px solid rgba(239, 228, 209, 0.22);
  border-radius: var(--radius-md);
  background: rgba(239, 228, 209, 0.05);
}

.home-panel-head {
  padding: 0.64rem 0.72rem;
  display: flex;
  justify-content: space-between;
  gap: 0.4rem;
  align-items: center;
}

.home-panel-head p,
.home-panel-head span {
  margin: 0;
  font-size: 0.76rem;
}

.home-panel-head p {
  letter-spacing: 0.12em;
  color: rgba(239, 228, 209, 0.9);
}

.home-panel-head span {
  color: rgba(239, 228, 209, 0.74);
}

.home-panel-focus {
  border-left: 3px solid var(--panel-accent, var(--accent-main));
  padding: 0.72rem;
}

.home-panel-focus__head {
  display: grid;
  gap: 0.16rem;
}

.home-panel-focus__meta {
  margin: 0;
  font-size: 0.71rem;
  letter-spacing: 0.14em;
  color: rgba(239, 228, 209, 0.72);
}

.home-panel-focus__title {
  margin: 0;
  font-size: 1.42rem;
}

.home-panel-focus__subtitle {
  margin: 0;
  color: rgba(239, 228, 209, 0.84);
  font-size: 0.84rem;
}

.home-panel-focus__tooltip {
  margin-top: 0.55rem;
}

.home-panel-focus__cta {
  margin-top: 0.62rem;
}

.home-panel-focus__cta .btn {
  width: 100%;
}

.marker-tooltip {
  border-left: 3px solid var(--tooltip-accent, var(--accent-main));
  border-radius: 10px;
  border: 1px solid rgba(239, 228, 209, 0.2);
  background: rgba(9, 14, 20, 0.64);
  padding: 0.56rem 0.62rem;
  display: grid;
  gap: 0.28rem;
}

.marker-tooltip__meta,
.marker-tooltip__line,
.marker-tooltip__summary {
  margin: 0;
  color: rgba(239, 228, 209, 0.84);
  font-size: 0.8rem;
}

.marker-tooltip__line {
  color: rgba(239, 228, 209, 0.72);
  font-size: 0.76rem;
}

.marker-tooltip__title {
  margin: 0.12rem 0 0.15rem;
  font-size: 1.16rem;
}

.marker-tooltip__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
  margin-top: 0.22rem;
}

.marker-tooltip__tags span {
  border: 1px solid rgba(239, 228, 209, 0.3);
  border-radius: 999px;
  padding: 0.1rem 0.42rem;
  font-size: 0.7rem;
  color: rgba(239, 228, 209, 0.84);
}

.home-panel-block__head {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: baseline;
}

.home-panel-block__head h4,
.home-panel-block__head small {
  margin: 0;
}

.home-panel-block__head h4 {
  font-size: 0.92rem;
  letter-spacing: 0.08em;
}

.home-panel-block__head small {
  font-size: 0.72rem;
  color: rgba(239, 228, 209, 0.68);
}

.home-panel-switch,
.home-panel-guide,
.home-panel-actions {
  padding: 0.7rem;
}

.home-panel-switch__list {
  margin-top: 0.48rem;
  display: grid;
  gap: 0.36rem;
}

.home-panel-switch-item {
  border: 1px solid rgba(239, 228, 209, 0.24);
  border-radius: 0.72rem;
  background: rgba(239, 228, 209, 0.04);
  padding: 0.4rem 0.5rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.48rem;
  align-items: center;
  text-align: left;
  color: var(--paper);
  cursor: pointer;
  transition: all var(--dur-fast) var(--easing);
}

.home-panel-switch-item__dot {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  border: 1px solid rgba(239, 228, 209, 0.34);
  display: grid;
  place-items: center;
  font-size: 0.76rem;
  background: rgba(239, 228, 209, 0.09);
}

.home-panel-switch-item__main strong,
.home-panel-switch-item__main small {
  display: block;
}

.home-panel-switch-item__main small {
  margin-top: 0.08rem;
  color: rgba(239, 228, 209, 0.72);
  font-size: 0.72rem;
}

.home-panel-switch-item:hover,
.home-panel-switch-item.is-active {
  border-color: rgba(239, 228, 209, 0.44);
  background: rgba(239, 228, 209, 0.12);
}

.home-panel-guide {
  display: grid;
  gap: 0.44rem;
}

.home-panel-guide p {
  margin: 0;
  color: rgba(239, 228, 209, 0.82);
  font-size: 0.82rem;
  line-height: 1.6;
}

.home-panel-actions {
  margin-top: auto;
  display: grid;
  gap: 0.58rem;
}

.home-panel-actions__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
}

.home-panel-actions .btn {
  width: 100%;
}

@media (max-width: 1120px) {
  .home-map-main {
    grid-template-columns: 1fr;
  }

  .home-map-stack,
  .home-map-panel {
    min-height: auto;
  }

  .china-map {
    min-height: 64vh;
  }

  .home-panel-actions {
    margin-top: 0;
  }
}

@media (max-width: 760px) {
  .home-map-head {
    padding-top: 0.85rem;
  }

  .home-stage-title {
    gap: 0.38rem;
  }

  .home-stage-title__eyebrow {
    letter-spacing: 0.2em;
  }

  .china-map {
    min-height: 60vh;
  }

  .china-map__terrain {
    inset: 8.2% 6% 11%;
    width: 88%;
    height: 80.8%;
    transform: perspective(900px) rotateX(17deg) rotateZ(-4.2deg) translateY(0.5%);
  }

  .china-map__legend-wrap {
    max-width: calc(100% - 90px);
  }

  .bridge-marker__tooltip {
    display: none;
  }

  .home-panel-actions__grid {
    grid-template-columns: 1fr;
  }
}

/* =========================
   Home Final Minimal Narrative
========================= */

.home-map-head {
  position: relative;
  z-index: 2;
  padding-top: 1.1rem;
  padding-bottom: 0.45rem;
}

.home-stage-title {
  width: min(940px, 96%);
  display: grid;
  gap: 0.46rem;
}

.home-stage-title h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.2vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: 0.05em;
  text-shadow: 0 10px 32px rgba(0, 0, 0, 0.48);
}

.home-stage-title__subtitle,
.home-stage-title__lead {
  margin: 0;
  color: rgba(239, 228, 209, 0.9);
}

.home-stage-title__subtitle {
  font-size: clamp(1rem, 1.5vw, 1.16rem);
  letter-spacing: 0.12em;
}

.home-stage-title__lead {
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(239, 228, 209, 0.82);
}

.home-map-main {
  --home-main-h: clamp(620px, 74vh, 800px);
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.84fr) minmax(360px, 1fr);
  align-items: stretch;
  gap: 1rem;
  padding-top: 0.34rem;
}

.home-map-stack {
  min-height: var(--home-main-h);
}

.china-map {
  --active-accent: var(--accent-main);
  position: relative;
  min-height: var(--home-main-h);
  border: 1px solid rgba(239, 228, 209, 0.26);
  border-radius: calc(var(--radius-lg) + 0.18rem);
  overflow: hidden;
  box-shadow:
    0 34px 86px rgba(2, 8, 14, 0.64),
    inset 0 0 0 1px rgba(248, 237, 214, 0.08);
  background:
    radial-gradient(120% 96% at 10% 94%, rgba(191, 133, 75, 0.18), transparent 64%),
    radial-gradient(94% 80% at 88% 8%, rgba(71, 131, 146, 0.2), transparent 62%),
    linear-gradient(160deg, rgba(8, 14, 21, 0.99), rgba(6, 11, 17, 1));
}

.china-map__frame {
  position: absolute;
  inset: 11px;
  border-radius: calc(var(--radius-lg) - 0.18rem);
  border: 1px solid rgba(239, 228, 209, 0.28);
  z-index: 1;
  pointer-events: none;
}

.china-map__backdrop {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 16%, rgba(254, 239, 210, 0.13), transparent 34%),
    radial-gradient(circle at 88% 82%, rgba(207, 230, 238, 0.11), transparent 30%);
}

.china-map__grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.1;
  background-image: radial-gradient(circle at 2px 2px, rgba(247, 233, 206, 0.28) 1px, transparent 0);
  background-size: 11px 11px;
}

.china-map__terrain {
  position: absolute;
  inset: 6% 5.2% 7.6%;
  width: 89.6%;
  height: 86.4%;
  z-index: 2;
  transform-origin: 50% 56%;
  transform: perspective(1000px) rotateX(2.5deg) rotateZ(-0.8deg) translateY(0);
}

.china-map__sea {
  fill: url(#cnSeaGradient);
  opacity: 0.86;
}

.china-map__shadow {
  fill: rgba(17, 11, 8, 0.32);
}

.china-map__side {
  fill: url(#cnSideGradient);
  stroke: rgba(84, 66, 46, 0.46);
  stroke-width: 1;
}

.china-map__surface {
  fill: url(#cnTopGradient);
  stroke: rgba(244, 223, 185, 0.44);
  stroke-width: 1.7;
}

.china-map__outline {
  fill: none;
  stroke: rgba(255, 239, 210, 0.68);
  stroke-width: 1.5;
  opacity: 0.88;
}

.china-map__bevel {
  fill: none;
  stroke: rgba(252, 244, 225, 0.14);
  stroke-width: 1.6;
  opacity: 0.52;
}

.china-map__province {
  fill: none;
  stroke: rgba(232, 220, 194, 0.34);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
}

.china-map__river {
  fill: none;
  stroke: rgba(128, 190, 212, 0.38);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-dasharray: 3 8;
}

.china-map__river--major {
  stroke: rgba(157, 205, 220, 0.48);
  stroke-width: 2;
}

.china-map__island {
  fill: rgba(181, 152, 115, 0.46);
  stroke: rgba(248, 227, 187, 0.4);
  stroke-width: 1.3;
}

.china-map__compass {
  position: absolute;
  right: 20px;
  bottom: 18px;
  width: 46px;
  height: 46px;
  z-index: 5;
  display: grid;
  place-items: center;
  color: rgba(239, 228, 209, 0.84);
}

.china-map__compass-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(239, 228, 209, 0.38);
  box-shadow: inset 0 0 0 1px rgba(239, 228, 209, 0.22);
}

.china-map__compass-axis {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
}

.home-map-panel {
  min-height: var(--home-main-h);
  border: 1px solid rgba(239, 228, 209, 0.24);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(96% 100% at 10% 0%, color-mix(in srgb, var(--panel-accent) 20%, transparent), transparent 62%),
    rgba(239, 228, 209, 0.05);
  box-shadow:
    0 22px 52px rgba(4, 8, 12, 0.38),
    inset 0 0 0 1px rgba(248, 237, 214, 0.08);
  padding: 0.94rem;
}

.home-panel-shell {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.68rem;
}

.home-panel-card {
  border: 1px solid rgba(239, 228, 209, 0.22);
  border-radius: var(--radius-md);
  background: rgba(239, 228, 209, 0.05);
  padding: 0.72rem;
}

.home-panel-card h4 {
  margin: 0;
  font-size: 0.92rem;
  letter-spacing: 0.08em;
}

.home-panel-card--focus {
  border-left: 3px solid var(--panel-accent, var(--accent-main));
}

.home-focus__meta,
.home-focus__summary {
  margin: 0;
  color: rgba(239, 228, 209, 0.84);
}

.home-focus__meta {
  font-size: 0.76rem;
  letter-spacing: 0.1em;
}

.home-focus__title {
  margin: 0.28rem 0 0.2rem;
  font-size: 1.44rem;
}

.home-focus__summary {
  font-size: 0.84rem;
  line-height: 1.58;
}

.home-focus__tags {
  margin-top: 0.52rem;
  margin-bottom: 0.66rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.home-focus__tags span {
  border: 1px solid rgba(239, 228, 209, 0.3);
  border-radius: 999px;
  padding: 0.12rem 0.44rem;
  font-size: 0.72rem;
  color: rgba(239, 228, 209, 0.9);
}

.home-panel-card--focus .btn {
  width: 100%;
}

.home-switch-list {
  margin-top: 0.46rem;
  display: grid;
  gap: 0.34rem;
}

.home-switch-item {
  width: 100%;
  border: 1px solid rgba(239, 228, 209, 0.24);
  border-radius: 0.72rem;
  background: rgba(239, 228, 209, 0.04);
  padding: 0.42rem 0.52rem;
  color: var(--paper);
  text-align: left;
  cursor: pointer;
  transition: all var(--dur-fast) var(--easing);
}

.home-switch-item strong,
.home-switch-item small {
  display: block;
}

.home-switch-item strong {
  font-size: 0.9rem;
}

.home-switch-item small {
  margin-top: 0.1rem;
  font-size: 0.74rem;
  color: rgba(239, 228, 209, 0.74);
}

.home-switch-item:hover,
.home-switch-item.is-active {
  border-color: rgba(239, 228, 209, 0.44);
  background: rgba(239, 228, 209, 0.12);
}

.home-guide__text {
  margin: 0.44rem 0 0;
  color: rgba(239, 228, 209, 0.84);
  font-size: 0.82rem;
  line-height: 1.6;
}

.home-panel-card--quick {
  margin-top: auto;
}

.home-quick-grid {
  margin-top: 0.5rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.36rem;
}

.home-quick-grid .btn {
  width: 100%;
}

@media (max-width: 1120px) {
  .home-map-main {
    grid-template-columns: 1fr;
  }

  .home-map-stack,
  .home-map-panel,
  .china-map {
    min-height: auto;
  }

  .china-map {
    min-height: 64vh;
  }

  .home-panel-card--quick {
    margin-top: 0;
  }
}

@media (max-width: 760px) {
  .home-map-head {
    padding-top: 0.82rem;
  }

  .china-map {
    min-height: 60vh;
  }

  .china-map__terrain {
    inset: 8.4% 6% 11.2%;
    width: 88%;
    height: 80.4%;
    transform: perspective(900px) rotateX(16.6deg) rotateZ(-4.8deg) translateY(0.4%);
  }

  .bridge-marker__tooltip {
    display: none;
  }

  .home-quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================
   Home Style Calibration
   Oriental Dark Exhibition
========================= */

.page-home-map--oriental {
  --home-shadow: 0 26px 70px rgba(8, 9, 10, 0.52);
  --home-panel-bg: linear-gradient(
      168deg,
      rgba(43, 52, 58, 0.8) 0%,
      rgba(30, 37, 44, 0.86) 52%,
      rgba(25, 31, 36, 0.92) 100%
    );
}

.page-home-map--oriental::before {
  background:
    radial-gradient(110% 92% at 14% -8%, rgba(137, 111, 74, 0.24), transparent 58%),
    radial-gradient(86% 82% at 88% 2%, rgba(78, 99, 106, 0.19), transparent 60%),
    linear-gradient(162deg, #0f1418 0%, #131a20 46%, #161e25 100%);
}

.page-home-map--oriental .bg-decoration--map {
  opacity: 0.94;
}

.page-home-map--oriental .bg-decoration__veil {
  background:
    linear-gradient(112deg, rgba(68, 57, 44, 0.16), transparent 38%),
    linear-gradient(286deg, rgba(56, 67, 76, 0.18), transparent 42%);
}

.page-home-map--oriental .bg-decoration__mist {
  filter: blur(74px);
  opacity: 0.22;
}

.page-home-map--oriental .bg-decoration__mist--a {
  background: rgba(142, 111, 70, 0.34);
}

.page-home-map--oriental .bg-decoration__mist--b {
  background: rgba(98, 124, 128, 0.27);
}

.page-home-map--oriental .bg-decoration__mist--c {
  background: rgba(112, 96, 78, 0.22);
}

.page-home-map--oriental .bg-decoration__mountain {
  opacity: 0.28;
  background:
    radial-gradient(65% 84% at 18% 74%, rgba(224, 205, 174, 0.1), transparent 72%),
    radial-gradient(58% 78% at 48% 78%, rgba(206, 191, 165, 0.08), transparent 74%),
    radial-gradient(52% 72% at 78% 70%, rgba(220, 201, 170, 0.08), transparent 72%);
  filter: blur(10px);
}

.page-home-map--oriental .bg-decoration__river {
  left: 8%;
  right: 8%;
  top: 57%;
  height: 1px;
  opacity: 0.42;
  background: linear-gradient(90deg, transparent, rgba(203, 181, 142, 0.52), transparent);
  box-shadow:
    0 -20px 0 rgba(154, 176, 178, 0.14),
    0 19px 0 rgba(154, 176, 178, 0.1);
}

.page-home-map--oriental .bg-decoration__contour {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 34%;
  height: 30%;
  opacity: 0.24;
  border-top: 1px solid rgba(198, 180, 145, 0.22);
  border-radius: 66% 34% 0 0;
  transform: skewX(-10deg);
}

.page-home-map--oriental .bg-decoration__paper {
  position: absolute;
  inset: 0;
  opacity: 0.12;
  background-image:
    radial-gradient(circle at 22% 24%, rgba(235, 221, 196, 0.18) 0 1px, transparent 1px),
    radial-gradient(circle at 72% 66%, rgba(219, 207, 183, 0.14) 0 1px, transparent 1px);
  background-size: 30px 30px, 34px 34px;
}

.page-home-map--oriental .bg-decoration__brocade {
  opacity: 0.07;
}

.page-home-map--oriental .bg-decoration__grain {
  opacity: 0.06;
}

.page-home-map--oriental .bg-decoration__spark {
  opacity: 0.12;
  background-image:
    radial-gradient(circle at 18% 42%, rgba(229, 209, 176, 0.54) 0 1px, transparent 1px),
    radial-gradient(circle at 78% 36%, rgba(171, 190, 187, 0.52) 0 1px, transparent 1px);
}

.page-home-map--oriental .bg-decoration__trace {
  border-top: 1px solid rgba(209, 190, 158, 0.18);
}

.page-home-map--oriental .home-stage-title h1 {
  letter-spacing: 0.07em;
  text-shadow: 0 9px 28px rgba(0, 0, 0, 0.44);
}

.page-home-map--oriental .home-stage-title__subtitle {
  color: rgba(235, 224, 202, 0.88);
}

.page-home-map--oriental .home-stage-title__lead {
  color: rgba(214, 203, 184, 0.8);
}

.page-home-map--oriental .china-map {
  border: 1px solid rgba(208, 187, 154, 0.24);
  box-shadow: var(--home-shadow), inset 0 0 0 1px rgba(243, 229, 203, 0.06);
  background:
    radial-gradient(122% 94% at 14% 88%, rgba(149, 112, 71, 0.2), transparent 64%),
    radial-gradient(88% 78% at 88% 9%, rgba(91, 115, 119, 0.16), transparent 60%),
    linear-gradient(162deg, rgba(15, 20, 24, 0.98), rgba(18, 24, 30, 1));
}

.page-home-map--oriental .china-map__frame {
  inset: 10px;
  border-color: rgba(218, 198, 166, 0.24);
  background:
    linear-gradient(135deg, rgba(154, 123, 80, 0.15) 0 14px, transparent 14px) top left / 34px 34px no-repeat,
    linear-gradient(-135deg, rgba(154, 123, 80, 0.15) 0 14px, transparent 14px) top right / 34px 34px no-repeat,
    linear-gradient(45deg, rgba(154, 123, 80, 0.15) 0 14px, transparent 14px) bottom left / 34px 34px no-repeat,
    linear-gradient(-45deg, rgba(154, 123, 80, 0.15) 0 14px, transparent 14px) bottom right / 34px 34px no-repeat;
}

.page-home-map--oriental .china-map__backdrop {
  background:
    radial-gradient(circle at 14% 18%, rgba(238, 219, 187, 0.11), transparent 36%),
    radial-gradient(circle at 86% 82%, rgba(170, 192, 192, 0.1), transparent 32%);
}

.page-home-map--oriental .china-map__patina {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(118deg, rgba(125, 104, 77, 0.14), transparent 34%),
    linear-gradient(300deg, rgba(80, 99, 108, 0.12), transparent 38%);
}

.page-home-map--oriental .china-map__wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(58% 44% at 26% 66%, rgba(104, 125, 129, 0.1), transparent 74%),
    radial-gradient(42% 32% at 72% 34%, rgba(146, 118, 86, 0.1), transparent 72%);
  mix-blend-mode: screen;
  opacity: 0.32;
}

.page-home-map--oriental .china-map__grain {
  opacity: 0.08;
  background-image: radial-gradient(circle at 2px 2px, rgba(232, 216, 191, 0.2) 1px, transparent 0);
}

.page-home-map--oriental .china-map__terrain {
  transform: perspective(980px) rotateX(2deg) rotateZ(-0.6deg) translateY(0);
  filter: drop-shadow(0 12px 16px rgba(7, 8, 8, 0.18));
}

.page-home-map--oriental .china-map__sea {
  opacity: 0.52;
}

.page-home-map--oriental .china-map__shadow {
  fill: rgba(11, 9, 7, 0.26);
}

.page-home-map--oriental .china-map__side {
  stroke: rgba(88, 73, 55, 0.34);
}

.page-home-map--oriental .china-map__surface {
  stroke: rgba(223, 203, 171, 0.44);
}

.page-home-map--oriental .china-map__outline {
  stroke: rgba(240, 224, 196, 0.68);
}

.page-home-map--oriental .china-map__bevel {
  stroke: rgba(232, 219, 196, 0.1);
}

.page-home-map--oriental .china-map__province {
  stroke: rgba(224, 211, 186, 0.28);
  stroke-width: 0.9;
  opacity: 0.82;
}

.page-home-map--oriental .china-map__river {
  stroke: rgba(146, 175, 176, 0.34);
  stroke-width: 1.5;
  stroke-dasharray: 2 9;
}

.page-home-map--oriental .china-map__legend-wrap {
  position: absolute;
  left: 20px;
  bottom: 16px;
  z-index: 5;
  max-width: calc(100% - 130px);
}

.page-home-map--oriental .china-map__legend-title,
.page-home-map--oriental .china-map__legend {
  margin: 0;
}

.page-home-map--oriental .china-map__legend-title {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: rgba(225, 208, 179, 0.82);
}

.page-home-map--oriental .china-map__legend {
  margin-top: 0.12rem;
  font-size: 0.78rem;
  color: rgba(213, 201, 180, 0.78);
}

.page-home-map--oriental .china-map__compass-ring {
  border-color: rgba(214, 196, 166, 0.34);
  box-shadow: inset 0 0 0 1px rgba(214, 196, 166, 0.14);
}

.page-home-map--oriental .region-glow__mist {
  filter: blur(58px);
  opacity: 0.14;
}

.page-home-map--oriental .region-glow__spot {
  filter: blur(54px);
  opacity: 0.24;
}

.page-home-map--oriental .region-glow__flow {
  opacity: 0.24;
  background: linear-gradient(90deg, transparent, rgba(200, 184, 152, 0.38), transparent);
}

.page-home-map--oriental .bridge-marker {
  gap: 0.2rem;
}

.page-home-map--oriental .bridge-marker__halo {
  width: 48px;
  height: 48px;
  opacity: 0.42;
}

.page-home-map--oriental .bridge-marker__core {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(239, 223, 194, 0.78);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--marker-accent) 54%, #e5cfaa), color-mix(in srgb, var(--marker-accent) 56%, #494239)),
    repeating-linear-gradient(
      128deg,
      rgba(255, 242, 219, 0.12) 0 5px,
      rgba(67, 58, 44, 0.08) 5px 10px
    );
  box-shadow:
    0 0 0 1px rgba(25, 20, 15, 0.22),
    0 8px 14px rgba(0, 0, 0, 0.3);
}

.page-home-map--oriental .bridge-marker__stem {
  width: 1px;
  height: 12px;
  background: linear-gradient(180deg, rgba(229, 213, 184, 0.62), rgba(128, 109, 81, 0.46));
  pointer-events: none;
}

.page-home-map--oriental .bridge-marker__glyph {
  font-size: 0.86rem;
}

.page-home-map--oriental .bridge-marker__sigil {
  width: 15px;
  height: 15px;
  right: -4px;
  bottom: -4px;
  background: rgba(53, 43, 33, 0.84);
  border-color: rgba(236, 219, 189, 0.62);
}

.page-home-map--oriental .bridge-marker__label {
  border-radius: 999px;
  border: 1px solid rgba(209, 190, 160, 0.3);
  background: rgba(24, 30, 36, 0.72);
  color: rgba(227, 214, 191, 0.9);
}

.page-home-map--oriental .bridge-marker__tooltip {
  border: 1px solid rgba(206, 186, 157, 0.26);
  background:
    linear-gradient(165deg, rgba(32, 40, 46, 0.9), rgba(24, 30, 35, 0.92)),
    repeating-linear-gradient(120deg, rgba(230, 213, 185, 0.04) 0 8px, transparent 8px 16px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

.page-home-map--oriental .bridge-marker__tooltip strong {
  color: rgba(234, 220, 194, 0.92);
}

.page-home-map--oriental .bridge-marker__tooltip-meta {
  color: rgba(205, 189, 164, 0.8);
}

.page-home-map--oriental .bridge-marker:hover .bridge-marker__core,
.page-home-map--oriental .bridge-marker.is-active .bridge-marker__core {
  transform: translateY(-50%) scale(1.06);
  box-shadow:
    0 0 0 1px rgba(25, 20, 15, 0.22),
    0 0 18px color-mix(in srgb, var(--marker-accent) 26%, transparent),
    0 10px 16px rgba(0, 0, 0, 0.34);
}

.page-home-map--oriental .home-map-panel {
  background: var(--home-panel-bg);
  border: 1px solid rgba(206, 186, 153, 0.2);
  box-shadow: 0 22px 54px rgba(2, 4, 5, 0.42), inset 0 0 0 1px rgba(233, 220, 195, 0.04);
}

.page-home-map--oriental .home-panel-shell {
  gap: 0;
}

.page-home-map--oriental .home-panel-card {
  border: none;
  border-bottom: 1px solid rgba(195, 176, 146, 0.18);
  border-radius: 0;
  background: transparent;
  padding: 0.76rem 0.3rem 0.8rem;
}

.page-home-map--oriental .home-panel-card:last-child {
  border-bottom: none;
  padding-bottom: 0.2rem;
}

.page-home-map--oriental .home-panel-card h4 {
  font-size: 0.88rem;
  color: rgba(230, 216, 191, 0.9);
  letter-spacing: 0.12em;
}

.page-home-map--oriental .home-panel-card--focus {
  border-left: none;
  background:
    linear-gradient(92deg, color-mix(in srgb, var(--panel-accent) 20%, transparent), transparent 44%);
  border-radius: 0.8rem;
  padding: 0.75rem 0.72rem 0.82rem;
  margin-bottom: 0.08rem;
}

.page-home-map--oriental .home-focus__meta {
  color: rgba(212, 194, 165, 0.84);
  letter-spacing: 0.12em;
}

.page-home-map--oriental .home-focus__title {
  color: rgba(242, 232, 214, 0.95);
  letter-spacing: 0.04em;
}

.page-home-map--oriental .home-focus__summary {
  color: rgba(216, 203, 181, 0.86);
}

.page-home-map--oriental .home-focus__tags span {
  border-color: rgba(200, 180, 150, 0.3);
  background: rgba(49, 58, 66, 0.38);
  color: rgba(223, 210, 189, 0.9);
}

.page-home-map--oriental .home-map-panel .btn--primary {
  border: 1px solid rgba(214, 189, 148, 0.42);
  background: linear-gradient(165deg, #89653f, #6f553a);
  color: #f5e9d3;
  box-shadow: 0 10px 18px rgba(9, 8, 7, 0.36), inset 0 0 0 1px rgba(244, 225, 191, 0.16);
}

.page-home-map--oriental .home-map-panel .btn--ghost {
  border-color: rgba(194, 175, 147, 0.28);
  background: rgba(58, 66, 73, 0.44);
  color: rgba(221, 208, 185, 0.9);
}

.page-home-map--oriental .home-switch-item {
  border-color: rgba(192, 173, 143, 0.2);
  background: rgba(45, 53, 60, 0.48);
  border-radius: 0.78rem;
}

.page-home-map--oriental .home-switch-item small {
  color: rgba(206, 191, 169, 0.7);
}

.page-home-map--oriental .home-switch-item:hover,
.page-home-map--oriental .home-switch-item.is-active {
  border-color: rgba(204, 183, 152, 0.36);
  background:
    linear-gradient(95deg, color-mix(in srgb, var(--panel-accent) 20%, transparent), rgba(63, 74, 82, 0.52));
}

.page-home-map--oriental .home-guide__text {
  color: rgba(214, 201, 180, 0.82);
}

@media (max-width: 1120px) {
  .page-home-map--oriental .home-map-main {
    grid-template-columns: 1fr;
  }

  .page-home-map--oriental .home-map-panel {
    min-height: auto;
  }
}

@media (max-width: 760px) {
  .page-home-map--oriental .home-map-head {
    padding-top: 0.8rem;
  }

  .page-home-map--oriental .china-map {
    min-height: 60vh;
  }

  .page-home-map--oriental .china-map__terrain {
    inset: 8.5% 6% 11.4%;
    width: 88%;
    height: 80.2%;
    transform: perspective(900px) rotateX(1.4deg) rotateZ(-0.4deg) translateY(0);
  }

  .page-home-map--oriental .china-map__legend-wrap {
    max-width: calc(100% - 88px);
  }

  .page-home-map--oriental .bridge-marker__tooltip {
    display: none;
  }
}

@media (max-width: 760px) {
  .culture-preface {
    grid-template-columns: 1fr;
  }

  .culture-preface__seal {
    width: fit-content;
    min-height: auto;
    padding: 0.45rem 0.92rem;
    writing-mode: horizontal-tb;
    justify-self: start;
    letter-spacing: 0.16em;
  }

  .culture-timeline {
    --timeline-axis: 1rem;
  }

  .culture-timeline::before {
    left: 0.92rem;
  }

  .culture-timeline__item {
    width: auto;
    gap: 0.75rem;
    padding-left: 2.2rem;
    padding-right: 0;
    justify-self: stretch;
  }

  .culture-timeline__card::after {
    display: none;
  }

  .culture-timeline__item.is-left,
  .culture-timeline__item.is-right {
    padding-left: 2.2rem;
    padding-right: 0;
  }

  .culture-timeline__item::before {
    left: 0.5rem;
    right: auto;
    top: 0.78rem;
  }

  .culture-timeline__media-popup,
  .culture-timeline__item.is-left .culture-timeline__media-popup,
  .culture-timeline__item.is-right .culture-timeline__media-popup {
    position: static;
    width: 100%;
    margin-top: 0.72rem;
    opacity: 1;
    transform: none;
  }

  .culture-timeline__meta {
    text-align: left;
    padding-top: 0;
  }

  .culture-timeline__label {
    justify-self: start;
  }
}

@media (max-width: 560px) {
  .culture-section-heading,
  .culture-paper,
  .culture-timeline__card {
    padding: 0.9rem;
  }

  .culture-preface {
    padding: 0.92rem;
  }

  .culture-preface__title,
  .culture-section-heading__title,
  .culture-paper__title {
    line-height: 1.4;
  }

  .culture-links__item {
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }
}

.bridge-icon--timeline-title {
  width: 1.45rem;
  height: 1.45rem;
}

.bridge-icon--timeline-title svg {
  width: 0.84rem;
  height: 0.84rem;
}

.culture-timeline__title {
  display: inline-flex;
  align-items: center;
  gap: 0.56rem;
}

.bridge-icon--bridge-guangji.bridge-icon--section-title,
.bridge-icon--bridge-guangji.bridge-icon--timeline-title {
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(239, 213, 171, 0.1), 0 0 20px rgba(163, 109, 54, 0.14);
}

.bridge-icon--bridge-luoyang.bridge-icon--section-title,
.bridge-icon--bridge-luoyang.bridge-icon--timeline-title {
  border-radius: 38% 38% 48% 48% / 30% 30% 58% 58%;
  box-shadow: inset 0 0 0 1px rgba(205, 235, 236, 0.08), 0 0 18px rgba(79, 143, 151, 0.15);
}

.bridge-icon--bridge-zhaozhou.bridge-icon--section-title,
.bridge-icon--bridge-zhaozhou.bridge-icon--timeline-title {
  border-radius: 0.42rem;
  box-shadow: inset 0 0 0 1px rgba(229, 233, 217, 0.08), 0 0 18px rgba(122, 134, 101, 0.12);
}

.page-finale {
  --finale-pointer-x: 50%;
  --finale-pointer-y: 24%;
}

.page-finale .finale-head {
  text-align: center;
  position: relative;
}

.finale-stage {
  position: relative;
  width: min(1100px, 100%);
  margin: 0 auto;
  padding: clamp(2.6rem, 5vw, 4.4rem) clamp(1.1rem, 4vw, 2.4rem) clamp(2rem, 4vw, 3rem);
  border: 1px solid rgba(239, 228, 209, 0.14);
  border-radius: 2rem;
  overflow: hidden;
  background:
    radial-gradient(circle at var(--finale-pointer-x) var(--finale-pointer-y), rgba(245, 205, 143, 0.16), transparent 28%),
    radial-gradient(circle at 18% 18%, rgba(95, 133, 139, 0.16), transparent 26%),
    linear-gradient(160deg, rgba(12, 18, 23, 0.96), rgba(17, 25, 31, 0.88) 52%, rgba(12, 18, 23, 0.96));
  box-shadow:
    0 22px 56px rgba(3, 7, 11, 0.34),
    inset 0 0 0 1px rgba(255, 244, 219, 0.04);
}

.finale-stage__backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.finale-stage__aura,
.finale-stage__ring,
.finale-stage__beam,
.finale-stage__constellation {
  position: absolute;
}

.finale-stage__aura {
  inset: 8% 18% auto;
  height: 14rem;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(245, 226, 188, 0.34), rgba(245, 226, 188, 0.08) 42%, transparent 72%);
  filter: blur(6px);
}

.finale-stage__ring {
  left: 50%;
  top: 43%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(239, 228, 209, 0.16);
}

.finale-stage__ring--outer {
  width: min(70vw, 36rem);
  height: min(70vw, 36rem);
  border-color: rgba(239, 228, 209, 0.12);
}

.finale-stage__ring--mid {
  width: min(52vw, 26rem);
  height: min(52vw, 26rem);
  border-style: dashed;
  border-color: rgba(197, 128, 63, 0.24);
}

.finale-stage__ring--inner {
  width: min(34vw, 16rem);
  height: min(34vw, 16rem);
  border-color: rgba(95, 133, 139, 0.3);
  box-shadow: 0 0 16px rgba(95, 133, 139, 0.06);
}

.finale-stage__beam {
  top: -10%;
  width: 34%;
  height: 120%;
  background: linear-gradient(180deg, rgba(255, 245, 220, 0), rgba(255, 222, 165, 0.08), rgba(255, 245, 220, 0));
  filter: blur(2px);
  opacity: 0.46;
}

.finale-stage__beam--left {
  left: 8%;
  transform: skewX(-20deg);
}

.finale-stage__beam--right {
  right: 8%;
  transform: skewX(20deg);
}

.finale-stage__constellation {
  inset: 0;
}

.finale-stage__constellation span {
  position: absolute;
  left: var(--star-x);
  top: var(--star-y);
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: rgba(255, 244, 219, 0.88);
  box-shadow: 0 0 8px rgba(255, 236, 196, 0.28);
}

.finale-stage__content {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1.2rem;
  justify-items: center;
}

.finale-stage__content .section-title {
  max-width: 56rem;
}

.finale-stage__crest {
  width: 4.8rem;
  height: 4.8rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(239, 228, 209, 0.18);
  background:
    radial-gradient(circle at 35% 35%, rgba(255, 246, 222, 0.18), transparent 42%),
    rgba(239, 228, 209, 0.05);
  box-shadow: 0 0 16px rgba(245, 226, 188, 0.08);
}

.bridge-icon--finale-crest {
  width: 2.4rem;
  height: 2.4rem;
  color: rgba(247, 236, 214, 0.96);
  border: none;
  background: transparent;
}

.bridge-icon--finale-crest svg {
  width: 1.5rem;
  height: 1.5rem;
}

.finale-stage__motto {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.finale-stage__motto span {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(239, 228, 209, 0.16);
  border-radius: 999px;
  padding: 0.48rem 0.92rem;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  color: rgba(248, 238, 220, 0.9);
  background: rgba(239, 228, 209, 0.06);
}

.finale-stage__motto span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255, 243, 214, 0.14), transparent 70%);
  opacity: 0.42;
}

.finale-river {
  margin: 1.9rem auto 1.6rem;
  width: min(940px, 96%);
  height: 156px;
  position: relative;
  opacity: 0.94;
}

.finale-river::before {
  content: "";
  position: absolute;
  inset: 18% 0;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 50%, rgba(95, 133, 139, 0.14), transparent 60%);
  filter: blur(10px);
}

.finale-river span {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(239, 228, 209, 0.22), rgba(239, 228, 209, 0.88), rgba(95, 133, 139, 0.44), transparent);
}

.finale-river span:nth-child(1) { top: 12%; animation-delay: 0s; }
.finale-river span:nth-child(2) { top: 30%; animation-delay: 1.2s; }
.finale-river span:nth-child(3) { top: 50%; animation-delay: 2.4s; }
.finale-river span:nth-child(4) { top: 70%; animation-delay: 1.8s; }
.finale-river span:nth-child(5) { top: 88%; animation-delay: 0.6s; }

.finale-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.finale-card {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--bridge-accent, var(--accent-main)) 28%, rgba(239, 228, 209, 0.12));
  border-radius: 1.25rem;
  background:
    linear-gradient(160deg, rgba(239, 228, 209, 0.06), rgba(239, 228, 209, 0.03)),
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--bridge-accent, var(--accent-main)) 12%, transparent), transparent 34%);
  padding: 1rem;
  text-align: left;
  box-shadow: 0 12px 24px rgba(5, 9, 12, 0.16);
  transform: none;
}

.finale-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 244, 219, 0.08), transparent 26%, transparent 74%, rgba(255, 244, 219, 0.06));
  pointer-events: none;
}

.page-finale .finale-stage,
.page-finale .finale-stage *,
.page-finale .finale-river span,
.page-finale .finale-card {
  animation: none !important;
  transition: none !important;
}

.finale-card__head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.78rem;
  align-items: center;
}

.finale-card__icon {
  width: 2.8rem;
  height: 2.8rem;
  display: grid;
  place-items: center;
  border-radius: 0.9rem;
  border: 1px solid rgba(239, 228, 209, 0.12);
  background: rgba(239, 228, 209, 0.05);
}

.bridge-icon--finale-card {
  width: 1.5rem;
  height: 1.5rem;
}

.finale-card h3,
.finale-card p,
.finale-note p {
  margin: 0;
}

.finale-card__meta {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  color: rgba(239, 228, 209, 0.62);
}

.finale-card__summary {
  margin-top: 0.88rem !important;
  color: rgba(246, 236, 217, 0.88);
  line-height: 1.75;
}

.finale-card__tags {
  margin-top: 0.7rem !important;
  color: rgba(239, 228, 209, 0.62);
  font-size: 0.84rem;
  line-height: 1.7;
}

.finale-note {
  width: min(56rem, 100%);
  margin: 1.2rem auto 0;
  display: grid;
  gap: 0.6rem;
  padding: 1.05rem 1.15rem;
  border-radius: 1.2rem;
  border: 1px solid rgba(239, 228, 209, 0.1);
  background: rgba(239, 228, 209, 0.04);
}

.finale-note p {
  color: var(--paper-soft);
  line-height: 1.85;
}

.finale-actions {
  margin-top: 1.35rem;
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
}

@keyframes finale-aura-shift {
  0%,
  100% {
    transform: translateY(0) scale(0.96);
    opacity: 0.84;
  }
  50% {
    transform: translateY(0.8rem) scale(1.04);
    opacity: 1;
  }
}

@keyframes finale-halo-breathe {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(0.985);
    opacity: 0.58;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.015);
    opacity: 0.86;
  }
}

@keyframes finale-beam-sway {
  0%,
  100% {
    opacity: 0.22;
    transform: skewX(-20deg) translateY(0);
  }
  50% {
    opacity: 0.44;
    transform: skewX(-18deg) translateY(0.45rem);
  }
}

@keyframes finale-star-blink {
  0%,
  100% {
    transform: scale(0.85);
    opacity: 0.24;
  }
  50% {
    transform: scale(1.08);
    opacity: 0.72;
  }
}

@keyframes finale-river-wave {
  0%,
  100% {
    transform: translateX(-0.45%) scaleX(0.99);
    opacity: 0.42;
  }
  50% {
    transform: translateX(0.45%) scaleX(1.01);
    opacity: 0.82;
  }
}

@keyframes finale-card-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.18rem);
  }
}

@keyframes finale-tag-sheen {
  0%,
  100% {
    transform: translateX(-120%);
  }
  40%,
  60% {
    transform: translateX(120%);
  }
}

@media (max-width: 1060px) {
  .finale-stage {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .finale-stage__ring--outer {
    width: min(78vw, 32rem);
    height: min(78vw, 32rem);
  }
}

@media (max-width: 760px) {
  .finale-stage {
    border-radius: 1.3rem;
    padding-top: 2.2rem;
    padding-bottom: 2rem;
  }

  .finale-stage__crest {
    width: 4rem;
    height: 4rem;
  }

  .finale-stage__motto {
    gap: 0.55rem;
  }

  .finale-stage__motto span {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
  }

  .finale-river {
    height: 122px;
    margin-top: 1.4rem;
  }

  .finale-card {
    padding: 0.92rem;
  }
}

/* China Map Override */

.china-map__terrain {
  inset: 6.4% 4.8% 7.2%;
  width: 90.4%;
  height: 86.4%;
  transform-origin: 50% 54%;
  transform: perspective(980px) rotateX(0.6deg) rotateZ(-0.18deg) translateY(0);
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.22));
}

.china-map__terrain--official {
  display: block;
  overflow: hidden;
}

.china-map__official-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.china-map__official-svg [style*="fill:#fffddb"],
.china-map__official-svg [style*="fill:#fde4c4"],
.china-map__official-svg [style*="fill:#fffdde"],
.china-map__official-svg [style*="fill:#fffee5"],
.china-map__official-svg [style*="fill:#cbcceb"],
.china-map__official-svg [style*="fill:#b3a6da"],
.china-map__official-svg [style*="fill:#d8dbf1"],
.china-map__official-svg [style*="fill:#f2f2f2"],
.china-map__official-svg [style*="fill:#f2fbfe"] {
  fill: rgba(191, 171, 137, 0.9) !important;
}

.china-map__official-svg [style*="fill:#d9f1d9"],
.china-map__official-svg [style*="fill:#b2e3b6"],
.china-map__official-svg [style*="fill:#ccebb5"],
.china-map__official-svg [style*="fill:#b2e6fa"],
.china-map__official-svg [style*="fill:#bfeafb"] {
  fill: rgba(122, 146, 141, 0.86) !important;
}

.china-map__official-svg [style*="fill:#fbcce8"],
.china-map__official-svg [style*="fill:#fabfe2"] {
  fill: rgba(204, 178, 142, 0.96) !important;
}

.china-map__official-svg [style*="stroke:#231f20"] {
  stroke: rgba(242, 227, 201, 0.42) !important;
}

.china-map__official-svg [style*="fill:#231f20"],
.china-map__official-svg [style*="fill:#00adef"],
.china-map__official-svg [style*="fill:#ed1c24"],
.china-map__official-svg [style*="fill:#ffffff"] {
  opacity: 0;
}

.page-home-map--oriental .china-map__terrain {
  transform: perspective(980px) rotateX(0.45deg) rotateZ(-0.14deg) translateY(0);
  filter: drop-shadow(0 10px 18px rgba(7, 8, 8, 0.14)) brightness(1.12) contrast(1.06);
}

.page-home-map--oriental .china-map__official-svg [style*="fill:#fffddb"],
.page-home-map--oriental .china-map__official-svg [style*="fill:#fde4c4"],
.page-home-map--oriental .china-map__official-svg [style*="fill:#fffdde"],
.page-home-map--oriental .china-map__official-svg [style*="fill:#fffee5"],
.page-home-map--oriental .china-map__official-svg [style*="fill:#cbcceb"],
.page-home-map--oriental .china-map__official-svg [style*="fill:#b3a6da"],
.page-home-map--oriental .china-map__official-svg [style*="fill:#d8dbf1"],
.page-home-map--oriental .china-map__official-svg [style*="fill:#f2f2f2"],
.page-home-map--oriental .china-map__official-svg [style*="fill:#f2fbfe"] {
  fill: rgba(198, 180, 149, 0.88) !important;
}

.page-home-map--oriental .china-map__official-svg [style*="fill:#d9f1d9"],
.page-home-map--oriental .china-map__official-svg [style*="fill:#b2e3b6"],
.page-home-map--oriental .china-map__official-svg [style*="fill:#ccebb5"],
.page-home-map--oriental .china-map__official-svg [style*="fill:#b2e6fa"],
.page-home-map--oriental .china-map__official-svg [style*="fill:#bfeafb"] {
  fill: rgba(126, 149, 145, 0.82) !important;
}

.page-home-map--oriental .china-map__official-svg [style*="fill:#fbcce8"],
.page-home-map--oriental .china-map__official-svg [style*="fill:#fabfe2"] {
  fill: rgba(206, 181, 149, 0.93) !important;
}

.page-home-map--oriental .china-map__official-svg [style*="stroke:#231f20"] {
  stroke: rgba(229, 215, 189, 0.4) !important;
}

@media (max-width: 760px) {
  .china-map__markers {
    inset: 8.4% 5.4% 11.2%;
  }

  .china-map__terrain,
  .page-home-map--oriental .china-map__terrain {
    inset: 8.4% 5.4% 11.2%;
    width: 89.2%;
    height: 80.4%;
    transform: perspective(860px) rotateX(0.4deg) rotateZ(-0.1deg) translateY(0);
  }
}

/* Codex Optimization Layer: museum-grade stage system */

body {
  background:
    radial-gradient(78% 58% at 10% -4%, color-mix(in srgb, var(--bridge-accent) 16%, transparent), transparent 62%),
    radial-gradient(72% 62% at 92% 8%, rgba(111, 176, 187, 0.12), transparent 60%),
    linear-gradient(160deg, var(--color-bg-0), var(--color-bg-1) 45%, var(--color-bg-2));
}

button,
.btn,
.global-nav__link,
.bridge-module-nav__link,
.sandbox-mode-group button,
.sandbox-control-group button,
.home-switch-item,
.gj-lab-command__presets button {
  border-radius: 8px !important;
}

.home-panel-card,
.home-showcase-card,
.bridge-hero__content,
.bridge-hero__media,
.info-card,
.bridge-nav-card,
.expert-card,
.feature-gallery__item,
.museum-label,
.kpi-strip__item,
.sandbox-shell,
.sandbox-shell__scene,
.sandbox-shell__panel,
.sandbox-shell__panel section,
.finale-stage,
.finale-card,
.finale-note {
  border-radius: 8px !important;
}

.luoyang-lab [style*="border-radius"],
.zhaozhou-lab [style*="border-radius"],
.gj-lab [style*="border-radius"] {
  border-radius: 8px !important;
}

.app-shell {
  position: relative;
  overflow: clip;
}

.app-backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.app-backdrop .bg-decoration {
  position: absolute;
}

.app-progress {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  z-index: 80;
  background: linear-gradient(90deg, transparent, var(--route-accent, var(--color-gold)), transparent);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
}

body.is-route-changing .app-progress {
  opacity: 1;
  animation: route-progress 620ms var(--ease-out-expo) both;
}

.global-nav {
  height: var(--nav-h);
  background:
    linear-gradient(90deg, rgba(255, 244, 219, 0.04), transparent 22%, transparent 78%, rgba(255, 244, 219, 0.035)),
    var(--nav-surface);
  border-bottom-color: color-mix(in srgb, var(--bridge-accent) 24%, var(--line));
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.btn--primary {
  background: var(--button-primary-bg);
  color: var(--color-text-strong);
  border-color: color-mix(in srgb, var(--bridge-accent) 44%, var(--line));
}

.btn--secondary,
.btn--ghost {
  color: var(--color-text);
}

body.is-nav-compact .global-nav {
  background: rgba(8, 12, 16, 0.9);
}

.global-nav__right {
  display: grid;
  gap: 0.34rem;
  justify-items: end;
}

.global-nav__link.is-featured {
  border-color: color-mix(in srgb, var(--bridge-accent) 48%, var(--line));
  background: color-mix(in srgb, var(--bridge-accent) 12%, rgba(239, 228, 209, 0.05));
}

.global-nav__subline {
  display: flex;
  gap: 0.48rem;
  font-size: 0.72rem;
  color: var(--color-text-muted);
}

.global-nav__subline a {
  padding: 0.12rem 0.34rem;
  border-bottom: 1px solid transparent;
}

.global-nav__subline a.is-active {
  color: var(--color-text-strong);
  border-bottom-color: var(--bridge-accent);
}

.page-transition {
  position: relative;
  animation: route-fade 520ms var(--ease-out-expo) both;
}

.page-transition__curtain {
  position: fixed;
  inset: 0;
  z-index: 38;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--bridge-accent) 18%, transparent), transparent 36%),
    rgba(5, 8, 11, 0.72);
  transform: translateY(-100%);
  animation: curtain-lift 680ms var(--ease-out-expo) both;
}

.bg-decoration--home .bg-decoration__mountain,
.bg-decoration--bridge .bg-decoration__mountain,
.bg-decoration--finale .bg-decoration__mountain {
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: 0;
  height: 38vh;
  background:
    linear-gradient(175deg, transparent 24%, rgba(239, 228, 209, 0.055) 25%, transparent 26%),
    linear-gradient(160deg, transparent 34%, rgba(0, 0, 0, 0.22) 35%, rgba(0, 0, 0, 0.02) 68%);
  clip-path: polygon(0 100%, 0 54%, 10% 42%, 20% 58%, 31% 31%, 43% 54%, 55% 28%, 68% 50%, 78% 37%, 91% 61%, 100% 44%, 100% 100%);
  opacity: 0.5;
}

.bg-decoration__waterline {
  position: absolute;
  left: 5%;
  right: 5%;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(111, 176, 187, 0.24), rgba(241, 213, 166, 0.28), transparent);
}

.bg-decoration__waterline--a {
  top: 42%;
}

.bg-decoration__waterline--b {
  top: 64%;
  opacity: 0.48;
}

.bg-decoration__scan {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 244, 219, 0.045), transparent 56%);
  transform: translateX(-40%);
  opacity: 0.36;
}

.page-home-map--exhibition {
  isolation: isolate;
}

.home-hero {
  position: relative;
  min-height: calc(100vh - var(--nav-h));
  display: grid;
  align-items: center;
  width: min(1240px, 92vw);
  margin: 0 auto;
  padding: clamp(3rem, 8vh, 5.5rem) 0 5rem;
}

.home-hero__visual {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.home-hero__mountain {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4%;
  height: min(44vh, 420px);
  background:
    linear-gradient(180deg, rgba(255, 244, 219, 0.04), transparent 46%),
    linear-gradient(120deg, rgba(111, 176, 187, 0.12), rgba(209, 161, 93, 0.06));
  clip-path: polygon(0 100%, 0 54%, 9% 41%, 18% 58%, 30% 30%, 42% 57%, 54% 25%, 67% 54%, 78% 38%, 90% 61%, 100% 45%, 100% 100%);
  opacity: 0.78;
}

.home-hero__river {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 18%;
  height: 16vh;
  border-radius: 50%;
  background:
    radial-gradient(50% 100% at 50% 50%, rgba(111, 176, 187, 0.18), transparent 70%),
    linear-gradient(90deg, transparent, rgba(255, 244, 219, 0.18), transparent);
  filter: blur(3px);
  transform: rotate(-2deg);
}

.home-hero__seal {
  position: absolute;
  right: clamp(1rem, 8vw, 7rem);
  top: 17%;
  width: 5.6rem;
  height: 5.6rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 244, 219, 0.24);
  color: rgba(255, 244, 219, 0.18);
  font-size: 3rem;
  font-family: var(--font-display);
  transform: rotate(8deg);
}

.home-hero__mist {
  position: absolute;
  width: min(52vw, 560px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(48px);
  opacity: 0.26;
}

.home-hero__mist--a {
  left: -12%;
  top: 6%;
  background: rgba(209, 161, 93, 0.28);
}

.home-hero__mist--b {
  right: -14%;
  bottom: 10%;
  background: rgba(111, 176, 187, 0.24);
}

.home-hero__content {
  position: relative;
  z-index: 1;
  width: min(780px, 100%);
  display: grid;
  gap: 1rem;
}

.home-hero__eyebrow,
.home-gateway__eyebrow,
.home-section-heading p,
.bridge-layout__kicker {
  margin: 0;
  color: color-mix(in srgb, var(--bridge-accent) 68%, var(--paper));
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.76rem;
}

.home-hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 8vw, 7.2rem);
  line-height: 0.96;
  letter-spacing: 0;
  max-width: 10ch;
  color: var(--color-text-strong);
  text-shadow: 0 18px 48px rgba(0, 0, 0, 0.48);
}

.home-hero__subtitle,
.home-hero__lead {
  margin: 0;
  max-width: 62rem;
  color: rgba(239, 228, 209, 0.88);
  line-height: 1.8;
}

.home-hero__subtitle {
  font-size: clamp(1.08rem, 1.8vw, 1.45rem);
}

.home-hero__actions,
.home-gateway__actions,
.home-showcase-card__actions,
.bridge-structure-summary__actions,
.finale-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.72rem;
  align-items: center;
}

.home-hero__down {
  position: absolute;
  left: 0;
  bottom: 1.4rem;
  border: 1px solid rgba(239, 228, 209, 0.18);
  background: rgba(239, 228, 209, 0.04);
  padding: 0.38rem 0.62rem;
  color: var(--color-text-muted);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  cursor: pointer;
}

.home-map-section,
.home-showcase-section,
.home-gateway-section {
  position: relative;
}

.home-section-heading {
  display: grid;
  gap: 0.55rem;
  max-width: 760px;
  margin-bottom: 1.2rem;
}

.home-section-heading h2,
.home-gateway h2,
.home-stage-title h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 3.3rem);
  line-height: 1.18;
  letter-spacing: 0.08em;
  color: rgba(255, 240, 180, 0.95);
}

.home-section-heading span,
.home-gateway p {
  color: var(--paper-soft);
  line-height: 1.75;
}

.home-showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.home-showcase-card {
  position: relative;
  min-height: 310px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 30%, var(--line));
  background:
    radial-gradient(92% 82% at 100% 0%, color-mix(in srgb, var(--bridge-accent) 18%, transparent), transparent 60%),
    linear-gradient(160deg, rgba(239, 228, 209, 0.075), rgba(239, 228, 209, 0.032));
  box-shadow: var(--shadow-panel);
  padding: 1rem;
  display: grid;
  gap: 0.65rem;
  align-content: end;
  transform: translateY(0);
  transition: transform var(--dur-mid) var(--ease-out-expo), border-color var(--dur-mid) var(--ease-out-expo);
}

.home-showcase-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255, 244, 219, 0.12), transparent 22%, transparent 72%, rgba(255, 244, 219, 0.05)),
    var(--bridge-texture);
  opacity: 0.52;
}

.home-showcase-card > * {
  position: relative;
  z-index: 1;
}

.home-showcase-card.is-active,
.home-showcase-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--bridge-accent) 58%, var(--line-strong));
}

.home-showcase-card__kicker {
  margin: 0;
  color: color-mix(in srgb, var(--bridge-accent) 70%, var(--paper));
  letter-spacing: 0.14em;
  font-size: 0.74rem;
}

.home-showcase-card h3,
.home-showcase-card p {
  margin: 0;
}

.home-showcase-card h3 {
  font-size: 1.55rem;
}

.home-showcase-card__stats,
.home-focus__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}

.home-showcase-card__stats span,
.home-focus__stats span,
.marker-tooltip__stats span {
  border: 1px solid rgba(239, 228, 209, 0.16);
  background: rgba(239, 228, 209, 0.055);
  padding: 0.45rem;
}

.home-showcase-card__stats b,
.home-focus__stats b,
.marker-tooltip__stats b {
  display: block;
  color: var(--color-text-strong);
  font-size: 1rem;
}

.home-showcase-card__stats small,
.home-focus__stats small {
  color: var(--color-text-muted);
}

.home-gateway {
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 24%, var(--line));
  background:
    radial-gradient(80% 110% at 100% 0%, rgba(111, 176, 187, 0.12), transparent 60%),
    radial-gradient(80% 110% at 0% 100%, rgba(209, 161, 93, 0.12), transparent 60%),
    rgba(239, 228, 209, 0.045);
  padding: clamp(1.2rem, 3vw, 2rem);
  display: grid;
  gap: 0.8rem;
}

.region-glow__spot--guangji {
  left: 61.2%;
  top: 76.3%;
  background: rgba(208, 138, 69, 0.42);
}

.region-glow__spot--luoyang {
  left: 64.2%;
  top: 72.7%;
  background: rgba(105, 168, 178, 0.48);
}

.region-glow__spot--zhaozhou {
  left: 59.4%;
  top: 47.3%;
  background: rgba(170, 177, 153, 0.46);
}

.china-map[data-active-slug="guangji"] .region-glow__spot:not(.region-glow__spot--guangji),
.china-map[data-active-slug="luoyang"] .region-glow__spot:not(.region-glow__spot--luoyang),
.china-map[data-active-slug="zhaozhou"] .region-glow__spot:not(.region-glow__spot--zhaozhou) {
  opacity: 0.12;
}

.bridge-marker__tooltip-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.28rem;
  margin-top: 0.36rem;
}

.bridge-marker__tooltip-stats span {
  border: 1px solid rgba(239, 228, 209, 0.16);
  padding: 0.22rem 0.3rem;
}

.bridge-marker__tooltip-stats b {
  display: block;
}

.bridge-marker__tooltip em {
  display: inline-block;
  margin-top: 0.38rem;
  color: color-mix(in srgb, var(--marker-accent) 72%, var(--paper));
  font-style: normal;
  font-size: 0.7rem;
}

.marker-tooltip__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
}

.marker-tooltip__link {
  width: fit-content;
  border: 1px solid color-mix(in srgb, var(--tooltip-accent) 58%, var(--line));
  padding: 0.38rem 0.62rem;
  background: color-mix(in srgb, var(--tooltip-accent) 14%, transparent);
  color: var(--color-text-strong);
}

.bridge-layout {
  padding-top: var(--space-4);
  isolation: isolate;
  overflow: hidden;
  min-height: calc(100vh - var(--nav-h));
  background:
    radial-gradient(90% 58% at 50% -10%, var(--bridge-accent-soft), transparent 68%),
    linear-gradient(155deg, var(--bridge-bg-from, #06101a) 0%, #07101a 48%, var(--bridge-bg-to, #11171b) 100%);
}

.bridge-layout__head {
  position: relative;
  z-index: 2;
}

.bridge-layout__content,
.bridge-module-nav {
  position: relative;
  z-index: 2;
}

.bridge-ambient {
  position: fixed;
  inset: var(--nav-h) 0 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.bridge-ambient__paper,
.bridge-ambient__mountain,
.bridge-ambient__river,
.bridge-ambient__particles {
  position: absolute;
  inset: 0;
}

.bridge-ambient__paper {
  opacity: var(--bridge-paper-opacity, 0.08);
  background-image:
    linear-gradient(115deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 6px),
    radial-gradient(circle at 18% 22%, rgba(255, 244, 218, 0.18) 0 1px, transparent 1px),
    radial-gradient(circle at 82% 62%, rgba(255, 244, 218, 0.12) 0 1px, transparent 1px);
  background-size: 34px 34px, 11px 11px, 17px 17px;
  mix-blend-mode: screen;
}

.bridge-ambient__mountain {
  opacity: 0.34;
  transform-origin: center bottom;
  background-repeat: no-repeat;
  filter: blur(0.2px);
}

.bridge-ambient__mountain--back {
  top: 2%;
  bottom: auto;
  height: 42vh;
  background:
    linear-gradient(155deg, transparent 0 18%, rgba(195, 216, 222, 0.11) 18.5% 19.2%, transparent 19.8% 100%),
    linear-gradient(22deg, transparent 0 36%, rgba(195, 216, 222, 0.1) 36.4% 37.2%, transparent 37.8% 100%),
    radial-gradient(70% 58% at 18% 100%, rgba(180, 196, 192, 0.16), transparent 72%),
    radial-gradient(64% 52% at 74% 100%, rgba(137, 170, 177, 0.14), transparent 72%);
}

.bridge-ambient__mountain--front {
  top: auto;
  height: 34vh;
  bottom: 5vh;
  opacity: 0.22;
  background:
    radial-gradient(62% 54% at 12% 100%, rgba(219, 224, 207, 0.13), transparent 72%),
    radial-gradient(78% 70% at 64% 100%, rgba(142, 188, 198, 0.11), transparent 74%),
    linear-gradient(180deg, transparent, rgba(3, 7, 11, 0.28));
}

.bridge-ambient__river {
  left: -12%;
  right: -12%;
  height: 42vh;
  top: 44%;
  opacity: 0.6;
  background:
    radial-gradient(80% 24% at 52% 52%, color-mix(in srgb, var(--bridge-accent) 22%, transparent), transparent 72%),
    repeating-radial-gradient(ellipse at 50% 50%, transparent 0 16px, rgba(220, 237, 236, 0.055) 17px 18px, transparent 19px 34px);
  transform: rotate(-4deg);
  mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 84%, transparent 100%);
}

.bridge-ambient__river--two {
  top: 58%;
  opacity: 0.32;
  transform: rotate(6deg) scaleX(1.08);
}

.bridge-ambient__particles {
  opacity: 0.36;
  background-image:
    radial-gradient(circle, color-mix(in srgb, var(--bridge-accent) 64%, #fff) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(240, 230, 204, 0.55) 0 1px, transparent 1.4px);
  background-size: 94px 94px, 142px 142px;
  background-position: 16% 28%, 74% 62%;
  animation: bridge-particles-drift 18s linear infinite;
}

.bridge-realm {
  position: relative;
  z-index: 2;
  width: var(--container);
  margin: 0 auto 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: end;
  padding: 0.88rem 1rem;
  border-top: 1px solid color-mix(in srgb, var(--bridge-accent) 35%, rgba(239, 228, 209, 0.18));
  border-bottom: 1px solid rgba(239, 228, 209, 0.13);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--bridge-accent) 13%, transparent), transparent 62%),
    rgba(3, 8, 13, 0.3);
  backdrop-filter: blur(8px);
}

.bridge-realm__copy {
  display: grid;
  gap: 0.3rem;
}

.bridge-realm__label {
  color: color-mix(in srgb, var(--bridge-accent) 68%, var(--paper));
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.bridge-realm__copy strong {
  color: var(--color-text-strong);
  font-family: var(--font-display);
  font-size: clamp(1.04rem, 1.65vw, 1.42rem);
  line-height: 1.25;
}

.bridge-realm__copy p {
  margin: 0;
  max-width: 72rem;
  color: rgba(239, 228, 209, 0.76);
  line-height: 1.7;
  font-size: 0.9rem;
}

.bridge-realm__lines {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 0.5rem;
}

.bridge-realm__lines span {
  min-width: 7.4rem;
  padding: 0.36rem 0.72rem;
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 34%, rgba(239, 228, 209, 0.16));
  color: rgba(246, 237, 218, 0.86);
  background: color-mix(in srgb, var(--bridge-accent) 12%, rgba(8, 13, 18, 0.52));
  font-size: 0.78rem;
  text-align: center;
}

.bridge-layout--realm-guangji .bridge-ambient__river {
  top: 48%;
  transform: rotate(-7deg);
}

.bridge-layout--realm-guangji .bridge-ambient__particles {
  opacity: 0.48;
  background-size: 82px 82px, 128px 128px;
}

.bridge-layout--realm-luoyang .bridge-ambient__mountain--front {
  bottom: 0;
  opacity: 0.18;
}

.bridge-layout--realm-luoyang .bridge-ambient__river {
  top: 38%;
  height: 56vh;
  transform: rotate(2deg);
  opacity: 0.72;
}

.bridge-layout--realm-zhaozhou .bridge-ambient__mountain--back {
  opacity: 0.24;
}

.bridge-layout--realm-zhaozhou .bridge-ambient__river {
  top: 54%;
  height: 28vh;
  transform: rotate(-1deg);
  opacity: 0.34;
}

.bridge-layout--realm-zhaozhou .bridge-ambient__particles {
  opacity: 0.2;
}

@keyframes bridge-particles-drift {
  from {
    background-position: 16% 28%, 74% 62%;
  }

  to {
    background-position: 16% calc(28% - 94px), 74% calc(62% - 142px);
  }
}

@media (max-width: 920px) {
  .bridge-realm {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .bridge-realm__lines {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .bridge-realm__lines span {
    min-width: 0;
  }
}

@media (max-width: 640px) {
  .bridge-realm {
    padding: 0.78rem 0.82rem;
  }

  .bridge-realm__copy p {
    font-size: 0.84rem;
  }

  .bridge-realm__lines {
    grid-template-columns: 1fr;
  }
}

.bridge-hero {
  position: relative;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  align-items: stretch;
  padding-top: 1.2rem;
}

.bridge-hero__content {
  order: 1;
  padding: clamp(1rem, 3vw, 1.6rem);
  background:
    radial-gradient(90% 80% at 0% 0%, var(--bridge-accent-soft), transparent 62%),
    var(--panel-surface);
  box-shadow: var(--shadow-panel), var(--shadow-inner-line);
}

.bridge-hero__media {
  order: 2;
  position: relative;
  min-height: 420px;
}

.bridge-hero__media img {
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.04);
}

.bridge-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.28)),
    radial-gradient(circle at 18% 18%, var(--bridge-accent-soft), transparent 38%);
}

.bridge-hero__title {
  display: grid;
  gap: 0.2rem;
  color: var(--color-text-strong);
}

.bridge-hero__title span + span {
  color: color-mix(in srgb, var(--bridge-accent) 72%, var(--paper));
  font-size: 0.64em;
}

.bridge-hero__diagram {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  width: 9rem;
  height: 9rem;
  border: 1px solid rgba(255, 244, 219, 0.2);
  display: grid;
  place-items: center;
  z-index: 1;
  background: rgba(4, 7, 10, 0.36);
  backdrop-filter: blur(10px);
}

.bridge-hero__diagram-line {
  position: absolute;
  left: 14%;
  right: 14%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bridge-accent), transparent);
}

.bridge-hero__diagram-line--a {
  top: 36%;
  transform: rotate(18deg);
}

.bridge-hero__diagram-line--b {
  bottom: 34%;
  transform: rotate(-18deg);
}

.bridge-hero__diagram-core {
  width: 4.2rem;
  height: 4.2rem;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 54%, var(--line));
  color: var(--color-text-strong);
}

.kpi-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.72rem;
}

.kpi-strip__item {
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 28%, var(--line));
  background: rgba(239, 228, 209, 0.045);
  padding: 0.72rem;
}

.kpi-strip__item p,
.kpi-strip__item strong,
.kpi-strip__item span,
.museum-label p,
.museum-label h3,
.museum-label small {
  margin: 0;
}

.kpi-strip__item strong {
  display: block;
  margin: 0.2rem 0;
  color: var(--color-text-strong);
  font-size: 1.18rem;
}

.kpi-strip__item p,
.kpi-strip__item span {
  color: var(--paper-soft);
  font-size: 0.82rem;
  line-height: 1.55;
}

.museum-label {
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 26%, var(--line));
  border-left: 3px solid var(--bridge-accent);
  background: rgba(239, 228, 209, 0.045);
  padding: 1rem;
  display: grid;
  gap: 0.5rem;
  box-shadow: var(--shadow-inner-line);
}

.museum-label__eyebrow {
  color: color-mix(in srgb, var(--bridge-accent) 70%, var(--paper));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.72rem;
}

.feature-gallery--showcase {
  grid-template-columns: 1.35fr 0.88fr 0.88fr;
  align-items: stretch;
}

.feature-gallery__item {
  position: relative;
  overflow: hidden;
  min-height: 360px;
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 28%, var(--line));
  background: rgba(239, 228, 209, 0.045);
  box-shadow: var(--shadow-panel);
}

.feature-gallery__item img {
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.04);
}

.feature-gallery__item.is-focus {
  min-height: 440px;
}

.feature-gallery__caption {
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.85rem;
  padding: 0.85rem;
  background: rgba(7, 10, 14, 0.72);
  border: 1px solid rgba(255, 244, 219, 0.18);
  backdrop-filter: blur(12px);
  display: grid;
  gap: 0.35rem;
}

.feature-gallery__caption p,
.feature-gallery__caption h3,
.feature-gallery__caption span {
  margin: 0;
}

.feature-gallery__caption p {
  color: color-mix(in srgb, var(--bridge-accent) 72%, var(--paper));
  letter-spacing: 0.1em;
  font-size: 0.72rem;
}

.feature-gallery__caption h3 {
  font-size: 1.2rem;
}

.feature-gallery__caption span {
  color: var(--paper-soft);
  line-height: 1.55;
}

.feature-gallery__caption div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.34rem;
}

.feature-gallery__caption em {
  border: 1px solid rgba(239, 228, 209, 0.18);
  padding: 0.14rem 0.42rem;
  font-style: normal;
  font-size: 0.72rem;
}

.compare-tags--matrix {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.72rem;
}

.compare-tags__item {
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 28%, var(--line));
  background: rgba(239, 228, 209, 0.045);
  padding: 0.85rem;
}

.compare-tags__item p,
.compare-tags__item strong,
.compare-tags__item span {
  margin: 0;
}

.compare-tags__item p {
  color: var(--color-text-muted);
  font-size: 0.78rem;
}

.compare-tags__item strong {
  display: block;
  margin: 0.25rem 0 0.45rem;
  color: var(--color-text-strong);
}

.compare-tags__meter {
  height: 0.42rem;
  overflow: hidden;
  background: rgba(239, 228, 209, 0.08);
}

.compare-tags__meter span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--bridge-accent), rgba(111, 176, 187, 0.82));
}

.experts-profiles {
  position: relative;
  margin-top: clamp(2.2rem, 6vw, 4rem);
  padding-top: clamp(2rem, 5vw, 3.4rem);
  border-top: 1px solid color-mix(in srgb, var(--bridge-accent, var(--accent-main)) 36%, var(--line));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bridge-accent, var(--accent-main)) 7%, transparent), transparent 42%),
    linear-gradient(90deg, transparent, rgba(239, 228, 209, 0.08), transparent);
  background-size: 100% 100%, 100% 1px;
  background-position: 0 0, 0 0;
  background-repeat: no-repeat;
}

.experts-profiles::before {
  content: "";
  position: absolute;
  left: 0;
  top: -0.42rem;
  width: clamp(4.5rem, 14vw, 12rem);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--bridge-accent, var(--accent-main)), transparent);
}

.video-showcase--bridge.video-showcase--module {
  margin-bottom: clamp(0.8rem, 3vw, 1.8rem);
  padding-bottom: clamp(2.2rem, 5vw, 3.6rem);
}

.video-showcase--bridge.video-showcase--module .video-showcase__card {
  box-shadow:
    0 24px 54px rgba(0, 0, 0, 0.28),
    0 0 0 1px color-mix(in srgb, var(--video-accent) 15%, transparent),
    inset 0 0 0 1px rgba(255, 244, 219, 0.05);
}

.expert-grid--curated {
  --expert-card-line: color-mix(in srgb, var(--bridge-accent, var(--accent-main)) 68%, rgba(239, 228, 209, 0.48));
  position: relative;
  isolation: isolate;
  grid-template-columns: minmax(0, 1fr) clamp(3.8rem, 7vw, 5.4rem) minmax(0, 1fr);
  column-gap: 0;
  row-gap: 1.18rem;
  align-items: center;
  padding: 0.35rem 0;
}

.expert-grid--curated .expert-card {
  width: calc(100% - clamp(0.6rem, 1.6vw, 1rem));
  min-height: 0;
}

.expert-grid--curated::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0.4rem;
  bottom: 0.4rem;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  border-radius: 999px;
  background:
    linear-gradient(180deg, transparent, var(--expert-card-line, var(--bridge-accent)) 14%, var(--expert-card-line, var(--bridge-accent)) 86%, transparent);
  box-shadow:
    0 0 16px color-mix(in srgb, var(--expert-card-line, var(--bridge-accent)) 38%, transparent),
    0 0 0 1px color-mix(in srgb, var(--expert-card-line, var(--bridge-accent)) 18%, transparent);
}

.expert-grid--curated::after {
  content: "";
  position: absolute;
  inset: -0.8rem -0.35rem;
  z-index: -1;
  pointer-events: none;
  border-radius: var(--radius-lg);
  opacity: 0.78;
  background:
    radial-gradient(26% 18% at 78% 16%, color-mix(in srgb, var(--expert-card-line, var(--bridge-accent)) 18%, transparent), transparent 70%),
    radial-gradient(24% 20% at 22% 50%, color-mix(in srgb, var(--expert-card-line, var(--bridge-accent)) 16%, transparent), transparent 72%),
    radial-gradient(26% 18% at 78% 84%, color-mix(in srgb, var(--expert-card-line, var(--bridge-accent)) 15%, transparent), transparent 70%),
    repeating-linear-gradient(115deg, transparent 0 18px, color-mix(in srgb, var(--expert-card-line, var(--bridge-accent)) 7%, transparent) 18px 19px);
  mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

.expert-grid--curated .expert-card:nth-child(odd) {
  grid-column: 1;
  justify-self: end;
}

.expert-grid--curated .expert-card:nth-child(even) {
  grid-column: 3;
  justify-self: start;
}

.expert-grid--curated .expert-card:nth-child(1) {
  grid-row: 1;
}

.expert-grid--curated .expert-card:nth-child(2) {
  grid-row: 2;
}

.expert-grid--curated .expert-card:nth-child(3) {
  grid-row: 3;
}

.expert-grid--curated .expert-card:nth-child(odd)::before {
  background:
    radial-gradient(60% 74% at 18% 14%, var(--expert-card-wash), transparent 72%),
    radial-gradient(56% 70% at 88% 84%, var(--expert-card-wash-2), transparent 74%),
    linear-gradient(136deg, transparent 18%, color-mix(in srgb, var(--expert-card-line) 20%, transparent) 56%, transparent 86%);
}

.expert-grid--curated .expert-card:nth-child(even)::before {
  background:
    radial-gradient(60% 74% at 82% 14%, var(--expert-card-wash), transparent 72%),
    radial-gradient(56% 70% at 12% 84%, var(--expert-card-wash-2), transparent 74%),
    linear-gradient(224deg, transparent 18%, color-mix(in srgb, var(--expert-card-line) 20%, transparent) 56%, transparent 86%);
}

.theme-guangji .expert-grid--curated,
.theme-guangji .expert-card {
  --expert-card-wash: rgba(219, 152, 83, 0.17);
  --expert-card-wash-2: rgba(255, 186, 132, 0.1);
  --expert-card-line: rgba(255, 198, 142, 0.58);
  --expert-card-name: #ffddb0;
}

.theme-luoyang .expert-grid--curated,
.theme-luoyang .expert-card {
  --expert-card-wash: rgba(86, 174, 198, 0.17);
  --expert-card-wash-2: rgba(145, 222, 240, 0.11);
  --expert-card-line: rgba(150, 226, 241, 0.56);
  --expert-card-name: #cdf4ff;
}

.theme-zhaozhou .expert-grid--curated,
.theme-zhaozhou .expert-card {
  --expert-card-wash: rgba(138, 178, 122, 0.17);
  --expert-card-wash-2: rgba(190, 226, 161, 0.11);
  --expert-card-line: rgba(200, 231, 173, 0.56);
  --expert-card-name: #e0f4ca;
}

.expert-card__section--quote {
  border-left: 2px solid var(--expert-card-line, var(--bridge-accent));
  padding-left: 0.7rem;
}

@media (max-width: 1060px) {
  .expert-grid--curated {
    grid-template-columns: clamp(2.5rem, 8vw, 3.4rem) minmax(0, 1fr);
    column-gap: 0.6rem;
  }

  .expert-grid--curated::before {
    left: clamp(1.25rem, 4vw, 1.7rem);
  }

  .expert-grid--curated::after {
    background:
      radial-gradient(34% 16% at 86% 17%, color-mix(in srgb, var(--expert-card-line, var(--bridge-accent)) 16%, transparent), transparent 70%),
      radial-gradient(34% 16% at 84% 50%, color-mix(in srgb, var(--expert-card-line, var(--bridge-accent)) 14%, transparent), transparent 72%),
      radial-gradient(34% 16% at 86% 84%, color-mix(in srgb, var(--expert-card-line, var(--bridge-accent)) 14%, transparent), transparent 70%),
      repeating-linear-gradient(115deg, transparent 0 18px, color-mix(in srgb, var(--expert-card-line, var(--bridge-accent)) 7%, transparent) 18px 19px);
  }

  .expert-grid--curated .expert-card:nth-child(odd),
  .expert-grid--curated .expert-card:nth-child(even) {
    grid-column: 2;
    width: 100%;
    justify-self: stretch;
  }
}

.culture-section-heading__beats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.42rem;
  margin-top: 0.8rem;
}

.culture-section-heading__beats span {
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 28%, var(--line));
  padding: 0.22rem 0.48rem;
  color: var(--paper-soft);
  background: rgba(239, 228, 209, 0.045);
  font-size: 0.76rem;
}

.sandbox-shell__header {
  display: grid;
  gap: 0.42rem;
}

.sandbox-shell__header > p {
  color: color-mix(in srgb, var(--bridge-accent) 70%, var(--paper));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.74rem;
}

.sandbox-shell__header > span {
  color: var(--paper-soft);
  line-height: 1.7;
}

.sandbox-shell__diagram {
  position: absolute;
  inset: 16%;
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 26%, transparent);
  display: grid;
  place-items: center;
}

.sandbox-shell__diagram span {
  width: 72%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bridge-accent), transparent);
}

.sandbox-metrics {
  display: grid;
  gap: 0.55rem;
}

.sandbox-metrics article {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.34rem;
  align-items: center;
}

.sandbox-metrics i {
  grid-column: 1 / -1;
  height: 0.38rem;
  background: rgba(239, 228, 209, 0.08);
  overflow: hidden;
}

.sandbox-metrics i::before {
  content: "";
  display: block;
  width: var(--metric-value);
  height: 100%;
  background: linear-gradient(90deg, var(--bridge-accent), rgba(111, 176, 187, 0.82));
}

.gj-lab-command {
  margin-top: 1rem;
  display: grid;
  gap: 0.72rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.gj-lab-command__kpis,
.gj-lab-command__presets {
  display: grid;
  gap: 0.55rem;
}

.gj-lab-command__kpis {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gj-lab-command__kpis article,
.gj-lab-command__presets button {
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 30%, var(--line));
  background: rgba(239, 228, 209, 0.045);
  color: var(--paper);
  padding: 0.62rem;
}

.gj-lab-command__kpis span,
.gj-lab-command__presets span {
  display: block;
  color: var(--paper-soft);
  font-size: 0.76rem;
  line-height: 1.45;
}

.gj-lab-command__kpis b {
  display: block;
  margin-top: 0.16rem;
  color: var(--color-text-strong);
  font-size: 1.2rem;
}

.gj-lab-command__presets {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-self: end;
  margin-left: auto;
  width: 100%;
}

.gj-lab-command__presets button {
  text-align: left;
  cursor: pointer;
}

.gj-lab-command__presets button.is-active,
.gj-lab-command__presets button:hover {
  border-color: color-mix(in srgb, var(--bridge-accent) 62%, var(--line));
  background: color-mix(in srgb, var(--bridge-accent) 13%, rgba(239, 228, 209, 0.055));
}

.page-finale .finale-stage,
.page-finale .finale-stage *,
.page-finale .finale-river span,
.page-finale .finale-card {
  animation-play-state: running;
}

@media (max-width: 1120px) {
  .home-map-main,
  .bridge-hero,
  .gj-lab-command {
    grid-template-columns: 1fr;
  }

  .home-showcase-grid,
  .compare-tags--matrix,
  .kpi-strip,
  .feature-gallery--showcase {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 760px) {
  .global-nav {
    height: auto;
    min-height: 64px;
  }

  .global-nav__right {
    width: 100%;
    justify-items: stretch;
  }

  .global-nav__subline {
    overflow-x: auto;
    padding-bottom: 0.3rem;
  }

  .home-hero {
    min-height: 88vh;
    padding-bottom: 4.5rem;
  }

  .home-hero h1 {
    font-size: clamp(2.6rem, 16vw, 4.4rem);
  }

  .home-hero__seal {
    width: 4.2rem;
    height: 4.2rem;
    font-size: 2.2rem;
  }

  .home-showcase-card {
    min-height: 250px;
  }

  .bridge-hero__media,
  .bridge-hero__media img {
    min-height: 300px;
  }

  .bridge-hero__diagram {
    width: 7rem;
    height: 7rem;
  }

  .gj-lab-command__kpis,
  .gj-lab-command__presets {
    grid-template-columns: 1fr;
  }
}

/* =========================
   Second Optimization Book
========================= */

.home-hero--showcase {
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  gap: clamp(1rem, 2.8vw, 2.2rem);
}

.home-hero--showcase .home-hero__content {
  max-width: 100%;
}

.home-hero__statement {
  margin: 0;
  max-width: 50rem;
  color: color-mix(in srgb, var(--bridge-accent) 74%, var(--paper));
  font-size: 0.96rem;
  line-height: 1.8;
}

.home-hero--showcase .btn--primary {
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 42%, var(--line));
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--bridge-accent) 62%, #c59862), color-mix(in srgb, var(--bridge-accent) 58%, #705132)),
    rgba(239, 228, 209, 0.08);
  box-shadow:
    0 14px 26px rgba(0, 0, 0, 0.32),
    inset 0 0 0 1px rgba(255, 240, 206, 0.14);
}

.hero-stage {
  position: relative;
  min-height: clamp(360px, 62vh, 560px);
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 36%, var(--line));
  border-radius: 8px;
  overflow: hidden;
  background:
    radial-gradient(110% 90% at 8% 6%, color-mix(in srgb, var(--bridge-accent) 16%, transparent), transparent 58%),
    radial-gradient(92% 70% at 92% 88%, rgba(103, 160, 170, 0.22), transparent 62%),
    linear-gradient(155deg, rgba(10, 16, 22, 0.98), rgba(7, 11, 16, 0.98));
  box-shadow:
    0 34px 80px rgba(3, 7, 10, 0.56),
    inset 0 0 0 1px rgba(255, 239, 209, 0.07);
}

.hero-stage__layer {
  position: absolute;
  inset: 0;
}

.hero-stage__mountain {
  position: absolute;
  bottom: 0;
  height: 44%;
  opacity: 0.52;
  background:
    linear-gradient(165deg, rgba(255, 240, 208, 0.12), transparent 44%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.02));
  clip-path: polygon(0 100%, 0 62%, 9% 48%, 20% 60%, 30% 35%, 40% 58%, 52% 30%, 66% 52%, 77% 38%, 90% 62%, 100% 48%, 100% 100%);
}

.hero-stage__mountain--a {
  left: -3%;
  right: 12%;
}

.hero-stage__mountain--b {
  left: 14%;
  right: -6%;
  bottom: -4%;
  opacity: 0.4;
}

.hero-stage__mist {
  position: absolute;
  width: min(40vw, 460px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(42px);
  opacity: 0.28;
}

.hero-stage__mist--a {
  left: -12%;
  top: 10%;
  background: rgba(186, 143, 86, 0.36);
}

.hero-stage__mist--b {
  right: -12%;
  bottom: 12%;
  background: rgba(101, 160, 170, 0.32);
}

.hero-stage__riverline {
  position: absolute;
  left: 7%;
  right: 7%;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(237, 209, 162, 0.74), rgba(104, 173, 189, 0.64), transparent);
}

.hero-stage__riverline--a {
  top: 57%;
}

.hero-stage__riverline--b {
  top: 68%;
  opacity: 0.58;
}

.hero-stage__spark {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 241, 214, 0.72);
  box-shadow: 0 0 16px rgba(255, 221, 165, 0.7);
}

.hero-stage__spark--a {
  left: 32%;
  top: 44%;
}

.hero-stage__spark--b {
  right: 24%;
  top: 52%;
}

.hero-stage__bridges {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 22%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  align-items: end;
}

.hero-stage__bridge {
  position: relative;
  min-height: 148px;
  display: grid;
  align-content: end;
  justify-items: center;
  gap: 0.22rem;
  opacity: 0.64;
  transform: translateY(8px);
}

.hero-stage__bridge.is-main {
  opacity: 1;
  transform: translateY(0);
}

.hero-stage__bridge figcaption {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  color: rgba(239, 228, 209, 0.84);
}

.hero-stage__bridge-arch {
  width: min(220px, 92%);
  height: 84px;
  border: 1px solid rgba(245, 227, 193, 0.62);
  border-bottom: none;
  border-radius: 140px 140px 0 0;
  background: linear-gradient(180deg, rgba(255, 245, 225, 0.16), rgba(255, 245, 225, 0.02));
  box-shadow: inset 0 0 0 1px rgba(255, 244, 219, 0.08);
}

.hero-stage__bridge-deck {
  width: min(248px, 96%);
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(245, 227, 193, 0.48);
  background: linear-gradient(90deg, rgba(241, 219, 182, 0.24), rgba(122, 168, 176, 0.34), rgba(241, 219, 182, 0.24));
}

.hero-stage__bridge--guangji .hero-stage__bridge-arch {
  border-color: rgba(231, 172, 98, 0.62);
}

.hero-stage__bridge--luoyang .hero-stage__bridge-arch {
  border-color: rgba(125, 187, 197, 0.6);
}

.hero-stage__bridge--zhaozhou .hero-stage__bridge-arch {
  border-color: rgba(191, 200, 170, 0.56);
}

.hero-stage__nodes {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 8%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.56rem;
}

.hero-stage__node {
  border: 1px solid rgba(239, 228, 209, 0.25);
  border-radius: 8px;
  background: rgba(10, 14, 20, 0.68);
  color: rgba(239, 228, 209, 0.92);
  padding: 0.45rem 0.54rem;
  text-align: left;
  display: grid;
  gap: 0.08rem;
  cursor: default;
}

.hero-stage__node strong,
.hero-stage__node small {
  display: block;
}

.hero-stage__node strong {
  font-size: 0.84rem;
}

.hero-stage__node small {
  color: rgba(239, 228, 209, 0.72);
  font-size: 0.7rem;
}

.hero-stage__node-ring {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--bridge-accent) 76%, #f7e5c6);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--bridge-accent) 38%, transparent);
}

.hero-stage__node.is-focus {
  border-color: color-mix(in srgb, var(--bridge-accent) 54%, var(--line));
  background: color-mix(in srgb, var(--bridge-accent) 16%, rgba(9, 13, 18, 0.74));
}

.hero-stage__arc {
  position: absolute;
  border: 1px solid rgba(255, 235, 201, 0.16);
  border-radius: 50%;
}

.hero-stage__arc--outer {
  width: min(72vw, 640px);
  height: min(72vw, 640px);
  left: 52%;
  top: -32%;
  transform: translateX(-50%);
}

.hero-stage__arc--inner {
  width: min(48vw, 420px);
  height: min(48vw, 420px);
  left: 52%;
  top: -14%;
  transform: translateX(-50%);
  opacity: 0.58;
}

.hero-stage__grain {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 2px 2px, rgba(248, 233, 201, 0.24) 1px, transparent 0);
  background-size: 10px 10px;
  opacity: 0.08;
}

.hero-stage__inscription {
  position: absolute;
  right: 1rem;
  top: 0.9rem;
  color: rgba(239, 228, 209, 0.66);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
}

.bridge-prelude {
  position: relative;
  width: min(1240px, 92vw);
  margin: -1.8rem auto 1.4rem;
  padding: 0.5rem 0;
}

.bridge-prelude__flow {
  position: absolute;
  left: 2%;
  right: 2%;
  top: 50%;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(245, 219, 173, 0.72), rgba(107, 173, 188, 0.6), transparent);
}

.bridge-prelude__nodes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
}

.bridge-prelude__node {
  justify-self: center;
  border: 1px solid rgba(239, 228, 209, 0.24);
  border-radius: 999px;
  background: rgba(11, 16, 22, 0.72);
  color: rgba(239, 228, 209, 0.9);
  padding: 0.24rem 0.62rem;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
}

.home-map-modes {
  margin-top: 0.42rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
  align-items: center;
}

.home-map-modes button {
  border: 1px solid rgba(239, 228, 209, 0.26);
  border-radius: 8px;
  background: rgba(239, 228, 209, 0.05);
  color: rgba(239, 228, 209, 0.86);
  padding: 0.28rem 0.64rem;
  font-size: 0.78rem;
  cursor: pointer;
}

.home-map-modes button.is-active,
.home-map-modes button:hover {
  border-color: color-mix(in srgb, var(--bridge-accent) 54%, var(--line));
  background: color-mix(in srgb, var(--bridge-accent) 15%, rgba(239, 228, 209, 0.06));
}

.home-map-modes p {
  margin: 0;
  width: 100%;
  color: rgba(239, 228, 209, 0.72);
  font-size: 0.8rem;
  line-height: 1.6;
}

.home-panel-card--lab {
  border-left: 3px solid color-mix(in srgb, var(--panel-accent) 58%, var(--line));
  background:
    radial-gradient(90% 100% at 0% 0%, color-mix(in srgb, var(--panel-accent) 18%, transparent), transparent 56%),
    rgba(239, 228, 209, 0.05);
}

.home-panel-card--lab p {
  margin: 0.44rem 0 0.56rem;
  color: rgba(239, 228, 209, 0.84);
  font-size: 0.82rem;
  line-height: 1.58;
}

.marker-tooltip__lab {
  margin: 0;
  color: color-mix(in srgb, var(--tooltip-accent) 70%, var(--paper));
  font-size: 0.74rem;
  letter-spacing: 0.08em;
}

.marker-tooltip__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.34rem;
}

.marker-tooltip__link {
  width: 100%;
  text-align: center;
  border-radius: 8px;
}

.marker-tooltip__link--lab {
  border-color: color-mix(in srgb, var(--tooltip-accent) 66%, var(--line));
  background: color-mix(in srgb, var(--tooltip-accent) 18%, transparent);
}

.labs-hub {
  padding-top: clamp(2.2rem, 7vh, 4.2rem);
}

.labs-hub__title {
  display: grid;
  gap: 0.48rem;
  max-width: 760px;
}

.labs-hub__title p,
.labs-hub__title h2,
.labs-hub__title span {
  margin: 0;
}

.labs-hub__title p {
  color: color-mix(in srgb, var(--bridge-accent) 66%, var(--paper));
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.74rem;
}

.labs-hub__title h2 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 3rem);
}

.labs-hub__title span {
  color: var(--paper-soft);
  line-height: 1.7;
}

.labs-hub__grid {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.84rem;
}

.labs-hub__card {
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 26%, var(--line));
  border-radius: 8px;
  background:
    radial-gradient(85% 90% at 100% 0%, color-mix(in srgb, var(--bridge-accent) 20%, transparent), transparent 62%),
    rgba(239, 228, 209, 0.045);
  padding: 0.84rem;
  display: grid;
  gap: 0.54rem;
}

.labs-hub__head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.58rem;
  align-items: center;
}

.labs-hub__head p,
.labs-hub__head h3,
.labs-hub__card > span {
  margin: 0;
}

.labs-hub__head p {
  font-size: 0.76rem;
  color: color-mix(in srgb, var(--bridge-accent) 68%, var(--paper));
  letter-spacing: 0.08em;
}

.labs-hub__head h3 {
  font-size: 1.06rem;
}

.labs-hub__card > span {
  color: var(--paper-soft);
  line-height: 1.58;
  font-size: 0.84rem;
}

.labs-hub__actions {
  margin-top: 0.88rem;
  display: flex;
  justify-content: flex-start;
}

.page-labs {
  padding-bottom: clamp(2rem, 6vh, 4rem);
}

.labs-page__hero {
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 26%, var(--line));
  border-radius: 8px;
  background:
    radial-gradient(90% 100% at 0% 0%, color-mix(in srgb, var(--bridge-accent) 17%, transparent), transparent 60%),
    rgba(239, 228, 209, 0.05);
  padding: clamp(1.1rem, 3.2vw, 2rem);
  display: grid;
  gap: 0.68rem;
}

.labs-page__hero p,
.labs-page__hero h1,
.labs-page__hero span {
  margin: 0;
}

.labs-page__hero p {
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  color: color-mix(in srgb, var(--bridge-accent) 68%, var(--paper));
  text-transform: uppercase;
}

.labs-page__hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.2vw, 3.4rem);
}

.labs-page__hero span {
  color: var(--paper-soft);
  line-height: 1.7;
}

.labs-page__hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.68rem;
}

.labs-page__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.92rem;
  margin-top: clamp(12rem, 6vh, 3.6rem);
  justify-items: center;
  align-items: start;
}

.labs-page__orb {
  --orb-size: clamp(10.4rem, 20vw, 14.6rem);
  --orb-bright: color-mix(in srgb, var(--bridge-accent) 42%, #f4e6cc);
  --orb-mid: color-mix(in srgb, var(--bridge-accent) 70%, #2f3640);
  --orb-deep: color-mix(in srgb, var(--bridge-accent) 48%, #101822);
  --orb-glow: color-mix(in srgb, var(--bridge-accent) 74%, rgba(255, 255, 255, 0.28));
  position: relative;
  width: var(--orb-size);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-decoration: none;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 54%, rgba(239, 228, 209, 0.32));
  background:
    radial-gradient(130% 96% at 24% 16%, color-mix(in srgb, #ffffff 68%, var(--orb-bright)) 0%, rgba(255, 255, 255, 0.1) 24%, transparent 56%),
    radial-gradient(94% 82% at 74% 84%, rgba(0, 0, 0, 0.52), transparent 70%),
    linear-gradient(154deg, var(--orb-bright), var(--orb-mid) 42%, var(--orb-deep));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -30px 44px rgba(8, 12, 18, 0.52),
    0 20px 30px rgba(0, 0, 0, 0.32),
    0 0 30px color-mix(in srgb, var(--orb-glow) 42%, transparent);
  transform-style: preserve-3d;
  transition:
    transform var(--dur-fast) var(--easing),
    box-shadow var(--dur-fast) var(--easing),
    border-color var(--dur-fast) var(--easing);
  animation: labsOrbFloat 6.2s ease-in-out infinite;
  animation-delay: calc(var(--orb-order, 0) * 320ms);
}

.labs-page__orb::before {
  content: "";
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 44%, rgba(239, 228, 209, 0.24));
  background: radial-gradient(90% 90% at 36% 28%, rgba(255, 255, 255, 0.18), transparent 64%);
  z-index: 0;
}

.labs-page__orb::after {
  content: "";
  position: absolute;
  top: -45%;
  left: -78%;
  width: 54%;
  height: 188%;
  background: linear-gradient(
    112deg,
    transparent 0%,
    rgba(255, 255, 255, 0.04) 26%,
    rgba(255, 255, 255, 0.62) 50%,
    rgba(255, 255, 255, 0.1) 72%,
    transparent 100%
  );
  filter: blur(0.8px);
  transform: rotate(20deg);
  mix-blend-mode: screen;
  opacity: 0;
  z-index: 3;
  animation: labsOrbGlint 5.4s ease-in-out infinite;
  animation-delay: calc(var(--orb-order, 0) * 260ms + 420ms);
}

.labs-page__orb-ring {
  position: absolute;
  inset: -6.5%;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 56%, rgba(239, 228, 209, 0.2));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 0 28px color-mix(in srgb, var(--orb-glow) 42%, transparent);
  opacity: 0.62;
  pointer-events: none;
  z-index: 1;
  animation: labsOrbPulse 3.8s ease-in-out infinite;
}

.labs-page__orb-core {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 0.36rem;
  text-align: center;
  transform: translateZ(22px);
}

.bridge-icon--labs-orb {
  width: 2.24rem;
  height: 2.24rem;
  border-color: color-mix(in srgb, var(--bridge-accent) 62%, rgba(239, 228, 209, 0.3));
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.28), transparent 46%),
    color-mix(in srgb, var(--bridge-accent) 34%, rgba(16, 22, 31, 0.68));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 0 16px color-mix(in srgb, var(--orb-glow) 40%, transparent);
}

.bridge-icon--labs-orb svg {
  width: 1.28rem;
  height: 1.28rem;
}

.labs-page__orb strong,
.labs-page__orb small {
  margin: 0;
}

.labs-page__orb strong {
  font-family: var(--font-display);
  font-size: clamp(1.06rem, 2vw, 1.34rem);
  color: color-mix(in srgb, var(--paper) 88%, #fff);
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.34);
}

.labs-page__orb small {
  color: color-mix(in srgb, var(--bridge-accent) 70%, var(--paper));
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}

.labs-page__orb.theme-guangji {
  --orb-bright: #f0c47f;
  --orb-mid: #bf7f41;
  --orb-deep: #472910;
}

.labs-page__orb.theme-luoyang {
  --orb-bright: #90dce8;
  --orb-mid: #4c97ac;
  --orb-deep: #123648;
}

.labs-page__orb.theme-zhaozhou {
  --orb-bright: #cae7b4;
  --orb-mid: #88ac65;
  --orb-deep: #25381f;
}

.labs-page__orb:hover,
.labs-page__orb:focus-visible {
  transform: translateY(-6px) scale(1.03);
  border-color: color-mix(in srgb, var(--bridge-accent) 76%, var(--paper));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    inset 0 -34px 50px rgba(8, 12, 18, 0.56),
    0 26px 34px rgba(0, 0, 0, 0.4),
    0 0 44px color-mix(in srgb, var(--orb-glow) 62%, transparent);
}

.labs-page__orb:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--bridge-accent) 80%, #fff);
  outline-offset: 4px;
}

.labs-page__orb:hover::after,
.labs-page__orb:focus-visible::after {
  animation-duration: 2.1s;
}

@keyframes labsOrbFloat {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-4px) scale(1.01);
  }
}

@keyframes labsOrbPulse {
  0%,
  100% {
    opacity: 0.46;
    transform: scale(0.98);
  }
  50% {
    opacity: 0.84;
    transform: scale(1.02);
  }
}

@keyframes labsOrbGlint {
  0%,
  100% {
    transform: translateX(0) rotate(20deg);
    opacity: 0;
  }
  42% {
    opacity: 0.16;
  }
  56% {
    opacity: 0.48;
  }
  100% {
    transform: translateX(280%) rotate(20deg);
    opacity: 0;
  }
}

.bridge-hero__lab-entry {
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 40%, var(--line));
  border-radius: 8px;
  background:
    radial-gradient(88% 96% at 0% 0%, color-mix(in srgb, var(--bridge-accent) 20%, transparent), transparent 58%),
    rgba(239, 228, 209, 0.05);
  padding: 0.62rem 0.72rem;
  display: grid;
  gap: 0.16rem;
  transition: transform var(--dur-fast) var(--easing), border-color var(--dur-fast) var(--easing);
}

.bridge-hero__lab-entry strong,
.bridge-hero__lab-entry span {
  margin: 0;
}

.bridge-hero__lab-entry strong {
  color: var(--color-text-strong);
}

.bridge-hero__lab-entry span {
  color: var(--paper-soft);
  font-size: 0.8rem;
  line-height: 1.55;
}

.bridge-hero__lab-entry:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--bridge-accent) 58%, var(--line));
}

.finale-stage__riverline {
  position: relative;
  margin: 0.6rem auto 0.4rem;
  width: min(720px, 94%);
  min-height: 2.4rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  align-items: center;
  justify-items: center;
  transition: opacity 520ms var(--easing), transform 520ms var(--easing);
}

.finale-stage__riverline > span {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(244, 220, 177, 0.78), rgba(111, 176, 187, 0.6), transparent);
}

.finale-stage__riverline i {
  position: relative;
  z-index: 1;
  font-style: normal;
  border: 1px solid rgba(239, 228, 209, 0.26);
  border-radius: 999px;
  background: rgba(9, 13, 18, 0.72);
  padding: 0.18rem 0.58rem;
  font-size: 0.72rem;
  color: rgba(239, 228, 209, 0.88);
  letter-spacing: 0.08em;
  transition: opacity 520ms var(--easing), transform 520ms var(--easing);
}

.finale-stage__riverline .theme-guangji {
  border-color: rgba(216, 154, 80, 0.44);
}

.finale-stage__riverline .theme-luoyang {
  border-color: rgba(106, 172, 182, 0.44);
}

.finale-stage__riverline .theme-zhaozhou {
  border-color: rgba(181, 189, 159, 0.44);
}

.finale-judgement {
  margin-top: 1.05rem;
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 22%, var(--line));
  border-left: 3px solid color-mix(in srgb, var(--bridge-accent) 50%, var(--line));
  border-radius: 8px;
  background:
    radial-gradient(90% 100% at 0% 0%, color-mix(in srgb, var(--bridge-accent) 14%, transparent), transparent 62%),
    rgba(239, 228, 209, 0.05);
  padding: 0.82rem 0.9rem;
  display: grid;
  gap: 0.3rem;
}

.finale-judgement p {
  margin: 0;
  color: rgba(239, 228, 209, 0.9);
  line-height: 1.7;
}

.finale-stage.is-settled .finale-stage__riverline {
  opacity: 0.18;
  transform: scaleX(0.92);
}

.finale-stage.is-settled .finale-stage__riverline i {
  opacity: 0;
  transform: translateY(4px);
}

@media (max-width: 1120px) {
  .home-hero--showcase {
    grid-template-columns: 1fr;
  }

  .bridge-prelude {
    margin-top: -1.2rem;
  }

  .labs-hub__grid,
  .labs-page__grid {
    grid-template-columns: 1fr;
  }

  .labs-hub__actions {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .home-hero--showcase {
    padding-top: 2.8rem;
  }

  .hero-stage {
    min-height: 320px;
  }

  .hero-stage__bridge figcaption,
  .hero-stage__inscription {
    font-size: 0.68rem;
  }

  .hero-stage__nodes {
    grid-template-columns: 1fr;
    left: 6%;
    right: 6%;
    bottom: 6%;
  }

  .bridge-prelude {
    margin-top: -0.7rem;
  }

  .bridge-prelude__nodes {
    grid-template-columns: 1fr;
    gap: 0.42rem;
  }

  .home-map-modes {
    gap: 0.3rem;
  }

  .home-map-modes button {
    padding: 0.24rem 0.5rem;
    font-size: 0.74rem;
  }

  .marker-tooltip__actions {
    grid-template-columns: 1fr;
  }

  .labs-page__hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .finale-stage__riverline {
    grid-template-columns: 1fr;
    gap: 0.34rem;
  }
}

/* =========================
   Third Optimization Book
========================= */

.page-home-map--scroll-chronicle {
  --home-main-module-width: var(--container);
  position: relative;
  isolation: isolate;
}

.hero-immersive {
  position: relative;
  width: var(--home-main-module-width);
  min-height: min(92vh, 860px);
  margin: 0 auto;
  padding: clamp(2.8rem, 7vh, 4.6rem) clamp(1rem, 2.8vw, 2rem) 5.2rem;
  display: grid;
  align-items: end;
}

.hero-immersive__stage {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(239, 228, 209, 0.2);
  border-radius: 8px;
  overflow: hidden;
  box-shadow:
    0 36px 92px rgba(2, 7, 10, 0.62),
    inset 0 0 0 1px rgba(255, 240, 208, 0.07);
}

.hero-immersive__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(0.88) contrast(1.06);
}

.hero-immersive__bg--main {
  opacity: 0.74;
  background-position: center;
  filter: saturate(0.9) contrast(1.02);
}

.hero-immersive__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(94% 78% at 12% 6%, rgba(208, 163, 92, 0.2), transparent 58%),
    radial-gradient(78% 72% at 86% 92%, rgba(124, 169, 171, 0.2), transparent 62%),
    linear-gradient(170deg, rgba(8, 13, 19, 0.46), rgba(6, 10, 14, 0.72));
}

.hero-immersive__mist {
  position: absolute;
  width: min(40vw, 500px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(46px);
  opacity: 0.26;
}

.hero-immersive__mist--a {
  left: -8%;
  top: -6%;
  background: rgba(202, 152, 84, 0.3);
}

.hero-immersive__mist--b {
  right: -12%;
  bottom: -12%;
  background: rgba(95, 158, 170, 0.28);
}

.hero-immersive__riverline {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 26%;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(242, 216, 175, 0.8), rgba(111, 176, 187, 0.62), transparent);
}

.hero-immersive__grain {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(249, 236, 209, 0.24) 1px, transparent 0);
  background-size: 9px 9px;
  opacity: 0.08;
}

.hero-immersive__content {
  position: relative;
  z-index: 2;
  width: min(620px, 56%);
  display: grid;
  gap: 0.72rem;
}

.hero-immersive__eyebrow {
  margin: 0;
  color: rgba(255, 241, 212, 0.92);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.74rem;
}

.hero-immersive__eyebrow--corner {
  position: absolute;
  left: clamp(1rem, 2.8vw, 2rem);
  top: clamp(0.92rem, 2vh, 1.28rem);
  z-index: 3;
  text-shadow: 0 2px 8px rgba(18, 12, 8, 0.35);
}

.hero-immersive h1 {
  margin: 0;
  font-family: "STKaiti", "KaiTi", "Kaiti SC", "Songti SC", serif;
  font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 5.2rem);
  line-height: 1.05;
  letter-spacing: 0.06em;
  max-width: 12ch;
  color: #fef3d5;
  background: linear-gradient(158deg, #fffdf3 0%, #ffe8ad 38%, #ffbe6f 72%, #9de3ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 2px 0 rgba(255, 247, 228, 0.24),
    0 10px 24px rgba(20, 13, 8, 0.36);
  -webkit-text-stroke: 0.56px rgba(51, 32, 17, 0.2);
}

.hero-immersive__subtitle,
.hero-immersive__annotation {
  margin: 0;
  max-width: 54ch;
  line-height: 1.75;
  color: rgba(239, 228, 209, 0.86);
}

.hero-immersive__subtitle {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
}

.hero-immersive__annotation {
  font-size: 0.88rem;
  color: rgba(255, 241, 212, 0.94);
  text-shadow: 0 4px 14px rgba(17, 10, 7, 0.28);
}

.hero-immersive__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.64rem;
  align-items: center;
}

.hero-immersive__entry {
  position: absolute;
  left: clamp(1rem, 2.8vw, 2rem);
  bottom: 1.2rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.hero-immersive__down {
  border: 1px solid rgba(239, 228, 209, 0.2);
  border-radius: 8px;
  background: rgba(239, 228, 209, 0.06);
  color: rgba(239, 228, 209, 0.82);
  padding: 0.42rem 0.72rem;
  font-size: 0.78rem;
  cursor: pointer;
}

.river-axis {
  padding-top: 2rem;
  padding-bottom: 1.4rem;
  display: grid;
  gap: 0.75rem;
}

.river-axis__header {
  display: grid;
  gap: 0.24rem;
}

.river-axis__header p,
.river-axis__header h2 {
  margin: 0;
}

.river-axis__header p {
  font-size: 0.74rem;
  color: rgba(239, 228, 209, 0.72);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.river-axis__header h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.4rem);
}

.river-axis__line-wrap {
  position: relative;
  height: 10px;
}

.river-axis__line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(240, 216, 175, 0.86), rgba(107, 174, 189, 0.62), transparent);
}

.river-axis__nodes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
}

.river-axis__node {
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 34%, var(--line));
  border-radius: 8px;
  background: rgba(239, 228, 209, 0.04);
  color: var(--paper);
  padding: 0.62rem 0.72rem;
  text-align: left;
  display: grid;
  gap: 0.16rem;
  cursor: pointer;
  transition: all var(--dur-fast) var(--easing);
}

.river-axis__node:hover,
.river-axis__node.is-active {
  border-color: color-mix(in srgb, var(--bridge-accent) 62%, var(--line));
  background: color-mix(in srgb, var(--bridge-accent) 14%, rgba(239, 228, 209, 0.05));
}

.river-axis__node strong {
  font-size: 0.95rem;
}

.river-axis__node small {
  color: rgba(239, 228, 209, 0.76);
  font-size: 0.76rem;
}

.river-axis__keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 0.26rem;
  margin-top: 0.18rem;
}

.river-axis__keywords span {
  border: 1px solid rgba(239, 228, 209, 0.24);
  border-radius: 999px;
  padding: 0.1rem 0.42rem;
  font-size: 0.68rem;
  color: rgba(239, 228, 209, 0.84);
}

.home-atlas-section {
  padding-top: 2.1rem;
}

.home-atlas-main {
  display: grid;
  grid-template-columns: minmax(0, 1.88fr) minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
}

.page-home-map--scroll-chronicle .home-map-panel {
  min-height: min(74vh, 760px);
  border: 1px solid rgba(239, 228, 209, 0.22);
  border-radius: 8px;
  background:
    radial-gradient(94% 90% at 0% 0%, color-mix(in srgb, var(--panel-accent) 20%, transparent), transparent 58%),
    rgba(239, 228, 209, 0.05);
  padding: 0.84rem;
}

.home-atlas-card {
  border: 1px solid rgba(239, 228, 209, 0.22);
  border-radius: 8px;
  background: rgba(239, 228, 209, 0.04);
  padding: 0.68rem;
}

.home-atlas-card h3,
.home-atlas-card h4,
.home-atlas-card p {
  margin: 0;
}

.home-atlas-card--focus {
  border-left: 3px solid var(--panel-accent, var(--bridge-accent));
}

.home-atlas-card__meta {
  color: rgba(239, 228, 209, 0.72);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
}

.home-atlas-card--focus h3 {
  margin-top: 0.28rem;
  font-size: 1.46rem;
}

.home-atlas-card__summary {
  margin-top: 0.36rem;
  color: rgba(239, 228, 209, 0.84);
  line-height: 1.62;
  font-size: 0.82rem;
}

.home-atlas-card__line {
  margin-top: 0.42rem;
  color: color-mix(in srgb, var(--panel-accent) 72%, var(--paper));
  font-size: 0.76rem;
}

.home-atlas-card__actions {
  margin-top: 0.58rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.34rem;
}

.home-atlas-card__actions .btn {
  width: 100%;
}

.home-atlas-card--lab {
  margin-top: 0.56rem;
}

.home-atlas-card--lab p {
  margin-top: 0.36rem;
  color: rgba(239, 228, 209, 0.82);
  line-height: 1.6;
  font-size: 0.8rem;
}

.home-atlas-keywords {
  margin-top: 0.42rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.home-atlas-keywords span {
  border: 1px solid rgba(239, 228, 209, 0.22);
  border-radius: 999px;
  padding: 0.1rem 0.42rem;
  font-size: 0.68rem;
  color: rgba(239, 228, 209, 0.84);
}

.home-atlas-card--switch {
  margin-top: 0.56rem;
}

.home-scene-gallery {
  padding-top: clamp(2.4rem, 7vh, 4.2rem);
}

.home-scene-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 0.86rem;
}

.home-scene-card {
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 30%, var(--line));
  border-radius: 8px;
  overflow: hidden;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
  background:
    radial-gradient(86% 86% at 100% 0%, color-mix(in srgb, var(--bridge-accent) 18%, transparent), transparent 58%),
    rgba(239, 228, 209, 0.045);
  transition: transform var(--dur-fast) var(--easing), border-color var(--dur-fast) var(--easing);
}

.home-scene-card:hover,
.home-scene-card.is-active {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--bridge-accent) 58%, var(--line));
}

.home-scene-card__media {
  height: 210px;
  overflow: hidden;
}

.home-scene-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-scene-card__body {
  padding: 0.72rem;
  display: grid;
  gap: 0.38rem;
}

.home-scene-card__body p,
.home-scene-card__body h3,
.home-scene-card__body span {
  margin: 0;
}

.home-scene-card__body p {
  color: color-mix(in srgb, var(--bridge-accent) 70%, var(--paper));
  letter-spacing: 0.1em;
  font-size: 0.74rem;
}

.home-scene-card__body span {
  color: var(--paper-soft);
  font-size: 0.82rem;
  line-height: 1.58;
}

.home-scene-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
}

.home-scene-card__tags span {
  border: 1px solid rgba(239, 228, 209, 0.2);
  border-radius: 999px;
  padding: 0.1rem 0.42rem;
  font-size: 0.66rem;
  color: rgba(239, 228, 209, 0.86);
}

.home-scene-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.38rem;
  margin-top: 0.18rem;
}

.labs-overview {
  padding-top: clamp(2.4rem, 7vh, 4.2rem);
}

.labs-overview__title {
  display: grid;
  gap: 0.55rem;
  max-width: 760px;
  margin-bottom: 1.2rem;
}

.labs-overview__title p,
.labs-overview__title h2,
.labs-overview__title span {
  margin: 0;
}

.labs-overview__title p {
  font-size: 0.76rem;
  color: color-mix(in srgb, var(--bridge-accent) 68%, var(--paper));
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.labs-overview__title h2 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 3.3rem);
  line-height: 1.18;
  letter-spacing: 0.08em;
  color: rgba(255, 240, 180, 0.95);
}

.labs-overview__title span {
  color: var(--paper-soft);
  line-height: 1.75;
}

.labs-overview__grid {
  margin-top: 0.94rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 0.84rem;
}

.labs-overview__card {
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 28%, var(--line));
  border-radius: 8px;
  background:
    radial-gradient(88% 92% at 100% 0%, color-mix(in srgb, var(--bridge-accent) 18%, transparent), transparent 58%),
    rgba(239, 228, 209, 0.045);
  height: 100%;
  padding: 0.78rem;
  display: grid;
  gap: 0.52rem;
}

.labs-overview__card header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.56rem;
  align-items: center;
}

.labs-overview__card header p,
.labs-overview__card header h3,
.labs-overview__card > span,
.labs-overview__card > p {
  margin: 0;
}

.labs-overview__card header p {
  color: color-mix(in srgb, var(--bridge-accent) 70%, var(--paper));
  letter-spacing: 0.08em;
  font-size: 0.74rem;
}

.labs-overview__card > span {
  color: var(--paper-soft);
  font-size: 0.82rem;
  line-height: 1.58;
}

.labs-overview__meters,
.labs-page__metrics {
  display: grid;
  gap: 0.36rem;
}

.labs-overview__meter,
.labs-page__metric {
  display: grid;
  gap: 0.16rem;
}

.labs-overview__meter small,
.labs-page__metric small {
  color: rgba(239, 228, 209, 0.74);
  font-size: 0.68rem;
}

.labs-overview__meter i,
.labs-page__metric i {
  display: block;
  height: 0.34rem;
  border-radius: 999px;
  background: rgba(239, 228, 209, 0.1);
  overflow: hidden;
}

.labs-overview__meter b,
.labs-page__metric b {
  display: block;
  width: var(--meter-value);
  height: 100%;
  background: linear-gradient(90deg, var(--bridge-accent), rgba(111, 176, 187, 0.82));
}

.labs-overview__actions {
  margin-top: 0.12rem;
}

.labs-overview__entry {
  margin-top: 0.86rem;
  display: flex;
  justify-content: flex-start;
}

.china-map__annotation {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 5;
  max-width: min(310px, 52%);
  border: 1px solid rgba(239, 228, 209, 0.24);
  border-radius: 8px;
  background: rgba(8, 12, 17, 0.68);
  padding: 0.5rem 0.58rem;
  backdrop-filter: blur(8px);
}

.china-map__annotation strong,
.china-map__annotation p {
  margin: 0;
}

.china-map__annotation strong {
  font-size: 0.78rem;
  color: rgba(245, 230, 204, 0.9);
}

.china-map__annotation p {
  margin-top: 0.16rem;
  color: rgba(239, 228, 209, 0.76);
  font-size: 0.72rem;
  line-height: 1.56;
}

.china-map__waterway {
  fill: none;
  stroke: rgba(132, 195, 214, 0.36);
  stroke-width: 1.6;
  stroke-dasharray: 4 10;
  stroke-linecap: round;
}

.china-map__waterway--minor {
  stroke-width: 1.2;
  opacity: 0.56;
}

.bridge-marker__thumb {
  width: 100%;
  height: 74px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid rgba(239, 228, 209, 0.2);
  margin-bottom: 0.34rem;
}

.bridge-marker__tooltip {
  min-width: 196px;
}

@media (max-width: 1120px) {
  .hero-immersive {
    min-height: auto;
    padding-bottom: 4.2rem;
  }

  .hero-immersive__content {
    width: 100%;
    max-width: 640px;
  }

  .hero-immersive__entry {
    left: 1rem;
  }

  .river-axis__nodes,
  .home-scene-gallery__grid,
  .labs-overview__grid,
  .home-atlas-main {
    grid-template-columns: 1fr;
  }

  .home-atlas-card__actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .hero-immersive {
    padding-top: 2.4rem;
    padding-bottom: 4.8rem;
  }

  .hero-immersive h1 {
    font-size: clamp(2rem, 13vw, 3.2rem);
  }

  .hero-immersive__eyebrow--corner {
    left: 1rem;
    top: 0.9rem;
    font-size: 0.66rem;
    letter-spacing: 0.13em;
  }

  .hero-immersive__stage {
    border-radius: 8px;
  }

  .hero-immersive__entry {
    right: 1rem;
    left: 1rem;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .china-map__annotation {
    max-width: calc(100% - 88px);
  }
}

/* =========================
   Third Addendum: Map Retention
========================= */

.page-home-map--map-retain .hero-immersive {
  min-height: min(88vh, 860px);
  padding-bottom: 4rem;
}

.home-bridge-axis {
  min-height: clamp(160px, 24vh, 260px);
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
  display: grid;
  align-content: center;
  gap: 0.56rem;
}

.home-bridge-axis__header {
  display: grid;
  gap: 0.55rem;
  max-width: 760px;
  margin-bottom: 1.2rem;
}

.home-bridge-axis__header p,
.home-bridge-axis__header h2 {
  margin: 0;
}

.home-bridge-axis__header p {
  font-size: 0.76rem;
  color: color-mix(in srgb, var(--bridge-accent) 68%, var(--paper));
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.home-bridge-axis__header h2 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 3.3rem);
  line-height: 1.18;
  letter-spacing: 0.08em;
  color: rgba(255, 240, 180, 0.95);
}

.home-bridge-axis__track {
  position: relative;
  height: 10px;
}

.home-bridge-axis__line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(243, 220, 180, 0.84), rgba(112, 178, 191, 0.62), transparent);
}

.home-bridge-axis__nodes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 0.58rem;
}

.home-bridge-axis__card {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: 0.62rem;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 36%, var(--line));
  border-radius: 8px;
  background:
    radial-gradient(90% 100% at 0% 0%, color-mix(in srgb, var(--bridge-accent) 20%, transparent), transparent 56%),
    rgba(8, 13, 18, 0.74);
  color: var(--paper);
  padding: 0.4rem;
  min-height: 112px;
  text-align: left;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--easing), border-color var(--dur-fast) var(--easing);
}

.home-bridge-axis__card:hover,
.home-bridge-axis__card.is-active {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--bridge-accent) 66%, var(--line));
}

.home-bridge-axis__thumb {
  width: 100%;
  height: 60px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(239, 228, 209, 0.2);
}

.home-bridge-axis__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-bridge-axis__text {
  display: grid;
  gap: 0.08rem;
}

.home-bridge-axis__text strong {
  font-size: 0.94rem;
}

.home-bridge-axis__text small {
  color: rgba(239, 228, 209, 0.74);
  font-size: 0.76rem;
}

.home-map-stage {
  --home-map-stage-height: clamp(620px, 68vh, 710px);
  --map-viewport-top: 5%;
  --map-viewport-left: 3.8%;
  --map-viewport-width: 92.6%;
  --map-viewport-height: 89.6%;
  width: 100%;
  padding-top: 1.2rem;
  padding-bottom: 2rem;
}

.home-map-stage__header {
  width: var(--home-main-module-width);
  margin: 0 auto 1rem;
  padding-left: 0;
}

.home-map-stage__body {
  display: block;
  width: var(--home-main-module-width);
  margin: 0 auto;
  max-width: 100%;
}

.home-map-stage__canvas {
  width: 100%;
  min-height: var(--home-map-stage-height);
}

.home-map-stage__canvas .china-map {
  width: 100%;
  min-height: clamp(520px, 60vh, 620px);
  aspect-ratio: 1.68 / 1;
}

.home-map-stage__canvas .china-map__viewport {
  position: absolute;
  left: var(--map-viewport-left);
  top: var(--map-viewport-top);
  width: var(--map-viewport-width);
  height: var(--map-viewport-height);
  z-index: 3;
}

.home-map-stage__canvas .china-map__terrain {
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
  transform: none;
}

.home-map-stage__canvas .china-map__markers {
  inset: 0;
  width: 100%;
  height: 100%;
}

.home-map-stage__canvas .china-map__annotation {
  max-width: min(360px, 48%);
}

.home-map-stage__canvas .china-map-svg {
  transform-box: fill-box;
}

.bridge-marker--luoyang .bridge-marker__tooltip {
  top: calc(50% - 14px);
}

.bridge-marker--guangji .bridge-marker__tooltip {
  top: calc(50% + 16px);
}

.page-home-map--map-retain .home-scene-gallery {
  padding-top: 1.6rem;
}

.page-home-map--map-retain .home-scene-card__media {
  height: 184px;
}

.page-home-map--map-retain .home-scene-card {
  background:
    radial-gradient(72% 74% at 100% 0%, color-mix(in srgb, var(--bridge-accent) 12%, transparent), transparent 58%),
    rgba(239, 228, 209, 0.04);
}

.page-home-map--map-retain .labs-overview {
  padding-top: 1.9rem;
}

@media (max-width: 1120px) {
  .home-bridge-axis__nodes {
    grid-template-columns: 1fr;
  }

  .home-map-stage {
    --home-map-stage-height: clamp(560px, 62vh, 640px);
    width: 100%;
  }

  .home-map-stage__header {
    width: 100%;
    padding-left: 0;
  }

  .home-map-stage__body {
    width: 100%;
  }

  .home-map-stage__canvas .china-map {
    min-height: 540px;
    aspect-ratio: 1.56 / 1;
  }
}

@media (max-width: 760px) {
  .page-home-map--map-retain .hero-immersive {
    padding-bottom: 4.6rem;
  }

  .home-bridge-axis {
    min-height: auto;
    padding-top: 0.6rem;
    padding-bottom: 0.4rem;
  }

  .home-bridge-axis__nodes {
    grid-template-columns: 1fr;
  }

  .home-bridge-axis__card {
    grid-template-columns: 84px 1fr;
    min-height: 104px;
  }

  .home-bridge-axis__thumb {
    height: 56px;
  }

  .home-map-stage {
    --map-viewport-top: 8%;
    --map-viewport-left: 5.6%;
    --map-viewport-width: 89%;
    --map-viewport-height: 82%;
    width: 100%;
    padding-top: 0.8rem;
  }

  .home-map-stage__canvas .china-map {
    min-height: 470px;
    aspect-ratio: 1.28 / 1;
  }

  .home-map-stage__canvas .china-map__terrain {
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .home-map-stage__canvas .china-map__markers {
    inset: 0;
    width: 100%;
    height: 100%;
  }
}

/* =========================
   Home Finale-Style Scroll Trial
========================= */

.page-home-map--finale-scroll {
  --home-main-module-width: min(1180px, 92vw);
  --home-act-h: calc(100vh - var(--nav-h));
  --home-act-padding-y: clamp(1rem, 2.6vh, 2.3rem);
  position: relative;
  isolation: isolate;
  overflow: clip;
  background:
    radial-gradient(46% 76% at 0% 48%, rgba(37, 112, 141, 0.34), transparent 68%),
    radial-gradient(48% 78% at 100% 44%, rgba(177, 107, 65, 0.3), transparent 70%),
    radial-gradient(118% 72% at 50% 0%, rgba(216, 178, 104, 0.22), transparent 64%),
    radial-gradient(72% 46% at 10% 34%, rgba(82, 145, 166, 0.18), transparent 68%),
    radial-gradient(76% 48% at 92% 66%, rgba(190, 118, 71, 0.14), transparent 70%),
    linear-gradient(180deg, #05080d 0%, #08131e 46%, #060a10 100%);
}

.page-home-map--finale-scroll::before,
.page-home-map--finale-scroll::after {
  content: "";
  position: fixed;
  inset: var(--nav-h) 0 0;
  z-index: 0;
  pointer-events: none;
}

.page-home-map--finale-scroll::before {
  opacity: 0.92;
  background:
    radial-gradient(ellipse 28% 96% at 0% 48%, rgba(80, 156, 184, 0.28), transparent 72%),
    radial-gradient(ellipse 30% 96% at 100% 46%, rgba(206, 137, 74, 0.24), transparent 74%),
    radial-gradient(circle at 3% 20%, rgba(244, 224, 176, 0.13) 0 1px, transparent 2px),
    radial-gradient(circle at 97% 72%, rgba(154, 207, 214, 0.12) 0 1px, transparent 2px),
    radial-gradient(ellipse 118% 32% at 50% 100%, rgba(199, 161, 91, 0.22), transparent 72%),
    radial-gradient(ellipse 82% 24% at 14% 90%, rgba(103, 166, 184, 0.12), transparent 68%),
    linear-gradient(180deg, rgba(4, 6, 10, 0) 0%, rgba(4, 6, 10, 0.28) 78%, rgba(4, 6, 10, 0.66) 100%);
  background-size: auto, auto, 26px 26px, 30px 30px, auto, auto, auto;
}

.page-home-map--finale-scroll::after {
  opacity: 0.16;
  background:
    linear-gradient(rgba(239, 214, 164, 0.24) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 194, 206, 0.18) 1px, transparent 1px),
    repeating-linear-gradient(90deg, transparent 0 7.5vw, rgba(239, 214, 164, 0.035) 7.5vw 7.58vw, transparent 7.58vw 15vw);
  background-size: 96px 96px, 96px 96px, auto;
  mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.44) 24%, rgba(0, 0, 0, 0.28) 50%, rgba(0, 0, 0, 0.44) 76%, #000 100%);
}

.page-home-map--finale-scroll > [data-home-act] {
  position: relative;
  z-index: 1;
  width: var(--home-main-module-width);
  height: var(--home-act-h);
  min-height: var(--home-act-h);
  margin: 0 auto;
  padding: var(--home-act-padding-y) clamp(0.9rem, 2.6vw, 2.2rem);
  overflow: clip;
  scroll-margin-top: var(--nav-h);
  border: 0;
  background: transparent;
  box-shadow: none;
}

.page-home-map--finale-scroll > [data-home-act]::before {
  display: none;
}

.page-home-map--finale-scroll > [data-home-act]::after {
  content: "";
  position: absolute;
  inset: 7% -9% 6%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.58;
  background:
    radial-gradient(ellipse 9% 33% at 0% 30%, rgba(151, 204, 215, 0.18), transparent 72%),
    radial-gradient(ellipse 10% 34% at 100% 72%, rgba(218, 159, 83, 0.16), transparent 74%),
    repeating-radial-gradient(ellipse at 0% 84%, transparent 0 44px, rgba(234, 205, 146, 0.07) 45px 46px, transparent 47px 88px),
    repeating-radial-gradient(ellipse at 100% 16%, transparent 0 48px, rgba(132, 192, 204, 0.065) 49px 50px, transparent 51px 94px);
}

.page-home-map--finale-scroll .hero-immersive {
  width: min(1540px, 97vw);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: start;
  min-height: var(--home-act-h);
  padding-top: clamp(1.35rem, 4vh, 3.4rem);
  padding-bottom: clamp(1.8rem, 4.2vh, 3.4rem);
}

.page-home-map--finale-scroll .hero-immersive__stage {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.page-home-map--finale-scroll .hero-immersive__stage::before {
  background:
    radial-gradient(92% 78% at 17% 13%, rgba(231, 186, 108, 0.16), transparent 62%),
    radial-gradient(88% 82% at 84% 86%, rgba(93, 163, 176, 0.14), transparent 66%),
    linear-gradient(170deg, rgba(237, 223, 188, 0.08), rgba(5, 8, 12, 0.05));
}

.page-home-map--finale-scroll .hero-immersive__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6, 13, 18, 0.18), transparent 18%, transparent 82%, rgba(6, 13, 18, 0.18)),
    linear-gradient(180deg, rgba(4, 8, 12, 0.04), transparent 18%, transparent 82%, rgba(4, 8, 12, 0.1));
  mask-image:
    linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.64) 7%, transparent 17%, transparent 83%, rgba(0, 0, 0, 0.64) 93%, #000 100%),
    linear-gradient(180deg, #000 0%, transparent 10%, transparent 88%, #000 100%);
}

.page-home-map--finale-scroll .hero-immersive__bg {
  inset: -3% -5%;
  width: auto;
  height: auto;
  opacity: 0.96;
  mix-blend-mode: multiply;
  background-color: transparent;
  filter: saturate(1.04) contrast(1.18) brightness(1.04);
  transform: scale(1.035);
  transform-origin: center;
}

.page-home-map--finale-scroll .hero-immersive__bg--main {
  opacity: 0.98;
  background-position: center;
}

.page-home-map--finale-scroll .hero-immersive__mist,
.page-home-map--finale-scroll .hero-immersive__riverline {
  mix-blend-mode: screen;
}

.page-home-map--finale-scroll .hero-immersive__content {
  grid-row: 1;
  width: min(520px, 48%);
  align-self: start;
  justify-self: start;
  margin-top: clamp(0.2rem, 1.8vh, 1.3rem);
  margin-left: clamp(0.7rem, 2.8vw, 2.3rem);
  gap: 0.58rem;
}

.page-home-map--finale-scroll .hero-immersive h1 {
  position: relative;
  width: max-content;
  max-width: 100%;
  font-family: "STXingkai", "华文行楷", "FZKai-Z03", "STKaiti", "Kaiti SC", "KaiTi", serif;
  font-size: clamp(2.5rem, 5.65vw, 5.25rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: 0;
  color: #31281f;
  background: linear-gradient(118deg, #201913 0%, #4b3928 38%, #17120e 62%, #66523b 100%);
  background-size: 180% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 1px 0 rgba(255, 249, 232, 0.36),
    0 8px 18px rgba(88, 70, 48, 0.24);
  filter: drop-shadow(0 2px 2px rgba(255, 246, 220, 0.18));
  animation: home-title-luster 8s ease-in-out infinite;
}

.page-home-map--finale-scroll .hero-immersive h1::after {
  content: "";
  position: absolute;
  left: 0;
  right: 14%;
  bottom: -0.36rem;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 244, 198, 0), rgba(255, 244, 198, 0.86), rgba(138, 221, 234, 0.52), rgba(255, 244, 198, 0));
  transform-origin: left;
  animation: home-title-underline 4.6s ease-in-out infinite;
}

@keyframes home-title-luster {
  0%,
  100% {
    background-position: 0% 50%;
    filter: drop-shadow(0 2px 2px rgba(255, 246, 220, 0.16));
  }

  50% {
    background-position: 100% 50%;
    filter: drop-shadow(0 3px 3px rgba(255, 246, 220, 0.24));
  }
}

@keyframes home-title-underline {
  0%,
  100% {
    transform: scaleX(0.36);
    opacity: 0.5;
  }

  50% {
    transform: scaleX(1);
    opacity: 0.95;
  }
}

.page-home-map--finale-scroll .hero-immersive__subtitle,
.page-home-map--finale-scroll .hero-immersive__annotation {
  max-width: 50ch;
}

.page-home-map--finale-scroll .hero-immersive__dock {
  grid-row: 3;
  position: relative;
  z-index: 2;
  align-self: end;
  justify-self: start;
  width: min(620px, calc(100% - 2rem));
  margin-left: clamp(0.7rem, 2.8vw, 2.3rem);
  margin-bottom: clamp(0.3rem, 1.4vh, 1rem);
  display: grid;
  gap: clamp(0.62rem, 1.2vh, 0.9rem);
}

.page-home-map--finale-scroll .hero-immersive__dock .hero-immersive__annotation {
  margin: 0;
  color: rgba(255, 248, 230, 0.92);
  font-family: "STKaiti", "KaiTi", "Kaiti SC", "Noto Serif SC", serif;
  font-size: clamp(1rem, 1.4vw, 1.22rem);
  line-height: 1.55;
  text-shadow: 0 2px 8px rgba(25, 20, 13, 0.44), 0 10px 22px rgba(25, 20, 13, 0.24);
}

.page-home-map--finale-scroll .hero-immersive__dock .hero-immersive__actions {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.52rem, 1vw, 0.8rem);
}

.page-home-map--finale-scroll .hero-immersive__dock .btn {
  min-width: clamp(9.6rem, 14vw, 13rem);
  border-color: rgba(246, 219, 162, 0.42);
  background:
    linear-gradient(135deg, rgba(219, 164, 84, 0.94), rgba(188, 133, 62, 0.92)),
    rgba(219, 164, 84, 0.86);
  color: #fff5dc;
  box-shadow: 0 12px 26px rgba(100, 62, 24, 0.22);
}

.page-home-map--finale-scroll .home-bridge-axis:not(.home-bridge-axis--embedded) {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: center;
  gap: clamp(0.65rem, 1.5vh, 1rem);
}

.page-home-map--finale-scroll .home-bridge-axis__header,
.page-home-map--finale-scroll .home-section-heading,
.page-home-map--finale-scroll .home-map-stage__header,
.page-home-map--finale-scroll .video-showcase__head {
  justify-self: center;
  max-width: min(880px, 92%);
  margin: 0 auto;
  text-align: center;
}

.page-home-map--finale-scroll .home-bridge-axis__header h2,
.page-home-map--finale-scroll .home-section-heading h2,
.page-home-map--finale-scroll .home-stage-title h2,
.page-home-map--finale-scroll .video-showcase__head h2 {
  font-size: clamp(1.9rem, 3.6vw, 3.15rem);
}

.page-home-map--finale-scroll .home-bridge-axis__track {
  width: min(820px, 84%);
  justify-self: center;
}

.page-home-map--finale-scroll .home-bridge-axis__nodes {
  align-self: center;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.72rem, 1.5vw, 1rem);
}

.page-home-map--finale-scroll .home-bridge-axis__card {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  align-content: start;
  gap: 0.62rem;
  min-height: 0;
  padding: clamp(0.58rem, 1.2vw, 0.82rem);
  text-align: center;
}

.page-home-map--finale-scroll .home-bridge-axis__thumb {
  height: clamp(110px, 20vh, 190px);
}

.page-home-map--finale-scroll .video-showcase--home {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: center;
  gap: clamp(0.56rem, 1.25vh, 0.9rem);
}

.page-home-map--finale-scroll .video-showcase--home .video-showcase__head span {
  display: block;
  max-width: 58rem;
  font-size: 0.9rem;
  line-height: 1.62;
}

.page-home-map--finale-scroll .video-showcase--home .video-showcase__grid {
  min-height: 0;
  align-self: center;
}

.page-home-map--finale-scroll .video-showcase--home .video-showcase__card {
  min-height: 0;
  max-height: calc(var(--home-act-h) - 16.2rem);
  grid-template-columns: minmax(0, 1.36fr) minmax(280px, 0.64fr);
  border-color: rgba(239, 228, 209, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
    rgba(8, 13, 18, 0.26);
  box-shadow: none;
}

.page-home-map--finale-scroll .video-showcase--home .video-showcase__frame {
  max-height: calc(var(--home-act-h) - 16.2rem);
}

.page-home-map--finale-scroll .video-showcase--home .video-showcase__frame,
.page-home-map--finale-scroll .video-showcase--home .video-showcase__frame--hls video {
  min-height: 0;
}

.page-home-map--finale-scroll .video-showcase--home .video-showcase__copy p {
  font-size: 0.86rem;
  line-height: 1.58;
}

.page-home-map--finale-scroll .home-bridge-axis--embedded {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: clamp(0.34rem, 0.8vh, 0.58rem);
  align-content: start;
  min-height: 0;
  margin: clamp(0.1rem, 0.5vh, 0.32rem) auto 0;
  padding: clamp(0.45rem, 1vh, 0.68rem) clamp(0.52rem, 1.4vw, 0.9rem);
  width: min(100%, 1060px);
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  background:
    radial-gradient(70% 150% at 0% 50%, rgba(245, 247, 241, 0.16), transparent 68%),
    radial-gradient(72% 150% at 100% 50%, rgba(255, 252, 235, 0.12), transparent 70%),
    linear-gradient(90deg, rgba(230, 235, 229, 0.12), rgba(250, 248, 235, 0.07), rgba(219, 232, 234, 0.11));
  box-shadow: none;
}

.page-home-map--finale-scroll .home-bridge-axis--embedded::before,
.page-home-map--finale-scroll .home-bridge-axis--embedded::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.page-home-map--finale-scroll .home-bridge-axis--embedded::before {
  background:
    linear-gradient(90deg, transparent 0%, rgba(255, 255, 246, 0.16) 48%, transparent 100%),
    repeating-linear-gradient(90deg, transparent 0 11%, rgba(255, 255, 255, 0.11) 11% 11.14%, transparent 11.14% 22%);
  opacity: 0.9;
}

.page-home-map--finale-scroll .home-bridge-axis--embedded::after {
  inset: auto 7% 50%;
  height: 1px;
  transform: translateY(50%) scaleX(0.42);
  transform-origin: center;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 248, 0.95), rgba(226, 248, 252, 0.8), transparent);
  opacity: 0.72;
  transition: transform 760ms var(--easing), opacity 760ms var(--easing);
}

.page-home-map--finale-scroll .home-bridge-axis--embedded .home-bridge-axis__header {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 0.7rem;
  max-width: none;
  margin: 0;
}

.page-home-map--finale-scroll .home-bridge-axis--embedded .home-bridge-axis__header p {
  font-size: 0.68rem;
}

.page-home-map--finale-scroll .home-bridge-axis--embedded .home-bridge-axis__header h2 {
  font-size: clamp(1.18rem, 2.2vw, 1.72rem);
  letter-spacing: 0.12em;
  color: rgba(255, 255, 248, 0.96);
}

.page-home-map--finale-scroll .home-bridge-axis--embedded .home-bridge-axis__track {
  position: relative;
  z-index: 1;
  width: min(760px, 78%);
  height: 8px;
}

.page-home-map--finale-scroll .home-bridge-axis--embedded .home-bridge-axis__line {
  opacity: 1;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), rgba(226, 248, 252, 0.72), transparent);
}

.page-home-map--finale-scroll .home-bridge-axis--embedded .home-bridge-axis__nodes {
  position: relative;
  z-index: 1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.5rem, 1.1vw, 0.72rem);
}

.page-home-map--finale-scroll .home-bridge-axis--embedded .home-bridge-axis__card {
  grid-template-columns: 82px minmax(0, 1fr);
  grid-template-rows: 1fr;
  min-height: 82px;
  padding: 0.42rem;
  gap: 0.48rem;
  text-align: left;
  background:
    radial-gradient(80% 110% at 0% 0%, color-mix(in srgb, var(--bridge-accent) 16%, transparent), transparent 60%),
    rgba(7, 12, 18, 0.34);
}

.page-home-map--finale-scroll.is-home-pager-ready .home-bridge-axis--embedded .home-bridge-axis__card {
  opacity: 0;
  transform: translateY(18px) scale(0.98);
}

.page-home-map--finale-scroll .home-bridge-axis--embedded .home-bridge-axis__thumb {
  grid-row: 1;
  height: 62px;
}

.page-home-map--finale-scroll .home-bridge-axis--embedded .home-bridge-axis__text strong {
  font-size: 0.92rem;
}

.page-home-map--finale-scroll .home-bridge-axis--embedded .home-bridge-axis__text small {
  font-size: 0.72rem;
}

.page-home-map--finale-scroll .video-showcase--home.is-home-act-visible .home-bridge-axis--embedded::after {
  transform: translateY(50%) scaleX(1);
  opacity: 1;
}

.page-home-map--finale-scroll .video-showcase--home.is-home-act-visible .home-bridge-axis--embedded .home-bridge-axis__card {
  animation: home-axis-card-in 760ms var(--easing) both;
  animation-delay: calc(160ms + var(--axis-card-index) * 150ms);
}

@keyframes home-axis-card-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
    filter: blur(2px);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: none;
  }
}

.page-home-map--finale-scroll .home-map-stage {
  --home-map-stage-height: min(81vh, calc(var(--home-act-h) - 3.2rem));
  --map-viewport-top: 5.4%;
  --map-viewport-left: 4.2%;
  --map-viewport-width: 91.8%;
  --map-viewport-height: 88.8%;
  width: min(1540px, 97vw);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: center;
  gap: clamp(0.12rem, 0.42vh, 0.34rem);
  padding: clamp(0.36rem, 0.85vh, 0.72rem) clamp(0.28rem, 1vw, 0.84rem);
}

.page-home-map--finale-scroll .home-map-stage__header {
  width: min(900px, 94%);
}

.page-home-map--finale-scroll .home-map-stage__header h2 {
  font-size: clamp(2rem, 4.1vw, 3.35rem);
}

.page-home-map--finale-scroll .home-map-modes {
  justify-content: center;
  gap: 0.34rem;
}

.page-home-map--finale-scroll .home-map-modes p {
  max-width: 58rem;
  margin: 0 auto;
  font-size: 0.78rem;
  line-height: 1.5;
}

.page-home-map--finale-scroll .home-map-stage__body {
  width: 100%;
  min-height: 0;
  align-self: center;
}

.page-home-map--finale-scroll .home-map-stage__canvas {
  min-height: 0;
}

.page-home-map--finale-scroll .home-map-stage__canvas .china-map {
  height: var(--home-map-stage-height);
  min-height: 0;
  max-height: calc(var(--home-act-h) - 3rem);
  aspect-ratio: 1.78 / 1;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(70% 86% at 48% 54%, rgba(255, 242, 203, 0.045), transparent 68%),
    radial-gradient(80% 100% at 12% 92%, rgba(197, 133, 70, 0.13), transparent 64%),
    radial-gradient(80% 94% at 90% 8%, rgba(67, 139, 157, 0.14), transparent 66%);
  box-shadow: none;
}

.page-home-map--finale-scroll .home-map-stage__canvas .china-map::before {
  display: none;
}

.page-home-map--finale-scroll .home-map-stage__canvas .china-map__frame {
  display: none;
}

.page-home-map--finale-scroll .home-map-stage__canvas .china-map__grain {
  opacity: 0.08;
}

.page-home-map--finale-scroll .home-map-stage__canvas .china-map__terrain {
  inset: 0.4% 1% 1.2%;
  width: 98%;
  height: 98.4%;
  filter: drop-shadow(0 15px 26px rgba(0, 0, 0, 0.24));
}

.page-home-map--finale-scroll .home-map-stage__canvas .china-map__viewport {
  left: 1%;
  top: 0.4%;
  width: 98%;
  height: 98.4%;
}

.page-home-map--finale-scroll .home-map-stage__canvas .china-map__annotation {
  top: 10px;
  left: 10px;
}

.page-home-map--finale-scroll .home-map-stage__canvas .china-map__annotation {
  max-width: min(330px, 45%);
  font-size: 0.76rem;
}

.page-home-map--finale-scroll .home-scene-gallery {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: center;
  gap: clamp(0.78rem, 1.7vh, 1.1rem);
  padding-top: var(--home-act-padding-y);
}

.page-home-map--finale-scroll .home-scene-gallery__grid {
  min-height: 0;
  align-self: center;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.72rem, 1.45vw, 1rem);
}

.page-home-map--finale-scroll .home-scene-card {
  min-height: 0;
  border-color: rgba(239, 228, 209, 0.08);
  background:
    radial-gradient(72% 84% at 100% 0%, color-mix(in srgb, var(--bridge-accent) 10%, transparent), transparent 60%),
    rgba(239, 228, 209, 0.018);
  box-shadow: none;
}

.page-home-map--finale-scroll .home-scene-card__media {
  height: clamp(140px, 23vh, 230px);
}

.page-home-map--finale-scroll .home-scene-card__body {
  gap: 0.34rem;
  padding: clamp(0.66rem, 1.25vw, 0.82rem);
}

.page-home-map--finale-scroll .home-scene-card__body span {
  font-size: 0.8rem;
  line-height: 1.5;
}

.page-home-map--finale-scroll .home-scene-card__actions .btn {
  min-height: 0;
  padding-top: 0.36rem;
  padding-bottom: 0.36rem;
}

@media (max-height: 760px) and (min-width: 901px) {
  .page-home-map--finale-scroll {
    --home-act-padding-y: 0.72rem;
  }

  .page-home-map--finale-scroll .hero-immersive h1 {
    font-size: clamp(2.2rem, 4.8vw, 4.2rem);
  }

  .page-home-map--finale-scroll .hero-immersive__subtitle,
  .page-home-map--finale-scroll .hero-immersive__annotation {
    line-height: 1.55;
  }

  .page-home-map--finale-scroll .home-bridge-axis__thumb {
    height: clamp(92px, 17vh, 140px);
  }

  .page-home-map--finale-scroll .video-showcase--home .video-showcase__head span {
    font-size: 0.82rem;
    line-height: 1.48;
  }

  .page-home-map--finale-scroll .video-showcase--home .video-showcase__card {
    max-height: calc(var(--home-act-h) - 13.6rem);
  }

  .page-home-map--finale-scroll .video-showcase--home .video-showcase__frame {
    max-height: calc(var(--home-act-h) - 13.6rem);
  }

  .page-home-map--finale-scroll .home-bridge-axis--embedded {
    padding: 0.38rem 0.5rem;
  }

  .page-home-map--finale-scroll .home-bridge-axis--embedded .home-bridge-axis__header {
    gap: 0.5rem;
  }

  .page-home-map--finale-scroll .home-bridge-axis--embedded .home-bridge-axis__track {
    height: 5px;
  }

  .page-home-map--finale-scroll .home-bridge-axis--embedded .home-bridge-axis__card {
    min-height: 72px;
    grid-template-columns: 70px minmax(0, 1fr);
    padding: 0.34rem;
  }

  .page-home-map--finale-scroll .home-bridge-axis--embedded .home-bridge-axis__thumb {
    height: 54px;
  }

  .page-home-map--finale-scroll .home-map-stage__canvas .china-map {
    height: min(80vh, calc(var(--home-act-h) - 2.9rem));
    min-height: 0;
  }

  .page-home-map--finale-scroll .home-scene-card__media {
    height: clamp(110px, 18vh, 160px);
  }
}

@media (max-width: 1120px) {
  .page-home-map--finale-scroll {
    --home-main-module-width: min(960px, 94vw);
  }

  .page-home-map--finale-scroll .hero-immersive__content {
    width: min(680px, 78%);
  }

  .page-home-map--finale-scroll .home-bridge-axis__nodes,
  .page-home-map--finale-scroll .home-scene-gallery__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-home-map--finale-scroll .home-bridge-axis__card {
    grid-template-columns: 1fr;
  }

  .page-home-map--finale-scroll .home-bridge-axis__thumb {
    height: clamp(92px, 18vh, 160px);
  }

  .page-home-map--finale-scroll .home-bridge-axis--embedded .home-bridge-axis__thumb {
    height: 58px;
  }
}

@media (max-width: 900px) {
  .page-home-map--finale-scroll {
    --home-main-module-width: min(680px, 94vw);
  }

  .page-home-map--finale-scroll > [data-home-act] {
    height: var(--home-act-h);
    padding-left: 0.8rem;
    padding-right: 0.8rem;
  }

  .page-home-map--finale-scroll .hero-immersive {
    align-items: center;
  }

  .page-home-map--finale-scroll .hero-immersive__content {
    width: min(100%, 620px);
    margin-left: 0;
  }

  .page-home-map--finale-scroll .home-bridge-axis__nodes,
  .page-home-map--finale-scroll .home-scene-gallery__grid {
    grid-template-columns: 1fr;
  }

  .page-home-map--finale-scroll .home-bridge-axis--embedded .home-bridge-axis__nodes {
    grid-template-columns: 1fr;
  }

  .page-home-map--finale-scroll .home-bridge-axis__card {
    grid-template-columns: 104px 1fr;
    grid-template-rows: auto auto;
    text-align: left;
  }

  .page-home-map--finale-scroll .home-bridge-axis__thumb {
    grid-row: 1 / span 2;
    height: 76px;
  }

  .page-home-map--finale-scroll .video-showcase--home .video-showcase__card {
    max-height: none;
    grid-template-columns: 1fr;
  }

  .page-home-map--finale-scroll .video-showcase--home .video-showcase__copy {
    min-height: 140px;
  }

  .page-home-map--finale-scroll .home-bridge-axis--embedded {
    margin-top: 0;
  }

  .page-home-map--finale-scroll .home-map-stage__canvas .china-map {
    height: min(74vh, calc(var(--home-act-h) - 3.4rem));
    min-height: 0;
    aspect-ratio: 1.52 / 1;
  }

  .page-home-map--finale-scroll .home-scene-card {
    grid-template-columns: minmax(130px, 38%) minmax(0, 1fr);
    grid-template-rows: 1fr;
  }

  .page-home-map--finale-scroll .home-scene-card__media {
    height: 100%;
    min-height: 150px;
  }
}

@media (max-width: 640px) {
  .page-home-map--finale-scroll {
    --home-main-module-width: 94vw;
    --home-act-padding-y: 0.72rem;
  }

  .page-home-map--finale-scroll .hero-immersive {
    padding-bottom: 4.3rem;
  }

  .page-home-map--finale-scroll .hero-immersive h1 {
    font-size: clamp(2.28rem, 13vw, 3.55rem);
  }

  .page-home-map--finale-scroll .hero-immersive__entry {
    gap: 0.45rem;
  }

  .page-home-map--finale-scroll .home-bridge-axis__header h2,
  .page-home-map--finale-scroll .home-section-heading h2,
  .page-home-map--finale-scroll .home-stage-title h2,
  .page-home-map--finale-scroll .video-showcase__head h2 {
    font-size: clamp(1.62rem, 8vw, 2.28rem);
  }

  .page-home-map--finale-scroll .home-bridge-axis__card,
  .page-home-map--finale-scroll .home-scene-card {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .page-home-map--finale-scroll .home-bridge-axis__thumb,
  .page-home-map--finale-scroll .home-scene-card__media {
    grid-row: auto;
    height: clamp(106px, 25vh, 160px);
    min-height: 0;
  }

  .page-home-map--finale-scroll .home-bridge-axis--embedded .home-bridge-axis__header {
    display: grid;
    gap: 0.16rem;
    justify-items: center;
  }

  .page-home-map--finale-scroll .home-bridge-axis--embedded .home-bridge-axis__card {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .page-home-map--finale-scroll .home-bridge-axis--embedded .home-bridge-axis__thumb {
    grid-row: 1;
    height: 54px;
  }

  .page-home-map--finale-scroll .home-map-stage__canvas .china-map {
    height: min(70vh, calc(var(--home-act-h) - 3.4rem));
    min-height: 0;
    aspect-ratio: 1.18 / 1;
  }

  .page-home-map--finale-scroll .home-map-stage__canvas .china-map__annotation {
    max-width: calc(100% - 84px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home-map--finale-scroll .home-bridge-axis--embedded::after {
    transform: translateY(50%) scaleX(1);
  }

  .page-home-map--finale-scroll .home-bridge-axis--embedded .home-bridge-axis__card {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}


.bridge-feature-gallery-section__lead {
  margin: 0 0 1rem;
  max-width: 70ch;
  color: var(--paper-soft);
}

.feature-visual-board {
  display: grid;
  gap: 1rem;
}

.feature-poster-stage {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 0.9rem;
  align-items: start;
}

.feature-poster-stage__media {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 24%, var(--line));
  min-height: 360px;
  box-shadow: var(--shadow-panel);
}

.feature-poster-stage__media img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.04);
}

.feature-poster-stage__stamp {
  position: absolute;
  left: 0.8rem;
  top: 0.8rem;
  padding: 0.24rem 0.56rem;
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  border: 1px solid rgba(239, 228, 209, 0.3);
  background: rgba(7, 10, 14, 0.76);
}

.feature-poster-stage__sheet {
  position: relative;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 30%, var(--line));
  background:
    radial-gradient(110% 120% at 0% 0%, color-mix(in srgb, var(--bridge-accent) 15%, transparent), transparent 58%),
    rgba(239, 228, 209, 0.05);
  padding: 1rem;
  box-shadow: var(--shadow-soft);
}

.feature-poster-stage__eyebrow {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--bridge-accent) 72%, var(--paper));
}

.feature-poster-stage__sheet h3 {
  margin: 0.34rem 0 0;
  font-size: clamp(1.2rem, 2vw, 1.75rem);
  line-height: 1.35;
}

.feature-poster-stage__lead {
  margin: 0.55rem 0 0;
  color: var(--paper-soft);
  line-height: 1.64;
}

.feature-visual-board__pills {
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.42rem;
}

.feature-visual-board__pill {
  display: grid;
  grid-template-columns: 7.2rem 1fr;
  gap: 0.6rem;
  border: 1px solid rgba(239, 228, 209, 0.17);
  border-radius: 0.72rem;
  background: rgba(7, 10, 14, 0.36);
  padding: 0.45rem 0.56rem;
}

.feature-visual-board__pill span {
  font-size: 0.76rem;
  color: var(--paper-soft);
}

.feature-visual-board__pill strong {
  font-size: 0.84rem;
}

.feature-poster-notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
}

.feature-poster-note {
  width: 100%;
  border-radius: 0.78rem;
  border: 1px dashed color-mix(in srgb, var(--bridge-accent) 38%, var(--line));
  background: rgba(7, 10, 14, 0.77);
  padding: 0.58rem 0.68rem;
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-inner-line);
}

.feature-poster-note p,
.feature-poster-note h4,
.feature-poster-note span {
  margin: 0;
}

.feature-poster-note p {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--bridge-accent) 74%, var(--paper));
}

.feature-poster-note h4 {
  margin-top: 0.2rem;
  font-size: 0.92rem;
}

.feature-poster-note span {
  margin-top: 0.25rem;
  display: block;
  font-size: 0.78rem;
  color: var(--paper-soft);
  line-height: 1.52;
}


.feature-visual-ribbon {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.feature-visual-ribbon__item {
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 24%, var(--line));
  border-radius: 0.72rem;
  background: rgba(239, 228, 209, 0.045);
  padding: 0.52rem 0.6rem;
}

.feature-visual-ribbon__item span,
.feature-visual-ribbon__item strong {
  display: block;
}

.feature-visual-ribbon__item span {
  font-size: 0.72rem;
  color: var(--paper-soft);
}

.feature-visual-ribbon__item strong {
  margin-top: 0.12rem;
  font-size: 0.94rem;
}

.feature-scroll-section {
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 24%, var(--line));
  border-radius: var(--radius-md);
  background: rgba(239, 228, 209, 0.045);
  padding: 0.84rem;
}

.feature-scroll-section__head {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  align-items: end;
}

.feature-scroll-section__head p,
.feature-scroll-section__head h3,
.feature-scroll-section__head span {
  margin: 0;
}

.feature-scroll-section__head p {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--bridge-accent) 72%, var(--paper));
}

.feature-scroll-section__head h3 {
  margin-top: 0.24rem;
  font-size: 1.06rem;
}

.feature-scroll-section__head span {
  margin-top: 0.2rem;
  display: block;
  color: var(--paper-soft);
  font-size: 0.86rem;
}

.feature-scroll-section__actions {
  display: flex;
  gap: 0.36rem;
}

.feature-scroll-section__nav {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 1px solid rgba(239, 228, 209, 0.22);
  background: rgba(7, 10, 14, 0.46);
  color: var(--paper);
  cursor: pointer;
}

.feature-scroll-section__nav:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.feature-scroll-track {
  margin-top: 0.7rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.62rem;
  overflow-x: auto;
  padding-bottom: 0.24rem;
  scroll-snap-type: x mandatory;
}

.feature-scroll-card {
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 26%, var(--line));
  border-radius: 0.78rem;
  background: rgba(7, 10, 14, 0.58);
  color: var(--paper);
  text-align: left;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  scroll-snap-align: start;
}

.feature-scroll-card__media {
  display: block;
  height: 184px;
}

.feature-scroll-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature-scroll-card__body {
  display: grid;
  gap: 0.25rem;
  padding: 0.56rem;
}

.feature-scroll-card__body em {
  font-style: normal;
  font-size: 0.7rem;
  color: color-mix(in srgb, var(--bridge-accent) 74%, var(--paper));
  letter-spacing: 0.08em;
}

.feature-scroll-card__body strong {
  font-size: 0.94rem;
}

.feature-scroll-card__body span {
  font-size: 0.8rem;
  color: var(--paper-soft);
  line-height: 1.48;
}

.feature-poster-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
}

.feature-poster-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 8, 12, 0.72);
  backdrop-filter: blur(5px);
}

.feature-poster-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(1080px, calc(100vw - 36px));
  max-height: calc(100vh - 42px);
  overflow: auto;
  border-radius: 0.95rem;
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 30%, var(--line));
  background: linear-gradient(165deg, rgba(8, 12, 16, 0.96), rgba(12, 18, 24, 0.92));
  padding: 1rem;
}

.feature-poster-modal__close {
  position: sticky;
  margin-left: auto;
  top: 0;
  right: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 1px solid rgba(239, 228, 209, 0.25);
  background: rgba(239, 228, 209, 0.06);
  color: var(--paper);
  cursor: pointer;
}

.feature-poster-sheet {
  margin-top: 0.6rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
}

.feature-poster-sheet__media {
  position: relative;
  border-radius: 0.82rem;
  overflow: hidden;
  min-height: 290px;
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 28%, var(--line));
}

.feature-poster-sheet__media img {
  width: 100%;
  height: 100%;
  min-height: 290px;
  object-fit: cover;
}

.feature-poster-sheet__stamp {
  position: absolute;
  left: 0.64rem;
  bottom: 0.64rem;
  font-size: 0.72rem;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(239, 228, 209, 0.26);
  background: rgba(7, 10, 14, 0.72);
}

.feature-poster-sheet__content {
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 24%, var(--line));
  border-radius: 0.82rem;
  background: rgba(239, 228, 209, 0.04);
  padding: 0.75rem;
}

.feature-poster-sheet__eyebrow,
.feature-poster-sheet__summary {
  margin: 0;
}

.feature-poster-sheet__eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--bridge-accent) 72%, var(--paper));
}

.feature-poster-sheet__content h3 {
  margin: 0.3rem 0 0;
  font-size: 1.3rem;
}

.feature-poster-sheet__summary {
  margin-top: 0.48rem;
  color: var(--paper-soft);
  line-height: 1.62;
}

.feature-poster-sheet__facts {
  margin: 0.68rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.34rem;
}

.feature-poster-sheet__facts li {
  display: grid;
  grid-template-columns: 7.2rem 1fr;
  gap: 0.5rem;
  border: 1px solid rgba(239, 228, 209, 0.17);
  border-radius: 0.62rem;
  padding: 0.34rem 0.46rem;
  background: rgba(7, 10, 14, 0.32);
}

.feature-poster-sheet__facts span {
  color: var(--paper-soft);
  font-size: 0.74rem;
}

.feature-poster-sheet__facts strong {
  font-size: 0.82rem;
}

.feature-poster-sheet__bullets {
  margin-top: 0.64rem;
  display: grid;
  gap: 0.32rem;
}

.feature-poster-sheet__bullets p {
  margin: 0;
  border-left: 2px solid color-mix(in srgb, var(--bridge-accent) 56%, transparent);
  padding-left: 0.5rem;
  color: var(--paper-soft);
  line-height: 1.56;
  font-size: 0.88rem;
}

.feature-poster-sheet__footer {
  margin-top: 0.68rem;
  border: 1px dashed rgba(239, 228, 209, 0.24);
  border-radius: 0.64rem;
  padding: 0.45rem 0.52rem;
  color: color-mix(in srgb, var(--bridge-accent) 76%, var(--paper));
  background: rgba(239, 228, 209, 0.03);
}

body.is-poster-open {
  overflow: hidden;
}

@media (max-width: 1120px) {
  .feature-poster-stage,
  .feature-poster-sheet {
    grid-template-columns: 1fr;
  }

  .feature-poster-notes {
    grid-template-columns: 1fr;
  }

  .feature-visual-ribbon {
    grid-template-columns: 1fr;
  }

  .feature-scroll-track {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(240px, 48%);
  }
}

@media (max-width: 760px) {
  .culture-section-heading__lead {
    white-space: normal;
    text-align: center;
    text-align-last: center;
  }

  .feature-poster-stage__media,
  .feature-poster-stage__media img {
    min-height: 260px;
  }

  .feature-scroll-track {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, 82%);
  }

  .feature-scroll-section__head {
    flex-direction: column;
    align-items: stretch;
  }

  .feature-poster-modal__dialog {
    width: calc(100vw - 18px);
    padding: 0.72rem;
  }

  .feature-poster-sheet__facts li,
  .feature-visual-board__pill {
    grid-template-columns: 1fr;
  }
}

.feature-scroll-card.is-active {
  border-color: color-mix(in srgb, var(--bridge-accent) 62%, var(--line));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--bridge-accent) 35%, transparent);
  background: color-mix(in srgb, var(--bridge-accent) 10%, rgba(7, 10, 14, 0.58));
}

.feature-inline-detail {
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 24%, var(--line));
  border-radius: var(--radius-md);
  background: rgba(239, 228, 209, 0.04);
  padding: 0.84rem;
}

.feature-inline-detail__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
}

.feature-inline-detail__head p {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--bridge-accent) 72%, var(--paper));
}

.feature-inline-detail__close {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 1px solid rgba(239, 228, 209, 0.24);
  background: rgba(7, 10, 14, 0.42);
  color: var(--paper);
  cursor: pointer;
}

.feature-inline-detail__stack {
  margin-top: 0.5rem;
}

/* Features detail layout refresh: split dense text into visual blocks */
.feature-poster-sheet {
  margin-top: 0.72rem;
  display: grid;
  gap: 0.8rem;
  grid-template-columns: 1fr;
}

.feature-poster-sheet__hero {
  position: relative;
  min-height: 330px;
  border-radius: 0.86rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 30%, var(--line));
}

.feature-poster-sheet__hero img {
  width: 100%;
  height: 100%;
  min-height: 330px;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.05) brightness(0.9);
}

.feature-poster-sheet__hero-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem;
  background: linear-gradient(to top, rgba(6, 10, 14, 0.92), rgba(6, 10, 14, 0.58), transparent);
}

.feature-poster-sheet__hero-overlay h3 {
  margin: 0.2rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.5vw, 1.95rem);
  letter-spacing: 0.01em;
}

.feature-poster-sheet__layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.feature-poster-panel {
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 24%, var(--line));
  border-radius: 0.82rem;
  background:
    radial-gradient(95% 120% at 0% 0%, color-mix(in srgb, var(--bridge-accent) 12%, transparent), transparent 62%),
    rgba(239, 228, 209, 0.04);
  padding: 0.72rem;
}

.feature-poster-panel h4 {
  margin: 0;
  font-size: 0.94rem;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--bridge-accent) 74%, var(--paper));
}

.feature-poster-sheet__facts {
  margin: 0.55rem 0 0;
}

.feature-poster-sheet__facts li {
  grid-template-columns: 1fr;
  gap: 0.2rem;
  padding: 0.44rem 0.5rem;
}

.feature-poster-sheet__facts span {
  font-size: 0.72rem;
}

.feature-poster-sheet__facts strong {
  font-size: 0.9rem;
  line-height: 1.5;
}

.feature-poster-sheet__story {
  margin-top: 0.55rem;
  display: grid;
  gap: 0.45rem;
}

.feature-story-card {
  border-left: 2px solid color-mix(in srgb, var(--bridge-accent) 65%, transparent);
  padding-left: 0.55rem;
}

.feature-story-card p {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--bridge-accent) 70%, var(--paper));
}

.feature-story-card span {
  margin-top: 0.18rem;
  display: block;
  font-size: 0.9rem;
  line-height: 1.72;
  color: var(--paper-soft);
}

.feature-poster-sheet__bullets {
  margin-top: 0.55rem;
}

.feature-poster-sheet__bullets p {
  margin: 0;
  padding: 0.5rem 0.55rem;
  border: 1px dashed rgba(239, 228, 209, 0.2);
  border-radius: 0.58rem;
  background: rgba(7, 10, 14, 0.26);
  font-size: 0.9rem;
  line-height: 1.7;
}

.feature-poster-sheet__bullets p + p {
  margin-top: 0.44rem;
}

.feature-scroll-card__body strong {
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.45;
}

.feature-scroll-card__body span {
  font-size: 0.84rem;
  line-height: 1.6;
}

@media (max-width: 1120px) {
  .feature-poster-sheet__layout {
    grid-template-columns: 1fr;
  }
}

/* Bridge entrance redesign: vertical route with artistic composition */
.bridge-nav-cards--curation {
  position: relative;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  padding: 0.2rem 0.15rem 0.4rem;
}

.bridge-nav-cards--curation::before {
  content: "";
  position: absolute;
  left: 0.8rem;
  right: 0.8rem;
  top: 2.9rem;
  bottom: 0.4rem;
  pointer-events: none;
  background:
    radial-gradient(90% 80% at 12% 0%, color-mix(in srgb, var(--bridge-accent) 12%, transparent), transparent 70%),
    radial-gradient(82% 72% at 92% 100%, rgba(108, 173, 182, 0.12), transparent 74%);
  opacity: 0.55;
}

.bridge-nav-cards__trail {
  position: relative;
  z-index: 1;
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 24%, var(--line));
  border-radius: 0.82rem;
  background: rgba(239, 228, 209, 0.04);
  padding: 0.65rem 0.72rem;
}

.bridge-nav-cards__trail p {
  margin: 0;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--bridge-accent) 74%, var(--paper));
}

.bridge-nav-cards__chips {
  margin-top: 0.45rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
}

.bridge-nav-cards__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid rgba(239, 228, 209, 0.22);
  border-radius: 999px;
  padding: 0.22rem 0.58rem;
  background: rgba(7, 10, 14, 0.44);
  transition: all var(--dur-fast) var(--easing);
}

.bridge-nav-cards__chip b {
  font-family: var(--font-display);
  font-size: 0.76rem;
  color: color-mix(in srgb, var(--bridge-accent) 72%, var(--paper));
}

.bridge-nav-cards__chip span {
  font-size: 0.78rem;
  color: var(--paper-soft);
}

.bridge-nav-cards__chip:hover {
  border-color: color-mix(in srgb, var(--bridge-accent) 58%, var(--line));
  transform: translateY(-1px);
}

.bridge-nav-cards__stack {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.72rem;
}

.bridge-nav-cards__stack .bridge-nav-card {
  position: relative;
  overflow: hidden;
  grid-template-columns: 1fr;
  gap: 0.56rem;
  padding: 0.86rem 0.94rem 0.88rem;
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 24%, var(--line));
  background:
    linear-gradient(145deg, rgba(8, 13, 18, 0.9), rgba(10, 16, 22, 0.78)),
    radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--bridge-accent) 14%, transparent), transparent 66%);
  animation: bridgeNavCardEnter 560ms var(--easing) both;
  animation-delay: calc(var(--card-order, 0) * 90ms);
}

.bridge-nav-cards__stack .bridge-nav-card:nth-child(odd) {
  margin-right: 10%;
  transform: rotate(-0.4deg);
}

.bridge-nav-cards__stack .bridge-nav-card:nth-child(even) {
  margin-left: 10%;
  transform: rotate(0.4deg);
}

.bridge-nav-card__line {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--bridge-accent) 62%, rgba(239, 228, 209, 0.36)), transparent);
}

.bridge-nav-card__title {
  display: flex;
  align-items: center;
  gap: 0.62rem;
}

.bridge-nav-card__index {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 0.45rem;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  letter-spacing: 0.05em;
  font-size: 0.85rem;
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 34%, var(--line));
  background: rgba(239, 228, 209, 0.05);
  color: color-mix(in srgb, var(--bridge-accent) 78%, var(--paper));
}

.bridge-nav-card__title h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 1.95vw, 1.28rem);
}

.bridge-nav-card__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.56rem;
}

.bridge-nav-card__peek {
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  color: var(--paper-soft);
  border-bottom: 1px dashed rgba(239, 228, 209, 0.26);
}

.bridge-nav-cards__stack .bridge-nav-card p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.68;
  max-width: 58ch;
}

.bridge-nav-cards__stack .bridge-nav-card:hover {
  transform: translateY(-2px) rotate(0deg) !important;
  border-color: color-mix(in srgb, var(--bridge-accent) 58%, var(--line));
}

.bridge-nav-card--key-features,
.bridge-nav-card--key-sandbox,
.bridge-nav-cards__chip--features,
.bridge-nav-cards__chip--sandbox {
  --nav-card-focus-wash: color-mix(in srgb, var(--bridge-accent) 26%, transparent);
  --nav-card-focus-wash-2: color-mix(in srgb, var(--bridge-accent) 14%, transparent);
  --nav-card-focus-line: color-mix(in srgb, var(--bridge-accent) 70%, rgba(239, 228, 209, 0.48));
  --nav-card-focus-title: color-mix(in srgb, var(--bridge-accent) 78%, var(--paper));
}

.bridge-nav-card--key-features,
.bridge-nav-card--key-sandbox {
  isolation: isolate;
}

.bridge-nav-card--key-features > *,
.bridge-nav-card--key-sandbox > * {
  position: relative;
  z-index: 2;
}

.bridge-nav-card--key-features::before,
.bridge-nav-card--key-sandbox::before {
  content: "";
  position: absolute;
  inset: -22% -12%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.72;
  background:
    radial-gradient(62% 76% at 16% 18%, var(--nav-card-focus-wash), transparent 72%),
    radial-gradient(54% 68% at 88% 82%, var(--nav-card-focus-wash-2), transparent 74%),
    linear-gradient(136deg, transparent 16%, color-mix(in srgb, var(--nav-card-focus-line) 20%, transparent) 56%, transparent 86%);
  animation: bridgeNavFocusGlow 7.2s ease-in-out infinite;
}

.bridge-nav-card--key-features::after,
.bridge-nav-card--key-sandbox::after {
  content: "";
  position: absolute;
  top: -42%;
  left: -45%;
  width: 42%;
  height: 198%;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
  opacity: 0.26;
  filter: blur(0.8px);
  background: linear-gradient(
    108deg,
    transparent 0%,
    color-mix(in srgb, var(--nav-card-focus-line) 12%, transparent) 22%,
    color-mix(in srgb, var(--nav-card-focus-line) 54%, rgba(255, 255, 255, 0.28)) 50%,
    color-mix(in srgb, var(--nav-card-focus-line) 14%, transparent) 74%,
    transparent 100%
  );
  animation: bridgeNavFocusSweep 6.4s ease-in-out infinite;
}

.bridge-nav-card--key-features .bridge-nav-card__line,
.bridge-nav-card--key-sandbox .bridge-nav-card__line {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--nav-card-focus-line), transparent);
  animation: bridgeNavFocusLine 3.8s ease-in-out infinite;
}

.bridge-nav-card--key-features .bridge-nav-card__title h3 span,
.bridge-nav-card--key-sandbox .bridge-nav-card__title h3 span {
  color: var(--nav-card-focus-title);
  text-shadow: 0 0 8px color-mix(in srgb, var(--nav-card-focus-line) 42%, transparent);
}

.bridge-nav-card--key-features .bridge-nav-card__index,
.bridge-nav-card--key-sandbox .bridge-nav-card__index {
  border-color: color-mix(in srgb, var(--nav-card-focus-line) 66%, var(--line));
  background:
    radial-gradient(120% 110% at 28% 18%, color-mix(in srgb, var(--nav-card-focus-line) 18%, transparent), transparent 66%),
    rgba(239, 228, 209, 0.06);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--nav-card-focus-line) 16%, transparent),
    0 0 14px color-mix(in srgb, var(--nav-card-focus-line) 18%, transparent);
}

.bridge-nav-card--key-features:hover,
.bridge-nav-card--key-features:focus-within,
.bridge-nav-card--key-sandbox:hover,
.bridge-nav-card--key-sandbox:focus-within {
  border-color: color-mix(in srgb, var(--nav-card-focus-line) 72%, var(--line));
  box-shadow:
    var(--shadow-inner-line),
    0 16px 34px rgba(0, 0, 0, 0.34),
    inset 0 0 0 1px color-mix(in srgb, var(--nav-card-focus-line) 22%, transparent);
}

.bridge-nav-card--key-features:hover::after,
.bridge-nav-card--key-features:focus-within::after,
.bridge-nav-card--key-sandbox:hover::after,
.bridge-nav-card--key-sandbox:focus-within::after {
  opacity: 0.4;
  animation-duration: 3.8s;
}

.bridge-nav-cards__chip--features,
.bridge-nav-cards__chip--sandbox {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--nav-card-focus-line) 38%, rgba(239, 228, 209, 0.24));
  background:
    linear-gradient(
      145deg,
      rgba(7, 10, 14, 0.64),
      color-mix(in srgb, var(--nav-card-focus-wash) 18%, rgba(9, 13, 20, 0.5))
    );
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nav-card-focus-line) 16%, transparent);
}

.bridge-nav-cards__chip--features::after,
.bridge-nav-cards__chip--sandbox::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    110deg,
    transparent 0%,
    color-mix(in srgb, var(--nav-card-focus-line) 16%, transparent) 46%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: bridgeNavChipSweep 6.8s ease-in-out infinite;
}

.theme-guangji .bridge-nav-card--key-features,
.theme-guangji .bridge-nav-cards__chip--features {
  --nav-card-focus-wash: rgba(219, 152, 83, 0.3);
  --nav-card-focus-wash-2: rgba(249, 199, 130, 0.2);
  --nav-card-focus-line: rgba(246, 204, 140, 0.86);
  --nav-card-focus-title: #ffdcaa;
}

.theme-guangji .bridge-nav-card--key-sandbox,
.theme-guangji .bridge-nav-cards__chip--sandbox {
  --nav-card-focus-wash: rgba(241, 143, 87, 0.28);
  --nav-card-focus-wash-2: rgba(255, 186, 132, 0.22);
  --nav-card-focus-line: rgba(255, 197, 150, 0.86);
  --nav-card-focus-title: #ffd4b0;
}

.theme-luoyang .bridge-nav-card--key-features,
.theme-luoyang .bridge-nav-cards__chip--features {
  --nav-card-focus-wash: rgba(96, 178, 200, 0.32);
  --nav-card-focus-wash-2: rgba(147, 218, 235, 0.22);
  --nav-card-focus-line: rgba(158, 225, 239, 0.86);
  --nav-card-focus-title: #caeef6;
}

.theme-luoyang .bridge-nav-card--key-sandbox,
.theme-luoyang .bridge-nav-cards__chip--sandbox {
  --nav-card-focus-wash: rgba(75, 156, 186, 0.32);
  --nav-card-focus-wash-2: rgba(127, 206, 226, 0.22);
  --nav-card-focus-line: rgba(145, 222, 240, 0.84);
  --nav-card-focus-title: #c8f1ff;
}

.theme-zhaozhou .bridge-nav-card--key-features,
.theme-zhaozhou .bridge-nav-cards__chip--features {
  --nav-card-focus-wash: rgba(138, 178, 122, 0.32);
  --nav-card-focus-wash-2: rgba(191, 224, 165, 0.22);
  --nav-card-focus-line: rgba(200, 231, 173, 0.86);
  --nav-card-focus-title: #def2ca;
}

.theme-zhaozhou .bridge-nav-card--key-sandbox,
.theme-zhaozhou .bridge-nav-cards__chip--sandbox {
  --nav-card-focus-wash: rgba(122, 166, 112, 0.34);
  --nav-card-focus-wash-2: rgba(175, 219, 147, 0.24);
  --nav-card-focus-line: rgba(196, 233, 166, 0.84);
  --nav-card-focus-title: #d8f0c2;
}

@keyframes bridgeNavFocusGlow {
  0%,
  100% {
    opacity: 0.54;
    transform: scale(1) translate3d(0, 0, 0);
  }
  50% {
    opacity: 0.88;
    transform: scale(1.03) translate3d(0, -1.5%, 0);
  }
}

@keyframes bridgeNavFocusSweep {
  0% {
    transform: translate3d(-140%, 0, 0) rotate(14deg);
    opacity: 0;
  }
  26% {
    opacity: 0.18;
  }
  52% {
    opacity: 0.42;
  }
  100% {
    transform: translate3d(240%, 0, 0) rotate(14deg);
    opacity: 0;
  }
}

@keyframes bridgeNavFocusLine {
  0%,
  100% {
    opacity: 0.46;
    filter: drop-shadow(0 0 2px color-mix(in srgb, var(--nav-card-focus-line) 24%, transparent));
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--nav-card-focus-line) 54%, transparent));
  }
}

@keyframes bridgeNavChipSweep {
  0% {
    transform: translateX(-110%);
    opacity: 0;
  }
  34% {
    opacity: 0.26;
  }
  100% {
    transform: translateX(130%);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bridge-nav-card--key-features::before,
  .bridge-nav-card--key-sandbox::before,
  .bridge-nav-card--key-features::after,
  .bridge-nav-card--key-sandbox::after,
  .bridge-nav-card--key-features .bridge-nav-card__line,
  .bridge-nav-card--key-sandbox .bridge-nav-card__line,
  .bridge-nav-cards__chip--features::after,
  .bridge-nav-cards__chip--sandbox::after,
  .expert-card::before,
  .expert-card::after {
    animation: none !important;
  }
}

@keyframes bridgeNavCardEnter {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 980px) {
  .bridge-nav-cards__stack .bridge-nav-card:nth-child(odd),
  .bridge-nav-cards__stack .bridge-nav-card:nth-child(even) {
    margin-left: 0;
    margin-right: 0;
    transform: none;
  }

  .bridge-nav-card__actions {
    flex-wrap: wrap;
  }
}

/* Overview intro redesign: artistic hover notes */
.bridge-overview-intro {
  align-items: start;
}

.bridge-overview-intro__lead {
  position: relative;
  gap: 0.75rem;
  overflow: hidden;
  background:
    radial-gradient(110% 140% at 0% 0%, color-mix(in srgb, var(--bridge-accent) 15%, transparent), transparent 64%),
    rgba(239, 228, 209, 0.045);
}

.bridge-overview-intro__lead-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: flex-start;
  align-items: center;
}

.bridge-overview-intro__lead .btn {
  justify-self: start;
  align-self: start;
  width: auto;
  min-width: 0;
  padding: 0.48rem 1rem;
  font-size: 0.8rem;
}

.bridge-overview-intro__facts {
  position: relative;
}

.bridge-overview-hero {
  display: grid;
  gap: 0.86rem;
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.bridge-overview-hero__media {
  position: relative;
  min-height: clamp(340px, 58vh, 640px);
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 24%, var(--line));
  border-radius: 0.88rem;
  overflow: hidden;
  background-image:
    linear-gradient(132deg, rgba(7, 11, 16, 0.42), rgba(8, 14, 20, 0.24) 50%, rgba(6, 10, 16, 0.36)),
    var(--overview-bg-image);
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 100%, cover;
  background-position: center, center;
  box-shadow: var(--shadow-panel);
}

.bridge-overview-hero__media::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 8% 2%, color-mix(in srgb, var(--bridge-accent) 16%, transparent), transparent 66%),
    linear-gradient(to top, rgba(5, 10, 16, 0.34), transparent 52%);
}

.bridge-overview-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 233, 204, 0.08);
}

.bridge-overview-hero__lead {
  width: 100%;
  border-color: color-mix(in srgb, var(--bridge-accent) 34%, var(--line));
  background:
    radial-gradient(120% 130% at 100% 0%, color-mix(in srgb, var(--bridge-accent) 16%, transparent), transparent 66%),
    linear-gradient(150deg, rgba(7, 12, 18, 0.74), rgba(9, 15, 22, 0.62));
  backdrop-filter: blur(6px);
}

.bridge-overview-points .overview-hover-board {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.86rem;
}

.bridge-overview-points .overview-hover-note--1,
.bridge-overview-points .overview-hover-note--2,
.bridge-overview-points .overview-hover-note--3 {
  grid-column: auto;
  margin: 0;
  transform: none;
}

.bridge-overview-points .overview-hover-pop {
  display: none;
}

.bridge-overview-points__compare {
  margin-top: 1.4rem;
  display: grid;
  gap: 0.9rem;
}

.bridge-overview-points__compare-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.04rem, 1.55vw, 1.32rem);
  color: rgba(239, 228, 209, 0.9);
  letter-spacing: 0.04em;
}

.bridge-overview-points__compare .compare-tags__item {
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 32%, rgba(239, 228, 209, 0.14));
  border-radius: 1rem;
  padding: 1rem 1rem 0.92rem;
  background:
    radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--bridge-accent) 14%, transparent), transparent 62%),
    rgba(239, 228, 209, 0.042);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.bridge-overview-points__compare .compare-tags__item p {
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--bridge-accent) 70%, var(--paper));
}

.bridge-overview-points__compare .compare-tags__item strong {
  margin: 0.42rem 0 0.6rem;
  font-size: clamp(1.2rem, 1.6vw, 1.48rem);
  line-height: 1.34;
  color: var(--paper-soft);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.bridge-overview-points__compare .compare-tags__meter {
  height: 0.48rem;
  border-radius: 999px;
  background: rgba(239, 228, 209, 0.09);
}

.bridge-overview-points__compare .compare-tags__meter span {
  border-radius: inherit;
}

.bridge-overview-poster {
  padding-top: 0;
}

.bridge-overview-poster__sheet {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 38%, var(--line));
  border-left: 6px solid color-mix(in srgb, var(--bridge-accent) 72%, #d8edf2);
  border-radius: 1rem;
  padding: clamp(1.25rem, 2.8vw, 2.4rem);
  background:
    linear-gradient(180deg, rgba(10, 18, 26, 0.96), rgba(8, 13, 18, 0.92)),
    radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--bridge-accent) 22%, transparent), transparent 58%);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px rgba(241, 248, 250, 0.06);
}

.bridge-overview-poster__sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.03), transparent 22%),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 46px);
}

.bridge-overview-poster__sheet > * {
  position: relative;
  z-index: 1;
}

.bridge-overview-poster__eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--bridge-accent) 66%, #eef8fb);
}

.bridge-overview-poster__header {
  display: grid;
  gap: 0.75rem;
}

.bridge-overview-poster__header h2 {
  margin: 0;
  font-size: clamp(2.8rem, 7vw, 5.8rem);
  line-height: 0.96;
  letter-spacing: 0.06em;
  color: #f4fbff;
  text-shadow: 0 10px 26px rgba(0, 0, 0, 0.26);
}

.bridge-overview-poster__header p {
  margin: 0;
  max-width: 62rem;
  font-size: clamp(1rem, 1.8vw, 1.18rem);
  line-height: 1.9;
  color: rgba(228, 242, 247, 0.9);
}

.bridge-overview-poster__motion {
  opacity: 0;
  transform: translate3d(0, 22px, 0) scale(0.985);
  filter: blur(6px);
  transition:
    opacity 680ms var(--ease-out-expo, var(--easing)),
    transform 780ms var(--ease-out-expo, var(--easing)),
    filter 680ms var(--ease-out-expo, var(--easing));
  transition-delay: calc(var(--poster-delay, 0) * 110ms);
}

.bridge-overview-poster__motion--eyebrow {
  transform: translate3d(0, 14px, 0);
  transition-delay: 40ms;
}

.bridge-overview-poster__motion--header h2 {
  clip-path: inset(0 100% 0 0);
  transition:
    clip-path 900ms var(--ease-out-expo, var(--easing)),
    letter-spacing 900ms var(--ease-out-expo, var(--easing));
  letter-spacing: 0.16em;
}

.bridge-overview-poster__motion--fact {
  transform: translate3d(0, 26px, 0) rotateX(-10deg);
  transform-origin: 50% 100%;
}

.bridge-overview-poster__motion--paragraph {
  transform: translate3d(0, 18px, 0);
  transition-delay: calc(420ms + var(--poster-delay, 0) * 120ms);
}

.bridge-overview-poster__motion--note {
  transition-delay: 760ms;
}

[data-reveal].is-visible .bridge-overview-poster__motion {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

[data-reveal].is-visible .bridge-overview-poster__motion--header h2 {
  clip-path: inset(0 0 0 0);
  letter-spacing: 0.06em;
}

[data-reveal].is-visible .bridge-overview-poster__motion--fact:nth-child(odd) {
  transform: translate3d(0, -2px, 0) rotateX(0deg);
}

[data-reveal].is-visible .bridge-overview-poster__motion--fact:nth-child(even) {
  transform: translate3d(0, 0, 0) rotateX(0deg);
}

.bridge-overview-poster__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
  margin-top: 1.2rem;
}

.bridge-overview-poster__fact {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem 1rem 1.12rem;
  min-height: clamp(180px, 18vw, 240px);
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 42%, rgba(255, 255, 255, 0.18));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04)),
    radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--bridge-accent) 18%, transparent), transparent 62%);
  box-shadow:
    inset 0 0 0 1px rgba(244, 250, 252, 0.06),
    0 12px 28px rgba(0, 0, 0, 0.16);
}

.bridge-overview-poster__fact span {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.84rem;
  letter-spacing: 0.14em;
  color: rgba(215, 233, 238, 0.9);
}

.bridge-overview-poster__fact strong {
  display: flex;
  flex: 1;
  align-items: center;
  margin-top: 0.15rem;
  font-size: clamp(4.8rem, 10vw, 8.2rem);
  line-height: 0.84;
  color: #ffffff;
  text-shadow:
    0 2px 0 rgba(255, 255, 255, 0.08),
    0 14px 28px color-mix(in srgb, var(--bridge-accent) 22%, rgba(0, 0, 0, 0.24));
}

.bridge-overview-poster__countup-wrap {
  display: inline-flex;
  align-items: flex-end;
  flex-wrap: nowrap;
  gap: 0.04em;
  white-space: nowrap;
  width: 100%;
}

.bridge-overview-poster__countup {
  display: inline-block;
  min-width: 0;
  font-variant-numeric: tabular-nums;
  font-size: 1em;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #ffffff;
}

.bridge-overview-poster__countup-prefix,
.bridge-overview-poster__countup-suffix {
  display: inline-block;
  font-size: 0.99em;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  color: rgba(226, 240, 245, 0.94);
}

.bridge-overview-poster__countup-prefix {
  margin-bottom: 0.14em;
}

.bridge-overview-poster__countup-suffix {
  margin-bottom: 0.14em;
}

:is(.bridge-overview-poster--guangji, .bridge-overview-poster--luoyang, .bridge-overview-poster--zhaozhou) .bridge-overview-poster__facts {
  gap: 0.72rem;
}

:is(.bridge-overview-poster--guangji, .bridge-overview-poster--luoyang, .bridge-overview-poster--zhaozhou) .bridge-overview-poster__fact {
  position: relative;
  display: grid;
  grid-template-columns: minmax(8.6rem, 0.82fr) minmax(0, 1fr);
  align-items: center;
  column-gap: 0.78rem;
  min-height: 86px;
  padding: 0.82rem 0.96rem;
  overflow: hidden;
  justify-content: initial;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--bridge-accent) 18%, rgba(255, 255, 255, 0.08)), rgba(255, 255, 255, 0.035)),
    radial-gradient(120% 140% at 92% 16%, color-mix(in srgb, var(--bridge-accent) 22%, transparent), transparent 58%),
    rgba(7, 13, 19, 0.52);
}

:is(.bridge-overview-poster--guangji, .bridge-overview-poster--luoyang, .bridge-overview-poster--zhaozhou) .bridge-overview-poster__fact::after {
  content: "";
  position: absolute;
  left: 0.96rem;
  right: 0.96rem;
  bottom: 0.7rem;
  height: 1px;
  background: linear-gradient(90deg, rgba(229, 241, 245, 0.28), rgba(229, 241, 245, 0.02));
}

:is(.bridge-overview-poster--guangji, .bridge-overview-poster--luoyang, .bridge-overview-poster--zhaozhou) .bridge-overview-poster__fact span {
  margin-bottom: 0;
  font-size: clamp(0.86rem, 1.02vw, 0.98rem);
  line-height: 1.35;
  letter-spacing: 0.08em;
  color: rgba(230, 241, 245, 0.94);
  white-space: nowrap;
}

:is(.bridge-overview-poster--guangji, .bridge-overview-poster--luoyang, .bridge-overview-poster--zhaozhou) .bridge-overview-poster__fact strong {
  justify-content: flex-end;
  align-items: baseline;
  margin-top: 0;
  padding-top: 0;
  font-size: clamp(2.1rem, 3.55vw, 3.35rem);
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}

:is(.bridge-overview-poster--guangji, .bridge-overview-poster--luoyang, .bridge-overview-poster--zhaozhou) .bridge-overview-poster__countup-wrap {
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.12em;
  width: auto;
  white-space: nowrap;
}

:is(.bridge-overview-poster--guangji, .bridge-overview-poster--luoyang, .bridge-overview-poster--zhaozhou) .bridge-overview-poster__countup {
  min-width: 0;
  font-size: 1em;
  font-weight: 800;
  letter-spacing: -0.03em;
}

:is(.bridge-overview-poster--guangji, .bridge-overview-poster--luoyang, .bridge-overview-poster--zhaozhou) .bridge-overview-poster__countup-prefix,
:is(.bridge-overview-poster--guangji, .bridge-overview-poster--luoyang, .bridge-overview-poster--zhaozhou) .bridge-overview-poster__countup-suffix {
  font-size: 0.72em;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  color: rgba(232, 244, 248, 0.96);
}

:is(.bridge-overview-poster--guangji, .bridge-overview-poster--luoyang, .bridge-overview-poster--zhaozhou) .bridge-overview-poster__countup-prefix {
  margin-right: 0;
  margin-bottom: 0;
}

:is(.bridge-overview-poster--guangji, .bridge-overview-poster--luoyang, .bridge-overview-poster--zhaozhou) .bridge-overview-poster__countup-suffix {
  margin-left: 0.02em;
  margin-bottom: 0;
}

:is(.bridge-overview-poster--guangji, .bridge-overview-poster--luoyang, .bridge-overview-poster--zhaozhou) .bridge-overview-poster__gallery {
  margin-top: 1.1rem;
  padding: 0.88rem;
}

:is(.bridge-overview-poster--guangji, .bridge-overview-poster--luoyang, .bridge-overview-poster--zhaozhou) .bridge-overview-poster__gallery-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 50%),
    rgba(9, 16, 22, 0.94);
}

.bridge-overview-poster__story {
  display: grid;
  gap: 1rem;
  margin-top: 1.3rem;
}

.bridge-overview-poster__story p {
  margin: 0;
  max-width: 72rem;
  font-size: clamp(1.02rem, 1.8vw, 1.16rem);
  line-height: 1.95;
  color: rgba(230, 242, 246, 0.9);
}

.bridge-overview-poster__note {
  margin: 1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px dashed color-mix(in srgb, var(--bridge-accent) 36%, rgba(255, 255, 255, 0.14));
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: rgba(183, 210, 217, 0.74);
}

.bridge-overview-poster__gallery {
  margin-top: 1.25rem;
  padding: 0.9rem;
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 24%, var(--line));
  border-radius: 1rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)),
    rgba(6, 12, 18, 0.82);
  box-shadow: inset 0 0 0 1px rgba(240, 247, 249, 0.04);
  outline: none;
}

.bridge-overview-poster__gallery-section .bridge-overview-poster__gallery {
  margin-top: 0;
}

.bridge-overview-poster__gallery:focus-visible {
  border-color: color-mix(in srgb, var(--bridge-accent) 54%, rgba(255, 255, 255, 0.28));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--bridge-accent) 18%, transparent),
    inset 0 0 0 1px rgba(240, 247, 249, 0.04);
}

.bridge-overview-poster__gallery-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
}

.bridge-overview-poster__gallery-head p,
.bridge-overview-poster__gallery-head h3 {
  margin: 0;
}

.bridge-overview-poster__gallery-head p {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--bridge-accent) 74%, var(--paper));
}

.bridge-overview-poster__gallery-head h3 {
  margin-top: 0.26rem;
  font-size: 1rem;
  color: rgba(244, 248, 250, 0.96);
}

.bridge-overview-poster__gallery-window {
  margin-top: 0.78rem;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.bridge-overview-poster__gallery-track {
  display: flex;
  width: max-content;
  gap: 0.82rem;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.bridge-overview-poster__gallery-group {
  display: flex;
  flex-shrink: 0;
  gap: 0.82rem;
}

.bridge-overview-poster__gallery-card {
  display: grid;
  gap: 0.72rem;
  width: min(31vw, 360px);
  min-width: 260px;
  flex-shrink: 0;
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 26%, var(--line));
  border-radius: 0.86rem;
  overflow: hidden;
  background: rgba(8, 14, 20, 0.9);
}

.bridge-overview-poster__gallery-media {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
}

.bridge-overview-poster__gallery-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(4, 8, 12, 0.38));
  pointer-events: none;
}

.bridge-overview-poster__gallery-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 420ms ease;
}

.bridge-overview-poster__gallery-card:hover .bridge-overview-poster__gallery-media img {
  transform: scale(1.06);
}

.bridge-overview-poster__gallery-copy {
  display: grid;
  gap: 0.22rem;
  padding: 0 0.78rem 0.82rem;
}

.bridge-overview-poster__gallery-copy p,
.bridge-overview-poster__gallery-copy strong,
.bridge-overview-poster__gallery-copy span {
  margin: 0;
}

.bridge-overview-poster__gallery-copy p {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--bridge-accent) 72%, var(--paper));
}

.bridge-overview-poster__gallery-copy strong {
  font-size: 1rem;
  color: rgba(246, 250, 251, 0.98);
}

.bridge-overview-poster__gallery-copy span {
  font-size: 0.82rem;
  line-height: 1.6;
  color: rgba(220, 232, 236, 0.82);
}

.bridge-overview-poster__motion--gallery {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity 720ms ease calc(180ms + (var(--poster-delay, 0) * 90ms)),
    transform 720ms ease calc(180ms + (var(--poster-delay, 0) * 90ms));
}

[data-reveal].is-visible .bridge-overview-poster__motion--gallery {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.bridge-overview-dashboard {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 26%, var(--line));
  border-radius: 1rem;
  background:
    radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--bridge-accent) 18%, transparent), transparent 60%),
    rgba(8, 13, 18, 0.84);
  box-shadow: inset 0 0 0 1px rgba(244, 248, 250, 0.04);
}

.bridge-overview-dashboard__head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: end;
}

.bridge-overview-dashboard__head p,
.bridge-overview-dashboard__head h2,
.bridge-overview-dashboard__head span {
  margin: 0;
}

.bridge-overview-dashboard__head p {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--bridge-accent) 74%, var(--paper));
}

.bridge-overview-dashboard__head h2 {
  margin-top: 0.24rem;
  font-size: 1.36rem;
}

.bridge-overview-dashboard__head span {
  max-width: 34rem;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--paper-soft);
}

.bridge-overview-dashboard__headline {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.7rem;
}

.bridge-overview-dashboard__headline-card {
  display: grid;
  gap: 0.22rem;
  padding: 0.82rem 0.86rem;
  border-radius: 0.84rem;
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 16%, rgba(255, 255, 255, 0.1));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 58%),
    rgba(6, 10, 14, 0.46);
}

.bridge-overview-dashboard__headline-card p,
.bridge-overview-dashboard__headline-card strong,
.bridge-overview-dashboard__headline-card span {
  margin: 0;
}

.bridge-overview-dashboard__headline-card p {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--bridge-accent) 72%, var(--paper));
}

.bridge-overview-dashboard__headline-card strong {
  font-size: 1.46rem;
  color: #fff;
}

.bridge-overview-dashboard__headline-card span {
  font-size: 0.82rem;
  line-height: 1.62;
  color: var(--paper-soft);
}

.bridge-overview-dashboard__scenarios {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.bridge-overview-dashboard__scenario {
  min-width: 6.5rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 24%, rgba(255, 255, 255, 0.18));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(234, 238, 240, 0.88);
  cursor: pointer;
  transition:
    transform 220ms ease,
    background 220ms ease,
    box-shadow 220ms ease;
}

.bridge-overview-dashboard__scenario:hover {
  transform: translateY(-1px);
}

.bridge-overview-dashboard__scenario.is-active {
  background: color-mix(in srgb, var(--bridge-accent) 18%, rgba(255, 255, 255, 0.08));
  color: #fff;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--bridge-accent) 28%, rgba(255, 255, 255, 0.18));
}

.bridge-overview-dashboard__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) minmax(0, 1fr);
  gap: 0.9rem;
}

.bridge-overview-dashboard__panel {
  min-width: 0;
  padding: 0.9rem;
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 18%, rgba(255, 255, 255, 0.12));
  border-radius: 0.9rem;
  background: rgba(6, 10, 14, 0.52);
}

.bridge-overview-dashboard__kicker {
  margin: 0;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--bridge-accent) 76%, var(--paper));
}

.bridge-overview-dashboard__panel--summary h3 {
  margin: 0.3rem 0 0;
  font-size: 1.5rem;
}

.bridge-overview-dashboard__panel--summary > span {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.94rem;
  line-height: 1.75;
  color: var(--paper-soft);
}

.bridge-overview-dashboard__panel--summary {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 54%),
    rgba(6, 10, 14, 0.58);
}

.bridge-overview-dashboard__scene {
  position: relative;
  margin-top: 0.85rem;
  min-height: 9.6rem;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background:
    linear-gradient(180deg, rgba(255, 207, 154, 0.14), rgba(10, 16, 22, 0.02) 44%),
    linear-gradient(180deg, rgba(12, 20, 28, 0.96), rgba(9, 16, 22, 0.92));
}

.bridge-overview-dashboard__scene-sky,
.bridge-overview-dashboard__scene-bridge,
.bridge-overview-dashboard__scene-water {
  position: absolute;
  inset-inline: 0;
}

.bridge-overview-dashboard__scene-sky {
  top: 0;
  height: 44%;
}

.bridge-overview-dashboard__scene-bridge {
  top: 40%;
  left: 8%;
  right: 8%;
  height: 16%;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(193, 132, 72, 0.95), rgba(118, 73, 34, 0.96));
  box-shadow:
    0 0 0 1px rgba(255, 232, 203, 0.06),
    0 14px 18px rgba(0, 0, 0, 0.22);
}

.bridge-overview-dashboard__scene-water {
  bottom: 0;
  height: 42%;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 182, 101, 0.08), transparent 60%),
    linear-gradient(180deg, rgba(24, 66, 88, 0.92), rgba(10, 36, 53, 0.98));
}

.bridge-overview-dashboard__scene-pavilion,
.bridge-overview-dashboard__scene-stall,
.bridge-overview-dashboard__scene-boat,
.bridge-overview-dashboard__scene-lantern,
.bridge-overview-dashboard__scene-ripple {
  position: absolute;
  display: block;
}

.bridge-overview-dashboard__scene-pavilion {
  top: -0.95rem;
  left: 18%;
  width: 2.3rem;
  height: 1.75rem;
  background:
    linear-gradient(180deg, rgba(226, 181, 123, 0.92), rgba(129, 82, 44, 0.94));
  clip-path: polygon(50% 0, 100% 34%, 100% 100%, 0 100%, 0 34%);
}

.bridge-overview-dashboard__scene-pavilion--right {
  left: auto;
  right: 16%;
}

.bridge-overview-dashboard__scene-stall {
  bottom: 0.25rem;
  width: 1.1rem;
  height: 0.75rem;
  border-radius: 0.15rem;
  background: rgba(247, 210, 152, 0.92);
  box-shadow: 0 -0.3rem 0 0 rgba(153, 80, 39, 0.96);
}

.bridge-overview-dashboard__scene-stall--1 {
  left: 35%;
}

.bridge-overview-dashboard__scene-stall--2 {
  left: 48%;
}

.bridge-overview-dashboard__scene-stall--3 {
  left: 61%;
}

.bridge-overview-dashboard__scene-boat {
  bottom: 1.55rem;
  width: 3.2rem;
  height: 0.92rem;
  border-radius: 0 0 1rem 1rem;
  background: linear-gradient(180deg, rgba(219, 163, 96, 0.96), rgba(105, 59, 28, 0.96));
}

.bridge-overview-dashboard__scene-boat::before {
  content: "";
  position: absolute;
  left: 1.35rem;
  bottom: 0.72rem;
  width: 0.12rem;
  height: 1.4rem;
  background: rgba(234, 223, 208, 0.9);
}

.bridge-overview-dashboard__scene-boat::after {
  content: "";
  position: absolute;
  left: 1.47rem;
  bottom: 1.35rem;
  width: 1rem;
  height: 0.82rem;
  background: rgba(244, 235, 217, 0.92);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.bridge-overview-dashboard__scene-boat--1 {
  left: 14%;
  animation: guangjiDashboardBoat 7.5s ease-in-out infinite;
}

.bridge-overview-dashboard__scene-boat--2 {
  right: 14%;
  transform: scale(0.92);
  animation: guangjiDashboardBoat 8.6s ease-in-out infinite reverse;
}

.bridge-overview-dashboard__scene-ripple {
  left: 10%;
  right: 10%;
  bottom: 0.8rem;
  height: 1rem;
  background:
    radial-gradient(circle at 10% 50%, rgba(169, 216, 235, 0.34) 0 0.14rem, transparent 0.16rem),
    radial-gradient(circle at 28% 50%, rgba(169, 216, 235, 0.24) 0 0.12rem, transparent 0.14rem),
    radial-gradient(circle at 56% 50%, rgba(169, 216, 235, 0.28) 0 0.13rem, transparent 0.15rem),
    radial-gradient(circle at 82% 50%, rgba(169, 216, 235, 0.22) 0 0.11rem, transparent 0.13rem);
}

.bridge-overview-dashboard__scene-lantern {
  top: 0.95rem;
  width: 0.7rem;
  height: 0.92rem;
  border-radius: 999px;
  background: rgba(255, 194, 107, 0.88);
  box-shadow: 0 0 18px rgba(255, 191, 95, 0.34);
}

.bridge-overview-dashboard__scene-lantern::before {
  content: "";
  position: absolute;
  top: -0.65rem;
  left: 50%;
  width: 1px;
  height: 0.65rem;
  background: rgba(255, 231, 196, 0.34);
  transform: translateX(-50%);
}

.bridge-overview-dashboard__scene-lantern--1 {
  left: 20%;
  animation: guangjiDashboardLantern 4.8s ease-in-out infinite;
}

.bridge-overview-dashboard__scene-lantern--2 {
  left: 47%;
  animation: guangjiDashboardLantern 5.4s ease-in-out infinite;
}

.bridge-overview-dashboard__scene-lantern--3 {
  right: 20%;
  animation: guangjiDashboardLantern 5s ease-in-out infinite;
}

.bridge-overview-dashboard__scene[data-scene-key="night"] {
  background:
    linear-gradient(180deg, rgba(80, 110, 172, 0.2), rgba(10, 16, 24, 0.04) 44%),
    linear-gradient(180deg, rgba(6, 12, 28, 0.98), rgba(5, 11, 24, 0.94));
}

.bridge-overview-dashboard__scene[data-scene-key="night"] .bridge-overview-dashboard__scene-stall {
  opacity: 0.38;
}

.bridge-overview-dashboard__scene[data-scene-key="night"] .bridge-overview-dashboard__scene-boat {
  bottom: 1.15rem;
}

.bridge-overview-dashboard__scene[data-scene-key="night"] .bridge-overview-dashboard__scene-lantern {
  box-shadow: 0 0 22px rgba(255, 217, 141, 0.48);
}

.bridge-overview-dashboard__scene[data-scene-key="festival"] {
  background:
    linear-gradient(180deg, rgba(198, 88, 63, 0.18), rgba(10, 16, 22, 0.04) 44%),
    linear-gradient(180deg, rgba(24, 12, 20, 0.96), rgba(15, 15, 26, 0.92));
}

.bridge-overview-dashboard__scene[data-scene-key="festival"] .bridge-overview-dashboard__scene-stall,
.bridge-overview-dashboard__scene[data-scene-key="festival"] .bridge-overview-dashboard__scene-lantern {
  background: rgba(255, 126, 91, 0.9);
}

.bridge-overview-dashboard__scene[data-scene-key="festival"] .bridge-overview-dashboard__scene-lantern {
  box-shadow: 0 0 20px rgba(255, 104, 74, 0.44);
}

@keyframes guangjiDashboardBoat {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0.35rem, -0.14rem, 0);
  }
}

@keyframes guangjiDashboardLantern {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0.12rem, 0.18rem, 0);
  }
}

.bridge-overview-dashboard__stats {
  margin-top: 0.85rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
}

.bridge-overview-dashboard__stat {
  display: grid;
  gap: 0.22rem;
  padding: 0.7rem;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.bridge-overview-dashboard__stat span {
  font-size: 0.76rem;
  color: var(--paper-soft);
}

.bridge-overview-dashboard__stat strong {
  font-size: 1.2rem;
  color: #fff;
}

.bridge-overview-dashboard__bulletins {
  display: grid;
  gap: 0.52rem;
  margin-top: 0.78rem;
}

.bridge-overview-dashboard__bulletins p {
  margin: 0;
  padding: 0.72rem 0.78rem;
  border-radius: 0.78rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 12%, rgba(255, 255, 255, 0.08));
  color: var(--paper-soft);
  line-height: 1.7;
  font-size: 0.88rem;
}

.bridge-overview-dashboard__radar-wrap {
  display: grid;
  gap: 0.9rem;
  justify-items: center;
}

.bridge-overview-dashboard__radar-stage {
  position: relative;
  width: min(100%, 260px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.bridge-overview-dashboard__gauge {
  display: grid;
  place-items: center;
}

.bridge-overview-dashboard__gauge-ring {
  --dashboard-angle: calc(var(--dashboard-score, 0) * 3.6deg);
  width: 11rem;
  aspect-ratio: 1;
  padding: 0.9rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(8, 12, 16, 0.96) 57%, transparent 58%),
    conic-gradient(
      from -90deg,
      color-mix(in srgb, var(--bridge-accent) 82%, #fff) 0deg,
      color-mix(in srgb, var(--bridge-accent) 82%, #fff) var(--dashboard-angle),
      rgba(255, 255, 255, 0.08) var(--dashboard-angle),
      rgba(255, 255, 255, 0.08) 360deg
    );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 18px 34px rgba(0, 0, 0, 0.24);
}

.bridge-overview-dashboard__gauge-core {
  display: grid;
  place-items: center;
  gap: 0.18rem;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background:
    radial-gradient(100% 100% at 50% 0%, color-mix(in srgb, var(--bridge-accent) 12%, transparent), transparent 70%),
    rgba(7, 12, 17, 0.96);
  text-align: center;
}

.bridge-overview-dashboard__gauge-core span {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--bridge-accent) 74%, var(--paper));
}

.bridge-overview-dashboard__gauge-core strong {
  font-size: 2.9rem;
  line-height: 0.9;
  color: #fff;
}

.bridge-overview-dashboard__gauge-core small {
  font-size: 0.74rem;
  color: rgba(226, 234, 237, 0.72);
}

.bridge-overview-dashboard__radar {
  width: min(100%, 220px);
  height: auto;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.22));
}

.bridge-overview-dashboard__radar circle {
  fill: none;
  stroke: rgba(226, 234, 237, 0.12);
}

.bridge-overview-dashboard__radar polygon {
  fill: color-mix(in srgb, var(--bridge-accent) 36%, transparent);
  stroke: color-mix(in srgb, var(--bridge-accent) 78%, white 12%);
  stroke-width: 2;
}

.bridge-overview-dashboard__radar-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.bridge-overview-dashboard__radar-labels span {
  position: absolute;
  left: var(--radar-label-x);
  top: var(--radar-label-y);
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 5.2rem;
  max-width: 6.4rem;
  padding: 0.28rem 0.46rem;
  border-radius: 999px;
  font-size: 0.76rem;
  line-height: 1.25;
  text-align: center;
  color: rgba(229, 237, 240, 0.92);
  background: rgba(5, 9, 13, 0.78);
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 14%, rgba(255, 255, 255, 0.1));
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

.bridge-overview-dashboard__bars {
  display: grid;
  gap: 0.82rem;
}

.bridge-overview-dashboard__panel--bars {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 56%),
    rgba(6, 10, 14, 0.58);
}

.bridge-overview-dashboard__bar-row {
  display: grid;
  gap: 0.32rem;
  padding: 0.7rem 0.75rem;
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.03);
}

.bridge-overview-dashboard__bar-copy {
  display: flex;
  justify-content: space-between;
  gap: 0.7rem;
}

.bridge-overview-dashboard__bar-copy span {
  font-size: 0.86rem;
  color: var(--paper-soft);
}

.bridge-overview-dashboard__bar-copy strong {
  font-size: 0.92rem;
  color: #fff;
}

.bridge-overview-dashboard__bar-track {
  height: 0.7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.bridge-overview-dashboard__bar-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--bridge-accent) 76%, #fff), color-mix(in srgb, var(--bridge-accent) 34%, #fff));
  transition: width 360ms ease;
}

.bridge-overview-dashboard__signals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.58rem;
  margin-top: 0.82rem;
}

.bridge-overview-dashboard__mini-dossier {
  display: grid;
  gap: 0.72rem;
  margin-top: 0.86rem;
  padding-top: 0.86rem;
  border-top: 1px solid color-mix(in srgb, var(--bridge-accent) 12%, rgba(255, 255, 255, 0.08));
}

.bridge-overview-dashboard__subhead--compact {
  margin-bottom: 0;
}

.bridge-overview-dashboard__mini-dossier-grid {
  display: grid;
  gap: 0.62rem;
}

.bridge-overview-dashboard__mini-dossier-card {
  display: grid;
  gap: 0.22rem;
  padding: 0.72rem 0.76rem;
  border-radius: 0.76rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 12%, rgba(255, 255, 255, 0.08));
}

.bridge-overview-dashboard__mini-dossier-card p,
.bridge-overview-dashboard__mini-dossier-card strong,
.bridge-overview-dashboard__mini-dossier-card span {
  margin: 0;
}

.bridge-overview-dashboard__mini-dossier-card p {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--bridge-accent) 72%, var(--paper));
}

.bridge-overview-dashboard__mini-dossier-card strong {
  font-size: 1rem;
  line-height: 1.36;
  color: #fff;
}

.bridge-overview-dashboard__mini-dossier-card span {
  font-size: 0.84rem;
  line-height: 1.62;
  color: var(--paper-soft);
}

.bridge-overview-dashboard__signal {
  display: grid;
  gap: 0.18rem;
  padding: 0.72rem 0.76rem;
  border-radius: 0.76rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 12%, rgba(255, 255, 255, 0.08));
}

.bridge-overview-dashboard__signal p,
.bridge-overview-dashboard__signal strong {
  margin: 0;
}

.bridge-overview-dashboard__signal p {
  font-size: 0.74rem;
  color: var(--paper-soft);
}

.bridge-overview-dashboard__signal strong {
  font-size: 1rem;
  color: #fff;
}

.bridge-overview-dashboard__detail-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 0.9rem;
}

.bridge-overview-dashboard__subhead {
  display: grid;
  gap: 0.2rem;
  margin-bottom: 0.8rem;
}

.bridge-overview-dashboard__subhead p,
.bridge-overview-dashboard__subhead h3 {
  margin: 0;
}

.bridge-overview-dashboard__subhead p {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--bridge-accent) 72%, var(--paper));
}

.bridge-overview-dashboard__subhead h3 {
  font-size: 1.08rem;
  color: #fff;
}

.bridge-overview-dashboard__timeline {
  display: grid;
  gap: 0.62rem;
}

.bridge-overview-dashboard__timeline-item {
  display: grid;
  gap: 0.24rem;
  padding: 0.78rem 0.82rem;
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 12%, rgba(255, 255, 255, 0.08));
}

.bridge-overview-dashboard__timeline-item strong,
.bridge-overview-dashboard__timeline-item h4,
.bridge-overview-dashboard__timeline-item span {
  margin: 0;
}

.bridge-overview-dashboard__timeline-item strong {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--bridge-accent) 78%, var(--paper));
}

.bridge-overview-dashboard__timeline-item h4 {
  font-size: 0.98rem;
  line-height: 1.42;
  color: #fff;
}

.bridge-overview-dashboard__timeline-item span {
  font-size: 0.86rem;
  line-height: 1.68;
  color: var(--paper-soft);
}

.bridge-overview-dashboard__detail-cards {
  display: grid;
  gap: 0.62rem;
}

.bridge-overview-dashboard__detail-card {
  display: grid;
  gap: 0.24rem;
  padding: 0.8rem 0.84rem;
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 12%, rgba(255, 255, 255, 0.08));
}

.bridge-overview-dashboard__detail-card p,
.bridge-overview-dashboard__detail-card strong,
.bridge-overview-dashboard__detail-card span {
  margin: 0;
}

.bridge-overview-dashboard__detail-card p {
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--bridge-accent) 72%, var(--paper));
}

.bridge-overview-dashboard__detail-card strong {
  font-size: 1.14rem;
  color: #fff;
}

.bridge-overview-dashboard__detail-card span {
  font-size: 0.86rem;
  line-height: 1.68;
  color: var(--paper-soft);
}

.bridge-overview-dossier {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 22%, var(--line));
  border-radius: 1rem;
  background:
    radial-gradient(120% 110% at 100% 0%, color-mix(in srgb, var(--bridge-accent) 16%, transparent), transparent 60%),
    rgba(7, 12, 18, 0.82);
}

.bridge-overview-dossier__head {
  display: grid;
  gap: 0.24rem;
}

.bridge-overview-dossier__head p,
.bridge-overview-dossier__head h2,
.bridge-overview-dossier__head span {
  margin: 0;
}

.bridge-overview-dossier__head p {
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--bridge-accent) 74%, var(--paper));
}

.bridge-overview-dossier__head h2 {
  font-size: 1.34rem;
}

.bridge-overview-dossier__head span {
  max-width: 56rem;
  color: var(--paper-soft);
  line-height: 1.72;
}

.bridge-overview-dossier__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.bridge-overview-dossier__card {
  display: grid;
  gap: 0.34rem;
  padding: 0.96rem;
  border-radius: 0.92rem;
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 18%, rgba(255, 255, 255, 0.12));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 60%),
    rgba(6, 10, 14, 0.58);
}

.bridge-overview-dossier__card p,
.bridge-overview-dossier__card h3,
.bridge-overview-dossier__card span {
  margin: 0;
}

.bridge-overview-dossier__card p {
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--bridge-accent) 72%, var(--paper));
}

.bridge-overview-dossier__card h3 {
  font-size: 1.14rem;
}

.bridge-overview-dossier__card span {
  color: var(--paper-soft);
  line-height: 1.8;
  font-size: 0.92rem;
}

.bridge-overview-analytics {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 22%, var(--line));
  border-radius: 1rem;
  background:
    radial-gradient(120% 110% at 100% 0%, color-mix(in srgb, var(--bridge-accent) 14%, transparent), transparent 60%),
    rgba(7, 12, 18, 0.82);
}

.bridge-overview-analytics__head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
}

.bridge-overview-analytics__head p,
.bridge-overview-analytics__head h2,
.bridge-overview-analytics__head span {
  margin: 0;
}

.bridge-overview-analytics__head p {
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--bridge-accent) 74%, var(--paper));
}

.bridge-overview-analytics__head h2 {
  font-size: 1.34rem;
}

.bridge-overview-analytics__head span {
  max-width: 34rem;
  color: var(--paper-soft);
  line-height: 1.72;
}

.bridge-overview-analytics__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: 0.9rem;
}

.bridge-overview-analytics__metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
}

.bridge-overview-analytics__metric {
  display: grid;
  gap: 0.26rem;
  padding: 0.9rem;
  border-radius: 0.9rem;
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 18%, rgba(255, 255, 255, 0.12));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 56%),
    rgba(6, 10, 14, 0.58);
}

.bridge-overview-analytics__metric p,
.bridge-overview-analytics__metric strong,
.bridge-overview-analytics__metric span {
  margin: 0;
}

.bridge-overview-analytics__metric p {
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--bridge-accent) 72%, var(--paper));
}

.bridge-overview-analytics__metric strong {
  font-size: 1.5rem;
  color: #fff;
}

.bridge-overview-analytics__metric span {
  font-size: 0.88rem;
  line-height: 1.72;
  color: var(--paper-soft);
}

.bridge-overview-analytics__panel {
  min-width: 0;
  padding: 0.96rem;
  border-radius: 0.92rem;
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 18%, rgba(255, 255, 255, 0.12));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 56%),
    rgba(6, 10, 14, 0.58);
}

.bridge-overview-analytics__bars {
  display: grid;
  gap: 0.82rem;
}

.bridge-overview-analytics__bar-row {
  display: grid;
  gap: 0.34rem;
  padding: 0.7rem 0.75rem;
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.03);
}

.bridge-overview-analytics__bar-copy {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.7rem;
}

.bridge-overview-analytics__bar-copy span {
  font-size: 0.86rem;
  color: var(--paper-soft);
}

.bridge-overview-analytics__bar-copy strong {
  font-size: 1.3rem;
  color: #fff;
}

.bridge-overview-analytics__bar-copy small {
  margin-left: 0.24rem;
  font-size: 0.76rem;
  color: rgba(223, 232, 238, 0.72);
}

.bridge-overview-analytics__bar-track {
  height: 0.72rem;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.07);
}

.bridge-overview-analytics__bar-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--bridge-accent) 78%, #fff), color-mix(in srgb, var(--bridge-accent) 28%, #fff));
}

.bridge-overview-analytics__pie-wrap {
  display: grid;
  justify-items: center;
  gap: 1rem;
}

.bridge-overview-analytics__pie {
  width: min(100%, 244px);
  aspect-ratio: 1;
  padding: 1rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(8, 12, 16, 0.96) 57%, transparent 58%),
    conic-gradient(var(--analytics-pie));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 18px 34px rgba(0, 0, 0, 0.24);
}

.bridge-overview-analytics__pie-core {
  display: grid;
  place-items: center;
  gap: 0.18rem;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background:
    radial-gradient(100% 100% at 50% 0%, color-mix(in srgb, var(--bridge-accent) 12%, transparent), transparent 70%),
    rgba(7, 12, 17, 0.96);
  text-align: center;
}

.bridge-overview-analytics__pie-core span {
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--bridge-accent) 74%, var(--paper));
}

.bridge-overview-analytics__pie-core strong {
  font-size: 2.4rem;
  line-height: 0.92;
  color: #fff;
}

.bridge-overview-analytics__pie-core small {
  font-size: 0.76rem;
  color: rgba(223, 232, 238, 0.72);
}

.bridge-overview-analytics__legend {
  display: grid;
  gap: 0.56rem;
  width: 100%;
}

.bridge-overview-analytics__legend-item {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.58rem 0.7rem;
  border-radius: 0.72rem;
  background: rgba(255, 255, 255, 0.03);
}

.bridge-overview-analytics__legend-item i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--legend-color);
  box-shadow: 0 0 10px color-mix(in srgb, var(--legend-color) 48%, transparent);
}

.bridge-overview-analytics__legend-item span {
  font-size: 0.84rem;
  color: var(--paper-soft);
}

.bridge-overview-analytics__legend-item strong {
  font-size: 1rem;
  color: #fff;
}

.bridge-overview-analytics__notes {
  display: grid;
  gap: 0.7rem;
}

.bridge-overview-analytics__supplement {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.82fr);
  gap: 0.82rem;
  align-items: start;
}

.bridge-overview-analytics__notes p {
  margin: 0;
  padding: 0.78rem 0.86rem;
  border-radius: 0.82rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 14%, rgba(255, 255, 255, 0.08));
  color: var(--paper-soft);
  line-height: 1.68;
}

.bridge-overview-analytics__mini-dossier {
  display: grid;
  gap: 0.72rem;
}

.bridge-overview-analytics__mini-head {
  display: grid;
  gap: 0.18rem;
}

.bridge-overview-analytics__mini-head p,
.bridge-overview-analytics__mini-head h3,
.bridge-overview-analytics__mini-head span {
  margin: 0;
}

.bridge-overview-analytics__mini-head p {
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--bridge-accent) 74%, var(--paper));
}

.bridge-overview-analytics__mini-head h3 {
  font-size: 1.08rem;
  color: #fff;
}

.bridge-overview-analytics__mini-head span {
  color: var(--paper-soft);
  line-height: 1.64;
  font-size: 0.92rem;
}

.bridge-overview-analytics__mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.68rem;
}

.bridge-overview-analytics__mini-card {
  display: grid;
  gap: 0.22rem;
  padding: 0.8rem 0.84rem;
  border-radius: 0.88rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 14%, rgba(255, 255, 255, 0.08));
}

.bridge-overview-analytics__mini-card p,
.bridge-overview-analytics__mini-card strong,
.bridge-overview-analytics__mini-card span {
  margin: 0;
}

.bridge-overview-analytics__mini-card p {
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--bridge-accent) 72%, var(--paper));
}

.bridge-overview-analytics__mini-card strong {
  font-size: 1rem;
  color: #fff;
}

.bridge-overview-analytics__mini-card span {
  font-size: 0.84rem;
  line-height: 1.62;
  color: var(--paper-soft);
}

.bridge-overview-structure {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 22%, var(--line));
  border-radius: 1rem;
  background:
    radial-gradient(120% 110% at 100% 0%, color-mix(in srgb, var(--bridge-accent) 14%, transparent), transparent 62%),
    rgba(7, 12, 18, 0.82);
  box-shadow: 0 16px 40px rgba(3, 7, 12, 0.24);
}

.bridge-overview-structure__head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
}

.bridge-overview-structure__head p,
.bridge-overview-structure__head h2,
.bridge-overview-structure__head span {
  margin: 0;
}

.bridge-overview-structure__head p {
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--bridge-accent) 74%, var(--paper));
}

.bridge-overview-structure__head h2 {
  font-size: 1.34rem;
}

.bridge-overview-structure__head span {
  max-width: 38rem;
  color: var(--paper-soft);
  line-height: 1.72;
}

.bridge-overview-structure__tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.72rem;
}

.bridge-overview-structure__tab {
  display: grid;
  gap: 0.2rem;
  padding: 0.86rem 0.92rem;
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 18%, rgba(255, 255, 255, 0.12));
  border-radius: 0.9rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 58%),
    rgba(6, 10, 14, 0.58);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.bridge-overview-structure__tab:hover,
.bridge-overview-structure__tab:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--bridge-accent) 42%, rgba(255, 255, 255, 0.18));
  box-shadow: 0 10px 28px color-mix(in srgb, var(--bridge-accent) 16%, transparent);
  outline: none;
}

.bridge-overview-structure__tab strong,
.bridge-overview-structure__tab span {
  margin: 0;
}

.bridge-overview-structure__tab strong {
  font-size: 1rem;
  color: #fff;
}

.bridge-overview-structure__tab span {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--paper-soft);
}

.bridge-overview-structure__tab.is-active {
  border-color: color-mix(in srgb, var(--bridge-accent) 66%, rgba(255, 255, 255, 0.22));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bridge-accent) 15%, rgba(255, 255, 255, 0.06)), transparent 62%),
    rgba(8, 12, 16, 0.82);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--bridge-accent) 30%, transparent),
    0 14px 34px color-mix(in srgb, var(--bridge-accent) 18%, transparent);
}

.bridge-overview-structure__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 0.9rem;
  align-items: stretch;
}

.bridge-overview-structure__visual,
.bridge-overview-structure__panel {
  min-width: 0;
  padding: 0.96rem;
  border-radius: 0.92rem;
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 18%, rgba(255, 255, 255, 0.12));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 56%),
    rgba(6, 10, 14, 0.58);
}

.bridge-overview-structure__visual {
  display: grid;
  gap: 0.82rem;
}

.bridge-overview-structure__diagram {
  width: 100%;
  height: auto;
  border-radius: 0.86rem;
  background:
    radial-gradient(120% 110% at 50% 0%, color-mix(in srgb, var(--bridge-accent) 12%, transparent), transparent 64%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
}

.bridge-overview-structure__water {
  fill: rgba(86, 122, 146, 0.12);
}

.bridge-overview-structure__deck,
.bridge-overview-structure__arch,
.bridge-overview-structure__shoulder,
.bridge-overview-structure__abutment,
.bridge-overview-structure__flow,
.bridge-overview-structure__node {
  transition:
    opacity 180ms ease,
    stroke 180ms ease,
    fill 180ms ease,
    filter 180ms ease;
}

.bridge-overview-structure__deck {
  stroke: rgba(225, 233, 238, 0.84);
  stroke-width: 10;
  stroke-linecap: round;
}

.bridge-overview-structure__arch {
  fill: none;
  stroke: rgba(232, 237, 240, 0.92);
  stroke-width: 14;
  stroke-linecap: round;
}

.bridge-overview-structure__shoulder {
  fill: none;
  stroke: rgba(197, 210, 184, 0.76);
  stroke-width: 9;
  stroke-linecap: round;
}

.bridge-overview-structure__abutment {
  fill: rgba(164, 174, 154, 0.28);
  stroke: rgba(210, 220, 202, 0.5);
  stroke-width: 2;
}

.bridge-overview-structure__flow {
  fill: none;
  stroke: rgba(118, 168, 196, 0.68);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 10 12;
}

.bridge-overview-structure__node {
  fill: rgba(234, 240, 244, 0.22);
  stroke: rgba(235, 240, 245, 0.82);
  stroke-width: 2;
}

.bridge-overview-structure__visual[data-structure-active="arch"] .bridge-overview-structure__arch--main,
.bridge-overview-structure__visual[data-structure-active="arch"] .bridge-overview-structure__node--arch {
  stroke: #f3f6f7;
  filter: drop-shadow(0 0 18px rgba(243, 246, 247, 0.3));
}

.bridge-overview-structure__visual[data-structure-active="arch"] .bridge-overview-structure__node--arch {
  fill: rgba(243, 246, 247, 0.26);
}

.bridge-overview-structure__visual[data-structure-active="shoulder"] .bridge-overview-structure__shoulder,
.bridge-overview-structure__visual[data-structure-active="shoulder"] .bridge-overview-structure__node--shoulder {
  stroke: color-mix(in srgb, var(--bridge-accent) 86%, #f4f5ef);
  filter: drop-shadow(0 0 16px color-mix(in srgb, var(--bridge-accent) 34%, transparent));
}

.bridge-overview-structure__visual[data-structure-active="shoulder"] .bridge-overview-structure__node--shoulder {
  fill: color-mix(in srgb, var(--bridge-accent) 36%, rgba(255, 255, 255, 0.18));
}

.bridge-overview-structure__visual[data-structure-active="flood"] .bridge-overview-structure__flow,
.bridge-overview-structure__visual[data-structure-active="flood"] .bridge-overview-structure__node--flood {
  stroke: #7fd8ff;
  filter: drop-shadow(0 0 16px rgba(127, 216, 255, 0.26));
}

.bridge-overview-structure__visual[data-structure-active="flood"] .bridge-overview-structure__node--flood {
  fill: rgba(127, 216, 255, 0.22);
}

.bridge-overview-structure__visual[data-structure-active="abutment"] .bridge-overview-structure__abutment,
.bridge-overview-structure__visual[data-structure-active="abutment"] .bridge-overview-structure__node--abutment {
  stroke: #e5cfa1;
  fill: rgba(229, 207, 161, 0.22);
  filter: drop-shadow(0 0 16px rgba(229, 207, 161, 0.18));
}

.bridge-overview-structure__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.56rem;
}

.bridge-overview-structure__legend span,
.bridge-overview-structure__facts em {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.34rem 0.68rem;
  border-radius: 999px;
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: color-mix(in srgb, var(--bridge-accent) 76%, var(--paper));
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 15%, rgba(255, 255, 255, 0.08));
}

.bridge-overview-structure__visual-note {
  margin: 0;
  padding: 0.78rem 0.84rem;
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 12%, rgba(255, 255, 255, 0.08));
  color: var(--paper-soft);
  line-height: 1.72;
  font-size: 0.9rem;
}

.bridge-overview-structure__panel {
  display: grid;
  align-content: start;
  gap: 0.7rem;
}

.bridge-overview-structure__kicker,
.bridge-overview-structure__panel h3,
.bridge-overview-structure__panel span {
  margin: 0;
}

.bridge-overview-structure__kicker {
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--bridge-accent) 76%, var(--paper));
}

.bridge-overview-structure__panel h3 {
  font-size: 1.26rem;
  line-height: 1.34;
  color: #fff;
}

.bridge-overview-structure__panel span {
  color: var(--paper-soft);
  line-height: 1.82;
}

.bridge-overview-structure__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.56rem;
}

.bridge-overview-structure__cards {
  display: grid;
  gap: 0.72rem;
}

.bridge-overview-structure__card {
  display: grid;
  gap: 0.42rem;
  padding: 0.84rem 0.88rem;
  border-radius: 0.82rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 14%, rgba(255, 255, 255, 0.08));
}

.bridge-overview-structure__card p,
.bridge-overview-structure__card h4,
.bridge-overview-structure__card span {
  margin: 0;
}

.bridge-overview-structure__card p {
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--bridge-accent) 72%, var(--paper));
}

.bridge-overview-structure__card h4 {
  font-size: 1rem;
  line-height: 1.42;
  color: #fff;
}

.bridge-overview-structure__card span {
  color: var(--paper-soft);
  line-height: 1.74;
  font-size: 0.92rem;
}

.bridge-overview-structure--zhaozhou {
  gap: 0.82rem;
  padding: 0.88rem;
}

.bridge-overview-structure--zhaozhou .bridge-overview-structure__head {
  gap: 0.72rem;
}

.bridge-overview-structure--zhaozhou .bridge-overview-structure__head span {
  max-width: 31rem;
  line-height: 1.62;
  font-size: 0.92rem;
}

.bridge-overview-structure--zhaozhou .bridge-overview-structure__layout {
  grid-template-columns: minmax(0, 1.02fr) minmax(340px, 0.98fr);
  gap: 0.78rem;
}

.bridge-overview-structure--zhaozhou .bridge-overview-structure__visual,
.bridge-overview-structure--zhaozhou .bridge-overview-structure__panel {
  padding: 0.82rem;
}

.bridge-overview-structure--zhaozhou .bridge-overview-structure__visual {
  gap: 0.68rem;
}

.bridge-overview-structure--zhaozhou .bridge-overview-structure__visual-note {
  padding: 0.66rem 0.74rem;
  font-size: 0.84rem;
  line-height: 1.56;
}

.bridge-overview-structure--zhaozhou .bridge-overview-structure__panel {
  gap: 0.58rem;
}

.bridge-overview-structure--zhaozhou .bridge-overview-structure__panel h3 {
  font-size: 1.14rem;
}

.bridge-overview-structure--zhaozhou .bridge-overview-structure__panel > span {
  font-size: 0.92rem;
  line-height: 1.66;
}

.bridge-overview-structure--zhaozhou .bridge-overview-structure__cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.62rem;
}

.bridge-overview-structure--zhaozhou .bridge-overview-structure__card {
  gap: 0.32rem;
  padding: 0.72rem 0.76rem;
}

.bridge-overview-structure--zhaozhou .bridge-overview-structure__card h4 {
  font-size: 0.95rem;
  line-height: 1.34;
}

.bridge-overview-structure--zhaozhou .bridge-overview-structure__card span {
  font-size: 0.84rem;
  line-height: 1.58;
}

.bridge-overview-structure--zhaozhou .bridge-overview-structure__facts {
  gap: 0.42rem;
}

.bridge-overview-structure--zhaozhou .bridge-overview-structure__facts em,
.bridge-overview-structure--zhaozhou .bridge-overview-structure__legend span {
  min-height: 1.82rem;
  padding: 0.26rem 0.56rem;
  font-size: 0.72rem;
}

.bridge-entry-transitioning {
  overflow: hidden;
}

.bridge-entry-transition {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 280ms ease;
  --entry-accent: #dce5ea;
}

.bridge-entry-transition.is-active {
  opacity: 1;
}

.bridge-entry-transition.is-leaving {
  opacity: 0;
  transition-duration: 420ms;
}

.bridge-entry-transition__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 22%, color-mix(in srgb, var(--entry-accent) 10%, transparent), transparent 38%),
    rgba(2, 5, 8, 0.98);
}

.bridge-entry-transition__figure {
  position: absolute;
  top: 47%;
  left: 50%;
  width: min(72vw, 880px);
  display: grid;
  justify-items: center;
  gap: 1rem;
  transform: translate(-50%, -50%) scale(1.06);
  transform-origin: center;
  transition:
    top 920ms cubic-bezier(0.22, 1, 0.36, 1),
    left 920ms cubic-bezier(0.22, 1, 0.36, 1),
    right 920ms cubic-bezier(0.22, 1, 0.36, 1),
    width 920ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 920ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 280ms ease;
}

.bridge-entry-transition.is-active .bridge-entry-transition__figure {
  transform: translate(-50%, -50%) scale(1);
}

.bridge-entry-transition--corner-left.is-routing .bridge-entry-transition__figure {
  top: 4.8rem;
  left: 5vw;
  width: min(18vw, 220px);
  transform: translate(0, 0) scale(1);
}

.bridge-entry-transition--corner-right.is-routing .bridge-entry-transition__figure {
  top: 4.8rem;
  left: auto;
  right: 5vw;
  width: min(18vw, 220px);
  transform: translate(0, 0) scale(1);
}

.bridge-entry-transition__svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.bridge-entry-transition__svg path {
  fill: none;
  stroke: color-mix(in srgb, var(--entry-accent) 84%, #ffffff);
  stroke-width: 4.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  stroke-dasharray: 880;
  stroke-dashoffset: 880;
  filter:
    drop-shadow(0 0 5px color-mix(in srgb, var(--entry-accent) 58%, transparent))
    drop-shadow(0 0 14px color-mix(in srgb, var(--entry-accent) 34%, transparent))
    drop-shadow(0 0 26px color-mix(in srgb, var(--entry-accent) 16%, transparent));
  transition:
    opacity 280ms ease,
    stroke-dashoffset 860ms cubic-bezier(0.22, 1, 0.36, 1),
    stroke 280ms ease,
    filter 280ms ease;
}

.bridge-entry-transition.is-active .bridge-entry-transition__svg path {
  opacity: 1;
  stroke-dashoffset: 0;
}

.bridge-entry-transition.is-routing .bridge-entry-transition__svg path {
  stroke: color-mix(in srgb, var(--entry-accent) 76%, #eef7ff);
}

.bridge-entry-transition__label {
  margin: 0;
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  color: color-mix(in srgb, var(--entry-accent) 76%, #ffffff);
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 280ms ease,
    transform 520ms ease;
}

.bridge-entry-transition.is-active .bridge-entry-transition__label {
  opacity: 0.92;
  transform: translateY(0);
}

.bridge-entry-transition.is-routing .bridge-entry-transition__label {
  font-size: 0.74rem;
  letter-spacing: 0.18em;
}

.culture-archive {
  display: grid;
  gap: 1rem;
}

.culture-archive__grid {
  position: relative;
  display: grid;
  gap: 1.15rem;
  padding: 0.35rem 0;
}

.culture-archive__grid::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 1px;
  transform: translateX(-50%);
  background:
    linear-gradient(180deg, rgba(239, 228, 209, 0.08), color-mix(in srgb, var(--bridge-accent) 48%, rgba(239, 228, 209, 0.34)) 18%, rgba(239, 228, 209, 0.12));
}

.culture-archive__item {
  position: relative;
  width: min(100%, calc(50% - 1.8rem));
  min-height: 100%;
  padding-top: 1rem;
  overflow: visible;
}

.culture-archive__item .culture-paper__eyebrow,
.culture-archive__item .culture-paper__title,
.culture-archive__item .culture-paper__closing {
  max-width: 100%;
  text-align: left;
  overflow-wrap: break-word;
  word-break: normal;
}

.culture-archive__item::before {
  content: "";
  position: absolute;
  top: 1.25rem;
  width: 0.82rem;
  height: 0.82rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%, rgba(255, 247, 229, 0.9), transparent 34%),
    color-mix(in srgb, var(--bridge-accent) 70%, #f1dcb1);
  box-shadow:
    0 0 0 4px rgba(13, 18, 22, 0.92),
    0 0 0 5px color-mix(in srgb, var(--bridge-accent) 35%, transparent);
}

.culture-archive__item--left {
  justify-self: start;
  margin-right: auto;
}

.culture-archive__item--right {
  justify-self: end;
  margin-left: auto;
}

.culture-archive__item--left::before {
  right: -2.22rem;
}

.culture-archive__item--right::before {
  left: -2.22rem;
}

.culture-archive__index {
  position: absolute;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: color-mix(in srgb, var(--bridge-accent) 76%, var(--paper));
}

.culture-archive__index::after {
  content: "";
  width: 1.8rem;
  height: 1px;
  background: color-mix(in srgb, var(--bridge-accent) 42%, rgba(239, 228, 209, 0.22));
}

.culture-archive__item--left .culture-archive__index {
  right: 0;
}

.culture-archive__item--right .culture-archive__index {
  left: 0;
}

.culture-archive__item > * {
  position: relative;
  z-index: 1;
}

.culture-audio {
  display: flex;
  align-items: center;
  gap: 0.58rem;
  flex-wrap: wrap;
  margin-top: 0.12rem;
}

.culture-archive__item--left .culture-audio {
  justify-content: flex-end;
}

.culture-audio__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  min-height: 2.16rem;
  padding: 0.42rem 0.74rem;
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 46%, rgba(239, 228, 209, 0.24));
  border-radius: 999px;
  background:
    radial-gradient(100% 160% at 0% 0%, color-mix(in srgb, var(--bridge-accent) 18%, transparent), transparent 68%),
    rgba(239, 228, 209, 0.055);
  color: rgba(255, 248, 232, 0.94);
  cursor: pointer;
  transition:
    transform 180ms var(--easing),
    border-color 180ms var(--easing),
    background 180ms var(--easing);
}

.culture-audio__toggle:hover,
.culture-audio__toggle:focus-visible,
.culture-audio__toggle.is-playing {
  border-color: color-mix(in srgb, var(--bridge-accent) 72%, rgba(239, 228, 209, 0.36));
  background:
    radial-gradient(100% 160% at 0% 0%, color-mix(in srgb, var(--bridge-accent) 28%, transparent), transparent 68%),
    rgba(239, 228, 209, 0.08);
}

.culture-audio__toggle:hover,
.culture-audio__toggle:focus-visible {
  transform: translateY(-1px);
}

.culture-audio__icon {
  width: 0.72rem;
  height: 0.72rem;
  display: inline-block;
  clip-path: polygon(12% 0, 12% 100%, 100% 50%);
  background: currentColor;
}

.culture-audio__toggle.is-playing .culture-audio__icon {
  clip-path: none;
  background:
    linear-gradient(90deg, currentColor 0 32%, transparent 32% 68%, currentColor 68% 100%);
}

.culture-audio__label {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.culture-audio__title {
  color: rgba(239, 228, 209, 0.6);
  font-size: 0.75rem;
}

.culture-archive__item--has-image {
  cursor: pointer;
}

.culture-archive__item--has-image:hover,
.culture-archive__item--has-image:focus-within {
  z-index: 12;
}

.culture-archive__item--has-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent 36%, rgba(255, 255, 255, 0.025)),
    radial-gradient(100% 90% at 50% 0%, rgba(255, 255, 255, 0.04), transparent 56%);
}

.culture-archive__media-popup {
  position: absolute;
  top: 50%;
  z-index: 9;
  width: min(24rem, 34vw);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-50%) translateX(12px) scale(0.98);
  transition:
    opacity 220ms ease,
    transform 220ms ease;
}

.culture-archive__item--left .culture-archive__media-popup {
  left: calc(100% + 1rem);
}

.culture-archive__item--right .culture-archive__media-popup {
  right: calc(100% + 1rem);
  transform: translateY(-50%) translateX(-12px) scale(0.98);
}

.culture-archive__media-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 34%, rgba(239, 228, 209, 0.2));
  border-radius: 1rem;
  background:
    linear-gradient(180deg, rgba(10, 16, 21, 0.92), rgba(8, 13, 18, 0.88)),
    radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--bridge-accent) 12%, transparent), transparent 60%);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.3),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  padding: 0.5rem;
  backdrop-filter: blur(10px) saturate(0.86);
}

.culture-archive__media-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 32%, rgba(255, 255, 255, 0.03)),
    radial-gradient(100% 80% at 50% 0%, rgba(255, 255, 255, 0.05), transparent 54%);
}

.culture-archive__media-image {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 0.72rem;
  background:
    linear-gradient(180deg, rgba(7, 12, 18, 0.16), rgba(7, 12, 18, 0.28)),
    var(--archive-image) center / cover no-repeat;
  filter: saturate(0.82) brightness(0.84);
  opacity: 0.92;
}

.culture-archive__media-copy {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.72rem;
  padding: 0 0.08rem 0.12rem;
}

.culture-archive__media-frame > .culture-archive__media-copy:first-child {
  margin-top: 0;
  padding-top: 0.08rem;
}

.culture-archive__media-source,
.culture-archive__media-quote {
  margin: 0;
}

.culture-archive__media-source {
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--bridge-accent) 70%, var(--paper));
}

.culture-archive__media-quote {
  padding-left: 0.82rem;
  border-left: 2px solid color-mix(in srgb, var(--bridge-accent) 56%, rgba(239, 228, 209, 0.34));
  color: rgba(234, 226, 212, 0.9);
  font-family: "STKaiti", "KaiTi", "Kaiti SC", "Noto Serif SC", serif;
  font-size: 0.92rem;
  line-height: 1.85;
}

.culture-archive__item--has-image:hover .culture-archive__media-popup,
.culture-archive__item--has-image:focus-within .culture-archive__media-popup {
  opacity: 1;
}

.culture-archive__item--has-image:hover.culture-archive__item--left .culture-archive__media-popup,
.culture-archive__item--has-image:focus-within.culture-archive__item--left .culture-archive__media-popup {
  transform: translateY(-50%) translateX(0) scale(1);
}

.culture-archive__item--has-image:hover.culture-archive__item--right .culture-archive__media-popup,
.culture-archive__item--has-image:focus-within.culture-archive__item--right .culture-archive__media-popup {
  transform: translateY(-50%) translateX(0) scale(1);
}

.bridge-layout--culture {
  --culture-card-a: color-mix(in srgb, var(--bridge-accent) 36%, #c99b58);
  --culture-card-b: color-mix(in srgb, var(--bridge-accent) 34%, #6f9ca0);
  --culture-card-c: color-mix(in srgb, var(--bridge-accent) 28%, #efe4d1);
  --culture-card-ink: rgba(255, 247, 232, 0.96);
}

.bridge-layout--realm-guangji.bridge-layout--culture {
  --culture-card-a: #c57932;
  --culture-card-b: #d9aa55;
  --culture-card-c: #2f8d92;
}

.bridge-layout--realm-luoyang.bridge-layout--culture {
  --culture-card-a: #4fa8b9;
  --culture-card-b: #8db6bc;
  --culture-card-c: #d7c08a;
}

.bridge-layout--realm-zhaozhou.bridge-layout--culture {
  --culture-card-a: #9a8f5a;
  --culture-card-b: #6e8d7d;
  --culture-card-c: #d4bf7b;
}

.bridge-layout--culture .culture-timeline__card {
  border-color: color-mix(in srgb, var(--culture-card-b) 42%, var(--line));
  background:
    linear-gradient(132deg, rgba(8, 12, 16, 0.74), rgba(12, 17, 20, 0.66)),
    radial-gradient(120% 135% at 12% 0%, color-mix(in srgb, var(--culture-card-a) 30%, transparent), transparent 58%),
    radial-gradient(110% 125% at 100% 12%, color-mix(in srgb, var(--culture-card-b) 24%, transparent), transparent 60%),
    linear-gradient(110deg, color-mix(in srgb, var(--culture-card-a) 16%, transparent), color-mix(in srgb, var(--culture-card-c) 12%, transparent), color-mix(in srgb, var(--culture-card-b) 16%, transparent));
  background-size: 100% 100%, 150% 150%, 145% 145%, 240% 240%;
  box-shadow:
    0 20px 44px rgba(4, 8, 12, 0.3),
    0 0 28px color-mix(in srgb, var(--culture-card-b) 18%, transparent),
    inset 0 0 0 1px rgba(248, 237, 214, 0.07);
  animation: culture-card-render 9s ease-in-out infinite alternate;
}

.bridge-layout--culture .culture-timeline__item:nth-child(2n) .culture-timeline__card {
  animation-delay: -3.2s;
}

.bridge-layout--culture .culture-timeline__item:nth-child(3n) .culture-timeline__card {
  animation-duration: 10.8s;
}

.bridge-layout--culture .culture-timeline__card::before {
  background:
    linear-gradient(120deg, rgba(255, 244, 217, 0.1), transparent 30%),
    radial-gradient(75% 88% at 80% 18%, color-mix(in srgb, var(--culture-card-c) 16%, transparent), transparent 60%),
    radial-gradient(68% 80% at 4% 100%, color-mix(in srgb, var(--culture-card-a) 14%, transparent), transparent 62%);
  opacity: 0.95;
  animation: culture-card-light 7.5s ease-in-out infinite alternate;
}

.bridge-layout--culture .culture-timeline__title {
  color: var(--culture-card-ink);
}

@keyframes culture-card-render {
  from {
    background-position: 0 0, 0% 0%, 100% 8%, 0% 50%;
    filter: saturate(1);
  }

  to {
    background-position: 0 0, 24% 18%, 78% 34%, 100% 50%;
    filter: saturate(1.14);
  }
}

@keyframes culture-card-light {
  from {
    opacity: 0.68;
    transform: translate3d(-1.5%, -1%, 0);
  }

  to {
    opacity: 0.98;
    transform: translate3d(1.5%, 1%, 0);
  }
}

@keyframes luoyangPosterGalleryLoop {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(calc(-50% - 0.41rem), 0, 0);
  }
}

@media (max-width: 1120px) {
  .bridge-hero--zhaozhou.bridge-hero--cover .bridge-hero__cover-copy {
    transform: translate3d(-4.2vw, -1.6rem, 0);
  }

  .bridge-overview-dossier__grid {
    grid-template-columns: 1fr;
  }

  .bridge-overview-analytics__head {
    align-items: start;
    flex-direction: column;
  }

  .bridge-overview-analytics__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bridge-overview-analytics__layout {
    grid-template-columns: 1fr;
  }

  .bridge-overview-analytics__supplement {
    grid-template-columns: 1fr;
  }

  .bridge-overview-analytics__mini-grid {
    grid-template-columns: 1fr;
  }

  .bridge-overview-structure__head {
    align-items: start;
    flex-direction: column;
  }

  .bridge-overview-structure__tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bridge-overview-structure__layout {
    grid-template-columns: 1fr;
  }

  .bridge-overview-structure--zhaozhou .bridge-overview-structure__cards {
    grid-template-columns: 1fr;
  }

  .culture-archive__grid {
    gap: 0.95rem;
    padding-left: 1.4rem;
  }

  .culture-archive__grid::before {
    left: 0.38rem;
    transform: none;
  }

  .culture-archive__item,
  .culture-archive__item--left,
  .culture-archive__item--right {
    width: 100%;
    justify-self: stretch;
    margin: 0;
    padding-top: 0.9rem;
  }

  .culture-archive__item::before,
  .culture-archive__item--left::before,
  .culture-archive__item--right::before {
    left: -1.42rem;
    right: auto;
  }

  .culture-archive__item .culture-archive__index,
  .culture-archive__item--left .culture-archive__index,
  .culture-archive__item--right .culture-archive__index {
    left: 0;
    right: auto;
  }

  .culture-archive__item .culture-paper__eyebrow,
  .culture-archive__item .culture-paper__title,
  .culture-archive__item .culture-paper__closing,
  .culture-archive__item--left .culture-paper__eyebrow,
  .culture-archive__item--left .culture-paper__title,
  .culture-archive__item--left .culture-paper__closing {
    text-align: left;
  }

  .culture-archive__item--left .culture-audio {
    justify-content: flex-start;
  }

  .culture-archive__media-popup,
  .culture-archive__item--left .culture-archive__media-popup,
  .culture-archive__item--right .culture-archive__media-popup {
    position: static;
    width: 100%;
    margin-top: 0.72rem;
    opacity: 1;
    transform: none;
  }

  .bridge-overview-dashboard__head {
    align-items: start;
    flex-direction: column;
  }

  .bridge-overview-dashboard__headline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bridge-overview-dashboard__layout {
    grid-template-columns: 1fr;
  }

  .bridge-overview-dashboard__detail-grid {
    grid-template-columns: 1fr;
  }

  .bridge-overview-points .overview-hover-board {
    grid-template-columns: 1fr;
  }

  .bridge-overview-hero__media {
    min-height: clamp(280px, 46vh, 520px);
    background-position: center, center;
  }

  .bridge-overview-poster__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :is(.bridge-overview-poster--guangji, .bridge-overview-poster--luoyang, .bridge-overview-poster--zhaozhou) .bridge-overview-poster__fact {
    min-height: 82px;
  }

  :is(.bridge-overview-poster--guangji, .bridge-overview-poster--luoyang, .bridge-overview-poster--zhaozhou) .bridge-overview-poster__fact strong {
    font-size: clamp(1.95rem, 4.7vw, 2.9rem);
  }

  .bridge-overview-poster__gallery-card {
    width: min(48vw, 320px);
  }
}

@media (max-width: 760px) {
  .bridge-hero--zhaozhou.bridge-hero--cover .bridge-hero__cover-copy {
    transform: none;
    max-width: 100%;
  }

  .bridge-overview-dossier {
    padding: 0.88rem;
  }

  .bridge-overview-analytics {
    padding: 0.88rem;
  }

  .bridge-overview-analytics__metrics {
    grid-template-columns: 1fr;
  }

  .bridge-overview-structure {
    padding: 0.88rem;
  }

  .bridge-overview-structure__tabs {
    grid-template-columns: 1fr;
  }

  .bridge-overview-dashboard {
    padding: 0.86rem;
  }

  .bridge-overview-dashboard__headline {
    grid-template-columns: 1fr;
  }

  .bridge-overview-dashboard__stats {
    grid-template-columns: 1fr;
  }

  .bridge-overview-dashboard__signals {
    grid-template-columns: 1fr;
  }

  .bridge-overview-poster__fact {
    min-height: 150px;
  }

  .bridge-overview-poster__sheet {
    padding: 1rem;
  }

  .bridge-overview-poster__header h2 {
    font-size: clamp(2.3rem, 14vw, 3.6rem);
  }

  .bridge-overview-poster__facts {
    grid-template-columns: 1fr;
  }

  .bridge-overview-poster__fact strong {
    font-size: clamp(3.6rem, 18vw, 5.2rem);
  }

  :is(.bridge-overview-poster--guangji, .bridge-overview-poster--luoyang, .bridge-overview-poster--zhaozhou) .bridge-overview-poster__fact {
    grid-template-columns: minmax(7.8rem, 0.76fr) minmax(0, 1fr);
    min-height: 78px;
    padding: 0.78rem 0.86rem;
  }

  :is(.bridge-overview-poster--guangji, .bridge-overview-poster--luoyang, .bridge-overview-poster--zhaozhou) .bridge-overview-poster__fact::after {
    left: 0.86rem;
    right: 0.86rem;
    bottom: 0.64rem;
  }

  :is(.bridge-overview-poster--guangji, .bridge-overview-poster--luoyang, .bridge-overview-poster--zhaozhou) .bridge-overview-poster__fact span {
    font-size: 0.84rem;
    letter-spacing: 0.05em;
  }

  :is(.bridge-overview-poster--guangji, .bridge-overview-poster--luoyang, .bridge-overview-poster--zhaozhou) .bridge-overview-poster__fact strong {
    font-size: clamp(2rem, 11vw, 3rem);
  }

  .bridge-overview-poster__gallery {
    padding: 0.72rem;
  }

  .bridge-overview-poster__gallery-head {
    align-items: start;
    flex-direction: column;
  }

  .bridge-overview-poster__gallery-card {
    width: 78vw;
    min-width: 78vw;
  }
}

.video-showcase {
  display: grid;
  gap: 1rem;
  padding-top: clamp(1.6rem, 5vh, 3rem);
  padding-bottom: clamp(1.8rem, 5vh, 3.2rem);
}

.video-showcase__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.42rem;
  align-items: start;
  text-align: left;
}

.video-showcase__head p,
.video-showcase__head h2,
.video-showcase__head span,
.video-showcase__source,
.video-showcase__copy h3,
.video-showcase__copy p {
  margin: 0;
}

.video-showcase__head > p {
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--video-accent) 72%, var(--paper));
}

.video-showcase__head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.8vw, 3rem);
  line-height: 1.18;
  color: rgba(255, 240, 180, 0.95);
  letter-spacing: 0.08em;
}

.video-showcase__head span {
  display: none;
  max-width: 62rem;
  margin-top: 0.42rem;
  color: var(--paper-soft);
  line-height: 1.72;
}

.video-showcase__grid {
  display: grid;
  gap: 0.9rem;
}

.video-showcase__grid--multi {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}

.video-showcase__card {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--video-accent) 30%, var(--line));
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(8, 13, 18, 0.86);
  box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.22),
    inset 0 0 0 1px rgba(255, 244, 219, 0.05);
}

.video-showcase__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  min-height: 0;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent 44%),
    #05080c;
}

.video-showcase__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-showcase__frame--hls {
  display: grid;
  place-items: center;
}

.video-showcase__frame--hls video {
  display: block;
  width: 100%;
  height: 100%;
  background: #05080c;
  object-fit: contain;
}

.video-showcase__fallback {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  z-index: 2;
  margin: 0;
  width: min(86%, 32rem);
  transform: translateX(-50%);
  border: 1px solid rgba(239, 228, 209, 0.24);
  border-radius: 999px;
  padding: 0.42rem 0.8rem;
  color: rgba(239, 228, 209, 0.86);
  background: rgba(5, 8, 12, 0.72);
  text-align: center;
  font-size: 0.78rem;
  line-height: 1.5;
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
}

.video-showcase__frame--hls.is-hls-error .video-showcase__fallback {
  opacity: 1;
}

.video-showcase__copy {
  display: grid;
  gap: 0.46rem;
  padding: clamp(0.82rem, 1.8vw, 1.12rem);
  position: relative;
  overflow: hidden;
}

.video-showcase__copy::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse 88% 48% at 50% 50%, rgba(8, 13, 18, 0.78) 10%, transparent 78%);
}

.video-showcase__copy h3,
.video-showcase__source,
.video-showcase__copy p {
  position: relative;
  z-index: 2;
}

.video-showcase__source {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border: 1px solid color-mix(in srgb, var(--video-accent) 34%, rgba(255, 244, 219, 0.18));
  border-radius: 999px;
  padding: 0.24rem 0.62rem;
  color: color-mix(in srgb, var(--video-accent) 72%, #fff1cf);
  background: rgba(255, 244, 219, 0.055);
  font-size: 0.72rem;
  line-height: 1.2;
  letter-spacing: 0.12em;
}

.video-showcase__copy h3 {
  color: rgba(255, 247, 232, 0.98);
  font-size: clamp(1.06rem, 1.8vw, 1.34rem);
  line-height: 1.42;
}

.video-showcase__copy p {
  color: var(--paper-soft);
  font-size: 0.9rem;
  line-height: 1.68;
}

.video-showcase__decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* 拱桥线稿 SVG：顶部，底部对齐让桥拱+水波出现在顶区 */
.decor-bridge-svg {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: 0.92;
  transform: translateX(-50%);
}

.decor-cinema-bridge {
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.28));
}

.decor-cinema-bridge__beam {
  mix-blend-mode: screen;
  opacity: 0.72;
}

.decor-cinema-bridge__film {
  opacity: 0.72;
}

/* 星辰 SVG：装饰效果 */
.decor-stars-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: 0.74;
}

/* 涟漪 SVG：底部，顶部对齐让圆心在底边，往上扩散 */
.decor-ripple-svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 46%;
  overflow: visible;
  display: none;
}

.video-showcase--home {
  padding-top: clamp(1.2rem, 4vh, 2.2rem);
}

.video-showcase--home .video-showcase__card {
  grid-template-columns: minmax(0, 1.36fr) minmax(320px, 0.64fr);
  align-items: stretch;
}

.video-showcase--home .video-showcase__copy {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto auto;
  align-content: space-between;
  border-left: 1px solid color-mix(in srgb, var(--video-accent) 26%, var(--line));
  gap: clamp(0.32rem, 0.8vw, 0.58rem);
  padding: 0 clamp(0.9rem, 2vw, 1.32rem) clamp(0.9rem, 2vw, 1.18rem);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 239, 196, 0.055), transparent 23%),
    radial-gradient(ellipse 88% 60% at 50% 28%, rgba(126, 184, 196, 0.2), transparent 62%),
    radial-gradient(circle at 78% 18%, rgba(245, 220, 170, 0.1), transparent 38%),
    linear-gradient(160deg, rgba(22, 36, 45, 0.86), rgba(10, 18, 26, 0.94));
}

.video-showcase--home .video-showcase__copy::before {
  content: "";
  grid-row: 1;
  display: block;
  background:
    linear-gradient(90deg, transparent, rgba(255, 238, 185, 0.16), transparent),
    radial-gradient(ellipse 92% 64% at 50% 42%, rgba(164, 210, 214, 0.12), transparent 68%);
  border-bottom: 1px solid rgba(255, 244, 219, 0.12);
  position: relative;
  z-index: 1;
}

.video-showcase--home .video-showcase__copy::after {
  content: "";
  grid-row: 2 / -1;
  position: static;
  background: radial-gradient(ellipse 88% 48% at 50% 100%, rgba(8, 13, 18, 0.88) 10%, transparent 78%);
}

.video-showcase--home .video-showcase__source,
.video-showcase--home .video-showcase__copy h3,
.video-showcase--home .video-showcase__copy p {
  position: relative;
  z-index: 2;
}

.video-showcase--home .video-showcase__source {
  grid-row: 2;
  margin-top: clamp(0.72rem, 1.6vw, 1.02rem);
}

.video-showcase--home .video-showcase__copy h3 {
  grid-row: 3;
  padding: 0;
  margin: 0;
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: clamp(1.48rem, 2.8vw, 2.28rem);
  line-height: 1.12;
  letter-spacing: 0.12em;
  color: #fff2cf;
  text-shadow: 0 10px 24px rgba(0, 0, 0, 0.26);
}

.video-showcase--home .video-showcase__copy p {
  grid-row: 4;
  padding: 0;
  margin: 0;
  max-width: 24em;
  color: rgba(239, 228, 209, 0.82);
  font-size: 0.9rem;
  line-height: 1.78;
}

.video-showcase--bridge {
  padding-top: 0.6rem;
}

.video-showcase--bridge .video-showcase__head {
  border-top: 1px solid color-mix(in srgb, var(--video-accent) 24%, var(--line));
  padding-top: 1rem;
}

@media (max-width: 900px) {
  .video-showcase__head,
  .video-showcase--home .video-showcase__card {
    grid-template-columns: 1fr;
  }

  .video-showcase--home .video-showcase__copy {
    border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--video-accent) 26%, var(--line));
  }
}

@media (max-width: 640px) {
  .video-showcase__head {
    gap: 0.48rem;
  }

  .video-showcase__copy {
    padding: 0.78rem;
  }
}

.overview-hover-board {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  align-content: start;
}

.overview-hover-board::before {
  content: "";
  position: absolute;
  inset: 0.5rem 2% 0;
  pointer-events: none;
  background:
    radial-gradient(95% 80% at 20% 10%, color-mix(in srgb, var(--bridge-accent) 10%, transparent), transparent 68%),
    radial-gradient(90% 85% at 80% 100%, rgba(112, 178, 186, 0.1), transparent 72%);
}

.overview-hover-note {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 24%, var(--line));
  border-radius: 0.76rem;
  background: rgba(7, 12, 18, 0.74);
  padding: 0.68rem 0.72rem;
  display: grid;
  gap: 0.26rem;
  box-shadow: var(--shadow-inner-line);
}

.overview-hover-note--1 {
  grid-column: 1 / -1;
  margin-right: 12%;
  transform: rotate(-0.45deg);
}

.overview-hover-note--2 {
  margin-left: 8%;
  transform: rotate(0.55deg);
}

.overview-hover-note--3 {
  margin-left: -6%;
  transform: rotate(-0.35deg);
}

.overview-hover-note__head {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
}

.bridge-icon--overview-note {
  width: 1.2rem;
  height: 1.2rem;
}

.overview-hover-note__head p {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--bridge-accent) 76%, var(--paper));
}

.overview-hover-note h3,
.overview-hover-note__label,
.overview-hover-note span {
  margin: 0;
}

.overview-hover-note h3 {
  font-family: var(--font-display);
  font-size: 1.06rem;
}

.overview-hover-note__label {
  font-style: normal;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--bridge-accent) 70%, var(--paper));
}

.overview-hover-note span {
  color: var(--paper-soft);
  font-size: 0.86rem;
  line-height: 1.6;
}

.overview-hover-note span.overview-hover-note__fact--emphasis {
  font-size: clamp(1.2rem, 1.6vw, 1.48rem);
  line-height: 1.34;
  color: var(--paper-soft);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.overview-hover-pop {
  position: absolute;
  z-index: 5;
  width: min(340px, 76vw);
  left: calc(100% - 2.2rem);
  top: -0.2rem;
  border: 1px dashed color-mix(in srgb, var(--bridge-accent) 45%, var(--line));
  border-radius: 0.82rem;
  background:
    radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--bridge-accent) 16%, transparent), transparent 64%),
    rgba(8, 12, 16, 0.95);
  box-shadow: var(--shadow-soft);
  padding: 0.66rem 0.72rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(0.96) rotate(0.9deg);
  transition: opacity var(--dur-fast) var(--easing), transform var(--dur-fast) var(--easing);
}

.overview-hover-note--2 .overview-hover-pop {
  left: auto;
  right: calc(100% - 2.2rem);
  transform: translateY(8px) scale(0.96) rotate(-0.9deg);
}

.overview-hover-pop__eyebrow,
.overview-hover-pop__body,
.overview-hover-pop h4 {
  margin: 0;
}

.overview-hover-pop__eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--bridge-accent) 74%, var(--paper));
}

.overview-hover-pop h4 {
  margin-top: 0.22rem;
  font-size: 0.96rem;
}

.overview-hover-pop__body {
  margin-top: 0.3rem;
  color: var(--paper-soft);
  font-size: 0.84rem;
  line-height: 1.66;
}

.overview-hover-pop__sticker {
  margin-top: 0.48rem;
  display: flex;
  align-items: center;
  gap: 0.48rem;
}

.overview-hover-pop__sticker-avatar {
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 0.56rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 38%, var(--line));
  background: rgba(239, 228, 209, 0.06);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
}

.overview-hover-pop__sticker-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overview-hover-pop__sticker-avatar.is-fallback {
  font-size: 1rem;
  color: color-mix(in srgb, var(--bridge-accent) 72%, var(--paper));
}

.overview-hover-pop__sticker i {
  font-style: normal;
  display: grid;
  gap: 0.08rem;
}

.overview-hover-pop__sticker b {
  font-size: 0.85rem;
  font-family: var(--font-display);
}

.overview-hover-pop__sticker small {
  font-size: 0.72rem;
  color: var(--paper-soft);
}

.overview-hover-note:hover .overview-hover-pop,
.overview-hover-note:focus-within .overview-hover-pop,
.overview-hover-note:focus-visible .overview-hover-pop {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(0deg);
}

.overview-hover-note:hover,
.overview-hover-note:focus-visible {
  border-color: color-mix(in srgb, var(--bridge-accent) 56%, var(--line));
}

@media (max-width: 1120px) {
  .bridge-overview-intro {
    grid-template-columns: 1fr;
  }

  .overview-hover-note--1,
  .overview-hover-note--2,
  .overview-hover-note--3 {
    grid-column: 1 / -1;
    margin: 0;
    transform: none;
  }

  .overview-hover-pop,
  .overview-hover-note--2 .overview-hover-pop {
    position: static;
    width: auto;
    left: auto;
    right: auto;
    margin-top: 0.45rem;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
}

/* Overview intro immersive background */
.bridge-overview-intro--immersive {
  position: relative;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 0.9rem;
  min-height: 560px;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 24%, var(--line));
  border-radius: 0.88rem;
  background-image:
    linear-gradient(130deg, rgba(7, 11, 16, 0.82), rgba(9, 16, 22, 0.64) 48%, rgba(8, 12, 16, 0.84)),
    var(--overview-bg-image);
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 100%, cover;
  background-position: center, center;
  box-shadow: var(--shadow-panel);
}

.bridge-overview-intro--immersive::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 10% 0%, color-mix(in srgb, var(--bridge-accent) 16%, transparent), transparent 68%),
    radial-gradient(120% 90% at 95% 100%, rgba(98, 164, 174, 0.14), transparent 72%);
  opacity: 0.72;
}

.bridge-overview-intro--immersive > * {
  position: relative;
  z-index: 1;
}

.bridge-overview-intro--immersive .bridge-overview-intro__lead,
.bridge-overview-intro--immersive .bridge-overview-intro__facts {
  backdrop-filter: blur(6px);
}

.bridge-overview-intro--immersive .bridge-overview-intro__lead {
  border-color: color-mix(in srgb, var(--bridge-accent) 30%, var(--line));
  background: linear-gradient(150deg, rgba(7, 12, 18, 0.72), rgba(10, 16, 22, 0.6));
}

.bridge-overview-intro--immersive .bridge-overview-intro__facts {
  border-radius: 0.76rem;
  padding: 0.25rem;
  background: rgba(7, 12, 18, 0.24);
}

@media (max-width: 1120px) {
  .bridge-overview-intro--immersive {
    grid-template-columns: 1fr;
    min-height: 0;
    background-position: center, center;
  }
}

/* Full-image bridge hero: no translucent panel, text with stronger hierarchy */
.bridge-hero--immersive {
  --hero-content-width: min(44vw, 700px);
  --hero-content-top: clamp(2.3rem, 10vh, 6.8rem);
  --hero-content-right: clamp(1rem, 4.2vw, 4rem);
  --hero-text-main: #0f2a3d;
  --hero-text-sub: #1d4861;
  --hero-text-body: #183c50;
  --hero-text-muted: #264f66;
  --hero-text-shadow: 0 1px 0 rgba(250, 252, 255, 0.72), 0 10px 28px rgba(232, 242, 252, 0.45);
  margin-top: 0;
  margin-bottom: 0;
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  min-height: calc(100vh - var(--nav-h));
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: clamp(1.1rem, 2.4vw, 2rem) clamp(1rem, 3.2vw, 2.2rem);
  border: none !important;
  border-radius: 0 !important;
  background-image: var(--hero-bg-image);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center calc(50% + var(--hero-bg-shift, 0px));
  box-shadow: none;
}

@media (min-width: 761px) {
  .page-bridge-overview--cover .bridge-hero--immersive {
    margin-top: calc(-1 * var(--bridge-cover-nav-overlap, 0px));
    min-height: calc(100vh - var(--nav-h) + var(--bridge-cover-nav-overlap, 0px));
    padding-top: calc(clamp(1.1rem, 2.4vw, 2rem) + var(--bridge-cover-nav-overlap, 0px));
  }
}

.bridge-hero--immersive .bridge-hero__media {
  display: none !important;
}

.bridge-hero--immersive .bridge-hero__content {
  justify-self: end;
  width: var(--hero-content-width);
  margin-top: var(--hero-content-top);
  margin-right: var(--hero-content-right);
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0;
  gap: clamp(0.32rem, 1vh, 0.7rem);
}

.bridge-hero--immersive .bridge-hero__meta {
  margin: 0;
  color: var(--hero-text-muted);
  font-size: clamp(1.16rem, 2.05vw, 2.06rem);
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-shadow: var(--hero-text-shadow);
}

.bridge-hero--immersive .bridge-hero__title {
  margin: 0;
  color: var(--hero-text-main);
  font-size: clamp(3.32rem, 7.4vw, 6.95rem);
  line-height: 0.96;
  letter-spacing: 0.015em;
  text-shadow: var(--hero-text-shadow);
}

.bridge-hero--immersive .bridge-hero__title span + span {
  color: var(--hero-text-sub);
}

.bridge-hero--immersive .bridge-hero__subtitle {
  margin: 0;
  color: var(--hero-text-sub);
  font-family: var(--font-display);
  font-size: clamp(2.04rem, 4.4vw, 3.95rem);
  font-weight: 700;
  line-height: 1.05;
  text-shadow: var(--hero-text-shadow);
}

.bridge-hero--immersive .bridge-hero__summary {
  margin: 0;
  max-width: 26ch;
  color: var(--hero-text-body);
  font-size: clamp(1.2rem, 2vw, 1.95rem);
  line-height: 1.56;
  text-shadow: var(--hero-text-shadow);
}

.bridge-hero--cover .bridge-hero__summary {
  max-width: 22ch;
  font-size: clamp(1.04rem, 1.35vw, 1.28rem);
  line-height: 1.58;
}

.bridge-hero__jump-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.6rem;
  min-width: 14rem;
  padding: 0.82rem 1.5rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--bridge-accent) 64%, #f0debf);
  background: linear-gradient(135deg, color-mix(in srgb, var(--bridge-accent) 66%, #f7e8c9), #f3e0be);
  color: #142739;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.3vw, 1.24rem);
  letter-spacing: 0.02em;
  box-shadow: 0 14px 34px color-mix(in srgb, var(--bridge-accent) 28%, transparent);
  transition: transform var(--dur-fast) var(--easing), filter var(--dur-fast) var(--easing), box-shadow var(--dur-fast) var(--easing);
}

.bridge-hero__jump-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--bridge-accent) 36%, transparent);
}

.bridge-hero--immersive .bridge-hero__lab-entry {
  margin-top: 0.28rem;
  border: none;
  border-left: 3px solid color-mix(in srgb, var(--bridge-accent) 76%, #2a4f63);
  border-radius: 0;
  background: none;
  padding: 0.12rem 0 0.12rem 0.72rem;
}

.bridge-hero--immersive .bridge-hero__lab-entry strong {
  color: var(--hero-text-main);
  font-size: clamp(1.32rem, 2.55vw, 2.26rem);
  line-height: 1.22;
  text-shadow: var(--hero-text-shadow);
}

.bridge-hero--immersive .bridge-hero__lab-entry span {
  color: var(--hero-text-body);
  font-size: clamp(1rem, 1.5vw, 1.26rem);
  line-height: 1.6;
  text-shadow: var(--hero-text-shadow);
}

.bridge-hero--immersive .tag-group {
  margin-top: 0.35rem;
  gap: 0.52rem;
}

.bridge-hero--immersive .tag {
  color: var(--hero-text-body);
  border-color: color-mix(in srgb, var(--hero-text-muted) 48%, transparent);
  background: none;
  font-size: clamp(0.84rem, 1.02vw, 1rem);
  padding: 0.2rem 0.7rem;
  text-shadow: var(--hero-text-shadow);
}

.bridge-hero--immersive .kpi-strip--hero {
  margin-top: 0.55rem;
  gap: 0.56rem;
}

.bridge-hero--immersive .kpi-strip--hero .kpi-strip__item {
  border: none;
  border-top: 1px dashed color-mix(in srgb, var(--hero-text-muted) 52%, transparent);
  border-radius: 0;
  background: none;
  padding: 0.42rem 0.2rem 0.22rem;
}

.bridge-hero--immersive .kpi-strip__item p,
.bridge-hero--immersive .kpi-strip__item span {
  color: var(--hero-text-body);
  font-size: clamp(0.86rem, 1vw, 1rem);
  line-height: 1.52;
  text-shadow: var(--hero-text-shadow);
}

.bridge-hero--immersive .kpi-strip--hero .kpi-strip__item strong {
  color: var(--hero-text-main);
  font-size: clamp(1.38rem, 2.3vw, 2.22rem);
  line-height: 1.2;
  text-shadow: var(--hero-text-shadow);
}

/* Bridge specific anchor points based on each background image */
.bridge-hero--guangji {
  --hero-content-width: min(42vw, 640px);
  --hero-content-top: clamp(2rem, 9vh, 5rem);
  --hero-content-right: clamp(2rem, 6vw, 6rem);
  --hero-text-main: #12304a;
  --hero-text-sub: #1d5172;
  --hero-text-body: #204864;
  --hero-text-muted: #2b5978;
}

.bridge-hero--luoyang {
  --hero-content-width: min(36vw, 600px);
  --hero-content-top: clamp(5.4rem, 24vh, 15rem);
  --hero-content-right: 0;
  --hero-text-main: #0f2d45;
  --hero-text-sub: #1f4c67;
  --hero-text-body: #1e4560;
  --hero-text-muted: #2b5772;
}

.bridge-hero--luoyang .bridge-hero__content {
  justify-self: start;
  margin-left: clamp(18vw, 23vw, 29vw);
  margin-right: 0;
}

.bridge-hero--zhaozhou {
  --hero-content-width: min(38vw, 620px);
  --hero-content-top: clamp(2.4rem, 11vh, 7.2rem);
  --hero-content-right: clamp(8vw, 14vw, 18vw);
  --hero-text-main: #122e43;
  --hero-text-sub: #27556f;
  --hero-text-body: #204660;
  --hero-text-muted: #325b76;
}

.bridge-hero--guangji.bridge-hero--cover .bridge-hero__content {
  justify-self: start;
  margin-left: clamp(1.2rem, 4.6vw, 4.4rem);
  margin-right: 0;
}

@media (max-width: 1120px) {
  .bridge-hero--immersive {
    min-height: 86vh;
    background-position: center calc(50% + (var(--hero-bg-shift, 0px) * 0.55));
  }

  .bridge-hero--immersive .bridge-hero__content,
  .bridge-hero--luoyang .bridge-hero__content {
    justify-self: start;
    width: min(94vw, 760px);
    margin-top: 1.5rem;
    margin-right: 0;
    margin-left: 0;
  }

  .bridge-hero--immersive .bridge-hero__meta {
    font-size: clamp(1.02rem, 2.8vw, 1.32rem);
  }

  .bridge-hero--immersive .bridge-hero__title {
    font-size: clamp(2.62rem, 10.4vw, 4.35rem);
  }

  .bridge-hero--immersive .bridge-hero__subtitle {
    font-size: clamp(1.6rem, 6.2vw, 2.86rem);
  }

  .bridge-hero--immersive .bridge-hero__summary {
    font-size: clamp(1rem, 2.9vw, 1.34rem);
  }

  .bridge-hero__jump-btn {
    min-width: 11.5rem;
    padding: 0.74rem 1.2rem;
    font-size: clamp(0.94rem, 2.2vw, 1.06rem);
  }
}

@media (max-width: 760px) {
  .bridge-hero--immersive {
    min-height: 92vh;
    padding: 0.95rem 0.8rem 1.2rem;
  }

  .bridge-hero--immersive .bridge-hero__content {
    width: 100%;
    margin-top: 1.15rem;
  }

  .bridge-hero--immersive .bridge-hero__summary {
    max-width: 100%;
  }

  .bridge-hero__jump-btn {
    width: 100%;
  }

  .bridge-hero--immersive .kpi-strip--hero {
    grid-template-columns: 1fr;
  }
}

.bridge-hero--cover {
  --hero-text-main: #f6efe0;
  --hero-text-sub: #eadfca;
  --hero-text-body: #f0e5d2;
  --hero-text-muted: #dacfb9;
  --hero-text-shadow: 0 2px 10px rgba(0, 0, 0, 0.62), 0 12px 26px rgba(0, 0, 0, 0.5);
}

.bridge-hero--cover .bridge-hero__title span,
.bridge-hero--cover .bridge-hero__subtitle {
  white-space: nowrap;
  word-break: keep-all;
}

.bridge-hero--guangji.bridge-hero--cover {
  --hero-content-width: min(50vw, 780px);
  --hero-text-main: #fff1cf;
  --hero-text-sub: #ffd99a;
  --hero-text-body: #f8e2b7;
  --hero-text-muted: #efcb95;
  --hero-text-shadow: 0 2px 12px rgba(58, 24, 8, 0.56), 0 16px 30px rgba(110, 54, 22, 0.3);
}

.bridge-hero--guangji.bridge-hero--cover .bridge-hero__title span + span {
  font-size: clamp(1.88rem, 3.6vw, 3.78rem);
  line-height: 1.04;
}

@media (min-width: 1121px) {
  .bridge-hero--guangji.bridge-hero--cover .bridge-hero__title span + span {
    white-space: nowrap;
  }
}

.bridge-hero--luoyang.bridge-hero--cover {
  --hero-content-width: min(48vw, 760px);
  --hero-text-main: #f1fbff;
  --hero-text-sub: #d0ebf3;
  --hero-text-body: #e4f6fa;
  --hero-text-muted: #bbd8e1;
  --hero-text-shadow: 0 2px 12px rgba(6, 18, 29, 0.78), 0 16px 34px rgba(8, 24, 37, 0.44);
}

.bridge-hero--luoyang.bridge-hero--cover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(72% 88% at 28% 58%, rgba(5, 18, 29, 0.62) 0%, rgba(7, 22, 34, 0.36) 34%, rgba(7, 22, 34, 0.15) 56%, transparent 78%),
    linear-gradient(90deg, rgba(5, 18, 28, 0.18) 0%, rgba(5, 18, 28, 0.08) 26%, transparent 48%);
}

.bridge-hero--luoyang.bridge-hero--cover .bridge-hero__content {
  position: relative;
  z-index: 1;
}

.bridge-hero--zhaozhou.bridge-hero--cover {
  --hero-text-main: #22343c;
  --hero-text-sub: #4a605f;
  --hero-text-body: #33494d;
  --hero-text-muted: #5f7571;
  --hero-text-shadow: 0 1px 0 rgba(248, 243, 233, 0.72), 0 10px 28px rgba(255, 250, 240, 0.22);
}

.bridge-hero--zhaozhou.bridge-hero--cover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(64% 82% at 72% 34%, rgba(255, 249, 238, 0.14) 0%, rgba(252, 246, 233, 0.08) 34%, transparent 60%),
    linear-gradient(90deg, transparent 42%, rgba(255, 249, 238, 0.03) 70%, transparent 100%);
}

.bridge-hero--zhaozhou.bridge-hero--cover .bridge-hero__content {
  position: relative;
  z-index: 1;
}

/* Refined bridge entrance covers: stable typography and Chinese-only curation */
.bridge-hero--cover {
  --hero-content-width: min(36rem, calc(100vw - 3rem));
  --cover-title-size: 7.2rem;
  --cover-copy-size: 3rem;
  --cover-button-width: 50rem;
  --realm-art-font: "STXingkai", "华文行楷", "FZKai-Z03", "KaiTi", "Kaiti SC", "STKaiti", "Noto Serif SC", serif;
}

.bridge-hero--cover .bridge-hero__content {
  width: var(--hero-content-width);
  gap: 0.65rem;
}

.bridge-hero--cover .bridge-hero__title--realm {
  display: block;
  margin: 0;
  color: var(--realm-ink, var(--hero-text-main));
  font-family: var(--realm-art-font);
  font-size: var(--cover-title-size);
  font-weight: 700;
  line-height: 0.96;
  letter-spacing: 0;
  text-shadow: var(--realm-shadow, 0 2px 3px rgba(0, 0, 0, 0.42));
}

.bridge-hero--cover .bridge-hero__realm-name {
  display: inline-block;
  white-space: nowrap;
  word-break: keep-all;
  filter: none;
  animation: bridge-cover-realm-in 900ms ease-out both;
}

.bridge-hero__cover-copy {
  display: grid;
  gap: 0.18rem;
  margin: 0.2rem 0 0;
  color: var(--realm-copy, var(--hero-text-sub));
  font-family: "STKaiti", "KaiTi", "Kaiti SC", "Noto Serif SC", serif;
  font-size: var(--cover-copy-size);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0;
  text-shadow: var(--realm-copy-shadow, var(--hero-text-shadow));
}

.bridge-hero__cover-line {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  white-space: nowrap;
  word-break: keep-all;
}

.bridge-hero__cover-line--primary {
  animation: bridge-cover-line-in 860ms 180ms ease-out both;
}

.bridge-hero__cover-line--secondary {
  color: var(--realm-copy-secondary, var(--realm-copy, var(--hero-text-sub)));
  opacity: 0;
  animation: bridge-cover-line-in 1050ms 760ms ease-out both;
}

.bridge-hero--cover .bridge-hero__jump-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  width: min(var(--cover-button-width), 100%);
  min-width: 0;
  margin-top: 2.88rem;
  border-color: color-mix(in srgb, var(--bridge-accent) 58%, rgba(255, 244, 220, 0.78));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--bridge-accent) 46%, #ffe8bc), color-mix(in srgb, var(--bridge-accent) 16%, #fff2d5)),
    rgba(255, 241, 206, 0.86);
  color: var(--cover-button-text, #17222c);
  font-family: "STKaiti", "KaiTi", "Kaiti SC", "Noto Serif SC", serif;
  font-size: 1.53rem;
  letter-spacing: 0;
  box-shadow:
    0 12px 26px color-mix(in srgb, var(--bridge-accent) 28%, transparent),
    inset 0 0 0 1px rgba(255, 255, 255, 0.24);
}

.bridge-hero--cover .bridge-hero__jump-btn::before {
  content: "";
  position: absolute;
  inset: -40% auto -40% -38%;
  z-index: -1;
  width: 34%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.58), transparent);
  animation: bridge-cover-button-sheen 3.8s ease-in-out infinite;
}

.bridge-hero--cover .bridge-hero__jump-btn::after {
  content: "";
  position: absolute;
  inset: 0.8rem;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.22);
  opacity: 0.56;
  pointer-events: none;
}

.bridge-hero--cover .bridge-hero__jump-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.04) saturate(1.04);
  box-shadow:
    0 16px 34px color-mix(in srgb, var(--bridge-accent) 38%, transparent),
    0 0 28px var(--button-glow, transparent),
    inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.bridge-hero--guangji.bridge-hero--cover {
  --realm-ink: #ffe2a7;
  --realm-copy: #ffd082;
  --realm-copy-secondary: #ffe7b8;
  --realm-glow: transparent;
  --realm-shadow: 0 2px 3px rgba(70, 27, 4, 0.58);
  --realm-copy-shadow: 0 2px 8px rgba(72, 27, 6, 0.6), 0 10px 24px rgba(127, 59, 10, 0.38);
  --button-glow: rgba(255, 164, 62, 0.42);
  --cover-button-text: #2b1f16;
}

.bridge-hero--luoyang.bridge-hero--cover {
  --realm-ink: #d8f3f4;
  --realm-copy: #c2e4e4;
  --realm-copy-secondary: #edf7ef;
  --realm-glow: transparent;
  --realm-shadow: 0 2px 3px rgba(2, 24, 35, 0.68);
  --realm-copy-shadow: 0 2px 8px rgba(2, 22, 32, 0.68), 0 10px 24px rgba(9, 49, 59, 0.42);
  --button-glow: rgba(104, 188, 195, 0.38);
  --cover-button-text: #173036;
}

.bridge-hero--zhaozhou.bridge-hero--cover {
  --realm-ink: #f4efd9;
  --realm-copy: #dfe5c9;
  --realm-copy-secondary: #f7f0dc;
  --realm-glow: transparent;
  --realm-shadow: 0 2px 3px rgba(3, 9, 12, 0.72);
  --realm-copy-shadow: 0 2px 8px rgba(3, 9, 12, 0.72), 0 10px 24px rgba(5, 14, 18, 0.46);
  --button-glow: rgba(170, 177, 153, 0.28);
  --cover-button-text: #26302d;
}

.bridge-hero--guangji.bridge-hero--cover .bridge-hero__content {
  width: min(42rem, calc(100vw - 3rem));
  justify-self: end;
  align-self: start;
  margin-left: 0;
  margin-right: clamp(1.2rem, 5.8vw, 6.4rem);
  margin-top: clamp(2.8rem, 10vh, 6.2rem);
}

.bridge-hero--luoyang.bridge-hero--cover .bridge-hero__content {
  width: min(35rem, calc(100vw - 3rem));
  margin-left: 24rem;
}

.bridge-hero--zhaozhou.bridge-hero--cover .bridge-hero__content {
  width: min(34rem, calc(100vw - 3rem));
  justify-self: start;
  margin-left: clamp(4rem, 14vw, 18rem);
  margin-right: 0;
  margin-top: clamp(8rem, 18vh, 13rem);
}

@keyframes bridge-cover-realm-in {
  from {
    opacity: 0;
    transform: translateY(10px);
    filter: blur(2px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    filter: none;
  }
}

@keyframes bridge-cover-line-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bridge-cover-button-sheen {
  0%,
  42% {
    left: -38%;
    opacity: 0;
  }

  56% {
    opacity: 0.86;
  }

  72%,
  100% {
    left: 112%;
    opacity: 0;
  }
}

@media (max-width: 1120px) {
  .bridge-hero--cover {
    --cover-title-size: 4.2rem;
    --cover-copy-size: 1.8rem;
    --cover-button-width: 34rem;
  }

  .bridge-hero--guangji.bridge-hero--cover .bridge-hero__content,
  .bridge-hero--luoyang.bridge-hero--cover .bridge-hero__content,
  .bridge-hero--zhaozhou.bridge-hero--cover .bridge-hero__content {
    width: min(35rem, calc(100vw - 2rem));
    margin-left: 0;
    margin-right: 0;
    margin-top: 1.5rem;
  }
}

@media (max-width: 760px) {
  .bridge-hero--cover {
    --cover-title-size: 2.52rem;
    --cover-copy-size: 1.08rem;
    --cover-button-width: 100%;
  }

  .bridge-hero__cover-line {
    white-space: normal;
  }

  .bridge-hero--cover .bridge-hero__content {
    gap: 0.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bridge-hero--cover .bridge-hero__realm-name,
  .bridge-hero__cover-line,
  .bridge-hero--cover .bridge-hero__jump-btn::before {
    animation: none;
    opacity: 1;
    transform: none;
  }
}
/* =========================
   Finale Rebuild
========================= */

.finale-page {
  --finale-ambient-dim: 0;
  --finale-art-font: "STKaiti", "Kaiti SC", "KaiTi", "STSong", "Noto Serif SC", serif;
  position: relative;
  isolation: isolate;
  overflow: clip;
  color: var(--finale-ink);
  background:
    radial-gradient(128% 84% at 50% -10%, rgba(220, 183, 112, 0.22), transparent 66%),
    radial-gradient(70% 44% at 50% 20%, rgba(108, 146, 198, 0.13), transparent 72%),
    linear-gradient(180deg, #06070a 0%, #070a10 48%, #06080f 100%);
}

.finale-region {
  position: relative;
  z-index: 2;
}

.finale-region--origin {
  padding-top: 0;
}

.finale-region--revelation {
  margin-top: 0;
}

/* ─── 环境层 ─────────────────────────────────────────────────────────────── */

.finale-ambient {
  position: sticky;
  top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  margin-bottom: calc(-1 * (100vh - var(--nav-h)));
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(130% 68% at 50% 108%, rgba(197, 166, 108, 0.24), transparent 72%),
    radial-gradient(82% 50% at 8% 10%, rgba(173, 132, 68, 0.28), transparent 68%),
    radial-gradient(82% 58% at 92% 12%, rgba(173, 132, 68, 0.22), transparent 68%),
    radial-gradient(56% 34% at 50% 34%, rgba(84, 129, 193, 0.18), transparent 70%),
    linear-gradient(180deg, #05060a 0%, #090d14 52%, #06090f 100%);
}

.finale-ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 2, 4, 0) 0%, rgba(2, 2, 4, 0.56) 74%, rgba(2, 2, 4, 0.86) 100%);
  opacity: var(--finale-ambient-dim);
  transition: opacity 0.2s linear;
}

.finale-ambient__ripples {
  position: absolute;
  inset: -14% -12% -8%;
  will-change: transform;
}

.finale-ambient__ripples::before,
.finale-ambient__ripples::after {
  content: "";
  position: absolute;
  inset: 0;
}

.finale-ambient__ripples::before {
  opacity: 0.78;
  background:
    radial-gradient(ellipse 124% 36% at 50% 90%, rgba(183, 154, 99, 0.26), transparent 70%),
    radial-gradient(ellipse 98% 24% at 22% 88%, rgba(183, 154, 99, 0.18), transparent 68%),
    radial-gradient(ellipse 102% 24% at 78% 96%, rgba(183, 154, 99, 0.14), transparent 66%);
  animation: finale-ripple-a 16s ease-in-out infinite;
}

.finale-ambient__ripples::after {
  opacity: 0.54;
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 114% 24% at 46% 94%, rgba(246, 212, 144, 0.16), transparent 72%),
    radial-gradient(ellipse 104% 22% at 58% 86%, rgba(214, 170, 84, 0.12), transparent 70%);
  animation: finale-ripple-b 22s ease-in-out infinite;
}

@keyframes finale-ripple-a {
  0%,
  100% {
    transform: translate3d(0, 0, 0) skewX(0deg);
  }
  50% {
    transform: translate3d(1.3%, -0.7%, 0) skewX(-1deg);
  }
}

@keyframes finale-ripple-b {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1.01);
  }
  50% {
    transform: translate3d(-1.1%, -1.4%, 0) scale(1.03);
  }
}

.finale-ambient__sparks {
  position: absolute;
  inset: 0;
}

.finale-spark {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 194, 112, 0.92) 0%, rgba(232, 194, 112, 0) 74%);
  opacity: 0;
  animation: finale-spark-float var(--spark-dur, 9s) var(--spark-delay, 0s) linear infinite;
}

.finale-spark--0 { width: 4px; height: 4px; left: 10%; top: 78%; --spark-dur: 11s; --spark-delay: 0s; }
.finale-spark--1 { width: 3px; height: 3px; left: 24%; top: 62%; --spark-dur: 9s; --spark-delay: 1.4s; }
.finale-spark--2 { width: 5px; height: 5px; left: 37%; top: 86%; --spark-dur: 10.8s; --spark-delay: 2.8s; }
.finale-spark--3 { width: 3px; height: 3px; left: 50%; top: 68%; --spark-dur: 9.4s; --spark-delay: 0.9s; }
.finale-spark--4 { width: 4px; height: 4px; left: 63%; top: 83%; --spark-dur: 12.2s; --spark-delay: 2.2s; }
.finale-spark--5 { width: 3px; height: 3px; left: 74%; top: 58%; --spark-dur: 9.8s; --spark-delay: 3.1s; }
.finale-spark--6 { width: 4px; height: 4px; left: 86%; top: 72%; --spark-dur: 11.4s; --spark-delay: 1.1s; }
.finale-spark--7 { width: 3px; height: 3px; left: 56%; top: 42%; --spark-dur: 8.6s; --spark-delay: 4.2s; }

@keyframes finale-spark-float {
  0% {
    transform: translate3d(0, 0, 0) scale(0.88);
    opacity: 0;
  }
  12% {
    opacity: 0.68;
  }
  82% {
    opacity: 0.46;
  }
  100% {
    transform: translate3d(0, -42px, 0) scale(1.06);
    opacity: 0;
  }
}

.finale-ambient__arch {
  position: absolute;
  bottom: -4%;
  width: max(34vw, 340px);
  opacity: 0.03;
}

.finale-ambient__arch path {
  stroke: var(--finale-gold);
  stroke-width: 1.8;
}

.finale-ambient__arch--left {
  left: -4%;
}

.finale-ambient__arch--right {
  right: -4%;
  transform: scaleX(-1);
}

/* ─── 通用结构 ───────────────────────────────────────────────────────────── */

.finale-act {
  position: relative;
  width: 100%;
  overflow: clip;
  scroll-snap-align: start;
  scroll-margin-top: var(--nav-h);
}

.finale-act__inner {
  width: min(1180px, 92vw);
  margin: 0 auto;
  padding: clamp(1.8vh, 3vh, 4vh) clamp(1rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(0.75rem, 1.2vh, 1.1rem);
  text-align: center;
}

.finale-kicker,
.finale-title-split,
.finale-title-line,
.finale-lead,
.finale-act__kicker,
.finale-act__title,
.finale-verdict__kicker,
.finale-verdict__headline,
.finale-verdict__summary {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  text-wrap: balance;
}

.finale-act__kicker {
  margin: 0;
  font-size: clamp(0.72rem, 0.86vw, 0.82rem);
  letter-spacing: 0.2em;
  color: var(--finale-gold);
}

.finale-act__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.2;
  letter-spacing: 0.08em;
  color: var(--finale-ink);
}

/* ─── 第一幕：破题 ───────────────────────────────────────────────────────── */

.finale-act--prologue {
  height: calc(100vh - var(--nav-h));
  display: flex;
  align-items: center;
}

.finale-prologue__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: clamp(0.68rem, 1.1vh, 1rem);
  position: relative;
}

.finale-prologue__ornaments {
  position: absolute;
  inset: -5% -8% -26%;
  pointer-events: none;
  z-index: 0;
}

.prologue-ornament {
  position: absolute;
  stroke: rgba(214, 178, 106, 0.52);
  stroke-width: 1.6;
  filter: drop-shadow(0 0 10px rgba(183, 141, 72, 0.24));
}

.prologue-ornament--left {
  left: 2%;
  top: 14%;
  width: clamp(180px, 18vw, 280px);
  transform: rotate(-5deg);
}

.prologue-ornament--right {
  right: 2%;
  top: 14%;
  width: clamp(180px, 18vw, 280px);
  transform: scaleX(-1) rotate(-5deg);
}

.prologue-ornament--bottom {
  left: 50%;
  bottom: 4%;
  width: clamp(300px, 42vw, 520px);
  transform: translateX(-50%);
}

.prologue-ornament--midlow {
  left: 50%;
  bottom: -6%;
  width: clamp(360px, 54vw, 640px);
  opacity: 0.58;
  transform: translateX(-50%);
}

.prologue-glint {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 214, 156, 0.96) 0%, rgba(244, 214, 156, 0) 70%);
  box-shadow: 0 0 12px rgba(190, 148, 80, 0.46);
}

.prologue-glint--left {
  left: 13%;
  top: 38%;
}

.prologue-glint--right {
  right: 13%;
  top: 36%;
}

.prologue-glint--bottom {
  left: 50%;
  bottom: 8%;
  width: 8px;
  height: 8px;
  transform: translateX(-50%);
}

.prologue-dots {
  position: absolute;
  left: 50%;
  bottom: -2%;
  width: clamp(140px, 18vw, 210px);
  display: flex;
  justify-content: space-between;
  transform: translateX(-50%);
}

.prologue-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236, 205, 147, 0.94) 0%, rgba(236, 205, 147, 0) 70%);
  box-shadow: 0 0 8px rgba(200, 154, 80, 0.34);
}

.finale-title-split {
  margin: 0 auto;
  width: min(1240px, 100%);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.8rem, 2vw, 2.2rem);
  position: relative;
  z-index: 2;
}

.finale-title-line {
  display: block;
  width: 100%;
  margin: 0 auto;
  text-wrap: balance;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 4.2rem);
  letter-spacing: 0.15em;
  line-height: 1.2;
  text-align: center;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 0 12px rgba(193, 147, 78, 0.32));
}

.finale-title-line--left {
  background: linear-gradient(128deg, #f2e4c2 0%, #e3c382 45%, #cca25c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.finale-title-line--right {
  background: linear-gradient(128deg, #f0ddad 0%, #dfbc7d 45%, #c9984f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.finale-lead {
  margin: 0;
  margin-top: clamp(2rem, 7vh, 4.8rem);
  max-width: min(1540px, 97vw);
  white-space: nowrap;
  line-height: 1.42;
  font-family: var(--finale-art-font);
  letter-spacing: 0.05em;
  font-size: clamp(0.92rem, 1.18vw, 1.2rem);
  position: relative;
  z-index: 2;
  color: var(--paper-soft);
}

/* ─── 第二幕：地域经纬 ───────────────────────────────────────────────────── */

.finale-act--astrolabe {
  height: calc(100vh - var(--nav-h));
  margin-top: 0;
  display: flex;
  align-items: center;
}

.finale-astrolabe__heading {
  display: grid;
  gap: 0.55rem;
  justify-items: center;
}

.finale-astrolabe {
  position: relative;
  width: min(1180px, 100%);
  min-height: clamp(380px, calc(100vh - var(--nav-h) - 13rem), 640px);
  display: grid;
  gap: 1.2rem;
  justify-items: center;
}

.finale-astrolabe__core {
  width: min(620px, 58vw);
  position: relative;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
  perspective: 1200px;
  perspective-origin: 50% 40%;
  margin-top: clamp(1.8rem, 4vh, 2.8rem);
}

.finale-astrolabe__svg {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  overflow: visible;
  filter:
    drop-shadow(0 18px 36px rgba(2, 4, 8, 0.56))
    drop-shadow(0 0 36px rgba(189, 148, 81, 0.2));
  transform: translateZ(32px);
}

.astrolabe-aura {
  position: absolute;
  inset: 16% 16%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(196, 159, 92, 0.18) 0%, rgba(196, 159, 92, 0) 72%);
  filter: blur(16px);
  z-index: 0;
}

.astrolabe-depth {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.astrolabe-depth--rear {
  inset: -4% 4%;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(212, 173, 104, 0.16), transparent 62%),
    radial-gradient(ellipse at 50% 68%, rgba(57, 78, 112, 0.28), transparent 72%);
  filter: blur(8px);
  transform: translateZ(-110px) rotateX(72deg);
}

.astrolabe-depth--mid {
  inset: 12% 18%;
  border: 1px solid rgba(223, 188, 116, 0.2);
  box-shadow: 0 0 22px rgba(183, 142, 74, 0.18);
  transform: translateZ(-46px) rotateX(66deg);
}

.astrolabe-depth--front {
  inset: 22% 24%;
  border: 1px dashed rgba(225, 193, 132, 0.24);
  transform: translateZ(8px) rotateX(62deg);
}

.astrolabe-orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(198, 157, 89, 0.25);
  box-shadow: 0 0 16px rgba(188, 145, 70, 0.12);
  z-index: 1;
}

.astrolabe-orbit--one {
  inset: 3%;
}

.astrolabe-orbit--two {
  inset: 12%;
  border-style: dashed;
  border-color: rgba(198, 157, 89, 0.2);
}

.astrolabe-orbit--three {
  inset: 23%;
  border-color: rgba(198, 157, 89, 0.18);
}

.astrolabe-particle {
  position: absolute;
  z-index: 3;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 202, 122, 0.98) 0%, rgba(240, 202, 122, 0) 72%);
}

.astrolabe-particle--1 {
  left: 14%;
  top: 26%;
}

.astrolabe-particle--2 {
  right: 18%;
  top: 16%;
}

.astrolabe-particle--3 {
  right: 13%;
  bottom: 21%;
}

.astrolabe-comet {
  position: absolute;
  z-index: 3;
  width: 64px;
  height: 2px;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(244, 214, 155, 0.88) 0%, rgba(244, 214, 155, 0.04) 100%);
  filter: drop-shadow(0 0 8px rgba(214, 170, 90, 0.38));
}

.astrolabe-comet::before {
  content: "";
  position: absolute;
  left: -3px;
  top: -2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(244, 214, 155, 0.86);
}

.astrolabe-comet--1 {
  left: 16%;
  top: 18%;
  transform: rotate(26deg);
}

.astrolabe-comet--2 {
  right: 13%;
  bottom: 16%;
  transform: rotate(-148deg);
}

.astrolabe-star {
  position: absolute;
  z-index: 3;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(244, 214, 155, 0.82);
  box-shadow: 0 0 10px rgba(214, 170, 90, 0.44);
}

.astrolabe-star::before,
.astrolabe-star::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: rgba(244, 214, 155, 0.4);
  transform: translate(-50%, -50%);
}

.astrolabe-star::before {
  width: 1px;
  height: 14px;
}

.astrolabe-star::after {
  width: 14px;
  height: 1px;
}

.astrolabe-star--1 {
  left: 10%;
  top: 34%;
}

.astrolabe-star--2 {
  left: 30%;
  top: 10%;
}

.astrolabe-star--3 {
  right: 20%;
  top: 26%;
}

.astrolabe-star--4 {
  right: 8%;
  bottom: 32%;
}

.astrolabe-ring {
  fill: none;
  stroke: color-mix(in srgb, var(--finale-gold) 48%, rgba(226, 215, 193, 0.24));
}

.astrolabe-ring--outer {
  stroke-width: 1.6;
}

.astrolabe-ring--middle {
  stroke-width: 1.2;
  stroke-dasharray: 7 11;
  opacity: 0.66;
}

.astrolabe-ring--inner {
  stroke-width: 1;
  opacity: 0.48;
}

.astrolabe-link {
  fill: none;
  stroke: color-mix(in srgb, var(--finale-gold) 76%, rgba(248, 236, 208, 0.74));
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: 0.9;
}

.astrolabe-center {
  fill: var(--finale-gold);
  opacity: 0.88;
}

.astrolabe-node__halo {
  fill: color-mix(in srgb, var(--finale-gold) 10%, transparent);
  opacity: 0.28;
}

.astrolabe-node__ring {
  fill: none;
  stroke: color-mix(in srgb, var(--finale-gold) 92%, #f3ddb0);
  stroke-width: 1.6;
  opacity: 0.86;
}

.astrolabe-node__label {
  fill: color-mix(in srgb, var(--finale-ink) 96%, #fff);
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.06em;
}

.astrolabe-list {
  display: none;
}

.astrolabe-verses {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

.astrolabe-verse {
  position: absolute;
  width: min(320px, 30vw);
  text-align: center;
  padding: 0.34rem 0.52rem;
  text-shadow:
    0 0 12px rgba(197, 154, 83, 0.24),
    0 0 24px rgba(67, 102, 146, 0.16);
}

.astrolabe-verse--luoyang {
  left: -3.8%;
  top: 56%;
  transform: translate(-8%, -50%);
}

.astrolabe-verse--zhaozhou {
  left: 50%;
  bottom: -3%;
  transform: translateX(-50%);
}

.astrolabe-verse--guangji {
  right: -3.8%;
  top: 56%;
  transform: translate(8%, -50%);
}

.astrolabe-verse__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.16rem, 1.55vw, 1.46rem);
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--finale-ink) 92%, #fff);
}

.astrolabe-verse__tag {
  margin: 0.16rem 0 0;
  font-family: var(--finale-art-font);
  font-size: clamp(0.72rem, 0.92vw, 0.84rem);
  letter-spacing: 0.18em;
  color: color-mix(in srgb, var(--finale-gold) 84%, #f2dca8);
}

.astrolabe-verse__desc {
  margin: 0.2rem 0 0;
  font-family: var(--finale-art-font);
  font-size: clamp(0.72rem, 0.82vw, 0.84rem);
  letter-spacing: 0.05em;
  color: color-mix(in srgb, var(--paper-soft) 82%, #f3dfb5);
  opacity: 0.9;
  white-space: nowrap;
}

.astrolabe-mobile-line {
  display: none;
}

.astrolabe-card {
  position: relative;
  min-height: 168px;
  padding: 1rem 1.06rem;
  border-radius: 16px;
  text-align: left;
  background:
    radial-gradient(ellipse 112% 70% at 50% 0%, rgba(183, 154, 99, 0.14), transparent 68%),
    rgba(10, 14, 22, 0.56);
  box-shadow:
    0 0 0 1px rgba(183, 154, 99, 0.2),
    0 1px 0 rgba(240, 210, 150, 0.2) inset,
    0 12px 34px rgba(1, 2, 4, 0.42);
  backdrop-filter: blur(10px) saturate(1.1);
}

.astrolabe-card--guangji {
  border-color: rgba(225, 188, 114, 0.28);
}

.astrolabe-card--luoyang {
  background:
    radial-gradient(circle at 50% 26%, rgba(126, 170, 216, 0.22), rgba(126, 170, 216, 0) 68%),
    radial-gradient(circle at 50% 72%, rgba(106, 145, 194, 0.16), rgba(106, 145, 194, 0) 72%),
    rgba(10, 14, 22, 0.58);
}

.astrolabe-card--zhaozhou {
  border-color: rgba(216, 176, 106, 0.3);
}

.astrolabe-card__dot {
  display: none;
}

.astrolabe-card__tag {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: color-mix(in srgb, var(--finale-gold) 82%, #f6dfb0);
}

.astrolabe-card__name {
  margin: 0.26rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.12rem, 1.5vw, 1.32rem);
  line-height: 1.24;
  color: var(--finale-ink);
}

.astrolabe-card__chips {
  margin-top: 0.42rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.38rem;
}

.astrolabe-card__chip {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.52rem;
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--finale-ink) 92%, #fff);
  background: rgba(166, 126, 60, 0.16);
  border: 1px solid rgba(214, 174, 104, 0.22);
}

.astrolabe-card__desc {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  line-height: 1.66;
  color: color-mix(in srgb, var(--finale-muted) 86%, var(--finale-ink));
}

.astrolabe-card__tail {
  margin: 0.45rem 0 0;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  line-height: 1.58;
  color: color-mix(in srgb, var(--paper-soft) 78%, #e7d2a9);
}

/* ─── 第三幕：理念交汇 ───────────────────────────────────────────────────── */

.finale-act--convergence {
  height: calc(100vh - var(--nav-h));
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

.finale-confluence {
  position: relative;
  width: min(1240px, 100%);
  min-height: clamp(420px, 62vh, 620px);
  margin-top: clamp(1.2rem, 2.8vh, 2.6rem);
}

.finale-confluence::before {
  content: "";
  position: absolute;
  inset: 12% 12% 12% 12%;
  border-radius: 42% 58% 56% 44% / 48% 44% 56% 52%;
  background: radial-gradient(circle at 50% 50%, rgba(212, 176, 106, 0.14), rgba(212, 176, 106, 0));
  filter: blur(14px);
  pointer-events: none;
}

.finale-confluence__river {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.confluence-path,
.confluence-main {
  fill: none;
  stroke: url(#finale-confluence-gradient);
  stroke-width: 2.8;
  stroke-linecap: round;
  filter: drop-shadow(0 0 16px rgba(214, 171, 92, 0.24));
  opacity: 0.86;
}

.confluence-main {
  stroke-width: 3.2;
  opacity: 0.92;
}

.confluence-ripple {
  fill: none;
  stroke: rgba(157, 196, 236, 0.32);
  stroke-width: 1.2;
  opacity: 0;
}

.confluence-core-light {
  fill: url(#finale-confluence-core);
}

.confluence-streams {
  position: absolute;
  inset: 0;
}

.confluence-stream {
  position: absolute;
  min-width: clamp(148px, 18vw, 208px);
  padding: 0.72rem 0.92rem 0.82rem;
  border-radius: 999px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(13, 20, 31, 0.72), rgba(10, 16, 24, 0.58)),
    radial-gradient(circle at 50% 0%, rgba(223, 186, 114, 0.18), transparent 68%);
  border: 1px solid rgba(232, 198, 126, 0.28);
  box-shadow:
    0 0 0 1px rgba(232, 198, 126, 0.14) inset,
    0 14px 32px rgba(2, 4, 8, 0.5);
  backdrop-filter: blur(8px);
}

.confluence-stream--lingnan {
  left: 7%;
  top: 64%;
}

.confluence-stream--haisi {
  left: 50%;
  top: 16%;
  transform: translateX(-50%);
}

.confluence-stream--zhongyuan {
  right: 7%;
  top: 64%;
}

.confluence-stream__note {
  margin: 0;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: rgba(205, 172, 109, 0.76);
}

.confluence-stream__title {
  margin: 0.22rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.06rem, 1.6vw, 1.34rem);
  letter-spacing: 0.08em;
  color: rgba(236, 224, 199, 0.94);
}

.confluence-stream__bridge {
  margin: 0.2rem 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: rgba(198, 183, 154, 0.82);
}

/* ─── 第四幕：结语内容 ───────────────────────────────────────────────────── */

.finale-act--epilogue {
  height: calc(100vh - var(--nav-h));
  display: flex;
  align-items: center;
}

.finale-act--epilogue .finale-act__inner {
  width: min(1320px, 95vw);
  min-height: calc(100vh - var(--nav-h));
  padding-top: clamp(1.2rem, 2.6vh, 2rem);
  padding-bottom: clamp(1.2rem, 2.6vh, 2rem);
}

.finale-epilogue {
  position: relative;
  width: min(1180px, 94vw);
  display: grid;
  gap: clamp(0.7rem, 1.4vh, 1.1rem);
  padding: clamp(1.15rem, 2.8vw, 2.2rem) clamp(1.15rem, 3vw, 2.6rem);
  border: 1px solid rgba(229, 192, 122, 0.18);
  border-radius: 22px;
  background:
    radial-gradient(84% 70% at 50% 0%, rgba(201, 158, 82, 0.12), transparent 70%),
    linear-gradient(180deg, rgba(239, 228, 209, 0.07), rgba(239, 228, 209, 0.028));
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 219, 0.08),
    0 24px 70px rgba(2, 5, 10, 0.34);
  overflow: hidden;
}

.finale-epilogue::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 14% 18%, rgba(214, 170, 84, 0.14), transparent 22%),
    radial-gradient(circle at 86% 22%, rgba(105, 168, 178, 0.1), transparent 24%),
    linear-gradient(90deg, transparent, rgba(239, 228, 209, 0.05), transparent);
  opacity: 0.72;
}

.finale-epilogue__title,
.finale-epilogue__divider,
.finale-epilogue__content {
  position: relative;
  z-index: 1;
}

.finale-epilogue__title {
  margin: 0;
  font-family: var(--finale-art-font);
  font-size: clamp(2.1rem, 4vw, 3.55rem);
  line-height: 1.24;
  letter-spacing: 0.12em;
  color: rgba(242, 209, 146, 0.98);
  text-align: center;
  text-shadow:
    0 0 18px rgba(188, 144, 76, 0.44),
    0 0 42px rgba(188, 144, 76, 0.18);
}

.finale-epilogue__divider {
  width: min(360px, 44vw);
  height: 1px;
  margin: 0 auto;
  background: linear-gradient(90deg, transparent, rgba(214, 170, 84, 0.82), transparent);
  box-shadow: 0 0 16px rgba(214, 170, 84, 0.24);
}

.finale-epilogue__content {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.58rem, 1.15vh, 0.9rem);
  text-align: left;
}

.finale-epilogue__paragraph {
  margin: 0;
  font-family: var(--finale-art-font);
  font-size: clamp(0.9rem, 1vw, 1.04rem);
  line-height: 1.78;
  letter-spacing: 0.045em;
  color: rgba(232, 221, 199, 0.88);
  text-shadow: 0 0 14px rgba(6, 7, 10, 0.72);
  text-indent: 2em;
}

.finale-epilogue__paragraph:first-child,
.finale-epilogue__paragraph:last-child,
.finale-epilogue__paragraph--intro {
  grid-column: 1 / -1;
}

.finale-epilogue__paragraph:first-child,
.finale-epilogue__paragraph:last-child {
  color: rgba(244, 228, 194, 0.94);
}

.finale-epilogue__paragraph--intro {
  text-align: center;
  text-indent: 0;
  color: rgba(214, 170, 84, 0.9);
  letter-spacing: 0.14em;
  font-weight: 700;
}

/* ─── 第五幕：大轴判词 ───────────────────────────────────────────────────── */

.finale-act--revelation {
  height: calc(100vh - var(--nav-h));
  display: flex;
  align-items: center;
  overflow: clip;
}

.finale-act--revelation .finale-act__inner {
  width: min(1240px, 95vw);
  min-height: calc(100vh - var(--nav-h));
  justify-content: center;
  gap: 1.45rem;
  position: relative;
}

.finale-myth-panels {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.finale-myth-panel {
  position: absolute;
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(231, 194, 123, 0.14);
  background: rgba(9, 14, 20, 0.56);
  box-shadow:
    0 12px 32px rgba(2, 4, 8, 0.32),
    0 0 0 1px rgba(233, 200, 129, 0.08) inset;
  filter: saturate(0.58) brightness(0.62) contrast(1.03) blur(1.8px);
  opacity: 0.42;
}

.finale-myth-panel--lt,
.finale-myth-panel--lb,
.finale-myth-panel--rt,
.finale-myth-panel--rb {
  width: clamp(206px, 16vw, 276px);
  height: clamp(146px, 11.4vw, 196px);
}

.finale-myth-panel--lt {
  left: 1.8%;
  top: 2.2%;
  transform: rotate(0deg);
}

.finale-myth-panel--lb {
  left: 1.8%;
  bottom: 3.2%;
  transform: rotate(0deg);
}

.finale-myth-panel--rt {
  right: 1.8%;
  top: 2.2%;
  transform: rotate(0deg);
}

.finale-myth-panel--rb {
  right: 1.8%;
  bottom: 3.2%;
  transform: rotate(0deg);
}

.finale-myth-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.finale-myth-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 16, 24, 0.18), rgba(10, 16, 24, 0.5)),
    radial-gradient(circle at 50% 0, rgba(214, 173, 98, 0.14), rgba(214, 173, 98, 0));
}

.finale-grand-seal {
  position: relative;
  width: clamp(280px, 38vw, 500px);
  height: clamp(280px, 38vw, 500px);
  display: grid;
  place-items: center;
  z-index: 1;
}

.finale-grand-seal__celestial {
  position: absolute;
  inset: -74px;
  pointer-events: none;
  z-index: 0;
}

.seal-moon {
  position: absolute;
  right: 4%;
  top: 14%;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(236, 205, 147, 0.86);
  box-shadow: 0 0 16px rgba(193, 150, 78, 0.34);
}

.seal-moon::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: rgba(6, 9, 15, 0.96);
  transform: translateX(5px);
}

.seal-star {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(241, 209, 145, 0.92);
  box-shadow: 0 0 10px rgba(186, 140, 72, 0.52);
  animation: finale-seal-star-twinkle 2.8s ease-in-out infinite;
}

.seal-star--1 { left: 8%; top: 18%; }
.seal-star--2 { left: 20%; top: 8%; width: 4px; height: 4px; animation-delay: 0.4s; }
.seal-star--3 { right: 18%; top: 9%; animation-delay: 0.8s; }
.seal-star--4 { right: 8%; top: 28%; width: 4px; height: 4px; animation-delay: 1.1s; }
.seal-star--5 { right: 10%; bottom: 18%; animation-delay: 1.4s; }
.seal-star--6 { left: 16%; bottom: 10%; width: 4px; height: 4px; animation-delay: 1.8s; }

@keyframes finale-seal-star-twinkle {
  0%,
  100% {
    opacity: 0.34;
    transform: scale(0.92);
  }
  50% {
    opacity: 0.95;
    transform: scale(1.16);
  }
}

.finale-grand-seal__ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid transparent;
}

.finale-grand-seal__ring--1 {
  inset: 0;
  border-color: color-mix(in srgb, var(--finale-gold) 34%, rgba(243, 214, 160, 0.3));
  animation: finale-seal-ring-a 9s linear infinite;
}

.finale-grand-seal__ring--2 {
  inset: -18px;
  border-color: color-mix(in srgb, var(--finale-gold) 18%, rgba(243, 214, 160, 0.18));
  animation: finale-seal-ring-b 11s linear infinite reverse;
}

.finale-grand-seal__ring--3 {
  inset: -36px;
  border-color: color-mix(in srgb, var(--finale-gold) 10%, rgba(243, 214, 160, 0.12));
  border-style: dashed;
  animation: finale-seal-ring-c 16s linear infinite;
}

@keyframes finale-seal-ring-a {
  0% {
    transform: rotate(0deg) scale(1);
    opacity: 0.5;
  }
  50% {
    transform: rotate(180deg) scale(1.02);
    opacity: 0.78;
  }
  100% {
    transform: rotate(360deg) scale(1);
    opacity: 0.5;
  }
}

@keyframes finale-seal-ring-b {
  0% {
    transform: rotate(0deg) scale(0.99);
    opacity: 0.34;
  }
  50% {
    transform: rotate(-180deg) scale(1.03);
    opacity: 0.58;
  }
  100% {
    transform: rotate(-360deg) scale(0.99);
    opacity: 0.34;
  }
}

@keyframes finale-seal-ring-c {
  0% {
    transform: rotate(0deg);
    opacity: 0.26;
  }
  50% {
    opacity: 0.42;
  }
  100% {
    transform: rotate(360deg);
    opacity: 0.26;
  }
}

.finale-grand-seal__ornaments {
  position: absolute;
  inset: -56px;
  pointer-events: none;
  z-index: 0;
}

.seal-ornament {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(239, 202, 124, 0.95) 0%, rgba(239, 202, 124, 0) 70%);
  box-shadow: 0 0 10px rgba(186, 140, 72, 0.4);
}

.seal-ornament--1 { left: 8%; top: 22%; }
.seal-ornament--2 { left: 20%; top: 8%; width: 4px; height: 4px; }
.seal-ornament--3 { right: 16%; top: 12%; }
.seal-ornament--4 { right: 8%; top: 34%; width: 4px; height: 4px; }
.seal-ornament--5 { right: 10%; bottom: 22%; }
.seal-ornament--6 { left: 24%; bottom: 8%; width: 4px; height: 4px; }
.seal-ornament--7 { left: 6%; bottom: 32%; }
.seal-ornament--8 { left: 48%; top: 0; width: 4px; height: 4px; }

.finale-grand-seal__face {
  position: relative;
  z-index: 1;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--finale-copper) 82%, rgba(238, 210, 166, 0.82));
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 28%, rgba(252, 232, 195, 0.3), transparent 52%),
    radial-gradient(circle at 66% 72%, rgba(185, 120, 62, 0.2), transparent 48%),
    linear-gradient(138deg, rgba(92, 54, 36, 0.74), rgba(136, 76, 48, 0.5));
  box-shadow:
    0 0 0 2px rgba(232, 194, 132, 0.24) inset,
    0 0 0 16px rgba(183, 154, 99, 0.08),
    0 0 0 28px rgba(136, 96, 58, 0.09),
    0 28px 68px rgba(2, 4, 8, 0.62),
    0 0 92px rgba(168, 124, 66, 0.22);
  transform-style: preserve-3d;
  animation:
    finale-seal-face-rotate 20s linear infinite,
    finale-seal-face-breathe 7.6s ease-in-out infinite;
}

.finale-grand-seal__face::before,
.finale-grand-seal__face::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.finale-grand-seal__face::before {
  inset: 6%;
  border: 1px solid rgba(237, 206, 154, 0.44);
  box-shadow:
    0 0 0 1px rgba(128, 88, 52, 0.32) inset,
    0 0 18px rgba(202, 157, 87, 0.24);
  transform: translateZ(10px);
}

.finale-grand-seal__face::after {
  inset: 18%;
  border: 1px dashed rgba(227, 190, 132, 0.28);
  transform: translateZ(24px);
}

@keyframes finale-seal-face-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes finale-seal-face-breathe {
  0%,
  100% {
    filter: drop-shadow(0 0 0 rgba(222, 175, 104, 0));
  }
  50% {
    filter: drop-shadow(0 0 18px rgba(222, 175, 104, 0.24));
  }
}

.finale-grand-seal__mark {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.8vw, 3.3rem);
  letter-spacing: 0.22em;
  font-weight: 700;
  background: linear-gradient(160deg, #f4d7a2 0%, #e7be7f 44%, #bb8a4c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-text-stroke: 0.9px rgba(101, 68, 36, 0.48);
  text-shadow:
    0 1px 0 rgba(248, 226, 186, 0.28),
    0 10px 18px rgba(70, 44, 21, 0.46),
    0 0 18px rgba(218, 170, 95, 0.26);
  transform: translateZ(28px) rotate(-18deg);
}

.finale-verdict {
  width: min(1480px, 97vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.92rem;
  text-align: center;
  z-index: 1;
}

.finale-verdict__kicker {
  margin: 0;
  font-size: clamp(0.72rem, 0.86vw, 0.82rem);
  letter-spacing: 0.16em;
  font-family: var(--finale-art-font);
  color: var(--finale-gold);
}

.finale-verdict__headline {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5.4vw, 4.1rem);
  line-height: 1.2;
  letter-spacing: 0.08em;
  color: rgba(224, 216, 197, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.12em;
}

.finale-verdict__line {
  display: block;
  text-align: center;
  background: linear-gradient(180deg, rgba(236, 205, 149, 0.94) 0%, rgba(197, 162, 109, 0.92) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.finale-verdict__char {
  display: inline-block;
  color: rgba(224, 216, 197, 0.08);
  white-space: pre;
}

.finale-verdict__summary {
  margin: 0;
  margin-top: clamp(1.7rem, 6.2vh, 4.8rem);
  max-width: min(1540px, 97vw);
  white-space: nowrap;
  line-height: 1.46;
  letter-spacing: 0.04em;
  font-family: var(--finale-art-font);
  font-size: clamp(0.9rem, 1.15vw, 1.06rem);
  color: color-mix(in srgb, var(--paper-soft) 92%, #fff);
}

.finale-bamboo {
  width: min(1500px, 97vw);
  margin-top: clamp(1.8rem, 5vh, 3.6rem);
  z-index: 1;
}

.finale-bamboo__surface {
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 4.8vw, 3.7rem) clamp(1.2rem, 3.4vw, 3rem);
  border-radius: 30px;
  border: 1px solid rgba(155, 121, 65, 0.38);
  background:
    linear-gradient(180deg, rgba(250, 230, 186, 0.16) 0%, rgba(143, 101, 44, 0.12) 100%),
    linear-gradient(180deg, rgba(84, 53, 24, 0.12), rgba(214, 182, 124, 0.08)),
    repeating-linear-gradient(
      90deg,
      rgba(213, 181, 122, 0.82) 0 6.8%,
      rgba(189, 153, 94, 0.92) 6.8% 13.6%,
      rgba(154, 118, 64, 0.98) 13.6% 14.2%
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 243, 214, 0.46),
    inset 0 -12px 24px rgba(94, 61, 24, 0.18),
    0 30px 60px rgba(27, 18, 9, 0.34);
}

.finale-bamboo__surface::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 247, 227, 0.12), transparent 16%, transparent 82%, rgba(92, 55, 18, 0.14)),
    radial-gradient(circle at 12% 18%, rgba(255, 250, 236, 0.28), transparent 24%),
    radial-gradient(circle at 88% 24%, rgba(140, 95, 36, 0.14), transparent 20%),
    radial-gradient(circle at 52% 74%, rgba(121, 82, 32, 0.12), transparent 22%);
  pointer-events: none;
  mix-blend-mode: soft-light;
}

.finale-bamboo__surface::after {
  content: "";
  position: absolute;
  inset: 1.1rem;
  border-radius: 22px;
  border: 1px solid rgba(121, 88, 42, 0.2);
  pointer-events: none;
}

.finale-bamboo__binding {
  position: absolute;
  left: 4.5%;
  right: 4.5%;
  height: 12px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(109, 64, 19, 0.96), rgba(64, 35, 11, 0.92)),
    repeating-linear-gradient(90deg, rgba(204, 169, 113, 0.18) 0 10px, transparent 10px 20px);
  box-shadow:
    inset 0 1px 0 rgba(238, 216, 171, 0.28),
    0 2px 6px rgba(37, 22, 7, 0.26);
  pointer-events: none;
}

.finale-bamboo__binding--top { top: 1rem; }
.finale-bamboo__binding--bottom { bottom: 1rem; }

.finale-bamboo__scroll {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(112deg, transparent 0%, rgba(255, 246, 223, 0.16) 46%, transparent 58%),
    linear-gradient(90deg, transparent 0%, rgba(101, 64, 21, 0.08) 50%, transparent 100%);
  pointer-events: none;
}

.finale-bamboo__kicker {
  position: relative;
  z-index: 1;
  margin: 0;
  text-align: center;
  font-size: clamp(0.78rem, 1vw, 0.94rem);
  letter-spacing: 0.3em;
  color: rgba(92, 58, 18, 0.94);
  text-shadow: 0 1px 0 rgba(255, 248, 232, 0.4);
}

.finale-bamboo__title {
  position: relative;
  z-index: 1;
  margin: 0.8rem 0 0;
  text-align: center;
  font-family: var(--finale-art-font);
  font-size: clamp(2.15rem, 4.5vw, 3.4rem);
  line-height: 1.28;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: #321f0e;
  text-shadow:
    0 1px 0 rgba(255, 248, 232, 0.82),
    0 -1px 0 rgba(92, 60, 24, 0.18),
    0 8px 18px rgba(114, 79, 32, 0.1);
}

.finale-bamboo__divider {
  position: relative;
  z-index: 1;
  width: min(320px, 42vw);
  height: 1px;
  margin: 1.2rem auto 1.5rem;
  background: linear-gradient(90deg, transparent, rgba(112, 72, 26, 0.82), transparent);
}

.finale-bamboo__content {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(0.82rem, 1.8vh, 1.28rem);
  padding: clamp(0.8rem, 1.6vw, 1.2rem) clamp(0.7rem, 1.5vw, 1.1rem);
  border-radius: 1rem;
  background:
    linear-gradient(180deg, rgba(255, 247, 231, 0.22), rgba(147, 105, 44, 0.08)),
    rgba(255, 250, 240, 0.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 232, 0.42),
    inset 0 -1px 0 rgba(103, 70, 28, 0.12);
}

.finale-bamboo__paragraph {
  margin: 0;
  font-family: var(--finale-art-font);
  font-size: clamp(1.08rem, 1.28vw, 1.26rem);
  line-height: 2;
  letter-spacing: 0.055em;
  font-weight: 600;
  color: #321f0e;
  text-align: left;
  text-shadow:
    0 1px 0 rgba(255, 248, 232, 0.62),
    0 -1px 0 rgba(79, 54, 24, 0.16);
}

.finale-bamboo__paragraph--intro {
  text-align: center;
  font-size: clamp(1.14rem, 1.34vw, 1.3rem);
  letter-spacing: 0.12em;
  color: rgba(74, 46, 16, 0.96);
}

.finale-bamboo__char {
  display: inline-block;
  white-space: pre;
  color: #321f0e;
  text-shadow:
    0 1px 0 rgba(255, 247, 232, 0.72),
    0 -1px 0 rgba(79, 54, 24, 0.22),
    0 0 8px rgba(159, 116, 43, 0.1);
}

/* ─── 回退动效 ───────────────────────────────────────────────────────────── */

[data-fade-up],
[data-astro-card],
[data-confluence-node] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.62s var(--easing), transform 0.62s var(--easing);
}

[data-fade-up].is-visible,
[data-astro-card].is-visible,
[data-confluence-node].is-visible {
  opacity: 1;
  transform: translateY(0);
}

.finale-page.is-motion-fallback .finale-verdict__headline,
.finale-page.is-motion-fallback .finale-verdict__char {
  color: color-mix(in srgb, var(--finale-ink) 90%, #fff);
  text-shadow: none;
}

.finale-page.is-reduced-motion [data-fade-up],
.finale-page.is-reduced-motion [data-astro-card],
.finale-page.is-reduced-motion [data-confluence-node] {
  opacity: 1;
  transform: none;
  transition: none;
}

/* ─── 响应式坍塌 ─────────────────────────────────────────────────────────── */

@media (max-width: 1320px) {
  .finale-lead,
  .finale-verdict__summary {
    white-space: normal;
    max-width: min(980px, 92vw);
    line-height: 1.7;
  }

  .finale-lead {
    margin-top: clamp(1.4rem, 3.4vh, 2.6rem);
  }
}

@media (max-width: 960px) {
  .finale-act--prologue {
    height: calc(100vh - var(--nav-h));
  }

  .finale-prologue__ornaments {
    inset: -3% -2% -14%;
  }

  .prologue-ornament--left,
  .prologue-ornament--right {
    width: clamp(130px, 24vw, 200px);
    top: 10%;
  }

  .prologue-ornament--bottom {
    width: min(420px, 86vw);
    bottom: 2%;
  }

  .prologue-ornament--midlow,
  .prologue-dots {
    bottom: -1%;
  }

  .finale-title-split {
    max-width: 92%;
    grid-template-columns: 1fr;
    gap: 0.36rem;
  }

  .finale-title-line {
    font-size: clamp(2rem, 9.2vw, 3.6rem);
    letter-spacing: 0.12em;
  }

  .finale-lead {
    white-space: normal;
    max-width: 92%;
    margin-top: 0.9rem;
    line-height: 1.68;
  }

  .finale-act--astrolabe {
    height: calc(100vh - var(--nav-h));
    margin-top: 0;
  }

  .finale-astrolabe__core {
    display: none;
  }

  .astrolabe-list {
    position: relative;
    inset: auto;
    pointer-events: auto;
    display: grid;
    grid-template-columns: 1fr;
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
    gap: 0.9rem;
    padding-left: 1.75rem;
  }

  .astrolabe-verses {
    display: none;
  }

  .astrolabe-mobile-line {
    display: block;
    position: absolute;
    left: 0.58rem;
    top: 0.68rem;
    bottom: 0.68rem;
    width: 1px;
    background: linear-gradient(180deg, rgba(214, 170, 84, 0.16) 0%, rgba(214, 170, 84, 0.88) 50%, rgba(214, 170, 84, 0.16) 100%);
    box-shadow: 0 0 12px rgba(214, 170, 84, 0.34);
    transform-origin: top center;
  }

  .astrolabe-card {
    position: relative;
    width: auto;
    min-height: auto;
    transform: none !important;
    border-radius: 18px;
    text-align: left;
    padding: 1rem 1rem 1rem 1.24rem;
  }

  .astrolabe-card__tail {
    display: block;
  }

  .astrolabe-card__dot {
    display: block;
    position: absolute;
    left: -1.42rem;
    top: 1.2rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--finale-gold);
    box-shadow:
      0 0 0 3px rgba(214, 170, 84, 0.22),
      0 0 12px rgba(214, 170, 84, 0.5);
  }

  .finale-act--convergence {
    height: calc(100vh - var(--nav-h));
    margin: 0;
  }

  .finale-confluence {
    min-height: 540px;
  }

  .finale-confluence__river {
    height: 420px;
    top: 42px;
  }

  .confluence-streams {
    display: grid;
    gap: 0.72rem;
    width: min(560px, 92vw);
    margin: 0 auto;
    padding-top: 132px;
  }

  .confluence-stream {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    transform: none !important;
    min-width: 0;
    border-radius: 18px;
    text-align: left;
  }

  .finale-act--epilogue {
    min-height: calc(100vh - var(--nav-h));
    height: auto;
  }

  .finale-epilogue {
    width: min(760px, 94vw);
    padding: 1.25rem 1rem;
  }

  .finale-epilogue__title {
    font-size: clamp(1.66rem, 4.8vw, 2.55rem);
  }

  .finale-epilogue__content {
    grid-template-columns: 1fr;
    gap: 0.62rem;
    max-height: calc(100vh - var(--nav-h) - 9.4rem);
    overflow-y: auto;
    padding-right: 0.18rem;
  }

  .finale-epilogue__paragraph {
    font-size: 0.96rem;
    line-height: 1.68;
  }

  .finale-grand-seal {
    width: clamp(240px, 62vw, 420px);
    height: clamp(240px, 62vw, 420px);
  }

  .finale-grand-seal__ornaments {
    inset: -42px;
  }

  .finale-grand-seal__celestial {
    inset: -48px;
  }

  .finale-myth-panels {
    inset: 0;
  }

  .finale-myth-panel {
    opacity: 0.34;
    filter: saturate(0.56) brightness(0.58) contrast(1.02) blur(1.2px);
  }

  .finale-myth-panel--lt,
  .finale-myth-panel--lb,
  .finale-myth-panel--rt,
  .finale-myth-panel--rb {
    width: clamp(128px, 16.8vw, 176px);
    height: clamp(92px, 12vw, 128px);
  }

  .finale-myth-panel--lt {
    left: 0.9%;
    top: 1.4%;
  }

  .finale-myth-panel--lb {
    left: 0.9%;
    bottom: 2.4%;
  }

  .finale-myth-panel--rt {
    right: 0.9%;
    top: 1.4%;
  }

  .finale-myth-panel--rb {
    right: 0.9%;
    bottom: 2.4%;
  }

  .finale-verdict__summary {
    margin-top: 1.4rem;
    max-width: 92%;
    white-space: normal;
    line-height: 1.72;
  }

  .finale-bamboo {
    width: min(1180px, 94vw);
    margin-top: 1.6rem;
  }

  .finale-bamboo__surface {
    padding: 1.8rem 1rem 2rem;
    border-radius: 24px;
  }

  .finale-bamboo__title {
    font-size: clamp(1.64rem, 3.8vw, 2.4rem);
  }

  .finale-bamboo__paragraph {
    font-size: 1.04rem;
    line-height: 1.92;
  }
}

@media (max-width: 640px) {
  .finale-region--origin {
    padding-top: 0;
  }

  .finale-prologue__ornaments {
    inset: 0 -2% -8%;
  }

  .prologue-ornament--left,
  .prologue-ornament--right {
    opacity: 0.62;
  }

  .prologue-ornament--bottom {
    opacity: 0.74;
  }

  .prologue-ornament--midlow,
  .prologue-dots {
    opacity: 0.56;
    bottom: 0;
  }

  .finale-act__inner {
    width: min(96vw, 620px);
    padding: clamp(3.4vh, 5vh, 6vh) 0.9rem;
    gap: 0.86rem;
  }

  .finale-kicker,
  .finale-act__kicker,
  .finale-verdict__kicker {
    letter-spacing: 0.14em;
  }

  .finale-title-line {
    letter-spacing: 0.1em;
  }

  .finale-lead {
    font-size: 0.98rem;
    line-height: 1.72;
    margin-top: 0.8rem;
  }

  .finale-act--astrolabe {
    height: calc(100vh - var(--nav-h));
  }

  .astrolabe-list {
    padding-left: 1.45rem;
  }

  .astrolabe-verses {
    display: none;
  }

  .astrolabe-mobile-line {
    left: 0.5rem;
  }

  .finale-act--convergence {
    height: calc(100vh - var(--nav-h));
  }

  .finale-confluence {
    min-height: 480px;
  }

  .finale-confluence__river {
    height: 360px;
    top: 58px;
  }

  .confluence-streams {
    width: 100%;
    padding-top: 116px;
  }

  .confluence-stream {
    padding: 0.66rem 0.8rem 0.78rem;
  }

  .finale-act--epilogue,
  .finale-act--revelation {
    min-height: calc(100vh - var(--nav-h));
    height: auto;
  }

  .finale-epilogue {
    border-radius: 18px;
  }

  .finale-epilogue__content {
    max-height: calc(100vh - var(--nav-h) - 8.6rem);
  }

  .finale-epilogue__paragraph {
    font-size: 0.92rem;
    line-height: 1.62;
    letter-spacing: 0.02em;
  }

  .finale-grand-seal {
    width: clamp(210px, 64vw, 300px);
    height: clamp(210px, 64vw, 300px);
  }

  .finale-grand-seal__ornaments {
    inset: -26px;
  }

  .finale-grand-seal__celestial {
    inset: -30px;
  }

  .finale-verdict__headline {
    font-size: clamp(1.66rem, 8vw, 2.5rem);
    letter-spacing: 0.06em;
  }

  .finale-verdict__summary {
    font-size: 0.92rem;
    line-height: 1.8;
    margin-top: 1rem;
    white-space: normal;
  }

  .finale-bamboo {
    width: 100%;
    margin-top: 1rem;
  }

  .finale-bamboo__surface {
    padding: 1.4rem 0.8rem 1.55rem;
    border-radius: 20px;
  }

  .finale-bamboo__binding {
    left: 6%;
    right: 6%;
  }

  .finale-bamboo__title {
    font-size: clamp(1.34rem, 6.2vw, 1.86rem);
    letter-spacing: 0.08em;
  }

  .finale-bamboo__divider {
    margin: 0.9rem auto 1.05rem;
  }

  .finale-bamboo__paragraph {
    font-size: 1rem;
    line-height: 1.82;
    letter-spacing: 0.03em;
  }

  .finale-bamboo__paragraph--intro {
    font-size: 1.04rem;
    letter-spacing: 0.08em;
  }
}

.luoyang-lab {
  --ly-bg: #12232e;
  --ly-bg-soft: #18323f;
  --ly-panel: rgba(9, 24, 31, 0.8);
  --ly-card: rgba(19, 43, 52, 0.82);
  --ly-card-strong: rgba(23, 52, 63, 0.9);
  --ly-line: rgba(122, 164, 177, 0.22);
  --ly-line-strong: rgba(122, 164, 177, 0.42);
  --ly-primary: #4a6f7e;
  --ly-accent: #26a69a;
  --ly-warning: #c15539;
  --ly-good: #5089c6;
  --ly-safe: #26a69a;
  --ly-text: rgba(245, 250, 252, 0.95);
  --ly-soft: rgba(214, 232, 238, 0.74);
  border-color: color-mix(in srgb, var(--ly-primary) 52%, var(--line));
  background:
    radial-gradient(100% 90% at 0% 0%, rgba(38, 166, 154, 0.12), transparent 55%),
    radial-gradient(120% 100% at 100% 100%, rgba(80, 137, 198, 0.13), transparent 58%),
    rgba(12, 24, 31, 0.42);
}

.ly-lab {
  margin-top: 1rem;
  border: 1px solid var(--ly-line);
  background:
    linear-gradient(180deg, rgba(10, 28, 35, 0.96), rgba(9, 20, 26, 0.98)),
    linear-gradient(135deg, rgba(74, 111, 126, 0.12), transparent 35%);
  overflow: hidden;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.26);
}

.ly-lab__command {
  padding: 1rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.015), rgba(255, 255, 255, 0)),
    linear-gradient(180deg, rgba(18, 35, 46, 0.94), rgba(11, 25, 33, 0.86));
  border-bottom: 1px solid var(--ly-line);
}

.ly-lab__grid {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.92fr);
  grid-template-areas:
    "tide result"
    "oyster compare"
    "aux aux";
}

.ly-lab__card {
  position: relative;
  display: grid;
  gap: 0.72rem;
  padding: 0.88rem 0.92rem;
  border: 1px solid var(--ly-line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent),
    var(--ly-card);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 14px 36px rgba(0, 0, 0, 0.16);
}

.ly-lab__card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent 24%),
    linear-gradient(315deg, rgba(38, 166, 154, 0.05), transparent 30%);
  opacity: 0.78;
}

.ly-lab__card--core,
.ly-lab__card--result {
  border-color: var(--ly-line-strong);
  background:
    linear-gradient(180deg, rgba(38, 166, 154, 0.08), rgba(38, 166, 154, 0)),
    var(--ly-card-strong);
}

.ly-lab__card--tide {
  grid-area: tide;
}

.ly-lab__card--result {
  grid-area: result;
}

.ly-lab__card--oyster {
  grid-area: oyster;
}

.ly-lab__card--compare {
  grid-area: compare;
}

.ly-lab__card-head,
.ly-lab__card-head--result {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}

.ly-lab__card-head strong {
  display: block;
  color: var(--ly-text);
  font-size: 1.04rem;
  letter-spacing: 0.02em;
}

.ly-lab__kicker {
  display: inline-flex;
  align-items: center;
  margin-bottom: 0.28rem;
  color: rgba(197, 227, 234, 0.72);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ly-lab__chip,
.ly-lab__score-label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 1.9rem;
  padding: 0.28rem 0.62rem;
  border: 1px solid rgba(122, 164, 177, 0.18);
  color: rgba(232, 244, 247, 0.84);
  font-size: 0.74rem;
  background: rgba(255, 255, 255, 0.04);
}

.ly-lab__range-shell,
.ly-lab__desc,
.ly-lab__choice-block,
.ly-lab__status-stack,
.ly-lab__score-row,
.ly-lab__progress {
  position: relative;
  z-index: 1;
}

.ly-lab__label {
  display: block;
  margin-bottom: 0.52rem;
  color: rgba(235, 245, 247, 0.86);
  font-size: 0.8rem;
}

.ly-lab__range-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 0.58rem;
  align-items: center;
}

.ly-lab__stepper {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--ly-line);
  background: rgba(255, 255, 255, 0.05);
  color: var(--ly-text);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    transform 180ms ease;
}

.ly-lab__stepper:hover,
.ly-lab__stepper:focus-visible {
  border-color: var(--ly-line-strong);
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

.ly-lab__value {
  min-width: 3.1rem;
  text-align: right;
  color: rgba(238, 246, 248, 0.84);
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
}

.ly-lab__range {
  --value: 32%;
  width: 100%;
  height: 1.35rem;
  margin: 0;
  appearance: none;
  background: transparent;
}

.ly-lab__range:focus {
  outline: none;
}

.ly-lab__range::-webkit-slider-runnable-track {
  height: 0.48rem;
  background:
    linear-gradient(90deg, var(--ly-accent) 0%, var(--ly-accent) var(--value), rgba(255, 255, 255, 0.12) var(--value), rgba(255, 255, 255, 0.12) 100%);
  border-radius: 999px;
}

.ly-lab__range--oyster::-webkit-slider-runnable-track {
  background:
    linear-gradient(90deg, rgba(201, 226, 214, 0.3) 0%, rgba(38, 166, 154, 0.86) var(--value), rgba(255, 255, 255, 0.1) var(--value), rgba(255, 255, 255, 0.1) 100%);
}

.ly-lab__range::-webkit-slider-thumb {
  appearance: none;
  width: 1rem;
  height: 1rem;
  margin-top: -0.26rem;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.88);
  background: var(--ly-primary);
  box-shadow: 0 0 0 4px rgba(74, 111, 126, 0.2);
}

.ly-lab__range--oyster::-webkit-slider-thumb {
  background: var(--ly-accent);
  box-shadow: 0 0 0 4px rgba(38, 166, 154, 0.18);
}

.ly-lab__range::-moz-range-track {
  height: 0.48rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

.ly-lab__range::-moz-range-progress {
  height: 0.48rem;
  border-radius: 999px;
  background: var(--ly-accent);
}

.ly-lab__range::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(255, 255, 255, 0.88);
  border-radius: 50%;
  background: var(--ly-primary);
}

.ly-lab__marks {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.3rem;
  margin-top: 0.48rem;
  color: rgba(198, 220, 226, 0.52);
  font-size: 0.7rem;
}

.ly-lab__marks span:nth-child(3) {
  text-align: center;
}

.ly-lab__marks span:nth-child(4),
.ly-lab__marks span:nth-child(5) {
  text-align: right;
}

.ly-lab__marks--compact span {
  text-align: left;
}

.ly-lab__marks--compact span:nth-child(3) {
  text-align: center;
}

.ly-lab__marks--compact span:nth-child(5) {
  text-align: right;
}

.ly-lab__desc,
.ly-lab__status,
.ly-lab__status-note,
.ly-lab__knowledge-card p,
.ly-lab__help-card p {
  margin: 0;
  color: var(--ly-soft);
  line-height: 1.68;
  font-size: 0.82rem;
}

.ly-lab__choice-block {
  display: grid;
  gap: 0.48rem;
}

.ly-lab__pill-group,
.ly-lab__tag-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.ly-lab__pill,
.ly-lab__tag,
.ly-lab__reset {
  border: 1px solid var(--ly-line);
  color: var(--ly-text);
  cursor: pointer;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

.ly-lab__pill {
  min-height: 2.1rem;
  min-width: 7rem;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.82rem;
}

.ly-lab__tag {
  min-height: 1.9rem;
  min-width: 5.8rem;
  padding: 0.42rem 0.88rem;
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.76rem;
  color: rgba(223, 236, 240, 0.8);
}

.ly-lab__pill:hover,
.ly-lab__pill:focus-visible,
.ly-lab__tag:hover,
.ly-lab__tag:focus-visible,
.ly-lab__reset:hover,
.ly-lab__reset:focus-visible {
  border-color: var(--ly-line-strong);
  transform: translateY(-1px);
}

.ly-lab__pill.is-active {
  background: linear-gradient(135deg, var(--ly-primary), rgba(83, 132, 147, 0.92));
  border-color: color-mix(in srgb, #ffffff 18%, var(--ly-primary));
  color: #fff;
  box-shadow: 0 0 0 1px rgba(112, 172, 191, 0.12), 0 0 18px rgba(74, 111, 126, 0.26);
}

.ly-lab__tag.is-active {
  background: rgba(38, 166, 154, 0.14);
  border-color: rgba(38, 166, 154, 0.42);
  color: rgba(244, 251, 252, 0.94);
}

.ly-lab__score-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 0.8rem;
}

.ly-lab__score-value {
  margin: 0;
  color: var(--ly-text);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
}

.ly-lab__score-note {
  color: rgba(210, 229, 234, 0.56);
  font-size: 0.72rem;
}

.ly-lab__progress {
  height: 0.72rem;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.ly-lab__progress-bar {
  height: 100%;
  width: 68%;
  transition:
    width 320ms ease,
    background 220ms ease;
}

.luoyang-lab[data-stability-tier="warning"] .ly-lab__progress-bar,
.luoyang-lab[data-stability-tier="warning"] .ly-lab__score-label {
  background: linear-gradient(90deg, #c15539, #dc8161);
  color: #fff2ee;
}

.luoyang-lab[data-stability-tier="good"] .ly-lab__progress-bar,
.luoyang-lab[data-stability-tier="good"] .ly-lab__score-label {
  background: linear-gradient(90deg, #5089c6, #7db1db);
  color: #eff7ff;
}

.luoyang-lab[data-stability-tier="safe"] .ly-lab__progress-bar,
.luoyang-lab[data-stability-tier="safe"] .ly-lab__score-label {
  background: linear-gradient(90deg, #26a69a, #8fd5c0);
  color: #f1fffc;
}

.ly-lab__condition {
  margin: 0;
  color: rgba(244, 250, 252, 0.92);
  font-size: 0.88rem;
}

.ly-lab__status-stack {
  display: grid;
  gap: 0.36rem;
}

.ly-lab__aux {
  grid-area: aux;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.18rem 0;
}

.ly-lab__switch {
  display: inline-flex;
  align-items: center;
  gap: 0.72rem;
  color: var(--ly-text);
  cursor: pointer;
}

.ly-lab__switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ly-lab__switch-ui {
  position: relative;
  width: 3rem;
  height: 1.68rem;
  border: 1px solid var(--ly-line);
  background: rgba(255, 255, 255, 0.05);
  transition:
    border-color 180ms ease,
    background 180ms ease;
}

.ly-lab__switch-ui i {
  position: absolute;
  top: 0.17rem;
  left: 0.18rem;
  width: 1.18rem;
  height: 1.18rem;
  background: rgba(255, 255, 255, 0.86);
  transition:
    transform 180ms ease,
    background 180ms ease;
}

.ly-lab__switch input:checked + .ly-lab__switch-ui {
  border-color: rgba(38, 166, 154, 0.52);
  background: rgba(38, 166, 154, 0.18);
}

.ly-lab__switch input:checked + .ly-lab__switch-ui i {
  transform: translateX(1.28rem);
  background: #dff8f4;
}

.ly-lab__switch-copy {
  display: grid;
  gap: 0.18rem;
}

.ly-lab__switch-copy strong {
  color: var(--ly-text);
  font-size: 0.84rem;
}

.ly-lab__switch-copy span {
  color: var(--ly-soft);
  font-size: 0.76rem;
}

.ly-lab__help {
  position: relative;
  margin-left: auto;
}

.ly-lab__help summary {
  display: grid;
  place-items: center;
  width: 1.95rem;
  height: 1.95rem;
  border: 1px solid var(--ly-line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ly-text);
  cursor: pointer;
  list-style: none;
}

.ly-lab__help summary::-webkit-details-marker {
  display: none;
}

.ly-lab__help-card {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.65rem);
  width: min(280px, 80vw);
  padding: 0.8rem 0.84rem;
  border: 1px solid var(--ly-line-strong);
  background: rgba(9, 20, 26, 0.96);
  box-shadow: 0 20px 32px rgba(0, 0, 0, 0.28);
}

.ly-lab__help-card strong,
.ly-lab__knowledge-card strong {
  display: block;
  color: rgba(240, 228, 190, 0.95);
  font-size: 0.9rem;
}

.ly-lab__reset {
  min-height: 2rem;
  min-width: 7.2rem;
  padding: 0.54rem 1rem;
  background: rgba(193, 85, 57, 0.08);
  border-color: rgba(193, 85, 57, 0.38);
}

.ly-lab__stage-wrap {
  position: relative;
  min-height: 520px;
  background:
    radial-gradient(70% 80% at 50% 14%, rgba(118, 173, 190, 0.15), transparent 58%),
    linear-gradient(180deg, rgba(17, 34, 44, 0.98), rgba(8, 16, 22, 1));
}

.ly-lab__stage {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 520px;
}

.ly-lab__stage canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.ly-lab__stage-mask {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 26%, transparent 74%, rgba(255, 255, 255, 0.02)),
    radial-gradient(70% 60% at 50% 0%, transparent, rgba(3, 8, 11, 0.14));
}

.ly-lab__loading {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  margin: 0;
  transform: translate(-50%, -50%);
  color: rgba(159, 214, 224, 0.88);
}

.ly-lab__knowledge {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  padding: 0.9rem 1rem 1rem;
  border-top: 1px solid var(--ly-line);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.28));
}

.ly-lab__knowledge-card {
  padding: 0.78rem 0.82rem;
  border: 1px solid rgba(122, 164, 177, 0.16);
  background: rgba(255, 255, 255, 0.035);
}

.ly-lab__knowledge-card p {
  margin-top: 0.38rem;
}

@media (max-width: 980px) {
  .ly-lab__grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "tide"
      "result"
      "oyster"
      "compare"
      "aux";
  }

  .ly-lab__aux {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .ly-lab__help {
    margin-left: 0;
  }

  .ly-lab__knowledge {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .ly-lab__command {
    padding: 0.86rem;
  }

  .ly-lab__card {
    padding: 0.8rem;
  }

  .ly-lab__range-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .ly-lab__value {
    grid-column: 1 / -1;
    text-align: left;
  }

  .ly-lab__score-row {
    align-items: center;
  }

  .ly-lab__stage-wrap,
  .ly-lab__stage {
    min-height: 420px;
  }
}

.bridge-layout--sandbox .bridge-layout__head {
  margin-bottom: 0.6rem;
  gap: 0.28rem;
}

.bridge-layout--sandbox .bridge-layout__title {
  font-size: clamp(1.56rem, 2.35vw, 2.18rem);
}

.bridge-layout--sandbox .bridge-layout__lead {
  max-width: 48rem;
  font-size: 0.94rem;
}

.bridge-layout--sandbox .bridge-module-nav {
  padding-bottom: 0.5rem;
  gap: 0.38rem;
}

.bridge-layout--sandbox .bridge-module-nav__link {
  padding: 0.32rem 0.74rem;
  font-size: 0.76rem;
}

.bridge-layout--sandbox .bridge-layout__content .section {
  padding-top: 0.7rem;
  padding-bottom: 0.9rem;
}

.sandbox-page-section {
  min-height: 0;
}

.ly-lab--workbench {
  --ly-workbench-h: clamp(560px, calc(100dvh - var(--nav-h) - 14rem), 760px);
  display: grid;
  grid-template-columns: minmax(430px, 500px) minmax(0, 1fr);
  gap: 0.85rem;
  align-items: stretch;
  margin-top: 0.85rem;
  border: none;
  background: none;
  box-shadow: none;
  overflow: visible;
}

.ly-lab--workbench .ly-lab__command,
.ly-lab--workbench .ly-lab__stage-wrap {
  min-height: var(--ly-workbench-h);
  border: 1px solid var(--ly-line);
  background:
    linear-gradient(180deg, rgba(10, 28, 35, 0.96), rgba(9, 20, 26, 0.98)),
    linear-gradient(135deg, rgba(74, 111, 126, 0.12), transparent 35%);
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.2);
}

.ly-lab--workbench .ly-lab__command {
  margin: 0;
  padding: 0.82rem;
  overflow: auto;
  border-bottom: 1px solid var(--ly-line);
}

.ly-lab--workbench .ly-lab__grid {
  gap: 0.65rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "tide tide"
    "oyster oyster"
    "compare compare"
    "aux aux"
    "insights insights";
}

.ly-lab__toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.7rem;
}

.ly-lab__toolbar-copy {
  display: grid;
  gap: 0.16rem;
}

.ly-lab__toolbar-copy strong {
  color: var(--ly-text);
  font-size: 0.98rem;
}

.ly-lab__toolbar-copy span {
  color: var(--ly-soft);
  font-size: 0.76rem;
}

.ly-lab__auto {
  min-height: 2.1rem;
  min-width: 7.4rem;
  padding: 0.52rem 1.18rem;
  border: 1px solid rgba(38, 166, 154, 0.34);
  background: rgba(38, 166, 154, 0.08);
  color: var(--ly-text);
  cursor: pointer;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

.ly-lab__auto:hover,
.ly-lab__auto:focus-visible {
  border-color: rgba(38, 166, 154, 0.52);
  transform: translateY(-1px);
}

.ly-lab__auto.is-active {
  background: linear-gradient(135deg, rgba(38, 166, 154, 0.26), rgba(38, 166, 154, 0.12));
  box-shadow: 0 0 0 1px rgba(38, 166, 154, 0.12), 0 0 20px rgba(38, 166, 154, 0.14);
}

.ly-lab__preset-rail {
  display: grid;
  gap: 0.45rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0.74rem 0 0.8rem;
}

.ly-lab__preset {
  display: grid;
  gap: 0.22rem;
  align-content: start;
  min-height: 5rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--ly-line);
  background: rgba(255, 255, 255, 0.035);
  color: var(--ly-text);
  cursor: pointer;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

.ly-lab__preset strong {
  font-size: 0.88rem;
}

.ly-lab__preset span {
  color: var(--ly-soft);
  font-size: 0.7rem;
  line-height: 1.55;
}

.ly-lab__preset:hover,
.ly-lab__preset:focus-visible {
  border-color: var(--ly-line-strong);
  transform: translateY(-1px);
}

.ly-lab__preset.is-active {
  border-color: rgba(38, 166, 154, 0.42);
  background:
    linear-gradient(180deg, rgba(38, 166, 154, 0.14), rgba(38, 166, 154, 0.04)),
    rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(38, 166, 154, 0.1);
}

.ly-lab--workbench .ly-lab__card {
  padding: 0.74rem 0.8rem;
  gap: 0.58rem;
}

.ly-lab--workbench .ly-lab__card--tide {
  grid-area: tide;
}

.ly-lab--workbench .ly-lab__card--oyster {
  grid-area: oyster;
}

.ly-lab--workbench .ly-lab__card--compare {
  grid-area: compare;
}

.ly-lab--workbench .ly-lab__score-value {
  font-size: clamp(1.7rem, 2.8vw, 2.5rem);
}

.ly-lab--workbench .ly-lab__desc,
.ly-lab--workbench .ly-lab__status,
.ly-lab--workbench .ly-lab__status-note {
  font-size: 0.78rem;
}

.ly-lab--workbench .ly-lab__range-row {
  gap: 0.58rem;
}

.ly-lab--workbench .ly-lab__stepper {
  width: 2.4rem;
  min-width: 2.4rem;
  height: 2rem;
}

.ly-lab--workbench .ly-lab__marks {
  margin-top: 0.36rem;
}

.ly-lab__insights {
  grid-area: insights;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}

.ly-lab__fact {
  padding: 0.55rem 0.6rem;
  border: 1px solid rgba(122, 164, 177, 0.16);
  background: rgba(255, 255, 255, 0.03);
}

.ly-lab__fact strong {
  display: block;
  color: rgba(240, 228, 190, 0.95);
  font-size: 0.78rem;
}

.ly-lab__fact p {
  margin: 0.22rem 0 0;
  color: var(--ly-soft);
  font-size: 0.7rem;
  line-height: 1.55;
}

.ly-lab--workbench .ly-lab__aux {
  grid-area: aux;
  padding-top: 0.08rem;
}

.ly-lab--workbench .ly-lab__help-card {
  z-index: 8;
}

.ly-lab--workbench .ly-lab__stage-wrap {
  overflow: hidden;
}

.ly-lab--workbench .ly-lab__stage {
  min-height: var(--ly-workbench-h);
}

.ly-lab__stage-hud {
  position: absolute;
  top: 0.82rem;
  left: 0.82rem;
  right: 0.82rem;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.8rem;
  pointer-events: none;
}

.ly-lab__stage-summary,
.ly-lab__stage-demo {
  padding: 0.64rem 0.72rem;
  border: 1px solid rgba(122, 164, 177, 0.18);
  background: rgba(7, 17, 22, 0.52);
  backdrop-filter: blur(8px);
}

.ly-lab__stage-kicker {
  display: block;
  color: rgba(195, 220, 226, 0.66);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ly-lab__stage-summary strong {
  display: block;
  margin-top: 0.18rem;
  color: var(--ly-text);
  font-size: 1rem;
}

.ly-lab__stage-summary p {
  margin: 0.22rem 0 0;
  color: var(--ly-soft);
  font-size: 0.76rem;
  line-height: 1.58;
  max-width: 22rem;
}

.ly-lab__stage-demo {
  color: rgba(229, 244, 247, 0.84);
  font-size: 0.76rem;
  white-space: nowrap;
}

.ly-lab__stage-caption {
  position: absolute;
  left: 0.82rem;
  right: auto;
  bottom: 8.6rem;
  z-index: 3;
  width: min(26rem, calc(100% - 1.64rem));
  padding: 0.74rem 0.82rem 0.78rem;
  border: 1px solid rgba(122, 164, 177, 0.18);
  background: rgba(7, 17, 22, 0.58);
  backdrop-filter: blur(8px);
  pointer-events: none;
}

.ly-lab__stage-caption span {
  display: block;
  color: rgba(195, 220, 226, 0.66);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ly-lab__stage-caption strong {
  display: block;
  margin-top: 0.2rem;
  color: var(--ly-text);
  font-size: 1rem;
}

.ly-lab__stage-caption p {
  margin: 0.24rem 0 0;
  color: var(--ly-soft);
  font-size: 0.78rem;
  line-height: 1.62;
}

.ly-lab__stage-footer {
  position: absolute;
  left: 0.82rem;
  right: 0.82rem;
  bottom: 0.82rem;
  z-index: 3;
  display: grid;
  gap: 0.62rem;
  pointer-events: none;
}

.ly-lab__stage-result {
  position: absolute;
  right: 0.82rem;
  bottom: 0.82rem;
  z-index: 3;
  width: min(24rem, calc(100% - 1.64rem));
  padding: 0.8rem 0.9rem;
  border: 1px solid rgba(122, 164, 177, 0.18);
  background: rgba(7, 17, 22, 0.64);
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.24);
}

.ly-lab__timeline,
.ly-lab__hud-card {
  border: 1px solid rgba(122, 164, 177, 0.18);
  background: rgba(7, 17, 22, 0.56);
  backdrop-filter: blur(8px);
}

.ly-lab__timeline {
  padding: 0.7rem 0.78rem 0.74rem;
}

.ly-lab__timeline-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.72rem;
  margin-bottom: 0.5rem;
}

.ly-lab__timeline-head span,
.ly-lab__hud-card span {
  color: rgba(195, 220, 226, 0.66);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ly-lab__timeline-head strong,
.ly-lab__hud-card strong {
  color: var(--ly-text);
  font-size: 0.88rem;
}

.ly-lab__timeline-track {
  position: relative;
  height: 0.54rem;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.ly-lab__timeline-fill {
  display: block;
  height: 100%;
  width: 32%;
  background: linear-gradient(90deg, rgba(80, 137, 198, 0.92), rgba(38, 166, 154, 0.92));
}

.ly-lab__timeline-pointer {
  position: absolute;
  top: 50%;
  left: 32%;
  width: 0.88rem;
  height: 0.88rem;
  border-radius: 50%;
  background: #eaf8fb;
  border: 2px solid rgba(38, 166, 154, 0.8);
  box-shadow: 0 0 0 5px rgba(38, 166, 154, 0.16);
  transform: translate(-50%, -50%);
}

.ly-lab__timeline-marks {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.24rem;
  margin-top: 0.46rem;
  color: rgba(201, 222, 227, 0.54);
  font-size: 0.68rem;
}

.ly-lab__timeline-marks span:nth-child(3) {
  text-align: center;
}

.ly-lab__timeline-marks span:nth-child(4),
.ly-lab__timeline-marks span:nth-child(5) {
  text-align: right;
}

.ly-lab__hud-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.52rem;
  margin-right: min(24.6rem, calc(100% - 1.64rem));
}

.ly-lab__hud-card {
  padding: 0.58rem 0.64rem;
  display: grid;
  gap: 0.2rem;
}

/* Responsive coordinate and mobile stability layer */

.china-map {
  --china-map-ratio: 1610.08 / 1145.2;
}

.china-map .china-map__viewport,
.home-map-stage__canvas .china-map__viewport,
.page-home-map--finale-scroll .home-map-stage__canvas .china-map__viewport {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: min(calc(100% - clamp(0.8rem, 2vw, 1.6rem)), 110vh);
  height: auto;
  max-width: calc(100% - clamp(0.8rem, 2vw, 1.6rem));
  aspect-ratio: var(--china-map-ratio);
  transform: translate(-50%, -50%);
}

.china-map .china-map__terrain,
.china-map .china-map__markers,
.home-map-stage__canvas .china-map__terrain,
.home-map-stage__canvas .china-map__markers,
.page-home-map--finale-scroll .home-map-stage__canvas .china-map__terrain,
.page-home-map--finale-scroll .home-map-stage__canvas .china-map__markers {
  inset: 0;
  width: 100%;
  height: 100%;
}

.china-map .china-map__terrain,
.home-map-stage__canvas .china-map__terrain,
.page-home-map--finale-scroll .home-map-stage__canvas .china-map__terrain {
  transform: none;
  transform-origin: 50% 50%;
}

.china-map__official-svg {
  width: 100%;
  height: 100%;
  display: block;
}

@media (max-width: 900px), (pointer: coarse) {
  html,
  body {
    overflow-x: hidden;
  }

  .app-shell {
    display: block;
    min-width: 0;
  }

  .section {
    width: min(94vw, 1180px);
    padding-top: clamp(1rem, 4vh, 2rem);
    padding-bottom: clamp(1rem, 4vh, 2rem);
  }

  .page-home-map--finale-scroll {
    --home-main-module-width: min(94vw, 680px);
    --home-act-h: auto;
    overflow: visible;
  }

  .page-home-map--finale-scroll::before,
  .page-home-map--finale-scroll::after {
    position: absolute;
  }

  .page-home-map--finale-scroll > [data-home-act] {
    width: var(--home-main-module-width);
    height: auto;
    min-height: auto;
    overflow: visible;
    padding: clamp(1rem, 4vh, 1.8rem) 0;
  }

  .page-home-map--finale-scroll .hero-immersive {
    min-height: calc(100svh - var(--nav-h));
    padding: clamp(1.2rem, 4vh, 2rem) 0 clamp(1.4rem, 5vh, 2.4rem);
  }

  .page-home-map--finale-scroll .hero-immersive__content {
    width: min(100%, 620px);
  }

  .page-home-map--finale-scroll .hero-immersive__dock {
    max-width: min(100%, 620px);
  }

  .page-home-map--finale-scroll .video-showcase--home,
  .page-home-map--finale-scroll .home-map-stage,
  .page-home-map--finale-scroll .home-scene-gallery {
    display: grid;
    min-height: auto;
    align-content: start;
  }

  .page-home-map--finale-scroll .video-showcase--home .video-showcase__card {
    max-height: none;
    grid-template-columns: 1fr;
  }

  .page-home-map--finale-scroll .video-showcase--home .video-showcase__frame {
    max-height: none;
  }

  .page-home-map--finale-scroll .home-bridge-axis--embedded {
    width: 100%;
    overflow: visible;
  }

  .page-home-map--finale-scroll .home-bridge-axis--embedded .home-bridge-axis__nodes,
  .page-home-map--finale-scroll .home-scene-gallery__grid {
    grid-template-columns: 1fr;
  }

  .page-home-map--finale-scroll .home-map-stage__canvas .china-map {
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
  }

  .home-map-stage__canvas .china-map,
  .page-home-map--finale-scroll .home-map-stage__canvas .china-map {
    height: auto;
    min-height: 0;
    padding: clamp(0.8rem, 3vw, 1.1rem);
  }

  .china-map {
    min-height: 0;
    overflow: visible;
  }

  .china-map .china-map__viewport,
  .home-map-stage__canvas .china-map__viewport,
  .page-home-map--finale-scroll .home-map-stage__canvas .china-map__viewport {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    max-width: none;
    aspect-ratio: var(--china-map-ratio);
    margin: clamp(2.4rem, 11vw, 4.2rem) auto clamp(2.2rem, 9vw, 3.4rem);
    transform: none;
  }

  .china-map__annotation {
    top: 0.7rem;
    left: 0.7rem;
    max-width: min(72%, 18rem);
    font-size: 0.72rem;
  }

  .china-map__legend-wrap,
  .china-map__compliance {
    max-width: calc(100% - 1.4rem);
    font-size: 0.68rem;
  }

  .bridge-marker {
    --marker-line: clamp(22px, 6vw, 34px) !important;
    --marker-card-y: 0px !important;
  }

  .bridge-marker__label,
  .bridge-marker__tooltip,
  .bridge-marker__lead-turn {
    display: none;
  }

  .bridge-marker__lead {
    left: 7px;
  }

  .bridge-marker__core {
    left: calc(var(--marker-line) + 13px);
    width: clamp(26px, 7vw, 32px);
    height: clamp(26px, 7vw, 32px);
  }

  .bridge-marker__halo {
    width: clamp(22px, 7vw, 30px);
    height: clamp(22px, 7vw, 30px);
  }

  .bridge-marker__pinpoint {
    width: 12px;
    height: 12px;
  }

  .two-col-grid,
  .home-map-main,
  .home-scene-gallery__grid,
  .bridge-nav-cards,
  .expert-grid,
  .feature-gallery {
    grid-template-columns: 1fr;
  }

  .bridge-layout__head,
  .bridge-layout__content,
  .bridge-module-nav,
  .culture-page,
  .overview-page,
  .features-page,
  .experts-page {
    width: min(94vw, 1180px);
    max-width: 100%;
  }
}

@media (max-width: 560px) {
  .page-home-map--finale-scroll {
    --home-main-module-width: 92vw;
  }

  .hero-immersive__actions,
  .page-home-map--finale-scroll .hero-immersive__dock .hero-immersive__actions {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  .hero-immersive__actions .btn,
  .page-home-map--finale-scroll .hero-immersive__dock .btn {
    width: 100%;
  }

  .page-home-map--finale-scroll .video-showcase__head span,
  .page-home-map--finale-scroll .video-showcase--home .video-showcase__copy p {
    font-size: 0.82rem;
  }

  .china-map__annotation {
    max-width: calc(100% - 1.4rem);
  }
}

@media (max-width: 1180px) {
  .ly-lab--workbench {
    --ly-workbench-h: clamp(520px, calc(100dvh - var(--nav-h) - 13rem), 700px);
    grid-template-columns: minmax(390px, 440px) minmax(0, 1fr);
  }

  .ly-lab__preset-rail {
    grid-template-columns: 1fr;
  }

  .ly-lab--workbench .ly-lab__grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "tide"
      "oyster"
      "compare"
      "aux"
      "insights";
  }

  .ly-lab__insights {
    grid-template-columns: 1fr;
  }

  .ly-lab__hud-grid {
    grid-template-columns: 1fr;
    margin-right: 0;
  }
}

@media (max-width: 980px) {
  .bridge-layout--sandbox .bridge-layout__head,
  .bridge-layout--sandbox .bridge-module-nav {
    width: min(94vw, 980px);
  }

  .ly-lab--workbench {
    display: grid;
    grid-template-columns: 1fr;
    --ly-workbench-h: auto;
  }

  .ly-lab--workbench .ly-lab__command,
  .ly-lab--workbench .ly-lab__stage-wrap {
    min-height: 0;
  }

  .ly-lab--workbench .ly-lab__command {
    overflow: visible;
  }

  .ly-lab--workbench .ly-lab__stage,
  .ly-lab--workbench .ly-lab__stage-wrap {
    min-height: 480px;
  }

  .ly-lab__stage-footer {
    left: 0.72rem;
    right: 0.72rem;
    bottom: 0.72rem;
  }

  .ly-lab__stage-caption {
    left: 0.72rem;
    width: min(25rem, calc(100% - 1.44rem));
  }

  .ly-lab__stage-result {
    left: 0.72rem;
    right: 0.72rem;
    width: auto;
    bottom: 8.7rem;
  }
}

@media (max-width: 640px) {
  .bridge-layout--sandbox .bridge-layout__lead {
    font-size: 0.9rem;
  }

  .ly-lab__toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .ly-lab__preset-rail {
    grid-template-columns: 1fr;
  }

  .ly-lab__stage-hud {
    flex-direction: column;
    align-items: flex-start;
    right: auto;
    max-width: min(88vw, 320px);
  }

  .ly-lab__stage-caption {
    right: 0.72rem;
    bottom: 11.4rem;
    width: auto;
  }

  .ly-lab__stage-result {
    bottom: 11.7rem;
  }

  .ly-lab__stage-summary p {
    max-width: none;
  }

  .ly-lab__timeline-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Whole-site mobile adaptation layer */

@media (max-width: 900px), (pointer: coarse) {
  :root {
    --container: min(94vw, 680px);
  }

  html,
  body,
  #app {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    min-width: 0;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  img,
  video,
  canvas,
  svg,
  iframe {
    max-width: 100%;
  }

  .app-main,
  .page,
  .bridge-layout,
  .page-bridge-overview,
  .page-labs,
  .finale-page {
    width: 100%;
    min-width: 0;
    overflow-x: clip;
  }

  .global-nav {
    left: max(0.7rem, env(safe-area-inset-left));
    right: max(0.7rem, env(safe-area-inset-right));
    top: max(0.55rem, env(safe-area-inset-top));
    width: auto;
    max-width: calc(100vw - 1.4rem);
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 0.55rem;
    padding: 0.58rem 0.66rem;
  }

  .global-nav__brand {
    min-width: 0;
  }

  .global-nav__brand .project-logo__wordmark strong,
  .global-nav__brand .project-logo__wordmark small,
  .global-nav__link span {
    white-space: nowrap;
  }

  .global-nav__brand .project-logo__wordmark small {
    letter-spacing: 0.16em;
  }

  .global-nav__brand .project-logo__wordmark small::before,
  .global-nav__brand .project-logo__wordmark small::after {
    width: 0.78rem;
  }

  .global-nav__brand .project-logo__mark {
    width: 3.12rem;
  }

  .global-nav__right,
  .global-nav__links,
  .global-nav__subline,
  .bridge-module-nav {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .global-nav__right::-webkit-scrollbar,
  .global-nav__links::-webkit-scrollbar,
  .global-nav__subline::-webkit-scrollbar,
  .bridge-module-nav::-webkit-scrollbar,
  .feature-scroll-track::-webkit-scrollbar,
  .bridge-overview-poster__gallery-window::-webkit-scrollbar {
    display: none;
  }

  .global-nav__links,
  .global-nav__subline {
    justify-content: flex-start;
    flex-wrap: nowrap;
  }

  .global-nav__link {
    flex: 0 0 auto;
    min-height: 2.2rem;
    padding: 0.42rem 0.62rem;
  }

  .global-nav__subline {
    padding-bottom: 0.08rem;
  }

  .section,
  .bridge-layout__head,
  .bridge-realm,
  .bridge-layout__content,
  .bridge-layout__content .section,
  .page-bridge-overview .section,
  .page-labs .section,
  .finale-act__inner {
    width: min(94vw, 680px);
    max-width: 100%;
  }

  .section {
    padding-top: clamp(1.15rem, 4.5vh, 2.4rem);
    padding-bottom: clamp(1.15rem, 4.5vh, 2.4rem);
  }

  .two-col-grid,
  .feature-gallery,
  .expert-grid,
  .bridge-nav-cards,
  .bridge-overview-dashboard__layout,
  .bridge-overview-dashboard__headline,
  .bridge-overview-analytics__layout,
  .bridge-overview-analytics__metrics,
  .bridge-overview-structure__layout,
  .bridge-overview-dossier__grid,
  .bridge-overview-points__compare,
  .bridge-overview-hero,
  .bridge-overview-intro,
  .feature-poster-stage,
  .feature-poster-sheet__layout,
  .feature-poster-notes,
  .feature-visual-ribbon,
  .culture-preface,
  .culture-archive__grid,
  .culture-page__tail,
  .experts-curation,
  .sandbox-shell__layout,
  .labs-page__grid,
  .home-map-main,
  .home-scene-gallery__grid {
    grid-template-columns: 1fr !important;
  }

  .bridge-layout {
    min-height: auto;
    padding-top: calc(var(--nav-h) + 1.2rem);
    padding-bottom: 2.4rem;
  }

  .bridge-layout__head {
    padding-top: 0;
  }

  .bridge-layout__title,
  .bridge-hero__title,
  .bridge-hero--cover .bridge-hero__title--realm,
  .bridge-overview-poster__header h2,
  .finale-title-split,
  .finale-act__title,
  .finale-verdict__headline {
    font-size: clamp(2rem, 10vw, 4rem);
    line-height: 1.04;
    letter-spacing: 0;
  }

  .bridge-layout__lead,
  .bridge-realm__copy p,
  .bridge-overview-intro__lead p,
  .culture-section-heading__lead,
  .sandbox-shell__header span,
  .finale-lead {
    max-width: 100%;
    font-size: clamp(0.92rem, 3.5vw, 1.04rem);
  }

  .bridge-realm {
    align-items: stretch;
    gap: 0.9rem;
  }

  .bridge-realm__lines {
    grid-template-columns: 1fr;
  }

  .bridge-module-nav {
    display: flex;
    width: min(94vw, 680px);
    padding: 0.4rem;
    gap: 0.45rem;
  }

  .bridge-module-nav__link {
    flex: 0 0 auto;
    min-width: max-content;
    min-height: 2.35rem;
    padding: 0.48rem 0.68rem;
  }

  .bridge-hero,
  .bridge-hero--cover,
  .page-bridge-overview--cover,
  .bridge-cover-page {
    min-height: auto;
  }

  .bridge-hero {
    display: grid;
    align-items: end;
    padding: calc(var(--nav-h) + 1.6rem) 0 2.2rem;
  }

  .bridge-hero__media {
    position: absolute;
    inset: 0;
  }

  .bridge-hero__content,
  .bridge-hero--cover .bridge-hero__content {
    position: relative;
    width: min(94vw, 680px);
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
  }

  .bridge-hero--cover .bridge-hero__jump-btn,
  .bridge-overview-intro__lead-actions,
  .bridge-structure-summary__actions,
  .labs-page__hero-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .bridge-hero--cover .bridge-hero__jump-btn,
  .bridge-overview-intro__lead-actions .btn,
  .bridge-structure-summary__actions .btn,
  .labs-page__hero-actions .btn {
    flex: 1 1 12rem;
    justify-content: center;
  }

  .bridge-overview-hero__media,
  .feature-poster-stage__media,
  .bridge-overview-poster__gallery-media,
  .expert-card__media {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .bridge-overview-poster__sheet,
  .feature-inline-detail,
  .culture-preface,
  .culture-section-heading,
  .culture-paper,
  .expert-card,
  .sandbox-shell,
  .bridge-overview-dashboard,
  .bridge-overview-analytics,
  .bridge-overview-structure,
  .bridge-overview-dossier {
    border-radius: 8px;
  }

  .bridge-overview-poster__facts,
  .bridge-overview-dashboard__stats,
  .bridge-overview-dashboard__mini-dossier-grid,
  .bridge-overview-structure__cards,
  .feature-visual-board__pills,
  .feature-poster-sheet__facts,
  .expert-card__focus,
  .sandbox-metrics,
  .ly-lab__hud-grid,
  .ly-lab__insights,
  .gj-lab-intro__grid {
    grid-template-columns: 1fr !important;
  }

  .bridge-overview-poster__gallery {
    overflow: hidden;
  }

  .bridge-overview-poster__gallery-window {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .bridge-overview-poster__gallery-track {
    animation: none !important;
    transform: none !important;
  }

  .bridge-overview-poster__gallery-group {
    min-width: max-content;
  }

  .bridge-overview-poster__gallery-card,
  .feature-scroll-card {
    scroll-snap-align: start;
  }

  .feature-scroll-section__head {
    align-items: stretch;
    flex-direction: column;
  }

  .feature-scroll-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(78vw, 22rem);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .feature-poster-sheet__hero {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .culture-preface {
    align-items: start;
  }

  .culture-preface__seal {
    width: 4.4rem;
    min-height: 4.4rem;
  }

  .culture-timeline {
    display: grid;
    gap: 1rem;
    padding-left: 1.2rem;
  }

  .culture-timeline::before {
    left: 0.36rem;
    right: auto;
  }

  .culture-timeline__item,
  .culture-timeline__item.is-left,
  .culture-timeline__item.is-right {
    grid-template-columns: 1fr;
    padding-left: 0.8rem;
  }

  .culture-timeline__item::before,
  .culture-timeline__item.is-left::before,
  .culture-timeline__item.is-right::before {
    left: -0.05rem;
    right: auto;
  }

  .culture-timeline__meta,
  .culture-timeline__item.is-left .culture-timeline__meta,
  .culture-timeline__item.is-right .culture-timeline__meta,
  .culture-timeline__item.is-left .culture-timeline__card,
  .culture-timeline__item.is-right .culture-timeline__card {
    grid-column: auto;
    text-align: left;
  }

  .culture-timeline__label {
    justify-content: flex-start;
  }

  .culture-archive__media-popup {
    position: static;
    width: 100%;
    max-width: none;
    margin-top: 0.8rem;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .video-showcase,
  .video-showcase__card,
  .video-showcase--bridge .video-showcase__card,
  .video-showcase--module .video-showcase__card {
    grid-template-columns: 1fr !important;
  }

  .video-showcase__frame,
  .video-showcase--bridge .video-showcase__frame,
  .video-showcase--module .video-showcase__frame {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .sandbox-page-section,
  .sandbox-shell {
    width: min(94vw, 680px);
    max-width: 100%;
  }

  .sandbox-shell__scene,
  .ly-lab--workbench .ly-lab__stage,
  .ly-lab--workbench .ly-lab__stage-wrap,
  .gj-native-shell,
  .gj-three-stage {
    min-height: clamp(360px, 72vw, 520px);
  }

  .ly-lab__stage-footer,
  .ly-lab__stage-caption,
  .ly-lab__stage-result,
  .gj-three-stage .gj-dashboard,
  .gj-three-stage .gj-controls,
  .gj-three-stage .gj-guide,
  .gj-three-stage .gj-warning {
    max-width: calc(100% - 1rem);
  }

  .gj-three-stage .gj-dashboard,
  .gj-three-stage .gj-controls {
    width: min(22rem, calc(100% - 1rem));
  }

  .labs-page__hero {
    min-height: auto;
    padding-top: calc(var(--nav-h) + 1.4rem);
  }

  .labs-page__grid {
    gap: 1rem;
  }

  .labs-page__orb {
    width: 100%;
    min-height: 12rem;
  }

  .finale-page {
    min-height: auto;
  }

  .finale-act {
    min-height: auto;
    height: auto;
    padding: calc(var(--nav-h) + 1rem) 0 3rem;
  }

  .finale-act--prologue,
  .finale-act--astrolabe,
  .finale-act--convergence,
  .finale-act--epilogue,
  .finale-act--revelation {
    height: auto;
    min-height: calc(100svh - var(--nav-h));
  }

  .finale-title-split,
  .finale-astrolabe,
  .finale-confluence,
  .finale-myth-panels,
  .finale-epilogue,
  .finale-bamboo {
    width: 100%;
    max-width: 100%;
  }

  .finale-title-line {
    display: block;
    text-align: left;
  }

  .finale-astrolabe {
    display: grid;
    gap: 1rem;
  }

  .astrolabe-list,
  .astrolabe-verses,
  .confluence-streams {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }

  .finale-astrolabe__core {
    width: min(86vw, 420px);
    height: min(86vw, 420px);
    margin: 0 auto;
  }

  .astrolabe-card,
  .astrolabe-verse,
  .confluence-card,
  .confluence-stream,
  .finale-myth-panel {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
  }

  .finale-myth-panels {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }

  .finale-grand-seal {
    width: min(78vw, 360px);
    height: min(78vw, 360px);
  }

  .finale-bamboo__content,
  .finale-epilogue__content {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .global-nav {
    padding: 0.5rem;
  }

  .global-nav__link {
    gap: 0.32rem;
    font-size: 0.76rem;
  }

  .bridge-icon--nav {
    width: 1.05rem;
    height: 1.05rem;
  }

  .section,
  .bridge-layout__head,
  .bridge-realm,
  .bridge-layout__content,
  .bridge-layout__content .section,
  .page-bridge-overview .section,
  .page-labs .section,
  .finale-act__inner {
    width: 92vw;
  }

  .bridge-layout {
    padding-top: calc(var(--nav-h) + 1.6rem);
  }

  .bridge-layout__title,
  .bridge-hero__title,
  .bridge-hero--cover .bridge-hero__title--realm,
  .finale-title-split {
    font-size: clamp(1.82rem, 11.5vw, 3rem);
  }

  .bridge-module-nav {
    width: 92vw;
  }

  .bridge-module-nav__link {
    padding-inline: 0.58rem;
  }

  .btn,
  .bridge-overview-intro__lead-actions .btn,
  .bridge-structure-summary__actions .btn,
  .labs-page__hero-actions .btn {
    width: 100%;
  }

  .feature-scroll-track {
    grid-auto-columns: 86vw;
  }

  .culture-preface {
    padding: 1rem;
  }

  .culture-preface__title,
  .culture-section-heading__title,
  .culture-paper__title,
  .block-title--icon {
    align-items: flex-start;
    flex-direction: column;
  }

  .sandbox-shell__scene,
  .ly-lab--workbench .ly-lab__stage,
  .ly-lab--workbench .ly-lab__stage-wrap,
  .gj-native-shell,
  .gj-three-stage {
    min-height: 360px;
  }

  .ly-lab__stage-caption,
  .ly-lab__stage-result {
    position: static;
    width: 100%;
    margin-top: 0.65rem;
  }

  .finale-act {
    padding-bottom: 2rem;
  }

  .finale-astrolabe__core {
    width: 82vw;
    height: 82vw;
  }
}

.bridge-ai {
  position: fixed;
  inset: 0;
  z-index: 95;
  pointer-events: none;
  color: rgba(248, 238, 219, 0.96);
  font-family: var(--font-body);
}

.bridge-ai__fab,
.bridge-ai__panel {
  pointer-events: auto;
}

.bridge-ai__fab {
  position: fixed;
  width: 4rem;
  height: 4rem;
  border: 1px solid rgba(238, 213, 164, 0.5);
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 0;
  color: #fff4dc;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 244, 210, 0.34), transparent 34%),
    linear-gradient(145deg, rgba(185, 128, 68, 0.98), rgba(57, 116, 126, 0.94));
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.4),
    0 0 0 7px rgba(224, 184, 112, 0.08);
  cursor: grab;
  touch-action: none;
  transition:
    filter var(--dur-fast) var(--easing),
    transform var(--dur-fast) var(--easing),
    box-shadow var(--dur-fast) var(--easing);
}

.bridge-ai__fab:active {
  cursor: grabbing;
  transform: scale(0.98);
}

.bridge-ai__fab:hover {
  filter: brightness(1.08);
  box-shadow:
    0 20px 52px rgba(0, 0, 0, 0.46),
    0 0 0 9px rgba(127, 190, 195, 0.1);
}

.bridge-ai__fab-orbit {
  position: absolute;
  inset: 0.42rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 244, 220, 0.42);
  transform: rotate(-18deg);
}

.bridge-ai__fab-orbit::before,
.bridge-ai__fab-orbit::after {
  content: "";
  position: absolute;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: #f5d28b;
  box-shadow: 0 0 12px rgba(245, 210, 139, 0.8);
}

.bridge-ai__fab-orbit::before {
  right: 0.08rem;
  top: 0.28rem;
}

.bridge-ai__fab-orbit::after {
  left: 0.12rem;
  bottom: 0.2rem;
  background: #9fd4d4;
  box-shadow: 0 0 12px rgba(159, 212, 212, 0.72);
}

.bridge-ai__fab-mark {
  position: relative;
  z-index: 1;
  font-family: "STKaiti", "Kaiti SC", "KaiTi", "Noto Serif SC", serif;
  font-size: 1.42rem;
  font-weight: 800;
  line-height: 1;
}

.bridge-ai__fab-name {
  position: absolute;
  left: 50%;
  bottom: 0.4rem;
  transform: translateX(-50%);
  font-size: 0.58rem;
  line-height: 1;
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: rgba(255, 247, 226, 0.82);
}

.bridge-ai__panel {
  position: fixed;
  width: min(22.5rem, calc(100vw - 1.75rem));
  height: min(34rem, calc(100vh - 1.75rem));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  overflow: hidden;
  border: 1px solid rgba(239, 228, 209, 0.22);
  border-radius: 1rem;
  background:
    linear-gradient(160deg, rgba(16, 25, 31, 0.96), rgba(10, 14, 18, 0.97)),
    rgba(12, 18, 24, 0.94);
  box-shadow:
    0 26px 76px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(18px);
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  visibility: hidden;
  transition:
    opacity var(--dur-fast) var(--easing),
    transform var(--dur-fast) var(--easing),
    visibility var(--dur-fast) var(--easing);
}

.bridge-ai__panel.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
}

.bridge-ai__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.82rem 0.92rem;
  border-bottom: 1px solid rgba(239, 228, 209, 0.14);
  background:
    radial-gradient(110% 130% at 0% 0%, rgba(196, 143, 72, 0.22), transparent 48%),
    rgba(255, 255, 255, 0.03);
  cursor: grab;
  touch-action: none;
}

.bridge-ai__header:active {
  cursor: grabbing;
}

.bridge-ai__header strong,
.bridge-ai__header span {
  display: block;
}

.bridge-ai__header strong {
  font-family: var(--font-display);
  font-size: 1.04rem;
  line-height: 1.15;
  color: #fff0d0;
}

.bridge-ai__header span {
  margin-top: 0.16rem;
  color: rgba(226, 211, 183, 0.72);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

.bridge-ai__header-actions {
  display: flex;
  gap: 0.42rem;
}

.bridge-ai__icon-btn,
.bridge-ai__send,
.bridge-ai__suggestions button {
  border: 1px solid rgba(239, 228, 209, 0.2);
  color: rgba(255, 243, 220, 0.94);
  background: rgba(239, 228, 209, 0.07);
  transition:
    background var(--dur-fast) var(--easing),
    border-color var(--dur-fast) var(--easing),
    transform var(--dur-fast) var(--easing);
}

.bridge-ai__icon-btn {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  padding: 0;
  font-size: 0.78rem;
  line-height: 1;
}

.bridge-ai__icon-btn:hover,
.bridge-ai__send:hover,
.bridge-ai__suggestions button:hover {
  border-color: rgba(239, 208, 149, 0.46);
  background: rgba(239, 228, 209, 0.13);
  transform: translateY(-1px);
}

.bridge-ai__messages {
  display: grid;
  align-content: start;
  gap: 0.72rem;
  min-height: 0;
  padding: 0.92rem;
  overflow: auto;
  scrollbar-width: thin;
}

.bridge-ai__message {
  display: flex;
}

.bridge-ai__message--user {
  justify-content: flex-end;
}

.bridge-ai__bubble {
  max-width: 86%;
  border: 1px solid rgba(239, 228, 209, 0.14);
  border-radius: 0.9rem;
  padding: 0.62rem 0.72rem;
  color: rgba(249, 241, 226, 0.94);
  background: rgba(255, 255, 255, 0.055);
  font-size: 0.86rem;
  line-height: 1.58;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.bridge-ai__message--assistant .bridge-ai__bubble {
  border-top-left-radius: 0.28rem;
  background:
    linear-gradient(135deg, rgba(190, 137, 72, 0.2), rgba(65, 122, 130, 0.14)),
    rgba(255, 255, 255, 0.045);
}

.bridge-ai__message--user .bridge-ai__bubble {
  border-top-right-radius: 0.28rem;
  border-color: rgba(128, 196, 199, 0.24);
  background: rgba(71, 132, 140, 0.22);
}

.bridge-ai__suggestions {
  display: flex;
  gap: 0.42rem;
  padding: 0 0.92rem 0.78rem;
  overflow-x: auto;
}

.bridge-ai__suggestions button {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 0.42rem 0.66rem;
  font-size: 0.76rem;
  white-space: nowrap;
}

.bridge-ai__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.55rem;
  gap: 0.48rem;
  padding: 0.82rem 0.92rem 0.92rem;
  border-top: 1px solid rgba(239, 228, 209, 0.13);
  background: rgba(0, 0, 0, 0.12);
}

.bridge-ai__input {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(239, 228, 209, 0.2);
  border-radius: 999px;
  padding: 0.62rem 0.78rem;
  outline: none;
  color: rgba(255, 244, 224, 0.96);
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.86rem;
}

.bridge-ai__input::placeholder {
  color: rgba(226, 211, 183, 0.54);
}

.bridge-ai__input:focus {
  border-color: rgba(143, 200, 202, 0.54);
  box-shadow: 0 0 0 3px rgba(143, 200, 202, 0.12);
}

.bridge-ai__send {
  width: 2.55rem;
  height: 2.55rem;
  border-radius: 50%;
  padding: 0;
  font-size: 0.84rem;
  font-weight: 700;
}

@media (max-width: 560px) {
  .bridge-ai__fab {
    width: 3.62rem;
    height: 3.62rem;
  }

  .bridge-ai__panel {
    width: calc(100vw - 1.25rem);
    height: min(31rem, calc(100vh - 1.25rem));
    border-radius: 0.86rem;
  }

  .bridge-ai__bubble {
    max-width: 90%;
    font-size: 0.82rem;
  }

  .bridge-ai__header,
  .bridge-ai__messages,
  .bridge-ai__form {
    padding-inline: 0.78rem;
  }

  .bridge-ai__suggestions {
    padding-inline: 0.78rem;
  }
}

.bridge-ai {
  --bridge-ai-ink: rgba(251, 243, 228, 0.96);
  --bridge-ai-muted: rgba(227, 214, 190, 0.72);
  --bridge-ai-line: rgba(239, 224, 198, 0.18);
  --bridge-ai-gold: #d6a15c;
  --bridge-ai-cyan: #8ec7ca;
  --bridge-ai-deep: rgba(8, 13, 18, 0.97);
  --bridge-ai-surface: rgba(255, 248, 238, 0.06);
  color: var(--bridge-ai-ink);
}

.bridge-ai__fab {
  width: 4.75rem;
  height: 5.25rem;
  border-radius: 1.55rem;
  align-content: center;
  justify-items: center;
  gap: 0.18rem;
  overflow: hidden;
  border-color: rgba(232, 209, 168, 0.42);
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 248, 230, 0.25), transparent 34%),
    linear-gradient(180deg, rgba(48, 84, 97, 0.96), rgba(27, 38, 48, 0.98) 48%, rgba(111, 69, 35, 0.98));
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 241, 218, 0.04) inset,
    0 0 0 8px rgba(130, 185, 190, 0.08);
}

.bridge-ai__fab:hover {
  box-shadow:
    0 26px 58px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(255, 241, 218, 0.08) inset,
    0 0 0 10px rgba(214, 161, 92, 0.1);
}

.bridge-ai__fab-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 241, 211, 0.2), transparent 42%),
    linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.18));
  pointer-events: none;
}

.bridge-ai__fab-icon {
  position: relative;
  z-index: 1;
  width: 2.5rem;
  height: 2.5rem;
  margin-top: 0.36rem;
  color: #fff0d2;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.26));
}

.bridge-ai__fab-icon svg {
  width: 100%;
  height: 100%;
}

.bridge-ai__fab-copy {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 0.04rem;
}

.bridge-ai__fab-copy strong,
.bridge-ai__fab-copy em {
  display: block;
  font-style: normal;
}

.bridge-ai__fab-copy strong {
  font-family: "STKaiti", "Kaiti SC", "KaiTi", "Noto Serif SC", serif;
  font-size: 0.92rem;
  letter-spacing: 0.12em;
  color: #fff2d8;
}

.bridge-ai__fab-copy em {
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  color: rgba(252, 241, 218, 0.68);
}

.bridge-ai__fab-orbit,
.bridge-ai__fab-mark,
.bridge-ai__fab-name {
  display: none;
}

.bridge-ai__panel {
  width: min(24rem, calc(100vw - 1.75rem));
  height: min(39rem, calc(100vh - 1.75rem));
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  border-radius: 1.25rem;
  border-color: rgba(234, 219, 191, 0.18);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(205, 143, 67, 0.16), transparent 36%),
    radial-gradient(140% 140% at 100% 0%, rgba(88, 150, 156, 0.14), transparent 40%),
    linear-gradient(180deg, rgba(12, 18, 24, 0.98), rgba(9, 12, 18, 0.98));
  box-shadow:
    0 32px 72px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.bridge-ai__header {
  padding: 0.94rem 1rem 0.82rem;
  border-bottom: 1px solid rgba(239, 224, 198, 0.12);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
}

.bridge-ai__identity strong {
  display: block;
  font-family: "STKaiti", "Kaiti SC", "KaiTi", "Noto Serif SC", serif;
  font-size: 1.14rem;
  letter-spacing: 0.04em;
  color: #fff0d3;
}

.bridge-ai__identity span {
  display: block;
  margin-top: 0.18rem;
  font-size: 0.71rem;
  letter-spacing: 0.08em;
  color: var(--bridge-ai-muted);
}

.bridge-ai__toolbar {
  display: grid;
  gap: 0.62rem;
  padding: 0.76rem 1rem 0.82rem;
  border-bottom: 1px solid rgba(239, 224, 198, 0.1);
}

.bridge-ai__modes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.38rem;
}

.bridge-ai__mode-btn {
  min-height: 2rem;
  border: 1px solid rgba(239, 224, 198, 0.16);
  border-radius: 999px;
  padding: 0.4rem 0.64rem;
  color: rgba(249, 241, 224, 0.9);
  background: rgba(255, 248, 238, 0.05);
  font-size: 0.78rem;
  transition:
    transform var(--dur-fast) var(--easing),
    border-color var(--dur-fast) var(--easing),
    background var(--dur-fast) var(--easing),
    color var(--dur-fast) var(--easing);
}

.bridge-ai__mode-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(214, 161, 92, 0.4);
}

.bridge-ai__mode-btn.is-active {
  border-color: rgba(214, 161, 92, 0.54);
  background:
    linear-gradient(135deg, rgba(214, 161, 92, 0.18), rgba(142, 199, 202, 0.12)),
    rgba(255, 248, 238, 0.09);
  color: #fff3db;
}

.bridge-ai__status {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}

.bridge-ai__status-pill {
  flex: 0 0 auto;
  border: 1px solid rgba(214, 161, 92, 0.28);
  border-radius: 999px;
  padding: 0.24rem 0.58rem;
  color: #f9ddb0;
  background: rgba(214, 161, 92, 0.08);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
}

.bridge-ai__status-text {
  min-width: 0;
  color: rgba(225, 213, 194, 0.74);
  font-size: 0.72rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bridge-ai__icon-btn {
  border-color: rgba(239, 224, 198, 0.16);
  background: rgba(255, 248, 238, 0.05);
}

.bridge-ai__messages {
  gap: 0.88rem;
  padding: 1rem;
}

.bridge-ai__message--assistant {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: start;
  gap: 0.6rem;
}

.bridge-ai__message--user {
  justify-content: flex-end;
}

.bridge-ai__avatar {
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(214, 161, 92, 0.32);
  border-radius: 0.7rem;
  display: grid;
  place-items: center;
  color: #fff0d2;
  background:
    linear-gradient(145deg, rgba(214, 161, 92, 0.22), rgba(142, 199, 202, 0.12)),
    rgba(255, 248, 238, 0.06);
  font-family: "STKaiti", "Kaiti SC", "KaiTi", "Noto Serif SC", serif;
  font-size: 0.92rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.bridge-ai__bubble {
  max-width: 100%;
  border-color: rgba(239, 224, 198, 0.12);
  border-radius: 1rem;
  padding: 0.78rem 0.84rem;
  background: rgba(255, 248, 238, 0.05);
}

.bridge-ai__message--assistant .bridge-ai__bubble {
  border-top-left-radius: 0.34rem;
  background:
    linear-gradient(140deg, rgba(214, 161, 92, 0.15), rgba(142, 199, 202, 0.08)),
    rgba(255, 248, 238, 0.045);
}

.bridge-ai__message--user .bridge-ai__bubble {
  max-width: 86%;
  border-top-right-radius: 0.34rem;
  border-color: rgba(142, 199, 202, 0.24);
  background: rgba(68, 119, 128, 0.24);
}

.bridge-ai__bubble-head {
  display: flex;
  align-items: baseline;
  gap: 0.52rem;
  margin-bottom: 0.48rem;
}

.bridge-ai__bubble-head strong {
  font-size: 0.86rem;
  font-weight: 700;
  color: #fff1d5;
}

.bridge-ai__bubble-head span {
  color: rgba(221, 210, 190, 0.68);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
}

.bridge-ai__bubble-text {
  color: rgba(248, 241, 229, 0.95);
  font-size: 0.88rem;
  line-height: 1.68;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.bridge-ai__chips,
.bridge-ai__sources {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
  margin-top: 0.66rem;
}

.bridge-ai__chip,
.bridge-ai__source {
  display: inline-flex;
  align-items: center;
  min-height: 1.64rem;
  border-radius: 999px;
  padding: 0.2rem 0.58rem;
  border: 1px solid rgba(239, 224, 198, 0.14);
  color: rgba(238, 228, 209, 0.82);
  background: rgba(255, 248, 238, 0.04);
  font-size: 0.68rem;
  line-height: 1.2;
  text-decoration: none;
}

.bridge-ai__source:hover {
  border-color: rgba(214, 161, 92, 0.36);
  color: #fff0d3;
}

.bridge-ai__suggestions {
  gap: 0.48rem;
  padding: 0 1rem 0.82rem;
}

.bridge-ai__suggestions button {
  border-radius: 999px;
  padding: 0.46rem 0.72rem;
  font-size: 0.75rem;
  color: rgba(244, 235, 220, 0.88);
  background: rgba(255, 248, 238, 0.05);
}

.bridge-ai__form {
  grid-template-columns: minmax(0, 1fr) 2.8rem;
  padding: 0.86rem 1rem 1rem;
  background: rgba(0, 0, 0, 0.14);
}

.bridge-ai__input {
  border-color: rgba(239, 224, 198, 0.16);
  padding-inline: 0.94rem;
  background: rgba(255, 248, 238, 0.06);
}

.bridge-ai__send {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 0.9rem;
  font-size: 0.82rem;
  background:
    linear-gradient(145deg, rgba(214, 161, 92, 0.3), rgba(142, 199, 202, 0.16)),
    rgba(255, 248, 238, 0.08);
}

.bridge-ai__bubble--typing {
  padding-block: 0.72rem 0.82rem;
}

.bridge-ai__typing {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
}

.bridge-ai__typing span {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: rgba(255, 239, 205, 0.82);
  animation: bridge-ai-dot 1.05s ease-in-out infinite;
}

.bridge-ai__typing span:nth-child(2) {
  animation-delay: 0.14s;
}

.bridge-ai__typing span:nth-child(3) {
  animation-delay: 0.28s;
}

@keyframes bridge-ai-dot {
  0%,
  80%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  40% {
    transform: translateY(-0.2rem);
    opacity: 1;
  }
}

@media (max-width: 560px) {
  .bridge-ai__fab {
    width: 4.2rem;
    height: 4.68rem;
    border-radius: 1.3rem;
  }

  .bridge-ai__fab-copy strong {
    font-size: 0.82rem;
  }

  .bridge-ai__fab-copy em {
    font-size: 0.56rem;
  }

  .bridge-ai__panel {
    width: calc(100vw - 1.1rem);
    height: min(34rem, calc(100vh - 1.1rem));
    border-radius: 1rem;
  }

  .bridge-ai__toolbar,
  .bridge-ai__messages,
  .bridge-ai__form {
    padding-inline: 0.84rem;
  }

  .bridge-ai__suggestions {
    padding-inline: 0.84rem;
  }

  .bridge-ai__message--assistant {
    grid-template-columns: 1.8rem minmax(0, 1fr);
    gap: 0.5rem;
  }

  .bridge-ai__avatar {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 0.64rem;
  }

  .bridge-ai__bubble-text {
    font-size: 0.84rem;
  }
}

:root {
  --paper: #f5ead6;
  --paper-light: #fff8ea;
  --paper-deep: #e6d2aa;
  --ink: #21160f;
  --ink-soft: #6b5943;
  --ink-light: rgba(33, 22, 15, 0.12);
  --cinnabar: #b9472a;
  --cinnabar-deep: #8f2e1d;
  --cinnabar-soft: rgba(185, 71, 42, 0.14);
  --jade: #2f6f61;
  --water: #6d8f96;
  --stone: #9c8d75;
  --shadow-warm: rgba(63, 43, 24, 0.24);
}

.bridge-ai {
  position: fixed;
  inset: 0;
  z-index: 110;
  pointer-events: none;
  color: var(--ink);
  font-family: "STKaiti", "KaiTi", "Kaiti SC", "Songti SC", "Noto Serif SC", serif;
}

.bridge-ai__fab,
.bridge-ai__panel {
  pointer-events: auto;
}

.bridge-ai__fab {
  position: fixed;
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff3df;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.22), transparent 28%),
    var(--cinnabar);
  box-shadow:
    0 12px 30px rgba(95, 34, 20, 0.34),
    0 0 0 6px rgba(185, 71, 42, 0.12);
  cursor: grab;
  touch-action: none;
  transform-origin: center;
  transition:
    transform var(--dur-fast) var(--easing),
    box-shadow var(--dur-fast) var(--easing),
    filter var(--dur-fast) var(--easing);
}

.bridge-ai__fab:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow:
    0 18px 42px rgba(95, 34, 20, 0.4),
    0 0 0 9px rgba(185, 71, 42, 0.14),
    0 0 34px rgba(47, 111, 97, 0.18);
}

.bridge-ai__fab:active {
  cursor: grabbing;
  transform: translateY(-1px) scale(0.98);
}

.bridge-ai__fab-logo {
  position: relative;
  width: 60px;
  height: 60px;
  z-index: 1;
  filter: drop-shadow(0 8px 16px rgba(95, 34, 20, 0.24));
}

.bridge-ai__seal-bg {
  fill: rgba(185, 71, 42, 0.96);
}

.bridge-ai__seal-rough {
  fill: rgba(143, 46, 29, 0.22);
  stroke: rgba(255, 243, 223, 0.34);
  stroke-width: 1.4;
}

.bridge-ai__bridge-line,
.bridge-ai__water-line {
  fill: none;
  stroke: #fff3df;
  stroke-width: 4;
  stroke-linecap: round;
}

.bridge-ai__bridge-line--thin,
.bridge-ai__water-line {
  stroke-width: 3;
  opacity: 0.76;
}

.bridge-ai__ask-text {
  fill: #fff3df;
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: 24px;
  font-weight: 700;
}

.bridge-ai__fab-tooltip {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  width: 210px;
  padding: 10px 12px;
  border: 1px solid rgba(33, 22, 15, 0.14);
  border-radius: 8px;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.12)),
    var(--paper-light);
  box-shadow: 0 14px 34px rgba(63, 43, 24, 0.2);
  opacity: 0;
  transform: translateY(6px);
  visibility: hidden;
  transition:
    opacity var(--dur-fast) var(--easing),
    transform var(--dur-fast) var(--easing),
    visibility var(--dur-fast) var(--easing);
}

.bridge-ai__fab:hover .bridge-ai__fab-tooltip {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.bridge-ai__fab-tooltip strong,
.bridge-ai__fab-tooltip span {
  display: block;
  letter-spacing: 0;
}

.bridge-ai__fab-tooltip strong {
  margin-bottom: 3px;
  color: var(--cinnabar-deep);
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: 1rem;
}

.bridge-ai__fab-tooltip span {
  color: var(--ink-soft);
  font-size: 0.78rem;
  line-height: 1.45;
}

.bridge-ai__panel {
  position: fixed;
  right: auto;
  bottom: auto;
  left: auto;
  top: auto;
  width: min(620px, calc(100vw - 32px));
  height: min(760px, calc(100vh - 48px));
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid rgba(33, 22, 15, 0.18);
  border-radius: 18px;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 10%, rgba(47, 111, 97, 0.12), transparent 28%),
    radial-gradient(circle at 88% 20%, rgba(185, 71, 42, 0.1), transparent 24%),
    radial-gradient(circle at 50% 96%, rgba(109, 143, 150, 0.12), transparent 36%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.36), transparent 40%),
    var(--paper);
  box-shadow:
    0 22px 70px rgba(63, 43, 24, 0.3),
    inset 0 0 0 1px rgba(255, 255, 255, 0.32);
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  visibility: hidden;
  transition:
    opacity var(--dur-fast) var(--easing),
    transform var(--dur-fast) var(--easing),
    visibility var(--dur-fast) var(--easing);
}

.bridge-ai__panel::before {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 76px;
  height: 120px;
  opacity: 0.1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center bottom, transparent 42%, rgba(33, 22, 15, 0.8) 43%, rgba(33, 22, 15, 0.8) 45%, transparent 46%),
    linear-gradient(90deg, transparent, rgba(33, 22, 15, 0.36), transparent);
}

.bridge-ai__panel.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
}

.bridge-ai__header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid rgba(33, 22, 15, 0.12);
  background:
    linear-gradient(90deg, rgba(185, 71, 42, 0.08), transparent 46%),
    rgba(255, 248, 234, 0.42);
}

.bridge-ai__identity strong,
.bridge-ai__identity span {
  display: block;
  letter-spacing: 0;
}

.bridge-ai__identity strong {
  color: var(--ink);
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: 1.28rem;
  line-height: 1.2;
}

.bridge-ai__identity span {
  margin-top: 4px;
  color: var(--ink-soft);
  font-size: 0.82rem;
  line-height: 1.35;
}

.bridge-ai__header-side {
  display: grid;
  justify-items: end;
  gap: 7px;
  flex: 0 0 auto;
}

.bridge-ai__mode-status {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(47, 111, 97, 0.24);
  border-radius: 999px;
  padding: 3px 10px;
  color: #123d35;
  background: rgba(47, 111, 97, 0.2);
  font-weight: 700;
  font-size: 0.72rem;
  line-height: 1;
}

.bridge-ai__header-actions {
  display: flex;
  gap: 7px;
}

.bridge-ai__icon-btn {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(33, 22, 15, 0.18);
  border-radius: 50%;
  padding: 0;
  color: var(--ink);
  background: rgba(255, 248, 234, 0.58);
  font-size: 0.82rem;
  line-height: 1;
  transition:
    transform var(--dur-fast) var(--easing),
    background var(--dur-fast) var(--easing),
    border-color var(--dur-fast) var(--easing);
}

.bridge-ai__icon-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(185, 71, 42, 0.38);
  background: rgba(185, 71, 42, 0.12);
}

.bridge-ai__context-line {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 18px;
  border-bottom: 1px solid rgba(33, 22, 15, 0.08);
  color: var(--ink-soft);
  font-size: 0.8rem;
}

.bridge-ai__context-line span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bridge-ai__topics {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 8px;
  padding: 12px 18px 8px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.bridge-ai__topic,
.bridge-ai__suggestions button,
.bridge-ai__message-actions button {
  border: 1px solid rgba(33, 22, 15, 0.14);
  color: var(--ink);
  background: rgba(255, 248, 234, 0.48);
  transition:
    transform var(--dur-fast) var(--easing),
    border-color var(--dur-fast) var(--easing),
    background var(--dur-fast) var(--easing),
    color var(--dur-fast) var(--easing);
}

.bridge-ai__topic {
  flex: 0 0 auto;
  min-height: 34px;
  border-radius: 8px 8px 4px 4px;
  padding: 7px 11px;
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: 0.94rem;
  line-height: 1;
  white-space: nowrap;
}

.bridge-ai__topic:hover,
.bridge-ai__suggestions button:hover,
.bridge-ai__message-actions button:hover {
  transform: translateY(-1px);
  border-color: rgba(185, 71, 42, 0.34);
  background: rgba(185, 71, 42, 0.12);
}

.bridge-ai__topic.is-active {
  border-color: rgba(185, 71, 42, 0.42);
  color: var(--cinnabar-deep);
  background:
    linear-gradient(180deg, rgba(185, 71, 42, 0.18), rgba(185, 71, 42, 0.08)),
    rgba(255, 248, 234, 0.72);
  box-shadow: inset 0 -2px 0 rgba(185, 71, 42, 0.32);
}

.bridge-ai__suggestions {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 8px;
  padding: 0 18px 12px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.bridge-ai__suggestions button {
  flex: 0 0 auto;
  min-height: 32px;
  border-radius: 999px;
  padding: 6px 11px;
  color: var(--ink-soft);
  font-size: 0.82rem;
  line-height: 1;
  white-space: nowrap;
}

.bridge-ai__messages {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 0;
  padding: 16px 18px;
  overflow: auto;
  scrollbar-width: thin;
}

.bridge-ai__welcome {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(33, 22, 15, 0.14);
  border-left: 4px solid rgba(47, 111, 97, 0.54);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.1)),
    var(--paper-light);
  box-shadow: 0 12px 30px rgba(63, 43, 24, 0.12);
}

.bridge-ai__welcome-seal {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff3df;
  background: var(--cinnabar);
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: 1.46rem;
  box-shadow: 0 8px 20px rgba(185, 71, 42, 0.22);
}

.bridge-ai__welcome h3 {
  margin: 0 0 4px;
  color: var(--ink);
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: 1.24rem;
  line-height: 1.2;
}

.bridge-ai__welcome p,
.bridge-ai__welcome ul {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.86rem;
  line-height: 1.7;
}

.bridge-ai__welcome ul {
  margin-top: 8px;
  padding-left: 1.1rem;
}

.bridge-ai__message {
  display: flex;
}

.bridge-ai__message--user {
  justify-content: flex-end;
}

.bridge-ai__message--assistant {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}

.bridge-ai__avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(47, 111, 97, 0.32);
  border-radius: 9px;
  color: var(--jade);
  background: rgba(47, 111, 97, 0.1);
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
}

.bridge-ai__bubble {
  max-width: 100%;
  border: 1px solid rgba(33, 22, 15, 0.16);
  padding: 13px 15px;
  color: var(--ink);
  font-size: 0.96rem;
  line-height: 1.68;
  overflow-wrap: anywhere;
}

.bridge-ai__message--user .bridge-ai__bubble {
  max-width: 82%;
  border-color: rgba(185, 71, 42, 0.32);
  border-radius: 14px 14px 4px 14px;
  color: var(--ink);
  background: linear-gradient(135deg, rgba(185, 71, 42, 0.18), rgba(185, 71, 42, 0.08));
  box-shadow: 0 8px 24px rgba(185, 71, 42, 0.1);
}

.bridge-ai__message--assistant .bridge-ai__bubble {
  border-left: 4px solid rgba(47, 111, 97, 0.55);
  border-radius: 16px 16px 16px 5px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.1)),
    var(--paper-light);
  box-shadow: 0 12px 30px rgba(63, 43, 24, 0.14);
}

.bridge-ai__message-label {
  display: inline-flex;
  margin-bottom: 5px;
  color: var(--cinnabar-deep);
  font-size: 0.72rem;
  line-height: 1;
}

.bridge-ai__bubble-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}

.bridge-ai__bubble-head strong {
  color: var(--ink);
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: 1rem;
}

.bridge-ai__bubble-head span {
  color: var(--jade);
  font-size: 0.72rem;
}

.bridge-ai__bubble-text {
  color: var(--ink);
  font-size: 0.96rem;
  line-height: 1.72;
}

.bridge-ai__markdown p {
  margin: 0 0 8px;
}

.bridge-ai__markdown p:last-child {
  margin-bottom: 0;
}

.bridge-ai__markdown ul {
  margin: 0 0 8px;
  padding-left: 1.1rem;
}

.bridge-ai__markdown li {
  margin: 3px 0;
}

.bridge-ai__chips,
.bridge-ai__sources,
.bridge-ai__message-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.bridge-ai__chip,
.bridge-ai__source {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid rgba(33, 22, 15, 0.12);
  border-radius: 999px;
  padding: 3px 9px;
  color: var(--ink-soft);
  background: rgba(245, 234, 214, 0.64);
  font-size: 0.7rem;
  line-height: 1.2;
  text-decoration: none;
}

.bridge-ai__source:hover {
  border-color: rgba(47, 111, 97, 0.34);
  color: var(--jade);
}

.bridge-ai__message-actions {
  padding-top: 3px;
}

.bridge-ai__message-actions button {
  min-height: 28px;
  border-radius: 999px;
  padding: 5px 10px;
  color: var(--ink-soft);
  font-size: 0.72rem;
  line-height: 1;
}

.bridge-ai__bubble--typing {
  min-width: 190px;
}

.bridge-ai__typing {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 18px;
}

.bridge-ai__typing span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(33, 22, 15, 0.32);
  animation: bridge-ai-ink-dot 1.15s ease-in-out infinite;
}

.bridge-ai__typing span:nth-child(2) {
  animation-delay: 0.16s;
}

.bridge-ai__typing span:nth-child(3) {
  animation-delay: 0.32s;
}

@keyframes bridge-ai-ink-dot {
  0%,
  80%,
  100% {
    transform: scale(0.78);
    opacity: 0.3;
  }

  40% {
    transform: scale(1.35);
    opacity: 0.9;
  }
}

.bridge-ai__form {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 74px;
  gap: 10px;
  padding: 14px 18px 16px;
  border-top: 1px solid rgba(33, 22, 15, 0.12);
  background: rgba(255, 248, 234, 0.5);
}

.bridge-ai__input {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(33, 22, 15, 0.18);
  border-radius: 12px;
  padding: 11px 13px;
  outline: none;
  color: var(--ink);
  background: rgba(255, 248, 234, 0.78);
  font-size: 0.96rem;
  line-height: 1.3;
}

.bridge-ai__input::placeholder {
  color: rgba(107, 89, 67, 0.68);
}

.bridge-ai__input:focus {
  border-color: rgba(47, 111, 97, 0.44);
  box-shadow: 0 0 0 3px rgba(47, 111, 97, 0.12);
}

.bridge-ai__send {
  width: 74px;
  min-width: 74px;
  height: 44px;
  border: 1px solid rgba(143, 46, 29, 0.22);
  border-radius: 12px;
  padding: 0;
  color: #fff8ea;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.16), transparent 28%),
    linear-gradient(180deg, var(--cinnabar), var(--cinnabar-deep));
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: 1rem;
  box-shadow: 0 8px 18px rgba(185, 71, 42, 0.22);
  transition:
    transform var(--dur-fast) var(--easing),
    box-shadow var(--dur-fast) var(--easing),
    filter var(--dur-fast) var(--easing);
}

.bridge-ai__send:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 11px 24px rgba(185, 71, 42, 0.28);
}

@media (max-width: 700px) {
  .bridge-ai__panel {
    right: 12px;
    bottom: 88px;
    width: calc(100vw - 24px);
    height: min(680px, calc(100vh - 104px));
    border-radius: 14px;
  }

  .bridge-ai__header {
    align-items: flex-start;
    padding: 14px;
  }

  .bridge-ai__identity strong {
    font-size: 1.08rem;
  }

  .bridge-ai__identity span {
    font-size: 0.72rem;
  }

  .bridge-ai__context-line,
  .bridge-ai__topics,
  .bridge-ai__suggestions,
  .bridge-ai__messages,
  .bridge-ai__form {
    padding-inline: 14px;
  }

  .bridge-ai__welcome {
    grid-template-columns: 1fr;
  }

  .bridge-ai__message--assistant {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 8px;
  }

  .bridge-ai__avatar {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    font-size: 0.8rem;
  }

  .bridge-ai__message--user .bridge-ai__bubble {
    max-width: 90%;
  }

  .bridge-ai__form {
    grid-template-columns: minmax(0, 1fr) 66px;
    gap: 8px;
  }

  .bridge-ai__send {
    width: 66px;
    min-width: 66px;
  }
}