@import url("/about-preloader.css?v=202608010001");

/* About page only: keep the shared EndSection DOM/runtime contract intact. */
body:has(#about) #end-section {
  isolation: isolate;
  overflow: hidden;
  color: #fff;
}

body:has(#about) #end-section #end-section-outer {
  overflow: hidden;
  background: transparent;
}

/*
 * 这里原本铺了两层装饰：
 *   ::before  #2e39e8 的竖向渐变 + backdrop-filter: blur(3.6px) saturate(.82)
 *   ::after   紫 rgba(128,90,247) 与青 rgba(116,214,255) 的径向光斑，18s 往复漂移
 * 两层都已去掉，理由是它们制造了本不存在的接缝：
 *
 * 关于页的画布底色从能力区一路保持 --color-blue #1a2ffb 到页脚才转白
 * （AboutPage.update 里 bgColor 的 lerp），本来上下就是同一个蓝。
 * 而 ::before 又在这一屏上盖了一层 #2e39e8——实测屏幕下缘由 rgb(26,47,251)
 * 在约 280px 内切成 rgb(46,57,232)，"衔接不自然"就是这么来的。
 * 去掉后这一屏透出画布本身的蓝，与上面完全同色、零色阶。
 *
 * 紫和青也不在本站调色板里（只有黑 #000、白 #fff、米白 #F3F4F9、蓝 #1a2ffb），
 * 顺带一并清掉。backdrop-filter 原本是用来柔化背后的点阵小球的，
 * 小球已由 drop-about-end-visual 补丁关闭，它也就没有作用对象了。
 */

body:has(#about) #end-section #end-section-inner {
  z-index: 1;
  overflow: hidden;
}

body:has(#about) #end-section #end-section-inner::before {
  display: none;
}

body:has(#about) #end-section #end-section-content {
  z-index: 2;
  top: 45%;
  left: 50%;
  width: min(88vw, 54rem);
  text-align: center;
  transform: translate(-50%, -50%) !important;
}

body:has(#about) #end-section #end-section-content-crosses,
body:has(#about) #end-section #end-section-title-top-decoration,
body:has(#about) #end-section #end-section-title-bottom-left-decoration,
body:has(#about) #end-section #end-section-title-bottom-right-decoration {
  display: none !important;
}

body:has(#about) #end-section #end-section-subtitle {
  color: rgba(255, 255, 255, 0.7);
  font-family:
    Satoshi, "Microsoft YaHei", "PingFang SC", "Noto Sans SC", Arial,
    sans-serif;
  font-size: clamp(13px, 1.2vw, 16px);
  font-weight: 400;
  letter-spacing: 0.01em;
}

body:has(#about) #end-section #end-section-subtitle-text > div {
  overflow: visible !important;
}

body:has(#about) #end-section #end-section-title {
  --font-size: clamp(76px, 10vw, 132px);

  width: fit-content;
  margin: 0.22em auto 0;
  color: #fff;
  font-weight: 500;
  line-height: 0.86;
  letter-spacing: -0.055em;
}

body:has(#about) #end-section #end-section-title-link {
  position: relative;
  display: inline-block;
  cursor: pointer;
  pointer-events: auto;
  transition:
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
    text-shadow 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

body:has(#about) #end-section .end-section-title-link-line,
body:has(#about) #end-section .end-section-title-link-word {
  height: auto !important;
  overflow: visible;
}

body:has(#about)
  #end-section
  .end-section-title-link-word
  .char-wrapper {
  top: 0;
  height: 1em;
  transform: none !important;
}

body:has(#about)
  #end-section
  .end-section-title-link-word
  .char-wrapper
  .char:first-child {
  display: none !important;
}

body:has(#about)
  #end-section
  .end-section-title-link-word
  .char-wrapper
  .char:last-child {
  float: none;
  transform: none !important;
}

body:has(#about) #end-section #end-section-title-link::after {
  position: absolute;
  right: 0.04em;
  bottom: -0.14em;
  left: 0.04em;
  height: 2px;
  content: "";
  background: rgba(255, 255, 255, 0.9);
  transform: scaleX(0.24);
  transform-origin: left center;
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

body:has(#about) #end-section #end-section-title-link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.86);
  outline-offset: 0.12em;
}

body:has(#about) #end-section #end-bottom {
  z-index: 2;
  width: auto;
  min-width: 0;
  height: auto;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  box-shadow: none;
  backdrop-filter: none;
}

body:has(#about) #end-section #end-bottom-text {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 12px;
  letter-spacing: 0.06em;
}

body:has(#about) #end-section .end-bottom-arrow {
  opacity: 0.72;
  filter: invert(1);
}

@media (hover: hover) and (pointer: fine) {
  body:has(#about) #end-section #end-section-title-link:hover {
    text-shadow: 0 0.16em 0.56em rgba(7, 14, 94, 0.16);
    transform: translate3d(0.06em, 0, 0);
  }

  body:has(#about) #end-section #end-section-title-link:hover::after {
    transform: scaleX(1);
  }
}

@media (max-width: 812px) {
  body:has(#about) #end-section #end-section-content {
    top: 42%;
    width: calc(100vw - 48px);
  }

  body:has(#about) #end-section #end-section-title {
    --font-size: clamp(58px, 17vw, 88px);
  }

  body:has(#about) #end-section #end-section-subtitle {
    width: 100%;
    max-width: 100%;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:has(#about) #end-section #end-section-title-link,
  body:has(#about) #end-section #end-section-title-link::after {
    transition-duration: 0.01ms !important;
  }
}