html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

#preloader-percent-digits {
  display: block !important;
  visibility: hidden !important;
}

html.huiling-preloader-active #transition-overlay,
html.huiling-preloader-complete #transition-overlay {
  visibility: hidden !important;
}

#preloader.huiling-preloader-running {
  display: block !important;
  background: #000 !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto;
}

.huiling-preloader {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #000;
  color: #fff;
  isolation: isolate;
  opacity: 1;
  transform: translateZ(0);
}

html.huiling-reference-home #preloader.huiling-preloader-running,
html.huiling-reference-home .huiling-preloader {
  background: transparent !important;
}

html.huiling-reference-home .huiling-preloader::before {
  --huiling-aperture-start: clamp(47.56px, 3.772vw, 55.76px);
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  background: #000;
  transform: translateZ(0);
}

html.huiling-reference-home .huiling-preloader__percent,
html.huiling-reference-home .huiling-preloader__mark {
  z-index: 1;
}

.huiling-preloader__percent,
.huiling-preloader__mark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  will-change: opacity, transform, clip-path;
}

.huiling-preloader__percent {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Satoshi, Arial, sans-serif;
  font-size: clamp(2.75rem, 3.65vw, 3.35rem);
  font-weight: 400;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "kern" 1;
  line-height: 0.9;
  letter-spacing: 0;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  white-space: nowrap;
}

.huiling-preloader__value {
  display: inline-block;
}

.huiling-preloader__mark {
  width: clamp(58px, 4.6vw, 68px);
  aspect-ratio: 1;
  opacity: 0;
  clip-path: inset(50% 0 50% 0);
  transform: translate(-50%, -50%) scale(0.94);
}

.huiling-preloader__mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

