@mooncellwiki/prts-design-css 0.1.0

package/src/components/heading.css

@@ -0,0 +1,11 @@
+/*! PRTS Design · components/heading.css — Section heading 区块标题 · 依赖：tokens.css */
+/* ═══ Section heading (通用标题组件；用于模板/首页) ═══ */
+.ak-heading { display: flex; align-items: flex-end; gap: var(--ak-space-4); margin: var(--ak-space-8) 0 var(--ak-space-4); padding-left: var(--ak-space-4); border-left: var(--ak-bar-w-lg) solid var(--ak-accent); line-height: 1.1; }
+.ak-heading__title, :is(h1, h2, h3, h4, h5, h6).ak-heading__title { font-size: var(--ak-fs-h2); font-weight: 800; margin: 0; letter-spacing: .01em; }
+.ak-heading__en { font-family: var(--ak-font-display); text-transform: uppercase; letter-spacing: var(--ak-tracking-caps); font-weight: 700; color: var(--ak-fg-muted); font-size: var(--ak-fs-sm); }
+.ak-heading__aside { margin-left: auto; font-size: var(--ak-fs-sm); }
+.ak-heading--stack { flex-direction: column; align-items: flex-start; gap: 2px; }
+.ak-heading--stack .ak-heading__en { font-size: var(--ak-fs-overline); letter-spacing: var(--ak-tracking-overline); color: var(--ak-fg-muted); }   /* 同 .ak-card__eyebrow：装饰小标签不上青 */
+.ak-heading--lg .ak-heading__title { font-size: var(--ak-fs-display); }
+.ak-heading--underline { border-left: 0; padding-left: 0; padding-bottom: var(--ak-space-2); border-bottom: 1px solid var(--ak-border); position: relative; }
+.ak-heading--underline::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 120px; height: 3px; background: var(--ak-accent); }

package/src/components/index.css

@@ -0,0 +1,38 @@
+/*! ═══════════════════════════════════════════════════════════════════════════
+ *  PRTS Design · components/ — L3 通用组件（原 components.css；框架无关，纯 CSS，可用于 TemplateStyles / Gadgets）
+ *  命名：BEM-lite  .ak-{block}  .ak-{block}__{el}  .ak-{block}--{mod}  状态 .is-{state} / aria-*
+ *  顺序：title-reset.css 必须在全部通用组件之后、方舟组件之前（它压掉 message / empty 等标题的颜色，又会被
+ *        dossier / hero 的标题规则压回）；keyframes.css 里的 ak-* 动画皮肤 / 方舟组件 / 工具类都在用。
+ *  依赖：tokens.css
+ * ═══════════════════════════════════════════════════════════════════════════ */
+@import url("button.css");
+@import url("tag.css");
+@import url("chip.css");
+@import url("badge.css");
+@import url("card.css");
+@import url("panel.css");
+@import url("heading.css");
+@import url("tabs.css");
+@import url("message.css");
+@import url("cbox.css");
+@import url("tooltip.css");
+@import url("dropdown.css");
+@import url("dialog.css");
+@import url("toast.css");
+@import url("progress.css");
+@import url("stat.css");
+@import url("skeleton.css");
+@import url("spinner.css");
+@import url("empty.css");
+@import url("avatar.css");
+@import url("breadcrumb.css");
+@import url("pagination.css");
+@import url("timeline.css");
+@import url("stepper.css");
+@import url("form.css");
+@import url("table.css");
+@import url("accordion.css");
+@import url("divider.css");
+@import url("fab.css");
+@import url("title-reset.css");
+@import url("keyframes.css");

package/src/components/keyframes.css

@@ -0,0 +1,14 @@
+/*! PRTS Design · components/keyframes.css — Keyframes（ak-* 动画，皮肤 / 方舟组件 / 工具类共用） · 依赖：tokens.css */
+/* ═══ Keyframes ═══ */
+@keyframes ak-spin { to { transform: rotate(360deg); } }
+@keyframes ak-ripple { from { width: calc(.75em + 5px); height: calc(.75em + 5px); } to { width: 1.65em; height: 1.65em; } }   /* 涟漪环外扩：出生时刚好箍在中央菱形外沿 */
+@keyframes ak-ripple-fade { from { opacity: 1; } to { opacity: 0; } }
+@keyframes ak-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
+@keyframes ak-slide-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
+@keyframes ak-fade-in { from { opacity: 0; } to { opacity: 1; } }
+@keyframes ak-dialog-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
+@keyframes ak-shrink { from { transform: scaleX(1); } to { transform: scaleX(0); } }
+@keyframes ak-indeterminate { 0% { left: -30%; } 100% { left: 100%; } }
+@keyframes ak-bars { 0%, 100% { transform: scaleY(.4); opacity: .5; } 50% { transform: scaleY(1); opacity: 1; } }
+@keyframes ak-blink { 50% { opacity: 0; } }
+@keyframes ak-scan { from { transform: translateY(-100%); } to { transform: translateY(100%); } }

package/src/components/message.css

@@ -0,0 +1,21 @@
+/*! PRTS Design · components/message.css — Message 消息 · 依赖：tokens.css */
+/* ═══ Message / Alert / Callout ═══ */
+.ak-message { --_c: var(--ak-info); --_bg: var(--ak-info-bg);
+  display: flex; gap: var(--ak-space-3); padding: var(--ak-space-3) var(--ak-space-4); margin: 0 0 var(--ak-space-4);
+  background: var(--_bg); 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; color: var(--ak-fg); font-size: var(--ak-fs-sm); }
+.ak-message--success { --_c: var(--ak-success); --_bg: var(--ak-success-bg); }
+.ak-message--warning { --_c: var(--ak-warning); --_bg: var(--ak-warning-bg); }
+.ak-message--danger { --_c: var(--ak-danger); --_bg: var(--ak-danger-bg); }
+.ak-message--neutral { --_c: var(--ak-fg-muted); --_bg: var(--ak-bg-surface-2); }
+.ak-message--accent { --_c: var(--ak-accent); --_bg: var(--ak-accent-subtle); }
+.ak-message__icon { flex: none; width: 20px; height: 20px; color: var(--_c); }
+.ak-message__title { font-weight: 700; margin: 0 0 2px; color: var(--_c); }
+.ak-message__body { flex: 1; }
+.ak-message__body > :last-child { margin-bottom: 0; }
+.ak-message__close { all: unset; cursor: pointer; align-self: flex-start; opacity: .6; padding: 0 4px; }
+.ak-message__close:hover { opacity: 1; }
+.ak-message--banner { border-width: 3px 1px 1px; border-image: linear-gradient(var(--_c) 3px, var(--ak-border) 3px) 3 1 1 1; justify-content: center; text-align: center; }
+/* 危险横幅：斜纹 */
+.ak-message--stripes { background-image: repeating-linear-gradient(-45deg, transparent 0 var(--ak-stripe-size), var(--ak-stripe-color) var(--ak-stripe-size) calc(var(--ak-stripe-size)*2)); }
+/* 关闭按钮是 all: unset，把全局 :focus-visible 焦点环也清掉了——补回来 */
+.ak-message__close:focus-visible { outline: 2px solid var(--ak-focus); outline-offset: 2px; }

package/src/components/pagination.css

