@mooncellwiki/prts-design-tokens 0.1.12 → 0.1.14

package/README.md

@@ -2,7 +2,7 @@
 
 PRTS Design（明日方舟网页设计系统，prts.wiki 皮肤）的设计令牌，≈ primer/primitives。
 
-- `src/**/*.json5`：W3C DTCG 格式的源——`base/` 原始色板 · 字体 · 尺寸 · 动效 · 层级，`functional/` 亮 / 暗 / 高对比语义令牌与页眉头图画布主题接口，`bridge/` MediaWiki Codex 桥接
+- `src/**/*.json5`：W3C DTCG 格式的源——`base/` 原始色板 · 字体 · 尺寸 · 动效 · 层级，`functional/` 亮 / 暗 / 高对比语义令牌、页眉头图画布主题接口，以及窄屏（≤ 639）与低分屏的覆盖，`bridge/` MediaWiki Codex 桥接
 - `tokens.css`：CSS 变量版——亮 `:root` / 暗 `data-theme="dark"` · `html.skin-theme-clientpref-night` / 跟随系统 / 局部主题 `.ak-scope[data-theme]` / 高对比；只要令牌时 `import "@mooncellwiki/prts-design-tokens/tokens.css"`
 - `tokens.json`：每个令牌的 CSS 写法与亮 / 暗解析值
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mooncellwiki/prts-design-tokens",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "description": "PRTS Design · 明日方舟网页设计系统的设计令牌：W3C DTCG 格式的 JSON5 源 + CSS 变量版 tokens.css（亮 / 暗 / 跟随系统 / 局部主题）+ 解析后的 tokens.json（每个令牌带 CSS 写法与亮 / 暗解析值）",
   "license": "MIT",
   "type": "module",

package/src/base/size.json5

