npm - @5even7/dlc-ui - Versions diffs - 0.2.11 → 0.2.12 - Mend

@5even7/dlc-ui 0.2.11 → 0.2.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (26) hide show

package/dist/index.mjs CHANGED Viewed

@@ -1,117 +1,123 @@
-/**
- * Tiny event emitter. Accepts any event name so the API stays open for
- * future events (hover, click, custom) without breaking changes.
- */
-function createEmitter() {
-  // Plain object storage (no Map/Set) so the legacy build has no API
-  // dependencies beyond what IE11 provides.
-  const listeners = Object.create(null);
-  return {
-    on(event, fn) {
-      if (!listeners[event]) listeners[event] = [];
-      listeners[event].push(fn);
-      return () => {
-        const current = listeners[event];
-        if (current) {
-          const index = current.indexOf(fn);
-          if (index !== -1) current.splice(index, 1);
-        }
-      };
-    },
-    off(event, fn) {
-      const current = listeners[event];
-      if (!current) return false;
-      const index = current.indexOf(fn);
-      if (index === -1) return false;
-      current.splice(index, 1);
-      return true;
-    },
-    emit(event, ...args) {
-      const current = listeners[event];
-      if (!current) return;
-      for (const fn of current.slice()) fn(...args);
-    }
-  };
-}
-const UNIT_PATTERN = /^[\d.]+(?:px|%|vw|vh|vmin|vmax|em|rem)$/;
-/**
- * Normalize a size option to a CSS length string.
- * Accepts numbers (treated as px) or strings with px/%, vw/vh/vmin/vmax, em/rem.
- */
-function parseSize(value) {
-  if (typeof value === 'number') {
-    if (!Number.isFinite(value) || value < 0) throw new Error(`Invalid size: ${value}`);
-    return `${value}px`;
-  }
-  if (typeof value !== 'string') throw new Error(`Invalid size: ${String(value)}`);
-  const trimmed = value.trim();
-  if (!trimmed) throw new Error('Invalid size: empty string');
-  if (/^\d+(?:\.\d+)?$/.test(trimmed)) return `${trimmed}px`;
-  if (!UNIT_PATTERN.test(trimmed)) {
-    throw new Error(`Invalid size or unsupported unit: "${value}" (use px, %, vw, vh, vmin, vmax, em, rem)`);
-  }
-  return trimmed;
-}
-const QUALITY_TIERS = {
-  low: { dpr: 1 },
-  medium: { dpr: 1.5 },
-  high: { dpr: 2 }
-};
-function autoDprCap() {
-  const nav = typeof navigator !== 'undefined' ? navigator : null;
-  const memory = nav && typeof nav.deviceMemory === 'number' ? nav.deviceMemory : 8;
-  const cores = nav && typeof nav.hardwareConcurrency === 'number' ? nav.hardwareConcurrency : 8;
-  return memory <= 4 || cores <= 4 ? 1.5 : 2;
-}
-function dprCapFor(quality) {
-  if (quality === 'auto') return autoDprCap();
-  const tier = QUALITY_TIERS[quality] || QUALITY_TIERS.medium;
-  return tier.dpr;
-}
-/**
- * Merge defaults < preset < user. Unknown user keys are preserved so the
- * component API can grow (new props, cssVars, callbacks) without a breaking
- * change.
- */
-function normalizeOptions(defaults, preset, user) {
-  // undefined means "not provided" (e.g. Vue $props with unset props):
-  // drop those keys before merging so defaults/preset values survive.
-  const omitUndefined = (source) => {
-    const result = {};
-    for (const key of Object.keys(source)) {
-      if (source[key] !== undefined) result[key] = source[key];
-    }
-    return result;
-  };
-  const presetOptions = omitUndefined(preset && typeof preset === 'object' ? preset : {});
-  const userOptions = omitUndefined(user && typeof user === 'object' ? user : {});
-  return { ...defaults, ...presetOptions, ...userOptions };
-}
-/**
- * 公共色板：NC-01~NC-06 的四色组（底色 / 主色 / 辅色 / 高光色）。
- * Capsule 预置与 dlc-color 等组件共用，新增色板只改这里。
- */
-const PALETTES$1 = {
-  original: ['#FFF3EA', '#F5B27A', '#F67BC6', '#A978E8'],
-  ocean: ['#EAF6FF', '#8FD0FF', '#3B87F6', '#6B58E9'],
-  klein: ['#EDF2FF', '#2F58D5', '#1B2040', '#E07A43'],
-  ultraviolet: ['#F2EEFF', '#B99AF1', '#8F74DB', '#D7D85C'],
-  chrome: ['#F5F6F8', '#B9C0CC', '#7F8793', '#4A4F59'],
-  plus: ['#FFF0E6', '#F6C26B', '#F98A64', '#E86D74']
+/**
+ * Tiny event emitter. Accepts any event name so the API stays open for
+ * future events (hover, click, custom) without breaking changes.
+ */
+function createEmitter() {
+  // Plain object storage (no Map/Set) so the legacy build has no API
+  // dependencies beyond what IE11 provides.
+  const listeners = Object.create(null);
+  return {
+    on(event, fn) {
+      if (!listeners[event]) listeners[event] = [];
+      listeners[event].push(fn);
+      return () => {
+        const current = listeners[event];
+        if (current) {
+          const index = current.indexOf(fn);
+          if (index !== -1) current.splice(index, 1);
+        }
+      };
+    },
+    off(event, fn) {
+      const current = listeners[event];
+      if (!current) return false;
+      const index = current.indexOf(fn);
+      if (index === -1) return false;
+      current.splice(index, 1);
+      return true;
+    },
+    emit(event, ...args) {
+      const current = listeners[event];
+      if (!current) return;
+      for (const fn of current.slice()) fn(...args);
+    }
+  };
+}
+const UNIT_PATTERN = /^[\d.]+(?:px|%|vw|vh|vmin|vmax|em|rem)$/;
+/**
+ * Normalize a size option to a CSS length string.
+ * Accepts numbers (treated as px) or strings with px/%, vw/vh/vmin/vmax, em/rem.
+ */
+function parseSize(value) {
+  if (typeof value === 'number') {
+    if (!Number.isFinite(value) || value < 0) throw new Error(`Invalid size: ${value}`);
+    return `${value}px`;
+  }
+  if (typeof value !== 'string') throw new Error(`Invalid size: ${String(value)}`);
+  const trimmed = value.trim();
+  if (!trimmed) throw new Error('Invalid size: empty string');
+  if (/^\d+(?:\.\d+)?$/.test(trimmed)) return `${trimmed}px`;
+  if (!UNIT_PATTERN.test(trimmed)) {
+    throw new Error(`Invalid size or unsupported unit: "${value}" (use px, %, vw, vh, vmin, vmax, em, rem)`);
+  }
+  return trimmed;
+}
+const QUALITY_TIERS = {
+  low: { dpr: 1 },
+  medium: { dpr: 1.5 },
+  high: { dpr: 2 }
+};
+function autoDprCap() {
+  const nav = typeof navigator !== 'undefined' ? navigator : null;
+  const memory = nav && typeof nav.deviceMemory === 'number' ? nav.deviceMemory : 8;
+  const cores = nav && typeof nav.hardwareConcurrency === 'number' ? nav.hardwareConcurrency : 8;
+  return memory <= 4 || cores <= 4 ? 1.5 : 2;
+}
+function dprCapFor(quality) {
+  if (quality === 'auto') return autoDprCap();
+  const tier = QUALITY_TIERS[quality] || QUALITY_TIERS.medium;
+  return tier.dpr;
+}
+function effectiveDprCap(quality, renderScale = 1) {
+  const scale = Number(renderScale);
+  const normalizedScale = Number.isFinite(scale) ? Math.min(1, Math.max(0.25, scale)) : 1;
+  return Math.max(0.5, dprCapFor(quality) * normalizedScale);
+}
+/**
+ * Merge defaults < preset < user. Unknown user keys are preserved so the
+ * component API can grow (new props, cssVars, callbacks) without a breaking
+ * change.
+ */
+function normalizeOptions(defaults, preset, user) {
+  // undefined means "not provided" (e.g. Vue $props with unset props):
+  // drop those keys before merging so defaults/preset values survive.
+  const omitUndefined = (source) => {
+    const result = {};
+    for (const key of Object.keys(source)) {
+      if (source[key] !== undefined) result[key] = source[key];
+    }
+    return result;
+  };
+  const presetOptions = omitUndefined(preset && typeof preset === 'object' ? preset : {});
+  const userOptions = omitUndefined(user && typeof user === 'object' ? user : {});
+  return { ...defaults, ...presetOptions, ...userOptions };
+}
+/**
+ * 公共色板：NC-01~NC-06 的四色组（底色 / 主色 / 辅色 / 高光色）。
+ * Capsule 预置与 dlc-color 等组件共用，新增色板只改这里。
+ */
+const PALETTES$1 = {
+  original: ['#FFF3EA', '#F5B27A', '#F67BC6', '#A978E8'],
+  ocean: ['#EAF6FF', '#8FD0FF', '#3B87F6', '#6B58E9'],
+  klein: ['#EDF2FF', '#2F58D5', '#1B2040', '#E07A43'],
+  ultraviolet: ['#F2EEFF', '#B99AF1', '#8F74DB', '#D7D85C'],
+  chrome: ['#F5F6F8', '#B9C0CC', '#7F8793', '#4A4F59'],
+  plus: ['#FFF0E6', '#F6C26B', '#F98A64', '#E86D74']
 };
-/**
- * Capsule 预置：仅星云材质 NC-01~NC-06（NC-07~09 aurora 已移除）。
- * 颜色引用公共色板，seed/speed 决定形态与流速。
- */
+/**
+ * Capsule 预置：仅星云材质 NC-01~NC-06（NC-07~09 aurora 已移除）。
+ * 颜色引用公共色板，seed/speed 决定形态与流速。
+ */
 const CAPSULE_PRESETS = [
   { id: 'original', code: 'NC-01', name: '初光', group: 'warm', seed: 1.7, speed: 0.5, colors: [...PALETTES$1.original] },
   { id: 'ocean', code: 'NC-02', name: '沧溟', group: 'cold', seed: 8.2, speed: 0.48, colors: [...PALETTES$1.ocean] },
@@ -121,47 +127,47 @@ const CAPSULE_PRESETS = [
   { id: 'plus', code: 'NC-06', name: '熔金', group: 'warm', seed: 51.3, speed: 0.5, colors: [...PALETTES$1.plus] }
 ];
-const PROGRESS_PRESETS = [
+const PROGRESS_PRESETS = [
   {
     id: 'model-training',
     code: 'NC-10',
     name: '星火',
-    subtitle: 'SHA 4.5 + 100 2026 TKN',
-    group: 'progress',
-    initialProgress: 43,
-    edgeStyle: 'flow',
-    colors: ['#2B1025', '#FF3F94', '#FF8A3D', '#FFF06A']
-  },
+    subtitle: 'SHA 4.5 + 100 2026 TKN',
+    group: 'progress',
+    initialProgress: 43,
+    edgeStyle: 'flow',
+    colors: ['#2B1025', '#FF3F94', '#FF8A3D', '#FFF06A']
+  },
   {
     id: 'agent-migration',
     code: 'NC-11',
     name: '迁流',
-    subtitle: 'TRANSFERRING PROTOCOL',
-    group: 'progress',
-    initialProgress: 33,
-    edgeStyle: 'flow',
-    colors: ['#101C37', '#245BFF', '#00CFFF', '#5DFFE6']
-  },
+    subtitle: 'TRANSFERRING PROTOCOL',
+    group: 'progress',
+    initialProgress: 33,
+    edgeStyle: 'flow',
+    colors: ['#101C37', '#245BFF', '#00CFFF', '#5DFFE6']
+  },
   {
     id: 'visual-training',
     code: 'NC-12',
     name: '幻境',
-    subtitle: 'GENERATING POWER ++',
-    group: 'progress',
-    initialProgress: 58,
-    edgeStyle: 'flow',
-    colors: ['#21142D', '#7042FF', '#42F58D', '#C4FF8A']
-  },
+    subtitle: 'GENERATING POWER ++',
+    group: 'progress',
+    initialProgress: 58,
+    edgeStyle: 'flow',
+    colors: ['#21142D', '#7042FF', '#42F58D', '#C4FF8A']
+  },
   {
     id: 'tide',
     code: 'NC-13',
     name: '汐潮',
-    subtitle: 'MOON PULL / COAST',
-    group: 'progress',
-    initialProgress: 30,
-    edgeStyle: 'tide',
-    colors: ['#0A2239', '#2E9BFF', '#7FE3FF', '#EAF9FF']
-  }
+    subtitle: 'MOON PULL / COAST',
+    group: 'progress',
+    initialProgress: 30,
+    edgeStyle: 'tide',
+    colors: ['#0A2239', '#2E9BFF', '#7FE3FF', '#EAF9FF']
+  }
 ];
 const PRESETS = CAPSULE_PRESETS;