.huiling-preloader.is-morphing .huiling-preloader__percent {
  animation: huiling-percent-out 260ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.huiling-preloader.is-morphing .huiling-preloader__mark {
  animation: huiling-mark-in 340ms 180ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.huiling-preloader.is-anticipating .huiling-preloader__mark {
  animation: huiling-mark-anticipate 140ms cubic-bezier(0.55, 0, 1, 0.45) forwards;
}

.huiling-preloader.is-exiting {
  animation: huiling-preloader-out 720ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

.huiling-preloader.is-exiting .huiling-preloader__mark {
  animation: huiling-mark-expand 720ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

html.huiling-reference-home .huiling-preloader.is-exiting {
  animation: none;
}

html.huiling-reference-home .huiling-preloader.is-exiting::before {
  -webkit-mask-image:
    linear-gradient(#fff 0 0),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='white' d='M8 8h13v18h22V8h13v48H43V38H21v18H8V8Z'/%3E%3C/svg%3E");
  -webkit-mask-position: center, center;
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-size: 100% 100%, clamp(58px, 4.6vw, 68px);
  -webkit-mask-composite: xor;
  mask-image:
    linear-gradient(#fff 0 0),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='white' d='M8 8h13v18h22V8h13v48H43V38H21v18H8V8Z'/%3E%3C/svg%3E");
  mask-position: center, center;
  mask-repeat: no-repeat, no-repeat;
  mask-size: 100% 100%, clamp(58px, 4.6vw, 68px);
  mask-composite: exclude;
  animation: huiling-preloader-aperture 720ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

html.huiling-reference-home
  .huiling-preloader.is-exiting
  .huiling-preloader__mark {
  opacity: 0;
  animation: none;
}

html.huiling-reference-home
  .huiling-preloader.is-exiting
  .huiling-preloader__percent {
  opacity: 0 !important;
  animation: none;
}

@keyframes huiling-percent-out {
  from {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.96);
  }
}

@keyframes huiling-mark-in {
  from {
    opacity: 0;
    clip-path: inset(50% 0 50% 0);
    transform: translate(-50%, -50%) scale(0.94);
  }

  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes huiling-mark-expand {
  from {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translate(-50%, -50%) scale(0.82);
  }

  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translate(-50%, -50%) scale(30);
  }
}

@keyframes huiling-mark-anticipate {
  from {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translate(-50%, -50%) scale(1);
  }

  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translate(-50%, -50%) scale(0.82);
  }
}

@keyframes huiling-preloader-out {
  0%,
  54% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes huiling-preloader-aperture {
  from {
    -webkit-mask-size: 100% 100%, var(--huiling-aperture-start);
    mask-size: 100% 100%, var(--huiling-aperture-start);
  }

  to {
    -webkit-mask-size: 100% 100%, 320vmax;
    mask-size: 100% 100%, 320vmax;
  }
}

@media (max-width: 812px) {
  .huiling-preloader__percent {
    font-size: clamp(2.45rem, 12vw, 3rem);
  }

  .huiling-preloader__mark {
    width: clamp(54px, 14vw, 62px);
  }

  html.huiling-reference-home .huiling-preloader.is-exiting::before {
    --huiling-aperture-start: clamp(44.28px, 11.48vw, 50.84px);
    -webkit-mask-size: 100% 100%, clamp(54px, 14vw, 62px);
    mask-size: 100% 100%, clamp(54px, 14vw, 62px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .huiling-preloader.is-morphing .huiling-preloader__percent {
    animation-duration: 120ms;
  }

  .huiling-preloader.is-morphing .huiling-preloader__mark {
    animation-delay: 80ms;
    animation-duration: 160ms;
  }

  .huiling-preloader.is-anticipating .huiling-preloader__mark {
    animation-duration: 60ms;
  }

  .huiling-preloader.is-exiting,
  .huiling-preloader.is-exiting .huiling-preloader__mark {
    animation-duration: 280ms;
  }

  html.huiling-reference-home .huiling-preloader.is-exiting::before {
    animation-duration: 280ms;
  }
}

#ui,
#page-container,
#page-container-inner {
  min-height: 100vh;
  max-width: 100vw;
  overflow-x: clip;
}

#projects-main-title {
  overflow: visible !important;
}

#projects-main-title {
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", Satoshi, Arial, sans-serif !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
  padding-top: 0.08em;
  padding-bottom: 0.04em;
  margin-top: -0.08em !important;
  margin-bottom: -0.04em !important;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

#projects-main-title-project-arrow path,
#projects .project-item-line-2-icon svg path {
  stroke: currentColor !important;
}

#project-details a,
#project-details button,
#project-details svg,
#project-details span,
#project-details p,
#project-details h1,
#project-details h2,
#project-details h3 {
  color: inherit;
}

html.huiling-project-detail #header-container {
  overflow: visible;
}

/* 案例页背景装饰。
 *
 * 原来这里有一株 3D 植物：assets/models/plant.buf 被载入
 * ProjectDetailsScreen，渲染进阴影缓冲、经三道模糊后，由片元着色器把剪影
 * 乘到页面底色上（color *= mix(1.0, u_plantsShadow, shadow)），并随鼠标摆动。
 * 效果是一整片棕榈叶阴影横在页面左半边——对 AI 交互公司既不贴题，还压在标题
 * 下方。plant.buf 已换成体积最小的模块几何体，在该相机缩放下投不出可见阴影，
 * 等于把它中和掉，同时省下约 150KB 传输。
 *
 * 替代方案放在 DOM 层，这样能精确控制位置与浓度：以左下角为圆心的同心弧，
 * 取「声音向外扩散」的意象，正对语音交互这条业务线。颜色用 color-mix 从
 * --project-details-text 派生，11 套配色自动适配，无需逐页配置；遮罩把它
 * 收在左下角，避开顶部标题与右侧配图。窄视口下版式改为纵向堆叠，
 * 左下角会被正文占用，直接隐藏。 */
html.huiling-project-detail #project-details::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: repeating-radial-gradient(
    circle at 4% 100%,
    transparent 0 108px,
    color-mix(in srgb, var(--project-details-text) 7%, transparent) 108px 110px
  );
  -webkit-mask-image: radial-gradient(
    circle at 4% 100%,
    #000 0%,
    #000 38%,
    transparent 70%
  );
  mask-image: radial-gradient(
    circle at 4% 100%,
    #000 0%,
    #000 38%,
    transparent 70%
  );
}

@media (max-width: 812px) {
  html.huiling-project-detail #project-details::before {
    display: none;
  }
}

/* 「项目边界」区块隐藏，不删节点。
 *
 * 它在 11 页里的内容全是「接口 · 部署 · 验收范围」，一字不差，对读者零信息量；
 * 逐页真正不同的是上方的「能力」列表。但这个节点不能从 DOM 里摘掉——旧运行时
 * 有 this.domSideListLinks = e.querySelector("#project-details-side-list-links")，
 * 摘掉后拿到 null，后续调用抛错会让整个详情页渲染失败（实测页面全黑并串到
 * 下一个项目）。因此保留节点供运行时持有，只在视觉上移除。 */
