/* Horizon public-site design system
 * Mirrors the restored React homepage: near-black field, Orbitron display type,
 * mint horizon accent, hairline structure, translucent fixed navigation, and
 * restrained Apple/AdventureX motion. Existing page copy and DOM stay intact.
 */

@font-face {
  font-family: "Orbitron Horizon";
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url("fonts/orbitron-900-latin.woff2") format("woff2");
}

body[data-page] {
  --home-bg: #050608;
  --home-bg-elev: #0b0d11;
  --home-ink: #f2f4f8;
  --home-ink-dim: rgba(242, 244, 248, 0.56);
  --home-ink-faint: rgba(242, 244, 248, 0.32);
  --home-line: rgba(242, 244, 248, 0.1);
  --home-accent: #54ffa8;
  --home-accent-dim: rgba(84, 255, 168, 0.14);
  --home-ease: cubic-bezier(0.22, 1, 0.36, 1);
  background: var(--home-bg) !important;
  color: var(--home-ink) !important;
  font-family: Inter, "PingFang SC", "HarmonyOS Sans SC", "Noto Sans SC", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body[data-page]::after {
  display: none;
}

body[data-page] ::selection {
  color: var(--home-bg);
  background: var(--home-accent);
}

body[data-page] :focus-visible {
  outline: 1px solid var(--home-accent) !important;
  outline-offset: 3px;
}

body[data-page] a {
  color: inherit;
}

body[data-page] main {
  padding-top: 64px;
  background:
    radial-gradient(circle at 78% 8%, rgba(84, 255, 168, 0.055), transparent 28rem),
    var(--home-bg);
}

/* Fixed navigation: full-width black acrylic masthead shared by every page. */
body[data-page] .site-header {
  position: fixed !important;
  inset: 0 0 auto;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  z-index: 1000;
  width: 100% !important;
  max-width: none !important;
  min-height: 64px;
  padding: 0;
  isolation: isolate;
  background: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body[data-page] .site-header::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  left: 0;
  height: 64px;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.025)),
    rgba(8, 10, 14, 0.56) !important;
  border-bottom: 1px solid rgba(242, 244, 248, 0.17);
  box-shadow:
    0 14px 38px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  backdrop-filter: blur(28px) saturate(140%);
  transition:
    background-color 300ms var(--home-ease),
    border-color 300ms var(--home-ease),
    box-shadow 300ms var(--home-ease);
}

body[data-page] .site-header.is-scrolled::before,
body[data-page].motion-ready .site-header.is-detached::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.018)),
    rgba(3, 4, 6, 0.82) !important;
  border-bottom-color: rgba(242, 244, 248, 0.2) !important;
}

body[data-page] .header-shell {
  width: 100%;
  max-width: none;
  min-height: 64px;
  padding: 0 clamp(16px, 4vw, 64px) !important;
}

