/* =========================================================================
   HomepageTab — Landing Page Stylesheet
   设计原则：
   - 暗色优先（@media prefers-color-scheme 自动切换）
   - 字体栈使用系统字体（零依赖、零字体抖动）
   - 设计令牌集中管理（CSS 变量）
   - 移动端优先 + 桌面端断点
   - 无外部库，可被任何静态托管直接服务
   ========================================================================= */

/* -------------------- 设计令牌（亮色与暗色） -------------------- */

:root {
  /* 留白节奏 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* 圆角（与 extension 主应用 styles.css 四级令牌对齐） */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* 字体（对齐 apple.com：SF Pro 系统栈 + 中文 PingFang） */
  --font-system: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "SF Pro Text", "Segoe UI", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* 字号阶梯（自上而下：展示 → 正文 → 界面 → 说明 → 最小） */
  --text-fine: 12px;
  --text-caption: 13px;
  --text-ui: 14px;
  --text-nav: 12px;
  --text-body: 17px;
  --text-body-lg: 21px;
  --text-hero-sub: 28px;
  --text-link: 17px;
  --lh-body: 1.4705882353;
  --lh-body-lg: 1.381;
  --lh-tight: 1.05;
  --lh-snug: 1.0714285714;
  --tracking-tight: -0.015em;
  --tracking-hero: -0.02em;

  /* 容器宽度（Apple 营销页常用 ~1068px 内容区） */
  --container-max: 1068px;
  --container-narrow-max: 692px;

  /* 阴影 */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 24px 64px rgba(15, 23, 42, 0.12);

  /* 缓动 */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* 亮色主题（参考 apple.com 中性色 + 系统蓝链接） */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #fbfbfd;
  --bg-elevated: #ffffff;
  --bg-subtle: #f5f5f7;
  --bg-overlay: rgba(251, 251, 253, 0.8);
  --border: rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.12);
  --fg: #1d1d1f;
  --fg-strong: #1d1d1f;
  --fg-muted: #6e6e73;
  --fg-subtle: #86868b;
  --accent: #0071e3;
  --accent-hover: #0077ed;
  --accent-soft: rgba(0, 113, 227, 0.08);
  --accent-fg: #ffffff;
  --hero-bg: #fbfbfd;
}

/* 暗色主题 */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #000000;
    --bg-elevated: #1d1d1f;
    --bg-subtle: #161617;
    --bg-overlay: rgba(0, 0, 0, 0.72);
    --border: rgba(255, 255, 255, 0.1);
    --border-strong: rgba(255, 255, 255, 0.16);
    --fg: #f5f5f7;
    --fg-strong: #f5f5f7;
    --fg-muted: #a1a1a6;
    --fg-subtle: #6e6e73;
    --accent: #2997ff;
    --accent-hover: #40a9ff;
    --accent-soft: rgba(41, 151, 255, 0.12);
    --accent-fg: #ffffff;
    --hero-bg: #000000;
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.55);
  }
}

/* 用户手动切换 */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --bg-elevated: #1d1d1f;
  --bg-subtle: #161617;
  --bg-overlay: rgba(0, 0, 0, 0.72);
  --border: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.16);
  --fg: #f5f5f7;
  --fg-strong: #f5f5f7;
  --fg-muted: #a1a1a6;
  --fg-subtle: #6e6e73;
  --accent: #2997ff;
  --accent-hover: #40a9ff;
  --accent-soft: rgba(41, 151, 255, 0.12);
  --accent-fg: #ffffff;
  --hero-bg: #000000;
}

/* -------------------- 重置 -------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-system);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-tap-highlight-color: transparent;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.18s var(--ease-out);
}
a:hover {
  color: var(--accent-hover);
}
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--fg-strong);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  font-weight: 600;
}

p {
  margin: 0;
}

blockquote {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
  padding: 0;
}

/* -------------------- 跳过链接（a11y） -------------------- */

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: var(--fg-strong);
  color: var(--bg);
  border-radius: var(--radius-sm);
  z-index: 1000;
  transition: top 0.18s var(--ease-out);
}
.skip-link:focus {
  top: var(--space-4);
}