@@ -0,0 +1,11 @@
+/*! PRTS Design · components/pagination.css — Pagination 分页 · 依赖：tokens.css */
+.ak-pagination { display: inline-flex; gap: 2px; align-items: center; font-variant-numeric: tabular-nums; }
+.ak-pagination__item, .ak-pagination a { min-width: 32px; height: 32px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ak-border); color: var(--ak-fg-secondary); text-decoration: none; font-weight: 600; font-size: var(--ak-fs-sm); }
+.ak-pagination a:not(.is-active):hover { border-color: var(--ak-accent); color: var(--ak-accent); text-decoration: none; }   /* 当前页不响应 hover；a.is-active:hover 仍要写，压住 base/typography.css 全局 a:visited:hover (0,2,1) */
+.ak-pagination .is-active, .ak-pagination a.is-active:hover { background: var(--ak-accent); color: var(--ak-accent-fg); border-color: var(--ak-accent); cursor: default; }
+.ak-pagination .is-disabled { opacity: .4; pointer-events: none; }
+.ak-pagination__ellipsis { padding: 0 6px; color: var(--ak-fg-subtle); }
+/* 页内切换用的 <button class="ak-pagination__item">（Vue 版不给 page-href 时）：抹掉裸按钮兜底（base/forms.css 的 :where(button)）带来的
+ * border-box / 表面底色 / 行高，与 <a> 同尺寸同外观；悬停同链接。:where() 压低特指度，.is-active 的实底照常盖上来 */
+.ak-pagination :where(button.ak-pagination__item) { box-sizing: content-box; background: none; line-height: inherit; }
+.ak-pagination button.ak-pagination__item:not(.is-active):hover { border-color: var(--ak-accent); color: var(--ak-accent); background: none; }

package/src/components/panel.css

@@ -0,0 +1,15 @@
+/*! PRTS Design · components/panel.css — Panel 面板 · 依赖：tokens.css */
+/* Panel: 带标题栏的容器（游戏内 announce panel 风格） */
+.ak-panel { background: var(--ak-bg-surface); border: 1px solid var(--ak-border); margin: 0 0 var(--ak-space-4); }
+.ak-panel__head { display: flex; align-items: center; gap: var(--ak-space-3); min-height: 40px; padding: 0 var(--ak-space-4) 0 var(--ak-space-3);
+  background: var(--ak-bg-surface-2); border: 0 solid var(--ak-border); border-width: 0 0 1px var(--ak-bar-w); border-image: linear-gradient(to right, var(--ak-accent) 4px, var(--ak-border) 4px) 0 0 1 4; }
+.ak-panel__head--inverse { background: var(--ak-bg-inverse); color: var(--ak-fg-inverse); }
+.ak-panel__title, :is(h1, h2, h3, h4, h5, h6).ak-panel__title { font-weight: 700; font-size: var(--ak-fs-sm); margin: 0; flex: 1; letter-spacing: .02em; }
+.ak-panel__title .ak-en { font-family: var(--ak-font-display); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ak-tracking-caps); color: var(--ak-fg-muted); margin-left: 8px; font-size: var(--ak-fs-xs); }
+.ak-panel__head--inverse .ak-panel__title .ak-en { color: inherit; opacity: .55; }   /* 继承反色前景再压透明度，明暗都对；不按 :root[data-theme="dark"] 分支——跟随系统的暗色没有 data-theme，会漏 */
+.ak-panel__body { padding: var(--ak-space-4); }
+.ak-panel__body > :last-child { margin-bottom: 0; }
+.ak-panel--collapsible > .ak-panel__head { cursor: pointer; }
+.ak-panel--collapsible > .ak-panel__head::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--ak-dur-fast); margin-left: auto; opacity: .6; }
+.ak-panel--collapsible.is-collapsed > .ak-panel__head::after { transform: rotate(-45deg); }
+.ak-panel--collapsible.is-collapsed > .ak-panel__body { display: none; }

package/src/components/progress.css

@@ -0,0 +1,19 @@
+/*! PRTS Design · components/progress.css — Progress / Ring 进度 · 依赖：tokens.css */
+/* ═══ Progress / Meter ═══ */
+.ak-progress { --_v: 0%; --_c: var(--ak-accent); position: relative; height: 8px; background: var(--ak-bg-surface-3); overflow: hidden; }
+.ak-progress::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--_v); background: var(--_c); transition: width var(--ak-dur-slow) var(--ak-ease); }
+.ak-progress--sm { height: 4px; } .ak-progress--lg { height: 14px; }
+.ak-progress--yellow { --_c: var(--ak-yellow-500); } .ak-progress--success { --_c: var(--ak-success); } .ak-progress--danger { --_c: var(--ak-danger); }
+.ak-progress--stripes::before { background-image: repeating-linear-gradient(-45deg, transparent 0 6px, rgba(0,0,0,.15) 6px 12px); }
+.ak-progress--indeterminate::before { width: 30%; animation: ak-indeterminate 1.4s ease-in-out infinite; }
+.ak-progress--segmented { display: flex; gap: 2px; background: transparent; }
+.ak-progress--segmented > i { flex: 1; background: var(--ak-bg-surface-3); }
+.ak-progress--segmented > i.is-on { background: var(--_c); }
+.ak-progress-label { display: flex; justify-content: space-between; font: 600 var(--ak-fs-xs)/1 var(--ak-font-label); color: var(--ak-fg-muted); margin-bottom: 4px; }
+/* 环形（信赖/百分比） */
+.ak-ring { --_v: 0; --_c: var(--ak-accent); --_size: 56px; width: var(--_size); height: var(--_size); border-radius: 50%; display: grid; place-items: center; font: 700 calc(var(--_size) * .3)/1 var(--ak-font-label);
+  background: conic-gradient(var(--_c) calc(var(--_v) * 1%), var(--ak-bg-surface-3) 0); }
+.ak-ring::before { content: ""; position: absolute; width: calc(var(--_size) - 10px); height: calc(var(--_size) - 10px); border-radius: 50%; background: var(--ak-bg-surface); }
+.ak-ring { position: relative; } .ak-ring > span { position: relative; }
+/* 环形的颜色修饰（同线形；Vue 版 AkProgress circle 用，手写 HTML 也可以照旧直接给 --_c） */
+.ak-ring--yellow { --_c: var(--ak-yellow-500); } .ak-ring--success { --_c: var(--ak-success); } .ak-ring--danger { --_c: var(--ak-danger); }

package/src/components/skeleton.css

@@ -0,0 +1,5 @@
+/*! PRTS Design · components/skeleton.css — Skeleton 骨架屏 · 依赖：tokens.css */
+/* ═══ Skeleton / Loader / Empty ═══ */
+.ak-skeleton { background: linear-gradient(90deg, var(--ak-bg-surface-2) 25%, var(--ak-bg-surface-3) 50%, var(--ak-bg-surface-2) 75%); background-size: 200% 100%; animation: ak-shimmer 1.4s infinite; display: block; height: 1em; }
+.ak-skeleton--text { height: .9em; margin: .35em 0; } .ak-skeleton--text:last-child { width: 60%; }
+.ak-skeleton--rect { height: 120px; } .ak-skeleton--square { aspect-ratio: 1; height: auto; } .ak-skeleton--circle { border-radius: 50%; aspect-ratio: 1; height: auto; }

package/src/components/spinner.css

