From e5d38c751ff7b8efd32bb598352bcd6000df80de Mon Sep 17 00:00:00 2001
From: Joseph Kato <joseph@jdkato.io>
Date: Mon, 23 Dec 2024 21:56:09 -0700
Subject: [PATCH] WIP

---
 src/routes/+layout.svelte                |   8 +-
 src/styles/anchor.css                    |  23 +
 src/styles/app.css                       | 196 +++++
 src/{app.css => styles/autocomplete.css} | 907 -----------------------
 src/styles/code.css                      |  94 +++
 src/styles/docsearch.css                 | 582 +++++++++++++++
 6 files changed, 902 insertions(+), 908 deletions(-)
 create mode 100644 src/styles/anchor.css
 create mode 100644 src/styles/app.css
 rename src/{app.css => styles/autocomplete.css} (58%)
 create mode 100644 src/styles/code.css
 create mode 100644 src/styles/docsearch.css

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index cdcfa4c..6268411 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -2,7 +2,13 @@
 	import SiteHeader from '$lib/components/SiteHeader.svelte';
 	import SiteFooter from '$lib/components/SiteFooter.svelte';
 	import { ModeWatcher } from 'mode-watcher';
-	import '../app.css';
+
+	import '../styles/app.css';
+	import '../styles/anchor.css';
+	import '../styles/code.css';
+	import '../styles/autocomplete.css';
+	import '../styles/docsearch.css';
+
 	let { children } = $props();
 </script>
 