@@ -28,14 +28,14 @@
     layout: {
       $description: "Layout · 与 Codex 断点一致: 320 / 640 / 1120 / 1680",
       $type: "dimension",
-      "header-h": { $value: "56px" },
-      "local-nav-h": { $value: "48px", $description: "二级吸顶栏（<1400 出现：菜单 / 本页目录）" },
+      "header-h": { $value: "56px", $description: "≤639 为 52（functional/compact）" },
       "sidebar-w": { $value: "208px" },
       "toc-w": { $value: "200px" },
       "content-max": { $value: "1240px", $description: "阅读区最大宽度；表格密集页可加 .ak-wide" },
       "content-narrow": { $value: "760px" },
-      gutter: { $value: "24px" },
+      gutter: { $value: "24px", $description: "版面两侧留白 / 栏间距；≤639 换成 gutter-sm" },
       "gutter-sm": { $value: "16px" },
+      "space-section": { $value: "{size.space.space-8}", $description: "大区块之间的竖向间隔：带色条的章节标题 .ak-heading 的上边距、正文 hr 的上下；≤639 收到 space-6（24）" },
     },
     icon: {
       $description: "Icon sizes",

package/src/base/typography.json5

@@ -1,7 +1,7 @@
 {
   typography: {
     font: {
-      $description: "Typography —— 每条链的前两段都由 fonts.css 自托管（人人一致，也是「上线效果」）：\n① 官网同源的 Novecento Sans Wide / Bender（ASCII 子集：· » — × ° 等非 ASCII 会逐字落到 ②）\n② OFL 的 Noto Sans SC / Oswald / Chakra Petch / JetBrains Mono\n之后是装机备选 → 系统字。fonts.css 没加载（Gadget 关掉 / 离线单文件）时自然退到后两段。",
+      $description: "Typography —— 每条链的前两段都由 fonts.css 自托管（人人一致，也是「上线效果」）：\n① 官网同源的 Novecento Sans Wide / Bender（ASCII 子集：· » — × ° 等非 ASCII 会逐字落到 ②）\n② OFL 的 Noto Sans SC / Oswald / Chakra Petch / JetBrains Mono\n之后是装机备选 → 系统字。fonts.css 没加载（Gadget 关掉 / 站外只引 standalone.css）时自然退到后两段。",
       $type: "fontFamily",
       "font-body": {
         $value: "\"Source Han Sans SC\", \"Noto Sans SC\", \"Noto Sans CJK SC\", \"PingFang SC\", \"HarmonyOS Sans SC\", \"Microsoft YaHei\", system-ui, -apple-system, sans-serif",
@@ -26,11 +26,11 @@
     "font-size": {
       $description: "字号（rem；注释为 px）",
       $type: "dimension",
-      "fs-display-xl": { $value: "3.5rem", $description: "56" },
-      "fs-display": { $value: "2.5rem", $description: "40" },
-      "fs-h1": { $value: "2rem", $description: "32" },
-      "fs-h2": { $value: "1.5rem", $description: "24" },
-      "fs-h3": { $value: "1.25rem", $description: "20" },
+      "fs-display-xl": { $value: "3.5rem", $description: "56（≤639 为 40，见 functional/compact）" },
+      "fs-display": { $value: "2.5rem", $description: "40（≤639 为 32）" },
+      "fs-h1": { $value: "2rem", $description: "32（≤639 为 26）" },
+      "fs-h2": { $value: "1.5rem", $description: "24（≤639 为 22）" },
+      "fs-h3": { $value: "1.25rem", $description: "20（≤639 为 18）" },
       "fs-h4": { $value: "1.0625rem", $description: "17" },
       "fs-body-lg": { $value: "1.125rem", $description: "18" },
       "fs-body": { $value: "1rem", $description: "16" },

package/src/functional/chrome.json5

@@ -1,6 +1,6 @@
 {
   chrome: {
-    $description: "2d. CHROME · 页眉 / 头图 / 画布 的主题接口（活动主题只改这里）\n皮肤的「框」（页眉主行 + 二级栏 + 窄屏工具卡片）在两套主题下都是黑的：官网导航栏、游戏主界面顶栏、\n干员档案页的顶部黑边都是\"黑框白纸 / 黑框黑纸\"——所以 chrome 令牌不随明暗主题变，只跟着活动主题变。\nprts.wiki 大活期间会换头图 / 顶栏角饰 / 站标 / 侧栏配色（现网 ext.gadget.seventhStyle 就是改这些）：\n新皮肤把这些位置抽成下面这组变量，Gadget / MediaWiki:Common.css 只需在 :root（或 html.ak-theme-xxx）上覆盖，\n不必碰选择器。skin.css 里的 .ak-header 把语义令牌重映射到 --ak-chrome-*，页眉内的按钮 / 输入 / 头像 / 菜单自动跟随。\n页眉与头图的关系：头图 .ak-keyart 从页面顶端铺起，页眉是压在它上面的一块均匀黑玻璃（--ak-chrome-bg + 毛玻璃）——\n玻璃保证页眉可读，画从玻璃后面透出来；照片一律走 --ak-keyart-image，--ak-chrome-image 只放画在玻璃之上的深色角饰 / 底纹。\n--ak-logo-image（不设默认值）：站标，设置后 .ak-header__logo img 用 content 替换（Chromium / WebKit；Firefox 请改 $wgLogos）。",
+    $description: "2d. CHROME · 页眉 / 头图 / 画布 的主题接口（活动主题只改这里）\n皮肤的「框」（页眉 + 窄屏工具卡片）在两套主题下都是黑的：官网导航栏、游戏主界面顶栏、\n干员档案页的顶部黑边都是\"黑框白纸 / 黑框黑纸\"——所以 chrome 令牌不随明暗主题变，只跟着活动主题变。\nprts.wiki 大活期间会换头图 / 顶栏角饰 / 站标 / 侧栏配色（现网 ext.gadget.seventhStyle 就是改这些）：\n新皮肤把这些位置抽成下面这组变量，Gadget / MediaWiki:Common.css 只需在 :root（或 html.ak-theme-xxx）上覆盖，\n不必碰选择器。skin.css 里的 .ak-header 把语义令牌重映射到 --ak-chrome-*，页眉内的按钮 / 输入 / 头像 / 菜单自动跟随。\n页眉与头图的关系：头图 .ak-keyart 从页面顶端铺起，页眉是压在它上面的一块均匀黑玻璃（--ak-chrome-bg，毛玻璃默认不开）——\n玻璃保证页眉可读，画从玻璃后面透出来；照片一律走 --ak-keyart-image，--ak-chrome-image 只放画在玻璃之上的深色角饰 / 底纹。\n--ak-logo-image（不设默认值）：站标，设置后 .ak-header__logo img 用 content 替换（Chromium / WebKit；Firefox 请改 $wgLogos）。",
     "theme-accent": {
       $value: "{color.brand.cyan-500}",
       $description: "活动主色：页眉标语 / 悬停、侧栏与目录分组条、页脚斜纹、窄屏卡片顶条 …（正文里的链接 / 选中仍是 --ak-accent；想一起换就连 --ak-accent 也覆盖）",
@@ -9,7 +9,11 @@
     "theme-accent-subtle": { $value: "rgba(24, 209, 255, .14)", $description: "活动主色的淡底（页眉里的悬停 / 选中底、聚焦光圈）= --ak-theme-accent 的 14%；换主色时一起写——不用 color-mix() 推导，老浏览器也认" },
     "chrome-bg": {
       $value: "rgba(8, 9, 10, .9)",
-      $description: "页眉玻璃：半透明 + 毛玻璃，头图 / 滚过来的正文在下面均匀透出。活动主题想让头图多透一点可调 alpha 到 .78–.85；别低于 .72（白色画面之下 #F2F2F2 仍 ≥7:1）",
+      $description: "页眉玻璃：半透明，头图 / 滚过来的正文在下面均匀透出。活动主题想让头图多透一点可调 alpha 到 .78–.85；别低于 .72（白色画面之下 #F2F2F2 仍 ≥7:1）",
+    },
+    "chrome-backdrop": {
+      $value: "none",
+      $description: "页眉玻璃底下的 backdrop-filter（毛玻璃），默认不开：玻璃 .9 不透明时模糊只透出一成，开不开截图逐像素平均只差 1.4/255，却是滚动时 GPU 上最重的一项——粘性页眉每帧都要把底下重糊一遍。玻璃调淡、确实要毛玻璃的活动主题再设 saturate(1.4) blur(10px) 之类",
     },
     "chrome-bg-solid": { $value: "#0e0f10", $description: "不透明处：窄屏工具卡片、飞出菜单" },
     "chrome-fg": { $value: "#f2f2f2" },
@@ -29,9 +33,9 @@
     "chrome-texture": { $value: ".55", $description: "右侧半调网点强度 0–1（游戏顶栏 img_back / 官网左缘网点），0 关闭" },
     "keyart-image": { $value: "none", $description: "头图（Key Visual）：从页面顶端铺起、垫在页眉与版面背后的一幅通栏画；--ak-keyart-h 为 0 时只在页眉后面透" },
     "keyart-h": { $value: "0px", $description: "页眉之下那段画的高度（画有多高，不是占多高——占位看 -reveal）" },
-    "keyart-reveal": { $value: "72px", $description: "留在版面之上、不被压住的一段高度（不超过 --ak-keyart-h，没有头图时不占位）：默认留一小条，画先露一口气、版面不贴着页眉；0 = 完全垫在版面背后；= --ak-keyart-h 即一条横幅带" },
+    "keyart-reveal": { $value: "72px", $description: "留在版面之上、不被压住的一段高度（不超过 --ak-keyart-h，没有头图时不占位）：默认留一小条，画先露一口气、版面不贴着页眉；0 = 完全垫在版面背后；= --ak-keyart-h 即一条横幅带。≤639 为 0（functional/compact）" },
     "keyart-veil": { $value: "60%", $description: "垫在版面背后那一段蒙的画布色纱：顶端的浓度，往下渐浓到 100%。画面越花调得越高；别低于 50%（侧栏 / 标题压在画上要读得清）" },
-    "keyart-veil-filter": { $value: "blur(8px)", $description: "纱底下先给画加的 backdrop-filter：细节先糊开、再被纱盖住，亮色主题下读起来是雾 / 景深而不是隔着磨砂膜；none 关闭。画面鲜艳的主题可以再加 saturate(.6) 之类" },
+    "keyart-veil-filter": { $value: "blur(8px)", $description: "纱底下先给画加的 filter（加在 ::before 里同一幅头图的副本上，不是 backdrop-filter）：细节先糊开、再被纱盖住，亮色主题下读起来是雾 / 景深而不是隔着磨砂膜；none 关闭。画面鲜艳的主题可以再加 saturate(.6) 之类" },
     "keyart-position": { $value: "center 30%", $description: "-position / -size 相对整块（页眉高 + -h）计算" },
     "keyart-size": { $value: "cover" },
     "keyart-bg": { $value: "transparent", $description: "画未铺满 / 未加载时的底色；默认透明，没有头图时页眉背后什么也不多画" },

package/src/functional/compact.json5

@@ -0,0 +1,26 @@
+{
+  typography: {
+    "font-size": {
+      $description: "窄屏（≤ 639）的标题档：只压缩 h3 以上，整档收一级（同 Primer f1–f3 的窄屏值）。原先手机上页面标题临时降到 h2 字号，和章节 h2 一样大（都 24），两级标题分不出来；整档一起收，层级在窄屏上照样成立。\nh4 / body 及以下不动：手机正文仍是 16（iOS 输入框小于 16 聚焦时会放大页面），表格 / 卡片里的 14 / 12 再缩就掉到「中文最小 12px」以下。\nfs-h2 / fs-h3 也给 HUD 数字用（.ak-stat__value / .ak-attr__value / .ak-stage__code / 倒计时），这些数字在手机上跟着小一档。",
+      $type: "dimension",
+      "fs-display-xl": { $value: "2.5rem", $description: "40（宽屏 56）" },
+      "fs-display": { $value: "2rem", $description: "32（宽屏 40）" },
+      "fs-h1": { $value: "1.625rem", $description: "26（宽屏 32）" },
+      "fs-h2": { $value: "1.375rem", $description: "22（宽屏 24）" },
+      "fs-h3": { $value: "1.125rem", $description: "18（宽屏 20）" },
+    },
+  },
+  size: {
+    layout: {
+      $description: "窄屏的版面间距：只改版面这一层（两侧 gutter、页眉高、大区块间隔）。原始的 --ak-space-* 阶梯不动——它同时管按钮内边距、列表缩进和点按面积，整档缩小会连触控区一起缩。",
+      $type: "dimension",
+      "header-h": { $value: "52px", $description: "宽屏 56" },
+      gutter: { $value: "{size.layout.gutter-sm}", $description: "16（宽屏 24）" },
+      "space-section": { $value: "{size.space.space-6}", $description: "24（宽屏 32）" },
+    },
+  },
+  chrome: {
+    $description: "窄屏的头图：不留露出段，版面（页面标题 / 动作行）直接从页眉之下排起、压在画上——手机首屏寸土寸金，画仍垫在页眉玻璃与版面背后透出来。主题显式设了 --ak-keyart-reveal 的照它的（chrome/keyart.css 在窄屏再收到 10vw 以内）。",
+    "keyart-reveal": { $value: "0px", $description: "宽屏 72" },
+  },
+}

package/tokens.css

@@ -98,7 +98,7 @@
   /* ─── typography · font · Typography —— 每条链的前两段都由 fonts.css 自托管（人人一致，也是「上线效果」）：
    * ① 官网同源的 Novecento Sans Wide / Bender（ASCII 子集：· » — × ° 等非 ASCII 会逐字落到 ②）
    * ② OFL 的 Noto Sans SC / Oswald / Chakra Petch / JetBrains Mono
-   * 之后是装机备选 → 系统字。fonts.css 没加载（Gadget 关掉 / 离线单文件）时自然退到后两段。 */
+   * 之后是装机备选 → 系统字。fonts.css 没加载（Gadget 关掉 / 站外只引 standalone.css）时自然退到后两段。 */
   --ak-font-body: "Source Han Sans SC", "Noto Sans SC", "Noto Sans CJK SC", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
   --ak-font-display: "Novecento Sans Wide", "Novecentosanswide-Bold", "Bender", "Oswald", "Michroma", "Arial Narrow", system-ui, sans-serif;   /* 拉丁展示字（大写）：Novecento 500–800 → Bender → Oswald 接非 ASCII */
   --ak-font-label: "Bender", "Bender-Bold", "Chakra Petch", "Rajdhani", "Saira", "Oswald", system-ui, sans-serif;   /* HUD 标签 / 数值：Bender 400/700 → Chakra Petch 接非 ASCII */
@@ -106,11 +106,11 @@
   --ak-font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;   /* 自托管 JetBrains Mono 100–800 正 / 斜 */
 
   /* ─── typography · font-size · 字号（rem；注释为 px） */
-  --ak-fs-display-xl: 3.5rem;              /* 56 */
-  --ak-fs-display: 2.5rem;                 /* 40 */
-  --ak-fs-h1: 2rem;                        /* 32 */
-  --ak-fs-h2: 1.5rem;                      /* 24 */
-  --ak-fs-h3: 1.25rem;                     /* 20 */
+  --ak-fs-display-xl: 3.5rem;              /* 56（≤639 为 40，见 functional/compact） */
+  --ak-fs-display: 2.5rem;                 /* 40（≤639 为 32） */
+  --ak-fs-h1: 2rem;                        /* 32（≤639 为 26） */
+  --ak-fs-h2: 1.5rem;                      /* 24（≤639 为 22） */
+  --ak-fs-h3: 1.25rem;                     /* 20（≤639 为 18） */
   --ak-fs-h4: 1.0625rem;                   /* 17 */
   --ak-fs-body-lg: 1.125rem;               /* 18 */
   --ak-fs-body: 1rem;                      /* 16 */
@@ -160,14 +160,14 @@
   --ak-bar-w-lg: 8px;
 
   /* ─── size · layout · Layout · 与 Codex 断点一致: 320 / 640 / 1120 / 1680 */
-  --ak-header-h: 56px;
-  --ak-local-nav-h: 48px;                  /* 二级吸顶栏（<1400 出现：菜单 / 本页目录） */
+  --ak-header-h: 56px;                     /* ≤639 为 52（functional/compact） */
   --ak-sidebar-w: 208px;
   --ak-toc-w: 200px;
   --ak-content-max: 1240px;                /* 阅读区最大宽度；表格密集页可加 .ak-wide */
   --ak-content-narrow: 760px;
-  --ak-gutter: 24px;
+  --ak-gutter: 24px;                       /* 版面两侧留白 / 栏间距；≤639 换成 gutter-sm */
   --ak-gutter-sm: 16px;
+  --ak-space-section: var(--ak-space-8);   /* 大区块之间的竖向间隔：带色条的章节标题 .ak-heading 的上边距、正文 hr 的上下；≤639 收到 space-6（24） */
 
   /* ─── size · icon · Icon sizes */
   --ak-icon-xs: 14px;
@@ -616,18 +616,19 @@ html.skin-theme-clientpref-night,
 /* ═══ 2d. CHROME · 页眉 / 头图 / 画布 的主题接口 ═══ */
 :root {
   /* ─── chrome · 2d. CHROME · 页眉 / 头图 / 画布 的主题接口（活动主题只改这里）
-   * 皮肤的「框」（页眉主行 + 二级栏 + 窄屏工具卡片）在两套主题下都是黑的：官网导航栏、游戏主界面顶栏、
+   * 皮肤的「框」（页眉 + 窄屏工具卡片）在两套主题下都是黑的：官网导航栏、游戏主界面顶栏、
    * 干员档案页的顶部黑边都是"黑框白纸 / 黑框黑纸"——所以 chrome 令牌不随明暗主题变，只跟着活动主题变。
    * prts.wiki 大活期间会换头图 / 顶栏角饰 / 站标 / 侧栏配色（现网 ext.gadget.seventhStyle 就是改这些）：
    * 新皮肤把这些位置抽成下面这组变量，Gadget / MediaWiki:Common.css 只需在 :root（或 html.ak-theme-xxx）上覆盖，
    * 不必碰选择器。skin.css 里的 .ak-header 把语义令牌重映射到 --ak-chrome-*，页眉内的按钮 / 输入 / 头像 / 菜单自动跟随。
-   * 页眉与头图的关系：头图 .ak-keyart 从页面顶端铺起，页眉是压在它上面的一块均匀黑玻璃（--ak-chrome-bg + 毛玻璃）——
+   * 页眉与头图的关系：头图 .ak-keyart 从页面顶端铺起，页眉是压在它上面的一块均匀黑玻璃（--ak-chrome-bg，毛玻璃默认不开）——
    * 玻璃保证页眉可读，画从玻璃后面透出来；照片一律走 --ak-keyart-image，--ak-chrome-image 只放画在玻璃之上的深色角饰 / 底纹。
    * --ak-logo-image（不设默认值）：站标，设置后 .ak-header__logo img 用 content 替换（Chromium / WebKit；Firefox 请改 $wgLogos）。 */
   --ak-theme-accent: var(--ak-cyan-500);   /* 活动主色：页眉标语 / 悬停、侧栏与目录分组条、页脚斜纹、窄屏卡片顶条 …（正文里的链接 / 选中仍是 --ak-accent；想一起换就连 --ak-accent 也覆盖） */
   --ak-theme-accent-fg: #000;
   --ak-theme-accent-subtle: rgba(24, 209, 255, .14);   /* 活动主色的淡底（页眉里的悬停 / 选中底、聚焦光圈）= --ak-theme-accent 的 14%；换主色时一起写——不用 color-mix() 推导，老浏览器也认 */
-  --ak-chrome-bg: rgba(8, 9, 10, .9);      /* 页眉玻璃：半透明 + 毛玻璃，头图 / 滚过来的正文在下面均匀透出。活动主题想让头图多透一点可调 alpha 到 .78–.85；别低于 .72（白色画面之下 #F2F2F2 仍 ≥7:1） */
+  --ak-chrome-bg: rgba(8, 9, 10, .9);      /* 页眉玻璃：半透明，头图 / 滚过来的正文在下面均匀透出。活动主题想让头图多透一点可调 alpha 到 .78–.85；别低于 .72（白色画面之下 #F2F2F2 仍 ≥7:1） */
+  --ak-chrome-backdrop: none;              /* 页眉玻璃底下的 backdrop-filter（毛玻璃），默认不开：玻璃 .9 不透明时模糊只透出一成，开不开截图逐像素平均只差 1.4/255，却是滚动时 GPU 上最重的一项——粘性页眉每帧都要把底下重糊一遍。玻璃调淡、确实要毛玻璃的活动主题再设 saturate(1.4) blur(10px) 之类 */
   --ak-chrome-bg-solid: #0e0f10;           /* 不透明处：窄屏工具卡片、飞出菜单 */
   --ak-chrome-fg: #f2f2f2;
   --ak-chrome-fg-2: rgba(255, 255, 255, .74);
@@ -643,9 +644,9 @@ html.skin-theme-clientpref-night,
   --ak-chrome-texture: .55;                /* 右侧半调网点强度 0–1（游戏顶栏 img_back / 官网左缘网点），0 关闭 */
   --ak-keyart-image: none;                 /* 头图（Key Visual）：从页面顶端铺起、垫在页眉与版面背后的一幅通栏画；--ak-keyart-h 为 0 时只在页眉后面透 */
   --ak-keyart-h: 0px;                      /* 页眉之下那段画的高度（画有多高，不是占多高——占位看 -reveal） */
-  --ak-keyart-reveal: 72px;                /* 留在版面之上、不被压住的一段高度（不超过 --ak-keyart-h，没有头图时不占位）：默认留一小条，画先露一口气、版面不贴着页眉；0 = 完全垫在版面背后；= --ak-keyart-h 即一条横幅带 */
+  --ak-keyart-reveal: 72px;                /* 留在版面之上、不被压住的一段高度（不超过 --ak-keyart-h，没有头图时不占位）：默认留一小条，画先露一口气、版面不贴着页眉；0 = 完全垫在版面背后；= --ak-keyart-h 即一条横幅带。≤639 为 0（functional/compact） */
   --ak-keyart-veil: 60%;                   /* 垫在版面背后那一段蒙的画布色纱：顶端的浓度，往下渐浓到 100%。画面越花调得越高；别低于 50%（侧栏 / 标题压在画上要读得清） */
-  --ak-keyart-veil-filter: blur(8px);      /* 纱底下先给画加的 backdrop-filter：细节先糊开、再被纱盖住，亮色主题下读起来是雾 / 景深而不是隔着磨砂膜；none 关闭。画面鲜艳的主题可以再加 saturate(.6) 之类 */
+  --ak-keyart-veil-filter: blur(8px);      /* 纱底下先给画加的 filter（加在 ::before 里同一幅头图的副本上，不是 backdrop-filter）：细节先糊开、再被纱盖住，亮色主题下读起来是雾 / 景深而不是隔着磨砂膜；none 关闭。画面鲜艳的主题可以再加 saturate(.6) 之类 */
   --ak-keyart-position: center 30%;        /* -position / -size 相对整块（页眉高 + -h）计算 */
   --ak-keyart-size: cover;
   --ak-keyart-bg: transparent;             /* 画未铺满 / 未加载时的底色；默认透明，没有头图时页眉背后什么也不多画 */
@@ -657,6 +658,32 @@ html.skin-theme-clientpref-night,
   --ak-canvas-attachment: scroll;
 }
 
+/* ═══ 窄屏（≤ 639，与 Codex 的 640 断点一致）：标题档整档收一级（h4 / 正文及以下不动），版面 gutter / 页眉高 / 大区块间隔收紧，头图不留露出段；原始的 --ak-space-* 阶梯不动 ═══ */
+@media (max-width: 639px) {
+  :root {
+    /* ─── typography */
+
+    /* ─── typography · font-size · 窄屏（≤ 639）的标题档：只压缩 h3 以上，整档收一级（同 Primer f1–f3 的窄屏值）。原先手机上页面标题临时降到 h2 字号，和章节 h2 一样大（都 24），两级标题分不出来；整档一起收，层级在窄屏上照样成立。
+     * h4 / body 及以下不动：手机正文仍是 16（iOS 输入框小于 16 聚焦时会放大页面），表格 / 卡片里的 14 / 12 再缩就掉到「中文最小 12px」以下。
+     * fs-h2 / fs-h3 也给 HUD 数字用（.ak-stat__value / .ak-attr__value / .ak-stage__code / 倒计时），这些数字在手机上跟着小一档。 */
+    --ak-fs-display-xl: 2.5rem;            /* 40（宽屏 56） */
+    --ak-fs-display: 2rem;                 /* 32（宽屏 40） */
+    --ak-fs-h1: 1.625rem;                  /* 26（宽屏 32） */
+    --ak-fs-h2: 1.375rem;                  /* 22（宽屏 24） */
+    --ak-fs-h3: 1.125rem;                  /* 18（宽屏 20） */
+
+    /* ─── size */
+
+    /* ─── size · layout · 窄屏的版面间距：只改版面这一层（两侧 gutter、页眉高、大区块间隔）。原始的 --ak-space-* 阶梯不动——它同时管按钮内边距、列表缩进和点按面积，整档缩小会连触控区一起缩。 */
+    --ak-header-h: 52px;                   /* 宽屏 56 */
+    --ak-gutter: var(--ak-gutter-sm);      /* 16（宽屏 24） */
+    --ak-space-section: var(--ak-space-6);   /* 24（宽屏 32） */
+
+    /* ─── chrome · 窄屏的头图：不留露出段，版面（页面标题 / 动作行）直接从页眉之下排起、压在画上——手机首屏寸土寸金，画仍垫在页眉玻璃与版面背后透出来。主题显式设了 --ak-keyart-reveal 的照它的（chrome/keyart.css 在窄屏再收到 10vw 以内）。 */
+    --ak-keyart-reveal: 0px;               /* 宽屏 72 */
+  }
+}
+
 /* ═══ 低分屏：正文链把微软雅黑提到 Noto Sans SC 前面（Windows 100% / 125% 缩放下未 hinting 的 Noto 发虚；没装雅黑的系统不受影响）；中文小字抬到 12px（1× 屏上 9–11px 的汉字分不到足够像素） ═══ */
 @media (max-resolution: 1.49dppx) {
   :root {

package/tokens.json

@@ -18,7 +18,7 @@
     "color.green-purple": "Green / Purple",
     "color.rarity": "Rarity · 官方色阶 (gamedata sandbox_table.charRarityColorList)",
     "color.sp": "Skill SP 回复类型（对应游戏内技能框配色，近似取值）",
-    "typography.font": "Typography —— 每条链的前两段都由 fonts.css 自托管（人人一致，也是「上线效果」）：\n① 官网同源的 Novecento Sans Wide / Bender（ASCII 子集：· » — × ° 等非 ASCII 会逐字落到 ②）\n② OFL 的 Noto Sans SC / Oswald / Chakra Petch / JetBrains Mono\n之后是装机备选 → 系统字。fonts.css 没加载（Gadget 关掉 / 离线单文件）时自然退到后两段。",
+    "typography.font": "Typography —— 每条链的前两段都由 fonts.css 自托管（人人一致，也是「上线效果」）：\n① 官网同源的 Novecento Sans Wide / Bender（ASCII 子集：· » — × ° 等非 ASCII 会逐字落到 ②）\n② OFL 的 Noto Sans SC / Oswald / Chakra Petch / JetBrains Mono\n之后是装机备选 → 系统字。fonts.css 没加载（Gadget 关掉 / 站外只引 standalone.css）时自然退到后两段。",
     "typography.font-size": "字号（rem；注释为 px）",
     "typography.legibility": "中文小字的字号下限：可能出现中文的 9–10px 小字（卡片副题、解锁条件、标签、页签计数…）写成 max(设计字号, var(--ak-fs-cjk-min))",
     "typography.line-height": "行高",
@@ -43,7 +43,7 @@
     "theme.rarity-text": "Rarity text-safe（用于文字/描边）",
     "theme.shadow": "阴影",
     "theme.decoration": "装饰：白线稿反相 / 斜纹 / 网格 / 网点 / 滚动条",
-    "chrome": "2d. CHROME · 页眉 / 头图 / 画布 的主题接口（活动主题只改这里）\n皮肤的「框」（页眉主行 + 二级栏 + 窄屏工具卡片）在两套主题下都是黑的：官网导航栏、游戏主界面顶栏、\n干员档案页的顶部黑边都是\"黑框白纸 / 黑框黑纸\"——所以 chrome 令牌不随明暗主题变，只跟着活动主题变。\nprts.wiki 大活期间会换头图 / 顶栏角饰 / 站标 / 侧栏配色（现网 ext.gadget.seventhStyle 就是改这些）：\n新皮肤把这些位置抽成下面这组变量，Gadget / MediaWiki:Common.css 只需在 :root（或 html.ak-theme-xxx）上覆盖，\n不必碰选择器。skin.css 里的 .ak-header 把语义令牌重映射到 --ak-chrome-*，页眉内的按钮 / 输入 / 头像 / 菜单自动跟随。\n页眉与头图的关系：头图 .ak-keyart 从页面顶端铺起，页眉是压在它上面的一块均匀黑玻璃（--ak-chrome-bg + 毛玻璃）——\n玻璃保证页眉可读，画从玻璃后面透出来；照片一律走 --ak-keyart-image，--ak-chrome-image 只放画在玻璃之上的深色角饰 / 底纹。\n--ak-logo-image（不设默认值）：站标，设置后 .ak-header__logo img 用 content 替换（Chromium / WebKit；Firefox 请改 $wgLogos）。",
+    "chrome": "2d. CHROME · 页眉 / 头图 / 画布 的主题接口（活动主题只改这里）\n皮肤的「框」（页眉 + 窄屏工具卡片）在两套主题下都是黑的：官网导航栏、游戏主界面顶栏、\n干员档案页的顶部黑边都是\"黑框白纸 / 黑框黑纸\"——所以 chrome 令牌不随明暗主题变，只跟着活动主题变。\nprts.wiki 大活期间会换头图 / 顶栏角饰 / 站标 / 侧栏配色（现网 ext.gadget.seventhStyle 就是改这些）：\n新皮肤把这些位置抽成下面这组变量，Gadget / MediaWiki:Common.css 只需在 :root（或 html.ak-theme-xxx）上覆盖，\n不必碰选择器。skin.css 里的 .ak-header 把语义令牌重映射到 --ak-chrome-*，页眉内的按钮 / 输入 / 头像 / 菜单自动跟随。\n页眉与头图的关系：头图 .ak-keyart 从页面顶端铺起，页眉是压在它上面的一块均匀黑玻璃（--ak-chrome-bg，毛玻璃默认不开）——\n玻璃保证页眉可读，画从玻璃后面透出来；照片一律走 --ak-keyart-image，--ak-chrome-image 只放画在玻璃之上的深色角饰 / 底纹。\n--ak-logo-image（不设默认值）：站标，设置后 .ak-header__logo img 用 content 替换（Chromium / WebKit；Firefox 请改 $wgLogos）。",
     "codex": "MediaWiki 1.43 核心与扩展（Codex 组件、mw-message-box、OOUI WikimediaUI 主题的部分）读取这些 CSS 变量。\n把它们映射到 PRTS Design 语义令牌，皮肤外的 UI 即可自动换肤。"
   },
   "tokens": [
@@ -905,11 +905,16 @@
         "fs-display-xl"
       ],
       "type": "dimension",
-      "description": "56",
+      "description": "56（≤639 为 40，见 functional/compact）",
       "css": "3.5rem",
       "resolved": {
         "light": "3.5rem",
         "dark": "3.5rem"
+      },
+      "compact": {
+        "css": "2.5rem",
+        "resolved": "2.5rem",
+        "description": "40（宽屏 56）"
       }
     },
     {
@@ -920,11 +925,16 @@
         "fs-display"
       ],
       "type": "dimension",
-      "description": "40",
+      "description": "40（≤639 为 32）",
       "css": "2.5rem",
       "resolved": {
         "light": "2.5rem",
         "dark": "2.5rem"
+      },
+      "compact": {
+        "css": "2rem",
+        "resolved": "2rem",
+        "description": "32（宽屏 40）"
       }
     },
     {
@@ -935,11 +945,16 @@
         "fs-h1"
       ],
       "type": "dimension",
-      "description": "32",
+      "description": "32（≤639 为 26）",
       "css": "2rem",
       "resolved": {
         "light": "2rem",
         "dark": "2rem"
+      },
+      "compact": {
+        "css": "1.625rem",
+        "resolved": "1.625rem",
+        "description": "26（宽屏 32）"
       }
     },
     {
@@ -950,11 +965,16 @@
         "fs-h2"
       ],
       "type": "dimension",
-      "description": "24",
+      "description": "24（≤639 为 22）",
       "css": "1.5rem",
       "resolved": {
         "light": "1.5rem",
         "dark": "1.5rem"
+      },
+      "compact": {
+        "css": "1.375rem",
+        "resolved": "1.375rem",
+        "description": "22（宽屏 24）"
       }
     },
     {
@@ -965,11 +985,16 @@
         "fs-h3"
       ],
       "type": "dimension",
-      "description": "20",
+      "description": "20（≤639 为 18）",
       "css": "1.25rem",
       "resolved": {
         "light": "1.25rem",
         "dark": "1.25rem"
+      },
+      "compact": {
+        "css": "1.125rem",
+        "resolved": "1.125rem",
+        "description": "18（宽屏 20）"
       }
     },
     {
@@ -1409,25 +1434,16 @@
         "header-h"
       ],
       "type": "dimension",
+      "description": "≤639 为 52（functional/compact）",
       "css": "56px",
       "resolved": {
         "light": "56px",
         "dark": "56px"
-      }
-    },
-    {
-      "name": "--ak-local-nav-h",
-      "path": [
-        "size",
-        "layout",
-        "local-nav-h"
-      ],
-      "type": "dimension",
-      "description": "二级吸顶栏（<1400 出现：菜单 / 本页目录）",
-      "css": "48px",
-      "resolved": {
-        "light": "48px",
-        "dark": "48px"
+      },
+      "compact": {
+        "css": "52px",
+        "resolved": "52px",
+        "description": "宽屏 56"
       }
     },
     {
@@ -1495,10 +1511,16 @@
         "gutter"
       ],
       "type": "dimension",
+      "description": "版面两侧留白 / 栏间距；≤639 换成 gutter-sm",
       "css": "24px",
       "resolved": {
         "light": "24px",
         "dark": "24px"
+      },
+      "compact": {
+        "css": "var(--ak-gutter-sm)",
+        "resolved": "16px",
+        "description": "16（宽屏 24）"
       }
     },
     {
@@ -1515,6 +1537,26 @@
         "dark": "16px"
       }
     },
+    {
+      "name": "--ak-space-section",
+      "path": [
+        "size",
+        "layout",
+        "space-section"
+      ],
+      "type": "dimension",
+      "description": "大区块之间的竖向间隔：带色条的章节标题 .ak-heading 的上边距、正文 hr 的上下；≤639 收到 space-6（24）",
+      "css": "var(--ak-space-8)",
+      "resolved": {
+        "light": "32px",
+        "dark": "32px"
+      },
+      "compact": {
+        "css": "var(--ak-space-6)",
+        "resolved": "24px",
+        "description": "24（宽屏 32）"
+      }
+    },
     {
       "name": "--ak-icon-xs",
       "path": [
@@ -3067,13 +3109,26 @@
         "chrome",
         "chrome-bg"
       ],
-      "description": "页眉玻璃：半透明 + 毛玻璃，头图 / 滚过来的正文在下面均匀透出。活动主题想让头图多透一点可调 alpha 到 .78–.85；别低于 .72（白色画面之下 #F2F2F2 仍 ≥7:1）",
+      "description": "页眉玻璃：半透明，头图 / 滚过来的正文在下面均匀透出。活动主题想让头图多透一点可调 alpha 到 .78–.85；别低于 .72（白色画面之下 #F2F2F2 仍 ≥7:1）",
       "css": "rgba(8, 9, 10, .9)",
       "resolved": {
         "light": "rgba(8, 9, 10, .9)",
         "dark": "rgba(8, 9, 10, .9)"
       }
     },
+    {
+      "name": "--ak-chrome-backdrop",
+      "path": [
+        "chrome",
+        "chrome-backdrop"
+      ],
+      "description": "页眉玻璃底下的 backdrop-filter（毛玻璃），默认不开：玻璃 .9 不透明时模糊只透出一成，开不开截图逐像素平均只差 1.4/255，却是滚动时 GPU 上最重的一项——粘性页眉每帧都要把底下重糊一遍。玻璃调淡、确实要毛玻璃的活动主题再设 saturate(1.4) blur(10px) 之类",
+      "css": "none",
+      "resolved": {
+        "light": "none",
+        "dark": "none"
+      }
+    },
     {
       "name": "--ak-chrome-bg-solid",
       "path": [
@@ -3267,11 +3322,16 @@
         "chrome",
         "keyart-reveal"
       ],
-      "description": "留在版面之上、不被压住的一段高度（不超过 --ak-keyart-h，没有头图时不占位）：默认留一小条，画先露一口气、版面不贴着页眉；0 = 完全垫在版面背后；= --ak-keyart-h 即一条横幅带",
+      "description": "留在版面之上、不被压住的一段高度（不超过 --ak-keyart-h，没有头图时不占位）：默认留一小条，画先露一口气、版面不贴着页眉；0 = 完全垫在版面背后；= --ak-keyart-h 即一条横幅带。≤639 为 0（functional/compact）",
       "css": "72px",
       "resolved": {
         "light": "72px",
         "dark": "72px"
+      },
+      "compact": {
+        "css": "0px",
+        "resolved": "0px",
+        "description": "宽屏 72"
       }
     },
     {
@@ -3293,7 +3353,7 @@
         "chrome",
         "keyart-veil-filter"
       ],
-      "description": "纱底下先给画加的 backdrop-filter：细节先糊开、再被纱盖住，亮色主题下读起来是雾 / 景深而不是隔着磨砂膜；none 关闭。画面鲜艳的主题可以再加 saturate(.6) 之类",
+      "description": "纱底下先给画加的 filter（加在 ::before 里同一幅头图的副本上，不是 backdrop-filter）：细节先糊开、再被纱盖住，亮色主题下读起来是雾 / 景深而不是隔着磨砂膜；none 关闭。画面鲜艳的主题可以再加 saturate(.6) 之类",
       "css": "blur(8px)",
       "resolved": {
         "light": "blur(8px)",