html.huiling-project-detail #project-details-side-list-links {
  display: none;
}

html.huiling-project-detail #header-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 7.2rem;
  height: 2.75rem;
  padding: 0 1.1rem;
  border: 1px solid rgba(10, 11, 13, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  color: #0a0b0d !important;
  box-shadow:
    0 12px 28px rgba(19, 24, 35, 0.08),
    0 2px 8px rgba(19, 24, 35, 0.045);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
}

/* 深色页曾在这里把胶囊翻成深底浅字（rgba(8,9,12,0.72)），结果深胶囊压在
   深色页面上几乎没有对比，logo 与背景糊成一片。首页的做法是无论背景明暗
   都用同一枚浅色胶囊 + 深色字 + 背景模糊，在明暗两种底上都立得住。
   这里对齐首页，不再按 tone 翻转配色，只在深色页把描边压暗一点，
   避免浅色描边在深底上显得发白。 */
html.huiling-project-detail[data-project-tone="dark"] #header-logo {
  border-color: rgba(10, 11, 13, 0.16);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.28),
    0 2px 8px rgba(0, 0, 0, 0.16);
}

html.huiling-project-detail #header-logo span {
  color: inherit !important;
  mix-blend-mode: normal !important;
  text-shadow: none !important;
}

html.huiling-project-detail #project-details-desc .project-details-value {
  color: var(--project-details-text) !important;
  opacity: 0.82;
}

html.huiling-project-detail .project-details-side-list-title {
  color: var(--project-details-text) !important;
  opacity: 0.62;
}

#project-details-launch-cta,
#project-details-launch-cta-mobile,
#project-details-launch-cta-text,
#project-details-launch-cta-mobile-text,
#project-details-launch-cta-arrow,
#project-details-launch-cta-mobile-arrow {
  color: var(--project-details-btn-text, #192743) !important;
}

#project-details-meta,
#project-details-left,
#project-details-right,
#project-details-launch-cta,
#project-details-launch-cta-mobile {
  pointer-events: auto !important;
}

#project-details-launch-cta,
#project-details-launch-cta-mobile {
  position: relative !important;
  z-index: 20;
}

#about-capability-title #about-capability-title-line-2 {
  left: 0 !important;
}

/* About only: keep the original scroll choreography, remove the decorative
   crosshair row, and pre-promote the small set of DOM layers the legacy
   runtime updates on every frame. The WebGL scene and its timing stay intact. */
#about-crosses {
  display: none !important;
}

#about-who-subsection-container,
#about-who-title-left-1,
#about-who-title-left-3,
#about-who-title-left-4 > span,
#about-who-title-right .about-who-title-right-text,
#about-who-desc-top > span,
#about-who-desc-bottom > span {
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

#about-who-title-left-1,
#about-who-title-left-3,
#about-who-title-left-4 > span,
#about-who-title-right .about-who-title-right-text,
#about-who-desc-top > span,
#about-who-desc-bottom > span {
  will-change: transform, opacity;
}

/* About copy fit: retain every runtime wrapper while giving the longer Chinese
   narrative a deliberate reading width and enough vertical breathing room. */
#about-who-desc-top {
  width: min(78%, 76rem) !important;
  line-height: 1.08;
  text-wrap: balance;
}

#about-who-desc-bottom {
  width: min(72%, 70rem);
  max-width: calc(100% - var(--base-padding-x) * 2);
  line-height: 1.08;
  text-wrap: balance;
}

#about-who-team-name,
#about-who-team-job {
  text-transform: none !important;
}

#about-who-team-name {
  white-space: nowrap !important;
}

#about-who-team-info {
  gap: clamp(28px, 3.2vh, 32px) !important;
}

#about-who-team-job {
  width: min(100%, 720px) !important;
  max-width: 720px !important;
  font-size: clamp(27px, 2.25vw, 34px) !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
  text-wrap: balance;
}

