/* ==========================================================================
   ARCHÉ · 主页三块展示区（本地预览）
   --------------------------------------------------------------------------
   ① 资讯区   → 挂在 body[data-current_section=mission*]
   ② 水流区   → 挂在 body[data-current_section=vision*]
   ③ 排行榜   → 挂在 body[data-current_section=service*]

   设计上**完全不动模板自己的控制器**：三块都是独立的 fixed 图层，
   靠 body 上那个模板已经在维护的 data-current_section 属性来开关。
   模板的滚动分节、3D 场景、指示器全部照旧工作。
   ========================================================================== */

/* ==========================================================================
   阅读视图字体：香萃打字机体（Xiangcui Dazijiti）
   --------------------------------------------------------------------------
   打字机风格的中文书写体，笔画有机械感、字面方正，比黑体有性格、比楷体克制。
   覆盖 GB2312 常用字 6763 个，实测站点真实资讯文本缺字 0。
   自托管在 /home/fonts/（woff2，6.9 MB，浏览器会缓存）。
   换字体只需改下面这条 @font-face 的 src，和 :root 里 --z-kai 的第一个名字。
   ========================================================================== */
@font-face {
  font-family: "Xiangcui Dazijiti";
  src: url("/home/fonts/XiangcuiDazijitiW35.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;              /* 字体没到就先显示后备字体，不阻塞阅读 */
}

/* 分词断行的原子单位：一个词（中文词 / 英文单词）内部不许断。
   JS 用 Intl.Segmenter 把标题切好词再包上这个类，
   断行点就只会落在词与词之间，不会出现「将 / 于」这种劈词。 */
.nb { white-space: nowrap }

:root {
  --z-normal:   #4EA8FF;                        /* 正常世界 · 冷蓝 */
  --z-dark:     #8B1A4A;                        /* LETHE · 紫红 */
  --z-fg:       #dff2ff;
  --z-dim:      rgba(190, 224, 255, .45);
  --z-faint:    rgba(190, 224, 255, .15);
  --z-line:     rgba(140, 200, 255, .16);
  --z-mono:     "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --z-zh:       "kozuka-gothic-pr6n", "Noto Sans JP", "Hiragino Kaku Gothic ProN",
                "Yu Gothic Medium", "Microsoft YaHei", "PingFang SC", sans-serif;
  /* 多音调希腊文（U+1F00-1FFF，Greek Extended）IBM Plex Mono / Barlow /
     Google Sans Code 都没有；站点自己注册了 Roboto Variable 的 greek-ext 子集，
     放第一个就能用上，无需新增字体文件。

     【2026-10-07】现在页面上已经没有多音调希腊文了 ——
     原来那行居中大标题「ἀποθέωσις / 谥神」在改版时去掉了，
     不过现在也只在 console 和调试状态里用，页面上看不到。
     这条字体声明先留着（无害，哪天要用希腊文还能直接用）；
     真正失效的是它上面的说明，所以在这儿记一笔。 */
  --z-greek:    "Roboto Variable", "Roboto", "Noto Sans JP", "Times New Roman", serif;
  /* 阅读视图的「书写体」——
     楷体这一路：有手写的笔意（起笔收笔、撇捺有锋），但笔画交代得清楚，
     长文连读不累眼。这是中式阅读感里最稳的一档，比行草克制、比黑体有温度。
     优先用站点自托管的霞鹜文楷（LXGW WenKai）；没有就用中文用户机器上
     普遍存在的系统楷体；再退到宋体系。 */
  --z-kai:      "Xiangcui Dazijiti", "香萃打字机体",
                "LXGW WenKai", "Kaiti SC", "STKaiti", "KaiTi", "楷体",
                "Noto Serif SC", "Songti SC", "SimSun", serif;
  /* 列表正文用的界面字体 —— 全部是**系统自带**的，不额外下载任何文件，
     任何设备打开都是零成本、秒出字：
       iOS / macOS → 苹方 PingFang SC
       Windows     → 微软雅黑
       华为        → HarmonyOS Sans SC
       安卓        → Noto Sans CJK SC
     配合 font-weight:700 使用，字面饱满，在浅色底上比默认字重压得住。 */
  --z-ui:       "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei UI", "Microsoft YaHei",
                "Hiragino Sans GB", "Heiti SC", "Source Han Sans SC", "Noto Sans CJK SC",
                system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --z-ease:     cubic-bezier(.22, .61, .36, 1);
}

/* ---------------------------------------------------------------- 图层基础 */
/* 【不全屏】三块都不是全屏覆盖层，而是落在「站点自身 chrome 之外的安全区」里的一块
   嵌入式画面。这几节模板里**没有任何文字元素**——整节就是 3D 场景本身（彩色方块墙
   + 悬浮的 Arché "A"）。所以「页面已有的元素」指的就是站点的骨架，必须留在外面：

     上 92px  —— 顶栏（投票室/公告栏/…）+ 左上 Arché logo
     左 220px —— 左侧竖导航（TOP / MENU / … / 资讯 / 忘川 / 排行）
     右 72px  —— ID·摇晃聊天 / 卡片管理 / 暂停键
     下 78px  —— 区域底栏

   这样 3D 从四周透出来、logo 和导航照常可见，视觉上仍然是「主页里的一段」，
   而不是换了一页。 */
.archeZone {
  position: fixed;
  /* ⚠️ 左右内缩必须**一样**，否则三块内容全都会偏右。
     原来是 inset: 92px clamp(20,3.8vw,72px) 78px clamp(48,11.5vw,220px)
     —— 左边给左侧导航让位留了 220px、右边只留 72px，
     1920 下盒子是 [220, 1848]，中心 1034；而页面中心是 960，**整整偏右 74px**。
     现在两边同值 → 盒子 [220, 1700]，中心 960，和页面中心对齐。
     导航在 x 0~220，仍然不会压到。 */
  inset: 92px clamp(48px, 11.5vw, 220px) 78px;
  border-radius: 3px;
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .55s var(--z-ease), visibility .55s;
  font-family: var(--z-zh);
  color: var(--z-fg);
  -webkit-font-smoothing: antialiased;
}
.archeZone.is-on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* 三块各自的开关 —— 用模板已经在维护的那个属性，不自己算分节。

   ⚠️ 这里是**独立于 JS 那套 is-on 的兜底开关**：JS 没跑起来时也要能亮。
   所以它是一份单独的分节名单，改版块落位时**必须和 arche-zones.js 的
   FRAME.<zone>.trig 一起改** —— 只改一边的话，没被改到的那块会一直在旧位置亮着
   （2026-10-07 忘川搬到 72% 就差点漏掉这里：wave 还挂在 vision 上，
   等于 52% 和 72% 两处都会冒出来）。

   当前落位：资讯 mission · 忘川 service_0(72%) · 排行 service_1+stellla */
body[data-current_section="mission_in"] .archeZone--feed,
body[data-current_section="mission"]     .archeZone--feed,
body[data-current_section="service_0"]   .archeZone--wave,
body[data-current_section="service_1"]   .archeZone--rank,
body[data-current_section="stellla"]     .archeZone--rank {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* 共用：发丝线渐变 */
.archeZone .hr {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--z-line) 18%, var(--z-line) 82%, transparent);
}