body[data-page] .nav-pill {
  width: 100%;
  max-width: none;
  min-height: 64px;
  padding: 0 !important;
  gap: clamp(5px, 0.8vw, 12px) !important;
  justify-content: space-between;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body[data-page] .brand-pill {
  min-width: max-content;
  gap: 12px !important;
  padding: 6px 18px 6px 8px !important;
  background: transparent !important;
  border: 0 !important;
  border-right: 1px solid var(--home-line) !important;
  border-radius: 0 !important;
}

body[data-page] .brand-mark {
  width: 28px !important;
  height: 28px !important;
  object-fit: contain;
}

body[data-page] .brand-pill strong,
body[data-page] .footer-shell strong {
  font-family: "Orbitron Horizon", Orbitron, Inter, sans-serif !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
}

body[data-page] .brand {
  display: block !important;
}

body[data-page] .nav-pill > .divider {
  display: none !important;
}

body[data-page] .nav,
body[data-page] .nav-inner,
body[data-page] .actions-pill {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body[data-page] .nav {
  position: relative;
  gap: clamp(2px, 0.35vw, 6px) !important;
}

body[data-page] .nav-active-indicator {
  position: absolute;
  inset: 0 auto auto 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  border-radius: 999px;
  background: var(--home-ink);
  box-shadow: 0 7px 24px rgba(255, 255, 255, 0.1);
  transition:
    transform 360ms var(--home-ease),
    width 360ms var(--home-ease),
    height 360ms var(--home-ease),
    opacity 180ms ease;
  will-change: transform;
}

body[data-page] .nav > .nav-link,
body[data-page] .nav > .nav-menu {
  position: relative;
  z-index: 1;
}

body[data-page] .nav-link,
body[data-page] .nav-sublink,
body[data-page] .lang-switch button {
  position: relative;
  padding: 9px 13px !important;
  color: var(--home-ink-dim) !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase;
  transition: color 300ms var(--home-ease) !important;
}

body[data-page] .nav a,
body[data-page] .nav button,
body[data-page] .nav-link,
body[data-page] .nav-trigger,
body[data-page] .nav-sublink {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

body[data-page] .nav-link:hover,
body[data-page] .nav-trigger.is-active,
body[data-page] .nav-sublink:hover,
body[data-page] .lang-switch button:hover,
body[data-page] .lang-switch button.is-active {
  color: var(--home-ink) !important;
}

body[data-page] .nav a.is-active,
body[data-page] .nav button.is-active,
body[data-page] .nav-link.is-active,
body[data-page] .nav-sublink.is-active {
  color: var(--home-bg) !important;
  background: var(--home-ink) !important;
  border-radius: 999px !important;
  box-shadow: 0 7px 24px rgba(255, 255, 255, 0.1) !important;
}

/* 「让位给玻璃指示器」只在 ≥1024px 成立。
   原因：≤1023px 时 .nav-inner 是 display:none（见下方 1023px 断点），页面加载那一刻所有
   菜单项的 getBoundingClientRect() 都是 0×0，site.js 的 placeIndicator() 量不到尺寸、
   画不出胶囊。此时若还保留下面这条「把激活项背景抹成透明」，激活项就只剩
   color: var(--home-bg)（深色）落在深色抽屉底 rgba(7,9,12,.96) 上 ——
   实测文字像素 (5,6,8) vs 背景 (7,9,12)，对比度 1.02，当前页名字完全看不见。
   所以这里把控制权按断点分开：桌面端交给指示器，移动端交回 .is-active 自身的白底规则。 */
@media (min-width: 1024px) {
  body[data-page] .nav.has-glass-indicator > a.is-active,
  body[data-page] .nav.has-glass-indicator > .nav-menu > .nav-trigger.is-active {
    background: transparent !important;
    box-shadow: none !important;
  }
}

body[data-page] .nav-link.is-active::before,
body[data-page] .nav-trigger.is-active::before {
  display: none !important;
}

body[data-page] .nav-menu-panel {
  background: rgba(11, 13, 17, 0.96) !important;
  border: 1px solid var(--home-line) !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.38) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body[data-page] .lang-switch {
  padding: 3px !important;
  gap: 0 !important;
  background: rgba(0, 0, 0, 0.2) !important;
  border: 1px solid var(--home-line) !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.25) !important;
}

body[data-page] .lang-switch button {
  padding: 7px 11px !important;
  color: var(--home-ink-dim) !important;
  background: transparent !important;
  border-radius: 0 !important;
  transform: none !important;
}

body[data-page] .lang-switch button.is-active {
  color: var(--home-bg) !important;
  background: var(--home-ink) !important;
  border-radius: 999px !important;
  box-shadow: 0 6px 18px rgba(255, 255, 255, 0.1) !important;
}

body[data-page] .actions-pill > .button.primary,
body[data-page] .button,
body[data-page] button.button,
body[data-page] a.button {
  min-height: 42px;
  padding: 10px 20px !important;
  color: var(--home-ink) !important;
  background: transparent !important;
  border: 1px solid rgba(242, 244, 248, 0.25) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  transition:
    transform 300ms var(--home-ease),
    color 300ms var(--home-ease),
    border-color 300ms var(--home-ease),
    background-color 300ms var(--home-ease) !important;
}

body[data-page] .actions-pill > .button.primary {
  color: var(--home-bg) !important;
  background: var(--home-ink) !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
  box-shadow: 0 8px 24px rgba(255, 255, 255, 0.1) !important;
}

body[data-page] .actions-pill > .button.primary:hover {
  color: var(--home-bg) !important;
  background: var(--home-accent) !important;
}

body[data-page] .button:hover,
body[data-page] button.button:hover,
body[data-page] a.button:hover {
  color: var(--home-accent) !important;
  background: rgba(84, 255, 168, 0.035) !important;
  border-color: var(--home-accent) !important;
  transform: translateY(-2px) scale(1.015) !important;
}

/* Page intros inherit the homepage's oversized editorial rhythm. */
body[data-page] .page-header,
body[data-page] .events-masthead,
body[data-page] .community-hero,
body[data-page] .creator-lab-hero,
body[data-page] .founder-house-hero {
  position: relative;
  min-height: min(70svh, 760px);
  padding-top: clamp(96px, 15vh, 170px) !important;
  padding-bottom: clamp(72px, 12vh, 140px) !important;
  overflow: hidden;
  isolation: isolate;
}

body[data-page] .page-header::before,
body[data-page] .events-masthead::before,
body[data-page] .community-hero::before,
body[data-page] .creator-lab-hero::before,
body[data-page] .founder-house-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 calc(50% - 50vw);
  background:
    linear-gradient(180deg, rgba(5, 6, 8, 0.1), rgba(5, 6, 8, 0.9)),
    radial-gradient(ellipse 62% 42% at 72% 46%, rgba(84, 255, 168, 0.1), transparent 68%);
  border-bottom: 1px solid var(--home-line);
}

body[data-page] h1,
body[data-page] .events-title-line,
body[data-page] .community-heading,
body[data-page] .founder-house-hero h1 {
  color: var(--home-ink) !important;
  font-family: "Orbitron Horizon", Orbitron, Inter, sans-serif !important;
  font-size: clamp(2rem, 3.9vw, 3.85rem) !important;
  font-weight: 900 !important;
  line-height: 1.02 !important;
  letter-spacing: 0.005em !important;
  text-wrap: balance;
}

body[data-page] .page-header,
body[data-page] .events-masthead,
body[data-page] .founder-house-hero {
  min-height: min(58svh, 640px);
}

body[data-page] .events-title-line {
  line-height: 0.98 !important;
}

body[data-page] h2 {
  color: var(--home-ink) !important;
  font-size: clamp(1.8rem, 4vw, 3.2rem) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.025em !important;
}

body[data-page] h3,
body[data-page] h4,
body[data-page] strong {
  color: var(--home-ink);
}

body[data-page] p,
body[data-page] li,
body[data-page] .lede,
body[data-page] .text-mute {
  color: var(--home-ink-dim);
}

body[data-page] .eyebrow,
body[data-page] .kicker,
body[data-page] .crumb,
body[data-page] .num,
body[data-page] [class*="-index"],
body[data-page] [class*="-label"] {
  color: var(--home-accent) !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase;
}

/* Hairline-led sections and elevated cards. */
body[data-page] .section,
body[data-page] .events-catalogue,
body[data-page] .creator-lab-sessions,
body[data-page] .creator-lab-archive,
body[data-page] .founder-house-section {
  position: relative;
  padding-top: clamp(96px, 15vh, 160px) !important;
  padding-bottom: clamp(96px, 15vh, 160px) !important;
}

body[data-page] .section::before,
body[data-page] .events-catalogue::before,
body[data-page] .creator-lab-sessions::before,
body[data-page] .founder-house-section::before {
  content: "";
  position: absolute;
  top: 48px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--home-line);
}

