/* Balanced rows throughout content pages. */
.v22-detail-page
  :is(
    .intro-points,
    .proof-grid,
    .scene-grid,
    .sol-case-grid,
    .sol-pain-grid,
    .delivery ul
  ):has(> :nth-child(2n):last-child):where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.v22-detail-page
  :is(
    .intro-points,
    .proof-grid,
    .scene-grid,
    .sol-case-grid,
    .sol-pain-grid,
    .delivery ul
  ):has(> :nth-child(3n):last-child):where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.v22-detail-page
  :is(
    .intro-points,
    .proof-grid,
    .scene-grid,
    .sol-case-grid,
    .sol-pain-grid
  ):has(> :nth-child(6n + 1):last-child)
  > :last-child:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  grid-column: 1 / -1;
}
.v22-detail-page
  .delivery
  ul:has(> :nth-child(odd):last-child):not(:has(> :nth-child(3n):last-child))
  > :last-child:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  grid-column: 1 / -1;
}
.v22-detail-page .sol-prod-grid:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.v22-home.v22-detail-active .header:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  border-bottom: 0;
}
.v22-detail-page:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  padding-top: 46px;
}
.v22-detail-page .product-hero:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  padding-top: 14px;
}

/* White product-page canvas; near-white surfaces replace rules and numbering. */
:is(.v22-product-content, .v22-solution-content)
  :is(.product-index, .story-num):where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  display: none;
}
:is(.v22-product-content, .v22-solution-content) .intro-points li:where(:not(.nh, .nh *, .nh-home, .nh-home > body)):before{
  content: none;
  display: none;
}
:is(.v22-product-content, .v22-solution-content) .v22-detail-hero-visual:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  margin-bottom: 54px;
}
:is(.v22-product-content, .v22-solution-content) .v22-detail-capabilities:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  margin-bottom: 96px;
}
:is(.v22-product-content, .v22-solution-content) .intro-points:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  gap: 24px;
}
:is(.v22-product-content, .v22-solution-content) .intro-points li:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  padding: 30px 32px;
  border: 0;
  background: #f6f8fc;
  border-radius: 22px;
}
:is(.v22-product-content, .v22-solution-content) .intro-points strong:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  margin-bottom: 13px;
}
:is(.v22-product-content, .v22-solution-content) .owns:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  padding: 44px;
  background: #f7f9fc;
  border: 0;
  border-radius: 28px;
  margin: 0 0 100px;
  box-shadow: none;
}
:is(.v22-product-content, .v22-solution-content) .story-block:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  padding: 44px;
  margin: 0 0 76px;
  border: 0;
  border-radius: 28px;
  background: #f7f9fc;
}
:is(.v22-product-content, .v22-solution-content) .story-block:nth-child(even):where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  background: #fff;
}
:is(.v22-product-content, .v22-solution-content) .story-copy:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  grid-template-columns: 1fr;
  gap: 0;
}
:is(.v22-product-content, .v22-solution-content) .story-block h2:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  font-size: clamp(26px, 2.6vw, 35px);
  line-height: 1.5;
}
:is(.v22-product-content, .v22-solution-content) .media-frame:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  padding: 13px;
  background: #f0f4fa;
  border: 0;
  box-shadow: none;
  border-radius: 22px;
}
:is(.v22-product-content, .v22-solution-content) .mini-list span:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  background: #edf2fa;
}
:is(.v22-product-content, .v22-solution-content)
  :is(.proof, .scenes, .delivery):where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  padding: 46px 0;
  margin: 0 0 64px;
  border: 0;
}
:is(.v22-product-content, .v22-solution-content)
  :is(.proof-grid, .scene-grid)
  > div:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  padding: 30px;
  background: #f6f8fc;
  border: 0;
  box-shadow: none;
  border-radius: 24px;
}

