/* ============================================================
   DELIVERY UPGRADE v3 · 高级感 / 数学对称 / 灵动Q弹 / OS级交互
   叠加层 —— 不改动上面基础定义,只在其上提纯、对称化、加动效。
   ============================================================ */

/* ---------- 新增设计令牌 ----------
   数学节奏:间距与字号按黄金比 1.618 递进;圆角分层;动效时长与弹簧缓动统一。 */
:root {
  /* 圆角刻度 */
  --r-xs: 6px;  --r-s: 10px;  --r-m: 16px;  --r-l: 24px;  --r-full: 999px;
  /* 动效时长 */
  --d-1: 130ms; --d-2: 260ms; --d-3: 420ms; --d-4: 620ms;
  /* 缓动: 标准 / 弹簧过冲 / 进入(back) */
  --ease-out:     cubic-bezier(.2,.8,.2,1);
  --ease-spring:  cubic-bezier(.34,1.56,.64,1);
  --ease-enter:   cubic-bezier(.16,1.2,.3,1);
  /* 层叠阴影(高级,去铸铁死黑的廉价感,改细腻分层) */
  --sh-sm: 0 1px 2px rgba(0,0,0,.28), 0 1px 1px rgba(0,0,0,.2);
  --sh-md: 0 12px 28px -14px rgba(0,0,0,.65), 0 2px 6px rgba(0,0,0,.28);
  --sh-lg: 0 30px 60px -24px rgba(0,0,0,.75);
  /* 间距节奏 */
  --space: clamp(20px, 5vw, 56px);
  /* v3.2 · 黄金比间距刻度 Fₙ = 8,13,21,34,55,89 (φ = 1.618)
     相邻级差恒定 → 收紧后仍保持同一呼吸比例,不会显拥挤。 */
  --g1: 8px; --g2: 13px; --g3: 21px; --g4: 34px; --g5: 55px; --g6: 89px;
}

/* ---------- 基础质感 ---------- */
body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
::selection{ background:var(--parchment); color:var(--void); }

/* 爱：尊重降低动效偏好 => 关闭一切多余动画 */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* ---------- 滚动入场:弹簧 + 交错 ---------- */
.ri{
  opacity:0; transform:translateY(20px) scale(.985);
  transition:opacity var(--d-3) var(--ease-out), transform var(--d-3) var(--ease-enter);
  transition-delay:var(--si,0ms);
}
.ri.in{
  opacity:1; transform:none;
  /* 单轨制: style.css 的 .ri.in 还挂着 animation:fadeUp, 与上面的 transition
     并行驱动同一属性, 两套在交接帧会跳变(抽搐感来源之一)。
     transition 已覆盖入场(--si 错峰由 motion.js 写入), 这里显式熄掉动画。
     注意: 只用 animation:none, 不要加 !important —— reduced-motion 的全局
     降级在 style.css 用 !important 熄 transition, 两条链互不干扰。 */
  animation:none;
}

/* ---------- 按钮 / 输入 / 芯片:按压反馈 + 精致圆角 ---------- */
.btn, .chip, .input, .guide-input button, .search-toggle, .mobile-nav-toggle, .code-copy{
  border-radius:var(--r-s);
  transition:transform var(--d-1) var(--ease-out), box-shadow var(--d-2) var(--ease-out), border-color var(--d-2) var(--ease-out), background var(--d-2) var(--ease-out);
  will-change: transform;
}
.btn:active, .chip:active, .guide-input button:active, .search-toggle:active, .mobile-nav-toggle:active, .code-copy:active{
  transform:scale(.965);
}
.btn:focus-visible, .chip:focus-visible, .input:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:none; box-shadow:0 0 0 2px rgba(116,160,124,.55), 0 0 0 4px rgba(116,160,124,.18);
}
.btn{
  box-shadow:var(--sh-sm); background:linear-gradient(180deg, rgba(143,163,181,.10), rgba(143,163,181,.04));
  border-color:var(--line-strong);
}
.btn:hover{ transform:translateY(-1px); box-shadow:var(--sh-md); }
.chip{ border-radius:var(--r-xs); }
.input, input.input, textarea.input{ border-radius:var(--r-s); transition:border-color var(--d-2), box-shadow var(--d-2); }

/* ---------- HUD:玻璃 + 滑动高亮 ---------- */
.hud{
  background:rgba(9,10,14,.72);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 1px 0 rgba(96,110,130,.12), 0 12px 40px -22px rgba(0,0,0,.7);
}
.nav a{
  border-radius:var(--r-xs);
  transition:color var(--d-2) var(--ease-out), background var(--d-2) var(--ease-out), border-color var(--d-2), transform var(--d-1) var(--ease-out);
  overflow:hidden; position:relative;
}
/* 弹簧式底边指示: 缩放划入(iOS 分段控件手感) */
.nav a::after{
  content:""; position:absolute; left:12%; right:12%; bottom:3px; height:2px;
  background:var(--amber); border-radius:2px;
  transform:scaleX(0); transform-origin:center;
  transition:transform var(--d-3) var(--ease-spring);
}
.nav a:hover::after{ transform:scaleX(1); }
.nav a.active::after{ transform:scaleX(1); }

/* ---------- HERO:数学对称 + 副光 ---------- */
.hero{ position:relative; }
.hero-rail{ display:grid; grid-template-columns:minmax(0,1fr) minmax(320px, 420px); gap:var(--space); align-items:center; }
.hero-main{ text-align:center; justify-self:center; }
.hero-title{ display:inline-grid; justify-items:center; }
.hero-title .zh{ font-size:clamp(2.6rem,7vw,5.2rem); letter-spacing:.04em; }
.hero-title .en{ letter-spacing:.34em; }
.hero-title .glow-line{ background:linear-gradient(90deg, rgba(205,215,228,.92) 0%, rgba(244,248,252,1) 50%, rgba(205,215,228,.92) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
@media (max-width:980px){
  .hero-rail{ grid-template-columns:1fr; gap:24px; }
}
/* 对称星环:hero 上方的同心圆氖圈(仅桌面,克制) */
.hero-rail::before{
  content:""; position:absolute; top:-6vmin; left:50%; width:min(88vw,980px); height:min(88vw,980px);
  transform:translateX(-50%); pointer-events:none; z-index:-1;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 44%, rgba(96,110,130,.06) 44.5% 45%, transparent 45.5% 60%, rgba(96,110,130,.05) 60.5% 61%, transparent 61.5%),
    radial-gradient(circle at 50% 50%, transparent 72%, rgba(96,110,130,.04) 72.5%, transparent 73%);
}

/* ---------- 指标:回弹计数 + 精致对称 ---------- */
.hero-metrics{ display:flex; justify-content:center; gap:calc(var(--space)/2); flex-wrap:wrap; margin-top:var(--space); }
.metric{
  min-width:120px; padding:18px 24px; text-align:center;
  background:linear-gradient(180deg, rgba(143,163,181,.06), transparent); border:1px solid var(--line);
  border-radius:var(--r-m); box-shadow:var(--sh-sm);
  transition:transform var(--d-2) var(--ease-out), box-shadow var(--d-2), border-color var(--d-2);
}
.metric:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); border-color:var(--line-strong); }
.metric .num{ font-variant-numeric:tabular-nums; }

/* ============================================================
   首页开屏 · 数学压缩 v3.2
   诊断:开屏"空"不是因为内容少,而是间距没按比例给 ——
        min-height:86vh 硬撑出虚高留白, 各层间距又是随手取整,
        视觉重心被摊平, 于是显得稀疏。
   手法:① 黄金比间距刻度 Fₙ = 8,13,21,34,55,89 (φ = 1.618)
        ② 双列按黄金比 1.618 : 1 分配(左标题 / 右终端)
        ③ 垂直节奏改为内容驱动, 拿掉虚高留白
   取舍:相邻间距始终取自同一数列 → 收紧之后依然有节奏,
        是"密度上移", 不是"挤在一起"。
   ============================================================ */
.hero{
  min-height:clamp(470px, 60vh, 680px);       /* 86vh → 60vh:留白交还给内容 */
  padding:clamp(30px, 5vh, 56px) 0 clamp(18px, 2.6vh, 30px);
}
/* ① 双列黄金比:左栏宽度是右栏的 1.618 倍 */
.hero-rail{
  grid-template-columns:minmax(0, 1.618fr) minmax(280px, 1fr);
  gap:clamp(18px, 2.6vw, var(--g4));
  align-items:center;
}
.hero-main{ padding-right:clamp(16px, 2.4vw, var(--g4)); }
.hud-kicker{ margin-bottom:var(--g2); }
/* 标题三层(英文 / 中文 / 副题)层间取 F 数列,比例一致 */
.hero-title .en{ margin-bottom:var(--g1); }
.hero-title .zh{ font-size:clamp(2.3rem, 5.6vw, 4.3rem); }   /* 原 5.2rem 按 √φ≈1.272 反向收一级 */
.hero-title .zh::after{ margin-top:var(--g1); }
.hero-title .glow-line{ margin-top:var(--g2); letter-spacing:.18em; }
.hero-sub{ margin-top:var(--g2); max-width:600px; font-size:14.5px; line-height:1.78; }
/* 终端:取消基础层的 margin-top 下推(栅格 gap 已负责间距),与标题列垂直居中 */
.relay{ margin:0; }
.relay-panel{ padding:16px 18px 18px; }
#boot{ min-height:clamp(148px, 20vh, 190px); line-height:1.8; }
.hero-metrics{ margin-top:clamp(18px, 2.8vh, var(--g4)); gap:clamp(10px, 1.3vw, 18px); }
.metric{ min-width:104px; padding:14px 20px; }
/* 同心星环收一圈,降低背景的空旷感 */
.hero-rail::before{ top:-4vmin; width:min(76vw, 840px); height:min(76vw, 840px); }
/* 右栏靠右对齐只在桌面生效(≤900px 时基础层要求铺满) */
@media (min-width:901px){
  .relay{ width:min(400px, 100%); justify-self:end; }
}

/* ============================================================
   首页 Hero 重构 v4.8 · 「信标锁定 SIGNAL LOCK」(2026-10-23)
   小主诊断: "这个主题框看起来真的没啥美感和高级感"。
   病因(逐条对址):
     ① 做旧过度: "冲压铝铭牌" = -webkit-text-stroke + 四向 text-shadow,
         在 90px 大字上把字形边缘糊成脏灰 —— 腐蚀感做成了"脏", 不是"旧";
     ② 主标 #97a2ae 死灰, 与虚空底对比不足, 撑不起视觉焦点;
     ③ "项目·思考·生活" 小字 background-clip:text 渐出色带, 廉价,
         且 2px 故意错位像 bug;
     ④ 层级失焦: kicker/EN/ZH/副题/promo 全是中等灰, 没有视觉锚;
     ⑤ 站点叫 BEACON, 标题区却没有"正在广播"的信号元素。
   药方(世界观不变 —— 从"做旧腐蚀"升级为"精密仪器"):
     - 信号锁 kicker: 磷光呼吸 LED + 扩散环, "正在广播"的直接隐喻;
     - EN: 单行 nowrap + 冷钢竖向渐变(金属光泽, 非死灰), 熄全部描边;
     - ZH: 近白 #e6ecf3 + 悬浮柔影, 铸印 hack 全去, 做纪念碑式焦点;
     - 副题条: 三段 mono + 身份色方钉(蓝/紫/氧化铜), 档案分类结构感,
       取代廉价渐变字;
     - hero-sub: ">>" 传输前缀 + 首句 parchment 强调。
   作用域: .hero-main 只存在于首页标记, 模块页页首(A2 节"冷钢蚀刻")
   不受影响; style.css 基础层不动, 全部在此叠加层中和/重定义。
   style.css 里的 .hero-title .glow-line 旧规则随类名废止成为死规则,
   无害保留(基础层回滚隔离纪律)。
   ============================================================ */

/* ① 信号锁 kicker —— 药丸徽章 + 呼吸 LED + 扩散环 */
.hero-main .hud-kicker{
  display:inline-flex; align-items:center; gap:11px;
  margin-bottom:var(--g3);
  padding:7px 16px 7px 13px;
  font-size:10.5px; letter-spacing:.26em; color:var(--ice-2);
  border:1px solid var(--line); border-radius:var(--r-full);
  background:linear-gradient(180deg, rgba(143,163,181,.08), rgba(143,163,181,.02));
}
.hero-main .hud-kicker::before{ display:none; }   /* 熄基础层琥珀破折号, 让位给 LED */
.hk-led{
  position:relative; flex:none;
  width:6px; height:6px; border-radius:50%;
  background:var(--phos);
  box-shadow:0 0 8px rgba(116,160,124,.6), 0 0 2px rgba(116,160,124,.9);
  animation:hk-breathe 2.4s ease-in-out infinite;
}
.hk-led::after{                                   /* 扩散环: 广播波纹 */
  content:""; position:absolute; inset:-3px; border-radius:50%;
  border:1px solid var(--phos);
  animation:hk-ring 2.4s cubic-bezier(.2,.7,.3,1) infinite;
}
@keyframes hk-breathe{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }
@keyframes hk-ring{ 0%{ transform:scale(.55); opacity:.75; } 75%,100%{ transform:scale(2.7); opacity:0; } }
.hk-sep{ font-style:normal; color:var(--ice-faint); padding:0 1px; }