body[data-page] .grid,
body[data-page] .split-2,
body[data-page] .process,
body[data-page] [class*="-grid"] {
  gap: clamp(20px, 3vw, 34px) !important;
}

body[data-page] .card,
body[data-page] .panel,
body[data-page] .day-card,
body[data-page] .step,
body[data-page] .faq details,
body[data-page] .cta-banner,
body[data-page] .next-steps,
body[data-page] .college-value-banner,
body[data-page] .community-panel,
body[data-page] [class$="-card"]:not(.team-card):not(.partner-logo-card):not(.event-card),
body[data-page] [class*="-card "]:not(.team-card):not(.partner-logo-card):not(.event-card) {
  color: var(--home-ink) !important;
  background: var(--home-bg-elev) !important;
  border: 1px solid var(--home-line) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  transition:
    transform 350ms var(--home-ease),
    border-color 350ms var(--home-ease),
    background-color 350ms var(--home-ease) !important;
}

body[data-page] .card:hover,
body[data-page] .panel:hover,
body[data-page] .day-card:hover,
body[data-page] .step:hover,
body[data-page] [class$="-card"]:not(.team-card):not(.partner-logo-card):not(.event-card):hover,
body[data-page] [class*="-card "]:not(.team-card):not(.partner-logo-card):not(.event-card):hover {
  border-color: rgba(84, 255, 168, 0.36) !important;
  transform: translateY(-4px) !important;
}

