.background-shell {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: var(--color-bg-base);
}

.background-shell__ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.background-shell__content {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 100vh;
  padding-left: 240px;
}

/* 首页极简模式：去掉侧边栏留白和环境光 */
.background-shell--minimal .background-shell__content {
  padding-left: 0;
}

@media (max-width: 900px) {
  .background-shell__content {
    padding-left: 0;
  }
}

/*
  分层环境光:
    background  -> 大块柔光,慢速呼吸,提供整体氛围
    middle      -> 中等光斑,中速漂移,做纵深过渡
    highlight   -> 细碎反光点,快速闪烁,模拟水面波光
  色彩全部走 --color-accent* token,主题切换零状态。
*/

.ambient-water {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
}

.ambient-water__layer {
  position: absolute;
  inset: -10%;
  background-repeat: no-repeat;
  will-change: transform, opacity;
}

/* === 后景:大块柔光,撑住整体色相 === */

.ambient-water__layer--bg {
  background:
    radial-gradient(
      circle at 20% 28%,
      color-mix(in srgb, var(--color-accent) 32%, transparent) 0%,
      transparent 40%
    ),
    radial-gradient(
      circle at 78% 72%,
      color-mix(in srgb, var(--color-accent-strong) 26%, transparent) 0%,
      transparent 42%
    );
  filter: blur(90px);
  mix-blend-mode: screen;
  opacity: 0.32;
  animation: ambient-bg-drift 32s ease-in-out infinite alternate;
}

[data-theme='light'] .ambient-water__layer--bg {
  background:
    radial-gradient(
      circle at 20% 28%,
      color-mix(in srgb, var(--color-accent) 14%, transparent) 0%,
      transparent 32%
    ),
    radial-gradient(
      circle at 78% 72%,
      color-mix(in srgb, var(--color-accent-strong) 12%, transparent) 0%,
      transparent 34%
    );
  filter: blur(120px);
  mix-blend-mode: normal;
  opacity: 0.18;
}

/* === 中景:中等光斑,做纵深过渡 === */

.ambient-water__layer--mid {
  background:
    radial-gradient(
      circle at 38% 60%,
      color-mix(in srgb, var(--color-accent-strong) 30%, transparent) 0%,
      transparent 28%
    ),
    radial-gradient(
      circle at 88% 22%,
      color-mix(in srgb, var(--color-accent-tint) 24%, transparent) 0%,
      transparent 30%
    ),
    radial-gradient(
      circle at 58% 88%,
      color-mix(in srgb, var(--color-accent) 22%, transparent) 0%,
      transparent 32%
    );
  filter: blur(50px);
  mix-blend-mode: screen;
  opacity: 0.28;
  animation: ambient-mid-drift 22s ease-in-out infinite alternate;
}

[data-theme='light'] .ambient-water__layer--mid {
  background:
    radial-gradient(
      circle at 38% 60%,
      color-mix(in srgb, var(--color-accent-strong) 14%, transparent) 0%,
      transparent 22%
    ),
    radial-gradient(
      circle at 88% 22%,
      color-mix(in srgb, var(--color-accent-tint) 12%, transparent) 0%,
      transparent 24%
    ),
    radial-gradient(
      circle at 58% 88%,
      color-mix(in srgb, var(--color-accent) 12%, transparent) 0%,
      transparent 24%
    );
  filter: blur(70px);
  mix-blend-mode: normal;
  opacity: 0.16;
}

/* === 前景:细碎反光点 + 椭圆波光,模拟水面闪烁 === */

.ambient-water__layer--highlight {
  background:
    radial-gradient(
      ellipse 200px 70px at 16% 28%,
      color-mix(in srgb, var(--color-accent-strong) 26%, transparent) 0%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 160px 55px at 62% 42%,
      color-mix(in srgb, var(--color-accent-tint) 22%, transparent) 0%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 220px 80px at 32% 76%,
      color-mix(in srgb, var(--color-accent) 22%, transparent) 0%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 180px 60px at 84% 84%,
      color-mix(in srgb, var(--color-accent-strong) 20%, transparent) 0%,
      transparent 70%
    ),
    radial-gradient(
      circle 90px at 48% 18%,
      color-mix(in srgb, var(--color-accent-tint) 20%, transparent) 0%,
      transparent 75%
    );
  filter: blur(22px);
  mix-blend-mode: screen;
  opacity: 0.32;
  animation: ambient-highlight-shimmer 12s ease-in-out infinite alternate;
}

[data-theme='light'] .ambient-water__layer--highlight {
  background:
    radial-gradient(
      ellipse 200px 70px at 16% 28%,
      color-mix(in srgb, var(--color-accent-strong) 16%, transparent) 0%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 160px 55px at 62% 42%,
      color-mix(in srgb, var(--color-accent) 14%, transparent) 0%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 220px 80px at 32% 76%,
      color-mix(in srgb, var(--color-accent-strong) 14%, transparent) 0%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 180px 60px at 84% 84%,
      color-mix(in srgb, var(--color-accent) 14%, transparent) 0%,
      transparent 70%
    ),
    radial-gradient(
      circle 90px at 48% 18%,
      color-mix(in srgb, var(--color-accent-strong) 12%, transparent) 0%,
      transparent 75%
    );
  filter: blur(30px);
  mix-blend-mode: normal;
  opacity: 0.18;
}

@keyframes ambient-bg-drift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    transform: translate3d(2%, 1.5%, 0) scale(1.04);
  }
}

@keyframes ambient-mid-drift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.28;
  }
  50% {
    opacity: 0.22;
  }
  100% {
    transform: translate3d(-3%, -2%, 0) scale(1.07);
    opacity: 0.32;
  }
}

@keyframes ambient-highlight-shimmer {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 0.32;
  }
  35% {
    opacity: 0.22;
  }
  65% {
    opacity: 0.36;
  }
  100% {
    transform: translate3d(2%, 1.5%, 0);
    opacity: 0.28;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-water__layer {
    animation: none;
  }
}
.beta-banner {
  position: relative;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 40px 0 16px;
  height: 38px;
  background: color-mix(in srgb, var(--hp-green) 7%, var(--hp-bg));
  border-bottom: 1px solid color-mix(in srgb, var(--hp-green) 22%, transparent);
  flex-shrink: 0;
}

.beta-banner-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}

.beta-text {
  color: var(--hp-dim);
  font-size: 13px;
}

/* CTA 链接 */
.beta-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--hp-green-bright);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s ease;
  flex-shrink: 0;
}

.beta-cta:hover {
  color: var(--hp-green);
}

.beta-cta-arrow {
  font-size: 12px;
  transition: transform 0.18s var(--hp-ease);
}

.beta-cta:hover .beta-cta-arrow {
  transform: translateX(2px);
}

/* 关闭按钮 */
.beta-close {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: var(--hp-faint);
  cursor: pointer;
  transition:
    color 0.15s ease,
    background 0.15s ease;
}

.beta-close:hover {
  color: var(--hp-dim);
  background: var(--hp-overlay-6);
}

/* 移动端 */
@media (max-width: 600px) {
  .beta-text {
    display: none;
  }

  .beta-banner {
    padding: 0 36px 0 12px;
  }
}
.footer {
  position: relative;
  width: 100%;
  margin-top: auto;
  padding: var(--space-10) var(--space-12) var(--space-6);
  background: var(--color-island-bg);
  backdrop-filter: var(--glass-blur-md);
  -webkit-backdrop-filter: var(--glass-blur-md);
  border-top: 1px solid var(--hp-line);
  overflow: hidden;
}

/* 顶部光圈：延续上方 CTA 区域的绿色光晕，与 .hp-cta::before 同色、无缝衔接 */
.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1200px, 140vw);
  height: 340px;
  background: radial-gradient(ellipse 55% 100% at 50% 0%, rgba(54, 212, 98, 0.14), transparent 70%);
  filter: blur(28px);
  pointer-events: none;
  z-index: 0;
}

/* 高斯模糊背景：贴底巨型绿色光斑，强模糊形成柔和毛玻璃底色 */
.footer::after {
  content: '';
  position: absolute;
  bottom: -45%;
  left: 50%;
  transform: translateX(-50%);
  width: min(1000px, 120vw);
  height: 420px;
  background: radial-gradient(
    ellipse 50% 60% at 50% 100%,
    rgba(54, 212, 98, 0.07),
    transparent 72%
  );
  filter: blur(48px);
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 900px) {
  .footer {
    padding: var(--space-8) var(--space-5) var(--space-5);
  }
}

@media (max-width: 600px) {
  .footer {
    padding: var(--space-8) var(--space-4) calc(var(--space-5) + var(--safe-bottom));
  }
  .footer__top {
    flex-direction: column;
    gap: var(--space-8);
    margin-bottom: var(--space-8);
  }
  .footer__links {
    gap: var(--space-8);
  }
  .footer__col {
    min-width: calc(50% - var(--space-4));
  }
}

.footer__inner {
  max-width: 1080px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.footer__top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-10);
  margin-bottom: var(--space-10);
}

.footer__brand {
  flex: 1;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer__brand-row {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-fg-default);
  font-size: var(--text-md);
  font-weight: 500;
}

.footer__brand-wordmark {
  height: 14px;
  width: auto;
}

.footer__tagline {
  font-size: var(--text-base);
  color: var(--color-fg-muted);
}