:is(.v22-product-content, .v22-solution-content) .product-cta:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  padding: 42px 44px;
  margin: 60px 0 32px;
  background: #f4f7fc;
  border: 0;
  box-shadow: none;
}
:is(.v22-product-content, .v22-solution-content) .page-end:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  border: 0;
}
@media (max-width: 1100px) and (min-width: 761px) {
  :is(.v22-product-content, .v22-solution-content) .story-block:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    padding: 30px;
  }
  :is(.v22-product-content, .v22-solution-content) .owns:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    padding: 32px;
    gap: 30px;
  }
}
@media (max-width: 760px) {
  .v22-detail-page
    :is(
      .intro-points,
      .proof-grid,
      .scene-grid,
      .sol-case-grid,
      .sol-pain-grid,
      .delivery ul
    ):has(> :nth-child(n):last-child):where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    grid-template-columns: 1fr;
  }
  .v22-detail-page:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    padding-top: 28px;
  }
  .v22-detail-page .product-hero:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    padding-top: 8px;
  }
  :is(.v22-product-content, .v22-solution-content) .v22-detail-hero-visual:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    margin-bottom: 34px;
  }
  :is(.v22-product-content, .v22-solution-content) .v22-detail-capabilities:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    margin-bottom: 64px;
  }
  :is(.v22-product-content, .v22-solution-content) .intro-points:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    gap: 16px;
  }
  :is(.v22-product-content, .v22-solution-content) .intro-points li:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    padding: 25px;
    border-radius: 20px;
  }
  :is(.v22-product-content, .v22-solution-content) .owns:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    padding: 26px;
    margin-bottom: 66px;
    border-radius: 22px;
  }
  :is(.v22-product-content, .v22-solution-content) .story-block:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    padding: 26px 22px;
    margin-bottom: 50px;
    border-radius: 22px;
  }
  :is(.v22-product-content, .v22-solution-content) .story-copy:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    grid-template-columns: 1fr;
  }
  :is(.v22-product-content, .v22-solution-content) .story-block h2:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    font-size: 27px;
  }
  :is(.v22-product-content, .v22-solution-content) .media-frame:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    padding: 9px;
    border-radius: 17px;
  }
  :is(.v22-product-content, .v22-solution-content)
    :is(.proof, .scenes, .delivery):where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    padding: 26px 0;
    margin-bottom: 40px;
  }
  :is(.v22-product-content, .v22-solution-content)
    :is(.proof-grid, .scene-grid)
    > div:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    padding: 26px;
    border-radius: 21px;
  }
  :is(.v22-product-content, .v22-solution-content) .product-cta:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    padding: 28px;
    margin-top: 40px;
  }
}

/* Screenshot assets keep their native proportions and are never enlarged to fill a column. */
.v22-detail-page .story-media:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  text-align: center;
  min-width: 0;
}
.v22-detail-page .media-frame:where(:not(.nh, .nh *, .nh-home, .nh-home > body)),.v22-detail-page .story-media .media-frame:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: 100%;
  padding: 8px;
  border: 0;
  border-radius: 18px;
  background: #f0f4fa;
  box-shadow: none;
  line-height: 0;
  vertical-align: top;
}
.v22-detail-page .media-frame img:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  display: block;
  flex: none;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(340px, 44svh);
  object-fit: contain;
  object-position: center;
  filter: none;
  box-shadow: none;
  border: 0;
  border-radius: 12px;
  clip-path: inset(2px round 11px);
}
.v22-detail-page .has-media:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  grid-template-columns: 1fr 1fr;
  gap: 38px;
  align-items: center;
}
.v22-detail-page .story-block:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  padding: 34px;
  margin-bottom: 64px;
}
.v22-detail-page .story-copy h2:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  font-size: clamp(25px, 2.25vw, 32px);
  line-height: 1.45;
}
.v22-detail-page .story-copy p:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  font-size: 16px;
  line-height: 1.9;
}
.v22-detail-page .story-copy .lead:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  font-size: 16px;
  line-height: 1.8;
}
.v22-detail-page .mini-list:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  margin-top: 20px;
  gap: 8px;
}
.v22-detail-page .mini-list span:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  font-size: 16px;
  padding: 7px 11px;
}
.v22-detail-page .story-block:has(.story-media.multi):where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  display: block;
}
.v22-detail-page .story-block:has(.story-media.multi) .story-copy:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  display: block;
  max-width: 940px;
  margin: 0 auto 28px;
  text-align: center;
}
.v22-detail-page .story-block:has(.story-media.multi) .mini-list:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  justify-content: center;
}
.v22-detail-page .story-media.multi:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px 24px;
}
.v22-detail-page .story-media.multi .media-frame:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  flex: 0 1 auto;
  max-width: calc(50% - 12px);
}
.v22-detail-page .story-media.multi img:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  max-height: min(310px, 38svh);
}
.v22-detail-page .story-media.multi figcaption:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  width: 100%;
  padding-top: 0;
}
.v22-detail-page .sol-loop:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  border: 0;
  background: #f7f9fc;
}
.v22-detail-page :is(.sol-case-grid, .sol-pain-grid) > div:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  border: 0;
  background: #f6f8fc;
}
.v22-detail-page .sol-prod-grid button:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  border: 0;
  background: #f4f7fc;
}

