diff --git a/docs/.vitepress/theme/nixie.css b/docs/.vitepress/theme/custom-nixie.css
similarity index 100%
rename from docs/.vitepress/theme/nixie.css
rename to docs/.vitepress/theme/custom-nixie.css
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index 83240492f..b6ef34e0d 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -8,8 +8,13 @@ import Layout from '../custom/Layout.vue'
 
 import '@unocss/reset/tailwind.css'
 import 'uno.css'
-import './nixie.css'
 import './style.css'
+import './theme-vitepress.css'
+import './theme-markdown.css'
+import './theme-media.css'
+import './theme-kbd.css'
+import './theme-animations.css'
+import './custom-nixie.css'
 import '@fontsource-variable/quicksand'
 import '@fontsource-variable/dm-sans'
 import '@fontsource/dm-mono'
diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css
index a7d755075..869202d7b 100644
--- a/docs/.vitepress/theme/style.css
+++ b/docs/.vitepress/theme/style.css
@@ -122,269 +122,10 @@ html {
 	}
 }
 
-.custom .vp-code {
-  @apply border-none rounded-none;
-}
-.vp-code {
-  @apply px-6 py-4 my-0 bg-[hsl(24_9.8%_10%)] border border-[hsl(0_0%_15%)] rounded-lg;
-
-  .diff {
-    @apply inline-block w-[calc(100%_+_48px)] px-6 -mx-6
-  }
-  .diff:before {
-    @apply absolute left-2.5
-  }
-
-  .diff.remove {
-    @apply bg-red-500/20 opacity-70
-  }
-  .diff.remove:before {
-    content: "-";
-    @apply text-red-500/80
-  }
-
-  .diff.add {
-    @apply bg-green-600/15
-  }
-  .diff.add:before {
-    content: "+";
-    @apply text-green-600/80
-  }
-
-  .highlighted {
-    @apply inline-block w-[calc(100%_+_48px)] px-6 -mx-6 bg-[hsl(0_0%_15%)]
-  }
-
-  code {
-    @apply w-fit block min-w-full
-  }
-}
-
-.custom-block {
-  @apply rounded-xl px-4 py-3 border border-muted relative overflow-hidden;
-
-  &::before {
-    content: "";
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 4px;
-    height: 100%;
-    border-radius: 999px;
-  }
-
-  & .custom-block-title {
-    margin: 0 0 8px 0;
-  }
-
-  & > p {
-    margin: 0;
-    display: block;
-  }
-}
-
-.custom-block.info {
-  @apply bg-slate-200/20 dark:bg-slate-900/80 border-none;
-
-  &::before {
-    @apply bg-slate-500/20 dark:bg-slate-400/20;
-  }
-
-  & .custom-block-title {
-    @apply text-slate-800 dark:text-slate-300 font-semibold;
-  }
-
-  &> p:nth-child(2) {
-    @apply dark:text-slate-50;
-  }
-}
-
-.custom-block.tip {
-  @apply bg-violet-50 dark:bg-violet-900/20 border-none;
-
-  &::before {
-    @apply bg-violet-500/20 dark:bg-violet-400/20;
-  }
-
-  & .custom-block-title {
-    @apply text-violet-800 dark:text-violet-300 font-semibold;
-  }
-
-  & > p:nth-child(2) {
-    @apply dark:text-violet-50;
-  }
-}
-
-.custom-block.warning {
-  @apply bg-yellow-50 dark:bg-yellow-900/20 border-none;
-
-  &::before {
-    @apply bg-yellow-500/20 dark:bg-yellow-400/20;
-  }
-
-  & .custom-block-title {
-    @apply text-yellow-800 dark:text-yellow-300 font-semibold;
-  }
-
-  &> p:nth-child(2) {
-    @apply dark:text-yellow-50;
-  }
-}
-
-.custom-block.danger {
-  @apply bg-neutral-100 dark:bg-neutral-900/20 border-none;
-
-  &::before {
-    @apply bg-neutral-500/20 dark:bg-neutral-400/20;
-  }
-
-  & .custom-block-title {
-    @apply text-neutral-800 dark:text-neutral-300 font-semibold;
-  }
-
-  & > p:nth-child(2) {
-    @apply dark:text-neutral-50;
-  }
-}
-
 input {
   @apply bg-foreground;
 }
 
