vue-plugin-live2d 0.0.25 → 0.0.27

package/README.md

@@ -2,9 +2,8 @@
 
 A Vue 3 compatibility component for `@doki-land/live2d`.
 
-> **Runtime freeze (Developer Preview):** from v0.0.23 onward, do not add new runtime
-> logic here (RAF loops, hit test, parameter tracking, motion/expression eval).
-> Shared behavior belongs in `@doki-land/live2d` Stage/Actor APIs or CE/widget shells.
+> **Runtime freeze lifted for shell only (v0.0.26):** this adapter is a thin Vue wrapper over
+> `<live-2d>` from `@doki-land/live2d-element`. Shared behavior belongs in CE / Stage / Actor APIs.
 
 This adapter helps existing Vue applications mount the browser-native runtime. It is not the architectural center of the
 project and does not replace the framework-independent facade used by game engines and other hosts.
@@ -18,23 +17,24 @@ project and does not replace the framework-independent facade used by game engin
 - Ready, error, progress, profile, and hit events.
 - Optional browser animation loop.
 - Pointer tracking.
+- Optional `interactive` / `tracking` props (forwarded to `<live-2d>`).
 - Parameter inspection and mutation through the exposed component API.
 
 ## 📦 Installation
 
 ```bash
-pnpm add vue-plugin-live2d @doki-land/live2d vue
+pnpm add vue-plugin-live2d @doki-land/live2d-element vue
 ```
 
 ## 🚀 Quick Start
 
 ```vue
 <script setup lang="ts">
-import { Live2D } from "vue-plugin-live2d";
+import { Live2d } from "vue-plugin-live2d";
 </script>
 
 <template>
-  <Live2D
+  <Live2d
     model="/models/character.model3.json"
     :width="480"
     :height="640"
@@ -55,9 +55,9 @@ Use a template ref for runtime-level controls:
 ```vue
 <script setup lang="ts">
 import { ref } from "vue";
-import { Live2D } from "vue-plugin-live2d";
+import { Live2d } from "vue-plugin-live2d";
 
