diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index 5aa184df..88f72603 100644
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -1,242 +1,6 @@
 /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
 /*! Blowfish | MIT License | https://github.com/nunocoracao/blowfish */
 @layer properties;
-#zen-mode-button {
-  cursor: pointer;
-}
-.zen-mode {
-  position: relative;
-}
-body.zen-mode-enable {
-  #bmc-wbtn, .author {
-    display: none !important;
-  }
-}
-.prose .chroma {
-  position: static;
-  border-radius: var(--radius-md);
-  background-color: rgba(var(--color-neutral-50), 1);
-  color: rgba(var(--color-neutral-700), 1);
-  &:is(.dark *) {
-    background-color: rgba(var(--color-neutral-700), 1);
-  }
-  &:is(.dark *) {
-    color: rgba(var(--color-neutral-200), 1);
-  }
-}
-.chroma .lntd, .chroma .lntd pre {
-  margin: calc(var(--spacing) * 0);
-  --tw-border-style: none;
-  border-style: none;
-  padding: calc(var(--spacing) * 0);
-  vertical-align: top;
-}
-.chroma .lntable {
-  display: block;
-  width: auto;
-  overflow: hidden;
-  padding-inline: calc(var(--spacing) * 4);
-  padding-block: calc(var(--spacing) * 3);
-  font-size: var(--text-base);
-  line-height: var(--tw-leading, var(--text-base--line-height));
-  border-spacing: 0;
-}
-.chroma .hl {
-  margin-inline: calc(var(--spacing) * -4);
-  display: block;
-  width: auto;
-  background-color: rgba(var(--color-primary-100), 1);
-  padding-inline: calc(var(--spacing) * 4);
-  &:is(.dark *) {
-    background-color: rgba(var(--color-primary-900), 1);
-  }
-}
-.chroma .lntd .hl {
-  margin: calc(var(--spacing) * 0);
-  padding: calc(var(--spacing) * 0);
-}
-.chroma .lnt, .chroma .ln {
-  margin-right: 0.4em;
-  padding-inline: 0.4em;
-  padding-block: calc(var(--spacing) * 0);
-  color: rgba(var(--color-neutral-600), 1);
-  &:is(.dark *) {
-    color: rgba(var(--color-neutral-300), 1);
-  }
-}
-.chroma .k, .chroma .kd, .chroma .kn, .chroma .kp, .chroma .kr, .chroma .nc, .chroma .fm, .chroma .nn, .chroma .vc, .chroma .o {
-  color: rgba(var(--color-primary-600), 1);
-  &:is(.dark *) {
-    color: rgba(var(--color-primary-300), 1);
-  }
-}
-.chroma .kc {
-  --tw-font-weight: var(--font-weight-semibold);
-  font-weight: var(--font-weight-semibold);
-  color: rgba(var(--color-secondary-400), 1);
-  &:is(.dark *) {
-    color: rgba(var(--color-secondary-500), 1);
-  }
-}
-.chroma .kt, .chroma .nv, .chroma .vi, .chroma .vm, .chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .il, .chroma .mo {
-  color: rgba(var(--color-secondary-400), 1);
-  &:is(.dark *) {
-    color: rgba(var(--color-secondary-600), 1);
-  }
-}
-.chroma .n, .chroma .nd, .chroma .ni, .chroma .nl {
-  color: rgba(var(--color-secondary-900), 1);
-  &:is(.dark *) {
-    color: rgba(var(--color-secondary-200), 1);
-  }
-}
-.chroma .na, .chroma .nb, .chroma .bp, .chroma .nx, .chroma .py, .chroma .nt {
-  color: rgba(var(--color-secondary-800), 1);
-  &:is(.dark *) {
-    color: rgba(var(--color-secondary-300), 1);
-  }
-}
-.chroma .no, .chroma .ne, .chroma .vg {
-  --tw-font-weight: var(--font-weight-semibold);
-  font-weight: var(--font-weight-semibold);
-  color: rgba(var(--color-secondary-400), 1);
-  &:is(.dark *) {
-    color: rgba(var(--color-secondary-500), 1);
-  }
-}
-.chroma .nf {
-  color: rgba(var(--color-secondary-600), 1);
-  &:is(.dark *) {
-    color: rgba(var(--color-secondary-500), 1);
-  }
-}
-.chroma .l, .chroma .ld, .chroma .s, .chroma .sa, .chroma .sb, .chroma .sc, .chroma .dl, .chroma .sd, .chroma .s2, .chroma .sh, .chroma .si, .chroma .sx, .chroma .s1, .chroma .gi, .chroma .go, .chroma .gp {
-  color: rgba(var(--color-primary-800), 1);
-  &:is(.dark *) {
-    color: rgba(var(--color-primary-400), 1);
-  }
-}
-.chroma .se {
-  --tw-font-weight: var(--font-weight-semibold);
-  font-weight: var(--font-weight-semibold);
-  color: rgba(var(--color-secondary-400), 1);
-  &:is(.dark *) {
-    color: rgba(var(--color-secondary-500), 1);
-  }
-}
-.chroma .sr, .chroma .ss {
-  --tw-font-weight: var(--font-weight-semibold);
-  font-weight: var(--font-weight-semibold);
-  color: rgba(var(--color-primary-800), 1);
-  &:is(.dark *) {
-    color: rgba(var(--color-primary-400), 1);
-  }
-}
-.chroma .ow {
-  --tw-font-weight: var(--font-weight-semibold);
-  font-weight: var(--font-weight-semibold);
-  color: rgba(var(--color-primary-400), 1);
-  &:is(.dark *) {
-    color: rgba(var(--color-primary-600), 1);
-  }
-}
-.chroma .c, .chroma .cm, .chroma .c1, .chroma .cs, .chroma .cp, .chroma .cpf {
-  color: rgba(var(--color-neutral-500), 1);
-  font-style: italic;
-  &:is(.dark *) {
-    color: rgba(var(--color-neutral-400), 1);
-  }
-}
-.chroma .ch {
-  --tw-font-weight: var(--font-weight-semibold);
-  font-weight: var(--font-weight-semibold);
-  color: rgba(var(--color-neutral-500), 1);
-  font-style: italic;
-  &:is(.dark *) {
-    color: rgba(var(--color-neutral-400), 1);
-  }
-}
-.chroma .ge {
-  font-style: italic;
-}
-.chroma .gh {
-  --tw-font-weight: var(--font-weight-semibold);
-  font-weight: var(--font-weight-semibold);
-  color: rgba(var(--color-neutral-500), 1);
-}
-.chroma .gs {
-  --tw-font-weight: var(--font-weight-semibold);
-  font-weight: var(--font-weight-semibold);
-}
-.chroma .gu, .chroma .gt {
-  color: rgba(var(--color-neutral-500), 1);
-}
-.chroma .gl {
-  text-decoration-line: underline;
-}
-.a11y-panel-enter-active {
-  animation: slideInFromTop 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
-}
-.a11y-panel-leave-active {
-  animation: slideOutToTop 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
-}
-.ios-toggle {
-  position: relative;
-  width: 42px;
-  height: 24px;
-  background: #e5e5e5;
-  border-radius: 12px;
-  cursor: pointer;
-  transition: background-color 0.3s ease;
-  pointer-events: auto;
-}
-.ios-toggle input {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  cursor: pointer;
-  z-index: 1;
-}
-.ios-toggle::after {
-  content: "";
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 20px;
-  height: 20px;
-  background: white;
-  border-radius: 50%;
-  transition: transform 0.3s ease, background-color 0.3s ease;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-  z-index: 0;
-}
-.ios-toggle input:checked + .toggle-track::after {
-  transform: translateX(18px);
-}
-.ios-toggle input:checked + .toggle-track {
-  background: rgba(var(--color-primary-500), 1);
-}
-.ios-toggle input:checked ~ .ios-toggle-ball {
-  transform: translateX(18px);
-}
-.ios-toggle.is-checked {
-  background: rgba(var(--color-primary-500), 1);
-}
-.ios-toggle:has(input:checked) {
-  background: rgba(var(--color-primary-500), 1);
-}
-.ios-toggle:has(input:checked)::after {
-  transform: translateX(18px);
-}
-.dark .ios-toggle {
-  background: #404040;
-}
-.dark .ios-toggle::after {
-  background: #f5f5f5;
-}
 @layer theme, base, components, utilities;
 @layer theme {
   :root, :host {
@@ -3516,6 +3280,244 @@ body.zen-mode-enable {
     }
   }
 }
