dsh-deepseek-style-theme 1.43.10 → 1.43.12

package/lib/client.js

@@ -1,6 +1,22 @@
+// The loader requires this bundle to register itself under the id the host asked
+// for, and that id is the package NAME of whichever copy is installed -- which is
+// not one value during a rename. The package moved from
+// @dsh-external/dsh-deepseek-style-theme to the unscoped dsh-deepseek-style-theme
+// in 1.43.1, so a profile installed before the rename asks for the old id and one
+// installed after asks for the new one. A single hard-coded literal therefore
+// breaks whichever half it does not match, and BOTH directions were hit for real,
+// one machine each:
+//
+//   literal old, install new -> "loaded without registering \"dsh-deepseek-style-theme\""
+//   literal new, install old -> "loaded without registering \"@dsh-external/...\""
+//
+// So register under BOTH ids with the same factory: the loader finds the one it
+// wants and the other entry is simply never asked for. The registrations are
+// guarded individually because a loader might reject an id it did not request,
+// and that must not take the working one down with it.
 const dshDeepseekStyleThemeFactory = (require) => {
-		var module = { exports: {} };
-		var exports = module.exports;
+	var module = { exports: {} };
+	var exports = module.exports;
 		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 		const React = require("react");
 
@@ -26,6 +42,952 @@ const dshDeepseekStyleThemeFactory = (require) => {
 		// interpolated value there would be DOM XSS.
 		const PLUGIN_ID = "dsh-deepseek-style-theme";
 
+		// ─── fluid background + liquid-glass refraction ───────────────────────
+		// Ported from dsh-theme-mineradio v2.3.8 (MIT, Copyright (c) 2026 John Wu).
+		// See the licence header on the block below; the notice must be preserved.
+		// ─────────────────────────────────────────────────────────────────────────────
+		// deepseek-style-theme — fluid shader + glass dispersion port
+		//
+		// The fluid shader (GLSL programs, the WebGL2 ping-pong fluid solver, the
+		// pointer/click interaction feeds) and the glass chromatic-dispersion filter
+		// plus the specular-highlight cursor parallax below are ported from
+		// `dsh-theme-mineradio` v2.3.8 — MIT, Copyright (c) 2026 John Wu.
+		// The upstream MIT licence notice MUST be preserved wherever this code ships.
+		//
+		// Only naming and external dependencies were adapted; the three GLSL shader
+		// sources (VERTEX_SHADER / FLOW_SHADER / DISPLAY_SHADER) are byte-for-byte
+		// copies of upstream, including `#version 300 es`, every precision qualifier
+		// and every in-shader comment.
+		//
+		// External dependencies found in the upstream module and what was done:
+		//
+		//   INLINED VERBATIM (they sit outside the ported ranges upstream and are
+		//   small pure helpers the ported code cannot run without):
+		//     • `uv(canvas, clientX, clientY)`          — upstream fluid-interactions.ts
+		//                                                 line 916, used by
+		//                                                 attachFluidInteractions.
+		//     • `hslToRgb01(h, s, l)`                    — upstream glass-dispersion.ts
+		//                                                 line 2409, used by tintMatrix.
+		//     • `filterMarkup(id, refractId, tintId, map)` — upstream glass-dispersion.ts
+		//                                                 line 2443, used by
+		//                                                 startGlassDispersion to build
+		//                                                 the SVG <filter> pair.
+		//     • `closestSpot(target)`, `visualRect(spot)`,
+		//       `inside(visual, clientX, clientY)`        — upstream spot-core.ts
+		//                                                 lines 1711-1732, used by
+		//                                                 startSpecularParallax.
+		//
+		//   CONSTANTS TAKEN FROM ADJACENT UPSTREAM DECLARATIONS (needed to make the
+		//   requested subset self-contained; upstream declares them beside it):
+		//     • TINT_ID / REFRACT_ID / TALL_FILTER_ID / TALL_TINT_ID /
+		//       TALL_REFRACT_ID / DEFAULT_REF_SCALE / EDGE_DX / TINT_SAT / TINT_LIGHT
+		//       — values unchanged, only FILTER_ID's value renamed.
+		//     • SPOT_ATTR / SPOT_SELECTOR (upstream spot-core.ts lines 1707-1710)
+		//       — renamed to the `dshome-` prefix.
+		//
+		//   RENAMED (no longer refers to the upstream plugin):
+		//     • FILTER_ID            "mineradio-glass-dispersion" → "dshome-glass-dispersion"
+		//     • every other SVG filter/tint/refract id → "dshome-glass-dispersion-*"
+		//     • ATTR                 "data-dsh-dispersion"        → "data-dshome-dispersion"
+		//     • SPOT_ATTR            "data-dsh-aqua-spot"         → "data-dshome-spot"
+		//     • SPEC_X / SPEC_Y      --dsh-aqua-spec-x/y          → --dshome-spec-x/y
+		//     • console tags         "ui-aqua fluid shader" / "ui-aqua fluid link" →
+		//                            "deepseek-style-theme fluid shader" /
+		//                            "deepseek-style-theme fluid link"
+		//
+		//   DELIBERATELY NOT PORTED (upstream settings/theme-store/React layer). Each
+		//   was replaced by a parameter or a local default:
+		//     • `this.settings.dispersionHue` (dispersionTintHue()) — upstream read the
+		//       user's hue knob and an extracted-wallpaper hue. REPLACED by the `hue`
+		//       argument of startGlassDispersion({ hue }), defaulting to the upstream
+		//       default DEFAULT_TINT_HUE = 44. The caller owns the hue source.
+		//     • `this.settings.dispersionRefract` — upstream called
+		//       handle.setRefraction(n) on every settings change. The caller now calls
+		//       the returned handle's setRefraction(n) itself.
+		//     • `this.settings.fluidHue` / `fluidDepth` / `rainbow` / `stationOffset`
+		//       and the helper `fluidToneColors()` (upstream line 125) plus
+		//       `HUE_BASE` — NONE of these are ported. attachFluidShader takes a
+		//       complete params object; SITE_FLUID_PARAMS is exported as the upstream
+		//       default (its own three palette colours), so the caller supplies its
+		//       own palette by spreading SITE_FLUID_PARAMS and overriding color1..3.
+		//     • `this.settings.audioReact` / the mic analyser (createAudioReactivity)
+		//       — not ported. The audio coupling survives as the ported handle method
+		//       `setAudioLow(level)`; the caller feeds it, or ignores it.
+		//     • upstream's React component and the `[data-dsh-aqua-fluid-canvas]` /
+		//       `[data-dsh-aqua-ambient]` mount lookups — the caller passes the canvas
+		//       element and the { main, mainCanvas } handle explicitly.
+		//
+		// DOM hooks the ported code still reads (product/platform markup, intentionally
+		// NOT renamed): `[data-composer-card]` and `[data-dsh-stats]` inside
+		// visualRect(), and the `button` closest-match in attachFluidInteractions.
+		//
+		// Indentation note: this fragment is tab-indented at a base of 2 tabs to match
+		// the target factory body. Line indentation INSIDE the three GLSL template
+		// literals is string data and was left exactly as upstream, per the verbatim
+		// requirement; tab-indenting those lines would have altered the shipped shader
+		// text.
+		// ─────────────────────────────────────────────────────────────────────────────
+
+		var SITE_FLUID_PARAMS = {
+			mouseRadius: 0.22,
+			mouseStrength: 1.1,
+			decay: 0.96,
+			distortBoost: 1.35,
+			noiseBoost: 0,
+			swirlBoost: 0.45,
+			speed: 14,
+			distortion: 20,
+			swirl: 12,
+			swirlIterations: 8,
+			scale: 0.5,
+			rotation: -5,
+			proportion: 50,
+			softness: 100,
+			shapeScale: 10,
+			offsetX: 0,
+			offsetY: 65,
+			color1: "#8AA3D6",
+			color2: "#FFFFFF",
+			color3: "#FFFFFF"
+		};
+		var VERTEX_SHADER = `#version 300 es
+in vec4 a_position;
+out vec2 vUv;
+void main() {
+  vUv = a_position.xy * 0.5 + 0.5;
+  gl_Position = a_position;
+}
+`;
+		var FLOW_SHADER = `#version 300 es
+precision mediump float;
+in vec2 vUv;
+uniform sampler2D u_prev;
+uniform vec2 u_mouse;
+uniform vec2 u_velocity;
+uniform float u_brushRadius;
+uniform float u_brushStrength;
+uniform float u_decay;
+out vec4 fragColor;
+
+void main() {
+  vec4 prev = texture(u_prev, vUv);
+
+  prev.r *= u_decay;
+  prev.gb = mix(vec2(0.5), prev.gb, u_decay);
+
+  float dist = distance(vUv, u_mouse);
+
+  float influence = exp(-dist * dist / (u_brushRadius * u_brushRadius * 0.5));
+  influence = max(0.0, influence - 0.01);
+
+  float speed = length(u_velocity);
+  float presenceStrength = u_brushStrength * 0.3;
+  float velBonus = min(speed * 3.0, 0.7) * u_brushStrength;
+  float totalStrength = presenceStrength + velBonus;
+
+  prev.r = max(prev.r, influence * totalStrength);
+  float blendAmt = influence * min(totalStrength, 0.4) * 0.3;
+  prev.g = mix(prev.g, clamp(u_velocity.x * 2.0 + 0.5, 0.0, 1.0), blendAmt);
+  prev.b = mix(prev.b, clamp(u_velocity.y * 2.0 + 0.5, 0.0, 1.0), blendAmt);
+
+  fragColor = prev;
+}
+`;
+		var DISPLAY_SHADER = `#version 300 es
+precision mediump float;
+in vec2 vUv;
+uniform float u_time;
+uniform float u_pixelRatio;
+uniform vec2 u_resolution;
+uniform float u_scale;
+uniform float u_rotation;
+uniform vec4 u_color1, u_color2, u_color3;
+uniform float u_colorCount;
+uniform float u_proportion;
+uniform float u_softness;
+uniform float u_shape;
+uniform float u_shapeScale;
+uniform float u_distortion;
+uniform float u_swirl;
+uniform float u_swirlIterations;
+uniform vec2 u_offset;
+uniform sampler2D u_flowmap;
+uniform float u_distortBoost;
+uniform float u_noiseBoost;
+uniform float u_swirlBoost;
+out vec4 fragColor;
+
+#define TWO_PI 6.28318530718
+#define PI 3.14159265358979323846
+
+vec2 rotate(vec2 uv, float th) { return mat2(cos(th), sin(th), -sin(th), cos(th)) * uv; }
+float random(vec2 st) { return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123); }
+float noise(vec2 st) {
+  vec2 i = floor(st); vec2 f = fract(st);
+  float a = random(i), b = random(i + vec2(1,0)), c = random(i + vec2(0,1)), d = random(i + vec2(1,1));
+  vec2 u = f*f*(3.0-2.0*f);
+  return mix(mix(a,b,u.x), mix(c,d,u.x), u.y);
+}
+
+vec3 blend_multi(float mixer, float softness) {
+  float edge = 1.0 - softness;
+  vec3 col = u_color1.rgb;
+  if (u_colorCount > 1.5) { col = mix(col, u_color2.rgb, smoothstep(0.0 + 0.35*edge, 0.7 - 0.35*edge, mixer)); }
+  if (u_colorCount > 2.5) { col = mix(col, u_color3.rgb, smoothstep(0.3 + 0.35*edge, 1.0 - 0.35*edge, mixer)); }
+  return col;
+}
+
+void main() {
+  vec2 uv = gl_FragCoord.xy / u_resolution.xy;
+  float t = .5 * u_time;
+  float ns = .0005 + .006 * u_scale;
+  uv -= .5; uv *= (ns * u_resolution); uv = rotate(uv, u_rotation * .5 * PI);
+  uv /= u_pixelRatio; uv += .5; uv += u_offset;
+
+  vec2 fragUV = gl_FragCoord.xy / u_resolution.xy;
+  vec4 flow = texture(u_flowmap, fragUV);
+  float influence = flow.r;
+  vec2 flowDir = (flow.gb - 0.5) * 2.0;
+
+  float n1 = noise(uv + t), n2 = noise(uv*2. - t);
+  float angle = n1 * TWO_PI;
+
+  float totalDistortion = u_distortion + influence * u_distortBoost;
+  uv.x += 4. * totalDistortion * n2 * cos(angle);
+  uv.y += 4. * totalDistortion * n2 * sin(angle);
+
+  uv += flowDir * influence * 0.15;
+
+  if (influence > 0.001) {
+    float localNoise = noise(uv * 2.0 + t * 1.5);
+    uv += influence * u_noiseBoost * vec2(cos(localNoise * TWO_PI), sin(localNoise * TWO_PI));
+  }
+
+  float iters = ceil(clamp(u_swirlIterations, 1., 30.));
+  float swirlAmt = clamp(u_swirl, 0., 2.) + influence * u_swirlBoost;
+  for (float i = 1.; i <= 30.0; i++) {
+    if (i > iters) break;
+    uv.x += swirlAmt / i * cos(t + i*1.5*uv.y);
+    uv.y += swirlAmt / i * cos(t + i*1.*uv.x);
+  }
+
+  float proportion = clamp(u_proportion, 0., 1.);
+  vec2 cuv = uv * (.5 + 3.5 * u_shapeScale);
+  float shape = .5 + .5 * sin(cuv.x) * cos(cuv.y);
+  float mixer = shape + .48 * sign(proportion - .5) * pow(abs(proportion - .5), .5);
+  vec3 col = blend_multi(mixer, clamp(u_softness, 0., 1.));
+  fragColor = vec4(col, 1.0);
+}
+`;
+		function hexToRgb(value) {
+			const hex = value.replace("#", "");
+			return [
+				parseInt(hex.slice(0, 2), 16) / 255,
+				parseInt(hex.slice(2, 4), 16) / 255,
+				parseInt(hex.slice(4, 6), 16) / 255
+			];
+		}
+		function attachFluidShader(canvas, params) {
+			const gl = canvas.getContext("webgl2", {
+				alpha: true,
+				premultipliedAlpha: false,
+				powerPreference: "low-power"
+			});
+			if (gl === null) {
+				return {
+					setParams: () => {
+					},
+					stir: () => {
+					},
+					setAudioLow: () => {
+					},
+					setRunning: () => {
+					},
+					dispose: () => {
+					}
+				};
+			}
+			const compile = (type, source) => {
+				const shader = gl.createShader(type);
+				if (shader === null) return null;
+				gl.shaderSource(shader, source);
+				gl.compileShader(shader);
+				if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+					console.error("deepseek-style-theme fluid shader:", gl.getShaderInfoLog(shader));
+					return null;
+				}
+				return shader;
+			};
+			const link = (fragment) => {
+				const vertex = compile(gl.VERTEX_SHADER, VERTEX_SHADER);
+				const frag = compile(gl.FRAGMENT_SHADER, fragment);
+				if (vertex === null || frag === null) return null;
+				const program = gl.createProgram();
+				if (program === null) return null;
+				gl.attachShader(program, vertex);
+				gl.attachShader(program, frag);
+				gl.linkProgram(program);
+				if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+					console.error("deepseek-style-theme fluid link:", gl.getProgramInfoLog(program));
+					return null;
+				}
+				return program;
+			};
+			const flowProgram = link(FLOW_SHADER);
+			const displayProgram = link(DISPLAY_SHADER);
+			if (flowProgram === null || displayProgram === null) {
+				return {
+					setParams: () => {
+					},
+					stir: () => {
+					},
+					setAudioLow: () => {
+					},
+					setRunning: () => {
+					},
+					dispose: () => {
+					}
+				};
+			}
+			const flow = {
+				prev: gl.getUniformLocation(flowProgram, "u_prev"),
+				mouse: gl.getUniformLocation(flowProgram, "u_mouse"),
+				velocity: gl.getUniformLocation(flowProgram, "u_velocity"),
+				brushRadius: gl.getUniformLocation(flowProgram, "u_brushRadius"),
+				brushStrength: gl.getUniformLocation(flowProgram, "u_brushStrength"),
+				decay: gl.getUniformLocation(flowProgram, "u_decay")
+			};
+			const display = {
+				time: gl.getUniformLocation(displayProgram, "u_time"),
+				pixelRatio: gl.getUniformLocation(displayProgram, "u_pixelRatio"),
+				resolution: gl.getUniformLocation(displayProgram, "u_resolution"),
+				scale: gl.getUniformLocation(displayProgram, "u_scale"),
+				rotation: gl.getUniformLocation(displayProgram, "u_rotation"),
+				offset: gl.getUniformLocation(displayProgram, "u_offset"),
+				color1: gl.getUniformLocation(displayProgram, "u_color1"),
+				color2: gl.getUniformLocation(displayProgram, "u_color2"),
+				color3: gl.getUniformLocation(displayProgram, "u_color3"),
+				colorCount: gl.getUniformLocation(displayProgram, "u_colorCount"),
+				proportion: gl.getUniformLocation(displayProgram, "u_proportion"),
+				softness: gl.getUniformLocation(displayProgram, "u_softness"),
+				shape: gl.getUniformLocation(displayProgram, "u_shape"),
+				shapeScale: gl.getUniformLocation(displayProgram, "u_shapeScale"),
+				distortion: gl.getUniformLocation(displayProgram, "u_distortion"),
+				swirl: gl.getUniformLocation(displayProgram, "u_swirl"),
+				swirlIterations: gl.getUniformLocation(displayProgram, "u_swirlIterations"),
+				flowmap: gl.getUniformLocation(displayProgram, "u_flowmap"),
+				distortBoost: gl.getUniformLocation(displayProgram, "u_distortBoost"),
+				noiseBoost: gl.getUniformLocation(displayProgram, "u_noiseBoost"),
+				swirlBoost: gl.getUniformLocation(displayProgram, "u_swirlBoost")
+			};
+			const quadBuffer = gl.createBuffer();
+			gl.bindBuffer(gl.ARRAY_BUFFER, quadBuffer);
+			gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), gl.STATIC_DRAW);
+			const bindQuad = (program) => {
+				const position = gl.getAttribLocation(program, "a_position");
+				gl.bindBuffer(gl.ARRAY_BUFFER, quadBuffer);
+				gl.enableVertexAttribArray(position);
+				gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);
+			};
+			const makeTarget = (width2, height2, initial2) => {
+				const tex = gl.createTexture();
+				if (tex === null) throw new Error("deepseek-style-theme fluid: texture allocation failed");
+				gl.bindTexture(gl.TEXTURE_2D, tex);
+				if (initial2 !== void 0) {
+					gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width2, height2, 0, gl.RGBA, gl.UNSIGNED_BYTE, initial2);
+				} else {
+					gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width2, height2, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+				}
+				gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+				gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+				gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+				gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+				const fbo = gl.createFramebuffer();
+				gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
+				gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);
+				gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+				return { fbo, tex };
+			};
+			let width = 0;
+			let height = 0;
+			let flowWidth = 0;
+			let flowHeight = 0;
+			let flip = false;
+			let current = { ...params };
+			let audioLow = 0;
+			const pointer = { x: 0.5, y: 0.5, smoothX: 0.5, smoothY: 0.5, vx: 0, vy: 0, svx: 0, svy: 0 };
+			const dprCap = Math.min(window.devicePixelRatio || 1, 1.5);
+			width = Math.round(canvas.clientWidth * dprCap);
+			height = Math.round(canvas.clientHeight * dprCap);
+			canvas.width = width;
+			canvas.height = height;
+			flowWidth = Math.round(width / 4);
+			flowHeight = Math.round(height / 4);
+			const initial = new Uint8Array(flowWidth * flowHeight * 4);
+			for (let i = 0; i < flowWidth * flowHeight; i += 1) {
+				initial[4 * i] = 0;
+				initial[4 * i + 1] = 128;
+				initial[4 * i + 2] = 128;
+				initial[4 * i + 3] = 255;
+			}
+			let targetA = makeTarget(flowWidth, flowHeight, initial);
+			let targetB = makeTarget(flowWidth, flowHeight, initial);
+			const coarse = window.matchMedia("(hover: none), (pointer: coarse)").matches;
+			const ua = navigator;
+			const windows = ua.userAgentData ? ua.userAgentData.platform === "Windows" : navigator.userAgent.includes("Windows");
+			const onMouseMove = (event) => {
+				const rect = canvas.getBoundingClientRect();
+				pointer.x = (event.clientX - rect.left) / rect.width;
+				pointer.y = 1 - (event.clientY - rect.top) / rect.height;
+			};
+			// Local adaptation: upstream always feeds the cursor into the flow field
+			// (except on touch and Windows). DSTT gates it behind its own
+			// `fluidBrush` setting, which ships OFF — the brush is the most
+			// expensive part of the simulation and leaves a visible wake trailing
+			// the pointer across the whole background.
+			if (!coarse && !windows && params.mouseFeed !== false) window.addEventListener("mousemove", onMouseMove);
+			const start = performance.now();
+			let raf = 0;
+			let running = false;
+			let previous = 0;
+			const step = 1e3 / 30;
+			const frame = (now) => {
+				raf = requestAnimationFrame(frame);
+				if (now - previous < step) return;
+				previous = now - (now - previous) % step;
+				const ratio = Math.min(window.devicePixelRatio || 1, 1.5);
+				const nextWidth = Math.round(canvas.clientWidth * ratio);
+				const nextHeight = Math.round(canvas.clientHeight * ratio);
+				if (nextWidth > 0 && nextHeight > 0 && (nextWidth !== width || nextHeight !== height)) {
+					width = nextWidth;
+					height = nextHeight;
+					canvas.width = width;
+					canvas.height = height;
+				}
+				const p = current;
+				const s = pointer;
+				s.svx *= 0.94;
+				s.svy *= 0.94;
+				s.smoothX += (s.x - s.smoothX) * 0.12;
+				s.smoothY += (s.y - s.smoothY) * 0.12;
+				s.svx += ((s.x - s.smoothX) * 0.5 - s.svx) * 0.15;
+				s.svy += ((s.y - s.smoothY) * 0.5 - s.svy) * 0.15;
+				const read = flip ? targetA : targetB;
+				const write = flip ? targetB : targetA;
+				flip = !flip;
+				gl.bindFramebuffer(gl.FRAMEBUFFER, write.fbo);
+				gl.viewport(0, 0, flowWidth, flowHeight);
+				gl.useProgram(flowProgram);
+				bindQuad(flowProgram);
+				gl.activeTexture(gl.TEXTURE0);
+				gl.bindTexture(gl.TEXTURE_2D, read.tex);
+				gl.uniform1i(flow.prev, 0);
+				gl.uniform2f(flow.mouse, s.smoothX, s.smoothY);
+				gl.uniform2f(flow.velocity, s.svx, s.svy);
+				gl.uniform1f(flow.brushRadius, p.mouseRadius);
+				gl.uniform1f(flow.brushStrength, p.mouseStrength);
+				gl.uniform1f(flow.decay, p.decay);
+				gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+				gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+				gl.viewport(0, 0, width, height);
+				gl.useProgram(displayProgram);
+				bindQuad(displayProgram);
+				gl.activeTexture(gl.TEXTURE0);
+				gl.bindTexture(gl.TEXTURE_2D, write.tex);
+				gl.uniform1i(display.flowmap, 0);
+				const time = (performance.now() - start) * 1e-3 * (p.speed * (1 + audioLow * 1.3) / 100);
+				gl.uniform1f(display.time, time);
+				gl.uniform1f(display.pixelRatio, window.devicePixelRatio || 1);
+				gl.uniform2f(display.resolution, width, height);
+				gl.uniform1f(display.scale, p.scale);
+				gl.uniform1f(display.rotation, p.rotation / 90);
+				gl.uniform2f(display.offset, p.offsetX / 100, p.offsetY / 100);
+				const c1 = hexToRgb(p.color1 || "#2E58A4");
+				const c2 = hexToRgb(p.color2 || "#D2E2EE");
+				const c3 = hexToRgb(p.color3 || "#FFFFFF");
+				gl.uniform4f(display.color1, c1[0], c1[1], c1[2], 1);
+				gl.uniform4f(display.color2, c2[0], c2[1], c2[2], 1);
+				gl.uniform4f(display.color3, c3[0], c3[1], c3[2], 1);
+				gl.uniform1f(display.colorCount, 3);
+				gl.uniform1f(display.proportion, p.proportion / 100);
+				gl.uniform1f(display.softness, p.softness / 100);
+				gl.uniform1f(display.shape, 0);
+				gl.uniform1f(display.shapeScale, p.shapeScale / 100);
+				gl.uniform1f(display.distortion, p.distortion / 100);
+				gl.uniform1f(display.swirl, p.swirl / 50);
+				gl.uniform1f(display.swirlIterations, p.swirlIterations);
+				gl.uniform1f(display.distortBoost, p.distortBoost * (1 + audioLow * 0.85));
+				gl.uniform1f(display.noiseBoost, p.noiseBoost);
+				gl.uniform1f(display.swirlBoost, p.swirlBoost * (1 + audioLow * 0.6));
+				gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+			};
+			const handle = {
+				setParams: (next) => {
+					current = { ...next };
+					if (!running) {
+						frame(performance.now());
+						cancelAnimationFrame(raf);
+					}
+				},
+				stir: (x, y, vx, vy) => {
+					pointer.x += (x - pointer.x) * 0.35;
+					pointer.y += (y - pointer.y) * 0.35;
+					pointer.svx += (vx - pointer.svx) * 0.3;
+					pointer.svy += (vy - pointer.svy) * 0.3;
+				},
+				setAudioLow: (level) => {
+					audioLow = Math.max(0, Math.min(1, level));
+				},
+				setRunning: (on) => {
+					if (on) {
+						if (running) return;
+						running = true;
+						previous = 0;
+						raf = requestAnimationFrame(frame);
+						return;
+					}
+					if (!running) return;
+					running = false;
+					cancelAnimationFrame(raf);
+				},
+				dispose: () => {
+					cancelAnimationFrame(raf);
+					window.removeEventListener("mousemove", onMouseMove);
+				}
+			};
+			if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+				frame(performance.now());
+				cancelAnimationFrame(raf);
+				return handle;
+			}
+			running = true;
+			raf = requestAnimationFrame(frame);
+			return handle;
+		}
+
+		// Inlined from upstream `src/client/fluid-interactions.ts` (line 916):
+		// canvas-relative pointer position, flipped to GL bottom-left origin.
+		function uv(canvas, clientX, clientY) {
+			const rect = canvas.getBoundingClientRect();
+			return {
+				x: rect.width <= 0 ? 0.5 : (clientX - rect.left) / rect.width,
+				y: rect.height <= 0 ? 0.5 : 1 - (clientY - rect.top) / rect.height
+			};
+		}
+		function attachFluidInteractions(targets) {
+			const { main, mainCanvas } = targets;
+			const lastStir = /* @__PURE__ */ new WeakMap();
+			const ripples = /* @__PURE__ */ new Set();
+			const stirButton = (button, strength) => {
+				const now = performance.now();
+				const previous = lastStir.get(button) ?? 0;
+				if (now - previous < 160) return;
+				lastStir.set(button, now);
+				const rect = button.getBoundingClientRect();
+				const point = uv(mainCanvas, rect.left + rect.width / 2, rect.top + rect.height / 2);
+				main.stir(point.x, point.y, 0, -strength);
+			};
+			const ripple = (cx, cy) => {
+				const rect = mainCanvas.getBoundingClientRect();
+				if (rect.width <= 0 || rect.height <= 0) return;
+				const ux = (cx - rect.left) / rect.width;
+				const uy = 1 - (cy - rect.top) / rect.height;
+				const start = performance.now();
+				const duration = 1500;
+				const maxRadius = 120;
+				const count = 8;
+				const step = () => {
+					const t = performance.now() - start;
+					if (t > duration) return;
+					const k = t / duration;
+					const radius = maxRadius * k * k;
+					const strength = 0.05 * (1 - k);
+					const spin = 0.4 * k;
+					for (let i = 0; i < count; i += 1) {
+						const angle = i / count * Math.PI * 2 + spin;
+						const px = ux + radius * Math.cos(angle) / rect.width;
+						const py = uy + radius * Math.sin(angle) / rect.height;
+						main.stir(px, py, Math.cos(angle) * strength, -Math.sin(angle) * strength);
+					}
+					const id2 = requestAnimationFrame(step);
+					ripples.add(id2);
+				};
+				const id = requestAnimationFrame(step);
+				ripples.add(id);
+			};
+			const onPointerOver = (event) => {
+				const button = event.target?.closest?.("button");
+				if (button !== void 0 && button !== null) stirButton(button, 0.04);
+			};
+			const onClick = (event) => {
+				const button = event.target?.closest?.("button");
+				if (button === void 0 || button === null) return;
+				const now = performance.now();
+				const previous = lastStir.get(button) ?? 0;
+				if (now - previous < 500) return;
+				lastStir.set(button, now);
+				const rect = button.getBoundingClientRect();
+				ripple(rect.left + rect.width / 2, rect.top + rect.height / 2);
+			};
+			document.addEventListener("pointerover", onPointerOver, { capture: true });
+			document.addEventListener("click", onClick, { capture: true });
+			return () => {
+				for (const id of ripples) cancelAnimationFrame(id);
+				ripples.clear();
+				document.removeEventListener("pointerover", onPointerOver, { capture: true });
+				document.removeEventListener("click", onClick, { capture: true });
+			};
+		}
+
+		// ── glass chromatic dispersion ───────────────────────────────────────
+		var FILTER_ID = "dshome-glass-dispersion";
+		var TINT_ID = "dshome-glass-dispersion-tint";
+		var REFRACT_ID = "dshome-glass-dispersion-refract";
+		var TALL_FILTER_ID = "dshome-glass-dispersion-tall";
+		var TALL_TINT_ID = "dshome-glass-dispersion-tall-tint";
+		var TALL_REFRACT_ID = "dshome-glass-dispersion-tall-refract";
+		// Two composer filters: `narrow` (an 8px band) and `wide` (16px).
+		//
+		// The band is sized by what the user can actually SEE, which is the top and
+		// bottom edges: the card's top abuts the 任务 bar and its bottom abuts the
+		// status line, so displacing the backdrop across those hard edges shows,
+		// while left and right sit over a continuous background where the same
+		// displacement changes nothing. The user accepted that asymmetry ("允许左右
+		// 无反射"), so these maps are tuned for the VERTICAL band and the horizontal
+		// one is left wherever it lands.
+		//
+		// Vertical band on screen = (edge + softness) / mapHeight * 1.56 * cardHeight
+		// -- the filter region is 156% of the surface's height (see filterMarkup) --
+		// so at the upstream 400x92 aspect and a 112px-tall card that is 1.90x the
+		// map inset: 1.7 + 2.5 gives 8px, 3.4 + 5 gives 16px.
+		var COMPOSER_FILTER_ID = "dshome-glass-dispersion-composer";
+		var COMPOSER_TINT_ID = "dshome-glass-dispersion-composer-tint";
+		var COMPOSER_REFRACT_ID = "dshome-glass-dispersion-composer-refract";
+		var WIDE_FILTER_ID = "dshome-glass-dispersion-composer-wide";
+		var WIDE_TINT_ID = "dshome-glass-dispersion-composer-wide-tint";
+		var WIDE_REFRACT_ID = "dshome-glass-dispersion-composer-wide-refract";
+		var COMPOSER_MAP_W = 400;
+		var COMPOSER_MAP_H = 92;
+		var COMPOSER_MAP_RADIUS = 50;
+		var COMPOSER_MAP_EDGE = 1.7;
+		var COMPOSER_MAP_SOFTNESS = 2.5;
+		var COMPOSER_WIDE_EDGE = 3.4;
+		var COMPOSER_WIDE_SOFTNESS = 5;
+		// Chromatic aberration, composer filters only. 0.18 splits the base
+		// displacement into three: red at 118%, blue at 82%, green in the middle,
+		// which is what makes a lens edge fringe instead of merely tinting. Kept to
+		// the two composer filters because it triples the displacement passes, and
+		// because the shared filters have to keep upstream's exact shape for the
+		// frosted recipe.
+		var COMPOSER_ABERRATION = 0.18;
+		var DEFAULT_REF_SCALE = 60;
+		// The liquid recipe drives the same feDisplacementMap harder: at 60 the
+		// bend is there but only just legible once the blur sits on top of it, and
+		// "you can see the edge refract" is the whole point of that recipe. Kept as
+		// a separate constant so the frosted recipe keeps receiving 60.
+		var LIQUID_REF_SCALE = 104;
+		var EDGE_DX = -14;
+		var TINT_OPACITY = 0.45;
+		var TINT_SAT = 0.85;
+		var TINT_LIGHT = 0.6;
+		var DEFAULT_TINT_HUE = 44;
+		// Upstream derives the inset from the map's SHORT side (7% of it, halved),
+		// which is only uniform if the map is square. The composer passes `edge`
+		// instead: one absolute inset for both axes, which comes out uniform as
+		// long as the map's aspect matches the filter region's (see COMPOSER_MAP_*).
+		// Defaults reproduce upstream's numbers exactly, so the frosted recipe's
+		// map stays byte for byte what it was.
+		function buildDisplacementMapDataUrl(width = 400, height = 92, radius = 50, edge = null, softness = 11) {
+			const w = Math.max(240, Math.round(width));
+			const h = Math.max(48, Math.round(height));
+			const r = Math.max(12, Math.round(radius));
+			const inset = edge === null ? Math.min(w, h) * 0.035 : Math.max(0, edge);
+			const innerW = Math.max(1, w - inset * 2);
+			const innerH = Math.max(1, h - inset * 2);
+			const svg2 = `<svg viewBox="0 0 ${w} ${h}" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="glass-x" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="#000"/><stop offset="100%" stop-color="#f00"/></linearGradient><linearGradient id="glass-y" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" stop-color="#000"/><stop offset="100%" stop-color="#00f"/></linearGradient></defs><rect x="0" y="0" width="${w}" height="${h}" fill="#000"/><rect x="0" y="0" width="${w}" height="${h}" rx="${r}" fill="url(#glass-x)"/><rect x="0" y="0" width="${w}" height="${h}" rx="${r}" fill="url(#glass-y)" style="mix-blend-mode:screen"/><rect x="${inset.toFixed(2)}" y="${inset.toFixed(2)}" width="${innerW.toFixed(2)}" height="${innerH.toFixed(2)}" rx="${r}" fill="hsl(0 0% 50% / 1)" style="filter:blur(${softness})"/></svg>`;
+			return `data:image/svg+xml,${encodeURIComponent(svg2)}`;
+		}
+		// Inlined from upstream `src/client/glass-dispersion.ts` (line 2409) —
+		// required by tintMatrix below.
+		function hslToRgb01(h, s, l) {
+			const hue = (h % 360 + 360) % 360 / 360;
+			if (s === 0) return [l, l, l];
+			const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+			const p = 2 * l - q;
+			const channel = (t) => {
+				let tt = t;
+				if (tt < 0) tt += 1;
+				if (tt > 1) tt -= 1;
+				if (tt < 1 / 6) return p + (q - p) * 6 * tt;
+				if (tt < 1 / 2) return q;
+				if (tt < 2 / 3) return p + (q - p) * (2 / 3 - tt) * 6;
+				return p;
+			};
+			return [channel(hue + 1 / 3), channel(hue), channel(hue - 1 / 3)];
+		}
+		function tintMatrix(hue, opacity) {
+			const [r, g, b] = hslToRgb01(hue, TINT_SAT, TINT_LIGHT);
+			const lr = (0.2126 * opacity).toFixed(4);
+			const lg = (0.7152 * opacity).toFixed(4);
+			const lb = (0.0722 * opacity).toFixed(4);
+			return `0 0 0 0 ${r.toFixed(4)}  0 0 0 0 ${g.toFixed(4)}  0 0 0 0 ${b.toFixed(4)}  ${lr} ${lg} ${lb} 0 0`;
+		}
+		function supportsSvgBackdropFilter() {
+			try {
+				const ua = navigator.userAgent || "";
+				if (/Safari/.test(ua) && !/Chrome/.test(ua) || /Firefox/.test(ua)) return false;
+				const div = document.createElement("div");
+				div.style.backdropFilter = `url(#${FILTER_ID})`;
+				return div.style.backdropFilter !== "";
+			} catch {
+				return false;
+			}
+		}
+		// Inlined from upstream `src/client/glass-dispersion.ts` (line 2443) —
+		// builds the wide/tall SVG <filter> pair startGlassDispersion injects.
+		//
+		// `aberration` (0 = off, upstream's shape byte for byte) adds true
+		// chromatic aberration: the backdrop is displaced TWICE MORE at slightly
+		// different scales, and the result is assembled channel by channel -- R
+		// from the stronger displacement, B from the weaker, G from the base. That
+		// is what puts a red/blue fringe on a real lens edge; the tinted
+		// difference-blend below is only a colour wash and does not separate
+		// channels at all.
+		//
+		// The two extra maps carry a data-aberration factor so setRefraction() can
+		// rescale them in step with the base one instead of flattening all three
+		// to the same value.
+		function filterMarkup(id, refractId, tintId, map, aberration = 0) {
+			const chromatic = aberration <= 0 ? '' :
+				`<feDisplacementMap data-aberration="${(1 + aberration).toFixed(3)}" in="SourceGraphic" in2="map" scale="${DEFAULT_REF_SCALE}" xChannelSelector="R" yChannelSelector="B" result="refractR"></feDisplacementMap>` +
+				`<feDisplacementMap data-aberration="${(1 - aberration).toFixed(3)}" in="SourceGraphic" in2="map" scale="${DEFAULT_REF_SCALE}" xChannelSelector="R" yChannelSelector="B" result="refractB"></feDisplacementMap>` +
+				`<feColorMatrix in="refracted" type="matrix" values="0 0 0 0 0  0 1 0 0 0  0 0 0 0 0  0 0 0 1 0" result="onlyG"></feColorMatrix>` +
+				`<feColorMatrix in="refractR" type="matrix" values="1 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0" result="onlyR"></feColorMatrix>` +
+				`<feColorMatrix in="refractB" type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 1 0 0  0 0 0 1 0" result="onlyB"></feColorMatrix>` +
+				`<feBlend in="onlyG" in2="onlyR" mode="screen" result="rgMerge"></feBlend>` +
+				`<feBlend in="rgMerge" in2="onlyB" mode="screen" result="aberrated"></feBlend>`;
+			const merged = chromatic === '' ? 'refracted' : 'aberrated';
+			return `<filter id="${id}" color-interpolation-filters="sRGB" x="-12%" y="-28%" width="124%" height="156%"><feImage href="${map}" x="0" y="0" width="100%" height="100%" preserveAspectRatio="none" result="map"></feImage><feDisplacementMap id="${refractId}" in="SourceGraphic" in2="map" scale="${DEFAULT_REF_SCALE}" xChannelSelector="R" yChannelSelector="B" result="refracted"></feDisplacementMap>${chromatic}<feOffset in="${merged}" dx="${EDGE_DX}" dy="0" result="shifted"></feOffset><feBlend in="shifted" in2="${merged}" mode="difference" result="edgeDiff"></feBlend><feColorMatrix id="${tintId}" in="edgeDiff" type="matrix" values="${tintMatrix(DEFAULT_TINT_HUE, TINT_OPACITY)}" result="edgeTint"></feColorMatrix><feBlend in="${merged}" in2="edgeTint" mode="screen" result="output"></feBlend><feGaussianBlur in="output" stdDeviation="0.5"></feGaussianBlur></filter>`;
+		}
+		/**
+		 * Mount the two SVG backdrop filters and set `ATTR` on <html> so the
+		 * stylesheet can opt surfaces into the dispersion. Returns a handle whose
+		 * `setTint(hue)` / `setRefraction(scale)` accept values from the caller
+		 * (upstream read them from its own settings store).
+		 * @param {{ hue?: number, refraction?: number }} [options]
+		 * @returns {{ setTint: (hue: number) => void, setRefraction: (scale: number) => void, dispose: () => void }}
+		 */
+		function startGlassDispersion(options) {
+			const hue = options !== undefined && typeof options.hue === "number" ? options.hue : DEFAULT_TINT_HUE;
+			const root = document.documentElement;
+			if (root.hasAttribute(ATTR) || document.getElementById(FILTER_ID) !== null) {
+				return { setTint() {
+				}, setRefraction() {
+				}, dispose() {
+				} };
+			}
+			if (!supportsSvgBackdropFilter()) {
+				return { setTint() {
+				}, setRefraction() {
+				}, dispose() {
+				} };
+			}
+			const mapWide = buildDisplacementMapDataUrl(400, 92, 50);
+			const mapTall = buildDisplacementMapDataUrl(92, 400, 50);
+			const mapComposer = buildDisplacementMapDataUrl(COMPOSER_MAP_W, COMPOSER_MAP_H, COMPOSER_MAP_RADIUS, COMPOSER_MAP_EDGE, COMPOSER_MAP_SOFTNESS);
+			const mapComposerWide = buildDisplacementMapDataUrl(COMPOSER_MAP_W, COMPOSER_MAP_H, COMPOSER_MAP_RADIUS, COMPOSER_WIDE_EDGE, COMPOSER_WIDE_SOFTNESS);
+			const markup = `<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" width="0" height="0" style="position:absolute;overflow:hidden"><defs>` + filterMarkup(FILTER_ID, REFRACT_ID, TINT_ID, mapWide) + filterMarkup(TALL_FILTER_ID, TALL_REFRACT_ID, TALL_TINT_ID, mapTall) + filterMarkup(COMPOSER_FILTER_ID, COMPOSER_REFRACT_ID, COMPOSER_TINT_ID, mapComposer, COMPOSER_ABERRATION) + filterMarkup(WIDE_FILTER_ID, WIDE_REFRACT_ID, WIDE_TINT_ID, mapComposerWide, COMPOSER_ABERRATION) + `</defs></svg>`;
+			const container = document.createElement("div");
+			container.setAttribute("aria-hidden", "true");
+			container.style.cssText = "position:absolute;width:0;height:0;overflow:hidden;";
+			container.innerHTML = markup;
+			document.body.appendChild(container);
+			const tint = container.querySelectorAll("feColorMatrix");
+			const refract = container.querySelectorAll("feDisplacementMap");
+			root.setAttribute(ATTR, "");
+			const handle = {
+				setTint(nextHue) {
+					const values = tintMatrix(nextHue, TINT_OPACITY);
+					tint.forEach((node) => node.setAttribute("values", values));
+				},
+				setRefraction(scale) {
+					// The aberration maps are the same displacement at a slightly
+					// different scale, so they carry a factor and are rescaled in step;
+					// flattening them all to one value would erase the fringing.
+					const base = Math.max(0, Math.min(140, Number(scale) || 0));
+					refract.forEach((node) => {
+						const factor = Number(node.getAttribute("data-aberration"));
+						const value = Number.isFinite(factor) && factor > 0 ? base * factor : base;
+						node.setAttribute("scale", String(Math.max(0, Math.min(140, value))));
+					});
+				},
+				dispose() {
+					root.removeAttribute(ATTR);
+					container.remove();
+				}
+			};
+			if (options !== undefined && typeof options.refraction === "number") handle.setRefraction(options.refraction);
+			handle.setTint(hue);
+			return handle;
+		}
+
+		// ── specular-highlight cursor parallax ───────────────────────────────
+		// SPOT_ATTR / SPEC_X / SPEC_Y/ SPOT_SELECTOR renamed to the `dshome-`
+		// prefix. The caller decides which elements carry `data-dshome-spot`;
+		// declare them as `data-dshome-spot` in the stylesheet/DOM layer.
+		var SPOT_ATTR = "data-dshome-spot";
+		var SPOT_SELECTOR = `[${SPOT_ATTR}]`;
+		var SPEC_X = "--dshome-spec-x";
+		var SPEC_Y = "--dshome-spec-y";
+		// Inlined from upstream `src/client/spot-core.ts` (lines 1711-1713).
+		function closestSpot(target) {
+			return target instanceof Element ? target.closest(SPOT_SELECTOR) : null;
+		}
+		// Inlined from upstream `src/client/spot-core.ts` (lines 1717-1729). The
+		// `[data-composer-card]` / `[data-dsh-stats]` selectors are product markup
+		// and are deliberately left unrenamed; a mount that lacks them simply
+		// falls back to the spot's own border box.
+		function visualRect(spot) {
+			if (spot.querySelector("[data-composer-card]") !== null) {
+				const card = spot.querySelector("[data-composer-card]");
+				const r0 = card.getBoundingClientRect();
+				const stats = spot.querySelector("[data-dsh-stats]");
+				if (stats === null) return r0;
+				const r1 = stats.getBoundingClientRect();
+				const left = Math.min(r0.left, r1.left);
+				const top = Math.min(r0.top, r1.top);
+				return new DOMRect(left, top, Math.max(r0.right, r1.right) - left, Math.max(r0.bottom, r1.bottom) - top);
+			}
+			return spot.getBoundingClientRect();
+		}
+		// Inlined from upstream `src/client/spot-core.ts` (lines 1730-1732).
+		function inside(visual, clientX, clientY) {
+			return clientX >= visual.left && clientX <= visual.right && clientY >= visual.top && clientY <= visual.bottom;
+		}
+		/**
+		 * Write normalised cursor coordinates into `--dshome-spec-x` /
+		 * `--dshome-spec-y` on the hovered `[data-dshome-spot]` element.
+		 * @returns {() => void} disposer that detaches every listener and clears vars.
+		 */
+		function startSpecularParallax() {
+			let current = null;
+			let visual = null;
+			let raf = 0;
+			const clear = () => {
+				if (current === null) return;
+				current.style.removeProperty(SPEC_X);
+				current.style.removeProperty(SPEC_Y);
+				current = null;
+				visual = null;
+			};
+			const paint = (clientX, clientY) => {
+				if (raf !== 0) return;
+				raf = requestAnimationFrame(() => {
+					raf = 0;
+					if (current === null || visual === null) return;
+					if (!inside(visual, clientX, clientY)) {
+						clear();
+						return;
+					}
+					const sx = Math.min(1, Math.max(-1, (clientX - visual.left) / visual.width * 2 - 1));
+					const sy = Math.min(1, Math.max(-1, (clientY - visual.top) / visual.height * 2 - 1));
+					current.style.setProperty(SPEC_X, sx.toFixed(4));
+					current.style.setProperty(SPEC_Y, sy.toFixed(4));
+				});
+			};
+			const onMove = (event) => {
+				const spot = closestSpot(event.target);
+				if (spot === null || spot !== current) return;
+				paint(event.clientX, event.clientY);
+			};
+			const onOver = (event) => {
+				const spot = closestSpot(event.target);
+				if (spot === null) return;
+				const rect = visualRect(spot);
+				if (!inside(rect, event.clientX, event.clientY)) return;
+				current = spot;
+				visual = rect;
+				paint(event.clientX, event.clientY);
+			};
+			const onOut = (event) => {
+				const spot = closestSpot(event.target);
+				if (spot === null || spot !== current) return;
+				if (visual !== null && inside(visual, event.clientX, event.clientY)) return;
+				clear();
+			};
+			document.addEventListener("pointermove", onMove, { passive: true });
+			document.addEventListener("pointerover", onOver, { passive: true });
+			document.addEventListener("pointerout", onOut, { passive: true });
+			return () => {
+				document.removeEventListener("pointermove", onMove);
+				document.removeEventListener("pointerover", onOver);
+				document.removeEventListener("pointerout", onOut);
+				if (raf !== 0) cancelAnimationFrame(raf);
+				clear();
+			};
+		}
+
+		// ─────────────────────────────────────────────────────────────────────────────
+		// PUBLIC API exposed by this fragment (all declarations are inert until called;
+		// nothing here runs at load time):
+		//
+		//   SITE_FLUID_PARAMS : object
+		//     Upstream's default fluid parameter set (mouse radius/strength, decay,
+		//     distortion, swirl, scale, offsets and three palette colours). Spread it
+		//     and override `color1`/`color2`/`color3` (and any knob) to theme the
+		//     fluid: `{ ...SITE_FLUID_PARAMS, color1: '#8AA3D6' }`.
+		//
+		//   attachFluidShader(canvas, params) -> handle
+		//     canvas: HTMLCanvasElement in the DOM and sized by CSS. params: a full
+		//     parameter object (see SITE_FLUID_PARAMS). Returns:
+		//       setParams(next)        -> void  swap params; repaints once if paused
+		//       stir(x, y, vx, vy)     -> void  inject a velocity impulse at uv (0..1)
+		//       setAudioLow(level)     -> void  0..1 audio boost for speed/boost knobs
+		//       setRunning(on)         -> void  start/stop the rAF loop
+		//       dispose()              -> void  cancel rAF + drop the mousemove listener
+		//     Degrades to no-op methods when WebGL2 is unavailable or a shader fails to
+		//     compile/link. Never throws for that reason.
+		//
+		//   attachFluidInteractions({ main, mainCanvas }) -> dispose
+		//     Wires document-level pointerover/click capture so hovering a <button>
+		//     nudges the fluid and clicking one emits a ripple. `main` is the handle
+		//     from attachFluidShader; `mainCanvas` is the same canvas element passed
+		//     there. Returns a () => void that cancels in-flight ripples and detaches
+		//     both listeners.
+		//
+		//   startGlassDispersion(options?) -> { setTint(hue), setRefraction(scale), dispose() }
+		//     options: { hue?: number, refraction?: number } — both optional.
+		//     `hue` (default 44) tints the dispersion edge; `refraction` (default 60,
+		//     clamped 0..140) is the displacement scale. Injects one hidden <svg> with
+		//     a wide and a tall filter and sets `data-dshome-dispersion` on <html> so
+		//     CSS can apply `backdrop-filter: url(#dshome-glass-dispersion)`. Returns
+		//     no-op methods (idempotent, safe to call twice) when the document already
+		//     has one or the engine does not support SVG backdrop filters.
+		//
+		//   startSpecularParallax() -> dispose
+		//     Tracks the cursor over any element carrying `data-dshome-spot` and
+		//     writes normalised -1..1 coordinates to `--dshome-spec-x` /
+		//     `--dshome-spec-y` on that element each animation frame. Requires the
+		//     caller to mark spot elements with `data-dshome-spot` (SPOT_ATTR) and to
+		//     consume the two custom properties in CSS. Returns a () => void that
+		//     detaches all three document listeners, cancels the pending frame and
+		//     clears both properties.
+		//
+		//   hexToRgb(value) -> [r, g, b] (0..1)   — internal helper, exported for reuse.
+		//   buildDisplacementMapDataUrl(w?, h?, r?) -> string  — SVG data URL.
+		//   tintMatrix(hue, opacity) -> string     — feColorMatrix values string.
+		//   supportsSvgBackdropFilter() -> boolean — engine capability probe.
+		//   FILTER_ID / TALL_FILTER_ID / ATTR / SPOT_ATTR / SPEC_X / SPEC_Y — the
+		//     ids and attribute/var names the shipped CSS must match.
+		//
+		// Typical mount:
+		//   const fluid = attachFluidShader(canvas, { ...SITE_FLUID_PARAMS, color1: c1 });
+		//   const stopInteractions = attachFluidInteractions({ main: fluid, mainCanvas: canvas });
+		//   const dispersion = startGlassDispersion({ hue: 44, refraction: 60 });
+		//   const stopParallax = startSpecularParallax();
+		// Typical dispose: stopParallax(); dispersion.dispose(); stopInteractions(); fluid.dispose();
+		// ─────────────────────────────────────────────────────────────────────────────
+
 		// CORE_CSS: ours only (`:root` tokens, `html/body`, keyframes, stable
 		// `[role=menu]`, `.dshome-*`). No product class names — always injected.
 		// Color model: `data-dshome-color` ∈ {green(base), red(鲜红 peak), blue}