@@ -0,0 +1,23 @@
+/*! PRTS Design · components/spinner.css — Spinner / Loader 加载 · 依赖：tokens.css */
+/* Spinner = 菱形涟漪（游戏内 loading）：font-size 定大小（默认 12px → 29px 见方），--_c 换色。
+ * ::before = 中央常驻的空心菱形（.75em、2px 线，即中坚术师分支图标那枚）；::after = 涟漪环，同一枚菱形从中央那枚身上冒出来：
+ *   尺寸走 width/height（不用 scale，线宽恒 2px）从「中央那枚 + 两道线宽 + 1px」（刚好箍在它外沿）→ 1.65em、ease-out；透明度另一条 ease-in 淡到 0；
+ *   1.2s 一枚。游戏里环出生时还带随机剪切，这个尺寸下施展不开、反而脏，没做。减弱动效时环不出、只留中央静止的菱形 */
+.ak-spinner { display: inline-block; position: relative; flex: none; vertical-align: middle; width: 2.4em; height: 2.4em; font-size: 12px; --_ld: var(--_c, var(--ak-accent)); }
+.ak-spinner::before, .ak-spinner::after {
+  content: ""; position: absolute; inset: 0; margin: auto; width: .75em; height: .75em; box-sizing: border-box;
+  border: 2px solid var(--_ld); transform: rotate(45deg);
+}
+.ak-spinner::after { opacity: 0; animation: ak-ripple 1.2s cubic-bezier(.2,.6,.4,1) infinite, ak-ripple-fade 1.2s cubic-bezier(.4,0,.8,.6) infinite; }
+.ak-loader { display: inline-flex; gap: 4px; align-items: center; }
+.ak-loader > i { width: 6px; height: 14px; background: var(--ak-accent); animation: ak-bars 1s ease-in-out infinite; }
+.ak-loader > i:nth-child(2) { animation-delay: .15s; } .ak-loader > i:nth-child(3) { animation-delay: .3s; }
+/* Vue AkSpinner 的外壳（同 Naive NSpin）：.ak-spin = 图形 + 说明文字竖排（role="status"）；
+   .ak-spin-container 包住正在加载的内容：内容压淡、不可点，.ak-spin 叠在它正中。状态走容器上的 aria-busy，不另设 .is-* */
+.ak-spin { display: inline-flex; flex-direction: column; align-items: center; gap: var(--ak-space-2); }
+.ak-spin__desc { font-size: var(--ak-fs-sm); color: var(--ak-fg-muted); }
+.ak-spin-container { position: relative; }
+.ak-spin-container > .ak-spin { position: absolute; inset: 0; z-index: 1; justify-content: center; }
+.ak-spin-container > .ak-spin > .ak-spin__desc { padding: 2px 8px; background: var(--ak-bg-surface); color: var(--ak-fg-secondary); }   /* 叠在压淡的内容上：垫一块表面色，字不和底下的字打架 */
+.ak-spin-container__content { transition: opacity var(--ak-dur-fast); }
+.ak-spin-container[aria-busy="true"] > .ak-spin-container__content { opacity: .35; pointer-events: none; user-select: none; }

package/src/components/stat.css

@@ -0,0 +1,12 @@
+/*! PRTS Design · components/stat.css — Stat 统计 · 依赖：tokens.css */
+/* ═══ Stat ═══ */
+.ak-stat { box-sizing: border-box; display: flex; flex-direction: column; gap: 2px; padding: var(--ak-space-3) var(--ak-space-4); background: var(--ak-bg-surface); border: 1px solid var(--ak-border); border-top-width: 2px; border-image: linear-gradient(var(--ak-accent) 2px, var(--ak-border) 2px) 2 1 1 1; min-width: 120px; }
+.ak-stat__label { font: 600 var(--ak-fs-overline)/1 var(--ak-font-label); text-transform: uppercase; letter-spacing: var(--ak-tracking-overline); color: var(--ak-fg-muted); }
+.ak-stat__value { font: 700 var(--ak-fs-h2)/1.1 var(--ak-font-label); font-variant-numeric: tabular-nums; color: var(--ak-fg); }
+.ak-stat__value small { font-size: .5em; color: var(--ak-fg-muted); margin-left: 2px; }
+.ak-stat__delta { font-size: var(--ak-fs-xs); font-variant-numeric: tabular-nums; }
+.ak-stat__delta--up { color: var(--ak-rt-vup); } .ak-stat__delta--down { color: var(--ak-rt-vdown); }
+.ak-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--ak-space-3); }
+.ak-stat-row > .ak-stat { min-width: 0; }   /* 轨道最小值由 minmax 管，条目自己别再撑 */
+.ak-stat--inline { flex-direction: row; align-items: baseline; gap: var(--ak-space-2); border: 0; padding: 0; background: none; min-width: 0; }
+.ak-stat--inline .ak-stat__value { font-size: var(--ak-fs-body-lg); }

package/src/components/stepper.css

@@ -0,0 +1,14 @@
+/*! PRTS Design · components/stepper.css — Stepper 步骤 · 依赖：tokens.css */
+/* 结构：ol.ak-stepper > li.ak-step（序号由计数器画）。列表重置：去掉原生序号、缩进与外边距；放在正文（.mw-parser-output）里时
+ * base/typography.css 的 ol (0,1,1) / ol > li (0,1,2) 还会加缩进、段距与主色序号，所以两条重置各带一个 .mw-parser-output 前缀的同义选择器（多一个类，压过它们）。
+ * 只是重置——正文外、写成 div 时外观不变 */
+.ak-stepper { display: flex; gap: 0; counter-reset: step; }
+.ak-stepper, .mw-parser-output .ak-stepper { list-style: none; margin: 0; padding: 0; }
+.ak-step { flex: 1; position: relative; text-align: center; font-size: var(--ak-fs-xs); color: var(--ak-fg-muted); padding-top: 28px; }
+.ak-step, .mw-parser-output .ak-step { margin: 0; padding-left: 0; padding-right: 0; }
+.ak-step::before { counter-increment: step; content: counter(step); position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 22px; height: 22px; display: grid; place-items: center; font: 700 11px/1 var(--ak-font-label); background: var(--ak-bg-surface-3); color: var(--ak-fg-muted); border: 1px solid var(--ak-border-strong); }
+.ak-step::after { content: ""; position: absolute; top: 11px; left: calc(50% + 12px); right: calc(-50% + 12px); height: 1px; background: var(--ak-border-strong); }
+.ak-step:last-child::after { display: none; }
+.ak-step.is-done::before, .ak-step.is-active::before { background: var(--ak-accent); color: var(--ak-accent-fg); border-color: var(--ak-accent); }
+.ak-step.is-done::after { background: var(--ak-accent); }
+.ak-step.is-active { color: var(--ak-fg); font-weight: 700; }

package/src/components/table.css

