From ecfa2d395b56cc82838876733c8c3d30f1128d8d Mon Sep 17 00:00:00 2001
From: James Panther <4462786+jpanther@users.noreply.github.com>
Date: Fri, 20 Aug 2021 17:02:08 +1000
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20multiple=20colour=20schemes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                                  |   1 +
 README.md                                     |  54 +-------
 assets/css/main.css                           |  26 ++--
 assets/css/schemes/avocado.css                |  37 ++++++
 assets/css/schemes/congo.css                  |  37 ++++++
 assets/css/schemes/fire.css                   |  37 ++++++
 assets/css/schemes/ocean.css                  |  37 ++++++
 config/_default/params.toml                   |   1 +
 exampleSite/content/_index.md                 |   6 +-
 .../content/docs/advanced-customisation.md    |  41 +++---
 exampleSite/content/docs/configuration.md     |   5 +-
 exampleSite/content/samples/emoji-support.md  |  26 +---
 layouts/404.html                              |   4 +-
 layouts/_default/baseof.html                  |   2 +-
 layouts/_default/list.html                    |   4 +-
 layouts/_default/single.html                  |   6 +-
 layouts/_default/taxonomy.html                |   2 +-
 layouts/_default/term.html                    |   2 +-
 layouts/partials/article-link.html            |  10 +-
 layouts/partials/article-pagination.html      |   6 +-
 layouts/partials/author-links.html            |   2 +-
 layouts/partials/author.html                  |   4 +-
 layouts/partials/breadcrumbs.html             |   4 +-
 layouts/partials/footer.html                  |   4 +-
 layouts/partials/head.html                    |   6 +
 layouts/partials/header.html                  |   2 +-
 layouts/partials/pagination.html              |   8 +-
 layouts/partials/section-header.html          |   2 +-
 layouts/partials/sharing-links.html           |   2 +-
 layouts/shortcodes/alert.html                 |   2 +-
 layouts/shortcodes/button.html                |   2 +-
 static/css/main.css                           |   2 +-
 tailwind.config.js                            | 123 +++++++++++++-----
 33 files changed, 331 insertions(+), 176 deletions(-)
 create mode 100644 assets/css/schemes/avocado.css
 create mode 100644 assets/css/schemes/congo.css
 create mode 100644 assets/css/schemes/fire.css
 create mode 100644 assets/css/schemes/ocean.css

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 73393785..b795a1c7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Added
 
+- Multiple colour schemes
 - Icons for Foursquare and Pinterest
 
 ### Fixed
