/* 中央主卡 + 两侧预览；仅 Banner 使用自己的媒体遮罩色。 */
#homeLanding.zm-page { padding-top: 28px; }
.hb { width:100%; margin:0 auto 36px; }
.hb[hidden], .hb [hidden] { display:none !important; }
.hb-track { position:relative; width:100%; max-width:1480px; margin:auto; }
.hb-stage { position:relative; height:clamp(290px,34vw,460px); overflow:hidden; touch-action:pan-y; user-select:none; -webkit-user-select:none; -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); }
.hb-card { position:absolute; top:50%; left:50%; width:min(960px,72%); aspect-ratio:16/7; padding:0; border:0; border-radius:24px; overflow:hidden; cursor:pointer; background:#0d1117; color:#fff; text-align:left; font:inherit; transform:translate(calc(-50% + var(--hb-offset,0%) + var(--hb-drag-x,0px)),-50%) scale(var(--hb-drag-scale,.82)); opacity:var(--hb-drag-opacity,.45); z-index:1; transition:transform .45s cubic-bezier(.22,.68,0,1),opacity .45s ease,box-shadow .45s ease; }
.hb-card.is-active { transform:translate(calc(-50% + var(--hb-drag-x,0px)),-50%) scale(var(--hb-drag-scale,1)); opacity:var(--hb-drag-opacity,1); z-index:2; box-shadow:0 16px 48px #0003; }
/* 先合成图片与遮罩再统一裁切，避开小数像素的亮缝；外层保留阴影及焦点轮廓。 */
.hb-card--composited { overflow:visible; background:transparent; }
.hb-visual { position:absolute; inset:0; display:block; background:#0d1117; filter:opacity(1); clip-path:inset(1px round 23px); }
/* 后方卡片四周渐隐至当前主题背景，避免矩形边界和视口裁切线。 */
.hb-card::after,.hb-visual::after { content:""; position:absolute; inset:-1px; pointer-events:none; background:linear-gradient(0deg,var(--bg-page) 0%,transparent 22%,transparent 78%,var(--bg-page) 100%),linear-gradient(90deg,var(--bg-page) 0%,transparent 22%,transparent 78%,var(--bg-page) 100%); opacity:var(--hb-edge-fade,1); transition:opacity .45s ease; }
/* 裁切外侧保持透明，浅色页面不露出深色底板；后方卡片的纵向遮罩缓慢淡出。 */
@supports (color:color-mix(in srgb,#fff,transparent)) {
  .hb-card::after,.hb-visual::after {
    background:linear-gradient(0deg,
      var(--bg-page) 0%,
      color-mix(in srgb,var(--bg-page) 94%,transparent) 4%,
      color-mix(in srgb,var(--bg-page) 72%,transparent) 10%,
      color-mix(in srgb,var(--bg-page) 34%,transparent) 18%,
      color-mix(in srgb,var(--bg-page) 8%,transparent) 26%,
      transparent 34%,transparent 66%,
      color-mix(in srgb,var(--bg-page) 8%,transparent) 74%,
      color-mix(in srgb,var(--bg-page) 34%,transparent) 82%,
      color-mix(in srgb,var(--bg-page) 72%,transparent) 90%,
      color-mix(in srgb,var(--bg-page) 94%,transparent) 96%,
      var(--bg-page) 100%),
      linear-gradient(90deg,var(--bg-page) 0%,transparent 22%,transparent 78%,var(--bg-page) 100%);
  }
}
body.light .hb-card.is-active { box-shadow:0 10px 32px #00000014; }
.hb-card--composited::after { content:none; }
.hb-card.is-active::after,.hb-card.is-active .hb-visual::after { opacity:var(--hb-edge-fade,0); }
.hb-stage.is-draggable,.hb-stage.is-draggable .hb-card {cursor:grab;}
.hb-stage.is-dragging,.hb-stage.is-dragging .hb-card {cursor:grabbing;}
.hb-stage.is-dragging .hb-card,.hb-stage.is-dragging .hb-card::after,.hb-stage.is-dragging .hb-visual::after {transition:none;}
.hb-media,.hb-backdrop {pointer-events:none; -webkit-user-drag:none;}
.hb-card.is-away { opacity:0; pointer-events:none; }
.hb-media,.hb-backdrop,.hb-shade { position:absolute; inset:0; width:100%; height:100%; }
.hb-media { object-fit:cover; object-position:center; }
.hb-backdrop { object-fit:cover; transform:scale(1.1); filter:blur(24px) brightness(.5); }
.hb-card.is-portrait .hb-media { object-fit:contain; }
.hb-shade { background:linear-gradient(0deg,#000d,transparent 90%); }
.hb-copy { position:absolute; bottom:0; left:0; right:0; display:flex; flex-direction:column; align-items:flex-start; padding:clamp(16px,2vw,28px); gap:10px; }
.hb-title { font-size:clamp(20px,2.1vw,30px); line-height:1.25; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hb-description { font-size:14px; line-height:1.5; color:#e5eaf0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.hb-cta { display:inline-flex; padding:9px 18px; border-radius:99px; background:linear-gradient(110deg,#0baad9,#10b995); color:white; font-size:13px; font-weight:600; }
.hb-card:not(.is-active) .hb-cta { visibility:hidden; }
/* 轻量线条 + 渐隐光晕，保留足够点击区域，不给两侧预览加实心圆形边界。 */
.hb-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:3; display:grid; place-items:center; width:52px; height:80px; padding:0; border:0; border-radius:24px; color:var(--fg-default,#f7f7f7); background:transparent; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.hb-arrow::before { content:""; position:absolute; inset:-8px; pointer-events:none; border-radius:50%; background:radial-gradient(ellipse,var(--bg-page) 0%,transparent 72%); opacity:.65; transition:opacity .2s ease,transform .2s ease; }
.hb-arrow svg { position:relative; width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; opacity:.62; transition:opacity .2s ease,transform .2s ease; }
.hb-arrow:hover::before,.hb-arrow:focus-visible::before { opacity:1; transform:scale(1.12); }
.hb-arrow:hover svg,.hb-arrow:focus-visible svg { opacity:1; }
.hb-prev:hover svg { transform:translateX(-2px); }.hb-next:hover svg { transform:translateX(2px); }
.hb-arrow:active svg { transform:scale(.92); }
.hb-prev {left:10px;}.hb-next {right:10px;}
.hb-controls {display:flex;align-items:center;justify-content:center;gap:18px;min-height:28px;}
.hb-dots {display:flex;align-items:center;gap:7px;}.hb-dot {height:6px;width:18px;border:0;border-radius:8px;background:var(--fg-subtle,#777);padding:0;cursor:pointer;transition:width .25s;}
.hb-dot[aria-current="true"] {width:34px;background:var(--brand,#09caf5);}
.hb-pause {border:0;background:transparent;color:var(--fg-muted,#aaa);font:inherit;font-size:12px;cursor:pointer;padding:5px;}
.hb-status {font-size:13px;color:var(--fg-secondary);text-align:center;margin:4px 0 0;min-height:0;}
.hb :focus-visible {outline:2px solid var(--brand,#09caf5);outline-offset:3px;}
#homeProjectsSection .zm-prompt-types {margin:0;width:min(420px,100%);}
#homeProjectsSection .home-projects-heading {display:flex;flex:1;min-width:0;align-items:center;gap:18px;flex-wrap:wrap;}
.home-projects-heading h2 {margin:0;font-size:18px;white-space:nowrap;}
#homeProjectsSection .home-project-count {font-size:12px;color:var(--fg-muted);}
body.zm-guest #homeLanding.zm-page,html.zm-guest #homeLanding.zm-page,body.zm-guest.zm-has-demo-wall #homeLanding.zm-page,html.zm-guest.zm-has-demo-wall #homeLanding.zm-page {min-height:0;justify-content:flex-start;padding-top:28px;}
@media(max-width:760px) {
  #homeLanding.zm-page {padding-top:14px;}.hb {margin-bottom:24px;}
  .hb-stage {height:clamp(220px,53vw,370px);}.hb-card {width:88%;aspect-ratio:16/10;}
  .hb-copy {gap:7px;padding:16px;}.hb-description {font-size:12px;-webkit-line-clamp:1;}.hb-title {font-size:20px;}
  .hb-cta {padding:6px 12px;font-size:12px;}.hb-arrow {width:44px;height:64px;}.hb-arrow svg {width:22px;height:22px;}.hb-prev {left:0}.hb-next{right:0}
  #homeProjectsSection .home-projects-heading {gap:12px;}
}
@media(prefers-reduced-motion:reduce) {.hb-card,.hb-card::after,.hb-visual::after,.hb-dot,.hb-arrow::before,.hb-arrow svg {transition:none;}}