diff --git a/src/styles/anchor.css b/src/styles/anchor.css
new file mode 100644
index 0000000..8e189d9
--- /dev/null
+++ b/src/styles/anchor.css
@@ -0,0 +1,23 @@
+.prose .anchor {
+	text-decoration: none;
+}
+
+.prose .anchor::after {
+	content: '#';
+	color: #999;
+	margin-left: 0.25rem;
+	opacity: 0;
+	transition: opacity 0.2s ease-in-out;
+}
+
+.prose h2:hover .anchor::after,
+.prose h3:hover .anchor::after,
+.prose h4:hover .anchor::after,
+.prose h5:hover .anchor::after,
+.prose h6:hover .anchor::after {
+	opacity: 1;
+}
+
+.prose .anchor .dark & {
+	color: #fff;
+}
diff --git a/src/styles/app.css b/src/styles/app.css
new file mode 100644
index 0000000..a3e91a1
--- /dev/null
+++ b/src/styles/app.css
@@ -0,0 +1,196 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+	:root {
+		--background: 0 0% 100%;
+		--foreground: 20 14.3% 4.1%;
+		--card: 0 0% 100%;
+		--card-foreground: 20 14.3% 4.1%;
+		--popover: 0 0% 100%;
+		--popover-foreground: 20 14.3% 4.1%;
+		--primary: 24 9.8% 10%;
+		--primary-foreground: 60 9.1% 97.8%;
+		--secondary: 60 4.8% 95.9%;
+		--secondary-foreground: 24 9.8% 10%;
+		--muted: 60 4.8% 95.9%;
+		--muted-foreground: 25 5.3% 44.7%;
+		--accent: 60 4.8% 95.9%;
+		--accent-foreground: 24 9.8% 10%;
+		--destructive: 0 72.22% 50.59%;
+		--destructive-foreground: 60 9.1% 97.8%;
+		--border: 20 5.9% 90%;
+		--input: 20 5.9% 90%;
+		--ring: 20 14.3% 4.1%;
+		--radius: 0.5rem;
+	}
+	.dark {
+		--background: 20 14.3% 4.1%;
+		--foreground: 60 9.1% 97.8%;
+		--card: 20 14.3% 4.1%;
+		--card-foreground: 60 9.1% 97.8%;
+		--popover: 20 14.3% 4.1%;
+		--popover-foreground: 60 9.1% 97.8%;
+		--primary: 60 9.1% 97.8%;
+		--primary-foreground: 24 9.8% 10%;
+		--secondary: 12 6.5% 15.1%;
+		--secondary-foreground: 60 9.1% 97.8%;
+		--muted: 12 6.5% 15.1%;
+		--muted-foreground: 24 5.4% 63.9%;
+		--accent: 12 6.5% 15.1%;
+		--accent-foreground: 60 9.1% 97.8%;
+		--destructive: 0 62.8% 30.6%;
+		--destructive-foreground: 60 9.1% 97.8%;
+		--border: 12 6.5% 15.1%;
+		--input: 12 6.5% 15.1%;
+		--ring: 24 5.7% 82.9%;
+	}
+}
+
+@layer base {
+	@font-face {
+		font-family: 'geist-sans';
+		src: url('/fonts/Geist/geist.woff2') format('woff2');
+		font-display: swap;
+	}
+
+	* {
+		@apply border-border;
+	}
+	body {
+		@apply bg-background text-foreground;
+		/* font-feature-settings: "rlig" 1, "calt" 1; */
+		font-synthesis-weight: none;
+		text-rendering: optimizeLegibility;
+	}
+
+	/* Mobile tap highlight */
+	/* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color */
+	html {
+		-webkit-tap-highlight-color: rgba(128, 128, 128, 0.5);
+	}
+
+	/* Font face Geist font */
+
+	/* === Scrollbars === */
+
+	::-webkit-scrollbar {
+		@apply w-2;
+		@apply h-2;
+	}
+
+	::-webkit-scrollbar-track {
+		@apply !bg-muted;
+	}
+	::-webkit-scrollbar-thumb {
+		@apply rounded-sm !bg-muted-foreground/30;
+	}
+
+	/* Firefox */
+	/* https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color#browser_compatibility */
+	html {
+		scrollbar-color: hsl(215.4 16.3% 46.9% / 0.3);
+	}
+
+	html.dark {
+		scrollbar-color: hsl(215.4 16.3% 56.9% / 0.3);
+	}
+
+	.hide-scrollbar::-webkit-scrollbar {
+		display: none;
+	}
+
+	.hide-scrollbar {
+		-ms-overflow-style: none;
+		scrollbar-width: none;
+	}
+	.antialised {
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+	}
+}
+
+@layer utilities {
+	.step {
+		counter-increment: step;
+	}
+
+	.step:before {
+		@apply absolute inline-flex h-9 w-9 items-center justify-center rounded-full border-4 border-background bg-muted text-center -indent-px font-mono text-base font-medium;
+		@apply ml-[-50px] mt-[-4px];
+		content: counter(step);
+	}
+
+	.chunk-container {
+		@apply shadow-none;
+	}
+
+	.chunk-container::after {
+		content: '';
+		@apply absolute -inset-4 rounded-xl border shadow-xl;
+	}
+}
+
+@media (max-width: 640px) {
+	.container {
+		@apply px-4;
+	}
+}
+
+[data-theme='default'] {
+	display: flex;
+}
+
+[data-style='new-york'] [data-style='default'] {
+	display: none;
+}
+
+[data-style='default'] [data-style='default'] {
+	display: flex;
+	flex-direction: column;
+}
+
+[data-style='new-york'] [data-style='new-york'] {
+	display: flex;
+	flex-direction: column;
+}
+
+[data-style='default'] [data-style='new-york'] {
+	display: none;
+}
+
+.super-debug {
+	@apply bg-zinc-950 text-[#FFF8] dark:bg-zinc-900 !important;
+}
+
+.super-debug--pre {
+	@apply !bg-transparent !text-[#FFF8];
+}
+
+.super-debug--code {
+	@apply !bg-transparent;
+}
+
+.super-debug--code .key {
+	@apply text-white !important;
+}
+
+.super-debug--code .undefined {
+	@apply !text-[#FFF8];
+}
+.super-debug--code .string {
+	@apply !text-[#FFF8];
+}
+.super-debug--code .number {
+	@apply !text-[#FFF8];
+}
+.super-debug--code .boolean {
+	@apply !text-[#FFF8];
+}
+
+.vis-xy-container {
+	--vis-tooltip-padding: '0px';
+	--vis-tooltip-background-color: 'transparent';
+	--vis-tooltip-border-color: 'transparent';
+}
diff --git a/src/app.css b/src/styles/autocomplete.css
similarity index 58%
rename from src/app.css
rename to src/styles/autocomplete.css
index fe917d5..bd3d4d3 100644
--- a/src/app.css
+++ b/src/styles/autocomplete.css
@@ -1,325 +1,3 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-	:root {
-		--background: 0 0% 100%;
-		--foreground: 20 14.3% 4.1%;
-		--card: 0 0% 100%;
-		--card-foreground: 20 14.3% 4.1%;
-		--popover: 0 0% 100%;
-		--popover-foreground: 20 14.3% 4.1%;
-		--primary: 24 9.8% 10%;
-		--primary-foreground: 60 9.1% 97.8%;
-		--secondary: 60 4.8% 95.9%;
-		--secondary-foreground: 24 9.8% 10%;
-		--muted: 60 4.8% 95.9%;
-		--muted-foreground: 25 5.3% 44.7%;
-		--accent: 60 4.8% 95.9%;
-		--accent-foreground: 24 9.8% 10%;
-		--destructive: 0 72.22% 50.59%;
-		--destructive-foreground: 60 9.1% 97.8%;
-		--border: 20 5.9% 90%;
-		--input: 20 5.9% 90%;
-		--ring: 20 14.3% 4.1%;
-		--radius: 0.5rem;
-	}
-	.dark {
-		--background: 20 14.3% 4.1%;
-		--foreground: 60 9.1% 97.8%;
-		--card: 20 14.3% 4.1%;
-		--card-foreground: 60 9.1% 97.8%;
-		--popover: 20 14.3% 4.1%;
-		--popover-foreground: 60 9.1% 97.8%;
-		--primary: 60 9.1% 97.8%;
-		--primary-foreground: 24 9.8% 10%;
-		--secondary: 12 6.5% 15.1%;
-		--secondary-foreground: 60 9.1% 97.8%;
-		--muted: 12 6.5% 15.1%;
-		--muted-foreground: 24 5.4% 63.9%;
-		--accent: 12 6.5% 15.1%;
-		--accent-foreground: 60 9.1% 97.8%;
-		--destructive: 0 62.8% 30.6%;
-		--destructive-foreground: 60 9.1% 97.8%;
-		--border: 12 6.5% 15.1%;
-		--input: 12 6.5% 15.1%;
-		--ring: 24 5.7% 82.9%;
-	}
-}
-
-@layer base {
-	@font-face {
-		font-family: 'geist-sans';
-		src: url('/fonts/Geist/geist.woff2') format('woff2');
-		font-display: swap;
-	}
-
-	* {
-		@apply border-border;
-	}
-	body {
-		@apply bg-background text-foreground;
-		/* font-feature-settings: "rlig" 1, "calt" 1; */
-		font-synthesis-weight: none;
-		text-rendering: optimizeLegibility;
-	}
-
-	/* Mobile tap highlight */
-	/* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color */
-	html {
-		-webkit-tap-highlight-color: rgba(128, 128, 128, 0.5);
-	}
-
-	/* Font face Geist font */
-
-	/* === Scrollbars === */
-
-	::-webkit-scrollbar {
-		@apply w-2;
-		@apply h-2;
-	}
-
-	::-webkit-scrollbar-track {
-		@apply !bg-muted;
-	}
-	::-webkit-scrollbar-thumb {
-		@apply rounded-sm !bg-muted-foreground/30;
-	}
-
-	/* Firefox */
-	/* https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color#browser_compatibility */
-	html {
-		scrollbar-color: hsl(215.4 16.3% 46.9% / 0.3);
-	}
-
-	html.dark {
-		scrollbar-color: hsl(215.4 16.3% 56.9% / 0.3);
-	}
-
-	.hide-scrollbar::-webkit-scrollbar {
-		display: none;
-	}
-
-	.hide-scrollbar {
-		-ms-overflow-style: none;
-		scrollbar-width: none;
-	}
-	.antialised {
-		-webkit-font-smoothing: antialiased;
-		-moz-osx-font-smoothing: grayscale;
-	}
-}
-
-@layer utilities {
-	.step {
-		counter-increment: step;
-	}
-
-	.step:before {
-		@apply absolute inline-flex h-9 w-9 items-center justify-center rounded-full border-4 border-background bg-muted text-center -indent-px font-mono text-base font-medium;
-		@apply ml-[-50px] mt-[-4px];
-		content: counter(step);
-	}
-
-	.chunk-container {
-		@apply shadow-none;
-	}
-
-	.chunk-container::after {
-		content: '';
-		@apply absolute -inset-4 rounded-xl border shadow-xl;
-	}
-}
-
-@media (max-width: 640px) {
-	.container {
-		@apply px-4;
-	}
-}
-
-[data-theme='default'] {
-	display: flex;
-}
-
-[data-style='new-york'] [data-style='default'] {
-	display: none;
-}
-
-[data-style='default'] [data-style='default'] {
-	display: flex;
-	flex-direction: column;
-}
-
-[data-style='new-york'] [data-style='new-york'] {
-	display: flex;
-	flex-direction: column;
-}
-
-[data-style='default'] [data-style='new-york'] {
-	display: none;
-}
-
-.super-debug {
-	@apply bg-zinc-950 text-[#FFF8] dark:bg-zinc-900 !important;
-}
-
-.super-debug--pre {
-	@apply !bg-transparent !text-[#FFF8];
-}
-
-.super-debug--code {
-	@apply !bg-transparent;
-}
-
-.super-debug--code .key {
-	@apply text-white !important;
-}
-
-.super-debug--code .undefined {
-	@apply !text-[#FFF8];
-}
-.super-debug--code .string {
-	@apply !text-[#FFF8];
-}
-.super-debug--code .number {
-	@apply !text-[#FFF8];
-}
-.super-debug--code .boolean {
-	@apply !text-[#FFF8];
-}
-
-.vis-xy-container {
-	--vis-tooltip-padding: '0px';
-	--vis-tooltip-background-color: 'transparent';
-	--vis-tooltip-border-color: 'transparent';
-}
-
-html.dark .shiki,
-html.dark .shiki span {
-	color: var(--shiki-dark) !important;
-	background-color: var(--shiki-dark-bg) !important;
-	/* Optional, if you also want font styles */
-	font-style: var(--shiki-dark-font-style) !important;
-	font-weight: var(--shiki-dark-font-weight) !important;
-	text-decoration: var(--shiki-dark-text-decoration) !important;
-}
-
-pre {
-	border: 1px solid #eaeaea;
-}
-
-html.dark pre {
-	border: 1px solid #333;
-}
-
-/* Prose */
-
-.prose .anchor {
-	text-decoration: none;
-}
-
-.prose .anchor::after {
-	content: '#';
-	color: #999;
-	margin-left: 0.25rem;
-	opacity: 0;
-	transition: opacity 0.2s ease-in-out;
-}
-
-.prose h2:hover .anchor::after,
-.prose h3:hover .anchor::after,
-.prose h4:hover .anchor::after,
-.prose h5:hover .anchor::after,
-.prose h6:hover .anchor::after {
-	opacity: 1;
-}
-
-.prose .anchor .dark & {
-	color: #fff;
-}
-
-/* Code Block */
-
-.prose :where(pre):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
-	color: var(--tw-prose-pre-code);
-	background-color: var(--tw-prose-pre-bg);
-	overflow-x: auto;
-	font-weight: 400;
-	font-size: 0.875em;
-	line-height: 1.7142857;
-	margin-top: 1.7142857em;
-	margin-bottom: 1.7142857em;
-	border-radius: 0.375rem;
-
-	/*padding-top: 0;*/
-	padding-inline-end: 1.1428571em;
-	padding-bottom: 0.8571429em;
-	padding-inline-start: 1.1428571em;
-}
-
-pre {
-	& .pre-header {
-		align-items: flex-start;
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		left: 0px;
-		position: sticky;
-		top: 0px;
-		width: 100%;
-
-		& .pre-title {
-			background-color: var(--code-block-background-color);
-			border-radius: var(--code-block-border-radius);
-			font-size: var(--code-block-font-size);
-			line-height: 1rem;
-			min-width: 100%;
-			padding: calc(16px * 0.5) calc(16px * 1);
-			text-align: center;
-			width: max-content;
-		}
-
-		& .wrapper-copy-code {
-			align-items: center;
-			flex-direction: row;
-			display: flex;
-			justify-content: space-between;
-			width: 100%;
-			border-bottom: 1px solid #e5e7eb;
-			margin-bottom: 0.5em;
-
-			& .copy-code {
-				background-color: transparent;
-				border: none;
-				border-radius: var(--code-block-border-radius);
-				color: var(--code-block-font-color);
-				font-family: monospace;
-				font-size: var(--code-block-font-size);
-				line-height: 1rem;
-				margin-top: calc(16px * 0.25);
-				margin-bottom: calc(16px * 0.25);
-				padding-top: calc(16px * 0.5) calc(16px * 1);
-				padding-bottom: calc(16px * 0.5) calc(16px * 1);
-			}
-
-			& .code-block-title {
-				/* muted text color */
-				color: #999;
-			}
-		}
-
-		html.dark & .wrapper-copy-code {
-			border-bottom: 1px solid #333;
-		}
-		html.dark & .code-block-title {
-			color: #555;
-		}
-	}
-}
-
-/* Algolia Autocomplete */
-
 :root {
 	--aa-search-input-height: 44px;
 	--aa-input-icon-size: 20px;
@@ -1389,588 +1067,3 @@ html[data-theme='dark'] {
 		display: none;
 	}
 }
-
-/* DocSearch */
-
-:root {
-	--docsearch-primary-color: #5468ff;
-	--docsearch-text-color: #1c1e21;
-	--docsearch-spacing: 12px;
-	--docsearch-icon-stroke-width: 1.4;
-	--docsearch-highlight-color: var(--docsearch-primary-color);
-	--docsearch-muted-color: #969faf;
-	--docsearch-container-background: rgba(101, 108, 133, 0.8);
-	--docsearch-logo-color: #5468ff;
-	--docsearch-modal-width: 560px;
-	--docsearch-modal-height: 600px;
-	--docsearch-modal-background: #f5f6f7;
-	--docsearch-modal-shadow: inset 1px 1px 0 0 hsla(0, 0%, 100%, 0.5), 0 3px 8px 0 #555a64;
-	--docsearch-searchbox-height: 56px;
-	--docsearch-searchbox-background: #ebedf0;
-	--docsearch-searchbox-focus-background: #fff;
-	--docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-primary-color);
-	--docsearch-hit-height: 56px;
-	--docsearch-hit-color: #444950;
-	--docsearch-hit-active-color: #fff;
-	--docsearch-hit-background: #fff;
-	--docsearch-hit-shadow: 0 1px 3px 0 #d4d9e1;
-	--docsearch-key-gradient: linear-gradient(-225deg, #d5dbe4, #f8f8f8);
-	--docsearch-key-shadow: inset 0 -2px 0 0 #cdcde6, inset 0 0 1px 1px #fff,
-		0 1px 2px 1px rgba(30, 35, 90, 0.4);
-	--docsearch-key-pressed-shadow: inset 0 -2px 0 0 #cdcde6, inset 0 0 1px 1px #fff,
-		0 1px 1px 0 rgba(30, 35, 90, 0.4);
-	--docsearch-footer-height: 44px;
-	--docsearch-footer-background: #fff;
-	--docsearch-footer-shadow: 0 -1px 0 0 #e0e3e8, 0 -3px 6px 0 rgba(69, 98, 155, 0.12);
-}
-html[data-theme='dark'] {
-	--docsearch-text-color: #f5f6f7;
-	--docsearch-container-background: rgba(9, 10, 17, 0.8);
-	--docsearch-modal-background: #15172a;
-	--docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
-	--docsearch-searchbox-background: #090a11;
-	--docsearch-searchbox-focus-background: #000;
-	--docsearch-hit-color: #bec3c9;
-	--docsearch-hit-shadow: none;
-	--docsearch-hit-background: #090a11;
-	--docsearch-key-gradient: linear-gradient(-26.5deg, #565872, #31355b);
-	--docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d,
-		0 2px 2px 0 rgba(3, 4, 9, 0.3);
-	--docsearch-key-pressed-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d,
-		0 1px 1px 0 #0304094d;
-	--docsearch-footer-background: #1e2136;
-	--docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, 0.5), 0 -4px 8px 0 rgba(0, 0, 0, 0.2);
-	--docsearch-logo-color: #fff;
-	--docsearch-muted-color: #7f8497;
-}
-.DocSearch-Button {
-	align-items: center;
-	background: var(--docsearch-searchbox-background);
-	border: 0;
-	border-radius: 40px;
-	color: var(--docsearch-muted-color);
-	cursor: pointer;
-	display: flex;
-	font-weight: 500;
-	height: 36px;
-	justify-content: space-between;
-	margin: 0 0 0 16px;
-	padding: 0 8px;
-	user-select: none;
-}
-.DocSearch-Button:active,
-.DocSearch-Button:focus,
-.DocSearch-Button:hover {
-	background: var(--docsearch-searchbox-focus-background);
-	box-shadow: var(--docsearch-searchbox-shadow);
-	color: var(--docsearch-text-color);
-	outline: none;
-}
-.DocSearch-Button-Container {
-	align-items: center;
-	display: flex;
-}
-.DocSearch-Search-Icon {
-	stroke-width: 1.6;
-}
-.DocSearch-Button .DocSearch-Search-Icon {
-	color: var(--docsearch-text-color);
-}
-.DocSearch-Button-Placeholder {
-	font-size: 1rem;
-	padding: 0 12px 0 6px;
-}
-.DocSearch-Button-Keys {
-	display: flex;
-	min-width: calc(40px + 0.8em);
-}
-.DocSearch-Button-Key {
-	align-items: center;
-	background: var(--docsearch-key-gradient);
-	border: 0;
-	border-radius: 3px;
-	box-shadow: var(--docsearch-key-shadow);
-	color: var(--docsearch-muted-color);
-	display: flex;
-	height: 18px;
-	justify-content: center;
-	margin-right: 0.4em;
-	padding: 0 0 2px;
-	position: relative;
-	top: -1px;
-	width: 20px;
-}
-.DocSearch-Button-Key--pressed {
-	box-shadow: var(--docsearch-key-pressed-shadow);
-	transform: translate3d(0, 1px, 0);
-}
-.DocSearch--active {
-	overflow: hidden !important;
-}
-.DocSearch-Container,
-.DocSearch-Container * {
-	box-sizing: border-box;
-}
-.DocSearch-Container {
-	background-color: var(--docsearch-container-background);
-	height: 100vh;
-	left: 0;
-	position: fixed;
-	top: 0;
-	width: 100vw;
-	z-index: 200;
-}
-.DocSearch-Container a {
-	text-decoration: none;
-}
-.DocSearch-Link {
-	appearance: none;
-	background: none;
-	border: 0;
-	color: var(--docsearch-highlight-color);
-	cursor: pointer;
-	font: inherit;
-	margin: 0;
-	padding: 0;
-}
-.DocSearch-Modal {
-	background: var(--docsearch-modal-background);
-	border-radius: 6px;
-	box-shadow: var(--docsearch-modal-shadow);
-	flex-direction: column;
-	margin: 60px auto auto;
-	max-width: var(--docsearch-modal-width);
-	position: relative;
-}
-.DocSearch-SearchBar {
-	display: flex;
-	padding: var(--docsearch-spacing) var(--docsearch-spacing) 0;
-}
-.DocSearch-Form {
-	align-items: center;
-	background: var(--docsearch-searchbox-focus-background);
-	border-radius: 4px;
-	box-shadow: var(--docsearch-searchbox-shadow);
-	display: flex;
-	height: var(--docsearch-searchbox-height);
-	margin: 0;
-	padding: 0 var(--docsearch-spacing);
-	position: relative;
-	width: 100%;
-}
-.DocSearch-Input {
-	appearance: none;
-	background: transparent;
-	border: 0;
-	color: var(--docsearch-text-color);
-	flex: 1;
-	font: inherit;
-	font-size: 1.2em;
-	height: 100%;
-	outline: none;
-	padding: 0 0 0 8px;
-	width: 80%;
-}
-.DocSearch-Input::placeholder {
-	color: var(--docsearch-muted-color);
-	opacity: 1;
-}
-.DocSearch-Input::-webkit-search-cancel-button,
-.DocSearch-Input::-webkit-search-decoration,
-.DocSearch-Input::-webkit-search-results-button,
-.DocSearch-Input::-webkit-search-results-decoration {
-	display: none;
-}
-.DocSearch-LoadingIndicator,
-.DocSearch-MagnifierLabel,
-.DocSearch-Reset {
-	margin: 0;
-	padding: 0;
-}
-.DocSearch-MagnifierLabel,
-.DocSearch-Reset {
-	align-items: center;
-	color: var(--docsearch-highlight-color);
-	display: flex;
-	justify-content: center;
-}
-.DocSearch-Container--Stalled .DocSearch-MagnifierLabel,
-.DocSearch-LoadingIndicator {
-	display: none;
-}
-.DocSearch-Container--Stalled .DocSearch-LoadingIndicator {
-	align-items: center;
-	color: var(--docsearch-highlight-color);
-	display: flex;
-	justify-content: center;
-}
-@media screen and (prefers-reduced-motion: reduce) {
-	.DocSearch-Reset {
-		animation: none;
-		appearance: none;
-		background: none;
-		border: 0;
-		border-radius: 50%;
-		color: var(--docsearch-icon-color);
-		cursor: pointer;
-		right: 0;
-		stroke-width: var(--docsearch-icon-stroke-width);
-	}
-}
-.DocSearch-Reset {
-	animation: fade-in 0.1s ease-in forwards;
-	appearance: none;
-	background: none;
-	border: 0;
-	border-radius: 50%;
-	color: var(--docsearch-icon-color);
-	cursor: pointer;
-	padding: 2px;
-	right: 0;
-	stroke-width: var(--docsearch-icon-stroke-width);
-}
-.DocSearch-Reset[hidden] {
-	display: none;
-}
-.DocSearch-Reset:hover {
-	color: var(--docsearch-highlight-color);
-}
-.DocSearch-LoadingIndicator svg,
-.DocSearch-MagnifierLabel svg {
-	height: 24px;
-	width: 24px;
-}
-.DocSearch-Cancel {
-	display: none;
-}
-.DocSearch-Dropdown {
-	max-height: calc(
-		var(--docsearch-modal-height) - var(--docsearch-searchbox-height) - var(--docsearch-spacing) -
-			var(--docsearch-footer-height)
-	);
-	min-height: var(--docsearch-spacing);
-	overflow-y: auto;
-	overflow-y: overlay;
-	padding: 0 var(--docsearch-spacing);
-	scrollbar-color: var(--docsearch-muted-color) var(--docsearch-modal-background);
-	scrollbar-width: thin;
-}
-.DocSearch-Dropdown::-webkit-scrollbar {
-	width: 12px;
-}
-.DocSearch-Dropdown::-webkit-scrollbar-track {
-	background: transparent;
-}
-.DocSearch-Dropdown::-webkit-scrollbar-thumb {
-	background-color: var(--docsearch-muted-color);
-	border: 3px solid var(--docsearch-modal-background);
-	border-radius: 20px;
-}
-.DocSearch-Dropdown ul {
-	list-style: none;
-	margin: 0;
-	padding: 0;
-}
-.DocSearch-Label {
-	font-size: 0.75em;
-	line-height: 1.6em;
-}
-.DocSearch-Help,
-.DocSearch-Label {
-	color: var(--docsearch-muted-color);
-}
-.DocSearch-Help {
-	font-size: 0.9em;
-	margin: 0;
-	user-select: none;
-}
-.DocSearch-Title {
-	font-size: 1.2em;
-}
-.DocSearch-Logo a {
-	display: flex;
-}
-.DocSearch-Logo svg {
-	color: var(--docsearch-logo-color);
-	margin-left: 8px;
-}
-.DocSearch-Hits:last-of-type {
-	margin-bottom: 24px;
-}
-.DocSearch-Hits mark {
-	background: none;
-	color: var(--docsearch-highlight-color);
-}
-.DocSearch-HitsFooter {
-	color: var(--docsearch-muted-color);
-	display: flex;
-	font-size: 0.85em;
-	justify-content: center;
-	margin-bottom: var(--docsearch-spacing);
-	padding: var(--docsearch-spacing);
-}
-.DocSearch-HitsFooter a {
-	border-bottom: 1px solid;
-	color: inherit;
-}
-.DocSearch-Hit {
-	border-radius: 4px;
-	display: flex;
-	padding-bottom: 4px;
-	position: relative;
-}
-@media screen and (prefers-reduced-motion: reduce) {
-	.DocSearch-Hit--deleting {
-		transition: none;
-	}
-}
-.DocSearch-Hit--deleting {
-	opacity: 0;
-	transition: all 0.25s linear;
-}
-@media screen and (prefers-reduced-motion: reduce) {
-	.DocSearch-Hit--favoriting {
-		transition: none;
-	}
-}
-.DocSearch-Hit--favoriting {
-	transform: scale(0);
-	transform-origin: top center;
-	transition: all 0.25s linear;
-	transition-delay: 0.25s;
-}
-.DocSearch-Hit a {
-	background: var(--docsearch-hit-background);
-	border-radius: 4px;
-	box-shadow: var(--docsearch-hit-shadow);
-	display: block;
-	padding-left: var(--docsearch-spacing);
-	width: 100%;
-}
-.DocSearch-Hit-source {
-	background: var(--docsearch-modal-background);
-	color: var(--docsearch-highlight-color);
-	font-size: 0.85em;
-	font-weight: 600;
-	line-height: 32px;
-	margin: 0 -4px;
-	padding: 8px 4px 0;
-	position: sticky;
-	top: 0;
-	z-index: 10;
-}
-.DocSearch-Hit-Tree {
-	color: var(--docsearch-muted-color);
-	height: var(--docsearch-hit-height);
-	opacity: 0.5;
-	stroke-width: var(--docsearch-icon-stroke-width);
-	width: 24px;
-}
-.DocSearch-Hit[aria-selected='true'] a {
-	background-color: var(--docsearch-highlight-color);
-}
-.DocSearch-Hit[aria-selected='true'] mark {
-	text-decoration: underline;
-}
-.DocSearch-Hit-Container {
-	align-items: center;
-	color: var(--docsearch-hit-color);
-	display: flex;
-	flex-direction: row;
-	height: var(--docsearch-hit-height);
-	padding: 0 var(--docsearch-spacing) 0 0;
-}
-.DocSearch-Hit-icon {
-	height: 20px;
-	width: 20px;
-}
-.DocSearch-Hit-action,
-.DocSearch-Hit-icon {
-	color: var(--docsearch-muted-color);
-	stroke-width: var(--docsearch-icon-stroke-width);
-}
-.DocSearch-Hit-action {
-	align-items: center;
-	display: flex;
-	height: 22px;
-	width: 22px;
-}
-.DocSearch-Hit-action svg {
-	display: block;
-	height: 18px;
-	width: 18px;
-}
-.DocSearch-Hit-action + .DocSearch-Hit-action {
-	margin-left: 6px;
-}
-.DocSearch-Hit-action-button {
-	appearance: none;
-	background: none;
-	border: 0;
-	border-radius: 50%;
-	color: inherit;
-	cursor: pointer;
-	padding: 2px;
-}
-svg.DocSearch-Hit-Select-Icon {
-	display: none;
-}
-.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-Select-Icon {
-	display: block;
-}
-.DocSearch-Hit-action-button:focus,
-.DocSearch-Hit-action-button:hover {
-	background: rgba(0, 0, 0, 0.2);
-	transition: background-color 0.1s ease-in;
-}
-@media screen and (prefers-reduced-motion: reduce) {
-	.DocSearch-Hit-action-button:focus,
-	.DocSearch-Hit-action-button:hover {
-		transition: none;
-	}
-}
-.DocSearch-Hit-action-button:focus path,
-.DocSearch-Hit-action-button:hover path {
-	fill: #fff;
-}
-.DocSearch-Hit-content-wrapper {
-	display: flex;
-	flex: 1 1 auto;
-	flex-direction: column;
-	font-weight: 500;
-	justify-content: center;
-	line-height: 1.2em;
-	margin: 0 8px;
-	overflow-x: hidden;
-	position: relative;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	width: 80%;
-}
-.DocSearch-Hit-title {
-	font-size: 0.9em;
-}
-.DocSearch-Hit-path {
-	color: var(--docsearch-muted-color);
-	font-size: 0.75em;
-}
-.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-Tree,
-.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-action,
-.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-icon,
-.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-path,
-.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-text,
-.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-title,
-.DocSearch-Hit[aria-selected='true'] mark {
-	color: var(--docsearch-hit-active-color) !important;
-}
-@media screen and (prefers-reduced-motion: reduce) {
-	.DocSearch-Hit-action-button:focus,
-	.DocSearch-Hit-action-button:hover {
-		background: rgba(0, 0, 0, 0.2);
-		transition: none;
-	}
-}
-.DocSearch-ErrorScreen,
-.DocSearch-NoResults,
-.DocSearch-StartScreen {
-	font-size: 0.9em;
-	margin: 0 auto;
-	padding: 36px 0;
-	text-align: center;
-	width: 80%;
-}
-.DocSearch-Screen-Icon {
-	color: var(--docsearch-muted-color);
-	padding-bottom: 12px;
-}
-.DocSearch-NoResults-Prefill-List {
-	display: inline-block;
-	padding-bottom: 24px;
-	text-align: left;
-}
-.DocSearch-NoResults-Prefill-List ul {
-	display: inline-block;
-	padding: 8px 0 0;
-}
-.DocSearch-NoResults-Prefill-List li {
-	list-style-position: inside;
-	list-style-type: '» ';
-}
-.DocSearch-Prefill {
-	appearance: none;
-	background: none;
-	border: 0;
-	border-radius: 1em;
-	color: var(--docsearch-highlight-color);
-	cursor: pointer;
-	display: inline-block;
-	font-size: 1em;
-	font-weight: 700;
-	padding: 0;
-}
-.DocSearch-Prefill:focus,
-.DocSearch-Prefill:hover {
-	outline: none;
-	text-decoration: underline;
-}
-.DocSearch-Footer {
-	align-items: center;
-	background: var(--docsearch-footer-background);
-	border-radius: 0 0 8px 8px;
-	box-shadow: var(--docsearch-footer-shadow);
-	display: flex;
-	flex-direction: row-reverse;
-	flex-shrink: 0;
-	height: var(--docsearch-footer-height);
-	justify-content: space-between;
-	padding: 0 var(--docsearch-spacing);
-	position: relative;
-	user-select: none;
-	width: 100%;
-	z-index: 300;
-}
-.DocSearch-Commands {
-	color: var(--docsearch-muted-color);
-	display: flex;
-	list-style: none;
-	margin: 0;
-	padding: 0;
-}
-.DocSearch-Commands li {
-	align-items: center;
-	display: flex;
-}
-.DocSearch-Commands li:not(:last-of-type) {
-	margin-right: 0.8em;
-}
-.DocSearch-Commands-Key {
-	align-items: center;
-	background: var(--docsearch-key-gradient);
-	border: 0;
-	border-radius: 2px;
-	box-shadow: var(--docsearch-key-shadow);
-	color: var(--docsearch-muted-color);
-	display: flex;
-	height: 18px;
-	justify-content: center;
-	margin-right: 0.4em;
-	padding: 0 0 1px;
-	width: 20px;
-}
-.DocSearch-VisuallyHiddenForAccessibility {
-	clip: rect(0 0 0 0);
-	clip-path: inset(50%);
-	height: 1px;
-	overflow: hidden;
-	position: absolute;
-	white-space: nowrap;
-	width: 1px;
-}
-@keyframes fade-in {
-	0% {
-		opacity: 0;
-	}
-	to {
-		opacity: 1;
-	}
-}
diff --git a/src/styles/code.css b/src/styles/code.css
new file mode 100644
index 0000000..998d74f
--- /dev/null
+++ b/src/styles/code.css
@@ -0,0 +1,94 @@
+html.dark .shiki,
+html.dark .shiki span {
+	color: var(--shiki-dark) !important;
+	background-color: var(--shiki-dark-bg) !important;
+	/* Optional, if you also want font styles */
+	font-style: var(--shiki-dark-font-style) !important;
+	font-weight: var(--shiki-dark-font-weight) !important;
+	text-decoration: var(--shiki-dark-text-decoration) !important;
+}
+
+pre {
+	border: 1px solid #eaeaea;
+}
+
+html.dark pre {
+	border: 1px solid #333;
+}
+
+.prose :where(pre):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
+	color: var(--tw-prose-pre-code);
+	background-color: var(--tw-prose-pre-bg);
+	overflow-x: auto;
+	font-weight: 400;
+	font-size: 0.875em;
+	line-height: 1.7142857;
+	margin-top: 1.7142857em;
+	margin-bottom: 1.7142857em;
+	border-radius: 0.375rem;
+
+	/*padding-top: 0;*/
+	padding-inline-end: 1.1428571em;
+	padding-bottom: 0.8571429em;
+	padding-inline-start: 1.1428571em;
+}
+
+pre {
+	& .pre-header {
+		align-items: flex-start;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		left: 0px;
+		position: sticky;
+		top: 0px;
+		width: 100%;
+
+		& .pre-title {
+			background-color: var(--code-block-background-color);
+			border-radius: var(--code-block-border-radius);
+			font-size: var(--code-block-font-size);
+			line-height: 1rem;
+			min-width: 100%;
+			padding: calc(16px * 0.5) calc(16px * 1);
+			text-align: center;
+			width: max-content;
+		}
+
+		& .wrapper-copy-code {
+			align-items: center;
+			flex-direction: row;
+			display: flex;
+			justify-content: space-between;
+			width: 100%;
+			border-bottom: 1px solid #e5e7eb;
+			margin-bottom: 0.5em;
+
+			& .copy-code {
+				background-color: transparent;
+				border: none;
+				border-radius: var(--code-block-border-radius);
+				color: var(--code-block-font-color);
+				font-family: monospace;
+				font-size: var(--code-block-font-size);
+				line-height: 1rem;
+				margin-top: calc(16px * 0.25);
+				margin-bottom: calc(16px * 0.25);
+				padding-top: calc(16px * 0.5) calc(16px * 1);
+				padding-bottom: calc(16px * 0.5) calc(16px * 1);
+			}
+
+			& .code-block-title {
+				/* muted text color */
+				color: #999;
+			}
+		}
+
+		html.dark & .wrapper-copy-code {
+			border-bottom: 1px solid #333;
+		}
+		html.dark & .code-block-title {
+			color: #555;
+		}
+	}
+}
diff --git a/src/styles/docsearch.css b/src/styles/docsearch.css
new file mode 100644
index 0000000..9a10ea8
--- /dev/null
+++ b/src/styles/docsearch.css
@@ -0,0 +1,582 @@
+:root {
+	--docsearch-primary-color: #5468ff;
+	--docsearch-text-color: #1c1e21;
+	--docsearch-spacing: 12px;
+	--docsearch-icon-stroke-width: 1.4;
+	--docsearch-highlight-color: var(--docsearch-primary-color);
+	--docsearch-muted-color: #969faf;
+	--docsearch-container-background: rgba(101, 108, 133, 0.8);
+	--docsearch-logo-color: #5468ff;
+	--docsearch-modal-width: 560px;
+	--docsearch-modal-height: 600px;
+	--docsearch-modal-background: #f5f6f7;
+	--docsearch-modal-shadow: inset 1px 1px 0 0 hsla(0, 0%, 100%, 0.5), 0 3px 8px 0 #555a64;
+	--docsearch-searchbox-height: 56px;
+	--docsearch-searchbox-background: #ebedf0;
+	--docsearch-searchbox-focus-background: #fff;
+	--docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-primary-color);
+	--docsearch-hit-height: 56px;
+	--docsearch-hit-color: #444950;
+	--docsearch-hit-active-color: #fff;
+	--docsearch-hit-background: #fff;
+	--docsearch-hit-shadow: 0 1px 3px 0 #d4d9e1;
+	--docsearch-key-gradient: linear-gradient(-225deg, #d5dbe4, #f8f8f8);
+	--docsearch-key-shadow: inset 0 -2px 0 0 #cdcde6, inset 0 0 1px 1px #fff,
+		0 1px 2px 1px rgba(30, 35, 90, 0.4);
+	--docsearch-key-pressed-shadow: inset 0 -2px 0 0 #cdcde6, inset 0 0 1px 1px #fff,
+		0 1px 1px 0 rgba(30, 35, 90, 0.4);
+	--docsearch-footer-height: 44px;
+	--docsearch-footer-background: #fff;
+	--docsearch-footer-shadow: 0 -1px 0 0 #e0e3e8, 0 -3px 6px 0 rgba(69, 98, 155, 0.12);
+}
+html[data-theme='dark'] {
+	--docsearch-text-color: #f5f6f7;
+	--docsearch-container-background: rgba(9, 10, 17, 0.8);
+	--docsearch-modal-background: #15172a;
+	--docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
+	--docsearch-searchbox-background: #090a11;
+	--docsearch-searchbox-focus-background: #000;
+	--docsearch-hit-color: #bec3c9;
+	--docsearch-hit-shadow: none;
+	--docsearch-hit-background: #090a11;
+	--docsearch-key-gradient: linear-gradient(-26.5deg, #565872, #31355b);
+	--docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d,
+		0 2px 2px 0 rgba(3, 4, 9, 0.3);
+	--docsearch-key-pressed-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d,
+		0 1px 1px 0 #0304094d;
+	--docsearch-footer-background: #1e2136;
+	--docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, 0.5), 0 -4px 8px 0 rgba(0, 0, 0, 0.2);
+	--docsearch-logo-color: #fff;
+	--docsearch-muted-color: #7f8497;
+}
+.DocSearch-Button {
+	align-items: center;
+	background: var(--docsearch-searchbox-background);
+	border: 0;
+	border-radius: 40px;
+	color: var(--docsearch-muted-color);
+	cursor: pointer;
+	display: flex;
+	font-weight: 500;
+	height: 36px;
+	justify-content: space-between;
+	margin: 0 0 0 16px;
+	padding: 0 8px;
+	user-select: none;
+}
+.DocSearch-Button:active,
+.DocSearch-Button:focus,
+.DocSearch-Button:hover {
+	background: var(--docsearch-searchbox-focus-background);
+	box-shadow: var(--docsearch-searchbox-shadow);
+	color: var(--docsearch-text-color);
+	outline: none;
+}
+.DocSearch-Button-Container {
+	align-items: center;
+	display: flex;
+}
+.DocSearch-Search-Icon {
+	stroke-width: 1.6;
+}
+.DocSearch-Button .DocSearch-Search-Icon {
+	color: var(--docsearch-text-color);
+}
+.DocSearch-Button-Placeholder {
+	font-size: 1rem;
+	padding: 0 12px 0 6px;
+}
+.DocSearch-Button-Keys {
+	display: flex;
+	min-width: calc(40px + 0.8em);
+}
+.DocSearch-Button-Key {
+	align-items: center;
+	background: var(--docsearch-key-gradient);
+	border: 0;
+	border-radius: 3px;
+	box-shadow: var(--docsearch-key-shadow);
+	color: var(--docsearch-muted-color);
+	display: flex;
+	height: 18px;
+	justify-content: center;
+	margin-right: 0.4em;
+	padding: 0 0 2px;
+	position: relative;
+	top: -1px;
+	width: 20px;
+}
+.DocSearch-Button-Key--pressed {
+	box-shadow: var(--docsearch-key-pressed-shadow);
+	transform: translate3d(0, 1px, 0);
+}
+.DocSearch--active {
+	overflow: hidden !important;
+}
+.DocSearch-Container,
+.DocSearch-Container * {
+	box-sizing: border-box;
+}
+.DocSearch-Container {
+	background-color: var(--docsearch-container-background);
+	height: 100vh;
+	left: 0;
+	position: fixed;
+	top: 0;
+	width: 100vw;
+	z-index: 200;
+}
+.DocSearch-Container a {
+	text-decoration: none;
+}
+.DocSearch-Link {
+	appearance: none;
+	background: none;
+	border: 0;
+	color: var(--docsearch-highlight-color);
+	cursor: pointer;
+	font: inherit;
+	margin: 0;
+	padding: 0;
+}
+.DocSearch-Modal {
+	background: var(--docsearch-modal-background);
+	border-radius: 6px;
+	box-shadow: var(--docsearch-modal-shadow);
+	flex-direction: column;
+	margin: 60px auto auto;
+	max-width: var(--docsearch-modal-width);
+	position: relative;
+}
+.DocSearch-SearchBar {
+	display: flex;
+	padding: var(--docsearch-spacing) var(--docsearch-spacing) 0;
+}
+.DocSearch-Form {
+	align-items: center;
+	background: var(--docsearch-searchbox-focus-background);
+	border-radius: 4px;
+	box-shadow: var(--docsearch-searchbox-shadow);
+	display: flex;
+	height: var(--docsearch-searchbox-height);
+	margin: 0;
+	padding: 0 var(--docsearch-spacing);
+	position: relative;
+	width: 100%;
+}
+.DocSearch-Input {
+	appearance: none;
+	background: transparent;
+	border: 0;
+	color: var(--docsearch-text-color);
+	flex: 1;
+	font: inherit;
+	font-size: 1.2em;
+	height: 100%;
+	outline: none;
+	padding: 0 0 0 8px;
+	width: 80%;
+}
+.DocSearch-Input::placeholder {
+	color: var(--docsearch-muted-color);
+	opacity: 1;
+}
+.DocSearch-Input::-webkit-search-cancel-button,
+.DocSearch-Input::-webkit-search-decoration,
+.DocSearch-Input::-webkit-search-results-button,
+.DocSearch-Input::-webkit-search-results-decoration {
+	display: none;
+}
+.DocSearch-LoadingIndicator,
+.DocSearch-MagnifierLabel,
+.DocSearch-Reset {
+	margin: 0;
+	padding: 0;
+}
+.DocSearch-MagnifierLabel,
+.DocSearch-Reset {
+	align-items: center;
+	color: var(--docsearch-highlight-color);
+	display: flex;
+	justify-content: center;
+}
+.DocSearch-Container--Stalled .DocSearch-MagnifierLabel,
+.DocSearch-LoadingIndicator {
+	display: none;
+}
+.DocSearch-Container--Stalled .DocSearch-LoadingIndicator {
+	align-items: center;
+	color: var(--docsearch-highlight-color);
+	display: flex;
+	justify-content: center;
+}
+@media screen and (prefers-reduced-motion: reduce) {
+	.DocSearch-Reset {
+		animation: none;
+		appearance: none;
+		background: none;
+		border: 0;
+		border-radius: 50%;
+		color: var(--docsearch-icon-color);
+		cursor: pointer;
+		right: 0;
+		stroke-width: var(--docsearch-icon-stroke-width);
+	}
+}
+.DocSearch-Reset {
+	animation: fade-in 0.1s ease-in forwards;
+	appearance: none;
+	background: none;
+	border: 0;
+	border-radius: 50%;
+	color: var(--docsearch-icon-color);
+	cursor: pointer;
+	padding: 2px;
+	right: 0;
+	stroke-width: var(--docsearch-icon-stroke-width);
+}
+.DocSearch-Reset[hidden] {
+	display: none;
+}
+.DocSearch-Reset:hover {
+	color: var(--docsearch-highlight-color);
+}
+.DocSearch-LoadingIndicator svg,
+.DocSearch-MagnifierLabel svg {
+	height: 24px;
+	width: 24px;
+}
+.DocSearch-Cancel {
+	display: none;
+}
+.DocSearch-Dropdown {
+	max-height: calc(
+		var(--docsearch-modal-height) - var(--docsearch-searchbox-height) - var(--docsearch-spacing) -
+			var(--docsearch-footer-height)
+	);
+	min-height: var(--docsearch-spacing);
+	overflow-y: auto;
+	overflow-y: overlay;
+	padding: 0 var(--docsearch-spacing);
+	scrollbar-color: var(--docsearch-muted-color) var(--docsearch-modal-background);
+	scrollbar-width: thin;
+}
+.DocSearch-Dropdown::-webkit-scrollbar {
+	width: 12px;
+}
+.DocSearch-Dropdown::-webkit-scrollbar-track {
+	background: transparent;
+}
+.DocSearch-Dropdown::-webkit-scrollbar-thumb {
+	background-color: var(--docsearch-muted-color);
+	border: 3px solid var(--docsearch-modal-background);
+	border-radius: 20px;
+}
+.DocSearch-Dropdown ul {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+.DocSearch-Label {
+	font-size: 0.75em;
+	line-height: 1.6em;
+}
+.DocSearch-Help,
+.DocSearch-Label {
+	color: var(--docsearch-muted-color);
+}
+.DocSearch-Help {
+	font-size: 0.9em;
+	margin: 0;
+	user-select: none;
+}
+.DocSearch-Title {
+	font-size: 1.2em;
+}
+.DocSearch-Logo a {
+	display: flex;
+}
+.DocSearch-Logo svg {
+	color: var(--docsearch-logo-color);
+	margin-left: 8px;
+}
+.DocSearch-Hits:last-of-type {
+	margin-bottom: 24px;
+}
+.DocSearch-Hits mark {
+	background: none;
+	color: var(--docsearch-highlight-color);
+}
+.DocSearch-HitsFooter {
+	color: var(--docsearch-muted-color);
+	display: flex;
+	font-size: 0.85em;
+	justify-content: center;
+	margin-bottom: var(--docsearch-spacing);
+	padding: var(--docsearch-spacing);
+}
+.DocSearch-HitsFooter a {
+	border-bottom: 1px solid;
+	color: inherit;
+}
+.DocSearch-Hit {
+	border-radius: 4px;
+	display: flex;
+	padding-bottom: 4px;
+	position: relative;
+}
+@media screen and (prefers-reduced-motion: reduce) {
+	.DocSearch-Hit--deleting {
+		transition: none;
+	}
+}
+.DocSearch-Hit--deleting {
+	opacity: 0;
+	transition: all 0.25s linear;
+}
+@media screen and (prefers-reduced-motion: reduce) {
+	.DocSearch-Hit--favoriting {
+		transition: none;
+	}
+}
+.DocSearch-Hit--favoriting {
+	transform: scale(0);
+	transform-origin: top center;
+	transition: all 0.25s linear;
+	transition-delay: 0.25s;
+}
+.DocSearch-Hit a {
+	background: var(--docsearch-hit-background);
+	border-radius: 4px;
+	box-shadow: var(--docsearch-hit-shadow);
+	display: block;
+	padding-left: var(--docsearch-spacing);
+	width: 100%;
+}
+.DocSearch-Hit-source {
+	background: var(--docsearch-modal-background);
+	color: var(--docsearch-highlight-color);
+	font-size: 0.85em;
+	font-weight: 600;
+	line-height: 32px;
+	margin: 0 -4px;
+	padding: 8px 4px 0;
+	position: sticky;
+	top: 0;
+	z-index: 10;
+}
+.DocSearch-Hit-Tree {
+	color: var(--docsearch-muted-color);
+	height: var(--docsearch-hit-height);
+	opacity: 0.5;
+	stroke-width: var(--docsearch-icon-stroke-width);
+	width: 24px;
+}
+.DocSearch-Hit[aria-selected='true'] a {
+	background-color: var(--docsearch-highlight-color);
+}
+.DocSearch-Hit[aria-selected='true'] mark {
+	text-decoration: underline;
+}
+.DocSearch-Hit-Container {
+	align-items: center;
+	color: var(--docsearch-hit-color);
+	display: flex;
+	flex-direction: row;
+	height: var(--docsearch-hit-height);
+	padding: 0 var(--docsearch-spacing) 0 0;
+}
+.DocSearch-Hit-icon {
+	height: 20px;
+	width: 20px;
+}
+.DocSearch-Hit-action,
+.DocSearch-Hit-icon {
+	color: var(--docsearch-muted-color);
+	stroke-width: var(--docsearch-icon-stroke-width);
+}
+.DocSearch-Hit-action {
+	align-items: center;
+	display: flex;
+	height: 22px;
+	width: 22px;
+}
+.DocSearch-Hit-action svg {
+	display: block;
+	height: 18px;
+	width: 18px;
+}
+.DocSearch-Hit-action + .DocSearch-Hit-action {
+	margin-left: 6px;
+}
+.DocSearch-Hit-action-button {
+	appearance: none;
+	background: none;
+	border: 0;
+	border-radius: 50%;
+	color: inherit;
+	cursor: pointer;
+	padding: 2px;
+}
+svg.DocSearch-Hit-Select-Icon {
+	display: none;
+}
+.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-Select-Icon {
+	display: block;
+}
+.DocSearch-Hit-action-button:focus,
+.DocSearch-Hit-action-button:hover {
+	background: rgba(0, 0, 0, 0.2);
+	transition: background-color 0.1s ease-in;
+}
+@media screen and (prefers-reduced-motion: reduce) {
+	.DocSearch-Hit-action-button:focus,
+	.DocSearch-Hit-action-button:hover {
+		transition: none;
+	}
+}
+.DocSearch-Hit-action-button:focus path,
+.DocSearch-Hit-action-button:hover path {
+	fill: #fff;
+}
+.DocSearch-Hit-content-wrapper {
+	display: flex;
+	flex: 1 1 auto;
+	flex-direction: column;
+	font-weight: 500;
+	justify-content: center;
+	line-height: 1.2em;
+	margin: 0 8px;
+	overflow-x: hidden;
+	position: relative;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	width: 80%;
+}
+.DocSearch-Hit-title {
+	font-size: 0.9em;
+}
+.DocSearch-Hit-path {
+	color: var(--docsearch-muted-color);
+	font-size: 0.75em;
+}
+.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-Tree,
+.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-action,
+.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-icon,
+.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-path,
+.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-text,
+.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-title,
+.DocSearch-Hit[aria-selected='true'] mark {
+	color: var(--docsearch-hit-active-color) !important;
+}
+@media screen and (prefers-reduced-motion: reduce) {
+	.DocSearch-Hit-action-button:focus,
+	.DocSearch-Hit-action-button:hover {
+		background: rgba(0, 0, 0, 0.2);
+		transition: none;
+	}
+}
+.DocSearch-ErrorScreen,
+.DocSearch-NoResults,
+.DocSearch-StartScreen {
+	font-size: 0.9em;
+	margin: 0 auto;
+	padding: 36px 0;
+	text-align: center;
+	width: 80%;
+}
+.DocSearch-Screen-Icon {
+	color: var(--docsearch-muted-color);
+	padding-bottom: 12px;
+}
+.DocSearch-NoResults-Prefill-List {
+	display: inline-block;
+	padding-bottom: 24px;
+	text-align: left;
+}
+.DocSearch-NoResults-Prefill-List ul {
+	display: inline-block;
+	padding: 8px 0 0;
+}
+.DocSearch-NoResults-Prefill-List li {
+	list-style-position: inside;
+	list-style-type: '» ';
+}
+.DocSearch-Prefill {
+	appearance: none;
+	background: none;
+	border: 0;
+	border-radius: 1em;
+	color: var(--docsearch-highlight-color);
+	cursor: pointer;
+	display: inline-block;
+	font-size: 1em;
+	font-weight: 700;
+	padding: 0;
+}
+.DocSearch-Prefill:focus,
+.DocSearch-Prefill:hover {
+	outline: none;
+	text-decoration: underline;
+}
+.DocSearch-Footer {
+	align-items: center;
+	background: var(--docsearch-footer-background);
+	border-radius: 0 0 8px 8px;
+	box-shadow: var(--docsearch-footer-shadow);
+	display: flex;
+	flex-direction: row-reverse;
+	flex-shrink: 0;
+	height: var(--docsearch-footer-height);
+	justify-content: space-between;
+	padding: 0 var(--docsearch-spacing);
+	position: relative;
+	user-select: none;
+	width: 100%;
+	z-index: 300;
+}
+.DocSearch-Commands {
+	color: var(--docsearch-muted-color);
+	display: flex;
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+.DocSearch-Commands li {
+	align-items: center;
+	display: flex;
+}
+.DocSearch-Commands li:not(:last-of-type) {
+	margin-right: 0.8em;
+}
+.DocSearch-Commands-Key {
+	align-items: center;
+	background: var(--docsearch-key-gradient);
+	border: 0;
+	border-radius: 2px;
+	box-shadow: var(--docsearch-key-shadow);
+	color: var(--docsearch-muted-color);
+	display: flex;
+	height: 18px;
+	justify-content: center;
+	margin-right: 0.4em;
+	padding: 0 0 1px;
+	width: 20px;
+}
+.DocSearch-VisuallyHiddenForAccessibility {
+	clip: rect(0 0 0 0);
+	clip-path: inset(50%);
+	height: 1px;
+	overflow: hidden;
+	position: absolute;
+	white-space: nowrap;
+	width: 1px;
+}
+@keyframes fade-in {
+	0% {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}