.footer__links {
  display: flex;
  gap: var(--space-12);
  flex-wrap: wrap;
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 100px;
}

.footer__col-title {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-fg-subtle);
  margin-bottom: var(--space-1);
}

.footer__col a {
  color: var(--color-fg-muted);
  font-size: var(--text-base);
  transition: color var(--duration-fast) var(--ease);
}

.footer__col a:hover {
  color: var(--color-accent);
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-5);
  border-top: 1px solid var(--halo-divider-soft);
  flex-wrap: wrap;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-fg-disabled);
}

.footer__bottom-left {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.footer__bottom-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 6px var(--color-accent);
}

.footer__top-btn {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-fg-disabled);
  transition: color var(--duration-fast) var(--ease);
}

.footer__top-btn:hover {
  color: var(--color-fg-default);
}

/* 巨型裁切字标：贴底、线性描边、hover glitch 错位（置于光晕之上、内容之下） */
.footer__giant {
  position: absolute;
  left: 50%;
  bottom: 0.08em;
  transform: translateX(-50%);
  font-size: clamp(100px, 17vw, 260px);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px var(--hp-overlay-8);
  user-select: none;
  pointer-events: none;
  overflow: visible;
  z-index: 1;
}
.footer__giant::before,
.footer__giant::after {
  content: 'FORGER';
  position: absolute;
  inset: 0;
  color: transparent;
  -webkit-text-stroke: 1px transparent;
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.35s;
  opacity: 0;
  pointer-events: none;
}
.footer__giant::before {
  -webkit-text-stroke-color: rgba(255, 80, 80, 0.25);
}
.footer__giant::after {
  -webkit-text-stroke-color: rgba(80, 200, 255, 0.25);
}
.footer__giant:hover::before {
  opacity: 1;
  transform: translate(-4px, -2px);
}
.footer__giant:hover::after {
  opacity: 1;
  transform: translate(4px, 2px);
}
.footer__giant:hover {
  -webkit-text-stroke-color: var(--hp-overlay-14);
}
/* ============================================================
   导航 MegaMenu 下拉面板（暗黑极简，--hp-* tokens）
   ============================================================ */

.hp-mega {
  position: relative;
  display: flex;
  align-items: center;
}

/* ---------- 触发器 ---------- */
.hp-mega-trigger {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 13px;
  color: var(--hp-dim);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.25s;
  white-space: nowrap;
}
.hp-mega-trigger:hover {
  color: var(--hp-fg);
}
.hp-mega--open .hp-mega-trigger {
  color: var(--hp-fg);
}
.hp-mega-chevron {
  transition: transform 0.3s var(--hp-ease);
  transform: rotate(90deg);
}
.hp-mega--open .hp-mega-chevron {
  transform: rotate(-90deg);
}

/* ---------- 面板容器（Portal 渲染到 body，position:fixed 由 inline style 控制） ---------- */
.hp-mega-panel {
  transform: translateY(6px);
  display: flex;
  flex-direction: column;
  width: 320px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid var(--hp-line);
  background: rgba(10, 12, 14, 0.62);
  backdrop-filter: blur(28px) saturate(1.5);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 0 0 1px var(--hp-overlay-6);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.22s var(--hp-ease),
    transform 0.22s var(--hp-ease);
}
.hp-mega-panel--open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* ---------- 条目 ---------- */
.hp-mega-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 9px;
  text-decoration: none;
  transition: background 0.18s;
}
.hp-mega-item:hover {
  background: var(--hp-overlay-6, rgba(255, 255, 255, 0.06));
}

.hp-mega-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 7px;
  background: var(--hp-overlay-4, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--hp-line);
  color: var(--hp-green);
}
.hp-mega-item:hover .hp-mega-item-icon {
  border-color: color-mix(in srgb, var(--hp-green) 35%, transparent);
  background: rgba(54, 212, 98, 0.08);
}

.hp-mega-item-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.hp-mega-item-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 550;
  color: var(--hp-fg);
  white-space: nowrap;
}
.hp-mega-item-tag {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(54, 212, 98, 0.12);
  color: var(--hp-green-bright);
}
.hp-mega-item-desc {
  font-size: 12px;
  line-height: 1.5;
  color: var(--hp-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
  .hp-mega {
    display: none;
  }
}

/* ---------- 亮色模式 ---------- */
[data-theme='light'] .hp-mega-panel {
  background: rgba(255, 255, 255, 0.72);
  border-color: var(--hp-line);
  box-shadow:
    0 20px 60px rgba(31, 38, 32, 0.12),
    0 0 0 1px var(--hp-overlay-6);
}
[data-theme='light'] .hp-mega-item:hover {
  background: var(--hp-overlay-6);
}
[data-theme='light'] .hp-mega-item-icon {
  background: var(--hp-overlay-4);
  border-color: var(--hp-line);
}
[data-theme='light'] .hp-mega-item:hover .hp-mega-item-icon {
  border-color: color-mix(in srgb, var(--hp-green) 35%, transparent);
  background: rgba(42, 155, 89, 0.08);
}
[data-theme='light'] .hp-mega-item-tag {
  background: rgba(42, 155, 89, 0.1);
  color: var(--hp-green-bright);
}
.lang-switch {
  position: relative;
  display: inline-flex;
}

.lang-switch__trigger {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 8px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--hp-dim);
  font-size: 12px;
  cursor: pointer;
  transition:
    color 0.2s var(--hp-ease),
    background 0.2s var(--hp-ease);
}

.lang-switch__trigger:hover,
.lang-switch__trigger.is-open {
  color: var(--hp-fg);
  background: var(--hp-overlay-6);
}

.lang-switch__trigger > svg:first-child {
  color: inherit;
  opacity: 0.7;
  flex-shrink: 0;
}

.lang-switch__current {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.lang-switch__caret {
  opacity: 0.5;
  transition: transform 0.2s var(--hp-ease);
}

.lang-switch__trigger.is-open .lang-switch__caret {
  transform: rotate(180deg);
}

.lang-switch__menu {
  position: fixed;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  min-width: 148px;
  padding: 6px;
  background: rgba(10, 12, 14, 0.62);
  backdrop-filter: blur(28px) saturate(1.5);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  border: 1px solid var(--hp-line);
  border-radius: 12px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 0 0 1px var(--hp-overlay-6);
  animation: lang-pop 0.22s var(--hp-ease-expo);
}

[data-theme='light'] .lang-switch__menu {
  background: rgba(255, 255, 255, 0.72);
  box-shadow:
    0 20px 60px rgba(31, 38, 32, 0.12),
    0 0 0 1px var(--hp-overlay-6);
}

@keyframes lang-pop {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.lang-switch__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--hp-dim);
  text-align: left;
  cursor: pointer;
  transition:
    background 0.18s var(--hp-ease),
    color 0.18s var(--hp-ease);
}

.lang-switch__item:hover {
  background: var(--hp-overlay-6);
  color: var(--hp-fg);
}

.lang-switch__item.is-active {
  background: var(--hp-green-dim);
  color: var(--hp-fg);
}

.lang-switch__short {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--hp-overlay-6);
  border: 1px solid var(--hp-line);
  font-family: var(--hp-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--hp-dim);
  flex-shrink: 0;
  transition:
    background 0.18s,
    border-color 0.18s,
    color 0.18s;
}

.lang-switch__item:hover .lang-switch__short {
  border-color: color-mix(in srgb, var(--hp-green) 35%, transparent);
}

.lang-switch__item.is-active .lang-switch__short {
  background: var(--hp-green);
  border-color: var(--hp-green);
  color: var(--hp-bg);
}

.lang-switch__meta {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  min-width: 0;
}

.lang-switch__meta strong {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--hp-fg);
  line-height: 1.3;
}

.lang-switch__meta em {
  font-style: normal;
  font-family: var(--hp-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--hp-faint);
  line-height: 1.3;
}

.lang-switch__check {
  color: var(--hp-green);
  flex-shrink: 0;
}
/* ============================================================
   全站浮动导航岛（从 HomePage.css 抽取，hp-nav 类名保持不变）
   依赖 tokens.css 中 :root 级 --hp-* 变量
   ============================================================ */

.hp-nav {
  position: fixed;
  top: 18px;
  left: 0;
  right: 0;
  z-index: 1000;
  width: fit-content;
  max-width: calc(100vw - 32px);
  margin-inline: auto;
  transition: top 0.5s var(--hp-ease-expo);
}

/* 横幅可见且未滚动：导航下移嵌入横幅下方，胶囊完全透明 */
.hp-nav[data-banner='1'] {
  top: 46px;
}
.hp-nav[data-banner='1'] .hp-nav-island {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.hp-nav-island {
  position: relative;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 10px 26px;
  border-radius: 999px;
  background: var(--hp-island-bg);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid var(--hp-line);
  box-shadow: var(--hp-island-shadow);
  transition:
    width 0.5s var(--hp-ease-expo),
    padding 0.5s var(--hp-ease-expo),
    box-shadow 0.5s var(--hp-ease-expo),
    border-color 0.5s var(--hp-ease-expo),
    border-radius 0.5s var(--hp-ease-expo),
    background 0.5s var(--hp-ease-expo),
    backdrop-filter 0.5s var(--hp-ease-expo);
  white-space: nowrap;
}
/* 顶部玻璃高光线 */
.hp-nav-island::before {
  content: '';
  position: absolute;
  top: 0;
  left: 18%;
  right: 18%;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--hp-sheen-md) 35%,
    var(--hp-sheen-hi) 50%,
    var(--hp-sheen-md) 65%,
    transparent
  );
  opacity: 0;
  transition: opacity 0.5s var(--hp-ease-expo);
  pointer-events: none;
}
/* 桌面端：宽度由 JS 控制并过渡，space-between 让品牌/链接/操作三组随宽度
   连续重分布（自适应填满）；宽度连续变化时 space-between 逐帧计算，过渡平滑不跳。 */