/* ---------------------------------------------------------------- 遮罩
   模板的 3D 场景在每个分节亮度不一样（mission 那一段会亮到发白），
   浅色文字直接糊。所以两块「文字型」区域各自压一层底：
     · 资讯区  —— 压重一点（那块 3D 最亮），保证任何分节下都能读
     · 排行榜  —— 只压很轻一层，保住 3D 网格透出来的质感
   水流区不加：它自己就是全屏画面。 */
.archeZone--feed::before,
.archeZone--rank::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
/* 资讯区不再全屏压暗 —— 改成浮在页面上的面板，3D 背景从四周透出来 */
.archeZone--feed::before { content: none }
/* 排行榜现在也是空框（SHELL.rank），先不压暗 —— 要看清底下的原生背景。
   等往里填内容了再把下面这行的 content:none 去掉。 */
.archeZone--rank::before { content: none }
.archeZone--rank::before {
  background: rgba(0, 0, 0, .30);
}

/* ==========================================================================
   ① 资讯区
   ========================================================================== */
.archeZone--feed {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 上下留出区域顶栏/底栏的位置 */
  padding: 54px clamp(0px, 1.4vw, 24px) 46px;

  /* ---------------------------------------------------------------
     【跟着白底一起升】
     白底是 WebGL 画布里的 3D 场景（在 DOM 之下），没法真把内容放进去，
     所以用模板自己那把尺子做逐像素对齐：
       JS 每帧读 [data-mission-container] 上的 --mask-height
       （模板 MissionController 写的 progress*100-1.5），先还原成 progress，
       再按本区域自己的 rect 换算成「区域内部」的百分比 → --feed-rise。
     换算这一步不能省：白底是在整视口里升，而这个盒子内缩了 92/78，
     直接拿 progress 当百分比的话两条边斜率不同，会明显脱钩。
     渐变形状对齐模板的 MASK_FADE（视口高的 3%，≈32px）。
     --------------------------------------------------------------- */
  --feed-rise: 0%;
  -webkit-mask-image: linear-gradient(to top,
      #000 var(--feed-rise),
      transparent calc(var(--feed-rise) + 34px));
          mask-image: linear-gradient(to top,
      #000 var(--feed-rise),
      transparent calc(var(--feed-rise) + 34px));
}
.feed-wrap {
  width: min(1240px, 100%);
  max-height: 84vh;
  display: grid;
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 68px);
  align-items: start;
  /* 面板化：自带底、边框、投影 —— 不再靠全屏遮罩压暗 */
  padding: clamp(26px, 3.6vh, 46px) clamp(28px, 3.2vw, 52px);
  background: linear-gradient(180deg, rgba(6, 14, 26, .88), rgba(4, 10, 20, .80));
  border: 1px solid var(--z-line);
  border-radius: 3px;
  backdrop-filter: blur(11px) saturate(.9);
  -webkit-backdrop-filter: blur(11px) saturate(.9);
  box-shadow: 0 34px 100px -34px rgba(0, 0, 0, .95);
}

/* 左栏：标题 + 爻位 */
.feed-head { display: flex; flex-direction: column; gap: 26px; }

.feed-title .zh {
  font-size: clamp(28px, 3.4vw, 46px);
  letter-spacing: .2em;
  margin-left: .2em;
  line-height: 1.15;
  background: linear-gradient(180deg, #fff 10%, rgba(78, 168, 255, .7) 98%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.feed-title .en {
  margin-top: 9px;
  font-family: var(--z-mono);
  font-size: 10px;
  letter-spacing: .38em;
  color: var(--z-dim);
  text-transform: uppercase;
}

/* 爻位 */
.awake {
  border: 1px solid var(--z-line);
  border-radius: 3px;
  padding: 18px 20px 16px;
  background: linear-gradient(180deg, rgba(139, 26, 74, .10), rgba(6, 14, 26, .5));
}
.awake-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.awake-name {
  font-family: var(--z-mono);
  font-size: 10px;
  letter-spacing: .3em;
  color: var(--z-dim);
  text-transform: uppercase;
}
.awake-delta {
  font-family: var(--z-mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  color: #7fe3ff;
  font-variant-numeric: tabular-nums;
}
.awake-delta.is-down { color: #58d68d; }

.awake-num {
  margin-top: 8px;
  font-family: var(--z-mono);
  font-size: clamp(44px, 5.1vw, 70px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  color: #ff5f7a;
  text-shadow: 0 0 34px rgba(255, 60, 100, .45);
}
.awake-num small { font-size: .38em; opacity: .6; margin-left: 4px; }

.awake-bar {
  position: relative;
  height: 3px;
  margin: 14px 0 12px;
  background: rgba(140, 200, 255, .12);
  border-radius: 2px;
  overflow: hidden;
}
.awake-bar i {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: linear-gradient(90deg, var(--z-normal), var(--z-dark) 62%, #ff2e5b);
  box-shadow: 0 0 14px rgba(255, 46, 91, .8);
  transition: width .9s var(--z-ease);
}
.awake-quote {
  font-size: 12.5px;
  line-height: 1.7;
  letter-spacing: .06em;
  color: rgba(223, 242, 255, .62);
}

/* 右栏：资讯流 */
.feed-list { display: flex; flex-direction: column; min-height: 0; }
.feed-list-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-bottom: 11px; border-bottom: 1px solid var(--z-line);
  font-family: var(--z-mono); font-size: 9.5px;
  letter-spacing: .3em; color: var(--z-dim); text-transform: uppercase;
}
.feed-live { display: inline-flex; align-items: center; gap: 7px; }
.feed-live::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: #ff2e5b; box-shadow: 0 0 10px rgba(255, 46, 91, .95);
  animation: feedBlink 2.2s ease-in-out infinite;
}
@keyframes feedBlink { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }

.feed-items {
  list-style: none;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(140, 200, 255, .22) transparent;
  padding-right: 6px;
  max-height: min(64vh, 628px);
  /* 底部渐隐：让列表看起来是「无尽」的，而不是被截断 */
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 46px), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 46px), transparent 100%);
}
.feed-items::-webkit-scrollbar { width: 4px }
.feed-items::-webkit-scrollbar-thumb { background: rgba(140, 200, 255, .22); border-radius: 2px }

