From 5b85841da1d302331ff86902a5b1d9494a23877f Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Wed, 16 Jul 2025 01:03:40 +0800
Subject: [PATCH] style(docs): improve ui style

---
 docs/.vitepress/components/DocFooter.vue      |  19 +++-
 docs/.vitepress/config.ts                     |   4 +-
 docs/.vitepress/theme/index.ts                |   4 +
 docs/.vitepress/theme/style.css               |   9 ++
 .../docs/chronicles/version-v0.0.1/index.md   | 100 +++++++++---------
 docs/package.json                             |   4 +
 docs/uno.config.ts                            |  21 ++--
 pnpm-lock.yaml                                |  29 +++--
 8 files changed, 123 insertions(+), 67 deletions(-)

diff --git a/docs/.vitepress/components/DocFooter.vue b/docs/.vitepress/components/DocFooter.vue
index 9edd7c93d..9fba65a46 100644
--- a/docs/.vitepress/components/DocFooter.vue
+++ b/docs/.vitepress/components/DocFooter.vue
@@ -29,6 +29,7 @@ const showFooter = computed(
 </script>
 
 <template>
+  <!-- eslint-disable vue/prefer-separate-static-class -->
   <footer
     v-if="showFooter"
     class="my-28"
@@ -75,7 +76,14 @@ const showFooter = computed(
       <div class="group w-full">
         <a
           v-if="control.prev?.link"
-          class="w-full inline-flex flex-col items-end border-2 border-neutral-200/40 rounded-lg border-solid bg-white/30 px-4 py-6 shadow-md shadow-transparent backdrop-blur-md transition-all duration-200 ease-in-out dark:border-2 dark:border-neutral-800/40 dark:border-solid dark:bg-neutral-800/30 hover:bg-white/50 dark:shadow-none hover:shadow-black/5 dark:hover:bg-neutral-800/50"
+          class="w-full inline-flex flex-col items-end rounded-lg px-4 py-6 backdrop-blur-md"
+          :class="[
+            'shadow-md shadow-transparent dark:shadow-none hover:shadow-black/5',
+            'border-2 border-neutral-200/40 border-solid dark:border-2 dark:border-neutral-800/40 dark:border-solid',
+            'bg-white/30 dark:bg-neutral-800/30 hover:bg-white/50 dark:hover:bg-neutral-800/50',
+            'active:scale-98',
+            'transition-all duration-200 ease-in-out',
+          ]"
           :href="control.prev.link"
         >
           <span
@@ -94,7 +102,14 @@ const showFooter = computed(
       <div class="group w-full">
         <a
           v-if="control.next?.link"
-          class="w-full inline-flex flex-col items-end border-2 border-neutral-200/40 rounded-lg border-solid bg-white/30 px-4 py-6 shadow-md shadow-transparent backdrop-blur-md transition-all duration-200 ease-in-out dark:border-2 dark:border-neutral-800/40 dark:border-solid dark:bg-neutral-800/30 hover:bg-white/50 dark:shadow-none hover:shadow-black/5 dark:hover:bg-neutral-800/50"
+          class="w-full inline-flex flex-col items-end rounded-lg px-4 py-6 backdrop-blur-md"
+          :class="[
+            'shadow-md shadow-transparent dark:shadow-none hover:shadow-black/5',
+            'border-2 border-neutral-200/40 border-solid dark:border-2 dark:border-neutral-800/40 dark:border-solid',
+            'bg-white/30 dark:bg-neutral-800/30 hover:bg-white/50 dark:hover:bg-neutral-800/50',
+            'active:scale-98',
+            'transition-all duration-200 ease-in-out',
+          ]"
           :href="control.next.link"
         >
           <span
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 6ac3d90b9..bd0669896 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -118,8 +118,8 @@ export default defineConfig({
             icon: 'lucide:calendar-days',
             link: withBase('/en/docs/chronicles/'),
             items: [
-              { text: 'Before Story v0.0.1', link: withBase('/en/docs/chronicles/version-v0.0.1/') },
               { text: 'Initial Publish v0.1.0', link: withBase('/en/docs/chronicles/version-v0.1.0/') },
+              { text: 'Before Story v0.0.1', link: withBase('/en/docs/chronicles/version-v0.0.1/') },
             ],
           },
           {
@@ -180,8 +180,8 @@ export default defineConfig({
             icon: 'lucide:calendar-days',
             link: withBase('/zh-Hans/docs/chronicles/'),
             items: [
-              { text: '先前的故事 v0.0.1', link: withBase('/zh-Hans/docs/chronicles/version-v0.0.1/') },
               { text: '首次公开 v0.1.0', link: withBase('/zh-Hans/docs/chronicles/version-v0.1.0/') },
+              { text: '先前的故事 v0.0.1', link: withBase('/zh-Hans/docs/chronicles/version-v0.0.1/') },
             ],
           },
           {
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index 4c99fb383..803422b8a 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -9,6 +9,10 @@ import Layout from '../custom/Layout.vue'
 import '@unocss/reset/tailwind.css'
 import 'uno.css'
 import './style.css'
+import '@fontsource-variable/dm-sans'
+import '@fontsource/dm-mono'
+import '@fontsource/dm-serif-display'
+import '@fontsource-variable/comfortaa'
 
 export default {
   Layout,
diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css
index 475cc368f..1023c7762 100644
--- a/docs/.vitepress/theme/style.css
+++ b/docs/.vitepress/theme/style.css
@@ -364,6 +364,15 @@ https://apple.stackexchange.com/a/123577
   vertical-align: top;
 }
 
+ul.task-list-container {
+  list-style-type: none;
+}
+
+ul.task-list-container li input.task-list-item-checkbox {
+  display: inline-block;
+  margin: 0 0.25rem 0 0;
+}
+
 mark {
   @apply bg-transparent text-foreground font-semibold;
 }
diff --git a/docs/content/en/docs/chronicles/version-v0.0.1/index.md b/docs/content/en/docs/chronicles/version-v0.0.1/index.md
index 598c2267c..53aefbd45 100644
--- a/docs/content/en/docs/chronicles/version-v0.0.1/index.md
+++ b/docs/content/en/docs/chronicles/version-v0.0.1/index.md
@@ -72,40 +72,40 @@ Now can:
 - [x] TTS integration (June 8, 2024)
   - [x] Integrated 11Labs
 - [ ] Research
-  - [ ] <span class="text-sm px-1 py-0.5 border border-solid border-purple-500/30 text-purple-400 bg-purple-500/20 rounded-lg">Experiment</span> [Deepgram Voice AI: Text to Speech + Speech to Text APIs | Deepgram](https://deepgram.com/)
-  - [ ] <span class="text-sm px-1 py-0.5 border border-solid border-purple-500/30 text-purple-400 bg-purple-500/20 rounded-lg">Experiment</span> Try GPT-SoVITS
-  - [x] <span class="text-sm px-1 py-0.5 border border-solid border-purple-500/30 text-purple-400 bg-purple-500/20 rounded-lg">Experiment</span> Try fish-speech (July 6, 2024 ~ July 7, 2024)
-    - <span class="i-icon-park-outline:up-one translate-y-0.5 text-green-400 text-lg"></span> Can indeed do few-shot direct copying, I tried copying Gura's voice, can maintain very high quality in the first 4s
-    - <span class="i-icon-park-outline:up-one translate-y-0.5 text-green-400 text-lg"></span> fish audio's audio processing tools are very comprehensive, audio processor can cover most needs (including labeling and auto-labeling)
-    - <span class="i-icon-park-outline:down-one translate-y-0.5 text-red-400 text-lg"></span> Effect is very unstable, often swallows words, sounds, or suddenly makes random noises
-    - <span class="i-icon-park-outline:down-one translate-y-0.5 text-red-400 text-lg"></span> Even running on RTX 4090 devices, in streaming audio mode, still takes up to 2s to output inference results
-  - [x] <span class="text-sm px-1 py-0.5 border border-solid border-purple-500/30 text-purple-400 bg-purple-500/20 rounded-lg">Experiment</span> Try ChatTTS (July 6, 2024 ~ July 7, 2024)
-    - <span class="i-icon-park-outline:up-one translate-y-0.5 text-green-400 text-lg"></span> Can indeed do few-shot direct copying, I tried copying Gura's voice, but effect is not as good as fish-speech
-    - <span class="i-icon-park-outline:up-one translate-y-0.5 text-green-400 text-lg"></span> Emotion control is much better than fish-speech, but in English environments, tokens like `[uv_break]` are also pronounced, people in WeChat groups are also discussing and asking about this
-    - <span class="i-icon-park-outline:down-one translate-y-0.5 text-red-400 text-lg"></span> Even running on RTX 4090 devices, in streaming audio mode, it takes several minutes... 🤯 Really ridiculous, it appears to run an llm first locally to convert plain / normalized text to text with action tokens, then it seems there's no caching or model size consideration when starting the llm
-   - [x] <span class="text-sm px-1 py-0.5 border border-solid border-purple-500/30 text-purple-400 bg-purple-500/20 rounded-lg">Experiment</span> Try other models mentioned in [TTS Arena - a Hugging Face Space by TTS-AGI](https://huggingface.co/spaces/TTS-AGI/TTS-Arena) (July 8, 2024)
-     - [x] <span class="text-sm px-1 py-0.5 border border-solid border-purple-500/30 text-purple-400 bg-purple-500/20 rounded-lg">Experiment</span> Try XTTSv2
-       - <span class="i-icon-park-outline:down-one translate-y-0.5 text-red-400 text-lg"></span> Used huggingface directly, poor effect, more stable than fish speech and chatts but tone too plain, might need lora for anime tones
-     - [x] <span class="text-sm px-1 py-0.5 border border-solid border-purple-500/30 text-purple-400 bg-purple-500/20 rounded-lg">Experiment</span> Try StyleTTS 2
-       - <span class="i-icon-park-outline:down-one translate-y-0.5 text-red-400 text-lg"></span> Used huggingface directly, poor effect, more stable than fish speech and chatts but tone too plain, might need lora for anime tones
-   - [ ] <span class="text-sm px-1 py-0.5 border border-solid border-purple-500/30 text-purple-400 bg-purple-500/20 rounded-lg">Experiment</span> Try CosyVoice (Alibaba's)
-   - [ ] <span class="text-sm px-1 py-0.5 border border-solid border-purple-500/30 text-purple-400 bg-purple-500/20 rounded-lg">Experiment</span> [Koemotion](https://koemotion.rinna.co.jp/)
-   - [ ] <span class="text-sm px-1 py-0.5 border border-solid border-purple-500/30 text-purple-400 bg-purple-500/20 rounded-lg">Experiment</span> [Seed-TTS](https://bytedancespeech.github.io/seedtts_tech_report/)
+  - [ ] <span class="text-sm px-1 py-0.5 border border-solid border-purple-500/30 text-purple-800 dark:text-purple-400 bg-purple-500/20 rounded-lg">Experiment</span> [Deepgram Voice AI: Text to Speech + Speech to Text APIs | Deepgram](https://deepgram.com/)
+  - [ ] <span class="text-sm px-1 py-0.5 border border-solid border-purple-500/30 text-purple-800 dark:text-purple-400 bg-purple-500/20 rounded-lg">Experiment</span> Try GPT-SoVITS
+  - [x] <span class="text-sm px-1 py-0.5 border border-solid border-purple-500/30 text-purple-800 dark:text-purple-400 bg-purple-500/20 rounded-lg">Experiment</span> Try fish-speech (July 6, 2024 ~ July 7, 2024)
+    - <span class="i-icon-park-outline:up-one translate-y-0.5 text-green-800 dark:text-green-400 text-lg"></span> Can indeed do few-shot direct copying, I tried copying Gura's voice, can maintain very high quality in the first 4s
+    - <span class="i-icon-park-outline:up-one translate-y-0.5 text-green-800 dark:text-green-400 text-lg"></span> fish audio's audio processing tools are very comprehensive, audio processor can cover most needs (including labeling and auto-labeling)
+    - <span class="i-icon-park-outline:down-one translate-y-0.5 text-red-800 dark:text-red-400 text-lg"></span> Effect is very unstable, often swallows words, sounds, or suddenly makes random noises
+    - <span class="i-icon-park-outline:down-one translate-y-0.5 text-red-800 dark:text-red-400 text-lg"></span> Even running on RTX 4090 devices, in streaming audio mode, still takes up to 2s to output inference results
+  - [x] <span class="text-sm px-1 py-0.5 border border-solid border-purple-500/30 text-purple-800 dark:text-purple-400 bg-purple-500/20 rounded-lg">Experiment</span> Try ChatTTS (July 6, 2024 ~ July 7, 2024)
+    - <span class="i-icon-park-outline:up-one translate-y-0.5 text-green-800 dark:text-green-400 text-lg"></span> Can indeed do few-shot direct copying, I tried copying Gura's voice, but effect is not as good as fish-speech
+    - <span class="i-icon-park-outline:up-one translate-y-0.5 text-green-800 dark:text-green-400 text-lg"></span> Emotion control is much better than fish-speech, but in English environments, tokens like `[uv_break]` are also pronounced, people in WeChat groups are also discussing and asking about this
+    - <span class="i-icon-park-outline:down-one translate-y-0.5 text-red-800 dark:text-red-400 text-lg"></span> Even running on RTX 4090 devices, in streaming audio mode, it takes several minutes... 🤯 Really ridiculous, it appears to run an llm first locally to convert plain / normalized text to text with action tokens, then it seems there's no caching or model size consideration when starting the llm
+   - [x] <span class="text-sm px-1 py-0.5 border border-solid border-purple-500/30 text-purple-800 dark:text-purple-400 bg-purple-500/20 rounded-lg">Experiment</span> Try other models mentioned in [TTS Arena - a Hugging Face Space by TTS-AGI](https://huggingface.co/spaces/TTS-AGI/TTS-Arena) (July 8, 2024)
+     - [x] <span class="text-sm px-1 py-0.5 border border-solid border-purple-500/30 text-purple-800 dark:text-purple-400 bg-purple-500/20 rounded-lg">Experiment</span> Try XTTSv2
+       - <span class="i-icon-park-outline:down-one translate-y-0.5 text-red-800 dark:text-red-400 text-lg"></span> Used huggingface directly, poor effect, more stable than fish speech and chatts but tone too plain, might need lora for anime tones
+     - [x] <span class="text-sm px-1 py-0.5 border border-solid border-purple-500/30 text-purple-800 dark:text-purple-400 bg-purple-500/20 rounded-lg">Experiment</span> Try StyleTTS 2
+       - <span class="i-icon-park-outline:down-one translate-y-0.5 text-red-800 dark:text-red-400 text-lg"></span> Used huggingface directly, poor effect, more stable than fish speech and chatts but tone too plain, might need lora for anime tones
+   - [ ] <span class="text-sm px-1 py-0.5 border border-solid border-purple-500/30 text-purple-800 dark:text-purple-400 bg-purple-500/20 rounded-lg">Experiment</span> Try CosyVoice (Alibaba's)
+   - [ ] <span class="text-sm px-1 py-0.5 border border-solid border-purple-500/30 text-purple-800 dark:text-purple-400 bg-purple-500/20 rounded-lg">Experiment</span> [Koemotion](https://koemotion.rinna.co.jp/)
+   - [ ] <span class="text-sm px-1 py-0.5 border border-solid border-purple-500/30 text-purple-800 dark:text-purple-400 bg-purple-500/20 rounded-lg">Experiment</span> [Seed-TTS](https://bytedancespeech.github.io/seedtts_tech_report/)
 
 ### Expression (July 9, 2024)
 
-- [x] <span class="text-sm px-1 py-0.5 border border-solid border-purple-500/30 text-purple-400 bg-purple-500/20 rounded-lg">Experiment</span> Discussed with GPT how to quickly process expressions in real-time through embed instruction https://poe.com/s/vu7foBWJHtnPmWzJNeAy (July 7, 2024)
+- [x] <span class="text-sm px-1 py-0.5 border border-solid border-purple-500/30 text-purple-800 dark:text-purple-400 bg-purple-500/20 rounded-lg">Experiment</span> Discussed with GPT how to quickly process expressions in real-time through embed instruction https://poe.com/s/vu7foBWJHtnPmWzJNeAy (July 7, 2024)
 - [x] Frontend Live2D expression control (July 9, 2024)
   - [x] Implement through encoding `<|EMOTE_HAPPY|>`
   - [x] Additional support for delay syntax like `<|DELAY:1|>`
-  - [x] <span class="text-sm px-1 py-0.5 border border-solid border-green-500/30 text-green-400 bg-green-500/20 rounded-lg">Feat</span> Encapsulate emotion token `<|EMOTE_.*|>` parser and tokenizer
-    - [x] <span class="text-sm px-1 py-0.5 border border-solid border-green-500/30 text-green-400 bg-green-500/20 rounded-lg">Feat</span> Support queued streaming processing, encapsulate `useEmotionMessagesQueue` and `useEmotionsQueue`
-    - [x] <span class="text-sm px-1 py-0.5 border border-solid border-green-500/30 text-green-400 bg-green-500/20 rounded-lg">Feat</span> Support calling Live2D to process motion expressions
-    - [x] <span class="text-sm px-1 py-0.5 border border-solid border-green-500/30 text-green-400 bg-green-500/20 rounded-lg">Feat</span> Test debug page
-  - [x] <span class="text-sm px-1 py-0.5 border border-solid border-green-500/30 text-green-400 bg-green-500/20 rounded-lg">Feat</span> Encapsulate delay token `<|DELAY:.*|>` parser and tokenizer to dynamically control the delay of the entire streaming process
-    - [x] <span class="text-sm px-1 py-0.5 border border-solid border-green-500/30 text-green-400 bg-green-500/20 rounded-lg">Feat</span> Support queued streaming processing, encapsulate `useDelaysQueue`
-    - [x] <span class="text-sm px-1 py-0.5 border border-solid border-green-500/30 text-green-400 bg-green-500/20 rounded-lg">Feat</span> Test debug page
-  - [x] <span class="text-sm px-1 py-0.5 border border-solid border-green-500/30 text-green-400 bg-green-500/20 rounded-lg">Feat</span> Display layer encapsulation supports pre-tokenizing and parsing stream text to exclude `<|...|>` syntax
+  - [x] <span class="text-sm px-1 py-0.5 border border-solid border-green-500/30 text-green-800 dark:text-green-400 bg-green-500/20 rounded-lg">Feat</span> Encapsulate emotion token `<|EMOTE_.*|>` parser and tokenizer
+    - [x] <span class="text-sm px-1 py-0.5 border border-solid border-green-500/30 text-green-800 dark:text-green-400 bg-green-500/20 rounded-lg">Feat</span> Support queued streaming processing, encapsulate `useEmotionMessagesQueue` and `useEmotionsQueue`
+    - [x] <span class="text-sm px-1 py-0.5 border border-solid border-green-500/30 text-green-800 dark:text-green-400 bg-green-500/20 rounded-lg">Feat</span> Support calling Live2D to process motion expressions
+    - [x] <span class="text-sm px-1 py-0.5 border border-solid border-green-500/30 text-green-800 dark:text-green-400 bg-green-500/20 rounded-lg">Feat</span> Test debug page
+  - [x] <span class="text-sm px-1 py-0.5 border border-solid border-green-500/30 text-green-800 dark:text-green-400 bg-green-500/20 rounded-lg">Feat</span> Encapsulate delay token `<|DELAY:.*|>` parser and tokenizer to dynamically control the delay of the entire streaming process
+    - [x] <span class="text-sm px-1 py-0.5 border border-solid border-green-500/30 text-green-800 dark:text-green-400 bg-green-500/20 rounded-lg">Feat</span> Support queued streaming processing, encapsulate `useDelaysQueue`
+    - [x] <span class="text-sm px-1 py-0.5 border border-solid border-green-500/30 text-green-800 dark:text-green-400 bg-green-500/20 rounded-lg">Feat</span> Test debug page
+  - [x] <span class="text-sm px-1 py-0.5 border border-solid border-green-500/30 text-green-800 dark:text-green-400 bg-green-500/20 rounded-lg">Feat</span> Display layer encapsulation supports pre-tokenizing and parsing stream text to exclude `<|...|>` syntax
 
 ### Actions
 
@@ -230,10 +230,10 @@ Now can:
 - [ ] Auto determine context size
 - [ ] Support microphone selection
 - [ ] Implement hotkey listening (avoid streaming accidents)
-- [x] <span class="text-sm px-1 py-0.5 border border-solid border-green-500/30 text-green-400 bg-green-500/20 rounded-lg">Feat</span> Listen button (June 9, 2024)
-- [x] <span class="text-sm px-1 py-0.5 border border-solid border-red-500/30 text-red-400 bg-red-500/20 rounded-lg">Bug</span> Delay from not preloading all motions during Live2D motion control (July 10, 2024)
-- [x] <span class="text-sm px-1 py-0.5 border border-solid border-red-500/30 text-red-400 bg-red-500/20 rounded-lg">Bug</span> Frame skipping delay from not forcefully overriding current playing motion during Live2D motion control (July 10, 2024)
-- [x] <span class="text-sm px-1 py-0.5 border border-solid border-red-500/30 text-red-400 bg-red-500/20 rounded-lg">Bug</span> Playback anomalies from not awaiting `.motion(motionName)` calls during Live2D motion control (July 10, 2024)
+- [x] <span class="text-sm px-1 py-0.5 border border-solid border-green-500/30 text-green-800 dark:text-green-400 bg-green-500/20 rounded-lg">Feat</span> Listen button (June 9, 2024)
+- [x] <span class="text-sm px-1 py-0.5 border border-solid border-red-500/30 text-red-800 dark:text-red-400 bg-red-500/20 rounded-lg">Bug</span> Delay from not preloading all motions during Live2D motion control (July 10, 2024)
+- [x] <span class="text-sm px-1 py-0.5 border border-solid border-red-500/30 text-red-800 dark:text-red-400 bg-red-500/20 rounded-lg">Bug</span> Frame skipping delay from not forcefully overriding current playing motion during Live2D motion control (July 10, 2024)
+- [x] <span class="text-sm px-1 py-0.5 border border-solid border-red-500/30 text-red-800 dark:text-red-400 bg-red-500/20 rounded-lg">Bug</span> Playback anomalies from not awaiting `.motion(motionName)` calls during Live2D motion control (July 10, 2024)
 
 ### Interface optimization
 
@@ -263,24 +263,24 @@ Now can:
 
 ### Inference optimization
 
-- [x] <span class="text-sm px-1 py-0.5 border border-solid border-green-500/30 text-green-400 bg-green-500/20 rounded-lg">Feat</span> Support directly switching to thinking emote when sending messages for feedback (July 9, 2024)
-- [ ] <span class="text-sm px-1 py-0.5 border border-solid border-green-500/30 text-green-400 bg-green-500/20 rounded-lg">Feat</span> Emotion detection
+- [x] <span class="text-sm px-1 py-0.5 border border-solid border-green-500/30 text-green-800 dark:text-green-400 bg-green-500/20 rounded-lg">Feat</span> Support directly switching to thinking emote when sending messages for feedback (July 9, 2024)
+- [ ] <span class="text-sm px-1 py-0.5 border border-solid border-green-500/30 text-green-800 dark:text-green-400 bg-green-500/20 rounded-lg">Feat</span> Emotion detection
   - [ ] Currently wasting extra tokens to process emotion tokens, could consider trying sentiment for traditional NLP emotion detection
     - [ ] But traditional sentiment only has positive and negative, need to consider how to support other emotions
-- [ ] <span class="text-sm px-1 py-0.5 border border-solid border-green-500/30 text-green-400 bg-green-500/20 rounded-lg">Feat</span> Emotion token embedding
-  - [ ] <span class="text-sm px-1 py-0.5 border border-solid border-green-500/30 text-green-400 bg-green-500/20 rounded-lg">Feat</span> Current `<|EMOTE_.*|>` pattern tokens aren't managed by tokenizer, need to write many streaming-compatible tokenizers separately during inference
-  - [ ] <span class="text-sm px-1 py-0.5 border border-solid border-green-500/30 text-green-400 bg-green-500/20 rounded-lg">Feat</span> Current `<|EMOTE_.*|>` pattern tokens aren't managed by tokenizer, need to write many streaming-compatible tokenizers separately during inference
-- [x] <span class="text-sm px-1 py-0.5 border border-solid border-red-500/30 text-red-400 bg-red-500/20 rounded-lg">Bug</span> `useQueue` doesn't consider queue items separated by `isProcessing` lock during processing (July 9, 2024)
-- [x] <span class="text-sm px-1 py-0.5 border border-solid border-red-500/30 text-red-400 bg-red-500/20 rounded-lg">Bug</span> Models stored in Local Storage not aligned with required data causes `computed` infinite loop freezing interface (July 9, 2024)
-- [x] <span class="text-sm px-1 py-0.5 border border-solid border-red-500/30 text-red-400 bg-red-500/20 rounded-lg">Bug</span> Live2DViewer frame's automatic size detection capability has issues (July 9, 2024)
-- [x] <span class="text-sm px-1 py-0.5 border border-solid border-red-500/30 text-red-400 bg-red-500/20 rounded-lg">Bug</span> Issues from isolating empty text to avoid infinite loops during streamSpeech (July 9, 2024)
-- [x] <span class="text-sm px-1 py-0.5 border border-solid border-green-500/30 text-green-400 bg-green-500/20 rounded-lg">Feat</span> `useQueue` supports custom events within `handler` (July 9, 2024)
-- [ ] <span class="text-sm px-1 py-0.5 border border-solid border-green-500/30 text-green-400 bg-green-500/20 rounded-lg">Feat</span> Synchronize text output and voice output timing
-  - [ ] <span class="text-sm px-1 py-0.5 border border-solid border-green-500/30 text-green-400 bg-green-500/20 rounded-lg">Feat</span> `ttsQueue` and `audioPlaybackQueue` can store a corresponding timestamp
-  - [ ] <span class="text-sm px-1 py-0.5 border border-solid border-green-500/30 text-green-400 bg-green-500/20 rounded-lg">Feat</span> When completing `audioPlaybackQueue` processing and playback, calculate audio duration
-  - [ ] <span class="text-sm px-1 py-0.5 border border-solid border-green-500/30 text-green-400 bg-green-500/20 rounded-lg">Feat</span> Split text by spaces to get `['hello ', 'this ', 'is ', 'neuro ']`
-  - [ ] <span class="text-sm px-1 py-0.5 border border-solid border-green-500/30 text-green-400 bg-green-500/20 rounded-lg">Feat</span> Audio duration divided by text character count = delay per token group output
-  - [ ] <span class="text-sm px-1 py-0.5 border border-solid border-green-500/30 text-green-400 bg-green-500/20 rounded-lg">Feat</span> Output text according to delay instruction (or could use a delay queue)
+- [ ] <span class="text-sm px-1 py-0.5 border border-solid border-green-500/30 text-green-800 dark:text-green-400 bg-green-500/20 rounded-lg">Feat</span> Emotion token embedding
+  - [ ] <span class="text-sm px-1 py-0.5 border border-solid border-green-500/30 text-green-800 dark:text-green-400 bg-green-500/20 rounded-lg">Feat</span> Current `<|EMOTE_.*|>` pattern tokens aren't managed by tokenizer, need to write many streaming-compatible tokenizers separately during inference
+  - [ ] <span class="text-sm px-1 py-0.5 border border-solid border-green-500/30 text-green-800 dark:text-green-400 bg-green-500/20 rounded-lg">Feat</span> Current `<|EMOTE_.*|>` pattern tokens aren't managed by tokenizer, need to write many streaming-compatible tokenizers separately during inference
+- [x] <span class="text-sm px-1 py-0.5 border border-solid border-red-500/30 text-red-800 dark:text-red-400 bg-red-500/20 rounded-lg">Bug</span> `useQueue` doesn't consider queue items separated by `isProcessing` lock during processing (July 9, 2024)
+- [x] <span class="text-sm px-1 py-0.5 border border-solid border-red-500/30 text-red-800 dark:text-red-400 bg-red-500/20 rounded-lg">Bug</span> Models stored in Local Storage not aligned with required data causes `computed` infinite loop freezing interface (July 9, 2024)
+- [x] <span class="text-sm px-1 py-0.5 border border-solid border-red-500/30 text-red-800 dark:text-red-400 bg-red-500/20 rounded-lg">Bug</span> Live2DViewer frame's automatic size detection capability has issues (July 9, 2024)
+- [x] <span class="text-sm px-1 py-0.5 border border-solid border-red-500/30 text-red-800 dark:text-red-400 bg-red-500/20 rounded-lg">Bug</span> Issues from isolating empty text to avoid infinite loops during streamSpeech (July 9, 2024)
+- [x] <span class="text-sm px-1 py-0.5 border border-solid border-green-500/30 text-green-800 dark:text-green-400 bg-green-500/20 rounded-lg">Feat</span> `useQueue` supports custom events within `handler` (July 9, 2024)
+- [ ] <span class="text-sm px-1 py-0.5 border border-solid border-green-500/30 text-green-800 dark:text-green-400 bg-green-500/20 rounded-lg">Feat</span> Synchronize text output and voice output timing
+  - [ ] <span class="text-sm px-1 py-0.5 border border-solid border-green-500/30 text-green-800 dark:text-green-400 bg-green-500/20 rounded-lg">Feat</span> `ttsQueue` and `audioPlaybackQueue` can store a corresponding timestamp
+  - [ ] <span class="text-sm px-1 py-0.5 border border-solid border-green-500/30 text-green-800 dark:text-green-400 bg-green-500/20 rounded-lg">Feat</span> When completing `audioPlaybackQueue` processing and playback, calculate audio duration
+  - [ ] <span class="text-sm px-1 py-0.5 border border-solid border-green-500/30 text-green-800 dark:text-green-400 bg-green-500/20 rounded-lg">Feat</span> Split text by spaces to get `['hello ', 'this ', 'is ', 'neuro ']`
+  - [ ] <span class="text-sm px-1 py-0.5 border border-solid border-green-500/30 text-green-800 dark:text-green-400 bg-green-500/20 rounded-lg">Feat</span> Audio duration divided by text character count = delay per token group output
+  - [ ] <span class="text-sm px-1 py-0.5 border border-solid border-green-500/30 text-green-800 dark:text-green-400 bg-green-500/20 rounded-lg">Feat</span> Output text according to delay instruction (or could use a delay queue)
 - [ ] Neuro Sama's inference speed is really very fast, even counting vector db recall + re-inference + task allocation, shouldn't be this quick
 - [x] Neuro Sama's TTS is also very fast, faster than any TTS I know
   - [x] Seems very fast after integrating MicVAD and Whisper, much simpler than imagined
@@ -297,8 +297,8 @@ Now can:
     - [ ] Ask Neuro what she wants to do next, prevent Neuro from being bored
     - [ ] 24 hours enters 1, otherwise GPT easily loses perception of numbers
 - [ ] Continuous inference
-  - [x] <span class="text-sm px-1 py-0.5 border border-solid border-purple-500/30 text-purple-400 bg-purple-500/20 rounded-lg">Experiment</span> Discussion with Perplexity https://www.perplexity.ai/search/I-want-to-jKXpnx6hT6uvhm0qbu6ofA#0 (June 8, 2024)
-  - [x] <span class="text-sm px-1 py-0.5 border border-solid border-purple-500/30 text-purple-400 bg-purple-500/20 rounded-lg">Experiment</span> Experiment on Poe [https://poe.com/s/PqQfwNd2V2wFpmR0YUke](https://poe.com/s/PqQfwNd2V2wFpmR0YUke) (July 8, 2024)
+  - [x] <span class="text-sm px-1 py-0.5 border border-solid border-purple-500/30 text-purple-800 dark:text-purple-400 bg-purple-500/20 rounded-lg">Experiment</span> Discussion with Perplexity https://www.perplexity.ai/search/I-want-to-jKXpnx6hT6uvhm0qbu6ofA#0 (June 8, 2024)
+  - [x] <span class="text-sm px-1 py-0.5 border border-solid border-purple-500/30 text-purple-800 dark:text-purple-400 bg-purple-500/20 rounded-lg">Experiment</span> Experiment on Poe [https://poe.com/s/PqQfwNd2V2wFpmR0YUke](https://poe.com/s/PqQfwNd2V2wFpmR0YUke) (July 8, 2024)
   - [ ] Build a loop
     - [ ] what do you want to do
       - [ ] We can generate an actions map
diff --git a/docs/package.json b/docs/package.json
index edb34b877..dd0751120 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -11,6 +11,10 @@
     "contributors": "tsx scripts/update-contributors.ts"
   },
   "dependencies": {
+    "@fontsource-variable/comfortaa": "^5.2.6",
+    "@fontsource-variable/dm-sans": "^5.2.6",
+    "@fontsource/dm-mono": "^5.2.6",
+    "@fontsource/dm-serif-display": "^5.2.6",
     "@internationalized/date": "^3.8.2",
     "@proj-airi/chromatic": "^0.0.7",
     "@proj-airi/i18n": "workspace:^",
diff --git a/docs/uno.config.ts b/docs/uno.config.ts
index 00c386c55..35cccafa5 100644
--- a/docs/uno.config.ts
+++ b/docs/uno.config.ts
@@ -4,25 +4,32 @@ import { defineConfig, presetAttributify, presetTypography, presetWebFonts, pres
 export default defineConfig({
   presets: [
     presetAttributify(),
-    presetTypography(),
+    presetTypography({
+      cssExtend: {
+        a: {
+          'text-decoration': 'underline',
+          'text-decoration-style': 'dotted',
+        },
+      },
+    }),
     presetWind3(),
     presetWebFonts({
       fonts: {
         'sans': {
-          name: 'DM Sans',
-          provider: 'fontsource',
+          name: 'DM Sans Variable',
+          provider: 'none',
         },
         'serif': {
           name: 'DM Serif Display',
-          provider: 'fontsource',
+          provider: 'none',
         },
         'mono': {
           name: 'DM Mono',
-          provider: 'fontsource',
+          provider: 'none',
         },
         'sans-rounded': {
-          name: 'Comfortaa',
-          provider: 'fontsource',
+          name: 'Comfortaa Variable',
+          provider: 'none',
         },
       },
     }),
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d01d1c707..1e51d17a0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -905,6 +905,18 @@ importers:
 
   docs:
     dependencies:
+      '@fontsource-variable/comfortaa':
+        specifier: ^5.2.6
+        version: 5.2.6
+      '@fontsource-variable/dm-sans':
+        specifier: ^5.2.6
+        version: 5.2.6
+      '@fontsource/dm-mono':
+        specifier: ^5.2.6
+        version: 5.2.6
+      '@fontsource/dm-serif-display':
+        specifier: ^5.2.6
+        version: 5.2.6
       '@internationalized/date':
         specifier: ^3.8.2
         version: 3.8.2
@@ -3386,6 +3398,9 @@ packages:
   '@floating-ui/vue@1.1.6':
     resolution: {integrity: sha512-XFlUzGHGv12zbgHNk5FN2mUB7ROul3oG2ENdTpWdE+qMFxyNxWSRmsoyhiEnpmabNm6WnUvR1OvJfUfN4ojC1A==}
 
+  '@fontsource-variable/comfortaa@5.2.6':
+    resolution: {integrity: sha512-uWjgXWmfUhpsax7Y6lUcWNOveIgtYYw4ZPbCkvMWjGPU2aYtTUa1Q8etT3zaDmmWXJOgv677Cgchj8Fh1304EA==}
+
   '@fontsource-variable/dm-sans@5.2.6':
     resolution: {integrity: sha512-edr+wGsc9d7/5aMB8ty1z0Zb0fqzJtBZ5+c2FhtrJwYhefcLEOL4r66EBqeyEFhVTMhCGIjhtxmigrRbPN0mUw==}
 
@@ -6254,6 +6269,9 @@ packages:
   '@xsai/shared@0.2.2':
     resolution: {integrity: sha512-bgalLd3samx36hDRRmu3M75LY5NfWwh3YRaMwY4Woy7X09JQx+vEqVpJcaIeqcmVqztm8NGYzj8hUru7lwPh0w==}
 
+  '@xsai/shared@0.3.0':
+    resolution: {integrity: sha512-fUtZY+P2uedrxg3oU/Jdv9K/v+K9SiS3DmZ/iO5WFqC3NK/fvU/eJMJARpPCqLhPiDbv0+5eHZ/Ok/WXdIWLqg==}
+
   '@xsai/shared@0.3.0-beta.5':
     resolution: {integrity: sha512-0vDW0fkEcFhfd3uG2OEMkoqq/ghh62KJUokMUwaAPKLNcVNAVcFRoslH9lKjdHJziSZ/b59f5rpUEjU3DHooZQ==}
 
@@ -6263,9 +6281,6 @@ packages:
   '@xsai/shared@0.3.0-beta.8':
     resolution: {integrity: sha512-S7BYvluU7aA2Ti7HEblV3ISDZbF89VP2dDC5WCrylYlQIYoFlZjlhJhJL5c/+KwX+og0pvh5Y0iSPKdcoMmLmw==}
 
-  '@xsai/shared@0.3.0-beta.9':
-    resolution: {integrity: sha512-vZoXmWuTaS0SbPc6U9IeGJzzHCNVzBiLfNHQnLPrQeXT5r8edjGx8fEUIPO8cvlPsBlvPYT8lfEaqvZrdWTUww==}
-
   '@xsai/stream-text@0.3.0-beta.6':
     resolution: {integrity: sha512-w1aQEqa1yGXjSckZzZcpFgRf3JzUuqHDB4tc3UZaKa4DLGmslr3e4xXpOXWuqgIeDMdj2YWI9163GC/bfF0zBA==}
 
@@ -14275,6 +14290,8 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
+  '@fontsource-variable/comfortaa@5.2.6': {}
+
   '@fontsource-variable/dm-sans@5.2.6': {}
 
   '@fontsource-variable/jura@5.2.6': {}
@@ -17590,7 +17607,7 @@ snapshots:
 
   '@xsai-ext/shared-providers@0.2.2':
     dependencies:
-      '@xsai/shared': 0.3.0-beta.9
+      '@xsai/shared': 0.3.0
 
   '@xsai-ext/shared-providers@0.3.0-beta.8':
     dependencies:
@@ -17655,14 +17672,14 @@ snapshots:
 
   '@xsai/shared@0.2.2': {}
 
+  '@xsai/shared@0.3.0': {}
+
   '@xsai/shared@0.3.0-beta.5': {}
 
   '@xsai/shared@0.3.0-beta.7': {}
 
   '@xsai/shared@0.3.0-beta.8': {}
 
-  '@xsai/shared@0.3.0-beta.9': {}
-
   '@xsai/stream-text@0.3.0-beta.6':
     dependencies:
       '@xsai/shared-chat': 0.3.0-beta.6