-const actor = ref<InstanceType<typeof Live2D> | null>(null);
+const actor = ref<InstanceType<typeof Live2d> | null>(null);
 
 function lookLeft() {
   actor.value?.setParameter("PARAM_ANGLE_X", -15);
@@ -65,7 +65,7 @@ function lookLeft() {
 </script>
 
 <template>
-  <Live2D ref="actor" model="/models/character.model3.json" />
+  <Live2d ref="actor" model="/models/character.model3.json" />
   <button type="button" @click="lookLeft">Look left</button>
 </template>
 ```
@@ -104,4 +104,4 @@ than being reimplemented for Vue.
 
 ## 📄 License
 
-See the repository license.
+Source code is dedicated to the public domain under **CC0 1.0 Universal** — see [`License.md`](../../../License.md).

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "vue-plugin-live2d",
-  "version": "0.0.25",
-  "description": "Vue 3 <Live2D> component — mount @doki-land/live2d with props, progress UI, and lifecycle.",
+  "version": "0.0.27",
+  "description": "Vue 3 <Live2d> component — thin wrapper over <live-2d> Custom Element.",
   "type": "module",
-  "license": "MIT",
+  "license": "CC0-1.0",
   "homepage": "https://github.com/doki-land/live2d.ts",
   "repository": {
     "type": "git",
@@ -37,7 +37,11 @@
     "vue": "^3.4.0"
   },
   "dependencies": {
-    "@doki-land/live2d": "0.0.25"
+    "@doki-land/live2d": "0.0.27",
+    "@doki-land/live2d-element": "0.0.27"
   },
-  "sideEffects": false
+  "sideEffects": [
+    "./src/index.ts",
+    "./src/Live2d.vue"
+  ]
 }

package/src/Live2d.vue

@@ -0,0 +1,339 @@
+
+<template>
+  <div
+    class="doki-live2d-root"
+    :style="{ width: `${width}px`, height: `${height}px` }"
+  >
+    <live-2d
+      ref="actorRef"
+      :model="modelAttr"
+      :width="width"
+      :height="height"
+      :autoplay="autoplay"
+      :autosway="autoSway"
+      :interactive="interactive"
+      :tracking="tracking"
+    />
+    <div
+      v-if="showProgress && loading"
+      class="doki-live2d-progress"
+      role="progressbar"
+      :aria-valuenow="progressPercent"
+      aria-valuemin="0"
+      aria-valuemax="100"
+    >
+      <div class="doki-live2d-progress__track">
+        <div
+          class="doki-live2d-progress__fill"
+          :style="{ width: `${progressPercent}%` }"
+        />
+      </div>
+      <div class="doki-live2d-progress__label">
+        {{ progressLabel }} · {{ progressPercent }}%
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import "@doki-land/live2d-element";
+import type {
+    FrameProfile,
+    LoadProgress,
+    ModelSource,
+    PlayMotionOptions,
+    RendererKind,
+} from "@doki-land/live2d";
+import type { Live2dElement } from "@doki-land/live2d-element";
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+
+const props = withDefaults(
+    defineProps<{
+        /** model3.json URL or ModelSource. */
+        model?: ModelSource | null;
+        width?: number;
+        height?: number;
+        /** Renderer try order. Default prefers Canvas2D for reliable preview. */
+        prefer?: RendererKind[];
+        autoplay?: boolean;
+        /** Animate PARAM_ANGLE_X automatically while playing. */
+        autoSway?: boolean;
+        /** Show built-in loading overlay with progress bar. */
+        showProgress?: boolean;
+        interactive?: boolean;
+        tracking?: "pointer" | "none";
+    }>(),
+    {
+        model: null,
+        width: 320,
+        height: 320,
+        prefer: () => ["canvas2d", "webgl2", "webgpu"],
+        autoplay: true,
+        autoSway: true,
+        showProgress: true,
+        interactive: true,
+        tracking: "pointer",
+    },
+);
+
+const emit = defineEmits<{
+    ready: [modelId: string];
+    error: [error: unknown];
+    progress: [progress: LoadProgress];
+    profile: [profile: FrameProfile];
+    hit: [payload: { area: string; x: number; y: number }];
+}>();
+
+const actorRef = ref<Live2dElement | null>(null);
+const loadProgress = ref<LoadProgress | null>(null);
+const loading = ref(false);
+
+const modelAttr = computed(() =>
+    typeof props.model === "string" ? props.model : "",
+);
+
+const progressPercent = computed(() => {
+    const p = loadProgress.value?.progress ?? 0;
+    return Math.round(Math.min(1, Math.max(0, p)) * 100);
+});
+
+const progressLabel = computed(() => {
+    const p = loadProgress.value;
+    if (!p) return "Loading…";
+    const stage = p.stage;
+    if (p.bytesLoaded != null && p.bytesTotal != null && p.bytesTotal > 0) {
+        const kb = (n: number) => `${(n / 1024).toFixed(0)} KB`;
+        return `${stage} · ${kb(p.bytesLoaded)} / ${kb(p.bytesTotal)}`;
+    }
+    return p.detail ? `${stage} · ${p.detail}` : stage;
+});
+
+function actor(): Live2dElement | null {
+    return actorRef.value;
+}
+
+function syncSource(): void {
+    const el = actor();
+    if (!el) return;
+    if (props.model == null) {
+        el.removeAttribute("model");
+        el.source = null;
+        loading.value = false;
+        loadProgress.value = null;
+        return;
+    }
+    if (typeof props.model === "string") {
+        el.source = null;
+        el.model = props.model;
+    } else {
+        el.removeAttribute("model");
+        el.source = props.model;
+    }
+    loading.value = true;
+    loadProgress.value = { stage: "mounting", progress: 0.01 };
+}
+
+function syncRenderOptions(): void {
+    const el = actor();
+    if (!el) return;
+    el.renderOptions = { prefer: [...props.prefer] };
+}
+
+function bindActorEvents(el: Live2dElement): void {
+    el.addEventListener("live2d-ready", onReady);
+    el.addEventListener("live2d-error", onError);
+    el.addEventListener("live2d-progress", onProgress);
+    el.addEventListener("live2d-profile", onProfile);
+    el.addEventListener("live2d-hit", onHit);
+}
+
+function unbindActorEvents(el: Live2dElement): void {
+    el.removeEventListener("live2d-ready", onReady);
+    el.removeEventListener("live2d-error", onError);
+    el.removeEventListener("live2d-progress", onProgress);
+    el.removeEventListener("live2d-profile", onProfile);
+    el.removeEventListener("live2d-hit", onHit);
+}
+
+function onReady(event: Event): void {
+    loading.value = false;
+    const detail = (event as CustomEvent<{ model?: string }>).detail;
+    loadProgress.value = {
+        stage: "ready",
+        progress: 1,
+        detail: detail?.model,
+    };
+    emit("ready", detail?.model ?? "");
+}
+
+function onError(event: Event): void {
+    loading.value = false;
+    const detail = (event as CustomEvent<{ cause?: unknown; error?: string }>)
+        .detail;
+    emit("error", detail?.cause ?? detail?.error ?? "live2d-error");
+}
+
+function onProgress(event: Event): void {
+    const payload = (event as CustomEvent<LoadProgress>).detail;
+    loadProgress.value = payload;
+    emit("progress", payload);
+}
+
+function onProfile(event: Event): void {
+    emit("profile", (event as CustomEvent<FrameProfile>).detail);
+}
+
+function onHit(event: Event): void {
+    const detail = (
+        event as CustomEvent<{
+            area: string | null;
+            modelX: number;
+            modelY: number;
+        }>
+    ).detail;
+    if (detail?.area) {
+        emit("hit", {
+            area: detail.area,
+            x: detail.modelX,
+            y: detail.modelY,
+        });
+    }
+}
+
+function setParameter(id: string, value: number): void {
+    actor()?.runtime?.setParameter(id, value);
+    if (!props.autoplay) {
+        actor()?.runtime?.update(0);
+    }
+}
+
+function clearManualAngleX(): void {
+    /* autosway lives on <live-2d>; callers may set PARAM_ANGLE_X directly. */
+}
+
+async function reload(): Promise<void> {
+    const el = actor();
+    if (!el || props.model == null) {
+        syncSource();
+        return;
+    }
+    loading.value = true;
+    loadProgress.value = {
+        stage: "resolve",
+        progress: 0.02,
+        detail: "resolve source",
+    };
+    syncSource();
+    await el.loadModel();
+}
+
+onMounted(() => {
+    const el = actor();
+    if (!el) return;
+    bindActorEvents(el);
+    syncRenderOptions();
+    syncSource();
+});
+
+watch(
+    () =>
+        [
+            props.model,
+            props.width,
+            props.height,
+            props.prefer?.join(","),
+            props.autoplay,
+            props.autoSway,
+            props.interactive,
+            props.tracking,
+        ] as const,
+    () => {
+        syncRenderOptions();
+        syncSource();
+    },
+);
+
+onBeforeUnmount(() => {
+    const el = actor();
+    if (el) unbindActorEvents(el);
+});
+
+defineExpose({
+    getRuntime: () => actor()?.runtime ?? null,
+    setParameter,
+    clearManualAngleX,
+    listParameters: () => actor()?.runtime?.listParameters() ?? [],
+    playMotion: (group: string, index?: number, options?: PlayMotionOptions) =>
+        actor()?.playMotion(group, index, options) ?? Promise.resolve(false),
+    stopMotion: (opts?: { fade?: boolean; slot?: string }) =>
+        actor()?.runtime?.stopMotion(opts),
+    listPlayingMotions: () => actor()?.runtime?.listPlayingMotions() ?? [],
+    capturePng: (opts?: { mimeType?: "image/png"; quality?: number }) => {
+        const runtime = actor()?.runtime;
+        if (!runtime) {
+            return Promise.reject(
+                new Error("vue-plugin-live2d: runtime not mounted"),
+            );
+        }
+        return runtime.capturePng(opts);
+    },
+    reload,
+});
+</script>
+
+<style scoped>
+.doki-live2d-root {
+  position: relative;
+  display: inline-block;
+  line-height: 0;
+}
+
+live-2d {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+live-2d::part(canvas) {
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  pointer-events: auto;
+  touch-action: none;
+}
+
+.doki-live2d-progress {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  align-content: center;
+  justify-items: stretch;
+  gap: 0.55rem;
+  padding: 1.25rem;
+  box-sizing: border-box;
+  background: color-mix(in srgb, #0f1b2d 55%, transparent);
+  pointer-events: none;
+}
+
+.doki-live2d-progress__track {
+  height: 0.45rem;
+  border-radius: 999px;
+  background: color-mix(in srgb, #fff 22%, transparent);
+  overflow: hidden;
+}
+
+.doki-live2d-progress__fill {
+  height: 100%;
+  border-radius: inherit;
+  background: #7eb6ff;
+  transition: width 80ms linear;
+}
+
+.doki-live2d-progress__label {
+  color: #f4f8ff;
+  font: 0.78rem/1.3 ui-sans-serif, system-ui, sans-serif;
+  text-align: center;
+  word-break: break-all;
+}
+</style>

package/src/index.ts

@@ -1,4 +1,5 @@
-import Live2D from "./Live2D.vue";
+import "@doki-land/live2d-element";
+import Live2d from "./Live2d.vue";
 
-export { Live2D };
-export default Live2D;
+export { Live2d };
+export default Live2d;

package/src/Live2D.vue

@@ -1,415 +0,0 @@
-
-<template>
-  <div
-    class="doki-live2d-root"
-    :style="{ width: `${width}px`, height: `${height}px` }"
-  >
-    <div ref="hostRef" class="doki-live2d-host"/>
-    <div
-      v-if="showProgress && loading"
-      class="doki-live2d-progress"
-      role="progressbar"
-      :aria-valuenow="progressPercent"
-      aria-valuemin="0"
-      aria-valuemax="100"
-    >
-      <div class="doki-live2d-progress__track">
-        <div
-          class="doki-live2d-progress__fill"
-          :style="{ width: `${progressPercent}%` }"
-        />
-      </div>
-      <div class="doki-live2d-progress__label">
-        {{ progressLabel }} · {{ progressPercent }}%
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {
-    createLive2d,
-    createRenderer,
-    type FrameProfile,
-    focusParameterUpdates,
-    type Live2dRuntime,
-    type LoadProgress,
-    type ModelSource,
-    type PlayMotionOptions,
-    type RendererKind,
-} from "@doki-land/live2d";
-import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
-
-const props = withDefaults(
-    defineProps<{
-        /** model3.json URL or ModelSource. */
-        model?: ModelSource | null;
-        width?: number;
-        height?: number;
-        /** Renderer try order. Default prefers Canvas2D for reliable preview. */
-        prefer?: RendererKind[];
-        autoplay?: boolean;
-        /** Animate PARAM_ANGLE_X automatically while playing. */
-        autoSway?: boolean;
-        /** Show built-in loading overlay with progress bar. */
-        showProgress?: boolean;
-    }>(),
-    {
-        model: null,
-        width: 320,
-        height: 320,
-        prefer: () => ["canvas2d", "webgl2", "webgpu"],
-        autoplay: true,
-        autoSway: true,
-        showProgress: true,
-    },
-);
-
-const emit = defineEmits<{
-    ready: [modelId: string];
-    error: [error: unknown];
-    progress: [progress: LoadProgress];
-    profile: [profile: FrameProfile];
-    hit: [payload: { area: string; x: number; y: number }];
-}>();
-
-const hostRef = ref<HTMLDivElement | null>(null);
-const loadProgress = ref<LoadProgress | null>(null);
-const loading = ref(false);
-
-let _canvas: HTMLCanvasElement | null = null;
-let runtime: Live2dRuntime | null = null;
-let raf = 0;
-let lastTs = 0;
-let manualAngleX: number | null = null;
-let mountGeneration = 0;
-
-const progressPercent = computed(() => {
-    const p = loadProgress.value?.progress ?? 0;
-    return Math.round(Math.min(1, Math.max(0, p)) * 100);
-});
-
-const progressLabel = computed(() => {
-    const p = loadProgress.value;
-    if (!p) return "Loading…";
-    const stage = p.stage;
-    if (p.bytesLoaded != null && p.bytesTotal != null && p.bytesTotal > 0) {
-        const kb = (n: number) => `${(n / 1024).toFixed(0)} KB`;
-        return `${stage} · ${kb(p.bytesLoaded)} / ${kb(p.bytesTotal)}`;
-    }
-    return p.detail ? `${stage} · ${p.detail}` : stage;
-});
-
-function stopLoop() {
-    if (raf) cancelAnimationFrame(raf);
-    raf = 0;
-    lastTs = 0;
-}
-
-function tick(ts: number) {
-    if (!runtime) return;
-    const dt = lastTs ? (ts - lastTs) / 1000 : 0;
-    lastTs = ts;
-    if (manualAngleX !== null) {
-        runtime.setParameter("PARAM_ANGLE_X", manualAngleX);
-    } else if (props.autoSway) {
-        const t = ts / 1000;
-        runtime.setParameter(
-            "PARAM_ANGLE_X",
-            parameterFromNormalized("PARAM_ANGLE_X", Math.sin(t) * 0.25),
-        );
-    }
-    runtime.update(dt);
-    raf = requestAnimationFrame(tick);
-}
-
-function ensureFreshCanvas(): HTMLCanvasElement | null {
-    const host = hostRef.value;
-    if (!host) return null;
-    // Drop any previous canvas so GPU context families never stack in the DOM.
-    host.replaceChildren();
-    const next = document.createElement("canvas");
-    next.className = "doki-live2d-canvas";
-    // Backing store follows devicePixelRatio so WebGL/WebGPU edges stay sharp.
-    const dpr = Math.min(
-        typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1,
-        2,
-    );
-    next.width = Math.max(1, Math.round(props.width * dpr));
-    next.height = Math.max(1, Math.round(props.height * dpr));
-    next.style.width = `${props.width}px`;
-    next.style.height = `${props.height}px`;
-    next.addEventListener("pointermove", onPointerMove);
-    next.addEventListener("pointerdown", onPointerDown);
-    host.appendChild(next);
-    _canvas = next;
-    return next;
-}
-
-function bindRuntimeEvents(r: Live2dRuntime) {
-    r.events.on("ready", (p) => {
-        loading.value = false;
-        loadProgress.value = {
-            stage: "ready",
-            progress: 1,
-            detail: p.modelId,
-        };
-        emit("ready", p.modelId);
-    });
-    r.events.on("error", (p) => {
-        loading.value = false;
-        emit("error", p.error);
-    });
-    r.events.on("progress", (p) => {
-        loadProgress.value = p;
-        emit("progress", p);
-    });
-    r.events.on("profile", (p) => {
-        emit("profile", p);
-    });
-}
-
-async function remount() {
-    const gen = ++mountGeneration;
-    stopLoop();
-    runtime?.destroy();
-    runtime = null;
-    loadProgress.value = props.model
-        ? { stage: "mounting", progress: 0.01, detail: "initialize renderer" }
-        : null;
-    loading.value = Boolean(props.model);
-
-    let next = ensureFreshCanvas();
-    if (!next) {
-        await new Promise<void>((r) => requestAnimationFrame(() => r()));
-        next = ensureFreshCanvas();
-    }
-    if (!next) {
-        loading.value = false;
-        emit("error", new Error("vue-plugin-live2d: host element missing"));
-        return;
-    }
-
-    runtime = createLive2d({
-        renderer: createRenderer({ prefer: props.prefer }),
-    });
-    bindRuntimeEvents(runtime);
-    runtime.mount(next);
-
-    if (props.model) {
-        try {
-            await runtime.loadModel(props.model);
-            if (gen !== mountGeneration) return;
-            if (props.autoplay) {
-                raf = requestAnimationFrame(tick);
-            } else {
-                runtime.update(0);
-            }
-        } catch {
-            // error already emitted via runtime events
-        }
-    } else {
-        loading.value = false;
-    }
-}
-
-/**
- * Reload model on the existing runtime/renderer.
- * Prefer this over remounting — full remount races GPU init and fetch.
- */
-async function reload() {
-    if (!runtime || !props.model) {
-        await remount();
-        return;
-    }
-    const gen = mountGeneration;
-    stopLoop();
-    loading.value = true;
-    loadProgress.value = {
-        stage: "resolve",
-        progress: 0.02,
-        detail: "resolve source",
-    };
-    try {
-        await runtime.loadModel(props.model);
-        if (gen !== mountGeneration) return;
-        if (props.autoplay) {
-            raf = requestAnimationFrame(tick);
-        } else {
-            runtime.update(0);
-        }
-    } catch {
-        // error already emitted via runtime events
-    }
-}
-
-function setParameter(id: string, value: number) {
-    if (id === "PARAM_ANGLE_X") {
-        manualAngleX = value;
-    }
-    runtime?.setParameter(id, value);
-    if (!props.autoplay) {
-        runtime?.update(0);
-    }
-}
-
-function clearManualAngleX() {
-    manualAngleX = null;
-}
-
-function modelPoint(event: PointerEvent) {
-    const canvas = _canvas;
-    if (!canvas) return null;
-    const rect = canvas.getBoundingClientRect();
-    if (!rect.width || !rect.height) return null;
-    return {
-        x: ((event.clientX - rect.left) / rect.width) * 2 - 1,
-        y: 1 - ((event.clientY - rect.top) / rect.height) * 2,
-    };
-}
-
-function parameterFromNormalized(id: string, normalized: number) {
-    const binding = runtime?.listParameters().find((p) => p.id === id);
-    if (!binding) return normalized;
-    return normalized >= 0
-        ? binding.defaultValue +
-              (binding.max - binding.defaultValue) * normalized
-        : binding.defaultValue +
-              (binding.defaultValue - binding.min) * normalized;
-}
-
-function applyPointerFocus(x: number, y: number) {
-    if (!runtime) return;
-    for (const { id, value } of focusParameterUpdates(
-        runtime.listParameters(),
-        x,
-        y,
-    )) {
-        if (id === "PARAM_ANGLE_X") {
-            // Pointer owns ANGLE_X until cleared; stops auto-sway fighting it.
-            manualAngleX = value;
-        }
-        runtime.setParameter(id, value);
-    }
-}
-
-function onPointerMove(event: PointerEvent) {
-    const p = modelPoint(event);
-    if (!p || !runtime) return;
-    applyPointerFocus(p.x, p.y);
-    if (!props.autoplay) runtime.update(0);
-}
-
-function onPointerDown(event: PointerEvent) {
-    const p = modelPoint(event);
-    if (!p || !runtime) return;
-    const area = runtime.hitTest(p.x, p.y);
-    if (area) emit("hit", { area, x: p.x, y: p.y });
-}
-
-onMounted(() => {
-    void remount();
-});
-
-watch(
-    () =>
-        [
-            props.model,
-            props.width,
-            props.height,
-            props.prefer?.join(","),
-            props.autoplay,
-        ] as const,
-    () => {
-        void remount();
-    },
-);
-
-onBeforeUnmount(() => {
-    mountGeneration += 1;
-    stopLoop();
-    runtime?.destroy();
-    runtime = null;
-    _canvas = null;
-    hostRef.value?.replaceChildren();
-});
-
-defineExpose({
-    getRuntime: () => runtime,
-    setParameter,
-    clearManualAngleX,
-    listParameters: () => runtime?.listParameters() ?? [],
-    playMotion: (group: string, index?: number, options?: PlayMotionOptions) =>
-        runtime?.playMotion(group, index, options) ?? Promise.resolve(false),
-    stopMotion: (opts?: { fade?: boolean; slot?: string }) =>
-        runtime?.stopMotion(opts),
-    listPlayingMotions: () => runtime?.listPlayingMotions() ?? [],
-    capturePng: (opts?: { mimeType?: "image/png"; quality?: number }) => {
-        if (!runtime) {
-            return Promise.reject(
-                new Error("vue-plugin-live2d: runtime not mounted"),
-            );
-        }
-        return runtime.capturePng(opts);
-    },
-    reload,
-});
-</script>
-
-<style scoped>
-.doki-live2d-root {
-  position: relative;
-  display: inline-block;
-  line-height: 0;
-}
-
-.doki-live2d-host {
-  display: block;
-  width: 100%;
-  height: 100%;
-  line-height: 0;
-}
-
-.doki-live2d-host :deep(canvas) {
-  display: block;
-  width: 100%;
-  height: 100%;
-  background: transparent;
-  pointer-events: auto;
-  touch-action: none;
-}
-
-.doki-live2d-progress {
-  position: absolute;
-  inset: 0;
-  display: grid;
-  align-content: center;
-  justify-items: stretch;
-  gap: 0.55rem;
-  padding: 1.25rem;
-  box-sizing: border-box;
-  background: color-mix(in srgb, #0f1b2d 55%, transparent);
-  pointer-events: none;
-}
-
-.doki-live2d-progress__track {
-  height: 0.45rem;
-  border-radius: 999px;
-  background: color-mix(in srgb, #fff 22%, transparent);
-  overflow: hidden;
-}
-
-.doki-live2d-progress__fill {
-  height: 100%;
-  border-radius: inherit;
-  background: #7eb6ff;
-  transition: width 80ms linear;
-}
-
-.doki-live2d-progress__label {
-  color: #f4f8ff;
-  font: 0.78rem/1.3 ui-sans-serif, system-ui, sans-serif;
-  text-align: center;
-  word-break: break-all;
-}
-</style>