@designtools/docs 0.0.0-stage → 0.1.0

package/dist/styles.css

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