+@layer utilities {
+  .prose .chroma {
+    position: static;
+    border-radius: var(--radius-md);
+    background-color: rgba(var(--color-neutral-50), 1);
+    color: rgba(var(--color-neutral-700), 1);
+    &:is(.dark *) {
+      background-color: rgba(var(--color-neutral-700), 1);
+    }
+    &:is(.dark *) {
+      color: rgba(var(--color-neutral-200), 1);
+    }
+  }
+  .chroma .lntd, .chroma .lntd pre {
+    margin: calc(var(--spacing) * 0);
+    --tw-border-style: none;
+    border-style: none;
+    padding: calc(var(--spacing) * 0);
+    vertical-align: top;
+  }
+  .chroma .lntable {
+    display: block;
+    width: auto;
+    overflow: hidden;
+    padding-inline: calc(var(--spacing) * 4);
+    padding-block: calc(var(--spacing) * 3);
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+    border-spacing: 0;
+  }
+  .chroma .hl {
+    margin-inline: calc(var(--spacing) * -4);
+    display: block;
+    width: auto;
+    background-color: rgba(var(--color-primary-100), 1);
+    padding-inline: calc(var(--spacing) * 4);
+    &:is(.dark *) {
+      background-color: rgba(var(--color-primary-900), 1);
+    }
+  }
+  .chroma .lntd .hl {
+    margin: calc(var(--spacing) * 0);
+    padding: calc(var(--spacing) * 0);
+  }
+  .chroma .lnt, .chroma .ln {
+    margin-right: 0.4em;
+    padding-inline: 0.4em;
+    padding-block: calc(var(--spacing) * 0);
+    color: rgba(var(--color-neutral-600), 1);
+    &:is(.dark *) {
+      color: rgba(var(--color-neutral-300), 1);
+    }
+  }
+  .chroma .k, .chroma .kd, .chroma .kn, .chroma .kp, .chroma .kr, .chroma .nc, .chroma .fm, .chroma .nn, .chroma .vc, .chroma .o {
+    color: rgba(var(--color-primary-600), 1);
+    &:is(.dark *) {
+      color: rgba(var(--color-primary-300), 1);
+    }
+  }
+  .chroma .kc {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+    color: rgba(var(--color-secondary-400), 1);
+    &:is(.dark *) {
+      color: rgba(var(--color-secondary-500), 1);
+    }
+  }
+  .chroma .kt, .chroma .nv, .chroma .vi, .chroma .vm, .chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .il, .chroma .mo {
+    color: rgba(var(--color-secondary-400), 1);
+    &:is(.dark *) {
+      color: rgba(var(--color-secondary-600), 1);
+    }
+  }
+  .chroma .n, .chroma .nd, .chroma .ni, .chroma .nl {
+    color: rgba(var(--color-secondary-900), 1);
+    &:is(.dark *) {
+      color: rgba(var(--color-secondary-200), 1);
+    }
+  }
+  .chroma .na, .chroma .nb, .chroma .bp, .chroma .nx, .chroma .py, .chroma .nt {
+    color: rgba(var(--color-secondary-800), 1);
+    &:is(.dark *) {
+      color: rgba(var(--color-secondary-300), 1);
+    }
+  }
+  .chroma .no, .chroma .ne, .chroma .vg {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+    color: rgba(var(--color-secondary-400), 1);
+    &:is(.dark *) {
+      color: rgba(var(--color-secondary-500), 1);
+    }
+  }
+  .chroma .nf {
+    color: rgba(var(--color-secondary-600), 1);
+    &:is(.dark *) {
+      color: rgba(var(--color-secondary-500), 1);
+    }
+  }
+  .chroma .l, .chroma .ld, .chroma .s, .chroma .sa, .chroma .sb, .chroma .sc, .chroma .dl, .chroma .sd, .chroma .s2, .chroma .sh, .chroma .si, .chroma .sx, .chroma .s1, .chroma .gi, .chroma .go, .chroma .gp {
+    color: rgba(var(--color-primary-800), 1);
+    &:is(.dark *) {
+      color: rgba(var(--color-primary-400), 1);
+    }
+  }
+  .chroma .se {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+    color: rgba(var(--color-secondary-400), 1);
+    &:is(.dark *) {
+      color: rgba(var(--color-secondary-500), 1);
+    }
+  }
+  .chroma .sr, .chroma .ss {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+    color: rgba(var(--color-primary-800), 1);
+    &:is(.dark *) {
+      color: rgba(var(--color-primary-400), 1);
+    }
+  }
+  .chroma .ow {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+    color: rgba(var(--color-primary-400), 1);
+    &:is(.dark *) {
+      color: rgba(var(--color-primary-600), 1);
+    }
+  }
+  .chroma .c, .chroma .cm, .chroma .c1, .chroma .cs, .chroma .cp, .chroma .cpf {
+    color: rgba(var(--color-neutral-500), 1);
+    font-style: italic;
+    &:is(.dark *) {
+      color: rgba(var(--color-neutral-400), 1);
+    }
+  }
+  .chroma .ch {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+    color: rgba(var(--color-neutral-500), 1);
+    font-style: italic;
+    &:is(.dark *) {
+      color: rgba(var(--color-neutral-400), 1);
+    }
+  }
+  .chroma .ge {
+    font-style: italic;
+  }
+  .chroma .gh {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+    color: rgba(var(--color-neutral-500), 1);
+  }
+  .chroma .gs {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+  .chroma .gu, .chroma .gt {
+    color: rgba(var(--color-neutral-500), 1);
+  }
+  .chroma .gl {
+    text-decoration-line: underline;
+  }
+}
+#zen-mode-button {
+  cursor: pointer;
+}
+.zen-mode {
+  position: relative;
+}
+body.zen-mode-enable {
+  #bmc-wbtn, .author {
+    display: none !important;
+  }
+}
+.a11y-panel-enter-active {
+  animation: slideInFromTop 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+.a11y-panel-leave-active {
+  animation: slideOutToTop 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+.ios-toggle {
+  position: relative;
+  width: 42px;
+  height: 24px;
+  background: #e5e5e5;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  pointer-events: auto;
+}
+.ios-toggle input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+  z-index: 1;
+}
+.ios-toggle::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 20px;
+  height: 20px;
+  background: white;
+  border-radius: 50%;
+  transition: transform 0.3s ease, background-color 0.3s ease;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  z-index: 0;
+}
+.ios-toggle input:checked + .toggle-track::after {
+  transform: translateX(18px);
+}
+.ios-toggle input:checked + .toggle-track {
+  background: rgba(var(--color-primary-500), 1);
+}
+.ios-toggle input:checked ~ .ios-toggle-ball {
+  transform: translateX(18px);
+}
+.ios-toggle.is-checked {
+  background: rgba(var(--color-primary-500), 1);
+}
+.ios-toggle:has(input:checked) {
+  background: rgba(var(--color-primary-500), 1);
+}
+.ios-toggle:has(input:checked)::after {
+  transform: translateX(18px);
+}
+.dark .ios-toggle {
+  background: #404040;
+}
+.dark .ios-toggle::after {
+  background: #f5f5f5;
+}
 body a, body button {
   transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
   transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -3921,10 +3923,6 @@ pre {
     }
   }
 }