@@ -33,6 +995,20 @@ const dshDeepseekStyleThemeFactory = (require) => {
 		const CORE_CSS = `
 :root{--ds-brand:#059669;--ds-brand-deep:#047857;--ds-brand-mid:#10B981;--ds-brand-light:#34D399;--ds-glass-blur:24px}
 html,body{background-color:transparent!important}
+/* THE LABEL TOKENS ARE NOT PINNED HERE, AND MUST NOT BE AGAIN.
+   A previous attempt at the invisible-text bug declared
+   body{--dsw-alias-label-primary:...!important} under our own scheme marker,
+   so that background and text could never end up on opposite sides. It did fix
+   that, and it broke something worse: those !important declarations outrank the
+   PRODUCT's tokens, so when the user switched appearance the product changed its
+   own tokens and this stylesheet kept painting the old ones. The UI looked like
+   the switch was dead.
+   Measured on the real page: with the theme's style tags removed the switch
+   works, with them present it does not, and reverting the header z-index changes
+   nothing -- i.e. it is this sheet, and it is these declarations.
+   The invisible-text hazard stays open on purpose. A stuck appearance switch is
+   a broken control; near-white text on a near-white page at least still reads
+   once the marker agrees. Do not re-add these two rules. */
 body{background:radial-gradient(1200px 700px at 12% -10%,color-mix(in srgb,var(--ds-brand) 14%,transparent),transparent 60%),radial-gradient(1000px 600px at 105% 12%,color-mix(in srgb,var(--ds-brand-light) 16%,transparent),transparent 55%),radial-gradient(900px 700px at 50% 115%,color-mix(in srgb,var(--ds-brand) 10%,transparent),transparent 60%),linear-gradient(180deg,#fbfbfd 0%,#f5f6fa 100%);background-attachment:fixed}
 body[data-dshome-color=red]{--ds-brand:#F5222D;--ds-brand-deep:#CF1322;--ds-brand-mid:#FF4D4F;--ds-brand-light:#FF7875}
 body[data-dshome-color=blue]{--ds-brand:#4D6BFE;--ds-brand-deep:#3A65C2;--ds-brand-mid:#4176E6;--ds-brand-light:#73A3D2}
@@ -204,7 +1180,12 @@ body[data-dshome-dark] .YDXeBa_sessionRow.YDXeBa_selected{background:linear-grad
 .wSkVaW_scrollBody{padding-top:56px}
 .wSkVaW_viewArea{padding:0 18px}
 .wSkVaW_viewArea{animation:dshome-view-enter .45s ease}
-.wSkVaW_header{position:absolute;top:8px;left:24px;right:24px;z-index:5;min-height:36px;padding:4px 12px;display:flex;flex-direction:row;align-items:center;gap:8px;justify-content:flex-start;border:0!important;border-radius:0;background:transparent!important;transition:border-radius .3s ease}
+/* Header z-index: the product's column-resize grips (.wSkVaW_widthHandle) are
+   40px-wide full-height strips at z-index 8, while this bar sat at 5 — so the
+   cursor anywhere inside the title bar's own box turned into col-resize and the
+   bar's controls were unreachable. 9 puts the bar above the grips; the grips
+   stay grabbable everywhere the bar is not (above y=8, below y=46). */
+.wSkVaW_header{position:absolute;top:8px;left:24px;right:24px;z-index:9;min-height:36px;padding:4px 12px;display:flex;flex-direction:row;align-items:center;gap:8px;justify-content:flex-start;border:0!important;border-radius:0;background:transparent!important;transition:border-radius .3s ease}
 .wSkVaW_header::before{content:"";position:absolute;inset:0;z-index:-1;background:transparent;border:1px solid transparent;border-radius:inherit;-webkit-backdrop-filter:none;backdrop-filter:none;transition:background .3s ease,border-color .3s ease,box-shadow .3s ease}
 .wSkVaW_header:hover{border-radius:999px}
 .wSkVaW_titleRow{display:contents}
@@ -311,6 +1292,101 @@ body[data-dshome-dark] .VOzbGW_panel{background:rgba(13,30,60,.96)!important}
 ` }
 		];
 