@media (min-width: 901px) {
  .hp-nav-island {
    justify-content: space-between;
    gap: 0;
  }
}
.hp-nav-island:hover {
  border-color: var(--hp-overlay-14);
}
/* 滚动后 */
.hp-nav.hp-nav--scrolled .hp-nav-island {
  padding: 9px 32px;
  background: var(--hp-island-bg-strong);
  border-color: var(--hp-line-soft);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: var(--hp-island-shadow);
}
.hp-nav.hp-nav--scrolled .hp-nav-island::before {
  opacity: 0.6;
}

/* ---------- 首页停靠模式：通栏透明 + 发丝线，吸附后收缩为胶囊 ---------- */
.hp-nav--docked {
  position: fixed;
  top: 18px;
  width: 100%;
  max-width: none;
  margin-inline: 0;
}
.hp-nav--docked .hp-nav-island {
  width: 100%;
  margin-inline: auto;
  padding: 16px 40px;
  border-radius: 0;
  background: color-mix(in srgb, var(--hp-bg) 60%, transparent);
  border-color: transparent;
  border-top-color: var(--hp-line);
  border-bottom-color: var(--hp-line);
  box-shadow: none;
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
}
@media (min-width: 901px) {
  .hp-nav--docked.hp-nav--scrolled .hp-nav-island {
    padding: 9px 32px;
    border-radius: 999px;
    background: var(--hp-island-bg-strong);
    border-color: var(--hp-line-soft);
    box-shadow: var(--hp-island-shadow);
    backdrop-filter: blur(14px) saturate(1.3);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
  }
}

.hp-nav-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}
.hp-nav-logo {
  width: 18px;
  height: 18px;
}
.hp-nav-wordmark {
  height: 14px;
  width: auto;
  color: var(--hp-fg);
}
.hp-nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
}
.hp-nav-links a {
  font-size: 13px;
  color: var(--hp-dim);
  text-decoration: none;
  transition: color 0.25s;
}
.hp-nav-links a:hover {
  color: var(--hp-fg);
}
.hp-nav-links a.hp-nav-active {
  color: var(--hp-fg);
  background: var(--hp-overlay-6);
  border-radius: 6px;
  padding: 3px 8px;
  margin: -3px -8px;
}
.hp-nav-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
/* 主题切换：低调圆形图标按钮 */
.hp-nav-theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--hp-dim);
  transition:
    color 0.3s var(--hp-ease),
    background 0.3s var(--hp-ease),
    transform 0.3s var(--hp-ease);
}
.hp-nav-theme:hover {
  color: var(--hp-fg);
  background: var(--hp-overlay-6);
}
.hp-nav-theme:active {
  transform: scale(0.92);
}
.hp-nav-theme svg {
  transition: transform 0.4s var(--hp-ease);
}
.hp-nav-theme:hover svg {
  transform: rotate(15deg);
}
/* 登录/账户：纯文字入口（无卡片/边框），用左侧竖线与导航项分开 */
.hp-nav-auth {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-left: 14px;
  margin-left: 2px;
  border-left: 1px solid var(--hp-overlay-14);
  font-size: 13px;
  color: var(--hp-dim);
  text-decoration: none;
  transition: color 0.3s var(--hp-ease);
}
.hp-nav-auth svg {
  color: var(--hp-green);
  opacity: 0.8;
}
.hp-nav-auth:hover {
  color: var(--hp-fg);
}

/* ---------- 通用按钮（全站共享） ---------- */
.hp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 500;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition:
    background 0.25s,
    border-color 0.25s,
    box-shadow 0.25s,
    color 0.25s;
}
.hp-btn:active {
  transform: scale(0.97);
}
.hp-btn-solid {
  background: var(--hp-btn-solid-bg);
  color: var(--hp-btn-solid-fg);
}
.hp-btn-solid:hover {
  background: var(--hp-btn-solid-bg-hover);
  box-shadow:
    0 0 0 1px var(--hp-overlay-14),
    var(--hp-btn-solid-glow);
}
.hp-btn-ghost {
  border-color: var(--hp-line);
  color: var(--hp-fg);
  background: var(--hp-overlay-2);
}
.hp-btn-ghost:hover {
  border-color: var(--hp-overlay-28);
  background: var(--hp-overlay-6);
}
.hp-btn-sm {
  padding: 7px 18px;
  font-size: 13px;
}
.hp-btn-lg {
  padding: 13px 30px;
  font-size: 15px;
}
.hp-btn-xl {
  padding: 17px 40px;
  font-size: 16px;
}
.hp-btn-arrow {
  transition: transform 0.25s var(--hp-ease);
}
.hp-btn:hover .hp-btn-arrow {
  transform: translateX(3px);
}

/* ---------- 汉堡按钮（仅移动端可见） ---------- */
.hp-nav-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: none;
  background: none;
  color: var(--hp-fg);
  cursor: pointer;
  transition: background 0.2s;
}
.hp-nav-burger:active {
  background: var(--hp-overlay-6);
}

/* ---------- 移动端紧凑链接（桌面隐藏） ---------- */
.hp-nav-compact {
  display: none;
}

/* ---------- 移动端下拉菜单 ---------- */
.hp-nav-mobile-menu {
  display: none;
}

/* ---------- 响应式 ---------- */
@media (max-width: 1200px) {
  .hp-nav-links {
    gap: 16px;
  }
  .hp-nav-island {
    padding: 9px 18px;
  }
}
@media (max-width: 900px) {
  .hp-nav {
    display: none;
  }
}
.mnav {
  display: none;
}

@media (max-width: 900px) {
  .mnav {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
  }

  .mnav__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: color-mix(in srgb, var(--hp-bg) 82%, transparent);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border-bottom: 1px solid var(--hp-line-soft);
  }

  .mnav__brand {
    display: flex;
    align-items: center;
  }

  .mnav__logo {
    width: 20px;
    height: 20px;
  }

  .mnav__icons {
    display: flex;
    align-items: center;
    gap: 2px;
  }

  .mnav__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: none;
    color: var(--hp-dim);
    cursor: pointer;
    text-decoration: none;
    transition:
      color 0.2s,
      background 0.2s;
  }

  .mnav__icon-btn:active {
    background: var(--hp-overlay-6);
    color: var(--hp-fg);
  }

  .mnav__burger {
    color: var(--hp-fg);
  }

  .mnav__menu {
    padding: 14px 16px;
    background: color-mix(in srgb, var(--hp-bg) 92%, transparent);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border-bottom: 1px solid var(--hp-line-soft);
    animation: mnavIn 0.22s var(--hp-ease-expo) both;
  }

  @keyframes mnavIn {
    from {
      opacity: 0;
      transform: translateY(-6px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .mnav__links {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .mnav__links a {
    display: block;
    padding: 11px 12px;
    font-size: 14px;
    color: var(--hp-dim);
    text-decoration: none;
    border-radius: 8px;
    transition:
      background 0.15s,
      color 0.15s;
  }

  .mnav__links a:active,
  .mnav__links a.mnav__link--active {
    background: var(--hp-overlay-6);
    color: var(--hp-fg);
  }

  .mnav__group-label {
    display: block;
    padding: 8px 12px 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--hp-faint);
  }

  .mnav__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--hp-line-soft);
  }

  .mnav__action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 12.5px;
    font-weight: 500;
    border-radius: 8px;
    border: 1px solid var(--hp-line);
    color: var(--hp-fg);
    text-decoration: none;
    background: none;
    transition: background 0.15s;
  }

  .mnav__action-btn:active {
    background: var(--hp-overlay-6);
  }

  .mnav__action-btn--solid {
    background: var(--hp-btn-solid-bg);
    color: var(--hp-btn-solid-fg);
    border-color: transparent;
    margin-left: auto;
  }

  .mnav__action-btn--solid:active {
    opacity: 0.85;
  }
}
/* ============================================================
   Forger 官网首页 · 与 forger-site 视觉系统完全对齐
   暗黑极简巨排版（Linear / Vercel 式）
   ============================================================ */

.hp {
  /* --hp-* 视觉变量统一由 styles/tokens.css 提供（含亮色覆盖），此处不再重复定义，
     否则元素级变量会覆盖 [data-theme='light'] 的亮色值。 */
  position: relative;
  background: var(--hp-bg);
  color: var(--hp-fg);
  overflow-x: clip;
}

/* ---------- 滚动进度线 ---------- */
.hp-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 9999;
  background: linear-gradient(90deg, var(--hp-green), var(--hp-green-bright));
  transform-origin: 0 50%;
  transform: scaleX(0);
  pointer-events: none;
}

/* ---------- 浮动导航岛与通用按钮样式已迁至 components/SiteNav.css ---------- */

