diff --git a/website/src/admonitions.css b/website/src/admonitions.css
new file mode 100644
index 0000000..7826766
--- /dev/null
+++ b/website/src/admonitions.css
@@ -0,0 +1,108 @@
+.admonition {
+	@apply my-4 rounded-sm px-4 py-3 text-[--tw-prose-body] prose-p:my-2 prose-pre:my-4;
+	@apply border-l-4 border-[--admonition-border];
+	@apply bg-[--admonition-bg];
+
+	@apply [--shiki-background:theme(colors.white/0.2)];
+	@apply dark:[--shiki-background:theme(colors.black/0.2)];
+
+	--tw-prose-body: theme(colors.light);
+	--tw-prose-headings: theme(colors.light);
+	--tw-prose-lead: theme(colors.light);
+	--tw-prose-links: var(--admonition-text);
+	--tw-prose-bold: theme(colors.light);
+	--tw-prose-counters: theme(colors.light);
+	--tw-prose-bullets: var(--admonition-border);
+	--tw-prose-hr: var(--admonition-border);
+	--tw-prose-quotes: theme(colors.light);
+	--tw-prose-quote-borders: var(--admonition-border);
+	--tw-prose-code: theme(colors.light);
+	--tw-prose-pre-code: theme(colors.light);
+	--tw-prose-pre-bg: var(--shiki-background);
+	--tw-prose-th-borders: var(--admonition-border);
+	--tw-prose-td-borders: var(--admonition-border);
+}
+
+.admonition pre {
+	@apply border border-[--admonition-border] bg-[--shiki-background];
+}
+
+.admonition-title {
+	@apply flex items-center space-x-2 text-lg font-semibold;
+}
+
+.admonition-title * {
+	color: var(--admonition-text);
+}
+
+.admonition-icon {
+	@apply inline-block size-6 bg-current;
+	mask-image: var(--admonition-icon);
+}
+
+.admonition-note {
+	--admonition-bg: theme(colors.blue.600 / 0.1);
+	--admonition-border: theme(colors.blue.600 / 0.4);
+	--admonition-text: theme(colors.blue.950);
+	--admonition-icon: url(lucide-static/icons/info.svg);
+}
+
+.admonition-tip {
+	--admonition-bg: theme(colors.green.600 / 0.1);
+	--admonition-border: theme(colors.green.600 / 0.4);
+	--admonition-text: theme(colors.green.950);
+	--admonition-icon: url(lucide-static/icons/lightbulb.svg);
+}
+
+.admonition-info {
+	--admonition-bg: theme(colors.purple.600 / 0.1);
+	--admonition-border: theme(colors.purple.600 / 0.4);
+	--admonition-text: theme(colors.purple.950);
+	--admonition-icon: url(lucide-static/icons/message-square-warning.svg);
+}
+
+.admonition-warning {
+	--admonition-bg: theme(colors.yellow.600 / 0.1);
+	--admonition-border: theme(colors.yellow.600 / 0.4);
+	--admonition-text: theme(colors.yellow.950);
+	--admonition-icon: url(lucide-static/icons/triangle-alert.svg);
+}
+
+.admonition-danger {
+	--admonition-bg: theme(colors.red.600 / 0.1);
+	--admonition-border: theme(colors.red.600 / 0.4);
+	--admonition-text: theme(colors.red.950);
+	--admonition-icon: url(lucide-static/icons/octagon-alert.svg);
+}
+
+@media (prefers-color-scheme: dark) {
+	.admonition-note {
+		--admonition-bg: theme(colors.blue.500 / 0.1);
+		--admonition-border: theme(colors.blue.500 / 0.6);
+		--admonition-text: theme(colors.blue.100);
+	}
+
+	.admonition-tip {
+		--admonition-bg: theme(colors.green.500 / 0.1);
+		--admonition-border: theme(colors.green.500 / 0.6);
+		--admonition-text: theme(colors.green.100);
+	}
+
+	.admonition-info {
+		--admonition-bg: theme(colors.purple.500 / 0.1);
+		--admonition-border: theme(colors.purple.500 / 0.6);
+		--admonition-text: theme(colors.purple.100);
+	}
+
+	.admonition-warning {
+		--admonition-bg: theme(colors.yellow.500 / 0.1);
+		--admonition-border: theme(colors.yellow.500 / 0.6);
+		--admonition-text: theme(colors.yellow.100);
+	}
+
+	.admonition-danger {
+		--admonition-bg: theme(colors.red.500 / 0.1);
+		--admonition-border: theme(colors.red.500 / 0.6);
+		--admonition-text: theme(colors.red.100);
+	}
+}
diff --git a/website/src/app.css b/website/src/app.css
index 23c2c9a..35cb953 100644
--- a/website/src/app.css
+++ b/website/src/app.css
@@ -2,6 +2,8 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
+@import "admonitions.css";
+
 :root {
 	--color-background: 255 245 230;
 	--color-card: 245 230 210;
@@ -90,103 +92,3 @@ body {
 	-ms-overflow-style: none;
 	scrollbar-width: none;
 }
-
-.admonition {
-	@apply my-4 rounded-sm border-l-4 px-4 py-3 prose-p:my-2 prose-pre:my-4;
-	border-color: var(--admonition-border);
-	background-color: var(--admonition-bg);
-	--shiki-background: rgb(255 255 255 / 0.3);
-}
-
-.admonition * {
-	color: theme(colors.light);
-}
-
-.admonition a,
-.admonition a * {
-	color: var(--admonition-text);
-}
-
-.admonition pre {
-	@apply border border-[--admonition-border];
-}
-
-.admonition-title {
-	@apply flex items-center space-x-2 text-lg font-semibold;
-}
-
-.admonition-title * {
-	color: var(--admonition-text);
-}
-
-.admonition-icon {
-	@apply inline-block size-6 bg-current;
-	mask-image: var(--admonition-icon);
-}
-
-@media (prefers-color-scheme: dark) {
-	.admonition {
-		border-color: var(--admonition-border-dark);
-		background-color: var(--admonition-bg-dark);
-		--shiki-background: rgb(0 0 0 / 0.3);
-	}
-
-	.admonition-title * {
-		color: var(--admonition-text-dark);
-	}
-
-	.admonition a,
-	.admonition a * {
-		color: var(--admonition-text-dark);
-	}
-}
-
-.admonition-note {
-	--admonition-bg: theme(colors.blue.600 / 0.1);
-	--admonition-border: theme(colors.blue.600 / 0.4);
-	--admonition-text: theme(colors.blue.950);
-	--admonition-bg-dark: theme(colors.blue.500 / 0.1);
-	--admonition-border-dark: theme(colors.blue.500 / 0.6);
-	--admonition-text-dark: theme(colors.blue.100);
-	--admonition-icon: url(lucide-static/icons/info.svg);
-}
-
-.admonition-tip {
-	--admonition-bg: theme(colors.green.600 / 0.1);
-	--admonition-border: theme(colors.green.600 / 0.4);
-	--admonition-text: theme(colors.green.950);
-	--admonition-bg-dark: theme(colors.green.500 / 0.1);
-	--admonition-border-dark: theme(colors.green.500 / 0.6);
-	--admonition-text-dark: theme(colors.green.100);
-	--admonition-icon: url(lucide-static/icons/lightbulb.svg);
-}
-
-.admonition-info {
-	--admonition-bg: theme(colors.purple.600 / 0.1);
-	--admonition-border: theme(colors.purple.600 / 0.4);
-	--admonition-text: theme(colors.purple.950);
-	--admonition-bg-dark: theme(colors.purple.500 / 0.1);
-	--admonition-border-dark: theme(colors.purple.500 / 0.6);
-	--admonition-text-dark: theme(colors.purple.100);
-	--admonition-icon: url(lucide-static/icons/message-square-warning.svg);
-}
-
-.admonition-warning {
-	--admonition-bg: theme(colors.yellow.600 / 0.1);
-	--admonition-border: theme(colors.yellow.600 / 0.4);
-	--admonition-text: theme(colors.yellow.950);
-	--admonition-bg-dark: theme(colors.yellow.500 / 0.1);
-	--admonition-border-dark: theme(colors.yellow.500 / 0.6);
-	--admonition-text-dark: theme(colors.yellow.100);
-	--admonition-icon: url(lucide-static/icons/triangle-alert.svg);
-}
-
-.admonition-danger {
-	--admonition-bg: theme(colors.red.600 / 0.1);
-	--admonition-border: theme(colors.red.600 / 0.4);
-	--admonition-text: theme(colors.red.950);
-	--admonition-bg-dark: theme(colors.red.500 / 0.1);
-	--admonition-border-dark: theme(colors.red.500 / 0.6);
-	--admonition-text-dark: theme(colors.red.100);
-	--admonition-icon: url(lucide-static/icons/octagon-alert.svg);
-}