diff --git a/assets/css/callouts.css b/assets/css/callouts.css
index 23be1b909f..12bab2b8aa 100644
--- a/assets/css/callouts.css
+++ b/assets/css/callouts.css
@@ -5,46 +5,48 @@
  *
  * */
 
-.prose blockquote {
-  @apply bg-blue-light-100 py-4 px-6 font-normal not-italic dark:bg-blue-dark-100;
-  quotes: none;
-  > *:first-child {
-    @apply relative ml-6 mt-0 before:absolute before:-left-6 before:font-icons before:content-['info'];
-  }
-  *:last-child {
-    @apply mb-0 after:content-none;
-  }
-
-  &.warning {
-    @apply border-l-red-light bg-red-light-100 dark:border-l-red-dark dark:bg-red-dark-100;
+@layer components {
+  .prose blockquote {
+    @apply bg-blue-light-100 px-6 py-4 font-normal not-italic dark:bg-blue-dark-100;
+    quotes: none;
     > *:first-child {
-      @apply before:content-['dangerous'];
+      @apply relative ml-6 mt-0 before:absolute before:-left-6 before:font-icons before:content-['info'];
     }
-  }
-
-  &.important {
-    @apply border-l-amber-light bg-amber-light-100 dark:border-l-amber-dark dark:bg-amber-dark-100;
-    > *:first-child {
-      @apply before:content-['warning'];
+    *:last-child {
+      @apply mb-0 after:content-none;
     }
-  }
 
-  &.tip {
-    @apply border-l-green-light bg-green-light-100 dark:border-l-green-dark dark:bg-green-dark-100;
-    > *:first-child {
-      @apply before:content-['lightbulb'];
+    &.warning {
+      @apply border-l-red-light bg-red-light-100 dark:border-l-red-dark dark:bg-red-dark-100;
+      > *:first-child {
+        @apply before:content-['dangerous'];
+      }
     }
-  }
 
-  &.experimental {
-    > *:first-child {
-      @apply before:content-['science'];
+    &.important {
+      @apply border-l-amber-light bg-amber-light-100 dark:border-l-amber-dark dark:bg-amber-dark-100;
+      > *:first-child {
+        @apply before:content-['warning'];
+      }
     }
-  }
-  &.restricted {
-    @apply border-l-violet-light bg-violet-light-100 dark:border-l-violet-dark dark:bg-violet-dark-100;
-    > *:first-child {
-      @apply before:content-['rocket\_launch'];
+
+    &.tip {
+      @apply border-l-green-light bg-green-light-100 dark:border-l-green-dark dark:bg-green-dark-100;
+      > *:first-child {
+        @apply before:content-['lightbulb'];
+      }
+    }
+
+    &.experimental {
+      > *:first-child {
+        @apply before:content-['science'];
+      }
+    }
+    &.restricted {
+      @apply border-l-violet-light bg-violet-light-100 dark:border-l-violet-dark dark:bg-violet-dark-100;
+      > *:first-child {
+        @apply before:content-['rocket\_launch'];
+      }
     }
   }
 }
diff --git a/assets/css/code.css b/assets/css/code.css
index 76935c09e4..5b78f659b1 100644
--- a/assets/css/code.css
+++ b/assets/css/code.css
@@ -1,721 +1,48 @@
-.highlight, :not(pre) > code {
-  font-size: .875em;
-  border: 1px solid;
-  border-radius: theme("spacing.1");
-  border-color: theme("colors.gray.light.300");
-  .dark & {
-    background: theme("colors.gray.dark.200");
-    border-color: theme("colors.gray.dark.300");
+@layer components {
+  .highlight,
+  :not(pre) > code {
+    font-size: 0.875em;
+    border: 1px solid;
+    border-radius: theme("spacing.1");
+    background: theme("colors.white");
+    border-color: theme("colors.gray.light.300");
+    .dark & {
+      background: theme("colors.gray.dark.200");
+      border-color: theme("colors.gray.dark.300");
+    }
   }
-}
 
-.highlight {
-  @apply p-3 my-4 overflow-x-auto;
-  background: theme("colors.white");
-}
-
-:not(pre) > code {
-  background: theme("colors.gray.light.200");
-  display: inline-block;
-  margin: 0;
-  white-space: nowrap;
-  font-weight: 400;
-  padding: 0 4px;
-}
-
-.highlight {
-  /* LineTableTD */
-  .lntd {
-    vertical-align: top;
-    padding: 0;
+  :not(pre) > code {
+    background: theme("colors.gray.light.200");
+    display: inline-block;
     margin: 0;
-    border: 0;
-  }
-  /* LineTable */
-  .lntable {
-    display: table;
-    width: 100%;
-    border-spacing: 0;
-    padding: 0;
-    margin: 0;
-    border: 0;
-    /* LineNumberColumnHighlight */
-    .lntd:first-child .hl {
-      display: block;
-    }
+    white-space: nowrap;
+    font-weight: 400;
+    padding: 0 4px;
   }
 
-  /* LightTheme */
-  .light & {
-    /* Other */
-    .x {
-      color: #000000;
-    }
-    /* Error */
-    .err {
-      color: #a40000;
-    }
-    /* CodeLine */
-    .cl {
-    }
-    /* LineHighlight */
-    .hl {
-      background-color: #e5f2fc;
-    }
-    .lntd:first-child .hl,
-    & > .chroma > code > .hl {
-      margin-left: -4px;
-      border-left: 4px solid #c0e0fa;
-    }
-    /* LineNumbersTable */
-    .lnt {
-      white-space: pre;
-      user-select: none;
-      margin-right: 0.4em;
-      padding: 0 0.4em 0 0.4em;
-      color: #7f7f7f;
-    }
-    /* LineNumbers */
-    .ln {
-      white-space: pre;
-      user-select: none;
-      margin-right: 0.4em;
-      padding: 0 0.4em 0 0.4em;
-      color: #7f7f7f;
-    }
-    /* Line */
-    .line {
-      display: flex;
-    }
-    /* Keyword */
-    .k {
-      color: #204a87;
-    }
-    /* KeywordConstant */
-    .kc {
-      color: #204a87;
-    }
-    /* KeywordDeclaration */
-    .kd {
-      color: #204a87;
-    }
-    /* KeywordNamespace */
-    .kn {
-      color: #204a87;
-    }
-    /* KeywordPseudo */
-    .kp {
-      color: #204a87;
-    }
-    /* KeywordReserved */
-    .kr {
-      color: #204a87;
-    }
-    /* KeywordType */
-    .kt {
-      color: #204a87;
-    }
-    /* Name */
-    .n {
-      color: #000000;
-    }
-    /* NameAttribute */
-    .na {
-      color: #c4a000;
-    }
-    /* NameBuiltin */
-    .nb {
-      color: #204a87;
-    }
-    /* NameBuiltinPseudo */
-    .bp {
-      color: #3465a4;
-    }
-    /* NameClass */
-    .nc {
-      color: #000000;
-    }
-    /* NameConstant */
-    .no {
-      color: #000000;
-    }
-    /* NameDecorator */
-    .nd {
-      color: #5c35cc;
-    }
-    /* NameEntity */
-    .ni {
-      color: #ce5c00;
-    }
-    /* NameException */
-    .ne {
-      color: #cc0000;
-    }
-    /* NameFunction */
-    .nf {
-      color: #000000;
-    }
-    /* NameFunctionMagic */
-    .fm {
-      color: #000000;
-    }
-    /* NameLabel */
-    .nl {
-      color: #f57900;
-    }
-    /* NameNamespace */
-    .nn {
-      color: #000000;
-    }
-    /* NameOther */
-    .nx {
-      color: #000000;
-    }
-    /* NameProperty */
-    .py {
-      color: #000000;
-    }
-    /* NameTag */
-    .nt {
-      color: #204a87;
-    }
-    /* NameVariable */
-    .nv {
-      color: #5f25a0;
-    }
-    /* NameVariableClass */
-    .vc {
-      color: #000000;
-    }
-    /* NameVariableGlobal */
-    .vg {
-      color: #000000;
-    }
-    /* NameVariableInstance */
-    .vi {
-      color: #000000;
-    }
-    /* NameVariableMagic */
-    .vm {
-      color: #000000;
-    }
-    /* Literal */
-    .l {
-      color: #000000;
-    }
-    /* LiteralDate */
-    .ld {
-      color: #000000;
-    }
-    /* LiteralString */
-    .s {
-      color: #4e9a06;
-    }
-    /* LiteralStringAffix */
-    .sa {
-      color: #4e9a06;
-    }
-    /* LiteralStringBacktick */
-    .sb {
-      color: #4e9a06;
-    }
-    /* LiteralStringChar */
-    .sc {
-      color: #4e9a06;
-    }
-    /* LiteralStringDelimiter */
-    .dl {
-      color: #4e9a06;
-    }
-    /* LiteralStringDoc */
-    .sd {
-      color: #8f5902;
-    }
-    /* LiteralStringDouble */
-    .s2 {
-      color: #4e9a06;
-    }
-    /* LiteralStringEscape */
-    .se {
-      color: #000;
-    }
-    /* LiteralStringHeredoc */
-    .sh {
-      color: #4e9a06;
-    }
-    /* LiteralStringInterpol */
-    .si {
-      color: #4e9a06;
-    }
-    /* LiteralStringOther */
-    .sx {
-      color: #4e9a06;
-    }
-    /* LiteralStringRegex */
-    .sr {
-      color: #4e9a06;
-    }
-    /* LiteralStringSingle */
-    .s1 {
-      color: #4e9a06;
-    }
-    /* LiteralStringSymbol */
-    .ss {
-      color: #4e9a06;
-    }
-    /* LiteralNumber */
-    .m {
-      color: #0000cf;
-    }
-    /* LiteralNumberBin */
-    .mb {
-      color: #0000cf;
-    }
-    /* LiteralNumberFloat */
-    .mf {
-      color: #0000cf;
-    }
-    /* LiteralNumberHex */
-    .mh {
-      color: #0000cf;
-    }
-    /* LiteralNumberInteger */
-    .mi {
-      color: #0000cf;
-    }
-    /* LiteralNumberIntegerLong */
-    .il {
-      color: #0000cf;
-    }
-    /* LiteralNumberOct */
-    .mo {
-      color: #0000cf;
-    }
-    /* Operator */
-    .o {
-      color: #ce5c00;
-    }
-    /* OperatorWord */
-    .ow {
-      color: #204a87;
-    }
-    /* Punctuation */
-    .p {
-      color: #000000;
-    }
-    /* Comment */
-    .c {
-      color: #8f5902;
-    }
-    /* CommentHashbang */
-    .ch {
-      color: #8f5902;
-    }
-    /* CommentMultiline */
-    .cm {
-      color: #8f5902;
-    }
-    /* CommentSingle */
-    .c1 {
-      color: #8f5902;
-    }
-    /* CommentSpecial */
-    .cs {
-      color: #8f5902;
-    }
-    /* CommentPreproc */
-    .cp {
-      color: #8f5902;
-    }
-    /* CommentPreprocFile */
-    .cpf {
-      color: #8f5902;
-    }
-    /* Generic */
-    .g {
-      color: #000000;
-    }
-    /* GenericDeleted */
-    .gd {
-      color: #a40000;
-    }
-    /* GenericEmph */
-    .ge {
-      color: #000000;
-    }
-    /* GenericError */
-    .gr {
-      color: #ef2929;
-    }
-    /* GenericHeading */
-    .gh {
-      color: #000080;
-    }
-    /* GenericInserted */
-    .gi {
-      color: #00a000;
-    }
-    /* GenericOutput */
-    .go {
-      color: #000000;
-    }
-    /* GenericPrompt */
-    .gp {
-      user-select: none;
-      color: #8f5902;
-    }
-    /* GenericStrong */
-    .gs {
-      color: #000000;
-    }
-    /* GenericSubheading */
-    .gu {
-      color: #800080;
-    }
-    /* GenericTraceback */
-    .gt {
-      color: #a40000;
-    }
-    /* GenericUnderline */
-    .gl {
-      color: #000000;
-      text-decoration: underline;
-    }
-    /* TextWhitespace */
-    .w {
-      color: var(--gray-100);
-    }
-  }
+  .highlight {
+    @apply my-4 overflow-x-auto p-3;
 
-  .dark & {
-    /* Other */
-    .x {
-    }
-    /* Error */
-    .err {
-    }
-    /* CodeLine */
-    .cl {
-    }
-    /* LineHighlight */
-    .hl {
-      background-color: theme('colors.gray.dark.300');
-    }
-    .lntd:first-child .hl,
-    & > .chroma > code > .hl {
-      margin-left: -4px;
-      border-left: 4px solid theme('colors.gray.dark.400');
-    }
-    /* LineNumbersTable */
-    .lnt {
-      white-space: pre;
-      user-select: none;
-      margin-right: 0.4em;
-      padding: 0 0.4em 0 0.4em;
-      color: #58626f;
-    }
-    /* LineNumbers */
-    .ln {
-      white-space: pre;
-      user-select: none;
-      margin-right: 0.4em;
-      padding: 0 0.4em 0 0.4em;
-      color: #58626f;
-    }
-    /* Line */
-    .line {
-      display: flex;
-    }
-    /* Keyword */
-    .k {
-      color: #76a9f9;
-    }
-    /* KeywordConstant */
-    .kc {
-      color: #e5c07b;
-    }
-    /* KeywordDeclaration */
-    .kd {
-      color: #76a9f9;
-    }
-    /* KeywordNamespace */
-    .kn {
-      color: #76a9f9;
-    }
-    /* KeywordPseudo */
-    .kp {
-      color: #76a9f9;
-    }
-    /* KeywordReserved */
-    .kr {
-      color: #76a9f9;
-    }
-    /* KeywordType */
-    .kt {
-      color: #e5c07b;
-    }
-    /* Name */
-    .n {
-      color: #aa89ea;
-    }
-    /* NameAttribute */
-    .na {
-      color: #cebc3a;
-    }
-    /* NameBuiltin */
-    .nb {
-      color: #e5c07b;
-    }
-    /* NameBuiltinPseudo */
-    .bp {
-      color: #aa89ea;
-    }
-    /* NameClass */
-    .nc {
-      color: #ca72ff;
-    }
-    /* NameConstant */
-    .no {
-      color: #aa89ea;
-    }
-    /* NameDecorator */
-    .nd {
-      color: #e5c07b;
-    }
-    /* NameEntity */
-    .ni {
-      color: #bda26f;
-    }
-    /* NameException */
-    .ne {
-      color: #fd7474;
-    }
-    /* NameFunction */
-    .nf {
-      color: #00b1f7;
-    }
-    /* NameFunctionMagic */
-    .fm {
-      color: #aa89ea;
-    }
-    /* NameLabel */
-    .nl {
-      color: #f5a40d;
-    }
-    /* NameNamespace */
-    .nn {
-      color: #ca72ff;
-    }
-    /* NameOther */
-    .nx {
-      color: #ffffff;
-    }
-    /* NameProperty */
-    .py {
-      color: #cebc3a;
-    }
-    /* NameTag */
-    .nt {
-      color: #76a9f9;
-    }
-    /* NameVariable */
-    .nv {
-      color: #dcaeea;
-    }
-    /* NameVariableClass */
-    .vc {
-      color: #dcaeea;
-    }
-    /* NameVariableGlobal */
-    .vg {
-      color: #dcaeea;
-    }
-    /* NameVariableInstance */
-    .vi {
-      color: #e06c75;
-    }
-    /* NameVariableMagic */
-    .vm {
-      color: #dcaeea;
-    }
-    /* Literal */
-    .l {
-      color: #98c379;
-    }
-    /* LiteralDate */
-    .ld {
-      color: #98c379;
-    }
-    /* LiteralString */
-    .s {
-      color: #98c379;
-    }
-    /* LiteralStringAffix */
-    .sa {
-      color: #98c379;
-    }
-    /* LiteralStringBacktick */
-    .sb {
-      color: #98c379;
-    }
-    /* LiteralStringChar */
-    .sc {
-      color: #98c379;
-    }
-    /* LiteralStringDelimiter */
-    .dl {
-      color: #98c379;
-    }
-    /* LiteralStringDoc */
-    .sd {
-      color: #7e97c3;
-    }
-    /* LiteralStringDouble */
-    .s2 {
-      color: #63c381;
-    }
-    /* LiteralStringEscape */
-    .se {
-      color: #fff;
-    }
-    /* LiteralStringHeredoc */
-    .sh {
-      color: #98c379;
-    }
-    /* LiteralStringInterpol */
-    .si {
-      color: #98c379;
-    }
-    /* LiteralStringOther */
-    .sx {
-      color: #70b33f;
-    }
-    /* LiteralStringRegex */
-    .sr {
-      color: #56b6c2;
-    }
-    /* LiteralStringSingle */
-    .s1 {
-      color: #98c379;
-    }
-    /* LiteralStringSymbol */
-    .ss {
-      color: #56b6c2;
-    }
-    /* LiteralNumber */
-    .m {
-      color: #d19a66;
-    }
-    /* LiteralNumberBin */
-    .mb {
-      color: #d19a66;
-    }
-    /* LiteralNumberFloat */
-    .mf {
-      color: #d19a66;
-    }
-    /* LiteralNumberHex */
-    .mh {
-      color: #d19a66;
-    }
-    /* LiteralNumberInteger */
-    .mi {
-      color: #d19a66;
-    }
-    /* LiteralNumberIntegerLong */
-    .il {
-      color: #d19a66;
-    }
-    /* LiteralNumberOct */
-    .mo {
-      color: #d19a66;
-    }
-    /* Operator */
-    .o {
-      color: #54b1c7;
-    }
-    /* OperatorWord */
-    .ow {
-      color: #b756ff;
-    }
-    /* Punctuation */
-    .p {
-      color: #abb2bf;
-    }
-    /* Comment */
-    .c {
-      color: #8a93a5;
-    }
-    /* CommentHashbang */
-    .ch {
-      color: #8a93a5;
-    }
-    /* CommentMultiline */
-    .cm {
-      color: #8a93a5;
-    }
-    /* CommentSingle */
-    .c1 {
-      color: #8a93a5;
-    }
-    /* CommentSpecial */
-    .cs {
-      color: #8a93a5;
-    }
-    /* CommentPreproc */
-    .cp {
-      color: #8a93a5;
-    }
-    /* CommentPreprocFile */
-    .cpf {
-      color: #8a93a5;
-    }
-    /* Generic */
-    .g {
-    }
-    /* GenericDeleted */
-    .gd {
-      color: #dd4659;
-    }
-    /* GenericEmph */
-    .ge {
-    }
-    /* GenericError */
-    .gr {
-    }
-    /* GenericHeading */
-    .gh {
-      color: #a2cbff;
-    }
-    /* GenericInserted */
-    .gi {
-      color: #a6e22e;
-    }
-    /* GenericOutput */
-    .go {
-      color: #fff;
-    }
-    /* GenericPrompt */
-    .gp {
-      color: #a6e22e;
-    }
-    /* GenericStrong */
-    .gs {
-    }
-    /* GenericSubheading */
-    .gu {
-      color: #a2cbff;
-    }
-    /* GenericTraceback */
-    .gt {
-      color: #a2cbff;
-    }
-    /* GenericUnderline */
-    .gl {
-      text-decoration: underline;
-    }
-    /* TextWhitespace */
-    .w {
+    /* LineTableTD */
+    .lntd {
+      vertical-align: top;
+      padding: 0;
+      margin: 0;
+      border: 0;
+    }
+    /* LineTable */
+    .lntable {
+      display: table;
+      width: 100%;
+      border-spacing: 0;
+      padding: 0;
+      margin: 0;
+      border: 0;
+      /* LineNumberColumnHighlight */
+      .lntd:first-child .hl {
+        display: block;
+      }
     }
   }
 }
diff --git a/assets/css/global.css b/assets/css/global.css
new file mode 100644
index 0000000000..5f336ca857
--- /dev/null
+++ b/assets/css/global.css
@@ -0,0 +1,32 @@
+/* global styles */
+
+@layer base {
+  [x-cloak] {
+    display: none !important;
+  }
+
+  :root {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+
+/* utility classes */
+
+@layer utilities {
+  .link {
+    @apply text-blue-light underline underline-offset-2 dark:text-blue-dark;
+  }
+
+  .invertible {
+    @apply dark:hue-rotate-180 dark:invert dark:filter;
+  }
+
+  .sidebar-hover {
+    @apply hover:bg-gray-light-200 hover:dark:bg-gray-dark-200;
+  }
+
+  .sidebar-underline {
+    @apply underline decoration-blue-light decoration-4 underline-offset-4 dark:decoration-blue-dark;
+  }
+}
diff --git a/assets/css/search.css b/assets/css/search.css
index caac0f230b..8981b4a550 100644
--- a/assets/css/search.css
+++ b/assets/css/search.css
@@ -1,16 +1,16 @@
 /*! @docsearch/css 3.3.0 | MIT License | © Algolia, Inc. and contributors | https://docsearch.algolia.com */
 :root {
-  --docsearch-primary-color: #5468ff;
+  --docsearch-primary-color: theme("colors.blue.light.500");
   --docsearch-text-color: #1c1e21;
   --docsearch-spacing: 12px;
   --docsearch-icon-stroke-width: 1.4;
   --docsearch-highlight-color: var(--docsearch-primary-color);
-  --docsearch-muted-color: #969faf;
-  --docsearch-container-background: rgba(101, 108, 133, 0.8);
+  --docsearch-muted-color: theme("colors.blue.light.500");
+  --docsearch-container-background: theme("colors.white/0.5");
   --docsearch-logo-color: #5468ff;
   --docsearch-modal-width: 560px;
   --docsearch-modal-height: 600px;
-  --docsearch-modal-background: #f5f6f7;
+  --docsearch-modal-background: theme("colors.background.light");
   --docsearch-modal-shadow: inset 1px 1px 0 0 hsla(0, 0%, 100%, 0.5),
     0 3px 8px 0 #555a64;
   --docsearch-searchbox-height: 56px;
@@ -19,35 +19,30 @@
   --docsearch-searchbox-background: theme(colors.white);
   --docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-primary-color);
   --docsearch-hit-height: 56px;
-  --docsearch-hit-color: #444950;
-  --docsearch-hit-active-color: #fff;
-  --docsearch-hit-background: #fff;
+  --docsearch-hit-color: theme("colors.black");
+  --docsearch-hit-active-color: theme("colors.white");
+  --docsearch-hit-background: theme("colors.white");
   --docsearch-hit-shadow: 0 1px 3px 0 #d4d9e1;
-  --docsearch-key-gradient: linear-gradient(-225deg, #d5dbe4, #f8f8f8);
-  --docsearch-key-shadow: inset 0 -2px 0 0 #cdcde6, inset 0 0 1px 1px #fff,
-    0 1px 2px 1px rgba(30, 35, 90, 0.4);
+  --docsearch-key-color: theme("colors.blue.light.100");
   --docsearch-footer-height: 44px;
-  --docsearch-footer-background: #fff;
-  --docsearch-footer-shadow: 0 -1px 0 0 #e0e3e8,
-    0 -3px 6px 0 rgba(69, 98, 155, 0.12);
+  --docsearch-footer-background: theme("colors.white");
+  --docsearch-footer-border: 1px solid theme("colors.divider.light");
 }
 html.dark {
+  --docsearch-primary-color: theme("colors.blue.dark.400");
   --docsearch-text-color: #f5f6f7;
-  --docsearch-container-background: rgba(9, 10, 17, 0.8);
-  --docsearch-modal-background: #15172a;
+  --docsearch-container-background: theme("colors.black/0.5");
+  --docsearch-modal-background: theme("colors.background.dark");
   --docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
   --docsearch-searchbox-background: theme(colors.black);
-  --docsearch-hit-color: #bec3c9;
+  --docsearch-hit-color: theme("colors.white");
   --docsearch-hit-shadow: none;
   --docsearch-hit-background: #090a11;
-  --docsearch-key-gradient: linear-gradient(-26.5deg, #565872, #31355b);
-  --docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d,
-    0 2px 2px 0 rgba(3, 4, 9, 0.3);
-  --docsearch-footer-background: #1e2136;
-  --docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, 0.5),
-    0 -4px 8px 0 rgba(0, 0, 0, 0.2);
-  --docsearch-logo-color: #fff;
-  --docsearch-muted-color: #7f8497;
+  --docsearch-key-color: theme("colors.blue.dark.300");
+  --docsearch-footer-background: theme("colors.background.dark");
+  --docsearch-footer-border: 1px solid theme("colors.divider.dark");
+  --docsearch-logo-color: theme("colors.white");
+  --docsearch-muted-color: theme("colors.white");
 }
 .DocSearch-Button {
   align-items: center;
@@ -87,7 +82,7 @@ html.dark {
 .DocSearch-Button-Keys {
   display: flex;
   min-width: calc(40px + 0.8em);
-  margin-top: 3px
+  margin-top: 3px;
 }
 .DocSearch-Button-Key {
   align-items: center;
@@ -442,7 +437,7 @@ svg.DocSearch-Hit-Select-Icon {
 }
 .DocSearch-Hit-action-button:focus path,
 .DocSearch-Hit-action-button:hover path {
-  fill: #fff;
+  fill: theme("colors.white");
 }
 .DocSearch-Hit-content-wrapper {
   display: flex;
@@ -528,7 +523,7 @@ svg.DocSearch-Hit-Select-Icon {
   align-items: center;
   background: var(--docsearch-footer-background);
   border-radius: 0 0 8px 8px;
-  box-shadow: var(--docsearch-footer-shadow);
+  border-top: var(--docsearch-footer-border);
   display: flex;
   flex-direction: row-reverse;
   flex-shrink: 0;
@@ -556,9 +551,8 @@ svg.DocSearch-Hit-Select-Icon {
 }
 .DocSearch-Commands-Key {
   align-items: center;
-  background: var(--docsearch-key-gradient);
+  background: var(--docsearch-key-color);
   border-radius: 2px;
-  box-shadow: var(--docsearch-key-shadow);
   display: flex;
   height: 18px;
   justify-content: center;
diff --git a/assets/css/styles.css b/assets/css/styles.css
index 9602a9b12f..0ab8a14e0d 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -1,48 +1,16 @@
+/* see also: tailwind.config.js */
+
 @import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
-
-/* base */
-
+@import "/assets/css/global";
 @import "/assets/css/typography";
-@import "/assets/css/toc";
-@import "/assets/css/code";
 @import "/assets/css/search";
 
-/* components */
-
+@import "tailwindcss/components";
+@import "/assets/css/code";
+@import "/assets/css/toc";
 @import "/assets/css/callouts";
 @import "/assets/css/tables";
 
-/* global utils */
-
-[x-cloak] {
-  display: none !important;
-}
-
-:root {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.link {
-  @apply text-blue-light dark:text-blue-dark underline-offset-2 underline;
-}
-
-.invertible {
-  @apply dark:filter dark:invert dark:hue-rotate-180;
-}
-
-hr {
-  @apply border-divider-light dark:border-divider-dark;
-}
-
-.sidebar-hover {
-  @apply hover:bg-gray-light-200 hover:dark:bg-gray-dark-200;
-}
-
-.sidebar-underline {
-  @apply underline underline-offset-4 decoration-4 decoration-blue-light dark:decoration-blue-dark;
-}
-
-/* see also: tailwind.config.js */
+@import "tailwindcss/utilities";
+@import "/assets/css/syntax-light";
+@import "/assets/css/syntax-dark";
diff --git a/assets/css/syntax-dark.css b/assets/css/syntax-dark.css
new file mode 100644
index 0000000000..ff24a19548
--- /dev/null
+++ b/assets/css/syntax-dark.css
@@ -0,0 +1,343 @@
+@layer utilities {
+  .syntax-dark {
+    /* Other */
+    .x {
+      color: theme("colors.white");
+    }
+    /* Error */
+    .err {
+      color: theme("colors.red.dark.500");
+    }
+    /* CodeLine */
+    .cl {
+    }
+    /* LineHighlight */
+    .hl {
+      min-width: fit-content;
+      background-color: theme("colors.gray.dark.300");
+    }
+    .lntd:first-child .hl,
+    & > .chroma > code > .hl {
+      margin-left: -4px;
+      border-left: 4px solid theme("colors.gray.dark.400");
+    }
+    /* LineNumbersTable */
+    .lnt {
+      white-space: pre;
+      user-select: none;
+      margin-right: 0.4em;
+      padding: 0 0.4em 0 0.4em;
+      color: theme("colors.gray.dark.400");
+    }
+    /* LineNumbers */
+    .ln {
+      white-space: pre;
+      user-select: none;
+      margin-right: 0.4em;
+      padding: 0 0.4em 0 0.4em;
+      color: theme("colors.gray.dark.400");
+    }
+    /* Line */
+    .line {
+      display: flex;
+    }
+    /* Keyword */
+    .k {
+      color: theme("colors.amber.dark.700");
+    }
+    /* KeywordConstant */
+    .kc {
+      color: theme("colors.violet.dark.700");
+    }
+    /* KeywordDeclaration */
+    .kd {
+      color: theme("colors.amber.dark.700");
+    }
+    /* KeywordNamespace */
+    .kn {
+      color: theme("colors.amber.dark.700");
+    }
+    /* KeywordPseudo */
+    .kp {
+      color: theme("colors.amber.dark.700");
+    }
+    /* KeywordReserved */
+    .kr {
+      color: theme("colors.amber.dark.700");
+    }
+    /* KeywordType */
+    .kt {
+      color: theme("colors.amber.dark.700");
+    }
+    /* Name */
+    .n {
+      color: theme("colors.violet.dark.700");
+    }
+    /* NameAttribute */
+    .na {
+      color: theme("colors.amber.dark.700");
+    }
+    /* NameBuiltin */
+    .nb {
+      color: theme("colors.amber.dark.700");
+    }
+    /* NameBuiltinPseudo */
+    .bp {
+      color: theme("colors.violet.dark.700");
+    }
+    /* NameClass */
+    .nc {
+      color: theme("colors.white");
+    }
+    /* NameConstant */
+    .no {
+      color: theme("colors.white");
+    }
+    /* NameDecorator */
+    .nd {
+      color: theme("colors.violet.dark.700");
+    }
+    /* NameEntity */
+    .ni {
+      color: theme("colors.amber.dark.700");
+    }
+    /* NameException */
+    .ne {
+      color: theme("colors.red.dark.700");
+    }
+    /* NameFunction */
+    .nf {
+      color: theme("colors.blue.dark.600");
+    }
+    /* NameFunctionMagic */
+    .fm {
+      color: theme("colors.blue.dark.600");
+    }
+    /* NameLabel */
+    .nl {
+      color: theme("colors.amber.dark.500");
+    }
+    /* NameNamespace */
+    .nn {
+      color: theme("colors.white");
+    }
+    /* NameOther */
+    .nx {
+      color: theme("colors.white");
+    }
+    /* NameProperty */
+    .py {
+      color: theme("colors.white");
+    }
+    /* NameTag */
+    .nt {
+      color: theme("colors.green.dark.600");
+    }
+    /* NameVariable */
+    .nv {
+      color: theme("colors.white");
+    }
+    /* NameVariableClass */
+    .vc {
+      color: theme("colors.violet.dark.600");
+    }
+    /* NameVariableGlobal */
+    .vg {
+      color: theme("colors.violet.dark.600");
+    }
+    /* NameVariableInstance */
+    .vi {
+      color: theme("colors.violet.dark.600");
+    }
+    /* NameVariableMagic */
+    .vm {
+      color: theme("colors.violet.dark.600");
+    }
+    /* Literal */
+    .l {
+      color: theme("colors.white");
+    }
+    /* LiteralDate */
+    .ld {
+      color: theme("colors.green.dark.600");
+    }
+    /* LiteralString */
+    .s {
+      color: theme("colors.white");
+    }
+    /* LiteralStringAffix */
+    .sa {
+      color: theme("colors.green.dark.600");
+    }
+    /* LiteralStringBacktick */
+    .sb {
+      color: theme("colors.green.dark.600");
+    }
+    /* LiteralStringChar */
+    .sc {
+      color: theme("colors.green.dark.600");
+    }
+    /* LiteralStringDelimiter */
+    .dl {
+      color: theme("colors.green.dark.600");
+    }
+    /* LiteralStringDoc */
+    .sd {
+      color: theme("colors.green.dark.600");
+    }
+    /* LiteralStringDouble */
+    .s2 {
+      color: theme("colors.green.dark.600");
+    }
+    /* LiteralStringEscape */
+    .se {
+      color: theme("colors.white");
+    }
+    /* LiteralStringHeredoc */
+    .sh {
+      color: theme("colors.green.dark.600");
+    }
+    /* LiteralStringInterpol */
+    .si {
+      color: theme("colors.green.dark.600");
+    }
+    /* LiteralStringOther */
+    .sx {
+      color: theme("colors.green.dark.600");
+    }
+    /* LiteralStringRegex */
+    .sr {
+      color: theme("colors.blue.dark.500");
+    }
+    /* LiteralStringSingle */
+    .s1 {
+      color: theme("colors.green.dark.600");
+    }
+    /* LiteralStringSymbol */
+    .ss {
+      color: theme("colors.blue.dark.600");
+    }
+    /* LiteralNumber */
+    .m {
+      color: theme("colors.blue.dark.600");
+    }
+    /* LiteralNumberBin */
+    .mb {
+      color: theme("colors.blue.dark.600");
+    }
+    /* LiteralNumberFloat */
+    .mf {
+      color: theme("colors.blue.dark.600");
+    }
+    /* LiteralNumberHex */
+    .mh {
+      color: theme("colors.blue.dark.600");
+    }
+    /* LiteralNumberInteger */
+    .mi {
+      color: theme("colors.blue.dark.600");
+    }
+    /* LiteralNumberIntegerLong */
+    .il {
+      color: theme("colors.blue.dark.600");
+    }
+    /* LiteralNumberOct */
+    .mo {
+      color: theme("colors.blue.dark.600");
+    }
+    /* Operator */
+    .o {
+      color: theme("colors.blue.dark.700");
+    }
+    /* OperatorWord */
+    .ow {
+      color: theme("colors.amber.dark.700");
+    }
+    /* Punctuation */
+    .p {
+      color: theme("colors.gray.dark.500");
+    }
+    /* Comment */
+    .c {
+      color: theme("colors.gray.dark.500");
+    }
+    /* CommentHashbang */
+    .ch {
+      color: theme("colors.gray.dark.500");
+    }
+    /* CommentMultiline */
+    .cm {
+      color: theme("colors.gray.dark.500");
+    }
+    /* CommentSingle */
+    .c1 {
+      color: theme("colors.gray.dark.500");
+    }
+    /* CommentSpecial */
+    .cs {
+      color: theme("colors.gray.dark.500");
+    }
+    /* CommentPreproc */
+    .cp {
+      color: theme("colors.gray.dark.500");
+    }
+    /* CommentPreprocFile */
+    .cpf {
+      color: theme("colors.gray.dark.500");
+    }
+    /* Generic */
+    .g {
+      color: theme("colors.white");
+    }
+    /* GenericDeleted */
+    .gd {
+      color: theme("colors.red.dark.500");
+    }
+    /* GenericEmph */
+    .ge {
+      color: theme("colors.white");
+    }
+    /* GenericError */
+    .gr {
+      color: theme("colors.red.dark.500");
+    }
+    /* GenericHeading */
+    .gh {
+      color: theme("colors.gray.dark.600");
+    }
+    /* GenericInserted */
+    .gi {
+      color: theme("colors.green.dark.500");
+    }
+    /* GenericOutput */
+    .go {
+      color: theme("colors.white");
+    }
+    /* GenericPrompt */
+    .gp {
+      user-select: none;
+      color: theme("colors.green.dark.400");
+    }
+    /* GenericStrong */
+    .gs {
+      color: theme("colors.white");
+    }
+    /* GenericSubheading */
+    .gu {
+      color: theme("colors.gray.dark.600");
+    }
+    /* GenericTraceback */
+    .gt {
+      color: theme("colors.red.dark.500");
+    }
+    /* GenericUnderline */
+    .gl {
+      color: theme("colors.white");
+      text-decoration: underline;
+    }
+    /* TextWhitespace */
+    .w {
+      color: theme("colors.gray.dark.100");
+    }
+  }
+}
diff --git a/assets/css/syntax-light.css b/assets/css/syntax-light.css
new file mode 100644
index 0000000000..ba0bb789f8
--- /dev/null
+++ b/assets/css/syntax-light.css
@@ -0,0 +1,343 @@
+@layer utilities {
+  .syntax-light {
+    /* Other */
+    .x {
+      color: theme("colors.black");
+    }
+    /* Error */
+    .err {
+      color: theme("colors.red.light.500");
+    }
+    /* CodeLine */
+    .cl {
+    }
+    /* LineHighlight */
+    .hl {
+      min-width: fit-content;
+      background-color: theme("colors.blue.light.100");
+    }
+    .lntd:first-child .hl,
+    & > .chroma > code > .hl {
+      margin-left: -4px;
+      border-left: 4px solid theme("colors.blue.light.300");
+    }
+    /* LineNumbersTable */
+    .lnt {
+      white-space: pre;
+      user-select: none;
+      margin-right: 0.4em;
+      padding: 0 0.4em 0 0.4em;
+      color: theme("colors.gray.light.400");
+    }
+    /* LineNumbers */
+    .ln {
+      white-space: pre;
+      user-select: none;
+      margin-right: 0.4em;
+      padding: 0 0.4em 0 0.4em;
+      color: theme("colors.gray.light.400");
+    }
+    /* Line */
+    .line {
+      display: flex;
+    }
+    /* Keyword */
+    .k {
+      color: theme("colors.amber.light.500");
+    }
+    /* KeywordConstant */
+    .kc {
+      color: theme("colors.violet.light.400");
+    }
+    /* KeywordDeclaration */
+    .kd {
+      color: theme("colors.amber.light.500");
+    }
+    /* KeywordNamespace */
+    .kn {
+      color: theme("colors.amber.light.500");
+    }
+    /* KeywordPseudo */
+    .kp {
+      color: theme("colors.amber.light.500");
+    }
+    /* KeywordReserved */
+    .kr {
+      color: theme("colors.amber.light.500");
+    }
+    /* KeywordType */
+    .kt {
+      color: theme("colors.amber.light.500");
+    }
+    /* Name */
+    .n {
+      color: theme("colors.violet.light.400");
+    }
+    /* NameAttribute */
+    .na {
+      color: theme("colors.amber.light.500");
+    }
+    /* NameBuiltin */
+    .nb {
+      color: theme("colors.amber.light.500");
+    }
+    /* NameBuiltinPseudo */
+    .bp {
+      color: theme("colors.violet.light.400");
+    }
+    /* NameClass */
+    .nc {
+      color: theme("colors.black");
+    }
+    /* NameConstant */
+    .no {
+      color: theme("colors.black");
+    }
+    /* NameDecorator */
+    .nd {
+      color: theme("colors.violet.light.400");
+    }
+    /* NameEntity */
+    .ni {
+      color: theme("colors.amber.light.500");
+    }
+    /* NameException */
+    .ne {
+      color: theme("colors.red.light.700");
+    }
+    /* NameFunction */
+    .nf {
+      color: theme("colors.blue.light.600");
+    }
+    /* NameFunctionMagic */
+    .fm {
+      color: theme("colors.blue.light.600");
+    }
+    /* NameLabel */
+    .nl {
+      color: theme("colors.amber.light.700");
+    }
+    /* NameNamespace */
+    .nn {
+      color: theme("colors.black");
+    }
+    /* NameOther */
+    .nx {
+      color: theme("colors.black");
+    }
+    /* NameProperty */
+    .py {
+      color: theme("colors.black");
+    }
+    /* NameTag */
+    .nt {
+      color: theme("colors.green.light.600");
+    }
+    /* NameVariable */
+    .nv {
+      color: theme("colors.black");
+    }
+    /* NameVariableClass */
+    .vc {
+      color: theme("colors.violet.light.600");
+    }
+    /* NameVariableGlobal */
+    .vg {
+      color: theme("colors.violet.light.600");
+    }
+    /* NameVariableInstance */
+    .vi {
+      color: theme("colors.violet.light.600");
+    }
+    /* NameVariableMagic */
+    .vm {
+      color: theme("colors.violet.light.600");
+    }
+    /* Literal */
+    .l {
+      color: theme("colors.black");
+    }
+    /* LiteralDate */
+    .ld {
+      color: theme("colors.black");
+    }
+    /* LiteralString */
+    .s {
+      color: theme("colors.black");
+    }
+    /* LiteralStringAffix */
+    .sa {
+      color: theme("colors.green.light.600");
+    }
+    /* LiteralStringBacktick */
+    .sb {
+      color: theme("colors.green.light.600");
+    }
+    /* LiteralStringChar */
+    .sc {
+      color: theme("colors.green.light.600");
+    }
+    /* LiteralStringDelimiter */
+    .dl {
+      color: theme("colors.green.light.600");
+    }
+    /* LiteralStringDoc */
+    .sd {
+      color: #8f5902;
+    }
+    /* LiteralStringDouble */
+    .s2 {
+      color: theme("colors.green.light.600");
+    }
+    /* LiteralStringEscape */
+    .se {
+      color: theme("colors.black");
+    }
+    /* LiteralStringHeredoc */
+    .sh {
+      color: theme("colors.green.light.600");
+    }
+    /* LiteralStringInterpol */
+    .si {
+      color: theme("colors.green.light.600");
+    }
+    /* LiteralStringOther */
+    .sx {
+      color: theme("colors.green.light.600");
+    }
+    /* LiteralStringRegex */
+    .sr {
+      color: theme("colors.blue.light.500");
+    }
+    /* LiteralStringSingle */
+    .s1 {
+      color: theme("colors.green.light.600");
+    }
+    /* LiteralStringSymbol */
+    .ss {
+      color: theme("colors.green.light.600");
+    }
+    /* LiteralNumber */
+    .m {
+      color: theme("colors.blue.light.600");
+    }
+    /* LiteralNumberBin */
+    .mb {
+      color: theme("colors.blue.light.600");
+    }
+    /* LiteralNumberFloat */
+    .mf {
+      color: theme("colors.blue.light.600");
+    }
+    /* LiteralNumberHex */
+    .mh {
+      color: theme("colors.blue.light.600");
+    }
+    /* LiteralNumberInteger */
+    .mi {
+      color: theme("colors.blue.light.600");
+    }
+    /* LiteralNumberIntegerLong */
+    .il {
+      color: theme("colors.blue.light.600");
+    }
+    /* LiteralNumberOct */
+    .mo {
+      color: theme("colors.blue.light.600");
+    }
+    /* Operator */
+    .o {
+      color: theme("colors.blue.light.400");
+    }
+    /* OperatorWord */
+    .ow {
+      color: theme("colors.amber.light.500");
+    }
+    /* Punctuation */
+    .p {
+      color: theme("colors.gray.light.400");
+    }
+    /* Comment */
+    .c {
+      color: theme("colors.gray.light.400");
+    }
+    /* CommentHashbang */
+    .ch {
+      color: theme("colors.gray.light.400");
+    }
+    /* CommentMultiline */
+    .cm {
+      color: theme("colors.gray.light.400");
+    }
+    /* CommentSingle */
+    .c1 {
+      color: theme("colors.gray.light.400");
+    }
+    /* CommentSpecial */
+    .cs {
+      color: theme("colors.gray.light.400");
+    }
+    /* CommentPreproc */
+    .cp {
+      color: theme("colors.gray.light.400");
+    }
+    /* CommentPreprocFile */
+    .cpf {
+      color: theme("colors.gray.light.400");
+    }
+    /* Generic */
+    .g {
+      color: theme("colors.black");
+    }
+    /* GenericDeleted */
+    .gd {
+      color: theme("colors.red.light.500");
+    }
+    /* GenericEmph */
+    .ge {
+      color: theme("colors.black");
+    }
+    /* GenericError */
+    .gr {
+      color: theme("colors.red.light.500");
+    }
+    /* GenericHeading */
+    .gh {
+      color: theme("colors.gray.light.600");
+    }
+    /* GenericInserted */
+    .gi {
+      color: theme("colors.green.light.500");
+    }
+    /* GenericOutput */
+    .go {
+      color: theme("colors.black");
+    }
+    /* GenericPrompt */
+    .gp {
+      user-select: none;
+      color: theme("colors.green.light.400");
+    }
+    /* GenericStrong */
+    .gs {
+      color: theme("colors.black");
+    }
+    /* GenericSubheading */
+    .gu {
+      color: theme("colors.gray.light.600");
+    }
+    /* GenericTraceback */
+    .gt {
+      color: theme("colors.red.light.500");
+    }
+    /* GenericUnderline */
+    .gl {
+      color: theme("colors.black");
+      text-decoration: underline;
+    }
+    /* TextWhitespace */
+    .w {
+      color: theme("colors.gray.light.100");
+    }
+  }
+}
diff --git a/assets/css/tables.css b/assets/css/tables.css
index cd4b166b8b..80c65ced1b 100644
--- a/assets/css/tables.css
+++ b/assets/css/tables.css
@@ -1,12 +1,15 @@
-.prose table {
-  @apply table w-full text-base sm:block overflow-x-auto;
-  thead tr {
-    @apply bg-gray-light-300 dark:bg-gray-dark-300
-  }
-  tbody tr:nth-of-type(2n) {
-    @apply bg-gray-light-200 dark:bg-gray-dark-200
-  }
-  th, td {
-    @apply p-2;
+@layer components {
+  .prose table {
+    @apply table w-full overflow-x-auto text-base sm:block;
+    thead tr {
+      @apply bg-gray-light-300 dark:bg-gray-dark-300;
+    }
+    tbody tr:nth-of-type(2n) {
+      @apply bg-gray-light-200 dark:bg-gray-dark-200;
+    }
+    th,
+    td {
+      @apply p-2;
+    }
   }
 }
diff --git a/assets/css/toc.css b/assets/css/toc.css
index 5a758c346c..151bf77b12 100644
--- a/assets/css/toc.css
+++ b/assets/css/toc.css
@@ -1,18 +1,20 @@
-#TableOfContents {
-  nav {
-    @apply border-l-2 border-divider-light;
-  }
-  ul ul {
-    @apply pl-2;
-  }
-  a {
-    @apply max-w-full truncate py-1 block hover:font-medium hover:no-underline pl-2;
-    &[aria-current="true"],
-    &:hover {
-      @apply font-medium text-black dark:text-white border-l-2 border-l-gray-light bg-gradient-to-r from-gray-light-100 dark:border-l-gray-dark dark:from-gray-dark-200;
+@layer components {
+  #TableOfContents {
+    nav {
+      @apply border-l-2 border-divider-light;
     }
-    &:not([aria-current="true"]) {
-      @apply text-gray-light-600 dark:text-gray-dark-700 hover:text-black dark:hover:text-white;
+    ul ul {
+      @apply pl-2;
+    }
+    a {
+      @apply block max-w-full truncate py-1 pl-2 hover:font-medium hover:no-underline;
+      &[aria-current="true"],
+      &:hover {
+        @apply border-l-2 border-l-gray-light bg-gradient-to-r from-gray-light-100 font-medium text-black dark:border-l-gray-dark dark:from-gray-dark-200 dark:text-white;
+      }
+      &:not([aria-current="true"]) {
+        @apply text-gray-light-600 hover:text-black dark:text-gray-dark-700 dark:hover:text-white;
+      }
     }
   }
 }
diff --git a/assets/css/typography.css b/assets/css/typography.css
index fdf4d157fe..c2c81299af 100644
--- a/assets/css/typography.css
+++ b/assets/css/typography.css
@@ -1,34 +1,37 @@
-.prose {
-  li {
-    @apply my-2;
-    > :last-child, > :first-child {
-      margin: 0;
+@layer base {
+  .prose {
+    li {
+      @apply my-2;
+      > :last-child,
+      > :first-child {
+        margin: 0;
+      }
+    }
+    a {
+      font-weight: 400;
+    }
+    hr {
+      @apply mb-4 mt-8;
+    }
+    h1 {
+      @apply my-4 text-4xl;
+      line-height: 1.167;
+    }
+    h2 {
+      @apply mb-4 mt-8 text-3xl;
+      line-height: 1.2;
+    }
+    h3 {
+      @apply text-2xl;
+      line-height: 1.167;
+    }
+    h4 {
+      @apply text-xl;
+      line-height: 1.235;
+    }
+    h5 {
+      @apply text-lg;
+      line-height: 1.75;
     }
   }
-  a {
-    font-weight: 400;
-  }
-  hr {
-    @apply mt-8 mb-4;
-  }
-  h1 {
-    @apply text-4xl my-4;
-    line-height: 1.167;
-  }
-  h2 {
-    @apply text-3xl mt-8 mb-4;
-    line-height: 1.2;
-  }
-  h3 {
-    @apply text-2xl;
-    line-height: 1.167;
-  }
-  h4 {
-    @apply text-xl;
-    line-height: 1.235;
-  }
-  h5 {
-    @apply text-lg;
-    line-height: 1.75;
-  }
 }
diff --git a/layouts/_default/_markup/render-codeblock.html b/layouts/_default/_markup/render-codeblock.html
index 39cd2dcf20..61b27132d2 100644
--- a/layouts/_default/_markup/render-codeblock.html
+++ b/layouts/_default/_markup/render-codeblock.html
@@ -9,5 +9,8 @@
   >
     content_copy
   </button>
-  {{- highlight .Inner .Type .Options -}}
+  {{ $result := transform.HighlightCodeBlock . }}
+  <div class="syntax-light dark:syntax-dark">
+    {{ $result.Wrapped }}
+  </div>
 </div>