/* ---------- HERO 玻璃幕墙 ---------- */
.hp-hero-cards {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 560px;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  transform: translateZ(0);
}
.hp-hero-cards-scene {
  position: absolute;
  inset: 0 -12%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.hp-glass-pane {
  --a1: 0.42;
  --a2: 0.14;
  --l1: 74%;
  --l2: 68%;
  flex: 0 0 auto;
  width: var(--pw);
  height: var(--ph);
  margin-left: var(--ml, -2.5%);
  will-change: opacity, filter;
  background: linear-gradient(
    180deg,
    hsla(var(--h), 92%, var(--l1), var(--a1)),
    hsla(var(--h), 88%, var(--l2), var(--a2)) 55%,
    hsla(var(--h), 88%, var(--l2), 0)
  );
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  opacity: 0;
  animation: hpPaneIn 1.4s var(--hp-ease-expo) var(--ed, 0s) both;
}
@keyframes hpPaneIn {
  from {
    clip-path: inset(0 0 100% 0);
    opacity: 0;
  }
  to {
    clip-path: inset(0 0 -30% 0);
    opacity: var(--o, 1);
  }
}
.hp-glass-pane--1 {
  --pw: 9%;
  --ph: 52%;
  --h: 30;
  --o: 0.95;
  --ed: 0s;
  --ml: 0;
}
.hp-glass-pane--2 {
  --pw: 7.5%;
  --ph: 66%;
  --h: 38;
  --o: 0.9;
  --ed: 0.05s;
}
.hp-glass-pane--3 {
  --pw: 10%;
  --ph: 44%;
  --h: 22;
  --o: 0.7;
  --ed: 0.1s;
}
.hp-glass-pane--4 {
  --pw: 7%;
  --ph: 60%;
  --h: 46;
  --o: 0.85;
  --ed: 0.15s;
}
.hp-glass-pane--5 {
  --pw: 9.5%;
  --ph: 48%;
  --h: 268;
  --o: 0.9;
  --ed: 0.2s;
}
.hp-glass-pane--6 {
  --pw: 7%;
  --ph: 68%;
  --h: 285;
  --o: 0.75;
  --ed: 0.25s;
}
.hp-glass-pane--7 {
  --pw: 9%;
  --ph: 40%;
  --h: 255;
  --o: 0.85;
  --ed: 0.3s;
}
.hp-glass-pane--8 {
  --pw: 7.5%;
  --ph: 62%;
  --h: 240;
  --o: 0.8;
  --ed: 0.35s;
}
.hp-glass-pane--9 {
  --pw: 9.5%;
  --ph: 46%;
  --h: 150;
  --o: 0.75;
  --ed: 0.4s;
}
.hp-glass-pane--10 {
  --pw: 7%;
  --ph: 58%;
  --h: 190;
  --o: 0.85;
  --ed: 0.45s;
}
.hp-glass-pane--11 {
  --pw: 10%;
  --ph: 42%;
  --h: 214;
  --o: 0.9;
  --ed: 0.5s;
}
.hp-glass-pane--12 {
  --pw: 7.5%;
  --ph: 64%;
  --h: 205;
  --o: 0.8;
  --ed: 0.55s;
}
.hp-glass-pane--13 {
  --pw: 9%;
  --ph: 50%;
  --h: 222;
  --o: 0.85;
  --ed: 0.6s;
}
.hp-glass-pane--14 {
  --pw: 8%;
  --ph: 38%;
  --h: 198;
  --o: 0.7;
  --ed: 0.65s;
}
[data-theme='light'] .hp-glass-pane {
  --a1: 0.62;
  --a2: 0.32;
  --l1: 52%;
  --l2: 46%;
  backdrop-filter: blur(14px) saturate(2);
  -webkit-backdrop-filter: blur(14px) saturate(2);
  border-top: 1px solid hsla(var(--h), 80%, 42%, 0.5);
}
@media (max-width: 900px) {
  .hp-hero-cards-scene {
    inset: 0 -6%;
  }
  .hp-glass-pane {
    width: calc(var(--pw) * 1.6);
    margin-left: -4%;
  }
  .hp-glass-pane--1 {
    margin-left: 0;
  }
  .hp-glass-pane--3,
  .hp-glass-pane--5,
  .hp-glass-pane--8,
  .hp-glass-pane--11,
  .hp-glass-pane--13 {
    display: none;
  }
}
@media (max-width: 600px) {
  .hp-hero-cards-scene {
    inset: 0 -2%;
  }
  .hp-glass-pane {
    width: calc(var(--pw) * 2.4);
    margin-left: -6%;
  }
  .hp-glass-pane--1 {
    margin-left: 0;
  }
  .hp-glass-pane--2,
  .hp-glass-pane--7,
  .hp-glass-pane--12 {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hp-glass-pane {
    animation: none;
    opacity: var(--o, 1);
  }
}

/* ---------- 滚动显现 ---------- */
.hp-reveal {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity 1.1s var(--hp-ease-expo),
    transform 1.1s var(--hp-ease-expo);
  transition-delay: var(--d, 0s);
}
.hp-reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- 遮罩标题 ---------- */
/* padding-bottom 需容纳 g/y/p 等下伸部(~0.2em),否则末行字母底部被 overflow:hidden 裁切 */
.hp-mask-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.22em;
  margin-bottom: -0.22em;
}
.hp-mask-word {
  display: inline-block;
  transform: translateY(115%) rotate(2deg);
  transform-origin: 0 100%;
  transition: transform 1.2s var(--hp-ease-expo);
  transition-delay: var(--d, 0s);
}
.hp-reveal.in .hp-mask-word,
.hp-mask-line.in .hp-mask-word {
  transform: translateY(0) rotate(0);
}

/* ---------- 文字渐变 ---------- */
.hp-grad,
.hp-section-title em,
.hp-cta-title em {
  font-style: normal;
  background: linear-gradient(120deg, var(--hp-green-bright), var(--hp-green));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- 按钮（基础样式见 SiteNav.css，此处仅保留页内特有尺寸） ---------- */

/* ---------- HERO ---------- */
.hp-hero {
  position: relative;
  padding: 120px 72px 96px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.hp-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: left;
}
.hp-hero-badge-wrap {
  margin-bottom: 38px;
}
.hp-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: var(--hp-dim);
  border: 1px solid var(--hp-line);
  border-radius: 999px;
  padding: 7px 16px;
  background: var(--hp-overlay-2);
  transition:
    border-color 0.3s,
    color 0.3s,
    background 0.3s;
  text-decoration: none;
}
.hp-hero-badge:hover {
  border-color: color-mix(in srgb, var(--hp-green) 35%, transparent);
  color: var(--hp-fg);
  background: color-mix(in srgb, var(--hp-green) 5%, transparent);
}
.hp-hero-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hp-green);
  box-shadow: 0 0 10px var(--hp-green);
  animation: hpBlink 2.4s ease-in-out infinite;
}
@keyframes hpBlink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}
.hp-hero-badge-arrow {
  transition: transform 0.25s var(--hp-ease);
}
.hp-hero-badge:hover .hp-hero-badge-arrow {
  transform: translateX(3px);
}
.hp-hero-title {
  font-size: clamp(58px, 8.8vw, 128px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.02em;
}
/* 标题文字周期性流光扫过 */
.hp-hero-title .hp-mask-word {
  background-image: linear-gradient(
    105deg,
    transparent 40%,
    var(--hp-sheen-hi) 50%,
    transparent 60%
  );
  background-size: 240% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  animation: hpTitleSheen 7s ease-in-out 1.8s infinite;
}
.hp-hero-title .hp-mask-word.hp-dim {
  background-image: linear-gradient(
    105deg,
    transparent 40%,
    var(--hp-sheen-soft) 50%,
    transparent 60%
  );
}
.hp-hero-wordmark {
  height: clamp(52px, 7.6vw, 110px);
  width: auto;
  display: block;
  opacity: 0.55;
  transform: translateY(6px);
}
@keyframes hpTitleSheen {
  0% {
    background-position: 175% 0;
  }
  45%,
  100% {
    background-position: -75% 0;
  }
}
.hp-dim {
  color: var(--hp-dim);
}
.hp-hero-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  width: 100%;
  margin-top: 46px;
}
.hp-hero-sub {
  max-width: 520px;
  font-size: clamp(15px, 1.7vw, 18px);
  color: var(--hp-muted);
  line-height: 1.9;
}
.hp-hero-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 18px;
  flex-shrink: 0;
}
.hp-hero-cta {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.hp-hero-note {
  font-family: var(--hp-mono);
  font-size: 11px;
  color: var(--hp-faint);
  letter-spacing: 0.22em;
  text-align: right;
}
@media (max-width: 900px) {
  .hp-hero-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 36px;
  }
  .hp-hero-actions {
    align-items: flex-start;
  }
  .hp-hero-cta {
    justify-content: flex-start;
  }
  .hp-hero-note {
    text-align: left;
  }
}