/* About cards need real breathing room after the shared full-border treatment. */
body[data-page="about.html"] .card,
body[data-page="about.html"] .day-card {
  padding: clamp(26px, 3vw, 38px) !important;
}

body[data-page="about.html"] .team-card-copy {
  padding: clamp(24px, 2.4vw, 30px) !important;
}

body[data-page="about.html"] .team-card-role + h3 {
  margin-top: 14px !important;
}

body[data-page="about.html"] .team-card h3 + p {
  margin-top: 16px !important;
}

body[data-page] input,
body[data-page] textarea,
body[data-page] select {
  color: var(--home-ink) !important;
  background: rgba(11, 13, 17, 0.82) !important;
  border: 1px solid var(--home-line) !important;
  border-radius: 12px !important;
}

body[data-page] input:focus,
body[data-page] textarea:focus,
body[data-page] select:focus {
  border-color: var(--home-accent) !important;
  box-shadow: 0 0 0 3px var(--home-accent-dim) !important;
}

/* Team and partner artwork keeps its original bespoke layout, with homepage color treatment. */
body[data-page] .team-card,
body[data-page] .partner-logo-card {
  border-color: var(--home-line) !important;
  box-shadow: none !important;
}

body[data-page] .team-card:hover,
body[data-page] .partner-logo-card:hover {
  border-color: rgba(84, 255, 168, 0.35) !important;
}

body[data-page] .footer {
  color: var(--home-ink-faint) !important;
}

body[data-page] #site-footer {
  position: relative;
  overflow: hidden;
  padding-top: clamp(72px, 10vw, 128px) !important;
  padding-bottom: 40px !important;
  background: var(--home-bg) !important;
  border-top: 1px solid var(--home-line) !important;
}

body[data-page] #site-footer::before {
  content: "HORIZON";
  display: block;
  height: clamp(48px, 9vw, 100px);
  margin-bottom: 40px;
  overflow: hidden;
  color: rgba(242, 244, 248, 0.09);
  font-family: "Orbitron Horizon", Orbitron, Inter, sans-serif;
  font-size: clamp(4rem, 15vw, 11rem);
  font-weight: 900;
  line-height: 0.78;
  text-align: center;
  letter-spacing: 0.01em;
}

body[data-page] .footer-shell,
body[data-page] .colophon {
  max-width: 1200px;
  padding-inline: clamp(20px, 5vw, 64px) !important;
}

body[data-page] .footer-shell {
  border: 0 !important;
}

body[data-page] .footer-shell a,
body[data-page] .colophon,
body[data-page] .colophon a {
  color: var(--home-ink-dim) !important;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
}

body[data-page] .footer-shell a:hover,
body[data-page] .colophon a:hover {
  color: var(--home-accent) !important;
}

