theme(shiroko): 按二次元官网构图重做——整页场景 + 悬浮磨砂 UI

参考蔚蓝档案 JP 首页（bluearchive.jp）的做法：整个视口是一张场景插画，UI 浮在场景之上，
而不是"白底 + 留白里贴几个人物"。之前几版反复调摆位都显得怪，根源就是缺了这层场景——
人物没有环境，怎么摆都是贴纸。

- 新增教室场景两张（1920×1080 / 720×1003，共 28KB）：生成后裁掉右下角水印、
  混白 38%、模糊 1.4px，保证白卡片仍有对比度；
- 卡片与顶栏改半透明白 + backdrop-filter 磨砂（深色关闭，背后没场景时半透明只会变浑）；
- 人物站在场景左侧地面（340px，离底边 36px）+ 椭圆接触阴影；
- 浅色不再叠平铺纹样（压在实景上会变噪点），pattern.svg 删除，深色保留 pattern-dark；
- 顺带修 ruleBody 不剥 CSS 注释的缺陷：令牌前写注释会让 tokenValue 取到粘连键，
  色块预览静默失效（新增 TestRuleBodyIgnoresComments 守住）；
- StaticVersion → 20261019q

internal/theme/theme.go

@@ -28,6 +28,8 @@ var (
 	slugRe = regexp.MustCompile(`^[a-z0-9][a-z0-9-]{0,31}$`)
 	// 仅接受纯色值，避免把主题文件里的任意内容拼进设置页的 style 属性。
 	colorRe = regexp.MustCompile(`^(#[0-9a-fA-F]{3,8}|rgba?\([0-9.,\s%/]+\))$`)
+	// 主题 css 里的块注释；取令牌前先剥掉，避免注释与令牌粘连
+	commentRe = regexp.MustCompile(`(?s)/\*.*?\*/`)
 )
 
 // Theme 是设置页需要的一项。名称由 i18n 键 theme.name.<slug> 提供，
@@ -174,7 +176,9 @@ func ruleBody(css, selector string) string {
 	if end < 0 {
 		return ""
 	}
-	return css[start : start+end]
+	// 注释必须剥掉：tokenValue 按 ";" 切分再按 ":" 取值，行内注释会和后面的令牌粘成一段，
+	// 取到的键变成 "/* ... */ --tb-surface"，色块预览就静默失效。
+	return commentRe.ReplaceAllString(css[start:start+end], "")
 }
 
 func tokenValue(block, name string) string {

internal/theme/theme_test.go

@@ -102,3 +102,16 @@ func TestSwatch(t *testing.T) {
 	assert.Equal(t, "", swatchOf(`html[data-theme-style="x"] { --tb-bg: url(evil); --tb-primary: #fff; }`, "x"),
 		"非色值内容不得进入 swatch")
 }
+
+func TestRuleBodyIgnoresComments(t *testing.T) {
+	// 令牌前面写一行注释很常见；不剥注释的话 tokenValue 会取到
+	// "/* ... */ --tb-bg" 这种粘连键，色块预览静默失效。
+	css := `html[data-theme-style="x"] {
+    /* 磨砂卡片：半透明白 */
+    --tb-bg: #ffffff;
+    --tb-primary: rgba(74, 127, 193, 0.11);
+}`
+	body := ruleBody(css, `html[data-theme-style="x"]`)
+	assert.Equal(t, "#ffffff", tokenValue(body, "--tb-bg"))
+	assert.Equal(t, "rgba(74, 127, 193, 0.11)", tokenValue(body, "--tb-primary"))
+}