/* -------------------- 容器 -------------------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 max(22px, env(safe-area-inset-left));
}

@media (min-width: 768px) {
  .container {
    padding: 0 48px;
  }
}

@media (min-width: 1068px) {
  .container {
    padding: 0 22px;
  }
}

.container-narrow {
  max-width: var(--container-narrow-max);
}

/* -------------------- Header / Nav -------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  background: var(--bg-overlay);
  border-bottom: 1px solid transparent;
  transition: border-color 0.18s var(--ease-out);
}
.site-header[data-elevate].is-elevated {
  border-bottom-color: var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 52px;
  height: auto;
  padding: 8px 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--fg-strong);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.brand:hover {
  color: var(--fg-strong);
}
.brand-logo {
  width: 28px;
  height: 28px;
  border-radius: 7px;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 32px);
}

.primary-nav a:not(.nav-cta) {
  font-size: var(--text-ui);
  font-weight: 400;
  color: var(--fg-strong);
  opacity: 0.88;
  padding: 6px 0;
  border-radius: 0;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.primary-nav a:not(.nav-cta):hover {
  color: var(--fg-strong);
  opacity: 1;
  background: transparent;
  text-decoration: none;
}

/* 顶栏安装入口：Muzli 式实心 pill 按钮 */
.primary-nav .nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 18px;
  margin-left: 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent-fg);
  background: var(--accent);
  opacity: 1;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  line-height: 1.2;
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out);
}

.primary-nav .nav-cta:hover {
  background: var(--accent-hover);
  color: var(--accent-fg);
  text-decoration: none;
}

/* 仅展示与当前浏览器匹配的安装入口 */
.browser-cta:not(.is-browser-match) {
  display: none !important;
}

@media (max-width: 734px) {
  .primary-nav a:not(.nav-cta) {
    display: none;
  }

  .primary-nav .nav-cta {
    min-height: 40px;
    padding: 0 20px;
    font-size: 15px;
  }
}

/* -------------------- 叙事区块（Apple 式大标题 + 留白） -------------------- */

.band-eyebrow {
  margin: 0 0 var(--space-4);
  font-size: var(--text-body-lg);
  font-weight: 600;
  color: var(--fg-muted);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-body-lg);
}

.band-title {
  margin: 0 0 var(--space-5);
  font-size: clamp(32px, 5.2vw, 56px);
  font-weight: 600;
  letter-spacing: var(--tracking-hero);
  line-height: var(--lh-snug);
  color: var(--fg-strong);
  text-wrap: balance;
  overflow-wrap: break-word;
}

@media (min-width: 900px) {
  .widget-gallery-head .band-lead {
    max-width: none;
    white-space: normal;
  }
}

