@usefragments/ui 1.3.0 → 1.3.2

package/dist/assets/ui.css

@@ -1,3 +1,1096 @@
+/* @usefragments/ui — default tokens + base (compiled from globals.scss) */
+@layer fui.tokens, fui.base;
+@property --fui-seed-brand {
+  syntax: "<color>";
+  initial-value: #006b57;
+  inherits: true;
+}
+@property --fui-seed-danger {
+  syntax: "<color>";
+  initial-value: #d97066;
+  inherits: true;
+}
+@property --fui-seed-success {
+  syntax: "<color>";
+  initial-value: #7fc9b3;
+  inherits: true;
+}
+@property --fui-seed-warning {
+  syntax: "<color>";
+  initial-value: #e0aa5c;
+  inherits: true;
+}
+@property --fui-seed-info {
+  syntax: "<color>";
+  initial-value: #7fa6c4;
+  inherits: true;
+}
+@property --fui-color-accent {
+  syntax: "<color>";
+  initial-value: #006b57;
+  inherits: true;
+}
+@property --fui-color-accent-hover {
+  syntax: "<color>";
+  initial-value: hsl(169.9771289871, 164.3448630261%, 13.7353127687%);
+  inherits: true;
+}
+@property --fui-color-accent-active {
+  syntax: "<color>";
+  initial-value: hsl(169.8890840621, 209.9337122072%, 10.2857473619%);
+  inherits: true;
+}
+@property --fui-color-danger {
+  syntax: "<color>";
+  initial-value: #d97066;
+  inherits: true;
+}
+@property --fui-color-danger-hover {
+  syntax: "<color>";
+  initial-value: rgb(199.870141707, 96.7054189294, 87.4882051829);
+  inherits: true;
+}
+@property --fui-color-success {
+  syntax: "<color>";
+  initial-value: #7fc9b3;
+  inherits: true;
+}
+@property --fui-color-warning {
+  syntax: "<color>";
+  initial-value: #e0aa5c;
+  inherits: true;
+}
+@property --fui-color-info {
+  syntax: "<color>";
+  initial-value: #7fa6c4;
+  inherits: true;
+}
+@property --fui-color-danger-bg {
+  syntax: "<color>";
+  initial-value: rgba(217, 112, 102, 0.1);
+  inherits: true;
+}
+@property --fui-color-success-bg {
+  syntax: "<color>";
+  initial-value: rgba(127, 201, 179, 0.1);
+  inherits: true;
+}
+@property --fui-color-warning-bg {
+  syntax: "<color>";
+  initial-value: rgba(224, 170, 92, 0.1);
+  inherits: true;
+}
+@property --fui-color-info-bg {
+  syntax: "<color>";
+  initial-value: rgba(127, 166, 196, 0.1);
+  inherits: true;
+}
+@property --fui-color-danger-text {
+  syntax: "<color>";
+  initial-value: rgb(162.7774064935, 63.3790672702, 56.4827894566);
+  inherits: true;
+}
+@property --fui-color-success-text {
+  syntax: "<color>";
+  initial-value: rgb(29.9064810064, 108.5606699289, 89.7163569497);
+  inherits: true;
+}
+@property --fui-color-warning-text {
+  syntax: "<color>";
+  initial-value: hsl(41.194706405, 139.9133245857%, 21.9712967806%);
+  inherits: true;
+}
+@property --fui-color-info-text {
+  syntax: "<color>";
+  initial-value: rgb(63.1782487843, 100.0730830678, 127.5349009142);
+  inherits: true;
+}
+@property --fui-bg-primary {
+  syntax: "<color>";
+  initial-value: #ffffff;
+  inherits: true;
+}
+@property --fui-bg-secondary {
+  syntax: "<color>";
+  initial-value: #f4f4f4;
+  inherits: true;
+}
+@property --fui-bg-tertiary {
+  syntax: "<color>";
+  initial-value: #f4f4f4;
+  inherits: true;
+}
+@property --fui-bg-elevated {
+  syntax: "<color>";
+  initial-value: #ffffff;
+  inherits: true;
+}
+@property --fui-bg-subtle {
+  syntax: "<color>";
+  initial-value: #fafafa;
+  inherits: true;
+}
+@property --fui-bg-hover {
+  syntax: "<color>";
+  initial-value: rgba(0, 0, 0, 0.04);
+  inherits: true;
+}
+@property --fui-bg-active {
+  syntax: "<color>";
+  initial-value: rgba(0, 0, 0, 0.06);
+  inherits: true;
+}
+@property --fui-body-bg {
+  syntax: "<color>";
+  initial-value: #fff;
+  inherits: true;
+}
+@property --fui-main-bg {
+  syntax: "<color>";
+  initial-value: #ffffff;
+  inherits: true;
+}
+@property --fui-text-primary {
+  syntax: "<color>";
+  initial-value: #212121;
+  inherits: true;
+}
+@property --fui-text-secondary {
+  syntax: "<color>";
+  initial-value: rgb(84.468434358, 84.468434358, 84.468434358);
+  inherits: true;
+}
+@property --fui-text-tertiary {
+  syntax: "<color>";
+  initial-value: rgb(86.4227350852, 86.4227350852, 86.4227350852);
+  inherits: true;
+}
+@property --fui-text-inverse {
+  syntax: "<color>";
+  initial-value: #f4f4f4;
+  inherits: true;
+}
+@property --fui-border {
+  syntax: "<color>";
+  initial-value: rgba(0, 0, 0, 0.05);
+  inherits: true;
+}
+@property --fui-border-default {
+  syntax: "<color>";
+  initial-value: rgba(0, 0, 0, 0.05);
+  inherits: true;
+}
+@property --fui-border-strong {
+  syntax: "<color>";
+  initial-value: rgba(0, 0, 0, 0.1);
+  inherits: true;
+}
+@property --fui-focus-ring-color {
+  syntax: "<color>";
+  initial-value: #006b57;
+  inherits: true;
+}
+@property --fui-scrollbar-track {
+  syntax: "<color>";
+  initial-value: #f4f4f4;
+  inherits: true;
+}
+@property --fui-scrollbar-thumb {
+  syntax: "<color>";
+  initial-value: #d1d1d1;
+  inherits: true;
+}
+@property --fui-scrollbar-thumb-hover {
+  syntax: "<color>";
+  initial-value: #b0b0b0;
+  inherits: true;
+}
+@property --fui-space-px {
+  syntax: "<length>";
+  initial-value: 1px;
+  inherits: true;
+}
+@property --fui-space-0-5 {
+  syntax: "<length>";
+  initial-value: 0.15rem;
+  inherits: true;
+}
+@property --fui-space-0-75 {
+  syntax: "<length>";
+  initial-value: 0.215rem;
+  inherits: true;
+}
+@property --fui-space-1 {
+  syntax: "<length>";
+  initial-value: 0.5rem;
+  inherits: true;
+}
+@property --fui-space-2 {
+  syntax: "<length>";
+  initial-value: 1rem;
+  inherits: true;
+}
+@property --fui-space-3 {
+  syntax: "<length>";
+  initial-value: 1.5rem;
+  inherits: true;
+}
+@property --fui-space-4 {
+  syntax: "<length>";
+  initial-value: 2rem;
+  inherits: true;
+}
+@property --fui-space-5 {
+  syntax: "<length>";
+  initial-value: 2.5rem;
+  inherits: true;
+}
+@property --fui-space-6 {
+  syntax: "<length>";
+  initial-value: 3rem;
+  inherits: true;
+}
+@property --fui-space-8 {
+  syntax: "<length>";
+  initial-value: 4rem;
+  inherits: true;
+}
+@property --fui-space-10 {
+  syntax: "<length>";
+  initial-value: 5rem;
+  inherits: true;
+}
+@property --fui-space-12 {
+  syntax: "<length>";
+  initial-value: 6rem;
+  inherits: true;
+}
+@property --fui-radius-sm {
+  syntax: "<length>";
+  initial-value: 0.25rem;
+  inherits: true;
+}
+@property --fui-radius-md {
+  syntax: "<length>";
+  initial-value: 0.429rem;
+  inherits: true;
+}
+@property --fui-radius-lg {
+  syntax: "<length>";
+  initial-value: 0.571rem;
+  inherits: true;
+}
+@property --fui-radius-xl {
+  syntax: "<length>";
+  initial-value: 0.857rem;
+  inherits: true;
+}
+@property --fui-radius-full {
+  syntax: "<length>";
+  initial-value: 9999px;
+  inherits: true;
+}
+@property --fui-button-height-xs {
+  syntax: "<length>";
+  initial-value: 2.2857142857rem;
+  inherits: true;
+}
+@property --fui-button-height-sm {
+  syntax: "<length>";
+  initial-value: 2.2857142857rem;
+  inherits: true;
+}
+@property --fui-button-height-md {
+  syntax: "<length>";
+  initial-value: 2.8571428571rem;
+  inherits: true;
+}
+@property --fui-button-height-lg {
+  syntax: "<length>";
+  initial-value: 3.1428571429rem;
+  inherits: true;
+}
+@property --fui-input-height {
+  syntax: "<length>";
+  initial-value: 2.8571428571rem;
+  inherits: true;
+}
+@property --fui-input-height-sm {
+  syntax: "<length>";
+  initial-value: 2.2857142857rem;
+  inherits: true;
+}
+@property --fui-input-height-lg {
+  syntax: "<length>";
+  initial-value: 3.1428571429rem;
+  inherits: true;
+}
+@property --fui-target-size-min {
+  syntax: "<length>";
+  initial-value: 2.286rem;
+  inherits: true;
+}
+@property --fui-focus-ring-offset {
+  syntax: "<length>";
+  initial-value: 2px;
+  inherits: true;
+}
+@property --fui-focus-ring-width {
+  syntax: "<length>";
+  initial-value: 2px;
+  inherits: true;
+}
+@property --fui-scrollbar-width {
+  syntax: "<length>";
+  initial-value: 8px;
+  inherits: true;
+}
+@property --fui-font-weight-normal {
+  syntax: "<number>";
+  initial-value: 400;
+  inherits: true;
+}
+@property --fui-font-weight-medium {
+  syntax: "<number>";
+  initial-value: 500;
+  inherits: true;
+}
+@property --fui-font-weight-semibold {
+  syntax: "<number>";
+  initial-value: 600;
+  inherits: true;
+}
+@property --fui-font-weight-bold {
+  syntax: "<number>";
+  initial-value: 700;
+  inherits: true;
+}
+@property --fui-line-height-tight {
+  syntax: "<number>";
+  initial-value: 1.25;
+  inherits: true;
+}
+@property --fui-line-height-normal {
+  syntax: "<number>";
+  initial-value: 1.5;
+  inherits: true;
+}
+@property --fui-line-height-relaxed {
+  syntax: "<number>";
+  initial-value: 1.625;
+  inherits: true;
+}
+@property --fui-line-height-display {
+  syntax: "<number>";
+  initial-value: 1.1;
+  inherits: true;
+}
+@property --fui-line-height-prose {
+  syntax: "<number>";
+  initial-value: 1.7;
+  inherits: true;
+}
+@property --fui-font-size-2xs {
+  syntax: "<length>";
+  initial-value: 0.714rem;
+  inherits: true;
+}
+@property --fui-font-size-xs {
+  syntax: "<length>";
+  initial-value: 0.857rem;
+  inherits: true;
+}
+@property --fui-font-size-sm {
+  syntax: "<length>";
+  initial-value: 1rem;
+  inherits: true;
+}
+@property --fui-font-size-base {
+  syntax: "<length>";
+  initial-value: 1rem;
+  inherits: true;
+}
+@property --fui-font-size-md {
+  syntax: "<length>";
+  initial-value: 1.071rem;
+  inherits: true;
+}
+@property --fui-font-size-lg {
+  syntax: "<length>";
+  initial-value: 1.429rem;
+  inherits: true;
+}
+@property --fui-font-size-xl {
+  syntax: "<length>";
+  initial-value: 1.714rem;
+  inherits: true;
+}
+@property --fui-font-size-2xl {
+  syntax: "<length>";
+  initial-value: 2.143rem;
+  inherits: true;
+}
+@property --fui-font-size-3xl {
+  syntax: "<length>";
+  initial-value: 2.571rem;
+  inherits: true;
+}
+@property --fui-font-size-4xl {
+  syntax: "<length>";
+  initial-value: 3.429rem;
+  inherits: true;
+}
+@layer fui.tokens {
+  :root {
+    color-scheme: light dark;
+    font-size: 14px;
+    --fui-base-unit: 7px;
+    --fui-seed-brand: #006b57;
+    --fui-seed-danger: #d97066;
+    --fui-seed-success: #7fc9b3;
+    --fui-seed-warning: #e0aa5c;
+    --fui-seed-info: #7fa6c4;
+    --fui-font-sans: Inter Variable, Inter, -apple-system, BlinkMacSystemFont, Segoe UI, system-ui, sans-serif;
+    --fui-font-mono: JetBrains Mono Variable, JetBrains Mono, ui-monospace, SF Mono, Menlo, monospace;
+    --fui-font-size-2xs: 0.714rem;
+    --fui-font-size-xs: 0.857rem;
+    --fui-font-size-sm: 1rem;
+    --fui-font-size-base: 1rem;
+    --fui-font-size-md: 1.071rem;
+    --fui-font-size-lg: 1.429rem;
+    --fui-font-size-xl: 1.714rem;
+    --fui-font-size-2xl: 2.143rem;
+    --fui-font-size-3xl: 2.571rem;
+    --fui-font-size-4xl: 3.429rem;
+    --fui-font-weight-normal: 400;
+    --fui-font-weight-medium: 500;
+    --fui-font-weight-semibold: 600;
+    --fui-font-weight-bold: 700;
+    --fui-line-height-tight: 1.25;
+    --fui-line-height-normal: 1.5;
+    --fui-line-height-relaxed: 1.625;
+    --fui-line-height-display: 1.1;
+    --fui-line-height-prose: 1.7;
+    --fui-letter-spacing-tight: 0;
+    --fui-letter-spacing-normal: normal;
+    --fui-letter-spacing-display: 0;
+    --fui-letter-spacing-wide: 0.05em;
+    --fui-space-px: 1px;
+    --fui-space-0-5: 0.15rem;
+    --fui-space-0-75: 0.215rem;
+    --fui-space-1: 0.5rem;
+    --fui-space-2: 1rem;
+    --fui-space-3: 1.5rem;
+    --fui-space-4: 2rem;
+    --fui-space-5: 2.5rem;
+    --fui-space-6: 3rem;
+    --fui-space-8: 4rem;
+    --fui-space-10: 5rem;
+    --fui-space-12: 6rem;
+    --fui-radius-sm: 0.25rem;
+    --fui-radius-md: 0.429rem;
+    --fui-radius-lg: 0.571rem;
+    --fui-radius-xl: 0.857rem;
+    --fui-radius-full: 9999px;
+    --fui-transition-fast: 160ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    --fui-transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
+    --fui-color-accent: light-dark(#006b57, #7fc9b3);
+    --fui-color-on-accent: light-dark(#ffffff, #000000);
+    --fui-color-accent-hover: light-dark(
+      hsl(169.9771289871, 164.3448630261%, 13.7353127687%),
+      rgb(111.2334942499, 184.9463823083, 163.3906961391)
+    );
+    --fui-color-accent-active: light-dark(
+      hsl(169.8890840621, 209.9337122072%, 10.2857473619%),
+      rgb(101.8225602578, 175.4300241517, 154.1534611497)
+    );
+    --fui-color-danger: #d97066;
+    --fui-color-danger-hover: rgb(199.870141707, 96.7054189294, 87.4882051829);
+    --fui-color-success: #7fc9b3;
+    --fui-color-warning: #e0aa5c;
+    --fui-color-info: #7fa6c4;
+    --fui-color-danger-bg: light-dark(
+      color-mix(in srgb, var(--fui-color-danger) 12%, white),
+      color-mix(in srgb, var(--fui-color-danger) 24%, black)
+    );
+    --fui-color-success-bg: light-dark(
+      color-mix(in srgb, var(--fui-color-success) 12%, white),
+      color-mix(in srgb, var(--fui-color-success) 24%, black)
+    );
+    --fui-color-warning-bg: light-dark(
+      color-mix(in srgb, var(--fui-color-warning) 12%, white),
+      color-mix(in srgb, var(--fui-color-warning) 24%, black)
+    );
+    --fui-color-info-bg: light-dark(
+      color-mix(in srgb, var(--fui-color-info) 12%, white),
+      color-mix(in srgb, var(--fui-color-info) 24%, black)
+    );
+    --fui-color-danger-text: light-dark(
+      color-mix(in srgb, var(--fui-color-danger) 72%, black),
+      color-mix(in srgb, var(--fui-color-danger) 78%, white 22%)
+    );
+    --fui-color-success-text: light-dark(
+      color-mix(in srgb, var(--fui-color-success) 72%, black),
+      color-mix(in srgb, var(--fui-color-success) 78%, white 22%)
+    );
+    --fui-color-warning-text: light-dark(
+      color-mix(in srgb, var(--fui-color-warning) 72%, black),
+      color-mix(in srgb, var(--fui-color-warning) 78%, white 22%)
+    );
+    --fui-color-info-text: light-dark(
+      color-mix(in srgb, var(--fui-color-info) 72%, black),
+      color-mix(in srgb, var(--fui-color-info) 78%, white 22%)
+    );
+    --fui-color-danger-border: light-dark(
+      color-mix(in srgb, var(--fui-color-danger) 32%, transparent),
+      color-mix(in srgb, var(--fui-color-danger-text) 30%, transparent)
+    );
+    --fui-color-success-border: light-dark(
+      color-mix(in srgb, var(--fui-color-success) 32%, transparent),
+      color-mix(in srgb, var(--fui-color-success-text) 28%, transparent)
+    );
+    --fui-color-warning-border: light-dark(
+      color-mix(in srgb, var(--fui-color-warning) 32%, transparent),
+      color-mix(in srgb, var(--fui-color-warning-text) 28%, transparent)
+    );
+    --fui-color-info-border: light-dark(
+      color-mix(in srgb, var(--fui-color-info) 32%, transparent),
+      color-mix(in srgb, var(--fui-color-info-text) 30%, transparent)
+    );
+    --fui-backdrop: light-dark(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8));
+    --fui-bg-primary: light-dark(#ffffff, #212121);
+    --fui-bg-secondary: light-dark(#f4f4f4, #171717);
+    --fui-bg-tertiary: light-dark(#f4f4f4, #2f2f2f);
+    --fui-bg-elevated: light-dark(#ffffff, #2f2f2f);
+    --fui-bg-subtle: light-dark(#fafafa, #171717);
+    --fui-bg-hover: light-dark(rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.055));
+    --fui-bg-active: light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.085));
+    --fui-body-bg: light-dark(#fff, #212121);
+    --fui-main-bg: light-dark(#ffffff, #212121);
+    --fui-bg-inverse: light-dark(#212121, #ececec);
+    --fui-text-primary: light-dark(#212121, #ececec);
+    --fui-text-secondary: light-dark(rgb(84.468434358, 84.468434358, 84.468434358), #b4b4b4);
+    --fui-text-tertiary: light-dark(rgb(86.4227350852, 86.4227350852, 86.4227350852), #8f8f8f);
+    --fui-text-inverse: light-dark(#f4f4f4, #212121);
+    --fui-border: light-dark(rgba(0, 0, 0, 0.05), #323232);
+    --fui-border-default: light-dark(rgba(0, 0, 0, 0.05), #323232);
+    --fui-border-strong: light-dark(rgba(0, 0, 0, 0.1), #4b4b4b);
+    --fui-border-subtle: color-mix(in srgb, var(--fui-border-default) 68%, transparent);
+    --fui-selection-bg: light-dark(
+      color-mix(in srgb, var(--fui-color-accent, #006b57) 18%, transparent),
+      color-mix(in srgb, var(--fui-color-accent, #7fc9b3) 22%, transparent)
+    );
+    --fui-selection-color: var(--fui-text-primary);
+    --fui-field-bg: color-mix(in srgb, var(--fui-bg-elevated) 72%, transparent);
+    --fui-field-bg-disabled: color-mix(in srgb, var(--fui-bg-tertiary) 78%, var(--fui-bg-primary));
+    --fui-field-border: var(--fui-border-strong);
+    --fui-field-border-hover: color-mix(
+      in srgb,
+      var(--fui-text-tertiary) 46%,
+      var(--fui-border-strong)
+    );
+    --fui-field-border-focus: var(--fui-text-primary);
+    --fui-field-selection-bg: color-mix(in srgb, var(--fui-text-primary) 8%, transparent);
+    --fui-field-selection-bg-hover: color-mix(in srgb, var(--fui-text-primary) 11%, transparent);
+    --fui-field-selection-border: var(--fui-border-strong);
+    --fui-field-selection-color: var(--fui-text-primary);
+    --fui-form-group-bg: color-mix(in srgb, var(--fui-bg-secondary) 48%, var(--fui-bg-primary));
+    --fui-form-group-border: var(--fui-border-default);
+    --fui-kbd-height: 1.286rem;
+    --fui-kbd-min-width: 1.714rem;
+    --fui-kbd-padding-x: var(--fui-space-0-75);
+    --fui-kbd-gap: calc(var(--fui-space-px) * 2);
+    --fui-kbd-bg: color-mix(in srgb, var(--fui-text-primary) 4%, transparent);
+    --fui-kbd-border: color-mix(in srgb, var(--fui-border-strong) 72%, transparent);
+    --fui-kbd-color: var(--fui-text-tertiary);
+    --fui-kbd-shadow: inset 0 1px 0
+      light-dark(
+        color-mix(in srgb, white 74%, transparent),
+        color-mix(in srgb, white 5%, transparent)
+      );
+    --fui-kbd-font-size: var(--fui-font-size-2xs);
+    --fui-kbd-radius: var(--fui-radius-sm);
+    --fui-kbd-reserved-width: 2.714rem;
+    --fui-button-primary-base: light-dark(#006b57, #006b57);
+    --fui-button-primary-hover: light-dark(#187762, #187762);
+    --fui-button-primary-active: light-dark(#005f4c, #005f4c);
+    --fui-button-primary-border-hover: color-mix(
+      in srgb,
+      var(--fui-button-primary-active) 86%,
+      black 14%
+    );
+    --fui-button-primary-border: color-mix(
+      in srgb,
+      var(--fui-button-primary-active) 74%,
+      black 26%
+    );
+    --fui-button-primary-color: #fff;
+    --fui-button-radius: var(--fui-radius-full);
+    --fui-button-primary-bg: var(--fui-button-primary-base);
+    --fui-button-primary-bg-hover: var(--fui-button-primary-hover);
+    --fui-button-primary-bg-active: var(--fui-button-primary-active);
+    --fui-button-primary-shadow: none;
+    --fui-button-primary-shadow-active: inset
+      0
+      1px
+      2px
+      color-mix(in srgb, black 22%, transparent);
+    --fui-button-neutral-bg: linear-gradient(
+      to bottom,
+      light-dark(
+          color-mix(in srgb, var(--fui-bg-elevated) 97%, var(--fui-text-primary) 3%),
+          color-mix(in srgb, var(--fui-bg-elevated) 88%, var(--fui-text-primary) 12%)
+        )
+        0%,
+      light-dark(
+          color-mix(in srgb, var(--fui-bg-elevated) 92%, var(--fui-text-primary) 8%),
+          color-mix(in srgb, var(--fui-bg-elevated) 96%, var(--fui-text-primary) 4%)
+        )
+        100%
+    );
+    --fui-button-neutral-bg-hover: linear-gradient(
+      to bottom,
+      light-dark(
+          color-mix(in srgb, var(--fui-bg-elevated) 99%, var(--fui-text-primary) 1%),
+          color-mix(in srgb, var(--fui-bg-elevated) 82%, var(--fui-text-primary) 18%)
+        )
+        0%,
+      light-dark(
+          color-mix(in srgb, var(--fui-bg-elevated) 88%, var(--fui-text-primary) 12%),
+          color-mix(in srgb, var(--fui-bg-elevated) 92%, var(--fui-text-primary) 8%)
+        )
+        100%
+    );
+    --fui-button-neutral-bg-active: linear-gradient(
+      to bottom,
+      color-mix(in srgb, var(--fui-bg-elevated) 82%, var(--fui-text-primary) 18%) 0%,
+      color-mix(in srgb, var(--fui-bg-elevated) 90%, var(--fui-text-primary) 10%) 100%
+    );
+    --fui-button-neutral-border: color-mix(
+      in srgb,
+      var(--fui-border-strong) 78%,
+      var(--fui-text-primary) 22%
+    );
+    --fui-button-neutral-border-hover: color-mix(
+      in srgb,
+      var(--fui-border-strong) 58%,
+      var(--fui-text-primary) 42%
+    );
+    --fui-button-neutral-color: var(--fui-text-primary);
+    --fui-button-outlined-shadow: inset 0 1px 0 light-dark(color-mix(in srgb, white 72%, transparent), color-mix(in srgb, white 5%, transparent));
+    --fui-button-neutral-shadow:
+      inset 0 1px 0
+        light-dark(
+          color-mix(in srgb, white 88%, transparent),
+          color-mix(in srgb, white 7%, transparent)
+        ),
+      inset 0 -1px 0 color-mix(in srgb, var(--fui-text-primary) 7%, transparent),
+      0 1px 1px color-mix(in srgb, black 12%, transparent);
+    --fui-button-neutral-shadow-active:
+      inset 0 1px 2px color-mix(in srgb, black 16%, transparent),
+      inset 0 0 0 1px color-mix(in srgb, var(--fui-text-primary) 6%, transparent);
+    --fui-code-bg: #171717;
+    --fui-code-selection-bg: color-mix(in srgb, var(--fui-button-primary-base, #006b57) 30%, transparent);
+    --fui-bg-highlight: color-mix(in srgb, var(--fui-text-primary) 7%, transparent);
+    --fui-app-canvas-bg: var(--fui-body-bg);
+    --fui-app-main-bg: var(--fui-main-bg);
+    --fui-app-sidebar-bg: color-mix(in srgb, var(--fui-bg-primary) 78%, var(--fui-bg-secondary));
+    --fui-sidebar-bg: var(--fui-app-sidebar-bg);
+    --fui-sidebar-border: var(--fui-border-default);
+    --fui-sidebar-item-color: var(--fui-text-secondary);
+    --fui-sidebar-item-icon-color: var(--fui-text-tertiary);
+    --fui-sidebar-item-hover-bg: var(--fui-bg-hover);
+    --fui-sidebar-item-hover-color: var(--fui-text-primary);
+    --fui-sidebar-item-active-bg: color-mix(in srgb, var(--fui-text-primary) 8%, transparent);
+    --fui-sidebar-item-active-border: transparent;
+    --fui-sidebar-item-active-color: var(--fui-text-primary);
+    --fui-sidebar-item-active-indicator: transparent;
+    --fui-sidebar-footer-border: color-mix(in srgb, var(--fui-border-default) 68%, transparent);
+    --fui-badge-radius: var(--fui-radius-lg);
+    --fui-badge-dot-color: currentColor;
+    --fui-card-radius: var(--fui-radius-lg);
+    --fui-card-bg: color-mix(in srgb, var(--fui-bg-elevated) 92%, transparent);
+    --fui-card-border: color-mix(in srgb, var(--fui-border-default) 86%, transparent);
+    --fui-card-outlined-border: var(--fui-card-border);
+    --fui-card-shadow: inset 0 1px 0
+      light-dark(
+        color-mix(in srgb, white 86%, transparent),
+        color-mix(in srgb, white 4%, transparent)
+      );
+    --fui-card-elevated-shadow:
+      var(--fui-card-shadow), 0 1px 2px color-mix(in srgb, black 8%, transparent),
+      0 16px 36px -28px color-mix(in srgb, black 34%, transparent);
+    --fui-card-hover-bg: color-mix(in srgb, var(--fui-bg-elevated) 88%, var(--fui-text-primary) 4%);
+    --fui-card-hover-border: color-mix(in srgb, var(--fui-border-strong) 86%, transparent);
+    --fui-card-active-bg: color-mix(
+      in srgb,
+      var(--fui-bg-elevated) 84%,
+      var(--fui-text-primary) 6%
+    );
+    --fui-card-active-shadow: inset 0 1px 2px color-mix(in srgb, black 12%, transparent);
+    --fui-card-panel-shadow: var(--fui-card-shadow);
+    --fui-card-stat-bg: color-mix(in srgb, var(--fui-bg-elevated) 74%, transparent);
+    --fui-card-stat-border: color-mix(in srgb, var(--fui-border-default) 78%, transparent);
+    --fui-card-stat-shadow: var(--fui-card-shadow);
+    --fui-panel-bg: color-mix(in srgb, var(--fui-bg-elevated) 74%, transparent);
+    --fui-panel-border: color-mix(in srgb, var(--fui-border-default) 78%, transparent);
+    --fui-table-bg: transparent;
+    --fui-table-border: var(--fui-border-default);
+    --fui-table-header-bg: color-mix(in srgb, var(--fui-text-primary) 5%, transparent);
+    --fui-table-header-border: var(--fui-border-strong);
+    --fui-table-row-hover-bg: var(--fui-bg-hover);
+    --fui-table-row-active-bg: var(--fui-bg-active);
+    --fui-table-row-selected-bg: color-mix(in srgb, var(--fui-text-primary) 8%, transparent);
+    --fui-table-row-selected-border: var(--fui-border-strong);
+    --fui-table-subrow-bg: color-mix(in srgb, var(--fui-bg-secondary) 62%, transparent);
+    --fui-tabs-pills-bg: color-mix(in srgb, var(--fui-text-primary) 5%, transparent);
+    --fui-tabs-pills-border: var(--fui-border-default);
+    --fui-tabs-pill-hover-bg: transparent;
+    --fui-tabs-pill-active-bg: color-mix(in srgb, var(--fui-text-primary) 9%, transparent);
+    --fui-tabs-pill-active-border: transparent;
+    --fui-tabs-pill-active-shadow: none;
+    --fui-toggle-group-selected-bg: color-mix(in srgb, var(--fui-text-primary) 9%, transparent);
+    --fui-toggle-group-selected-border: transparent;
+    --fui-toggle-group-selected-shadow: none;
+    --fui-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.02);
+    --fui-shadow-md: 0 2px 4px -1px rgba(0, 0, 0, 0.04), 0 1px 3px -2px rgba(0, 0, 0, 0.03);
+    --fui-shadow-lg: 0 8px 12px -3px rgba(0, 0, 0, 0.06), 0 3px 5px -4px rgba(0, 0, 0, 0.04);
+    --fui-focus-ring-color: light-dark(#006b57, #7fc9b3);
+    --fui-focus-ring-offset: 2px;
+    --fui-focus-ring-width: 2px;
+    --fui-scrollbar-width: 8px;
+    --fui-scrollbar-track: light-dark(#f4f4f4, transparent);
+    --fui-scrollbar-thumb: light-dark(#d1d1d1, #4b4b4b);
+    --fui-scrollbar-thumb-hover: light-dark(
+      #b0b0b0,
+      #b4b4b4
+    );
+    --fui-button-height-xs: 2.2857142857rem;
+    --fui-button-height-sm: 2.2857142857rem;
+    --fui-button-height-md: 2.8571428571rem;
+    --fui-button-height-lg: 3.1428571429rem;
+    --fui-input-height-sm: 2.2857142857rem;
+    --fui-input-height: 2.8571428571rem;
+    --fui-input-height-lg: 3.1428571429rem;
+    --fui-touch-sm: 2.2857142857rem;
+    --fui-touch-md: 2.2857142857rem;
+    --fui-touch-lg: 3.1428571429rem;
+    --fui-target-size-min: 2.286rem;
+    --fui-sidebar-item-height: 2.2857142857rem;
+    --fui-appshell-header-height: 56px;
+    --fui-header-z-index: 40;
+    --fui-icon-xs: 0.857rem;
+    --fui-icon-sm: 1rem;
+    --fui-icon-md: 1.143rem;
+    --fui-icon-lg: 1.429rem;
+    --fui-icon-xl: 1.714rem;
+    --fui-icon-2xl: 2.286rem;
+  }
+  :root[data-theme=dark] {
+    color-scheme: dark;
+    --fui-color-accent: #7fc9b3;
+    --fui-color-on-accent: #000000;
+    --fui-color-accent-hover: rgb(111.2334942499, 184.9463823083, 163.3906961391);
+    --fui-color-accent-active: rgb(101.8225602578, 175.4300241517, 154.1534611497);
+    --fui-bg-primary: #212121;
+    --fui-bg-secondary: #171717;
+    --fui-bg-tertiary: #2f2f2f;
+    --fui-bg-elevated: #2f2f2f;
+    --fui-bg-subtle: #171717;
+    --fui-bg-hover: rgba(255, 255, 255, 0.055);
+    --fui-bg-active: rgba(255, 255, 255, 0.085);
+    --fui-bg-highlight: color-mix(in srgb, var(--fui-text-primary) 10%, transparent);
+    --fui-body-bg: #212121;
+    --fui-main-bg: #212121;
+    --fui-bg-inverse: #ececec;
+    --fui-text-primary: #ececec;
+    --fui-text-secondary: #b4b4b4;
+    --fui-text-tertiary: #8f8f8f;
+    --fui-text-inverse: #212121;
+    --fui-border: #323232;
+    --fui-border-default: #323232;
+    --fui-border-strong: #4b4b4b;
+    --fui-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
+    --fui-shadow-md: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 1px 3px -2px rgba(0, 0, 0, 0.15);
+    --fui-shadow-lg: 0 8px 12px -3px rgba(0, 0, 0, 0.25), 0 3px 5px -4px rgba(0, 0, 0, 0.18);
+    --fui-color-danger-bg: color-mix(in srgb, var(--fui-color-danger) 24%, black);
+    --fui-color-success-bg: color-mix(in srgb, var(--fui-color-success) 24%, black);
+    --fui-color-warning-bg: color-mix(in srgb, var(--fui-color-warning) 24%, black);
+    --fui-color-info-bg: color-mix(in srgb, var(--fui-color-info) 24%, black);
+    --fui-color-danger-text: color-mix(in srgb, var(--fui-color-danger) 78%, white 22%);
+    --fui-color-success-text: color-mix(in srgb, var(--fui-color-success) 78%, white 22%);
+    --fui-color-warning-text: color-mix(in srgb, var(--fui-color-warning) 78%, white 22%);
+    --fui-color-info-text: color-mix(in srgb, var(--fui-color-info) 78%, white 22%);
+    --fui-color-danger-border: color-mix(in srgb, var(--fui-color-danger-text) 30%, transparent);
+    --fui-color-success-border: color-mix(in srgb, var(--fui-color-success-text) 28%, transparent);
+    --fui-color-warning-border: color-mix(in srgb, var(--fui-color-warning-text) 28%, transparent);
+    --fui-color-info-border: color-mix(in srgb, var(--fui-color-info-text) 30%, transparent);
+    --fui-focus-ring-color: #7fc9b3;
+    --fui-backdrop: rgba(0, 0, 0, 0.8);
+    --fui-scrollbar-track: transparent;
+    --fui-scrollbar-thumb: #4b4b4b;
+    --fui-scrollbar-thumb-hover: #b4b4b4;
+  }
+  :root.dark {
+    color-scheme: dark;
+    --fui-color-accent: #7fc9b3;
+    --fui-color-on-accent: #000000;
+    --fui-color-accent-hover: rgb(111.2334942499, 184.9463823083, 163.3906961391);
+    --fui-color-accent-active: rgb(101.8225602578, 175.4300241517, 154.1534611497);
+    --fui-bg-primary: #212121;
+    --fui-bg-secondary: #171717;
+    --fui-bg-tertiary: #2f2f2f;
+    --fui-bg-elevated: #2f2f2f;
+    --fui-bg-subtle: #171717;
+    --fui-bg-hover: rgba(255, 255, 255, 0.055);
+    --fui-bg-active: rgba(255, 255, 255, 0.085);
+    --fui-bg-highlight: color-mix(in srgb, var(--fui-text-primary) 10%, transparent);
+    --fui-body-bg: #212121;
+    --fui-main-bg: #212121;
+    --fui-bg-inverse: #ececec;
+    --fui-text-primary: #ececec;
+    --fui-text-secondary: #b4b4b4;
+    --fui-text-tertiary: #8f8f8f;
+    --fui-text-inverse: #212121;
+    --fui-border: #323232;
+    --fui-border-default: #323232;
+    --fui-border-strong: #4b4b4b;
+    --fui-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
+    --fui-shadow-md: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 1px 3px -2px rgba(0, 0, 0, 0.15);
+    --fui-shadow-lg: 0 8px 12px -3px rgba(0, 0, 0, 0.25), 0 3px 5px -4px rgba(0, 0, 0, 0.18);
+    --fui-color-danger-bg: color-mix(in srgb, var(--fui-color-danger) 24%, black);
+    --fui-color-success-bg: color-mix(in srgb, var(--fui-color-success) 24%, black);
+    --fui-color-warning-bg: color-mix(in srgb, var(--fui-color-warning) 24%, black);
+    --fui-color-info-bg: color-mix(in srgb, var(--fui-color-info) 24%, black);
+    --fui-color-danger-text: color-mix(in srgb, var(--fui-color-danger) 78%, white 22%);
+    --fui-color-success-text: color-mix(in srgb, var(--fui-color-success) 78%, white 22%);
+    --fui-color-warning-text: color-mix(in srgb, var(--fui-color-warning) 78%, white 22%);
+    --fui-color-info-text: color-mix(in srgb, var(--fui-color-info) 78%, white 22%);
+    --fui-color-danger-border: color-mix(in srgb, var(--fui-color-danger-text) 30%, transparent);
+    --fui-color-success-border: color-mix(in srgb, var(--fui-color-success-text) 28%, transparent);
+    --fui-color-warning-border: color-mix(in srgb, var(--fui-color-warning-text) 28%, transparent);
+    --fui-color-info-border: color-mix(in srgb, var(--fui-color-info-text) 30%, transparent);
+    --fui-focus-ring-color: #7fc9b3;
+    --fui-backdrop: rgba(0, 0, 0, 0.8);
+    --fui-scrollbar-track: transparent;
+    --fui-scrollbar-thumb: #4b4b4b;
+    --fui-scrollbar-thumb-hover: #b4b4b4;
+  }
+  :root[data-theme=light],
+  :root.light {
+    color-scheme: light;
+  }
+  @supports (color: oklch(from red l c h)) {
+    :root {
+      --fui-color-accent: light-dark(var(--fui-seed-brand), #7fc9b3);
+      --fui-color-on-accent: oklch(
+        from var(--fui-color-accent) calc(0 + (1 - clamp(0, calc((l - 0.6) * 999), 1))) 0 0
+      );
+      --fui-color-accent-hover: light-dark(
+        oklch(from var(--fui-seed-brand) max(0.05, calc(l - 0.06)) c h),
+        rgb(111.2334942499, 184.9463823083, 163.3906961391)
+      );
+      --fui-color-accent-active: light-dark(
+        oklch(from var(--fui-seed-brand) max(0.05, calc(l - 0.12)) c h),
+        rgb(101.8225602578, 175.4300241517, 154.1534611497)
+      );
+      --fui-color-danger-hover: oklch(from var(--fui-seed-danger) max(0.05, calc(l - 0.06)) c h);
+      --fui-color-danger-bg: light-dark(
+        color-mix(in oklch, var(--fui-seed-danger) 12%, white),
+        color-mix(in oklch, var(--fui-seed-danger) 24%, black)
+      );
+      --fui-color-success-bg: light-dark(
+        color-mix(in oklch, var(--fui-seed-success) 12%, white),
+        color-mix(in oklch, var(--fui-seed-success) 24%, black)
+      );
+      --fui-color-warning-bg: light-dark(
+        color-mix(in oklch, var(--fui-seed-warning) 12%, white),
+        color-mix(in oklch, var(--fui-seed-warning) 24%, black)
+      );
+      --fui-color-info-bg: light-dark(
+        color-mix(in oklch, var(--fui-seed-info) 12%, white),
+        color-mix(in oklch, var(--fui-seed-info) 24%, black)
+      );
+      --fui-color-danger-text: light-dark(
+        color-mix(in oklch, var(--fui-seed-danger) 72%, black),
+        color-mix(in oklch, var(--fui-seed-danger) 78%, white 22%)
+      );
+      --fui-color-success-text: light-dark(
+        color-mix(in oklch, var(--fui-seed-success) 72%, black),
+        color-mix(in oklch, var(--fui-seed-success) 78%, white 22%)
+      );
+      --fui-color-warning-text: light-dark(
+        color-mix(in oklch, var(--fui-seed-warning) 72%, black),
+        color-mix(in oklch, var(--fui-seed-warning) 78%, white 22%)
+      );
+      --fui-color-info-text: light-dark(
+        color-mix(in oklch, var(--fui-seed-info) 72%, black),
+        color-mix(in oklch, var(--fui-seed-info) 78%, white 22%)
+      );
+      --fui-focus-ring-color: var(--fui-color-accent);
+    }
+    :root[data-theme=dark],
+    :root.dark {
+      --fui-color-accent: #7fc9b3;
+      --fui-color-on-accent: oklch(
+        from var(--fui-color-accent) calc(0 + (1 - clamp(0, calc((l - 0.6) * 999), 1))) 0 0
+      );
+      --fui-color-accent-hover: rgb(111.2334942499, 184.9463823083, 163.3906961391);
+      --fui-color-accent-active: rgb(101.8225602578, 175.4300241517, 154.1534611497);
+      --fui-color-danger-bg: color-mix(in oklch, var(--fui-seed-danger) 24%, black);
+      --fui-color-success-bg: color-mix(in oklch, var(--fui-seed-success) 24%, black);
+      --fui-color-warning-bg: color-mix(in oklch, var(--fui-seed-warning) 24%, black);
+      --fui-color-info-bg: color-mix(in oklch, var(--fui-seed-info) 24%, black);
+      --fui-color-danger-text: color-mix(in oklch, var(--fui-seed-danger) 78%, white 22%);
+      --fui-color-success-text: color-mix(in oklch, var(--fui-seed-success) 78%, white 22%);
+      --fui-color-warning-text: color-mix(in oklch, var(--fui-seed-warning) 78%, white 22%);
+      --fui-color-info-text: color-mix(in oklch, var(--fui-seed-info) 78%, white 22%);
+      --fui-focus-ring-color: var(--fui-color-accent);
+    }
+  }
+  @media (prefers-contrast: more) {
+    :root {
+      --fui-focus-ring-width: 3px;
+      --fui-border: var(--fui-text-primary);
+      --fui-border-strong: var(--fui-text-primary);
+      --fui-bg-hover: rgba(0, 0, 0, 0.12);
+      --fui-bg-active: rgba(0, 0, 0, 0.18);
+      --fui-field-border: var(--fui-text-primary);
+      --fui-field-border-hover: var(--fui-text-primary);
+      --fui-field-border-focus: var(--fui-color-accent);
+      --fui-field-selection-border: var(--fui-color-accent);
+      --fui-form-group-border: var(--fui-text-primary);
+      --fui-sidebar-item-active-border: var(--fui-text-primary);
+      --fui-tabs-pill-active-border: var(--fui-text-primary);
+      --fui-tabs-pill-active-shadow: inset 0 0 0 1px var(--fui-tabs-pill-active-border);
+      --fui-toggle-group-selected-border: var(--fui-text-primary);
+      --fui-toggle-group-selected-shadow: inset 0 0 0 1px var(--fui-toggle-group-selected-border);
+    }
+    :root[data-theme=dark],
+    :root.dark {
+      --fui-bg-hover: rgba(255, 255, 255, 0.15);
+      --fui-bg-active: rgba(255, 255, 255, 0.22);
+    }
+  }
+  :root[data-high-contrast=true] {
+    --fui-focus-ring-width: 3px;
+    --fui-border: var(--fui-text-primary);
+    --fui-border-strong: var(--fui-text-primary);
+    --fui-bg-hover: rgba(0, 0, 0, 0.12);
+    --fui-bg-active: rgba(0, 0, 0, 0.18);
+    --fui-field-border: var(--fui-text-primary);
+    --fui-field-border-hover: var(--fui-text-primary);
+    --fui-field-border-focus: var(--fui-color-accent);
+    --fui-field-selection-border: var(--fui-color-accent);
+    --fui-form-group-border: var(--fui-text-primary);
+    --fui-sidebar-item-active-border: var(--fui-text-primary);
+    --fui-tabs-pill-active-border: var(--fui-text-primary);
+    --fui-tabs-pill-active-shadow: inset 0 0 0 1px var(--fui-tabs-pill-active-border);
+    --fui-toggle-group-selected-border: var(--fui-text-primary);
+    --fui-toggle-group-selected-shadow: inset 0 0 0 1px var(--fui-toggle-group-selected-border);
+  }
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--fui-scrollbar-thumb) var(--fui-scrollbar-track);
+  }
+  *::-webkit-scrollbar {
+    width: var(--fui-scrollbar-width);
+    height: var(--fui-scrollbar-width);
+  }
+  *::-webkit-scrollbar-track {
+    background: var(--fui-scrollbar-track);
+    border-radius: calc(var(--fui-scrollbar-width) / 2);
+  }
+  *::-webkit-scrollbar-thumb {
+    background: var(--fui-scrollbar-thumb);
+    border-radius: calc(var(--fui-scrollbar-width) / 2);
+  }
+  *::-webkit-scrollbar-thumb:hover {
+    background: var(--fui-scrollbar-thumb-hover);
+  }
+  *::-webkit-scrollbar-corner {
+    background: var(--fui-scrollbar-track);
+  }
+}
+@layer fui.base {
+  :where(*, *::before, *::after) {
+    box-sizing: border-box;
+  }
+  html {
+    font-size: 14px;
+    scroll-behavior: smooth;
+  }
+  :where(body) {
+    margin: 0;
+    font-size: inherit;
+    font-family: var(--fui-font-sans, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
+    line-height: var(--fui-line-height-normal, 1.5);
+    background-color: var(--fui-body-bg, #fff);
+    color: var(--fui-text-primary, #171717);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+  :where(a) {
+    text-decoration: none;
+    color: inherit;
+  }
+  :where(a:not([class]):not([style])) {
+    color: var(--fui-color-accent, #006b57);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    transition: color 0.15s ease;
+  }
+  :where(a:not([class]):not([style])):hover {
+    color: var(--fui-color-accent-hover, hsl(169.9771289871, 164.3448630261%, 13.7353127687%));
+  }
+  ::selection {
+    background-color: var(--fui-selection-bg, color-mix(in srgb, var(--fui-color-accent, #7fc9b3) 18%, transparent));
+    color: var(--fui-selection-color, var(--fui-text-primary, #171717));
+  }
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  ::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    background-color: transparent;
+    border-radius: 9999px;
+    transition: background-color var(--fui-transition-fast, 160ms cubic-bezier(0.25, 0.46, 0.45, 0.94));
+  }
+  :where(*:hover)::-webkit-scrollbar-thumb {
+    background-color: var(--fui-text-tertiary, #8a8a8a);
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: var(--fui-text-secondary, #525252);
+  }
+  :where(*) {
+    scrollbar-width: thin;
+    scrollbar-color: transparent transparent;
+  }
+  :where(*:hover) {
+    scrollbar-color: var(--fui-text-tertiary, #8a8a8a) transparent;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    :where(*, *::before, *::after) {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+  :where(:focus:not(:focus-visible)) {
+    outline: none;
+  }
+  :where(:focus-visible) {
+    outline: 1px solid color-mix(in srgb, var(--fui-focus-ring-color, #006b57) 24%, transparent);
+    outline-offset: var(--fui-focus-ring-offset, 2px);
+    box-shadow: 0 0 0 calc(var(--fui-focus-ring-width, 2px) + 1px) color-mix(in srgb, var(--fui-focus-ring-color, #006b57) 10%, transparent), 0 10px 24px -16px color-mix(in srgb, var(--fui-focus-ring-color, #006b57) 18%, transparent);
+  }
+}
+/* @usefragments/ui — component CSS modules (vite bundle) */
 ._button_1xsqy_1 {
   appearance: none;
   background: transparent;