/* ---------- Stats ---------- */
.hp-stats {
  max-width: var(--hp-container);
  margin: 0 auto;
  padding: 110px 40px;
}
.hp-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--hp-line-soft);
  border-bottom: 1px solid var(--hp-line-soft);
}
.hp-stat {
  position: relative;
  padding: 56px 36px;
  border-left: 1px solid var(--hp-line-soft);
  transition: background 0.4s;
  overflow: hidden;
}
.hp-stat:first-child {
  border-left: none;
}
.hp-stat:hover {
  background: var(--hp-overlay-2);
}
.hp-stat::after {
  content: '';
  position: absolute;
  left: 36px;
  bottom: 0;
  width: 28px;
  height: 2px;
  background: var(--hp-green);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.5s var(--hp-ease);
}
.hp-stat:hover::after {
  transform: scaleX(1);
}
.hp-stat-num {
  font-size: clamp(38px, 4.5vw, 64px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 34px color-mix(in srgb, var(--hp-green) 20%, transparent);
}
.hp-stat-label {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--hp-faint);
  letter-spacing: 0.1em;
}

/* ---------- Section 基础 ---------- */
.hp-section {
  position: relative;
  max-width: var(--hp-container);
  margin: 0 auto;
  padding: 130px 40px;
  scroll-margin-top: 90px;
}
.hp-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 40px;
  right: 40px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--hp-line) 18%,
    var(--hp-line) 82%,
    transparent
  );
}
.hp-section-head {
  margin-bottom: 84px;
}
.hp-section-index {
  font-family: var(--hp-mono);
  font-size: 12px;
  color: var(--hp-green);
  letter-spacing: 0.32em;
  margin-bottom: 26px;
}
.hp-section-index::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--hp-green);
  opacity: 0.5;
  vertical-align: 4px;
  margin-right: 14px;
}
.hp-section-title {
  font-size: clamp(42px, 6.5vw, 88px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.03em;
}
/* section 标题显现后一道流光扫过 */
.hp-section-title .hp-mask-word {
  background-image: linear-gradient(
    105deg,
    transparent 42%,
    var(--hp-sheen-md) 50%,
    transparent 58%
  );
  background-size: 240% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
}
.hp-reveal.in .hp-section-title .hp-mask-word {
  animation: hpTitleSheen 1.5s ease-in-out 0.7s both;
}
.hp-section-sub {
  margin-top: 30px;
  font-size: 16px;
  color: var(--hp-muted);
  line-height: 1.9;
}

/* ---------- Bento ---------- */
.hp-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.hp-bento-card {
  position: relative;
  border: 1px solid var(--hp-line);
  border-radius: 14px;
  padding: 34px 30px 30px;
  background: var(--hp-raise);
  overflow: hidden;
  transition:
    border-color 0.35s,
    transform 0.35s var(--hp-ease),
    background 0.35s;
}
.hp-bento-card--wide {
  grid-column: span 2;
}
.hp-bento-card:hover {
  border-color: var(--hp-overlay-18);
  transform: translateY(-4px);
  background: var(--hp-raise-2);
}
.hp-bento-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(115, 233, 148, 0.55), transparent);
  opacity: 0;
  transition: opacity 0.4s;
}
.hp-bento-card:hover::after {
  opacity: 1;
}
/* 卡片光斑跟随 */
.hp-bento-spot {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 50%),
    rgba(54, 212, 98, 0.09),
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.3s;
}
.hp-bento-card:hover .hp-bento-spot {
  opacity: 1;
}
.hp-bento-icon {
  width: 40px;
  height: 40px;
  border: 1px solid color-mix(in srgb, var(--hp-green) 28%, transparent);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  background: var(--hp-green-dim);
}
.hp-bento-icon svg {
  width: 19px;
  height: 19px;
  color: var(--hp-green-bright);
  transition: transform 0.45s var(--hp-ease);
}
.hp-bento-card:hover .hp-bento-icon svg {
  transform: scale(1.12) rotate(-4deg);
}
.hp-bento-card h3 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 10px;
}
.hp-bento-card p {
  font-size: 13.5px;
  color: var(--hp-muted);
  line-height: 1.8;
}
.hp-bento-kbd {
  position: absolute;
  top: 30px;
  right: 28px;
  font-family: var(--hp-mono);
  font-size: 11px;
  color: var(--hp-faint);
  border: 1px solid var(--hp-line);
  border-radius: 6px;
  padding: 3px 8px;
}

/* ---------- Agent ---------- */
.hp-agent-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  border-top: 1px solid var(--hp-line-soft);
  padding-top: 56px;
}
.hp-agent-point h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
}
.hp-agent-point h3::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hp-green);
  margin-right: 10px;
  vertical-align: 2px;
}
.hp-agent-point p {
  font-size: 13.5px;
  color: var(--hp-muted);
  line-height: 1.8;
}

/* ---------- IDE & Data ---------- */
.hp-ide-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 56px;
}
.hp-ide-card {
  position: relative;
  padding: 40px;
  border: 1px solid var(--hp-line-soft);
  border-radius: var(--hp-radius, 8px);
  background: var(--hp-overlay-2);
  overflow: hidden;
  transition:
    border-color 0.4s,
    background 0.4s;
}
.hp-ide-card:hover {
  border-color: var(--hp-overlay-14);
  background: var(--hp-overlay-4);
}
.hp-ide-card h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
}
.hp-ide-card p {
  font-size: 14px;
  color: var(--hp-muted);
  line-height: 1.8;
}
.hp-ide-icon {
  width: 36px;
  height: 36px;
  color: var(--hp-green);
  margin-bottom: 20px;
}
.hp-ide-icon svg {
  width: 100%;
  height: 100%;
}
@media (max-width: 900px) {
  .hp-ide-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Database ---------- */
.hp-db-list {
  border-top: 1px solid var(--hp-line-soft);
  list-style: none;
  padding: 0;
  margin: 0;
}
.hp-db-row {
  display: grid;
  grid-template-columns: 80px 1fr 1fr 60px;
  align-items: center;
  padding: 38px 12px;
  border-bottom: 1px solid var(--hp-line-soft);
  transition:
    background 0.3s,
    padding 0.35s var(--hp-ease);
  cursor: default;
  position: relative;
  overflow: hidden;
}
.hp-db-row::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(54, 212, 98, 0.05), transparent 55%);
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
}
.hp-db-row:hover::before {
  opacity: 1;
}
.hp-db-row:hover {
  background: var(--hp-overlay-2);
  padding-left: 28px;
}
.hp-db-idx {
  font-family: var(--hp-mono);
  font-size: 13px;
  color: var(--hp-green);
}
.hp-db-name {
  font-size: clamp(28px, 3.8vw, 48px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--hp-dim);
  transition:
    color 0.35s,
    letter-spacing 0.35s var(--hp-ease);
}
.hp-db-row:hover .hp-db-name {
  color: var(--hp-fg);
  letter-spacing: -0.01em;
}
.hp-db-desc {
  font-size: 12.5px;
  color: var(--hp-faint);
  text-align: right;
  letter-spacing: 0.06em;
}
.hp-db-arrow {
  text-align: right;
  font-size: 20px;
  color: var(--hp-faint);
  transition:
    transform 0.35s var(--hp-ease),
    color 0.3s;
}
.hp-db-row:hover .hp-db-arrow {
  transform: translateX(8px);
  color: var(--hp-green-bright);
}

/* ---------- Privacy ---------- */
.hp-arch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.hp-arch-node {
  position: relative;
  border: 1px solid var(--hp-line);
  border-radius: 14px;
  padding: 38px 34px;
  background: var(--hp-raise);
  overflow: hidden;
  transition:
    border-color 0.35s,
    transform 0.35s var(--hp-ease),
    box-shadow 0.35s;
}
.hp-arch-node:hover {
  border-color: var(--hp-overlay-18);
  transform: translateY(-4px);
  box-shadow: var(--hp-shadow-lift);
}
.hp-arch-node::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 50%),
    rgba(54, 212, 98, 0.09),
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.hp-arch-node:hover::before {
  opacity: 1;
}
.hp-arch-node-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}
.hp-arch-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hp-green);
  box-shadow: 0 0 16px var(--hp-green);
}
.hp-arch-dot--dim {
  background: var(--hp-overlay-55);
  box-shadow: 0 0 16px var(--hp-overlay-30);
}
.hp-arch-node h3 {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.hp-arch-node ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.hp-arch-node li {
  padding: 13px 0;
  border-bottom: 1px solid var(--hp-line-soft);
  font-size: 14px;
  color: var(--hp-muted);
}
.hp-arch-node li:last-child {
  border-bottom: none;
}
.hp-arch-node li::before {
  content: '—';
  color: var(--hp-green);
  margin-right: 10px;
}
.hp-arch-note {
  margin-top: 60px;
  text-align: center;
  font-size: 14px;
  color: var(--hp-faint);
  letter-spacing: 0.05em;
}

/* ---------- FAQ ---------- */
.hp-faq-list {
  border-top: 1px solid var(--hp-line-soft);
  max-width: 860px;
}
.hp-faq-item {
  border-bottom: 1px solid var(--hp-line-soft);
}
.hp-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 28px 4px;
  background: none;
  border: none;
  font: inherit;
  text-align: left;
  color: inherit;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition:
    color 0.25s,
    padding-left 0.3s var(--hp-ease);
}
.hp-faq-q:hover {
  color: var(--hp-green-bright);
  padding-left: 12px;
}
.hp-faq-icon {
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.hp-faq-icon::before,
.hp-faq-icon::after {
  content: '';
  position: absolute;
  background: var(--hp-faint);
  transition:
    transform 0.3s var(--hp-ease),
    background 0.3s;
}
.hp-faq-icon::before {
  left: 0;
  top: 7px;
  width: 16px;
  height: 1.5px;
}
.hp-faq-icon::after {
  left: 7.25px;
  top: 0;
  width: 1.5px;
  height: 16px;
}
.hp-faq-item--open .hp-faq-icon::after {
  transform: rotate(90deg);
}
.hp-faq-item--open .hp-faq-icon::before,
.hp-faq-item--open .hp-faq-icon::after {
  background: var(--hp-green-bright);
}
/* 内容平滑展开/收起 */
.hp-faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--hp-ease);
}
.hp-faq-item--open .hp-faq-a {
  grid-template-rows: 1fr;
}
.hp-faq-body {
  overflow: hidden;
  min-height: 0;
}
.hp-faq-body p {
  max-width: 680px;
  padding: 0 4px 30px;
  font-size: 14.5px;
  color: var(--hp-muted);
  line-height: 1.85;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity 0.4s var(--hp-ease) 0.06s,
    transform 0.4s var(--hp-ease) 0.06s;
}
.hp-faq-item--open .hp-faq-body p {
  opacity: 1;
  transform: none;
}