/* 多语言标题优先保持一行，超出可用宽度时在容器内平衡换行。 */
.hero-title {
  white-space: normal;
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* Hero 副文案同样会随语言变长，禁止桌面端强制单行。 */
.hero-tagline {
  white-space: normal;
  text-wrap: balance;
}

/* 底部 CTA 也使用多语言文案，避免长标题把整页横向撑开。 */
.cta-title {
  white-space: normal;
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* 小组件标题允许自然换行，避免长文案向右溢出。 */
.widget-gallery-head .band-title {
  white-space: normal;
  text-wrap: balance;
}

/* Spotlight 文案也会随语言变长，允许标题在网格列内自然换行。 */
.spotlight-copy .band-title {
  white-space: normal;
  text-wrap: balance;
}

.band-lead {
  margin: 0;
  font-size: var(--text-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--fg-muted);
  max-width: 28em;
  font-weight: 400;
  letter-spacing: 0.011em;
}

.link-more {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  margin-top: var(--space-6);
  font-size: var(--text-link);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--accent);
  letter-spacing: -0.01em;
}
.link-more::after {
  content: "›";
  font-size: 1.2em;
  line-height: 1;
  font-weight: 400;
}
.link-more:hover {
  text-decoration: underline;
  color: var(--accent-hover);
}

.story-band {
  padding: clamp(72px, 10vw, 112px) 0 clamp(56px, 8vw, 96px);
  text-align: center;
  background: var(--bg);
}
.story-band--alt {
  background: var(--bg-subtle);
}

.story-band__copy {
  max-width: var(--container-narrow-max);
  margin: 0 auto clamp(40px, 6vw, 64px);
}

/* -------------------- Hero -------------------- */

.hero {
  padding: clamp(56px, 8vw, 88px) 0 clamp(24px, 4vw, 40px);
  background: var(--hero-bg);
  overflow: visible;
}

.hero-copy {
  /* 给标题足够的横向空间；窄屏仍由视口宽度自然触发换行。 */
  max-width: min(1100px, 94vw);
  margin: 0 auto;
  padding: 0 max(22px, env(safe-area-inset-left)) clamp(40px, 6vw, 64px)
    max(22px, env(safe-area-inset-right));
  text-align: center;
}

/* 品类眉标：标题上方一行，告知「这是什么」 */
.hero-eyebrow {
  margin: 0 0 clamp(12px, 2vw, 16px);
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: var(--lh-body);
  font-weight: 400;
  color: var(--fg-subtle);
  letter-spacing: 0.04em;
}

.hero-title {
  margin: 0 0 clamp(12px, 2vw, 16px);
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 600;
  letter-spacing: var(--tracking-hero);
  line-height: 1.05;
  color: var(--fg-strong);
}

.hero-subhead {
  margin: 0 auto clamp(8px, 1.2vw, 12px);
  max-width: 20em;
  font-size: clamp(19px, 2.4vw, 24px);
  line-height: 1.4705882353;
  font-weight: 400;
  color: var(--fg-muted);
  letter-spacing: 0.007em;
}

.hero-tagline {
  margin: 0 auto clamp(36px, 5vw, 48px);
  max-width: 28em;
  font-size: clamp(19px, 2.4vw, 24px);
  line-height: 1.4705882353;
  font-weight: 400;
  color: var(--fg-muted);
  letter-spacing: 0.007em;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
}

.hero-footnote {
  margin: var(--space-6) 0 0;
  font-size: var(--text-caption);
  line-height: var(--lh-body);
  color: var(--fg-subtle);
  letter-spacing: -0.01em;
}

.hero-footnote-link {
  color: var(--accent);
  font-weight: 400;
}

.hero-footnote-link:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

.hero-footnote-sep {
  opacity: 0.72;
}

.hero-meta {
  margin: var(--space-6) 0 0;
  font-size: var(--text-caption);
  line-height: var(--lh-body);
  color: var(--fg-muted);
  letter-spacing: 0.007em;
}

/* Hero 六屏画廊：3×2 等分网格，对齐、留白、无装饰（Apple 式产品展示） */
.hero-visual {
  padding: clamp(32px, 5vw, 56px) 0 clamp(48px, 7vw, 80px);
  background: var(--bg-subtle);
}

.hero-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.8vw, 18px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.hero-gallery__cell {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.hero-gallery__trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: zoom-in;
}

.hero-gallery__shot {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3022 / 1606;
  object-fit: cover;
  object-position: top center;
  transition: transform 180ms var(--ease-out);
}

.hero-gallery__trigger:hover .hero-gallery__shot,
.hero-gallery__trigger:focus-visible .hero-gallery__shot {
  transform: scale(1.015);
}

.hero-gallery__trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

@media (max-width: 900px) {
  .hero-gallery__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(10px, 2.4vw, 14px);
  }
}

@media (max-width: 520px) {
  .hero-gallery__grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin: 0 auto;
  }
}

.hero-scroll {
  display: inline-flex;
  margin-top: clamp(32px, 5vw, 48px);
}

/* 原生 dialog 提供模态焦点管理，图片预览只服务于首屏六张产品截图。 */
.image-lightbox {
  width: min(96vw, 1400px);
  max-width: none;
  max-height: 94vh;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffffff;
  overflow: visible;
}

.image-lightbox::backdrop {
  background: rgb(15 23 42 / 76%);
  backdrop-filter: blur(8px);
}

.image-lightbox__surface {
  position: relative;
  display: block;
}

.image-lightbox__figure {
  min-width: 0;
  margin: 0;
  text-align: center;
}

.image-lightbox__image {
  display: block;
  width: 100%;
  max-width: 1120px;
  max-height: min(84vh, 960px);
  margin: 0 auto;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: 0 24px 64px rgb(0 0 0 / 32%);
}

