@mooncellwiki/prts-design-css 0.1.0

package/src/base/forms.css

@@ -0,0 +1,121 @@
+/*! PRTS Design · base/forms.css — Forms · 裸控件（Widget / Gadget / 模板直接吐出的 input / select / textarea）+ mw-ui / cdx 按钮 + 编辑器 · 依赖：tokens.css */
+/* ─── Forms · 裸控件（Widget / Gadget / 模板直接吐出、身上没有任何 class 的 <input> <select> <textarea>）
+   规范见文档站 /content/forms。这里只管「裸」控件：.ak-input 等设计系统组件在 components/form.css；
+   Codex / OOUI 靠 tokens.css 的令牌桥接 + 本段末尾几条颜色覆盖，尺寸不动（它们成组出现、内部自洽）。
+   · 整组选择器包在 :where() 里让特指度归零（与下面裸 <button> 的做法相同）：.ak-input / .cdx-text-input__input /
+     .oo-ui-inputWidget-input 以及模板自己的 class 都稳稳压在它上面，不必再和 input[type=…] 的 (0,1,1) 较劲。
+   · border-box + 上下 0 内边距 + min-height：<input> / <select> 的单行文字由浏览器在内容盒里垂直居中，高度因此是
+     确定的 36px（与 .ak-btn / .ak-input 同一档），不再随所在容器的 line-height（正文 1.7 / 表格 1.5）漂移。此前
+     content-box 下 min-height 34 + 上下 6px 内边距 + 边框 = 48px，落进 wikitable 就比表头行高出一截（干员页
+     「属性计算器」的样子）。
+   · 用排除法而不是白名单：不写 type 的 <input>（= text）、date / time / tel 等浏览器自绘外观的类型、以及未知 type
+     （浏览器按 text 渲染）都跟着走；勾选 / 滑杆 / 文件 / 颜色 / 按钮类另行处理。 */
+:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="button"], [type="submit"], [type="reset"], [type="image"], [type="hidden"]), select, textarea) {
+  box-sizing: border-box; max-width: 100%;
+  font: inherit; font-size: var(--ak-fs-sm); font-weight: 400; line-height: 1.5;
+  color: var(--ak-fg); background: var(--ak-bg-surface);
+  border: 1px solid var(--ak-border-strong); border-radius: var(--ak-radius-sm);
+  padding: 0 10px; min-height: 36px;
+  transition: border-color var(--ak-dur-fast), box-shadow var(--ak-dur-fast);
+}
+:where(textarea) { padding: 8px 10px; min-height: 72px; resize: vertical; }
+:where(select[multiple]) { padding: 4px 0; }
+:where(input[type="search"]) { -webkit-appearance: none; appearance: none; }   /* Safari 会给 search 强加圆角与内边距 */
+:where(input[type="number"]) { font-variant-numeric: tabular-nums; }        /* 数字位宽一致，改值时不跳动；原生 ▲▼ 步进器保留（Chrome 悬停 / 聚焦时才显示） */
+/* 状态：焦点 = 青边 + 3px 淡青环（文本类控件用 :focus，鼠标点进去也该亮）；只读 = 下沉底（inset）；禁用 = surface-3 + 禁用色 + 禁用光标；
+   校验失败 = 红边（:user-invalid 只在用户交互过之后才成立，不会一进页面满屏红；老浏览器只认 aria-invalid） */
+:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="button"], [type="submit"], [type="reset"], [type="image"]), select, textarea):focus { outline: 0; border-color: var(--ak-accent); box-shadow: var(--ak-shadow-accent); }
+:where(input, textarea)::placeholder { color: var(--ak-fg-subtle); opacity: 1; }
+:where(input, textarea)[readonly] { background: var(--ak-bg-inset); }   /* 只读 = 下沉底：计算器里「只显示不编辑」的结果格 */
+:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"]), select, textarea):disabled { background: var(--ak-bg-surface-3); color: var(--ak-fg-disabled); -webkit-text-fill-color: var(--ak-fg-disabled); opacity: 1; border-color: var(--ak-border); cursor: not-allowed; }
+:where(input, textarea, select):where(:user-invalid, [aria-invalid="true"]) { border-color: var(--ak-danger); }
+:where(input, textarea, select):where(:user-invalid, [aria-invalid="true"]):focus { box-shadow: 0 0 0 3px var(--ak-danger-bg); }
+/* 勾选 / 单选：自绘，裸控件与 .ak-check 同一张脸——18px 直角勾选框（选中 = 主色实底 + 对比色勾）、圆形单选（选中 = 主色实底 + 圆点）。
+   圆是「单选」的通用语义，是整套系统里唯一的圆（不做菱形、不做圆角方）；勾 / 点的尺寸按百分比写，改 width/height 就整体缩放（表头里的 16px 开关）。
+   accent-color 留着兜底：不认 appearance:none 的老 WebView 仍是主色的原生控件。与行内文字中线对齐（vertical-align: middle；在 .ak-check 的 flex 里由 align-items 对齐）。 */
+:where(input[type="checkbox"], input[type="radio"]) { appearance: none; -webkit-appearance: none; accent-color: var(--ak-accent); box-sizing: border-box; width: 18px; height: 18px; margin: 0; flex: none; display: inline-grid; place-items: center; vertical-align: middle;
+  border: 2px solid var(--ak-border-strong); background: var(--ak-bg-surface); cursor: pointer; transition: background var(--ak-dur-fast), border-color var(--ak-dur-fast); }
+:where(input[type="radio"]) { border-radius: 50%; }
+:where(input[type="checkbox"], input[type="radio"]):checked { background: var(--ak-accent); border-color: var(--ak-accent); }
+:where(input[type="checkbox"]):checked::before { content: ""; width: 56%; height: 32%; border: 0 solid var(--ak-accent-fg); border-width: 0 0 2px 2px; transform: translateY(-15%) rotate(-45deg); }
+:where(input[type="checkbox"]):indeterminate { background: var(--ak-accent); border-color: var(--ak-accent); }
+:where(input[type="checkbox"]):indeterminate::before { content: ""; width: 56%; height: 2px; background: var(--ak-accent-fg); }
+:where(input[type="radio"]):checked::before { content: ""; width: 44%; height: 44%; border-radius: 50%; background: var(--ak-accent-fg); }
+:where(input[type="checkbox"], input[type="radio"]):focus-visible { outline: 0; border-color: var(--ak-accent); box-shadow: var(--ak-shadow-accent); }
+:where(input[type="checkbox"], input[type="radio"]):disabled { background: var(--ak-bg-surface-3); border-color: var(--ak-border); cursor: not-allowed; }
+:where(input[type="checkbox"], input[type="radio"]):disabled:checked { background: var(--ak-fg-disabled); border-color: var(--ak-fg-disabled); }
+/* 下拉：去掉各浏览器长相不一的原生箭头，画同一枚 ▾（与 .ak-select / 下拉按钮的 ▾ 成套）；多选列表不画 */
+:where(select:not([multiple])) { appearance: none; -webkit-appearance: none; padding-right: 30px; background-image: var(--ak-select-arrow); background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
+:where(input[type="range"]) { accent-color: var(--ak-accent); vertical-align: middle; }
+label { cursor: pointer; }
+/* 注意：不要把 .oo-ui-buttonElement-button 加进来。该类同时出现在有框和无框的 OOUI 按钮上，
+   且常常与图标类（.oo-ui-icon-*，靠 background-image 画图标）落在同一元素上——例如 Echo 的
+   通知徽标 <a class="oo-ui-buttonElement-button … oo-ui-icon-bell">。这里的 background 简写会
+   把图标的 background-image 一并清成 none，徽标就变成一个空白方块。有框 OOUI 按钮由皮肤的
+   skinStyles/ooui/oojs-ui-core.less（.oo-ui-buttonElement-framed > .oo-ui-buttonElement-button）负责。 */
+/* 站点脚本 / gadget 经常直接吐裸 <button> 或 <input type=button|submit|reset>（样板选择器的
+   「加载」、edittools 的字符按钮…），身上没有 cdx-button / mw-ui-button / oo-ui-* 任何 class，
+   浏览器默认外观（Arial 13px + outset 边框 + #efefef 底）就这么露在页面上。这里兜个底。
+   整条选择器包在 :where() 里让特指度归零：任何带 class 的框架按钮（含皮肤自己的
+   .ak-tree__toggle / .ak-fab）都稳稳压在它上面。也正因如此不设 min-height —— 那会强行撑高
+   自带固定尺寸的按钮，而 min-height 是没法靠 class 的 height 覆盖掉的；36px（与裸输入框 / .ak-btn 同一档）
+   靠 20px 行高 + 上下 7px 内边距 + 边框凑出来，表格里由下面的紧凑规则收到 30。
+   ⚠ 这里的 padding: 7px 12px 会落到所有没自己写 padding 的 <button> 上：带 class 的定尺寸图标按钮
+   （width/height 定死 + place-items:center 那种）必须自己写 padding: 0，否则内容区被挤成几像素，
+   图标从内容区起点排、看起来偏右偏下（.ak-palette__action / __back / .ak-fab 都踩过）。 */
+:where(button, input[type="button"], input[type="submit"], input[type="reset"]) {
+  box-sizing: border-box; appearance: none; -webkit-appearance: none;
+  font-family: var(--ak-font-body); font-size: var(--ak-fs-sm); font-weight: 600; line-height: 20px;
+  color: var(--ak-fg); background: var(--ak-bg-surface);
+  border: 1px solid var(--ak-border-strong); border-radius: var(--ak-radius);
+  padding: 7px 12px; cursor: pointer;
+}
+:where(button, input[type="button"], input[type="submit"], input[type="reset"]):hover { background: var(--ak-bg-hover); border-color: var(--ak-fg-muted); }
+:where(button, input[type="button"], input[type="submit"], input[type="reset"]):disabled { color: var(--ak-fg-disabled); background: var(--ak-bg-surface-3); border-color: var(--ak-border); cursor: default; }
+/* 表格里的裸控件：紧凑档 30px（与 .ak-btn--sm / .ak-input--sm 同一档），字号跟表格；文字对齐跟随单元格——
+   text-align:center 的属性计算器里，输入的数字和下面的结果一样居中，td.num 右对齐的列里输入也右对齐。
+   不强制满宽：一格里常有「输入框 + 按钮」，要满宽自己写 width:100%（已是 border-box，不必再 calc(100% - padding)）。 */
+:where(.mw-body-content :is(td, th) input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="button"], [type="submit"], [type="reset"], [type="image"], [type="hidden"])) { min-height: 30px; padding: 0 8px; font-size: inherit; text-align: inherit; }
+:where(.mw-body-content :is(td, th) select) { min-height: 30px; padding: 0 26px 0 8px; font-size: inherit; }
+:where(.mw-body-content :is(td, th) select[multiple]) { padding: 4px 0; }
+:where(.mw-body-content :is(td, th) :is(button, input[type="button"], input[type="submit"], input[type="reset"])) { padding: 4px 10px; font-size: inherit; }
+/* iPhone：iOS Safari 对字号 <16px 的文本类控件聚焦时会把整页放大且不缩回（搜索面板同一处理），手机断点下提到 16px；
+   放在紧凑规则之后，表格里的 font-size: inherit 才不会把它压回去 */
+@supports (-webkit-touch-callout: none) {
+  @media (max-width: 639px) {
+    :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="button"], [type="submit"], [type="reset"], [type="image"], [type="hidden"]), select, textarea) { font-size: 16px; }
+  }
+}
+.mw-ui-button, .cdx-button {
+  font-family: var(--ak-font-body); font-weight: 600; font-size: var(--ak-fs-sm); border-radius: var(--ak-radius);
+  border: 1px solid var(--ak-border-strong); background: var(--ak-bg-surface); color: var(--ak-fg); padding: 6px 14px; min-height: 34px; cursor: pointer;
+}
+.mw-ui-button:hover, .cdx-button:hover { background: var(--ak-bg-hover); border-color: var(--ak-fg-muted); }
+/* core 的 .cdx-button:enabled（0,2,0）优先级高于上面的 .cdx-button（0,1,0），它取的是 Codex
+   token：--background-color-interactive-subtle → --ak-bg-surface-2，--border-color-base →
+   --ak-border。中性按钮于是和同为 --ak-bg-surface-2 的面板底色撞成同一个灰（历史页的
+   .mw-history-compareselectedversions 就是这样把「对比选择的版本」按钮吞掉的）。这里用同等
+   优先级把它拉回皮肤的按钮配色；quiet / primary 变体在 core 里的优先级更高，不受影响。 */
+.cdx-button:enabled, .cdx-button.cdx-button--fake-button--enabled {
+  background: var(--ak-bg-surface); color: var(--ak-fg); border-color: var(--ak-border-strong);
+}
+.cdx-button:enabled:hover, .cdx-button.cdx-button--fake-button--enabled:hover { background: var(--ak-bg-hover); border-color: var(--ak-fg-muted); }
+.mw-ui-button.mw-ui-progressive, .cdx-button--action-progressive.cdx-button--weight-primary { background: var(--ak-accent); color: var(--ak-accent-fg); border-color: var(--ak-accent); }
+.mw-ui-button.mw-ui-progressive:hover, .cdx-button--action-progressive.cdx-button--weight-primary:hover { background: var(--ak-accent-hover); border-color: var(--ak-accent-hover); }
+.mw-ui-button.mw-ui-destructive, .cdx-button--action-destructive.cdx-button--weight-primary { background: var(--ak-danger); color: #fff; border-color: var(--ak-danger); }
+.cdx-text-input__input, .oo-ui-textInputWidget input, .oo-ui-textInputWidget textarea { background: var(--ak-bg-surface); color: var(--ak-fg); border-color: var(--ak-border-strong); }
+.oo-ui-window-frame, .oo-ui-panelLayout-framed, .oo-ui-popupWidget-popup { background: var(--ak-bg-surface); color: var(--ak-fg); border-color: var(--ak-border); }
+.oo-ui-labelElement-label { color: inherit; }
+.oo-ui-fieldsetLayout-header .oo-ui-labelElement-label { color: var(--ak-fg); }
+.oo-ui-tabSelectWidget-framed { background: var(--ak-bg-surface-2); }
+.oo-ui-tabOptionWidget.oo-ui-optionWidget-selected { background: var(--ak-bg-surface); color: var(--ak-accent); }
+/* 只给编辑框上等宽，不要给整个 form：.mw-editform 里还有摘要输入框、版权声明、编辑工具条，
+   它们跟着变等宽后拉丁字母会和正文脱节。 */
+.mw-editform textarea, #wpTextbox1 { font-family: var(--ak-font-mono); }
+/* 查看源代码页（无编辑权时的 action=edit）的 textarea 不在 form.mw-editform 里，
+   核心也不给它宽度，会退回 cols=80 的窄框——按内容区拉满。 */
+#wpTextbox1 { box-sizing: border-box; width: 100%; }
+.mw-editTools, .editOptions { background: var(--ak-bg-surface-2); border: 1px solid var(--ak-border); padding: var(--ak-space-3) var(--ak-space-4); }
+.wikiEditor-ui, .wikiEditor-ui-toolbar { background: var(--ak-bg-surface); border-color: var(--ak-border) !important; }
+.wikiEditor-ui-toolbar .tabs span.tab a, .wikiEditor-ui-toolbar .group .label { color: var(--ak-fg-secondary); }
+.cm-editor { background: var(--ak-bg-inset); color: var(--ak-fg); }

package/src/base/index.css

@@ -0,0 +1,20 @@
+/*! ═══════════════════════════════════════════════════════════════════════════
+ *  PRTS Design · base/ — L1 MediaWiki 内容基础样式（原 base.css）
+ *  作用域：.mw-body-content / .mw-parser-output（wikitext 解析产物）以及 MW 常见 UI 结构
+ *  root.css 是 html / body 全局基底，放最前；其余按下列顺序。整层只属于 Arknights 皮肤（MW：skins.akds.base 模块），不进 standalone.css。
+ *  skin-assets.css（皮肤持有的素材接口）也在本目录，但由 src/index.css 直接引、不在这里：本层可以单独 import，素材不随 npm 包走。
+ *  依赖：tokens.css · scope.css
+ * ═══════════════════════════════════════════════════════════════════════════ */
+@import url("root.css");
+@import url("typography.css");
+@import url("tables.css");
+@import url("media.css");
+@import url("toc.css");
+@import url("collapsible.css");
+@import url("references.css");
+@import url("notices.css");
+@import url("catlinks.css");
+@import url("tabber.css");
+@import url("forms.css");
+@import url("special-pages.css");
+@import url("print.css");

package/src/base/media.css

@@ -0,0 +1,26 @@
+/*! PRTS Design · base/media.css — Figures / thumbs / galleries 缩略图与图库 · 依赖：tokens.css */
+/* ─── Figures / thumbs / galleries ─────────────────────────────────────── */
+figure[typeof~="mw:File/Thumb"], figure[typeof~="mw:File/Frame"], .thumb {
+  background: var(--ak-bg-surface); border: 1px solid var(--ak-border); padding: var(--ak-space-1);
+  margin: 0 0 var(--ak-space-4); font-size: var(--ak-fs-xs); color: var(--ak-fg-muted);
+}
+figure[typeof~="mw:File/Thumb"] > a > img, .thumbimage { display: block; max-width: 100%; height: auto; background: var(--ak-bg-inset); }
+figure[typeof~="mw:File/Thumb"] > figcaption, .thumbcaption { padding: var(--ak-space-2) var(--ak-space-2) var(--ak-space-1); border-top: 1px solid var(--ak-border-subtle); line-height: 1.5; }
+.mw-halign-right, .tright, figure.mw-halign-right { float: right; clear: right; margin: .25em 0 var(--ak-space-4) var(--ak-space-5); }
+.mw-halign-left, .tleft, figure.mw-halign-left { float: left; clear: left; margin: .25em var(--ak-space-5) var(--ak-space-4) 0; }
+.mw-halign-center, .center { text-align: center; }
+figure.mw-halign-center { margin-left: auto; margin-right: auto; }
+.magnify { display: none; }
+.mw-file-element { max-width: 100%; height: auto; }   /* 正文大图不撑破栏宽。只管 [[文件:]] 嵌入图（MW 新媒体 DOM 给 img 的类；文件描述页大图由核心 filepage 模块的 #file img 管），不写成全局 img：Widget / 模板里的图靠 height="30px" 这类属性定尺寸，height: auto 会把它们放回原图大小；百分比 max-width 又让图的最小宽度计 0，只装图标的表格列（语音记录的播放 / 下载格）会被 width: 100% 的兄弟列挤成 0 宽 */
+.mw-parser-output img.ak-pixel { image-rendering: pixelated; }
+/* gallery */
+ul.gallery { display: flex; flex-wrap: wrap; gap: var(--ak-space-3); margin: var(--ak-space-4) 0; padding: 0; }
+ul.gallery > li::before { display: none; }
+li.gallerybox { margin: 0 !important; width: auto !important; }
+li.gallerybox > div { width: auto !important; }
+li.gallerybox div.thumb { background: var(--ak-bg-surface); border: 1px solid var(--ak-border); margin: 0; padding: var(--ak-space-1); width: auto !important; }
+li.gallerybox div.thumb > div { margin: 0 !important; }
+li.gallerybox .gallerytext { font-size: var(--ak-fs-xs); color: var(--ak-fg-muted); padding: var(--ak-space-1) var(--ak-space-2); }
+li.gallerybox .gallerytext p { margin: 0; }
+.gallerycaption { font-weight: 700; margin-bottom: var(--ak-space-2); }
+ul.gallery.mw-gallery-packed li.gallerybox, ul.gallery.mw-gallery-packed-hover li.gallerybox { flex: 0 0 auto; }

package/src/base/notices.css

@@ -0,0 +1,17 @@
+/*! PRTS Design · base/notices.css — Hatnotes / message boxes / notices · 依赖：tokens.css */
+/* ─── Hatnotes / message boxes / notices ───────────────────────────────── */
+.hatnote, .dablink, .rellink { font-style: normal; color: var(--ak-fg-muted); font-size: var(--ak-fs-sm); padding: .3em 0 .3em 1em; border-left: 2px solid var(--ak-border-strong); margin: 0 0 var(--ak-space-3); }
+.mw-message-box, .cdx-message { --_c: var(--ak-border-strong);
+  border: 1px solid var(--ak-border); border-left-width: var(--ak-bar-w); border-image: linear-gradient(to right, var(--_c) 4px, var(--ak-border) 4px) 1 1 1 4; background: var(--ak-bg-surface);
+  color: var(--ak-fg); padding: var(--ak-space-3) var(--ak-space-4); margin: 0 0 var(--ak-space-4); font-size: var(--ak-fs-sm);
+}
+.mw-message-box-notice, .cdx-message--notice { --_c: var(--ak-info); background: var(--ak-info-bg); }
+.mw-message-box-warning, .cdx-message--warning { --_c: var(--ak-warning); background: var(--ak-warning-bg); }
+.mw-message-box-error, .cdx-message--error { --_c: var(--ak-danger); background: var(--ak-danger-bg); }
+.mw-message-box-success, .cdx-message--success { --_c: var(--ak-success); background: var(--ak-success-bg); }
+.mw-parser-output .messagebox, .mw-parser-output .ambox { --_c: var(--ak-fg-muted); border: 1px solid var(--ak-border); border-left-width: var(--ak-bar-w); border-image: linear-gradient(to right, var(--_c) 4px, var(--ak-border) 4px) 1 1 1 4; background: var(--ak-bg-surface-2); margin: 0 0 var(--ak-space-3); font-size: var(--ak-fs-sm); }
+.ambox td, .messagebox td { padding: .5em .8em; }
+.ambox-notice { --_c: var(--ak-info); }
+.ambox-content { --_c: var(--ak-warning); }
+.ambox-delete, .ambox-serious { --_c: var(--ak-danger); }
+.ambox-style { --_c: var(--ak-yellow-600); }

package/src/base/print.css

@@ -0,0 +1,11 @@
+/*! PRTS Design · base/print.css — Print 打印 · 依赖：tokens.css */
+/* Print */
+@media print {
+  body { background: #fff; color: #000; }
+  html body.skin-arknights { color: #000; }   /* scope.css 的前景色挂在 body.skin-arknights（0,1,1）上、且在 base/ 之后加载，要高一档才压得住 */
+  html .ak-scope { color: #000; }        /* 页面里包了 <AkScope> 的 widget 同理：.ak-scope 自带前景色（0,1,0），暗色页打印出来不能是浅字 */
+  html .ak-scope[data-theme] { background: #fff; }   /* 局部主题的画布底色不上纸 */
+  .mw-editsection, .noprint, .catlinks, .mw-indicators, .toc { display: none !important; }
+  a { color: inherit; text-decoration: underline; }
+  .wikitable > * > tr > th { background: #eee; }
+}

package/src/base/references.css

@@ -0,0 +1,9 @@
+/*! PRTS Design · base/references.css — References / citations 参考文献 · 依赖：tokens.css */
+/* ─── References / citations ───────────────────────────────────────────── */
+sup.reference { font-size: .75em; }
+sup.reference a { padding: 0 .1em; }
+.mw-cite-backlink, .reference-text { font-size: var(--ak-fs-sm); }
+.references, ol.references { font-size: var(--ak-fs-sm); color: var(--ak-fg-secondary); column-gap: var(--ak-space-8); }
+.reflist.ak-cols-2 .references { column-count: 2; }
+.references li:target, sup.reference:target { background: var(--ak-accent-subtle); outline: 1px solid var(--ak-accent-muted); }
+.mw-references-wrap { margin: var(--ak-space-4) 0; }

package/src/base/root.css

@@ -0,0 +1,16 @@
+/*! ═══════════════════════════════════════════════════════════════════════════
+ *  PRTS Design · base/root.css — 皮肤全局基底：html / body 的底色、选区、焦点环、滚动条、减弱动效
+ *  base/ 的第一个文件（MW：skins.akds.base 模块，只有 Arknights 皮肤加载）。原在 tokens.css 末尾「Global base」段，令牌改为生成后搬到这里。
+ *  正文字体 / 字号 / 行高 / 前景色不在这里：挂在 scope.css 的 body.skin-arknights / .ak-scope 上，组件不靠宿主的 body 继承。
+ *  依赖：tokens.css · scope.css
+ * ═══════════════════════════════════════════════════════════════════════════ */
+html { background: var(--ak-bg-canvas); }
+body { background: var(--ak-bg-canvas); }
+::selection { background: var(--ak-selection); }
+:focus-visible { outline: 2px solid var(--ak-focus); outline-offset: 2px; }
+* { scrollbar-color: var(--ak-scrollbar) transparent; scrollbar-width: thin; }
+*::-webkit-scrollbar { width: 8px; height: 8px; }
+*::-webkit-scrollbar-thumb { background: var(--ak-scrollbar); }
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
+}

package/src/base/special-pages.css

@@ -0,0 +1,43 @@
+/*! PRTS Design · base/special-pages.css — Diff / history / recent changes / search / Echo / Minerva · 依赖：tokens.css */
+/* ─── Diff / history / recent changes / search ─────────────────────────── */
+table.diff { font-size: var(--ak-fs-sm); }
+table.diff td { padding: .3em .5em; }
+.diff-context { background: var(--ak-bg-surface-2); color: var(--ak-fg-secondary); }
+.diff-addedline { border-left: 3px solid var(--ak-success); }
+.diff-deletedline { border-left: 3px solid var(--ak-danger); }
+.diff-addedline .diffchange { background: var(--ak-success-bg); color: var(--ak-fg); }
+.diff-deletedline .diffchange { background: var(--ak-danger-bg); color: var(--ak-fg); }
+.diff-lineno { color: var(--ak-fg-muted); font-variant-numeric: tabular-nums; }
+.mw-changeslist, #pagehistory { font-size: var(--ak-fs-sm); }
+#pagehistory li, .mw-changeslist li { padding: .3em .5em; border-left: 3px solid transparent; }
+#pagehistory li.selected { background: var(--ak-accent-subtle); border-left-color: var(--ak-accent); }
+.mw-changeslist .mw-plusminus-pos { color: var(--ak-success); font-variant-numeric: tabular-nums; }
+.mw-changeslist .mw-plusminus-neg { color: var(--ak-danger); font-variant-numeric: tabular-nums; }
+.mw-changeslist .mw-plusminus-null { color: var(--ak-fg-muted); font-variant-numeric: tabular-nums; }
+.mw-changeslist-line-inner .comment, .history-user, .mw-usertoollinks { color: var(--ak-fg-secondary); }
+.mw-search-results { list-style: none; padding: 0; }
+.mw-search-result { padding: var(--ak-space-3) 0; border-bottom: 1px solid var(--ak-border-subtle); }
+.mw-search-result-heading { font-weight: 700; font-size: var(--ak-fs-body-lg); }
+.searchmatch { font-weight: 700; color: var(--ak-accent); }
+.searchresult { color: var(--ak-fg-secondary); font-size: var(--ak-fs-sm); }
+.mw-search-result-data { color: var(--ak-fg-muted); font-size: var(--ak-fs-xs); }
+.mw-search-profile-tabs { background: var(--ak-bg-surface-2); border: 1px solid var(--ak-border); }
+.mw-search-profile-tabs .search-types ul li.current a { color: var(--ak-accent); border-bottom: 2px solid var(--ak-accent); }
+.mw-notification-area { z-index: var(--ak-z-toast); }
+.mw-notification { --_c: var(--ak-accent); background: var(--ak-bg-surface); border: 1px solid var(--ak-border); border-left-width: var(--ak-bar-w); border-image: linear-gradient(to right, var(--_c) 4px, var(--ak-border) 4px) 1 1 1 4; box-shadow: var(--ak-shadow-lg); color: var(--ak-fg); border-radius: 0; }
+.mw-notification-type-error { --_c: var(--ak-danger); }
+.mw-notification-type-warn { --_c: var(--ak-warning); }
+.mw-notification-type-success { border-left-color: var(--ak-success); }
+.usermessage { background: var(--ak-warning-bg); border: 1px solid var(--ak-warning); padding: var(--ak-space-3); }
+.mw-special-Specialpages .mw-specialpagegroup { border-bottom: 1px solid var(--ak-border); }
+.error, .errorbox { color: var(--ak-danger); }
+.warningbox { color: var(--ak-warning); }
+.successbox { color: var(--ak-success); }
+.mw-body-content .mw-tag-markers, .mw-tag-marker { background: var(--ak-bg-surface-2); border: 1px solid var(--ak-border); font-size: var(--ak-fs-xs); padding: 0 6px; }
+.mw-body-content .mw-tag-marker-mobile-edit { border-color: var(--ak-accent-muted); }
+/* Echo */
+.mw-echo-ui-notificationItemWidget { background: var(--ak-bg-surface); border-color: var(--ak-border); color: var(--ak-fg); }
+.mw-echo-ui-notificationItemWidget-unread { background: var(--ak-accent-subtle); }
+.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-popup { background: var(--ak-bg-surface); }
+/* MobileFrontend/Minerva overrides when PRTS Design tokens are loaded */
+.minerva-header, .header-container { background: var(--ak-bg-surface); border-color: var(--ak-border); }

package/src/base/tabber.css

@@ -0,0 +1,31 @@
+/*! PRTS Design · base/tabber.css — TabberNeue（ext.tabberNeue） · 依赖：tokens.css */
+/* ─── TabberNeue (ext.tabberNeue) ──────────────────────────────────────── */
+.tabber { margin: var(--ak-space-4) 0; }
+.tabber__header { box-shadow: none; border-bottom: 1px solid var(--ak-border); position: relative; background: transparent; }
+.tabber__header::after { display: none; }
+.tabber__tabs { display: flex; gap: var(--ak-space-1); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
+.tabber__tabs::-webkit-scrollbar { display: none; }
+.tabber__tab {
+  flex: none; white-space: nowrap;
+  font-family: var(--ak-font-body); font-weight: 600; font-size: var(--ak-fs-sm); color: var(--ak-fg-muted);
+  padding: var(--ak-space-2) var(--ak-space-4); border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px;
+  text-decoration: none; transition: color var(--ak-dur-fast), border-color var(--ak-dur-fast), background var(--ak-dur-fast);
+  position: relative;
+}
+.tabber__tab:hover { color: var(--ak-fg); background: var(--ak-bg-hover); text-decoration: none; }
+.tabber__tab[aria-selected="true"] { color: var(--ak-accent); border-bottom-color: var(--ak-accent); }
+.tabber__tab[aria-selected="true"]::before {   /* 游戏内选中角标 */
+  content: ""; position: absolute; left: 0; top: 0; border-style: solid; border-width: 6px 6px 0 0; border-color: var(--ak-accent) transparent transparent transparent;
+}
+.tabber__indicator { display: none; }
+.tabber__section { padding-top: var(--ak-space-4); }
+.tabber__panel:focus-visible { outline: none; }
+.tabber__header__prev, .tabber__header__next { background: var(--ak-bg-surface); }
+/* 皮肤内变体：卡片式 */
+.tabber.ak-tabber-boxed .tabber__header { background: var(--ak-bg-surface-2); border: 1px solid var(--ak-border); border-bottom: 0; }
+.tabber.ak-tabber-boxed .tabber__section { border: 1px solid var(--ak-border); padding: var(--ak-space-4); background: var(--ak-bg-surface); }
+/* 游戏内黑白反转的块状标签页变体（原「斜切标签页」，去掉了平行四边形——系统里不再有斜边） */
+.tabber.ak-tabber-block .tabber__header { border-bottom: 2px solid var(--ak-fg); }
+.tabber.ak-tabber-block .tabber__tab { background: var(--ak-bg-surface-2); color: var(--ak-fg-secondary); border: 0; margin: 0 2px 0 0; padding: 6px 16px; }
+.tabber.ak-tabber-block .tabber__tab[aria-selected="true"] { background: var(--ak-fg); color: var(--ak-bg-canvas); border: 0; }
+.tabber.ak-tabber-block .tabber__tab[aria-selected="true"]::before { display: none; }

package/src/base/tables.css

@@ -0,0 +1,45 @@
+/*! PRTS Design · base/tables.css — Tables · wikitable / 数据表 · 依赖：tokens.css */
+/* ─── Tables ────────────────────────────────────────────────────────────── */
+.mw-parser-output table { border-collapse: collapse; border-spacing: 0; }
+/* border-collapse 要写在 .wikitable 自己身上，不能只靠上面那条：MediaWiki 有一批核心 PHP 生成的
+ * .wikitable 不在 .mw-parser-output 里（Special:Version 的软件 / 接入点 / 扩展 / 库表最典型），
+ * 那里 border-collapse 退回 separate + border-spacing 2px，每个单元格四边的 1px 变成一个个独立
+ * 的小框、彼此还留 2px 缝，再叠上表格自身的外框——就是「一堆线框套外框」的样子。 */
+.wikitable {
+  margin: var(--ak-space-4) 0; background: var(--ak-bg-surface); color: var(--ak-fg);
+  border: 1px solid var(--ak-border); font-size: var(--ak-fs-sm); line-height: 1.5;
+  border-collapse: collapse; border-spacing: 0;
+}
+.wikitable > * > tr > th, .wikitable > * > tr > td { border: 1px solid var(--ak-border); padding: .45em .7em; vertical-align: middle; }
+.wikitable > * > tr > th { background: var(--ak-bg-surface-2); font-weight: 700; text-align: center; color: var(--ak-fg); }
+/* 表头行的加粗底线只给「整行都是 th、且下一行是数据行」的那一行（多行表头只压最后一行）——PRTS 大量表格把 th 竖着当行头用（属性表 / 信息表），
+ * 早先给所有 th 一律 2px 底线，行头列每一格下面都多出一道，与右侧 td 的 1px 线对不齐、显得冗余。不支持 :has() 的浏览器退化为一律 1px，只靠底色区分。 */
+.wikitable > thead > tr:last-child:not(:has(td)) > th,
+.wikitable > tbody > tr:not(:has(td)):has(+ tr > td) > th { border-bottom: 2px solid var(--ak-border-strong); }
+.wikitable > thead > tr > th, .wikitable > tbody > tr:first-child > th { position: relative; }
+.wikitable caption { caption-side: top; text-align: left; font-weight: 700; padding: .4em 0; color: var(--ak-fg-secondary); font-size: var(--ak-fs-sm); }
+.wikitable > tbody > tr:hover > td { background: var(--ak-bg-hover); }
+.wikitable.ak-striped > tbody > tr:nth-child(even) > td { background: var(--ak-bg-surface-2); }
+.wikitable.ak-compact > * > tr > th, .wikitable.ak-compact > * > tr > td { padding: .25em .5em; }
+.wikitable.ak-dense { font-size: var(--ak-fs-xs); }
+.wikitable.ak-borderless, .wikitable.ak-borderless > * > tr > th, .wikitable.ak-borderless > * > tr > td { border-left: 0; border-right: 0; }
+.wikitable.ak-borderless { border-left: 0; border-right: 0; }
+.wikitable th.ak-th-accent { box-shadow: inset 0 3px 0 var(--ak-accent); }   /* 表头顶部色条画在格子内（collapse 表格里 border-image 无效，而 3px 的 border-top 会和 1px 的竖线斜接） */
+/* 数字列：正文字体（Noto Sans SC 数字默认等宽，天然对齐；Bender 数字是比例宽度、子集无 tnum，小字号又细）。硬规则：表格数据数字一律不用 Bender——.ak-num 等 HUD 数字类掉进 td / th / 键值表 dd 由 arknights/table-numerals.css（B99）兜底回正文字体 */
+.wikitable td.num, .wikitable .num { font-variant-numeric: tabular-nums; text-align: right; }
+.wikitable .ak-num { text-align: right; }
+/* sortable (jquery.tablesorter) */
+.jquery-tablesorter th.headerSort { cursor: pointer; padding-right: 1.6em; background-image: none; }
+.jquery-tablesorter th.headerSort::after { content: "⇅"; position: absolute; right: .5em; color: var(--ak-fg-subtle); font-size: .85em; }
+.jquery-tablesorter th.headerSortUp::after { content: "↑"; color: var(--ak-accent); }
+.jquery-tablesorter th.headerSortDown::after { content: "↓"; color: var(--ak-accent); }
+/* responsive wrapper: <div class="ak-table-scroll">…</div> */
+.ak-table-scroll { overflow-x: auto; max-width: 100%; margin: var(--ak-space-4) 0; -webkit-overflow-scrolling: touch; }
+.ak-table-scroll > .wikitable { margin: 0; }
+/* sticky header */
+.wikitable.ak-sticky-head > * > tr:first-child > th { position: sticky; top: var(--ak-header-h); z-index: 1; }
+/* Cargo / mw-datatable */
+.cargoTable, table.mw-datatable { border: 1px solid var(--ak-border); font-size: var(--ak-fs-sm); border-collapse: collapse; border-spacing: 0; }   /* 同上：mw-datatable 几乎只出现在特殊页面，即 .mw-parser-output 之外 */
+.cargoTable th, table.mw-datatable th { background: var(--ak-bg-surface-2); border: 1px solid var(--ak-border); padding: .4em .6em; }
+.cargoTable td, table.mw-datatable td { border: 1px solid var(--ak-border); padding: .4em .6em; }
+table.mw-datatable tr:hover td { background: var(--ak-bg-hover); }

package/src/base/toc.css

@@ -0,0 +1,19 @@
+/*! PRTS Design · base/toc.css — TOC（正文内联目录，legacy） · 依赖：tokens.css */
+/* ─── TOC (inline, legacy) ─────────────────────────────────────────────── */
+.toc, .mw-parser-output .toc, #toc {
+  display: inline-block; 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;
+  padding: var(--ak-space-3) var(--ak-space-4); margin: 0 0 var(--ak-space-4);
+  font-size: var(--ak-fs-sm); min-width: 240px;
+}
+.toc .toctitle { display: flex; align-items: center; gap: var(--ak-space-3); }
+.toc .toctitle h2 { font-size: var(--ak-fs-sm); border: 0; padding: 0; margin: 0; letter-spacing: var(--ak-tracking-caps); text-transform: uppercase; }
+.toc .toctitle h2::after { display: none; }
+.toc ul { list-style: none; margin: var(--ak-space-2) 0 0; padding: 0; }
+.toc ul ul { margin: 0 0 0 1em; }
+.toc li { margin: .15em 0; }
+.toc li::before { display: none !important; }
+.tocnumber { color: var(--ak-fg-muted); margin-right: .4em; font-variant-numeric: tabular-nums; }
+.toctogglecheckbox:checked ~ ul { display: none; }
+.toctogglespan { font-size: var(--ak-fs-xs); }
+.toctogglelabel { color: var(--ak-link); cursor: pointer; }

package/src/base/typography.css

@@ -0,0 +1,133 @@
+/*! PRTS Design · base/typography.css — Typography 正文排版（prose / not-prose 作用域、标题色条、链接、列表、行内、引用、代码） · 依赖：tokens.css */
+/* ─── Typography ────────────────────────────────────────────────────────── */
+/* prose / not-prose（同 Tailwind Typography）：
+ *  wikitext 解析产物（.mw-parser-output）天然是「正文」，下面这些排版规则——标题色条、段距、列表菱形符、dl / blockquote、链接色（含 :visited 褪色）、外链图标——
+ *  默认作用于整篇；每条都带 :not(:where(.ak-not-prose, .ak-not-prose *))（特指度 0，不改原规则的权重），
+ *  模板 / 组件把 `ak-not-prose` 标在输出的最外层，子树内就完全不受正文排版影响：链接退回 color: inherit、无下划线，颜色 / 悬停由组件自己定
+ *  （否则 a.ak-op-card / a.ak-stage 这类「整块是链接」的组件写 color（0,1,0）永远打不过全局 a:visited（0,1,1），页眉 / 搜索面板 / 分页都曾各自补丁）。
+ *  标在最外层，不要只标在 <a> 上；需要「看起来像正文链接」的地方，组件自己引用 --ak-link / --ak-link-hover。 */
+.mw-body-content { font-size: var(--ak-fs-body); line-height: var(--ak-lh-body); color: var(--ak-fg); }
+.mw-parser-output p:not(:where(.ak-not-prose, .ak-not-prose *)) { margin: 0 0 var(--ak-space-4); }
+.mw-parser-output p:last-child:not(:where(.ak-not-prose, .ak-not-prose *)) { margin-bottom: 0; }
+strong, b { font-weight: 700; }
+small, .ak-text-sm { font-size: var(--ak-fs-sm); }
+.ak-text-xs { font-size: var(--ak-fs-xs); }
+.ak-muted { color: var(--ak-fg-muted); }
+
+/* Headings — 方舟式：左侧色条 + 细底线；h1 页面标题由 chrome/page-header.css 处理 */
+:where(.mw-body-content) :is(h1, h2, h3, h4, h5, h6):not(:where(.ak-not-prose, .ak-not-prose *)) {
+  font-family: var(--ak-font-body);
+  font-weight: 700;
+  line-height: var(--ak-lh-tight);
+  color: var(--ak-fg);
+  margin: 1.6em 0 0.6em;
+  scroll-margin-top: calc(var(--ak-header-h) + 16px);
+  border: 0;
+}
+:where(.mw-body-content) h2:not(:where(.ak-not-prose, .ak-not-prose *)) {
+  font-size: var(--ak-fs-h2);
+  padding: 0 0 var(--ak-space-2) var(--ak-space-3);
+  border-left: var(--ak-bar-w) solid var(--ak-accent);
+  border-bottom: 1px solid var(--ak-border);
+  position: relative;
+}
+:where(.mw-body-content) h2:not(:where(.ak-not-prose, .ak-not-prose *))::after {  /* 官网标题下的短横条 */
+  content: ""; position: absolute; left: calc(-1 * var(--ak-bar-w)); bottom: -1px; height: 2px; width: 96px;
+  background: var(--ak-accent);
+}
+:where(.mw-body-content) h3:not(:where(.ak-not-prose, .ak-not-prose *)) { font-size: var(--ak-fs-h3); padding-left: var(--ak-space-3); border-left: 3px solid var(--ak-border-strong); }
+:where(.mw-body-content) h4:not(:where(.ak-not-prose, .ak-not-prose *)) { font-size: var(--ak-fs-h4); }
+:where(.mw-body-content) h5:not(:where(.ak-not-prose, .ak-not-prose *)) { font-size: var(--ak-fs-body); color: var(--ak-fg-secondary); }
+:where(.mw-body-content) h6:not(:where(.ak-not-prose, .ak-not-prose *)) { font-size: var(--ak-fs-sm); color: var(--ak-fg-muted); text-transform: uppercase; letter-spacing: var(--ak-tracking-caps); }
+.mw-heading { display: flex; align-items: baseline; gap: var(--ak-space-2); flex-wrap: wrap; }
+.mw-heading > h2, .mw-heading > h3, .mw-heading > h4 { flex: 1 1 auto; margin: 0; }
+.mw-heading { margin: 1.6em 0 0.6em; }
+.mw-heading2 { border-bottom: 1px solid var(--ak-border); }
+.mw-heading2 > h2 { border-bottom: 0; }
+
+/* Edit section links */
+.mw-editsection { font-size: var(--ak-fs-xs); font-weight: 400; font-family: var(--ak-font-body); margin-left: auto; white-space: nowrap; }
+.mw-editsection-bracket { color: var(--ak-fg-subtle); }
+.mw-editsection a { color: var(--ak-fg-muted); text-decoration: none; padding: 2px 4px; }
+/* 多条链接（VisualEditor 会经 SkinEditSectionLinks 再加一条「编辑源代码」）之间补分隔符。
+   皮肤的 SectionLinks 模板没法在 Mustache 里判断「非第一项」，所以由 CSS 兄弟选择器来画。 */
+.mw-editsection a + a::before { content: "|"; color: var(--ak-fg-subtle); margin-right: 4px; }
+.mw-editsection a:hover { color: var(--ak-accent); background: var(--ak-accent-subtle); }
+/* 悬停标题才显形。要求页面走新版标题 DOM（<div class=mw-heading><h2>…</h2><span
+   class=mw-editsection>…</span></div>）：站点须设 $wgParserEnableLegacyHeadingDOM = false，
+   否则解析器仍吐 <h2><span class=mw-headline>…</span><span class=mw-editsection>…</span></h2>，
+   .mw-heading 根本不存在，这条和上面的 margin-left:auto 一起全是死规则。 */
+.mw-heading:not(:hover) .mw-editsection { opacity: .5; }
+.mw-editsection { transition: opacity var(--ak-dur-fast) var(--ak-ease); }
+/* 触屏没有 hover，:not(:hover) 会一直命中——这里得用同等特指度才压得住（原来只写
+   `.mw-heading .mw-editsection`，0,2,0 输给 0,3,0，编辑链接在触屏上一直是半透明的）。 */
+@media (hover: none) { .mw-heading:not(:hover) .mw-editsection { opacity: 1; } }
+
+/* Links */
+a:not(:where(.ak-not-prose, .ak-not-prose *)) { color: var(--ak-link); text-decoration: none; transition: color var(--ak-dur-fast) var(--ak-ease); }
+a:hover:not(:where(.ak-not-prose, .ak-not-prose *)) { color: var(--ak-link-hover); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
+/* 已访问：同一个链接色褪一层（tokens.css --ak-link-visited，亮色往灰褪 / 暗色往画布褪），不换色相——整套只有青、不出现紫；
+ * 悬停时回到完整的 --ak-link-hover（等于「透明度收回来、再深一点」）。注意 :visited 里写 alpha 无效（浏览器为防历史嗅探只取 RGB），褪色必须是实色。 */
+a:visited:not(:where(.ak-not-prose, .ak-not-prose *)) { color: var(--ak-link-visited); }
+a:visited:hover:not(:where(.ak-not-prose, .ak-not-prose *)) { color: var(--ak-link-hover); }
+a.new:not(:where(.ak-not-prose, .ak-not-prose *)), a.new:visited:not(:where(.ak-not-prose, .ak-not-prose *)) { color: var(--ak-link-new); }
+a.mw-selflink:not(:where(.ak-not-prose, .ak-not-prose *)) { color: inherit; font-weight: 700; }
+/* not-prose 基线：链接继承颜色、不画下划线（同 Tailwind preflight 的 a { color: inherit }）；组件类（0,1,0）即可覆盖。
+ * 只写 `a`（0,0,1），不要再列 a:hover / a:visited——`:where(.ak-not-prose) a:visited` 是 (0,1,1)，反过来压住组件类：首页「中坚甄选」格 .mp-ops__cta 的白字一旦已访问就变成 inherit 的黑。
+ * 皮肤不加载 mediawiki.skinning，全局 a:visited 只有上面那条（带 :not(not-prose)），这里没有要压的 */
+:where(.ak-not-prose) a { color: inherit; text-decoration: none; }
+a.external:not(:where(.ak-not-prose, .ak-not-prose *)) { color: var(--ak-link-external); }
+.mw-parser-output a.external:not(:where(.ak-not-prose, .ak-not-prose *)) { background: none; padding-right: 0; }
+.mw-parser-output a.external:not(:where(.ak-not-prose, .ak-not-prose *))::after {
+  content: ""; display: inline-block; width: .8em; height: .8em; margin-left: .2em; vertical-align: -0.05em;
+  background: currentColor;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1h5v5L9 4 5 8 4 7l4-4zM1 3h3v1H2v6h6V8h1v3H1z'/%3E%3C/svg%3E") center/contain no-repeat;
+          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1h5v5L9 4 5 8 4 7l4-4zM1 3h3v1H2v6h6V8h1v3H1z'/%3E%3C/svg%3E") center/contain no-repeat;
+}
+.mw-parser-output a.external.text:not(:where(.ak-not-prose, .ak-not-prose *))::after, .mw-parser-output a.external.autonumber:not(:where(.ak-not-prose, .ak-not-prose *))::after { display: inline-block; }
+.plainlinks a.external::after { display: none !important; }
+
+/* Lists */
+.mw-parser-output ul:not(:where(.ak-not-prose, .ak-not-prose *)) { list-style: none; margin: 0 0 var(--ak-space-4) 0; padding-left: 1.4em; }
+.mw-parser-output ul > li:not(:where(.ak-not-prose, .ak-not-prose *)) { position: relative; margin: .25em 0; }
+.mw-parser-output ul > li:not(:where(.ak-not-prose, .ak-not-prose *))::before {   /* 菱形项目符号（正方形转 45°，致敬源石）——与加载菱形涟漪、时间线菱形节点同一母题 */
+  content: ""; position: absolute; left: -1.05em; top: .72em; width: 5px; height: 5px;
+  background: var(--ak-accent); transform: rotate(45deg);
+}
+.mw-parser-output ul ul > li:not(:where(.ak-not-prose, .ak-not-prose *))::before { background: var(--ak-fg-subtle); }
+.mw-parser-output ol:not(:where(.ak-not-prose, .ak-not-prose *)) { margin: 0 0 var(--ak-space-4); padding-left: 1.8em; }
+.mw-parser-output ol > li:not(:where(.ak-not-prose, .ak-not-prose *)) { margin: .25em 0; padding-left: .2em; }
+.mw-parser-output ol > li:not(:where(.ak-not-prose, .ak-not-prose *))::marker { font-family: var(--ak-font-label); font-weight: 700; color: var(--ak-accent); }
+.mw-parser-output dl:not(:where(.ak-not-prose, .ak-not-prose *)) { margin: 0 0 var(--ak-space-4); }
+.mw-parser-output dt:not(:where(.ak-not-prose, .ak-not-prose *)) { font-weight: 700; margin-top: var(--ak-space-2); }
+.mw-parser-output dd:not(:where(.ak-not-prose, .ak-not-prose *)) { margin: .2em 0 .5em 1.6em; }
+.mw-parser-output li > ul:not(:where(.ak-not-prose, .ak-not-prose *)), .mw-parser-output li > ol:not(:where(.ak-not-prose, .ak-not-prose *)) { margin-bottom: 0; }
+
+/* Emphasis / misc inline */
+hr { border: 0; height: 1px; background: var(--ak-border); margin: var(--ak-space-8) 0; }
+.mw-parser-output hr.ak-hr-accent { height: 2px; background: linear-gradient(90deg, var(--ak-accent) 0 96px, var(--ak-border) 96px); }
+abbr[title] { text-decoration: underline dotted; text-underline-offset: 2px; cursor: help; }
+mark { background: var(--ak-mark-bg); color: inherit; padding: 0 .15em; }   /* 淡青底（tokens.css --ak-mark-bg 有取舍说明）：与 :target 引用 / tr.is-hl / 面板当前项同一套高亮语言，不是荧光笔黄 */
+kbd { font-family: var(--ak-font-mono); font-size: .85em; padding: .1em .4em; border: 1px solid var(--ak-border-strong); border-bottom-width: 2px; background: var(--ak-bg-surface-2); }
+sup, sub { line-height: 0; }
+
+/* Blockquote / poem */
+.mw-parser-output blockquote:not(:where(.ak-not-prose, .ak-not-prose *)) {
+  margin: var(--ak-space-4) 0; padding: var(--ak-space-3) var(--ak-space-5);
+  border-left: var(--ak-bar-w) solid var(--ak-accent);
+  background: var(--ak-bg-surface-2); color: var(--ak-fg-secondary);
+}
+.mw-parser-output blockquote p:last-child:not(:where(.ak-not-prose, .ak-not-prose *)) { margin-bottom: 0; }
+.mw-parser-output .poem:not(:where(.ak-not-prose, .ak-not-prose *)) { padding-left: var(--ak-space-4); border-left: 1px solid var(--ak-border); }
+
+/* Code */
+code, .mw-code, pre, tt { font-family: var(--ak-font-mono); font-size: .9em; }
+:not(pre) > code { background: var(--ak-bg-surface-2); border: 1px solid var(--ak-border); padding: .1em .35em; color: var(--ak-fg); }
+pre, .mw-code, .mw-highlight pre {
+  background: var(--ak-bg-inset); border: 1px solid var(--ak-border); border-left-width: 3px;
+  border-image: linear-gradient(to right, var(--ak-accent) 3px, var(--ak-border) 3px) 1 1 1 3;   /* 色条与细框直角拼接，不让 border 斜接出斜边（tokens.css §Shape） */
+  padding: var(--ak-space-3) var(--ak-space-4); overflow-x: auto; line-height: 1.55; color: var(--ak-fg);
+  margin: 0 0 var(--ak-space-4);
+}
+.mw-highlight { margin: 0 0 var(--ak-space-4); }
+.mw-highlight .linenos { color: var(--ak-fg-subtle); user-select: none; padding-right: 1em; border-right: 1px solid var(--ak-border); }