/* ============================================================
   奶蛙主题站 · 共享设计系统（Base Layer）
   ------------------------------------------------------------
   规则：令牌先于组件，体系先于样式。
   1) 所有页面共用这一份令牌 —— 换外观只改这里
   2) 页面只写"这个功能区独有的排版"，不重写按钮/卡片/页头
   3) 调色取自社区官方设计系统（Nailong Dark/Light：
      milkYellow #FFD54F / eyeGreen #66BB6A）。

   2026-10-16 · 视觉改版：由「极简暖黑」改为「孟菲斯 · 神圣化收紧」
   ------------------------------------------------------------
   用户从 10 套风格 demo 中选定 06 孟菲斯，随后按「简约、高级、
   神圣，不要堆砌」收紧。决策记录：ADR-26（选型）、ADR-27（收紧）。
   规格见 docs/23，本文是它的落地态。

   四件套（孟菲斯基因）：
     粗描边 3px 墨色实线｜硬投影 Npx Npx 0 零模糊纯墨｜
     奶黄+墨两色（撞色已退役）｜CSS 几何装饰（每页 ≤2，全墨色）
   神圣化六条（ADR-27）：
     ① h1/h2 衬线展示栈（系统栈，不引 webfont）
     ② 装饰每页 ≤2 且只用墨色
     ③ 强调色收到奶黄+墨；粉仅 focus 环且必须深档
     ④ hover 无位移，只做底色互换
     ⑤ 动效：短促交互、轻量入场与原生跨页过渡（2026-10 更新）
     ⑥ section 上下 96px（移动 64px）
   页面级样式在共享层之后注入，同优先级后者胜 ——
   共享层已有的类，页面再写一遍就是 bug（docs/23 §8）。
   ============================================================ */

:root{
  /* —— 表面：纸墨四档 ——
     奶黄（页面底）/ 奶油（区块交替、导航、数据条）/
     纸白（卡片面、主体图片的衬底）/ 墨（深面板）。
     不用纯黑纯白：纯黑压抑、纯白刺眼，两者都"不神圣"。
     语义名（--bg/--panel/--line…）指回新表面，
     所有 background:var(--bg) 的规则不用改一句就跟着翻亮。 */
  --yellow:#FFD54F;          /* 页面底。官方 milkYellow 原值，不降饱和 */
  --cream:#FFF6E0;           /* 区块交替 .sec-alt / 导航 / 数据条 / 工具条 */
  --paper:#FFFDF6;           /* 卡片面、主体图片的衬底（docs/23 §3.1）*/
  --ink:#1A1712;             /* 深面板 / 文字 / 描边 / 硬投影 */

  --bg:var(--yellow);  --bg-2:var(--cream);
  --text:var(--ink);
  --text-2:#6B6257;          /* 次要文字：纸白上 6.0:1、奶黄上 5.7:1（docs/23 §4）*/
  --muted:#6B6257;  --dim:#6B6257;
  /* 分界线即墨线。孟菲斯没有「淡到看不见的分界」，只有 2~3px 的实线。
     （--panel / --panel-2 / --line / --line-soft 是换肤期的过渡别名，
       迁移完成后全站零引用，2026-10-17 删除。） */
  --line-hard:var(--ink);

  /* —— 品牌色 ——
     --gold 与 --yellow 同值，但语义变了：亮底上不作文字色（与页面底
     同色，读不出），只作深底上的文字色（页脚 / 深面板内联链接）。
     官方调色板里本站当前没有用到：milkYellowLight #F9A825 · 奶蛙肚皮 #F5EBD5 */
  --gold:var(--yellow);
  --green:#66BB6A;           /* 官方 eyeGreen —— 只用于「眼睛/活力/可玩」语境 */
  --green-d:#2E7D32;         /* 绿字落在亮底上必须用深档（5.4:1）；#66BB6A 只有 2.2:1 */

  /* —— 强调色（ADR-27）：三撞色已退役，收到「奶黄 + 墨」两色。
       粉仅保留 focus 环，且必须用深档 —— 原粉 #FF6B9D 在三种亮底上
       只有 1.9~2.6:1，不达 WCAG 非文本 3:1；#C2185B 为 4.2~5.8:1。 —— */
  --pink-d:#C2185B;          /* 仅 focus 环（outline:3px + offset:2px）*/

  /* —— 衬线展示栈（ADR-27）：只翻大标题，正文仍无衬线。
       系统栈，不引 webfont —— Noto Serif SC 全量子集数百 KB，撞性能铁律。
       访客多数落 Songti SC（macOS）或宋体（Windows），大字号 + 900 字重可读。 —— */
  --serif-display:"Noto Serif SC","Source Han Serif SC","Songti SC","STSong",Georgia,serif;
  --sans: "PingFang SC","HarmonyOS Sans SC","Helvetica Neue","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono: ui-monospace,"SF Mono","JetBrains Mono",Consolas,"Courier New",monospace;

  /* —— 描边与硬投影（零模糊、纯墨）—— */
  --bw:3px;                        /* 主描边；chip / 表头 / 深面板内元素用 2px */
  --bw-cream:2px solid var(--cream);   /* 深色面板**内部**的分界线（墨叠墨看不见）*/
  --sd-1:3px 3px 0 var(--ink);     /* chip、徽标 */
  --sd-2:5px 5px 0 var(--ink);     /* 按钮 */
  --sd-3:7px 7px 0 var(--ink);     /* 卡片 */
  --sd-4:11px 11px 0 var(--ink);   /* 卡片 hover（只加深，不位移）*/

  /* —— 动效：保留原品牌色与硬投影，增加短促、克制的位移与跨页衔接。
       内容动效只使用 opacity/transform；不延迟导航，不劫持滚动。 —— */
  --dur-ui:.25s;
  --ease-soft:cubic-bezier(.22,.61,.36,1);
  --ease:var(--ease-soft);     /* 旧名，页面级 transform 过渡仍在用 */

  /* —— 尺度 ——
     容器放宽到 1400：宽屏不再是一条窄柱 + 两侧死地（docs/22 §3）。
     段落另有 em 度量，不靠收容器来控行宽。 */
  --wrap: 1400px;
  /* 连续大圆角：小圆角读起来"贴纸"，大圆角读起来"器件" */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 26px;
  --r-pill: 999px;
  --nav-h: 64px;

  /* —— 字号尺度（唯一来源，docs/22 §1）——
     七档、彼此拉开 ≥1.12 倍，外加一个展示档（--fs-hero，见下）。
     页面局部不得出现这七档之外的字号 —— 需要新字号就是需要新档：
     先在令牌层立档、写进 docs/23 §2.4，再在页面里引用；不许在页面里就地写 clamp。
     正文这一档从 16 → 17px：中文在 16px 下偏紧，17 才有"舒展"。 */
  --fs-xs:   12.5px;                        /* mono 数据 / 元信息，下限 */
  --fs-sm:   0.875rem;                      /* 14px 次要说明、图注 */
  --fs-md:   1.0625rem;                     /* 17px 正文（唯一主档） */
  --fs-lg:   1.3125rem;                     /* 21px 引言 / 摘要 */
  --fs-xl:   1.625rem;                      /* 26px 卡片标题、h3 */
  --fs-2xl:  clamp(2rem,3.4vw,2.875rem);    /* 32→46 区块标题 h2 */
  --fs-3xl:  clamp(3rem,7vw,5.5rem);        /* 48→88 页面主标题 h1 */

  /* 展示档：七档之外，唯一被批准的例外（docs/23 §2.4）。
     只给首页站名用 —— 全站只有它是一幅"字本身即主视觉"的字。
     放在令牌层而不是首页里，是为了让首页 <style> 里一个字号字面量都不剩：
     例外是允许的，例外的数字散在各页面里不行。 */
  --fs-hero: clamp(4.4rem,14vw,12rem);

  /* —— 间距尺度（4 为基数，docs/22 §2）—— */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
  --gap: clamp(16px,1.7vw,26px);            /* 卡片间距 */

  /* —— 垂直节奏（ADR-27 §3.8）——
     section 之间的间隙要明显大于 section 内部的任何间隙。
     96px（移动 64px）仍是 4 的倍数，不破 ADR-21。
     卡片内边距与网格间距不变 —— 密度问题只在段与段之间。 */
  --sp-sec:96px;
  /* 页头/工具条之后的第一段：工具条本身已经提供了一部分分隔，
     这里用较紧但仍站得住的档位，别把首屏内容顶到页头上。 */
  --sec-tight: clamp(40px,4vw,64px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans);
  font-size:var(--fs-md); line-height:1.75;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* 浏览器表面：选中色、光标、滚动条 —— 这些默认样式不属于任何设计系统。 */
::selection{ background:var(--ink); color:var(--yellow); }
html{ caret-color:var(--ink); }
/* 焦点框：全站唯一保留的粉，且是深档（docs/23 §4：原粉不达非文本 3:1）。
   不写 border-radius —— 现代浏览器的 outline 自动跟随元素自身的圆角。 */
:focus-visible{ outline:3px solid var(--pink-d); outline-offset:2px; }
a:focus-visible{ outline-offset:4px; }
.stat b, .count-line b, time, [data-num]{ font-variant-numeric:tabular-nums; }
@supports (scrollbar-color:auto){
  html{ scrollbar-color:rgba(26,23,18,.34) transparent; scrollbar-width:thin; }
}
@supports selector(::-webkit-scrollbar-thumb){
  ::-webkit-scrollbar{ width:10px; height:10px; }
  ::-webkit-scrollbar-track{ background:transparent; }
  ::-webkit-scrollbar-thumb{
    background:rgba(26,23,18,.3); border:3px solid transparent; background-clip:padding-box;
  }
  ::-webkit-scrollbar-thumb:hover{ background:rgba(26,23,18,.5); background-clip:padding-box; }
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
ul,ol{ margin:0; padding:0; list-style:none; }
.wrap{ width:min(var(--wrap),92vw); margin-inline:auto; }
/* 底部与顶部同距：96px 已是呼吸的主体，不再另加 8%。
   position:relative 保留 —— 几何装饰（.deco）靠它定位。 */
.sec{ padding-block:var(--sp-sec); position:relative; }
/* 区块交替：硬边界才会读成"另一个区块"，渐隐只会读成"一块脏" */
.sec-alt{ background:var(--bg-2); }
/* 页头之后的第一个 .sec：页头本身已经提供了一部分分隔，不必再吃满 96px。
   原先 13 个页面各写一遍 style="padding-top:var(--sec-tight)" ——
   一条类解决，改节奏不用再翻 13 个文件。 */
.sec-tight{ padding-top:var(--sec-tight); }
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:12px; top:12px; z-index:999; padding:.6em 1em; background:var(--ink); color:var(--yellow); border-radius:var(--r-sm); }

/* ---------- 通用排版 ----------
   中文标题字距 0，不套用拉丁的负字距。
   ADR-27：h1/h2 衬线化（神圣感的主要来源）；h3/h4 仍无衬线 800
   —— 衬线只做「大」，卡内小标题保持无衬线保清晰。 */
.eyebrow{
  font-size:var(--fs-sm); letter-spacing:0;
  color:var(--text-2); font-weight:700;
  margin:0 0 var(--sp-3);
}
h1,h2{ font-family:var(--serif-display); font-weight:900; letter-spacing:0; line-height:1.14; margin:0; text-wrap:balance; }
h3,h4{ font-family:var(--sans); font-weight:900; letter-spacing:0; line-height:1.14; margin:0; text-wrap:balance; }
.sec-title{ font-family:var(--serif-display); font-size:var(--fs-2xl); letter-spacing:0; }
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-6); flex-wrap:wrap; margin-bottom:clamp(40px,4.2vw,72px); }
.sec-head p{ margin:var(--sp-3) 0 0; color:var(--text-2); max-width:32em; font-size:var(--fs-md); line-height:1.7; }
/* 一行小字提示（如「这一排是参照，不是排名」「搜索需要 JavaScript」）。
   原先 characters 与 search 各写一份同义规则。 */