@@ -0,0 +1,17 @@
+/*! PRTS Design · components/table.css — Table 数据表（非 wikitable） · 依赖：tokens.css */
+/* ═══ Table helpers (design-system table, 非 wikitable) ═══ */
+.ak-table { width: 100%; border-collapse: collapse; border-spacing: 0; font-size: var(--ak-fs-sm); background: var(--ak-bg-surface); border: 1px solid var(--ak-border); }
+.ak-table th, .ak-table td { padding: 8px 12px; border-bottom: 1px solid var(--ak-border); text-align: left; vertical-align: middle; }
+.ak-table thead th { background: var(--ak-bg-surface-2); font: 700 var(--ak-fs-xs)/1.3 var(--ak-font-body); text-transform: uppercase; letter-spacing: .04em; color: var(--ak-fg-secondary); border-bottom: 2px solid var(--ak-border-strong); }
+.ak-table tbody tr:hover td { background: var(--ak-bg-hover); }
+.ak-table tbody tr.is-selected td { background: var(--ak-accent-subtle); }
+.ak-table--striped tbody tr:nth-child(even) td { background: var(--ak-bg-surface-2); }
+.ak-table--compact th, .ak-table--compact td { padding: 4px 8px; }
+.ak-table .num { text-align: right; font-variant-numeric: tabular-nums; }   /* 正文字体：见 base/tables.css 数字列说明 */
+.ak-table th[aria-sort] { cursor: pointer; }
+.ak-table th[aria-sort="ascending"]::after { content: " ↑"; color: var(--ak-accent); }
+.ak-table th[aria-sort="descending"]::after { content: " ↓"; color: var(--ak-accent); }
+/* 可排序列表头里的按钮（Vue 版 AkDataTable；WAI-ARIA APG Sortable Table：排序靠表头里的 <button>，键盘可达）。
+ * 长相就是表头文字本身（抹掉裸按钮兜底，字体 / 颜色 / 大写字距都继承 th），↑ / ↓ 仍由 th[aria-sort]::after 画 */
+.ak-table th > .ak-table__sort { all: unset; cursor: pointer; }
+.ak-table th > .ak-table__sort:focus-visible { outline: 2px solid var(--ak-focus); outline-offset: 2px; }

package/src/components/tabs.css

@@ -0,0 +1,29 @@
+/*! PRTS Design · components/tabs.css — Tabs 标签页 · 依赖：tokens.css */
+/* ═══ Tabs (纯 CSS 结构；TabberNeue 见 base/tabber.css) ═══ */
+.ak-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--ak-border); overflow-x: auto; scrollbar-width: none; }
+.ak-tabs::-webkit-scrollbar { display: none; }
+.ak-tab { flex: none; padding: var(--ak-space-2) var(--ak-space-4); font: 600 var(--ak-fs-sm)/1.4 var(--ak-font-body); color: var(--ak-fg-muted);
+  border-bottom: 3px solid transparent; margin-bottom: -1px; cursor: pointer; background: none; border-top: 0; border-left: 0; border-right: 0; text-decoration: none; position: relative; white-space: nowrap; }
+.ak-tab:hover { color: var(--ak-fg); background: var(--ak-bg-hover); text-decoration: none; }
+.ak-tab.is-active, .ak-tab[aria-selected="true"] { color: var(--ak-accent); border-bottom-color: var(--ak-accent); }
+.ak-tab.is-active::before { content: ""; position: absolute; left: 0; top: 0; border-style: solid; border-width: 6px 6px 0 0; border-color: var(--ak-accent) transparent transparent; }
+.ak-tabs--pill { border: 0; gap: 4px; padding: 3px; background: var(--ak-bg-surface-2); width: max-content; }
+.ak-tabs--pill .ak-tab { border: 0; margin: 0; }
+.ak-tabs--pill .ak-tab.is-active { background: var(--ak-bg-surface); box-shadow: var(--ak-shadow-sm); }
+.ak-tabs--pill .ak-tab.is-active::before { display: none; }
+.ak-tabs--block { border-bottom: 2px solid var(--ak-fg); gap: 2px; }   /* 游戏内块状标签：选中项黑白反转（原 --skew，已去掉平行四边形） */
+.ak-tabs--block .ak-tab { background: var(--ak-bg-surface-2); color: var(--ak-fg-secondary); border: 0; margin: 0; padding: 6px 16px; }
+.ak-tabs--block .ak-tab.is-active { background: var(--ak-fg); color: var(--ak-bg-canvas); }
+.ak-tabs--block .ak-tab.is-active::before { display: none; }
+.ak-tabs--vertical { flex-direction: column; border-bottom: 0; border-left: 1px solid var(--ak-border); }
+.ak-tabs--vertical .ak-tab { border-bottom: 0; border-left: 3px solid transparent; margin: 0 0 0 -1px; text-align: left; }
+.ak-tabs--vertical .ak-tab.is-active { border-left-color: var(--ak-accent); }
+.ak-tabs--vertical .ak-tab { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
+/* 页签里的第二行小字：解锁条件「信赖 25%」这类（竖排时右对齐） */
+.ak-tab small { margin-left: .5em; font: 600 9px/1 var(--ak-font-label); letter-spacing: .06em; color: var(--ak-fg-subtle); white-space: nowrap; }
+.ak-tabs--vertical .ak-tab small { margin-left: 0; }
+.ak-tabpanel[hidden] { display: none; }
+.ak-tabpanel { padding-top: var(--ak-space-4); }
+/* 页签组 + 面板的外层（Vue AkTabs 的根）；--left：页签竖排在左、面板在右 */
+.ak-tabset--left { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--ak-space-4); align-items: start; }
+.ak-tabset--left > .ak-tabpanel { padding-top: 0; }

package/src/components/tag.css