.feed-item {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: baseline;
  padding: 11px 4px 11px 0;
  border-bottom: 1px solid var(--z-faint);
  transition: background .22s ease;
}
.feed-item:hover { background: rgba(78, 168, 255, .05); }
.feed-item:last-child { border-bottom: 0 }

.feed-time {
  font-family: var(--z-mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  color: var(--z-dim);
  font-variant-numeric: tabular-nums;
}
.feed-body { min-width: 0 }
.feed-src {
  font-family: var(--z-mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  color: var(--z-normal);
  text-transform: uppercase;
  opacity: .8;
}
.feed-text {
  margin-top: 5px;
  font-size: 13.5px;
  line-height: 1.55;
  letter-spacing: .04em;
  color: rgba(223, 242, 255, .86);
}
.feed-delta {
  font-family: var(--z-mono);
  font-size: 12px;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  color: #ff5f7a;
  white-space: nowrap;
}
.feed-delta.is-down { color: #58d68d; }

/* ==========================================================================
   ② 水流区
   ========================================================================== */
/* 这一区**不能** overflow:hidden —— 表头要挪到区域盒子上面去（见下面
   .archeZone--wave .archeZone__head），裁掉就看不见了。
   画布本身是 inset:0 正好铺满盒子，不靠 overflow 裁；四周的淡出是着色器做的。 */
.archeZone--wave { overflow: visible; }
.wave-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block }

/* --------------------------------------------------------------------------
   忘川区（72% · service_0 那一段）
   --------------------------------------------------------------------------
   那一段模板自己的画面是一条**近乎全黑的网格隧道**（品牌 credit reel），
   没有主体物件。所以画布就是这一区的主体：一条界河从下往上漫，
   交界处一道发光的「忘川线」。画布不完全不透明 —— 网格始终透得出来，
   这样它才是**长在隧道里**，而不是贴在上面的一张图。

   文字一律靠右竖排，中间不放大字：
   一是别和那条交界线抢，二是右侧是画面里唯一的空档。
   -------------------------------------------------------------------------- */
.wave-overlay {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 2;
}

/* 右侧竖排字标：落在 A 右边的空档里（盒子内 x ≈ 76%~100%）。
   不占满整条带 —— 只在离右边框一点点的位置竖着排一行。 */
.wave-mark {
  position: absolute;
  top: 50%;
  right: clamp(6px, 3.2%, 52px);
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 1.8vh, 22px);
}
.wave-mark__rule {
  width: 1px;
  height: clamp(34px, 8vh, 88px);
  background: linear-gradient(180deg,
    transparent,
    var(--z-normal) 22%,
    #ff8fa6 62%,
    transparent);
  opacity: .85;
}
/* 竖排中文主字 —— 这块唯一的「大件」，其余全是小字 */
.wave-mark__zh {
  writing-mode: vertical-rl;
  font-family: var(--z-zh);
  font-size: clamp(30px, 3.1vw, 56px);
  font-weight: 300;
  letter-spacing: .34em;
  line-height: 1;
  color: #f2f9ff;
  text-shadow:
    0 0 26px rgba(255, 95, 143, .70),
    0 0 64px rgba(78, 168, 255, .42),
    0 0 120px rgba(139, 26, 74, .55);
}
.wave-mark__latin,
.wave-mark__sub {
  writing-mode: vertical-rl;
  font-family: var(--z-mono);
  text-transform: uppercase;
}
.wave-mark__latin {
  font-size: 10px;
  letter-spacing: .46em;
  color: rgba(190, 224, 255, .58);
}
.wave-mark__sub {
  font-family: var(--z-zh);
  font-size: 10.5px;
  letter-spacing: .30em;
  color: rgba(190, 224, 255, .38);
}

/* 收一层极淡的外圈暗角：把视线从黑色的隧道边角收回到中间那条交界线上，
   顺便让这一区和上下分节的黑更接得住。 */
.archeZone--wave::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;                     /* 在画布之上、字标之下 */
  pointer-events: none;
  background: radial-gradient(72% 78% at 50% 50%,
    rgba(0, 0, 0, 0) 55%,
    rgba(0, 4, 12, .40) 100%);
}

/* --------------------------------------------------------------------------
   忘川 · 军团（粒子球）
   --------------------------------------------------------------------------
   · .waveLegion 是一层容器：里面一块**独立画布**画粒子，外加一层 DOM 放番号。
     画布尺寸和坐标必须和 wave 那块**完全一致**（inset:0、同样的 dpr）——
     粒子着色器要拿自己的 gl_FragCoord/uRes 复算交界线，uv 差一点，
     粒子就会在错误的线上消失。
   · 层级：暗角 z-index 1，字标在 .wave-overlay（z-index 2）。
     这里也给 2 且**排在 .wave-overlay 之前** —— 同层按 DOM 顺序压，
     粒子就落在暗角之上、竖排「忘川」二字之下。
   · 粒子的形状、颜色、闪灭、散开全在 JS + 着色器里，CSS 只管盒子。
   -------------------------------------------------------------------------- */
.waveLegion {
  position: absolute; inset: 0;
  z-index: 2;
  overflow: hidden;          /* 粒子贴着盒子边缘时裁掉，别溢出到隧道外 */
  pointer-events: none;
}
.waveDust { position: absolute; inset: 0; width: 100%; height: 100%; display: block }

/* 番号小字。left / top / opacity 由 JS 每帧写，所以这里**不能**拿 transform
   去做定位 —— 它要留给 is-flip 的水平翻转。 */
.lgTag {
  position: absolute;
  transform: translateY(-50%);
  margin-left: 14px;
  white-space: nowrap;
  font-family: var(--z-mono);
  font-style: normal;
  font-size: 10px;
  line-height: 1;
  letter-spacing: .16em;
  color: rgba(255,222,236,.95);
  animation: lgTag .34s steps(1, end) infinite;
}
/* 球落在盒子右半边时番号改往左排，长名字（Convolution Legion）才不会被裁掉 */
.lgTag.is-flip { transform: translate(-100%, -50%); margin-left: -14px }