#about-who-team-title {
  /*
   * 这条是「团队简介」正文的实际位置控制点——它在 about/index.html 的内联样式之后，
   * 覆盖掉那边的 margin。改副标题间距时必须同步加大这里，否则副标题会贴到正文上
   * （tests/integration-shell.spec.ts 的 jobToDesc 断言就是守这个的）。
   */
  margin-bottom: clamp(268px, 32.5vh, 330px) !important;
}

#about-who-team-desc {
  width: min(100%, 760px) !important;
  max-width: 760px !important;
  font-size: clamp(17px, 1.15vw, 20px) !important;
  line-height: 1.72 !important;
}

#about-who-team-desc-text,
#about-capability-subheader-text {
  text-wrap: pretty;
}

#about-capability-subheader {
  width: min(30em, 36vw) !important;
  line-height: 1.5 !important;
  text-transform: none !important;
}

#about-capability .about-capability-list-item {
  line-height: 1.35;
  overflow-wrap: break-word;
}

/* About header CTA: keep the label on the control's optical center in both
   resting and highlighted states. The dot and arrow share one trailing slot,
   so swapping them never pushes the label sideways. */
@media (min-width: 813px) {
  html:has(#about) #header-right-talk-btn {
    width: 9.5em !important;
    padding: 0 !important;
  }

  html:has(#about) #header-right-talk-container {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }

  html:has(#about) #header-right-talk-btn-text {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate3d(-50%, -50%, 0) !important;
  }

  html:has(#about) #header-right-talk-btn-dots,
  html:has(#about) #header-right-talk-btn-arrow {
    position: absolute !important;
    top: 50% !important;
    right: 1.125em !important;
    left: auto !important;
    transform-origin: center !important;
  }

  html:has(#about) #header-right-talk-btn-dots {
    transform: translate3d(0, -50%, 0) scale(0.9) !important;
  }

  html:has(#about) #header-right-talk-btn-arrow {
    opacity: 0 !important;
    transform: translate3d(10px, -50%, 0) !important;
    transition:
      transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 180ms ease !important;
  }

  html:has(#about)
    #header-right-talk-btn:not(.--is-contact-active):hover
    #header-right-talk-btn-text,
  html:has(#about)
    #header-right-talk-btn.--is-contact-active
    #header-right-talk-btn-text {
    transform: translate3d(-50%, -50%, 0) !important;
  }

  html:has(#about)
    #header-right-talk-btn:not(.--is-contact-active):hover
    #header-right-talk-btn-dots,
  html:has(#about)
    #header-right-talk-btn.--is-contact-active
    #header-right-talk-btn-dots {
    transform: translate3d(0, -50%, 0) scale(0) !important;
  }

  html:has(#about)
    #header-right-talk-btn:not(.--is-contact-active):hover
    #header-right-talk-btn-arrow,
  html:has(#about)
    #header-right-talk-btn.--is-contact-active
    #header-right-talk-btn-arrow {
    opacity: 1 !important;
    transform: translate3d(0, -50%, 0) !important;
  }
}

@media (min-width: 813px) and (max-width: 1180px) {
  #about-who-team {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    column-gap: 48px !important;
    padding: clamp(120px, 18vh, 150px) 5vw 80px 13vw !important;
  }

  #about-who-team-left,
  #about-who-team-right {
    width: min(100%, 650px) !important;
  }

  #about-who-team-name {
    font-size: clamp(48px, 5.6vw, 62px) !important;
  }

  #about-who-team-job {
    max-width: 620px !important;
    font-size: clamp(23px, 2.6vw, 28px) !important;
  }

  #about-who-team-title {
    width: min(360px, 52vw) !important;
    margin-bottom: 244px !important;
  }

  #about-who-team-desc {
    max-width: 620px !important;
    font-size: 16px !important;
  }
}

.huiling-projects-intro {
  position: relative;
  right: auto;
  bottom: auto;
  width: min(42vw, 34rem);
  margin: clamp(1.35rem, 2.4vw, 2.5rem) 0 0 auto;
  font-family: Satoshi, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: clamp(1rem, 1.22vw, 1.35rem);
  line-height: 1.65;
  color: #666b75;
}

#projects .project-item-line-1 {
  max-width: 30em;
  font-size: clamp(0.92rem, 1.06vw, 1.18rem);
  line-height: 1.45;
  text-wrap: balance;
}

#project-details-meta {
  width: min(50em, calc(100vw - var(--base-padding-x) * 2)) !important;
}