@@ -0,0 +1,26 @@
+/*! PRTS Design · components/tag.css — Tag 标签 · 依赖：tokens.css */
+/* ═══ Tag / Badge / Chip ═══ */
+.ak-tag {
+  --_bg: var(--ak-bg-surface-3); --_fg: var(--ak-fg-secondary); --_bd: transparent;
+  display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px;
+  font: 600 var(--ak-fs-xs)/1 var(--ak-font-body); color: var(--_fg); background: var(--_bg); border: 1px solid var(--_bd);
+  white-space: nowrap; vertical-align: middle; border-radius: var(--ak-radius);
+}
+.ak-tag--sm { height: 18px; padding: 0 5px; font-size: 10px; }
+.ak-tag--lg { height: 28px; padding: 0 12px; font-size: var(--ak-fs-sm); }
+.ak-tag--outline { --_bg: transparent; --_bd: var(--ak-border-strong); }
+.ak-tag--accent { --_bg: var(--ak-accent); --_fg: var(--ak-accent-fg); }
+.ak-tag--accent-soft { --_bg: var(--ak-accent-subtle); --_fg: var(--ak-accent); --_bd: var(--ak-accent-muted); }
+.ak-tag--yellow { --_bg: var(--ak-yellow-500); --_fg: #1d1f20; }
+.ak-tag--info { --_bg: var(--ak-info-bg); --_fg: var(--ak-info); }
+.ak-tag--success { --_bg: var(--ak-success-bg); --_fg: var(--ak-success); }
+.ak-tag--warning { --_bg: var(--ak-warning-bg); --_fg: var(--ak-warning); }
+.ak-tag--danger { --_bg: var(--ak-danger-bg); --_fg: var(--ak-danger); }
+.ak-tag--danger-solid { --_bg: var(--ak-red-700); --_fg: #fff; }     /* BREAKING NEWS 红 */
+.ak-tag--new { --_bg: var(--ak-red-600); --_fg: #fff; font-family: var(--ak-font-label); letter-spacing: .06em; }
+.ak-tag--inverse { --_bg: var(--ak-bg-inverse); --_fg: var(--ak-fg-inverse); }
+.ak-tag--label { font-family: var(--ak-font-label); text-transform: uppercase; letter-spacing: var(--ak-tracking-caps); }
+.ak-tag__dot { width: 6px; height: 6px; background: currentColor; }
+.ak-tag__remove { all: unset; cursor: pointer; margin-left: 2px; line-height: 1; opacity: .7; }
+.ak-tag__remove:hover { opacity: 1; }
+.ak-tags { display: flex; flex-wrap: wrap; gap: 6px; }

package/src/components/timeline.css

@@ -0,0 +1,13 @@
+/*! PRTS Design · components/timeline.css — Timeline 时间线 · 依赖：tokens.css */
+/* ═══ Timeline / Stepper ═══ */
+/* 在正文里（.mw-parser-output）也成立，不用标 ak-not-prose：base/typography.css 的正文列表规则 ul (0,1,1) / ul > li (0,1,2) / ul > li::before (0,1,3)
+ * 特指度都比下面的 .ak-timeline… 高，会改掉缩进与下外边距、给每项加段距、把菱形节点换成 5px 的项目符号。所以前三条各带一个 .mw-parser-output 前缀的同义选择器
+ * （多一个类，压过它们），声明照旧——正文外外观不变；li 显式 margin: 0 抵掉正文列表项的 .25em 段距。
+ * 状态色那条 (0,2,2) 与带前缀的 ::before 同特指度，靠写在后面生效。说明里的链接照常是正文链接 */
+.ak-timeline, .mw-parser-output .ak-timeline { list-style: none; margin: 0; padding: 0 0 0 20px; border-left: 2px solid var(--ak-border); }
+.ak-timeline > li, .mw-parser-output .ak-timeline > li { position: relative; margin: 0; padding: 0 0 var(--ak-space-5) var(--ak-space-4); }
+.ak-timeline > li::before, .mw-parser-output .ak-timeline > li::before { content: ""; position: absolute; left: -26px; top: 6px; width: 10px; height: 10px; background: var(--ak-bg-surface); border: 2px solid var(--ak-fg-muted); transform: rotate(45deg); }
+.ak-timeline > li.is-active::before, .ak-timeline > li.is-done::before { background: var(--ak-accent); border-color: var(--ak-accent); }
+.ak-timeline__date { font: 600 var(--ak-fs-xs)/1 var(--ak-font-label); color: var(--ak-fg-muted); letter-spacing: .04em; margin-bottom: 4px; display: block; }
+.ak-timeline__title { font-weight: 700; margin: 0 0 2px; }
+.ak-timeline__desc { color: var(--ak-fg-secondary); font-size: var(--ak-fs-sm); }

package/src/components/title-reset.css

@@ -0,0 +1,8 @@
+/*! PRTS Design · components/title-reset.css — 组件内标题不继承 MW 章节标题装饰（必须在全部通用组件之后、方舟组件之前） · 依赖：tokens.css */
+/* ═══ Component headings: 组件内标题不继承 MW 章节标题装饰 ═══
+   两条都再带一条标签限定的同义选择器 (0,1,1)：宿主正文（Vector 2022 的 .mw-body h3 …）是 (0,1,1)，单个类压不过；
+   写成 h1–h6 的组件标题（card / panel / dialog / heading / skill / module / hero）各自的规则也是这么写的。 */
+:is(.ak-card__title, .ak-panel__title, .ak-dialog__title, .ak-heading__title, .ak-message__title, .ak-toast__title, .ak-empty__title, .ak-timeline__title, .ak-skill__name, .ak-module__name, .ak-dossier__title, .ak-event__title, .ak-talent__name, .ak-stage__name, .ak-enemy__name, .ak-hero__title), :is(h1, h2, h3, h4, h5, h6):is(.ak-card__title, .ak-panel__title, .ak-dialog__title, .ak-heading__title, .ak-message__title, .ak-toast__title, .ak-empty__title, .ak-timeline__title, .ak-skill__name, .ak-module__name, .ak-dossier__title, .ak-event__title, .ak-talent__name, .ak-stage__name, .ak-enemy__name, .ak-hero__title) { color: inherit; border: 0; padding: 0; }
+:is(.ak-card__title, .ak-panel__title, .ak-dialog__title, .ak-message__title, .ak-toast__title, .ak-empty__title, .ak-timeline__title, .ak-skill__name, .ak-module__name, .ak-dossier__title, .ak-event__title, .ak-talent__name)::after, :is(h1, h2, h3, h4, h5, h6):is(.ak-card__title, .ak-panel__title, .ak-dialog__title, .ak-message__title, .ak-toast__title, .ak-empty__title, .ak-timeline__title, .ak-skill__name, .ak-module__name, .ak-dossier__title, .ak-event__title, .ak-talent__name)::after { display: none; }
+.ak-heading__title { margin: 0; }
+.ak-heading__title::after { display: none; }

package/src/components/toast.css

@@ -0,0 +1,14 @@
+/*! PRTS Design · components/toast.css — Toast 轻提示 · 依赖：tokens.css */
+/* ═══ Toast ═══ */
+.ak-toasts { position: fixed; right: var(--ak-space-4); bottom: var(--ak-space-4); display: flex; flex-direction: column; gap: var(--ak-space-2); z-index: var(--ak-z-toast); max-width: min(92vw, 380px); }
+.ak-toast { --_c: var(--ak-accent); background: var(--ak-bg-surface); color: var(--ak-fg); 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);
+  padding: var(--ak-space-3) var(--ak-space-4); font-size: var(--ak-fs-sm); animation: ak-slide-up var(--ak-dur-normal) var(--ak-ease); display: flex; gap: var(--ak-space-3); align-items: flex-start; }
+.ak-toast--success { --_c: var(--ak-success); } .ak-toast--warning { --_c: var(--ak-warning); } .ak-toast--danger { --_c: var(--ak-danger); }
+.ak-toast__title { font-weight: 700; }
+.ak-toast__progress { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--_c); animation: ak-shrink 5s linear forwards; transform-origin: left; }
+/* 进度条相对本条定位、占满宽（原来 preview.js 在内联 style 里补 position / overflow，且没给宽度——条是 0 宽看不见）；
+ * 时长跟 --_dur（默认 5s，Vue 版 AkToastProvider 按每条的 duration 写）；悬停 / 聚焦时 .is-paused 暂停倒计时。正文 __body 占满，✕ 靠右 */
+.ak-toasts > .ak-toast { position: relative; overflow: hidden; }
+.ak-toasts .ak-toast__progress { right: 0; animation-duration: var(--_dur, 5s); }
+.ak-toast.is-paused .ak-toast__progress { animation-play-state: paused; }
+.ak-toast__body { flex: 1; min-width: 0; }

package/src/components/tooltip.css

@@ -0,0 +1,31 @@
+/*! PRTS Design · components/tooltip.css — Tooltip / Popover / Term 提示 · 依赖：tokens.css */
+/* ═══ Tooltip / Popover (CSS-only via data-tip; JS 版由 gadget 增强) ═══ */
+[data-ak-tip] { position: relative; }
+/* 闲置时把气泡收成 0 宽（max-width: 0 + overflow: hidden）而不只是 opacity: 0：透明的气泡仍占布局，靠近右缘的一条长提示会把文档撑出横向滚动——
+ * 手机上只要有任何元素横向溢出，Chrome 就把布局视口撑宽、整页缩小，fixed 元素被推到可见区外（见文档站 /guide/contributing#命名与约定）。悬停 / 聚焦时再放开宽度，淡入照旧 */
+[data-ak-tip]::after { content: attr(data-ak-tip); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translate(-50%, 4px);
+  background: var(--ak-bg-inverse); color: var(--ak-fg-inverse); font-size: var(--ak-fs-xs); line-height: 1.4; padding: 0; white-space: nowrap; max-width: 0; overflow: hidden;
+  opacity: 0; pointer-events: none; transition: opacity var(--ak-dur-fast), transform var(--ak-dur-fast); z-index: var(--ak-z-tooltip); }
+[data-ak-tip]:hover::after, [data-ak-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); max-width: none; padding: 5px 8px; }
+[data-ak-tip].ak-tip--wide::after { white-space: normal; width: max-content; text-align: left; line-height: 1.55; }   /* 术语 / 异常效果那种一两句话的解释：允许折行、最宽 280 */
+[data-ak-tip].ak-tip--wide:hover::after, [data-ak-tip].ak-tip--wide:focus-visible::after { max-width: 280px; }
+.ak-tooltip { position: absolute; z-index: var(--ak-z-tooltip); background: var(--ak-bg-inverse); color: var(--ak-fg-inverse); padding: 6px 10px; font-size: var(--ak-fs-xs); max-width: 280px; box-shadow: var(--ak-shadow-md); }
+.ak-popover { position: absolute; z-index: var(--ak-z-dropdown); min-width: 220px; max-width: 360px; background: var(--ak-bg-surface); color: var(--ak-fg);
+  border: 1px solid var(--ak-border); border-top-width: 2px; border-image: linear-gradient(var(--ak-accent) 2px, var(--ak-border) 2px) 2 1 1 1; box-shadow: var(--ak-shadow-lg); padding: var(--ak-space-3) var(--ak-space-4); font-size: var(--ak-fs-sm); }
+.ak-popover__title { font-weight: 700; margin: 0 0 4px; }
+/* 术语提示（游戏内 <$ba.stun> 等）：虚线下划线 */
+.ak-term { border-bottom: 1px dashed currentColor; cursor: help; text-decoration: none; }
+.ak-term:hover { background: var(--ak-accent-subtle); }
+/* Vue 版 AkTooltip / AkPopover：外层 .ak-tip-anchor 给定位上下文（同 [data-ak-tip] 的 position: relative），气泡按 placement 贴在触发元素的一边、间距 6px（同 CSS-only 版）；
+ * 不做碰撞翻转（不引定位库）。宽度随内容（上限仍是 .ak-tooltip 280 / .ak-popover 360），不继承触发处的 nowrap / 居中 / 粗体（表头里的术语提示） */
+.ak-tip-anchor { position: relative; display: inline-block; }
+.ak-tip-anchor > :is(.ak-tooltip, .ak-popover) { width: max-content; white-space: normal; text-align: left; font-weight: 400; }
+.ak-tooltip--top, .ak-popover--top { bottom: calc(100% + 6px); left: 50%; translate: -50% 0; }
+.ak-tooltip--bottom, .ak-popover--bottom { top: calc(100% + 6px); left: 50%; translate: -50% 0; }
+.ak-tooltip--left, .ak-popover--left { right: calc(100% + 6px); top: 50%; translate: 0 -50%; }
+.ak-tooltip--right, .ak-popover--right { left: calc(100% + 6px); top: 50%; translate: 0 -50%; }
+/* 贴边对齐（没有自动翻转，靠近视口左 / 右缘的触发元素用）：-start 与触发元素左缘对齐，-end 右缘对齐 */
+.ak-tooltip--top-start, .ak-popover--top-start { bottom: calc(100% + 6px); left: 0; }
+.ak-tooltip--top-end, .ak-popover--top-end { bottom: calc(100% + 6px); right: 0; }
+.ak-tooltip--bottom-start, .ak-popover--bottom-start { top: calc(100% + 6px); left: 0; }
+.ak-tooltip--bottom-end, .ak-popover--bottom-end { top: calc(100% + 6px); right: 0; }