.scroll-note{ font-family:var(--mono); font-size:var(--fs-xs); color:var(--text-2); margin:var(--sp-3) 0 0; }
/* 行内代码：浏览器默认会给一个不在这套尺度里的尺寸，连同底色一起定死。
   奶油底 + 2px 墨线 + 小圆角。不带投影 —— 它是句子里的东西，不是器件。 */
code,kbd,samp{
  font-family:var(--mono); font-size:var(--fs-xs);
  background:var(--cream); color:var(--ink);
  border:2px solid var(--ink); border-radius:var(--r-sm);
}

/* ============================================================
   页头导航（所有页共用）
   ------------------------------------------------------------
   奶油底 + 3px 墨底边。亮底不需要毛玻璃 —— 实色奶油更"贴纸"。
   链接 = 纸白胶囊 + sd-1；当前项 = 墨底奶黄字。
   ADR-27：hover 只换底色（纸白→奶油），无位移。
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:800;
  background:var(--cream);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  border-bottom:var(--bw) solid var(--ink);
}
.nav.is-stuck{ border-bottom-color:var(--ink); background:var(--cream); }
.nav-in{ display:flex; align-items:center; gap:.9rem; height:var(--nav-h); }
.brand{ display:flex; align-items:center; gap:.6rem; font-family:var(--serif-display); font-size:var(--fs-md); font-weight:900; letter-spacing:.02em; flex:0 0 auto; }
.brand img{ width:28px; height:28px; object-fit:contain; }
.brand b{ color:var(--ink); font-weight:900; }
.nav-links{ margin-left:auto; display:flex; gap:var(--sp-1); }
.nav-links a{
  position:relative; padding:.5rem .7rem; font-size:var(--fs-sm); font-weight:700;
  color:var(--ink); background:var(--paper);
  border:2px solid var(--ink); border-radius:var(--r-pill);
  box-shadow:var(--sd-1);
  transition:background var(--dur-ui) var(--ease-soft), color var(--dur-ui) var(--ease-soft);
  white-space:nowrap;
}
.nav-links a:hover{ background:var(--cream); }
.nav-links a.is-current{ background:var(--ink); color:var(--yellow); }
/* 「随机一只」= 主动效，用主按钮同款（墨底奶黄字 + sd-2）*/
.nav-cta{
  flex:0 0 auto; padding:.48rem 1.05rem; border:var(--bw) solid var(--ink); border-radius:var(--r-pill);
  font-size:var(--fs-sm); font-weight:800; background:var(--ink); color:var(--yellow);
  box-shadow:var(--sd-2); cursor:pointer;
  transition:background var(--dur-ui) var(--ease-soft), color var(--dur-ui) var(--ease-soft);
}
.nav-cta:hover{ background:var(--yellow); color:var(--ink); }
/* 搜索入口：图标胶囊。移动端不跟着 .nav-cta 一起收（汉堡里放搜索太深） */
.nav-search{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border:var(--bw) solid var(--ink); border-radius:var(--r-pill);
  background:var(--paper); color:var(--ink); box-shadow:var(--sd-2);
  transition:background var(--dur-ui) var(--ease-soft), color var(--dur-ui) var(--ease-soft);
}
.nav-search:hover{ background:var(--ink); color:var(--yellow); }
/* 账号入口：与搜索同一枚胶囊，人形图标（me.html）。当前态给 aria-current 已由构建期按 data-k 处理 */
.nav-me{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border:var(--bw) solid var(--ink); border-radius:var(--r-pill);
  background:var(--paper); color:var(--ink); box-shadow:var(--sd-2);
  transition:background var(--dur-ui) var(--ease-soft), color var(--dur-ui) var(--ease-soft);
}
.nav-me:hover{ background:var(--ink); color:var(--yellow); }
.nav-burger{ display:none; }

/* ============================================================
   页头大标题（Page Hero，所有内页共用）
   ------------------------------------------------------------
   环境光与暗角整组撤掉：孟菲斯不靠「光」造空间，靠描边和投影。
   .phead-fx 这个容器本身留着（页面模板里只有一个空 div，
   装饰改成 .deco 之后它不再承载任何东西）—— 2026-10-17 起
   页面已不再输出它，样式一并删除。
   ============================================================ */