.image-lightbox__caption {
  margin: 12px auto 0;
  color: rgb(255 255 255 / 86%);
  font-size: var(--text-ui);
  line-height: var(--lh-body);
}

.image-lightbox__control {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 88%);
  color: #1d1d1f;
  cursor: pointer;
  box-shadow: 0 4px 16px rgb(0 0 0 / 18%);
  transition: background 160ms var(--ease-out), transform 160ms var(--ease-out);
}

.image-lightbox__icon {
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.image-lightbox__control:hover,
.image-lightbox__control:focus-visible {
  background: #ffffff;
}

.image-lightbox__control:active {
  transform: scale(0.94);
}

.image-lightbox__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  font-size: 24px;
}

.image-lightbox__previous,
.image-lightbox__next {
  position: absolute;
  top: 50%;
  z-index: 1;
  transform: translateY(-50%);
}

.image-lightbox__previous {
  left: 16px;
}

.image-lightbox__next {
  right: 16px;
}

.image-lightbox__previous:active,
.image-lightbox__next:active {
  transform: translateY(-50%) scale(0.94);
}

@media (max-width: 560px) {
  .image-lightbox {
    width: calc(100vw - 24px);
  }

  .image-lightbox__surface {
    padding: 0;
  }

  .image-lightbox__control {
    width: 36px;
    height: 36px;
  }

  .image-lightbox__close {
    top: 12px;
    right: 12px;
  }

  .image-lightbox__previous {
    left: 10px;
  }

  .image-lightbox__next {
    right: 10px;
  }
}

/* 桌面截图：CSS 控制展示尺寸，不用 HTML 原始像素宽高 */
.showcase-frame {
  margin: 0 auto;
  padding: 0 var(--space-5);
  max-width: 960px;
  text-align: center;
}

.desktop-shot {
  display: block;
  width: 100%;
  max-width: min(960px, 92vw);
  max-height: min(46vh, 480px);
  height: auto;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  object-fit: contain;
  aspect-ratio: 3022 / 1606;
  transition: opacity 0.22s var(--ease-out);
}

.desktop-shot.is-swapping {
  opacity: 0.5;
}

.showcase-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
  margin: 0 auto clamp(32px, 5vw, 48px);
  padding: 2px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: var(--radius-pill);
}

.showcase-tab {
  padding: 7px 16px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--fg-muted);
  font-size: var(--text-nav);
  font-weight: 400;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.showcase-tab:hover {
  color: var(--fg-strong);
}
.showcase-tab.is-active {
  background: var(--bg-elevated);
  color: var(--fg-strong);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.showcase-caption {
  margin: clamp(24px, 4vw, 40px) auto 0;
  max-width: 32em;
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--fg-muted);
  text-align: center;
}

/* -------------------- 分镜 Spotlight -------------------- */

.story-spotlight {
  padding: clamp(72px, 10vw, 112px) 0;
  background: var(--bg);
}

/* 与 .story-spotlight 同用时需更高优先级，否则 alt 底色被覆盖 */
.story-spotlight.story-band--alt {
  background: var(--bg-subtle);
}

.spotlight-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}

/* 网格子项允许收缩，避免图片的原始像素尺寸撑坏两列布局。 */
.spotlight-grid > * {
  min-width: 0;
}

@media (min-width: 900px) {
  .spotlight-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-9);
  }
  .story-spotlight--reverse .spotlight-grid {
    direction: rtl;
  }
  .story-spotlight--reverse .spotlight-grid > * {
    direction: ltr;
  }
}

.spotlight-copy {
  text-align: left;
}
.spotlight-copy .band-title {
  font-size: clamp(28px, 4.2vw, 48px);
  line-height: 1.0833333333;
  margin-bottom: var(--space-4);
}
.spotlight-copy .band-lead {
  max-width: 22em;
}

.spotlight-visual {
  margin: 0;
}
.spotlight-visual img {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.spotlight-visual--pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  max-width: 560px;
}
.spotlight-visual--pair img {
  max-width: none;
}

