@lobehub/ui 5.57.2 → 6.0.0-beta.1

package/es/theme.css

@@ -0,0 +1,2420 @@
+@layer lobe-base, lobe-popup, lobe-ui;
+
+:root, [data-theme='light'] {
+  --lobe-border-radius-outer: 6px;
+  --lobe-color-text-light-solid: #fff;
+  --lobe-color-white: #fff;
+  --lobe-control-height-lg: 45px;
+  --lobe-control-height-sm: 27px;
+  --lobe-control-height-xs: 18px;
+  --lobe-control-interactive-size: 18px;
+  --lobe-control-outline-width: 2px;
+  --lobe-control-padding-horizontal: 12px;
+  --lobe-control-padding-horizontal-sm: 8px;
+  --lobe-font-height: 22px;
+  --lobe-font-height-lg: 24px;
+  --lobe-font-height-sm: 20px;
+  --lobe-font-size: 14px;
+  --lobe-font-size-heading-1: 38px;
+  --lobe-font-size-heading-2: 30px;
+  --lobe-font-size-heading-3: 24px;
+  --lobe-font-size-heading-4: 20px;
+  --lobe-font-size-heading-5: 16px;
+  --lobe-font-size-icon: 12px;
+  --lobe-font-size-lg: 16px;
+  --lobe-font-size-sm: 12px;
+  --lobe-font-size-xl: 20px;
+  --lobe-font-weight-strong: 600;
+  --lobe-line-height: 1.5714285714285714;
+  --lobe-line-height-heading-1: 1.2105263157894737;
+  --lobe-line-height-heading-2: 1.2666666666666666;
+  --lobe-line-height-heading-3: 1.3333333333333333;
+  --lobe-line-height-heading-4: 1.4;
+  --lobe-line-height-heading-5: 1.5;
+  --lobe-line-height-lg: 1.5;
+  --lobe-line-height-sm: 1.6666666666666667;
+  --lobe-line-type: solid;
+  --lobe-line-width: 1px;
+  --lobe-line-width-bold: 2px;
+  --lobe-line-width-focus: 3px;
+  --lobe-link-decoration: none;
+  --lobe-link-focus-decoration: none;
+  --lobe-link-hover-decoration: none;
+  --lobe-margin: 16px;
+  --lobe-margin-lg: 24px;
+  --lobe-margin-md: 20px;
+  --lobe-margin-sm: 12px;
+  --lobe-margin-xl: 32px;
+  --lobe-margin-xs: 8px;
+  --lobe-margin-xxl: 48px;
+  --lobe-margin-xxs: 4px;
+  --lobe-motion-duration-fast: 0.1s;
+  --lobe-motion-duration-mid: 0.2s;
+  --lobe-motion-duration-slow: 0.3s;
+  --lobe-motion-ease-in-back: cubic-bezier(0.71, -0.46, 0.88, 0.6);
+  --lobe-motion-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
+  --lobe-motion-ease-in-out-circ: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+  --lobe-motion-ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+  --lobe-motion-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
+  --lobe-motion-ease-out-back: cubic-bezier(0.12, 0.4, 0.29, 1.46);
+  --lobe-motion-ease-out-circ: cubic-bezier(0.08, 0.82, 0.17, 1);
+  --lobe-motion-ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
+  --lobe-opacity-image: 1;
+  --lobe-opacity-loading: 0.65;
+  --lobe-padding: 16px;
+  --lobe-padding-content-horizontal: 16px;
+  --lobe-padding-content-horizontal-lg: 24px;
+  --lobe-padding-content-horizontal-sm: 16px;
+  --lobe-padding-content-vertical: 12px;
+  --lobe-padding-content-vertical-lg: 16px;
+  --lobe-padding-content-vertical-sm: 8px;
+  --lobe-padding-lg: 24px;
+  --lobe-padding-md: 20px;
+  --lobe-padding-sm: 12px;
+  --lobe-padding-xl: 32px;
+  --lobe-padding-xs: 8px;
+  --lobe-padding-xxs: 4px;
+  --lobe-pink: #EB2F96;
+  --lobe-screen-lg: 992px;
+  --lobe-screen-lg-max: 1199px;
+  --lobe-screen-lg-min: 992px;
+  --lobe-screen-md: 768px;
+  --lobe-screen-md-max: 991px;
+  --lobe-screen-md-min: 768px;
+  --lobe-screen-sm: 576px;
+  --lobe-screen-sm-max: 767px;
+  --lobe-screen-sm-min: 576px;
+  --lobe-screen-xl: 1200px;
+  --lobe-screen-xl-max: 1599px;
+  --lobe-screen-xl-min: 1200px;
+  --lobe-screen-xs: 480px;
+  --lobe-screen-xs-max: 575px;
+  --lobe-screen-xs-min: 480px;
+  --lobe-screen-xxl: 1600px;
+  --lobe-screen-xxl-max: 1919px;
+  --lobe-screen-xxl-min: 1600px;
+  --lobe-screen-xxxl: 1920px;
+  --lobe-screen-xxxl-min: 1920px;
+  --lobe-size: 16px;
+  --lobe-size-lg: 24px;
+  --lobe-size-md: 20px;
+  --lobe-size-ms: 16px;
+  --lobe-size-popup-arrow: 16px;
+  --lobe-size-sm: 12px;
+  --lobe-size-step: 4px;
+  --lobe-size-unit: 4px;
+  --lobe-size-xl: 32px;
+  --lobe-size-xs: 8px;
+  --lobe-size-xxl: 48px;
+  --lobe-size-xxs: 4px;
+  --lobe-z-index-base: 0;
+  --lobe-z-index-popup-base: 1000;
+  --lobe-border-radius: 8px;
+  --lobe-border-radius-lg: 12px;
+  --lobe-border-radius-sm: 6px;
+  --lobe-border-radius-xs: 4px;
+  --lobe-control-height: 36px;
+  --lobe-font-family: "HarmonyOS Sans",-apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",Roboto,"Helvetica Neue",Arial,"/* SC */","HarmonyOS Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC","/* FALLBACK */",ui-sans-serif,system-ui,sans-serif,"/* EMOJI */","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
+  --lobe-font-family-code: Hack,ui-monospace,SFMono-Regular,"SF Mono",Menlo,"Cascadia Code",Consolas,"Liberation Mono","/* SC */","HarmonyOS Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC","/* FALLBACK */",monospace,"/* EMOJI */","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
+  --lobe-box-shadow-card: 0 1px 2px -2px rgba(0,0,0,0.16), 0 3px 6px 0 rgba(0,0,0,0.12), 0 5px 12px 4px rgba(0,0,0,0.09);
+  --lobe-box-shadow-drawer-down: 0 -6px 16px 0 rgba(0,0,0,0.08), 0 -3px 6px -4px rgba(0,0,0,0.12), 0 -9px 28px 8px rgba(0,0,0,0.05);
+  --lobe-box-shadow-drawer-left: 6px 0 16px 0 rgba(0,0,0,0.08), 3px 0 6px -4px rgba(0,0,0,0.12), 9px 0 28px 8px rgba(0,0,0,0.05);
+  --lobe-box-shadow-drawer-right: -6px 0 16px 0 rgba(0,0,0,0.08), -3px 0 6px -4px rgba(0,0,0,0.12), -9px 0 28px 8px rgba(0,0,0,0.05);
+  --lobe-box-shadow-drawer-up: 0 6px 16px 0 rgba(0,0,0,0.08), 0 3px 6px -4px rgba(0,0,0,0.12), 0 9px 28px 8px rgba(0,0,0,0.05);
+  --lobe-box-shadow-popover-arrow: 2px 2px 5px rgba(0,0,0,0.05);
+  --lobe-box-shadow-tabs-overflow-bottom: inset 0 -10px 8px -8px rgba(0,0,0,0.08);
+  --lobe-box-shadow-tabs-overflow-left: inset 10px 0 8px -8px rgba(0,0,0,0.08);
+  --lobe-box-shadow-tabs-overflow-right: inset -10px 0 8px -8px rgba(0,0,0,0.08);
+  --lobe-box-shadow-tabs-overflow-top: inset 0 10px 8px -8px rgba(0,0,0,0.08);
+  --lobe-color-bg-base: #fff;
+  --lobe-color-bg-blur: transparent;
+  --lobe-color-bg-solid: rgb(0,0,0);
+  --lobe-color-bg-solid-active: rgba(0,0,0,0.95);
+  --lobe-color-bg-solid-hover: rgba(0,0,0,0.75);
+  --lobe-color-border-disabled: #d9d9d9;
+  --lobe-color-error-bg-active: #ffccc7;
+  --lobe-color-error-bg-filled-hover: #ffdfdc;
+  --lobe-color-shadow: #000;
+  --lobe-color-text-base: #000;
+  --lobe-drop-shadow-popover: drop-shadow(0 6px 16px rgba(0,0,0,0.08)) drop-shadow(0 3px 6px rgba(0,0,0,0.12)) drop-shadow(0 9px 28px rgba(0,0,0,0.05));
+  --lobe-pink-1: #fff0f6;
+  --lobe-pink-10: #520339;
+  --lobe-pink-2: #ffd6e7;
+  --lobe-pink-3: #ffadd2;
+  --lobe-pink-4: #ff85c0;
+  --lobe-pink-5: #f759ab;
+  --lobe-pink-6: #eb2f96;
+  --lobe-pink-7: #c41d7f;
+  --lobe-pink-8: #9e1068;
+  --lobe-pink-9: #780650;
+  --lobe-pink-active: #c41d7f;
+  --lobe-pink-hover: #f759ab;
+  --lobe-color-error-fill: rgba(255, 42, 3, 0.20);
+  --lobe-color-error-fill-secondary: rgba(255, 35, 2, 0.12);
+  --lobe-color-error-fill-tertiary: rgba(255, 44, 11, 0.06);
+  --lobe-color-error-fill-quaternary: rgba(255, 55, 30, 0.04);
+  --lobe-color-error-bg: #fff7f6;
+  --lobe-color-error-bg-hover: #ffece9;
+  --lobe-color-error-border: #ffcec5;
+  --lobe-color-error-border-hover: #ffded9;
+  --lobe-color-error-hover: #fb745a;
+  --lobe-color-error: #ec5e41;
+  --lobe-color-error-active: #a53716;
+  --lobe-color-error-text-hover: #fb745a;
+  --lobe-color-error-text: #ec5e41;
+  --lobe-color-error-text-active: #a53716;
+  --lobe-color-info-fill: rgba(10, 95, 255, 0.2);
+  --lobe-color-info-fill-secondary: rgba(13, 88, 255, 0.12);
+  --lobe-color-info-fill-tertiary: rgba(22, 88, 255, 0.06);
+  --lobe-color-info-fill-quaternary: rgba(105, 55, 255, 0.02);
+  --lobe-color-info-bg: #fcfbff;
+  --lobe-color-info-bg-hover: #f1f5ff;
+  --lobe-color-info-border: #cedfff;
+  --lobe-color-info-border-hover: #e2ebff;
+  --lobe-color-info-hover: #4c90ff;
+  --lobe-color-info: #0072f5;
+  --lobe-color-info-active: #005ae0;
+  --lobe-color-info-text-hover: #4c90ff;
+  --lobe-color-info-text: #0072f5;
+  --lobe-color-info-text-active: #005ae0;
+  --lobe-color-success-fill: rgba(40, 174, 1, 0.26);
+  --lobe-color-success-fill-secondary: rgba(60, 190, 10, 0.14);
+  --lobe-color-success-fill-tertiary: rgba(84, 205, 12, 0.10);
+  --lobe-color-success-fill-quaternary: rgba(117, 230, 5, 0.06);
+  --lobe-color-success-bg: #f4fdeb;
+  --lobe-color-success-bg-hover: #e7f8dd;
+  --lobe-color-success-border: #c7eabd;
+  --lobe-color-success-border-hover: #d8f2ce;
+  --lobe-color-success-hover: #71c179;
+  --lobe-color-success: #379d4a;
+  --lobe-color-success-active: #007944;
+  --lobe-color-success-text-hover: #71c179;
+  --lobe-color-success-text: #379d4a;
+  --lobe-color-success-text-active: #007944;
+  --lobe-color-warning-fill: rgba(255, 134, 5, 0.20);
+  --lobe-color-warning-fill-secondary: rgba(255, 117, 5, 0.16);
+  --lobe-color-warning-fill-tertiary: rgba(255,155,55,0.08);
+  --lobe-color-warning-fill-quaternary: rgba(255,145,55,0.04);
+  --lobe-color-warning-bg: #fffdff;
+  --lobe-color-warning-bg-hover: #fff9f7;
+  --lobe-color-warning-border: #ffeedc;
+  --lobe-color-warning-border-hover: #fff4eb;
+  --lobe-color-warning-hover: #ffc368;
+  --lobe-color-warning: #ee9e0b;
+  --lobe-color-warning-active: #d59300;
+  --lobe-color-warning-text-hover: #ffc368;
+  --lobe-color-warning-text: #ee9e0b;
+  --lobe-color-warning-text-active: #d59300;
+  --lobe-blue-1: #fcfcff;
+  --lobe-blue-2: #f2f8ff;
+  --lobe-blue-3: #e5f1ff;
+  --lobe-blue-4: #d5e9ff;
+  --lobe-blue-5: #c2e0ff;
+  --lobe-blue-6: #acd4ff;
+  --lobe-blue-7: #93c8ff;
+  --lobe-blue-8: #76baff;
+  --lobe-blue-9: #57abf9;
+  --lobe-blue-10: #0d78ce;
+  --lobe-blue-11: #003b79;
+  --lobe-blue-1-a: rgba(105, 105, 255, 0.02);
+  --lobe-blue-2-a: rgba(38, 138, 255, 0.06);
+  --lobe-blue-3-a: rgba(19, 128, 255, 0.11);
+  --lobe-blue-4-a: rgba(8, 126, 255, 0.17);
+  --lobe-blue-5-a: rgba(1, 126, 255, 0.24);
+  --lobe-blue-6-a: rgba(3, 125, 255, 0.33);
+  --lobe-blue-7-a: rgba(4, 127, 255, 0.43);
+  --lobe-blue-8-a: rgba(1, 127, 255, 0.54);
+  --lobe-blue-9-a: rgba(0, 128, 246, 0.66);
+  --lobe-blue-10-a: rgba(0, 113, 203, 0.95);
+  --lobe-blue-11-a: #003b79;
+  --lobe-blue-fill: rgba(8, 126, 255, 0.17);
+  --lobe-blue-fill-secondary: rgba(19, 128, 255, 0.11);
+  --lobe-blue-fill-tertiary: rgba(38, 138, 255, 0.06);
+  --lobe-blue-fill-quaternary: rgba(105, 105, 255, 0.02);
+  --lobe-blue-bg: rgba(105, 105, 255, 0.02);
+  --lobe-blue-bg-hover: rgba(38, 138, 255, 0.06);
+  --lobe-blue-border: #d5e9ff;
+  --lobe-blue-border-secondary: #e5f1ff;
+  --lobe-blue-border-hover: #e5f1ff;
+  --lobe-blue-hover: #76baff;
+  --lobe-blue: #57abf9;
+  --lobe-blue-active: #0d78ce;
+  --lobe-blue-text-hover: rgba(1, 127, 255, 0.54);
+  --lobe-blue-text: rgba(0, 128, 246, 0.66);
+  --lobe-blue-text-active: rgba(0, 113, 203, 0.95);
+  --lobe-cyan-1: #f9fffb;
+  --lobe-cyan-2: #effff8;
+  --lobe-cyan-3: #e3fff4;
+  --lobe-cyan-4: #d8fef0;
+  --lobe-cyan-5: #ccfcec;
+  --lobe-cyan-6: #c0fae8;
+  --lobe-cyan-7: #b3f8e3;
+  --lobe-cyan-8: #a5f6de;
+  --lobe-cyan-9: #95f3d9;
+  --lobe-cyan-10: #2fa28a;
+  --lobe-cyan-11: #005245;
+  --lobe-cyan-1-a: rgba(55, 255, 122, 0.03);
+  --lobe-cyan-2-a: rgba(26, 255, 155, 0.07);
+  --lobe-cyan-3-a: rgba(0, 255, 155, 0.11);
+  --lobe-cyan-4-a: rgba(11, 249, 161, 0.16);
+  --lobe-cyan-5-a: rgba(0, 240, 160, 0.2);
+  --lobe-cyan-6-a: rgba(3, 235, 163, 0.25);
+  --lobe-cyan-7-a: rgba(2, 232, 162, 0.3);
+  --lobe-cyan-8-a: rgba(5, 230, 163, 0.36);
+  --lobe-cyan-9-a: rgba(3, 226, 165, 0.42);
+  --lobe-cyan-10-a: rgba(1, 142, 112, 0.82);
+  --lobe-cyan-11-a: #005245;
+  --lobe-cyan-fill: rgba(11, 249, 161, 0.16);
+  --lobe-cyan-fill-secondary: rgba(0, 255, 155, 0.11);
+  --lobe-cyan-fill-tertiary: rgba(26, 255, 155, 0.07);
+  --lobe-cyan-fill-quaternary: rgba(55, 255, 122, 0.03);
+  --lobe-cyan-bg: rgba(55, 255, 122, 0.03);
+  --lobe-cyan-bg-hover: rgba(26, 255, 155, 0.07);
+  --lobe-cyan-border: #d8fef0;
+  --lobe-cyan-border-secondary: #e3fff4;
+  --lobe-cyan-border-hover: #e3fff4;
+  --lobe-cyan-hover: #a5f6de;
+  --lobe-cyan: #95f3d9;
+  --lobe-cyan-active: #2fa28a;
+  --lobe-cyan-text-hover: rgba(5, 230, 163, 0.36);
+  --lobe-cyan-text: rgba(3, 226, 165, 0.42);
+  --lobe-cyan-text-active: rgba(1, 142, 112, 0.82);
+  --lobe-geekblue-1: #fcfbff;
+  --lobe-geekblue-2: #f1f5ff;
+  --lobe-geekblue-3: #e2ebff;
+  --lobe-geekblue-4: #cedfff;
+  --lobe-geekblue-5: #b6d0ff;
+  --lobe-geekblue-6: #9abeff;
+  --lobe-geekblue-7: #78a9ff;
+  --lobe-geekblue-8: #4c90ff;
+  --lobe-geekblue-9: #0072f5;
+  --lobe-geekblue-10: #005ae0;
+  --lobe-geekblue-11: #002a8a;
+  --lobe-geekblue-1-a: rgba(105, 55, 255, 0.02);
+  --lobe-geekblue-2-a: rgba(22, 88, 255, 0.06);
+  --lobe-geekblue-3-a: rgba(13, 88, 255, 0.12);
+  --lobe-geekblue-4-a: rgba(10, 95, 255, 0.2);
+  --lobe-geekblue-5-a: rgba(3, 93, 255, 0.29);
+  --lobe-geekblue-6-a: rgba(3, 93, 255, 0.4);
+  --lobe-geekblue-7-a: rgba(0, 93, 255, 0.53);
+  --lobe-geekblue-8-a: rgba(3, 99, 255, 0.71);
+  --lobe-geekblue-9-a: #0072f5;
+  --lobe-geekblue-10-a: #005ae0;
+  --lobe-geekblue-11-a: #002a8a;
+  --lobe-geekblue-fill: rgba(10, 95, 255, 0.2);
+  --lobe-geekblue-fill-secondary: rgba(13, 88, 255, 0.12);
+  --lobe-geekblue-fill-tertiary: rgba(22, 88, 255, 0.06);
+  --lobe-geekblue-fill-quaternary: rgba(105, 55, 255, 0.02);
+  --lobe-geekblue-bg: rgba(105, 55, 255, 0.02);
+  --lobe-geekblue-bg-hover: rgba(22, 88, 255, 0.06);
+  --lobe-geekblue-border: #cedfff;
+  --lobe-geekblue-border-secondary: #e2ebff;
+  --lobe-geekblue-border-hover: #e2ebff;
+  --lobe-geekblue-hover: #4c90ff;
+  --lobe-geekblue: #0072f5;
+  --lobe-geekblue-active: #005ae0;
+  --lobe-geekblue-text-hover: rgba(3, 99, 255, 0.71);
+  --lobe-geekblue-text: #0072f5;
+  --lobe-geekblue-text-active: #005ae0;
+  --lobe-gold-1: #fffdff;
+  --lobe-gold-2: #fff9f7;
+  --lobe-gold-3: #fff4eb;
+  --lobe-gold-4: #ffeedc;
+  --lobe-gold-5: #ffe6c8;
+  --lobe-gold-6: #ffdcaf;
+  --lobe-gold-7: #ffd190;
+  --lobe-gold-8: #ffc368;
+  --lobe-gold-9: #ee9e0b;
+  --lobe-gold-10: #d59300;
+  --lobe-gold-11: #6a4900;
+  --lobe-gold-1-a: rgba(255,145,55,0.04);
+  --lobe-gold-2-a: rgba(255,155,55,0.08);
+  --lobe-gold-3-a: rgba(255, 117, 5, 0.16);
+  --lobe-gold-4-a: rgba(255, 134, 5, 0.20);
+  --lobe-gold-5-a: rgba(255, 141, 5, 0.26);
+  --lobe-gold-6-a: rgba(255, 146, 5, 0.32);
+  --lobe-gold-7-a: rgba(255, 150, 3, 0.44);
+  --lobe-gold-8-a: rgba(255, 155, 3, 0.6);
+  --lobe-gold-9-a: rgba(255, 165, 0, 0.86);
+  --lobe-gold-10-a: #d59300;
+  --lobe-gold-11-a: #6a4900;
+  --lobe-gold-fill: rgba(255, 134, 5, 0.20);
+  --lobe-gold-fill-secondary: rgba(255, 117, 5, 0.16);
+  --lobe-gold-fill-tertiary: rgba(255,155,55,0.08);
+  --lobe-gold-fill-quaternary: rgba(255,145,55,0.04);
+  --lobe-gold-bg: rgba(255,145,55,0.04);
+  --lobe-gold-bg-hover: rgba(255,155,55,0.08);
+  --lobe-gold-border: #ffeedc;
+  --lobe-gold-border-secondary: #fff4eb;
+  --lobe-gold-border-hover: #fff4eb;
+  --lobe-gold-hover: #ffc368;
+  --lobe-gold: #ee9e0b;
+  --lobe-gold-active: #d59300;
+  --lobe-gold-text-hover: rgba(255, 155, 3, 0.6);
+  --lobe-gold-text: rgba(255, 165, 0, 0.86);
+  --lobe-gold-text-active: #d59300;
+  --lobe-gray-1: #f8f8f8;
+  --lobe-gray-2: #eeeeee;
+  --lobe-gray-3: #e3e3e3;
+  --lobe-gray-4: #dddddd;
+  --lobe-gray-5: #cccccc;
+  --lobe-gray-6: #bbbbbb;
+  --lobe-gray-7: #aaaaaa;
+  --lobe-gray-8: #999999;
+  --lobe-gray-9: #888888;
+  --lobe-gray-10: #666666;
+  --lobe-gray-11: #333333;
+  --lobe-gray-1-a: rgba(0, 0, 0, 0.03);
+  --lobe-gray-2-a: rgba(0, 0, 0, 0.06);
+  --lobe-gray-3-a: rgba(0, 0, 0, 0.12);
+  --lobe-gray-4-a: rgba(0, 0, 0, 0.18);
+  --lobe-gray-5-a: rgba(0, 0, 0, 0.24);
+  --lobe-gray-6-a: rgba(0, 0, 0, 0.32);
+  --lobe-gray-7-a: rgba(0, 0, 0, 0.38);
+  --lobe-gray-8-a: rgba(0, 0, 0, 0.44);
+  --lobe-gray-9-a: rgba(0, 0, 0, 0.5);
+  --lobe-gray-10-a: rgba(0, 0, 0, 0.68);
+  --lobe-gray-11-a: rgba(0, 0, 0, 0.84);
+  --lobe-gray-fill: rgba(0, 0, 0, 0.18);
+  --lobe-gray-fill-secondary: rgba(0, 0, 0, 0.12);
+  --lobe-gray-fill-tertiary: rgba(0, 0, 0, 0.06);
+  --lobe-gray-fill-quaternary: rgba(0, 0, 0, 0.03);
+  --lobe-gray-bg: rgba(0, 0, 0, 0.03);
+  --lobe-gray-bg-hover: rgba(0, 0, 0, 0.06);
+  --lobe-gray-border: #dddddd;
+  --lobe-gray-border-secondary: #e3e3e3;
+  --lobe-gray-border-hover: #e3e3e3;
+  --lobe-gray-hover: #999999;
+  --lobe-gray: #888888;
+  --lobe-gray-active: #666666;
+  --lobe-gray-text-hover: rgba(0, 0, 0, 0.44);
+  --lobe-gray-text: rgba(0, 0, 0, 0.5);
+  --lobe-gray-text-active: rgba(0, 0, 0, 0.68);
+  --lobe-green-1: #f4fdeb;
+  --lobe-green-2: #e7f8dd;
+  --lobe-green-3: #d8f2ce;
+  --lobe-green-4: #c7eabd;
+  --lobe-green-5: #b4e1ac;
+  --lobe-green-6: #a0d79b;
+  --lobe-green-7: #89cc8a;
+  --lobe-green-8: #71c179;
+  --lobe-green-9: #379d4a;
+  --lobe-green-10: #007944;
+  --lobe-green-11: #003f28;
+  --lobe-green-1-a: rgba(117, 230, 5, 0.06);
+  --lobe-green-2-a: rgba(84, 205, 12, 0.10);
+  --lobe-green-3-a: rgba(60, 190, 10, 0.14);
+  --lobe-green-4-a: rgba(40, 174, 1, 0.26);
+  --lobe-green-5-a: rgba(28, 164, 3, 0.33);
+  --lobe-green-6-a: rgba(18, 155, 5, 0.4);
+  --lobe-green-7-a: rgba(4, 146, 6, 0.47);
+  --lobe-green-8-a: rgba(1, 144, 16, 0.56);
+  --lobe-green-9-a: rgba(1, 143, 28, 0.67);
+  --lobe-green-10-a: #007944;
+  --lobe-green-11-a: #003f28;
+  --lobe-green-fill: rgba(40, 174, 1, 0.26);
+  --lobe-green-fill-secondary: rgba(60, 190, 10, 0.14);
+  --lobe-green-fill-tertiary: rgba(84, 205, 12, 0.10);
+  --lobe-green-fill-quaternary: rgba(117, 230, 5, 0.06);
+  --lobe-green-bg: rgba(117, 230, 5, 0.06);
+  --lobe-green-bg-hover: rgba(84, 205, 12, 0.10);
+  --lobe-green-border: #c7eabd;
+  --lobe-green-border-secondary: #d8f2ce;
+  --lobe-green-border-hover: #d8f2ce;
+  --lobe-green-hover: #71c179;
+  --lobe-green: #379d4a;
+  --lobe-green-active: #007944;
+  --lobe-green-text-hover: rgba(1, 144, 16, 0.56);
+  --lobe-green-text: rgba(1, 143, 28, 0.67);
+  --lobe-green-text-active: #007944;
+  --lobe-lime-1: #feffeb;
+  --lobe-lime-2: #f9ffd8;
+  --lobe-lime-3: #f2ffc1;
+  --lobe-lime-4: #ebfdaf;
+  --lobe-lime-5: #e4fc9b;
+  --lobe-lime-6: #ddf987;
+  --lobe-lime-7: #d5f773;
+  --lobe-lime-8: #cdf35c;
+  --lobe-lime-9: #c4f042;
+  --lobe-lime-10: #769d00;
+  --lobe-lime-11: #374f00;
+  --lobe-lime-1-a: rgba(242, 255, 5, 0.08);
+  --lobe-lime-2-a: rgba(218, 255, 11, 0.16);
+  --lobe-lime-3-a: rgba(203, 255, 7, 0.25);
+  --lobe-lime-4-a: rgba(193, 249, 5, 0.32);
+  --lobe-lime-5-a: rgba(187, 247, 5, 0.4);
+  --lobe-lime-6-a: rgba(183, 242, 0, 0.47);
+  --lobe-lime-7-a: rgba(179, 240, 0, 0.55);
+  --lobe-lime-8-a: rgba(177, 236, 0, 0.64);
+  --lobe-lime-9-a: rgba(175, 235, 0, 0.74);
+  --lobe-lime-10-a: #769d00;
+  --lobe-lime-11-a: #374f00;
+  --lobe-lime-fill: rgba(193, 249, 5, 0.32);
+  --lobe-lime-fill-secondary: rgba(203, 255, 7, 0.25);
+  --lobe-lime-fill-tertiary: rgba(218, 255, 11, 0.16);
+  --lobe-lime-fill-quaternary: rgba(242, 255, 5, 0.08);
+  --lobe-lime-bg: rgba(242, 255, 5, 0.08);
+  --lobe-lime-bg-hover: rgba(218, 255, 11, 0.16);
+  --lobe-lime-border: #ebfdaf;
+  --lobe-lime-border-secondary: #f2ffc1;
+  --lobe-lime-border-hover: #f2ffc1;
+  --lobe-lime-hover: #cdf35c;
+  --lobe-lime: #c4f042;
+  --lobe-lime-active: #769d00;
+  --lobe-lime-text-hover: rgba(177, 236, 0, 0.64);
+  --lobe-lime-text: rgba(175, 235, 0, 0.74);
+  --lobe-lime-text-active: #769d00;
+  --lobe-magenta-1: #fff7f9;
+  --lobe-magenta-2: #ffeaf4;
+  --lobe-magenta-3: #ffdaee;
+  --lobe-magenta-4: #ffc7e7;
+  --lobe-magenta-5: #ffb2df;
+  --lobe-magenta-6: #ff99d6;
+  --lobe-magenta-7: #f980ca;
+  --lobe-magenta-8: #ef67ba;
+  --lobe-magenta-9: #e34ba9;
+  --lobe-magenta-10: #a32466;
+  --lobe-magenta-11: #63002d;
+  --lobe-magenta-1-a: rgba(255, 55, 105, 0.04);
+  --lobe-magenta-2-a: rgba(255, 22, 133, 0.09);
+  --lobe-magenta-3-a: rgba(255, 8, 142, 0.15);
+  --lobe-magenta-4-a: rgba(255, 0, 146, 0.22);
+  --lobe-magenta-5-a: rgba(255, 7, 152, 0.31);
+  --lobe-magenta-6-a: rgba(255, 0, 153, 0.4);
+  --lobe-magenta-7-a: rgba(243, 1, 149, 0.5);
+  --lobe-magenta-8-a: rgba(228, 2, 140, 0.6);
+  --lobe-magenta-9-a: rgba(216, 1, 134, 0.71);
+  --lobe-magenta-10-a: rgba(148, 0, 77, 0.86);
+  --lobe-magenta-11-a: #63002d;
+  --lobe-magenta-fill: rgba(255, 0, 146, 0.22);
+  --lobe-magenta-fill-secondary: rgba(255, 8, 142, 0.15);
+  --lobe-magenta-fill-tertiary: rgba(255, 22, 133, 0.09);
+  --lobe-magenta-fill-quaternary: rgba(255, 55, 105, 0.04);
+  --lobe-magenta-bg: rgba(255, 55, 105, 0.04);
+  --lobe-magenta-bg-hover: rgba(255, 22, 133, 0.09);
+  --lobe-magenta-border: #ffc7e7;
+  --lobe-magenta-border-secondary: #ffdaee;
+  --lobe-magenta-border-hover: #ffdaee;
+  --lobe-magenta-hover: #ef67ba;
+  --lobe-magenta: #e34ba9;
+  --lobe-magenta-active: #a32466;
+  --lobe-magenta-text-hover: rgba(228, 2, 140, 0.6);
+  --lobe-magenta-text: rgba(216, 1, 134, 0.71);
+  --lobe-magenta-text-active: rgba(148, 0, 77, 0.86);
+  --lobe-orange-1: #fffcff;
+  --lobe-orange-2: #fff8f6;
+  --lobe-orange-3: #fff1eb;
+  --lobe-orange-4: #ffe9dd;
+  --lobe-orange-5: #ffdeca;
+  --lobe-orange-6: #ffd1b1;
+  --lobe-orange-7: #ffc293;
+  --lobe-orange-8: #ffb06a;
+  --lobe-orange-9: #f88c13;
+  --lobe-orange-10: #d18000;
+  --lobe-orange-11: #684100;
+  --lobe-orange-1-a: rgba(255, 105, 255, 0.03);
+  --lobe-orange-2-a: rgba(255, 80, 30, 0.08);
+  --lobe-orange-3-a: rgba(255, 80, 5, 0.12);
+  --lobe-orange-4-a: rgba(255, 98, 12, 0.16);
+  --lobe-orange-5-a: rgba(255, 98, 3, 0.21);
+  --lobe-orange-6-a: rgba(255, 107, 3, 0.31);
+  --lobe-orange-7-a: rgba(255, 113, 4, 0.43);
+  --lobe-orange-8-a: rgba(255, 121, 2, 0.59);
+  --lobe-orange-9-a: rgba(255, 135, 1, 0.85);
+  --lobe-orange-10-a: #d18000;
+  --lobe-orange-11-a: #684100;
+  --lobe-orange-fill: rgba(255, 98, 12, 0.16);
+  --lobe-orange-fill-secondary: rgba(255, 80, 5, 0.12);
+  --lobe-orange-fill-tertiary: rgba(255, 80, 30, 0.08);
+  --lobe-orange-fill-quaternary: rgba(255, 105, 255, 0.03);
+  --lobe-orange-bg: rgba(255, 105, 255, 0.03);
+  --lobe-orange-bg-hover: rgba(255, 80, 30, 0.08);
+  --lobe-orange-border: #ffe9dd;
+  --lobe-orange-border-secondary: #fff1eb;
+  --lobe-orange-border-hover: #fff1eb;
+  --lobe-orange-hover: #ffb06a;
+  --lobe-orange: #f88c13;
+  --lobe-orange-active: #d18000;
+  --lobe-orange-text-hover: rgba(255, 121, 2, 0.59);
+  --lobe-orange-text: rgba(255, 135, 1, 0.85);
+  --lobe-orange-text-active: #d18000;
+  --lobe-primary-1: #f5f5f5;
+  --lobe-primary-2: #eeeeee;
+  --lobe-primary-3: #cccccc;
+  --lobe-primary-4: #aaaaaa;
+  --lobe-primary-5: #888888;
+  --lobe-primary-6: #666666;
+  --lobe-primary-7: #444444;
+  --lobe-primary-8: #333333;
+  --lobe-primary-9: #222222;
+  --lobe-primary-10: #111111;
+  --lobe-primary-11: #0b0b0b;
+  --lobe-primary-1-a: rgba(0, 0, 0, 0.08);
+  --lobe-primary-2-a: rgba(0, 0, 0, 0.16);
+  --lobe-primary-3-a: rgba(0, 0, 0, 0.22);
+  --lobe-primary-4-a: rgba(0, 0, 0, 0.36);
+  --lobe-primary-5-a: rgba(0, 0, 0, 0.48);
+  --lobe-primary-6-a: rgba(0, 0, 0, 0.6);
+  --lobe-primary-7-a: rgba(0, 0, 0, 0.72);
+  --lobe-primary-8-a: rgba(0, 0, 0, 0.84);
+  --lobe-primary-9-a: rgba(0, 0, 0, 0.88);
+  --lobe-primary-10-a: rgba(0, 0, 0, 0.92);
+  --lobe-primary-11-a: rgba(0, 0, 0, 0.96);
+  --lobe-primary-fill: rgba(0, 0, 0, 0.36);
+  --lobe-primary-fill-secondary: rgba(0, 0, 0, 0.22);
+  --lobe-primary-fill-tertiary: rgba(0, 0, 0, 0.16);
+  --lobe-primary-fill-quaternary: rgba(0, 0, 0, 0.08);
+  --lobe-primary-bg: rgba(0, 0, 0, 0.08);
+  --lobe-primary-bg-hover: rgba(0, 0, 0, 0.16);
+  --lobe-primary-border: #aaaaaa;
+  --lobe-primary-border-secondary: #cccccc;
+  --lobe-primary-border-hover: #cccccc;
+  --lobe-primary-hover: #333333;
+  --lobe-primary: #222222;
+  --lobe-primary-active: #111111;
+  --lobe-primary-text-hover: rgba(0, 0, 0, 0.84);
+  --lobe-primary-text: rgba(0, 0, 0, 0.88);
+  --lobe-primary-text-active: rgba(0, 0, 0, 0.92);
+  --lobe-purple-1: #fff6fb;
+  --lobe-purple-2: #ffe7fd;
+  --lobe-purple-3: #fdd6fe;
+  --lobe-purple-4: #f6c4f8;
+  --lobe-purple-5: #eeb1f1;
+  --lobe-purple-6: #e49ce8;
+  --lobe-purple-7: #d886de;
+  --lobe-purple-8: #cb6ed2;
+  --lobe-purple-9: #bd54c6;
+  --lobe-purple-10: #892b8a;
+  --lobe-purple-11: #560053;
+  --lobe-purple-1-a: rgba(255, 30, 155, 0.04);
+  --lobe-purple-2-a: rgba(255, 15, 235, 0.08);
+  --lobe-purple-3-a: rgba(243, 14, 249, 0.16);
+  --lobe-purple-4-a: rgba(218, 9, 226, 0.24);
+  --lobe-purple-5-a: rgba(200, 3, 210, 0.31);
+  --lobe-purple-6-a: rgba(186, 1, 196, 0.39);
+  --lobe-purple-7-a: rgba(174, 3, 186, 0.48);
+  --lobe-purple-8-a: rgba(164, 1, 176, 0.57);
+  --lobe-purple-9-a: rgba(156, 0, 170, 0.67);
+  --lobe-purple-10-a: rgba(113, 0, 114, 0.83);
+  --lobe-purple-11-a: #560053;
+  --lobe-purple-fill: rgba(218, 9, 226, 0.24);
+  --lobe-purple-fill-secondary: rgba(243, 14, 249, 0.16);
+  --lobe-purple-fill-tertiary: rgba(255, 15, 235, 0.08);
+  --lobe-purple-fill-quaternary: rgba(255, 30, 155, 0.04);
+  --lobe-purple-bg: rgba(255, 30, 155, 0.04);
+  --lobe-purple-bg-hover: rgba(255, 15, 235, 0.08);
+  --lobe-purple-border: #f6c4f8;
+  --lobe-purple-border-secondary: #fdd6fe;
+  --lobe-purple-border-hover: #fdd6fe;
+  --lobe-purple-hover: #cb6ed2;
+  --lobe-purple: #bd54c6;
+  --lobe-purple-active: #892b8a;
+  --lobe-purple-text-hover: rgba(164, 1, 176, 0.57);
+  --lobe-purple-text: rgba(156, 0, 170, 0.67);
+  --lobe-purple-text-active: rgba(113, 0, 114, 0.83);
+  --lobe-red-1: #fffbff;
+  --lobe-red-2: #fff3f3;
+  --lobe-red-3: #ffe8e8;
+  --lobe-red-4: #ffdadb;
+  --lobe-red-5: #ffc7ca;
+  --lobe-red-6: #ffb0b7;
+  --lobe-red-7: #ff94a1;
+  --lobe-red-8: #ff6f87;
+  --lobe-red-9: #f4416c;
+  --lobe-red-10: #d6225d;
+  --lobe-red-11: #780032;
+  --lobe-red-1-a: rgba(255, 55, 255, 0.02);
+  --lobe-red-2-a: rgba(255, 15, 15, 0.05);
+  --lobe-red-3-a: rgba(255, 25, 25, 0.1);
+  --lobe-red-4-a: rgba(255, 8, 15, 0.15);
+  --lobe-red-5-a: rgba(255, 0, 14, 0.22);
+  --lobe-red-6-a: rgba(255, 0, 23, 0.31);
+  --lobe-red-7-a: rgba(255, 0, 31, 0.42);
+  --lobe-red-8-a: rgba(255, 2, 44, 0.57);
+  --lobe-red-9-a: rgba(240, 2, 59, 0.75);
+  --lobe-red-10-a: rgba(208, 1, 69, 0.87);
+  --lobe-red-11-a: #780032;
+  --lobe-red-fill: rgba(255, 8, 15, 0.15);
+  --lobe-red-fill-secondary: rgba(255, 25, 25, 0.1);
+  --lobe-red-fill-tertiary: rgba(255, 15, 15, 0.05);
+  --lobe-red-fill-quaternary: rgba(255, 55, 255, 0.02);
+  --lobe-red-bg: rgba(255, 55, 255, 0.02);
+  --lobe-red-bg-hover: rgba(255, 15, 15, 0.05);
+  --lobe-red-border: #ffdadb;
+  --lobe-red-border-secondary: #ffe8e8;
+  --lobe-red-border-hover: #ffe8e8;
+  --lobe-red-hover: #ff6f87;
+  --lobe-red: #f4416c;
+  --lobe-red-active: #d6225d;
+  --lobe-red-text-hover: rgba(255, 2, 44, 0.57);
+  --lobe-red-text: rgba(240, 2, 59, 0.75);
+  --lobe-red-text-active: rgba(208, 1, 69, 0.87);
+  --lobe-volcano-1: #fff7f6;
+  --lobe-volcano-2: #ffece9;
+  --lobe-volcano-3: #ffded9;
+  --lobe-volcano-4: #ffcec5;
+  --lobe-volcano-5: #ffbbaf;
+  --lobe-volcano-6: #ffa695;
+  --lobe-volcano-7: #ff8e78;
+  --lobe-volcano-8: #fb745a;
+  --lobe-volcano-9: #ec5e41;
+  --lobe-volcano-10: #a53716;
+  --lobe-volcano-11: #5d1900;
+  --lobe-volcano-1-a: rgba(255, 55, 30, 0.04);
+  --lobe-volcano-2-a: rgba(255, 44, 11, 0.06);
+  --lobe-volcano-3-a: rgba(255, 35, 2, 0.12);
+  --lobe-volcano-4-a: rgba(255, 42, 3, 0.20);
+  --lobe-volcano-5-a: rgba(255, 43, 5, 0.32);
+  --lobe-volcano-6-a: rgba(255, 43, 3, 0.42);
+  --lobe-volcano-7-a: rgba(255, 42, 0, 0.53);
+  --lobe-volcano-8-a: rgba(249, 41, 1, 0.65);
+  --lobe-volcano-9-a: rgba(230, 40, 2, 0.75);
+  --lobe-volcano-10-a: rgba(157, 38, 2, 0.92);
+  --lobe-volcano-11-a: #5d1900;
+  --lobe-volcano-fill: rgba(255, 42, 3, 0.20);
+  --lobe-volcano-fill-secondary: rgba(255, 35, 2, 0.12);
+  --lobe-volcano-fill-tertiary: rgba(255, 44, 11, 0.06);
+  --lobe-volcano-fill-quaternary: rgba(255, 55, 30, 0.04);
+  --lobe-volcano-bg: rgba(255, 55, 30, 0.04);
+  --lobe-volcano-bg-hover: rgba(255, 44, 11, 0.06);
+  --lobe-volcano-border: #ffcec5;
+  --lobe-volcano-border-secondary: #ffded9;
+  --lobe-volcano-border-hover: #ffded9;
+  --lobe-volcano-hover: #fb745a;
+  --lobe-volcano: #ec5e41;
+  --lobe-volcano-active: #a53716;
+  --lobe-volcano-text-hover: rgba(249, 41, 1, 0.65);
+  --lobe-volcano-text: rgba(230, 40, 2, 0.75);
+  --lobe-volcano-text-active: rgba(157, 38, 2, 0.92);
+  --lobe-yellow-1: #fffeff;
+  --lobe-yellow-2: #fffcff;
+  --lobe-yellow-3: #fffbf1;
+  --lobe-yellow-4: #fffada;
+  --lobe-yellow-5: #fff9c2;
+  --lobe-yellow-6: #fff7aa;
+  --lobe-yellow-7: #fff592;
+  --lobe-yellow-8: #fff279;
+  --lobe-yellow-9: #ffef5c;
+  --lobe-yellow-10: #ab9800;
+  --lobe-yellow-11: #584a00;
+  --lobe-yellow-1-a: rgba(255, 155, 255, 0.01);
+  --lobe-yellow-2-a: rgba(255, 105, 255, 0.02);
+  --lobe-yellow-3-a: rgba(255, 188, 22, 0.06);
+  --lobe-yellow-4-a: rgba(255, 222, 8, 0.15);
+  --lobe-yellow-5-a: rgba(255, 230, 1, 0.24);
+  --lobe-yellow-6-a: rgba(255, 231, 5, 0.34);
+  --lobe-yellow-7-a: rgba(255, 232, 2, 0.43);
+  --lobe-yellow-8-a: rgba(255, 230, 2, 0.53);
+  --lobe-yellow-9-a: rgba(255, 230, 0, 0.64);
+  --lobe-yellow-10-a: #ab9800;
+  --lobe-yellow-11-a: #584a00;
+  --lobe-yellow-fill: rgba(255, 222, 8, 0.15);
+  --lobe-yellow-fill-secondary: rgba(255, 188, 22, 0.06);
+  --lobe-yellow-fill-tertiary: rgba(255, 105, 255, 0.02);
+  --lobe-yellow-fill-quaternary: rgba(255, 155, 255, 0.01);
+  --lobe-yellow-bg: rgba(255, 155, 255, 0.01);
+  --lobe-yellow-bg-hover: rgba(255, 105, 255, 0.02);
+  --lobe-yellow-border: #fffada;
+  --lobe-yellow-border-secondary: #fffbf1;
+  --lobe-yellow-border-hover: #fffbf1;
+  --lobe-yellow-hover: #fff279;
+  --lobe-yellow: #ffef5c;
+  --lobe-yellow-active: #ab9800;
+  --lobe-yellow-text-hover: rgba(255, 230, 2, 0.53);
+  --lobe-yellow-text: rgba(255, 230, 0, 0.64);
+  --lobe-yellow-text-active: #ab9800;
+  --lobe-box-shadow: 0 40px 80px rgba(0, 0, 0, 0.06), 0 20px 40px rgba(0, 0, 0, 0.05), 0 10px 20px rgba(0, 0, 0, 0.04), 0 5px 10px rgba(0, 0, 0, 0.03), 0 2px 4px rgba(0, 0, 0, 0.02);
+  --lobe-box-shadow-secondary: 0 17.5px 23.4px rgba(0, 0, 0, 0.04), 0 9.4px 12.5px rgba(0, 0, 0, 0.03), 0 5.25px 7px rgba(0, 0, 0, 0.02), 0 2.8px 3.7px -2px rgba(0, 0, 0, 0.01), 0 1.2px 1.5px rgba(0, 0, 0, 0.01);
+  --lobe-box-shadow-tertiary: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.02);
+  --lobe-color-error-affix: #ec5e41;
+  --lobe-color-highlight: #ec5e41;
+  --lobe-color-link: #0072f5;
+  --lobe-color-link-active: #005ae0;
+  --lobe-color-link-hover: #4c90ff;
+  --lobe-color-warning-affix: #ee9e0b;
+  --lobe-color-primary-fill: rgba(0, 0, 0, 0.36);
+  --lobe-color-primary-fill-secondary: rgba(0, 0, 0, 0.22);
+  --lobe-color-primary-fill-tertiary: rgba(0, 0, 0, 0.16);
+  --lobe-color-primary-fill-quaternary: rgba(0, 0, 0, 0.08);
+  --lobe-color-primary-bg: #f5f5f5;
+  --lobe-color-primary-bg-hover: #eeeeee;
+  --lobe-color-primary-border: #aaaaaa;
+  --lobe-color-primary-border-hover: #cccccc;
+  --lobe-color-primary-hover: #333333;
+  --lobe-color-primary: #222222;
+  --lobe-color-primary-active: #111111;
+  --lobe-color-primary-text-hover: #333333;
+  --lobe-color-primary-text: #222222;
+  --lobe-color-primary-text-active: #111111;
+  --lobe-control-item-bg-active: #f5f5f5;
+  --lobe-control-item-bg-active-hover: #eeeeee;
+  --lobe-color-bg-container: #ffffff;
+  --lobe-color-bg-elevated: #ffffff;
+  --lobe-color-bg-layout: #f8f8f8;
+  --lobe-color-bg-mask: rgba(0, 0, 0, 0.44);
+  --lobe-color-bg-spotlight: #dddddd;
+  --lobe-color-border: #e3e3e3;
+  --lobe-color-border-secondary: #eeeeee;
+  --lobe-color-fill: rgba(0, 0, 0, 0.12);
+  --lobe-color-fill-quaternary: rgba(0, 0, 0, 0.015);
+  --lobe-color-fill-secondary: rgba(0, 0, 0, 0.06);
+  --lobe-color-fill-tertiary: rgba(0, 0, 0, 0.03);
+  --lobe-color-text: #080808;
+  --lobe-color-text-quaternary: #bbbbbb;
+  --lobe-color-text-secondary: #666666;
+  --lobe-color-text-tertiary: #999999;
+  --lobe-color-bg-container-disabled: rgba(0, 0, 0, 0.03);
+  --lobe-color-bg-container-secondary: #fbfbfb;
+  --lobe-color-bg-text-active: rgba(0, 0, 0, 0.12);
+  --lobe-color-bg-text-hover: rgba(0, 0, 0, 0.06);
+  --lobe-color-border-bg: #ffffff;
+  --lobe-color-error-outline: rgba(255,55,30,0.04);
+  --lobe-color-fill-alter: rgba(0, 0, 0, 0.015);
+  --lobe-color-fill-content: rgba(0, 0, 0, 0.06);
+  --lobe-color-fill-content-hover: rgba(0, 0, 0, 0.12);
+  --lobe-color-icon: #999999;
+  --lobe-color-icon-hover: #080808;
+  --lobe-color-split: rgba(12,12,12,0.07);
+  --lobe-color-text-description: #999999;
+  --lobe-color-text-disabled: #bbbbbb;
+  --lobe-color-text-heading: #080808;
+  --lobe-color-text-label: #666666;
+  --lobe-color-text-placeholder: #bbbbbb;
+  --lobe-color-warning-outline: rgba(255,55,255,0.01);
+  --lobe-control-item-bg-active-disabled: rgba(0, 0, 0, 0.12);
+  --lobe-control-item-bg-hover: rgba(0, 0, 0, 0.03);
+  --lobe-control-tmp-outline: rgba(0, 0, 0, 0.015);
+  --lobe-ring: 0 0 0 1px rgb(0 0 0 / 5%);
+  color-scheme: light;
+}
+
+[data-theme='dark'] {
+  --lobe-box-shadow-card: 0 1px 2px -2px rgba(255,255,255,0.032), 0 3px 6px 0 rgba(255,255,255,0.024), 0 5px 12px 4px rgba(255,255,255,0.018);
+  --lobe-box-shadow-drawer-down: 0 -6px 16px 0 rgba(255,255,255,0.016), 0 -3px 6px -4px rgba(255,255,255,0.024), 0 -9px 28px 8px rgba(255,255,255,0.010000000000000002);
+  --lobe-box-shadow-drawer-left: 6px 0 16px 0 rgba(255,255,255,0.016), 3px 0 6px -4px rgba(255,255,255,0.024), 9px 0 28px 8px rgba(255,255,255,0.010000000000000002);
+  --lobe-box-shadow-drawer-right: -6px 0 16px 0 rgba(255,255,255,0.016), -3px 0 6px -4px rgba(255,255,255,0.024), -9px 0 28px 8px rgba(255,255,255,0.010000000000000002);
+  --lobe-box-shadow-drawer-up: 0 6px 16px 0 rgba(255,255,255,0.016), 0 3px 6px -4px rgba(255,255,255,0.024), 0 9px 28px 8px rgba(255,255,255,0.010000000000000002);
+  --lobe-box-shadow-popover-arrow: 2px 2px 5px rgba(255,255,255,0.010000000000000002);
+  --lobe-box-shadow-tabs-overflow-bottom: inset 0 -10px 8px -8px rgba(255,255,255,0.016);
+  --lobe-box-shadow-tabs-overflow-left: inset 10px 0 8px -8px rgba(255,255,255,0.016);
+  --lobe-box-shadow-tabs-overflow-right: inset -10px 0 8px -8px rgba(255,255,255,0.016);
+  --lobe-box-shadow-tabs-overflow-top: inset 0 10px 8px -8px rgba(255,255,255,0.016);
+  --lobe-color-bg-base: #000;
+  --lobe-color-bg-blur: rgba(255,255,255,0.04);
+  --lobe-color-bg-solid: rgba(255,255,255,0.95);
+  --lobe-color-bg-solid-active: rgba(255,255,255,0.9);
+  --lobe-color-bg-solid-hover: rgb(255,255,255);
+  --lobe-color-border-disabled: #424242;
+  --lobe-color-error-bg-active: #5b2526;
+  --lobe-color-error-bg-filled-hover: #441e1f;
+  --lobe-color-shadow: rgba(255, 255, 255, 0.2);
+  --lobe-color-text-base: #fff;
+  --lobe-drop-shadow-popover: drop-shadow(0 6px 16px rgba(255,255,255,0.016)) drop-shadow(0 3px 6px rgba(255,255,255,0.024)) drop-shadow(0 9px 28px rgba(255,255,255,0.010000000000000002));
+  --lobe-pink-1: #291321;
+  --lobe-pink-10: #fad2e3;
+  --lobe-pink-2: #40162f;
+  --lobe-pink-3: #551c3b;
+  --lobe-pink-4: #75204f;
+  --lobe-pink-5: #a02669;
+  --lobe-pink-6: #cb2b83;
+  --lobe-pink-7: #e0529c;
+  --lobe-pink-8: #f37fb7;
+  --lobe-pink-9: #f8a8cc;
+  --lobe-pink-active: #e0529c;
+  --lobe-pink-hover: #a02669;
+  --lobe-color-error-fill: rgba(255, 0, 106, 0.47);
+  --lobe-color-error-fill-secondary: rgba(253, 0, 103, 0.34);
+  --lobe-color-error-fill-tertiary: rgba(255, 0, 95, 0.22);
+  --lobe-color-error-fill-quaternary: rgba(250, 0, 50, 0.06);
+  --lobe-color-error-bg: #380015;
+  --lobe-color-error-bg-hover: #560023;
+  --lobe-color-error-border: #9d0042;
+  --lobe-color-error-border-hover: #c10251;
+  --lobe-color-error-hover: #ffb0b7;
+  --lobe-color-error: #f4416c;
+  --lobe-color-error-active: #e43165;
+  --lobe-color-error-text-hover: #ffb0b7;
+  --lobe-color-error-text: #f4416c;
+  --lobe-color-error-text-active: #e43165;
+  --lobe-color-info-fill: rgba(0, 123, 252, 0.48);
+  --lobe-color-info-fill-secondary: rgba(0, 111, 253, 0.36);
+  --lobe-color-info-fill-tertiary: rgba(0, 88, 246, 0.26);
+  --lobe-color-info-fill-quaternary: rgba(0, 44, 233, 0.09);
+  --lobe-color-info-bg: #001740;
+  --lobe-color-info-bg-hover: #00285b;
+  --lobe-color-info-border: #004f98;
+  --lobe-color-info-border-hover: #0064b6;
+  --lobe-color-info-hover: #a7d3ff;
+  --lobe-color-info: #60b1ff;
+  --lobe-color-info-active: #2d8ae0;
+  --lobe-color-info-text-hover: #a7d3ff;
+  --lobe-color-info-text: #60b1ff;
+  --lobe-color-info-text-active: #2d8ae0;
+  --lobe-color-success-fill: rgba(177, 255, 0, 0.31);
+  --lobe-color-success-fill-secondary: rgba(168, 250, 0, 0.22);
+  --lobe-color-success-fill-tertiary: rgba(154, 254, 0, 0.13);
+  --lobe-color-success-fill-quaternary: rgba(100, 200, 0, 0.02);
+  --lobe-color-success-bg: #142100;
+  --lobe-color-success-bg-hover: #253700;
+  --lobe-color-success-border: #4b6800;
+  --lobe-color-success-border-hover: #608200;
+  --lobe-color-success-hover: #daf685;
+  --lobe-color-success: #c4f042;
+  --lobe-color-success-active: #8fb81b;
+  --lobe-color-success-text-hover: #daf685;
+  --lobe-color-success-text: #c4f042;
+  --lobe-color-success-text-active: #8fb81b;
+  --lobe-color-warning-fill: rgba(252, 174, 0, 0.42);
+  --lobe-color-warning-fill-secondary: rgba(248, 166, 0, 0.29);
+  --lobe-color-warning-fill-tertiary: rgba(247, 159, 0, 0.17);
+  --lobe-color-warning-fill-quaternary: rgba(233, 100, 0, 0.03);
+  --lobe-color-warning-bg: #2a1b00;
+  --lobe-color-warning-bg-hover: #483000;
+  --lobe-color-warning-border: #916400;
+  --lobe-color-warning-border-hover: #b77e00;
+  --lobe-color-warning-hover: #ffdcaf;
+  --lobe-color-warning: #ffb224;
+  --lobe-color-warning-active: #eaa100;
+  --lobe-color-warning-text-hover: #ffdcaf;
+  --lobe-color-warning-text: #ffb224;
+  --lobe-color-warning-text-active: #eaa100;
+  --lobe-blue-1: #001740;
+  --lobe-blue-2: #00285b;
+  --lobe-blue-3: #003b79;
+  --lobe-blue-4: #004f98;
+  --lobe-blue-5: #0064b6;
+  --lobe-blue-6: #0d78ce;
+  --lobe-blue-7: #2d8ae0;
+  --lobe-blue-8: #439aed;
+  --lobe-blue-9: #60b1ff;
+  --lobe-blue-10: #a7d3ff;
+  --lobe-blue-11: #e0f0ff;
+  --lobe-blue-1-a: rgba(0, 88, 246, 0.26);
+  --lobe-blue-2-a: rgba(0, 111, 253, 0.36);
+  --lobe-blue-3-a: rgba(0, 123, 252, 0.48);
+  --lobe-blue-4-a: rgba(0, 132, 253, 0.6);
+  --lobe-blue-5-a: rgba(0, 139, 253, 0.72);
+  --lobe-blue-6-a: rgba(16, 148, 254, 0.81);
+  --lobe-blue-7-a: rgba(51, 157, 255, 0.88);
+  --lobe-blue-8-a: rgba(72, 166, 255, 0.93);
+  --lobe-blue-9-a: #60b1ff;
+  --lobe-blue-10-a: #a7d3ff;
+  --lobe-blue-11-a: #e0f0ff;
+  --lobe-blue-fill: rgba(0, 123, 252, 0.48);
+  --lobe-blue-fill-secondary: rgba(0, 111, 253, 0.36);
+  --lobe-blue-fill-tertiary: rgba(0, 88, 246, 0.26);
+  --lobe-blue-fill-quaternary: rgba(0, 44, 233, 0.09);
+  --lobe-blue-bg: rgba(0, 88, 246, 0.26);
+  --lobe-blue-bg-hover: rgba(0, 111, 253, 0.36);
+  --lobe-blue-border: #004f98;
+  --lobe-blue-border-secondary: #003b79;
+  --lobe-blue-border-hover: #0064b6;
+  --lobe-blue-hover: #a7d3ff;
+  --lobe-blue: #60b1ff;
+  --lobe-blue-active: #2d8ae0;
+  --lobe-blue-text-hover: #a7d3ff;
+  --lobe-blue-text: #60b1ff;
+  --lobe-blue-text-active: rgba(51, 157, 255, 0.88);
+  --lobe-cyan-1: #00221c;
+  --lobe-cyan-2: #003930;
+  --lobe-cyan-3: #005245;
+  --lobe-cyan-4: #006c5b;
+  --lobe-cyan-5: #008772;
+  --lobe-cyan-6: #2fa28a;
+  --lobe-cyan-7: #55bca4;
+  --lobe-cyan-8: #75d7be;
+  --lobe-cyan-9: #95f3d9;
+  --lobe-cyan-10: #bdf7e4;
+  --lobe-cyan-11: #dffcf0;
+  --lobe-cyan-1-a: rgba(0, 243, 200, 0.14);
+  --lobe-cyan-2-a: rgba(0, 248, 209, 0.23);
+  --lobe-cyan-3-a: rgba(0, 248, 209, 0.33);
+  --lobe-cyan-4-a: rgba(0, 251, 212, 0.43);
+  --lobe-cyan-5-a: rgba(0, 255, 215, 0.53);
+  --lobe-cyan-6-a: rgba(73, 253, 216, 0.64);
+  --lobe-cyan-7-a: rgba(115, 254, 222, 0.74);
+  --lobe-cyan-8-a: rgba(138, 253, 224, 0.85);
+  --lobe-cyan-9-a: rgba(155, 253, 226, 0.96);
+  --lobe-cyan-10-a: rgba(195, 255, 235, 0.97);
+  --lobe-cyan-11-a: rgba(225, 255, 242, 0.99);
+  --lobe-cyan-fill: rgba(0, 248, 209, 0.33);
+  --lobe-cyan-fill-secondary: rgba(0, 248, 209, 0.23);
+  --lobe-cyan-fill-tertiary: rgba(0, 243, 200, 0.14);
+  --lobe-cyan-fill-quaternary: rgba(0, 250, 150, 0.02);
+  --lobe-cyan-bg: rgba(0, 243, 200, 0.14);
+  --lobe-cyan-bg-hover: rgba(0, 248, 209, 0.23);
+  --lobe-cyan-border: #006c5b;
+  --lobe-cyan-border-secondary: #005245;
+  --lobe-cyan-border-hover: #008772;
+  --lobe-cyan-hover: #bdf7e4;
+  --lobe-cyan: #95f3d9;
+  --lobe-cyan-active: #55bca4;
+  --lobe-cyan-text-hover: rgba(195, 255, 235, 0.97);
+  --lobe-cyan-text: rgba(155, 253, 226, 0.96);
+  --lobe-cyan-text-active: rgba(115, 254, 222, 0.74);
+  --lobe-geekblue-1: #000d4c;
+  --lobe-geekblue-2: #001a69;
+  --lobe-geekblue-3: #002a8a;
+  --lobe-geekblue-4: #003bac;
+  --lobe-geekblue-5: #004cca;
+  --lobe-geekblue-6: #005ae0;
+  --lobe-geekblue-7: #0065ed;
+  --lobe-geekblue-8: #006cf3;
+  --lobe-geekblue-9: #0072f5;
+  --lobe-geekblue-10: #9abeff;
+  --lobe-geekblue-11: #e2ebff;
+  --lobe-geekblue-1-a: rgba(0, 43, 253, 0.3);
+  --lobe-geekblue-2-a: rgba(0, 62, 250, 0.42);
+  --lobe-geekblue-3-a: rgba(0, 76, 251, 0.55);
+  --lobe-geekblue-4-a: rgba(0, 87, 253, 0.68);
+  --lobe-geekblue-5-a: rgba(0, 95, 252, 0.8);
+  --lobe-geekblue-6-a: rgba(0, 102, 255, 0.88);
+  --lobe-geekblue-7-a: rgba(0, 109, 255, 0.93);
+  --lobe-geekblue-8-a: rgba(0, 112, 253, 0.96);
+  --lobe-geekblue-9-a: rgba(0, 119, 255, 0.96);
+  --lobe-geekblue-10-a: #9abeff;
+  --lobe-geekblue-11-a: #e2ebff;
+  --lobe-geekblue-fill: rgba(0, 76, 251, 0.55);
+  --lobe-geekblue-fill-secondary: rgba(0, 62, 250, 0.42);
+  --lobe-geekblue-fill-tertiary: rgba(0, 43, 253, 0.3);
+  --lobe-geekblue-fill-quaternary: rgba(0, 18, 245, 0.11);
+  --lobe-geekblue-bg: rgba(0, 43, 253, 0.3);
+  --lobe-geekblue-bg-hover: rgba(0, 62, 250, 0.42);
+  --lobe-geekblue-border: #003bac;
+  --lobe-geekblue-border-secondary: #002a8a;
+  --lobe-geekblue-border-hover: #004cca;
+  --lobe-geekblue-hover: #9abeff;
+  --lobe-geekblue: #0072f5;
+  --lobe-geekblue-active: #0065ed;
+  --lobe-geekblue-text-hover: #9abeff;
+  --lobe-geekblue-text: rgba(0, 119, 255, 0.96);
+  --lobe-geekblue-text-active: rgba(0, 109, 255, 0.93);
+  --lobe-gold-1: #2a1b00;
+  --lobe-gold-2: #483000;
+  --lobe-gold-3: #6a4900;
+  --lobe-gold-4: #916400;
+  --lobe-gold-5: #b77e00;
+  --lobe-gold-6: #d59300;
+  --lobe-gold-7: #eaa100;
+  --lobe-gold-8: #f8aa00;
+  --lobe-gold-9: #ffb224;
+  --lobe-gold-10: #ffdcaf;
+  --lobe-gold-11: #fff4eb;
+  --lobe-gold-1-a: rgba(247, 159, 0, 0.17);
+  --lobe-gold-2-a: rgba(248, 166, 0, 0.29);
+  --lobe-gold-3-a: rgba(252, 174, 0, 0.42);
+  --lobe-gold-4-a: rgba(254, 175, 0, 0.57);
+  --lobe-gold-5-a: rgba(254, 175, 0, 0.72);
+  --lobe-gold-6-a: rgba(254, 175, 0, 0.84);
+  --lobe-gold-7-a: rgba(254, 175, 0, 0.92);
+  --lobe-gold-8-a: rgba(253, 173, 0, 0.98);
+  --lobe-gold-9-a: #ffb224;
+  --lobe-gold-10-a: #ffdcaf;
+  --lobe-gold-11-a: #fff4eb;
+  --lobe-gold-fill: rgba(252, 174, 0, 0.42);
+  --lobe-gold-fill-secondary: rgba(248, 166, 0, 0.29);
+  --lobe-gold-fill-tertiary: rgba(247, 159, 0, 0.17);
+  --lobe-gold-fill-quaternary: rgba(233, 100, 0, 0.03);
+  --lobe-gold-bg: rgba(247, 159, 0, 0.17);
+  --lobe-gold-bg-hover: rgba(248, 166, 0, 0.29);
+  --lobe-gold-border: #916400;
+  --lobe-gold-border-secondary: #6a4900;
+  --lobe-gold-border-hover: #b77e00;
+  --lobe-gold-hover: #ffdcaf;
+  --lobe-gold: #ffb224;
+  --lobe-gold-active: #eaa100;
+  --lobe-gold-text-hover: #ffdcaf;
+  --lobe-gold-text: #ffb224;
+  --lobe-gold-text-active: rgba(254, 175, 0, 0.92);
+  --lobe-gray-1: #0d0d0d;
+  --lobe-gray-2: #1a1a1a;
+  --lobe-gray-3: #202020;
+  --lobe-gray-4: #2d2d2d;
+  --lobe-gray-5: #444444;
+  --lobe-gray-6: #555555;
+  --lobe-gray-7: #666666;
+  --lobe-gray-8: #6f6f6f;
+  --lobe-gray-9: #777777;
+  --lobe-gray-10: #aaaaaa;
+  --lobe-gray-11: #dddddd;
+  --lobe-gray-1-a: rgba(255, 255, 255, 0.06);
+  --lobe-gray-2-a: rgba(255, 255, 255, 0.10);
+  --lobe-gray-3-a: rgba(255, 255, 255, 0.16);
+  --lobe-gray-4-a: rgba(255, 255, 255, 0.24);
+  --lobe-gray-5-a: rgba(255, 255, 255, 0.28);
+  --lobe-gray-6-a: rgba(255, 255, 255, 0.32);
+  --lobe-gray-7-a: rgba(255, 255, 255, 0.38);
+  --lobe-gray-8-a: rgba(255, 255, 255, 0.44);
+  --lobe-gray-9-a: rgba(255, 255, 255, 0.5);
+  --lobe-gray-10-a: rgba(255, 255, 255, 0.66);
+  --lobe-gray-11-a: rgba(255, 255, 255, 0.84);
+  --lobe-gray-fill: rgba(255, 255, 255, 0.16);
+  --lobe-gray-fill-secondary: rgba(255, 255, 255, 0.10);
+  --lobe-gray-fill-tertiary: rgba(255, 255, 255, 0.06);
+  --lobe-gray-fill-quaternary: rgba(255, 255, 255, 0.02);
+  --lobe-gray-bg: rgba(255, 255, 255, 0.06);
+  --lobe-gray-bg-hover: rgba(255, 255, 255, 0.10);
+  --lobe-gray-border: #2d2d2d;
+  --lobe-gray-border-secondary: #202020;
+  --lobe-gray-border-hover: #444444;
+  --lobe-gray-hover: #aaaaaa;
+  --lobe-gray: #777777;
+  --lobe-gray-active: #666666;
+  --lobe-gray-text-hover: rgba(255, 255, 255, 0.66);
+  --lobe-gray-text: rgba(255, 255, 255, 0.5);
+  --lobe-gray-text-active: rgba(255, 255, 255, 0.38);
+  --lobe-green-1: #001d12;
+  --lobe-green-2: #002d1d;
+  --lobe-green-3: #003f28;
+  --lobe-green-4: #005232;
+  --lobe-green-5: #00653c;
+  --lobe-green-6: #007944;
+  --lobe-green-7: #1b8d4d;
+  --lobe-green-8: #3ba05a;
+  --lobe-green-9: #62c473;
+  --lobe-green-10: #96cd92;
+  --lobe-green-11: #cde6c3;
+  --lobe-green-1-a: rgba(0, 242, 150, 0.12);
+  --lobe-green-2-a: rgba(0, 250, 161, 0.18);
+  --lobe-green-3-a: rgba(0, 252, 160, 0.25);
+  --lobe-green-4-a: rgba(0, 248, 152, 0.33);
+  --lobe-green-5-a: rgba(0, 252, 150, 0.4);
+  --lobe-green-6-a: rgba(0, 252, 142, 0.48);
+  --lobe-green-7-a: rgba(48, 252, 137, 0.56);
+  --lobe-green-8-a: rgba(94, 254, 143, 0.63);
+  --lobe-green-9-a: rgba(120, 254, 145, 0.71);
+  --lobe-green-10-a: rgba(185, 253, 180, 0.81);
+  --lobe-green-11-a: rgba(225, 253, 214, 0.91);
+  --lobe-green-fill: rgba(0, 252, 160, 0.25);
+  --lobe-green-fill-secondary: rgba(0, 250, 161, 0.18);
+  --lobe-green-fill-tertiary: rgba(0, 242, 150, 0.12);
+  --lobe-green-fill-quaternary: rgba(0, 250, 150, 0.02);
+  --lobe-green-bg: rgba(0, 242, 150, 0.12);
+  --lobe-green-bg-hover: rgba(0, 250, 161, 0.18);
+  --lobe-green-border: #005232;
+  --lobe-green-border-secondary: #003f28;
+  --lobe-green-border-hover: #00653c;
+  --lobe-green-hover: #96cd92;
+  --lobe-green: #62c473;
+  --lobe-green-active: #1b8d4d;
+  --lobe-green-text-hover: rgba(185, 253, 180, 0.81);
+  --lobe-green-text: rgba(120, 254, 145, 0.71);
+  --lobe-green-text-active: rgba(48, 252, 137, 0.56);
+  --lobe-lime-1: #142100;
+  --lobe-lime-2: #253700;
+  --lobe-lime-3: #374f00;
+  --lobe-lime-4: #4b6800;
+  --lobe-lime-5: #608200;
+  --lobe-lime-6: #769d00;
+  --lobe-lime-7: #8fb81b;
+  --lobe-lime-8: #a9d42f;
+  --lobe-lime-9: #c4f042;
+  --lobe-lime-10: #daf685;
+  --lobe-lime-11: #eefbbe;
+  --lobe-lime-1-a: rgba(154, 254, 0, 0.13);
+  --lobe-lime-2-a: rgba(168, 250, 0, 0.22);
+  --lobe-lime-3-a: rgba(177, 255, 0, 0.31);
+  --lobe-lime-4-a: rgba(183, 254, 0, 0.41);
+  --lobe-lime-5-a: rgba(188, 255, 0, 0.51);
+  --lobe-lime-6-a: rgba(190, 253, 0, 0.62);
+  --lobe-lime-7-a: rgba(196, 252, 37, 0.73);
+  --lobe-lime-8-a: rgba(204, 255, 57, 0.83);
+  --lobe-lime-9-a: rgba(209, 255, 70, 0.94);
+  --lobe-lime-10-a: rgba(225, 254, 137, 0.97);
+  --lobe-lime-11-a: rgba(240, 254, 192, 0.99);
+  --lobe-lime-fill: rgba(177, 255, 0, 0.31);
+  --lobe-lime-fill-secondary: rgba(168, 250, 0, 0.22);
+  --lobe-lime-fill-tertiary: rgba(154, 254, 0, 0.13);
+  --lobe-lime-fill-quaternary: rgba(100, 200, 0, 0.02);
+  --lobe-lime-bg: rgba(154, 254, 0, 0.13);
+  --lobe-lime-bg-hover: rgba(168, 250, 0, 0.22);
+  --lobe-lime-border: #4b6800;
+  --lobe-lime-border-secondary: #374f00;
+  --lobe-lime-border-hover: #608200;
+  --lobe-lime-hover: #daf685;
+  --lobe-lime: #c4f042;
+  --lobe-lime-active: #8fb81b;
+  --lobe-lime-text-hover: rgba(225, 254, 137, 0.97);
+  --lobe-lime-text: rgba(209, 255, 70, 0.94);
+  --lobe-lime-text-active: rgba(196, 252, 37, 0.73);
+  --lobe-magenta-1: #350011;
+  --lobe-magenta-2: #4b001e;
+  --lobe-magenta-3: #63002d;
+  --lobe-magenta-4: #79093f;
+  --lobe-magenta-5: #8e1752;
+  --lobe-magenta-6: #a32466;
+  --lobe-magenta-7: #b8317b;
+  --lobe-magenta-8: #ce3e91;
+  --lobe-magenta-9: #e34ba9;
+  --lobe-magenta-10: #f38bcb;
+  --lobe-magenta-11: #fec5e8;
+  --lobe-magenta-1-a: rgba(252, 0, 81, 0.21);
+  --lobe-magenta-2-a: rgba(250, 0, 100, 0.3);
+  --lobe-magenta-3-a: rgba(254, 0, 115, 0.39);
+  --lobe-magenta-4-a: rgba(252, 19, 131, 0.48);
+  --lobe-magenta-5-a: rgba(254, 41, 146, 0.56);
+  --lobe-magenta-6-a: rgba(255, 56, 159, 0.64);
+  --lobe-magenta-7-a: rgba(252, 67, 168, 0.73);
+  --lobe-magenta-8-a: rgba(254, 77, 179, 0.81);
+  --lobe-magenta-9-a: rgba(255, 84, 190, 0.89);
+  --lobe-magenta-10-a: rgba(253, 145, 211, 0.96);
+  --lobe-magenta-11-a: #fec5e8;
+  --lobe-magenta-fill: rgba(254, 0, 115, 0.39);
+  --lobe-magenta-fill-secondary: rgba(250, 0, 100, 0.3);
+  --lobe-magenta-fill-tertiary: rgba(252, 0, 81, 0.21);
+  --lobe-magenta-fill-quaternary: rgba(229, 0, 29, 0.07);
+  --lobe-magenta-bg: rgba(252, 0, 81, 0.21);
+  --lobe-magenta-bg-hover: rgba(250, 0, 100, 0.3);
+  --lobe-magenta-border: #79093f;
+  --lobe-magenta-border-secondary: #63002d;
+  --lobe-magenta-border-hover: #8e1752;
+  --lobe-magenta-hover: #f38bcb;
+  --lobe-magenta: #e34ba9;
+  --lobe-magenta-active: #b8317b;
+  --lobe-magenta-text-hover: rgba(253, 145, 211, 0.96);
+  --lobe-magenta-text: rgba(255, 84, 190, 0.89);
+  --lobe-magenta-text-active: rgba(252, 67, 168, 0.73);
+  --lobe-orange-1: #291900;
+  --lobe-orange-2: #462b00;
+  --lobe-orange-3: #684100;
+  --lobe-orange-4: #8e5900;
+  --lobe-orange-5: #b36f00;
+  --lobe-orange-6: #d18000;
+  --lobe-orange-7: #e88b00;
+  --lobe-orange-8: #f89200;
+  --lobe-orange-9: #ff9927;
+  --lobe-orange-10: #ffd1b1;
+  --lobe-orange-11: #fff1eb;
+  --lobe-orange-1-a: rgba(241, 147, 0, 0.17);
+  --lobe-orange-2-a: rgba(250, 154, 0, 0.28);
+  --lobe-orange-3-a: rgba(254, 159, 0, 0.41);
+  --lobe-orange-4-a: rgba(254, 159, 0, 0.56);
+  --lobe-orange-5-a: rgba(252, 156, 0, 0.71);
+  --lobe-orange-6-a: rgba(255, 156, 0, 0.82);
+  --lobe-orange-7-a: rgba(255, 153, 0, 0.91);
+  --lobe-orange-8-a: rgba(253, 149, 0, 0.98);
+  --lobe-orange-9-a: #ff9927;
+  --lobe-orange-10-a: #ffd1b1;
+  --lobe-orange-11-a: #fff1eb;
+  --lobe-orange-fill: rgba(254, 159, 0, 0.41);
+  --lobe-orange-fill-secondary: rgba(250, 154, 0, 0.28);
+  --lobe-orange-fill-tertiary: rgba(241, 147, 0, 0.17);
+  --lobe-orange-fill-quaternary: rgba(233, 100, 0, 0.03);
+  --lobe-orange-bg: rgba(241, 147, 0, 0.17);
+  --lobe-orange-bg-hover: rgba(250, 154, 0, 0.28);
+  --lobe-orange-border: #8e5900;
+  --lobe-orange-border-secondary: #684100;
+  --lobe-orange-border-hover: #b36f00;
+  --lobe-orange-hover: #ffd1b1;
+  --lobe-orange: #ff9927;
+  --lobe-orange-active: #e88b00;
+  --lobe-orange-text-hover: #ffd1b1;
+  --lobe-orange-text: #ff9927;
+  --lobe-orange-text-active: rgba(255, 153, 0, 0.91);
+  --lobe-primary-1: #111111;
+  --lobe-primary-2: #333333;
+  --lobe-primary-3: #555555;
+  --lobe-primary-4: #666666;
+  --lobe-primary-5: #888888;
+  --lobe-primary-6: #aaaaaa;
+  --lobe-primary-7: #cccccc;
+  --lobe-primary-8: #dddddd;
+  --lobe-primary-9: #eeeeee;
+  --lobe-primary-10: #ffffff;
+  --lobe-primary-11: #ffffff;
+  --lobe-primary-1-a: rgba(255, 255, 255, 0.08);
+  --lobe-primary-2-a: rgba(255, 255, 255, 0.16);
+  --lobe-primary-3-a: rgba(255, 255, 255, 0.22);
+  --lobe-primary-4-a: rgba(255, 255, 255, 0.36);
+  --lobe-primary-5-a: rgba(255, 255, 255, 0.48);
+  --lobe-primary-6-a: rgba(255, 255, 255, 0.6);
+  --lobe-primary-7-a: rgba(255, 255, 255, 0.72);
+  --lobe-primary-8-a: rgba(255, 255, 255, 0.84);
+  --lobe-primary-9-a: rgba(255, 255, 255, 0.88);
+  --lobe-primary-10-a: rgba(255, 255, 255, 0.92);
+  --lobe-primary-11-a: rgba(255, 255, 255, 0.96);
+  --lobe-primary-fill: rgba(255, 255, 255, 0.22);
+  --lobe-primary-fill-secondary: rgba(255, 255, 255, 0.16);
+  --lobe-primary-fill-tertiary: rgba(255, 255, 255, 0.08);
+  --lobe-primary-fill-quaternary: rgba(255, 255, 255, 0.02);
+  --lobe-primary-bg: rgba(255, 255, 255, 0.08);
+  --lobe-primary-bg-hover: rgba(255, 255, 255, 0.16);
+  --lobe-primary-border: #666666;
+  --lobe-primary-border-secondary: #555555;
+  --lobe-primary-border-hover: #888888;
+  --lobe-primary-hover: #ffffff;
+  --lobe-primary: #eeeeee;
+  --lobe-primary-active: #cccccc;
+  --lobe-primary-text-hover: rgba(255, 255, 255, 0.92);
+  --lobe-primary-text: rgba(255, 255, 255, 0.88);
+  --lobe-primary-text-active: rgba(255, 255, 255, 0.72);
+  --lobe-purple-1: #2e002a;
+  --lobe-purple-2: #42003e;
+  --lobe-purple-3: #560053;
+  --lobe-purple-4: #670e66;
+  --lobe-purple-5: #781e78;
+  --lobe-purple-6: #892b8a;
+  --lobe-purple-7: #9a399e;
+  --lobe-purple-8: #ab46b2;
+  --lobe-purple-9: #bd54c6;
+  --lobe-purple-10: #d590da;
+  --lobe-purple-11: #edc7ee;
+  --lobe-purple-1-a: rgba(242, 0, 221, 0.19);
+  --lobe-purple-2-a: rgba(254, 0, 238, 0.26);
+  --lobe-purple-3-a: rgba(253, 0, 244, 0.34);
+  --lobe-purple-4-a: rgba(251, 34, 249, 0.41);
+  --lobe-purple-5-a: rgba(255, 64, 255, 0.47);
+  --lobe-purple-6-a: rgba(249, 78, 251, 0.55);
+  --lobe-purple-7-a: rgba(248, 92, 255, 0.62);
+  --lobe-purple-8-a: rgba(244, 100, 254, 0.7);
+  --lobe-purple-9-a: rgba(242, 108, 254, 0.78);
+  --lobe-purple-10-a: rgba(248, 167, 253, 0.86);
+  --lobe-purple-11-a: rgba(252, 212, 253, 0.94);
+  --lobe-purple-fill: rgba(253, 0, 244, 0.34);
+  --lobe-purple-fill-secondary: rgba(254, 0, 238, 0.26);
+  --lobe-purple-fill-tertiary: rgba(242, 0, 221, 0.19);
+  --lobe-purple-fill-quaternary: rgba(217, 0, 183, 0.06);
+  --lobe-purple-bg: rgba(242, 0, 221, 0.19);
+  --lobe-purple-bg-hover: rgba(254, 0, 238, 0.26);
+  --lobe-purple-border: #670e66;
+  --lobe-purple-border-secondary: #560053;
+  --lobe-purple-border-hover: #781e78;
+  --lobe-purple-hover: #d590da;
+  --lobe-purple: #bd54c6;
+  --lobe-purple-active: #9a399e;
+  --lobe-purple-text-hover: rgba(248, 167, 253, 0.86);
+  --lobe-purple-text: rgba(242, 108, 254, 0.78);
+  --lobe-purple-text-active: rgba(248, 92, 255, 0.62);
+  --lobe-red-1: #380015;
+  --lobe-red-2: #560023;
+  --lobe-red-3: #780032;
+  --lobe-red-4: #9d0042;
+  --lobe-red-5: #c10251;
+  --lobe-red-6: #d6225d;
+  --lobe-red-7: #e43165;
+  --lobe-red-8: #ee3a6a;
+  --lobe-red-9: #f4416c;
+  --lobe-red-10: #ffb0b7;
+  --lobe-red-11: #ffe8e8;
+  --lobe-red-1-a: rgba(255, 0, 95, 0.22);
+  --lobe-red-2-a: rgba(253, 0, 103, 0.34);
+  --lobe-red-3-a: rgba(255, 0, 106, 0.47);
+  --lobe-red-4-a: rgba(253, 0, 106, 0.62);
+  --lobe-red-5-a: rgba(254, 3, 107, 0.76);
+  --lobe-red-6-a: rgba(255, 40, 111, 0.84);
+  --lobe-red-7-a: rgba(253, 54, 112, 0.9);
+  --lobe-red-8-a: rgba(253, 62, 113, 0.94);
+  --lobe-red-9-a: rgba(254, 68, 112, 0.96);
+  --lobe-red-10-a: #ffb0b7;
+  --lobe-red-11-a: #ffe8e8;
+  --lobe-red-fill: rgba(255, 0, 106, 0.47);
+  --lobe-red-fill-secondary: rgba(253, 0, 103, 0.34);
+  --lobe-red-fill-tertiary: rgba(255, 0, 95, 0.22);
+  --lobe-red-fill-quaternary: rgba(250, 0, 50, 0.06);
+  --lobe-red-bg: rgba(255, 0, 95, 0.22);
+  --lobe-red-bg-hover: rgba(253, 0, 103, 0.34);
+  --lobe-red-border: #9d0042;
+  --lobe-red-border-secondary: #780032;
+  --lobe-red-border-hover: #c10251;
+  --lobe-red-hover: #ffb0b7;
+  --lobe-red: #f4416c;
+  --lobe-red-active: #e43165;
+  --lobe-red-text-hover: #ffb0b7;
+  --lobe-red-text: rgba(254, 68, 112, 0.96);
+  --lobe-red-text-active: rgba(253, 54, 112, 0.9);
+  --lobe-volcano-1: #2f0a00;
+  --lobe-volcano-2: #451200;
+  --lobe-volcano-3: #5d1900;
+  --lobe-volcano-4: #762000;
+  --lobe-volcano-5: #8e2a07;
+  --lobe-volcano-6: #a53716;
+  --lobe-volcano-7: #bc4424;
+  --lobe-volcano-8: #d45132;
+  --lobe-volcano-9: #ec5e41;
+  --lobe-volcano-10: #ff9480;
+  --lobe-volcano-11: #ffcbc3;
+  --lobe-volcano-1-a: rgba(247, 53, 0, 0.19);
+  --lobe-volcano-2-a: rgba(246, 64, 0, 0.28);
+  --lobe-volcano-3-a: rgba(251, 68, 0, 0.37);
+  --lobe-volcano-4-a: rgba(251, 68, 0, 0.47);
+  --lobe-volcano-5-a: rgba(254, 75, 12, 0.56);
+  --lobe-volcano-6-a: rgba(254, 85, 34, 0.65);
+  --lobe-volcano-7-a: rgba(254, 92, 49, 0.74);
+  --lobe-volcano-8-a: rgba(255, 98, 60, 0.83);
+  --lobe-volcano-9-a: rgba(254, 101, 70, 0.93);
+  --lobe-volcano-10-a: #ff9480;
+  --lobe-volcano-11-a: #ffcbc3;
+  --lobe-volcano-fill: rgba(251, 68, 0, 0.37);
+  --lobe-volcano-fill-secondary: rgba(246, 64, 0, 0.28);
+  --lobe-volcano-fill-tertiary: rgba(247, 53, 0, 0.19);
+  --lobe-volcano-fill-quaternary: rgba(240, 20, 0, 0.05);
+  --lobe-volcano-bg: rgba(247, 53, 0, 0.19);
+  --lobe-volcano-bg-hover: rgba(246, 64, 0, 0.28);
+  --lobe-volcano-border: #762000;
+  --lobe-volcano-border-secondary: #5d1900;
+  --lobe-volcano-border-hover: #8e2a07;
+  --lobe-volcano-hover: #ff9480;
+  --lobe-volcano: #ec5e41;
+  --lobe-volcano-active: #bc4424;
+  --lobe-volcano-text-hover: #ff9480;
+  --lobe-volcano-text: rgba(254, 101, 70, 0.93);
+  --lobe-volcano-text-active: rgba(254, 92, 49, 0.74);
+  --lobe-yellow-1: #251d00;
+  --lobe-yellow-2: #3e3300;
+  --lobe-yellow-3: #584a00;
+  --lobe-yellow-4: #736300;
+  --lobe-yellow-5: #8e7d00;
+  --lobe-yellow-6: #ab9800;
+  --lobe-yellow-7: #c7b426;
+  --lobe-yellow-8: #e3d142;
+  --lobe-yellow-9: #ffef5c;
+  --lobe-yellow-10: #fff594;
+  --lobe-yellow-11: #fffad3;
+  --lobe-yellow-1-a: rgba(247, 193, 0, 0.15);
+  --lobe-yellow-2-a: rgba(248, 204, 0, 0.25);
+  --lobe-yellow-3-a: rgba(251, 211, 0, 0.35);
+  --lobe-yellow-4-a: rgba(250, 215, 0, 0.46);
+  --lobe-yellow-5-a: rgba(254, 223, 0, 0.56);
+  --lobe-yellow-6-a: rgba(255, 227, 0, 0.67);
+  --lobe-yellow-7-a: rgba(255, 231, 49, 0.78);
+  --lobe-yellow-8-a: rgba(255, 235, 74, 0.89);
+  --lobe-yellow-9-a: #ffef5c;
+  --lobe-yellow-10-a: #fff594;
+  --lobe-yellow-11-a: #fffad3;
+  --lobe-yellow-fill: rgba(251, 211, 0, 0.35);
+  --lobe-yellow-fill-secondary: rgba(248, 204, 0, 0.25);
+  --lobe-yellow-fill-tertiary: rgba(247, 193, 0, 0.15);
+  --lobe-yellow-fill-quaternary: rgba(250, 200, 0, 0.02);
+  --lobe-yellow-bg: rgba(247, 193, 0, 0.15);
+  --lobe-yellow-bg-hover: rgba(248, 204, 0, 0.25);
+  --lobe-yellow-border: #736300;
+  --lobe-yellow-border-secondary: #584a00;
+  --lobe-yellow-border-hover: #8e7d00;
+  --lobe-yellow-hover: #fff594;
+  --lobe-yellow: #ffef5c;
+  --lobe-yellow-active: #c7b426;
+  --lobe-yellow-text-hover: #fff594;
+  --lobe-yellow-text: #ffef5c;
+  --lobe-yellow-text-active: rgba(255, 231, 49, 0.78);
+  --lobe-box-shadow: 0 40px 80px rgba(0, 0, 0, 0.09), 0 20px 40px rgba(0, 0, 0, 0.08), 0 10px 20px rgba(0, 0, 0, 0.06), 0 5px 10px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.03);
+  --lobe-box-shadow-secondary: 0 17.5px 23.4px rgba(0, 0, 0, 0.06), 0 9.4px 12.5px rgba(0, 0, 0, 0.05), 0 5.25px 7px rgba(0, 0, 0, 0.03), 0 2.8px 3.7px -2px rgba(0, 0, 0, 0.02), 0 1.2px 1.5px rgba(0, 0, 0, 0.02);
+  --lobe-box-shadow-tertiary: 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.03);
+  --lobe-color-error-affix: #f4416c;
+  --lobe-color-highlight: #f4416c;
+  --lobe-color-link: #60b1ff;
+  --lobe-color-link-active: #2d8ae0;
+  --lobe-color-link-hover: #a7d3ff;
+  --lobe-color-warning-affix: #ffb224;
+  --lobe-color-primary-fill: rgba(255, 255, 255, 0.22);
+  --lobe-color-primary-fill-secondary: rgba(255, 255, 255, 0.16);
+  --lobe-color-primary-fill-tertiary: rgba(255, 255, 255, 0.08);
+  --lobe-color-primary-fill-quaternary: rgba(255, 255, 255, 0.02);
+  --lobe-color-primary-bg: #111111;
+  --lobe-color-primary-bg-hover: #333333;
+  --lobe-color-primary-border: #666666;
+  --lobe-color-primary-border-hover: #888888;
+  --lobe-color-primary-hover: #ffffff;
+  --lobe-color-primary: #eeeeee;
+  --lobe-color-primary-active: #cccccc;
+  --lobe-color-primary-text-hover: #ffffff;
+  --lobe-color-primary-text: #eeeeee;
+  --lobe-color-primary-text-active: #cccccc;
+  --lobe-control-item-bg-active: #111111;
+  --lobe-control-item-bg-active-hover: #333333;
+  --lobe-color-bg-container: #0d0d0d;
+  --lobe-color-bg-elevated: #1a1a1a;
+  --lobe-color-bg-layout: #000000;
+  --lobe-color-bg-mask: rgba(0, 0, 0, 0.44);
+  --lobe-color-bg-spotlight: #2d2d2d;
+  --lobe-color-border: #202020;
+  --lobe-color-border-secondary: #1a1a1a;
+  --lobe-color-fill: rgba(255, 255, 255, 0.16);
+  --lobe-color-fill-quaternary: rgba(255, 255, 255, 0.02);
+  --lobe-color-fill-secondary: rgba(255, 255, 255, 0.10);
+  --lobe-color-fill-tertiary: rgba(255, 255, 255, 0.06);
+  --lobe-color-text: #ffffff;
+  --lobe-color-text-quaternary: #555555;
+  --lobe-color-text-secondary: #aaaaaa;
+  --lobe-color-text-tertiary: #6f6f6f;
+  --lobe-color-bg-container-disabled: rgba(255, 255, 255, 0.06);
+  --lobe-color-bg-container-secondary: #060606;
+  --lobe-color-bg-text-active: rgba(255, 255, 255, 0.16);
+  --lobe-color-bg-text-hover: rgba(255, 255, 255, 0.10);
+  --lobe-color-border-bg: #0d0d0d;
+  --lobe-color-error-outline: rgba(57,0,21,0.97);
+  --lobe-color-fill-alter: rgba(255, 255, 255, 0.02);
+  --lobe-color-fill-content: rgba(255, 255, 255, 0.10);
+  --lobe-color-fill-content-hover: rgba(255, 255, 255, 0.16);
+  --lobe-color-icon: #6f6f6f;
+  --lobe-color-icon-hover: #ffffff;
+  --lobe-color-split: rgba(230,230,230,0.06);
+  --lobe-color-text-description: #6f6f6f;
+  --lobe-color-text-disabled: #555555;
+  --lobe-color-text-heading: #ffffff;
+  --lobe-color-text-label: #aaaaaa;
+  --lobe-color-text-placeholder: #555555;
+  --lobe-color-warning-outline: rgba(43,27,0,0.97);
+  --lobe-control-item-bg-active-disabled: rgba(255, 255, 255, 0.16);
+  --lobe-control-item-bg-hover: rgba(255, 255, 255, 0.06);
+  --lobe-control-tmp-outline: rgba(255, 255, 255, 0.02);
+  --lobe-ring: 0 0 0 1px rgb(255 255 255 / 18%);
+  color-scheme: dark;
+}
+
+[data-primary-color='blue']:not([data-theme='dark']) {
+  --lobe-color-primary-fill: rgba(8, 126, 255, 0.17);
+  --lobe-color-primary-fill-secondary: rgba(19, 128, 255, 0.11);
+  --lobe-color-primary-fill-tertiary: rgba(38, 138, 255, 0.06);
+  --lobe-color-primary-fill-quaternary: rgba(105, 105, 255, 0.02);
+  --lobe-color-primary-bg: #fcfcff;
+  --lobe-color-primary-bg-hover: #f2f8ff;
+  --lobe-color-primary-border: #d5e9ff;
+  --lobe-color-primary-border-hover: #e5f1ff;
+  --lobe-color-primary-hover: #76baff;
+  --lobe-color-primary: #57abf9;
+  --lobe-color-primary-active: #0d78ce;
+  --lobe-color-primary-text-hover: #76baff;
+  --lobe-color-primary-text: #57abf9;
+  --lobe-color-primary-text-active: #0d78ce;
+  --lobe-control-item-bg-active: #fcfcff;
+  --lobe-control-item-bg-active-hover: #f2f8ff;
+}
+
+[data-primary-color='cyan']:not([data-theme='dark']) {
+  --lobe-color-primary-fill: rgba(11, 249, 161, 0.16);
+  --lobe-color-primary-fill-secondary: rgba(0, 255, 155, 0.11);
+  --lobe-color-primary-fill-tertiary: rgba(26, 255, 155, 0.07);
+  --lobe-color-primary-fill-quaternary: rgba(55, 255, 122, 0.03);
+  --lobe-color-primary-bg: #f9fffb;
+  --lobe-color-primary-bg-hover: #effff8;
+  --lobe-color-primary-border: #d8fef0;
+  --lobe-color-primary-border-hover: #e3fff4;
+  --lobe-color-primary-hover: #a5f6de;
+  --lobe-color-primary: #95f3d9;
+  --lobe-color-primary-active: #2fa28a;
+  --lobe-color-primary-text-hover: #a5f6de;
+  --lobe-color-primary-text: #95f3d9;
+  --lobe-color-primary-text-active: #2fa28a;
+  --lobe-control-item-bg-active: #f9fffb;
+  --lobe-control-item-bg-active-hover: #effff8;
+}
+
+[data-primary-color='geekblue']:not([data-theme='dark']) {
+  --lobe-color-primary-fill: rgba(10, 95, 255, 0.2);
+  --lobe-color-primary-fill-secondary: rgba(13, 88, 255, 0.12);
+  --lobe-color-primary-fill-tertiary: rgba(22, 88, 255, 0.06);
+  --lobe-color-primary-fill-quaternary: rgba(105, 55, 255, 0.02);
+  --lobe-color-primary-bg: #fcfbff;
+  --lobe-color-primary-bg-hover: #f1f5ff;
+  --lobe-color-primary-border: #cedfff;
+  --lobe-color-primary-border-hover: #e2ebff;
+  --lobe-color-primary-hover: #4c90ff;
+  --lobe-color-primary: #0072f5;
+  --lobe-color-primary-active: #005ae0;
+  --lobe-color-primary-text-hover: #4c90ff;
+  --lobe-color-primary-text: #0072f5;
+  --lobe-color-primary-text-active: #005ae0;
+  --lobe-control-item-bg-active: #fcfbff;
+  --lobe-control-item-bg-active-hover: #f1f5ff;
+}
+
+[data-primary-color='gold']:not([data-theme='dark']) {
+  --lobe-color-primary-fill: rgba(255, 134, 5, 0.20);
+  --lobe-color-primary-fill-secondary: rgba(255, 117, 5, 0.16);
+  --lobe-color-primary-fill-tertiary: rgba(255,155,55,0.08);
+  --lobe-color-primary-fill-quaternary: rgba(255,145,55,0.04);
+  --lobe-color-primary-bg: #fffdff;
+  --lobe-color-primary-bg-hover: #fff9f7;
+  --lobe-color-primary-border: #ffeedc;
+  --lobe-color-primary-border-hover: #fff4eb;
+  --lobe-color-primary-hover: #ffc368;
+  --lobe-color-primary: #ee9e0b;
+  --lobe-color-primary-active: #d59300;
+  --lobe-color-primary-text-hover: #ffc368;
+  --lobe-color-primary-text: #ee9e0b;
+  --lobe-color-primary-text-active: #d59300;
+  --lobe-control-item-bg-active: #fffdff;
+  --lobe-control-item-bg-active-hover: #fff9f7;
+}
+
+[data-primary-color='green']:not([data-theme='dark']) {
+  --lobe-color-primary-fill: rgba(40, 174, 1, 0.26);
+  --lobe-color-primary-fill-secondary: rgba(60, 190, 10, 0.14);
+  --lobe-color-primary-fill-tertiary: rgba(84, 205, 12, 0.10);
+  --lobe-color-primary-fill-quaternary: rgba(117, 230, 5, 0.06);
+  --lobe-color-primary-bg: #f4fdeb;
+  --lobe-color-primary-bg-hover: #e7f8dd;
+  --lobe-color-primary-border: #c7eabd;
+  --lobe-color-primary-border-hover: #d8f2ce;
+  --lobe-color-primary-hover: #71c179;
+  --lobe-color-primary: #379d4a;
+  --lobe-color-primary-active: #007944;
+  --lobe-color-primary-text-hover: #71c179;
+  --lobe-color-primary-text: #379d4a;
+  --lobe-color-primary-text-active: #007944;
+  --lobe-control-item-bg-active: #f4fdeb;
+  --lobe-control-item-bg-active-hover: #e7f8dd;
+}
+
+[data-primary-color='lime']:not([data-theme='dark']) {
+  --lobe-color-primary-fill: rgba(193, 249, 5, 0.32);
+  --lobe-color-primary-fill-secondary: rgba(203, 255, 7, 0.25);
+  --lobe-color-primary-fill-tertiary: rgba(218, 255, 11, 0.16);
+  --lobe-color-primary-fill-quaternary: rgba(242, 255, 5, 0.08);
+  --lobe-color-primary-bg: #feffeb;
+  --lobe-color-primary-bg-hover: #f9ffd8;
+  --lobe-color-primary-border: #ebfdaf;
+  --lobe-color-primary-border-hover: #f2ffc1;
+  --lobe-color-primary-hover: #cdf35c;
+  --lobe-color-primary: #c4f042;
+  --lobe-color-primary-active: #769d00;
+  --lobe-color-primary-text-hover: #cdf35c;
+  --lobe-color-primary-text: #c4f042;
+  --lobe-color-primary-text-active: #769d00;
+  --lobe-control-item-bg-active: #feffeb;
+  --lobe-control-item-bg-active-hover: #f9ffd8;
+}
+
+[data-primary-color='magenta']:not([data-theme='dark']) {
+  --lobe-color-primary-fill: rgba(255, 0, 146, 0.22);
+  --lobe-color-primary-fill-secondary: rgba(255, 8, 142, 0.15);
+  --lobe-color-primary-fill-tertiary: rgba(255, 22, 133, 0.09);
+  --lobe-color-primary-fill-quaternary: rgba(255, 55, 105, 0.04);
+  --lobe-color-primary-bg: #fff7f9;
+  --lobe-color-primary-bg-hover: #ffeaf4;
+  --lobe-color-primary-border: #ffc7e7;
+  --lobe-color-primary-border-hover: #ffdaee;
+  --lobe-color-primary-hover: #ef67ba;
+  --lobe-color-primary: #e34ba9;
+  --lobe-color-primary-active: #a32466;
+  --lobe-color-primary-text-hover: #ef67ba;
+  --lobe-color-primary-text: #e34ba9;
+  --lobe-color-primary-text-active: #a32466;
+  --lobe-control-item-bg-active: #fff7f9;
+  --lobe-control-item-bg-active-hover: #ffeaf4;
+}
+
+[data-primary-color='orange']:not([data-theme='dark']) {
+  --lobe-color-primary-fill: rgba(255, 98, 12, 0.16);
+  --lobe-color-primary-fill-secondary: rgba(255, 80, 5, 0.12);
+  --lobe-color-primary-fill-tertiary: rgba(255, 80, 30, 0.08);
+  --lobe-color-primary-fill-quaternary: rgba(255, 105, 255, 0.03);
+  --lobe-color-primary-bg: #fffcff;
+  --lobe-color-primary-bg-hover: #fff8f6;
+  --lobe-color-primary-border: #ffe9dd;
+  --lobe-color-primary-border-hover: #fff1eb;
+  --lobe-color-primary-hover: #ffb06a;
+  --lobe-color-primary: #f88c13;
+  --lobe-color-primary-active: #d18000;
+  --lobe-color-primary-text-hover: #ffb06a;
+  --lobe-color-primary-text: #f88c13;
+  --lobe-color-primary-text-active: #d18000;
+  --lobe-control-item-bg-active: #fffcff;
+  --lobe-control-item-bg-active-hover: #fff8f6;
+}
+
+[data-primary-color='purple']:not([data-theme='dark']) {
+  --lobe-color-primary-fill: rgba(218, 9, 226, 0.24);
+  --lobe-color-primary-fill-secondary: rgba(243, 14, 249, 0.16);
+  --lobe-color-primary-fill-tertiary: rgba(255, 15, 235, 0.08);
+  --lobe-color-primary-fill-quaternary: rgba(255, 30, 155, 0.04);
+  --lobe-color-primary-bg: #fff6fb;
+  --lobe-color-primary-bg-hover: #ffe7fd;
+  --lobe-color-primary-border: #f6c4f8;
+  --lobe-color-primary-border-hover: #fdd6fe;
+  --lobe-color-primary-hover: #cb6ed2;
+  --lobe-color-primary: #bd54c6;
+  --lobe-color-primary-active: #892b8a;
+  --lobe-color-primary-text-hover: #cb6ed2;
+  --lobe-color-primary-text: #bd54c6;
+  --lobe-color-primary-text-active: #892b8a;
+  --lobe-control-item-bg-active: #fff6fb;
+  --lobe-control-item-bg-active-hover: #ffe7fd;
+}
+
+[data-primary-color='red']:not([data-theme='dark']) {
+  --lobe-color-primary-fill: rgba(255, 8, 15, 0.15);
+  --lobe-color-primary-fill-secondary: rgba(255, 25, 25, 0.1);
+  --lobe-color-primary-fill-tertiary: rgba(255, 15, 15, 0.05);
+  --lobe-color-primary-fill-quaternary: rgba(255, 55, 255, 0.02);
+  --lobe-color-primary-bg: #fffbff;
+  --lobe-color-primary-bg-hover: #fff3f3;
+  --lobe-color-primary-border: #ffdadb;
+  --lobe-color-primary-border-hover: #ffe8e8;
+  --lobe-color-primary-hover: #ff6f87;
+  --lobe-color-primary: #f4416c;
+  --lobe-color-primary-active: #d6225d;
+  --lobe-color-primary-text-hover: #ff6f87;
+  --lobe-color-primary-text: #f4416c;
+  --lobe-color-primary-text-active: #d6225d;
+  --lobe-control-item-bg-active: #fffbff;
+  --lobe-control-item-bg-active-hover: #fff3f3;
+}
+
+[data-primary-color='volcano']:not([data-theme='dark']) {
+  --lobe-color-primary-fill: rgba(255, 42, 3, 0.20);
+  --lobe-color-primary-fill-secondary: rgba(255, 35, 2, 0.12);
+  --lobe-color-primary-fill-tertiary: rgba(255, 44, 11, 0.06);
+  --lobe-color-primary-fill-quaternary: rgba(255, 55, 30, 0.04);
+  --lobe-color-primary-bg: #fff7f6;
+  --lobe-color-primary-bg-hover: #ffece9;
+  --lobe-color-primary-border: #ffcec5;
+  --lobe-color-primary-border-hover: #ffded9;
+  --lobe-color-primary-hover: #fb745a;
+  --lobe-color-primary: #ec5e41;
+  --lobe-color-primary-active: #a53716;
+  --lobe-color-primary-text-hover: #fb745a;
+  --lobe-color-primary-text: #ec5e41;
+  --lobe-color-primary-text-active: #a53716;
+  --lobe-control-item-bg-active: #fff7f6;
+  --lobe-control-item-bg-active-hover: #ffece9;
+}
+
+[data-primary-color='yellow']:not([data-theme='dark']) {
+  --lobe-color-primary-fill: rgba(255, 222, 8, 0.15);
+  --lobe-color-primary-fill-secondary: rgba(255, 188, 22, 0.06);
+  --lobe-color-primary-fill-tertiary: rgba(255, 105, 255, 0.02);
+  --lobe-color-primary-fill-quaternary: rgba(255, 155, 255, 0.01);
+  --lobe-color-primary-bg: #fffeff;
+  --lobe-color-primary-bg-hover: #fffcff;
+  --lobe-color-primary-border: #fffada;
+  --lobe-color-primary-border-hover: #fffbf1;
+  --lobe-color-primary-hover: #fff279;
+  --lobe-color-primary: #ffef5c;
+  --lobe-color-primary-active: #ab9800;
+  --lobe-color-primary-text-hover: #fff279;
+  --lobe-color-primary-text: #ffef5c;
+  --lobe-color-primary-text-active: #ab9800;
+  --lobe-control-item-bg-active: #fffeff;
+  --lobe-control-item-bg-active-hover: #fffcff;
+}
+
+[data-neutral-color='mauve']:not([data-theme='dark']) {
+  --lobe-color-bg-container: #ffffff;
+  --lobe-color-bg-elevated: #ffffff;
+  --lobe-color-bg-layout: #fcf8fb;
+  --lobe-color-bg-mask: rgba(6, 1, 14, 0.41);
+  --lobe-color-bg-spotlight: #d1ced2;
+  --lobe-color-border: #dfdcdf;
+  --lobe-color-border-secondary: #edeaed;
+  --lobe-color-fill: rgba(26, 5, 26, 0.14);
+  --lobe-color-fill-quaternary: rgba(0, 0, 0, 0.015);
+  --lobe-color-fill-secondary: rgba(55, 22, 55, 0.09);
+  --lobe-color-fill-tertiary: rgba(155, 22, 122, 0.03);
+  --lobe-color-text: #111;
+  --lobe-color-text-quaternary: #b4b2b7;
+  --lobe-color-text-secondary: #7f7d83;
+  --lobe-color-text-tertiary: #99979c;
+  --lobe-color-bg-container-disabled: rgba(155, 22, 122, 0.03);
+  --lobe-color-bg-container-secondary: #fdfbfd;
+  --lobe-color-bg-text-active: rgba(26, 5, 26, 0.14);
+  --lobe-color-bg-text-hover: rgba(55, 22, 55, 0.09);
+  --lobe-color-border-bg: #ffffff;
+  --lobe-color-error-outline: rgba(255,55,30,0.04);
+  --lobe-color-fill-alter: rgba(0, 0, 0, 0.015);
+  --lobe-color-fill-content: rgba(55, 22, 55, 0.09);
+  --lobe-color-fill-content-hover: rgba(26, 5, 26, 0.14);
+  --lobe-color-icon: #99979c;
+  --lobe-color-icon-hover: #111;
+  --lobe-color-split: rgba(55,22,55,0.09);
+  --lobe-color-text-description: #99979c;
+  --lobe-color-text-disabled: #b4b2b7;
+  --lobe-color-text-heading: #111;
+  --lobe-color-text-label: #7f7d83;
+  --lobe-color-text-placeholder: #b4b2b7;
+  --lobe-color-warning-outline: rgba(255,55,255,0.01);
+  --lobe-control-item-bg-active-disabled: rgba(26, 5, 26, 0.14);
+  --lobe-control-item-bg-hover: rgba(155, 22, 122, 0.03);
+  --lobe-control-tmp-outline: rgba(0, 0, 0, 0.015);
+}
+
+[data-neutral-color='olive']:not([data-theme='dark']) {
+  --lobe-color-bg-container: #ffffff;
+  --lobe-color-bg-elevated: #ffffff;
+  --lobe-color-bg-layout: #faf9f4;
+  --lobe-color-bg-mask: rgba(11, 18, 4, 0.43);
+  --lobe-color-bg-spotlight: #cfcfc9;
+  --lobe-color-border: #ddddd7;
+  --lobe-color-border-secondary: #ecebe6;
+  --lobe-color-fill: rgba(43, 43, 5, 0.16);
+  --lobe-color-fill-quaternary: rgba(0, 0, 0, 0.015);
+  --lobe-color-fill-secondary: rgba(65, 55, 5, 0.1);
+  --lobe-color-fill-tertiary: rgba(155, 135, 35, 0.05);
+  --lobe-color-text: #111;
+  --lobe-color-text-quaternary: #b2b4ae;
+  --lobe-color-text-secondary: #7c7f79;
+  --lobe-color-text-tertiary: #969993;
+  --lobe-color-bg-container-disabled: rgba(155, 135, 35, 0.05);
+  --lobe-color-bg-container-secondary: #fcfcf9;
+  --lobe-color-bg-text-active: rgba(43, 43, 5, 0.16);
+  --lobe-color-bg-text-hover: rgba(65, 55, 5, 0.1);
+  --lobe-color-border-bg: #ffffff;
+  --lobe-color-error-outline: rgba(255,55,30,0.04);
+  --lobe-color-fill-alter: rgba(0, 0, 0, 0.015);
+  --lobe-color-fill-content: rgba(65, 55, 5, 0.1);
+  --lobe-color-fill-content-hover: rgba(43, 43, 5, 0.16);
+  --lobe-color-icon: #969993;
+  --lobe-color-icon-hover: #111;
+  --lobe-color-split: rgba(65,55,5,0.1);
+  --lobe-color-text-description: #969993;
+  --lobe-color-text-disabled: #b2b4ae;
+  --lobe-color-text-heading: #111;
+  --lobe-color-text-label: #7c7f79;
+  --lobe-color-text-placeholder: #b2b4ae;
+  --lobe-color-warning-outline: rgba(255,55,255,0.01);
+  --lobe-control-item-bg-active-disabled: rgba(43, 43, 5, 0.16);
+  --lobe-control-item-bg-hover: rgba(155, 135, 35, 0.05);
+  --lobe-control-tmp-outline: rgba(0, 0, 0, 0.015);
+}
+
+[data-neutral-color='sage']:not([data-theme='dark']) {
+  --lobe-color-bg-container: #ffffff;
+  --lobe-color-bg-elevated: #ffffff;
+  --lobe-color-bg-layout: #f5faf4;
+  --lobe-color-bg-mask: rgba(4, 18, 11, 0.43);
+  --lobe-color-bg-spotlight: #c9cfc9;
+  --lobe-color-border: #d7ddd7;
+  --lobe-color-border-secondary: #e7ece6;
+  --lobe-color-fill: rgba(5, 43, 5, 0.16);
+  --lobe-color-fill-quaternary: rgba(0, 0, 0, 0.015);
+  --lobe-color-fill-secondary: rgba(15, 65, 5, 0.1);
+  --lobe-color-fill-tertiary: rgba(55, 155, 35, 0.05);
+  --lobe-color-text: #111111;
+  --lobe-color-text-quaternary: #aeb4b0;
+  --lobe-color-text-secondary: #797f7c;
+  --lobe-color-text-tertiary: #939996;
+  --lobe-color-bg-container-disabled: rgba(55, 155, 35, 0.05);
+  --lobe-color-bg-container-secondary: #fafcf9;
+  --lobe-color-bg-text-active: rgba(5, 43, 5, 0.16);
+  --lobe-color-bg-text-hover: rgba(15, 65, 5, 0.1);
+  --lobe-color-border-bg: #ffffff;
+  --lobe-color-error-outline: rgba(255,55,30,0.04);
+  --lobe-color-fill-alter: rgba(0, 0, 0, 0.015);
+  --lobe-color-fill-content: rgba(15, 65, 5, 0.1);
+  --lobe-color-fill-content-hover: rgba(5, 43, 5, 0.16);
+  --lobe-color-icon: #939996;
+  --lobe-color-icon-hover: #111111;
+  --lobe-color-split: rgba(15,65,5,0.1);
+  --lobe-color-text-description: #939996;
+  --lobe-color-text-disabled: #aeb4b0;
+  --lobe-color-text-heading: #111111;
+  --lobe-color-text-label: #797f7c;
+  --lobe-color-text-placeholder: #aeb4b0;
+  --lobe-color-warning-outline: rgba(255,55,255,0.01);
+  --lobe-control-item-bg-active-disabled: rgba(5, 43, 5, 0.16);
+  --lobe-control-item-bg-hover: rgba(55, 155, 35, 0.05);
+  --lobe-control-tmp-outline: rgba(0, 0, 0, 0.015);
+}
+
+[data-neutral-color='sand']:not([data-theme='dark']) {
+  --lobe-color-bg-container: #ffffff;
+  --lobe-color-bg-elevated: #ffffff;
+  --lobe-color-bg-layout: #fcf9f3;
+  --lobe-color-bg-mask: rgba(23, 21, 3, 0.44);
+  --lobe-color-bg-spotlight: #d1cfc7;
+  --lobe-color-border: #dfddd5;
+  --lobe-color-border-secondary: #edebe4;
+  --lobe-color-fill: rgba(67, 55, 8, 0.17);
+  --lobe-color-fill-quaternary: rgba(0, 0, 0, 0.015);
+  --lobe-color-fill-secondary: rgba(91, 73, 10, 0.11);
+  --lobe-color-fill-tertiary: rgba(195, 135, 15, 0.05);
+  --lobe-color-text: #111;
+  --lobe-color-text-quaternary: #b5b3ab;
+  --lobe-color-text-secondary: #7f7e76;
+  --lobe-color-text-tertiary: #999890;
+  --lobe-color-bg-container-disabled: rgba(195, 135, 15, 0.05);
+  --lobe-color-bg-container-secondary: #fdfcf9;
+  --lobe-color-bg-text-active: rgba(67, 55, 8, 0.17);
+  --lobe-color-bg-text-hover: rgba(91, 73, 10, 0.11);
+  --lobe-color-border-bg: #ffffff;
+  --lobe-color-error-outline: rgba(255,55,30,0.04);
+  --lobe-color-fill-alter: rgba(0, 0, 0, 0.015);
+  --lobe-color-fill-content: rgba(91, 73, 10, 0.11);
+  --lobe-color-fill-content-hover: rgba(67, 55, 8, 0.17);
+  --lobe-color-icon: #999890;
+  --lobe-color-icon-hover: #111;
+  --lobe-color-split: rgba(91,73,10,0.11);
+  --lobe-color-text-description: #999890;
+  --lobe-color-text-disabled: #b5b3ab;
+  --lobe-color-text-heading: #111;
+  --lobe-color-text-label: #7f7e76;
+  --lobe-color-text-placeholder: #b5b3ab;
+  --lobe-color-warning-outline: rgba(255,55,255,0.01);
+  --lobe-control-item-bg-active-disabled: rgba(67, 55, 8, 0.17);
+  --lobe-control-item-bg-hover: rgba(195, 135, 15, 0.05);
+  --lobe-control-tmp-outline: rgba(0, 0, 0, 0.015);
+}
+
+[data-neutral-color='slate']:not([data-theme='dark']) {
+  --lobe-color-bg-container: #ffffff;
+  --lobe-color-bg-elevated: #ffffff;
+  --lobe-color-bg-layout: #f9f9fa;
+  --lobe-color-bg-mask: rgba(5, 10, 17, 0.42);
+  --lobe-color-bg-spotlight: #cecfd0;
+  --lobe-color-border: #dcddde;
+  --lobe-color-border-secondary: #ebebec;
+  --lobe-color-fill: rgba(5, 12, 19, 0.14);
+  --lobe-color-fill-quaternary: rgba(0, 0, 0, 0.015);
+  --lobe-color-fill-secondary: rgba(5, 5, 17, 0.08);
+  --lobe-color-fill-tertiary: rgba(55, 55, 88, 0.03);
+  --lobe-color-text: #111;
+  --lobe-color-text-quaternary: #b1b3b5;
+  --lobe-color-text-secondary: #7b7e82;
+  --lobe-color-text-tertiary: #96989b;
+  --lobe-color-bg-container-disabled: rgba(55, 55, 88, 0.03);
+  --lobe-color-bg-container-secondary: #fcfcfc;
+  --lobe-color-bg-text-active: rgba(5, 12, 19, 0.14);
+  --lobe-color-bg-text-hover: rgba(5, 5, 17, 0.08);
+  --lobe-color-border-bg: #ffffff;
+  --lobe-color-error-outline: rgba(255,55,30,0.04);
+  --lobe-color-fill-alter: rgba(0, 0, 0, 0.015);
+  --lobe-color-fill-content: rgba(5, 5, 17, 0.08);
+  --lobe-color-fill-content-hover: rgba(5, 12, 19, 0.14);
+  --lobe-color-icon: #96989b;
+  --lobe-color-icon-hover: #111;
+  --lobe-color-split: rgba(5,5,17,0.08);
+  --lobe-color-text-description: #96989b;
+  --lobe-color-text-disabled: #b1b3b5;
+  --lobe-color-text-heading: #111;
+  --lobe-color-text-label: #7b7e82;
+  --lobe-color-text-placeholder: #b1b3b5;
+  --lobe-color-warning-outline: rgba(255,55,255,0.01);
+  --lobe-control-item-bg-active-disabled: rgba(5, 12, 19, 0.14);
+  --lobe-control-item-bg-hover: rgba(55, 55, 88, 0.03);
+  --lobe-control-tmp-outline: rgba(0, 0, 0, 0.015);
+}
+
+[data-primary-color='blue'][data-theme='dark'] {
+  --lobe-color-primary-fill: rgba(0, 123, 252, 0.48);
+  --lobe-color-primary-fill-secondary: rgba(0, 111, 253, 0.36);
+  --lobe-color-primary-fill-tertiary: rgba(0, 88, 246, 0.26);
+  --lobe-color-primary-fill-quaternary: rgba(0, 44, 233, 0.09);
+  --lobe-color-primary-bg: #001740;
+  --lobe-color-primary-bg-hover: #00285b;
+  --lobe-color-primary-border: #004f98;
+  --lobe-color-primary-border-hover: #0064b6;
+  --lobe-color-primary-hover: #a7d3ff;
+  --lobe-color-primary: #60b1ff;
+  --lobe-color-primary-active: #2d8ae0;
+  --lobe-color-primary-text-hover: #a7d3ff;
+  --lobe-color-primary-text: #60b1ff;
+  --lobe-color-primary-text-active: #2d8ae0;
+  --lobe-control-item-bg-active: #001740;
+  --lobe-control-item-bg-active-hover: #00285b;
+}
+
+[data-primary-color='cyan'][data-theme='dark'] {
+  --lobe-color-primary-fill: rgba(0, 248, 209, 0.33);
+  --lobe-color-primary-fill-secondary: rgba(0, 248, 209, 0.23);
+  --lobe-color-primary-fill-tertiary: rgba(0, 243, 200, 0.14);
+  --lobe-color-primary-fill-quaternary: rgba(0, 250, 150, 0.02);
+  --lobe-color-primary-bg: #00221c;
+  --lobe-color-primary-bg-hover: #003930;
+  --lobe-color-primary-border: #006c5b;
+  --lobe-color-primary-border-hover: #008772;
+  --lobe-color-primary-hover: #bdf7e4;
+  --lobe-color-primary: #95f3d9;
+  --lobe-color-primary-active: #55bca4;
+  --lobe-color-primary-text-hover: #bdf7e4;
+  --lobe-color-primary-text: #95f3d9;
+  --lobe-color-primary-text-active: #55bca4;
+  --lobe-control-item-bg-active: #00221c;
+  --lobe-control-item-bg-active-hover: #003930;
+}
+
+[data-primary-color='geekblue'][data-theme='dark'] {
+  --lobe-color-primary-fill: rgba(0, 76, 251, 0.55);
+  --lobe-color-primary-fill-secondary: rgba(0, 62, 250, 0.42);
+  --lobe-color-primary-fill-tertiary: rgba(0, 43, 253, 0.3);
+  --lobe-color-primary-fill-quaternary: rgba(0, 18, 245, 0.11);
+  --lobe-color-primary-bg: #000d4c;
+  --lobe-color-primary-bg-hover: #001a69;
+  --lobe-color-primary-border: #003bac;
+  --lobe-color-primary-border-hover: #004cca;
+  --lobe-color-primary-hover: #9abeff;
+  --lobe-color-primary: #0072f5;
+  --lobe-color-primary-active: #0065ed;
+  --lobe-color-primary-text-hover: #9abeff;
+  --lobe-color-primary-text: #0072f5;
+  --lobe-color-primary-text-active: #0065ed;
+  --lobe-control-item-bg-active: #000d4c;
+  --lobe-control-item-bg-active-hover: #001a69;
+}
+
+[data-primary-color='gold'][data-theme='dark'] {
+  --lobe-color-primary-fill: rgba(252, 174, 0, 0.42);
+  --lobe-color-primary-fill-secondary: rgba(248, 166, 0, 0.29);
+  --lobe-color-primary-fill-tertiary: rgba(247, 159, 0, 0.17);
+  --lobe-color-primary-fill-quaternary: rgba(233, 100, 0, 0.03);
+  --lobe-color-primary-bg: #2a1b00;
+  --lobe-color-primary-bg-hover: #483000;
+  --lobe-color-primary-border: #916400;
+  --lobe-color-primary-border-hover: #b77e00;
+  --lobe-color-primary-hover: #ffdcaf;
+  --lobe-color-primary: #ffb224;
+  --lobe-color-primary-active: #eaa100;
+  --lobe-color-primary-text-hover: #ffdcaf;
+  --lobe-color-primary-text: #ffb224;
+  --lobe-color-primary-text-active: #eaa100;
+  --lobe-control-item-bg-active: #2a1b00;
+  --lobe-control-item-bg-active-hover: #483000;
+}
+
+[data-primary-color='green'][data-theme='dark'] {
+  --lobe-color-primary-fill: rgba(0, 252, 160, 0.25);
+  --lobe-color-primary-fill-secondary: rgba(0, 250, 161, 0.18);
+  --lobe-color-primary-fill-tertiary: rgba(0, 242, 150, 0.12);
+  --lobe-color-primary-fill-quaternary: rgba(0, 250, 150, 0.02);
+  --lobe-color-primary-bg: #001d12;
+  --lobe-color-primary-bg-hover: #002d1d;
+  --lobe-color-primary-border: #005232;
+  --lobe-color-primary-border-hover: #00653c;
+  --lobe-color-primary-hover: #96cd92;
+  --lobe-color-primary: #62c473;
+  --lobe-color-primary-active: #1b8d4d;
+  --lobe-color-primary-text-hover: #96cd92;
+  --lobe-color-primary-text: #62c473;
+  --lobe-color-primary-text-active: #1b8d4d;
+  --lobe-control-item-bg-active: #001d12;
+  --lobe-control-item-bg-active-hover: #002d1d;
+}
+
+[data-primary-color='lime'][data-theme='dark'] {
+  --lobe-color-primary-fill: rgba(177, 255, 0, 0.31);
+  --lobe-color-primary-fill-secondary: rgba(168, 250, 0, 0.22);
+  --lobe-color-primary-fill-tertiary: rgba(154, 254, 0, 0.13);
+  --lobe-color-primary-fill-quaternary: rgba(100, 200, 0, 0.02);
+  --lobe-color-primary-bg: #142100;
+  --lobe-color-primary-bg-hover: #253700;
+  --lobe-color-primary-border: #4b6800;
+  --lobe-color-primary-border-hover: #608200;
+  --lobe-color-primary-hover: #daf685;
+  --lobe-color-primary: #c4f042;
+  --lobe-color-primary-active: #8fb81b;
+  --lobe-color-primary-text-hover: #daf685;
+  --lobe-color-primary-text: #c4f042;
+  --lobe-color-primary-text-active: #8fb81b;
+  --lobe-control-item-bg-active: #142100;
+  --lobe-control-item-bg-active-hover: #253700;
+}
+
+[data-primary-color='magenta'][data-theme='dark'] {
+  --lobe-color-primary-fill: rgba(254, 0, 115, 0.39);
+  --lobe-color-primary-fill-secondary: rgba(250, 0, 100, 0.3);
+  --lobe-color-primary-fill-tertiary: rgba(252, 0, 81, 0.21);
+  --lobe-color-primary-fill-quaternary: rgba(229, 0, 29, 0.07);
+  --lobe-color-primary-bg: #350011;
+  --lobe-color-primary-bg-hover: #4b001e;
+  --lobe-color-primary-border: #79093f;
+  --lobe-color-primary-border-hover: #8e1752;
+  --lobe-color-primary-hover: #f38bcb;
+  --lobe-color-primary: #e34ba9;
+  --lobe-color-primary-active: #b8317b;
+  --lobe-color-primary-text-hover: #f38bcb;
+  --lobe-color-primary-text: #e34ba9;
+  --lobe-color-primary-text-active: #b8317b;
+  --lobe-control-item-bg-active: #350011;
+  --lobe-control-item-bg-active-hover: #4b001e;
+}
+
+[data-primary-color='orange'][data-theme='dark'] {
+  --lobe-color-primary-fill: rgba(254, 159, 0, 0.41);
+  --lobe-color-primary-fill-secondary: rgba(250, 154, 0, 0.28);
+  --lobe-color-primary-fill-tertiary: rgba(241, 147, 0, 0.17);
+  --lobe-color-primary-fill-quaternary: rgba(233, 100, 0, 0.03);
+  --lobe-color-primary-bg: #291900;
+  --lobe-color-primary-bg-hover: #462b00;
+  --lobe-color-primary-border: #8e5900;
+  --lobe-color-primary-border-hover: #b36f00;
+  --lobe-color-primary-hover: #ffd1b1;
+  --lobe-color-primary: #ff9927;
+  --lobe-color-primary-active: #e88b00;
+  --lobe-color-primary-text-hover: #ffd1b1;
+  --lobe-color-primary-text: #ff9927;
+  --lobe-color-primary-text-active: #e88b00;
+  --lobe-control-item-bg-active: #291900;
+  --lobe-control-item-bg-active-hover: #462b00;
+}
+
+[data-primary-color='purple'][data-theme='dark'] {
+  --lobe-color-primary-fill: rgba(253, 0, 244, 0.34);
+  --lobe-color-primary-fill-secondary: rgba(254, 0, 238, 0.26);
+  --lobe-color-primary-fill-tertiary: rgba(242, 0, 221, 0.19);
+  --lobe-color-primary-fill-quaternary: rgba(217, 0, 183, 0.06);
+  --lobe-color-primary-bg: #2e002a;
+  --lobe-color-primary-bg-hover: #42003e;
+  --lobe-color-primary-border: #670e66;
+  --lobe-color-primary-border-hover: #781e78;
+  --lobe-color-primary-hover: #d590da;
+  --lobe-color-primary: #bd54c6;
+  --lobe-color-primary-active: #9a399e;
+  --lobe-color-primary-text-hover: #d590da;
+  --lobe-color-primary-text: #bd54c6;
+  --lobe-color-primary-text-active: #9a399e;
+  --lobe-control-item-bg-active: #2e002a;
+  --lobe-control-item-bg-active-hover: #42003e;
+}
+
+[data-primary-color='red'][data-theme='dark'] {
+  --lobe-color-primary-fill: rgba(255, 0, 106, 0.47);
+  --lobe-color-primary-fill-secondary: rgba(253, 0, 103, 0.34);
+  --lobe-color-primary-fill-tertiary: rgba(255, 0, 95, 0.22);
+  --lobe-color-primary-fill-quaternary: rgba(250, 0, 50, 0.06);
+  --lobe-color-primary-bg: #380015;
+  --lobe-color-primary-bg-hover: #560023;
+  --lobe-color-primary-border: #9d0042;
+  --lobe-color-primary-border-hover: #c10251;
+  --lobe-color-primary-hover: #ffb0b7;
+  --lobe-color-primary: #f4416c;
+  --lobe-color-primary-active: #e43165;
+  --lobe-color-primary-text-hover: #ffb0b7;
+  --lobe-color-primary-text: #f4416c;
+  --lobe-color-primary-text-active: #e43165;
+  --lobe-control-item-bg-active: #380015;
+  --lobe-control-item-bg-active-hover: #560023;
+}
+
+[data-primary-color='volcano'][data-theme='dark'] {
+  --lobe-color-primary-fill: rgba(251, 68, 0, 0.37);
+  --lobe-color-primary-fill-secondary: rgba(246, 64, 0, 0.28);
+  --lobe-color-primary-fill-tertiary: rgba(247, 53, 0, 0.19);
+  --lobe-color-primary-fill-quaternary: rgba(240, 20, 0, 0.05);
+  --lobe-color-primary-bg: #2f0a00;
+  --lobe-color-primary-bg-hover: #451200;
+  --lobe-color-primary-border: #762000;
+  --lobe-color-primary-border-hover: #8e2a07;
+  --lobe-color-primary-hover: #ff9480;
+  --lobe-color-primary: #ec5e41;
+  --lobe-color-primary-active: #bc4424;
+  --lobe-color-primary-text-hover: #ff9480;
+  --lobe-color-primary-text: #ec5e41;
+  --lobe-color-primary-text-active: #bc4424;
+  --lobe-control-item-bg-active: #2f0a00;
+  --lobe-control-item-bg-active-hover: #451200;
+}
+
+[data-primary-color='yellow'][data-theme='dark'] {
+  --lobe-color-primary-fill: rgba(251, 211, 0, 0.35);
+  --lobe-color-primary-fill-secondary: rgba(248, 204, 0, 0.25);
+  --lobe-color-primary-fill-tertiary: rgba(247, 193, 0, 0.15);
+  --lobe-color-primary-fill-quaternary: rgba(250, 200, 0, 0.02);
+  --lobe-color-primary-bg: #251d00;
+  --lobe-color-primary-bg-hover: #3e3300;
+  --lobe-color-primary-border: #736300;
+  --lobe-color-primary-border-hover: #8e7d00;
+  --lobe-color-primary-hover: #fff594;
+  --lobe-color-primary: #ffef5c;
+  --lobe-color-primary-active: #c7b426;
+  --lobe-color-primary-text-hover: #fff594;
+  --lobe-color-primary-text: #ffef5c;
+  --lobe-color-primary-text-active: #c7b426;
+  --lobe-control-item-bg-active: #251d00;
+  --lobe-control-item-bg-active-hover: #3e3300;
+}
+
+[data-neutral-color='mauve'][data-theme='dark'] {
+  --lobe-color-bg-container: #1c1b1e;
+  --lobe-color-bg-elevated: #252528;
+  --lobe-color-bg-layout: #000000;
+  --lobe-color-bg-mask: rgba(6, 1, 14, 0.41);
+  --lobe-color-bg-spotlight: #3a393d;
+  --lobe-color-border: #2f2f32;
+  --lobe-color-border-secondary: #252528;
+  --lobe-color-fill: rgba(235, 235, 250, 0.2);
+  --lobe-color-fill-quaternary: rgba(255, 255, 255, 0.02);
+  --lobe-color-fill-secondary: rgba(231, 231, 250, 0.16);
+  --lobe-color-fill-tertiary: rgba(233, 225, 250, 0.12);
+  --lobe-color-text: #ffffff;
+  --lobe-color-text-quaternary: #504f53;
+  --lobe-color-text-secondary: #7f7d83;
+  --lobe-color-text-tertiary: #67666a;
+  --lobe-color-bg-container-disabled: rgba(233, 225, 250, 0.12);
+  --lobe-color-bg-container-secondary: #0e0d0f;
+  --lobe-color-bg-text-active: rgba(235, 235, 250, 0.2);
+  --lobe-color-bg-text-hover: rgba(231, 231, 250, 0.16);
+  --lobe-color-border-bg: #1c1b1e;
+  --lobe-color-error-outline: rgba(56,0,21,0.99);
+  --lobe-color-fill-alter: rgba(255, 255, 255, 0.02);
+  --lobe-color-fill-content: rgba(231, 231, 250, 0.16);
+  --lobe-color-fill-content-hover: rgba(235, 235, 250, 0.2);
+  --lobe-color-icon: #67666a;
+  --lobe-color-icon-hover: #ffffff;
+  --lobe-color-split: rgba(208,227,230,0.05);
+  --lobe-color-text-description: #67666a;
+  --lobe-color-text-disabled: #504f53;
+  --lobe-color-text-heading: #ffffff;
+  --lobe-color-text-label: #7f7d83;
+  --lobe-color-text-placeholder: #504f53;
+  --lobe-color-warning-outline: rgba(42,27,0,0.99);
+  --lobe-control-item-bg-active-disabled: rgba(235, 235, 250, 0.2);
+  --lobe-control-item-bg-hover: rgba(233, 225, 250, 0.12);
+  --lobe-control-tmp-outline: rgba(255, 255, 255, 0.02);
+}
+
+[data-neutral-color='olive'][data-theme='dark'] {
+  --lobe-color-bg-container: #1a1c1b;
+  --lobe-color-bg-elevated: #232624;
+  --lobe-color-bg-layout: #000000;
+  --lobe-color-bg-mask: rgba(11, 18, 4, 0.43);
+  --lobe-color-bg-spotlight: #383a38;
+  --lobe-color-border: #2d302e;
+  --lobe-color-border-secondary: #232624;
+  --lobe-color-fill: rgba(237, 253, 242, 0.19);
+  --lobe-color-fill-quaternary: rgba(255, 255, 255, 0.02);
+  --lobe-color-fill-secondary: rgba(233, 253, 240, 0.15);
+  --lobe-color-fill-tertiary: rgba(236, 255, 245, 0.11);
+  --lobe-color-text: #ffffff;
+  --lobe-color-text-quaternary: #4d504d;
+  --lobe-color-text-secondary: #7c7f79;
+  --lobe-color-text-tertiary: #646763;
+  --lobe-color-bg-container-disabled: rgba(236, 255, 245, 0.11);
+  --lobe-color-bg-container-secondary: #0d0e0d;
+  --lobe-color-bg-text-active: rgba(237, 253, 242, 0.19);
+  --lobe-color-bg-text-hover: rgba(233, 253, 240, 0.15);
+  --lobe-color-border-bg: #1a1c1b;
+  --lobe-color-error-outline: rgba(56,0,21,0.99);
+  --lobe-color-fill-alter: rgba(255, 255, 255, 0.02);
+  --lobe-color-fill-content: rgba(233, 253, 240, 0.15);
+  --lobe-color-fill-content-hover: rgba(237, 253, 242, 0.19);
+  --lobe-color-icon: #646763;
+  --lobe-color-icon-hover: #ffffff;
+  --lobe-color-split: rgba(206,228,207,0.05);
+  --lobe-color-text-description: #646763;
+  --lobe-color-text-disabled: #4d504d;
+  --lobe-color-text-heading: #ffffff;
+  --lobe-color-text-label: #7c7f79;
+  --lobe-color-text-placeholder: #4d504d;
+  --lobe-color-warning-outline: rgba(42,27,0,0.99);
+  --lobe-control-item-bg-active-disabled: rgba(237, 253, 242, 0.19);
+  --lobe-control-item-bg-hover: rgba(236, 255, 245, 0.11);
+  --lobe-control-tmp-outline: rgba(255, 255, 255, 0.02);
+}
+
+[data-neutral-color='sage'][data-theme='dark'] {
+  --lobe-color-bg-container: #1a1b1c;
+  --lobe-color-bg-elevated: #232526;
+  --lobe-color-bg-layout: #000000;
+  --lobe-color-bg-mask: rgba(4, 18, 11, 0.43);
+  --lobe-color-bg-spotlight: #383a3a;
+  --lobe-color-border: #2d2f30;
+  --lobe-color-border-secondary: #232526;
+  --lobe-color-fill: rgba(237, 248, 253, 0.19);
+  --lobe-color-fill-quaternary: rgba(255, 255, 255, 0.02);
+  --lobe-color-fill-secondary: rgba(233, 246, 253, 0.15);
+  --lobe-color-fill-tertiary: rgba(236, 246, 255, 0.11);
+  --lobe-color-text: #ffffff;
+  --lobe-color-text-quaternary: #4d5050;
+  --lobe-color-text-secondary: #797f7c;
+  --lobe-color-text-tertiary: #636766;
+  --lobe-color-bg-container-disabled: rgba(236, 246, 255, 0.11);
+  --lobe-color-bg-container-secondary: #0d0d0e;
+  --lobe-color-bg-text-active: rgba(237, 248, 253, 0.19);
+  --lobe-color-bg-text-hover: rgba(233, 246, 253, 0.15);
+  --lobe-color-border-bg: #1a1b1c;
+  --lobe-color-error-outline: rgba(56,0,21,0.99);
+  --lobe-color-fill-alter: rgba(255, 255, 255, 0.02);
+  --lobe-color-fill-content: rgba(233, 246, 253, 0.15);
+  --lobe-color-fill-content-hover: rgba(237, 248, 253, 0.19);
+  --lobe-color-icon: #636766;
+  --lobe-color-icon-hover: #ffffff;
+  --lobe-color-split: rgba(206,227,228,0.05);
+  --lobe-color-text-description: #636766;
+  --lobe-color-text-disabled: #4d5050;
+  --lobe-color-text-heading: #ffffff;
+  --lobe-color-text-label: #797f7c;
+  --lobe-color-text-placeholder: #4d5050;
+  --lobe-color-warning-outline: rgba(42,27,0,0.99);
+  --lobe-control-item-bg-active-disabled: rgba(237, 248, 253, 0.19);
+  --lobe-control-item-bg-hover: rgba(236, 246, 255, 0.11);
+  --lobe-control-tmp-outline: rgba(255, 255, 255, 0.02);
+}
+
+[data-neutral-color='sand'][data-theme='dark'] {
+  --lobe-color-bg-container: #1c1c18;
+  --lobe-color-bg-elevated: #262521;
+  --lobe-color-bg-layout: #000000;
+  --lobe-color-bg-mask: rgba(23, 21, 3, 0.44);
+  --lobe-color-bg-spotlight: #3a3a35;
+  --lobe-color-border: #30302b;
+  --lobe-color-border-secondary: #262521;
+  --lobe-color-fill: rgba(253, 253, 226, 0.19);
+  --lobe-color-fill-quaternary: rgba(255, 255, 255, 0.02);
+  --lobe-color-fill-secondary: rgba(253, 247, 220, 0.15);
+  --lobe-color-fill-tertiary: rgba(255, 255, 218, 0.11);
+  --lobe-color-text: #ffffff;
+  --lobe-color-text-quaternary: #505049;
+  --lobe-color-text-secondary: #7f7e76;
+  --lobe-color-text-tertiary: #67675f;
+  --lobe-color-bg-container-disabled: rgba(255, 255, 218, 0.11);
+  --lobe-color-bg-container-secondary: #0e0e0c;
+  --lobe-color-bg-text-active: rgba(253, 253, 226, 0.19);
+  --lobe-color-bg-text-hover: rgba(253, 247, 220, 0.15);
+  --lobe-color-border-bg: #1c1c18;
+  --lobe-color-error-outline: rgba(56,0,21,0.99);
+  --lobe-color-fill-alter: rgba(255, 255, 255, 0.02);
+  --lobe-color-fill-content: rgba(253, 247, 220, 0.15);
+  --lobe-color-fill-content-hover: rgba(253, 253, 226, 0.19);
+  --lobe-color-icon: #67675f;
+  --lobe-color-icon-hover: #ffffff;
+  --lobe-color-split: rgba(228,208,204,0.05);
+  --lobe-color-text-description: #67675f;
+  --lobe-color-text-disabled: #505049;
+  --lobe-color-text-heading: #ffffff;
+  --lobe-color-text-label: #7f7e76;
+  --lobe-color-text-placeholder: #505049;
+  --lobe-color-warning-outline: rgba(42,27,0,0.98);
+  --lobe-control-item-bg-active-disabled: rgba(253, 253, 226, 0.19);
+  --lobe-control-item-bg-hover: rgba(255, 255, 218, 0.11);
+  --lobe-control-tmp-outline: rgba(255, 255, 255, 0.02);
+}
+
+[data-neutral-color='slate'][data-theme='dark'] {
+  --lobe-color-bg-container: #1b1c1d;
+  --lobe-color-bg-elevated: #242527;
+  --lobe-color-bg-layout: #000000;
+  --lobe-color-bg-mask: rgba(5, 10, 17, 0.42);
+  --lobe-color-bg-spotlight: #383a3c;
+  --lobe-color-border: #2e2f32;
+  --lobe-color-border-secondary: #242527;
+  --lobe-color-fill: rgba(230, 235, 250, 0.2);
+  --lobe-color-fill-quaternary: rgba(255, 255, 255, 0.02);
+  --lobe-color-fill-secondary: rgba(225, 231, 244, 0.16);
+  --lobe-color-fill-tertiary: rgba(225, 233, 242, 0.12);
+  --lobe-color-text: #ffffff;
+  --lobe-color-text-quaternary: #4e5052;
+  --lobe-color-text-secondary: #7b7e82;
+  --lobe-color-text-tertiary: #64676a;
+  --lobe-color-bg-container-disabled: rgba(225, 233, 242, 0.12);
+  --lobe-color-bg-container-secondary: #0d0e0e;
+  --lobe-color-bg-text-active: rgba(230, 235, 250, 0.2);
+  --lobe-color-bg-text-hover: rgba(225, 231, 244, 0.16);
+  --lobe-color-border-bg: #1b1c1d;
+  --lobe-color-error-outline: rgba(56,0,21,0.99);
+  --lobe-color-fill-alter: rgba(255, 255, 255, 0.02);
+  --lobe-color-fill-content: rgba(225, 231, 244, 0.16);
+  --lobe-color-fill-content-hover: rgba(230, 235, 250, 0.2);
+  --lobe-color-icon: #64676a;
+  --lobe-color-icon-hover: #ffffff;
+  --lobe-color-split: rgba(207,208,229,0.05);
+  --lobe-color-text-description: #64676a;
+  --lobe-color-text-disabled: #4e5052;
+  --lobe-color-text-heading: #ffffff;
+  --lobe-color-text-label: #7b7e82;
+  --lobe-color-text-placeholder: #4e5052;
+  --lobe-color-warning-outline: rgba(42,27,0,0.99);
+  --lobe-control-item-bg-active-disabled: rgba(230, 235, 250, 0.2);
+  --lobe-control-item-bg-hover: rgba(225, 233, 242, 0.12);
+  --lobe-control-tmp-outline: rgba(255, 255, 255, 0.02);
+}
+
+@layer lobe-ui {
+  .lobe-brand-loading path {
+    fill: currentcolor;
+    fill-opacity: 0;
+    stroke: currentcolor;
+    stroke-dasharray: 1000;
+    stroke-dashoffset: 1000;
+    stroke-width: 0.25em;
+
+    animation:
+      draw 2s cubic-bezier(0.4, 0, 0.2, 1) infinite,
+      fill 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  }
+}
+
+@layer lobe-popup {
+  .lobe-context-trigger[data-popup-open],
+  .lobe-dropdown-menu-trigger[data-popup-open] {
+    background: var(--lobe-color-fill-tertiary);
+  }
+}
+
+@layer lobe-base {
+  :where(body, body [data-theme]) {
+    color: var(--lobe-color-text);
+    font-family: var(--lobe-font-family);
+    font-size: var(--lobe-font-size);
+    line-height: var(--lobe-line-height);
+  }
+
+  :where(body) :where(a) {
+    cursor: pointer;
+
+    color: var(--lobe-color-link);
+    text-decoration: none;
+
+    background-color: transparent;
+    outline: none;
+
+    transition: color var(--lobe-motion-duration-slow);
+  }
+
+  :where(body) :where(a):hover {
+    color: var(--lobe-color-link-hover);
+  }
+
+  :where(body) :where(a):active {
+    color: var(--lobe-color-link-active);
+  }
+
+  :where(body) :where(a):focus-visible {
+    outline: var(--lobe-line-width-focus) solid var(--lobe-color-primary-border);
+    outline-offset: 1px;
+  }
+
+  :where(body) :where(a)[disabled] {
+    cursor: not-allowed;
+    color: var(--lobe-color-text-disabled);
+  }
+
+  :where(.lobe-flex) {
+    --lobe-flex: 0 1 auto;
+    --lobe-flex-direction: column;
+    --lobe-flex-wrap: nowrap;
+    --lobe-flex-justify: flex-start;
+    --lobe-flex-align: stretch;
+    --lobe-flex-width: auto;
+    --lobe-flex-height: auto;
+    --lobe-flex-padding: 0;
+    --lobe-flex-padding-inline: var(--lobe-flex-padding);
+    --lobe-flex-padding-block: var(--lobe-flex-padding);
+    --lobe-flex-gap: 0;
+
+    display: flex;
+    flex: var(--lobe-flex);
+    flex-flow: var(--lobe-flex-direction) var(--lobe-flex-wrap);
+    gap: var(--lobe-flex-gap);
+    align-items: var(--lobe-flex-align);
+    justify-content: var(--lobe-flex-justify);
+
+    width: var(--lobe-flex-width);
+    height: var(--lobe-flex-height);
+    padding: var(--lobe-flex-padding);
+    padding-block: var(--lobe-flex-padding-block);
+    padding-inline: var(--lobe-flex-padding-inline);
+  }
+
+  .lobe-flex-hidden {
+    display: none;
+  }
+}
+
+@keyframes draw {
+  0% {
+    stroke-dashoffset: 1000;
+  }
+
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes fill {
+  30% {
+    fill-opacity: 0.05;
+  }
+
+  100% {
+    fill-opacity: 1;
+  }
+}