diff --git a/README.md b/README.md
index 23450493..7768bed7 100644
--- a/README.md
+++ b/README.md
@@ -13,6 +13,7 @@ Congo is designed to be a simple, lightweight theme for [Hugo](https://gohugo.io
 
 - Built with Tailwind CSS JIT for minified stylesheets without any excess code
 - Fully responsive layout
+- Multiple colour schemes (or fully customise your own)
 - Dark mode (auto-switching based upon browser)
 - Highly customisable configuration
 - Multiple homepage layouts
@@ -114,58 +115,7 @@ links = [
 
 ## Advanced customisation
 
-There are a couple of ways you can make style changes to Congo.
-
-If you just need to add or override some simple styles, you can do so by creating a `custom.css` file in your project's `static/css/` folder. This file will be loaded automatically after the theme's default styles.
-
-Alternatively, if you'd like to make a major change, you can take advantage of Tailwind CSS's JIT compiler and rebuild the entire theme CSS from scratch.
-
-> **Note:** Building the theme manually is intended for advanced users.
-
-Change into the `themes/congo/` folder and install the project dependencies.
-
-```bash
-npm install
-```
-
-Once installed, you can edit the `themes/congo/tailwind.config.js` to change the styles that are applied throughout the theme. You can also adjust specific styles in `themes/congo/assets/css/main.css`.
-
-To allow for easy theme colour changes, Congo defines a `primary` and `secondary` colour palette that is used throughout the theme. In order to change the colour across the entire theme, simply edit the `tailwind.config.js` file accordingly.
-
-For example, to change to a green colour scheme, you could apply these changes:
-
-```js
-  // themes/congo/tailwind.config.js
-
-  theme: {
-    colors: {
-      transparent: "transparent",
-      white: colors.white,
-      gray: colors.gray,
-      primary: colors.lime,
-      secondary: colors.teal,
-    },
-    ...
-  }
-```
-
-For a full list of colours available, and their corresponding configuration values, see the official [Tailwind docs](https://tailwindcss.com/docs/customizing-colors#color-palette-reference).
-
-After editing the configuration, you need to rebuild the theme's stylesheets.
-
-```bash
-npm run build
-```
-
-This will automatically output a minified CSS file to `/themes/congo/static/css/main.css`.
-
-To aid with testing style changes, you can also run the Tailwind JIT comiler in watch mode.
-
-```bash
-npm run dev
-```
-
-Now whenever you make a change, the (non-minified) CSS files will be rebuilt automatically. This mode is useful to run when using `hugo server` to preview your site during development. Remember to perform a full build before publishing your website.
+Refer to the [theme documentation](https://jpanther.github.io/congo/docs/advanced-customisation/) for details on customising Congo, including rebuilding the theme from scratch.
 
 ---
 
diff --git a/assets/css/main.css b/assets/css/main.css
index 9cbcfe92..5640ad23 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -46,7 +46,7 @@ body button {
 /* -- Chroma Highlight -- */
 /* Background */
 .prose .chroma {
-  @apply text-gray-700 rounded-md bg-gray-50 dark:bg-gray-700 dark:text-gray-200;
+  @apply rounded-md text-neutral-700 bg-neutral-50 dark:bg-neutral-700 dark:text-neutral-200;
 }
 /* Other */
 .chroma .x {
@@ -73,13 +73,13 @@ body button {
 }
 /* LineNumbersTable */
 .chroma .lnt {
-  @apply text-gray-600 dark:text-gray-300;
+  @apply text-neutral-600 dark:text-neutral-300;
   margin-right: 0.4em;
   padding: 0 0.4em 0 0.4em;
 }
 /* LineNumbers */
 .chroma .ln {
-  @apply text-gray-600 dark:text-gray-300;
+  @apply text-neutral-600 dark:text-neutral-300;
   margin-right: 0.4em;
   padding: 0 0.4em 0 0.4em;
 }
@@ -300,31 +300,31 @@ body button {
 }
 /* Comment */
 .chroma .c {
-  @apply italic text-gray-400 dark:text-gray-500;
+  @apply italic text-neutral-400 dark:text-neutral-500;
 }
 /* CommentHashbang */
 .chroma .ch {
-  @apply italic font-semibold text-gray-400 dark:text-gray-500;
+  @apply italic font-semibold text-neutral-400 dark:text-neutral-500;
 }
 /* CommentMultiline */
 .chroma .cm {
-  @apply italic text-gray-400 dark:text-gray-500;
+  @apply italic text-neutral-400 dark:text-neutral-500;
 }
 /* CommentSingle */
 .chroma .c1 {
-  @apply italic text-gray-400 dark:text-gray-500;
+  @apply italic text-neutral-400 dark:text-neutral-500;
 }
 /* CommentSpecial */
 .chroma .cs {
-  @apply italic text-gray-400 dark:text-gray-500;
+  @apply italic text-neutral-400 dark:text-neutral-500;
 }
 /* CommentPreproc */
 .chroma .cp {
-  @apply italic text-gray-400 dark:text-gray-500;
+  @apply italic text-neutral-400 dark:text-neutral-500;
 }
 /* CommentPreprocFile */
 .chroma .cpf {
-  @apply italic text-gray-400 dark:text-gray-500;
+  @apply italic text-neutral-400 dark:text-neutral-500;
 }
 /* Generic */
 .chroma .g {
@@ -341,7 +341,7 @@ body button {
 }
 /* GenericHeading */
 .chroma .gh {
-  @apply font-semibold text-gray-500;
+  @apply font-semibold text-neutral-500;
 }
 /* GenericInserted */
 .chroma .gi {
@@ -361,11 +361,11 @@ body button {
 }
 /* GenericSubheading */
 .chroma .gu {
-  @apply text-gray-500;
+  @apply text-neutral-500;
 }
 /* GenericTraceback */
 .chroma .gt {
-  @apply text-gray-500;
+  @apply text-neutral-500;
 }
 /* GenericUnderline */
 .chroma .gl {
diff --git a/assets/css/schemes/avocado.css b/assets/css/schemes/avocado.css
new file mode 100644
index 00000000..6ee07b79
--- /dev/null
+++ b/assets/css/schemes/avocado.css
@@ -0,0 +1,37 @@
+/* Avocado scheme */
+:root {
+  --color-neutral: #fff;
+  /* Warm Gray */
+  --color-neutral-50: #fafaf9;
+  --color-neutral-100: #f5f5f4;
+  --color-neutral-200: #e7e5e4;
+  --color-neutral-300: #d6d3d1;
+  --color-neutral-400: #a8a29e;
+  --color-neutral-500: #78716c;
+  --color-neutral-600: #57534e;
+  --color-neutral-700: #44403c;
+  --color-neutral-800: #292524;
+  --color-neutral-900: #1c1917;
+  /* Lime */
+  --color-primary-50: #f7fee7;
+  --color-primary-100: #ecfccb;
+  --color-primary-200: #d9f99d;
+  --color-primary-300: #bef264;
+  --color-primary-400: #a3e635;
+  --color-primary-500: #84cc16;
+  --color-primary-600: #65a30d;
+  --color-primary-700: #4d7c0f;
+  --color-primary-800: #3f6212;
+  --color-primary-900: #365314;
+  /* Emerald */
+  --color-secondary-50: #ecfdf5;
+  --color-secondary-100: #d1fae5;
+  --color-secondary-200: #a7f3d0;
+  --color-secondary-300: #6ee7b7;
+  --color-secondary-400: #34d399;
+  --color-secondary-500: #10b981;
+  --color-secondary-600: #059669;
+  --color-secondary-700: #047857;
+  --color-secondary-800: #065f46;
+  --color-secondary-900: #064e3b;
+}
diff --git a/assets/css/schemes/congo.css b/assets/css/schemes/congo.css
new file mode 100644
index 00000000..3a67ebc3
--- /dev/null
+++ b/assets/css/schemes/congo.css
@@ -0,0 +1,37 @@
+/* Congo scheme */
+:root {
+  --color-neutral: #fff;
+  /* Gray */
+  --color-neutral-50: #fafafa;
+  --color-neutral-100: #f4f4f5;
+  --color-neutral-200: #e4e4e7;
+  --color-neutral-300: #d4d4d8;
+  --color-neutral-400: #a1a1aa;
+  --color-neutral-500: #71717a;
+  --color-neutral-600: #52525b;
+  --color-neutral-700: #3f3f46;
+  --color-neutral-800: #27272a;
+  --color-neutral-900: #18181b;
+  /* Violet */
+  --color-primary-50: #f5f3ff;
+  --color-primary-100: #ede9fe;
+  --color-primary-200: #ddd6fe;
+  --color-primary-300: #c4b5fd;
+  --color-primary-400: #a78bfa;
+  --color-primary-500: #8b5cf6;
+  --color-primary-600: #7c3aed;
+  --color-primary-700: #6d28d9;
+  --color-primary-800: #5b21b6;
+  --color-primary-900: #4c1d95;
+  /* Fuchsia */
+  --color-secondary-50: #fdf4ff;
+  --color-secondary-100: #fae8ff;
+  --color-secondary-200: #f5d0fe;
+  --color-secondary-300: #f0abfc;
+  --color-secondary-400: #e879f9;
+  --color-secondary-500: #d946ef;
+  --color-secondary-600: #c026d3;
+  --color-secondary-700: #a21caf;
+  --color-secondary-800: #86198f;
+  --color-secondary-900: #701a75;
+}
diff --git a/assets/css/schemes/fire.css b/assets/css/schemes/fire.css
new file mode 100644
index 00000000..e91cddd2
--- /dev/null
+++ b/assets/css/schemes/fire.css
@@ -0,0 +1,37 @@
+/* Fire scheme */
+:root {
+  --color-neutral: #fff;
+  /* Warm Gray */
+  --color-neutral-50: #fafaf9;
+  --color-neutral-100: #f5f5f4;
+  --color-neutral-200: #e7e5e4;
+  --color-neutral-300: #d6d3d1;
+  --color-neutral-400: #a8a29e;
+  --color-neutral-500: #78716c;
+  --color-neutral-600: #57534e;
+  --color-neutral-700: #44403c;
+  --color-neutral-800: #292524;
+  --color-neutral-900: #1c1917;
+  /* Orange */
+  --color-primary-50: #fff7ed;
+  --color-primary-100: #ffedd5;
+  --color-primary-200: #fed7aa;
+  --color-primary-300: #fdba74;
+  --color-primary-400: #fb923c;
+  --color-primary-500: #f97316;
+  --color-primary-600: #ea580c;
+  --color-primary-700: #c2410c;
+  --color-primary-800: #9a3412;
+  --color-primary-900: #7c2d12;
+  /* Rose */
+  --color-secondary-50: #fff1f2;
+  --color-secondary-100: #ffe4e6;
+  --color-secondary-200: #fecdd3;
+  --color-secondary-300: #fda4af;
+  --color-secondary-400: #fb7185;
+  --color-secondary-500: #f43f5e;
+  --color-secondary-600: #e11d48;
+  --color-secondary-700: #be123c;
+  --color-secondary-800: #9f1239;
+  --color-secondary-900: #881337;
+}
diff --git a/assets/css/schemes/ocean.css b/assets/css/schemes/ocean.css
new file mode 100644
index 00000000..c93e2a9c
--- /dev/null
+++ b/assets/css/schemes/ocean.css
@@ -0,0 +1,37 @@
+/* Ocean scheme */
+:root {
+  --color-neutral: #fff;
+  /* Cool Gray */
+  --color-neutral-50: #f8fafc;
+  --color-neutral-100: #f1f5f9;
+  --color-neutral-200: #e2e8f0;
+  --color-neutral-300: #cbd5e1;
+  --color-neutral-400: #94a3b8;
+  --color-neutral-500: #64748b;
+  --color-neutral-600: #475569;
+  --color-neutral-700: #334155;
+  --color-neutral-800: #1e293b;
+  --color-neutral-900: #0f172a;
+  /* Blue */
+  --color-primary-50: #eff6ff;
+  --color-primary-100: #dbeafe;
+  --color-primary-200: #bfdbfe;
+  --color-primary-300: #93c5fd;
+  --color-primary-400: #60a5fa;
+  --color-primary-500: #3b82f6;
+  --color-primary-600: #2563eb;
+  --color-primary-700: #1d4ed8;
+  --color-primary-800: #1e40af;
+  --color-primary-900: #1e3a8a;
+  /* Cyan */
+  --color-secondary-50: #ecfeff;
+  --color-secondary-100: #cffafe;
+  --color-secondary-200: #a5f3fc;
+  --color-secondary-300: #67e8f9;
+  --color-secondary-400: #22d3ee;
+  --color-secondary-500: #06b6d4;
+  --color-secondary-600: #0891b2;
+  --color-secondary-700: #0e7490;
+  --color-secondary-800: #155e75;
+  --color-secondary-900: #164e63;
+}
diff --git a/config/_default/params.toml b/config/_default/params.toml
index f5e085da..21678a2e 100644
--- a/config/_default/params.toml
+++ b/config/_default/params.toml
@@ -5,6 +5,7 @@
 # Refer to the theme docs for more details about each of these parameters.
 # https://jpanther.github.io/congo/docs/configuration/#theme-parameters
 
+colorScheme = "congo"
 # description = "My awesome website"
 # mainSections = ["section1", "section2"]
 
diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md
index 5c4ceb2a..5518086f 100755
--- a/exampleSite/content/_index.md
+++ b/exampleSite/content/_index.md
@@ -11,10 +11,10 @@ A simple, lightweight theme for Hugo built with Tailwind CSS.
   <span class="flex items-center pr-3 text-primary-400">
     {{< icon "exclamation-triangle" >}}
   </span>
-  <span class="flex items-center justify-between flex-grow dark:text-gray-300">
-    <span class="prose dark:text-white">This is a demo of the <code id="layout">page</code> layout.</span>
+  <span class="flex items-center justify-between flex-grow dark:text-neutral-300">
+    <span class="prose dark:text-neutral">This is a demo of the <code id="layout">page</code> layout.</span>
     <button
-      class="px-4 !text-white !no-underline rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"
+      class="px-4 !text-neutral !no-underline rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"
       onclick="switchLayout()"
     >
       Switch layout &orarr;
diff --git a/exampleSite/content/docs/advanced-customisation.md b/exampleSite/content/docs/advanced-customisation.md
index 2400e336..2baeeb85 100644
--- a/exampleSite/content/docs/advanced-customisation.md
+++ b/exampleSite/content/docs/advanced-customisation.md
@@ -9,11 +9,27 @@ showDate: false
 showAuthor: false
 ---
 
-There are a couple of ways you can make style changes to Congo.
+There are a few ways you can make style changes to Congo.
 
-If you just need to add or override some simple styles, you can do so by creating a `custom.css` file in your project's `static/css/` folder. This file will be loaded automatically after the theme's default styles.
+## Colour schemes
 
-Alternatively, if you'd like to make a major change, you can take advantage of Tailwind CSS's JIT compiler and rebuild the entire theme CSS from scratch.
+Congo ships with a few colour schemes out of the box. To change the basic colour scheme, you can set the `colorScheme` theme parameter to one of the default configurations. Valid options are `congo` (the default), `avocado`, `fire` and `ocean`.
+
+In addition to the default scheme, you can also create your own and restyle the entire website to your liking. Schemes are created by by placing a `<scheme-name>.css` file in the `assets/css/schemes/` folder. Once the file is created, simply refer to it by name in the theme configuration.
+
+Congo defines a three-colour palette that is used throughout the theme. The three colours are defined as `neutral`, `primary` and `secondary` variants, each containing ten shades of colour.
+
+Use one of the existing theme stylesheets as a template. You are free to define your own colours, but for some inspiration, check out the official [Tailwind colour palette reference](https://tailwindcss.com/docs/customizing-colors#color-palette-reference).
+
+## Overriding the stylesheet
+
+Sometimes you need to add a custom style to style your own HTML elements. Congo provides for this scenario by allowing you to overrid the default styles in your own CSS stylesheet. Simply create a `custom.css` file in your project's `static/css/` folder.
+
+The `custom.css` file will be loaded automatically after all the other theme styles which means anything in your custom file will take precedence over the defaults.
+
+## Building from source
+
+If you'd like to make a major change, you can take advantage of Tailwind CSS's JIT compiler and rebuild the entire theme CSS from scratch.
 
 {{< alert >}}
 **Note:** Building the theme manually is intended for advanced users.
@@ -27,24 +43,7 @@ npm install
 
 Once installed, you can edit the `themes/congo/tailwind.config.js` to change the styles that are applied throughout the theme. You can also adjust specific styles in `themes/congo/assets/css/main.css`.
 
-To allow for easy theme colour changes, Congo defines a `primary` and `secondary` colour palette that is used throughout the theme. In order to change the colour across the entire theme, simply edit the `tailwind.config.js` file accordingly.
-
-For example, to change to a green colour scheme, you could apply these changes:
-
-```js
-  // themes/congo/tailwind.config.js
-
-  theme: {
-    colors: {
-      transparent: "transparent",
-      white: colors.white,
-      gray: colors.gray,
-      primary: colors.lime,
-      secondary: colors.teal,
-    },
-    ...
-  }
-```
+To allow for easy theme colour changes, Congo defines a three-colour palette that is used throughout the theme. The three colours are defined as `neutral`, `primary` and `secondary` variants, each containing ten shades of colour. In order to change the colour across the entire theme, simply edit the `tailwind.config.js` file accordingly.
 
 For a full list of colours available, and their corresponding configuration values, see the official [Tailwind docs](https://tailwindcss.com/docs/customizing-colors#color-palette-reference).
 
diff --git a/exampleSite/content/docs/configuration.md b/exampleSite/content/docs/configuration.md
index b5f20820..cbbd135a 100644
--- a/exampleSite/content/docs/configuration.md
+++ b/exampleSite/content/docs/configuration.md
@@ -32,9 +32,9 @@ Note that the variable names provided in this table use dot notation to simplify
 <!-- prettier-ignore-start -->
 |Name|Type|Default|Description|
 | --- | --- | --- | --- |
-|`theme`|string|`"congo"`|This must be set to `"congo"` for the theme to function.|
+|`theme`|string|`"congo"`|When using Hugo Modules this config value should be removed. For all other installation types, this must be set to `"congo"` for the theme to function.|
 |`baseURL`|string|_Not set_|The URL to the root of the website.|
-|`languageCode`|string|`"en"`|The language of the website for site metadata purposes. It can be a top-level language (ie. `"en"`) or a sub-variant (ie. `"en-AU"`)."|
+|`languageCode`|string|`en`|The language of the website for site metadata purposes. It can be a top-level language (ie. `"en"`) or a sub-variant (ie. `en-AU`)."|
 |`defaultContentLanguage`|string|`"en"`|This value determines the language of theme components."|
 |`title`|string|`"Congo"`|The title of the website. This will be displayed in the site header and footer.|
 |`copyright`|string|_Not set_|A Markdown string containing the copyright message to be displayed in the site footer. If none is provided, Congo will automatically generate a copyright string using the site `title`.
@@ -56,6 +56,7 @@ Many of the article defaults here can be overridden on a per article basis by sp
 <!-- prettier-ignore-start -->
 |Name|Type|Default|Description|
 | --- | --- | --- | --- |
+|`colorScheme`|string|`"congo"`|The theme colour scheme to use. Valid values are `congo` (default), `avocado`, `ocean` and `fire`.|
 |`description`|string|_Not set_|The description of the website for metadata purposes.|
 |`mainSections`|array of strings|_Not set_|The sections that should be displayed in the recent articles list. If not provided the section with the greatest number of articles is used.|
 |`homepage.layout`|string|`"page"`|The layout of the homepage. Valid values are `page`, `profile` or `custom`. When set to `custom`, you must provide your own layout by creating a `/layouts/partials/home/custom.html` file. Refer to the [Homepage Layout](/docs/homepage-layout/) section for more details.|
diff --git a/exampleSite/content/samples/emoji-support.md b/exampleSite/content/samples/emoji-support.md
index b5657218..c4a0b026 100755
--- a/exampleSite/content/samples/emoji-support.md
+++ b/exampleSite/content/samples/emoji-support.md
@@ -20,28 +20,4 @@ The [Emoji cheat sheet](http://www.emoji-cheat-sheet.com/) is a useful reference
 
 ---
 
-**N.B.** The above steps enable Unicode Standard emoji characters and sequences in Hugo, however the rendering of these glyphs depends on the browser and the platform. To style the emoji you can either use a third party emoji font or a font stack; e.g.
-
-{{< highlight html >}}
-.emoji {
-font-family: Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols;
-}
-{{< /highlight >}}
-
-{{< css.inline >}}
-
-<style>
-.emojify {
-	font-family: Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols;
-	font-size: 2rem;
-	vertical-align: middle;
-}
-@media screen and (max-width:650px) {
-  .nowrap {
-    display: block;
-    margin: 25px 0;
-  }
-}
-</style>
-
-{{< /css.inline >}}
+**N.B.** The above steps enable Unicode Standard emoji characters and sequences in Hugo, however the rendering of these glyphs depends on the browser and the platform. To style the emoji you can either use a third party emoji font or a font stack.
diff --git a/layouts/404.html b/layouts/404.html
index 2e14bb2f..d53b38f6 100644
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -1,6 +1,8 @@
 {{ define "main" }}
   <h1 class="mb-3 text-4xl font-extrabold">{{ i18n "error.404_title" | emojify }}</h1>
-  <p class="mt-8 mb-12 text-gray-400 dark:text-gray-500">{{ i18n "error.404_error" | emojify }}</p>
+  <p class="mt-8 mb-12 text-neutral-400 dark:text-neutral-500">
+    {{ i18n "error.404_error" | emojify }}
+  </p>
   <div class="prose dark:prose-light">
     <p>{{ i18n "error.404_description" | emojify }}</p>
   </div>
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 6865a02b..340e219f 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -2,7 +2,7 @@
 <html lang="{{ with .Site.LanguageCode }}{{ . }}{{ else }}en{{ end }}">
   {{- partial "head.html" . -}}
   <body
-    class="flex flex-col h-screen px-6 m-auto text-lg leading-7 bg-white text-grey-900 sm:px-14 md:px-24 lg:px-32 dark:bg-gray-800 dark:text-white max-w-7xl"
+    class="flex flex-col h-screen px-6 m-auto text-lg leading-7 bg-neutral text-neutral-900 sm:px-14 md:px-24 lg:px-32 dark:bg-neutral-800 dark:text-neutral max-w-7xl"
   >
     {{- partial "header.html" . -}}
     <main class="flex-grow">{{- block "main" . }}{{- end }}</main>
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 71d28664..ec1e2938 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -4,8 +4,8 @@
     <section>
       {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
         {{ if $.Site.Params.list.groupByYear }}
-          <h2 class="mt-12 text-2xl font-bold first:mt-8">{{ .Key }}</h2>
-          <hr class="border-gray-400 border-dotted w-36" />
+          <h2 class="mt-12 text-2xl font-bold first:mt-8 text-neutral-800">{{ .Key }}</h2>
+          <hr class="border-dotted border-neutral-400 w-36" />
         {{ end }}
         {{ range .Pages }}
           {{ partial "article-link.html" . }}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 84b0504c..f1f90c24 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -4,8 +4,10 @@
       {{ if .Site.Params.article.showBreadcrumbs | default false }}
         {{ partial "breadcrumbs.html" . }}
       {{ end }}
-      <h1 class="mt-0 text-4xl font-extrabold">{{ .Title | emojify }}</h1>
-      <div class="mt-8 mb-12 text-base text-gray-400 dark:text-gray-500">
+      <h1 class="mt-0 text-4xl font-extrabold text-neutral-800 dark:text-neutral">
+        {{ .Title | emojify }}
+      </h1>
+      <div class="mt-8 mb-12 text-base text-neutral-400 dark:text-neutral-500">
         {{ partial "article-meta.html" . }}
         {{ if and .Draft .Site.Params.article.showDraftLabel }}
           <span class="pl-2">{{ partial "badge.html" (i18n "article.draft" | emojify) }}</span>
diff --git a/layouts/_default/taxonomy.html b/layouts/_default/taxonomy.html
index 2c58163b..10048652 100644
--- a/layouts/_default/taxonomy.html
+++ b/layouts/_default/taxonomy.html
@@ -10,7 +10,7 @@
             >{{ .Page.Title }}</a
           >
           {{ if $.Site.Params.taxonomy.showTermCount | default true }}
-            <span class="text-base text-gray-400">
+            <span class="text-base text-neutral-400">
               <span class="px-1 text-primary-500">&middot;</span>
               {{ .Count }}
             </span>
diff --git a/layouts/_default/term.html b/layouts/_default/term.html
index eba31292..4a70ab53 100644
--- a/layouts/_default/term.html
+++ b/layouts/_default/term.html
@@ -3,7 +3,7 @@
   <section>
     {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
       <h2 class="mt-12 text-2xl font-bold first:mt-8">{{ .Key }}</h2>
-      <hr class="border-gray-400 border-dotted w-36" />
+      <hr class="border-dotted border-neutral-400 w-36" />
       {{ range .Pages }}
         {{ partial "article-link.html" . }}
       {{ end }}
diff --git a/layouts/partials/article-link.html b/layouts/partials/article-link.html
index efd3b2c6..3b28055f 100644
--- a/layouts/partials/article-link.html
+++ b/layouts/partials/article-link.html
@@ -1,7 +1,11 @@
 <article>
   <h3 class="mt-6 text-xl font-semibold">
     {{ if isset .Params "externalUrl" }}
-      <a class="hover:underline" href="{{ .Params.externalUrl }}" target="_blank" rel="external"
+      <a
+        class="hover:underline hover:underline-primary-500 hover:underline-offset-small text-neutral-800 dark:text-neutral"
+        href="{{ .Params.externalUrl }}"
+        target="_blank"
+        rel="external"
         >{{ .Title }}</a
       >
       <span
@@ -12,7 +16,7 @@
       >
     {{ else }}
       <a
-        class="hover:underline hover:underline-primary-500 hover:underline-offset-small"
+        class="hover:underline hover:underline-primary-500 hover:underline-offset-small text-neutral-800 dark:text-neutral"
         href="{{ .Permalink }}"
         >{{ .Title }}</a
       >
@@ -24,7 +28,7 @@
       {{ partial "extend-article-link.html" . }}
     {{ end }}
   </h3>
-  <div class="text-sm text-gray-400 dark:text-gray-500">
+  <div class="text-sm text-neutral-400 dark:text-neutral-500">
     {{ partial "article-meta.html" . }}
   </div>
 </article>
diff --git a/layouts/partials/article-pagination.html b/layouts/partials/article-pagination.html
index 85442031..a9927559 100644
--- a/layouts/partials/article-pagination.html
+++ b/layouts/partials/article-pagination.html
@@ -1,7 +1,7 @@
 {{ if .Params.showPagination | default (.Site.Params.article.showPagination | default true) }}
   {{ if or .NextInSection .PrevInSection }}
     <div class="pt-8 article-pagination">
-      <hr class="border-gray-300 border-dotted dark:border-gray-600" />
+      <hr class="border-dotted border-neutral-300 dark:border-neutral-600" />
       <div class="flex justify-between pt-3">
         <span>
           {{ if .NextInSection }}
@@ -11,7 +11,7 @@
                 <span class="article-pagination-title">{{ .NextInSection.Title }}</span>
                 {{ if .Params.showDate | default (.Site.Params.article.showDate | default true) }}
                   <time
-                    class="-mt-1 text-xs text-gray-400 dark:text-gray-500"
+                    class="-mt-1 text-xs text-neutral-400 dark:text-neutral-500"
                     datetime="{{ .Date }}"
                   >
                     {{ .Date.Format .Site.Params.article.dateFormat | default "2 January 2006" }}
@@ -28,7 +28,7 @@
                 <span class="article-pagination-title">{{ .PrevInSection.Title }}</span>
                 {{ if .Params.showDate | default (.Site.Params.article.showDate | default true) }}
                   <time
-                    class="-mt-1 text-xs text-gray-400 dark:text-gray-500"
+                    class="-mt-1 text-xs text-neutral-400 dark:text-neutral-500"
                     datetime="{{ .Date }}"
                   >
                     {{ .Date.Format .Site.Params.article.dateFormat | default "2 January 2006" }}
diff --git a/layouts/partials/author-links.html b/layouts/partials/author-links.html
index 63c47a23..f05d0cba 100644
--- a/layouts/partials/author-links.html
+++ b/layouts/partials/author-links.html
@@ -1,5 +1,5 @@
 {{ with .Site.Author.links }}
-  <div class="flex flex-wrap text-gray-400 dark:text-gray-500">
+  <div class="flex flex-wrap text-neutral-400 dark:text-neutral-500">
     {{ range $links := . }}
       {{ range $name, $url := $links }}
         <a
diff --git a/layouts/partials/author.html b/layouts/partials/author.html
index 7f739c35..3b53309c 100644
--- a/layouts/partials/author.html
+++ b/layouts/partials/author.html
@@ -5,10 +5,10 @@
     {{ end }}
     <div>
       {{ with .Site.Author.name }}
-        <div class="text-[0.6rem] leading-3 text-gray-400 dark:text-gray-500 uppercase">
+        <div class="text-[0.6rem] leading-3 text-neutral-400 dark:text-neutral-500 uppercase">
           {{ i18n "author.byline_title" | emojify }}
         </div>
-        <div class="font-semibold leading-6 text-gray-800 dark:text-gray-300">
+        <div class="font-semibold leading-6 text-neutral-800 dark:text-neutral-300">
           {{ . }}
         </div>
       {{ end }}
diff --git a/layouts/partials/breadcrumbs.html b/layouts/partials/breadcrumbs.html
index a943add8..8a55af49 100644
--- a/layouts/partials/breadcrumbs.html
+++ b/layouts/partials/breadcrumbs.html
@@ -1,4 +1,4 @@
-<ol class="text-sm text-gray-400 dark:text-gray-500">
+<ol class="text-sm text-neutral-400 dark:text-neutral-500">
   {{ template "crumb" (dict "p1" . "p2" .) }}
 </ol>
 {{ define "crumb" }}
@@ -9,7 +9,7 @@
   {{ end }}
   <li class="inline {{ if or (eq .p1 .p2) (.p1.IsHome) }}hidden{{ end }}">
     <a
-      class="hover:underline hover:underline-gray-300 dark:underline-gray-600"
+      class="hover:underline hover:underline-neutral-300 dark:underline-neutral-600"
       href="{{ .p1.Permalink }}"
       >{{ .p1.Title }}</a
     ><span class="px-1 text-primary-500">/</span>
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 52938ae9..6fc51619 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,6 +1,6 @@
 <footer class="py-10 text-sm">
   {{/* Copyright */}}
-  <p class="text-gray-400 dark:text-gray-500">
+  <p class="text-neutral-400 dark:text-neutral-500">
     {{- with .Site.Copyright }}
       {{ . | emojify | markdownify }}
     {{- else }}
@@ -11,7 +11,7 @@
   </p>
   {{/* Theme attribution */}}
   {{ if .Site.Params.attribution | default true }}
-    <p class="text-xs text-gray-300 dark:text-gray-600">
+    <p class="text-xs text-neutral-300 dark:text-neutral-600">
       {{ i18n "footer.powered_by" }}
       <a
         class="hover:underline hover:underline-primary-300 hover:text-primary-400"
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 52063286..d2588615 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -27,6 +27,12 @@
     {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
   {{ end -}}
   {{/* Styles */}}
+  {{ $cssScheme := resources.Get (printf "css/schemes/%s.css" (.Site.Params.colorScheme | default "congo")) }}
+  {{ if not $cssScheme }}
+    {{ $cssScheme = resources.Get "css/schemes/congo.css" }}
+  {{ end }}
+  {{ $stylesheet := $cssScheme | resources.Minify }}
+  <link type="text/css" rel="stylesheet" href="{{ $stylesheet.Permalink }}" />
   <link type="text/css" rel="stylesheet" href="{{ "css/main.css" | absURL }}" />
   {{ if (fileExists "static/css/custom.css") -}}
     <link type="text/css" rel="stylesheet" href="{{ "css/custom.css" | absURL }}" />
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 713c30ce..79cd54af 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,4 +1,4 @@
-<header class="flex justify-between py-6 font-semibold sm:py-10">
+<header class="flex justify-between py-6 font-semibold sm:py-10 text-neutral-800 dark:text-neutral">
   <div>
     <a
       class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small"
diff --git a/layouts/partials/pagination.html b/layouts/partials/pagination.html
index a00e8b50..b527abd3 100644
--- a/layouts/partials/pagination.html
+++ b/layouts/partials/pagination.html
@@ -5,7 +5,7 @@
       <li>
         <a
           href="{{ $paginator.Prev.URL }}"
-          class="mx-1 block min-w-[1.8rem] text-center hover:bg-primary-600 hover:text-white rounded"
+          class="mx-1 block min-w-[1.8rem] text-center hover:bg-primary-600 hover:text-neutral rounded"
           rel="prev"
         >
           &larr;
@@ -16,8 +16,8 @@
       <li>
         <a
           href="{{ .URL }}"
-          class="mx-1 block min-w-[1.8rem] text-center hover:bg-primary-600 hover:text-white rounded {{ if eq . $paginator }}
-            bg-primary-200 dark:bg-primary-400 dark:text-gray-800
+          class="mx-1 block min-w-[1.8rem] text-center hover:bg-primary-600 hover:text-neutral rounded {{ if eq . $paginator }}
+            bg-primary-200 dark:bg-primary-400 dark:text-neutral-800
           {{ end }}"
         >
           {{ .PageNumber }}
@@ -28,7 +28,7 @@
       <li>
         <a
           href="{{ $paginator.Next.URL }}"
-          class="mx-1 block min-w-[1.8rem] text-center hover:bg-primary-600 hover:text-white rounded"
+          class="mx-1 block min-w-[1.8rem] text-center hover:bg-primary-600 hover:text-neutral rounded"
           rel="next"
         >
           &rarr;
diff --git a/layouts/partials/section-header.html b/layouts/partials/section-header.html
index 73bef669..41a0a751 100644
--- a/layouts/partials/section-header.html
+++ b/layouts/partials/section-header.html
@@ -3,7 +3,7 @@
     {{ partial "breadcrumbs.html" . }}
   {{ end }}
   <section class="prose dark:prose-light">
-    <h1 class="mb-3 text-4xl font-extrabold">{{ .Title }}</h1>
+    <h1 class="mb-3 text-4xl font-extrabold text-neutral-800">{{ .Title }}</h1>
     <section>{{ .Content }}</section>
   </section>
 </header>
diff --git a/layouts/partials/sharing-links.html b/layouts/partials/sharing-links.html
index e4f5f3f3..4dbdfc80 100644
--- a/layouts/partials/sharing-links.html
+++ b/layouts/partials/sharing-links.html
@@ -4,7 +4,7 @@
     {{ range . }}
       {{ with index $links . }}
         <a
-          class="bg-gray-300 text-gray-700 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-primary-400 dark:hover:text-gray-800 m-1 hover:bg-primary-500 hover:text-white rounded min-w-[2.4rem] inline-block text-center p-1"
+          class="bg-neutral-300 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800 m-1 hover:bg-primary-500 hover:text-neutral rounded min-w-[2.4rem] inline-block text-center p-1"
           href="{{ printf .url $.Permalink $.Title }}"
           title="{{ i18n .title }}"
           >{{ partial "icon.html" .icon }}</a
diff --git a/layouts/shortcodes/alert.html b/layouts/shortcodes/alert.html
index cd02122e..defa0199 100644
--- a/layouts/shortcodes/alert.html
+++ b/layouts/shortcodes/alert.html
@@ -2,7 +2,7 @@
   <span class="pr-3 text-primary-400">
     {{ partial "icon.html" "exclamation-triangle" }}
   </span>
-  <span class="no-prose dark:text-gray-300">
+  <span class="no-prose dark:text-neutral-300">
     {{- .Inner | markdownify -}}
   </span>
 </div>
diff --git a/layouts/shortcodes/button.html b/layouts/shortcodes/button.html
index c43a79c4..a683dd86 100644
--- a/layouts/shortcodes/button.html
+++ b/layouts/shortcodes/button.html
@@ -1,5 +1,5 @@
 <a
-  class="px-4 py-2 !text-white !no-underline !rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"
+  class="px-4 py-2 !text-neutral !no-underline !rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"
   {{ with .Get "href" }}href="{{ . }}"{{ end }}
   {{ with .Get "target" }}target="{{ . }}"{{ end }}
   role="button"
diff --git a/static/css/main.css b/static/css/main.css
index 760c6120..1154898b 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -1 +1 @@
-/*! tailwindcss v2.2.7 | MIT License | https://tailwindcss.com*//*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */html{-moz-tab-size:4;-o-tab-size:4;tab-size:4;line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji}hr{height:0;color:inherit}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}legend{padding:0}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}button{background-color:initial;background-image:none}fieldset,ol,ul{margin:0;padding:0}ol,ul{list-style:none}html{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}body{font-family:inherit;line-height:inherit}*,:after,:before{box-sizing:border-box;border:0 solid}hr{border-top-width:1px}img{border-style:solid}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#a1a1aa}input:-ms-input-placeholder,textarea:-ms-input-placeholder{opacity:1;color:#a1a1aa}input::placeholder,textarea::placeholder{opacity:1;color:#a1a1aa}[role=button],button{cursor:pointer}table{border-collapse:collapse}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}button,input,optgroup,select,textarea{padding:0;line-height:inherit;color:inherit}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:after,:before{--tw-border-opacity:1;border-color:rgba(228,228,231,var(--tw-border-opacity))}.prose{color:#3f3f46;max-width:65ch}.prose [class~=lead]{color:#52525b;font-size:1.25em;line-height:1.6;margin-top:1.2em;margin-bottom:1.2em}.prose a{color:#6d28d9;text-decoration:underline;font-weight:500;-webkit-text-decoration-color:#c4b5fd;text-decoration-color:#c4b5fd}.prose a:hover{background-color:#7c3aed;border-radius:.09rem;color:#fff;text-decoration:none}.prose strong{color:#18181b;font-weight:600}.prose ol[type=A]{--list-counter-style:upper-alpha}.prose ol[type=a]{--list-counter-style:lower-alpha}.prose ol[type=A s]{--list-counter-style:upper-alpha}.prose ol[type=a s]{--list-counter-style:lower-alpha}.prose ol[type=I]{--list-counter-style:upper-roman}.prose ol[type=i]{--list-counter-style:lower-roman}.prose ol[type=I s]{--list-counter-style:upper-roman}.prose ol[type=i s]{--list-counter-style:lower-roman}.prose ol[type="1"]{--list-counter-style:decimal}.prose ol>li{position:relative;padding-left:1.75em}.prose ol>li:before{content:counter(list-item,var(--list-counter-style,decimal)) ".";position:absolute;font-weight:400;color:#71717a;left:0}.prose ul>li{position:relative;padding-left:1.75em}.prose ul>li:before{content:"";position:absolute;background-color:#d4d4d8;border-radius:50%;width:.375em;height:.375em;top:.6875em;left:.25em}.prose hr{border-color:#e4e4e7;border-top-width:1px;margin-top:3em;margin-bottom:3em}.prose blockquote{font-weight:500;font-style:italic;color:#18181b;border-left-width:.25rem;border-left-color:#ddd6fe;quotes:"\201C""\201D""\2018""\2019";margin-top:1.6em;margin-bottom:1.6em;padding-left:1em}.prose blockquote p:first-of-type:before{content:open-quote}.prose blockquote p:last-of-type:after{content:close-quote}.prose h1{color:#18181b;font-weight:800;font-size:2.25em;margin-top:0;margin-bottom:.8888889em;line-height:1.1111111}.prose h2{color:#18181b;font-weight:700;font-size:1.5em;margin-top:2em;margin-bottom:1em;line-height:1.3333333;position:relative}.prose h3{font-size:1.25em;margin-top:1.6em;margin-bottom:.6em;line-height:1.6}.prose h3,.prose h4{color:#18181b;font-weight:600;position:relative}.prose h4{margin-top:1.5em;margin-bottom:.5em;line-height:1.5}.prose figure figcaption{color:#71717a;font-size:.875em;line-height:1.4285714;margin-top:.8571429em}.prose code{color:#a21caf;font-weight:600;font-size:.875em}.prose code:after,.prose code:before{content:"`"}.prose a code{color:#18181b}.prose pre{color:#e4e4e7;background-color:#fafafa;overflow-x:auto;font-size:.875em;line-height:1.7142857;margin-top:1.7142857em;margin-bottom:1.7142857em;border-radius:.375rem;padding:.8571429em 1.1428571em}.prose pre code{background-color:initial;border-width:0;border-radius:0;padding:0;font-weight:400;color:#3f3f46;font-size:inherit;font-family:inherit;line-height:inherit}.prose pre code:after,.prose pre code:before{content:none}.prose table{width:100%;table-layout:auto;text-align:left;margin-top:2em;margin-bottom:2em;font-size:.875em;line-height:1.7142857}.prose thead{color:#18181b;font-weight:600;border-bottom-width:1px;border-bottom-color:#d4d4d8}.prose thead th{vertical-align:bottom;padding-right:.5714286em;padding-bottom:.5714286em;padding-left:.5714286em}.prose tbody tr{border-bottom-width:1px;border-bottom-color:#e4e4e7}.prose tbody tr:last-child{border-bottom-width:0}.prose tbody td{vertical-align:top;padding:.5714286em}.prose{font-size:1rem;line-height:1.75}.prose p{margin-top:1.25em;margin-bottom:1.25em}.prose figure,.prose img,.prose video{margin-top:2em;margin-bottom:2em}.prose figure>*{margin-top:0;margin-bottom:0}.prose h2 code{font-size:.875em}.prose h3 code{font-size:.9em}.prose ol,.prose ul{margin-top:1.25em;margin-bottom:1.25em}.prose li{margin-top:.5em;margin-bottom:.5em}.prose>ul>li p{margin-top:.75em;margin-bottom:.75em}.prose>ul>li>:first-child{margin-top:1.25em}.prose>ul>li>:last-child{margin-bottom:1.25em}.prose>ol>li>:first-child{margin-top:1.25em}.prose>ol>li>:last-child{margin-bottom:1.25em}.prose ol ol,.prose ol ul,.prose ul ol,.prose ul ul{margin-top:.75em;margin-bottom:.75em}.prose h2+*,.prose h3+*,.prose h4+*,.prose hr+*{margin-top:0}.prose thead th:first-child{padding-left:0}.prose thead th:last-child{padding-right:0}.prose tbody td:first-child{padding-left:0}.prose tbody td:last-child{padding-right:0}.prose>:first-child{margin-top:0}.prose>:last-child{margin-bottom:0}.prose kbd{background-color:#e4e4e7;padding:.1rem .4rem;border-radius:.25rem;font-size:.9rem;font-weight:600}.prose mark{background-color:#f5d0fe;padding:.1rem .2rem;border-radius:.12rem}body a,body button{transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.icon svg{height:1em;width:1em}.prose .heading-anchor{position:absolute;top:0;text-decoration:none;opacity:0;width:1.1em;left:-1.1em}.prose .heading-anchor:hover{background-color:initial;--tw-text-opacity:1;color:rgba(124,58,237,var(--tw-text-opacity));text-decoration:underline}.prose .heading-anchor:focus,.prose .heading-anchor:hover,.prose h2:hover>.heading-anchor,.prose h3:hover>.heading-anchor,.prose h4:hover>.heading-anchor{opacity:1}.no-prose>p{margin-top:0}.no-prose>p:last-child{margin-bottom:0}.article-pagination a:hover .article-pagination-title{text-decoration:underline;-webkit-text-decoration-color:#8b5cf6;text-decoration-color:#8b5cf6}.article-pagination a:hover .article-pagination-direction{--tw-text-opacity:1;color:rgba(109,40,217,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.article-pagination a:hover .article-pagination-direction{--tw-text-opacity:1;color:rgba(167,139,250,var(--tw-text-opacity))}}.prose .chroma{border-radius:.375rem;--tw-bg-opacity:1;background-color:rgba(250,250,250,var(--tw-bg-opacity));--tw-text-opacity:1;color:rgba(63,63,70,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.prose .chroma{--tw-bg-opacity:1;background-color:rgba(63,63,70,var(--tw-bg-opacity));--tw-text-opacity:1;color:rgba(228,228,231,var(--tw-text-opacity))}}.chroma .lntd,.chroma .lntd pre{margin:0;border-style:none;padding:0;vertical-align:top}.chroma .lntable{display:block;width:auto;overflow:hidden;padding:.75rem 1rem;font-size:1rem;line-height:1.5rem;border-spacing:0}.chroma .hl{margin-left:-1rem;margin-right:-1rem;display:block;width:auto;--tw-bg-opacity:1;background-color:rgba(237,233,254,var(--tw-bg-opacity));padding-left:1rem;padding-right:1rem}@media (prefers-color-scheme:dark){.chroma .hl{--tw-bg-opacity:1;background-color:rgba(76,29,149,var(--tw-bg-opacity))}}.chroma .lntd .hl{margin:0;padding:0}.chroma .lnt{--tw-text-opacity:1;color:rgba(82,82,91,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .lnt{--tw-text-opacity:1;color:rgba(212,212,216,var(--tw-text-opacity))}}.chroma .lnt{margin-right:.4em;padding:0 .4em}.chroma .ln{--tw-text-opacity:1;color:rgba(82,82,91,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .ln{--tw-text-opacity:1;color:rgba(212,212,216,var(--tw-text-opacity))}}.chroma .ln{margin-right:.4em;padding:0 .4em}.chroma .k{--tw-text-opacity:1;color:rgba(124,58,237,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .k{--tw-text-opacity:1;color:rgba(196,181,253,var(--tw-text-opacity))}}.chroma .kc{font-weight:600;--tw-text-opacity:1;color:rgba(232,121,249,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .kc{--tw-text-opacity:1;color:rgba(217,70,239,var(--tw-text-opacity))}}.chroma .kd{--tw-text-opacity:1;color:rgba(124,58,237,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .kd{--tw-text-opacity:1;color:rgba(196,181,253,var(--tw-text-opacity))}}.chroma .kn{--tw-text-opacity:1;color:rgba(124,58,237,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .kn{--tw-text-opacity:1;color:rgba(196,181,253,var(--tw-text-opacity))}}.chroma .kp{--tw-text-opacity:1;color:rgba(124,58,237,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .kp{--tw-text-opacity:1;color:rgba(196,181,253,var(--tw-text-opacity))}}.chroma .kr{--tw-text-opacity:1;color:rgba(124,58,237,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .kr{--tw-text-opacity:1;color:rgba(196,181,253,var(--tw-text-opacity))}}.chroma .kt{--tw-text-opacity:1;color:rgba(232,121,249,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .kt{--tw-text-opacity:1;color:rgba(192,38,211,var(--tw-text-opacity))}}.chroma .n{--tw-text-opacity:1;color:rgba(112,26,117,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .n{--tw-text-opacity:1;color:rgba(245,208,254,var(--tw-text-opacity))}}.chroma .na{--tw-text-opacity:1;color:rgba(134,25,143,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .na{--tw-text-opacity:1;color:rgba(240,171,252,var(--tw-text-opacity))}}.chroma .nb{--tw-text-opacity:1;color:rgba(134,25,143,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .nb{--tw-text-opacity:1;color:rgba(240,171,252,var(--tw-text-opacity))}}.chroma .bp{--tw-text-opacity:1;color:rgba(134,25,143,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .bp{--tw-text-opacity:1;color:rgba(240,171,252,var(--tw-text-opacity))}}.chroma .nc{--tw-text-opacity:1;color:rgba(124,58,237,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .nc{--tw-text-opacity:1;color:rgba(196,181,253,var(--tw-text-opacity))}}.chroma .no{font-weight:600;--tw-text-opacity:1;color:rgba(232,121,249,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .no{--tw-text-opacity:1;color:rgba(217,70,239,var(--tw-text-opacity))}}.chroma .nd{--tw-text-opacity:1;color:rgba(112,26,117,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .nd{--tw-text-opacity:1;color:rgba(245,208,254,var(--tw-text-opacity))}}.chroma .ni{--tw-text-opacity:1;color:rgba(112,26,117,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .ni{--tw-text-opacity:1;color:rgba(245,208,254,var(--tw-text-opacity))}}.chroma .ne{font-weight:600;--tw-text-opacity:1;color:rgba(232,121,249,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .ne{--tw-text-opacity:1;color:rgba(217,70,239,var(--tw-text-opacity))}}.chroma .nf{--tw-text-opacity:1;color:rgba(192,38,211,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .nf{--tw-text-opacity:1;color:rgba(217,70,239,var(--tw-text-opacity))}}.chroma .fm{--tw-text-opacity:1;color:rgba(124,58,237,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .fm{--tw-text-opacity:1;color:rgba(196,181,253,var(--tw-text-opacity))}}.chroma .nl{--tw-text-opacity:1;color:rgba(112,26,117,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .nl{--tw-text-opacity:1;color:rgba(245,208,254,var(--tw-text-opacity))}}.chroma .nn{--tw-text-opacity:1;color:rgba(124,58,237,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .nn{--tw-text-opacity:1;color:rgba(196,181,253,var(--tw-text-opacity))}}.chroma .nx{--tw-text-opacity:1;color:rgba(134,25,143,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .nx{--tw-text-opacity:1;color:rgba(240,171,252,var(--tw-text-opacity))}}.chroma .py{color:#cebc3a}.chroma .nt{--tw-text-opacity:1;color:rgba(134,25,143,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .nt{--tw-text-opacity:1;color:rgba(240,171,252,var(--tw-text-opacity))}}.chroma .nv{--tw-text-opacity:1;color:rgba(232,121,249,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .nv{--tw-text-opacity:1;color:rgba(192,38,211,var(--tw-text-opacity))}}.chroma .vc{--tw-text-opacity:1;color:rgba(124,58,237,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .vc{--tw-text-opacity:1;color:rgba(196,181,253,var(--tw-text-opacity))}}.chroma .vg{font-weight:600;--tw-text-opacity:1;color:rgba(232,121,249,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .vg{--tw-text-opacity:1;color:rgba(217,70,239,var(--tw-text-opacity))}}.chroma .vi{--tw-text-opacity:1;color:rgba(232,121,249,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .vi{--tw-text-opacity:1;color:rgba(192,38,211,var(--tw-text-opacity))}}.chroma .vm{--tw-text-opacity:1;color:rgba(232,121,249,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .vm{--tw-text-opacity:1;color:rgba(192,38,211,var(--tw-text-opacity))}}.chroma .l{--tw-text-opacity:1;color:rgba(91,33,182,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .l{--tw-text-opacity:1;color:rgba(167,139,250,var(--tw-text-opacity))}}.chroma .ld{--tw-text-opacity:1;color:rgba(91,33,182,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .ld{--tw-text-opacity:1;color:rgba(167,139,250,var(--tw-text-opacity))}}.chroma .s{--tw-text-opacity:1;color:rgba(91,33,182,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .s{--tw-text-opacity:1;color:rgba(167,139,250,var(--tw-text-opacity))}}.chroma .sa{--tw-text-opacity:1;color:rgba(91,33,182,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .sa{--tw-text-opacity:1;color:rgba(167,139,250,var(--tw-text-opacity))}}.chroma .sb{--tw-text-opacity:1;color:rgba(91,33,182,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .sb{--tw-text-opacity:1;color:rgba(167,139,250,var(--tw-text-opacity))}}.chroma .sc{--tw-text-opacity:1;color:rgba(91,33,182,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .sc{--tw-text-opacity:1;color:rgba(167,139,250,var(--tw-text-opacity))}}.chroma .dl{--tw-text-opacity:1;color:rgba(91,33,182,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .dl{--tw-text-opacity:1;color:rgba(167,139,250,var(--tw-text-opacity))}}.chroma .sd{--tw-text-opacity:1;color:rgba(91,33,182,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .sd{--tw-text-opacity:1;color:rgba(167,139,250,var(--tw-text-opacity))}}.chroma .s2{--tw-text-opacity:1;color:rgba(91,33,182,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .s2{--tw-text-opacity:1;color:rgba(167,139,250,var(--tw-text-opacity))}}.chroma .se{font-weight:600;--tw-text-opacity:1;color:rgba(232,121,249,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .se{--tw-text-opacity:1;color:rgba(217,70,239,var(--tw-text-opacity))}}.chroma .sh{--tw-text-opacity:1;color:rgba(91,33,182,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .sh{--tw-text-opacity:1;color:rgba(167,139,250,var(--tw-text-opacity))}}.chroma .si{--tw-text-opacity:1;color:rgba(91,33,182,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .si{--tw-text-opacity:1;color:rgba(167,139,250,var(--tw-text-opacity))}}.chroma .sx{--tw-text-opacity:1;color:rgba(91,33,182,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .sx{--tw-text-opacity:1;color:rgba(167,139,250,var(--tw-text-opacity))}}.chroma .sr{font-weight:600;--tw-text-opacity:1;color:rgba(91,33,182,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .sr{--tw-text-opacity:1;color:rgba(167,139,250,var(--tw-text-opacity))}}.chroma .s1{--tw-text-opacity:1;color:rgba(91,33,182,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .s1{--tw-text-opacity:1;color:rgba(167,139,250,var(--tw-text-opacity))}}.chroma .ss{font-weight:600;--tw-text-opacity:1;color:rgba(91,33,182,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .ss{--tw-text-opacity:1;color:rgba(167,139,250,var(--tw-text-opacity))}}.chroma .m{--tw-text-opacity:1;color:rgba(232,121,249,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .m{--tw-text-opacity:1;color:rgba(192,38,211,var(--tw-text-opacity))}}.chroma .mb{--tw-text-opacity:1;color:rgba(232,121,249,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .mb{--tw-text-opacity:1;color:rgba(192,38,211,var(--tw-text-opacity))}}.chroma .mf{--tw-text-opacity:1;color:rgba(232,121,249,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .mf{--tw-text-opacity:1;color:rgba(192,38,211,var(--tw-text-opacity))}}.chroma .mh{--tw-text-opacity:1;color:rgba(232,121,249,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .mh{--tw-text-opacity:1;color:rgba(192,38,211,var(--tw-text-opacity))}}.chroma .mi{--tw-text-opacity:1;color:rgba(232,121,249,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .mi{--tw-text-opacity:1;color:rgba(192,38,211,var(--tw-text-opacity))}}.chroma .il{--tw-text-opacity:1;color:rgba(232,121,249,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .il{--tw-text-opacity:1;color:rgba(192,38,211,var(--tw-text-opacity))}}.chroma .mo{--tw-text-opacity:1;color:rgba(232,121,249,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .mo{--tw-text-opacity:1;color:rgba(192,38,211,var(--tw-text-opacity))}}.chroma .o{--tw-text-opacity:1;color:rgba(124,58,237,var(--tw-text-opacity))}.chroma .ow{font-weight:600;--tw-text-opacity:1;color:rgba(167,139,250,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .ow{--tw-text-opacity:1;color:rgba(124,58,237,var(--tw-text-opacity))}}.chroma .c{font-style:italic;--tw-text-opacity:1;color:rgba(161,161,170,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .c{--tw-text-opacity:1;color:rgba(113,113,122,var(--tw-text-opacity))}}.chroma .ch{font-weight:600;font-style:italic;--tw-text-opacity:1;color:rgba(161,161,170,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .ch{--tw-text-opacity:1;color:rgba(113,113,122,var(--tw-text-opacity))}}.chroma .cm{font-style:italic;--tw-text-opacity:1;color:rgba(161,161,170,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .cm{--tw-text-opacity:1;color:rgba(113,113,122,var(--tw-text-opacity))}}.chroma .c1{font-style:italic;--tw-text-opacity:1;color:rgba(161,161,170,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .c1{--tw-text-opacity:1;color:rgba(113,113,122,var(--tw-text-opacity))}}.chroma .cs{font-style:italic;--tw-text-opacity:1;color:rgba(161,161,170,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .cs{--tw-text-opacity:1;color:rgba(113,113,122,var(--tw-text-opacity))}}.chroma .cp{font-style:italic;--tw-text-opacity:1;color:rgba(161,161,170,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .cp{--tw-text-opacity:1;color:rgba(113,113,122,var(--tw-text-opacity))}}.chroma .cpf{font-style:italic;--tw-text-opacity:1;color:rgba(161,161,170,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .cpf{--tw-text-opacity:1;color:rgba(113,113,122,var(--tw-text-opacity))}}.chroma .ge{font-style:italic}.chroma .gh{font-weight:600;--tw-text-opacity:1;color:rgba(113,113,122,var(--tw-text-opacity))}.chroma .gi{--tw-text-opacity:1;color:rgba(91,33,182,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .gi{--tw-text-opacity:1;color:rgba(167,139,250,var(--tw-text-opacity))}}.chroma .go{--tw-text-opacity:1;color:rgba(91,33,182,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .go{--tw-text-opacity:1;color:rgba(167,139,250,var(--tw-text-opacity))}}.chroma .gp{--tw-text-opacity:1;color:rgba(91,33,182,var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.chroma .gp{--tw-text-opacity:1;color:rgba(167,139,250,var(--tw-text-opacity))}}.chroma .gs{font-weight:600}.chroma .gt,.chroma .gu{--tw-text-opacity:1;color:rgba(113,113,122,var(--tw-text-opacity))}.chroma .gl{text-decoration:underline}.relative{position:relative}.m-auto{margin:auto}.m-1{margin:.25rem}.-mx-2{margin-left:-.5rem;margin-right:-.5rem}.my-3{margin-top:.75rem;margin-bottom:.75rem}.mx-1{margin-left:.25rem;margin-right:.25rem}.mb-3{margin-bottom:.75rem}.mt-8{margin-top:2rem}.mb-12{margin-bottom:3rem}.mt-12{margin-top:3rem}.mt-10{margin-top:2.5rem}.mt-0{margin-top:0}.mt-6{margin-top:1.5rem}.mr-3{margin-right:.75rem}.-mt-1{margin-top:-.25rem}.ml-3{margin-left:.75rem}.\!mt-0{margin-top:0!important}.\!mb-0{margin-bottom:0!important}.mr-4{margin-right:1rem}.ml-1{margin-left:.25rem}.mb-1{margin-bottom:.25rem}.\!mb-9{margin-bottom:2.25rem!important}.mb-2{margin-bottom:.5rem}.mt-1{margin-top:.25rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.hidden{display:none}.h-screen{height:100vh}.h-24{height:6rem}.h-full{height:100%}.h-36{height:9rem}.w-36{width:9rem}.w-full{width:100%}.w-24{width:6rem}.min-w-\[1\.8rem\]{min-width:1.8rem}.min-w-\[2\.4rem\]{min-width:2.4rem}.max-w-7xl{max-width:80rem}.max-w-prose{max-width:65ch}.max-w-full{max-width:100%}.flex-grow{flex-grow:1}.cursor-default{cursor:default}.list-none{list-style-type:none}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.overflow-hidden{overflow:hidden}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.rounded{border-radius:.25rem}.\!rounded-md{border-radius:.375rem!important}.border{border-width:1px}.border-t{border-top-width:1px}.border-dotted{border-style:dotted}.border-gray-400{--tw-border-opacity:1;border-color:rgba(161,161,170,var(--tw-border-opacity))}.border-gray-300{--tw-border-opacity:1;border-color:rgba(212,212,216,var(--tw-border-opacity))}.border-primary-400{--tw-border-opacity:1;border-color:rgba(167,139,250,var(--tw-border-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgba(255,255,255,var(--tw-bg-opacity))}.bg-primary-200{--tw-bg-opacity:1;background-color:rgba(221,214,254,var(--tw-bg-opacity))}.bg-gray-300{--tw-bg-opacity:1;background-color:rgba(212,212,216,var(--tw-bg-opacity))}.bg-primary-100{--tw-bg-opacity:1;background-color:rgba(237,233,254,var(--tw-bg-opacity))}.bg-primary-600{--tw-bg-opacity:1;background-color:rgba(124,58,237,var(--tw-bg-opacity))}.p-1{padding:.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-1{padding-left:.25rem;padding-right:.25rem}.py-\[1px\]{padding-top:1px;padding-bottom:1px}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.px-4{padding-left:1rem;padding-right:1rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.pl-2{padding-left:.5rem}.pt-8{padding-top:2rem}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.pr-3{padding-right:.75rem}.text-center{text-align:center}.text-right{text-align:right}.align-middle{vertical-align:middle}.align-text-bottom{vertical-align:text-bottom}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-base{font-size:1rem;line-height:1.5rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.text-\[0\.6rem\]{font-size:.6rem}.font-extrabold{font-weight:800}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-normal{font-weight:400}.uppercase{text-transform:uppercase}.leading-7{line-height:1.75rem}.leading-3{line-height:.75rem}.leading-6{line-height:1.5rem}.text-gray-400{--tw-text-opacity:1;color:rgba(161,161,170,var(--tw-text-opacity))}.text-primary-500{--tw-text-opacity:1;color:rgba(139,92,246,var(--tw-text-opacity))}.text-gray-800{--tw-text-opacity:1;color:rgba(39,39,42,var(--tw-text-opacity))}.text-primary-700{--tw-text-opacity:1;color:rgba(109,40,217,var(--tw-text-opacity))}.text-gray-300{--tw-text-opacity:1;color:rgba(212,212,216,var(--tw-text-opacity))}.text-gray-700{--tw-text-opacity:1;color:rgba(63,63,70,var(--tw-text-opacity))}.text-primary-400{--tw-text-opacity:1;color:rgba(167,139,250,var(--tw-text-opacity))}.\!text-white{--tw-text-opacity:1!important;color:rgba(255,255,255,var(--tw-text-opacity))!important}.\!no-underline{text-decoration:none!important}.underline-gray-300{-webkit-text-decoration-color:#d4d4d8;text-decoration-color:#d4d4d8}.underline-primary-300{-webkit-text-decoration-color:#c4b5fd;text-decoration-color:#c4b5fd}.underline-primary-500{-webkit-text-decoration-color:#8b5cf6;text-decoration-color:#8b5cf6}.underline-offset-small{text-underline-offset:2px}.underline-thickness-bold{text-decoration-thickness:2px}.first\:mt-8:first-child{margin-top:2rem}.hover\:bg-primary-600:hover{--tw-bg-opacity:1;background-color:rgba(124,58,237,var(--tw-bg-opacity))}.hover\:bg-primary-500:hover{--tw-bg-opacity:1;background-color:rgba(139,92,246,var(--tw-bg-opacity))}.hover\:\!bg-primary-500:hover{--tw-bg-opacity:1!important;background-color:rgba(139,92,246,var(--tw-bg-opacity))!important}.hover\:text-primary-700:hover{--tw-text-opacity:1;color:rgba(109,40,217,var(--tw-text-opacity))}.hover\:text-primary-400:hover{--tw-text-opacity:1;color:rgba(167,139,250,var(--tw-text-opacity))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgba(255,255,255,var(--tw-text-opacity))}.hover\:underline:hover{text-decoration:underline}@media (prefers-color-scheme:dark){.dark\:prose-light{color:#a1a1aa}.dark\:prose-light a{color:#a78bfa;-webkit-text-decoration-color:#71717a;text-decoration-color:#71717a}.dark\:prose-light strong{color:#fff}.dark\:prose-light ol>li:before{color:#a1a1aa}.dark\:prose-light ul>li:before{background-color:#52525b}.dark\:prose-light hr{border-color:#e4e4e7}.dark\:prose-light blockquote{color:#e4e4e7;border-left-color:#4c1d95}.dark\:prose-light h1,.dark\:prose-light h2,.dark\:prose-light h3,.dark\:prose-light h4{color:#fff}.dark\:prose-light figure figcaption{color:#a1a1aa}.dark\:prose-light code{color:#e879f9}.dark\:prose-light a code{color:#fff}.dark\:prose-light pre{color:#e4e4e7;background-color:#3f3f46}.dark\:prose-light pre code{color:#e4e4e7}.dark\:prose-light thead{color:#fff;border-bottom-color:#a1a1aa}.dark\:prose-light tbody tr{border-bottom-color:#52525b}.dark\:prose-light kbd{background-color:#3f3f46;color:#d4d4d8}.dark\:prose-light mark{background-color:#e879f9}.dark\:border-gray-600{--tw-border-opacity:1;border-color:rgba(82,82,91,var(--tw-border-opacity))}.dark\:border-primary-600{--tw-border-opacity:1;border-color:rgba(124,58,237,var(--tw-border-opacity))}.dark\:bg-gray-800{--tw-bg-opacity:1;background-color:rgba(39,39,42,var(--tw-bg-opacity))}.dark\:bg-primary-400{--tw-bg-opacity:1;background-color:rgba(167,139,250,var(--tw-bg-opacity))}.dark\:bg-gray-700{--tw-bg-opacity:1;background-color:rgba(63,63,70,var(--tw-bg-opacity))}.dark\:bg-primary-900{--tw-bg-opacity:1;background-color:rgba(76,29,149,var(--tw-bg-opacity))}.dark\:bg-primary-800{--tw-bg-opacity:1;background-color:rgba(91,33,182,var(--tw-bg-opacity))}.dark\:text-gray-500{--tw-text-opacity:1;color:rgba(113,113,122,var(--tw-text-opacity))}.dark\:text-white{--tw-text-opacity:1;color:rgba(255,255,255,var(--tw-text-opacity))}.dark\:text-gray-300{--tw-text-opacity:1;color:rgba(212,212,216,var(--tw-text-opacity))}.dark\:text-primary-400{--tw-text-opacity:1;color:rgba(167,139,250,var(--tw-text-opacity))}.dark\:text-gray-600{--tw-text-opacity:1;color:rgba(82,82,91,var(--tw-text-opacity))}.dark\:text-gray-800{--tw-text-opacity:1;color:rgba(39,39,42,var(--tw-text-opacity))}.dark\:underline-gray-600{-webkit-text-decoration-color:#52525b;text-decoration-color:#52525b}.dark\:hover\:bg-primary-400:hover{--tw-bg-opacity:1;background-color:rgba(167,139,250,var(--tw-bg-opacity))}.dark\:hover\:\!bg-primary-700:hover{--tw-bg-opacity:1!important;background-color:rgba(109,40,217,var(--tw-bg-opacity))!important}.dark\:hover\:text-primary-400:hover{--tw-text-opacity:1;color:rgba(167,139,250,var(--tw-text-opacity))}.dark\:hover\:text-gray-800:hover{--tw-text-opacity:1;color:rgba(39,39,42,var(--tw-text-opacity))}}@media (min-width:640px){.sm\:mr-7{margin-right:1.75rem}.sm\:w-1\/2{width:50%}.sm\:flex-row{flex-direction:row}.sm\:px-14{padding-left:3.5rem;padding-right:3.5rem}.sm\:py-10{padding-top:2.5rem;padding-bottom:2.5rem}.sm\:last\:mr-0:last-child{margin-right:0}}@media (min-width:768px){.md\:w-1\/3{width:33.333333%}.md\:px-24{padding-left:6rem;padding-right:6rem}}@media (min-width:1024px){.lg\:w-1\/4{width:25%}.lg\:px-32{padding-left:8rem;padding-right:8rem}}@media (min-width:1280px){.xl\:w-1\/5{width:20%}}
\ No newline at end of file
+/*! tailwindcss v2.2.7 | MIT License | https://tailwindcss.com*//*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */html{-moz-tab-size:4;-o-tab-size:4;tab-size:4;line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji}hr{height:0;color:inherit}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}legend{padding:0}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}button{background-color:initial;background-image:none}fieldset,ol,ul{margin:0;padding:0}ol,ul{list-style:none}html{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}body{font-family:inherit;line-height:inherit}*,:after,:before{box-sizing:border-box;border:0 solid}hr{border-top-width:1px}img{border-style:solid}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#a1a1aa}input:-ms-input-placeholder,textarea:-ms-input-placeholder{opacity:1;color:#a1a1aa}input::placeholder,textarea::placeholder{opacity:1;color:#a1a1aa}[role=button],button{cursor:pointer}table{border-collapse:collapse}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}button,input,optgroup,select,textarea{padding:0;line-height:inherit;color:inherit}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:after,:before{border-color:currentColor}.prose{color:var(--color-neutral-700);max-width:65ch}.prose [class~=lead]{color:#4b5563;font-size:1.25em;line-height:1.6;margin-top:1.2em;margin-bottom:1.2em}.prose a{color:var(--color-primary-700);text-decoration:underline;font-weight:500;-webkit-text-decoration-color:var(--color-primary-300);text-decoration-color:var(--color-primary-300)}.prose a:hover{background-color:var(--color-primary-600);border-radius:.09rem;color:var(--color-neutral);text-decoration:none}.prose strong{color:var(--color-neutral-900);font-weight:600}.prose ol[type=A]{--list-counter-style:upper-alpha}.prose ol[type=a]{--list-counter-style:lower-alpha}.prose ol[type=A s]{--list-counter-style:upper-alpha}.prose ol[type=a s]{--list-counter-style:lower-alpha}.prose ol[type=I]{--list-counter-style:upper-roman}.prose ol[type=i]{--list-counter-style:lower-roman}.prose ol[type=I s]{--list-counter-style:upper-roman}.prose ol[type=i s]{--list-counter-style:lower-roman}.prose ol[type="1"]{--list-counter-style:decimal}.prose ol>li{position:relative;padding-left:1.75em}.prose ol>li:before{content:counter(list-item,var(--list-counter-style,decimal)) ".";position:absolute;font-weight:400;color:var(--color-neutral-800);left:0}.prose ul>li{position:relative;padding-left:1.75em}.prose ul>li:before{content:"";position:absolute;background-color:var(--color-neutral-500);border-radius:50%;width:.375em;height:.375em;top:.6875em;left:.25em}.prose hr{border-color:var(--color-neutral-200);border-top-width:1px;margin-top:3em;margin-bottom:3em}.prose blockquote{font-weight:500;font-style:italic;color:var(--color-neutral-800);border-left-width:.25rem;border-left-color:var(--color-primary-200);quotes:"\201C""\201D""\2018""\2019";margin-top:1.6em;margin-bottom:1.6em;padding-left:1em}.prose blockquote p:first-of-type:before{content:open-quote}.prose blockquote p:last-of-type:after{content:close-quote}.prose h1{font-weight:800;font-size:2.25em;margin-top:0;margin-bottom:.8888889em;line-height:1.1111111}.prose h1,.prose h2{color:var(--color-neutral-800);position:relative}.prose h2{font-weight:700;font-size:1.5em;margin-top:2em;margin-bottom:1em;line-height:1.3333333}.prose h3{font-size:1.25em;margin-top:1.6em;margin-bottom:.6em;line-height:1.6}.prose h3,.prose h4{color:var(--color-neutral-800);font-weight:600;position:relative}.prose h4{margin-top:1.5em;margin-bottom:.5em;line-height:1.5}.prose figure figcaption{color:#6b7280;font-size:.875em;line-height:1.4285714;margin-top:.8571429em}.prose code{color:var(--color-secondary-700);font-weight:600;font-size:.875em}.prose code:after,.prose code:before{content:"`"}.prose a code{color:#111827}.prose pre{color:var(--color-neutral-700);background-color:var(--color-neutral-50);overflow-x:auto;font-size:.875em;line-height:1.7142857;margin-top:1.7142857em;margin-bottom:1.7142857em;border-radius:.375rem;padding:.8571429em 1.1428571em}.prose pre code{background-color:initial;border-width:0;border-radius:0;padding:0;font-weight:400;color:var(--color-neutral-700);font-size:inherit;font-family:inherit;line-height:inherit}.prose pre code:after,.prose pre code:before{content:none}.prose table{width:100%;table-layout:auto;text-align:left;margin-top:2em;margin-bottom:2em;font-size:.875em;line-height:1.7142857}.prose thead{color:var(--color-neutral-800);font-weight:600;border-bottom-width:1px;border-bottom-color:var(--color-neutral-500)}.prose thead th{vertical-align:bottom;padding-right:.5714286em;padding-bottom:.5714286em;padding-left:.5714286em}.prose tbody tr{border-bottom-width:1px;border-bottom-color:var(--color-neutral-300)}.prose tbody tr:last-child{border-bottom-width:0}.prose tbody td{vertical-align:top;padding:.5714286em}.prose{font-size:1rem;line-height:1.75}.prose p{margin-top:1.25em;margin-bottom:1.25em}.prose figure,.prose img,.prose video{margin-top:2em;margin-bottom:2em}.prose figure>*{margin-top:0;margin-bottom:0}.prose h2 code{font-size:.875em}.prose h3 code{font-size:.9em}.prose ol,.prose ul{margin-top:1.25em;margin-bottom:1.25em}.prose li{margin-top:.5em;margin-bottom:.5em}.prose>ul>li p{margin-top:.75em;margin-bottom:.75em}.prose>ul>li>:first-child{margin-top:1.25em}.prose>ul>li>:last-child{margin-bottom:1.25em}.prose>ol>li>:first-child{margin-top:1.25em}.prose>ol>li>:last-child{margin-bottom:1.25em}.prose ol ol,.prose ol ul,.prose ul ol,.prose ul ul{margin-top:.75em;margin-bottom:.75em}.prose h2+*,.prose h3+*,.prose h4+*,.prose hr+*{margin-top:0}.prose thead th:first-child{padding-left:0}.prose thead th:last-child{padding-right:0}.prose tbody td:first-child{padding-left:0}.prose tbody td:last-child{padding-right:0}.prose>:first-child{margin-top:0}.prose>:last-child{margin-bottom:0}.prose kbd{background-color:var(--color-neutral-200);padding:.1rem .4rem;border-radius:.25rem;font-size:.9rem;font-weight:600}.prose mark{background-color:var(--color-secondary-200);padding:.1rem .2rem;border-radius:.12rem}body a,body button{transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.icon svg{height:1em;width:1em}.prose .heading-anchor{position:absolute;top:0;text-decoration:none;opacity:0;width:1.1em;left:-1.1em}.prose .heading-anchor:hover{background-color:initial;color:var(--color-primary-600);text-decoration:underline}.prose .heading-anchor:focus,.prose .heading-anchor:hover,.prose h2:hover>.heading-anchor,.prose h3:hover>.heading-anchor,.prose h4:hover>.heading-anchor{opacity:1}.no-prose>p{margin-top:0}.no-prose>p:last-child{margin-bottom:0}.article-pagination a:hover .article-pagination-title{text-decoration:underline;-webkit-text-decoration-color:var(--color-primary-500);text-decoration-color:var(--color-primary-500)}.article-pagination a:hover .article-pagination-direction{color:var(--color-primary-700)}@media (prefers-color-scheme:dark){.article-pagination a:hover .article-pagination-direction{color:var(--color-primary-400)}}.prose .chroma{border-radius:.375rem;background-color:var(--color-neutral-50);color:var(--color-neutral-700)}@media (prefers-color-scheme:dark){.prose .chroma{background-color:var(--color-neutral-700);color:var(--color-neutral-200)}}.chroma .lntd,.chroma .lntd pre{margin:0;border-style:none;padding:0;vertical-align:top}.chroma .lntable{display:block;width:auto;overflow:hidden;padding:.75rem 1rem;font-size:1rem;line-height:1.5rem;border-spacing:0}.chroma .hl{margin-left:-1rem;margin-right:-1rem;display:block;width:auto;background-color:var(--color-primary-100);padding-left:1rem;padding-right:1rem}@media (prefers-color-scheme:dark){.chroma .hl{background-color:var(--color-primary-900)}}.chroma .lntd .hl{margin:0;padding:0}.chroma .lnt{color:var(--color-neutral-600)}@media (prefers-color-scheme:dark){.chroma .lnt{color:var(--color-neutral-300)}}.chroma .lnt{margin-right:.4em;padding:0 .4em}.chroma .ln{color:var(--color-neutral-600)}@media (prefers-color-scheme:dark){.chroma .ln{color:var(--color-neutral-300)}}.chroma .ln{margin-right:.4em;padding:0 .4em}.chroma .k{color:var(--color-primary-600)}@media (prefers-color-scheme:dark){.chroma .k{color:var(--color-primary-300)}}.chroma .kc{font-weight:600;color:var(--color-secondary-400)}@media (prefers-color-scheme:dark){.chroma .kc{color:var(--color-secondary-500)}}.chroma .kd{color:var(--color-primary-600)}@media (prefers-color-scheme:dark){.chroma .kd{color:var(--color-primary-300)}}.chroma .kn{color:var(--color-primary-600)}@media (prefers-color-scheme:dark){.chroma .kn{color:var(--color-primary-300)}}.chroma .kp{color:var(--color-primary-600)}@media (prefers-color-scheme:dark){.chroma .kp{color:var(--color-primary-300)}}.chroma .kr{color:var(--color-primary-600)}@media (prefers-color-scheme:dark){.chroma .kr{color:var(--color-primary-300)}}.chroma .kt{color:var(--color-secondary-400)}@media (prefers-color-scheme:dark){.chroma .kt{color:var(--color-secondary-600)}}.chroma .n{color:var(--color-secondary-900)}@media (prefers-color-scheme:dark){.chroma .n{color:var(--color-secondary-200)}}.chroma .na{color:var(--color-secondary-800)}@media (prefers-color-scheme:dark){.chroma .na{color:var(--color-secondary-300)}}.chroma .nb{color:var(--color-secondary-800)}@media (prefers-color-scheme:dark){.chroma .nb{color:var(--color-secondary-300)}}.chroma .bp{color:var(--color-secondary-800)}@media (prefers-color-scheme:dark){.chroma .bp{color:var(--color-secondary-300)}}.chroma .nc{color:var(--color-primary-600)}@media (prefers-color-scheme:dark){.chroma .nc{color:var(--color-primary-300)}}.chroma .no{font-weight:600;color:var(--color-secondary-400)}@media (prefers-color-scheme:dark){.chroma .no{color:var(--color-secondary-500)}}.chroma .nd{color:var(--color-secondary-900)}@media (prefers-color-scheme:dark){.chroma .nd{color:var(--color-secondary-200)}}.chroma .ni{color:var(--color-secondary-900)}@media (prefers-color-scheme:dark){.chroma .ni{color:var(--color-secondary-200)}}.chroma .ne{font-weight:600;color:var(--color-secondary-400)}@media (prefers-color-scheme:dark){.chroma .ne{color:var(--color-secondary-500)}}.chroma .nf{color:var(--color-secondary-600)}@media (prefers-color-scheme:dark){.chroma .nf{color:var(--color-secondary-500)}}.chroma .fm{color:var(--color-primary-600)}@media (prefers-color-scheme:dark){.chroma .fm{color:var(--color-primary-300)}}.chroma .nl{color:var(--color-secondary-900)}@media (prefers-color-scheme:dark){.chroma .nl{color:var(--color-secondary-200)}}.chroma .nn{color:var(--color-primary-600)}@media (prefers-color-scheme:dark){.chroma .nn{color:var(--color-primary-300)}}.chroma .nx{color:var(--color-secondary-800)}@media (prefers-color-scheme:dark){.chroma .nx{color:var(--color-secondary-300)}}.chroma .py{color:#cebc3a}.chroma .nt{color:var(--color-secondary-800)}@media (prefers-color-scheme:dark){.chroma .nt{color:var(--color-secondary-300)}}.chroma .nv{color:var(--color-secondary-400)}@media (prefers-color-scheme:dark){.chroma .nv{color:var(--color-secondary-600)}}.chroma .vc{color:var(--color-primary-600)}@media (prefers-color-scheme:dark){.chroma .vc{color:var(--color-primary-300)}}.chroma .vg{font-weight:600;color:var(--color-secondary-400)}@media (prefers-color-scheme:dark){.chroma .vg{color:var(--color-secondary-500)}}.chroma .vi{color:var(--color-secondary-400)}@media (prefers-color-scheme:dark){.chroma .vi{color:var(--color-secondary-600)}}.chroma .vm{color:var(--color-secondary-400)}@media (prefers-color-scheme:dark){.chroma .vm{color:var(--color-secondary-600)}}.chroma .l{color:var(--color-primary-800)}@media (prefers-color-scheme:dark){.chroma .l{color:var(--color-primary-400)}}.chroma .ld{color:var(--color-primary-800)}@media (prefers-color-scheme:dark){.chroma .ld{color:var(--color-primary-400)}}.chroma .s{color:var(--color-primary-800)}@media (prefers-color-scheme:dark){.chroma .s{color:var(--color-primary-400)}}.chroma .sa{color:var(--color-primary-800)}@media (prefers-color-scheme:dark){.chroma .sa{color:var(--color-primary-400)}}.chroma .sb{color:var(--color-primary-800)}@media (prefers-color-scheme:dark){.chroma .sb{color:var(--color-primary-400)}}.chroma .sc{color:var(--color-primary-800)}@media (prefers-color-scheme:dark){.chroma .sc{color:var(--color-primary-400)}}.chroma .dl{color:var(--color-primary-800)}@media (prefers-color-scheme:dark){.chroma .dl{color:var(--color-primary-400)}}.chroma .sd{color:var(--color-primary-800)}@media (prefers-color-scheme:dark){.chroma .sd{color:var(--color-primary-400)}}.chroma .s2{color:var(--color-primary-800)}@media (prefers-color-scheme:dark){.chroma .s2{color:var(--color-primary-400)}}.chroma .se{font-weight:600;color:var(--color-secondary-400)}@media (prefers-color-scheme:dark){.chroma .se{color:var(--color-secondary-500)}}.chroma .sh{color:var(--color-primary-800)}@media (prefers-color-scheme:dark){.chroma .sh{color:var(--color-primary-400)}}.chroma .si{color:var(--color-primary-800)}@media (prefers-color-scheme:dark){.chroma .si{color:var(--color-primary-400)}}.chroma .sx{color:var(--color-primary-800)}@media (prefers-color-scheme:dark){.chroma .sx{color:var(--color-primary-400)}}.chroma .sr{font-weight:600;color:var(--color-primary-800)}@media (prefers-color-scheme:dark){.chroma .sr{color:var(--color-primary-400)}}.chroma .s1{color:var(--color-primary-800)}@media (prefers-color-scheme:dark){.chroma .s1{color:var(--color-primary-400)}}.chroma .ss{font-weight:600;color:var(--color-primary-800)}@media (prefers-color-scheme:dark){.chroma .ss{color:var(--color-primary-400)}}.chroma .m{color:var(--color-secondary-400)}@media (prefers-color-scheme:dark){.chroma .m{color:var(--color-secondary-600)}}.chroma .mb{color:var(--color-secondary-400)}@media (prefers-color-scheme:dark){.chroma .mb{color:var(--color-secondary-600)}}.chroma .mf{color:var(--color-secondary-400)}@media (prefers-color-scheme:dark){.chroma .mf{color:var(--color-secondary-600)}}.chroma .mh{color:var(--color-secondary-400)}@media (prefers-color-scheme:dark){.chroma .mh{color:var(--color-secondary-600)}}.chroma .mi{color:var(--color-secondary-400)}@media (prefers-color-scheme:dark){.chroma .mi{color:var(--color-secondary-600)}}.chroma .il{color:var(--color-secondary-400)}@media (prefers-color-scheme:dark){.chroma .il{color:var(--color-secondary-600)}}.chroma .mo{color:var(--color-secondary-400)}@media (prefers-color-scheme:dark){.chroma .mo{color:var(--color-secondary-600)}}.chroma .o{color:var(--color-primary-600)}.chroma .ow{font-weight:600;color:var(--color-primary-400)}@media (prefers-color-scheme:dark){.chroma .ow{color:var(--color-primary-600)}}.chroma .c{font-style:italic;color:var(--color-neutral-400)}@media (prefers-color-scheme:dark){.chroma .c{color:var(--color-neutral-500)}}.chroma .ch{font-weight:600;font-style:italic;color:var(--color-neutral-400)}@media (prefers-color-scheme:dark){.chroma .ch{color:var(--color-neutral-500)}}.chroma .cm{font-style:italic;color:var(--color-neutral-400)}@media (prefers-color-scheme:dark){.chroma .cm{color:var(--color-neutral-500)}}.chroma .c1{font-style:italic;color:var(--color-neutral-400)}@media (prefers-color-scheme:dark){.chroma .c1{color:var(--color-neutral-500)}}.chroma .cs{font-style:italic;color:var(--color-neutral-400)}@media (prefers-color-scheme:dark){.chroma .cs{color:var(--color-neutral-500)}}.chroma .cp{font-style:italic;color:var(--color-neutral-400)}@media (prefers-color-scheme:dark){.chroma .cp{color:var(--color-neutral-500)}}.chroma .cpf{font-style:italic;color:var(--color-neutral-400)}@media (prefers-color-scheme:dark){.chroma .cpf{color:var(--color-neutral-500)}}.chroma .ge{font-style:italic}.chroma .gh{font-weight:600;color:var(--color-neutral-500)}.chroma .gi{color:var(--color-primary-800)}@media (prefers-color-scheme:dark){.chroma .gi{color:var(--color-primary-400)}}.chroma .go{color:var(--color-primary-800)}@media (prefers-color-scheme:dark){.chroma .go{color:var(--color-primary-400)}}.chroma .gp{color:var(--color-primary-800)}@media (prefers-color-scheme:dark){.chroma .gp{color:var(--color-primary-400)}}.chroma .gs{font-weight:600}.chroma .gt,.chroma .gu{color:var(--color-neutral-500)}.chroma .gl{text-decoration:underline}.relative{position:relative}.m-auto{margin:auto}.m-1{margin:.25rem}.-mx-2{margin-left:-.5rem;margin-right:-.5rem}.my-3{margin-top:.75rem;margin-bottom:.75rem}.mx-1{margin-left:.25rem;margin-right:.25rem}.mb-3{margin-bottom:.75rem}.mt-8{margin-top:2rem}.mb-12{margin-bottom:3rem}.mt-12{margin-top:3rem}.mt-10{margin-top:2.5rem}.mt-0{margin-top:0}.mt-6{margin-top:1.5rem}.mr-3{margin-right:.75rem}.-mt-1{margin-top:-.25rem}.ml-3{margin-left:.75rem}.\!mt-0{margin-top:0!important}.\!mb-0{margin-bottom:0!important}.mr-4{margin-right:1rem}.ml-1{margin-left:.25rem}.mb-1{margin-bottom:.25rem}.\!mb-9{margin-bottom:2.25rem!important}.mb-2{margin-bottom:.5rem}.mt-1{margin-top:.25rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.hidden{display:none}.h-screen{height:100vh}.h-24{height:6rem}.h-full{height:100%}.h-36{height:9rem}.w-36{width:9rem}.w-full{width:100%}.w-24{width:6rem}.min-w-\[1\.8rem\]{min-width:1.8rem}.min-w-\[2\.4rem\]{min-width:2.4rem}.max-w-7xl{max-width:80rem}.max-w-prose{max-width:65ch}.max-w-full{max-width:100%}.flex-grow{flex-grow:1}.cursor-default{cursor:default}.list-none{list-style-type:none}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.overflow-hidden{overflow:hidden}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.rounded{border-radius:.25rem}.\!rounded-md{border-radius:.375rem!important}.border{border-width:1px}.border-t{border-top-width:1px}.border-dotted{border-style:dotted}.border-neutral-400{border-color:var(--color-neutral-400)}.border-neutral-300{border-color:var(--color-neutral-300)}.border-primary-400{border-color:var(--color-primary-400)}.bg-neutral{background-color:var(--color-neutral)}.bg-primary-200{background-color:var(--color-primary-200)}.bg-neutral-300{background-color:var(--color-neutral-300)}.bg-primary-100{background-color:var(--color-primary-100)}.bg-primary-600{background-color:var(--color-primary-600)}.p-1{padding:.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-1{padding-left:.25rem;padding-right:.25rem}.py-\[1px\]{padding-top:1px;padding-bottom:1px}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.px-4{padding-left:1rem;padding-right:1rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.pl-2{padding-left:.5rem}.pt-8{padding-top:2rem}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.pr-3{padding-right:.75rem}.text-center{text-align:center}.text-right{text-align:right}.align-middle{vertical-align:middle}.align-text-bottom{vertical-align:text-bottom}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-base{font-size:1rem;line-height:1.5rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.text-\[0\.6rem\]{font-size:.6rem}.font-extrabold{font-weight:800}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-normal{font-weight:400}.uppercase{text-transform:uppercase}.leading-7{line-height:1.75rem}.leading-3{line-height:.75rem}.leading-6{line-height:1.5rem}.text-neutral-400{color:var(--color-neutral-400)}.text-neutral-900{color:var(--color-neutral-900)}.text-neutral-800{color:var(--color-neutral-800)}.text-primary-500{color:var(--color-primary-500)}.text-primary-700{color:var(--color-primary-700)}.text-neutral-300{color:var(--color-neutral-300)}.text-neutral-700{color:var(--color-neutral-700)}.text-primary-400{color:var(--color-primary-400)}.\!text-neutral{color:var(--color-neutral)!important}.\!no-underline{text-decoration:none!important}.first\:mt-8:first-child{margin-top:2rem}.hover\:bg-primary-600:hover{background-color:var(--color-primary-600)}.hover\:bg-primary-500:hover{background-color:var(--color-primary-500)}.hover\:\!bg-primary-500:hover{background-color:var(--color-primary-500)!important}.hover\:text-primary-700:hover{color:var(--color-primary-700)}.hover\:text-primary-400:hover{color:var(--color-primary-400)}.hover\:text-neutral:hover{color:var(--color-neutral)}.hover\:underline:hover{text-decoration:underline}.hover\:underline-neutral-300:hover{-webkit-text-decoration-color:var(--color-neutral-300);text-decoration-color:var(--color-neutral-300)}.hover\:underline-primary-300:hover{-webkit-text-decoration-color:var(--color-primary-300);text-decoration-color:var(--color-primary-300)}.hover\:underline-primary-500:hover{-webkit-text-decoration-color:var(--color-primary-500);text-decoration-color:var(--color-primary-500)}.hover\:underline-offset-small:hover{text-underline-offset:2px}.hover\:underline-thickness-bold:hover{text-decoration-thickness:2px}@media (prefers-color-scheme:dark){.dark\:prose-light{color:var(--color-neutral-400)}.dark\:prose-light a{color:var(--color-primary-400);-webkit-text-decoration-color:var(--color-neutral-500);text-decoration-color:var(--color-neutral-500)}.dark\:prose-light strong{color:var(--color-neutral)}.dark\:prose-light ol>li:before{color:var(--color-neutral-400)}.dark\:prose-light ul>li:before{background-color:var(--color-neutral-600)}.dark\:prose-light hr{border-color:var(--color-neutral-500)}.dark\:prose-light blockquote{color:var(--color-neutral-200);border-left-color:var(--color-primary-900)}.dark\:prose-light h1,.dark\:prose-light h2,.dark\:prose-light h3,.dark\:prose-light h4{color:var(--color-neutral)}.dark\:prose-light figure figcaption{color:var(--color-neutral-400)}.dark\:prose-light code{color:var(--color-secondary-400)}.dark\:prose-light a code{color:var(--color-neutral)}.dark\:prose-light pre{background-color:var(--color-neutral-700)}.dark\:prose-light pre,.dark\:prose-light pre code{color:var(--color-neutral-200)}.dark\:prose-light thead{color:var(--color-neutral);border-bottom-color:var(--color-neutral-500)}.dark\:prose-light tbody tr{border-bottom-color:var(--color-neutral-700)}.dark\:prose-light kbd{background-color:var(--color-neutral-700);color:var(--color-neutral-300)}.dark\:prose-light mark{background-color:var(--color-secondary-400)}.dark\:border-neutral-600{border-color:var(--color-neutral-600)}.dark\:border-primary-600{border-color:var(--color-primary-600)}.dark\:bg-neutral-800{background-color:var(--color-neutral-800)}.dark\:bg-primary-400{background-color:var(--color-primary-400)}.dark\:bg-neutral-700{background-color:var(--color-neutral-700)}.dark\:bg-primary-900{background-color:var(--color-primary-900)}.dark\:bg-primary-800{background-color:var(--color-primary-800)}.dark\:text-neutral-500{color:var(--color-neutral-500)}.dark\:text-neutral{color:var(--color-neutral)}.dark\:text-neutral-300{color:var(--color-neutral-300)}.dark\:text-primary-400{color:var(--color-primary-400)}.dark\:text-neutral-600{color:var(--color-neutral-600)}.dark\:text-neutral-800{color:var(--color-neutral-800)}.dark\:underline-neutral-600{-webkit-text-decoration-color:var(--color-neutral-600);text-decoration-color:var(--color-neutral-600)}.dark\:hover\:bg-primary-400:hover{background-color:var(--color-primary-400)}.dark\:hover\:\!bg-primary-700:hover{background-color:var(--color-primary-700)!important}.dark\:hover\:text-primary-400:hover{color:var(--color-primary-400)}.dark\:hover\:text-neutral-800:hover{color:var(--color-neutral-800)}}@media (min-width:640px){.sm\:mr-7{margin-right:1.75rem}.sm\:w-1\/2{width:50%}.sm\:flex-row{flex-direction:row}.sm\:px-14{padding-left:3.5rem;padding-right:3.5rem}.sm\:py-10{padding-top:2.5rem;padding-bottom:2.5rem}.sm\:last\:mr-0:last-child{margin-right:0}}@media (min-width:768px){.md\:w-1\/3{width:33.333333%}.md\:px-24{padding-left:6rem;padding-right:6rem}}@media (min-width:1024px){.lg\:w-1\/4{width:25%}.lg\:px-32{padding-left:8rem;padding-right:8rem}}@media (min-width:1280px){.xl\:w-1\/5{width:20%}}
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index 812241bd..33f31476 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -14,10 +14,43 @@ module.exports = {
   theme: {
     colors: {
       transparent: "transparent",
-      white: colors.white,
-      gray: colors.gray,
-      primary: colors.violet,
-      secondary: colors.fuchsia,
+      neutral: {
+        DEFAULT: "var(--color-neutral)",
+        50: "var(--color-neutral-50)",
+        100: "var(--color-neutral-100)",
+        200: "var(--color-neutral-200)",
+        300: "var(--color-neutral-300)",
+        400: "var(--color-neutral-400)",
+        500: "var(--color-neutral-500)",
+        600: "var(--color-neutral-600)",
+        700: "var(--color-neutral-700)",
+        800: "var(--color-neutral-800)",
+        900: "var(--color-neutral-900)",
+      },
+      primary: {
+        50: "var(--color-primary-50)",
+        100: "var(--color-primary-100)",
+        200: "var(--color-primary-200)",
+        300: "var(--color-primary-300)",
+        400: "var(--color-primary-400)",
+        500: "var(--color-primary-500)",
+        600: "var(--color-primary-600)",
+        700: "var(--color-primary-700)",
+        800: "var(--color-primary-800)",
+        900: "var(--color-primary-900)",
+      },
+      secondary: {
+        50: "var(--color-secondary-50)",
+        100: "var(--color-secondary-100)",
+        200: "var(--color-secondary-200)",
+        300: "var(--color-secondary-300)",
+        400: "var(--color-secondary-400)",
+        500: "var(--color-secondary-500)",
+        600: "var(--color-secondary-600)",
+        700: "var(--color-secondary-700)",
+        800: "var(--color-secondary-800)",
+        900: "var(--color-secondary-900)",
+      },
     },
     underlineOffset: {
       small: "2px",
@@ -30,6 +63,7 @@ module.exports = {
         DEFAULT: {
           css: [
             {
+              color: theme("colors.neutral.700"),
               a: {
                 color: theme("colors.primary.700"),
                 textDecoration: "underline",
@@ -38,33 +72,64 @@ module.exports = {
                 "&:hover": {
                   backgroundColor: theme("colors.primary.600"),
                   borderRadius: "0.09rem",
-                  color: theme("colors.white"),
+                  color: theme("colors.neutral.DEFAULT"),
                   textDecoration: "none",
                 },
               },
+              strong: {
+                color: theme("colors.neutral.900"),
+              },
+              "ol > li::before": {
+                color: theme("colors.neutral.800"),
+              },
+              "ul > li::before": {
+                backgroundColor: theme("colors.neutral.500"),
+              },
+              hr: {
+                borderColor: theme("colors.neutral.200"),
+              },
               blockquote: {
+                color: theme("colors.neutral.800"),
                 borderLeftColor: theme("colors.primary.200"),
               },
+              h1: {
+                color: theme("colors.neutral.800"),
+                position: "relative",
+              },
               h2: {
+                color: theme("colors.neutral.800"),
                 position: "relative",
               },
               h3: {
+                color: theme("colors.neutral.800"),
                 position: "relative",
               },
               h4: {
+                color: theme("colors.neutral.800"),
                 position: "relative",
               },
               code: {
                 color: theme("colors.secondary.700"),
               },
               "pre code": {
-                color: theme("colors.gray.700"),
+                color: theme("colors.neutral.700"),
               },
               pre: {
-                backgroundColor: theme("colors.gray.50"),
+                color: theme("colors.neutral.700"),
+                backgroundColor: theme("colors.neutral.50"),
+              },
+              "pre code": {
+                color: theme("colors.neutral.700"),
+              },
+              thead: {
+                color: theme("colors.neutral.800"),
+                borderBottomColor: theme("colors.neutral.500"),
+              },
+              "tbody tr": {
+                borderBottomColor: theme("colors.neutral.300"),
               },
               kbd: {
-                backgroundColor: theme("colors.gray.200"),
+                backgroundColor: theme("colors.neutral.200"),
                 padding: "0.1rem 0.4rem",
                 borderRadius: "0.25rem",
                 fontSize: "0.9rem",
@@ -81,65 +146,65 @@ module.exports = {
         light: {
           css: [
             {
-              color: theme("colors.gray.400"),
+              color: theme("colors.neutral.400"),
               a: {
                 color: theme("colors.primary.400"),
-                textDecorationColor: theme("colors.gray.500"),
+                textDecorationColor: theme("colors.neutral.500"),
               },
               strong: {
-                color: theme("colors.white"),
+                color: theme("colors.neutral.DEFAULT"),
               },
               "ol > li::before": {
-                color: theme("colors.gray.400"),
+                color: theme("colors.neutral.400"),
               },
               "ul > li::before": {
-                backgroundColor: theme("colors.gray.600"),
+                backgroundColor: theme("colors.neutral.600"),
               },
               hr: {
-                borderColor: theme("colors.gray.200"),
+                borderColor: theme("colors.neutral.500"),
               },
               blockquote: {
-                color: theme("colors.gray.200"),
+                color: theme("colors.neutral.200"),
                 borderLeftColor: theme("colors.primary.900"),
               },
               h1: {
-                color: theme("colors.white"),
+                color: theme("colors.neutral.DEFAULT"),
               },
               h2: {
-                color: theme("colors.white"),
+                color: theme("colors.neutral.DEFAULT"),
               },
               h3: {
-                color: theme("colors.white"),
+                color: theme("colors.neutral.DEFAULT"),
               },
               h4: {
-                color: theme("colors.white"),
+                color: theme("colors.neutral.DEFAULT"),
               },
               "figure figcaption": {
-                color: theme("colors.gray.400"),
+                color: theme("colors.neutral.400"),
               },
               code: {
                 color: theme("colors.secondary.400"),
               },
               "a code": {
-                color: theme("colors.white"),
+                color: theme("colors.neutral.DEFAULT"),
               },
               pre: {
-                color: theme("colors.gray.200"),
-                backgroundColor: theme("colors.gray.700"),
+                color: theme("colors.neutral.200"),
+                backgroundColor: theme("colors.neutral.700"),
               },
               "pre code": {
-                color: theme("colors.gray.200"),
+                color: theme("colors.neutral.200"),
               },
               thead: {
-                color: theme("colors.white"),
-                borderBottomColor: theme("colors.gray.400"),
+                color: theme("colors.neutral.DEFAULT"),
+                borderBottomColor: theme("colors.neutral.500"),
               },
               "tbody tr": {
-                borderBottomColor: theme("colors.gray.600"),
+                borderBottomColor: theme("colors.neutral.700"),
               },
               kbd: {
-                backgroundColor: theme("colors.gray.700"),
-                color: theme("colors.gray.300"),
+                backgroundColor: theme("colors.neutral.700"),
+                color: theme("colors.neutral.300"),
               },
               mark: {
                 backgroundColor: theme("colors.secondary.400"),