.v22-detail-page .v22-proof-heading:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  grid-column: 1 / -1;
}
.v22-detail-page .v22-proof-heading .proof-lead:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
}

.v22-detail-page .proof.v22-proof-multi:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}
.v22-detail-page .proof.v22-proof-multi > .proof-grid:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.v22-detail-page .proof.v22-proof-multi > .proof-grid > div:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  display: block;
  padding: 18px 20px;
}
.v22-detail-page .proof.v22-proof-multi > .proof-grid b:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  font-size: 27px;
  margin-bottom: 8px;
}
.v22-detail-page .proof.v22-proof-multi > .proof-grid strong:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  font-size: 16px;
  margin-bottom: 7px;
}

@media (max-height: 760px) and (min-width: 761px) {
  .v22-detail-page .story-block:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    padding: 28px;
    margin-bottom: 48px;
  }
  .v22-detail-page :is(.proof, .scenes, .delivery, .sol-pains):where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    padding: 24px 0;
  }
  .v22-detail-page .media-frame img:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    max-height: 300px;
  }
  .v22-detail-page .story-media.multi img:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    max-height: 250px;
  }
  .v22-detail-page .story-copy h2:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    font-size: 28px;
  }
}
@media (max-width: 760px) {
  .v22-detail-page .has-media:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .v22-detail-page .story-block:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    padding: 24px 20px;
    margin-bottom: 44px;
  }
  .v22-detail-page .story-copy h2:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    font-size: 26px;
  }
  .v22-detail-page .media-frame:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    padding: 7px;
    border-radius: 16px;
  }
  .v22-detail-page .media-frame img:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    max-height: 290px;
  }
  .v22-detail-page .story-media.multi:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    gap: 14px;
    align-items: center;
  }
  .v22-detail-page .story-media.multi .media-frame:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    max-width: 100%;
  }
  .v22-detail-page .story-media.multi img:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    max-height: 245px;
  }
  .v22-detail-page .story-block:has(.story-media.multi) .story-copy:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    text-align: left;
    margin-bottom: 24px;
  }
  .v22-detail-page .story-block:has(.story-media.multi) .mini-list:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    justify-content: flex-start;
  }

  .v22-detail-page .proof.v22-proof-multi > .proof-grid:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    display: grid;
    grid-template-columns: 1fr;
    margin: 24px 0;
    gap: 14px;
  }
}

/* Feature narratives sit directly on the white page; cards remain for compact facts and actions. */
.v22-detail-page.v22-product-content :is(.owns, .story-block):where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}
.v22-detail-page.v22-product-content .product-cta p:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  font-weight: 700;
  color: #172235;
}
.v22-detail-page .owns:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}
.v22-detail-page .v22-capability-title:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* ==================== 小北 · 典型场景：场景切换器 ====================
   九类工作做成一组标签页：左列是场景列表（编号 + 标题，选中项展开一句说明），
   右边是当前场景——上面「交给小北 / 拿回成果」两行和 3 个能力标签，
   下面浅蓝渐变底托里放小北的真实界面截图，「你写下的要求」卡片压在截图左下角。
   ≤900px：列表变成一排可横滑的胶囊（只有这一排横滑），截图在上、文字在下，
   要求卡片落到截图下方。切换只做很轻的淡入；减少动效时完全不动。
   脚本：scripts/xiaobei-scenes.js（不自动轮播，也不改地址栏）。 */