.phead{ position:relative; padding:calc(var(--nav-h) + clamp(64px,10vh,132px)) 0 clamp(64px,8vh,110px); overflow:hidden; }
.phead .wrap{ position:relative; z-index:2; }

/* ============================================================
   页头相框（.pfr）：大标题右边的空地上摆一两张衬纸白挂画，
   画的是奶蛙（透明底抠图，来自素材库）。孟菲斯的「主体图衬纸白」。
   只摆画不放字（文案口径：装饰不说话）；每页 ≤2 张（docs/23）；
   窄屏页头没有这么多空地，整体收起。
   ============================================================ */
.pfr{
  position:absolute; z-index:1; pointer-events:none;
  background:var(--paper); border:var(--bw) solid var(--ink);
  box-shadow:var(--sd-2); border-radius:var(--r-sm);
  padding:7px 7px 9px;
}
.pfr img{ display:block; width:100%; height:auto; }
.pfr-a{ width:clamp(120px,12vw,168px); right:clamp(16px,4vw,72px); top:30%; }
.pfr-b{ width:clamp(76px,7vw,102px); right:calc(clamp(16px,4vw,72px) + clamp(128px,13vw,204px)); top:56%; }
@media (max-width:960px){ .pfr{ display:none; } }
/* 主标题衬线 + 900。强调改由衬线与字重承担 —— 这是最贵的一种强调，
   因为它不发光的。 */
.phead h1{
  font-family:var(--serif-display); font-size:var(--fs-3xl); letter-spacing:0;
  margin:.08em 0 0; color:var(--ink); font-weight:900;
}
/* 导语：共享类，**不 scope 在 .phead 下**。首页也有一句同样性质的导语，
   原先它只能自己再写一份 .lede —— 一份样式写两遍，改一处要改两处（判据）。
   去 scope 后 13 处导语共用这一条。 */
.lede{
  margin:var(--sp-5) 0 0; font-size:var(--fs-lg);
  color:var(--text-2); max-width:32em; line-height:1.7;
  /* 窄屏折行时末行常只剩两三个字（「迷因。」剩「因。」）。
     pretty 让浏览器避开这种孤行：只在需要时动最后一行，不像 balance
     会把整段拉成两条等宽窄行。不支持的老浏览器退回原行为，无副作用。 */
  text-wrap:pretty;
}
.lede b{ color:var(--ink); }
.phead-foot{ display:flex; align-items:center; gap:var(--sp-5); flex-wrap:wrap; margin-top:var(--sp-7); justify-content:space-between; }

/* 面包屑：正体可读 */
.crumb{ font-size:var(--fs-sm); color:var(--text-2);
       display:flex; gap:var(--sp-2); align-items:center; flex-wrap:wrap; }
.crumb a{ display:inline-block; padding:.55em .35em; margin:-.55em -.35em; transition:color .2s; }
.crumb a:hover{ color:var(--ink); }
/* 面包屑下面那行栏目名：13 个页面原先各写一句 style="margin-top:1.4em" */
.phead .crumb + .eyebrow{ margin-top:1.4em; }

/* ============================================================
   正文容器（辞书排版）：词条详情与「奶蛙是什么」共用
   ------------------------------------------------------------
   容器放宽到 76em、行宽由 .doc p 单独收到 34em ——
   收容器会把里面的卡片/表格一起压窄（实测掉到 15 汉字/行）。
   两份页面原先各写一遍，边框 2px / 3px 已经漂了；收成一份。
   ============================================================ */
.doc{ max-width:min(76em,1080px); }
.doc > section{ padding:clamp(40px,6vw,72px) 0; border-top:3px solid var(--ink); }
.doc > section:first-child{ border-top:0; padding-top:0; }
.doc p{
  color:var(--text-2); line-height:1.9; margin:1.1em 0 0;
  max-width:min(34em,760px); font-size:var(--fs-md);
}
.doc p:first-child{ margin-top:0; }
.doc p b{ color:var(--ink); font-weight:700; }

/* 正文里的链接。原先在 about / gallery / what-is / submit 里写成内联样式，
   最长的一句 78 个字符，重复十余处。 */
.tlink{ color:var(--ink); text-decoration:underline; text-underline-offset:.28em; }
.tlink:hover{ color:var(--text-2); }

/* 按钮排：首页 / 404 / 跳转页 / 关于页原先各定义一份，只差居中与上边距。
   居中版用 .cta.center。 */
.cta{ display:flex; gap:.7rem; flex-wrap:wrap; align-items:center; margin-top:2.2em; }
.cta.center{ justify-content:center; }
/* 紧跟在正文段落后面的一档（原先在 what-is 里用内联 margin-top 压到 1.8em） */
.cta.tight{ margin-top:1.8em; }

/* 统计：数字 --fs-xl + 900 字重、不上色（墨）。
   分隔号从 1px 发丝线改为 2px 墨线（孟菲斯不用 1px 细线）。 */
.stats{ display:flex; gap:var(--sp-5); flex-wrap:wrap; align-items:baseline; }
.stat{
  display:inline-flex; align-items:baseline; gap:.45em;
  font-size:var(--fs-sm); color:var(--text-2); font-weight:600;
}
.stats .stat + .stat{ position:relative; }
.stats .stat + .stat::before{
  content:""; position:absolute; left:calc(var(--sp-5) / -2 - 1px); top:.2em; bottom:.2em;
  width:2px; background:var(--ink);
}
/* 窄屏统计会换行；绝对定位的竖线会跟着条目落到下一行行首，窄屏不画分隔线 */
@media (max-width:560px){
  .stats .stat + .stat::before{ display:none; }
}
.stat b{ font-size:var(--fs-xl); letter-spacing:0; color:var(--ink); font-weight:900; }
/* 「可玩 / 实测可达」这类绿色 stat：亮底上必须用深绿（5.4:1）*/
.stat.g b{ color:var(--green-d); }

/* ============================================================
   通用按钮（三款 × 三态）
   ------------------------------------------------------------
   胶囊 + 3px 墨描边 + sd-2。ADR-27：hover 全部改为「底色互换」，
   无位移 —— 主按钮 墨底奶黄字 ↔ 奶黄底墨字（反色互换，仪式感）。
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  padding:.85em 1.5em; border-radius:var(--r-pill);
  border:var(--bw) solid var(--ink);
  font-size:var(--fs-sm); font-weight:800; cursor:pointer;
  background:var(--ink); color:var(--yellow);
  box-shadow:var(--sd-2);
  transition:background var(--dur-ui) var(--ease-soft), color var(--dur-ui) var(--ease-soft);
}
.btn:hover{ background:var(--yellow); color:var(--ink); }
.btn[disabled]{ opacity:.45; pointer-events:none; }
.btn svg{ width:16px; height:16px; flex:0 0 auto; }
.btn-sm{ padding:.6em 1.05em; font-size:var(--fs-xs); box-shadow:var(--sd-1); }
/* 主按钮 = 站点原来的 .btn-gold（墨底奶黄字）。类名不改，模板零改动 */
.btn-gold{ background:var(--ink); color:var(--yellow); }
.btn-gold:hover{ background:var(--yellow); color:var(--ink); }
/* 次按钮：纸白底墨字（青底已退役）*/
.btn-2{ background:var(--paper); color:var(--ink); }
.btn-2:hover{ background:var(--ink); color:var(--yellow); }
/* 幽灵按钮：透明底 + 墨描边 + 墨字 */
.btn-ghost{ background:transparent; color:var(--ink); border:2px solid var(--ink); }
.btn-ghost:hover{ background:var(--paper); }
/* 墨底上下文：墨底上放墨字会叠没，所以控件与链接一律反转。
   挂在**任何墨色表面**上（游玩层 `.play`、深色展示台）。
   反转规则原先只写在 `.dark` 卡片类下，于是「是墨底但不是卡片」的地方
   挂不上它，两个按钮直接变成墨字墨底、几乎看不见。用 `.on-ink` 一个入口。
   （`.dark` 全站零引用，2026-10-17 从选择器里去掉。） */