-.list-box-tips kbd,
-.prose kbd,
-.custom-block kbd {
-  color: inherit;
-  padding: 4px 8px;
-  font-size: 0.8rem;
-  cursor: pointer;
-  user-select: none;
-  position: relative;
-  bottom: 2px;
-  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont ,"Segoe UI Adjusted", "Segoe UI", "Liberation Sans", sans-serif;
-  font-weight: 600;
-  border: none;
-  border-radius: inherit;
-}
-
-.custom-block kbd {
-  z-index: 1;
-}
-
-.list-box-tips kbd::after,
-.prose kbd::after,
-.custom-block kbd::after {
-  display: inline;
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  height: 100%;
-  width: 100%;
-  background: hsl(0 0% 94% / 1);
-  box-shadow: 0px 2px 0 2px hsl(0 0% 88% / 1);
-  border-radius: 6px;
-  font-size: 0.8rem;
-  cursor: pointer;
-  user-select: none;
-  z-index: -1;
-}
-
-.dark .list-box-tips kbd::after,
-.dark .prose kbd::after,
-.dark .custom-block kbd::after {
-  background: #3c3c3c;
-  box-shadow: 0 2px 0 2px #292929;
-}
-
-/**
-https://apple.stackexchange.com/a/123577
-*/
-kbd[data-macos-keyboard-key="command"]::before {
-  content: "⌘";
-  vertical-align: top;
-  margin-right: 4px;
-}
-
-kbd[data-macos-keyboard-key="option"]::before {
-  content: "⌥";
-  vertical-align: top;
-  margin-right: 4px;
-}
-
-kbd[data-windows-keyboard-key="windows"]::before {
-  content: "⊞";
-  vertical-align: top;
-  margin-right: 4px;
-  font-size: 1.4em;
-}
-
-kbd[data-keyboard-key="esc"]::before {
-  content: "⎋";
-  vertical-align: top;
-  margin-right: 4px;
-}
-
-kbd[data-keyboard-key="shift"]::before {
-  content: "⇧";
-  vertical-align: top;
-  margin-right: 4px;
-}
-
-kbd[data-keyboard-key="return"]::before {
-  content: "⏎";
-  vertical-align: top;
-  margin-right: 4px;
-}
-
-kbd[data-keyboard-key="control"]::before {
-  content: "⌃";
-  vertical-align: top;
-  margin-right: 4px;
-}
-
-kbd[data-keyboard-key="enter"]::before {
-  content: "⏎";
-  vertical-align: top;
-  margin-right: 4px;
-}
-
-kbd[data-keyboard-key="space"]::before {
-  content: "␣";
-  vertical-align: top;
-  margin-right: 4px;
-  font-weight: bold;
-}
-
-kbd[data-keyboard-key="up-arrow"]::before {
-  content: "↑";
-  vertical-align: top;
-}
-
-kbd[data-keyboard-key="down-arrow"]::before {
-  content: "↓";
-  vertical-align: top;
-}
-
-kbd[data-keyboard-key="left-arrow"]::before {
-  content: "←";
-  vertical-align: top;
-}
-
-kbd[data-keyboard-key="right-arrow"]::before {
-  content: "→";
-  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;
 }
@@ -421,26 +162,6 @@ mark {
   content: counter(step);
 }
 