/* ---------- 响应式 ---------- */
@media (max-width: 1200px) {
  .hp-agent-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}
@media (max-width: 900px) {
  .hp-bento {
    grid-template-columns: 1fr 1fr;
  }
  .hp-bento-card--wide {
    grid-column: span 2;
  }
  .hp-arch {
    grid-template-columns: 1fr;
  }
  .hp-stats-grid {
    grid-template-columns: 1fr 1fr;
  }
  .hp-stat {
    border-left: none;
    border-top: 1px solid var(--hp-line-soft);
  }
  .hp-stat:nth-child(-n + 2) {
    border-top: none;
  }
}
@media (max-width: 600px) {
  .hp-section {
    padding: 90px 20px;
  }
  .hp-section-head {
    margin-bottom: 52px;
  }
  .hp-hero {
    padding: 100px 20px 72px;
  }
  .hp-bento {
    grid-template-columns: 1fr;
  }
  .hp-bento-card--wide {
    grid-column: span 1;
  }
  .hp-db-row {
    grid-template-columns: 50px 1fr 36px;
    padding: 26px 4px;
  }
  .hp-db-desc {
    display: none;
  }
  .hp-stats {
    padding: 80px 22px;
  }
  .hp-stat {
    padding: 34px 24px;
  }
  .hp-br {
    display: none;
  }
  .hp-hero-scroll {
    display: none;
  }
  .hp-hero-outline {
    font-size: 0.6em;
  }
}

/* ---------- 动效降级 ---------- */
@media (prefers-reduced-motion: reduce) {
  .hp-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hp-mask-word {
    transform: none;
    transition: none;
  }
  .hp-hero-title .hp-mask-word {
    animation: none;
  }
  .hp-section-title .hp-mask-word {
    animation: none;
  }
  .hp-marquee-track {
    animation: none;
  }
  .hp-grain {
    animation: none;
  }
  .hp-hero-scroll-bar::after {
    animation: none;
  }
}

/* ---------- 颗粒噪点覆盖层 ---------- */
.hp-grain {
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 50;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: hpGrain 8s steps(10) infinite;
}
@keyframes hpGrain {
  0%,
  100% {
    transform: translate(0, 0);
  }
  10% {
    transform: translate(-5%, -8%);
  }
  30% {
    transform: translate(3%, -12%);
  }
  50% {
    transform: translate(8%, 4%);
  }
  70% {
    transform: translate(-8%, 8%);
  }
  90% {
    transform: translate(4%, 3%);
  }
}

/* ---------- Hero 描边轮廓文字 ---------- */
.hp-hero-outline {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--hp-fg);
  font-style: normal;
  letter-spacing: 0.02em;
  background-image: none !important;
  animation: none !important;
}
[data-theme='light'] .hp-hero-outline {
  -webkit-text-stroke-color: var(--hp-fg);
}

/* ---------- Hero 滚动指示器 ---------- */
.hp-hero-scroll {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  letter-spacing: 0.35em;
  color: var(--hp-faint);
  margin-top: 32px;
}
.hp-hero-scroll-bar {
  width: 1px;
  height: 44px;
  background: var(--hp-faint);
  position: relative;
  overflow: hidden;
}
.hp-hero-scroll-bar::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--hp-fg);
  animation: hpDrip 2s cubic-bezier(0.76, 0, 0.24, 1) infinite;
}
@keyframes hpDrip {
  0% {
    top: -100%;
  }
  60%,
  100% {
    top: 100%;
  }
}

/* ---------- 跑马灯 Marquee ---------- */
.hp-marquee {
  border-top: 1px solid var(--hp-line-soft);
  border-bottom: 1px solid var(--hp-line-soft);
  overflow: hidden;
  padding: 20px 0;
  white-space: nowrap;
}
.hp-marquee-track {
  display: inline-flex;
  gap: 60px;
  animation: hpMarquee 28s linear infinite;
  will-change: transform;
}
.hp-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 60px;
  font-size: 13px;
  letter-spacing: 0.35em;
  color: var(--hp-dim);
  text-transform: uppercase;
}
.hp-marquee-item i {
  color: var(--hp-green);
  font-style: normal;
  font-size: 10px;
}
@keyframes hpMarquee {
  to {
    transform: translateX(-50%);
  }
}
:root {
  /* hp 视觉体系（与首页 HomePage.css 同源，供全站子页面与 SiteNav/Footer 使用） */
  --hp-bg: #060708;
  --hp-raise: #0d0f11;
  --hp-fg: #f5f9fe;
  --hp-dim: #9ba0ab;
  --hp-muted: rgba(245, 249, 254, 0.56);
  --hp-faint: rgba(245, 249, 254, 0.34);
  --hp-line: rgba(245, 249, 254, 0.09);
  --hp-line-soft: rgba(245, 249, 254, 0.05);
  --hp-green: #36d462;
  --hp-green-bright: #73e994;
  --hp-green-dim: rgba(54, 212, 98, 0.12);
  --hp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --hp-ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --hp-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;
  --hp-container: 1280px;

  /* 导航岛 / 按钮 专用（随主题反转） */
  --hp-island-bg: rgba(13, 15, 17, 0.35);
  --hp-island-bg-strong: rgba(13, 15, 17, 0.45);
  --hp-island-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
  --hp-island-shadow-strong: 0 10px 44px rgba(0, 0, 0, 0.55);
  --hp-overlay-2: rgba(245, 249, 254, 0.02);
  --hp-overlay-6: rgba(245, 249, 254, 0.06);
  --hp-overlay-14: rgba(245, 249, 254, 0.14);
  --hp-overlay-18: rgba(245, 249, 254, 0.18);
  --hp-overlay-28: rgba(245, 249, 254, 0.28);
  --hp-btn-solid-bg: #f5f9fe;
  --hp-btn-solid-bg-hover: #ffffff;
  --hp-btn-solid-fg: #060708;
  --hp-btn-solid-glow: 0 8px 40px rgba(245, 249, 254, 0.2);

  /* 首页装饰专用（随主题反转） */
  --hp-sheen-hi: rgba(255, 255, 255, 0.5);
  --hp-sheen-md: rgba(255, 255, 255, 0.32);
  --hp-sheen-soft: rgba(245, 249, 254, 0.4);
  --hp-overlay-3: rgba(245, 249, 254, 0.03);
  --hp-overlay-4: rgba(245, 249, 254, 0.04);
  --hp-overlay-7: rgba(245, 249, 254, 0.07);
  --hp-overlay-8: rgba(245, 249, 254, 0.08);
  --hp-overlay-55: rgba(245, 249, 254, 0.55);
  --hp-overlay-30: rgba(245, 249, 254, 0.3);
  --hp-shadow-deep: 0 30px 90px rgba(0, 0, 0, 0.6), 0 80px 220px rgba(0, 0, 0, 0.45);
  --hp-shadow-lift: 0 20px 60px rgba(0, 0, 0, 0.4);
  --hp-raise-2: #101215;
  --hp-grid-line: rgba(245, 249, 254, 0.03);

  --color-bg-base: #060708;
  --color-bg-subtle: #0d0f11;
  --color-bg-muted: #101215;
  --color-bg-emphasis: #16181c;
  --color-bg-elevated: rgb(13 15 17 / 72%);

  --color-bg-hover: rgb(255 255 255 / 4%);
  --color-bg-active: rgb(255 255 255 / 7%);

  --color-fg-default: #f5f9fe;
  --color-fg-muted: #9ba0ab;
  --color-fg-subtle: rgba(245, 249, 254, 0.56);
  --color-fg-disabled: rgba(245, 249, 254, 0.34);
  --color-fg-on-accent: #060708;

  --color-border-default: rgba(245, 249, 254, 0.09);
  --color-border-muted: rgba(245, 249, 254, 0.09);
  --color-border-subtle: rgba(245, 249, 254, 0.05);
  --color-border-emphasis: rgba(245, 249, 254, 0.18);

  --color-island-bg: rgb(13 15 17 / 72%);
  --color-island-border: rgba(245, 249, 254, 0.09);

  --color-accent: #36d462;
  --color-accent-strong: #73e994;
  --color-accent-tint: #a8f5be;
  --color-accent-soft: rgb(54 212 98 / 12%);
  --color-accent-subtle: rgb(54 212 98 / 6%);
  --color-accent-glow: rgb(54 212 98 / 16%);
  --color-accent-rgb: 54 212 98;

  --color-overlay-backdrop: rgb(0 0 0 / 60%);

  --color-error-default: #f07070;
  --color-error-soft: rgb(240 112 112 / 13%);
  --color-warn-default: #f0c351;
  --color-success-default: #4ade80;

  --halo-divider: color-mix(in srgb, var(--color-fg-default) 10%, transparent);
  --halo-divider-soft: color-mix(in srgb, var(--color-fg-default) 6%, transparent);

  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-pill: 9999px;

  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-0-5: 2px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;
  --space-14: 56px;
  --space-15: 60px;
  --space-16: 64px;
  --space-20: 80px;
  --space-22: 88px;
  --space-24: 96px;
  --space-25: 100px;
  --space-28: 110px;
  --space-30: 120px;
  --space-18: 70px;

  --text-2xs: 9px;
  --text-xs: 10px;
  --text-sm: 11px;
  --text-base: 12px;
  --text-md: 13px;
  --text-lg: 14px;
  --text-xl: 16px;
  --text-2xl: 20px;
  --text-3xl: 26px;
  --text-4xl: clamp(32px, 4vw, 44px);
  --text-5xl: clamp(40px, 5.5vw, 60px);

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.55;
  --leading-relaxed: 1.65;

  --font-sans:
    'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
    'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;
  --font-title: var(--font-sans);

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 24%);
  --shadow-md: 0 4px 16px rgb(0 0 0 / 32%);
  --shadow-lg: 0 12px 32px rgb(0 0 0 / 36%);
  --shadow-xl: 0 24px 64px rgb(0 0 0 / 48%);
  --shadow-island: 0 4px 24px rgb(0 0 0 / 24%);
  --shadow-glow: 0 0 24px var(--color-accent-glow);

  --duration-fast: 100ms;
  --duration-normal: 150ms;
  --duration-slow: 240ms;
  --duration-slower: 360ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t: 0.15s;

  --transition-colors:
    background-color var(--duration-normal) var(--ease), color var(--duration-normal) var(--ease),
    border-color var(--duration-normal) var(--ease);

  /* 半透明覆盖层（hover / 卡片底色 / 子元素分隔），暗色模式用浅白叠加。 */
  --overlay-soft: rgb(255 255 255 / 2%);
  --overlay-default: rgb(255 255 255 / 4%);
  --overlay-strong: rgb(255 255 255 / 8%);
  --overlay-deep: rgb(0 0 0 / 30%);

  /* 毛玻璃模糊预设。所有 .glass-* 类必须用这两个变量，禁止直接写 blur(28px)。 */
  --glass-blur-md: blur(20px) saturate(140%);
  --glass-blur-lg: blur(28px) saturate(140%);

  /* 响应式断点。注意：CSS 变量不能用于 @media 条件，
     各页面媒体查询硬编码 600/900/1200 三档，需与此处保持一致。 */
  --breakpoint-sm: 600px;
  --breakpoint-md: 900px;
  --breakpoint-lg: 1200px;

  /* iOS 安全区 */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  --z-base: 1;
  --z-dropdown: 100;
  --z-island: 500;
  --z-overlay: 800;
  --z-modal: 1000;
}