package/src/decor/bilingual.css

@@ -0,0 +1,6 @@
+/*! PRTS Design · decor/bilingual.css — A11 双语标题 Bilingual · 依赖：tokens.css */
+/* A11. 双语标题（CJK + EN） */
+.ak-bilingual { display: flex; flex-direction: column; line-height: 1.1; }
+.ak-bilingual__cn { font-weight: 800; }
+.ak-bilingual__en { font-family: var(--ak-font-display); text-transform: uppercase; letter-spacing: var(--ak-tracking-caps); font-size: .55em; color: var(--ak-fg-muted); font-weight: 700; }
+.ak-bilingual--row { flex-direction: row; align-items: baseline; gap: .5em; }

package/src/decor/brackets.css

@@ -0,0 +1,6 @@
+/*! PRTS Design · decor/brackets.css — A7 边角括号 HUD brackets · 依赖：tokens.css */
+/* A7. 边角括号（HUD bracket）— 只用细线角标记于图片/大图 */
+.ak-brackets { position: relative; }
+.ak-brackets::before, .ak-brackets::after { content: ""; position: absolute; width: 14px; height: 14px; border-color: var(--ak-fg-muted); border-style: solid; pointer-events: none; }
+.ak-brackets::before { top: 4px; left: 4px; border-width: 1px 0 0 1px; }
+.ak-brackets::after { bottom: 4px; right: 4px; border-width: 0 1px 1px 0; }

package/src/decor/chevrons.css

@@ -0,0 +1,5 @@
+/*! PRTS Design · decor/chevrons.css — A12 双箭头 Chevrons · 依赖：tokens.css */
+/* A12. 双箭头 >> (transferarrow) */
+.ak-chevrons { white-space: nowrap; }   /* 动作链接整体不断行：CJK 任意字间都能断，「前往 »」折行时会被拆成「前 / 往 »」，箭头也可能单独掉到下一行 */
+.ak-chevrons::after { content: "»"; font-family: var(--ak-font-label); margin-left: .35em; transition: transform var(--ak-dur-fast); display: inline-block; }
+a.ak-chevrons:hover::after { transform: translateX(3px); }

package/src/decor/corner.css

@@ -0,0 +1,12 @@
+/*! PRTS Design · decor/corner.css — A6 角标三角 Corner · 依赖：tokens.css */
+/* A6. 角标（corner triangle）· 官网右上角三角 / 游戏内选中角标 */
+.ak-corner { position: relative; }
+.ak-corner::before { content: ""; position: absolute; top: 0; left: 0; border-style: solid; border-width: 10px 10px 0 0; border-color: var(--ak-accent) transparent transparent transparent; z-index: 1; }
+.ak-corner--tr::before { left: auto; right: 0; border-width: 0 10px 10px 0; border-color: transparent var(--ak-accent) transparent transparent; }
+.ak-corner--yellow::before { border-color: var(--ak-yellow-500) transparent transparent; }
+.ak-corner--tr.ak-corner--yellow::before { border-color: transparent var(--ak-yellow-500) transparent transparent; }
+.ak-corner--red::before { border-color: var(--ak-red-600) transparent transparent; }
+.ak-corner--tr.ak-corner--red::before { border-color: transparent var(--ak-red-600) transparent transparent; }
+.ak-corner--lg::before { border-width: 18px 18px 0 0; }
+.ak-corner--tr.ak-corner--lg::before { border-width: 0 18px 18px 0; }
+/* 带文字的角标用 .ak-tag（矩形）叠在角上即可；原 45° 斜带 .ak-corner-tag 已移除 */

package/src/decor/glyph.css