/* ② 熄掉"冲压铝铭牌"的父级描边(会被子元素继承) */
.hero-main .hero-title{ -webkit-text-stroke:0; }
/* ③ EN 副标: 冷钢竖向渐变(金属光泽, 非死灰) */
.hero-main .hero-title .en{
  margin-bottom:var(--g2);
  background:linear-gradient(180deg, #d6dee7 0%, #9aa8b8 52%, #667585 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  -webkit-text-stroke:0; text-shadow:none; transform:none;
}
/* ④ 中文主标: 近白悬浮, 铸印 hack 全去 */
.hero-main .hero-title .zh{
  color:#e6ecf3;                        /* 近白微冷 —— 纪念碑式焦点 */
  -webkit-text-stroke:0;
  text-shadow:0 2px 18px rgba(0,0,0,.5), 0 1px 0 rgba(0,0,0,.35);
  transform:none;                       /* 熄"拉丁/汉基线错位" hack */
}
.hero-main .hero-title .zh::after{          /* 加工线: 氧化铜 → 钢蓝, 减淡 */
  margin-top:var(--g2);
  background:linear-gradient(90deg, var(--ice) 0%, transparent 92%);
  opacity:.35;
}
/* ⑤ 副题条: 三段档案分类(身份色方钉), 取代廉价渐变字 */
.hero-main .hero-tags{
  display:flex; align-items:center; justify-content:center;
  gap:var(--g3); margin-top:var(--g3);
  font-family:var(--mono); font-size:12px; letter-spacing:.3em;
  color:var(--ice-2);
  -webkit-text-stroke:0; text-shadow:none;
  transform:translateX(.15em);           /* 补偿 letter-spacing 尾部空, 光学居中 */
}
.ht-item{ display:inline-flex; align-items:center; gap:9px; }
.ht-item::before{
  content:""; flex:none; width:4px; height:4px;
  background:var(--spec-proj);
  box-shadow:0 0 7px rgba(110,168,224,.45);
}
.ht-thought::before{ background:var(--spec-thought); box-shadow:0 0 7px rgba(169,143,219,.45); }
.ht-life::before{ background:var(--amber); box-shadow:0 0 7px rgba(107,92,66,.5); }
/* ⑥ 引言: ">>" 传输前缀 + 首句强调 */
.hero-main .hero-sub{ position:relative; padding-left:24px; margin-top:var(--g3); }
.hero-main .hero-sub::before{
  content:">>"; position:absolute; left:0; top:1px;
  font-family:var(--mono); font-size:12px; letter-spacing:0; color:var(--phos);
}
.hero-main .hero-sub b{ color:var(--parchment); font-weight:600; }

/* 桌面专属: 标题升档 + EN 单行(移动端三档断点的既有调校原样保留) */
@media (min-width:721px){
  .hero-main .hero-title .zh{ font-size:clamp(2.6rem, 6.2vw, 5.6rem); letter-spacing:.1em; }
  .hero-main .hero-title .en{ white-space:nowrap; font-size:.46em; letter-spacing:.2em; }
}
/* 窄屏副题条收紧(不放大纪律) */
@media (max-width:560px){
  .hero-main .hero-tags{ gap:var(--g2); font-size:10.5px; letter-spacing:.22em; }
}

/* ============================================================
   v5.2 · 设计层次系统 (2026-10-24)
   —— 目标: 让"层次"变成可验证的结构, 而不是靠感觉加装饰。

   线上实测(1440×900, 双主题)暴露的四层问题:
     ① 模块页页首 EN 与中文挤在同一基线 —— 根因是中文「日志/项目/思考/诗歌」
        在 h1 里是**裸文本节点**, 继承了 h1 的 92px 巨字号, 而 .en span 只有
        31px 且 display:block, 于是 31px 的 EN 顶着 92px 的中文字, 视觉上
        像被砸在中文头上。已把四个模块页的中文包成 .zh span (HTML 侧修),
        本段给 .mod-title 一套独立的 EN→ZH 竖向堆叠排版。
     ② 装饰层抢焦点 —— 流星诗句层 .meteor-rain 是 z-index:-1 的背景层,
        但昼间底色变浅后, 诗句文字透出来横穿"指标条/宣言区", 与内容抢眼。
        修法: 装饰层整体降饱和 + 昼间更狠的压暗, 且禁止与首屏内容区重叠。
     ③ 字号层级碎裂 —— 首页检出 22 个不同字号 / 39 种文字色。
        修法: 引入 --t-* 字阶令牌, 让各级标题/元信息/正文落在刻度上。
     ④ 首页中段无锚 —— 指标条与宣言区都是"浮在流里的东西", 缺分区锚点。
        修法: 指标条升级为"仪表带"(编号 + 分隔线 + 统一基线), 宣言区加蚀刻标题。

   纪律: 本段插在移动端三档断点之前, 不覆盖它们的收紧规则;
        基础层 style.css 不动; 昼间差异一律用 [data-theme="day"] 前缀。
   ============================================================ */

/* ---------- 0. 横向溢出兜底 ----------
   背景装饰(流星诗句 / vector-bg 天体图)本质是 fixed + inset:0 的层,
   它们内部元素可能算出略大于视口的盒子。基线上这些溢出被 body 的
   overflow-x:hidden 吸收, 移动端 scrollWidth 恰好等于视口宽度。
   v5.2 加了内容区实底(绝对定位伪元素)后一度把 scrollWidth 顶到 410/453,
   暴露了这个隐患 —— 任何绝对定位的负层元素都可能把文档撑宽。
   用 overflow-x:clip 兜底: clip 不创建滚动容器, 不会破坏 position:sticky
   的 HUD 导航(overflow-x:hidden 会让 sticky 失效, 这是它的老坑)。 */
html{ overflow-x:clip; }
body{ overflow-x:clip; }

/* ---------- A. 排版字阶令牌 ----------
   以 1.2 (五度音阶) 为主干, 大标题区用 1.32 拉开纪念碑感。
   令牌 = 语义名, 不是数字名: 换主题/换字号时只改令牌不动选择器。 */
:root{
  /* 层级字阶: t1 最大 → t6 最小 */
  --t1: clamp(2.9rem, 6.4vw, 5.4rem);   /* 主标(首页) */
  --t2: clamp(2.1rem, 4.2vw, 3.4rem);   /* 页面主标(模块页) */
  --t3: 1.5rem;                          /* 区块标题 */
  --t4: 1.125rem;                        /* 卡片标题 */
  --t5: 0.95rem;                         /* 正文 */
  --t6: 0.8125rem;                       /* 次级正文 */
  --t7: 0.6875rem;                       /* 元信息 / 标签 */
  /* 层级色阶: 从"结构色"到"最弱元信息" */
  --lay-1: var(--ink);        /* 最高层: 主标正文 */
  --lay-2: var(--muted);      /* 二层: 辅助正文 */
  --lay-3: var(--ice);        /* 三层: 结构标签 / 编号 */
  --lay-4: var(--ice-dim);    /* 四层: 弱元信息 */
  --lay-5: var(--ice-faint);  /* 五层: 装饰 / 极弱 */
}

/* ---------- B. 模块页页首 · EN→ZH 竖向双层 (修 ①) ----------
   核心: EN 降到 "标签级"字号并拉开字距, ZH 独占一行做主标,
   两者之间给一条渐隐刻线做分隔 —— 层次靠"分级 + 分隔"建立, 不靠叠压。

   排布修正: 原结构是 .hud-kicker(inline-flex) 与 h1(inline-grid) 同行排布,
   两者基线错位 → EN 顶在 kicker 右侧, ZH 又偏右, 整块标题是"漂"在页面中部的。
   v5.2 改为: 整块页首居中, kicker / EN / ZH / 副题 竖向四段,
   全部走同一条中轴, 形成明确的阅读顺序。 */
.mod-title{
  display:inline-grid; justify-items:center; gap:0;
  /* 熄掉继承自基础层的 92px, 改由子元素各自定级 */
  font-size:inherit;
  margin:0 auto;
}
.mod-title .en{
  display:block;
  font-family:var(--mono);
  font-size:clamp(11px, 1.05vw, 13px);
  font-weight:500;
  letter-spacing:.42em;
  line-height:1;
  color:var(--ice);
  opacity:.85;
  margin:0 0 var(--g3);
  /* 抵消 letter-spacing 尾部空, 光学居中 */
  text-indent:.42em;
  -webkit-text-stroke:0; text-shadow:none;
  text-transform:uppercase;
}
.mod-title .zh{
  display:block;
  font-size:var(--t2);
  font-weight:700;
  line-height:1.1;
  letter-spacing:.16em;
  color:var(--ink);
  margin:0;
  text-indent:.16em;
  -webkit-text-stroke:0; text-shadow:none;
  transform:none;
}
/* EN 与 ZH 之间的渐隐刻线: 一条"仪器刻度", 承担分隔职能 */
.mod-title::after{
  content:""; display:block;
  width:64px; height:1px; margin:var(--g3) auto 0;
  background:linear-gradient(90deg, transparent, var(--line-strong) 30%, var(--line-strong) 70%, transparent);
  opacity:.8;
}
/* ZH 原本那条通宽加工线在模块页是多余的 —— 已有 EN/ZH 之间的刻线 */
.mod-title .zh::after{ display:none; }

/* 页首容器: 居中竖向四段(kicker → EN → ZH → 副题), 同一条中轴 */
body:not([data-page="index"]) .hero .wrap{
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
body:not([data-page="index"]) .hero .hud-kicker{
  margin-bottom:var(--g3);
}
/* 副题: 居中后收窄, 避免长行拉得太开 */
body:not([data-page="index"]) .hero .hero-sub{
  max-width:56ch; margin-top:var(--g3); text-align:center;
}

/* 特异性对齐: A2 段(body:not([data-page="index"]) .hero-title .zh)是 0,2,1,
   比 .mod-title .zh 的 0,2,0 高一级, 会把颜色改回"冷钢蚀刻"灰。
   v5.2 只修**结构**(EN→ZH 竖向双层 + 刻线分隔), 不推翻 A2 的配色决策:
   模块页标题继续走"冷钢蚀刻" —— 冷钢灰 ZH + 更弱的 EN, 内容页要温度不要铭牌。
   所以这里只需把 EN 单独压到比 ZH 更弱的层级, ZH 交还给 A2。 */
body:not([data-page="index"]) .hero-title.mod-title{
  font-weight:700;
  text-shadow:none;
}
body:not([data-page="index"]) .hero-title.mod-title .zh{
  text-shadow:0 1px 0 rgba(0,0,0,.55);   /* 交还 A2 的柔和浮影 */
}
body:not([data-page="index"]) .hero-title.mod-title .en{
  color:var(--ice); opacity:.75;          /* EN = 结构标签级, 明确弱于 ZH */
  text-shadow:none;
}
/* 昼间: 蚀刻灰在白底上要更深才立得住, EN 用钢蓝 */
[data-theme="day"] body:not([data-page="index"]) .hero-title.mod-title .zh{
  color:#3d5872;
  text-shadow:0 1px 0 rgba(255,255,255,.85);
}
[data-theme="day"] body:not([data-page="index"]) .hero-title.mod-title .en{
  color:#2f6da8; opacity:.85;
  text-shadow:none;
}

/* 模块页页首整体上抬: 与 HUD 之间留出呼吸, 层次从"进入页面"开始 */
.mod-title + .hero-sub{ margin-top:var(--g3); }

/* ---------- C. 装饰层让位 (修 ②) ----------
   流星诗句是氛围层, 不是内容层。规则:
     - 全程低于内容, 且降饱和 —— 昼间必须明显退到背景里;
     - 首屏内容区(标题/指标/宣言)附近不生成, 由 JS 侧避开, CSS 侧再压一道。

   v5.2 追加: 装饰层不能只靠 z-index:-1 —— 玻璃卡本身半透明, 底下的诗句
   会"透"上来与正文抢行(实测昼间"把罗盘转向这一侧"横穿模块页标题右侧,
   "有一句还没说完的话"压在筛选 chip 上)。真正的层次分离靠**内容区实底**:
   在内容容器下垫一层不透明底板, 装饰层只能落在底板之外的空隙里。 */
.meteor-rain{ opacity:.5; }
.meteor-line{ filter:saturate(.7) drop-shadow(0 0 4px rgba(126,152,190,.3)); }

/* 内容区实底: 垫在装饰层之上、内容之下, 让诗句无法透进正文行间。
   用伪元素而非改 z-index —— 不动原有层叠顺序, 零副作用。

   ⚠ 两条踩坑记录:
   ① 横向外扩: 早先用 inset 的负 calc(--gutter) 想让实底铺到屏幕边,
      结果伪元素比 .wrap 宽出两个 gutter, 移动端把 document.scrollWidth
      顶到 410/453(基线 390/430) → 横向滚动条。body 的 overflow-x:hidden
      裁不掉(绝对定位子元素溢出的是 body 内容盒, 不是 body 自身)。
      修法: 横向一律 left:0/right:0 不外扩。
   ② 硬边方框: mask 的椭圆渐隐是按元素盒子算的, 而 .wrap 只包住标题与副题,
      于是实底在副题下方切出一个可见的矩形边(移动端尤其明显, 像贴了块补丁)。
      修法: 不用 mask, 改用"上下双向线性渐变"——顶部透明收、中部实、底部透明收,
      竖直方向自然融进背景, 不会出现任何水平硬边。 */
body:not([data-page="index"]) .hero .wrap::before,
body:not([data-page="index"]) .block .wrap::before{
  content:""; position:absolute; z-index:-1;
  top:-28px; bottom:-28px; left:0; right:0;
  background:var(--void);
  pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image:linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
/* 容器要能承载这个负层伪元素 */
body:not([data-page="index"]) .hero .wrap,
body:not([data-page="index"]) .block .wrap{ position:relative; }

/* 昼间: 白底上任何深色装饰字都会变正文, 必须压到"几乎看不见但还在" */
[data-theme="day"] .meteor-rain{ opacity:.26; }
[data-theme="day"] .meteor-line{
  background:linear-gradient(180deg,
    rgba(120,140,166,.30) 0%,
    rgba(140,160,186,.36) 46%,
    rgba(160,180,206,.42) 100%);
  -webkit-background-clip:text; background-clip:text;
  filter:saturate(.45) drop-shadow(0 1px 0 rgba(255,255,255,.7));
}
[data-theme="day"] .meteor-line.tone-b{
  background:linear-gradient(180deg,
    rgba(130,124,168,.28) 0%,
    rgba(150,144,186,.34) 46%,
    rgba(172,166,206,.40) 100%);
  -webkit-background-clip:text; background-clip:text;
}
[data-theme="day"] .meteor-line.tone-c{
  background:linear-gradient(180deg,
    rgba(112,136,150,.28) 0%,
    rgba(132,156,170,.34) 46%,
    rgba(154,178,192,.40) 100%);
  -webkit-background-clip:text; background-clip:text;
}
/* 昼间内容区实底: 用白底(带极淡天光蓝), 完全盖住诗句 */
[data-theme="day"] body:not([data-page="index"]) .hero .wrap::before,
[data-theme="day"] body:not([data-page="index"]) .block .wrap::before{
  background:#f2f6fa;
}
/* 首页: hero 是通透设计(要看流星穿透), 不加实底;
   但指标卡自身必须有底 —— 否则诗句横穿数字卡。
   做法: 每张指标卡内部垫一层实底(而非罩住整条带, 保留带内的通透感)。 */
.hero-metrics .metric{ isolation:isolate; }
.hero-metrics .metric::before{
  content:""; position:absolute; z-index:-1;
  top:-10px; bottom:-10px; left:0; right:0;
  border-radius:inherit;
  background:var(--void);
  pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image:linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
[data-theme="day"] .hero-metrics .metric::before{
  background:#f7fafd;
}

/* ---------- D. 首页中段 · 仪表带 (修 ④) ----------
   指标条从"四个浮着的数字"升级为"一条有编号、有分隔、有基线的仪表带"。 */
.hero-metrics{
  position:relative;
  align-items:stretch;
  padding:var(--g2) 0 0;
}
/* 仪表带顶部一条通宽渐隐刻线 —— 视觉上把 hero 与中段切开 */
.hero-metrics::before{
  content:""; position:absolute; left:50%; top:0;
  transform:translateX(-50%);
  width:min(100%, 720px); height:1px;
  background:linear-gradient(90deg, transparent, var(--line-strong) 22%, var(--line-strong) 78%, transparent);
}
.metric{
  position:relative;
  min-width:112px;
  padding:14px 22px 12px;
  background:linear-gradient(180deg, rgba(143,163,181,.055), rgba(143,163,181,.015));
  border:1px solid var(--line);
  border-radius:var(--r-m);
  text-align:center;
}
/* 相邻仪表格之间的分隔刻度 —— 用 ::after, ::before 留给实底垫层 */
.metric + .metric::after{
  content:""; position:absolute; left:-1px; top:22%; bottom:22%; width:1px;
  background:linear-gradient(180deg, transparent, var(--line-strong), transparent);
}
/* 数字: 仪表读数感 —— 收紧字距, 加数据色, 但不做成荧光 */
.metric .num{
  display:block;
  font-family:var(--mono);
  font-size:1.5rem; font-weight:500;
  line-height:1.1; letter-spacing:.02em;
  color:var(--ice-2);
  text-shadow:none;
}
/* 标签: 降到元信息级, 加宽字距做仪器铭牌感 */
.metric .lbl{
  display:block;
  margin-top:6px;
  font-size:var(--t7); letter-spacing:.22em;
  color:var(--lay-4);
  text-transform:uppercase;
}
/* 昼间: 仪表带用白钢刻线, 数字给钢蓝, 标签退到浅灰 */
[data-theme="day"] .metric{
  background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.5));
  border-color:rgba(41,64,86,.13);
  box-shadow:0 1px 0 rgba(255,255,255,.9), inset 0 1px 0 rgba(255,255,255,.9);
}
[data-theme="day"] .metric + .metric::after{ background:linear-gradient(180deg, transparent, rgba(41,64,86,.16), transparent); }
[data-theme="day"] .metric .num{ color:#2f6da8; }
[data-theme="day"] .metric .lbl{ color:rgba(41,64,86,.5); }

/* ---------- E. 宣言区 · 蚀刻标题锚 (修 ④) ----------
   宣言区原先只是一张浮着的玻璃卡, 没有标题层级。
   加一条"观测环"刻线 + 编号, 让它是可定位的分节, 不是漂浮物。

   排布修正: 基础层 .manifesto-grid 是 grid-template-columns:auto 1fr,
   但 HTML 结构是 <div class="manifesto-grid"> 内含 <div id="mani-symbol">
   与 <div>文字</div> —— 圆环和文字各占一列, 实测文字被挤到第三列
   (grid 实测 499px 499px, 文字列宽仅 388px 而容器 1046px),
   右侧大片留白、左侧圆环孤悬。v5.2 改为显式三段: 圆环 | 文字 | 留白,
   文字列放宽, 圆环与文字顶对齐, 消除"两坨东西各自飘着"的观感。 */
.manifesto-grid{
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(24px,4.5vw,56px);
  align-items:start;
}
/* 圆环: 放大成"观测印章", 与文字块顶端对齐, 建立"图标 → 标题"的方向感。
   不用 align-items:center —— 圆环居中会让它悬在文字块左侧空白处, 重心分裂。 */
.manifesto-grid #mani-symbol{
  display:flex; align-items:flex-start; justify-content:center;
  padding-top:2px;
}
.manifesto-grid #mani-symbol .symbol-ring{
  width:132px; height:132px;
  opacity:.8;
  filter:drop-shadow(0 0 14px rgba(176,132,66,.16));
}
/* 文字列: 放宽到整列 —— 原 max-width:58ch 让文字列只占 388px,
   容器 1046px 右侧空掉一大片, 整块宣言读起来"左重右空"。
   正文行长控制在 46ch(可读性上限), 但标题与 kicker 允许更宽。 */
.manifesto-grid > div:not(#mani-symbol){
  max-width:none;
  padding-right:clamp(0px,4vw,48px);
}
.manifesto .hud-kicker{
  display:inline-flex; align-items:center; gap:10px;
  margin-bottom:var(--g2);
  font-size:var(--t7); letter-spacing:.3em;
  color:var(--lay-3);
}
.manifesto .hud-kicker::before{
  content:""; width:22px; height:1px; border-radius:1px;
  background:var(--ice); opacity:.55; flex:none;
}
.manifesto-title{
  font-size:var(--t3);
  font-weight:700; line-height:1.2; letter-spacing:.06em;
  color:var(--ink);
  margin:0 0 var(--g2);
  -webkit-text-stroke:0; text-shadow:none;
}
.manifesto-body{
  font-size:var(--t5); line-height:1.85; color:var(--lay-2);
  margin:0; max-width:46ch;
}
[data-theme="day"] .manifesto-title{ color:#294056; }
[data-theme="day"] .manifesto-body{ color:#55687e; }
[data-theme="day"] .manifesto .hud-kicker{ color:#2f6da8; }
/* 首页 hero 标题卡: 它是"玻璃窗", 设计上要通透(让流星穿过),
   但诗句不能正好落在标题文字上。做法: 卡片本身加实底,
   星星/网格仍能透过玻璃质感, 但诗句文字不再与标题抢行。
   用 ::before —— ::after 已被"垂直划痕线"占用(且 2319 行把它 display:none)。
   mask 走纵向渐隐, 避免卡片边缘切出硬边方框。 */
.hero-main{ position:relative; isolation:isolate; }
.hero-main::before{
  content:""; position:absolute; z-index:-1;
  top:-12px; bottom:-12px; left:0; right:0;
  border-radius:inherit;
  background:var(--void);
  pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image:linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
[data-theme="day"] .hero-main::before{
  background:#f7fafd;
}
@media (max-width:560px){
  .manifesto-grid #mani-symbol .symbol-ring{ width:96px; height:96px; }
}
@media (max-width:720px){
  .manifesto-grid{ grid-template-columns:1fr; gap:var(--g3); }
  .manifesto-grid #mani-symbol{ justify-content:flex-start; }
  .manifesto-grid #mani-symbol .symbol-ring{ width:80px; height:80px; }
  .manifesto-grid > div:not(#mani-symbol){ padding-right:0; }
}

/* ---------- F. 区块标题统一到字阶 (修 ③) ----------
   .block-title 是全站二级标题的通用载体, 收敛到 --t3 + 统一字距。 */
.block-title{
  font-size:var(--t3);
  font-weight:700; line-height:1.2; letter-spacing:.05em;
  color:var(--ink);
  -webkit-text-stroke:0; text-shadow:none;
}
.block-title .en{
  display:block;
  margin-top:6px;
  font-family:var(--mono);
  font-size:var(--t7); font-weight:400;
  letter-spacing:.34em;
  color:var(--lay-4);
  text-transform:uppercase;
}
[data-theme="day"] .block-title{ color:#294056; }
[data-theme="day"] .block-title .en{ color:rgba(41,64,86,.5); }

/* ---------- G. 卡片标题 / 正文收敛到字阶 (修 ③) ----------
   卡片族标题(项目卡/日志卡/诗卡/思考条)统一走 --t4, 正文走 --t5。 */
.journal-card h3, .pn-card h3, .thought h3, .poem-card h3, .beacon h3{
  font-size:var(--t4) !important;
  line-height:1.3 !important; letter-spacing:.02em !important;
  color:var(--lay-1) !important;
  -webkit-text-stroke:0 !important; text-shadow:none !important;
}
.journal-card p, .pn-card p, .thought p, .beacon p{
  font-size:var(--t6) !important; line-height:1.75 !important;
  color:var(--lay-2) !important;
}
/* 卡片元信息(日期/标签/阅读时长)统一降到元信息级 */
.journal-card .meta, .pn-card .meta, .beacon .meta,
.journal-card time, .pn-card time, .beacon time{
  font-size:var(--t7) !important; letter-spacing:.14em !important;
  color:var(--lay-4) !important;
}
[data-theme="day"] .journal-card h3, [data-theme="day"] .pn-card h3,
[data-theme="day"] .thought h3, [data-theme="day"] .beacon h3{ color:#294056 !important; }
[data-theme="day"] .journal-card p, [data-theme="day"] .pn-card p,
[data-theme="day"] .thought p, [data-theme="day"] .beacon p{ color:#55687e !important; }

/* ---------- H. 移动端三档收紧 (不放大纪律) ----------
   本段新增的标题/字阶在窄屏必须同步收紧, 否则会顶破布局。 */
@media (max-width:720px){
  :root{
    --t1: clamp(2.3rem, 11vw, 3.4rem);
    --t2: clamp(1.7rem, 8vw, 2.4rem);
    --t3: 1.25rem;
    --t4: 1.0625rem;
    --t5: .9375rem;
    --t6: .8125rem;
    --t7: .6875rem;
  }
  .mod-title .en{ font-size:10.5px; letter-spacing:.34em; text-indent:.34em; margin-bottom:var(--g2); }
  .mod-title .zh{ letter-spacing:.1em; text-indent:.1em; }
  .mod-title::after{ width:48px; margin-top:var(--g2); }
  .metric{ min-width:0; flex:1 1 44%; padding:12px 14px 10px; }
  .metric .num{ font-size:1.25rem; }
  .metric .lbl{ letter-spacing:.16em; }
  .hero-metrics{ padding-top:var(--g1); }
}
@media (max-width:560px){
  .mod-title .en{ letter-spacing:.28em; text-indent:.28em; }
  .metric{ padding:10px 10px 9px; }
  .metric .num{ font-size:1.125rem; }
  .metric .lbl{ font-size:.625rem; letter-spacing:.12em; }
  .block-title .en{ letter-spacing:.24em; }
}
@media (max-width:400px){
  .metric .num{ font-size:1.0625rem; }
  .metric .lbl{ letter-spacing:.08em; }
  .mod-title::after{ width:36px; }
}

/* ---------- 卡片族:对称栅格 + 悬停弹簧上抬 ---------- */
.grid-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:22px; }
.dm, .pn-card, .suggest-card, .device, .journal-card, .thought, .beacon, .sn-card{
  border-radius:var(--r-m); transition:transform var(--d-3) var(--ease-out), box-shadow var(--d-2), border-color var(--d-2);
  will-change:transform;
}
.dm:hover, .pn-card:hover, .suggest-card:hover, .device:hover, .journal-card:hover, .beacon:hover{
  transform:translateY(-4px); box-shadow:var(--sh-md); border-color:var(--line-strong);
}

/* ---------- 抽屉 / 搜索 / 灯箱:弹簧入 + 毛玻璃背板 ---------- */
.drawer{ transition:transform var(--d-4) var(--ease-enter), opacity var(--d-3) var(--ease-out); }
.drawer-back, .search-overlay{ -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.search-results .sr-item{ transition:transform var(--d-2) var(--ease-out), background var(--d-2); }
.search-results .sr-item:hover{ transform:translateX(4px); }

/* ---------- 新闻列表 / 留言 / 思维 ---------- */
.news-item{ border-radius:var(--r-s); transition:transform var(--d-2) var(--ease-out), border-color var(--d-2), background var(--d-2); }
.news-item:hover{ transform:translateX(6px); }
.sig-item, .thought, .beacon{ border-radius:var(--r-m); }
.thought blockquote{ border-radius:var(--r-s); }

/* ---------- 页脚 / 顶部按钮 ---------- */
/* .to-top 的过渡与 .on 态统一定义于下文"顺手层"(261 行起), 此处不重复 */
.read-progress{ height:3px; background:linear-gradient(90deg, var(--ice), var(--amber)); }

/* ---------- 对称工具 ---------- */
.mirror{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space); align-items:center; }
.mirror > :nth-child(1){ order:1; } .mirror > :nth-child(2){ order:2; text-align:left; }
.mirror.rev > :nth-child(1){ order:2; } .mirror.rev > :nth-child(2){ order:1; }
@media (max-width:820px){ .mirror{ grid-template-columns:1fr; } }

/* ============================================================
   顺手层 · 微交互平滑 (不破坏版面, 只作动效/反馈)
   ============================================================ */

/* ---------- 光标环:弹性回弹(Q 弹) ---------- */
.cursor-ring{
  transition:width .16s cubic-bezier(.34,1.56,.64,1),
             height .16s cubic-bezier(.34,1.56,.64,1),
             border-color .22s var(--ease-out),
             opacity .22s var(--ease-out);
}

/* ---------- 移动端导航:弹簧抽屉 + 逐项进场 ---------- */
@media (max-width:860px){
  .nav{
    /* v5.0: 原来是 rgba(8,8,12,.82) + blur(12px) —— 82% 半透明靠模糊遮丑,
       而全屏 blur 正是"抽搐"的性能元凶。去掉模糊后必须给实心底,
       否则背后页面的字会透出 18%, 比模糊更难看。 */
    background:#0a0b0e;
    -webkit-backdrop-filter:none; backdrop-filter:none;
    opacity:0; pointer-events:none;
    transition:transform var(--d-4) var(--ease-enter), opacity var(--d-3) var(--ease-out);
  }
  .nav.open{ opacity:1; pointer-events:auto; }
  /* 抽屉盖住按钮时仍可点按钮关闭:置顶 */
  .mobile-nav-toggle{ position:relative; z-index:70; }
  .nav a{
    opacity:0; transform:translateX(-12px);
    transition:transform var(--d-3) var(--ease-spring), opacity var(--d-2) var(--ease-out),
               background var(--d-2), border-color var(--d-2), color var(--d-2);
  }
  /* 展开时逐项错峰(仅 .open 下延时, 收起立即回位)
     v5.3: 改用 a:nth-of-type —— nav 里插了 .nav-hint 这个 <p>,
     nth-child 会把提示条算进去, 导致 7 个链接的错峰整体偏移一位
     (第 1 个链接会拿到 .04s 延时, 而提示条本该先出现)。 */
  .nav.open a:nth-of-type( 1){ transition-delay:.00s; }
  .nav.open a:nth-of-type( 2){ transition-delay:.04s; }
  .nav.open a:nth-of-type( 3){ transition-delay:.08s; }
  .nav.open a:nth-of-type( 4){ transition-delay:.12s; }
  .nav.open a:nth-of-type( 5){ transition-delay:.16s; }
  .nav.open a:nth-of-type( 6){ transition-delay:.20s; }
  .nav.open a:nth-of-type( 7){ transition-delay:.24s; }
  .nav.open a{ opacity:1; transform:translateX(0); }
}

/* ---------- 阅读进度:丝滑递进 + 自动隐现 ---------- */
.read-progress{ transition:width .12s linear; }

/* ---------- 目录 active:弹簧点亮 ---------- */
.toc-list a{
  border-left:2px solid transparent; padding-left:8px;
  transition:color var(--d-2) var(--ease-out), border-color var(--d-3) var(--ease-spring),
             background var(--d-2);
}
.toc-list a.on{ transform:translateX(2px); }

/* ---------- 复制成功:磷光弹一下 ---------- */
.code-copy{ transition:color var(--d-2), border-color var(--d-2), transform var(--d-1); }
.code-copy.done{ animation:copied-pop 480ms cubic-bezier(.34,1.56,.64,1); }
@keyframes copied-pop{ 0%{transform:scale(1)} 45%{transform:scale(1.12)} 100%{transform:scale(1)} }

/* ---------- 留言:提交反馈 + 新留言入场 ---------- */
.sig-note.ok, .sig-note.warn{
  animation:note-in var(--d-3) var(--ease-out) both;
}
@keyframes note-in{ from{opacity:0; transform:translateY(3px)} to{opacity:1; transform:none} }
.sig-item{ transition:transform var(--d-2) var(--ease-out), border-color var(--d-2), background var(--d-2); }
.sig-item:hover{ transform:translateX(4px); border-color:var(--line-strong); }

/* ---------- 返回顶部:弹簧切入 ---------- */
.to-top{ transition:opacity var(--d-3) var(--ease-out), transform var(--d-4) var(--ease-enter); }
.to-top.on{ transform:translateY(0); }

/* ---------- 宣言区:水平镜像对称(桌面) + 竖直节奏 ---------- */
.manifesto{ text-align:center; }
.manifesto-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); justify-items:center; }
.manifesto-grid > :last-child{ justify-self:start; text-align:left; }
.manifesto-title, .manifesto-body{ max-width:46ch; }
@media (max-width:720px){
  .manifesto-grid > :last-child{ justify-self:center; text-align:center; }
}

/* ============================================================
   关于页 · 自我介绍 (bio-grid / 事实档案)
   ============================================================ */
.bio-grid{
  display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:var(--space); align-items:start;
}
.bio-body{ color:var(--ink); font-size:15.5px; line-height:1.95; max-width:62ch; }
.bio-body b{ color:var(--ice); font-weight:500; }
.bio-body + .bio-body{ margin-top:10px; }
.bio-facts{
  background:linear-gradient(180deg, rgba(143,163,181,.06), transparent);
  border:1px solid var(--line); border-radius:var(--r-m);
  padding:20px 24px; box-shadow:var(--sh-sm);
  transition:transform var(--d-2) var(--ease-out), box-shadow var(--d-2), border-color var(--d-2);
}
.bio-facts:hover{ transform:translateY(-3px); box-shadow:var(--sh-md); border-color:var(--line-strong); }
.fact-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.fact-list li{
  display:flex; align-items:baseline; gap:14px;
  border-bottom:1px dashed var(--line); padding:13px 0;
}
.fact-list li:last-child{ border-bottom:none; padding-bottom:0; }
.fact-list .fk{
  flex:0 0 52px; font-family:var(--mono); font-size:11px;
  letter-spacing:2px; color:var(--muted); text-transform:uppercase;
}
.fact-list .fv{ color:var(--ice); font-size:14px; }
.interest-grid{ margin-top:6px; }
@media (max-width:820px){ .bio-grid{ grid-template-columns:1fr; } }

/* ============================================================
   移动端适配 · 第一层 (≤ 720px 平板竖屏 / 大号手机)
   ============================================================ */
@media (max-width:720px){
  .grid-cards{ grid-template-columns:1fr; }              /* 卡片强制单列,避免 minmax 挤压 */
  .block{ padding-bottom:28px; }
  .hero-rail{ gap:18px; }
  .thought, .sig-item, .journal-card, .dm, .pn-card{ overflow-wrap:break-word; }
  .fact-list .fk{ flex-basis:48px; }                     /* 窄屏窄标签列 */
  .journal-toolbar input, .journal-toolbar select{ min-width:0; }
  .sig-foot{ flex-wrap:wrap; }
}

/* ============================================================
   移动端适配 · 第二层 (≤ 560px 小屏手机)
   ============================================================ */
@media (max-width:560px){
  .wrap{ padding-left:14px; padding-right:14px; }

  /* HUD:藏时钟、品牌可弹性收缩(省略号)而非把汉堡挤出去 */
  .hud-clock{ display:none; }
  .hud-inner{ gap:10px; }
  .brand{ min-width:0; flex:1 1 auto; }
  .brand-orb{ width:22px; height:22px; flex:none; }
  .brand-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; letter-spacing:1.5px; font-size:10px; }
  .mobile-nav-toggle{ font-size:18px; flex:none; }

  /* Hero:标题严禁超宽,英文允许换行、收紧字距 */
  .hero{ padding:34px 0 8px; }
  .hero-title{ width:100%; display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; overflow-wrap:anywhere; font-size:clamp(30px,8.5vw,48px); }
  .hero-title .zh{ font-size:clamp(1.7rem,9vw,2.2rem); }
  .hero-title .en{ font-size:.72em; letter-spacing:.04em; display:block; white-space:normal; overflow-wrap:anywhere; word-break:break-word; max-width:100%; }
  .hero-title .glow-line{ letter-spacing:.12em; overflow-wrap:anywhere; word-break:break-word; max-width:100%; display:block; }
  .hero-sub{ font-size:13.5px; line-height:1.85; max-width:100%; overflow-wrap:break-word; word-break:break-word; }
  .hud-kicker{ font-size:10px; letter-spacing:1.5px; }

  /* 文字回行 / 图片防溢出 */
  .hero-title, .dm-title, .dm-body, .jexcerpt, .jtitle, .block-title, .thought blockquote,
  .sig-note, .guide-answer, .who-body, .bio-body, .contact-note{ overflow-wrap:break-word; }
  img, iframe, video, canvas{ max-width:100%; }
  .md table, .md pre, pre{ max-width:100%; }
  .md pre, pre{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

  /* 卡片收拢 */
  .dm{ padding:16px; }
  .dm-title{ font-size:1.05rem; }
  .dm-body{ font-size:13px; line-height:1.7; }
  .stack span, .jtags{ font-size:11px; }

  /* 留言:按钮全宽、表单组件自适应 */
  .sig-form{ gap:9px; }
  .sig-form .btn{ width:100%; }
  .sig-name, .sig-text{ width:100%; }
  .sig-text{ min-height:84px; }

  /* 页脚纵向排布,不再被 space-between 撑裂 */
  .footer-inner{ flex-direction:column; align-items:flex-start; gap:8px; }
  .footer-inner, .footer-mono{ text-align:left; }

  /* 日志页工具栏内控件全宽 */
  .journal-toolbar{ gap:8px; }
  .journal-toolbar .search, .journal-toolbar input, .journal-toolbar select{ width:100%; }
  .md-toolbar{ flex-wrap:wrap; }
  .md-preview-body{ font-size:13px; }

  /* 筛选标签栏:窄屏强制逐项换行,杜绝横向溢出被裁 */
  .filterbar{ flex-wrap:wrap; }
  .filterbar .chip{ white-space:nowrap; max-width:100%; }
  .filterbar, .journal-toolbar, .block-head{ overflow:hidden; overflow-wrap:anywhere; }
}

/* ============================================================
   移动端适配 · 第三层 (≤ 400px 极窄屏 · 单调收紧,防护较小设备)
   说明:只在更窄时进一步收敛间距/字号,不会放大任何元素。
   ============================================================ */
@media (max-width:400px){
  .wrap{ padding-left:12px; padding-right:12px; }
  .hero{ padding:28px 0 6px; }
  .hero-title{ font-size:clamp(26px,8vw,40px); }
  .hero-title .zh{ font-size:clamp(1.5rem,8vw,2rem); }
  .hero-title .en{ letter-spacing:.03em; }
  .hero-sub{ font-size:13px; line-height:1.8; }
  .hud-kicker{ font-size:9.5px; letter-spacing:1px; }
  .grid-cards{ gap:14px; }
  .dm, .bio-facts, .thought, .beacon, .journal-card, .sn-card{ padding:14px; }
  .metric{ min-width:0; padding:14px 16px; }
  .fact-list .fk{ flex-basis:44px; }
  .block-title{ font-size:1.35rem; }
}

/* ============================================================
   前台交互补强 v3.1 —— 搜索键盘导航 / 图片灯箱翻看 / 留言计数
   只叠加在上层,不动基础定义;移动端三档断点单调收紧。
   ============================================================ */

/* ---------- 全站搜索:焦点态 / 命中高亮 / 操作提示条 ---------- */
.search-overlay{ overscroll-behavior:contain; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.search-results{ overscroll-behavior:contain; scrollbar-width:thin; }

.search-hintbar{
  display:none; margin-top:10px; padding:8px 12px;
  font-family:var(--mono); font-size:11px; letter-spacing:.8px; color:var(--muted);
  background:rgba(20,23,29,.62); border:1px solid var(--line); border-radius:var(--r-xs);
}
.search-hintbar.on{ display:block; animation:riseIn .2s var(--ease-out); }

/* 键盘选中项:琥珀色内嵌指示条 —— 纯色变,不产生位移,杜绝横向滚动条 */
.sr-item{
  border-radius:var(--r-xs);
  transition:border-color var(--d-2) var(--ease-out), background var(--d-2) var(--ease-out);
}
.sr-item.on{ background:var(--panel-2); border-color:var(--line-strong); box-shadow:inset 3px 0 0 var(--amber); }
.sr-item mark{ background:rgba(116,160,124,.22); color:#d8ecd9; padding:0 2px; border-radius:2px; }

/* ---------- 图片灯箱:左右翻看 + 计数 ---------- */
.lightbox.on{ animation:lbIn .24s var(--ease-out); }
.lightbox .lb-nav{
  position:absolute; top:50%; z-index:2;
  width:52px; height:52px; display:flex; align-items:center; justify-content:center;
  transform:translateY(-50%);
  border:1px solid var(--line-strong); border-radius:var(--r-full);
  background:rgba(10,11,14,.72); color:var(--ice-2);
  font-size:26px; line-height:1; cursor:pointer;
  transition:transform var(--d-1) var(--ease-out), color var(--d-2) var(--ease-out), border-color var(--d-2) var(--ease-out), background var(--d-2) var(--ease-out);
}
.lightbox .lb-prev{ left:max(16px,3vw); }
.lightbox .lb-next{ right:max(16px,3vw); }
.lightbox .lb-nav:hover{ color:var(--ink); border-color:var(--amber); background:rgba(20,23,29,.9); transform:translateY(-50%) scale(1.07); }
.lightbox .lb-nav:active{ transform:translateY(-50%) scale(.94); }
.lightbox .lb-cap{ max-width:86vw; text-align:center; }
.lightbox .lb-cap:empty, .lightbox .lb-count:empty{ display:none; }
.lightbox .lb-count{ font-family:var(--mono); font-size:11px; letter-spacing:2px; color:var(--amber); }

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

/* ---------- 留言表单:字数计数 ---------- */
.sig-counter{
  align-self:flex-end; margin-top:-4px; pointer-events:none;
  font-family:var(--mono); font-size:11px; letter-spacing:.8px; color:var(--muted);
  transition:color var(--d-2) var(--ease-out);
}
.sig-counter.near{ color:var(--signal); }

/* ---------- 新交互元素的键盘焦点环 ---------- */
.sr-item:focus-visible, .lightbox .lb-nav:focus-visible{
  outline:none; box-shadow:0 0 0 2px rgba(116,160,124,.55), 0 0 0 4px rgba(116,160,124,.18);
}
.sr-item.on:focus-visible{ box-shadow:inset 3px 0 0 var(--amber), 0 0 0 2px rgba(116,160,124,.55); }

/* ---------- 移动端 · 第一层 (≤ 720px) ---------- */
@media (max-width:720px){
  .lightbox .lb-nav{ width:46px; height:46px; font-size:23px; }
  .lightbox .lb-prev{ left:10px; }
  .lightbox .lb-next{ right:10px; }
}

/* ---------- 移动端 · 第二层 (≤ 560px) ---------- */
@media (max-width:560px){
  .sr-item{ flex-wrap:wrap; gap:4px 10px; padding:12px 14px; }
  .sr-item .sr-ex{ margin-left:0; width:100%; text-align:left; }
  .lightbox{ padding:12px; gap:10px; }
  .lightbox img{ max-width:94vw; max-height:66vh; padding:5px; }
  .lightbox .lb-nav{ width:42px; height:42px; font-size:21px; background:rgba(10,11,14,.82); }
  .lightbox .lb-prev{ left:6px; }
  .lightbox .lb-next{ right:6px; }
  .sig-counter{ font-size:10.5px; }
}

/* ---------- 移动端 · 第三层 (≤ 400px) ---------- */
@media (max-width:400px){
  .lightbox .lb-nav{ width:38px; height:38px; font-size:19px; }
  .lightbox img{ max-height:62vh; }
}

/* ============================================================
   前台交互补强 v3.2 —— Markdown 表格样式（补缺）
   背景:md.js 一直支持表格语法,但全站没有任何 table 样式,
        渲染结果是"失去边线的纯文字"。后台工具栏还摆着「⊞ 表格」
        按钮,点出来的表在实时预览与前台正文里都看不出是张表。
   处理:统一给 .md 语境的表格上边线 + 等宽表头,窄屏横向滚动。
   ============================================================ */
.md-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 18px; }
.md table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.md thead th{
  font-family:var(--mono); font-size:11px; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--muted); background:var(--panel-2); font-weight:400;
  border:1px solid var(--line); padding:9px 12px; text-align:left; white-space:nowrap;
}
.md tbody td{
  border:1px solid var(--line); padding:9px 12px; color:var(--ink);
  vertical-align:top; line-height:1.7;
}
.md tbody tr:nth-child(even) td{ background:rgba(143,163,181,.03); }

@media (max-width:560px){
  .md thead th, .md tbody td{ padding:7px 9px; font-size:12.5px; }
  .md thead th{ letter-spacing:.6px; }
}

/* ============================================================
   留言区增强 v2 —— 点赞 / 回复楼中楼 / 排序
   只叠加,不改基础定义;复用 --r-* / --d-* / --g1..g6 / --ease-* / --amber / --signal。
   移动端三档断点单调收紧,关键触控区高度 ≥44px。
   ============================================================ */

/* ---------- 排序条:三档分段,呼应 HUD 分段控件 ---------- */
.sig-sortbar{
  display:flex; align-items:center; gap:var(--g1);
  margin:0 0 var(--g2); padding:3px;
  width:max-content; max-width:100%;
  background:rgba(143,163,181,.05);
  border:1px solid var(--line);
  border-radius:var(--r-full);
}
.sig-sort{
  appearance:none; border:none; background:transparent; cursor:pointer;
  padding:var(--g1) var(--g2);
  font-family:var(--mono); font-size:12px; letter-spacing:1.5px;
  color:var(--muted);
  border-radius:var(--r-full);
  transition:color var(--d-2) var(--ease-out), background var(--d-2) var(--ease-out), box-shadow var(--d-2) var(--ease-out);
}
.sig-sort:hover{ color:var(--ink); }
.sig-sort.on{
  color:var(--amber);
  background:rgba(9,10,14,.6);
  box-shadow:var(--sh-sm);
}

/* ---------- 操作条:点赞 / 回复 ---------- */
.sig-actions{
  display:flex; align-items:center; gap:var(--g1);
  margin-top:var(--g1); flex-wrap:wrap;
}
.sig-like, .sig-reply{
  display:inline-flex; align-items:center; gap:6px;
  min-height:32px; padding:4px 12px;
  font-family:var(--mono); font-size:12px; letter-spacing:1px;
  color:var(--muted);
  background:rgba(143,163,181,.05);
  border:1px solid var(--line); border-radius:var(--r-full);
  cursor:pointer; user-select:none;
  transition:color var(--d-2) var(--ease-out), border-color var(--d-2) var(--ease-out),
             background var(--d-2) var(--ease-out), transform var(--d-1) var(--ease-out);
}
.sig-like:hover, .sig-reply:hover{ color:var(--ink); border-color:var(--line-strong); }
.sig-like:active, .sig-reply:active{ transform:scale(.96); }
.sig-like .sig-like-mark{ font-size:13px; line-height:1; color:var(--muted); transition:color var(--d-2); }
.sig-like.on{
  color:var(--amber); border-color:rgba(255,183,77,.45);
  background:rgba(255,183,77,.08);
}
.sig-like.on .sig-like-mark, .sig-like.on .sig-like-n{ color:var(--amber); }
.sig-like.busy{ opacity:.6; pointer-events:none; }

/* ---------- 回复楼中楼:缩进 + 左边线 ---------- */
.sig-replies{
  margin:var(--g1) 0 0 calc(var(--g2) + 6px);
  padding-left:var(--g2);
  border-left:2px solid var(--line);
}
.sig-reply{
  margin-top:var(--g1);
  background:rgba(143,163,181,.04);
}
.sig-reply .sig-body{ color:var(--ink); }

/* ---------- 内联回复表单 ---------- */
.sig-reply-form{
  margin-top:var(--g1); padding:var(--g2);
  background:rgba(9,10,14,.5);
  border:1px solid var(--line); border-radius:var(--r-m);
  animation:riseIn .2s var(--ease-out);
}
.sig-reply-form[hidden]{ display:none; }
.sig-rfield{ margin-bottom:var(--g1); }
.sig-rname, .sig-rtext{ width:100%; }
.sig-rtext{ min-height:72px; resize:vertical; }
.sig-rfoot{ display:flex; align-items:center; gap:var(--g1); flex-wrap:wrap; }
.sig-rnote{ font-size:12px; color:var(--muted); }

/* ---------- 移动端 · 第一层 (≤720px) ---------- */
@media (max-width:720px){
  .sig-like, .sig-reply{ min-height:44px; padding:8px 14px; }   /* 触控区 ≥44px */
  .sig-sort{ min-height:44px; padding:9px 16px; }
  .sig-replies{ margin-left:6px; padding-left:var(--g2); }
}

/* ---------- 移动端 · 第二层 (≤560px) ---------- */
@media (max-width:560px){
  .sig-sortbar{ width:100%; justify-content:space-between; }
  .sig-sort{ flex:1 1 0; text-align:center; padding:9px 6px; font-size:11.5px; }
  .sig-replies{ margin-left:2px; padding-left:10px; }
  .sig-reply-form{ padding:12px; }
}

/* ---------- 移动端 · 第三层 (≤400px) ---------- */
@media (max-width:400px){
  .sig-actions{ gap:8px; }
  .sig-like, .sig-reply{ padding:8px 11px; font-size:11.5px; }
  .sig-replies{ border-left-width:1.5px; padding-left:8px; }
  .sig-rfoot .btn{ flex:1 1 auto; }
}

/* ---------- 信号强度指示器 ---------- */
.signal-meter{
  position:fixed;
  bottom:24px;
  right:24px;
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  background:rgba(10,12,18,0.7);
  border:1px solid rgba(100,150,100,0.2);
  border-radius:4px;
  font-family:'JetBrains Mono',monospace;
  font-size:10px;
  color:var(--phos);
  opacity:0.5;
  transition:opacity 0.3s ease;
  z-index:100;
  pointer-events:none;
  backdrop-filter:blur(4px);
}
.signal-label{
  letter-spacing:0.5px;
  opacity:0.7;
}
.signal-bars{
  display:flex;
  align-items:flex-end;
  gap:2px;
  height:12px;
}
.signal-bars span{
  width:3px;
  background:rgba(100,150,100,0.3);
  border-radius:1px;
  transition:background 0.2s ease;
}
.signal-bars span:nth-child(1){ height:20%; }
.signal-bars span:nth-child(2){ height:40%; }
.signal-bars span:nth-child(3){ height:60%; }
.signal-bars span:nth-child(4){ height:80%; }
.signal-bars span:nth-child(5){ height:100%; }
.signal-bars span.active{
  background:var(--phos);
  box-shadow:0 0 4px var(--phos);
}
@media (max-width:720px){
  .signal-meter{
    bottom:16px;
    right:16px;
    padding:5px 8px;
    font-size:9px;
  }
}

/* ---------- 星图隐藏彩蛋 · 深空信号 ---------- */
.signal-discovery{
  position:fixed;
  pointer-events:none;
  z-index:200;
  transform:translate(-50%,-50%);
  animation:signalPulse 2.4s ease-out forwards;
}
.signal-ring{
  position:absolute;
  top:50%; left:50%;
  width:10px; height:10px;
  border:1.5px solid var(--phos);
  border-radius:50%;
  transform:translate(-50%,-50%) scale(1);
  opacity:0.9;
  animation:ringExpand 2.4s ease-out forwards;
}
.signal-ring:nth-child(2){ animation-delay:0.3s; }
.signal-ring:nth-child(3){ animation-delay:0.6s; }
.signal-msg{
  position:absolute;
  top:calc(50% + 30px); left:50%;
  transform:translateX(-50%);
  white-space:nowrap;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  color:var(--phos);
  text-shadow:0 0 8px rgba(120,180,120,.4);
  opacity:0;
  animation:signalFade 2.4s ease-out 0.4s forwards;
  letter-spacing:0.5px;
}
@keyframes ringExpand{
  0%{ width:10px; height:10px; opacity:0.9; }
  100%{ width:120px; height:120px; opacity:0; }
}
@keyframes signalFade{
  0%{ opacity:0; transform:translateX(-50%) translateY(6px); }
  20%{ opacity:1; transform:translateX(-50%) translateY(0); }
  80%{ opacity:1; }
  100%{ opacity:0; transform:translateX(-50%) translateY(-4px); }
}
@keyframes signalPulse{
  0%{ opacity:1; }
  100%{ opacity:0; }
}
.signal-found-dot{
  position:absolute;
  width:4px; height:4px;
  background:var(--phos);
  border-radius:50%;
  box-shadow:0 0 6px var(--phos);
  opacity:0.35;
  pointer-events:none;
  animation:dotBreathe 4s ease-in-out infinite;
}
@keyframes dotBreathe{
  0%,100%{ opacity:0.25; box-shadow:0 0 4px var(--phos); }
  50%{ opacity:0.5; box-shadow:0 0 8px var(--phos); }
}

/* ---------- 环境音效开关 ---------- */
.sound-toggle{
  position:fixed;
  bottom:calc(24px + env(safe-area-inset-bottom, 0px));
  left:24px;
  width:32px; height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(10,12,18,0.7);
  border:1px solid rgba(100,150,100,0.2);
  border-radius:4px;
  color:var(--muted);
  font-size:14px;
  cursor:pointer;
  z-index:100;
  transition:all 0.3s ease;
  backdrop-filter:blur(4px);
  opacity:0.6;
}
.sound-toggle:hover{
  opacity:1;
  border-color:rgba(100,150,100,0.4);
}
.sound-toggle.active{
  color:var(--phos);
  border-color:rgba(100,150,100,0.5);
  box-shadow:0 0 8px rgba(120,180,120,.2);
  opacity:0.8;
}
.sound-toggle .sound-wave{
  display:inline-block;
  width:2px;
  height:8px;
  background:currentColor;
  margin:0 1px;
  vertical-align:middle;
  border-radius:1px;
  opacity:0.4;
}
.sound-toggle.active .sound-wave{
  opacity:1;
  animation:soundWave 1.2s ease-in-out infinite;
}
.sound-toggle.active .sound-wave:nth-child(2){ animation-delay:0.2s; }
.sound-toggle.active .sound-wave:nth-child(3){ animation-delay:0.4s; }
@keyframes soundWave{
  0%,100%{ height:4px; }
  50%{ height:12px; }
}
@media (max-width:720px){
  .sound-toggle{
    bottom:calc(16px + env(safe-area-inset-bottom, 0px));
    left:16px;
    width:28px; height:28px;
    font-size:12px;
  }
}
/* S2 · 触控热区: 视觉尺寸不变, ::before 透明外扩到 44×44
   (苹果 HIG 最小触控目标), 解决 eco-toggle/sound-toggle 点不中的问题。
   热区不可见、不挡布局, 仅扩大可点击范围。 */
.sound-toggle::before{ content:""; position:absolute; inset:-6px; }
.eco-toggle::before{ content:""; position:absolute; inset:-8px; }
@media (max-width:720px){
  .sound-toggle::before{ inset:-8px; }
}
/* ---------- 首访过渡 · 信标辉光 (session 一次) ----------
   替代旧版 CRT 开机横扫: 不糊全屏、不跳亮度, 只用一层极淡品牌色渐变
   (顶部 ice 冷钢蓝天光 + 底部 phos 磷光绿地气) 做 opacity 淡入淡出,
   620ms(--d-4) 内完成, 内容全程可读。 */
.first-veil{
  position:fixed; inset:0; z-index:120; pointer-events:none;
  background:
    radial-gradient(85% 55% at 50% -8%, rgba(147,162,180,.13) 0%, transparent 62%),
    radial-gradient(120% 70% at 50% 112%, rgba(116,160,124,.07) 0%, transparent 58%);
  animation:beaconVeil var(--d-4) var(--ease-out) forwards;
}
@keyframes beaconVeil{
  0%  { opacity:0; }
  16% { opacity:1; }
  100%{ opacity:0; }
}

/* ---------- 应急广播 SOS ---------- */
.emerg-broadcast{
  position:fixed; inset:0; z-index:115;
  display:flex; align-items:center; justify-content:center;
  background:rgba(5,6,9,.72);
  pointer-events:none;
  animation:emergIn .35s ease both;
}
.emerg-inner{
  max-width:min(520px,90vw);
  padding:28px 32px;
  border:1px solid rgba(116,160,124,.45);
  background:rgba(10,12,18,.92);
  box-shadow:0 0 0 1px rgba(116,160,124,.12), 0 24px 60px -30px rgba(0,0,0,.9);
  text-align:left;
}
.emerg-tag{
  font-family:var(--mono); font-size:10px; letter-spacing:.28em;
  color:var(--signal); margin-bottom:14px;
}
.emerg-title{
  font-family:var(--mono); font-size:clamp(16px,3vw,22px);
  color:var(--phos); letter-spacing:.06em; margin-bottom:12px;
  text-shadow:0 0 12px rgba(116,160,124,.35);
}
.emerg-body{ color:var(--ink); font-size:14px; line-height:1.7; margin-bottom:16px; }
.emerg-meta{ font-family:var(--mono); font-size:10px; color:var(--muted); letter-spacing:.12em; }
body.beacon-sos .scanlines{ opacity:.14; mix-blend-mode:normal; }
body.beacon-sos .crt-vignette{ box-shadow:inset 0 0 80px rgba(116,160,124,.18); }
@keyframes emergIn{
  from{ opacity:0; }
  to{ opacity:1; }
}

/* ---------- Konami · 满格信号 ---------- */
body.beacon-max-signal .signal-meter{
  opacity:1 !important;
  border-color:rgba(116,160,124,.55);
  box-shadow:0 0 10px rgba(116,160,124,.25);
}
body.beacon-max-signal .signal-bars span.active{
  background:var(--phos);
  box-shadow:0 0 6px var(--phos);
}
.max-signal-tag{
  position:fixed; top:72px; right:24px; z-index:110;
  font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  color:var(--phos); padding:6px 10px;
  border:1px solid rgba(116,160,124,.4);
  background:rgba(10,12,18,.75);
  pointer-events:none;
  animation:emergIn .3s ease both;
}

/* ---------- 星域视差: 留出缩放边距, 避免露底 ---------- */
#stars{ transform-origin:center center; }

/* ---------- reduced-motion: 新动效一律关掉 ---------- */
@media (prefers-reduced-motion: reduce){
  .first-veil, .emerg-broadcast, .max-signal-tag{ animation:none !important; }
  .first-veil{ display:none !important; }
  #stars{ transform:none !important; transition:none !important; }
}

/* ---------- 诗歌专项 POEMS ---------- */
.poem-daily{
  border:1px solid var(--line);
  border-left:2px solid var(--phos);
  background:linear-gradient(90deg, rgba(116,160,124,.05), transparent 70%);
  padding:22px 26px;
  margin-bottom:28px;
  contain:layout style paint;
}
.poem-daily-tag{
  font-family:var(--mono); font-size:10px; letter-spacing:.24em;
  color:var(--phos-dim); margin-bottom:12px;
}
.poem-daily-title{
  font-family:var(--tech); font-size:18px; color:var(--ink); font-weight:600;
  margin-bottom:10px;
}
.poem-daily-lines{
  font-family:var(--tech); font-size:15px; line-height:1.9;
  color:var(--parchment-dim); white-space:normal;
}
.poem-daily-lines span{ display:block; }
.poem-daily-go{ margin-top:14px; }

.poem-card{ border-left:2px solid var(--phos); }
.poem-card:hover{ border-left-color:var(--parchment); }
.poem-excerpt{
  color:var(--muted); font-size:14px; line-height:1.85;
  font-family:var(--tech);
}

.poem-title{ letter-spacing:.04em; }
.poem-stage{
  margin:8px 0 22px;
  padding:28px 8px 12px;
  border-top:1px dashed var(--line);
  border-bottom:1px dashed var(--line);
}
.poem-text{
  font-family:var(--tech);
  font-size:clamp(17px,2.2vw,21px);
  line-height:2.05;
  color:var(--ink);
  white-space:normal;
}
.poem-text .poem-line{ display:block; }
.poem-text-lg{ font-size:clamp(18px,2.4vw,23px); letter-spacing:.03em; }
.poem-stage.is-vertical{
  writing-mode:vertical-rl;
  text-orientation:mixed;
  min-height:280px;
  max-height:70vh;
  overflow-x:auto;
  padding:18px 12px;
}
.poem-stage.is-vertical .poem-line{ display:inline; }
.poem-stage.is-vertical .poem-line + br{ content:""; }

.poem-note{
  margin:8px 0 22px;
  color:var(--muted);
  font-size:14px;
}
.poem-note blockquote{
  border-left:2px solid var(--amber);
  background:rgba(92,79,58,.06);
  padding:10px 14px;
  margin:0;
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.04em;
}

.page-poems .thought-toolbar{
  display:flex; justify-content:space-between; align-items:center;
  gap:16px; flex-wrap:wrap; margin-bottom:26px;
}

@media (max-width:720px){
  .page-poems .thought-toolbar{ flex-direction:column; align-items:stretch; }
  .poem-daily{ padding:16px 16px; }
  .poem-stage{ padding:20px 4px 8px; }
}
@media (prefers-reduced-motion: reduce){
  .poem-text .poem-line{ opacity:1 !important; transform:none !important; transition:none !important; }
}


/* ---------- 诗歌 · 同调推荐 ---------- */
.poem-related{ margin:8px 0 26px; }
.poem-related .pc-title{ margin-bottom:12px; }
.poem-related-list{ display:flex; flex-wrap:wrap; gap:10px; }
.poem-related-item{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:12px;
  color:var(--ice); background:var(--void-2);
  border:1px solid var(--line); padding:10px 14px;
  cursor:pointer; transition:.2s;
}
.poem-related-item:hover{ border-color:var(--phos); color:var(--phos); }
.poem-related-item .pr-cat{ color:var(--phos-dim); letter-spacing:.08em; }
.poem-related-item .pr-title{ color:var(--ink); }
#prandom{ white-space:nowrap; }


/* ============================================================
   POEM METEOR RAIN · 诗歌流星雨（背景特效 v1）
   诗句取自站内 poems 数据段，以流星形态缓降飘落。
   层级: 内容之下 / 网格(-2)之上；CRT 暗角(57)与噪点(58)自然叠加。
   性能: 并发上限 + animationend 即时回收 + visibilitychange 暂停 +
         prefers-reduced-motion 静态降级。
   ============================================================ */
.meteor-rain{
  position:fixed; inset:0; overflow:hidden;
  pointer-events:none; z-index:-1;
  contain:strict;
}
.meteor-line{
  position:absolute; top:-3em; left:0;
  max-width:62vw; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
  font-family:var(--tech);
  letter-spacing:.06em;
  color:transparent;
  background:linear-gradient(180deg,
    rgba(154,172,196,.68) 0%,
    rgba(186,200,218,.88) 46%,
    rgba(228,236,246,1) 100%);
  -webkit-background-clip:text; background-clip:text;
  filter:drop-shadow(0 0 5px rgba(126,152,190,.40))
         drop-shadow(0 0 16px rgba(118,146,188,.18));
  opacity:0;
  animation-name:meteor-fall;
  animation-timing-function:linear;
  animation-fill-mode:forwards;
  will-change:transform,opacity;
}
.meteor-line.tone-b{
  background:linear-gradient(180deg,
    rgba(146,138,196,.68) 0%,
    rgba(178,172,214,.88) 46%,
    rgba(216,212,240,1) 100%);
  -webkit-background-clip:text; background-clip:text;
  filter:drop-shadow(0 0 5px rgba(130,114,192,.38))
         drop-shadow(0 0 14px rgba(122,106,184,.17));
}
.meteor-line.tone-c{
  background:linear-gradient(180deg,
    rgba(126,168,198,.68) 0%,
    rgba(158,192,214,.88) 46%,
    rgba(200,228,240,1) 100%);
  -webkit-background-clip:text; background-clip:text;
  filter:drop-shadow(0 0 5px rgba(96,156,200,.36))
         drop-shadow(0 0 14px rgba(88,146,192,.16));
}
@keyframes meteor-fall{
  0%  { transform:translate3d(0,-4vh,0); opacity:0; }
  6%  { opacity:.78; }
  86% { opacity:.64; }
  100%{ transform:translate3d(var(--sway,0px),106vh,0); opacity:0; }
}
/* 减少动效偏好: JS 生成静态极弱诗句; 动画元素隐藏(兜底) */
@media (prefers-reduced-motion: reduce){
  .meteor-line:not(.static){ display:none !important; }
}
.meteor-line.static{
  position:absolute; opacity:.10;
  color:#b7c6da; background:none;
  -webkit-background-clip:initial; background-clip:initial;
  filter:none; animation:none;
}
@media (max-width:720px){
  .meteor-line{ max-width:44vw; letter-spacing:.03em; }
}


/* ============================================================
   MESSAGE EMPTY STATE · 留言空状态引导（v2）
   温柔引导文案 + 信标光点，与主题月白/磷光协调。
   ============================================================ */
.sig-empty{
  font-family:var(--mono);
  font-size:13px;
  color:var(--phos-dim);
  text-align:center;
  letter-spacing:.08em;
  padding:26px 12px;
  border:1px dashed var(--line);
  border-radius:var(--r-m);
  background:linear-gradient(180deg, rgba(126,152,190,.06), rgba(126,152,190,0));
  position:relative;
}
.sig-empty::before{
  content:"\25C8";
  display:block;
  font-size:14px;
  color:var(--phos);
  margin-bottom:8px;
  opacity:.72;
}

/* ============================================================
   POEM METEOR RAIN · 低功耗档位（v2）
   body.eco 时去掉多层 drop-shadow 降低合成开销；
   .eco-toggle 为右下角省电开关（fixed 定位，不参与布局溢出）。
   ============================================================ */
body.eco .meteor-line{
  filter:none;
}
.eco-toggle{
  position:fixed; right:12px; bottom:12px; z-index:90;
  font-family:var(--tech); font-size:10px; letter-spacing:.12em;
  color:var(--muted); background:rgba(10,14,22,.55);
  border:1px solid var(--line); border-radius:999px;
  padding:4px 10px; cursor:pointer;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  transition:color .2s, border-color .2s;
}
.eco-toggle:hover{ color:var(--phos); border-color:var(--phos-dim); }


/* ============================================================
   v4.2 · 界面修复与高级毛玻璃（本轮交付）
   A. 右下角浮层垂直排布:消除 to-top / eco-toggle / signal-meter 重叠
   B. 移动端透气化:720/560/400 触控尺寸与留白
   C. 深空信标毛玻璃:@supports 降级,移动端控量保性能
   ============================================================ */

/* ---------- A. 右下角浮层垂直排布 ----------
   原三者全部固定于右下角(right 12~24 / bottom 12~24)互相重叠:
   .to-top(44x44) × .eco-toggle(44x25) × .signal-meter(71x32)。
   改为同列垂直堆叠:to-top(下) -> eco-toggle(中) -> signal-meter(上)。
   S1 · bottom 一律叠加 env(safe-area-inset-bottom): 配合各页 viewport-fit=cover,
   全面屏 iPhone 底部横条不再遮挡悬浮控件; 桌面端该 env 计 0, 无副作用。 */
.to-top{ right:22px; bottom:calc(22px + env(safe-area-inset-bottom, 0px)); }
.eco-toggle{ right:22px; bottom:calc(76px + env(safe-area-inset-bottom, 0px)); }
.signal-meter{ right:22px; bottom:calc(118px + env(safe-area-inset-bottom, 0px)); }
@media (max-width:720px){
  .to-top{ right:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); }
  .eco-toggle{ right:16px; bottom:calc(68px + env(safe-area-inset-bottom, 0px)); }
  .signal-meter{ right:16px; bottom:calc(110px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- B. 移动端透气化 ---------- */
@media (max-width:720px){
  /* 首页指标胶囊:两列栅格,不再四枚挤一行 */
  .hero-metrics{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .metric{ min-width:0; padding:14px 12px; }
  /* 筛选 chips:触控高度 44px,间距放宽 */
  .filterbar{ gap:10px; }
  .filterbar .chip{ min-height:44px; padding:10px 16px; display:inline-flex; align-items:center; justify-content:center; font-size:12.5px; }
  /* 日志工具栏:搜索框加高,便于触控 */
  .journal-toolbar{ gap:12px; }
  .jsearch .input, .jsearch input{ min-height:44px; }
  /* 关于页长文:左对齐 + 宽松行高,缓解两端对齐挤压感 */
  .bio-body{ text-align:left; font-size:15px; line-height:2; }
}
@media (max-width:400px){
  /* 日志摘要与标题:放宽行高字号,消除窄屏文字堆叠 */
  .jexcerpt{ line-height:1.8; font-size:13.5px; }
  .jtitle{ font-size:19px; line-height:1.35; }
}

/* ---------- C. 深空信标 · 毛玻璃高级半透 ----------
   月白/磷光玻璃:半透明渐变底 + backdrop blur + 细边框高光 + 柔和辉光。
   降级策略:@supports 不满足时退化为纯半透明深底,文字对比度优先;
   移动端仅核心面板保留 blur,列表类卡片只半透明,控制合成开销。 */
:root{
  --glass-tint: linear-gradient(165deg, rgba(152,170,196,.10), rgba(15,19,26,.40));
  --glass-tint-solid: rgba(16,19,26,.90);
  --glass-blur: 16px;
  --glass-blur-m: 9px;
  --glass-hl: inset 0 1px 0 rgba(255,255,255,.06);
  --glass-glow: 0 1px 0 rgba(0,0,0,.35), 0 10px 32px -18px rgba(0,0,0,.55);
}
/* 降级底色(全部目标元素):接近原 --panel 的不透明深色,保证可读 */
.hero-main, .dm, .pn-card, .suggest-card, .device, .journal-card, .thought,
.beacon, .sn-card, .poem-card, .metric, .bio-facts, .manifesto, .sig-item,
.sig-reply-form, .search-box, .lightbox{
  background:var(--glass-tint-solid);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .hero-main, .dm, .pn-card, .suggest-card, .device, .journal-card, .thought,
  .beacon, .sn-card, .poem-card, .metric, .bio-facts, .manifesto, .sig-item,
  .sig-reply-form, .search-box, .lightbox{
    background:var(--glass-tint);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
    box-shadow: var(--glass-hl), var(--glass-glow);
  }
  /* 移动端:核心面板保留小半径 blur;列表类卡片仅半透明,保滚动性能 */
  @media (max-width:720px){
    .hero-main, .metric, .sig-reply-form, .search-box, .lightbox{
      -webkit-backdrop-filter: blur(var(--glass-blur-m)) saturate(1.15);
      backdrop-filter: blur(var(--glass-blur-m)) saturate(1.15);
    }
    .dm, .journal-card, .thought, .beacon, .sn-card, .poem-card,
    .pn-card, .suggest-card, .device, .sig-item, .bio-facts, .manifesto{
      -webkit-backdrop-filter:none; backdrop-filter:none;
      background:var(--glass-tint-solid);
    }
  }
}


/* ============================================================
   v4.3 · 栏目级玻璃梯度（深空信标玻璃语言 · 分层精致化）
   四档: A 常驻悬浮层 / B hero 主标题 / C 卡片磁贴 / D 面板聚焦
   每档独立: 透明度 + blur + 边框高光 + 内外阴影, 消除"全站一个透明度"的塑料感。
   降级: 不支持 backdrop-filter 时按档位回退半透明深底; 移动端控量保性能。
   ============================================================ */
:root{
  /* A · 常驻悬浮层: 高不透明 + 适中 blur, 任何内容下可读 */
  --glass-a-bg: rgba(9,11,16,.82);
  --glass-a-blur: 12px;
  --glass-a-edge: 1px solid rgba(176,192,214,.14);
  --glass-a-hl: inset 0 1px 0 rgba(255,255,255,.075);
  --glass-a-shadow: 0 1px 0 rgba(0,0,0,.4), 0 10px 30px -18px rgba(0,0,0,.6);
  /* B · hero 主标题区: 半通透, 保留背景流星雨穿透 */
  --glass-b-bg: linear-gradient(168deg, rgba(152,170,196,.09), rgba(13,17,24,.26));
  --glass-b-blur: 8px;
  --glass-b-edge: 1px solid rgba(176,192,214,.10);
  --glass-b-hl: inset 0 1px 0 rgba(255,255,255,.05);
  --glass-b-shadow: 0 1px 0 rgba(0,0,0,.22), 0 8px 26px -20px rgba(0,0,0,.5);
  /* C · 卡片/磁贴: 轻度半透明 + 细腻 blur, hover 轻微提亮 */
  --glass-c-bg: linear-gradient(168deg, rgba(146,164,190,.075), rgba(15,19,26,.52));
  --glass-c-blur: 10px;
  --glass-c-edge: 1px solid rgba(170,186,208,.11);
  --glass-c-hl: inset 0 1px 0 rgba(255,255,255,.055);
  --glass-c-shadow: 0 1px 0 rgba(0,0,0,.32), 0 8px 24px -16px rgba(0,0,0,.5);
  /* D · 面板类: 更通透玻璃, 突出内容聚焦 */
  --glass-d-bg: linear-gradient(168deg, rgba(160,178,204,.08), rgba(11,15,21,.34));
  --glass-d-blur: 14px;
  --glass-d-edge: 1px solid rgba(180,196,218,.13);
  --glass-d-hl: inset 0 1px 0 rgba(255,255,255,.065);
  --glass-d-shadow: 0 1px 0 rgba(0,0,0,.3), 0 12px 32px -20px rgba(0,0,0,.55);
}

/* ---------- 降级底色(无 backdrop-filter): 按档位回退, 文字对比优先 ---------- */
.hud, .eco-toggle, .sound-toggle, .to-top{ background:var(--glass-a-bg); }
.hero-main{ background:rgba(13,17,24,.58); }
.dm, .pn-card, .suggest-card, .device, .journal-card, .poem-card,
.thought, .beacon, .sn-card{ background:rgba(15,19,26,.92); }
.sig-item{ background:rgba(16,20,28,.88); }
.metric, .bio-facts, .manifesto, .sig-reply-form, .search-box, .lightbox{ background:rgba(13,17,24,.84); }

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  /* A · 常驻悬浮层 */
  .hud{
    background:var(--glass-a-bg);
    -webkit-backdrop-filter: blur(var(--glass-a-blur)) saturate(1.3);
    backdrop-filter: blur(var(--glass-a-blur)) saturate(1.3);
    border-bottom-color: rgba(176,192,214,.14);
    box-shadow: var(--glass-a-hl), var(--glass-a-shadow);
  }
  .eco-toggle, .sound-toggle, .to-top{
    background:var(--glass-a-bg);
    -webkit-backdrop-filter: blur(var(--glass-a-blur)) saturate(1.2);
    backdrop-filter: blur(var(--glass-a-blur)) saturate(1.2);
    box-shadow: var(--glass-a-hl), var(--glass-a-shadow);
  }
  /* B · hero 主标题区: 低 blur 高通透, 流星雨可见 */
  .hero-main{
    background:var(--glass-b-bg);
    -webkit-backdrop-filter: blur(var(--glass-b-blur)) saturate(1.15);
    backdrop-filter: blur(var(--glass-b-blur)) saturate(1.15);
    border:var(--glass-b-edge);
    box-shadow: var(--glass-b-hl), var(--glass-b-shadow);
  }
  /* C · 卡片/磁贴 */
  .dm, .pn-card, .suggest-card, .device, .journal-card, .poem-card,
  .thought, .beacon, .sn-card{
    background:var(--glass-c-bg);
    -webkit-backdrop-filter: blur(var(--glass-c-blur)) saturate(1.15);
    backdrop-filter: blur(var(--glass-c-blur)) saturate(1.15);
    box-shadow: var(--glass-c-hl), var(--glass-c-shadow);
  }
  /* C · hover 微调: 轻微提亮 + 原悬浮动效保留 */
  .dm:hover, .pn-card:hover, .suggest-card:hover, .device:hover,
  .journal-card:hover, .poem-card:hover, .thought:hover, .beacon:hover, .sn-card:hover{
    background:linear-gradient(168deg, rgba(150,168,194,.13), rgba(17,21,29,.62));
  }
  /* C · 留言条: 小字号正文, 单独提高不透明度保证可读 */
  .sig-item{
    background:linear-gradient(168deg, rgba(150,168,194,.09), rgba(16,20,28,.74));
    -webkit-backdrop-filter: blur(var(--glass-c-blur)) saturate(1.15);
    backdrop-filter: blur(var(--glass-c-blur)) saturate(1.15);
    box-shadow: var(--glass-c-hl), var(--glass-c-shadow);
  }
  /* D · 面板类: 更通透 + 更高 blur, 内容聚焦 */
  .metric, .bio-facts, .sig-reply-form, .search-box, .lightbox{
    background:var(--glass-d-bg);
    -webkit-backdrop-filter: blur(var(--glass-d-blur)) saturate(1.2);
    backdrop-filter: blur(var(--glass-d-blur)) saturate(1.2);
    box-shadow: var(--glass-d-hl), var(--glass-d-shadow);
  }
  /* D · 宣言区: 多行小字, 介于 C/D 之间, 单独保可读 */
  .manifesto{
    background:linear-gradient(168deg, rgba(150,168,194,.07), rgba(9,12,17,.64));
    -webkit-backdrop-filter: blur(12px) saturate(1.15);
    backdrop-filter: blur(12px) saturate(1.15);
    box-shadow: var(--glass-c-hl), var(--glass-c-shadow);
  }

  /* ---------- 移动端(≤720px): 悬浮层保持, hero 低 blur, 卡片仅半透明, 面板降 blur ---------- */
  @media (max-width:720px){
    .hud, .eco-toggle, .sound-toggle, .to-top{
      -webkit-backdrop-filter: blur(10px) saturate(1.25);
      backdrop-filter: blur(10px) saturate(1.25);
    }
    .hero-main{
      -webkit-backdrop-filter: blur(6px) saturate(1.1);
      backdrop-filter: blur(6px) saturate(1.1);
      background:linear-gradient(168deg, rgba(152,170,196,.10), rgba(13,17,24,.40));
    }
    .dm, .pn-card, .suggest-card, .device, .journal-card, .poem-card,
    .thought, .beacon, .sn-card, .sig-item{
      -webkit-backdrop-filter:none; backdrop-filter:none;
      background:rgba(15,19,26,.90);
    }
    .metric, .bio-facts, .manifesto, .sig-reply-form, .search-box, .lightbox{
      -webkit-backdrop-filter: blur(8px) saturate(1.15);
      backdrop-filter: blur(8px) saturate(1.15);
      background:var(--glass-d-bg);
    }
  }
}

/* ============================================================
   v4.4 · 移动端 hero 首屏分区（终端 / 引言拆分 + 标题大气化）
   目标: 720/560/400 下 hero 上下分明、留白充分。
   手法: ① hero-main 去整卡 → 标题直接浮于流星雨, 更大气;
         ② hero-sub 引言独立成半透明玻璃卡(借 --glass-b 语言);
         ③ relay 终端保持操作台气质, 限高 + 内部滚动;
         ④ 各分区间距按 F 数列拉开, 首屏节奏收紧。
   ============================================================ */

/* ---------- ① hero-main 去整卡: 标题浮于背景, 保留流星雨穿透 ---------- */
@media (max-width:720px){
  .hero-rail{ grid-template-columns:1fr; gap:18px; }  /* 修正 v3.2 双列覆盖 ≤980 单列 */
  .relay{ width:100%; }
  .hero-main{
    background:transparent;
    border:none;
    box-shadow:none;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    padding-right:0;
  }
  .hero-main::after{ display:none; }   /* 去掉桌面垂直划痕线, 移动端不再需要 */
  .hero-main, .hero-title{ text-align:center; }
  /* 标题大气化: 字距放宽、行高舒展、层级分明 */
  .hero-title{ line-height:1.3; }
  .hero-title .en{ letter-spacing:.16em; line-height:1.4; margin-bottom:10px; }
  .hero-title .zh{ letter-spacing:.12em; line-height:1.2; font-size:clamp(2.5rem, 6.8vw, 4.6rem); }
  .hero-title .glow-line{ letter-spacing:.16em; line-height:1.9; margin-top:14px; }
}

/* ---------- ② 引言独立玻璃卡 ---------- */
@media (max-width:720px){
  .hero-sub{
    margin:var(--g3) auto 0;
    max-width:min(100%, 560px);
    background:var(--glass-b-bg);
    -webkit-backdrop-filter:blur(6px) saturate(1.15);
    backdrop-filter:blur(6px) saturate(1.15);
    border:var(--glass-b-edge);
    border-radius:var(--r-m);
    box-shadow:var(--glass-b-hl), var(--glass-b-shadow);
    padding:16px 20px;
    font-size:14px;
    line-height:1.9;
  }
}

/* 模块页移动端: 引言玻璃卡与内容区实底叠在一起会出现"框中框"的双框感。
   实底已经挡住装饰层, 玻璃卡就不再需要自己的半透明底 ——
   改为只留描边, 底色透明, 读起来是"一段被框住的说明"而非第二层玻璃。
   特异性 0,3,1 > 通用 .hero-sub 的 0,1,0。 */
@media (max-width:720px){
  body:not([data-page="index"]) .hero .hero-sub{
    background:transparent;
    -webkit-backdrop-filter:none; backdrop-filter:none;
    border-color:rgba(143,163,181,.16);
    box-shadow:none;
    padding:14px 18px;
  }
  [data-theme="day"] body:not([data-page="index"]) .hero .hero-sub{
    border-color:rgba(41,64,86,.12);
  }
}

/* ---------- ③ 终端: 与引言分层, 限高 + 内部滚动 ---------- */
@media (max-width:720px){
  .relay{ margin-top:clamp(24px, 4vh, 40px); }
  .relay-panel{ display:flex; flex-direction:column; }
  .relay-head{ flex:none; }
  #boot{
    min-height:clamp(120px, 18vh, 160px);
    max-height:clamp(150px, 24vh, 210px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding-right:4px;
  }
  /* ④ 指标与上方内容过渡留白, 首屏节奏 */
  .hero-metrics{ margin-top:clamp(26px, 4.5vh, 42px); }
  .hero{ min-height:auto; }
}

/* ---------- 560 / 400 档微调: 防挤压, 保呼吸 ---------- */
@media (max-width:560px){
  .hero-sub{ padding:14px 16px; font-size:13.5px; line-height:1.85; }
  .hero-title .zh{ letter-spacing:.1em; font-size:clamp(2rem, 10vw, 2.7rem); }
  .hero-title .glow-line{ letter-spacing:.14em; }
  #boot{ min-height:130px; max-height:clamp(140px, 22vh, 190px); }
}
@media (max-width:400px){
  .hero-sub{ padding:12px 14px; font-size:13px; line-height:1.8; }
  .hero-title .en{ letter-spacing:.12em; }
  .hero-title .zh{ font-size:clamp(1.8rem, 9.5vw, 2.4rem); }
  .hero-title .glow-line{ letter-spacing:.12em; margin-top:10px; }
  #boot{ min-height:110px; max-height:150px; }
}

/* ============================================================
   DELIVERY UPGRADE v4.5 · 长文阅读增强
   进度条层级校准 / 目录玻璃化 + 移动端抽屉 / 留言回复空态
   ============================================================ */

/* ---------- 进度条:层级校准(高于 HUD 50, 低于浮层按钮 60+), 磷光微光 ---------- */
.read-progress{
  z-index:55;
  background:linear-gradient(90deg, var(--ice), var(--phos), var(--amber));
  box-shadow:0 0 6px rgba(176,214,196,.35), 0 0 14px rgba(116,160,124,.22);
}

/* ---------- 桌面目录:玻璃卡化(遵循 --glass-* 语言) ---------- */
@media (min-width:1101px){
  .post-toc{
    background:var(--glass-tint);
    -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.2);
    backdrop-filter:blur(var(--glass-blur)) saturate(1.2);
    border:var(--glass-a-edge);
    border-radius:var(--r-m);
    padding:18px 16px;
    box-shadow:var(--glass-a-hl), var(--glass-a-shadow);
  }
  .post-toc .toc-title{ margin-bottom:14px; }
}
/* 降级:无 backdrop-filter 时用实体底色保可读 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  @media (min-width:1101px){
    .post-toc{ background:var(--glass-tint-solid); }
  }
}

/* ---------- 移动端目录抽屉(≤1100):左下开合, 避开右下浮层三按钮 ---------- */
@media (max-width:1100px){
  .post-toc{
    position:fixed !important;
    left:16px; bottom:84px;
    /* top 显式计算:底部恒距 84px,避免 top:auto 退化静态位置随滚动漂移 */
    top:calc(100vh - 84px - min(56vh, calc(100vh - 180px))) !important;
    height:min(56vh, calc(100vh - 180px));
    display:block !important;   /* 覆盖 style.css ≤1100 的 display:none !important */
    width:min(300px, calc(100vw - 32px));
    max-width:min(300px, calc(100vw - 32px));
    max-height:min(56vh, calc(100vh - 180px));
    overflow-y:auto;
    z-index:84;
    margin:0;
    border:var(--glass-a-edge);
    border-radius:var(--r-m);
    background:var(--glass-tint-solid);
    padding:16px 14px;
    box-shadow:var(--glass-a-hl), var(--glass-a-shadow);
    opacity:0; visibility:hidden;
    transform:translateY(10px) scale(.98);
    transform-origin:left bottom;
    pointer-events:none;
    transition:opacity var(--d-2) var(--ease-out), transform var(--d-2) var(--ease-enter), visibility var(--d-2);
    -webkit-overflow-scrolling:touch;
  }
  .post-toc.open{
    opacity:1; visibility:visible;
    transform:none;
    pointer-events:auto;
  }
  /* 触发胶囊:左下角, 与右下三按钮零重叠; 触控区 ≥44px */
  .toc-toggle{
    position:fixed;
    left:16px; bottom:84px;
    z-index:85;
    display:inline-flex;
    align-items:center; gap:7px;
    min-height:44px;
    padding:10px 16px;
    font-family:var(--tech);
    font-size:11px;
    letter-spacing:.14em;
    color:var(--ice);
    background:var(--glass-a-bg);
    -webkit-backdrop-filter:blur(var(--glass-a-blur)) saturate(1.2);
    backdrop-filter:blur(var(--glass-a-blur)) saturate(1.2);
    border:var(--glass-a-edge);
    border-radius:var(--r-full);
    box-shadow:var(--glass-a-hl), var(--glass-a-shadow);
    cursor:pointer;
    transition:color var(--d-1), border-color var(--d-2), transform var(--d-1) var(--ease-out);
  }
  .toc-toggle:hover{ color:var(--amber); border-color:rgba(176,192,214,.28); }
  .toc-toggle:active{ transform:scale(.96); }
  .toc-toggle .tt-dot{
    width:6px; height:6px; border-radius:50%;
    background:var(--phos);
    box-shadow:0 0 8px rgba(116,160,124,.8);
  }
  .toc-toggle.open{ color:var(--amber); }
  .toc-toggle.open .tt-dot{ background:var(--amber); box-shadow:0 0 8px rgba(212,168,92,.8); }
  /* 触屏设备抽屉内目录项加大触控区 */
  .post-toc .toc-list a{ padding:9px 10px; min-height:38px; }
}
@media (max-width:560px){
  .post-toc{ left:12px; bottom:80px; top:calc(100vh - 80px - min(52vh, calc(100vh - 160px))) !important; width:min(300px, calc(100vw - 24px)); max-width:min(300px, calc(100vw - 24px)); height:min(52vh, calc(100vh - 160px)); max-height:52vh; padding:14px 12px; }
  .toc-toggle{ left:12px; bottom:80px; padding:10px 14px; }
}

/* ---------- 留言 · 无回复空态引导 ---------- */
.sig-noreply{
  margin:6px 0 2px;
  padding-left:18px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--muted);
  opacity:.75;
}

/* ============================================================
   v4 · 圆角窗口 / 色相谱 / 触感动效
   基础层说的是"失修航站"的铁皮箱语言;这一层把它换成圆角玻璃窗 ——
   统一半径、按模块发色相、把反馈改成能感觉到的物理手感。
   ============================================================ */

/* ---------- 1. 圆角收编:还没被前几轮改到的"窗" ---------- */
.msg.bot .bubble{ border-radius:var(--r-m); }
.msg.user .bubble{ border-radius:var(--r-m) var(--r-m) var(--r-s) var(--r-m); }
.msg-links a{ border-radius:var(--r-full); }
.guide-input input{ border-radius:var(--r-full); padding-left:16px; }
.guide-input button{ border-radius:var(--r-full); }
.device .ico{ border-radius:var(--r-s); }
.news-list{ border-radius:var(--r-m); overflow:hidden; }
.dm-tag, .jcat, .jtag, .news-item .nt, .sr-item mark{ border-radius:var(--r-full); }
.jcat, .jtag{ padding:2px 11px; }
.post-content.md pre{ border-radius:var(--r-s); }
.post-content.md :not(pre) > code{ border-radius:var(--r-xs); }
.search-box .input{ border-radius:var(--r-full); padding-left:20px; }
.signal-meter, .sound-toggle, .emerg-broadcast{ border-radius:var(--r-m); }
.signal-bars span{ border-radius:2px; }
.stamp{ border-radius:var(--r-s); }
.drawer-close{ border-radius:var(--r-s); }
:-webkit-scrollbar-thumb{ border-radius:var(--r-full); }
.relay-panel, .guide-panel{ border-radius:var(--radius-lg); }

/* 左边条:硬边贴在圆角盒上会显脏,改成内侧一根发光的圆头色条 */
.thought{ border-left-color:transparent; position:relative; }
.thought::before{
  content:""; position:absolute; left:0; top:16px; bottom:16px; width:2px;
  border-radius:2px; background:var(--h, var(--amber));
  box-shadow:0 0 10px color-mix(in oklab, var(--h, var(--amber)) 55%, transparent);
  transition:top var(--d-3) var(--ease-out), bottom var(--d-3) var(--ease-out);
}
.thought:hover::before{ top:8px; bottom:8px; }

/* ---------- 2. 色相谱:模块身份色 ----------
   导航、总览卡、指标、诗歌/思考、AI 导引各自认领一个色相;
   颜色只用于"身份 + 反馈",不做装饰性大色块。 */
/* v5.3: 改用 a:nth-of-type —— nav 里插了 .nav-hint(<p>), nth-child 会
   把提示条算成第 1 个子元素, 导致 7 个链接的身份色整体错一位
   (首页会染成项目色)。 */
.nav a:nth-of-type(1){ --h:var(--ice-2); }
.nav a:nth-of-type(2){ --h:var(--spec-proj); }
.nav a:nth-of-type(3){ --h:var(--spec-log); }
.nav a:nth-of-type(4){ --h:var(--spec-thought); }
.nav a:nth-of-type(5){ --h:var(--spec-poem); }
.nav a:nth-of-type(6){ --h:var(--spec-ai); }
.nav a:nth-of-type(7){ --h:var(--spec-about); }
.nav a .idx{ color:color-mix(in oklab, var(--h, var(--amber-dim)) 55%, transparent); }
.nav a::after{ background:var(--h, var(--amber)); }
.nav a:hover{
  color:var(--ink);
  background:color-mix(in oklab, var(--h, var(--ice)) 10%, transparent);
  border-color:color-mix(in oklab, var(--h, var(--ice)) 26%, transparent);
}
.nav a:hover .idx{ color:var(--h, var(--amber)); }
.nav a.active{
  color:color-mix(in oklab, var(--h, var(--ice)) 62%, var(--ink));
  background:color-mix(in oklab, var(--h, var(--ice)) 13%, transparent);
  border-color:color-mix(in oklab, var(--h, var(--ice)) 32%, transparent);
  box-shadow:inset 0 -2px 0 var(--h, var(--amber));
}
.nav a.active .idx{ color:var(--h, var(--amber)); }

/* 首页总览卡:六张卡 = 六个模块色 */
.dm:nth-child(1){ --h:var(--spec-proj); }
.dm:nth-child(2){ --h:var(--spec-log); }
.dm:nth-child(3){ --h:var(--spec-thought); }
.dm:nth-child(4){ --h:var(--spec-poem); }
.dm:nth-child(5){ --h:var(--spec-ai); }
.dm:nth-child(6){ --h:var(--spec-about); }
.dm:hover{
  border-color:color-mix(in oklab, var(--h) 34%, transparent);
  box-shadow:var(--sh-md), 0 0 22px -6px color-mix(in oklab, var(--h) 26%, transparent);
}
.dm:hover::after{ background:linear-gradient(90deg, transparent, var(--h), transparent); }
.dm:hover .dm-led{ background:var(--h); box-shadow:0 0 10px color-mix(in oklab, var(--h) 65%, transparent); }
.dm:hover .dm-title{ color:color-mix(in oklab, var(--h) 42%, var(--ink)); }
.dm-tag{ color:color-mix(in oklab, var(--h, var(--amber-dim)) 74%, var(--muted)); }
.dm-link{ color:color-mix(in oklab, var(--h, var(--ice)) 60%, var(--muted)); }

/* 指标条:数字按色相点亮 */
.metric:nth-child(4n+1){ --h:var(--spec-proj); }
.metric:nth-child(4n+2){ --h:var(--spec-log); }
.metric:nth-child(4n+3){ --h:var(--spec-thought); }
.metric:nth-child(4n){ --h:var(--spec-poem); }
.metric:hover .num{ color:color-mix(in oklab, var(--h) 66%, var(--ink)); text-shadow:0 0 16px color-mix(in oklab, var(--h) 30%, transparent); }
.metric:hover{ border-color:color-mix(in oklab, var(--h) 32%, transparent); }

/* 列表卡片的悬停色 */
.journal-card:nth-of-type(3n+1){ --h:var(--spec-log); }
.journal-card:nth-of-type(3n+2){ --h:var(--spec-proj); }
.journal-card:nth-of-type(3n){ --h:var(--spec-thought); }
.journal-card:hover{
  border-color:color-mix(in oklab, var(--h, var(--ice)) 32%, transparent);
  box-shadow:var(--sh-md), 0 0 20px -8px color-mix(in oklab, var(--h, var(--ice)) 24%, transparent);
}
.poem-card:nth-of-type(4n+1){ border-left-color:color-mix(in oklab, var(--spec-poem) 62%, transparent); }
.poem-card:nth-of-type(4n+2){ border-left-color:color-mix(in oklab, var(--spec-ai) 62%, transparent); }
.poem-card:nth-of-type(4n+3){ border-left-color:color-mix(in oklab, var(--spec-log) 62%, transparent); }
.poem-card:nth-of-type(4n){ border-left-color:color-mix(in oklab, var(--spec-thought) 62%, transparent); }
.thought:nth-of-type(2n+1){ --h:var(--spec-thought); }
.thought:nth-of-type(2n){ --h:var(--spec-ai); }

/* 快捷提问 / 建议卡 */
.beacon:hover, .suggest-card:hover{
  color:color-mix(in oklab, var(--spec-ai) 58%, var(--parchment));
  border-color:color-mix(in oklab, var(--spec-ai) 36%, transparent);
}

/* AI 导引:核心球与状态徽标用赤金 */
.guide-core .orb{ background:var(--spec-ai); box-shadow:0 0 10px color-mix(in oklab, var(--spec-ai) 60%, transparent); }
.guide-head .relay-title.online{
  color:var(--spec-ai);
  border-color:color-mix(in oklab, var(--spec-ai) 40%, transparent);
  background:color-mix(in oklab, var(--spec-ai) 12%, transparent);
  animation:badge-breathe 3.2s ease-in-out infinite;
}
@keyframes badge-breathe{ 0%,100%{ opacity:.82; } 50%{ opacity:1; } }
.msg.bot .bubble{ border-left-color:color-mix(in oklab, var(--spec-ai) 42%, var(--line)); }

.sec-no{ color:color-mix(in oklab, var(--h, var(--amber-dim)) 62%, var(--muted)); }
.block-head{ transition:border-top-color var(--d-3); }
.block:hover > .block-head{ border-top-color:color-mix(in oklab, var(--h, var(--ice)) 26%, transparent); }

/* 背景:三层极淡星云 —— 仍然读作"黑",但不再是同一块死黑 */
.space-bg{
  background:
    radial-gradient(1200px 760px at 84% -10%, rgba(110,168,224,.085), transparent 62%),
    radial-gradient(1000px 700px at 6% 106%, rgba(169,143,219,.075), transparent 60%),
    radial-gradient(760px 520px at 58% 52%, rgba(88,194,171,.035), transparent 66%),
    var(--void);
}

/* ---------- 3. 触感:指针光斑 / 按压 / 焦点 ---------- */
.dm, .journal-card, .poem-card, .beacon, .suggest-card, .device, .pn-card, .thought{
  --mx:50%; --my:50%;
}
.dm:hover, .journal-card:hover, .poem-card:hover, .beacon:hover,
.suggest-card:hover, .device:hover, .pn-card:hover, .thought:hover{
  background-image:radial-gradient(
    260px 190px at var(--mx) var(--my),
    color-mix(in oklab, var(--h, var(--ice)) 11%, transparent),
    transparent 70%
  );
}
.dm:active, .journal-card:active, .beacon:active, .suggest-card:active,
.poem-card:active, .pn-card:active{
  transform:translateY(-1px) scale(.991);
  transition-duration:var(--d-1);
}
a:focus-visible, button:focus-visible, [role="button"]:focus-visible{
  outline:2px solid color-mix(in oklab, var(--h, var(--phos)) 70%, transparent);
  outline-offset:3px;
}

/* 跨页切换:整页快照做淡入+微推,像在同一块屏幕上换窗 */
@view-transition{ navigation:auto; }
::view-transition-old(root){ animation:vt-out .24s var(--ease-out) both; }
::view-transition-new(root){ animation:vt-in .46s var(--ease-enter) both; }
@keyframes vt-out{ to{ opacity:0; transform:scale(1.015); } }
@keyframes vt-in{ from{ opacity:0; transform:translateY(12px) scale(.994); } }

html{ scroll-behavior:smooth; scroll-padding-top:96px; }
h1, h2, h3, .block-title, .dm-title{ text-wrap:balance; }
.mono, .hud-clock, .sec-no, .dm-tag, .metric .num{ font-variant-numeric:tabular-nums; }

/* ---------- 4. 免责声明:页脚入口 + 玻璃纸弹窗 ---------- */
.legal-link{
  font-family:var(--mono); font-size:11px; letter-spacing:2px; color:var(--muted);
  border-bottom:1px dashed transparent; transition:color var(--d-2), border-color var(--d-2);
}
.legal-link:hover{ color:var(--parchment); border-bottom-color:color-mix(in oklab, var(--parchment) 45%, transparent); }
.legal-overlay{
  position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:var(--gutter);
  background:rgba(6,7,10,.74);
  -webkit-backdrop-filter:blur(10px) saturate(1.25); backdrop-filter:blur(10px) saturate(1.25);
  opacity:0; visibility:hidden;
  transition:opacity var(--d-2) var(--ease-out), visibility var(--d-2);
}
.legal-overlay.open{ opacity:1; visibility:visible; }
.legal-sheet{
  width:min(680px, 100%); max-height:min(78vh, 760px); overflow:auto; overscroll-behavior:contain;
  background:linear-gradient(180deg, var(--panel), var(--void-2));
  border:1px solid var(--line-strong); border-radius:var(--radius-lg);
  box-shadow:var(--sh-lg), 0 0 0 1px rgba(110,168,224,.07);
  transform:translateY(16px) scale(.985); opacity:0;
  transition:transform var(--d-3) var(--ease-enter), opacity var(--d-3) var(--ease-out);
}
.legal-overlay.open .legal-sheet{ transform:none; opacity:1; }
.legal-head{
  position:sticky; top:0; z-index:1; display:flex; justify-content:space-between; align-items:center;
  padding:16px 20px; background:var(--void-2); border-bottom:1px solid var(--line);
}
.legal-title{ font-family:var(--mono); font-size:11px; letter-spacing:3px; color:var(--ice); }
.legal-close{
  width:30px; height:30px; flex:none; display:grid; place-items:center;
  border:1px solid var(--line); background:none; color:var(--muted);
  border-radius:var(--r-full); cursor:pointer; transition:color var(--d-2), border-color var(--d-2), transform var(--d-2) var(--ease-spring);
}
.legal-close:hover{ color:var(--ink); border-color:var(--line-strong); transform:rotate(90deg); }
.legal-body{ padding:18px 20px 4px; font-size:13.5px; line-height:1.85; color:var(--ink); white-space:pre-line; }
.legal-foot{ padding:14px 20px 18px; }
.legal-meta{ font-family:var(--mono); font-size:10px; letter-spacing:2px; color:var(--muted); opacity:.7; }
body.legal-open{ overflow:hidden; }
@media (max-width:560px){
  .legal-sheet{ max-height:88vh; }
  .legal-body{ font-size:13px; padding:16px 16px 4px; }
}

/* AI 导引:回答来源提示(点击打开免责声明) */
.ai-notice{
  display:inline-flex; align-items:center; gap:8px; margin:12px 0 0; cursor:pointer;
  font-family:var(--mono); font-size:10.5px; letter-spacing:1.6px; color:var(--muted);
  transition:color var(--d-2);
}
.ai-notice:hover{ color:var(--parchment); }
.ai-notice::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--spec-ai);
  box-shadow:0 0 8px color-mix(in oklab, var(--spec-ai) 60%, transparent);
}

/* ---------- 5. 页面身份色 ----------
   main.js 按当前路径给 body 打 data-page,页内所有"未自配色"的强调元素
   随之换成该模块的色相 —— 导航、卡片、指标仍各自保留自己的色。 */
body[data-page="index"]{ --h:var(--ice-2); }
body[data-page="projects"]{ --h:var(--spec-proj); }
body[data-page="journal"]{ --h:var(--spec-log); }
body[data-page="philosophy"]{ --h:var(--spec-thought); }
body[data-page="poems"]{ --h:var(--spec-poem); }
body[data-page="guide"]{ --h:var(--spec-ai); }
body[data-page="about"]{ --h:var(--spec-about); }
.hud-kicker{ color:color-mix(in oklab, var(--h, var(--amber)) 66%, var(--muted)); }
.block-title .en{ color:color-mix(in oklab, var(--h, var(--muted)) 52%, transparent); }
.cursor-ring{ border-color:color-mix(in oklab, var(--h, var(--ice)) 48%, transparent); }
.relay-rec{ color:color-mix(in oklab, var(--h, var(--phos)) 62%, transparent); }
.footer-heart{ color:color-mix(in oklab, var(--h, var(--amber)) 58%, transparent); }

/* ---------- 6. 开屏:把还方着的窗改成悬浮圆角玻璃 ---------- */
/* 顶栏从"通栏铁皮"变成一枚浮在页面顶部的圆角玻璃条 */
.hud{
  margin:10px clamp(12px, 2.4vw, 26px) 0;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-lg);
  box-shadow:var(--sh-md);
}
.hud::after{ left:20px; right:20px; top:0; height:2px; border-radius:2px; }
.hud-inner{ padding:12px 18px; }
@media (max-width:860px){
  .hud{ margin-top:8px; }
  /* 移动抽屉跟着圆角条走,不再顶满整屏宽度。
     top:80px = 悬浮 hud 高度(margin 8 + 条体) + 呼吸缝。
     注意: 不可写 inset:auto 12px auto 12px —— inset 简写会把 top 重置为
     auto(D1 清债时踩过: 合并覆盖反而吃掉 top, 抽屉退回静态位置, 安卓上
     打开即穿帮)。必须显式写 top/left/right。 */
  .nav{
    top:80px; left:12px; right:12px;
    border:1px solid var(--line-strong); border-radius:var(--r-m);
    padding:12px 14px 16px; box-shadow:var(--sh-lg);
    /* 高度兜底: 无论以后加多少选项, 抽屉绝不伸出屏幕(矮屏/横屏时内部滚动) */
    max-height:calc(100vh - 92px);
    max-height:calc(100dvh - 92px);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
}

/* 指标条:style.css 里残留的 1px 方框网格底 —— 卡片自己已有圆角与描边,这层方框只会露出直角边 */
.hero-metrics{ border:none; background:transparent; }

/* 宣言块:整块圆角 + 顶部渐变条内缩,不再压住圆角 */
.manifesto{ border-radius:var(--radius-lg); }
.manifesto::before{ left:24px; right:24px; height:2px; border-radius:2px; }

/* 小控件:胶囊化 */
.search-toggle kbd{ border-radius:var(--r-full); padding:1px 8px; }
.search-toggle{ border-radius:var(--r-full); }
.to-top, .eco-toggle, .sound-toggle{ border-radius:var(--r-full); }
.to-top:hover{ transform:translateY(-3px) scale(1.04); }

/* 顶栏悬浮后,粘顶时要保留那 10px 的缝隙,否则滚动时会贴死屏幕边缘 */
.hud{ top:10px; }

/* ---------- 7. 大标题玻璃卡:圆角 + 去掉多余划痕竖线 ---------- */
.hero-main{ border-radius:var(--radius-lg); }
@media (min-width:721px){ .hero-main::after{ display:none; } }   /* 卡片本身已分区,竖线在圆角卡里像道裂口 */

/* ---------- 8. 首屏真实渲染后的三处修补 ---------- */
/* 流星雨在玻璃卡后面透出来,会压在指标数字上 —— 把卡片底色提实,只留高光边 */
.metric{ background:linear-gradient(180deg, rgba(16,20,28,.93), rgba(11,13,18,.95)); }
/* hero 与宣言之间空档按黄金级收一档,首屏不再出现一大片死黑 */
.hero{ padding-bottom:clamp(26px,4.5vh,48px); }
.hero-metrics{ margin-top:var(--g4); }
/* 终端输入行聚焦:硬绿实线换成柔和内发光,不再像一道划痕 */
.term-input-line:focus-within{ border-bottom-color:rgba(116,160,124,.16); }
.term-input-line:focus-within .prompt{ text-shadow:0 0 12px rgba(116,160,124,.28); }

/* 终端滚动条:原来 30% 磷光绿在深色面板里像一道亮条,压淡并变细 */
#boot{ scrollbar-color:rgba(126,152,132,.2) transparent; scrollbar-width:thin; }
#boot::-webkit-scrollbar{ width:4px; }
#boot::-webkit-scrollbar-thumb{ background:rgba(126,152,132,.22); border:1px solid transparent; background-clip:content-box; }
#boot::-webkit-scrollbar-thumb:hover{ background:rgba(146,178,152,.4); background-clip:content-box; }
.term-input-line:focus-within{ border-bottom-color:rgba(116,160,124,.1); }

/* ---------- 9. 标题下的直线条 → 圆头渐隐色条 ----------
   大标题下方那道通宽 1px 直线(冲压加工线)是全页最"直"的东西,
   换成居中的圆头短条 + 页面色相渐变;分区块顶部的直线同理做成渐隐。 */
.hero-title .zh::after{
  width:92px; height:2px; margin:12px auto 0;
  border-radius:var(--r-full);
  background:linear-gradient(90deg, transparent,
    color-mix(in oklab, var(--h, var(--ice)) 70%, transparent) 22%,
    color-mix(in oklab, var(--parchment) 60%, transparent) 50%,
    color-mix(in oklab, var(--h, var(--ice)) 70%, transparent) 78%, transparent);
  opacity:.85;
}
.hud-kicker::before{ height:2px; border-radius:var(--r-full); }
.block-head{ border-top-color:transparent; position:relative; }
.block-head::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px; border-radius:2px;
  background:linear-gradient(90deg, color-mix(in oklab, var(--h, var(--ice)) 42%, transparent), transparent 58%);
}

/* ============================================================
   v4.5 · 双端适配补全 (2026-10-18)
   S1 iOS 安全区(viewport-fit=cover + env inset, 见上文各控件)
   S2 触控热区 44×44(::before 外扩, 见上文)
   S3 流星雨中央廊道(meteor-rain.js 左右分带)
   S4 横屏矮屏 / S5 极窄屏 / D2 宽屏利用 —— 均只加新断点, 不动既有渲染
   ============================================================ */

/* ---------- S4. 横屏矮屏(手机横持 ≤520px 高): 首屏按"高"计价 ----------
   横屏时宽度足够但高度是瓶颈: 标题改用 vh 定标(不再是 5.6vw 的横屏巨标),
   hero 去掉 86vh 最小高, 终端限高, 保证一屏看得全、不顶出。 */
@media (orientation:landscape) and (max-height:520px){
  .hero{ min-height:0; padding:var(--g3) 0 var(--g3); }
  .hero-title .zh{ font-size:clamp(1.7rem, 4.4vh, 2.3rem); line-height:1.2; }
  .hero-title .en{ font-size:11px; letter-spacing:.26em; }
  .hero-title .glow-line{ font-size:11px; letter-spacing:.16em; margin-top:var(--g1); }
  .hero-sub{ margin-top:var(--g2); padding:10px 14px; font-size:12.5px; line-height:1.7; }
  .hero-metrics{ margin-top:var(--g2); }
  .metric{ min-width:96px; padding:8px 14px; }
  .relay{ margin-top:var(--g2); width:min(380px, 42vw); }
  #boot{ min-height:84px; max-height:30vh; }
  /* 横屏抽屉: 项收紧, 7 项争取一屏装下(装不下也有 max-height 内部滚动兜底) */
  .nav{ padding:8px 12px 10px; }
  .nav a{ padding:6px 12px; margin:2px 0; font-size:12.5px; }
}

/* ---------- S5. 极窄屏(≤360px, SE 一代/小安卓): 在 400 档之下再收一档 ---------- */
@media (max-width:360px){
  .hero-title .zh{ font-size:2.05rem; letter-spacing:.06em; }
  .hero-title .en{ font-size:10.5px; letter-spacing:.18em; }
  .hero-title .glow-line{ font-size:10.5px; }
  .hero-sub{ padding:12px 14px; font-size:13px; }
  .metric{ min-width:0; padding:12px 8px; }
  .filterbar .chip{ padding:8px 12px; font-size:12px; }
  .jtitle{ font-size:18px; }
  .to-top, .eco-toggle, .signal-meter{ right:12px; }
  .sound-toggle{ left:12px; }
}

/* ---------- D2. 宽屏利用(≥1600px): 深空美学保留 1280 基准,
   仅在超宽屏放开内容宽度, 减少两侧死黑, 提高信息密度。 ---------- */
@media (min-width:1600px){
  .wrap{ max-width:1480px; }
  .relay{ width:min(460px, 94%); }
  .detail-layout{ grid-template-columns:minmax(0,1fr) 240px; gap:56px; }
}

/* ============================================================
   v4.6 · 设计美学打磨 (2026-10-18)
   A2 标题字重分级 / A3 身份色退火 / A3b 流星双色收敛
   原则: 签名(首页钤印)保持锋利, 其余一律退火。
   ============================================================ */

/* ---------- A2. 钤印签名只属于首页 ----------
   .hero-title 的"冲压铝铭牌"(700 字重 + text-stroke + 四向暗边 +
   基线刻意错位)是首页的签名级处理。模块页(日志/思考/诗歌/AI 导引/
   关于/404)的同名页首标题退火为"冷钢蚀刻": 去描边、字重降一档、
   单层柔影、收掉基线错位 —— 内容页要的是温度, 不是铭牌。
   注: data-page 由 main.js 按路径运行时注入, 首页为 "index"。 */
body:not([data-page="index"]) .hero-title{
  font-weight:600;
  -webkit-text-stroke:0;
  text-shadow:0 1px 0 rgba(0,0,0,.6);
}
body:not([data-page="index"]) .hero-title .zh{
  color:#a3adb8;                 /* 较首页 #97a2ae 亮半档, 补回去描边后的轻飘 */
  -webkit-text-stroke:0;
  text-shadow:0 1px 0 rgba(0,0,0,.55);
  transform:none;                /* 模块页不必耍基线错位的性格 */
}
body:not([data-page="index"]) .hero-title .en{
  -webkit-text-stroke:0;
  transform:none;
}

/* ---------- A3. 色相纪律: 六个身份色向钢灰退火 ----------
   概念设定里氧化铜是"唯一的暖", 实际已有 6 个模块身份色。不删色相
   (色相是导航线索), 统一退火 42~50% 中性钢灰, 让色相读作"着色钢"
   而非"彩色塑料"。此处覆盖 style.css :root 的原始定义, 所有引用处
   (导航下划线/卡片侧条/指标/状态点/页眉 kicker)自动继承退火版。 */
:root{
  --spec-proj:   color-mix(in oklab, #6ea8e0 58%, #7f8995);
  --spec-log:    color-mix(in oklab, #58c2ab 58%, #7f8995);
  --spec-thought:color-mix(in oklab, #a98fdb 50%, #7f8995);
  --spec-poem:   color-mix(in oklab, #e090ae 50%, #7f8995);
  --spec-ai:     color-mix(in oklab, #d9b368 58%, #7f8995);
  --spec-about:  color-mix(in oklab, #7ec8e8 58%, #7f8995);
}

/* ---------- A3b. 流星雨双色收敛 ----------
   三色系(冰蓝灰/紫灰/冰蓝)里的紫灰是局外人, 与"磷光只点睛"的
   纪律冲突。tone-b 紫灰 → 磷光绿, 与 tone-c 冰蓝构成品牌双色。
   JS 侧分配同步改 50/50(见 meteor-rain.js)。
   坑(2026.10.18 修复): background 是简写属性, 会连带把
   background-clip 重置为初始值 border-box —— 首版只改了渐变,
   结果 tone-b 流星从"渐变色诗句"退化成"渐变色矩形块"从天而降
   (小主反馈"莫名绿色方块")。重定义必须带齐 background-clip:text
   与 filter, 少一个就穿帮。 */
.meteor-line.tone-b{
  background:linear-gradient(180deg,
    rgba(116,160,124,.68) 0%,
    rgba(140,180,150,.88) 46%,
    rgba(200,224,205,1) 100%);
  -webkit-background-clip:text; background-clip:text;
  filter:drop-shadow(0 0 5px rgba(116,160,124,.36))
         drop-shadow(0 0 14px rgba(116,160,124,.15));
}

/* ---------- 附. 空分类 chip 视觉降噪 ----------
   后台保留空分类便于空态筛选(功能不变), 但计数为 0 的 chip 压暗,
   不与有内容的分类抢注意力; hover 时回抬, 仍可点开空态。 */
.filterbar .chip.zero{ opacity:.45; }
.filterbar .chip.zero:hover{ opacity:.8; }

/* ============================================================
   v5.0 · 移动端导航抽屉修复 (2026-10-24)
   小主报: 点开菜单抽屉, 其他元素抽搐 + 整页模糊 + 点不动。
   三个根因, 全部实测确认(elementFromPoint 命中的是 #nav-back):
     1) Z 序倒挂 —— #nav-back 复用了 .drawer-back, 那套样式的
        z-index:70 是配 projects 页详情抽屉(.drawer, 71)的; 而
        移动端 .nav 只有 49。遮罩整整压在菜单上一层, 点菜单里
        任何位置都先命中遮罩 -> 触发"点空白收起" -> 菜单一闪就没,
        表现就是"点不动"。
     2) 全屏高斯模糊 —— .drawer-back 带 backdrop-filter:blur(6px),
        它是 inset:0 的 fixed 层, 每帧都要对整个视口重算模糊; 底下
        星空 canvas 和流星 DOM 还在跑动画 -> 手机 GPU 掉帧(抽搐),
        视觉上整页发糊。
     3) 菜单自身也带 blur(12px), 但底色已经 .97 近实心, 这层模糊
        纯属白烧 GPU。
   修法: 遮罩改独立 .nav-back —— 层级 48(菜单之下 / 页面之上),
   干掉 backdrop-filter, 只留一层淡压暗。菜单清晰可点, 点空白仍
   走原收起逻辑, 夜间行为不变。 */
.nav-back{
  z-index:48;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.nav-back.on{ background:rgba(0,0,0,.62); }
/* 遮罩一层都不做全屏模糊了(2026-10-24 v5.0):
   全屏 backdrop-filter 是移动端掉帧的主因, 而压暗本身已经足够把层
   分开; 白天那层 .22 压暗再叠模糊会糊成一片白雾, 比清晰背景更难看。
   注意 .search-overlay 的模糊要留着 —— 全屏搜索面板需要"背景退焦"。
   本条与 override.css 上文 288 行同特异性, 位置在后, 因此胜出。 */
.drawer-back{
  -webkit-backdrop-filter:none; backdrop-filter:none;
}

/* ============================================================
   v4.7 · 昼间协议 DAY MODE (2026-10-18 起; 2026-10-24 v5.0 重设为「明视白」)
   小主定调: 站点整体昏暗, 增设白天/黑夜双主题切换。
   概念: 同一座 1978 年的失修信标 —— 夜航(默认, 虚空黑)是它的
   本职; 昼间(v5.0 明视白)= 天亮以后把观测室的窗全推开:
   天光白做底、蓝墨做字、氧化铜做标签, 而且——白天不落一滴墨。
   小主原话"只要白天有那种灰黑色就很奇怪", 所以 v5.0 的硬纪律:
     - 任何面都不许用深色填充: 底色 #f2f6fa(去灰去黄的极淡天光蓝),
       面板纯白, 内嵌面 #e8eef6, 三者靠白度阶差分层, 不靠压暗
     - 文字用深蓝板岩 #294056, 落笔不是黑
     - 层次线用冷蓝 rgba(41,64,86,.14), 阴影也用冷蓝(白纸上的
       影子本来就该是蓝的, 不是灰的)
     - 遮罩改"天光压暗"而不是黑幕
     - 终端/登录门这两块曾经的"黑膏药"整体翻白, 变明视仪器面板
   实现约定:
     - data-theme 挂在 <html> 上, 由 head 内联脚本(防闪烁)与
       main.js initThemeToggle 共同维护; localStorage 键 beacon-theme
     - 本段全部用 [data-theme="day"] 前缀(属性选择器 +0,1,0 特异度),
       放在文件末尾, 同特异性下后来者赢, 不会误伤暗色定义
   ============================================================ */

/* ---------- 1. 主令牌: 虚空黑 → 冷钢白; 钢蓝文字体系 ---------- */
[data-theme="day"]{
  --void:        #f2f6fa;   /* 明视白 · 极淡天光蓝, 去灰去黄, 长读不刺眼 */
  --void-2:      #e8eef6;   /* 内嵌面(比底深一档, 托住卡片) */
  --panel:       #ffffff;   /* 数据面 · 纯白纸, 浮在底面上 */
  --panel-2:     #eef3f9;   /* 加工面 / 抬高面 */

  --ice:         #2f6ea8;   /* 钢蓝 · 清而不灰 */
  --ice-2:       #4f8dc4;
  /* ---- 关于 dim 系列 (2026-10-24 v5.0 重做) ----
     夜态用"降透明度"表达次级, 因为背景是黑的, 越透 = 越接近黑 = 越弱。
     白底上同一招会反噬: 透 = 越接近白 = 越淡, 到了 11px 小字直接读不清
     (实测 --parchment-dim .6 的诗句对比度只有 2.3:1, --phos-dim .65 同).
     白天改成"深一档的实色", 只保留一点点透明做质感。 */
  --ice-dim:     rgba(38,92,140,.95);
  --ice-faint:   rgba(47,110,168,.22);

  --amber:       #b08442;   /* 氧化铜 · 唯一的暖, 用于图钉/线条/装饰 */
  --amber-dim:   #8a6528;   /* 文字用深铜, #b08442 在 #f2f6fa 上只有 3.4:1; 带 .95 透明会回落到 4.42, 故实色 */
  --parchment:   #5a6f85;   /* 石板蓝灰 */
  --parchment-dim:rgba(74,94,116,.95);

  --phos:        #1f8a63;   /* 磷光绿 → 翠墨绿 */
  --phos-dim:    rgba(22,112,78,.95);

  --signal:      #c25534;   /* 警示锈红 */

  --ink:         #294056;   /* 正文 · 深蓝板岩(不落黑) */
  --muted:       #55687e;   /* 次级 · 蓝灰(4.9:1, 11px 小字也立得住) */
  --line:        rgba(41,64,86,.14);
  --line-strong: rgba(41,64,86,.30);

  /* 身份六色: 白底需要真彩度才立得住(旧版退火 15-20% 在白底上会糊) */
  --spec-proj:   #2f6ea8;
  --spec-log:    #1f8a76;
  --spec-thought:#7059ad;
  --spec-poem:   #b04a72;
  --spec-ai:     #a87c2c;
  --spec-about:  #2e7f9e;

  /* 阴影: 冷蓝淡影(白纸上的影子是蓝的, 不是灰的) */
  --sh-sm: 0 1px 2px rgba(41,64,86,.07), 0 1px 1px rgba(93,143,190,.06);
  --sh-md: 0 10px 24px -12px rgba(41,64,86,.14), 0 2px 6px rgba(93,143,190,.09);
  --sh-lg: 0 26px 50px -22px rgba(41,64,86,.18);
  --glow-ice:   0 0 0 1px var(--line-strong), 0 16px 40px -18px rgba(41,64,86,.24);
  --glow-amber: 0 0 0 1px rgba(176,132,66,.35), 0 16px 40px -18px rgba(41,64,86,.24);

  /* 玻璃四档: 全部反转为白纸磨砂 */
  --glass-tint: linear-gradient(165deg, rgba(255,255,255,.72), rgba(242,246,250,.5));
  --glass-tint-solid: #f7fafd;
  --glass-hl: inset 0 1px 0 rgba(255,255,255,.9);
  --glass-glow: 0 1px 0 rgba(93,143,190,.05), 0 10px 32px -18px rgba(41,64,86,.15);
  --glass-a-bg: rgba(255,255,255,.88);
  --glass-a-edge: 1px solid rgba(41,64,86,.10);
  --glass-a-hl: inset 0 1px 0 rgba(255,255,255,.85);
  --glass-a-shadow: 0 1px 0 rgba(93,143,190,.06), 0 10px 30px -18px rgba(41,64,86,.17);
  --glass-b-bg: linear-gradient(168deg, rgba(255,255,255,.82), rgba(242,246,250,.54));
  --glass-b-edge: 1px solid rgba(41,64,86,.09);
  --glass-b-hl: inset 0 1px 0 rgba(255,255,255,.92);
  --glass-b-shadow: 0 1px 0 rgba(93,143,190,.06), 0 8px 26px -20px rgba(41,64,86,.14);
  --glass-c-bg: linear-gradient(168deg, rgba(255,255,255,.78), rgba(242,246,250,.46));
  --glass-c-edge: 1px solid rgba(41,64,86,.09);
  --glass-c-hl: inset 0 1px 0 rgba(255,255,255,.8);
  --glass-c-shadow: 0 1px 0 rgba(93,143,190,.05), 0 8px 24px -16px rgba(41,64,86,.12);
  --glass-d-bg: linear-gradient(168deg, rgba(255,255,255,.84), rgba(242,246,250,.56));
  --glass-d-edge: 1px solid rgba(41,64,86,.10);
  --glass-d-hl: inset 0 1px 0 rgba(255,255,255,.88);
  --glass-d-shadow: 0 1px 0 rgba(93,143,190,.06), 0 12px 32px -20px rgba(41,64,86,.16);

  /* 矢量底图: 结构线反转成蓝灰细线 */
  --vb-line:      rgba(41,64,86,.24);
  --vb-line-dim:  rgba(41,64,86,.13);
  --vb-line-faint:rgba(93,143,190,.11);
  --vb-copper:    rgba(176,132,66,.4);
  --vb-txt:       rgba(97,120,145,.28);

  /* canvas 组件色(JS 读): 明视白上星点是淡蓝墨点, 流星 = 钢蓝头 + 翠绿尾 */
  --star-rgb: 112,140,172;
  --dust-rgb: 126,152,182;
  --meteor-rgb: 47,110,168;
  --meteor-tail-rgb: 31,138,99;
}

/* ---------- 2. 环境层: 天光/地面反照/水印 ----------
   v5.0: 顶部加一层极淡的暖白天光(只在视口最上缘, 不进内容区),
   给"全白"一个光源方向 —— 否则整页均匀的白会读作"没打光的照片"。
   剂量必须极小, 上一版暖白纸就是因为整体偏黄被判"闷"。 */
[data-theme="day"] .space-bg{
  background:
    radial-gradient(900px 420px at 72% -18%, rgba(255,238,208,.38), transparent 62%),
    radial-gradient(1200px 760px at 84% -6%, rgba(90,130,180,.07), transparent 62%),
    radial-gradient(1000px 700px at 6% 106%, rgba(150,178,208,.06), transparent 60%),
    radial-gradient(760px 520px at 58% 52%, rgba(31,138,99,.035), transparent 66%),
    var(--void);
}
/* CRT 暗角是"低照度屏幕"的产物; 明视白里没有暗角, 只留一丝边缘收束 */
[data-theme="day"] .crt-vignette{
  background:linear-gradient(180deg, rgba(93,143,190,0.035) 0%, transparent 12%),
             linear-gradient(0deg, rgba(93,143,190,0.028) 0%, transparent 9%);
}
[data-theme="day"] .wm-nietzsche{ color:rgba(93,143,190,0.11); }
[data-theme="day"] .stamp{ color:rgba(176,132,66,.52); border-color:rgba(176,132,66,.45); }
[data-theme="day"] .stamp-b{ color:rgba(63,100,140,.38); border-color:rgba(63,100,140,.32); }

/* ---------- 3. 排版基底: 标题/钤印反转 ---------- */
[data-theme="day"] h1,[data-theme="day"] h2,
[data-theme="day"] h3,[data-theme="day"] h4{ color:#294056; }
/* 首页钤印 → 钢面烫印(v4.8 信标锁定: 近黑钢蓝字 + 冷白浮雕) */
[data-theme="day"] .hero-title{ -webkit-text-stroke:0; }
[data-theme="day"] .hero-title .zh{
  color:#294056;
  -webkit-text-stroke:0;
  text-shadow:0 1px 0 rgba(255,255,255,.9), 0 2px 8px rgba(41,64,86,0.10);
}
/* v4.8: EN 的冷钢渐变是夜态专属, 昼间必须整体熄掉(背景+字色),
   否则浅色渐变字压在钢白底上直接消失 */
[data-theme="day"] .hero-title .en{
  background:none; color:#617891;
  -webkit-text-stroke:0; text-shadow:none;
}
[data-theme="day"] body:not([data-page="index"]) .hero-title .zh{ color:#2f6ea8; }
/* v4.8 信标锁定 · 昼间补充 */
[data-theme="day"] .hero-main .hero-tags{ color:var(--muted); }
[data-theme="day"] .hero-main .hk-led{           /* 呼吸绿 → 墨绿, 光晕减淡 */
  box-shadow:0 0 8px rgba(31,138,99,.4), 0 0 2px rgba(31,138,99,.75);
}
[data-theme="day"] .hero-main .ht-item::before{ box-shadow:none; }  /* 亮底不发光 */
[data-theme="day"] .hero-main::after{
  background:linear-gradient(180deg, rgba(176,132,66,0) 0%, rgba(176,132,66,.42) 30%, rgba(176,132,66,.42) 70%, rgba(176,132,66,0) 100%);
  opacity:.7;
}
[data-theme="day"] .hero-rail::before{
  background:
    radial-gradient(circle at 50% 50%, transparent 0 44%, rgba(93,143,190,0.10) 44.5% 45%, transparent 45.5% 60%, rgba(93,143,190,0.09) 60.5% 61%, transparent 61.5%),
    radial-gradient(circle at 50% 50%, transparent 72%, rgba(93,143,190,0.07) 72.5%, transparent 73%);
}

/* ---------- 4. HUD / 导航 ---------- */
[data-theme="day"] .hud{
  background:rgba(255,255,255,.92);
  border-bottom-color:rgba(41,64,86,0.14);
  box-shadow:0 1px 0 rgba(93,143,190,0.11), 0 12px 40px -22px rgba(41,64,86,0.19);
}
[data-theme="day"] .hud::after{
  background:linear-gradient(90deg, transparent 0%, rgba(176,132,66,.45) 50%, rgba(176,132,66,.25) 60%, transparent 100%);
}
[data-theme="day"] .nav a:hover{ background:rgba(93,143,190,0.08); }
[data-theme="day"] .nav a.active{ background:rgba(93,143,190,0.09); }
@media (max-width:860px){
  [data-theme="day"] .nav{
    background:#ffffff;
    border-color:rgba(41,64,86,.16);
    /* 白底菜单贴在白底页面上, 必须靠影子把它"抬"起来 */
    box-shadow:0 20px 44px -20px rgba(41,64,86,.32), 0 2px 6px rgba(41,64,86,.06);
  }
}
/* 焦点环: 磷光改墨绿 */
[data-theme="day"] .btn:focus-visible,[data-theme="day"] .chip:focus-visible,[data-theme="day"] .input:focus-visible,
[data-theme="day"] input:focus-visible,[data-theme="day"] textarea:focus-visible,[data-theme="day"] select:focus-visible,
[data-theme="day"] .sr-item:focus-visible,[data-theme="day"] .lightbox .lb-nav:focus-visible{
  box-shadow:0 0 0 2px rgba(31,138,99,.5), 0 0 0 4px rgba(31,138,99,.18);
}
[data-theme="day"] a:focus-visible,[data-theme="day"] button:focus-visible,[data-theme="day"] [role="button"]:focus-visible{
  outline:2px solid color-mix(in oklab, var(--h, var(--phos)) 70%, transparent);
}

/* ---------- 5. 卡片玻璃 hover 提亮(v4.3 @supports 段的暗色渐变反转) ---------- */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  [data-theme="day"] .dm:hover,[data-theme="day"] .pn-card:hover,[data-theme="day"] .suggest-card:hover,
  [data-theme="day"] .device:hover,[data-theme="day"] .journal-card:hover,[data-theme="day"] .poem-card:hover,
  [data-theme="day"] .thought:hover,[data-theme="day"] .beacon:hover,[data-theme="day"] .sn-card:hover{
    background:linear-gradient(168deg, rgba(255,255,255,.9), rgba(242,246,250,.62));
  }
  [data-theme="day"] .sig-item{
    background:linear-gradient(168deg, rgba(255,255,255,.86), rgba(242,246,250,.72));
  }
  [data-theme="day"] .manifesto{
    background:linear-gradient(168deg, rgba(255,255,255,.8), rgba(242,246,250,.56));
  }
}

/* ---------- 6. 按钮 / 芯片 / 输入 ---------- */
/* 白底上的小字补丁(实测对比度不足的几处, 全部为 10-11px 元信息):
   kbd 的铜 #b08442 只有 3.4:1, 首页 kicker 的亮蓝 #4f8dc4 只有 3.3:1,
   空分类芯片压到 0.45 透明度只有 1.8:1 —— 白天一律回到可读区。 */
[data-theme="day"] kbd{ color:#8a6528; }
[data-theme="day"] .hud-kicker{ color:#2f6ea8; }
[data-theme="day"] .chip.zero{
  opacity:1;
  color:var(--muted);
  border-style:dashed;
  border-color:rgba(41,64,86,.22);
  background:rgba(41,64,86,.022);
}
[data-theme="day"] .btn{
  background:linear-gradient(180deg, rgba(93,143,190,0.09), rgba(93,143,190,0.04));
}
[data-theme="day"] .metric,[data-theme="day"] .bio-facts{
  background:linear-gradient(180deg, rgba(255,255,255,.55), transparent);
}
[data-theme="day"] .metric{
  background:linear-gradient(180deg, #ffffff, #f7fafd);
}
[data-theme="day"] .brand-orb,[data-theme="day"] .block-head::before,[data-theme="day"] .dm-led{
  box-shadow:inset 0 1px 2px rgba(41,64,86,0.30);
}
[data-theme="day"] .symbol-ring{ filter:none; }
[data-theme="day"] .dm:hover{ box-shadow:6px 6px 0 rgba(41,64,86,0.17); }
[data-theme="day"] .drawer{ box-shadow:-12px 0 0 rgba(41,64,86,0.10); }
/* 白天的遮罩不再用灰黑幕: .3 的黑压在天光白上读起来是"脏", 而不是"暗"。
   换成冷蓝天光压暗, 只做轻微的"退后一层", 让面板自己浮起来。 */
[data-theme="day"] .drawer-back{ background:rgba(74,116,158,0.28); }
[data-theme="day"] .post-content.md img{ box-shadow:4px 4px 0 rgba(41,64,86,0.19); }

/* ---------- 7. 搜索 / 灯箱 / 目录 ---------- */
[data-theme="day"] .search-overlay{ background:rgba(242,246,250,.92); }
[data-theme="day"] .search-hintbar{ background:rgba(255,255,255,.9); }
[data-theme="day"] .sr-item mark{ background:rgba(31,138,99,.16); color:#17704f; }
[data-theme="day"] .lightbox{ background:rgba(242,246,250,.94); }
[data-theme="day"] .lightbox .lb-nav{ background:rgba(255,255,255,.85); }
[data-theme="day"] .lightbox .lb-nav:hover{ background:#ffffff; }
[data-theme="day"] .toc-list a.on{ background:rgba(31,138,99,.08); }
[data-theme="day"] .code-copy.done{ border-color:rgba(31,138,99,.4); }
[data-theme="day"] .legal-overlay{ background:rgba(242,246,250,.78); }

/* ---------- 8. 留言区 ---------- */
[data-theme="day"] .sig-sortbar{ background:rgba(93,143,190,0.07); }
[data-theme="day"] .sig-sort.on{ background:rgba(255,255,255,.85); }
[data-theme="day"] .sig-like,[data-theme="day"] .sig-reply{ background:rgba(93,143,190,0.07); }
[data-theme="day"] .sig-reply{ background:rgba(93,143,190,0.05); }
[data-theme="day"] .sig-reply-form{ background:rgba(255,255,255,.55); }
[data-theme="day"] .sig-like.on{
  color:var(--amber); border-color:rgba(176,132,66,.5);
  background:rgba(176,132,66,.1);
}
[data-theme="day"] .sig-empty{
  background:linear-gradient(180deg, rgba(31,138,99,.07), rgba(31,138,99,0));
}

/* ---------- 9. 诗歌 / 哲思 / 正文元素 ---------- */
[data-theme="day"] .poem-daily{
  background:linear-gradient(90deg, rgba(31,138,99,.07), transparent 70%);
}
[data-theme="day"] .poem-note blockquote{ background:rgba(176,132,66,.07); }
[data-theme="day"] .thought{ background:linear-gradient(90deg, rgba(176,132,66,.08), transparent 60%); }
[data-theme="day"] .post-content.md blockquote{ background:rgba(176,132,66,.07); }
[data-theme="day"] .post-content.md :not(pre) > code{ background:rgba(93,143,190,0.09); }
[data-theme="day"] .md tbody tr:nth-child(even) td{ background:rgba(93,143,190,0.05); }
[data-theme="day"] .p-link:hover{ background:rgba(93,143,190,0.08); }
[data-theme="day"] .stack span{ background:rgba(93,143,190,0.07); }
[data-theme="day"] .id-card::before{ color:rgba(93,143,190,0.09); }
[data-theme="day"] .msg.bot .bubble{ background:rgba(93,143,190,0.07); }
[data-theme="day"] .msg.user .bubble{ background:rgba(176,132,66,.09); }
[data-theme="day"] .msg-links a{ background:rgba(93,143,190,0.07); }
[data-theme="day"] .news-item .nt.p{ border-color:rgba(41,64,86,0.26); }
[data-theme="day"] .news-item .nt.j{ border-color:rgba(176,132,66,.32); }
[data-theme="day"] .news-item .nt.m{ border-color:rgba(31,138,99,.32); }

/* ---------- 10. 流星雨: 三色系整体反转成墨色(背景最深, 诗句要深才读得出) ----------
   坑位提示(2026-10-18 绿方块教训): background 是简写属性, 重定义必须
   带齐 background-clip:text 与 filter, 少一个就穿帮。 */
[data-theme="day"] .meteor-line{
  background:linear-gradient(180deg,
    rgba(47,110,168,.62) 0%,
    rgba(36,66,95,.85) 46%,
    #234a6b 100%);
  -webkit-background-clip:text; background-clip:text;
  filter:drop-shadow(0 0 5px rgba(47,110,168,.22))
         drop-shadow(0 0 16px rgba(47,110,168,.10));
}
[data-theme="day"] .meteor-line.tone-b{
  background:linear-gradient(180deg,
    rgba(31,138,99,.62) 0%,
    rgba(34,95,69,.85) 46%,
    #17704f 100%);
  -webkit-background-clip:text; background-clip:text;
  filter:drop-shadow(0 0 5px rgba(31,138,99,.24))
         drop-shadow(0 0 14px rgba(31,138,99,.10));
}
/* tone-c: 钢白版换紫系(与 spec-thought 同源) —— 原冰蓝深在钢白底上
   与 default 钢蓝太像, 换成紫后诗歌页凑成 钢蓝/墨绿/紫 冷三角 */
[data-theme="day"] .meteor-line.tone-c{
  background:linear-gradient(180deg,
    rgba(112,89,173,.62) 0%,
    rgba(82,68,128,.85) 46%,
    #55417f 100%);
  -webkit-background-clip:text; background-clip:text;
  filter:drop-shadow(0 0 5px rgba(112,89,173,.24))
         drop-shadow(0 0 14px rgba(112,89,173,.10));
}
[data-theme="day"] .meteor-line.static{ color:#2f6ea8; }

/* ---------- 11. 首访辉光: 品牌色加深一档(亮底淡色看不见) ---------- */
[data-theme="day"] .first-veil{
  background:
    radial-gradient(85% 55% at 50% -8%, rgba(176,132,66,.10) 0%, transparent 62%),
    radial-gradient(120% 70% at 50% 112%, rgba(31,138,99,.07) 0%, transparent 58%);
}

/* ---------- 12. 悬浮控件: 声效 / 省电 / 回顶 / 信号计 亮底化 ----------
   昼间减重(2026-10-23): 移动端四个白底悬浮按钮(左下主题+声效 / 右下
   SIG+省电)视觉重量压过内容 —— 背景从 .85~.88 实白降到 .5 透磨砂,
   边框减淡, 让控件"浮在仪器上"而不是"贴在屏幕上"。 */
[data-theme="day"] .sound-toggle{
  background:rgba(255,255,255,.5);
  border-color:rgba(41,64,86,0.10);
}
[data-theme="day"] .sound-toggle:hover{ border-color:rgba(31,138,99,.4); }
[data-theme="day"] .sound-toggle.active{
  border-color:rgba(31,138,99,.45);
  box-shadow:0 0 8px rgba(31,138,99,.14);
}
[data-theme="day"] .eco-toggle{ background:rgba(255,255,255,.5); border-color:rgba(41,64,86,0.10); }
[data-theme="day"] .to-top{ background:rgba(255,255,255,.5); border-color:rgba(41,64,86,0.10); }
[data-theme="day"] .signal-meter{
  background:rgba(255,255,255,.5);
  border-color:rgba(31,138,99,.26);
}
[data-theme="day"] .signal-bars span{ background:rgba(31,138,99,.3); }
[data-theme="day"] .signal-msg{ text-shadow:0 0 8px rgba(31,138,99,.25); }
/* 主题按钮昼间同步减重(覆盖 @supports 玻璃 A 档的实白) */
[data-theme="day"] .theme-toggle{
  background:rgba(255,255,255,.5);
  border-color:rgba(41,64,86,0.10);
}

/* ---------- 13. 主题切换按钮(左下"环境控制组": 声效 + 主题) ----------
   位置: sound-toggle(32px) 右侧横排, 桌面 left:64 / ≤720 left:52 / ≤360 left:48。
   图标: 双 SVG 叠放, 按 data-theme 显隐 —— 暗底显太阳(点了变亮),
   亮底显月亮(点了变暗)。 */
.theme-toggle{
  position:fixed;
  left:64px;
  bottom:calc(24px + env(safe-area-inset-bottom, 0px));
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,12,18,.7);
  border:1px solid rgba(31,138,99,.3);
  border-radius:999px;
  color:var(--muted);
  cursor:pointer;
  z-index:100;
  transition:color .3s ease, border-color .3s ease, opacity .3s ease, background var(--d-2) var(--ease-out);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  opacity:.6;
}
.theme-toggle:hover{ opacity:1; color:var(--amber); border-color:rgba(176,132,66,.45); }
.theme-toggle svg{ width:15px; height:15px; display:block; }
.theme-toggle .ic-sun{ display:block; }
.theme-toggle .ic-moon{ display:none; }
[data-theme="day"] .theme-toggle .ic-sun{ display:none; }
[data-theme="day"] .theme-toggle .ic-moon{ display:block; }
/* 与 sound-toggle 同一玻璃语言(v4.3 A 档) */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .theme-toggle{
    background:var(--glass-a-bg);
    -webkit-backdrop-filter:blur(var(--glass-a-blur)) saturate(1.2);
    backdrop-filter:blur(var(--glass-a-blur)) saturate(1.2);
    box-shadow:var(--glass-a-hl), var(--glass-a-shadow);
  }
}
/* 昼间减重规则在上方 12 节(背景 .5 透磨砂 + 淡边), 此处只留文字色 */
[data-theme="day"] .theme-toggle{ color:var(--muted); }
[data-theme="day"] .theme-toggle:hover{ color:var(--amber); border-color:rgba(176,132,66,.45); }
/* S2 · 触控热区 44×44(::before 透明外扩, 不挡布局) */
.theme-toggle::before{ content:""; position:absolute; inset:-6px; }
@media (max-width:720px){
  .theme-toggle{
    left:52px;
    bottom:calc(16px + env(safe-area-inset-bottom, 0px));
    width:28px; height:28px;
  }
  .theme-toggle svg{ width:13px; height:13px; }
  .theme-toggle::before{ inset:-8px; }
}
@media (max-width:360px){
  .theme-toggle{ left:48px; }
}

/* ---------- 13.5 调控台(console-panel) ----------
   环境控制组第三枚按钮(声效 + 主题 + 调控): 点开毛玻璃小面板,
   主题二选一 / 偏好状态 / 重置偏好, 与 theme-toggle 同管道
   (window.beacon.theme)。纯调试向, 不自动展开, 访客无感知。
   位置: theme-toggle(32px) 右侧横排, 桌面 left:104 / ≤720 left:88 / ≤360 left:84。 */
.console-toggle{
  position:fixed;
  left:104px;
  bottom:calc(24px + env(safe-area-inset-bottom, 0px));
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,12,18,.7);
  border:1px solid rgba(31,138,99,.3);
  border-radius:999px;
  color:var(--muted);
  cursor:pointer;
  z-index:100;
  transition:color .3s ease, border-color .3s ease, opacity .3s ease, background var(--d-2) var(--ease-out);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  opacity:.6;
}
.console-toggle:hover{ opacity:1; color:var(--amber); border-color:rgba(176,132,66,.45); }
.console-toggle.on{ opacity:1; color:var(--phos); border-color:rgba(31,138,99,.5); }
.console-toggle svg{ width:15px; height:15px; display:block; }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .console-toggle{
    background:var(--glass-a-bg);
    -webkit-backdrop-filter:blur(var(--glass-a-blur)) saturate(1.2);
    backdrop-filter:blur(var(--glass-a-blur)) saturate(1.2);
    box-shadow:var(--glass-a-hl), var(--glass-a-shadow);
  }
}
/* 昼间与 theme-toggle 同语言: .5 透磨砂 + 淡边 */
[data-theme="day"] .console-toggle{
  background:rgba(255,255,255,.5);
  border-color:rgba(41,64,86,0.10);
  color:var(--muted);
}
[data-theme="day"] .console-toggle:hover{ color:var(--amber); border-color:rgba(176,132,66,.45); }
[data-theme="day"] .console-toggle.on{ color:var(--phos); border-color:rgba(31,138,99,.45); }
.console-toggle::before{ content:""; position:absolute; inset:-6px; }
@media (max-width:720px){
  .console-toggle{
    left:88px;
    bottom:calc(16px + env(safe-area-inset-bottom, 0px));
    width:28px; height:28px;
  }
  .console-toggle svg{ width:13px; height:13px; }
  .console-toggle::before{ inset:-8px; }
}
@media (max-width:360px){
  .console-toggle{ left:84px; }
}

/* 面板本体: 左下按钮正上方, 左对齐 sound-toggle */
.console-panel{
  position:fixed;
  left:24px;
  bottom:calc(24px + 44px + env(safe-area-inset-bottom, 0px));
  width:236px;
  z-index:101;
  padding:13px 15px 11px;
  background:var(--glass-a-bg);
  -webkit-backdrop-filter:blur(var(--glass-a-blur)) saturate(1.2);
  backdrop-filter:blur(var(--glass-a-blur)) saturate(1.2);
  border:1px solid var(--line-strong);
  border-radius:var(--r-m);
  box-shadow:var(--glass-a-shadow), 0 18px 40px -18px rgba(0,0,0,.55);
  color:var(--ink);
  font-size:12px;
  line-height:1.6;
  opacity:0;
  pointer-events:none;
  transform:translateY(8px) scale(.97);
  transform-origin:left bottom;
  transition:opacity .25s var(--ease-out), transform .25s var(--ease-out);
}
.console-panel.on{ opacity:1; pointer-events:auto; transform:none; }
.cp-head{
  display:flex; align-items:center; gap:7px;
  font-size:11px; letter-spacing:.14em;
  color:var(--phos);
  text-transform:uppercase;
  padding-bottom:9px; margin-bottom:9px;
  border-bottom:1px solid var(--line);
}
.cp-dot{
  width:6px; height:6px; border-radius:999px;
  background:var(--phos);
  box-shadow:0 0 7px rgba(31,138,99,.6);
}
.cp-sec{
  font-size:10px; letter-spacing:.18em;
  color:var(--muted);
  margin:2px 0 7px;
}
.cp-themes{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.cp-t{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:9px 4px 8px;
  background:transparent;
  border:1px solid var(--line);
  border-radius:var(--r-s, 6px);
  color:var(--muted);
  font-size:11px;
  cursor:pointer;
  transition:border-color .25s var(--ease-out), color .25s var(--ease-out), background .25s var(--ease-out);
}
.cp-t svg{ width:16px; height:16px; }
.cp-t:hover{ border-color:rgba(176,132,66,.4); color:var(--amber); }
.cp-t.on{
  border-color:rgba(31,138,99,.55);
  color:var(--phos);
  background:rgba(31,138,99,.07);
}
.cp-state{
  padding:7px 9px;
  background:rgba(93,143,190,0.08);
  border:1px solid var(--line);
  border-radius:var(--r-s, 6px);
  color:var(--muted);
  font-size:11px;
}
.cp-actions{ margin-top:9px; }
.cp-reset{
  width:100%;
  padding:6px 8px;
  background:transparent;
  border:1px dashed var(--line-strong);
  border-radius:var(--r-s, 6px);
  color:var(--muted);
  font-size:11px;
  cursor:pointer;
  transition:color .25s var(--ease-out), border-color .25s var(--ease-out);
}
.cp-reset:hover{ color:var(--amber); border-color:rgba(176,132,66,.45); }
.cp-foot{
  margin-top:10px; padding-top:8px;
  border-top:1px solid var(--line);
  font-size:10px;
  color:var(--muted);
  opacity:.75;
}
/* 昼间: 面板转白纸磨砂, 墨字 */
[data-theme="day"] .console-panel{
  background:rgba(255,255,255,.9);
  border-color:rgba(41,64,86,.12);
  box-shadow:0 18px 40px -18px rgba(41,64,86,.30), 0 1px 0 rgba(93,143,190,.05);
}
[data-theme="day"] .cp-state{ background:rgba(93,143,190,0.05); }
[data-theme="day"] .cp-t.on{ background:rgba(31,138,99,.06); }
@media (max-width:720px){
  .console-panel{
    bottom:calc(16px + 40px + env(safe-area-inset-bottom, 0px));
    width:224px;
  }
}

/* ---------- 14. 后台(admin.css)亮底化 ---------- */
[data-theme="day"] .gate{ background:radial-gradient(ellipse at 50% 40%, rgba(90,130,180,.08), transparent 60%), var(--void); }
[data-theme="day"] .gate-inner{ background:rgba(255,255,255,.97); }
[data-theme="day"] .admin-top{ background:rgba(255,255,255,.95); }
[data-theme="day"] .tab.active{ background:rgba(93,143,190,0.08); }
[data-theme="day"] .cat-mgr{ background:rgba(93,143,190,0.07); }
[data-theme="day"] .cat-chips .chip{ background:rgba(255,255,255,.5); }
[data-theme="day"] .list-item.editing{ background:rgba(93,143,190,0.08); }
[data-theme="day"] .ad-msgfilters .chip.on{ background:rgba(93,143,190,0.14); }
[data-theme="day"] .ad-toast{ background:rgba(255,255,255,.97); }
[data-theme="day"] .ad-toast.t-danger{ color:#b04a2c; }
[data-theme="day"] .ad-modal-back{ background:rgba(242,246,250,.74); }
/* .ad-modal 弹窗本体用 var(--void-2), 已随令牌自动亮底化, 无需覆盖 */
[data-theme="day"] .md-toolbar{
  background:rgba(255,255,255,.94);
  box-shadow:0 10px 20px -16px rgba(41,64,86,0.26);
}
[data-theme="day"] .md-preview-body blockquote{ background:rgba(176,132,66,.07); }

/* ---------- 15. 动效层(animations.css)亮底化 ----------
   脉冲环: 真身是 .hero-rail::after + @keyframes beacon-pulse(关键帧里也有
   硬编码色), 亮色不能只覆盖静态 border —— 必须定义日间同名变体并整体换
   animation-name, 否则跑到 55% 帧又会闪出冷钢蓝。 */
[data-theme="day"] .hero-rail::after{
  border-color:rgba(41,64,86,0.32);
  box-shadow:0 0 0 0 rgba(41,64,86,0.14);
}
@keyframes beacon-pulse-day{
  0%   { transform:translate(-50%,-50%) scale(.16); border-color:rgba(41,64,86,0.36); box-shadow:0 0 0 0 rgba(41,64,86,0.22); opacity:.6; }
  55%  { border-color:rgba(31,138,99,.22); box-shadow:0 0 0 56px rgba(41,64,86,0); opacity:.18; }
  100% { transform:translate(-50%,-50%) scale(1.02); opacity:0; box-shadow:0 0 0 0 rgba(41,64,86,0); }
}
[data-theme="day"] .hero-rail::after{ animation-name:beacon-pulse-day; }
/* 卡片悬停扫描光带: 六个伪元素, 渐变反转成墨色 */
[data-theme="day"] .dm::after,[data-theme="day"] .journal-card::after,[data-theme="day"] .pn-card::after,
[data-theme="day"] .suggest-card::after,[data-theme="day"] .device::after,[data-theme="day"] .beacon::after{
  background:linear-gradient(90deg, transparent, rgba(41,64,86,0.59), transparent);
}
/* 档案盒 LED: 悬停点亮改氧化铜暖调 */
[data-theme="day"] .dm:hover .dm-led,[data-theme="day"] .pn-card:hover .led,
[data-theme="day"] .device:hover .led,[data-theme="day"] .beacon:hover .led{
  box-shadow:0 0 9px rgba(176,132,66,.45);
}
[data-theme="day"] .stack span:hover{ border-color:rgba(31,138,99,.5); background:rgba(31,138,99,.08); }
[data-theme="day"] .hero-promo .hp-led{ box-shadow:0 0 7px rgba(31,138,99,.4); }

/* ---------- 13.6 信标终端 · 昼间翻白(2026-10-24 v5.0) ----------
   历史: v4.7 试过"半透明深色毛玻璃", 小主这次直说"白天不要黑色了"——
   在明视白页面上, 任何形式的深色块(哪怕是通透的黑玻璃)都像贴在纸上
   的一块膏药。v5.0 彻底翻面: 阳极氧化铝 => 白色亚光仪器面板,
   磷光绿屏 => 白纸上的墨绿打印字(亮底上"发光"没有意义, 要的是"印上去")。
   要点: #boot span 的 --bloom 辉光必须在白天关掉(白底发光=发脏),
   但保留 --wy 基线摇晃的磨损质感。 */
[data-theme="day"] .relay-panel{
  background:linear-gradient(200deg, #ffffff 0%, #f8fbfd 46%, #edf3f9 100%);
  border-color:rgba(41,64,86,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -2px 3px rgba(41,64,86,.055),
    0 16px 36px -20px rgba(41,64,86,.22),
    0 3px 0 rgba(41,64,86,.045);
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
/* 边缘微氧化: 铜锈改浅, 在铝白沿口上仍读得出"用旧了" */
[data-theme="day"] .relay-panel::before{
  box-shadow:inset 0 0 0 1px rgba(176,132,66,.16),
             inset -1px 0 0 rgba(31,138,99,.07),
             inset 0 -1px 0 rgba(176,132,66,.09);
}
/* 砂光拉丝: 白纹改淡墨纹, 否则在浅底上完全看不见 */
[data-theme="day"] .relay-panel::after{
  background:repeating-linear-gradient(92deg, rgba(41,64,86,.028) 0 1px, transparent 1px 3px);
}
/* 右下油脂污渍: 从"暗污"改成"擦过的痕" */
[data-theme="day"] .relay-panel .smudge{
  background:radial-gradient(60% 55% at 60% 45%, rgba(120,110,86,.10), rgba(100,96,78,.045) 55%, transparent 78%);
  opacity:.6;
}
/* Torx 螺丝: 深黑钢 => 镀锌亮钢 */
[data-theme="day"] .relay-panel .screw{
  background:radial-gradient(circle at 40% 35%, #ffffff, #dae4ee 62%, #b9c7d6);
  box-shadow:0 1px 0 rgba(255,255,255,.9),
             inset 0 0 0 1px rgba(41,64,86,.2),
             inset 1px 1px 2px rgba(41,64,86,.16);
}
[data-theme="day"] .relay-panel .screw::after{ opacity:.55; }
/* 蚀刻铭牌: 下凹改淡墨压印 + 白高光 */
[data-theme="day"] .relay-title{
  color:#4a6076;
  text-shadow:0 1px 0 rgba(255,255,255,.95), 0 -1px 0 rgba(41,64,86,.08);
  background:repeating-linear-gradient(90deg, rgba(41,64,86,.018) 0 1px, rgba(255,255,255,.5) 1px 2px);
}
[data-theme="day"] .relay-head{ border-bottom-color:rgba(41,64,86,.14); }

/* ---- 屏上内容: 亮磷光 => 墨绿印刷字 ---- */
[data-theme="day"] #boot{ color:rgba(30,104,76,.86); scrollbar-color:rgba(31,138,99,.28) transparent; }
[data-theme="day"] #boot .ok  { color:rgba(22,118,80,.95); }
[data-theme="day"] #boot .warn{ color:rgba(150,105,26,.92); }
[data-theme="day"] #boot .user{ color:rgba(30,104,76,.62); }
[data-theme="day"] #boot .dim { color:rgba(30,104,76,.42); }
[data-theme="day"] #boot .cursor{ background:rgba(31,138,99,.72); }
/* --bloom 是 JS 写给每个字符的绿色辉光: 白底上发光=发脏, 一律熄掉 */
[data-theme="day"] #boot span{ text-shadow:none; }
[data-theme="day"] #boot::-webkit-scrollbar-thumb{ background:rgba(31,138,99,.26); }
[data-theme="day"] #boot::-webkit-scrollbar-thumb:hover{ background:rgba(31,138,99,.42); }
/* 输入行(样式由 terminal.js 运行时注入, 这里按同一语言覆盖) */
[data-theme="day"] .term-input-line:focus-within{ border-bottom-color:rgba(31,138,99,.28); }
[data-theme="day"] .term-input-line .prompt{ color:#2c7d5e; }
[data-theme="day"] .term-input-line:focus-within .prompt{
  color:#17704f; text-shadow:none;
}
[data-theme="day"] .term-input-line.flash{ animation-name:termFlashDay; }
@keyframes termFlashDay{
  0%{ background-color:rgba(31,138,99,.14); }
  100%{ background-color:transparent; }
}
[data-theme="day"] .term-mirror .mg{ color:rgba(31,138,99,.14); }
[data-theme="day"] .term-caret{ background:rgba(31,138,99,.7); }
[data-theme="day"] .term-input{ color:#235a45; }
[data-theme="day"] .term-input::placeholder{ color:rgba(31,138,99,.32); }
[data-theme="day"] .term-err{ color:rgba(188,68,44,.9); }
[data-theme="day"] .echo-prompt{ opacity:.6; }

/* ---- 后台登录门: 金库不再上黑漆, 改白钢保险门 ---- */
[data-theme="day"] .gate-inner{
  background:rgba(255,255,255,.97);
  border-color:rgba(41,64,86,.16);
  box-shadow:0 18px 40px -18px rgba(41,64,86,.22),
             inset 0 1px 0 rgba(255,255,255,1);
  -webkit-backdrop-filter:none; backdrop-filter:none;
}

/* ---------- 16. 主题切换过渡(2026-10-23) ----------
   平时不挂 .theme-fade, 切换瞬间由 main.js applyTheme 临时挂上 320ms。
   !important 临时压过各元素自身的 hover transition, 类移除即恢复。
   首帧不走这条路(head 内联脚本先于 CSS 定主题), 所以不会出现
   "加载时从夜过渡到昼"的闪烁。 */
.theme-fade, .theme-fade *{
  transition: background-color .25s ease, border-color .25s ease,
              color .25s ease, box-shadow .25s ease !important;
}

/* ============================================================
   v5.3 · 昼间移动端重构 (2026-10-24)
   起因: 小主反馈「手机端点一下再变白, 不舒服」。实测根因三条:
     ① 昼间协议段(2536 起)漏了 override.css 1849 行那条
        `@media(max-width:720px)` 里的移动端降级底色 ——
        .dm/.journal-card/.poem-card/... 被硬编码成 rgba(15,19,26,.90),
        白天主题下移动端所有内容卡片仍是黑块(全站 7 页实测确认)。
     ② 触屏 tap 会"粘住" :hover —— 昼间 .dm:hover 的背景是
        rgba(255,255,255,.9) 白渐变, 于是"点一下整卡翻白"。
     ③ 浏览器默认 -webkit-tap-highlight-color 是 rgba(51,181,229,.4)
        亮青, 白底上点任何元素都闪一圈蓝框。
   本段解法:
     A 组 修①②③(纯 bug 修复, 不改设计语言)
     B 组 白天主题观感重做(小主要求"设计得更好看")
   落位: 文件末尾 —— 必须在移动端三档断点之后, 才能压住 1849 行那条。
   ============================================================ */

/* ---------- A1. 干掉浏览器默认蓝色 tap 高亮 ----------
   全站统一关掉, 触觉反馈改由 :active 承担(见 A3)。
   桌面端点击行为不变(鼠标无 tap-highlight), 只影响触屏。 */
*{-webkit-tap-highlight-color:rgba(0,0,0,0);}

/* ---------- A2. 修①: 昼间移动端卡片族深色残留 ----------
   1849 行那条 @media(max-width:720px) 用 rgba(15,19,26,.90) 硬编码,
   昼间协议段只覆盖了 @supports 段(桌面), 漏了这条移动端降级。
   昼间必须整体翻白 —— 用白度阶差分层, 不靠压暗(v5.0 硬纪律)。 */
@media (max-width:720px){
  [data-theme="day"] .dm,
  [data-theme="day"] .pn-card,
  [data-theme="day"] .suggest-card,
  [data-theme="day"] .device,
  [data-theme="day"] .journal-card,
  [data-theme="day"] .poem-card,
  [data-theme="day"] .thought,
  [data-theme="day"] .beacon,
  [data-theme="day"] .sn-card,
  [data-theme="day"] .sig-item{
    background:linear-gradient(168deg, #ffffff, #f7fafd);
    -webkit-backdrop-filter:none; backdrop-filter:none;
    border-color:rgba(41,64,86,.13);
    box-shadow:0 1px 2px rgba(41,64,86,.05), 0 8px 24px -18px rgba(41,64,86,.20);
  }
  /* 移动端把 backdrop-filter 关掉了, 降级底色必须自己给足边缘 */
  [data-theme="day"] .thought{
    background:linear-gradient(90deg, rgba(176,132,66,.09), rgba(255,255,255,.9) 42%);
  }
  [data-theme="day"] .metric,
  [data-theme="day"] .bio-facts,
  [data-theme="day"] .manifesto,
  [data-theme="day"] .sig-reply-form,
  [data-theme="day"] .search-box,
  [data-theme="day"] .lightbox{
    background:linear-gradient(180deg, #ffffff, #f8fbfe);
    border-color:rgba(41,64,86,.13);
  }
  /* hero-main 同理: 移动端关了 blur, 底色不能还是暗的 */
  [data-theme="day"] .hero-main{
    background:linear-gradient(168deg, rgba(255,255,255,.92), rgba(242,246,250,.72));
  }
  /* 抽屉面板 */
  [data-theme="day"] .drawer{
    background:linear-gradient(180deg, #ffffff, #f6f9fd);
  }
}

/* ---------- A3. 修②: 触屏 :hover 粘滞 ----------
   触屏 tap 后 :hover 会保持到下一次点击别处, 昼间 hover 的白渐变
   会让整卡"啪"地翻白 —— 这是小主说的最难受的一下。
   对策: 用 @media (hover:hover) 把桌面端 hover 效果圈起来,
   触屏(hover:none)只保留 :active 的按压反馈。
   下面这些规则在 ≤720px 且 hover:none 时全部失效/改写。 */
@media (max-width:720px) and (hover:none){
  /* 卡片族: 触屏无 hover 抬升, 改由 :active 给轻微内压反馈 */
  [data-theme="day"] .dm:hover,
  [data-theme="day"] .pn-card:hover,
  [data-theme="day"] .suggest-card:hover,
  [data-theme="day"] .device:hover,
  [data-theme="day"] .journal-card:hover,
  [data-theme="day"] .poem-card:hover,
  [data-theme="day"] .thought:hover,
  [data-theme="day"] .beacon:hover,
  [data-theme="day"] .sn-card:hover{
    transform:none;
    box-shadow:0 1px 2px rgba(41,64,86,.05), 0 8px 24px -18px rgba(41,64,86,.20);
    border-color:rgba(41,64,86,.13);
  }
  /* 关键: 取消 hover 的白渐变覆盖 —— 这条就是"点一下变白"的元凶 */
  [data-theme="day"] .dm:hover,
  [data-theme="day"] .pn-card:hover,
  [data-theme="day"] .suggest-card:hover,
  [data-theme="day"] .device:hover,
  [data-theme="day"] .journal-card:hover,
  [data-theme="day"] .poem-card:hover,
  [data-theme="day"] .thought:hover,
  [data-theme="day"] .beacon:hover,
  [data-theme="day"] .sn-card:hover{
    background:linear-gradient(168deg, #ffffff, #f7fafd);
  }
  [data-theme="day"] .thought:hover{
    background:linear-gradient(90deg, rgba(176,132,66,.09), rgba(255,255,255,.9) 42%);
  }
  /* 身份色 hover 效果也一并停掉(否则会留下上浮+彩晕的"幽灵态") */
  [data-theme="day"] .dm:hover::after{ background:transparent; }
  [data-theme="day"] .dm:hover .dm-led{ background:var(--amber); box-shadow:none; }
  [data-theme="day"] .dm:hover .dm-title{ color:var(--ink); }
  [data-theme="day"] .dm:hover{
    border-color:rgba(41,64,86,.13);
    box-shadow:0 1px 2px rgba(41,64,86,.05), 0 8px 24px -18px rgba(41,64,86,.20);
  }
  /* 按下瞬间: 极轻的内压感(缩 0.99 + 内阴影), 不闪白 */
  [data-theme="day"] .dm:active,
  [data-theme="day"] .journal-card:active,
  [data-theme="day"] .poem-card:active,
  [data-theme="day"] .beacon:active,
  [data-theme="day"] .suggest-card:active,
  [data-theme="day"] .device:active,
  [data-theme="day"] .pn-card:active,
  [data-theme="day"] .thought:active,
  [data-theme="day"] .sn-card:active{
    transform:scale(.994);
    box-shadow:inset 0 2px 6px rgba(41,64,86,.10);
  }
  /* 导航项: 触屏无 hover 底色(白底上会糊成一片), 只留 active 态 */
  [data-theme="day"] .nav a:hover{ background:transparent; }
  [data-theme="day"] .nav a.active{ background:rgba(47,110,168,.10); }
  /* 芯片: hover 变色停掉, active 态才是唯一高亮 */
  [data-theme="day"] .chip:hover{
    color:var(--muted); border-color:rgba(41,64,86,.16);
  }
  [data-theme="day"] .p-link:hover{
    background:transparent; border-color:rgba(41,64,86,.16);
  }
  [data-theme="day"] .drawer-close:hover{
    color:var(--muted); border-color:rgba(41,64,86,.16);
  }
}

/* ---------- A3b. 触屏通用: 无前缀的 hover 上浮规则要一并压掉 ----------
   坑位: override.css 728 行的 `.dm:hover{transform:translateY(-4px)}` 与
   2205 行的 `.dm:hover{background-image:radial-gradient(...)}` 都是
   无 [data-theme] 前缀的全局规则, 触屏上 :hover 粘住 → 卡片会永久
   上浮 4px 并带一圈身份色彩晕, 停在"被点亮的"状态, 直到下一次点击。
   对策: 在 hover:none 设备上把卡片族的 hover transform/背景图清掉,
   桌面端(mouse)完全不受影响。
   顺序要点: 指针光斑(background-image)只在昼间之外有意义,
   所以昼间的白纸渐变用更高特异性的选择器兜住, 不受这里的清除影响。 */
@media (hover:none){
  .dm:hover, .pn-card:hover, .suggest-card:hover, .device:hover,
  .journal-card:hover, .poem-card:hover, .thought:hover, .beacon:hover{
    transform:none;
    background-image:none;
  }
  /* :active 是真按压, 保留轻微缩放作为触觉反馈 */
  .dm:active, .journal-card:active, .beacon:active, .suggest-card:active,
  .poem-card:active, .pn-card:active{
    transform:scale(.988);
    transition-duration:var(--d-1);
  }
}


/* ---------- B. 白天主题观感重做 (v5.3) ----------
   v5.0「明视白」的问题(小主原话"不好看"的延续):
     · 全页一片白, 卡片白 / 面板白 / 底色白, 层次靠 3% 的白度差撑,
       移动端几乎读不出来 → 卡片像"没画完"
     · 卡片顶部那条 3px 状态条(ice→amber 渐变)在白底上很扎眼
     · 卡片左缘 3px 竖条是半透明灰, 白底上等于没有
     · 正文行高偏紧, 长段落一屏白到底, 没有呼吸
   新方向「纸感仪器」: 白是纸, 阴影是光, 钢蓝是刻度, 铜是暖点。
     - 卡片改"实白 + 明确冷蓝描边 + 双层投影"(有厚度, 不是贴纸)
     - 左缘竖条改实心身份色, 成为"这个卡片属于哪个模块"的标识
     - 顶栏状态条压到 2px 且降饱和, 从"告警条"降级为"分类条"
     - 正文行高 1.7 → 1.85, 段落间距加大, 白底长读才不累
     - 段间加一条渐隐刻线, 分层不靠间距硬撑 */

/* B1. 卡片: 有厚度的白纸 */
[data-theme="day"] .dm,
[data-theme="day"] .pn-card,
[data-theme="day"] .suggest-card,
[data-theme="day"] .device,
[data-theme="day"] .journal-card,
[data-theme="day"] .poem-card,
[data-theme="day"] .sn-card{
  background:linear-gradient(168deg, #ffffff 0%, #fafcfe 58%, #f4f8fc 100%);
  border:1px solid rgba(41,64,86,.15);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 1px 1px rgba(41,64,86,.04),
    0 10px 26px -16px rgba(41,64,86,.24);
  position:relative;
  overflow:hidden;
}
/* 左缘竖条: 实心身份色, 白底上唯一能一眼分辨模块的锚点 */
[data-theme="day"] .dm::before{
  width:3px;
  background:color-mix(in oklab, var(--h, var(--ice)) 72%, #ffffff);
  box-shadow:1px 0 0 rgba(41,64,86,.06);
}
/* 卡片右上角 LED: 白底上用深一点的同色, 别再发散光 */
[data-theme="day"] .dm-led{
  background:color-mix(in oklab, var(--h, var(--amber)) 62%, #ffffff);
  box-shadow:none;
  opacity:.85;
}
/* B2. 项目卡顶部状态条: 3px 告警感 → 2px 分类感 */
[data-theme="day"] .dm.launch .dm-status{
  height:2px;
  opacity:.55;
  background:linear-gradient(90deg,
    color-mix(in oklab, var(--h, var(--ice)) 80%, transparent),
    color-mix(in oklab, var(--amber) 55%, transparent));
}
/* B3. 标签行: 身份色实一点, 白底上要立得住 */
[data-theme="day"] .dm-tag{
  color:color-mix(in oklab, var(--h, var(--amber-dim)) 82%, var(--ink));
  letter-spacing:2.4px;
}
/* B4. 标题: 白底上用更实的墨蓝, 别再灰 */
[data-theme="day"] .dm-title{
  color:#22384f;
  letter-spacing:.3px;
}
/* B5. 正文: 行高放开, 白底长读的舒适度全在这里 */
[data-theme="day"] .dm-body{
  color:var(--muted);
  line-height:1.85;
  font-size:14px;
}
/* B6. 筛选芯片: active 用"钢蓝实底 + 白字", 非 active 白纸描边 */
[data-theme="day"] .chip{
  background:linear-gradient(180deg, #ffffff, #fbfdff);
  border-color:rgba(41,64,86,.16);
  color:var(--muted);
  box-shadow:0 1px 2px rgba(41,64,86,.05);
}
[data-theme="day"] .chip.active{
  background:linear-gradient(180deg, #3579b6, #2f6ea8);
  border-color:#2b6499;
  color:#ffffff;
  box-shadow:0 2px 8px -3px rgba(47,110,168,.5);
}
/* B7. 卡片内小链接: 白底上给个实底胶囊, 靠形状而不是靠色区分 */
[data-theme="day"] .p-link{
  background:#ffffff;
  border-color:rgba(41,64,86,.16);
  color:#3c6f9c;
  box-shadow:0 1px 2px rgba(41,64,86,.05);
}
[data-theme="day"] .stack span{
  background:#ffffff;
  border-color:rgba(41,64,86,.14);
  color:#4a7191;
}
/* B8. 项目卡底部元信息: 加一条渐隐刻线, 分层不靠间距硬撑 */
[data-theme="day"] .launch-meta{
  border-top:1px solid rgba(41,64,86,.10);
  padding-top:12px;
  margin-top:14px;
  color:#63788d;
}
[data-theme="day"] .launch-meta b{ color:#2f6ea8; }
/* B9. 移动端段落呼吸: 白底长读 */
@media (max-width:720px){
  [data-theme="day"] .dm-body{ line-height:1.9; }
  [data-theme="day"] .dm{ padding:18px 16px 16px; }
  [data-theme="day"] .dm-title{ font-size:1.12rem; margin:10px 0 8px; }
}
/* B10. 悬浮控件小字对比度补丁(实测 eco-toggle 2.36:1 / signal-meter 2.34:1) */
[data-theme="day"] .eco-toggle{ color:#5b7086; }
[data-theme="day"] .signal-meter{ color:#5b7086; }
[data-theme="day"] .signal-msg{ color:#5b7086; }
[data-theme="day"] .sig-sort{ color:#5b7086; }
[data-theme="day"] .sig-sort.on{ color:#2f6ea8; }

/* B10b. 昼间移动端悬浮控件减重 ----------
   问题: 这几个控件是 fixed 层, 永远压在内容上。深色主题里它们是
   深色浮块(与深底融), 不显眼; 白天主题它们是半透明白块 + 边框,
   在浅底上反而更"跳" —— 实测「省电」按钮横压在项目卡的 DATE 行上,
   SIG 计量条压着标签行。
   对策(不改功能, 只降视觉重量):
     - 边框压到几乎不可见, 只留一点点边缘
     - 文字色退到次级
     - 信号条本身降透明度
   触屏上「省电」是真实可点的, 所以保留足够可点面积, 只改观感。 */
@media (max-width:720px){
  [data-theme="day"] .eco-toggle,
  [data-theme="day"] .signal-meter,
  [data-theme="day"] .sound-toggle,
  [data-theme="day"] .theme-toggle,
  [data-theme="day"] .console-toggle{
    border-color:rgba(41,64,86,.07);
    box-shadow:0 1px 6px -3px rgba(41,64,86,.14);
    opacity:.42;
  }
  [data-theme="day"] .eco-toggle:active,
  [data-theme="day"] .sound-toggle:active,
  [data-theme="day"] .theme-toggle:active,
  [data-theme="day"] .console-toggle:active{ opacity:.85; }
  [data-theme="day"] .signal-meter{ opacity:.32; }
  [data-theme="day"] .signal-bars span{ background:rgba(47,110,168,.22); }
  [data-theme="day"] .signal-bars span.active{
    background:#2f6ea8; box-shadow:none;
  }
}

/* ---------- B15. 移动端尾部留白收口 ----------
   问题: section.block 用 content-visibility:auto + contain-intrinsic-size
   预留了 300px 高度, 页面内容不足时, 尾部会留出一大片空白
   (实测项目页卡片结束后到页脚之间约 200px 空档, 白底上尤其显眼)。
   对策: 移动端把预留高度压到 120px, 并收紧 block 的下内边距。 */
@media (max-width:720px){
  [data-theme="day"] section.block{ padding:44px 0 30px; }
  [data-theme="day"] section.block{ contain-intrinsic-size:auto 120px; }
  [data-theme="day"] .footer{ margin-top:20px; padding:26px 0 84px; }
}



/* ---------- B11. 流星雨层次: 白底上诗句不能压到标题 ----------
   问题: 昼间把诗句反转成浅色(.30 透明度), 但 .meteor-rain 的 z-index:-1
   让它落到内容底, 被浅色底"顶"出来 —— 实测在项目页标题「项目」左侧
   直接透出「暮色浸染之际不知道该怎么做」, 读作错位的乱码。
   对策: ① 整体压到几乎不可见(.10) ② 诗句行本身用正 z-index + 极低
   透明度, 让它待在背景层而不是穿透到文字中间
   ③ 移动端直接关掉诗句行 —— 竖屏没有空间容纳, 只会挤占标题区。 */
[data-theme="day"] .meteor-rain{ opacity:.10; }
[data-theme="day"] .meteor-line{
  opacity:.30;
}
@media (max-width:720px){
  [data-theme="day"] .meteor-rain{ opacity:.07; }
  [data-theme="day"] .meteor-line{ display:none; }
}

/* ---------- B12. 档案戳记: 装饰层必须真在内容之下 ----------
   问题: .archive-marks 是 z-index:56 的 fixed 层, 戳记 stamp-a/b 是
   position:absolute 定位在视口底部 —— 白天主题下它们半透明但仍压在
   卡片正文上(实测「HAND-NUMBERED · 001」横穿项目卡的 DATE 行),
   读起来像渲染错误而不是印章。
   对策: 白天把戳记压到几乎不可见 + 挪到视口角落, 移动端直接隐藏。 */
[data-theme="day"] .archive-marks{ z-index:0; }
[data-theme="day"] .stamp{
  color:rgba(176,132,66,.16);
  border-color:rgba(176,132,66,.15);
}
[data-theme="day"] .stamp-b{
  color:rgba(63,100,140,.13);
  border-color:rgba(63,100,140,.12);
}
[data-theme="day"] .wm-nietzsche{ color:rgba(93,143,190,.06); }
@media (max-width:720px){
  [data-theme="day"] .stamp-a,
  [data-theme="day"] .stamp-b{ display:none; }
  [data-theme="day"] .wm-nietzsche{ opacity:.5; }
}

/* ---------- B13. 卡片左缘竖条: 用页面身份色 ----------
   .dm:nth-child(n) 的身份色只在首页总览卡生效(六卡 = 六模块色),
   模块页(项目/日志/思考)的卡片没有自己的 --h, 只能落到 var(--ice) 蓝。
   但 main.js 已经按路径给 body 打了 data-page 并挂了页面级 --h
   (见 2290 段), 所以这里直接继承 body 的 --h —— 一个模块一种色,
   白底上一眼就知道自己在哪一页。
   注意: [data-theme="day"] 在 <html> 上, 必须写成 :root[data-theme=...]
   或 body 规则内部, 不能写成 [data-page] [data-theme]。
   形态: 原设计是"贴着卡片左缘的满高竖条", 但卡片有 16px 圆角 +
   overflow:hidden, 竖条两端被圆角削掉, 看着像残缺的线。
   改成"内缩短竖条"(离顶 14px / 离底 14px), 是完整的一条, 更像标识。 */
:root[data-theme="day"] body[data-page] .dm::before{
  top:14px;
  bottom:14px;
  height:auto;
  border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,
    color-mix(in oklab, var(--h, var(--ice)) 88%, #ffffff),
    color-mix(in oklab, var(--h, var(--ice)) 52%, #ffffff));
}
/* 项目卡顶条与左条同色系, 一张卡一个身份 */
:root[data-theme="day"] body[data-page] .dm.launch .dm-status{
  background:linear-gradient(90deg,
    color-mix(in oklab, var(--h, var(--ice)) 82%, transparent),
    rgba(176,132,66,.42));
}
/* 顶条上的身份色在昼间也要配套(非项目卡的 launch 变体) */
:root[data-theme="day"] body[data-page] .dm .dm-tag{
  color:color-mix(in oklab, var(--h, var(--amber-dim)) 82%, var(--ink));
}

/* ---------- B14. 标签胶囊降噪 ----------
   问题: 昼间标签 .stack span 给的是纯白底 + 钢蓝字, 字号 10px 但
   字距 1px、padding 2px 8px —— 白底上它比标题还黑, 抢戏。
   改成"极淡底 + 无边框 + 更小的字", 让它退回背景信息层。 */
[data-theme="day"] .stack span{
  background:rgba(47,110,168,.06);
  border-color:transparent;
  color:#5a7590;
  font-size:9.5px;
  letter-spacing:.8px;
  padding:3px 8px;
}

/* ---------- B15. 昼间白纸渐变兜底 ----------
   A3b 段在 (hover:none) 设备上清了 background-image(指针光斑),
   那条规则无 [data-theme] 前缀, 会把这里的白纸渐变一起清掉 ——
   结果是白天卡片在手机上塌成纯白, 失去厚度。
   对策: 用带 :root[data-theme] 前缀的高特异性选择器重新兜住,
   保证昼间卡片在触屏上依然是有渐变层次的纸面。 */
:root[data-theme="day"] .dm,
:root[data-theme="day"] .pn-card,
:root[data-theme="day"] .suggest-card,
:root[data-theme="day"] .device,
:root[data-theme="day"] .journal-card,
:root[data-theme="day"] .poem-card,
:root[data-theme="day"] .sn-card{
  background-image:linear-gradient(168deg, #ffffff 0%, #fafcfe 58%, #f4f8fc 100%);
}
:root[data-theme="day"] .dm:hover,
:root[data-theme="day"] .pn-card:hover,
:root[data-theme="day"] .suggest-card:hover,
:root[data-theme="day"] .device:hover,
:root[data-theme="day"] .journal-card:hover,
:root[data-theme="day"] .poem-card:hover,
:root[data-theme="day"] .sn-card:hover{
  background-image:linear-gradient(168deg, #ffffff 0%, #fafcfe 58%, #f4f8fc 100%);
}





/* ---------- A3c. 触控按压幅度调温和 ----------
   通用按钮按压是 scale(.965)(59 行), 触屏上点一下缩掉 3.5% 视觉上很跳,
   尤其筛选 chip 是 44px 触控目标, 缩放后像"被按瘪了"。
   昼间触屏统一收到 .985 —— 仍有按下实感, 但不狼狈。 */
@media (hover:none){
  [data-theme="day"] .btn:active,
  [data-theme="day"] .chip:active,
  [data-theme="day"] .mobile-nav-toggle:active,
  [data-theme="day"] .code-copy:active{
    transform:scale(.985);
  }
}

/* ============================================================
   v5.3 · 移动端导航抽屉「模态化」 (2026-10-25)
   小主报: 手机端首页点开抽屉后, 背景还能往下拉/拖动; 元素偶有抽动,
   看起来很劣质。三个根因全部实测确认(见 2026-10-25 探针记录):
     1) 滚动锁失效 —— 旧 lockScroll 锁的是 body{overflow:hidden}, 但全局
        有 html{overflow-x:clip}; 按规范 body 的 overflow 只在 html 的
        overflow 为 visible 时才传播到视口, 本站真正的滚动容器是 html。
        实测抽屉打开时背景仍从 scrollY 0 被拖到 385/543。
     2) 抽动 = 滚动 —— body 被迫成为滚动容器后 position:sticky 的 HUD
        参照系突变, 跟着跳 -600px。layout-shift 实测干净(开关抽屉 0 条),
        帧率 100fps, 所以不是回流也不是 GPU 瓶颈, 纯粹是"页面被拖走"。
     3) 层级 —— .nav-back z-index 48 < .nav 49, 菜单项可点(实测命中 A)。
   修法:
     A. JS 端 lockScroll 改为锁 html 的 overflow-y(见 main.js), 背景冻结;
     B. html.nav-open 时禁掉橡皮筋与触摸拖拽, 手指在背景上"搓"也不动;
     C. 背景整体压暗 + 轻微降饱和, 视觉上明确"抽屉接管了页面",
        不再像背景还能被操作;
     D. 抽屉项按下反馈改为底部亮边(不再缩放位移), 消掉触屏上的抖动;
     E. 抽屉内加一条"选择一项以继续"的提示条, 把"必须选一个"讲明白。
   ---------------------------------------------------------------- */

/* ---------- B1. 背景冻结: 抽屉开着时, 页面是一张静止的底片 ----------
   overscroll-behavior:none 掐掉 iOS/Android 的橡皮筋回弹与滚动链;
   touch-action:none 让手指在背景上滑动完全不产生滚动。 */
html.nav-open{
  overscroll-behavior:none;
  -webkit-overflow-scrolling:auto;
}
html.nav-open body{
  touch-action:none;
}
/* 背景内容整体后退一层: 压暗 + 轻微降饱和 + 极小的缩放。
   目标选择器是 body > section —— .wrap 实际嵌套在 section 内部
   (section.hero > div.wrap), 直接写 body > .wrap 匹配不到任何元素。
   body > section 覆盖全部内容区块, 又不含 header.hud(顶栏)与
   body 下的装饰层(space-bg/grid-overlay/scanlines 等 fixed 层),
   不会误伤固定定位元素。 */
html.nav-open body > section{
  filter:saturate(.7) brightness(.55);
  transform:scale(.985);
  transform-origin:50% 0;
  transition:filter var(--d-3) var(--ease-out), transform var(--d-3) var(--ease-out);
  pointer-events:none;   /* 背景彻底不可点: 只能操作抽屉 */
}
body > section{
  transition:filter var(--d-3) var(--ease-out), transform var(--d-3) var(--ease-out);
}
/* HUD 是 sticky, 单独排除在压暗之外 —— 顶栏保持清晰, 层级才对 */
html.nav-open .hud{
  filter:none;
}

/* ---------- B2. 抽屉本体: 明确"接管"姿态 ----------
   加一圈内描边 + 更硬的下投影, 与背景拉开层次; 收起时用更快的过渡,
   避免慢悠悠的淡出拖出廉价感。 */
@media (max-width:860px){
  .nav{
    border-color:var(--line-strong);
    box-shadow:0 18px 46px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04) inset;
  }
  .nav.open{ transition:transform var(--d-4) var(--ease-enter), opacity var(--d-2) var(--ease-out); }
  .nav:not(.open){ transition:transform var(--d-3) var(--ease-out), opacity var(--d-2) linear; }

  /* 抽屉项: 按下只亮底边, 不缩放不平移 —— 触屏上的抖动多半来自 scale */
  .nav a:active{
    transform:none;
    background:var(--line);
    border-color:var(--line-strong);
  }
  .nav a{
    -webkit-tap-highlight-color:transparent;
  }
  .nav a:focus-visible{
    outline:1px solid var(--amber);
    outline-offset:-1px;
  }
}

/* ---------- B3. 抽屉内的提示条 ----------
   "选择一项以继续" —— 把小主要求的交互语义写进界面, 顺手也告诉
   用户背景此刻是被锁住的(点空白仍可收起, 但明确说了主路径)。 */
.nav-hint{
  display:none;
  margin:2px 0 10px;
  padding:7px 10px;
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:1.6px;
  color:var(--muted);
  border:1px dashed var(--line);
  border-radius:var(--r-s);
  text-align:center;
  opacity:0;
  transform:translateY(-6px);
  transition:opacity var(--d-2) var(--ease-out), transform var(--d-2) var(--ease-out);
}
@media (max-width:860px){
  .nav.open .nav-hint{ display:block; opacity:1; transform:none; transition-delay:.05s; }
}
[data-theme="day"] .nav-hint{
  color:#5a7590;
  border-color:rgba(47,110,168,.22);
  background:rgba(47,110,168,.05);
}

/* ---------- B4. 昼间: 背景压暗换成"天光收拢", 不是黑幕 ----------
   昼间不用 brightness(.72)(钢白底一压就糊成脏灰), 改用轻微压暗 +
   降饱和, 保持干净, 只把注意力交给抽屉。
   选择器用 html[data-theme="day"].nav-open —— data-theme 挂在 <html> 上,
   写成 [data-theme="day"] html.nav-open 是"html 的后代里有 data-theme 元素",
   匹配不到, 昼间这条会整条失效。 */
html[data-theme="day"].nav-open body > section{
  filter:saturate(.82) brightness(.88);
}
/* 昼间的导航遮罩: .nav-back 是 v5.0 独立出来的遮罩类, 它的
   .on 用的是夜间 rgba(0,0,0,.62) 黑幕, 昼间没有对应覆盖 ——
   于是昼间点开抽屉会糊一层脏黑, 与"明视白"的调子冲突。
   改成钢蓝压暗(与 .drawer-back 的昼间规则同色系)。 */
html[data-theme="day"] .nav-back.on{
  background:rgba(74,116,158,.30);
}

/* ============================================================
   v5.5 · 触屏「点哪都不许抽」 (2026-10-30)
   小主报: 手机是触屏, 很容易点到画面元素(即使本来就不是按钮),
   但点到很多元素就会开始抽搐。不是恶性 bug, 但手感很廉价。

   实测(Playwright + CDP 真实触摸 + document.getAnimations()):
     一、主因在 motion.js 的全局按压反馈 —— 命中范围含 .dm/.news-item/
         .metric/.card/.tile 这些**内容容器**, 抬手走
         scale(1) → scale(1.035) → scale(1), 380ms 弹簧, **过冲 3.5%**。
         362px 宽的卡片 3.5% = 放大 12px, 点一下整张卡"弹"一下;
         连点几下 = 抽搐。且触摸滚动时 pointerdown 也触发, 一按就缩,
         滑动手感也跟着脏。→ 已在 motion.js 触屏分支整套关闭。
     二、.ri 入场过渡污染交互 —— .ri 的 transition:transform var(--d-3)
         是 420ms, 入场后一直挂在元素上; 之后任何 transform 变化都被
         拉成 420ms 慢动作。→ main.js 入场后打 .ri-done, 本段收回短时长。
     三、hover 位移清理有盲区 —— 原 @media (hover:none) 只写了
         max-width:720px, 而站点移动端断点是 860px; 且漏了
         .to-top/.metric/.btn/.bio-facts/.news-item/.sig-item/.sr-item。
         → 本段用不限宽的 @media (hover:none) 全量接管。
     四、hover 里的布局属性 —— .dm:hover .dm-link{padding-left:7px}
         改的是 padding, 每帧触发布局, 比 transform 贵得多。→ 触屏归零。
   原则: 触屏只保留 :active 的瞬时轻反馈, 一切 hover 位移/缩放归零。
   ---------------------------------------------------------------- */

/* ---------- C1. 入场完成后, 把过渡交还给交互 ----------
   .ri 的 420ms 是为了"入场"这件事, 不该成为永久的交互成本。
   入场结束加 .ri-done 后, transform 走 130ms(--d-1) —— 按下去是
   "立刻有反应", 而不是"慢慢抽一下"。 */
.ri.ri-done{
  transition:opacity var(--d-2) var(--ease-out), transform var(--d-1) var(--ease-out);
  transition-delay:0ms;
}

/* ---------- C2. 触屏: 全量清除 hover 位移/缩放 ----------
   不限宽度 —— 站点移动端断点是 860px, 而原先只写了 720px,
   721~860px(大屏手机/小平板)整段是裸奔的。
   这里只动 transform, 不碰颜色/边框 —— 触屏上颜色变化不会"抽"。 */
@media (hover:none){
  .btn:hover,
  .metric:hover,
  .bio-facts:hover,
  .to-top:hover,
  .news-item:hover,
  .sig-item:hover,
  .search-results .sr-item:hover,
  .legal-close:hover,
  .lightbox .lb-nav:hover,
  .pn-card:hover,
  .poem-card:hover,
  .journal-card:hover,
  .dm:hover,
  .beacon:hover,
  .thought:hover,
  .suggest-card:hover,
  .device:hover,
  .hero-promo:hover{
    transform:none;
  }
  /* 内部件也一并停: 箭头滑出 / LED 放大 / 顶线拉开 都是 tap 后残留的"幽灵态" */
  .news-item:hover .news-arr,
  .dm:hover .dm-link::after,
  .dm-link::after{
    transform:none;
  }
  .dm:hover .dm-led,
  .pn-card:hover .led,
  .device:hover .led,
  .beacon:hover .led{
    transform:none;
    animation:none;          /* 关键: LED 的 led-hum 是 infinite, tap 后一直闪 */
  }
  /* hover 里改 padding 会触发布局重排 —— 比 transform 贵一个量级 */
  .dm:hover .dm-link{ padding-left:0; }
  /* 顶线(::after)的 scaleX 拉开: 触屏上 v5.3 段已 display:none, 这里补兜底 */
  .dm:hover::after,
  .journal-card:hover::after,
  .pn-card:hover::after,
  .suggest-card:hover::after,
  .device:hover::after,
  .beacon:hover::after{
    transform:scaleX(0);
  }
}

/* ---------- C3. 触屏的按压反馈: 统一、克制、瞬时 ----------
   hover 全部归零之后, 触屏上唯一的"按下感"必须来自 :active。
   统一 1.5% 内压 + 130ms, 不用弹簧曲线、不做过冲 ——
   过冲就是"弹一下", 触屏上会显得廉价。 */
@media (hover:none){
  .dm:active,
  .pn-card:active,
  .poem-card:active,
  .journal-card:active,
  .beacon:active,
  .thought:active,
  .suggest-card:active,
  .device:active,
  .news-item:active,
  .sig-item:active,
  .metric:active,
  .btn:active,
  .chip:active{
    transform:scale(.985);
    transition-duration:var(--d-1);
    transition-timing-function:var(--ease-out);
  }
  /* 小的圆形控件(回到顶部/主题/声音)按 .96, 更贴近手指 */
  .to-top:active,
  .theme-toggle:active,
  .sound-toggle:active,
  .eco-toggle:active{
    transform:scale(.94);
    transition-duration:var(--d-1);
  }
}

/* ---------- C4. 触屏关掉 will-change ----------
   .btn/.chip 挂着 will-change:transform, 触屏上每个这样的元素都会
   单独提升合成层。卡片多的时候(日志页/项目页)层数暴涨, 滚动时
   合成开销反而上升 —— 这正是"偶有抽动"的体感来源之一。 */
@media (hover:none){
  .btn, .chip, .input, .guide-input button, .search-toggle,
  .mobile-nav-toggle, .code-copy{
    will-change:auto;
  }
}