.on-ink{ color:var(--cream); }
.on-ink .btn{ background:var(--paper); color:var(--ink); }
.on-ink .btn:hover{ background:var(--yellow); color:var(--ink); }
.on-ink .btn-ghost{ background:transparent; color:var(--cream); border-color:var(--cream); }
.on-ink .btn-ghost:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.on-ink a{ color:var(--yellow); }

/* ============================================================
   工具条（吸顶）：分类 tab + 搜索
   ------------------------------------------------------------
   奶油底 + 3px 上下墨边。ADR-27：hover 只换底色，无位移。
   ============================================================ */
.tools{
  position:sticky; top:var(--nav-h); z-index:700;
  background:var(--cream);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  border-block:var(--bw) solid var(--ink);
}
.tools-in{ display:flex; align-items:center; gap:var(--sp-4); padding:var(--sp-3) 0; flex-wrap:wrap; }
.tabs{ display:flex; gap:var(--sp-1); overflow-x:auto; scrollbar-width:none; flex:1 1 auto; }
.tabs::-webkit-scrollbar{ display:none; }
.tab{
  flex:0 0 auto; padding:.5em .9em;
  border:2px solid var(--ink); border-radius:var(--r-pill);
  background:var(--paper); box-shadow:var(--sd-1);
  cursor:pointer; font-size:var(--fs-sm); font-weight:700; color:var(--ink);
  white-space:nowrap;
  transition:background var(--dur-ui) var(--ease-soft), color var(--dur-ui) var(--ease-soft);
}
.tab:hover{ background:var(--cream); }
/* 选中态用「墨底奶黄字」—— 工具条是控件，选中就要一眼看出 */
.tab.is-on{ background:var(--ink); color:var(--yellow); font-weight:800; }
.tab i{ font-style:normal; font-size:var(--fs-xs); opacity:.7; margin-left:.45em; }
.search{
  display:flex; align-items:center; gap:var(--sp-2); flex:0 1 280px;
  background:var(--paper); border:var(--bw) solid var(--ink); border-radius:var(--r-pill);
  padding:.6rem 1rem; box-shadow:var(--sd-2);
}
.search svg{ width:15px; height:15px; color:var(--ink); flex:0 0 auto; }
.search input{
  flex:1 1 auto; min-width:0; background:none; border:0; outline:0;
  color:var(--ink); font:inherit; font-size:var(--fs-sm); font-weight:600;
}
.search input::placeholder{ color:var(--text-2); }
.count-line{
  font-size:var(--fs-sm); color:var(--text-2);
  display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
  margin:0 0 clamp(24px,2.4vw,36px);
}
.count-line b{ color:var(--ink); font-size:var(--fs-lg); font-weight:900; }

/* ============================================================
   筛选 chip（共享类；页面级同名规则一律删，不要在这里之外写）
   ------------------------------------------------------------
   胶囊 + 2px 描边 + sd-1；hover 奶油底。
   注意它只是「快捷入口」，没有选中态 —— 需要选中的地方走 `.tab.is-on` / `.is-sel`。
   （2026-10-16 删掉 `.chip.on`：全站没有一处会切这个类，是旧版筛选条的遗留。）
   ============================================================ */
.chip{
  font-family:var(--sans); font-size:var(--fs-sm); font-weight:700;
  padding:7px 15px; cursor:pointer;
  border:2px solid var(--ink); border-radius:var(--r-pill);
  background:var(--paper); color:var(--ink); box-shadow:var(--sd-1);
  transition:background var(--dur-ui) var(--ease-soft), color var(--dur-ui) var(--ease-soft);
}
.chip:hover{ background:var(--cream); }

/* ============================================================
   卡片网格 + 卡片基类
   ------------------------------------------------------------
   纸白底 + 3px 墨描边 + r-lg + sd-3；hover 只加深投影到 sd-4，
   **不旋转、不位移、不铺彩**（ADR-27：列表卡要的是扫描性，
   旋转与位移同属 playful 语言，首页 hero 也不例外）。
   ============================================================ */
.grid{ display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fill,minmax(var(--col,240px),1fr)); }
.tile{
  position:relative; display:flex; flex-direction:column;
  border-radius:var(--r-lg);
  background:var(--paper);
  border:var(--bw) solid var(--ink);
  box-shadow:var(--sd-3);
  overflow:hidden;
  transition:box-shadow var(--dur-ui) var(--ease-soft);
}
.tile:hover{ box-shadow:var(--sd-4); }

/* [hidden] 必须真的隐藏。
   作者样式里任何一句 display:flex / grid 都会盖掉 UA 的 [hidden]{display:none}，
   于是「设了 hidden 却不消失」。原先只有 .tile 单独打过这个补丁（筛选岛要用），
   互动组件一次性又踩了四处：加载更多按钮、登录面板的两个状态、投稿的结果按钮排。
   一条通用规则收口，不再逐个打补丁。 */
[hidden]{ display:none !important; }

/* 徽标（共享类）：墨底奶黄字。ADR-27：粉/青变体已退役 */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:var(--fs-xs); font-weight:700;
  padding:5px 10px; border:2px solid var(--ink); border-radius:var(--r-pill);
  background:var(--ink); color:var(--yellow); box-shadow:var(--sd-1);
}

/* 空态 */
.empty{
  grid-column:1/-1; text-align:center; padding:clamp(64px,9vw,120px) var(--sp-4);
  border-radius:var(--r-lg); background:var(--paper);
  border:var(--bw) solid var(--ink); box-shadow:var(--sd-3);
}
/* 空态的大符号（🔭 / 🐸）。原来是裸写的 3rem，唯一一处落在七档之外的字号；
   改用 --fs-2xl，视觉几乎不变，尺度回到令牌。 */
.empty .face{ font-size:var(--fs-2xl); line-height:1; margin-bottom:var(--sp-3); }
.empty b{ display:block; font-size:var(--fs-xl); letter-spacing:0; margin-bottom:var(--sp-2); font-weight:900; }
.empty p{ margin:0 0 var(--sp-5); color:var(--text-2); font-size:var(--fs-md); }

/* ============================================================
   棋盘格（共享类）：透明底一眼可见
   ------------------------------------------------------------
   不是为了好看 —— 是为了让"这张能抠出背景"读得出来。
   亮底站用淡墨线条（纸白底 + 7% 墨），不用暗底那套发白线条。
   画廊 / 详情页 / 投稿预览三处共用；页面级不要再抄一遍。
   ============================================================ */
.chk{
  background-color:var(--paper);
  background-image:
    linear-gradient(45deg,rgba(26,23,18,.07) 25%,transparent 25%,transparent 75%,rgba(26,23,18,.07) 75%),
    linear-gradient(45deg,rgba(26,23,18,.07) 25%,transparent 25%,transparent 75%,rgba(26,23,18,.07) 75%);
  background-size:18px 18px; background-position:0 0,9px 9px;
}

/* ============================================================
   合规声明区块（游戏厅 / 宇宙 共用）
   ============================================================ */
.notice-block{
  margin-top:clamp(56px,7vw,100px); padding:clamp(28px,3vw,44px);
  border-radius:var(--r-lg); background:var(--paper);
  border:var(--bw) solid var(--ink); box-shadow:var(--sd-3);
}
/* 这一块在 7 个页面上都是页面的一级区块，标题用 h2。
   原先写 h3：在 gallery / games 上它前面没有 h2，大纲就从 h1 直接跳到 h3。 */
.notice-block h2{ font-size:var(--fs-xl); letter-spacing:0; font-weight:900; }
.notice-block p{ color:var(--text-2); font-size:var(--fs-md); line-height:1.85; margin:var(--sp-4) 0 0; max-width:38em; }
.notice-block p b{ color:var(--ink); }

/* ============================================================
   表格（共享基类；页面级同名规则一律删）
   ------------------------------------------------------------
   表头墨底奶黄字；行分隔 2px 墨线；行首列奶油底 + mono。
   ============================================================ */