@@ -0,0 +1,7 @@
+/*! PRTS Design · decor/glyph.css — A9 白色线稿图标 Glyph · 依赖：tokens.css */
+/* A9. 白色线稿图标在亮色主题下反相 */
+.ak-glyph { filter: var(--ak-glyph-filter); }
+.ak-glyph--keep { filter: none; }
+.ak-glyph--white { filter: none; }
+.ak-glyph-box { display: inline-grid; place-items: center; background: #1d1f20; }   /* 深底白图标，两主题不变 */
+.ak-glyph-box > .ak-glyph { filter: none; }

package/src/decor/halftone.css

@@ -0,0 +1,13 @@
+/*! PRTS Design · decor/halftone.css — A4 半调网点 Halftone · 蓝色标题条 · 依赖：tokens.css */
+/* A4. 半调网点（halftone）· 游戏内蓝色标题条的网点渐隐 */
+.ak-halftone { position: relative; isolation: isolate; }
+.ak-halftone::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
+  background-image: radial-gradient(var(--ak-halftone-color) 1.2px, transparent 1.3px); background-size: var(--ak-halftone-size) var(--ak-halftone-size);
+  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 100%); mask-image: linear-gradient(90deg, transparent 30%, #000 100%); }
+.ak-halftone--l::after { -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 70%); mask-image: linear-gradient(90deg, #000 0%, transparent 70%); }
+.ak-halftone--full::after { -webkit-mask-image: none; mask-image: none; }
+.ak-halftone-fade { -webkit-mask-image: radial-gradient(circle, #000 1px, transparent 1.5px), linear-gradient(90deg, #000 60%, transparent); mask-composite: intersect; }
+/* 游戏内蓝色标题条 */
+.ak-blue-band { --ak-halftone-color: rgba(255,255,255,.35); box-sizing: border-box; background: var(--ak-blue-500); color: #fff; padding: 6px 16px; font-weight: 700; display: inline-flex; align-items: center; gap: 10px; }
+.ak-blue-band.ak-halftone::after { z-index: 0; }
+.ak-blue-band > * { position: relative; z-index: 1; }

package/src/decor/index.css

@@ -0,0 +1,18 @@
+/*! ═══════════════════════════════════════════════════════════════════════════
+ *  PRTS Design · decor/ — L4 方舟装饰语言（原 arknights.css A 段）
+ *  这些是让界面"像明日方舟"而不是通用后台的部分：
+ *    左侧色条 / 短横条 / 斜纹 / 半调网点 / 角标三角 / 黑白反转 / 大写拉丁字 / 白色线稿图标
+ *    （没有切角、斜切、斜带——整套系统里不出现 45° 斜边；A1–A2 切角 .ak-chamfer / 斜切 .ak-skew 已移除，
+ *     层级与状态靠色条、黑白反转、角标三角表达）
+ *  依赖：tokens.css
+ * ═══════════════════════════════════════════════════════════════════════════ */
+@import url("stripes.css");
+@import url("halftone.css");
+@import url("patterns.css");
+@import url("corner.css");
+@import url("brackets.css");
+@import url("type.css");
+@import url("glyph.css");
+@import url("inverse.css");
+@import url("bilingual.css");
+@import url("chevrons.css");

package/src/decor/inverse.css

@@ -0,0 +1,4 @@
+/*! PRTS Design · decor/inverse.css — A10 反转块 Inverse · 依赖：tokens.css */
+/* A10. 反转块（in-game btn_on 白 / btn_off 黑） */
+.ak-inverse { background: var(--ak-bg-inverse); color: var(--ak-fg-inverse); }
+.ak-inverse a { color: inherit; }

package/src/decor/patterns.css

@@ -0,0 +1,7 @@
+/*! PRTS Design · decor/patterns.css — A5 网格 / 点阵 / 扫描线背景 · 依赖：tokens.css */
+/* A5. 网格 / 点阵背景（PRTS 终端 / 蓝图） */
+.ak-bg-grid { background-image: linear-gradient(var(--ak-grid-color) 1px, transparent 1px), linear-gradient(90deg, var(--ak-grid-color) 1px, transparent 1px); background-size: var(--ak-grid-size) var(--ak-grid-size); }
+.ak-bg-dots { background-image: radial-gradient(var(--ak-grid-color) 1px, transparent 1.2px); background-size: 12px 12px; }
+.ak-bg-diag { background-image: repeating-linear-gradient(-45deg, transparent 0 6px, var(--ak-grid-color) 6px 7px); }
+.ak-scanlines { position: relative; }
+.ak-scanlines::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.05) 2px 3px); }

package/src/decor/stripes.css

@@ -0,0 +1,10 @@
+/*! PRTS Design · decor/stripes.css — A3 斜纹 Hazard stripes · 依赖：tokens.css */
+/* A3. 斜纹（hazard stripes）· 危险 / 施工 / 禁用 / 分隔 */
+.ak-stripes { background-image: repeating-linear-gradient(-45deg, var(--ak-stripe-color) 0 var(--ak-stripe-size), transparent var(--ak-stripe-size) calc(var(--ak-stripe-size) * 2)); }
+.ak-stripes--strong { --ak-stripe-color: rgba(127,127,127,.25); }
+.ak-stripes--warning { --ak-stripe-color: rgba(255,216,0,.55); }
+.ak-stripes--danger  { background-image: repeating-linear-gradient(-45deg, #a40000 0 var(--ak-stripe-size), #1d1f20 var(--ak-stripe-size) calc(var(--ak-stripe-size) * 2)); }
+.ak-stripes--hazard  { background-image: repeating-linear-gradient(-45deg, var(--ak-yellow-500) 0 var(--ak-stripe-size), #1d1f20 var(--ak-stripe-size) calc(var(--ak-stripe-size) * 2)); }
+.ak-stripe-bar { height: 6px; }
+.ak-stripe-edge { position: relative; }
+.ak-stripe-edge::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: repeating-linear-gradient(-45deg, var(--ak-yellow-500) 0 5px, #1d1f20 5px 10px); }

package/src/decor/type.css

@@ -0,0 +1,10 @@
+/*! PRTS Design · decor/type.css — A8 拉丁展示字 / 标签字 / 数值 / 编号 / 水印 · 依赖：tokens.css */
+/* A8. 拉丁展示字 / 标签字（Novecento / Bender 语言） */
+.ak-en, .ak-display { font-family: var(--ak-font-display); text-transform: uppercase; letter-spacing: var(--ak-tracking-caps); font-weight: 700; }
+.ak-display { font-size: var(--ak-fs-display); line-height: var(--ak-lh-display); letter-spacing: var(--ak-tracking-display); }
+.ak-display--xl { font-size: var(--ak-fs-display-xl); }
+.ak-overline { font: 700 var(--ak-fs-overline)/1 var(--ak-font-label); text-transform: uppercase; letter-spacing: var(--ak-tracking-overline); color: var(--ak-fg-muted); }
+.ak-label { font-family: var(--ak-font-label); }
+.ak-num { font-family: var(--ak-font-label); font-variant-numeric: tabular-nums; font-weight: 700; }   /* 面板级 HUD 数字；不进表格——进了 td / th / 键值表 dd 会被文末 B99 兜底回正文字体 */
+.ak-code-id { font: 600 var(--ak-fs-xs)/1 var(--ak-font-label); letter-spacing: .1em; color: var(--ak-fg-muted); text-transform: uppercase; }   /* LM04 / R001 类编号 */
+.ak-watermark { position: absolute; right: 8px; bottom: -6px; font: 800 4rem/1 var(--ak-font-display); letter-spacing: -.02em; color: var(--ak-fg); opacity: .05; pointer-events: none; user-select: none; text-transform: uppercase; white-space: nowrap; }

package/src/forced-colors.css

@@ -0,0 +1,54 @@
+/*! PRTS Design · forced-colors.css — 强制色模式（Windows 高对比度等，@media (forced-colors: active)）· 依赖：全部组件，最后加载
+ *  强制色下浏览器把颜色换成系统色（Canvas / CanvasText / LinkText / Highlight / ButtonText / GrayText），抹掉 background-color 与 box-shadow：
+ *  只靠「底色」或「阴影」表达的状态就看不见了。这里把它们改用系统色表达，平时一条都不生效：
+ *   · 选中 / 当前项 = Highlight 底 + HighlightText 字（要 forced-color-adjust: none，否则底色照样被抹）
+ *   · 自绘控件（勾选 / 单选 / 开关 / 滑块 / 进度）的填充改成系统色
+ *   · 用 box-shadow 画的焦点补回 outline；只有底色、边框透明的块补 1px 轮廓（outline 不占位，不影响排版）
+ *   · 用 clip-path 裁出来的实心图形（稀有度星、信赖心）改成 CanvasText 填充
+ *  斜纹 / 网点 / 头图这类纯装饰在强制色下消失无妨，不处理。 */
+@media (forced-colors: active) {
+  /* 选中 / 当前项 */
+  .ak-tabs--pill .ak-tab.is-active,
+  .ak-tabs--block .ak-tab.is-active,
+  .ak-btn-group > .ak-btn.is-active,
+  .ak-chip.is-active, .ak-chip[aria-pressed="true"],
+  .ak-phase-tabs > button.is-active,
+  .ak-skill-levels > button.is-active,
+  .ak-pagination .is-active {
+    forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight;
+  }
+  .ak-phase-tabs > button.is-active > img, .ak-skill-levels > button.is-active > img { filter: none; }
+  /* 下划线 / 竖排页签的当前项：色条本来就是 border，改成 Highlight 与其余页签区分开 */
+  .ak-tab.is-active, .ak-tab[aria-selected="true"] { border-color: Highlight; color: Highlight; }
+
+  /* 自绘勾选 / 单选（base/forms.css，裸控件与 .ak-check 同一张脸） */
+  :where(input[type="checkbox"], input[type="radio"]) { forced-color-adjust: none; background: Canvas; border-color: CanvasText; }
+  :where(input[type="checkbox"], input[type="radio"]):checked, :where(input[type="checkbox"]):indeterminate { background: Highlight; border-color: Highlight; }
+  :where(input[type="checkbox"]):checked::before { border-color: HighlightText; }
+  :where(input[type="checkbox"]):indeterminate::before, :where(input[type="radio"]):checked::before { background: HighlightText; }
+  :where(input[type="checkbox"], input[type="radio"]):disabled { background: Canvas; border-color: GrayText; }
+  :where(input[type="checkbox"], input[type="radio"]):disabled:checked { background: GrayText; border-color: GrayText; }
+
+  /* 开关 / 滑块 / 进度 */
+  .ak-switch > input { forced-color-adjust: none; background: Canvas; outline: 1px solid CanvasText; }
+  .ak-switch > input::before { background: CanvasText; }
+  .ak-switch > input:checked { background: Highlight; outline-color: Highlight; }
+  .ak-switch > input:checked::before { background: HighlightText; }
+  .ak-slider { forced-color-adjust: none; background: CanvasText; }
+  .ak-slider::-webkit-slider-thumb { background: Highlight; border-color: Canvas; box-shadow: none; }
+  .ak-slider::-moz-range-thumb { background: Highlight; border-color: Canvas; }
+  .ak-progress { forced-color-adjust: none; background: Canvas; outline: 1px solid CanvasText; }
+  .ak-progress::before, .ak-progress--segmented > i.is-on { background: Highlight; }
+  .ak-progress--segmented { outline: 0; }
+  .ak-progress--segmented > i { background: Canvas; outline: 1px solid CanvasText; }
+
+  /* 焦点：这几处平时用边框色 + box-shadow 表示焦点（outline: 0），强制色下补回 outline */
+  :where(input[type="checkbox"], input[type="radio"]):focus-visible,
+  .ak-input:focus, .ak-select:focus, .ak-textarea:focus, .ak-slider:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
+
+  /* 只有底色、边框透明的块：补轮廓 */
+  .ak-tag, .ak-badge, .ak-btn--ghost, .ak-toast, .ak-message, .ak-cbox { outline: 1px solid CanvasText; outline-offset: -1px; }
+
+  /* clip-path 裁出来的实心图形 */
+  .ak-rarity > i, .ak-trust::before { forced-color-adjust: none; background: CanvasText; }
+}

package/src/index.css

@@ -0,0 +1,18 @@
+/*! PRTS Design — 明日方舟网页设计系统 · 汇总入口（皮肤全套：预览 / Storybook / 文档站用；MW 中按 ResourceLoader 模块逐文件加载，
+ *  列表由 scripts/css-order.ts 从下面这些 index.css 同步进 skin/skin.json，MW 上的实际加载顺序与这里一致）
+ *  层：fonts + tokens + 桥接 + 素材（只有 @font-face / 自定义属性，位置无关）→ base（MW 正文，只属于 Arknights 皮肤）→ scope（作用域根）→ components
+ *      → decor + arknights（L4 方舟）→ utilities → forced-colors（强制色模式）→ chrome（L2 皮肤骨架，只属于 Arknights 皮肤）
+ *  scope 起到 forced-colors 为止 = 随组件走的部分（MW：skins.akds.components 模块，别的皮肤也能加载）；
+ *  别的皮肤 / 站外只要组件：用 standalone.css（npm 包 @mooncellwiki/prts-design-css 的入口，不含字体、Codex 桥接、素材、base、chrome）。 */
+@import url("fonts.css");             /* 自托管 web 字体（@font-face），scripts/fetch-fonts.py 生成 */
+@import url("tokens.css");            /* 生成物：tokens/src/ 下的 json5 → pnpm tokens */
+@import url("bridge-codex.css");      /* 生成物：Codex / MW 令牌桥接（只属于皮肤：加载到别的皮肤上会改掉宿主的 Codex 配色） */
+@import url("base/skin-assets.css");  /* 皮肤持有的素材接口（--ak-item-bg-*）；不在 base/index.css 里，base/ 可以单独 import */
+@import url("base/index.css");
+@import url("scope.css");             /* 作用域根：排版基线挂在 body.skin-arknights / .ak-scope 上；在 base 之后、组件之前（MW 上它是 skins.akds.components 的开头） */
+@import url("components/index.css");
+@import url("decor/index.css");
+@import url("arknights/index.css");
+@import url("utilities.css");
+@import url("forced-colors.css");   /* 强制色模式（Windows 高对比度）：只在 @media (forced-colors: active) 下生效，压在组件层最后 */
+@import url("chrome/index.css");    /* 皮肤骨架放最后：页眉里的 .ak-btn / .ak-menu / .ak-fab 等靠同特指度后到覆盖组件；工具类 / 强制色规则与骨架没有同特指度的冲突 */