/* auimlab 工厂大脑 · FISHEYE COSMIC SYSTEM ATLAS
   17 张卡均匀 360° 排布，鱼眼散景式渲染。
   CSS 只管材质/响应式/暂停指示；位置/缩放/透明度/模糊由 JS 鱼眼曲线每帧计算。 */

body.mfr-zhihu {
  position: relative;
  color: #e8edf5;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
  background: #02040c;  /* 视频加载前/失败时的纯黑底 */
}

/* === 全屏宇宙视频背景 (工厂大脑 · 数字机房控制中心) === */
.mfr-cosmos-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  object-fit: cover;
  object-position: center center;
  filter: brightness(0.55) saturate(0.85) contrast(1.1);
  pointer-events: none;
  /* 视频循环间隙让画面更柔和: 加微小 scale + 缓慢旋转 */
  animation: cosmosBgDrift 90s ease-in-out infinite alternate;
}
@keyframes cosmosBgDrift {
  0% { transform: scale(1.05) rotate(0deg); }
  100% { transform: scale(1.12) rotate(0.6deg); }
}
.mfr-cosmos-overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* 顶部柔化, 让 nav 不被视频抢戏 */
    linear-gradient(180deg, rgba(2,4,12,.55) 0%, rgba(2,4,12,.25) 18%, rgba(2,4,12,0) 35%, rgba(2,4,12,0) 65%, rgba(2,4,12,.35) 90%, rgba(2,4,12,.7) 100%),
    /* 全局蓝调叠加 */
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(20,40,80,.18) 0%, rgba(2,4,12,.45) 70%),
    rgba(2,4,12,.25);
}
/* 视频加载失败时退化到背景渐变 */
.mfr-cosmos-bg[hidden] { display: none; }