table{
  width:100%; border-collapse:collapse; background:var(--paper);
  border:var(--bw) solid var(--ink); border-radius:var(--r-md); overflow:hidden;
}
th,td{ padding:13px 16px; text-align:left; font-size:var(--fs-sm); border-bottom:2px solid var(--ink); }
thead th{ background:var(--ink); color:var(--yellow); font-weight:900; white-space:nowrap; }
tbody tr:last-child th, tbody tr:last-child td{ border-bottom:0; }
tbody th{ font-family:var(--mono); font-size:var(--fs-xs); font-weight:700; white-space:nowrap; background:var(--cream); }
td b{ color:var(--ink); }

/* ============================================================
   深色面板（docs/23 §3.6：3D 展台 / 游玩层 / 灯箱三处）
   ------------------------------------------------------------
   墨面板 + 3px 墨描边 + sd-3。**内部**分界线用奶油 2px（墨叠墨看不见）。
   原来这里还有一组 `.dark`（墨底卡片的 h3 / p）—— 全站零引用，已删；
   背景色写在各页自己的样式里，文字反转统一由 `.on-ink` 给。
   ============================================================ */

/* ============================================================
   页脚（所有页共用）
   ------------------------------------------------------------
   墨底 + 奶黄字。ADR-27：.jzd hover 底色互换（纸白→奶黄），无位移。
   ============================================================ */
footer{
  background:var(--ink); color:var(--yellow);
  border-top:var(--bw) solid var(--ink);
  padding:var(--sp-8) 0 clamp(64px,7vw,96px);
}
/* 页脚是墨底：品牌后半「蛙」必须用奶黄，否则和底色同色 */
footer .brand b{ color:var(--yellow); }
.foot-grid{ display:grid; grid-template-columns:minmax(240px,1.4fr) repeat(3,minmax(150px,1fr)); gap:clamp(32px,3.4vw,64px); }
.foot-brand p{ margin:var(--sp-4) 0 0; color:rgba(255,246,224,.72); max-width:26em; line-height:1.85; }
/* 栏目名不是文档标题 —— 用 <p> 而不是 <h4>。
   页脚在 74 个页面上都出现，h4 会让每一页的大纲都从 h1/h2 跳到 h4；
   而「逛一逛 / 关于 / 官方」只是一个导航分组标签，不该进大纲。 */
.foot-h{ font-size:var(--fs-sm); color:var(--yellow); font-weight:800; margin:0 0 var(--sp-4); }
.foot-col a{ display:block; padding:.42em 0; color:rgba(255,246,224,.78); transition:color .2s; }
.foot-col a:hover{ color:var(--yellow); text-decoration:underline; text-underline-offset:.28em; }
/* 入口按钮：纸白底墨字 + sd-2。墨 footer 上唯一一枚「实心亮按钮」*/
.jzd{
  margin-top:var(--sp-5); display:inline-flex; align-items:center; gap:.6em;
  background:var(--paper); color:var(--ink); font-weight:800;
  border:var(--bw) solid var(--ink); border-radius:var(--r-pill);
  padding:.66em 1.2em; box-shadow:var(--sd-2);
  transition:background var(--dur-ui) var(--ease-soft), color var(--dur-ui) var(--ease-soft);
}
.jzd:hover{ background:var(--yellow); color:var(--ink); }
.notice{ margin-top:var(--sp-7); padding-top:var(--sp-5); color:rgba(255,246,224,.6); border-top:2px solid rgba(255,246,224,.22); line-height:1.85; max-width:42em; }
.notice a{ color:var(--yellow); text-decoration:underline; text-underline-offset:.28em; }

/* ============================================================
   共享组件 · 灯箱（表情画廊 / 名画馆藏）
   ------------------------------------------------------------
   墨底 97%；图片加 3px 奶油框（深底上的「纸白衬底」等价物）；
   关闭按钮是自成一体的奶油胶囊（`.lb-close`，不用 `.btn`，所以不吃 `.on-ink` 的反转）。
   结构固定：#lightbox > .lb-close + #lbImg + .lb-cap(#lbName/#lbMeta) + .lb-nav
   ============================================================ */
.lightbox{
  position:fixed; inset:0; z-index:960; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:var(--sp-4);
  padding:clamp(16px,4vh,44px) clamp(12px,4vw,40px);
  background:rgba(26,23,18,.97);
  animation:lbIn .24s var(--ease);
}
@keyframes lbIn{ from{ opacity:0 } to{ opacity:1 } }
.lightbox img{
  max-width:min(94vw,780px); max-height:74vh; width:auto; height:auto;
  object-fit:contain;
  border:var(--bw) solid var(--cream); border-radius:var(--r-sm);
  box-shadow:none;
}
.lb-cap{ text-align:center; }
.lb-cap b{ display:block; font-size:var(--fs-lg); letter-spacing:0; color:var(--cream); font-weight:900; }
.lb-cap span{ display:block; margin-top:.35em; font-family:var(--mono); font-size:var(--fs-xs); color:rgba(255,246,224,.6); }
.lb-close{
  position:absolute; top:clamp(14px,3vh,28px); right:clamp(14px,3vw,28px);
  width:44px; height:44px; border-radius:var(--r-pill);
  border:2px solid var(--cream); background:transparent; color:var(--cream);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background var(--dur-ui) var(--ease-soft), color var(--dur-ui) var(--ease-soft);
}
.lb-close:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.lb-nav{ font-family:var(--mono); font-size:var(--fs-xs); color:rgba(255,246,224,.6); }

@media (max-width:980px){
  .lightbox img{ max-height:66vh; }
}

/* ============================================================
   几何装饰库（docs/23 §3.5 / §5）
   ------------------------------------------------------------
   全部 CSS 画（border 三角 / 圆 / SVG data-uri 波浪与锯齿），零文件零依赖。
   **每页最多 2 个，只出现在 hero 与页头**；内容区一个不放。
   全部墨色（可带 8%~14% 透明度）—— 墨色装饰是「纸上线稿」，
   撞色装饰是「贴纸」，后者即用户说的「堆砌」。
   用法：<span class="deco d-tri" style="top:14%;right:6%"></span>
   （.deco 给绝对定位，具体坐标页面自己写 —— 装饰的位置属于页面）
   ============================================================ */
.deco{ position:absolute; pointer-events:none; z-index:1; }
.d-tri{
  width:0; height:0;
  border-left:30px solid transparent; border-right:30px solid transparent;
  border-bottom:52px solid rgba(26,23,18,.14);
}
/* .d-dot / .d-cross 已删：全站 78 处装饰里没有一个用到它们（三角 75、锯齿 / 波浪 / 圆环 各 1）。
   装饰库不是收藏品 —— 没人用的形状就是四行死代码。 */
.d-wave{
  width:110px; height:24px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M2 13 Q7 2 12 12 T22 12' fill='none' stroke='%231A1712' stroke-opacity='.22' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x;
}
.d-ring{ width:64px; height:64px; border-radius:50%; border:8px solid rgba(26,23,18,.14); }
.d-zig{
  width:110px; height:22px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cpath d='M1 20 L11 2 L21 20' fill='none' stroke='%231A1712' stroke-opacity='.22' stroke-width='3.2' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x;
}

/* ============================================================
   共享组件 · 表单控件（.f-*）
   ------------------------------------------------------------
   这套控件原先只长在投稿页里。现在想法墙的输入区和内容页的评论区
   也要用 —— 照旧例复制三份就是「改一处要改 N 处」，所以控件收到这里，
   页面只留自己的排布（投稿页的预览台、吸顶栏仍是它自己的事）。
   命名规矩不变：`.f-` = 表单控件；`.is-bad` 表示这一格没通过校验。
   ============================================================ */