/* word-break 必须是 normal：keep-all 会把整串中文当成一个不可断开的词，
   标题一旦超过一行宽度就不换行、直接溢出容器被裁掉（whole-home-voice-control 在 390px 下
   曾丢失「音控制」三个字）。汉字之间本来就允许断行，normal 才是中文标题的
   正确设置；text-wrap: balance 继续负责让各行长度均匀。

   max-width 还要挡住另一件事：右侧配图的左边缘实测为 max(768px, 48vw)，
   标题从 1440 起就会压到图上（1920 下重叠 134px）。这里按同一公式回推可用
   宽度并留出间距，让标题在碰到图之前先换行。 */
#project-details-title {
  max-width: min(
    10.5em,
    calc(max(768px, 48vw) - var(--base-padding-x) - 40px)
  );
  font-size: clamp(3.4em, 5.2vw, 5em) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.055em;
  overflow-wrap: break-word;
  word-break: normal;
  text-wrap: balance;
}

#project-details-left {
  width: 64% !important;
}

#project-details-right {
  width: 36% !important;
  padding-left: 8% !important;
}

#project-details-desc {
  max-width: 43em;
  margin: 2.8em 0 3.2em !important;
  font-size: clamp(0.78em, 0.88vw, 0.92em) !important;
  line-height: 1.72em !important;
}

#project-details-desc .project-details-value {
  max-width: 28em;
  margin-bottom: 1.2em;
  font-size: 1.3em;
  font-weight: 500;
  line-height: 1.38;
  letter-spacing: -0.025em;
  color: var(--project-details-highlight);
}

#project-details-desc p:not(:first-child) {
  margin-top: 0.9em;
}

#project-details-desc p {
  text-wrap: pretty;
}

@media (max-width: 812px) {
  .huiling-projects-intro {
    position: relative;
    right: auto;
    bottom: auto;
    width: min(100%, 31rem);
    margin: 1.4rem 0 0;
    font-size: clamp(0.95rem, 3.8vw, 1.08rem);
    line-height: 1.65;
  }

  #about-who {
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
  }

  #about-who-subsection-container {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
    will-change: auto !important;
  }

  .about-who-subsection {
    position: relative !important;
    float: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100svh;
    transform: none !important;
  }

  #about-who-subsection-details {
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    gap: 4rem;
    min-height: 100svh;
    font-size: clamp(1.5rem, 7vw, 2rem) !important;
    line-height: 1.18;
  }

  #about-who-desc-top,
  #about-who-desc-bottom {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    text-align: left !important;
  }

  #about-who-desc-bottom {
    right: auto !important;
    bottom: auto !important;
  }

  #about-who-team-name {
    font-size: clamp(42px, 12vw, 48px) !important;
  }

  #about-who-team-job {
    max-width: 100% !important;
    font-size: clamp(18px, 5vw, 20px) !important;
    line-height: 1.35 !important;
    white-space: normal !important;
  }

  #about-who-team-title {
    margin-bottom: clamp(260px, 31vh, 278px) !important;
  }

  #about-who-team-desc {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(15px, 4vw, 16px) !important;
    line-height: 1.72 !important;
  }

  #about-capability-subheader {
    width: 100% !important;
    line-height: 1.55 !important;
  }

  #about-who-desc-top > span span,
  #about-who-desc-bottom > span span {
    display: inline !important;
    margin: 0 !important;
  }

  #about-crosses {
    display: none !important;
  }

  #about-who-title-main-scroll {
    display: none !important;
  }

  #projects .project-item-line-2 {
    left: 0 !important;
    padding-left: 1.1em;
  }

  #projects .project-item-line-1 {
    max-width: 22em;
    font-size: clamp(0.88rem, 3.55vw, 1.04rem) !important;
    line-height: 1.45;
  }

  #projects .project-item-line-2-icon {
    left: 0 !important;
  }

  /* 同上：窄视口是 keep-all 危害最大的地方，中文标题必须能逐字换行。 */
  #project-details-title,
  #project-details-preview-title {
    max-width: 100%;
    font-size: clamp(2.65rem, 11.2vw, 4.2rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.05em;
    overflow-wrap: break-word;
    word-break: normal;
    text-wrap: balance;
  }

  #project-details-left,
  #project-details-right {
    width: 100% !important;
  }

  #project-details-right {
    padding-left: 0 !important;
  }

  #project-details-desc {
    max-width: 34em;
    margin: 2.25rem 0 2.75rem !important;
    font-size: clamp(0.98rem, 3.8vw, 1.08rem) !important;
    line-height: 1.72 !important;
  }

  #project-details-desc .project-details-value {
    max-width: 21em;
    margin-bottom: 1.1rem;
    font-size: 1.2em;
  }

  #project-details-preview {
    position: relative !important;
    left: 0 !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    clear: both;
    margin-top: 4rem !important;
  }

  #project-details-preview-inner {
    position: relative !important;
    left: 0 !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    padding: 3rem 0 !important;
  }

  #header-right-menu-btn {
    display: grid !important;
    place-items: center !important;
    overflow: hidden;
  }

  #header-right-menu-btn-inner {
    display: grid !important;
    place-items: center !important;
    right: auto !important;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  #header-right-menu-btn-dots,
  #header-right-menu-btn:hover #header-right-menu-btn-dots,
  #header-right-menu-btn.--opened #header-right-menu-btn-dots {
    position: relative !important;
    width: 1.28em !important;
    height: 1.02em !important;
    font-size: 1em !important;
    transform: none !important;
  }

  #header-right-menu-btn-dots::before,
  #header-right-menu-btn-dots::after,
  #header-right-menu-btn-dots .header-right-menu-btn-dot:first-child {
    content: "";
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    display: block !important;
    width: 100% !important;
    min-height: 2px;
    height: 0.15em !important;
    border-radius: 999px !important;
    background: currentColor !important;
  }

  #header-right-menu-btn-dots::before {
    top: 0;
    transform: translateX(-50%) !important;
  }

  #header-right-menu-btn-dots .header-right-menu-btn-dot:first-child {
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  #header-right-menu-btn-dots::after {
    bottom: 0;
    transform: translateX(-50%) !important;
  }

  #header-right-menu-btn-dots .header-right-menu-btn-dot:last-child {
    display: none !important;
  }
}