+		// LIQUID GLASS — the "wet glass" recipe, imitated from
+		// deepseek-harness-background (MIT, Copyright (c) 2026 HaoyueQin): a
+		// translucent fill, a vertical sheen gradient that is brightest along the
+		// top edge and gone by ~38%, one shared backdrop chain
+		// (blur + saturate + brightness + contrast), an inset top highlight and a
+		// hairline ring, with hover only brightening the fill. Every knob is a
+		// --dshome-glass-* property so the theme stays one recipe.
+		//
+		// The specular highlight is composed as an EXTRA background layer rather
+		// than a pseudo-element: `--dshome-spec-x/y` (centre-relative, -1..1) are
+		// written by startSpecular() on the hovered surface and
+		// `--dshome-glass-spec` fades it, so a surface that already spends its
+		// ::after on backdrop blur still gets a moving highlight.
+		//
+		// Refraction is a deliberately narrower layer: `backdrop-filter: url(#…)`
+		// with the feDisplacementMap filter from dsh-theme-mineradio bends the
+		// backdrop at the edges of the few LARGE surfaces only. Chromium is the
+		// only engine that supports an SVG filter inside backdrop-filter and it
+		// costs a filter pass per element, so the rule is gated on the
+		// `data-dshome-dispersion` attribute that startGlassDispersion() stamps on
+		// <html> only where it really mounted — every other browser silently keeps
+		// the plain chain.
+		const GLASS_CSS = `
+:root{
+  --dshome-glass-blur:16px;
+  --dshome-glass-saturate:1.42;
+  --dshome-glass-brightness:1;
+  --dshome-glass-contrast:1.01;
+  --dshome-glass-sheen:.14;
+  --dshome-glass-sheen-mid:.05;
+  --dshome-glass-edge:rgba(255,255,255,.62);
+  --dshome-glass-edge-low:rgba(255,255,255,.14);
+  --dshome-glass-ring:rgba(255,255,255,.34);
+  --dshome-glass-shadow:0 12px 40px rgba(0,0,0,.12);
+  --dshome-glass-spec:0;
+}
+body[data-dshome-dark]{
+  --dshome-glass-sheen:.16;
+  --dshome-glass-sheen-mid:.06;
+  --dshome-glass-edge:rgba(255,255,255,.30);
+  --dshome-glass-edge-low:rgba(255,255,255,.07);
+  --dshome-glass-ring:rgba(255,255,255,.18);
+  --dshome-glass-shadow:0 14px 44px rgba(0,0,0,.45);
+}
+html .hHd-Xa_root::before,
+html .uV2eYG_card::after,
+html .gdEzaW_bubble,
+html .fV0t5q_root,
+html [data-composer-card],
+html .VOzbGW_panel,
+html .dshome-sa,
+html .dshome-file-menu{
+  background-image:
+    radial-gradient(340px circle at calc(50% + var(--dshome-spec-x,0) * 50%) calc(50% + var(--dshome-spec-y,0) * 50%), rgb(255 255 255 / calc(var(--dshome-glass-spec) * .30)), transparent 62%),
+    linear-gradient(180deg, rgba(255,255,255,var(--dshome-glass-sheen)), rgba(255,255,255,var(--dshome-glass-sheen-mid)) 38%, rgba(255,255,255,.01))!important;
+  -webkit-backdrop-filter:blur(var(--dshome-glass-blur)) saturate(var(--dshome-glass-saturate)) brightness(var(--dshome-glass-brightness)) contrast(var(--dshome-glass-contrast))!important;
+  backdrop-filter:blur(var(--dshome-glass-blur)) saturate(var(--dshome-glass-saturate)) brightness(var(--dshome-glass-brightness)) contrast(var(--dshome-glass-contrast))!important;
+  box-shadow:inset 0 1px 0 var(--dshome-glass-edge),inset 0 -1px 0 var(--dshome-glass-edge-low),inset 0 0 0 .5px var(--dshome-glass-ring),var(--dshome-glass-shadow);
+  transition:background-color .18s ease,box-shadow .18s ease;
+}
+/* The specular layer is multiplied by --dshome-glass-spec, so it has to be
+   switched on: while the cursor is over a spot surface the highlight follows
+   --dshome-spec-x/y (written per element by startSpecularParallax). */
+html [data-dshome-spot]:hover{--dshome-glass-spec:1;}
+html [data-composer-card]:hover{--dshome-glass-spec:1;--dshome-glass-sheen:.12;}
+html .gdEzaW_bubble:hover,html .dshome-sa:hover,html .dshome-file-menu:hover{
+  background-color:rgb(255 255 255 / calc(var(--dshome-glass-sheen) + .16))!important;
+}
+body[data-dshome-dark] .gdEzaW_bubble:hover,
+body[data-dshome-dark] .dshome-sa:hover,
+body[data-dshome-dark] .dshome-file-menu:hover{
+  background-color:rgb(255 255 255 / calc(var(--dshome-glass-sheen) + .06))!important;
+}
+html[data-dshome-dispersion] .hHd-Xa_root::before,
+html[data-dshome-dispersion] .gdEzaW_bubble,
+html[data-dshome-dispersion] .VOzbGW_panel{
+  -webkit-backdrop-filter:url(#dshome-glass-dispersion) blur(var(--dshome-glass-blur)) saturate(var(--dshome-glass-saturate))!important;
+  backdrop-filter:url(#dshome-glass-dispersion) blur(var(--dshome-glass-blur)) saturate(var(--dshome-glass-saturate))!important;
+}
+@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
+  html .hHd-Xa_root::before,html .uV2eYG_card::after,html .gdEzaW_bubble,html [data-composer-card],html .VOzbGW_panel,html .dshome-sa,html .dshome-file-menu{
+    background-color:rgba(255,255,255,.86)!important;
+  }
+  body[data-dshome-dark] .hHd-Xa_root::before,
+  body[data-dshome-dark] .uV2eYG_card::after,
+  body[data-dshome-dark] .gdEzaW_bubble,
+  body[data-dshome-dark] [data-composer-card],
+  body[data-dshome-dark] .VOzbGW_panel,
+  body[data-dshome-dark] .dshome-sa,
+  body[data-dshome-dark] .dshome-file-menu{
+    background-color:rgba(13,30,60,.92)!important;
+  }
+}
+`;
+
 		/** Append a style tag; returns a disposer that removes it. */
 		function injectStyle(css, label) {
 			const tag = document.createElement('style');
@@ -321,6 +1397,287 @@ body[data-dshome-dark] .VOzbGW_panel{background:rgba(13,30,60,.96)!important}
 			return () => tag.remove();
 		}
 
