@designtools/docs 0.0.0-stage → 0.2.0

package/dist/styles.css

@@ -0,0 +1,3708 @@
+/*! 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]) *: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;
+      --tw-rotate-x: initial;
+      --tw-rotate-y: initial;
+      --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;
+      --tw-gradient-from: #0000;
+      --tw-gradient-via: #0000;
+      --tw-gradient-to: #0000;
+      --tw-gradient-stops: initial;
+      --tw-gradient-via-stops: initial;
+      --tw-gradient-from-position: 0%;
+      --tw-gradient-via-position: 50%;
+      --tw-gradient-to-position: 100%;
+      --tw-leading: initial;
+      --tw-font-weight: initial;
+      --tw-tracking: initial;
+      --tw-ordinal: initial;
+      --tw-slashed-zero: initial;
+      --tw-numeric-figure: initial;
+      --tw-numeric-spacing: initial;
+      --tw-numeric-fraction: initial;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-outline-style: solid;
+      --tw-blur: initial;
+      --tw-brightness: initial;
+      --tw-contrast: initial;
+      --tw-grayscale: initial;
+      --tw-hue-rotate: initial;
+      --tw-invert: initial;
+      --tw-opacity: initial;
+      --tw-saturate: initial;
+      --tw-sepia: initial;
+      --tw-drop-shadow: initial;
+      --tw-drop-shadow-color: initial;
+      --tw-drop-shadow-alpha: 100%;
+      --tw-drop-shadow-size: initial;
+      --tw-backdrop-blur: initial;
+      --tw-backdrop-brightness: initial;
+      --tw-backdrop-contrast: initial;
+      --tw-backdrop-grayscale: initial;
+      --tw-backdrop-hue-rotate: initial;
+      --tw-backdrop-invert: initial;
+      --tw-backdrop-opacity: initial;
+      --tw-backdrop-saturate: initial;
+      --tw-backdrop-sepia: initial;
+      --tw-duration: initial;
+      --tw-ease: initial;
+      --tw-content: "";
+      --tw-scale-x: 1;
+      --tw-scale-y: 1;
+      --tw-scale-z: 1;
+    }
+  }
+}
+
+@layer theme;
+
+@layer base {
+  :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]) :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;
+    padding: 0;
+  }
+
+  :where([data-designtools]) {
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    line-height: 1.5;
+    font-family: var(--docs-font-sans, var(--font-sans, ui-sans-serif, system-ui, sans-serif));
+    font-feature-settings: normal;
+    font-variation-settings: normal;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  :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]):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: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:not([data-docs-content] *), a:where([data-designtools]):not([data-docs-content] *) {
+    color: inherit;
+    -webkit-text-decoration: inherit;
+    -webkit-text-decoration: inherit;
+    -webkit-text-decoration: inherit;
+    text-decoration: inherit;
+  }
+
+  :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: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:not([data-docs-content] *), small:where([data-designtools]):not([data-docs-content] *) {
+    font-size: 80%;
+  }
+
+  :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:not([data-docs-content] *), sub:where([data-designtools]):not([data-docs-content] *) {
+    bottom: -.25em;
+  }
+
+  :where([data-designtools]) sup:not([data-docs-content] *), sup:where([data-designtools]):not([data-docs-content] *) {
+    top: -.5em;
+  }
+
+  :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)):not([data-docs-content] *), :-moz-focusring:where(:not(iframe)):where([data-designtools]):not([data-docs-content] *) {
+    outline: auto;
+  }
+
+  :where([data-designtools]) progress:not([data-docs-content] *), progress:where([data-designtools]):not([data-docs-content] *) {
+    vertical-align: baseline;
+  }
+
+  :where([data-designtools]) summary:not([data-docs-content] *), summary:where([data-designtools]):not([data-docs-content] *) {
+    display: list-item;
+  }
+
+  :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: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: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: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;
+    letter-spacing: inherit;
+    color: inherit;
+    opacity: 1;
+    background-color: #0000;
+    border-radius: 0;
+  }
+
+  :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;
+    letter-spacing: inherit;
+    color: inherit;
+    opacity: 1;
+    background-color: #0000;
+    border-radius: 0;
+  }
+
+  :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: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]) :not([data-docs-content] *)::file-selector-button, :where([data-designtools]):not([data-docs-content] *)::file-selector-button {
+    margin-inline-end: 4px;
+  }
+
+  :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]) :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]) :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:not([data-docs-content] *), textarea:where([data-designtools]):not([data-docs-content] *) {
+    resize: vertical;
+  }
+
+  :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]) :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]) :not([data-docs-content] *)::-webkit-datetime-edit, :where([data-designtools]):not([data-docs-content] *)::-webkit-datetime-edit {
+    display: inline-flex;
+  }
+
+  :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]) :not([data-docs-content] *)::-webkit-datetime-edit, :where([data-designtools]):not([data-docs-content] *)::-webkit-datetime-edit {
+    padding-block: 0;
+  }
+
+  :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]) :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]) :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]) :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]) :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]) :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]) :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]) :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]) :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:not([data-docs-content] *), :-moz-ui-invalid:where([data-designtools]):not([data-docs-content] *) {
+    box-shadow: none;
+  }
+
+  :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]) :not([data-docs-content] *)::file-selector-button, :where([data-designtools]):not([data-docs-content] *)::file-selector-button {
+    appearance: 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]) :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"])):not([data-docs-content] *), [hidden]:where(:not([hidden="until-found"])):where([data-designtools]):not([data-docs-content] *) {
+    display: none !important;
+  }
+
+  [data-designtools] {
+    --dt-size-xs: var(--size-xs, 1rem);
+    --dt-size-sm: var(--size-sm, 1.25rem);
+    --dt-size-md: var(--size-md, 1.5rem);
+    --dt-size-lg: var(--size-lg, 2rem);
+    --dt-size-xl: var(--size-xl, 2.5rem);
+    --dt-size-2xl: var(--size-2xl, 3rem);
+    --dt-size-3xl: var(--size-3xl, 4rem);
+    --dt-duration-fast: var(--duration-fast, .12s);
+    --dt-duration-base: var(--duration-base, .2s);
+    --dt-duration-slow: var(--duration-slow, .32s);
+    --dt-ease-out: var(--ease-out, cubic-bezier(.2, 0, 0, 1));
+    --dt-ease-in: var(--ease-in, cubic-bezier(.4, 0, 1, 1));
+    --dt-ease-in-out: var(--ease-in-out, cubic-bezier(.4, 0, .2, 1));
+    background: var(--canvas, #fff);
+    color: var(--canvas-foreground, #1c1f26);
+  }
+
+  [data-designtools] [data-docs-stage] {
+    font-family: var(--font-sans, inherit);
+    line-height: var(--leading-normal, 1.5);
+  }
+
+  [data-designtools] :is(button:not(:disabled), [role="button"]:not([aria-disabled="true"]), summary) {
+    cursor: pointer;
+  }
+}
+
+@layer components;
+
+@layer utilities {
+  :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:not([data-docs-content] *), .visible:where([data-designtools]):not([data-docs-content] *) {
+    visibility: visible;
+  }
+
+  :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;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    position: absolute;
+    overflow: hidden;
+  }
+
+  :where([data-designtools]) .absolute:not([data-docs-content] *), .absolute:where([data-designtools]):not([data-docs-content] *) {
+    position: absolute;
+  }
+
+  :where([data-designtools]) .fixed:not([data-docs-content] *), .fixed:where([data-designtools]):not([data-docs-content] *) {
+    position: fixed;
+  }
+
+  :where([data-designtools]) .relative:not([data-docs-content] *), .relative:where([data-designtools]):not([data-docs-content] *) {
+    position: relative;
+  }
+
+  :where([data-designtools]) .static:not([data-docs-content] *), .static:where([data-designtools]):not([data-docs-content] *) {
+    position: static;
+  }
+
+  :where([data-designtools]) .sticky:not([data-docs-content] *), .sticky:where([data-designtools]):not([data-docs-content] *) {
+    position: sticky;
+  }
+
+  :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:not([data-docs-content] *), .inset-x-0:where([data-designtools]):not([data-docs-content] *) {
+    inset-inline: 0;
+  }
+
+  :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:not([data-docs-content] *), .inset-y-1:where([data-designtools]):not([data-docs-content] *) {
+    inset-block: .25rem;
+  }
+
+  :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:not([data-docs-content] *), .inset-y-2\.5:where([data-designtools]):not([data-docs-content] *) {
+    inset-block: .625rem;
+  }
+
+  :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:not([data-docs-content] *), .top-1\.5:where([data-designtools]):not([data-docs-content] *) {
+    top: .375rem;
+  }
+
+  :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:not([data-docs-content] *), .top-3:where([data-designtools]):not([data-docs-content] *) {
+    top: .75rem;
+  }
+
+  :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:not([data-docs-content] *), .top-16:where([data-designtools]):not([data-docs-content] *) {
+    top: 4rem;
+  }
+
+  :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:not([data-docs-content] *), .right-5:where([data-designtools]):not([data-docs-content] *) {
+    right: 1.25rem;
+  }
+
+  :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:not([data-docs-content] *), .bottom-0:where([data-designtools]):not([data-docs-content] *) {
+    bottom: 0;
+  }
+
+  :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:not([data-docs-content] *), .-left-px:where([data-designtools]):not([data-docs-content] *) {
+    left: -1px;
+  }
+
+  :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:not([data-docs-content] *), .left-0:where([data-designtools]):not([data-docs-content] *) {
+    left: 0;
+  }
+
+  :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:not([data-docs-content] *), .left-1\/2:where([data-designtools]):not([data-docs-content] *) {
+    left: 50%;
+  }
+
+  :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:not([data-docs-content] *), .left-4:where([data-designtools]):not([data-docs-content] *) {
+    left: 1rem;
+  }
+
+  :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:not([data-docs-content] *), .z-20:where([data-designtools]):not([data-docs-content] *) {
+    z-index: 20;
+  }
+
+  :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:not([data-docs-content] *), .z-50:where([data-designtools]):not([data-docs-content] *) {
+    z-index: 50;
+  }
+
+  :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:not([data-docs-content] *), .col-start-2:where([data-designtools]):not([data-docs-content] *) {
+    grid-column-start: 2;
+  }
+
+  :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:not([data-docs-content] *), .container:where([data-designtools]):not([data-docs-content] *) {
+    width: 100%;
+  }
+
+  @media (min-width: 40rem) {
+    :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:not([data-docs-content] *), .container:where([data-designtools]):not([data-docs-content] *) {
+      max-width: 48rem;
+    }
+  }
+
+  @media (min-width: 64rem) {
+    :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:not([data-docs-content] *), .container:where([data-designtools]):not([data-docs-content] *) {
+      max-width: 80rem;
+    }
+  }
+
+  @media (min-width: 96rem) {
+    :where([data-designtools]) .container:not([data-docs-content] *), .container:where([data-designtools]):not([data-docs-content] *) {
+      max-width: 96rem;
+    }
+  }
+
+  :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:not([data-docs-content] *), .mx-auto:where([data-designtools]):not([data-docs-content] *) {
+    margin-inline: auto;
+  }
+
+  :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:not([data-docs-content] *), .my-1\.5:where([data-designtools]):not([data-docs-content] *) {
+    margin-block: .375rem;
+  }
+
+  :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:not([data-docs-content] *), .-mt-4:where([data-designtools]):not([data-docs-content] *) {
+    margin-top: -1rem;
+  }
+
+  :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:not([data-docs-content] *), .mt-1\.5:where([data-designtools]):not([data-docs-content] *) {
+    margin-top: .375rem;
+  }
+
+  :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-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:not([data-docs-content] *), .-mb-2:where([data-designtools]):not([data-docs-content] *) {
+    margin-bottom: -.5rem;
+  }
+
+  :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-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-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\]:not([data-docs-content] *), .ml-\[1\.1875rem\]:where([data-designtools]):not([data-docs-content] *) {
+    margin-left: 1.1875rem;
+  }
+
+  :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:not([data-docs-content] *), .block:where([data-designtools]):not([data-docs-content] *) {
+    display: block;
+  }
+
+  :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:not([data-docs-content] *), .grid:where([data-designtools]):not([data-docs-content] *) {
+    display: grid;
+  }
+
+  :where([data-designtools]) .hidden:not([data-docs-content] *), .hidden:where([data-designtools]):not([data-docs-content] *) {
+    display: none;
+  }
+
+  :where([data-designtools]) .inline:not([data-docs-content] *), .inline:where([data-designtools]):not([data-docs-content] *) {
+    display: inline;
+  }
+
+  :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:not([data-docs-content] *), .table:where([data-designtools]):not([data-docs-content] *) {
+    display: table;
+  }
+
+  :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-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\):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:not([data-docs-content] *), .size-1\.5:where([data-designtools]):not([data-docs-content] *) {
+    width: .375rem;
+    height: .375rem;
+  }
+
+  :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:not([data-docs-content] *), .size-3:where([data-designtools]):not([data-docs-content] *) {
+    width: .75rem;
+    height: .75rem;
+  }
+
+  :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:not([data-docs-content] *), .size-4:where([data-designtools]):not([data-docs-content] *) {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  :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:not([data-docs-content] *), .size-6:where([data-designtools]):not([data-docs-content] *) {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  :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:not([data-docs-content] *), .size-8:where([data-designtools]):not([data-docs-content] *) {
+    width: 2rem;
+    height: 2rem;
+  }
+
+  :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:not([data-docs-content] *), .size-14:where([data-designtools]):not([data-docs-content] *) {
+    width: 3.5rem;
+    height: 3.5rem;
+  }
+
+  :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:not([data-docs-content] *), .size-full:where([data-designtools]):not([data-docs-content] *) {
+    width: 100%;
+    height: 100%;
+  }
+
+  :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-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:not([data-docs-content] *), .h-0\.5:where([data-designtools]):not([data-docs-content] *) {
+    height: .125rem;
+  }
+
+  :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:not([data-docs-content] *), .h-5:where([data-designtools]):not([data-docs-content] *) {
+    height: 1.25rem;
+  }
+
+  :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:not([data-docs-content] *), .h-7:where([data-designtools]):not([data-docs-content] *) {
+    height: 1.75rem;
+  }
+
+  :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:not([data-docs-content] *), .h-9:where([data-designtools]):not([data-docs-content] *) {
+    height: 2.25rem;
+  }
+
+  :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:not([data-docs-content] *), .h-11:where([data-designtools]):not([data-docs-content] *) {
+    height: 2.75rem;
+  }
+
+  :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:not([data-docs-content] *), .h-16:where([data-designtools]):not([data-docs-content] *) {
+    height: 4rem;
+  }
+
+  :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:not([data-docs-content] *), .h-28:where([data-designtools]):not([data-docs-content] *) {
+    height: 7rem;
+  }
+
+  :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:not([data-docs-content] *), .h-44:where([data-designtools]):not([data-docs-content] *) {
+    height: 11rem;
+  }
+
+  :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:not([data-docs-content] *), .h-fit:where([data-designtools]):not([data-docs-content] *) {
+    height: fit-content;
+  }
+
+  :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:not([data-docs-content] *), .h-px:where([data-designtools]):not([data-docs-content] *) {
+    height: 1px;
+  }
+
+  :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: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\)\]: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: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\):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:not([data-docs-content] *), .min-h-0:where([data-designtools]):not([data-docs-content] *) {
+    min-height: 0;
+  }
+
+  :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-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:not([data-docs-content] *), .min-h-9:where([data-designtools]):not([data-docs-content] *) {
+    min-height: 2.25rem;
+  }
+
+  :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:not([data-docs-content] *), .min-h-12:where([data-designtools]):not([data-docs-content] *) {
+    min-height: 3rem;
+  }
+
+  :where([data-designtools]) .min-h-20:not([data-docs-content] *), .min-h-20:where([data-designtools]):not([data-docs-content] *) {
+    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-40:not([data-docs-content] *), .min-h-40:where([data-designtools]):not([data-docs-content] *) {
+    min-height: 10rem;
+  }
+
+  :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:not([data-docs-content] *), .min-h-64:where([data-designtools]):not([data-docs-content] *) {
+    min-height: 16rem;
+  }
+
+  :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: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\)\]: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:not([data-docs-content] *), .min-h-dvh:where([data-designtools]):not([data-docs-content] *) {
+    min-height: 100dvh;
+  }
+
+  :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\):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:not([data-docs-content] *), .w-0:where([data-designtools]):not([data-docs-content] *) {
+    width: 0;
+  }
+
+  :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:not([data-docs-content] *), .w-9:where([data-designtools]):not([data-docs-content] *) {
+    width: 2.25rem;
+  }
+
+  :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:not([data-docs-content] *), .w-11:where([data-designtools]):not([data-docs-content] *) {
+    width: 2.75rem;
+  }
+
+  :where([data-designtools]) .w-14:not([data-docs-content] *), .w-14:where([data-designtools]):not([data-docs-content] *) {
+    width: 3.5rem;
+  }
+
+  :where([data-designtools]) .w-28:not([data-docs-content] *), .w-28:where([data-designtools]):not([data-docs-content] *) {
+    width: 7rem;
+  }
+
+  :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:not([data-docs-content] *), .w-72:where([data-designtools]):not([data-docs-content] *) {
+    width: 18rem;
+  }
+
+  :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:not([data-docs-content] *), .w-auto:where([data-designtools]):not([data-docs-content] *) {
+    width: auto;
+  }
+
+  :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:not([data-docs-content] *), .w-full:where([data-designtools]):not([data-docs-content] *) {
+    width: 100%;
+  }
+
+  :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:not([data-docs-content] *), .max-w-2xl:where([data-designtools]):not([data-docs-content] *) {
+    max-width: 42rem;
+  }
+
+  :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:not([data-docs-content] *), .max-w-28:where([data-designtools]):not([data-docs-content] *) {
+    max-width: 7rem;
+  }
+
+  :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\]:not([data-docs-content] *), .max-w-\[90rem\]:where([data-designtools]):not([data-docs-content] *) {
+    max-width: 90rem;
+  }
+
+  :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:not([data-docs-content] *), .max-w-md:where([data-designtools]):not([data-docs-content] *) {
+    max-width: 28rem;
+  }
+
+  :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:not([data-docs-content] *), .max-w-xl:where([data-designtools]):not([data-docs-content] *) {
+    max-width: 36rem;
+  }
+
+  :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:not([data-docs-content] *), .min-w-0:where([data-designtools]):not([data-docs-content] *) {
+    min-width: 0;
+  }
+
+  :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\]:not([data-docs-content] *), .min-w-\[32rem\]:where([data-designtools]):not([data-docs-content] *) {
+    min-width: 32rem;
+  }
+
+  :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-\[40rem\]:not([data-docs-content] *), .min-w-\[40rem\]:where([data-designtools]):not([data-docs-content] *) {
+    min-width: 40rem;
+  }
+
+  :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:not([data-docs-content] *), .min-w-fit:where([data-designtools]):not([data-docs-content] *) {
+    min-width: fit-content;
+  }
+
+  :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:not([data-docs-content] *), .shrink-0:where([data-designtools]):not([data-docs-content] *) {
+    flex-shrink: 0;
+  }
+
+  :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: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: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: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:not([data-docs-content] *), .animate-spin:where([data-designtools]):not([data-docs-content] *) {
+    animation: 1s linear infinite spin;
+  }
+
+  :where([data-designtools]) .cursor-pointer:not([data-docs-content] *), .cursor-pointer:where([data-designtools]):not([data-docs-content] *) {
+    cursor: pointer;
+  }
+
+  :where([data-designtools]) .resize:not([data-docs-content] *), .resize:where([data-designtools]):not([data-docs-content] *) {
+    resize: both;
+  }
+
+  :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:not([data-docs-content] *), .resize-y:where([data-designtools]):not([data-docs-content] *) {
+    resize: vertical;
+  }
+
+  :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:not([data-docs-content] *), .list-disc:where([data-designtools]):not([data-docs-content] *) {
+    list-style-type: disc;
+  }
+
+  :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\]:not([data-docs-content] *), .\[appearance\:textfield\]:where([data-designtools]):not([data-docs-content] *) {
+    appearance: textfield;
+  }
+
+  :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:not([data-docs-content] *), .grid-flow-col:where([data-designtools]):not([data-docs-content] *) {
+    grid-auto-flow: column;
+  }
+
+  :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: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: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\]: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\]: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\]: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\)\]: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-\[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\]: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\)\]: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\]: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:not([data-docs-content] *), .flex-col:where([data-designtools]):not([data-docs-content] *) {
+    flex-direction: column;
+  }
+
+  :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:not([data-docs-content] *), .flex-wrap:where([data-designtools]):not([data-docs-content] *) {
+    flex-wrap: wrap;
+  }
+
+  :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:not([data-docs-content] *), .items-center:where([data-designtools]):not([data-docs-content] *) {
+    align-items: center;
+  }
+
+  :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:not([data-docs-content] *), .items-start:where([data-designtools]):not([data-docs-content] *) {
+    align-items: flex-start;
+  }
+
+  :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:not([data-docs-content] *), .justify-between:where([data-designtools]):not([data-docs-content] *) {
+    justify-content: space-between;
+  }
+
+  :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:not([data-docs-content] *), .gap-0\.5:where([data-designtools]):not([data-docs-content] *) {
+    gap: .125rem;
+  }
+
+  :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:not([data-docs-content] *), .gap-1\.5:where([data-designtools]):not([data-docs-content] *) {
+    gap: .375rem;
+  }
+
+  :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:not([data-docs-content] *), .gap-2\.5:where([data-designtools]):not([data-docs-content] *) {
+    gap: .625rem;
+  }
+
+  :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:not([data-docs-content] *), .gap-4:where([data-designtools]):not([data-docs-content] *) {
+    gap: 1rem;
+  }
+
+  :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:not([data-docs-content] *), .gap-6:where([data-designtools]):not([data-docs-content] *) {
+    gap: 1.5rem;
+  }
+
+  :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:not([data-docs-content] *), .gap-8:where([data-designtools]):not([data-docs-content] *) {
+    gap: 2rem;
+  }
+
+  :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:not([data-docs-content] *), .gap-12:where([data-designtools]):not([data-docs-content] *) {
+    gap: 3rem;
+  }
+
+  :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:not([data-docs-content] *), .gap-16:where([data-designtools]):not([data-docs-content] *) {
+    gap: 4rem;
+  }
+
+  :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-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:not([data-docs-content] *), .gap-x-4:where([data-designtools]):not([data-docs-content] *) {
+    column-gap: 1rem;
+  }
+
+  :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:not([data-docs-content] *), .gap-x-8:where([data-designtools]):not([data-docs-content] *) {
+    column-gap: 2rem;
+  }
+
+  :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:not([data-docs-content] *), .gap-x-12:where([data-designtools]):not([data-docs-content] *) {
+    column-gap: 3rem;
+  }
+
+  :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:not([data-docs-content] *), .gap-y-1\.5:where([data-designtools]):not([data-docs-content] *) {
+    row-gap: .375rem;
+  }
+
+  :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:not([data-docs-content] *), .gap-y-3:where([data-designtools]):not([data-docs-content] *) {
+    row-gap: .75rem;
+  }
+
+  :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:not([data-docs-content] *), .gap-y-5:where([data-designtools]):not([data-docs-content] *) {
+    row-gap: 1.25rem;
+  }
+
+  :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:not([data-docs-content] *), .gap-y-8:where([data-designtools]):not([data-docs-content] *) {
+    row-gap: 2rem;
+  }
+
+  :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)):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);
+    border-top-width: calc(1px * var(--tw-divide-y-reverse));
+    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+  }
+
+  :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-end:not([data-docs-content] *), .self-end:where([data-designtools]):not([data-docs-content] *) {
+    align-self: flex-end;
+  }
+
+  :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: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:not([data-docs-content] *), .overflow-auto:where([data-designtools]):not([data-docs-content] *) {
+    overflow: auto;
+  }
+
+  :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:not([data-docs-content] *), .overflow-x-auto:where([data-designtools]):not([data-docs-content] *) {
+    overflow-x: auto;
+  }
+
+  :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:not([data-docs-content] *), .overflow-y-hidden:where([data-designtools]):not([data-docs-content] *) {
+    overflow-y: hidden;
+  }
+
+  :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:not([data-docs-content] *), .rounded:where([data-designtools]):not([data-docs-content] *) {
+    border-radius: .25rem;
+  }
+
+  :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:not([data-docs-content] *), .rounded-full:where([data-designtools]):not([data-docs-content] *) {
+    border-radius: 3.40282e38px;
+  }
+
+  :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: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: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: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: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: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: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-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: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: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-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: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: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: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\):not([data-docs-content] *), .border-\(--border\):where([data-designtools]):not([data-docs-content] *) {
+    border-color: var(--border);
+  }
+
+  :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: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: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:not([data-docs-content] *), .border-destructive:where([data-designtools]):not([data-docs-content] *) {
+    border-color: var(--destructive, #c7302f);
+  }
+
+  :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: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: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: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: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: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\)\)\]: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:not([data-docs-content] *), .bg-border:where([data-designtools]):not([data-docs-content] *) {
+    background-color: var(--border, #e2e4e8);
+  }
+
+  :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: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: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: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: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:not([data-docs-content] *), .bg-current:where([data-designtools]):not([data-docs-content] *) {
+    background-color: currentColor;
+  }
+
+  :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: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:not([data-docs-content] *), .bg-input:where([data-designtools]):not([data-docs-content] *) {
+    background-color: var(--input, #8a909b);
+  }
+
+  :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: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: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: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: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: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: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: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:not([data-docs-content] *), .bg-overlay:where([data-designtools]):not([data-docs-content] *) {
+    background-color: var(--overlay, #fff);
+  }
+
+  :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: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: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:not([data-docs-content] *), .bg-success:where([data-designtools]):not([data-docs-content] *) {
+    background-color: var(--success, #23823f);
+  }
+
+  :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:not([data-docs-content] *), .bg-surface:where([data-designtools]):not([data-docs-content] *) {
+    background-color: var(--surface, #fff);
+  }
+
+  :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:not([data-docs-content] *), .bg-warning:where([data-designtools]):not([data-docs-content] *) {
+    background-color: var(--warning, #ed8a3c);
+  }
+
+  :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: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: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: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\)\]: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\)\]: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: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: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: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: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: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\]:not([data-docs-content] *), .\[background-size\:14px_14px\]:where([data-designtools]):not([data-docs-content] *) {
+    background-size: 14px 14px;
+  }
+
+  :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:not([data-docs-content] *), .p-0:where([data-designtools]):not([data-docs-content] *) {
+    padding: 0;
+  }
+
+  :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:not([data-docs-content] *), .p-1:where([data-designtools]):not([data-docs-content] *) {
+    padding: .25rem;
+  }
+
+  :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:not([data-docs-content] *), .p-2:where([data-designtools]):not([data-docs-content] *) {
+    padding: .5rem;
+  }
+
+  :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:not([data-docs-content] *), .p-4:where([data-designtools]):not([data-docs-content] *) {
+    padding: 1rem;
+  }
+
+  :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:not([data-docs-content] *), .p-6:where([data-designtools]):not([data-docs-content] *) {
+    padding: 1.5rem;
+  }
+
+  :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:not([data-docs-content] *), .p-10:where([data-designtools]):not([data-docs-content] *) {
+    padding: 2.5rem;
+  }
+
+  :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:not([data-docs-content] *), .px-1\.5:where([data-designtools]):not([data-docs-content] *) {
+    padding-inline: .375rem;
+  }
+
+  :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:not([data-docs-content] *), .px-2\.5:where([data-designtools]):not([data-docs-content] *) {
+    padding-inline: .625rem;
+  }
+
+  :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:not([data-docs-content] *), .px-4:where([data-designtools]):not([data-docs-content] *) {
+    padding-inline: 1rem;
+  }
+
+  :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:not([data-docs-content] *), .px-6:where([data-designtools]):not([data-docs-content] *) {
+    padding-inline: 1.5rem;
+  }
+
+  :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:not([data-docs-content] *), .py-1:where([data-designtools]):not([data-docs-content] *) {
+    padding-block: .25rem;
+  }
+
+  :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:not([data-docs-content] *), .py-2:where([data-designtools]):not([data-docs-content] *) {
+    padding-block: .5rem;
+  }
+
+  :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:not([data-docs-content] *), .py-3:where([data-designtools]):not([data-docs-content] *) {
+    padding-block: .75rem;
+  }
+
+  :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:not([data-docs-content] *), .py-4:where([data-designtools]):not([data-docs-content] *) {
+    padding-block: 1rem;
+  }
+
+  :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:not([data-docs-content] *), .py-6:where([data-designtools]):not([data-docs-content] *) {
+    padding-block: 1.5rem;
+  }
+
+  :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:not([data-docs-content] *), .pt-0\.5:where([data-designtools]):not([data-docs-content] *) {
+    padding-top: .125rem;
+  }
+
+  :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:not([data-docs-content] *), .pt-1\.5:where([data-designtools]):not([data-docs-content] *) {
+    padding-top: .375rem;
+  }
+
+  :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-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:not([data-docs-content] *), .pt-5:where([data-designtools]):not([data-docs-content] *) {
+    padding-top: 1.25rem;
+  }
+
+  :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:not([data-docs-content] *), .pt-8:where([data-designtools]):not([data-docs-content] *) {
+    padding-top: 2rem;
+  }
+
+  :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:not([data-docs-content] *), .pt-12:where([data-designtools]):not([data-docs-content] *) {
+    padding-top: 3rem;
+  }
+
+  :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:not([data-docs-content] *), .pr-1\.5:where([data-designtools]):not([data-docs-content] *) {
+    padding-right: .375rem;
+  }
+
+  :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:not([data-docs-content] *), .pr-3:where([data-designtools]):not([data-docs-content] *) {
+    padding-right: .75rem;
+  }
+
+  :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-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:not([data-docs-content] *), .pb-1:where([data-designtools]):not([data-docs-content] *) {
+    padding-bottom: .25rem;
+  }
+
+  :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:not([data-docs-content] *), .pb-3:where([data-designtools]):not([data-docs-content] *) {
+    padding-bottom: .75rem;
+  }
+
+  :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-20:not([data-docs-content] *), .pb-20:where([data-designtools]):not([data-docs-content] *) {
+    padding-bottom: 5rem;
+  }
+
+  :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:not([data-docs-content] *), .pl-3:where([data-designtools]):not([data-docs-content] *) {
+    padding-left: .75rem;
+  }
+
+  :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:not([data-docs-content] *), .pl-5:where([data-designtools]):not([data-docs-content] *) {
+    padding-left: 1.25rem;
+  }
+
+  :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:not([data-docs-content] *), .text-center:where([data-designtools]):not([data-docs-content] *) {
+    text-align: center;
+  }
+
+  :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: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\)\)\)\]: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: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: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: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: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: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: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: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: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: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: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: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: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: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\]:not([data-docs-content] *), .text-\[0\.9em\]:where([data-designtools]):not([data-docs-content] *) {
+    font-size: .9em;
+  }
+
+  :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\]:not([data-docs-content] *), .text-\[0\.6875rem\]:where([data-designtools]):not([data-docs-content] *) {
+    font-size: .6875rem;
+  }
+
+  :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: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\]: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\]: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: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: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: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]) .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: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: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: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: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-\[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: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: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: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:not([data-docs-content] *), .break-words:where([data-designtools]):not([data-docs-content] *) {
+    overflow-wrap: break-word;
+  }
+
+  :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:not([data-docs-content] *), .whitespace-nowrap:where([data-designtools]):not([data-docs-content] *) {
+    white-space: nowrap;
+  }
+
+  :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:not([data-docs-content] *), .whitespace-pre-wrap:where([data-designtools]):not([data-docs-content] *) {
+    white-space: pre-wrap;
+  }
+
+  :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\!: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: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: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: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: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: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: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: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: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: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: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: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: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: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: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:not([data-docs-content] *), .capitalize:where([data-designtools]):not([data-docs-content] *) {
+    text-transform: capitalize;
+  }
+
+  :where([data-designtools]) .uppercase:not([data-docs-content] *), .uppercase:where([data-designtools]):not([data-docs-content] *) {
+    text-transform: uppercase;
+  }
+
+  :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:not([data-docs-content] *), .line-through:where([data-designtools]):not([data-docs-content] *) {
+    text-decoration-line: line-through;
+  }
+
+  :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: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-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-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:not([data-docs-content] *), .underline-offset-2:where([data-designtools]):not([data-docs-content] *) {
+    text-underline-offset: 2px;
+  }
+
+  :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\]:not([data-docs-content] *), .underline-offset-\[6px\]:where([data-designtools]):not([data-docs-content] *) {
+    text-underline-offset: 6px;
+  }
+
+  :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:not([data-docs-content] *), .opacity-60:where([data-designtools]):not([data-docs-content] *) {
+    opacity: .6;
+  }
+
+  :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:not([data-docs-content] *), .opacity-75:where([data-designtools]):not([data-docs-content] *) {
+    opacity: .75;
+  }
+
+  :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: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: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: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: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: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: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: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: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: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: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: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: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: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: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: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: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-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, #e2e4e8);
+  }
+
+  :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\/30:not([data-docs-content] *), .ring-current\/30: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:not([data-docs-content] *), .ring-current\/30:where([data-designtools]):not([data-docs-content] *) {
+      --tw-ring-color: color-mix(in oklab, currentcolor 30%, transparent);
+    }
+  }
+
+  :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\)\]:not([data-docs-content] *), .outline-\[var\(--ring\)\]:where([data-designtools]):not([data-docs-content] *) {
+    outline-color: var(--ring);
+  }
+
+  :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: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: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: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\]: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\]: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\]: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: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: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: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\):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\):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\):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\):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: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: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: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\]: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\]:not([data-docs-content] *), .\[counter-reset\:docs-section\]:where([data-designtools]):not([data-docs-content] *) {
+    counter-reset: docs-section;
+  }
+
+  :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]) .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([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) *):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 *):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 *):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 *):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\: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 *):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 *):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 *):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 *):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] *):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: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);
+  }
+
+  @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: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: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: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: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\)\]: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: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: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: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\)\]: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\)\]: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-\[\'\'\]: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\: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:not([data-docs-content] *), .first\:border-t-0:first-child:where([data-designtools]):not([data-docs-content] *) {
+    border-top-style: var(--tw-border-style);
+    border-top-width: 0;
+  }
+
+  :where([data-designtools]) .first\:pt-0:first-child:not([data-docs-content] *), .first\:pt-0:first-child:where([data-designtools]):not([data-docs-content] *) {
+    padding-top: 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: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: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: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: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: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: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: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: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: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: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: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: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: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: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:not([data-docs-content] *), .hover\:decoration-current:hover:where([data-designtools]):not([data-docs-content] *) {
+      text-decoration-color: currentColor;
+    }
+
+    :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\: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: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: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: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: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: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: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: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]) .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: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:not([data-docs-content] *), .disabled\:cursor-wait:disabled:where([data-designtools]):not([data-docs-content] *) {
+    cursor: wait;
+  }
+
+  :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: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"]: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"]: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"]: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"]: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]: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]: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]: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]: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]: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]: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]: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]: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]: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]: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]: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]: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]: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]: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]: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]: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]: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]: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]: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]: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]: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]: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]: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]: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]: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: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:not([data-docs-content] *), .sm\:h-20:where([data-designtools]):not([data-docs-content] *) {
+      height: 5rem;
+    }
+
+    :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: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: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\)\]: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\:items-end:not([data-docs-content] *), .sm\:items-end:where([data-designtools]):not([data-docs-content] *) {
+      align-items: flex-end;
+    }
+
+    :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:not([data-docs-content] *), .sm\:p-10:where([data-designtools]):not([data-docs-content] *) {
+      padding: 2.5rem;
+    }
+
+    :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:not([data-docs-content] *), .sm\:text-right:where([data-designtools]):not([data-docs-content] *) {
+      text-align: right;
+    }
+  }
+
+  @media (min-width: 48rem) {
+    :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:not([data-docs-content] *), .md\:col-start-4:where([data-designtools]):not([data-docs-content] *) {
+      grid-column-start: 4;
+    }
+
+    :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:not([data-docs-content] *), .md\:grid:where([data-designtools]):not([data-docs-content] *) {
+      display: grid;
+    }
+
+    :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: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\)\]: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\)\]: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\]: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\: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:not([data-docs-content] *), .md\:gap-6:where([data-designtools]):not([data-docs-content] *) {
+      gap: 1.5rem;
+    }
+
+    :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: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: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: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: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: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\: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: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\:-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:not([data-docs-content] *), .lg\:grid:where([data-designtools]):not([data-docs-content] *) {
+      display: grid;
+    }
+
+    :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\]: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: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: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: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: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-\[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-\[11rem_minmax\(0\,1fr\)\]:not([data-docs-content] *), .lg\:grid-cols-\[11rem_minmax\(0\,1fr\)\]:where([data-designtools]):not([data-docs-content] *) {
+      grid-template-columns: 11rem 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\]: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\]: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\)\]: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\)\]: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: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:not([data-docs-content] *), .lg\:gap-24:where([data-designtools]):not([data-docs-content] *) {
+      gap: 6rem;
+    }
+
+    :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: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: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:not([data-docs-content] *), .lg\:px-12:where([data-designtools]):not([data-docs-content] *) {
+      padding-inline: 3rem;
+    }
+
+    :where([data-designtools]) .lg\:pt-20:not([data-docs-content] *), .lg\:pt-20:where([data-designtools]):not([data-docs-content] *) {
+      padding-top: 5rem;
+    }
+  }
+
+  @media (min-width: 80rem) {
+    :where([data-designtools]) .xl\:sticky:not([data-docs-content] *), .xl\:sticky:where([data-designtools]):not([data-docs-content] *) {
+      position: sticky;
+    }
+
+    :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-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\: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: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:not([data-docs-content] *), .pointer-coarse\:hidden:where([data-designtools]):not([data-docs-content] *) {
+      display: none;
+    }
+  }
+
+  :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: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:not([data-docs-content] *), .\[\&_code\]\:text-\[0\.875em\] code:where([data-designtools]):not([data-docs-content] *) {
+    font-size: .875em;
+  }
+
+  :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:not([data-docs-content] *), .\[\&_pre\]\:whitespace-pre-wrap pre:where([data-designtools]):not([data-docs-content] *) {
+    white-space: pre-wrap;
+  }
+
+  :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: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;
+  }
+}
+
+@property --tw-translate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --tw-translate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --tw-translate-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --tw-rotate-x {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-rotate-y {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-rotate-z {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-skew-x {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-skew-y {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-space-x-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --tw-divide-y-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+
+@property --tw-gradient-position {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-gradient-from {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+
+@property --tw-gradient-via {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+
+@property --tw-gradient-to {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+
+@property --tw-gradient-stops {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-gradient-via-stops {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-gradient-from-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0%;
+}
+
+@property --tw-gradient-via-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 50%;
+}
+
+@property --tw-gradient-to-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+
+@property --tw-leading {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-tracking {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-ordinal {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-slashed-zero {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-numeric-figure {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-numeric-spacing {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-numeric-fraction {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+
+@property --tw-blur {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-brightness {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-contrast {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-grayscale {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-hue-rotate {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-invert {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-opacity {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-saturate {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-sepia {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-drop-shadow {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-drop-shadow-color {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-drop-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+
+@property --tw-drop-shadow-size {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-blur {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-brightness {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-contrast {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-grayscale {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-hue-rotate {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-invert {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-opacity {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-saturate {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-sepia {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-duration {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-ease {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-content {
+  syntax: "*";
+  inherits: false;
+  initial-value: "";
+}
+
+@property --tw-scale-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+
+@property --tw-scale-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+
+@property --tw-scale-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}