#page-xiaobei .xbs:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  --xbs-ink: #121a27;
  --xbs-text: #2d4562;
  --xbs-muted: #6b7c93;
  --xbs-faint: #97a3b5;
  --xbs-rail: #e3e8f0;
  --xbs-blue: #2850ff;
  --xbs-dark: #172235;
}
#page-xiaobei .xbs-intro:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  max-width: 680px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.85;
  text-align: center;
  text-wrap: pretty;
  color: var(--xbs-muted);
}
#page-xiaobei .xbs-body:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  display: grid;
  grid-template-columns: minmax(240px, 312px) minmax(0, 1fr);
  gap: 52px;
  align-items: stretch;
  margin-top: 56px;
}

/* 左列：场景列表，一条竖向导轨，选中项亮出蓝色那一段；列表撑满右边舞台的高度 */
#page-xiaobei .xbs-tabs:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}
#page-xiaobei .xbs-tabs:where(:not(.nh, .nh *, .nh-home, .nh-home > body))::before{
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: var(--xbs-rail);
}
#page-xiaobei .xbs-tab:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  column-gap: 10px;
  align-items: baseline;
  width: 100%;
  margin: 0;
  padding: 14px 14px 14px 20px;
  border: 0;
  border-radius: 0 14px 14px 0;
  background: transparent;
  color: var(--xbs-muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
#page-xiaobei .xbs-tab:where(:not(.nh, .nh *, .nh-home, .nh-home > body))::before{
  content: '';
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 0;
  width: 2px;
  border-radius: 2px;
  background: var(--xbs-blue);
  opacity: 0;
  transform: scaleY(0.4);
  transition:
    opacity 0.2s ease,
    transform 0.28s cubic-bezier(0.22, 0.8, 0.3, 1);
}
#page-xiaobei .xbs-no:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--xbs-faint);
  transition: color 0.2s ease;
}
#page-xiaobei .xbs-name:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  color: #4a5c74;
  transition: color 0.2s ease;
}
#page-xiaobei .xbs-desc:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  grid-column: 2;
  display: grid;
  grid-template-rows: 0fr;
  margin-top: 0;
  opacity: 0;
  transition:
    grid-template-rows 0.28s cubic-bezier(0.22, 0.8, 0.3, 1),
    margin-top 0.28s cubic-bezier(0.22, 0.8, 0.3, 1),
    opacity 0.2s ease;
}
#page-xiaobei .xbs-desc > span:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  min-height: 0;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.75;
  /* 短句只在标点处换行，放不下时才在字间断开 */
  word-break: keep-all;
  overflow-wrap: anywhere;
  color: var(--xbs-muted);
}
#page-xiaobei .xbs-tab:hover:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  background: #f7f9fc;
}
#page-xiaobei .xbs-tab:hover .xbs-name:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  color: var(--xbs-ink);
}
#page-xiaobei .xbs-tab[aria-selected='true']:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  background: linear-gradient(90deg, #f1f5fe, rgba(241, 245, 254, 0.35));
}
#page-xiaobei .xbs-tab[aria-selected='true']:where(:not(.nh, .nh *, .nh-home, .nh-home > body))::before{
  opacity: 1;
  transform: none;
}
#page-xiaobei .xbs-tab[aria-selected='true'] .xbs-no:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  color: var(--xbs-blue);
}
#page-xiaobei .xbs-tab[aria-selected='true'] .xbs-name:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  color: var(--xbs-ink);
}
#page-xiaobei .xbs-tab[aria-selected='true'] .xbs-desc:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  grid-template-rows: 1fr;
  margin-top: 6px;
  opacity: 1;
}
#page-xiaobei .xbs-tab:focus-visible:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  outline: 2px solid var(--xbs-blue);
  outline-offset: -2px;
}

