@mooncellwiki/prts-design-css 0.1.0

package/src/bridge-codex.css

@@ -0,0 +1,98 @@
+/*! ═══════════════════════════════════════════════════════════════════════════
+ *  PRTS Design · bridge-codex.css — Codex / MediaWiki 令牌桥接
+ *
+ *  生成物，勿手改：源文件是 packages/tokens/src/bridge/codex.json5，改完 pnpm tokens 重新生成。
+ *
+ *  MediaWiki 1.43 核心与扩展（Codex 组件、mw-message-box、OOUI WikimediaUI 主题的部分）读取这些不带 --ak- 前缀的变量；
+ *  这里把它们映射到 PRTS Design 语义令牌，皮肤外的 UI 即可自动换肤、跟随主题。
+ *  只属于 Arknights 皮肤（skins.akds.base 模块）：加载到别的皮肤（Vector 2022 …）上会把宿主自己的 Codex 配色整体改掉，所以不进 standalone.css。
+ *  依赖：tokens.css
+ * ═══════════════════════════════════════════════════════════════════════════ */
+
+/* ═══ 3. CODEX / MEDIAWIKI BRIDGE ═══ */
+:root, html.skin-theme-clientpref-night, :root[data-theme="dark"] {
+  /* ─── codex · MediaWiki 1.43 核心与扩展（Codex 组件、mw-message-box、OOUI WikimediaUI 主题的部分）读取这些 CSS 变量。
+   * 把它们映射到 PRTS Design 语义令牌，皮肤外的 UI 即可自动换肤。 */
+  --background-color-base: var(--ak-bg-surface);
+  --background-color-neutral: var(--ak-bg-surface-2);
+  --background-color-neutral-subtle: var(--ak-bg-canvas);
+  --background-color-interactive: var(--ak-bg-surface-2);
+  --background-color-interactive-subtle: var(--ak-bg-surface-2);
+  --background-color-interactive--hover: var(--ak-bg-hover);
+  --background-color-interactive--active: var(--ak-bg-active);
+  --background-color-disabled: var(--ak-bg-surface-3);
+  --background-color-disabled-subtle: var(--ak-bg-surface-2);
+  --background-color-inverted: var(--ak-bg-inverse);
+  --background-color-progressive: var(--ak-accent);
+  --background-color-progressive--hover: var(--ak-accent-hover);
+  --background-color-progressive--active: var(--ak-accent-hover);
+  --background-color-progressive-subtle: var(--ak-accent-subtle);
+  --background-color-destructive: var(--ak-danger);
+  --background-color-destructive-subtle: var(--ak-danger-bg);
+  --background-color-error-subtle: var(--ak-danger-bg);
+  --background-color-warning-subtle: var(--ak-warning-bg);
+  --background-color-success-subtle: var(--ak-success-bg);
+  --background-color-notice-subtle: var(--ak-info-bg);
+  --background-color-backdrop-light: var(--ak-bg-overlay);
+  --background-color-backdrop-dark: var(--ak-bg-overlay);
+  --color-base: var(--ak-fg);
+  --color-base--hover: var(--ak-fg);
+  --color-emphasized: var(--ak-fg);
+  --color-subtle: var(--ak-fg-muted);
+  --color-placeholder: var(--ak-fg-subtle);
+  --color-disabled: var(--ak-fg-disabled);
+  --color-inverted: var(--ak-fg-inverse);
+  --color-progressive: var(--ak-link);
+  --color-progressive--hover: var(--ak-link-hover);
+  --color-progressive--active: var(--ak-link-hover);
+  --color-visited: var(--ak-link-visited);
+  --color-destructive: var(--ak-danger);
+  --color-destructive--visited: var(--ak-link-new);
+  --color-error: var(--ak-danger);
+  --color-warning: var(--ak-warning);
+  --color-success: var(--ak-success);
+  --color-notice: var(--ak-fg-secondary);
+  --color-link-red: var(--ak-link-new);
+  --color-link-red--visited: var(--ak-link-new);
+  --color-icon-base: var(--ak-fg-secondary);
+  --border-color-base: var(--ak-border);
+  --border-color-subtle: var(--ak-border-subtle);
+  --border-color-muted: var(--ak-border-subtle);
+  --border-color-interactive: var(--ak-border-strong);
+  --border-color-disabled: var(--ak-border-subtle);
+  --border-color-progressive: var(--ak-accent);
+  --border-color-progressive--focus: var(--ak-focus);
+  --border-color-input-binary: var(--ak-border-strong);   /* 复选框/单选框/开关：OOUI 用 6px 边框画选中态的圆点，不映射就是 Codex 默认的 #36c，和强调色对不上 */
+  --border-color-input-binary--checked: var(--ak-accent);
+  --border-color-input-binary--active: var(--ak-accent-hover);
+  --border-color-destructive: var(--ak-danger);
+  --border-color-error: var(--ak-danger);
+  --border-color-warning: var(--ak-warning);
+  --border-color-success: var(--ak-success);
+  --border-color-notice: var(--ak-border-strong);
+  --border-color-transparent: transparent;
+  --border-radius-base: var(--ak-radius);
+  --border-radius-sharp: 0;
+  --border-radius-pill: var(--ak-radius-pill);
+  --box-shadow-drop-small: var(--ak-shadow-sm);
+  --box-shadow-drop-medium: var(--ak-shadow-md);
+  --box-shadow-drop-xx-large: var(--ak-shadow-lg);
+  --box-shadow-color-progressive--focus: var(--ak-focus);
+  --box-shadow-color-progressive--active: var(--ak-accent-hover);
+  --font-family-base: var(--ak-font-body);
+  --font-family-heading-main: var(--ak-font-body);
+  --font-family-monospace: var(--ak-font-mono);
+  --font-size-medium: var(--ak-fs-body);
+  --font-size-small: var(--ak-fs-sm);
+  --font-size-x-small: var(--ak-fs-xs);
+  --line-height-medium: var(--ak-lh-body);
+  --opacity-icon-base: 0.87;
+  --opacity-icon-subtle: 0.67;
+  --z-index-dropdown: var(--ak-z-dropdown);
+  --z-index-sticky: var(--ak-z-sticky);
+  --z-index-fixed: var(--ak-z-header);
+  --z-index-overlay: var(--ak-z-overlay);
+  --z-index-overlay-backdrop: var(--ak-z-overlay);
+  --z-index-toast-notification: var(--ak-z-toast);
+  --z-index-tooltip: var(--ak-z-tooltip);
+}

package/src/chrome/body.css

@@ -0,0 +1,13 @@
+/*! PRTS Design · chrome/body.css — Body content area 正文区 · 依赖：tokens.css · components/ */
+/* ═══ Body content area ═══ */
+.ak-body { position: relative; min-width: 0; background: var(--ak-bg-surface); border: 1px solid var(--ak-border); padding: var(--ak-space-6) var(--ak-space-8); }
+.ak-body--flat { background: transparent; border: 0; padding: 0; }
+.ak-body > .mw-body-content > *:first-child, .ak-body > .mw-body-content > .mw-parser-output > *:first-child { margin-top: 0; }
+.ak-body .mw-body-content { overflow-wrap: break-word; }   /* 长 URL / 长串不撑破白纸；宽表格自己走 .ak-table-scroll。正文里的组件也继承到它：scope.css 的作用域根在别的宿主上给同一个值，两边同步改 */
+.ak-body-foot { display: flex; flex-wrap: wrap; gap: var(--ak-space-3) var(--ak-space-6); align-items: center; list-style: none; font-size: var(--ak-fs-xs); color: var(--ak-fg-muted); margin: var(--ak-space-6) 0 0; padding: var(--ak-space-3) 0 0; border-top: 1px solid var(--ak-border); }   /* MW：ul#footer-info > li#footer-info-lastmod / -copyright */
+.ak-body-foot li { margin: 0; padding: 0; }
+.ak-body-foot li::before { display: none !important; }
+.ak-body-foot #footer-info-lastmod, .ak-body-foot .ak-lastmod { font-variant-numeric: tabular-nums; }
+.ak-body-foot #footer-info-copyright { flex-basis: 100%; }
+.ak-body-foot a { color: var(--ak-fg-secondary); }
+.ak-body-foot a:hover { color: var(--ak-accent); }