@media (max-width: 420px) {
  #about-who-subsection-details {
    font-size: clamp(1.35rem, 6.5vw, 1.75rem) !important;
  }

  #project-details-title,
  #project-details-preview-title {
    font-size: clamp(2.2rem, 11vw, 3.4rem) !important;
  }
}

/*
 * 页面底部「下一页」横幅里的一排 5 个十字装饰。
 * 旧运行时完全不引用这些节点（bundle 里 scroll-nav-cross 出现 0 次），
 * 纯 DOM 装饰，隐藏不影响下一页跳转。
 */
#scroll-nav-cross-line {
  display: none !important;
}

/* ============================================================
 * 版式规范：容器留白刻度
 *
 * 原始刻度是三段硬跳变：
 *   ≥813px  max(5vw,40px)   1440 上 72px
 *   ≤812px  25px
 *   ≤400px  15px
 * 两个问题：
 *   1. 390px 屏上 15px 边距，正文几乎贴着屏幕边缘，观感局促；
 *   2. 812px 处从 72px 直接掉到 25px，跨过断点时留白突变。
 *
 * 改成随视口连续变化的 clamp，并把小屏下限抬到 24px。
 * 桌面端（≥1200px）刻意保持 5vw 不变——那是现有版面和首页 WebGL
 * 几何的基准，动它等于重排整站。
 * ============================================================ */
@media (max-width: 812px) {
  :root {
    --base-padding-x: clamp(24px, 5.2vw, 40px);
    --base-padding-y: clamp(28px, 5vw, 44px);
  }
}

@media (max-width: 400px) {
  :root {
    --base-padding-x: 24px;
    --base-padding-y: 28px;
  }
}

/* 813–1199px：原来是 max(5vw,40px)，在 900px 附近只有 45px，
 * 与移动端抬升后的 40px 几乎没有层次。补一档过渡。 */
@media (min-width: 813px) and (max-width: 1199px) {
  :root {
    --base-padding-x: clamp(44px, 5.6vw, 64px);
  }
}