+		// LIQUID GLASS — the second recipe, selected by the durable `glassStyle`
+		// setting and gated entirely on `html[data-dshome-glass="liquid"]`. The
+		// frosted block above is deliberately left byte-identical: switching the
+		// setting back has to reproduce the look the user approved, so every rule
+		// in here is additive and nothing above is edited.
+		//
+		// What makes it "liquid" rather than "frosted":
+		//   * the fill drops from a .42 white wash to a barely-there .10, and the
+		//     top sheen from .14 to .07, so the pane reads as glass over the fluid
+		//     rather than as a white card;
+		//   * the backdrop chain leans on saturation (1.75) instead of brightness,
+		//     which is what makes the colours behind the pane bloom;
+		//   * the shared feDisplacementMap runs at a much larger scale (see
+		//     LIQUID_REF_SCALE below), so the edge refraction is actually visible;
+		//   * a conic-gradient highlight sweeps the perimeter on its own, driven by
+		//     a registered <angle> property rather than by the pointer.
+		//
+		// Surfaces: exactly the four the user named — the sidebar shell, the
+		// composer, the title bar and the user's own messages. Refraction is one
+		// SVG filter pass per element in Chromium, so nothing else is added.
+		//
+		// The sweep lives on ::after because the product has already claimed
+		// ::before on the sidebar and the title bar (measured, not assumed); the
+		// composer claims both, which is why its edge highlight stays the
+		// brand-tinted conic border the patch block already animates.
+		// A user-authored message is not one flow kind but two: the message that
+		// opens a turn is `data-chat-flow-kind="user"`, and a note typed while the
+		// agent is already working is `"steering"`. Measured on the current build,
+		// a transcript can contain ONLY steering bubbles — anchoring the selector
+		// on "user" alone silently skipped every bubble on the page.
+		//
+		// The second half covers the gap the user hit: a message typed while the
+		// agent is still working is painted in the transcript BEFORE it is picked
+		// up, and at that moment it sits outside any flow-kind container, so the
+		// two anchored selectors miss it and it renders unglazed until the turn
+		// consumes it. Rather than enumerate the container it lands in, this side
+		// takes any bubble that is NOT part of an assistant step — which is the
+		// only place a bubble must not be glassed.
+		const LIQUID_BUBBLE = ':is([data-chat-flow-kind="user"],[data-chat-flow-kind="steering"]) [class*="bubble" i],[class*="bubble" i]:not([data-chat-flow-kind="assistant-step"] *)';
+		const LIQUID_CSS = `
+@property --dshome-liquid-sweep{syntax:"<angle>";inherits:false;initial-value:0deg}
+@keyframes dshome-liquid-sweep{from{--dshome-liquid-sweep:0deg}to{--dshome-liquid-sweep:360deg}}
+html[data-dshome-glass="liquid"]{
+  --dshome-liquid-blur:11px;
+  --dshome-liquid-saturate:1.75;
+  --dshome-liquid-brightness:1.05;
+  --dshome-liquid-contrast:1.02;
+  --dshome-liquid-fill:rgb(255 255 255 / .14);
+  /* The sidebar is the largest pane on screen, so a fill that reads as "barely
+     there" on the composer leaves it washed out against the fluid; it carries a
+     little more body of its own, and more of it again in light mode where the
+     pane has to read as white glass rather than as tinted fluid. */
+  --dshome-liquid-fill-sidebar:rgb(255 255 255 / .30);
+  /* The sidebar is the boundary with the conversation pane, and it blurs harder
+     than everything else on purpose: at the shared 11px the flow behind it stays
+     legible and the pane never separates from the transcript. */
+  --dshome-liquid-blur-sidebar:24px;
+  /* The composer blurs less than the rest on purpose. Filters in a backdrop
+     chain apply left to right, so url(refract) followed by blur(N) blurs the
+     refraction AFTER it happens: a band narrower than about the blur radius is
+     simply erased. At 11px the purpose-built ~4px band was invisible, which is
+     exactly what was reported. 8px lets a ~10px band read while still frosting
+     the backdrop. */
+  --dshome-liquid-blur-composer:8px;
+  /* One extra veil on top of the sidebar's glass. The pane sits over the fluid
+     at roughly the same tone as the conversation it borders, so without this
+     lift the two read as one surface. It is white in light mode. */
+  --dshome-liquid-veil-sidebar:rgb(255 255 255 / .18);
+  --dshome-liquid-sheen:.07;
+  --dshome-liquid-edge:rgba(255,255,255,.60);
+  --dshome-liquid-edge-low:rgba(255,255,255,.10);
+  --dshome-liquid-ring:rgba(255,255,255,.26);
+  --dshome-liquid-sweep-hi:rgba(255,255,255,.85);
+  --dshome-liquid-sweep-lo:rgba(255,255,255,.28);
+  --dshome-liquid-shadow:0 18px 54px rgba(9,20,44,.16);
+}
+body[data-dshome-dark]{
+  --dshome-liquid-fill:rgb(255 255 255 / .07);
+  /* Night mode goes the other way: the pane is a dark slab over a dark flow, so
+     it is tinted towards the shell colour instead of towards white — dark
+     enough to read as black glass, light enough to keep the flow visible. */
+  --dshome-liquid-fill-sidebar:rgb(6 14 32 / .32);
+  /* Night mode's veil is BLACK, the same idea inverted: a dark pane over a dark
+     flow is lifted off it by deepening the pane, not by washing it grey. */
+  --dshome-liquid-veil-sidebar:rgb(0 0 0 / .22);
+  --dshome-liquid-sheen:.05;
+  --dshome-liquid-edge:rgba(255,255,255,.34);
+  --dshome-liquid-edge-low:rgba(255,255,255,.05);
+  --dshome-liquid-ring:rgba(255,255,255,.14);
+  --dshome-liquid-sweep-hi:rgba(255,255,255,.55);
+  --dshome-liquid-sweep-lo:rgba(255,255,255,.16);
+  --dshome-liquid-shadow:0 20px 60px rgba(0,0,0,.5);
+}
+/* The title bar is deliberately NOT always-on: the user's note on it is
+   "rounded corners, and only once the mouse is over it" — the header becomes a
+   pill on :hover (the patch block already sets border-radius:999px, and
+   ::before inherits it), so the glass is scoped to that same hover state
+   instead of turning the strip into a permanent bar. */
+/* The selectors carry an extra body step on purpose. The patch blocks are
+   injected lazily when their anchor appears — later than this sheet — and their
+   dark variants (body[data-dshome-dark] .uV2eYG_card) tie with a
+   html[attr] .surface selector on specificity, at which point source order
+   hands the pane back to the old fill. The extra type selector breaks the tie. */
+html[data-dshome-glass="liquid"] body .hHd-Xa_root::before,
+html[data-dshome-glass="liquid"] body [data-composer-card],
+html[data-dshome-glass="liquid"] body .wSkVaW_header:hover::before,
+html[data-dshome-glass="liquid"] body ${LIQUID_BUBBLE}{
+  background-color:var(--dshome-liquid-fill)!important;
+  background-image:
+    radial-gradient(360px circle at calc(50% + var(--dshome-spec-x,0) * 50%) calc(50% + var(--dshome-spec-y,0) * 50%), rgb(255 255 255 / calc(var(--dshome-glass-spec) * .24)), transparent 60%),
+    linear-gradient(180deg, rgba(255,255,255,var(--dshome-liquid-sheen)), rgba(255,255,255,.015) 34%, rgba(255,255,255,0))!important;
+  -webkit-backdrop-filter:blur(var(--dshome-liquid-blur)) saturate(var(--dshome-liquid-saturate)) brightness(var(--dshome-liquid-brightness)) contrast(var(--dshome-liquid-contrast))!important;
+  backdrop-filter:blur(var(--dshome-liquid-blur)) saturate(var(--dshome-liquid-saturate)) brightness(var(--dshome-liquid-brightness)) contrast(var(--dshome-liquid-contrast))!important;
+  box-shadow:inset 0 1px 0 var(--dshome-liquid-edge),inset 0 -1px 0 var(--dshome-liquid-edge-low),inset 0 0 0 .5px var(--dshome-liquid-ring),var(--dshome-liquid-shadow)!important;
+}
+/* The composer is the one surface the old recipe paints TWICE: the patch block
+   blurs .uV2eYG_card::after (and the frosted list paints it too), and the card
+   itself is in both lists, so the backdrop was blurred twice over — which is what
+   turned the pane into a smear. Under liquid the card element IS the glass, so
+   the redundant layer is switched off rather than re-tuned. */
+html[data-dshome-glass="liquid"] [data-composer-card]::after{
+  -webkit-backdrop-filter:none!important;
+  backdrop-filter:none!important;
+  background-image:none!important;
+  box-shadow:none!important;
+}
+/* The frosted recipe gives the composer a brand-tinted conic ring, painted by
+   the patch block at inset:-1px and spun by dsh-border-spin. Under liquid the
+   user asked for it to go: it sits one pixel OUTSIDE the card's own 1.5px white
+   border, so the pair reads as a coloured line with a white line outside it, and
+   two competing edges is what liquid glass is not. content:none removes the
+   pseudo-element outright rather than painting it transparent. */
+html[data-dshome-glass="liquid"] body [data-composer-card]::before{
+  content:none!important;
+  background:none!important;
+  animation:none!important;
+}
+/* With the ring gone the card's own 1.5px white border is the only edge left,
+   and on its own it reads as a flat white outline rather than as glass — which
+   is what the user saw next. Liquid's edge is the inset hairline plus the
+   refraction, so the border goes transparent. The WIDTH stays: removing it
+   would resize the box and shift every control inside by 3px. */
+html[data-dshome-glass="liquid"] body [data-composer-card]{
+  border-color:transparent!important;
+}
+/* The sidebar pane carries its own fill and its own shape: rounded only on the
+   edge that faces the conversation, so it reads as a panel clipped to the
+   window rather than as a full-bleed column. The hairline ring in the shared
+   box-shadow above follows the radius. */
+html[data-dshome-glass="liquid"] body .hHd-Xa_root::before{
+  background-color:var(--dshome-liquid-fill-sidebar)!important;
+  border-radius:0 22px 22px 0;
+  /* The veil rides on top of the two layers the shared rule sets, so the
+     sidebar keeps its cursor-follow highlight and its sheen underneath. */
+  background-image:
+    linear-gradient(var(--dshome-liquid-veil-sidebar),var(--dshome-liquid-veil-sidebar)),
+    radial-gradient(360px circle at calc(50% + var(--dshome-spec-x,0) * 50%) calc(50% + var(--dshome-spec-y,0) * 50%), rgb(255 255 255 / calc(var(--dshome-glass-spec) * .24)), transparent 60%),
+    linear-gradient(180deg, rgba(255,255,255,var(--dshome-liquid-sheen)), rgba(255,255,255,.015) 34%, rgba(255,255,255,0))!important;
+}
+/* The message bubble is the one surface that is not already positioned. */
+html[data-dshome-glass="liquid"] ${LIQUID_BUBBLE}{
+  position:relative;
+  transition:background-color .18s ease,box-shadow .18s ease;
+}
+/* The composer leans under the cursor (see startComposerTilt). The transition
+   is what turns the release into a settle rather than a snap: the ported
+   routine writes the neutral transform back and only drops the inline
+   properties 240ms later. */
+html[data-dshome-glass="liquid"] [data-composer-card]{
+  transition:transform .24s cubic-bezier(.2,.8,.2,1),background-color .18s ease,box-shadow .18s ease!important;
+  will-change:transform;
+}
+html[data-dshome-glass="liquid"] ${LIQUID_BUBBLE}:hover{
+  background-color:rgb(255 255 255 / .18)!important;
+}
+body[data-dshome-dark] ${LIQUID_BUBBLE}:hover{
+  background-color:rgb(255 255 255 / .10)!important;
+}
+html[data-dshome-glass="liquid"] body .hHd-Xa_root::after{
+  border-radius:0 22px 22px 0;
+}
+/* The travelling edge highlight. mask-composite:exclude turns the filled
+   conic gradient into a 1px perimeter band; padding:1px on the pseudo-element
+   sets that band's width without touching the product's box model.
+   It is drawn on the SIDEBAR ONLY. The user asked for it off the composer and
+   off the message bubbles under liquid: on a small pill the band reads as a
+   bright white outline rather than as light travelling a glass edge, and on the
+   composer it doubled up with the card's own border. The bubbles and the
+   composer keep liquid's other three marks — the translucent fill, the sheen
+   and the refraction. */
+html[data-dshome-glass="liquid"] .hHd-Xa_root::after{
+  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
+  padding:1px;
+  background:conic-gradient(from var(--dshome-liquid-sweep),
+    var(--dshome-liquid-sweep-lo) 0deg,var(--dshome-liquid-sweep-hi) 22deg,var(--dshome-liquid-sweep-lo) 64deg,
+    rgba(255,255,255,.05) 140deg,var(--dshome-liquid-sweep-hi) 190deg,rgba(255,255,255,.05) 248deg,
+    var(--dshome-liquid-sweep-lo) 360deg);
+  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
+  -webkit-mask-composite:xor;
+  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
+  mask-composite:exclude;
+  animation:dshome-liquid-sweep 6.5s linear infinite;
+}
+/* The composer's edge refraction. Three states, selected by the durable
+   composerRefraction setting (see html[data-dshome-composer]):
+     narrow (default) -- an 8px band top and bottom
+     wide             -- a 16px band top and bottom
+     off              -- no dispersion at all
+   Left and right are left as they fall: the band is there, but over a
+   continuous background a horizontal displacement has nothing to show, which
+   the user accepted. */
+html[data-dshome-dispersion][data-dshome-glass="liquid"] body .wSkVaW_header:hover::before,
+html[data-dshome-dispersion][data-dshome-glass="liquid"] body ${LIQUID_BUBBLE}{
+  -webkit-backdrop-filter:url(#dshome-glass-dispersion) blur(var(--dshome-liquid-blur)) saturate(var(--dshome-liquid-saturate))!important;
+  backdrop-filter:url(#dshome-glass-dispersion) blur(var(--dshome-liquid-blur)) saturate(var(--dshome-liquid-saturate))!important;
+}
+html[data-dshome-dispersion][data-dshome-glass="liquid"][data-dshome-composer="narrow"] body [data-composer-card]{
+  -webkit-backdrop-filter:url(#dshome-glass-dispersion-composer) blur(var(--dshome-liquid-blur-composer)) saturate(var(--dshome-liquid-saturate))!important;
+  backdrop-filter:url(#dshome-glass-dispersion-composer) blur(var(--dshome-liquid-blur-composer)) saturate(var(--dshome-liquid-saturate))!important;
+}
+html[data-dshome-dispersion][data-dshome-glass="liquid"][data-dshome-composer="wide"] body [data-composer-card]{
+  -webkit-backdrop-filter:url(#dshome-glass-dispersion-composer-wide) blur(var(--dshome-liquid-blur-composer)) saturate(var(--dshome-liquid-saturate))!important;
+  backdrop-filter:url(#dshome-glass-dispersion-composer-wide) blur(var(--dshome-liquid-blur-composer)) saturate(var(--dshome-liquid-saturate))!important;
+}
+html[data-dshome-dispersion][data-dshome-glass="liquid"][data-dshome-composer="off"] body [data-composer-card]{
+  -webkit-backdrop-filter:blur(var(--dshome-liquid-blur-composer)) saturate(var(--dshome-liquid-saturate))!important;
+  backdrop-filter:blur(var(--dshome-liquid-blur-composer)) saturate(var(--dshome-liquid-saturate))!important;
+}
+/* The workspace list is faded out at its bottom by a gradient whose end stop is
+   the sidebar-fill token — an OPAQUE colour matched to the product's own sidebar
+   background. Over a translucent glass pane that stop no longer matches what is
+   actually behind it, so the fade shows up as a lighter band above 设置 (the
+   user's red box). The pane itself already separates the list from the
+   conversation, so the fade is dropped. Scoped to the sidebar and to the
+   product's own <hash>_fade naming so nothing else is touched. */
+html[data-dshome-glass="liquid"] body .hHd-Xa_root [class*="_fade" i]{
+  background-image:none!important;
+}
+/* The sidebar's own, heavier blur. Written after the two rules above because it
+   ties with the dispersion one on specificity and so has to come later. */
+html[data-dshome-glass="liquid"] body .hHd-Xa_root::before{
+  -webkit-backdrop-filter:blur(var(--dshome-liquid-blur-sidebar)) saturate(var(--dshome-liquid-saturate)) brightness(var(--dshome-liquid-brightness)) contrast(var(--dshome-liquid-contrast))!important;
+  backdrop-filter:blur(var(--dshome-liquid-blur-sidebar)) saturate(var(--dshome-liquid-saturate)) brightness(var(--dshome-liquid-brightness)) contrast(var(--dshome-liquid-contrast))!important;
+}
+html[data-dshome-dispersion][data-dshome-glass="liquid"] body .hHd-Xa_root::before{
+  -webkit-backdrop-filter:url(#dshome-glass-dispersion) blur(var(--dshome-liquid-blur-sidebar)) saturate(var(--dshome-liquid-saturate))!important;
+  backdrop-filter:url(#dshome-glass-dispersion) blur(var(--dshome-liquid-blur-sidebar)) saturate(var(--dshome-liquid-saturate))!important;
+}
+/* Backdrop blur, switched off by the durable backdropBlur setting. Each glass
+   recipe reads its radius from a variable, so turning the frosting off is one
+   0px per variable -- the translucency, the sheen and the edge refraction all
+   stay exactly as they were. Written with a body step so it also out-ranks the
+   html[data-dshome-glass] block the liquid radii are declared in. */
+html[data-dshome-blur="off"],
+html[data-dshome-blur="off"] body{
+  --dshome-glass-blur:0px;
+  --dshome-liquid-blur:0px;
+  --dshome-liquid-blur-sidebar:0px;
+  --dshome-liquid-blur-composer:0px;
+}
+@media (prefers-reduced-motion:reduce){
+  html[data-dshome-glass="liquid"] .hHd-Xa_root::after{
+    animation:none;
+  }
+}
+@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
+  html[data-dshome-glass="liquid"] body .hHd-Xa_root::before,
+  html[data-dshome-glass="liquid"] body [data-composer-card],
+  html[data-dshome-glass="liquid"] body .wSkVaW_header:hover::before,
+  html[data-dshome-glass="liquid"] body ${LIQUID_BUBBLE}{
+    background-color:rgba(255,255,255,.86)!important;
+  }
+  body[data-dshome-dark] .hHd-Xa_root::before,
+  body[data-dshome-dark] [data-composer-card],
+  body[data-dshome-dark] .wSkVaW_header:hover::before,
+  body[data-dshome-dark] ${LIQUID_BUBBLE}{
+    background-color:rgba(13,30,60,.92)!important;
+  }
+}
+`;
+
 		/**
 		* Inject `css` only while `anchor` matches the DOM. If the anchor is
 		* absent at call time, wait up to 30s for it (covers shells that render
@@ -371,8 +1728,32 @@ body[data-dshome-dark] .VOzbGW_panel{background:rgba(13,30,60,.96)!important}
 		* subscription is unavailable.
 		*/
 		function createDarkSync(ctx, theme) {
+			/** Last value we wrote to the body; null until the first apply(). */
+			let lastDark = null;
+			/**
+			* Scheme-change listeners. The dark marker is a marker only if someone
+			* reads it: the stylesheet matches on it, and the ambient background reads
+			* it for its palette (see startAmbient). A listener that throws must not
+			* cost the others their update, so each call is boxed.
+			*/
+			const darkListeners = new Set();
+			const notifyDark = (dark) => {
+				for (const fn of darkListeners) {
+					try { fn(dark); } catch (error) {}
+				}
+			};
 			const apply = () => {
 				let dark = false;
+				// Two signals, and BOTH of them lie in some state -- measured, not
+				// assumed:
+				//   * the theme service reported `light` while the page was in dark
+				//     mode, so treating it as the only source painted a dark page light;
+				//   * `data-ds-dark-theme` was still on <body> after a switch back to
+				//     light, so treating IT as authoritative painted a light page dark.
+				// This is the precedence that shipped through 1.43.1 and behaved in both
+				// modes: ask the service first, and let the product's own attribute
+				// override a "not dark" answer. Keep it, and sanity-check the signal
+				// before touching it again.
 				if (theme !== undefined && theme !== null && typeof theme.getTheme === 'function') {
 					try {
 						const snap = theme.getTheme();
@@ -384,32 +1765,402 @@ body[data-dshome-dark] .VOzbGW_panel{background:rgba(13,30,60,.96)!important}
 					}
 				}
 				if (!dark) dark = document.body.hasAttribute('data-ds-dark-theme');
+				// Remember what we actually put on the body, so a later apply() that
+				// lands on the same answer does not wake the background up for
+				// nothing. `lastDark` is null until the first write.
+				const changed = lastDark !== dark;
+				lastDark = dark;
 				if (dark) document.body.setAttribute('data-dshome-dark', '');
 				else document.body.removeAttribute('data-dshome-dark');
+				// Publish the write. The marker is what EVERY dark rule and the fluid
+				// palette read, so a light/dark switch that only set the attribute left
+				// the background on the scheme it was mounted with -- reported as
+				// "切到深色背景还是蓝白".
+				if (changed) notifyDark(dark);
 			};
-			apply();
 			let unsubscribe = null;
 			try {
 				unsubscribe = ctx.on('theme/change', apply);
 			} catch (error) {
 				unsubscribe = null;
 			}
+			// Always mirror the product's attribute, not only when the theme service
+			// is missing: this is the self-healing half. A missed `theme/change`
+			// used to leave the marker stale until the next reload.
 			let mirror = null;
-			if (unsubscribe === null || theme === undefined || theme === null || typeof theme.getTheme !== 'function') {
-				try {
-					mirror = new MutationObserver(apply);
-					mirror.observe(document.body, { attributes: true, attributeFilter: ['data-ds-dark-theme'] });
-				} catch (error) {
-					mirror = null;
+			try {
+				mirror = new MutationObserver(apply);
+				mirror.observe(document.body, { attributes: true, attributeFilter: ['data-ds-dark-theme'] });
+			} catch (error) {
+				mirror = null;
+			}
+			return {
+				/**
+				* Subscribe to light/dark *writes*. Nothing is replayed on subscribe:
+				* a reader that needs the current value reads the attribute (or calls
+				* dshomeDark()), which keeps one source of truth.
+				*/
+				subscribe: (fn) => {
+					darkListeners.add(fn);
+					return () => darkListeners.delete(fn);
+				},
+				dispose: () => {
+					darkListeners.clear();
+					if (unsubscribe !== null) unsubscribe();
+					if (mirror !== null) mirror.disconnect();
 				}
+			};
+		}
+
+		/**
+		* Own the glass-recipe marker: mirror the durable `glassStyle` choice onto
+		* <html data-dshome-glass>, which is the single switch the stylesheet gates
+		* the liquid recipe on. The attribute is set before the first paint with the
+		* default (`liquid`), so the only flicker is the one a user who picked
+		* `frosted` sees during the initial loopback round trip.
+		*/
+		function createGlassSync(ctx) {
+			const root = document.documentElement;
+			const apply = () => {
+				root.setAttribute('data-dshome-glass', dsttGetGlass());
+				root.setAttribute('data-dshome-composer', dsttGetComposer());
+				root.setAttribute('data-dshome-blur', dsttGetBlur() ? 'on' : 'off');
+			};
+			apply();
+			const unsubscribe = dsttSubscribe(apply);
+			return () => {
+				unsubscribe();
+				root.removeAttribute('data-dshome-glass');
+				root.removeAttribute('data-dshome-composer');
+				root.removeAttribute('data-dshome-blur');
+			};
+		}
+
+		/**
+		* Fluid palette per DSTT colour. The site ships `#8AA3D6` plus two pure
+		* whites, which reads as one faint blue meander — legible on deepseek.com
+		* but far too quiet to carry a colour token, so each entry here uses a
+		* stronger lead and a genuinely different third tone: the display shader
+		* blends all three across the noise field, so three near-identical colours
+		* flatten the flow into a single wash.
+		*/
+		// Two tones carry the hue, the third is white (light) or near-black (dark) --
+		// the user's own rule: 白蓝 / 黑蓝, 白红 / 黑红, 白绿 / 黑绿. What changed is
+		// that the two hue tones now carry real chroma: the previous set was
+		// (hue + #FFFFFF + near-white), and the display shader averages all three
+		// across the screen, so a pale lead plus two whites washed every mode into
+		// the same blue-white (measured: canvas 235,240,252 with the token green).
+		// Averaged now: blue 67,122,226 / red 219,78,87 / green 40,164,115, i.e. the
+		// expected channel leads in every family, in both schemes.
+		const FLUID_COLORS = {
+			green: { light: ['#0FA76A', '#5FCB9E', '#0B7A52'], dark: ['#0A5C3A', '#0E7A4E', '#03130C'] },
+			blue: { light: ['#1E6FE8', '#7FA8F5', '#2B57C9'], dark: ['#0B2E7A', '#123B8F', '#050A18'] },
+			red: { light: ['#E23A44', '#F08A90', '#C02630'], dark: ['#8A1520', '#5E0F16', '#140507'] }
+		};
+		/** Edge-tint hue for the glass dispersion, following the DSTT colour. */
+		const FLUID_HUES = { green: 152, blue: 221, red: 356 };
+
+		/** The active DSTT colour token. */
+		function dshomeColor() {
+			const value = document.body.getAttribute('data-dshome-color');
+			return value === 'red' || value === 'blue' ? value : 'green';
+		}
+		function dshomeDark() {
+			return document.body.hasAttribute('data-dshome-dark');
+		}
+		/** The whole fluid parameter set for the current DSTT colour and scheme. */
+		function dshomeFluidParams() {
+			const palette = FLUID_COLORS[dshomeColor()];
+			const pick = dshomeDark() ? palette.dark : palette.light;
+			// `mouseFeed` is ours, not upstream's: false keeps the cursor from
+			// writing a wake into the flow field (see the DSTT `fluidBrush` setting).
+			return { ...SITE_FLUID_PARAMS, color1: pick[0], color2: pick[1], color3: pick[2], mouseFeed: dsttBrush() };
+		}
+		/** The durable `fluidBrush` preference; off unless the host reports it on. */
+		function dsttBrush() {
+			try {
+				return dsttState.fluidBrush === true;
+			} catch (error) {
+				return false;
+			}
+		}
+		/** WebGL2 is probed on a throwaway canvas so the real one keeps its context. */
+		function supportsWebgl2() {
+			try {
+				const probe = document.createElement('canvas');
+				const gl = probe.getContext('webgl2');
+				if (gl === null) return false;
+				const lose = gl.getExtension('WEBGL_lose_context');
+				if (lose !== null) lose.loseContext();
+				return true;
+			} catch (error) {
+				return false;
 			}
+		}
+		/**
+		* Mark glass surfaces as specular spots. The ported startSpecularParallax
+		* only tracks elements carrying the spot attribute, and stamping it on
+		* pointerover avoids writing attributes onto product elements that React
+		* re-renders. Registered before the parallax listener so the stamp lands on
+		* the same event the parallax handler then reads.
+		*/
+		/**
+		* Specular spot surfaces: the composer card, the sidebar shell and the
+		* user's own messages. The transcript pane and the centre column are
+		* deliberately NOT spots — a cursor-following highlight across that much
+		* empty area reads as a large white patch sliding over the background.
+		*
+		* The message bubble is matched through the product's own
+		* `data-chat-flow-kind="user"` marker rather than a class name: the hashed
+		* `.gdEzaW_bubble` this list used to carry matches nothing on the current
+		* build, which is how the old entry went dead without anyone noticing.
+		*/
+		const SPOT_SURFACES = `${LIQUID_BUBBLE},.uV2eYG_card,.dshome-sa,.dshome-file-menu,.hHd-Xa_root,[data-composer-card]`;
+		function startSpecularSpotter() {
+			const onOver = (event) => {
+				const target = event.target;
+				if (target === null || typeof target.closest !== 'function') return;
+				const surface = target.closest(SPOT_SURFACES);
+				if (surface === null) return;
+				if (surface.getAttribute(SPOT_ATTR) === null) surface.setAttribute(SPOT_ATTR, '');
+			};
+			document.addEventListener('pointerover', onOver, true);
+			return () => document.removeEventListener('pointerover', onOver, true);
+		}
+
+		// ── composer hover tilt ───────────────────────────────────────────────
+		// Ported from dsh-theme-mineradio's `startSpotlight` tilt branch (MIT,
+		// Copyright (c) 2026 John Wu), including its constants: the pane lifts by
+		// scale(1.01) and leans up to TILT_MAX radians towards whichever side the
+		// cursor is on, about its own centre, under an 800px perspective. The
+		// cursor-relative offsets are the same half-range clamp, and the release
+		// writes the neutral transform first and only drops the inline properties
+		// SETTLE_MS later, so the stylesheet's transition animates the return
+		// instead of snapping.
+		//
+		// Only the composer is tiltable here. mineradio tilts every spot it owns;
+		// in this theme the other spots are the sidebar shell and the transcript's
+		// message bubbles, where a whole-column lean reads as a bug rather than as
+		// depth. It is also gated on the liquid recipe, because the frosted pane is
+		// meant to stay observably identical to what shipped before.
+		const TILT_SELECTOR = '[data-composer-card],.uV2eYG_card';
+		const TILT_MAX = 0.0175;
+		const TILT_PERSPECTIVE = 800;
+		const TILT_SCALE = 1.01;
+		const TILT_SETTLE_MS = 240;
+		function startComposerTilt() {
+			let current = null;
+			let raf = 0;
+			const tilted = new WeakSet();
+			const settle = new Map();
+			const reduced = typeof window.matchMedia === 'function' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+			if (reduced) return () => {};
+			const release = (spot) => {
+				const pending = settle.get(spot);
+				if (pending !== undefined) {
+					clearTimeout(pending);
+					settle.delete(spot);
+				}
+				if (!tilted.has(spot)) return;
+				tilted.delete(spot);
+				spot.style.transform = 'perspective(' + TILT_PERSPECTIVE + 'px) rotateX(0rad) rotateY(0rad) scale(1)';
+				const handle = window.setTimeout(() => {
+					settle.delete(spot);
+					spot.style.removeProperty('transform');
+					spot.style.removeProperty('transform-origin');
+				}, TILT_SETTLE_MS);
+				settle.set(spot, handle);
+			};
+			const paint = (spot, rect, clientX, clientY) => {
+				if (raf !== 0) return;
+				raf = requestAnimationFrame(() => {
+					raf = 0;
+					if (current !== spot) return;
+					if (dsttGetGlass() !== 'liquid') {
+						release(spot);
+						return;
+					}
+					if (clientX < rect.left || clientX > rect.right || clientY < rect.top || clientY > rect.bottom) return;
+					const dx = Math.min(0.5, Math.max(-0.5, (clientX - rect.left) / rect.width - 0.5));
+					const dy = Math.min(0.5, Math.max(-0.5, (clientY - rect.top) / rect.height - 0.5));
+					spot.style.transformOrigin = (rect.width / 2) + 'px ' + (rect.height / 2) + 'px';
+					spot.style.transform = 'perspective(' + TILT_PERSPECTIVE + 'px)'
+						+ ' rotateX(' + (TILT_MAX * -2 * dy).toFixed(5) + 'rad)'
+						+ ' rotateY(' + (TILT_MAX * 2 * dx).toFixed(5) + 'rad)'
+						+ ' scale(' + TILT_SCALE + ')';
+					tilted.add(spot);
+				});
+			};
+			const onOver = (event) => {
+				if (dsttGetGlass() !== 'liquid') return;
+				const target = event.target;
+				if (target === null || typeof target.closest !== 'function') return;
+				const spot = target.closest(TILT_SELECTOR);
+				if (spot === null) return;
+				const rect = spot.getBoundingClientRect();
+				if (event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom) return;
+				const pending = settle.get(spot);
+				if (pending !== undefined) {
+					clearTimeout(pending);
+					settle.delete(spot);
+				}
+				current = spot;
+				paint(spot, rect, event.clientX, event.clientY);
+			};
+			const onMove = (event) => {
+				if (current === null) return;
+				paint(current, current.getBoundingClientRect(), event.clientX, event.clientY);
+			};
+			const onOut = (event) => {
+				if (current === null) return;
+				const target = event.target;
+				if (target !== null && typeof target.closest === 'function') {
+					const spot = target.closest(TILT_SELECTOR);
+					if (spot !== null && spot !== current) return;
+				}
+				const rect = current.getBoundingClientRect();
+				if (event.clientX >= rect.left && event.clientX <= rect.right && event.clientY >= rect.top && event.clientY <= rect.bottom) return;
+				release(current);
+				current = null;
+			};
+			document.addEventListener('pointerover', onOver, { passive: true });
+			document.addEventListener('pointermove', onMove, { passive: true });
+			document.addEventListener('pointerout', onOut, { passive: true });
 			return () => {
-				if (unsubscribe !== null) unsubscribe();
-				if (mirror !== null) mirror.disconnect();
+				document.removeEventListener('pointerover', onOver);
+				document.removeEventListener('pointermove', onMove);
+				document.removeEventListener('pointerout', onOut);
+				if (raf !== 0) cancelAnimationFrame(raf);
+				for (const id of settle.values()) clearTimeout(id);
+				settle.clear();
+				for (const spot of document.querySelectorAll(TILT_SELECTOR)) {
+					spot.style.removeProperty('transform');
+					spot.style.removeProperty('transform-origin');
+				}
+				current = null;
+			};
+		}
+
+		/**
+		* Ambient background layer: the DSTT flow field, a WebGL2 two-pass fluid
+		* simulation ported from dsh-theme-mineradio, replacing the particle field.
+		* The particles stay the fallback — {@link startParticles} remains the whole
+		* implementation for engines without WebGL2 — so a missing WebGL2 downgrades
+		* the background instead of blanking it.
+		*
+		* Every colour knob follows the DSTT colour token, so a mode switch re-tints
+		* the flow and the glass edge tint without a remount.
+		*/
+		function startAmbient() {
+			if (!supportsWebgl2()) return startParticles();
+			// Which build is running, readable from the page (see README). One line in
+			// the console answers "is the bundle I just installed actually live?".
+			try { window.__dshomeBuild = '1.43.12 bold-hue'; } catch (error) {}
+			const canvas = document.createElement('canvas');
+			canvas.setAttribute('data-dsh-deepseek-canvas', '');
+			const style = canvas.style;
+			style.position = 'fixed';
+			style.top = '0';
+			style.left = '0';
+			style.width = '100%';
+			style.height = '100%';
+			style.zIndex = '-1';
+			style.pointerEvents = 'none';
+			// The fluid paints an opaque full-screen wash; without this it HIDES the
+			// body background, which is where the DSTT colour token actually lands.
+			// Measured: canvas 235,240,252 over a body reading 233,242,241 with the
+			// token green. Letting the page through is what makes a mode switch
+			// visible on screen instead of only in the computed style.
+			style.opacity = '0.55';
+			document.body.appendChild(canvas);
+
+			const fluid = attachFluidShader(canvas, dshomeFluidParams());
+			// ── palette follows the token, every frame ────────────────────────────
+			// The mount above resolves the palette ONCE. Measured failure: with the
+			// token green the body background computed green while the canvas kept
+			// painting its mount palette -- six light/dark x blue/red/green
+			// screenshots all sampled the same blue (159,187,238). Subscriptions and
+			// a MutationObserver were not enough either (1.43.6 tried), because the
+			// colour driver writes the token before this canvas exists. So the
+			// palette is derived from the DOM and compared per frame: two
+			// getAttribute calls when nothing changed, and it cannot miss a writer.
+			let fluidKey = JSON.stringify(dshomeFluidParams());
+			const fluidSync = setInterval(() => {
+				let next;
+				try { next = JSON.stringify(dshomeFluidParams()); } catch (error) { return; }
+				if (next === fluidKey) return;
+				fluidKey = next;
+				try { fluid.setParams(JSON.parse(next)); } catch (error) {}
+			}, 200);
+			// The fluid is deliberately autonomous: no pointer feed (the `fluidBrush`
+			// setting, off by default) and no button stir either. The ported
+			// `attachFluidInteractions` is therefore NOT wired — it is kept in the
+			// file, unmodified, because re-enabling button ripples is one call, but
+			// nothing in this theme uses it today.
+			const stopSpotter = startSpecularSpotter();
+			const stopParallax = startSpecularParallax();
+			const dispersion = startGlassDispersion({ hue: FLUID_HUES[dshomeColor()] });
+			// Both recipes share one filter pair, so the recipe selects the scale:
+			// 104 for liquid (visible edge refraction) and the untouched 60 for
+			// frosted, which is what the pane has always used.
+			const applyGlass = () => {
+				dispersion.setRefraction(dsttGetGlass() === 'liquid' ? LIQUID_REF_SCALE : DEFAULT_REF_SCALE);
+			};
+			applyGlass();
+			const unsubscribeGlass = dsttSubscribe(applyGlass);
+			// ── palette reconciliation ────────────────────────────────────────────
+			// One reader for BOTH inputs the palette depends on: the colour token on
+			// <body> and the dark marker. Reported symptom: "切主题模式背景不变 /
+			// 深色模式背景还是蓝白". The colour half of that was a real dead end --
+			// `subscribeColor` only fires when the notified colour string CHANGES, so
+			// the boot race (this canvas mounts, then the durable mode arrives over
+			// the async bridge and re-resolves the colour) left the flow painted from
+			// whatever the driver had guessed first, and a mode switch that resolved
+			// to the same colour never notified at all. The scheme half had no
+			// listener: a MutationObserver was watching the marker, but `darkSync`
+			// pointedly does not set a *changed* value twice, and the marker itself
+			// was the only thing written.
+			// So: derive from the DOM on every signal instead of trusting the event to
+			// carry it, and box every listener so one throw cannot cost the rest.
+			let fluidParams = JSON.stringify(dshomeFluidParams());
+			const syncFluid = () => {
+				const next = dshomeFluidParams();
+				const key = JSON.stringify(next);
+				if (key === fluidParams) return;
+				fluidParams = key;
+				try { fluid.setParams(next); } catch (error) {}
+			};
+			const unsubscribeColor = subscribeColor((color) => {
+				syncFluid();
+				try { dispersion.setTint(FLUID_HUES[color] ?? FLUID_HUES.green); } catch (error) {}
+			});
+			const unsubscribeDark = darkSync === null ? null : darkSync.subscribe(syncFluid);
+			// The colour driver writes the token as an attribute; watching it as well
+			// keeps this correct no matter who wrote it (the peak-hour chain, a manual
+			// mode pick, or a future caller that forgets to notify).
+			let tokenMirror = null;
+			try {
+				tokenMirror = new MutationObserver(syncFluid);
+				tokenMirror.observe(document.body, { attributes: true, attributeFilter: ['data-dshome-color'] });
+			} catch (error) {
+				tokenMirror = null;
+			}
+			return () => {
+				unsubscribeColor();
+				if (unsubscribeDark !== null) unsubscribeDark();
+				unsubscribeGlass();
+				if (tokenMirror !== null) tokenMirror.disconnect();
+				dispersion.dispose();
+				stopParallax();
+				stopSpotter();
+				clearInterval(fluidSync);
+				fluid.dispose();
+				canvas.remove();
 			};
 		}
 
 		function startParticles() {
+			try { window.__dshomeBuild = '1.43.12 bold-hue'; } catch (error) {}
 			const canvas = document.createElement('canvas');
 			canvas.setAttribute('data-dsh-deepseek-canvas', '');
 			const style = canvas.style;
@@ -522,7 +2273,20 @@ body[data-dshome-dark] .VOzbGW_panel{background:rgba(13,30,60,.96)!important}
 				const colors = palette();
 				for (const p of parts) p.c = colors[(Math.random() * colors.length) | 0];
 			};
+			// Two inputs again: the colour token (notified) and the dark marker
+			// (written by darkSync). The particle palette is per scheme, so a
+			// light/dark switch has to re-roll the colours too -- otherwise the
+			// fallback background keeps the scheme it was mounted with, exactly the
+			// bug the fluid path had.
 			const unsubscribeColor = subscribeColor(refreshColors);
+			const unsubscribeDark = darkSync === null ? null : darkSync.subscribe(refreshColors);
+			let tokenMirror = null;
+			try {
+				tokenMirror = new MutationObserver(refreshColors);
+				tokenMirror.observe(document.body, { attributes: true, attributeFilter: ['data-dshome-color'] });
+			} catch (error) {
+				tokenMirror = null;
+			}
 
 			window.addEventListener('resize', resize);
 			resize();
@@ -534,6 +2298,8 @@ body[data-dshome-dark] .VOzbGW_panel{background:rgba(13,30,60,.96)!important}
 				cancelAnimationFrame(rafId);
 				window.removeEventListener('resize', resize);
 				unsubscribeColor();
+				if (unsubscribeDark !== null) unsubscribeDark();
+				if (tokenMirror !== null) tokenMirror.disconnect();
 				canvas.remove();
 			};
 		}