[data-theme='light'] {
  /* hp 视觉体系亮色覆盖（首页 / SiteNav / Footer 同源） */
  --hp-bg: #f6f7f5;
  --hp-raise: #ffffff;
  --hp-fg: #1f2620;
  --hp-dim: #4a544c;
  --hp-muted: rgba(31, 38, 32, 0.6);
  --hp-faint: rgba(31, 38, 32, 0.38);
  --hp-line: rgba(31, 38, 32, 0.12);
  --hp-line-soft: rgba(31, 38, 32, 0.06);
  --hp-green: #2a9b59;
  --hp-green-bright: #1c7a44;
  --hp-green-dim: rgba(42, 155, 89, 0.12);

  /* 导航岛 / 按钮 亮色覆盖 */
  --hp-island-bg: rgba(255, 255, 255, 0.4);
  --hp-island-bg-strong: rgba(255, 255, 255, 0.5);
  --hp-island-shadow: 0 4px 30px rgba(31, 38, 32, 0.1);
  --hp-island-shadow-strong: 0 10px 44px rgba(31, 38, 32, 0.16);
  --hp-overlay-2: rgba(31, 38, 32, 0.03);
  --hp-overlay-6: rgba(31, 38, 32, 0.06);
  --hp-overlay-14: rgba(31, 38, 32, 0.14);
  --hp-overlay-18: rgba(31, 38, 32, 0.18);
  --hp-overlay-28: rgba(31, 38, 32, 0.28);
  --hp-btn-solid-bg: #1f2620;
  --hp-btn-solid-bg-hover: #161b17;
  --hp-btn-solid-fg: #ffffff;
  --hp-btn-solid-glow: 0 8px 40px rgba(31, 38, 32, 0.18);

  /* 首页装饰亮色覆盖 */
  --hp-sheen-hi: rgba(255, 255, 255, 0.85);
  --hp-sheen-md: rgba(255, 255, 255, 0.6);
  --hp-sheen-soft: rgba(31, 38, 32, 0.3);
  --hp-overlay-3: rgba(31, 38, 32, 0.03);
  --hp-overlay-4: rgba(31, 38, 32, 0.05);
  --hp-overlay-7: rgba(31, 38, 32, 0.07);
  --hp-overlay-8: rgba(31, 38, 32, 0.09);
  --hp-overlay-55: rgba(31, 38, 32, 0.5);
  --hp-overlay-30: rgba(31, 38, 32, 0.28);
  --hp-shadow-deep: 0 30px 90px rgba(31, 38, 32, 0.16), 0 80px 220px rgba(31, 38, 32, 0.12);
  --hp-shadow-lift: 0 20px 60px rgba(31, 38, 32, 0.14);
  --hp-raise-2: #eceee9;
  --hp-grid-line: rgba(31, 38, 32, 0.04);

  --color-bg-base: #f6f7f5;
  --color-bg-subtle: #ecefe9;
  --color-bg-muted: #e2e6df;
  --color-bg-emphasis: #d8ddd2;
  --color-bg-elevated: rgb(255 255 255 / 78%);

  --color-bg-hover: rgb(0 0 0 / 4%);
  --color-bg-active: rgb(0 0 0 / 7%);

  --color-fg-default: #1f2620;
  --color-fg-muted: #4a544c;
  --color-fg-subtle: #717a72;
  --color-fg-disabled: #a1a89e;
  --color-fg-on-accent: #ffffff;

  --color-border-default: rgb(0 0 0 / 8%);
  --color-border-muted: rgb(0 0 0 / 10%);
  --color-border-subtle: rgb(0 0 0 / 4%);
  --color-border-emphasis: rgb(0 0 0 / 18%);

  --color-island-bg: rgb(255 255 255 / 84%);
  --color-island-border: rgb(0 0 0 / 8%);

  --color-accent: #2a9b59;
  --color-accent-strong: #1c7a44;
  --color-accent-tint: #4ab078;
  --color-accent-soft: rgb(42 155 89 / 12%);
  --color-accent-subtle: rgb(42 155 89 / 6%);
  --color-accent-glow: rgb(42 155 89 / 18%);
  --color-accent-rgb: 42 155 89;

  --color-overlay-backdrop: rgb(255 255 255 / 70%);

  --color-error-default: #c14d4d;
  --color-error-soft: rgb(193 77 77 / 12%);
  --color-warn-default: #b88a1d;
  --color-success-default: #2f9e5e;

  --halo-divider: color-mix(in srgb, var(--color-fg-default) 12%, transparent);
  --halo-divider-soft: color-mix(in srgb, var(--color-fg-default) 8%, transparent);

  --overlay-soft: rgb(0 0 0 / 2%);
  --overlay-default: rgb(0 0 0 / 4%);
  --overlay-strong: rgb(0 0 0 / 8%);
  --overlay-deep: rgb(0 0 0 / 16%);

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 8%);
  --shadow-md: 0 4px 16px rgb(0 0 0 / 12%);
  --shadow-lg: 0 12px 32px rgb(0 0 0 / 16%);
  --shadow-xl: 0 24px 64px rgb(0 0 0 / 20%);
  --shadow-island: 0 4px 24px rgb(0 0 0 / 10%);
}

[data-theme='light'] html {
  background: var(--color-bg-base);
  color-scheme: light;
}

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

html {
  scroll-behavior: smooth;
  background: var(--color-bg-base);
  color-scheme: dark;
  width: 100%;
  min-height: 100vh;
  /* 防止任何子元素横向溢出撑出滚动条（移动端兜底） */
  overflow-x: clip;
}

html[data-theme='dark'] {
  color-scheme: dark;
}

html[data-theme='light'] {
  color-scheme: light;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-fg-default);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  width: 100%;
  touch-action: manipulation;
  overflow-x: clip;
  -webkit-tap-highlight-color: transparent;
}

/* 媒体元素宽度兜底，避免小屏溢出 */

img,
video,
canvas,
svg {
  max-width: 100%;
}