.mfr-hero {
  position: relative;
  /* === 2026-08-04 fix: z-index 从 2 提到 3, 防止远端卡飞到 hero 区域遮挡标题.
     原理: hero (.z=3) 跟 stage (.z=2) 是同级 stacking context, 跨 context 排序看 context 自身 z-index,
     不看 DOM 顺序. hero z=3 > stage z=2 → hero 永远在 stage 卡片之上.
     内部 --card-z (1000~2000) 只在 stage context 内排序, 不影响 hero. === */
  z-index: 3;
  max-width: 1120px;
  margin: 0 auto;
  padding: 88px 24px 4px;
  text-align: center;
  pointer-events: auto;
}
/* hero 区: 顶部小弧线高光 + 底部柔光延伸, 让 hero/stats/stage 视觉联动成一整体 */
.mfr-hero::before {
  content: "";
  position: absolute; top: 50%; left: 50%; width: 90%; height: 260px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(88,166,255,.22) 0%, rgba(102,217,239,.10) 35%, transparent 72%);
  pointer-events: none; z-index: -1;
}
.mfr-hero::after {
  /* 底部柔光延伸: 让 hero 与下方 stage 形成"光桥" */
  content: "";
  position: absolute;
  bottom: -70px; left: 50%; transform: translateX(-50%);
  width: 70%; height: 100px;
  background: radial-gradient(ellipse 50% 100% at 50% 0%, rgba(88,166,255,.22) 0%, rgba(102,217,239,.10) 35%, transparent 70%);
  pointer-events: none; z-index: -1;
}
.mfr-eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin-bottom: 18px;
  padding: 4px 13px;
  color: #66d9ef;
  border: 1px solid rgba(88,166,255,.28);
  border-radius: 3px;
  background: rgba(88,166,255,.06);
  font: 600 10px/1.4 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 2.8px;
}
.mfr-h1 { margin: 0 0 12px; color: #f7f8f8; font-size: clamp(30px,4.2vw,52px); font-weight: 600; line-height: 1.06; letter-spacing: -.04em; }
.mfr-sub { max-width: 800px; margin: 0 auto 20px; color: #929baa; font-size: 14px; line-height: 1.75; }
.mfr-stats {
  display: inline-grid;
  grid-template-columns: repeat(4, minmax(90px, 1fr));
  overflow: hidden;
  border: 1px solid rgba(88,166,255,.14);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(88,166,255,.04) 0%, rgba(255,255,255,.02) 100%);
  box-shadow: 0 4px 22px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04);
  position: relative;
}
.mfr-stats::before {
  /* 顶部细高光线, 让 stats 跟 hero/stage 视觉联动 (而非孤立方块) */
  content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(88,166,255,.6), rgba(102,217,239,.4), transparent);
}
.mfr-stats > div { position: relative; min-width: 104px; padding: 11px 18px; }
.mfr-stats > div + div::before { content: ""; position: absolute; top: 10px; bottom: 10px; left: 0; width: 1px; background: rgba(255,255,255,.07); }
.mfr-stat-num {
  color: #f7f8f8;
  font: 600 21px/1 "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #ffffff 0%, #c9d4e6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 8px rgba(88,166,255,.35));
  animation: mfrStatBreathe 4.5s ease-in-out infinite;
}
@keyframes mfrStatBreathe {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(88,166,255,.25)); }
  50% { filter: drop-shadow(0 0 14px rgba(88,166,255,.55)); }
}
.mfr-stat-label { margin-top: 5px; color: #6f7886; font-size: 10px; letter-spacing: .8px; }

.mfr-stage {
  position: relative;
  z-index: 2;  /* 在视频背景 + overlay 之上 */
  /* === 拉宽滚动区域 (用户要求): 1740px 宽 (视口居中, 左右边缘模糊延展) ===
     (1280 视口 + 1740 stage → stage 居中需 transform: translateX(-230px)) */
  width: 1740px;
  max-width: 1740px;
  margin: 0 auto;
  padding: 28px 0 80px;
  /* 居中 stage 在 viewport 内: 1740/1280 → 多出 460px, 左右各 -230px */
  transform: translateX(calc((100vw - 100%) / 2));
}
.mfr-stage::before {
  /* stage 顶部柔光带: 把上方 hero/stats 跟 stage 视觉连接起来 (防"模块脱钩") */
  content: ""; position: absolute; top: -30px; left: 5%; right: 5%; height: 90px;
  background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(88,166,255,.16) 0%, transparent 70%);
  pointer-events: none;
}
.mfr-stage::after {
  /* 进度轨装饰: 在 stats 和 stage 之间加一条极细的渐隐线 + 17 个圆点 (微缩索引) */
  content: "";
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  width: min(560px, 72%); height: 14px;
  background-image:
    radial-gradient(circle, rgba(88,166,255,.85) 0 1.4px, transparent 2px),
    linear-gradient(90deg, transparent, rgba(88,166,255,.45) 12%, rgba(102,217,239,.55) 50%, rgba(88,166,255,.45) 88%, transparent);
  background-size: 32px 14px, 100% 1.5px;
  background-position: 0 50%, 0 50%;
  background-repeat: repeat-x, no-repeat;
  pointer-events: none;
  opacity: .9;
  animation: mfrIndexPulse 4s ease-in-out infinite;
}
@keyframes mfrIndexPulse {
  0%, 100% { opacity: .7; }
  50% { opacity: 1; }
}
.zhihu-stage {
  position: relative;
  height: 720px;
  /* === 2026-08-03 重新设计: 3D 椭圆轨道方案 ===
     stage 不再拉宽 (1740 改回视口宽度), 17 张卡均匀绕中心椭圆轨道排列.
     perspective: 1400px 让 Z 推背有真实纵深感, overflow: visible 让远端卡不被裁切 */
  width: 100%;
  max-width: 1740px;
  margin: 0 auto;
  overflow: visible;
  border: 0;
  border-radius: 0;
  outline: none;
  background: transparent;
  box-shadow: none;
  user-select: none;
  /* 2026-08-03 fix: 之前 pan-y 让浏览器吞掉垂直拖动的 pointermove,
     而我们的 drag 同时也要接收 dy, 故改 none 完全自己处理. */
  touch-action: none;
  isolation: isolate;
  perspective: 1400px;
  perspective-origin: 50% 50%;
}
.zhihu-card-box { position: absolute; inset: 0; /* 不再 preserve-3d (ring 不再旋转) */ }
.zhihu-stage::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .25; background-image: radial-gradient(circle,rgba(160,211,255,.7) 0 1px,transparent 1.5px),radial-gradient(circle,rgba(88,166,255,.5) 0 1px,transparent 1.5px); background-position: 9% 21%,73% 18%; background-size: 173px 151px,227px 187px; }
/* .zhihu-stage::after 取消 */
.zhihu-stage:focus-visible { outline: none; }
.cosmic-starfield { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .22; background-image: radial-gradient(circle at 18% 36%,rgba(102,217,239,.9) 0 1px,transparent 1.5px),radial-gradient(circle at 82% 30%,rgba(163,113,247,.8) 0 1px,transparent 1.5px),radial-gradient(circle at 62% 78%,rgba(88,166,255,.8) 0 1px,transparent 1.5px); background-size: 251px 199px,319px 271px,383px 317px; }
/* 删 .cosmic-orbit 装饰椭圆 (Stripe/Vercel 风: 不在 stage 内画装饰图形) */
/* .cosmic-orbit / .cosmic-orbit-inner 取消 */

