npm - @designtools/docs - Versions diffs - 0.1.0 → 0.2.1 - Mend

@designtools/docs 0.1.0 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (56) hide show

package/dist/styles.css CHANGED Viewed

@@ -1,7 +1,7 @@
 /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
 @layer properties {
   @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-    :where([data-designtools]) *, *:where([data-designtools]), :where([data-designtools]) :before, :before:where([data-designtools]), :where([data-designtools]) :after, :after:where([data-designtools]), :where([data-designtools]) ::backdrop, :where([data-designtools])::backdrop {
+    :where([data-designtools]) *:not([data-docs-content] *), *:where([data-designtools]):not([data-docs-content] *), :where([data-designtools]) :not([data-docs-content] *):before, :where([data-designtools]):not([data-docs-content] *):before, :where([data-designtools]) :not([data-docs-content] *):after, :where([data-designtools]):not([data-docs-content] *):after, :where([data-designtools]) :not([data-docs-content] *)::backdrop, :where([data-designtools]):not([data-docs-content] *)::backdrop {
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;
@@ -10,6 +10,7 @@
       --tw-rotate-z: initial;
       --tw-skew-x: initial;
       --tw-skew-y: initial;
+      --tw-space-x-reverse: 0;
       --tw-divide-y-reverse: 0;
       --tw-border-style: solid;
       --tw-gradient-position: initial;
@@ -79,14 +80,14 @@
 @layer theme;
 @layer base {
-  :where([data-designtools]) *, *:where([data-designtools]), :where([data-designtools]) :after, :after:where([data-designtools]), :where([data-designtools]) :before, :before:where([data-designtools]), :where([data-designtools]) ::backdrop, :where([data-designtools])::backdrop {
+  :where([data-designtools]) *:not([data-docs-content] *), *:where([data-designtools]):not([data-docs-content] *), :where([data-designtools]) :not([data-docs-content] *):after, :where([data-designtools]):not([data-docs-content] *):after, :where([data-designtools]) :not([data-docs-content] *):before, :where([data-designtools]):not([data-docs-content] *):before, :where([data-designtools]) :not([data-docs-content] *)::backdrop, :where([data-designtools]):not([data-docs-content] *)::backdrop {
     box-sizing: border-box;
     border: 0 solid;
     margin: 0;
     padding: 0;
   }
-  :where([data-designtools]) ::file-selector-button, :where([data-designtools])::file-selector-button {
+  :where([data-designtools]) :not([data-docs-content] *)::file-selector-button, :where([data-designtools]):not([data-docs-content] *)::file-selector-button {
     box-sizing: border-box;
     border: 0 solid;
     margin: 0;
@@ -103,23 +104,23 @@
     -webkit-tap-highlight-color: transparent;
   }
-  :where([data-designtools]) hr, hr:where([data-designtools]) {
+  :where([data-designtools]) hr:not([data-docs-content] *), hr:where([data-designtools]):not([data-docs-content] *) {
     height: 0;
     color: inherit;
     border-top-width: 1px;
   }
-  :where([data-designtools]) abbr:where([title]), abbr:where([title]):where([data-designtools]) {
+  :where([data-designtools]) abbr:where([title]):not([data-docs-content] *), abbr:where([title]):where([data-designtools]):not([data-docs-content] *) {
     -webkit-text-decoration: underline dotted;
     text-decoration: underline dotted;
   }
-  :where([data-designtools]) h1, h1:where([data-designtools]), :where([data-designtools]) h2, h2:where([data-designtools]), :where([data-designtools]) h3, h3:where([data-designtools]), :where([data-designtools]) h4, h4:where([data-designtools]), :where([data-designtools]) h5, h5:where([data-designtools]), :where([data-designtools]) h6, h6:where([data-designtools]) {
+  :where([data-designtools]) h1:not([data-docs-content] *), h1:where([data-designtools]):not([data-docs-content] *), :where([data-designtools]) h2:not([data-docs-content] *), h2:where([data-designtools]):not([data-docs-content] *), :where([data-designtools]) h3:not([data-docs-content] *), h3:where([data-designtools]):not([data-docs-content] *), :where([data-designtools]) h4:not([data-docs-content] *), h4:where([data-designtools]):not([data-docs-content] *), :where([data-designtools]) h5:not([data-docs-content] *), h5:where([data-designtools]):not([data-docs-content] *), :where([data-designtools]) h6:not([data-docs-content] *), h6:where([data-designtools]):not([data-docs-content] *) {
     font-size: inherit;
     font-weight: inherit;
   }
-  :where([data-designtools]) a, a:where([data-designtools]) {
+  :where([data-designtools]) a:not([data-docs-content] *), a:where([data-designtools]):not([data-docs-content] *) {
     color: inherit;
     -webkit-text-decoration: inherit;
     -webkit-text-decoration: inherit;
@@ -127,69 +128,69 @@
     text-decoration: inherit;
   }
-  :where([data-designtools]) b, b:where([data-designtools]), :where([data-designtools]) strong, strong:where([data-designtools]) {
+  :where([data-designtools]) b:not([data-docs-content] *), b:where([data-designtools]):not([data-docs-content] *), :where([data-designtools]) strong:not([data-docs-content] *), strong:where([data-designtools]):not([data-docs-content] *) {
     font-weight: bolder;
   }
-  :where([data-designtools]) code, code:where([data-designtools]), :where([data-designtools]) kbd, kbd:where([data-designtools]), :where([data-designtools]) samp, samp:where([data-designtools]), :where([data-designtools]) pre, pre:where([data-designtools]) {
+  :where([data-designtools]) code:not([data-docs-content] *), code:where([data-designtools]):not([data-docs-content] *), :where([data-designtools]) kbd:not([data-docs-content] *), kbd:where([data-designtools]):not([data-docs-content] *), :where([data-designtools]) samp:not([data-docs-content] *), samp:where([data-designtools]):not([data-docs-content] *), :where([data-designtools]) pre:not([data-docs-content] *), pre:where([data-designtools]):not([data-docs-content] *) {
     font-family: var(--docs-font-mono, var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace));
     font-feature-settings: normal;
     font-variation-settings: normal;
     font-size: 1em;
   }
-  :where([data-designtools]) small, small:where([data-designtools]) {
+  :where([data-designtools]) small:not([data-docs-content] *), small:where([data-designtools]):not([data-docs-content] *) {
     font-size: 80%;
   }
-  :where([data-designtools]) sub, sub:where([data-designtools]), :where([data-designtools]) sup, sup:where([data-designtools]) {
+  :where([data-designtools]) sub:not([data-docs-content] *), sub:where([data-designtools]):not([data-docs-content] *), :where([data-designtools]) sup:not([data-docs-content] *), sup:where([data-designtools]):not([data-docs-content] *) {
     vertical-align: baseline;
     font-size: 75%;
     line-height: 0;
     position: relative;
   }
-  :where([data-designtools]) sub, sub:where([data-designtools]) {
+  :where([data-designtools]) sub:not([data-docs-content] *), sub:where([data-designtools]):not([data-docs-content] *) {
     bottom: -.25em;
   }
-  :where([data-designtools]) sup, sup:where([data-designtools]) {
+  :where([data-designtools]) sup:not([data-docs-content] *), sup:where([data-designtools]):not([data-docs-content] *) {
     top: -.5em;
   }
-  :where([data-designtools]) table, table:where([data-designtools]) {
+  :where([data-designtools]) table:not([data-docs-content] *), table:where([data-designtools]):not([data-docs-content] *) {
     text-indent: 0;
     border-color: inherit;
     border-collapse: collapse;
   }
-  :where([data-designtools]) :-moz-focusring:where(:not(iframe)), :-moz-focusring:where(:not(iframe)):where([data-designtools]) {
+  :where([data-designtools]) :-moz-focusring:where(:not(iframe)):not([data-docs-content] *), :-moz-focusring:where(:not(iframe)):where([data-designtools]):not([data-docs-content] *) {
     outline: auto;
   }
-  :where([data-designtools]) progress, progress:where([data-designtools]) {
+  :where([data-designtools]) progress:not([data-docs-content] *), progress:where([data-designtools]):not([data-docs-content] *) {
     vertical-align: baseline;
   }
-  :where([data-designtools]) summary, summary:where([data-designtools]) {
+  :where([data-designtools]) summary:not([data-docs-content] *), summary:where([data-designtools]):not([data-docs-content] *) {
     display: list-item;
   }
-  :where([data-designtools]) ol, ol:where([data-designtools]), :where([data-designtools]) ul, ul:where([data-designtools]), :where([data-designtools]) menu, menu:where([data-designtools]) {
+  :where([data-designtools]) ol:not([data-docs-content] *), ol:where([data-designtools]):not([data-docs-content] *), :where([data-designtools]) ul:not([data-docs-content] *), ul:where([data-designtools]):not([data-docs-content] *), :where([data-designtools]) menu:not([data-docs-content] *), menu:where([data-designtools]):not([data-docs-content] *) {
     list-style: none;
   }
-  :where([data-designtools]) img, img:where([data-designtools]), :where([data-designtools]) svg, svg:where([data-designtools]), :where([data-designtools]) video, video:where([data-designtools]), :where([data-designtools]) canvas, canvas:where([data-designtools]), :where([data-designtools]) audio, audio:where([data-designtools]), :where([data-designtools]) iframe, iframe:where([data-designtools]), :where([data-designtools]) embed, embed:where([data-designtools]), :where([data-designtools]) object, object:where([data-designtools]) {
+  :where([data-designtools]) img:not([data-docs-content] *), img:where([data-designtools]):not([data-docs-content] *), :where([data-designtools]) svg:not([data-docs-content] *), svg:where([data-designtools]):not([data-docs-content] *), :where([data-designtools]) video:not([data-docs-content] *), video:where([data-designtools]):not([data-docs-content] *), :where([data-designtools]) canvas:not([data-docs-content] *), canvas:where([data-designtools]):not([data-docs-content] *), :where([data-designtools]) audio:not([data-docs-content] *), audio:where([data-designtools]):not([data-docs-content] *), :where([data-designtools]) iframe:not([data-docs-content] *), iframe:where([data-designtools]):not([data-docs-content] *), :where([data-designtools]) embed:not([data-docs-content] *), embed:where([data-designtools]):not([data-docs-content] *), :where([data-designtools]) object:not([data-docs-content] *), object:where([data-designtools]):not([data-docs-content] *) {
     vertical-align: middle;
     display: block;
   }
-  :where([data-designtools]) img, img:where([data-designtools]), :where([data-designtools]) video, video:where([data-designtools]) {
+  :where([data-designtools]) img:not([data-docs-content] *), img:where([data-designtools]):not([data-docs-content] *), :where([data-designtools]) video:not([data-docs-content] *), video:where([data-designtools]):not([data-docs-content] *) {
     max-width: 100%;
     height: auto;
   }
-  :where([data-designtools]) button, button:where([data-designtools]), :where([data-designtools]) input, input:where([data-designtools]), :where([data-designtools]) select, select:where([data-designtools]), :where([data-designtools]) optgroup, optgroup:where([data-designtools]), :where([data-designtools]) textarea, textarea:where([data-designtools]) {
+  :where([data-designtools]) button:not([data-docs-content] *), button:where([data-designtools]):not([data-docs-content] *), :where([data-designtools]) input:not([data-docs-content] *), input:where([data-designtools]):not([data-docs-content] *), :where([data-designtools]) select:not([data-docs-content] *), select:where([data-designtools]):not([data-docs-content] *), :where([data-designtools]) optgroup:not([data-docs-content] *), optgroup:where([data-designtools]):not([data-docs-content] *), :where([data-designtools]) textarea:not([data-docs-content] *), textarea:where([data-designtools]):not([data-docs-content] *) {
     font: inherit;
     font-feature-settings: inherit;
     font-variation-settings: inherit;
@@ -200,7 +201,7 @@
     border-radius: 0;
   }
-  :where([data-designtools]) ::file-selector-button, :where([data-designtools])::file-selector-button {
+  :where([data-designtools]) :not([data-docs-content] *)::file-selector-button, :where([data-designtools]):not([data-docs-content] *)::file-selector-button {
     font: inherit;
     font-feature-settings: inherit;
     font-variation-settings: inherit;
@@ -211,116 +212,116 @@
     border-radius: 0;
   }
-  :where([data-designtools]) :where(select:is([multiple], [size])) optgroup, :where(select:is([multiple], [size])) optgroup:where([data-designtools]) {
+  :where([data-designtools]) :where(select:is([multiple], [size])) optgroup:not([data-docs-content] *), :where(select:is([multiple], [size])) optgroup:where([data-designtools]):not([data-docs-content] *) {
     font-weight: bolder;
   }
-  :where([data-designtools]) :where(select:is([multiple], [size])) optgroup option, :where(select:is([multiple], [size])) optgroup option:where([data-designtools]) {
+  :where([data-designtools]) :where(select:is([multiple], [size])) optgroup option:not([data-docs-content] *), :where(select:is([multiple], [size])) optgroup option:where([data-designtools]):not([data-docs-content] *) {
     padding-inline-start: 20px;
   }
-  :where([data-designtools]) ::file-selector-button, :where([data-designtools])::file-selector-button {
+  :where([data-designtools]) :not([data-docs-content] *)::file-selector-button, :where([data-designtools]):not([data-docs-content] *)::file-selector-button {
     margin-inline-end: 4px;
   }
-  :where([data-designtools]) ::placeholder, :where([data-designtools])::placeholder {
+  :where([data-designtools]) :not([data-docs-content] *)::placeholder, :where([data-designtools]):not([data-docs-content] *)::placeholder {
     opacity: 1;
   }
   @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
-    :where([data-designtools]) ::placeholder, :where([data-designtools])::placeholder {
+    :where([data-designtools]) :not([data-docs-content] *)::placeholder, :where([data-designtools]):not([data-docs-content] *)::placeholder {
       color: currentColor;
     }
     @supports (color: color-mix(in lab, red, red)) {
-      :where([data-designtools]) ::placeholder, :where([data-designtools])::placeholder {
+      :where([data-designtools]) :not([data-docs-content] *)::placeholder, :where([data-designtools]):not([data-docs-content] *)::placeholder {
         color: color-mix(in oklab, currentcolor 50%, transparent);
       }
     }
   }
-  :where([data-designtools]) textarea, textarea:where([data-designtools]) {
+  :where([data-designtools]) textarea:not([data-docs-content] *), textarea:where([data-designtools]):not([data-docs-content] *) {
     resize: vertical;
   }
-  :where([data-designtools]) ::-webkit-search-decoration, :where([data-designtools])::-webkit-search-decoration {
+  :where([data-designtools]) :not([data-docs-content] *)::-webkit-search-decoration, :where([data-designtools]):not([data-docs-content] *)::-webkit-search-decoration {
     -webkit-appearance: none;
   }
-  :where([data-designtools]) ::-webkit-date-and-time-value, :where([data-designtools])::-webkit-date-and-time-value {
+  :where([data-designtools]) :not([data-docs-content] *)::-webkit-date-and-time-value, :where([data-designtools]):not([data-docs-content] *)::-webkit-date-and-time-value {
     min-height: 1lh;
     text-align: inherit;
   }
-  :where([data-designtools]) ::-webkit-datetime-edit, :where([data-designtools])::-webkit-datetime-edit {
+  :where([data-designtools]) :not([data-docs-content] *)::-webkit-datetime-edit, :where([data-designtools]):not([data-docs-content] *)::-webkit-datetime-edit {
     display: inline-flex;
   }
-  :where([data-designtools]) ::-webkit-datetime-edit-fields-wrapper, :where([data-designtools])::-webkit-datetime-edit-fields-wrapper {
+  :where([data-designtools]) :not([data-docs-content] *)::-webkit-datetime-edit-fields-wrapper, :where([data-designtools]):not([data-docs-content] *)::-webkit-datetime-edit-fields-wrapper {
     padding: 0;
   }
-  :where([data-designtools]) ::-webkit-datetime-edit, :where([data-designtools])::-webkit-datetime-edit {
+  :where([data-designtools]) :not([data-docs-content] *)::-webkit-datetime-edit, :where([data-designtools]):not([data-docs-content] *)::-webkit-datetime-edit {
     padding-block: 0;
   }
-  :where([data-designtools]) ::-webkit-datetime-edit-year-field, :where([data-designtools])::-webkit-datetime-edit-year-field {
+  :where([data-designtools]) :not([data-docs-content] *)::-webkit-datetime-edit-year-field, :where([data-designtools]):not([data-docs-content] *)::-webkit-datetime-edit-year-field {
     padding-block: 0;
   }
-  :where([data-designtools]) ::-webkit-datetime-edit-month-field, :where([data-designtools])::-webkit-datetime-edit-month-field {
+  :where([data-designtools]) :not([data-docs-content] *)::-webkit-datetime-edit-month-field, :where([data-designtools]):not([data-docs-content] *)::-webkit-datetime-edit-month-field {
     padding-block: 0;
   }
-  :where([data-designtools]) ::-webkit-datetime-edit-day-field, :where([data-designtools])::-webkit-datetime-edit-day-field {
+  :where([data-designtools]) :not([data-docs-content] *)::-webkit-datetime-edit-day-field, :where([data-designtools]):not([data-docs-content] *)::-webkit-datetime-edit-day-field {
     padding-block: 0;
   }
-  :where([data-designtools]) ::-webkit-datetime-edit-hour-field, :where([data-designtools])::-webkit-datetime-edit-hour-field {
+  :where([data-designtools]) :not([data-docs-content] *)::-webkit-datetime-edit-hour-field, :where([data-designtools]):not([data-docs-content] *)::-webkit-datetime-edit-hour-field {
     padding-block: 0;
   }
-  :where([data-designtools]) ::-webkit-datetime-edit-minute-field, :where([data-designtools])::-webkit-datetime-edit-minute-field {
+  :where([data-designtools]) :not([data-docs-content] *)::-webkit-datetime-edit-minute-field, :where([data-designtools]):not([data-docs-content] *)::-webkit-datetime-edit-minute-field {
     padding-block: 0;
   }
-  :where([data-designtools]) ::-webkit-datetime-edit-second-field, :where([data-designtools])::-webkit-datetime-edit-second-field {
+  :where([data-designtools]) :not([data-docs-content] *)::-webkit-datetime-edit-second-field, :where([data-designtools]):not([data-docs-content] *)::-webkit-datetime-edit-second-field {
     padding-block: 0;
   }
-  :where([data-designtools]) ::-webkit-datetime-edit-millisecond-field, :where([data-designtools])::-webkit-datetime-edit-millisecond-field {
+  :where([data-designtools]) :not([data-docs-content] *)::-webkit-datetime-edit-millisecond-field, :where([data-designtools]):not([data-docs-content] *)::-webkit-datetime-edit-millisecond-field {
     padding-block: 0;
   }
-  :where([data-designtools]) ::-webkit-datetime-edit-meridiem-field, :where([data-designtools])::-webkit-datetime-edit-meridiem-field {
+  :where([data-designtools]) :not([data-docs-content] *)::-webkit-datetime-edit-meridiem-field, :where([data-designtools]):not([data-docs-content] *)::-webkit-datetime-edit-meridiem-field {
     padding-block: 0;
   }
-  :where([data-designtools]) ::-webkit-calendar-picker-indicator, :where([data-designtools])::-webkit-calendar-picker-indicator {
+  :where([data-designtools]) :not([data-docs-content] *)::-webkit-calendar-picker-indicator, :where([data-designtools]):not([data-docs-content] *)::-webkit-calendar-picker-indicator {
     line-height: 1;
   }
-  :where([data-designtools]) :-moz-ui-invalid, :-moz-ui-invalid:where([data-designtools]) {
+  :where([data-designtools]) :-moz-ui-invalid:not([data-docs-content] *), :-moz-ui-invalid:where([data-designtools]):not([data-docs-content] *) {
     box-shadow: none;
   }
-  :where([data-designtools]) button, button:where([data-designtools]), :where([data-designtools]) input:where([type="button"], [type="reset"], [type="submit"]), input:where([type="button"], [type="reset"], [type="submit"]):where([data-designtools]) {
+  :where([data-designtools]) button:not([data-docs-content] *), button:where([data-designtools]):not([data-docs-content] *), :where([data-designtools]) input:where([type="button"], [type="reset"], [type="submit"]):not([data-docs-content] *), input:where([type="button"], [type="reset"], [type="submit"]):where([data-designtools]):not([data-docs-content] *) {
     appearance: button;
   }
-  :where([data-designtools]) ::file-selector-button, :where([data-designtools])::file-selector-button {
+  :where([data-designtools]) :not([data-docs-content] *)::file-selector-button, :where([data-designtools]):not([data-docs-content] *)::file-selector-button {
     appearance: button;
   }
-  :where([data-designtools]) ::-webkit-inner-spin-button, :where([data-designtools])::-webkit-inner-spin-button {
+  :where([data-designtools]) :not([data-docs-content] *)::-webkit-inner-spin-button, :where([data-designtools]):not([data-docs-content] *)::-webkit-inner-spin-button {
     height: auto;
   }
-  :where([data-designtools]) ::-webkit-outer-spin-button, :where([data-designtools])::-webkit-outer-spin-button {
+  :where([data-designtools]) :not([data-docs-content] *)::-webkit-outer-spin-button, :where([data-designtools]):not([data-docs-content] *)::-webkit-outer-spin-button {
     height: auto;
   }
-  :where([data-designtools]) [hidden]:where(:not([hidden="until-found"])), [hidden]:where(:not([hidden="until-found"])):where([data-designtools]) {
+  :where([data-designtools]) [hidden]:where(:not([hidden="until-found"])):not([data-docs-content] *), [hidden]:where(:not([hidden="until-found"])):where([data-designtools]):not([data-docs-content] *) {
     display: none !important;
   }
@@ -355,15 +356,15 @@
 @layer components;
 @layer utilities {
-  :where([data-designtools]) .pointer-events-none, .pointer-events-none:where([data-designtools]) {
+  :where([data-designtools]) .pointer-events-none:not([data-docs-content] *), .pointer-events-none:where([data-designtools]):not([data-docs-content] *) {
     pointer-events: none;
   }
-  :where([data-designtools]) .visible, .visible:where([data-designtools]) {
+  :where([data-designtools]) .visible:not([data-docs-content] *), .visible:where([data-designtools]):not([data-docs-content] *) {
     visibility: visible;
   }
-  :where([data-designtools]) .sr-only, .sr-only:where([data-designtools]) {
+  :where([data-designtools]) .sr-only:not([data-docs-content] *), .sr-only:where([data-designtools]):not([data-docs-content] *) {
     clip-path: inset(50%);
     white-space: nowrap;
     border-width: 0;
@@ -375,938 +376,1018 @@
     overflow: hidden;
   }
-  :where([data-designtools]) .absolute, .absolute:where([data-designtools]) {
+  :where([data-designtools]) .absolute:not([data-docs-content] *), .absolute:where([data-designtools]):not([data-docs-content] *) {
     position: absolute;
   }
-  :where([data-designtools]) .fixed, .fixed:where([data-designtools]) {
+  :where([data-designtools]) .fixed:not([data-docs-content] *), .fixed:where([data-designtools]):not([data-docs-content] *) {
     position: fixed;
   }
-  :where([data-designtools]) .relative, .relative:where([data-designtools]) {
+  :where([data-designtools]) .relative:not([data-docs-content] *), .relative:where([data-designtools]):not([data-docs-content] *) {
     position: relative;
   }
-  :where([data-designtools]) .static, .static:where([data-designtools]) {
+  :where([data-designtools]) .static:not([data-docs-content] *), .static:where([data-designtools]):not([data-docs-content] *) {
     position: static;
   }
-  :where([data-designtools]) .sticky, .sticky:where([data-designtools]) {
+  :where([data-designtools]) .sticky:not([data-docs-content] *), .sticky:where([data-designtools]):not([data-docs-content] *) {
     position: sticky;
   }
-  :where([data-designtools]) .inset-0, .inset-0:where([data-designtools]) {
+  :where([data-designtools]) .inset-0:not([data-docs-content] *), .inset-0:where([data-designtools]):not([data-docs-content] *) {
     inset: 0;
   }
-  :where([data-designtools]) .inset-x-0, .inset-x-0:where([data-designtools]) {
+  :where([data-designtools]) .inset-x-0:not([data-docs-content] *), .inset-x-0:where([data-designtools]):not([data-docs-content] *) {
     inset-inline: 0;
   }
-  :where([data-designtools]) .inset-y-0, .inset-y-0:where([data-designtools]) {
+  :where([data-designtools]) .inset-y-0:not([data-docs-content] *), .inset-y-0:where([data-designtools]):not([data-docs-content] *) {
     inset-block: 0;
   }
-  :where([data-designtools]) .inset-y-1, .inset-y-1:where([data-designtools]) {
+  :where([data-designtools]) .inset-y-1:not([data-docs-content] *), .inset-y-1:where([data-designtools]):not([data-docs-content] *) {
     inset-block: .25rem;
   }
-  :where([data-designtools]) .inset-y-1\.5, .inset-y-1\.5:where([data-designtools]) {
+  :where([data-designtools]) .inset-y-1\.5:not([data-docs-content] *), .inset-y-1\.5:where([data-designtools]):not([data-docs-content] *) {
     inset-block: .375rem;
   }
-  :where([data-designtools]) .inset-y-2\.5, .inset-y-2\.5:where([data-designtools]) {
+  :where([data-designtools]) .inset-y-2\.5:not([data-docs-content] *), .inset-y-2\.5:where([data-designtools]):not([data-docs-content] *) {
     inset-block: .625rem;
   }
-  :where([data-designtools]) .top-0, .top-0:where([data-designtools]) {
+  :where([data-designtools]) .top-0:not([data-docs-content] *), .top-0:where([data-designtools]):not([data-docs-content] *) {
     top: 0;
   }
-  :where([data-designtools]) .top-1\.5, .top-1\.5:where([data-designtools]) {
+  :where([data-designtools]) .top-1\.5:not([data-docs-content] *), .top-1\.5:where([data-designtools]):not([data-docs-content] *) {
     top: .375rem;
   }
-  :where([data-designtools]) .top-1\/2, .top-1\/2:where([data-designtools]) {
+  :where([data-designtools]) .top-1\/2:not([data-docs-content] *), .top-1\/2:where([data-designtools]):not([data-docs-content] *) {
     top: 50%;
   }
-  :where([data-designtools]) .top-3, .top-3:where([data-designtools]) {
+  :where([data-designtools]) .top-3:not([data-docs-content] *), .top-3:where([data-designtools]):not([data-docs-content] *) {
     top: .75rem;
   }
-  :where([data-designtools]) .top-4, .top-4:where([data-designtools]) {
+  :where([data-designtools]) .top-4:not([data-docs-content] *), .top-4:where([data-designtools]):not([data-docs-content] *) {
     top: 1rem;
   }
-  :where([data-designtools]) .top-16, .top-16:where([data-designtools]) {
+  :where([data-designtools]) .top-16:not([data-docs-content] *), .top-16:where([data-designtools]):not([data-docs-content] *) {
     top: 4rem;
   }
-  :where([data-designtools]) .right-1\.5, .right-1\.5:where([data-designtools]) {
+  :where([data-designtools]) .right-1\.5:not([data-docs-content] *), .right-1\.5:where([data-designtools]):not([data-docs-content] *) {
     right: .375rem;
   }
-  :where([data-designtools]) .right-5, .right-5:where([data-designtools]) {
+  :where([data-designtools]) .right-5:not([data-docs-content] *), .right-5:where([data-designtools]):not([data-docs-content] *) {
     right: 1.25rem;
   }
-  :where([data-designtools]) .-bottom-6, .-bottom-6:where([data-designtools]) {
+  :where([data-designtools]) .-bottom-6:not([data-docs-content] *), .-bottom-6:where([data-designtools]):not([data-docs-content] *) {
     bottom: -1.5rem;
   }
-  :where([data-designtools]) .bottom-0, .bottom-0:where([data-designtools]) {
+  :where([data-designtools]) .bottom-0:not([data-docs-content] *), .bottom-0:where([data-designtools]):not([data-docs-content] *) {
     bottom: 0;
   }
-  :where([data-designtools]) .-left-\[0\.8125rem\], .-left-\[0\.8125rem\]:where([data-designtools]) {
+  :where([data-designtools]) .-left-\[0\.8125rem\]:not([data-docs-content] *), .-left-\[0\.8125rem\]:where([data-designtools]):not([data-docs-content] *) {
     left: -.8125rem;
   }
-  :where([data-designtools]) .-left-px, .-left-px:where([data-designtools]) {
+  :where([data-designtools]) .-left-px:not([data-docs-content] *), .-left-px:where([data-designtools]):not([data-docs-content] *) {
     left: -1px;
   }
-  :where([data-designtools]) .left-\(--active-tab-left\), .left-\(--active-tab-left\):where([data-designtools]) {
+  :where([data-designtools]) .left-\(--active-tab-left\):not([data-docs-content] *), .left-\(--active-tab-left\):where([data-designtools]):not([data-docs-content] *) {
     left: var(--active-tab-left);
   }
-  :where([data-designtools]) .left-0, .left-0:where([data-designtools]) {
+  :where([data-designtools]) .left-0:not([data-docs-content] *), .left-0:where([data-designtools]):not([data-docs-content] *) {
     left: 0;
   }
-  :where([data-designtools]) .left-1, .left-1:where([data-designtools]) {
+  :where([data-designtools]) .left-1:not([data-docs-content] *), .left-1:where([data-designtools]):not([data-docs-content] *) {
     left: .25rem;
   }
-  :where([data-designtools]) .left-1\/2, .left-1\/2:where([data-designtools]) {
+  :where([data-designtools]) .left-1\/2:not([data-docs-content] *), .left-1\/2:where([data-designtools]):not([data-docs-content] *) {
     left: 50%;
   }
-  :where([data-designtools]) .left-3, .left-3:where([data-designtools]) {
+  :where([data-designtools]) .left-3:not([data-docs-content] *), .left-3:where([data-designtools]):not([data-docs-content] *) {
     left: .75rem;
   }
-  :where([data-designtools]) .left-4, .left-4:where([data-designtools]) {
+  :where([data-designtools]) .left-4:not([data-docs-content] *), .left-4:where([data-designtools]):not([data-docs-content] *) {
     left: 1rem;
   }
-  :where([data-designtools]) .z-10, .z-10:where([data-designtools]) {
+  :where([data-designtools]) .z-10:not([data-docs-content] *), .z-10:where([data-designtools]):not([data-docs-content] *) {
     z-index: 10;
   }
-  :where([data-designtools]) .z-20, .z-20:where([data-designtools]) {
+  :where([data-designtools]) .z-20:not([data-docs-content] *), .z-20:where([data-designtools]):not([data-docs-content] *) {
     z-index: 20;
   }
-  :where([data-designtools]) .z-40, .z-40:where([data-designtools]) {
+  :where([data-designtools]) .z-40:not([data-docs-content] *), .z-40:where([data-designtools]):not([data-docs-content] *) {
     z-index: 40;
   }
-  :where([data-designtools]) .z-50, .z-50:where([data-designtools]) {
+  :where([data-designtools]) .z-50:not([data-docs-content] *), .z-50:where([data-designtools]):not([data-docs-content] *) {
     z-index: 50;
   }
-  :where([data-designtools]) .col-span-2, .col-span-2:where([data-designtools]) {
+  :where([data-designtools]) .order-last:not([data-docs-content] *), .order-last:where([data-designtools]):not([data-docs-content] *) {
+    order: 9999;
+  }
+  :where([data-designtools]) .col-span-2:not([data-docs-content] *), .col-span-2:where([data-designtools]):not([data-docs-content] *) {
     grid-column: span 2 / span 2;
   }
-  :where([data-designtools]) .col-start-2, .col-start-2:where([data-designtools]) {
+  :where([data-designtools]) .col-start-2:not([data-docs-content] *), .col-start-2:where([data-designtools]):not([data-docs-content] *) {
     grid-column-start: 2;
   }
-  :where([data-designtools]) .row-start-1, .row-start-1:where([data-designtools]) {
+  :where([data-designtools]) .row-start-1:not([data-docs-content] *), .row-start-1:where([data-designtools]):not([data-docs-content] *) {
     grid-row-start: 1;
   }
-  :where([data-designtools]) .container, .container:where([data-designtools]) {
+  :where([data-designtools]) .container:not([data-docs-content] *), .container:where([data-designtools]):not([data-docs-content] *) {
     width: 100%;
   }
   @media (min-width: 40rem) {
-    :where([data-designtools]) .container, .container:where([data-designtools]) {
+    :where([data-designtools]) .container:not([data-docs-content] *), .container:where([data-designtools]):not([data-docs-content] *) {
       max-width: 40rem;
     }
   }
   @media (min-width: 48rem) {
-    :where([data-designtools]) .container, .container:where([data-designtools]) {
+    :where([data-designtools]) .container:not([data-docs-content] *), .container:where([data-designtools]):not([data-docs-content] *) {
       max-width: 48rem;
     }
   }
   @media (min-width: 64rem) {
-    :where([data-designtools]) .container, .container:where([data-designtools]) {
+    :where([data-designtools]) .container:not([data-docs-content] *), .container:where([data-designtools]):not([data-docs-content] *) {
       max-width: 64rem;
     }
   }
   @media (min-width: 80rem) {
-    :where([data-designtools]) .container, .container:where([data-designtools]) {
+    :where([data-designtools]) .container:not([data-docs-content] *), .container:where([data-designtools]):not([data-docs-content] *) {
       max-width: 80rem;
     }
   }
   @media (min-width: 96rem) {
-    :where([data-designtools]) .container, .container:where([data-designtools]) {
+    :where([data-designtools]) .container:not([data-docs-content] *), .container:where([data-designtools]):not([data-docs-content] *) {
       max-width: 96rem;
     }
   }
-  :where([data-designtools]) .mx-1, .mx-1:where([data-designtools]) {
+  :where([data-designtools]) .-mx-1:not([data-docs-content] *), .-mx-1:where([data-designtools]):not([data-docs-content] *) {
+    margin-inline: -.25rem;
+  }
+  :where([data-designtools]) .mx-1:not([data-docs-content] *), .mx-1:where([data-designtools]):not([data-docs-content] *) {
     margin-inline: .25rem;
   }
-  :where([data-designtools]) .mx-auto, .mx-auto:where([data-designtools]) {
+  :where([data-designtools]) .mx-auto:not([data-docs-content] *), .mx-auto:where([data-designtools]):not([data-docs-content] *) {
     margin-inline: auto;
   }
-  :where([data-designtools]) .-my-1\.5, .-my-1\.5:where([data-designtools]) {
+  :where([data-designtools]) .-my-1\.5:not([data-docs-content] *), .-my-1\.5:where([data-designtools]):not([data-docs-content] *) {
     margin-block: -.375rem;
   }
-  :where([data-designtools]) .my-1\.5, .my-1\.5:where([data-designtools]) {
+  :where([data-designtools]) .my-1\.5:not([data-docs-content] *), .my-1\.5:where([data-designtools]):not([data-docs-content] *) {
     margin-block: .375rem;
   }
-  :where([data-designtools]) .-mt-1\.5, .-mt-1\.5:where([data-designtools]) {
+  :where([data-designtools]) .-mt-1\.5:not([data-docs-content] *), .-mt-1\.5:where([data-designtools]):not([data-docs-content] *) {
     margin-top: -.375rem;
   }
-  :where([data-designtools]) .-mt-4, .-mt-4:where([data-designtools]) {
+  :where([data-designtools]) .-mt-4:not([data-docs-content] *), .-mt-4:where([data-designtools]):not([data-docs-content] *) {
     margin-top: -1rem;
   }
-  :where([data-designtools]) .mt-0\.5, .mt-0\.5:where([data-designtools]) {
+  :where([data-designtools]) .-mt-8:not([data-docs-content] *), .-mt-8:where([data-designtools]):not([data-docs-content] *) {
+    margin-top: -2rem;
+  }
+  :where([data-designtools]) .mt-0\.5:not([data-docs-content] *), .mt-0\.5:where([data-designtools]):not([data-docs-content] *) {
     margin-top: .125rem;
   }
-  :where([data-designtools]) .mt-1\.5, .mt-1\.5:where([data-designtools]) {
+  :where([data-designtools]) .mt-1\.5:not([data-docs-content] *), .mt-1\.5:where([data-designtools]):not([data-docs-content] *) {
     margin-top: .375rem;
   }
-  :where([data-designtools]) .mt-2, .mt-2:where([data-designtools]) {
+  :where([data-designtools]) .mt-2:not([data-docs-content] *), .mt-2:where([data-designtools]):not([data-docs-content] *) {
     margin-top: .5rem;
   }
-  :where([data-designtools]) .mt-auto, .mt-auto:where([data-designtools]) {
+  :where([data-designtools]) .mt-4:not([data-docs-content] *), .mt-4:where([data-designtools]):not([data-docs-content] *) {
+    margin-top: 1rem;
+  }
+  :where([data-designtools]) .mt-auto:not([data-docs-content] *), .mt-auto:where([data-designtools]):not([data-docs-content] *) {
     margin-top: auto;
   }
-  :where([data-designtools]) .-mb-2, .-mb-2:where([data-designtools]) {
+  :where([data-designtools]) .-mb-2:not([data-docs-content] *), .-mb-2:where([data-designtools]):not([data-docs-content] *) {
     margin-bottom: -.5rem;
   }
-  :where([data-designtools]) .mb-3, .mb-3:where([data-designtools]) {
+  :where([data-designtools]) .mb-3:not([data-docs-content] *), .mb-3:where([data-designtools]):not([data-docs-content] *) {
     margin-bottom: .75rem;
   }
-  :where([data-designtools]) .-ml-px, .-ml-px:where([data-designtools]) {
+  :where([data-designtools]) .-ml-2:not([data-docs-content] *), .-ml-2:where([data-designtools]):not([data-docs-content] *) {
+    margin-left: -.5rem;
+  }
+  :where([data-designtools]) .-ml-px:not([data-docs-content] *), .-ml-px:where([data-designtools]):not([data-docs-content] *) {
     margin-left: -1px;
   }
-  :where([data-designtools]) .ml-3, .ml-3:where([data-designtools]) {
+  :where([data-designtools]) .ml-1:not([data-docs-content] *), .ml-1:where([data-designtools]):not([data-docs-content] *) {
+    margin-left: .25rem;
+  }
+  :where([data-designtools]) .ml-1\.5:not([data-docs-content] *), .ml-1\.5:where([data-designtools]):not([data-docs-content] *) {
+    margin-left: .375rem;
+  }
+  :where([data-designtools]) .ml-3:not([data-docs-content] *), .ml-3:where([data-designtools]):not([data-docs-content] *) {
     margin-left: .75rem;
   }
-  :where([data-designtools]) .ml-\[1\.1875rem\], .ml-\[1\.1875rem\]:where([data-designtools]) {
+  :where([data-designtools]) .ml-\[1\.1875rem\]:not([data-docs-content] *), .ml-\[1\.1875rem\]:where([data-designtools]):not([data-docs-content] *) {
     margin-left: 1.1875rem;
   }
-  :where([data-designtools]) .line-clamp-2, .line-clamp-2:where([data-designtools]) {
+  :where([data-designtools]) .line-clamp-2:not([data-docs-content] *), .line-clamp-2:where([data-designtools]):not([data-docs-content] *) {
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     display: -webkit-box;
     overflow: hidden;
   }
-  :where([data-designtools]) .block, .block:where([data-designtools]) {
+  :where([data-designtools]) .block:not([data-docs-content] *), .block:where([data-designtools]):not([data-docs-content] *) {
     display: block;
   }
-  :where([data-designtools]) .flex, .flex:where([data-designtools]) {
+  :where([data-designtools]) .contents:not([data-docs-content] *), .contents:where([data-designtools]):not([data-docs-content] *) {
+    display: contents;
+  }
+  :where([data-designtools]) .flex:not([data-docs-content] *), .flex:where([data-designtools]):not([data-docs-content] *) {
     display: flex;
   }
-  :where([data-designtools]) .grid, .grid:where([data-designtools]) {
+  :where([data-designtools]) .grid:not([data-docs-content] *), .grid:where([data-designtools]):not([data-docs-content] *) {
     display: grid;
   }
-  :where([data-designtools]) .hidden, .hidden:where([data-designtools]) {
+  :where([data-designtools]) .hidden:not([data-docs-content] *), .hidden:where([data-designtools]):not([data-docs-content] *) {
     display: none;
   }
-  :where([data-designtools]) .inline, .inline:where([data-designtools]) {
+  :where([data-designtools]) .inline:not([data-docs-content] *), .inline:where([data-designtools]):not([data-docs-content] *) {
     display: inline;
   }
-  :where([data-designtools]) .inline-flex, .inline-flex:where([data-designtools]) {
+  :where([data-designtools]) .inline-flex:not([data-docs-content] *), .inline-flex:where([data-designtools]):not([data-docs-content] *) {
     display: inline-flex;
   }
-  :where([data-designtools]) .table, .table:where([data-designtools]) {
+  :where([data-designtools]) .table:not([data-docs-content] *), .table:where([data-designtools]):not([data-docs-content] *) {
     display: table;
   }
-  :where([data-designtools]) .size-\(--docs-target\,2\.75rem\), .size-\(--docs-target\,2\.75rem\):where([data-designtools]) {
+  :where([data-designtools]) .size-\(--docs-target\,2\.75rem\):not([data-docs-content] *), .size-\(--docs-target\,2\.75rem\):where([data-designtools]):not([data-docs-content] *) {
     width: var(--docs-target, 2.75rem);
     height: var(--docs-target, 2.75rem);
   }
-  :where([data-designtools]) .size-\(--dt-size-sm\), .size-\(--dt-size-sm\):where([data-designtools]) {
+  :where([data-designtools]) .size-\(--dt-size-md\):not([data-docs-content] *), .size-\(--dt-size-md\):where([data-designtools]):not([data-docs-content] *) {
+    width: var(--dt-size-md);
+    height: var(--dt-size-md);
+  }
+  :where([data-designtools]) .size-\(--dt-size-sm\):not([data-docs-content] *), .size-\(--dt-size-sm\):where([data-designtools]):not([data-docs-content] *) {
     width: var(--dt-size-sm);
     height: var(--dt-size-sm);
   }
-  :where([data-designtools]) .size-\(--dt-size-xs\), .size-\(--dt-size-xs\):where([data-designtools]) {
+  :where([data-designtools]) .size-\(--dt-size-xs\):not([data-docs-content] *), .size-\(--dt-size-xs\):where([data-designtools]):not([data-docs-content] *) {
     width: var(--dt-size-xs);
     height: var(--dt-size-xs);
   }
-  :where([data-designtools]) .size-1\.5, .size-1\.5:where([data-designtools]) {
+  :where([data-designtools]) .size-1\.5:not([data-docs-content] *), .size-1\.5:where([data-designtools]):not([data-docs-content] *) {
     width: .375rem;
     height: .375rem;
   }
-  :where([data-designtools]) .size-2\.5, .size-2\.5:where([data-designtools]) {
+  :where([data-designtools]) .size-2\.5:not([data-docs-content] *), .size-2\.5:where([data-designtools]):not([data-docs-content] *) {
     width: .625rem;
     height: .625rem;
   }
-  :where([data-designtools]) .size-3, .size-3:where([data-designtools]) {
+  :where([data-designtools]) .size-3:not([data-docs-content] *), .size-3:where([data-designtools]):not([data-docs-content] *) {
     width: .75rem;
     height: .75rem;
   }
-  :where([data-designtools]) .size-3\.5, .size-3\.5:where([data-designtools]) {
+  :where([data-designtools]) .size-3\.5:not([data-docs-content] *), .size-3\.5:where([data-designtools]):not([data-docs-content] *) {
     width: .875rem;
     height: .875rem;
   }
-  :where([data-designtools]) .size-4, .size-4:where([data-designtools]) {
+  :where([data-designtools]) .size-4:not([data-docs-content] *), .size-4:where([data-designtools]):not([data-docs-content] *) {
     width: 1rem;
     height: 1rem;
   }
-  :where([data-designtools]) .size-5, .size-5:where([data-designtools]) {
+  :where([data-designtools]) .size-5:not([data-docs-content] *), .size-5:where([data-designtools]):not([data-docs-content] *) {
     width: 1.25rem;
     height: 1.25rem;
   }
-  :where([data-designtools]) .size-6, .size-6:where([data-designtools]) {
+  :where([data-designtools]) .size-6:not([data-docs-content] *), .size-6:where([data-designtools]):not([data-docs-content] *) {
     width: 1.5rem;
     height: 1.5rem;
   }
-  :where([data-designtools]) .size-7, .size-7:where([data-designtools]) {
+  :where([data-designtools]) .size-7:not([data-docs-content] *), .size-7:where([data-designtools]):not([data-docs-content] *) {
     width: 1.75rem;
     height: 1.75rem;
   }
-  :where([data-designtools]) .size-8, .size-8:where([data-designtools]) {
+  :where([data-designtools]) .size-8:not([data-docs-content] *), .size-8:where([data-designtools]):not([data-docs-content] *) {
     width: 2rem;
     height: 2rem;
   }
-  :where([data-designtools]) .size-9, .size-9:where([data-designtools]) {
+  :where([data-designtools]) .size-9:not([data-docs-content] *), .size-9:where([data-designtools]):not([data-docs-content] *) {
     width: 2.25rem;
     height: 2.25rem;
   }
-  :where([data-designtools]) .size-14, .size-14:where([data-designtools]) {
+  :where([data-designtools]) .size-10:not([data-docs-content] *), .size-10:where([data-designtools]):not([data-docs-content] *) {
+    width: 2.5rem;
+    height: 2.5rem;
+  }
+  :where([data-designtools]) .size-14:not([data-docs-content] *), .size-14:where([data-designtools]):not([data-docs-content] *) {
     width: 3.5rem;
     height: 3.5rem;
   }
-  :where([data-designtools]) .size-16, .size-16:where([data-designtools]) {
+  :where([data-designtools]) .size-16:not([data-docs-content] *), .size-16:where([data-designtools]):not([data-docs-content] *) {
     width: 4rem;
     height: 4rem;
   }
-  :where([data-designtools]) .size-full, .size-full:where([data-designtools]) {
+  :where([data-designtools]) .size-full:not([data-docs-content] *), .size-full:where([data-designtools]):not([data-docs-content] *) {
     width: 100%;
     height: 100%;
   }
-  :where([data-designtools]) .h-\(--collapsible-panel-height\), .h-\(--collapsible-panel-height\):where([data-designtools]) {
+  :where([data-designtools]) .h-\(--collapsible-panel-height\):not([data-docs-content] *), .h-\(--collapsible-panel-height\):where([data-designtools]):not([data-docs-content] *) {
     height: var(--collapsible-panel-height);
   }
-  :where([data-designtools]) .h-\(--dt-size-2xl\), .h-\(--dt-size-2xl\):where([data-designtools]) {
-    height: var(--dt-size-2xl);
-  }
-  :where([data-designtools]) .h-\(--dt-size-3xl\), .h-\(--dt-size-3xl\):where([data-designtools]) {
+  :where([data-designtools]) .h-\(--dt-size-3xl\):not([data-docs-content] *), .h-\(--dt-size-3xl\):where([data-designtools]):not([data-docs-content] *) {
     height: var(--dt-size-3xl);
   }
-  :where([data-designtools]) .h-0\.5, .h-0\.5:where([data-designtools]) {
+  :where([data-designtools]) .h-0\.5:not([data-docs-content] *), .h-0\.5:where([data-designtools]):not([data-docs-content] *) {
     height: .125rem;
   }
-  :where([data-designtools]) .h-2, .h-2:where([data-designtools]) {
+  :where([data-designtools]) .h-1\.5:not([data-docs-content] *), .h-1\.5:where([data-designtools]):not([data-docs-content] *) {
+    height: .375rem;
+  }
+  :where([data-designtools]) .h-2:not([data-docs-content] *), .h-2:where([data-designtools]):not([data-docs-content] *) {
     height: .5rem;
   }
-  :where([data-designtools]) .h-5, .h-5:where([data-designtools]) {
+  :where([data-designtools]) .h-5:not([data-docs-content] *), .h-5:where([data-designtools]):not([data-docs-content] *) {
     height: 1.25rem;
   }
-  :where([data-designtools]) .h-6, .h-6:where([data-designtools]) {
+  :where([data-designtools]) .h-6:not([data-docs-content] *), .h-6:where([data-designtools]):not([data-docs-content] *) {
     height: 1.5rem;
   }
-  :where([data-designtools]) .h-7, .h-7:where([data-designtools]) {
+  :where([data-designtools]) .h-7:not([data-docs-content] *), .h-7:where([data-designtools]):not([data-docs-content] *) {
     height: 1.75rem;
   }
-  :where([data-designtools]) .h-8, .h-8:where([data-designtools]) {
+  :where([data-designtools]) .h-8:not([data-docs-content] *), .h-8:where([data-designtools]):not([data-docs-content] *) {
     height: 2rem;
   }
-  :where([data-designtools]) .h-9, .h-9:where([data-designtools]) {
+  :where([data-designtools]) .h-9:not([data-docs-content] *), .h-9:where([data-designtools]):not([data-docs-content] *) {
     height: 2.25rem;
   }
-  :where([data-designtools]) .h-10, .h-10:where([data-designtools]) {
+  :where([data-designtools]) .h-10:not([data-docs-content] *), .h-10:where([data-designtools]):not([data-docs-content] *) {
     height: 2.5rem;
   }
-  :where([data-designtools]) .h-11, .h-11:where([data-designtools]) {
+  :where([data-designtools]) .h-11:not([data-docs-content] *), .h-11:where([data-designtools]):not([data-docs-content] *) {
     height: 2.75rem;
   }
-  :where([data-designtools]) .h-12, .h-12:where([data-designtools]) {
+  :where([data-designtools]) .h-12:not([data-docs-content] *), .h-12:where([data-designtools]):not([data-docs-content] *) {
     height: 3rem;
   }
-  :where([data-designtools]) .h-16, .h-16:where([data-designtools]) {
+  :where([data-designtools]) .h-14:not([data-docs-content] *), .h-14:where([data-designtools]):not([data-docs-content] *) {
+    height: 3.5rem;
+  }
+  :where([data-designtools]) .h-16:not([data-docs-content] *), .h-16:where([data-designtools]):not([data-docs-content] *) {
     height: 4rem;
   }
-  :where([data-designtools]) .h-24, .h-24:where([data-designtools]) {
+  :where([data-designtools]) .h-24:not([data-docs-content] *), .h-24:where([data-designtools]):not([data-docs-content] *) {
     height: 6rem;
   }
-  :where([data-designtools]) .h-28, .h-28:where([data-designtools]) {
+  :where([data-designtools]) .h-28:not([data-docs-content] *), .h-28:where([data-designtools]):not([data-docs-content] *) {
     height: 7rem;
   }
-  :where([data-designtools]) .h-36, .h-36:where([data-designtools]) {
+  :where([data-designtools]) .h-36:not([data-docs-content] *), .h-36:where([data-designtools]):not([data-docs-content] *) {
     height: 9rem;
   }
-  :where([data-designtools]) .h-44, .h-44:where([data-designtools]) {
+  :where([data-designtools]) .h-44:not([data-docs-content] *), .h-44:where([data-designtools]):not([data-docs-content] *) {
     height: 11rem;
   }
-  :where([data-designtools]) .h-dvh, .h-dvh:where([data-designtools]) {
+  :where([data-designtools]) .h-dvh:not([data-docs-content] *), .h-dvh:where([data-designtools]):not([data-docs-content] *) {
     height: 100dvh;
   }
-  :where([data-designtools]) .h-fit, .h-fit:where([data-designtools]) {
+  :where([data-designtools]) .h-fit:not([data-docs-content] *), .h-fit:where([data-designtools]):not([data-docs-content] *) {
     height: fit-content;
   }
-  :where([data-designtools]) .h-full, .h-full:where([data-designtools]) {
+  :where([data-designtools]) .h-full:not([data-docs-content] *), .h-full:where([data-designtools]):not([data-docs-content] *) {
     height: 100%;
   }
-  :where([data-designtools]) .h-px, .h-px:where([data-designtools]) {
+  :where([data-designtools]) .h-px:not([data-docs-content] *), .h-px:where([data-designtools]):not([data-docs-content] *) {
     height: 1px;
   }
-  :where([data-designtools]) .max-h-80, .max-h-80:where([data-designtools]) {
+  :where([data-designtools]) .max-h-80:not([data-docs-content] *), .max-h-80:where([data-designtools]):not([data-docs-content] *) {
     max-height: 20rem;
   }
-  :where([data-designtools]) .max-h-96, .max-h-96:where([data-designtools]) {
+  :where([data-designtools]) .max-h-96:not([data-docs-content] *), .max-h-96:where([data-designtools]):not([data-docs-content] *) {
     max-height: 24rem;
   }
-  :where([data-designtools]) .max-h-\[min\(36rem\,80dvh\)\], .max-h-\[min\(36rem\,80dvh\)\]:where([data-designtools]) {
+  :where([data-designtools]) .max-h-\[min\(36rem\,80dvh\)\]:not([data-docs-content] *), .max-h-\[min\(36rem\,80dvh\)\]:where([data-designtools]):not([data-docs-content] *) {
     max-height: min(36rem, 80dvh);
   }
-  :where([data-designtools]) .max-h-full, .max-h-full:where([data-designtools]) {
+  :where([data-designtools]) .max-h-full:not([data-docs-content] *), .max-h-full:where([data-designtools]):not([data-docs-content] *) {
     max-height: 100%;
   }
-  :where([data-designtools]) .min-h-\(--docs-target\,2\.75rem\), .min-h-\(--docs-target\,2\.75rem\):where([data-designtools]) {
+  :where([data-designtools]) .min-h-\(--docs-target\,2\.75rem\):not([data-docs-content] *), .min-h-\(--docs-target\,2\.75rem\):where([data-designtools]):not([data-docs-content] *) {
     min-height: var(--docs-target, 2.75rem);
   }
-  :where([data-designtools]) .min-h-0, .min-h-0:where([data-designtools]) {
+  :where([data-designtools]) .min-h-0:not([data-docs-content] *), .min-h-0:where([data-designtools]):not([data-docs-content] *) {
     min-height: 0;
   }
-  :where([data-designtools]) .min-h-6, .min-h-6:where([data-designtools]) {
+  :where([data-designtools]) .min-h-6:not([data-docs-content] *), .min-h-6:where([data-designtools]):not([data-docs-content] *) {
     min-height: 1.5rem;
   }
-  :where([data-designtools]) .min-h-8, .min-h-8:where([data-designtools]) {
+  :where([data-designtools]) .min-h-7:not([data-docs-content] *), .min-h-7:where([data-designtools]):not([data-docs-content] *) {
+    min-height: 1.75rem;
+  }
+  :where([data-designtools]) .min-h-8:not([data-docs-content] *), .min-h-8:where([data-designtools]):not([data-docs-content] *) {
     min-height: 2rem;
   }
-  :where([data-designtools]) .min-h-9, .min-h-9:where([data-designtools]) {
+  :where([data-designtools]) .min-h-9:not([data-docs-content] *), .min-h-9:where([data-designtools]):not([data-docs-content] *) {
     min-height: 2.25rem;
   }
-  :where([data-designtools]) .min-h-11, .min-h-11:where([data-designtools]) {
+  :where([data-designtools]) .min-h-10:not([data-docs-content] *), .min-h-10:where([data-designtools]):not([data-docs-content] *) {
+    min-height: 2.5rem;
+  }
+  :where([data-designtools]) .min-h-11:not([data-docs-content] *), .min-h-11:where([data-designtools]):not([data-docs-content] *) {
     min-height: 2.75rem;
   }
-  :where([data-designtools]) .min-h-12, .min-h-12:where([data-designtools]) {
+  :where([data-designtools]) .min-h-12:not([data-docs-content] *), .min-h-12:where([data-designtools]):not([data-docs-content] *) {
     min-height: 3rem;
   }
-  :where([data-designtools]) .min-h-20, .min-h-20:where([data-designtools]) {
-    min-height: 5rem;
+  :where([data-designtools]) .min-h-28:not([data-docs-content] *), .min-h-28:where([data-designtools]):not([data-docs-content] *) {
+    min-height: 7rem;
   }
-  :where([data-designtools]) .min-h-28, .min-h-28:where([data-designtools]) {
-    min-height: 7rem;
+  :where([data-designtools]) .min-h-36:not([data-docs-content] *), .min-h-36:where([data-designtools]):not([data-docs-content] *) {
+    min-height: 9rem;
   }
-  :where([data-designtools]) .min-h-40, .min-h-40:where([data-designtools]) {
+  :where([data-designtools]) .min-h-40:not([data-docs-content] *), .min-h-40:where([data-designtools]):not([data-docs-content] *) {
     min-height: 10rem;
   }
-  :where([data-designtools]) .min-h-48, .min-h-48:where([data-designtools]) {
+  :where([data-designtools]) .min-h-48:not([data-docs-content] *), .min-h-48:where([data-designtools]):not([data-docs-content] *) {
     min-height: 12rem;
   }
-  :where([data-designtools]) .min-h-64, .min-h-64:where([data-designtools]) {
+  :where([data-designtools]) .min-h-64:not([data-docs-content] *), .min-h-64:where([data-designtools]):not([data-docs-content] *) {
     min-height: 16rem;
   }
-  :where([data-designtools]) .min-h-72, .min-h-72:where([data-designtools]) {
+  :where([data-designtools]) .min-h-72:not([data-docs-content] *), .min-h-72:where([data-designtools]):not([data-docs-content] *) {
     min-height: 18rem;
   }
-  :where([data-designtools]) .min-h-96, .min-h-96:where([data-designtools]) {
+  :where([data-designtools]) .min-h-96:not([data-docs-content] *), .min-h-96:where([data-designtools]):not([data-docs-content] *) {
     min-height: 24rem;
   }
-  :where([data-designtools]) .min-h-\[var\(--docs-target\,2\.75rem\)\], .min-h-\[var\(--docs-target\,2\.75rem\)\]:where([data-designtools]) {
+  :where([data-designtools]) .min-h-\[var\(--docs-target\,2\.75rem\)\]:not([data-docs-content] *), .min-h-\[var\(--docs-target\,2\.75rem\)\]:where([data-designtools]):not([data-docs-content] *) {
     min-height: var(--docs-target, 2.75rem);
   }
-  :where([data-designtools]) .min-h-dvh, .min-h-dvh:where([data-designtools]) {
+  :where([data-designtools]) .min-h-dvh:not([data-docs-content] *), .min-h-dvh:where([data-designtools]):not([data-docs-content] *) {
     min-height: 100dvh;
   }
-  :where([data-designtools]) .min-h-full, .min-h-full:where([data-designtools]) {
+  :where([data-designtools]) .min-h-full:not([data-docs-content] *), .min-h-full:where([data-designtools]):not([data-docs-content] *) {
     min-height: 100%;
   }
-  :where([data-designtools]) .w-\(--active-tab-width\), .w-\(--active-tab-width\):where([data-designtools]) {
+  :where([data-designtools]) .w-\(--active-tab-width\):not([data-docs-content] *), .w-\(--active-tab-width\):where([data-designtools]):not([data-docs-content] *) {
     width: var(--active-tab-width);
   }
-  :where([data-designtools]) .w-0, .w-0:where([data-designtools]) {
+  :where([data-designtools]) .w-0:not([data-docs-content] *), .w-0:where([data-designtools]):not([data-docs-content] *) {
     width: 0;
   }
-  :where([data-designtools]) .w-0\.5, .w-0\.5:where([data-designtools]) {
+  :where([data-designtools]) .w-0\.5:not([data-docs-content] *), .w-0\.5:where([data-designtools]):not([data-docs-content] *) {
     width: .125rem;
   }
-  :where([data-designtools]) .w-9, .w-9:where([data-designtools]) {
+  :where([data-designtools]) .w-9:not([data-docs-content] *), .w-9:where([data-designtools]):not([data-docs-content] *) {
     width: 2.25rem;
   }
-  :where([data-designtools]) .w-10, .w-10:where([data-designtools]) {
+  :where([data-designtools]) .w-10:not([data-docs-content] *), .w-10:where([data-designtools]):not([data-docs-content] *) {
     width: 2.5rem;
   }
-  :where([data-designtools]) .w-11, .w-11:where([data-designtools]) {
+  :where([data-designtools]) .w-11:not([data-docs-content] *), .w-11:where([data-designtools]):not([data-docs-content] *) {
     width: 2.75rem;
   }
-  :where([data-designtools]) .w-12, .w-12:where([data-designtools]) {
-    width: 3rem;
+  :where([data-designtools]) .w-28:not([data-docs-content] *), .w-28:where([data-designtools]):not([data-docs-content] *) {
+    width: 7rem;
   }
-  :where([data-designtools]) .w-28, .w-28:where([data-designtools]) {
-    width: 7rem;
+  :where([data-designtools]) .w-32:not([data-docs-content] *), .w-32:where([data-designtools]):not([data-docs-content] *) {
+    width: 8rem;
   }
-  :where([data-designtools]) .w-48, .w-48:where([data-designtools]) {
+  :where([data-designtools]) .w-48:not([data-docs-content] *), .w-48:where([data-designtools]):not([data-docs-content] *) {
     width: 12rem;
   }
-  :where([data-designtools]) .w-72, .w-72:where([data-designtools]) {
+  :where([data-designtools]) .w-72:not([data-docs-content] *), .w-72:where([data-designtools]):not([data-docs-content] *) {
     width: 18rem;
   }
-  :where([data-designtools]) .w-\[min\(21rem\,88vw\)\], .w-\[min\(21rem\,88vw\)\]:where([data-designtools]) {
+  :where([data-designtools]) .w-\[min\(21rem\,88vw\)\]:not([data-docs-content] *), .w-\[min\(21rem\,88vw\)\]:where([data-designtools]):not([data-docs-content] *) {
     width: min(21rem, 88vw);
   }
-  :where([data-designtools]) .w-auto, .w-auto:where([data-designtools]) {
+  :where([data-designtools]) .w-auto:not([data-docs-content] *), .w-auto:where([data-designtools]):not([data-docs-content] *) {
     width: auto;
   }
-  :where([data-designtools]) .w-fit, .w-fit:where([data-designtools]) {
+  :where([data-designtools]) .w-fit:not([data-docs-content] *), .w-fit:where([data-designtools]):not([data-docs-content] *) {
     width: fit-content;
   }
-  :where([data-designtools]) .w-full, .w-full:where([data-designtools]) {
+  :where([data-designtools]) .w-full:not([data-docs-content] *), .w-full:where([data-designtools]):not([data-docs-content] *) {
     width: 100%;
   }
-  :where([data-designtools]) .w-px, .w-px:where([data-designtools]) {
+  :where([data-designtools]) .w-px:not([data-docs-content] *), .w-px:where([data-designtools]):not([data-docs-content] *) {
     width: 1px;
   }
-  :where([data-designtools]) .max-w-2xl, .max-w-2xl:where([data-designtools]) {
+  :where([data-designtools]) .max-w-2xl:not([data-docs-content] *), .max-w-2xl:where([data-designtools]):not([data-docs-content] *) {
     max-width: 42rem;
   }
-  :where([data-designtools]) .max-w-3xl, .max-w-3xl:where([data-designtools]) {
+  :where([data-designtools]) .max-w-3xl:not([data-docs-content] *), .max-w-3xl:where([data-designtools]):not([data-docs-content] *) {
     max-width: 48rem;
   }
-  :where([data-designtools]) .max-w-28, .max-w-28:where([data-designtools]) {
+  :where([data-designtools]) .max-w-28:not([data-docs-content] *), .max-w-28:where([data-designtools]):not([data-docs-content] *) {
     max-width: 7rem;
   }
-  :where([data-designtools]) .max-w-64, .max-w-64:where([data-designtools]) {
+  :where([data-designtools]) .max-w-56:not([data-docs-content] *), .max-w-56:where([data-designtools]):not([data-docs-content] *) {
+    max-width: 14rem;
+  }
+  :where([data-designtools]) .max-w-64:not([data-docs-content] *), .max-w-64:where([data-designtools]):not([data-docs-content] *) {
     max-width: 16rem;
   }
-  :where([data-designtools]) .max-w-\[90rem\], .max-w-\[90rem\]:where([data-designtools]) {
+  :where([data-designtools]) .max-w-\[90rem\]:not([data-docs-content] *), .max-w-\[90rem\]:where([data-designtools]):not([data-docs-content] *) {
     max-width: 90rem;
   }
-  :where([data-designtools]) .max-w-full, .max-w-full:where([data-designtools]) {
+  :where([data-designtools]) .max-w-full:not([data-docs-content] *), .max-w-full:where([data-designtools]):not([data-docs-content] *) {
     max-width: 100%;
   }
-  :where([data-designtools]) .max-w-md, .max-w-md:where([data-designtools]) {
+  :where([data-designtools]) .max-w-md:not([data-docs-content] *), .max-w-md:where([data-designtools]):not([data-docs-content] *) {
     max-width: 28rem;
   }
-  :where([data-designtools]) .max-w-prose, .max-w-prose:where([data-designtools]) {
+  :where([data-designtools]) .max-w-prose:not([data-docs-content] *), .max-w-prose:where([data-designtools]):not([data-docs-content] *) {
     max-width: 65ch;
   }
-  :where([data-designtools]) .max-w-xl, .max-w-xl:where([data-designtools]) {
+  :where([data-designtools]) .max-w-xl:not([data-docs-content] *), .max-w-xl:where([data-designtools]):not([data-docs-content] *) {
     max-width: 36rem;
   }
-  :where([data-designtools]) .min-w-\(--anchor-width\), .min-w-\(--anchor-width\):where([data-designtools]) {
+  :where([data-designtools]) .min-w-\(--anchor-width\):not([data-docs-content] *), .min-w-\(--anchor-width\):where([data-designtools]):not([data-docs-content] *) {
     min-width: var(--anchor-width);
   }
-  :where([data-designtools]) .min-w-0, .min-w-0:where([data-designtools]) {
+  :where([data-designtools]) .min-w-0:not([data-docs-content] *), .min-w-0:where([data-designtools]):not([data-docs-content] *) {
     min-width: 0;
   }
-  :where([data-designtools]) .min-w-56, .min-w-56:where([data-designtools]) {
+  :where([data-designtools]) .min-w-56:not([data-docs-content] *), .min-w-56:where([data-designtools]):not([data-docs-content] *) {
     min-width: 14rem;
   }
-  :where([data-designtools]) .min-w-\[32rem\], .min-w-\[32rem\]:where([data-designtools]) {
+  :where([data-designtools]) .min-w-\[32rem\]:not([data-docs-content] *), .min-w-\[32rem\]:where([data-designtools]):not([data-docs-content] *) {
     min-width: 32rem;
   }
-  :where([data-designtools]) .min-w-\[36rem\], .min-w-\[36rem\]:where([data-designtools]) {
+  :where([data-designtools]) .min-w-\[34rem\]:not([data-docs-content] *), .min-w-\[34rem\]:where([data-designtools]):not([data-docs-content] *) {
+    min-width: 34rem;
+  }
+  :where([data-designtools]) .min-w-\[36rem\]:not([data-docs-content] *), .min-w-\[36rem\]:where([data-designtools]):not([data-docs-content] *) {
     min-width: 36rem;
   }
-  :where([data-designtools]) .min-w-\[var\(--docs-target\,2\.75rem\)\], .min-w-\[var\(--docs-target\,2\.75rem\)\]:where([data-designtools]) {
+  :where([data-designtools]) .min-w-\[46rem\]:not([data-docs-content] *), .min-w-\[46rem\]:where([data-designtools]):not([data-docs-content] *) {
+    min-width: 46rem;
+  }
+  :where([data-designtools]) .min-w-\[var\(--docs-target\,2\.75rem\)\]:not([data-docs-content] *), .min-w-\[var\(--docs-target\,2\.75rem\)\]:where([data-designtools]):not([data-docs-content] *) {
     min-width: var(--docs-target, 2.75rem);
   }
-  :where([data-designtools]) .min-w-fit, .min-w-fit:where([data-designtools]) {
+  :where([data-designtools]) .min-w-fit:not([data-docs-content] *), .min-w-fit:where([data-designtools]):not([data-docs-content] *) {
     min-width: fit-content;
   }
-  :where([data-designtools]) .flex-1, .flex-1:where([data-designtools]) {
+  :where([data-designtools]) .flex-1:not([data-docs-content] *), .flex-1:where([data-designtools]):not([data-docs-content] *) {
     flex: 1;
   }
-  :where([data-designtools]) .shrink-0, .shrink-0:where([data-designtools]) {
+  :where([data-designtools]) .shrink-0:not([data-docs-content] *), .shrink-0:where([data-designtools]):not([data-docs-content] *) {
     flex-shrink: 0;
   }
-  :where([data-designtools]) .border-collapse, .border-collapse:where([data-designtools]) {
+  :where([data-designtools]) .table-fixed:not([data-docs-content] *), .table-fixed:where([data-designtools]):not([data-docs-content] *) {
+    table-layout: fixed;
+  }
+  :where([data-designtools]) .border-collapse:not([data-docs-content] *), .border-collapse:where([data-designtools]):not([data-docs-content] *) {
     border-collapse: collapse;
   }
-  :where([data-designtools]) .-translate-x-1\/2, .-translate-x-1\/2:where([data-designtools]) {
+  :where([data-designtools]) .-translate-x-1\/2:not([data-docs-content] *), .-translate-x-1\/2:where([data-designtools]):not([data-docs-content] *) {
     --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
-  :where([data-designtools]) .-translate-y-1\/2, .-translate-y-1\/2:where([data-designtools]) {
+  :where([data-designtools]) .-translate-y-1\/2:not([data-docs-content] *), .-translate-y-1\/2:where([data-designtools]):not([data-docs-content] *) {
     --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
-  :where([data-designtools]) .transform, .transform:where([data-designtools]) {
+  :where([data-designtools]) .transform:not([data-docs-content] *), .transform:where([data-designtools]):not([data-docs-content] *) {
     transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
   }
-  :where([data-designtools]) .animate-spin, .animate-spin:where([data-designtools]) {
+  :where([data-designtools]) .animate-spin:not([data-docs-content] *), .animate-spin:where([data-designtools]):not([data-docs-content] *) {
     animation: 1s linear infinite spin;
   }
-  :where([data-designtools]) .cursor-pointer, .cursor-pointer:where([data-designtools]) {
+  :where([data-designtools]) .cursor-pointer:not([data-docs-content] *), .cursor-pointer:where([data-designtools]):not([data-docs-content] *) {
     cursor: pointer;
   }
-  :where([data-designtools]) .resize, .resize:where([data-designtools]) {
+  :where([data-designtools]) .resize:not([data-docs-content] *), .resize:where([data-designtools]):not([data-docs-content] *) {
     resize: both;
   }
-  :where([data-designtools]) .resize-none, .resize-none:where([data-designtools]) {
+  :where([data-designtools]) .resize-none:not([data-docs-content] *), .resize-none:where([data-designtools]):not([data-docs-content] *) {
     resize: none;
   }
-  :where([data-designtools]) .resize-y, .resize-y:where([data-designtools]) {
+  :where([data-designtools]) .resize-y:not([data-docs-content] *), .resize-y:where([data-designtools]):not([data-docs-content] *) {
     resize: vertical;
   }
-  :where([data-designtools]) .scroll-mt-24, .scroll-mt-24:where([data-designtools]) {
+  :where([data-designtools]) .scroll-mt-24:not([data-docs-content] *), .scroll-mt-24:where([data-designtools]):not([data-docs-content] *) {
     scroll-margin-top: 6rem;
   }
-  :where([data-designtools]) .list-disc, .list-disc:where([data-designtools]) {
+  :where([data-designtools]) .list-disc:not([data-docs-content] *), .list-disc:where([data-designtools]):not([data-docs-content] *) {
     list-style-type: disc;
   }
-  :where([data-designtools]) .list-none, .list-none:where([data-designtools]) {
+  :where([data-designtools]) .list-none:not([data-docs-content] *), .list-none:where([data-designtools]):not([data-docs-content] *) {
     list-style-type: none;
   }
-  :where([data-designtools]) .\[appearance\:textfield\], .\[appearance\:textfield\]:where([data-designtools]) {
+  :where([data-designtools]) .\[appearance\:textfield\]:not([data-docs-content] *), .\[appearance\:textfield\]:where([data-designtools]):not([data-docs-content] *) {
     appearance: textfield;
   }
-  :where([data-designtools]) .auto-cols-fr, .auto-cols-fr:where([data-designtools]) {
+  :where([data-designtools]) .auto-cols-fr:not([data-docs-content] *), .auto-cols-fr:where([data-designtools]):not([data-docs-content] *) {
     grid-auto-columns: minmax(0, 1fr);
   }
-  :where([data-designtools]) .grid-flow-col, .grid-flow-col:where([data-designtools]) {
+  :where([data-designtools]) .grid-flow-col:not([data-docs-content] *), .grid-flow-col:where([data-designtools]):not([data-docs-content] *) {
     grid-auto-flow: column;
   }
-  :where([data-designtools]) .grid-cols-1, .grid-cols-1:where([data-designtools]) {
+  :where([data-designtools]) .grid-cols-1:not([data-docs-content] *), .grid-cols-1:where([data-designtools]):not([data-docs-content] *) {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
-  :where([data-designtools]) .grid-cols-2, .grid-cols-2:where([data-designtools]) {
+  :where([data-designtools]) .grid-cols-2:not([data-docs-content] *), .grid-cols-2:where([data-designtools]):not([data-docs-content] *) {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
-  :where([data-designtools]) .grid-cols-3, .grid-cols-3:where([data-designtools]) {
+  :where([data-designtools]) .grid-cols-3:not([data-docs-content] *), .grid-cols-3:where([data-designtools]):not([data-docs-content] *) {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
-  :where([data-designtools]) .grid-cols-\[1fr_auto\], .grid-cols-\[1fr_auto\]:where([data-designtools]) {
+  :where([data-designtools]) .grid-cols-\[1fr_auto\]:not([data-docs-content] *), .grid-cols-\[1fr_auto\]:where([data-designtools]):not([data-docs-content] *) {
     grid-template-columns: 1fr auto;
   }
-  :where([data-designtools]) .grid-cols-\[1rem_1fr\], .grid-cols-\[1rem_1fr\]:where([data-designtools]) {
+  :where([data-designtools]) .grid-cols-\[1rem_1fr\]:not([data-docs-content] *), .grid-cols-\[1rem_1fr\]:where([data-designtools]):not([data-docs-content] *) {
     grid-template-columns: 1rem 1fr;
   }
-  :where([data-designtools]) .grid-cols-\[3rem_4rem_1fr\], .grid-cols-\[3rem_4rem_1fr\]:where([data-designtools]) {
+  :where([data-designtools]) .grid-cols-\[3rem_4rem_1fr\]:not([data-docs-content] *), .grid-cols-\[3rem_4rem_1fr\]:where([data-designtools]):not([data-docs-content] *) {
     grid-template-columns: 3rem 4rem 1fr;
   }
-  :where([data-designtools]) .grid-cols-\[3rem_minmax\(0\,1fr\)\], .grid-cols-\[3rem_minmax\(0\,1fr\)\]:where([data-designtools]) {
+  :where([data-designtools]) .grid-cols-\[3rem_minmax\(0\,1fr\)\]:not([data-docs-content] *), .grid-cols-\[3rem_minmax\(0\,1fr\)\]:where([data-designtools]):not([data-docs-content] *) {
     grid-template-columns: 3rem minmax(0, 1fr);
   }
-  :where([data-designtools]) .grid-cols-\[3rem_minmax\(0\,1fr\)_auto\], .grid-cols-\[3rem_minmax\(0\,1fr\)_auto\]:where([data-designtools]) {
-    grid-template-columns: 3rem minmax(0, 1fr) auto;
-  }
-  :where([data-designtools]) .grid-cols-\[5rem_8rem_minmax\(0\,1fr\)\], .grid-cols-\[5rem_8rem_minmax\(0\,1fr\)\]:where([data-designtools]) {
+  :where([data-designtools]) .grid-cols-\[5rem_8rem_minmax\(0\,1fr\)\]:not([data-docs-content] *), .grid-cols-\[5rem_8rem_minmax\(0\,1fr\)\]:where([data-designtools]):not([data-docs-content] *) {
     grid-template-columns: 5rem 8rem minmax(0, 1fr);
   }
-  :where([data-designtools]) .grid-cols-\[6rem_1fr\], .grid-cols-\[6rem_1fr\]:where([data-designtools]) {
+  :where([data-designtools]) .grid-cols-\[6rem_1fr\]:not([data-docs-content] *), .grid-cols-\[6rem_1fr\]:where([data-designtools]):not([data-docs-content] *) {
     grid-template-columns: 6rem 1fr;
   }
-  :where([data-designtools]) .grid-cols-\[6rem_minmax\(0\,1fr\)\], .grid-cols-\[6rem_minmax\(0\,1fr\)\]:where([data-designtools]) {
+  :where([data-designtools]) .grid-cols-\[6rem_minmax\(0\,1fr\)\]:not([data-docs-content] *), .grid-cols-\[6rem_minmax\(0\,1fr\)\]:where([data-designtools]):not([data-docs-content] *) {
     grid-template-columns: 6rem minmax(0, 1fr);
   }
-  :where([data-designtools]) .grid-cols-\[minmax\(0\,1fr\)_auto\], .grid-cols-\[minmax\(0\,1fr\)_auto\]:where([data-designtools]) {
+  :where([data-designtools]) .grid-cols-\[minmax\(0\,1fr\)_auto\]:not([data-docs-content] *), .grid-cols-\[minmax\(0\,1fr\)_auto\]:where([data-designtools]):not([data-docs-content] *) {
     grid-template-columns: minmax(0, 1fr) auto;
   }
-  :where([data-designtools]) .flex-col, .flex-col:where([data-designtools]) {
+  :where([data-designtools]) .flex-col:not([data-docs-content] *), .flex-col:where([data-designtools]):not([data-docs-content] *) {
     flex-direction: column;
   }
-  :where([data-designtools]) .flex-nowrap, .flex-nowrap:where([data-designtools]) {
+  :where([data-designtools]) .flex-nowrap:not([data-docs-content] *), .flex-nowrap:where([data-designtools]):not([data-docs-content] *) {
     flex-wrap: nowrap;
   }
-  :where([data-designtools]) .flex-wrap, .flex-wrap:where([data-designtools]) {
+  :where([data-designtools]) .flex-wrap:not([data-docs-content] *), .flex-wrap:where([data-designtools]):not([data-docs-content] *) {
     flex-wrap: wrap;
   }
-  :where([data-designtools]) .items-baseline, .items-baseline:where([data-designtools]) {
+  :where([data-designtools]) .place-items-center:not([data-docs-content] *), .place-items-center:where([data-designtools]):not([data-docs-content] *) {
+    place-items: center;
+  }
+  :where([data-designtools]) .items-baseline:not([data-docs-content] *), .items-baseline:where([data-designtools]):not([data-docs-content] *) {
     align-items: baseline;
   }
-  :where([data-designtools]) .items-center, .items-center:where([data-designtools]) {
+  :where([data-designtools]) .items-center:not([data-docs-content] *), .items-center:where([data-designtools]):not([data-docs-content] *) {
     align-items: center;
   }
-  :where([data-designtools]) .items-end, .items-end:where([data-designtools]) {
+  :where([data-designtools]) .items-end:not([data-docs-content] *), .items-end:where([data-designtools]):not([data-docs-content] *) {
     align-items: flex-end;
   }
-  :where([data-designtools]) .items-start, .items-start:where([data-designtools]) {
+  :where([data-designtools]) .items-start:not([data-docs-content] *), .items-start:where([data-designtools]):not([data-docs-content] *) {
     align-items: flex-start;
   }
-  :where([data-designtools]) .items-stretch, .items-stretch:where([data-designtools]) {
+  :where([data-designtools]) .items-stretch:not([data-docs-content] *), .items-stretch:where([data-designtools]):not([data-docs-content] *) {
     align-items: stretch;
   }
-  :where([data-designtools]) .justify-between, .justify-between:where([data-designtools]) {
+  :where([data-designtools]) .justify-between:not([data-docs-content] *), .justify-between:where([data-designtools]):not([data-docs-content] *) {
     justify-content: space-between;
   }
-  :where([data-designtools]) .justify-center, .justify-center:where([data-designtools]) {
+  :where([data-designtools]) .justify-center:not([data-docs-content] *), .justify-center:where([data-designtools]):not([data-docs-content] *) {
     justify-content: center;
   }
-  :where([data-designtools]) .gap-0\.5, .gap-0\.5:where([data-designtools]) {
+  :where([data-designtools]) .gap-0\.5:not([data-docs-content] *), .gap-0\.5:where([data-designtools]):not([data-docs-content] *) {
     gap: .125rem;
   }
-  :where([data-designtools]) .gap-1, .gap-1:where([data-designtools]) {
+  :where([data-designtools]) .gap-1:not([data-docs-content] *), .gap-1:where([data-designtools]):not([data-docs-content] *) {
     gap: .25rem;
   }
-  :where([data-designtools]) .gap-1\.5, .gap-1\.5:where([data-designtools]) {
+  :where([data-designtools]) .gap-1\.5:not([data-docs-content] *), .gap-1\.5:where([data-designtools]):not([data-docs-content] *) {
     gap: .375rem;
   }
-  :where([data-designtools]) .gap-2, .gap-2:where([data-designtools]) {
+  :where([data-designtools]) .gap-2:not([data-docs-content] *), .gap-2:where([data-designtools]):not([data-docs-content] *) {
     gap: .5rem;
   }
-  :where([data-designtools]) .gap-2\.5, .gap-2\.5:where([data-designtools]) {
+  :where([data-designtools]) .gap-2\.5:not([data-docs-content] *), .gap-2\.5:where([data-designtools]):not([data-docs-content] *) {
     gap: .625rem;
   }
-  :where([data-designtools]) .gap-3, .gap-3:where([data-designtools]) {
+  :where([data-designtools]) .gap-3:not([data-docs-content] *), .gap-3:where([data-designtools]):not([data-docs-content] *) {
     gap: .75rem;
   }
-  :where([data-designtools]) .gap-4, .gap-4:where([data-designtools]) {
+  :where([data-designtools]) .gap-4:not([data-docs-content] *), .gap-4:where([data-designtools]):not([data-docs-content] *) {
     gap: 1rem;
   }
-  :where([data-designtools]) .gap-5, .gap-5:where([data-designtools]) {
+  :where([data-designtools]) .gap-5:not([data-docs-content] *), .gap-5:where([data-designtools]):not([data-docs-content] *) {
     gap: 1.25rem;
   }
-  :where([data-designtools]) .gap-6, .gap-6:where([data-designtools]) {
+  :where([data-designtools]) .gap-6:not([data-docs-content] *), .gap-6:where([data-designtools]):not([data-docs-content] *) {
     gap: 1.5rem;
   }
-  :where([data-designtools]) .gap-7, .gap-7:where([data-designtools]) {
+  :where([data-designtools]) .gap-7:not([data-docs-content] *), .gap-7:where([data-designtools]):not([data-docs-content] *) {
     gap: 1.75rem;
   }
-  :where([data-designtools]) .gap-8, .gap-8:where([data-designtools]) {
+  :where([data-designtools]) .gap-8:not([data-docs-content] *), .gap-8:where([data-designtools]):not([data-docs-content] *) {
     gap: 2rem;
   }
-  :where([data-designtools]) .gap-10, .gap-10:where([data-designtools]) {
+  :where([data-designtools]) .gap-10:not([data-docs-content] *), .gap-10:where([data-designtools]):not([data-docs-content] *) {
     gap: 2.5rem;
   }
-  :where([data-designtools]) .gap-12, .gap-12:where([data-designtools]) {
+  :where([data-designtools]) .gap-12:not([data-docs-content] *), .gap-12:where([data-designtools]):not([data-docs-content] *) {
     gap: 3rem;
   }
-  :where([data-designtools]) .gap-14, .gap-14:where([data-designtools]) {
+  :where([data-designtools]) .gap-14:not([data-docs-content] *), .gap-14:where([data-designtools]):not([data-docs-content] *) {
     gap: 3.5rem;
   }
-  :where([data-designtools]) .gap-16, .gap-16:where([data-designtools]) {
+  :where([data-designtools]) .gap-16:not([data-docs-content] *), .gap-16:where([data-designtools]):not([data-docs-content] *) {
     gap: 4rem;
   }
-  :where([data-designtools]) .gap-x-1, .gap-x-1:where([data-designtools]) {
+  :where([data-designtools]) .gap-x-1:not([data-docs-content] *), .gap-x-1:where([data-designtools]):not([data-docs-content] *) {
     column-gap: .25rem;
   }
-  :where([data-designtools]) .gap-x-3, .gap-x-3:where([data-designtools]) {
+  :where([data-designtools]) .gap-x-2:not([data-docs-content] *), .gap-x-2:where([data-designtools]):not([data-docs-content] *) {
+    column-gap: .5rem;
+  }
+  :where([data-designtools]) .gap-x-3:not([data-docs-content] *), .gap-x-3:where([data-designtools]):not([data-docs-content] *) {
     column-gap: .75rem;
   }
-  :where([data-designtools]) .gap-x-4, .gap-x-4:where([data-designtools]) {
+  :where([data-designtools]) .gap-x-4:not([data-docs-content] *), .gap-x-4:where([data-designtools]):not([data-docs-content] *) {
     column-gap: 1rem;
   }
-  :where([data-designtools]) .gap-x-6, .gap-x-6:where([data-designtools]) {
+  :where([data-designtools]) .gap-x-6:not([data-docs-content] *), .gap-x-6:where([data-designtools]):not([data-docs-content] *) {
     column-gap: 1.5rem;
   }
-  :where([data-designtools]) .gap-x-8, .gap-x-8:where([data-designtools]) {
+  :where([data-designtools]) .gap-x-8:not([data-docs-content] *), .gap-x-8:where([data-designtools]):not([data-docs-content] *) {
     column-gap: 2rem;
   }
-  :where([data-designtools]) .gap-x-10, .gap-x-10:where([data-designtools]) {
+  :where([data-designtools]) .gap-x-10:not([data-docs-content] *), .gap-x-10:where([data-designtools]):not([data-docs-content] *) {
     column-gap: 2.5rem;
   }
-  :where([data-designtools]) .gap-x-12, .gap-x-12:where([data-designtools]) {
+  :where([data-designtools]) .gap-x-12:not([data-docs-content] *), .gap-x-12:where([data-designtools]):not([data-docs-content] *) {
     column-gap: 3rem;
   }
-  :where([data-designtools]) .gap-y-1, .gap-y-1:where([data-designtools]) {
+  :where([data-designtools]) :where(.-space-x-1\.5 > :not(:last-child)):not([data-docs-content] *), :where(.-space-x-1\.5 > :not(:last-child)):where([data-designtools]):not([data-docs-content] *) {
+    --tw-space-x-reverse: 0;
+    margin-inline-start: calc(calc(.25rem * -1.5) * var(--tw-space-x-reverse));
+    margin-inline-end: calc(calc(.25rem * -1.5) * calc(1 - var(--tw-space-x-reverse)));
+  }
+  :where([data-designtools]) .gap-y-1:not([data-docs-content] *), .gap-y-1:where([data-designtools]):not([data-docs-content] *) {
     row-gap: .25rem;
   }
-  :where([data-designtools]) .gap-y-1\.5, .gap-y-1\.5:where([data-designtools]) {
+  :where([data-designtools]) .gap-y-1\.5:not([data-docs-content] *), .gap-y-1\.5:where([data-designtools]):not([data-docs-content] *) {
     row-gap: .375rem;
   }
-  :where([data-designtools]) .gap-y-2, .gap-y-2:where([data-designtools]) {
+  :where([data-designtools]) .gap-y-2:not([data-docs-content] *), .gap-y-2:where([data-designtools]):not([data-docs-content] *) {
     row-gap: .5rem;
   }
-  :where([data-designtools]) .gap-y-3, .gap-y-3:where([data-designtools]) {
+  :where([data-designtools]) .gap-y-3:not([data-docs-content] *), .gap-y-3:where([data-designtools]):not([data-docs-content] *) {
     row-gap: .75rem;
   }
-  :where([data-designtools]) .gap-y-4, .gap-y-4:where([data-designtools]) {
+  :where([data-designtools]) .gap-y-4:not([data-docs-content] *), .gap-y-4:where([data-designtools]):not([data-docs-content] *) {
     row-gap: 1rem;
   }
-  :where([data-designtools]) .gap-y-5, .gap-y-5:where([data-designtools]) {
+  :where([data-designtools]) .gap-y-5:not([data-docs-content] *), .gap-y-5:where([data-designtools]):not([data-docs-content] *) {
     row-gap: 1.25rem;
   }
-  :where([data-designtools]) .gap-y-6, .gap-y-6:where([data-designtools]) {
+  :where([data-designtools]) .gap-y-6:not([data-docs-content] *), .gap-y-6:where([data-designtools]):not([data-docs-content] *) {
     row-gap: 1.5rem;
   }
-  :where([data-designtools]) .gap-y-8, .gap-y-8:where([data-designtools]) {
+  :where([data-designtools]) .gap-y-8:not([data-docs-content] *), .gap-y-8:where([data-designtools]):not([data-docs-content] *) {
     row-gap: 2rem;
   }
-  :where([data-designtools]) .gap-y-10, .gap-y-10:where([data-designtools]) {
+  :where([data-designtools]) .gap-y-10:not([data-docs-content] *), .gap-y-10:where([data-designtools]):not([data-docs-content] *) {
     row-gap: 2.5rem;
   }
-  :where([data-designtools]) :where(.divide-y > :not(:last-child)), :where(.divide-y > :not(:last-child)):where([data-designtools]) {
+  :where([data-designtools]) :where(.divide-y > :not(:last-child)):not([data-docs-content] *), :where(.divide-y > :not(:last-child)):where([data-designtools]):not([data-docs-content] *) {
     --tw-divide-y-reverse: 0;
     border-bottom-style: var(--tw-border-style);
     border-top-style: var(--tw-border-style);
@@ -1314,1824 +1395,1944 @@
     border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
   }
-  :where([data-designtools]) :where(.divide-border > :not(:last-child)), :where(.divide-border > :not(:last-child)):where([data-designtools]) {
+  :where([data-designtools]) :where(.divide-border > :not(:last-child)):not([data-docs-content] *), :where(.divide-border > :not(:last-child)):where([data-designtools]):not([data-docs-content] *) {
     border-color: var(--border, #e2e4e8);
   }
-  :where([data-designtools]) .self-center, .self-center:where([data-designtools]) {
-    align-self: center;
-  }
-  :where([data-designtools]) .self-end, .self-end:where([data-designtools]) {
+  :where([data-designtools]) .self-end:not([data-docs-content] *), .self-end:where([data-designtools]):not([data-docs-content] *) {
     align-self: flex-end;
   }
-  :where([data-designtools]) .justify-self-end, .justify-self-end:where([data-designtools]) {
+  :where([data-designtools]) .justify-self-end:not([data-docs-content] *), .justify-self-end:where([data-designtools]):not([data-docs-content] *) {
     justify-self: flex-end;
   }
-  :where([data-designtools]) .truncate, .truncate:where([data-designtools]) {
+  :where([data-designtools]) .truncate:not([data-docs-content] *), .truncate:where([data-designtools]):not([data-docs-content] *) {
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
   }
-  :where([data-designtools]) .overflow-auto, .overflow-auto:where([data-designtools]) {
+  :where([data-designtools]) .overflow-auto:not([data-docs-content] *), .overflow-auto:where([data-designtools]):not([data-docs-content] *) {
     overflow: auto;
   }
-  :where([data-designtools]) .overflow-hidden, .overflow-hidden:where([data-designtools]) {
+  :where([data-designtools]) .overflow-hidden:not([data-docs-content] *), .overflow-hidden:where([data-designtools]):not([data-docs-content] *) {
     overflow: hidden;
   }
-  :where([data-designtools]) .overflow-x-auto, .overflow-x-auto:where([data-designtools]) {
+  :where([data-designtools]) .overflow-x-auto:not([data-docs-content] *), .overflow-x-auto:where([data-designtools]):not([data-docs-content] *) {
     overflow-x: auto;
   }
-  :where([data-designtools]) .overflow-y-auto, .overflow-y-auto:where([data-designtools]) {
+  :where([data-designtools]) .overflow-y-auto:not([data-docs-content] *), .overflow-y-auto:where([data-designtools]):not([data-docs-content] *) {
     overflow-y: auto;
   }
-  :where([data-designtools]) .overflow-y-hidden, .overflow-y-hidden:where([data-designtools]) {
+  :where([data-designtools]) .overflow-y-hidden:not([data-docs-content] *), .overflow-y-hidden:where([data-designtools]):not([data-docs-content] *) {
     overflow-y: hidden;
   }
-  :where([data-designtools]) .overscroll-contain, .overscroll-contain:where([data-designtools]) {
+  :where([data-designtools]) .overscroll-contain:not([data-docs-content] *), .overscroll-contain:where([data-designtools]):not([data-docs-content] *) {
     overscroll-behavior: contain;
   }
-  :where([data-designtools]) .rounded, .rounded:where([data-designtools]) {
+  :where([data-designtools]) .rounded:not([data-docs-content] *), .rounded:where([data-designtools]):not([data-docs-content] *) {
     border-radius: .25rem;
   }
-  :where([data-designtools]) .rounded-2xl, .rounded-2xl:where([data-designtools]) {
+  :where([data-designtools]) .rounded-2xl:not([data-docs-content] *), .rounded-2xl:where([data-designtools]):not([data-docs-content] *) {
     border-radius: var(--docs-radius-2xl, var(--radius-2xl, 1rem));
   }
-  :where([data-designtools]) .rounded-full, .rounded-full:where([data-designtools]) {
+  :where([data-designtools]) .rounded-full:not([data-docs-content] *), .rounded-full:where([data-designtools]):not([data-docs-content] *) {
     border-radius: 3.40282e38px;
   }
-  :where([data-designtools]) .rounded-lg, .rounded-lg:where([data-designtools]) {
+  :where([data-designtools]) .rounded-lg:not([data-docs-content] *), .rounded-lg:where([data-designtools]):not([data-docs-content] *) {
     border-radius: var(--docs-radius-lg, var(--radius-lg, .5rem));
   }
-  :where([data-designtools]) .rounded-md, .rounded-md:where([data-designtools]) {
+  :where([data-designtools]) .rounded-md:not([data-docs-content] *), .rounded-md:where([data-designtools]):not([data-docs-content] *) {
     border-radius: var(--docs-radius-md, var(--radius-md, .375rem));
   }
-  :where([data-designtools]) .rounded-sm, .rounded-sm:where([data-designtools]) {
+  :where([data-designtools]) .rounded-sm:not([data-docs-content] *), .rounded-sm:where([data-designtools]):not([data-docs-content] *) {
     border-radius: var(--docs-radius-sm, var(--radius-sm, .25rem));
   }
-  :where([data-designtools]) .rounded-xl, .rounded-xl:where([data-designtools]) {
+  :where([data-designtools]) .rounded-xl:not([data-docs-content] *), .rounded-xl:where([data-designtools]):not([data-docs-content] *) {
     border-radius: var(--docs-radius-xl, var(--radius-xl, .75rem));
   }
-  :where([data-designtools]) .rounded-l-lg, .rounded-l-lg:where([data-designtools]) {
+  :where([data-designtools]) .rounded-l-lg:not([data-docs-content] *), .rounded-l-lg:where([data-designtools]):not([data-docs-content] *) {
     border-top-left-radius: var(--docs-radius-lg, var(--radius-lg, .5rem));
     border-bottom-left-radius: var(--docs-radius-lg, var(--radius-lg, .5rem));
   }
-  :where([data-designtools]) .rounded-r-lg, .rounded-r-lg:where([data-designtools]) {
+  :where([data-designtools]) .rounded-r-lg:not([data-docs-content] *), .rounded-r-lg:where([data-designtools]):not([data-docs-content] *) {
     border-top-right-radius: var(--docs-radius-lg, var(--radius-lg, .5rem));
     border-bottom-right-radius: var(--docs-radius-lg, var(--radius-lg, .5rem));
   }
-  :where([data-designtools]) .border, .border:where([data-designtools]) {
+  :where([data-designtools]) .border:not([data-docs-content] *), .border:where([data-designtools]):not([data-docs-content] *) {
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
-  :where([data-designtools]) .border-2, .border-2:where([data-designtools]) {
+  :where([data-designtools]) .border-0:not([data-docs-content] *), .border-0:where([data-designtools]):not([data-docs-content] *) {
+    border-style: var(--tw-border-style);
+    border-width: 0;
+  }
+  :where([data-designtools]) .border-2:not([data-docs-content] *), .border-2:where([data-designtools]):not([data-docs-content] *) {
     border-style: var(--tw-border-style);
     border-width: 2px;
   }
-  :where([data-designtools]) .border-y, .border-y:where([data-designtools]) {
+  :where([data-designtools]) .border-y:not([data-docs-content] *), .border-y:where([data-designtools]):not([data-docs-content] *) {
     border-block-style: var(--tw-border-style);
     border-block-width: 1px;
   }
-  :where([data-designtools]) .border-t, .border-t:where([data-designtools]) {
+  :where([data-designtools]) .border-t:not([data-docs-content] *), .border-t:where([data-designtools]):not([data-docs-content] *) {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
   }
-  :where([data-designtools]) .border-r, .border-r:where([data-designtools]) {
-    border-right-style: var(--tw-border-style);
-    border-right-width: 1px;
-  }
-  :where([data-designtools]) .border-b, .border-b:where([data-designtools]) {
+  :where([data-designtools]) .border-b:not([data-docs-content] *), .border-b:where([data-designtools]):not([data-docs-content] *) {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
   }
-  :where([data-designtools]) .border-l, .border-l:where([data-designtools]) {
+  :where([data-designtools]) .border-l:not([data-docs-content] *), .border-l:where([data-designtools]):not([data-docs-content] *) {
     border-left-style: var(--tw-border-style);
     border-left-width: 1px;
   }
-  :where([data-designtools]) .border-dashed, .border-dashed:where([data-designtools]) {
+  :where([data-designtools]) .border-dashed:not([data-docs-content] *), .border-dashed:where([data-designtools]):not([data-docs-content] *) {
     --tw-border-style: dashed;
     border-style: dashed;
   }
-  :where([data-designtools]) .border-solid, .border-solid:where([data-designtools]) {
+  :where([data-designtools]) .border-solid:not([data-docs-content] *), .border-solid:where([data-designtools]):not([data-docs-content] *) {
     --tw-border-style: solid;
     border-style: solid;
   }
-  :where([data-designtools]) .border-\(--border\), .border-\(--border\):where([data-designtools]) {
-    border-color: var(--border);
-  }
-  :where([data-designtools]) .border-border, .border-border:where([data-designtools]) {
+  :where([data-designtools]) .border-border:not([data-docs-content] *), .border-border:where([data-designtools]):not([data-docs-content] *) {
     border-color: var(--border, #e2e4e8);
   }
-  :where([data-designtools]) .border-current\/25, .border-current\/25:where([data-designtools]) {
+  :where([data-designtools]) .border-current\/25:not([data-docs-content] *), .border-current\/25:where([data-designtools]):not([data-docs-content] *) {
     border-color: currentColor;
   }
   @supports (color: color-mix(in lab, red, red)) {
-    :where([data-designtools]) .border-current\/25, .border-current\/25:where([data-designtools]) {
+    :where([data-designtools]) .border-current\/25:not([data-docs-content] *), .border-current\/25:where([data-designtools]):not([data-docs-content] *) {
       border-color: color-mix(in oklab, currentcolor 25%, transparent);
     }
   }
-  :where([data-designtools]) .border-destructive, .border-destructive:where([data-designtools]) {
+  :where([data-designtools]) .border-destructive:not([data-docs-content] *), .border-destructive:where([data-designtools]):not([data-docs-content] *) {
     border-color: var(--destructive, #c7302f);
   }
-  :where([data-designtools]) .border-input, .border-input:where([data-designtools]) {
+  :where([data-designtools]) .border-input:not([data-docs-content] *), .border-input:where([data-designtools]):not([data-docs-content] *) {
     border-color: var(--input, #8a909b);
   }
-  :where([data-designtools]) .border-primary-subdued-foreground\/40, .border-primary-subdued-foreground\/40:where([data-designtools]) {
+  :where([data-designtools]) .border-primary-subdued-foreground\/40:not([data-docs-content] *), .border-primary-subdued-foreground\/40:where([data-designtools]):not([data-docs-content] *) {
     border-color: var(--primary-subdued-foreground, #1d40a8);
   }
   @supports (color: color-mix(in lab, red, red)) {
-    :where([data-designtools]) .border-primary-subdued-foreground\/40, .border-primary-subdued-foreground\/40:where([data-designtools]) {
+    :where([data-designtools]) .border-primary-subdued-foreground\/40:not([data-docs-content] *), .border-primary-subdued-foreground\/40:where([data-designtools]):not([data-docs-content] *) {
       border-color: color-mix(in oklab, var(--primary-subdued-foreground, #1d40a8) 40%, transparent);
     }
   }
-  :where([data-designtools]) .border-primary-subdued-foreground\/60, .border-primary-subdued-foreground\/60:where([data-designtools]) {
+  :where([data-designtools]) .border-primary-subdued-foreground\/60:not([data-docs-content] *), .border-primary-subdued-foreground\/60:where([data-designtools]):not([data-docs-content] *) {
     border-color: var(--primary-subdued-foreground, #1d40a8);
   }
   @supports (color: color-mix(in lab, red, red)) {
-    :where([data-designtools]) .border-primary-subdued-foreground\/60, .border-primary-subdued-foreground\/60:where([data-designtools]) {
+    :where([data-designtools]) .border-primary-subdued-foreground\/60:not([data-docs-content] *), .border-primary-subdued-foreground\/60:where([data-designtools]):not([data-docs-content] *) {
       border-color: color-mix(in oklab, var(--primary-subdued-foreground, #1d40a8) 60%, transparent);
     }
   }
-  :where([data-designtools]) .border-transparent, .border-transparent:where([data-designtools]) {
+  :where([data-designtools]) .border-transparent:not([data-docs-content] *), .border-transparent:where([data-designtools]):not([data-docs-content] *) {
     border-color: #0000;
   }
-  :where([data-designtools]) .bg-\[var\(--docs-accent\,var\(--primary\)\)\], .bg-\[var\(--docs-accent\,var\(--primary\)\)\]:where([data-designtools]) {
+  :where([data-designtools]) .bg-\[var\(--docs-accent\,var\(--primary\)\)\]:not([data-docs-content] *), .bg-\[var\(--docs-accent\,var\(--primary\)\)\]:where([data-designtools]):not([data-docs-content] *) {
     background-color: var(--docs-accent, var(--primary));
   }
-  :where([data-designtools]) .bg-border, .bg-border:where([data-designtools]) {
+  :where([data-designtools]) .bg-border:not([data-docs-content] *), .bg-border:where([data-designtools]):not([data-docs-content] *) {
     background-color: var(--border, #e2e4e8);
   }
-  :where([data-designtools]) .bg-canvas, .bg-canvas:where([data-designtools]) {
+  :where([data-designtools]) .bg-canvas:not([data-docs-content] *), .bg-canvas:where([data-designtools]):not([data-docs-content] *) {
     background-color: var(--canvas, #fff);
   }
-  :where([data-designtools]) .bg-canvas-foreground, .bg-canvas-foreground:where([data-designtools]), :where([data-designtools]) .bg-canvas-foreground\/30, .bg-canvas-foreground\/30:where([data-designtools]) {
+  :where([data-designtools]) .bg-canvas-foreground:not([data-docs-content] *), .bg-canvas-foreground:where([data-designtools]):not([data-docs-content] *), :where([data-designtools]) .bg-canvas-foreground\/30:not([data-docs-content] *), .bg-canvas-foreground\/30:where([data-designtools]):not([data-docs-content] *) {
     background-color: var(--canvas-foreground, #1c1f26);
   }
   @supports (color: color-mix(in lab, red, red)) {
-    :where([data-designtools]) .bg-canvas-foreground\/30, .bg-canvas-foreground\/30:where([data-designtools]) {
+    :where([data-designtools]) .bg-canvas-foreground\/30:not([data-docs-content] *), .bg-canvas-foreground\/30:where([data-designtools]):not([data-docs-content] *) {
       background-color: color-mix(in oklab, var(--canvas-foreground, #1c1f26) 30%, transparent);
     }
   }
-  :where([data-designtools]) .bg-canvas\/85, .bg-canvas\/85:where([data-designtools]) {
+  :where([data-designtools]) .bg-canvas\/85:not([data-docs-content] *), .bg-canvas\/85:where([data-designtools]):not([data-docs-content] *) {
     background-color: var(--canvas, #fff);
   }
   @supports (color: color-mix(in lab, red, red)) {
-    :where([data-designtools]) .bg-canvas\/85, .bg-canvas\/85:where([data-designtools]) {
+    :where([data-designtools]) .bg-canvas\/85:not([data-docs-content] *), .bg-canvas\/85:where([data-designtools]):not([data-docs-content] *) {
       background-color: color-mix(in oklab, var(--canvas, #fff) 85%, transparent);
     }
   }
-  :where([data-designtools]) .bg-current, .bg-current:where([data-designtools]) {
+  :where([data-designtools]) .bg-current:not([data-docs-content] *), .bg-current:where([data-designtools]):not([data-docs-content] *) {
     background-color: currentColor;
   }
-  :where([data-designtools]) .bg-destructive, .bg-destructive:where([data-designtools]) {
+  :where([data-designtools]) .bg-destructive:not([data-docs-content] *), .bg-destructive:where([data-designtools]):not([data-docs-content] *) {
     background-color: var(--destructive, #c7302f);
   }
-  :where([data-designtools]) .bg-destructive-subdued, .bg-destructive-subdued:where([data-designtools]) {
+  :where([data-designtools]) .bg-destructive-subdued:not([data-docs-content] *), .bg-destructive-subdued:where([data-designtools]):not([data-docs-content] *) {
     background-color: var(--destructive-subdued, #fcecec);
   }
-  :where([data-designtools]) .bg-input, .bg-input:where([data-designtools]) {
+  :where([data-designtools]) .bg-input:not([data-docs-content] *), .bg-input:where([data-designtools]):not([data-docs-content] *) {
     background-color: var(--input, #8a909b);
   }
-  :where([data-designtools]) .bg-muted, .bg-muted:where([data-designtools]) {
+  :where([data-designtools]) .bg-muted:not([data-docs-content] *), .bg-muted:where([data-designtools]):not([data-docs-content] *) {
     background-color: var(--muted, #f4f5f7);
   }
-  :where([data-designtools]) .bg-muted-foreground, .bg-muted-foreground:where([data-designtools]) {
+  :where([data-designtools]) .bg-muted-foreground:not([data-docs-content] *), .bg-muted-foreground:where([data-designtools]):not([data-docs-content] *) {
     background-color: var(--muted-foreground, #5a606b);
   }
-  :where([data-designtools]) .bg-muted\/40, .bg-muted\/40:where([data-designtools]) {
+  :where([data-designtools]) .bg-muted\/40:not([data-docs-content] *), .bg-muted\/40:where([data-designtools]):not([data-docs-content] *) {
     background-color: var(--muted, #f4f5f7);
   }
   @supports (color: color-mix(in lab, red, red)) {
-    :where([data-designtools]) .bg-muted\/40, .bg-muted\/40:where([data-designtools]) {
+    :where([data-designtools]) .bg-muted\/40:not([data-docs-content] *), .bg-muted\/40:where([data-designtools]):not([data-docs-content] *) {
       background-color: color-mix(in oklab, var(--muted, #f4f5f7) 40%, transparent);
     }
   }
-  :where([data-designtools]) .bg-muted\/50, .bg-muted\/50:where([data-designtools]) {
+  :where([data-designtools]) .bg-muted\/50:not([data-docs-content] *), .bg-muted\/50:where([data-designtools]):not([data-docs-content] *) {
     background-color: var(--muted, #f4f5f7);
   }
   @supports (color: color-mix(in lab, red, red)) {
-    :where([data-designtools]) .bg-muted\/50, .bg-muted\/50:where([data-designtools]) {
+    :where([data-designtools]) .bg-muted\/50:not([data-docs-content] *), .bg-muted\/50:where([data-designtools]):not([data-docs-content] *) {
       background-color: color-mix(in oklab, var(--muted, #f4f5f7) 50%, transparent);
     }
   }
-  :where([data-designtools]) .bg-muted\/60, .bg-muted\/60:where([data-designtools]) {
+  :where([data-designtools]) .bg-muted\/60:not([data-docs-content] *), .bg-muted\/60:where([data-designtools]):not([data-docs-content] *) {
     background-color: var(--muted, #f4f5f7);
   }
   @supports (color: color-mix(in lab, red, red)) {
-    :where([data-designtools]) .bg-muted\/60, .bg-muted\/60:where([data-designtools]) {
+    :where([data-designtools]) .bg-muted\/60:not([data-docs-content] *), .bg-muted\/60:where([data-designtools]):not([data-docs-content] *) {
       background-color: color-mix(in oklab, var(--muted, #f4f5f7) 60%, transparent);
     }
   }
-  :where([data-designtools]) .bg-overlay, .bg-overlay:where([data-designtools]) {
+  :where([data-designtools]) .bg-overlay:not([data-docs-content] *), .bg-overlay:where([data-designtools]):not([data-docs-content] *) {
     background-color: var(--overlay, #fff);
   }
-  :where([data-designtools]) .bg-primary, .bg-primary:where([data-designtools]) {
+  :where([data-designtools]) .bg-primary:not([data-docs-content] *), .bg-primary:where([data-designtools]):not([data-docs-content] *) {
     background-color: var(--primary, #2b5ce6);
   }
-  :where([data-designtools]) .bg-primary-foreground, .bg-primary-foreground:where([data-designtools]) {
+  :where([data-designtools]) .bg-primary-foreground:not([data-docs-content] *), .bg-primary-foreground:where([data-designtools]):not([data-docs-content] *) {
     background-color: var(--primary-foreground, #fff);
   }
-  :where([data-designtools]) .bg-primary-subdued, .bg-primary-subdued:where([data-designtools]) {
+  :where([data-designtools]) .bg-primary-subdued:not([data-docs-content] *), .bg-primary-subdued:where([data-designtools]):not([data-docs-content] *) {
     background-color: var(--primary-subdued, #eef2fd);
   }
-  :where([data-designtools]) .bg-success, .bg-success:where([data-designtools]) {
+  :where([data-designtools]) .bg-success:not([data-docs-content] *), .bg-success:where([data-designtools]):not([data-docs-content] *) {
     background-color: var(--success, #23823f);
   }
-  :where([data-designtools]) .bg-success-subdued, .bg-success-subdued:where([data-designtools]) {
+  :where([data-designtools]) .bg-success-subdued:not([data-docs-content] *), .bg-success-subdued:where([data-designtools]):not([data-docs-content] *) {
     background-color: var(--success-subdued, #e9f6ed);
   }
-  :where([data-designtools]) .bg-surface, .bg-surface:where([data-designtools]) {
+  :where([data-designtools]) .bg-surface:not([data-docs-content] *), .bg-surface:where([data-designtools]):not([data-docs-content] *) {
     background-color: var(--surface, #fff);
   }
-  :where([data-designtools]) .bg-transparent, .bg-transparent:where([data-designtools]) {
+  :where([data-designtools]) .bg-transparent:not([data-docs-content] *), .bg-transparent:where([data-designtools]):not([data-docs-content] *) {
     background-color: #0000;
   }
-  :where([data-designtools]) .bg-warning, .bg-warning:where([data-designtools]) {
+  :where([data-designtools]) .bg-warning:not([data-docs-content] *), .bg-warning:where([data-designtools]):not([data-docs-content] *) {
     background-color: var(--warning, #ed8a3c);
   }
-  :where([data-designtools]) .bg-warning-subdued, .bg-warning-subdued:where([data-designtools]) {
+  :where([data-designtools]) .bg-warning-subdued:not([data-docs-content] *), .bg-warning-subdued:where([data-designtools]):not([data-docs-content] *) {
     background-color: var(--warning-subdued, #fdf0e3);
   }
-  :where([data-designtools]) .bg-linear-to-t, .bg-linear-to-t:where([data-designtools]) {
+  :where([data-designtools]) .bg-linear-to-t:not([data-docs-content] *), .bg-linear-to-t:where([data-designtools]):not([data-docs-content] *) {
     --tw-gradient-position: to top;
   }
   @supports (background-image: linear-gradient(in lab, red, red)) {
-    :where([data-designtools]) .bg-linear-to-t, .bg-linear-to-t:where([data-designtools]) {
+    :where([data-designtools]) .bg-linear-to-t:not([data-docs-content] *), .bg-linear-to-t:where([data-designtools]):not([data-docs-content] *) {
       --tw-gradient-position: to top in oklab;
     }
   }
-  :where([data-designtools]) .bg-linear-to-t, .bg-linear-to-t:where([data-designtools]) {
+  :where([data-designtools]) .bg-linear-to-t:not([data-docs-content] *), .bg-linear-to-t:where([data-designtools]):not([data-docs-content] *) {
     background-image: linear-gradient(var(--tw-gradient-stops));
   }
-  :where([data-designtools]) .bg-\[radial-gradient\(color-mix\(in_oklch\,var\(--border\)_85\%\,transparent\)_1px\,transparent_1px\)\], .bg-\[radial-gradient\(color-mix\(in_oklch\,var\(--border\)_85\%\,transparent\)_1px\,transparent_1px\)\]:where([data-designtools]) {
+  :where([data-designtools]) .bg-\[radial-gradient\(color-mix\(in_oklch\,var\(--border\)_85\%\,transparent\)_1px\,transparent_1px\)\]:not([data-docs-content] *), .bg-\[radial-gradient\(color-mix\(in_oklch\,var\(--border\)_85\%\,transparent\)_1px\,transparent_1px\)\]:where([data-designtools]):not([data-docs-content] *) {
     background-image: radial-gradient(var(--border) 1px,transparent 1px);
   }
   @supports (color: color-mix(in lab, red, red)) {
-    :where([data-designtools]) .bg-\[radial-gradient\(color-mix\(in_oklch\,var\(--border\)_85\%\,transparent\)_1px\,transparent_1px\)\], .bg-\[radial-gradient\(color-mix\(in_oklch\,var\(--border\)_85\%\,transparent\)_1px\,transparent_1px\)\]:where([data-designtools]) {
+    :where([data-designtools]) .bg-\[radial-gradient\(color-mix\(in_oklch\,var\(--border\)_85\%\,transparent\)_1px\,transparent_1px\)\]:not([data-docs-content] *), .bg-\[radial-gradient\(color-mix\(in_oklch\,var\(--border\)_85\%\,transparent\)_1px\,transparent_1px\)\]:where([data-designtools]):not([data-docs-content] *) {
       background-image: radial-gradient(color-mix(in oklch,var(--border) 85%,transparent) 1px,transparent 1px);
     }
   }
-  :where([data-designtools]) .from-surface, .from-surface:where([data-designtools]) {
+  :where([data-designtools]) .from-surface:not([data-docs-content] *), .from-surface:where([data-designtools]):not([data-docs-content] *) {
     --tw-gradient-from: var(--surface, #fff);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
-  :where([data-designtools]) .via-surface\/80, .via-surface\/80:where([data-designtools]) {
+  :where([data-designtools]) .via-surface\/80:not([data-docs-content] *), .via-surface\/80:where([data-designtools]):not([data-docs-content] *) {
     --tw-gradient-via: var(--surface, #fff);
   }
   @supports (color: color-mix(in lab, red, red)) {
-    :where([data-designtools]) .via-surface\/80, .via-surface\/80:where([data-designtools]) {
+    :where([data-designtools]) .via-surface\/80:not([data-docs-content] *), .via-surface\/80:where([data-designtools]):not([data-docs-content] *) {
       --tw-gradient-via: color-mix(in oklab, var(--surface, #fff) 80%, transparent);
     }
   }
-  :where([data-designtools]) .via-surface\/80, .via-surface\/80:where([data-designtools]) {
+  :where([data-designtools]) .via-surface\/80:not([data-docs-content] *), .via-surface\/80:where([data-designtools]):not([data-docs-content] *) {
     --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
     --tw-gradient-stops: var(--tw-gradient-via-stops);
   }
-  :where([data-designtools]) .to-transparent, .to-transparent:where([data-designtools]) {
+  :where([data-designtools]) .to-transparent:not([data-docs-content] *), .to-transparent:where([data-designtools]):not([data-docs-content] *) {
     --tw-gradient-to: transparent;
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
-  :where([data-designtools]) .\[background-size\:14px_14px\], .\[background-size\:14px_14px\]:where([data-designtools]) {
+  :where([data-designtools]) .\[background-size\:14px_14px\]:not([data-docs-content] *), .\[background-size\:14px_14px\]:where([data-designtools]):not([data-docs-content] *) {
     background-size: 14px 14px;
   }
-  :where([data-designtools]) .object-contain, .object-contain:where([data-designtools]) {
+  :where([data-designtools]) .object-contain:not([data-docs-content] *), .object-contain:where([data-designtools]):not([data-docs-content] *) {
     object-fit: contain;
   }
-  :where([data-designtools]) .p-0, .p-0:where([data-designtools]) {
+  :where([data-designtools]) .p-0:not([data-docs-content] *), .p-0:where([data-designtools]):not([data-docs-content] *) {
     padding: 0;
   }
-  :where([data-designtools]) .p-0\.5, .p-0\.5:where([data-designtools]) {
+  :where([data-designtools]) .p-0\.5:not([data-docs-content] *), .p-0\.5:where([data-designtools]):not([data-docs-content] *) {
     padding: .125rem;
   }
-  :where([data-designtools]) .p-1, .p-1:where([data-designtools]) {
+  :where([data-designtools]) .p-1:not([data-docs-content] *), .p-1:where([data-designtools]):not([data-docs-content] *) {
     padding: .25rem;
   }
-  :where([data-designtools]) .p-1\.5, .p-1\.5:where([data-designtools]) {
+  :where([data-designtools]) .p-1\.5:not([data-docs-content] *), .p-1\.5:where([data-designtools]):not([data-docs-content] *) {
     padding: .375rem;
   }
-  :where([data-designtools]) .p-2, .p-2:where([data-designtools]) {
+  :where([data-designtools]) .p-2:not([data-docs-content] *), .p-2:where([data-designtools]):not([data-docs-content] *) {
     padding: .5rem;
   }
-  :where([data-designtools]) .p-3, .p-3:where([data-designtools]) {
+  :where([data-designtools]) .p-3:not([data-docs-content] *), .p-3:where([data-designtools]):not([data-docs-content] *) {
     padding: .75rem;
   }
-  :where([data-designtools]) .p-4, .p-4:where([data-designtools]) {
+  :where([data-designtools]) .p-4:not([data-docs-content] *), .p-4:where([data-designtools]):not([data-docs-content] *) {
     padding: 1rem;
   }
-  :where([data-designtools]) .p-5, .p-5:where([data-designtools]) {
+  :where([data-designtools]) .p-5:not([data-docs-content] *), .p-5:where([data-designtools]):not([data-docs-content] *) {
     padding: 1.25rem;
   }
-  :where([data-designtools]) .p-6, .p-6:where([data-designtools]) {
+  :where([data-designtools]) .p-6:not([data-docs-content] *), .p-6:where([data-designtools]):not([data-docs-content] *) {
     padding: 1.5rem;
   }
-  :where([data-designtools]) .p-8, .p-8:where([data-designtools]) {
+  :where([data-designtools]) .p-8:not([data-docs-content] *), .p-8:where([data-designtools]):not([data-docs-content] *) {
     padding: 2rem;
   }
-  :where([data-designtools]) .p-10, .p-10:where([data-designtools]) {
+  :where([data-designtools]) .p-10:not([data-docs-content] *), .p-10:where([data-designtools]):not([data-docs-content] *) {
     padding: 2.5rem;
   }
-  :where([data-designtools]) .px-1, .px-1:where([data-designtools]) {
+  :where([data-designtools]) .px-1:not([data-docs-content] *), .px-1:where([data-designtools]):not([data-docs-content] *) {
     padding-inline: .25rem;
   }
-  :where([data-designtools]) .px-1\.5, .px-1\.5:where([data-designtools]) {
+  :where([data-designtools]) .px-1\.5:not([data-docs-content] *), .px-1\.5:where([data-designtools]):not([data-docs-content] *) {
     padding-inline: .375rem;
   }
-  :where([data-designtools]) .px-2, .px-2:where([data-designtools]) {
+  :where([data-designtools]) .px-2:not([data-docs-content] *), .px-2:where([data-designtools]):not([data-docs-content] *) {
     padding-inline: .5rem;
   }
-  :where([data-designtools]) .px-2\.5, .px-2\.5:where([data-designtools]) {
+  :where([data-designtools]) .px-2\.5:not([data-docs-content] *), .px-2\.5:where([data-designtools]):not([data-docs-content] *) {
     padding-inline: .625rem;
   }
-  :where([data-designtools]) .px-3, .px-3:where([data-designtools]) {
+  :where([data-designtools]) .px-3:not([data-docs-content] *), .px-3:where([data-designtools]):not([data-docs-content] *) {
     padding-inline: .75rem;
   }
-  :where([data-designtools]) .px-4, .px-4:where([data-designtools]) {
+  :where([data-designtools]) .px-4:not([data-docs-content] *), .px-4:where([data-designtools]):not([data-docs-content] *) {
     padding-inline: 1rem;
   }
-  :where([data-designtools]) .px-5, .px-5:where([data-designtools]) {
+  :where([data-designtools]) .px-5:not([data-docs-content] *), .px-5:where([data-designtools]):not([data-docs-content] *) {
     padding-inline: 1.25rem;
   }
-  :where([data-designtools]) .px-6, .px-6:where([data-designtools]) {
+  :where([data-designtools]) .px-6:not([data-docs-content] *), .px-6:where([data-designtools]):not([data-docs-content] *) {
     padding-inline: 1.5rem;
   }
-  :where([data-designtools]) .py-0\.5, .py-0\.5:where([data-designtools]) {
+  :where([data-designtools]) .py-0\.5:not([data-docs-content] *), .py-0\.5:where([data-designtools]):not([data-docs-content] *) {
     padding-block: .125rem;
   }
-  :where([data-designtools]) .py-1, .py-1:where([data-designtools]) {
+  :where([data-designtools]) .py-1:not([data-docs-content] *), .py-1:where([data-designtools]):not([data-docs-content] *) {
     padding-block: .25rem;
   }
-  :where([data-designtools]) .py-1\.5, .py-1\.5:where([data-designtools]) {
+  :where([data-designtools]) .py-1\.5:not([data-docs-content] *), .py-1\.5:where([data-designtools]):not([data-docs-content] *) {
     padding-block: .375rem;
   }
-  :where([data-designtools]) .py-2, .py-2:where([data-designtools]) {
+  :where([data-designtools]) .py-2:not([data-docs-content] *), .py-2:where([data-designtools]):not([data-docs-content] *) {
     padding-block: .5rem;
   }
-  :where([data-designtools]) .py-2\.5, .py-2\.5:where([data-designtools]) {
+  :where([data-designtools]) .py-2\.5:not([data-docs-content] *), .py-2\.5:where([data-designtools]):not([data-docs-content] *) {
     padding-block: .625rem;
   }
-  :where([data-designtools]) .py-3, .py-3:where([data-designtools]) {
+  :where([data-designtools]) .py-3:not([data-docs-content] *), .py-3:where([data-designtools]):not([data-docs-content] *) {
     padding-block: .75rem;
   }
-  :where([data-designtools]) .py-3\.5, .py-3\.5:where([data-designtools]) {
+  :where([data-designtools]) .py-3\.5:not([data-docs-content] *), .py-3\.5:where([data-designtools]):not([data-docs-content] *) {
     padding-block: .875rem;
   }
-  :where([data-designtools]) .py-4, .py-4:where([data-designtools]) {
+  :where([data-designtools]) .py-4:not([data-docs-content] *), .py-4:where([data-designtools]):not([data-docs-content] *) {
     padding-block: 1rem;
   }
-  :where([data-designtools]) .py-5, .py-5:where([data-designtools]) {
+  :where([data-designtools]) .py-5:not([data-docs-content] *), .py-5:where([data-designtools]):not([data-docs-content] *) {
     padding-block: 1.25rem;
   }
-  :where([data-designtools]) .py-6, .py-6:where([data-designtools]) {
+  :where([data-designtools]) .py-6:not([data-docs-content] *), .py-6:where([data-designtools]):not([data-docs-content] *) {
     padding-block: 1.5rem;
   }
-  :where([data-designtools]) .py-8, .py-8:where([data-designtools]) {
+  :where([data-designtools]) .py-7:not([data-docs-content] *), .py-7:where([data-designtools]):not([data-docs-content] *) {
+    padding-block: 1.75rem;
+  }
+  :where([data-designtools]) .py-8:not([data-docs-content] *), .py-8:where([data-designtools]):not([data-docs-content] *) {
     padding-block: 2rem;
   }
-  :where([data-designtools]) .pt-0\.5, .pt-0\.5:where([data-designtools]) {
+  :where([data-designtools]) .pt-0\.5:not([data-docs-content] *), .pt-0\.5:where([data-designtools]):not([data-docs-content] *) {
     padding-top: .125rem;
   }
-  :where([data-designtools]) .pt-1, .pt-1:where([data-designtools]) {
+  :where([data-designtools]) .pt-1:not([data-docs-content] *), .pt-1:where([data-designtools]):not([data-docs-content] *) {
     padding-top: .25rem;
   }
-  :where([data-designtools]) .pt-1\.5, .pt-1\.5:where([data-designtools]) {
+  :where([data-designtools]) .pt-1\.5:not([data-docs-content] *), .pt-1\.5:where([data-designtools]):not([data-docs-content] *) {
     padding-top: .375rem;
   }
-  :where([data-designtools]) .pt-2, .pt-2:where([data-designtools]) {
+  :where([data-designtools]) .pt-2:not([data-docs-content] *), .pt-2:where([data-designtools]):not([data-docs-content] *) {
     padding-top: .5rem;
   }
-  :where([data-designtools]) .pt-4, .pt-4:where([data-designtools]) {
+  :where([data-designtools]) .pt-3:not([data-docs-content] *), .pt-3:where([data-designtools]):not([data-docs-content] *) {
+    padding-top: .75rem;
+  }
+  :where([data-designtools]) .pt-4:not([data-docs-content] *), .pt-4:where([data-designtools]):not([data-docs-content] *) {
     padding-top: 1rem;
   }
-  :where([data-designtools]) .pt-5, .pt-5:where([data-designtools]) {
+  :where([data-designtools]) .pt-5:not([data-docs-content] *), .pt-5:where([data-designtools]):not([data-docs-content] *) {
     padding-top: 1.25rem;
   }
-  :where([data-designtools]) .pt-6, .pt-6:where([data-designtools]) {
+  :where([data-designtools]) .pt-6:not([data-docs-content] *), .pt-6:where([data-designtools]):not([data-docs-content] *) {
     padding-top: 1.5rem;
   }
-  :where([data-designtools]) .pt-8, .pt-8:where([data-designtools]) {
-    padding-top: 2rem;
-  }
-  :where([data-designtools]) .pt-10, .pt-10:where([data-designtools]) {
+  :where([data-designtools]) .pt-10:not([data-docs-content] *), .pt-10:where([data-designtools]):not([data-docs-content] *) {
     padding-top: 2.5rem;
   }
-  :where([data-designtools]) .pt-12, .pt-12:where([data-designtools]) {
+  :where([data-designtools]) .pt-12:not([data-docs-content] *), .pt-12:where([data-designtools]):not([data-docs-content] *) {
     padding-top: 3rem;
   }
-  :where([data-designtools]) .pt-\[12dvh\], .pt-\[12dvh\]:where([data-designtools]) {
+  :where([data-designtools]) .pt-\[12dvh\]:not([data-docs-content] *), .pt-\[12dvh\]:where([data-designtools]):not([data-docs-content] *) {
     padding-top: 12dvh;
   }
-  :where([data-designtools]) .pr-1\.5, .pr-1\.5:where([data-designtools]) {
+  :where([data-designtools]) .pr-1\.5:not([data-docs-content] *), .pr-1\.5:where([data-designtools]):not([data-docs-content] *) {
     padding-right: .375rem;
   }
-  :where([data-designtools]) .pr-2\.5, .pr-2\.5:where([data-designtools]) {
+  :where([data-designtools]) .pr-2:not([data-docs-content] *), .pr-2:where([data-designtools]):not([data-docs-content] *) {
+    padding-right: .5rem;
+  }
+  :where([data-designtools]) .pr-2\.5:not([data-docs-content] *), .pr-2\.5:where([data-designtools]):not([data-docs-content] *) {
     padding-right: .625rem;
   }
-  :where([data-designtools]) .pr-3, .pr-3:where([data-designtools]) {
+  :where([data-designtools]) .pr-3:not([data-docs-content] *), .pr-3:where([data-designtools]):not([data-docs-content] *) {
     padding-right: .75rem;
   }
-  :where([data-designtools]) .pr-4, .pr-4:where([data-designtools]) {
+  :where([data-designtools]) .pr-4:not([data-docs-content] *), .pr-4:where([data-designtools]):not([data-docs-content] *) {
     padding-right: 1rem;
   }
-  :where([data-designtools]) .pr-12, .pr-12:where([data-designtools]) {
+  :where([data-designtools]) .pr-6:not([data-docs-content] *), .pr-6:where([data-designtools]):not([data-docs-content] *) {
+    padding-right: 1.5rem;
+  }
+  :where([data-designtools]) .pr-12:not([data-docs-content] *), .pr-12:where([data-designtools]):not([data-docs-content] *) {
     padding-right: 3rem;
   }
-  :where([data-designtools]) .pb-1, .pb-1:where([data-designtools]) {
+  :where([data-designtools]) .pb-1:not([data-docs-content] *), .pb-1:where([data-designtools]):not([data-docs-content] *) {
     padding-bottom: .25rem;
   }
-  :where([data-designtools]) .pb-2, .pb-2:where([data-designtools]) {
+  :where([data-designtools]) .pb-1\.5:not([data-docs-content] *), .pb-1\.5:where([data-designtools]):not([data-docs-content] *) {
+    padding-bottom: .375rem;
+  }
+  :where([data-designtools]) .pb-2:not([data-docs-content] *), .pb-2:where([data-designtools]):not([data-docs-content] *) {
     padding-bottom: .5rem;
   }
-  :where([data-designtools]) .pb-3, .pb-3:where([data-designtools]) {
+  :where([data-designtools]) .pb-3:not([data-docs-content] *), .pb-3:where([data-designtools]):not([data-docs-content] *) {
     padding-bottom: .75rem;
   }
-  :where([data-designtools]) .pb-4, .pb-4:where([data-designtools]) {
+  :where([data-designtools]) .pb-4:not([data-docs-content] *), .pb-4:where([data-designtools]):not([data-docs-content] *) {
     padding-bottom: 1rem;
   }
-  :where([data-designtools]) .pb-12, .pb-12:where([data-designtools]) {
-    padding-bottom: 3rem;
+  :where([data-designtools]) .pb-5:not([data-docs-content] *), .pb-5:where([data-designtools]):not([data-docs-content] *) {
+    padding-bottom: 1.25rem;
   }
-  :where([data-designtools]) .pb-20, .pb-20:where([data-designtools]) {
+  :where([data-designtools]) .pb-20:not([data-docs-content] *), .pb-20:where([data-designtools]):not([data-docs-content] *) {
     padding-bottom: 5rem;
   }
-  :where([data-designtools]) .pl-2, .pl-2:where([data-designtools]) {
+  :where([data-designtools]) .pl-2:not([data-docs-content] *), .pl-2:where([data-designtools]):not([data-docs-content] *) {
     padding-left: .5rem;
   }
-  :where([data-designtools]) .pl-3, .pl-3:where([data-designtools]) {
+  :where([data-designtools]) .pl-3:not([data-docs-content] *), .pl-3:where([data-designtools]):not([data-docs-content] *) {
     padding-left: .75rem;
   }
-  :where([data-designtools]) .pl-4, .pl-4:where([data-designtools]) {
+  :where([data-designtools]) .pl-4:not([data-docs-content] *), .pl-4:where([data-designtools]):not([data-docs-content] *) {
     padding-left: 1rem;
   }
-  :where([data-designtools]) .pl-5, .pl-5:where([data-designtools]) {
+  :where([data-designtools]) .pl-5:not([data-docs-content] *), .pl-5:where([data-designtools]):not([data-docs-content] *) {
     padding-left: 1.25rem;
   }
-  :where([data-designtools]) .pl-12, .pl-12:where([data-designtools]) {
-    padding-left: 3rem;
+  :where([data-designtools]) .pl-10:not([data-docs-content] *), .pl-10:where([data-designtools]):not([data-docs-content] *) {
+    padding-left: 2.5rem;
   }
-  :where([data-designtools]) .text-center, .text-center:where([data-designtools]) {
+  :where([data-designtools]) .text-center:not([data-docs-content] *), .text-center:where([data-designtools]):not([data-docs-content] *) {
     text-align: center;
   }
-  :where([data-designtools]) .text-left, .text-left:where([data-designtools]) {
+  :where([data-designtools]) .text-left:not([data-docs-content] *), .text-left:where([data-designtools]):not([data-docs-content] *) {
     text-align: left;
   }
-  :where([data-designtools]) .align-middle, .align-middle:where([data-designtools]) {
+  :where([data-designtools]) .align-middle:not([data-docs-content] *), .align-middle:where([data-designtools]):not([data-docs-content] *) {
     vertical-align: middle;
   }
-  :where([data-designtools]) .\[font-family\:var\(--docs-display\,var\(--font-display\,var\(--font-sans\)\)\)\], .\[font-family\:var\(--docs-display\,var\(--font-display\,var\(--font-sans\)\)\)\]:where([data-designtools]) {
+  :where([data-designtools]) .align-top:not([data-docs-content] *), .align-top:where([data-designtools]):not([data-docs-content] *) {
+    vertical-align: top;
+  }
+  :where([data-designtools]) .\[font-family\:var\(--docs-display\,var\(--font-display\,var\(--font-sans\)\)\)\]:not([data-docs-content] *), .\[font-family\:var\(--docs-display\,var\(--font-display\,var\(--font-sans\)\)\)\]:where([data-designtools]):not([data-docs-content] *) {
     font-family: var(--docs-display, var(--font-display, var(--font-sans)));
   }
-  :where([data-designtools]) .font-mono, .font-mono:where([data-designtools]) {
+  :where([data-designtools]) .font-mono:not([data-docs-content] *), .font-mono:where([data-designtools]):not([data-docs-content] *) {
     font-family: var(--docs-font-mono, var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace));
   }
-  :where([data-designtools]) .font-sans, .font-sans:where([data-designtools]) {
+  :where([data-designtools]) .font-sans:not([data-docs-content] *), .font-sans:where([data-designtools]):not([data-docs-content] *) {
     font-family: var(--docs-font-sans, var(--font-sans, ui-sans-serif, system-ui, sans-serif));
   }
-  :where([data-designtools]) .text-2xl, .text-2xl:where([data-designtools]) {
+  :where([data-designtools]) .text-2xl:not([data-docs-content] *), .text-2xl:where([data-designtools]):not([data-docs-content] *) {
     font-size: var(--text-2xl, 1.5rem);
     line-height: var(--tw-leading, var(--text-2xl--line-height, 2rem));
   }
-  :where([data-designtools]) .text-3xl, .text-3xl:where([data-designtools]) {
+  :where([data-designtools]) .text-3xl:not([data-docs-content] *), .text-3xl:where([data-designtools]):not([data-docs-content] *) {
     font-size: var(--text-3xl, 1.875rem);
     line-height: var(--tw-leading, var(--text-3xl--line-height, 2.25rem));
   }
-  :where([data-designtools]) .text-4xl, .text-4xl:where([data-designtools]) {
+  :where([data-designtools]) .text-4xl:not([data-docs-content] *), .text-4xl:where([data-designtools]):not([data-docs-content] *) {
     font-size: var(--text-4xl, 2.25rem);
     line-height: var(--tw-leading, var(--text-4xl--line-height, 2.5rem));
   }
-  :where([data-designtools]) .text-5xl, .text-5xl:where([data-designtools]) {
+  :where([data-designtools]) .text-5xl:not([data-docs-content] *), .text-5xl:where([data-designtools]):not([data-docs-content] *) {
     font-size: var(--text-5xl, 3rem);
     line-height: var(--tw-leading, var(--text-5xl--line-height, 1));
   }
-  :where([data-designtools]) .text-7xl, .text-7xl:where([data-designtools]) {
+  :where([data-designtools]) .text-7xl:not([data-docs-content] *), .text-7xl:where([data-designtools]):not([data-docs-content] *) {
     font-size: var(--text-7xl, 4.5rem);
     line-height: var(--tw-leading, var(--text-7xl--line-height, 1));
   }
-  :where([data-designtools]) .text-8xl, .text-8xl:where([data-designtools]) {
+  :where([data-designtools]) .text-8xl:not([data-docs-content] *), .text-8xl:where([data-designtools]):not([data-docs-content] *) {
     font-size: var(--text-8xl, 6rem);
     line-height: var(--tw-leading, var(--text-8xl--line-height, 1));
   }
-  :where([data-designtools]) .text-base, .text-base:where([data-designtools]) {
+  :where([data-designtools]) .text-base:not([data-docs-content] *), .text-base:where([data-designtools]):not([data-docs-content] *) {
     font-size: var(--text-base, 1rem);
     line-height: var(--tw-leading, var(--text-base--line-height, 1.5rem));
   }
-  :where([data-designtools]) .text-lg, .text-lg:where([data-designtools]) {
+  :where([data-designtools]) .text-lg:not([data-docs-content] *), .text-lg:where([data-designtools]):not([data-docs-content] *) {
     font-size: var(--text-lg, 1.125rem);
     line-height: var(--tw-leading, var(--text-lg--line-height, 1.75rem));
   }
-  :where([data-designtools]) .text-sm, .text-sm:where([data-designtools]) {
+  :where([data-designtools]) .text-sm:not([data-docs-content] *), .text-sm:where([data-designtools]):not([data-docs-content] *) {
     font-size: var(--text-sm, .875rem);
     line-height: var(--tw-leading, var(--text-sm--line-height, 1.25rem));
   }
-  :where([data-designtools]) .text-xl, .text-xl:where([data-designtools]) {
+  :where([data-designtools]) .text-xl:not([data-docs-content] *), .text-xl:where([data-designtools]):not([data-docs-content] *) {
     font-size: var(--text-xl, 1.25rem);
     line-height: var(--tw-leading, var(--text-xl--line-height, 1.75rem));
   }
-  :where([data-designtools]) .text-xs, .text-xs:where([data-designtools]) {
+  :where([data-designtools]) .text-xs:not([data-docs-content] *), .text-xs:where([data-designtools]):not([data-docs-content] *) {
     font-size: var(--text-xs, .75rem);
     line-height: var(--tw-leading, var(--text-xs--line-height, 1rem));
   }
-  :where([data-designtools]) .text-\[0\.9em\], .text-\[0\.9em\]:where([data-designtools]) {
+  :where([data-designtools]) .text-\[0\.9em\]:not([data-docs-content] *), .text-\[0\.9em\]:where([data-designtools]):not([data-docs-content] *) {
     font-size: .9em;
   }
-  :where([data-designtools]) .text-\[0\.625rem\], .text-\[0\.625rem\]:where([data-designtools]) {
+  :where([data-designtools]) .text-\[0\.625rem\]:not([data-docs-content] *), .text-\[0\.625rem\]:where([data-designtools]):not([data-docs-content] *) {
     font-size: .625rem;
   }
-  :where([data-designtools]) .text-\[0\.6875rem\], .text-\[0\.6875rem\]:where([data-designtools]) {
+  :where([data-designtools]) .text-\[0\.6875rem\]:not([data-docs-content] *), .text-\[0\.6875rem\]:where([data-designtools]):not([data-docs-content] *) {
     font-size: .6875rem;
   }
-  :where([data-designtools]) .leading-4, .leading-4:where([data-designtools]) {
+  :where([data-designtools]) .leading-4:not([data-docs-content] *), .leading-4:where([data-designtools]):not([data-docs-content] *) {
     --tw-leading: calc(.25rem * 4);
     line-height: 1rem;
   }
-  :where([data-designtools]) .leading-5, .leading-5:where([data-designtools]) {
+  :where([data-designtools]) .leading-5:not([data-docs-content] *), .leading-5:where([data-designtools]):not([data-docs-content] *) {
     --tw-leading: calc(.25rem * 5);
     line-height: 1.25rem;
   }
-  :where([data-designtools]) .leading-\[1\.1\], .leading-\[1\.1\]:where([data-designtools]) {
+  :where([data-designtools]) .leading-\[1\.1\]:not([data-docs-content] *), .leading-\[1\.1\]:where([data-designtools]):not([data-docs-content] *) {
     --tw-leading: 1.1;
     line-height: 1.1;
   }
-  :where([data-designtools]) .leading-\[1\.05\], .leading-\[1\.05\]:where([data-designtools]) {
+  :where([data-designtools]) .leading-\[1\.05\]:not([data-docs-content] *), .leading-\[1\.05\]:where([data-designtools]):not([data-docs-content] *) {
     --tw-leading: 1.05;
     line-height: 1.05;
   }
-  :where([data-designtools]) .leading-none, .leading-none:where([data-designtools]) {
+  :where([data-designtools]) .leading-none:not([data-docs-content] *), .leading-none:where([data-designtools]):not([data-docs-content] *) {
     --tw-leading: var(--leading-none, 1);
     line-height: var(--leading-none, 1);
   }
-  :where([data-designtools]) .leading-relaxed, .leading-relaxed:where([data-designtools]) {
+  :where([data-designtools]) .leading-relaxed:not([data-docs-content] *), .leading-relaxed:where([data-designtools]):not([data-docs-content] *) {
     --tw-leading: var(--leading-relaxed, 1.625);
     line-height: var(--leading-relaxed, 1.625);
   }
-  :where([data-designtools]) .leading-snug, .leading-snug:where([data-designtools]) {
+  :where([data-designtools]) .leading-snug:not([data-docs-content] *), .leading-snug:where([data-designtools]):not([data-docs-content] *) {
     --tw-leading: var(--leading-snug, 1.375);
     line-height: var(--leading-snug, 1.375);
   }
-  :where([data-designtools]) .font-bold, .font-bold:where([data-designtools]) {
+  :where([data-designtools]) .leading-tight:not([data-docs-content] *), .leading-tight:where([data-designtools]):not([data-docs-content] *) {
+    --tw-leading: var(--leading-tight, 1.25);
+    line-height: var(--leading-tight, 1.25);
+  }
+  :where([data-designtools]) .font-bold:not([data-docs-content] *), .font-bold:where([data-designtools]):not([data-docs-content] *) {
     --tw-font-weight: var(--font-weight-bold, 700);
     font-weight: var(--font-weight-bold, 700);
   }
-  :where([data-designtools]) .font-light, .font-light:where([data-designtools]) {
+  :where([data-designtools]) .font-light:not([data-docs-content] *), .font-light:where([data-designtools]):not([data-docs-content] *) {
     --tw-font-weight: var(--font-weight-light, 300);
     font-weight: var(--font-weight-light, 300);
   }
-  :where([data-designtools]) .font-medium, .font-medium:where([data-designtools]) {
+  :where([data-designtools]) .font-medium:not([data-docs-content] *), .font-medium:where([data-designtools]):not([data-docs-content] *) {
     --tw-font-weight: var(--font-weight-medium, 500);
     font-weight: var(--font-weight-medium, 500);
   }
-  :where([data-designtools]) .font-normal, .font-normal:where([data-designtools]) {
+  :where([data-designtools]) .font-normal:not([data-docs-content] *), .font-normal:where([data-designtools]):not([data-docs-content] *) {
     --tw-font-weight: var(--font-weight-normal, 400);
     font-weight: var(--font-weight-normal, 400);
   }
-  :where([data-designtools]) .font-semibold, .font-semibold:where([data-designtools]) {
+  :where([data-designtools]) .font-semibold:not([data-docs-content] *), .font-semibold:where([data-designtools]):not([data-docs-content] *) {
     --tw-font-weight: var(--font-weight-semibold, 600);
     font-weight: var(--font-weight-semibold, 600);
   }
-  :where([data-designtools]) .tracking-\[var\(--tracking-widest\,0\.16em\)\], .tracking-\[var\(--tracking-widest\,0\.16em\)\]:where([data-designtools]) {
+  :where([data-designtools]) .tracking-\[0\.08em\]:not([data-docs-content] *), .tracking-\[0\.08em\]:where([data-designtools]):not([data-docs-content] *) {
+    --tw-tracking: .08em;
+    letter-spacing: .08em;
+  }
+  :where([data-designtools]) .tracking-\[var\(--tracking-widest\,0\.16em\)\]:not([data-docs-content] *), .tracking-\[var\(--tracking-widest\,0\.16em\)\]:where([data-designtools]):not([data-docs-content] *) {
     --tw-tracking: var(--tracking-widest, .16em);
     letter-spacing: var(--tracking-widest, .16em);
   }
-  :where([data-designtools]) .tracking-tight, .tracking-tight:where([data-designtools]) {
+  :where([data-designtools]) .tracking-tight:not([data-docs-content] *), .tracking-tight:where([data-designtools]):not([data-docs-content] *) {
     --tw-tracking: var(--tracking-tight, -.02em);
     letter-spacing: var(--tracking-tight, -.02em);
   }
-  :where([data-designtools]) .tracking-tighter, .tracking-tighter:where([data-designtools]) {
+  :where([data-designtools]) .tracking-tighter:not([data-docs-content] *), .tracking-tighter:where([data-designtools]):not([data-docs-content] *) {
     --tw-tracking: var(--tracking-tighter, -.04em);
     letter-spacing: var(--tracking-tighter, -.04em);
   }
-  :where([data-designtools]) .tracking-wide, .tracking-wide:where([data-designtools]) {
+  :where([data-designtools]) .tracking-wide:not([data-docs-content] *), .tracking-wide:where([data-designtools]):not([data-docs-content] *) {
     --tw-tracking: var(--tracking-wide, .04em);
     letter-spacing: var(--tracking-wide, .04em);
   }
-  :where([data-designtools]) .break-words, .break-words:where([data-designtools]) {
+  :where([data-designtools]) .break-words:not([data-docs-content] *), .break-words:where([data-designtools]):not([data-docs-content] *) {
     overflow-wrap: break-word;
   }
-  :where([data-designtools]) .break-all, .break-all:where([data-designtools]) {
+  :where([data-designtools]) .break-all:not([data-docs-content] *), .break-all:where([data-designtools]):not([data-docs-content] *) {
     word-break: break-all;
   }
-  :where([data-designtools]) .whitespace-nowrap, .whitespace-nowrap:where([data-designtools]) {
+  :where([data-designtools]) .whitespace-nowrap:not([data-docs-content] *), .whitespace-nowrap:where([data-designtools]):not([data-docs-content] *) {
     white-space: nowrap;
   }
-  :where([data-designtools]) .whitespace-pre-line, .whitespace-pre-line:where([data-designtools]) {
+  :where([data-designtools]) .whitespace-pre-line:not([data-docs-content] *), .whitespace-pre-line:where([data-designtools]):not([data-docs-content] *) {
     white-space: pre-line;
   }
-  :where([data-designtools]) .whitespace-pre-wrap, .whitespace-pre-wrap:where([data-designtools]) {
+  :where([data-designtools]) .whitespace-pre-wrap:not([data-docs-content] *), .whitespace-pre-wrap:where([data-designtools]):not([data-docs-content] *) {
     white-space: pre-wrap;
   }
-  :where([data-designtools]) .text-canvas, .text-canvas:where([data-designtools]) {
+  :where([data-designtools]) .text-canvas:not([data-docs-content] *), .text-canvas:where([data-designtools]):not([data-docs-content] *) {
     color: var(--canvas, #fff);
   }
-  :where([data-designtools]) .text-canvas-foreground, .text-canvas-foreground:where([data-designtools]), :where([data-designtools]) .text-canvas-foreground\/75, .text-canvas-foreground\/75:where([data-designtools]) {
+  :where([data-designtools]) .text-canvas\!:not([data-docs-content] *), .text-canvas\!:where([data-designtools]):not([data-docs-content] *) {
+    color: var(--canvas, #fff) !important;
+  }
+  :where([data-designtools]) .text-canvas-foreground:not([data-docs-content] *), .text-canvas-foreground:where([data-designtools]):not([data-docs-content] *), :where([data-designtools]) .text-canvas-foreground\/75:not([data-docs-content] *), .text-canvas-foreground\/75:where([data-designtools]):not([data-docs-content] *) {
     color: var(--canvas-foreground, #1c1f26);
   }
   @supports (color: color-mix(in lab, red, red)) {
-    :where([data-designtools]) .text-canvas-foreground\/75, .text-canvas-foreground\/75:where([data-designtools]) {
+    :where([data-designtools]) .text-canvas-foreground\/75:not([data-docs-content] *), .text-canvas-foreground\/75:where([data-designtools]):not([data-docs-content] *) {
       color: color-mix(in oklab, var(--canvas-foreground, #1c1f26) 75%, transparent);
     }
   }
-  :where([data-designtools]) .text-canvas-foreground\/80, .text-canvas-foreground\/80:where([data-designtools]) {
+  :where([data-designtools]) .text-canvas-foreground\/80:not([data-docs-content] *), .text-canvas-foreground\/80:where([data-designtools]):not([data-docs-content] *) {
     color: var(--canvas-foreground, #1c1f26);
   }
   @supports (color: color-mix(in lab, red, red)) {
-    :where([data-designtools]) .text-canvas-foreground\/80, .text-canvas-foreground\/80:where([data-designtools]) {
+    :where([data-designtools]) .text-canvas-foreground\/80:not([data-docs-content] *), .text-canvas-foreground\/80:where([data-designtools]):not([data-docs-content] *) {
       color: color-mix(in oklab, var(--canvas-foreground, #1c1f26) 80%, transparent);
     }
   }
-  :where([data-designtools]) .text-canvas-foreground\/85, .text-canvas-foreground\/85:where([data-designtools]) {
+  :where([data-designtools]) .text-canvas-foreground\/85:not([data-docs-content] *), .text-canvas-foreground\/85:where([data-designtools]):not([data-docs-content] *) {
     color: var(--canvas-foreground, #1c1f26);
   }
   @supports (color: color-mix(in lab, red, red)) {
-    :where([data-designtools]) .text-canvas-foreground\/85, .text-canvas-foreground\/85:where([data-designtools]) {
+    :where([data-designtools]) .text-canvas-foreground\/85:not([data-docs-content] *), .text-canvas-foreground\/85:where([data-designtools]):not([data-docs-content] *) {
       color: color-mix(in oklab, var(--canvas-foreground, #1c1f26) 85%, transparent);
     }
   }
-  :where([data-designtools]) .text-destructive-foreground, .text-destructive-foreground:where([data-designtools]) {
+  :where([data-designtools]) .text-destructive-foreground:not([data-docs-content] *), .text-destructive-foreground:where([data-designtools]):not([data-docs-content] *) {
     color: var(--destructive-foreground, #fff);
   }
-  :where([data-designtools]) .text-destructive-subdued-foreground, .text-destructive-subdued-foreground:where([data-designtools]) {
+  :where([data-designtools]) .text-destructive-subdued-foreground:not([data-docs-content] *), .text-destructive-subdued-foreground:where([data-designtools]):not([data-docs-content] *) {
     color: var(--destructive-subdued-foreground, #9b2221);
   }
-  :where([data-designtools]) .text-muted-foreground, .text-muted-foreground:where([data-designtools]) {
+  :where([data-designtools]) .text-muted-foreground:not([data-docs-content] *), .text-muted-foreground:where([data-designtools]):not([data-docs-content] *) {
     color: var(--muted-foreground, #5a606b);
   }
-  :where([data-designtools]) .text-overlay-foreground, .text-overlay-foreground:where([data-designtools]) {
+  :where([data-designtools]) .text-overlay-foreground:not([data-docs-content] *), .text-overlay-foreground:where([data-designtools]):not([data-docs-content] *) {
     color: var(--overlay-foreground, #1c1f26);
   }
-  :where([data-designtools]) .text-primary-foreground, .text-primary-foreground:where([data-designtools]) {
+  :where([data-designtools]) .text-primary-foreground:not([data-docs-content] *), .text-primary-foreground:where([data-designtools]):not([data-docs-content] *) {
     color: var(--primary-foreground, #fff);
   }
-  :where([data-designtools]) .text-primary-subdued-foreground, .text-primary-subdued-foreground:where([data-designtools]) {
+  :where([data-designtools]) .text-primary-subdued-foreground:not([data-docs-content] *), .text-primary-subdued-foreground:where([data-designtools]):not([data-docs-content] *) {
     color: var(--primary-subdued-foreground, #1d40a8);
   }
-  :where([data-designtools]) .text-success-subdued-foreground, .text-success-subdued-foreground:where([data-designtools]) {
+  :where([data-designtools]) .text-success-subdued-foreground:not([data-docs-content] *), .text-success-subdued-foreground:where([data-designtools]):not([data-docs-content] *) {
     color: var(--success-subdued-foreground, #1b6631);
   }
-  :where([data-designtools]) .text-surface-foreground, .text-surface-foreground:where([data-designtools]) {
+  :where([data-designtools]) .text-surface-foreground:not([data-docs-content] *), .text-surface-foreground:where([data-designtools]):not([data-docs-content] *) {
     color: var(--surface-foreground, #1c1f26);
   }
-  :where([data-designtools]) .text-warning-subdued-foreground, .text-warning-subdued-foreground:where([data-designtools]) {
+  :where([data-designtools]) .text-warning-subdued-foreground:not([data-docs-content] *), .text-warning-subdued-foreground:where([data-designtools]):not([data-docs-content] *) {
     color: var(--warning-subdued-foreground, #6b3a10);
   }
-  :where([data-designtools]) .capitalize, .capitalize:where([data-designtools]) {
+  :where([data-designtools]) .capitalize:not([data-docs-content] *), .capitalize:where([data-designtools]):not([data-docs-content] *) {
     text-transform: capitalize;
   }
-  :where([data-designtools]) .uppercase, .uppercase:where([data-designtools]) {
+  :where([data-designtools]) .uppercase:not([data-docs-content] *), .uppercase:where([data-designtools]):not([data-docs-content] *) {
     text-transform: uppercase;
   }
-  :where([data-designtools]) .tabular-nums, .tabular-nums:where([data-designtools]) {
+  :where([data-designtools]) .tabular-nums:not([data-docs-content] *), .tabular-nums:where([data-designtools]):not([data-docs-content] *) {
     --tw-numeric-spacing: tabular-nums;
     font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
   }
-  :where([data-designtools]) .line-through, .line-through:where([data-designtools]) {
+  :where([data-designtools]) .line-through:not([data-docs-content] *), .line-through:where([data-designtools]):not([data-docs-content] *) {
     text-decoration-line: line-through;
   }
-  :where([data-designtools]) .underline, .underline:where([data-designtools]) {
+  :where([data-designtools]) .underline:not([data-docs-content] *), .underline:where([data-designtools]):not([data-docs-content] *) {
     text-decoration-line: underline;
   }
-  :where([data-designtools]) .decoration-border, .decoration-border:where([data-designtools]) {
+  :where([data-designtools]) .decoration-border:not([data-docs-content] *), .decoration-border:where([data-designtools]):not([data-docs-content] *) {
     -webkit-text-decoration-color: var(--border, #e2e4e8);
     -webkit-text-decoration-color: var(--border, #e2e4e8);
     text-decoration-color: var(--border, #e2e4e8);
   }
-  :where([data-designtools]) .decoration-destructive, .decoration-destructive:where([data-designtools]) {
-    -webkit-text-decoration-color: var(--destructive, #c7302f);
-    -webkit-text-decoration-color: var(--destructive, #c7302f);
-    text-decoration-color: var(--destructive, #c7302f);
+  :where([data-designtools]) .decoration-current\/40:not([data-docs-content] *), .decoration-current\/40:where([data-designtools]):not([data-docs-content] *) {
+    text-decoration-color: currentColor;
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    :where([data-designtools]) .decoration-current\/40:not([data-docs-content] *), .decoration-current\/40:where([data-designtools]):not([data-docs-content] *) {
+      -webkit-text-decoration-color: color-mix(in oklab, currentcolor 40%, transparent);
+      -webkit-text-decoration-color: color-mix(in oklab, currentcolor 40%, transparent);
+      text-decoration-color: color-mix(in oklab, currentcolor 40%, transparent);
+    }
   }
-  :where([data-designtools]) .decoration-2, .decoration-2:where([data-designtools]) {
-    text-decoration-thickness: 2px;
+  :where([data-designtools]) .decoration-from-font:not([data-docs-content] *), .decoration-from-font:where([data-designtools]):not([data-docs-content] *) {
+    text-decoration-thickness: from-font;
   }
-  :where([data-designtools]) .underline-offset-2, .underline-offset-2:where([data-designtools]) {
+  :where([data-designtools]) .underline-offset-2:not([data-docs-content] *), .underline-offset-2:where([data-designtools]):not([data-docs-content] *) {
     text-underline-offset: 2px;
   }
-  :where([data-designtools]) .underline-offset-4, .underline-offset-4:where([data-designtools]) {
+  :where([data-designtools]) .underline-offset-4:not([data-docs-content] *), .underline-offset-4:where([data-designtools]):not([data-docs-content] *) {
     text-underline-offset: 4px;
   }
-  :where([data-designtools]) .underline-offset-\[6px\], .underline-offset-\[6px\]:where([data-designtools]) {
+  :where([data-designtools]) .underline-offset-\[6px\]:not([data-docs-content] *), .underline-offset-\[6px\]:where([data-designtools]):not([data-docs-content] *) {
     text-underline-offset: 6px;
   }
-  :where([data-designtools]) .opacity-0, .opacity-0:where([data-designtools]) {
+  :where([data-designtools]) .opacity-0:not([data-docs-content] *), .opacity-0:where([data-designtools]):not([data-docs-content] *) {
     opacity: 0;
   }
-  :where([data-designtools]) .opacity-60, .opacity-60:where([data-designtools]) {
+  :where([data-designtools]) .opacity-60:not([data-docs-content] *), .opacity-60:where([data-designtools]):not([data-docs-content] *) {
     opacity: .6;
   }
-  :where([data-designtools]) .opacity-70, .opacity-70:where([data-designtools]) {
+  :where([data-designtools]) .opacity-70:not([data-docs-content] *), .opacity-70:where([data-designtools]):not([data-docs-content] *) {
     opacity: .7;
   }
-  :where([data-designtools]) .opacity-75, .opacity-75:where([data-designtools]) {
-    opacity: .75;
+  :where([data-designtools]) .opacity-80:not([data-docs-content] *), .opacity-80:where([data-designtools]):not([data-docs-content] *) {
+    opacity: .8;
   }
-  :where([data-designtools]) .shadow, .shadow:where([data-designtools]) {
+  :where([data-designtools]) .shadow:not([data-docs-content] *), .shadow:where([data-designtools]):not([data-docs-content] *) {
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  :where([data-designtools]) .shadow-lg, .shadow-lg:where([data-designtools]) {
+  :where([data-designtools]) .shadow-lg:not([data-docs-content] *), .shadow-lg:where([data-designtools]):not([data-docs-content] *) {
     --tw-shadow: var(--shadow-lg, 0 12px 28px -6px color-mix(in srgb, 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a 16%, transparent));
   }
   @supports (color: color-mix(in lab, red, red)) {
-    :where([data-designtools]) .shadow-lg, .shadow-lg:where([data-designtools]) {
+    :where([data-designtools]) .shadow-lg:not([data-docs-content] *), .shadow-lg:where([data-designtools]):not([data-docs-content] *) {
       --tw-shadow: var(--shadow-lg, 0 12px 28px -6px color-mix(in oklch, var(--shadow, #0b0d12) 16%, transparent));
     }
   }
-  :where([data-designtools]) .shadow-lg, .shadow-lg:where([data-designtools]) {
+  :where([data-designtools]) .shadow-lg:not([data-docs-content] *), .shadow-lg:where([data-designtools]):not([data-docs-content] *) {
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  :where([data-designtools]) .shadow-md, .shadow-md:where([data-designtools]) {
+  :where([data-designtools]) .shadow-md:not([data-docs-content] *), .shadow-md:where([data-designtools]):not([data-docs-content] *) {
     --tw-shadow: var(--shadow-md, 0 4px 12px -2px color-mix(in srgb, 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a 12%, transparent));
   }
   @supports (color: color-mix(in lab, red, red)) {
-    :where([data-designtools]) .shadow-md, .shadow-md:where([data-designtools]) {
+    :where([data-designtools]) .shadow-md:not([data-docs-content] *), .shadow-md:where([data-designtools]):not([data-docs-content] *) {
       --tw-shadow: var(--shadow-md, 0 4px 12px -2px color-mix(in oklch, var(--shadow, #0b0d12) 12%, transparent));
     }
   }
-  :where([data-designtools]) .shadow-md, .shadow-md:where([data-designtools]) {
+  :where([data-designtools]) .shadow-md:not([data-docs-content] *), .shadow-md:where([data-designtools]):not([data-docs-content] *) {
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  :where([data-designtools]) .shadow-sm, .shadow-sm:where([data-designtools]) {
+  :where([data-designtools]) .shadow-sm:not([data-docs-content] *), .shadow-sm:where([data-designtools]):not([data-docs-content] *) {
     --tw-shadow: var(--shadow-sm, 0 1px 3px 0 color-mix(in srgb, 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a 10%, transparent));
   }
   @supports (color: color-mix(in lab, red, red)) {
-    :where([data-designtools]) .shadow-sm, .shadow-sm:where([data-designtools]) {
+    :where([data-designtools]) .shadow-sm:not([data-docs-content] *), .shadow-sm:where([data-designtools]):not([data-docs-content] *) {
       --tw-shadow: var(--shadow-sm, 0 1px 3px 0 color-mix(in oklch, var(--shadow, #0b0d12) 10%, transparent));
     }
   }
-  :where([data-designtools]) .shadow-sm, .shadow-sm:where([data-designtools]) {
+  :where([data-designtools]) .shadow-sm:not([data-docs-content] *), .shadow-sm:where([data-designtools]):not([data-docs-content] *) {
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  :where([data-designtools]) .shadow-xl, .shadow-xl:where([data-designtools]) {
+  :where([data-designtools]) .shadow-xl:not([data-docs-content] *), .shadow-xl:where([data-designtools]):not([data-docs-content] *) {
     --tw-shadow: var(--shadow-xl, 0 24px 48px -12px color-mix(in srgb, 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a 20%, transparent));
   }
   @supports (color: color-mix(in lab, red, red)) {
-    :where([data-designtools]) .shadow-xl, .shadow-xl:where([data-designtools]) {
+    :where([data-designtools]) .shadow-xl:not([data-docs-content] *), .shadow-xl:where([data-designtools]):not([data-docs-content] *) {
       --tw-shadow: var(--shadow-xl, 0 24px 48px -12px color-mix(in oklch, var(--shadow, #0b0d12) 20%, transparent));
     }
   }
-  :where([data-designtools]) .shadow-xl, .shadow-xl:where([data-designtools]) {
+  :where([data-designtools]) .shadow-xl:not([data-docs-content] *), .shadow-xl:where([data-designtools]):not([data-docs-content] *) {
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  :where([data-designtools]) .shadow-xs, .shadow-xs:where([data-designtools]) {
+  :where([data-designtools]) .shadow-xs:not([data-docs-content] *), .shadow-xs:where([data-designtools]):not([data-docs-content] *) {
     --tw-shadow: var(--shadow-xs, 0 1px 2px 0 color-mix(in srgb, 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a 6%, transparent));
   }
   @supports (color: color-mix(in lab, red, red)) {
-    :where([data-designtools]) .shadow-xs, .shadow-xs:where([data-designtools]) {
+    :where([data-designtools]) .shadow-xs:not([data-docs-content] *), .shadow-xs:where([data-designtools]):not([data-docs-content] *) {
       --tw-shadow: var(--shadow-xs, 0 1px 2px 0 color-mix(in oklch, var(--shadow, #0b0d12) 6%, transparent));
     }
   }
-  :where([data-designtools]) .shadow-xs, .shadow-xs:where([data-designtools]) {
+  :where([data-designtools]) .shadow-xs:not([data-docs-content] *), .shadow-xs:where([data-designtools]):not([data-docs-content] *) {
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  :where([data-designtools]) .ring, .ring:where([data-designtools]), :where([data-designtools]) .ring-1, .ring-1:where([data-designtools]) {
+  :where([data-designtools]) .ring:not([data-docs-content] *), .ring:where([data-designtools]):not([data-docs-content] *), :where([data-designtools]) .ring-1:not([data-docs-content] *), .ring-1:where([data-designtools]):not([data-docs-content] *) {
     --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  :where([data-designtools]) .ring-border, .ring-border:where([data-designtools]) {
+  :where([data-designtools]) .ring-2:not([data-docs-content] *), .ring-2:where([data-designtools]):not([data-docs-content] *) {
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  :where([data-designtools]) .ring-\(--border\):not([data-docs-content] *), .ring-\(--border\):where([data-designtools]):not([data-docs-content] *) {
+    --tw-ring-color: var(--border);
+  }
+  :where([data-designtools]) .ring-\(--canvas-foreground\)\/15:not([data-docs-content] *), .ring-\(--canvas-foreground\)\/15:where([data-designtools]):not([data-docs-content] *) {
+    --tw-ring-color: var(--canvas-foreground);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    :where([data-designtools]) .ring-\(--canvas-foreground\)\/15:not([data-docs-content] *), .ring-\(--canvas-foreground\)\/15:where([data-designtools]):not([data-docs-content] *) {
+      --tw-ring-color: color-mix(in oklab, var(--canvas-foreground) 15%, transparent);
+    }
+  }
+  :where([data-designtools]) .ring-border:not([data-docs-content] *), .ring-border:where([data-designtools]):not([data-docs-content] *) {
     --tw-ring-color: var(--border, #e2e4e8);
   }
-  :where([data-designtools]) .ring-current\/30, .ring-current\/30:where([data-designtools]) {
+  :where([data-designtools]) .ring-canvas:not([data-docs-content] *), .ring-canvas:where([data-designtools]):not([data-docs-content] *) {
+    --tw-ring-color: var(--canvas, #fff);
+  }
+  :where([data-designtools]) .ring-current\/15:not([data-docs-content] *), .ring-current\/15:where([data-designtools]):not([data-docs-content] *) {
     --tw-ring-color: currentcolor;
   }
   @supports (color: color-mix(in lab, red, red)) {
-    :where([data-designtools]) .ring-current\/30, .ring-current\/30:where([data-designtools]) {
-      --tw-ring-color: color-mix(in oklab, currentcolor 30%, transparent);
+    :where([data-designtools]) .ring-current\/15:not([data-docs-content] *), .ring-current\/15:where([data-designtools]):not([data-docs-content] *) {
+      --tw-ring-color: color-mix(in oklab, currentcolor 15%, transparent);
     }
   }
-  :where([data-designtools]) .outline, .outline:where([data-designtools]), :where([data-designtools]) .outline-1, .outline-1:where([data-designtools]) {
+  :where([data-designtools]) .outline:not([data-docs-content] *), .outline:where([data-designtools]):not([data-docs-content] *), :where([data-designtools]) .outline-1:not([data-docs-content] *), .outline-1:where([data-designtools]):not([data-docs-content] *) {
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
   }
-  :where([data-designtools]) .outline-\[var\(--ring\)\], .outline-\[var\(--ring\)\]:where([data-designtools]) {
+  :where([data-designtools]) .outline-\[var\(--ring\)\]:not([data-docs-content] *), .outline-\[var\(--ring\)\]:where([data-designtools]):not([data-docs-content] *) {
     outline-color: var(--ring);
   }
-  :where([data-designtools]) .blur, .blur:where([data-designtools]) {
+  :where([data-designtools]) .blur:not([data-docs-content] *), .blur:where([data-designtools]):not([data-docs-content] *) {
     --tw-blur: blur(8px);
     filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
   }
-  :where([data-designtools]) .filter, .filter:where([data-designtools]) {
+  :where([data-designtools]) .filter:not([data-docs-content] *), .filter:where([data-designtools]):not([data-docs-content] *) {
     filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
   }
-  :where([data-designtools]) .backdrop-blur-md, .backdrop-blur-md:where([data-designtools]) {
+  :where([data-designtools]) .backdrop-blur-md:not([data-docs-content] *), .backdrop-blur-md:where([data-designtools]):not([data-docs-content] *) {
     --tw-backdrop-blur: blur(12px);
     -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, );
   }
-  :where([data-designtools]) .backdrop-blur-xs, .backdrop-blur-xs:where([data-designtools]) {
+  :where([data-designtools]) .backdrop-blur-xs:not([data-docs-content] *), .backdrop-blur-xs:where([data-designtools]):not([data-docs-content] *) {
     --tw-backdrop-blur: blur(4px);
     -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, );
   }
-  :where([data-designtools]) .transition-\[height\], .transition-\[height\]:where([data-designtools]) {
+  :where([data-designtools]) .transition-\[height\]:not([data-docs-content] *), .transition-\[height\]:where([data-designtools]):not([data-docs-content] *) {
     transition-property: height;
     transition-timing-function: var(--tw-ease, cubic-bezier(.4, 0, .2, 1));
     transition-duration: var(--tw-duration, .15s);
   }
-  :where([data-designtools]) .transition-\[left\,width\], .transition-\[left\,width\]:where([data-designtools]) {
+  :where([data-designtools]) .transition-\[left\,width\]:not([data-docs-content] *), .transition-\[left\,width\]:where([data-designtools]):not([data-docs-content] *) {
     transition-property: left, width;
     transition-timing-function: var(--tw-ease, cubic-bezier(.4, 0, .2, 1));
     transition-duration: var(--tw-duration, .15s);
   }
-  :where([data-designtools]) .transition-\[opacity\,scale\], .transition-\[opacity\,scale\]:where([data-designtools]) {
+  :where([data-designtools]) .transition-\[opacity\,scale\]:not([data-docs-content] *), .transition-\[opacity\,scale\]:where([data-designtools]):not([data-docs-content] *) {
     transition-property: opacity, scale;
     transition-timing-function: var(--tw-ease, cubic-bezier(.4, 0, .2, 1));
     transition-duration: var(--tw-duration, .15s);
   }
-  :where([data-designtools]) .transition-colors, .transition-colors:where([data-designtools]) {
+  :where([data-designtools]) .transition-colors:not([data-docs-content] *), .transition-colors:where([data-designtools]):not([data-docs-content] *) {
     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, cubic-bezier(.4, 0, .2, 1));
     transition-duration: var(--tw-duration, .15s);
   }
-  :where([data-designtools]) .transition-opacity, .transition-opacity:where([data-designtools]) {
+  :where([data-designtools]) .transition-opacity:not([data-docs-content] *), .transition-opacity:where([data-designtools]):not([data-docs-content] *) {
     transition-property: opacity;
     transition-timing-function: var(--tw-ease, cubic-bezier(.4, 0, .2, 1));
     transition-duration: var(--tw-duration, .15s);
   }
-  :where([data-designtools]) .transition-transform, .transition-transform:where([data-designtools]) {
+  :where([data-designtools]) .transition-transform:not([data-docs-content] *), .transition-transform:where([data-designtools]):not([data-docs-content] *) {
     transition-property: transform, translate, scale, rotate;
     transition-timing-function: var(--tw-ease, cubic-bezier(.4, 0, .2, 1));
     transition-duration: var(--tw-duration, .15s);
   }
-  :where([data-designtools]) .duration-\(--dt-duration-base\), .duration-\(--dt-duration-base\):where([data-designtools]) {
+  :where([data-designtools]) .duration-\(--dt-duration-base\):not([data-docs-content] *), .duration-\(--dt-duration-base\):where([data-designtools]):not([data-docs-content] *) {
     --tw-duration: var(--dt-duration-base);
     transition-duration: var(--dt-duration-base);
   }
-  :where([data-designtools]) .duration-\(--dt-duration-fast\), .duration-\(--dt-duration-fast\):where([data-designtools]) {
+  :where([data-designtools]) .duration-\(--dt-duration-fast\):not([data-docs-content] *), .duration-\(--dt-duration-fast\):where([data-designtools]):not([data-docs-content] *) {
     --tw-duration: var(--dt-duration-fast);
     transition-duration: var(--dt-duration-fast);
   }
-  :where([data-designtools]) .duration-\(--dt-duration-slow\), .duration-\(--dt-duration-slow\):where([data-designtools]) {
+  :where([data-designtools]) .duration-\(--dt-duration-slow\):not([data-docs-content] *), .duration-\(--dt-duration-slow\):where([data-designtools]):not([data-docs-content] *) {
     --tw-duration: var(--dt-duration-slow);
     transition-duration: var(--dt-duration-slow);
   }
-  :where([data-designtools]) .ease-\(--dt-ease-out\), .ease-\(--dt-ease-out\):where([data-designtools]) {
+  :where([data-designtools]) .ease-\(--dt-ease-out\):not([data-docs-content] *), .ease-\(--dt-ease-out\):where([data-designtools]):not([data-docs-content] *) {
     --tw-ease: var(--dt-ease-out);
     transition-timing-function: var(--dt-ease-out);
   }
-  :where([data-designtools]) .outline-none, .outline-none:where([data-designtools]) {
+  :where([data-designtools]) .outline-none:not([data-docs-content] *), .outline-none:where([data-designtools]):not([data-docs-content] *) {
     --tw-outline-style: none;
     outline-style: none;
   }
-  :where([data-designtools]) .outline-solid, .outline-solid:where([data-designtools]) {
+  :where([data-designtools]) .outline-solid:not([data-docs-content] *), .outline-solid:where([data-designtools]):not([data-docs-content] *) {
     --tw-outline-style: solid;
     outline-style: solid;
   }
-  :where([data-designtools]) .select-none, .select-none:where([data-designtools]) {
+  :where([data-designtools]) .select-none:not([data-docs-content] *), .select-none:where([data-designtools]):not([data-docs-content] *) {
     -webkit-user-select: none;
     user-select: none;
   }
-  :where([data-designtools]) .\[counter-increment\:docs-section\], .\[counter-increment\:docs-section\]:where([data-designtools]) {
+  :where([data-designtools]) .\[counter-increment\:docs-section\]:not([data-docs-content] *), .\[counter-increment\:docs-section\]:where([data-designtools]):not([data-docs-content] *) {
     counter-increment: docs-section;
   }
-  :where([data-designtools]) .\[counter-reset\:docs-section\], .\[counter-reset\:docs-section\]:where([data-designtools]) {
+  :where([data-designtools]) .\[counter-reset\:docs-section\]:not([data-docs-content] *), .\[counter-reset\:docs-section\]:where([data-designtools]):not([data-docs-content] *) {
     counter-reset: docs-section;
   }
-  :where([data-designtools]) .ring-inset, .ring-inset:where([data-designtools]) {
-    --tw-ring-inset: inset;
+  :where([data-designtools]) .\[text-box\:trim-both_cap_alphabetic\]:not([data-docs-content] *), .\[text-box\:trim-both_cap_alphabetic\]:where([data-designtools]):not([data-docs-content] *) {
+    text-box: trim-both cap alphabetic;
   }
-  :where([data-designtools]) .not-first\:border-t:not(:first-child), .not-first\:border-t:not(:first-child):where([data-designtools]) {
-    border-top-style: var(--tw-border-style);
-    border-top-width: 1px;
-  }
-  :where([data-designtools]) .not-first\:border-border:not(:first-child), .not-first\:border-border:not(:first-child):where([data-designtools]) {
-    border-color: var(--border, #e2e4e8);
+  :where([data-designtools]) .ring-inset:not([data-docs-content] *), .ring-inset:where([data-designtools]):not([data-docs-content] *) {
+    --tw-ring-inset: inset;
   }
-  :where([data-designtools]) .not-last\:mb-2:not(:last-child), .not-last\:mb-2:not(:last-child):where([data-designtools]) {
+  :where([data-designtools]) .not-last\:mb-2:not(:last-child):not([data-docs-content] *), .not-last\:mb-2:not(:last-child):where([data-designtools]):not([data-docs-content] *) {
     margin-bottom: .5rem;
   }
-  :where([data-designtools]) .group-open\:rotate-180:is(:where(.group):is([open], :popover-open, :open) *), .group-open\:rotate-180:is(:where(.group):is([open], :popover-open, :open) *):where([data-designtools]), :where([data-designtools]) .group-open\/inherited\:rotate-180:is(:where(.group\/inherited):is([open], :popover-open, :open) *), .group-open\/inherited\:rotate-180:is(:where(.group\/inherited):is([open], :popover-open, :open) *):where([data-designtools]), :where([data-designtools]) .group-open\/row\:rotate-180:is(:where(.group\/row):is([open], :popover-open, :open) *), .group-open\/row\:rotate-180:is(:where(.group\/row):is([open], :popover-open, :open) *):where([data-designtools]) {
+  :where([data-designtools]) .group-open\:rotate-180:is(:where(.group):is([open], :popover-open, :open) *):not([data-docs-content] *), .group-open\:rotate-180:is(:where(.group):is([open], :popover-open, :open) *):where([data-designtools]):not([data-docs-content] *), :where([data-designtools]) .group-open\/inherited\:rotate-180:is(:where(.group\/inherited):is([open], :popover-open, :open) *):not([data-docs-content] *), .group-open\/inherited\:rotate-180:is(:where(.group\/inherited):is([open], :popover-open, :open) *):where([data-designtools]):not([data-docs-content] *), :where([data-designtools]) .group-open\/row\:rotate-180:is(:where(.group\/row):is([open], :popover-open, :open) *):not([data-docs-content] *), .group-open\/row\:rotate-180:is(:where(.group\/row):is([open], :popover-open, :open) *):where([data-designtools]):not([data-docs-content] *) {
     rotate: 180deg;
   }
   @media (hover: hover) {
-    :where([data-designtools]) .group-hover\:-translate-x-0\.5:is(:where(.group):hover *), .group-hover\:-translate-x-0\.5:is(:where(.group):hover *):where([data-designtools]) {
+    :where([data-designtools]) .group-hover\:-translate-x-0\.5:is(:where(.group):hover *):not([data-docs-content] *), .group-hover\:-translate-x-0\.5:is(:where(.group):hover *):where([data-designtools]):not([data-docs-content] *) {
       --tw-translate-x: calc(.25rem * -.5);
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
-    :where([data-designtools]) .group-hover\:translate-x-0\.5:is(:where(.group):hover *), .group-hover\:translate-x-0\.5:is(:where(.group):hover *):where([data-designtools]) {
+    :where([data-designtools]) .group-hover\:translate-x-0\.5:is(:where(.group):hover *):not([data-docs-content] *), .group-hover\:translate-x-0\.5:is(:where(.group):hover *):where([data-designtools]):not([data-docs-content] *) {
       --tw-translate-x: calc(.25rem * .5);
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
-    :where([data-designtools]) .group-hover\:translate-x-full:is(:where(.group):hover *), .group-hover\:translate-x-full:is(:where(.group):hover *):where([data-designtools]) {
+    :where([data-designtools]) .group-hover\:translate-x-full:is(:where(.group):hover *):not([data-docs-content] *), .group-hover\:translate-x-full:is(:where(.group):hover *):where([data-designtools]):not([data-docs-content] *) {
       --tw-translate-x: 100%;
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
-    :where([data-designtools]) .group-hover\:-translate-y-0\.5:is(:where(.group):hover *), .group-hover\:-translate-y-0\.5:is(:where(.group):hover *):where([data-designtools]) {
-      --tw-translate-y: calc(.25rem * -.5);
-      translate: var(--tw-translate-x) var(--tw-translate-y);
-    }
-    :where([data-designtools]) .group-hover\:text-canvas-foreground:is(:where(.group):hover *), .group-hover\:text-canvas-foreground:is(:where(.group):hover *):where([data-designtools]) {
+    :where([data-designtools]) .group-hover\:text-canvas-foreground:is(:where(.group):hover *):not([data-docs-content] *), .group-hover\:text-canvas-foreground:is(:where(.group):hover *):where([data-designtools]):not([data-docs-content] *) {
       color: var(--canvas-foreground, #1c1f26);
     }
-    :where([data-designtools]) .group-hover\:underline:is(:where(.group):hover *), .group-hover\:underline:is(:where(.group):hover *):where([data-designtools]) {
+    :where([data-designtools]) .group-hover\:underline:is(:where(.group):hover *):not([data-docs-content] *), .group-hover\:underline:is(:where(.group):hover *):where([data-designtools]):not([data-docs-content] *) {
       text-decoration-line: underline;
     }
-    :where([data-designtools]) .group-hover\:underline-offset-4:is(:where(.group):hover *), .group-hover\:underline-offset-4:is(:where(.group):hover *):where([data-designtools]) {
+    :where([data-designtools]) .group-hover\:underline-offset-4:is(:where(.group):hover *):not([data-docs-content] *), .group-hover\:underline-offset-4:is(:where(.group):hover *):where([data-designtools]):not([data-docs-content] *) {
       text-underline-offset: 4px;
     }
-    :where([data-designtools]) .group-hover\:opacity-100:is(:where(.group):hover *), .group-hover\:opacity-100:is(:where(.group):hover *):where([data-designtools]) {
+    :where([data-designtools]) .group-hover\:opacity-100:is(:where(.group):hover *):not([data-docs-content] *), .group-hover\:opacity-100:is(:where(.group):hover *):where([data-designtools]):not([data-docs-content] *) {
       opacity: 1;
     }
   }
-  :where([data-designtools]) .group-focus-visible\:translate-x-full:is(:where(.group):focus-visible *), .group-focus-visible\:translate-x-full:is(:where(.group):focus-visible *):where([data-designtools]) {
+  :where([data-designtools]) .group-focus-visible\:translate-x-full:is(:where(.group):focus-visible *):not([data-docs-content] *), .group-focus-visible\:translate-x-full:is(:where(.group):focus-visible *):where([data-designtools]):not([data-docs-content] *) {
     --tw-translate-x: 100%;
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
-  :where([data-designtools]) .group-data-panel-open\:rotate-90:is(:where(.group)[data-panel-open] *), .group-data-panel-open\:rotate-90:is(:where(.group)[data-panel-open] *):where([data-designtools]) {
+  :where([data-designtools]) .group-data-panel-open\:rotate-90:is(:where(.group)[data-panel-open] *):not([data-docs-content] *), .group-data-panel-open\:rotate-90:is(:where(.group)[data-panel-open] *):where([data-designtools]):not([data-docs-content] *) {
     rotate: 90deg;
   }
-  :where([data-designtools]) .placeholder\:text-muted-foreground::placeholder, .placeholder\:text-muted-foreground:where([data-designtools])::placeholder {
+  :where([data-designtools]) .placeholder\:text-muted-foreground:not([data-docs-content] *)::placeholder, .placeholder\:text-muted-foreground:where([data-designtools]):not([data-docs-content] *)::placeholder, :where([data-designtools]) .placeholder\:text-muted-foreground\/70:not([data-docs-content] *)::placeholder, .placeholder\:text-muted-foreground\/70:where([data-designtools]):not([data-docs-content] *)::placeholder {
     color: var(--muted-foreground, #5a606b);
   }
-  :where([data-designtools]) .before\:content-\[counter\(docs-section\,decimal-leading-zero\)\]:before, .before\:content-\[counter\(docs-section\,decimal-leading-zero\)\]:before:where([data-designtools]) {
+  @supports (color: color-mix(in lab, red, red)) {
+    :where([data-designtools]) .placeholder\:text-muted-foreground\/70:not([data-docs-content] *)::placeholder, .placeholder\:text-muted-foreground\/70:where([data-designtools]):not([data-docs-content] *)::placeholder {
+      color: color-mix(in oklab, var(--muted-foreground, #5a606b) 70%, transparent);
+    }
+  }
+  :where([data-designtools]) .before\:content-\[counter\(docs-section\,decimal-leading-zero\)\]:not([data-docs-content] *):before, .before\:content-\[counter\(docs-section\,decimal-leading-zero\)\]:where([data-designtools]):not([data-docs-content] *):before {
     --tw-content: counter(docs-section,decimal-leading-zero);
     content: var(--tw-content);
   }
-  :where([data-designtools]) .after\:absolute:after, .after\:absolute:after:where([data-designtools]) {
+  :where([data-designtools]) .after\:absolute:not([data-docs-content] *):after, .after\:absolute:where([data-designtools]):not([data-docs-content] *):after {
     content: var(--tw-content);
     position: absolute;
   }
-  :where([data-designtools]) .after\:-inset-2:after, .after\:-inset-2:after:where([data-designtools]) {
+  :where([data-designtools]) .after\:-inset-2:not([data-docs-content] *):after, .after\:-inset-2:where([data-designtools]):not([data-docs-content] *):after {
     content: var(--tw-content);
     inset: -.5rem;
   }
-  :where([data-designtools]) .after\:-inset-2\.5:after, .after\:-inset-2\.5:after:where([data-designtools]) {
+  :where([data-designtools]) .after\:-inset-2\.5:not([data-docs-content] *):after, .after\:-inset-2\.5:where([data-designtools]):not([data-docs-content] *):after {
     content: var(--tw-content);
     inset: -.625rem;
   }
-  :where([data-designtools]) .after\:-inset-3:after, .after\:-inset-3:after:where([data-designtools]) {
+  :where([data-designtools]) .after\:-inset-3:not([data-docs-content] *):after, .after\:-inset-3:where([data-designtools]):not([data-docs-content] *):after {
     content: var(--tw-content);
     inset: -.75rem;
   }
-  :where([data-designtools]) .after\:-inset-\[calc\(\(var\(--docs-target\,2\.75rem\)-2rem\)\/2\)\]:after, .after\:-inset-\[calc\(\(var\(--docs-target\,2\.75rem\)-2rem\)\/2\)\]:after:where([data-designtools]) {
+  :where([data-designtools]) .after\:-inset-\[calc\(\(var\(--docs-target\,2\.75rem\)-2rem\)\/2\)\]:not([data-docs-content] *):after, .after\:-inset-\[calc\(\(var\(--docs-target\,2\.75rem\)-2rem\)\/2\)\]:where([data-designtools]):not([data-docs-content] *):after {
     content: var(--tw-content);
     inset: calc(calc((var(--docs-target, 2.75rem) - 2rem) / 2) * -1);
   }
-  :where([data-designtools]) .after\:inset-x-0:after, .after\:inset-x-0:after:where([data-designtools]) {
+  :where([data-designtools]) .after\:inset-x-0:not([data-docs-content] *):after, .after\:inset-x-0:where([data-designtools]):not([data-docs-content] *):after {
     content: var(--tw-content);
     inset-inline: 0;
   }
-  :where([data-designtools]) .after\:-inset-y-1:after, .after\:-inset-y-1:after:where([data-designtools]) {
+  :where([data-designtools]) .after\:-inset-y-1:not([data-docs-content] *):after, .after\:-inset-y-1:where([data-designtools]):not([data-docs-content] *):after {
     content: var(--tw-content);
     inset-block: -.25rem;
   }
-  :where([data-designtools]) .after\:-inset-y-1\.5:after, .after\:-inset-y-1\.5:after:where([data-designtools]) {
+  :where([data-designtools]) .after\:-inset-y-1\.5:not([data-docs-content] *):after, .after\:-inset-y-1\.5:where([data-designtools]):not([data-docs-content] *):after {
     content: var(--tw-content);
     inset-block: -.375rem;
   }
-  :where([data-designtools]) .after\:-inset-y-\[calc\(\(var\(--docs-target\,2\.75rem\)-1\.75rem\)\/2\)\]:after, .after\:-inset-y-\[calc\(\(var\(--docs-target\,2\.75rem\)-1\.75rem\)\/2\)\]:after:where([data-designtools]) {
+  :where([data-designtools]) .after\:-inset-y-\[calc\(\(var\(--docs-target\,2\.75rem\)-1\.75rem\)\/2\)\]:not([data-docs-content] *):after, .after\:-inset-y-\[calc\(\(var\(--docs-target\,2\.75rem\)-1\.75rem\)\/2\)\]:where([data-designtools]):not([data-docs-content] *):after {
     content: var(--tw-content);
     inset-block: calc(calc((var(--docs-target, 2.75rem) - 1.75rem) / 2) * -1);
   }
-  :where([data-designtools]) .after\:-inset-y-\[calc\(\(var\(--docs-target\,2\.75rem\)-2rem\)\/2\)\]:after, .after\:-inset-y-\[calc\(\(var\(--docs-target\,2\.75rem\)-2rem\)\/2\)\]:after:where([data-designtools]) {
+  :where([data-designtools]) .after\:-inset-y-\[calc\(\(var\(--docs-target\,2\.75rem\)-2rem\)\/2\)\]:not([data-docs-content] *):after, .after\:-inset-y-\[calc\(\(var\(--docs-target\,2\.75rem\)-2rem\)\/2\)\]:where([data-designtools]):not([data-docs-content] *):after {
     content: var(--tw-content);
     inset-block: calc(calc((var(--docs-target, 2.75rem) - 2rem) / 2) * -1);
   }
-  :where([data-designtools]) .after\:content-\[\'\'\]:after, .after\:content-\[\'\'\]:after:where([data-designtools]) {
+  :where([data-designtools]) .after\:content-\[\'\'\]:not([data-docs-content] *):after, .after\:content-\[\'\'\]:where([data-designtools]):not([data-docs-content] *):after {
     --tw-content: "";
     content: var(--tw-content);
   }
-  :where([data-designtools]) .first\:-ml-1\.5:first-child, .first\:-ml-1\.5:first-child:where([data-designtools]) {
+  :where([data-designtools]) .first\:mt-0:first-child:not([data-docs-content] *), .first\:mt-0:first-child:where([data-designtools]):not([data-docs-content] *) {
+    margin-top: 0;
+  }
+  :where([data-designtools]) .first\:-ml-1\.5:first-child:not([data-docs-content] *), .first\:-ml-1\.5:first-child:where([data-designtools]):not([data-docs-content] *) {
     margin-left: -.375rem;
   }
-  :where([data-designtools]) .first\:border-t-0:first-child, .first\:border-t-0:first-child:where([data-designtools]) {
-    border-top-style: var(--tw-border-style);
-    border-top-width: 0;
+  :where([data-designtools]) .first\:pt-1:first-child:not([data-docs-content] *), .first\:pt-1:first-child:where([data-designtools]):not([data-docs-content] *) {
+    padding-top: .25rem;
   }
-  :where([data-designtools]) .last\:-mr-1\.5:last-child, .last\:-mr-1\.5:last-child:where([data-designtools]) {
+  :where([data-designtools]) .last\:-mr-1\.5:last-child:not([data-docs-content] *), .last\:-mr-1\.5:last-child:where([data-designtools]):not([data-docs-content] *) {
     margin-right: -.375rem;
   }
-  :where([data-designtools]) .last\:border-b-0:last-child, .last\:border-b-0:last-child:where([data-designtools]) {
+  :where([data-designtools]) .last\:border-b-0:last-child:not([data-docs-content] *), .last\:border-b-0:last-child:where([data-designtools]):not([data-docs-content] *) {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 0;
   }
-  :where([data-designtools]) .focus-within\:outline-2:focus-within, .focus-within\:outline-2:focus-within:where([data-designtools]) {
+  :where([data-designtools]) .focus-within\:outline-2:focus-within:not([data-docs-content] *), .focus-within\:outline-2:focus-within:where([data-designtools]):not([data-docs-content] *) {
     outline-style: var(--tw-outline-style);
     outline-width: 2px;
   }
-  :where([data-designtools]) .focus-within\:outline-ring:focus-within, .focus-within\:outline-ring:focus-within:where([data-designtools]) {
+  :where([data-designtools]) .focus-within\:outline-ring:focus-within:not([data-docs-content] *), .focus-within\:outline-ring:focus-within:where([data-designtools]):not([data-docs-content] *) {
     outline-color: var(--ring, #2b5ce6);
   }
   @media (hover: hover) {
-    :where([data-designtools]) .hover\:border-input:hover, .hover\:border-input:hover:where([data-designtools]) {
+    :where([data-designtools]) .hover\:border-input:hover:not([data-docs-content] *), .hover\:border-input:hover:where([data-designtools]):not([data-docs-content] *) {
       border-color: var(--input, #8a909b);
     }
-    :where([data-designtools]) .hover\:bg-muted:hover, .hover\:bg-muted:hover:where([data-designtools]), :where([data-designtools]) .hover\:bg-muted\/50:hover, .hover\:bg-muted\/50:hover:where([data-designtools]) {
+    :where([data-designtools]) .hover\:bg-muted:hover:not([data-docs-content] *), .hover\:bg-muted:hover:where([data-designtools]):not([data-docs-content] *), :where([data-designtools]) .hover\:bg-muted\/50:hover:not([data-docs-content] *), .hover\:bg-muted\/50:hover:where([data-designtools]):not([data-docs-content] *) {
       background-color: var(--muted, #f4f5f7);
     }
     @supports (color: color-mix(in lab, red, red)) {
-      :where([data-designtools]) .hover\:bg-muted\/50:hover, .hover\:bg-muted\/50:hover:where([data-designtools]) {
+      :where([data-designtools]) .hover\:bg-muted\/50:hover:not([data-docs-content] *), .hover\:bg-muted\/50:hover:where([data-designtools]):not([data-docs-content] *) {
         background-color: color-mix(in oklab, var(--muted, #f4f5f7) 50%, transparent);
       }
     }
-    :where([data-designtools]) .hover\:bg-muted\/60:hover, .hover\:bg-muted\/60:hover:where([data-designtools]) {
+    :where([data-designtools]) .hover\:bg-muted\/60:hover:not([data-docs-content] *), .hover\:bg-muted\/60:hover:where([data-designtools]):not([data-docs-content] *) {
       background-color: var(--muted, #f4f5f7);
     }
     @supports (color: color-mix(in lab, red, red)) {
-      :where([data-designtools]) .hover\:bg-muted\/60:hover, .hover\:bg-muted\/60:hover:where([data-designtools]) {
+      :where([data-designtools]) .hover\:bg-muted\/60:hover:not([data-docs-content] *), .hover\:bg-muted\/60:hover:where([data-designtools]):not([data-docs-content] *) {
         background-color: color-mix(in oklab, var(--muted, #f4f5f7) 60%, transparent);
       }
     }
-    :where([data-designtools]) .hover\:bg-muted\/70:hover, .hover\:bg-muted\/70:hover:where([data-designtools]) {
+    :where([data-designtools]) .hover\:bg-muted\/70:hover:not([data-docs-content] *), .hover\:bg-muted\/70:hover:where([data-designtools]):not([data-docs-content] *) {
       background-color: var(--muted, #f4f5f7);
     }
     @supports (color: color-mix(in lab, red, red)) {
-      :where([data-designtools]) .hover\:bg-muted\/70:hover, .hover\:bg-muted\/70:hover:where([data-designtools]) {
+      :where([data-designtools]) .hover\:bg-muted\/70:hover:not([data-docs-content] *), .hover\:bg-muted\/70:hover:where([data-designtools]):not([data-docs-content] *) {
         background-color: color-mix(in oklab, var(--muted, #f4f5f7) 70%, transparent);
       }
     }
-    :where([data-designtools]) .hover\:bg-primary-hover:hover, .hover\:bg-primary-hover:hover:where([data-designtools]) {
+    :where([data-designtools]) .hover\:bg-primary-hover:hover:not([data-docs-content] *), .hover\:bg-primary-hover:hover:where([data-designtools]):not([data-docs-content] *) {
       background-color: var(--primary-hover, #2149c2);
     }
-    :where([data-designtools]) .hover\:text-canvas-foreground:hover, .hover\:text-canvas-foreground:hover:where([data-designtools]) {
+    :where([data-designtools]) .hover\:text-canvas-foreground:hover:not([data-docs-content] *), .hover\:text-canvas-foreground:hover:where([data-designtools]):not([data-docs-content] *) {
       color: var(--canvas-foreground, #1c1f26);
     }
-    :where([data-designtools]) .hover\:underline:hover, .hover\:underline:hover:where([data-designtools]) {
+    :where([data-designtools]) .hover\:underline:hover:not([data-docs-content] *), .hover\:underline:hover:where([data-designtools]):not([data-docs-content] *) {
       text-decoration-line: underline;
     }
-    :where([data-designtools]) .hover\:decoration-current:hover, .hover\:decoration-current:hover:where([data-designtools]) {
+    :where([data-designtools]) .hover\:decoration-current:hover:not([data-docs-content] *), .hover\:decoration-current:hover:where([data-designtools]):not([data-docs-content] *) {
       text-decoration-color: currentColor;
     }
-    :where([data-designtools]) .hover\:underline-offset-4:hover, .hover\:underline-offset-4:hover:where([data-designtools]) {
+    :where([data-designtools]) .hover\:decoration-2:hover:not([data-docs-content] *), .hover\:decoration-2:hover:where([data-designtools]):not([data-docs-content] *) {
+      text-decoration-thickness: 2px;
+    }
+    :where([data-designtools]) .hover\:underline-offset-4:hover:not([data-docs-content] *), .hover\:underline-offset-4:hover:where([data-designtools]):not([data-docs-content] *) {
       text-underline-offset: 4px;
     }
   }
-  :where([data-designtools]) .focus-visible\:bg-muted\/50:focus-visible, .focus-visible\:bg-muted\/50:focus-visible:where([data-designtools]) {
+  :where([data-designtools]) .focus-visible\:border-b-2:focus-visible:not([data-docs-content] *), .focus-visible\:border-b-2:focus-visible:where([data-designtools]):not([data-docs-content] *) {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 2px;
+  }
+  :where([data-designtools]) .focus-visible\:border-canvas-foreground:focus-visible:not([data-docs-content] *), .focus-visible\:border-canvas-foreground:focus-visible:where([data-designtools]):not([data-docs-content] *) {
+    border-color: var(--canvas-foreground, #1c1f26);
+  }
+  :where([data-designtools]) .focus-visible\:bg-muted\/50:focus-visible:not([data-docs-content] *), .focus-visible\:bg-muted\/50:focus-visible:where([data-designtools]):not([data-docs-content] *) {
     background-color: var(--muted, #f4f5f7);
   }
   @supports (color: color-mix(in lab, red, red)) {
-    :where([data-designtools]) .focus-visible\:bg-muted\/50:focus-visible, .focus-visible\:bg-muted\/50:focus-visible:where([data-designtools]) {
+    :where([data-designtools]) .focus-visible\:bg-muted\/50:focus-visible:not([data-docs-content] *), .focus-visible\:bg-muted\/50:focus-visible:where([data-designtools]):not([data-docs-content] *) {
       background-color: color-mix(in oklab, var(--muted, #f4f5f7) 50%, transparent);
     }
   }
-  :where([data-designtools]) .focus-visible\:opacity-100:focus-visible, .focus-visible\:opacity-100:focus-visible:where([data-designtools]) {
+  :where([data-designtools]) .focus-visible\:opacity-100:focus-visible:not([data-docs-content] *), .focus-visible\:opacity-100:focus-visible:where([data-designtools]):not([data-docs-content] *) {
     opacity: 1;
   }
-  :where([data-designtools]) .focus-visible\:outline-2:focus-visible, .focus-visible\:outline-2:focus-visible:where([data-designtools]) {
+  :where([data-designtools]) .focus-visible\:outline-2:focus-visible:not([data-docs-content] *), .focus-visible\:outline-2:focus-visible:where([data-designtools]):not([data-docs-content] *) {
     outline-style: var(--tw-outline-style);
     outline-width: 2px;
   }
-  :where([data-designtools]) .focus-visible\:-outline-offset-2:focus-visible, .focus-visible\:-outline-offset-2:focus-visible:where([data-designtools]) {
+  :where([data-designtools]) .focus-visible\:-outline-offset-2:focus-visible:not([data-docs-content] *), .focus-visible\:-outline-offset-2:focus-visible:where([data-designtools]):not([data-docs-content] *) {
     outline-offset: calc(2px * -1);
   }
-  :where([data-designtools]) .focus-visible\:outline-offset-2:focus-visible, .focus-visible\:outline-offset-2:focus-visible:where([data-designtools]) {
+  :where([data-designtools]) .focus-visible\:outline-offset-2:focus-visible:not([data-docs-content] *), .focus-visible\:outline-offset-2:focus-visible:where([data-designtools]):not([data-docs-content] *) {
     outline-offset: 2px;
   }
-  :where([data-designtools]) .focus-visible\:outline-offset-\[-2px\]:focus-visible, .focus-visible\:outline-offset-\[-2px\]:focus-visible:where([data-designtools]) {
+  :where([data-designtools]) .focus-visible\:outline-offset-\[-2px\]:focus-visible:not([data-docs-content] *), .focus-visible\:outline-offset-\[-2px\]:focus-visible:where([data-designtools]):not([data-docs-content] *) {
     outline-offset: -2px;
   }
-  :where([data-designtools]) .focus-visible\:outline-ring:focus-visible, .focus-visible\:outline-ring:focus-visible:where([data-designtools]) {
+  :where([data-designtools]) .focus-visible\:outline-ring:focus-visible:not([data-docs-content] *), .focus-visible\:outline-ring:focus-visible:where([data-designtools]):not([data-docs-content] *) {
     outline-color: var(--ring, #2b5ce6);
   }
-  :where([data-designtools]) .disabled\:pointer-events-none:disabled, .disabled\:pointer-events-none:disabled:where([data-designtools]) {
+  :where([data-designtools]) .focus-visible\:outline-none:focus-visible:not([data-docs-content] *), .focus-visible\:outline-none:focus-visible:where([data-designtools]):not([data-docs-content] *) {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+  :where([data-designtools]) .disabled\:pointer-events-none:disabled:not([data-docs-content] *), .disabled\:pointer-events-none:disabled:where([data-designtools]):not([data-docs-content] *) {
     pointer-events: none;
   }
-  :where([data-designtools]) .disabled\:cursor-not-allowed:disabled, .disabled\:cursor-not-allowed:disabled:where([data-designtools]) {
+  :where([data-designtools]) .disabled\:cursor-not-allowed:disabled:not([data-docs-content] *), .disabled\:cursor-not-allowed:disabled:where([data-designtools]):not([data-docs-content] *) {
     cursor: not-allowed;
   }
-  :where([data-designtools]) .disabled\:cursor-wait:disabled, .disabled\:cursor-wait:disabled:where([data-designtools]) {
+  :where([data-designtools]) .disabled\:cursor-wait:disabled:not([data-docs-content] *), .disabled\:cursor-wait:disabled:where([data-designtools]):not([data-docs-content] *) {
     cursor: wait;
   }
-  :where([data-designtools]) .disabled\:opacity-40:disabled, .disabled\:opacity-40:disabled:where([data-designtools]) {
+  :where([data-designtools]) .disabled\:opacity-40:disabled:not([data-docs-content] *), .disabled\:opacity-40:disabled:where([data-designtools]):not([data-docs-content] *) {
     opacity: .4;
   }
-  :where([data-designtools]) .disabled\:opacity-60:disabled, .disabled\:opacity-60:disabled:where([data-designtools]) {
+  :where([data-designtools]) .disabled\:opacity-60:disabled:not([data-docs-content] *), .disabled\:opacity-60:disabled:where([data-designtools]):not([data-docs-content] *) {
     opacity: .6;
   }
-  :where([data-designtools]) .aria-invalid\:outline-2[aria-invalid="true"], .aria-invalid\:outline-2[aria-invalid="true"]:where([data-designtools]) {
+  :where([data-designtools]) .aria-invalid\:outline-2[aria-invalid="true"]:not([data-docs-content] *), .aria-invalid\:outline-2[aria-invalid="true"]:where([data-designtools]):not([data-docs-content] *) {
     outline-style: var(--tw-outline-style);
     outline-width: 2px;
   }
-  :where([data-designtools]) .aria-invalid\:outline-destructive[aria-invalid="true"], .aria-invalid\:outline-destructive[aria-invalid="true"]:where([data-designtools]) {
+  :where([data-designtools]) .aria-invalid\:outline-destructive[aria-invalid="true"]:not([data-docs-content] *), .aria-invalid\:outline-destructive[aria-invalid="true"]:where([data-designtools]):not([data-docs-content] *) {
     outline-color: var(--destructive, #c7302f);
   }
-  :where([data-designtools]) .aria-pressed\:bg-muted[aria-pressed="true"], .aria-pressed\:bg-muted[aria-pressed="true"]:where([data-designtools]) {
+  :where([data-designtools]) .aria-pressed\:bg-muted[aria-pressed="true"]:not([data-docs-content] *), .aria-pressed\:bg-muted[aria-pressed="true"]:where([data-designtools]):not([data-docs-content] *) {
     background-color: var(--muted, #f4f5f7);
   }
-  :where([data-designtools]) .aria-pressed\:text-canvas-foreground[aria-pressed="true"], .aria-pressed\:text-canvas-foreground[aria-pressed="true"]:where([data-designtools]) {
+  :where([data-designtools]) .aria-pressed\:text-canvas-foreground[aria-pressed="true"]:not([data-docs-content] *), .aria-pressed\:text-canvas-foreground[aria-pressed="true"]:where([data-designtools]):not([data-docs-content] *) {
     color: var(--canvas-foreground, #1c1f26);
   }
-  :where([data-designtools]) .data-active\:bg-muted[data-active], .data-active\:bg-muted[data-active]:where([data-designtools]) {
+  :where([data-designtools]) .data-active\:bg-muted[data-active]:not([data-docs-content] *), .data-active\:bg-muted[data-active]:where([data-designtools]):not([data-docs-content] *) {
     background-color: var(--muted, #f4f5f7);
   }
-  :where([data-designtools]) .data-active\:text-canvas-foreground[data-active], .data-active\:text-canvas-foreground[data-active]:where([data-designtools]) {
+  :where([data-designtools]) .data-active\:text-canvas-foreground[data-active]:not([data-docs-content] *), .data-active\:text-canvas-foreground[data-active]:where([data-designtools]):not([data-docs-content] *) {
     color: var(--canvas-foreground, #1c1f26);
   }
-  :where([data-designtools]) .data-disabled\:cursor-not-allowed[data-disabled], .data-disabled\:cursor-not-allowed[data-disabled]:where([data-designtools]) {
+  :where([data-designtools]) .data-disabled\:cursor-not-allowed[data-disabled]:not([data-docs-content] *), .data-disabled\:cursor-not-allowed[data-disabled]:where([data-designtools]):not([data-docs-content] *) {
     cursor: not-allowed;
   }
-  :where([data-designtools]) .data-ending-style\:h-0[data-ending-style], .data-ending-style\:h-0[data-ending-style]:where([data-designtools]) {
+  :where([data-designtools]) .data-ending-style\:h-0[data-ending-style]:not([data-docs-content] *), .data-ending-style\:h-0[data-ending-style]:where([data-designtools]):not([data-docs-content] *) {
     height: 0;
   }
-  :where([data-designtools]) .data-ending-style\:-translate-x-full[data-ending-style], .data-ending-style\:-translate-x-full[data-ending-style]:where([data-designtools]) {
+  :where([data-designtools]) .data-ending-style\:-translate-x-full[data-ending-style]:not([data-docs-content] *), .data-ending-style\:-translate-x-full[data-ending-style]:where([data-designtools]):not([data-docs-content] *) {
     --tw-translate-x: -100%;
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
-  :where([data-designtools]) .data-ending-style\:scale-95[data-ending-style], .data-ending-style\:scale-95[data-ending-style]:where([data-designtools]) {
+  :where([data-designtools]) .data-ending-style\:scale-95[data-ending-style]:not([data-docs-content] *), .data-ending-style\:scale-95[data-ending-style]:where([data-designtools]):not([data-docs-content] *) {
     --tw-scale-x: 95%;
     --tw-scale-y: 95%;
     --tw-scale-z: 95%;
     scale: var(--tw-scale-x) var(--tw-scale-y);
   }
-  :where([data-designtools]) .data-ending-style\:scale-\[0\.98\][data-ending-style], .data-ending-style\:scale-\[0\.98\][data-ending-style]:where([data-designtools]) {
+  :where([data-designtools]) .data-ending-style\:scale-\[0\.98\][data-ending-style]:not([data-docs-content] *), .data-ending-style\:scale-\[0\.98\][data-ending-style]:where([data-designtools]):not([data-docs-content] *) {
     scale: .98;
   }
-  :where([data-designtools]) .data-ending-style\:opacity-0[data-ending-style], .data-ending-style\:opacity-0[data-ending-style]:where([data-designtools]) {
+  :where([data-designtools]) .data-ending-style\:opacity-0[data-ending-style]:not([data-docs-content] *), .data-ending-style\:opacity-0[data-ending-style]:where([data-designtools]):not([data-docs-content] *) {
     opacity: 0;
   }
-  :where([data-designtools]) .data-highlighted\:bg-muted[data-highlighted], .data-highlighted\:bg-muted[data-highlighted]:where([data-designtools]), :where([data-designtools]) .data-popup-open\:bg-muted[data-popup-open], .data-popup-open\:bg-muted[data-popup-open]:where([data-designtools]) {
+  :where([data-designtools]) .data-highlighted\:bg-muted[data-highlighted]:not([data-docs-content] *), .data-highlighted\:bg-muted[data-highlighted]:where([data-designtools]):not([data-docs-content] *), :where([data-designtools]) .data-popup-open\:bg-muted[data-popup-open]:not([data-docs-content] *), .data-popup-open\:bg-muted[data-popup-open]:where([data-designtools]):not([data-docs-content] *) {
     background-color: var(--muted, #f4f5f7);
   }
-  :where([data-designtools]) .data-popup-open\:text-canvas-foreground[data-popup-open], .data-popup-open\:text-canvas-foreground[data-popup-open]:where([data-designtools]) {
+  :where([data-designtools]) .data-popup-open\:text-canvas-foreground[data-popup-open]:not([data-docs-content] *), .data-popup-open\:text-canvas-foreground[data-popup-open]:where([data-designtools]):not([data-docs-content] *) {
     color: var(--canvas-foreground, #1c1f26);
   }
-  :where([data-designtools]) .data-starting-style\:h-0[data-starting-style], .data-starting-style\:h-0[data-starting-style]:where([data-designtools]) {
+  :where([data-designtools]) .data-starting-style\:h-0[data-starting-style]:not([data-docs-content] *), .data-starting-style\:h-0[data-starting-style]:where([data-designtools]):not([data-docs-content] *) {
     height: 0;
   }
-  :where([data-designtools]) .data-starting-style\:-translate-x-full[data-starting-style], .data-starting-style\:-translate-x-full[data-starting-style]:where([data-designtools]) {
+  :where([data-designtools]) .data-starting-style\:-translate-x-full[data-starting-style]:not([data-docs-content] *), .data-starting-style\:-translate-x-full[data-starting-style]:where([data-designtools]):not([data-docs-content] *) {
     --tw-translate-x: -100%;
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
-  :where([data-designtools]) .data-starting-style\:scale-95[data-starting-style], .data-starting-style\:scale-95[data-starting-style]:where([data-designtools]) {
+  :where([data-designtools]) .data-starting-style\:scale-95[data-starting-style]:not([data-docs-content] *), .data-starting-style\:scale-95[data-starting-style]:where([data-designtools]):not([data-docs-content] *) {
     --tw-scale-x: 95%;
     --tw-scale-y: 95%;
     --tw-scale-z: 95%;
     scale: var(--tw-scale-x) var(--tw-scale-y);
   }
-  :where([data-designtools]) .data-starting-style\:scale-\[0\.98\][data-starting-style], .data-starting-style\:scale-\[0\.98\][data-starting-style]:where([data-designtools]) {
+  :where([data-designtools]) .data-starting-style\:scale-\[0\.98\][data-starting-style]:not([data-docs-content] *), .data-starting-style\:scale-\[0\.98\][data-starting-style]:where([data-designtools]):not([data-docs-content] *) {
     scale: .98;
   }
-  :where([data-designtools]) .data-starting-style\:opacity-0[data-starting-style], .data-starting-style\:opacity-0[data-starting-style]:where([data-designtools]) {
+  :where([data-designtools]) .data-starting-style\:opacity-0[data-starting-style]:not([data-docs-content] *), .data-starting-style\:opacity-0[data-starting-style]:where([data-designtools]):not([data-docs-content] *) {
     opacity: 0;
   }
-  :where([data-designtools]) .data-unchecked\:invisible[data-unchecked], .data-unchecked\:invisible[data-unchecked]:where([data-designtools]) {
+  :where([data-designtools]) .data-unchecked\:invisible[data-unchecked]:not([data-docs-content] *), .data-unchecked\:invisible[data-unchecked]:where([data-designtools]):not([data-docs-content] *) {
     visibility: hidden;
   }
-  :where([data-designtools]) .data-\[checked\]\:translate-x-4[data-checked], .data-\[checked\]\:translate-x-4[data-checked]:where([data-designtools]) {
+  :where([data-designtools]) .data-\[checked\]\:translate-x-4[data-checked]:not([data-docs-content] *), .data-\[checked\]\:translate-x-4[data-checked]:where([data-designtools]):not([data-docs-content] *) {
     --tw-translate-x: calc(.25rem * 4);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
-  :where([data-designtools]) .data-\[checked\]\:bg-primary[data-checked], .data-\[checked\]\:bg-primary[data-checked]:where([data-designtools]) {
+  :where([data-designtools]) .data-\[checked\]\:bg-primary[data-checked]:not([data-docs-content] *), .data-\[checked\]\:bg-primary[data-checked]:where([data-designtools]):not([data-docs-content] *) {
     background-color: var(--primary, #2b5ce6);
   }
-  :where([data-designtools]) .data-\[highlighted\]\:bg-muted[data-highlighted], .data-\[highlighted\]\:bg-muted[data-highlighted]:where([data-designtools]) {
+  :where([data-designtools]) .data-\[highlighted\]\:bg-muted[data-highlighted]:not([data-docs-content] *), .data-\[highlighted\]\:bg-muted[data-highlighted]:where([data-designtools]):not([data-docs-content] *) {
     background-color: var(--muted, #f4f5f7);
   }
-  :where([data-designtools]) .data-\[pressed\]\:bg-canvas[data-pressed], .data-\[pressed\]\:bg-canvas[data-pressed]:where([data-designtools]) {
+  :where([data-designtools]) .data-\[pressed\]\:bg-canvas[data-pressed]:not([data-docs-content] *), .data-\[pressed\]\:bg-canvas[data-pressed]:where([data-designtools]):not([data-docs-content] *) {
     background-color: var(--canvas, #fff);
   }
-  :where([data-designtools]) .data-\[pressed\]\:font-medium[data-pressed], .data-\[pressed\]\:font-medium[data-pressed]:where([data-designtools]) {
+  :where([data-designtools]) .data-\[pressed\]\:font-medium[data-pressed]:not([data-docs-content] *), .data-\[pressed\]\:font-medium[data-pressed]:where([data-designtools]):not([data-docs-content] *) {
     --tw-font-weight: var(--font-weight-medium, 500);
     font-weight: var(--font-weight-medium, 500);
   }
-  :where([data-designtools]) .data-\[pressed\]\:text-canvas-foreground[data-pressed], .data-\[pressed\]\:text-canvas-foreground[data-pressed]:where([data-designtools]) {
+  :where([data-designtools]) .data-\[pressed\]\:text-canvas-foreground[data-pressed]:not([data-docs-content] *), .data-\[pressed\]\:text-canvas-foreground[data-pressed]:where([data-designtools]):not([data-docs-content] *) {
     color: var(--canvas-foreground, #1c1f26);
   }
-  :where([data-designtools]) .data-\[pressed\]\:shadow-xs[data-pressed], .data-\[pressed\]\:shadow-xs[data-pressed]:where([data-designtools]) {
+  :where([data-designtools]) .data-\[pressed\]\:shadow-xs[data-pressed]:not([data-docs-content] *), .data-\[pressed\]\:shadow-xs[data-pressed]:where([data-designtools]):not([data-docs-content] *) {
     --tw-shadow: var(--shadow-xs, 0 1px 2px 0 color-mix(in srgb, 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a 6%, transparent));
   }
   @supports (color: color-mix(in lab, red, red)) {
-    :where([data-designtools]) .data-\[pressed\]\:shadow-xs[data-pressed], .data-\[pressed\]\:shadow-xs[data-pressed]:where([data-designtools]) {
+    :where([data-designtools]) .data-\[pressed\]\:shadow-xs[data-pressed]:not([data-docs-content] *), .data-\[pressed\]\:shadow-xs[data-pressed]:where([data-designtools]):not([data-docs-content] *) {
       --tw-shadow: var(--shadow-xs, 0 1px 2px 0 color-mix(in oklch, var(--shadow, #0b0d12) 6%, transparent));
     }
   }
-  :where([data-designtools]) .data-\[pressed\]\:shadow-xs[data-pressed], .data-\[pressed\]\:shadow-xs[data-pressed]:where([data-designtools]) {
+  :where([data-designtools]) .data-\[pressed\]\:shadow-xs[data-pressed]:not([data-docs-content] *), .data-\[pressed\]\:shadow-xs[data-pressed]:where([data-designtools]):not([data-docs-content] *) {
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   @media (prefers-reduced-motion: reduce) {
-    :where([data-designtools]) .motion-reduce\:transition-none, .motion-reduce\:transition-none:where([data-designtools]) {
+    :where([data-designtools]) .motion-reduce\:transition-none:not([data-docs-content] *), .motion-reduce\:transition-none:where([data-designtools]):not([data-docs-content] *) {
       transition-property: none;
     }
   }
   @media (min-width: 40rem) {
-    :where([data-designtools]) .sm\:h-20, .sm\:h-20:where([data-designtools]) {
+    :where([data-designtools]) .sm\:h-20:not([data-docs-content] *), .sm\:h-20:where([data-designtools]):not([data-docs-content] *) {
       height: 5rem;
     }
-    :where([data-designtools]) .sm\:grid-cols-2, .sm\:grid-cols-2:where([data-designtools]) {
+    :where([data-designtools]) .sm\:grid-cols-2:not([data-docs-content] *), .sm\:grid-cols-2:where([data-designtools]):not([data-docs-content] *) {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
-    :where([data-designtools]) .sm\:grid-cols-3, .sm\:grid-cols-3:where([data-designtools]) {
+    :where([data-designtools]) .sm\:grid-cols-3:not([data-docs-content] *), .sm\:grid-cols-3:where([data-designtools]):not([data-docs-content] *) {
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
-    :where([data-designtools]) .sm\:grid-cols-4, .sm\:grid-cols-4:where([data-designtools]) {
+    :where([data-designtools]) .sm\:grid-cols-4:not([data-docs-content] *), .sm\:grid-cols-4:where([data-designtools]):not([data-docs-content] *) {
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
-    :where([data-designtools]) .sm\:grid-cols-\[4rem_minmax\(0\,1fr\)\], .sm\:grid-cols-\[4rem_minmax\(0\,1fr\)\]:where([data-designtools]) {
+    :where([data-designtools]) .sm\:grid-cols-\[4rem_minmax\(0\,1fr\)\]:not([data-docs-content] *), .sm\:grid-cols-\[4rem_minmax\(0\,1fr\)\]:where([data-designtools]):not([data-docs-content] *) {
       grid-template-columns: 4rem minmax(0, 1fr);
     }
-    :where([data-designtools]) .sm\:grid-cols-\[4rem_minmax\(0\,1fr\)_auto\], .sm\:grid-cols-\[4rem_minmax\(0\,1fr\)_auto\]:where([data-designtools]) {
-      grid-template-columns: 4rem minmax(0, 1fr) auto;
-    }
-    :where([data-designtools]) .sm\:flex-row, .sm\:flex-row:where([data-designtools]) {
-      flex-direction: row;
-    }
-    :where([data-designtools]) .sm\:items-center, .sm\:items-center:where([data-designtools]) {
-      align-items: center;
-    }
-    :where([data-designtools]) .sm\:items-end, .sm\:items-end:where([data-designtools]) {
+    :where([data-designtools]) .sm\:items-end:not([data-docs-content] *), .sm\:items-end:where([data-designtools]):not([data-docs-content] *) {
       align-items: flex-end;
     }
-    :where([data-designtools]) .sm\:gap-6, .sm\:gap-6:where([data-designtools]) {
-      gap: 1.5rem;
-    }
-    :where([data-designtools]) .sm\:p-6, .sm\:p-6:where([data-designtools]) {
+    :where([data-designtools]) .sm\:p-6:not([data-docs-content] *), .sm\:p-6:where([data-designtools]):not([data-docs-content] *) {
       padding: 1.5rem;
     }
-    :where([data-designtools]) .sm\:p-10, .sm\:p-10:where([data-designtools]) {
+    :where([data-designtools]) .sm\:p-10:not([data-docs-content] *), .sm\:p-10:where([data-designtools]):not([data-docs-content] *) {
       padding: 2.5rem;
     }
-    :where([data-designtools]) .sm\:px-8, .sm\:px-8:where([data-designtools]) {
+    :where([data-designtools]) .sm\:px-8:not([data-docs-content] *), .sm\:px-8:where([data-designtools]):not([data-docs-content] *) {
       padding-inline: 2rem;
     }
-    :where([data-designtools]) .sm\:text-right, .sm\:text-right:where([data-designtools]) {
+    :where([data-designtools]) .sm\:text-right:not([data-docs-content] *), .sm\:text-right:where([data-designtools]):not([data-docs-content] *) {
       text-align: right;
     }
-    :where([data-designtools]) .sm\:not-first\:border-t-0:not(:first-child), .sm\:not-first\:border-t-0:not(:first-child):where([data-designtools]) {
-      border-top-style: var(--tw-border-style);
-      border-top-width: 0;
-    }
-    :where([data-designtools]) .sm\:not-first\:border-l:not(:first-child), .sm\:not-first\:border-l:not(:first-child):where([data-designtools]) {
-      border-left-style: var(--tw-border-style);
-      border-left-width: 1px;
-    }
   }
   @media (min-width: 48rem) {
-    :where([data-designtools]) .md\:col-span-1, .md\:col-span-1:where([data-designtools]) {
+    :where([data-designtools]) .md\:col-span-1:not([data-docs-content] *), .md\:col-span-1:where([data-designtools]):not([data-docs-content] *) {
       grid-column: span 1 / span 1;
     }
-    :where([data-designtools]) .md\:col-start-4, .md\:col-start-4:where([data-designtools]) {
+    :where([data-designtools]) .md\:col-start-4:not([data-docs-content] *), .md\:col-start-4:where([data-designtools]):not([data-docs-content] *) {
       grid-column-start: 4;
     }
-    :where([data-designtools]) .md\:block, .md\:block:where([data-designtools]) {
+    :where([data-designtools]) .md\:block:not([data-docs-content] *), .md\:block:where([data-designtools]):not([data-docs-content] *) {
       display: block;
     }
-    :where([data-designtools]) .md\:grid, .md\:grid:where([data-designtools]) {
+    :where([data-designtools]) .md\:grid:not([data-docs-content] *), .md\:grid:where([data-designtools]):not([data-docs-content] *) {
       display: grid;
     }
-    :where([data-designtools]) .md\:hidden, .md\:hidden:where([data-designtools]) {
+    :where([data-designtools]) .md\:hidden:not([data-docs-content] *), .md\:hidden:where([data-designtools]):not([data-docs-content] *) {
       display: none;
     }
-    :where([data-designtools]) .md\:grid-cols-2, .md\:grid-cols-2:where([data-designtools]) {
+    :where([data-designtools]) .md\:grid-cols-2:not([data-docs-content] *), .md\:grid-cols-2:where([data-designtools]):not([data-docs-content] *) {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
-    :where([data-designtools]) .md\:grid-cols-\[11rem_minmax\(0\,1fr\)\], .md\:grid-cols-\[11rem_minmax\(0\,1fr\)\]:where([data-designtools]) {
+    :where([data-designtools]) .md\:grid-cols-\[9rem_repeat\(var\(--modes\)\,minmax\(0\,1fr\)\)\]:not([data-docs-content] *), .md\:grid-cols-\[9rem_repeat\(var\(--modes\)\,minmax\(0\,1fr\)\)\]:where([data-designtools]):not([data-docs-content] *) {
+      grid-template-columns: 9rem repeat(var(--modes),minmax(0,1fr));
+    }
+    :where([data-designtools]) .md\:grid-cols-\[11rem_minmax\(0\,1fr\)\]:not([data-docs-content] *), .md\:grid-cols-\[11rem_minmax\(0\,1fr\)\]:where([data-designtools]):not([data-docs-content] *) {
       grid-template-columns: 11rem minmax(0, 1fr);
     }
-    :where([data-designtools]) .md\:grid-cols-\[12rem_minmax\(0\,1fr\)\], .md\:grid-cols-\[12rem_minmax\(0\,1fr\)\]:where([data-designtools]) {
+    :where([data-designtools]) .md\:grid-cols-\[12rem_minmax\(0\,1fr\)\]:not([data-docs-content] *), .md\:grid-cols-\[12rem_minmax\(0\,1fr\)\]:where([data-designtools]):not([data-docs-content] *) {
       grid-template-columns: 12rem minmax(0, 1fr);
     }
-    :where([data-designtools]) .md\:grid-cols-\[minmax\(9rem\,0\.9fr\)_minmax\(0\,1\.6fr\)_minmax\(5rem\,0\.6fr\)_1\.25rem\], .md\:grid-cols-\[minmax\(9rem\,0\.9fr\)_minmax\(0\,1\.6fr\)_minmax\(5rem\,0\.6fr\)_1\.25rem\]:where([data-designtools]) {
+    :where([data-designtools]) .md\:grid-cols-\[minmax\(9rem\,0\.9fr\)_minmax\(0\,1\.6fr\)_minmax\(5rem\,0\.6fr\)_1\.25rem\]:not([data-docs-content] *), .md\:grid-cols-\[minmax\(9rem\,0\.9fr\)_minmax\(0\,1\.6fr\)_minmax\(5rem\,0\.6fr\)_1\.25rem\]:where([data-designtools]):not([data-docs-content] *) {
       grid-template-columns: minmax(9rem, .9fr) minmax(0, 1.6fr) minmax(5rem, .6fr) 1.25rem;
     }
-    :where([data-designtools]) .md\:items-center, .md\:items-center:where([data-designtools]) {
+    :where([data-designtools]) .md\:grid-cols-\[minmax\(10rem\,14rem\)_minmax\(0\,1fr\)_minmax\(0\,1\.3fr\)\]:not([data-docs-content] *), .md\:grid-cols-\[minmax\(10rem\,14rem\)_minmax\(0\,1fr\)_minmax\(0\,1\.3fr\)\]:where([data-designtools]):not([data-docs-content] *) {
+      grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr) minmax(0, 1.3fr);
+    }
+    :where([data-designtools]) .md\:items-baseline:not([data-docs-content] *), .md\:items-baseline:where([data-designtools]):not([data-docs-content] *) {
+      align-items: baseline;
+    }
+    :where([data-designtools]) .md\:items-center:not([data-docs-content] *), .md\:items-center:where([data-designtools]):not([data-docs-content] *) {
       align-items: center;
     }
-    :where([data-designtools]) .md\:gap-6, .md\:gap-6:where([data-designtools]) {
+    :where([data-designtools]) .md\:gap-6:not([data-docs-content] *), .md\:gap-6:where([data-designtools]):not([data-docs-content] *) {
       gap: 1.5rem;
     }
-    :where([data-designtools]) .md\:gap-12, .md\:gap-12:where([data-designtools]) {
+    :where([data-designtools]) .md\:gap-12:not([data-docs-content] *), .md\:gap-12:where([data-designtools]):not([data-docs-content] *) {
       gap: 3rem;
     }
-    :where([data-designtools]) .md\:text-2xl, .md\:text-2xl:where([data-designtools]) {
+    :where([data-designtools]) .md\:text-2xl:not([data-docs-content] *), .md\:text-2xl:where([data-designtools]):not([data-docs-content] *) {
       font-size: var(--text-2xl, 1.5rem);
       line-height: var(--tw-leading, var(--text-2xl--line-height, 2rem));
     }
-    :where([data-designtools]) .md\:text-3xl, .md\:text-3xl:where([data-designtools]) {
+    :where([data-designtools]) .md\:text-3xl:not([data-docs-content] *), .md\:text-3xl:where([data-designtools]):not([data-docs-content] *) {
       font-size: var(--text-3xl, 1.875rem);
       line-height: var(--tw-leading, var(--text-3xl--line-height, 2.25rem));
     }
-    :where([data-designtools]) .md\:text-5xl, .md\:text-5xl:where([data-designtools]) {
+    :where([data-designtools]) .md\:text-5xl:not([data-docs-content] *), .md\:text-5xl:where([data-designtools]):not([data-docs-content] *) {
       font-size: var(--text-5xl, 3rem);
       line-height: var(--tw-leading, var(--text-5xl--line-height, 1));
     }
-    :where([data-designtools]) .md\:text-7xl, .md\:text-7xl:where([data-designtools]) {
+    :where([data-designtools]) .md\:text-7xl:not([data-docs-content] *), .md\:text-7xl:where([data-designtools]):not([data-docs-content] *) {
       font-size: var(--text-7xl, 4.5rem);
       line-height: var(--tw-leading, var(--text-7xl--line-height, 1));
     }
-    :where([data-designtools]) .md\:leading-snug, .md\:leading-snug:where([data-designtools]) {
+    :where([data-designtools]) .md\:leading-snug:not([data-docs-content] *), .md\:leading-snug:where([data-designtools]):not([data-docs-content] *) {
       --tw-leading: var(--leading-snug, 1.375);
       line-height: var(--leading-snug, 1.375);
     }
   }
   @media (min-width: 64rem) {
-    :where([data-designtools]) .lg\:col-span-1, .lg\:col-span-1:where([data-designtools]) {
+    :where([data-designtools]) .lg\:sticky:not([data-docs-content] *), .lg\:sticky:where([data-designtools]):not([data-docs-content] *) {
+      position: sticky;
+    }
+    :where([data-designtools]) .lg\:top-24:not([data-docs-content] *), .lg\:top-24:where([data-designtools]):not([data-docs-content] *) {
+      top: 6rem;
+    }
+    :where([data-designtools]) .lg\:col-span-1:not([data-docs-content] *), .lg\:col-span-1:where([data-designtools]):not([data-docs-content] *) {
       grid-column: span 1 / span 1;
     }
-    :where([data-designtools]) .lg\:row-span-3, .lg\:row-span-3:where([data-designtools]) {
+    :where([data-designtools]) .lg\:row-span-3:not([data-docs-content] *), .lg\:row-span-3:where([data-designtools]):not([data-docs-content] *) {
       grid-row: span 3 / span 3;
     }
-    :where([data-designtools]) .lg\:block, .lg\:block:where([data-designtools]) {
+    :where([data-designtools]) .lg\:-mt-8:not([data-docs-content] *), .lg\:-mt-8:where([data-designtools]):not([data-docs-content] *) {
+      margin-top: -2rem;
+    }
+    :where([data-designtools]) .lg\:-mt-14:not([data-docs-content] *), .lg\:-mt-14:where([data-designtools]):not([data-docs-content] *) {
+      margin-top: -3.5rem;
+    }
+    :where([data-designtools]) .lg\:block:not([data-docs-content] *), .lg\:block:where([data-designtools]):not([data-docs-content] *) {
       display: block;
     }
-    :where([data-designtools]) .lg\:grid, .lg\:grid:where([data-designtools]) {
+    :where([data-designtools]) .lg\:grid:not([data-docs-content] *), .lg\:grid:where([data-designtools]):not([data-docs-content] *) {
       display: grid;
     }
-    :where([data-designtools]) .lg\:hidden, .lg\:hidden:where([data-designtools]) {
+    :where([data-designtools]) .lg\:hidden:not([data-docs-content] *), .lg\:hidden:where([data-designtools]):not([data-docs-content] *) {
       display: none;
     }
-    :where([data-designtools]) .lg\:max-h-\[44rem\], .lg\:max-h-\[44rem\]:where([data-designtools]) {
+    :where([data-designtools]) .lg\:max-h-\[44rem\]:not([data-docs-content] *), .lg\:max-h-\[44rem\]:where([data-designtools]):not([data-docs-content] *) {
       max-height: 44rem;
     }
-    :where([data-designtools]) .lg\:grid-cols-1, .lg\:grid-cols-1:where([data-designtools]) {
+    :where([data-designtools]) .lg\:grid-cols-1:not([data-docs-content] *), .lg\:grid-cols-1:where([data-designtools]):not([data-docs-content] *) {
       grid-template-columns: repeat(1, minmax(0, 1fr));
     }
-    :where([data-designtools]) .lg\:grid-cols-2, .lg\:grid-cols-2:where([data-designtools]) {
+    :where([data-designtools]) .lg\:grid-cols-2:not([data-docs-content] *), .lg\:grid-cols-2:where([data-designtools]):not([data-docs-content] *) {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
-    :where([data-designtools]) .lg\:grid-cols-3, .lg\:grid-cols-3:where([data-designtools]) {
+    :where([data-designtools]) .lg\:grid-cols-3:not([data-docs-content] *), .lg\:grid-cols-3:where([data-designtools]):not([data-docs-content] *) {
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
-    :where([data-designtools]) .lg\:grid-cols-4, .lg\:grid-cols-4:where([data-designtools]) {
+    :where([data-designtools]) .lg\:grid-cols-4:not([data-docs-content] *), .lg\:grid-cols-4:where([data-designtools]):not([data-docs-content] *) {
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
-    :where([data-designtools]) .lg\:grid-cols-\[19rem_minmax\(0\,1fr\)\], .lg\:grid-cols-\[19rem_minmax\(0\,1fr\)\]:where([data-designtools]) {
+    :where([data-designtools]) .lg\:grid-cols-\[3rem_minmax\(0\,1fr\)\]:not([data-docs-content] *), .lg\:grid-cols-\[3rem_minmax\(0\,1fr\)\]:where([data-designtools]):not([data-docs-content] *) {
+      grid-template-columns: 3rem minmax(0, 1fr);
+    }
+    :where([data-designtools]) .lg\:grid-cols-\[19rem_minmax\(0\,1fr\)\]:not([data-docs-content] *), .lg\:grid-cols-\[19rem_minmax\(0\,1fr\)\]:where([data-designtools]):not([data-docs-content] *) {
       grid-template-columns: 19rem minmax(0, 1fr);
     }
-    :where([data-designtools]) .lg\:grid-cols-\[minmax\(0\,1fr\)_17rem\], .lg\:grid-cols-\[minmax\(0\,1fr\)_17rem\]:where([data-designtools]) {
+    :where([data-designtools]) .lg\:grid-cols-\[minmax\(0\,1fr\)_17rem\]:not([data-docs-content] *), .lg\:grid-cols-\[minmax\(0\,1fr\)_17rem\]:where([data-designtools]):not([data-docs-content] *) {
       grid-template-columns: minmax(0, 1fr) 17rem;
     }
-    :where([data-designtools]) .lg\:grid-cols-\[minmax\(0\,1fr\)_20rem\], .lg\:grid-cols-\[minmax\(0\,1fr\)_20rem\]:where([data-designtools]) {
+    :where([data-designtools]) .lg\:grid-cols-\[minmax\(0\,1fr\)_20rem\]:not([data-docs-content] *), .lg\:grid-cols-\[minmax\(0\,1fr\)_20rem\]:where([data-designtools]):not([data-docs-content] *) {
       grid-template-columns: minmax(0, 1fr) 20rem;
     }
-    :where([data-designtools]) .lg\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,1\.6fr\)\], .lg\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,1\.6fr\)\]:where([data-designtools]) {
+    :where([data-designtools]) .lg\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,1\.6fr\)\]:not([data-docs-content] *), .lg\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,1\.6fr\)\]:where([data-designtools]):not([data-docs-content] *) {
       grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
     }
-    :where([data-designtools]) .lg\:grid-cols-\[minmax\(0\,2fr\)_minmax\(0\,1fr\)\], .lg\:grid-cols-\[minmax\(0\,2fr\)_minmax\(0\,1fr\)\]:where([data-designtools]) {
+    :where([data-designtools]) .lg\:grid-cols-\[minmax\(0\,2fr\)_minmax\(0\,1fr\)\]:not([data-docs-content] *), .lg\:grid-cols-\[minmax\(0\,2fr\)_minmax\(0\,1fr\)\]:where([data-designtools]):not([data-docs-content] *) {
       grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
     }
-    :where([data-designtools]) .lg\:grid-rows-3, .lg\:grid-rows-3:where([data-designtools]) {
+    :where([data-designtools]) .lg\:grid-rows-3:not([data-docs-content] *), .lg\:grid-rows-3:where([data-designtools]):not([data-docs-content] *) {
       grid-template-rows: repeat(3, minmax(0, 1fr));
     }
-    :where([data-designtools]) .lg\:gap-24, .lg\:gap-24:where([data-designtools]) {
+    :where([data-designtools]) .lg\:gap-24:not([data-docs-content] *), .lg\:gap-24:where([data-designtools]):not([data-docs-content] *) {
       gap: 6rem;
     }
-    :where([data-designtools]) .lg\:overflow-y-auto, .lg\:overflow-y-auto:where([data-designtools]) {
+    :where([data-designtools]) .lg\:self-start:not([data-docs-content] *), .lg\:self-start:where([data-designtools]):not([data-docs-content] *) {
+      align-self: flex-start;
+    }
+    :where([data-designtools]) .lg\:overflow-y-auto:not([data-docs-content] *), .lg\:overflow-y-auto:where([data-designtools]):not([data-docs-content] *) {
       overflow-y: auto;
     }
-    :where([data-designtools]) .lg\:border-t-0, .lg\:border-t-0:where([data-designtools]) {
+    :where([data-designtools]) .lg\:border-t-0:not([data-docs-content] *), .lg\:border-t-0:where([data-designtools]):not([data-docs-content] *) {
       border-top-style: var(--tw-border-style);
       border-top-width: 0;
     }
-    :where([data-designtools]) .lg\:border-l, .lg\:border-l:where([data-designtools]) {
+    :where([data-designtools]) .lg\:border-l:not([data-docs-content] *), .lg\:border-l:where([data-designtools]):not([data-docs-content] *) {
       border-left-style: var(--tw-border-style);
       border-left-width: 1px;
     }
-    :where([data-designtools]) .lg\:px-12, .lg\:px-12:where([data-designtools]) {
+    :where([data-designtools]) .lg\:px-12:not([data-docs-content] *), .lg\:px-12:where([data-designtools]):not([data-docs-content] *) {
       padding-inline: 3rem;
     }
-    :where([data-designtools]) .lg\:pt-20, .lg\:pt-20:where([data-designtools]) {
+    :where([data-designtools]) .lg\:pt-20:not([data-docs-content] *), .lg\:pt-20:where([data-designtools]):not([data-docs-content] *) {
       padding-top: 5rem;
     }
-    :where([data-designtools]) .lg\:pb-16, .lg\:pb-16:where([data-designtools]) {
-      padding-bottom: 4rem;
-    }
   }
   @media (min-width: 80rem) {
-    :where([data-designtools]) .xl\:grid-cols-2, .xl\:grid-cols-2:where([data-designtools]) {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
+    :where([data-designtools]) .xl\:sticky:not([data-docs-content] *), .xl\:sticky:where([data-designtools]):not([data-docs-content] *) {
+      position: sticky;
     }
-    :where([data-designtools]) .xl\:grid-cols-3, .xl\:grid-cols-3:where([data-designtools]) {
+    :where([data-designtools]) .xl\:top-24:not([data-docs-content] *), .xl\:top-24:where([data-designtools]):not([data-docs-content] *) {
+      top: 6rem;
+    }
+    :where([data-designtools]) .xl\:block:not([data-docs-content] *), .xl\:block:where([data-designtools]):not([data-docs-content] *) {
+      display: block;
+    }
+    :where([data-designtools]) .xl\:grid-cols-3:not([data-docs-content] *), .xl\:grid-cols-3:where([data-designtools]):not([data-docs-content] *) {
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
-    :where([data-designtools]) .xl\:grid-cols-\[5rem_minmax\(0\,1fr\)\], .xl\:grid-cols-\[5rem_minmax\(0\,1fr\)\]:where([data-designtools]) {
+    :where([data-designtools]) .xl\:grid-cols-5:not([data-docs-content] *), .xl\:grid-cols-5:where([data-designtools]):not([data-docs-content] *) {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+    :where([data-designtools]) .xl\:grid-cols-\[5rem_minmax\(0\,1fr\)\]:not([data-docs-content] *), .xl\:grid-cols-\[5rem_minmax\(0\,1fr\)\]:where([data-designtools]):not([data-docs-content] *) {
       grid-template-columns: 5rem minmax(0, 1fr);
     }
-    :where([data-designtools]) .xl\:px-20, .xl\:px-20:where([data-designtools]) {
+    :where([data-designtools]) .xl\:grid-cols-\[15rem_minmax\(0\,1fr\)\]:not([data-docs-content] *), .xl\:grid-cols-\[15rem_minmax\(0\,1fr\)\]:where([data-designtools]):not([data-docs-content] *) {
+      grid-template-columns: 15rem minmax(0, 1fr);
+    }
+    :where([data-designtools]) .xl\:self-start:not([data-docs-content] *), .xl\:self-start:where([data-designtools]):not([data-docs-content] *) {
+      align-self: flex-start;
+    }
+    :where([data-designtools]) .xl\:px-20:not([data-docs-content] *), .xl\:px-20:where([data-designtools]):not([data-docs-content] *) {
       padding-inline: 5rem;
     }
+    :where([data-designtools]) .xl\:pr-2:not([data-docs-content] *), .xl\:pr-2:where([data-designtools]):not([data-docs-content] *) {
+      padding-right: .5rem;
+    }
   }
   @media (min-width: 96rem) {
-    :where([data-designtools]) .\32 xl\:block, .\32 xl\:block:where([data-designtools]) {
+    :where([data-designtools]) .\32 xl\:block:not([data-docs-content] *), .\32 xl\:block:where([data-designtools]):not([data-docs-content] *) {
       display: block;
     }
   }
   @media (pointer: coarse) {
-    :where([data-designtools]) .pointer-coarse\:hidden, .pointer-coarse\:hidden:where([data-designtools]) {
+    :where([data-designtools]) .pointer-coarse\:hidden:not([data-docs-content] *), .pointer-coarse\:hidden:where([data-designtools]):not([data-docs-content] *) {
       display: none;
     }
   }
-  :where([data-designtools]) .\[\&_code\]\:bg-transparent code, .\[\&_code\]\:bg-transparent code:where([data-designtools]) {
+  :where([data-designtools]) .\[\&_\*\]\:text-canvas\/80 *:not([data-docs-content] *), .\[\&_\*\]\:text-canvas\/80 *:where([data-designtools]):not([data-docs-content] *) {
+    color: var(--canvas, #fff);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    :where([data-designtools]) .\[\&_\*\]\:text-canvas\/80 *:not([data-docs-content] *), .\[\&_\*\]\:text-canvas\/80 *:where([data-designtools]):not([data-docs-content] *) {
+      color: color-mix(in oklab, var(--canvas, #fff) 80%, transparent);
+    }
+  }
+  :where([data-designtools]) .\[\&_code\]\:bg-transparent code:not([data-docs-content] *), .\[\&_code\]\:bg-transparent code:where([data-designtools]):not([data-docs-content] *) {
     background-color: #0000;
   }
-  :where([data-designtools]) .\[\&_code\]\:p-0 code, .\[\&_code\]\:p-0 code:where([data-designtools]) {
+  :where([data-designtools]) .\[\&_code\]\:p-0 code:not([data-docs-content] *), .\[\&_code\]\:p-0 code:where([data-designtools]):not([data-docs-content] *) {
     padding: 0;
   }
-  :where([data-designtools]) .\[\&_code\]\:text-\[0\.875em\] code, .\[\&_code\]\:text-\[0\.875em\] code:where([data-designtools]) {
+  :where([data-designtools]) .\[\&_code\]\:text-\[0\.875em\] code:not([data-docs-content] *), .\[\&_code\]\:text-\[0\.875em\] code:where([data-designtools]):not([data-docs-content] *) {
     font-size: .875em;
   }
-  :where([data-designtools]) .\[\&_pre\]\:break-words pre, .\[\&_pre\]\:break-words pre:where([data-designtools]) {
+  :where([data-designtools]) .\[\&_img\]\:h-8 img:not([data-docs-content] *), .\[\&_img\]\:h-8 img:where([data-designtools]):not([data-docs-content] *) {
+    height: 2rem;
+  }
+  :where([data-designtools]) .\[\&_pre\]\:break-words pre:not([data-docs-content] *), .\[\&_pre\]\:break-words pre:where([data-designtools]):not([data-docs-content] *) {
     overflow-wrap: break-word;
   }
-  :where([data-designtools]) .\[\&_pre\]\:whitespace-pre-wrap pre, .\[\&_pre\]\:whitespace-pre-wrap pre:where([data-designtools]) {
+  :where([data-designtools]) .\[\&_pre\]\:whitespace-pre-wrap pre:not([data-docs-content] *), .\[\&_pre\]\:whitespace-pre-wrap pre:where([data-designtools]):not([data-docs-content] *) {
     white-space: pre-wrap;
   }
-  :where([data-designtools]) .\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker, .\[\&\:\:-webkit-details-marker\]\:hidden:where([data-designtools])::-webkit-details-marker {
+  :where([data-designtools]) .\[\&_svg\]\:h-8 svg:not([data-docs-content] *), .\[\&_svg\]\:h-8 svg:where([data-designtools]):not([data-docs-content] *) {
+    height: 2rem;
+  }
+  :where([data-designtools]) .\[\&\:\:-webkit-details-marker\]\:hidden:not([data-docs-content] *)::-webkit-details-marker, .\[\&\:\:-webkit-details-marker\]\:hidden:where([data-designtools]):not([data-docs-content] *)::-webkit-details-marker {
     display: none;
   }
-  :where([data-designtools]) .\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button, .\[\&\:\:-webkit-inner-spin-button\]\:appearance-none:where([data-designtools])::-webkit-inner-spin-button {
+  :where([data-designtools]) .\[\&\:\:-webkit-inner-spin-button\]\:appearance-none:not([data-docs-content] *)::-webkit-inner-spin-button, .\[\&\:\:-webkit-inner-spin-button\]\:appearance-none:where([data-designtools]):not([data-docs-content] *)::-webkit-inner-spin-button {
     appearance: none;
   }
 }
@@ -3179,6 +3380,12 @@
   inherits: false
 }
+@property --tw-space-x-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
 @property --tw-divide-y-reverse {
   syntax: "*";
   inherits: false;