/* 文字自身的故障：红青分离的色差在跳，和粒子的 RGB 分离对得上 */
@keyframes lgTag {
  0%   { text-shadow: -1px 0 rgba(0,220,255,.80),  1px 0 rgba(255,40,90,.80), 0 0 12px rgba(255,60,110,.90); }
  33%  { text-shadow:  1px 0 rgba(0,220,255,.80), -1px 0 rgba(255,40,90,.80), 0 0 12px rgba(255,60,110,.90); }
  66%  { text-shadow:  0 1px rgba(0,220,255,.65),  0 -1px rgba(255,40,90,.65), 0 0 12px rgba(255,60,110,.90); }
  100% { text-shadow: -1px 0 rgba(0,220,255,.80),  1px 0 rgba(255,40,90,.80), 0 0 12px rgba(255,60,110,.90); }
}

/* 窄屏盒子变窄，番号缩一点别糊成一片 */
@media (max-width: 900px) {
  .lgTag { font-size: 8px; letter-spacing: .10em; margin-left: 11px }
  .lgTag.is-flip { margin-left: -11px }
}
/* ==========================================================================
   ③ 排行榜
   ========================================================================== */
.archeZone--rank {
  --r-accent: #7fe3ff;      /* charts.html 的主色（青） */
  --r-lime:   #c9ff4a;      /* Top1 */
  --r-gold:   #ffd76a;      /* Top3 */
  /* ⚠️ 必须 flex-start，不能 center。
     居中的话，切换榜单时整块高度一变（10 行的榜 ↔ 6 行的榜），
     居中会把它上下重新摆一次 —— 表现就是「顶部自己会动」。
     钉死顶部，行数少了只是下面短一截，顶部一动不动。 */
  display: flex; align-items: flex-start; justify-content: center;
  padding: 0;
}
/* 不做成一块板子 —— 文字直接落在页面上，和场景融在一起。
   原来那层 rgba(6,14,26,.62) + blur 的底板去掉了：落点在 92%，
   背后本来就是模板那条干净的黑隧道 + 网格，隔一层板反而像贴上去的。

   左右留 46px 是为了和区域表头 / 底栏的 left:46px 对齐，三行一条竖线。 */
.rank-wrap {
  width: 100%;
  max-height: 100%;
  display: flex; flex-direction: column; gap: 12px;
  /* 顶部定位：按现在 10 行的榜居中时落在区域盒内 110px 处，
     把那个位置直接写成固定值，所有榜都从这儿开始往下排。
     左右 46px 和区域表头 / 底栏的 left:46px 对齐。 */
  /* 顶部 gap 减掉多少，下方就补多少 —— 总高不变，内容整体上移 */
  padding: clamp(24px, 5vh, 55px) 46px clamp(24px, 5vh, 55px);
}
.rank-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap }
.rank-title .zh {
  font-size: clamp(22px, 2.6vw, 34px); letter-spacing: .2em; margin-left: .2em;
  color: #fff; line-height: 1.1;
}
.rank-title .en {
  margin-top: 7px; font-family: var(--z-mono); font-size: 9.5px;
  letter-spacing: .34em; color: var(--z-dim); text-transform: uppercase;
}
.rank-games { display: flex; gap: 2px; flex-wrap: wrap }
.rank-game {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 14px 9px; border: 1px solid transparent; border-radius: 2px;
  background: transparent; color: var(--z-dim); cursor: pointer;
  font-family: var(--z-zh); font-size: 12px; letter-spacing: .1em;
  transition: color .22s, background .22s, border-color .22s, box-shadow .22s;
}
/* 序号那行小字（01 02 03…）。选中时转成柠檬绿，和 charts.html 一致 */
.rank-game .n {
  font-family: var(--z-mono); font-size: 9px; letter-spacing: .28em;
  opacity: .55; line-height: 1;
}
.rank-game:hover { color: var(--z-fg); background: rgba(127, 227, 255, .06) }
.rank-game.is-on {
  color: var(--r-accent); border-color: rgba(127, 227, 255, .34);
  background: linear-gradient(180deg, rgba(127, 227, 255, .14), rgba(127, 227, 255, .03));
  box-shadow: 0 0 28px -10px rgba(127, 227, 255, .8), inset 0 1px 0 rgba(255, 255, 255, .1);
}
.rank-game.is-on .n { opacity: 1; color: var(--r-lime) }
.rank-tabs { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--z-line) }
.rank-tab {
  position: relative; padding: 9px 16px 11px; border: 0; background: transparent;
  color: var(--z-dim); cursor: pointer; font-family: var(--z-zh);
  font-size: 12.5px; letter-spacing: .12em; transition: color .22s;
}
.rank-tab::after {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: -1px; height: 1px;
  background: var(--r-accent); box-shadow: 0 0 12px rgba(127, 227, 255, .95);
  transition: left .32s var(--z-ease), right .32s var(--z-ease);
}
.rank-tab:hover { color: var(--z-fg) }
.rank-tab:hover::after { left: 12%; right: 12% }
.rank-tab.is-on { color: #fff; text-shadow: 0 0 18px rgba(127, 227, 255, .7) }
.rank-tab.is-on::after { left: 0; right: 0 }

/* 行列表本身不再套盒子 —— 底板已经由 .rank-wrap 提供了，
   再套一层就是「板中板」，反而糊。只留每行之间的发丝线。 */
.rank-rows {
  list-style: none; min-height: 0; margin: 0; padding: 0;
  /* 不撑满：板子高度跟着行数走（6 行的榜和 10 行的榜各自好看） */
  flex: 0 1 auto;
  /* 禁止滚动条。一屏固定就摆这么多行（数据源本来就是每榜 10 行），
     真溢出也不给拉条 —— 拉了会在这块纯文字上多出一根很扎眼的竖线。 */
  overflow: hidden;
}
.rank-rows::-webkit-scrollbar { width: 4px }
.rank-rows::-webkit-scrollbar-thumb { background: rgba(140, 200, 255, .22); border-radius: 2px }
.rank-row {
  position: relative; display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 14px; align-items: center;
  padding: 13px 4px; border-bottom: 1px solid rgba(140, 200, 255, .09);
  transition: background .2s;
  opacity: 0; transform: translateY(8px);
}
.rank-rows.go > .rank-row { animation: rankIn .45s var(--z-ease) forwards }
@keyframes rankIn { to { opacity: 1; transform: none } }
.rank-row:last-child { border-bottom: 0 }
.rank-row:hover { background: rgba(127, 227, 255, .07) }
.rank-row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: transparent; transition: background .2s, box-shadow .2s;
}
.rank-row:hover::before { background: var(--r-accent); box-shadow: 0 0 16px rgba(127, 227, 255, .85) }