@@ -193,6 +199,11 @@ const DEFAULTS = {
     height: 160,
     quality: 'auto',
     renderer: 'auto',
+    renderScale: 1,
+    powerPreference: 'high-performance',
+    fps: 60,
+    paused: false,
+    static: false,
     respectReducedMotion: true,
     mouseColor: true,
     textRatio: 39
@@ -202,13 +213,22 @@ const DEFAULTS = {
     height: 104,
     min: 0,
     max: 100,
+    step: 'any',
     draggable: true,
+    keyboard: true,
     disabled: false,
     readonly: false,
+    direction: 'ltr',
+    precision: 0,
     valueSuffix: '%',
     edgeStyle: 'flow',
     quality: 'auto',
     renderer: 'auto',
+    renderScale: 1,
+    powerPreference: 'high-performance',
+    fps: 60,
+    paused: false,
+    static: false,
     textRatio: 54,
     showValue: true,
     respectReducedMotion: true
@@ -223,8 +243,8 @@ const DEFAULTS = {
 const COPY = {
   brandName: '画境观屿',
   valueSuffix: '%',
-  progressAria: '{brand} {code} 加载进度',
-  capsuleAria: '打开 {name} 沉浸预览'
+  progressAria: '{brand} {code} 加载进度',
+  capsuleAria: '打开 {name} 沉浸预览'
 };
 /**
@@ -459,231 +479,254 @@ function validateColors(colors) {
     && colors.every((color) => normalizeColor(color) !== null);
 }
-const VERTEX_SHADER$1 = `#version 300 es
-in vec2 a_position;
-out vec2 v_uv;
-void main() {
-  v_uv = a_position * 0.5 + 0.5;
-  gl_Position = vec4(a_position, 0.0, 1.0);
-}`;
-const FRAGMENT_SHADER$1 = `#version 300 es
-precision highp float;
-in vec2 v_uv;
-out vec4 outColor;
-uniform vec2 u_resolution;
-uniform float u_time;
-uniform float u_seed;
-uniform float u_motion;
-uniform vec2 u_pointer;
-uniform vec3 u_colorA;
-uniform vec3 u_colorB;
-uniform vec3 u_colorC;
-uniform vec3 u_colorD;
-float hash21(vec2 p) {
-  p = fract(p * vec2(123.34, 456.21));
-  p += dot(p, p + 45.32 + u_seed);
-  return fract(p.x * p.y);
-}
-float noise(vec2 p) {
-  vec2 i = floor(p);
-  vec2 f = fract(p);
-  f = f * f * (3.0 - 2.0 * f);
-  float a = hash21(i);
-  float b = hash21(i + vec2(1.0, 0.0));
-  float c = hash21(i + vec2(0.0, 1.0));
-  float d = hash21(i + vec2(1.0, 1.0));
-  return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
-}
-float fbm(vec2 p) {
-  float value = 0.0;
-  float amplitude = 0.52;
-  mat2 rotation = mat2(0.80, 0.60, -0.60, 0.80);
-  for (int i = 0; i < 6; i++) {
-    value += amplitude * noise(p);
-    p = rotation * p * 2.03 + 17.7;
-    amplitude *= 0.5;
-  }
-  return value;
-}
-float gaussian(float value, float center, float width) {
-  return exp(-pow(value - center, 2.0) / max(width, 0.0001));
-}
-vec3 palette(float t) {
-  t = clamp(t, 0.0, 1.0);
-  vec3 shadow = mix(u_colorA, u_colorB, smoothstep(0.06, 0.62, t));
-  vec3 body = mix(u_colorB, u_colorC, smoothstep(0.30, 0.82, t));
-  vec3 highlight = mix(u_colorC, u_colorD, smoothstep(0.74, 1.0, t));
-  vec3 restrained = mix(shadow, body, smoothstep(0.26, 0.72, t));
-  return mix(restrained, highlight, smoothstep(0.78, 0.97, t));
-}
-vec3 renderNebula(vec2 uv, vec2 p, vec2 pointer, float distanceToPointer, float t) {
-  vec2 delta = p - pointer;
-  float influence = exp(-distanceToPointer * 4.6) * u_motion;
-  float angle = influence * 1.7;
-  mat2 swirl = mat2(cos(angle), -sin(angle), sin(angle), cos(angle));
-  p = pointer + swirl * delta;
-  p += normalize(delta + 0.0001) * influence * 0.08;
-  vec2 drift = vec2(t * 0.22, -t * 0.13);
-  vec2 q = vec2(
-    fbm(p * 1.35 + drift + u_seed),
-    fbm(p * 1.35 + vec2(5.2, 1.3) - drift * 0.85)
-  );
-  vec2 r = vec2(
-    fbm(p * 2.0 + 3.6 * q + vec2(1.7, 9.2) + t * 0.10),
-    fbm(p * 2.0 + 3.0 * q + vec2(8.3, 2.8) - t * 0.085)
-  );
-  float cloud = fbm(p * 1.7 + 4.2 * r);
-  float veins = fbm(p * 4.0 - 2.0 * q + t * 0.065);
-  float nebula = smoothstep(0.18, 0.91, cloud * 0.9 + veins * 0.22);
-  vec3 color = palette(nebula);
-  color += u_colorD * pow(max(cloud - 0.63, 0.0), 2.0) * 1.05;
-  color *= 0.78 + 0.34 * smoothstep(0.15, 0.9, veins);
-  vec2 starGrid = floor((uv + vec2(u_seed * 0.013, 0.0)) * vec2(132.0, 58.0));
-  vec2 starCell = fract(uv * vec2(132.0, 58.0)) - 0.5;
-  float starRandom = hash21(starGrid);
-  float starShape = smoothstep(0.075, 0.0, length(starCell));
-  float starMask = step(0.989, starRandom) * starShape;
-  float twinkle = 0.35 + 0.65 * sin(t * (1.0 + starRandom * 2.4) + starRandom * 40.0) * 0.5 + 0.5;
-  color += starMask * twinkle * mix(u_colorC, u_colorD, starRandom) * 1.05;
-  float pointerGlow = exp(-distanceToPointer * 7.0) * u_motion;
-  color += u_colorD * pointerGlow * 0.28;
-  return color;
-}
-void main() {
-  vec2 uv = v_uv;
-  vec2 p = uv - 0.5;
-  p.x *= u_resolution.x / max(u_resolution.y, 1.0);
-  vec2 pointer = u_pointer - 0.5;
-  pointer.x *= u_resolution.x / max(u_resolution.y, 1.0);
-  float distanceToPointer = length(p - pointer);
-  vec3 color = renderNebula(uv, p, pointer, distanceToPointer, u_time);
-  float vignette = smoothstep(0.94, 0.18, length((uv - 0.5) * vec2(1.0, 1.35)));
-  color *= 0.70 + vignette * 0.42;
-  color = pow(max(color, vec3(0.0)), vec3(0.88));
-  outColor = vec4(color, 1.0);
-}`;
-function compileShader$1(gl, type, source) {
-  const shader = gl.createShader(type);
-  gl.shaderSource(shader, source);
-  gl.compileShader(shader);
-  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-    const message = gl.getShaderInfoLog(shader) || 'Unknown shader compile error';
-    gl.deleteShader(shader);
-    throw new Error(message);
-  }
-  return shader;
-}
-function createProgram$1(gl) {
-  const vertex = compileShader$1(gl, gl.VERTEX_SHADER, VERTEX_SHADER$1);
-  const fragment = compileShader$1(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER$1);
-  const program = gl.createProgram();
-  gl.attachShader(program, vertex);
-  gl.attachShader(program, fragment);
-  gl.linkProgram(program);
-  gl.deleteShader(vertex);
-  gl.deleteShader(fragment);
-  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
-    const message = gl.getProgramInfoLog(program) || 'Unknown program link error';
-    gl.deleteProgram(program);
-    throw new Error(message);
-  }
-  return program;
-}
-class CosmicRenderer {
-  constructor(canvas, preset, options = {}) {
-    this.canvas = canvas;
-    this.preset = { ...preset };
-    this.options = { dprCap: 1.75, mouseColor: true, ...options };
-    this.gl = canvas.getContext('webgl2', {
-      alpha: false,
-      antialias: false,
-      depth: false,
-      powerPreference: 'high-performance',
-      preserveDrawingBuffer: false
-    });
-    if (!this.gl) throw new Error('WebGL2 is not available');
-    this.program = createProgram$1(this.gl);
-    this.locations = this.#getLocations();
-    this.pointer = [0.72, 0.45];
-    this.pointerTarget = [...this.pointer];
-    this.motion = 0;
-    this.motionTarget = 0;
-    this.timeOffset = preset.seed * 0.73;
-    this.visible = true;
-    this.disposed = false;
-    this.#setupGeometry();
-    this.#bindEvents();
-    this.resize();
-  }
-  #getLocations() {
-    const gl = this.gl;
-    const uniform = (name) => gl.getUniformLocation(this.program, name);
-    return {
-      position: gl.getAttribLocation(this.program, 'a_position'),
-      resolution: uniform('u_resolution'),
-      time: uniform('u_time'),
-      seed: uniform('u_seed'),
-      motion: uniform('u_motion'),
-      pointer: uniform('u_pointer'),
-      colorA: uniform('u_colorA'),
-      colorB: uniform('u_colorB'),
-      colorC: uniform('u_colorC'),
-      colorD: uniform('u_colorD')
-    };
-  }
-  #setupGeometry() {
-    const gl = this.gl;
-    const vertices = new Float32Array([-1, -1, 3, -1, -1, 3]);
-    this.buffer = gl.createBuffer();
-    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
-    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
-  }
-  #bindEvents() {
-    if (this.options.mouseColor === false) return;
-    this.eventTarget = this.options.eventTarget || this.canvas.parentElement || this.canvas;
-    this.onPointerMove = (event) => {
-      const rect = this.canvas.getBoundingClientRect();
-      this.pointerTarget[0] = (event.clientX - rect.left) / Math.max(rect.width, 1);
-      this.pointerTarget[1] = 1 - (event.clientY - rect.top) / Math.max(rect.height, 1);
-      this.motionTarget = 1;
-    };
-    this.onPointerLeave = () => { this.motionTarget = 0; };
-    this.eventTarget.addEventListener('pointermove', this.onPointerMove, { passive: true });
-    this.eventTarget.addEventListener('pointerdown', this.onPointerMove, { passive: true });
-    this.eventTarget.addEventListener('pointerleave', this.onPointerLeave, { passive: true });
-  }
-  setPreset(preset) {
-    this.preset = { ...preset };
-    this.timeOffset = preset.seed * 0.73;
-  }
+const VERTEX_SHADER$1 = `#version 300 es
+in vec2 a_position;
+out vec2 v_uv;
+void main() {
+  v_uv = a_position * 0.5 + 0.5;
+  gl_Position = vec4(a_position, 0.0, 1.0);
+}`;
+const FRAGMENT_SHADER$1 = `#version 300 es
+precision highp float;
+in vec2 v_uv;
+out vec4 outColor;
+uniform vec2 u_resolution;
+uniform float u_time;
+uniform float u_seed;
+uniform float u_motion;
+uniform vec2 u_pointer;
+uniform vec3 u_colorA;
+uniform vec3 u_colorB;
+uniform vec3 u_colorC;
+uniform vec3 u_colorD;
+float hash21(vec2 p) {
+  p = fract(p * vec2(123.34, 456.21));
+  p += dot(p, p + 45.32 + u_seed);
+  return fract(p.x * p.y);
+}
+float noise(vec2 p) {
+  vec2 i = floor(p);
+  vec2 f = fract(p);
+  f = f * f * (3.0 - 2.0 * f);
+  float a = hash21(i);
+  float b = hash21(i + vec2(1.0, 0.0));
+  float c = hash21(i + vec2(0.0, 1.0));
+  float d = hash21(i + vec2(1.0, 1.0));
+  return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
+}
+float fbm(vec2 p) {
+  float value = 0.0;
+  float amplitude = 0.52;
+  mat2 rotation = mat2(0.80, 0.60, -0.60, 0.80);
+  for (int i = 0; i < 6; i++) {
+    value += amplitude * noise(p);
+    p = rotation * p * 2.03 + 17.7;
+    amplitude *= 0.5;
+  }
+  return value;
+}
+float gaussian(float value, float center, float width) {
+  return exp(-pow(value - center, 2.0) / max(width, 0.0001));
+}
+vec3 palette(float t) {
+  t = clamp(t, 0.0, 1.0);
+  vec3 shadow = mix(u_colorA, u_colorB, smoothstep(0.06, 0.62, t));
+  vec3 body = mix(u_colorB, u_colorC, smoothstep(0.30, 0.82, t));
+  vec3 highlight = mix(u_colorC, u_colorD, smoothstep(0.74, 1.0, t));
+  vec3 restrained = mix(shadow, body, smoothstep(0.26, 0.72, t));
+  return mix(restrained, highlight, smoothstep(0.78, 0.97, t));
+}
+vec3 renderNebula(vec2 uv, vec2 p, vec2 pointer, float distanceToPointer, float t) {
+  vec2 delta = p - pointer;
+  float influence = exp(-distanceToPointer * 4.6) * u_motion;
+  float angle = influence * 1.7;
+  mat2 swirl = mat2(cos(angle), -sin(angle), sin(angle), cos(angle));
+  p = pointer + swirl * delta;
+  p += normalize(delta + 0.0001) * influence * 0.08;
+  vec2 drift = vec2(t * 0.22, -t * 0.13);
+  vec2 q = vec2(
+    fbm(p * 1.35 + drift + u_seed),
+    fbm(p * 1.35 + vec2(5.2, 1.3) - drift * 0.85)
+  );
+  vec2 r = vec2(
+    fbm(p * 2.0 + 3.6 * q + vec2(1.7, 9.2) + t * 0.10),
+    fbm(p * 2.0 + 3.0 * q + vec2(8.3, 2.8) - t * 0.085)
+  );
+  float cloud = fbm(p * 1.7 + 4.2 * r);
+  float veins = fbm(p * 4.0 - 2.0 * q + t * 0.065);
+  float nebula = smoothstep(0.18, 0.91, cloud * 0.9 + veins * 0.22);
+  vec3 color = palette(nebula);
+  color += u_colorD * pow(max(cloud - 0.63, 0.0), 2.0) * 1.05;
+  color *= 0.78 + 0.34 * smoothstep(0.15, 0.9, veins);
+  vec2 starGrid = floor((uv + vec2(u_seed * 0.013, 0.0)) * vec2(132.0, 58.0));
+  vec2 starCell = fract(uv * vec2(132.0, 58.0)) - 0.5;
+  float starRandom = hash21(starGrid);
+  float starShape = smoothstep(0.075, 0.0, length(starCell));
+  float starMask = step(0.989, starRandom) * starShape;
+  float twinkle = 0.35 + 0.65 * sin(t * (1.0 + starRandom * 2.4) + starRandom * 40.0) * 0.5 + 0.5;
+  color += starMask * twinkle * mix(u_colorC, u_colorD, starRandom) * 1.05;
+  float pointerGlow = exp(-distanceToPointer * 7.0) * u_motion;
+  color += u_colorD * pointerGlow * 0.28;
+  return color;
+}
+void main() {
+  vec2 uv = v_uv;
+  vec2 p = uv - 0.5;
+  p.x *= u_resolution.x / max(u_resolution.y, 1.0);
+  vec2 pointer = u_pointer - 0.5;
+  pointer.x *= u_resolution.x / max(u_resolution.y, 1.0);
+  float distanceToPointer = length(p - pointer);
+  vec3 color = renderNebula(uv, p, pointer, distanceToPointer, u_time);
+  float vignette = smoothstep(0.94, 0.18, length((uv - 0.5) * vec2(1.0, 1.35)));
+  color *= 0.70 + vignette * 0.42;
+  color = pow(max(color, vec3(0.0)), vec3(0.88));
+  outColor = vec4(color, 1.0);
+}`;
+function compileShader$1(gl, type, source) {
+  const shader = gl.createShader(type);
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    const message = gl.getShaderInfoLog(shader) || 'Unknown shader compile error';
+    gl.deleteShader(shader);
+    throw new Error(message);
+  }
+  return shader;
+}
+function createProgram$1(gl) {
+  const vertex = compileShader$1(gl, gl.VERTEX_SHADER, VERTEX_SHADER$1);
+  const fragment = compileShader$1(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER$1);
+  const program = gl.createProgram();
+  gl.attachShader(program, vertex);
+  gl.attachShader(program, fragment);
+  gl.linkProgram(program);
+  gl.deleteShader(vertex);
+  gl.deleteShader(fragment);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    const message = gl.getProgramInfoLog(program) || 'Unknown program link error';
+    gl.deleteProgram(program);
+    throw new Error(message);
+  }
+  return program;
+}
+class CosmicRenderer {
+  constructor(canvas, preset, options = {}) {
+    this.canvas = canvas;
+    this.preset = { ...preset };
+    this.options = { dprCap: 1.75, mouseColor: true, ...options };
+    this.gl = canvas.getContext('webgl2', {
+      alpha: false,
+      antialias: false,
+      depth: false,
+      powerPreference: this.options.powerPreference || 'high-performance',
+      preserveDrawingBuffer: false
+    });
+    if (!this.gl) throw new Error('WebGL2 is not available');
+    this.program = createProgram$1(this.gl);
+    this.locations = this.#getLocations();
+    this.pointer = [0.72, 0.45];
+    this.pointerTarget = [...this.pointer];
+    this.motion = 0;
+    this.motionTarget = 0;
+    this.timeOffset = preset.seed * 0.73;
+    this.colors = preset.colors.map(hexToRgb01$1);
+    this.visible = true;
+    this.disposed = false;
+    this.#setupGeometry();
+    this.#bindEvents();
+    this.#bindContextEvents();
+    this.resize();
+  }
+  #getLocations() {
+    const gl = this.gl;
+    const uniform = (name) => gl.getUniformLocation(this.program, name);
+    return {
+      position: gl.getAttribLocation(this.program, 'a_position'),
+      resolution: uniform('u_resolution'),
+      time: uniform('u_time'),
+      seed: uniform('u_seed'),
+      motion: uniform('u_motion'),
+      pointer: uniform('u_pointer'),
+      colorA: uniform('u_colorA'),
+      colorB: uniform('u_colorB'),
+      colorC: uniform('u_colorC'),
+      colorD: uniform('u_colorD')
+    };
+  }
+  #setupGeometry() {
+    const gl = this.gl;
+    const vertices = new Float32Array([-1, -1, 3, -1, -1, 3]);
+    this.buffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
+    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
+  }
+  #bindEvents() {
+    if (this.options.mouseColor === false) return;
+    this.eventTarget = this.options.eventTarget || this.canvas.parentElement || this.canvas;
+    this.onPointerMove = (event) => {
+      const rect = this.canvas.getBoundingClientRect();
+      this.pointerTarget[0] = (event.clientX - rect.left) / Math.max(rect.width, 1);
+      this.pointerTarget[1] = 1 - (event.clientY - rect.top) / Math.max(rect.height, 1);
+      this.motionTarget = 1;
+    };
+    this.onPointerLeave = () => { this.motionTarget = 0; };
+    this.eventTarget.addEventListener('pointermove', this.onPointerMove, { passive: true });
+    this.eventTarget.addEventListener('pointerdown', this.onPointerMove, { passive: true });
+    this.eventTarget.addEventListener('pointerleave', this.onPointerLeave, { passive: true });
+  }
+  #bindContextEvents() {
+    this.onContextLost = (event) => {
+      event.preventDefault();
+      if (this.disposed) return;
+      this.visible = false;
+      if (typeof this.options.onContextLost === 'function') this.options.onContextLost(event);
+    };
+    this.onContextRestored = () => {
+      if (this.disposed) return;
+      this.program = createProgram$1(this.gl);
+      this.locations = this.#getLocations();
+      this.#setupGeometry();
+      this.visible = true;
+      this.resize();
+      if (typeof this.options.onContextRestored === 'function') this.options.onContextRestored();
+    };
+    this.canvas.addEventListener('webglcontextlost', this.onContextLost, false);
+    this.canvas.addEventListener('webglcontextrestored', this.onContextRestored, false);
+  }
+  setPreset(preset) {
+    this.preset = { ...preset };
+    this.colors = preset.colors.map(hexToRgb01$1);
+    this.timeOffset = preset.seed * 0.73;
+  }
   setDprCap(cap) {
     this.options.dprCap = cap;
     this.resize();
@@ -709,123 +752,128 @@ class CosmicRenderer {
   }
   randomize() {
-    this.preset.seed = Math.random() * 100;
-    this.timeOffset = Math.random() * 40;
-  }
-  resize() {
-    const dpr = Math.min(window.devicePixelRatio || 1, this.options.dprCap);
-    const rect = this.canvas.getBoundingClientRect();
-    const width = Math.max(2, Math.round(rect.width * dpr));
-    const height = Math.max(2, Math.round(rect.height * dpr));
-    if (this.canvas.width !== width || this.canvas.height !== height) {
-      this.canvas.width = width;
-      this.canvas.height = height;
-      this.gl.viewport(0, 0, width, height);
-    }
-  }
-  draw(elapsedSeconds, paused = false) {
-    if (this.disposed || !this.visible) return;
-    this.resize();
-    const gl = this.gl;
-    this.pointer[0] += (this.pointerTarget[0] - this.pointer[0]) * 0.08;
-    this.pointer[1] += (this.pointerTarget[1] - this.pointer[1]) * 0.08;
-    this.motion += (this.motionTarget - this.motion) * 0.07;
-    gl.useProgram(this.program);
-    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
-    gl.enableVertexAttribArray(this.locations.position);
-    gl.vertexAttribPointer(this.locations.position, 2, gl.FLOAT, false, 0, 0);
-    const colors = this.preset.colors.map(hexToRgb01$1);
-    gl.uniform2f(this.locations.resolution, this.canvas.width, this.canvas.height);
-    gl.uniform1f(this.locations.time, this.timeOffset + (paused ? 0 : elapsedSeconds * this.preset.speed));
-    gl.uniform1f(this.locations.seed, this.preset.seed);
-    gl.uniform1f(this.locations.motion, this.motion);
-    gl.uniform2f(this.locations.pointer, this.pointer[0], this.pointer[1]);
-    gl.uniform3fv(this.locations.colorA, colors[0]);
-    gl.uniform3fv(this.locations.colorB, colors[1]);
-    gl.uniform3fv(this.locations.colorC, colors[2]);
-    gl.uniform3fv(this.locations.colorD, colors[3]);
-    gl.drawArrays(gl.TRIANGLES, 0, 3);
-  }
-  dispose() {
-    this.disposed = true;
-    const target = this.eventTarget || this.canvas;
-    target.removeEventListener('pointermove', this.onPointerMove);
-    target.removeEventListener('pointerdown', this.onPointerMove);
-    target.removeEventListener('pointerleave', this.onPointerLeave);
-    this.gl.deleteBuffer(this.buffer);
-    this.gl.deleteProgram(this.program);
-    const lose = this.gl.getExtension('WEBGL_lose_context');
-    if (lose) lose.loseContext();
-  }
-}
-function rgb(color, alpha = 1) {
-  const [r, g, b] = hexToRgb01$1(color).map((value) => Math.round(value * 255));
-  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-}
-class FallbackRenderer {
-  constructor(canvas, preset) {
+    this.preset.seed = Math.random() * 100;
+    this.timeOffset = Math.random() * 40;
+  }
+  resize() {
+    const dpr = Math.min(window.devicePixelRatio || 1, this.options.dprCap);
+    const rect = this.canvas.getBoundingClientRect();
+    const width = Math.max(2, Math.round(rect.width * dpr));
+    const height = Math.max(2, Math.round(rect.height * dpr));
+    if (this.canvas.width !== width || this.canvas.height !== height) {
+      this.canvas.width = width;
+      this.canvas.height = height;
+    }
+    this.gl.viewport(0, 0, width, height);
+  }
+  draw(elapsedSeconds, paused = false) {
+    if (this.disposed || !this.visible) return;
+    const gl = this.gl;
+    this.pointer[0] += (this.pointerTarget[0] - this.pointer[0]) * 0.08;
+    this.pointer[1] += (this.pointerTarget[1] - this.pointer[1]) * 0.08;
+    this.motion += (this.motionTarget - this.motion) * 0.07;
+    gl.useProgram(this.program);
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
+    gl.enableVertexAttribArray(this.locations.position);
+    gl.vertexAttribPointer(this.locations.position, 2, gl.FLOAT, false, 0, 0);
+    gl.uniform2f(this.locations.resolution, this.canvas.width, this.canvas.height);
+    gl.uniform1f(this.locations.time, this.timeOffset + (paused ? 0 : elapsedSeconds * this.preset.speed));
+    gl.uniform1f(this.locations.seed, this.preset.seed);
+    gl.uniform1f(this.locations.motion, this.motion);
+    gl.uniform2f(this.locations.pointer, this.pointer[0], this.pointer[1]);
+    gl.uniform3fv(this.locations.colorA, this.colors[0]);
+    gl.uniform3fv(this.locations.colorB, this.colors[1]);
+    gl.uniform3fv(this.locations.colorC, this.colors[2]);
+    gl.uniform3fv(this.locations.colorD, this.colors[3]);
+    gl.drawArrays(gl.TRIANGLES, 0, 3);
+  }
+  dispose() {
+    this.disposed = true;
+    const target = this.eventTarget || this.canvas;
+    target.removeEventListener('pointermove', this.onPointerMove);
+    target.removeEventListener('pointerdown', this.onPointerMove);
+    target.removeEventListener('pointerleave', this.onPointerLeave);
+    this.canvas.removeEventListener('webglcontextlost', this.onContextLost, false);
+    this.canvas.removeEventListener('webglcontextrestored', this.onContextRestored, false);
+    this.gl.deleteBuffer(this.buffer);
+    this.gl.deleteProgram(this.program);
+    const lose = this.gl.getExtension('WEBGL_lose_context');
+    if (lose) lose.loseContext();
+  }
+}
+function rgb(color, alpha = 1) {
+  const [r, g, b] = hexToRgb01$1(color).map((value) => Math.round(value * 255));
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+class FallbackRenderer {
+  constructor(canvas, preset, options = {}) {
     this.canvas = canvas;
     this.preset = preset;
     this.context = canvas.getContext('2d');
     this.visible = true;
     this.timePhase = 0;
+    this.dprCap = options.dprCap || 1.5;
+  }
+  resize() {
+    const rect = this.canvas.getBoundingClientRect();
+    const dpr = Math.min(window.devicePixelRatio || 1, this.dprCap);
+    const width = Math.max(2, Math.round(rect.width * dpr));
+    const height = Math.max(2, Math.round(rect.height * dpr));
+    if (this.canvas.width !== width || this.canvas.height !== height) {
+      this.canvas.width = width;
+      this.canvas.height = height;
+    }
   }
-  resize() {
-    const rect = this.canvas.getBoundingClientRect();
-    const dpr = Math.min(window.devicePixelRatio || 1, 1.5);
-    const width = Math.max(2, Math.round(rect.width * dpr));
-    const height = Math.max(2, Math.round(rect.height * dpr));
-    if (this.canvas.width !== width || this.canvas.height !== height) {
-      this.canvas.width = width;
-      this.canvas.height = height;
-    }
-  }
   drawNebula(time) {
     const ctx = this.context;
     const { width, height } = this.canvas;
     const t = (time + this.timePhase) * (this.preset.speed || 1);
     const phase = (this.preset.seed || 0) * 0.7;
     const gradient = ctx.createLinearGradient(0, 0, width, height);
-    gradient.addColorStop(0, this.preset.colors[0]);
-    gradient.addColorStop(0.38, this.preset.colors[1]);
-    gradient.addColorStop(0.72, this.preset.colors[2]);
-    gradient.addColorStop(1, this.preset.colors[3]);
-    ctx.fillStyle = gradient;
-    ctx.fillRect(0, 0, width, height);
+    gradient.addColorStop(0, this.preset.colors[0]);
+    gradient.addColorStop(0.38, this.preset.colors[1]);
+    gradient.addColorStop(0.72, this.preset.colors[2]);
+    gradient.addColorStop(1, this.preset.colors[3]);
+    ctx.fillStyle = gradient;
+    ctx.fillRect(0, 0, width, height);
     ctx.globalCompositeOperation = 'screen';
     for (let index = 0; index < 6; index += 1) {
       const x = (0.5 + 0.45 * Math.sin(t * 0.32 + index * 1.7 + phase)) * width;
       const y = (0.5 + 0.4 * Math.cos(t * 0.25 + index + phase)) * height;
-      const radius = Math.max(width, height) * (0.08 + (index % 3) * 0.04);
-      const glow = ctx.createRadialGradient(x, y, 0, x, y, radius);
-      glow.addColorStop(0, rgb(this.preset.colors[(index + 1) % 4], 0.24));
-      glow.addColorStop(1, rgb(this.preset.colors[index % 4], 0));
-      ctx.fillStyle = glow;
-      ctx.fillRect(x - radius, y - radius, radius * 2, radius * 2);
-    }
-    ctx.globalCompositeOperation = 'source-over';
-  }
-  draw(time) {
-    if (!this.visible) return;
-    this.resize();
-    this.drawNebula(time);
-  }
-  setPreset(preset) {
-    this.preset = preset;
-  }
+      const radius = Math.max(width, height) * (0.08 + (index % 3) * 0.04);
+      const glow = ctx.createRadialGradient(x, y, 0, x, y, radius);
+      glow.addColorStop(0, rgb(this.preset.colors[(index + 1) % 4], 0.24));
+      glow.addColorStop(1, rgb(this.preset.colors[index % 4], 0));
+      ctx.fillStyle = glow;
+      ctx.fillRect(x - radius, y - radius, radius * 2, radius * 2);
+    }
+    ctx.globalCompositeOperation = 'source-over';
+  }
+  draw(time) {
+    if (!this.visible) return;
+    this.drawNebula(time);
+  }
+  setPreset(preset) {
+    this.preset = preset;
+  }
+  setDprCap(cap) {
+    this.dprCap = cap;
+    this.resize();
+  }
   randomize() {
     if (this.preset) {
       this.preset.seed = Math.random() * 100;
@@ -836,110 +884,129 @@ class FallbackRenderer {
   dispose() {}
 }
-/**
- * Document-level shared rAF scheduler. Every component instance subscribes
- * its own frame callback; the whole page runs ONE animation loop (like the
- * original demo), which avoids jank from many competing rAF loops.
- */
-const subscribers = [];
-let running = false;
-let globallyPaused = false;
-let rafId = 0;
-let last = 0;
-function tick(now) {
-  if (!running) return;
-  const delta = last ? Math.min((now - last) / 1000, 0.05) : 0;
-  last = now;
-  // Schedule the next frame BEFORE running callbacks so one throwing
-  // subscriber can never kill the whole animation loop.
-  rafId = requestAnimationFrame(tick);
-  if (!globallyPaused) {
-  for (const item of subscribers.slice()) {
-    try {
-      if (!item.isPaused()) item.onFrame(delta, now);
-    } catch (error) {
+/**
+ * Document-level shared rAF scheduler. Every component instance subscribes
+ * its own frame callback; the whole page runs ONE animation loop (like the
+ * original demo), which avoids jank from many competing rAF loops.
+ */
+const subscribers = [];
+let running = false;
+let globallyPaused = false;
+let rafId = 0;
+let last = 0;
+function tick(now) {
+  if (!running) return;
+  const activeItems = [];
+  if (!globallyPaused) {
+    for (const item of subscribers.slice()) {
+      try {
+        if (!item.isPaused()) activeItems.push(item);
+      } catch {}
+    }
+  }
+  if (activeItems.length === 0) {
+    running = false;
+    rafId = 0;
+    last = 0;
+    return;
+  }
+  const delta = last ? Math.min((now - last) / 1000, 0.05) : 0;
+  last = now;
+  // Schedule the next frame BEFORE running callbacks so one throwing
+  // subscriber can never kill the whole animation loop.
+  rafId = requestAnimationFrame(tick);
+  for (const item of activeItems) {
+    try {
+      item.onFrame(delta, now);
+    } catch (error) {
       console.warn('[dlc-ui] frame error:', error);
-    }
-  }
-  }
-  if (subscribers.length === 0) {
-    cancelAnimationFrame(rafId);
-    running = false;
-    rafId = 0;
-  }
-}
-function start() {
-  if (running) return;
-  running = true;
-  last = 0;
-  rafId = requestAnimationFrame(tick);
-}
-function pauseAll() {
-  globallyPaused = true;
-}
-function resumeAll() {
-  globallyPaused = false;
-}
-function subscribeScheduler(onFrame, isPaused) {
-  const item = { onFrame, isPaused };
-  subscribers.push(item);
-  start();
-  return () => {
-    const index = subscribers.indexOf(item);
-    if (index !== -1) subscribers.splice(index, 1);
-    if (subscribers.length === 0 && rafId) {
-      cancelAnimationFrame(rafId);
-      running = false;
-      rafId = 0;
-    }
-  };
-}
-/**
- * Gates drawing on "element intersects viewport AND the page tab is visible".
- * Falls back to always-visible when IntersectionObserver is unavailable.
- */
-function createVisibilityGuard(element) {
-  let intersecting = true;
-  let pageVisible = typeof document === 'undefined' || !document.hidden;
-  let disposed = false;
-  let observer = null;
-  if (typeof IntersectionObserver !== 'undefined') {
-    observer = new IntersectionObserver(
-      (entries) => {
-        intersecting = entries.some((entry) => entry.isIntersecting);
-      },
-      { rootMargin: '180px' }
-    );
-    observer.observe(element);
-  }
-  const onVisibilityChange = () => {
-    pageVisible = typeof document !== 'undefined' && !document.hidden;
-  };
-  if (typeof document !== 'undefined') {
-    document.addEventListener('visibilitychange', onVisibilityChange);
-  }
-  return {
-    isVisible() {
-      return intersecting && pageVisible;
-    },
-    dispose() {
-      if (disposed) return;
-      disposed = true;
-      if (observer) observer.disconnect();
-      if (typeof document !== 'undefined') {
-        document.removeEventListener('visibilitychange', onVisibilityChange);
-      }
-    }
-  };
+    }
+  }
+  if (subscribers.length === 0) {
+    cancelAnimationFrame(rafId);
+    running = false;
+    rafId = 0;
+  }
+}
+function start() {
+  if (running) return;
+  running = true;
+  last = 0;
+  rafId = requestAnimationFrame(tick);
+}
+function pauseAll() {
+  globallyPaused = true;
+}
+function resumeAll() {
+  globallyPaused = false;
+  start();
+}
+function wakeScheduler() {
+  start();
+}
+function subscribeScheduler(onFrame, isPaused) {
+  const item = { onFrame, isPaused };
+  subscribers.push(item);
+  start();
+  return () => {
+    const index = subscribers.indexOf(item);
+    if (index !== -1) subscribers.splice(index, 1);
+    if (subscribers.length === 0 && rafId) {
+      cancelAnimationFrame(rafId);
+      running = false;
+      rafId = 0;
+    }
+  };
+}
+/**
+ * Gates drawing on "element intersects viewport AND the page tab is visible".
+ * Falls back to always-visible when IntersectionObserver is unavailable.
+ */
+function createVisibilityGuard(element, onChange = null) {
+  let intersecting = true;
+  let pageVisible = typeof document === 'undefined' || !document.hidden;
+  let disposed = false;
+  let observer = null;
+  if (typeof IntersectionObserver !== 'undefined') {
+    observer = new IntersectionObserver(
+      (entries) => {
+        intersecting = entries.some((entry) => entry.isIntersecting);
+        if (typeof onChange === 'function') onChange();
+      },
+      { rootMargin: '180px' }
+    );
+    observer.observe(element);
+  }
+  const onVisibilityChange = () => {
+    pageVisible = typeof document !== 'undefined' && !document.hidden;
+    if (typeof onChange === 'function') onChange();
+  };
+  if (typeof document !== 'undefined') {
+    document.addEventListener('visibilitychange', onVisibilityChange);
+  }
+  return {
+    isVisible() {
+      return intersecting && pageVisible;
+    },
+    dispose() {
+      if (disposed) return;
+      disposed = true;
+      if (observer) observer.disconnect();
+      if (typeof document !== 'undefined') {
+        document.removeEventListener('visibilitychange', onVisibilityChange);
+      }
+    }
+  };
 }
 /**
@@ -958,30 +1025,96 @@ function nextTick(fn) {
   }
 }
-function prefersReducedMotion$2() {
-  return typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches;
-}
-/**
+function normalizeFps(value, fallback = 60) {
+  const fps = Number(value);
+  if (!Number.isFinite(fps)) return fallback;
+  return Math.min(60, Math.max(1, fps));
+}
+function createFrameGate(initialFps = 60) {
+  let fps = normalizeFps(initialFps);
+  let elapsed = 0;
+  return {
+    shouldDraw(delta) {
+      elapsed += delta;
+      const interval = 1 / fps;
+      if (elapsed + 0.0001 < interval) return false;
+      elapsed %= interval;
+      return true;
+    },
+    setFps(value) {
+      fps = normalizeFps(value, fps);
+      elapsed = 0;
+      return fps;
+    },
+    getFps() {
+      return fps;
+    }
+  };
+}
+function createReducedMotionPreference(enabled, onChange) {
+  const query = enabled && typeof matchMedia !== 'undefined'
+    ? matchMedia('(prefers-reduced-motion: reduce)')
+    : null;
+  const notify = () => {
+    if (typeof onChange === 'function') onChange(Boolean(query && query.matches));
+  };
+  if (query) {
+    if (typeof query.addEventListener === 'function') query.addEventListener('change', notify);
+    else if (typeof query.addListener === 'function') query.addListener(notify);
+  }
+  return {
+    matches() {
+      return Boolean(query && query.matches);
+    },
+    dispose() {
+      if (!query) return;
+      if (typeof query.removeEventListener === 'function') query.removeEventListener('change', notify);
+      else if (typeof query.removeListener === 'function') query.removeListener(notify);
+    }
+  };
+}
+function toFiniteNumber(value) {
+  if (value == null || typeof value === 'boolean') return null;
+  if (typeof value === 'string' && value.trim() === '') return null;
+  const number = Number(value);
+  return Number.isFinite(number) ? number : null;
+}
+/**
  * Mount a cosmic (nebula) capsule into `container`.
  *
  * Options: preset (literary name), width, height (number=px or string with
  * px/%/vw/vh/em/rem), colors, seed, speed, textRatio (0-100, text region
  * width in percent), text (HTML string or DOM nodes for the text slot),
  * colorContent (HTML string or DOM nodes for the color slot), quality,
- * renderer, respectReducedMotion, mouseColor, cssVars.
+ * renderer, quality, renderScale, powerPreference, fps, paused/static,
+ * respectReducedMotion, mouseColor, cssVars.
  */
 function createCapsule(container, options = {}) {
-  if (!container || typeof container.appendChild !== 'function') {
-    throw new Error('createCapsule: container element is required');
-  }
+  if (!container || typeof container.appendChild !== 'function') {
+    throw new Error('createCapsule: container element is required');
+  }
   const preset = { ...getPreset('capsule', options.preset ?? '初光') };
   const merged = normalizeOptions(DEFAULTS.capsule, preset, options);
-  const normalizedColors = merged.colors.map(normalizeColor);
-  if (normalizedColors.every(Boolean)) preset.colors = normalizedColors;
-  preset.seed = merged.seed;
-  preset.speed = merged.speed;
+  const normalizedColors = Array.isArray(merged.colors) ? merged.colors.map(normalizeColor) : [];
+  if (normalizedColors.length === 4 && normalizedColors.every(Boolean)) preset.colors = normalizedColors;
+  const initialSeed = toFiniteNumber(merged.seed);
+  const initialSpeed = toFiniteNumber(merged.speed);
+  if (initialSeed !== null) preset.seed = initialSeed;
+  if (initialSpeed !== null) preset.speed = initialSpeed;
+  merged.colors = [...preset.colors];
+  merged.seed = preset.seed;
+  merged.speed = preset.speed;
+  const optionColors = Array.isArray(options.colors) ? options.colors.map(normalizeColor) : [];
+  let colorOverride = optionColors.length === 4 && optionColors.every(Boolean)
+    ? [...optionColors]
+    : null;
+  let seedOverride = options.seed !== undefined ? toFiniteNumber(options.seed) : null;
+  let speedOverride = options.speed !== undefined ? toFiniteNumber(options.speed) : null;
   let customLabel = typeof options.label === 'string' && options.label ? options.label : null;
   const root = document.createElement('div');
@@ -1029,35 +1162,67 @@ function createCapsule(container, options = {}) {
   root.appendChild(visualLayer);
   root.appendChild(canvas);
   container.appendChild(root);
   const emitter = createEmitter();
-  let paused = merged.respectReducedMotion && prefersReducedMotion$2();
+  let manuallyPaused = merged.paused === true;
+  let reducedPaused = false;
+  let staticMode = merged.static === true;
+  let contextLost = false;
   let disposed = false;
+  let renderOnce = () => {};
   const dirty = {
     preset: false,
     seed: false,
     speed: false,
     colors: false,
     textRatio: false,
-    cssVars: false
+    cssVars: false,
+    mouseColor: false,
+    quality: false,
+    renderScale: false,
+    paused: false,
+    static: false,
+    fps: false
   };
-  let renderer;
-  const useWebgl = merged.renderer !== 'canvas2d';
-  if (useWebgl) {
-    try {
-      renderer = new CosmicRenderer(canvas, merged, { dprCap: dprCapFor(merged.quality) });
-    } catch (error) {
-      renderer = new FallbackRenderer(canvas, merged);
+  let renderer;
+  const useWebgl = merged.renderer !== 'canvas2d';
+  if (useWebgl) {
+    try {
+      renderer = new CosmicRenderer(canvas, merged, {
+        dprCap: effectiveDprCap(merged.quality, merged.renderScale),
+        mouseColor: merged.mouseColor !== false,
+        powerPreference: merged.powerPreference,
+        onContextLost: () => {
+          contextLost = true;
+          emitter.emit('contextlost', {});
+        },
+        onContextRestored: () => {
+          contextLost = false;
+          emitter.emit('contextrestored', {});
+          renderOnce();
+          wakeScheduler();
+        }
+      });
+    } catch (error) {
+      renderer = new FallbackRenderer(canvas, merged, {
+        dprCap: effectiveDprCap(merged.quality, merged.renderScale)
+      });
       nextTick(() => {
         if (disposed) return;
         emitter.emit('error', { message: String(error && error.message ? error.message : error) });
       });
-    }
-  } else {
-    renderer = new FallbackRenderer(canvas, merged);
-  }
+    }
+  } else {
+    renderer = new FallbackRenderer(canvas, merged, {
+      dprCap: effectiveDprCap(merged.quality, merged.renderScale)
+    });
+  }
+  let animationTime = 0;
+  const frameGate = createFrameGate(merged.fps);
+  renderOnce = () => renderer.draw(animationTime);
   const applySize = () => {
     root.style.width = parseSize(merged.width);
     root.style.height = parseSize(merged.height);
@@ -1071,39 +1236,53 @@ function createCapsule(container, options = {}) {
     }
     renderer.resize();
   };
-  applySize();
-  const resizeObserver = typeof ResizeObserver !== 'undefined'
-    ? new ResizeObserver(() => renderer.resize())
-    : null;
-  if (resizeObserver) resizeObserver.observe(root);
-  else window.addEventListener('resize', renderer.resize);
-  const visibility = createVisibilityGuard(root);
+  applySize();
+  const resize = () => {
+    renderer.resize();
+    if (manuallyPaused || reducedPaused || staticMode) renderOnce();
+  };
+  const resizeObserver = typeof ResizeObserver !== 'undefined'
+    ? new ResizeObserver(resize)
+    : null;
+  if (resizeObserver) resizeObserver.observe(root);
+  else window.addEventListener('resize', resize);
+  const visibility = createVisibilityGuard(root, wakeScheduler);
+  const motionPreference = createReducedMotionPreference(
+    merged.respectReducedMotion,
+    (matches) => {
+      reducedPaused = matches;
+      if (matches) renderOnce();
+      else wakeScheduler();
+    }
+  );
+  reducedPaused = motionPreference.matches();
+  const isMotionPaused = () => manuallyPaused || reducedPaused || staticMode || contextLost;
   root.addEventListener('pointerenter', () => emitter.emit('pointerenter', { preset: { ...preset } }));
   root.addEventListener('pointerleave', () => emitter.emit('pointerleave', { preset: { ...preset } }));
-  root.addEventListener('click', (event) => {
-    emitter.emit('click', { event, preset: { ...preset } });
-  });
-  root.addEventListener('pointerdown', (event) => emitter.emit('pointerdown', { event, preset: { ...preset } }));
-  root.addEventListener('pointerup', (event) => emitter.emit('pointerup', { event, preset: { ...preset } }));
-  root.addEventListener('dblclick', (event) => emitter.emit('dblclick', { event, preset: { ...preset } }));
-  let animationTime = 0;
-  const unsubscribe = subscribeScheduler(
-    (delta) => {
-      animationTime += delta;
-      if (visibility.isVisible()) renderer.draw(animationTime);
-    },
-    () => paused
-  );
+  root.addEventListener('click', (event) => {
+    emitter.emit('click', { event, preset: { ...preset } });
+  });
+  root.addEventListener('pointerdown', (event) => emitter.emit('pointerdown', { event, preset: { ...preset } }));
+  root.addEventListener('pointerup', (event) => emitter.emit('pointerup', { event, preset: { ...preset } }));
+  root.addEventListener('dblclick', (event) => emitter.emit('dblclick', { event, preset: { ...preset } }));
+  renderOnce();
+  const unsubscribe = subscribeScheduler(
+    (delta) => {
+      animationTime += delta;
+      if (frameGate.shouldDraw(delta)) renderer.draw(animationTime);
+    },
+    () => isMotionPaused() || !visibility.isVisible()
+  );
   nextTick(() => {
     if (disposed) return;
     emitter.emit('ready', { preset: { ...preset } });
   });
   const syncTheme = () => {
     root.dataset.mode = 'nebula';
     root.dataset.theme = preset.theme || 'light';
@@ -1111,45 +1290,55 @@ function createCapsule(container, options = {}) {
   };
   return {
-    element: root,
-    canvas,
-    preset,
-    on: emitter.on,
-    off: emitter.off,
+    element: root,
+    canvas,
+    preset,
+    on: emitter.on,
+    off: emitter.off,
     setPreset(ref) {
       const next = getPreset('capsule', ref);
       dirty.preset = true;
       Object.assign(preset, next);
+      if (colorOverride) preset.colors = [...colorOverride];
+      if (seedOverride !== null) preset.seed = seedOverride;
+      if (speedOverride !== null) preset.speed = speedOverride;
       const nextColors = preset.colors.map(normalizeColor);
       if (nextColors.every(Boolean)) preset.colors = nextColors;
       renderer.setPreset({ ...preset });
       syncTheme();
       renderer.resize();
+      if (isMotionPaused()) renderOnce();
       emitter.emit('presetchange', { preset: { ...next } });
       return this;
-    },
+    },
     setColors(colors) {
       const next = Array.isArray(colors) ? colors.map(normalizeColor) : [];
       if (next.length !== 4 || next.some((color) => !color)) return this;
       dirty.colors = true;
+      colorOverride = [...next];
       preset.colors = next;
       renderer.setPreset({ ...preset, colors: next });
+      if (isMotionPaused()) renderOnce();
       return this;
     },
     setSeed(seed) {
-      const value = Number(seed);
-      if (!Number.isFinite(value)) return this;
+      const value = toFiniteNumber(seed);
+      if (value === null) return this;
       dirty.seed = true;
+      seedOverride = value;
       preset.seed = value;
       renderer.setPreset({ ...preset });
+      if (isMotionPaused()) renderOnce();
       return this;
     },
     setSpeed(speed) {
-      const value = Number(speed);
-      if (!Number.isFinite(value)) return this;
+      const value = toFiniteNumber(speed);
+      if (value === null) return this;
       dirty.speed = true;
+      speedOverride = value;
       preset.speed = value;
       renderer.setPreset({ ...preset });
+      if (isMotionPaused()) renderOnce();
       return this;
     },
     setText(content) {
@@ -1182,6 +1371,7 @@ function createCapsule(container, options = {}) {
       return this;
     },
     setMouseColor(value) {
+      dirty.mouseColor = true;
       merged.mouseColor = value !== false;
       if (typeof renderer.setMouseColor === 'function') renderer.setMouseColor(merged.mouseColor);
       return this;
@@ -1196,1113 +1386,1331 @@ function createCapsule(container, options = {}) {
         merged.height = height;
       }
       applySize();
+      if (isMotionPaused()) renderOnce();
       return this;
     },
     randomize() {
       this.setSeed(Math.random() * 100);
       return this;
     },
-    pause() {
-      paused = true;
-      return this;
-    },
-    resume() {
-      paused = false;
-      return this;
-    },
-    setQuality(quality) {
-      merged.quality = quality;
-      if (typeof renderer.setDprCap === 'function') renderer.setDprCap(dprCapFor(quality));
-      return this;
-    },
+    pause() {
+      dirty.paused = true;
+      manuallyPaused = true;
+      renderOnce();
+      return this;
+    },
+    resume() {
+      dirty.paused = true;
+      manuallyPaused = false;
+      wakeScheduler();
+      return this;
+    },
+    setPaused(value) {
+      return value ? this.pause() : this.resume();
+    },
+    setStatic(value) {
+      dirty.static = true;
+      staticMode = value === true;
+      merged.static = staticMode;
+      if (staticMode) renderOnce();
+      else wakeScheduler();
+      return this;
+    },
+    setFps(fps) {
+      dirty.fps = true;
+      merged.fps = frameGate.setFps(fps);
+      wakeScheduler();
+      return this;
+    },
+    setQuality(quality) {
+      dirty.quality = true;
+      merged.quality = quality;
+      if (typeof renderer.setDprCap === 'function') {
+        renderer.setDprCap(effectiveDprCap(quality, merged.renderScale));
+      }
+      if (isMotionPaused()) renderOnce();
+      return this;
+    },
+    setRenderScale(renderScale) {
+      const value = Number(renderScale);
+      if (!Number.isFinite(value)) return this;
+      dirty.renderScale = true;
+      merged.renderScale = Math.min(1, Math.max(0.25, value));
+      if (typeof renderer.setDprCap === 'function') {
+        renderer.setDprCap(effectiveDprCap(merged.quality, merged.renderScale));
+      }
+      if (isMotionPaused()) renderOnce();
+      return this;
+    },
     dispose() {
       disposed = true;
       unsubscribe();
-      visibility.dispose();
-      if (resizeObserver) resizeObserver.disconnect();
-      else window.removeEventListener('resize', renderer.resize);
+      visibility.dispose();
+      motionPreference.dispose();
+      if (resizeObserver) resizeObserver.disconnect();
+      else window.removeEventListener('resize', resize);
       renderer.dispose();
       root.remove();
     },
     get textRatio() { return merged.textRatio; },
     get cssVars() { return merged.cssVars; },
+    get mouseColor() { return merged.mouseColor; },
+    get quality() { return merged.quality; },
+    get renderScale() { return merged.renderScale; },
+    get paused() { return manuallyPaused; },
+    get static() { return staticMode; },
+    get fps() { return frameGate.getFps(); },
     dirty
   };
 }
-const PROGRESS_MOTION_WIDTH = 240;
-const PROGRESS_MOTION_HEIGHT = 80;
-const PROGRESS_MOTION_DURATION = 12.0;
-const PROGRESS_MOTION_MAX_PX = 40.0;
-const PROFILE_CONFIG = {
-  'model-training': { seed: 0.37, broad: 0.58, middle: 0.25, detail: 0.13, lobe: 0.24 },
-  'agent-migration': { seed: 1.71, broad: 0.72, middle: 0.10, detail: 0.03, lobe: 0.18 },
-  'visual-training': { seed: 2.83, broad: 0.66, middle: 0.16, detail: 0.06, lobe: 0.23 },
-  // ponytail: first-pass tide = asymmetric time warp on the same motion pipeline.
-  // Refine (foam line / wash streaks) in the shader after visual QA.
-  'tide': { seed: 4.12, broad: 0.82, middle: 0.07, detail: 0.02, lobe: 0.30, warp: 0.5 }
-};
-const CACHE$1 = Object.create(null);
-function gaussian(value, center, width) {
-  const delta = (value - center) / Math.max(width, 0.001);
-  return Math.exp(-delta * delta);
-}
-function createMotionData(id, edgeStyle = 'flow') {
-  const profile = edgeStyle === 'tide'
-    ? PROFILE_CONFIG.tide
-    : (PROFILE_CONFIG[id] || PROFILE_CONFIG['visual-training']);
-  const data = new Uint8Array(PROGRESS_MOTION_WIDTH * PROGRESS_MOTION_HEIGHT);
-  for (let x = 0; x < PROGRESS_MOTION_WIDTH; x += 1) {
-    let time = (x / PROGRESS_MOTION_WIDTH) * Math.PI * 2;
-    if (profile.warp) time += profile.warp * Math.sin(time * 2);
-    const centerA = 0.28 + Math.sin(time * 0.53 + profile.seed) * 0.13;
-    const centerB = 0.70 + Math.cos(time * 0.47 + profile.seed * 1.7) * 0.12;
-    for (let y = 0; y < PROGRESS_MOTION_HEIGHT; y += 1) {
-      const ratio = y / Math.max(PROGRESS_MOTION_HEIGHT - 1, 1);
-      const envelope = Math.pow(Math.max(Math.sin(Math.PI * ratio), 0), 0.48);
-      const broad = Math.sin(ratio * Math.PI * 2 * 1.35 + time * 0.58 + profile.seed) * profile.broad;
-      const middle = Math.sin(ratio * Math.PI * 2 * 3.2 - time * 0.91 + profile.seed * 2.1) * profile.middle;
-      const detail = Math.sin(ratio * Math.PI * 2 * 6.1 + time * 1.31 + profile.seed * 3.2) * profile.detail;
-      const lobes = (
-        gaussian(ratio, centerA, 0.09) * Math.sin(time * 1.11 + profile.seed * 4.0) -
-        gaussian(ratio, centerB, 0.10) * Math.cos(time * 0.97 + profile.seed * 3.3)
-      ) * profile.lobe;
-      const normalized = Math.max(-1, Math.min(1, (broad + middle + detail + lobes) * envelope));
-      data[y * PROGRESS_MOTION_WIDTH + x] = Math.round((normalized * 0.5 + 0.5) * 255);
-    }
-  }
-  return data;
-}
-function getProgressMotionData(id, edgeStyle = 'flow') {
-  const key = `${id}:${edgeStyle}`;
-  if (!CACHE$1[key]) CACHE$1[key] = createMotionData(id, edgeStyle);
-  return CACHE$1[key];
-}
-function hexToRgb01(hex) {
-  const value = Number.parseInt(hex.replace('#', ''), 16);
-  return [
-    ((value >> 16) & 255) / 255,
-    ((value >> 8) & 255) / 255,
-    (value & 255) / 255
-  ];
-}
-function stringSeed$1(value) {
-  let hash = 2166136261;
-  for (const character of value) {
-    hash ^= character.charCodeAt(0);
-    hash = Math.imul(hash, 16777619);
-  }
-  return (hash >>> 0) / 4294967295;
-}
-const PROFILE_INDEX = {
-  'model-training': 0,
-  'agent-migration': 1,
-  'visual-training': 2,
-  'tide': 3
-};
-const MOTION_SCALE_FACTORS = {
-  'model-training': 1.05,
-  'agent-migration': 1.04,
-  'visual-training': 1.04,
-  'tide': 1.18
-};
-const VERTEX_SHADER = `#version 300 es
-in vec2 a_position;
-out vec2 v_uv;
-void main() {
-  v_uv = a_position * 0.5 + 0.5;
-  gl_Position = vec4(a_position, 0.0, 1.0);
-}`;
-const FRAGMENT_SHADER = `#version 300 es
-precision highp float;
-in vec2 v_uv;
-out vec4 outColor;
-uniform vec2 u_resolution;
-uniform float u_time;
-uniform float u_progress;
-uniform float u_seed;
-uniform float u_profile;
-uniform sampler2D u_motion;
-uniform sampler2D u_effect;
-uniform float u_hasEffect;
-uniform float u_effectFrames;
-uniform float u_motionDuration;
-uniform float u_motionScale;
-uniform vec3 u_dark;
-uniform vec3 u_accentA;
-uniform vec3 u_accentB;
-uniform vec3 u_glow;
-float hash21(vec2 p) {
-  p = fract(p * vec2(123.34, 456.21));
-  p += dot(p, p + 45.32 + u_seed * 11.7);
-  return fract(p.x * p.y);
-}
-float noise(vec2 p) {
-  vec2 i = floor(p);
-  vec2 f = fract(p);
-  f = f * f * (3.0 - 2.0 * f);
-  float a = hash21(i);
-  float b = hash21(i + vec2(1.0, 0.0));
-  float c = hash21(i + vec2(0.0, 1.0));
-  float d = hash21(i + vec2(1.0, 1.0));
-  return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
-}
-float fbm(vec2 p) {
-  float value = 0.0;
-  float amplitude = 0.55;
-  mat2 rotation = mat2(0.82, 0.57, -0.57, 0.82);
-  for (int i = 0; i < 6; i++) {
-    value += noise(p) * amplitude;
-    p = rotation * p * 2.02 + 13.7;
-    amplitude *= 0.48;
-  }
-  return value;
-}
-float gaussian(float value, float center, float width) {
-  float delta = (value - center) / max(width, 0.0001);
-  return exp(-delta * delta);
-}
-float profileMix(float model, float agent, float visual) {
-  if (u_profile < 0.5) return model;
-  if (u_profile < 1.5) return agent;
-  return visual;
-}
-float motionSample(float y, float t) {
-  float phase = fract(t / max(u_motionDuration, 0.001));
-  float captured = texture(u_motion, vec2(phase, 1.0 - clamp(y, 0.0, 1.0))).r;
-  return (captured * 2.0 - 1.0) * u_motionScale;
-}
-float edgeDisplacement(float y, float t) {
-  return motionSample(y, t);
-}
-float flowDisplacement(float y, float t) {
-  return (
-    motionSample(y - 0.024, t) * 0.08 +
-    motionSample(y - 0.012, t) * 0.18 +
-    motionSample(y, t) * 0.48 +
-    motionSample(y + 0.012, t) * 0.18 +
-    motionSample(y + 0.024, t) * 0.08
-  );
-}
-float ellipseRing(vec2 p, float radius, float width) {
-  return gaussian(length(p), radius, width);
-}
-void main() {
-  vec2 uv = v_uv;
-  float t = u_time;
-  float edge = u_progress + edgeDisplacement(uv.y, t);
-  float flowEdge = u_progress + flowDisplacement(uv.y, t);
-  float d = uv.x - edge;
-  float fd = uv.x - flowEdge;
-  vec3 rightBase = vec3(0.125, 0.129, 0.145);
-  vec3 color = rightBase;
-  float leftMask = 1.0 - smoothstep(-0.001, 0.002, d);
-  color = mix(color, u_dark, leftMask * profileMix(0.96, 0.92, 0.96));
-  vec2 flowP = vec2((fd + 0.10) * 6.2, uv.y * 1.95);
-  float flowA = fbm(flowP + vec2(-t * 0.22, t * 0.27) + u_seed * 1.7);
-  float flowB = fbm(flowP * 1.52 + vec2(t * 0.28, -t * 0.36) + 8.2 + u_seed);
-  float flowC = fbm(flowP * 2.25 + vec2(-t * 0.41, t * 0.46) + 19.0);
-  float farCenter = profileMix(-0.060, -0.079, -0.045) + (flowA - 0.5) * profileMix(0.018, 0.022, 0.014);
-  float midCenter = profileMix(-0.039, -0.052, -0.030) + (flowB - 0.5) * profileMix(0.013, 0.016, 0.010);
-  float hotCenter = profileMix(-0.026, -0.029, -0.023) + (flowC - 0.5) * 0.010;
-  float farBand = gaussian(fd, farCenter, profileMix(0.035, 0.049, 0.030));
-  float midBand = gaussian(fd, midCenter, profileMix(0.026, 0.034, 0.026));
-  float hotBand = gaussian(fd, hotCenter, profileMix(0.023, 0.027, 0.026));
-  float darkTrough = gaussian(fd, profileMix(-0.050, -0.058, -0.044) + (flowB - 0.5) * 0.010, profileMix(0.020, 0.025, 0.021));
-  float ringY = 0.47 + sin(t * 0.58 + u_seed * 2.4) * 0.12;
-  vec2 ringP = vec2((fd + 0.086) / 0.078, (uv.y - ringY) / 0.25);
-  ringP += vec2((flowB - 0.5) * 0.08, (flowA - 0.5) * 0.06);
-  float ringTexture = fbm(ringP * 2.15 + vec2(t * 0.18, -t * 0.14) + u_seed * 1.9);
-  float ring = ellipseRing(ringP, 0.66, 0.32) * (0.30 + 0.64 * ringTexture);
-  float ringCore = gaussian(length(ringP), 0.25, 0.25);
-  float ringPulse = smoothstep(0.58, 0.90, 0.5 + 0.5 * sin(t * 0.82 + u_seed * 4.1));
-  float modelRing = ring * ringPulse * (1.0 - step(0.5, u_profile));
-  float visualRing = ring * 0.16 * step(1.5, u_profile) * ringPulse;
-  float cloudGate = leftMask * smoothstep(-0.30, -0.008, fd);
-  float textureA = smoothstep(0.24, 0.92, flowA * 0.72 + flowB * 0.42);
-  float textureB = smoothstep(0.28, 0.94, flowB * 0.68 + flowC * 0.38);
-  vec3 hotColor = u_accentB;
-  color += u_accentA * farBand * cloudGate * (0.07 + textureA * profileMix(0.42, 0.24, 0.40));
-  color += u_accentB * midBand * cloudGate * (0.15 + textureB * profileMix(0.70, 0.46, 0.68));
-  color += hotColor * hotBand * cloudGate * profileMix(0.88, 0.62, 0.84);
-  float modelMask = 1.0 - step(0.5, u_profile);
-  color += u_accentA * (modelRing + visualRing) * cloudGate * profileMix(0.54, 0.0, 0.34);
-  color *= 1.0 - darkTrough * profileMix(0.44, 0.24, 0.24) * cloudGate;
-  color *= 1.0 - ringCore * modelMask * ringPulse * 0.44 * cloudGate;
-  float broadHalo = exp(-abs(d) * 96.0);
-  float innerHalo = exp(-abs(d) * 176.0);
-  float colorCore = exp(-abs(d) * 360.0);
-  float sharpCore = exp(-abs(d) * 760.0);
-  float leftGate = 1.0 - smoothstep(-0.003, 0.005, d);
-  color += u_accentA * broadHalo * leftGate * profileMix(0.09, 0.04, 0.06);
-  color += hotColor * innerHalo * leftGate * profileMix(0.76, 0.72, 0.78);
-  color += u_glow * colorCore * profileMix(0.72, 0.34, 0.24);
-  float whiteStrength = profileMix(0.10, 0.0, 0.0);
-  color += vec3(1.0, 0.99, 0.91) * sharpCore * whiteStrength;
-  float rightCut = smoothstep(0.001, 0.006, d);
-  color = mix(color, rightBase, rightCut);
-  float effectX = (d * 1257.0 + 260.0) / 320.0;
-  float atlasPhase = fract(t / 12.0) * u_effectFrames;
-  float atlasFrameA = floor(atlasPhase);
-  float atlasFrameB = mod(atlasFrameA + 1.0, u_effectFrames);
-  float atlasMix = smoothstep(0.0, 1.0, fract(atlasPhase));
-  float atlasXA = (atlasFrameA + clamp(effectX, 0.0, 1.0)) / u_effectFrames;
-  float atlasXB = (atlasFrameB + clamp(effectX, 0.0, 1.0)) / u_effectFrames;
-  vec3 referenceA = texture(u_effect, vec2(atlasXA, uv.y)).rgb;
-  vec3 referenceB = texture(u_effect, vec2(atlasXB, uv.y)).rgb;
-  vec3 referenceColor = mix(referenceA, referenceB, atlasMix);
-  float stripMask = smoothstep(0.0, 0.018, effectX) * (1.0 - smoothstep(0.982, 1.0, effectX));
-  float referenceLeft = 1.0 - smoothstep(-0.026, -0.012, d);
-  // 参考图集只提供亮度结构，颜色始终由用户 colors（u_dark / u_accentA /
-  // u_accentB / u_glow）决定：这样 setColors / colors 属性在 WebGL 路径下
-  // 真实生效，改色有可见反馈，而不是被图集整体覆盖。
-  float referenceLuma = dot(referenceColor, vec3(0.299, 0.587, 0.114));
-  vec3 tintedColor = color * (0.42 + 0.86 * referenceLuma);
-  color = mix(color, tintedColor, stripMask * referenceLeft * u_hasEffect);
-  outColor = vec4(clamp(color, 0.0, 1.0), 1.0);
-}`;
-function compileShader(gl, type, source) {
-  const shader = gl.createShader(type);
-  gl.shaderSource(shader, source);
-  gl.compileShader(shader);
-  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-    const message = gl.getShaderInfoLog(shader) || 'Unknown shader compile error';
-    gl.deleteShader(shader);
-    throw new Error(message);
-  }
-  return shader;
-}
-function createProgram(gl) {
-  const vertex = compileShader(gl, gl.VERTEX_SHADER, VERTEX_SHADER);
-  const fragment = compileShader(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER);
-  const program = gl.createProgram();
-  gl.attachShader(program, vertex);
-  gl.attachShader(program, fragment);
-  gl.linkProgram(program);
-  gl.deleteShader(vertex);
-  gl.deleteShader(fragment);
-  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
-    const message = gl.getProgramInfoLog(program) || 'Unknown shader link error';
-    gl.deleteProgram(program);
-    throw new Error(message);
-  }
-  return program;
-}
-class ProgressFlowRenderer {
-  constructor(canvas, preset) {
-    const gl = canvas.getContext('webgl2', {
-      alpha: false,
-      antialias: true,
-      premultipliedAlpha: false,
-      powerPreference: 'high-performance'
-    });
-    if (!gl) throw new Error('WebGL2 unavailable');
-    this.canvas = canvas;
-    this.gl = gl;
-    this.program = createProgram(gl);
-    this.profile = preset.edgeStyle === 'tide' ? 3 : (PROFILE_INDEX[preset.id] ?? 2);
-    this.seed = stringSeed$1(`${preset.id}-shader`) * 13.7 + 1.0;
-    this.colors = preset.colors.map(hexToRgb01);
-    this.motionData = getProgressMotionData(preset.id, preset.edgeStyle);
-    const motionFactor = preset.edgeStyle === 'tide'
-      ? MOTION_SCALE_FACTORS.tide
-      : (MOTION_SCALE_FACTORS[preset.id] || 1.04);
-    this.motionScale = (PROGRESS_MOTION_MAX_PX * motionFactor) / 1257;
-    this.position = gl.getAttribLocation(this.program, 'a_position');
-    this.uniforms = {
-      resolution: gl.getUniformLocation(this.program, 'u_resolution'),
-      time: gl.getUniformLocation(this.program, 'u_time'),
-      progress: gl.getUniformLocation(this.program, 'u_progress'),
-      seed: gl.getUniformLocation(this.program, 'u_seed'),
-      profile: gl.getUniformLocation(this.program, 'u_profile'),
-      motion: gl.getUniformLocation(this.program, 'u_motion'),
-      effect: gl.getUniformLocation(this.program, 'u_effect'),
-      hasEffect: gl.getUniformLocation(this.program, 'u_hasEffect'),
-      effectFrames: gl.getUniformLocation(this.program, 'u_effectFrames'),
-      motionDuration: gl.getUniformLocation(this.program, 'u_motionDuration'),
-      motionScale: gl.getUniformLocation(this.program, 'u_motionScale'),
-      dark: gl.getUniformLocation(this.program, 'u_dark'),
-      accentA: gl.getUniformLocation(this.program, 'u_accentA'),
-      accentB: gl.getUniformLocation(this.program, 'u_accentB'),
-      glow: gl.getUniformLocation(this.program, 'u_glow')
-    };
-    this.buffer = gl.createBuffer();
-    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
-    gl.bufferData(
-      gl.ARRAY_BUFFER,
-      new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),
-      gl.STATIC_DRAW
-    );
-    this.motionTexture = gl.createTexture();
-    gl.activeTexture(gl.TEXTURE0);
-    gl.bindTexture(gl.TEXTURE_2D, this.motionTexture);
-    gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);
-    gl.texImage2D(
-      gl.TEXTURE_2D,
-      0,
-      gl.R8,
-      PROGRESS_MOTION_WIDTH,
-      PROGRESS_MOTION_HEIGHT,
-      0,
-      gl.RED,
-      gl.UNSIGNED_BYTE,
-      this.motionData
-    );
-    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.REPEAT);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-    this.effectTexture = gl.createTexture();
-    gl.activeTexture(gl.TEXTURE1);
-    gl.bindTexture(gl.TEXTURE_2D, this.effectTexture);
-    gl.texImage2D(
-      gl.TEXTURE_2D,
-      0,
-      gl.RGB,
-      1,
-      1,
-      0,
-      gl.RGB,
-      gl.UNSIGNED_BYTE,
-      new Uint8Array([32, 33, 38])
-    );
-    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);
-    this.effectUploaded = false;
-  }
-  resize(width, height, dpr) {
-    const pixelWidth = Math.max(1, Math.round(width * dpr));
-    const pixelHeight = Math.max(1, Math.round(height * dpr));
-    if (this.canvas.width !== pixelWidth || this.canvas.height !== pixelHeight) {
-      this.canvas.width = pixelWidth;
-      this.canvas.height = pixelHeight;
-    }
-    this.gl.viewport(0, 0, pixelWidth, pixelHeight);
-  }
-  draw(time, progress, effectImage = null) {
-    const gl = this.gl;
-    gl.useProgram(this.program);
-    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
-    gl.enableVertexAttribArray(this.position);
-    gl.vertexAttribPointer(this.position, 2, gl.FLOAT, false, 0, 0);
-    gl.uniform2f(this.uniforms.resolution, this.canvas.width, this.canvas.height);
-    gl.uniform1f(this.uniforms.time, time);
-    gl.uniform1f(this.uniforms.progress, progress / 100);
-    gl.uniform1f(this.uniforms.seed, this.seed);
-    gl.uniform1f(this.uniforms.profile, this.profile);
-    gl.activeTexture(gl.TEXTURE0);
-    gl.bindTexture(gl.TEXTURE_2D, this.motionTexture);
-    gl.uniform1i(this.uniforms.motion, 0);
-    gl.uniform1f(this.uniforms.motionDuration, PROGRESS_MOTION_DURATION);
-    gl.uniform1f(this.uniforms.motionScale, this.motionScale);
-    let hasEffect = this.effectUploaded ? 1 : 0;
-    if (!this.effectUploaded && effectImage && effectImage.complete && effectImage.naturalWidth > 0) {
-      gl.activeTexture(gl.TEXTURE1);
-      gl.bindTexture(gl.TEXTURE_2D, this.effectTexture);
-      gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
-      try {
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, effectImage);
-        this.effectUploaded = true;
-        hasEffect = 1;
-      } catch (error) {
-        console.warn('[画境观屿] 参考纹理图集上传失败，继续使用程序化降级。', error);
-      }
-      gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
-    }
-    gl.activeTexture(gl.TEXTURE1);
-    gl.bindTexture(gl.TEXTURE_2D, this.effectTexture);
-    gl.uniform1i(this.uniforms.effect, 1);
-    gl.uniform1f(this.uniforms.hasEffect, hasEffect);
-    gl.uniform1f(this.uniforms.effectFrames, 24);
-    gl.uniform3fv(this.uniforms.dark, this.colors[0]);
-    gl.uniform3fv(this.uniforms.accentA, this.colors[1]);
-    gl.uniform3fv(this.uniforms.accentB, this.colors[2]);
-    gl.uniform3fv(this.uniforms.glow, this.colors[3]);
-    gl.drawArrays(gl.TRIANGLES, 0, 6);
-  }
-  setColors(colors) {
-    this.colors = colors.map(hexToRgb01);
-  }
-  dispose() {
-    const gl = this.gl;
-    gl.deleteBuffer(this.buffer);
-    gl.deleteTexture(this.motionTexture);
-    gl.deleteTexture(this.effectTexture);
-    gl.deleteProgram(this.program);
-    const lose = gl.getExtension('WEBGL_lose_context');
-    if (lose) lose.loseContext();
-  }
-}
-function createProgressFlowRenderer(canvas, preset) {
-  try {
-    return new ProgressFlowRenderer(canvas, preset);
-  } catch (error) {
-    console.warn('[画境观屿] 进度流体 WebGL2 不可用，使用 Canvas 2D 降级。', error);
-    return null;
-  }
-}
-const PROGRESS_REFERENCE_DURATION = 12;
-const PROGRESS_REFERENCE_FRAME_COUNT = 24;
-const FRAME_WIDTH = 64;
-const FRAME_HEIGHT = 32;
-const CACHE = Object.create(null);
-const PALETTES = {
-  'model-training': ['#20131f', '#ff3f94', '#ff8a3d', '#fff06a'],
-  'agent-migration': ['#111a31', '#245bff', '#00cfff', '#5dffe6'],
-  'visual-training': ['#1f172b', '#7042ff', '#42f58d', '#c4ff8a'],
-  'tide': ['#0a2239', '#2e9bff', '#7fe3ff', '#eaf9ff']
-};
-function drawCloud(context, x, y, radiusX, radiusY, color, alpha) {
-  context.save();
-  context.translate(x, y);
-  context.scale(1, radiusY / radiusX);
-  const gradient = context.createRadialGradient(0, 0, 0, 0, 0, radiusX);
-  const alphaHex = (value) => {
-    const text = Math.round(value).toString(16);
+const PROGRESS_MOTION_WIDTH = 240;
+const PROGRESS_MOTION_HEIGHT = 80;
+const PROGRESS_MOTION_DURATION = 12.0;
+const PROGRESS_MOTION_MAX_PX = 40.0;
+const PROFILE_CONFIG = {
+  'model-training': { seed: 0.37, broad: 0.58, middle: 0.25, detail: 0.13, lobe: 0.24 },
+  'agent-migration': { seed: 1.71, broad: 0.72, middle: 0.10, detail: 0.03, lobe: 0.18 },
+  'visual-training': { seed: 2.83, broad: 0.66, middle: 0.16, detail: 0.06, lobe: 0.23 },
+  // ponytail: first-pass tide = asymmetric time warp on the same motion pipeline.
+  // Refine (foam line / wash streaks) in the shader after visual QA.
+  'tide': { seed: 4.12, broad: 0.82, middle: 0.07, detail: 0.02, lobe: 0.30, warp: 0.5 }
+};
+const CACHE$1 = Object.create(null);
+function gaussian(value, center, width) {
+  const delta = (value - center) / Math.max(width, 0.001);
+  return Math.exp(-delta * delta);
+}
+function createMotionData(id, edgeStyle = 'flow') {
+  const profile = edgeStyle === 'tide'
+    ? PROFILE_CONFIG.tide
+    : (PROFILE_CONFIG[id] || PROFILE_CONFIG['visual-training']);
+  const data = new Uint8Array(PROGRESS_MOTION_WIDTH * PROGRESS_MOTION_HEIGHT);
+  for (let x = 0; x < PROGRESS_MOTION_WIDTH; x += 1) {
+    let time = (x / PROGRESS_MOTION_WIDTH) * Math.PI * 2;
+    if (profile.warp) time += profile.warp * Math.sin(time * 2);
+    const centerA = 0.28 + Math.sin(time * 0.53 + profile.seed) * 0.13;
+    const centerB = 0.70 + Math.cos(time * 0.47 + profile.seed * 1.7) * 0.12;
+    for (let y = 0; y < PROGRESS_MOTION_HEIGHT; y += 1) {
+      const ratio = y / Math.max(PROGRESS_MOTION_HEIGHT - 1, 1);
+      const envelope = Math.pow(Math.max(Math.sin(Math.PI * ratio), 0), 0.48);
+      const broad = Math.sin(ratio * Math.PI * 2 * 1.35 + time * 0.58 + profile.seed) * profile.broad;
+      const middle = Math.sin(ratio * Math.PI * 2 * 3.2 - time * 0.91 + profile.seed * 2.1) * profile.middle;
+      const detail = Math.sin(ratio * Math.PI * 2 * 6.1 + time * 1.31 + profile.seed * 3.2) * profile.detail;
+      const lobes = (
+        gaussian(ratio, centerA, 0.09) * Math.sin(time * 1.11 + profile.seed * 4.0) -
+        gaussian(ratio, centerB, 0.10) * Math.cos(time * 0.97 + profile.seed * 3.3)
+      ) * profile.lobe;
+      const normalized = Math.max(-1, Math.min(1, (broad + middle + detail + lobes) * envelope));
+      data[y * PROGRESS_MOTION_WIDTH + x] = Math.round((normalized * 0.5 + 0.5) * 255);
+    }
+  }
+  return data;
+}
+function getProgressMotionData(id, edgeStyle = 'flow') {
+  const key = `${id}:${edgeStyle}`;
+  if (!CACHE$1[key]) CACHE$1[key] = createMotionData(id, edgeStyle);
+  return CACHE$1[key];
+}
+function hexToRgb01(hex) {
+  const value = Number.parseInt(hex.replace('#', ''), 16);
+  return [
+    ((value >> 16) & 255) / 255,
+    ((value >> 8) & 255) / 255,
+    (value & 255) / 255
+  ];
+}
+function stringSeed$1(value) {
+  let hash = 2166136261;
+  for (const character of value) {
+    hash ^= character.charCodeAt(0);
+    hash = Math.imul(hash, 16777619);
+  }
+  return (hash >>> 0) / 4294967295;
+}
+const PROFILE_INDEX = {
+  'model-training': 0,
+  'agent-migration': 1,
+  'visual-training': 2,
+  'tide': 3
+};
+const MOTION_SCALE_FACTORS = {
+  'model-training': 1.05,
+  'agent-migration': 1.04,
+  'visual-training': 1.04,
+  'tide': 1.18
+};
+const VERTEX_SHADER = `#version 300 es
+in vec2 a_position;
+out vec2 v_uv;
+void main() {
+  v_uv = a_position * 0.5 + 0.5;
+  gl_Position = vec4(a_position, 0.0, 1.0);
+}`;
+const FRAGMENT_SHADER = `#version 300 es
+precision highp float;
+in vec2 v_uv;
+out vec4 outColor;
+uniform vec2 u_resolution;
+uniform float u_time;
+uniform float u_progress;
+uniform float u_seed;
+uniform float u_profile;
+uniform sampler2D u_motion;
+uniform sampler2D u_effect;
+uniform float u_hasEffect;
+uniform float u_effectFrames;
+uniform float u_motionDuration;
+uniform float u_motionScale;
+uniform vec3 u_dark;
+uniform vec3 u_accentA;
+uniform vec3 u_accentB;
+uniform vec3 u_glow;
+float hash21(vec2 p) {
+  p = fract(p * vec2(123.34, 456.21));
+  p += dot(p, p + 45.32 + u_seed * 11.7);
+  return fract(p.x * p.y);
+}
+float noise(vec2 p) {
+  vec2 i = floor(p);
+  vec2 f = fract(p);
+  f = f * f * (3.0 - 2.0 * f);
+  float a = hash21(i);
+  float b = hash21(i + vec2(1.0, 0.0));
+  float c = hash21(i + vec2(0.0, 1.0));
+  float d = hash21(i + vec2(1.0, 1.0));
+  return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
+}
+float fbm(vec2 p) {
+  float value = 0.0;
+  float amplitude = 0.55;
+  mat2 rotation = mat2(0.82, 0.57, -0.57, 0.82);
+  for (int i = 0; i < 6; i++) {
+    value += noise(p) * amplitude;
+    p = rotation * p * 2.02 + 13.7;
+    amplitude *= 0.48;
+  }
+  return value;
+}
+float gaussian(float value, float center, float width) {
+  float delta = (value - center) / max(width, 0.0001);
+  return exp(-delta * delta);
+}
+float profileMix(float model, float agent, float visual) {
+  if (u_profile < 0.5) return model;
+  if (u_profile < 1.5) return agent;
+  return visual;
+}
+float motionSample(float y, float t) {
+  float phase = fract(t / max(u_motionDuration, 0.001));
+  float captured = texture(u_motion, vec2(phase, 1.0 - clamp(y, 0.0, 1.0))).r;
+  return (captured * 2.0 - 1.0) * u_motionScale;
+}
+float edgeDisplacement(float y, float t) {
+  return motionSample(y, t);
+}
+float flowDisplacement(float y, float t) {
+  return (
+    motionSample(y - 0.024, t) * 0.08 +
+    motionSample(y - 0.012, t) * 0.18 +
+    motionSample(y, t) * 0.48 +
+    motionSample(y + 0.012, t) * 0.18 +
+    motionSample(y + 0.024, t) * 0.08
+  );
+}
+float ellipseRing(vec2 p, float radius, float width) {
+  return gaussian(length(p), radius, width);
+}
+void main() {
+  vec2 uv = v_uv;
+  float t = u_time;
+  float edge = u_progress + edgeDisplacement(uv.y, t);
+  float flowEdge = u_progress + flowDisplacement(uv.y, t);
+  float d = uv.x - edge;
+  float fd = uv.x - flowEdge;
+  vec3 rightBase = vec3(0.125, 0.129, 0.145);
+  vec3 color = rightBase;
+  float leftMask = 1.0 - smoothstep(-0.001, 0.002, d);
+  color = mix(color, u_dark, leftMask * profileMix(0.96, 0.92, 0.96));
+  vec2 flowP = vec2((fd + 0.10) * 6.2, uv.y * 1.95);
+  float flowA = fbm(flowP + vec2(-t * 0.22, t * 0.27) + u_seed * 1.7);
+  float flowB = fbm(flowP * 1.52 + vec2(t * 0.28, -t * 0.36) + 8.2 + u_seed);
+  float flowC = fbm(flowP * 2.25 + vec2(-t * 0.41, t * 0.46) + 19.0);
+  float farCenter = profileMix(-0.060, -0.079, -0.045) + (flowA - 0.5) * profileMix(0.018, 0.022, 0.014);
+  float midCenter = profileMix(-0.039, -0.052, -0.030) + (flowB - 0.5) * profileMix(0.013, 0.016, 0.010);
+  float hotCenter = profileMix(-0.026, -0.029, -0.023) + (flowC - 0.5) * 0.010;
+  float farBand = gaussian(fd, farCenter, profileMix(0.035, 0.049, 0.030));
+  float midBand = gaussian(fd, midCenter, profileMix(0.026, 0.034, 0.026));
+  float hotBand = gaussian(fd, hotCenter, profileMix(0.023, 0.027, 0.026));
+  float darkTrough = gaussian(fd, profileMix(-0.050, -0.058, -0.044) + (flowB - 0.5) * 0.010, profileMix(0.020, 0.025, 0.021));
+  float ringY = 0.47 + sin(t * 0.58 + u_seed * 2.4) * 0.12;
+  vec2 ringP = vec2((fd + 0.086) / 0.078, (uv.y - ringY) / 0.25);
+  ringP += vec2((flowB - 0.5) * 0.08, (flowA - 0.5) * 0.06);
+  float ringTexture = fbm(ringP * 2.15 + vec2(t * 0.18, -t * 0.14) + u_seed * 1.9);
+  float ring = ellipseRing(ringP, 0.66, 0.32) * (0.30 + 0.64 * ringTexture);
+  float ringCore = gaussian(length(ringP), 0.25, 0.25);
+  float ringPulse = smoothstep(0.58, 0.90, 0.5 + 0.5 * sin(t * 0.82 + u_seed * 4.1));
+  float modelRing = ring * ringPulse * (1.0 - step(0.5, u_profile));
+  float visualRing = ring * 0.16 * step(1.5, u_profile) * ringPulse;
+  float cloudGate = leftMask * smoothstep(-0.30, -0.008, fd);
+  float textureA = smoothstep(0.24, 0.92, flowA * 0.72 + flowB * 0.42);
+  float textureB = smoothstep(0.28, 0.94, flowB * 0.68 + flowC * 0.38);
+  vec3 hotColor = u_accentB;
+  color += u_accentA * farBand * cloudGate * (0.07 + textureA * profileMix(0.42, 0.24, 0.40));
+  color += u_accentB * midBand * cloudGate * (0.15 + textureB * profileMix(0.70, 0.46, 0.68));
+  color += hotColor * hotBand * cloudGate * profileMix(0.88, 0.62, 0.84);
+  float modelMask = 1.0 - step(0.5, u_profile);
+  color += u_accentA * (modelRing + visualRing) * cloudGate * profileMix(0.54, 0.0, 0.34);
+  color *= 1.0 - darkTrough * profileMix(0.44, 0.24, 0.24) * cloudGate;
+  color *= 1.0 - ringCore * modelMask * ringPulse * 0.44 * cloudGate;
+  float broadHalo = exp(-abs(d) * 96.0);
+  float innerHalo = exp(-abs(d) * 176.0);
+  float colorCore = exp(-abs(d) * 360.0);
+  float sharpCore = exp(-abs(d) * 760.0);
+  float leftGate = 1.0 - smoothstep(-0.003, 0.005, d);
+  color += u_accentA * broadHalo * leftGate * profileMix(0.09, 0.04, 0.06);
+  color += hotColor * innerHalo * leftGate * profileMix(0.76, 0.72, 0.78);
+  color += u_glow * colorCore * profileMix(0.72, 0.34, 0.24);
+  float whiteStrength = profileMix(0.10, 0.0, 0.0);
+  color += vec3(1.0, 0.99, 0.91) * sharpCore * whiteStrength;
+  float rightCut = smoothstep(0.001, 0.006, d);
+  color = mix(color, rightBase, rightCut);
+  float effectX = (d * 1257.0 + 260.0) / 320.0;
+  float atlasPhase = fract(t / 12.0) * u_effectFrames;
+  float atlasFrameA = floor(atlasPhase);
+  float atlasFrameB = mod(atlasFrameA + 1.0, u_effectFrames);
+  float atlasMix = smoothstep(0.0, 1.0, fract(atlasPhase));
+  float atlasXA = (atlasFrameA + clamp(effectX, 0.0, 1.0)) / u_effectFrames;
+  float atlasXB = (atlasFrameB + clamp(effectX, 0.0, 1.0)) / u_effectFrames;
+  vec3 referenceA = texture(u_effect, vec2(atlasXA, uv.y)).rgb;
+  vec3 referenceB = texture(u_effect, vec2(atlasXB, uv.y)).rgb;
+  vec3 referenceColor = mix(referenceA, referenceB, atlasMix);
+  float stripMask = smoothstep(0.0, 0.018, effectX) * (1.0 - smoothstep(0.982, 1.0, effectX));
+  float referenceLeft = 1.0 - smoothstep(-0.026, -0.012, d);
+  // 参考图集只提供亮度结构，颜色始终由用户 colors（u_dark / u_accentA /
+  // u_accentB / u_glow）决定：这样 setColors / colors 属性在 WebGL 路径下
+  // 真实生效，改色有可见反馈，而不是被图集整体覆盖。
+  float referenceLuma = dot(referenceColor, vec3(0.299, 0.587, 0.114));
+  vec3 tintedColor = color * (0.42 + 0.86 * referenceLuma);
+  color = mix(color, tintedColor, stripMask * referenceLeft * u_hasEffect);
+  outColor = vec4(clamp(color, 0.0, 1.0), 1.0);
+}`;
+function compileShader(gl, type, source) {
+  const shader = gl.createShader(type);
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    const message = gl.getShaderInfoLog(shader) || 'Unknown shader compile error';
+    gl.deleteShader(shader);
+    throw new Error(message);
+  }
+  return shader;
+}
+function createProgram(gl) {
+  const vertex = compileShader(gl, gl.VERTEX_SHADER, VERTEX_SHADER);
+  const fragment = compileShader(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER);
+  const program = gl.createProgram();
+  gl.attachShader(program, vertex);
+  gl.attachShader(program, fragment);
+  gl.linkProgram(program);
+  gl.deleteShader(vertex);
+  gl.deleteShader(fragment);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    const message = gl.getProgramInfoLog(program) || 'Unknown shader link error';
+    gl.deleteProgram(program);
+    throw new Error(message);
+  }
+  return program;
+}
+class ProgressFlowRenderer {
+  constructor(canvas, preset, options = {}) {
+    const gl = canvas.getContext('webgl2', {
+      alpha: false,
+      antialias: true,
+      premultipliedAlpha: false,
+      powerPreference: options.powerPreference || 'high-performance'
+    });
+    if (!gl) throw new Error('WebGL2 unavailable');
+    this.canvas = canvas;
+    this.options = options;
+    this.gl = gl;
+    this.profile = preset.edgeStyle === 'tide' ? 3 : (PROFILE_INDEX[preset.id] ?? 2);
+    this.seed = stringSeed$1(`${preset.id}-shader`) * 13.7 + 1.0;
+    this.colors = preset.colors.map(hexToRgb01);
+    this.motionData = getProgressMotionData(preset.id, preset.edgeStyle);
+    const motionFactor = preset.edgeStyle === 'tide'
+      ? MOTION_SCALE_FACTORS.tide
+      : (MOTION_SCALE_FACTORS[preset.id] || 1.04);
+    this.motionScale = (PROGRESS_MOTION_MAX_PX * motionFactor) / 1257;
+    this.disposed = false;
+    this.contextLost = false;
+    this.setupResources();
+    this.bindContextEvents();
+  }
+  setupResources() {
+    const gl = this.gl;
+    this.program = createProgram(gl);
+    this.position = gl.getAttribLocation(this.program, 'a_position');
+    this.uniforms = {
+      resolution: gl.getUniformLocation(this.program, 'u_resolution'),
+      time: gl.getUniformLocation(this.program, 'u_time'),
+      progress: gl.getUniformLocation(this.program, 'u_progress'),
+      seed: gl.getUniformLocation(this.program, 'u_seed'),
+      profile: gl.getUniformLocation(this.program, 'u_profile'),
+      motion: gl.getUniformLocation(this.program, 'u_motion'),
+      effect: gl.getUniformLocation(this.program, 'u_effect'),
+      hasEffect: gl.getUniformLocation(this.program, 'u_hasEffect'),
+      effectFrames: gl.getUniformLocation(this.program, 'u_effectFrames'),
+      motionDuration: gl.getUniformLocation(this.program, 'u_motionDuration'),
+      motionScale: gl.getUniformLocation(this.program, 'u_motionScale'),
+      dark: gl.getUniformLocation(this.program, 'u_dark'),
+      accentA: gl.getUniformLocation(this.program, 'u_accentA'),
+      accentB: gl.getUniformLocation(this.program, 'u_accentB'),
+      glow: gl.getUniformLocation(this.program, 'u_glow')
+    };
+    this.buffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
+    gl.bufferData(
+      gl.ARRAY_BUFFER,
+      new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),
+      gl.STATIC_DRAW
+    );
+    this.motionTexture = gl.createTexture();
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, this.motionTexture);
+    gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);
+    gl.texImage2D(
+      gl.TEXTURE_2D,
+      0,
+      gl.R8,
+      PROGRESS_MOTION_WIDTH,
+      PROGRESS_MOTION_HEIGHT,
+      0,
+      gl.RED,
+      gl.UNSIGNED_BYTE,
+      this.motionData
+    );
+    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.REPEAT);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    this.effectTexture = gl.createTexture();
+    gl.activeTexture(gl.TEXTURE1);
+    gl.bindTexture(gl.TEXTURE_2D, this.effectTexture);
+    gl.texImage2D(
+      gl.TEXTURE_2D,
+      0,
+      gl.RGB,
+      1,
+      1,
+      0,
+      gl.RGB,
+      gl.UNSIGNED_BYTE,
+      new Uint8Array([32, 33, 38])
+    );
+    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);
+    this.effectUploaded = false;
+  }
+  bindContextEvents() {
+    this.onContextLost = (event) => {
+      event.preventDefault();
+      if (this.disposed) return;
+      this.contextLost = true;
+      if (typeof this.options.onContextLost === 'function') this.options.onContextLost(event);
+    };
+    this.onContextRestored = () => {
+      if (this.disposed) return;
+      this.setupResources();
+      this.contextLost = false;
+      this.gl.viewport(0, 0, this.canvas.width, this.canvas.height);
+      if (typeof this.options.onContextRestored === 'function') this.options.onContextRestored();
+    };
+    this.canvas.addEventListener('webglcontextlost', this.onContextLost, false);
+    this.canvas.addEventListener('webglcontextrestored', this.onContextRestored, false);
+  }
+  resize(width, height, dpr) {
+    const pixelWidth = Math.max(1, Math.round(width * dpr));
+    const pixelHeight = Math.max(1, Math.round(height * dpr));
+    if (this.canvas.width !== pixelWidth || this.canvas.height !== pixelHeight) {
+      this.canvas.width = pixelWidth;
+      this.canvas.height = pixelHeight;
+    }
+    this.gl.viewport(0, 0, pixelWidth, pixelHeight);
+  }
+  draw(time, progress, effectImage = null) {
+    if (this.disposed || this.contextLost) return;
+    const gl = this.gl;
+    gl.useProgram(this.program);
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
+    gl.enableVertexAttribArray(this.position);
+    gl.vertexAttribPointer(this.position, 2, gl.FLOAT, false, 0, 0);
+    gl.uniform2f(this.uniforms.resolution, this.canvas.width, this.canvas.height);
+    gl.uniform1f(this.uniforms.time, time);
+    gl.uniform1f(this.uniforms.progress, progress / 100);
+    gl.uniform1f(this.uniforms.seed, this.seed);
+    gl.uniform1f(this.uniforms.profile, this.profile);
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, this.motionTexture);
+    gl.uniform1i(this.uniforms.motion, 0);
+    gl.uniform1f(this.uniforms.motionDuration, PROGRESS_MOTION_DURATION);
+    gl.uniform1f(this.uniforms.motionScale, this.motionScale);
+    let hasEffect = this.effectUploaded ? 1 : 0;
+    const effectWidth = effectImage && (effectImage.naturalWidth || effectImage.width || 0);
+    if (!this.effectUploaded && effectImage && effectWidth > 0) {
+      gl.activeTexture(gl.TEXTURE1);
+      gl.bindTexture(gl.TEXTURE_2D, this.effectTexture);
+      gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+      try {
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, effectImage);
+        this.effectUploaded = true;
+        hasEffect = 1;
+      } catch (error) {
+        console.warn('[画境观屿] 参考纹理图集上传失败，继续使用程序化降级。', error);
+      }
+      gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+    }
+    gl.activeTexture(gl.TEXTURE1);
+    gl.bindTexture(gl.TEXTURE_2D, this.effectTexture);
+    gl.uniform1i(this.uniforms.effect, 1);
+    gl.uniform1f(this.uniforms.hasEffect, hasEffect);
+    gl.uniform1f(this.uniforms.effectFrames, 24);
+    gl.uniform3fv(this.uniforms.dark, this.colors[0]);
+    gl.uniform3fv(this.uniforms.accentA, this.colors[1]);
+    gl.uniform3fv(this.uniforms.accentB, this.colors[2]);
+    gl.uniform3fv(this.uniforms.glow, this.colors[3]);
+    gl.drawArrays(gl.TRIANGLES, 0, 6);
+  }
+  setColors(colors) {
+    this.colors = colors.map(hexToRgb01);
+  }
+  dispose() {
+    this.disposed = true;
+    const gl = this.gl;
+    this.canvas.removeEventListener('webglcontextlost', this.onContextLost, false);
+    this.canvas.removeEventListener('webglcontextrestored', this.onContextRestored, false);
+    gl.deleteBuffer(this.buffer);
+    gl.deleteTexture(this.motionTexture);
+    gl.deleteTexture(this.effectTexture);
+    gl.deleteProgram(this.program);
+    const lose = gl.getExtension('WEBGL_lose_context');
+    if (lose) lose.loseContext();
+  }
+}
+function createProgressFlowRenderer(canvas, preset, options = {}) {
+  try {
+    return new ProgressFlowRenderer(canvas, preset, options);
+  } catch (error) {
+    console.warn('[画境观屿] 进度流体 WebGL2 不可用，使用 Canvas 2D 降级。', error);
+    return null;
+  }
+}
+const PROGRESS_REFERENCE_DURATION = 12;
+const PROGRESS_REFERENCE_FRAME_COUNT = 24;
+const FRAME_WIDTH = 64;
+const FRAME_HEIGHT = 32;
+const CACHE = Object.create(null);
+const PALETTES = {
+  'model-training': ['#20131f', '#ff3f94', '#ff8a3d', '#fff06a'],
+  'agent-migration': ['#111a31', '#245bff', '#00cfff', '#5dffe6'],
+  'visual-training': ['#1f172b', '#7042ff', '#42f58d', '#c4ff8a'],
+  'tide': ['#0a2239', '#2e9bff', '#7fe3ff', '#eaf9ff']
+};
+function drawCloud(context, x, y, radiusX, radiusY, color, alpha) {
+  context.save();
+  context.translate(x, y);
+  context.scale(1, radiusY / radiusX);
+  const gradient = context.createRadialGradient(0, 0, 0, 0, 0, radiusX);
+  const alphaHex = (value) => {
+    const text = Math.round(value).toString(16);
     return text.length === 1 ? `0${text}` : text;
   };
   gradient.addColorStop(0, `${color}${alphaHex(alpha * 255)}`);
   gradient.addColorStop(0.46, `${color}${alphaHex(alpha * 0.42 * 255)}`);
-  gradient.addColorStop(1, `${color}00`);
-  context.fillStyle = gradient;
-  context.fillRect(-radiusX, -radiusX, radiusX * 2, radiusX * 2);
-  context.restore();
-}
-function createAtlas(id) {
-  const palette = PALETTES[id] || PALETTES['visual-training'];
-  const canvas = document.createElement('canvas');
-  canvas.width = FRAME_WIDTH * PROGRESS_REFERENCE_FRAME_COUNT;
-  canvas.height = FRAME_HEIGHT;
-  const context = canvas.getContext('2d');
-  for (let frame = 0; frame < PROGRESS_REFERENCE_FRAME_COUNT; frame += 1) {
-    const phase = (frame / PROGRESS_REFERENCE_FRAME_COUNT) * Math.PI * 2;
-    const left = frame * FRAME_WIDTH;
-    context.save();
-    context.translate(left, 0);
-    context.fillStyle = palette[0];
-    context.fillRect(0, 0, FRAME_WIDTH, FRAME_HEIGHT);
-    context.globalCompositeOperation = 'screen';
-    drawCloud(context, 35 + Math.sin(phase * 0.83) * 5, 10 + Math.cos(phase * 0.61) * 5, 27, 18, palette[1], id === 'agent-migration' ? 0.32 : 0.42);
-    drawCloud(context, 45 + Math.cos(phase * 0.72) * 4, 23 + Math.sin(phase * 0.54) * 4, 22, 15, palette[2], 0.44);
-    drawCloud(context, 53 + Math.sin(phase * 1.07) * 2, 16 + Math.cos(phase * 0.89) * 6, 12, 13, palette[3], id === 'model-training' ? 0.30 : 0.20);
-    context.globalCompositeOperation = 'source-over';
-    const trough = context.createRadialGradient(41, 16, 1, 41, 16, 17);
-    trough.addColorStop(0, 'rgba(5,6,11,0.64)');
-    trough.addColorStop(0.58, 'rgba(6,7,12,0.26)');
-    trough.addColorStop(1, 'rgba(6,7,12,0)');
-    context.fillStyle = trough;
-    context.fillRect(20, 0, 44, FRAME_HEIGHT);
-    context.restore();
-  }
-  const image = new Image();
-  image.decoding = 'async';
-  const state = { image, ready: false };
-  image.addEventListener('load', () => { state.ready = true; }, { once: true });
-  image.addEventListener('error', () => { state.ready = false; }, { once: true });
-  image.src = canvas.toDataURL('image/png');
-  return state;
-}
-function getProgressReferenceAtlas(id) {
-  if (!CACHE[id]) CACHE[id] = createAtlas(id);
-  return CACHE[id];
-}
-/**
- * Attach a WebGL2 fluid overlay to a progress capsule root.
- *
- * @param {object} params
- * @param {HTMLElement} params.root    progress capsule root element
- * @param {HTMLCanvasElement} params.canvas  2D fallback canvas (kept beneath)
- * @param {object} params.preset      progress preset
- * @param {() => number} params.getProgress  reads the current progress value
- * @returns {{ update(flowTime: number): void, dispose(): void } | null}
- */
-function attachProgressFlowOverlay({ root, canvas, preset, getProgress }) {
-  const overlay = document.createElement('canvas');
-  overlay.className = 'hj-progress-canvas hj-progress-overlay';
-  overlay.setAttribute('aria-hidden', 'true');
-  canvas.insertAdjacentElement('afterend', overlay);
-  const renderer = createProgressFlowRenderer(overlay, preset);
-  if (!renderer) {
-    overlay.remove();
-    return null;
-  }
-  const atlas = getProgressReferenceAtlas(preset.id);
-  root.classList.add('has-webgl-progress');
-  const resize = () => {
-    const bounds = root.getBoundingClientRect();
-    const width = Math.max(1, bounds.width);
-    const height = Math.max(1, bounds.height);
-    const dpr = Math.min(window.devicePixelRatio || 1, 2);
-    overlay.style.width = `${width}px`;
-    overlay.style.height = `${height}px`;
-    renderer.resize(width, height, dpr);
-  };
-  let resizeObserver = null;
-  let onWindowResize = null;
-  if (typeof ResizeObserver !== 'undefined') {
-    resizeObserver = new ResizeObserver(resize);
-    resizeObserver.observe(root);
-  } else {
-    onWindowResize = resize;
-    window.addEventListener('resize', onWindowResize);
-  }
-  resize();
-  return {
-    update(flowTime) {
-      const effectTime = flowTime % PROGRESS_REFERENCE_DURATION;
-      const progress = getProgress();
-      renderer.draw(
-        effectTime,
-        Number.isFinite(progress) ? progress : preset.initialProgress,
-        atlas.ready ? atlas.image : null
-      );
-    },
-    setColors(colors) {
-      renderer.setColors(colors);
-    },
-    dispose() {
-      if (resizeObserver) resizeObserver.disconnect();
-      if (onWindowResize) window.removeEventListener('resize', onWindowResize);
-      renderer.dispose();
-      overlay.remove();
-      root.classList.remove('has-webgl-progress');
-    }
-  };
-}
-const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
-const SUPPORTS_CTX_FILTER = typeof CanvasRenderingContext2D !== 'undefined' && 'filter' in CanvasRenderingContext2D.prototype;
-function stringSeed(value) {
-  let hash = 2166136261;
-  for (const character of value) {
-    hash ^= character.charCodeAt(0);
-    hash = Math.imul(hash, 16777619);
-  }
-  return (hash >>> 0) / 4294967295;
-}
-function interpolate(template, values) {
-  return template.replace(/\{(\w+)\}/g, (_, key) => (values[key] !== undefined ? values[key] : ''));
-}
-function prefersReducedMotion$1() {
-  return typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches;
-}
-const FLOW_PROFILES = {
-  'model-training': {
-    cycles: [0.98, 3.05, 5.45],
-    amplitudes: [11.2, 11.0, 5.2],
-    speeds: [0.31, -0.53, 0.78],
-    bulgeAmplitude: 8.2,
-    timeScale: 1.0,
-    glowWidth: 5.8,
-    haloWidth: 20,
-    whiteAlpha: 0.72,
-    whiteWidth: 1.15,
-    cloudWidth: 0.17,
-    autoRange: [25, 66]
-  },
-  'agent-migration': {
-    cycles: [0.62, 1.55, 2.95],
-    amplitudes: [16.0, 7.8, 2.3],
-    speeds: [0.25, -0.4, 0.60],
-    bulgeAmplitude: 8.4,
-    timeScale: 0.82,
-    glowWidth: 6.3,
-    haloWidth: 21,
-    whiteAlpha: 0.18,
-    whiteWidth: 0.45,
-    cloudWidth: 0.18,
-    autoRange: [24, 62]
-  },
-  'visual-training': {
-    cycles: [0.88, 2.45, 4.35],
-    amplitudes: [12.8, 10.2, 4.3],
-    speeds: [0.28, -0.47, 0.69],
-    bulgeAmplitude: 7.3,
-    timeScale: 0.91,
-    glowWidth: 6.0,
-    haloWidth: 21,
-    whiteAlpha: 0.30,
-    whiteWidth: 0.55,
-    cloudWidth: 0.175,
-    autoRange: [20, 75]
-  },
-  // ponytail: first-pass tide = asymmetric surge on the 2D fallback path.
-  // Tune surge/amplitudes after visual QA against the WebGL overlay.
-  'tide': {
-    cycles: [0.72, 1.9, 4.2],
-    amplitudes: [19.0, 6.5, 1.5],
-    speeds: [0.42, -0.5, 0.66],
-    bulgeAmplitude: 9.5,
-    timeScale: 0.85,
-    glowWidth: 6.2,
-    haloWidth: 21,
-    whiteAlpha: 0.5,
-    whiteWidth: 1.0,
-    cloudWidth: 0.18,
-    autoRange: [18, 70],
-    surge: 0.55
-  }
-};
-class ProgressCapsuleController {
+  gradient.addColorStop(1, `${color}00`);
+  context.fillStyle = gradient;
+  context.fillRect(-radiusX, -radiusX, radiusX * 2, radiusX * 2);
+  context.restore();
+}
+function createAtlas(id) {
+  const palette = PALETTES[id] || PALETTES['visual-training'];
+  const canvas = document.createElement('canvas');
+  canvas.width = FRAME_WIDTH * PROGRESS_REFERENCE_FRAME_COUNT;
+  canvas.height = FRAME_HEIGHT;
+  const context = canvas.getContext('2d');
+  for (let frame = 0; frame < PROGRESS_REFERENCE_FRAME_COUNT; frame += 1) {
+    const phase = (frame / PROGRESS_REFERENCE_FRAME_COUNT) * Math.PI * 2;
+    const left = frame * FRAME_WIDTH;
+    context.save();
+    context.translate(left, 0);
+    context.fillStyle = palette[0];
+    context.fillRect(0, 0, FRAME_WIDTH, FRAME_HEIGHT);
+    context.globalCompositeOperation = 'screen';
+    drawCloud(context, 35 + Math.sin(phase * 0.83) * 5, 10 + Math.cos(phase * 0.61) * 5, 27, 18, palette[1], id === 'agent-migration' ? 0.32 : 0.42);
+    drawCloud(context, 45 + Math.cos(phase * 0.72) * 4, 23 + Math.sin(phase * 0.54) * 4, 22, 15, palette[2], 0.44);
+    drawCloud(context, 53 + Math.sin(phase * 1.07) * 2, 16 + Math.cos(phase * 0.89) * 6, 12, 13, palette[3], id === 'model-training' ? 0.30 : 0.20);
+    context.globalCompositeOperation = 'source-over';
+    const trough = context.createRadialGradient(41, 16, 1, 41, 16, 17);
+    trough.addColorStop(0, 'rgba(5,6,11,0.64)');
+    trough.addColorStop(0.58, 'rgba(6,7,12,0.26)');
+    trough.addColorStop(1, 'rgba(6,7,12,0)');
+    context.fillStyle = trough;
+    context.fillRect(20, 0, 44, FRAME_HEIGHT);
+    context.restore();
+  }
+  // A canvas is a valid TexImageSource. Keeping it directly avoids a PNG
+  // encode -> base64 allocation -> Image decode round trip at startup.
+  return { image: canvas, ready: true };
+}
+function getProgressReferenceAtlas(id) {
+  if (!CACHE[id]) CACHE[id] = createAtlas(id);
+  return CACHE[id];
+}
+/**
+ * Attach a WebGL2 fluid overlay to a progress capsule root.
+ *
+ * @param {object} params
+ * @param {HTMLElement} params.root    progress capsule root element
+ * @param {HTMLCanvasElement} params.canvas  2D fallback canvas (kept beneath)
+ * @param {object} params.preset      progress preset
+ * @param {() => number} params.getProgress  reads the current progress value
+ * @returns {{ update(flowTime: number): void, setDprCap(cap: number): void, dispose(): void } | null}
+ */
+function attachProgressFlowOverlay({
+  root,
+  canvas,
+  preset,
+  getProgress,
+  dprCap = 2,
+  powerPreference = 'high-performance',
+  onContextLost,
+  onContextRestored
+}) {
+  const overlay = document.createElement('canvas');
+  overlay.className = 'hj-progress-canvas hj-progress-overlay';
+  overlay.setAttribute('aria-hidden', 'true');
+  canvas.insertAdjacentElement('afterend', overlay);
+  const renderer = createProgressFlowRenderer(overlay, preset, {
+    powerPreference,
+    onContextLost,
+    onContextRestored
+  });
+  if (!renderer) {
+    overlay.remove();
+    return null;
+  }
+  const atlas = getProgressReferenceAtlas(preset.id);
+  root.classList.add('has-webgl-progress');
+  const resize = () => {
+    const bounds = root.getBoundingClientRect();
+    const width = Math.max(1, bounds.width);
+    const height = Math.max(1, bounds.height);
+    const dpr = Math.min(window.devicePixelRatio || 1, dprCap);
+    overlay.style.width = `${width}px`;
+    overlay.style.height = `${height}px`;
+    renderer.resize(width, height, dpr);
+  };
+  let resizeObserver = null;
+  let onWindowResize = null;
+  if (typeof ResizeObserver !== 'undefined') {
+    resizeObserver = new ResizeObserver(resize);
+    resizeObserver.observe(root);
+  } else {
+    onWindowResize = resize;
+    window.addEventListener('resize', onWindowResize);
+  }
+  resize();
+  return {
+    update(flowTime) {
+      const effectTime = flowTime % PROGRESS_REFERENCE_DURATION;
+      const progress = getProgress();
+      renderer.draw(
+        effectTime,
+        Number.isFinite(progress) ? progress : preset.initialProgress,
+        atlas.ready ? atlas.image : null
+      );
+    },
+    setColors(colors) {
+      renderer.setColors(colors);
+    },
+    setDprCap(cap) {
+      dprCap = cap;
+      resize();
+    },
+    dispose() {
+      if (resizeObserver) resizeObserver.disconnect();
+      if (onWindowResize) window.removeEventListener('resize', onWindowResize);
+      renderer.dispose();
+      overlay.remove();
+      root.classList.remove('has-webgl-progress');
+    }
+  };
+}
+function normalizeRange(min, max, fallbackMin = 0, fallbackMax = 100) {
+  let nextMin = toFiniteNumber(min);
+  let nextMax = toFiniteNumber(max);
+  if (nextMin === null) nextMin = fallbackMin;
+  if (nextMax === null) nextMax = fallbackMax;
+  if (nextMin > nextMax) {
+    const swap = nextMin;
+    nextMin = nextMax;
+    nextMax = swap;
+  }
+  return [nextMin, nextMax];
+}
+function clampProgressValue(value, min, max) {
+  const number = toFiniteNumber(value);
+  if (number === null) return null;
+  return Math.min(Math.max(number, min), max);
+}
+function normalizeProgressStep(step, fallback = 'any') {
+  if (step === 'any' || step == null) return 'any';
+  const increment = toFiniteNumber(step);
+  return increment !== null && increment > 0 ? increment : fallback;
+}
+function snapProgressValue(value, min, max, step = 'any') {
+  const clamped = clampProgressValue(value, min, max);
+  if (clamped === null) return null;
+  if (step === 'any' || step == null) return clamped;
+  const increment = normalizeProgressStep(step);
+  if (increment === 'any') return clamped;
+  const snapped = min + Math.round((clamped - min) / increment) * increment;
+  return Math.min(Math.max(Number(snapped.toFixed(12)), min), max);
+}
+function progressRatio(value, min, max) {
+  const range = max - min;
+  if (!Number.isFinite(range) || range <= 0) return 0;
+  return Math.min(Math.max((value - min) / range, 0), 1);
+}
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+const SUPPORTS_CTX_FILTER = typeof CanvasRenderingContext2D !== 'undefined' && 'filter' in CanvasRenderingContext2D.prototype;
+function stringSeed(value) {
+  let hash = 2166136261;
+  for (const character of value) {
+    hash ^= character.charCodeAt(0);
+    hash = Math.imul(hash, 16777619);
+  }
+  return (hash >>> 0) / 4294967295;
+}
+function interpolate(template, values) {
+  return template.replace(/\{(\w+)\}/g, (_, key) => (values[key] !== undefined ? values[key] : ''));
+}
+const FLOW_PROFILES = {
+  'model-training': {
+    cycles: [0.98, 3.05, 5.45],
+    amplitudes: [11.2, 11.0, 5.2],
+    speeds: [0.31, -0.53, 0.78],
+    bulgeAmplitude: 8.2,
+    timeScale: 1.0,
+    glowWidth: 5.8,
+    haloWidth: 20,
+    whiteAlpha: 0.72,
+    whiteWidth: 1.15,
+    cloudWidth: 0.17,
+    autoRange: [25, 66]
+  },
+  'agent-migration': {
+    cycles: [0.62, 1.55, 2.95],
+    amplitudes: [16.0, 7.8, 2.3],
+    speeds: [0.25, -0.4, 0.60],
+    bulgeAmplitude: 8.4,
+    timeScale: 0.82,
+    glowWidth: 6.3,
+    haloWidth: 21,
+    whiteAlpha: 0.18,
+    whiteWidth: 0.45,
+    cloudWidth: 0.18,
+    autoRange: [24, 62]
+  },
+  'visual-training': {
+    cycles: [0.88, 2.45, 4.35],
+    amplitudes: [12.8, 10.2, 4.3],
+    speeds: [0.28, -0.47, 0.69],
+    bulgeAmplitude: 7.3,
+    timeScale: 0.91,
+    glowWidth: 6.0,
+    haloWidth: 21,
+    whiteAlpha: 0.30,
+    whiteWidth: 0.55,
+    cloudWidth: 0.175,
+    autoRange: [20, 75]
+  },
+  // ponytail: first-pass tide = asymmetric surge on the 2D fallback path.
+  // Tune surge/amplitudes after visual QA against the WebGL overlay.
+  'tide': {
+    cycles: [0.72, 1.9, 4.2],
+    amplitudes: [19.0, 6.5, 1.5],
+    speeds: [0.42, -0.5, 0.66],
+    bulgeAmplitude: 9.5,
+    timeScale: 0.85,
+    glowWidth: 6.2,
+    haloWidth: 21,
+    whiteAlpha: 0.5,
+    whiteWidth: 1.0,
+    cloudWidth: 0.18,
+    autoRange: [18, 70],
+    surge: 0.55
+  }
+};
+class ProgressCapsuleController {
   constructor({ root, canvas, valueElement, preset, emitter, options, copy, dirty }) {
-    this.root = root;
-    this.canvas = canvas;
-    this.valueElement = valueElement;
-    this.preset = preset;
-    this.emitter = emitter;
+    this.root = root;
+    this.canvas = canvas;
+    this.valueElement = valueElement;
+    this.preset = preset;
+    this.emitter = emitter;
     this.options = options;
     this.copy = copy;
     this.dirty = dirty;
     this.valueSuffix = options.valueSuffix ?? copy.valueSuffix;
-    this.profile = preset.edgeStyle === 'tide'
-      ? FLOW_PROFILES.tide
-      : (FLOW_PROFILES[preset.id] || FLOW_PROFILES['visual-training']);
-    this.min = options.min ?? 0;
-    this.max = options.max ?? 100;
-    this.dprCap = dprCapFor(options.quality);
-    this.ctx = canvas.getContext('2d');
-    this.value = clamp(options.value ?? preset.initialProgress, this.min, this.max);
-    this.dragging = false;
-    this.webglActive = false;
-    this.flowTime = stringSeed(preset.id) * 31;
-    this.seed = stringSeed(`${preset.id}-reference`) * Math.PI * 2;
-    this.randomState = Math.floor(stringSeed(`${preset.id}-auto`) * 0x7fffffff) || 1;
-    this.dpr = 1;
-    this.width = 0;
-    this.height = 0;
-    this.handlers = {};
-    this.resizeObserver = typeof ResizeObserver !== 'undefined'
-      ? new ResizeObserver(() => this.resizeCanvas())
-      : null;
-    if (this.resizeObserver) this.resizeObserver.observe(this.root);
-    else window.addEventListener('resize', this.resizeCanvas);
-    this.suppressEvents = true;
-    this.setProgress(this.value, 'init');
-    this.suppressEvents = false;
-    this.bindEvents();
-    this.resizeCanvas();
-  }
-  random() {
-    this.randomState = (Math.imul(this.randomState, 1664525) + 1013904223) >>> 0;
-    return this.randomState / 4294967296;
-  }
-  setProgress(nextValue, source = 'auto') {
-    this.value = clamp(nextValue, this.min, this.max);
-    const rounded = Math.round(this.value);
-    this.root.style.setProperty('--progress', this.value.toFixed(2));
-    this.root.setAttribute('aria-valuenow', String(rounded));
-    this.root.setAttribute('aria-valuetext', `${rounded}${this.valueSuffix}`);
-    if (this.valueElement) this.valueElement.textContent = `${rounded}${this.valueSuffix}`;
+    this.profile = preset.edgeStyle === 'tide'
+      ? FLOW_PROFILES.tide
+      : (FLOW_PROFILES[preset.id] || FLOW_PROFILES['visual-training']);
+    [this.min, this.max] = normalizeRange(options.min, options.max);
+    this.step = normalizeProgressStep(options.step);
+    this.precision = Number.isInteger(Number(options.precision))
+      ? clamp(Number(options.precision), 0, 20)
+      : 0;
+    this.formatValue = typeof options.formatValue === 'function' ? options.formatValue : null;
+    this.direction = options.direction === 'rtl' ? 'rtl' : 'ltr';
+    this.dprCap = effectiveDprCap(options.quality, options.renderScale);
+    this.ctx = canvas.getContext('2d');
+    this.value = snapProgressValue(options.value ?? preset.initialProgress, this.min, this.max, this.step);
+    if (this.value === null) this.value = clamp(preset.initialProgress, this.min, this.max);
+    this.dragging = false;
+    this.webglActive = false;
+    this.flowTime = stringSeed(preset.id) * 31;
+    this.seed = stringSeed(`${preset.id}-reference`) * Math.PI * 2;
+    this.randomState = Math.floor(stringSeed(`${preset.id}-auto`) * 0x7fffffff) || 1;
+    this.dpr = 1;
+    this.width = 0;
+    this.height = 0;
+    this.handlers = {};
+    this.onResize = () => {
+      this.resizeCanvas();
+      if (typeof this.options.onResize === 'function') this.options.onResize();
+    };
+    this.resizeObserver = typeof ResizeObserver !== 'undefined'
+      ? new ResizeObserver(this.onResize)
+      : null;
+    if (this.resizeObserver) this.resizeObserver.observe(this.root);
+    else window.addEventListener('resize', this.onResize);
+    this.suppressEvents = true;
+    this.setProgress(this.value, 'init');
+    this.suppressEvents = false;
+    this.bindEvents();
+    this.resizeCanvas();
+  }
+  random() {
+    this.randomState = (Math.imul(this.randomState, 1664525) + 1013904223) >>> 0;
+    return this.randomState / 4294967296;
+  }
+  displayText() {
+    if (this.formatValue) {
+      return String(this.formatValue(this.value, {
+        min: this.min,
+        max: this.max,
+        suffix: this.valueSuffix
+      }));
+    }
+    const number = this.precision > 0 ? this.value.toFixed(this.precision) : String(Math.round(this.value));
+    return `${number}${this.valueSuffix}`;
+  }
+  syncValueDom() {
+    const text = this.displayText();
+    this.root.style.setProperty('--progress', this.value.toFixed(2));
+    this.root.style.setProperty('--progress-ratio', progressRatio(this.value, this.min, this.max).toFixed(4));
+    this.root.setAttribute('aria-valuenow', String(this.value));
+    this.root.setAttribute('aria-valuetext', text);
+    if (this.valueElement) this.valueElement.textContent = text;
+  }
+  setProgress(nextValue, source = 'auto') {
+    const next = snapProgressValue(nextValue, this.min, this.max, this.step);
+    if (next === null) return false;
+    this.value = next;
+    this.syncValueDom();
     if (!this.suppressEvents) {
       if (this.dirty) this.dirty.value = true;
       this.emitter.emit('change', { value: this.value, source });
     }
+    return true;
   }
   setValueSuffix(suffix) {
+    if (this.dirty) this.dirty.valueSuffix = true;
     this.valueSuffix = String(suffix == null ? '' : suffix);
-    const rounded = Math.round(this.value);
-    if (this.valueElement) this.valueElement.textContent = `${rounded}${this.valueSuffix}`;
-    this.root.setAttribute('aria-valuetext', `${rounded}${this.valueSuffix}`);
+    this.syncValueDom();
+    return this;
+  }
+  setStep(step) {
+    const nextStep = normalizeProgressStep(step, this.step);
+    if (nextStep === this.step) return this;
+    if (this.dirty) this.dirty.step = true;
+    this.step = nextStep;
+    const next = snapProgressValue(this.value, this.min, this.max, this.step);
+    if (next !== null && next !== this.value) this.setProgress(next, 'prop');
+    return this;
+  }
+  setPrecision(precision) {
+    const value = Number(precision);
+    if (!Number.isInteger(value) || value < 0 || value > 20) return this;
+    if (this.dirty) this.dirty.precision = true;
+    this.precision = value;
+    this.syncValueDom();
+    return this;
+  }
+  setFormatValue(formatter) {
+    if (formatter != null && typeof formatter !== 'function') return this;
+    if (this.dirty) this.dirty.formatValue = true;
+    this.formatValue = formatter || null;
+    this.syncValueDom();
+    return this;
+  }
+  setDirection(direction) {
+    if (this.dirty) this.dirty.direction = true;
+    this.direction = direction === 'rtl' ? 'rtl' : 'ltr';
+    this.root.dataset.direction = this.direction;
     return this;
   }
   setShowValue(show) {
+    if (this.dirty) this.dirty.showValue = true;
     if (this.valueElement) this.valueElement.hidden = show === false;
     return this;
   }
-  resizeCanvas() {
-    const bounds = this.root.getBoundingClientRect();
-    this.dpr = Math.min(window.devicePixelRatio || 1, this.dprCap);
-    this.width = Math.max(1, bounds.width);
-    this.height = Math.max(1, bounds.height);
-    this.canvas.width = Math.round(this.width * this.dpr);
-    this.canvas.height = Math.round(this.height * this.dpr);
-    this.canvas.style.width = `${this.width}px`;
-    this.canvas.style.height = `${this.height}px`;
-    this.ctx.setTransform(this.dpr, 0, 0, this.dpr, 0, 0);
-  }
-  edgeEnvelope(yRatio) {
-    const edge = Math.sin(Math.PI * clamp(yRatio, 0, 1));
-    return Math.pow(Math.max(edge, 0), 0.48);
-  }
-  localBulge(yRatio, time, index) {
-    const direction = index === 0 ? 1 : -1;
-    const center = 0.28 + index * 0.40 + Math.sin(time * (0.19 + index * 0.035) + this.seed * (1.1 + index)) * 0.13;
-    const width = 0.075 + index * 0.016 + Math.sin(time * 0.13 + this.seed * 2.1) * 0.012;
-    const distance = (yRatio - center) / Math.max(width, 0.035);
-    const gaussian = Math.exp(-0.5 * distance * distance);
-    return gaussian * Math.sin(time * (0.71 + index * 0.09) + this.seed * (2.7 + index)) * this.profile.bulgeAmplitude * direction;
-  }
-  edgeOffset(y, time, phase = 0, amplitudeScale = 1) {
-    const yRatio = this.height > 0 ? y / this.height : 0;
-    const envelope = this.edgeEnvelope(yRatio);
-    const scaledTime = time * this.profile.timeScale;
-    const phaseTime = this.profile.surge
-      ? scaledTime + this.profile.surge * Math.sin(scaledTime * 2)
-      : scaledTime;
-    let offset = 0;
-    for (let index = 0; index < this.profile.cycles.length; index += 1) {
-      const cycle = this.profile.cycles[index];
-      const amplitude = this.profile.amplitudes[index];
-      const speed = this.profile.speeds[index];
-      const amplitudeMotion = 0.74 + 0.26 * Math.sin(
-        phaseTime * (0.17 + index * 0.045) + this.seed * (index + 2.4)
-      );
-      offset += Math.sin(
-        yRatio * Math.PI * 2 * cycle + phaseTime * speed * Math.PI * 2 + this.seed * (index + 1) + phase
-      ) * amplitude * amplitudeMotion;
-    }
-    offset += this.localBulge(yRatio, phaseTime + phase, 0);
-    offset += this.localBulge(yRatio, phaseTime - phase * 0.7, 1);
-    return offset * envelope * amplitudeScale;
-  }
-  createEdgePath(ctx, baseX, time, phase = 0, amplitudeScale = 1) {
-    const step = Math.max(1.8, this.height / 92);
-    ctx.beginPath();
-    for (let y = 0; y <= this.height + step; y += step) {
-      const x = baseX + this.edgeOffset(y, time, phase, amplitudeScale);
-      if (y === 0) ctx.moveTo(x, y);
-      else ctx.lineTo(x, y);
-    }
-  }
-  createFillPath(ctx, baseX, time, phase = 0, amplitudeScale = 1) {
-    const step = Math.max(1.8, this.height / 92);
-    ctx.beginPath();
-    ctx.moveTo(0, 0);
-    ctx.lineTo(baseX + this.edgeOffset(0, time, phase, amplitudeScale), 0);
-    for (let y = step; y <= this.height + step; y += step) {
-      ctx.lineTo(baseX + this.edgeOffset(y, time, phase, amplitudeScale), y);
-    }
-    ctx.lineTo(0, this.height);
-    ctx.closePath();
-  }
-  drawEllipticalGlow(x, y, radiusX, radiusY, color, alpha) {
-    const ctx = this.ctx;
-    ctx.save();
-    ctx.translate(x, y);
-    ctx.scale(1, radiusY / radiusX);
-    const gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, radiusX);
-    gradient.addColorStop(0, hexToRgba(color, alpha));
-    gradient.addColorStop(0.42, hexToRgba(color, alpha * 0.48));
-    gradient.addColorStop(1, hexToRgba(color, 0));
-    ctx.globalCompositeOperation = 'screen';
-    ctx.fillStyle = gradient;
-    ctx.fillRect(-radiusX, -radiusX, radiusX * 2, radiusX * 2);
-    ctx.restore();
-  }
-  drawDarkEllipticalShadow(x, y, radiusX, radiusY, alpha) {
-    const ctx = this.ctx;
-    ctx.save();
-    ctx.translate(x, y);
-    ctx.scale(1, radiusY / radiusX);
-    const gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, radiusX);
-    gradient.addColorStop(0, `rgba(6, 6, 11, ${alpha})`);
-    gradient.addColorStop(0.54, `rgba(8, 8, 14, ${alpha * 0.62})`);
-    gradient.addColorStop(1, 'rgba(8, 8, 14, 0)');
-    ctx.globalCompositeOperation = 'source-over';
-    ctx.fillStyle = gradient;
-    ctx.fillRect(-radiusX, -radiusX, radiusX * 2, radiusX * 2);
-    ctx.restore();
-  }
-  drawColorClouds(shoreline, time, accentA, accentB, glow) {
-    this.ctx;
-    const width = this.width;
-    const height = this.height;
-    const scale = this.profile.cloudWidth;
-    const t = time * this.profile.timeScale;
-    const upperY = height * (0.28 + Math.sin(t * 0.24 + this.seed) * 0.13);
-    const lowerY = height * (0.70 + Math.cos(t * 0.21 + this.seed * 1.7) * 0.12);
-    const middleY = height * (0.49 + Math.sin(t * 0.31 + this.seed * 2.3) * 0.15);
-    const farX = shoreline - width * 0.095;
-    const farRx = Math.max(52, width * scale);
-    const farRy = height * 0.42;
-    this.drawEllipticalGlow(farX, upperY, farRx, farRy, accentA, 0.38);
-    this.drawDarkEllipticalShadow(
-      farX + farRx * 0.16,
-      upperY,
-      farRx * 0.58,
-      farRy * 0.66,
-      0.74
-    );
-    const lowerX = shoreline - width * 0.072;
-    const lowerRx = Math.max(44, width * scale * 0.82);
-    const lowerRy = height * 0.36;
-    this.drawEllipticalGlow(lowerX, lowerY, lowerRx, lowerRy, accentB, 0.31);
-    this.drawDarkEllipticalShadow(
-      lowerX + lowerRx * 0.14,
-      lowerY,
-      lowerRx * 0.54,
-      lowerRy * 0.62,
-      0.64
-    );
-    this.drawEllipticalGlow(
-      shoreline - width * 0.034,
-      middleY,
-      Math.max(30, width * scale * 0.48),
-      height * 0.27,
-      glow,
-      0.20
-    );
-  }
-  drawPathBand({ baseX, time, phase, amplitudeScale, color, alpha, blur, width, composite = 'screen' }) {
-    const ctx = this.ctx;
-    this.createEdgePath(ctx, baseX, time, phase, amplitudeScale);
-    ctx.save();
-    ctx.globalCompositeOperation = composite;
-    ctx.globalAlpha = alpha;
-    // Safari < 18 and some old WebViews ignore ctx.filter; setting it is a
-    // no-op there, so only assign when supported to keep intent explicit.
-    if (SUPPORTS_CTX_FILTER) ctx.filter = `blur(${blur}px)`;
-    ctx.strokeStyle = color;
-    ctx.lineWidth = width;
-    ctx.stroke();
-    ctx.restore();
-  }
-  setRange(min, max) {
-    if (min > max) {
-      const swap = min;
-      min = max;
-      max = swap;
+  resizeCanvas() {
+    const bounds = this.root.getBoundingClientRect();
+    this.dpr = Math.min(window.devicePixelRatio || 1, this.dprCap);
+    this.width = Math.max(1, bounds.width);
+    this.height = Math.max(1, bounds.height);
+    this.canvas.width = Math.round(this.width * this.dpr);
+    this.canvas.height = Math.round(this.height * this.dpr);
+    this.canvas.style.width = `${this.width}px`;
+    this.canvas.style.height = `${this.height}px`;
+    this.ctx.setTransform(this.dpr, 0, 0, this.dpr, 0, 0);
+  }
+  edgeEnvelope(yRatio) {
+    const edge = Math.sin(Math.PI * clamp(yRatio, 0, 1));
+    return Math.pow(Math.max(edge, 0), 0.48);
+  }
+  localBulge(yRatio, time, index) {
+    const direction = index === 0 ? 1 : -1;
+    const center = 0.28 + index * 0.40 + Math.sin(time * (0.19 + index * 0.035) + this.seed * (1.1 + index)) * 0.13;
+    const width = 0.075 + index * 0.016 + Math.sin(time * 0.13 + this.seed * 2.1) * 0.012;
+    const distance = (yRatio - center) / Math.max(width, 0.035);
+    const gaussian = Math.exp(-0.5 * distance * distance);
+    return gaussian * Math.sin(time * (0.71 + index * 0.09) + this.seed * (2.7 + index)) * this.profile.bulgeAmplitude * direction;
+  }
+  edgeOffset(y, time, phase = 0, amplitudeScale = 1) {
+    const yRatio = this.height > 0 ? y / this.height : 0;
+    const envelope = this.edgeEnvelope(yRatio);
+    const scaledTime = time * this.profile.timeScale;
+    const phaseTime = this.profile.surge
+      ? scaledTime + this.profile.surge * Math.sin(scaledTime * 2)
+      : scaledTime;
+    let offset = 0;
+    for (let index = 0; index < this.profile.cycles.length; index += 1) {
+      const cycle = this.profile.cycles[index];
+      const amplitude = this.profile.amplitudes[index];
+      const speed = this.profile.speeds[index];
+      const amplitudeMotion = 0.74 + 0.26 * Math.sin(
+        phaseTime * (0.17 + index * 0.045) + this.seed * (index + 2.4)
+      );
+      offset += Math.sin(
+        yRatio * Math.PI * 2 * cycle + phaseTime * speed * Math.PI * 2 + this.seed * (index + 1) + phase
+      ) * amplitude * amplitudeMotion;
+    }
+    offset += this.localBulge(yRatio, phaseTime + phase, 0);
+    offset += this.localBulge(yRatio, phaseTime - phase * 0.7, 1);
+    return offset * envelope * amplitudeScale;
+  }
+  createEdgePath(ctx, baseX, time, phase = 0, amplitudeScale = 1) {
+    const step = Math.max(1.8, this.height / 92);
+    ctx.beginPath();
+    for (let y = 0; y <= this.height + step; y += step) {
+      const x = baseX + this.edgeOffset(y, time, phase, amplitudeScale);
+      if (y === 0) ctx.moveTo(x, y);
+      else ctx.lineTo(x, y);
+    }
+  }
+  createFillPath(ctx, baseX, time, phase = 0, amplitudeScale = 1) {
+    const step = Math.max(1.8, this.height / 92);
+    ctx.beginPath();
+    ctx.moveTo(0, 0);
+    ctx.lineTo(baseX + this.edgeOffset(0, time, phase, amplitudeScale), 0);
+    for (let y = step; y <= this.height + step; y += step) {
+      ctx.lineTo(baseX + this.edgeOffset(y, time, phase, amplitudeScale), y);
     }
-    this.min = min;
-    this.max = max;
-    const clamped = clamp(this.value, this.min, this.max);
-    if (clamped !== this.value) this.setProgress(clamped, 'prop');
-  }
+    ctx.lineTo(0, this.height);
+    ctx.closePath();
+  }
+  drawEllipticalGlow(x, y, radiusX, radiusY, color, alpha) {
+    const ctx = this.ctx;
+    ctx.save();
+    ctx.translate(x, y);
+    ctx.scale(1, radiusY / radiusX);
+    const gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, radiusX);
+    gradient.addColorStop(0, hexToRgba(color, alpha));
+    gradient.addColorStop(0.42, hexToRgba(color, alpha * 0.48));
+    gradient.addColorStop(1, hexToRgba(color, 0));
+    ctx.globalCompositeOperation = 'screen';
+    ctx.fillStyle = gradient;
+    ctx.fillRect(-radiusX, -radiusX, radiusX * 2, radiusX * 2);
+    ctx.restore();
+  }
+  drawDarkEllipticalShadow(x, y, radiusX, radiusY, alpha) {
+    const ctx = this.ctx;
+    ctx.save();
+    ctx.translate(x, y);
+    ctx.scale(1, radiusY / radiusX);
+    const gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, radiusX);
+    gradient.addColorStop(0, `rgba(6, 6, 11, ${alpha})`);
+    gradient.addColorStop(0.54, `rgba(8, 8, 14, ${alpha * 0.62})`);
+    gradient.addColorStop(1, 'rgba(8, 8, 14, 0)');
+    ctx.globalCompositeOperation = 'source-over';
+    ctx.fillStyle = gradient;
+    ctx.fillRect(-radiusX, -radiusX, radiusX * 2, radiusX * 2);
+    ctx.restore();
+  }
+  drawColorClouds(shoreline, time, accentA, accentB, glow) {
+    this.ctx;
+    const width = this.width;
+    const height = this.height;
+    const scale = this.profile.cloudWidth;
+    const t = time * this.profile.timeScale;
+    const upperY = height * (0.28 + Math.sin(t * 0.24 + this.seed) * 0.13);
+    const lowerY = height * (0.70 + Math.cos(t * 0.21 + this.seed * 1.7) * 0.12);
+    const middleY = height * (0.49 + Math.sin(t * 0.31 + this.seed * 2.3) * 0.15);
+    const farX = shoreline - width * 0.095;
+    const farRx = Math.max(52, width * scale);
+    const farRy = height * 0.42;
+    this.drawEllipticalGlow(farX, upperY, farRx, farRy, accentA, 0.38);
+    this.drawDarkEllipticalShadow(
+      farX + farRx * 0.16,
+      upperY,
+      farRx * 0.58,
+      farRy * 0.66,
+      0.74
+    );
+    const lowerX = shoreline - width * 0.072;
+    const lowerRx = Math.max(44, width * scale * 0.82);
+    const lowerRy = height * 0.36;
+    this.drawEllipticalGlow(lowerX, lowerY, lowerRx, lowerRy, accentB, 0.31);
+    this.drawDarkEllipticalShadow(
+      lowerX + lowerRx * 0.14,
+      lowerY,
+      lowerRx * 0.54,
+      lowerRy * 0.62,
+      0.64
+    );
+    this.drawEllipticalGlow(
+      shoreline - width * 0.034,
+      middleY,
+      Math.max(30, width * scale * 0.48),
+      height * 0.27,
+      glow,
+      0.20
+    );
+  }
+  drawPathBand({ baseX, time, phase, amplitudeScale, color, alpha, blur, width, composite = 'screen' }) {
+    const ctx = this.ctx;
+    this.createEdgePath(ctx, baseX, time, phase, amplitudeScale);
+    ctx.save();
+    ctx.globalCompositeOperation = composite;
+    ctx.globalAlpha = alpha;
+    // Safari < 18 and some old WebViews ignore ctx.filter; setting it is a
+    // no-op there, so only assign when supported to keep intent explicit.
+    if (SUPPORTS_CTX_FILTER) ctx.filter = `blur(${blur}px)`;
+    ctx.strokeStyle = color;
+    ctx.lineWidth = width;
+    ctx.stroke();
+    ctx.restore();
+  }
+  setRange(min, max) {
+    const nextRange = normalizeRange(min, max, this.min, this.max);
+    this.min = nextRange[0];
+    this.max = nextRange[1];
+    this.root.setAttribute('aria-valuemin', String(this.min));
+    this.root.setAttribute('aria-valuemax', String(this.max));
+    const next = snapProgressValue(this.value, this.min, this.max, this.step);
+    if (next !== this.value) this.setProgress(next, 'prop');
+    else this.syncValueDom();
+    return this;
+  }
   drawReferenceFlow() {
-    const ctx = this.ctx;
-    const width = this.width;
-    const height = this.height;
-    if (!ctx || width <= 0 || height <= 0) return;
+    const ctx = this.ctx;
+    const width = this.width;
+    const height = this.height;
+    if (!ctx || width <= 0 || height <= 0) return;
     const range = Math.max(this.max - this.min, 1);
     const shoreline = width * Math.min(Math.max((this.value - this.min) / range, 0), 1);
-    const time = this.flowTime;
-    const [dark, accentA, accentB, glow] = this.preset.colors;
-    ctx.clearRect(0, 0, width, height);
-    ctx.fillStyle = '#202126';
-    ctx.fillRect(0, 0, width, height);
-    this.createFillPath(ctx, shoreline, time, 0, 1);
-    const bodyGradient = ctx.createLinearGradient(0, 0, Math.max(shoreline, 1), 0);
-    bodyGradient.addColorStop(0, dark);
-    bodyGradient.addColorStop(0.74, dark);
-    bodyGradient.addColorStop(0.89, hexToRgba(dark, 0.99));
-    bodyGradient.addColorStop(0.955, hexToRgba(accentA, 0.09));
-    bodyGradient.addColorStop(0.992, hexToRgba(accentB, 0.54));
-    bodyGradient.addColorStop(1, hexToRgba(glow, 0.78));
-    ctx.fillStyle = bodyGradient;
-    ctx.fill();
-    this.drawColorClouds(shoreline, time, accentA, accentB, glow);
-    this.drawPathBand({
-      baseX: shoreline - width * 0.105,
-      time,
-      phase: 1.42,
-      amplitudeScale: 1.18,
-      color: accentA,
-      alpha: 0.22,
-      blur: 21,
-      width: 54
-    });
-    this.drawPathBand({
-      baseX: shoreline - width * 0.073,
-      time,
-      phase: -0.92,
-      amplitudeScale: 1.06,
-      color: accentB,
-      alpha: 0.30,
-      blur: 15,
-      width: 42
-    });
-    this.drawPathBand({
-      baseX: shoreline - width * 0.047,
-      time,
-      phase: 0.42,
-      amplitudeScale: 0.94,
-      color: 'rgba(5, 5, 10, 0.92)',
-      alpha: 0.72,
-      blur: 12,
-      width: 34,
-      composite: 'source-over'
-    });
-    this.drawPathBand({
-      baseX: shoreline - width * 0.025,
-      time,
-      phase: -0.28,
-      amplitudeScale: 0.96,
-      color: accentB,
-      alpha: 0.66,
-      blur: 8,
-      width: 28
-    });
-    ctx.save();
-    this.createFillPath(ctx, shoreline, time, 0, 1);
-    ctx.clip();
-    this.createEdgePath(ctx, shoreline, time, 0, 1);
-    ctx.save();
-    ctx.globalCompositeOperation = 'screen';
-    ctx.strokeStyle = hexToRgba(accentA, 0.20);
-    ctx.lineWidth = this.profile.haloWidth;
-    ctx.shadowColor = accentA;
-    ctx.shadowBlur = this.profile.haloWidth * 0.72;
-    ctx.stroke();
-    ctx.restore();
-    ctx.save();
-    ctx.globalCompositeOperation = 'screen';
-    ctx.strokeStyle = hexToRgba(accentB, 0.78);
-    ctx.lineWidth = this.profile.glowWidth + 4.2;
-    ctx.shadowColor = accentB;
-    ctx.shadowBlur = 8;
-    ctx.stroke();
-    ctx.restore();
-    ctx.save();
-    ctx.globalCompositeOperation = 'screen';
-    ctx.strokeStyle = hexToRgba(glow, 0.88);
-    ctx.lineWidth = this.profile.glowWidth;
-    ctx.shadowColor = glow;
-    ctx.shadowBlur = 5;
-    ctx.stroke();
-    ctx.restore();
-    ctx.restore();
-    ctx.save();
-    ctx.globalCompositeOperation = 'screen';
-    ctx.strokeStyle = hexToRgba(glow, 0.84);
-    ctx.lineWidth = 2.15;
-    ctx.shadowColor = glow;
-    ctx.shadowBlur = 2.5;
-    this.createEdgePath(ctx, shoreline, time, 0, 1);
-    ctx.stroke();
-    ctx.restore();
-    if (this.profile.whiteAlpha > 0.05) {
-      ctx.save();
-      ctx.globalCompositeOperation = 'screen';
-      ctx.strokeStyle = `rgba(255,255,245,${this.profile.whiteAlpha})`;
-      ctx.lineWidth = this.profile.whiteWidth;
-      this.createEdgePath(ctx, shoreline, time, 0, 1);
-      ctx.stroke();
-      ctx.restore();
-    }
-  }
+    const time = this.flowTime;
+    const [dark, accentA, accentB, glow] = this.preset.colors;
+    ctx.clearRect(0, 0, width, height);
+    ctx.fillStyle = '#202126';
+    ctx.fillRect(0, 0, width, height);
+    this.createFillPath(ctx, shoreline, time, 0, 1);
+    const bodyGradient = ctx.createLinearGradient(0, 0, Math.max(shoreline, 1), 0);
+    bodyGradient.addColorStop(0, dark);
+    bodyGradient.addColorStop(0.74, dark);
+    bodyGradient.addColorStop(0.89, hexToRgba(dark, 0.99));
+    bodyGradient.addColorStop(0.955, hexToRgba(accentA, 0.09));
+    bodyGradient.addColorStop(0.992, hexToRgba(accentB, 0.54));
+    bodyGradient.addColorStop(1, hexToRgba(glow, 0.78));
+    ctx.fillStyle = bodyGradient;
+    ctx.fill();
+    this.drawColorClouds(shoreline, time, accentA, accentB, glow);
+    this.drawPathBand({
+      baseX: shoreline - width * 0.105,
+      time,
+      phase: 1.42,
+      amplitudeScale: 1.18,
+      color: accentA,
+      alpha: 0.22,
+      blur: 21,
+      width: 54
+    });
+    this.drawPathBand({
+      baseX: shoreline - width * 0.073,
+      time,
+      phase: -0.92,
+      amplitudeScale: 1.06,
+      color: accentB,
+      alpha: 0.30,
+      blur: 15,
+      width: 42
+    });
+    this.drawPathBand({
+      baseX: shoreline - width * 0.047,
+      time,
+      phase: 0.42,
+      amplitudeScale: 0.94,
+      color: 'rgba(5, 5, 10, 0.92)',
+      alpha: 0.72,
+      blur: 12,
+      width: 34,
+      composite: 'source-over'
+    });
+    this.drawPathBand({
+      baseX: shoreline - width * 0.025,
+      time,
+      phase: -0.28,
+      amplitudeScale: 0.96,
+      color: accentB,
+      alpha: 0.66,
+      blur: 8,
+      width: 28
+    });
+    ctx.save();
+    this.createFillPath(ctx, shoreline, time, 0, 1);
+    ctx.clip();
+    this.createEdgePath(ctx, shoreline, time, 0, 1);
+    ctx.save();
+    ctx.globalCompositeOperation = 'screen';
+    ctx.strokeStyle = hexToRgba(accentA, 0.20);
+    ctx.lineWidth = this.profile.haloWidth;
+    ctx.shadowColor = accentA;
+    ctx.shadowBlur = this.profile.haloWidth * 0.72;
+    ctx.stroke();
+    ctx.restore();
+    ctx.save();
+    ctx.globalCompositeOperation = 'screen';
+    ctx.strokeStyle = hexToRgba(accentB, 0.78);
+    ctx.lineWidth = this.profile.glowWidth + 4.2;
+    ctx.shadowColor = accentB;
+    ctx.shadowBlur = 8;
+    ctx.stroke();
+    ctx.restore();
+    ctx.save();
+    ctx.globalCompositeOperation = 'screen';
+    ctx.strokeStyle = hexToRgba(glow, 0.88);
+    ctx.lineWidth = this.profile.glowWidth;
+    ctx.shadowColor = glow;
+    ctx.shadowBlur = 5;
+    ctx.stroke();
+    ctx.restore();
+    ctx.restore();
+    ctx.save();
+    ctx.globalCompositeOperation = 'screen';
+    ctx.strokeStyle = hexToRgba(glow, 0.84);
+    ctx.lineWidth = 2.15;
+    ctx.shadowColor = glow;
+    ctx.shadowBlur = 2.5;
+    this.createEdgePath(ctx, shoreline, time, 0, 1);
+    ctx.stroke();
+    ctx.restore();
+    if (this.profile.whiteAlpha > 0.05) {
+      ctx.save();
+      ctx.globalCompositeOperation = 'screen';
+      ctx.strokeStyle = `rgba(255,255,245,${this.profile.whiteAlpha})`;
+      ctx.lineWidth = this.profile.whiteWidth;
+      this.createEdgePath(ctx, shoreline, time, 0, 1);
+      ctx.stroke();
+      ctx.restore();
+    }
+  }
   updateFromPointer(event) {
     const bounds = this.root.getBoundingClientRect();
-    const ratio = bounds.width > 0 ? (event.clientX - bounds.left) / bounds.width : 0;
+    let ratio = bounds.width > 0 ? (event.clientX - bounds.left) / bounds.width : 0;
+    if (this.direction === 'rtl') ratio = 1 - ratio;
     this.setProgress(this.min + ratio * (this.max - this.min), 'drag');
   }
