/* 卡片局部排版沿用测试页的系统字体；不覆盖正式页面主题。 */
#tunnelHero {
  --text-dark: #2c2420;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", sans-serif;
  font-size: 16px;
  line-height: normal;
  color: #2c2420;
  -webkit-font-smoothing: antialiased;
}
#tunnelHero *, #tunnelHero *::before, #tunnelHero *::after { box-sizing: border-box; }
#tunnelHero p { margin: 0; padding: 0; }
#tunnelHero [hidden] { display: none !important; }
/* Hero 底部和留言顶部都渐变到白色，让两段边界连续。 */
#hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 10vh;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff);
  z-index: 0;
  pointer-events: none;
}
/* 保留留言主体的冰蓝光感，底部继续自然衔接 About。 */
#tunnelHero #sceneBackdrop {
  background:
    radial-gradient(ellipse at 18% 32%, rgba(191, 219, 254, .42), transparent 62%),
    radial-gradient(ellipse at 84% 58%, rgba(227, 244, 247, .75), transparent 58%),
    linear-gradient(180deg, #f6fbfd 0%, #f1f8fc 50%, #fff 100%);
}
#tunnelHero #sceneBackdrop::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 10vh;
  background: linear-gradient(180deg, #fff, rgba(255, 255, 255, 0));
  pointer-events: none;
}
#tunnelHero #sceneBackdrop::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 10vh;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff);
  pointer-events: none;
}
#tunnelHero #cardsTransition {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
#tunnelHero #scrollIndicator { color: #4a6478; }
#tunnelHero #scrollIndicator > div { border-color: rgba(107, 139, 163, .65); }
#tunnelHero #scrollIndicator > div::after { background-color: #8ca7bc; }
#tunnelHero #reviewsLoadMessage {
  color: #4a5059;
  background-color: #f5fafc;
  border-color: #d9e8ef;
}
#tunnelHero #reviewsLoadButton { border-color: #d9e8ef; }
@keyframes qiqiWheelRoll {
  0% { top: 5px; opacity: 1; }
  100% { top: 16px; opacity: 0; }
}
#tunnelHero .review-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--review-card-width, 300px) * var(--wave-width-scale, 1));
  height: calc(var(--review-card-height, 170px) * var(--wave-height-scale, 1));
  padding: var(--review-card-pad-y, 16px) var(--review-card-pad-x, 20px);
  border-radius: var(--review-card-radius, 20px);
  display: flex;
  flex-direction: column;
  background: white;
  border: 1px solid rgba(74, 56, 36, .08);
  box-shadow: 0 10px 28px rgba(63, 48, 31, var(--review-shadow-alpha, .12));
  transform-origin: center;
}
#tunnelHero .review-first-wave { --review-shadow-alpha: 0; }
#tunnelHero .review-header {
  display: flex;
  align-items: center;
  gap: var(--review-card-gap, 8px);
  margin-bottom: var(--review-card-gap, 8px);
  flex-shrink: 0;
}
#tunnelHero .review-badge {
  font-size: var(--review-badge-font, 11px);
  font-weight: 700;
  padding: var(--review-badge-pad-y, 3px) var(--review-badge-pad-x, 8px);
  border-radius: 6px;
  color: white;
  flex-shrink: 0;
  white-space: nowrap;
  line-height: 1.2;
}
#tunnelHero .review-platform-xhs { background: #ff2442; }
#tunnelHero .review-platform-ins { background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); }
#tunnelHero .review-platform-tt { background: black; border: 1px solid rgba(255, 255, 255, .25); }
#tunnelHero .review-user {
  font-size: var(--review-user-font, 12px);
  font-weight: 600;
  color: #666;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#tunnelHero .card-text {
  font-size: calc(var(--review-text-font, 13.5px) * var(--wave-font-scale, 1));
  line-height: 1.45;
  color: #242424;
  font-weight: 500;
  flex: 1 1 0%;
  min-height: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--review-text-lines, 4);
}
#tunnelHero .review-footer {
  margin-top: var(--review-card-gap, 8px);
  font-size: var(--review-footer-font, 11px);
  line-height: 1.25;
  color: #999;
  display: flex;
  justify-content: space-between;
  gap: 6px;
  flex-shrink: 0;
  white-space: nowrap;
}
#tunnelHero .review-story { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#tunnelHero .review-link { flex-shrink: 0; text-decoration: none; color: inherit; outline-offset: 3px; }
#tunnelHero .review-link-enabled { pointer-events: auto; cursor: pointer; }
#tunnelHero .review-link-enabled:hover { color: #3b88d8; }
#tunnelHero .review-link-enabled:focus-visible { outline: 1px solid #3b88d8; }
#tunnelHero .review-link-disabled { pointer-events: none; }