@media (max-width: 900px) {
  body[data-page] main {
    padding-top: 64px;
  }

  body[data-page] .site-header,
  body[data-page] .header-shell,
  body[data-page] .nav-pill {
    min-height: 64px;
  }

  body[data-page] .header-shell {
    padding: 0 14px !important;
  }

  body[data-page] .actions-pill,
  body[data-page].nav-open .actions-pill {
    width: auto !important;
    flex-wrap: nowrap !important;
    padding-right: 0 !important;
  }

  body[data-page] .actions-pill > .button.primary {
    display: none !important;
  }

  /* 用 fixed 而不是 absolute：absolute 的包含块是 .actions-pill（仅 44x38），而
     top: calc(100svh - 64px) 这种「贴屏幕底」的写法必须相对视口计算。
     上一轮把 .nav-pill 上的 backdrop-filter 移到伪元素、本轮把带 transform 的入场动画
     换成只动 opacity 的等价版本之后，.nav-pill 不再是 fixed 后代的包含块，这里的
     left / right / top 才能如期相对视口生效（见本文件 .nav-pill::before 与
     @keyframes home-pill-fade 两处注释）。 */
  body[data-page].nav-open .actions-pill > .button.primary {
    position: fixed;
    right: 20px;
    top: calc(100svh - 64px);
    bottom: auto;
    left: 112px;
    z-index: 1002;
    display: inline-flex !important;
    justify-content: center;
  }

  body[data-page].nav-open .actions-pill > .lang-switch {
    position: fixed;
    top: calc(100svh - 62px);
    bottom: auto;
    left: 20px;
    z-index: 1002;
    display: inline-flex !important;
  }

  body[data-page].nav-open .nav-pill {
    position: static !important;
    inset: auto !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: visible !important;
    border-radius: 0 !important;
  }

  body[data-page].nav-open .site-header {
    height: 100svh;
  }

  body[data-page] .nav-toggle {
    border: 0 !important;
    background: transparent !important;
  }

  body[data-page] .nav-toggle span {
    background: var(--home-ink) !important;
  }

  body[data-page].nav-open .nav-inner {
    position: absolute;
    top: 64px;
    right: auto;
    bottom: auto;
    left: -14px;
    z-index: 1;
    width: 100vw !important;
    height: calc(100svh - 64px) !important;
    display: flex !important;
    align-items: center;
    padding: 24px clamp(20px, 6vw, 40px) 96px !important;
    background: rgba(5, 6, 8, 0.96) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  body[data-page].nav-open .nav {
    width: 100%;
    gap: 0 !important;
  }

  body[data-page].nav-open .nav-link,
  body[data-page].nav-open .nav-trigger {
    width: 100%;
    padding: 18px 0 !important;
    border-bottom: 1px solid var(--home-line) !important;
    color: var(--home-ink) !important;
    font-family: Inter, "PingFang SC", sans-serif !important;
    font-size: clamp(1.35rem, 6vw, 2rem) !important;
    font-weight: 650 !important;
    letter-spacing: -0.02em !important;
    text-transform: none;
  }

  body[data-page] .page-header,
  body[data-page] .events-masthead,
  body[data-page] .community-hero,
  body[data-page] .creator-lab-hero,
  body[data-page] .founder-house-hero {
    min-height: 58svh;
  }

  body[data-page] h1,
  body[data-page] .events-title-line,
  body[data-page] .community-heading,
  body[data-page] .founder-house-hero h1 {
    font-size: clamp(1.75rem, 7.6vw, 2.75rem) !important;
  }

  body[data-page="about.html"] .card,
  body[data-page="about.html"] .day-card {
    padding: 24px !important;
  }

  body[data-page="about.html"] .team-card-copy {
    padding: 20px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page] *,
  body[data-page] *::before,
  body[data-page] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}


/* Unified rectangular navigation: match the React homepage on every static page. */
body[data-page] .site-header {
  inset: 0 0 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 82px !important;
  padding: 16px 20px 0 !important;
  pointer-events: none;
}

body[data-page] .site-header::before {
  display: none !important;
}

body[data-page] .header-shell {
  position: relative;
  width: 100% !important;
  max-width: 1220px !important;
  min-height: 66px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  pointer-events: auto;
}

body[data-page] .nav-pill {
  position: relative;
  display: flex !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 66px !important;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px !important;
  background: rgba(7, 9, 12, 0.84) !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  border-radius: 18px !important;
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
}

/* 毛玻璃层改由伪元素承担。
   原因：backdrop-filter 非 none 会为 position:fixed 后代创建包含块。这一层原本直接挂在
   .nav-pill 上，会让 .actions-pill 里的语言切换按钮 / 登录按钮以这个胶囊而不是视口为
   参照物定位，被推出屏幕点不到。伪元素不参与包含块计算，渲染结果与原来一致。
   同样的手法本文件已在 body[data-page] .site-header::before 上使用。 */
body[data-page] .nav-pill::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
}

/* .nav-pill 的入场动画原本取自 styles.css 的 pill-drop，其关键帧带
   translateY(-12px) → translateY(2px) → translateY(0) 和 scale(0.96) → scale(1.01) → scale(1)。
   本文件已用 transform: none !important 把它的位移压成了 0，但浏览器判定「谁为 fixed 后代
   提供包含块」时看的是该元素上有没有 transform 类动画，而不是 !important 覆盖之后的计算值 ——
   于是 .nav-pill 仍然是抽屉 .nav-inner 的包含块：抽屉被按胶囊的 padding box（364px 宽）解算，
   再内缩 12px，结果比顶栏窄 26px、顶边从 84 漂到 97，底部两个按钮也一并错位 13px。
   换成一段只在 opacity 上等价的关键帧即可消除这个副作用 —— 位移本来就被压制，opacity 的
   0% → 60% → 100% = 0 → 1 → 1 与 pill-drop 逐帧一致，duration / easing / fill 沿用
   styles.css 的 700ms / var(--ease-out) / both，所以视觉表现不变。 */