.spotlight-visual--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: start;
  /* 懒加载图片尚未完成时也保持图片区宽度，避免网格退化成空白小块。 */
  width: min(100%, 480px);
  max-width: 480px;
  margin: 0 auto;
}
.spotlight-visual--grid img {
  display: block;
  width: 100%;
  min-width: 0;
  height: auto;
  align-self: start;
  object-fit: contain;
  max-width: none;
}

/* 懒加载尚未完成时，按真实资源比例预留空间，避免 HTML height 属性撑成竖条。 */
.spotlight-visual--grid .spotlight-image--rss {
  aspect-ratio: 2240 / 1376;
}
.spotlight-visual--grid .spotlight-image--dev-toolbox {
  aspect-ratio: 776 / 586;
}
.spotlight-visual--grid .spotlight-image--github-trending {
  aspect-ratio: 576 / 433;
}
.spotlight-visual--grid .spotlight-image--calculator {
  aspect-ratio: 3012 / 1594;
}

/* -------------------- Widget 横向画廊（Mac lineup 式） -------------------- */

.widget-gallery-section {
  padding: clamp(72px, 10vw, 112px) 0;
  overflow: hidden;
  --widget-tile-width: 260px;
}

.widget-gallery-section.story-band--alt {
  background: var(--bg-subtle);
}

.widget-gallery-head {
  text-align: center;
  /* 长文本语言需要更宽的标题行，避免单行溢出后视觉偏右。 */
  max-width: min(var(--container-max), 90vw);
  margin: 0 auto clamp(40px, 6vw, 56px);
}

/* 慢速横向 feed：单行陈列 + JS 驱动滚动（悬停暂停、可拖拽） */
.feed-slider {
  overflow: hidden;
  width: 100%;
  padding: var(--space-2) 0 var(--space-4);
  cursor: grab;
  touch-action: pan-y;
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 6%,
    #000 94%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 6%,
    #000 94%,
    transparent
  );
}

.feed-slider.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.feed-slider__track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.feed-slider__group {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  padding: 0 var(--space-6);
  list-style: none;
  flex: 0 0 auto;
}

@media (prefers-reduced-motion: reduce) {
  .feed-slider {
    cursor: auto;
    mask-image: none;
    -webkit-mask-image: none;
  }

  .feed-slider__track {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    transform: none !important;
  }

  .feed-slider__group {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
  }

  .feed-slider__group[aria-hidden="true"] {
    display: none;
  }
}

.widget-gallery-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--space-5);
  padding-bottom: var(--space-4);
}
.widget-gallery-scroll:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.widget-gallery-track {
  display: flex;
  gap: var(--space-5);
  width: max-content;
  padding: 0 max(var(--space-5), calc((100vw - 1200px) / 2 + var(--space-5)));
  list-style: none;
}

.widget-tile {
  flex: 0 0 auto;
  width: var(--widget-tile-width);
  scroll-snap-align: start;
  text-align: center;
}

/* 截图透明区底色与 story-band--alt 区块一致，避免透出白底 */
.widget-tile img {
  display: block;
  width: var(--widget-tile-width);
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: none;
  background-color: var(--bg-subtle);
}
.widget-tile__name {
  margin: var(--space-4) 0 0;
  font-size: var(--text-body-lg);
  font-weight: 600;
  color: var(--fg-strong);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-body-lg);
}

.widget-gallery-footnote {
  margin: clamp(32px, 5vw, 48px) auto 0;
  max-width: 32em;
  text-align: center;
  font-size: var(--text-body);
  color: var(--fg-muted);
  line-height: var(--lh-body);
}

/* -------------------- 用户评价 -------------------- */

.voices-band {
  padding: clamp(72px, 10vw, 112px) 0;
  background: var(--bg);
}

.voices-head {
  text-align: center;
  max-width: var(--container-narrow-max);
  margin: 0 auto clamp(40px, 6vw, 56px);
}

.voices-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  list-style: none;
  padding: 0;
  /* 保留 .container 的水平居中，勿写 margin: 0 覆盖 margin-inline: auto */
  margin-inline: auto;
  margin-block: 0;
  align-items: stretch;
  justify-items: stretch;
}

@media (min-width: 640px) {
  .voices-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1068px) {
  .voices-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
  }
}