-@property --tw-font-weight {
-  syntax: "*";
-  inherits: false;
-}
 @property --tw-translate-x {
   syntax: "*";
   inherits: false;
@@ -4048,6 +4046,10 @@ pre {
   syntax: "*";
   inherits: false;
 }
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-tracking {
   syntax: "*";
   inherits: false;
@@ -4252,7 +4254,6 @@ pre {
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
-      --tw-font-weight: initial;
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;
@@ -4280,6 +4281,7 @@ pre {
       --tw-gradient-via-position: 50%;
       --tw-gradient-to-position: 100%;
       --tw-leading: initial;
+      --tw-font-weight: initial;
       --tw-tracking: initial;
       --tw-ordinal: initial;
       --tw-slashed-zero: initial;
diff --git a/assets/css/main.css b/assets/css/main.css
index 5a495601..c270f924 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -1,11 +1,11 @@
 /*! Blowfish | MIT License | https://github.com/nunocoracao/blowfish */
 
-@import "./components/zen-mode.css";
-@import "./components/chroma.css";
-@import "./components/a11y.css";
+@config "../../tailwind.config.js";
 
 @import "tailwindcss";
-@config "../../tailwind.config.js";
+@import "./components/chroma.css" layer(utilities);
+@import "./components/zen-mode.css";
+@import "./components/a11y.css";
 
 body a,
 body button {