@hanzo/docs-base-ui 16.5.0 → 16.7.5

package/dist/style.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {
@@ -7,10 +7,10 @@
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
-    --color-black: #000;
     --spacing: 0.25rem;
     --breakpoint-sm: 40rem;
     --container-sm: 24rem;
+    --container-md: 28rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
@@ -20,9 +20,13 @@
     --text-lg: 1.125rem;
     --text-lg--line-height: calc(1.75 / 1.125);
     --text-2xl: 1.5rem;
+    --text-2xl--line-height: calc(2 / 1.5);
     --text-3xl: 1.875rem;
+    --text-6xl: 3.75rem;
+    --text-6xl--line-height: 1;
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
+    --font-weight-bold: 700;
     --radius-sm: 0.25rem;
     --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
@@ -32,6 +36,7 @@
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     --blur-xs: 4px;
     --blur-sm: 8px;
+    --blur-md: 12px;
     --blur-lg: 16px;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -231,9 +236,6 @@
   .invisible {
     visibility: hidden;
   }
-  .visible {
-    visibility: visible;
-  }
   .fd-step {
     &:before {
       background-color: var(--color-fd-secondary);
@@ -255,15 +257,15 @@
   .fd-steps {
     counter-reset: step;
     position: relative;
-    margin-left: calc(var(--spacing) * 2);
-    border-left-style: var(--tw-border-style);
-    border-left-width: 1px;
-    padding-left: calc(var(--spacing) * 6);
+    margin-inline-start: calc(var(--spacing) * 2);
+    border-inline-start-style: var(--tw-border-style);
+    border-inline-start-width: 1px;
+    padding-inline-start: calc(var(--spacing) * 6);
     @media (width >= 40rem) {
-      margin-left: calc(var(--spacing) * 4);
+      margin-inline-start: calc(var(--spacing) * 4);
     }
     @media (width >= 40rem) {
-      padding-left: calc(var(--spacing) * 7);
+      padding-inline-start: calc(var(--spacing) * 7);
     }
   }
   .absolute {
@@ -284,6 +286,9 @@
   .inset-0 {
     inset: calc(var(--spacing) * 0);
   }
+  .inset-x-0 {
+    inset-inline: calc(var(--spacing) * 0);
+  }
   .inset-x-2 {
     inset-inline: calc(var(--spacing) * 2);
   }
@@ -293,6 +298,12 @@
   .inset-y-2 {
     inset-block: calc(var(--spacing) * 2);
   }
+  .inset-s-0 {
+    inset-inline-start: calc(var(--spacing) * 0);
+  }
+  .start {
+    inset-inline-start: var(--spacing);
+  }
   .start-0 {
     inset-inline-start: calc(var(--spacing) * 0);
   }
@@ -302,6 +313,12 @@
   .start-4 {
     inset-inline-start: calc(var(--spacing) * 4);
   }
+  .start-6 {
+    inset-inline-start: calc(var(--spacing) * 6);
+  }
+  .end {
+    inset-inline-end: var(--spacing);
+  }
   .end-0 {
     inset-inline-end: calc(var(--spacing) * 0);
   }
@@ -320,9 +337,6 @@
   .top-\(--fd-docs-row-3\) {
     top: var(--fd-docs-row-3);
   }
-  .top-\(--fd-top\) {
-    top: var(--fd-top);
-  }
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
@@ -330,11 +344,14 @@
     top: calc(var(--spacing) * 1.5);
   }
   .top-1\/2 {
-    top: calc(1/2 * 100%);
+    top: calc(1 / 2 * 100%);
   }
   .top-2 {
     top: calc(var(--spacing) * 2);
   }
+  .top-2\.5 {
+    top: calc(var(--spacing) * 2.5);
+  }
   .top-4 {
     top: calc(var(--spacing) * 4);
   }
@@ -350,8 +367,11 @@
   .bottom-1\.5 {
     bottom: calc(var(--spacing) * 1.5);
   }
+  .bottom-26 {
+    bottom: calc(var(--spacing) * 26);
+  }
   .left-1\/2 {
-    left: calc(1/2 * 100%);
+    left: calc(1 / 2 * 100%);
   }
   .z-2 {
     z-index: 2;
@@ -413,6 +433,9 @@
   .my-0\! {
     margin-block: calc(var(--spacing) * 0) !important;
   }
+  .my-0\.5 {
+    margin-block: calc(var(--spacing) * 0.5);
+  }
   .my-4 {
     margin-block: calc(var(--spacing) * 4);
   }
@@ -425,6 +448,9 @@
   .-ms-1\.5 {
     margin-inline-start: calc(var(--spacing) * -1.5);
   }
+  .ms-1 {
+    margin-inline-start: calc(var(--spacing) * 1);
+  }
   .ms-2 {
     margin-inline-start: calc(var(--spacing) * 2);
   }
@@ -827,6 +853,9 @@
   .mt-1 {
     margin-top: calc(var(--spacing) * 1);
   }
+  .mt-4 {
+    margin-top: calc(var(--spacing) * 4);
+  }
   .mt-6 {
     margin-top: calc(var(--spacing) * 6);
   }
@@ -854,6 +883,9 @@
   .mb-auto {
     margin-bottom: auto;
   }
+  .box-border {
+    box-sizing: border-box;
+  }
   .fd-scroll-container {
     &::-webkit-scrollbar {
       width: 5px;
@@ -882,15 +914,16 @@
   .hidden {
     display: none;
   }
-  .inline {
-    display: inline;
-  }
   .inline-flex {
     display: inline-flex;
   }
   .table {
     display: table;
   }
+  .size-1 {
+    width: calc(var(--spacing) * 1);
+    height: calc(var(--spacing) * 1);
+  }
   .size-3 {
     width: calc(var(--spacing) * 3);
     height: calc(var(--spacing) * 3);
@@ -935,9 +968,6 @@
   .h-\(--fd-header-height\) {
     height: var(--fd-header-height);
   }
-  .h-\(--fd-height\) {
-    height: var(--fd-height);
-  }
   .h-\(--fd-toc-popover-height\) {
     height: var(--fd-toc-popover-height);
   }
@@ -950,6 +980,12 @@
   .h-1\.5 {
     height: calc(var(--spacing) * 1.5);
   }
+  .h-8\.5 {
+    height: calc(var(--spacing) * 8.5);
+  }
+  .h-9 {
+    height: calc(var(--spacing) * 9);
+  }
   .h-9\.5 {
     height: calc(var(--spacing) * 9.5);
   }
@@ -977,6 +1013,9 @@
   .max-h-\(--available-height\) {
     max-height: var(--available-height);
   }
+  .max-h-20 {
+    max-height: calc(var(--spacing) * 20);
+  }
   .max-h-\[50vh\] {
     max-height: 50vh;
   }
@@ -992,6 +1031,9 @@
   .min-h-0 {
     min-height: calc(var(--spacing) * 0);
   }
+  .min-h-11 {
+    min-height: calc(var(--spacing) * 11);
+  }
   .w-\(--anchor-width\) {
     width: var(--anchor-width);
   }
@@ -1007,6 +1049,9 @@
   .w-\(--positioner-width\) {
     width: var(--positioner-width);
   }
+  .w-\(--radix-popover-trigger-width\) {
+    width: var(--radix-popover-trigger-width);
+  }
   .w-0 {
     width: calc(var(--spacing) * 0);
   }
@@ -1016,18 +1061,21 @@
   .w-1\.5 {
     width: calc(var(--spacing) * 1.5);
   }
+  .w-1\/4 {
+    width: calc(1 / 4 * 100%);
+  }
   .w-4 {
     width: calc(var(--spacing) * 4);
   }
-  .w-\[25\%\] {
-    width: 25%;
-  }
   .w-\[85\%\] {
     width: 85%;
   }
   .w-\[calc\(100\%-1rem\)\] {
     width: calc(100% - 1rem);
   }
+  .w-\[calc\(100\%-var\(--removed-body-scroll-bar-size\,0px\)\)\] {
+    width: calc(100% - var(--removed-body-scroll-bar-size,0px));
+  }
   .w-fit {
     width: fit-content;
   }
@@ -1061,18 +1109,30 @@
   .max-w-\[900px\] {
     max-width: 900px;
   }
+  .max-w-\[1168px\] {
+    max-width: 1168px;
+  }
   .max-w-\[1200px\] {
     max-width: 1200px;
   }
   .max-w-\[1400px\] {
     max-width: 1400px;
   }
+  .max-w-full {
+    max-width: 100%;
+  }
+  .max-w-md {
+    max-width: var(--container-md);
+  }
   .max-w-screen-sm {
     max-width: var(--breakpoint-sm);
   }
   .max-w-sm {
     max-width: var(--container-sm);
   }
+  .max-w-svw {
+    max-width: 100svw;
+  }
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
@@ -1099,15 +1159,19 @@
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
   .-translate-x-1\/2 {
-    --tw-translate-x: calc(calc(1/2 * 100%) * -1);
+    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
   .translate-x-2 {
     --tw-translate-x: calc(var(--spacing) * 2);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .translate-x-\[calc\(-50\%-var\(--removed-body-scroll-bar-size\,0px\)\/2\)\] {
+    --tw-translate-x: calc(-50% - var(--removed-body-scroll-bar-size,0px) / 2);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-y-1\/2 {
-    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
+    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
   .-translate-y-full {
@@ -1127,9 +1191,18 @@
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
+  .animate-fd-fade-in {
+    animation: var(--animate-fd-fade-in);
+  }
   .animate-pulse {
     animation: var(--animate-pulse);
   }
+  .scroll-m-4 {
+    scroll-margin: calc(var(--spacing) * 4);
+  }
+  .scroll-m-20 {
+    scroll-margin: calc(var(--spacing) * 20);
+  }
   .scroll-m-24 {
     scroll-margin: calc(var(--spacing) * 24);
   }
@@ -1211,6 +1284,14 @@
   .gap-y-4 {
     row-gap: calc(var(--spacing) * 4);
   }
+  .divide-x {
+    :where(& > :not(:last-child)) {
+      --tw-divide-x-reverse: 0;
+      border-inline-style: var(--tw-border-style);
+      border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
+      border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
+    }
+  }
   .divide-y {
     :where(& > :not(:last-child)) {
       --tw-divide-y-reverse: 0;
@@ -1248,6 +1329,9 @@
   .overflow-y-auto {
     overflow-y: auto;
   }
+  .overflow-y-hidden {
+    overflow-y: hidden;
+  }
   .overscroll-contain {
     overscroll-behavior: contain;
   }
@@ -1272,10 +1356,6 @@
   .rounded-xl {
     border-radius: var(--radius-xl);
   }
-  .rounded-e-sm {
-    border-start-end-radius: var(--radius-sm);
-    border-end-end-radius: var(--radius-sm);
-  }
   .rounded-b-2xl {
     border-bottom-right-radius: var(--radius-2xl);
     border-bottom-left-radius: var(--radius-2xl);
@@ -1284,6 +1364,10 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+  .border-x {
+    border-inline-style: var(--tw-border-style);
+    border-inline-width: 1px;
+  }
   .border-s {
     border-inline-start-style: var(--tw-border-style);
     border-inline-start-width: 1px;
@@ -1308,6 +1392,10 @@
     border-left-style: var(--tw-border-style);
     border-left-width: 1px;
   }
+  .border-none {
+    --tw-border-style: none;
+    border-style: none;
+  }
   .border-fd-foreground\/10 {
     border-color: color-mix(in srgb, hsl(0, 0%, 3.9%) 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1335,6 +1423,12 @@
   .bg-fd-background {
     background-color: var(--color-fd-background);
   }
+  .bg-fd-background\/60 {
+    background-color: color-mix(in srgb, hsl(0, 0%, 96%) 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-fd-background) 60%, transparent);
+    }
+  }
   .bg-fd-background\/80 {
     background-color: color-mix(in srgb, hsl(0, 0%, 96%) 80%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1368,6 +1462,12 @@
       background-color: color-mix(in oklab, var(--color-fd-popover) 60%, transparent);
     }
   }
+  .bg-fd-popover\/80 {
+    background-color: color-mix(in srgb, hsl(0, 0%, 98%) 80%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-fd-popover) 80%, transparent);
+    }
+  }
   .bg-fd-primary {
     background-color: var(--color-fd-primary);
   }
@@ -1389,9 +1489,18 @@
   .bg-transparent {
     background-color: transparent;
   }
+  .mask-\[linear-gradient\(to_bottom\,transparent\,white_--spacing\(14\)\,white_calc\(100\%---spacing\(14\)\)\,transparent\)\] {
+    mask-image: linear-gradient(to bottom,transparent,white calc(var(--spacing) * 14),white calc(100% - calc(var(--spacing) * 14)),transparent);
+  }
+  .mask-\[linear-gradient\(to_bottom\,transparent\,white_12px\,white_calc\(100\%-12px\)\,transparent\)\] {
+    mask-image: linear-gradient(to bottom,transparent,white 12px,white calc(100% - 12px),transparent);
+  }
   .mask-\[linear-gradient\(to_bottom\,transparent\,white_16px\,white_calc\(100\%-16px\)\,transparent\)\] {
     mask-image: linear-gradient(to bottom,transparent,white 16px,white calc(100% - 16px),transparent);
   }
+  .mask-\[linear-gradient\(to_bottom\,white\,white_30px\,transparent_80px\)\] {
+    mask-image: linear-gradient(to bottom,white,white 30px,transparent 80px);
+  }
   .fill-\(--callout-color\) {
     fill: var(--callout-color);
   }
@@ -1407,6 +1516,9 @@
       stroke: color-mix(in oklab, var(--color-fd-foreground) 10%, transparent);
     }
   }
+  .stroke-fd-primary {
+    stroke: var(--color-fd-primary);
+  }
   .p-0 {
     padding: calc(var(--spacing) * 0);
   }
@@ -1428,6 +1540,12 @@
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
+  .px-0\.5 {
+    padding-inline: calc(var(--spacing) * 0.5);
+  }
+  .px-1 {
+    padding-inline: calc(var(--spacing) * 1);
+  }
   .px-1\.5 {
     padding-inline: calc(var(--spacing) * 1.5);
   }
@@ -1446,6 +1564,12 @@
   .px-6 {
     padding-inline: calc(var(--spacing) * 6);
   }
+  .px-8 {
+    padding-inline: calc(var(--spacing) * 8);
+  }
+  .px-px {
+    padding-inline: 1px;
+  }
   .py-0\.5 {
     padding-block: calc(var(--spacing) * 0.5);
   }
@@ -1470,9 +1594,15 @@
   .py-6 {
     padding-block: calc(var(--spacing) * 6);
   }
+  .py-10 {
+    padding-block: calc(var(--spacing) * 10);
+  }
   .py-12 {
     padding-block: calc(var(--spacing) * 12);
   }
+  .py-16 {
+    padding-block: calc(var(--spacing) * 16);
+  }
   .ps-1 {
     padding-inline-start: calc(var(--spacing) * 1);
   }
@@ -1506,6 +1636,9 @@
   .pt-0 {
     padding-top: calc(var(--spacing) * 0);
   }
+  .pt-0\.5 {
+    padding-top: calc(var(--spacing) * 0.5);
+  }
   .pt-2 {
     padding-top: calc(var(--spacing) * 2);
   }
@@ -1515,6 +1648,9 @@
   .pt-12 {
     padding-top: calc(var(--spacing) * 12);
   }
+  .pr-\(--removed-body-scroll-bar-size\,0\) {
+    padding-right: var(--removed-body-scroll-bar-size,0);
+  }
   .pb-1\.5 {
     padding-bottom: calc(var(--spacing) * 1.5);
   }
@@ -1524,6 +1660,9 @@
   .pb-4 {
     padding-bottom: calc(var(--spacing) * 4);
   }
+  .pb-24 {
+    padding-bottom: calc(var(--spacing) * 24);
+  }
   .text-center {
     text-align: center;
   }
@@ -1536,6 +1675,14 @@
   .font-mono {
     font-family: var(--font-mono);
   }
+  .text-2xl {
+    font-size: var(--text-2xl);
+    line-height: var(--tw-leading, var(--text-2xl--line-height));
+  }
+  .text-6xl {
+    font-size: var(--text-6xl);
+    line-height: var(--tw-leading, var(--text-6xl--line-height));
+  }
   .text-base {
     font-size: var(--text-base);
     line-height: var(--tw-leading, var(--text-base--line-height));
@@ -1565,6 +1712,10 @@
     --tw-leading: 1;
     line-height: 1;
   }
+  .font-bold {
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+  }
   .font-medium {
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
@@ -1661,12 +1812,6 @@
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .shadow-black\/50 {
-    --tw-shadow-color: color-mix(in srgb, #000 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 50%, transparent) var(--tw-shadow-alpha), transparent);
-    }
-  }
   .outline {
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
@@ -1679,6 +1824,11 @@
     -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
     backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
   }
+  .backdrop-blur-md {
+    --tw-backdrop-blur: blur(var(--blur-md));
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
   .backdrop-blur-sm {
     --tw-backdrop-blur: blur(var(--blur-sm));
     -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
@@ -1694,11 +1844,26 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-\[box-shadow\,background-color\,border-radius\] {
+    transition-property: box-shadow,background-color,border-radius;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-\[clip-path\] {
+    transition-property: clip-path;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-\[grid-template-columns\] {
     transition-property: grid-template-columns;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-\[height\,opacity\] {
+    transition-property: height,opacity;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-\[height\] {
     transition-property: height;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1719,8 +1884,13 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-  .transition-\[top\,height\] {
-    transition-property: top,height;
+  .transition-\[opacity\,translate\,color\] {
+    transition-property: opacity,translate,color;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-\[opacity\,translate\] {
+    transition-property: opacity,translate;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
@@ -1870,6 +2040,16 @@
       flex-direction: column;
     }
   }
+  .\*\:rounded-full {
+    :is(& > *) {
+      border-radius: calc(infinity * 1px);
+    }
+  }
+  .\*\:rounded-lg {
+    :is(& > *) {
+      border-radius: var(--radius-lg);
+    }
+  }
   .\*\:border-b {
     :is(& > *) {
       border-bottom-style: var(--tw-border-style);
@@ -1881,11 +2061,16 @@
       margin-bottom: calc(var(--spacing) * 2);
     }
   }
-  .group-data-\[active\]\:bg-fd-primary {
+  .group-data-active\:bg-fd-primary {
     &:is(:where(.group)[data-active] *) {
       background-color: var(--color-fd-primary);
     }
   }
+  .group-data-panel-open\:rotate-180 {
+    &:is(:where(.group)[data-panel-open] *) {
+      rotate: 180deg;
+    }
+  }
   .group-data-\[open\]\:rotate-180 {
     &:is(:where(.group)[data-open] *) {
       rotate: 180deg;
@@ -1896,11 +2081,6 @@
       rotate: 90deg;
     }
   }
-  .group-data-\[panel-open\]\:rotate-180 {
-    &:is(:where(.group)[data-panel-open] *) {
-      rotate: 180deg;
-    }
-  }
   .peer-hover\:opacity-100 {
     &:is(:where(.peer):hover ~ *) {
       @media (hover: hover) {
@@ -2136,6 +2316,120 @@
       color: var(--color-fd-accent-foreground);
     }
   }
+  .data-closed\:animate-fd-dialog-out {
+    &[data-closed] {
+      animation: var(--animate-fd-dialog-out);
+    }
+  }
+  .data-closed\:animate-fd-fade-out {
+    &[data-closed] {
+      animation: var(--animate-fd-fade-out);
+    }
+  }
+  .data-ending-style\:h-0 {
+    &[data-ending-style] {
+      height: calc(var(--spacing) * 0);
+    }
+  }
+  .data-ending-style\:scale-90 {
+    &[data-ending-style] {
+      --tw-scale-x: 90%;
+      --tw-scale-y: 90%;
+      --tw-scale-z: 90%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
+  }
+  .data-ending-style\:opacity-0 {
+    &[data-ending-style] {
+      opacity: 0%;
+    }
+  }
+  .data-ending-style\:duration-150 {
+    &[data-ending-style] {
+      --tw-duration: 150ms;
+      transition-duration: 150ms;
+    }
+  }
+  .data-instant\:transition-none {
+    &[data-instant] {
+      transition-property: none;
+    }
+  }
+  .data-open\:animate-fd-dialog-in {
+    &[data-open] {
+      animation: var(--animate-fd-dialog-in);
+    }
+  }
+  .data-open\:animate-fd-fade-in {
+    &[data-open] {
+      animation: var(--animate-fd-fade-in);
+    }
+  }
+  .data-open\:bg-fd-accent {
+    &[data-open] {
+      background-color: var(--color-fd-accent);
+    }
+  }
+  .data-open\:text-fd-accent-foreground {
+    &[data-open] {
+      color: var(--color-fd-accent-foreground);
+    }
+  }
+  .data-popup-open\:text-fd-primary {
+    &[data-popup-open] {
+      color: var(--color-fd-primary);
+    }
+  }
+  .data-starting-style\:h-0 {
+    &[data-starting-style] {
+      height: calc(var(--spacing) * 0);
+    }
+  }
+  .data-starting-style\:scale-90 {
+    &[data-starting-style] {
+      --tw-scale-x: 90%;
+      --tw-scale-y: 90%;
+      --tw-scale-z: 90%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
+  }
+  .data-starting-style\:opacity-0 {
+    &[data-starting-style] {
+      opacity: 0%;
+    }
+  }
+  .data-ending-style\:data-\[activation-direction\=left\]\:translate-x-1\/2 {
+    &[data-ending-style] {
+      &[data-activation-direction="left"] {
+        --tw-translate-x: calc(1 / 2 * 100%);
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+    }
+  }
+  .data-starting-style\:data-\[activation-direction\=left\]\:-translate-x-1\/2 {
+    &[data-starting-style] {
+      &[data-activation-direction="left"] {
+        --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+    }
+  }
+  .data-ending-style\:data-\[activation-direction\=right\]\:-translate-x-1\/2 {
+    &[data-ending-style] {
+      &[data-activation-direction="right"] {
+        --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+    }
+  }
+  .data-starting-style\:data-\[activation-direction\=right\]\:translate-x-1\/2 {
+    &[data-starting-style] {
+      &[data-activation-direction="right"] {
+        --tw-translate-x: calc(1 / 2 * 100%);
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+    }
+  }
   .data-\[active\]\:border-fd-primary {
     &[data-active] {
       border-color: var(--color-fd-primary);
@@ -2224,16 +2518,6 @@
       }
     }
   }
-  .data-\[closed\]\:animate-fd-dialog-out {
-    &[data-closed] {
-      animation: var(--animate-fd-dialog-out);
-    }
-  }
-  .data-\[closed\]\:animate-fd-fade-out {
-    &[data-closed] {
-      animation: var(--animate-fd-fade-out);
-    }
-  }
   .data-\[closed\]\:animate-fd-popover-out {
     &[data-closed] {
       animation: var(--animate-fd-popover-out);
@@ -2257,115 +2541,149 @@
       height: calc(var(--spacing) * 0);
     }
   }
-  .data-\[ending-style\]\:scale-90 {
-    &[data-ending-style] {
-      --tw-scale-x: 90%;
-      --tw-scale-y: 90%;
-      --tw-scale-z: 90%;
-      scale: var(--tw-scale-x) var(--tw-scale-y);
+  .data-\[inactive\]\:hidden {
+    &[data-inactive] {
+      display: none;
     }
   }
-  .data-\[ending-style\]\:opacity-0 {
-    &[data-ending-style] {
-      opacity: 0%;
+  .data-\[open\]\:animate-fd-popover-in {
+    &[data-open] {
+      animation: var(--animate-fd-popover-in);
     }
   }
-  .data-\[ending-style\]\:duration-150 {
-    &[data-ending-style] {
-      --tw-duration: 150ms;
-      transition-duration: 150ms;
+  .data-\[side\=bottom\]\:before\:top-\[-10px\] {
+    &[data-side="bottom"] {
+      &::before {
+        content: var(--tw-content);
+        top: -10px;
+      }
     }
   }
-  .data-\[ending-style\]\:data-\[activation-direction\=left\]\:translate-x-1\/2 {
-    &[data-ending-style] {
-      &[data-activation-direction="left"] {
-        --tw-translate-x: calc(1/2 * 100%);
-        translate: var(--tw-translate-x) var(--tw-translate-y);
+  .data-\[side\=bottom\]\:before\:right-0 {
+    &[data-side="bottom"] {
+      &::before {
+        content: var(--tw-content);
+        right: calc(var(--spacing) * 0);
       }
     }
   }
-  .data-\[ending-style\]\:data-\[activation-direction\=right\]\:-translate-x-1\/2 {
-    &[data-ending-style] {
-      &[data-activation-direction="right"] {
-        --tw-translate-x: calc(calc(1/2 * 100%) * -1);
-        translate: var(--tw-translate-x) var(--tw-translate-y);
+  .data-\[side\=bottom\]\:before\:left-0 {
+    &[data-side="bottom"] {
+      &::before {
+        content: var(--tw-content);
+        left: calc(var(--spacing) * 0);
       }
     }
   }
-  .data-\[inactive\]\:hidden {
-    &[data-inactive] {
-      display: none;
+  .data-\[side\=bottom\]\:before\:h-2\.5 {
+    &[data-side="bottom"] {
+      &::before {
+        content: var(--tw-content);
+        height: calc(var(--spacing) * 2.5);
+      }
     }
   }
-  .data-\[instant\]\:transition-none {
-    &[data-instant] {
-      transition-property: none;
+  .data-\[side\=left\]\:before\:top-0 {
+    &[data-side="left"] {
+      &::before {
+        content: var(--tw-content);
+        top: calc(var(--spacing) * 0);
+      }
     }
   }
-  .data-\[open\]\:animate-fd-dialog-in {
-    &[data-open] {
-      animation: var(--animate-fd-dialog-in);
+  .data-\[side\=left\]\:before\:right-\[-10px\] {
+    &[data-side="left"] {
+      &::before {
+        content: var(--tw-content);
+        right: -10px;
+      }
     }
   }
-  .data-\[open\]\:animate-fd-fade-in {
-    &[data-open] {
-      animation: var(--animate-fd-fade-in);
+  .data-\[side\=left\]\:before\:bottom-0 {
+    &[data-side="left"] {
+      &::before {
+        content: var(--tw-content);
+        bottom: calc(var(--spacing) * 0);
+      }
     }
   }
-  .data-\[open\]\:animate-fd-popover-in {
-    &[data-open] {
-      animation: var(--animate-fd-popover-in);
+  .data-\[side\=left\]\:before\:w-2\.5 {
+    &[data-side="left"] {
+      &::before {
+        content: var(--tw-content);
+        width: calc(var(--spacing) * 2.5);
+      }
     }
   }
-  .data-\[open\]\:bg-fd-accent {
-    &[data-open] {
-      background-color: var(--color-fd-accent);
+  .data-\[side\=right\]\:before\:top-0 {
+    &[data-side="right"] {
+      &::before {
+        content: var(--tw-content);
+        top: calc(var(--spacing) * 0);
+      }
     }
   }
-  .data-\[open\]\:text-fd-accent-foreground {
-    &[data-open] {
-      color: var(--color-fd-accent-foreground);
+  .data-\[side\=right\]\:before\:bottom-0 {
+    &[data-side="right"] {
+      &::before {
+        content: var(--tw-content);
+        bottom: calc(var(--spacing) * 0);
+      }
     }
   }
-  .data-\[popup-open\]\:text-fd-primary {
-    &[data-popup-open] {
-      color: var(--color-fd-primary);
+  .data-\[side\=right\]\:before\:left-\[-10px\] {
+    &[data-side="right"] {
+      &::before {
+        content: var(--tw-content);
+        left: -10px;
+      }
     }
   }
-  .data-\[starting-style\]\:h-0 {
-    &[data-starting-style] {
-      height: calc(var(--spacing) * 0);
+  .data-\[side\=right\]\:before\:w-2\.5 {
+    &[data-side="right"] {
+      &::before {
+        content: var(--tw-content);
+        width: calc(var(--spacing) * 2.5);
+      }
     }
   }
-  .data-\[starting-style\]\:scale-90 {
-    &[data-starting-style] {
-      --tw-scale-x: 90%;
-      --tw-scale-y: 90%;
-      --tw-scale-z: 90%;
-      scale: var(--tw-scale-x) var(--tw-scale-y);
+  .data-\[side\=top\]\:before\:right-0 {
+    &[data-side="top"] {
+      &::before {
+        content: var(--tw-content);
+        right: calc(var(--spacing) * 0);
+      }
     }
   }
-  .data-\[starting-style\]\:opacity-0 {
-    &[data-starting-style] {
-      opacity: 0%;
+  .data-\[side\=top\]\:before\:bottom-\[-10px\] {
+    &[data-side="top"] {
+      &::before {
+        content: var(--tw-content);
+        bottom: -10px;
+      }
     }
   }
-  .data-\[starting-style\]\:data-\[activation-direction\=left\]\:-translate-x-1\/2 {
-    &[data-starting-style] {
-      &[data-activation-direction="left"] {
-        --tw-translate-x: calc(calc(1/2 * 100%) * -1);
-        translate: var(--tw-translate-x) var(--tw-translate-y);
+  .data-\[side\=top\]\:before\:left-0 {
+    &[data-side="top"] {
+      &::before {
+        content: var(--tw-content);
+        left: calc(var(--spacing) * 0);
       }
     }
   }
-  .data-\[starting-style\]\:data-\[activation-direction\=right\]\:translate-x-1\/2 {
-    &[data-starting-style] {
-      &[data-activation-direction="right"] {
-        --tw-translate-x: calc(1/2 * 100%);
-        translate: var(--tw-translate-x) var(--tw-translate-y);
+  .data-\[side\=top\]\:before\:h-2\.5 {
+    &[data-side="top"] {
+      &::before {
+        content: var(--tw-content);
+        height: calc(var(--spacing) * 2.5);
       }
     }
   }
+  .data-\[starting-style\]\:h-0 {
+    &[data-starting-style] {
+      height: calc(var(--spacing) * 0);
+    }
+  }
   .data-\[state\=closed\]\:animate-fd-fade-out {
     &[data-state="closed"] {
       animation: var(--animate-fd-fade-out);
@@ -2386,6 +2704,11 @@
       animation: var(--animate-fd-sidebar-in);
     }
   }
+  .data-\[state\=open\]\:bg-fd-accent {
+    &[data-state="open"] {
+      background-color: var(--color-fd-accent);
+    }
+  }
   .data-\[state\=open\]\:text-fd-accent-foreground {
     &[data-state="open"] {
       color: var(--color-fd-accent-foreground);
@@ -2414,6 +2737,18 @@
       display: none;
     }
   }
+  .max-lg\:rounded-b-2xl {
+    @media (width < 64rem) {
+      border-bottom-right-radius: var(--radius-2xl);
+      border-bottom-left-radius: var(--radius-2xl);
+    }
+  }
+  .max-lg\:shadow-lg {
+    @media (width < 64rem) {
+      --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
   .max-md\:flex {
     @media (width < 48rem) {
       display: flex;
@@ -2445,16 +2780,67 @@
       padding: calc(var(--spacing) * 1.5);
     }
   }
+  .max-sm\:mt-2 {
+    @media (width < 40rem) {
+      margin-top: calc(var(--spacing) * 2);
+    }
+  }
   .max-sm\:hidden {
     @media (width < 40rem) {
       display: none;
     }
   }
+  .sm\:bottom-6 {
+    @media (width >= 40rem) {
+      bottom: calc(var(--spacing) * 6);
+    }
+  }
   .sm\:hidden {
     @media (width >= 40rem) {
       display: none;
     }
   }
+  .sm\:max-w-\[380px\] {
+    @media (width >= 40rem) {
+      max-width: 380px;
+    }
+  }
+  .sm\:max-w-\[400px\] {
+    @media (width >= 40rem) {
+      max-width: 400px;
+    }
+  }
+  .sm\:flex-row {
+    @media (width >= 40rem) {
+      flex-direction: row;
+    }
+  }
+  .sm\:items-center {
+    @media (width >= 40rem) {
+      align-items: center;
+    }
+  }
+  .sm\:justify-end {
+    @media (width >= 40rem) {
+      justify-content: flex-end;
+    }
+  }
+  .sm\:rounded-2xl {
+    @media (width >= 40rem) {
+      border-radius: var(--radius-2xl);
+    }
+  }
+  .sm\:border {
+    @media (width >= 40rem) {
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+    }
+  }
+  .sm\:p-1 {
+    @media (width >= 40rem) {
+      padding: calc(var(--spacing) * 1);
+    }
+  }
   .md\:top-\[calc\(50\%-250px\)\] {
     @media (width >= 48rem) {
       top: calc(50% - 250px);
@@ -2513,14 +2899,10 @@
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
   }
-  .lg\:flex-row {
-    @media (width >= 64rem) {
-      flex-direction: row;
-    }
-  }
-  .lg\:items-center {
+  .lg\:text-sm {
     @media (width >= 64rem) {
-      align-items: center;
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
     }
   }
   .xl\:hidden {
@@ -2560,10 +2942,9 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
-  .rtl\:-scale-x-100 {
+  .rtl\:rotate-90 {
     &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
-      --tw-scale-x: calc(100% * -1);
-      scale: var(--tw-scale-x) var(--tw-scale-y);
+      rotate: 90deg;
     }
   }
   .rtl\:rotate-180 {
@@ -2577,41 +2958,41 @@
     }
   }
   .layout\:\[--fd-header-height\:--spacing\(14\)\] {
-    #nd-docs-layout:has(&), #nd-notebook-layout:has(&), #nd-home-layout:has(&) {
+    #nd-docs-layout:has(&), #nd-notebook-layout:has(&), #nd-home-layout:has(&), #nd-flux-layout:has(&) {
       --fd-header-height: calc(var(--spacing) * 14);
     }
   }
   .max-xl\:layout\:\[--fd-toc-popover-height\:--spacing\(10\)\] {
     @media (width < 80rem) {
-      #nd-docs-layout:has(&), #nd-notebook-layout:has(&), #nd-home-layout:has(&) {
+      #nd-docs-layout:has(&), #nd-notebook-layout:has(&), #nd-home-layout:has(&), #nd-flux-layout:has(&) {
         --fd-toc-popover-height: calc(var(--spacing) * 10);
       }
     }
   }
   .max-md\:layout\:\[--fd-header-height\:--spacing\(14\)\] {
     @media (width < 48rem) {
-      #nd-docs-layout:has(&), #nd-notebook-layout:has(&), #nd-home-layout:has(&) {
+      #nd-docs-layout:has(&), #nd-notebook-layout:has(&), #nd-home-layout:has(&), #nd-flux-layout:has(&) {
         --fd-header-height: calc(var(--spacing) * 14);
       }
     }
   }
   .md\:layout\:\[--fd-sidebar-width\:268px\] {
     @media (width >= 48rem) {
-      #nd-docs-layout:has(&), #nd-notebook-layout:has(&), #nd-home-layout:has(&) {
+      #nd-docs-layout:has(&), #nd-notebook-layout:has(&), #nd-home-layout:has(&), #nd-flux-layout:has(&) {
         --fd-sidebar-width: 268px;
       }
     }
   }
   .lg\:layout\:\[--fd-header-height\:--spacing\(24\)\] {
     @media (width >= 64rem) {
-      #nd-docs-layout:has(&), #nd-notebook-layout:has(&), #nd-home-layout:has(&) {
+      #nd-docs-layout:has(&), #nd-notebook-layout:has(&), #nd-home-layout:has(&), #nd-flux-layout:has(&) {
         --fd-header-height: calc(var(--spacing) * 24);
       }
     }
   }
   .xl\:layout\:\[--fd-toc-width\:268px\] {
     @media (width >= 80rem) {
-      #nd-docs-layout:has(&), #nd-notebook-layout:has(&), #nd-home-layout:has(&) {
+      #nd-docs-layout:has(&), #nd-notebook-layout:has(&), #nd-home-layout:has(&), #nd-flux-layout:has(&) {
         --fd-toc-width: 268px;
       }
     }
@@ -2657,6 +3038,11 @@
       flex-shrink: 0;
     }
   }
+  .\[\&_svg\]\:text-fd-muted-foreground {
+    & svg {
+      color: var(--color-fd-muted-foreground);
+    }
+  }
   .\[\&\>figure\:only-child\]\:-m-4 {
     &>figure:only-child {
       margin: calc(var(--spacing) * -4);
@@ -2698,85 +3084,85 @@
   --color-fd-secondary: hsl(0, 0%, 18%);
   --color-fd-muted-foreground: hsl(0, 0%, 72%);
 }
+:root {
+  --fd-sidebar-drawer-offset: 100%;
+}
+[dir='rtl'] {
+  --fd-sidebar-drawer-offset: -100%;
+}
+@layer base {
+  *, ::after, ::before, ::backdrop, ::file-selector-button {
+    border-color: var(--color-fd-border, currentColor);
+  }
+  body {
+    background-color: var(--color-fd-background);
+    color: var(--color-fd-foreground);
+  }
+}
 .shiki:not(.not-fumadocs-codeblock *) {
   --padding-left: calc(var(--spacing) * 4);
   --padding-right: calc(var(--spacing) * 4);
   code span {
     color: var(--shiki-light);
+    font-style: var(--shiki-light-font-style);
   }
-}
-.dark .shiki:not(.not-fumadocs-codeblock *) {
-  code span {
-    color: var(--shiki-dark);
-  }
-}
-:is(pre *):is(.shiki *):not(.not-fumadocs-codeblock *) {
-  .line& {
+  .line {
     position: relative;
-    min-height: 1lh;
     padding-left: var(--padding-left);
     padding-right: var(--padding-right);
   }
-  .has-focused .line&:not(.focused) {
+  .line:empty {
+    height: 1lh;
+  }
+  &.has-focused .line:not(.focused) {
     filter: blur(2px);
     transition: filter 200ms;
   }
-  .has-focused:hover .line&:not(.focused) {
+  &.has-focused:hover .line:not(.focused) {
     filter: blur(0);
   }
-  [data-line-numbers] .twoslash-meta-line& {
-    padding-left: calc(var(--padding-left) + 7 * var(--spacing));
-  }
-  [data-line-numbers] .line& {
-    counter-increment: line;
-    padding-left: calc(var(--padding-left) + 7 * var(--spacing));
-  }
-  [data-line-numbers] .line&::after {
-    position: absolute;
-    content: counter(line);
-    color: var(--fd-counter-color, hsl(0, 0%, 45.1%));
-    @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix( in oklab, var(--fd-counter-color, var(--color-fd-muted-foreground)) 60%, transparent );
-    }
-    top: calc(var(--spacing) * 0);
-    left: calc(var(--spacing) * 4);
-  }
-  .diff&::before {
+  .diff::before {
     position: absolute;
     left: calc(var(--spacing) * 1.5);
   }
-  .diff.remove& {
+  .diff.remove {
     opacity: 0.7;
     --fd-counter-color: var(--color-fd-diff-remove-symbol);
     background-color: var(--color-fd-diff-remove);
   }
-  .diff.remove&::before {
+  .diff.remove::before {
     content: '-';
     color: var(--color-fd-diff-remove-symbol);
   }
-  .diff.add& {
+  .diff.add {
     --fd-counter-color: var(--color-fd-diff-add-symbol);
     background-color: var(--color-fd-diff-add);
   }
-  .diff.add&::before {
+  .diff.add::before {
     content: '+';
     color: var(--color-fd-diff-add-symbol);
   }
-  .highlighted& {
+  .highlighted {
     --fd-counter-color: var(--color-fd-primary);
     padding-left: calc(var(--padding-left) - 2px);
+    background-color: color-mix(in srgb, hsl(0, 0%, 9%) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-fd-primary) 10%, transparent);
+    }
+  }
+  .highlighted::after {
+    position: absolute;
+    content: '';
+    inset-block: calc(var(--spacing) * 0);
+    left: calc(var(--spacing) * 0);
     border-left-style: var(--tw-border-style);
     border-left-width: 2px;
     border-color: color-mix(in srgb, hsl(0, 0%, 9%) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       border-color: color-mix(in oklab, var(--color-fd-primary) 50%, transparent);
     }
-    background-color: color-mix(in srgb, hsl(0, 0%, 9%) 10%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-fd-primary) 10%, transparent);
-    }
   }
-  .highlighted-word& {
+  .highlighted-word {
     padding: 1px;
     margin-block: -1px;
     border-radius: var(--radius-md);
@@ -2793,20 +3179,30 @@
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
   }
-}
-:root {
-  --fd-sidebar-drawer-offset: 100%;
-}
-[dir='rtl'] {
-  --fd-sidebar-drawer-offset: -100%;
-}
-@layer base {
-  *, ::after, ::before, ::backdrop, ::file-selector-button {
-    border-color: var(--color-fd-border, currentColor);
+  &[data-line-numbers] .twoslash-meta-line {
+    padding-left: calc(var(--padding-left) + 7 * var(--spacing));
   }
-  body {
-    background-color: var(--color-fd-background);
-    color: var(--color-fd-foreground);
+  &[data-line-numbers] .line {
+    counter-increment: line;
+    padding-left: calc(var(--padding-left) + 7 * var(--spacing));
+  }
+  &[data-line-numbers] .line::after {
+    position: absolute;
+    content: counter(line);
+    color: var(--fd-counter-color, hsl(0, 0%, 45.1%));
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix( in oklab, var(--fd-counter-color, var(--color-fd-muted-foreground)) 60%, transparent );
+    }
+    inset-block: calc(var(--spacing) * 0);
+    left: calc(var(--spacing) * 0);
+    width: calc(var(--spacing) * 7);
+    text-align: right;
+  }
+}
+.dark .shiki:not(.not-fumadocs-codeblock *) {
+  code span {
+    color: var(--shiki-dark);
+    font-style: var(--shiki-dark-font-style);
   }
 }
 @layer base {
@@ -2856,6 +3252,11 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-divide-x-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
 @property --tw-divide-y-reverse {
   syntax: "*";
   inherits: false;
@@ -3129,6 +3530,7 @@
       --tw-rotate-z: initial;
       --tw-skew-x: initial;
       --tw-skew-y: initial;
+      --tw-divide-x-reverse: 0;
       --tw-divide-y-reverse: 0;
       --tw-leading: initial;
       --tw-font-weight: initial;