.voices-band .voice-card {
  margin: 0;
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
  min-height: 100%;
}

.voices-band .voice-quote {
  width: 100%;
  margin: 0 0 var(--space-4);
  padding: 0;
  border: 0;
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--fg-strong);
  font-weight: 400;
  text-align: left;
  quotes: none;
}

.voices-band .voice-quote::before {
  content: "\201C";
  color: var(--fg-subtle);
}

.voices-band .voice-attribution {
  width: 100%;
  margin-top: auto;
  padding-top: var(--space-2);
  text-align: left;
}

.voices-band .voice-name {
  margin: 0;
  font-size: var(--text-caption);
  line-height: var(--lh-body);
  font-weight: 500;
  color: var(--fg-muted);
  letter-spacing: -0.01em;
}

.voices-band .voice-meta {
  margin: var(--space-1) 0 0;
  font-size: var(--text-fine);
  line-height: var(--lh-body);
  color: var(--fg-subtle);
  letter-spacing: -0.01em;
}

/* -------------------- 价值观 -------------------- */

.values-band {
  padding: clamp(72px, 10vw, 112px) 0;
  background: var(--bg-subtle);
}

.values-head {
  text-align: center;
  max-width: var(--container-narrow-max);
  margin: 0 auto clamp(48px, 7vw, 72px);
}

.values-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  max-width: 980px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
}

@media (min-width: 768px) {
  .values-list {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }
}

.values-list h3 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-body-lg);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-body-lg);
}
.values-list p {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--fg-muted);
  letter-spacing: -0.01em;
}

/* -------------------- Buttons（Apple 胶囊 CTA） -------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 22px;
  border-radius: 980px;
  font-size: var(--text-link);
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 1.1764705882;
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out),
    border-color 0.2s var(--ease-out);
  white-space: nowrap;
  user-select: none;
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-fg);
}
.btn-primary:hover {
  background: var(--accent-hover);
  color: var(--accent-fg);
}

.btn-secondary {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 0 21px;
}
.btn-secondary:hover {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
}

/* -------------------- CTA -------------------- */

.cta-band {
  padding: clamp(80px, 11vw, 120px) 0;
  background: var(--bg);
  text-align: center;
}

.cta-inner {
  /* 标题优先保持完整一行，说明文字仍单独限制阅读宽度。 */
  max-width: min(1000px, 94vw);
  margin: 0 auto;
}

.cta-title {
  margin: 0 0 var(--space-5);
  font-size: clamp(32px, 5.5vw, 56px);
  font-weight: 600;
  letter-spacing: var(--tracking-hero);
  line-height: var(--lh-snug);
}

.cta-lead {
  max-width: var(--container-narrow-max);
  margin: 0 auto clamp(40px, 6vw, 56px);
  font-size: var(--text-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--fg-muted);
  letter-spacing: 0.007em;
}

.cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.cta-more {
  margin-top: var(--space-7);
  font-size: var(--text-caption);
  line-height: var(--lh-body);
  color: var(--fg-muted);
}
.cta-more summary {
  cursor: pointer;
  color: var(--accent);
  list-style: none;
}
.cta-more summary::-webkit-details-marker {
  display: none;
}
.cta-more-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.footer-tagline {
  margin: var(--space-4) 0 0;
  color: var(--fg-muted);
  font-size: var(--text-caption);
  line-height: var(--lh-body);
  max-width: 32ch;
  letter-spacing: -0.01em;
}
.footer-tagline-echo {
  margin-top: var(--space-2);
  letter-spacing: 0;
  color: var(--fg-subtle);
}

/* -------------------- 入场动画 -------------------- */

.fade-in-up {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

.fade-in-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* LEGACY: 保留旧 class 以免法律页等引用断裂 */
.section { padding: var(--space-9) 0; }
.section-head { text-align: center; max-width: 720px; margin: 0 auto var(--space-8); }
.section-title { font-size: clamp(30px, 4.2vw, 48px); font-weight: 600; letter-spacing: -0.03em; margin: 0 0 var(--space-4); }
.section-subtitle { font-size: 19px; color: var(--fg-muted); margin: 0; }

/* -------------------- Footer -------------------- */

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-subtle);
  padding-top: var(--space-9);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}