.rank-no {
  font-family: var(--z-mono); font-size: 19px; font-weight: 600;
  color: var(--z-faint); line-height: 1;
}
.rank-row--1 .rank-no { color: var(--r-lime); text-shadow: 0 0 26px rgba(201, 255, 74, .85); font-size: 23px }
.rank-row--2 .rank-no { color: var(--r-accent); text-shadow: 0 0 22px rgba(127, 227, 255, .7); font-size: 21px }
.rank-row--3 .rank-no { color: var(--r-gold); text-shadow: 0 0 22px rgba(255, 215, 106, .6); font-size: 20px }

.rank-nm { min-width: 0; display: flex; flex-direction: column; gap: 4px }
.rank-nm b {
  font-size: 14px; font-weight: 400; letter-spacing: .1em; color: var(--z-fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .9);
}
.rank-row--1 .rank-nm b { color: var(--r-lime); text-shadow: 0 0 18px rgba(201, 255, 74, .45) }
.rank-nm .bar { height: 2px; background: rgba(140, 200, 255, .1); border-radius: 2px; overflow: hidden }
.rank-nm .bar i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, rgba(127, 227, 255, .5), var(--r-accent));
  box-shadow: 0 0 8px rgba(127, 227, 255, .7);
  transition: width .8s var(--z-ease);
}
.rank-row--1 .rank-nm .bar i {
  background: linear-gradient(90deg, rgba(201, 255, 74, .5), var(--r-lime));
  box-shadow: 0 0 10px rgba(201, 255, 74, .85);
}
.rank-sc {
  font-family: var(--z-mono); font-size: 16px; font-weight: 600;
  color: var(--r-accent); letter-spacing: .04em; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.rank-row--1 .rank-sc { color: var(--r-lime); font-size: 19px; text-shadow: 0 0 20px rgba(201, 255, 74, .55) }
.rank-meta {
  font-family: var(--z-mono); font-size: 10.5px; letter-spacing: .1em;
  color: var(--z-dim); border: 1px solid var(--z-line); border-radius: 2px;
  padding: 4px 9px; white-space: nowrap;
  max-width: 260px; overflow: hidden; text-overflow: ellipsis;
}

.rank-empty {
  display: grid; place-items: center; gap: 10px;
  padding: 54px 20px; border: 1px solid var(--z-line); border-radius: 3px;
  background: rgba(6, 14, 26, .45); text-align: center;
}
.rank-empty b { font-weight: 400; font-size: 13px; letter-spacing: .22em; color: var(--z-dim) }
.rank-empty small {
  font-family: var(--z-mono); font-size: 9.5px; letter-spacing: .3em;
  color: rgba(190, 224, 255, .26); text-transform: uppercase;
}

/* ---------------------------------------------------------------- 小屏兜底 */
@media (max-width: 900px) {
  /* 资讯区在窄屏同样走「铺满、不滚动」那套（见文件末尾的覆盖块）——
     这里不再另立 grid / overflow-y，否则窄屏又冒出一条滚动条。 */
  .archeZone--feed, .archeZone--rank { padding-top: 4vh }
  .rank-wrap { max-height: 100% }
  .rank-head { flex-direction: column; align-items: flex-start; gap: 12px }
}

@media (prefers-reduced-motion: reduce) {
  .archeZone *, .archeZone *::before, .archeZone *::after {
    animation-duration: .01ms !important; transition-duration: .01ms !important;
  }
}

/* ==========================================================================
   区域框架 —— 让三块各自有「边界」，一眼能看出换区了
   ========================================================================== */
.archeZone__corners { position: absolute; inset: 0; pointer-events: none; z-index: 2 }
.archeZone__corners i {
  position: absolute; width: 20px; height: 20px;
  border: 0 solid rgba(140, 200, 255, .5);
}
.archeZone__corners i:nth-child(1) { top: 62px; left: 24px;  border-top-width: 1px; border-left-width: 1px }
.archeZone__corners i:nth-child(2) { top: 62px; right: 24px; border-top-width: 1px; border-right-width: 1px }
.archeZone__corners i:nth-child(3) { bottom: 24px; left: 24px;  border-bottom-width: 1px; border-left-width: 1px }
.archeZone__corners i:nth-child(4) { bottom: 24px; right: 24px; border-bottom-width: 1px; border-right-width: 1px }

/* 顶栏 */
.archeZone__head {
  position: absolute; left: 46px; right: 46px; top: 72px; z-index: 3;
  display: flex; align-items: center; gap: 16px;
  pointer-events: none;
  font-family: var(--z-mono);
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--z-dim);
}
.archeZone__head .n {
  font-size: 12px; font-weight: 600; letter-spacing: .1em;
  color: var(--z-normal); text-shadow: 0 0 16px rgba(78, 168, 255, .7);
}
.archeZone__head .zh {
  font-family: var(--z-zh); font-size: 13px; letter-spacing: .3em;
  color: var(--z-fg); text-transform: none;
}
.archeZone__head .en { color: var(--z-dim) }
.archeZone__head .rule {
  flex: 1; height: 1px; min-width: 40px;
  background: linear-gradient(90deg, var(--z-line), transparent 92%);
}
.archeZone__head .st { color: rgba(190, 224, 255, .32) }