/* ============================================================
 * 版式规范：正文可读性
 *
 * 案例页桌面端正文只有 13px，是全站最小的正文字号，偏小。
 *
 * 注意：不要用「宽度 ÷ 字号 × 0.55」这类拉丁文启发式判断中文行长——
 * 中文是全角，正确算法是「宽度 ÷ 字号」。关于页团队简介实测 760px / 17px
 * ≈ 45 字/行，在中文舒适区间（30–45）内，不需要收窄。
 * ============================================================ */
@media (min-width: 813px) {
  #project-details-desc {
    font-size: clamp(15px, 1.05vw, 17px) !important;
    line-height: 1.75 !important;
  }
}

/* ============================================================
 * 案例详情页的结尾 CTA 标题
 *
 * end-section 是全站共用组件，但各页的处理是分别写的：
 *   首页       clamp(5rem, 8.2vw, 8.6rem)  左对齐（EndSection/styles.css）
 *   关于/项目   clamp(76px, 10vw, 132px)    居中（about-/projects-end-section.css）
 *   案例页     —— 没有规则，直接落到默认的 10vw 无上限
 *
 * 前两者的对齐、行高、字距是刻意分开调的，不应统一；但案例页是漏配：
 * 1440px 上渲染成 144px，比同为内页的关于/项目大 9%，是三者里唯一的异常值。
 * 这里补齐，与其他内页对齐。
 * ============================================================ */
body:has(#project) #end-section #end-section-title {
  --font-size: clamp(76px, 10vw, 132px);
}

/* 小屏要跟着内页的那一档一起降。
 * 只写上面那条的话，clamp 的下限 76px 会在 390px 屏上被顶起来，
 * 反而比关于/项目页的 66px 更大——等于把桌面端的不一致搬到了手机端。 */
@media (max-width: 812px) {
  body:has(#project) #end-section #end-section-title {
    --font-size: clamp(58px, 17vw, 88px);
  }
}

/* ============================================================
 * 案例页「向下探索」标签的对比度
 *
 * 实测（截图像素采样，不是 CSS 推断）：12px 紫字压在淡紫背景上只有 3.80:1，
 * 低于 WCAG AA 对小字的 4.5:1。
 *
 * 不能写死一个深紫——这个颜色跟着每个案例的主题色走（--project-details-highlight），
 * 写死会在别的案例上和整体配色打架。用 color-mix 按比例调整，保留色相。
 *
 * 必须分两个方向：一律压暗会让深色背景的案例（erbai-robot、language-tutor）
 * 对比度反而更差（实测 3.63:1 / 2.55:1）。按运行时已有的 data-project-tone
 * 分流——浅底压暗、深底提亮。
 * ============================================================ */
html.huiling-project-detail:not([data-project-tone="dark"])
  #project-details-header-info span {
  color: color-mix(in srgb, currentColor 62%, #000) !important;
}

html.huiling-project-detail[data-project-tone="dark"]
  #project-details-header-info span {
  color: color-mix(in srgb, currentColor 55%, #fff) !important;
}

/* ============================================================
 * 头部常驻控件的尺寸统一
 *
 * 头部是全站常驻组件，但高度跨页不一致：
 *   首页   48px（桌面）/ 46px（≤812px），由 --adaptive-header-control 驱动
 *   内页   44.8px（基础值 3.2em）
 * 换页时按钮会轻微跳动。统一到首页那档——48px 同时也是更合适的触摸目标
 * （Material 最小 48dp，44.8px 略低于线）。
 *
 * 用 :not(.huiling-reference-home) 排除首页：它那套是变量驱动的自适应头部，
 * 写死高度会破坏随滚动收拢的行为。
 * ============================================================ */
html:not(.huiling-reference-home) #header-right-talk-btn,
html:not(.huiling-reference-home) #header-right-menu-btn {
  height: 48px !important;
}

@media (max-width: 812px) {
  html:not(.huiling-reference-home) #header-right-talk-btn,
  html:not(.huiling-reference-home) #header-right-menu-btn {
    height: 46px !important;
  }
}

/* ============================================================
 * 项目卡片圆角
 *
 * 组件规范是 .project-item-image{border-radius:15px}（runtime.css），
 * 项目列表页用的就是这个值。但首页有一条 #home-featured .project-item-image
 * { border-radius: inherit }，继承到父级的 20px——同一个组件、同样 632×412
 * 的尺寸，两个页面圆角不同。回到组件规范值。
 * ============================================================ */
#home-featured .project-item-image {
  border-radius: 15px !important;
}

