/* 补充：原版编译 CSS 只含它用过的类；这些是复刻页面新增用到的（值与原版一致） */
.min-h-\[calc\(100vh-88px\)\]{min-height:calc(100vh - 88px)}
@media (max-width:900px){.min-h-\[calc\(100vh-88px\)\]{min-height:0}}
.max-w-\[1400px\]{max-width:1400px}
.max-w-\[640px\]{max-width:640px}
.max-w-\[600px\]{max-width:600px}
.aspect-\[4\/3\]{aspect-ratio:4/3}
.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.text-\[38px\]{font-size:38px}
@media (min-width:768px){.md\:text-\[72px\]{font-size:72px}}

/* 覆盖原版写死的色值类 → 指向我们的主题变量（2026-10-02）
   原版把页面底色/渐变写成了具体色值，导致换主题时只有文字在变、底色不变。
   这里按类名逐个映射到 token，于是 5 套主题能驱动整站底色与渐变。 */
.bg-\[\#12121c\]{background-color:var(--background)}
.border-\[\#12121c\]{border-color:var(--line)}
.from-\[\#12121c\]{--tw-gradient-from:var(--background)}
.via-\[\#12121c\]{--tw-gradient-via:var(--background)}
.to-\[\#12121c\]{--tw-gradient-to:var(--background)}
.from-\[\#1a1a28\]{--tw-gradient-from:var(--card)}
.via-\[\#161622\]{--tw-gradient-via:var(--bg-2)}
.to-\[\#1e1e2e\]{--tw-gradient-to:var(--panel-2)}
/* 兜底：任何仍写死 #12121c 的元素也跟随主题 */
[style*="#12121c"]{background-color:var(--background) !important}

/* 首屏图片区：主题感知遮罩 + 文案层级（2026-10-02）
   原版首屏是深色实拍图 + 30% 透明度，浅色主题下"深字压暗图"看不见。
   这里叠一层跟随主题的遮罩，并在其上保证文字可读。 */
section.relative.w-full.h-\[85vh\]::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  /* 左侧压暗保证文案对比度，向右逐渐透明让实拍图露出来 */
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--background) 86%, transparent) 0%,
    color-mix(in srgb, var(--background) 62%, transparent) 42%,
    color-mix(in srgb, var(--background) 18%, transparent) 72%,
    transparent 100%);
}
/* 只作用于正文层，**不能**用裸 `> div`：首屏第一个 div 是图片层 `absolute inset-0`，
   被这里改成 relative 后会退回文档流，把文案整块顶到首屏之外（overflow:hidden 裁掉）——
   2026-10-04 客户报「首屏文案不见了」就是这条造成的。 */
section.relative.w-full.h-\[85vh\] > div:not(.absolute){position:relative;z-index:2}
/* 首屏实拍图：原版不透明度 0.3，浅色主题下几乎看不见；提到 0.55 并让深色主题略高 */
section.relative.w-full.h-\[85vh\] img{opacity:.55}

/* 半透明写死底色（/90 变体）→ 主题变量（2026-10-02）
   典型受害者：顶栏 header.bg-[#12121c]/90 —— 浅色主题下文字变深、底色仍旧深，整条导航看不见 */
.bg-\[\#12121c\]\/50{background-color:color-mix(in srgb, var(--background) 50%, transparent)}
.bg-\[\#161622\]\/50{background-color:color-mix(in srgb, var(--bg-2) 50%, transparent)}
.bg-\[\#1a1a28\]\/50{background-color:color-mix(in srgb, var(--card) 50%, transparent)}
.bg-\[\#12121c\]\/60{background-color:color-mix(in srgb, var(--background) 60%, transparent)}
.bg-\[\#161622\]\/60{background-color:color-mix(in srgb, var(--bg-2) 60%, transparent)}
.bg-\[\#1a1a28\]\/60{background-color:color-mix(in srgb, var(--card) 60%, transparent)}
.bg-\[\#12121c\]\/70{background-color:color-mix(in srgb, var(--background) 70%, transparent)}
.bg-\[\#161622\]\/70{background-color:color-mix(in srgb, var(--bg-2) 70%, transparent)}
.bg-\[\#1a1a28\]\/70{background-color:color-mix(in srgb, var(--card) 70%, transparent)}
.bg-\[\#12121c\]\/80{background-color:color-mix(in srgb, var(--background) 80%, transparent)}
.bg-\[\#161622\]\/80{background-color:color-mix(in srgb, var(--bg-2) 80%, transparent)}
.bg-\[\#1a1a28\]\/80{background-color:color-mix(in srgb, var(--card) 80%, transparent)}
.bg-\[\#12121c\]\/85{background-color:color-mix(in srgb, var(--background) 85%, transparent)}
.bg-\[\#161622\]\/85{background-color:color-mix(in srgb, var(--bg-2) 85%, transparent)}
.bg-\[\#1a1a28\]\/85{background-color:color-mix(in srgb, var(--card) 85%, transparent)}
.bg-\[\#12121c\]\/90{background-color:color-mix(in srgb, var(--background) 90%, transparent)}
.bg-\[\#161622\]\/90{background-color:color-mix(in srgb, var(--bg-2) 90%, transparent)}
.bg-\[\#1a1a28\]\/90{background-color:color-mix(in srgb, var(--card) 90%, transparent)}
.bg-\[\#12121c\]\/95{background-color:color-mix(in srgb, var(--background) 95%, transparent)}
.bg-\[\#161622\]\/95{background-color:color-mix(in srgb, var(--bg-2) 95%, transparent)}
.bg-\[\#1a1a28\]\/95{background-color:color-mix(in srgb, var(--card) 95%, transparent)}