.f-row{ margin-top:1.7em; }
.f-row:first-child{ margin-top:0; }
.f-label{
  display:flex; align-items:baseline; gap:.45em;
  font-size:var(--fs-sm); font-weight:800; color:var(--ink); margin-bottom:.55em;
}
.f-label i{ font-style:normal; font-family:var(--mono); color:var(--text-2); font-weight:400; }
.f-input,.f-select,.f-area{
  width:100%; display:block; background:var(--cream);
  border:var(--bw) solid var(--ink); border-radius:var(--r-md);
  padding:.72em .9em; font:inherit; font-size:var(--fs-md); color:var(--ink);
  transition:background var(--dur-ui) var(--ease-soft);
}
.f-input:hover,.f-select:hover,.f-area:hover{ background:var(--paper); }
.f-input::placeholder,.f-area::placeholder{ color:var(--text-2); }
.f-area{ min-height:6.2em; resize:vertical; line-height:1.75; }
/* 校验不过：底色换成奶黄（页面底），配一行 mono 说明 —— 不引入第三种颜色 */
.f-input.is-bad,.f-select.is-bad,.f-area.is-bad{ background:var(--yellow); }
.f-hint{ margin:.55em 0 0; font-size:var(--fs-xs); color:var(--text-2); line-height:1.7; }
.f-hint.inline{ display:inline; margin:0; }
.f-err{ margin:.55em 0 0; font-family:var(--mono); font-size:var(--fs-xs); font-weight:700; color:var(--ink); }
.f-err::before{ content:"× "; }
.f-actions{ margin-top:2.1em; display:flex; gap:.7rem 1em; flex-wrap:wrap; align-items:center; }
.f-count{ font-family:var(--mono); color:var(--text-2); }

/* ============================================================
   共享组件 · 留言 / 想法墙（.cmt-*）
   ------------------------------------------------------------
   内容页的评论与「想法墙」是**同一份组件**，只换 target（docs/04 C.1）：
   表情包详情挂 `memes/<id>`，想法墙挂 `pages/wall`。
   行宽用 em 量到 34em ≈ 30~38 汉字（docs/22 §1）—— 留言也是正文，
   不能因为它在卡片里就把行拉长到 60 字。容器放宽、只约束段落。
   ============================================================ */
.cmt{ display:grid; gap:var(--sp-5); max-width:44em; }
.cmt-wide{ max-width:none; }
.cmt-head{ display:flex; align-items:baseline; gap:var(--sp-4); flex-wrap:wrap; }
/* 标题是 h2（留言区永远是页面的一级区块），但视觉上不是「区块大标题」：
   显式钉住无衬线 + --fs-xl，免得它跟着 h1/h2 的衬线规则变成另一种东西。 */
.cmt-title{ margin:0; font-family:var(--sans); font-size:var(--fs-xl); font-weight:900; letter-spacing:0; }
.cmt-n{ font-family:var(--mono); font-size:var(--fs-xs); color:var(--text-2); }
.cmt-list{ list-style:none; margin:0; padding:0; }
.cmt-item{ padding:1.15em 0; border-bottom:2px solid var(--ink); }
.cmt-item:first-child{ padding-top:0; }
.cmt-meta{ display:flex; align-items:baseline; gap:var(--sp-4); flex-wrap:wrap; margin-bottom:.4em; }
/* 显示出来的昵称 */
.cmt-nick{ font-size:var(--fs-sm); font-weight:800; color:var(--ink); }
/* 昵称输入框：**不能复用 .cmt-nick** —— 那个是「显示名」的排版（14px/800），
   套到 .f-input 上会把输入框压成小号粗体（层叠里它写在后面，同优先级直接赢）。 */
.cmt-nick-in{ max-width:22em; }
.cmt-time{ font-family:var(--mono); font-size:var(--fs-xs); color:var(--text-2); }
/* pre-wrap 保留访客自己敲的换行；overflow-wrap 兜住一整串没有空格的字符 */
.cmt-body{
  margin:0; max-width:34em; font-size:var(--fs-md); line-height:1.85;
  color:var(--ink); white-space:pre-wrap; overflow-wrap:anywhere;
}
.cmt-empty{ margin:0; padding:1.2em 0; color:var(--text-2); font-size:var(--fs-md); }
.cmt-more{ justify-self:start; }
.cmt-off{
  margin:0; padding:1.1em 1.3em; background:var(--paper);
  border:var(--bw) solid var(--ink); border-radius:var(--r-md);
  color:var(--text-2); font-size:var(--fs-sm); line-height:1.8;
}
.cmt-form{
  padding:clamp(18px,2.2vw,26px); background:var(--paper);
  border:var(--bw) solid var(--ink); border-radius:var(--r-lg); box-shadow:var(--sd-3);
  display:grid; gap:var(--sp-3);
}
.cmt-actions{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; }
.cmt-live{ margin:0; min-height:1.6em; font-family:var(--mono); font-size:var(--fs-xs); color:var(--text-2); }
.cmt .f-err{ margin:0; }

/* ============================================================
   共享组件 · 登录面板（.aut-*）
   —— 只有投稿要传图时才出现，别处一个字都不提它。
   ============================================================ */
.aut{ display:grid; gap:var(--sp-3); }
.aut-on{ display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap; }
.aut-who{ font-size:var(--fs-sm); font-weight:800; overflow-wrap:anywhere; }
.aut-off{ display:grid; gap:var(--sp-3); }
.aut-row{ display:flex; gap:var(--sp-2); flex-wrap:wrap; }
.aut-row .f-input{ flex:1 1 12em; width:auto; }
.aut-hint{ margin:0; }

/* ============================================================
   共享组件 · 点一下（.laugh-*）
   —— 一个动作、一个数字（docs/13：狂笑与点赞合并，不分裂成两套计数）。
   ============================================================ */
.laugh{ display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap; }
.laugh-btn{ display:inline-flex; align-items:baseline; gap:.55em; }
.laugh-n{ font-family:var(--mono); font-size:var(--fs-sm); }
.laugh-note{ font-family:var(--mono); font-size:var(--fs-xs); color:var(--text-2); }

/* ============================================================
   响应式与偏好
   ------------------------------------------------------------
   ⚠️ 导航的汉堡断点是 1280，不是 980。
   11 个链接 + 品牌 + 「随机一只」+ 搜索，这一整排在 1200~981px 根本放不下：
   实测 1200px 时容器溢出 69px（搜索图标整个跑出视口）、1024px 溢出 108px、
   981px 溢出 148px。而 body{overflow-x:hidden} 会把溢出裁掉，
   所以「无横向滚动」的体检发现不了它 —— 是元素自己的 getBoundingClientRect 露的马脚。

   1280 这个数也不是拍脑袋：把胶囊左右留白收到 .7rem、nav-in 间距收到 .9rem 之后，
   整排仍需 1140px 内容宽（品牌 72 + 链接 886 + CTA 96 + 搜索 38 + 两个 14px 间隙）。
   1280px 视口在 Chrome 下 innerW 约 1179，余量 39px —— 够吸收各平台滚动条宽度差。
   再往下的 1241px 只剩 2px 余量，一次字体回退就会翻车。
   ============================================================ */
/* 菜单里的「随机一只」：只在汉堡态出现（宽屏由顶栏那枚负责） */
.nav-rand{ display:none; }