/* ---------- 移动端菜单联系入口去重 ---------- */

/*
 * 菜单链接列表已经有一个「方案沟通」按钮，旧运行时还会在 <=812px 时
 * 显示独立的 #header-menu-talk 卡片，导致同一功能连续出现两次。
 * 保留节点作为旧运行时兼容接口，只在移动端退出布局；桌面端原本就是隐藏的。
 */
@media (max-width: 812px) {
  #header-menu #header-menu-talk {
    display: none !important;
  }
}

/* ---------- 菜单里的「回聆 AIoT」外链按钮 ---------- */

/*
 * 1) 文案大小写：这一处继承了 text-transform:uppercase，会把「回聆 AIoT」渲染成
 *    「回聆 AIOT」。AIoT 是固定写法（Artificial Intelligence of Things），
 *    中间的小写 o 不能被吃掉，所以在这里关掉转换。
 *
 * 2) 图标尺寸：#header-menu-labs-mark 是 #header-menu-labs-inner（display:flex）
 *    的弹性子项。新文案比原来的「技术探索」宽约 50px，一行放不下时，
 *    图标作为可收缩项被压扁——实测从 38×38 挤成 23×38，同心圆弧被拉成椭圆。
 *    给它 flex-shrink:0，让它守住 2.375em 的方形，由按钮自身去容纳更宽的文案。
 */
#header-menu-labs-text,
#header-menu-labs-text-clone {
  text-transform: none !important;
}

#header-menu-labs-mark {
  flex-shrink: 0 !important;
}

#header-menu-labs-icon {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- 页脚「方案沟通」下的企业微信 ---------- */

/*
 * 页脚是白底黑字（#footer-bg 用 --color-white），二维码不需要额外垫白板，
 * 一道细边框定形即可。尺寸用 px 不用 em：#footer-section 的字号是
 * clamp(.75rem,1vw,2rem)，跟着缩放会让二维码在小屏上小到扫不出来。
 * 92px 是手机相机在正常观看距离下的可靠下限。
 */
/*
 * 必须显式排序：运行时会把 #footer-enquires-header 和 #footer-enquires-link
 * 各包一层 DIV 再重新追加到容器末尾，于是静态 HTML 里明明写在最后的
 * 企业微信块被留在了最前面，渲染成「二维码 → 方案沟通 → 邮箱」。
 * 容器原本是 display:block，order 不生效，所以这里改成 flex 列后再排序。
 * align-items:flex-start 保持各行按内容宽度、不被拉伸，与原 block 布局一致。
 */
#footer-contact-enquires {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#footer-enquires-wecom {
  order: 9;
  display: flex;
  flex-direction: column;
  gap: 0.55em;
  margin-top: 1.5em;
}

#footer-enquires-wecom-label {
  font-size: 0.86em;
  line-height: 1;
  opacity: 0.52;
}

/*
 * 尺寸按「屏幕上每模块的像素数」定，不是按视觉大小拍脑袋：
 * 图片 328px 里码区占 85%（约 25 模块），112px 的框减去 5px 内边距后
 * 码区落在 87px ≈ 3.5px/模块，是手机相机近距离可靠识别的下限。
 * 弹窗那份是 148px ≈ 4.5px/模块，更宽裕。
 */
#footer-enquires-wecom-qr {
  display: block;
  box-sizing: border-box;
  width: 112px;
  height: 112px;
  padding: 5px;
  background: #fff;
  border: 1px solid rgba(5, 7, 10, 0.14);
  border-radius: 5px;
}

/*
 * 页脚企业微信二维码的出场动效。
 *
 * 页脚其余元素由旧运行时驱动入场，而这块是后加的 DOM，运行时不认识它，
 * 结果整片页脚只有它「一开始就在那儿」，节奏对不上。
 * 缓动与时长取项目里其余入场一致的 cubic-bezier(0.22, 1, 0.36, 1) / 720ms。
 *
 * .is-reveal-ready 由脚本添加而不是写成 CSS 初始值：脚本没跑时二维码要保持可见，
 * 不能永久停在 opacity:0。
 */
#footer-enquires-wecom.is-reveal-ready {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity 720ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
}

#footer-enquires-wecom.is-reveal-ready.is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  #footer-enquires-wecom.is-reveal-ready {
    transition: none;
  }
}