-
+
@@ -28,27 +49,114 @@ export function initDxTimer({ getUser, onComplete, onResultClose }) {
function showResult() {
if (!result || timer?.status !== 'completed' || user !== getUser()) return;
const score = result.score;
- field('.dx-result-kicker b').textContent = String(result.dailyTrack || 1).padStart(2, '0');
- field('.dx-result-kicker').title = '当天第 ' + (result.dailyTrack || 1) + ' 道 AC 的题目';
- const color = cfRatingColor(result.difficulty);
- field('.dx-result-track').dataset.ratingTone = color.tone;
- field('.dx-result-track').title = `题目难度配色参考 CF 名称颜色：${color.label}（${color.range}）`;
- field('.dx-result-problem').textContent = 'CODEFORCES / '+timer.problem_id;
- field('.dx-result-name').textContent = result.title;
- field('.dx-result-level strong').textContent = result.difficulty ?? '待定';
- field('.dx-result-achievement-value').textContent = score ? score.achievementShown.toFixed(4)+'%' : '已通关';
- field('.dx-result-rank').textContent = score?.rank ?? 'AC';
- field('.dx-result-kind').textContent = {first:'INDEPENDENT',repeat:'REPLAY',assisted:'ASSISTED',unknown:'PRACTICE'}[result.practiceKind];
+ // 这几处用官方精灵拼：CLEAR! / TRACK / 段位 / 大数字，形和配色都是客户端那套
+ const previewParams = new URLSearchParams(location.search);
+ field('.dx-result-clear').replaceChildren(clearWord());
+ // 轨道号只在段位/课题模式里有意义（客户端那边也是跑课程才显示 TRACK n）。
+ // 普通练习模式这里是当天第几道题的固定值，没有意义。
+ // ⚠️ 只藏内容、不删元素 —— 删掉会把 kicker 这一行压塌，上面的组件整体位移。
+ field('.dx-result-track-word').style.visibility = 'hidden';
+ field('.dx-result-kicker b').style.visibility = 'hidden';
+ // ?track=03 时强制显示这一行，方便核对 TRACK 和数字的字体（正常用户看不到）。
+ const trackPreview = previewParams.get('track');
+ if (trackPreview !== null) {
+ field('.dx-result-track-word').replaceChildren(trackLabel());
+ field('.dx-result-track-word').style.visibility = '';
+ field('.dx-result-kicker b').replaceChildren(
+ trackNumber(trackPreview.replace(/\D/g, '').padStart(2, '0').slice(-2)));
+ field('.dx-result-kicker b').style.visibility = '';
+ }
+ // 卡片整块用官方乐曲底板 + 官方等级数字重画（maimai-glyphs.js 的 problemCard）。
+ // 配色还是那一条：难度 → cfRatingColor 的 tone → 底板/滤镜/板面底色。
+ const difficulty = difficultyOf(result.difficulty);
+ const color = cfRatingColor(difficulty);
+ const [toneMain, toneDeep] = cfToneColors(color.tone);
+ const tone = cardTone(color.tone);
+ const card = field('.dx-result-track');
+ card.dataset.ratingTone = color.tone;
+ card.title = `题目难度配色参考 CF 名称颜色：${color.label}（${color.range}）`;
+ card.style.setProperty('--mm-plate', `url('/assets/mm-result/${tone.plate}')`);
+ card.style.setProperty('--mm-field', tone.field);
+ card.style.setProperty('--mm-plate-filter', tone.filter);
+ card.style.setProperty('--track-main', toneMain);
+ card.style.setProperty('--track-deep', toneDeep);
+ // 题面来源的平台**不传**：服务端今天只发 Codeforces，result 和 timer 上都没有 platform
+ // 字段（见 src/dx/timer.ts 的 timerResult —— 平台在 SQL 里就是写死的 'codeforces'），
+ // 所以这里不能凭空写 result.platform。不传 → problemCard → platformLabel() 落回
+ // problem-source.js 的默认值，卡片照旧印 CODEFORCES；哪天服务端把平台发下来了，
+ // 在这里补一个 platform: result.platform 就切换完了。
+ card.replaceChildren(problemCard({
+ problemId: timer.problem_id,
+ kind: PRACTICE_KIND_LABEL[result.practiceKind] ?? result.practiceKind ?? '',
+ title: result.title,
+ difficulty,
+ tone: color.tone,
+ }));
+ const achievementText = score ? score.achievementShown.toFixed(4) : null;
+ // 显示哪个数字：调试用的 ?achievement= 优先，否则用本次成绩
+ // 两条路都补齐到四位小数 —— 结算单上的达成率永远是 4 位（100.0000%）
+ const achievementOverride = previewParams.get('achievement');
+ const shownAchievement = achievementOverride && /^\d+(\.\d+)?$/.test(achievementOverride)
+ ? Number(achievementOverride).toFixed(4) : achievementText;
+ // 达成率 < 80% 不算 clear（客户端也是这个门槛），CLEAR! 就不该出现。
+ // 这里必须放在 shownAchievement 算出来之后 —— 放在前面会踩 TDZ，
+ // 直接抛 ReferenceError 让整个 showResult() 中断（什么精灵都画不出来）。
+ // shownAchievement 为 null 表示这条没有成绩数字、按已通关处理，仍然显示。
+ const isCleared = !shownAchievement || Number(shownAchievement) >= 80;
+ // 用 visibility 而不是 hidden：达成率 <80 时只是把文字藏掉，
+ // 这一块的高度必须留着 —— 否则底下的组件会整体往上顶。
+ field('.dx-result-clear').style.visibility = isCleared ? '' : 'hidden';
+ // 配色由达成率决定（<80 蓝、>=97 金、其余红）；调试时可以用 ?achvColor= 覆盖来看别的配色
+ const numberColour = shownAchievement
+ ? (NUMBER_COLOURS.includes(previewParams.get('achvColor')) ? previewParams.get('achvColor') : achievementColour(shownAchievement))
+ : 'Gold';
+ // 达成率标题用原版素材（UI_RSL_Base_Achievement 长条 + UI_RSL_Text_Achievement 字）
+ field('.dx-result-achievement-label').replaceChildren(achievementLabel());
+ field('.dx-result-achievement-value').replaceChildren(
+ shownAchievement ? scoreNumber(shownAchievement + '%', { colour: numberColour }) : document.createTextNode('已通关'));
+ // 段位只跟达成率有关，所以直接由上面显示的数字推 —— 两个数据源打架就会画出「88.8888 配 S」
+ const rankText = previewParams.get('rank') || (shownAchievement ? rankOf(shownAchievement) : score?.rank) || 'AC';
+ field('.dx-result-rank').replaceChildren(rankWord(rankText));
+ // 结算底图：嵌逆向出来的客户端动态结算背景页（云/星屑/点阵/流星都在里面），
+ // 按评级切色版。它只有 A/B/S/SS/SSS 五档，细分档（AA/AAA/BB/BBB 等）按下表归并，
+ // 低于最低档、以及 AC 兜底（AC = Accepted，不是段位），都落到 B。
+ const bgRank = { 'SSS+':'SSS', 'SSS':'SSS', 'SS+':'SS', 'SS':'SS',
+ 'S+':'S', 'S':'S', 'AAA':'A', 'AA':'A', 'A':'A'
+ }[String(rankText).trim()] || 'B';
+ const sheet = field('.dx-result-sheet');
+ sheet.dataset.bg = bgRank.toLowerCase();
+ if (!sheet.querySelector('.dx-result-bg')) {
+ const bf = document.createElement('iframe');
+ bf.className = 'dx-result-bg';
+ bf.setAttribute('scrolling', 'no');
+ bf.setAttribute('aria-hidden', 'true');
+ bf.tabIndex = -1;
+ sheet.insertBefore(bf, sheet.firstChild);
+ // 背景比结算单大一圈：四周外扩 BLEED 像素，缩放取宽/高比例的较大者，
+ // 这样无论哪一维差一点都不会在边上露出底色（用户要的"四周多几个像素"）。
+ const BLEED = 24;
+ sheet.style.setProperty('--result-bg-bleed', BLEED + 'px');
+ const fit = () => {
+ const kw = (sheet.clientWidth + BLEED * 2) / 903;
+ const kh = (sheet.clientHeight + BLEED * 2) / 906;
+ sheet.style.setProperty('--result-bg-scale',
+ Math.max(kw, kh, 0.2).toFixed(4));
+ };
+ fit();
+ if (window.ResizeObserver) new ResizeObserver(fit).observe(sheet);
+ window.addEventListener('resize', fit);
+ }
+ // ?bgStill=1 时只留静态色版兜底，不嵌 iframe（排查用）
+ if (previewParams.get('bgStill') !== '1') {
+ sheet.querySelector('.dx-result-bg').src =
+ '/mm-result-bg.html?ui=0&clear=1&t=0&rank=' + bgRank;
+ }
field('.dx-result-time strong').textContent = duration(result.seconds);
field('.dx-result-rating strong').textContent = score ? score.rating.toFixed(1) : '—';
const comparison = result.comparison, previous = comparison?.previousScore;
const signed = (number, digits) => (number>=0?'+':'−')+Math.abs(number).toFixed(digits);
const previousAchievement = previous?.achievementShown ?? 0;
const improvement = score && comparison ? score.achievementShown-previousAchievement : null;
- field('.dx-result-best b').textContent = comparison ? previousAchievement.toFixed(4)+'%' : '—';
- field('.dx-result-achievement-delta').textContent = improvement!==null ? signed(improvement,4)+'%' : '暂无对比';
- field('.dx-result-achievement-delta').dataset.direction = improvement!==null && improvement<0 ? 'down' : 'up';
- field('.dx-result-record').hidden = !comparison || !score || result.practiceKind==='assisted' || (previous && improvement<=0);
field('.dx-result-single-delta').textContent = score && previous ? signed(score.rating-previous.rating,1) : '';
const totalText = comparison ? comparison.ratingAfter.toFixed(1) : '—';
const totalFrame = field('.dx-result-total');
@@ -67,10 +175,13 @@ export function initDxTimer({ getUser, onComplete, onResultClose }) {
digits.append(digit);
}
field('.dx-result-total-delta').textContent = comparison ? signed(comparison.ratingDelta,1) : '—';
+ // cleanSolve 原本用来切换 AC/CS 那对 CSS 勋章；现在勋章是官方精灵
+ // （medalPair()：底座 + AP/FSD），这一段只剩判定，留着以后接精灵的亮暗。
const cleanSolve = result.verdicts.AC > 0 && Object.entries(result.verdicts).every(([verdict, count]) => verdict === 'AC' || count === 0);
- field('.dx-result-award-cs').hidden = !cleanSolve;
- field('.dx-result-medal-cs').setAttribute('aria-label','clean solve');
- field('.dx-result-award-cs').title = 'Clean Solve · AC only';
+ // 勋章挂在这里：Accepted 有 AC 就有；Clean Solve 要求 AC 之外全为 0。
+ field('.dx-result-badges').replaceChildren(medalPair({ cleanSolve }));
+ // 勋章：官方底座 + 两枚圆章。Accepted 有 AC 就有；Clean Solve 要求 AC 之外全为 0。
+ // cleanSolve 在下面才算，所以这里必须放在它后面挂载。
field('.dx-result-verdicts').replaceChildren();
for (const verdict of ['AC','WA','TLE','RE','CE','MLE','OTHER','PENDING']) {
if (['MLE','OTHER','PENDING'].includes(verdict) && !result.verdicts[verdict]) continue;
@@ -80,6 +191,9 @@ export function initDxTimer({ getUser, onComplete, onResultClose }) {
tag.append(name,count);
field('.dx-result-verdicts').append(tag);
}
+ // 看板娘每次都重画：用户可能在设置里刚换过，图源就是那串 lolicount.top 链接。
+ // 远端挂了 mascotImage 会自己退回本地占位图，这里的排版不用管加载成功与否。
+ field('.dx-result-mascot').replaceChildren(mascotImage({ className: 'dx-result-mascot-img' }));
if (!dialog.open) dialog.showModal();
}
dialog.addEventListener('close', async () => {
@@ -198,5 +312,16 @@ export function initDxTimer({ getUser, onComplete, onResultClose }) {
startPolling();
window.addEventListener('pageshow',event=>{if(event.persisted){startPolling();void check();}});
window.addEventListener('pagehide',()=>{clearInterval(clock);clearInterval(poll);});
- return {refresh,running:()=>timer?.status==='running'};
+ /**
+ * 开发/设计预览：塞一份样例把结算弹窗直接弹出来，不必真的做完一道题。
+ * 只改这份闭包里的状态，showResult 照常走；页面用 ?resultPreview=1 触发。
+ */
+ function previewResult(sample) {
+ timer = { problem_id: sample.problemId, status: 'completed' };
+ result = sample.result;
+ user = getUser();
+ showResult();
+ }
+
+ return {refresh,running:()=>timer?.status==='running',previewResult};
}
diff --git a/public/dx.html b/public/dx.html
index 86b02f5..ffda91d 100644
--- a/public/dx.html
+++ b/public/dx.html
@@ -4,19 +4,21 @@
Algorithm DX · Rating 总览
-
+
+
-
+
-
+
-
+
+
@@ -292,5 +299,8 @@
支持项目
微信扫一扫，或点击图片查看原图。
+
+
+
diff --git a/public/dx.js b/public/dx.js
index b4e0d6a..95f32ce 100644
--- a/public/dx.js
+++ b/public/dx.js
@@ -1165,6 +1165,31 @@ async function focusResultOnBoard({ userId, problemId }) {
const timerController=initDxTimer({getUser:()=>state.userId,onComplete:()=>load(true),onResultClose:focusResultOnBoard});
await loadMeta();
await timerController.refresh().catch(error=>{$('timerStatus').textContent=error.message;});
+// ?resultPreview=1 用样例把结算弹窗直接弹出来：调这块 UI 时不用真做完一道题。
+// 再配 ?achievement=98.7654 能试不同达成率下的排版（段位/数字配色都跟着它走）；
+// ?difficulty=3000 / ?difficulty= 能试题目卡换难度配色、以及「还没难度」那一档（?difficulty= 给空值）；
+// ?rating=2500 能试 DX RATING 那块底板的六档配色（绿/青/蓝/紫/橙/红，见 cf-rating-colors.js）。
+if (pageParams.get('resultPreview') === '1') {
+ const previewDifficulty = pageParams.get('difficulty');
+ const previewRating = pageParams.get('rating');
+ const rating = previewRating === null || previewRating.trim() === ''
+ ? 1523.4 : Number(previewRating);
+ timerController.previewResult({
+ problemId: pageParams.get('problem') ?? '1999A',
+ result: {
+ dailyTrack: 3,
+ difficulty: previewDifficulty === null ? '1700' : (previewDifficulty.trim() === '' ? null : previewDifficulty),
+ title: pageParams.get('title') ?? 'Two Permutations',
+ practiceKind: 'first',
+ seconds: 1837,
+ // 段位不用给：弹窗按达成率自己查表（评级只跟达成率有关），
+ // 这样显示的数字和段位不会打架
+ score: { achievementShown: 98.7654, rating },
+ comparison: { previousScore: { achievementShown: 97.2, rating: rating - 23.3 }, ratingAfter: rating, ratingDelta: 23.3 },
+ verdicts: { AC: 12, WA: 0, TLE: 0, RE: 0, CE: 0 },
+ },
+ });
+}
renderYearOptions([currentYear()]);
await refresh();
if (pageParams.get('add') === '1' && state.userId !== null) {
diff --git a/public/help.html b/public/help.html
index b22843c..bb9847c 100644
--- a/public/help.html
+++ b/public/help.html
@@ -1,13 +1,15 @@
-
使用指南 · Algorithm DX
+
+
使用指南 · Algorithm DX
-
+
+
GETTING STARTED 使用指南 从绑定第一个账号，到记录练习、看懂成绩与统计。
前往账号管理 ↗ 首次使用 名称与账号 ID 通用 Cookie 教程 洛谷数据范围 同步与历史 CF 自建比赛 码蹄集同步 用时与 B50 常见问题 评分规则 模型与验证 随机抽题 2. 取得 API key / secret 后配置
-
+
+
+
diff --git a/public/index.html b/public/index.html
index 8445a4b..6ff52d7 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,18 +4,22 @@
Algorithm DX · AC 记录
-
+
+
+
+
-
+
+
-
PRACTICE JOURNAL 每一次通过，都值得记录 汇集各平台的解题足迹，回看尝试，也发现下一步。
+
PRACTICE JOURNAL 每一次通过，都值得记录 汇集各平台的解题足迹，回看尝试，也发现下一步。
@@ -210,6 +220,8 @@
这个筛选条件下没有记录
+
+
diff --git a/public/maimai-glyphs.css b/public/maimai-glyphs.css
new file mode 100644
index 0000000..1e3f719
--- /dev/null
+++ b/public/maimai-glyphs.css
@@ -0,0 +1,41 @@
+/**
+ * 官方字形精灵的排版。
+ *
+ * 这些精灵是**方格切片**（每格带透明边距），所以直接并排会显得字距很松；
+ * 这里用负外边距把字收紧。每个族的收紧量不同，是按实际观感定的。
+ */
+
+.mm-glyph { display: block; width: auto; }
+
+.mm-clear-word,
+.mm-track-label,
+.mm-rank-word,
+.mm-number { display: inline-flex; align-items: flex-end; justify-content: center; }
+
+/* CLEAR! 六格，格子 80x80，字母只占中间一块，收 -0.2em 左右才连成词。
+ 高度按官方的比例给：官方抓图里 CLEAR! 约占画面高的 7.5%。 */
+.mm-clear-word { margin: 0 -0.2em; }
+.mm-clear-word .mm-glyph { height: 0.95em; }
+
+.mm-track-label .mm-glyph { height: 1em; }
+
+/* 段位：S/A/B/C 的格子同样是方图，+ 另有一张 */
+.mm-rank-word { margin: 0 -0.12em; }
+.mm-rank-word .mm-glyph { height: 1em; }
+/* 加号的位置/大小是对着官方 SSS+ 抓图做模板匹配量出来的（素材确认就是 UI_RSL_Rank_Plus）：
+ · 墨水高 ≈ 字母格的 0.38（素材字形只占格子 83%，所以图取 0.445）
+ · 顶边在字母顶边下方约 0.08 个格子高 —— 也就是**右上角**，不是和字母底边对齐
+ · 左边紧贴最后一个字母的右缘
+ 之前底对齐 + 偏大，看着就像"挂"在字下面。 */
+.mm-rank-word .mm-rank-plus { height: 0.445em; align-self: flex-start; margin-top: 0.05em; margin-left: -0.02em; }
+
+/* 大数字：官方是两套图集混排 + 单独的 '%'，三者的格子底边对齐、共用一条基线。
+ 缩放比 98 : 82 : 54 是对着官方抓图量的（整数格 98、小数格 82、'%' 54）。
+ 高度由调用方给 --n（整数部分的格子高），其余按比例推。 */
+.mm-number { display: inline-flex; align-items: flex-end; margin: 0; }
+.mm-number .mm-number-int { height: var(--n, 1em); }
+.mm-number .mm-number-frac { height: calc(var(--n, 1em) * 0.837); }
+/* 相邻字形重叠 8%：格子带透明边距，不收会散开，收太多（-24%）又会挤成一团 */
+.mm-number .mm-number-int + .mm-number-int { margin-left: calc(var(--n, 1em) * -0.08); }
+.mm-number .mm-number-frac + .mm-number-frac { margin-left: calc(var(--n, 1em) * -0.067); }
+.mm-number .mm-number-percent { height: calc(var(--n, 1em) * 0.551); margin-left: calc(var(--n, 1em) * -0.04); }
diff --git a/public/maimai-glyphs.js b/public/maimai-glyphs.js
new file mode 100644
index 0000000..42ea3c1
--- /dev/null
+++ b/public/maimai-glyphs.js
@@ -0,0 +1,410 @@
+/**
+ * 官方结算素材拼字：CLEAR! / TRACK / 段位字母 / 大数字。
+ *
+ * 页面上这些原本是 CSS 画的花体字，形似但终归不是官方的。客户端里这几样都有现成精灵，
+ * 尺寸和配色都是官方那套，这里只负责把格子拼成词，交给调用方塞进页面。
+ *
+ * 几个只看文件名读不出来的地方（都是对着抓图核过的）：
+ * · CLEAR! 是六个字母精灵，有 01/02/03 三套配色；抓图那套是 _01_（白字 + 蓝描边）
+ * · 段位没有 SS/SSS，是用 S 的颜色变体拼的：三个 S 就是 Blue/Red/Yellow
+ * · 大数字用分数那套金色精灵，格子号 0-9 是数字，10='+'、11='-'、12='/'、13='.'
+ * · '%' 是单独一张 UI_RSL_Score_Per_Gold
+ */
+
+import { platformLabel } from './problem-source.js';
+
+const ASSETS = '/assets/mm-result/';
+const RANK_LETTERS = new Set(['S', 'A', 'B', 'C', 'D']);
+
+/** 大数字可选的四套配色，和客户端里的族名一致 */
+export const NUMBER_COLOURS = ['Gold', 'Red', 'Blue', 'Base'];
+/** 数字的两套图集：同一字体的两个尺寸，1110000 是大号 */
+export const NUMBER_ATLASES = ['1110000', '0001111'];
+
+/** 大数字的格子号：和 layout 里的编号一致 */
+const DIGIT_CELL = { ...Object.fromEntries([...'0123456789'].map((c, i) => [c, i])), '+': 10, '-': 11, '/': 12, '.': 13 };
+
+/**
+ * 小数点的坑号**不是每族都一样**，这是逐族比字形才看出来的：
+ * 0001111_Red 的 12/13 是反的（13 画的是逗号，12 才是小数点）。其余族都是 13。
+ * 只影响小数点，数字 0~9 各族的坑号一致。
+ */
+const DOT_CELL = { Red: 12 };
+
+function glyph(file, { className = '', height = '' } = {}) {
+ const img = document.createElement('img');
+ img.className = 'mm-glyph' + (className ? ' ' + className : '');
+ img.src = ASSETS + file;
+ img.alt = '';
+ img.decoding = 'async';
+ if (height) img.style.height = height;
+ return img;
+}
+
+/** CLEAR! —— 六个字母精灵；抓图用的是 _01_ 那套配色 */
+export function clearWord({ variant = '01' } = {}) {
+ const word = document.createElement('span');
+ word.className = 'mm-clear-word';
+ for (let i = 1; i <= 6; i += 1) word.append(glyph(`UI_RSL_Text_Clear_${variant}_${String(i).padStart(2, '0')}.png`));
+ return word;
+}
+
+/** TRACK —— 官方就一张图。prefab 里 UI_Track 是 93x30 抓图 = 112x36 原生，
+ 素材 UI_RSL_Text_TRACK 正好 110x36，所以是按原生尺寸贴的。 */
+export function trackLabel() {
+ const label = document.createElement('span');
+ label.className = 'mm-track-label';
+ label.append(glyph('UI_RSL_Text_TRACK.png'));
+ return label;
+}
+
+/**
+ * 达成率标题那一行 —— 用原版素材，不用页面自己拼的文字。
+ *
+ * 只画 UI_RSL_Text_Achievement（prefab: AchievementLogo，296x41，抓图 247x40）。
+ * prefab 里还有一条 UI_RSL_Base_Achievement（Achievment_Base/Base_01，抓图 1667x107）
+ * —— 那是 1667px 宽、比 903 的画面还宽的长条，本是溢出裁切的装饰底；
+ * 整条铺进这一行会变成一大片空色（文字只占最左一点），看着就是"意义不明的色块"，
+ * 所以不画它。
+ */
+export function achievementLabel() {
+ const wrap = document.createElement('span');
+ wrap.className = 'mm-achv-label';
+ wrap.append(glyph('UI_RSL_Text_Achievement.png', { className: 'mm-glyph mm-achv-label-text' }));
+ return wrap;
+}
+
+/**
+ * 结算勋章：一块底座 + 两枚徽章。
+ *
+ * prefab（UI_MedalDisplay，capture 250x125@(144,553)）：
+ * Medal_Base UI_RSL_MedalBase 326x153 原生 -> capture 273x130@(172,552) 底座
+ * v110 (左槽) capture 83x83@(227,574) -> AP_Base/AP_Text_01
+ * Null_FS_FSD_Medal(右槽) capture 83x83@(318,574) -> FSD_Base/FSD_Text_01
+ * 两槽间距 318-227 = 91 capture；槽相对底座左边 227-172 = 55 capture。
+ * 整组中心 x=314，段位中心 x=292（差 22 capture ~ 26 原生），基本水平居中。
+ */
+export function medalPair({ cleanSolve = true } = {}) {
+ const wrap = document.createElement('span');
+ wrap.className = 'mm-medals';
+ wrap.append(glyph('UI_RSL_MedalBase.png', { className: 'mm-glyph mm-medal-base' }));
+ // 两枚圆片是 Codex 生图产出的（青绿 Accepted / 香槟金 Clean Solve），
+ // 官方素材 UI_RSL_AP_* / UI_RSL_FSD_* 是分「底 + 字」两层、画风偏写实，
+ // 这里按需求换成配套的一对圆章。
+ const ap = document.createElement('img');
+ ap.className = 'mm-medal mm-medal--ap';
+ ap.src = '/assets/maimai/medal-accepted.png';
+ ap.alt = 'Accepted';
+ wrap.append(ap);
+ const cs = document.createElement('img');
+ cs.className = 'mm-medal mm-medal--fsd';
+ cs.src = '/assets/maimai/medal-cleansolve.png';
+ cs.alt = 'Clean Solve';
+ // 语义：有 AC 就有 Accepted；AC 之外还有 WA/TLE/RE/CE 就不算 Clean Solve
+ cs.dataset.earned = cleanSolve ? 'true' : 'false';
+ wrap.append(cs);
+ return wrap;
+}
+
+/**
+ * 轨道号码（"03"）。
+ *
+ * 官方不是写文字，是【数字精灵】+【同位的一块实心白块】两层：
+ * prefab: TrackNumber/UI_Track/NUM_TrackNumber UI_CMN_Num_26p_N 50x28 抓图
+ * TrackNumber/UI_Track/NUM_TrackNumber_Outline UI_CMN_Num_26p_Outline_N 50x28 抓图（同位）
+ * 反编译: KOP_ResultTrackData 里 `_trackNoImages[0].ChangeSprite(trackNumber)`
+ * —— _trackNoImages 是数组，每个元素显示一位数字
+ *
+ * ⚠️ 那个 Outline **不是描边图，是一整块实心白**（实测不透明 56.8%，ASCII 是一片白）。
+ * 它靠 MultipleImage 的 Subtract 混合（MultiImageBlendType.Subtract / _BlendOp=2）
+ * 去"减掉"周围做镂空，**不能当普通图层叠上去** —— 叠上去数字会被整块盖住变全白。
+ * 所以这里只画数字，描边用 CSS drop-shadow 近似；等解出 Subtract 的真实参数再换。
+ * 数字本身是白色，这里按像素尺寸从 prefab 推：容器 60x34 原生放两位 => 每格 30x34 原生。
+ */
+export function trackNumber(value) {
+ const row = document.createElement('span');
+ row.className = 'mm-track-num';
+ for (const ch of String(value)) {
+ if (!/[0-9]/.test(ch)) continue;
+ const cell = document.createElement('span');
+ cell.className = 'mm-track-digit';
+ cell.append(glyph(`UI_CMN_Num_26p_${ch}.png`, { className: 'mm-glyph mm-track-face' }));
+ row.append(cell);
+ }
+ return row;
+}
+
+/**
+ * 段位：从 D 到 SSS+。
+ *
+ * 官方只有 D/C/B/A/S 五张**单字**精灵，多字母的段位是重复拼出来的（SS/SSS、AA/AAA、BB/BBB）。
+ * S 另有 Blue/Red/Yellow 三个配色：**三个 S 用主色 + Blue + Red，少于三个用 Yellow**
+ * （客户端里就是这么配的）。末尾带 + 时补一张 UI_RSL_Rank_Plus。
+ *
+ * 注意：名字里带 _White 的那几张**不是白字**，是段位动画的碎裂特效，别拿来当字母用。
+ */
+export function rankWord(rank) {
+ const word = document.createElement('span');
+ word.className = 'mm-rank-word';
+ const raw = String(rank ?? '').toUpperCase();
+ const plus = raw.endsWith('+');
+ const letters = raw.replace(/\+$/, '');
+ if (!letters || ![...letters].every((c) => RANK_LETTERS.has(c))) {
+ // 认不出来的段位（例如 AC）原样显示，至少不会画错
+ word.textContent = String(rank ?? '');
+ return word;
+ }
+ const files = letters === 'SSS'
+ ? ['UI_RSL_Rank_S.png', 'UI_RSL_Rank_S_Blue.png', 'UI_RSL_Rank_S_Red.png']
+ : [...letters].map((letter) => letter === 'S'
+ ? 'UI_RSL_Rank_S_Yellow.png'
+ : `UI_RSL_Rank_${letter}.png`);
+ // ⭐ 多字母段位里，后面的字母比第一个小 —— 这是官方的排法，不是等大重复。
+ // 量官方预制整图（UI_GAM_Rank_*）的内容宽度：
+ // A 单字 35 | AA 58 | AAA 82 => AAA 只有 3x35 的 78%
+ // B 单字 30 | BB 52 | BBB 75 => BBB 只有 3x30 的 83%
+ // S 单字 30 | SS 58 | SSS 85 => SSS 是 3x30 的 94%（基本等大）
+ // 所以 A/B 族的第 2 个起缩到 0.72，S 族保持等大。
+ const smallTail = letters[0] === 'A' || letters[0] === 'B';
+ files.forEach((file, i) => {
+ const cls = 'mm-rank-letter' + (smallTail && i > 0 ? ' mm-rank-letter-sm' : '');
+ word.append(glyph(file, { className: cls }));
+ });
+ if (plus) word.append(glyph('UI_RSL_Rank_Plus.png', { className: 'mm-rank-plus' }));
+ return word;
+}
+
+/**
+ * 大数字：'98.7654' 或 '100.1445%'。
+ *
+ * 官方这套排法和普通文字排版不一样，是**两套图集混排**（对着抓图核过）：
+ * · 整数部分用大号图集 1110000（格子 72x98，字形 103 原生）
+ * · 小数点和小数部分用小号图集 0001111（格子 62x82，字形 83 原生）
+ * · '%' 用单独的 UI_RSL_Score_Per_*（58x54）
+ * 三者的格子**底边对齐**，所以整行共用一条基线；缩放比 98 : 82 : 54。
+ *
+ * 配色由达成率决定：< 80 蓝、>= 97 金、其余红。
+ */
+export function scoreNumber(text, { colour = 'Gold' } = {}) {
+ const row = document.createElement('span');
+ row.className = 'mm-number';
+ const value = String(text);
+ const dot = value.indexOf('.');
+ const whole = dot === -1 ? value.replace('%', '') : value.slice(0, dot);
+ const fraction = dot === -1 ? '' : value.slice(dot + 1).replace('%', '');
+ const hasPercent = value.endsWith('%');
+ // '%' 只有 Gold/Red/Blue 三个变体，没有 Base，缺的落到 Gold
+ const percentColour = ['Gold', 'Red', 'Blue'].includes(colour) ? colour : 'Gold';
+
+ const digit = (ch, cls) => {
+ const cell = ch === '.' ? (DOT_CELL[colour] ?? DIGIT_CELL['.']) : DIGIT_CELL[ch];
+ if (cell === undefined) return null;
+ const atlas = cls === 'mm-number-int' ? '1110000' : '0001111';
+ return glyph(`UI_NUM_Score_${atlas}_${colour}_${cell}.png`, { className: 'mm-glyph ' + cls });
+ };
+ for (const ch of whole) {
+ const img = digit(ch, 'mm-number-int');
+ if (img) row.append(img);
+ }
+ if (fraction) {
+ // 小数点单独挂一个 mm-number-dot：它在格子里的留白和数字完全不是一回事
+ // （左16.9 / 右15.4 / 底12.3 px，数字是 2.3 / 2.3 / 3.8），
+ // 排版要单独压、两侧单独收，见 dx-result.css 里那段「达成率大数字」。
+ const point = digit('.', 'mm-number-frac mm-number-dot');
+ if (point) row.append(point);
+ for (const ch of fraction) {
+ const img = digit(ch, 'mm-number-frac');
+ if (img) row.append(img);
+ }
+ }
+ if (hasPercent) row.append(glyph(`UI_RSL_Score_Per_${percentColour}.png`, { className: 'mm-glyph mm-number-percent' }));
+ return row;
+}
+
+/** 达成率对应哪套配色：< 80 蓝、>= 97 金、其余红 */
+export function achievementColour(value) {
+ const number = Number(value);
+ if (!Number.isFinite(number)) return 'Gold';
+ if (number >= 97) return 'Gold';
+ if (number < 80) return 'Blue';
+ return 'Red';
+}
+
+/* ------------------------------------------------------------------ *
+ * 题目卡（原「乐曲卡」，prefab 里是 UI_MusicData）
+ * ------------------------------------------------------------------ */
+
+/**
+ * 卡片底板：官方 `UI_RSL_MBase_*`，745x142 原生，一张一个难度色。
+ *
+ * prefab 量出来的构件（原生 px，相对底板左上角）——下面 CSS 里的百分比都按这张表算：
+ * IMG_Background UI_RSL_MBase_ADV 整张 745x142
+ * JacketImage 槽位 x11..95 / y47..131（板上烤着一块纯黑，游戏里拿曲绘盖住）
+ * Mask 深蓝标题条 x106..709 / y88..128（也烤在板上）
+ * 难度名 x≈106..335 / y≈50..80（BASIC/ADVANCED/EXPERT/MASTER/…）
+ * GameType UI_RSL_MBase_Parts_01 84x28 → 摆在 x≈488..572 / y≈51..75
+ *
+ * ⚠️ 板上烤着难度名，题目卡不能直接显示它 —— 见 `problemCard()` 里那块 cover：
+ * 用同一张板的**干净底色**把那一小段盖掉，位置也是按 prefab 量的。
+ *
+ * ⚠️ 官方七张板（BSC/ADV/EXP/MST/MST_Re/UTG/DMY）里**没有蓝也没有青**
+ * —— maimai 的难度色本来就没有蓝。所以按色相挑一张最近的板，
+ * 再用 saturate()+hue-rotate() 把板面主色拉到 cfRatingColor 那一档的颜色上。
+ * 每组参数都是按 CSS 滤镜矩阵解出来的（sRGB 误差 < 25/255）：
+ * green 板面 #45c124 → #4aa85c cyan #45c124 → #3fa8c4
+ * blue #9f51dc → #4a7fe0 violet #9f51dc → #8b6cf0
+ * orange #ffba01 → #f08c3a red #ff5a66 → #e8564f
+ * gray #969696 → #7b8391
+ * 深蓝标题条会被这个滤镜带偏，所以脚本另外压一条自己的 navy（`.dx-result-track-bar`）。
+ */
+const CARD_TONES = {
+ green: { plate: 'UI_RSL_MBase_BSC.png', level: 'BSC', field: '#45c124', filter: 'saturate(0.66) hue-rotate(15deg)' },
+ cyan: { plate: 'UI_RSL_MBase_BSC.png', level: 'BSC', field: '#45c124', filter: 'saturate(0.68) hue-rotate(79deg)' },
+ blue: { plate: 'UI_RSL_MBase_MST.png', level: 'MST', field: '#9f51dc', filter: 'saturate(0.98) hue-rotate(-44deg)' },
+ violet: { plate: 'UI_RSL_MBase_MST.png', level: 'MST', field: '#9f51dc', filter: 'saturate(1.08) hue-rotate(-14deg)' },
+ orange: { plate: 'UI_RSL_MBase_ADV.png', level: 'EXP', field: '#ffba01', filter: 'saturate(1.2) hue-rotate(-37deg)' },
+ red: { plate: 'UI_RSL_MBase_EXP.png', level: 'EXP', field: '#ff5a66', filter: 'saturate(0.9) hue-rotate(12deg)' },
+ gray: { plate: 'UI_RSL_MBase_DMY.png', level: 'MST', field: '#969696', filter: 'saturate(0) brightness(0.87)' },
+ /* 未评级（题目还没难度）：底板用官方 **UTAGE**（宴）卡 UI_RSL_MBase_UTG.png（745x141）。
+ 它的轮廓和灰 DMY（板上烤着 DUMMY）**逐点相同**（alpha 包围盒、圆盘拟合完全一致），
+ 差别只有配色：UTG 板面是粉紫，板上烤着「U・TA・GE」（x110..243/y53..70，
+ 落在 cover 那块补丁 x96..304/y41..87 里，会被完全盖掉）。
+ 所以灰档配 DMY 其实等于没换 —— 要的是 UTAGE 那张卡本身。
+ filter 取 none：那套 saturate/hue-rotate 是为了把七张难度板的板面主色拉到
+ CF 那一档的颜色上（蓝/青/绿…），unrated 没有对应档位，UTAGE 卡是什么色就该是什么色。
+ field #ff86fe：这是 cover 那圈**紧邻的板面平色**，和另外五张板同一个取法
+ （BSC→#45c124、MST→#9f51dc、DMY→#969696 都是这么取的，逐个核对过）。
+ ⚠️ 不能拿 cover **里面**的主色：UTG 那块补丁里压着一片洋红 (249,45,218)，
+ 而补丁四周是浅粉 (255,134,254)，照搬里面那块会在标题左边留下一个
+ 深洋红的方块（上下两条边都露）。补丁必须和**外面**接得上。
+ ⚠️ level 仍是 MST：图集里没有 UTG 族（只有 BSC/EXP/MST/MST_Re），
+ 「LV」那个字母只能借一族，MST 的紫最接近这张粉卡。 */
+ unrated: { plate: 'UI_RSL_MBase_UTG.png', level: 'MST', field: '#ff86fe', filter: 'none' },
+};
+
+/** tone → { plate, level, field, filter }，认不出来的一律按未评级（官方那张灰 DMY） */
+export function cardTone(tone) {
+ return CARD_TONES[tone] ?? CARD_TONES.unrated;
+}
+
+/** 等级数字图集 `UI_CMN_MusicLevel_{族}_{格}.png` 的格子号：0-9 是数字，14 是「LV」 */
+const LEVEL_CELL = { '+': 10, '-': 11, ',': 12, '.': 13, LV: 14 };
+
+/** 难度未知时顶在数字位置上的那个字。图集里没有问号（15 格 = 0-9 + - , . LV），只能排字 */
+const UNKNOWN_LEVEL = '?';
+
+/** 「?」那颗字。样式在 dx-result.css 的 .mm-level-unknown（按数字精灵的白芯配大小/基线） */
+function unknownLevelMark() {
+ const node = document.createElement('span');
+ node.className = 'mm-level-unknown';
+ node.textContent = UNKNOWN_LEVEL;
+ node.setAttribute('aria-label', '难度待定');
+ return node;
+}
+
+/**
+ * 官方等级数字。等宽格子 48x60，数字/符号直接按格子号取图。
+ * ⚠️ 第 14 格画的是 **LV** 两个字母（不是任务描述里说的 '%'）——
+ * 对着官方抓图核过：卡片右端那个小 `LV` 就是这个格子，所以不用 UI_KLD_MSS_Level_*
+ * （那五张是「LEVEL」美字的**噪声动画帧**，单张拿出来是散开的色偏切片）。
+ * `value` 里的 '?' 走 unknownLevelMark()（文字，不是精灵），其余认不出的字符跳过。
+ *
+ * 结构：`.mm-level` 里两个**各自绝对定位**的子节点 ——
+ * `.mm-level-lv` LV，钉死在卡片里一个固定 x（见 dx-result.css）
+ * `.mm-level-digits` 这一串数字（或那个 `?`），整体以圆盘圆心为心居中
+ * 分开包一层是必须的：LV 固定、数字居中，两者不能还在同一条 flex 行里，
+ * 否则 LV 的 x 一定会跟着数字宽度跑（改之前就是这样）。见 dx-result.css 那段注释。
+ */
+export function levelNumber(value, { tone = 'unrated' } = {}) {
+ const { level } = cardTone(tone);
+ const row = document.createElement('span');
+ row.className = 'mm-level';
+ const cell = ch => (/^[0-9]$/.test(ch) ? Number(ch) : LEVEL_CELL[ch]);
+ const lv = cell('LV');
+ row.append(glyph(`UI_CMN_MusicLevel_${level}_${lv}.png`, { className: 'mm-level-lv' }));
+ const digits = document.createElement('span');
+ digits.className = 'mm-level-digits';
+ for (const ch of String(value)) {
+ if (ch === UNKNOWN_LEVEL) { digits.append(unknownLevelMark()); continue; }
+ const index = cell(ch);
+ if (index === undefined) continue;
+ digits.append(glyph(`UI_CMN_MusicLevel_${level}_${index}.png`, { className: 'mm-level-digit' }));
+ }
+ row.append(digits);
+ return row;
+}
+
+/** GameType 徽章（官方 `UI_RSL_MBase_Parts_01`，就是抓图上那块「でらっくす」小牌） */
+export function gameTypeBadge() {
+ const wrap = document.createElement('span');
+ wrap.className = 'mm-gametype';
+ wrap.append(glyph('UI_RSL_MBase_Parts_01.png'));
+ return wrap;
+}
+
+/**
+ * 题目卡内容：官方底板 + 官方等级数字。
+ *
+ * 结构（外层 `.dx-result-track` 保留在弹窗里，只往里塞这些东西）：
+ * art 底板的画布 —— saturate/hue-rotate 只作用在这一层
+ * plate 底板本体
+ * cover 盖掉板上烤着的难度名（用同一张板的干净底色，所以滤镜一加还是严丝合缝）
+ * bar 深蓝标题条（自己压的 navy，免得被滤镜带偏）
+ * slot 曲绘槽 → 放题号
+ * heading 难度名那一段 → 放赛制/平台
+ * badge でらっくす
+ * title 标题条 → 放题名
+ * level 右侧圆盘 → LV + 难度分
+ *
+ * `difficulty` 为 null 时（题目还没难度）不画数字，等级那一格画一个文字「?」，
+ * 底板落到 UTAGE 那张卡（`tone` 会是 unrated，见 CARD_TONES.unrated）。
+ *
+ * `kind` 是**已经翻好的字面**（练习类型：INDEPENDENT/REPLAY/…，调用方从 dx-timer.js 的
+ * PRACTICE_KIND_LABEL 取），`platform` 是**平台 key**（codeforces/atcoder/…，不是字面），
+ * 由 problem-source.js 的 PLATFORM_LABELS 翻成卡片上的字。给 key 而不是字面，
+ * 是为了让「平台词」永远有值：不传/认不出都会落回那边的默认值，卡片不会空一格。
+ * 两个词都不在这份模板里写死。
+ */
+export function problemCard({ problemId = '', kind = '', platform = '', title = '', difficulty = null, tone = 'unrated' } = {}) {
+ const info = cardTone(tone);
+ const card = document.createDocumentFragment();
+ const span = (className, text) => {
+ const node = document.createElement('span');
+ node.className = className;
+ if (text !== undefined) node.textContent = text;
+ return node;
+ };
+
+ const art = span('dx-result-track-art');
+ art.setAttribute('aria-hidden', 'true');
+ art.append(span('dx-result-track-plate'), span('dx-result-track-cover'));
+ const bar = span('dx-result-track-bar');
+ bar.setAttribute('aria-hidden', 'true');
+
+ const slot = span('dx-result-track-slot');
+ slot.textContent = String(problemId).replace(/[:\s]/g, '');
+ slot.setAttribute('aria-label', `题目 ${problemId}`);
+
+ // 难度名那一段换成赛制 + 平台：左边的题号已经在曲绘槽里了，这里不重复。
+ // 两个词都来自 key→字面的表，不在模板里写死字符串（见上面的参数说明）。
+ const heading = span('dx-result-track-heading');
+ heading.append(span('dx-result-kind', kind), span('dx-result-problem', platformLabel(platform)));
+
+ const name = document.createElement('h3');
+ name.className = 'dx-result-name';
+ const titleText = span('dx-result-title', String(title || problemId));
+ name.append(titleText);
+
+ const level = span('dx-result-level dx-result-level-disc');
+ if (Number.isFinite(difficulty)) level.append(levelNumber(String(difficulty), { tone }));
+ /* 没难度：底板是 UTAGE 卡（见 CARD_TONES.unrated），等级那一格画「?」——
+ 官方图集里没有问号精灵，用文字顶上，字号/基线对着数字精灵的白芯配（见 CSS）。
+ 原来这里退回文字「待定」（.dx-result-level-pending，样式还留在 dx-result.css 里，
+ 要换回来改这一行就行）：「LV ?」和「待定」说的是同一件事，并排写重复；
+ 而且两段加起来会把整组往左推 38px（1200 视口实测盒 x 683 → 645）。 */
+ else level.append(levelNumber(UNKNOWN_LEVEL, { tone }));
+
+ card.append(art, bar, slot, heading, gameTypeBadge(), name, level);
+ return card;
+}
+
diff --git a/public/mascot.css b/public/mascot.css
new file mode 100644
index 0000000..2bc361c
--- /dev/null
+++ b/public/mascot.css
@@ -0,0 +1,99 @@
+/**
+ * 看板娘设置弹窗的样式。
+ *
+ * 和 dx-result.css 分开：这一套是全站设置，任何页面都能挂；结算弹窗里那块看板娘的
+ * 样式跟着结算走，写在 dx-result.css。配色沿用站点既有的深浅主题变量。
+ */
+
+.mm-mascot-dialog {
+ width: min(460px, calc(100vw - 32px));
+ padding: 0;
+ border: 1px solid var(--line, #d5d9e6);
+ border-radius: 14px;
+ background: var(--panel, #fff);
+ color: var(--ink, #1b1f2a);
+ box-shadow: 0 24px 70px #0308244d;
+}
+
+.mm-mascot-dialog::backdrop { background: #071126a8; backdrop-filter: blur(4px); }
+
+.mm-mascot-form { position: relative; padding: 18px 20px 16px; }
+
+.mm-mascot-form h2 { margin: 0 0 8px; font-size: 17px; }
+
+.mm-mascot-close {
+ position: absolute;
+ right: 10px;
+ top: 10px;
+ width: 28px;
+ height: 28px;
+ border: 1px solid var(--line, #d5d9e6);
+ border-radius: 50%;
+ background: transparent;
+ color: inherit;
+ font-size: 19px;
+ line-height: 1;
+ cursor: pointer;
+}
+
+.mm-mascot-hint { margin: 0 0 12px; font-size: 12.5px; line-height: 1.6; opacity: .82; }
+.mm-mascot-hint a { color: var(--accent, #2f6fed); }
+.mm-mascot-hint code {
+ padding: 1px 4px;
+ border-radius: 4px;
+ background: var(--code-bg, #00000010);
+ font-size: 12px;
+}
+
+.mm-mascot-label { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 700; }
+
+.mm-mascot-input {
+ width: 100%;
+ padding: 8px 10px;
+ border: 1px solid var(--line, #d5d9e6);
+ border-radius: 8px;
+ background: var(--input-bg, #f7f8fc);
+ color: inherit;
+ font: 12.5px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
+ word-break: break-all;
+}
+
+.mm-mascot-input:focus { outline: 2px solid var(--accent, #2f6fed); outline-offset: 1px; }
+
+/* 预览固定在一条高度里：看板娘是竖长图，高度不定会把弹窗顶来顶去 */
+.mm-mascot-preview {
+ display: grid;
+ place-items: center;
+ height: 190px;
+ margin: 12px 0;
+ border: 1px dashed var(--line, #d5d9e6);
+ border-radius: 10px;
+ overflow: hidden;
+ background: var(--input-bg, #f7f8fc);
+}
+
+.mm-mascot-preview-img { max-width: 100%; max-height: 190px; object-fit: contain; }
+
+.mm-mascot-actions { display: flex; justify-content: flex-end; gap: 8px; }
+
+/* 顶栏入口：和深色模式开关并排，沿用同一个圆钮语言 */
+body.mm-theme .mm-mascot-btn {
+ flex: 0 0 auto;
+ height: 44px;
+ margin-left: 6px;
+ padding: 0 16px;
+ border: 3px solid var(--mm-purple, #8b6fd6);
+ border-radius: 100px;
+ background: #fff;
+ color: var(--mm-purple, #6b4bbd);
+ font-size: 13px;
+ font-weight: 800;
+ cursor: pointer;
+}
+
+body.mm-theme .mm-mascot-btn:hover { background: #f3efff; }
+body.mm-theme[data-mm-theme="dark"] .mm-mascot-btn { background: #221c33; color: #d8ccff; }
+body.mm-theme[data-mm-theme="dark"] .mm-mascot-btn:hover { background: #2c2542; }
+
+/* 结算弹窗里的看板娘没加载出来时别留破图 */
+.mm-mascot-failed { display: none; }
diff --git a/public/mascot.js b/public/mascot.js
new file mode 100644
index 0000000..241084f
--- /dev/null
+++ b/public/mascot.js
@@ -0,0 +1,181 @@
+/**
+ * 看板娘：一处全局设置，一处展示。
+ *
+ * 图片来自 lolicount.top —— 那个站按 URL 参数出图（`@用户名` 选人、`theme` 选主题、
+ * `scale`/`fsize` 调大小、`text` 是计数文字）。直接用
引用就行，不走 fetch：
+ *
不会碰上跨域，站上那边换图我们也不用改代码。
+ *
+ * 链路：设置弹窗写 localStorage（mm-mascot）→ 发 mm-mascot-change →
+ * 要展示的地方（目前是结算弹窗）自己重画。无依赖，原生 ESM，和 theme.js 一个路数。
+ *
+ * 站点：https://lolicount.top —— 设置页里给出入口，让用户自己去挑。
+ */
+
+const MASCOT_KEY = 'mm-mascot';
+
+/** 默认看板娘：一串普通的 lolicount.top 图片链接，用户随时可以换成自己的 */
+export const MASCOT_DEFAULT =
+ 'https://lolicount.top/@ttttt?theme=manosaba-ema&fsize=16&scale=1&unshowf=true&text=%7Bn%7D';
+
+/** 站上「获取链接」的入口，设置页引导用户去这里挑 */
+const MASCOT_SITE = 'https://lolicount.top';
+
+/**
+ * 远端图挂了就退回这张本地立绘（仓库自带，不联外网）。
+ *
+ * 不是随便找的占位图：这是客户端里结算画面那位导航角色的立绘
+ * `UI_Navichara_01_P1_02`（524×812 RGBA，全身站姿、底色全透明）——
+ * 结算画面的 `Null_NavicharaRoot` 挂的就是 `Navi_Default` 这一族。
+ * 同族的 02/03/04/05 是同一姿势的几帧表情差分，02 是两眼睁开、
+ * 站得最"正"的那一帧。
+ *
+ * 之前挑过 `UI_ADV_Img_chara155_01_01`（616×1160，撑伞的紫发角色），
+ * 那张本身没问题，但她是淡紫配白，放在成绩板那块近白玻璃后面整片糊掉，
+ * 立绘就"读"不出来了；这一位是红裙 + 黑色条纹袜，浅底板上反差够，
+ * 隔着板子还看得见人。（同族的 `UI_ADV_Img_chara155_01_shadow`
+ * 证明 chara155 那族也是"站到背景上"的图，只是不适合这个底板。）
+ *
+ * 出图路子见 `scripts/extract-result-assets.py`（UnityPy 读 resources.assets
+ * 的 Texture2D），这里只放结果。
+ */
+export const MASCOT_FALLBACK = '/assets/mm-parts/navichara-01-p1-02.png';
+
+export function getMascotUrl() {
+ try {
+ const value = localStorage.getItem(MASCOT_KEY);
+ return value && value.trim() ? value.trim() : MASCOT_DEFAULT;
+ } catch {
+ return MASCOT_DEFAULT;
+ }
+}
+
+export function setMascotUrl(url) {
+ const value = typeof url === 'string' ? url.trim() : '';
+ try {
+ // 空的就删掉键，回到默认；这样「恢复默认」和「填了自己的」共用一条路径
+ if (!value || value === MASCOT_DEFAULT) localStorage.removeItem(MASCOT_KEY);
+ else localStorage.setItem(MASCOT_KEY, value);
+ } catch {
+ /* 隐私模式下写不进去，当次会话照样能用 */
+ }
+ document.dispatchEvent(new CustomEvent('mm-mascot-change', { detail: { url: getMascotUrl() } }));
+}
+
+/**
+ * 造一个看板娘
。
+ *
+ * lolicount.top 给的是 SVG，浏览器能直接在
里画；这里不解析它的内容，
+ * 将来它换成别的位图格式也照用。
+ *
+ * 三级降级：用户链接 → 本地占位图（fallback）→ 彻底藏起来。
+ * 前两级任何一级失败都不会露出浏览器的破图标；最后一级加 .mm-mascot-failed，
+ * 由 mascot.css 设成 display:none —— 布局照样是完整的一块，只是里面没有图。
+ */
+export function mascotImage({ className = '', alt = '看板娘', fallback = MASCOT_FALLBACK } = {}) {
+ const img = document.createElement('img');
+ img.className = className;
+ img.alt = alt;
+ img.loading = 'lazy';
+ img.decoding = 'async';
+ img.referrerPolicy = 'no-referrer';
+ let dead = false; // 已经退到尽头，别再互相触发 error
+ const fail = () => {
+ img.classList.add('mm-mascot-failed');
+ img.alt = '看板娘加载失败，检查一下链接';
+ img.removeAttribute('src');
+ };
+ const show = (url) => {
+ if (!url) { dead = true; fail(); return; }
+ dead = false;
+ img.classList.remove('mm-mascot-failed');
+ img.src = url;
+ };
+ img.addEventListener('error', () => {
+ if (dead) return;
+ // 先退回本地占位图；占位图自己也没了就藏起来，别留破图
+ if (fallback && img.getAttribute('src') !== fallback) { img.src = fallback; return; }
+ dead = true;
+ fail();
+ });
+ show(getMascotUrl());
+ // 设置改了就换图；同一个元素上只挂一次
+ const onchange = (event) => show(event.detail?.url || getMascotUrl());
+ img.addEventListener('mm-mascot-detach', () => document.removeEventListener('mm-mascot-change', onchange));
+ document.addEventListener('mm-mascot-change', onchange);
+ return img;
+}
+
+let settingsDialog = null;
+
+/** 打开看板娘设置：一个链接输入框 + 实时预览 + 去站上挑的引导 */
+export function openMascotSettings() {
+ if (!settingsDialog) settingsDialog = buildSettings();
+ const input = settingsDialog.querySelector('.mm-mascot-input');
+ const preview = settingsDialog.querySelector('.mm-mascot-preview');
+ input.value = getMascotUrl();
+ preview.replaceChildren(mascotImage({ className: 'mm-mascot-preview-img' }));
+ if (!settingsDialog.open) settingsDialog.showModal();
+ input.focus();
+ input.select();
+}
+
+function buildSettings() {
+ const dialog = document.createElement('dialog');
+ dialog.className = 'mm-mascot-dialog';
+ dialog.setAttribute('aria-labelledby', 'mmMascotTitle');
+ dialog.innerHTML = `
+
`;
+ const input = dialog.querySelector('.mm-mascot-input');
+ const preview = dialog.querySelector('.mm-mascot-preview');
+
+ const redraw = () => {
+ // 预览走同一个地址，所见即所得；这里不写 localStorage，避免边打字边存进半截链接
+ const img = document.createElement('img');
+ img.className = 'mm-mascot-preview-img';
+ img.alt = '看板娘预览';
+ img.referrerPolicy = 'no-referrer';
+ img.src = input.value.trim() || MASCOT_DEFAULT;
+ preview.replaceChildren(img);
+ };
+
+ dialog.querySelector('.mm-mascot-save').addEventListener('click', () => {
+ setMascotUrl(input.value);
+ dialog.close();
+ });
+ dialog.querySelector('.mm-mascot-reset').addEventListener('click', () => {
+ input.value = MASCOT_DEFAULT;
+ redraw();
+ });
+ input.addEventListener('input', redraw);
+ dialog.addEventListener('close', () => {
+ // 关闭时丢弃没保存的编辑，免得下次打开显示的是没生效的内容
+ input.value = getMascotUrl();
+ });
+ document.body.append(dialog);
+ return dialog;
+}
+
+const button = document.getElementById('mmMascotBtn');
+if (button) button.addEventListener('click', () => openMascotSettings());
+
+// ?mascot=1 直接打开设置：截图、演示、自动化测试都用得上
+if (new URLSearchParams(location.search).get('mascot') === '1') {
+ if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', () => openMascotSettings());
+ else openMascotSettings();
+}
diff --git a/public/mm-result-bg.html b/public/mm-result-bg.html
new file mode 100644
index 0000000..d066993
--- /dev/null
+++ b/public/mm-result-bg.html
@@ -0,0 +1,279 @@
+
+
+
maimai DX 结算 · 纯动态背景
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
评级
+ · ?rank= | ?ui=0
+
diff --git a/public/problem-source.js b/public/problem-source.js
new file mode 100644
index 0000000..dfbe284
--- /dev/null
+++ b/public/problem-source.js
@@ -0,0 +1,39 @@
+/**
+ * 结算卡片那行小字里的**平台词**：平台 key → 卡片上印的字面。
+ *
+ * 卡片右上那行小字是两个词：练习类型（INDEPENDENT / REPLAY / …，由 dx-timer.js 的
+ * PRACTICE_KIND_LABEL 给）+ 判题平台（这一份）。平台词原来是写死在
+ * maimai-glyphs.js 的 problemCard() 里的字符串 'CODEFORCES'，以后题目会来自别的判题站，
+ * 所以收到这张表里，全站只有这一处决定卡片印什么。
+ *
+ * key 用的是 `src/fetchers/registry.ts` 里那套平台标识（accounts.platform 用的也是它），
+ * 别另造一套拼法。字面走**全大写拉丁**：底板那一格官方烤的是难度名（BASIC/EXPERT…），
+ * 都是大写拉丁，这里跟着它。注意这和 stat-labels.js 的 platformNames 不是一件事 ——
+ * 那是账号/统计页的中文名（Codeforces、洛谷、码蹄集），卡片要的是板上的短词，
+ * 分开放，谁的措辞要改都不会带偏对方。
+ *
+ * 今天服务端只会发 Codeforces（见 dx-timer.js 里的说明），所以实际渲染仍然是 CODEFORCES；
+ * 以后接别的判题站时，只要那边把 platform 一起发下来、
+ * 调用方把 key 传给 problemCard({ platform })，这张表直接就能用。
+ */
+export const PLATFORM_LABELS = {
+ codeforces: 'CODEFORCES',
+ atcoder: 'ATCODER',
+ leetcode: 'LEETCODE',
+ 'leetcode-cn': 'LEETCODE CN',
+ luogu: 'LUOGU',
+ nowcoder: 'NOWCODER',
+ matiji: 'MATIJI',
+};
+
+/** 没有平台信息时（今天就是这种）卡片印哪一个。 */
+export const DEFAULT_PLATFORM = 'codeforces';
+
+/**
+ * 平台 key → 卡片上的字面。空值、认不出的 key 一律落回 DEFAULT_PLATFORM：
+ * 卡片这一格不能空着。
+ */
+export function platformLabel(platform) {
+ const key = String(platform ?? '').trim().toLowerCase();
+ return PLATFORM_LABELS[key] ?? PLATFORM_LABELS[DEFAULT_PLATFORM];
+}
diff --git a/public/stat-charts.js b/public/stat-charts.js
index 14f7410..3e76789 100644
--- a/public/stat-charts.js
+++ b/public/stat-charts.js
@@ -1,7 +1,15 @@
const colors = ['#5bceac','#62a8ff','#ad93ff','#f2c66d','#f38a96','#68d5e7','#c1cbdd'];
const node = (tag,text,cls) => { const n=document.createElement(tag); if(text)n.textContent=text; if(cls)n.className=cls;return n; };
-const font = 'system-ui, "Microsoft YaHei", sans-serif';
+// 画布里的字也要跟官方那套字体（@font-face 已加载，render 前会 await document.fonts.ready）
+const font = '"M PLUS 1p", "M PLUS 1p Symbols", "Microsoft YaHei", "PingFang SC", sans-serif';
function text(ctx, value, x, y, size=12, color='#a9b8cd',align='left') { ctx.font=`${size}px ${font}`;ctx.fillStyle=color;ctx.textAlign=align;ctx.fillText(String(value),x,y); }
+// 画布上的底色、网格和字号不跟 CSS 变量走，得按主题自己取一套；
+// 切换主题时由 stats-page 重新画一遍（导出图片始终用深色海报底，不受这里影响）
+const PALETTE = {
+ light: { plot:'#f2eefb', grid:'#ded6ee', track:'#e7e1f4', text:'#5a5470', muted:'#7b7490', value:'#2f2a44', stroke:'#00000022' },
+ dark: { plot:'#141e2e', grid:'#27364b', track:'#233147', text:'#a9b8cd', muted:'#8798b2', value:'#e0eafb', stroke:'#ffffff55' },
+};
+const pal = () => PALETTE[document.documentElement.dataset.mmTheme === 'dark' ? 'dark' : 'light'];
function shorten(value,n=24) { return value.length>n ? value.slice(0,n-1)+'…' : value; }
export function chart(title, input, note='', type='bar') {
@@ -11,16 +19,16 @@ export function chart(title, input, note='', type='bar') {
const height=type==='bar' ? Math.max(160,rows.length*29+30) : type==='donut' ? Math.max(250,rows.length*27+40) : 260;
const canvas=node('canvas',null,'stat-canvas');canvas.width=1040;canvas.height=height*2;canvas.setAttribute('role','img');
canvas.setAttribute('aria-label',`${title}。${rows.map(r=>`${r.label}：${r.count}`).join('；')}`);
- const ctx=canvas.getContext('2d');ctx.scale(2,2);ctx.fillStyle='#141e2e';ctx.fillRect(0,0,520,height);
- if (!total) {text(ctx,'此范围暂无数据',260,height/2,15,'#8798b2','center');}
+ const ctx=canvas.getContext('2d');ctx.scale(2,2);const p=pal();ctx.fillStyle=p.plot;ctx.fillRect(0,0,520,height);
+ if (!total) {text(ctx,'此范围暂无数据',260,height/2,15,p.muted,'center');}
else if (type==='donut') {
let angle=-Math.PI/2;
rows.forEach((r,i)=> {const end=angle+r.count/total*Math.PI*2;ctx.beginPath();ctx.arc(115,125,76,angle,end);ctx.strokeStyle=colors[i%colors.length];ctx.lineWidth=24;ctx.stroke();angle=end;
- ctx.fillStyle=colors[i%colors.length];ctx.fillRect(225,22+i*27,9,9);text(ctx,shorten(r.label,23),243,31+i*27);text(ctx,`${r.count} · ${(r.count/total*100).toFixed(1)}%`,505,31+i*27,11,'#e0eafb','right');});
- text(ctx,total,115,127,30,'#e6edf3','center');text(ctx,'次提交',115,151,12,'#8798b2','center');
+ ctx.fillStyle=colors[i%colors.length];ctx.fillRect(225,22+i*27,9,9);text(ctx,shorten(r.label,23),243,31+i*27,12,p.text);text(ctx,`${r.count} · ${(r.count/total*100).toFixed(1)}%`,505,31+i*27,11,p.value,'right');});
+ text(ctx,total,115,127,30,p.value,'center');text(ctx,'次提交',115,151,12,p.muted,'center');
} else if(type==='line' || type==='columns') {
const left=42,right=500,top=28,bottom=210,axisMax=Math.ceil(max/4)*4;
- for(let i=0;i<=4;i++){const y=bottom-(bottom-top)*i/4;ctx.strokeStyle='#27364b';ctx.beginPath();ctx.moveTo(left,y);ctx.lineTo(right,y);ctx.stroke();text(ctx,axisMax*i/4,left-8,y+4,10,'#8798b2','right');}
+ for(let i=0;i<=4;i++){const y=bottom-(bottom-top)*i/4;ctx.strokeStyle=p.grid;ctx.beginPath();ctx.moveTo(left,y);ctx.lineTo(right,y);ctx.stroke();text(ctx,axisMax*i/4,left-8,y+4,10,p.muted,'right');}
const x=i=>left+(right-left)*(rows.length===1?0.5:i/(rows.length-1));
const y=r=>bottom-r.count/axisMax*(bottom-top);
if(type==='line') {
@@ -28,10 +36,10 @@ export function chart(title, input, note='', type='bar') {
ctx.lineTo(x(rows.length-1),bottom);ctx.lineTo(x(0),bottom);ctx.closePath();const g=ctx.createLinearGradient(0,top,0,bottom);g.addColorStop(0,'#5bceac55');g.addColorStop(1,'#5bceac00');ctx.fillStyle=g;ctx.fill();
rows.forEach((r,i)=>{if(rows.length<=40){ctx.beginPath();ctx.arc(x(i),y(r),3,0,Math.PI*2);ctx.fillStyle=colors[0];ctx.fill();}});
} else rows.forEach((r,i)=>{const w=(right-left)/rows.length;ctx.fillStyle=colors[1];ctx.fillRect(left+i*w+2,y(r),Math.max(1,w-4),bottom-y(r));});
- rows.forEach((r,i)=>{if(i===0||i===rows.length-1||i%Math.max(1,Math.ceil(rows.length/6))===0) text(ctx,r.label.length>7?r.label.slice(5):r.label,type==='line'?x(i):left+(i+.5)*(right-left)/rows.length,233,10,'#8798b2','center');});
- text(ctx,'提交次数',left,14,10);
+ rows.forEach((r,i)=>{if(i===0||i===rows.length-1||i%Math.max(1,Math.ceil(rows.length/6))===0) text(ctx,r.label.length>7?r.label.slice(5):r.label,type==='line'?x(i):left+(i+.5)*(right-left)/rows.length,233,10,p.muted,'center');});
+ text(ctx,'提交次数',left,14,10,p.muted);
} else {
- rows.forEach((r,i)=>{const y=20+i*29; text(ctx,shorten(r.label,25),5,y+12,12);ctx.fillStyle='#233147';ctx.fillRect(195,y,250,12);ctx.fillStyle=r.color||colors[i%colors.length];ctx.fillRect(195,y,250*r.count/max,12);if(r.color){ctx.strokeStyle='#ffffff55';ctx.lineWidth=1;ctx.strokeRect(195,y,250*r.count/max,12);}text(ctx,r.count,508,y+12,12,'#e0eafb','right');});
+ rows.forEach((r,i)=>{const y=20+i*29; text(ctx,shorten(r.label,25),5,y+12,12,p.text);ctx.fillStyle=p.track;ctx.fillRect(195,y,250,12);ctx.fillStyle=r.color||colors[i%colors.length];ctx.fillRect(195,y,250*r.count/max,12);if(r.color){ctx.strokeStyle=p.stroke;ctx.lineWidth=1;ctx.strokeRect(195,y,250*r.count/max,12);}text(ctx,r.count,508,y+12,12,p.value,'right');});
}
const viewport=node('div',null,'stat-canvas-frame');viewport.append(canvas);box.append(viewport);
const detail=node('details',null,'chart-values');detail.append(node('summary','查看完整数据'));
diff --git a/public/stats-page.js b/public/stats-page.js
index c4b2455..6f0cabc 100644
--- a/public/stats-page.js
+++ b/public/stats-page.js
@@ -12,6 +12,9 @@ const heatmap = initHeatmap(document.getElementById('heatmapHost'), syncUrl);
let revision = 0;
let heatRevision = 0;
let detailReady = false, heatReady = false;
+// 图表是画布画的，换主题得按新配色重画一遍（数据没变，直接用上一次的响应）
+let lastAnalytics = null;
+document.addEventListener('mm-theme-change', () => { if (lastAnalytics) analytics.render(lastAnalytics); });
const saveButton = document.getElementById('saveStatsImage');
const updateSave = () => { saveButton.disabled = !detailReady || !heatReady; };
saveButton.addEventListener('click', async () => {
@@ -51,6 +54,7 @@ async function refresh(includeHeat = true, background = false) {
if (platform.value) params.platform = platform.value;
const detail = get('/api/stats', params).then(body => {
if (current !== revision) return;
+ lastAnalytics = body.analytics;
analytics.render(body.analytics);
renderToday(body.today);
detailReady = true; updateSave();
diff --git a/public/stats.html b/public/stats.html
index 173686e..4784c9e 100644
--- a/public/stats.html
+++ b/public/stats.html
@@ -3,19 +3,21 @@
-
+
+
Algorithm DX · 练习数据
-
-
+
+
-
+
+
@@ -40,5 +46,7 @@
+
+
diff --git a/public/theme-dark.css b/public/theme-dark.css
new file mode 100644
index 0000000..a2621fb
--- /dev/null
+++ b/public/theme-dark.css
@@ -0,0 +1,383 @@
+/* Algorithm DX · 深色模式
+ *
+ * 只在 时生效，作为 theme.css 之后的一层「同结构换材质」：
+ * 选择器都带 [data-mm-theme="dark"] 前缀，权重高于 theme.css 的 body.mm-theme 规则，
+ * 所以浅色那一套一个字节都不用改。
+ *
+ * 背景同样是官方那份动态背景，只是换成夜版贴图：theme.js 给 iframe 发
+ * postMessage({mmTheme:'dark'})，bg.html 挂上 theme-night.css（见那两个文件）。
+ *
+ * 底色沿用夜景：深靛蓝面板 + 官方那套紫/粉横条与 14px 硬阴影；卡片、输入框、气泡、
+ * 表格、说明卡全部转深色，正文色跟着 token 一起翻。
+ *
+ * 不翻的两类「成品屏」：段位卡/题库卡的卡面（styles.css 里写死的深色渐变）和点开后的
+ * 成绩单（.dx-result / .dan-result-*）—— 它们本来就是一张画好的屏，明暗两版都保留自己的脸，
+ * 翻成夜版反而两不像；外壳（弹窗遮罩、关闭钮）照常跟主题。
+ */
+
+/* ============ 1. 调色 ============ */
+
+[data-mm-theme="dark"] {
+ color-scheme: dark;
+
+ /* 夜景里直接用的几档色（与 assets/night/sky.png 同源） */
+ --mm-night: #101538;
+ --mm-night-plate: #1b2148; /* 顶栏胶囊 */
+ --mm-night-surface: #191e42; /* 大盒子 */
+ --mm-night-surface-2: #1d2348; /* 盒子里的块、输入框 */
+ --mm-night-surface-3: #232a55; /* 再抬一层：hover、选中 */
+ --mm-night-line: rgba(255, 255, 255, .12);
+ --mm-night-line-soft: rgba(255, 255, 255, .08);
+ --mm-night-ink: #eceefb;
+ --mm-night-dim: #c6cbe8;
+ --mm-night-muted: #9aa0c4;
+
+ /* 官方调色在深色底上的几处调整 */
+ --mm-navy: #e3e7ff; /* 这个 token 在本站当「标题色」用 */
+ --mm-ink: #eceefb;
+ --mm-grey: rgba(255, 255, 255, .18);
+ --mm-purple-tint: #231f4c;
+ --mm-purple-deep: #d3a1ff;
+ /* 只改硬阴影的颜色，偏移留给 theme.css 里那三档 vw 阶梯 */
+ --mm-card-shadow-color: rgba(0, 0, 0, .45);
+ --mm-brand-mark: url(/algorithm-dx-icon.svg);
+ --mm-nav-shadow: 10px 10px 0 rgba(0, 0, 0, .45);
+ --mm-soft: 0 10px 26px -14px rgba(0, 0, 0, .65);
+ --mm-gradient: linear-gradient(0deg, #1a1f45 6%, #1d2150 16%, #262a63 30%, #332c72 46%,
+ #402f80 56%, #453a8f 67%, #2a3a74 85%, #151f47 95%);
+
+ /* 仓库既有 token 一并翻过来（styles.css:131-154 那套深色语义在这里复活） */
+ --bg: var(--mm-night);
+ --bg-soft: #141a3c;
+ --panel: var(--mm-night-surface);
+ --panel-2: var(--mm-night-surface-2);
+ --border: var(--mm-night-line);
+ --border-soft: var(--mm-night-line-soft);
+ --text: var(--mm-night-ink);
+ --text-dim: var(--mm-night-dim);
+ --muted: var(--mm-night-muted);
+ --accent: var(--mm-purple-soft);
+ --accent-soft: rgba(186, 94, 234, .18);
+ --ac: #58e08a;
+ --ac-soft: rgba(75, 224, 112, .16);
+ --warn: #ffc266;
+ --warn-soft: rgba(255, 151, 42, .16);
+ --bad: #ff7d92;
+ --bad-soft: rgba(231, 33, 57, .18);
+ --shadow: 8px 8px 0 0 rgba(0, 0, 0, .45);
+ --surface-gradient: var(--mm-night-surface-2);
+ --focus-ring: var(--mm-purple-soft);
+}
+
+html[data-mm-theme="dark"],
+[data-mm-theme="dark"] body { background: var(--mm-night); }
+
+[data-mm-theme="dark"] body.mm-theme {
+ background: var(--mm-night);
+ background-image: var(--mm-gradient);
+ color: var(--mm-night-ink);
+}
+
+[data-mm-theme="dark"] body.mm-theme ::selection { background: var(--mm-purple); color: #fff; }
+
+/* ============ 2. 顶栏与开关 ============ */
+
+[data-mm-theme="dark"] body.mm-theme .site-header {
+ background: var(--mm-night-plate);
+ border-color: var(--mm-night-line-soft);
+ box-shadow: var(--mm-nav-shadow);
+}
+[data-mm-theme="dark"] body.mm-theme .site-header .brand,
+[data-mm-theme="dark"] body.mm-theme .site-header .brand-text h1 { color: var(--mm-night-ink); }
+[data-mm-theme="dark"] body.mm-theme .site-header .nav .btn { color: var(--mm-night-dim); }
+[data-mm-theme="dark"] body.mm-theme .site-header .nav .btn:hover { color: var(--mm-purple-soft); }
+[data-mm-theme="dark"] body.mm-theme .site-header .global-sync-bar {
+ background: var(--mm-night-surface-2);
+ border-color: var(--mm-night-line-soft);
+}
+
+[data-mm-theme="dark"] .mm-menu-btn { background: var(--mm-night-plate); }
+[data-mm-theme="dark"] .mm-menu-btn span { background: var(--mm-pink); }
+[data-mm-theme="dark"] body.mm-menu-open .mm-menu-btn { background: var(--mm-purple); border-color: var(--mm-purple); }
+[data-mm-theme="dark"] body.mm-menu-open .mm-menu-btn span { background: #fff; }
+@media (max-width: 1000px) {
+ [data-mm-theme="dark"] body.mm-theme .site-header .nav { background: var(--mm-night); }
+ [data-mm-theme="dark"] body.mm-theme .site-header .nav .btn:not(:last-child) { border-bottom-color: var(--mm-night-line); }
+}
+
+/* 开关本身：深色下换成太阳，底色转深 */
+[data-mm-theme="dark"] body.mm-theme .mm-theme-btn {
+ border-color: var(--mm-purple-soft);
+ background: var(--mm-night-surface-3);
+ box-shadow: 4px 4px 0 rgba(0, 0, 0, .45);
+}
+[data-mm-theme="dark"] body.mm-theme .mm-theme-btn__moon { opacity: 0; transform: scale(.4) rotate(90deg); }
+[data-mm-theme="dark"] body.mm-theme .mm-theme-btn__sun { opacity: 1; transform: none; }
+[data-mm-theme="dark"] body.mm-theme .mm-theme-btn:hover { background: var(--mm-purple); }
+[data-mm-theme="dark"] body.mm-theme .mm-theme-btn:hover .mm-theme-btn__sun { fill: #fff; }
+
+/* ============ 3. 文字：白色描边换成暗色投影 ============ */
+
+[data-mm-theme="dark"] body.mm-theme .ac-page-heading h2,
+[data-mm-theme="dark"] body.mm-theme .stats-toolbar h2,
+[data-mm-theme="dark"] body.mm-theme .circle-hero h2,
+[data-mm-theme="dark"] body.mm-theme .dan-hero h2,
+[data-mm-theme="dark"] body.mm-theme .help-heading h2,
+[data-mm-theme="dark"] body.mm-theme .dx-page-intro h2,
+[data-mm-theme="dark"] body.mm-theme .circle-feed-head h2,
+[data-mm-theme="dark"] body.mm-theme .today-section-title {
+ color: var(--mm-navy);
+ text-shadow: 0 2px 8px rgba(0, 0, 0, .55);
+}
+[data-mm-theme="dark"] body.mm-theme .analytics-note,
+[data-mm-theme="dark"] body.mm-theme #message,
+[data-mm-theme="dark"] body.mm-theme .dan-msg,
+[data-mm-theme="dark"] body.mm-theme .dan-disclaimer,
+[data-mm-theme="dark"] body.mm-theme .circle-note,
+[data-mm-theme="dark"] body.mm-theme .pager-hint {
+ color: var(--mm-night-dim);
+ text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
+}
+[data-mm-theme="dark"] body.mm-theme .help-page > p {
+ color: var(--mm-night-dim);
+ text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
+}
+[data-mm-theme="dark"] body.mm-theme .help-page .help-heading p,
+[data-mm-theme="dark"] body.mm-theme .help-page > section p,
+[data-mm-theme="dark"] body.mm-theme .help-page > section li,
+[data-mm-theme="dark"] body.mm-theme .help-page details p { color: var(--mm-night-dim); }
+[data-mm-theme="dark"] body.mm-theme .circle-hero p,
+[data-mm-theme="dark"] body.mm-theme .ac-page-heading p,
+[data-mm-theme="dark"] body.mm-theme .stats-toolbar p,
+[data-mm-theme="dark"] body.mm-theme .dx-page-intro p { color: var(--mm-night-muted); }
+/* 数据条里两个写死的深色数字（§9） */
+[data-mm-theme="dark"] body.mm-theme .stat.is-ac .stat-value { color: #5fe08f; }
+[data-mm-theme="dark"] body.mm-theme .stat.is-unac .stat-value { color: #ffc266; }
+
+/* ============ 4. 玻璃板（页头/工具条/侧栏这些浮在背景上的块） ============ */
+
+[data-mm-theme="dark"] body.mm-theme .ac-page-heading,
+[data-mm-theme="dark"] body.mm-theme .stats-toolbar,
+[data-mm-theme="dark"] body.mm-theme .circle-hero,
+[data-mm-theme="dark"] body.mm-theme .dan-hero,
+[data-mm-theme="dark"] body.mm-theme .help-heading,
+[data-mm-theme="dark"] body.mm-theme .help-toc,
+[data-mm-theme="dark"] body.mm-theme .pager,
+[data-mm-theme="dark"] body.mm-theme .dx-page-intro,
+[data-mm-theme="dark"] body.mm-theme .circle-feed-head {
+ background: rgba(19, 24, 52, .88);
+ border: 1px solid var(--mm-night-line);
+ box-shadow: 0 18px 40px -30px rgba(0, 0, 0, .8);
+}
+@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
+ [data-mm-theme="dark"] body.mm-theme .ac-page-heading,
+ [data-mm-theme="dark"] body.mm-theme .stats-toolbar,
+ [data-mm-theme="dark"] body.mm-theme .circle-hero,
+ [data-mm-theme="dark"] body.mm-theme .dan-hero,
+ [data-mm-theme="dark"] body.mm-theme .help-heading,
+ [data-mm-theme="dark"] body.mm-theme .help-toc,
+ [data-mm-theme="dark"] body.mm-theme .pager,
+ [data-mm-theme="dark"] body.mm-theme .dx-page-intro,
+ [data-mm-theme="dark"] body.mm-theme .circle-feed-head {
+ background: rgba(19, 24, 52, .88);
+ -webkit-backdrop-filter: blur(12px) saturate(1.2);
+ backdrop-filter: blur(12px) saturate(1.2);
+ }
+}
+
+/* 落在背景花纹上的那几处小字：浅色层给的是白底板，这里换成夜色底板 */
+[data-mm-theme="dark"] body.mm-theme .app > .analytics-note,
+[data-mm-theme="dark"] body.mm-theme .app > #message,
+[data-mm-theme="dark"] body.mm-theme .app > .dan-msg,
+[data-mm-theme="dark"] body.mm-theme .circle-main > #message,
+[data-mm-theme="dark"] body.mm-theme .heatmap-top > .analytics-note,
+[data-mm-theme="dark"] body.mm-theme .help-page > p {
+ background: var(--mm-night-surface-2);
+ box-shadow: 0 8px 20px -14px rgba(0, 0, 0, .9);
+ text-shadow: none;
+}
+
+/* ============ 5. 官方盒子与通用块 ============ */
+
+[data-mm-theme="dark"] body.mm-theme .filters,
+[data-mm-theme="dark"] body.mm-theme .admin,
+[data-mm-theme="dark"] body.mm-theme .foot,
+[data-mm-theme="dark"] body.mm-theme .section,
+[data-mm-theme="dark"] body.mm-theme .stat-row,
+[data-mm-theme="dark"] body.mm-theme .ac-platform-strip,
+[data-mm-theme="dark"] body.mm-theme .placeholder,
+[data-mm-theme="dark"] body.mm-theme .empty,
+[data-mm-theme="dark"] body.mm-theme.ac-page .filters,
+[data-mm-theme="dark"] body.mm-theme .analytics,
+[data-mm-theme="dark"] body.mm-theme .today-panel,
+[data-mm-theme="dark"] body.mm-theme .dx-timer,
+[data-mm-theme="dark"] body.mm-theme .circle-sidebar,
+[data-mm-theme="dark"] body.mm-theme .circle-filters,
+[data-mm-theme="dark"] body.mm-theme .dx-rules {
+ background: var(--mm-night-surface);
+ color: var(--mm-night-ink);
+}
+[data-mm-theme="dark"] body.mm-theme .analytics-chart,
+[data-mm-theme="dark"] body.mm-theme .today-card,
+[data-mm-theme="dark"] body.mm-theme .dx-pages,
+[data-mm-theme="dark"] body.mm-theme .dx-records-filters,
+[data-mm-theme="dark"] body.mm-theme .circle-card,
+[data-mm-theme="dark"] body.mm-theme .help-page > section {
+ background: var(--mm-night-surface-2);
+ border-color: var(--mm-night-line-soft);
+ color: var(--mm-night-ink);
+}
+/* 这块左侧有官方绿条，别被上面的 border-color 一起抹掉 */
+[data-mm-theme="dark"] body.mm-theme .analytics-metrics > div {
+ background: var(--mm-night-surface-2);
+ border-color: var(--mm-night-line-soft);
+ border-left: 4px solid var(--mm-green);
+ color: var(--mm-night-ink);
+}
+/* 空格子原来和面板几乎同色（#1b2145 对 #191e42），整年没练的日子直接看不见，
+ 图例最短的一格也是空的：抬亮一点，靠白描边分层 */
+[data-mm-theme="dark"] body.mm-theme .heat-cell { border-color: rgba(255, 255, 255, .14); }
+[data-mm-theme="dark"] body.mm-theme .level-0 { background: rgba(255, 255, 255, .09); }
+[data-mm-theme="dark"] body.mm-theme .level-1 { background: #1d4a37; }
+[data-mm-theme="dark"] body.mm-theme .level-2 { background: #256f4a; }
+[data-mm-theme="dark"] body.mm-theme .level-3 { background: #2f9d62; }
+[data-mm-theme="dark"] body.mm-theme .level-4 { background: var(--mm-green); }
+
+[data-mm-theme="dark"] body.mm-theme .foot-note { color: var(--mm-night-muted); }
+[data-mm-theme="dark"] body.mm-theme.ac-page .card:hover { background: var(--mm-night-surface-3); }
+[data-mm-theme="dark"] body.mm-theme .ac-page .card-stats .k { color: var(--mm-night-muted); }
+[data-mm-theme="dark"] body.mm-theme .ac-page .card-stats .v { color: var(--mm-night-ink); }
+[data-mm-theme="dark"] body.mm-theme .dx-card.is-empty { color: var(--mm-night-muted); }
+[data-mm-theme="dark"] body.mm-theme .dx-more a {
+ background: var(--mm-night-surface-2);
+ border-color: var(--mm-night-line);
+ color: var(--mm-navy);
+}
+[data-mm-theme="dark"] body.mm-theme .dx-ranked,
+[data-mm-theme="dark"] body.mm-theme .dx-rank,
+[data-mm-theme="dark"] body.mm-theme .today-total { color: #7ef0a4; }
+
+/* ============ 6. 控件：输入、按钮、气泡、表格、弹窗 ============ */
+
+[data-mm-theme="dark"] body.mm-theme .input,
+[data-mm-theme="dark"] body.mm-theme .select {
+ background: var(--mm-night-surface-2);
+ border-color: var(--mm-night-line);
+ color: var(--mm-night-ink);
+ color-scheme: dark;
+}
+[data-mm-theme="dark"] body.mm-theme .input::placeholder { color: #8f94b4; }
+[data-mm-theme="dark"] body.mm-theme .analytics-controls .input { color: var(--mm-night-ink); color-scheme: dark; }
+[data-mm-theme="dark"] body.mm-theme .btn-ghost {
+ background: var(--mm-night-surface-2);
+ border-color: var(--mm-night-line);
+ color: var(--mm-night-dim);
+}
+[data-mm-theme="dark"] body.mm-theme .btn-ghost:hover { background: var(--mm-night-surface-3); color: var(--mm-navy); }
+[data-mm-theme="dark"] body.mm-theme .chip {
+ background: var(--mm-night-surface-2);
+ border-color: var(--mm-night-line);
+ color: var(--mm-night-dim);
+}
+/* 浅色里这组是「淡紫底 + 白药丸」，深色照搬会变成「紫底 + 深蓝药丸」，看着像反的。
+ 夜里的对应关系是「比盒子更深一层的底 + 比底更亮的药丸」 */
+[data-mm-theme="dark"] body.mm-theme .tabs { background: #151a3c; }
+[data-mm-theme="dark"] body.mm-theme .tab.is-active { background: #262d5c; color: var(--mm-navy); box-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
+[data-mm-theme="dark"] body.mm-theme .db-chip {
+ background: var(--mm-night-surface-2);
+ border-color: var(--mm-night-line);
+ color: #a8e6c8;
+}
+[data-mm-theme="dark"] body.mm-theme .ac-page .db-chip { color: #a8e6c8; border-color: var(--mm-night-line); }
+[data-mm-theme="dark"] body.mm-theme .expand-btn {
+ background: var(--mm-night-surface-2);
+ border-color: var(--mm-night-line);
+ color: var(--mm-night-dim);
+}
+[data-mm-theme="dark"] body.mm-theme .rt-table { background: var(--mm-night-surface-2); }
+[data-mm-theme="dark"] body.mm-theme .rt-table th { background: var(--mm-purple-tint); color: var(--mm-navy); }
+[data-mm-theme="dark"] body.mm-theme .rt-table td { border-color: var(--mm-night-line-soft); }
+[data-mm-theme="dark"] body.mm-theme .modal-card,
+[data-mm-theme="dark"] body.mm-theme dialog {
+ background: var(--mm-night-surface);
+ border-color: var(--mm-night-line);
+ color: var(--mm-night-ink);
+}
+[data-mm-theme="dark"] body.mm-theme dialog::backdrop { background: rgba(6, 9, 26, .62); }
+[data-mm-theme="dark"] body.mm-theme .account-owner { background: var(--mm-night-surface-2); }
+[data-mm-theme="dark"] body.mm-theme .account-owner-content { background: #1c224a; }
+[data-mm-theme="dark"] body.mm-theme .help-inline { background: var(--mm-night-surface-2); border-color: var(--mm-night-line-soft); }
+[data-mm-theme="dark"] body.mm-theme .help-inline summary { color: var(--mm-navy); }
+[data-mm-theme="dark"] body.mm-theme .account-owner-avatar { background: var(--mm-purple-tint); color: var(--mm-purple-soft); }
+
+/* 气泡：底色转深，字色跟着暗色不刺眼 */
+[data-mm-theme="dark"] body.mm-theme .badge,
+[data-mm-theme="dark"] body.mm-theme .ac-card-tags .badge { background: rgba(255, 255, 255, .1); color: #cdd3f2; border-color: transparent; }
+[data-mm-theme="dark"] body.mm-theme .badge.ac { background: rgba(75, 224, 112, .16); color: #7ef0a4; }
+[data-mm-theme="dark"] body.mm-theme .badge.warn { background: rgba(255, 151, 42, .16); color: #ffc266; }
+[data-mm-theme="dark"] body.mm-theme .badge.bad { background: rgba(231, 33, 57, .18); color: #ff93a5; }
+[data-mm-theme="dark"] body.mm-theme .badge.diff { background: rgba(53, 132, 254, .18); color: #9cc6ff; }
+[data-mm-theme="dark"] body.mm-theme .badge.contest { background: rgba(186, 94, 234, .18); color: #d7aeff; }
+[data-mm-theme="dark"] body.mm-theme .badge.platform { background: rgba(2, 200, 211, .16); color: #7fe6ee; }
+[data-mm-theme="dark"] body.mm-theme .badge.score { background: rgba(255, 151, 42, .16); color: #ffc266; }
+
+/* 提示条：浅色那版是实心暖白底，所以深色也必须是实心底 —— 只铺一层 10% 的色纱的话，
+ 夜里的云和彩虹会直接透到字缝里（这块正好压在彩虹上）。色纱按同一个比例调进实心底里，
+ 颜色关系不变，字下面有底。 */
+[data-mm-theme="dark"] body.mm-theme .notice { background: #2e283c; color: #f0dcb4; }
+[data-mm-theme="dark"] body.mm-theme .notice strong { color: #ffd79a; }
+[data-mm-theme="dark"] body.mm-theme .notice-warn { background: #2e283c; color: #ecd9a4; }
+[data-mm-theme="dark"] body.mm-theme .notice-warn strong { color: #f6dfa8; }
+[data-mm-theme="dark"] body.mm-theme .notice-warn span { color: #d9c48d; }
+[data-mm-theme="dark"] body.mm-theme .notice-ac { background: #1c2f43; color: #b6e3bc; }
+[data-mm-theme="dark"] body.mm-theme .notice-ac strong { color: #d6f0da; }
+[data-mm-theme="dark"] body.mm-theme .notice-ac.is-bad,
+[data-mm-theme="dark"] body.mm-theme .notice-danger { background: #301c3d; color: #ffb9b4; }
+[data-mm-theme="dark"] body.mm-theme .notice-ac.is-bad strong,
+[data-mm-theme="dark"] body.mm-theme .notice-danger strong { color: #ff9d97; }
+[data-mm-theme="dark"] body.mm-theme .notice-neutral { background: #25294a; color: var(--mm-night-muted); }
+
+/* ============ 7. 题友圈 ============ */
+
+[data-mm-theme="dark"] body.mm-theme .circle-eyebrow { color: var(--mm-purple-soft); }
+[data-mm-theme="dark"] body.mm-theme .circle-person:hover { background: var(--mm-night-surface-3); }
+[data-mm-theme="dark"] body.mm-theme .circle-person[aria-pressed="true"] {
+ background: rgba(186, 94, 234, .22);
+ border-color: var(--mm-purple-soft);
+ color: #e3c6ff;
+}
+[data-mm-theme="dark"] body.mm-theme .circle-avatar {
+ background: hsl(var(--hue, 160) 34% 26%);
+ color: hsl(var(--hue, 160) 70% 84%);
+}
+[data-mm-theme="dark"] body.mm-theme .circle-result { background: rgba(255, 255, 255, .08); color: #c3c9e6; }
+[data-mm-theme="dark"] body.mm-theme .circle-result.ac { background: rgba(75, 224, 112, .14); color: #7ef0a4; }
+[data-mm-theme="dark"] body.mm-theme .circle-coverage-status.needs-attention {
+ background: rgba(255, 151, 42, .14);
+ color: #ffc266;
+}
+[data-mm-theme="dark"] body.mm-theme .circle-card-head,
+[data-mm-theme="dark"] body.mm-theme .circle-card-foot { border-color: var(--mm-night-line-soft); }
+
+/* ============ 8. 使用指南 ============ */
+
+[data-mm-theme="dark"] body.mm-theme .help-page .help-toc a {
+ background: var(--mm-night-surface-2);
+ border-color: var(--mm-night-line);
+ color: var(--mm-navy);
+}
+[data-mm-theme="dark"] body.mm-theme .help-page .help-toc a:hover {
+ background: var(--mm-purple-tint);
+ border-color: var(--mm-purple-soft);
+ color: #e3c6ff;
+}
+[data-mm-theme="dark"] body.mm-theme kbd {
+ background: var(--mm-purple-tint);
+ border-color: var(--mm-purple-soft);
+ color: var(--mm-navy);
+}
+
+/* ============ 9. 底图之外还需要单独一提的两处 ============ */
+
+/* 背景 iframe 之上、正文之下的兜底层，深色下别闪白 */
+[data-mm-theme="dark"] body.mm-theme .app { position: relative; }
\ No newline at end of file
diff --git a/public/theme-night.css b/public/theme-night.css
new file mode 100644
index 0000000..dfe6618
--- /dev/null
+++ b/public/theme-night.css
@@ -0,0 +1,81 @@
+/* ============ 夜版背景 ============
+ *
+ * 结构、层级、尺寸、动画全部沿用官方 style.css，这里只做一件事：换贴图素材
+ * （全部在 /assets/night/，由官方素材重上色生成，官方文件一个没动）。
+ *
+ * 用哪一层：
+ * sky / sky-frame 天空渐变（内层渐变块 / 圆角外那圈）
+ * pattern 渐变上的图案叠加
+ * shines 闪点（官方在 ≥769px 换成 PC 那张，这里跟着换）
+ * cloud-* 六片云（白体换成夜蓝，原来的粉/橙暖色描边按原色留着）
+ * rainbow-back 彩虹后面那片云
+ * rainbow-bottom 彩虹两端那两片云（同样分 SP / PC 两份）
+ * rainbow 彩虹（降成月虹）
+ * aurora 曙光（配合 screen 叠加 + 模糊化成柔光）
+ * 月亮和流星保持官方素材：夜里它们本来就该是最亮的。
+ *
+ * **带 -sp / -pc 的素材必须跟着官方的断点走**：官方在基础规则里用 `_sp`、在
+ * `@media (min-width:769px)` 里换成 `_pc`。只挂一份的话，宽屏会拿手机那张顶 PC 那格 ——
+ * 彩虹两端那片云的 SP 版是被图片边界切平的窄裁版（左右两边 85% / 44% 的像素是实心的），
+ * 铺进 PC 那格就会在画面中间露出两条平直的切边。下面每个断点都跟官方一一对应。
+ *
+ * 换素材之外还有四处按夜版需要动了样式，都在下面并注明原因：
+ * html/body 底色、彩虹底边淡出、曙光的叠加方式与柔光、月亮那圈月光。
+ */
+
+/* iframe 底色（渐变块圆角之外露出的那一圈由 .bg 的贴图负责） */
+html, body { background: #0e1234; }
+
+/* —— 天空 —— */
+.bg { background-image: url(/assets/night/sky-frame.png); }
+.bg--gradient { background-image: url(/assets/night/sky.png); }
+.bg--gradient:before { background-image: url(/assets/night/pattern.png); }
+
+/* —— 手机档（官方基础规则那套素材）—— */
+.bg--shine { background-image: url(/assets/night/shines-sp.png); }
+.bg--aurora,
+.bg--aurora:before,
+.bg--aurora:after { background-image: url(/assets/night/aurora-sp.png); }
+.bg--rainbow:before { background-image: url(/assets/night/rainbow-sp.png); }
+.bg--rainbow__cloud { background-image: url(/assets/night/rainbow-bottom-sp.png); }
+.bg--rainbow__cloud:after { background-image: url(/assets/night/rainbow-back-sp.png); }
+
+/* —— 云（两张云官方不分档，同一张素材）—— */
+.bg--cloud__item.i1 { background-image: url(/assets/night/cloud-back-l.png); }
+.bg--cloud__item.i2 { background-image: url(/assets/night/cloud-back-r.png); }
+.bg--cloud__item.i3 { background-image: url(/assets/night/cloud-back-c.png); }
+.bg--cloud__item.i4 { background-image: url(/assets/night/cloud-front-l.png); }
+.bg--cloud__item.i5 { background-image: url(/assets/night/cloud-front-r.png); }
+.bg--cloud__item.i6 { background-image: url(/assets/night/cloud-front-c.png); }
+
+/* —— 宽屏档：官方在这里把闪点、曙光、彩虹、彩虹两端那片云都换成 PC 素材 ——
+ 曙光的 :before/:after 官方在宽屏没有换图（还是 SP 那张），所以它们只在上面那一档里换。 */
+@media only screen and (min-width:769px) {
+ .bg--shine { background-image: url(/assets/night/shines-pc.png); }
+ .bg--aurora { background-image: url(/assets/night/aurora-pc.png); }
+ .bg--rainbow:before { background-image: url(/assets/night/rainbow-pc.png); }
+ .bg--rainbow__cloud { background-image: url(/assets/night/rainbow-bottom-pc.png); }
+}
+
+/* —— 彩虹：弧贴近地平线处淡出 ——
+ 官方那张彩虹贴图的两个「脚」是被图片边界切平的。白天那里正好是渐变底部的白色地平光，
+ 切边看不出来；夜里背景压深之后，平直的切边就露出来了，所以让弧在贴近地平线处淡出。
+ 两端那片云的底边同理，那一刀直接做在 rainbow-bottom-pc 素材里（见生成脚本）。 */
+.bg--rainbow:before {
+ -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 13%);
+ mask-image: linear-gradient(0deg, transparent 0, #000 13%);
+}
+
+/* —— 曙光：换素材之外还要叠加方式，这两行没法省 ——
+ 官方那几道竖向光幕在深色天空上会显出硬边方块，所以夜里用 screen 只加光、再模糊成柔光；
+ 贴图两端本来是硬接缝（官方自己在浅色天空上被背景亮度盖住了），夜版素材两端各淡了 4%。 */
+.bg--aurora,
+.bg--aurora:before,
+.bg--aurora:after {
+ mix-blend-mode: screen;
+ filter: blur(1.1vw) saturate(1.2) brightness(.95);
+}
+.bg--aurora { opacity: .32; }
+
+/* —— 月亮：素材保持官方，这里只加一圈月光（夜里唯一需要「加光」的地方）—— */
+.bg--moon { filter: drop-shadow(0 0 2.6vw rgba(168, 205, 255, .5)); }
\ No newline at end of file
diff --git a/public/theme.css b/public/theme.css
new file mode 100644
index 0000000..50582a7
--- /dev/null
+++ b/public/theme.css
@@ -0,0 +1,1482 @@
+/* Algorithm DX · 前端皮肤层：maimai DX 国际版官网（PRiSM PLUS 时期）
+ *
+ * 参数来源：`public/vendor/maimai/style.css`（2025-08-04 归档快照里的
+ * `https://maimai.sega.com/assets/css/style.css`）。每条关键数值后面标了官方选择器，
+ * 以后要调整就照着官方那行改。
+ *
+ * 载入顺序：fonts.css → styles.css → 各页自己的 CSS（circle/dx-result/dan…）→ ui.css
+ * → theme.css → theme-dark.css。所以在同权重下本文件覆盖前面几个；
+ * 少数带 #id 或 .ac-page 前缀的旧规则用 `body.mm-theme` 提权重压过去。
+ *
+ * 深色模式是叠加在后面的 theme-dark.css：里面的规则都带 [data-mm-theme="dark"] 前缀，
+ * 只覆盖材质与配色，改浅色那套不用动这个文件。
+ *
+ * 背景整页复用官网那份动态背景，见 public/bg.html。
+ *
+ * 与官方的八处有意偏差，见文件末尾「与官方的偏差」。
+ */
+
+/* ============ 1. 调色与尺度（数值全部取自官方） ============ */
+
+:root {
+ color-scheme: light;
+ font-synthesis: none;
+
+ --mm-purple: #ba5eea; /* .common--box:before、.header--nav__link.on::before */
+ --mm-purple-deep: #a051dc;
+ --mm-purple-soft: #d3a1ff;
+ --mm-purple-tint: #f6ecff; /* 由主紫派生的浅底，官方只有纯色，用于表格/内嵌块 */
+ --mm-pink: #ffcedf; /* .common--box:after */
+ --mm-pink-soft: #ffd5cf; /* .bg--gradient */
+ --mm-pink-hot: #ff699d; /* .header--nav__language__link:hover */
+ --mm-magenta: #dc39b8;
+ --mm-red: #e72139; /* .common--btn */
+ --mm-red-dark: #a51426; /* .common--btn 的 3D 底影 */
+ --mm-navy: #0b3871; /* .footer--bottom color、导航字形 fill */
+ --mm-ink: #000; /* body,html color */
+ --mm-grey: #e5e5e5; /* .header--nav__item:not(:last-child)::after */
+ --mm-green: #4be070;
+ --mm-cyan: #02c8d3;
+ --mm-blue: #3584fe;
+ --mm-orange: #ff972a;
+ --mm-yellow: #f8b73d;
+
+ /* 背景渐变：官方 .bg--gradient 的 linear-gradient(0deg,#fff 14%,…) 原样搬过来 */
+ --mm-gradient: linear-gradient(0deg, #fff 14%, #ffd5cf 24%, #ffd5cf 46%, #ffc5d5 56%,
+ #eaabff 67%, #72bcfe 85%, #65f2df 95%);
+
+ /* 卡片：官方 .common--box 是三档 vw 阶梯，下面按档照搬（默认这档就是官方 @min-width:1100px
+ 的 900px / 30px / 14px 14px 0 / 600×8），另两档写在后面的媒体查询里 */
+ --mm-card-radius: 30px;
+ /* 阴影拆成「偏移」与「颜色」两段：窄屏只改偏移（官方那三档），深色只改颜色 */
+ --mm-card-shadow-x: 14px;
+ --mm-card-shadow-color: rgba(0, 0, 0, .2);
+ --mm-card-shadow: var(--mm-card-shadow-x) var(--mm-card-shadow-x) 0 0 var(--mm-card-shadow-color);
+ --mm-bar-w: min(66.6667%, 600px);
+ --mm-bar-h: 8px;
+
+ /* 品牌图标：浅色用浅色版，深色版在 theme-dark.css 里换掉（首帧前由 上的主题决定，
+ 所以不会先亮后暗） */
+ --mm-brand-mark: url(/algorithm-dx-icon-light.svg);
+
+ /* 顶栏胶囊：官方 .header--nav @min-width:1400px → 1200×100 / 50px / 10px 10px 0 */
+ --mm-nav-h: clamp(64px, 7.1429vw, 100px);
+ --mm-nav-radius: 50px;
+ --mm-nav-shadow: 10px 10px 0 rgba(0, 0, 0, .2);
+ /* 版心：官方顶栏 1200px、内容盒 900px。顶栏保持 1200，正文收窄一点（见「偏差」） */
+ --mm-shell: min(1200px, 91.4286vw);
+ --mm-content: min(1080px, 91.4286vw);
+ /* 区块之间的呼吸：官方盒子内部 padding 是 50px，这里按同一量级放宽 */
+ --mm-gap: clamp(26px, 2.8vw, 44px);
+ --mm-pad: clamp(20px, 2.8vw, 40px);
+ /* 缓动：UI 交互统一用一条强 ease-out（技能库给的曲线） */
+ --mm-ease-out: cubic-bezier(.23, 1, .32, 1);
+
+ /* 字体：官方 `body,html{font-family:"M PLUS 1p",sans-serif}` */
+ --mm-sans: "M PLUS 1p Symbols", "M PLUS 1p", "Segoe UI", "Hiragino Kaku Gothic Pro", "Yu Gothic",
+ "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif;
+ --mm-mono: "M PLUS 1p Symbols", "M PLUS 1p", ui-monospace, SFMono-Regular, Consolas, monospace;
+
+ /* —— 仓库既有 token 的重映射：暗色 → 官方亮色（styles.css:131-154、ui.css:2-6） —— */
+ --bg: #fff;
+ --bg-soft: #fffafd;
+ --panel: #fff;
+ --panel-2: #fbf3ff;
+ --border: var(--mm-grey);
+ --border-soft: #efe7f7;
+ --text: var(--mm-ink);
+ --text-dim: var(--mm-navy);
+ --muted: #6f6a7a;
+ --accent: var(--mm-purple);
+ --accent-soft: #f3e6ff;
+ --ac: #16883f;
+ --ac-soft: #e6fbe9;
+ --warn: #a35c00;
+ --warn-soft: #fff3e2;
+ --bad: #b3122a;
+ --bad-soft: #ffe9ec;
+ --radius: var(--mm-card-radius);
+ --radius-sm: 16px;
+ --shadow: 8px 8px 0 0 rgba(0, 0, 0, .2);
+ /* 小东西（行、内嵌块）用柔和投影，硬阴影只留给官方大盒子 */
+ --mm-soft: 0 10px 26px -14px rgba(11, 56, 113, .35);
+ --surface-gradient: #fff;
+ --focus-ring: var(--mm-purple);
+ --sans: var(--mm-sans);
+ --mono: var(--mm-mono);
+}
+
+/* —— 官方 .common--box 的另外两档（原样取自 style.css，数值一个没改）——
+ :root 里那档是 ≥1100px；下面两档在窄屏把圆角、硬阴影与横条一起缩小。
+ 少了它们，手机上会一直用 30px 圆角 + 14px 阴影，比官方重得多。 */
+@media only screen and (max-width: 768.98px) {
+ :root {
+ --mm-card-radius: 3.75vw;
+ --mm-card-shadow-x: 1.75vw;
+ --mm-bar-w: 75vw;
+ --mm-bar-h: 1.5vw;
+ }
+}
+@media only screen and (min-width: 769px) and (max-width: 1099.98px) {
+ :root {
+ --mm-card-radius: 2.7272727273vw;
+ --mm-card-shadow-x: 1.2727272727vw;
+ --mm-bar-w: 54.5454545455vw;
+ --mm-bar-h: .7272727273vw;
+ }
+}
+
+/* ============ 2. 全局 ============ */
+
+html, body { background: #fff; }
+
+body.mm-theme {
+ background: #fff;
+ color: var(--mm-ink);
+ font-family: var(--mm-sans);
+ /* 官方 body 是 line-height:1（lib.css 的重置），这里保留可读行高（见「偏差」） */
+ overflow-x: hidden;
+}
+
+body.mm-theme a { color: var(--mm-purple-deep); }
+body.mm-theme a:hover { color: var(--mm-pink-hot); }
+
+body.mm-theme ::selection { background: var(--mm-purple-soft); color: var(--mm-navy); }
+
+/* 背景：官网那份动态背景整页复用（./bg.html），
+ 官方 CSS 里的全局选择器关在 iframe 里，不会碰到本站布局。
+ body 自己只留一层兜底渐变，iframe 没加载出来时不至于白屏。 */
+body.mm-theme {
+ background-image: var(--mm-gradient);
+ background-attachment: fixed;
+ background-size: cover;
+}
+
+.mm-bg-frame {
+ position: fixed;
+ inset: 0;
+ z-index: 0;
+ width: 100%;
+ height: 100%;
+ border: 0;
+ pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .mm-bg-frame { display: none; }
+}
+
+/* 官方 .wrapper{position:relative;z-index:2}：内容压在背景层之上 */
+body.mm-theme .site-header,
+body.mm-theme .app { position: relative; z-index: 2; }
+
+/* ============ 3. 顶栏（官方 .header--nav 桌面胶囊 / .header--btn 移动汉堡） ============ */
+
+body.mm-theme .site-header {
+ display: flex;
+ align-items: center;
+ gap: 18px;
+ max-width: var(--mm-shell);
+ /* 顶栏往下挪一档：官方背景是内缩 3.14vw 的圆角渐变块，顶栏压到渐变开始线以下，
+ 上面这一段就露出动态背景 */
+ margin: clamp(26px, 3.8vw, 58px) auto 0;
+ min-height: var(--mm-nav-h);
+ padding: 0 clamp(14px, 1.7143vw, 24px) 0 clamp(18px, 2.3571428571vw, 33px);
+ background: #fff;
+ border: 1px solid transparent;
+ border-radius: var(--mm-nav-radius);
+ box-shadow: var(--mm-nav-shadow);
+}
+
+body.mm-theme .site-header .brand { gap: 12px; color: var(--mm-navy); text-decoration: none; }
+body.mm-theme .site-header .brand .mark {
+ display: block;
+ width: 56px;
+ height: 34px;
+ /* 图标走 CSS 背景而不是
：主题在 上，首帧前就定好了，
+ 换成图片标签的话浅色主题会先闪一下深色版图标 */
+ background: var(--mm-brand-mark) center / contain no-repeat;
+}
+body.mm-theme .site-header .brand-text h1 {
+ margin: 0;
+ font-size: 21px;
+ font-weight: 800;
+ letter-spacing: .2px;
+ color: var(--mm-navy);
+}
+body.mm-theme .site-header .brand-text p { margin: 3px 0 0; font-size: 12px; color: var(--muted); }
+
+/* 导航项：官方 .header--nav__link（字色 #0b3871、选中态紫色下横条 5px） */
+body.mm-theme .site-header .nav {
+ justify-self: auto;
+ margin-left: auto;
+ display: flex;
+ align-items: center;
+ gap: clamp(12px, 1.7143vw, 24px);
+ padding: 4px 0;
+ max-width: 100%;
+ /* 这里不能开 overflow：当前页的紫色下横条画在项框之外，会被裁掉 */
+ overflow: visible;
+}
+
+body.mm-theme .site-header .nav .btn,
+body.mm-theme .site-header .nav .btn.btn-primary,
+body.mm-theme .site-header .nav .btn.btn-ghost {
+ position: relative;
+ flex: 0 0 auto;
+ min-height: 0;
+ padding: 8px 2px;
+ border: 0;
+ border-radius: 0;
+ background: none;
+ box-shadow: none;
+ color: var(--mm-navy);
+ font-family: var(--mm-sans);
+ font-size: 17px;
+ font-weight: 800;
+ line-height: 1.55;
+ letter-spacing: .2px;
+ text-decoration: none;
+ transition: color .15s;
+}
+body.mm-theme .site-header .nav .btn:hover { color: var(--mm-purple); transform: none; box-shadow: none; }
+
+/* 分隔线：官方 .header--nav__item:not(:last-child)::after → 1px × 14px #e5e5e5 */
+body.mm-theme .site-header .nav .btn:not(:last-child)::after {
+ content: "";
+ position: absolute;
+ top: 50%;
+ right: calc(-1 * clamp(6px, .8571428571vw, 12px));
+ width: 1px;
+ height: 14px;
+ background: var(--mm-grey);
+ transform: translateY(-50%);
+}
+
+/* 当前页 / 悬停：官方 .header--nav__link.on::before → 高 5px、圆角 100px 100px 0 0 */
+body.mm-theme .site-header .nav .btn[aria-current="page"]::before,
+body.mm-theme .site-header .nav .btn:hover::before {
+ content: "";
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: calc((var(--mm-nav-h) - 42px) / -2);
+ height: 5px;
+ border-radius: 100px 100px 0 0;
+ background: var(--mm-purple);
+}
+
+/* 汉堡按钮：官方 .header--btn（白底 + 1.25vw 红边 + 10px 硬阴影），开合时变 .header--nav__btn 的紫底叉 */
+.mm-menu-btn {
+ display: none;
+ position: relative;
+ flex: 0 0 auto;
+ width: 44px;
+ height: 44px;
+ padding: 0;
+ border: 3px solid var(--mm-red);
+ border-radius: 100px;
+ background: #fff;
+ box-shadow: 4px 4px 0 rgba(0, 0, 0, .2);
+ cursor: pointer;
+}
+.mm-menu-btn span {
+ display: block;
+ width: 20px;
+ height: 3px;
+ margin: 4px auto;
+ border-radius: 100px;
+ background: var(--mm-red);
+ transition: transform .2s, background .2s;
+}
+body.mm-menu-open .mm-menu-btn { border-color: var(--mm-purple); background: var(--mm-purple); }
+body.mm-menu-open .mm-menu-btn span { background: #fff; }
+body.mm-menu-open .mm-menu-btn span:first-child { transform: translateY(3.5px) rotate(45deg); }
+body.mm-menu-open .mm-menu-btn span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
+
+/* 窄一点的桌面端：七项中文标签会顶到胶囊右沿，先收字号与间距。
+ 1001~1015px 是最挤的一档，收不够就会折成两层（开关掉到第二行），所以这里收得狠一点 */
+@media (max-width: 1200px) and (min-width: 1001px) {
+ body.mm-theme .site-header { gap: 12px; }
+ body.mm-theme .site-header .nav { gap: 12px; }
+ body.mm-theme .site-header .nav .btn,
+ body.mm-theme .site-header .nav .btn.btn-primary,
+ body.mm-theme .site-header .nav .btn.btn-ghost { font-size: 15px; }
+}
+
+@media (max-width: 1000px) {
+ body.mm-theme .site-header {
+ justify-content: space-between;
+ padding: 0 clamp(14px, 3vw, 20px);
+ min-height: 68px;
+ gap: 10px;
+ }
+ .mm-menu-btn { display: block; }
+ /* 窄屏要同时站下品牌、深色开关和汉堡：品牌收一档，否则 header 会折行成两层
+ （开关自己的尺寸在 §16 的媒体查询里，因为那节的规则排在更后面） */
+ body.mm-theme .site-header { gap: 12px; }
+ body.mm-theme .site-header .brand .mark { width: 46px; height: 28px; }
+ body.mm-theme .site-header .brand-text h1 { font-size: 18px; }
+ /* 49px 的圆圈才够手指点：两个圆钮各 44px，中间留 12px，别再挤在一起 */
+ .mm-menu-btn { width: 44px; height: 44px; }
+ /* 菜单展开时整屏铺的是 .nav（z-index:40），品牌、开关、汉堡要浮在它上面，
+ 否则开着菜单就够不到深浅色开关了 */
+ body.mm-theme .site-header .brand,
+ body.mm-theme .site-header .mm-theme-btn,
+ body.mm-theme .site-header .mm-menu-btn { position: relative; z-index: 41; }
+ body.mm-theme .site-header .nav {
+ position: fixed;
+ inset: 0;
+ z-index: 40;
+ display: none;
+ flex-direction: column;
+ align-items: stretch;
+ gap: 0;
+ margin: 0;
+ padding: 84px 24px 40px;
+ overflow: auto;
+ background: #fff;
+ box-shadow: var(--mm-nav-shadow);
+ }
+ body.mm-menu-open .site-header .nav { display: flex; }
+ /* 顶栏平时和 .app 同层（都是 z-index:2），展开菜单时必须抬到 .app 之上，
+ 否则白色面板会被正文盖住 */
+ body.mm-menu-open .site-header { z-index: 30; }
+ /* html 上也锁一份：只锁 body 拦不住 html 那只滚动条，深色面板右上角会露一截浅色滑块。
+ 这两条都必须留在媒体查询里 —— 拉宽窗口后菜单按钮已经隐藏，锁还在就谁也解不开了 */
+ body.mm-menu-open,
+ html.mm-menu-open { overflow: hidden; }
+ body.mm-theme .site-header .nav .btn,
+ body.mm-theme .site-header .nav .btn.btn-primary,
+ body.mm-theme .site-header .nav .btn.btn-ghost {
+ margin: 0;
+ padding: 16px 4px;
+ font-size: 20px;
+ text-align: center;
+ }
+ body.mm-theme .site-header .nav .btn::after { display: none; }
+ body.mm-theme .site-header .nav .btn:not(:last-child) {
+ border-bottom: 3px solid var(--mm-grey);
+ }
+ body.mm-theme .site-header .nav .btn[aria-current="page"]::before,
+ body.mm-theme .site-header .nav .btn:hover::before { display: none; }
+ body.mm-theme .site-header .nav .btn[aria-current="page"] { color: var(--mm-purple); }
+ .mm-menu-btn { position: relative; z-index: 50; }
+ body.mm-theme .site-header .global-sync-bar {
+ left: clamp(8px, 2vw, 16px);
+ right: clamp(8px, 2vw, 16px);
+ justify-content: space-between;
+ }
+ body.mm-theme .site-header .global-sync-bar .auto-sync-status { max-width: none; }
+}
+
+/* 再窄一点（320~380px）品牌、开关、汉堡才挤得下同一行 */
+@media (max-width: 380px) {
+ body.mm-theme .site-header { padding: 0 10px; }
+ body.mm-theme .site-header .brand .mark { width: 40px; height: 24px; }
+ body.mm-theme .site-header .brand-text h1 { font-size: 17px; }
+}
+/* 到 344px 以下只留图标当品牌，把宽度全让给开关和汉堡 */
+@media (max-width: 344px) {
+ body.mm-theme .site-header .brand-text { display: none; }
+}
+
+/* 后台同步状态：绑在胶囊右下角外侧（app.js/auto-sync.js 把它塞进
），
+ 不占导航的位置，也不改变胶囊的官方比例 */
+body.mm-theme .site-header .global-sync-bar {
+ position: absolute;
+ top: calc(100% + 8px);
+ right: clamp(6px, 1.4286vw, 16px);
+ z-index: 6;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ gap: 8px;
+ margin: 0;
+ padding: 3px 5px 3px 14px;
+ max-width: calc(100% - 28px);
+ background: #fff;
+ border-radius: 100px;
+ box-shadow: 4px 4px 0 rgba(0, 0, 0, .15);
+}
+body.mm-theme .site-header .global-sync-bar:has(.auto-sync-status[hidden]):has(button[hidden]) { display: none; }
+body.mm-theme .site-header .global-sync-bar .auto-sync-status {
+ position: static;
+ margin: 0;
+ max-width: min(420px, 46vw);
+ font-size: 12px;
+ line-height: 1.6;
+ color: var(--mm-navy);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+body.mm-theme .site-header .global-sync-bar .btn { min-height: 30px; padding: 4px 14px; font-size: 12px; }
+
+/* 回到顶部：官方 .common--top（右下 120px，桌面 1.4286vw 边距） */
+.mm-top {
+ position: fixed;
+ right: 2.5vw;
+ bottom: 2.5vw;
+ z-index: 3;
+ display: block;
+ width: 15vw;
+ max-width: 120px;
+ transition: transform .3s, opacity .3s;
+}
+.mm-top.off { opacity: 0; transform: translateY(30%); pointer-events: none; }
+.mm-top:hover { transform: translateY(-5%); }
+.mm-top img { display: block; width: 100%; height: auto; }
+
+/* ============ 4. 版心与页面节奏 ============ */
+
+body.mm-theme .app,
+body.mm-theme.ac-page .app {
+ max-width: var(--mm-content);
+ margin: 0 auto;
+ padding: clamp(26px, 3vw, 46px) clamp(16px, 1.6vw, 22px) clamp(76px, 7vw, 120px);
+}
+
+/* 页头：左边标题块、右边主按钮，一行放下；剩余的次级操作归到下面的工具行 */
+body.mm-theme .ac-page-heading {
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-between;
+ gap: clamp(20px, 2.4vw, 36px);
+ flex-wrap: wrap;
+ margin-bottom: clamp(24px, 2.6vw, 38px);
+}
+
+/* 背景太花，文字不能直接落在上面：页面顶部这几块统一加一层「玻璃板」。
+ 不支持的浏览器回退成更实的白（见下面的 @supports）。 */
+body.mm-theme .ac-page-heading,
+body.mm-theme .stats-toolbar,
+body.mm-theme .circle-hero,
+body.mm-theme .dan-hero,
+body.mm-theme .help-heading,
+body.mm-theme .help-toc,
+body.mm-theme .pager {
+ position: relative;
+ background: rgba(255, 255, 255, .92);
+ border: 1px solid rgba(255, 255, 255, .75);
+ border-radius: 28px;
+ padding: clamp(18px, 2.2vw, 32px) clamp(20px, 2.6vw, 38px);
+ box-shadow: 0 20px 44px -30px rgba(11, 56, 113, .6);
+}
+@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
+ body.mm-theme .ac-page-heading,
+ body.mm-theme .stats-toolbar,
+ body.mm-theme .circle-hero,
+ body.mm-theme .dan-hero,
+ body.mm-theme .help-heading,
+ body.mm-theme .help-toc,
+ body.mm-theme .pager {
+ background: rgba(255, 255, 255, .88);
+ -webkit-backdrop-filter: blur(12px) saturate(1.2);
+ backdrop-filter: blur(12px) saturate(1.2);
+ }
+}
+body.mm-theme .help-toc { padding: 12px 18px; border-radius: 100px; }
+body.mm-theme .pager { border-radius: 100px; padding: 10px 18px; }
+/* 玻璃板里的标题再加一圈细白描边，字更贴地 */
+body.mm-theme .ac-page-heading h2,
+body.mm-theme .stats-toolbar h2,
+body.mm-theme .circle-hero h2,
+body.mm-theme .dan-hero h2,
+body.mm-theme .help-heading h2 {
+ text-shadow: 0 1px 0 rgba(255, 255, 255, .9), 0 0 14px rgba(255, 255, 255, .8);
+}
+
+/* 小字：在卡片或玻璃板里的留一圈很淡的白描边就够了；直接落在背景花纹上的那几处
+ （.app 的直接子元素、题友动态的状态行、说明页正文、热力图加载提示）另给一块
+ 不透明底板，否则花哨图案会从字底下透出来 */
+body.mm-theme .analytics-note,
+body.mm-theme #message,
+body.mm-theme .dan-msg,
+body.mm-theme .circle-note,
+body.mm-theme .pager-hint {
+ text-shadow: 0 1px 0 rgba(255, 255, 255, .95), 0 0 10px rgba(255, 255, 255, .9);
+}
+body.mm-theme .app > .analytics-note,
+body.mm-theme .app > #message,
+body.mm-theme .app > .dan-msg,
+body.mm-theme .circle-main > #message,
+body.mm-theme .heatmap-top > .analytics-note,
+body.mm-theme .help-page > p {
+ background: #fff;
+ border-radius: 12px;
+ padding: 8px 14px;
+ box-shadow: 0 8px 20px -14px rgba(11, 56, 113, .55);
+ text-shadow: none;
+}
+body.mm-theme .stats-eyebrow { display: block; margin-bottom: 14px; }
+body.mm-theme .ac-page-heading h2 { margin: 0 0 14px; }
+body.mm-theme .ac-page-heading p { margin: 0; }
+body.mm-theme .ac-page-heading .form-actions { flex-wrap: nowrap; }
+
+body.mm-theme .page-toolbar {
+ justify-content: flex-end;
+ gap: 12px;
+ margin-bottom: clamp(28px, 3.2vw, 48px);
+}
+
+/* ============ 5. 官方大盒子 .common--box（白底 + 上紫下粉横条 + 14px 硬阴影） ============ */
+
+body.mm-theme .filters,
+body.mm-theme .admin,
+body.mm-theme .foot,
+body.mm-theme .section,
+body.mm-theme .stat-row,
+body.mm-theme .ac-platform-strip,
+body.mm-theme .placeholder,
+body.mm-theme .empty {
+ position: relative;
+ background: #fff;
+ border: 0;
+ color: var(--mm-ink);
+ border-radius: var(--mm-card-radius);
+ box-shadow: var(--mm-card-shadow);
+ overflow: visible;
+}
+
+/* 横条只画在该有横条的盒子上：概览、平台、筛选、记录、页脚、账号管理 */
+body.mm-theme .filters::before,
+body.mm-theme .admin::before,
+body.mm-theme .foot::before,
+body.mm-theme .section::before,
+body.mm-theme .stat-row::before,
+body.mm-theme .ac-platform-strip::before,
+body.mm-theme .analytics::before,
+body.mm-theme .today-panel::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 50%;
+ width: var(--mm-bar-w);
+ height: var(--mm-bar-h);
+ border-radius: 0 0 var(--mm-bar-h) var(--mm-bar-h);
+ background: var(--mm-purple);
+ transform: translateX(-50%);
+}
+body.mm-theme .filters::after,
+body.mm-theme .admin::after,
+body.mm-theme .foot::after,
+body.mm-theme .section::after,
+body.mm-theme .stat-row::after,
+body.mm-theme .ac-platform-strip::after,
+body.mm-theme .analytics::after,
+body.mm-theme .today-panel::after {
+ content: "";
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ width: var(--mm-bar-w);
+ height: var(--mm-bar-h);
+ border-radius: var(--mm-bar-h) var(--mm-bar-h) 0 0;
+ background: var(--mm-pink);
+ transform: translateX(-50%);
+}
+
+/* 大盒子统一的内边距与节奏 */
+body.mm-theme .section,
+body.mm-theme .stat-row,
+body.mm-theme .ac-platform-strip {
+ margin-bottom: var(--mm-gap);
+ padding: calc(var(--mm-bar-h) + var(--mm-pad)) var(--mm-pad);
+}
+
+body.mm-theme.ac-page .filters {
+ display: grid;
+ gap: clamp(22px, 2.6vw, 34px) clamp(20px, 2.4vw, 32px);
+ padding: calc(var(--mm-bar-h) + var(--mm-pad)) var(--mm-pad);
+ background: #fff;
+ border: 0;
+ border-radius: var(--mm-card-radius);
+ box-shadow: var(--mm-card-shadow);
+ margin-bottom: var(--mm-gap);
+}
+/* 官方三栏只在大屏成立。这条 grid-template-columns 原来没带媒体查询，把 styles.css /
+ ui.css 里窄屏的 1~2 栏折叠全压掉了：手机上硬排三栏，每栏只剩 70~100px，
+ 平台 chips 竖着堆、状态三连被挤成两行、搜索框只剩一半宽 */
+@media (min-width: 1001px) {
+ body.mm-theme.ac-page .filters { grid-template-columns: 1fr 1.4fr 1fr; }
+}
+@media (max-width: 1000px) {
+ body.mm-theme.ac-page .filters { gap: 16px; }
+}
+
+/* ============ 6. 按钮（官方 .common--btn：红底 + 同色系 3D 底影，按下时沉到阴影上） ============ */
+
+body.mm-theme .btn {
+ border: 0;
+ border-radius: 100px;
+ font-family: var(--mm-sans);
+ font-size: 14px;
+ font-weight: 800;
+ letter-spacing: .2px;
+ min-height: 40px;
+ padding: 8px 22px;
+ box-shadow: 0 5px 0 0 rgba(11, 56, 113, .18);
+ transition: transform .15s, box-shadow .15s, background .15s, color .15s;
+}
+
+body.mm-theme .btn-primary {
+ background: var(--mm-red);
+ color: #fff;
+ box-shadow: 0 5px 0 0 var(--mm-red-dark);
+}
+body.mm-theme .btn-primary:hover { background: var(--mm-red); color: #fff; transform: translateY(5px); box-shadow: none; }
+
+body.mm-theme .btn-ghost {
+ background: #fff;
+ color: var(--mm-navy);
+ border: 1px solid var(--mm-grey);
+}
+body.mm-theme .btn-ghost:hover {
+ background: #fff;
+ color: var(--mm-purple);
+ border-color: var(--mm-purple-soft);
+ transform: translateY(5px);
+ box-shadow: none;
+}
+
+body.mm-theme .btn:active { transform: translateY(5px); box-shadow: none; }
+body.mm-theme .btn:focus-visible { outline: 3px solid var(--mm-purple-soft); outline-offset: 2px; }
+body.mm-theme .btn[disabled] { opacity: .45; box-shadow: none; transform: none; }
+
+body.mm-theme .btn-small { min-height: 32px; padding: 6px 16px; font-size: 12.5px; }
+body.mm-theme .btn-mini { min-height: 28px; padding: 4px 12px; font-size: 12px; }
+
+/* ============ 7. 表单 ============ */
+
+body.mm-theme .input,
+body.mm-theme .select {
+ font-family: var(--mm-sans);
+ font-size: 14px;
+ color: var(--mm-ink);
+ background: #fff;
+ border: 1px solid var(--mm-grey);
+ border-radius: 100px;
+ min-height: 44px;
+ padding: 8px 18px;
+ box-shadow: none;
+}
+body.mm-theme .input::placeholder { color: #a8a2b4; }
+body.mm-theme .input:focus,
+body.mm-theme .select:focus {
+ outline: none;
+ border-color: var(--mm-purple);
+ box-shadow: 0 0 0 3px rgba(186, 94, 234, .2);
+}
+body.mm-theme .select { cursor: pointer; }
+
+body.mm-theme .field-label,
+body.mm-theme .filter-label {
+ color: var(--mm-navy);
+ font-weight: 800;
+ font-size: 13px;
+ letter-spacing: .2px;
+}
+body.mm-theme .field-hint,
+body.mm-theme .section-hint { color: var(--muted); }
+
+/* ============ 8. 标签、胶囊、分页 ============ */
+
+body.mm-theme .chip {
+ font-family: var(--mm-sans);
+ font-size: 13px;
+ font-weight: 700;
+ color: var(--mm-navy);
+ background: #fff;
+ border: 1px solid var(--mm-grey);
+ border-radius: 100px;
+ padding: 6px 14px;
+}
+body.mm-theme .chip:hover { border-color: var(--mm-purple-soft); color: var(--mm-purple); }
+body.mm-theme .chip.is-on {
+ background: var(--mm-purple);
+ border-color: var(--mm-purple);
+ color: #fff;
+ box-shadow: 0 3px 0 0 var(--mm-purple-deep);
+}
+body.mm-theme .chip.is-on .chip-n { color: rgba(255, 255, 255, .85); }
+body.mm-theme .chip .chip-n { color: var(--muted); font-family: var(--mm-mono); }
+
+body.mm-theme .tabs {
+ background: var(--mm-purple-tint);
+ border: 0;
+ border-radius: 100px;
+ padding: 3px;
+}
+body.mm-theme .tab {
+ font-family: var(--mm-sans);
+ font-size: 13px;
+ font-weight: 700;
+ color: var(--mm-navy);
+ background: transparent;
+ border-radius: 100px;
+ padding: 7px 18px;
+}
+body.mm-theme .tab:hover { color: var(--mm-purple); }
+body.mm-theme .tab.is-active {
+ background: #fff;
+ color: var(--mm-purple);
+ box-shadow: 0 2px 0 rgba(11, 56, 113, .12);
+}
+
+body.mm-theme .badge {
+ font-family: var(--mm-sans);
+ font-size: 11px;
+ font-weight: 700;
+ padding: 3px 10px;
+ border: 0;
+ border-radius: 100px;
+ background: #f2eef7;
+ color: #5f5870;
+}
+body.mm-theme .badge.ac { background: #e6fbe9; color: #137a3a; }
+body.mm-theme .badge.warn { background: #fff2e0; color: #a35c00; }
+body.mm-theme .badge.bad { background: #ffe9ec; color: #b3122a; }
+body.mm-theme .badge.diff { background: #e8f0ff; color: #1c53b8; }
+body.mm-theme .badge.contest { background: #f3e6ff; color: #7d2fb0; }
+body.mm-theme .badge.platform { background: #e9f6ff; color: #135a8f; text-transform: none; }
+body.mm-theme .badge.score { background: #fff2e0; color: #a35c00; }
+
+body.mm-theme .db-chip {
+ font-family: var(--mm-mono);
+ font-size: 12px;
+ color: var(--mm-navy);
+ background: #fff;
+ border: 1px solid var(--mm-grey);
+ border-radius: 100px;
+ padding: 6px 14px;
+}
+body.mm-theme.ac-page .db-chip { color: var(--mm-navy); border-color: var(--mm-grey); max-width: 260px; }
+
+body.mm-theme .pager { padding: 12px 0 4px; }
+body.mm-theme .pager-hint { color: var(--muted); font-family: var(--mm-mono); }
+
+/* ============ 9. 概览数字（盒子是官方的，格子是平的） ============ */
+
+body.mm-theme .stat-row,
+body.mm-theme.ac-page #statRow {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
+ gap: 6px;
+ align-items: stretch;
+}
+/* 六个指标就该是一行：auto-fit 在 1000px 出头会掉成 5+1，很难看 */
+@media (min-width: 1080px) {
+ body.mm-theme .stat-row,
+ body.mm-theme.ac-page #statRow { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+}
+@media (max-width: 1079px) and (min-width: 760px) {
+ body.mm-theme .stat-row,
+ body.mm-theme.ac-page #statRow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+}
+@media (max-width: 759px) {
+ body.mm-theme .stat-row,
+ body.mm-theme.ac-page #statRow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+
+body.mm-theme .stat,
+body.mm-theme.ac-page #statRow .stat {
+ background: transparent;
+ border: 0;
+ border-radius: 20px;
+ padding: 14px 18px;
+ box-shadow: none;
+ transition: background .2s var(--mm-ease-out);
+}
+body.mm-theme .stat:hover,
+body.mm-theme.ac-page #statRow .stat:hover { background: var(--mm-purple-tint); }
+
+body.mm-theme .stat-label { color: var(--mm-navy); font-weight: 700; font-size: 12.5px; }
+body.mm-theme .stat-value {
+ font-family: var(--mm-sans);
+ font-size: clamp(28px, 2.4vw, 34px);
+ font-weight: 800;
+ color: var(--mm-navy);
+ letter-spacing: -.5px;
+}
+body.mm-theme .stat-sub {
+ color: var(--muted);
+ font-size: 11.5px;
+ line-height: 1.5;
+ text-wrap: pretty;
+}
+body.mm-theme .stat.is-ac .stat-value { color: #16883f; }
+body.mm-theme .stat.is-unac .stat-value { color: #c47f00; }
+body.mm-theme .stat.is-sub .stat-value { color: var(--mm-purple-deep); }
+
+body.mm-theme.ac-page #statRow .stat.is-ac { border: 0; background: transparent; }
+body.mm-theme.ac-page #statRow .stat:last-child .stat-value { font-size: 20px; line-height: 1.8; }
+
+/* 平台条：同样是「一个白盒子 + 平铺的格子」 */
+body.mm-theme .ac-platform-strip {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
+ gap: 6px;
+}
+body.mm-theme .ac-platform-strip .stat {
+ background: transparent;
+ border: 0;
+ border-radius: 18px;
+ box-shadow: none;
+ padding: 12px 16px;
+ transition: background .2s var(--mm-ease-out);
+}
+body.mm-theme .ac-platform-strip .stat:hover { background: var(--mm-purple-tint); }
+body.mm-theme .ac-platform-strip .stat-value { font: 800 18px var(--mm-sans); color: var(--mm-navy); }
+body.mm-theme .ac-platform-strip .stat-sub { color: var(--muted); }
+
+/* ============ 10. 记录列表（区块是官方盒子，每条记录是盒子里的一行） ============ */
+
+/* 区块标题占一行，下面用发丝线接记录行 —— 与官网 top--update 的列表同一套做法 */
+body.mm-theme.ac-page .section-head {
+ margin-bottom: 6px;
+ padding-bottom: 20px;
+ border-bottom: 1px solid var(--border-soft);
+}
+
+body.mm-theme.ac-page .cards { display: block; }
+
+body.mm-theme.ac-page .card {
+ display: grid;
+ grid-template-columns: minmax(0, 1.6fr) minmax(150px, .62fr) auto;
+ grid-template-areas:
+ "top stats foot"
+ "context stats foot";
+ align-items: center;
+ column-gap: clamp(14px, 1.6vw, 28px);
+ row-gap: 2px;
+ padding: 12px 4px;
+ background: transparent;
+ border: 0;
+ border-bottom: 1px solid var(--border-soft);
+ border-radius: 0;
+ box-shadow: none;
+ transform: none;
+ transition: background .18s var(--mm-ease-out);
+}
+body.mm-theme.ac-page .card:last-child { border-bottom: 0; }
+body.mm-theme.ac-page .card.is-ac,
+body.mm-theme.ac-page .card.is-unac { background: transparent; border-left: 0; }
+@media (hover: hover) and (pointer: fine) {
+ body.mm-theme.ac-page .card:hover { background: #fdf8ff; }
+}
+
+body.mm-theme.ac-page .card .card-top { grid-area: top; min-height: 0; justify-content: flex-start; align-items: center; gap: 10px; }
+body.mm-theme.ac-page .card .ac-card-context { grid-area: context; gap: 3px; }
+body.mm-theme.ac-page .card .card-stats { grid-area: stats; }
+body.mm-theme.ac-page .card .card-foot { grid-area: foot; }
+/* 题号/平台/难度挤在一行里就别铺开了：小一号、间距收掉，一行读完 */
+body.mm-theme.ac-page .card-meta > .badge { padding: 2px 8px; font-size: 11px; }
+body.mm-theme.ac-page .ac-card-identity { padding-top: 0; font-size: 11.5px; }
+
+body.mm-theme.ac-page .card-title {
+ font-size: 16px;
+ font-weight: 800;
+ line-height: 1.35;
+ color: var(--mm-navy);
+}
+body.mm-theme .card-title a:hover { color: var(--mm-purple); border-bottom-color: var(--mm-purple-soft); }
+body.mm-theme .card-meta { color: var(--muted); }
+
+body.mm-theme.ac-page .card-stats {
+ background: transparent;
+ border: 0;
+ border-radius: 0;
+ padding: 0;
+ gap: 2px 14px;
+}
+/* 「通过时间 2026-10-10 14:50」并成一行，右侧那一栏才不空得发慌 */
+body.mm-theme.ac-page .card-stats > span { display: flex; align-items: baseline; gap: 8px; }
+body.mm-theme.ac-page .card-stats .k { color: var(--muted); font-size: 11.5px; }
+body.mm-theme.ac-page .card-stats .v { color: var(--mm-navy); font-weight: 700; font-size: 14px; }
+body.mm-theme.ac-page .card-stats > span:first-child { border-bottom: 0; padding-bottom: 0; }
+
+body.mm-theme.ac-page .card-foot {
+ border-top: 0;
+ padding-top: 0;
+ flex-direction: column;
+ align-items: flex-end;
+ gap: 5px;
+ flex-wrap: nowrap;
+ color: var(--muted);
+ text-align: right;
+}
+body.mm-theme .ac-card-tags .badge { background: #f2eef7; border: 0; color: #5f5870; }
+
+/* 窄屏回到「一张一张卡片」的堆叠形态（与汉堡菜单同一个断点） */
+@media (max-width: 1000px) {
+ /* 工具行排成两列网格：旧样式在窄屏会一行一个按钮、还全部右对齐，边缘很毛 */
+ body.mm-theme .page-toolbar {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 10px;
+ }
+ body.mm-theme .page-toolbar .db-chip { grid-column: 1 / -1; justify-self: start; max-width: 100%; }
+ body.mm-theme .page-toolbar .btn {
+ width: 100%;
+ justify-content: center;
+ padding: 8px 12px;
+ font-size: 13px;
+ white-space: nowrap;
+ }
+ body.mm-theme .ac-page-heading .form-actions,
+ body.mm-theme .ac-page-heading .btn-primary { width: 100%; }
+
+ body.mm-theme.ac-page .section-head { padding-bottom: 14px; }
+ body.mm-theme.ac-page .cards { display: flex; flex-direction: column; gap: 16px; }
+ body.mm-theme.ac-page .card {
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+ gap: 14px;
+ padding: 18px;
+ border: 1px solid var(--border-soft);
+ border-radius: 20px;
+ box-shadow: var(--mm-soft);
+ }
+ body.mm-theme.ac-page .card:last-child { border-bottom: 1px solid var(--border-soft); }
+ body.mm-theme.ac-page .card-foot { justify-content: flex-start; text-align: left; align-items: flex-start; }
+
+ /* 状态三连（全部/已AC/未AC）在窄屏只有 100px 出头，会被挤成两行、
+ 右半边还被圆形的选中块盖住：让每组平分整行、文字不许折行，选中块改成圆角矩形 */
+ body.mm-theme.ac-page .filters .tabs { display: flex; width: 100%; }
+ body.mm-theme.ac-page .filters .tab {
+ flex: 1 1 0;
+ min-width: 0;
+ padding: 9px 6px;
+ border-radius: 12px;
+ font-size: 13px;
+ white-space: nowrap;
+ }
+
+ /* 点得着的目标：手机上一行的操作按钮别只有 23px 高 */
+ body.mm-theme .collapse-toggle,
+ body.mm-theme .expand-btn,
+ body.mm-theme .dx-more a,
+ body.mm-theme button.circle-name { min-height: 40px; }
+
+ /* 全年热力图一行放不下（53 列），给它一句滑动提示，别让人以为只有半年 */
+ body.mm-theme #heatmapHost::before {
+ content: '热力图一行放不下一年，左右滑动查看 →';
+ display: block;
+ margin-bottom: 8px;
+ font-size: 11.5px;
+ color: var(--muted);
+ }
+}
+
+/* 手机上按钮不排到半格，直接一列到底 */
+@media (max-width: 560px) {
+ body.mm-theme .page-toolbar { grid-template-columns: minmax(0, 1fr); }
+}
+
+/* 卡片页脚的小操作：旧样式是深蓝实心小块，这里换成官方语言的白底胶囊 */
+body.mm-theme.ac-page .expand-btn {
+ font-family: var(--mm-sans);
+ font-size: 12px;
+ font-weight: 700;
+ color: var(--mm-navy);
+ background: #fff;
+ border: 1px solid var(--mm-grey);
+ border-radius: 100px;
+ padding: 6px 14px;
+ gap: 6px;
+ box-shadow: 0 3px 0 0 rgba(11, 56, 113, .15);
+ transition: transform .15s, box-shadow .15s, color .15s, border-color .15s;
+}
+body.mm-theme.ac-page .expand-btn:hover {
+ color: var(--mm-purple);
+ border-color: var(--mm-purple-soft);
+ text-decoration: none;
+ transform: translateY(3px);
+ box-shadow: none;
+}
+
+/* ============ 11. 区块标题与提示 ============ */
+
+body.mm-theme .section-head h2,
+body.mm-theme.ac-page .section-head h2 {
+ font-size: 20px;
+ font-weight: 800;
+ color: var(--mm-navy);
+}
+body.mm-theme .section-count {
+ display: inline-block;
+ margin-left: 8px;
+ padding: 2px 12px;
+ background: var(--mm-purple-tint);
+ border-radius: 100px;
+ color: var(--mm-purple-deep);
+ font-family: var(--mm-sans);
+ font-size: 12px;
+ font-weight: 800;
+}
+body.mm-theme .collapse-toggle { color: var(--mm-navy); font-weight: 800; background: none; border: 0; }
+body.mm-theme .collapse-toggle:hover { color: var(--mm-purple); }
+body.mm-theme .caret { color: var(--mm-purple); }
+body.mm-theme .timeline { border-top: 1px dashed var(--border-soft); }
+body.mm-theme .tl-time { color: var(--muted); }
+body.mm-theme .tl-row { border-color: var(--border-soft); }
+
+body.mm-theme .ac-page-heading h2,
+body.mm-theme .stats-toolbar h2 { font-size: 30px; font-weight: 800; color: var(--mm-navy); }
+body.mm-theme .ac-page-heading p,
+body.mm-theme .stats-toolbar p { color: #4b4b4b; }
+body.mm-theme .stats-eyebrow {
+ color: var(--mm-purple);
+ letter-spacing: 3px;
+ font-weight: 800;
+}
+
+/* 通知：不抢戏 —— 一点暖底 + 一条状态色 + 发丝分隔行 */
+body.mm-theme .notice {
+ background: #fffcf7;
+ border: 0;
+ border-left: 5px solid var(--mm-orange);
+ border-radius: 14px;
+ padding: 14px 18px;
+ box-shadow: none;
+ color: var(--mm-ink);
+ font-size: 12.5px;
+ line-height: 1.7;
+}
+body.mm-theme .notice + .notice { margin-top: 10px; }
+body.mm-theme .notice > div + div {
+ margin-top: 8px;
+ padding-top: 8px;
+ border-top: 1px solid var(--border-soft);
+}
+body.mm-theme .notice strong { color: var(--mm-navy); }
+body.mm-theme .notice-ac { background: #f7fdf9; border-left-color: var(--mm-green); }
+body.mm-theme .notice-ac strong { color: var(--mm-navy); }
+body.mm-theme .notice-ac.is-bad,
+body.mm-theme .notice-danger { background: #fff8f9; border-left-color: var(--mm-red); }
+body.mm-theme .notice-ac.is-bad strong,
+body.mm-theme .notice-danger strong { color: var(--mm-red-dark); }
+body.mm-theme .notice-warn { background: #fffcf7; border-left-color: var(--mm-orange); }
+body.mm-theme .notice-warn strong { color: var(--mm-navy); }
+body.mm-theme .notice-warn span { color: #6f6a7a; }
+body.mm-theme .notice-neutral { background: #fcfcfc; border-left-color: var(--mm-grey); color: var(--muted); }
+
+body.mm-theme .placeholder,
+body.mm-theme .empty {
+ border-radius: var(--mm-card-radius);
+ box-shadow: var(--mm-card-shadow);
+ padding: 56px 20px;
+ color: var(--muted);
+}
+body.mm-theme .empty h3 { color: var(--mm-navy); font-weight: 800; }
+body.mm-theme .spinner { border-color: var(--mm-purple-tint); border-top-color: var(--mm-purple); }
+
+/* ============ 12. 页脚（官方 .footer--bottom：白底、#0b3871 字色、上沿软阴影） ============ */
+
+body.mm-theme .foot {
+ margin-top: clamp(30px, 3.4vw, 52px);
+ padding: calc(var(--mm-bar-h) + clamp(20px, 2.4vw, 34px)) var(--mm-pad);
+ color: var(--mm-navy);
+ font-size: 12.5px;
+ box-shadow: var(--mm-card-shadow);
+}
+body.mm-theme .foot-note { color: var(--muted); }
+body.mm-theme .foot a { color: var(--mm-purple-deep); }
+
+/* ============ 13. 暗色残留（旧规则里写死的浅色字 / 深色底，逐条扳回亮色） ============ */
+
+body.mm-theme .ac-card-identity,
+body.mm-theme.ac-page .ac-card-identity { color: var(--muted); }
+body.mm-theme .form-status { color: var(--mm-navy); }
+body.mm-theme .form-status.is-bad { color: var(--bad); }
+body.mm-theme .form-status.is-ok { color: var(--ac); }
+body.mm-theme .form-status.is-warn { color: var(--warn); }
+
+body.mm-theme .stat-row { gap: 18px; }
+
+body.mm-theme .admin-head h2 { color: var(--mm-navy); font-weight: 800; font-size: 16px; }
+body.mm-theme .admin-block { background: var(--mm-purple-tint); border: 1px solid var(--border-soft); }
+body.mm-theme .admin-block h3 { color: var(--mm-navy); font-weight: 800; }
+
+body.mm-theme .account-owner { background: #fff; border: 1px solid var(--border-soft); }
+body.mm-theme .account-owner > summary:hover { background: var(--mm-purple-tint); }
+body.mm-theme .account-owner-avatar { color: var(--mm-purple-deep); background: var(--mm-purple-tint); }
+body.mm-theme .account-owner-content { background: #fffafd; }
+body.mm-theme .account-row { border-color: var(--border-soft); }
+
+body.mm-theme .help-inline { background: #fff; border-color: var(--border-soft); }
+body.mm-theme .help-inline summary { color: var(--mm-navy); }
+
+@media (max-width: 600px) {
+ body.mm-theme .ac-page-heading h2,
+ body.mm-theme .stats-toolbar h2 { font-size: 26px; }
+}
+
+/* ============ 14. 表格与弹窗 ============ */
+
+body.mm-theme .rt-table {
+ background: #fff;
+ border-radius: 18px;
+ overflow: hidden;
+}
+body.mm-theme .rt-table th { color: var(--mm-navy); font-weight: 800; background: var(--mm-purple-tint); }
+body.mm-theme .rt-table td,
+body.mm-theme .rt-table th { border-color: var(--border-soft); }
+body.mm-theme .rt-table tbody th { color: var(--mm-navy); font-weight: 700; }
+
+body.mm-theme .modal-card,
+body.mm-theme dialog {
+ background: #fff;
+ color: var(--mm-ink);
+ border: 0;
+ border-radius: var(--mm-card-radius);
+ box-shadow: var(--mm-card-shadow);
+}
+body.mm-theme dialog::backdrop { background: rgba(11, 56, 113, .35); }
+body.mm-theme .modal-card h2,
+body.mm-theme dialog h2,
+body.mm-theme dialog h3 { color: var(--mm-navy); }
+
+/* ============ 15. 其余页面自带组件（旧文件里写死的深色，逐条扳回官方亮色） ============
+ *
+ * styles.css / ui.css / circle.css 里有一批硬编码的深色面（分析卡、今日面板、热力图、
+ * DX 计时器、题友圈人物、帮助目录…），token 重映射管不到，只能按选择器覆盖。
+ * 另：这些页面原本没有「盒子」，正文直接落在动态背景上，所以这里一并给它们官方白盒。
+ */
+
+/* —— 统计页：分析卡 / 今日面板 / 热力图 —— */
+body.mm-theme .analytics {
+ position: relative;
+ background: #fff;
+ border: 0;
+ border-radius: var(--mm-card-radius);
+ padding: calc(var(--mm-bar-h) + var(--mm-pad)) var(--mm-pad);
+}
+body.mm-theme .analytics-chart {
+ background: #fff;
+ border: 1px solid var(--border-soft);
+ border-radius: 22px;
+ padding: 22px 24px;
+ box-shadow: var(--mm-soft);
+}
+/* 热力图那块是直接挂在 #heatmapHost 下的一级面板（不像别的图表嵌在 .analytics 里），
+ 所以它也得算一个官方大盒子：同样的圆角、硬阴影和上下横条 */
+body.mm-theme .heatmap-top > .analytics-chart {
+ position: relative;
+ border: 0;
+ border-radius: var(--mm-card-radius);
+ padding: calc(var(--mm-bar-h) + var(--mm-pad)) var(--mm-pad);
+ box-shadow: var(--mm-card-shadow);
+}
+body.mm-theme .heatmap-top > .analytics-chart::before,
+body.mm-theme .heatmap-top > .analytics-chart::after {
+ content: "";
+ position: absolute;
+ left: 50%;
+ width: var(--mm-bar-w);
+ height: var(--mm-bar-h);
+ background: var(--mm-purple);
+ transform: translateX(-50%);
+}
+body.mm-theme .heatmap-top > .analytics-chart::before {
+ top: 0;
+ border-radius: 0 0 var(--mm-bar-h) var(--mm-bar-h);
+}
+body.mm-theme .heatmap-top > .analytics-chart::after {
+ bottom: 0;
+ border-radius: var(--mm-bar-h) var(--mm-bar-h) 0 0;
+ background: var(--mm-pink);
+}
+body.mm-theme .analytics-chart h3 { color: var(--mm-navy); font-weight: 800; }
+body.mm-theme .analytics-chart h4 { color: var(--muted); }
+body.mm-theme .analytics-head { gap: 12px; }
+body.mm-theme .analytics-controls {
+ background: var(--mm-purple-tint);
+ border: 0;
+ border-radius: 100px;
+ padding: 8px 10px;
+ gap: 8px;
+}
+body.mm-theme .analytics-controls .input { color: var(--mm-ink); color-scheme: light; }
+body.mm-theme .chart-values { color: var(--muted); }
+body.mm-theme .chart-values dl { background: var(--mm-purple-tint); border-radius: 14px; }
+body.mm-theme .chart-values dd { color: var(--mm-navy); }
+body.mm-theme .analytics-metrics > div {
+ background: #fff;
+ border: 1px solid var(--border-soft);
+ border-radius: 18px;
+ border-left: 4px solid var(--mm-green);
+ padding: 16px 18px;
+ box-shadow: var(--mm-soft);
+}
+body.mm-theme .analytics-metrics strong { color: var(--mm-navy); }
+body.mm-theme .analytics-metrics span { color: var(--muted); }
+body.mm-theme .analytics-track { background: var(--mm-purple-tint); height: 10px; }
+body.mm-theme .analytics-track i { background: linear-gradient(90deg, #38c46b, var(--mm-green)); }
+body.mm-theme .analytics-bar-row b { color: var(--mm-navy); }
+
+body.mm-theme .today-panel {
+ position: relative;
+ background: #fff;
+ border: 0;
+ border-radius: var(--mm-card-radius);
+ padding: calc(var(--mm-bar-h) + var(--mm-pad)) var(--mm-pad);
+ box-shadow: var(--mm-card-shadow);
+}
+body.mm-theme .today-metrics > div,
+body.mm-theme .today-rhythm {
+ background: var(--mm-purple-tint);
+ border: 0;
+ border-radius: 18px;
+}
+body.mm-theme .today-metrics strong { color: var(--mm-navy); }
+body.mm-theme .today-metrics span,
+body.mm-theme .today-metrics small,
+body.mm-theme .today-performance span { color: var(--muted); }
+body.mm-theme .today-card { background: #fff; border-color: var(--border-soft); box-shadow: var(--mm-soft); }
+
+/* 热力图格子：深色系 → 官方绿渐变 */
+body.mm-theme .heat-cell { border: 1px solid rgba(11, 56, 113, .08); border-radius: 4px; }
+body.mm-theme .level-0 { background: #eeeaf5; }
+body.mm-theme .level-1 { background: #d8f6e2; }
+body.mm-theme .level-2 { background: #a9eebf; }
+body.mm-theme .level-3 { background: #74e49b; }
+body.mm-theme .level-4 { background: var(--mm-green); }
+body.mm-theme .heat-weekdays,
+body.mm-theme .heat-months,
+body.mm-theme .heat-legend { color: var(--muted); }
+body.mm-theme .heat-cell:hover,
+body.mm-theme .heat-cell:focus-visible { outline: 2px solid var(--mm-purple); outline-offset: 1px; }
+
+/* —— DX Rating 页 —— */
+/* 旧样式把 .dx-eyebrow 固定成浅蓝 #8e9fff，白底上只有 2.46 的对比度，
+ 和另外两个 eyebrow 一样收进官方紫里 */
+body.mm-theme .dx-eyebrow { color: var(--mm-purple); letter-spacing: 2px; font-weight: 800; }
+body.mm-theme .dx-pages {
+ background: #fff;
+ border: 1px solid var(--border-soft);
+ border-radius: 100px;
+ padding: 8px 10px;
+ box-shadow: var(--mm-soft);
+}
+body.mm-theme .dx-timer {
+ background: #fff;
+ border: 0;
+ border-radius: var(--mm-card-radius);
+ box-shadow: var(--mm-card-shadow);
+ padding: var(--mm-pad);
+}
+body.mm-theme .dx-timer h2 { color: var(--mm-navy); }
+body.mm-theme .dx-more a { background: #fff; color: var(--mm-navy); border: 1px solid var(--mm-grey); }
+body.mm-theme .dx-ranked { color: #a35c00; }
+body.mm-theme .dx-records-filters { background: #fff; border: 0; box-shadow: var(--mm-soft); }
+
+/* —— 题友圈 —— */
+body.mm-theme .circle-eyebrow { color: var(--mm-purple); letter-spacing: 2px; font-weight: 800; }
+body.mm-theme .circle-hero h2 { color: var(--mm-navy); }
+body.mm-theme .circle-hero p { color: #4b4b4b; }
+body.mm-theme .circle-sidebar,
+body.mm-theme .circle-main { color: var(--mm-ink); }
+body.mm-theme .circle-sidebar {
+ background: #fff;
+ border: 0;
+ border-radius: var(--mm-card-radius);
+ box-shadow: var(--mm-card-shadow);
+ padding: var(--mm-pad);
+}
+body.mm-theme .circle-person { color: var(--mm-navy); border-radius: 18px; }
+/* 窄屏原样式把「我的关注」排成一条横向滚动条：卡片里看不出还能滑，
+ 第二个人就停在卡片边缘，名字后面的通过数被切一半。干脆换行排成格子，全都看得见 */
+@media (max-width: 850px) {
+ body.mm-theme #people {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(146px, 1fr));
+ gap: 8px;
+ overflow: visible;
+ }
+ body.mm-theme #people .circle-person { min-width: 0; width: 100%; }
+}
+body.mm-theme .circle-person:hover { background: var(--mm-purple-tint); }
+body.mm-theme .circle-person[aria-pressed="true"] {
+ background: var(--mm-purple-tint);
+ border-color: var(--mm-purple-soft);
+ color: var(--mm-purple-deep);
+}
+body.mm-theme .circle-avatar {
+ background: hsl(var(--hue, 160) 62% 92%);
+ color: hsl(var(--hue, 160) 48% 30%);
+}
+body.mm-theme .circle-name:hover { color: var(--mm-purple); }
+body.mm-theme .circle-result { background: #f2eef7; color: #5f5870; }
+body.mm-theme .circle-result.ac { background: #e6fbe9; color: #137a3a; }
+body.mm-theme .circle-coverage-status.needs-attention { color: #a35c00; background: #fff3e2; }
+body.mm-theme .circle-card {
+ background: #fff;
+ border: 1px solid var(--border-soft);
+ border-radius: 22px;
+ box-shadow: var(--mm-soft);
+}
+body.mm-theme .circle-filters {
+ background: #fff;
+ border: 0;
+ border-radius: var(--mm-card-radius);
+ box-shadow: var(--mm-card-shadow);
+ padding: var(--mm-pad);
+}
+body.mm-theme .circle-card-head,
+body.mm-theme .circle-card-foot { border-color: var(--border-soft); }
+
+/* —— 使用指南：正文直接落在背景上，给每节一个白盒 —— */
+body.mm-theme .help-page > section {
+ background: #fff;
+ border-radius: 24px;
+ padding: clamp(20px, 2.2vw, 30px) clamp(20px, 2.4vw, 34px);
+ margin-bottom: 18px;
+ box-shadow: var(--mm-soft);
+}
+body.mm-theme .help-page > section h2 { color: var(--mm-navy); }
+body.mm-theme .help-page > section > p,
+body.mm-theme .help-page > section li { color: #3d3a46; }
+body.mm-theme .help-page .help-toc a {
+ background: #fff;
+ border: 1px solid var(--mm-grey);
+ border-radius: 100px;
+ color: var(--mm-navy);
+}
+body.mm-theme .help-page .help-toc a:hover { background: var(--mm-purple-tint); color: var(--mm-purple-deep); border-color: var(--mm-purple-soft); }
+body.mm-theme kbd {
+ background: var(--mm-purple-tint);
+ border: 1px solid var(--mm-purple-soft);
+ border-radius: 6px;
+ color: var(--mm-navy);
+}
+
+/* 扫描剩下的浅色字（深色面已经处理完，这几处是字色本身写死的浅色） */
+body.mm-theme .today-total { color: #16883f; }
+body.mm-theme .dx-rank { color: #a35c00; }
+/* 段位卡本身是深色卡面（深蓝底 + 位阶色描边），和主题无关；浅色主题把页面刷白以后，
+ 卡面上的字必须跟着卡面走 —— 否则黑字压深蓝，题名/完成度/难度全看不见 */
+body.mm-theme .dx-card { color: #eef1fb; }
+body.mm-theme .dx-card .dx-library-card-foot,
+body.mm-theme .dx-card .dx-library-metrics span,
+body.mm-theme .dx-card .dx-card-id,
+body.mm-theme .dx-card .dx-card-meta,
+body.mm-theme .dx-card .dx-card-name,
+body.mm-theme .dx-card .dx-card-time,
+body.mm-theme .dx-card .dx-pending-id { color: #bcc4dc; }
+body.mm-theme .dx-card .dx-rank { color: var(--rank, #ffd166); }
+body.mm-theme .dx-card .dx-library-title a { color: #f4f6ff; }
+body.mm-theme .dx-card .dx-library-title a:hover { color: #d3a1ff; }
+body.mm-theme .help-page .help-heading p,
+body.mm-theme .help-page > section p,
+body.mm-theme .help-page > section li,
+body.mm-theme .help-page details p { color: #3d3a46; }
+body.mm-theme .help-page #message { color: var(--muted); }
+/* 还有几处页内标题/说明直接落在背景上（不在上面的页头列表里） */
+body.mm-theme .dx-page-intro,
+body.mm-theme .circle-feed-head {
+ background: rgba(255, 255, 255, .92);
+ border: 1px solid rgba(255, 255, 255, .75);
+ border-radius: 24px;
+ padding: clamp(16px, 1.8vw, 24px) clamp(20px, 2.4vw, 32px);
+ box-shadow: 0 18px 40px -30px rgba(11, 56, 113, .55);
+}
+@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
+ body.mm-theme .dx-page-intro,
+ body.mm-theme .circle-feed-head {
+ background: rgba(255, 255, 255, .88);
+ -webkit-backdrop-filter: blur(12px) saturate(1.2);
+ backdrop-filter: blur(12px) saturate(1.2);
+ }
+}
+body.mm-theme .dx-page-intro h2,
+body.mm-theme .circle-feed-head h2 { color: var(--mm-navy); text-shadow: 0 1px 0 rgba(255, 255, 255, .9); }
+body.mm-theme .dx-page-intro p { color: #4b4b4b; }
+body.mm-theme .dx-rules {
+ background: #fff;
+ border: 0;
+ border-radius: 24px;
+ padding: 20px 26px;
+ box-shadow: var(--mm-soft);
+ color: var(--mm-ink);
+}
+body.mm-theme .dan-disclaimer,
+body.mm-theme .dan-msg { color: var(--muted); }
+body.mm-theme .today-section-title { color: var(--mm-navy); }
+body.mm-theme .help-page > p { color: #3d3a46; }
+/* ============ 16. 深色模式开关（顶栏右端，官方 .header--btn 的圆钮语言） ============ */
+
+body.mm-theme .mm-theme-btn {
+ position: relative;
+ flex: 0 0 auto;
+ width: 44px;
+ height: 44px;
+ margin-left: 6px;
+ padding: 0;
+ border: 3px solid var(--mm-purple);
+ border-radius: 100px;
+ background: #fff;
+ box-shadow: 4px 4px 0 rgba(0, 0, 0, .2);
+ cursor: pointer;
+ transition: background .2s, border-color .2s, box-shadow .2s;
+}
+body.mm-theme .mm-theme-btn svg { display: block; width: 22px; height: 22px; margin: 0 auto; }
+body.mm-theme .mm-theme-btn svg > * {
+ transform-origin: 50% 50%;
+ transition: opacity .2s, transform .3s var(--mm-ease-out);
+}
+body.mm-theme .mm-theme-btn__moon { fill: var(--mm-navy); }
+body.mm-theme .mm-theme-btn__sun { fill: var(--mm-yellow); }
+/* 浅色模式显示月亮（点了变深色）；深色模式的另一半在 theme-dark.css */
+body.mm-theme .mm-theme-btn__sun { opacity: 0; transform: scale(.4) rotate(-90deg); }
+body.mm-theme .mm-theme-btn:hover { border-color: var(--mm-purple); background: var(--mm-purple); }
+body.mm-theme .mm-theme-btn:hover .mm-theme-btn__moon,
+body.mm-theme .mm-theme-btn:hover .mm-theme-btn__sun { fill: #fff; }
+body.mm-theme .mm-theme-btn:focus-visible { outline: 3px solid var(--mm-pink-hot); outline-offset: 3px; }
+
+@media (max-width: 1000px) {
+ body.mm-theme .mm-theme-btn { width: 44px; height: 44px; margin-left: auto; }
+ body.mm-theme .mm-theme-btn svg { width: 21px; height: 21px; }
+}
+
+/* ============ 17. 换主题的那一帧 ============
+ 页面里只有一部分元件带 transition（卡片、按钮、输入框），换主题时它们会慢半拍淡过去，
+ 看上去就像「有的卡片没跟着换皮」。theme.js 在改 data-mm-theme 之前先加上
+ .mm-theme-switching，两帧后摘掉 —— 这一帧内所有过渡停用，整页同时换色。 */
+html.mm-theme-switching,
+html.mm-theme-switching *,
+html.mm-theme-switching *::before,
+html.mm-theme-switching *::after { transition: none !important; }
+/* 只有开关自己该动：月亮沉下去、太阳升起来，这一下是要给人看的 */
+html.mm-theme-switching .mm-theme-btn { transition: background .2s, border-color .2s, box-shadow .2s !important; }
+html.mm-theme-switching .mm-theme-btn svg > * { transition: opacity .2s, transform .3s var(--mm-ease-out) !important; }
+
+/* ============ 18. 与官方的偏差（改这里之前先想清楚） ============
+ *
+ * 1) 中日韩字形：官方 `font-family:"M PLUS 1p",sans-serif`，但 M PLUS 1p 没有简体字，
+ * 所以中文回落到系统字体（雅黑/苹方/思源）。数字与拉丁字母仍是官方的 M PLUS 1p ——
+ * 这一层观感（大数字、编号、DX Rating）已经和官网一致。
+ * 2) 版心宽度：官方顶栏 1200px、内容盒 900px；本站顶栏保持 1200，正文收到 1080，
+ * 否则表格与列表会被压得太窄。
+ * 3) 版式：官网没有等价的界面，这里按同一套语言重新编排 —— 每块内容是一个官方
+ * `.common--box`（白底 + 上紫下粉横条 + 14px 硬影），记录列表照官网 top--update
+ * 的做法排成「盒子里的行 + 发丝分隔」，不再是一堆各自带阴影的小卡片。
+ * 4) 按钮尺寸：官方 .common--btn 是 60px 高、28px 字、10px 底影；列表里的操作按钮
+ * 按同一比例缩到 40px 高、5px 底影，避免一行按钮撑满半屏。
+ * 5) 移动端断点：官方在 769px 就收成汉堡 + 语言胶囊；本站导航是七个中文词，比官方的
+ * SVG 字标更宽，所以断点挪到 1000px（769~1000px 之间也走汉堡菜单）。
+ * 6) 记录列表密度：官方 top--update 一行 157px 高，一屏只看得到三条；本站记录里
+ * 题名、平台、通过时间都是短字段，行高收到 95px（一屏六条），大盒子的外观不变。
+ * 7) 数据页的图表：官方没有等价界面，图表由 stat-charts.js 用画布画，配色按明暗两套
+ * 写在脚本里（CSS 变量管不到 canvas），换主题时由 stats-page.js 重画。
+ * 8) 符号字形：官方那套 webfont 自己画箭头、方块、✓ 这类符号；M PLUS 1p 的 latin 子集
+ * 没覆盖它们（会被画成一根没有箭头的斜线），所以 fonts.css 另外声明了一个只圈这些码位、
+ * 指向系统符号字体的 "M PLUS 1p Symbols"，排在 M PLUS 1p 之后。
+ *
+ * 背景没有偏差：整页复用官网那份动态背景（public/bg.html，
+ * 结构与样式都是归档快照原文），用 iframe 铺在内容下面，官方 CSS 的全局选择器
+ * （html/body/.wrapper…）不会碰到本站布局。夜版只是换 /assets/night/ 那套贴图，
+ * 结构与参数不变（见 theme-night.css）。
+ */
\ No newline at end of file
diff --git a/public/theme.js b/public/theme.js
new file mode 100644
index 0000000..a7b42f1
--- /dev/null
+++ b/public/theme.js
@@ -0,0 +1,124 @@
+/**
+ * maimai 官网皮肤的行为层：深色模式开关、移动端菜单开关、回到顶部。
+ *
+ * 只做这一层需要的行为，不碰 app.js 的数据逻辑；无依赖、原生 ESM。
+ *
+ * 深色模式（主题的唯一写入口，其它模块只读 dataset.mmTheme）：
+ * · 主题落在 ，首屏由各页 里的一小段脚本先定好，
+ * 这里负责开关、记忆（localStorage）、跟随系统，以及下面这些跟着主题走的东西：
+ * 开关的 aria-checked 与 title、iframe 背景的主题、
+ * 画布重画（发 mm-theme-change）、换皮那一帧的过渡开关。
+ * 品牌图标不用 JS：它读 上的主题走 CSS 背景，首帧就是对的。
+ * · 背景是 iframe 里的官方动态页，换主题不重载它，改发 postMessage 就地换贴图，
+ * 官方那套入场动画不会重播。
+ */
+
+const THEME_KEY = 'mm-theme';
+
+const prefersDark = () => window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+function storedTheme() {
+ try {
+ const value = localStorage.getItem(THEME_KEY);
+ return value === 'dark' || value === 'light' ? value : null;
+ } catch {
+ return null;
+ }
+}
+
+const currentTheme = () => (document.documentElement.dataset.mmTheme === 'dark' ? 'dark' : 'light');
+
+const bgFrame = document.querySelector('.mm-bg-frame');
+
+function tellBackground(theme) {
+ if (!bgFrame || !bgFrame.contentWindow) return;
+ // 背景页认的就是 data-mm-theme 那两个词，见 bg.html 的 message 监听
+ bgFrame.contentWindow.postMessage({ mmTheme: theme }, location.origin);
+}
+
+function applyTheme(theme, { remember = true, notify = true } = {}) {
+ // 换皮那一帧先把过渡关掉：只有一部分卡片/按钮带 transition，不关的话它们会慢半拍，
+ // 看上去像「有的卡片没跟着换主题」。两帧后摘掉，之后 hover 之类的过渡照旧。
+ const root = document.documentElement;
+ root.classList.add('mm-theme-switching');
+ root.dataset.mmTheme = theme;
+ root.style.colorScheme = theme;
+ const button = document.getElementById('mmThemeBtn');
+ if (button) {
+ button.setAttribute('aria-checked', String(theme === 'dark'));
+ button.title = theme === 'dark' ? '切换到浅色模式' : '切换到深色模式';
+ }
+ if (remember) {
+ try {
+ localStorage.setItem(THEME_KEY, theme);
+ } catch {
+ /* 隐私模式下写不进去就算了，当次会话照样能用 */
+ }
+ }
+ if (notify) tellBackground(theme);
+ // 画布里的图形是 JS 画的，CSS 换皮管不到，交给需要重画的模块自己接
+ document.dispatchEvent(new CustomEvent('mm-theme-change', { detail: { theme } }));
+ requestAnimationFrame(() => requestAnimationFrame(() => root.classList.remove('mm-theme-switching')));
+}
+
+// 首屏脚本已经定过主题，这里补齐图标/开关状态，并把主题同步给背景
+applyTheme(storedTheme() ?? (prefersDark() ? 'dark' : 'light'), { remember: false });
+
+const themeBtn = document.getElementById('mmThemeBtn');
+
+if (themeBtn) {
+ themeBtn.addEventListener('click', () => {
+ applyTheme(currentTheme() === 'dark' ? 'light' : 'dark');
+ });
+}
+
+// 用户没手动选过时，跟随系统切换
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
+ if (!storedTheme()) applyTheme(event.matches ? 'dark' : 'light', { remember: false });
+});
+
+// iframe 的 src 放在 data-src 里，这里按当前主题挂上（深色直接带 ?night=1，
+// 免得先亮后暗地闪一下）；之后切换主题只发消息，不重载，官方入场动画不会重播。
+if (bgFrame) {
+ const baseSrc = bgFrame.getAttribute('data-src') || '/bg.html';
+ if (!bgFrame.getAttribute('src')) {
+ bgFrame.setAttribute('src', currentTheme() === 'dark' ? `${baseSrc}?night=1` : baseSrc);
+ }
+ bgFrame.addEventListener('load', () => tellBackground(currentTheme()));
+}
+
+const menuBtn = document.getElementById('mmMenuBtn');
+
+if (menuBtn) {
+ const setOpen = (open) => {
+ document.body.classList.toggle('mm-menu-open', open);
+ // html 上也挂一份：只锁 body 拦不住 html 那只滚动条，深色面板右上角会露一截浅色滑块
+ document.documentElement.classList.toggle('mm-menu-open', open);
+ menuBtn.setAttribute('aria-expanded', String(open));
+ };
+ menuBtn.addEventListener('click', () => setOpen(!document.body.classList.contains('mm-menu-open')));
+ document.addEventListener('keydown', (event) => {
+ if (event.key === 'Escape') setOpen(false);
+ });
+ // 窄屏展开、随后把窗口拉宽的话：菜单按钮这时已经隐藏，锁滚动的那条规则也出了媒体查询，
+ // 不收起来就会卡在一个看不见、又关不掉的展开态上
+ window.matchMedia('(min-width: 1001px)').addEventListener('change', (event) => {
+ if (event.matches) setOpen(false);
+ });
+ // 菜单里点走一项就收起来，否则新页面加载前会停在展开态
+ document.querySelectorAll('.site-header .nav a').forEach((link) => {
+ link.addEventListener('click', () => setOpen(false));
+ });
+}
+
+const topLink = document.querySelector('.mm-top');
+
+if (topLink) {
+ const sync = () => topLink.classList.toggle('off', window.scrollY < 600);
+ sync();
+ window.addEventListener('scroll', sync, { passive: true });
+ topLink.addEventListener('click', (event) => {
+ event.preventDefault();
+ window.scrollTo({ top: 0, behavior: 'smooth' });
+ });
+}
\ No newline at end of file
diff --git a/public/vendor/maimai/README.md b/public/vendor/maimai/README.md
new file mode 100644
index 0000000..75bab1d
--- /dev/null
+++ b/public/vendor/maimai/README.md
@@ -0,0 +1,37 @@
+# vendor/maimai —— maimai DX 国际版官网素材（PRiSM PLUS 时期）
+
+前端重构的参照物：`maimai DX International ver.` 官网在 **PRiSM PLUS** 时期的样式与皮肤素材。
+这里只放「原样搬过来」的东西；把它落到本站组件上的那一层在 [`public/theme.css`](../../theme.css)。
+
+## 来源
+
+| 文件 | 原始地址 | 快照 |
+| --- | --- | --- |
+| `style.css` | `https://maimai.sega.com/assets/css/style.css` | `web.archive.org/web/20250804084236` |
+| `img/**`（92 个） | `https://maimai.sega.com/assets/img/**` | 同上（线上仍在，直接抓线上） |
+| `fonts/**` + `fonts.css` | `https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@400;500;700;800;900` | 2026-10-10 抓取 |
+
+归档页面本身（`https://web.archive.org/web/20250804084236/https://maimai.sega.com/`）与线上现站
+（已更新到 CiRCLE PLUS）**样式表不同**：PRiSM PLUS 版的 `.common--box` 是上紫 `#ba5eea` /
+下粉 `#ffcedf`，CiRCLE PLUS 版换成了 `#f93eac` / `#6dbefe`。所以这里以归档快照为准。
+
+## 对原文件做了什么
+
+- `style.css`：只改了 URL。wayback 前缀与 `https://maimai.sega.com/assets/img/` 全部改写成
+ `/vendor/maimai/img/`（73 处），Google Fonts 的 `@import` 换成注释（字体改为自托管，
+ 见 `fonts.css`）。**选择器与数值一个都没动**，要核对官方参数直接在这个文件里查。
+ 归档页还在文件末尾追加了两段 wayback 自己的注释（版权声明与 playback timings），
+ 不属于官方文件，已删掉。
+- `img/**`：原始字节，未做任何压缩或转码。`img/MANIFEST.txt` 记录每个文件的字节数与 MD5。
+- `fonts.css`：只自托管 latin / latin-ext 子集（5 个字重 × 2 子集，共 10 个 woff2）。
+ M PLUS 1p 没有简体字，中文由 `theme.css` 里的系统字体栈回退。另外补了一个 `"M PLUS 1p Symbols"`
+ 家族：M PLUS 1p 的 latin 子集只覆盖 ↑↓ 两个箭头，↗ ✓ ▲ 这类符号会被画成一根没有箭头的
+ 斜线，所以只把那些码位圈出来交给系统符号字体（`theme.css` 的 `--mm-sans` 排在 M PLUS 1p 之后）。
+- 本站的背景宿主页 `public/bg.html` 不放在这里：它带着自己那三行 reset 和夜版切换脚本，
+ 放在 `public/` 根下，好让这个目录只留「原样搬过来」的素材。
+
+## 授权
+
+- `M PLUS 1p` 是 SIL Open Font License 1.1，可自由再分发。
+- `style.css` 与 `img/**` 是 **SEGA 的版权素材**，这里作为个人自用项目的样式参照/复刻保留，
+ 不属于 MIT 授权范围，也不代表 SEGA 授权。若要公开发布，请自行替换或取得许可。
\ No newline at end of file
diff --git a/public/vendor/maimai/fonts.css b/public/vendor/maimai/fonts.css
new file mode 100644
index 0000000..9545824
--- /dev/null
+++ b/public/vendor/maimai/fonts.css
@@ -0,0 +1,103 @@
+/* maimai DX International 官网（PRiSM PLUS 时期）使用的字体：M PLUS 1p（SIL OFL 1.1）。
+ 这里只自托管 latin / latin-ext 子集（数字与拉丁字形是官方观感的关键），
+ 中日韩字形由 theme.css 里的系统字体栈回退。
+ 来源: https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@400;500;700;800;900 抓取于 2026-10-10 */
+
+/* M PLUS 1p 的 latin 子集只覆盖 U+2191/U+2193 两个箭头，↗ ✓ ▲ 这类符号会被它画成一根
+ 没有箭头的斜线。这里单独声明一个只圈「M PLUS 1p 没覆盖的符号码位」的家族，
+ 交给系统符号字体渲染；其余字符仍旧走 M PLUS 1p。 */
+@font-face {
+ font-family: "M PLUS 1p Symbols";
+ src: local("Segoe UI Symbol"), local("Segoe UI"), local("Apple Symbols"), local("Noto Sans Symbols 2");
+ unicode-range: U+2190, U+2192, U+2194-21FF, U+25A0-27BF, U+2B00-2BFF, U+FE0F;
+}
+
+@font-face {
+ font-family: "M PLUS 1p";
+ font-style: normal;
+ font-weight: 400;
+ font-display: swap;
+ src: url("/vendor/maimai/fonts/mplus1p-400-latin-ext.woff2") format("woff2");
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+ font-family: "M PLUS 1p";
+ font-style: normal;
+ font-weight: 400;
+ font-display: swap;
+ src: url("/vendor/maimai/fonts/mplus1p-400-latin.woff2") format("woff2");
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+ font-family: "M PLUS 1p";
+ font-style: normal;
+ font-weight: 500;
+ font-display: swap;
+ src: url("/vendor/maimai/fonts/mplus1p-500-latin-ext.woff2") format("woff2");
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+ font-family: "M PLUS 1p";
+ font-style: normal;
+ font-weight: 500;
+ font-display: swap;
+ src: url("/vendor/maimai/fonts/mplus1p-500-latin.woff2") format("woff2");
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+ font-family: "M PLUS 1p";
+ font-style: normal;
+ font-weight: 700;
+ font-display: swap;
+ src: url("/vendor/maimai/fonts/mplus1p-700-latin-ext.woff2") format("woff2");
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+ font-family: "M PLUS 1p";
+ font-style: normal;
+ font-weight: 700;
+ font-display: swap;
+ src: url("/vendor/maimai/fonts/mplus1p-700-latin.woff2") format("woff2");
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+ font-family: "M PLUS 1p";
+ font-style: normal;
+ font-weight: 800;
+ font-display: swap;
+ src: url("/vendor/maimai/fonts/mplus1p-800-latin-ext.woff2") format("woff2");
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+ font-family: "M PLUS 1p";
+ font-style: normal;
+ font-weight: 800;
+ font-display: swap;
+ src: url("/vendor/maimai/fonts/mplus1p-800-latin.woff2") format("woff2");
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+ font-family: "M PLUS 1p";
+ font-style: normal;
+ font-weight: 900;
+ font-display: swap;
+ src: url("/vendor/maimai/fonts/mplus1p-900-latin-ext.woff2") format("woff2");
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+ font-family: "M PLUS 1p";
+ font-style: normal;
+ font-weight: 900;
+ font-display: swap;
+ src: url("/vendor/maimai/fonts/mplus1p-900-latin.woff2") format("woff2");
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
diff --git a/public/vendor/maimai/fonts/mplus1p-400-latin-ext.woff2 b/public/vendor/maimai/fonts/mplus1p-400-latin-ext.woff2
new file mode 100644
index 0000000..4e06334
Binary files /dev/null and b/public/vendor/maimai/fonts/mplus1p-400-latin-ext.woff2 differ
diff --git a/public/vendor/maimai/fonts/mplus1p-400-latin.woff2 b/public/vendor/maimai/fonts/mplus1p-400-latin.woff2
new file mode 100644
index 0000000..ac77e19
Binary files /dev/null and b/public/vendor/maimai/fonts/mplus1p-400-latin.woff2 differ
diff --git a/public/vendor/maimai/fonts/mplus1p-500-latin-ext.woff2 b/public/vendor/maimai/fonts/mplus1p-500-latin-ext.woff2
new file mode 100644
index 0000000..636c799
Binary files /dev/null and b/public/vendor/maimai/fonts/mplus1p-500-latin-ext.woff2 differ
diff --git a/public/vendor/maimai/fonts/mplus1p-500-latin.woff2 b/public/vendor/maimai/fonts/mplus1p-500-latin.woff2
new file mode 100644
index 0000000..cfa6e04
Binary files /dev/null and b/public/vendor/maimai/fonts/mplus1p-500-latin.woff2 differ
diff --git a/public/vendor/maimai/fonts/mplus1p-700-latin-ext.woff2 b/public/vendor/maimai/fonts/mplus1p-700-latin-ext.woff2
new file mode 100644
index 0000000..1b8d09e
Binary files /dev/null and b/public/vendor/maimai/fonts/mplus1p-700-latin-ext.woff2 differ
diff --git a/public/vendor/maimai/fonts/mplus1p-700-latin.woff2 b/public/vendor/maimai/fonts/mplus1p-700-latin.woff2
new file mode 100644
index 0000000..b2eb083
Binary files /dev/null and b/public/vendor/maimai/fonts/mplus1p-700-latin.woff2 differ
diff --git a/public/vendor/maimai/fonts/mplus1p-800-latin-ext.woff2 b/public/vendor/maimai/fonts/mplus1p-800-latin-ext.woff2
new file mode 100644
index 0000000..d0c3b48
Binary files /dev/null and b/public/vendor/maimai/fonts/mplus1p-800-latin-ext.woff2 differ
diff --git a/public/vendor/maimai/fonts/mplus1p-800-latin.woff2 b/public/vendor/maimai/fonts/mplus1p-800-latin.woff2
new file mode 100644
index 0000000..cc8f341
Binary files /dev/null and b/public/vendor/maimai/fonts/mplus1p-800-latin.woff2 differ
diff --git a/public/vendor/maimai/fonts/mplus1p-900-latin-ext.woff2 b/public/vendor/maimai/fonts/mplus1p-900-latin-ext.woff2
new file mode 100644
index 0000000..66f2b0e
Binary files /dev/null and b/public/vendor/maimai/fonts/mplus1p-900-latin-ext.woff2 differ
diff --git a/public/vendor/maimai/fonts/mplus1p-900-latin.woff2 b/public/vendor/maimai/fonts/mplus1p-900-latin.woff2
new file mode 100644
index 0000000..8f3a39e
Binary files /dev/null and b/public/vendor/maimai/fonts/mplus1p-900-latin.woff2 differ
diff --git a/public/vendor/maimai/img/MANIFEST.txt b/public/vendor/maimai/img/MANIFEST.txt
new file mode 100644
index 0000000..5326d0a
--- /dev/null
+++ b/public/vendor/maimai/img/MANIFEST.txt
@@ -0,0 +1,94 @@
+source: https://maimai.sega.com/assets/img/ (PRiSM PLUS era)
+captured: 2026-10-10
+common/arrow.svg 329 cd00d3b2a1aa2e2b5949f52dad24a558
+common/arrow_double.svg 446 0b5879f64d05aa1dc3e9fdc23ad55348
+common/download.png 4205 827094c65cef3383d9bb6dec7d876227
+common/icon_blank.png 175 89c27d1b7cd4fc7bb82ff39610665523
+common/icon_download.png 1258 b86c9e5c949b768dccc6d02da8e76838
+common/icon_next.png 667 705ee4253d5288fb297c76901452ecd4
+common/icon_select.png 3199 c03b0478d7a33f1bb4207464f26a610e
+common/top.png 27682 00c901d61c45b23c51b37d87edcb91ca
+favicon.png 6608 ef1d521081485dcd0d243f5bf923b217
+footer/footer_banner.jpg 39146 13a49137d35613da2cbb54a7ca36c47f
+footer/footer_logo.png 5910 44e2b3c77749e055c5715474dd9c9e23
+footer/footer_sns_fb.png 2601 2882e1d277bb11d37fc2e68fc56cbf83
+footer/footer_sns_li.png 3497 19b49a359ac818230aff99911d17dfda
+footer/footer_sns_x.png 3556 9f88bbfd72fee27ad8125598dd58897a
+header/btn_arrow.png 1062 a6668541db9e0c9ca0a032181a06e372
+header/btn_arrow.svg 257 1c4a56dc66e329e5a6ea4985215d931d
+ogp.png 308605 539bb531128070267670e0ccb8bb9148
+play/dash.png 214 0f646c1459e9c36b7cc3c1c43480f3ba
+prism/bg/bg_aurora_pc.png 77561 5497b5bd7905e9fd74b587068cb860a7
+prism/bg/bg_aurora_sp.png 57495 e97a42bf83603df79ca0915345cfc4e2
+prism/bg/bg_cloud_back_c.png 2481 9911f23ca057640c1edc7ea15d027e50
+prism/bg/bg_cloud_back_l.png 3159 f00ef39719406641db4d8d3e9d991461
+prism/bg/bg_cloud_back_r.png 6380 2323f4753d9236f02bde7c878911dcb1
+prism/bg/bg_cloud_front_c.png 4211 11fba18997bdc5926abeb6cc4049c49c
+prism/bg/bg_cloud_front_l.png 4314 a6f46856c6b759ad45a37dd483b4bc8c
+prism/bg/bg_cloud_front_r.png 4107 f8f985b0df2581ca61485c3ce990a631
+prism/bg/bg_diamond_pink.png 293 48ba7b62ea9c739446893df834f5ff49
+prism/bg/bg_diamond_white.png 207 a6b102103edae42cd6329c2791e3c25b
+prism/bg/bg_diamond_yellow.png 207 bbcc23a8e51be8b5e432614d70ce31a5
+prism/bg/bg_moon.png 14556 f939430c51d1544b10a5dabba4540d60
+prism/bg/bg_pattern.png 227 2fd46e9c9ddcec95cff99f0414791b2e
+prism/bg/bg_rainbow_back_sp.png 6257 02c4872894e69365e2a4a7a97df14032
+prism/bg/bg_rainbow_btm_pc.png 13015 e6da0e89ec1d0fcbb0f4f3ca9cd3b522
+prism/bg/bg_rainbow_btm_sp.png 7951 634fef106b9c6cd363087d36beec21de
+prism/bg/bg_rainbow_pc.png 14960 809799f6ed17a1c12d1926515672a16d
+prism/bg/bg_rainbow_sp.png 13011 63207806f9db589b0df05ff34e1271b0
+prism/bg/bg_shines_pc.png 6610 b1450d76088e46622af0d689ad6ce979
+prism/bg/bg_shines_sp.png 5787 8d4c977e41e5f171db8ef7eb6301e72a
+prism/bg/bg_shootingstar_head.png 1150 43eb091b339f87e0bbeec39cb70fe8a0
+prism/bg/bg_shootingstar_head_green.png 2442 6e60786ee48c82228519b0def2f16337
+prism/bg/bg_shootingstar_head_pink.png 2436 55e939f2f8a2ee7741d0d980c7e0d735
+prism/bg/bg_shootingstar_tail.png 3563 945fa11339fbff7bafb853fecba7eb59
+prism/bg/bg_shootingstar_tail_green.png 7624 65ac85eeba3c2aa6feb62b1a7ba525b4
+prism/bg/bg_shootingstar_tail_pink.png 8409 c091f0c3f4631212e3a111712ca91d30
+prism/bg/bg_star_white.png 2350 ce64b60ef33d71493b63a677744cdb1b
+prism/bg/bg_star_yellow.png 2347 43b38e1237f59cb20a886528e69e0440
+prism/common/icon_header_left.svg 594 4fea9e2436d2fd407ea5c17553d90a76
+prism/common/icon_header_right.svg 592 f0ce643895d280ace29012e1a36c3a53
+prism/common/logo.png 25044 30e42459cafa4f48238b2666b37f1419
+prism/top/kv.png 227129 dac17b4963c92b8189bc7cd0a4386eaf
+prism/top/kv_logo.png 88199 0bd8f99caf8b1ef1f7d405a9c33ae2de
+prism/top/kv_logo_pc.png 188016 e76e9cb6373a9d0c2abc7a1fe0820c6a
+prism/top/kv_pc.png 392031 8d611c4e3891b3d494003f1f631b3bbd
+ranking/line_dashed_pc.png 2954 01ae4b1f39717dbc571ce45d293505e3
+ranking/line_dashed_sp.png 2890 984331ca21584984a04f7b0d040e8a2d
+ranking/rank_num_bz0.png 5181 bef6dddc56330c8b4fec77536783e62e
+ranking/rank_num_bz1.png 3237 03ad6e320c0f8d764b65691283efd548
+ranking/rank_num_bz100.png 6445 3509e9bb8f3222ab9408c6c5a0b0f3ff
+ranking/rank_num_bz2.png 4748 2ecbfca66420d7201f573e84e26ae9b6
+ranking/rank_num_bz3.png 5352 a7ed94f7217f12a6e90a4be4794085f1
+ranking/rank_num_bz4.png 3870 ad8faeaf926db2a73e004e369deb6045
+ranking/rank_num_bz5.png 4771 cdf683c607f29f4d0e14f303edba88bf
+ranking/rank_num_bz6.png 5388 28f21950f383f668b274e235cb7c4405
+ranking/rank_num_bz7.png 4152 7fa594a19a9b17cdcdf006fdd02c4e44
+ranking/rank_num_bz8.png 5407 2b07f8d98eab2b6382404297fee0afeb
+ranking/rank_num_bz9.png 5477 a7765a53524058e5761c0f0f22ba63ed
+ranking/rank_num_gold1.png 3490 a993aae223f0614911c8e72cb91448d0
+ranking/rank_num_sv0.png 5575 29ece737de4f96c10342b1cbc21ff122
+ranking/rank_num_sv1.png 3561 b756bc38f3dc43859e16698dd40b1444
+ranking/rank_num_sv2.png 5113 24bc53a9202110055c1da4d71f56b903
+ranking/rank_num_sv3.png 5719 72ba8459a334b1cee688eb6c664193d5
+ranking/rank_num_sv4.png 4293 5c80541f3d06205c4628542b35118b72
+ranking/rank_num_sv5.png 5092 a8780b5c47e721e7469d4f1bc37879be
+ranking/rank_num_sv6.png 5779 86a8bf17c35a2ee159c07fe67ea7e511
+ranking/rank_num_sv7.png 4481 4a069b41c5cab1418528b4779b096f2a
+ranking/rank_num_sv8.png 5822 22e8fc1381aefc6b512d8b3d63aded97
+ranking/rank_num_sv9.png 5802 f8da52b0d1b47620b628e7251ae86de4
+song/arrow.svg 255 29e1504d49b8b0da15a9a6b3266f4c93
+song/check.svg 214 24c8fa70832962e419b805d7daf04e7d
+song/inner_dx.png 3740 0b100bf7f84ca28288f6ffccfa8886c4
+song/inner_st.png 3400 9a579e3a5bdc52a9840851aa20c2331d
+song/lock.png 8026 baa6e48d518823bc1106c55c289d1f95
+song/piapro_logo.png 1650 8f4b97ddf187f2bd78cda20d5239752f
+song/plus.png 913 ca9172a51a3dc49351097141bdaa0280
+song/search_del.png 1082 196405ba565bcc07f1fff571c8f98d5c
+song/search_lens.svg 549 543411a2724886c04b9ed7a481d1af57
+song/utage/icon_buddy.png 3312 bf55c0de2f42a4d7515e874fe1504c94
+top/btn_chu.png 69468 48331d4bb9cd1da95b399cc1ab212024
+top/btn_top_1.png 12883 474aa55b03dd50d68166ceb0a105af39
+top/btn_top_2.png 13054 52cdb1892cc968c74e9b728aa46a6d90
+top/btn_top_4.png 21799 2e730a41deca13012068fdf12d5c9c5d
+top/btn_top_kop.png 50820 b9ab4e5b5bb9dbbaeb49afd0af70745b
diff --git a/public/vendor/maimai/img/common/arrow.svg b/public/vendor/maimai/img/common/arrow.svg
new file mode 100644
index 0000000..085ef2d
--- /dev/null
+++ b/public/vendor/maimai/img/common/arrow.svg
@@ -0,0 +1 @@
+
+
+
+
+
diff --git a/public/vendor/maimai/img/song/utage/icon_buddy.png b/public/vendor/maimai/img/song/utage/icon_buddy.png
new file mode 100644
index 0000000..5390767
Binary files /dev/null and b/public/vendor/maimai/img/song/utage/icon_buddy.png differ
diff --git a/public/vendor/maimai/img/top/btn_chu.png b/public/vendor/maimai/img/top/btn_chu.png
new file mode 100644
index 0000000..1f6ee2c
Binary files /dev/null and b/public/vendor/maimai/img/top/btn_chu.png differ
diff --git a/public/vendor/maimai/img/top/btn_top_1.png b/public/vendor/maimai/img/top/btn_top_1.png
new file mode 100644
index 0000000..0346248
Binary files /dev/null and b/public/vendor/maimai/img/top/btn_top_1.png differ
diff --git a/public/vendor/maimai/img/top/btn_top_2.png b/public/vendor/maimai/img/top/btn_top_2.png
new file mode 100644
index 0000000..ea8efeb
Binary files /dev/null and b/public/vendor/maimai/img/top/btn_top_2.png differ
diff --git a/public/vendor/maimai/img/top/btn_top_4.png b/public/vendor/maimai/img/top/btn_top_4.png
new file mode 100644
index 0000000..8126ef7
Binary files /dev/null and b/public/vendor/maimai/img/top/btn_top_4.png differ
diff --git a/public/vendor/maimai/img/top/btn_top_kop.png b/public/vendor/maimai/img/top/btn_top_kop.png
new file mode 100644
index 0000000..6587cba
Binary files /dev/null and b/public/vendor/maimai/img/top/btn_top_kop.png differ
diff --git a/public/vendor/maimai/style.css b/public/vendor/maimai/style.css
new file mode 100644
index 0000000..94e2e35
--- /dev/null
+++ b/public/vendor/maimai/style.css
@@ -0,0 +1 @@
+@charset "UTF-8";/* 字体自托管：见 /vendor/maimai/fonts.css */input[type=text]{margin:0;padding:0;border:0;background-color:#fff;outline:0}.common--box{position:relative;width:87.5vw;border-radius:3.75vw;box-shadow:1.75vw 1.75vw 0 0 rgba(0,0,0,.2);background-color:#fff;margin:0 auto;padding:8.125vw 0}@media only screen and (min-width:769px){.common--box{width:81.8181818182vw;border-radius:2.7272727273vw;box-shadow:1.2727272727vw 1.2727272727vw 0 0 rgba(0,0,0,.2);padding:4.5454545455vw 0}}@media only screen and (min-width:1100px){.common--box{width:900px;border-radius:30px;box-shadow:14px 14px 0 0 rgba(0,0,0,.2);padding:50px 0}}.common--box:after,.common--box:before{position:absolute;display:block;content:"";width:75vw;height:1.5vw;left:50%;transform:translateX(-50%)}@media only screen and (min-width:769px){.common--box:after,.common--box:before{width:54.5454545455vw;height:.7272727273vw}}@media only screen and (min-width:1100px){.common--box:after,.common--box:before{width:600px;height:8px}}.common--box:before{top:0;border-radius:0 0 1.5vw 1.5vw;background-color:#ba5eea}@media only screen and (min-width:769px){.common--box:before{border-radius:0 0 .7272727273vw .7272727273vw}}@media only screen and (min-width:1100px){.common--box:before{border-radius:0 0 8px 8px}}.common--box:after{bottom:0;border-radius:1.5vw 1.5vw 0 0;background-color:#ffcedf}@media only screen and (min-width:769px){.common--box:after{border-radius:.7272727273vw .7272727273vw 0 0}}@media only screen and (min-width:1400px){.common--box:after{border-radius:8px 8px 0 0}}.common--top{position:fixed;z-index:100;display:block;bottom:2.5vw;right:2.5vw;width:15vw;transform:translateY(0);transition:.3s}.common--top.off{opacity:0;transform:translateY(30%);pointer-events:none}@media only screen and (min-width:769px){.common--top{transition:transform .3s}.common--top:hover{transform:translateY(-5%)}}@media only screen and (min-width:769px){.common--top{bottom:1.4285714286vw;right:1.4285714286vw;width:8.5714285714vw;transition:.3s}}@media only screen and (min-width:1400px){.common--top{bottom:20px;right:20px;width:120px}}.common--share{position:relative;width:87.5vw;border-radius:3.75vw;box-shadow:1.75vw 1.75vw 0 0 rgba(0,0,0,.2);background-color:#fff;margin:0 auto;padding:8.125vw 0}@media only screen and (min-width:769px){.common--share{width:81.8181818182vw;border-radius:2.7272727273vw;box-shadow:1.2727272727vw 1.2727272727vw 0 0 rgba(0,0,0,.2);padding:4.5454545455vw 0}}@media only screen and (min-width:1100px){.common--share{width:900px;border-radius:30px;box-shadow:14px 14px 0 0 rgba(0,0,0,.2);padding:50px 0}}.common--share:after,.common--share:before{position:absolute;display:block;content:"";width:75vw;height:1.5vw;left:50%;transform:translateX(-50%)}@media only screen and (min-width:769px){.common--share:after,.common--share:before{width:54.5454545455vw;height:.7272727273vw}}@media only screen and (min-width:1100px){.common--share:after,.common--share:before{width:600px;height:8px}}.common--share:before{top:0;border-radius:0 0 1.5vw 1.5vw;background-color:#ba5eea}@media only screen and (min-width:769px){.common--share:before{border-radius:0 0 .7272727273vw .7272727273vw}}@media only screen and (min-width:1100px){.common--share:before{border-radius:0 0 8px 8px}}.common--share:after{bottom:0;border-radius:1.5vw 1.5vw 0 0;background-color:#ffcedf}@media only screen and (min-width:769px){.common--share:after{border-radius:.7272727273vw .7272727273vw 0 0}}@media only screen and (min-width:1400px){.common--share:after{border-radius:8px 8px 0 0}}.common--header{display:flex;justify-content:center;align-items:center;margin:0 auto}.common--header__txt{margin:0 1.125vw}@media only screen and (min-width:769px){.common--header__txt{margin:0 1.8181818182vw}}@media only screen and (min-width:1400px){.common--header__txt{margin:0 20px}}.common--header__txt svg{width:100%;fill:#0b3871;fill-rule:evenodd}.common--header__icon{background-image:url(/vendor/maimai/img/prism/common/icon_header_left.svg);background-size:contain;background-repeat:no-repeat;background-position:center center;display:block;width:14vw;height:7vw}@media only screen and (min-width:769px){.common--header__icon{width:8vw;height:4vw;margin-bottom:0}}@media only screen and (min-width:1400px){.common--header__icon{width:112px;height:56px}}.common--header__icon.right{background-image:url(/vendor/maimai/img/prism/common/icon_header_right.svg)}.common--header__icon svg{width:100%;height:100%;fill:#f8b73d;fill-rule:evenodd}.common--btn{display:flex;align-items:center;justify-content:center;color:#fff;margin:0 auto;width:61.25vw;height:11.25vw;font-size:4.25vw;border-radius:12.5vw;font-weight:900;background-color:#e72139;box-shadow:0 2vw 0 0 #a51426;position:relative;word-break:break-all;white-space:nowrap}@media only screen and (min-width:769px){.common--btn{width:36.3636363636vw;height:5.4545454545vw;font-size:2.5454545455vw;box-shadow:0 .9090909091vw 0 0 #a51426;transition:.3s}.common--btn:hover{box-shadow:none;transform:translateY(.9090909091vw)}}@media only screen and (min-width:1100px){.common--btn{width:400px;height:60px;font-size:28px;box-shadow:0 10px 0 0 #a51426}.common--btn:hover{transform:translateY(10px)}}.common--btn:after{right:4.375vw}@media only screen and (min-width:769px){.common--btn:after{right:1.8181818182vw}}@media only screen and (min-width:1100px){.common--btn:after{right:20px}}.common--btn.next:after{position:absolute;display:block;content:"";width:2.25vw;height:2.5vw;background-image:url(/vendor/maimai/img/common/icon_next.png);background-size:cover;background-repeat:no-repeat}@media only screen and (min-width:769px){.common--btn.next:after{width:1.6363636364vw;height:1.8181818182vw}}@media only screen and (min-width:1100px){.common--btn.next:after{width:18px;height:20px}}.common--btn.blank:after{position:absolute;display:block;content:"";width:3.25vw;height:2.5vw;background-image:url(/vendor/maimai/img/common/icon_blank.png);background-size:cover;background-repeat:no-repeat}@media only screen and (min-width:769px){.common--btn.blank:after{width:2.3636363636vw;height:1.8181818182vw}}@media only screen and (min-width:1100px){.common--btn.blank:after{width:26px;height:20px}}.common--btn.download:after{position:absolute;display:block;content:"";width:4.5vw;height:5vw;background-image:url(/vendor/maimai/img/common/icon_download.png);background-size:cover;background-repeat:no-repeat}@media only screen and (min-width:769px){.common--btn.download:after{width:1.8181818182vw;height:2vw}}@media only screen and (min-width:1100px){.common--btn.download:after{width:20px;height:22px}}.common--title{padding-top:21.25vw;width:88.25vw;margin:0 auto}@media only screen and (min-width:769px){.common--title{padding-top:0;margin:6.3636363636vw auto 0;width:82.3636363636vw}}@media only screen and (min-width:1100px){.common--title{width:906px;margin:70px auto 0}}@keyframes gradient{0%{background-position:0 0}50%{background-position:0 100%}100%{background-position:0 0}}@keyframes pattern{0%{background-position:0 0}100%{background-position:-20% 20%}}@keyframes diamond{0%{transform:scaleX(1)}80%{transform:scaleX(1)}90%{transform:scaleX(0)}100%{transform:scaleX(1)}}@keyframes star{0%{opacity:0;transform:rotate(0)}20%{opacity:1}40%{opacity:0;transform:rotate(1turn)}100%{opacity:0;transform:rotate(1turn)}}@keyframes auroras{0%{opacity:1}20%{opacity:.6}80%{opacity:.6}100%{opacity:1}}@keyframes aurora{0%{opacity:0;transform:translateX(0)}1%{opacity:.8}80%{opacity:.8}99%{opacity:0;transform:translateX(-100%)}100%{opacity:0;transform:translateX(0)}}@keyframes cloud{0%{opacity:0;transform:translateX(0)}20%{opacity:1}80%{opacity:1}90%{opacity:0;transform:translateX(100%)}100%{opacity:0;transform:translateX(0)}}@keyframes moon{0%{transform:rotate(0)}100%{transform:rotate(30deg)}}@keyframes shooting-star{0%{transform:translateX(0) translateY(0);opacity:0}20%{opacity:1}40%{opacity:1}60%{transform:translateX(-100%) translateY(100%);opacity:0}to{transform:translateX(0) translateY(0);opacity:0}}@keyframes shooting-star-head{0%{transform:rotate(0)}to{transform:rotate(-1turn)}}@keyframes rainbow{0%{-webkit-clip-path:polygon(0 0,0 0,0 100%,0 100%);clip-path:polygon(0 0,0 0,0 100%,0 100%);transform:scale(.8)}to{-webkit-clip-path:polygon(0 0,100% 0,100% 100%,0 100%);clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transform:scale(1)}}@keyframes rainbow-bottom{0%{transform:scale(.8)}to{transform:scale(1)}}.bg{pointer-events:none;background-image:linear-gradient(0deg,#45c7e3,#7dc0fd 10%,#d3a1ff 25%,#ff99c0 50%,#d3a1ff 75%,#7dc0fd 90%,#45c7e3)}.bg.prism{width:100%;height:100%;position:fixed;top:0;left:0;z-index:0;overflow:hidden}.bg--wrap{position:relative;z-index:1;width:100%;height:100%;overflow:hidden}.bg--gradient{position:relative;top:50%;left:50%;width:calc(100% - 5.5vw);height:calc(100% - 5.5vw);border-radius:5vw;background-size:cover;background-image:linear-gradient(0deg,#fff 14%,#ffd5cf 24%,#ffd5cf 46%,#ffc5d5 56%,#eaabff 67%,#72bcfe 85%,#65f2df 95%);overflow:hidden;z-index:-99;transform:translate3d(-50%,-50%,0);animation:gradient 10s infinite linear}@media only screen and (min-width:769px){.bg--gradient{width:calc(100% - 3.1428571429vw);height:calc(100% - 3.1428571429vw);border-radius:2.8571428571vw}}.bg--gradient:before{content:"";display:block;background:transparent url(/vendor/maimai/img/prism/bg/bg_pattern.png) repeat;width:100%;height:100%;background-size:6.5vw auto;background-position:50%;position:fixed;top:0;left:0;mix-blend-mode:overlay;animation:pattern 10s infinite linear}@media only screen and (min-width:769px){.bg--gradient:before{background-size:3.7142857143vw auto}}@media only screen and (min-width:1400px){.bg--gradient:before{background-size:52px auto}}.bg--shine{position:fixed;top:0;left:0;width:100%;height:100%;z-index:3;background-image:url(/vendor/maimai/img/prism/bg/bg_shines_sp.png);background-repeat:repeat;background-size:95vw auto;background-position:center 7vw}@media only screen and (min-width:769px){.bg--shine{background-image:url(/vendor/maimai/img/prism/bg/bg_shines_pc.png);background-size:95.1428571429vw;background-position:center 1.7142857143vw}}@media only screen and (min-width:1400px){.bg--shine{background-size:1332px;background-position:center 24px}}.bg--shine__wrap{position:relative;width:100%;height:100%}.bg--shine__item{position:absolute;width:5vw;height:5vw;top:0;left:0;background-size:contain;background-repeat:no-repeat}@media only screen and (min-width:769px){.bg--shine__item{width:1.4285714286vw;height:1.4285714286vw}}@media only screen and (min-width:1400px){.bg--shine__item{width:20px;height:20px}}.bg--shine__item.diamond-pink{background-image:url(/vendor/maimai/img/prism/bg/bg_diamond_pink.png);top:9vw;left:68.25vw;animation:diamond 3s infinite 1s linear}@media only screen and (max-width:769px){.bg--shine__item.diamond-pink{width:3vw;height:3vw}}@media only screen and (min-width:769px){.bg--shine__item.diamond-pink{top:2.2857142857vw;left:23.1428571429vw}}@media only screen and (min-width:1400px){.bg--shine__item.diamond-pink{top:32px;left:324px}}.bg--shine__item.diamond-yellow{background-image:url(/vendor/maimai/img/prism/bg/bg_diamond_yellow.png);top:6.5vw;left:74.5vw;animation:diamond 3s infinite 2s linear}@media only screen and (min-width:769px){.bg--shine__item.diamond-yellow{top:21.8571428571vw;left:9.7142857143vw}}@media only screen and (min-width:1400px){.bg--shine__item.diamond-yellow{top:306px;left:136px}}.bg--shine__item.diamond-white{background-image:url(/vendor/maimai/img/prism/bg/bg_diamond_white.png);top:16.5vw;left:50.5vw;animation:diamond 3s infinite linear}@media only screen and (min-width:769px){.bg--shine__item.diamond-white{top:18.2857142857vw;left:84.2857142857vw}}@media only screen and (min-width:1400px){.bg--shine__item.diamond-white{top:256px;left:1180px}}.bg--shine__item.star-white{background-image:url(/vendor/maimai/img/prism/bg/bg_star_white.png);width:7.5vw;height:7.5vw;top:21vw;left:79.5vw;opacity:0;animation:star 3s infinite linear}@media only screen and (min-width:769px){.bg--shine__item.star-white{width:2.1428571429vw;height:2.1428571429vw;top:16.4285714286vw;left:39.4285714286vw}}@media only screen and (min-width:1400px){.bg--shine__item.star-white{width:30px;height:30px;top:230px;left:552px}}.bg--shine__item.star-yellow{width:7.5vw;height:7.5vw;opacity:0;animation:star 3s infinite 1s linear}@media only screen and (min-width:769px){.bg--shine__item.star-yellow{width:2.1428571429vw;height:2.1428571429vw;top:16.4285714286vw;left:39.4285714286vw}}@media only screen and (min-width:1400px){.bg--shine__item.star-yellow{width:30px;height:30px;top:230px;left:552px}}.bg--shine__item.star-yellow.i1{background-image:url(/vendor/maimai/img/prism/bg/bg_star_yellow.png);top:28.5vw;left:3vw}@media only screen and (min-width:769px){.bg--shine__item.star-yellow.i1{top:8.1428571429vw;left:.8571428571vw}}@media only screen and (min-width:1400px){.bg--shine__item.star-yellow.i1{top:114px;left:12px}}.bg--shine__item.star-yellow.i2{background-image:url(/vendor/maimai/img/prism/bg/bg_star_yellow.png);top:5vw;left:30vw}@media only screen and (min-width:769px){.bg--shine__item.star-yellow.i2{top:28.8571428571vw;left:96.8571428571vw}}@media only screen and (min-width:1400px){.bg--shine__item.star-yellow.i2{top:404px;left:1356px}}.bg--aurora{position:absolute;top:0;left:0;width:100%;height:61.5vw;background-image:url(/vendor/maimai/img/prism/bg/bg_aurora_sp.png);background-repeat:repeat-x;background-size:415vw;background-position:left bottom 37.5vw;animation:auroras 40s infinite linear;z-index:2}@media only screen and (min-width:769px){.bg--aurora{background-image:url(/vendor/maimai/img/prism/bg/bg_aurora_pc.png);height:17.5714285714vw;background-size:228.2857142857vw auto;background-position:0 100%;animation:auroras 50s infinite linear}}@media only screen and (min-width:1400px){.bg--aurora{height:246px;background-size:3196px auto}}.bg--aurora:after,.bg--aurora:before{content:"";display:block;background-image:url(/vendor/maimai/img/prism/bg/bg_aurora_sp.png);position:absolute;top:0;left:0;background-size:contain;background-repeat:no-repeat;width:200%}.bg--aurora:before{height:42vw;top:0;background-repeat:repeat-x;opacity:0;animation:aurora 120s infinite linear}@media only screen and (min-width:769px){.bg--aurora:before{height:33.7857142857vw;top:-17.8571428571vw;left:0}}@media only screen and (min-width:1400px){.bg--aurora:before{height:473px;top:-250px}}.bg--aurora:after{height:101.75vw;top:-16.5vw;background-repeat:repeat-x;opacity:0;animation:aurora 90s infinite linear reverse}@media only screen and (min-width:769px){.bg--aurora:after{height:12vw;top:-19.2857142857vw;left:0}}@media only screen and (min-width:1400px){.bg--aurora:after{height:168px;top:-270px}}.bg--cloud{position:absolute;width:100%;height:100%;top:0;left:0}.bg--cloud__item{display:block;position:absolute;top:0;left:0;background-size:contain;background-repeat:no-repeat;z-index:1}.bg--cloud__item.i1{background-image:url(/vendor/maimai/img/prism/bg/bg_cloud_back_l.png);top:.5vw;left:-20.5vw;width:32.75vw;height:17.5vw;animation:cloud 12s infinite linear}@media only screen and (min-width:769px){.bg--cloud__item.i1{top:16.8571428571vw;left:-4.1428571429vw;width:18.7142857143vw;height:10vw}}@media only screen and (min-width:1400px){.bg--cloud__item.i1{top:236px;left:-58px;width:262px;height:140px}}.bg--cloud__item.i2{background-image:url(/vendor/maimai/img/prism/bg/bg_cloud_back_r.png);top:28.5vw;left:48vw;width:67vw;height:35vw;animation:cloud 14s infinite linear}@media only screen and (min-width:769px){.bg--cloud__item.i2{top:11.7142857143vw;left:71.4285714286vw;width:38.2857142857vw;height:20vw}}@media only screen and (min-width:1400px){.bg--cloud__item.i2{top:164px;left:1000px;width:536px;height:280px}}.bg--cloud__item.i3{background-image:url(/vendor/maimai/img/prism/bg/bg_cloud_back_c.png);top:81vw;left:75vw;width:30.25vw;height:16.125vw;animation:cloud 13s infinite linear}@media only screen and (min-width:769px){.bg--cloud__item.i3{top:29.2857142857vw;left:81.4285714286vw;width:17.2857142857vw;height:9.2142857143vw}}@media only screen and (min-width:1400px){.bg--cloud__item.i3{top:410px;left:1140px;width:242px;height:129px}}.bg--cloud__item.i4{background-image:url(/vendor/maimai/img/prism/bg/bg_cloud_front_l.png);top:67vw;left:4.5vw;width:37.375vw;height:17.25vw;animation:cloud 18s infinite linear}@media only screen and (min-width:769px){.bg--cloud__item.i4{top:26.4285714286vw;left:7.4285714286vw;width:21.3571428571vw;height:9.8571428571vw}}@media only screen and (min-width:1400px){.bg--cloud__item.i4{top:370px;left:104px;width:299px;height:138px}}.bg--cloud__item.i5{background-image:url(/vendor/maimai/img/prism/bg/bg_cloud_front_r.png);top:36.5vw;left:66.5vw;width:35.5vw;height:20vw;animation:cloud 20s infinite linear}@media only screen and (min-width:769px){.bg--cloud__item.i5{top:16.5vw;left:82.2857142857vw;width:20.3571428571vw;height:11.4285714286vw}}@media only screen and (min-width:1400px){.bg--cloud__item.i5{top:231px;left:1152px;width:185px;height:160px}}.bg--cloud__item.i6{background-image:url(/vendor/maimai/img/prism/bg/bg_cloud_front_c.png);top:90vw;left:59vw;width:32.375vw;height:15.375vw;animation:cloud 19s infinite linear}@media only screen and (min-width:769px){.bg--cloud__item.i6{top:34.5714285714vw;left:72.8571428571vw;width:18.5vw;height:8.7857142857vw}}@media only screen and (min-width:1400px){.bg--cloud__item.i6{top:484px;left:1020px;width:259px;height:123px}}.bg--moon{position:absolute;top:4vw;left:4vw;width:24.75vw;height:24.75vw;z-index:2;background-size:contain;background-repeat:no-repeat;background-image:url(/vendor/maimai/img/prism/bg/bg_moon.png)}@media only screen and (min-width:769px){.bg--moon{top:0;left:1.4285714286vw;width:14.1428571429vw;height:14.1428571429vw;animation:moon 6s infinite linear alternate}}@media only screen and (min-width:1400px){.bg--moon{left:20px;width:198px;height:198px}}.bg--star__item{position:absolute;top:0;left:0;z-index:0;animation:shooting-star 2s infinite linear;opacity:0}.bg--star__item:after,.bg--star__item:before{content:"";display:block;position:absolute;background-size:contain;background-repeat:no-repeat}.bg--star__item:before{top:0;right:0;width:91%;height:91%;background-image:url(/vendor/maimai/img/prism/bg/bg_shootingstar_tail.png);background-size:contain}.bg--star__item:after{position:absolute;bottom:0;left:0;width:14%;height:14%;background-image:url(/vendor/maimai/img/prism/bg/bg_shootingstar_head.png);background-size:contain;background-repeat:no-repeat;transform-origin:50% 50%;animation:shooting-star-head 2.2s infinite linear}.bg--star__item.green:before{background-image:url(/vendor/maimai/img/prism/bg/bg_shootingstar_tail_green.png)}.bg--star__item.green:after{background-image:url(/vendor/maimai/img/prism/bg/bg_shootingstar_head_green.png)}.bg--star__item.pink:before{background-image:url(/vendor/maimai/img/prism/bg/bg_shootingstar_tail_pink.png)}.bg--star__item.pink:after{background-image:url(/vendor/maimai/img/prism/bg/bg_shootingstar_head_pink.png)}.bg--star__item.i1{width:19.25vw;height:19.25vw;top:-11.5vw;left:4vw}@media only screen and (min-width:769px){.bg--star__item.i1{width:11vw;height:11vw;top:5.7857142857vw;left:10.5vw}}@media only screen and (min-width:1400px){.bg--star__item.i1{width:154px;height:154px;top:81px;left:147px}}.bg--star__item.i2{width:19.25vw;height:19.25vw;top:-11vw;left:88vw;animation:shooting-star 2s infinite .8s linear}@media only screen and (min-width:769px){.bg--star__item.i2{width:11vw;height:11vw;top:5.2857142857vw;left:34.7142857143vw}}@media only screen and (min-width:1400px){.bg--star__item.i2{width:154px;height:154px;top:74px;left:486px}}.bg--star__item.i3{width:38.5vw;height:38.5vw;top:11.5vw;left:9vw}@media only screen and (min-width:769px){.bg--star__item.i3{width:22vw;height:22vw;top:1.4285714286vw;left:31.1428571429vw}}@media only screen and (min-width:1400px){.bg--star__item.i3{width:308px;height:308px;top:20px;left:436px}}.bg--star__item.i4{width:38.5vw;height:38.5vw;top:3vw;left:313vw;animation:shooting-star 2s infinite 1s linear}@media only screen and (min-width:769px){.bg--star__item.i4{width:11vw;height:11vw;top:.8571428571vw;left:89.4285714286vw}}@media only screen and (min-width:1400px){.bg--star__item.i4{width:154px;height:154px;top:12px;left:1252px}}.bg--star__item.i5{display:none}@media only screen and (min-width:769px){.bg--star__item.i5{display:block;width:22vw;height:22vw;top:-4.2857142857vw;left:87.1428571429vw;animation:shooting-star 2s infinite .8s linear}}@media only screen and (min-width:1400px){.bg--star__item.i5{width:308px;height:308px;top:-60px;left:1220px}}.bg--star__item.i6{display:none}@media only screen and (min-width:769px){.bg--star__item.i6{display:block;width:11vw;height:11vw;top:21.7142857143vw;left:87.8571428571vw;animation:shooting-star 2s infinite 1s linear}}@media only screen and (min-width:1400px){.bg--star__item.i6{width:154px;height:154px;top:304px;left:1230px}}.bg--star__item.i7{display:none}@media only screen and (min-width:769px){.bg--star__item.i7{display:block;width:18.1428571429vw;height:18.1428571429vw;top:14.5714285714vw;left:110vw;animation:shooting-star 2s infinite 1s linear}}@media only screen and (min-width:1400px){.bg--star__item.i7{width:254px;height:254px;top:204px;left:1540px}}.bg--rainbow:before{content:"";display:block;position:absolute;background-repeat:no-repeat;width:100%;height:90vw;bottom:44vw;background-image:url(/vendor/maimai/img/prism/bg/bg_rainbow_sp.png);background-size:100%;background-repeat:no-repeat;background-position:50%;-webkit-clip-path:polygon(0 0,0 0,0 100%,0 100%);clip-path:polygon(0 0,0 0,0 100%,0 100%);animation:rainbow 2s ease forwards;z-index:3}@media only screen and (min-width:769px){.bg--rainbow:before{background-image:url(/vendor/maimai/img/prism/bg/bg_rainbow_pc.png);background-size:54.5vw 28.5vw;height:28.5vw;bottom:10vw}}@media only screen and (min-width:1400px){.bg--rainbow:before{background-size:763px 399px;height:399px;bottom:140px}}.bg--rainbow__cloud{position:absolute;background-repeat:no-repeat;width:100%;height:57.5vw;bottom:35vw;background-image:url(/vendor/maimai/img/prism/bg/bg_rainbow_btm_sp.png);background-size:100vw 27vw;background-position:50%;animation:rainbow-bottom 2s ease forwards;z-index:3}@media only screen and (min-width:769px){.bg--rainbow__cloud{background-image:url(/vendor/maimai/img/prism/bg/bg_rainbow_btm_pc.png);background-size:98.5714285714vw 16.4285714286vw;height:16.4285714286vw;bottom:2.8571428571vw}}@media only screen and (min-width:1400px){.bg--rainbow__cloud{background-size:1380px 230px;height:230px;bottom:40px}}.bg--rainbow__cloud:after{content:"";display:block;position:absolute;background-repeat:no-repeat;width:100%;height:100%;top:-26vw;background-image:url(/vendor/maimai/img/prism/bg/bg_rainbow_back_sp.png);background-size:119%;background-position:0;z-index:-4}@media only screen and (min-width:769px){.bg--rainbow__cloud:after{display:none}}.header{position:relative;z-index:1000000}.header--language{width:93.125vw;height:10vw;top:3.75vw;border-radius:100px;background-color:#fff;position:absolute;left:50%;transform:translateX(-50%);box-shadow:1.25vw 1.25vw 0 rgba(0,0,0,.2);display:flex;align-items:center;justify-content:space-between;padding-left:3.75vw}@media only screen and (min-width:769px){.header--language{box-shadow:.7142857143vw .7142857143vw 0 rgba(0,0,0,.2)}}@media only screen and (min-width:1400px){.header--language{box-shadow:10px 10px 0 rgba(0,0,0,.2)}}@media only screen and (min-width:769px){.header--language{display:none}}.header--language__link{background-color:#ba5eea;border-radius:0 100px 100px 0;width:23.875vw;padding-left:2.5vw;height:100%;display:flex;align-items:center}.header--language__text{font-size:2.5vw;font-weight:800;flex:1}.header--language__svg{width:15vw;margin-top:.5vw}.header--language__svg .svg{width:100%;height:auto;fill:#fff;fill-rule:evenodd}.header--language__arrow{width:3.75vw;margin-left:1.25vw;font-size:0;position:relative}.header--language__arrow img{position:relative;z-index:10}.header--language__arrow::after{display:block;content:"";position:absolute;background-color:#ba5eea;width:1.875vw;height:1.875vw;top:50%;left:50%;transform:translate(-50%,-50%);z-index:0}.header--btn{width:15vw;height:15vw;background-color:#fff;border:1.25vw solid #e72139;position:fixed;z-index:10;top:7.5vw;right:2.5vw;border-radius:100px;box-shadow:1.25vw 1.25vw 0 rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;flex-direction:column;transition:.3s;transform:translateY(0)}@media only screen and (min-width:769px){.header--btn{box-shadow:.7142857143vw .7142857143vw 0 rgba(0,0,0,.2)}}@media only screen and (min-width:1400px){.header--btn{box-shadow:10px 10px 0 rgba(0,0,0,.2)}}.header--btn.off{opacity:0;transform:translateY(-100%);pointer-events:none}@media only screen and (min-width:769px){.header--btn{display:none}}.header--btn span{display:block;width:5.625vw;height:1vw;background-color:#e72139;border-radius:100px;position:relative}.header--btn span:first-child{top:-1vw}.header--btn span:last-child{top:1vw}.header--nav{padding-top:7.5vw;position:fixed;top:-100%;left:0;width:100%;height:100%;background-color:#fff;z-index:1000;transition:all .3s;opacity:0;box-shadow:1.25vw 1.25vw 0 rgba(0,0,0,.2)}@media only screen and (min-width:769px){.header--nav{box-shadow:.7142857143vw .7142857143vw 0 rgba(0,0,0,.2)}}@media only screen and (min-width:1400px){.header--nav{box-shadow:10px 10px 0 rgba(0,0,0,.2)}}@media only screen and (min-width:769px){.header--nav{display:flex;align-items:flex-end;justify-content:space-between;opacity:1;margin:1.4285714286vw auto 0;width:85.7142857143vw;height:7.1428571429vw;border-radius:3.5714285714vw;padding-top:0;padding-left:2.3571428571vw;position:relative;top:auto;left:auto;transition:none}}@media only screen and (min-width:1400px){.header--nav{margin:20px auto 0;width:1200px;height:100px;border-radius:50px;padding-left:33px}}.header--nav.open{top:0;opacity:1}.header--nav__btn{width:15vw;height:15vw;background-color:#ba5eea;position:absolute;top:7.5vw;right:2.5vw;border-radius:100px;display:flex;align-items:center;justify-content:center;flex-direction:column}@media only screen and (min-width:769px){.header--nav__btn{display:none}}.header--nav__btn span{display:block;width:6.25vw;height:1vw;background-color:#fff;border-radius:100px;position:relative}.header--nav__btn span:first-child{top:.5vw;transform:rotate(45deg)}.header--nav__btn span:last-child{top:-.5vw;transform:rotate(-45deg)}.header--nav__logo{display:block;width:52.625vw;transform:translate3d(0,0,0)}@media only screen and (max-width:769px){.header--nav__logo{position:relative;z-index:2;left:50%;transform:translate3d(-50%,0,0)}}@media only screen and (min-width:769px){.header--nav__logo{width:12.7857142857vw;margin:0 0 1.5vw;transition:opacity .3s}.header--nav__logo:hover{opacity:.7}}@media only screen and (min-width:1400px){.header--nav__logo{width:179px;margin:0 0 21px}}.header--nav__inner{margin:6.5vw 0 0 0}@media only screen and (min-width:769px){.header--nav__inner{margin:0 3.5714285714vw 1.4285714286vw 0}}@media only screen and (min-width:1400px){.header--nav__inner{margin:0 50px 20px 0}}@media only screen and (min-width:769px){.header--nav__list{display:flex}}.header--nav__item{margin:5vw 0 0}@media only screen and (min-width:769px){.header--nav__item{display:flex;align-items:center;margin:0}}@media only screen and (min-width:769px){.header--nav__item:not(:last-child){margin:0 .8571428571vw 0 0}}@media only screen and (min-width:1400px){.header--nav__item:not(:last-child){margin:0 12px 0 0}}.header--nav__item:not(:last-child)::after{display:block;content:"";width:3.75vw;height:.5vw;background-color:#e5e5e5;margin:5vw auto 0}@media only screen and (min-width:769px){.header--nav__item:not(:last-child)::after{width:1px;height:1vw;margin:0 0 0 1vw}}@media only screen and (min-width:1400px){.header--nav__item:not(:last-child)::after{height:14px;margin:0 0 0 14px}}.header--nav__link{display:flex;align-items:center;justify-content:center;margin:0 auto;position:relative}@media only screen and (min-width:769px){.header--nav__link.on::before,.header--nav__link:hover::before{position:absolute;bottom:-1.4285714286vw;content:"";display:block;width:100%;background-color:#ba5eea;height:.3571428571vw;border-radius:100px 100px 0 0}}@media only screen and (min-width:1400px){.header--nav__link.on::before,.header--nav__link:hover::before{height:5px;bottom:-20px}}.header--nav__link.blank:after{display:block;content:"";background-image:url('data:image/svg+xml;utf8,：分数族走 background-image（自带颜色），
+ // 白字族走 mask + background-color（游戏里就是这样运行时染色的）。
+ const fill = node.querySelector('.dan-num-fill');
+ const style = getComputedStyle(fill ?? node);
+ const cell = node.querySelector('.dan-num-char');
+ const cellStyle = cell ? getComputedStyle(cell) : null;
+ const advance = cell
+ ? cell.getBoundingClientRect().width + (parseFloat(cellStyle.marginRight) || 0) : 0;
+ // 图集里没有的字符（「—」这种占位符）走普通文字那条路：颜色落在文字本身上。
+ const plain = node.querySelector('.dan-num-plain');
+ return {
+ fill: plain ? getComputedStyle(plain).color : style.backgroundColor,
+ mask: style.maskImage || style.webkitMaskImage,
+ atlas: style.backgroundImage,
+ outline: Boolean(node.querySelector('.dan-num-outline')),
+ label: node.getAttribute('aria-label'),
+ height: Math.round(node.getBoundingClientRect().height),
+ advance: Math.round(advance * 100) / 100,
+ width: Math.round(node.getBoundingClientRect().width),
+ };
+ };
+ return JSON.stringify({
+ open: Boolean(dialog?.open),
+ plate: { rect: rel(dialog.querySelector('.dan-verdict')), name: text(dialog, '.dan-plate-name'),
+ nameLen: dialog.querySelector('.dan-plate-name')?.dataset.len ?? null,
+ nameFont: (() => { const n = dialog.querySelector('.dan-plate-name'); if (!n) return null;
+ const s = getComputedStyle(n); return { size: s.fontSize, weight: s.fontWeight, fill: s.color }; })(),
+ count: text(dialog, '.dan-verdict-count'),
+ legacyStamp: Boolean(dialog.querySelector('.dan-verdict-img')),
+ nameRect: rel(dialog.querySelector('.dan-plate-name')) },
+ life: { rect: rel(dialog.querySelector('.dan-life')), label: shown(dialog, '.dan-life-count'),
+ base: dialog.querySelector('.dan-life-base')?.getAttribute('src')?.split('/').pop() ?? null },
+ total: { label: text(dialog, '.dan-total-label'), labelRect: rel(dialog.querySelector('.dan-total-label')),
+ num: shown(dialog, '.dan-total-num'), rect: rel(dialog.querySelector('.dan-total-num')),
+ font: font(dialog, '.dan-total-num') },
+ dx: { label: text(dialog, '.dan-dxscore-label'), num: shown(dialog, '.dan-dxscore-num'),
+ rect: rel(numNode(dialog, '.dan-dxscore-num')), rowRect: rel(dialog.querySelector('.dan-dxscore-row')),
+ labelRect: rel(dialog.querySelector('.dan-dxscore-label')), font: font(dialog, '.dan-dxscore-num') },
+ rows: [...dialog.querySelectorAll('.dan-track')].map((track) => {
+ const rowBox = track.getBoundingClientRect();
+ return {
+ rect: rel(track),
+ no: text(track, '.dan-track-no'), name: text(track, '.dan-track-name'),
+ // 档位名牌已经删掉；这两项留着是为了断言它**不在**（并且标题条左移顶上那一格）。
+ diff: text(track, '.dan-track-diff'), diffLines: track.querySelectorAll('.dan-track-diff > *').length,
+ titlebar: relTo(rowBox, track.querySelector('.dan-track-titlebar')),
+ jacket: text(track, '.dan-track-jacket'), jacketBig: text(track, '.dan-track-jacket b'),
+ jacketSmall: text(track, '.dan-track-jacket small'),
+ ach: shown(track, '.dan-track-achvalue'), achFont: font(track, '.dan-track-achvalue'),
+ // 达成率那串数字自己的框（取里面那层 .dan-num，不是外面那个定宽容器）。
+ achNumRect: relTo(rowBox, numNode(track, '.dan-track-achvalue')),
+ dx: shown(track, '.dan-track-dxnum'), dxFont: font(track, '.dan-track-dxnum'),
+ limit: text(track, '.dan-track-limit'), judge: text(track, '.dan-track-judge'),
+ badge: track.querySelector('.dan-track-badge')?.getAttribute('src')?.split('/').pop() ?? '',
+ // badgeRect / stamp 是**底图坐标**（抠图用），badgeRow 才是行内坐标。
+ badgeRect: rel(track.querySelector('.dan-track-badge')),
+ badgeRow: relTo(rowBox, track.querySelector('.dan-track-badge')),
+ stamp: rel(track.querySelector('.dan-track-stamp')),
+ boxes: ['no', 'jacket', 'dxbox', 'dxnum', 'titlebar', 'name', 'diff', 'achbox', 'achvalue',
+ 'badge', 'limit', 'frame', 'band']
+ .map((key) => [key, relTo(rowBox, track.querySelector('.dan-track-' + key))]).filter(([, r]) => r),
+ };
+ }),
+ });
+ })()`);
+
+ console.log('\n=== 2) 结算页版式（四道满分成 → 金） ===');
+ check('认定记录里点得到「查看结算」', await openLatestResult() === 'CLICKED');
+ const page = JSON.parse(await readLayout());
+ check('结算页弹出来了', page.open === true);
+ const rows = page.rows ?? [];
+ check('四道各一张卡', rows.length === 4, `${rows.length} 张`);
+ check('四张卡按官方坐标摆：x 267 宽 576，行距 122',
+ rows.every((row, i) => Math.abs(row.rect.left - ROW.left) <= 2 && Math.abs(row.rect.w - ROW.width) <= 2
+ && Math.abs(row.rect.top - ROW.tops[i]) <= 2),
+ rows.map((row) => `${row.rect.top}@${row.rect.w}`).join(' '));
+ const outOfRow = [];
+ for (const row of rows) {
+ for (const [key, rect] of row.boxes) {
+ if (rect.left < -2 || rect.top < -2 || rect.left + rect.w > row.rect.w + 2 || rect.top + rect.h > row.rect.h + 2) {
+ outOfRow.push(`${row.no}:${key}`);
+ }
+ }
+ }
+ check('行内组件都待在底板里', outOfRow.length === 0, outOfRow.join(','));
+ /** 行内子组件的 rect（`boxes` 里量的，全部是**行内坐标**）。 */
+ const boxOf = (row, key) => (row.boxes.find(([name]) => name === key) ?? [])[1];
+ check('边框本体照原版量出来的比例摆（行内 3.6,3.6 / 568.8×118.8）',
+ rows.every((row) => rectNear(boxOf(row, 'frame'), CARD.frame)),
+ fmtRect(boxOf(rows[0], 'frame')));
+ check('曲绘槽是原版那块方槽（行内 10.8,10.8 / 105.3×105.3），里面写完整题号 + 这一题的 CF rating',
+ rows.every((row) => rectNear(boxOf(row, 'jacket'), CARD.slot)
+ && /^\d+[A-Z]+\d*$/.test(row.jacketBig) && /^\d+$/.test(row.jacketSmall)),
+ `${fmtRect(boxOf(rows[0], 'jacket'))} · ${rows[0].jacketBig}/${rows[0].jacketSmall}`);
+ check('难度名牌已删掉，歌名条占顶部一整行（左端与白盒左端对齐、右端贴到边框内右沿）',
+ rows.every((row) => !row.diff && row.diffLines === 0
+ && rectNear(row.titlebar, CARD.titlebar)
+ // 「占一整行」= 左端跟白盒左端对齐（原版那格难度名牌的位置被歌名条顶掉），
+ // 右端离边框外沿只剩 7.2px（原版 8px × 0.9）。
+ && near(row.titlebar.left, boxOf(row, 'achbox').left)
+ && near(row.titlebar.left + row.titlebar.w, CARD.frame.left + CARD.frame.w - 7.2)
+ && near(row.titlebar.top, CARD.frame.top + 7.2)),
+ rows.map((row) => `diff=${row.diff || '无'} 条 ${row.titlebar?.left}…${row.titlebar?.left + row.titlebar?.w}`).join(' '));
+ // 达成率那串数字必须待在白盒里，而且白盒不能碰到右边那块紫场里的评级徽章
+ // （原版白盒右下角那道大 R 弧就是给徽章让位的）。
+ const spill = rows.map((row) => {
+ const box = boxOf(row, 'achbox');
+ const num = row.achNumRect;
+ if (!box || !num) return 'no-box';
+ const right = num.left + num.w;
+ if (num.left < box.left) return `数字出盒左 ${num.left} < ${box.left}`;
+ if (right > box.left + box.w - 6) return `数字出盒右 ${right} > ${box.left + box.w - 6}`;
+ // 右对齐：整串的右端固定在离白盒右沿 6…20px 的地方（短一位数的串不许往左缩）。
+ if (right < box.left + box.w - 20) return `数字没右对齐 ${right} < ${box.left + box.w - 20}`;
+ if (num.top < box.top || num.top + num.h > box.top + box.h + 1) {
+ return `数字出盒高 ${num.top}..${num.top + num.h} vs ${box.top}..${box.top + box.h}`;
+ }
+ if (row.badgeRow && box.left + box.w + 10 > row.badgeRow.left) {
+ return `白盒碰徽章 ${Math.round(box.left + box.w + 10 - row.badgeRow.left)}px`;
+ }
+ return '';
+ }).filter(Boolean);
+ check('达成率数字不溢出白盒、白盒与右侧徽章留 10px 以上空隙',
+ spill.length === 0,
+ spill.join(',') || `数字 ${fmtRect(rows[0].achNumRect)} 盒 ${fmtRect(boxOf(rows[0], 'achbox'))}`
+ + ` 徽章左 ${rows[0].badgeRow?.left}`);
+ check('DX 分数在卡片右下角、右端贴到边框内右沿（与底带同高的那块白牌）',
+ rows.every((row) => {
+ const dx = boxOf(row, 'dxbox');
+ const box = boxOf(row, 'achbox');
+ return rectNear(dx, CARD.dxbox)
+ && near(dx.left + dx.w, CARD.frame.left + CARD.frame.w - 1.8)
+ && dx.top >= box.top + box.h - 2 && dx.left >= box.left + box.w;
+ }),
+ fmtRect(boxOf(rows[0], 'dxbox')));
+ check('限时写进底带左侧（原版那条浅色带，右端才是 DX 分数白牌）',
+ rows.every((row) => {
+ const band = boxOf(row, 'band');
+ const limit = boxOf(row, 'limit');
+ const dx = boxOf(row, 'dxbox');
+ return rectNear(band, CARD.band) && rectIn(limit, band, 0) && near(limit.left, band.left)
+ && limit.left + limit.w <= dx.left + 1;
+ }),
+ `带 ${fmtRect(boxOf(rows[0], 'band'))} · 限时 ${fmtRect(boxOf(rows[0], 'limit'))}`);
+ check('评级徽章放进右上那块紫场（白盒右边 · 歌名条下边 · 白牌上边）',
+ rows.every((row) => {
+ if (!row.badgeRow) return true; // 超时／未开始那一屏用文字判定，没有徽章
+ const box = boxOf(row, 'achbox');
+ const dx = boxOf(row, 'dxbox');
+ return rectNear(row.badgeRow, CARD.badge)
+ && row.badgeRow.left >= box.left + box.w
+ && row.badgeRow.top >= row.titlebar.top + row.titlebar.h
+ && row.badgeRow.top + row.badgeRow.h <= dx.top;
+ }),
+ fmtRect(rows[0].badgeRow));
+ check('标题条写题目名，不是「段位認定第 N 道」',
+ rows.every((row, i) => row.name && row.name === seeded[i]?.title && !/段位認定第/.test(row.name)),
+ rows.map((row) => row.name).join(' | '));
+ check('评级徽章是游戏内那套单级素材且按原版比例放到 99×40（不再拿「A～AAA」区间图充数）',
+ rows.every((row) => row.badge === 'gam-rank-sssp.png' && Math.abs(row.badgeRect.w - CARD.badge.w) <= 2
+ && Math.abs(row.badgeRect.h - CARD.badge.h) <= 2),
+ `${rows[0]?.badge} ${rows[0]?.badgeRect?.w}×${rows[0]?.badgeRect?.h}`);
+ check('四道达成率都上了官方金色图集',
+ rows.every((row) => /num-score-gold/.test(row.achFont?.atlas ?? '')), rows.map((row) => row.achFont?.atlas).join(' | '));
+ check('单题 DX 分数不叠描边层（小字要干净）',
+ rows.every((row) => row.dxFont?.outline === false && /rgb\(13, 42, 99\)/.test(row.dxFont?.fill ?? '')),
+ `描边层 ${rows[0]?.dxFont?.outline} / ${rows[0]?.dxFont?.fill}`);
+
+ check('左下白框里写档位名（不再是合格印）',
+ page.plate.name === '上级' && page.plate.legacyStamp === false, `${page.plate.name} · 旧印 ${page.plate.legacyStamp}`);
+ check('段位名落在白框里、字重够重',
+ page.plate.rect.left === PLATE.left && page.plate.rect.top === PLATE.top
+ && page.plate.rect.w === PLATE.w && page.plate.rect.h === PLATE.h && Number(page.plate.nameFont.weight) >= 800,
+ `${page.plate.rect.left},${page.plate.rect.top} ${page.plate.rect.w}×${page.plate.rect.h} · ${page.plate.nameFont.size}/${page.plate.nameFont.weight}`);
+ check('结论变成名字下面一行小字', /合格 · 4 \/ 4 道通关/.test(page.plate.count ?? ''), page.plate.count);
+ check('心放大到 200×200 且用官方绿色底盘，心里写通关道数',
+ page.life.rect.w === LIFE.w && page.life.rect.h === LIFE.h
+ && page.life.base === 'life-base-green.png' && page.life.label === '4',
+ `${page.life.rect.w}×${page.life.rect.h} · ${page.life.base} · ${page.life.label}`);
+
+ check('「总达成率」标签落进底图预留的白格',
+ Math.abs(page.total.labelRect.left - TOTAL_LABEL.left) <= 2 && Math.abs(page.total.labelRect.top - TOTAL_LABEL.top) <= 2
+ && Math.abs(page.total.labelRect.w - TOTAL_LABEL.w) <= 2 && Math.abs(page.total.labelRect.h - TOTAL_LABEL.h) <= 2,
+ `${page.total.labelRect.left},${page.total.labelRect.top} ${page.total.labelRect.w}×${page.total.labelRect.h}`);
+ check('总达成率 = 四道达成率之和（官方金色图集）',
+ Math.abs(Number(String(page.total.num).replace('%', '')) - expectAch) < 0.01 && /%$/.test(page.total.num ?? ''),
+ `${page.total.num} vs ${expectAch.toFixed(4)}%`);
+ const totalRight = page.total.rect.left + page.total.rect.w;
+ check('大数字落在色带上、右端对齐 x 950',
+ Math.abs(totalRight - RIGHT_EDGE) <= 6 && page.total.rect.top >= 700 && page.total.rect.top + page.total.rect.h <= DX_ROW.top,
+ `右 ${totalRight} · y ${page.total.rect.top}..${page.total.rect.top + page.total.rect.h}`);
+ const glyphs = String(page.total.num).length + 1;
+ // 官方是密排：分数族那套图集格宽 74 / 格高 98，密排后每字步进 67 ⇒ 0.68 上下。
+ check('数字密排（官方字距，不再一个字一个字分开）',
+ page.total.font.advance / page.total.font.height <= 0.69,
+ `每字步进 ${page.total.font.advance}px / 字高 ${page.total.font.height} = ${(page.total.font.advance / page.total.font.height).toFixed(3)}（占位 ${glyphs} 个字形，整串宽 ${page.total.font.width}）`);
+
+ check('DX 分数条就是底图预留的那条白牌',
+ Math.abs(page.dx.rowRect.left - DX_ROW.left) <= 2 && Math.abs(page.dx.rowRect.top - DX_ROW.top) <= 2
+ && Math.abs(page.dx.rowRect.w - DX_ROW.w) <= 2 && Math.abs(page.dx.rowRect.h - DX_ROW.h) <= 2,
+ `${page.dx.rowRect.left},${page.dx.rowRect.top} ${page.dx.rowRect.w}×${page.dx.rowRect.h}`);
+ check('标签写「DX分数」（照官方，不再自造「合计」）', page.dx.label === 'DX分数', page.dx.label);
+ check('DX 分数 = 四道单题 rating 之和（深蓝、不带描边）',
+ Math.abs(Number(page.dx.num) - expectRating) < 0.05 && /rgb\(13, 42, 99\)/.test(page.dx.font?.fill ?? '')
+ && page.dx.font?.outline === false,
+ `${page.dx.num} vs ${expectRating} · ${page.dx.font?.fill} · 描边层 ${page.dx.font?.outline}`);
+ check('DX 数字在白牌右半边、且没出牌面',
+ page.dx.rect.left >= DX_ROW.left + 120 && page.dx.rect.left + page.dx.rect.w <= DX_ROW.left + DX_ROW.w + 2,
+ `${page.dx.rect.left}..${page.dx.rect.left + page.dx.rect.w} 牌面 ${DX_ROW.left}..${DX_ROW.left + DX_ROW.w}`);
+
+ await shot('E-整轮结算页.png');
+ await shotDialog('D-结算盘.png');
+ // 给 paint-probe.py 数像素用的小图（按底图坐标抠）
+ const origin = JSON.parse(await evaluate(`(() => {
+ const b = document.querySelector('dialog.dan-result .dan-result-art').getBoundingClientRect();
+ return JSON.stringify({ x: b.left + window.scrollX, y: b.top + window.scrollY });
+ })()`));
+ const row0 = rows[0];
+ // 行内那些小图是**行内相对坐标**，抠图要加上第 1 行在底图上的原点，否则会拍错地方；
+ // 印与徽章本来就是底图坐标（readLayout 里用 rel(art) 量的），不能再加一次。
+ const inRow = (rel) => (rel ? { left: rel.left + row0.rect.left, top: rel.top + row0.rect.top, w: rel.w, h: rel.h } : null);
+ const rectOf = (key) => inRow((row0.boxes.find(([name]) => name === key) ?? [])[1]);
+ const clipTargets = {
+ ach: rectOf('achvalue'), achbox: rectOf('achbox'), score: rectOf('dxnum'),
+ stamp: row0.stamp, badge: row0.badgeRect,
+ total: page.total.rect, dxtotal: page.dx.rect, life: page.life.rect,
+ };
+ const rectsOut = {};
+ for (const [name, rect] of Object.entries(clipTargets)) {
+ if (!rect) continue;
+ const clip = { x: origin.x + rect.left, y: origin.y + rect.top, width: rect.w, height: rect.h, scale: 1 };
+ rectsOut[name] = clip;
+ const { data } = await cdp.call('Page.captureScreenshot', { format: 'png', clip, captureBeyondViewport: true }, sessionId);
+ writeFileSync(join(SHOTS, `H-${name}.png`), Buffer.from(data, 'base64'));
+ }
+ writeFileSync(join(SHOTS, 'H-rects.json'), JSON.stringify(rectsOut, null, 2));
+
+ /* ---------- 3) 达成率拉开：金 / 蓝 / 红 ---------- */
+
+ console.log('\n=== 3) 四道达成率拉开（金 / 蓝 / 红） ===');
+ /* 注：达成率是由目标值反推秒数再提交的，而评分曲线只在 ≥97% 段可逆 —— 想看到 <80% 的
+ * 蓝档只能从秒数那头放大（见 SLOW_SECONDS_FACTOR）。第 4 道 ×1.6 落到 60% 上下 ⇒ 蓝。 */
+ let slowSeconds = [];
+ const mixed = await clearRun({ tier: 'advanced', kind: 'challenge', achievements: [100.8, 98.5, 96.0, 92.0] });
+ check('这一轮同样判为 cleared（限时内 AC 就算过，跟达成率高低无关）', mixed?.status === 'cleared', `${mixed?.status}`);
+ check('四道达成率确实拉开了',
+ new Set(mixed.stages.map((s) => Math.round(s.achievement))).size === 4,
+ mixed.stages.map((s) => `${s.achievement.toFixed(2)}%`).join(' '));
+ await openLatestResult();
+ const mixedPage = JSON.parse(await readLayout());
+ const tones = mixedPage.rows.map((row) => (/num-score-(\w+)\.png/.exec(row.achFont?.atlas ?? '') ?? [])[1]);
+ check('颜色按达成率换：≥97 金、80~96.99 红（合成用例只够得到这两档）',
+ tones.join(',') === 'gold,gold,red,red', `${tones.join(',')} · ${mixed.stages.map((s) => `${s.achievement.toFixed(2)}%`).join(' ')}`);
+ check('评级徽章跟着达成率走（逐级对应，不再共用一个区间图）',
+ mixedPage.rows.every((row, i) => row.badge === RANK_FILE[mixed.stages[i].rank]),
+ mixedPage.rows.map((row, i) => `${mixed.stages[i].rank}=${row.badge}`).join(' '));
+ check('总达成率是四道之和 ⇒ 仍然 ≥100% ⇒ 金',
+ /num-score-gold/.test(mixedPage.total.font?.atlas ?? '') && /%$/.test(mixedPage.total.num ?? ''),
+ `${mixedPage.total.num} · ${mixedPage.total.font?.atlas}`);
+ await shot('F-分数分色结算页.png');
+ await shotDialog('D-结算盘-分色.png');
+
+ /* ---------- 4) 超时取消 ---------- */
+
+ console.log('\n=== 4) 超时取消那一轮 ===');
+ const timedId = `e2e-timeout-${Date.now()}`;
+ const timerId = `${timedId}-1`;
+ {
+ const t = Math.floor(Date.now() / 1000);
+ const write = open();
+ write.prepare(`INSERT INTO dan_sessions(id,user_id,tier,kind,stage_count,limit_seconds,min_rating,max_rating,status,started_at)
+ VALUES(?,?,?,?,?,?,?,?,?,?)`).run(timedId, USER, 'beginner', 'challenge', 4, 1800, 800, 1100, 'active', t + 1);
+ write.prepare(`INSERT INTO practice_timers(id,user_id,account_id,handle_key,problem_id,practice_kind,status,started_at,ended_at)
+ VALUES(?,?,?,?,?,?,?,?,?)`).run(timerId, USER, accountId, 'dan-e2e', '559:A', 'unknown', 'completed', t - 4000, t - 1000);
+ write.prepare(`INSERT INTO dan_stages(session_id,stage_index,problem_id,difficulty,drawn_at,claimed_at,timer_id,limit_seconds)
+ VALUES(?,?,?,?,?,?,?,?)`).run(timedId, 1, '559:A', 800, t - 4000, t - 4000, timerId, 1800);
+ write.close();
+ }
+ await call('/api/dan/settle', { userId: USER, tz: 480 });
+ const failed = (await call(`/api/dan?user=${USER}&tz=480`)).body.history.find((r) => r.id === timedId);
+ check('超时那一道被记为 timeout', failed?.stages[0]?.outcome === 'timeout', `${failed?.stages[0]?.outcome}`);
+ check('这一轮判为 failed，且没有继续抽第 2 道', failed?.status === 'failed' && failed?.stages.length === 1,
+ `${failed?.status} / ${failed?.stages.length} 道`);
+ await openLatestResult();
+ const failPage = JSON.parse(await readLayout());
+ check('失败那一屏也弹得出来', failPage.open === true);
+ check('档位名照样写在白框里，结论是小字「不合格」',
+ failPage.plate.name === '初级' && /不合格 · 0 \/ 4 道通关/.test(failPage.plate.count ?? ''),
+ `${failPage.plate.name} · ${failPage.plate.count}`);
+ check('只有一张卡、没有评级徽章、判定写「超时」',
+ failPage.rows.length === 1 && failPage.rows[0].badge === '' && failPage.rows[0].judge === '超时',
+ `${failPage.rows.length} 张 / 徽章「${failPage.rows[0]?.badge}」/ 判定「${failPage.rows[0]?.judge}」`);
+ check('没有成绩的两处都是占位「—」', failPage.total.num === '—' && failPage.dx.num === '—',
+ `${failPage.total.num} / ${failPage.dx.num}`);
+ check('占位「—」也染了深蓝（白字族是纯白剪影，白底上会看不见）',
+ /rgb\(13, 42, 99\)/.test(failPage.total.font?.fill ?? '') && /rgb\(13, 42, 99\)/.test(failPage.dx.font?.fill ?? ''),
+ `${failPage.total.font?.fill} / ${failPage.dx.font?.fill}`);
+ check('心换成红色底盘，写 0', failPage.life.base === 'life-base-red.png' && failPage.life.label === '0',
+ `${failPage.life.base} / ${failPage.life.label}`);
+ await shot('G-不合格结算页.png');
+
+ console.log('\n=== 5) 控制台与请求 ===');
+ check('页面没有抛异常 / console.error', problems.length === 0, problems.slice(0, 3).join(' | '));
+ check('没有指向本服务的 4xx/5xx', badResponses.length === 0, badResponses.slice(0, 3).join(' | '));
+} catch (error) {
+ console.log(`\n出错：${error instanceof Error ? error.message : String(error)}`);
+ failures += 1;
+} finally {
+ try { cdp?.socket.close(); } catch { /* 已经关了 */ }
+ edge.kill();
+}
+
+console.log(`\n结果：${failures === 0 ? '全部通过' : `${failures} 项失败`}`);
+process.exit(failures === 0 ? 0 : 1);
\ No newline at end of file
diff --git a/scripts/export-original-card.py b/scripts/export-original-card.py
new file mode 100644
index 0000000..cbafa9b
--- /dev/null
+++ b/scripts/export-original-card.py
@@ -0,0 +1,79 @@
+#!/usr/bin/env python3
+"""把**原版**的乐曲卡片素材原样导出来，供对照。
+
+用途：现在卡片的边框是照着官方贴图的版式用 CSS 画的（`.dan-track-frame`），用户要直接看
+原版素材本身。这里把逐题行那一圈的原图导到 `docs/images/original-card/`，并顺手把当前渲染
+出来的第 1 张卡裁成一张独立小图 `docs/images/dan-card.png`。
+
+用法：
+ python scripts/export-original-card.py "<游戏目录>" # 含 resources.assets 的那一层
+"""
+from __future__ import annotations
+
+import sys
+from pathlib import Path
+
+import UnityPy
+
+# 逐题行那一圈的原版贴图。`UI_CMN_RSL_KopMBase_*` 就是官方乐曲卡片的边框（640×140，
+# 五种难度各一张，颜色与难度名 BASiC/ADVANCED/EXPERT/MASTER/Re:MASTER 都烘在图里）。
+WANTED = [
+ "UI_CMN_RSL_KopMBase_BSC",
+ "UI_CMN_RSL_KopMBase_ADV",
+ "UI_CMN_RSL_KopMBase_EXP",
+ "UI_CMN_RSL_KopMBase_MST",
+ "UI_CMN_RSL_KopMBase_MST_Re",
+ "UI_CMN_RSL_JacketImage_S",
+ "UI_CMN_RSL_MusicJacket_Base",
+ "UI_CMN_RSL_JaketTrack",
+ "UI_CMN_RSL_JaketTrackNo_0",
+ "UI_CMN_RSL_AllScorekBase",
+ "UI_DNM_Result_musicBase_01",
+ "UI_RSL_AchivementCounter",
+ "UI_DNM_AchivementCounter",
+]
+PREFIXES = ("UI_CMN_RSL_", "UI_DNM_Result_music", "UI_RSL_Achivement", "UI_DNM_Achivement")
+
+
+def main() -> int:
+ if len(sys.argv) < 2:
+ print(__doc__)
+ return 2
+ game = Path(sys.argv[1])
+ out = Path(__file__).resolve().parent.parent / "docs" / "images" / "original-card"
+ out.mkdir(parents=True, exist_ok=True)
+ env = UnityPy.load(str(game / "resources.assets"))
+ saved, extra = [], []
+ for obj in env.objects:
+ if obj.type.name not in ("Texture2D", "Sprite"):
+ continue
+ try:
+ data = obj.read()
+ name = getattr(data, "m_Name", "") or ""
+ if not name:
+ continue
+ if name in WANTED:
+ image = data.image
+ image.save(out / f"{name}.png")
+ saved.append((name, image.size))
+ elif any(name.startswith(p) for p in PREFIXES):
+ extra.append(name)
+ except Exception as exc: # 有的贴图数据在别的 bundle 里，读不到就跳过
+ if getattr(obj, "read", None):
+ try:
+ name = obj.read().m_Name
+ except Exception:
+ name = "?"
+ if name in WANTED:
+ print(f" 跳过 {name}：{type(exc).__name__}")
+ for name, size in sorted(saved):
+ print(f" 导出 {name} {size[0]}x{size[1]}")
+ if extra:
+ print("同前缀但未导出的（想看哪个再说）：")
+ for name in sorted(extra):
+ print(f" {name}")
+ return 0
+
+
+if __name__ == "__main__":
+ raise SystemExit(main())
\ No newline at end of file
diff --git a/scripts/extract-maimai-assets.py b/scripts/extract-maimai-assets.py
new file mode 100644
index 0000000..061ace6
--- /dev/null
+++ b/scripts/extract-maimai-assets.py
@@ -0,0 +1,114 @@
+#!/usr/bin/env python3
+"""从 maimai DX 客户端资源里提取段位認定（Dani Mode）结算页用到的贴图。
+
+这是**开发工具**，不是应用依赖：仓库里已经放好了提取结果
+（public/assets/maimai/*.png），只有要重新提一遍时才跑它。
+
+用法：
+ pip install UnityPy texture2ddecoder Pillow
+ python scripts/extract-maimai-assets.py "<游戏目录>" [输出目录]
+
+`<游戏目录>` 是客户端里含 `resources.assets` 的那一层，例如
+ E:/Downloads/156Sinmai_Data/156Sinmai_Data/156Sinmai_Data
+
+为什么要这么提：段位認定结算那整屏是**成品图**（页头文字、格纹页眉、两侧水引、
+下半部色带与左下角段位名牌白框全部烘焙在底图里），运行时只是把逐题行、达成率数字、
+段位名与总达成率盖上去。所以页面直接用这张底图 + 几件小素材，比自己用 CSS 画近似得多。
+注意：底图下半部那两三块**挖白的空面板**是原作留给运行时文字的位置，不要再拿别的脚本
+把它们续画填掉（第 12 轮干过一次，第 13 轮撤了）。
+"""
+from __future__ import annotations
+
+import sys
+from pathlib import Path
+
+import UnityPy
+
+# 仓库里用的文件名 ← 游戏里的贴图名。只搬这几件，不是整个 UI_DNM 家族（159 张）。
+#
+# 故意**不**搬的一件：逐题行的乐曲边框 `UI_CMN_RSL_KopMBase_{BSC,ADV,EXP,MST,MST_Re}`
+# （640×140，五种难度各一张）。它是逐题行那一圈底色，但颜色与难度名（BASIC/ADVANCED/
+# EXPERT/MASTER/Re:MASTER）都烘死在图里，套不上我们自己的 CF 难度分档。所以边框按它的
+# 版式用 CSS 画一层（见 dan.css 的 .dan-track-frame）：外圈浅色环 + 主色场 + 底部浅色带
+# + 左侧白曲绘槽 + 深蓝标题条 + 白色达成率框，尺寸全按这张贴图量出来的像素。
+WANTED: dict[str, str] = {
+ "UI_DNM_Result_Base_01": "result-dani.png", # 「段位認定」整屏底图 980×928
+ "UI_DNM_Result_Base_03": "result-random.png", # 「ランダム段位認定」整屏底图
+ "UI_DNM_Result_musicBase_01": "track-plate.png", # 逐题行底板 576×124
+ "UI_DNM_Icon_Result_01": "stamp-clear.png", # 逐题「可」印 108×108
+ "UI_DNM_Icon_Result_02": "stamp-fail.png", # 逐题「不可」印
+ # 数字图集：规整 4×4 网格，逐格由同名 Sprite 定 rect（见 dan.js 的 NUM_FONTS）。
+ # 图集里全是**纯白剪影**（游戏运行时才染色），所以描边要另外提一层 _Outline。
+ "UI_CMN_Num_26p": "num-26p.png", # 小号数字 136×160，格 34×40
+ "UI_CMN_Num_26p_Outline": "num-26p-outline.png", # 同布局的描边剪影
+ "UI_CMN_Num_90p": "num-90p.png", # 没有成绩时的占位「—」用，356×420，格 89×105
+ "UI_CMN_Num_90p_Outline": "num-90p-outline.png",
+ # 分数数字：同布局的三套（blue / gold / red）296×392，格 74×98，自带颜色、
+ # 不用描边层 —— 原作就是按达成率高低换这一套的颜色。
+ # 同名的 `UI_NUM_Score_0001111_Base` 故意不搬：那是一张**空图集**（16 格里一个字形都没有，
+ # 整张只有几列杂散像素），照它渲染数字会得到一片看不见的灰影。
+ "UI_NUM_Score_0001111_Blue": "num-score-blue.png",
+ "UI_NUM_Score_0001111_Gold": "num-score-gold.png",
+ "UI_NUM_Score_0001111_Red": "num-score-red.png",
+ # 达成率末尾那个大「%」字形：同样按分数分色（没有 base 那版，低档用图集里的 % 格）
+ "UI_RSL_Score_Per_Gold": "score-per-gold.png", # 80×80
+ "UI_RSL_Score_Per_Blue": "score-per-blue.png",
+ "UI_RSL_Score_Per_Red": "score-per-red.png",
+ # 逐题评级徽章：`UI_GAM_Rank_*` 是**游戏内**那套，单级各一张（源图紧裁，36–110 × 42–44）。
+ # 故意不用 `UI_CMN_TabTitle_Rank_*`：那是**页签标题**上的区间图 —— AAA 那张画的是
+ # 「A～AAA」、BBB 是「～BBB」，而且它没有 D/C/B/BB/A/AA，低分全挤在同一张牌上。
+ "UI_GAM_Rank_D": "gam-rank-d.png",
+ "UI_GAM_Rank_C": "gam-rank-c.png",
+ "UI_GAM_Rank_B": "gam-rank-b.png",
+ "UI_GAM_Rank_BB": "gam-rank-bb.png",
+ "UI_GAM_Rank_BBB": "gam-rank-bbb.png",
+ "UI_GAM_Rank_A": "gam-rank-a.png",
+ "UI_GAM_Rank_AA": "gam-rank-aa.png",
+ "UI_GAM_Rank_AAA": "gam-rank-aaa.png",
+ "UI_GAM_Rank_S": "gam-rank-s.png",
+ "UI_GAM_Rank_Sp": "gam-rank-sp.png",
+ "UI_GAM_Rank_SS": "gam-rank-ss.png",
+ "UI_GAM_Rank_SSp": "gam-rank-ssp.png",
+ "UI_GAM_Rank_SSS": "gam-rank-sss.png",
+ "UI_GAM_Rank_SSSp": "gam-rank-sssp.png",
+ # 右下角那个组件：剩余生命底盘（绿 = 通关 / 红 = 未通关）。
+ # `UI_RSL_DXScore_Base`（「でらっくスコア」标签）**故意不搬**：官方那格是单曲按打击
+ # 精度算的 DX 分数，我们显示的是四道单题 rating 之和，口径不同，套那个框等于撒谎。
+ "UI_DNM_Base_Life_01": "life-base-green.png",
+ "UI_DNM_Base_Life_03": "life-base-red.png",
+}
+
+
+def main(argv: list[str]) -> int:
+ if len(argv) < 2:
+ print(__doc__)
+ return 2
+ game_dir = Path(argv[1])
+ out_dir = Path(argv[2]) if len(argv) > 2 else Path("public/assets/maimai")
+ assets = game_dir / "resources.assets"
+ if not assets.exists():
+ print(f"找不到 {assets}")
+ return 1
+
+ out_dir.mkdir(parents=True, exist_ok=True)
+ env = UnityPy.load(str(assets))
+ written: dict[str, str] = {}
+ for obj in env.objects:
+ if obj.type.name != "Texture2D":
+ continue
+ data = obj.read()
+ name = getattr(data, "m_Name", None) or getattr(data, "name", "") or ""
+ target = WANTED.get(name)
+ if target is None or target in written:
+ continue
+ image = data.image
+ image.save(out_dir / target)
+ written[target] = f"{name} ({image.width}x{image.height})"
+
+ for target in WANTED.values():
+ print(f" {written.get(target, '缺失！'):<34} → {target}")
+ return 0 if len(written) == len(WANTED) else 1
+
+
+if __name__ == "__main__":
+ raise SystemExit(main(sys.argv))
\ No newline at end of file
+
+- **DX 分数不上分数色**：那一格显示的是单题 rating、不是 DX 分数比率，所以三色专门留给达成率；它用白字族剪影染深蓝（跟标题条、标签同一个深蓝）。**所有「没有成绩」的占位「—」也走这套染色**：白字族是纯白剪影，直接铺在白色达成率框或浅色底图上等于看不见。
+- **说明与按钮在画面之外**（深色底上）：「好」按钮与「再来一轮 · 档位」不往那张成品屏里塞；这一轮的范围说明（档位区间、题数、限时、抽题方式、标签）也挪到了成品屏下面 —— 原作那张纸上没有放这行字的位置，硬塞只能压住页头或第一行。
两处刻意的改写：
-- 原作那一格写的是**段位名**（例如「十段」）。随机段位認定不发段位名，所以改成写判定结果「合格」／「不合格」。
-- 原作那颗心是**剩余生命**。我们没有生命值这个概念，用它显示「通关几道」（合格绿、失败灰）。
+- 原作那一格写的是**段位名**（例如「十段」）。我们不发段位名（挑战模式只发档位），所以那一格写**档位名**、字重描边照原版那一路走；「合格／不合格」不另盖印，改成名字下面一行小字。
+- 原作那颗心是**剩余生命**。我们没有生命值这个概念，用它显示「四道里过了几道」（全过绿底、失败红底）。
+
+两处数字口径与原来的对照：原作的「总达成率」是四首歌达成率之和，这里就是各道达成率之和；原作的 `DX分数` 是四首 DX 分数之和，这里对应各道单题 rating 之和（也就是本轮的 `totalRating`）。**这是展示口径**：那一格不等于 `B50` 里这道题贡献的分数增量，真实增量写在结算屏下面那行说明里。
+
+### 结算页的素材来源
+
+`public/assets/maimai/` 下那 31 张 PNG 是从 maimai DX 客户端资源里直接提取的，不是重画的：
+
+| 仓库文件 | 客户端贴图 | 用途 |
+| --- | --- | --- |
+| `result-dani.png` | `UI_DNM_Result_Base_01` | 「段位認定」整屏底图 980×928 |
+| `result-random.png` | `UI_DNM_Result_Base_03` | 「ランダム段位認定」整屏底图 |
+| `track-plate.png` | `UI_DNM_Result_musicBase_01` | 逐题行底板 576×124 |
+| `stamp-clear.png` / `stamp-fail.png` | `UI_DNM_Icon_Result_01` / `_02` | 逐题「可」／「不可」印 |
+| `num-26p.png` / `num-90p.png` | `UI_CMN_Num_26p` / `90p` | 小 / 大号白字图集（136×160 · 356×420，4×4 格） |
+| `num-26p-outline.png` / `num-90p-outline.png` | `UI_CMN_Num_26p_Outline` / `90p` | 同布局的描边剪影（上深色当描边用） |
+| `num-score-blue.png` / `-gold.png` / `-red.png` | `UI_NUM_Score_0001111_Blue` / `_Gold` / `_Red` | 达成率的三色分数图集（自带颜色，296×392） |
+| `score-per-blue.png` / `-gold.png` / `-red.png` | `UI_RSL_Score_Per_Blue` / `_Gold` / `_Red` | 达成率末尾那个大「%」字形（80×80，同样三色） |
+| `gam-rank-sssp.png` … `gam-rank-d.png`（14 张） | `UI_GAM_Rank_SSSp` … `_D` | 逐题评级徽章（游戏内那套，单级各一张） |
+| `life-base-green.png` / `life-base-red.png` | `UI_DNM_Base_Life_01` / `_03` | 剩余生命底盘（绿 = 通关 / 红 = 未通关） |
+
+**故意不搬的一件**：逐题行的乐曲边框 `UI_CMN_RSL_KopMBase_{BSC,ADV,EXP,MST,MST_Re}`（640×140，五种难度各一张）。它是逐题行那一圈底色，但难度色与难度名（BASIC/ADVANCED/EXPERT/MASTER/Re:MASTER）都烘死在图里，套不上我们的 CF 分档，所以照它的版式用 CSS 画一层、颜色交给 `--tc1/--tc2`（见 `public/dan.css` 的「逐题行」一节，尺寸全按那张贴图量出来）。
+
+提取脚本留在 `scripts/extract-maimai-assets.py`（开发工具，需要 `UnityPy` + `texture2ddecoder` + `Pillow`，不是应用依赖）：
+
+```bash
+python scripts/extract-maimai-assets.py "<含 resources.assets 的游戏目录>"
+```
+
+贴图对应的**贴图名**是拿 UnityPy 枚举客户端 `resources.assets` 的 `Texture2D` 得到的（那一个文件里有 5916 张，`UI_DNM_*` 家族 159 张）。数字图集的**格位**不用量：每格都有同名 Sprite（`UI_CMN_Num_90p_0 … _14`），网格正好 4×4，`下标 × 格宽/格高` 就是裁切位置；`[12]` 是逗号、`[13]` 是居中的圆点（原作这套字体的小数点就画在字高中线上，不是落在基线上的点），这两格是放大到 6 倍 + 量墨迹包围盒确认的。分数族那三套的格位同样按 4×4 / 74×98 切；**同名的 `Base` 那张是空图集**，是数每格不透明像素数（16 格全是 0）发现的 —— 只看缩略图会以为它有内容。
+
+版式数字不是估的：它们是拿 `UnityPy` 读 `CourseResultProcess` / `UI_CMN_KOP_TrackData` 预制体里每个 `RectTransform` 的 anchors / anchoredPosition / pivot / sizeDelta，再按「美术坐标 = 屏幕中心 + 局部位置」换算到 980×928 底图上（逐题行 576×126 = 官方 640×140 × 0.9）。乐曲边框那几块（边框本体、外圈环、歌名条、曲绘槽、白盒、底带、右下 DX 白牌）另外拿官方贴图 `UI_CMN_RSL_KopMBase_MST.png` 逐行扫像素复核过一遍（每块的首像素…末像素，再按 `(坐标 + 2) × 0.9` 换算），两边对得上。早先那版是按底图像素分区（纸区上边界 `y=140/928=15.1%`、底部色带从 `71.6%` 起、左下白框 `x 8.7–31.6% / y 73.3–94.8%`）粗摆的，现在换成官方坐标后位置差了几十像素 —— 也就是「组件没对齐」的那几十像素。
-两处数字口径与原来的对照：原作的「总达成率」是四首歌达成率之和，这里就是各道达成率之和；原作的 `DX分数` 是四首 DX 分数之和，这里对应各道单题 rating 之和（也就是本轮的 `totalRating`）。段位名那一格改成写判定结果，所以「总达成率」下面不再有段位线。
+盘面锁死 `980×928`（固定宽高，不再用 `aspect-ratio` 缩放），窄屏让盘面横向滚动而不是压扁 —— 内部一律绝对像素，缩放交给浏览器等比处理，这样「一个数字多宽」这类关系可以直接抄官方数字。
-对照的素材包元素（用 UnityPy 解 `resources.assets` 的 GameObject / RectTransform 得到）：那枚「可」印是 `UI_DNM_Stamp` 的 `Clear` / `NoClear`，两侧绳子是 `UI_DNM_Separator`，底部那块是 `UI_DNM_DaniData`。
+一处已知的将就：**单题模式（自定义条件／每日一题）也复用这张结算盘**，它们是 1 道题，底图借的是档位那一版，所以页头会写着「段位認定」。这不是这轮引入的 —— 改造前那张 CSS 皮的标题也是写死「段位認定」（`#danRunTitle` 一直没按 `kind` 变过），这一版只是把标题从 CSS 文字换成了烘进底图的字。单题模式要专属皮的话，得另找一张不带页头的纸底图，或者按 `kind` 裁掉底图上那 15.1% 的页头带。
-**贴图没有从素材包里搬**：全部用 CSS 重画。游戏美术有版权，打进一个 MIT 仓库、再提到上游是不合适的；这里只沿用版式与构成。盘面用大圆角而不是正圆 —— 四道题卡竖排进正圆，在常见宽度下会挤到不可读。
+**这些美术素材有版权**：它们不属于这个仓库的 MIT 许可范围，也不随上游项目走。只在自用/自部署的实例里使用；要不要把它们留在分支上，由部署的人自己判断。这一段替换了早先「用 CSS 重画、不搬游戏美术」的做法，是按 2026-10-09 的明确要求改的。
### 下一道由你点，不由轮询抽
diff --git a/docs/development.md b/docs/development.md
index 0ee4a95..1a6d7fb 100644
--- a/docs/development.md
+++ b/docs/development.md
@@ -49,7 +49,14 @@ public/
index.html 面板骨架（含账号管理区）
app.js Feed 渲染、筛选器、折叠、账号管理与同步进度
dx.html / dx.js DX Rating 榜（b35 + b15），填写完成用时
- styles.css 深色主题，无外部字体或 CDN
+ styles.css / ui.css 重做前那一版的配色与组件样式，现在是皮肤的浅色底子
+ theme.css maimai 官网皮肤层，参数取自 vendor/maimai/style.css
+ theme-dark.css 深色模式层，规则一律带 [data-mm-theme="dark"] 前缀
+ theme-night.css 夜版背景，只换 /assets/night/ 那套贴图
+ theme.js 主题开关、移动端菜单、回到顶部（换主题的唯一写入口）
+ bg.html 背景 iframe 的宿主页：官网那份动态背景
+ vendor/maimai/** 官网素材原样快照（style.css / img / fonts，见其 README）
+ assets/night/** 夜版贴图，由官方素材离线重上色生成
tests/
phase1.test.ts 旧接口回归测试
phase2.test.ts 迁移、适配器、同步和调度测试
@@ -68,6 +75,21 @@ data/ 首次运行生成，本地数据不提交
data/backups/ npm run backup 生成的快照目录
```
+## 前端皮肤与深色模式
+
+皮肤复刻 maimai DX 国际版官网 PRiSM PLUS 时期的样式：`public/vendor/maimai/` 是原样快照（只改过 URL），
+落到本站组件上的那一层全在 `public/theme.css`，与官方的有意偏差集中在它末尾那节，改之前先看那节。
+
+- 主题落在 ``，偏好存在 `localStorage['mm-theme']`，没手动选过就跟系统。
+- 各页 `` 里有一小段脚本在首帧前定好主题（六页重复同一段是有意的：抽成外链会先亮后暗）。
+- 载入顺序 `fonts.css → styles.css → 各页自己的 CSS → ui.css → theme.css → theme-dark.css`，
+ 深色层一律带 `[data-mm-theme="dark"]` 前缀，所以浅色那套不用改。
+- 画布里的图是 JS 画的，CSS 管不到：`theme.js` 换主题时发 `mm-theme-change`，`stat-charts.js` 收到就按
+ 当前主题重画（配色在它自己的 PALETTE 里）。
+- 页面不引外部字体或 CDN，离线可用：M PLUS 1p 只自托管 latin / latin-ext 子集，中文回退系统字体。
+- `bg.html` 是背景 iframe 的宿主页（结构取自归档快照，另加三行重置与夜版切换脚本），放在 `public/` 根下，
+ 好让 `vendor/maimai/` 只留原样素材。
+
## 数据模型
- `users`：一个本地人物。`is_self` 标记自己（最多一个，是主视图与 DX 榜的锚点）；`is_followed`（v7）标记**关注** —— 只决定「出不出在主视图」，不限数量，且与 `is_self` 是两层。详见下文「关注 ≠ 存在」。
diff --git a/docs/images/dan-card-vs-original.png b/docs/images/dan-card-vs-original.png
new file mode 100644
index 0000000..0d1363f
Binary files /dev/null and b/docs/images/dan-card-vs-original.png differ
diff --git a/docs/images/dan-card.png b/docs/images/dan-card.png
new file mode 100644
index 0000000..597e3b0
Binary files /dev/null and b/docs/images/dan-card.png differ
diff --git a/docs/images/dan-card2.png b/docs/images/dan-card2.png
new file mode 100644
index 0000000..1f93601
Binary files /dev/null and b/docs/images/dan-card2.png differ
diff --git a/docs/images/dan-dialog-mixed.png b/docs/images/dan-dialog-mixed.png
new file mode 100644
index 0000000..63b188b
Binary files /dev/null and b/docs/images/dan-dialog-mixed.png differ
diff --git a/docs/images/dan-page-mixed.png b/docs/images/dan-page-mixed.png
new file mode 100644
index 0000000..889d7a5
Binary files /dev/null and b/docs/images/dan-page-mixed.png differ
diff --git a/docs/images/dan-page-perfect.png b/docs/images/dan-page-perfect.png
new file mode 100644
index 0000000..f6e38f6
Binary files /dev/null and b/docs/images/dan-page-perfect.png differ
diff --git a/docs/images/dan-settlement-mixed.jpg b/docs/images/dan-settlement-mixed.jpg
new file mode 100644
index 0000000..8c74b83
Binary files /dev/null and b/docs/images/dan-settlement-mixed.jpg differ
diff --git a/docs/images/dan-settlement.jpg b/docs/images/dan-settlement.jpg
new file mode 100644
index 0000000..5e95901
Binary files /dev/null and b/docs/images/dan-settlement.jpg differ
diff --git a/docs/images/original-card/UI_CMN_RSL_AllScorekBase.png b/docs/images/original-card/UI_CMN_RSL_AllScorekBase.png
new file mode 100644
index 0000000..243782f
Binary files /dev/null and b/docs/images/original-card/UI_CMN_RSL_AllScorekBase.png differ
diff --git a/docs/images/original-card/UI_CMN_RSL_JaketTrack.png b/docs/images/original-card/UI_CMN_RSL_JaketTrack.png
new file mode 100644
index 0000000..217d5db
Binary files /dev/null and b/docs/images/original-card/UI_CMN_RSL_JaketTrack.png differ
diff --git a/docs/images/original-card/UI_CMN_RSL_JaketTrackNo_0.png b/docs/images/original-card/UI_CMN_RSL_JaketTrackNo_0.png
new file mode 100644
index 0000000..00df414
Binary files /dev/null and b/docs/images/original-card/UI_CMN_RSL_JaketTrackNo_0.png differ
diff --git a/docs/images/original-card/UI_CMN_RSL_KopMBase_ADV.png b/docs/images/original-card/UI_CMN_RSL_KopMBase_ADV.png
new file mode 100644
index 0000000..805dfa1
Binary files /dev/null and b/docs/images/original-card/UI_CMN_RSL_KopMBase_ADV.png differ
diff --git a/docs/images/original-card/UI_CMN_RSL_KopMBase_BSC.png b/docs/images/original-card/UI_CMN_RSL_KopMBase_BSC.png
new file mode 100644
index 0000000..752cde2
Binary files /dev/null and b/docs/images/original-card/UI_CMN_RSL_KopMBase_BSC.png differ
diff --git a/docs/images/original-card/UI_CMN_RSL_KopMBase_EXP.png b/docs/images/original-card/UI_CMN_RSL_KopMBase_EXP.png
new file mode 100644
index 0000000..3af4b0d
Binary files /dev/null and b/docs/images/original-card/UI_CMN_RSL_KopMBase_EXP.png differ
diff --git a/docs/images/original-card/UI_CMN_RSL_KopMBase_MST.png b/docs/images/original-card/UI_CMN_RSL_KopMBase_MST.png
new file mode 100644
index 0000000..be5f3f9
Binary files /dev/null and b/docs/images/original-card/UI_CMN_RSL_KopMBase_MST.png differ
diff --git a/docs/images/original-card/UI_CMN_RSL_KopMBase_MST_Re.png b/docs/images/original-card/UI_CMN_RSL_KopMBase_MST_Re.png
new file mode 100644
index 0000000..e649a75
Binary files /dev/null and b/docs/images/original-card/UI_CMN_RSL_KopMBase_MST_Re.png differ
diff --git a/docs/images/original-card/UI_DNM_Result_musicBase_01.png b/docs/images/original-card/UI_DNM_Result_musicBase_01.png
new file mode 100644
index 0000000..034a719
Binary files /dev/null and b/docs/images/original-card/UI_DNM_Result_musicBase_01.png differ
diff --git a/docs/platform-rating-colors.md b/docs/platform-rating-colors.md
new file mode 100644
index 0000000..73484bb
--- /dev/null
+++ b/docs/platform-rating-colors.md
@@ -0,0 +1,661 @@
+# 各平台 rating / 难度 → 颜色的对照与配置提案
+
+[返回项目首页](../README.md)
+
+本文是**调研记录 + 配置提案**，不是已实现的代码。目的是给「新增一个平台」提供可直接粘贴的
+断点表，形状与 `public/cf-rating-colors.js` 完全一致（`[阈值, tone, 标签, 区间]`，从高到低，
+外加一张 `tone → [主色, 深色]` 表）。
+
+调研时间 2026-10-18。每条结论后面都跟来源链接。**官方来源**指平台自己的文档 / 自己的 CSS /
+自己的 API；**二手来源**指第三方主题、浏览器扩展、博客，文中会点名。凡是我没能从一手来源
+证实的数字或颜色，一律在 [第 6 节](#6-不确定项诚实清单) 列出，不写成结论。
+
+本轮调研中，`codeforces.com` 的 HTML 页面对本机请求返回 **403**（静态 CSS 可以取，页面不行），
+`leetcode.com` 同样 403；因此 CF 的 CSS 颜色、LeetCode 的难度色分别用了「官方 CSS 静态文件」
+替代路径（见下文），并在不确定项里标注了替代范围。
+
+---
+
+## 0. 仓库现有形状（对照用）
+
+`public/cf-rating-colors.js` 现有一张表：
+
+```js
+const bands = [
+ [2400, 'red', '红色', '2400+'],
+ [2100, 'orange', '橙色', '2100–2399'],
+ [1900, 'violet', '紫色', '1900–2099'],
+ [1600, 'blue', '蓝色', '1600–1899'],
+ [1400, 'cyan', '青色', '1400–1599'],
+ [1200, 'green', '绿色', '1200–1399'],
+ [0, 'gray', '灰色', '低于 1200'],
+];
+```
+
+关键口径：**tone 是唯一色源**，卡片的 `--tc1 / --tc2`、底板、滤镜都从 tone 查
+`CF_TONE_COLORS`。所以新增平台的成本 = 一张断点表 + （必要时）几个新 tone。
+
+下面每个平台给两张东西：**数据表**（供人读）和**同形状的代码**（供直接粘贴，集中在第 4 节）。
+
+---
+
+## 1. Codeforces
+
+### 1.1 比赛 rating → 头衔 / 颜色（官方）
+
+颜色与头衔出自官方公告 [The Second Revolution of Colors and Titles](https://codeforces.com/blog/entry/20638)；
+**注意那是 2015 年的表，CM / Master 的分界后来动过**，所以边界以 CF 自己的 API 为准。
+
+我用官方 API 拉了当前全部活跃 rated 用户，按 `rank` 分组求 rating 区间：
+
+```
+https://codeforces.com/api/user.ratedList?activeOnly=true&includeRetired=false
+→ 49384 人（2026-10-18）
+legendary grandmaster n=23 rating 3006..3657
+international grandmaster n=66 rating 2601..2997
+grandmaster n=131 rating 2400..2599
+international master n=108 rating 2300..2397
+master n=425 rating 2100..2299
+candidate master n=702 rating 1900..2099
+expert n=2833 rating 1600..1899
+specialist n=4269 rating 1400..1599
+pupil n=6958 rating 1200..1399
+newbie n=33869 rating -38..1199
+```
+
+| rating | 头衔（官方） | 颜色名（官方公告） | tone | 来源 |
+| --- | --- | --- | --- | --- |
+| 3000+ | Legendary Grandmaster | red（句首字母黑色） | red | [blog/20638](https://codeforces.com/blog/entry/20638) + 上面的 API 区间 |
+| 2600–2999 | International Grandmaster | red | red | 同上 |
+| 2400–2599 | Grandmaster | red | red | 同上 |
+| 2300–2399 | International Master | orange | orange | 同上 |
+| 2100–2299 | Master | orange | orange | 同上 |
+| 1900–2099 | Candidate Master | violet | violet | 同上 |
+| 1600–1899 | Expert | blue | blue | 同上 |
+| 1400–1599 | Specialist | cyan | cyan | 同上 |
+| 1200–1399 | Pupil | green | green | 同上 |
+| <1200 | Newbie | gray | gray | 同上 |
+
+**两处与 2015 年公告不一致，必须按新版理解**：
+
+- 公告写 `2900+` 是 LGM，且 `1900–2199` 是 Candidate Master、`2200–2299` 是 Master。
+ 当前实际是 **LGM 3000+**、**CM 1900–2099**、**Master 2100+**。本仓库现有的
+ `cf-rating-colors.js`（violet 到 2099、orange 从 2100 起）**与当前实际一致**，是对的。
+- Legendary Grandmaster 与其它红色档位的视觉区别不是新颜色，而是**句首字母渲染成黑色**
+ （CF 的 CSS 里叫 `legendary-user-first-letter`，见 CF 站内讨论
+ [blog/94503](https://codeforces.com/blog/entry/94503) 提到的类名）。
+
+**十六进制（不完整，见第 6 节）**：CF 官方页面没有公布十六进制，它的样式表用的是 CSS
+关键字。我只拿到一个可点名的二手来源：[GaurangTandon/codeforces-darktheme](https://github.com/GaurangTandon/codeforces-darktheme)
+的 README 表格，它把原作颜色与新色并排列出，其中明确写了
+**cyan = `#03a89e`**、**green = `#00d700`**（gray / blue / violet / orange / red 只写了颜色名，
+没给原值）。我没有拿到 CF 自己的 CSS（`codeforces.com/css/style.css` 取得到，但里面没有
+`user-*` 规则；页面 403），所以**其余 hex 一律不写死**。
+
+### 1.2 题目 rating 的刻度和颜色
+
+题目 rating 是官方数字，直接来自 CF 的 problemset API。实测（2026-10-18）：
+
+```
+https://codeforces.com/api/problemset.problems
+→ 11152 道有 rating 的题；min = 800，max = 3500；
+ 全部是 100 的整数倍；共 28 个不同取值（800,900,...,3500）
+```
+
+也就是说 **CF 题目 rating 是 800–3500、步长 100 的离散刻度**，量纲和 handle rating 一样，
+可以直接当「定数」用（`src/dx/rating.ts` 现在就是这么用的）。
+
+**题目 rating 的颜色：官方没有规定。** CF 没有一份文档说明 problemset 里的 rating 该涂什么色；
+本仓库现在的做法——把 handle 的七档色界直接套到题目 rating 上——是**社区通行做法**
+（例如 [True Codeforces Heatmap](https://codeforces.com/blog/entry/140881) 这类扩展自己另定了
+更细的题目 rating 色带）。我无法确认 problemset 页面的 rating 文本本身是否着色（页面 403）。
+**建议：沿用现有 handle 色界，并在注释里说明这是社区约定、不是 CF 官方规定。**
+
+---
+
+## 2. AtCoder
+
+### 2.1 比赛 rating → 颜色（官方，含官方 hex）
+
+AtCoder 官方公告 [AtCoder Rating System](https://atcoder.jp/posts/16) 给出色带；官方样式表
+[`img.atcoder.jp/public/5b4b344/css/base.css`](https://img.atcoder.jp/public/5b4b344/css/base.css)
+给出精确 hex（我直接抓了这个文件）：
+
+| rating | 颜色名 | tone | 官方 hex | 来源 |
+| --- | --- | --- | --- | --- |
+| 2800–3199 | Red | red | `#FF0000` | 官方 CSS `.user-red` |
+| 2400–2799 | Orange | orange | `#FF8000` | 官方 CSS `.user-orange` |
+| 2000–2399 | Yellow | yellow | `#C0C000` | 官方 CSS `.user-yellow` |
+| 1600–1999 | Blue | blue | `#0000FF` | 官方 CSS `.user-blue` |
+| 1200–1599 | Cyan | cyan | `#00C0C0` | 官方 CSS `.user-cyan` |
+| 800–1199 | Green | green | `#008000` | 官方 CSS `.user-green` |
+| 400–799 | Brown | brown | `#804000` | 官方 CSS `.user-brown` |
+| 0–399 | Gray | gray | `#808080` | 官方 CSS `.user-gray` |
+| （未 rated） | — | unrated | `#000000` | 官方 CSS `.user-unrated` |
+| （admin） | — | （不用） | `#C000C0` | 官方 CSS `.user-admin` |
+
+**3200 以上没有官方颜色。** 官方公告里 `3200-3599` 与 `3600-3999` 两行写的就是 `???`；官方 CSS
+里最高的用户颜色类就是 `.user-red`，没有更高档。**所以 3200+ 只能落回 red，不能自己造一档。**
+
+AtCoder 没有「头衔」这种东西，只有颜色 + rating 数字；用户页显示的是 rating 本身。
+
+### 2.2 AtCoder 自己的题目难度：不存在
+
+AtCoder **不发布题目难度**。比赛页面给的是**配点**（100 / 200 / 300 / …，ABC 的 A–G），
+配点不等于难度（同一场里 E 有时比 F 难）。所以「AtCoder 官方题目难度色」这个东西是没有的，
+不要假装有。
+
+题目难度的**事实标准**是第三方 AtCoder Problems（kenkoooo）算的 `difficulty`：
+
+- 数值来自 [AtCoder Problems API](https://github.com/kenkoooo/AtCoderProblems/blob/main/doc/api.md)
+ 的 `problem-models.json` / `merged-problems.json`，是社区用解题者 rating 拟合出来的，
+ **不是 AtCoder 官方数据**。
+- 颜色分档我从它发布的打包文件里读出来了（这两条是它的原样实现，不是我推的）：
+ - [`main.40f7eac8.chunk.css`](https://kenkoooo.com/atcoder/static/css/main.40f7eac8.chunk.css)：
+ `.difficulty-red{color:red}`、`.difficulty-orange{color:#ff8000}`、
+ `.difficulty-yellow{color:#c0c000}`、`.difficulty-blue{color:#00f}`、
+ `.difficulty-cyan{color:#00c0c0}`、`.difficulty-green{color:green}`、
+ `.difficulty-brown{color:#804000}`、`.difficulty-grey{color:grey}`
+ （dark 主题另有一套浅化值，如 `#ff6767 / #ffb836 / …`）。
+ - [`main.11188a2c.chunk.js`](https://kenkoooo.com/atcoder/static/js/main.11188a2c.chunk.js)：
+ ```js
+ de = ["Black","Grey","Brown","Green","Cyan","Blue","Yellow","Orange","Red"];
+ je = e => de[Math.min(Math.floor(e/400), de.length-2) + 1];
+ ```
+ 即 **步长恰恰是 400，颜色顺序与 AtCoder 用户色完全一致**：
+
+| difficulty | tone | light 主题 hex（AtCoder Problems） |
+| --- | --- | --- |
+| 2800+ | red | `red`（= `#FF0000`） |
+| 2400–2799 | orange | `#ff8000` |
+| 2000–2399 | yellow | `#c0c000` |
+| 1600–1999 | blue | `#0000ff` |
+| 1200–1599 | cyan | `#00c0c0` |
+| 800–1199 | green | `green`（= `#008000`） |
+| 400–799 | brown | `#804000` |
+| 0–399 | grey | `grey`（= `#808080`） |
+
+**一个实现细节值得注意**：它的颜色数组里第一个元素是 `"Black"`，但 `+1` 之后
+`Black` 永远取不到（`floor(d/400)` 最小是 0，取 `de[1]`）。所以**数值色带里没有黑色档**，
+`difficulty-black` 这个类名在 CSS 里也没有配色规则。不要照抄一个「黑色难度档」出来。
+
+---
+
+## 3. LeetCode
+
+### 3.1 比赛 rating 的档位：**百分位制，不是固定分数线**（官方）
+
+官方帖 [🎖 The new contest badge is here! 🎖](https://leetcode.com/discuss/post/934706/the-new-contest-badge-is-here-by-leetcod-34lb)
+（由官方账号 LeetCode 发布）原文：
+
+> **Among LeetCoders with rating >=1600**,
+> If you are in the top **5%** of the contest rating, you'll get the "**Guardian**" badge.
+> If you are in the top **25%** of the contest rating, you'll get the "**Knight**" badge.
+
+所以：
+
+- **没有任何官方数字门槛。** 分数线随参赛人群漂移；「Knight ≈ 1600」「Guardian ≈ 2200」
+ 是社区对某个时刻百分位的快照，**不是官方边界**（Reddit 上关于「Knight 到底多少分」的
+ 反复提问本身就是它不固定的证据）。
+- 档位名只有两个：**Knight**、**Guardian**，其余人无 badge。没有「专家 / 大师」之类的细分。
+- **颜色**：badge 是图片，不是色带。我下载了官方 badge 资产
+ （`https://leetcode.com/static/images/badges/guardian.png`、`knight.png`）并采样主色，
+ 得到的是深灰 / 近黑（`#2F302E`、`#262626` 一类），**不构成可用的颜色阶梯**。官方没有
+ 公布过 Guardian / Knight 的十六进制配色。
+ **结论：不要从官方来源给 tier 绑颜色。** 若要显示，只能自己定（见第 4 节的提案，已注明是自定）。
+
+### 3.2 题目难度 Easy / Medium / Hard：**分类变量，且官方 hex 有据可查**
+
+难度是三个字符串枚举（GraphQL 里就是 `EASY` / `MEDIUM` / `HARD`），**没有数字**。
+
+颜色我拿到了**官方自己的 CSS**（LeetCode 设计系统的 token）。`leetcode.com` 对本机 403，
+但**力扣中国站与 LeetCode 共用同一套设计系统**，它的构建产物可以取：
+
+- [`static.leetcode.cn/.../17fab917895643c3.css`](https://static.leetcode.cn/cn-frontendx-assets/production/_next/static/css/17fab917895643c3.css)
+ 里定义：
+ ```css
+ --difficulty-easy: var(--light-teal-60); /* dark: var(--dark-teal-60) */
+ --difficulty-medium: var(--light-yellow-60); /* dark: var(--dark-yellow-60) */
+ --difficulty-hard: var(--light-red-60); /* dark: var(--dark-red-60) */
+ ```
+ 同文件里的对应色值：
+
+| 难度 | dark/light token | 浅色主题 hex | 深色主题 hex |
+| --- | --- | --- | --- |
+| Easy | teal-60 | `#1cb8b8` | `#46c6c2` |
+| Medium | yellow-60 | `#ffb800` | `#fac31d` |
+| Hard | red-60 | `#f63636` | `#f8615c` |
+
+- **旧版调色板**（长期被各种扩展和文章引用）：Easy `#00b8a3`、Medium `#ffc01e`、
+ Hard `#ff375f`。这组值仍是**二手来源**（例如 xbar 插件
+ [`leetcode_reminder.5m.py`](https://github.com/matryer/xbar-plugins/blob/main/Web/leetcode_reminder.5m.py)
+ 里的 `color_easy/medium/hard`）。旁证：`#ffc01e` 确实还留在上面的官方 CSS 里（作为
+ `dark-yellow` 旧 token），说明新旧两套并存。
+
+**建议**：主色取官方 CSS 的新 token（`#1cb8b8 / #ffb800 / #f63636`），并在注释里注明旧值
+`#00b8a3 / #ffc01e / #ff375f` 是历史版本。
+
+---
+
+## 4. 洛谷（Luogu）
+
+### 4.1 题目难度：**8 档有序枚举 + 官方 hex**（注意：2026-07 起已不是 7 档）
+
+洛谷站务版官方帖 [新版难度体系更新下的临时难度定义](https://www.luogu.com.cn/discuss/1312513)
+（2026-07-02，作者 chen_zhe）给出**八档**，颜色直接写在正文的 LaTeX `\color{}` 里：
+
+| 难度码 | 名称 | 颜色 | 官方 hex | 国际站名 |
+| --- | --- | --- | --- | --- |
+| 1 | 入门 | 红 | `#FE4C61` | Red |
+| 2 | 普及- | 橙 | `#F39C11` | Orange |
+| 3 | 普及 | 黄 | `#FFC116` | Yellow |
+| 4 | 普及+/提高- | 绿 | `#53C41A` | Green |
+| 5 | 提高 | **青** | `#13C2C2` | Cyan |
+| 6 | 提高+/省选- | 蓝 | `#3498DB` | Blue |
+| 7 | 省选/NOI- | 紫 | `#9C3DCF` | Purple |
+| 8 | NOI/NOI+/CTS | **黑** | `#0E1D69` | Black |
+| 0 | 暂无评定 | — | — | — |
+
+**两个重要偏差，实现前必须知道：**
+
+1. **档数变了。** 老体系是 7 档（入门 / 普及- / 普及·提高- / 普及+·提高 / 提高+·省选- /
+ 省选·NOI- / NOI·NOI+·CTSC）。新体系插进了 **`提高` 这一档（青色 `#13C2C2`）**，
+ 共 8 档。任务书里给的 7 档列表、以及 `src/dx/rating.ts` 注释里的
+ 「洛谷只提供等级码（0–4）」，都是**过时**的说法。帖子自称「临时」，后续可能再动。
+2. **官方 hex 与社区表有两个字符级差异**：官方帖是 `#53C41A` 与 `#9C3DCF`；社区整理的
+ [洛谷相关颜色参考表（2025-7 版）](https://www.luogu.com/article/uqkvrysw) 写的是
+ `#52C41A` 与 `#9D3DCF`。**以官方帖为准**，社区值只作为可能的渲染差异记录。
+
+**难度码是实时可验证的**：洛谷题页的 `lentille-context` 里有 `difficulty` 字段，
+2026-10-18 实测 —— P1001 `difficulty=1`、P3373 `difficulty=4`、P1080 `difficulty=5`、
+P5659 `difficulty=8`。与上表逐项吻合，说明**新 8 档已经在线上生效**。这也反驳了仓库注释里的
+「0–4」。
+
+### 4.2 洛谷比赛等级分（Elo）：**有数字，但没有官方颜色阶梯**
+
+官方帮助中心 [洛谷比赛等级分](https://help.luogu.com.cn/manual/luogu/account/elo-ranking)
+说明：洛谷引入了类似 AtCoder 的 Elo 等级分，显示在用户页；全站前 1000 名有榜单
+（
+
+
diff --git a/public/dan.css b/public/dan.css
index fd3d0bc..6eddaaa 100644
--- a/public/dan.css
+++ b/public/dan.css
@@ -138,144 +138,261 @@
.dx-result-time .dx-result-limit { color: var(--muted); font-size: .62rem; }
.dx-result-time { flex-direction: column; gap: 1px; }
-/* ---------- 段位認定结算页 ----------
- * 版式照原作段位認定结算（Process/Course/CourseResultProcess）：
- * 奶油色纸盘 + 两侧水引红绳 + 每道一个「可」印 + 竖排逐曲卡
- * （封面 / TRACK 0n / 难度 / 曲名 / 达成率 / LV / DX分数）
- * + 底部「十段」框 · 绿心 · 总达成率 · DX分数 + 「好」按钮。
- * 逐个对得上素材包 resources.assets 里的 UI_DNM_*：那枚「可」印是 UI_DNM_Stamp 的
- * Clear / NoClear，两侧绳子是 UI_DNM_Separator，底部那块是 UI_DNM_DaniData。
- * 贴图没有从素材包里搬：全部用 CSS 重画，避免把游戏美术带进这个 MIT 仓库。
- * 盘面用大圆角而不是正圆 —— 三道题卡竖排进正圆，在常见宽度下会挤到不可读。
+/* ---------- 段位認定结算页（原作底图 + 官方组件按官方坐标拼） ----------
+ * 版式不是照感觉摆的，是从 resources.assets 的 CourseResultProcess 预制体里量出来的
+ * （dump-layout.py 读每个 RectTransform 的 anchors / anchoredPosition / pivot / sizeDelta，
+ * 再按「美术坐标 = 屏幕中心 + 局部位置」换成 980×928 底图上的像素）。关键坐标：
+ * 逐题行 x 267–843（576 = 官方的 640 × 0.9），第 1 行 y 152–276，行距 122，共四行
+ * 可/不可印 108×108（UI_DNM_Icon_Result 的原始尺寸），圆心 x 203、第 1 行圆心 y 212
+ * 底部白框（原作放段位名牌那一格）x 85–310 / y 680–880
+ * 心（原作剩余生命那一格）100×100，圆心 (434, 790)
+ * 总达成率 / DX分数右下角一区：x ~470–965 / y ~620–845
+ * 组件也全是官方素材，不用 CSS 画：
+ * 数字 = UI_CMN_Num_26p/70p/90p 图集逐格切，配同布局的 _Outline 剪影层叠出描边
+ * 达成率 = UI_NUM_Score_0001111_{Blue,Gold,Red} 三色分数图集（按分数换色）+ 官方彩色「%」
+ * （同名那套 Base 是空图集，不能用；「%」字形也正好只有三张 ⇒ 官方就是三档）
+ * 评级 = UI_CMN_TabTitle_Rank_*，心 = UI_DNM_Base_Life_01/03，DX 标签 = UI_RSL_DXScore_Base
+ * 底图 = UI_DNM_Result_Base_01（段位認定）/ _03（ランダム段位認定），行底板 = ..._musicBase_01
+ * 唯一的例外是逐题行的**乐曲边框**：官方那张 `UI_CMN_RSL_KopMBase_*` 把难度色与难度名
+ * 烘死在图里（五种难度各一张），套不上我们自己的 CF 分档，所以照它逐像素量出来的版式
+ * 重画一层（见下面的「逐题行」一节），颜色由 CF 分档给。
+ * 素材来源、量法与重新提取见 docs/dan.md「结算页的素材来源」与
+ * scripts/extract-maimai-assets.py。
+ *
+ * 盘面锁死 980×928、内部一律绝对像素：缩放交给浏览器对整张图等比缩放，
+ * 于是「一个数字多宽」这类关系到还原度的结论可以直接抄官方数字。
*/
-/* dialog 默认是 shrink-to-fit，只写 max-width 撑不宽，这里必须给 width。 */
-.dan-result { border: 0; padding: 0; background: transparent; width: min(1040px, 96vw); max-width: none; color: #2b1c12; }
-.dan-result::backdrop { background: #05070ce0; }
-.dan-result-sheet {
- position: relative; overflow: auto; max-height: 90vh;
- background: radial-gradient(120% 80% at 50% -10%, #fffaf0, #f7e7cd 55%, #eed7b4), #f7e7cd;
- border: 9px solid #d8461f; border-radius: 46px;
- box-shadow: inset 0 0 0 3px #f7b23f, inset 0 0 0 7px #d8461f, inset 0 0 60px #e8b98155, 0 22px 60px #000b;
- padding: 20px 46px 22px; display: grid; gap: 11px; justify-items: center;
-}
-.dan-result[data-verdict="failed"] .dan-result-sheet { border-color: #8c2b1a; }
-.dan-result[data-verdict="abandoned"] .dan-result-sheet { border-color: #8a8578; }
-.dan-result-close { position: absolute; top: 12px; right: 18px; padding: 0; font-size: 1.5rem; line-height: 1; color: #a8623a; background: none; border: 0; cursor: pointer; z-index: 2; }
-.dan-result-close:hover { color: #d8461f; }
-.dan-result-title { margin: 2px 0 0; font-size: 1.85rem; font-weight: 900; letter-spacing: .22em; color: #33200f; text-shadow: 0 1px 0 #fff; }
-.dan-result-sub { margin: 0 0 2px; font-size: .8rem; color: #9a7550; text-align: center; }
+/* dialog 默认 shrink-to-fit，只写 max-width 撑不宽，这里必须给 width。 */
+.dan-result { border: 0; padding: 0; background: transparent; width: min(1000px, 96vw); max-width: none; color: #23324c; }
+.dan-result::backdrop { background: #05070ce8; }
+/* 窄屏不把 980px 的成品屏压扁，而是让盘面横向滚动：压扁了字没法读，也谈不上还原。 */
+.dan-result-sheet { overflow: auto; max-height: 92vh; border-radius: 18px; }
+.dan-result-body { display: grid; gap: 11px; width: 980px; }
-/* 两侧水引（UI_DNM_Separator）：上端蝴蝶结 + 竖绳 + 下端流苏 */
-.dan-cord { position: absolute; top: 16px; bottom: 16px; width: 30px; pointer-events: none; }
-.dan-cord.left { left: 14px; }
-.dan-cord.right { right: 14px; }
-.dan-cord::before {
- content: ''; position: absolute; left: 50%; top: 34px; bottom: 36px; width: 5px; transform: translateX(-50%);
- background: linear-gradient(#ff9d7a, #e0402a 40%, #c9381f); border-radius: 3px;
-}
-.dan-cord::after {
- content: ''; position: absolute; left: 50%; top: 8px; width: 22px; height: 22px;
- transform: translateX(-50%) rotate(45deg); background: #f2603c; border-radius: 4px 13px 6px 13px;
- box-shadow: inset 0 0 0 2px #ffd2bd, 0 2px 5px #0004;
-}
-.dan-cord i {
- position: absolute; left: 50%; bottom: 6px; width: 20px; height: 30px; transform: translateX(-50%);
- background: repeating-linear-gradient(90deg, #e0402a 0 2px, transparent 2px 5px);
+.dan-result-art {
+ position: relative; width: 980px; height: 928px; overflow: hidden; border-radius: 18px;
+ background: #f7f1e7 url('/assets/maimai/result-dani.png') 0 0 / 100% 100% no-repeat;
+ box-shadow: 0 18px 50px #000a;
}
+.dan-result-art[data-art="random"] { background-image: url('/assets/maimai/result-random.png'); }
+/* 980×928 的设计尺寸舞台：所有组件在这层里用官方像素坐标绝对定位。 */
+.dan-result-stage { position: absolute; inset: 0; }
+
+.dan-result-close { position: absolute; top: 10px; right: 16px; z-index: 3; padding: 0; font-size: 1.5rem; line-height: 1; color: #2b6cb8; background: none; border: 0; cursor: pointer; }
+.dan-result-close:hover { color: #d8461f; }
+/* 页头那行字烘焙在底图里，这个 h2 只留给读屏（id 仍挂在 dialog 的 aria-labelledby 上）。 */
+.dan-result-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+/* 这一轮的范围说明放在成品屏外面（深色底上）：原作那张纸上没有放这行字的位置，
+ * 硬塞进去就只能压在页头或第一行上。 */
+.dan-result-sub { margin: 0; justify-self: center; text-align: center; font-size: .8rem; line-height: 1.6; color: #c9d2de; }
-/* 逐曲卡：左边「可」印（UI_DNM_Stamp），右边一条难度配色的横卡 */
-.dan-result-tracks { display: grid; gap: 7px; width: 100%; margin: 0; padding: 0; list-style: none; }
-.dan-track { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 9px; align-items: center; }
+/* ---------- 官方数字贴图 ----------
+ * 每格是一个 ，里面两层 ：官方 _Outline 剪影（当遮罩上深色 = 描边）+ 官方填充图集。
+ * 两层都是绝对定位，DOM 顺序决定填充盖在描边之上。图集本身是纯白剪影，
+ * 颜色是运行时给的 —— 和游戏里一样。 */
+.dan-num { display: inline-flex; align-items: center; }
+/* 图集每格都留了空白边，照格宽排会读成「一个字一个字分开」。官方数字是密排的，
+ * 所以 numText 会把「格宽 − 步进」写成 --dan-num-trim，每格右边收回这么多；
+ * 最后一格不收回，免得数字尾巴多出一段空白。 */
+.dan-num-char { position: relative; display: block; flex: none; margin-right: calc(-1 * var(--dan-num-trim, 0px)); }
+.dan-num-char.dan-num-last { margin-right: 0; }
+.dan-num-char > b { position: absolute; inset: 0; display: block; background-repeat: no-repeat; }
+.dan-num-plain { display: grid; place-items: center; color: #4a3a2a; font-family: var(--mono); font-weight: 900; line-height: 1; }
+
+/* ---------- 逐题行 ----------
+ * 一行 = 原作的行底板（UI_DNM_Result_musicBase_01，576×124）+ 一层**乐曲边框**。
+ * 边框照原作 `UI_CMN_RSL_KopMBase_*` 逐像素量出来重画 —— 官方那五张的颜色与难度名
+ * （BASiC/ADVANCED/EXPERT/MASTER/Re:MASTER）都烘死在图里，套不上我们自己的 CF 分档，
+ * 所以只抄版式：主色场交给 --tc1、外圈主色环交给 --tc2（**一块平色**，不做上下渐变）。
+ *
+ * **换算**（下面每个数字的唯一来源）：素材包里的 Sprite 精裁版是 636×136，官方设计尺寸
+ * 640×140（左右上下各被紧裁掉 2px 透明边，`docs/images/original-card/UI_CMN_RSL_KopMBase_MST.png`
+ * 就是精裁版）；而我们的行内区是 576×126 = 官方 640×140 × 0.9。于是
+ * 行内坐标 = (原版文件坐标 + 2) × 0.9
+ * 「边框内坐标」= 行内坐标 − 3.6（边框本体左上角落在行内 (3.6, 3.6)）。
+ * 量法是逐行/逐列扫那张贴图，取每块的首像素…末像素，再把「末像素 + 1」当开区间边界代入：
+ * 边框本体 原版 2…634 × 2…134 → 行内 (3.6, 3.6) 568.8×118.8；外圈主色环 2px、圆角 ~8
+ * 曲绘槽 原版 x 10…127 / y 10…127 → 行内 (10.8, 10.8) 105.3×105.3（白槽、圆角 ~3）
+ * 歌名条 原版 y 10…30 / 右端 626 → 行内 (122.4, 10.8) 442.8×18 深蓝 #012268 胶囊
+ * （左端本来接着难度名牌那一格，名牌删掉后由歌名条顶满上面一整行）
+ * 白盒 原版 x 134…499 / y 38…106 → 行内 (122.4, 36) 328.5×61.2
+ * （原版圆角：左上 9 / 右上 17 / 右下 17 / 左下 0 —— 右下那道大弧就是原版
+ * 那块「右侧带缺口的面板」，它一路弯到底带里）
+ * 底带 原版 x 134…518 / y 106…132 → 行内 (122.4, 97.2) 345.6×23.4 浅色带
+ * 右下白牌 原版 x 499…632 / y 106…132 → 行内 (450.9, 97.2) 119.7×23.4 胶囊（两端圆头）
+ * （原版烘的是日文 `でらっくスコア`；我们寄不出那套字，写「DX分数」）
+ * 右上紫场 白盒右端…边框内右沿 / 歌名条下沿…白牌上沿 = 119.5×68.4，原版空着，
+ * 我们拿它放逐题评级徽章（原版白盒那个大 R 弧就是为它让位的）。
+ *
+ * 信息分配（照用户口径）：**最上面歌名占一整行**（难度名牌删掉）、曲绘槽在左、
+ * 达成率大数字排在白盒里、**DX 分数挪到卡片右下角那块白牌**、**限时写进底带左侧**。
+ */
+.dan-result-tracks { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
+.dan-track { position: absolute; left: 267px; width: 576px; height: 126px; }
+/* 印在行左边、行外那一条（原作里印和底板本来就不在同一个容器里）。 */
.dan-track-stamp {
- box-sizing: border-box; width: 46px; height: 50px; display: grid; place-items: center;
- font-size: 1.15rem; font-weight: 900; color: #e0402a; background: #fff8ec;
- border: 3px solid #e0402a; border-radius: 2px; box-shadow: 0 2px 6px #0002;
- clip-path: polygon(29% 0, 71% 0, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0 71%, 0 29%);
-}
-.dan-track[data-outcome="timeout"] .dan-track-stamp,
-.dan-track[data-outcome="interrupted"] .dan-track-stamp { color: #8f8f8f; border-color: #9d9d9d; background: #f4f1ec; }
-.dan-track[data-outcome="pending"] .dan-track-stamp { color: #b9b1a6; border-color: #bcb4a8; background: #f4f1ec; }
-.dan-track-card {
- display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 10px; align-items: center;
- padding: 6px 12px 6px 6px; border-radius: 9px; border: 2px solid #ffffff59;
- background: linear-gradient(100deg, var(--tc1, #8b6cf0), var(--tc2, #4a2fb0));
- box-shadow: 0 3px 10px #0005, inset 0 1px #ffffff40;
+ position: absolute; left: -118px; top: 8px; width: 108px; height: 108px;
+ object-fit: contain; filter: drop-shadow(0 2px 3px #0003);
+}
+/* 还没抽到的那道不盖章 —— 印是真的，只是这一格还没轮到他。 */
+.dan-track[data-outcome="pending"] .dan-track-stamp { opacity: .22; filter: grayscale(1); }
+.dan-track-plate { position: absolute; inset: 0; background: url('/assets/maimai/track-plate.png') 0 0 / 100% 100% no-repeat; }
+
+/* 乐曲边框：**单色**主色场（原版那块底板就是一块平色）+ 外圈 2px 主色环 + 底部浅色带。
+ * 环用 inset box-shadow 画、带用子元素画，都不占盒模型 —— 边框**不是**真 border，
+ * 真 border 会把子元素坐标系推进边框宽度。 */
+.dan-track-frame {
+ position: absolute; left: 3.6px; top: 3.6px; width: 568.8px; height: 118.8px; border-radius: 7px;
+ overflow: hidden;
+ background: var(--tc1, #8b6cf0);
+ box-shadow: inset 0 0 0 2px var(--tc2, #4a2fb0);
}
+/* 底部浅色带（原版那一块：从曲绘槽右边一直铺到右下白牌底下）。它是**主色的浅色版本**，
+ * 不是白色 —— 白色留给白盒与右下白牌。`overflow: hidden` 让它的左下角跟着边框圆弧收掉。 */
+.dan-track-band {
+ position: absolute; left: 118.8px; top: 93.6px; width: 345.6px; height: 23.4px;
+ background: color-mix(in srgb, var(--tc1, #8b6cf0) 55%, #ffffff);
+}
+/* 边框里的组件用**边框内坐标**（= 行内坐标 − 3.6）。 */
+/* 深蓝歌名条：删掉难度名牌之后它**占满上面一整行** —— 左端与白盒左端对齐（边框内 118.8），
+ * 右端贴到边框内右沿（118.8+442.8=561.6，离主色环还有 ~7px，与原版一致）。 */
+.dan-track-titlebar {
+ position: absolute; left: 118.8px; top: 7.2px; width: 442.8px; height: 18px;
+ border-radius: 9px; background: #012268;
+}
+/* 行首那块「STAGE 01」小牌删掉了：官方那张牌压在曲绘上，我们没有曲绘，它就只是在左上角
+ * 多挂一块深蓝方块。样式留成 display:none（不再渲染这个节点，这条只是兜底）。 */
+.dan-track-no { display: none; }
+/* 官方的曲绘槽（JacketImage_S）：原版是一块 105×105 的**方槽**（圆角只有 ~3px），
+ * 从边框左上角一直占到接近底部。我们抽的是 CF 题、没有曲绘 —— 槽里放题号本身
+ * （`1554C` 这种「题号 + 小问」的写法）与这题在 CF 上的 rating。
+ * 底色是**卡片主色的浅色版本**（原版那格是曲绘，换成白牌会像挖了个洞）。 */
.dan-track-jacket {
- width: 96px; height: 68px; border-radius: 5px; display: grid; place-items: center;
- border: 2px solid #ffffff66; box-shadow: inset 0 0 22px #00000066;
- background: linear-gradient(140deg, #ffffff2e, #00000059);
-}
-.dan-track-jacket b { font-family: var(--mono); font-size: 1.5rem; font-weight: 900; line-height: 1; color: #fff; text-shadow: 0 2px 5px #000b; }
-.dan-track-jacket small { font-family: var(--mono); font-size: .58rem; color: #ffffffcc; }
-.dan-track-info { display: grid; gap: 3px; min-width: 0; }
-.dan-track-head { display: flex; gap: 7px; align-items: baseline; flex-wrap: nowrap; min-width: 0; }
-.dan-track-no { font-family: var(--mono); font-size: .66rem; font-weight: 700; letter-spacing: .1em; color: #ffe0b0; white-space: nowrap; }
-.dan-track-diff { font-family: var(--mono); font-size: .64rem; color: #fff; background: #0000004d; border-radius: 3px; padding: 1px 6px; white-space: nowrap; }
-.dan-track-name { flex: 1; min-width: 0; font-size: .76rem; color: #ffffffeb; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.dan-track-ach { display: flex; align-items: baseline; gap: 8px; }
-.dan-track-achlabel { font-size: .68rem; color: #ffffffd0; }
-.dan-track-achvalue { font-family: var(--mono); font-size: 1.8rem; font-weight: 900; letter-spacing: -.02em; }
-.dan-track-judge { font-size: .62rem; color: #3a2418; background: #ffd76a; border-radius: 999px; padding: 1px 9px; white-space: nowrap; }
+ position: absolute; left: 10.8px; top: 10.8px; width: 105.3px; height: 105.3px;
+ border-radius: 3px; display: flex; flex-direction: column;
+ justify-content: center; align-items: center; gap: 2px;
+ background: color-mix(in srgb, var(--tc1, #8b6cf0) 42%, #ffffff);
+ box-shadow: inset 0 0 0 2px #ffffff4d, 0 2px 6px #00000024;
+}
+.dan-track-jacket b {
+ font-family: var(--mono); font-size: 1.3rem; font-weight: 900; line-height: 1; color: #17265c;
+}
+.dan-track-jacket small { font-family: var(--mono); font-size: .85rem; font-weight: 700; color: #3d4a75; }
+/* 单题 DX 分数（= 该题算出的 rating）：原版那块牌烘着日文 `でらっくスコア`，压在**右下角**、
+ * 底带的右端上（它就是原版「右下角是 dx 分数」那一格）。两端是圆头 ⇒ 胶囊。
+ * `align-items: baseline`：小字标签与数字按**同一条基线**排（数字那一侧由 numText 的
+ * `baseline` 选项按图集基线补一个相对偏移，见 dan.js）。 */
+.dan-track-dxbox {
+ position: absolute; left: 450.9px; top: 97.2px; width: 119.7px; height: 23.4px;
+ border-radius: 11.7px; background: #fff; display: flex; align-items: baseline; padding: 0 13px;
+ box-shadow: 0 1px 4px #00000033;
+}
+.dan-track-dxlabel { flex: none; font-size: .54rem; font-weight: 900; color: #0d2a63; }
+.dan-track-dxnum { margin-left: auto; }
+.dan-track-name {
+ position: absolute; left: 128.8px; top: 7.2px; width: 422.8px; height: 18px;
+ font-size: .68rem; line-height: 18px; color: #fff;
+ overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+/* 达成率白盒：原版那一格是 `UI_AchivementCounter`，白底、**右下角一道大 R 弧**（连续到
+ * 底带上，为右上那块紫场让位）。左上角烘着原版的 `ACHIEVEMENT` 小字，我们照位置写
+ * 「達成率」。圆角按原版量到再 ×0.9：左上 8.1、右上 15.3，**下面两角都是直角** —— 白盒的
+ * 底边和下面那条底带连成一整块，中间不该出现圆角缺口（左下、右下都为 0）。 */
+.dan-track-achbox {
+ position: absolute; left: 118.8px; top: 32.4px; width: 328.5px; height: 61.2px;
+ border-radius: 8.1px 15.3px 0 0; background: #fff;
+}
+.dan-track-achlabel {
+ position: absolute; left: 10px; top: 4px; font-size: .6rem; font-weight: 900; letter-spacing: .08em; color: #0d2a63;
+}
+/* 达成率数字**右对齐**：满 100 的那串（`100.8000%`）右端永远贴在同一个位置，不到 100 的
+ * 少一位数就少在**左边**（`96.0000%` 的右端仍与 100 的齐平）。左对齐时短的那串右端会缩回来。
+ * 垂直上排在「達成率」那行小字**下面**：盒内 y 13…61（盒高 61.2），字高 44 居中，
+ * 整串右端离盒右沿 8px。 */
+.dan-track-achvalue { position: absolute; left: 9px; top: 13px; width: 311.5px; height: 48px; display: flex; align-items: center; justify-content: flex-end; }
+.dan-per { display: block; }
+/* 右上那块紫场：白盒右端…边框内右沿 / 歌名条下沿…右下白牌上沿 = 行内 450.9…570.4 /
+ * 28.8…97.2，原版空着（白盒那道大 R 弧就是给它让位的）。逐题评级徽章放这里 ——
+ * 99×40 是官方 SSS+ 那张紧裁图（110×44）×0.9，摆进去离白盒 13px、离边框内右沿 7.4px。
+ * 徽章源图是紧裁的（SSS+ 110×44、D 38×42），给 99×40 的框按高度贴齐。 */
+.dan-track-badge { position: absolute; left: 464px; top: 43px; width: 99px; height: 40px; object-fit: contain; filter: drop-shadow(0 2px 5px #0000003d); }
+.dan-track-judge {
+ position: absolute; left: 464px; top: 43px; width: 99px; height: 40px;
+ display: grid; place-items: center; font-size: .72rem; font-weight: 900; color: #0d2a63;
+ background: #ffd76a; border-radius: 10px; box-shadow: inset 0 0 0 2px #ffffffa6, 0 2px 5px #0000003d;
+}
.dan-track[data-outcome="timeout"] .dan-track-judge,
.dan-track[data-outcome="interrupted"] .dan-track-judge,
-.dan-track[data-outcome="pending"] .dan-track-judge { background: #d9d2c8; }
-.dan-track-side { display: grid; gap: 4px; justify-items: end; }
-.dan-track-lv {
- font-family: var(--mono); font-size: .95rem; font-weight: 900; color: #fff; padding: 0 8px;
- border: 2px solid #ffffff8c; border-radius: 6px; background: linear-gradient(#7b5cff, #4628b8);
-}
-.dan-track-score { display: flex; align-items: baseline; gap: 5px; }
-.dan-track-score small { font-size: .58rem; color: #ffffffb8; }
-.dan-track-score b { font-family: var(--mono); font-size: .9rem; color: #fff; }
-.dan-track-limit { font-size: .56rem; color: #ffffff9e; }
-
-/* 金色描边数字：白→金→橙渐变填充 + 深棕描边（原作那套 DX 数字，用 CSS 重画）。
- * 必须分两层，试过两条捷径都不行：
- * - 八向 text-shadow：偏移副本会把渐变填充整个盖住，只剩一圈棕边；
- * - -webkit-text-stroke + paint-order: stroke fill：Chromium 的 paint-order 只对
- * SVG 生效，HTML 文字上描边照样盖在填充之上，6px 描边直接吃掉整个笔画。
- * 所以描边交给 ::before、渐变填充交给 ::after，两层叠在同一段文字（data-text）上。
- * 这两点是抠图像素数数出来的，DOM 层面完全看不出来。 */
-.dan-gold { position: relative; display: inline-block; color: transparent; }
-.dan-gold::before, .dan-gold::after {
- content: attr(data-text); position: absolute; left: 0; top: 0; white-space: nowrap; pointer-events: none;
-}
-.dan-gold::before { color: #5a2a10; -webkit-text-stroke: 6px #5a2a10; }
-.dan-gold::after {
- background: linear-gradient(#fffce8, #ffd85c 42%, #ff9a1f 68%, #ffd85c);
- -webkit-background-clip: text; background-clip: text; color: transparent;
-}
-.dan-gold { filter: drop-shadow(0 4px 7px #00000059); }
+.dan-track[data-outcome="pending"] .dan-track-judge { background: #e8e2d6; }
+/* 限时写进**底带的左侧空白**（原版这条底带是空的一块浅色，右下角才是 DX 分数）：所以
+ * 它自己没有白牌面，只把字压在浅色带上，左端与底带左端对齐。 */
+.dan-track-limit {
+ position: absolute; left: 122.4px; top: 97.2px; width: 328.5px; height: 23.4px;
+ display: flex; align-items: center; padding-left: 12px;
+ font-size: .58rem; font-weight: 700; color: #0d2a63;
+}
-/* 底部：判定框 · 心 · 总达成率 / DX分数 */
-.dan-result-bottomrow { display: grid; grid-template-columns: minmax(140px, 210px) auto minmax(0, 1fr); gap: 16px; align-items: center; width: 100%; margin-top: 3px; }
-.dan-result-rankbox {
- display: grid; place-items: center; gap: 1px; padding: 9px 12px; background: #fffdf6;
- border: 3px solid #e6d3b4; border-radius: 13px; box-shadow: 0 3px 10px #00000030, inset 0 1px #fff;
-}
-.dan-result-rankbox strong { font-size: 2.35rem; font-weight: 900; letter-spacing: .05em; line-height: 1.1; color: #2b1c12; }
-.dan-result[data-verdict="failed"] .dan-result-rankbox strong { color: #b32a15; }
-.dan-result[data-verdict="abandoned"] .dan-result-rankbox strong { color: #7d8794; }
-.dan-result-rankbox small { font-size: .68rem; color: #9a7550; }
-.dan-result-life { position: relative; width: 88px; height: 88px; display: grid; place-items: center; }
-.dan-result-life::before {
- content: '♥'; position: absolute; inset: 0; display: grid; place-items: center;
- font-size: 92px; line-height: 1; color: #35c257;
- -webkit-text-stroke: 5px #e6fbec; text-shadow: 0 4px 10px #0000004d;
-}
-.dan-result-life[data-state="bad"]::before { color: #9aa3ae; }
-.dan-result-life span { position: relative; z-index: 1; font-family: var(--mono); font-size: 1.2rem; font-weight: 900; color: #fff; text-shadow: 0 1px 4px #000000b3; }
-.dan-result-life span small { font-size: .62rem; opacity: .9; }
-.dan-result-totalblock { display: grid; gap: 2px; min-width: 0; }
-.dan-total-label { font-size: .74rem; font-weight: 700; letter-spacing: .1em; color: #8a5a2a; }
-.dan-total-ach { font-family: var(--mono); font-size: 2.5rem; font-weight: 900; letter-spacing: -.02em; }
-.dan-total-score { display: inline-flex; align-items: baseline; gap: 7px; justify-self: start; margin-top: 2px; padding: 2px 12px; border-radius: 6px; background: #fffdf699; border: 2px solid #e6d3b4; }
-.dan-total-score small { font-size: .64rem; color: #9a7550; }
-.dan-total-score b { font-family: var(--mono); font-size: 1rem; color: #2b1c12; }
+/* ---------- 底部：段位名牌 · 心 · 总达成率 / DX分数 ----------
+ * 底图在这一块**预留了三处白**（官方在那儿写运行时文字）：(503,663) 与 (753,677) 是
+ * 「総達成率」那个标签的白格（中间被折页的斜边切开），(608,810) 360×80 是「DX分数」
+ * 那条白牌（左端还有个空的圆白圆头）。所以这三块的**位置不用猜**，照白格摆：
+ * 标签进白格 → 大数字落在下面的色带上 → DX 分数进下面那条白牌。 */
+.dan-bottom { position: absolute; inset: 0; }
+/* 左下白框（底图 (74,672) 240×230）：原版这里写段位名（十段/皆伝…）。
+ * 我们发的是档位、不发段位名，所以照原版把**档位名**写进去：
+ * 深棕重字 + 米白描边 + 一点投影（原版那一路毛笔字我们寄不出字体，用系统里的重明朝近似）。 */
+.dan-verdict {
+ position: absolute; left: 74px; top: 672px; width: 240px; height: 230px;
+ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
+}
+.dan-plate-name {
+ /* 原版那两个字是**重毛笔字**。客户端里它是烘死的贴图，我们只能用系统字体近似：
+ * 先取思源宋体的 900（这台机器上是 `NotoSerifSC-VF`，最重的一档），再退回系统宋体/
+ * 楷体那一类衬线。SimSun 那种细宋差得太远（笔画只有原版一半粗）。 */
+ font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STKaiti", "KaiTi", "SimSun", serif;
+ font-size: 104px; font-weight: 900; line-height: 1.08; letter-spacing: .01em;
+ color: #3a2114; paint-order: stroke fill;
+ /* 原版那两个字是深棕重字 + 很淡的米白边缘 + 一点投影；描边给厚了会像贴纸。 */
+ -webkit-text-stroke: 7px #fff6e6;
+ text-shadow: 0 3px 0 #00000024;
+}
+/* 名字长的档位（小随机段位 / 大随机段位）自动缩号，别顶穿白框。 */
+.dan-plate-name[data-len="3"] { font-size: 88px; }
+.dan-plate-name[data-len="4"] { font-size: 68px; }
+.dan-plate-name[data-len="5"], .dan-plate-name[data-len="6"] { font-size: 54px; }
+.dan-verdict-count { font-size: .76rem; font-weight: 800; letter-spacing: .04em; color: #7a5a34; }
+/* 原作这一格是剩余生命的圆心。素材本身是 272×272，之前压到 104 —— 照官方放大到 200，
+ * 位置保持原来那个圆心（434,790）。 */
+.dan-life { position: absolute; left: 334px; top: 690px; width: 200px; height: 200px; }
+.dan-life-base { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 8px #00000038); }
+.dan-life-count { position: absolute; inset: 0; display: grid; place-items: center; }
+/* 总达成率：标签写进底图预留的白格，大数字落在下面的色带上，右端对齐 x 945
+ * （与下面那条 DX 分数白牌的右端同一条边）。 */
+.dan-total-row { position: absolute; inset: 0; }
+/* 「总达成率」四个字写在白格**偏左**的位置（官方那四个字不在白格正中），字号压到 23。
+ * 底图这块白实测是 x 503..708（右边那截 753..856 被折页斜边切开），所以按 503..708 居中。 */
+.dan-total-label {
+ position: absolute; left: 503px; top: 663px; width: 354px; height: 52px;
+ display: grid; place-items: center; padding-right: 140px; padding-bottom: 12px;
+ font-size: 23px; font-weight: 800; letter-spacing: .1em; color: #16306b;
+}
+.dan-total-num {
+ position: absolute; left: 490px; top: 727px; width: 460px; height: 66px;
+ display: flex; align-items: center; justify-content: flex-end;
+}
+/* DX 分数：官方这条白牌就是底图预留的 (608,810) 360×80，标签在左、数字在右，
+ * 都是深蓝（和每题那张卡上的 DX 分数同一个色）。白牌下半截被折页斜切掉一块，
+ * 所以文字靠上排（顶到 y 816），不跟着整块矩形居中。 */
+.dan-dxscore-row {
+ position: absolute; left: 608px; top: 810px; width: 360px; height: 80px;
+ display: flex; align-items: baseline; justify-content: space-between; padding: 0 46px 0;
+}
+.dan-dxscore-label { font-size: 30px; font-weight: 800; letter-spacing: .06em; color: #16306b; }
+.dan-dxscore-num { display: flex; align-items: center; }
-.dan-result-note { margin: 2px 0 0; max-width: 72ch; text-align: center; font-size: .78rem; line-height: 1.7; color: #96714b; }
-.dan-result-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; align-items: center; width: 100%; }
+/* 说明与按钮在成品屏之外（深色底上），不往那张纸上塞东西。 */
+.dan-result-note { margin: 0; max-width: 92ch; justify-self: center; text-align: center; font-size: .78rem; line-height: 1.7; color: #a9b4c4; }
+.dan-result-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.dan-result-ok {
min-width: 112px; padding: 7px 26px; font-size: 1.25rem; font-weight: 900; color: #fff; cursor: pointer;
background: linear-gradient(#ff9a4d, #e8542a); border: 3px solid #c9381f; border-radius: 11px;
@@ -286,17 +403,8 @@
@media (max-width: 860px) {
.dan-grid { grid-template-columns: 1fr; }
- .dan-result-sheet { padding: 16px 22px 18px; border-radius: 30px; }
- .dan-result-title { font-size: 1.4rem; }
- .dan-cord { display: none; }
- .dan-track-card { grid-template-columns: 62px minmax(0, 1fr); row-gap: 6px; }
- .dan-track-jacket { width: 62px; height: 56px; }
- .dan-track-jacket b { font-size: 1.15rem; }
- .dan-track-side { grid-column: 2; grid-auto-flow: column; align-items: baseline; gap: 8px; justify-items: start; }
- .dan-track-achvalue { font-size: 1.35rem; }
- .dan-track-name { flex-basis: 8ch; }
- .dan-result-bottomrow { grid-template-columns: 1fr; justify-items: center; }
- .dan-total-ach { font-size: 2rem; }
- .dan-total-score { justify-self: center; }
+ /* 结算盘是一张 980×928 的成品屏，窄屏不重排、只横向滚动（见 .dan-result-body 的
+ * min-width）—— 把四行字和页头压进 360px 宽只会压成不可读。 */
+ .dan-result-close { top: 6px; right: 10px; font-size: 1.25rem; }
.dan-result-actions { justify-content: center; }
}
\ No newline at end of file
diff --git a/public/dan.html b/public/dan.html
index 5cc330c..c67b0d8 100644
--- a/public/dan.html
+++ b/public/dan.html
@@ -1,14 +1,16 @@
-