@media (min-width: 800px) {
  .footer-inner {
    grid-template-columns: 1fr 2fr;
  }
}

.footer-brand .brand-text {
  font-size: var(--text-body);
  font-weight: 600;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

.footer-links .language-picker {
  grid-column: 1 / -1;
}

@media (min-width: 600px) {
  .footer-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .footer-links {
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(240px, 1.6fr);
  }
  .footer-links .language-picker {
    grid-column: auto;
  }
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-col-title {
  font-size: var(--text-ui);
  font-weight: 600;
  color: var(--fg-muted);
  text-transform: none;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3) 0;
}

.footer-col a {
  font-size: var(--text-ui);
  line-height: var(--lh-body);
  color: var(--fg-muted);
  letter-spacing: -0.01em;
}
.footer-col a:hover {
  color: var(--fg-strong);
}

.footer-col a[aria-current="true"] {
  color: var(--fg-strong);
  font-weight: 600;
}

/* 语言是低频设置：默认收起，打开后在 footer 上方浮出可滚动的多列弹窗。 */
.language-picker {
  position: relative;
  min-width: 0;
}

.language-picker > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.language-picker > summary::-webkit-details-marker {
  display: none;
}

.language-picker > summary::after {
  display: none;
}

.language-picker .footer-col-title {
  margin: 0;
}

.language-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: min(280px, 100%);
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--fg-strong);
  font-size: var(--text-ui);
  line-height: 1.3;
  transition: border-color 160ms var(--ease-out), background 160ms var(--ease-out);
}

.language-picker > summary:hover .language-select-trigger,
.language-picker > summary:focus-visible .language-select-trigger {
  border-color: var(--fg-subtle);
  background: var(--bg);
}

.language-select-chevron {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 9px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 160ms var(--ease-out);
}

.language-picker[open] .language-select-chevron {
  transform: translateY(2px) rotate(225deg);
}

.language-picker-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 20px;
  /* 三列需要足够的最小阅读宽度，避免长语言名称被压缩得难以识别。 */
  width: min(720px, calc(100vw - 32px));
  max-height: min(360px, 60vh);
  overflow-y: auto;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  box-shadow: 0 16px 38px rgb(0 0 0 / 12%);
  backdrop-filter: blur(16px);
}

/* RTL 页脚的语言入口位于左侧，弹窗向右展开，避免首列被视口裁剪。 */
html[dir="rtl"] .language-picker-panel {
  right: auto;
  left: 0;
}

.language-picker-panel a {
  min-width: 0;
  padding: 7px 6px;
  border-radius: var(--radius-sm);
  color: var(--fg-muted);
  font-size: var(--text-ui);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.language-picker-panel a:hover,
.language-picker-panel a:focus-visible {
  color: var(--fg-strong);
  background: var(--bg-elevated);
  outline: none;
}

.language-picker-panel a[aria-current="true"] {
  color: var(--fg-strong);
  background: var(--accent-soft);
  font-weight: 600;
}

.language-picker-compact {
  display: inline-block;
}

.language-picker-compact > summary {
  align-items: flex-start;
  color: var(--fg-muted);
  font-size: var(--text-ui);
}

.language-picker-compact .language-select-trigger {
  width: min(240px, 100%);
}

@media (max-width: 599px) {
  .language-picker-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 紧凑 footer（用于法律页） */
.footer-inner-compact {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  text-align: center;
}
@media (min-width: 768px) {
  .footer-inner-compact {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
  }
}
.footer-links-compact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-5);
}
.footer-links-compact a {
  font-size: var(--text-ui);
  color: var(--fg-muted);
}
.footer-links-compact a:hover {
  color: var(--fg-strong);
}

.footer-bottom {
  margin-top: var(--space-7);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: var(--text-fine);
  color: var(--fg-subtle);
}

.footer-bottom-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
}

.footer-bottom .footer-copyright,
.footer-bottom .footer-icp {
  margin: 0;
}

/* 无备案文案的语言：不占据空白行 */
.footer-bottom .footer-icp:empty {
  display: none;
}

.footer-icp a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-icp a:hover {
  color: var(--fg-muted);
}

/* -------------------- 法律页（隐私政策 / 服务条款） -------------------- */