/* 右边：当前场景 */
#page-xiaobei .xbs-panels:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  min-width: 0;
}
#page-xiaobei .xbs-panel:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  min-width: 0;
}
/* 首屏只渲染第一个场景可见（xbs-off），脚本接手后改用 hidden */
#page-xiaobei .xbs-panel:is([hidden], .xbs-off):where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  display: none;
}
#page-xiaobei .xbs-panel:focus-visible:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  outline: 2px solid var(--xbs-blue);
  outline-offset: 8px;
  border-radius: 6px;
}
#page-xiaobei .xbs-lede:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
#page-xiaobei .xbs-facts:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  display: grid;
  gap: 8px;
  margin: 0;
}
#page-xiaobei .xbs-facts > div:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 18px;
  align-items: baseline;
}
#page-xiaobei .xbs-facts dt:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--xbs-faint);
}
#page-xiaobei .xbs-facts dd:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
  color: var(--xbs-text);
}
#page-xiaobei .xbs-get dt:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  color: var(--xbs-blue);
}
#page-xiaobei .xbs-get dd:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  font-weight: 600;
  color: var(--xbs-ink);
}
#page-xiaobei .xbs-tags:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0 0 0 90px;
  list-style: none;
}
#page-xiaobei .xbs-tags li:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  margin: 0;
  padding: 5px 11px;
  border-radius: 9px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--v23-tag-text, #2850ff);
  background: var(--v23-tag-background, #edf1ff);
}

/* 舞台：浅蓝渐变底托 + 小北窗口 + 压在左下角的「你写下的要求」 */
#page-xiaobei .xbs-stage:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  margin-top: 26px;
  padding: 36px 44px 56px;
  border-radius: 28px;
  background:
    radial-gradient(120% 90% at 0% 100%, #e4f8fd 0%, transparent 55%),
    radial-gradient(110% 90% at 100% 0%, #e5eefe 0%, transparent 60%), #f8fafc;
  box-shadow: inset 0 0 0 1px #edf0f5;
}
#page-xiaobei .xbs-frame:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  position: relative;
}
#page-xiaobei .xbs-window:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  box-shadow:
    0 0 0 1px #e6e9ef,
    0 2px 6px rgba(18, 26, 39, 0.06),
    0 40px 80px -40px rgba(18, 26, 39, 0.32);
}
#page-xiaobei .xbs-chrome:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  display: flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 14px;
  border-bottom: 1px solid #f0f2f5;
}
#page-xiaobei .xbs-chrome span:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e5e8ee;
}
#page-xiaobei .xbs-window img:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  display: block;
  width: 100%;
  height: auto;
  background: #f6f8fb;
}
#page-xiaobei .xbs-ask:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  position: absolute;
  bottom: -3.5%;
  left: -2%;
  width: 58%;
}
#page-xiaobei .xbs-ask-form:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  width: 52%;
}
#page-xiaobei .xbs-ask-label:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  display: inline-flex;
  align-items: center;
  margin: 0 0 10px 4px;
  padding: 7px 11px;
  border-radius: 999px;
  background: var(--xbs-dark);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
}
#page-xiaobei .xbs-ask img:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  background: #fff;
  box-shadow:
    0 0 0 1px #e6e9ef,
    0 4px 10px rgba(18, 26, 39, 0.08),
    0 28px 56px -24px rgba(18, 26, 39, 0.38);
}

/* 切换：新场景整体很轻地淡入，要求卡片稍晚一点、上移 6px 落位 */
@media (prefers-reduced-motion: no-preference) {
  #page-xiaobei .xbs-panel.xbs-in:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    animation: xbs-fade 0.26s ease-out both;
  }
  #page-xiaobei .xbs-panel.xbs-in .xbs-ask:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    animation: xbs-rise 0.42s 0.08s cubic-bezier(0.22, 0.8, 0.3, 1) both;
  }
}
@keyframes xbs-fade {
  from {
    opacity: 0;
  }
}
@keyframes xbs-rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}
@media (prefers-reduced-motion: reduce) {
  #page-xiaobei :is(.xbs-tab, .xbs-tab::before, .xbs-no, .xbs-name, .xbs-desc):where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    transition: none;
  }
}

@media (max-width: 1100px) {
  #page-xiaobei .xbs-body:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    grid-template-columns: minmax(220px, 264px) minmax(0, 1fr);
    gap: 36px;
  }
  #page-xiaobei .xbs-stage:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    padding: 28px 32px 44px;
  }
}