-.image-bg {
-  @apply scale-75 !transform !-translate-x-1/2 !-translate-y-1/2;
-}
-
-.custom-justify-center:before,
-.custom-justify-center:after {
-  content: "";
-  flex: 1;
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.15s ease-in-out;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-
 main .prose :where(details):not(:where(.not-prose,.not-prose *)) {
   background-color:rgba(131, 186, 231, 0.1);
 
@@ -468,41 +189,3 @@ pre.shiki code span {
 .dark pre.shiki code span {
   color: var(--shiki-dark);
 }
-
-html.dark img.light {
-  display: none;
-}
-
-html.dark video.light {
-  display: none;
-}
-
-html:not(.dark) img.dark {
-  display: none;
-}
-
-html:not(.dark) video.dark {
-  display: none;
-}
-
-.docs-article video {
-  border-radius: 12px;
-}
-
-.docs-article img {
-  border-radius: 12px;
-}
-
-@media (width >= 64rem) {
-  .docs-article video {
-    max-height: 50dvw;
-    margin: 0 auto;
-  }
-}
-
-@media (width >= 80rem) {
-  .docs-article video {
-    max-height: 40dvw;
-    margin: 0 auto;
-  }
-}
diff --git a/docs/.vitepress/theme/theme-animations.css b/docs/.vitepress/theme/theme-animations.css
new file mode 100644
index 000000000..acc2bcf18
--- /dev/null
+++ b/docs/.vitepress/theme/theme-animations.css
@@ -0,0 +1,9 @@
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.15s ease-in-out;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
diff --git a/docs/.vitepress/theme/theme-kbd.css b/docs/.vitepress/theme/theme-kbd.css
new file mode 100644
index 000000000..f03e132aa
--- /dev/null
+++ b/docs/.vitepress/theme/theme-kbd.css
@@ -0,0 +1,126 @@
+
+
+.list-box-tips kbd,
+.prose kbd,
+.custom-block kbd {
+  color: inherit;
+  padding: 4px 8px;
+  font-size: 0.8rem;
+  cursor: pointer;
+  user-select: none;
+  position: relative;
+  bottom: 2px;
+  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont ,"Segoe UI Adjusted", "Segoe UI", "Liberation Sans", sans-serif;
+  font-weight: 600;
+  border: none;
+  border-radius: inherit;
+}
+
+.custom-block kbd {
+  z-index: 1;
+}
+
+.list-box-tips kbd::after,
+.prose kbd::after,
+.custom-block kbd::after {
+  display: inline;
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  background: hsl(0 0% 94% / 1);
+  box-shadow: 0px 2px 0 2px hsl(0 0% 88% / 1);
+  border-radius: 6px;
+  font-size: 0.8rem;
+  cursor: pointer;
+  user-select: none;
+  z-index: -1;
+}
+
+.dark .list-box-tips kbd::after,
+.dark .prose kbd::after,
+.dark .custom-block kbd::after {
+  background: #3c3c3c;
+  box-shadow: 0 2px 0 2px #292929;
+}
+
+/**
+https://apple.stackexchange.com/a/123577
+*/
+kbd[data-macos-keyboard-key="command"]::before {
+  content: "⌘";
+  vertical-align: top;
+  margin-right: 4px;
+}
+
+kbd[data-macos-keyboard-key="option"]::before {
+  content: "⌥";
+  vertical-align: top;
+  margin-right: 4px;
+}
+
+kbd[data-windows-keyboard-key="windows"]::before {
+  content: "⊞";
+  vertical-align: top;
+  margin-right: 4px;
+  font-size: 1.4em;
+}
+
+kbd[data-keyboard-key="esc"]::before {
+  content: "⎋";
+  vertical-align: top;
+  margin-right: 4px;
+}
+
+kbd[data-keyboard-key="shift"]::before {
+  content: "⇧";
+  vertical-align: top;
+  margin-right: 4px;
+}
+
+kbd[data-keyboard-key="return"]::before {
+  content: "⏎";
+  vertical-align: top;
+  margin-right: 4px;
+}
+
+kbd[data-keyboard-key="control"]::before {
+  content: "⌃";
+  vertical-align: top;
+  margin-right: 4px;
+}
+
+kbd[data-keyboard-key="enter"]::before {
+  content: "⏎";
+  vertical-align: top;
+  margin-right: 4px;
+}
+
+kbd[data-keyboard-key="space"]::before {
+  content: "␣";
+  vertical-align: top;
+  margin-right: 4px;
+  font-weight: bold;
+}
+
+kbd[data-keyboard-key="up-arrow"]::before {
+  content: "↑";
+  vertical-align: top;
+}
+
+kbd[data-keyboard-key="down-arrow"]::before {
+  content: "↓";
+  vertical-align: top;
+}
+
+kbd[data-keyboard-key="left-arrow"]::before {
+  content: "←";
+  vertical-align: top;
+}
+
+kbd[data-keyboard-key="right-arrow"]::before {
+  content: "→";
+  vertical-align: top;
+}
diff --git a/docs/.vitepress/theme/theme-markdown.css b/docs/.vitepress/theme/theme-markdown.css
new file mode 100644
index 000000000..c2f4b9755
--- /dev/null
+++ b/docs/.vitepress/theme/theme-markdown.css
@@ -0,0 +1,8 @@
+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;
+}
diff --git a/docs/.vitepress/theme/theme-media.css b/docs/.vitepress/theme/theme-media.css
new file mode 100644
index 000000000..008276146
--- /dev/null
+++ b/docs/.vitepress/theme/theme-media.css
@@ -0,0 +1,37 @@
+html.dark img.light {
+  display: none;
+}
+
+html.dark video.light {
+  display: none;
+}
+
+html:not(.dark) img.dark {
+  display: none;
+}
+
+html:not(.dark) video.dark {
+  display: none;
+}
+
+.docs-article video {
+  border-radius: 12px;
+}
+
+.docs-article img {
+  border-radius: 12px;
+}
+
+@media (width >= 64rem) {
+  .docs-article video {
+    max-height: 50dvw;
+    margin: 0 auto;
+  }
+}
+
+@media (width >= 80rem) {
+  .docs-article video {
+    max-height: 40dvw;
+    margin: 0 auto;
+  }
+}
diff --git a/docs/.vitepress/theme/theme-vitepress.css b/docs/.vitepress/theme/theme-vitepress.css
new file mode 100644
index 000000000..7db2ead17
--- /dev/null
+++ b/docs/.vitepress/theme/theme-vitepress.css
@@ -0,0 +1,126 @@
+
+
+.custom .vp-code {
+  @apply border-none rounded-none;
+}
+.vp-code {
+  @apply px-6 py-4 my-0 bg-[hsl(24_9.8%_10%)] border border-[hsl(0_0%_15%)] rounded-lg;
+
+  .diff {
+    @apply inline-block w-[calc(100%_+_48px)] px-6 -mx-6
+  }
+  .diff:before {
+    @apply absolute left-2.5
+  }
+
+  .diff.remove {
+    @apply bg-red-500/20 opacity-70
+  }
+  .diff.remove:before {
+    content: "-";
+    @apply text-red-500/80
+  }
+
+  .diff.add {
+    @apply bg-green-600/15
+  }
+  .diff.add:before {
+    content: "+";
+    @apply text-green-600/80
+  }
+
+  .highlighted {
+    @apply inline-block w-[calc(100%_+_48px)] px-6 -mx-6 bg-[hsl(0_0%_15%)]
+  }
+
+  code {
+    @apply w-fit block min-w-full
+  }
+}
+
+.custom-block {
+  @apply rounded-xl px-4 py-3 border border-muted relative overflow-hidden;
+
+  &::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 4px;
+    height: 100%;
+    border-radius: 999px;
+  }
+
+  & .custom-block-title {
+    margin: 0 0 8px 0;
+  }
+
+  & > p {
+    margin: 0;
+    display: block;
+  }
+}
+
+.custom-block.info {
+  @apply bg-slate-200/20 dark:bg-slate-900/80 border-none;
+
+  &::before {
+    @apply bg-slate-500/20 dark:bg-slate-400/20;
+  }
+
+  & .custom-block-title {
+    @apply text-slate-800 dark:text-slate-300 font-semibold;
+  }
+
+  &> p:nth-child(2) {
+    @apply dark:text-slate-50;
+  }
+}
+
+.custom-block.tip {
+  @apply bg-violet-50 dark:bg-violet-900/20 border-none;
+
+  &::before {
+    @apply bg-violet-500/20 dark:bg-violet-400/20;
+  }
+
+  & .custom-block-title {
+    @apply text-violet-800 dark:text-violet-300 font-semibold;
+  }
+
+  & > p:nth-child(2) {
+    @apply dark:text-violet-50;
+  }
+}
+
+.custom-block.warning {
+  @apply bg-yellow-50 dark:bg-yellow-900/20 border-none;
+
+  &::before {
+    @apply bg-yellow-500/20 dark:bg-yellow-400/20;
+  }
+
+  & .custom-block-title {
+    @apply text-yellow-800 dark:text-yellow-300 font-semibold;
+  }
+
+  &> p:nth-child(2) {
+    @apply dark:text-yellow-50;
+  }
+}
+
+.custom-block.danger {
+  @apply bg-neutral-100 dark:bg-neutral-900/20 border-none;
+
+  &::before {
+    @apply bg-neutral-500/20 dark:bg-neutral-400/20;
+  }
+
+  & .custom-block-title {
+    @apply text-neutral-800 dark:text-neutral-300 font-semibold;
+  }
+
+  & > p:nth-child(2) {
+    @apply dark:text-neutral-50;
+  }
+}