.legal-page {
  padding: var(--space-8) 0 var(--space-9);
}

.legal-head {
  text-align: center;
  margin-bottom: var(--space-8);
}

.legal-title {
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 0 var(--space-3) 0;
}

.legal-updated {
  font-size: 14px;
  color: var(--fg-subtle);
  margin: 0;
}

.legal-body {
  font-size: 16px;
  line-height: 1.75;
  color: var(--fg);
}

.legal-body h2 {
  font-size: 24px;
  font-weight: 700;
  margin: var(--space-7) 0 var(--space-4) 0;
  letter-spacing: -0.015em;
}

.legal-body h3 {
  font-size: 19px;
  font-weight: 600;
  margin: var(--space-6) 0 var(--space-3) 0;
}

.legal-body h2:first-child,
.legal-body h3:first-child {
  margin-top: 0;
}

.legal-body p {
  margin: 0 0 var(--space-4) 0;
}

.legal-body strong {
  color: var(--fg-strong);
  font-weight: 600;
}

.legal-body code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 2px 6px;
  background: var(--bg-subtle);
  border-radius: 4px;
  border: 1px solid var(--border);
}

.legal-body ul {
  margin: 0 0 var(--space-4) 0;
  padding-left: var(--space-5);
  list-style: disc;
}

.legal-body li {
  margin-bottom: var(--space-2);
}

.legal-body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* -------------------- 安装与设置说明（install.html） -------------------- */

.guide-page {
  padding: var(--space-8) 0 var(--space-10);
}

.guide-head {
  text-align: center;
  margin-bottom: var(--space-7);
}

.guide-title {
  margin: 0;
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg-strong);
}

.guide-app {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.ig-tabbar {
  display: inline-flex;
  align-self: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  padding: 4px;
  background: var(--bg-subtle);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
}

.ig-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-muted);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.ig-tab:hover {
  color: var(--fg-strong);
}

.ig-tab.is-active {
  background: var(--bg-elevated);
  color: var(--fg-strong);
  box-shadow: var(--shadow-sm);
}

.ig-tab-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.ig-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* hidden 属性需要显式覆盖布局 display，保证 Tab 切换只展示当前面板。 */
.ig-section[hidden] {
  display: none;
}

.ig-section-lead {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--fg);
  text-align: center;
  background: var(--accent-soft);
  border: 1px solid rgba(79, 70, 229, 0.18);
  border-radius: var(--radius-md);
  padding: 14px 18px;
}

.ig-copy-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}

.ig-copy-card-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-muted);
  letter-spacing: 0.04em;
}

.ig-copy-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.ig-copy-input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  color: var(--fg);
}

.ig-copy-btn {
  flex-shrink: 0;
  min-width: 76px;
}

.ig-step-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--fg-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.ig-step-divider::before,
.ig-step-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.ig-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.ig-card[open] {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.ig-card-head {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  font-size: 14px;
  color: var(--fg);
}

.ig-card-head::-webkit-details-marker {
  display: none;
}

.ig-card-name {
  font-weight: 600;
}

.ig-card-meta {
  font-size: 12px;
  color: var(--fg-muted);
  margin-left: auto;
}

.ig-pill-current {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
  font-weight: 600;
  margin-left: auto;
}

.ig-card-arrow {
  flex-shrink: 0;
  color: var(--fg-subtle);
  transition: transform 0.2s;
}

.ig-card:not([open]) .ig-card-arrow {
  transform: rotate(-90deg);
}

.ig-card-body {
  padding: 0 18px 16px;
  border-top: 1px dashed var(--border);
  padding-top: 14px;
}

.ig-card-summary {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--fg-muted);
}

.ig-steps {
  margin: 0;
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ig-steps li {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--fg);
}

.ig-code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--bg-subtle);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
}

.ig-cta-row {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
}

.ig-cta-disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.guide-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(12px);
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: var(--fg-strong);
  color: #fff;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 100;
}

.guide-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 720px) {
  .ig-tabbar {
    align-self: stretch;
    overflow-x: auto;
  }

  .ig-copy-row {
    flex-direction: column;
  }

  .ig-copy-btn {
    width: 100%;
  }
}