@keyframes home-pill-fade {
  0% {
    opacity: 0;
  }

  60% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

body[data-page] .nav-pill {
  animation-name: home-pill-fade !important;
}

body[data-page] .brand-pill {
  padding: 8px !important;
  border: 0 !important;
}

body[data-page] .brand-mark {
  width: 64px !important;
  height: 24px !important;
}

body[data-page] .actions-pill {
  position: relative;
  z-index: 2;
}

body[data-page] .nav-toggle {
  border-radius: 12px !important;
}

@media (min-width: 1024px) {
  body[data-page] .nav-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
  }

  body[data-page] .nav {
    flex-wrap: nowrap;
  }
}

@media (max-width: 1199px) {
  body[data-page] .brand {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  body[data-page] main {
    padding-top: 76px;
  }

  body[data-page] .site-header {
    min-height: 72px !important;
    padding: 12px 12px 0 !important;
  }

  body[data-page] .header-shell,
  body[data-page] .nav-pill {
    min-height: 60px !important;
  }

  body[data-page] .nav-pill {
    padding: 0 9px !important;
    border-radius: 15px !important;
  }

  body[data-page] .nav-inner {
    display: none !important;
  }

  body[data-page] .nav-toggle {
    display: block !important;
    width: 44px !important;
    height: 44px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    background: rgba(0, 0, 0, 0.2) !important;
  }

  body[data-page].nav-open .site-header {
    height: auto !important;
    /* 抽屉是 fixed 定位，包含块本应是视口。但 horizon-motion.css 在「向下滚动」时会给
       .site-header 加上 transform: translateY(-105%)，只要祖上出现 transform，fixed 的
       包含块就会退化成 .site-header，抽屉会跟着顶栏一起上移 —— 实测 768 / 900 宽度下
       抽屉顶边从 84 掉到 8，随后又跳回 84，是一次可见的 76px 抖动。
       抽屉展开期间顶栏本来就必须留在原位（汉堡按钮要能再点一次收起），所以这里把位移清零。
       顶栏不处于滚动隐藏状态时 transform 本来就是 none，因此这条对其他情况没有影响。 */
    transform: none !important;
  }

  body[data-page].nav-open .nav-pill {
    position: relative !important;
    inset: auto !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    max-height: none !important;
    padding: 0 9px !important;
    overflow: visible !important;
    border-radius: 15px !important;
  }

  body[data-page].nav-open .nav-inner {
    position: fixed !important;
    top: 84px !important;
    right: 12px !important;
    bottom: auto !important;
    left: 12px !important;
    display: flex !important;
    width: auto !important;
    height: auto !important;
    max-height: calc(100svh - 96px) !important;
    align-items: stretch !important;
    padding: 12px !important;
    overflow-y: auto !important;
    background: rgba(7, 9, 12, 0.96) !important;
    border: 1px solid rgba(255, 255, 255, 0.13) !important;
    border-radius: 15px !important;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.34) !important;
    -webkit-backdrop-filter: blur(16px) saturate(120%) !important;
    backdrop-filter: blur(16px) saturate(120%) !important;
  }

  body[data-page].nav-open .nav {
    display: flex !important;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px !important;
  }

  body[data-page].nav-open .nav-link,
  body[data-page].nav-open .nav-trigger {
    min-height: 46px;
    padding: 12px 14px !important;
    border-bottom: 1px solid var(--home-line) !important;
    font-family: Inter, "PingFang SC", sans-serif !important;
    font-size: 15px !important;
    letter-spacing: 0 !important;
    text-transform: none;
  }

  body[data-page].nav-open .nav-menu {
    display: block;
    width: 100%;
  }
}

@media (max-width: 600px) {
  body[data-page] .actions-pill > .lang-switch,
  body[data-page] .actions-pill > .button.primary {
    display: none !important;
  }
}