@media (max-width:1280px){
  .nav-links{
    position:fixed; inset:var(--nav-h) 0 auto 0; flex-direction:column; gap:0;
    background:var(--cream); backdrop-filter:none; -webkit-backdrop-filter:none;
    border-bottom:var(--bw) solid var(--ink); padding:.6rem 0 1rem;
    max-height:calc(100vh - var(--nav-h));
    max-height:calc(100svh - var(--nav-h));
    overflow:auto; overscroll-behavior:contain;
    visibility:hidden; opacity:0; transform:translateY(-6px); pointer-events:none;
    /* 固定尺寸，只合成透明度/位移；收起立即停止命中，不再逐帧改变高度。 */
    transition:opacity .12s ease-out, transform .12s ease-out, visibility 0s linear .12s;
  }
  body.nav-open .nav-links{
    /* 菜单按可用视口高度展开，而不是固定 70vh：
       390px 下 12 行菜单约 743px，70vh 只有 591px，最后两项被藏在
       面板下面；展开后底部还会剩一截奶油色空档。 */
    visibility:visible; opacity:1; transform:none; pointer-events:auto;
    transition:opacity .16s ease-out, transform .16s var(--ease-soft), visibility 0s;
  }
  body.nav-leaving .nav-links{
    visibility:hidden; opacity:0; pointer-events:none; transition:none;
  }
  /* 菜单展开时让出右下角浮层；否则浮钮会停在菜单最后一行上方，
     320px 压住“想法墙”，390px 压住“随机一只”的右端。桌宠在
     `.frog-live` 时接管浮钮，同一位置、同一 z 轴，也必须一起收掉。 */
  body.nav-open .agent-fab,
  body.nav-open .frog-stage{
    opacity:0; visibility:hidden; pointer-events:none;
  }
  /* 移动端展开的是列表，不是一排胶囊：去掉底与投影，用 2px 墨线分行 */
  .nav-links a{
    background:none; border:0; border-bottom:2px solid rgba(26,23,18,.18);
    border-radius:0; box-shadow:none; padding:.85rem 5vw; font-size:var(--fs-md);
  }
  .nav-links a:hover{ background:var(--cream); }
  .nav-links a.is-current{ background:var(--ink); color:var(--yellow); }
  .nav-burger{
    display:inline-flex; align-items:center; justify-content:center;
    width:38px; height:38px; margin-left:auto; border:2px solid var(--ink);
    border-radius:var(--r-pill); background:var(--paper); box-shadow:var(--sd-1);
    cursor:pointer; color:var(--ink);
  }
  /* 顶栏的 CTA 收起来，但功能不能跟着消失 —— 菜单末尾有一枚同款（.nav-rand） */
  .nav-cta{ display:none; }
  .nav-rand{
    display:block; width:auto; margin:.5rem 5vw 0;
    padding:.8rem 1.2rem; border-radius:var(--r-pill);
    border:var(--bw) solid var(--ink); background:var(--ink); color:var(--yellow);
    box-shadow:var(--sd-2); font-weight:800; font-size:var(--fs-md); text-align:center;
  }
}

@media (max-width:360px){
  /* 320px 下菜单内容比可用高度多约 90px，压缩行距后 12 项可一次看全，
     不用在菜单里再滚一段看不到底的列表。 */
  .nav-links a{ padding:.6rem 5vw; }
}

@media (max-width:980px){
  /* 展示档在窄屏必须单独一档：192px 的两个字在一列布局里放不下，
     原来的写法是在首页自己的媒体查询里再写一遍 clamp —— 值挪到令牌层，
     首页里就只剩 var(--fs-hero) 一处引用。 */
  :root{ --fs-hero: clamp(3.8rem,18vw,6.4rem); }
  /* 窄屏不再吸顶：gallery 的标签行会把工具条撑到 300px 以上，
     吸顶后等于半个屏幕长期盖在正文上。让它随页头滚走，需要时滚回去。 */
  .tools{ position:static; top:auto; }
  .tools-in{ padding:.6rem 0; }
  /* 搜索框在窄屏独占一行；同样扣掉浮钮安全区，滚动到它时不压输入框。 */
  .search{ flex:1 1 100%; margin-right:60px; }
  /* tab 横向滚动是既有的窄屏策略；右侧用 margin 真正让出浮钮安全区
     （padding 只加在滚动内容末尾，首屏最后一个 tab 仍会钻到浮钮下面），
     再用渐隐提示「后面还有」。末项留白，滚到底时不会被渐隐吃掉。 */
  .tabs{
    margin-right:60px; padding-right:24px; scroll-padding-right:24px;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 18px),transparent 100%);
    mask-image:linear-gradient(90deg,#000 calc(100% - 18px),transparent 100%);
  }
  /* 共享留言表单：右下角让给「问奶蛙」浮钮，避免输入框/操作行被压。 */
  .cmt-form{ padding-right:48px; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}
@media (min-width:981px){
  /* 桌面筛选条保持一行：tab 可收缩并横向滚动，搜索框固定在右端。
     否则 flex-wrap 会先换行再收缩，宇宙页会多出一整行搜索框。 */
  .tools-in{ flex-wrap:nowrap; }
  .tabs{ flex:1 1 0; min-width:0; }
}
@media (min-width:981px) and (max-width:1100px){
  /* 小桌面档：筛选条首屏正好落在右下角浮钮的高度上，
     tab 和搜索框右端都让出 80px，避免被完整胶囊压住。 */
  .tabs{ margin-right:80px; }
  .search{ margin-right:80px; }
}
@media (max-width:720px){
  :root{ --sp-sec:64px; }
  /* 固定导航约 68px（64 + 底边黑线）：顶格 64px 会把首元素压进导航底下
     （frog-3d 实测标题上缘被裁）。main.sec 只被「sec 直接开头」的页面用到
     （phead 页的 main 不带 sec），让首元素从导航下缘起算。 */
  main.sec{ padding-top:calc(var(--nav-h) + 24px); }
}
@media (max-width:560px){
  .wrap{ width:90vw; }
  .btn{ padding:.82em 1.25em; }
  .grid{ --col:150px; }
  .foot-grid{ grid-template-columns:1fr; }
  /* 评论区操作行靠左：右下角让给「问奶蛙」浮钮，发送键不被压（wall 实测） */
  .cmt-actions{ justify-content:flex-start; }
}
/* ============================================================
   3D 挂载槽（data-glb）
   ------------------------------------------------------------
   页面里照常放一张静态图，脚本就绪后原地升级成可拖拽的 3D。
   没有 WebGL、数据缺失、或容器还没进视口 —— 看到的就是这张静态图。
   ============================================================ */
[data-glb]{ position:relative; }
[data-glb] > .glbcv{
  position:absolute; left:0; top:0; width:100%; height:100%;
  display:block; opacity:0; pointer-events:none;
  transition:opacity .6s ease;
}
[data-glb].is-3d > .glbcv{ opacity:1; pointer-events:auto; }
/* 静态图不撤出文档流：容器尺寸始终由它撑住，画布才有 100% 可依 */
[data-glb].is-3d > img{ visibility:hidden; }
/* 容器就按「一张图」的大小走，不被父级拉宽 */
.glb-fit{ width:fit-content; max-width:100%; margin-inline:auto; }
/* 非 hero 的 3D 槽位（404 / 跳转页）：图还没落位时也要跟下文隔开。
   原先两页各写一份，1.6rem 与 1.4rem 已经漂了。 */
.frog-slot{ margin-bottom:1.5rem; }

/* ============================================================
   奶蛙智能体（assets/agent.js 懒加载；这里只有浮钮与面板的皮）
   - 浮钮：奶黄胶囊 + 墨边 + 硬投影，hover 底色互换（ADR-27，无位移）
   - 面板：纸白卡，层 950 —— 压过导航(800)/字幕条(700)，让在灯箱(960)之下
   ============================================================ */
.agent-fab{
  position:fixed; right:18px; bottom:18px; z-index:940;
  border:var(--bw) solid var(--ink); border-radius:var(--r-pill);
  background:var(--yellow); color:var(--ink);
  font-family:var(--sans); font-size:var(--fs-sm); font-weight:800;
  padding:.72em 1.3em; cursor:pointer; box-shadow:var(--sd-2);
  transition:background .25s ease, color .25s ease;
}
.agent-fab:hover{ background:var(--ink); color:var(--yellow); }
.agent-fab:focus-visible{ outline:3px solid var(--pink-d); outline-offset:2px; }