@@ -1756,6 +3522,26 @@ body[data-dshome-dark] .${CLS}{background:rgba(14,30,60,.94);box-shadow:0 18px 4
 		const DSTT_SET = "dstt.mode.set";
 		/** Peak windows, [startHour, endHour), judged in Beijing time (UTC+8). */
 		const PEAK_RANGES = [[9, 12], [14, 18]];
+		// The two glass recipes the stylesheet gates on <html data-dshome-glass>.
+		// `liquid` is the default; `frosted` is the pane this theme shipped before.
+		const DSTT_GLASS_STYLES = ["liquid", "frosted"];
+		const DSTT_GLASS_DEFAULT = "liquid";
+		const DSTT_GLASS_LABELS = {
+			liquid: { zh: "液态", en: "Liquid" },
+			frosted: { zh: "白磨砂", en: "Frosted" }
+		};
+		// How wide the composer's edge refraction is under liquid, measured on the
+		// top and bottom edges -- the only two where a displacement has anything to
+		// show. The stylesheet gates the three states on <html data-dshome-composer>.
+		// `origin` was this option's first id and is still accepted from a settings
+		// file written before the rename; it reads back as `wide`.
+		const DSTT_COMPOSER = ["narrow", "wide", "off"];
+		const DSTT_COMPOSER_DEFAULT = "narrow";
+		const DSTT_COMPOSER_LABELS = {
+			narrow: { zh: "窄 8px", en: "Narrow 8px" },
+			wide: { zh: "宽 16px", en: "Wide 16px" },
+			off: { zh: "无", en: "Off" }
+		};
 
 		/**
 		* Shared in-memory mirror of the durable DSTT mode. The settings domain's
@@ -1763,8 +3549,104 @@ body[data-dshome-dark] .${CLS}{background:rgba(14,30,60,.94);box-shadow:0 18px 4
 		* plugin's own loopback channel instead; every reader (the color driver,
 		* the settings tab) subscribes to this mirror.
 		*/
-		const dsttState = { mode: "peakvalley-redblue", listeners: new Set() };
+		const dsttState = { mode: "peakvalley-redblue", fluidBrush: false, glassStyle: DSTT_GLASS_DEFAULT, composer: DSTT_COMPOSER_DEFAULT, blur: true, listeners: new Set() };
+		// Fields the user has chosen in this session. A host half that predates a
+		// field ignores it and answers without it -- or with its own default -- so
+		// without this a fresh choice gets overwritten by the next sync and the
+		// option appears to snap straight back to its default.
+		const dsttTouched = new Set();
 		const dsttGetMode = () => dsttState.mode;
+		const dsttGetGlass = () => (DSTT_GLASS_STYLES.includes(dsttState.glassStyle) ? dsttState.glassStyle : DSTT_GLASS_DEFAULT);
+		const dsttGetComposer = () => {
+			if (dsttState.composer === "origin") return "wide";
+			return DSTT_COMPOSER.includes(dsttState.composer) ? dsttState.composer : DSTT_COMPOSER_DEFAULT;
+		};
+		const dsttGetBlur = () => dsttState.blur !== false;
+		/**
+		* Turn the glass frosting on or off. Same shape as the other CSS-only
+		* preferences: apply locally first, then let the host persist it, and treat
+		* its answer as confirmation only.
+		*/
+		async function dsttSetBlur(ctx, next) {
+			dsttState.blur = next === true;
+			dsttTouched.add("blur");
+			dsttNotify();
+			try {
+				const result = await bridgeCall(DSTT_SET, { mode: dsttState.mode, backdropBlur: dsttState.blur });
+				if (result !== undefined && result !== null && result.ok === true) {
+					return result.value.backdropBlur === dsttState.blur;
+				}
+			} catch (error) {
+				// Fall through: the local choice stands, it just was not stored.
+			}
+			return false;
+		}
+		/**
+		* Persist the composer's refraction width through the bridge.
+		*
+		* Applied locally FIRST, before the round trip. Both this and glassStyle
+		* only flip a CSS attribute, so the choice is fully usable the moment it is
+		* made — and it has to be, because a running dsh keeps the host half it
+		* booted with: until `dsh web` is restarted, `dstt.mode.set` ignores fields
+		* it does not know and answers without them, which used to make a brand new
+		* setting look broken. The cost of applying first is that a choice made
+		* against a stale host is not persisted and reverts on reload, so the
+		* return value still reports the truth.
+		*/
+		async function dsttSetComposer(ctx, next) {
+			if (!DSTT_COMPOSER.includes(next)) return false;
+			dsttState.composer = next;
+			dsttTouched.add("composer");
+			dsttNotify();
+			try {
+				const result = await bridgeCall(DSTT_SET, { mode: dsttState.mode, composerRefraction: next });
+				// The response is used ONLY to confirm. It must never be written back
+				// into the mirror: a host that accepts the call but does not store the
+				// field answers with its own value (the default, `narrow`), and copying
+				// that in is what made the option snap straight back the moment the
+				// round trip landed.
+				if (result !== undefined && result !== null && result.ok === true && DSTT_COMPOSER.includes(result.value.composerRefraction)) {
+					return result.value.composerRefraction === next;
+				}
+			} catch (error) {
+				// Fall through: the local choice stands, it just was not stored.
+			}
+			return false;
+		}
+		/** Persist the glass recipe through the bridge; resolves with success.
+		 * Applied locally first for the same reason as dsttSetComposer above. */
+		async function dsttSetGlass(ctx, next) {
+			if (!DSTT_GLASS_STYLES.includes(next)) return false;
+			dsttState.glassStyle = next;
+			dsttTouched.add("glassStyle");
+			dsttNotify();
+			try {
+				const result = await bridgeCall(DSTT_SET, { mode: dsttState.mode, glassStyle: next });
+				// Confirmation only -- see dsttSetComposer for why the host's echo must
+				// not be copied back into the mirror.
+				if (result !== undefined && result !== null && result.ok === true && DSTT_GLASS_STYLES.includes(result.value.glassStyle)) {
+					return result.value.glassStyle === next;
+				}
+			} catch (error) {
+				// Fall through: the local choice stands, it just was not stored.
+			}
+			return false;
+		}
+		const dsttGetBrush = () => dsttState.fluidBrush === true;
+		/** Persist the fluid-brush preference (off by default) through the bridge. */
+		async function dsttSetBrush(ctx, next) {
+			try {
+				const result = await bridgeCall(DSTT_SET, { mode: dsttState.mode, fluidBrush: next === true });
+				if (result !== undefined && result !== null && result.ok === true) {
+					dsttState.fluidBrush = result.value.fluidBrush === true;
+					dsttNotify();
+					return true;
+				}
+			} catch (error) {
+				// Fall through to the caller's failure handling.
+			}
+			return false;
+		}
 		const dsttSubscribe = (listener) => {
 			dsttState.listeners.add(listener);
 			return () => dsttState.listeners.delete(listener);
@@ -1794,12 +3676,24 @@ body[data-dshome-dark] .${CLS}{background:rgba(14,30,60,.94);box-shadow:0 18px 4
 			return await response.json();
 		}
 
+		/** Fallback used when the host half is unavailable. */
+		const dsttGetBlurFallback = () => dsttState.blur !== false;
+
 		/** Pull the durable mode from the host half once. */
 		async function dsttSync(ctx) {
 			try {
 				const result = await bridgeCall(DSTT_GET, {});
 				if (result !== undefined && result !== null && result.ok === true && DSTT_MODES.includes(result.value.mode)) {
 					dsttState.mode = result.value.mode;
+					dsttState.fluidBrush = result.value.fluidBrush === true;
+					// An older host half answers without a glass recipe: keep the
+					// default rather than clearing the attribute to nothing. And a
+					// field the user has already chosen this session is never taken
+					// back from the host -- a stale host answers with its own default,
+					// which is what made a fresh choice look like it snapped back.
+					if (!dsttTouched.has("glassStyle") && DSTT_GLASS_STYLES.includes(result.value.glassStyle)) dsttState.glassStyle = result.value.glassStyle;
+					if (!dsttTouched.has("composer") && DSTT_COMPOSER.includes(result.value.composerRefraction)) dsttState.composer = result.value.composerRefraction;
+					if (!dsttTouched.has("blur") && typeof result.value.backdropBlur === "boolean") dsttState.blur = result.value.backdropBlur;
 					dsttNotify();
 				}
 			} catch (error) {}
@@ -1964,10 +3858,18 @@ body[data-dshome-dark] .${CLS}{background:rgba(14,30,60,.94);box-shadow:0 18px 4
 
 			anchor();
 
+			// The durable mode crosses an async bridge (dsttSync), so the anchor above
+			// may have resolved the colour from the DEFAULT mode -- its 常态绿/常态蓝
+			// token then never appears, and the background keeps the first guess. One
+			// extra read after the sync has had its turn fixes the boot race, and it
+			// is idempotent, so it cannot fight a later answer.
+			const bootTimer = setTimeout(anchor, 0);
+
 			try { unsubscribe = dsttSubscribe(anchor); } catch (error) { unsubscribe = null; }
 
 			return () => {
 				stopped = true;
+				clearTimeout(bootTimer);
 				if (chainTimer !== 0) clearTimeout(chainTimer);
 				if (unsubscribe !== null) unsubscribe();
 				document.removeEventListener('visibilitychange', onVisibility);
@@ -2041,6 +3943,30 @@ body[data-dshome-dark] .${CLS}{background:rgba(14,30,60,.94);box-shadow:0 18px 4
 				if (dstt === undefined || next === mode) return;
 				dstt.set(next);
 			};
+			// The brush is a durable preference, not local state: flipping it asks the
+			// host to persist it and the mirror re-renders this panel.
+			const brushOn = dstt !== undefined && typeof dstt.brush === 'function' ? dstt.brush() === true : false;
+			const toggleBrush = () => {
+				if (dstt === undefined || typeof dstt.setBrush !== 'function') return;
+				dstt.setBrush(!brushOn);
+			};
+			// The glass recipe is durable too, and the mirror re-renders this panel
+			// when the host confirms the write.
+			const glassNow = dstt !== undefined && typeof dstt.glass === 'function' ? dstt.glass() : DSTT_GLASS_DEFAULT;
+			const pickGlass = (next) => {
+				if (dstt === undefined || typeof dstt.setGlass !== 'function' || next === glassNow) return;
+				dstt.setGlass(next);
+			};
+			const composerNow = dstt !== undefined && typeof dstt.composer === 'function' ? dstt.composer() : DSTT_COMPOSER_DEFAULT;
+			const pickComposer = (next) => {
+				if (dstt === undefined || typeof dstt.setComposer !== 'function' || next === composerNow) return;
+				dstt.setComposer(next);
+			};
+			const blurOn = dstt !== undefined && typeof dstt.blur === 'function' ? dstt.blur() !== false : true;
+			const toggleBlur = () => {
+				if (dstt === undefined || typeof dstt.setBlur !== 'function') return;
+				dstt.setBlur(!blurOn);
+			};
 
 			return React.createElement('div', { className: 'dshome-dstt' },
 				React.createElement('h3', null,
@@ -2064,6 +3990,62 @@ body[data-dshome-dark] .${CLS}{background:rgba(14,30,60,.94);box-shadow:0 18px 4
 							className: 'dshome-dstt-seg-btn' + (mode === m ? ' dshome-on' : ''),
 							onClick: () => pickMode(m)
 						}, isZh ? DSTT_LABELS[m].zh : DSTT_LABELS[m].en)))),
+				React.createElement('div', { className: 'dshome-dstt-row' },
+					React.createElement('div', { className: 'dshome-dstt-row-body' },
+						React.createElement('div', { className: 'dshome-dstt-row-title' }, isZh ? '流体跟随笔刷' : 'Fluid follow brush'),
+						React.createElement('div', { className: 'dshome-dstt-row-hint' }, isZh
+							? '开启后光标会把背景流场搅出一条跟随的尾迹。它是整个模拟里最贵的一部分，默认关闭；改完刷新页面生效。'
+							: 'Lets the cursor stir a trail into the background flow. It is the most expensive part of the simulation, so it is off by default; reload after changing.')),
+					React.createElement('button', {
+						type: 'button',
+						role: 'switch',
+						'aria-checked': brushOn,
+						className: 'dshome-dstt-seg-btn' + (brushOn ? ' dshome-on' : ''),
+						onClick: toggleBrush
+					}, brushOn ? (isZh ? '已开启' : 'On') : (isZh ? '已关闭' : 'Off'))),
+				React.createElement('div', { className: 'dshome-dstt-row' },
+					React.createElement('div', { className: 'dshome-dstt-row-body' },
+						React.createElement('div', { className: 'dshome-dstt-row-title' }, isZh ? '玻璃风格' : 'Glass style'),
+						React.createElement('div', { className: 'dshome-dstt-row-hint' }, isZh
+							? '液态：透镜折射 + 会走圈的边缘高光，更通透（本次方向）。白磨砂：此前那套白磨砂 + 蓝变光边框，观感与从前完全一致。'
+							: 'Liquid: lens refraction plus a highlight that travels the border, far more translucent (the current direction). Frosted: the white frosted pane with the blue shifting border, pixel-identical to what shipped before.')),
+					React.createElement('div', { className: 'dshome-dstt-seg', role: 'radiogroup', 'aria-label': isZh ? '玻璃风格' : 'Glass style' },
+						DSTT_GLASS_STYLES.map((style) => React.createElement('button', {
+							key: style,
+							type: 'button',
+							role: 'radio',
+							'aria-checked': glassNow === style,
+							className: 'dshome-dstt-seg-btn' + (glassNow === style ? ' dshome-on' : ''),
+							onClick: () => pickGlass(style)
+						}, isZh ? DSTT_GLASS_LABELS[style].zh : DSTT_GLASS_LABELS[style].en)))),
+				React.createElement('div', { className: 'dshome-dstt-row' },
+					React.createElement('div', { className: 'dshome-dstt-row-body' },
+						React.createElement('div', { className: 'dshome-dstt-row-title' }, isZh ? '对话框边缘倒影' : 'Composer edge reflection'),
+						React.createElement('div', { className: 'dshome-dstt-row-hint' }, isZh
+							? '液态下对话框边缘的折射带宽（按上下量——左右背后是连续背景，同样的位移看不出变化）。窄 8px（默认）/ 宽 16px / 无，三者都是专为这张卡片做的位移图。'
+							: 'Width of the lens band at the composer edge under liquid, measured top and bottom — left and right sit over a continuous backdrop where the same displacement shows nothing. Narrow 8px (default) / Wide 16px / Off; each is a map built for this card.')),
+					React.createElement('div', { className: 'dshome-dstt-seg', role: 'radiogroup', 'aria-label': isZh ? '对话框边缘倒影' : 'Composer edge reflection' },
+						DSTT_COMPOSER.map((choice) => React.createElement('button', {
+							key: choice,
+							type: 'button',
+							role: 'radio',
+							'aria-checked': composerNow === choice,
+							className: 'dshome-dstt-seg-btn' + (composerNow === choice ? ' dshome-on' : ''),
+							onClick: () => pickComposer(choice)
+						}, isZh ? DSTT_COMPOSER_LABELS[choice].zh : DSTT_COMPOSER_LABELS[choice].en)))),
+					React.createElement('div', { className: 'dshome-dstt-row' },
+						React.createElement('div', { className: 'dshome-dstt-row-body' },
+							React.createElement('div', { className: 'dshome-dstt-row-title' }, isZh ? '背景模糊（磨砂）' : 'Backdrop blur'),
+							React.createElement('div', { className: 'dshome-dstt-row-hint' }, isZh
+								? '玻璃面板后面那层虚化。关闭后玻璃变成纯半透明：通透度、顶部光泽、边缘折射都保留，只是不再把背后的东西磨掉。'
+								: 'The frosting behind every glass pane. Off leaves the translucency, the sheen and the edge refraction intact and only stops blurring what is behind the glass.')),
+						React.createElement('button', {
+							type: 'button',
+							role: 'switch',
+							'aria-checked': blurOn,
+							className: 'dshome-dstt-seg-btn' + (blurOn ? ' dshome-on' : ''),
+							onClick: toggleBlur
+						}, blurOn ? (isZh ? '已开启' : 'On') : (isZh ? '已关闭' : 'Off'))),
 				React.createElement('div', { className: 'dshome-dstt-status', 'data-peak': timeSliced && peakNow },
 					'当前：' + colorName + ' · ' + status));
 		}
@@ -2091,8 +4073,22 @@ body[data-dshome-dark] .${CLS}{background:rgba(14,30,60,.94);box-shadow:0 18px 4
 
 			// Dark marker: owned attribute driven by the theme service, never by
 			// the product's attribute name. Must precede the patch blocks so the
-			// dark selectors match from the first paint.
-			ctx.effect(() => createDarkSync(ctx, theme), 'deepseek-style-theme: dark sync');
+			// dark selectors match from the first paint. The handle is kept in scope
+			// because the ambient background subscribes to its writes: the marker
+			// alone was not enough, since nothing re-read it when the scheme changed.
+			let darkSync = null;
+			ctx.effect(() => {
+				const handle = createDarkSync(ctx, theme);
+				darkSync = handle;
+				return () => {
+					if (darkSync === handle) darkSync = null;
+					handle.dispose();
+				};
+			}, 'deepseek-style-theme: dark sync');
+
+			// Glass-recipe marker: same idea, and it has to be on <html> before the
+			// first paint of the glass surfaces or the pane flashes the other recipe.
+			ctx.effect(() => createGlassSync(ctx), 'deepseek-style-theme: glass style sync');
 
 			// Guarded product-surface patches: each block activates only while
 			// its anchor class exists in the DOM.
@@ -2100,6 +4096,17 @@ body[data-dshome-dark] .${CLS}{background:rgba(14,30,60,.94);box-shadow:0 18px 4
 				ctx.effect(() => installGuarded(block.anchor, block.css), 'deepseek-style-theme: patch ' + block.anchor);
 			}
 
+			// Liquid glass wins by SPECIFICITY, not by order: the patch blocks are
+			// injected lazily when their anchor appears and set `background`
+			// (shorthand) with !important, so every glass selector below is written
+			// as `html .surface` — one type selector of extra weight — instead of
+			// racing their insertion order.
+			ctx.effect(() => injectStyle(GLASS_CSS, 'glass.css'), 'deepseek-style-theme: liquid glass');
+			// The liquid recipe is a second sheet rather than an edit of the first:
+			// every rule inside is gated on html[data-dshome-glass="liquid"], so the
+			// frosted pane keeps rendering exactly what it rendered before.
+			ctx.effect(() => injectStyle(LIQUID_CSS, 'liquid-glass.css'), 'deepseek-style-theme: apple liquid glass');
+
 			if (theme !== undefined) {
 				const disposeTokens = theme.overrideTokens('deepseek-style-theme', {
 					'--dsw-alias-bg-base': { light: '#f6f7fb', dark: '#0a1a3a' },
@@ -2120,8 +4127,14 @@ body[data-dshome-dark] .${CLS}{background:rgba(14,30,60,.94);box-shadow:0 18px 4
 			}
 
 			ctx.effect(() => {
-				try { return startParticles(); } catch (error) { return () => {}; }
-			});
+				try { return startAmbient(); } catch (error) { return () => {}; }
+			}, 'deepseek-style-theme: fluid background');
+			// The composer's hover tilt is independent of the background: it must
+			// survive a machine without WebGL2, where startAmbient() falls back to
+			// the 2D particle field.
+			ctx.effect(() => {
+				try { return startComposerTilt(); } catch (error) { return () => {}; }
+			}, 'deepseek-style-theme: composer hover tilt');
 			ctx.effect(() => {
 				try { return watchSettingsSection(); } catch (error) { return () => {}; }
 			});
@@ -2156,6 +4169,14 @@ body[data-dshome-dark] .${CLS}{background:rgba(14,30,60,.94);box-shadow:0 18px 4
 						dstt: {
 							mode: dsttGetMode,
 							set: (mode) => dsttSetMode(ctx, mode),
+							brush: dsttGetBrush,
+							setBrush: (next) => dsttSetBrush(ctx, next),
+							glass: dsttGetGlass,
+							setGlass: (next) => dsttSetGlass(ctx, next),
+							composer: dsttGetComposer,
+							setComposer: (next) => dsttSetComposer(ctx, next),
+							blur: dsttGetBlur,
+							setBlur: (next) => dsttSetBlur(ctx, next),
 							subscribe: dsttSubscribe
 						},
 						locale: ctx.get('locale')
@@ -2169,12 +4190,11 @@ body[data-dshome-dark] .${CLS}{background:rgba(14,30,60,.94);box-shadow:0 18px 4
 		return module.exports;
 };
 
-// Both ids, same factory. The package moved from
-// @dsh-external/dsh-deepseek-style-theme to the unscoped
-// dsh-deepseek-style-theme, and the loader asks a bundle to register under
-// whichever id the installed copy carries -- while this rolled-back file
-// still carries the old literal internally. Registering both, each guarded,
-// means either host finds the id it wants and the other entry is simply
-// never requested.
-try { window.__ModuleLoader__.load({ id: "dsh-deepseek-style-theme", factory: dshDeepseekStyleThemeFactory }); } catch (error) {}
-try { window.__ModuleLoader__.load({ id: "@dsh-external/dsh-deepseek-style-theme", factory: dshDeepseekStyleThemeFactory }); } catch (error) {}
+// Both ids, same factory. See the note at the top of this file for why one
+// literal cannot work during the rename.
+try {
+	window.__ModuleLoader__.load({ id: "dsh-deepseek-style-theme", factory: dshDeepseekStyleThemeFactory });
+} catch (error) {}
+try {
+	window.__ModuleLoader__.load({ id: "@dsh-external/dsh-deepseek-style-theme", factory: dshDeepseekStyleThemeFactory });
+} catch (error) {}