package/src/chrome/footer.css

@@ -0,0 +1,34 @@
+/*! PRTS Design · chrome/footer.css — Footer 页脚 · 依赖：tokens.css · components/ */
+/* ═══ Footer ═══ */
+/* 页脚和页眉一样是「框」：两套主题下都黑，读 --ak-chrome-*（此前读 --ak-bg-inverse——那是给反白组件用的，暗色下是白；显式选 night 时有覆盖、跟随系统为暗时没有，页脚就白了） */
+.ak-footer { background: var(--ak-chrome-bg-solid); color: var(--ak-chrome-fg); margin-top: auto; position: relative; overflow: hidden; }
+.ak-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: repeating-linear-gradient(-45deg, var(--ak-theme-accent) 0 12px, transparent 12px 24px); opacity: .9; }
+.ak-footer__inner { max-width: 1680px; margin: 0 auto; padding: var(--ak-space-10) var(--ak-gutter) var(--ak-space-6); box-sizing: border-box; display: grid; grid-auto-flow: column; grid-template-columns: 1.4fr; grid-auto-columns: 1fr; gap: var(--ak-space-8); }   /* 品牌占显式的 1.4fr 列，后面每个 .ak-footer__col 各得一条隐式 1fr 列：列数由内容定（预览三列，MW 皮肤只有一列 #footer-places） */
+.ak-footer__brand .ak-header__wordmark { font-size: 26px; }
+.ak-footer__brand p { font-size: var(--ak-fs-xs); opacity: .6; max-width: 40ch; margin: 12px 0 0; line-height: 1.7; }
+.ak-footer__col h4 { font: 700 var(--ak-fs-overline)/1 var(--ak-font-label); letter-spacing: var(--ak-tracking-overline); text-transform: uppercase; opacity: .55; margin: 0 0 12px; }
+.ak-footer__col ul { list-style: none; margin: 0; padding: 0; }
+.ak-footer__col li { margin: 0 0 8px; }
+.ak-footer__col li::before { display: none !important; }
+.ak-footer a { color: inherit; opacity: .8; font-size: var(--ak-fs-sm); text-decoration: none; }
+.ak-footer a:hover { opacity: 1; color: var(--ak-theme-accent); text-decoration: none; }
+.ak-footer__bottom { border-top: 1px solid rgba(127,127,127,.25); padding: var(--ak-space-4) calc(var(--ak-gutter) + 60px) var(--ak-space-4) var(--ak-gutter); font-size: var(--ak-fs-xs); display: flex; align-items: center; gap: var(--ak-space-3) var(--ak-space-6); flex-wrap: wrap; justify-content: space-between; max-width: 1680px; margin: 0 auto; box-sizing: border-box; }   /* 右内边距为 .ak-fab（44px + 20px 边距）让位，滚到底时不压住徽章 */
+.ak-footer__bottom-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--ak-space-4); opacity: .6; }
+.ak-footer__bottom-text .ak-en { opacity: .8; }
+/* 页脚徽章（$wgFooterIcons：CC 许可 / Powered by MediaWiki / SMW / 站点自定义…）
+ * 结构 = MW 原生 #footer-icons：ul > li#footer-*ico > a.cdx-button.cdx-button--fake-button > img（一个 li 内可有多个徽章）
+ * 徽章原样显示：26px 高、无底板、不灰度、不降透明、无悬停效果（只保留键盘焦点描边）。通用徽章（MW / SMW / CC BY-NC-SA）建议用
+ * preview/assets/badge/mono/ 的白描版（白色单色、透明底，由官方矢量重着色——透明底黑字的 poweredby_mediawiki.svg 在黑页脚上看不见），
+ * 站点自己的徽章（HoRain / Mooncell）就用原图；顺序由 $wgFooterIcons 的键序决定。
+ * 若某枚通用徽章仍是原彩色，给 ul 加 .ak-footer__icons--plate：恢复浅色底板。 */
+.ak-footer__icons { list-style: none; margin: 0 0 0 auto; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ak-space-3); }
+.ak-footer__icons li { display: contents; }   /* 同组徽章（一个 li 装多个）与其他组一起均匀换行 */
+.ak-footer__icons li::before { display: none !important; }
+.ak-footer__icons a, .ak-footer__icons a.cdx-button { display: inline-flex; align-items: center; height: 26px; min-height: 0; padding: 0; margin: 0; border: 0; border-radius: 0; box-sizing: content-box; font: inherit; line-height: 0; background: transparent; opacity: 1; }
+.ak-footer__icons a:hover { opacity: 1; }
+.ak-footer__icons a:focus-visible { outline: 2px solid var(--ak-theme-accent); outline-offset: 4px; }
+.ak-footer__icons img { display: block; height: 26px; width: auto; margin: 0 !important; }   /* !important 覆盖站点配置里的内联 margin */
+.ak-footer__icons--plate { gap: var(--ak-space-2); }
+.ak-footer__icons--plate a, .ak-footer__icons--plate a.cdx-button { height: 31px; padding: 0 4px; background: #f5f5f5; }
+.ak-footer__icons--plate img { height: 31px; }
+.ak-footer .ak-watermark { font-size: 9rem; right: -10px; bottom: -30px; opacity: .04; color: currentColor; }

package/src/chrome/header.css

@@ -0,0 +1,104 @@
+/*! PRTS Design · chrome/header.css — Header 黑色「终端」顶栏 · 依赖：tokens.css · components/ */
+/* ═══ Header（黑色「终端」顶栏）═══
+ *  两行结构：.ak-header__inner（品牌 · 搜索 · 工具，56px）
+ *          + .ak-local-nav（二级吸顶栏，仅 <1400 出现，48px）
+ *  页眉在两套主题下都是黑的：官网导航栏（#000 底 + 青色当前项 + 白线稿图标）、游戏主界面顶栏（深底 + 半调网点 + 青色选中块）、
+ *  干员档案页顶部那道黑边——"黑框白纸 / 黑框黑纸"是方舟本体的框架语言。颜色不读明暗主题，只读 tokens.css §2d 的 --ak-chrome-*，
+ *  并在这里把语义令牌重映射过去（--ak-fg → --ak-chrome-fg …），页眉里的按钮 / 搜索触发器 / 头像 / 徽标 / 菜单 / 开关就自动是页眉配色，
+ *  不必逐个写；活动主题（Gadget / Common.css）覆盖 --ak-chrome-* / --ak-theme-accent / --ak-keyart-* 即可换皮，不碰选择器。
+ *  装饰：右侧半调网点场（::before，--ak-chrome-texture 调强弱 / 关闭）· 底部 1px 亮线 · 标语 / 悬停 / 开关选中项 / 搜索图标框都用活动主色（游戏 selected_back / toggle_on 的那块青），亮暗主题下页眉配色完全一致。
+ *  页眉是一块均匀的黑玻璃（--ak-chrome-bg 半透明 + 毛玻璃），压在头图 .ak-keyart 的顶端之上（头图从 y=0 铺起，见 keyart.css）：可读性由这层玻璃保证，
+ *  与底下是什么画无关；活动主题想让画多透一点，只把 --ak-chrome-bg 的 alpha 调到 .78–.85（≥.72 时白色画面之下仍 ≥7:1）。不做横向渐隐、不做纵向渐变
+ *  —— 那种「右半张照片从左缘渐入」的顶栏底图既压不住白色图标又像贴上去的（试过，作罢）。--ak-chrome-image 只用于画在玻璃之上的深色角饰 / 底纹。
+ *  主行是三列网格，与 .ak-layout 的 侧栏 / 正文 两列对齐：品牌在侧栏列上方，搜索从正文列左缘起（≤560px，与面包屑 / 标题同一条线），
+ *  工具靠右 —— 页眉是三列各自的「列头」，不是游离的一条。页眉里不放站点级主导航：那 8 项与侧栏「通用」组 1:1 重复，导航只由侧栏承担
+ *  （MW 的 data-portlets-first 也只在侧栏渲染一次）。1680 容器与 .ak-layout 同为 border-box，超宽时左右缘才对得齐。
+ *  <1400 向下滚动时整个页眉上移一个 __inner 的高度 —— 主行滑出视口，二级栏贴顶。
+ *  <1120 主行回到 flex，只留 品牌 / 搜索 / ≡；工具（外观 / 通知 / 用户菜单）都在 .ak-header__screen 里 —— 桌面 display:contents
+ *  （子项直接参与主行网格），窄屏变成 ≡ 拉下、贴在主行右下沿的 320px 卡片（不再是全屏面板：里面只有三行）。开合是纯 CSS：
+ *  input.ak-nav-cb + label.ak-header__burger（同目录浮层的 .ak-toc-cb 做法），DOM 顺序固定为
+ *  logo · search · search-toggle · nav-cb · screen[tools] · burger（checkbox 在前才能用 ~ 联动）。
+ *  卡片 position:absolute 于 .ak-header__inner（position:relative），top:100% 即贴主行下沿、盖住二级栏；JS 补 Esc / 点卡片外 / 回到桌面宽度收起。 */
+.ak-header {
+  /* 语义令牌 → 页眉配色（只在页眉子树内生效；搜索面板 / 侧栏飞出挂在 body 下，不受影响） */
+  --ak-fg: var(--ak-chrome-fg); --ak-fg-secondary: var(--ak-chrome-fg-2); --ak-fg-muted: var(--ak-chrome-fg-muted); --ak-fg-subtle: var(--ak-chrome-fg-muted);
+  --ak-bg-surface: var(--ak-chrome-bg-solid); --ak-bg-surface-2: var(--ak-chrome-field); --ak-bg-surface-3: rgba(255,255,255,.12);
+  --ak-bg-hover: var(--ak-chrome-hover); --ak-bg-active: rgba(255,255,255,.14);
+  --ak-border: var(--ak-chrome-line); --ak-border-subtle: var(--ak-chrome-line); --ak-border-strong: var(--ak-chrome-line-strong);
+  --ak-bg-inverse: #fff; --ak-fg-inverse: #000;
+  --ak-accent: var(--ak-theme-accent); --ak-accent-fg: var(--ak-theme-accent-fg); --ak-accent-hover: var(--ak-theme-accent); --ak-focus: var(--ak-theme-accent);
+  --ak-accent-subtle: color-mix(in srgb, var(--ak-theme-accent) 14%, transparent);
+  --ak-glyph-filter: none;   /* 游戏白色线稿站标在黑页眉上不反相 */
+  --ak-shadow-lg: 0 16px 40px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4);
+  color-scheme: dark;        /* 页眉内的原生控件（无 JS 时的真搜索框）也走深色 */
+  position: sticky; top: 0; z-index: var(--ak-z-header); color: var(--ak-fg);
+  background: var(--ak-chrome-image) var(--ak-chrome-image-position) / var(--ak-chrome-image-size) var(--ak-chrome-image-repeat), var(--ak-chrome-bg);   /* 角饰在玻璃色之上（不被压暗，所以只放深色低对比素材）；玻璃色之下才是头图 / 滚过来的正文 */
+  backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
+  border-bottom: 1px solid var(--ak-chrome-line); transition: transform var(--ak-dur-normal) var(--ak-ease); }
+/* 右侧半调网点场：游戏顶栏 img_back / bkg_openserver、官网页面左缘那片网点。从右缘向左渐隐，只铺到工具区背后，不碰品牌 */
+.ak-header::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--ak-chrome-texture);
+  background-image: radial-gradient(rgba(255,255,255,.34) 1px, transparent 1.4px); background-size: 6px 6px; background-position: 0 1px;
+  -webkit-mask-image: linear-gradient(90deg, transparent 52%, #000 100%); mask-image: linear-gradient(90deg, transparent 52%, #000 100%); }
+.ak-header__inner { height: var(--ak-header-h); max-width: 1680px; margin: 0 auto; padding: 0 var(--ak-gutter); box-sizing: border-box; position: relative;
+  display: grid; grid-template-columns: var(--ak-sidebar-w) minmax(0, 1fr) auto; gap: var(--ak-gutter); align-items: center; }   /* 三列 = 侧栏 / 正文 / 工具，列宽与 .ak-layout 相同 */
+.ak-header__screen, .ak-header__tool { display: contents; }   /* 桌面：只是分组，不产生盒子；窄屏见 responsive.css */
+.ak-header__tool-label { display: none; }   /* 「外观」「通知」这类行标签只在窄屏面板里出现（桌面是图标） */
+.ak-nav-cb { display: none; position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }   /* 窄屏 display:block：视觉隐藏但可 Tab 聚焦 / 空格切换 */
+.ak-header__burger { display: none; flex: none; width: 40px; height: 40px; margin-right: -8px; align-items: center; justify-content: center; color: var(--ak-fg-secondary); cursor: pointer; }
+.ak-header__burger:hover { color: var(--ak-fg); background: var(--ak-bg-hover); }
+.ak-header__burger-icon { position: relative; display: block; width: 18px; height: 14px; }
+.ak-header__burger-icon i { position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; transition: transform var(--ak-dur-fast) var(--ak-ease), opacity var(--ak-dur-fast); }
+.ak-header__burger-icon i:nth-child(1) { top: 0; } .ak-header__burger-icon i:nth-child(2) { top: 6px; } .ak-header__burger-icon i:nth-child(3) { top: 12px; }
+.ak-nav-cb:checked ~ .ak-header__burger { color: var(--ak-fg); }
+.ak-nav-cb:checked ~ .ak-header__burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
+.ak-nav-cb:checked ~ .ak-header__burger i:nth-child(2) { opacity: 0; transform: scaleX(0); }
+.ak-nav-cb:checked ~ .ak-header__burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
+.ak-nav-cb:focus-visible ~ .ak-header__burger { outline: 2px solid var(--ak-focus); outline-offset: -2px; }
+.ak-header__logo { grid-column: 1; justify-self: start; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; flex: none; height: 100%; }   /* 品牌盖着侧栏列；不带任何分隔线 / 底线（右侧竖线是「品牌 | 导航」的分界，导航没了它就是悬着的；品牌列底下的主色横线也试过——意味不明，去掉） */
+.ak-header__logo:hover { text-decoration: none; color: inherit; }
+.ak-header__logo > img { height: 28px; width: auto; max-width: 48px; object-fit: contain; filter: var(--ak-glyph-filter); content: var(--ak-logo-image, normal); }   /* 站标：--ak-logo-image 设了就换（Chromium / WebKit 支持 content 替换 <img>；Firefox 忽略，请改 $wgLogos） */
+.ak-header__wordmark { font: 800 20px/1 var(--ak-font-display); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
+.ak-header__wordmark img { display: block; max-height: 30px; width: auto; }   /* MW $wgLogos.wordmark：站名是一张图时 */
+.ak-header__wordmark small { display: block; font: 600 9px/1 var(--ak-font-label); letter-spacing: .18em; color: var(--ak-theme-accent); margin-top: 3px; }   /* 标语用活动主色：官网导航当前项那一点青 */
+.ak-header__search { grid-column: 2; justify-self: start; width: 100%; max-width: 560px; min-width: 0; }   /* 从正文列左缘起，与面包屑 / 标题左缘同线；有 JS 时这是 button.ak-search-trigger（保留此类名，它自带 width:100%，所以上限用 max-width 写） */
+.ak-header__search .ak-input, .ak-header__search input[type="search"] { min-height: 34px; background: var(--ak-bg-surface-2); border-color: var(--ak-chrome-line); color: var(--ak-fg); }   /* 无 JS 回退：真表单 */
+.ak-header__search .ak-input:focus, .ak-header__search input[type="search"]:focus { background: rgba(0,0,0,.35); border-color: var(--ak-accent); box-shadow: none; }
+/* 有 JS 时 search-palette.js 把上面的表单换成这个「长得像输入框的按钮」，点击 / 聚焦回车 → 打开悬浮面板；真表单被搬进面板。
+ * 左端一格深色图标框（游戏 HUD announce_title_on 的图标位）+ 矩形浅条；曾试过右端斜切，Tab 聚焦的描边会被 clip-path 裁断，作罢 */
+.ak-search-trigger { display: inline-flex; align-items: center; gap: 10px; height: 34px; width: 100%; padding: 0 8px 0 0; box-sizing: border-box; border: 1px solid var(--ak-chrome-line); background: var(--ak-bg-surface-2); color: var(--ak-fg-muted); font: inherit; font-size: var(--ak-fs-sm); text-align: left; cursor: text; transition: background var(--ak-dur-fast), border-color var(--ak-dur-fast), color var(--ak-dur-fast); }
+.ak-search-trigger:hover { border-color: var(--ak-chrome-line-strong); color: var(--ak-fg-secondary); }
+.ak-search-trigger:focus-visible { outline: 2px solid var(--ak-focus); outline-offset: 1px; }
+.ak-search-trigger[aria-expanded="true"] { border-color: var(--ak-theme-accent); background: rgba(0,0,0,.35); color: var(--ak-fg); }
+.ak-search-trigger__icon { flex: none; align-self: stretch; width: 32px; height: auto; padding: 8px; box-sizing: border-box; display: grid; place-items: center; background: rgba(0,0,0,.35); color: var(--ak-theme-accent); transition: background var(--ak-dur-fast), color var(--ak-dur-fast); }
+.ak-search-trigger__icon .ak-icon { width: 16px; height: 16px; }   /* 皮肤把自己的图标（<span class="ak-icon ak-icon--search">）放进框里时的尺寸；sprite <svg> 由 padding 定 */
+.ak-search-trigger[aria-expanded="true"] .ak-search-trigger__icon { background: var(--ak-theme-accent); color: var(--ak-theme-accent-fg); }   /* 打开时图标框反成主色实底（游戏 selected 态） */
+.ak-search-trigger__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ak-header .ak-search__kbd, .ak-header .ak-kbd { background: rgba(0,0,0,.4); border-color: var(--ak-chrome-line-strong); box-shadow: inset 0 -1px 0 var(--ak-chrome-line-strong); color: var(--ak-fg-muted); }
+.ak-header__tools { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 4px; flex: none; }
+.ak-header__tools .ak-btn--icon, .ak-header__search-toggle { border-color: transparent; background: transparent; color: var(--ak-fg-secondary); }
+.ak-header__tools .ak-btn--icon:hover, .ak-header__search-toggle:hover { background: var(--ak-bg-hover); color: var(--ak-theme-accent); }   /* 悬停变活动主色：官网导航项的 hover */
+.ak-header__tools .ak-btn--icon svg, .ak-header__search-toggle svg { width: 20px; height: 20px; }
+.ak-header__user { display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; }
+.ak-header__user:hover { --_fg: var(--ak-theme-accent); }   /* 走 .ak-btn 的 --_fg（下面 :visited 也读它），悬停变活动主色 */
+.ak-header__user .ak-avatar { --_s: 28px; border-color: var(--ak-chrome-line-strong); }
+.ak-header__user > span:not(.ak-avatar, .ak-icon) { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* 用户名过长截断 */
+/* 用户菜单卡片（#p-personal）：.ak-dropdown > details > summary.ak-header__user + .ak-menu.ak-header__user-card——用户名抬头 + 「界面设置」（ULS 语言）+ 「个人工具」两组门户。
+ * 颜色不用另写：.ak-header 内 --ak-bg-surface / --ak-border / --ak-fg 已重映射到 --ak-chrome-*，卡片自动是页眉配色 */
+.ak-header__user-menu > details[open] > .ak-header__user { --_fg: var(--ak-theme-accent); background: var(--ak-bg-hover); }
+.ak-header__user-card { min-width: 240px; top: calc(100% + 6px); padding: 0 0 6px; }
+.ak-header__user-card .ak-icon { width: 18px; height: 18px; flex: none; color: var(--ak-fg-muted); }
+.ak-header__user-card a:hover .ak-icon { color: var(--ak-fg); }
+/* Echo 通知徽标（MW #p-notifications > ul > li#pt-notifications-alert / -notice）：与工具区其它按钮同高并排 */
+.ak-header__notifications { display: flex; align-items: center; height: 100%; }
+.ak-header__notifications ul { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
+.ak-header__notifications li { margin: 0; }
+.ak-header__notifications li::before { display: none !important; }
+.ak-header__notifications a:hover { color: var(--ak-theme-accent); }
+/* 页眉里的链接不分已访问：base/typography.css 的 a:visited（紫）在黑底上发暗，用户名 / #p-personal / Echo 一律用自己的颜色 */
+.ak-header a:visited { color: inherit; }
+.ak-header .ak-btn:visited { color: var(--_fg); }
+
+/* Notification badge on header icon：36px 按钮里 20px 图标占 8–28，徽标（18px 圆）贴到 2px 处，圆心落在图标右上角附近——只压住铃铛的右上角，
+   不像之前 top/right 4px + 28px 长条那样盖掉整个图标（Naive UI 的 translate(50%,-50%) 也是把圆心放在内容右上角） */
+.ak-header__tools .ak-badge { position: absolute; top: 2px; right: 2px; }
+.ak-header__tools .ak-btn--icon { position: relative; }

package/src/chrome/index.css

@@ -0,0 +1,29 @@
+/*! ═══════════════════════════════════════════════════════════════════════════
+ *  PRTS Design · chrome/ — L2 MediaWiki 皮肤骨架（原 skin.css）
+ *  DOM 约定（见文档站 /guide/skin-template）：
+ *    body.skin-arknights
+ *      header.ak-header > .ak-header__inner > [menu][logo][nav][search][tools]
+ *      .ak-layout > aside.ak-sidebar + main.ak-main
+ *        main.ak-main > .ak-main__inner > header.ak-page-header + aside.ak-toc + .ak-body + …
+ *        （目录在 DOM 上属于页面、紧跟标题；宽屏时才被抬到主列右侧导轨，见 toc.css）
+ *      footer.ak-footer
+ *  顺序：在通用组件与方舟组件之后（页眉里的 .ak-btn / .ak-menu / .ak-fab 等靠同特指度后到覆盖）；
+ *        responsive.css 最后（各块的断点规则集中在那里，内部顺序敏感）。
+ *  demo-theme.css 不在此列：「示例活动主题」，只给预览用（MW 上等于一份 Gadget）。
+ *  依赖：tokens.css · components/
+ * ═══════════════════════════════════════════════════════════════════════════ */
+@import url("shell.css");
+@import url("header.css");
+@import url("local-nav.css");
+@import url("keyart.css");
+@import url("layout.css");
+@import url("sidebar.css");
+@import url("sidebar-tree.css");
+@import url("page-header.css");
+@import url("body.css");
+@import url("toc.css");
+@import url("footer.css");
+@import url("theme-toggle.css");
+@import url("search-palette.css");
+@import url("special-pages.css");
+@import url("responsive.css");

package/src/chrome/keyart.css

@@ -0,0 +1,15 @@
+/*! PRTS Design · chrome/keyart.css — Key art 头图带 · 画布底图 · 依赖：tokens.css · components/ */
+/* ═══ Key art（头图带）＋ 画布底图 ═══
+ *  .ak-keyart 是 .ak-layout 之上的一条通栏画，默认 --ak-keyart-h: 0 不占位、无 DOM 副作用；活动主题设 --ak-keyart-image + --ak-keyart-h 即出现
+ *  （现网 body 背景里那幅头图的位置）。画从页面顶端铺起：盒子上移一个页眉高、再用同样的 padding-top 把内容压回页眉之下，于是画的顶端在
+ *  粘性页眉（更高的 z-index）背后 —— 页眉是压在画上的一块黑玻璃，画在玻璃后面均匀地透出来（多少由 --ak-chrome-bg 的 alpha 决定），
+ *  黑框 + 画是一整块，不再有「顶栏一张、头图一张」两段裁切。--ak-keyart-h 是页眉之下可见的那段高度；-position / -size 相对整块（页眉 + 可见段）算。
+ *  底部按 --ak-keyart-fade 渐隐进画布色（min() 兜住 -h: 0 时不往页眉后面画一道）；-bg 默认透明，所以没有头图时页眉背后什么也不多画。
+ *  --ak-canvas-image 叠在 body 的 --ak-bg-canvas 之上（现网 body 的 bkg 底纹 / 大图位置）；侧栏与目录没有底色，所以画布图应当是低对比的底纹。 */
+.ak-keyart { --_over: var(--ak-header-h);   /* 往上探进页眉背后的高度；<1400 页眉多一行二级栏，见 responsive.css */
+  position: relative; flex: none; box-sizing: content-box; height: var(--ak-keyart-h); padding-top: var(--_over); margin: calc(-1 * var(--_over)) 0 0; overflow: hidden;
+  background: var(--ak-keyart-bg) var(--ak-keyart-image) var(--ak-keyart-position) / var(--ak-keyart-size) no-repeat; }
+.ak-keyart::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: min(var(--ak-keyart-fade), var(--ak-keyart-h)); background: linear-gradient(to bottom, transparent, var(--ak-bg-canvas)); pointer-events: none; }
+.ak-keyart__inner { position: relative; height: 100%; max-width: 1680px; margin: 0 auto; padding: 0 var(--ak-gutter); box-sizing: border-box; }   /* 主题若要在头图上放东西（活动标题 / 倒计时），放这里；与页眉三列同宽，且在页眉之下（padding-top 之内不算） */
+@media (max-width: 639px) { .ak-keyart { height: min(var(--ak-keyart-h), 40vw); } .ak-keyart::after { height: min(var(--ak-keyart-fade), var(--ak-keyart-h), 40vw); } }
+body.skin-arknights { background: var(--ak-bg-canvas) var(--ak-canvas-image) var(--ak-canvas-position) / var(--ak-canvas-size) var(--ak-canvas-repeat); background-attachment: var(--ak-canvas-attachment); }

package/src/chrome/layout.css

@@ -0,0 +1,15 @@
+/*! PRTS Design · chrome/layout.css — Layout 三列布局 · 依赖：tokens.css · components/ */
+/* ═══ Layout ═══
+ *  两列网格：侧栏 + 主列。目录导轨不是第三列，而是由 .ak-main 的右内边距预留出来的
+ *  —— 这样 aside.ak-toc 在 DOM 上可以待在页面标题下方（属于页面而非布局），
+ *  窄屏收起时直接落回正文流，不需要浮层，也不需要第二份 DOM。 */
+.ak-layout { flex: 1; display: grid; grid-template-columns: var(--ak-sidebar-w) minmax(0, 1fr); gap: var(--ak-gutter); max-width: 1680px; width: 100%; margin: 0 auto; padding: var(--ak-space-6) var(--ak-gutter) var(--ak-space-16); box-sizing: border-box; align-items: start; }
+.ak-layout--no-toc .ak-toc { display: none; }
+.ak-layout--no-toc .ak-main { max-width: var(--ak-content-max); padding-right: 0; }   /* 没有目录：不让导轨，主列收窄到阅读列 */
+.ak-layout--wide { max-width: none; }
+.ak-layout--reading { grid-template-columns: var(--ak-sidebar-w) minmax(0, calc(var(--ak-content-max) + var(--ak-toc-w) + var(--ak-gutter))); justify-content: center; }
+/* 主列 = 阅读列 + 右侧导轨（给 .ak-toc 让位的右内边距）。宽度封顶在两者之和、靠左：超宽屏上导轨贴着正文右缘，多出来的空间留在最右，
+ * 而不是导轨被推到网格列的最右、与正文之间拉开一段空白（Skin:Arknights 在 1680+ 上核过） */
+.ak-main { min-width: 0; position: relative; width: 100%; max-width: calc(var(--ak-content-max) + var(--ak-toc-w) + var(--ak-gutter)); padding-right: calc(var(--ak-toc-w) + var(--ak-gutter)); box-sizing: border-box; justify-self: start; }
+.ak-main__inner { max-width: var(--ak-content-max); }
+.ak-layout--wide .ak-main, .ak-layout--wide .ak-main__inner { max-width: none; }

package/src/chrome/local-nav.css

@@ -0,0 +1,17 @@
+/*! PRTS Design · chrome/local-nav.css — Local nav 二级吸顶栏 · 依赖：tokens.css · components/ */
+/* ═══ Local nav（二级吸顶栏）═══
+ *  页眉第二行，只在 <1400（导轨/侧栏收起时）出现：左「菜单」拉出侧栏抽屉、右「本页目录」拉下目录浮层。
+ *  它是收起页眉后仍然贴顶的那一条 —— 所以两个入口在任何滚动位置都够得着，不需要角落里的浮动按钮。 */
+.ak-local-nav { display: none; height: var(--ak-local-nav-h); max-width: 1680px; margin: 0 auto; padding: 0 calc(var(--ak-gutter) - 10px); box-sizing: border-box; align-items: center; border-top: 1px solid var(--ak-border); }
+.ak-local-nav__btn { display: inline-flex; align-items: center; gap: 8px; height: var(--ak-local-nav-h); padding: 0 10px; border: 0; background: transparent; color: var(--ak-fg-secondary); font-family: inherit; font-size: var(--ak-fs-sm); font-weight: 600; line-height: 1; cursor: pointer; }
+.ak-local-nav__btn:hover { color: var(--ak-fg); background: var(--ak-bg-hover); }
+.ak-local-nav__btn .ak-icon { width: 18px; height: 18px; }
+.ak-local-nav__menu { display: none; }   /* 侧栏还在左边时（≥1120）不需要这个入口 */
+.ak-local-nav__toc { margin-left: auto; }
+.ak-local-nav__chevron { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--ak-dur-fast) var(--ak-ease); }
+.ak-toc-cb { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }   /* 视觉隐藏但可 Tab 聚焦 / 空格切换；见 toc.css */
+.ak-toc-cb:checked ~ .ak-local-nav__toc { color: var(--ak-accent); }
+.ak-toc-cb:checked ~ .ak-local-nav__toc .ak-local-nav__chevron { transform: translateY(2px) rotate(-135deg); }
+.ak-toc-cb:focus-visible ~ .ak-local-nav__toc { outline: 2px solid var(--ak-focus); outline-offset: -2px; }
+@media (prefers-reduced-motion: reduce) { .ak-header, .ak-local-nav__chevron, .ak-header__burger-icon i { transition: none; } }   /* .ak-header__screen 的 animation:none 见 responsive.css <1120 块之后——写在这里会被后面同选择器的 animation 覆盖 */
+@keyframes ak-nav-screen-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

package/src/chrome/page-header.css

@@ -0,0 +1,68 @@
+/*! PRTS Design · chrome/page-header.css — Page header 页面头 · 标题行动作簇 · 依赖：tokens.css · components/ */
+/* ═══ Page header ═══ */
+.ak-page-header { margin-bottom: var(--ak-space-5); }
+.ak-page-header__top { display: flex; align-items: center; gap: var(--ak-space-3); min-height: 24px; margin-bottom: 4px; }
+.ak-page-header__top:empty { display: none; }
+.ak-page-header__top .mw-indicators { display: flex; flex-wrap: wrap; gap: var(--ak-space-2); margin-left: auto; float: none; font-size: var(--ak-fs-xs); }   /* MW 页面状态指示器（<indicator>）：靠右一排 */
+.ak-page-header__top .mw-indicators:empty { display: none; }
+.ak-page-header__top .mw-indicator { display: inline-flex; align-items: center; }
+.ak-page-header__ns { font: 700 var(--ak-fs-overline)/1 var(--ak-font-label); letter-spacing: var(--ak-tracking-overline); text-transform: uppercase; color: var(--ak-fg-muted); }   /* 同 .ak-card__eyebrow：命名空间是不可点的装饰小标签，不上青 */
+.ak-page-header__title, .skin-arknights .mw-body h1#firstHeading, .skin-arknights #firstHeading {
+  font-family: var(--ak-font-body); font-size: var(--ak-fs-h1); font-weight: 800; line-height: 1.2; margin: 0;
+  padding: 0 0 0 var(--ak-space-4); border: 0; border-left: var(--ak-bar-w-lg) solid var(--ak-accent); letter-spacing: .01em; overflow-wrap: anywhere; }
+.ak-page-header__title .ak-en, #firstHeading .ak-en { display: block; font-size: .5em; color: var(--ak-fg-muted); margin-top: 2px; letter-spacing: var(--ak-tracking-caps); }
+.ak-page-header__title .mw-page-title-namespace { color: var(--ak-fg-muted); font-weight: 600; }
+.ak-page-header__title .mw-page-title-separator { color: var(--ak-fg-subtle); }
+.ak-page-header__title .mw-page-title-parenthesis { color: var(--ak-fg-muted); font-weight: 500; font-size: .7em; }
+/* 皮肤可以把 h1 包在 .ak-page-heading 里、下面挂一行 tagline（Skin:Arknights：「来自 PRTS」/ 按名字空间的说明）：色条与左内边距挪到包装上，h1 自己不再画 */
+.ak-page-heading { position: relative; flex: 1 1 auto; min-width: 0; padding-left: var(--ak-space-4); border-left: var(--ak-bar-w-lg) solid var(--ak-accent); }
+.ak-page-heading > .ak-page-header__title, .skin-arknights .ak-page-heading > h1#firstHeading, .skin-arknights .ak-page-heading > #firstHeading { padding-left: 0; border-left: 0; }
+.ak-page-heading--blank { display: none; }   /* 标题为空（MediaWiki:Mainpage-title = -） */
+.ak-page-heading__tagline { display: block; font-size: var(--ak-fs-xs); color: var(--ak-fg-muted); margin-top: 4px; line-height: 1.5; }
+.ak-page-heading__tagline:empty { display: none; }
+/* ── 标题行：h1 + 页面动作簇（Citizen 式）──
+ * 标题 flex:1，簇靠右、底线与标题青条底对齐；标题很长时整簇换到标题下方。不再有整条下划线页签——簇里没有「当前」要标。
+ * DOM 仍按 MW 菜单顺序（associated-pages → views → variants → 更多），显示顺序由 order 定：讨论 → 查看历史 → 编辑 / 查看源代码 → ★ → 变体 → 更多。 */
+.ak-page-header__row { display: flex; align-items: flex-end; gap: var(--ak-space-3) var(--ak-space-4); flex-wrap: wrap; margin-bottom: var(--ak-space-3); }
+.ak-page-header__row > .ak-page-header__title, .ak-page-header__row > #firstHeading { flex: 1 1 auto; min-width: 0; }
+.ak-page-tools { display: flex; align-items: center; gap: 4px; flex: none; max-width: 100%; margin-bottom: 2px; }
+.ak-page-tabs { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
+.ak-page-tabs li { margin: 0; }
+.ak-page-tabs li::before { display: none !important; }
+/* 当前态（选中的命名空间页签「页面」、「阅读」）只留给读屏器——sr-only 而不是 display:none，accesskey 还在。
+ * 它们只在不是当前态时才是一个动作：讨论页上出现「页面」、历史 / diff 页上出现「阅读」（diff 页 body 仍是 action-view，皮肤要用 :has(.diff) 把 #ca-view 放回来）。 */
+.ak-page-tabs li.selected { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+.action-view:has(.diff, .mw-revision) .ak-page-tabs li#ca-view { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: nowrap; }   /* diff / oldid 页 body 仍是 action-view，核心把「阅读」标成 selected：这里把回到文章的那一个放回来（同 Citizen） */
+/* 32px 幽灵按钮：1px 透明框（实底 / 细框变体只换颜色，不改尺寸） */
+.ak-page-tabs li a, .ak-page-tools__btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid transparent; box-sizing: border-box; font-weight: 600; font-size: var(--ak-fs-sm); line-height: 1; color: var(--ak-fg-secondary); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background var(--ak-dur-fast), color var(--ak-dur-fast); }
+.ak-page-tabs li a:hover, .ak-page-tools__btn:hover { color: var(--ak-fg); background: var(--ak-bg-hover); text-decoration: none; }
+.ak-page-tabs li a:focus-visible, .ak-page-tools__btn:focus-visible { outline: 2px solid var(--ak-focus); outline-offset: -2px; }
+.ak-page-tabs .ak-icon, .ak-page-tools__btn .ak-icon { width: 18px; height: 18px; flex: none; color: var(--ak-fg-muted); }
+.ak-page-tabs li a:hover .ak-icon, .ak-page-tools__btn:hover .ak-icon { color: var(--ak-fg); }
+.ak-page-tabs li.new a { color: var(--ak-link-new); }
+/* 主动作：「编辑」是簇里唯一的实底（#ca-edit / #ca-ve-edit）；不可编辑时这一格是细框「查看源代码」——不上色，它不是一个「鼓励你做」的动作 */
+#ca-edit > a, #ca-ve-edit > a { background: var(--ak-accent); color: var(--ak-accent-fg); border-color: var(--ak-accent); }
+#ca-edit > a .ak-icon, #ca-ve-edit > a .ak-icon { color: inherit; }
+#ca-edit > a:hover, #ca-ve-edit > a:hover { background: var(--ak-accent-hover); border-color: var(--ak-accent-hover); color: var(--ak-accent-fg); }
+#ca-edit > a:hover .ak-icon, #ca-ve-edit > a:hover .ak-icon { color: inherit; }
+#ca-viewsource > a { border-color: var(--ak-border); color: var(--ak-fg); }
+/* ★ 监视 / 取消监视：纯图标，已监视黄（--ak-accent-2） */
+#ca-watch > a, #ca-unwatch > a { padding: 0 6px; }
+#ca-watch > a > span:not(.ak-icon), #ca-unwatch > a > span:not(.ak-icon) { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+#ca-watch .ak-icon, #ca-unwatch .ak-icon { width: 20px; height: 20px; }
+#ca-unwatch .ak-icon { color: var(--ak-accent-2); }
+#ca-watch > a.loading .ak-icon, #ca-unwatch > a.loading .ak-icon { opacity: .4; }   /* mediawiki.page.watch.ajax 请求中 */
+/* 簇内顺序 */
+#p-associated-pages { order: 1; } #p-views { order: 2; } .ak-page-tools__variants { order: 3; } .ak-page-tools__more { order: 4; }
+#ca-history { order: 1; } #ca-viewsource, #ca-edit, #ca-ve-edit { order: 2; } #ca-watch, #ca-unwatch { order: 3; }
+/* 「更多」：⋯ + 文字；卡片 = .ak-menu 里两组门户（操作 #p-cactions · 工具 #p-tb），右对齐贴按钮。工具箱里的 specialpages / upload 不进这里——同 Citizen 进侧栏站点导航 */
+.ak-page-tools__btn { padding: 0 10px 0 8px; }
+.ak-page-tools__more > details[open] > .ak-page-tools__btn { background: var(--ak-bg-hover); color: var(--ak-fg); }
+.ak-page-tools__card { min-width: 240px; top: calc(100% + 6px); padding: 6px 0; }
+.ak-page-tools__card .ak-menu__label { padding-top: 8px; }
+.ak-page-tools__card a { padding: 7px 14px; }
+.ak-page-tools__card .ak-icon { width: 18px; height: 18px; flex: none; color: var(--ak-fg-muted); }
+.ak-page-tools__card a:hover .ak-icon { color: var(--ak-fg); }
+/* Content sub / redirected from */
+.ak-page-header__sub { font-size: var(--ak-fs-xs); color: var(--ak-fg-muted); margin: 6px 0 0; }
+.ak-page-header__sub:empty { display: none; }

package/src/chrome/responsive.css

@@ -0,0 +1,127 @@
+/*! PRTS Design · chrome/responsive.css — Responsive 断点（各块的响应式规则集中在这里，顺序敏感，暂不拆） · 依赖：tokens.css · components/ */
+/* ═══ Responsive ═══ */
+/* < 1400：右侧导轨收起 —— 页眉长出二级吸顶栏，目录改由它拉下的浮层承载 */
+@media (max-width: 1400px) {
+  .ak-local-nav { display: flex; }
+  .ak-keyart { --_over: calc(var(--ak-header-h) + var(--ak-local-nav-h)); }   /* 头图探到两行页眉的背后，两行玻璃底下是同一幅画 */
+  .ak-fab { display: none; }   /* 回到顶部收进目录浮层，不再浮在内容上 */
+  .ak-layout .ak-main { max-width: none; padding-right: 0; }   /* 导轨收起：主列铺满（同特指度压过 .ak-layout--no-toc .ak-main 的阅读列封顶） */
+  /* 向下滚动收起页眉主行（JS 在 <html> 上切 .ak-condensed；无 JS 则始终两行，同样可用） */
+  :root.ak-condensed .ak-header { transform: translateY(calc(-1 * var(--ak-header-h))); }
+  :where(.mw-body-content) :is(h1, h2, h3, h4, h5, h6) { scroll-margin-top: calc(var(--ak-header-h) + var(--ak-local-nav-h) + 8px); }   /* 页眉未收起时也不挡住锚点目标 */
+
+  /* 目录浮层：顶边跟着吸顶栏下沿走，右对齐于二级栏。宽、高都锁死（参考 VitePress LocalNavOutlineDropdown 的 .items）：
+   *  · 宽 = 360px 定宽（≤639 改为拉满可用宽度，见下），border-box，不随条目长短变；
+   *  · 高 ≤ 吸顶栏下沿到视口底的余量，超出只有 .ak-toc__inner 内滚。用 100dvh：手机地址栏 / 底部工具栏收放时 100vh 是「最大视口」，
+   *    浮层底会被工具栏盖住、又因为「没超高」不出内滚（VitePress 靠 JS 量 innerHeight 写 --vp-vh 解决同一件事），100vh 只给不认 dvh 的老浏览器兜底；
+   *  · 开着时 JS 锁住页面滚动（html.ak-scroll-lock，见「Responsive」块末尾），浮层内滚到头也不会把页面带着走。 */
+  .ak-toc { --_top: calc(var(--ak-header-h) + var(--ak-local-nav-h)); position: fixed; top: var(--_top); right: var(--ak-gutter); left: auto; bottom: auto; z-index: var(--ak-z-dropdown); box-sizing: border-box;
+    display: none; flex-direction: column; width: min(360px, calc(100vw - var(--ak-gutter) * 2)); max-height: calc(100vh - var(--_top) - var(--ak-space-4)); max-height: calc(100dvh - var(--_top) - var(--ak-space-4));
+    background: var(--ak-bg-surface); border: 1px solid var(--ak-border); border-top-width: 3px; border-image: linear-gradient(var(--ak-accent) 3px, var(--ak-border) 3px) 3 1 1 1; box-shadow: var(--ak-shadow-lg); font-size: var(--ak-fs-sm); }
+  :root.ak-condensed .ak-toc { --_top: var(--ak-local-nav-h); }
+  /* 开：JS 把 .ak-toc-cb 的状态镜像到 html.ak-toc-open（主路径，不依赖 :has()——国产手机浏览器 / 旧 WebView 内核没有 :has() 时仍是真正的浮层）；
+   * 无 JS 时由 body:has() 纯 CSS 桥接。两条必须分开写：选择器列表里混进不认识的 :has() 会让整条规则作废 */
+  :root.ak-toc-open .ak-toc { display: flex; animation: ak-nav-screen-in var(--ak-dur-normal) var(--ak-ease); }
+  body:has(.ak-toc-cb:checked) .ak-toc { display: flex; animation: ak-nav-screen-in var(--ak-dur-normal) var(--ak-ease); }
+  .ak-toc__top { display: flex; align-items: center; gap: 8px; flex: none; padding: var(--ak-space-3) var(--ak-space-4); color: var(--ak-accent); font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--ak-border); }
+  .ak-toc__top:hover { background: var(--ak-bg-hover); text-decoration: none; }
+  .ak-toc__top .ak-icon { width: 16px; height: 16px; }
+  .ak-toc__inner { position: static; flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; padding: var(--ak-space-3) var(--ak-space-4); }   /* flex 子项默认 min-height:auto 不收缩：必须 min-height:0 才会在浮层限高内出内滚（overscroll-behavior:contain 沿用导轨态的声明） */
+  .ak-toc__title, .ak-toc__progress { display: none; }   /* 标题已经写在按钮上；阅读进度属于导轨，不进浮层 */
+  .ak-toc li a { white-space: normal; }   /* 浮层比导轨宽松，长标题换行而非截断 */
+  /* 既不支持 :has() 又没有 JS（MW 核心给 <html> 的 client-nojs；预览骨架同样标了）：目录退回正文流内的静态卡片，始终展开 */
+  @supports not selector(:has(*)) {
+    .client-nojs .ak-local-nav__toc, .client-nojs .ak-toc__top { display: none; }
+    .client-nojs .ak-fab { display: grid; }
+    .client-nojs .ak-toc { position: static; display: flex; width: auto; max-height: none; box-shadow: none; margin: 0 0 var(--ak-space-5); }
+  }
+}
+@media (max-width: 1400px) and (prefers-reduced-motion: reduce) {   /* 紧跟上面的块：同选择器同特异性，animation:none 必须排在后面才生效 */
+  :root.ak-toc-open .ak-toc { animation: none; }
+  body:has(.ak-toc-cb:checked) .ak-toc { animation: none; }
+}
+/* 1120–1400 且页面无目录（.ak-layout--no-toc）：两个入口都不需要，别留一条空栏 */
+@media (min-width: 1120px) and (max-width: 1400px) {
+  .ak-local-nav:not(:has(.ak-toc-cb)) { display: none; }
+  body:not(:has(.ak-toc-cb)) .ak-keyart { --_over: var(--ak-header-h); }   /* 二级栏收起了，页眉又是一行，头图只探一行 */
+}
+@media (max-width: 1119px) {
+  .ak-local-nav__menu { display: inline-flex; }   /* 侧栏变抽屉后才需要这个入口 */
+  .ak-layout { grid-template-columns: minmax(0, 1fr); padding-top: var(--ak-space-4); }
+  /* 抽屉收起时 visibility:hidden：一是不进无障碍树 / Tab 序，二是阴影不会从屏幕左缘漏进来（--ak-shadow-lg 的 32px 模糊比 translateX(-100%) 多出来的那截）。
+   * 展开时 JS 给 <html> 加 .ak-scroll-lock 锁住页面滚动（VitePress VPSidebar 同）：抽屉自己 overflow-y:auto + overscroll-behavior:contain（沿用导轨态声明），滚到头也不会把页面带着走 */
+  .ak-sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: min(86vw, 300px); max-height: none; z-index: var(--ak-z-modal); background: var(--ak-bg-surface); border-right: 1px solid var(--ak-border); padding: 0 var(--ak-space-3) var(--ak-space-6); box-sizing: border-box; transform: translateX(-100%); visibility: hidden; transition: transform var(--ak-dur-normal) var(--ak-ease), visibility 0s var(--ak-dur-normal); }
+  .ak-sidebar.is-open { transform: none; visibility: visible; box-shadow: var(--ak-shadow-lg); transition: transform var(--ak-dur-normal) var(--ak-ease), visibility 0s; }
+  /* 抽屉抬头：粘在顶部的一行 = 「导航」小标 + 关闭钮（.ak-btn--icon） */
+  .ak-sidebar__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; height: var(--ak-header-h); margin: 0 calc(-1 * var(--ak-space-3)) var(--ak-space-3); padding: 0 var(--ak-space-2) 0 var(--ak-space-4); background: var(--ak-bg-surface); border-bottom: 1px solid var(--ak-border); }
+  .ak-sidebar__title { font: 700 var(--ak-fs-overline)/1 var(--ak-font-label); letter-spacing: var(--ak-tracking-overline); text-transform: uppercase; color: var(--ak-fg-muted); }
+  .ak-sidebar__close { display: inline-flex; }
+  .ak-header__inner { display: flex; gap: var(--ak-space-4); }   /* 侧栏成了抽屉，页眉不再有列可对齐：回到 flex */
+  .ak-header__logo { margin-right: auto; }   /* 品牌靠左，其余（搜索 / ≡）靠右 */
+  .ak-header__search { flex: 1; width: auto; max-width: none; }
+  .ak-body { padding: var(--ak-space-5) var(--ak-space-5); }
+
+  /* 主行只留 品牌 / 搜索 / ≡：工具（外观 / 通知 / 用户）收进 ≡ 拉下的卡片 —— 贴主行右下沿、320px 宽、盖住二级栏；不锁页面滚动，卡片自己可滚 */
+  .ak-nav-cb { display: block; }
+  .ak-header__burger { display: inline-flex; }
+  .ak-header__screen { position: absolute; top: 100%; right: var(--ak-gutter); z-index: var(--ak-z-dropdown);
+    display: none; flex-direction: column; width: min(320px, calc(100vw - var(--ak-gutter) * 2)); max-height: calc(100dvh - var(--ak-header-h) - var(--ak-space-4)); overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box;
+    background: var(--ak-bg-surface); color: var(--ak-fg); border: 1px solid var(--ak-border); border-top-width: 3px; border-image: linear-gradient(var(--ak-accent) 3px, var(--ak-border) 3px) 3 1 1 1; box-shadow: var(--ak-shadow-lg); }
+  .ak-nav-cb:checked ~ .ak-header__screen { display: flex; animation: ak-nav-screen-in var(--ak-dur-normal) var(--ak-ease); }
+  /* 工具 → 「外观 / 通知 / 用户」三行（对应 Vite 面板下半的 Appearance 组） */
+  .ak-header__tools { flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: var(--ak-space-1) 0; }
+  .ak-header__tools > * { display: flex; align-items: center; justify-content: space-between; gap: var(--ak-space-3); min-height: 48px; padding: 0 var(--ak-space-4); }
+  .ak-header__tool-label { display: inline; font-size: var(--ak-fs-body); color: var(--ak-fg); }
+  .ak-header__tools .ak-btn--icon, .ak-header__tools .ak-header__user { width: auto; height: auto; justify-content: flex-start; border: 0; border-radius: 0; font-size: var(--ak-fs-body); font-weight: 400; color: var(--ak-fg); background: transparent; }
+  .ak-header__tools .ak-btn--icon:hover, .ak-header__tools .ak-header__user:hover { background: var(--ak-bg-hover); color: var(--ak-fg); }
+  .ak-header__tools .ak-badge { position: static; margin-left: auto; }
+  .ak-header__tools .ak-theme-toggle > button { width: 40px; height: 32px; }   /* 触屏加大点按面积 */
+  .ak-header__user .ak-avatar { --_s: 32px; }
+  /* MW 用户菜单（#p-personal = .ak-dropdown > details > summary.ak-header__user + ul.ak-menu）：面板里就地展开，不再浮出 */
+  .ak-header__tools > .ak-dropdown { display: block; min-height: 0; padding: 0; }
+  .ak-header__tools .ak-dropdown > details > summary.ak-header__user { display: flex; align-items: center; min-height: 48px; padding: 0 var(--ak-space-4); }
+  .ak-header__tools .ak-dropdown .ak-menu { position: static; min-width: 0; margin: 0 var(--ak-space-4) var(--ak-space-2); border: 0; border-top: 1px solid var(--ak-border); box-shadow: none; background: transparent; }
+  .ak-header__tools .ak-header__notifications ul { display: flex; flex-wrap: wrap; gap: var(--ak-space-2); margin: 0; padding: 0; list-style: none; }   /* Echo 徽标（#pt-notifications-*）并排 */
+}
+/* 紧跟上面的块：同选择器同特异性，reduced-motion 的 animation:none 必须排在 animation: ak-nav-screen-in 之后才能生效 */
+@media (max-width: 1119px) and (prefers-reduced-motion: reduce) { .ak-nav-cb:checked ~ .ak-header__screen { animation: none; } }
+@media (max-width: 639px) {
+  :root { --ak-gutter: var(--ak-gutter-sm); --ak-header-h: 52px; }
+  .ak-header__inner { gap: 8px; }
+  .ak-header__logo img { height: 24px; }
+  .ak-header__wordmark { font-size: 17px; }
+  .ak-header__wordmark small { display: none; }
+  .ak-header__search { display: none; }   /* 手机：搜索收成主行里的图标按钮（.ak-header__search-toggle），同样打开悬浮面板 */
+  .ak-page-header__title, .skin-arknights #firstHeading { font-size: var(--ak-fs-h2); }
+  .ak-page-heading { padding-left: var(--ak-space-3); }
+  .ak-body { padding: var(--ak-space-4) var(--ak-space-3); border-left: 0; border-right: 0; margin: 0 calc(-1 * var(--ak-gutter)); }
+  .ak-local-nav { padding: 0 calc(var(--ak-gutter) - 8px); }
+  .ak-local-nav__btn { padding: 0 8px; }
+  .ak-toc { left: var(--ak-gutter); width: auto; }   /* 手机上目录浮层拉满可用宽度（左右各留一个 gutter，VitePress 的 left/right:16px） */
+  /* 动作簇只留图标：文字进 sr-only（title / accesskey 不变），「更多」只剩 ⋯；标题很长时整簇换到标题下方、靠左 */
+  .ak-page-header__row { align-items: flex-start; }
+  .ak-page-tabs li a > span:not(.ak-icon), .ak-page-tools__btn > span:not(.ak-icon) { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+  .ak-page-tabs li a, .ak-page-tools__btn { padding: 0 7px; }
+  .ak-page-tools__card { max-width: calc(100vw - 2 * var(--ak-gutter)); }
+  .ak-footer__inner { grid-auto-flow: row; grid-template-columns: 1fr 1fr; grid-auto-columns: auto; gap: var(--ak-space-6); }   /* 链接列两两并排 */
+  .ak-footer__brand { grid-column: 1 / -1; }
+  .ak-footer__bottom { flex-direction: column; align-items: flex-start; }
+  .ak-footer__icons { margin-left: 0; }
+  .ak-footer .ak-watermark { font-size: 5rem; }
+  .ak-fab { right: var(--ak-space-3); bottom: var(--ak-space-3); }
+  .mw-parser-output table.wikitable { display: block; overflow-x: auto; max-width: 100%; }
+  .mw-halign-right, .tright, figure.mw-halign-right, .mw-halign-left, .tleft, figure.mw-halign-left { float: none; margin-left: 0; margin-right: 0; }
+}
+@media (min-width: 1680px) {
+  :root { --ak-sidebar-w: 268px; --ak-toc-w: 268px; }   /* 写在 :root：页眉网格与 .ak-layout 共用这两个宽度 */
+}
+/* 页面滚动锁（侧栏抽屉 / 目录浮层开着时；参考 VitePress useBodyScrollLock）：JS 给 <html> 加 .ak-scroll-lock。
+ * overflow:hidden 不改滚动位置（不像 body position:fixed 那套会跳回顶部）；有实体滚动条（Windows / 「总是显示滚动条」）时 JS 同时写 scrollbar-gutter:stable
+ * 占住滚动条位置，页面不会左右抖一下；浮层自己 overflow-y:auto 照常内滚。iOS 上 overflow:hidden 拦不住触摸滚动，由 JS 额外拦 touchmove。 */
+:root.ak-scroll-lock { overflow: hidden; }
+@media print {
+  .ak-header, .ak-keyart, .ak-sidebar, .ak-toc, .ak-local-nav, .ak-footer, .ak-page-tools, .ak-fab { display: none !important; }
+  .ak-layout { display: block; padding: 0; }
+  .ak-layout .ak-main { max-width: none; padding-right: 0; }   /* 导轨收起：主列铺满（同特指度压过 .ak-layout--no-toc .ak-main 的阅读列封顶） */
+  .ak-body { border: 0; padding: 0; }
+}