dsh-theme-gallery 0.1.4 → 0.2.0

package/lib/client.js

@@ -105,6 +105,21 @@ window.__ModuleLoader__.load({
      */
     const READING = { bg: '#FFFFFF', alpha: 0.62, blur: 3, maxWidth: 640 }
 
+    /**
+     * The package version this bundle was built from.
+     *
+     * Written by `scripts/embed-themes.mjs` from package.json, because the browser
+     * half cannot read its own manifest: the client module system resolves `require`
+     * against the platform seed table and other plugins' boot-graph rows, not
+     * against this package's files. The panel shows it so a reader can compare what
+     * they have with what npm publishes.
+     *
+     * Kept honest by two checks: `scripts/publish-check.mjs` compares it with
+     * package.json, and the release workflow fails when re-running the embed step
+     * changes a tracked file.
+     */
+    const BUNDLED_VERSION = '0.2.0'
+
     /**
      * Themes this package contributes, inlined from lib/themes/*.json.
      *
@@ -406,6 +421,294 @@ window.__ModuleLoader__.load({
           "fish": 3
         }
       },
+      {
+        "id": "pei-an-jie-xin",
+        "label": "佩安杰心",
+        "description": "檀香禅影，自在安顿 —— 复刻自电商新零售系统管理后台同名主题",
+        "colorScheme": "light",
+        "tokens": {
+          "--dsw-alias-bg-base": {
+            "light": "linear-gradient(to bottom,#FCFAF5 0%,#F8F3E9 55%,#F3ECDD 100%)",
+            "dark": "linear-gradient(to bottom,#FCFAF5 0%,#F8F3E9 55%,#F3ECDD 100%)"
+          },
+          "--dsw-alias-bg-layer-1": {
+            "light": "#FDFBF7",
+            "dark": "#FDFBF7"
+          },
+          "--dsw-alias-bg-layer-2": {
+            "light": "#FFFFFF",
+            "dark": "#FFFFFF"
+          },
+          "--dsw-alias-bg-layer-3": {
+            "light": "#FFFFFF",
+            "dark": "#FFFFFF"
+          },
+          "--dsw-alias-bg-overlay": {
+            "light": "#EFE7D7",
+            "dark": "#EFE7D7"
+          },
+          "--dsw-alias-bg-skeleton": {
+            "light": "#7A5C3E14",
+            "dark": "#7A5C3E14"
+          },
+          "--dsw-alias-bg-module-platform": {
+            "light": "#F3EBDD",
+            "dark": "#F3EBDD"
+          },
+          "--dsw-alias-bg-multi-select": {
+            "light": "#F3EBDD",
+            "dark": "#F3EBDD"
+          },
+          "--dsw-alias-border-l1": {
+            "light": "#7A5C3E0F",
+            "dark": "#7A5C3E0F"
+          },
+          "--dsw-alias-border-l2": {
+            "light": "#7A5C3E21",
+            "dark": "#7A5C3E21"
+          },
+          "--dsw-alias-border-l3": {
+            "light": "#7A5C3E2E",
+            "dark": "#7A5C3E2E"
+          },
+          "--dsw-alias-border-l4": {
+            "light": "#7A5C3E3D",
+            "dark": "#7A5C3E3D"
+          },
+          "--dsw-alias-brand-primary": {
+            "light": "#7A5C3E",
+            "dark": "#7A5C3E"
+          },
+          "--dsw-alias-brand-primary-invert": {
+            "light": "#FFFFFF",
+            "dark": "#FFFFFF"
+          },
+          "--dsw-alias-brand-text": {
+            "light": "#7A5C3E",
+            "dark": "#7A5C3E"
+          },
+          "--dsw-alias-label-primary": {
+            "light": "#3F3222",
+            "dark": "#3F3222"
+          },
+          "--dsw-alias-label-primary-bluish": {
+            "light": "#3F3222",
+            "dark": "#3F3222"
+          },
+          "--dsw-alias-label-secondary": {
+            "light": "#5E4A38",
+            "dark": "#5E4A38"
+          },
+          "--dsw-alias-label-tertiary": {
+            "light": "#85705A",
+            "dark": "#85705A"
+          },
+          "--dsw-alias-label-caption": {
+            "light": "#85705A",
+            "dark": "#85705A"
+          },
+          "--dsw-alias-label-dimmed": {
+            "light": "#AC9C86",
+            "dark": "#AC9C86"
+          },
+          "--dsw-alias-label-primary-dimmed": {
+            "light": "#5E4A38",
+            "dark": "#5E4A38"
+          },
+          "--dsw-alias-label-primary-foreground": {
+            "light": "#FFFFFF",
+            "dark": "#FFFFFF"
+          },
+          "--dsw-alias-label-primary-inverted": {
+            "light": "#FFFFFF",
+            "dark": "#FFFFFF"
+          },
+          "--dsw-alias-link": {
+            "light": "#B4653A",
+            "dark": "#B4653A"
+          },
+          "--dsw-alias-interactive-bg-hover": {
+            "light": "#9C7B5814",
+            "dark": "#9C7B5814"
+          },
+          "--dsw-alias-interactive-bg-active": {
+            "light": "#B4653A2E",
+            "dark": "#B4653A2E"
+          },
+          "--dsw-alias-interactive-bg-hover-solid": {
+            "light": "#F3EBDD",
+            "dark": "#F3EBDD"
+          },
+          "--dsw-alias-interactive-bg-hover-accent": {
+            "light": "#B4653A3D",
+            "dark": "#B4653A3D"
+          },
+          "--dsw-alias-button-primary-fill": {
+            "light": "#7A5C3E",
+            "dark": "#7A5C3E"
+          },
+          "--dsw-alias-button-primary-hover": {
+            "light": "#9C7B58",
+            "dark": "#9C7B58"
+          },
+          "--dsw-alias-button-primary-dimmed": {
+            "light": "#7A5C3E47",
+            "dark": "#7A5C3E47"
+          },
+          "--dsw-alias-button-ghost-active-fill": {
+            "light": "#B4653A29",
+            "dark": "#B4653A29"
+          },
+          "--dsw-alias-button-ghost-active-border": {
+            "light": "#B4653A",
+            "dark": "#B4653A"
+          },
+          "--dsw-alias-button-ghost-active-hover": {
+            "light": "#B4653A47",
+            "dark": "#B4653A47"
+          },
+          "--dsw-alias-button-info-fill": {
+            "light": "#9C7B58",
+            "dark": "#9C7B58"
+          },
+          "--dsw-alias-button-info-hover": {
+            "light": "#8A6E52",
+            "dark": "#8A6E52"
+          },
+          "--dsw-alias-button-elevated-fill": {
+            "light": "#FFFFFF",
+            "dark": "#FFFFFF"
+          },
+          "--dsw-alias-button-floating-fill": {
+            "light": "#FFFFFF",
+            "dark": "#FFFFFF"
+          },
+          "--dsw-alias-button-floating-hover": {
+            "light": "#FAF6EE",
+            "dark": "#FAF6EE"
+          },
+          "--dsw-alias-button-contrast-fill": {
+            "light": "#3F3222",
+            "dark": "#3F3222"
+          },
+          "--dsw-alias-markdown-code-block": {
+            "light": "#F5EFE3",
+            "dark": "#F5EFE3"
+          },
+          "--dsw-alias-markdown-code-block-banner": {
+            "light": "#EDE4D2",
+            "dark": "#EDE4D2"
+          },
+          "--dsw-alias-markdown-inline-code": {
+            "light": "#F3EBDD",
+            "dark": "#F3EBDD"
+          },
+          "--dsw-alias-markdown-citation": {
+            "light": "#F3EBDD",
+            "dark": "#F3EBDD"
+          },
+          "--dsw-alias-markdown-tag": {
+            "light": "#F3EBDD",
+            "dark": "#F3EBDD"
+          },
+          "--dsw-alias-markdown-placeholder": {
+            "light": "#EDE4D2",
+            "dark": "#EDE4D2"
+          },
+          "--dsw-alias-markdown-code-segment-selected": {
+            "light": "#B4653A29",
+            "dark": "#B4653A29"
+          },
+          "--dsw-alias-markdown-code-segment-unselected": {
+            "light": "#F5EFE3",
+            "dark": "#F5EFE3"
+          },
+          "--dsw-alias-scrollbar-bg-l1": {
+            "light": "#7A5C3E29",
+            "dark": "#7A5C3E29"
+          },
+          "--dsw-alias-scrollbar-bg-l2": {
+            "light": "#7A5C3E38",
+            "dark": "#7A5C3E38"
+          },
+          "--dsw-alias-scrollbar-hover-l1": {
+            "light": "#7A5C3E52",
+            "dark": "#7A5C3E52"
+          },
+          "--dsw-alias-scrollbar-hover-l2": {
+            "light": "#7A5C3E66",
+            "dark": "#7A5C3E66"
+          },
+          "--dsw-alias-tooltip-bg": {
+            "light": "#3F3222",
+            "dark": "#3F3222"
+          },
+          "--dsw-alias-toast-bg": {
+            "light": "#FFFFFF",
+            "dark": "#FFFFFF"
+          },
+          "--dsw-alias-state-error-primary": {
+            "light": "#C65B6A",
+            "dark": "#C65B6A"
+          },
+          "--dsw-alias-state-error-secondary": {
+            "light": "#DB5A6B",
+            "dark": "#DB5A6B"
+          },
+          "--dsw-alias-state-success-primary": {
+            "light": "#21A675",
+            "dark": "#21A675"
+          },
+          "--dsw-alias-state-success-secondary": {
+            "light": "#7A5C3E",
+            "dark": "#7A5C3E"
+          },
+          "--dsw-alias-state-success-tertiary": {
+            "light": "#C4B39A",
+            "dark": "#C4B39A"
+          },
+          "--dsw-alias-state-warn-primary": {
+            "light": "#B97F3A",
+            "dark": "#B97F3A"
+          },
+          "--dsw-alias-state-warn-secondary": {
+            "light": "#D9A45E",
+            "dark": "#D9A45E"
+          },
+          "--dsw-alias-state-warn-tertiary": {
+            "light": "#EFDCC0",
+            "dark": "#EFDCC0"
+          },
+          "--dsw-alias-state-warn-label": {
+            "light": "#8A5A22",
+            "dark": "#8A5A22"
+          },
+          "--dsw-alias-state-business-primary": {
+            "light": "#B4653A",
+            "dark": "#B4653A"
+          },
+          "--dsw-alias-state-business-tertiary": {
+            "light": "#D08A5C",
+            "dark": "#D08A5C"
+          },
+          "--dsw-specific-sidebar-fill": {
+            "light": "linear-gradient(to bottom,#F2E8D8 0%,#EBDCC4 22%,#E0CDAD 42%,#D4BC98 60%,#C3A87F 78%,#A98D6B 100%)",
+            "dark": "linear-gradient(to bottom,#F2E8D8 0%,#EBDCC4 22%,#E0CDAD 42%,#D4BC98 60%,#C3A87F 78%,#A98D6B 100%)"
+          }
+        },
+        "reading": {
+          "colorScheme": "light",
+          "bg": "#FFFFFF",
+          "alpha": 0.62,
+          "blur": 3,
+          "maxWidth": 640
+        },
+        "accent": "#B4653A",
+        "ambient": {
+          "kind": "jiexin",
+          "dust": 4
+        }
+      },
       {
         "id": "shan-qing-ting-cai",
         "label": "山青婷彩",
@@ -693,79 +996,367 @@ window.__ModuleLoader__.load({
           "kind": "shan",
           "petals": 7
         }
-      }
-    ]
-
-    /**
-     * Marks the ambient nodes this run created.
-     *
-     * The layer lives on the document body, so parentage can no longer identify
-     * ownership. Anything found without this stamp is debris from an earlier build —
-     * and because the shell keeps its DOM across a plugin reload, such nodes outlive
-     * the code that made them.
-     */
-    const AMBIENT_OWNER = 'theme-gallery'
-
-    /**
-     * Ambient scenery drawn inside the sidebar column.
-     *
-     * Ported from the source admin system, where each theme carried its own
-     * animation component mounted into a `left-sidebar-theme-container`. The
-     * artwork is reproduced here (mountains, mist, water, dragonflies, falling
-     * petals for 山青婷彩; corner glow, rising bubbles, swaying seaweed for
-     * 梦海游鱼) with two deliberate changes:
-     *
-     *  - sizes are expressed in **percentages and em**, not the source system's
-     *    fixed 223 px sidebar width, so the scene scales to whatever width the
-     *    user drags the sidebar to;
-     *  - nothing here carries colour of its own beyond the ported artwork, and the
-     *    layer is `pointer-events:none` / `z-index:0`, so it can never intercept a
-     *    click or cover a menu item. The source system has the same rule, and a
-     *    bug note there records opaque mountains hiding the bottom menu rows.
-     *
-     * `#dsh-theme-ambient` is a seat this plugin injects into the sidebar column;
-     * `syncAmbient()` fills it, and each theme chooses its scene by `ambient.kind`.
-     */
-    const AMBIENT_CSS = [
-      /* The layer, arranged exactly like the working `dsh-theme-firefly` ambient layer:
-         a full-viewport fixed element styled by a CLASS, appended to `document.body`, at
-         `z-index: 60`.
-         Every other arrangement of this layer failed to paint on this machine — precise
-         inline geometry, maximum z-index, `documentElement` as the parent, inline styles
-         per element. The firefly plugin uses this one and renders, so this is now the
-         layer's arrangement. The scenery is placed INSIDE it (`.dsh-ambient-scene`). */
-      '#dsh-theme-ambient{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:60}',
-      '.dsh-ambient-scene{overflow:hidden}',
-      /* The scene roots carry their own positioning inline too; the selectors below are
-         kept only where a rule cannot be inlined (`@keyframes`) or where they must reach
-         a shell element. */
-      '.ZTP-Xa_sidebarCol{position:relative}',
-
-      /* BRING-UP PROBE — remove with the rest of the diagnostics.
-         The control layer, copied rule-for-rule from the working `dsh-theme-firefly`
-         plugin: geometry and stacking from a class, motion from `@keyframes`, and only
-         the per-element random values inline. */
-      '.dsh-amb-control{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}',
-      /* BRING-UP PROBE — the scene box inside the proven layer. No `pointer-events` here on
-         purpose: the layer above already disables it, and this box is the thing being
-         tested rather than a decoration that must stay click-through. */
-      '.dsh-amb-control-scene{overflow:hidden}',
-
-      /* The scenery's own geometry. These live here rather than inline because the scene
-         markup is built as a string, and they must reach it wherever it is mounted — which
-         is now inside the proven layer rather than a layer of its own. */
-      '.dsh-amb-control-scene .sta-mountains{position:absolute;left:0;right:0;bottom:0;height:46%;z-index:3}',
-      '.dsh-amb-control-scene .sta-mountains svg{display:block;width:100%;height:100%}',
-      '.dsh-amb-control-scene .sta-mist{position:absolute;height:1.6em;border-radius:1000px;z-index:4;',
-      'background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);',
-      'filter:blur(5px);opacity:.85;animation:dsh-amb-mist 26s ease-in-out infinite alternate}',
-      '.dsh-amb-control-scene .sta-mist-1{width:62%;top:56%;left:12%}',
-      '.dsh-amb-control-scene .sta-mist-2{width:44%;top:61%;left:38%;opacity:.6;',
-      'animation-duration:32s;animation-delay:-9s}',
-      '.dsh-amb-control-scene .sta-pond{position:absolute;left:0;right:0;bottom:0;height:13%;z-index:5;',
-      'background:linear-gradient(to bottom,rgba(104,178,150,.62),rgba(66,141,113,.78))}',
-      '.dsh-amb-control-scene .sta-pond-line{position:absolute;top:0;left:0;right:0;height:1.2px;opacity:.6;',
-      'background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent)}',
+      },
+      {
+        "id": "ying-mu-cai-yun",
+        "label": "营慕彩云",
+        "description": "营幕之下，彩云为伴 —— 复刻自电商新零售系统管理后台同名主题",
+        "colorScheme": "light",
+        "tokens": {
+          "--dsw-alias-bg-base": {
+            "light": "linear-gradient(to bottom,#FBFCF8 0%,#F5F8EF 55%,#EEF3E4 100%)",
+            "dark": "linear-gradient(to bottom,#FBFCF8 0%,#F5F8EF 55%,#EEF3E4 100%)"
+          },
+          "--dsw-alias-bg-layer-1": {
+            "light": "#FBFDF7",
+            "dark": "#FBFDF7"
+          },
+          "--dsw-alias-bg-layer-2": {
+            "light": "#FFFFFF",
+            "dark": "#FFFFFF"
+          },
+          "--dsw-alias-bg-layer-3": {
+            "light": "#FFFFFF",
+            "dark": "#FFFFFF"
+          },
+          "--dsw-alias-bg-overlay": {
+            "light": "#E7EFE0",
+            "dark": "#E7EFE0"
+          },
+          "--dsw-alias-bg-skeleton": {
+            "light": "#2D5A3D14",
+            "dark": "#2D5A3D14"
+          },
+          "--dsw-alias-bg-module-platform": {
+            "light": "#ECF3E6",
+            "dark": "#ECF3E6"
+          },
+          "--dsw-alias-bg-multi-select": {
+            "light": "#ECF3E6",
+            "dark": "#ECF3E6"
+          },
+          "--dsw-alias-border-l1": {
+            "light": "#2D5A3D0F",
+            "dark": "#2D5A3D0F"
+          },
+          "--dsw-alias-border-l2": {
+            "light": "#2D5A3D21",
+            "dark": "#2D5A3D21"
+          },
+          "--dsw-alias-border-l3": {
+            "light": "#2D5A3D2E",
+            "dark": "#2D5A3D2E"
+          },
+          "--dsw-alias-border-l4": {
+            "light": "#2D5A3D3D",
+            "dark": "#2D5A3D3D"
+          },
+          "--dsw-alias-brand-primary": {
+            "light": "#2D5A3D",
+            "dark": "#2D5A3D"
+          },
+          "--dsw-alias-brand-primary-invert": {
+            "light": "#FFFFFF",
+            "dark": "#FFFFFF"
+          },
+          "--dsw-alias-brand-text": {
+            "light": "#2D5A3D",
+            "dark": "#2D5A3D"
+          },
+          "--dsw-alias-label-primary": {
+            "light": "#234030",
+            "dark": "#234030"
+          },
+          "--dsw-alias-label-primary-bluish": {
+            "light": "#234030",
+            "dark": "#234030"
+          },
+          "--dsw-alias-label-secondary": {
+            "light": "#3E6B4A",
+            "dark": "#3E6B4A"
+          },
+          "--dsw-alias-label-tertiary": {
+            "light": "#62816C",
+            "dark": "#62816C"
+          },
+          "--dsw-alias-label-caption": {
+            "light": "#62816C",
+            "dark": "#62816C"
+          },
+          "--dsw-alias-label-dimmed": {
+            "light": "#93A996",
+            "dark": "#93A996"
+          },
+          "--dsw-alias-label-primary-dimmed": {
+            "light": "#3E6B4A",
+            "dark": "#3E6B4A"
+          },
+          "--dsw-alias-label-primary-foreground": {
+            "light": "#FFFFFF",
+            "dark": "#FFFFFF"
+          },
+          "--dsw-alias-label-primary-inverted": {
+            "light": "#FFFFFF",
+            "dark": "#FFFFFF"
+          },
+          "--dsw-alias-link": {
+            "light": "#C4899F",
+            "dark": "#C4899F"
+          },
+          "--dsw-alias-interactive-bg-hover": {
+            "light": "#3E6B4A14",
+            "dark": "#3E6B4A14"
+          },
+          "--dsw-alias-interactive-bg-active": {
+            "light": "#FFB3472E",
+            "dark": "#FFB3472E"
+          },
+          "--dsw-alias-interactive-bg-hover-solid": {
+            "light": "#ECF3E6",
+            "dark": "#ECF3E6"
+          },
+          "--dsw-alias-interactive-bg-hover-accent": {
+            "light": "#FFB3473D",
+            "dark": "#FFB3473D"
+          },
+          "--dsw-alias-button-primary-fill": {
+            "light": "#2D5A3D",
+            "dark": "#2D5A3D"
+          },
+          "--dsw-alias-button-primary-hover": {
+            "light": "#3E6B4A",
+            "dark": "#3E6B4A"
+          },
+          "--dsw-alias-button-primary-dimmed": {
+            "light": "#2D5A3D47",
+            "dark": "#2D5A3D47"
+          },
+          "--dsw-alias-button-ghost-active-fill": {
+            "light": "#FFB34729",
+            "dark": "#FFB34729"
+          },
+          "--dsw-alias-button-ghost-active-border": {
+            "light": "#FFB347",
+            "dark": "#FFB347"
+          },
+          "--dsw-alias-button-ghost-active-hover": {
+            "light": "#FFB34747",
+            "dark": "#FFB34747"
+          },
+          "--dsw-alias-button-info-fill": {
+            "light": "#3E6B4A",
+            "dark": "#3E6B4A"
+          },
+          "--dsw-alias-button-info-hover": {
+            "light": "#4A7D58",
+            "dark": "#4A7D58"
+          },
+          "--dsw-alias-button-elevated-fill": {
+            "light": "#FFFFFF",
+            "dark": "#FFFFFF"
+          },
+          "--dsw-alias-button-floating-fill": {
+            "light": "#FFFFFF",
+            "dark": "#FFFFFF"
+          },
+          "--dsw-alias-button-floating-hover": {
+            "light": "#F6FAF2",
+            "dark": "#F6FAF2"
+          },
+          "--dsw-alias-button-contrast-fill": {
+            "light": "#234030",
+            "dark": "#234030"
+          },
+          "--dsw-alias-markdown-code-block": {
+            "light": "#EFF6EA",
+            "dark": "#EFF6EA"
+          },
+          "--dsw-alias-markdown-code-block-banner": {
+            "light": "#E3EEDC",
+            "dark": "#E3EEDC"
+          },
+          "--dsw-alias-markdown-inline-code": {
+            "light": "#ECF3E6",
+            "dark": "#ECF3E6"
+          },
+          "--dsw-alias-markdown-citation": {
+            "light": "#ECF3E6",
+            "dark": "#ECF3E6"
+          },
+          "--dsw-alias-markdown-tag": {
+            "light": "#ECF3E6",
+            "dark": "#ECF3E6"
+          },
+          "--dsw-alias-markdown-placeholder": {
+            "light": "#E3EEDC",
+            "dark": "#E3EEDC"
+          },
+          "--dsw-alias-markdown-code-segment-selected": {
+            "light": "#FFB34729",
+            "dark": "#FFB34729"
+          },
+          "--dsw-alias-markdown-code-segment-unselected": {
+            "light": "#EFF6EA",
+            "dark": "#EFF6EA"
+          },
+          "--dsw-alias-scrollbar-bg-l1": {
+            "light": "#2D5A3D29",
+            "dark": "#2D5A3D29"
+          },
+          "--dsw-alias-scrollbar-bg-l2": {
+            "light": "#2D5A3D38",
+            "dark": "#2D5A3D38"
+          },
+          "--dsw-alias-scrollbar-hover-l1": {
+            "light": "#2D5A3D52",
+            "dark": "#2D5A3D52"
+          },
+          "--dsw-alias-scrollbar-hover-l2": {
+            "light": "#2D5A3D66",
+            "dark": "#2D5A3D66"
+          },
+          "--dsw-alias-tooltip-bg": {
+            "light": "#234030",
+            "dark": "#234030"
+          },
+          "--dsw-alias-toast-bg": {
+            "light": "#FFFFFF",
+            "dark": "#FFFFFF"
+          },
+          "--dsw-alias-state-error-primary": {
+            "light": "#C65B6A",
+            "dark": "#C65B6A"
+          },
+          "--dsw-alias-state-error-secondary": {
+            "light": "#DB5A6B",
+            "dark": "#DB5A6B"
+          },
+          "--dsw-alias-state-success-primary": {
+            "light": "#21A675",
+            "dark": "#21A675"
+          },
+          "--dsw-alias-state-success-secondary": {
+            "light": "#2D5A3D",
+            "dark": "#2D5A3D"
+          },
+          "--dsw-alias-state-success-tertiary": {
+            "light": "#A8C8B2",
+            "dark": "#A8C8B2"
+          },
+          "--dsw-alias-state-warn-primary": {
+            "light": "#B97F3A",
+            "dark": "#B97F3A"
+          },
+          "--dsw-alias-state-warn-secondary": {
+            "light": "#D9A45E",
+            "dark": "#D9A45E"
+          },
+          "--dsw-alias-state-warn-tertiary": {
+            "light": "#EFDCC0",
+            "dark": "#EFDCC0"
+          },
+          "--dsw-alias-state-warn-label": {
+            "light": "#8A5A22",
+            "dark": "#8A5A22"
+          },
+          "--dsw-alias-state-business-primary": {
+            "light": "#FFB347",
+            "dark": "#FFB347"
+          },
+          "--dsw-alias-state-business-tertiary": {
+            "light": "#FFD08A",
+            "dark": "#FFD08A"
+          },
+          "--dsw-specific-sidebar-fill": {
+            "light": "linear-gradient(160deg,#D9E8DC 0%,#E6D9C6 28%,#F2E0BE 58%,#F6E1EE 88%,#DCD5F0 100%)",
+            "dark": "linear-gradient(160deg,#D9E8DC 0%,#E6D9C6 28%,#F2E0BE 58%,#F6E1EE 88%,#DCD5F0 100%)"
+          }
+        },
+        "reading": {
+          "colorScheme": "light",
+          "bg": "#FFFFFF",
+          "alpha": 0.62,
+          "blur": 3,
+          "maxWidth": 640
+        },
+        "accent": "#FFB347",
+        "ambient": {
+          "kind": "caiyun",
+          "stars": 12
+        }
+      }
+    ]
+
+    /**
+     * Marks the ambient nodes this run created.
+     *
+     * The layer lives on the document body, so parentage can no longer identify
+     * ownership. Anything found without this stamp is debris from an earlier build —
+     * and because the shell keeps its DOM across a plugin reload, such nodes outlive
+     * the code that made them.
+     */
+    const AMBIENT_OWNER = 'theme-gallery'
+
+    /**
+     * Ambient scenery drawn inside the sidebar column.
+     *
+     * Ported from the source admin system, where each theme carried its own
+     * animation component mounted into a `left-sidebar-theme-container`. The
+     * artwork is reproduced here (mountains, mist, water, dragonflies, falling
+     * petals for 山青婷彩; corner glow, rising bubbles, swaying seaweed for
+     * 梦海游鱼) with two deliberate changes:
+     *
+     *  - sizes are expressed in **percentages and em**, not the source system's
+     *    fixed 223 px sidebar width, so the scene scales to whatever width the
+     *    user drags the sidebar to;
+     *  - nothing here carries colour of its own beyond the ported artwork, and the
+     *    layer is `pointer-events:none` / `z-index:0`, so it can never intercept a
+     *    click or cover a menu item. The source system has the same rule, and a
+     *    bug note there records opaque mountains hiding the bottom menu rows.
+     *
+     * `#dsh-theme-ambient` is a seat this plugin injects into the sidebar column;
+     * `syncAmbient()` fills it, and each theme chooses its scene by `ambient.kind`.
+     */
+    const AMBIENT_CSS = [
+      /* The layer, arranged exactly like the working `dsh-theme-firefly` ambient layer:
+         a full-viewport fixed element styled by a CLASS, appended to `document.body`, at
+         `z-index: 60`.
+         Every other arrangement of this layer failed to paint on this machine — precise
+         inline geometry, maximum z-index, `documentElement` as the parent, inline styles
+         per element. The firefly plugin uses this one and renders, so this is now the
+         layer's arrangement. The scenery is placed INSIDE it (`.dsh-ambient-scene`). */
+      '#dsh-theme-ambient{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:60}',
+      '.dsh-ambient-scene{overflow:hidden}',
+      /* The scene roots carry their own positioning inline too; the selectors below are
+         kept only where a rule cannot be inlined (`@keyframes`) or where they must reach
+         a shell element. */
+      '.ZTP-Xa_sidebarCol{position:relative}',
+
+      /* BRING-UP PROBE — remove with the rest of the diagnostics.
+         The control layer, copied rule-for-rule from the working `dsh-theme-firefly`
+         plugin: geometry and stacking from a class, motion from `@keyframes`, and only
+         the per-element random values inline. */
+      '.dsh-amb-control{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}',
+      /* BRING-UP PROBE — the scene box inside the proven layer. No `pointer-events` here on
+         purpose: the layer above already disables it, and this box is the thing being
+         tested rather than a decoration that must stay click-through. */
+      '.dsh-amb-control-scene{overflow:hidden}',
+
+      /* The scenery's own geometry. These live here rather than inline because the scene
+         markup is built as a string, and they must reach it wherever it is mounted — which
+         is now inside the proven layer rather than a layer of its own. */
+      '.dsh-amb-control-scene .sta-mountains{position:absolute;left:0;right:0;bottom:0;height:46%;z-index:3}',
+      '.dsh-amb-control-scene .sta-mountains svg{display:block;width:100%;height:100%}',
+      '.dsh-amb-control-scene .sta-mist{position:absolute;height:1.6em;border-radius:1000px;z-index:4;',
+      'background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);',
+      'filter:blur(5px);opacity:.85;animation:dsh-amb-mist 26s ease-in-out infinite alternate}',
+      '.dsh-amb-control-scene .sta-mist-1{width:62%;top:56%;left:12%}',
+      '.dsh-amb-control-scene .sta-mist-2{width:44%;top:61%;left:38%;opacity:.6;',
+      'animation-duration:32s;animation-delay:-9s}',
+      '.dsh-amb-control-scene .sta-pond{position:absolute;left:0;right:0;bottom:0;height:13%;z-index:5;',
+      'background:linear-gradient(to bottom,rgba(104,178,150,.62),rgba(66,141,113,.78))}',
+      '.dsh-amb-control-scene .sta-pond-line{position:absolute;top:0;left:0;right:0;height:1.2px;opacity:.6;',
+      'background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent)}',
       '.dsh-amb-control-scene .sta-ripple{position:absolute;z-index:6;width:.55em;height:.55em}',
       '.dsh-amb-control-scene .sta-ripple span{position:absolute;inset:0;',
       'border:1.6px solid rgba(217,123,164,.9);border-radius:50%;',
@@ -958,6 +1549,67 @@ window.__ModuleLoader__.load({
       'box-shadow:0 0 10px 3px rgba(122,205,255,.55),0 0 22px 6px rgba(122,205,255,.22);',
       'animation:dsh-amb-mote linear infinite}',
 
+      /* ── 营慕彩云 / 江畔冬云 / 徐山军月 / 佩安杰心 / 光彩凤晨 ─────────────
+         The five scenes ported alongside shan and dream. Their element geometry,
+         colour and per-element timing are INLINE in the scene builders (same rule
+         as shan: a stylesheet that never applies cannot silently collapse them),
+         so the only things that must live here are the `@keyframes` — the one
+         construct that cannot be expressed inline. Each scene prefixes its own
+         keyframe names (ym / jp / xs / pj / gc) so they cannot collide. */
+      '@keyframes dsh-amb-ym-star{0%{opacity:.35;transform:scale(1)}100%{opacity:1;transform:scale(1.25)}}',
+      '@keyframes dsh-amb-ym-drift{from{transform:translateX(0)}to{transform:translateX(24em)}}',
+      '@keyframes dsh-amb-ym-sea{from{transform:translateX(0)}to{transform:translateX(-50%)}}',
+      '@keyframes dsh-amb-ym-bob{0%,100%{transform:translateY(0) rotate(-2.5deg)}50%{transform:translateY(-9px) rotate(2.5deg)}}',
+      /* The balloons' wide round-trip paths. Deliberately two distinct keyframes, so the
+         two never move as a pair: the lower sidebar rows are covered and exposed in turn
+         rather than blocked by one stationary balloon.
+         The main balloon's loop is (0, +1.5em) → (7em, +0.5em) → back: the START and END
+         sit 1.5em below its resting line and the rightmost apex sits 0.5em below it, so the
+         path rises while travelling right and falls while returning — up, down, left and
+         right — while the apex itself stays exactly where it was accepted.
+         EVERY vertical term is at or below the resting baseline (y >= 0), and that is a
+         requirement, not taste: the scene box clips at its own top edge (`overflow:hidden`),
+         so any stop above y=0 slices the envelope's crown off at the apex, which is the hard
+         crop the user reported. */
+      '@keyframes dsh-amb-ym-wander{0%{transform:translate(0,1.5em)}50%{transform:translate(7em,0.5em)}100%{transform:translate(0,1.5em)}}',
+      '@keyframes dsh-amb-ym-wander-2{0%{transform:translate(0,0)}50%{transform:translate(-5em,1.6em)}100%{transform:translate(0,0)}}',
+      '@keyframes dsh-amb-jp-cloud{from{transform:translateX(0)}to{transform:translateX(22em)}}',
+      '@keyframes dsh-amb-jp-snow{0%{transform:translate(0,-0.5em);opacity:0}8%{opacity:.9}'
+        + '50%{transform:translate(0.9em,9em)}92%{opacity:.9}100%{transform:translate(-0.5em,19em);opacity:0}}',
+      '@keyframes dsh-amb-jp-ripple{from{transform:translateX(0)}to{transform:translateX(25em)}}',
+      '@keyframes dsh-amb-jp-glint{0%{opacity:.25;transform:scale(.8)}100%{opacity:.95;transform:scale(1.3)}}',
+      '@keyframes dsh-amb-jp-boat{from{transform:translateX(0)}to{transform:translateX(3em)}}',
+      '@keyframes dsh-amb-jp-bob{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-3px) rotate(1.4deg)}}',
+      '@keyframes dsh-amb-jp-sway{0%,100%{transform:rotate(0deg)}50%{transform:rotate(3deg)}}',
+      '@keyframes dsh-amb-xs-star{0%{opacity:.3;transform:scale(.85)}100%{opacity:1;transform:scale(1.25)}}',
+      '@keyframes dsh-amb-xs-night{from{transform:translateX(0)}to{transform:translateX(26em)}}',
+      '@keyframes dsh-amb-xs-meteor{0%{transform:rotate(-32deg) translateX(0);opacity:0}3%{opacity:1}'
+        + '9%{transform:rotate(-32deg) translateX(-9em);opacity:0}'
+        + '100%{transform:rotate(-32deg) translateX(-9em);opacity:0}}',
+      '@keyframes dsh-amb-pj-smoke{0%{stroke-dashoffset:90;opacity:0}12%{opacity:.7}70%{opacity:.45}'
+        + '100%{stroke-dashoffset:-20;opacity:0}}',
+      '@keyframes dsh-amb-pj-dust{0%{transform:translate(0,0);opacity:0}15%{opacity:.9}'
+        + '55%{transform:translate(-0.6em,-1.9em);opacity:.5}100%{transform:translate(0.5em,-4em);opacity:0}}',
+      '@keyframes dsh-amb-gc-ray{0%{transform:translateY(-40%);opacity:.3}50%{transform:translateY(30%);opacity:.8}'
+        + '100%{transform:translateY(90%);opacity:.3}}',
+      '@keyframes dsh-amb-gc-feather{0%{transform:translate(0,0) rotate(0deg);opacity:0}10%{opacity:.85}'
+        + '25%{transform:translate(1.9em,6em) rotate(95deg)}50%{transform:translate(-1.9em,13em) rotate(190deg);opacity:.85}'
+        + '75%{transform:translate(1.9em,20em) rotate(285deg)}90%{opacity:.8}'
+        + '100%{transform:translate(0,26em) rotate(380deg);opacity:0}}',
+      '@keyframes dsh-amb-gc-fly{0%{transform:translate(-11em,0.6em) scaleX(1);opacity:0}6%{opacity:.95}'
+        + '40%{transform:translate(-3em,-1.1em) scaleX(1);opacity:.95}'
+        + '46%{transform:translate(2.5em,-0.5em) scaleX(1);opacity:.85}'
+        + '50%{transform:translate(9em,0) scaleX(1);opacity:0}'
+        + '50.1%{transform:translate(9em,0) scaleX(-1);opacity:0}'
+        + '56%{transform:translate(2.5em,-0.6em) scaleX(-1);opacity:.9}'
+        + '90%{transform:translate(-9em,0.4em) scaleX(-1);opacity:.6}'
+        + '96%{transform:translate(-11em,0.7em) scaleX(-1);opacity:0}'
+        + '96.1%{transform:translate(-11em,0.7em) scaleX(1);opacity:0}'
+        + '100%{transform:translate(-11em,0.6em) scaleX(1);opacity:0}}',
+      '@keyframes dsh-amb-gc-bob{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-5px) rotate(-1.5deg)}}',
+      '@keyframes dsh-amb-gc-wing{0%{transform:rotate(0deg)}40%{transform:rotate(-3.5deg)}60%{transform:rotate(2.5deg)}100%{transform:rotate(0deg)}}',
+      '@keyframes dsh-amb-gc-dew{0%{opacity:.3;transform:scale(1)}100%{opacity:1;transform:scale(1.5)}}',
+
       /* Respect a user who has asked the system for less motion: the scenery
          stays, the movement does not. */
       '@media (prefers-reduced-motion:reduce){#dsh-theme-ambient *{animation:none!important}}',
@@ -971,6 +1623,10 @@ window.__ModuleLoader__.load({
       current: '当前',
       applied: '已应用',
       empty: '正在读取官方主题注册表…',
+      // The diagnostics below the cards are a FEATURE — a live reading of the active skin —
+      // and a wall of monospace text reads as a fault unless the panel says otherwise.
+      diagNote: '以下为有意设计的诊断信息，便于直观查看皮肤的实时运行状态，并非系统报错；'
+        + '带 ⚠ 的行才表示装饰未生效',
     }
     const en = {
       title: 'Theme skins',
@@ -979,6 +1635,8 @@ window.__ModuleLoader__.load({
       current: 'Current',
       applied: 'Applied',
       empty: 'Reading the theme registry…',
+      diagNote: 'The lines below are intentional diagnostics of the live skin state, '
+        + 'not an error report; only lines starting with ⚠ mean the scenery is not working',
     }
 
     /**
@@ -1009,6 +1667,12 @@ window.__ModuleLoader__.load({
       'background:var(--dsw-alias-bg-layer-3);border:.5px solid var(--dsw-alias-border-l3);',
       'border-radius:8px;padding:8px 10px;word-break:break-all}',
       '.tg-warn{color:var(--dsw-alias-state-warn-primary);border-color:var(--dsw-alias-state-warn-primary)}',
+      /* The diagnostics live BELOW the cards, set apart by their own margin and a divider,
+         so they read as a separate reference block rather than as part of the picker — and
+         so the picker itself stays the first thing the eye lands on. */
+      '.tg-diag{margin-top:14px;padding-top:12px;border-top:.5px solid var(--dsw-alias-border-l2);',
+      'display:flex;flex-direction:column;gap:10px}',
+      '.tg-diag-note{font-size:12px;line-height:1.5;color:var(--dsw-alias-label-secondary)}',
       '.tg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}',
       '.tg-card{display:flex;flex-direction:column;gap:8px;padding:12px;text-align:left;cursor:pointer;',
       'background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary);',
@@ -1643,155 +2307,976 @@ window.__ModuleLoader__.load({
     }
 
     /**
-     * One hovering dragonfly: an outer element on its flight path and an inner one
-     * bobbing on the wingbeat, so the two motions compose.
-     * @param suffix - gradient id suffix.
-     * @param className - the positioning class.
-     * @param position - inline position.
-     * @param flight - animation shorthand for the flight path.
-     * @param delay - animation delay.
-     * @returns the dragonfly markup.
+     * One hovering dragonfly: an outer element on its flight path and an inner one
+     * bobbing on the wingbeat, so the two motions compose.
+     * @param suffix - gradient id suffix.
+     * @param className - the positioning class.
+     * @param position - inline position.
+     * @param flight - animation shorthand for the flight path.
+     * @param delay - animation delay.
+     * @returns the dragonfly markup.
+     */
+    function dragonflyBlock(suffix, className, position, flight, delay) {
+      return open('div', {
+        class: `sta-dfly ${className}`,
+        style: `position:absolute;z-index:8;will-change:transform;${position};`
+          + `animation:${flight};animation-delay:${delay}`,
+      }) + open('div', {
+        class: 'sta-bob',
+        style: `animation:dsh-amb-bob ${suffix === '2' ? '1.1s' : '.9s'} ease-in-out infinite;`
+          + `animation-delay:${suffix === '2' ? '-.4s' : '0s'}`,
+      }) + dragonflyMarkup(suffix) + '</div></div>'
+    }
+
+    /**
+     * One seaweed blade. The sway is applied to the group so the blades move from their
+     * base, and each blade animates on its own phase.
+     * @param key - blade index.
+     * @param d - path data.
+     * @param gradient - gradient id.
+     * @param width - stroke width.
+     * @param opacity - blade opacity.
+     * @returns the blade markup.
+     */
+    function bladeMarkup(key, d, gradient, width, opacity) {
+      const durations = { 1: '6s', 2: '7.4s', 3: '5.2s', 4: '8.1s', 5: '6.6s' }
+      const delays = { 1: '0s', 2: '-1.6s', 3: '-2.8s', 4: '-.9s', 5: '-3.4s' }
+      return open('g', {
+        class: `dof-blade dof-blade-${key}`,
+        style: `transform-origin:50% 100%;animation:dsh-amb-sway ${durations[key]} ease-in-out infinite alternate;`
+          + `animation-delay:${delays[key]}`,
+      }) + open('path', {
+        d, fill: `url(#${gradient})`, stroke: `url(#${gradient})`, 'stroke-width': width, opacity,
+      }) + '</path></g>'
+    }
+
+    function seaweedMarkup() {
+      const blade = bladeMarkup
+
+      return open('svg', {
+        viewBox: '0 0 140 120',
+        preserveAspectRatio: 'none',
+        style: 'display:block;width:100%;height:100%',
+      })
+        + open('defs', {})
+        + open('linearGradient', { id: 'dsh-dof-weed-a', x1: '0', y1: '1', x2: '0', y2: '0' })
+        + open('stop', { offset: '0', 'stop-color': '#1E6E93' }) + '</stop>'
+        + open('stop', { offset: '0.55', 'stop-color': '#3E93BC' }) + '</stop>'
+        + open('stop', { offset: '1', 'stop-color': '#A5DEF0', 'stop-opacity': '0.85' }) + '</stop>'
+        + '</linearGradient>'
+        + open('linearGradient', { id: 'dsh-dof-weed-b', x1: '0', y1: '1', x2: '0', y2: '0' })
+        + open('stop', { offset: '0', 'stop-color': '#2B7FA6' }) + '</stop>'
+        + open('stop', { offset: '0.6', 'stop-color': '#4FA3C6' }) + '</stop>'
+        + open('stop', { offset: '1', 'stop-color': '#B8E2F2', 'stop-opacity': '0.85' }) + '</stop>'
+        + '</linearGradient>'
+        + open('linearGradient', { id: 'dsh-dof-weed-c', x1: '0', y1: '1', x2: '0', y2: '0' })
+        + open('stop', { offset: '0', 'stop-color': '#4A78A8' }) + '</stop>'
+        + open('stop', { offset: '0.6', 'stop-color': '#7FA9CE' }) + '</stop>'
+        + open('stop', { offset: '1', 'stop-color': '#CBE2F4', 'stop-opacity': '0.8' }) + '</stop>'
+        + '</linearGradient>'
+        + '</defs>'
+        + blade('1', 'M 22 120 C 12 96, 26 74, 18 48 C 15 38, 18 28, 24 20 C 20 34, 24 44, 30 60 C 36 80, 30 100, 32 120 Z', 'dsh-dof-weed-a', '2.2', '0.95')
+        + blade('2', 'M 48 120 C 40 98, 54 80, 46 56 C 42 44, 48 34, 56 24 C 50 40, 56 52, 60 68 C 64 88, 56 104, 58 120 Z', 'dsh-dof-weed-b', '2', '0.92')
+        + blade('3', 'M 74 120 C 68 102, 78 88, 72 68 C 69 58, 72 48, 78 40 C 74 52, 78 62, 82 76 C 86 94, 80 108, 82 120 Z', 'dsh-dof-weed-c', '1.8', '0.88')
+        + blade('4', 'M 96 120 C 92 104, 102 90, 96 72 C 93 62, 96 54, 102 46 C 98 58, 102 68, 106 82 C 110 98, 102 110, 104 120 Z', 'dsh-dof-weed-a', '1.6', '0.85')
+        + blade('5', 'M 118 120 C 114 108, 122 96, 117 82 C 115 74, 117 68, 121 62 C 118 72, 121 80, 124 92 C 127 104, 121 112, 123 120 Z', 'dsh-dof-weed-b', '1.4', '0.8')
+        + open('ellipse', { cx: '30', cy: '119', rx: '14', ry: '4', fill: '#7FAFC6', opacity: '0.55' }) + '</ellipse>'
+        + open('ellipse', { cx: '72', cy: '120', rx: '10', ry: '3.4', fill: '#8FB9CE', opacity: '0.5' }) + '</ellipse>'
+        + open('ellipse', { cx: '108', cy: '119.5', rx: '12', ry: '3.6', fill: '#7FAFC6', opacity: '0.45' }) + '</ellipse>'
+        + '</svg>'
+    }
+
+    /**
+     * One cartoon fish, swimming across the water.
+     *
+     * Ported from the source system's separate `FishAnimation.vue`. That component drives the
+     * fish from JavaScript through entering / bubbling / leaving phases on a 60-second cycle,
+     * but this skin is a static bundle with no component runtime to host a script — so the
+     * same artwork swims continuously instead, on a CSS `@keyframes` cross, with the tail and
+     * the whole body on separate animations so it reads as swimming rather than sliding.
+     *
+     * The artwork is reproduced shape for shape: the body curve, tail, dorsal fin, pectoral
+     * fin, and the three-part eye. The colours are retuned into the theme's blue family —
+     * the source values (`#38bdf8` body, `#1d4ed8` fins) sat outside the dream palette and
+     * read as a sticker, the same treatment shan's mountains got when their source greens
+     * were darkened for this sidebar.
+     * @param suffix - unique id suffix, so several fish can coexist.
+     * @param size - rendered width in em.
+     * @param top - vertical position within the water, as a percentage.
+     * @param duration - seconds for one crossing.
+     * @param delay - animation delay, so the fish do not move in lockstep.
+     * @param flip - whether this fish swims right-to-left instead.
+     * @returns the fish markup.
+     */
+    function fishMarkup(suffix, size, top, duration, delay, flip) {
+      const anim = flip ? 'dsh-amb-swim-back' : 'dsh-amb-swim'
+      return open('div', {
+        class: `dof-fish${flip ? ' dof-fish-flip' : ''}`,
+        style: 'position:absolute;left:0;opacity:.94;'
+          + `top:${top}%;width:${size}em;`
+          + `animation:${anim} ${duration}s linear infinite;animation-delay:${delay}s`,
+      })
+        + open('div', {
+          class: 'dof-fish-bob',
+          style: `animation-duration:${(duration / 8).toFixed(2)}s`,
+        })
+        + open('svg', {
+          viewBox: '0 0 50 18',
+          preserveAspectRatio: 'xMidYMid meet',
+          style: 'display:block;width:100%;height:auto;overflow:visible',
+        })
+        + open('g', { class: 'dof-fish-body' })
+        // Body — recoloured into the theme's own blue family. The source values
+        // (`#38bdf8` body, `#1d4ed8` fins) sat outside the dream palette and read
+        // as a sticker pasted on the water; the same treatment shan's mountains
+        // got when their source greens were darkened for this sidebar.
+        + open('path', {
+          d: 'M10 10 C20 5 35 5 45 10 C40 15 25 15 10 10 Z',
+          fill: '#5FA5D6', stroke: '#2B6E9E', 'stroke-width': '1',
+        }) + '</path>'
+        // Tail
+        + open('path', {
+          d: 'M10 10 L5 7 L5 13 Z',
+          fill: '#2B6E9E', stroke: '#2B6E9E', 'stroke-width': '1', class: 'dof-fish-tail',
+        }) + '</path>'
+        // Dorsal fin
+        + open('path', {
+          d: 'M20 7 L25 3 L30 7',
+          fill: '#2B6E9E', stroke: '#2B6E9E', 'stroke-width': '1',
+        }) + '</path>'
+        // Pectoral fin
+        + open('path', {
+          d: 'M35 9 L40 12 L45 9',
+          fill: '#5FA5D6', stroke: '#2B6E9E', 'stroke-width': '1',
+        }) + '</path>'
+        // Eye: white, pupil, highlight
+        + open('circle', { cx: '40', cy: '8', r: '2', fill: '#FFFFFF' }) + '</circle>'
+        + open('circle', { cx: '41', cy: '8', r: '1', fill: '#16384F' }) + '</circle>'
+        + open('circle', { cx: '40.5', cy: '7.5', r: '0.5', fill: '#FFFFFF' }) + '</circle>'
+        + '</g>'
+        + '</svg>'
+        + '</div></div>'
+    }
+
+    /**
+     * One drifting cloud-sea copy for 营慕彩云, ported shape-for-shape from
+     * `YingMuCaiYunAnimation.vue`. The source drifts a 200%-wide flex track holding
+     * two copies of the same SVG, so one marquee keyframe loops seamlessly; each
+     * copy carries its own gradient id because two tracks (back and front) and two
+     * preview seats all live in one document.
+     * @param variant - 'back' (deep purple, slow) or 'front' (pink-gold, quicker).
+     * @param copy - unique id suffix for this copy's gradient.
+     * @returns one sea-section SVG.
+     */
+    function ymSeaSvg(variant, copy) {
+      const back = variant === 'back'
+      const gradient = `dsh-ym-sea-${variant}-${copy}`
+      return open('svg', {
+        viewBox: back ? '0 0 240 70' : '0 0 240 80',
+        preserveAspectRatio: 'none',
+        style: 'width:50%;height:100%;flex:none;display:block',
+      })
+        + open('defs', {})
+        + open('linearGradient', { id: gradient, x1: '0', y1: '0', x2: '0', y2: '1' })
+        + open('stop', { offset: '0', 'stop-color': back ? '#C9B6E4' : '#FFF0F7' }) + '</stop>'
+        + open('stop', { offset: '1', 'stop-color': back ? '#A68FCA' : '#E8B4D6' }) + '</stop>'
+        + '</linearGradient>'
+        + '</defs>'
+        + open('path', {
+          d: back
+            ? 'M0 70 L0 44 Q14 40 22 46 Q26 28 44 30 Q54 16 72 22 Q84 8 102 16 Q118 6 134 14 '
+              + 'Q150 8 164 18 Q178 12 190 24 Q206 20 216 34 Q230 32 240 42 L240 70 Z'
+            : 'M0 80 L0 52 Q12 48 22 54 Q28 36 48 38 Q60 24 78 30 Q92 14 110 24 Q126 12 142 22 '
+              + 'Q158 14 172 26 Q188 22 198 36 Q214 34 224 48 Q234 50 240 56 L240 80 Z',
+          fill: `url(#${gradient})`,
+        }) + '</path>'
+        + '</svg>'
+    }
+
+    /**
+     * One hot-air balloon for 营慕彩云, ported from the source component's two
+     * inline SVGs: envelope with highlight, suspension ropes, and a basket.
+     * @param variant - 'main' (orange-gold-pink, near) or 'mini' (pink-purple, far).
+     * @returns the balloon SVG.
+     */
+    function ymBalloonMarkup(variant) {
+      const main = variant === 'main'
+      const gradient = main ? 'dsh-ym-balloon-main' : 'dsh-ym-balloon-mini'
+      const svg = open('svg', {
+        viewBox: main ? '0 0 64 96' : '0 0 40 62',
+        style: 'display:block;width:100%;height:auto;overflow:visible;'
+          + 'filter:drop-shadow(0 4px 6px rgba(90,58,90,.25))',
+      })
+        + open('defs', {})
+        + open('linearGradient', { id: gradient, x1: '0', y1: '0', x2: '1', y2: '1' })
+        + (main
+          ? open('stop', { offset: '0', 'stop-color': '#FFC96B' }) + '</stop>'
+            + open('stop', { offset: '0.55', 'stop-color': '#FFB347' }) + '</stop>'
+            + open('stop', { offset: '1', 'stop-color': '#F08BB4' }) + '</stop>'
+          : open('stop', { offset: '0', 'stop-color': '#F2C9E3' }) + '</stop>'
+            + open('stop', { offset: '1', 'stop-color': '#A68FCA' }) + '</stop>')
+        + '</linearGradient>'
+        + '</defs>'
+      if (main) {
+        return svg
+          + open('path', {
+            d: 'M32 3 C48 3 59 15 59 30 C59 45 47 58 38 66 L26 66 C17 58 5 45 5 30 C5 15 16 3 32 3 Z',
+            fill: `url(#${gradient})`,
+          }) + '</path>'
+          + open('path', {
+            d: 'M32 3 C36 3 39 15 39 30 C39 45 37 58 35.5 66 L28.5 66 C27 58 25 45 25 30 C25 15 28 3 32 3 Z',
+            fill: '#FFE3B8', opacity: '0.85',
+          }) + '</path>'
+          + open('path', { d: 'M13 13 C9 22 10 40 18 55', stroke: '#E88BB0', 'stroke-width': '1.4', fill: 'none', opacity: '0.55' }) + '</path>'
+          + open('path', { d: 'M51 13 C55 22 54 40 46 55', stroke: '#E88BB0', 'stroke-width': '1.4', fill: 'none', opacity: '0.55' }) + '</path>'
+          + open('path', { d: 'M27.5 66 L28.5 75 M36.5 66 L35.5 75', stroke: '#8A6A4A', 'stroke-width': '1.2' }) + '</path>'
+          + open('rect', { x: '25.5', y: '75', width: '13', height: '9', rx: '2.5', fill: '#9C7C5C' }) + '</rect>'
+          + open('path', { d: 'M25.5 78.5 L38.5 78.5', stroke: '#7E6146', 'stroke-width': '1.2' }) + '</path>'
+          + '</svg>'
+      }
+      return svg
+        + open('path', {
+          d: 'M20 2 C30 2 36 10 36 19 C36 29 28 37 22.5 42 L17.5 42 C12 37 4 29 4 19 C4 10 10 2 20 2 Z',
+          fill: `url(#${gradient})`,
+        }) + '</path>'
+        + open('path', {
+          d: 'M20 2 C23 2 25.5 10 25.5 19 C25.5 29 24 37 23 42 L17 42 C16 37 14.5 29 14.5 19 C14.5 10 17 2 20 2 Z',
+          fill: '#F6E7F4', opacity: '0.9',
+        }) + '</path>'
+        + open('path', { d: 'M17.5 42 L18 47 M22.5 42 L22 47', stroke: '#8A6A4A', 'stroke-width': '1' }) + '</path>'
+        + open('rect', { x: '16', y: '47', width: '8', height: '6', rx: '1.5', fill: '#8A6A4A' }) + '</rect>'
+        + '</svg>'
+    }
+
+    /**
+     * The 营慕彩云 scene: a dusk glow, warm stars, blurred drifting clouds, two
+     * marquee cloud-seas (deep purple behind, pink-gold in front) and two bobbing
+     * hot-air balloons.
+     *
+     * Ported from `YingMuCaiYunAnimation.vue`. The source stars are white on a dusk
+     * sky; on this sidebar's pastel gradient white would vanish, so they are retuned
+     * into the theme's warm gold — the same treatment the dream fish got when their
+     * sticker blues moved into the theme family.
+     * @param stars - how many stars to seed.
+     * @returns the scene markup.
+     */
+    function caiyunAmbientScene(stars) {
+      const count = Math.max(0, Math.min(30, stars ?? 12))
+      let starNodes = ''
+      for (let n = 1; n <= count; n += 1) {
+        const size = 2 + ((n * 3) % 2)
+        starNodes += open('div', {
+          class: 'ym-star',
+          style: 'position:absolute;border-radius:50%;'
+            + `left:${((n * 37) % 84) + 6}%;top:${((n * 23) % 44) + 4}%;`
+            + `width:${size}px;height:${size}px;`
+            + 'background:radial-gradient(circle,#FFF7E2 0%,rgba(255,232,190,.55) 100%);'
+            + 'box-shadow:0 0 4px rgba(255,224,160,.8);'
+            + 'animation:dsh-amb-ym-star 2.2s ease-in-out infinite alternate;'
+            + `animation-delay:${-(n * 0.37)}s`,
+        }) + '</div>'
+      }
+
+      const DRIFTS = [
+        ['1', '18em', '5em', '8%', '70s', '-22s'],
+        ['2', '24em', '7em', '28%', '110s', '-44s'],
+        ['3', '16em', '4.5em', '52%', '90s', '-66s'],
+      ]
+      let driftNodes = ''
+      for (const [key, width, height, top, duration, delay] of DRIFTS) {
+        driftNodes += open('div', {
+          class: `ym-drift ym-drift-${key}`,
+          style: `position:absolute;border-radius:1000px;left:-14em;top:${top};width:${width};height:${height};`
+            + 'background:radial-gradient(ellipse,rgba(232,180,214,.55) 0%,rgba(166,143,202,.3) 60%,rgba(166,143,202,0) 100%);'
+            + 'filter:blur(10px);'
+            + `animation:dsh-amb-ym-drift ${duration} linear infinite;animation-delay:${delay}`,
+        }) + '</div>'
+      }
+
+      const sea = (variant, bottom, height, zIndex, opacity, duration) => open('div', {
+        class: `ym-sea ym-sea-${variant}`,
+        style: `position:absolute;left:0;right:0;bottom:${bottom};height:${height};z-index:${zIndex};`
+          + `opacity:${opacity};overflow:hidden`,
+      })
+        + open('div', {
+          class: 'ym-sea-track',
+          style: `position:absolute;left:0;top:0;width:200%;height:100%;display:flex;`
+            + `animation:dsh-amb-ym-sea ${duration} linear infinite`,
+        })
+        + ymSeaSvg(variant, 'a') + ymSeaSvg(variant, 'b')
+        + '</div></div>'
+
+      // The outer element carries a WIDE WANDER and the inner one keeps the source's
+      // small bob + sway. Two separate transforms on two elements, so they compose:
+      // the balloon drifts across the band while still breathing.
+      //
+      // Why the wander: the balloons legitimately float over the sidebar's lower rows,
+      // and a bigger path means they take turns covering and exposing that text instead
+      // of hovering in one spot. The layer/z-index is deliberately NOT lowered — being
+      // in front is what gives them depth, and they are never still for long.
+      const balloon = (variant, position, size, duration, delay, zIndex, wander, wanderDelay) => open('div', {
+        class: `ym-balloon ym-balloon-${variant}`,
+        style: `position:absolute;pointer-events:none;${position}width:${size};z-index:${zIndex};`
+          + `animation:${wander} ease-in-out infinite;animation-delay:${wanderDelay}`,
+      })
+        + open('div', {
+          class: 'ym-bob',
+          style: `transform-origin:50% 25%;animation:dsh-amb-ym-bob ${duration} ease-in-out infinite;`
+            + `animation-delay:${delay}`,
+        })
+        + ymBalloonMarkup(variant)
+        + '</div></div>'
+
+      return open('div', { class: 'ym', style: 'position:absolute;inset:0;display:block' })
+        + open('div', {
+          class: 'ym-glow',
+          style: 'position:absolute;left:0;right:0;bottom:0;height:52%;z-index:1;'
+            + 'background:radial-gradient(ellipse at 35% 100%,rgba(255,214,170,.4) 0%,rgba(255,214,170,0) 70%)',
+        }) + '</div>'
+        + starNodes
+        + driftNodes
+        + sea('back', '16%', '26%', 4, '0.75', '80s')
+        + balloon('mini', 'right:10%;bottom:56%;', '2.6em', '9.5s', '-3.5s', 5,
+          'dsh-amb-ym-wander-2 38s', '-13s')
+        + sea('front', '0%', '32%', 6, '1', '50s')
+        + balloon('main', 'left:12%;bottom:38%;', '4.6em', '7s', '0s', 7,
+          'dsh-amb-ym-wander 30s', '0s')
+        + '</div>'
+    }
+
+    /**
+     * One 乌篷船 (black-awning boat) for 江畔冬云, ported from
+     * `JiangPanDongYunAnimation.vue`: hull, awning, poling oar and a warm bow
+     * lantern, plus its water reflection. The source carries the reflection as a
+     * second SVG; here one SVG holds both, the mirror produced by a flipped
+     * `<use>`, so there is no second element to keep in place.
+     * @returns the boat SVG.
+     */
+    function jpBoatMarkup() {
+      return open('svg', { viewBox: '0 0 120 92', style: 'display:block;width:100%;height:auto' })
+        + open('defs', {})
+        + open('g', { id: 'dsh-jp-boat-art' })
+        + open('path', { d: 'M 6 24 Q 60 36 114 22 Q 106 36 62 40 Q 22 38 6 24 Z', fill: '#10222C' }) + '</path>'
+        + open('path', { d: 'M 38 24 C 44 10, 78 10, 88 23 Z', fill: '#0C1B24' }) + '</path>'
+        + open('path', { d: 'M 22 26 L 30 -4', stroke: '#0C1B24', 'stroke-width': '2', 'stroke-linecap': 'round', fill: 'none' }) + '</path>'
+        + open('circle', { cx: '14', cy: '21', r: '2.6', fill: '#F2C879' }) + '</circle>'
+        + open('circle', { cx: '14', cy: '21', r: '5.5', fill: '#F2C879', opacity: '0.25' }) + '</circle>'
+        + '</g>'
+        + '</defs>'
+        + open('use', { href: '#dsh-jp-boat-art' }) + '</use>'
+        + open('use', {
+          href: '#dsh-jp-boat-art',
+          transform: 'translate(0,90) scale(1,-1)',
+          style: 'opacity:.22;filter:blur(2.5px)',
+        }) + '</use>'
+        + '</svg>'
+    }
+
+    /**
+     * The 江畔冬云 scene: a pale winter moon, slow drifting clouds, fine snow, and a
+     * river band carrying a moonlight column, flowing ripples, twinkling wave
+     * glints, a drifting sampan with its reflection, and swaying bank reeds.
+     *
+     * Ported from `JiangPanDongYunAnimation.vue`. The source moon and clouds sit on
+     * a near-black sky; here they sit on the pastel one, so the moon keeps its
+     * source colours but leans on its halo to separate, and the night clouds keep
+     * their shape at a lighter opacity.
+     * @param snow - how many snowflakes to seed.
+     * @returns the scene markup.
+     */
+    function dongyunAmbientScene(snow) {
+      const count = Math.max(0, Math.min(30, snow ?? 8))
+      let snowNodes = ''
+      for (let n = 1; n <= count; n += 1) {
+        const size = 2 + ((n * 3) % 3)
+        snowNodes += open('div', {
+          class: 'jp-snowflake',
+          style: 'position:absolute;top:-0.5em;border-radius:50%;'
+            + `left:${((n * 29) % 88) + 5}%;width:${size}px;height:${size}px;`
+            + 'background:radial-gradient(circle,#FFFFFF 0%,rgba(255,255,255,.75) 100%);'
+            + 'box-shadow:0 0 4px rgba(255,255,255,.85);'
+            + `animation:dsh-amb-jp-snow ${9 + ((n * 7) % 8)}s linear infinite;`
+            + `animation-delay:${-(n * 1.9)}s`,
+        }) + '</div>'
+      }
+
+      const CLOUDS = [
+        ['1', '12em', '3.2em', '10%', '95s', '0s'],
+        ['2', '15em', '4em', '27%', '130s', '-40s'],
+        ['3', '10.5em', '2.8em', '44%', '110s', '-70s'],
+      ]
+      let cloudNodes = ''
+      for (const [key, width, height, top, duration, delay] of CLOUDS) {
+        cloudNodes += open('div', {
+          class: `jp-cloud jp-cloud-${key}`,
+          style: `position:absolute;border-radius:1000px;left:-16em;top:${top};width:${width};height:${height};z-index:3;`
+            + 'background:radial-gradient(ellipse,rgba(226,235,242,.85) 0%,rgba(190,206,220,.45) 60%,rgba(190,206,220,0) 100%);'
+            + 'filter:blur(10px);'
+            + `animation:dsh-amb-jp-cloud ${duration} linear infinite;animation-delay:${delay}`,
+        }) + '</div>'
+      }
+
+      const RIPPLES = [
+        ['1', '9em', '30%', '17s', '0s', '0.4'],
+        ['2', '7em', '55%', '23s', '-9s', '0.3'],
+        ['3', '10.5em', '78%', '14s', '-4s', '0.4'],
+      ]
+      let rippleNodes = ''
+      for (const [key, width, top, duration, delay, opacity] of RIPPLES) {
+        rippleNodes += open('div', {
+          class: `jp-ripple jp-ripple-${key}`,
+          style: `position:absolute;height:2px;border-radius:2px;left:-10em;top:${top};width:${width};opacity:${opacity};`
+            + 'background:linear-gradient(90deg,transparent 0%,rgba(210,232,240,.9) 30%,rgba(210,232,240,.5) 60%,transparent 100%);'
+            + `animation:dsh-amb-jp-ripple ${duration} linear infinite;animation-delay:${delay}`,
+        }) + '</div>'
+      }
+
+      let glintNodes = ''
+      for (let n = 1; n <= 5; n += 1) {
+        glintNodes += open('div', {
+          class: 'jp-glint',
+          style: 'position:absolute;width:3px;height:3px;border-radius:50%;'
+            + `left:${12 + ((n * 19) % 76)}%;top:${28 + ((n * 23) % 58)}%;`
+            + 'background:radial-gradient(circle,#EAF6FA 0%,rgba(234,246,250,.4) 100%);'
+            + 'box-shadow:0 0 6px rgba(220,240,250,.9);'
+            + 'animation:dsh-amb-jp-glint 2.6s ease-in-out infinite alternate;'
+            + `animation-delay:${-(n * 0.6)}s`,
+        }) + '</div>'
+      }
+
+      const REEDS = [
+        ['1', 'M 14 120 C 15 92, 17 62, 24 34', 'M 26 27', '4.6', '13', '9 26 27', '5.2s', '0s'],
+        ['2', 'M 34 120 C 36 96, 42 66, 54 42', 'M 57 35', '4.2', '12', '16 57 35', '6.1s', '-2.1s'],
+        ['3', 'M 56 120 C 56 100, 58 78, 62 56', 'M 63 49', '3.8', '11', '5 63 49', '4.6s', '-1.2s'],
+        ['4', 'M 76 120 C 80 100, 90 78, 102 58', 'M 105 51', '3.6', '10.5', '22 105 51', '5.8s', '-3s'],
+      ]
+      let reedNodes = ''
+      for (const [key, stem, head, rx, ry, rot, duration, delay] of REEDS) {
+        const [angle, cx, cy] = rot.split(' ')
+        reedNodes += open('g', {
+          class: `jp-reed jp-reed-${key}`,
+          style: `transform-box:fill-box;transform-origin:50% 100%;`
+            + `animation:dsh-amb-jp-sway ${duration} ease-in-out infinite;animation-delay:${delay}`,
+        })
+          + open('path', { d: stem, stroke: '#0E202A', 'stroke-width': '2.2', fill: 'none', 'stroke-linecap': 'round' }) + '</path>'
+          + open('ellipse', {
+            cx, cy, rx, ry, fill: '#12242F',
+            transform: `rotate(${angle} ${cx} ${cy})`,
+          }) + '</ellipse>'
+          + '</g>'
+      }
+
+      return open('div', { class: 'jp', style: 'position:absolute;inset:0;display:block' })
+        + open('div', {
+          class: 'jp-moon',
+          style: 'position:absolute;top:5%;right:9%;width:3em;height:3em;border-radius:50%;z-index:2;opacity:.95;'
+            + 'background:radial-gradient(circle at 38% 34%,#FDFAF2 0%,#E8E4D4 55%,#CBD2D8 100%);'
+            + 'box-shadow:0 0 1.4em 0.35em rgba(240,244,240,.5),0 0 3.5em 1em rgba(190,210,225,.4)',
+        }) + '</div>'
+        + cloudNodes
+        + snowNodes
+        + open('div', {
+          class: 'jp-river',
+          style: 'position:absolute;left:0;right:0;bottom:0;height:38%;z-index:7;'
+            + 'background:linear-gradient(to bottom,rgba(150,178,196,.4) 0%,rgba(110,142,164,.5) 100%);'
+            + 'box-shadow:inset 0 0.9em 1.1em -0.6em rgba(16,34,44,.5)',
+        })
+        + open('div', {
+          class: 'jp-waterline',
+          style: 'position:absolute;top:0;left:0;right:0;height:1.5px;opacity:.5;'
+            + 'background:linear-gradient(90deg,transparent 0%,rgba(214,234,242,.9) 35%,rgba(214,234,242,.35) 70%,transparent 100%)',
+        }) + '</div>'
+        + open('div', {
+          class: 'jp-moonlight',
+          style: 'position:absolute;top:4%;left:62%;width:3em;height:82%;border-radius:40%;filter:blur(5px);'
+            + 'background:linear-gradient(to bottom,rgba(226,240,246,.18) 0%,rgba(226,240,246,.06) 55%,transparent 100%)',
+        }) + '</div>'
+        + rippleNodes
+        + glintNodes
+        + '</div>'
+        + open('div', {
+          class: 'jp-boat',
+          style: 'position:absolute;bottom:22%;left:13%;width:7em;z-index:8;'
+            + 'animation:dsh-amb-jp-boat 46s ease-in-out infinite alternate',
+        })
+        + open('div', {
+          class: 'jp-boat-bob',
+          style: 'transform-origin:50% 100%;animation:dsh-amb-jp-bob 5.2s ease-in-out infinite',
+        })
+        + jpBoatMarkup()
+        + '</div></div>'
+        + open('div', {
+          class: 'jp-reeds',
+          style: 'position:absolute;bottom:0;left:0;width:9em;z-index:9',
+        })
+        + open('svg', { viewBox: '0 0 120 120', style: 'display:block;width:100%;height:auto' })
+        + reedNodes
+        + open('path', { d: 'M 2 120 C 20 118, 42 112, 62 103', stroke: '#0E202A', 'stroke-width': '2.4', fill: 'none', 'stroke-linecap': 'round' }) + '</path>'
+        + open('path', { d: 'M 6 120 C 28 118.5, 54 114, 82 108', stroke: '#0E202A', 'stroke-width': '2', fill: 'none', 'stroke-linecap': 'round', opacity: '0.85' }) + '</path>'
+        + open('path', { d: 'M 18 120 C 40 119, 64 116.5, 92 113', stroke: '#0E202A', 'stroke-width': '1.6', fill: 'none', 'stroke-linecap': 'round', opacity: '0.7' }) + '</path>'
+        + '</svg>'
+        + '</div>'
+        + '</div>'
+    }
+
+    /**
+     * One silhouette pine for 徐山军月, ported verbatim from
+     * `XuShanJunYueAnimation.vue`'s `<defs>` art: a tiered pine over a short trunk.
+     * @returns the pine group markup (a `<g>` for reuse inside one SVG).
+     */
+    function xsPineMarkup() {
+      return open('g', { id: 'dsh-xsj-pine-art' })
+        + open('path', {
+          d: 'M 12 120 L 12 112 L 5 112 L 12 100 L 3 100 L 10 88 L 4 88 L 12 74 L 20 88 L 14 88 L 21 100 L 12 100 L 19 112 L 12 112 Z',
+          fill: '#101A11',
+        }) + '</path>'
+        + open('rect', { x: '10.6', y: '112', width: '2.8', height: '8', fill: '#101A11' }) + '</rect>'
+        + '</g>'
+    }
+
+    /**
+     * The 徐山军月 scene: a starfield, a full moon veiled by slow night clouds, a
+     * periodic meteor, two dark mountain ridges, and a row of standing pines.
+     *
+     * Ported from `XuShanJunYueAnimation.vue`. The source stars and moon are pale
+     * cream on a near-black sky; on the pastel sidebar they would vanish, so they
+     * are warmed into the theme's brass family (the same retune the dream fish and
+     * the caiyun stars got), while the ridges and pines keep their verbatim dark
+     * silhouettes — dark on light reads as the classic ink shape.
+     * @param stars - how many stars to seed.
+     * @returns the scene markup.
+     */
+    function junyueAmbientScene(stars) {
+      const count = Math.max(0, Math.min(30, stars ?? 12))
+      let starNodes = ''
+      for (let n = 1; n <= count; n += 1) {
+        const size = 2 + ((n * 3) % 2)
+        starNodes += open('div', {
+          class: 'xs-star',
+          style: 'position:absolute;border-radius:50%;'
+            + `left:${((n * 37) % 84) + 6}%;top:${((n * 23) % 48) + 4}%;`
+            + `width:${size}px;height:${size}px;`
+            + 'background:radial-gradient(circle,#F5EFD2 0%,rgba(212,178,102,.55) 100%);'
+            + 'box-shadow:0 0 5px rgba(212,178,102,.75);'
+            + 'animation:dsh-amb-xs-star 2.4s ease-in-out infinite alternate;'
+            + `animation-delay:${-(n * 0.7)}s`,
+        }) + '</div>'
+      }
+
+      const CLOUDS = [
+        ['1', '10.5em', '1.6em', '12%', '90s', '0s'],
+        ['2', '8.5em', '1.25em', '26%', '120s', '-55s'],
+      ]
+      let cloudNodes = ''
+      for (const [key, width, height, top, duration, delay] of CLOUDS) {
+        cloudNodes += open('div', {
+          class: `xs-cloud xs-cloud-${key}`,
+          style: `position:absolute;border-radius:1000px;left:-12em;top:${top};width:${width};height:${height};z-index:3;`
+            + 'background:linear-gradient(90deg,rgba(24,32,25,0) 0%,rgba(24,32,25,.22) 30%,rgba(24,32,25,.22) 70%,rgba(24,32,25,0) 100%);'
+            + 'filter:blur(5px);'
+            + `animation:dsh-amb-xs-night ${duration} linear infinite;animation-delay:${delay}`,
+        }) + '</div>'
+      }
+
+      return open('div', { class: 'xs', style: 'position:absolute;inset:0;display:block' })
+        + starNodes
+        + open('div', {
+          class: 'xs-moon',
+          style: 'position:absolute;top:7%;right:11%;width:3.6em;height:3.6em;border-radius:50%;z-index:2;'
+            + 'background:radial-gradient(circle at 36% 32%,#FBF6E4 0%,#EFE7CB 58%,#D6CCA8 100%);'
+            + 'box-shadow:0 0 1.6em 0.5em rgba(245,239,217,.5),0 0 4em 1.4em rgba(212,178,102,.22)',
+        }) + '</div>'
+        + cloudNodes
+        + open('div', {
+          class: 'xs-meteor',
+          style: 'position:absolute;top:16%;left:66%;width:4.6em;height:2px;border-radius:2px;z-index:4;'
+            + 'background:linear-gradient(90deg,transparent,rgba(245,242,220,.95));'
+            + 'animation:dsh-amb-xs-meteor 9s ease-in infinite',
+        })
+        + open('span', {
+          style: 'position:absolute;right:-2px;top:-2.2px;width:5px;height:5px;border-radius:50%;'
+            + 'background:#FFFBEA;box-shadow:0 0 8px 2px rgba(255,251,234,.9)',
+        }) + '</span>'
+        + '</div>'
+        + open('div', {
+          class: 'xs-ridges',
+          style: 'position:absolute;left:0;right:0;bottom:0;height:46%;z-index:5',
+        })
+        + open('svg', { viewBox: '0 0 223 160', preserveAspectRatio: 'none', style: 'display:block;width:100%;height:100%' })
+        + open('defs', {})
+        + open('linearGradient', { id: 'dsh-xsj-ridge-back', x1: '0', y1: '0', x2: '0', y2: '1' })
+        + open('stop', { offset: '0', 'stop-color': '#31412F' }) + '</stop>'
+        + open('stop', { offset: '1', 'stop-color': '#273528' }) + '</stop>'
+        + '</linearGradient>'
+        + open('linearGradient', { id: 'dsh-xsj-ridge-front', x1: '0', y1: '0', x2: '0', y2: '1' })
+        + open('stop', { offset: '0', 'stop-color': '#1F2C1F' }) + '</stop>'
+        + open('stop', { offset: '1', 'stop-color': '#161F16' }) + '</stop>'
+        + '</linearGradient>'
+        + '</defs>'
+        + open('path', {
+          d: 'M 0 62 Q 28 30 58 52 Q 92 18 126 46 Q 158 24 188 50 Q 206 38 223 46 L 223 160 L 0 160 Z',
+          fill: 'url(#dsh-xsj-ridge-back)',
+        }) + '</path>'
+        + open('path', {
+          d: 'M 0 104 Q 34 72 68 94 Q 104 64 142 92 Q 176 74 223 100 L 223 160 L 0 160 Z',
+          fill: 'url(#dsh-xsj-ridge-front)',
+        }) + '</path>'
+        + '</svg>'
+        + '</div>'
+        + open('div', {
+          class: 'xs-pines',
+          style: 'position:absolute;bottom:0;left:3%;width:8.5em;z-index:6',
+        })
+        + open('svg', { viewBox: '0 0 140 120', style: 'display:block;width:100%;height:auto' })
+        + open('defs', {}) + xsPineMarkup() + '</defs>'
+        + open('use', { href: '#dsh-xsj-pine-art', transform: 'translate(-4,-8) scale(1.35)' }) + '</use>'
+        + open('use', { href: '#dsh-xsj-pine-art', transform: 'translate(34,2) scale(1.0)' }) + '</use>'
+        + open('use', { href: '#dsh-xsj-pine-art', transform: 'translate(66,-4) scale(1.18)' }) + '</use>'
+        + open('use', { href: '#dsh-xsj-pine-art', transform: 'translate(102,6) scale(0.88)' }) + '</use>'
+        + open('use', { href: '#dsh-xsj-pine-art', transform: 'translate(126,0) scale(1.05)' }) + '</use>'
+        + '</svg>'
+        + '</div>'
+        + '</div>'
+    }
+
+    /**
+     * The 佩安杰心 scene: misty hills behind, a zen enso circle with a seated
+     * meditator, an incense burner with two rising smoke threads, drifting dust
+     * motes, and the theme's own words.
+     *
+     * Ported from `PeiAnJieXinAnimation.vue`. The artwork paths are verbatim; the
+     * scene SVG's viewBox is cropped to the artwork (the source spans a full-height
+     * sidebar and places the group far down inside it), which keeps the same drawing
+     * coordinates while fitting the band.
+     * @param dust - how many dust motes to seed.
+     * @returns the scene markup.
      */
-    function dragonflyBlock(suffix, className, position, flight, delay) {
-      return open('div', {
-        class: `sta-dfly ${className}`,
-        style: `position:absolute;z-index:8;will-change:transform;${position};`
-          + `animation:${flight};animation-delay:${delay}`,
-      }) + open('div', {
-        class: 'sta-bob',
-        style: `animation:dsh-amb-bob ${suffix === '2' ? '1.1s' : '.9s'} ease-in-out infinite;`
-          + `animation-delay:${suffix === '2' ? '-.4s' : '0s'}`,
-      }) + dragonflyMarkup(suffix) + '</div></div>'
+    function jiexinAmbientScene(dust) {
+      const count = Math.max(0, Math.min(20, dust ?? 4))
+      let dustNodes = ''
+      for (let n = 1; n <= count; n += 1) {
+        const size = 2.5 + ((n * 5) % 4)
+        dustNodes += open('div', {
+          class: 'pj-dust',
+          style: 'position:absolute;border-radius:50%;'
+            + `left:${((n * 17) % 50) + 26}%;top:${((n * 13) % 30) + 28}%;`
+            + `width:${size}px;height:${size}px;`
+            + 'background:radial-gradient(circle,rgba(255,244,214,.95) 0%,rgba(255,244,214,0) 100%);'
+            + 'box-shadow:0 0 6px rgba(255,236,190,.8);'
+            + `animation:dsh-amb-pj-dust ${8 + ((n * 5) % 5)}s linear infinite;`
+            + `animation-delay:${-(n * 2)}s`,
+        }) + '</div>'
+      }
+
+      return open('div', { class: 'pj', style: 'position:absolute;inset:0;display:block' })
+        + open('div', {
+          class: 'pj-hills',
+          style: 'position:absolute;left:0;right:0;top:8%;height:24%;z-index:2;opacity:.62',
+        })
+        + open('svg', { viewBox: '0 0 223 80', preserveAspectRatio: 'none', style: 'display:block;width:100%;height:100%' })
+        + open('path', {
+          d: 'M 0 60 Q 34 22 70 46 Q 108 14 146 44 Q 186 20 223 48 L 223 80 L 0 80 Z',
+          fill: '#B49B78', opacity: '0.55',
+        }) + '</path>'
+        + open('path', {
+          d: 'M 0 72 Q 40 42 82 60 Q 126 34 168 58 Q 196 44 223 60 L 223 80 L 0 80 Z',
+          fill: '#A08A67', opacity: '0.6',
+        }) + '</path>'
+        + '</svg>'
+        + '</div>'
+        + open('div', {
+          class: 'pj-zenscene',
+          style: 'position:absolute;left:0;right:0;bottom:8%;height:62%;z-index:3',
+        })
+        + open('svg', {
+          viewBox: '0 480 200 175',
+          preserveAspectRatio: 'xMidYMax meet',
+          style: 'display:block;width:100%;height:100%',
+        })
+        + open('defs', {})
+        + open('radialGradient', { id: 'dsh-pjx-fig-grad', cx: '50%', cy: '32%', r: '80%' })
+        + open('stop', { offset: '0%', 'stop-color': '#6B5238', 'stop-opacity': '0.9' }) + '</stop>'
+        + open('stop', { offset: '60%', 'stop-color': '#57432C', 'stop-opacity': '0.85' }) + '</stop>'
+        + open('stop', { offset: '100%', 'stop-color': '#4A3823', 'stop-opacity': '0.8' }) + '</stop>'
+        + '</radialGradient>'
+        + open('filter', { id: 'dsh-pjx-haze', x: '-30%', y: '-30%', width: '160%', height: '160%' })
+        + open('feGaussianBlur', { stdDeviation: '1.8' }) + '</feGaussianBlur>'
+        + '</filter>'
+        + open('filter', { id: 'dsh-pjx-soft-glow', x: '-60%', y: '-60%', width: '220%', height: '220%' })
+        + open('feGaussianBlur', { stdDeviation: '7' }) + '</feGaussianBlur>'
+        + '</filter>'
+        + open('g', { id: 'dsh-pjx-enso-art' })
+        + open('circle', {
+          cx: '80', cy: '64', r: '56', fill: 'none', stroke: '#A87E4C', 'stroke-width': '5',
+          'stroke-linecap': 'round', 'stroke-dasharray': '316 36',
+          transform: 'rotate(-78 80 64)', opacity: '0.62',
+        }) + '</circle>'
+        + open('circle', {
+          cx: '80', cy: '64', r: '56', fill: 'none', stroke: '#D9B98C', 'stroke-width': '1.8',
+          'stroke-linecap': 'round', 'stroke-dasharray': '255 92',
+          transform: 'rotate(-60 80 64)', opacity: '0.5',
+        }) + '</circle>'
+        + '</g>'
+        + open('g', { id: 'dsh-pjx-meditator-art' })
+        + open('g', { filter: 'url(#dsh-pjx-soft-glow)', opacity: '0.35' })
+        + open('path', {
+          d: 'M 37 112 C 41 97, 58 90, 80 90 C 102 90, 119 97, 123 112 C 112 117.5, 96 119.5, 80 119.5 C 64 119.5, 48 117.5, 37 112 Z',
+          fill: '#6B5238',
+        }) + '</path>'
+        + open('circle', { cx: '80', cy: '33', r: '13.5', fill: '#6B5238' }) + '</circle>'
+        + open('path', {
+          d: 'M 64 52 C 60 68, 62 80, 67 93 C 75 97.5, 85 97.5, 93 93 C 98 80, 100 68, 96 52 C 91 44.5, 69 44.5, 64 52 Z',
+          fill: '#6B5238',
+        }) + '</path>'
+        + '</g>'
+        + open('ellipse', {
+          cx: '80', cy: '119', rx: '47', ry: '8.5', fill: '#8A6A46', opacity: '0.7',
+          filter: 'url(#dsh-pjx-haze)',
+        }) + '</ellipse>'
+        + open('g', { fill: 'url(#dsh-pjx-fig-grad)', filter: 'url(#dsh-pjx-haze)' })
+        + open('path', {
+          d: 'M 37 112 C 41 97, 58 90, 80 90 C 102 90, 119 97, 123 112 C 112 117.5, 96 119.5, 80 119.5 C 64 119.5, 48 117.5, 37 112 Z',
+        }) + '</path>'
+        + open('path', {
+          d: 'M 64 52 C 60 68, 62 80, 67 93 C 75 97.5, 85 97.5, 93 93 C 98 80, 100 68, 96 52 C 91 44.5, 69 44.5, 64 52 Z',
+        }) + '</path>'
+        + open('path', { d: 'M 64 54 C 55 62, 51 78, 53 93 C 56 99, 62 101, 67 99 C 62 85, 62 68, 67 56 Z' }) + '</path>'
+        + open('path', { d: 'M 96 54 C 105 62, 109 78, 107 93 C 104 99, 98 101, 93 99 C 98 85, 98 68, 93 56 Z' }) + '</path>'
+        + open('ellipse', { cx: '80', cy: '95', rx: '7', ry: '4.5' }) + '</ellipse>'
+        + open('circle', { cx: '80', cy: '33', r: '13.5' }) + '</circle>'
+        + '</g>'
+        + '</g>'
+        + '</defs>'
+        + open('g', { transform: 'translate(18, 492) scale(1.17)' })
+        + open('use', { href: '#dsh-pjx-enso-art' }) + '</use>'
+        + open('use', { href: '#dsh-pjx-meditator-art' }) + '</use>'
+        + '</g>'
+        + open('g', {})
+        + open('path', {
+          d: 'M 20 631 C 20 623, 25 619, 32 619 C 39 619, 44 623, 44 631 Z',
+          fill: '#6B5644', opacity: '0.8',
+        }) + '</path>'
+        + open('ellipse', { cx: '32', cy: '620', rx: '11.7', ry: '3', fill: '#55432F', opacity: '0.9' }) + '</ellipse>'
+        + open('path', { d: 'M 32 620 L 32 604', stroke: '#8A6E52', 'stroke-width': '1.9', 'stroke-linecap': 'round', fill: 'none' }) + '</path>'
+        + open('circle', { cx: '32', cy: '603.5', r: '1.9', fill: '#E8A05A' }) + '</circle>'
+        + open('circle', { cx: '32', cy: '603.5', r: '4', fill: '#E8A05A', opacity: '0.3' }) + '</circle>'
+        + open('path', {
+          class: 'pj-smoke pj-smoke-1',
+          d: 'M 32 601 C 28 593, 36 586, 32 577 C 28 568, 35 561, 31 551',
+          fill: 'none', stroke: '#FFFFFF', 'stroke-width': '2.4', 'stroke-linecap': 'round', opacity: '0.85',
+          style: 'stroke-dasharray:90;stroke-dashoffset:90;filter:blur(1.4px);'
+            + 'animation:dsh-amb-pj-smoke 7s linear infinite',
+        }) + '</path>'
+        + open('path', {
+          class: 'pj-smoke pj-smoke-2',
+          d: 'M 32 601 C 36 592, 28 584, 33 575 C 37 566, 30 558, 34 549',
+          fill: 'none', stroke: '#FFF6E8', 'stroke-width': '1.9', 'stroke-linecap': 'round', opacity: '0.6',
+          style: 'stroke-dasharray:90;stroke-dashoffset:90;filter:blur(1.6px);'
+            + 'animation:dsh-amb-pj-smoke 7s linear infinite;animation-delay:-3.5s',
+        }) + '</path>'
+        + '</g>'
+        + '</svg>'
+        + '</div>'
+        + dustNodes
+        + open('div', {
+          class: 'pj-words',
+          style: 'position:absolute;left:0;right:0;bottom:2%;text-align:center;z-index:7;'
+            + "font-family:'KaiTi','STKaiti','SimSun',serif;font-size:1.05em;line-height:1;"
+            + 'color:#6B5233;letter-spacing:.45em;text-shadow:0 1px 0 rgba(255,250,240,.6)',
+        })
+        + '自在<span style="color:#B08D5F;margin:0 2px"> · </span>安顿'
+        + '</div>'
+        + '</div>'
     }
 
     /**
-     * One seaweed blade. The sway is applied to the group so the blades move from their
-     * base, and each blade animates on its own phase.
-     * @param key - blade index.
-     * @param d - path data.
-     * @param gradient - gradient id.
-     * @param width - stroke width.
-     * @param opacity - blade opacity.
-     * @returns the blade markup.
+     * One falling phoenix feather for 光彩凤晨, ported from
+     * `GuangCaiFengChenAnimation.vue`: a full gradient vane over a gold rachis.
+     * Each feather carries its own gradient id, the same rule the dragonflies follow.
+     * @param key - unique id suffix for this feather's gradient.
+     * @returns the feather SVG.
      */
-    function bladeMarkup(key, d, gradient, width, opacity) {
-      const durations = { 1: '6s', 2: '7.4s', 3: '5.2s', 4: '8.1s', 5: '6.6s' }
-      const delays = { 1: '0s', 2: '-1.6s', 3: '-2.8s', 4: '-.9s', 5: '-3.4s' }
-      return open('g', {
-        class: `dof-blade dof-blade-${key}`,
-        style: `transform-origin:50% 100%;animation:dsh-amb-sway ${durations[key]} ease-in-out infinite alternate;`
-          + `animation-delay:${delays[key]}`,
-      }) + open('path', {
-        d, fill: `url(#${gradient})`, stroke: `url(#${gradient})`, 'stroke-width': width, opacity,
-      }) + '</path></g>'
-    }
-
-    function seaweedMarkup() {
-      const blade = bladeMarkup
-
+    function gcFeatherMarkup(key) {
+      const gradient = `dsh-gc-feather-${key}`
       return open('svg', {
-        viewBox: '0 0 140 120',
-        preserveAspectRatio: 'none',
-        style: 'display:block;width:100%;height:100%',
+        viewBox: '0 0 40 90',
+        style: 'display:block;width:100%;height:auto;overflow:visible;'
+          + 'filter:drop-shadow(0 0 5px rgba(255,214,0,.3))',
       })
         + open('defs', {})
-        + open('linearGradient', { id: 'dsh-dof-weed-a', x1: '0', y1: '1', x2: '0', y2: '0' })
-        + open('stop', { offset: '0', 'stop-color': '#1E6E93' }) + '</stop>'
-        + open('stop', { offset: '0.55', 'stop-color': '#3E93BC' }) + '</stop>'
-        + open('stop', { offset: '1', 'stop-color': '#A5DEF0', 'stop-opacity': '0.85' }) + '</stop>'
-        + '</linearGradient>'
-        + open('linearGradient', { id: 'dsh-dof-weed-b', x1: '0', y1: '1', x2: '0', y2: '0' })
-        + open('stop', { offset: '0', 'stop-color': '#2B7FA6' }) + '</stop>'
-        + open('stop', { offset: '0.6', 'stop-color': '#4FA3C6' }) + '</stop>'
-        + open('stop', { offset: '1', 'stop-color': '#B8E2F2', 'stop-opacity': '0.85' }) + '</stop>'
-        + '</linearGradient>'
-        + open('linearGradient', { id: 'dsh-dof-weed-c', x1: '0', y1: '1', x2: '0', y2: '0' })
-        + open('stop', { offset: '0', 'stop-color': '#4A78A8' }) + '</stop>'
-        + open('stop', { offset: '0.6', 'stop-color': '#7FA9CE' }) + '</stop>'
-        + open('stop', { offset: '1', 'stop-color': '#CBE2F4', 'stop-opacity': '0.8' }) + '</stop>'
+        + open('linearGradient', { id: gradient, x1: '0', y1: '0', x2: '0', y2: '1' })
+        + open('stop', { offset: '0%', 'stop-color': '#FFEB3B', 'stop-opacity': '0.9' }) + '</stop>'
+        + open('stop', { offset: '60%', 'stop-color': '#FF6F00', 'stop-opacity': '0.8' }) + '</stop>'
+        + open('stop', { offset: '100%', 'stop-color': '#D50000', 'stop-opacity': '0' }) + '</stop>'
         + '</linearGradient>'
         + '</defs>'
-        + blade('1', 'M 22 120 C 12 96, 26 74, 18 48 C 15 38, 18 28, 24 20 C 20 34, 24 44, 30 60 C 36 80, 30 100, 32 120 Z', 'dsh-dof-weed-a', '2.2', '0.95')
-        + blade('2', 'M 48 120 C 40 98, 54 80, 46 56 C 42 44, 48 34, 56 24 C 50 40, 56 52, 60 68 C 64 88, 56 104, 58 120 Z', 'dsh-dof-weed-b', '2', '0.92')
-        + blade('3', 'M 74 120 C 68 102, 78 88, 72 68 C 69 58, 72 48, 78 40 C 74 52, 78 62, 82 76 C 86 94, 80 108, 82 120 Z', 'dsh-dof-weed-c', '1.8', '0.88')
-        + blade('4', 'M 96 120 C 92 104, 102 90, 96 72 C 93 62, 96 54, 102 46 C 98 58, 102 68, 106 82 C 110 98, 102 110, 104 120 Z', 'dsh-dof-weed-a', '1.6', '0.85')
-        + blade('5', 'M 118 120 C 114 108, 122 96, 117 82 C 115 74, 117 68, 121 62 C 118 72, 121 80, 124 92 C 127 104, 121 112, 123 120 Z', 'dsh-dof-weed-b', '1.4', '0.8')
-        + open('ellipse', { cx: '30', cy: '119', rx: '14', ry: '4', fill: '#7FAFC6', opacity: '0.55' }) + '</ellipse>'
-        + open('ellipse', { cx: '72', cy: '120', rx: '10', ry: '3.4', fill: '#8FB9CE', opacity: '0.5' }) + '</ellipse>'
-        + open('ellipse', { cx: '108', cy: '119.5', rx: '12', ry: '3.6', fill: '#7FAFC6', opacity: '0.45' }) + '</ellipse>'
+        + open('path', { d: 'M 20 4 C 27 22, 27 50, 20 86 C 13 50, 13 22, 20 4 Z', fill: `url(#${gradient})` }) + '</path>'
+        + open('path', { d: 'M 20 8 L 20 82', stroke: '#FFE082', 'stroke-width': '1.2', 'stroke-linecap': 'round', opacity: '0.55', fill: 'none' }) + '</path>'
         + '</svg>'
     }
 
     /**
-     * One cartoon fish, swimming across the water.
+     * The 光彩凤晨 scene: sweeping dawn rays, falling phoenix feathers, a
+     * brush-stroke phoenix flying out and back (the flip happens while transparent,
+     * exactly as the source notes), and twinkling dew.
      *
-     * Ported from the source system's separate `FishAnimation.vue`. That component drives the
-     * fish from JavaScript through entering / bubbling / leaving phases on a 60-second cycle,
-     * but this skin is a static bundle with no component runtime to host a script — so the
-     * same artwork swims continuously instead, on a CSS `@keyframes` cross, with the tail and
-     * the whole body on separate animations so it reads as swimming rather than sliding.
-     *
-     * The artwork is reproduced shape for shape: the body curve, tail, dorsal fin, pectoral
-     * fin, and the three-part eye. The colours are retuned into the theme's blue family —
-     * the source values (`#38bdf8` body, `#1d4ed8` fins) sat outside the dream palette and
-     * read as a sticker, the same treatment shan's mountains got when their source greens
-     * were darkened for this sidebar.
-     * @param suffix - unique id suffix, so several fish can coexist.
-     * @param size - rendered width in em.
-     * @param top - vertical position within the water, as a percentage.
-     * @param duration - seconds for one crossing.
-     * @param delay - animation delay, so the fish do not move in lockstep.
-     * @param flip - whether this fish swims right-to-left instead.
-     * @returns the fish markup.
+     * Ported from `GuangCaiFengChenAnimation.vue`. The source's fill path references
+     * a gradient that file never defines, so the rendered phoenix is strokes only —
+     * this port keeps that rendered look with `fill="none"` instead of inventing a
+     * fill the source never showed. Stroke widths are the source's effective values
+     * (its `!important` class overrides baked in).
+     * @param feathers - how many feathers to seed.
+     * @param dew - how many dew drops to seed.
+     * @returns the scene markup.
      */
-    function fishMarkup(suffix, size, top, duration, delay, flip) {
-      const anim = flip ? 'dsh-amb-swim-back' : 'dsh-amb-swim'
-      return open('div', {
-        class: `dof-fish${flip ? ' dof-fish-flip' : ''}`,
-        style: 'position:absolute;left:0;opacity:.94;'
-          + `top:${top}%;width:${size}em;`
-          + `animation:${anim} ${duration}s linear infinite;animation-delay:${delay}s`,
+    function fengchenAmbientScene(feathers, dew) {
+      const featherCount = Math.max(0, Math.min(16, feathers ?? 6))
+      let featherNodes = ''
+      for (let n = 1; n <= featherCount; n += 1) {
+        featherNodes += open('div', {
+          class: 'gc-feather',
+          style: `position:absolute;top:-6em;left:${((n * 23) % 80) + 8}%;width:2.6em;opacity:0;`
+            + `animation:dsh-amb-gc-feather ${15 + ((n * 3) % 8)}s ease-in-out infinite;`
+            + `animation-delay:${-(n * 1.5)}s`,
+        })
+          + open('div', {
+            style: `transform:scale(${(0.5 + ((n * 7) % 6) / 10).toFixed(1)})`,
+          })
+          + gcFeatherMarkup(String(n))
+          + '</div></div>'
+      }
+
+      const dewCount = Math.max(0, Math.min(30, dew ?? 10))
+      let dewNodes = ''
+      for (let n = 1; n <= dewCount; n += 1) {
+        dewNodes += open('div', {
+          class: 'gc-dew',
+          style: 'position:absolute;width:3px;height:3px;border-radius:50%;opacity:.5;'
+            + `left:${((n * 37) % 84) + 6}%;top:${((n * 29) % 62) + 6}%;`
+            + 'background:radial-gradient(circle,#FFFFFF 0%,rgba(255,214,0,.8) 100%);'
+            + 'box-shadow:0 0 8px rgba(255,214,0,.8);'
+            + 'animation:dsh-amb-gc-dew 3s ease-in-out infinite alternate;'
+            + `animation-delay:${-(n * 0.2)}s`,
+        }) + '</div>'
+      }
+
+      const ray = (key, rotation, delay) => open('div', {
+        class: `gc-ray gc-ray-${key}`,
+        style: `position:absolute;top:26%;left:-30%;width:160%;height:46%;`
+          + `transform:rotate(${rotation}deg);opacity:.5;pointer-events:none`,
       })
         + open('div', {
-          class: 'dof-fish-bob',
-          style: `animation-duration:${(duration / 8).toFixed(2)}s`,
+          style: 'position:absolute;inset:0;'
+            + 'background:linear-gradient(45deg,transparent 0%,rgba(255,214,0,.12) 30%,rgba(255,111,0,.06) 60%,transparent 100%);'
+            + `animation:dsh-amb-gc-ray 8s ease-in-out infinite alternate;animation-delay:${delay}`,
+        }) + '</div>'
+        + '</div>'
+
+      return open('div', { class: 'gc', style: 'position:absolute;inset:0;display:block' })
+        + ray('1', '-18', '0s')
+        + ray('2', '-9', '-0.5s')
+        + ray('3', '0', '-1s')
+        + ray('4', '9', '-1.5s')
+        + ray('5', '18', '-2s')
+        + dewNodes
+        + featherNodes
+        + open('div', {
+          class: 'gc-phoenix',
+          style: 'position:absolute;top:14%;left:0;width:9.5em;z-index:8;will-change:transform;'
+            + 'animation:dsh-amb-gc-fly 28s linear infinite',
+        })
+        + open('div', {
+          class: 'gc-bob',
+          style: 'animation:dsh-amb-gc-bob 3.4s ease-in-out infinite',
         })
         + open('svg', {
-          viewBox: '0 0 50 18',
-          preserveAspectRatio: 'xMidYMid meet',
-          style: 'display:block;width:100%;height:auto;overflow:visible',
+          viewBox: '0 0 800 600',
+          style: 'display:block;width:100%;height:auto;overflow:visible;'
+            + 'filter:drop-shadow(0 0 18px rgba(255,214,0,.55))',
         })
-        + open('g', { class: 'dof-fish-body' })
-        // Body — recoloured into the theme's own blue family. The source values
-        // (`#38bdf8` body, `#1d4ed8` fins) sat outside the dream palette and read
-        // as a sticker pasted on the water; the same treatment shan's mountains
-        // got when their source greens were darkened for this sidebar.
+        + open('defs', {})
+        + open('linearGradient', { id: 'dsh-gc-phoenix-stroke', x1: '0', y1: '0', x2: '1', y2: '0' })
+        + open('stop', { offset: '0%', 'stop-color': '#FFEB3B' }) + '</stop>'
+        + open('stop', { offset: '40%', 'stop-color': '#FF9800' }) + '</stop>'
+        + open('stop', { offset: '100%', 'stop-color': '#D50000' }) + '</stop>'
+        + '</linearGradient>'
+        + open('filter', { id: 'dsh-gc-glow' })
+        + open('feGaussianBlur', { stdDeviation: '2', result: 'coloredBlur' }) + '</feGaussianBlur>'
+        + open('feMerge', {})
+        + open('feMergeNode', { in: 'coloredBlur' }) + '</feMergeNode>'
+        + open('feMergeNode', { in: 'SourceGraphic' }) + '</feMergeNode>'
+        + '</feMerge>'
+        + '</filter>'
+        + '</defs>'
+        + open('g', { filter: 'url(#dsh-gc-glow)', transform: 'translate(100, 100) scale(1.2)' })
         + open('path', {
-          d: 'M10 10 C20 5 35 5 45 10 C40 15 25 15 10 10 Z',
-          fill: '#5FA5D6', stroke: '#2B6E9E', 'stroke-width': '1',
+          d: 'M 380 50 C 360 40 350 60 360 90 C 350 120 380 140 320 180 C 280 220 350 280 200 350 C 150 380 100 360 50 400 C 140 300 220 220 320 180 C 360 140 380 90 380 50 Z',
+          fill: 'none',
         }) + '</path>'
-        // Tail
         + open('path', {
-          d: 'M10 10 L5 7 L5 13 Z',
-          fill: '#2B6E9E', stroke: '#2B6E9E', 'stroke-width': '1', class: 'dof-fish-tail',
+          class: 'gc-head',
+          d: 'M 380 50 Q 360 40 346 58 T 358 90 L 374 86',
+          stroke: 'url(#dsh-gc-phoenix-stroke)', 'stroke-width': '3.5', fill: 'none', 'stroke-linecap': 'round',
         }) + '</path>'
-        // Dorsal fin
         + open('path', {
-          d: 'M20 7 L25 3 L30 7',
-          fill: '#2B6E9E', stroke: '#2B6E9E', 'stroke-width': '1',
+          class: 'gc-crest',
+          d: 'M 360 50 Q 340 20 310 30',
+          stroke: 'url(#dsh-gc-phoenix-stroke)', 'stroke-width': '2.5', fill: 'none', 'stroke-linecap': 'round',
         }) + '</path>'
-        // Pectoral fin
         + open('path', {
-          d: 'M35 9 L40 12 L45 9',
-          fill: '#5FA5D6', stroke: '#2B6E9E', 'stroke-width': '1',
+          class: 'gc-crest',
+          d: 'M 365 55 Q 355 35 330 40',
+          stroke: 'url(#dsh-gc-phoenix-stroke)', 'stroke-width': '2.5', fill: 'none', 'stroke-linecap': 'round',
         }) + '</path>'
-        // Eye: white, pupil, highlight
-        + open('circle', { cx: '40', cy: '8', r: '2', fill: '#FFFFFF' }) + '</circle>'
-        + open('circle', { cx: '41', cy: '8', r: '1', fill: '#16384F' }) + '</circle>'
-        + open('circle', { cx: '40.5', cy: '7.5', r: '0.5', fill: '#FFFFFF' }) + '</circle>'
+        + open('path', {
+          class: 'gc-neck',
+          d: 'M 360 90 C 350 120, 380 140, 320 180',
+          stroke: 'url(#dsh-gc-phoenix-stroke)', 'stroke-width': '7', fill: 'none', 'stroke-linecap': 'round',
+        }) + '</path>'
+        + open('path', {
+          class: 'gc-wing gc-wing-main',
+          d: 'M 340 110 C 260 70, 200 40, 140 90',
+          stroke: 'url(#dsh-gc-phoenix-stroke)', 'stroke-width': '6', fill: 'none', 'stroke-linecap': 'round',
+          style: 'transform-box:fill-box;transform-origin:30% 40%;animation:dsh-amb-gc-wing 3.4s ease-in-out infinite',
+        }) + '</path>'
+        + open('path', {
+          d: 'M 300 100 C 250 80, 180 80, 140 120',
+          stroke: 'url(#dsh-gc-phoenix-stroke)', 'stroke-width': '3', fill: 'none', 'stroke-linecap': 'round',
+        }) + '</path>'
+        + open('path', {
+          d: 'M 280 110 C 240 100, 180 110, 150 140',
+          stroke: 'url(#dsh-gc-phoenix-stroke)', 'stroke-width': '2', fill: 'none', 'stroke-linecap': 'round',
+        }) + '</path>'
+        + open('path', {
+          class: 'gc-wing gc-wing-back',
+          d: 'M 360 100 C 400 78, 452 66, 490 92',
+          stroke: 'url(#dsh-gc-phoenix-stroke)', 'stroke-width': '4', fill: 'none', 'stroke-linecap': 'round',
+          style: 'transform-box:fill-box;transform-origin:30% 40%;animation:dsh-amb-gc-wing 3.4s ease-in-out infinite',
+        }) + '</path>'
+        + open('path', {
+          d: 'M 370 110 C 400 100, 430 95, 460 110',
+          stroke: 'url(#dsh-gc-phoenix-stroke)', 'stroke-width': '2', fill: 'none', 'stroke-linecap': 'round',
+        }) + '</path>'
+        + open('path', {
+          class: 'gc-tail-1',
+          d: 'M 320 180 C 280 220, 350 280, 200 350 C 150 380, 100 360, 50 400',
+          stroke: 'url(#dsh-gc-phoenix-stroke)', 'stroke-width': '5', fill: 'none', 'stroke-linecap': 'round',
+        }) + '</path>'
+        + open('path', {
+          class: 'gc-tail-2',
+          d: 'M 310 185 C 250 250, 200 280, 100 300',
+          stroke: 'url(#dsh-gc-phoenix-stroke)', 'stroke-width': '4', fill: 'none', 'stroke-linecap': 'round',
+        }) + '</path>'
+        + open('path', {
+          class: 'gc-tail-3',
+          d: 'M 330 175 C 300 220, 250 350, 150 420',
+          stroke: 'url(#dsh-gc-phoenix-stroke)', 'stroke-width': '3', fill: 'none', 'stroke-linecap': 'round',
+        }) + '</path>'
+        + open('circle', { cx: '365', cy: '70', r: '2.5', fill: '#FFE082' }) + '</circle>'
         + '</g>'
         + '</svg>'
         + '</div></div>'
+        + '</div>'
     }
 
     /**
@@ -1874,7 +3359,17 @@ window.__ModuleLoader__.load({
         ? shanAmbientScene(options?.petals)
         : kind === 'dream'
           ? dreamAmbientScene(options?.bubbles, options?.motes, options?.fish)
-          : ''
+          : kind === 'caiyun'
+            ? caiyunAmbientScene(options?.stars)
+            : kind === 'dongyun'
+              ? dongyunAmbientScene(options?.snow)
+              : kind === 'junyue'
+                ? junyueAmbientScene(options?.stars)
+                : kind === 'jiexin'
+                  ? jiexinAmbientScene(options?.dust)
+                  : kind === 'fengchen'
+                    ? fengchenAmbientScene(options?.feathers, options?.dew)
+                    : ''
       // The builder is fed only attributes and hex values, but this is the one place
       // markup from outside this file could ever arrive, so it refuses anyway.
       if (/<script|\son[a-z]+\s*=/i.test(markup)) {
@@ -2633,7 +4128,9 @@ window.__ModuleLoader__.load({
         // the two need different fixes.
         const scene = seat.firstElementChild
         const sceneRect = scene === null ? null : scene.getBoundingClientRect()
-        const art = seat.querySelector('.sta-mountains, .dof-seaweed')
+        const art = seat.querySelector(
+          '.sta-mountains, .dof-seaweed, .ym-sea-front, .jp-river, .xs-ridges, .pj-zenscene, .gc-phoenix',
+        )
         const artRect = art === null ? null : art.getBoundingClientRect()
         return {
           found: true,
@@ -2767,6 +4264,28 @@ window.__ModuleLoader__.load({
       return BUNDLED_THEMES.find((theme) => theme.id === id)
     }
 
+    /**
+     * Read one token out of a bundled skin, resolving the pair form to the skin's own scheme.
+     *
+     * The bundled skins store most tokens as `{ light, dark }` pairs even though a skin itself is
+     * single-scheme. `flatten` collapses them for `register`; this is the same read, exposed
+     * separately because the accent diagnostic needs ONE token's declared value without building
+     * the whole registrable definition — and because that diagnostic lives at factory scope, where
+     * `flatten` (declared inside `mountGallery`) is not reachable. Reaching for it from here is the
+     * exact scope error `tests/check-scope-reach.mjs` exists to catch.
+     * @param definition - a bundled skin.
+     * @param name - the token name.
+     * @returns the declared value, or undefined when the skin has no such token.
+     */
+    function declaredToken(definition, name) {
+      const raw = definition?.tokens?.[name]
+      if (raw === undefined) return undefined
+      // Deliberately not `raw?.[…]`: a skin whose token is neither a string nor a pair is a data
+      // error, and `flatten` (the other caller) must keep failing loudly on it rather than
+      // registering an unset variable that paints nothing.
+      return typeof raw === 'string' ? raw : raw[definition.colorScheme]
+    }
+
     /**
      * Disposer of the active accent layer, when one is stacked.
      *
@@ -2779,6 +4298,20 @@ window.__ModuleLoader__.load({
      */
     let accentLayerDispose
 
+    /**
+     * The accent colour {@link accentLayerDispose} was built from.
+     *
+     * Declared here for the same reason as the disposer above: `syncAccent` both reads and writes
+     * it, and it is called during mount, so a `let` initialised later in the body would be in its
+     * temporal dead zone at the first call.
+     *
+     * It exists so that re-stacking can be skipped when the colour has not moved. Without it every
+     * `theme/change` — including ones this plugin caused and ones caused by something else —
+     * disposed and re-created the layer, which emits again.
+     * @type {string|undefined}
+     */
+    let stackedAccent
+
     /**
      * The plugin context, published for the factory-level helpers.
      *
@@ -2827,15 +4360,46 @@ window.__ModuleLoader__.load({
       // `try` swallowed it, and the accent marker silently never appeared. The module-level `ctx`
       // below is assigned at mount and read here.
       if (ctx === undefined) return
-      if (accentLayerDispose !== undefined) {
-        accentLayerDispose()
-        accentLayerDispose = undefined
-      }
-      if (typeof accent !== 'string' || accent === '') return
-      accentLayerDispose = ctx.theme.overrideTokens('theme-gallery: accent', {
-        '--dsw-alias-button-ghost-active-fill': { light: `${accent}29`, dark: `${accent}29` },
-        '--dsw-alias-button-ghost-active-border': { light: accent, dark: accent },
-        '--dsw-alias-button-ghost-active-hover': { light: `${accent}47`, dark: `${accent}47` },
+      const wanted = typeof accent === 'string' && accent !== '' ? accent : undefined
+      // ── WHY BOTH A SKIP AND THE SELF-EMIT GUARD ARE NEEDED ───────────────────────────────────
+      //
+      // `overrideTokens` and the disposer it returns BOTH emit `theme/change`, and this function
+      // is reached from `publish()`, which is itself driven by that event:
+      //
+      //     publish → syncSkin → syncAccent → overrideTokens → theme/change → publish → …
+      //
+      // Every level nests inside the previous CALL, so nothing ever yields to the event loop. The
+      // stack therefore grows until the engine refuses to grow it further and throws
+      // `RangeError: Maximum call stack size exceeded` — and because every level has its own
+      // `try/catch` (see `syncSkin`), each one logs the SAME message on the way out. That is why
+      // the console showed a flood of "could not stack the accent layer" lines rather than one
+      // error: one flood, hundreds of identical lines, each from a different depth.
+      //
+      // Fixing it takes both halves, and they are not interchangeable:
+      //
+      //   • the SKIP stops the churn — an accent that has not moved does not need a new layer, so
+      //     an unrelated `theme/change` (the shell's `adopt()`, a streamed render, another plugin)
+      //     no longer replaces the layer and causes a repaint;
+      //   • the GUARD stops the RE-ENTRY — it is what makes the `theme/change` emitted by our own
+      //     write invisible to the subscription, so the cycle cannot close even when the colour
+      //     genuinely did change.
+      //
+      // Only the guard is a correctness requirement; the skip is what keeps the layer stable. The
+      // same shape is used by `stackSkinTokens` for the palette and by `syncReadingLayer`.
+      if (wanted === stackedAccent) return
+      emitting(() => {
+        if (accentLayerDispose !== undefined) {
+          accentLayerDispose()
+          accentLayerDispose = undefined
+        }
+        stackedAccent = undefined
+        if (wanted === undefined) return
+        accentLayerDispose = ctx.theme.overrideTokens('theme-gallery: accent', {
+          '--dsw-alias-button-ghost-active-fill': { light: `${wanted}29`, dark: `${wanted}29` },
+          '--dsw-alias-button-ghost-active-border': { light: wanted, dark: wanted },
+          '--dsw-alias-button-ghost-active-hover': { light: `${wanted}47`, dark: `${wanted}47` },
+        })
+        stackedAccent = wanted
       })
     }
 
@@ -2852,8 +4416,27 @@ window.__ModuleLoader__.load({
      *
      * The service makes this checkable without any guesswork: `composeActive` folds every
      * override layer into `snapshot.active.tokens` before publishing, so the composed value is
-     * readable straight off `getTheme()`. If the layer is registered, the token IS there; if it
-     * is not, the token is absent or still the built-in value.
+     * readable straight off `getTheme()`.
+     *
+     * ── WHAT CAN AND CANNOT PROVE IT ─────────────────────────────────────────
+     *
+     * The composed VALUE is the only channel that carries information, and only when it differs
+     * from what the skin declares for that same token:
+     *
+     *  • both bundled skins already ship `button-ghost-active-*` in their own palettes, AND the
+     *    palette layer supplies them too — so the token COUNT is 67 either way. An earlier
+     *    comment here claimed a count that "does not move" disproves the layer; for these skins
+     *    it cannot move, so the claim was wrong and the count is reported for context only;
+     *  • 梦海游鱼 declares `#2B74B5` for that token but its accent is `#FFD166`, so reading back
+     *    `#FFD166` proves the accent layer composed OVER the palette — the palette alone cannot
+     *    produce it;
+     *  • 山青婷彩's accent is `#E88BB0` and it declares `#E88BB0` for the same token, so its
+     *    reading is identical whether or not the layer is there. That is a property of the SKIN,
+     *    not of the layer, and the verdict below says so instead of implying the reading proved
+     *    something.
+     *
+     * The verdict is therefore computed, never asserted: it compares the composed value with the
+     * skin's declared value and with the accent the layer was built from.
      * @returns the reading, as one segment of the panel line.
      */
     function describeAccentLayer() {
@@ -2864,16 +4447,31 @@ window.__ModuleLoader__.load({
         const active = snapshot?.active
         const tokens = active?.tokens ?? {}
         const TOKEN = '--dsw-alias-button-ghost-active-border'
-        const value = tokens[TOKEN]
+        const composed = tokens[TOKEN]
+        const definition = typeof active?.id === 'string' ? bundledTheme(active.id) : undefined
+        const declared = declaredToken(definition, TOKEN)
+        const accent = definition?.accent
         const layers = snapshot?.overrides === undefined
           ? '(服务未暴露)'
           : String(snapshot.overrides.size ?? snapshot.overrides.length ?? '?')
-        // Its OWN key count too: layers folding into `active.tokens` is the mechanism, so a
-        // token count that does not move when the layer is stacked also disproves it.
+        // Computed, not assumed — see the note above. `不可分辨` is a real answer: it says this
+        // skin's own value coincides with its accent, so this reading proves nothing either way.
+        const verdict = accent === undefined
+          ? '非本包皮肤(无法判断)'
+          : accent === declared
+            ? '不可分辨(强调色=皮肤自备值)'
+            : composed === accent
+              ? '生效(强调色压过自备值)'
+              : composed === declared
+                ? '未生效(仍是自备值)'
+                : `未知(既非强调色也非自备值)`
         return `激活层[id=${active?.id ?? '?'}`
           + ` 层数=${layers}`
-          + ` token数=${Object.keys(tokens).length}`
-          + ` ${TOKEN.replace('--dsw-alias-', '')}=${value === undefined ? '(缺失)' : String(value)}]`
+          + ` token数=${Object.keys(tokens).length}(自备同名令牌，不构成判据)`
+          + ` ${TOKEN.replace('--dsw-alias-', '')}=${composed === undefined ? '(缺失)' : String(composed)}`
+          + ` 自备=${declared === undefined ? '(无)' : String(declared)}`
+          + ` 强调色=${accent ?? '(无)'}`
+          + ` 判据=${verdict}]`
       } catch (error) {
         return `激活层[读取失败: ${String(error && error.message ? error.message : error)}]`
       }
@@ -2922,18 +4520,11 @@ window.__ModuleLoader__.load({
               jsx('span', { className: 'tg-title', children: t('title') }),
               jsx('span', { className: 'tg-hint', children: t('hint') }),
               jsx('span', { className: 'tg-hint', children: t('count', { count: ids.length }) }),
+              // What this copy is, so a reader can compare it with the version npm
+              // publishes without digging through the profile.
+              jsx('span', { className: 'tg-hint', children: `v${BUNDLED_VERSION}` }),
             ],
           }),
-          debugEnabled() ? jsx('div', { className: 'tg-debug', children: themeDiagnostics(selected) }) : null,
-          // Routine reports wait for the debug switch; warnings and errors print
-          // regardless — when the active skin's decorations are missing, the reason
-          // has to reach the person looking at the panel.
-          showScenery
-            ? jsx('div', {
-              className: `tg-debug${ambientWarning(selected) === null ? '' : ' tg-warn'}`,
-              children: scenery,
-            })
-            : null,
           jsx('div', {
             className: 'tg-grid',
             children: ids.map((id) => jsx(ThemeCard, {
@@ -2947,6 +4538,31 @@ window.__ModuleLoader__.load({
               t,
             }, id)),
           }),
+          // ── the diagnostics go BELOW the cards, set apart, behind a caption ──────
+          //
+          // They used to sit between the header and the picker, where a wall of monospace
+          // text buried the thing the panel exists for. Below the cards they read as a
+          // reference block — and the caption is what keeps them from being mistaken for a
+          // malfunction, which is exactly how a user read them. They stay CONDITIONAL:
+          // detail waits for the debug switch, while a warning or a failure always prints.
+          (debugEnabled() || showScenery)
+            ? jsxs('div', {
+              className: 'tg-diag',
+              children: [
+                jsx('div', { className: 'tg-diag-note', children: t('diagNote') }),
+                debugEnabled() ? jsx('div', { className: 'tg-debug', children: themeDiagnostics(selected) }) : null,
+                // Routine reports wait for the debug switch; warnings and errors print
+                // regardless — when the active skin's decorations are missing, the reason
+                // has to reach the person looking at the panel.
+                showScenery
+                  ? jsx('div', {
+                    className: `tg-debug${ambientWarning(selected) === null ? '' : ' tg-warn'}`,
+                    children: scenery,
+                  })
+                  : null,
+              ],
+            })
+            : null,
         ],
       })
     }
@@ -3725,8 +5341,10 @@ window.__ModuleLoader__.load({
        */
       function flatten(definition) {
         const tokens = {}
-        for (const [name, value] of Object.entries(definition.tokens ?? {})) {
-          tokens[name] = typeof value === 'string' ? value : value[definition.colorScheme]
+        for (const name of Object.keys(definition.tokens ?? {})) {
+          // Delegated so the pair rule has exactly ONE implementation — the accent diagnostic reads
+          // a single token through the same helper, and two copies of this rule would drift.
+          tokens[name] = declaredToken(definition, name)
         }
         return { ...definition, tokens }
       }
@@ -4101,6 +5719,17 @@ window.__ModuleLoader__.load({
       let readingTag
       /** Disposer of the active reading token layer, when one is stacked. */
       let readingLayerDispose
+      /**
+       * The lightened ground {@link readingLayerDispose} was built from.
+       *
+       * Same role as `stackedAccent`: `syncReadingLayer` writes to the theme service, and it is
+       * scheduled from a `MutationObserver` on `document.body` — so without this, every batch of
+       * DOM mutations would replace the layer, which emits `theme/change`, which repaints the
+       * shell, which mutates the DOM again. That is a loop through the microtask queue rather than
+       * through the stack, so it would burn CPU steadily instead of throwing.
+       * @type {string|undefined}
+       */
+      let stackedReading
 
       /**
        * Install the reading rule, once per plugin lifetime.
@@ -4199,25 +5828,41 @@ window.__ModuleLoader__.load({
        * `overrideTokens(source, tokens)` folds a `{ light, dark }`-shaped layer
        * over the ACTIVE theme, so the lightening follows whichever skin and
        * palette is in play and disappears cleanly when the transcript empties.
-       * The source string is the layer's identity: re-calling it with the same
-       * source replaces the layer, which is what makes this idempotent.
+       *
+       * The source string is the layer's identity, so re-stacking the same source
+       * REPLACES the layer instead of adding a second one. Replacement alone is not
+       * idempotence: the call still emits `theme/change`, so it is the skip below
+       * (`wanted === stackedReading`) that keeps an unchanged document from churning
+       * the layer on every mutation batch.
        */
       function syncReadingLayer() {
         if (typeof document === 'undefined') return
         const reading = document.body !== null && document.body.hasAttribute(READING_ATTRIBUTE)
-        if (!reading) {
+        // Computed before the skip test, because the skip compares VALUES. `lighten` is pure, so
+        // the same document state always yields the same pair and the comparison is exact.
+        const wanted = reading ? lighten(READING.bg, READING.alpha) : undefined
+        const wantedDark = reading
+          // Lightened ground for both palettes: a light theme wants a softer wash, a dark one a
+          // slightly raised surface. Both keep the theme's hue.
+          ? lighten(READING.bg, Math.max(0, READING.alpha - 0.2))
+          : undefined
+
+        // Both writes below emit `theme/change`, and this function is reached from a
+        // `MutationObserver` on `document.body` — the same tree the shell repaints when the theme
+        // changes. See the comment in `syncAccent` for the full shape; the short version is that
+        // an unguarded write here lets the layer drive its own trigger.
+        if (wanted === stackedReading) return
+        emitting(() => {
           if (readingLayerDispose !== undefined) {
             readingLayerDispose()
             readingLayerDispose = undefined
           }
-          return
-        }
-        // Lightened ground for both palettes: a light theme wants a softer wash,
-        // a dark one a slightly raised surface. Both keep the theme's hue.
-        const lightened = lighten(READING.bg, READING.alpha)
-        const darkLightened = lighten(READING.bg, Math.max(0, READING.alpha - 0.2))
-        readingLayerDispose = ctx.theme.overrideTokens('theme-gallery: reading', {
-          '--dsw-alias-bg-base': { light: lightened, dark: darkLightened },
+          stackedReading = undefined
+          if (wanted === undefined) return
+          readingLayerDispose = ctx.theme.overrideTokens('theme-gallery: reading', {
+            '--dsw-alias-bg-base': { light: wanted, dark: wantedDark },
+          })
+          stackedReading = wanted
         })
       }
 
@@ -4246,10 +5891,17 @@ window.__ModuleLoader__.load({
           observer.disconnect()
           if (readingTag !== undefined) readingTag.remove()
           readingTag = undefined
-          if (readingLayerDispose !== undefined) {
-            readingLayerDispose()
-            readingLayerDispose = undefined
-          }
+          // Guarded for the same reason as the writes in `syncReadingLayer`, and the remembered
+          // value is cleared with the layer: leaving it set would make that function's skip test
+          // believe a layer is still stacked after this one removed it, and it would then refuse
+          // to re-stack.
+          emitting(() => {
+            if (readingLayerDispose !== undefined) {
+              readingLayerDispose()
+              readingLayerDispose = undefined
+            }
+            stackedReading = undefined
+          })
           document.body.removeAttribute(READING_ATTRIBUTE)
           const centre = centreColumn()
           if (centre !== null) centre.style.removeProperty('--dsh-reading-width')