.agent-panel{
  position:fixed; right:18px; bottom:18px; z-index:950;
  width:min(384px, calc(100vw - 36px)); height:min(560px, 74vh);
  display:flex; flex-direction:column;
  background:var(--paper); color:var(--ink);
  border:var(--bw) solid var(--ink); border-radius:var(--r-md);
  box-shadow:var(--sd-4); overflow:hidden;
}
.agent-head{
  display:flex; align-items:center; gap:.7rem;
  padding:.6rem .8rem; border-bottom:2px solid var(--ink);
  background:var(--cream);
}
.agent-cvslot{ width:96px; height:96px; flex:0 0 96px; }
.agent-cvslot canvas{
  width:100%; height:100%; display:block; cursor:pointer;
  /* 顶掉 .frog-cv 的 position:absolute：槽不是定位元素，
     absolute 的包含块会一路找到 .agent-panel，画布直接铺满整个面板 */
  position:static;
}
.agent-tt{ display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.agent-tt b{ font-family:var(--serif-display); font-size:var(--fs-lg); line-height:1.2; }
.agent-x{
  margin-left:auto; flex:0 0 34px; width:34px; height:34px;
  border:2px solid var(--ink); border-radius:var(--r-sm);
  background:var(--paper); color:var(--ink);
  font-size:var(--fs-lg); line-height:1; cursor:pointer;
  transition:background .25s ease, color .25s ease;
}
.agent-x:hover{ background:var(--ink); color:var(--paper); }
.agent-log{ flex:1; overflow-y:auto; padding:var(--sp-3); display:flex; flex-direction:column; gap:var(--sp-2); background:var(--paper); }
.ag-m{
  max-width:88%; padding:.55em .8em; font-size:var(--fs-sm); line-height:1.75;
  border:2px solid var(--ink); border-radius:var(--r-sm); overflow-wrap:anywhere;
}
.ag-user{ align-self:flex-end; background:var(--yellow); color:var(--ink); }
.ag-bot{ align-self:flex-start; background:var(--paper); }
.ag-bot a{ color:var(--ink); }
.ag-st{ display:block; font-family:var(--mono); font-size:var(--fs-xs); color:var(--text-2); margin-top:.3em; }
.agent-note{
  padding:.35rem var(--sp-3); border-top:2px solid var(--ink);
  font-family:var(--mono); font-size:var(--fs-xs); color:var(--text-2); background:var(--cream);
}
.agent-form{ display:flex; gap:var(--sp-2); padding:var(--sp-2) var(--sp-3) var(--sp-3); border-top:0; }
.agent-in{
  flex:1; min-width:0; padding:.55em .8em;
  border:2px solid var(--ink); border-radius:var(--r-sm);
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:var(--fs-sm);
}
.agent-send{
  flex:0 0 auto; padding:.55em 1em;
  border:2px solid var(--ink); border-radius:var(--r-sm);
  background:var(--yellow); color:var(--ink);
  font-family:var(--sans); font-size:var(--fs-sm); font-weight:800; cursor:pointer;
  transition:background .25s ease, color .25s ease;
}
.agent-send:hover{ background:var(--ink); color:var(--yellow); }
.agent-send.is-stop{ background:var(--paper); font-weight:600; }
.agent-send:focus-visible,.agent-in:focus-visible,.agent-x:focus-visible{ outline:3px solid var(--pink-d); outline-offset:2px; }

@media (max-width:980px){
  /* 窄屏浮钮收成 44px 圆形入口：完整胶囊在 320–430px 会压住 tab、
     表单输入框和操作行。文字收进 aria-label，视觉上只留一只奶蛙。 */
  .agent-fab{
    display:grid; place-items:center;
    width:44px; height:44px; padding:0;
    right:12px; bottom:12px; font-size:0;
    border-radius:50%;
  }
  .agent-fab::before{ content:"🐸"; font-size:var(--fs-lg); line-height:1; }
}
@media (max-width:560px){
  .agent-fab{ right:10px; bottom:10px; }
  .agent-panel{ right:10px; left:10px; bottom:10px; width:auto; height:min(72vh, 560px); }
}

/* ============================================================
   奶蛙漫游层（_frog.js）
   - 透明舞台限制在右下角，避免整屏宽度的画布持续合成
   - 舞台不接指针，只有画布接 —— 他走过文字上也不挡选中、不挡点击
   - 点奶蛙 = 开「问奶蛙」面板；「躲起来」记住偏好，浮钮回来
   - 层 930：内容之上、浮钮(940)之下；他进面板时空舞台整个藏掉
   ============================================================ */
.frog-stage{
  position:fixed; right:0; bottom:0; z-index:930;
  width:min(100vw,480px); height:170px;
  pointer-events:none;
}
.frog-stage.is-docked{ display:none; }      /* 奶蛙进面板了，空舞台撤下 */
.frog-cv{
  position:absolute; left:0; bottom:0; width:100%; height:100%;
  /* 默认不接事件（_frog.js 的指针亲和会在你凑近时打开）——
     否则这块矩形走过之处，底下的正文和链接全点不到 */
  pointer-events:none; cursor:pointer; outline:none;
}
.frog-cv:focus-visible{ outline:3px solid var(--pink-d); outline-offset:-3px; }
.frog-hide{
  position:absolute; right:6px; top:4px; z-index:2; pointer-events:auto;
  /* 挂右端不挡正文：漫游时浮钮本来就 display:none（.frog-live），面板开着时
     空舞台整个藏掉 —— 右下角这两个邻居从不同时在场 */
  /* z-index 必须 —— 「回家」的 appendChild 会把画布挪到本按钮之后，
     不抬一层就被 canvas 盖住，永远点不到 */
  border:0; background:none; padding:2px 4px; cursor:pointer;
  font-family:var(--mono); font-size:var(--fs-xs); color:var(--text-2);
  opacity:.55; transition:opacity .25s ease, color .25s ease;
}
.frog-hide:hover{ opacity:1; color:var(--ink); }
.frog-hide:focus-visible{ outline:3px solid var(--pink-d); outline-offset:2px; opacity:1; }
/* 奶蛙在漫游 = 他自己就是入口，浮钮收起来（躲起来后 frog-live 摘掉，浮钮回来） */
.frog-live .agent-fab{ display:none; }
/* ≤980：桌宠让位给「问奶蛙」浮钮。
   平板/手机的留言表单在右下（发送钮、输入框都是通栏宽度），73px 的
   蛙身正好压住它们；窄屏也没有 981+ 那条右侧地毯的余量。
   桌面（981+）保留右下角漫游，浮钮继续由桌宠接管。 */
@media (max-width:980px){
  .frog-live .frog-stage{
    visibility:hidden; opacity:0; pointer-events:none;
  }
  .frog-live .agent-fab{ display:grid; }
}
@media (max-width:560px){
  .frog-stage{ height:118px; }
}

/* ============================================================
   展览画册式衔接：视口快照轻移，导航作为独立快照保持稳定。
   不支持跨文档 View Transition 的浏览器直接进行正常导航。
   ============================================================ */
@view-transition{ navigation:auto; }
.nav{ view-transition-name:naiwa-navigation; }
::view-transition{ pointer-events:none; }
::view-transition-old(root){ animation:naiwa-page-out 100ms ease-out both; }
::view-transition-new(root){ animation:naiwa-page-in 220ms cubic-bezier(.2,.75,.25,1) both; }
::view-transition-group(naiwa-navigation){ animation:none; }
::view-transition-old(naiwa-navigation){ animation:none; }
::view-transition-new(naiwa-navigation){ animation:none; }
@keyframes naiwa-page-out{
  to{ opacity:0; transform:translateY(-4px); }
}
@keyframes naiwa-page-in{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .tile{
    transition:transform .18s var(--ease-soft), background .2s var(--ease-soft);
  }
  .tile:hover{ transform:translateY(-3px); }
  .btn,.btn-2,.btn-ghost,.btn-gold,.nav-cta,.tab,.chip{
    transition:transform .2s var(--ease-soft), background .25s var(--ease-soft), color .25s var(--ease-soft), box-shadow .25s var(--ease-soft);
  }
  .btn:active,.btn-2:active,.btn-ghost:active,.btn-gold:active,.nav-cta:active,.tab:active,.chip:active{
    transform:translateY(1px) scale(.985);
  }
}

@media (prefers-reduced-motion:reduce){
  @view-transition{ navigation:none; }
  .nav-links{ transition:none; transform:none; }
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){ animation:none !important; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
  /* 颜色态保留为瞬切；动态减少设置下不启动内容入场或跨页动画。 */
  .btn,.btn-2,.btn-ghost,.btn-gold,.nav-links a,.nav-cta,.tab,.chip,
  .tile,.jzd,.lb-close{ transition:none; }
}