.zhihu-viewport {
  position: absolute; z-index: 7; inset: 0; overflow: visible;
  transform-style: preserve-3d;
}
.zhihu-card-box {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
}
.zhihu-card {
  --fish-x: 0px; --fish-y: 0px; --fish-z: 0px; --fish-scale: 1; --fish-opacity: 1; --fish-blur: 0px;
  --focus-scale: 0; --focus-opacity: 0; --focus-blur: 0px; --focus-rotateY: 0deg; --focus-rotateX: 0deg;
  --card-x: 0px; --card-y: 0px; --card-z: 0px; --card-scale: 1; --card-opacity: 1; --card-blur: 0px;
  --card-tint: 0; --card-saturate: 1; --card-zindex: 1; --card-z: 1;
  position: absolute; top: 50%; left: 50%; transform-style: preserve-3d; backface-visibility: hidden;
  /* === 2026-08-03 椭圆轨道: 卡尺寸 130x220 (小一圈, 让 17 张能塞下椭圆而不互相挤压)
       === v11: 收窄到 122x210 进一步避免左右两侧卡片溢出可视区 === */
  width: 122px; height: 210px; margin: -105px 0 0 -61px;
  /* 鱼眼曲线投影: --fish-* 控制 fx/fy/fz/scale/opacity/blur
     --focus-* 额外做"中线聚焦" (scale↑, opacity↑, blur↓, rotateY/X 小角度)
     Z 推背 (translate3d Z负值) 在 perspective: 1400px 下产生真纵深感 */
  transform:
    translate3d(calc(var(--fish-x)), calc(var(--fish-y)), calc(var(--fish-z)))
    rotateX(calc(var(--focus-rotateX)))
    rotateY(calc(var(--focus-rotateY)))
    scale(calc(var(--fish-scale) + var(--focus-scale)));
  /* === 2026-08-04 fix: filter / opacity<1 / will-change:filter 都会创建独立 stacking context
       并 flatten preserve-3d 上下文, 导致 3D z 排序退化为 DOM 顺序 + 静态 z-index,
       出现"前/后交叉"异常. 修法:
         1) 把 blur 移到 .zhihu-card-surface (它的伪元素不破坏 3D 父链)
         2) saturate/brightness 用同色变量在 surface 内部实现 (不直接放 .zhihu-card)
         3) z-index 跟 viewZ 量化 (--card-z 写入 Math.round(viewZ × 1.234))
         4) 删 will-change: filter, 留 will-change: transform+opacity 即可
         5) === 2026-08-04 v3 进一步修: opacity 从 .zhihu-card 移到 .zhihu-card-surface.
            之前 .zhihu-card 上 opacity<1 (远端卡 0.32) 也会创建 stacking context, 让
            3D 父子链中断. 现在 opacity 在 .zhihu-card-surface 上, surface 本身已因
            overflow:hidden + filter 必是 stacking context, 加 opacity 不额外影响.
            关键: .zhihu-card 自己不再因 opacity 创建独立 stacking context,
            transform: translate3d 的 Z 在浏览器真 3D 渲染里不再被 flatten. ===
         6) === 2026-08-04 v6 保险双兜底: 重新加回 z-index (var(--card-z)) + will-change: transform.
            v5 删了这两个后, 理论上浏览器按 transform Z 分量排, 但实际 Chrome / Edge /
            Firefox / Safari 在 preserve-3d 上下文里的 z-index 行为不一致:
              - Chrome: z-index 整数会覆盖 3D z (变成 2D layer 排序)
              - Firefox: 同上
              - Safari: z-index 不参与 3D z 排序 (按 transform Z 排)
            但**只要 z-index 跟 viewZ 量化值跟 viewZ 单调一致** (viewZ 大 → z-index 大),
            哪个浏览器用哪个排序, 视觉顺序都正确. 这是 v6 的核心保险:
              设 z-index = viewZ 量化 → 所有浏览器都按 viewZ 排序 (无论按 z-index 还是 3D z).
              即使浏览器 fallback, 视觉都正确.
            will-change: transform 同样: 创建 GPU layer, 但配合 transform-style: preserve-3d
            在父级下, layer 在 3D 空间里接受 perspective + translateZ 排序. === */
  z-index: var(--card-z, 1);
  will-change: transform;
  pointer-events: auto;
  transition: none;
}