+  onKeyDown(event) {
+    const range = this.max - this.min;
+    const configuredStep = Number(this.step);
+    const step = Number.isFinite(configuredStep) && configuredStep > 0
+      ? configuredStep
+      : Math.max(range / 100, 1e-7);
+    const direction = this.direction === 'rtl' ? -1 : 1;
+    const aliases = { Left: 'ArrowLeft', Right: 'ArrowRight', Up: 'ArrowUp', Down: 'ArrowDown' };
+    const keyCodes = {
+      35: 'End', 36: 'Home', 33: 'PageUp', 34: 'PageDown',
+      37: 'ArrowLeft', 38: 'ArrowUp', 39: 'ArrowRight', 40: 'ArrowDown'
+    };
+    const key = aliases[event.key] || event.key || keyCodes[event.keyCode];
+    let next = null;
+    if (key === 'ArrowRight') next = this.value + step * direction;
+    else if (key === 'ArrowLeft') next = this.value - step * direction;
+    else if (key === 'ArrowUp') next = this.value + step;
+    else if (key === 'ArrowDown') next = this.value - step;
+    else if (key === 'PageUp') next = this.value + step * 10;
+    else if (key === 'PageDown') next = this.value - step * 10;
+    else if (key === 'Home') next = this.min;
+    else if (key === 'End') next = this.max;
+    if (next === null) return;
+    event.preventDefault();
+    this.setProgress(next, 'keyboard');
+  }
   beginDrag(event) {
     if (event.button !== undefined && event.button !== 0) return;
     event.preventDefault();
@@ -2342,85 +2750,101 @@ class ProgressCapsuleController {
     this.pendingPointer = null;
     if (pending) this.updateFromPointer(pending);
     this.root.classList.remove('is-dragging');
-    try {
-      if (event?.pointerId !== undefined && this.root.hasPointerCapture?.(event.pointerId)) {
-        this.root.releasePointerCapture(event.pointerId);
-      }
-    } catch {}
-    this.emitter.emit('dragend', { value: this.value });
-  }
-  bindEvents() {
-    if (this.options.draggable !== false) {
-      this.handlers.pointerdown = (event) => this.beginDrag(event);
-      this.handlers.pointermove = (event) => this.moveDrag(event);
-      this.handlers.pointerup = (event) => this.endDrag(event);
-      this.handlers.pointercancel = (event) => this.endDrag(event);
-      this.root.addEventListener('pointerdown', this.handlers.pointerdown);
-      this.root.addEventListener('pointermove', this.handlers.pointermove);
-      this.root.addEventListener('pointerup', this.handlers.pointerup);
-      this.root.addEventListener('pointercancel', this.handlers.pointercancel);
-    }
-  }
-  update(delta, paused) {
-    if (!paused) this.flowTime += delta;
-  }
-  draw() {
-    // Performance fix: when the WebGL overlay is active the 2D layer is
-    // hidden behind it, so drawing it every frame would be wasted CPU.
-    if (this.webglActive) return;
-    this.drawReferenceFlow();
-  }
-  randomize() {
-    this.flowTime = this.random() * 40;
-  }
-  setColors(colors) {
-    if (!Array.isArray(colors) || colors.length !== 4) return;
-    this.preset = { ...this.preset, colors };
-  }
+    try {
+      if (event?.pointerId !== undefined && this.root.hasPointerCapture?.(event.pointerId)) {
+        this.root.releasePointerCapture(event.pointerId);
+      }
+    } catch {}
+    this.emitter.emit('dragend', { value: this.value });
+  }
+  bindEvents() {
+    if (this.options.draggable !== false) {
+      this.handlers.pointerdown = (event) => this.beginDrag(event);
+      this.handlers.pointermove = (event) => this.moveDrag(event);
+      this.handlers.pointerup = (event) => this.endDrag(event);
+      this.handlers.pointercancel = (event) => this.endDrag(event);
+      this.root.addEventListener('pointerdown', this.handlers.pointerdown);
+      this.root.addEventListener('pointermove', this.handlers.pointermove);
+      this.root.addEventListener('pointerup', this.handlers.pointerup);
+      this.root.addEventListener('pointercancel', this.handlers.pointercancel);
+    }
+    if (this.options.keyboard !== false) {
+      this.handlers.keydown = (event) => this.onKeyDown(event);
+      this.root.addEventListener('keydown', this.handlers.keydown);
+    }
+  }
+  update(delta, paused) {
+    if (!paused) this.flowTime += delta;
+  }
+  draw() {
+    // Performance fix: when the WebGL overlay is active the 2D layer is
+    // hidden behind it, so drawing it every frame would be wasted CPU.
+    if (this.webglActive) return;
+    this.drawReferenceFlow();
+  }
+  randomize() {
+    this.flowTime = this.random() * 40;
+    return this.flowTime;
+  }
+  setColors(colors) {
+    if (!Array.isArray(colors) || colors.length !== 4) return;
+    this.preset.colors = [...colors];
+  }
   dispose() {
     if (this._dragRaf) cancelAnimationFrame(this._dragRaf);
     if (this.resizeObserver) this.resizeObserver.disconnect();
-    else window.removeEventListener('resize', this.resizeCanvas);
-    for (const name of Object.keys(this.handlers)) {
-      const handler = this.handlers[name];
-      this.root.removeEventListener(name, handler);
-    }
-    this.handlers = {};
-  }
-}
-/**
+    else window.removeEventListener('resize', this.onResize);
+    for (const name of Object.keys(this.handlers)) {
+      const handler = this.handlers[name];
+      this.root.removeEventListener(name, handler);
+    }
+    this.handlers = {};
+  }
+}
+/**
  * Mount a fluid progress capsule into `container`.
  *
- * Options: preset (literary name), width, height, value, min, max,
- * draggable, colors, edgeStyle, textRatio (0-100, text region
+ * Options: preset (literary name), width, height, value/modelValue, min, max,
+ * step, draggable, keyboard, direction, precision/formatValue, colors,
+ * edgeStyle, textRatio (0-100, text region
  * width in percent), text (HTML string or DOM nodes for the text slot),
  * colorContent (HTML string or DOM nodes for the color slot),
- * showValue (show/hide the right-side percentage), quality,
- * respectReducedMotion, cssVars.
+ * showValue (show/hide the right-side percentage), quality, renderScale,
+ * powerPreference, fps, paused/static, respectReducedMotion, cssVars.
  */
 function createProgressCapsule(container, options = {}) {
-  if (!container || typeof container.appendChild !== 'function') {
-    throw new Error('createProgressCapsule: container element is required');
-  }
+  if (!container || typeof container.appendChild !== 'function') {
+    throw new Error('createProgressCapsule: container element is required');
+  }
   const preset = { ...getPreset('progress', options.preset ?? '星火') };
   const merged = normalizeOptions(DEFAULTS.progress, preset, options);
-  if (merged.min > merged.max) {
-    const swap = merged.min;
-    merged.min = merged.max;
-    merged.max = swap;
-  }
-  const normalizedColors = merged.colors.map(normalizeColor);
-  if (normalizedColors.every(Boolean)) preset.colors = normalizedColors;
-  preset.edgeStyle = merged.edgeStyle;
+  [merged.min, merged.max] = normalizeRange(merged.min, merged.max);
+  if (merged.modelValue !== undefined) merged.value = merged.modelValue;
+  const normalizedColors = Array.isArray(merged.colors) ? merged.colors.map(normalizeColor) : [];
+  if (normalizedColors.length === 4 && normalizedColors.every(Boolean)) preset.colors = normalizedColors;
+  const initialEdgeStyle = merged.edgeStyle === 'tide' || merged.edgeStyle === 'flow'
+    ? merged.edgeStyle
+    : preset.edgeStyle;
+  preset.edgeStyle = initialEdgeStyle;
+  merged.edgeStyle = initialEdgeStyle;
+  merged.colors = [...preset.colors];
+  const optionColors = Array.isArray(options.colors) ? options.colors.map(normalizeColor) : [];
+  let colorOverride = optionColors.length === 4 && optionColors.every(Boolean)
+    ? [...optionColors]
+    : null;
+  let edgeStyleOverride = options.edgeStyle === 'flow' || options.edgeStyle === 'tide'
+    ? merged.edgeStyle
+    : null;
   const copy = COPY;
   let customLabel = typeof options.label === 'string' && options.label ? options.label : null;
   // Vue 的裸布尔属性（<ProgressCapsule disabled />）会传成空字符串，
@@ -2429,19 +2853,32 @@ function createProgressCapsule(container, options = {}) {
   const readonly = merged.readonly === true || merged.readonly === '' || merged.readonly === 'true';
   const locked = disabled || readonly;
   const effectiveDraggable = locked ? false : merged.draggable !== false;
+  const effectiveKeyboard = locked ? false : merged.keyboard !== false;
   const dirty = {
     preset: false,
     colors: false,
     textRatio: false,
     cssVars: false,
     edgeStyle: false,
-    value: false
+    value: false,
+    step: false,
+    precision: false,
+    formatValue: false,
+    direction: false,
+    showValue: false,
+    valueSuffix: false,
+    quality: false,
+    renderScale: false,
+    paused: false,
+    static: false,
+    fps: false
   };
   const root = document.createElement('div');
   root.className = 'hj-capsule-root hj-progress-root';
   root.setAttribute('role', 'slider');
   root.setAttribute('data-draggable', String(effectiveDraggable));
+  root.dataset.direction = merged.direction === 'rtl' ? 'rtl' : 'ltr';
   if (disabled) {
     root.setAttribute('aria-disabled', 'true');
     root.classList.add('is-disabled');
@@ -2450,10 +2887,11 @@ function createProgressCapsule(container, options = {}) {
     root.setAttribute('aria-readonly', 'true');
     root.classList.add('is-readonly');
   }
-  if (locked) root.setAttribute('tabindex', '-1');
-  root.setAttribute('aria-valuemin', String(merged.min ?? 0));
-  root.setAttribute('aria-valuemax', String(merged.max ?? 100));
-  root.setAttribute('aria-valuenow', String(preset.initialProgress));
+  root.setAttribute('tabindex', locked ? '-1' : (effectiveKeyboard ? '0' : '-1'));
+  root.setAttribute('aria-orientation', 'horizontal');
+  root.setAttribute('aria-valuemin', String(merged.min ?? 0));
+  root.setAttribute('aria-valuemax', String(merged.max ?? 100));
+  root.setAttribute('aria-valuenow', String(preset.initialProgress));
   const updateAria = () => {
     root.setAttribute(
       'aria-label',
@@ -2461,10 +2899,10 @@ function createProgressCapsule(container, options = {}) {
     );
   };
   updateAria();
-  const canvas = document.createElement('canvas');
-  canvas.className = 'hj-progress-canvas';
-  canvas.setAttribute('aria-hidden', 'true');
+  const canvas = document.createElement('canvas');
+  canvas.className = 'hj-progress-canvas';
+  canvas.setAttribute('aria-hidden', 'true');
   // Slot containers are always present but transparent by default; they only
   // provide geometry, never typography/padding/background (docs: 插槽 CSS 约定).
   const fillContent = (layer, content) => {
@@ -2493,17 +2931,31 @@ function createProgressCapsule(container, options = {}) {
   valueElement.className = 'hj-progress-value';
   valueElement.setAttribute('aria-hidden', 'true');
   valueElement.hidden = merged.showValue === false;
   root.appendChild(canvas);
   root.appendChild(textLayer);
   root.appendChild(visualLayer);
   root.appendChild(valueElement);
   container.appendChild(root);
   const emitter = createEmitter();
-  let paused = merged.respectReducedMotion && prefersReducedMotion$1();
+  let manuallyPaused = merged.paused === true;
+  let reducedPaused = false;
+  let staticMode = merged.static === true;
+  let contextLost = false;
   let disposed = false;
+  let renderOnce = () => {};
+  const onContextLost = () => {
+    contextLost = true;
+    emitter.emit('contextlost', {});
+  };
+  const onContextRestored = () => {
+    contextLost = false;
+    emitter.emit('contextrestored', {});
+    renderOnce();
+    wakeScheduler();
+  };
   const applySize = () => {
     root.style.width = parseSize(merged.width);
     root.style.height = parseSize(merged.height);
@@ -2513,28 +2965,39 @@ function createProgressCapsule(container, options = {}) {
       root.style.setProperty('--hj-text-width', `${merged.textRatio}%`);
     }
   };
-  applySize();
+  applySize();
   const controller = new ProgressCapsuleController({
     root,
     canvas,
     valueElement,
     preset,
     emitter,
-    options: { ...merged, draggable: effectiveDraggable },
+    options: {
+      ...merged,
+      draggable: effectiveDraggable,
+      keyboard: effectiveKeyboard,
+      onResize: () => {
+        if (manuallyPaused || reducedPaused || staticMode) renderOnce();
+      }
+    },
     copy,
     dirty
   });
-  let overlay = null;
-  if (merged.renderer !== 'canvas2d') {
-    overlay = attachProgressFlowOverlay({
-      root,
-      canvas,
-      preset,
-      getProgress: () => controller.value
-    });
-  }
+  let overlay = null;
+  if (merged.renderer !== 'canvas2d') {
+    overlay = attachProgressFlowOverlay({
+      root,
+      canvas,
+      preset,
+      getProgress: () => progressRatio(controller.value, controller.min, controller.max) * 100,
+      dprCap: effectiveDprCap(merged.quality, merged.renderScale),
+      powerPreference: merged.powerPreference,
+      onContextLost,
+      onContextRestored
+    });
+  }
   if (overlay) controller.webglActive = true;
   else if (merged.renderer !== 'canvas2d') {
     nextTick(() => {
@@ -2542,66 +3005,99 @@ function createProgressCapsule(container, options = {}) {
       emitter.emit('error', { message: 'WebGL2 unavailable, using Canvas2D fallback' });
     });
   }
-  const visibility = createVisibilityGuard(root);
-  let flowTime = 0;
-  const unsubscribe = subscribeScheduler(
-    (delta, now) => {
-      flowTime += delta;
-      controller.update(delta, false);
-      if (visibility.isVisible()) {
-        controller.draw();
-        if (overlay) overlay.update(flowTime);
-      }
-    },
-    () => paused
-  );
+  const visibility = createVisibilityGuard(root, wakeScheduler);
+  const motionPreference = createReducedMotionPreference(
+    merged.respectReducedMotion,
+    (matches) => {
+      reducedPaused = matches;
+      if (matches) renderOnce();
+      else wakeScheduler();
+    }
+  );
+  reducedPaused = motionPreference.matches();
+  const isMotionPaused = () => manuallyPaused || reducedPaused || staticMode || contextLost;
+  let flowTime = 0;
+  const frameGate = createFrameGate(merged.fps);
+  renderOnce = () => {
+    controller.draw();
+    if (overlay) overlay.update(flowTime);
+  };
+  renderOnce();
+  const offPausedChange = emitter.on('change', () => {
+    if (isMotionPaused()) renderOnce();
+  });
+  const unsubscribe = subscribeScheduler(
+    (delta, now) => {
+      flowTime += delta;
+      controller.update(delta, false);
+      if (frameGate.shouldDraw(delta)) {
+        controller.draw();
+        if (overlay) overlay.update(flowTime);
+      }
+    },
+    () => isMotionPaused() || !visibility.isVisible()
+  );
   nextTick(() => {
     if (disposed) return;
     emitter.emit('ready', { preset: { ...preset } });
   });
   const syncDom = () => {
     updateAria();
   };
-  return {
-    element: root,
-    canvas,
-    preset,
-    on: emitter.on,
-    off: emitter.off,
-    setValue(value, source = 'prop') {
-      controller.setProgress(value, source);
-      return this;
-    },
-    getValue() {
-      return controller.value;
-    },
-    setRange(min, max) {
-      controller.setRange(min, max);
-      return this;
-    },
+  return {
+    element: root,
+    canvas,
+    preset,
+    on: emitter.on,
+    off: emitter.off,
+    setValue(value, source = 'prop') {
+      controller.setProgress(value, source);
+      return this;
+    },
+    getValue() {
+      return controller.value;
+    },
+    setRange(min, max) {
+      controller.setRange(min, max);
+      if (isMotionPaused()) renderOnce();
+      return this;
+    },
     setPreset(ref) {
       const next = getPreset('progress', ref);
       dirty.preset = true;
       Object.assign(preset, next);
+      if (colorOverride) preset.colors = [...colorOverride];
+      if (edgeStyleOverride) preset.edgeStyle = edgeStyleOverride;
       const nextColors = preset.colors.map(normalizeColor);
       if (nextColors.every(Boolean)) preset.colors = nextColors;
       controller.preset = preset;
-      controller.profile = next.edgeStyle === 'tide'
+      controller.profile = preset.edgeStyle === 'tide'
         ? FLOW_PROFILES.tide
-        : (FLOW_PROFILES[next.id] || FLOW_PROFILES['visual-training']);
+        : (FLOW_PROFILES[preset.id] || FLOW_PROFILES['visual-training']);
       controller.flowTime = stringSeed(next.id) * 31;
       controller.seed = stringSeed(`${next.id}-reference`) * Math.PI * 2;
       syncDom();
       if (overlay) {
         overlay.dispose();
-        overlay = attachProgressFlowOverlay({ root, canvas, preset, getProgress: () => controller.value });
+        contextLost = false;
+        overlay = attachProgressFlowOverlay({
+          root,
+          canvas,
+          preset,
+          getProgress: () => progressRatio(controller.value, controller.min, controller.max) * 100,
+          dprCap: effectiveDprCap(merged.quality, merged.renderScale),
+          powerPreference: merged.powerPreference,
+          onContextLost,
+          onContextRestored
+        });
       }
       controller.webglActive = Boolean(overlay);
       controller.resizeCanvas();
+      if (isMotionPaused()) renderOnce();
       emitter.emit('presetchange', { preset: { ...preset } });
       return this;
     },
@@ -2609,16 +3105,28 @@ function createProgressCapsule(container, options = {}) {
       const value = String(edgeStyle || '').toLowerCase();
       if (value !== 'flow' && value !== 'tide') return this;
       dirty.edgeStyle = true;
+      edgeStyleOverride = value;
       preset.edgeStyle = value;
       controller.profile = value === 'tide'
         ? FLOW_PROFILES.tide
         : (FLOW_PROFILES[preset.id] || FLOW_PROFILES['visual-training']);
       if (overlay) {
         overlay.dispose();
-        overlay = attachProgressFlowOverlay({ root, canvas, preset, getProgress: () => controller.value });
+        contextLost = false;
+        overlay = attachProgressFlowOverlay({
+          root,
+          canvas,
+          preset,
+          getProgress: () => progressRatio(controller.value, controller.min, controller.max) * 100,
+          dprCap: effectiveDprCap(merged.quality, merged.renderScale),
+          powerPreference: merged.powerPreference,
+          onContextLost,
+          onContextRestored
+        });
       }
       controller.webglActive = Boolean(overlay);
       controller.resizeCanvas();
+      if (isMotionPaused()) renderOnce();
       return this;
     },
     setText(content) {
@@ -2653,6 +3161,22 @@ function createProgressCapsule(container, options = {}) {
       controller.setValueSuffix(suffix);
       return this;
     },
+    setStep(step) {
+      controller.setStep(step);
+      return this;
+    },
+    setPrecision(precision) {
+      controller.setPrecision(precision);
+      return this;
+    },
+    setFormatValue(formatter) {
+      controller.setFormatValue(formatter);
+      return this;
+    },
+    setDirection(direction) {
+      controller.setDirection(direction);
+      return this;
+    },
     setShowValue(show) {
       controller.setShowValue(show);
       return this;
@@ -2661,11 +3185,14 @@ function createProgressCapsule(container, options = {}) {
       const next = Array.isArray(colors) ? colors.map(normalizeColor) : [];
       if (next.length !== 4 || next.some((color) => !color)) return this;
       dirty.colors = true;
+      colorOverride = [...next];
+      preset.colors = [...next];
       controller.setColors(next);
       if (overlay) overlay.setColors(next);
       controller.resizeCanvas();
+      if (isMotionPaused()) renderOnce();
       return this;
-    },
+    },
     setSize(width, height) {
       if (width !== undefined) {
         parseSize(width);
@@ -2676,111 +3203,208 @@ function createProgressCapsule(container, options = {}) {
         merged.height = height;
       }
       applySize();
-      controller.resizeCanvas();
-      return this;
-    },
-    randomize() {
-      controller.randomize();
-      return this;
-    },
-    pause() {
-      paused = true;
-      return this;
-    },
-    resume() {
-      paused = false;
-      return this;
-    },
-    setQuality(quality) {
-      merged.quality = quality;
-      controller.dprCap = dprCapFor(quality);
-      controller.resizeCanvas();
-      return this;
-    },
+      controller.resizeCanvas();
+      if (isMotionPaused()) renderOnce();
+      return this;
+    },
+    randomize() {
+      flowTime = controller.randomize();
+      if (isMotionPaused()) renderOnce();
+      return this;
+    },
+    pause() {
+      dirty.paused = true;
+      manuallyPaused = true;
+      renderOnce();
+      return this;
+    },
+    resume() {
+      dirty.paused = true;
+      manuallyPaused = false;
+      wakeScheduler();
+      return this;
+    },
+    setPaused(value) {
+      return value ? this.pause() : this.resume();
+    },
+    setStatic(value) {
+      dirty.static = true;
+      staticMode = value === true;
+      merged.static = staticMode;
+      if (staticMode) renderOnce();
+      else wakeScheduler();
+      return this;
+    },
+    setFps(fps) {
+      dirty.fps = true;
+      merged.fps = frameGate.setFps(fps);
+      wakeScheduler();
+      return this;
+    },
+    setQuality(quality) {
+      dirty.quality = true;
+      merged.quality = quality;
+      controller.dprCap = effectiveDprCap(quality, merged.renderScale);
+      controller.resizeCanvas();
+      if (overlay) overlay.setDprCap(controller.dprCap);
+      if (isMotionPaused()) renderOnce();
+      return this;
+    },
+    setRenderScale(renderScale) {
+      const value = Number(renderScale);
+      if (!Number.isFinite(value)) return this;
+      dirty.renderScale = true;
+      merged.renderScale = Math.min(1, Math.max(0.25, value));
+      controller.dprCap = effectiveDprCap(merged.quality, merged.renderScale);
+      controller.resizeCanvas();
+      if (overlay) overlay.setDprCap(controller.dprCap);
+      if (isMotionPaused()) renderOnce();
+      return this;
+    },
     dispose() {
       disposed = true;
       unsubscribe();
-      visibility.dispose();
-      if (overlay) overlay.dispose();
+      offPausedChange();
+      visibility.dispose();
+      motionPreference.dispose();
+      if (overlay) overlay.dispose();
       controller.dispose();
       root.remove();
     },
     get textRatio() { return merged.textRatio; },
     get cssVars() { return merged.cssVars; },
+    get min() { return controller.min; },
+    get max() { return controller.max; },
+    get step() { return controller.step; },
+    get precision() { return controller.precision; },
+    get formatValue() { return controller.formatValue; },
+    get direction() { return controller.direction; },
+    get showValue() { return !valueElement.hidden; },
+    get valueSuffix() { return controller.valueSuffix; },
+    get quality() { return merged.quality; },
+    get renderScale() { return merged.renderScale; },
+    get paused() { return manuallyPaused; },
+    get static() { return staticMode; },
+    get fps() { return frameGate.getFps(); },
     dirty
   };
 }
-function prefersReducedMotion() {
-  return typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches;
-}
-/**
- * Mount the cosmic (nebula) material as a background layer inside `host`.
- *
- * The layer is absolutely positioned and defaults to `z-index: -1`, so it
- * paints behind the host's in-flow content: text/buttons/images inside the
- * host sit on top with zero extra CSS. Host gets `position: relative;
- * isolation: isolate` automatically so the layer can never escape its box
- * (or break stacking outside it).
- *
+const HOST_STYLES = new WeakMap();
+function acquireHostStyles(host) {
+  const active = HOST_STYLES.get(host);
+  if (active) {
+    active.count += 1;
+    return;
+  }
+  const state = {
+    count: 1,
+    position: host.style.position,
+    isolation: host.style.isolation
+  };
+  const computed = getComputedStyle(host);
+  if (computed.position === 'static' || computed.position === '') host.style.position = 'relative';
+  host.style.isolation = 'isolate';
+  HOST_STYLES.set(host, state);
+}
+function releaseHostStyles(host) {
+  const state = HOST_STYLES.get(host);
+  if (!state) return;
+  state.count -= 1;
+  if (state.count > 0) return;
+  host.style.position = state.position;
+  host.style.isolation = state.isolation;
+  HOST_STYLES.delete(host);
+}
+/**
+ * Mount the cosmic (nebula) material as a background layer inside `host`.
+ *
+ * The layer is absolutely positioned and defaults to `z-index: -1`, so it
+ * paints behind the host's in-flow content: text/buttons/images inside the
+ * host sit on top with zero extra CSS. Host gets `position: relative;
+ * isolation: isolate` automatically so the layer can never escape its box
+ * (or break stacking outside it).
+ *
  * Options: preset (literary name), colors, seed, speed, quality,
- * renderer, mouseColor, respectReducedMotion, opacity (0-1), fallbackColor
- * (true=preset base color, a hex string, or false to disable).
- */
-function createColorBackground(host, options = {}) {
-  if (!host || typeof host.appendChild !== 'function') {
-    throw new Error('createColorBackground: host element is required');
-  }
+ * renderer, renderScale, powerPreference, fps, paused/static, mouseColor,
+ * respectReducedMotion, opacity (0-1), fallbackColor (true=preset base
+ * color, a hex string, or false to disable).
+ */
+function createColorBackground(host, options = {}) {
+  if (!host || typeof host.appendChild !== 'function') {
+    throw new Error('createColorBackground: host element is required');
+  }
   const preset = { ...getPreset('capsule', options.preset ?? '初光') };
   const merged = normalizeOptions(
-    {
-      quality: DEFAULTS.capsule.quality,
-      renderer: DEFAULTS.capsule.renderer,
-      respectReducedMotion: DEFAULTS.capsule.respectReducedMotion,
-      mouseColor: true,
-      opacity: 1,
-      fallbackColor: true
-    },
-    preset,
+    {
+      quality: DEFAULTS.capsule.quality,
+      renderer: DEFAULTS.capsule.renderer,
+      respectReducedMotion: DEFAULTS.capsule.respectReducedMotion,
+      mouseColor: true,
+      renderScale: 1,
+      powerPreference: 'high-performance',
+      fps: DEFAULTS.capsule.fps,
+      paused: false,
+      static: false,
+      opacity: 1,
+      fallbackColor: true
+    },
+    preset,
     options
   );
-  const normalizedColors = merged.colors.map(normalizeColor);
-  if (normalizedColors.every(Boolean)) preset.colors = normalizedColors;
-  preset.seed = merged.seed;
-  preset.speed = merged.speed;
-  const computed = getComputedStyle(host);
-  if (computed.position === 'static' || computed.position === '') {
-    host.style.position = 'relative';
-  }
-  host.style.isolation = 'isolate';
-  const layer = document.createElement('div');
-  layer.className = 'dlc-color-layer';
-  const syncLayerVars = () => {
-    layer.style.setProperty('--dlc-color-opacity', String(merged.opacity));
-    const fallback =
-      merged.fallbackColor === false || merged.fallbackColor == null
-        ? 'transparent'
-        : typeof merged.fallbackColor === 'string'
-          ? merged.fallbackColor
-          : preset.colors[0];
-    layer.style.setProperty('--dlc-color-bg', fallback);
-  };
-  syncLayerVars();
-  const canvas = document.createElement('canvas');
-  canvas.className = 'dlc-color-canvas';
-  canvas.setAttribute('aria-hidden', 'true');
-  layer.appendChild(canvas);
-  host.appendChild(layer);
+  merged.opacity = Number.isFinite(Number(merged.opacity))
+    ? Math.min(1, Math.max(0, Number(merged.opacity)))
+    : 1;
+  const normalizedColors = Array.isArray(merged.colors) ? merged.colors.map(normalizeColor) : [];
+  if (normalizedColors.length === 4 && normalizedColors.every(Boolean)) preset.colors = normalizedColors;
+  const initialSeed = toFiniteNumber(merged.seed);
+  const initialSpeed = toFiniteNumber(merged.speed);
+  if (initialSeed !== null) preset.seed = initialSeed;
+  if (initialSpeed !== null) preset.speed = initialSpeed;
+  merged.colors = [...preset.colors];
+  merged.seed = preset.seed;
+  merged.speed = preset.speed;
+  const optionColors = Array.isArray(options.colors) ? options.colors.map(normalizeColor) : [];
+  let colorOverride = optionColors.length === 4 && optionColors.every(Boolean)
+    ? [...optionColors]
+    : null;
+  let seedOverride = options.seed !== undefined ? toFiniteNumber(options.seed) : null;
+  let speedOverride = options.speed !== undefined ? toFiniteNumber(options.speed) : null;
+  acquireHostStyles(host);
+  const layer = document.createElement('div');
+  layer.className = 'dlc-color-layer';
+  const syncLayerVars = () => {
+    layer.style.setProperty('--dlc-color-opacity', String(merged.opacity));
+    const fallback =
+      merged.fallbackColor === false || merged.fallbackColor == null
+        ? 'transparent'
+        : typeof merged.fallbackColor === 'string'
+          ? merged.fallbackColor
+          : preset.colors[0];
+    layer.style.setProperty('--dlc-color-bg', fallback);
+  };
+  syncLayerVars();
+  const canvas = document.createElement('canvas');
+  canvas.className = 'dlc-color-canvas';
+  canvas.setAttribute('aria-hidden', 'true');
+  layer.appendChild(canvas);
+  host.appendChild(layer);
   const emitter = createEmitter();
-  let paused = merged.respectReducedMotion && prefersReducedMotion();
+  let manuallyPaused = merged.paused === true;
+  let reducedPaused = false;
+  let staticMode = merged.static === true;
+  let contextLost = false;
   let disposed = false;
+  let renderOnce = () => {};
   const dirty = {
     preset: false,
     seed: false,
@@ -2788,70 +3412,113 @@ function createColorBackground(host, options = {}) {
     colors: false,
     opacity: false,
     fallbackColor: false,
-    mouseColor: false
+    mouseColor: false,
+    quality: false,
+    renderScale: false,
+    paused: false,
+    static: false,
+    fps: false
   };
-  let renderer;
-  const useWebgl = merged.renderer !== 'canvas2d';
-  if (useWebgl) {
-    try {
-      renderer = new CosmicRenderer(canvas, merged, {
-        dprCap: dprCapFor(merged.quality),
-        mouseColor: merged.mouseColor !== false,
-        eventTarget: host
-      });
-    } catch (error) {
-      renderer = new FallbackRenderer(canvas, merged);
+  let renderer;
+  const useWebgl = merged.renderer !== 'canvas2d';
+  if (useWebgl) {
+    try {
+      renderer = new CosmicRenderer(canvas, merged, {
+        dprCap: effectiveDprCap(merged.quality, merged.renderScale),
+        mouseColor: merged.mouseColor !== false,
+        eventTarget: host,
+        powerPreference: merged.powerPreference,
+        onContextLost: () => {
+          contextLost = true;
+          emitter.emit('contextlost', {});
+        },
+        onContextRestored: () => {
+          contextLost = false;
+          emitter.emit('contextrestored', {});
+          renderOnce();
+          wakeScheduler();
+        }
+      });
+    } catch (error) {
+      renderer = new FallbackRenderer(canvas, merged, {
+        dprCap: effectiveDprCap(merged.quality, merged.renderScale)
+      });
       nextTick(() => {
         if (disposed) return;
         emitter.emit('error', {
           message: String(error && error.message ? error.message : error)
         });
       });
-    }
-  } else {
-    renderer = new FallbackRenderer(canvas, merged);
-  }
-  const resizeObserver =
-    typeof ResizeObserver !== 'undefined'
-      ? new ResizeObserver(() => renderer.resize())
-      : null;
-  if (resizeObserver) resizeObserver.observe(host);
-  else window.addEventListener('resize', renderer.resize);
-  const visibility = createVisibilityGuard(layer);
-  let animationTime = 0;
-  const unsubscribe = subscribeScheduler(
-    (delta) => {
-      animationTime += delta;
-      if (visibility.isVisible()) renderer.draw(animationTime);
-    },
-    () => paused
-  );
+    }
+  } else {
+    renderer = new FallbackRenderer(canvas, merged, {
+      dprCap: effectiveDprCap(merged.quality, merged.renderScale)
+    });
+  }
+  renderer.resize();
+  let animationTime = 0;
+  const frameGate = createFrameGate(merged.fps);
+  renderOnce = () => renderer.draw(animationTime);
+  const resize = () => {
+    renderer.resize();
+    if (manuallyPaused || reducedPaused || staticMode) renderOnce();
+  };
+  const resizeObserver =
+    typeof ResizeObserver !== 'undefined'
+      ? new ResizeObserver(resize)
+      : null;
+  if (resizeObserver) resizeObserver.observe(host);
+  else window.addEventListener('resize', resize);
+  const visibility = createVisibilityGuard(layer, wakeScheduler);
+  const motionPreference = createReducedMotionPreference(
+    merged.respectReducedMotion,
+    (matches) => {
+      reducedPaused = matches;
+      if (matches) renderOnce();
+      else wakeScheduler();
+    }
+  );
+  reducedPaused = motionPreference.matches();
+  const isMotionPaused = () => manuallyPaused || reducedPaused || staticMode || contextLost;
+  renderOnce();
+  const unsubscribe = subscribeScheduler(
+    (delta) => {
+      animationTime += delta;
+      if (frameGate.shouldDraw(delta)) renderer.draw(animationTime);
+    },
+    () => isMotionPaused() || !visibility.isVisible()
+  );
   nextTick(() => {
     if (disposed) return;
     emitter.emit('ready', { preset: { ...preset } });
   });
-  return {
-    element: host,
-    layer,
-    canvas,
-    preset,
-    on: emitter.on,
-    off: emitter.off,
+  return {
+    element: host,
+    layer,
+    canvas,
+    preset,
+    on: emitter.on,
+    off: emitter.off,
     setPreset(ref) {
       const next = getPreset('capsule', ref);
       dirty.preset = true;
       Object.assign(preset, next);
+      if (colorOverride) preset.colors = [...colorOverride];
+      if (seedOverride !== null) preset.seed = seedOverride;
+      if (speedOverride !== null) preset.speed = speedOverride;
       const nextColors = preset.colors.map(normalizeColor);
       if (nextColors.every(Boolean)) preset.colors = nextColors;
       renderer.setPreset({ ...preset });
       renderer.resize();
       syncLayerVars();
+      if (isMotionPaused()) renderOnce();
       emitter.emit('presetchange', { preset: { ...preset } });
       return this;
     },
@@ -2859,25 +3526,31 @@ function createColorBackground(host, options = {}) {
       const next = Array.isArray(colors) ? colors.map(normalizeColor) : [];
       if (next.length !== 4 || next.some((color) => !color)) return this;
       dirty.colors = true;
+      colorOverride = [...next];
       preset.colors = next;
       renderer.setPreset({ ...preset, colors: next });
       syncLayerVars();
+      if (isMotionPaused()) renderOnce();
       return this;
     },
     setSeed(seed) {
-      const value = Number(seed);
-      if (!Number.isFinite(value)) return this;
+      const value = toFiniteNumber(seed);
+      if (value === null) return this;
       dirty.seed = true;
+      seedOverride = value;
       preset.seed = value;
       renderer.setPreset({ ...preset });
+      if (isMotionPaused()) renderOnce();
       return this;
     },
     setSpeed(speed) {
-      const value = Number(speed);
-      if (!Number.isFinite(value)) return this;
+      const value = toFiniteNumber(speed);
+      if (value === null) return this;
       dirty.speed = true;
+      speedOverride = value;
       preset.speed = value;
       renderer.setPreset({ ...preset });
+      if (isMotionPaused()) renderOnce();
       return this;
     },
     setFallbackColor(value) {
@@ -2892,45 +3565,88 @@ function createColorBackground(host, options = {}) {
       if (typeof renderer.setMouseColor === 'function') renderer.setMouseColor(merged.mouseColor);
       return this;
     },
-    setQuality(quality) {
-      merged.quality = quality;
-      if (typeof renderer.setDprCap === 'function') renderer.setDprCap(dprCapFor(quality));
-      return this;
-    },
+    setQuality(quality) {
+      dirty.quality = true;
+      merged.quality = quality;
+      if (typeof renderer.setDprCap === 'function') {
+        renderer.setDprCap(effectiveDprCap(quality, merged.renderScale));
+      }
+      if (isMotionPaused()) renderOnce();
+      return this;
+    },
+    setRenderScale(renderScale) {
+      const value = Number(renderScale);
+      if (!Number.isFinite(value)) return this;
+      dirty.renderScale = true;
+      merged.renderScale = Math.min(1, Math.max(0.25, value));
+      if (typeof renderer.setDprCap === 'function') {
+        renderer.setDprCap(effectiveDprCap(merged.quality, merged.renderScale));
+      }
+      if (isMotionPaused()) renderOnce();
+      return this;
+    },
     setOpacity(value) {
       const opacity = Number(value);
       if (!Number.isFinite(opacity)) return this;
       dirty.opacity = true;
       merged.opacity = Math.min(1, Math.max(0, opacity));
-      layer.style.setProperty('--dlc-color-opacity', String(merged.opacity));
-      return this;
-    },
+      layer.style.setProperty('--dlc-color-opacity', String(merged.opacity));
+      return this;
+    },
     randomize() {
       this.setSeed(Math.random() * 100);
       return this;
     },
-    pause() {
-      paused = true;
-      return this;
-    },
-    resume() {
-      paused = false;
-      return this;
-    },
+    pause() {
+      dirty.paused = true;
+      manuallyPaused = true;
+      renderOnce();
+      return this;
+    },
+    resume() {
+      dirty.paused = true;
+      manuallyPaused = false;
+      wakeScheduler();
+      return this;
+    },
+    setPaused(value) {
+      return value ? this.pause() : this.resume();
+    },
+    setStatic(value) {
+      dirty.static = true;
+      staticMode = value === true;
+      merged.static = staticMode;
+      if (staticMode) renderOnce();
+      else wakeScheduler();
+      return this;
+    },
+    setFps(fps) {
+      dirty.fps = true;
+      merged.fps = frameGate.setFps(fps);
+      wakeScheduler();
+      return this;
+    },
     dispose() {
       disposed = true;
       unsubscribe();
-      visibility.dispose();
-      if (resizeObserver) resizeObserver.disconnect();
-      else window.removeEventListener('resize', renderer.resize);
+      visibility.dispose();
+      motionPreference.dispose();
+      if (resizeObserver) resizeObserver.disconnect();
+      else window.removeEventListener('resize', resize);
       renderer.dispose();
       layer.remove();
+      releaseHostStyles(host);
     },
     get opacity() { return merged.opacity; },
     get fallbackColor() { return merged.fallbackColor; },
     get mouseColor() { return merged.mouseColor; },
+    get quality() { return merged.quality; },
+    get renderScale() { return merged.renderScale; },
+    get paused() { return manuallyPaused; },
+    get static() { return staticMode; },
+    get fps() { return frameGate.getFps(); },
     dirty
   };
 }
-export { ALL_PRESETS, COPY, CosmicRenderer, DEFAULTS, FallbackRenderer, PRESETS, PROGRESS_PRESETS, ProgressCapsuleController, ProgressFlowRenderer, QUALITY_TIERS, createCapsule, createColorBackground, createProgressCapsule, dprCapFor, getPreset, hexToRgb01$1 as hexToRgb01, hexToRgba, normalizeColor, parseSize, pauseAll, resumeAll, validateColors };
+export { ALL_PRESETS, COPY, CosmicRenderer, DEFAULTS, FallbackRenderer, PRESETS, PROGRESS_PRESETS, ProgressCapsuleController, ProgressFlowRenderer, QUALITY_TIERS, createCapsule, createColorBackground, createProgressCapsule, dprCapFor, effectiveDprCap, getPreset, hexToRgb01$1 as hexToRgb01, hexToRgba, normalizeColor, parseSize, pauseAll, resumeAll, validateColors };