/* 底栏 */
.archeZone__foot {
  position: absolute; left: 46px; right: 46px; bottom: 34px; z-index: 3;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  pointer-events: none;
  font-family: var(--z-mono);
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(190, 224, 255, .38);
}
.archeZone__foot .side { display: flex; flex-direction: column; gap: 6px }
.archeZone__foot .side--r { align-items: flex-end; text-align: right }
.archeZone__foot .side b {
  font-weight: 500; font-size: 11px; letter-spacing: .3em;
}
.archeZone__foot .side--l b { color: var(--z-normal) }
.archeZone__foot .side--r b { color: #ff5f7a; text-shadow: 0 0 14px rgba(255, 46, 91, .6) }
.archeZone__foot .side small {
  font-family: var(--z-zh); font-size: 11px; letter-spacing: .18em;
  color: rgba(223, 242, 255, .42); text-transform: none;
}

/* 水流区：底栏直接压在画面上，加一点底衬保证可读 */
.archeZone--wave .archeZone__head,
.archeZone--wave .archeZone__foot { text-shadow: 0 1px 10px rgba(0, 0, 0, .9) }

/* 表头（「04 忘川 APOTHEOSIS …… 爻位 62.5」）**挪到区域盒子之上**。
   两边都做成浪之后，压在浪上的字会被搅得看不清；
   而且顶端那条本来就是在说「这是第几站」，本来就该挂在区域外面。

   区域盒子上沿在视口 y = 92px（.archeZone 的 inset），
   这里 top:-38px → 落到 y ≈ 54px，正好卡在站点顶栏和区域之间那条空档里。
   overflow:visible 见上面 .archeZone--wave 那条。 */
.archeZone--wave .archeZone__head {
  top: -38px;
}

/* 排行榜表头同样挪到区域之上 —— 两边一致，而且板子铺满之后
   表头压在上面会把游戏标签挤下去。

   收成一块窄牌（不再左右拉满）：这一区的正上方恰好压着模板 stellla
   那条横贯全屏的发丝框线，表头拉满的话字和线正好糊在一起。
   做成一块带底的窄牌，线在牌后面断开，两边都干净。
   中间的 .rule 是条伸缩的填充线，收窄之后没有意义，关掉。 */
.archeZone--rank .archeZone__head {
  top: -38px;
  left: 42px; right: auto;
  width: max-content; max-width: calc(100% - 84px);
  padding: 4px 13px 5px;
  border: 1px solid var(--z-line);
  border-radius: 3px;
  background: rgba(4, 10, 20, .84);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.archeZone--rank .archeZone__head .rule { display: none }
.archeZone--rank .archeZone__head .st { margin-left: 4px }
.archeZone--wave .archeZone__foot .side--r b { color: #ff8fa6 }

/* 水流区原来的上下标签行，现在由框架接管 */
.wave-top { display: none }

/* 排行榜 / 资讯：底栏与内容可能重叠，往下压一点内容 */
.archeZone--rank .rank-wrap,
.archeZone--feed .feed-wrap { padding-bottom: 30px }


/* ==========================================================================
   【临时 · 线框】只为核对三块的位置
   确认位置对了之后，把 arche-zones.js 顶部的 WIRE 改成 false，
   或者直接删掉本节 + 那个 if (WIRE) 分支。
     资讯 feed → 青     水流 wave → 品红     排行榜 rank → 金
   ========================================================================== */
.archeZone--feed { --zc: #7fe3ff }
.archeZone--wave { --zc: #ff5f8f }
.archeZone--rank { --zc: #ffd76a }

.archeZone--wire::after {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid var(--zc, #7fe3ff);
  box-shadow: 0 0 44px -14px var(--zc, #7fe3ff), inset 0 0 70px -46px var(--zc, #7fe3ff);
  pointer-events: none;
  z-index: 5;
}

/* 标签贴在底边正中 —— 顶部被站点菜单栏和 logo 占着，底部最干净 */
.archeZone__wire {
  position: absolute;
  left: 50%; bottom: 16px;
  transform: translate(-50%, 50%);
  z-index: 6;
  display: flex; align-items: baseline; gap: 10px;
  padding: 6px 18px 7px;
  background: #06090f;
  border: 1px solid var(--zc, #7fe3ff);
  color: var(--zc, #7fe3ff);
  font-family: var(--z-mono);
  font-size: 12px; font-weight: 600; letter-spacing: .12em;
  white-space: nowrap;
  pointer-events: none;
}
.archeZone__wire b { font-size: 14px }
.archeZone__wire em {
  font-style: normal; font-weight: 400; font-size: 10.5px;
  letter-spacing: .08em; opacity: .5;
}

/* ==========================================================================
   滚动位置读数（从原版备份那页移植过来）
   右下角固定：大号数字 + /总数 + 部分名 + 进度条 + 百分比
   mix-blend-mode: difference 保证在任何底色上都能读
   ========================================================================== */
.archePos {
  position: fixed;
  right: 26px;
  /* 三块区域的底栏（NORMAL WORLD / AWAKENING 那一行）就压在视口下沿，
     读数得抬到底栏上面去，不然会跟 AWAKENING 叠在一起 */
  bottom: 136px;
  z-index: 72;
  display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
  font-family: var(--z-mono);
  color: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
  user-select: none;
  opacity: 0; transform: translateY(6px);
  transition: opacity .5s var(--z-ease), transform .5s var(--z-ease);
}
.archePos.is-on { opacity: 1; transform: translateY(0) }

.archePos__row { display: flex; align-items: baseline; gap: 7px; line-height: 1 }
.archePos__num {
  font-size: 44px; font-weight: 500; letter-spacing: .01em;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}
.archePos__tot { font-size: 12px; letter-spacing: .14em; opacity: .5 }
.archePos__lab {
  font-family: var(--z-zh);
  font-size: 12px; letter-spacing: .34em; opacity: .68;
}
.archePos__track {
  width: 124px; height: 1px; margin-top: 5px; position: relative; overflow: hidden;
  background: rgba(255, 255, 255, .22);
}
.archePos__track i {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: #fff; transition: width .22s ease;
}
.archePos__pct {
  font-size: 9px; letter-spacing: .22em; opacity: .42;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 900px) { .archePos { right: 14px; bottom: 16px } }

/* ==========================================================================
   ① 资讯区 —— 【白底上的墨】
   --------------------------------------------------------------------------
   这一节底下不是深色 3D，是模板自己的「mission 白底」：
   纯白 + 细网格 + 十字准星 + 一个白色描边的 Arché 三角。
   之前资讯是一块深色面板浮在上面 —— 一眼就是「外挂的一块」。

   这里改成：**不要面板，直接当墨印在白底上**。
     · 去掉底色 / 边框 / 投影 / 模糊
     · 文字换成近黑的墨色，分隔线换成极淡的墨线
     · 强调色压深（原来的浅青 #4EA8FF 在白的上完全读不出来）
   只覆盖 .archeZone--feed 这一支的 token，另外两块不受影响。
   ========================================================================== */
.archeZone--feed {
  --z-fg:    #0d1a2b;
  --z-dim:   rgba(13, 26, 43, .46);
  --z-faint: rgba(13, 26, 43, .10);
  --z-line:  rgba(13, 26, 43, .14);
  --z-normal: #0e6ea8;          /* 浅青在白底上读不出来，压深 */
  --z-ink-alarm: #c81e46;       /* 爻位 / 上升的分数 */
  --z-ink-good:  #1c7a52;       /* 人类反制，分数下降 */

  /* 下沿留给底栏：列表铺满之后会一路顶到底栏文字底下 */
  padding-bottom: 72px;
}

/* 面板 → 直接消失，让白底和网格透上来 */
.archeZone--feed .feed-wrap {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}

/* 标题：墨色渐隐，不用面板托底也能立住 */
.archeZone--feed .feed-title .zh {
  background: linear-gradient(180deg, #0d1a2b 6%, rgba(13, 26, 43, .58) 98%);
  -webkit-background-clip: text; background-clip: text;
}

/* 爻位：从「带底色的盒子」改成「白纸上的一只仪表」——
   只留一条上发丝线，不封边 */
.archeZone--feed .awake {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--z-line);
}
.archeZone--feed .awake-num {
  color: var(--z-ink-alarm);
  text-shadow: none;                    /* 白底上不需要辉光 */
}
.archeZone--feed .awake-delta { color: var(--z-ink-alarm) }
.archeZone--feed .awake-delta.is-down { color: var(--z-ink-good) }
.archeZone--feed .awake-bar { background: rgba(13, 26, 43, .10) }
.archeZone--feed .awake-bar i { box-shadow: none }
.archeZone--feed .awake-quote { color: rgba(13, 26, 43, .55) }

/* 资讯流 */
.archeZone--feed .feed-live::before { background: var(--z-ink-alarm); box-shadow: none }
.archeZone--feed .feed-item:hover { background: rgba(13, 26, 43, .045) }
.archeZone--feed .feed-text { color: rgba(13, 26, 43, .86) }
.archeZone--feed .feed-delta { color: var(--z-ink-alarm) }
.archeZone--feed .feed-delta.is-down { color: var(--z-ink-good) }
.archeZone--feed .feed-items { scrollbar-color: rgba(13, 26, 43, .20) transparent }
.archeZone--feed .feed-items::-webkit-scrollbar-thumb { background: rgba(13, 26, 43, .20) }

/* 区域框架：四角括线 + 顶栏底栏也一起换成墨色 */
.archeZone--feed .archeZone__corners i { border-color: rgba(13, 26, 43, .26) }
.archeZone--feed .archeZone__head .n { color: var(--z-ink-alarm); text-shadow: none }
.archeZone--feed .archeZone__head .zh { color: var(--z-fg) }
.archeZone--feed .archeZone__head .en,
.archeZone--feed .archeZone__head .st { color: rgba(13, 26, 43, .38) }
.archeZone--feed .archeZone__head .rule {
  background: linear-gradient(90deg, var(--z-line), transparent 92%);
}
.archeZone--feed .archeZone__foot { color: rgba(13, 26, 43, .40) }
.archeZone--feed .archeZone__foot .side--l b { color: var(--z-normal) }
.archeZone--feed .archeZone__foot .side--r b {
  color: var(--z-ink-alarm); text-shadow: none;
}
.archeZone--feed .archeZone__foot .side small { color: rgba(13, 26, 43, .45) }

/* ==========================================================================
   ① 资讯区 · 【正好铺满窗口，不滚动】
   --------------------------------------------------------------------------
   列表不再是「固定条数 + 溢出滚动」，而是反过来：
     条数由窗口高度决定 —— 先渲染，量出可用高度，除以一行最小高度得到能放几条，
     多余的删掉；剩下的行 flex:1 均分高度，所以无论剩几条都正好铺满。
   这样既不会出现滚动条，也不会留下半行。
   ========================================================================== */
.archeZone--feed { align-items: stretch }          /* 让白底窗口整体撑满，不再居中留白 */
.archeZone--feed .feed-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  max-height: none;
  /* 必须重置基础规则里的 align-items:start —— 列方向的 flex 容器里它会让
     子元素横向「收缩到内容宽度」，列表就只占一小条贴在左边。 */
  align-items: stretch;
  /* 基础规则那套「左栏 + 右栏」的网格已废弃，清掉免得再被浏览器算进宽度 */
  grid-template-columns: none;
  /* 面板化外观（底/边框/磨砂/投影）也不要了：内容直接印在白底上 */
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.archeZone--feed .feed-list {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.archeZone--feed .feed-items {
  flex: 1;
  min-height: 0;
  max-height: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;                 /* ← 不要滚动条 */
  padding-right: 0;
  -webkit-mask-image: none;         /* 都不滚了，底部渐隐也不需要 */
          mask-image: none;
}
.archeZone--feed .feed-item {
  flex: 1 1 0;
  min-height: 0;
  align-items: center;              /* 行变高了，内容垂直居中 */
  padding: 0 4px 0 0;
  cursor: pointer;
  outline: none;
  transition: background .2s ease, box-shadow .2s ease;
}
.archeZone--feed .feed-item:hover { background: rgba(13, 26, 43, .045) }
/* 列表正文：换成系统界面字体 + 加粗。
   原来继承的是 --z-zh（日文优先的 gothic 栈，字重 400），在浅色底上偏轻、字面也散；
   换成中文字体优先的 --z-ui 并加粗后，整行读起来更实、更像一串标题。 */
.archeZone--feed .feed-text {
  font-family: var(--z-ui);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .02em;
}
.archeZone--feed .feed-src {
  font-weight: 700;
  opacity: .95;
}
.archeZone--feed .feed-item:focus-visible {
  background: rgba(13, 26, 43, .05);
  box-shadow: inset 2px 0 0 var(--z-ink-alarm);
}

/* ==========================================================================
   ① 资讯区 · 【阅读视图】点开一条就整块铺满
   --------------------------------------------------------------------------
   列表和阅读是同一个 .feed-wrap 里的两个互斥视图，所以切换时**位置不动**，
   不存在「从列表里挤出来一行」那种挤压和遮挡。
   竖向三段：顶部（返回 + 元信息）／中部（标题 + 正文）／底部（原文 + 来源），
   上下两条发丝线把三段分开，中部垂直居中。
   ========================================================================== */
.archeZone--feed .feed-reader {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;                 /* 正文再长也只在框内截断，不滚 */
}
/* 作者样式里的 display 会盖过 UA 的 [hidden]，必须显式写回来 */
.archeZone--feed .feed-reader[hidden] { display: none }
.archeZone--feed .feed-list[hidden]   { display: none }

.archeZone--feed .fr-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--z-line);
}
.archeZone--feed .fr-back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--z-zh);
  font-size: 12px;
  letter-spacing: .2em;
  color: rgba(13, 26, 43, .55);
  transition: color .2s var(--z-ease);
}
.archeZone--feed .fr-back i {
  font-style: normal;
  font-size: 15px;
  line-height: 1;
  transition: transform .2s var(--z-ease);
}
.archeZone--feed .fr-back:hover { color: var(--z-ink-alarm) }
.archeZone--feed .fr-back:hover i { transform: translateX(-4px) }
.archeZone--feed .fr-back:focus-visible {
  outline: 2px solid var(--z-ink-alarm);
  outline-offset: 4px;
}

.archeZone--feed .fr-meta {
  font-family: var(--z-mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  color: rgba(13, 26, 43, .42);
  text-transform: uppercase;
  white-space: nowrap;
}
.archeZone--feed .fr-meta.is-down { color: var(--z-ink-good) }

/* 中部：垂直居中，上下留白随窗口高度走 */
.archeZone--feed .fr-main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* 原来是 center：标题+正文整块被压到窗口中间偏下。改成贴顶起步，
     只留一段呼吸距离 —— 视线从顶栏的「返回/时间来源」自然往下落到标题。 */
  justify-content: flex-start;
  gap: clamp(16px, 2.4vh, 32px);
  padding: clamp(18px, 3vh, 40px) 0 clamp(14px, 2.4vh, 30px);
  overflow: hidden;
}
.archeZone--feed .fr-title {
  margin: 0;
  /* 与 fr-main 展示区等宽 —— 标题是这一屏的主角，不该缩在左半边留一大片空 */
  max-width: none;
  width: 100%;
  font-family: var(--z-kai);        /* 书写体，见 :root 的 --z-kai */
  /* 字号按「最长的一行标题也能一行放下」来定：
     标题上限 24 个汉字，中文一字约占 1.05em、拉丁约 0.55em，
     加上词间空格，24 字纯中文标题 ≈ 25.2em。
     1580px 的可用宽度 ÷ 25.2 ≈ 62px 是理论极限，取 44px 留足余量 ——
     实测连「法国 AI 公司 Mistral 将于 10 月 27 日发布新一代模型权重」
     这种中英数字混排的 30 字符标题也能单行放下，不再折行。
     折行就算发生，也由上面的分词逻辑保证断在词与词之间。 */
  font-size: clamp(24px, 2.5vw, 44px);
  font-weight: 400;
  line-height: 1.42;
  letter-spacing: .05em;
  color: #0d1a2b;
  /* 折行时让两行长度尽量均衡，避免「第二行只剩两个字」那种别扭 */
  text-wrap: balance;
  /* 标题居中 —— 中式版式里标题居中、正文左对齐是标准搭配，
     一眼就能分出「题」和「文」两层。 */
  text-align: center;
}
.archeZone--feed .fr-body {
  margin: 0;
  /* 与标题同宽（原来是 46em ≈ 828px，只有标题一半宽，正文提前换行显窄）。
     放宽后每行约 83 个中文字，同样 9 行能承载的内容差不多翻倍。 */
  max-width: none;
  width: 100%;
  font-family: var(--z-kai);        /* 与标题同一书写体，整块读起来是一篇文章 */
  font-size: clamp(14px, 1.2vw, 18px);
  line-height: 2.05;                /* 楷体横细竖粗，行距给足才不挤 */
  letter-spacing: .05em;
  color: rgba(13, 26, 43, .68);
  display: -webkit-box;             /* 超长就截断，保证永远不出滚动条 */
  /* 实测：每行 43 字，fr-main 里放得下 9 行 → 约 380 字。
     DeepSeek 那边按 260~340 字出稿，9 行是兜底，正常不会触发截断。 */
  -webkit-line-clamp: 9;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* 首行缩进两字 —— 中文排版的老规矩，一眼看出是「文章」而不是「说明文字」 */
  text-indent: 2em;
}
/* 还没轮到精修的条目：正文位显示状态，不要拿原始摘要冒充正文。
   故意做得和正文完全不同 —— 疏排的等宽小字 + 一颗呼吸的点，一眼看出是「等一会儿」。 */
.archeZone--feed .fr-body.is-pending {
  text-indent: 0;
  font-family: var(--z-mono);
  font-size: 12px;
  line-height: 2;
  letter-spacing: .34em;
  color: rgba(13, 26, 43, .34);
  display: flex;
  align-items: center;
  gap: 10px;
}
.archeZone--feed .fr-body.is-pending::before {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--z-ink-alarm, #c81e46);
  box-shadow: 0 0 10px rgba(200, 30, 70, .8);
  animation: feedBlink 2.2s ease-in-out infinite;
}

.archeZone--feed .fr-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--z-line);
}
.archeZone--feed .fr-src {
  font-family: var(--z-mono);
  font-size: 10px;
  letter-spacing: .16em;
  color: rgba(13, 26, 43, .32);
  text-transform: uppercase;
}

/* 小屏兜底 */
@media (max-width: 900px) {
  .archeZone--feed .fr-title { font-size: clamp(20px, 6vw, 30px) }
  .archeZone--feed .fr-body { -webkit-line-clamp: 5 }
  .archeZone--feed .fr-top,
  .archeZone--feed .fr-foot { flex-wrap: wrap; gap: 12px }
}

/* --------------------------------------------------------------------------
   阅读视图里的「跳转原文」
   它是这一屏唯一的主操作，所以给它实心的描边和足够的点击面积 ——
   之前那版是 10.5px 的小字加一条极淡的边，在白底上几乎看不出是个按钮。
   -------------------------------------------------------------------------- */
.archeZone--feed .feed-go {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 22px 11px;
  border: 1px solid rgba(13, 26, 43, .30);
  color: #0d1a2b;
  font-family: var(--z-mono);
  font-size: 11.5px;
  letter-spacing: .22em;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s var(--z-ease),
              border-color .2s var(--z-ease),
              color .2s var(--z-ease);
}
.archeZone--feed .feed-go i {
  font-style: normal;
  font-size: 13px;
  line-height: 1;
  transition: transform .2s var(--z-ease);
}
.archeZone--feed .feed-go:hover {
  background: var(--z-ink-alarm);
  border-color: var(--z-ink-alarm);
  color: #fff;
}
.archeZone--feed .feed-go:hover i { transform: translate(2px, -2px) }
.archeZone--feed .feed-go:focus-visible {
  outline: 2px solid var(--z-ink-alarm);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   读数上那两个上下按钮（跳到上一 / 下一部分）
   --------------------------------------------------------------------------
   .archePos 整块是 pointer-events:none 的（它只是个显示层，别挡住底下的交互），
   所以这两个按钮要**单独把 pointer-events 打开**，否则点不动。

   配色一律用白色系：.archePos 上有 mix-blend-mode: difference，
   白色 = 差值反色，在深底和浅底上都能看清；带彩色的反而会脏。
   尺寸 19px —— 用户要求「小一点」。
   -------------------------------------------------------------------------- */
.archePos__steps {
  display: flex; gap: 4px; margin-top: 3px;
  pointer-events: auto;
}
.archePos__step {
  width: 19px; height: 19px; padding: 0;
  display: grid; place-items: center;
  font: inherit; font-size: 10px; line-height: 1;
  cursor: pointer;
  color: rgba(255, 255, 255, .7);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 2px;
  transition: background .16s, border-color .16s, color .16s;
}
.archePos__step:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, .8);
  background: rgba(255, 255, 255, .18);
}
.archePos__step:active { background: rgba(255, 255, 255, .34) }