/* === 中线切换接力动画 2026-08-04 删除: 旧 front 缩回效果太突兀, 由 renderOrbit 自动接管 ===
   === 2026-08-04 fix: is-front / is-near 不再覆盖 --card-zindex, z-index 改由每帧
   renderOrbit 根据 viewZ 量化写入 --card-z = 1000..2000, 保证近卡始终在上. === */
.zhihu-card-surface {
  position: relative; display: grid; grid-template-rows: auto auto 1fr auto; width: 100%; height: 100%;
  overflow: hidden; padding: 14px 14px 12px; color: #f7f8f8;
  /* 2026-08-10 §perf-v20: 多层玻璃感 (real glassmorphism)
     1) 主体深色玻璃 (半透明 + 渐变)
     2) ::before 3px 左侧色条 (保留)
     3) ::after 动态 conic-gradient 扫描光带 (新增)
     4) 表面叠 SVG 风格扫描线 (::before 之外新增伪元素)
     5) 多层 box-shadow 真光晕 (3-4 层叠加) */
  background:
    linear-gradient(135deg, rgba(255,255,255,0.04) 0%, transparent 30%),
    linear-gradient(125deg,color-mix(in srgb,var(--card-c1) 18%,#111923),#0b111b 52%,color-mix(in srgb,var(--card-c2) 14%,#080d15));
  border: 1px solid rgba(255,255,255,.12); border-radius: 10px;
  /* 多层 box-shadow: 1) 落影 2) 内顶高光 3) 颜色辉光 4) inset 边框 */
  box-shadow:
    0 20px 40px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 0 24px color-mix(in srgb,var(--card-c1) 8%,transparent),
    inset 0 1px 0 rgba(255,255,255,.08);
  cursor: pointer;
  /* 2026-08-10 §perf-v20: backdrop-filter 真玻璃 (GPU 合成, 不破坏 preserve-3d) */
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  transition: border-color .25s,box-shadow .25s,transform .25s;
  /* === 2026-08-04 fix: 把 filter 从 .zhihu-card 迁到这里, 避免 filter 创建
     stacking context 截断父级 preserve-3d 上下文.
     关键: .zhihu-card-surface 自身只设了 overflow:hidden + transform: none,
     filter 不会破坏 3D 链 (filter 截断 3D 是在有 transform-style: preserve-3d
     的元素上, 而 surface 没有 preserve-3d, 只是普通 div, filter 对它的影响
     是"自己变 stacking context" 但不波及父级 3D 渲染).

     === 2026-08-04 v4 重要修正: 不在这里加 opacity. opacity 即使在 surface 上也是
     创建 stacking context, 让父级 preserve-3d flatten (opacity 影响 composite layer,
     浏览器优化时把 3D 降为 2D).
     远端渐变改用: brightness(降低) + saturate(降低) + scale(缩小). 三者都是属性动画,
     不创建 stacking context, 不影响 3D 渲染. === */
  filter: blur(calc(var(--fish-blur) + var(--focus-blur))) saturate(calc(var(--card-saturate, 1) - var(--fish-opacity-inverse, 0))) brightness(calc(1 - var(--card-tint, 0))) opacity(calc(var(--fish-opacity) + var(--focus-opacity)));
}
.zhihu-card.is-near .zhihu-card-surface { border-color: color-mix(in srgb,var(--card-c1) 32%,rgba(255,255,255,.18)); box-shadow: 0 20px 50px rgba(0,0,0,.5),0 0 24px color-mix(in srgb,var(--card-c1) 10%,transparent),inset 0 1px 0 rgba(255,255,255,.07); }
/* 2026-08-10 §perf-v20: focus 卡多层真光晕 + 边框加亮 + 中心高光内嵌 */
.zhihu-card.is-front .zhihu-card-surface {
  border-color: color-mix(in srgb,var(--card-c1) 90%,rgba(255,255,255,.5));
  box-shadow:
    /* 1) 落影更深更远 */
    0 30px 80px rgba(0,0,0,.6),
    /* 2) 主光晕 (3-4 层叠加, 表现"主角登场"气场) */
    0 0 60px color-mix(in srgb,var(--card-c1) 45%,transparent),
    0 0 100px color-mix(in srgb,var(--card-c1) 25%,transparent),
    /* 3) inset 边缘高光 + 内顶光 */
    inset 0 0 0 1px color-mix(in srgb,var(--card-c1) 50%,transparent),
    inset 0 1px 0 rgba(255,255,255,.2),
    /* 4) 内底光 (聚焦时卡片底部有微微上亮, 像聚光灯从下方打) */
    inset 0 -40px 60px -20px color-mix(in srgb,var(--card-c1) 18%,transparent);
  transform: translateZ(0);  /* 触发独立 layer */
}
.zhihu-card-surface::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(180deg,var(--card-c1),var(--card-c2)); box-shadow: 0 0 22px color-mix(in srgb,var(--card-c1) 55%,transparent); }
/* === 2026-08-10 §perf-v20: 动态 conic-gradient 扫描光带 (新技术亮点 #1)
   表面叠 1px 旋转光环, 像"全息扫描带", 持续转动. 用 mask 让光带只在边框附近,
   中心透明 (避免遮挡文字). 整个 ::after 是 GPU 合成, 不破坏 3D 父链. */
.zhihu-card-surface::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none; border-radius: 10px;
  background: conic-gradient(from calc(var(--scan-angle, 0deg)),
    transparent 0deg, transparent 320deg,
    color-mix(in srgb, var(--card-c1) 60%, white) 358deg,
    color-mix(in srgb, var(--card-c2) 80%, white) 360deg,
    transparent 0deg);
  /* mask 让光带只显示在卡片边缘 (1.5px 厚), 中间透明 */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  padding: 1.5px;
  opacity: 0.7;
  animation: card-scan 6s linear infinite;
  animation-play-state: var(--scan-play, running);
}
@keyframes card-scan {
  from { --scan-angle: 0deg; }
  to { --scan-angle: 360deg; }
}
/* === 2026-08-10 §perf-v20: 多层 background 叠"扫描线" + 角落装饰 (新技术亮点 #2) === */
.zhihu-card-surface {
  background-image:
    /* 表面网格扫描线 (1px horizontal repeat, 表现 CRT 显示器) */
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,0.012) 3px 4px),
    /* 角落高光 (左上 + 右下, 表现"光从边缘漏进来") */
    radial-gradient(circle at 0% 0%, rgba(255,255,255,0.08) 0%, transparent 30%),
    radial-gradient(circle at 100% 100%, rgba(255,255,255,0.04) 0%, transparent 25%),
    /* 表面玻璃反光 (左上→右下) */
    linear-gradient(135deg, rgba(255,255,255,0.04) 0%, transparent 30%),
    /* 主体深色渐变 */
    linear-gradient(125deg, color-mix(in srgb,var(--card-c1) 18%,#111923), #0b111b 52%, color-mix(in srgb,var(--card-c2) 14%,#080d15));
}
/* === 2026-08-04 简化: 删掉 .zhihu-card-surface::after 240px 圆环装饰 (用户称"太阳圈")
   卡片右上不再有大圆环, 只保留 ::before 左侧 3px 色条 === */

/* === 2026-08-04 完全移除 ai-brain 样式 (用户称"呼吸太阳圈", 整个 SVG 已不再渲染)
   保留 .zhihu-card-surface 本身, 让卡片只有文字内容 === */

/* 节点/连线样式已删 (不再渲染, 保留供未来重新启用时参考)
   .ai-node, .ai-node-core, .ai-link, .ai-link-mesh 样式全部移除 */

.zhihu-card-watermark { position: absolute; right: 6px; bottom: -16px; color: rgba(255,255,255,.04); font: 600 100px/.85 "JetBrains Mono",monospace; letter-spacing: -.08em; pointer-events: none; }
.zhihu-card-num { position: relative; z-index: 1; color: #8692a3; font: 600 7.5px/1.4 "JetBrains Mono",monospace; letter-spacing: 1.6px; }
.zhihu-card-title { position: relative; z-index: 1; max-width: 94%; margin: 10px 0 4px; color: #f7f8f8; font-size: clamp(13px,1.25vw,18px); font-weight: 560; line-height: 1.14; letter-spacing: -.025em; }
.zhihu-card-en { position: relative; z-index: 1; max-width: 98%; color: #7f8a99; font: 400 7.5px/1.4 "JetBrains Mono",monospace; letter-spacing: .15px; }
.zhihu-card-tagline { position: relative; z-index: 1; align-self: end; max-width: 96%; color: #aeb8c6; font-size: 8.5px; line-height: 1.55; }
.zhihu-card-count { position: relative; z-index: 1; display: flex; align-items: end; justify-content: space-between; gap: 6px; margin-top: 8px; padding-top: 8px; color: #717d8e; border-top: 1px solid rgba(255,255,255,.08); font: 500 7px/1 "JetBrains Mono",monospace; letter-spacing: .4px; }
.zhihu-card-count strong { margin-right: 3px; color: #f7f8f8; font-size: 12px; font-weight: 560; }
.zhihu-card-open { display: inline-flex; align-items: center; gap: 3px; color: #8ecbff; font-size: 7.5px; white-space: nowrap; }
.zhihu-card-open svg { transition: transform .2s; }
.zhihu-card-surface:hover .zhihu-card-open svg { transform: translateX(3px); }


body.mfr-modal-open { overflow: hidden; }
.mfr-modal-overlay { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 24px; visibility: hidden; opacity: 0; background: rgba(0,4,10,.84); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: opacity .25s,visibility .25s; }
.mfr-modal-overlay.open { visibility: visible; opacity: 1; }
.mfr-modal { position: relative; width: min(760px,100%); max-height: min(760px,calc(100vh - 48px)); overflow: auto; padding: 34px; border: 1px solid rgba(88,166,255,.25); border-radius: 8px; background: #0b111b; box-shadow: 0 30px 100px rgba(0,0,0,.7); transform: translateY(12px) scale(.985); transition: transform .28s cubic-bezier(.22,1,.36,1); transform-origin: 50% 50%; transform-style: preserve-3d; will-change: transform, opacity; perspective: 1400px; }
.mfr-modal-overlay.open .mfr-modal { transform: none; }
.mfr-modal-close { position: absolute; top: 14px; right: 14px; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; color: #aeb8c6; border: 1px solid rgba(255,255,255,.1); border-radius: 4px; background: rgba(255,255,255,.035); cursor: pointer; }
.mfr-modal-num { color: #66d9ef; font: 600 10px/1.4 "JetBrains Mono",monospace; letter-spacing: 2px; }
.mfr-modal-title { margin: 14px 0 6px; color: #f7f8f8; font-size: 34px; font-weight: 560; letter-spacing: -.035em; }
.mfr-modal-en { color: #748091; font: 400 11px/1.5 "JetBrains Mono",monospace; }
.mfr-modal-tagline { margin-top: 22px; color: #b7c0cc; font-size: 15px; }
.mfr-modal-desc { margin-top: 18px; color: #8f9aaa; font-size: 13px; line-height: 1.75; }
.mfr-modal-systems-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; }
.mfr-modal-system-item { display: grid; gap: 3px; padding: 12px; color: #dce2ea; border: 1px solid rgba(255,255,255,.075); border-radius: 4px; background: rgba(255,255,255,.025); text-decoration: none !important; }
.mfr-modal-system-item:hover { border-color: rgba(88,166,255,.35); background: rgba(88,166,255,.075); }
.mfr-modal-system-item-name { color: #f7f8f8; font-size: 12px; line-height: 1.4; }
.mfr-modal-system-item-vendor { color: #6f7a89; font: 400 9px/1.4 "JetBrains Mono",monospace; }
.mfr-modal-actions { display: flex; gap: 9px; margin-top: 24px; }
.mfr-modal-action { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 9px 16px; color: #bac4d0; border: 1px solid rgba(255,255,255,.11); border-radius: 4px; background: rgba(255,255,255,.025); font-size: 11px; font-weight: 560; text-decoration: none !important; cursor: pointer; }
.mfr-modal-action-primary { color: #fff; border-color: #1c69d4; background: #1c69d4; }
.mfr-modal-action-primary:hover { background: #2878e0; }
.mfr-modal-action-ghost:hover { color: #fff; border-color: rgba(88,166,255,.4); background: rgba(88,166,255,.08); }
.mfr-modal-empty { padding: 12px; color: #697485; font-size: 12px; }
.mf-catnav,.mf-main[hidden] { display: none !important; }

@media (max-width: 1180px) {
  .mfr-stage { width: min(1100px,calc(100% - 32px)); }
  .zhihu-stage { height: 640px; perspective: 1400px; }
  .zhihu-card { width: 110px; height: 200px; margin: -100px 0 0 -55px; }
}
@media (max-width: 768px) {
  .mfr-hero { padding: 92px 16px 18px; }
  .mfr-h1 { font-size: 31px; }
  .mfr-sub { font-size: 13px; }
  .mfr-stats { width: 100%; grid-template-columns: 1fr 1fr; }
  .mfr-stats > div { min-width: 0; }
  .mfr-stats > div:nth-child(3)::before { display: none; }
  .mfr-stats > div:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.07); }
  .mfr-stage { width: calc(100% - 24px); padding-top: 12px; }
  .zhihu-stage { height: 560px; perspective: 1100px; }
  .zhihu-card { width: 90px; height: 170px; margin: -85px 0 0 -45px; }
  .zhihu-card-surface { padding: 12px 12px 10px; }
  .zhihu-card-title { margin-top: 8px; font-size: 12px; }
  .zhihu-card-en { font-size: 7px; }
  .zhihu-card-tagline { font-size: 8px; }
  .zhihu-card-count { margin-top: 7px; padding-top: 7px; font-size: 6px; }
  .zhihu-card-count strong { font-size: 11px; }
  .zhihu-card-open { font-size: 7px; }
  .zhihu-card-watermark { font-size: 70px; }
  .mfr-modal { padding: 28px 20px; }
  .mfr-modal-title { padding-right: 36px; font-size: 28px; }
  .mfr-modal-systems-list { grid-template-columns: 1fr; }
  .mfr-modal-actions { flex-direction: column; }
}
@media (max-width: 380px) {
  .mfr-h1 { font-size: 27px; }
  .mfr-eyebrow { font-size: 9px; letter-spacing: 1.6px; }
  .zhihu-stage { height: 520px; }
  .zhihu-card { width: 80px; height: 150px; margin: -75px 0 0 -40px; }
  .zhihu-card-surface { padding: 11px 10px 9px; }
  .zhihu-card-title { font-size: 11px; }
}
@media (hover:none) and (pointer:coarse) { .mfr-modal-close { min-width: 44px; min-height: 44px; } }
@media (prefers-reduced-motion:reduce) {
  /* 2026-08-10 §perf-v12: 全局禁用 infinite animation (mfrStatBreathe / mfrIndexPulse 等),
     用户系统设降低动效 → 8 个 animation 全部归零, GPU 占用大幅下降 */
  .zhihu-card, .mfr-modal,
  .mfr-orbiting, .mfr-orbiting *,
  .mfr-index, .mfr-index *,
  [class*="mfr-stat"], [class*="mfr-index"] {
    animation: none !important;
    transition: none !important;
  }
}
@supports not (background:color-mix(in srgb,red 10%,black)) { .zhihu-card-surface { background: linear-gradient(135deg,#142033,#090f18); } .zhihu-card-surface::after { display:none; } }

/* === v11 优化旋转视觉效果 (用户反馈 2026-08-10) === */

/* 1. 隐藏卡片右下大号 CATEGORY 数字水印 (视觉干扰, 与前景英文大字撞色) */
.zhihu-card-watermark {
  display: none !important;
}

/* 2. is-front 中心卡: 更强立体感 + 浮动偏移 + 边框 cyan glow */
.zhihu-card.is-front {
  filter: none !important;
}
.zhihu-card.is-front .zhihu-card-surface {
  border-color: rgba(0, 202, 224, 0.85) !important;
  border-width: 1.5px !important;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.6),
    0 0 60px rgba(0, 202, 224, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  background:
    linear-gradient(125deg,
      color-mix(in srgb, var(--card-c1) 22%, #142033) 0%,
      #0d1722 50%,
      color-mix(in srgb, var(--card-c1) 18%, #080d15) 100%) !important;
}

/* 3. is-near 周边卡: 略弱化 (从次中心到边缘, 透明度阶梯递减) */
.zhihu-card.is-near .zhihu-card-surface {
  border-color: rgba(255, 255, 255, 0.16) !important;
}

/* 4. 非近卡片 (远端 14 张): 进一步降低饱和度 + 透明度 (突出中心) */
.zhihu-card:not(.is-near):not(.is-front) .zhihu-card-surface {
  opacity: 0.55;
  filter: saturate(0.65);
}

/* 5. stage 视角拉远 (1400px → 1800px) 让 17 张有更广的 3D 空间感 */
.cosmic-stage {
  perspective: 1800px !important;
}

/* 6. 标题/统计数字带 z-index 提至卡片之上, 避免被前景卡片遮挡 */
.mfr-hero {
  position: relative;
  z-index: 50;
}

/* 7. 卡片背景宇宙视频/装饰 overlay 减弱, 让前景 17 卡更突出 */
.mfr-cosmos-overlay {
  opacity: 0.45 !important;
}

/* ============================================================
   2026-08-10 §perf-v20: 文字 3D 浮雕 + data points + mouse 视差 (新技术亮点 #3-5)
   ============================================================ */

/* 文字 3D 浮雕: 标题多层 text-shadow 表现"凹刻"/"立体", focus 时加发光 */
.zhihu-card-title {
  text-shadow:
    0 1px 0 rgba(0,0,0,.4),
    0 2px 4px rgba(0,0,0,.3),
    0 0 8px color-mix(in srgb, var(--card-c1) 0%, transparent);
  transition: text-shadow .3s;
}
.zhihu-card.is-front .zhihu-card-title {
  text-shadow:
    0 1px 0 rgba(0,0,0,.5),
    0 2px 4px rgba(0,0,0,.3),
    0 0 12px color-mix(in srgb, var(--card-c1) 60%, transparent),
    0 0 24px color-mix(in srgb, var(--card-c1) 30%, transparent);
}
.zhihu-card-num {
  /* 0x01 十六进制编号, 加上 letter-spacing 表现"芯片序列号" */
  text-shadow: 0 0 4px color-mix(in srgb, var(--card-c1) 30%, transparent);
}
.zhihu-card.is-front .zhihu-card-num {
  text-shadow: 0 0 8px color-mix(in srgb, var(--card-c1) 80%, transparent);
}

/* 副标题/EN 文字: 微浮雕 (slight emboss, 像字浮在卡片表面) */
.zhihu-card-en, .zhihu-card-tagline {
  text-shadow: 0 1px 0 rgba(255,255,255,.04);
}

/* === 2026-08-10 §perf-v20: 角标 4 个小三角 (四角装饰, 像"瞄准镜"刻度) === */
.zhihu-card-surface > .zhihu-corner-tl,
.zhihu-card-surface > .zhihu-corner-tr,
.zhihu-card-surface > .zhihu-corner-bl,
.zhihu-card-surface > .zhihu-corner-br {
  position: absolute; width: 8px; height: 8px;
  border: 1px solid color-mix(in srgb, var(--card-c1) 60%, white);
  pointer-events: none; opacity: 0.5;
  transition: opacity .3s;
}
.zhihu-card-surface > .zhihu-corner-tl { top: 4px; left: 4px; border-right: 0; border-bottom: 0; }
.zhihu-card-surface > .zhihu-corner-tr { top: 4px; right: 4px; border-left: 0; border-bottom: 0; }
.zhihu-card-surface > .zhihu-corner-bl { bottom: 4px; left: 4px; border-right: 0; border-top: 0; }
.zhihu-card-surface > .zhihu-corner-br { bottom: 4px; right: 4px; border-left: 0; border-top: 0; }
.zhihu-card.is-front .zhihu-card-surface > [class^="zhihu-corner"] { opacity: 1; }

/* === 2026-08-10 §perf-v20: 6 个 data points (围绕卡片边缘的动态点) ===
   JS 根据 focus 状态动态设置 --dp-opacity 和 --dp-scale. 表现"系统启动"光点 */
.zhihu-card-surface > .zhihu-data-points {
  position: absolute; inset: 0; pointer-events: none;
  --dp-opacity: 0; --dp-scale: 0.6;
  opacity: var(--dp-opacity);
  transition: opacity .4s;
  z-index: 2;
}
.zhihu-data-points span {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: var(--card-c1);
  box-shadow: 0 0 6px var(--card-c1), 0 0 12px var(--card-c1);
  animation: dp-pulse 1.6s ease-in-out infinite;
}
.zhihu-data-points span:nth-child(1) { top: -2px;    left: 20%;   animation-delay: 0s; }
.zhihu-data-points span:nth-child(2) { top: 20%;    right: -2px; animation-delay: 0.2s; }
.zhihu-data-points span:nth-child(3) { top: 50%;    right: -3px; animation-delay: 0.4s; }
.zhihu-data-points span:nth-child(4) { bottom: -2px; left: 20%;   animation-delay: 0.6s; }
.zhihu-data-points span:nth-child(5) { top: 50%;    left: -3px;  animation-delay: 0.8s; }
.zhihu-data-points span:nth-child(6) { top: 20%;    left: -2px;  animation-delay: 1.0s; }
@keyframes dp-pulse {
  0%, 100% { transform: scale(0.6); opacity: 0.4; }
  50%      { transform: scale(1.4); opacity: 1; }
}

/* === 2026-08-10 §perf-v20: stage 鼠标视差 (perspective-origin 跟 mouse 联动) === */
.zhihu-stage {
  perspective-origin: 50% 50%;
  transition: perspective-origin .15s linear;
}