#root {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-title);
  font-weight: 600;
  letter-spacing: -0.02em;
}

a {
  color: var(--color-accent);
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  transition: var(--transition-colors);
}

input,
textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
}

select {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  color: var(--color-fg-default);
  background-color: var(--overlay-soft);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'><path d='M2 4l3 3 3-3' stroke='%23a8b3ad' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: var(--space-2-5) var(--space-2-5);
  border: 1px solid var(--halo-divider);
  border-radius: var(--radius-sm);
  height: var(--space-8);
  padding: 0 var(--space-7) 0 var(--space-3);
  font-size: var(--text-md);
  cursor: pointer;
  transition: var(--transition-colors);
}

select:hover {
  border-color: color-mix(in srgb, var(--color-fg-default) 14%, transparent);
}

select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-soft);
}

select:disabled {
  opacity: 50%;
  cursor: not-allowed;
}

select option {
  background: var(--color-bg-emphasis);
  color: var(--color-fg-default);
}

input[type='checkbox'],
input[type='radio'] {
  appearance: none;
  -webkit-appearance: none;
  width: var(--space-4);
  height: var(--space-4);
  border: 1px solid var(--halo-divider);
  background: var(--overlay-default);
  cursor: pointer;
  flex-shrink: 0;
  transition: var(--transition-colors);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

input[type='checkbox'] {
  border-radius: var(--radius-sm);
}

input[type='radio'] {
  border-radius: 50%;
}

input[type='checkbox']:hover,
input[type='radio']:hover {
  border-color: var(--color-accent);
}

input[type='checkbox']:checked,
input[type='radio']:checked {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

input[type='checkbox']:checked::after {
  content: '';
  width: 9px;
  height: 9px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 5l2.2 2.2L8 3' stroke='%230a0c10' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}

input[type='radio']:checked::after {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--color-bg-base);
  border-radius: 50%;
}

input[type='checkbox']:focus-visible,
input[type='radio']:focus-visible {
  outline: 2px solid var(--color-accent-soft);
  outline-offset: 1px;
}

input[type='checkbox']:disabled,
input[type='radio']:disabled {
  opacity: 45%;
  cursor: not-allowed;
}

input:focus,
textarea:focus,
button:focus {
  outline: none;
}

button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 1px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

::selection {
  background: var(--color-accent);
  color: var(--color-fg-on-accent);
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--overlay-strong);
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-border-emphasis);
  background-clip: content-box;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.fade-in {
  animation: fadeIn var(--duration-slower) var(--ease-out) both;
}

.slide-up {
  animation: slideUp var(--duration-slower) var(--ease-out) both;
}

.scale-in {
  animation: scaleIn var(--duration-slow) var(--ease-out) both;
}

.spinner {
  width: var(--space-4);
  height: var(--space-4);
  border: 2px solid var(--color-border-default);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.spin {
  animation: spin 1s linear infinite;
}

/* 移动端：输入控件字号提到 16px，避免 iOS Safari 聚焦时自动放大页面 */

@media (max-width: 600px) {
  input,
  textarea,
  select {
    font-size: 16px;
  }
}

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

.text-mono {
  font-family: var(--font-mono);
}

.text-muted {
  color: var(--color-fg-muted);
}

.text-subtle {
  color: var(--color-fg-subtle);
}

.glass {
  background: var(--color-island-bg);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--color-island-border);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.fade-in {
  animation: fade-in var(--duration-slower) var(--ease-out) both;
}

.rise-in {
  animation: rise-in var(--duration-slower) var(--ease-out) both;
}

.package-detail,
.integrity-log {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-25) var(--space-5) var(--space-16);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.package-detail [role='alert'],
.integrity-log [role='alert'] {
  padding: var(--space-2-5) var(--space-3);
  background: var(--color-error-soft);
  border: 1px solid color-mix(in srgb, var(--color-error-default) 30%, transparent);
  border-radius: var(--radius-sm);
  color: var(--color-error-default);
  font-size: var(--text-md);
}

.package-detail > p:first-of-type a {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
}

.package-detail > p:first-of-type a:hover {
  color: var(--color-accent);
}

.package-detail > header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--halo-divider);
}

.package-detail > header h1 {
  font-family: var(--font-title);
  font-size: var(--text-3xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-fg-default);
}

.package-detail > header > p {
  font-size: var(--text-md);
  color: var(--color-fg-muted);
}

.package-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-fg-subtle);
}

.package-meta button {
  display: inline-flex;
  align-items: center;
  height: var(--space-7);
  padding: 0 var(--space-3);
  background: var(--overlay-default);
  border: 1px solid var(--halo-divider);
  border-radius: var(--radius-sm);
  color: var(--color-fg-default);
  font-family: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: var(--transition-colors);
}

.package-meta button:hover {
  background: var(--overlay-strong);
  border-color: var(--color-border-emphasis);
}

.package-detail section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.package-detail section h2 {
  font-family: var(--font-title);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-fg-default);
}

.package-detail section > code {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  background: var(--overlay-deep);
  border: 1px solid var(--halo-divider);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-fg-default);
  user-select: all;
  word-break: break-all;
}

.package-versions {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.package-versions li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--halo-divider-soft);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.package-versions li:last-child {
  border-bottom: none;
}

.package-versions li button {
  display: inline-flex;
  align-items: center;
  height: var(--space-7);
  padding: 0 var(--space-3);
  background: transparent;
  border: 1px solid var(--halo-divider);
  border-radius: var(--radius-sm);
  color: var(--color-fg-default);
  font-family: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: var(--transition-colors);
}

.package-versions li button:hover {
  background: var(--overlay-default);
  border-color: var(--color-border-emphasis);
}

.package-versions li.selected button {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  color: var(--color-accent);
  font-weight: 600;
}

.package-versions .package-fp {
  margin-left: auto;
  color: var(--color-fg-subtle);
  font-size: var(--text-xs);
}

.package-readme {
  background: var(--overlay-deep);
  padding: var(--space-4);
  border: 1px solid var(--halo-divider);
  border-radius: var(--radius-sm);
  white-space: pre-wrap;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-fg-default);
  max-height: 600px;
  overflow: auto;
}

.package-review-form {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--overlay-soft);
  border: 1px solid var(--halo-divider-soft);
  border-radius: var(--radius-md);
}

.package-review-form textarea {
  grid-column: 1 / -1;
  min-height: var(--space-15);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-base);
  border: 1px solid var(--halo-divider);
  border-radius: var(--radius-sm);
  color: var(--color-fg-default);
  font-family: inherit;
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  resize: vertical;
  transition: var(--transition-colors);
}

.package-review-form textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-soft);
}

.package-review-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--space-8);
  padding: 0 var(--space-4);
  background: var(--overlay-default);
  border: 1px solid var(--halo-divider);
  border-radius: var(--radius-sm);
  color: var(--color-fg-default);
  font-family: inherit;
  font-size: var(--text-md);
  cursor: pointer;
  transition: var(--transition-colors);
}

.package-review-form button:first-of-type {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-fg-on-accent);
}

.package-review-form button:first-of-type:hover:not(:disabled) {
  background: var(--color-accent-strong);
  border-color: var(--color-accent-strong);
}

.package-review-form button:hover:not(:disabled) {
  background: var(--overlay-strong);
}

.package-review-form button:disabled {
  opacity: 50%;
  cursor: not-allowed;
}

.package-reviews {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.package-reviews li {
  display: grid;
  grid-template-columns: var(--space-12) 1fr auto;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3);
  background: var(--overlay-soft);
  border: 1px solid var(--halo-divider-soft);
  border-radius: var(--radius-md);
}

.package-reviews li strong {
  font-family: var(--font-mono);
  color: var(--color-accent);
  font-size: var(--text-md);
}

.package-reviews li span {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-fg-subtle);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.package-reviews li em {
  grid-column: 1 / -1;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-fg-subtle);
}

.package-reviews li p {
  grid-column: 1 / -1;
  font-size: var(--text-md);
  color: var(--color-fg-default);
  line-height: var(--leading-relaxed);
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-0-5) var(--space-2);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.badge-yanked {
  background: var(--color-error-soft);
  color: var(--color-error-default);
}

.integrity-log h1 {
  font-family: var(--font-title);
  font-size: var(--text-3xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-fg-default);
}

.integrity-log > p {
  font-size: var(--text-md);
  color: var(--color-fg-muted);
  line-height: var(--leading-relaxed);
}

.integrity-log > p code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: var(--overlay-default);
  padding: var(--space-0-5) var(--space-1-5);
  border-radius: var(--radius-sm);
  color: var(--color-fg-default);
}

.integrity-log table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.integrity-log th,
.integrity-log td {
  padding: var(--space-2) var(--space-2-5);
  border-bottom: 1px solid var(--halo-divider-soft);
  text-align: left;
  vertical-align: top;
  color: var(--color-fg-default);
}

.integrity-log th {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-fg-subtle);
  font-weight: 500;
}

.integrity-log td code {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-fg-muted);
  word-break: break-all;
}

@media (max-width: 900px) {
  .package-detail,
  .integrity-log {
    padding: var(--space-22) var(--space-4) var(--space-12);
  }

  .package-review-form {
    grid-template-columns: 1fr;
  }

  .package-reviews li {
    grid-template-columns: auto 1fr;
  }
}