/* ≤900px：胶囊一排横滑（贴到屏幕两边），截图在上、文字在下 */
@media (max-width: 900px) {
  #page-xiaobei .xbs:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    --xbs-bleed: 28px;
  }
  #page-xiaobei .xbs-body:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    display: block;
    margin-top: 32px;
  }
  #page-xiaobei .xbs-tabs:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    flex-direction: row;
    justify-content: flex-start;
    gap: 8px;
    margin: 0 calc(-1 * var(--xbs-bleed));
    padding: 2px var(--xbs-bleed) 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-inline: var(--xbs-bleed);
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  #page-xiaobei .xbs-tabs:where(:not(.nh, .nh *, .nh-home, .nh-home > body))::-webkit-scrollbar{
    display: none;
  }
  #page-xiaobei .xbs-tabs:where(:not(.nh, .nh *, .nh-home, .nh-home > body))::before,#page-xiaobei .xbs-tab:where(:not(.nh, .nh *, .nh-home, .nh-home > body))::before,#page-xiaobei .xbs-desc:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    display: none;
  }
  #page-xiaobei .xbs-tab:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    flex: none;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    width: auto;
    padding: 8px 15px;
    border-radius: 999px;
    background: #f1f4f9;
    white-space: nowrap;
    scroll-snap-align: start;
  }
  #page-xiaobei .xbs-no:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    font-size: 12px;
  }
  #page-xiaobei .xbs-name:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    font-size: 15px;
  }
  #page-xiaobei .xbs-tab:hover:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    background: #e9eef6;
  }
  #page-xiaobei .xbs-tab[aria-selected='true']:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    background: var(--xbs-dark);
  }
  #page-xiaobei .xbs-tab[aria-selected='true'] .xbs-no:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    color: rgba(255, 255, 255, 0.62);
  }
  #page-xiaobei .xbs-tab[aria-selected='true'] .xbs-name:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    color: #fff;
  }
  #page-xiaobei .xbs-tab:focus-visible:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    outline-offset: 2px;
  }
  #page-xiaobei .xbs-panels:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    margin-top: 14px;
  }
  #page-xiaobei .xbs-panel:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    display: flex;
    flex-direction: column;
  }
  #page-xiaobei .xbs-lede:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    position: static;
    order: -2;
    width: auto;
    height: auto;
    margin: 0 0 14px;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    font-size: 15px;
    line-height: 1.75;
    color: var(--xbs-muted);
  }
  #page-xiaobei .xbs-stage:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    order: -1;
    margin: 0 0 20px;
    padding: 16px;
    border-radius: 20px;
  }
  #page-xiaobei .xbs-window:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    border-radius: 10px;
  }
  #page-xiaobei .xbs-chrome:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    gap: 5px;
    height: 22px;
    padding: 0 10px;
  }
  #page-xiaobei .xbs-chrome span:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    width: 7px;
    height: 7px;
  }
  #page-xiaobei .xbs-ask:where(:not(.nh, .nh *, .nh-home, .nh-home > body)),#page-xiaobei .xbs-ask-form:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    position: static;
    width: 100%;
    margin-top: 16px;
  }
  #page-xiaobei .xbs-ask-label:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    margin-bottom: 8px;
  }
  #page-xiaobei .xbs-ask img:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    border-radius: 10px;
  }
  #page-xiaobei .xbs-facts > div:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 12px;
  }
  #page-xiaobei .xbs-facts dt:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    font-size: 13px;
  }
  #page-xiaobei .xbs-facts dd:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    font-size: 15px;
  }
  #page-xiaobei .xbs-tags:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    margin-top: 14px;
    padding-left: 0;
  }
  #page-xiaobei .xbs-tags li:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    font-size: 13px;
  }
}
@media (max-width: 760px) {
  #page-xiaobei .xbs:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    --xbs-bleed: 18px;
  }
  #page-xiaobei .xbs-intro:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    font-size: 16px;
  }
  #page-xiaobei .xbs-body:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    margin-top: 26px;
  }
}
