@chenzy-design/tokens 0.3.1 → 0.4.1

package/dist/tokens.css

@@ -61,6 +61,108 @@
   --cd-color-yellow-7: #a78b00;
   --cd-color-yellow-8: #7d6a00;
   --cd-color-yellow-9: #534800;
+  --cd-color-amber-0: #fefbeb;
+  --cd-color-amber-1: #fcf5ce;
+  --cd-color-amber-2: #f9e89e;
+  --cd-color-amber-3: #f6d86f;
+  --cd-color-amber-4: #f3c641;
+  --cd-color-amber-5: #f0b114;
+  --cd-color-amber-6: #c88a0f;
+  --cd-color-amber-7: #a0660a;
+  --cd-color-amber-8: #784606;
+  --cd-color-amber-9: #502b03;
+  --cd-color-cyan-0: #e5f7f8;
+  --cd-color-cyan-1: #c2eff0;
+  --cd-color-cyan-2: #8adde2;
+  --cd-color-cyan-3: #58cbd3;
+  --cd-color-cyan-4: #2cb8c5;
+  --cd-color-cyan-5: #05a4b6;
+  --cd-color-cyan-6: #038698;
+  --cd-color-cyan-7: #016979;
+  --cd-color-cyan-8: #004d5b;
+  --cd-color-cyan-9: #00323d;
+  --cd-color-indigo-0: #eceff8;
+  --cd-color-indigo-1: #d1d8f0;
+  --cd-color-indigo-2: #a7b3e1;
+  --cd-color-indigo-3: #8090d3;
+  --cd-color-indigo-4: #5e6fc4;
+  --cd-color-indigo-5: #3f51b5;
+  --cd-color-indigo-6: #3342a1;
+  --cd-color-indigo-7: #28348c;
+  --cd-color-indigo-8: #1f2878;
+  --cd-color-indigo-9: #171d63;
+  --cd-color-light-blue-0: #e9f7fd;
+  --cd-color-light-blue-1: #c9ecfc;
+  --cd-color-light-blue-2: #95d8f8;
+  --cd-color-light-blue-3: #62c3f5;
+  --cd-color-light-blue-4: #30acf1;
+  --cd-color-light-blue-5: #0095ee;
+  --cd-color-light-blue-6: #007bca;
+  --cd-color-light-blue-7: #0063a7;
+  --cd-color-light-blue-8: #004b83;
+  --cd-color-light-blue-9: #00355f;
+  --cd-color-light-green-0: #f3f8ec;
+  --cd-color-light-green-1: #e3f0d0;
+  --cd-color-light-green-2: #c8e2a5;
+  --cd-color-light-green-3: #add37e;
+  --cd-color-light-green-4: #93c55b;
+  --cd-color-light-green-5: #7bb63c;
+  --cd-color-light-green-6: #649830;
+  --cd-color-light-green-7: #4e7926;
+  --cd-color-light-green-8: #395b1b;
+  --cd-color-light-green-9: #253d12;
+  --cd-color-lime-0: #f2fae6;
+  --cd-color-lime-1: #e3f6c5;
+  --cd-color-lime-2: #cbed8e;
+  --cd-color-lime-3: #b7e35b;
+  --cd-color-lime-4: #a7da2c;
+  --cd-color-lime-5: #9bd100;
+  --cd-color-lime-6: #7eae00;
+  --cd-color-lime-7: #638b00;
+  --cd-color-lime-8: #486800;
+  --cd-color-lime-9: #2f4600;
+  --cd-color-pink-0: #fdecef;
+  --cd-color-pink-1: #fbcfd8;
+  --cd-color-pink-2: #f6a0b5;
+  --cd-color-pink-3: #f27396;
+  --cd-color-pink-4: #ed487b;
+  --cd-color-pink-5: #e91e63;
+  --cd-color-pink-6: #c51356;
+  --cd-color-pink-7: #a20b48;
+  --cd-color-pink-8: #7e053a;
+  --cd-color-pink-9: #5a012b;
+  --cd-color-purple-0: #f7e9f7;
+  --cd-color-purple-1: #efcaf0;
+  --cd-color-purple-2: #dd9be0;
+  --cd-color-purple-3: #c96fd1;
+  --cd-color-purple-4: #b449c2;
+  --cd-color-purple-5: #9e28b3;
+  --cd-color-purple-6: #871e9e;
+  --cd-color-purple-7: #71168a;
+  --cd-color-purple-8: #5c0f75;
+  --cd-color-purple-9: #490a61;
+  --cd-color-teal-0: #e4f7f4;
+  --cd-color-teal-1: #c0f0e8;
+  --cd-color-teal-2: #87e0d3;
+  --cd-color-teal-3: #54d1c1;
+  --cd-color-teal-4: #27c2b0;
+  --cd-color-teal-5: #00b3a1;
+  --cd-color-teal-6: #009589;
+  --cd-color-teal-7: #00776f;
+  --cd-color-teal-8: #005955;
+  --cd-color-teal-9: #003c3a;
+  --cd-color-violet-0: #f3edf9;
+  --cd-color-violet-1: #e2d1f4;
+  --cd-color-violet-2: #c4a7e9;
+  --cd-color-violet-3: #a67fdd;
+  --cd-color-violet-4: #885bd2;
+  --cd-color-violet-5: #6a3ac7;
+  --cd-color-violet-6: #572fb3;
+  --cd-color-violet-7: #46259e;
+  --cd-color-violet-8: #361c8a;
+  --cd-color-violet-9: #281475;
+  --cd-color-white: rgba(255, 255, 255, 1);
+  --cd-color-black: rgba(0, 0, 0, 1);
   --cd-spacing-12: 48px;
   --cd-spacing-none: 0;
   --cd-spacing-super-tight: 2px;
@@ -86,6 +188,7 @@
   --cd-font-size-header-3: 24px;
   --cd-font-size-header-2: 28px;
   --cd-font-size-header-1: 32px;
+  --cd-font-family-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
   --cd-font-weight-light: 200;
   --cd-font-weight-regular: 400;
   --cd-font-weight-medium: 500;
@@ -103,6 +206,11 @@
   --cd-motion-duration-mid: 200ms;
   --cd-motion-duration-slow: 320ms;
   --cd-motion-ease-standard: cubic-bezier(.4,0,.2,1);
+  --cd-motion-duration-none: 0ms;
+  --cd-motion-delay-none: 0ms;
+  --cd-motion-ease-in: ease-in;
+  --cd-motion-scale-none: scale(1, 1);
+  --cd-motion-rotate-none: rotate(0deg);
   --cd-z-affix: 10;
   --cd-z-sticky: 900;
   --cd-z-table-fixed: 101;
@@ -130,6 +238,7 @@
   --cd-width-icon-extra-large: 24px;
   --cd-border-thickness: 0;
   --cd-border-thickness-control: 1px;
+  --cd-border-thickness-control-focus: 1px;
   /* --- Alias (semantic) --- */
   --cd-color-primary: #0064fa;
   --cd-color-primary-hover: #0062d6;
@@ -194,7 +303,6 @@
   --cd-color-text-1: rgba(28, 31, 35, 0.8);
   --cd-color-text-2: rgba(28, 31, 35, 0.62);
   --cd-color-text-3: rgba(28, 31, 35, 0.35);
-  --cd-color-text-inverse: #ffffff;
   --cd-color-bg-0: #ffffff;
   --cd-color-bg-1: #ffffff;
   --cd-color-bg-2: #ffffff;
@@ -203,6 +311,7 @@
   --cd-color-nav-bg: #ffffff;
   --cd-color-bg-inverse: #1c1f23;
   --cd-color-overlay-bg: rgba(22, 22, 26, 0.6);
+  --cd-color-mask: rgba(0, 0, 0, 0.4);
   --cd-color-border: rgba(28, 31, 35, 0.08);
   --cd-color-fill-0: rgba(46, 50, 56, 0.05);
   --cd-color-fill-1: rgba(46, 50, 56, 0.09);
@@ -211,169 +320,935 @@
   --cd-color-focus: #0064fa;
   --cd-color-focus-border: #0064fa;
   --cd-focus-ring: 0 0 0 2px #98cdfd;
+  --cd-color-ai-general: linear-gradient(278deg, rgb(233,69,255) 0%, rgb(166,71,255) 30%, rgb(107,97,255) 60%, rgb(46,140,255) 100%);
+  --cd-color-ai-general-hover: linear-gradient(278deg, rgb(194,53,219) 0%, rgb(134,54,219) 30%, rgb(88,77,219) 60%, rgb(33,114,219) 100%);
+  --cd-color-ai-general-active: linear-gradient(278deg, rgb(157,39,184) 0%, rgb(105,40,184) 30%, rgb(71,59,184) 60%, rgb(22,89,184) 100%);
+  --cd-color-ai-general-light: linear-gradient(278deg, rgb(255,242,255) 0%, rgb(248,237,255) 30%, rgb(244,244,255) 60%, rgb(239,247,255) 100%);
+  --cd-color-ai-purple: rgb(166,71,255);
   /* --- Component --- */
-  --cd-button-height-default: var(--cd-control-height-default);
-  --cd-button-height-small: var(--cd-control-height-small);
-  --cd-button-height-large: var(--cd-control-height-large);
-  --cd-button-padding-x: var(--cd-spacing-base-tight);
-  --cd-button-padding-x-large: var(--cd-spacing-base);
-  --cd-button-radius: var(--cd-border-radius-small);
-  --cd-button-font-size: var(--cd-font-size-regular);
-  --cd-button-color-bg-primary: var(--cd-color-primary);
-  --cd-button-color-text-primary: var(--cd-color-text-inverse);
-  --cd-button-group-divider: var(--cd-color-border);
-  --cd-button-colorful-from: #4d6bff;
-  --cd-button-colorful-via: #7b5cff;
-  --cd-button-colorful-to: #a64dff;
-  --cd-icon-size-extra-small: 12px;
-  --cd-icon-size-small: 14px;
-  --cd-icon-size-default: 16px;
-  --cd-icon-size-large: 20px;
-  --cd-icon-size-extra-large: 24px;
-  --cd-icon-color: currentColor;
-  --cd-icon-color-warning: var(--cd-color-warning);
-  --cd-icon-color-error: var(--cd-color-danger);
-  --cd-icon-color-success: var(--cd-color-success);
-  --cd-icon-color-info: var(--cd-color-info);
-  --cd-icon-spin-duration: 1s;
-  --cd-icon-spin-timing: linear;
-  --cd-divider-color: var(--cd-color-border);
-  --cd-divider-thickness: 1px;
-  --cd-divider-spacing: var(--cd-spacing-base);
-  --cd-divider-text-color: var(--cd-color-text-2);
-  --cd-divider-text-font-size: var(--cd-font-size-regular);
-  --cd-divider-text-gap: var(--cd-spacing-base);
-  --cd-space-tight: var(--cd-spacing-tight);
-  --cd-space-medium: var(--cd-spacing-base);
-  --cd-space-loose: var(--cd-spacing-loose);
-  --cd-typography-color: var(--cd-color-text-0);
-  --cd-typography-color-secondary: var(--cd-color-text-1);
-  --cd-typography-color-tertiary: var(--cd-color-text-2);
-  --cd-typography-color-quaternary: var(--cd-color-text-3);
-  --cd-typography-color-link: var(--cd-color-primary);
-  --cd-typography-color-link-hover: var(--cd-color-primary-hover);
-  --cd-typography-mark-bg: var(--cd-color-primary-light-default);
-  --cd-typography-code-bg: var(--cd-color-fill-1);
-  --cd-typography-code-color: var(--cd-color-text-2);
-  --cd-typography-code-font-size: var(--cd-font-size-small);
-  --cd-typography-font-size-small: var(--cd-font-size-small);
-  --cd-typography-font-size-default: var(--cd-font-size-regular);
-  --cd-typography-font-size-large: var(--cd-font-size-header-6);
-  --cd-grid-columns: 24;
-  --cd-grid-gutter-x: 0px;
-  --cd-grid-gutter-y: 0px;
-  --cd-layout-bg: var(--cd-color-bg-0);
-  --cd-layout-header-bg: var(--cd-color-bg-1);
-  --cd-layout-header-height: 60px;
-  --cd-layout-header-z: var(--cd-z-sticky);
-  --cd-layout-footer-bg: var(--cd-color-bg-1);
-  --cd-layout-footer-color: var(--cd-color-text-2);
-  --cd-layout-content-bg: var(--cd-color-bg-0);
-  --cd-layout-content-padding: var(--cd-spacing-loose);
-  --cd-layout-sider-bg: var(--cd-color-bg-1);
-  --cd-layout-sider-width: 200px;
-  --cd-layout-sider-collapsed-width: 60px;
-  --cd-layout-sider-border: var(--cd-color-border);
-  --cd-layout-sider-trigger-bg: var(--cd-color-bg-2);
-  --cd-layout-sider-trigger-color: var(--cd-color-text-1);
-  --cd-layout-sider-trigger-hover-bg: var(--cd-color-fill-1);
-  --cd-layout-motion-duration: var(--cd-motion-duration-mid);
-  --cd-layout-motion-ease: var(--cd-motion-ease-standard);
-  --cd-input-height-default: var(--cd-control-height-default);
-  --cd-input-height-small: var(--cd-control-height-small);
-  --cd-input-height-large: var(--cd-control-height-large);
-  --cd-input-padding-x: var(--cd-spacing-base-tight);
-  --cd-input-border: transparent;
-  --cd-input-radius: var(--cd-border-radius-small);
-  --cd-input-color-bg: var(--cd-color-fill-0);
-  --cd-input-bg-hover: var(--cd-color-fill-1);
-  --cd-input-color-text: var(--cd-color-text-0);
-  --cd-input-color-placeholder: var(--cd-color-text-3);
-  --cd-input-border-active: var(--cd-color-focus-border);
-  --cd-input-border-warning: var(--cd-color-warning);
-  --cd-input-border-error: var(--cd-color-danger);
-  --cd-input-font-size: var(--cd-font-size-regular);
-  --cd-input-number-step-width: 14px;
-  --cd-input-number-step-bg: var(--cd-color-bg-2);
-  --cd-input-number-step-bg-hover: var(--cd-color-fill-0);
-  --cd-input-number-step-bg-active: var(--cd-color-fill-1);
-  --cd-input-number-step-bg-disabled: var(--cd-color-fill-0);
-  --cd-input-number-step-color: var(--cd-color-text-2);
-  --cd-input-number-step-color-disabled: var(--cd-color-text-3);
-  --cd-input-number-step-border: var(--cd-color-border);
-  --cd-input-number-step-radius: var(--cd-border-radius-small);
-  --cd-switch-height-default: 24px;
-  --cd-switch-height-small: 16px;
-  --cd-switch-height-large: 32px;
+  --cd-color-button-primary-bg-default: var(--cd-color-primary);
+  --cd-color-button-primary-text-default: var(--cd-color-white);
+  --cd-color-button-primary-bg-hover: var(--cd-color-primary-hover);
+  --cd-color-button-primary-text-hover: var(--cd-color-white);
+  --cd-color-button-primary-bg-active: var(--cd-color-primary-active);
+  --cd-color-button-primary-text-active: var(--cd-color-white);
+  --cd-color-button-primary-outline-focus: var(--cd-color-primary-light-active);
+  --cd-color-button-primary-outline-border-default: var(--cd-color-border);
+  --cd-color-button-primary-borderless-text-default: var(--cd-color-primary);
+  --cd-color-button-secondary-bg-default: var(--cd-color-secondary);
+  --cd-color-button-secondary-text-default: var(--cd-color-white);
+  --cd-color-button-secondary-bg-hover: var(--cd-color-secondary-hover);
+  --cd-color-button-secondary-text-hover: var(--cd-color-white);
+  --cd-color-button-secondary-bg-active: var(--cd-color-secondary-active);
+  --cd-color-button-secondary-text-active: var(--cd-color-white);
+  --cd-color-button-secondary-outline-border-default: var(--cd-color-border);
+  --cd-color-button-secondary-borderless-text-default: var(--cd-color-secondary);
+  --cd-color-button-danger-bg-default: var(--cd-color-danger);
+  --cd-color-button-danger-text-default: var(--cd-color-white);
+  --cd-color-button-danger-bg-hover: var(--cd-color-danger-hover);
+  --cd-color-button-danger-text-hover: var(--cd-color-white);
+  --cd-color-button-danger-bg-active: var(--cd-color-danger-active);
+  --cd-color-button-danger-text-active: var(--cd-color-white);
+  --cd-color-button-danger-outline-focus: var(--cd-color-danger-light-active);
+  --cd-color-button-danger-outline-border-default: var(--cd-color-danger);
+  --cd-color-button-danger-borderless-text-default: var(--cd-color-danger);
+  --cd-color-button-warning-bg-default: var(--cd-color-warning);
+  --cd-color-button-warning-text-default: var(--cd-color-white);
+  --cd-color-button-warning-bg-hover: var(--cd-color-warning-hover);
+  --cd-color-button-warning-text-hover: var(--cd-color-white);
+  --cd-color-button-warning-bg-active: var(--cd-color-warning-active);
+  --cd-color-button-warning-text-active: var(--cd-color-white);
+  --cd-color-button-warning-outline-focus: var(--cd-color-warning-light-active);
+  --cd-color-button-warning-outline-border-default: var(--cd-color-warning);
+  --cd-color-button-warning-borderless-text-default: var(--cd-color-warning);
+  --cd-color-button-tertiary-bg-default: var(--cd-color-tertiary);
+  --cd-color-button-tertiary-text-default: var(--cd-color-white);
+  --cd-color-button-tertiary-bg-hover: var(--cd-color-tertiary-hover);
+  --cd-color-button-tertiary-text-hover: var(--cd-color-white);
+  --cd-color-button-tertiary-bg-active: var(--cd-color-tertiary-active);
+  --cd-color-button-tertiary-text-active: var(--cd-color-white);
+  --cd-color-button-tertiary-outline-border-default: var(--cd-color-border);
+  --cd-color-button-tertiary-solid-text-default: var(--cd-color-text-1);
+  --cd-color-button-disabled-solid-text-default: var(--cd-color-disabled-text);
+  --cd-color-button-disabled-text-default: var(--cd-color-disabled-text);
+  --cd-color-button-disabled-outline-text-default: var(--cd-color-disabled-text);
+  --cd-color-button-disabled-text-hover: var(--cd-color-disabled-text);
+  --cd-color-button-disabled-bg-default: var(--cd-color-disabled-bg);
+  --cd-color-button-disabled-bg-hover: var(--cd-color-disabled-bg);
+  --cd-color-button-disabled-outline-border-default: var(--cd-color-border);
+  --cd-color-button-disabled-primary-bg-default: var(--cd-color-disabled-bg);
+  --cd-color-button-disabled-secondary-bg-default: var(--cd-color-disabled-bg);
+  --cd-color-button-disabled-danger-bg-default: var(--cd-color-disabled-bg);
+  --cd-color-button-disabled-warning-bg-default: var(--cd-color-disabled-bg);
+  --cd-color-button-disabled-tertiary-bg-default: var(--cd-color-disabled-bg);
+  --cd-color-button-disabled-light-primary-bg-default: var(--cd-color-fill-0);
+  --cd-color-button-disabled-light-secondary-bg-default: var(--cd-color-fill-0);
+  --cd-color-button-disabled-light-danger-bg-default: var(--cd-color-fill-0);
+  --cd-color-button-disabled-light-warning-bg-default: var(--cd-color-fill-0);
+  --cd-color-button-disabled-light-tertiary-bg-default: var(--cd-color-fill-0);
+  --cd-color-button-light-bg-default: var(--cd-color-fill-0);
+  --cd-color-button-light-bg-hover: var(--cd-color-fill-1);
+  --cd-color-button-light-bg-active: var(--cd-color-fill-2);
+  --cd-color-button-light-border-default: transparent;
+  --cd-color-button-light-border-hover: var(--cd-color-button-light-border-default);
+  --cd-color-button-light-border-active: var(--cd-color-button-light-border-hover);
+  --cd-width-button-light-border: 0;
+  --cd-color-button-borderless-text-default: var(--cd-color-primary);
+  --cd-color-button-borderless-bg-hover: var(--cd-color-fill-0);
+  --cd-color-button-borderless-bg-active: var(--cd-color-fill-1);
+  --cd-color-button-borderless-border-default: transparent;
+  --cd-color-button-borderless-border-hover: var(--cd-color-button-borderless-border-default);
+  --cd-color-button-borderless-border-active: var(--cd-color-button-borderless-border-hover);
+  --cd-width-button-borderless-border: 0;
+  --cd-width-button-outline-border: 1px;
+  --cd-color-button-outline-bg-hover: var(--cd-color-fill-0);
+  --cd-color-button-outline-bg-active: var(--cd-color-fill-1);
+  --cd-color-button-group-border-default: var(--cd-color-border);
+  --cd-width-button-group-border: var(--cd-border-thickness-control);
+  --cd-height-button-group-line-default: 20px;
+  --cd-radius-button-group: var(--cd-border-radius-small);
+  --cd-radius-button-splitbuttongroup-first-topleft: var(--cd-border-radius-small);
+  --cd-radius-button-splitbuttongroup-first-bottomleft: var(--cd-border-radius-small);
+  --cd-radius-button-splitbuttongroup-last-topright: var(--cd-border-radius-small);
+  --cd-radius-button-splitbuttongroup-last-bottomright: var(--cd-border-radius-small);
+  --cd-spacing-button-default-paddingtop: 6px;
+  --cd-spacing-button-default-paddingbottom: 6px;
+  --cd-spacing-button-default-paddingleft: var(--cd-spacing-base-tight);
+  --cd-spacing-button-default-paddingright: var(--cd-spacing-base-tight);
+  --cd-spacing-button-large-paddingtop: 10px;
+  --cd-spacing-button-large-paddingbottom: 10px;
+  --cd-spacing-button-large-paddingleft: var(--cd-spacing-base);
+  --cd-spacing-button-large-paddingright: var(--cd-spacing-base);
+  --cd-spacing-button-small-paddingtop: var(--cd-spacing-super-tight);
+  --cd-spacing-button-small-paddingbottom: var(--cd-spacing-super-tight);
+  --cd-spacing-button-small-paddingleft: var(--cd-spacing-base-tight);
+  --cd-spacing-button-small-paddingright: var(--cd-spacing-base-tight);
+  --cd-spacing-button-icononly-default-paddingleft: var(--cd-spacing-tight);
+  --cd-spacing-button-icononly-default-paddingright: var(--cd-spacing-tight);
+  --cd-spacing-button-icononly-default-paddingtop: var(--cd-spacing-tight);
+  --cd-spacing-button-icononly-default-paddingbottom: var(--cd-spacing-tight);
+  --cd-spacing-button-icononly-large-paddingleft: var(--cd-spacing-base-tight);
+  --cd-spacing-button-icononly-large-paddingright: var(--cd-spacing-base-tight);
+  --cd-spacing-button-icononly-large-paddingtop: var(--cd-spacing-base-tight);
+  --cd-spacing-button-icononly-large-paddingbottom: var(--cd-spacing-base-tight);
+  --cd-spacing-button-icononly-small-paddingleft: var(--cd-spacing-extra-tight);
+  --cd-spacing-button-icononly-small-paddingright: var(--cd-spacing-extra-tight);
+  --cd-spacing-button-icononly-small-paddingtop: var(--cd-spacing-extra-tight);
+  --cd-spacing-button-icononly-small-paddingbottom: var(--cd-spacing-extra-tight);
+  --cd-height-button-icononly-small: var(--cd-control-height-small);
+  --cd-width-button-icononly-small: var(--cd-control-height-small);
+  --cd-height-button-icononly-default: var(--cd-control-height-default);
+  --cd-width-button-icononly-default: var(--cd-control-height-default);
+  --cd-height-button-icononly-large: var(--cd-control-height-large);
+  --cd-width-button-icononly-large: var(--cd-control-height-large);
+  --cd-spacing-button-icononly-content-marginleft: var(--cd-spacing-tight);
+  --cd-spacing-button-icononly-content-marginright: var(--cd-spacing-tight);
+  --cd-font-button-fontweight: var(--cd-font-weight-bold);
+  --cd-font-button-fontsize: var(--cd-font-size-regular);
+  --cd-font-button-lineheight: var(--cd-line-height-regular);
+  --cd-height-button-large: var(--cd-control-height-large);
+  --cd-height-button-small: var(--cd-control-height-small);
+  --cd-height-button-default: var(--cd-control-height-default);
+  --cd-width-button-border: var(--cd-border-thickness);
+  --cd-radius-button: var(--cd-border-radius-small);
+  --cd-width-button-outline: 2px;
+  --cd-transition-duration-button-primary-bg: var(--cd-motion-duration-none);
+  --cd-transition-function-button-primary-bg: var(--cd-motion-ease-in);
+  --cd-transition-delay-button-primary-bg: var(--cd-motion-delay-none);
+  --cd-transition-duration-button-secondary-bg: var(--cd-motion-duration-none);
+  --cd-transition-function-button-secondary-bg: var(--cd-motion-ease-in);
+  --cd-transition-delay-button-secondary-bg: var(--cd-motion-delay-none);
+  --cd-transition-duration-button-tertiary-bg: var(--cd-motion-duration-none);
+  --cd-transition-function-button-tertiary-bg: var(--cd-motion-ease-in);
+  --cd-transition-delay-button-tertiary-bg: var(--cd-motion-delay-none);
+  --cd-transition-duration-button-light-bg: var(--cd-motion-duration-none);
+  --cd-transition-function-button-light-bg: var(--cd-motion-ease-in);
+  --cd-transition-delay-button-light-bg: var(--cd-motion-delay-none);
+  --cd-transition-duration-button-warning-bg: var(--cd-motion-duration-none);
+  --cd-transition-function-button-warning-bg: var(--cd-motion-ease-in);
+  --cd-transition-delay-button-warning-bg: var(--cd-motion-delay-none);
+  --cd-transition-duration-button-danger-bg: var(--cd-motion-duration-none);
+  --cd-transition-function-button-danger-bg: var(--cd-motion-ease-in);
+  --cd-transition-delay-button-danger-bg: var(--cd-motion-delay-none);
+  --cd-transition-duration-button-borderless-bg: var(--cd-motion-duration-none);
+  --cd-transition-function-button-borderless-bg: var(--cd-motion-ease-in);
+  --cd-transition-delay-button-borderless-bg: var(--cd-motion-delay-none);
+  --cd-transition-duration-button-primary-border: var(--cd-motion-duration-none);
+  --cd-transition-function-button-primary-border: var(--cd-motion-ease-in);
+  --cd-transition-delay-button-primary-border: var(--cd-motion-delay-none);
+  --cd-transition-duration-button-secondary-border: var(--cd-motion-duration-none);
+  --cd-transition-function-button-secondary-border: var(--cd-motion-ease-in);
+  --cd-transition-delay-button-secondary-border: var(--cd-motion-delay-none);
+  --cd-transition-duration-button-tertiary-border: var(--cd-motion-duration-none);
+  --cd-transition-function-button-tertiary-border: var(--cd-motion-ease-in);
+  --cd-transition-delay-button-tertiary-border: var(--cd-motion-delay-none);
+  --cd-transition-duration-button-light-border: var(--cd-motion-duration-none);
+  --cd-transition-function-button-light-border: var(--cd-motion-ease-in);
+  --cd-transition-delay-button-light-border: var(--cd-motion-delay-none);
+  --cd-transition-duration-button-warning-border: var(--cd-motion-duration-none);
+  --cd-transition-function-button-warning-border: var(--cd-motion-ease-in);
+  --cd-transition-delay-button-warning-border: var(--cd-motion-delay-none);
+  --cd-transition-duration-button-danger-border: var(--cd-motion-duration-none);
+  --cd-transition-function-button-danger-border: var(--cd-motion-ease-in);
+  --cd-transition-delay-button-danger-border: var(--cd-motion-delay-none);
+  --cd-transform-scale-button-primary: var(--cd-motion-scale-none);
+  --cd-transform-scale-button-secondary: var(--cd-motion-scale-none);
+  --cd-transform-scale-button-tertiary: var(--cd-motion-scale-none);
+  --cd-transform-scale-button-light: var(--cd-motion-scale-none);
+  --cd-transform-scale-button-warning: var(--cd-motion-scale-none);
+  --cd-transform-scale-button-danger: var(--cd-motion-scale-none);
+  --cd-transform-scale-button-borderless: var(--cd-motion-scale-none);
+  --cd-animation-duration-button-icon-loading: 600ms;
+  --cd-animation-duration-button-icon-custom-loading: 1600ms;
+  --cd-color-button-primary-solid-colorful-bg-default: var(--cd-color-ai-general);
+  --cd-color-button-primary-solid-colorful-bg-hover: var(--cd-color-ai-general-hover);
+  --cd-color-button-primary-solid-colorful-bg-active: var(--cd-color-ai-general-active);
+  --cd-color-button-primary-light-colorful-text-default: var(--cd-color-ai-general);
+  --cd-color-button-primary-outline-colorful-text-default: var(--cd-color-ai-purple);
+  --cd-color-button-tertiary-solid-colorful-bg-default: var(--cd-color-ai-general-light);
+  --cd-color-button-tertiary-solid-colorful-text-default: var(--cd-color-ai-general);
+  --cd-spacing-divider-horizontal-marginleft: 0px;
+  --cd-spacing-divider-horizontal-marginright: 0px;
+  --cd-spacing-divider-horizontal-margintop: 1px;
+  --cd-spacing-divider-horizontal-marginbottom: 1px;
+  --cd-spacing-divider-vertical-marginleft: 1px;
+  --cd-spacing-divider-vertical-marginright: 1px;
+  --cd-spacing-divider-vertical-margintop: 0px;
+  --cd-spacing-divider-vertical-marginbottom: 0px;
+  --cd-spacing-divider-inner-text-paddingleft: 8px;
+  --cd-spacing-divider-inner-text-paddingright: 8px;
+  --cd-spacing-divider-inner-text-paddingtop: 0px;
+  --cd-spacing-divider-inner-text-paddingbottom: 0px;
+  --cd-width-divider-inner-text-left-line: 40px;
+  --cd-width-divider-inner-text-right-line: 40px;
+  --cd-width-divider-border: 1px;
+  --cd-height-divider-vertical: 20px;
+  --cd-color-divider-border-color: var(--cd-color-border);
+  --cd-color-divider-text-default: var(--cd-color-text-0);
+  --cd-font-divider-text-weight: var(--cd-font-weight-bold);
+  --cd-spacing-space-tight: var(--cd-spacing-tight);
+  --cd-spacing-space-medium: var(--cd-spacing-base);
+  --cd-spacing-space-loose: var(--cd-spacing-loose);
+  --cd-color-typography-default-text-default: var(--cd-color-text-0);
+  --cd-color-typography-secondary-text-default: var(--cd-color-text-1);
+  --cd-color-typography-tertiary-text-default: var(--cd-color-text-2);
+  --cd-color-typography-quaternary-text-default: var(--cd-color-text-3);
+  --cd-color-typography-warning-text-default: var(--cd-color-warning);
+  --cd-color-typography-danger-text-default: var(--cd-color-danger);
+  --cd-color-typography-success-text-default: var(--cd-color-success);
+  --cd-color-typography-disabled-text-default: var(--cd-color-disabled-text);
+  --cd-color-typography-mark-bg-default: var(--cd-color-primary-light-default);
+  --cd-color-typography-code-bg-default: var(--cd-color-fill-1);
+  --cd-color-typography-code-text-default: var(--cd-color-text-2);
+  --cd-color-typography-link-text-default: var(--cd-color-link);
+  --cd-color-typography-link-text-visited: var(--cd-color-link-visited);
+  --cd-color-typography-link-text-hover: var(--cd-color-link-hover);
+  --cd-color-typography-link-text-active: var(--cd-color-link-active);
+  --cd-color-typography-link-text-disabled: var(--cd-color-link);
+  --cd-color-typography-copied-text-success: var(--cd-color-text-2);
+  --cd-color-typography-copied-icon-success: var(--cd-color-success);
+  --cd-color-typography-code-border-default: var(--cd-color-border);
+  --cd-font-typography-title-fontweight: var(--cd-font-weight-bold);
+  --cd-font-typography-link-fontweight: var(--cd-font-weight-bold);
+  --cd-font-typography-strong-fontweight: var(--cd-font-weight-bold);
+  --cd-font-typography-paragraph-extended-lineheight: 24px;
+  --cd-font-typography-normaltext-regular-fontweight: var(--cd-font-weight-regular);
+  --cd-font-typography-smalltext-regular-fontweight: var(--cd-font-weight-regular);
+  --cd-font-typography-normalparagraph-regular-fontweight: var(--cd-font-weight-regular);
+  --cd-font-typography-smallparagraph-regular-fontweight: var(--cd-font-weight-regular);
+  --cd-font-typography-title1-fontweight: var(--cd-font-typography-title-fontweight);
+  --cd-font-typography-title2-fontweight: var(--cd-font-typography-title-fontweight);
+  --cd-font-typography-title3-fontweight: var(--cd-font-typography-title-fontweight);
+  --cd-font-typography-title4-fontweight: var(--cd-font-typography-title-fontweight);
+  --cd-font-typography-title5-fontweight: var(--cd-font-typography-title-fontweight);
+  --cd-font-typography-title6-fontweight: var(--cd-font-typography-title-fontweight);
+  --cd-font-typography-title1-light-fontweight: 200;
+  --cd-font-typography-title2-light-fontweight: 200;
+  --cd-font-typography-title3-light-fontweight: 200;
+  --cd-font-typography-title4-light-fontweight: 200;
+  --cd-font-typography-title5-light-fontweight: 200;
+  --cd-font-typography-title6-light-fontweight: 200;
+  --cd-font-typography-title1-regular-fontweight: 400;
+  --cd-font-typography-title2-regular-fontweight: 400;
+  --cd-font-typography-title3-regular-fontweight: 400;
+  --cd-font-typography-title4-regular-fontweight: 400;
+  --cd-font-typography-title5-regular-fontweight: 400;
+  --cd-font-typography-title6-regular-fontweight: 400;
+  --cd-font-typography-title1-medium-fontweight: 500;
+  --cd-font-typography-title2-medium-fontweight: 500;
+  --cd-font-typography-title3-medium-fontweight: 500;
+  --cd-font-typography-title4-medium-fontweight: 500;
+  --cd-font-typography-title5-medium-fontweight: 500;
+  --cd-font-typography-title6-medium-fontweight: 500;
+  --cd-font-typography-title1-semibold-fontweight: 600;
+  --cd-font-typography-title2-semibold-fontweight: 600;
+  --cd-font-typography-title3-semibold-fontweight: 600;
+  --cd-font-typography-title4-semibold-fontweight: 600;
+  --cd-font-typography-title5-semibold-fontweight: 600;
+  --cd-font-typography-title6-semibold-fontweight: 600;
+  --cd-font-typography-title1-bold-fontweight: 700;
+  --cd-font-typography-title2-bold-fontweight: 700;
+  --cd-font-typography-title3-bold-fontweight: 700;
+  --cd-font-typography-title4-bold-fontweight: 700;
+  --cd-font-typography-title5-bold-fontweight: 700;
+  --cd-font-typography-title6-bold-fontweight: 700;
+  --cd-spacing-typography-iconprefix-marginright: 4px;
+  --cd-spacing-typography-expandtext-marginleft: 8px;
+  --cd-spacing-typography-copyicon-marginleft: 4px;
+  --cd-spacing-typography-copyicon-padding: 0;
+  --cd-spacing-typography-title-h1-margin: 0;
+  --cd-spacing-typography-title-h2-margin: 0;
+  --cd-spacing-typography-title-h3-margin: 0;
+  --cd-spacing-typography-title-h4-margin: 0;
+  --cd-spacing-typography-title-h5-margin: 0;
+  --cd-spacing-typography-title-h6-margin: 0;
+  --cd-spacing-typography-title-paragraph-margin: 0;
+  --cd-width-typography-code-border: 1px;
+  --cd-width-typography-link-border: 1px;
+  --cd-radius-typography-code: 2px;
+  --cd-width-grid-screen-xs: 480px;
+  --cd-width-grid-screen-xs-min: 480px;
+  --cd-width-grid-screen-sm: var(--cd-breakpoint-sm);
+  --cd-width-grid-screen-sm-min: var(--cd-breakpoint-sm);
+  --cd-width-grid-screen-md: var(--cd-breakpoint-md);
+  --cd-width-grid-screen-md-min: var(--cd-breakpoint-md);
+  --cd-width-grid-screen-lg: var(--cd-breakpoint-lg);
+  --cd-width-grid-screen-lg-min: var(--cd-breakpoint-lg);
+  --cd-width-grid-screen-xl: var(--cd-breakpoint-xl);
+  --cd-width-grid-screen-xl-min: var(--cd-breakpoint-xl);
+  --cd-width-grid-screen-xxl: var(--cd-breakpoint-xxl);
+  --cd-width-grid-screen-xxl-min: var(--cd-breakpoint-xxl);
+  --cd-width-grid-screen-xs-max: calc(var(--cd-breakpoint-sm) - 1px);
+  --cd-width-grid-screen-sm-max: calc(var(--cd-breakpoint-md) - 1px);
+  --cd-width-grid-screen-md-max: calc(var(--cd-breakpoint-lg) - 1px);
+  --cd-width-grid-screen-lg-max: calc(var(--cd-breakpoint-xl) - 1px);
+  --cd-width-grid-screen-xl-max: calc(var(--cd-breakpoint-xxl) - 1px);
+  --cd-width-grid-columns: 24;
+  --cd-width-grid-gutter: 0;
+  --cd-color-input-default-border-default: transparent;
+  --cd-color-input-default-bg-default: var(--cd-color-fill-0);
+  --cd-color-input-default-text-default: var(--cd-color-text-0);
+  --cd-color-input-default-bg-hover: var(--cd-color-fill-1);
+  --cd-color-input-default-border-hover: transparent;
+  --cd-color-input-default-bg-active: var(--cd-color-fill-2);
+  --cd-color-input-default-border-active: var(--cd-color-input-default-bg-active);
+  --cd-color-input-default-bg-focus: var(--cd-color-fill-0);
+  --cd-color-input-default-border-focus: var(--cd-color-focus-border);
+  --cd-color-input-icon-outline: var(--cd-color-primary-light-active);
+  --cd-color-input-default-bg-focus-hover: var(--cd-color-input-default-bg-focus);
+  --cd-color-input-danger-bg-default: var(--cd-color-danger-light-default);
+  --cd-color-input-danger-border-default: var(--cd-color-danger-light-default);
+  --cd-color-input-danger-bg-hover: var(--cd-color-danger-light-hover);
+  --cd-color-input-danger-border-hover: var(--cd-color-danger-light-hover);
+  --cd-color-input-danger-bg-focus: var(--cd-color-danger-light-default);
+  --cd-color-input-danger-border-focus: var(--cd-color-danger);
+  --cd-color-input-danger-bg-active: var(--cd-color-danger-light-active);
+  --cd-color-input-danger-border-active: var(--cd-color-danger-light-active);
+  --cd-color-input-warning-bg-default: var(--cd-color-warning-light-default);
+  --cd-color-input-warning-border-default: var(--cd-color-warning-light-default);
+  --cd-color-input-warning-bg-hover: var(--cd-color-warning-light-hover);
+  --cd-color-input-warning-border-hover: var(--cd-color-warning-light-hover);
+  --cd-color-input-warning-bg-focus: var(--cd-color-warning-light-default);
+  --cd-color-input-warning-border-focus: var(--cd-color-warning);
+  --cd-color-input-warning-bg-active: var(--cd-color-warning-light-active);
+  --cd-color-input-warning-border-active: var(--cd-color-warning-light-active);
+  --cd-color-input-disabled-border-default: var(--cd-color-disabled-border);
+  --cd-color-input-disabled-bg-default: var(--cd-color-disabled-fill);
+  --cd-color-input-disabled-text-default: var(--cd-color-disabled-text);
+  --cd-color-input-placeholder-text-default: var(--cd-color-text-2);
+  --cd-color-input-prefix-text-default: var(--cd-color-text-2);
+  --cd-color-input-icon-default: var(--cd-color-text-2);
+  --cd-color-input-icon-hover: var(--cd-color-primary-hover);
+  --cd-color-input-icon-active: var(--cd-color-primary-active);
+  --cd-color-input-counter-text-default: var(--cd-color-text-2);
+  --cd-color-input-counter-danger-text-default: var(--cd-color-danger);
+  --cd-color-input-group-border-default: var(--cd-color-border);
+  --cd-color-input-default-border-only-border-default: var(--cd-color-border);
+  --cd-color-input-default-border-only-border-hover: var(--cd-color-border);
+  --cd-height-input-large: calc(var(--cd-control-height-large) - 2px);
+  --cd-height-input-small: calc(var(--cd-control-height-small) - 2px);
+  --cd-height-input-default: calc(var(--cd-control-height-default) - 2px);
+  --cd-height-input-wrapper-large: var(--cd-control-height-large);
+  --cd-height-input-wrapper-small: var(--cd-control-height-small);
+  --cd-height-input-wrapper-default: var(--cd-control-height-default);
+  --cd-width-input-icon: calc(var(--cd-width-icon-medium) + var(--cd-spacing-tight) * 2);
+  --cd-width-input-icon-clear-before-suffix: calc(var(--cd-width-icon-medium) + var(--cd-spacing-tight));
+  --cd-width-input-icon-clear-before-modebtn: var(--cd-width-icon-medium);
+  --cd-motion-scale-size-active: .97;
+  --cd-motion-scale-size-inactive: 1;
+  --cd-width-input-append-border: var(--cd-border-thickness-control);
+  --cd-width-input-prepend-border: var(--cd-border-thickness-control);
+  --cd-width-input-group-pseudo-border: var(--cd-border-thickness-control);
+  --cd-width-input-wrapper-border: var(--cd-border-thickness-control-focus);
+  --cd-width-input-wrapper-focus-border: var(--cd-border-thickness-control-focus);
+  --cd-width-input-icon-outline: 2px;
+  --cd-width-input-icon-outlineoffset: -1px;
+  --cd-radius-input-wrapper: var(--cd-border-radius-small);
+  --cd-spacing-input-icon-marginleft: calc(-1 * var(--cd-spacing-base-tight));
+  --cd-spacing-input-paddingleft: var(--cd-spacing-base-tight);
+  --cd-spacing-input-paddingright: var(--cd-spacing-base-tight);
+  --cd-spacing-input-prefix-suffix-marginx: var(--cd-spacing-base-tight);
+  --cd-spacing-input-prefix-icon-marginy: 0;
+  --cd-spacing-input-prefix-icon-marginx: var(--cd-spacing-tight);
+  --cd-spacing-input-clearbtn-withsuffix-marginleft: calc(-1 * var(--cd-spacing-base-tight));
+  --cd-spacing-input-prepend-paddingy: 0;
+  --cd-spacing-input-prepend-paddingx: var(--cd-spacing-base-tight);
+  --cd-spacing-input-group-withtoplabel-margintop: var(--cd-spacing-base);
+  --cd-spacing-input-group-withtoplabel-marginbottom: var(--cd-spacing-base);
+  --cd-font-input-prefix-suffix-fontweight: var(--cd-font-weight-bold);
+  --cd-spacing-textarea-paddingy: 5px;
+  --cd-spacing-textarea-paddingx: var(--cd-spacing-base-tight);
+  --cd-spacing-textarea-counter-paddingtop: 3px;
+  --cd-spacing-textarea-counter-paddingright: 12px;
+  --cd-spacing-textarea-counter-paddingbottom: 5px;
+  --cd-spacing-textarea-counter-paddingleft: 12px;
+  --cd-width-textarea-border: var(--cd-border-thickness);
+  --cd-height-textarea-counter: 24px;
+  --cd-color-textarea-border-default: transparent;
+  --cd-color-textarea-border-hover: var(--cd-color-textarea-border-default);
+  --cd-color-textarea-icon-default: var(--cd-color-text-2);
+  --cd-color-textarea-icon-hover: var(--cd-color-primary-hover);
+  --cd-width-textarea-icon: calc(var(--cd-width-icon-medium) + var(--cd-spacing-tight));
+  --cd-height-textarea-default: 32px;
+  --cd-spacing-textarea-withshowclear-paddingright: 36px;
+  --cd-spacing-textarea-icon-right: var(--cd-spacing-extra-tight);
+  --cd-transition-duration-input-bg: var(--cd-motion-duration-none);
+  --cd-transition-function-input-bg: var(--cd-motion-ease-in);
+  --cd-transition-delay-input-bg: var(--cd-motion-delay-none);
+  --cd-transition-duration-input-border: var(--cd-motion-duration-none);
+  --cd-transition-function-input-border: var(--cd-motion-ease-in);
+  --cd-transition-delay-input-border: var(--cd-motion-delay-none);
+  --cd-transition-duration-input-text: var(--cd-motion-duration-none);
+  --cd-transition-function-input-text: var(--cd-motion-ease-in);
+  --cd-transition-delay-input-text: var(--cd-motion-delay-none);
+  --cd-transform-scale-input: var(--cd-motion-scale-none);
+  --cd-height-input-number-button-default: var(--cd-control-height-default);
+  --cd-height-input-number-button-large: var(--cd-control-height-large);
+  --cd-height-input-number-button-small: var(--cd-control-height-small);
+  --cd-height-input-number-button-inner-default: calc(var(--cd-control-height-default) - 2px);
+  --cd-height-input-number-button-inner-large: calc(var(--cd-control-height-large) - 2px);
+  --cd-height-input-number-button-inner-small: calc(var(--cd-control-height-small) - 2px);
+  --cd-width-input-number-button: 14px;
+  --cd-width-input-number-button-border: 1px;
+  --cd-radius-input-number: var(--cd-border-radius-small);
+  --cd-radius-input-number-inner: var(--cd-border-radius-small);
+  --cd-color-input-number-button-text-default: var(--cd-color-text-2);
+  --cd-color-input-number-button-text-disabled: var(--cd-color-disabled-text);
+  --cd-color-input-number-button-bg-default: var(--cd-color-bg-2);
+  --cd-color-input-number-button-bg-disabled: var(--cd-color-disabled-fill);
+  --cd-color-input-number-button-bg-hover: var(--cd-color-fill-0);
+  --cd-color-input-number-button-bg-active: var(--cd-color-fill-1);
+  --cd-color-input-number-button-border-default: var(--cd-color-border);
+  --cd-color-input-number-button-border-hover: var(--cd-color-fill-2);
+  --cd-spacing-input-number-button-marginleft: 4px;
+  --cd-spacing-input-number-button-inner-marginleft: var(--cd-spacing-tight);
+  --cd-spacing-input-number-clearbtn-suffix-marginleft: calc(-1 * var(--cd-spacing-extra-tight));
+  --cd-pincode-gap-small: 6px;
+  --cd-pincode-gap-default: var(--cd-spacing-tight);
+  --cd-pincode-gap-large: var(--cd-spacing-base-tight);
+  --cd-pincode-cell-width-small: var(--cd-control-height-small);
+  --cd-pincode-cell-width-default: var(--cd-control-height-default);
+  --cd-pincode-cell-width-large: 42px;
+  --cd-pincode-cell-font-size: var(--cd-font-size-header-6);
+  --cd-pincode-cell-text-align: center;
+  --cd-tag-height-small: 20px;
+  --cd-tag-height-large: 24px;
+  --cd-tag-radius: var(--cd-border-radius-small);
+  --cd-tag-radius-circle: var(--cd-border-radius-full);
+  --cd-tag-border-width: 1px;
+  --cd-tag-outline-width: 2px;
+  --cd-tag-outline-color: var(--cd-color-primary-light-active);
+  --cd-tag-small-padding-y: 2px;
+  --cd-tag-small-padding-x: var(--cd-spacing-tight);
+  --cd-tag-large-padding-y: 4px;
+  --cd-tag-large-padding-x: var(--cd-spacing-tight);
+  --cd-tag-prefix-icon-padding-right: var(--cd-spacing-extra-tight);
+  --cd-tag-suffix-icon-padding-left: var(--cd-spacing-extra-tight);
+  --cd-tag-font-size: var(--cd-font-size-small);
+  --cd-tag-colorful-font-weight: var(--cd-font-weight-bold);
+  --cd-tag-close-icon-default: var(--cd-color-text-2);
+  --cd-tag-close-icon-hover: var(--cd-color-text-1);
+  --cd-tag-close-icon-active: var(--cd-color-text-0);
+  --cd-tag-close-padding-left: var(--cd-spacing-extra-tight);
+  --cd-tag-closable-padding-top: var(--cd-spacing-extra-tight);
+  --cd-tag-closable-padding-right: var(--cd-spacing-extra-tight);
+  --cd-tag-closable-padding-bottom: var(--cd-spacing-extra-tight);
+  --cd-tag-closable-padding-left: var(--cd-spacing-tight);
+  --cd-tag-white-bg: var(--cd-color-bg-4);
+  --cd-tag-white-border: color-mix(in srgb, var(--cd-color-grey-2) 70%, transparent);
+  --cd-tag-white-text: var(--cd-color-text-0);
+  --cd-tag-white-icon: var(--cd-color-text-2);
+  --cd-tag-avatar-bg: var(--cd-color-bg-4);
+  --cd-tag-avatar-border: var(--cd-color-border);
+  --cd-tag-avatar-text: var(--cd-color-text-0);
+  --cd-tag-avatar-square-img-bg: var(--cd-color-fill-1);
+  --cd-tag-avatar-circle-small: 16px;
+  --cd-tag-avatar-circle-large: 20px;
+  --cd-tag-avatar-margin-right: var(--cd-spacing-extra-tight);
+  --cd-tag-avatar-square-padding-x: var(--cd-spacing-extra-tight);
+  --cd-tag-avatar-circle-padding-y: var(--cd-spacing-super-tight);
+  --cd-tag-avatar-circle-padding-x: var(--cd-spacing-extra-tight);
+  --cd-tag-avatar-circle-padding-left: var(--cd-spacing-super-tight);
+  --cd-tag-colorful-from: #4d6bff;
+  --cd-tag-colorful-via: #7b5cff;
+  --cd-tag-colorful-to: #a64dff;
+  --cd-tag-group-margin-right: var(--cd-spacing-tight);
+  --cd-tag-split-gap: 1px;
+  --cd-tag-input-icon-default: var(--cd-color-text-2);
+  --cd-tag-input-maxtagcount-default: var(--cd-color-text-0);
+  --cd-tag-input-icon-hover: var(--cd-color-primary-hover);
+  --cd-tag-input-disabled-text-default: var(--cd-color-disabled-text);
+  --cd-tag-input-disabled-bg: var(--cd-color-disabled-fill);
+  --cd-tag-input-default-bg-focus: var(--cd-color-fill-0);
+  --cd-tag-input-border-default: transparent;
+  --cd-tag-input-border-hover: transparent;
+  --cd-tag-input-border-focus: var(--cd-color-focus-border);
+  --cd-tag-input-prefix-default: var(--cd-color-text-2);
+  --cd-tag-input-suffix-default: var(--cd-color-text-2);
+  --cd-tag-input-default-bg-default: var(--cd-color-fill-0);
+  --cd-tag-input-default-bg-hover: var(--cd-color-fill-1);
+  --cd-tag-input-warning-bg-default: var(--cd-color-warning-light-default);
+  --cd-tag-input-warning-border-default: var(--cd-color-warning-light-default);
+  --cd-tag-input-warning-bg-hover: var(--cd-color-warning-light-hover);
+  --cd-tag-input-warning-border-hover: var(--cd-color-warning-light-hover);
+  --cd-tag-input-warning-bg-focus: var(--cd-color-warning-light-default);
+  --cd-tag-input-warning-border-focus: var(--cd-color-warning);
+  --cd-tag-input-danger-bg-default: var(--cd-color-danger-light-default);
+  --cd-tag-input-danger-border-default: var(--cd-color-danger-light-default);
+  --cd-tag-input-danger-bg-hover: var(--cd-color-danger-light-hover);
+  --cd-tag-input-danger-border-hover: var(--cd-color-danger-light-hover);
+  --cd-tag-input-danger-bg-focus: var(--cd-color-danger-light-default);
+  --cd-tag-input-danger-border-focus: var(--cd-color-danger);
+  --cd-tag-input-sortable-item-over-bg: var(--cd-color-primary);
+  --cd-tag-input-handler-icon-default: var(--cd-color-text-2);
+  --cd-tag-input-small-y: 1px;
+  --cd-tag-input-default-y: var(--cd-spacing-super-tight);
+  --cd-tag-input-large-y: 3px;
+  --cd-tag-input-wrapper-n-paddingx: var(--cd-spacing-tight);
+  --cd-tag-input-drag-handler-marginright: 4px;
+  --cd-tag-input-prefix-suffix-marginx: var(--cd-spacing-base-tight);
+  --cd-tag-input-height-large: var(--cd-control-height-large);
+  --cd-tag-input-height-default: var(--cd-control-height-default);
+  --cd-tag-input-height-small: var(--cd-control-height-small);
+  --cd-tag-input-input-small: 20px;
+  --cd-tag-input-input-default: 24px;
+  --cd-tag-input-input-large: 24px;
+  --cd-tag-input-clear-medium: calc(var(--cd-width-icon-medium) * 2);
+  --cd-tag-input-border-width-default: var(--cd-border-thickness-control);
+  --cd-tag-input-border-width-focus: var(--cd-border-thickness-control-focus);
+  --cd-tag-input-sortable-item-over: 2px;
+  --cd-tag-input-radius: var(--cd-border-radius-small);
+  --cd-tag-input-prefix-suffix-fontweight: var(--cd-font-weight-bold);
+  --cd-color-upload-text: var(--cd-color-text-0);
+  --cd-color-upload-assist-text: var(--cd-color-text-2);
+  --cd-color-upload-border: var(--cd-color-border);
+  --cd-color-upload-card-bg-hover: var(--cd-color-fill-1);
+  --cd-color-upload-card-bg: var(--cd-color-fill-0);
+  --cd-color-upload-card-fail-bg-hover: var(--cd-color-danger-light-hover);
+  --cd-color-upload-card-fail-bg: var(--cd-color-danger-light-default);
+  --cd-color-upload-clear-text: var(--cd-color-primary);
+  --cd-color-upload-drag-area-bg-hover: var(--cd-color-primary-light-default);
+  --cd-color-upload-drag-area-border-hover: var(--cd-color-primary);
+  --cd-color-upload-drag-area-disabled-text: var(--cd-color-disabled-text);
+  --cd-color-upload-drag-area-bg: var(--cd-color-tertiary-light-default);
+  --cd-color-upload-drag-area-icon: var(--cd-color-primary);
+  --cd-color-upload-drag-area-tips-text: var(--cd-color-primary);
+  --cd-color-upload-drag-area-main-text-default: var(--cd-color-text-0);
+  --cd-color-upload-drag-area-main-text-hover: var(--cd-color-text-0);
+  --cd-color-upload-drag-area-main-text-active: var(--cd-color-text-0);
+  --cd-color-upload-drag-area-sub-text-default: var(--cd-color-text-0);
+  --cd-color-upload-drag-area-sub-text-hover: var(--cd-color-text-0);
+  --cd-color-upload-drag-area-sub-text-active: var(--cd-color-text-0);
+  --cd-color-upload-file-card-fail-info-text: var(--cd-color-danger);
+  --cd-color-upload-file-card-preview-placeholder-bg: var(--cd-color-grey-3);
+  --cd-color-upload-file-card-preview-placeholder-text: var(--cd-color-white);
+  --cd-color-upload-file-card-retry-bg: var(--cd-color-white);
+  --cd-color-upload-file-card-retry-text: var(--cd-color-primary);
+  --cd-color-upload-icon: var(--cd-color-tertiary);
+  --cd-color-upload-pic-add-bg-active: var(--cd-color-fill-2);
+  --cd-color-upload-pic-add-bg-hover: var(--cd-color-fill-1);
+  --cd-color-upload-pic-add-bg: var(--cd-color-fill-0);
+  --cd-color-upload-pic-remove-bg: var(--cd-color-overlay-bg);
+  --cd-color-upload-picture-file-card-loading-error-icon: var(--cd-color-danger);
+  --cd-color-upload-picture-file-card-error-border: var(--cd-color-danger);
+  --cd-color-upload-picture-file-card-pic-info-text: var(--cd-color-white);
+  --cd-color-upload-picture-file-card-close-icon: var(--cd-color-white);
+  --cd-color-upload-picture-file-card-hover-bg: var(--cd-color-overlay-bg);
+  --cd-color-upload-preview-icon: var(--cd-color-text-2);
+  --cd-color-upload-picture-preview-icon: var(--cd-color-text-inverse);
+  --cd-color-upload-retry-text: var(--cd-color-primary);
+  --cd-color-upload-replace-text: var(--cd-color-white);
+  --cd-height-upload-file-card: 52px;
+  --cd-width-upload-file-card: 250px;
+  --cd-height-upload-file-pic-card: 96px;
+  --cd-width-upload-file-pic-card: 96px;
+  --cd-width-upload-file-card-preview: 36px;
+  --cd-height-upload-file-card-preview: 36px;
+  --cd-width-upload-file-card-preview-img: 36px;
+  --cd-width-upload-file-card-info-name: 106px;
+  --cd-width-upload-file-card-icon: 11px;
+  --cd-width-upload-picture-add-border: 2px;
+  --cd-width-upload-picture-file-card-img: 96px;
+  --cd-width-upload-picture-file-card-close: 16px;
+  --cd-width-upload-file-card-retry: 24px;
+  --cd-width-upload-file-card-retry-icon: 13px;
+  --cd-height-upload-file-card-retry-icon: 14px;
+  --cd-width-upload-picture-file-card-loading-icon: 14px;
+  --cd-width-upload-drag-area-border: 2px;
+  --cd-spacing-upload-title-choosen-marginright: var(--cd-spacing-tight);
+  --cd-spacing-upload-title-marginbottom: var(--cd-spacing-extra-tight);
+  --cd-spacing-upload-file-card-preview-margin: var(--cd-spacing-tight);
+  --cd-spacing-upload-file-card-info-size-marginleft: var(--cd-spacing-tight);
+  --cd-spacing-upload-file-card-info-retry-marginleft: var(--cd-spacing-tight);
+  --cd-spacing-upload-file-card-info-progress-margintop: 4px;
+  --cd-spacing-upload-file-card-close-marginleft: var(--cd-spacing-tight);
+  --cd-spacing-upload-file-card-close-marginright: var(--cd-spacing-tight);
+  --cd-spacing-upload-file-card-icon-marginright: var(--cd-spacing-super-tight);
+  --cd-spacing-upload-picture-file-card-gap: var(--cd-spacing-tight);
+  --cd-spacing-upload-picture-file-card-marginbottom: var(--cd-spacing-tight);
+  --cd-spacing-upload-picture-file-card-close-top: 8px;
+  --cd-spacing-upload-picture-file-card-close-right: 8px;
+  --cd-spacing-upload-picture-file-card-loading-error-bottom: 6px;
+  --cd-spacing-upload-picture-file-card-loading-error-right: 6px;
+  --cd-spacing-upload-picture-file-card-icon-error-top: calc(-1 * 1px);
+  --cd-spacing-upload-drag-area-padding: var(--cd-spacing-base-tight);
+  --cd-spacing-upload-drag-area-main-text-marginbottom: var(--cd-spacing-extra-tight);
+  --cd-radius-upload-file-card: var(--cd-border-radius-medium);
+  --cd-radius-upload-file-card-preview: var(--cd-border-radius-small);
+  --cd-radius-upload-picture-add: var(--cd-border-radius-small);
+  --cd-radius-upload-picture-file-card-img: var(--cd-border-radius-small);
+  --cd-radius-upload-picture-file-card-close: var(--cd-border-radius-circle);
+  --cd-radius-upload-file-card-retry: var(--cd-border-radius-circle);
+  --cd-radius-upload-drag-area: var(--cd-border-radius-small);
+  --cd-font-upload-file-card-info-name-fontweight: var(--cd-font-weight-bold);
+  --cd-font-upload-file-card-info-size-fontweight: var(--cd-font-weight-regular);
+  --cd-font-upload-drag-area-tips-fontweight: 600;
+  --cd-font-upload-picture-file-card-pic-info-fontsize: 12px;
+  --cd-font-upload-picture-file-card-pic-info-fontweight: 600;
   --cd-switch-width-default: 40px;
   --cd-switch-width-small: 26px;
   --cd-switch-width-large: 54px;
+  --cd-switch-height-default: 24px;
+  --cd-switch-height-small: 16px;
+  --cd-switch-height-large: 32px;
+  --cd-switch-radius: var(--cd-border-radius-full);
+  --cd-switch-border-width: 1px;
   --cd-switch-bg-off: var(--cd-color-fill-0);
+  --cd-switch-bg-off-hover: var(--cd-color-fill-1);
+  --cd-switch-bg-off-active: var(--cd-color-fill-2);
   --cd-switch-bg-on: var(--cd-color-success);
-  --cd-switch-knob-bg: var(--cd-color-bg-0);
-  --cd-switch-radius: var(--cd-border-radius-full);
+  --cd-switch-bg-on-hover: var(--cd-color-success-hover);
+  --cd-switch-bg-on-active: var(--cd-color-success-active);
+  --cd-switch-bg-on-disabled: var(--cd-color-success-disabled);
+  --cd-switch-border-off: transparent;
+  --cd-switch-knob-bg: var(--cd-color-white);
+  --cd-switch-knob-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.3);
+  --cd-switch-knob-size: 18px;
+  --cd-switch-knob-size-large: 24px;
+  --cd-switch-knob-size-small: 12px;
+  --cd-switch-knob-padding: 2px;
+  --cd-switch-knob-padding-large: 3px;
+  --cd-switch-knob-padding-small: 1px;
+  --cd-switch-knob-tx-off: 2px;
+  --cd-switch-knob-tx-on: 18px;
+  --cd-switch-knob-tx-off-large: 3px;
+  --cd-switch-knob-tx-on-large: 26px;
+  --cd-switch-knob-tx-off-small: 1px;
+  --cd-switch-knob-tx-on-small: 11px;
+  --cd-switch-text-width: 20px;
+  --cd-switch-text-width-large: 26px;
+  --cd-switch-text-font-size: var(--cd-font-size-small);
+  --cd-switch-text-font-size-large: var(--cd-font-size-regular);
+  --cd-switch-checked-text-color: var(--cd-color-white);
+  --cd-switch-unchecked-text-color: var(--cd-color-text-2);
+  --cd-switch-bg-spin-off: var(--cd-color-fill-1);
+  --cd-switch-bg-spin-on: var(--cd-color-success-hover);
+  --cd-switch-spin-indicator: var(--cd-color-white);
+  --cd-switch-spin-size: 18px;
+  --cd-switch-spin-size-small: 10px;
+  --cd-switch-spin-size-large: 28px;
+  --cd-switch-spin-tx-off: 2px;
+  --cd-switch-spin-tx-on: 16px;
+  --cd-switch-spin-tx-off-large: 2px;
+  --cd-switch-spin-tx-on-large: 22px;
+  --cd-switch-spin-tx-off-small: 2px;
+  --cd-switch-spin-tx-on-small: 10px;
+  --cd-switch-outline-focus: var(--cd-color-primary-light-active);
+  --cd-switch-outline-width: 2px;
+  --cd-switch-transition-duration: var(--cd-motion-duration-mid);
+  --cd-switch-transition-easing: ease-in-out;
+  --cd-spacing-checkbox-label-paddingleft: var(--cd-spacing-tight);
+  --cd-color-checkbox-label-text-default: var(--cd-color-text-0);
+  --cd-color-checkbox-label-text-disabled: var(--cd-color-disabled-text);
+  --cd-font-checkbox-label-lineheight: 20px;
+  --cd-color-checkbox-default-bg-default: transparent;
+  --cd-color-checkbox-default-bg-hover: var(--cd-color-fill-0);
+  --cd-color-checkbox-default-bg-active: var(--cd-color-fill-1);
+  --cd-color-checkbox-default-border-default: var(--cd-color-text-3);
+  --cd-color-checkbox-default-border-hover: var(--cd-color-focus-border);
+  --cd-color-checkbox-checked-bg-default: var(--cd-color-primary);
+  --cd-color-checkbox-checked-bg-hover: var(--cd-color-primary-hover);
+  --cd-color-checkbox-checked-bg-active: var(--cd-color-primary-active);
+  --cd-color-checkbox-checked-icon-default: var(--cd-color-white);
+  --cd-color-checkbox-checked-icon-disabled: var(--cd-color-white);
+  --cd-color-checkbox-checked-border-default: var(--cd-color-primary);
+  --cd-color-checkbox-checked-border-hover: var(--cd-color-primary-hover);
+  --cd-color-checkbox-checked-border-active: var(--cd-color-primary-active);
+  --cd-color-checkbox-checked-bg-disabled: var(--cd-color-primary-disabled);
+  --cd-color-checkbox-disabled-bg-default: var(--cd-color-disabled-fill);
+  --cd-color-checkbox-disabled-border-default: var(--cd-color-border);
+  --cd-color-checkbox-primary-outline-focus: var(--cd-color-primary-light-active);
+  --cd-color-checkbox-cardtype-border-default: transparent;
+  --cd-color-checkbox-cardtype-bg-hover: var(--cd-color-fill-0);
+  --cd-color-checkbox-cardtype-bg-active: var(--cd-color-fill-1);
+  --cd-color-checkbox-cardtype-checked-bg: var(--cd-color-primary-light-default);
+  --cd-color-checkbox-cardtype-checked-border-default: var(--cd-color-primary);
+  --cd-color-checkbox-cardtype-checked-border-hover: var(--cd-color-primary-hover);
+  --cd-color-checkbox-cardtype-checked-border-active: var(--cd-color-primary-active);
+  --cd-color-checkbox-cardtype-checked-disabled-bg: var(--cd-color-primary-light-default);
+  --cd-color-checkbox-cardtype-checked-disabled-border-default: var(--cd-color-primary-disabled);
+  --cd-color-checkbox-cardtype-inner-bg-default: var(--cd-color-white);
+  --cd-color-checkbox-cardtype-addon-text-default: var(--cd-color-text-0);
+  --cd-color-checkbox-cardtype-extra-text-default: var(--cd-color-text-2);
+  --cd-color-checkbox-extra-text-default: var(--cd-color-text-2);
   --cd-checkbox-size-default: 16px;
-  --cd-checkbox-size-small: 14px;
-  --cd-checkbox-size-large: 18px;
-  --cd-checkbox-radius: var(--cd-border-radius-small);
-  --cd-checkbox-border: var(--cd-color-text-3);
-  --cd-checkbox-border-hover: var(--cd-color-focus-border);
-  --cd-checkbox-bg: transparent;
-  --cd-checkbox-bg-hover: var(--cd-color-fill-0);
-  --cd-checkbox-bg-checked: var(--cd-color-primary);
-  --cd-checkbox-border-checked: var(--cd-color-primary);
-  --cd-checkbox-mark-color: var(--cd-color-text-inverse);
-  --cd-checkbox-label-gap: var(--cd-spacing-tight);
-  --cd-checkbox-card-padding: var(--cd-spacing-base-tight) var(--cd-spacing-base);
-  --cd-checkbox-card-radius: var(--cd-border-radius-medium);
-  --cd-checkbox-card-bg: var(--cd-color-bg-0);
-  --cd-checkbox-card-bg-hover: var(--cd-color-fill-0);
-  --cd-checkbox-card-bg-checked: var(--cd-color-primary-light-default);
-  --cd-checkbox-card-border: var(--cd-color-border);
-  --cd-checkbox-card-border-checked: var(--cd-color-primary);
-  --cd-radio-size-default: 16px;
-  --cd-radio-size-small: 14px;
-  --cd-radio-size-large: 18px;
-  --cd-radio-border: var(--cd-color-text-3);
-  --cd-radio-border-hover: var(--cd-color-focus-border);
-  --cd-radio-bg: transparent;
-  --cd-radio-bg-hover: var(--cd-color-fill-0);
-  --cd-radio-color-checked: var(--cd-color-primary);
-  --cd-radio-dot-color: var(--cd-color-bg-0);
-  --cd-radio-color-warning: var(--cd-color-warning);
-  --cd-radio-color-error: var(--cd-color-danger);
-  --cd-radio-label-gap: var(--cd-spacing-tight);
-  --cd-radio-button-height: var(--cd-control-height-default, 32px);
-  --cd-radio-button-height-small: var(--cd-control-height-small, 24px);
-  --cd-radio-button-height-large: var(--cd-control-height-large, 40px);
-  --cd-radio-card-radius: var(--cd-border-radius-medium);
-  --cd-radio-card-border-checked: var(--cd-color-primary);
-  --cd-rating-size-default: 20px;
-  --cd-rating-size-small: 16px;
-  --cd-rating-size-large: 24px;
-  --cd-rating-gap: var(--cd-spacing-extra-tight);
-  --cd-rating-color-active: var(--cd-color-rating-icon-default);
-  --cd-rating-color-inactive: var(--cd-color-fill-0);
-  --cd-slider-rail-height: 4px;
-  --cd-slider-rail-bg: var(--cd-color-fill-1);
-  --cd-slider-track-bg: var(--cd-color-primary);
-  --cd-slider-handle-size: 14px;
-  --cd-slider-handle-bg: var(--cd-color-bg-0);
-  --cd-slider-handle-border: var(--cd-color-primary);
-  --cd-slider-mark-color: var(--cd-color-text-2);
-  --cd-slider-radius: var(--cd-border-radius-full);
-  --cd-slider-status-warning: var(--cd-color-warning);
-  --cd-slider-status-error: var(--cd-color-danger);
-  --cd-form-item-gap: var(--cd-spacing-base);
-  --cd-form-label-color: var(--cd-color-text-0);
-  --cd-form-label-gap: var(--cd-spacing-tight);
-  --cd-form-required-color: var(--cd-color-danger);
-  --cd-form-optional-color: var(--cd-color-tertiary);
-  --cd-form-extra-color: var(--cd-color-tertiary);
-  --cd-form-error-color: var(--cd-color-danger);
-  --cd-form-warning-color: var(--cd-color-warning);
-  --cd-form-error-font-size: var(--cd-font-size-small);
-  --cd-form-section-gap: var(--cd-spacing-base);
+  --cd-checkbox-inner-height: 20px;
+  --cd-size-checkbox-inner-shadow: var(--cd-border-thickness-control);
+  --cd-width-checkbox-cardtype-border: 1px;
+  --cd-width-checkbox-outline: 2px;
+  --cd-radius-checkbox-cardtype: 3px;
+  --cd-radius-checkbox-inner: var(--cd-border-radius-extra-small);
+  --cd-spacing-checkbox-extra-margintop: var(--cd-spacing-extra-tight);
+  --cd-spacing-checkbox-cardtype-paddingx: var(--cd-spacing-base);
+  --cd-spacing-checkbox-cardtype-paddingy: var(--cd-spacing-base-tight);
+  --cd-spacing-checkbox-card-group-vertical-marginbottom: var(--cd-spacing-base);
+  --cd-spacing-checkbox-group-vertical-item-marginbottom: var(--cd-spacing-base-tight);
+  --cd-spacing-checkbox-group-horizontal-marginright: var(--cd-spacing-base);
+  --cd-font-checkbox-cardtype-addon-size: var(--cd-font-size-regular);
+  --cd-font-checkbox-cardtype-addon-fontweight: var(--cd-font-weight-bold);
+  --cd-font-checkbox-cardtype-addon-lineheight: 20px;
+  --cd-font-checkbox-cardtype-extra-size: var(--cd-font-size-regular);
+  --cd-font-checkbox-cardtype-extra-lineheight: 20px;
+  --cd-transition-duration-checkbox-bg: var(--cd-motion-duration-none);
+  --cd-transition-function-checkbox-bg: var(--cd-motion-ease-in);
+  --cd-transition-delay-checkbox-bg: var(--cd-motion-delay-none);
+  --cd-transition-duration-checkbox-border: var(--cd-motion-duration-none);
+  --cd-transition-function-checkbox-border: var(--cd-motion-ease-in);
+  --cd-transition-delay-checkbox-border: var(--cd-motion-delay-none);
+  --cd-color-radio-default-border-default: var(--cd-color-text-3);
+  --cd-color-radio-default-bg-default: transparent;
+  --cd-color-radio-default-bg-hover: var(--cd-color-fill-0);
+  --cd-color-radio-default-bg-active: var(--cd-color-fill-1);
+  --cd-color-radio-default-border-hover: var(--cd-color-focus-border);
+  --cd-color-radio-checked-border-hover: var(--cd-color-primary-hover);
+  --cd-color-radio-checked-border-active: var(--cd-color-primary-active);
+  --cd-color-radio-default-text-default: var(--cd-color-text-0);
+  --cd-color-radio-extra-text-default: var(--cd-color-text-2);
+  --cd-color-radio-primary-bg-hover: var(--cd-color-primary-hover);
+  --cd-color-radio-primary-bg-active: var(--cd-color-primary-active);
+  --cd-color-radio-primary-border-default: var(--cd-color-primary);
+  --cd-color-radio-primary-bg-default: var(--cd-color-primary);
+  --cd-color-radio-primary-text-default: var(--cd-color-white);
+  --cd-color-radio-checked-bg-disabled: var(--cd-color-primary-disabled);
+  --cd-color-radio-default-border-disabled: var(--cd-color-border);
+  --cd-color-radio-checked-border-disabled: var(--cd-color-primary-disabled);
+  --cd-color-radio-disabled-bg-default: var(--cd-color-disabled-fill);
+  --cd-color-radio-disabled-bg-hover: transparent;
+  --cd-color-radio-disabled-text-default: var(--cd-color-disabled-text);
+  --cd-color-radio-disabled-border-default: var(--cd-color-border);
+  --cd-color-radio-checked-icon-disabled: var(--cd-color-white);
+  --cd-color-radio-buttonradio-text-default: var(--cd-color-text-1);
+  --cd-color-radio-buttonradio-bg-default: var(--cd-color-fill-0);
+  --cd-color-radio-buttonradio-text-disabled: var(--cd-color-disabled-text);
+  --cd-color-radio-addon-buttonradio-bg-hover: var(--cd-color-fill-1);
+  --cd-color-radio-addon-buttonradio-text-checked: var(--cd-color-primary);
+  --cd-color-radio-addon-buttonradio-bg-checked: var(--cd-color-bg-3);
+  --cd-color-radio-cardradiogroup-bg-default: transparent;
+  --cd-color-radio-cardradiogroup-bg-checked: var(--cd-color-primary-light-default);
+  --cd-color-radio-cardradiogroup-disabled-bg-checked: var(--cd-color-primary-light-default);
+  --cd-color-radio-cardradiogroup-disabled-bg-active: transparent;
+  --cd-color-radio-cardradiogroup-bg-hover: var(--cd-color-fill-0);
+  --cd-color-radio-cardradiogroup-bg-active: var(--cd-color-fill-1);
+  --cd-color-radio-cardradiogroup-border-default: transparent;
+  --cd-color-radio-cardradiogroup-border-active: var(--cd-color-primary);
+  --cd-color-radio-cardradiogroup-checked-border-active: var(--cd-color-primary-active);
+  --cd-color-radio-cardradiogroup-checked-border-hover: var(--cd-color-primary-hover);
+  --cd-color-radio-cardradiogroup-border-disabled-active: var(--cd-color-primary-disabled);
+  --cd-color-radio-cardradiogroup-addon-text-default: var(--cd-color-text-0);
+  --cd-color-radio-cardradiogroup-extra-text-default: var(--cd-color-text-2);
+  --cd-color-radio-cardradiogroup-checked-disabled-border-default: var(--cd-color-primary-disabled);
+  --cd-color-radio-cardradiogroup-checked-disabled-border-hover: var(--cd-color-primary-disabled);
+  --cd-color-radio-card-bg-hover: var(--cd-color-white);
+  --cd-color-radio-card-bg-active: var(--cd-color-white);
+  --cd-color-radio-card-bg-default: var(--cd-color-white);
+  --cd-color-radio-primary-outline-focus: var(--cd-color-primary-light-active);
+  --cd-radius-radio-cardradiogroup: var(--cd-border-radius-small);
+  --cd-radius-radio-addon-buttonradio: var(--cd-border-radius-small);
+  --cd-radius-radio-buttonradio: var(--cd-border-radius-small);
+  --cd-width-radio-cardradiogroup-checked-border: 1px;
+  --cd-width-radio-cardradiogroup-checked-disabled-border: 1px;
+  --cd-width-radio-hover-border: var(--cd-border-thickness-control);
+  --cd-width-radio-disabled-border: var(--cd-border-thickness-control);
+  --cd-width-radio-inner-border: var(--cd-border-thickness-control);
+  --cd-width-radio-outline: 2px;
+  --cd-height-radio-inner-min: 20px;
+  --cd-width-radio-inner: var(--cd-width-icon-medium);
+  --cd-spacing-radio-addon-paddingleft: var(--cd-spacing-tight);
+  --cd-spacing-radio-addon-marginleft: var(--cd-width-icon-medium);
+  --cd-spacing-radio-extra-paddingleft: calc(var(--cd-width-icon-medium) + var(--cd-spacing-tight));
+  --cd-spacing-radio-content-rowgap: 4px;
+  --cd-spacing-radio-addon-buttonradio-large-paddingx: var(--cd-spacing-loose);
+  --cd-spacing-radio-addon-buttonradio-large-paddingy: calc(var(--cd-spacing-base-tight) * 0.5);
+  --cd-spacing-radio-addon-buttonradio-small-paddingx: var(--cd-spacing-base);
+  --cd-spacing-radio-addon-buttonradio-small-paddingy: var(--cd-spacing-super-tight);
+  --cd-spacing-radio-addon-buttonradio-middle-paddingx: var(--cd-spacing-base);
+  --cd-spacing-radio-addon-buttonradio-middle-paddingy: var(--cd-spacing-extra-tight);
+  --cd-spacing-radio-addon-buttonradio-marginleft: var(--cd-spacing-none);
+  --cd-spacing-radio-buttonradio-padding: var(--cd-spacing-extra-tight);
+  --cd-spacing-radio-buttonradiogroup-small-paddingx: var(--cd-spacing-super-tight);
+  --cd-spacing-radio-buttonradiogroup-small-paddingy: var(--cd-spacing-extra-tight);
+  --cd-spacing-radio-buttonradiogroup-middle-padding: var(--cd-spacing-extra-tight);
+  --cd-spacing-radio-buttonradiogroup-large-padding: var(--cd-spacing-extra-tight);
+  --cd-spacing-radio-buttonradiogroup-paddingright: var(--cd-spacing-none);
+  --cd-spacing-radio-cardradiogroup-paddingx: var(--cd-spacing-base);
+  --cd-spacing-radio-cardradiogroup-paddingy: var(--cd-spacing-base-tight);
+  --cd-spacing-radio-cardradiogroup-inner-marginright: var(--cd-spacing-tight);
+  --cd-spacing-radio-group-vertical-marginbottom: var(--cd-spacing-base-tight);
+  --cd-spacing-radio-card-group-vertical-marginbottom: var(--cd-spacing-base);
+  --cd-spacing-radio-group-horizontal-marginright: var(--cd-spacing-base);
+  --cd-font-radio-buttonradio-large-default-size: var(--cd-font-size-regular);
+  --cd-font-radio-buttonradio-small-default-size: var(--cd-font-size-small);
+  --cd-font-radio-buttonradio-middle-default-size: var(--cd-font-size-small);
+  --cd-font-radio-buttonradio-default-fontweight: var(--cd-font-weight-bold);
+  --cd-font-radio-buttonradio-hover-fontweight: var(--cd-font-weight-bold);
+  --cd-font-radio-buttonradio-checked-fontweight: var(--cd-font-weight-bold);
+  --cd-font-radio-buttonradiogroup-small-lineheight: 16px;
+  --cd-font-radio-buttonradiogroup-middle-lineheight: 16px;
+  --cd-font-radio-buttonradiogroup-large-lineheight: 20px;
+  --cd-font-radio-cardradiogroup-addon-size: var(--cd-font-size-regular);
+  --cd-font-radio-cardradiogroup-addon-fontweight: var(--cd-font-weight-bold);
+  --cd-font-radio-cardradiogroup-addon-lineheight: 20px;
+  --cd-font-radio-cardradiogroup-extra-size: var(--cd-font-size-regular);
+  --cd-font-radio-cardradiogroup-extra-fontweight: normal;
+  --cd-font-radio-cardradiogroup-extra-lineheight: 20px;
+  --cd-color-rating-icon-active: var(--cd-color-rating-icon-default);
+  --cd-color-rating-bg-default: var(--cd-color-fill-0);
+  --cd-color-rating-outline-focus: var(--cd-color-primary-light-active);
+  --cd-font-rating-fontsize: 20px;
+  --cd-spacing-rating-margin: 0px;
+  --cd-spacing-rating-padding: 0px;
+  --cd-spacing-rating-item-marginright: 6px;
+  --cd-width-rating-item-small: 16px;
+  --cd-font-rating-item-small-fontsize: var(--cd-width-rating-item-small);
+  --cd-width-rating-item-default: 24px;
+  --cd-font-rating-item-default-fontsize: var(--cd-width-rating-item-default);
+  --cd-width-rating-outline-focus: 2px;
+  --cd-transition-duration-rating-color: var(--cd-motion-duration-none);
+  --cd-transition-function-rating-color: var(--cd-motion-ease-in);
+  --cd-transition-delay-rating-color: var(--cd-motion-delay-none);
+  --cd-color-slider-text-default: var(--cd-color-text-0);
+  --cd-color-slider-dot-bg-default: var(--cd-color-white);
+  --cd-color-slider-dot-border-active: var(--cd-color-white);
+  --cd-color-slider-handle-bg-default: var(--cd-color-white);
+  --cd-color-slider-handle-bg-hover: var(--cd-color-white);
+  --cd-color-slider-handle-border-focus: var(--cd-color-focus-border);
+  --cd-color-slider-handle-disabled-border: var(--cd-color-border);
+  --cd-color-slider-mark-text-default: var(--cd-color-text-2);
+  --cd-color-slider-rail-bg-default: var(--cd-color-fill-0);
+  --cd-color-slider-track-bg-default: var(--cd-color-primary);
+  --cd-color-slider-track-disabled-bg: var(--cd-color-primary-disabled);
+  --cd-color-slider-handle-focus: var(--cd-color-primary-light-active);
+  --cd-color-slider-handle-dot: var(--cd-color-primary);
+  --cd-radius-slider-rail: var(--cd-border-radius-small);
+  --cd-radius-slider-track: var(--cd-border-radius-small);
+  --cd-height-slider-wrapper: 32px;
+  --cd-height-slider-rail: 4px;
+  --cd-height-slider-track: 4px;
+  --cd-width-slider-handle: 24px;
+  --cd-width-slider-handle-clicked: 1px;
+  --cd-width-slider-dot: 4px;
+  --cd-width-slider-handle-border-disabled: 1px;
+  --cd-width-slider-handle-focus: 2px;
+  --cd-width-slider-handle-dot: 4px;
+  --cd-spacing-slider-paddingx: 13px;
+  --cd-spacing-slider-rail-top: 14px;
+  --cd-spacing-slider-marks-top: 23px;
+  --cd-spacing-slider-boundary-top: 30px;
+  --cd-font-slider-marks-fontsize: 14px;
+  --cd-shadow-slider-knob: 0 4px 6px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.3);
+  --cd-spacing-form-field-horizontal-paddingright: var(--cd-spacing-base);
+  --cd-spacing-form-field-group-horizontal-paddingright: var(--cd-spacing-base);
+  --cd-spacing-form-field-vertical-paddingtop: var(--cd-spacing-base-tight);
+  --cd-spacing-form-field-vertical-paddingbottom: var(--cd-spacing-base-tight);
+  --cd-spacing-form-field-group-vertical-paddingtop: var(--cd-spacing-base-tight);
+  --cd-spacing-form-field-group-vertical-paddingbottom: var(--cd-spacing-base-tight);
+  --cd-spacing-form-label-paddingright: var(--cd-spacing-base);
+  --cd-spacing-form-label-paddingtop: calc((var(--cd-control-height-default) - 20px) * 0.5);
+  --cd-spacing-form-label-marginbottom: var(--cd-spacing-extra-tight);
+  --cd-spacing-form-label-margintop: 0px;
+  --cd-spacing-form-label-extra-marginleft: var(--cd-spacing-extra-tight);
+  --cd-spacing-form-label-required-marginleft: var(--cd-spacing-extra-tight);
+  --cd-spacing-form-label-posleft-marginright: 0;
+  --cd-spacing-form-label-posleft-marginbottom: 0;
+  --cd-spacing-form-label-postop-paddingtop: var(--cd-spacing-extra-tight);
+  --cd-spacing-form-label-postop-paddingbottom: var(--cd-spacing-extra-tight);
+  --cd-spacing-form-extra-posmid-margintop: var(--cd-spacing-extra-tight);
+  --cd-spacing-form-extra-posmid-marginbottom: var(--cd-spacing-extra-tight);
+  --cd-spacing-form-extra-posbottom-margintop: var(--cd-spacing-extra-tight);
+  --cd-spacing-form-switch-rating-marginy: calc((var(--cd-control-height-default) - 24px) * 0.5);
+  --cd-color-form-requiredmark-disabled-text-default: var(--cd-color-danger);
+  --cd-color-form-label-disabled-text-default: var(--cd-color-disabled-text);
+  --cd-font-form-label-fontweight: var(--cd-font-weight-bold);
+  --cd-color-form-label-text-default: var(--cd-color-text-0);
+  --cd-color-form-label-optional-text-default: var(--cd-color-tertiary);
+  --cd-color-form-label-extra-text-default: var(--cd-color-tertiary);
+  --cd-color-form-requiredmark-text-default: var(--cd-color-danger);
+  --cd-font-form-requiredmark-fontweight: var(--cd-font-weight-bold);
+  --cd-color-form-message-error-text-default: var(--cd-color-danger);
+  --cd-color-form-alerticon-icon-default: var(--cd-color-warning);
+  --cd-spacing-form-statusicon-marginright: var(--cd-spacing-extra-tight);
+  --cd-spacing-form-message-margintop: var(--cd-spacing-extra-tight);
+  --cd-color-form-section-text-default: var(--cd-color-text-0);
+  --cd-color-form-section-border-default: var(--cd-color-border);
+  --cd-width-form-section-border: var(--cd-border-thickness-control);
+  --cd-spacing-form-section-margintop: calc(var(--cd-spacing-super-loose) - var(--cd-spacing-base-tight));
+  --cd-spacing-form-section-text-paddingbottom: var(--cd-spacing-tight);
+  --cd-spacing-form-section-text-marginbottom: var(--cd-spacing-extra-tight);
+  --cd-spacing-form-section-text-paddingtop: 0px;
+  --cd-spacing-form-section-text-margintop: 0px;
+  --cd-form-spinner-track-color: var(--cd-color-fill-2);
+  --cd-form-spinner-active-color: var(--cd-color-primary);
+  --cd-color-select-main-text-default: var(--cd-color-text-0);
+  --cd-color-select-icon-default: var(--cd-color-text-2);
+  --cd-color-select-clearbtn-text-default: var(--cd-color-text-2);
+  --cd-color-select-clearbtn-text-hover: var(--cd-color-primary);
+  --cd-color-select-input-disabled-bg: var(--cd-color-disabled-fill);
+  --cd-color-select-input-disabled-text: var(--cd-color-disabled-text);
+  --cd-color-select-input-placeholder-text: var(--cd-color-text-2);
+  --cd-color-select-option-keyword-text: var(--cd-color-primary);
+  --cd-color-select-option-disabled-text: var(--cd-color-disabled-text);
+  --cd-color-select-option-border-default: var(--cd-color-border);
+  --cd-color-select-group-text: var(--cd-color-text-2);
+  --cd-color-select-prefix-suffix-text-default: var(--cd-color-text-2);
+  --cd-color-select-warning-bg: var(--cd-color-warning-light-default);
+  --cd-color-select-warning-bg-hover: var(--cd-color-warning-light-hover);
+  --cd-color-select-warning-border: var(--cd-color-warning-light-default);
+  --cd-color-select-warning-border-focus: var(--cd-color-warning);
+  --cd-color-select-danger-bg: var(--cd-color-danger-light-default);
+  --cd-color-select-danger-bg-hover: var(--cd-color-danger-light-hover);
+  --cd-color-select-danger-border: var(--cd-color-danger-light-default);
+  --cd-color-select-danger-border-focus: var(--cd-color-danger);
+  --cd-transition-duration-select-bg: var(--cd-motion-duration-none);
+  --cd-transition-function-select-bg: var(--cd-motion-ease-in);
+  --cd-transition-delay-select-bg: var(--cd-motion-delay-none);
+  --cd-transition-duration-select-border: var(--cd-motion-duration-none);
+  --cd-transition-function-select-border: var(--cd-motion-ease-in);
+  --cd-transition-delay-select-border: var(--cd-motion-delay-none);
+  --cd-transition-duration-select-option-bg: var(--cd-motion-duration-none);
+  --cd-transition-function-select-option-bg: var(--cd-motion-ease-in);
+  --cd-transition-delay-select-option-bg: var(--cd-motion-delay-none);
+  --cd-transform-scale-select: var(--cd-motion-scale-none);
+  --cd-transform-rotate-select-arrow: var(--cd-motion-rotate-none);
   --cd-select-height-default: var(--cd-control-height-default);
   --cd-select-height-small: var(--cd-control-height-small);
   --cd-select-height-large: var(--cd-control-height-large);
@@ -391,120 +1266,405 @@
   --cd-select-dropdown-z: var(--cd-z-dropdown);
   --cd-select-option-padding: var(--cd-spacing-tight) var(--cd-spacing-base-tight);
   --cd-select-option-bg-hover: var(--cd-color-fill-0);
-  --cd-select-option-bg-active: var(--cd-color-fill-1);
+  --cd-select-option-bg-selected: transparent;
   --cd-select-option-color-selected: var(--cd-color-text-0);
   --cd-select-option-check-color: var(--cd-color-primary);
-  --cd-color-picker-trigger-size: 28px;
-  --cd-color-picker-trigger-radius: var(--cd-border-radius-medium);
-  --cd-color-picker-trigger-border: var(--cd-color-border);
-  --cd-color-picker-status-warning: var(--cd-color-warning);
-  --cd-color-picker-status-error: var(--cd-color-danger);
-  --cd-color-picker-panel-bg: var(--cd-color-bg-0);
-  --cd-color-picker-panel-shadow: var(--cd-shadow-elevated);
-  --cd-color-picker-panel-radius: var(--cd-border-radius-large);
-  --cd-color-picker-panel-z: var(--cd-z-popover);
-  --cd-color-picker-panel-width: 240px;
-  --cd-color-picker-saturation-height: 140px;
+  --cd-autocomplete-option-main-text: var(--cd-color-text-0);
+  --cd-autocomplete-option-bg-default: transparent;
+  --cd-autocomplete-option-bg-hover: var(--cd-color-fill-0);
+  --cd-autocomplete-option-bg-active: var(--cd-color-fill-1);
+  --cd-autocomplete-option-disabled-text: var(--cd-color-disabled-text);
+  --cd-autocomplete-option-keyword-text: var(--cd-color-primary);
+  --cd-autocomplete-option-padding-left: var(--cd-spacing-base-tight);
+  --cd-autocomplete-option-padding-right: var(--cd-spacing-base-tight);
+  --cd-autocomplete-option-padding-top: var(--cd-spacing-tight);
+  --cd-autocomplete-option-padding-bottom: var(--cd-spacing-tight);
+  --cd-autocomplete-option-first-margin-top: var(--cd-spacing-extra-tight);
+  --cd-autocomplete-option-last-margin-bottom: var(--cd-spacing-extra-tight);
+  --cd-autocomplete-option-radius: 0px;
+  --cd-autocomplete-loading-wrapper-padding-top: var(--cd-spacing-tight);
+  --cd-autocomplete-loading-wrapper-padding-bottom: var(--cd-spacing-tight);
+  --cd-autocomplete-inset-label-font-weight: 600;
+  --cd-autocomplete-keyword-font-weight: 600;
+  --cd-radius-color-picker-topleft: 8px;
+  --cd-radius-color-picker-topright: 8px;
+  --cd-radius-color-picker-bottomleft: 0px;
+  --cd-radius-color-picker-bottomright: 0px;
+  --cd-radius-color-picker-handle: var(--cd-border-radius-full);
+  --cd-radius-color-picker-alphasliderinner: 4px;
+  --cd-radius-color-picker-demoblock: 4px;
+  --cd-radius-color-picker-defaulttrigger: 4px;
+  --cd-width-color-picker-handle-border: 2px;
+  --cd-width-color-picker-colorpickerinputnumber: 58px;
+  --cd-width-color-picker-formatselect: 80px;
+  --cd-width-color-picker-defaulttrigger: 24px;
+  --cd-color-color-picker-handle-border: var(--cd-color-white);
+  --cd-spacing-color-picker-inputnumbersuffix-horizontal: 4px;
+  --cd-spacing-color-picker-inputgroup-marginleft: 4px;
+  --cd-spacing-color-picker-popover-padding: 8px;
+  --cd-spacing-color-picker-inputnumbersuffix-vertical: 4px;
+  --cd-spacing-color-picker-slider-margintop: 6px;
+  --cd-spacing-color-picker-datapart-margintop: 8px;
+  --cd-font-color-picker-inputnumbersuffix-fontsize: 14px;
+  --cd-color-picker-handle-size: 20px;
+  --cd-color-picker-slider-handle-size: 18px;
+  --cd-color-picker-handle-shadow: var(--cd-shadow-elevated);
   --cd-color-picker-slider-height: 10px;
-  --cd-color-picker-handle-size: 12px;
-  --cd-color-picker-handle-border: var(--cd-color-bg-0);
-  --cd-color-picker-swatch-size: 20px;
-  --cd-date-picker-panel-bg: var(--cd-color-bg-0);
-  --cd-date-picker-panel-shadow: var(--cd-shadow-elevated);
-  --cd-date-picker-panel-radius: var(--cd-border-radius-large);
-  --cd-date-picker-panel-z: var(--cd-z-popover);
-  --cd-date-picker-cell-size: 32px;
-  --cd-date-picker-cell-radius: var(--cd-border-radius-small);
-  --cd-date-picker-cell-bg-hover: var(--cd-color-fill-0);
-  --cd-date-picker-cell-bg-selected: var(--cd-color-primary);
-  --cd-date-picker-cell-color-selected: var(--cd-color-text-inverse);
-  --cd-date-picker-cell-color-muted: var(--cd-color-text-3);
-  --cd-date-picker-footer-bg: var(--cd-color-fill-0);
-  --cd-date-picker-quick-color: var(--cd-color-primary);
-  --cd-date-picker-header-color: var(--cd-color-text-0);
-  --cd-date-picker-weekday-color: var(--cd-color-text-2);
-  --cd-date-picker-time-col-width: 56px;
-  --cd-date-picker-time-item-height: 28px;
+  --cd-height-date-picker-panel-yam-scrolllist: 266px;
+  --cd-height-date-picker-timepicker-header-min: 24px;
+  --cd-height-date-picker-yam-showing-min: 378px;
+  --cd-width-date-picker-yam-showing-min: 284px;
+  --cd-width-date-picker-panel-yam-scrolllist-li-min: 64px;
+  --cd-width-date-picker-border: var(--cd-border-thickness-control);
+  --cd-width-date-picker-yam-header-border-radius: var(--cd-border-radius-medium);
+  --cd-width-date-picker-quick-control-border-radius: var(--cd-border-radius-medium);
+  --cd-width-date-picker-range-input-border: var(--cd-border-thickness-control-focus);
+  --cd-width-date-picker-inset-input-date-type-wrapper: 284px;
+  --cd-width-date-picker-panel-list: 56px;
+  --cd-height-date-picker-panel-list-body: 224px;
+  --cd-width-date-picker-day: 36px;
+  --cd-width-date-picker-day-main: 32px;
+  --cd-width-date-picker-day-compact: 28px;
+  --cd-width-date-picker-day-main-compact: 24px;
+  --cd-spacing-date-picker-yam-header-padding-x: var(--cd-spacing-base);
+  --cd-spacing-date-picker-yam-header-padding-y: var(--cd-spacing-base-tight);
+  --cd-spacing-date-picker-scrolllist-header-padding: var(--cd-spacing-base);
+  --cd-spacing-date-picker-scrolllist-body-padding: 0;
+  --cd-spacing-date-picker-inset-input-wrapper-margin: 8px;
+  --cd-spacing-date-picker-inset-input-wrapper-padding-y: 12px;
+  --cd-spacing-date-picker-inset-input-wrapper-padding-x: 16px;
+  --cd-spacing-date-picker-inset-input-wrapper-padding-bottom: 0;
+  --cd-spacing-date-picker-inset-input-separator-padding-x: 4px;
+  --cd-color-date-picker-panel-bg-default: var(--cd-color-bg-3);
+  --cd-color-date-picker-footer-bg-default: var(--cd-color-fill-0);
+  --cd-color-date-picker-day-text-default: var(--cd-color-text-2);
+  --cd-color-date-picker-day-text-active: var(--cd-color-text-0);
+  --cd-color-date-picker-date-bg-hover: var(--cd-color-fill-0);
+  --cd-color-date-picker-border-bg-default: var(--cd-color-border);
+  --cd-color-date-picker-quick-bg-default: transparent;
+  --cd-color-date-picker-quick-button-text-default: var(--cd-color-primary);
+  --cd-color-date-picker-date-text-default: var(--cd-color-text-0);
+  --cd-color-date-picker-date-selected-text-default: var(--cd-color-white);
+  --cd-color-date-picker-date-selected-bg-default: var(--cd-color-primary);
+  --cd-color-date-picker-date-disabled-text-default: var(--cd-color-disabled-text);
+  --cd-color-date-picker-date-today-text-default: var(--cd-color-primary);
+  --cd-color-date-picker-date-in-hover-bg-default: var(--cd-color-primary-light-default);
+  --cd-color-date-picker-nav-month-icon-text-default: var(--cd-color-text-0);
+  --cd-color-date-picker-nav-icon-text-default: var(--cd-color-text-2);
+  --cd-color-date-picker-range-input-bg-default: var(--cd-color-fill-0);
+  --cd-color-date-picker-range-input-bg-hover: var(--cd-color-fill-1);
+  --cd-color-date-picker-range-input-border-default: transparent;
+  --cd-color-date-picker-range-input-border-active: var(--cd-color-focus-border);
+  --cd-color-date-picker-range-input-disabled-text-default: var(--cd-color-disabled-text);
+  --cd-color-date-picker-range-input-disabled-bg-default: var(--cd-color-disabled-fill);
+  --cd-color-date-picker-range-input-input-wrapper-bg-focus: var(--cd-color-fill-1);
+  --cd-radius-date-picker-range-input-input-wrapper: var(--cd-border-radius-small);
+  --cd-height-date-picker-range-input-default: 32px;
+  --cd-width-date-picker-inset-input-date-type-wrapper-compact: 216px;
+  --cd-height-date-picker-inset-input-wrapper-compact: 28px;
+  --cd-font-size-date-picker-inset-input-compact-font-size: 12px;
+  --cd-spacing-date-picker-inset-input-wrapper-compact-margin: 4px;
+  --cd-spacing-date-picker-inset-input-wrapper-compact-padding-y: 8px;
+  --cd-spacing-date-picker-inset-input-wrapper-compact-padding-x: 8px;
+  --cd-spacing-date-picker-inset-input-wrapper-compact-padding-bottom: 0;
+  --cd-transition-date-picker-range-input: background-color .16s ease-in-out;
+  --cd-shadow-date-picker-panel: var(--cd-shadow-elevated);
+  --cd-radius-date-picker-panel: var(--cd-border-radius-large);
+  --cd-z-date-picker-panel: var(--cd-z-popover);
+  --cd-radius-date-picker-day-main: var(--cd-border-radius-small);
+  --cd-color-date-picker-date-muted-text-default: var(--cd-color-text-3);
+  --cd-color-time-picker-range-picker-panel-split-border: var(--cd-color-border);
+  --cd-color-time-picker-range-panel-border: rgba(0, 0, 0, 0.1);
+  --cd-width-time-picker-range-panel-border: 1px;
+  --cd-height-time-picker-panel-body: 252px;
+  --cd-width-time-picker-panel-list-ampm: 72px;
+  --cd-width-time-picker-panel-list-hour: 64px;
+  --cd-width-time-picker-panel-list-minute: 64px;
+  --cd-width-time-picker-panel-list-second: 64px;
+  --cd-width-time-picker-range-panel-scrolllist-body-border: 2px;
+  --cd-spacing-time-picker-range-panel-scrolllist-header-body-padding: 0;
+  --cd-radius-time-picker-range-panel: var(--cd-border-radius-medium);
+  --cd-radius-time-picker-input: var(--cd-border-radius-small);
+  --cd-shadow-time-picker-range-panel: 0 4px 14px rgba(0, 0, 0, 0.1);
+  --cd-color-tree-option-text-default: var(--cd-color-text-0);
+  --cd-color-tree-option-icon-default: var(--cd-color-text-2);
+  --cd-color-tree-option-icon-hover: var(--cd-color-text-0);
+  --cd-color-tree-option-icon-active: var(--cd-color-black);
+  --cd-color-tree-option-bg-hover: var(--cd-color-fill-0);
+  --cd-color-tree-option-selected-bg-default: var(--cd-color-fill-1);
+  --cd-color-tree-option-bg-active: var(--cd-color-primary-light-default);
+  --cd-color-tree-option-disabled-text-default: var(--cd-color-disabled-text);
+  --cd-color-tree-option-loading-icon-default: var(--cd-color-primary);
+  --cd-color-tree-option-draggable-insert-border-default: var(--cd-color-primary);
+  --cd-color-tree-option-highlight-text: var(--cd-color-primary);
+  --cd-font-tree-option-highlight-weight: var(--cd-font-weight-bold);
+  --cd-radius-tree-checkbox-addon: var(--cd-border-radius-small);
+  --cd-spacing-tree-search-wrapper-padding-x: var(--cd-spacing-base-tight);
+  --cd-spacing-tree-search-wrapper-padding-y: var(--cd-spacing-tight);
+  --cd-spacing-tree-option-level-padding-left: var(--cd-spacing-base-loose);
+  --cd-spacing-tree-option-level1-padding-left: var(--cd-spacing-tight);
+  --cd-spacing-tree-option-list-padding-x: var(--cd-spacing-none);
+  --cd-spacing-tree-option-list-padding-y: var(--cd-spacing-tight);
+  --cd-spacing-tree-icon-margin-right: var(--cd-spacing-tight);
+  --cd-spacing-tree-label-with-icon-margin-right: var(--cd-spacing-tight);
+  --cd-spacing-tree-option-draggable-padding-y: var(--cd-spacing-super-tight);
+  --cd-spacing-tree-option-draggable-padding-x: var(--cd-spacing-none);
+  --cd-width-tree-empty-icon: var(--cd-width-icon-small);
+  --cd-width-tree-spin-icon: var(--cd-width-icon-small);
+  --cd-width-tree-option-draggable-border: 2px;
+  --cd-width-tree-option-line: 1px;
+  --cd-color-tree-option-line: var(--cd-color-text-3);
   --cd-tree-node-height: 32px;
-  --cd-tree-node-padding-x: var(--cd-spacing-base-tight);
-  --cd-tree-node-bg-hover: var(--cd-color-fill-0);
-  --cd-tree-node-bg-active: var(--cd-color-fill-1);
-  --cd-tree-node-color-selected: var(--cd-color-text-0);
-  --cd-tree-indent: var(--cd-spacing-base);
-  --cd-tree-expand-icon-color: var(--cd-color-text-2);
   --cd-tree-node-height-small: 28px;
   --cd-tree-node-height-large: 36px;
-  --cd-tree-node-color: var(--cd-color-text-0);
-  --cd-tree-node-color-disabled: var(--cd-color-text-2);
-  --cd-tree-node-bg-selected: var(--cd-color-primary-light-default);
-  --cd-tree-search-highlight-bg: transparent;
-  --cd-tree-search-highlight-color: var(--cd-color-primary);
-  --cd-tree-search-highlight-weight: var(--cd-font-weight-bold);
+  --cd-tree-row-height: var(--cd-tree-node-height);
+  --cd-tree-node-font-size: var(--cd-font-size-regular);
   --cd-tree-focus-ring: var(--cd-color-primary);
-  --cd-tree-border-color: var(--cd-color-border);
-  --cd-tree-border-color-warning: var(--cd-color-warning);
-  --cd-tree-border-color-error: var(--cd-color-danger);
-  --cd-cascader-column-width: 160px;
-  --cd-cascader-column-border: var(--cd-color-border);
-  --cd-transfer-panel-width: 200px;
-  --cd-transfer-panel-height: 240px;
-  --cd-transfer-panel-border: var(--cd-color-border);
-  --cd-transfer-panel-radius: var(--cd-border-radius-medium);
-  --cd-transfer-panel-header-bg: var(--cd-color-fill-0);
-  --cd-transfer-item-height: 32px;
-  --cd-transfer-item-bg-hover: var(--cd-color-fill-0);
-  --cd-transfer-gap: var(--cd-spacing-base-tight);
-  --cd-upload-dragger-border: var(--cd-color-border);
-  --cd-upload-dragger-border-active: var(--cd-color-primary);
-  --cd-upload-dragger-bg: var(--cd-color-tertiary-light-default);
-  --cd-upload-dragger-bg-active: var(--cd-color-primary-light-default);
-  --cd-upload-dragger-radius: var(--cd-border-radius-medium);
-  --cd-upload-item-bg-hover: var(--cd-color-fill-1);
-  --cd-upload-item-color-error: var(--cd-color-danger);
-  --cd-upload-border-warning: var(--cd-color-warning);
-  --cd-upload-border-error: var(--cd-color-danger);
-  --cd-breadcrumb-color: var(--cd-color-text-2);
-  --cd-breadcrumb-color-active: var(--cd-color-text-0);
-  --cd-breadcrumb-color-link: var(--cd-color-primary);
-  --cd-breadcrumb-active-weight: var(--cd-font-weight-bold);
-  --cd-breadcrumb-separator-color: var(--cd-color-text-2);
-  --cd-breadcrumb-gap: var(--cd-spacing-tight);
-  --cd-breadcrumb-font-size: var(--cd-font-size-regular);
-  --cd-pagination-item-size: 32px;
-  --cd-pagination-item-radius: var(--cd-border-radius-small);
-  --cd-pagination-item-border: transparent;
-  --cd-pagination-item-bg-active: var(--cd-color-primary-light-default);
-  --cd-pagination-item-color-active: var(--cd-color-primary);
-  --cd-pagination-item-bg-hover: var(--cd-color-fill-0);
-  --cd-pagination-gap: var(--cd-spacing-tight);
-  --cd-steps-icon-size: 28px;
-  --cd-steps-icon-bg: var(--cd-color-text-2);
-  --cd-steps-icon-bg-process: var(--cd-color-primary);
-  --cd-steps-icon-bg-finish: var(--cd-color-primary);
-  --cd-steps-icon-bg-error: var(--cd-color-danger);
-  --cd-steps-icon-color: var(--cd-color-text-inverse);
-  --cd-steps-icon-color-active: var(--cd-color-text-inverse);
-  --cd-steps-title-color: var(--cd-color-text-0);
-  --cd-steps-desc-color: var(--cd-color-text-2);
-  --cd-steps-line-color: var(--cd-color-fill-2);
-  --cd-steps-line-color-finish: var(--cd-color-primary);
-  --cd-tabs-tab-color: var(--cd-color-text-2);
-  --cd-tabs-tab-color-active: var(--cd-color-text-0);
-  --cd-tabs-tab-color-disabled: var(--cd-color-text-3);
-  --cd-tabs-tab-padding: var(--cd-spacing-tight) var(--cd-spacing-base);
-  --cd-tabs-tab-font-size: var(--cd-font-size-regular);
-  --cd-tabs-ink-color: var(--cd-color-primary);
-  --cd-tabs-ink-height: 2px;
-  --cd-tabs-bar-border: var(--cd-color-border);
-  --cd-tabs-card-bg: var(--cd-color-fill-0);
-  --cd-tabs-card-bg-active: var(--cd-color-bg-0);
-  --cd-tabs-card-radius: var(--cd-border-radius-small);
-  --cd-tabs-button-bg: var(--cd-color-fill-0);
-  --cd-tabs-button-bg-hover: var(--cd-color-fill-1);
-  --cd-tabs-button-bg-active: var(--cd-color-primary);
-  --cd-tabs-button-color-active: var(--cd-color-white, #fff);
-  --cd-tabs-button-gap: 2px;
-  --cd-tabs-button-pad: 2px;
+  --cd-tree-node-padding-x: var(--cd-spacing-base-tight);
+  --cd-color-tree-select-default-icon-default: var(--cd-color-text-2);
+  --cd-color-tree-select-default-icon-hover: var(--cd-color-primary-hover);
+  --cd-color-tree-select-input-disabled-bg-default: var(--cd-color-disabled-fill);
+  --cd-color-tree-select-input-disabled-text-default: var(--cd-color-disabled-text);
+  --cd-color-tree-select-input-placeholder-text-default: var(--cd-color-text-2);
+  --cd-color-tree-select-label: var(--cd-color-text-2);
+  --cd-font-tree-select-label: var(--cd-font-weight-regular);
+  --cd-color-tree-select-warning-bg-default: var(--cd-color-warning-light-default);
+  --cd-color-tree-select-warning-border-default: var(--cd-color-warning-light-default);
+  --cd-color-tree-select-warning-bg-hover: var(--cd-color-warning-light-hover);
+  --cd-color-tree-select-warning-border-hover: var(--cd-color-warning-light-hover);
+  --cd-color-tree-select-warning-bg-focus: var(--cd-color-warning-light-default);
+  --cd-color-tree-select-warning-border-focus: var(--cd-color-warning);
+  --cd-color-tree-select-warning-bg-active: var(--cd-color-warning-light-active);
+  --cd-color-tree-select-warning-border-active: var(--cd-color-warning-light-active);
+  --cd-color-tree-select-danger-bg-default: var(--cd-color-danger-light-default);
+  --cd-color-tree-select-danger-border-default: var(--cd-color-danger-light-default);
+  --cd-color-tree-select-danger-bg-hover: var(--cd-color-danger-light-hover);
+  --cd-color-tree-select-danger-border-hover: var(--cd-color-danger-light-hover);
+  --cd-color-tree-select-danger-bg-focus: var(--cd-color-danger-light-default);
+  --cd-color-tree-select-danger-border-focus: var(--cd-color-danger);
+  --cd-color-tree-select-danger-bg-active: var(--cd-color-danger-light-active);
+  --cd-color-tree-select-danger-border-active: var(--cd-color-danger-light-active);
+  --cd-color-cascader-option-main-text-default: var(--cd-color-text-0);
+  --cd-color-cascader-option-bg-hover: var(--cd-color-fill-0);
+  --cd-color-cascader-option-bg-active: var(--cd-color-fill-1);
+  --cd-color-cascader-option-bg-selected: var(--cd-color-primary-light-default);
+  --cd-color-cascader-option-disabled-text-default: var(--cd-color-disabled-text);
+  --cd-color-cascader-option-empty-text-default: var(--cd-color-disabled-text);
+  --cd-color-cascader-prefix-suffix-text-default: var(--cd-color-text-2);
+  --cd-color-cascader-label-text-default: var(--cd-color-text-2);
+  --cd-color-cascader-icon-default: var(--cd-color-text-2);
+  --cd-color-cascader-icon-hover: var(--cd-color-primary-hover);
+  --cd-color-cascader-icon-active: var(--cd-color-primary-active);
+  --cd-color-cascader-option-icon-default: var(--cd-color-cascader-icon-default);
+  --cd-color-cascader-selection-n-text-default: var(--cd-color-text-0);
+  --cd-color-cascader-selection-text-default: var(--cd-color-text-0);
+  --cd-color-cascader-placeholder-text-default: var(--cd-color-text-2);
+  --cd-color-cascader-select-highlight: var(--cd-color-primary);
+  --cd-font-cascader-label-fontweight: 600;
+  --cd-font-cascader-select-fontweight: var(--cd-font-weight-bold);
+  --cd-cascader-column-width: 150px;
+  --cd-cascader-column-border: var(--cd-color-fill-0);
+  --cd-color-transfer-bg: var(--cd-color-bg-1);
+  --cd-color-transfer-border: var(--cd-color-border);
+  --cd-color-transfer-header-text: var(--cd-color-text-2);
+  --cd-color-transfer-empty-text: var(--cd-color-text-2);
+  --cd-color-transfer-group-title-text: var(--cd-color-text-2);
+  --cd-color-transfer-disabled-text: var(--cd-color-disabled-text);
+  --cd-color-transfer-close-icon-icon: var(--cd-color-text-2);
+  --cd-color-transfer-item-text: var(--cd-color-text-1);
+  --cd-color-transfer-selected-item-text: var(--cd-color-text-0);
+  --cd-color-transfer-item-bg-hover: var(--cd-color-fill-0);
+  --cd-color-transfer-item-bg-active: var(--cd-color-fill-1);
+  --cd-width-transfer-border: 1px;
+  --cd-width-transfer-min-width: 402px;
+  --cd-height-transfer: 400px;
+  --cd-height-transfer-header: 24px;
+  --cd-height-transfer-item-min-height: 36px;
+  --cd-width-transfer-item-close-icon: var(--cd-width-icon-small);
+  --cd-width-transfer-left: 50%;
+  --cd-width-transfer-right: 50%;
+  --cd-height-transfer-left-empty: 36px;
+  --cd-width-transfer-left-border: var(--cd-border-thickness-control);
+  --cd-height-transfer-right-header: 32px;
+  --cd-height-transfer-right-empty: 100%;
+  --cd-width-transfer-empty: 100%;
+  --cd-height-transfer-group-title: 28px;
+  --cd-spacing-transfer-header-margin-top: 12px;
+  --cd-spacing-transfer-header-margin-right: 12px;
+  --cd-spacing-transfer-header-margin-bottom: 8px;
+  --cd-spacing-transfer-header-margin-left: 12px;
+  --cd-spacing-transfer-header-all-margin-left: var(--cd-spacing-base);
+  --cd-spacing-transfer-item-padding-top: var(--cd-spacing-tight);
+  --cd-spacing-transfer-item-padding-right: 9px;
+  --cd-spacing-transfer-item-padding-bottom: var(--cd-spacing-tight);
+  --cd-spacing-transfer-item-padding-left: var(--cd-spacing-base-tight);
+  --cd-spacing-transfer-right-header-margin-top: var(--cd-spacing-base-tight);
+  --cd-spacing-transfer-right-header-margin-bottom: 0;
+  --cd-spacing-transfer-right-item-drag-handler-margin-right: 4px;
+  --cd-spacing-transfer-filter-margin-top: 12px;
+  --cd-spacing-transfer-filter-margin-right: 12px;
+  --cd-spacing-transfer-filter-margin-bottom: 0;
+  --cd-spacing-transfer-filter-margin-left: 12px;
+  --cd-spacing-transfer-group-title-padding-left: var(--cd-spacing-base-tight);
+  --cd-radius-transfer: var(--cd-border-radius-medium);
+  --cd-font-transfer-header-all-font-weight: 600;
+  --cd-height-navigation-item-base: 36px;
+  --cd-height-navigation-header-logo-collapsed: 36px;
+  --cd-height-navigation-horizontal-header: 60px;
+  --cd-height-navigation-footer: 48px;
+  --cd-width-navigation-container-base: 240px;
+  --cd-width-navigation-container-collapsed: 60px;
+  --cd-width-navigation-border: 1px;
+  --cd-width-navigation-icon-text-between: 12px;
+  --cd-width-navigation-icon-left: 20px;
+  --cd-width-navigation-icon-left-minwidth: 20px;
+  --cd-width-navigation-dropdown-item-nav-item-minwidth: 150px;
+  --cd-width-navigation-outline: 2px;
+  --cd-width-navigation-outlineoffset: -2px;
+  --cd-width-navigation-item-borderradius: var(--cd-border-radius-small);
+  --cd-font-size-navigation-header-text: var(--cd-font-size-header-5);
+  --cd-spacing-navigation-paddingx: var(--cd-spacing-tight);
+  --cd-spacing-navigation-collapsed-paddingx: var(--cd-spacing-tight);
+  --cd-spacing-navigation-item-paddingx: var(--cd-spacing-base-tight);
+  --cd-spacing-navigation-item-paddingy: var(--cd-spacing-tight);
+  --cd-spacing-navigation-item-marginbottom: var(--cd-spacing-tight);
+  --cd-spacing-navigation-list-wrapper-paddingtop: 12px;
+  --cd-spacing-navigation-header-logo-marginright: 8px;
+  --cd-spacing-navigation-horizontal-paddingleft: 24px;
+  --cd-spacing-navigation-vertical-header-paddingleft: calc((var(--cd-width-navigation-container-collapsed) - var(--cd-spacing-navigation-collapsed-paddingx) * 2 - var(--cd-width-navigation-border) - var(--cd-height-navigation-header-logo-collapsed)) / 2);
+  --cd-spacing-navigation-vertical-header-paddingright: var(--cd-spacing-tight);
+  --cd-spacing-navigation-vertical-header-collapsed-paddingleft: calc((var(--cd-width-navigation-container-collapsed) - var(--cd-spacing-navigation-collapsed-paddingx) * 2 - var(--cd-width-navigation-border) - var(--cd-height-navigation-header-logo-collapsed)) / 2);
+  --cd-spacing-navigation-vertical-header-collapsed-paddingright: 0;
+  --cd-spacing-navigation-footer-paddingx: 24px;
+  --cd-spacing-navigation-footer-paddingy: 16px;
+  --cd-spacing-navigation-vertical-footer-paddingx: var(--cd-spacing-tight);
+  --cd-spacing-navigation-vertical-footer-collapse-text-marginleft: 12px;
+  --cd-color-navigation-bg-default: var(--cd-color-nav-bg);
+  --cd-color-navigation-border-default: var(--cd-color-border);
+  --cd-color-navigation-header-text-default: var(--cd-color-text-0);
+  --cd-color-navigation-footer-icon-default: var(--cd-color-text-1);
+  --cd-color-navigation-iteml1-text-default: var(--cd-color-text-0);
+  --cd-color-navigation-iteml1-icon-default: var(--cd-color-text-2);
+  --cd-color-navigation-iteml1-bg-hover: var(--cd-color-fill-0);
+  --cd-color-navigation-iteml1-bg-active: var(--cd-color-fill-1);
+  --cd-color-navigation-iteml1-selected-bg-default: var(--cd-color-primary-light-default);
+  --cd-color-navigation-iteml1-selected-text-default: var(--cd-color-text-0);
+  --cd-color-navigation-iteml1-selected-icon-default: var(--cd-color-primary);
+  --cd-color-navigation-iteml1-disabled-text-default: var(--cd-color-disabled-text);
+  --cd-color-navigation-iteml1-selected-disabled-bg-default: transparent;
+  --cd-color-navigation-iteml1-selected-disabled-text-default: var(--cd-color-primary-disabled);
+  --cd-color-navigation-iteml1-selected-disabled-icon-default: var(--cd-color-primary-disabled);
+  --cd-color-navigation-outline-focus: var(--cd-color-primary-light-active);
+  --cd-color-navigation-horizontal-iteml1-text-default: var(--cd-color-text-2);
+  --cd-color-navigation-horizontal-iteml1-text-hover: var(--cd-color-text-1);
+  --cd-color-navigation-horizontal-iteml1-selected-text-default: var(--cd-color-text-0);
+  --cd-font-navigation-header-item-fontweight: var(--cd-font-weight-bold);
+  --cd-font-navigation-popover-nav-item-selected-fontweight: normal;
+  --cd-spacing-breadcrumb-item-wrap-marginy: var(--cd-spacing-extra-tight);
+  --cd-spacing-breadcrumb-item-wrap-marginright: var(--cd-spacing-extra-tight);
+  --cd-spacing-breadcrumb-item-marginright: var(--cd-spacing-extra-tight);
+  --cd-spacing-breadcrumb-item-text-marginleft: var(--cd-spacing-extra-tight);
+  --cd-spacing-breadcrumb-restitem-marginright: var(--cd-spacing-tight);
+  --cd-color-breadcrumb-default-text-default: var(--cd-color-text-2);
+  --cd-color-breadcrumb-default-text-hover: var(--cd-color-link);
+  --cd-color-breadcrumb-default-text-active: var(--cd-color-link-hover);
+  --cd-color-breadcrumb-active-text-default: var(--cd-color-text-0);
+  --cd-color-breadcrumb-active-text-active: var(--cd-color-text-0);
+  --cd-color-breadcrumb-sepearator-default-icon-default: var(--cd-color-text-2);
+  --cd-color-breadcrumb-restitem-text-default: var(--cd-color-text-2);
+  --cd-font-breadcrumb-default-fontweight: var(--cd-font-weight-regular);
+  --cd-font-breadcrumb-active-fontweight: var(--cd-font-weight-bold);
+  --cd-font-breadcrumb-compact-fontsize: var(--cd-font-size-small);
+  --cd-font-breadcrumb-loose-fontsize: var(--cd-font-size-regular);
+  --cd-breadcrumb-color: var(--cd-color-breadcrumb-default-text-default);
+  --cd-breadcrumb-color-link: var(--cd-color-breadcrumb-default-text-default);
+  --cd-breadcrumb-color-link-hover: var(--cd-color-breadcrumb-default-text-hover);
+  --cd-breadcrumb-color-link-active: var(--cd-color-breadcrumb-default-text-active);
+  --cd-breadcrumb-color-active: var(--cd-color-breadcrumb-active-text-default);
+  --cd-breadcrumb-restitem-color: var(--cd-color-breadcrumb-restitem-text-default);
+  --cd-breadcrumb-active-weight: var(--cd-font-breadcrumb-active-fontweight);
+  --cd-breadcrumb-separator-color: var(--cd-color-breadcrumb-sepearator-default-icon-default);
+  --cd-breadcrumb-gap: var(--cd-spacing-breadcrumb-restitem-marginright);
+  --cd-breadcrumb-font-size: var(--cd-font-breadcrumb-loose-fontsize);
+  --cd-breadcrumb-font-size-compact: var(--cd-font-breadcrumb-compact-fontsize);
+  --cd-breadcrumb-item-max-width: 12em;
+  --cd-font-tabs-tab-fontsize: var(--cd-font-size-regular);
+  --cd-font-tabs-tab-fontweight: var(--cd-font-weight-regular);
+  --cd-font-tabs-tab-active-fontweight: var(--cd-font-weight-bold);
+  --cd-color-tabs-tab-line-text-default: var(--cd-color-text-2);
+  --cd-color-tabs-tab-line-text-hover: var(--cd-color-text-0);
+  --cd-color-tabs-tab-line-text-active: var(--cd-color-text-0);
+  --cd-color-tabs-tab-line-selected-text-default: var(--cd-color-text-0);
+  --cd-color-tabs-tab-line-border-default: var(--cd-color-border);
+  --cd-color-tabs-tab-line-border-hover: var(--cd-color-fill-0);
+  --cd-color-tabs-tab-line-border-active: var(--cd-color-fill-1);
+  --cd-color-tabs-tab-line-selected-indicator-default: var(--cd-color-primary);
+  --cd-color-tabs-tab-line-disabled-text-default: var(--cd-color-disabled-text);
+  --cd-color-tabs-tab-line-vertical-bg-hover: var(--cd-color-fill-0);
+  --cd-color-tabs-tab-line-vertical-bg-active: var(--cd-color-fill-1);
+  --cd-color-tabs-tab-line-vertical-selected-bg-default: var(--cd-color-primary-light-default);
+  --cd-color-tabs-tab-card-border-default: var(--cd-color-border);
+  --cd-color-tabs-tab-card-bg-hover: var(--cd-color-fill-0);
+  --cd-color-tabs-tab-card-bg-active: var(--cd-color-fill-1);
+  --cd-color-tabs-tab-card-selected-bg-default: var(--cd-color-bg-1);
+  --cd-color-tabs-tab-card-selected-indicator-default: var(--cd-color-border);
+  --cd-color-tabs-tab-button-text-default: var(--cd-color-text-2);
+  --cd-color-tabs-tab-button-bg-hover: var(--cd-color-fill-0);
+  --cd-color-tabs-tab-button-bg-active: var(--cd-color-fill-1);
+  --cd-color-tabs-tab-button-selected-bg-default: var(--cd-color-primary-light-default);
+  --cd-color-tabs-tab-button-selected-text-default: var(--cd-color-primary);
+  --cd-color-tabs-tab-icon-default: var(--cd-color-text-2);
+  --cd-color-tabs-tab-icon-hover: var(--cd-color-text-0);
+  --cd-color-tabs-tab-icon-active: var(--cd-color-text-0);
+  --cd-color-tabs-tab-selected-icon-default: var(--cd-color-primary);
+  --cd-color-tabs-tab-pane-text-default: var(--cd-color-text-0);
+  --cd-color-tabs-tab-pane-arrow-text-default: var(--cd-color-primary);
+  --cd-color-tabs-tab-pane-arrow-bg-hover: var(--cd-color-fill-0);
+  --cd-color-tabs-tab-pane-arrow-bg-active: var(--cd-color-fill-1);
+  --cd-color-tabs-tab-pane-arrow-disabled-text-default: var(--cd-color-disabled-text);
+  --cd-color-tabs-tab-slash-line: var(--cd-color-text-2);
+  --cd-width-tabs-bar-line-border: var(--cd-border-thickness-control);
+  --cd-width-tabs-bar-line-tab-border: 2px;
+  --cd-width-tabs-bar-card-border: var(--cd-border-thickness-control);
+  --cd-width-tabs-tab-slash-line: 8px;
+  --cd-height-tabs-tab-slash-line: 14px;
+  --cd-radius-tabs-tab-card: var(--cd-border-radius-small) var(--cd-border-radius-small) 0 0;
+  --cd-radius-tabs-tab-card-left: var(--cd-border-radius-small) 0 0 var(--cd-border-radius-small);
+  --cd-radius-tabs-tab-button: var(--cd-border-radius-small);
+  --cd-spacing-tabs-tab-pane-arrow: 8px;
+  --cd-spacing-tabs-bar-extra-paddingy: 0px;
+  --cd-spacing-tabs-bar-extra-paddingx: 5px;
+  --cd-spacing-tabs-tab-icon-marginright: var(--cd-spacing-tight);
+  --cd-spacing-tabs-overflow-icon-marginright: 4px;
+  --cd-spacing-tabs-overflow-icon-marginleft: 4px;
+  --cd-spacing-tabs-bar-line-tab-paddingtop: var(--cd-spacing-base);
+  --cd-spacing-tabs-bar-line-tab-paddingx: var(--cd-spacing-extra-tight);
+  --cd-spacing-tabs-bar-line-tab-paddingbottom: calc(var(--cd-spacing-base) - 2px);
+  --cd-spacing-tabs-bar-line-tab-marginright: var(--cd-spacing-loose);
+  --cd-spacing-tabs-bar-line-tab-small-paddingtop: var(--cd-spacing-tight);
+  --cd-spacing-tabs-bar-line-tab-small-paddingbottom: calc(var(--cd-spacing-tight) - 2px);
+  --cd-spacing-tabs-bar-line-tab-medium-paddingtop: var(--cd-spacing-base-tight);
+  --cd-spacing-tabs-bar-line-tab-medium-paddingbottom: calc(var(--cd-spacing-base-tight) - 2px);
+  --cd-spacing-tabs-bar-line-tab-left-padding: 12px;
+  --cd-spacing-tabs-bar-line-tab-left-small-padding: calc(var(--cd-spacing-tight) - 2px);
+  --cd-spacing-tabs-bar-line-tab-left-medium-padding: calc(var(--cd-spacing-base-tight) - 2px);
+  --cd-spacing-tabs-bar-slash-tab-paddingy: 12px;
+  --cd-spacing-tabs-bar-slash-tab-paddingx: 0px;
+  --cd-spacing-tabs-bar-slash-marginright: 16px;
+  --cd-spacing-tabs-bar-slash-line-marginleft: 16px;
+  --cd-spacing-tabs-bar-slash-line-marginy: 3px;
+  --cd-spacing-tabs-content-paddingy: 5px;
+  --cd-spacing-tabs-content-paddingx: 0;
+  --cd-spacing-tabs-content-left-paddingx: 5px;
+  --cd-spacing-tabs-bar-card-tab-paddingy: var(--cd-spacing-tight);
+  --cd-spacing-tabs-bar-card-tab-paddingx: var(--cd-spacing-base-tight);
+  --cd-spacing-tabs-bar-card-tab-marginright: var(--cd-spacing-tight);
+  --cd-spacing-tabs-bar-card-tab-active-paddingbottom: calc(var(--cd-spacing-tight) - 1px);
+  --cd-spacing-tabs-bar-card-tab-left-marginbottom: var(--cd-spacing-tight);
+  --cd-spacing-tabs-bar-button-tab-paddingy: var(--cd-spacing-tight);
+  --cd-spacing-tabs-bar-button-tab-paddingx: var(--cd-spacing-base-tight);
+  --cd-spacing-tabs-bar-button-tab-marginright: var(--cd-spacing-tight);
+  --cd-spacing-tabs-bar-button-tab-marginbottom: var(--cd-spacing-tight);
   --cd-dropdown-bg: var(--cd-color-bg-0);
   --cd-dropdown-shadow: var(--cd-shadow-elevated);
   --cd-dropdown-radius: var(--cd-border-radius-medium);
@@ -513,146 +1673,466 @@
   --cd-dropdown-item-padding: var(--cd-spacing-tight) var(--cd-spacing-base);
   --cd-dropdown-item-bg-hover: var(--cd-color-fill-0);
   --cd-dropdown-item-color-disabled: var(--cd-color-text-3);
-  --cd-menu-bg: var(--cd-color-bg-0);
-  --cd-menu-item-height: 36px;
-  --cd-menu-item-padding: var(--cd-spacing-base-tight);
-  --cd-menu-item-radius: var(--cd-border-radius-small);
-  --cd-menu-item-color: var(--cd-color-text-1);
-  --cd-menu-item-color-selected: var(--cd-color-text-0);
-  --cd-menu-item-icon-color-selected: var(--cd-color-primary);
-  --cd-menu-item-color-disabled: var(--cd-color-text-3);
-  --cd-menu-item-bg-hover: var(--cd-color-fill-0);
-  --cd-menu-item-bg-selected: var(--cd-color-primary-light-default);
-  --cd-menu-submenu-arrow-color: var(--cd-color-text-2);
-  --cd-anchor-link-color: var(--cd-color-text-2);
-  --cd-anchor-link-color-active: var(--cd-color-text-0);
-  --cd-anchor-link-padding: var(--cd-spacing-extra-tight) var(--cd-spacing-base-tight);
-  --cd-anchor-rail-color: var(--cd-color-border);
-  --cd-anchor-ink-color: var(--cd-color-primary);
-  --cd-anchor-ink-width: 2px;
-  --cd-nav-bg: transparent;
-  --cd-nav-color: inherit;
-  --cd-nav-horizontal-height: 60px;
-  --cd-nav-header-height: 60px;
-  --cd-nav-header-padding-x: var(--cd-spacing-base);
-  --cd-nav-header-gap: var(--cd-spacing-tight);
-  --cd-nav-header-text-size: var(--cd-font-size-header-6);
-  --cd-nav-header-text-color: var(--cd-color-text-0);
-  --cd-nav-footer-padding: var(--cd-spacing-tight);
-  --cd-nav-footer-border: var(--cd-color-border);
-  --cd-nav-collapse-btn-height: 36px;
-  --cd-nav-collapse-btn-color: var(--cd-color-text-2);
-  --cd-nav-collapse-btn-hover-bg: var(--cd-color-fill-1);
-  --cd-tag-height-default: 20px;
-  --cd-tag-height-small: 20px;
-  --cd-tag-height-large: 24px;
-  --cd-tag-padding-x: var(--cd-spacing-tight);
-  --cd-tag-padding-y: 2px;
-  --cd-tag-padding-y-large: 4px;
-  --cd-tag-radius: var(--cd-border-radius-small);
-  --cd-tag-font-size: var(--cd-font-size-small);
-  --cd-tag-gap: var(--cd-spacing-extra-tight);
-  --cd-avatar-size-extra-small: 24px;
-  --cd-avatar-size-small: 32px;
-  --cd-avatar-size-default: 40px;
-  --cd-avatar-size-medium: 48px;
-  --cd-avatar-size-large: 72px;
-  --cd-avatar-size-extra-large: 128px;
+  --cd-color-avatar-default-border-default: var(--cd-color-bg-1);
+  --cd-color-avatar-more-bg-default: var(--cd-color-grey-5);
+  --cd-color-avatar-outline-focus: var(--cd-color-primary-light-active);
+  --cd-width-avatar-outline: 2px;
+  --cd-width-avatar-extra-extra-small: 20px;
+  --cd-width-avatar-extra-small: 24px;
+  --cd-width-avatar-small: 32px;
+  --cd-width-avatar-default: 40px;
+  --cd-width-avatar-medium: 48px;
+  --cd-width-avatar-large: 72px;
+  --cd-width-avatar-extra-large: 128px;
+  --cd-font-avatar-extra-extra-small-size: 10px;
+  --cd-font-avatar-extra-extra-small-lineheight: 15px;
+  --cd-font-avatar-extra-small-size: 10px;
+  --cd-font-avatar-extra-small-lineheight: 15px;
+  --cd-font-avatar-extra-large-size: 64px;
+  --cd-font-avatar-extra-large-lineheight: 77px;
+  --cd-radius-avatar-extra-extra-small: 3px;
+  --cd-radius-avatar-extra-small: 3px;
+  --cd-radius-avatar-small: 3px;
+  --cd-radius-avatar-default: 3px;
+  --cd-radius-avatar-medium: 3px;
+  --cd-radius-avatar-large: 6px;
+  --cd-radius-avatar-extra-large: 12px;
+  --cd-width-avatar-group-extra-extra-small-border: 1px;
+  --cd-width-avatar-group-extra-small-border: 1px;
+  --cd-width-avatar-group-small-border: 2px;
+  --cd-width-avatar-group-default-border: 2px;
+  --cd-width-avatar-group-medium-border: 2px;
+  --cd-width-avatar-group-large-border: 3px;
+  --cd-width-avatar-group-extra-large-border: 3px;
+  --cd-spacing-avatar-group-extra-extra-small-margin: -4px;
+  --cd-spacing-avatar-group-extra-small-margin: -10px;
+  --cd-spacing-avatar-group-small-margin: -12px;
+  --cd-spacing-avatar-group-default-margin: -12px;
+  --cd-spacing-avatar-group-medium-margin: -12px;
+  --cd-spacing-avatar-group-large-margin: -18px;
+  --cd-spacing-avatar-group-extra-large-margin: -32px;
+  --cd-width-avatar-additional-border: 1.5px;
+  --cd-color-avatar-additional-border: var(--cd-color-primary);
+  --cd-spacing-avatar-additional-bordergap: 2px;
+  --cd-motion-avatar-additional-border-duration: 800ms;
+  --cd-motion-avatar-additional-border-scale-end: 1.15;
+  --cd-motion-avatar-content-duration: 1000ms;
+  --cd-motion-avatar-content-scale-middle: 0.9;
+  --cd-color-avatar-top-slot-text: var(--cd-color-bg-0);
+  --cd-color-avatar-top-slot-gradient-start: var(--cd-color-primary);
+  --cd-color-avatar-top-slot-gradient-end: var(--cd-color-primary);
+  --cd-font-avatar-top-slot-small-size: 5px;
+  --cd-font-avatar-top-slot-default-size: 6px;
+  --cd-font-avatar-top-slot-medium-size: 8px;
+  --cd-font-avatar-top-slot-large-size: 14px;
+  --cd-font-avatar-top-slot-extra-large-size: 16px;
+  --cd-spacing-avatar-top-slot-small-margintop: 0px;
+  --cd-spacing-avatar-top-slot-default-margintop: -2px;
+  --cd-spacing-avatar-top-slot-medium-margintop: 0px;
+  --cd-spacing-avatar-top-slot-large-margintop: 0px;
+  --cd-spacing-avatar-top-slot-extra-large-margintop: 0px;
+  --cd-spacing-avatar-top-slot-small-shift: -28px;
+  --cd-spacing-avatar-top-slot-default-shift: -32px;
+  --cd-spacing-avatar-top-slot-medium-shift: -30px;
+  --cd-spacing-avatar-top-slot-large-shift: -30px;
+  --cd-spacing-avatar-top-slot-extra-large-shift: -32px;
+  --cd-scale-avatar-top-slot-small: 0.4;
+  --cd-scale-avatar-top-slot-default: 0.7;
+  --cd-scale-avatar-top-slot-medium: 0.8;
+  --cd-scale-avatar-top-slot-large: 1.1;
+  --cd-scale-avatar-top-slot-extra-large: 1.4;
+  --cd-color-avatar-bottom-slot-bg: var(--cd-color-primary);
+  --cd-color-avatar-bottom-slot-text: var(--cd-color-bg-0);
+  --cd-color-avatar-bottom-slot-square-border: var(--cd-color-bg-0);
+  --cd-radius-avatar-bottom-slot-square: 4px;
+  --cd-spacing-avatar-bottom-slot-square-paddingx: 4px;
+  --cd-spacing-avatar-bottom-slot-square-paddingy: 1px;
+  --cd-width-avatar-bottom-slot-square-border: 2px;
+  --cd-width-avatar-bottom-slot-circle-extra-small: 12px;
+  --cd-width-avatar-bottom-slot-circle-small: 12px;
+  --cd-width-avatar-bottom-slot-circle-default: 16px;
+  --cd-width-avatar-bottom-slot-circle-medium: 18px;
+  --cd-width-avatar-bottom-slot-circle-large: 28px;
+  --cd-width-avatar-bottom-slot-circle-extra-large: 28px;
+  --cd-font-avatar-bottom-slot-extra-small-size: 5px;
+  --cd-font-avatar-bottom-slot-small-size: 5px;
+  --cd-font-avatar-bottom-slot-default-size: 12px;
+  --cd-font-avatar-bottom-slot-medium-size: 12px;
+  --cd-font-avatar-bottom-slot-large-size: 12px;
+  --cd-font-avatar-bottom-slot-extra-large-size: 14px;
+  --cd-color-avatar-amber-bg: var(--cd-color-amber-3);
+  --cd-color-avatar-blue-bg: var(--cd-color-blue-3);
+  --cd-color-avatar-cyan-bg: var(--cd-color-cyan-3);
+  --cd-color-avatar-green-bg: var(--cd-color-green-3);
+  --cd-color-avatar-grey-bg: var(--cd-color-grey-3);
+  --cd-color-avatar-indigo-bg: var(--cd-color-indigo-3);
+  --cd-color-avatar-light-blue-bg: var(--cd-color-light-blue-3);
+  --cd-color-avatar-light-green-bg: var(--cd-color-light-green-3);
+  --cd-color-avatar-lime-bg: var(--cd-color-lime-3);
+  --cd-color-avatar-orange-bg: var(--cd-color-orange-3);
+  --cd-color-avatar-pink-bg: var(--cd-color-pink-3);
+  --cd-color-avatar-purple-bg: var(--cd-color-purple-3);
+  --cd-color-avatar-red-bg: var(--cd-color-red-3);
+  --cd-color-avatar-teal-bg: var(--cd-color-teal-3);
+  --cd-color-avatar-violet-bg: var(--cd-color-violet-3);
+  --cd-color-avatar-yellow-bg: var(--cd-color-yellow-3);
+  --cd-color-avatar-palette-text: #fff;
+  --cd-color-avatar-white-bg: var(--cd-color-white);
+  --cd-color-badge-default-border-default: var(--cd-color-bg-1);
+  --cd-color-badge-default-bg-default: var(--cd-color-bg-1);
+  --cd-color-badge-default-light-bg-default: var(--cd-color-bg-2);
+  --cd-color-badge-default-text-default: var(--cd-color-bg-2);
+  --cd-color-badge-primary-solid-bg-default: var(--cd-color-primary);
+  --cd-color-badge-primary-light-bg-default: var(--cd-color-primary-light-default);
+  --cd-color-badge-primary-light-text-default: var(--cd-color-primary);
+  --cd-color-badge-primary-inverted-text-default: var(--cd-color-primary);
+  --cd-color-badge-secondary-solid-bg-default: var(--cd-color-secondary);
+  --cd-color-badge-secondary-light-bg-default: var(--cd-color-secondary-light-default);
+  --cd-color-badge-secondary-light-text-default: var(--cd-color-secondary);
+  --cd-color-badge-secondary-inverted-text-default: var(--cd-color-secondary);
+  --cd-color-badge-tertiary-solid-bg-default: var(--cd-color-tertiary);
+  --cd-color-badge-tertiary-light-bg-default: var(--cd-color-tertiary-light-default);
+  --cd-color-badge-tertiary-light-text-default: var(--cd-color-tertiary);
+  --cd-color-badge-tertiary-inverted-text-default: var(--cd-color-tertiary);
+  --cd-color-badge-danger-solid-bg-default: var(--cd-color-danger);
+  --cd-color-badge-danger-light-bg-default: var(--cd-color-danger-light-default);
+  --cd-color-badge-danger-light-text-default: var(--cd-color-danger);
+  --cd-color-badge-danger-inverted-text-default: var(--cd-color-danger);
+  --cd-color-badge-warning-solid-bg-default: var(--cd-color-warning);
+  --cd-color-badge-warning-light-bg-default: var(--cd-color-warning-light-default);
+  --cd-color-badge-warning-light-text-default: var(--cd-color-warning);
+  --cd-color-badge-warning-inverted-text-default: var(--cd-color-warning);
+  --cd-color-badge-success-solid-bg-default: var(--cd-color-success);
+  --cd-color-badge-success-light-bg-default: var(--cd-color-success-light-default);
+  --cd-color-badge-success-light-text-default: var(--cd-color-success);
+  --cd-color-badge-success-inverted-text-default: var(--cd-color-success);
+  --cd-width-badge-dot: 8px;
+  --cd-height-badge-dot: 8px;
+  --cd-radius-badge-dot: var(--cd-border-radius-circle);
+  --cd-height-badge-count: 18px;
+  --cd-spacing-badge-count-paddingy: 0px;
+  --cd-spacing-badge-count-paddingx: 4px;
+  --cd-width-badge-border: 1px;
+  --cd-z-badge: 1;
+  --cd-z-badge-light-bg: -1;
+  --cd-color-card-bg-default: var(--cd-color-bg-0);
+  --cd-color-card-border: var(--cd-color-border);
+  --cd-color-card-title-text: var(--cd-color-text-0);
+  --cd-color-card-description-text: var(--cd-color-text-2);
+  --cd-color-card-extra-text: var(--cd-color-text-0);
+  --cd-color-card-body-text: var(--cd-color-text-1);
+  --cd-font-card-default-fontweight: var(--cd-font-weight-regular);
+  --cd-font-card-extra-fontweight: 700;
+  --cd-font-card-title-fontweight: 700;
+  --cd-font-card-default-lineheight: 20px;
+  --cd-font-card-title-lineheight: 22px;
+  --cd-font-card-default-fontsize: var(--cd-font-size-regular);
+  --cd-font-card-extra-fontsize: var(--cd-font-size-header-6);
+  --cd-font-card-title-fontsize: var(--cd-font-size-header-6);
+  --cd-radius-card: var(--cd-border-radius-medium);
+  --cd-motion-card-transition-duration: 300ms;
+  --cd-width-card-border: var(--cd-border-thickness-control);
+  --cd-shadow-card: var(--cd-shadow-elevated);
+  --cd-spacing-card-padding: var(--cd-spacing-base-loose);
+  --cd-spacing-card-margin: var(--cd-spacing-base-loose);
+  --cd-spacing-card-avatar-marginright: var(--cd-spacing-base-tight);
+  --cd-spacing-cardgroup-card-margin: -1px;
+  --cd-z-card-hover: 1;
+  --cd-avatar-size-extra-extra-small: var(--cd-width-avatar-extra-extra-small);
+  --cd-avatar-size-extra-small: var(--cd-width-avatar-extra-small);
+  --cd-avatar-size-small: var(--cd-width-avatar-small);
+  --cd-avatar-size-default: var(--cd-width-avatar-default);
+  --cd-avatar-size-medium: var(--cd-width-avatar-medium);
+  --cd-avatar-size-large: var(--cd-width-avatar-large);
+  --cd-avatar-size-extra-large: var(--cd-width-avatar-extra-large);
   --cd-avatar-bg: var(--cd-color-fill-1);
   --cd-avatar-color: var(--cd-color-text-1);
-  --cd-avatar-border: var(--cd-color-bg-1);
-  --cd-avatar-radius: var(--cd-border-radius-small);
-  --cd-badge-size: 18px;
-  --cd-badge-size-small: 14px;
-  --cd-badge-dot-size: 8px;
-  --cd-badge-bg: var(--cd-color-danger);
-  --cd-badge-color: var(--cd-color-text-inverse);
-  --cd-badge-font-size: var(--cd-font-size-small);
-  --cd-card-bg: var(--cd-color-bg-0);
-  --cd-card-border: var(--cd-color-border);
-  --cd-card-radius: var(--cd-border-radius-medium);
-  --cd-card-padding: var(--cd-spacing-base-loose);
-  --cd-card-padding-small: var(--cd-spacing-base-tight);
-  --cd-card-header-border: var(--cd-color-border);
-  --cd-card-title-color: var(--cd-color-text-0);
-  --cd-card-title-weight: var(--cd-font-weight-bold);
-  --cd-card-title-size: var(--cd-font-size-header-6);
-  --cd-card-desc-color: var(--cd-color-text-2);
-  --cd-card-body-color: var(--cd-color-text-1);
-  --cd-card-shadow: var(--cd-shadow-elevated);
-  --cd-card-shadow-hover: var(--cd-shadow-elevated);
-  --cd-tooltip-bg-dark: var(--cd-color-text-0);
-  --cd-tooltip-color-dark: var(--cd-color-text-inverse);
-  --cd-tooltip-bg-light: var(--cd-color-bg-0);
-  --cd-tooltip-color-light: var(--cd-color-text-0);
-  --cd-tooltip-radius: var(--cd-border-radius-medium);
-  --cd-tooltip-padding: var(--cd-spacing-tight) var(--cd-spacing-base-tight);
-  --cd-tooltip-font-size: var(--cd-font-size-regular);
-  --cd-tooltip-shadow: var(--cd-shadow-elevated);
-  --cd-tooltip-z: var(--cd-z-tooltip);
-  --cd-tooltip-arrow-size: 6px;
-  --cd-tooltip-status-warning: var(--cd-color-warning);
-  --cd-tooltip-status-error: var(--cd-color-danger);
-  --cd-popover-bg: var(--cd-color-bg-0);
-  --cd-popover-color: var(--cd-color-text-0);
-  --cd-popover-radius: var(--cd-border-radius-medium);
-  --cd-popover-padding: var(--cd-spacing-base-tight) var(--cd-spacing-base);
-  --cd-popover-padding-small: var(--cd-spacing-tight) var(--cd-spacing-base-tight);
-  --cd-popover-padding-default: var(--cd-spacing-base-tight) var(--cd-spacing-base);
-  --cd-popover-padding-large: var(--cd-spacing-base) var(--cd-spacing-base-loose);
-  --cd-popover-shadow: var(--cd-shadow-elevated);
-  --cd-popover-z: var(--cd-z-popover);
-  --cd-popover-title-color: var(--cd-color-text-0);
-  --cd-popover-title-border: var(--cd-color-border);
-  --cd-popover-arrow-size: 8px;
-  --cd-popover-motion-duration: var(--cd-motion-duration-fast);
-  --cd-popover-motion-easing: var(--cd-motion-ease-standard);
-  --cd-empty-image-color: var(--cd-color-fill-1);
-  --cd-empty-title-color: var(--cd-color-text-1);
-  --cd-empty-title-weight: var(--cd-font-weight-bold);
-  --cd-empty-desc-color: var(--cd-color-text-1);
-  --cd-empty-gap: var(--cd-spacing-base-tight);
-  --cd-descriptions-label-color: var(--cd-color-text-2);
-  --cd-descriptions-value-color: var(--cd-color-text-0);
-  --cd-descriptions-value-weight-row: var(--cd-font-weight-bold);
-  --cd-descriptions-border: var(--cd-color-border);
-  --cd-descriptions-label-bg: var(--cd-color-fill-0);
-  --cd-descriptions-cell-padding: var(--cd-spacing-tight) var(--cd-spacing-base-tight);
-  --cd-descriptions-row-gap: var(--cd-spacing-base-tight);
-  --cd-collapse-header-padding: var(--cd-spacing-tight);
-  --cd-collapse-header-color: var(--cd-color-text-0);
-  --cd-collapse-header-weight: var(--cd-font-weight-bold);
-  --cd-collapse-header-bg-hover: var(--cd-color-fill-0);
-  --cd-collapse-header-bg-active: var(--cd-color-fill-1);
-  --cd-collapse-content-padding: var(--cd-spacing-extra-tight) var(--cd-spacing-base) var(--cd-spacing-tight);
-  --cd-collapse-content-color: var(--cd-color-text-1);
-  --cd-collapse-border: var(--cd-color-border);
-  --cd-collapse-arrow-color: var(--cd-color-text-2);
-  --cd-collapse-motion-duration: var(--cd-motion-duration-mid);
-  --cd-timeline-dot-size: 10px;
-  --cd-timeline-dot-color: var(--cd-color-primary);
-  --cd-timeline-line-color: var(--cd-color-text-3);
-  --cd-timeline-content-color: var(--cd-color-text-0);
-  --cd-timeline-time-color: var(--cd-color-text-2);
-  --cd-timeline-gap: var(--cd-spacing-base);
-  --cd-list-bg: var(--cd-color-bg-0);
-  --cd-list-border: var(--cd-color-border);
-  --cd-list-radius: var(--cd-border-radius-medium);
-  --cd-list-item-padding: var(--cd-spacing-base-tight) var(--cd-spacing-base);
-  --cd-list-item-padding-small: var(--cd-spacing-tight) var(--cd-spacing-base-tight);
-  --cd-list-split-color: var(--cd-color-border);
-  --cd-list-header-color: var(--cd-color-text-0);
-  --cd-list-item-color: var(--cd-color-text-1);
+  --cd-avatar-border: var(--cd-color-avatar-default-border-default);
+  --cd-avatar-more-bg: var(--cd-color-avatar-more-bg-default);
+  --cd-avatar-outline-color: var(--cd-color-avatar-outline-focus);
+  --cd-avatar-outline-width: var(--cd-width-avatar-outline);
+  --cd-avatar-radius-extra-extra-small: var(--cd-radius-avatar-extra-extra-small);
+  --cd-avatar-radius-extra-small: var(--cd-radius-avatar-extra-small);
+  --cd-avatar-radius-small: var(--cd-radius-avatar-small);
+  --cd-avatar-radius-default: var(--cd-radius-avatar-default);
+  --cd-avatar-radius-medium: var(--cd-radius-avatar-medium);
+  --cd-avatar-radius-large: var(--cd-radius-avatar-large);
+  --cd-avatar-radius-extra-large: var(--cd-radius-avatar-extra-large);
+  --cd-avatar-font-extra-extra-small-size: var(--cd-font-avatar-extra-extra-small-size);
+  --cd-avatar-font-extra-extra-small-lineheight: var(--cd-font-avatar-extra-extra-small-lineheight);
+  --cd-avatar-font-extra-small-size: var(--cd-font-avatar-extra-small-size);
+  --cd-avatar-font-extra-small-lineheight: var(--cd-font-avatar-extra-small-lineheight);
+  --cd-avatar-font-small-size: var(--cd-font-size-small);
+  --cd-avatar-font-default-size: var(--cd-font-size-header-5);
+  --cd-avatar-font-medium-size: var(--cd-font-size-header-4);
+  --cd-avatar-font-large-size: var(--cd-font-size-header-1);
+  --cd-avatar-font-extra-large-size: var(--cd-font-avatar-extra-large-size);
+  --cd-avatar-font-extra-large-lineheight: var(--cd-font-avatar-extra-large-lineheight);
+  --cd-avatar-group-extra-extra-small-border: var(--cd-width-avatar-group-extra-extra-small-border);
+  --cd-avatar-group-extra-small-border: var(--cd-width-avatar-group-extra-small-border);
+  --cd-avatar-group-small-border: var(--cd-width-avatar-group-small-border);
+  --cd-avatar-group-default-border: var(--cd-width-avatar-group-default-border);
+  --cd-avatar-group-medium-border: var(--cd-width-avatar-group-medium-border);
+  --cd-avatar-group-large-border: var(--cd-width-avatar-group-large-border);
+  --cd-avatar-group-extra-large-border: var(--cd-width-avatar-group-extra-large-border);
+  --cd-avatar-group-extra-extra-small-margin: var(--cd-spacing-avatar-group-extra-extra-small-margin);
+  --cd-avatar-group-extra-small-margin: var(--cd-spacing-avatar-group-extra-small-margin);
+  --cd-avatar-group-small-margin: var(--cd-spacing-avatar-group-small-margin);
+  --cd-avatar-group-default-margin: var(--cd-spacing-avatar-group-default-margin);
+  --cd-avatar-group-medium-margin: var(--cd-spacing-avatar-group-medium-margin);
+  --cd-avatar-group-large-margin: var(--cd-spacing-avatar-group-large-margin);
+  --cd-avatar-group-extra-large-margin: var(--cd-spacing-avatar-group-extra-large-margin);
+  --cd-avatar-content-motion-duration: var(--cd-motion-avatar-content-duration);
+  --cd-avatar-content-motion-scale-middle: var(--cd-motion-avatar-content-scale-middle);
+  --cd-avatar-additional-border-width: var(--cd-width-avatar-additional-border);
+  --cd-avatar-additional-border-color: var(--cd-color-avatar-additional-border);
+  --cd-avatar-additional-border-gap: var(--cd-spacing-avatar-additional-bordergap);
+  --cd-avatar-additional-border-duration: var(--cd-motion-avatar-additional-border-duration);
+  --cd-avatar-additional-border-scale-end: var(--cd-motion-avatar-additional-border-scale-end);
+  --cd-avatar-amber-bg: var(--cd-color-avatar-amber-bg);
+  --cd-avatar-blue-bg: var(--cd-color-avatar-blue-bg);
+  --cd-avatar-cyan-bg: var(--cd-color-avatar-cyan-bg);
+  --cd-avatar-green-bg: var(--cd-color-avatar-green-bg);
+  --cd-avatar-grey-bg: var(--cd-color-avatar-grey-bg);
+  --cd-avatar-indigo-bg: var(--cd-color-avatar-indigo-bg);
+  --cd-avatar-light-blue-bg: var(--cd-color-avatar-light-blue-bg);
+  --cd-avatar-light-green-bg: var(--cd-color-avatar-light-green-bg);
+  --cd-avatar-lime-bg: var(--cd-color-avatar-lime-bg);
+  --cd-avatar-orange-bg: var(--cd-color-avatar-orange-bg);
+  --cd-avatar-pink-bg: var(--cd-color-avatar-pink-bg);
+  --cd-avatar-purple-bg: var(--cd-color-avatar-purple-bg);
+  --cd-avatar-red-bg: var(--cd-color-avatar-red-bg);
+  --cd-avatar-teal-bg: var(--cd-color-avatar-teal-bg);
+  --cd-avatar-violet-bg: var(--cd-color-avatar-violet-bg);
+  --cd-avatar-yellow-bg: var(--cd-color-avatar-yellow-bg);
+  --cd-avatar-palette-text: var(--cd-color-avatar-palette-text);
+  --cd-avatar-white-bg: var(--cd-color-avatar-white-bg);
+  --cd-avatar-top-slot-text: var(--cd-color-avatar-top-slot-text);
+  --cd-avatar-top-slot-gradient-start: var(--cd-color-avatar-top-slot-gradient-start);
+  --cd-avatar-top-slot-gradient-end: var(--cd-color-avatar-top-slot-gradient-end);
+  --cd-avatar-top-slot-small-size: var(--cd-font-avatar-top-slot-small-size);
+  --cd-avatar-top-slot-default-size: var(--cd-font-avatar-top-slot-default-size);
+  --cd-avatar-top-slot-medium-size: var(--cd-font-avatar-top-slot-medium-size);
+  --cd-avatar-top-slot-large-size: var(--cd-font-avatar-top-slot-large-size);
+  --cd-avatar-top-slot-extra-large-size: var(--cd-font-avatar-top-slot-extra-large-size);
+  --cd-avatar-top-slot-small-margintop: var(--cd-spacing-avatar-top-slot-small-margintop);
+  --cd-avatar-top-slot-default-margintop: var(--cd-spacing-avatar-top-slot-default-margintop);
+  --cd-avatar-top-slot-medium-margintop: var(--cd-spacing-avatar-top-slot-medium-margintop);
+  --cd-avatar-top-slot-large-margintop: var(--cd-spacing-avatar-top-slot-large-margintop);
+  --cd-avatar-top-slot-extra-large-margintop: var(--cd-spacing-avatar-top-slot-extra-large-margintop);
+  --cd-avatar-top-slot-small-shift: var(--cd-spacing-avatar-top-slot-small-shift);
+  --cd-avatar-top-slot-default-shift: var(--cd-spacing-avatar-top-slot-default-shift);
+  --cd-avatar-top-slot-medium-shift: var(--cd-spacing-avatar-top-slot-medium-shift);
+  --cd-avatar-top-slot-large-shift: var(--cd-spacing-avatar-top-slot-large-shift);
+  --cd-avatar-top-slot-extra-large-shift: var(--cd-spacing-avatar-top-slot-extra-large-shift);
+  --cd-avatar-top-slot-small-scale: var(--cd-scale-avatar-top-slot-small);
+  --cd-avatar-top-slot-default-scale: var(--cd-scale-avatar-top-slot-default);
+  --cd-avatar-top-slot-medium-scale: var(--cd-scale-avatar-top-slot-medium);
+  --cd-avatar-top-slot-large-scale: var(--cd-scale-avatar-top-slot-large);
+  --cd-avatar-top-slot-extra-large-scale: var(--cd-scale-avatar-top-slot-extra-large);
+  --cd-avatar-bottom-slot-bg: var(--cd-color-avatar-bottom-slot-bg);
+  --cd-avatar-bottom-slot-text: var(--cd-color-avatar-bottom-slot-text);
+  --cd-avatar-bottom-slot-square-border: var(--cd-color-avatar-bottom-slot-square-border);
+  --cd-avatar-bottom-slot-square-radius: var(--cd-radius-avatar-bottom-slot-square);
+  --cd-avatar-bottom-slot-square-border-width: var(--cd-width-avatar-bottom-slot-square-border);
+  --cd-avatar-bottom-slot-square-paddingx: var(--cd-spacing-avatar-bottom-slot-square-paddingx);
+  --cd-avatar-bottom-slot-square-paddingy: var(--cd-spacing-avatar-bottom-slot-square-paddingy);
+  --cd-avatar-bottom-slot-circle-extra-small: var(--cd-width-avatar-bottom-slot-circle-extra-small);
+  --cd-avatar-bottom-slot-circle-small: var(--cd-width-avatar-bottom-slot-circle-small);
+  --cd-avatar-bottom-slot-circle-default: var(--cd-width-avatar-bottom-slot-circle-default);
+  --cd-avatar-bottom-slot-circle-medium: var(--cd-width-avatar-bottom-slot-circle-medium);
+  --cd-avatar-bottom-slot-circle-large: var(--cd-width-avatar-bottom-slot-circle-large);
+  --cd-avatar-bottom-slot-circle-extra-large: var(--cd-width-avatar-bottom-slot-circle-extra-large);
+  --cd-avatar-bottom-slot-extra-small-size: var(--cd-font-avatar-bottom-slot-extra-small-size);
+  --cd-avatar-bottom-slot-small-size: var(--cd-font-avatar-bottom-slot-small-size);
+  --cd-avatar-bottom-slot-default-size: var(--cd-font-avatar-bottom-slot-default-size);
+  --cd-avatar-bottom-slot-medium-size: var(--cd-font-avatar-bottom-slot-medium-size);
+  --cd-avatar-bottom-slot-large-size: var(--cd-font-avatar-bottom-slot-large-size);
+  --cd-avatar-bottom-slot-extra-large-size: var(--cd-font-avatar-bottom-slot-extra-large-size);
+  --cd-card-bg: var(--cd-color-card-bg-default);
+  --cd-card-border-color: var(--cd-color-card-border);
+  --cd-card-border-width: var(--cd-width-card-border);
+  --cd-card-radius: var(--cd-radius-card);
+  --cd-card-padding: var(--cd-spacing-card-padding);
+  --cd-card-margin: var(--cd-spacing-card-margin);
+  --cd-card-title-color: var(--cd-color-card-title-text);
+  --cd-card-title-weight: var(--cd-font-card-title-fontweight);
+  --cd-card-title-size: var(--cd-font-card-title-fontsize);
+  --cd-card-title-lineheight: var(--cd-font-card-title-lineheight);
+  --cd-card-extra-color: var(--cd-color-card-extra-text);
+  --cd-card-extra-weight: var(--cd-font-card-extra-fontweight);
+  --cd-card-extra-size: var(--cd-font-card-extra-fontsize);
+  --cd-card-desc-color: var(--cd-color-card-description-text);
+  --cd-card-body-color: var(--cd-color-card-body-text);
+  --cd-card-default-weight: var(--cd-font-card-default-fontweight);
+  --cd-card-default-size: var(--cd-font-card-default-fontsize);
+  --cd-card-default-lineheight: var(--cd-font-card-default-lineheight);
+  --cd-card-avatar-marginright: var(--cd-spacing-card-avatar-marginright);
+  --cd-card-shadow: var(--cd-shadow-card);
+  --cd-card-transition-duration: var(--cd-motion-card-transition-duration);
+  --cd-card-z-hover: var(--cd-z-card-hover);
+  --cd-cardgroup-spacing: var(--cd-spacing-card-margin);
+  --cd-cardgroup-card-margin: var(--cd-spacing-cardgroup-card-margin);
+  --cd-tooltip-horizontal-rate: 0.24;
+  --cd-tooltip-vertical-rate: 0;
+  --cd-tooltip-motion-zoom-scale-from: 0.8;
+  --cd-tooltip-motion-zoom-opacity-from: 0;
+  --cd-tooltip-motion-zoom-opacity-to: 1;
+  --cd-animation-duration-tooltip-in: 100ms;
+  --cd-animation-duration-tooltip-out: 100ms;
+  --cd-animation-function-tooltip-in: cubic-bezier(0.215, 0.61, 0.355, 1);
+  --cd-animation-function-tooltip-out: cubic-bezier(0.215, 0.61, 0.355, 1);
+  --cd-color-tooltip-bg-default: var(--cd-color-grey-7);
+  --cd-color-tooltip-text-default: var(--cd-color-bg-0);
+  --cd-color-tooltip-icon-default: var(--cd-color-grey-7);
+  --cd-color-tooltip-arrow-icon-default: var(--cd-color-tooltip-icon-default);
+  --cd-radius-tooltip: var(--cd-border-radius-medium);
+  --cd-spacing-tooltip-content-paddingleft: var(--cd-spacing-base-tight);
+  --cd-spacing-tooltip-content-paddingright: var(--cd-spacing-base-tight);
+  --cd-spacing-tooltip-content-paddingtop: var(--cd-spacing-tight);
+  --cd-spacing-tooltip-content-paddingbottom: var(--cd-spacing-tight);
+  --cd-font-tooltip-fontsize: var(--cd-font-size-regular);
+  --cd-width-tooltip: 240px;
+  --cd-width-tooltip-arrow: 24px;
+  --cd-height-tooltip-arrow: 7px;
+  --cd-height-tooltip-arrow-vertical: 24px;
+  --cd-width-tooltip-arrow-vertical: 7px;
+  --cd-spacing-tooltip-arrow-offset-x: 1px;
+  --cd-spacing-tooltip-arrow-offset-y: 1px;
+  --cd-spacing-tooltip-arrow-adjusted-offset-y: 5px;
+  --cd-spacing-tooltip-arrow-adjusted-offset-x: round(calc(var(--cd-tooltip-horizontal-rate) * var(--cd-width-tooltip-arrow)), 1px);
+  --cd-filter-tooltip-bg: none;
+  --cd-color-popover-bg-default: var(--cd-color-bg-3);
+  --cd-color-popover-border-default: var(--cd-color-border);
+  --cd-color-popover-arrow-border: var(--cd-color-border);
+  --cd-color-popover-arrow-bg: var(--cd-color-bg-3);
+  --cd-width-popover-arrow: 24px;
+  --cd-height-popover-arrow: 8px;
+  --cd-height-popover-arrow-vertical: 24px;
+  --cd-width-popover-arrow-vertical: 8px;
+  --cd-width-popover-title-border: 1px;
+  --cd-spacing-popover-title-padding: var(--cd-spacing-tight);
+  --cd-spacing-popover-witharrow-padding: var(--cd-spacing-base-tight);
+  --cd-spacing-popover-arrow-adjusted-offset-y: 6px;
+  --cd-spacing-popover-arrow-adjusted-offset-x: 6px;
+  --cd-radius-popover: var(--cd-border-radius-medium);
+  --cd-filter-popover-bg: none;
+  --cd-spacing-empty-content-vertical-margintop: 24px;
+  --cd-spacing-empty-content-horizontal-marginleft: 32px;
+  --cd-spacing-empty-title-margintop: 16px;
+  --cd-spacing-empty-footer-margintop: 24px;
+  --cd-font-empty-title-fontweight: var(--cd-font-weight-bold);
+  --cd-color-empty-description-text-default: var(--cd-color-text-1);
+  --cd-font-descriptions-lineheight: 20px;
+  --cd-font-descriptions-value-fontweight: var(--cd-font-weight-bold);
+  --cd-spacing-descriptions-th-paddingright: var(--cd-spacing-loose);
+  --cd-spacing-descriptions-item-paddingbottom: var(--cd-spacing-base-tight);
+  --cd-spacing-descriptions-item-small-paddingright: 48px;
+  --cd-spacing-descriptions-item-medium-paddingright: 60px;
+  --cd-spacing-descriptions-item-large-paddingright: 80px;
+  --cd-spacing-descriptions-key-medium-paddingbottom: var(--cd-spacing-extra-tight);
+  --cd-spacing-descriptions-key-large-paddingbottom: var(--cd-spacing-extra-tight);
+  --cd-color-descriptions-key-text-default: var(--cd-color-text-2);
+  --cd-color-descriptions-value-text-default: var(--cd-color-text-0);
+  --cd-spacing-descriptions-value-plain-paddingleft: 8px;
+  --cd-spacing-descriptions-item-double-padding: 0;
+  --cd-font-descriptions-key-small-fontsize: var(--cd-font-size-small);
+  --cd-font-descriptions-value-small-fontsize: var(--cd-font-size-header-6);
+  --cd-font-descriptions-key-medium-fontsize: var(--cd-font-size-regular);
+  --cd-font-descriptions-value-medium-fontsize: var(--cd-font-size-header-4);
+  --cd-font-descriptions-key-large-fontsize: var(--cd-font-size-regular);
+  --cd-font-descriptions-value-large-fontsize: var(--cd-font-size-header-2);
+  --cd-color-collapse-item-border-default: var(--cd-color-border);
+  --cd-color-collapse-header-text-default: var(--cd-color-text-0);
+  --cd-color-collapse-header-text-disabled: var(--cd-color-disabled-text);
+  --cd-color-collapse-header-icon-default: var(--cd-color-text-2);
+  --cd-color-collapse-header-bg-hover: var(--cd-color-fill-0);
+  --cd-color-collapse-header-bg-active: var(--cd-color-fill-1);
+  --cd-color-collapse-content-text-default: var(--cd-color-text-1);
+  --cd-font-collapse-header-fontweight: var(--cd-font-weight-bold);
+  --cd-spacing-collapse-header-marginx: var(--cd-spacing-tight);
+  --cd-spacing-collapse-header-marginy: var(--cd-spacing-extra-tight);
+  --cd-spacing-collapse-header-padding: var(--cd-spacing-tight);
+  --cd-spacing-collapse-right-paddingright: var(--cd-spacing-tight);
+  --cd-spacing-collapse-header-iconleft-marginright: 8px;
+  --cd-spacing-collapse-content-paddingtop: var(--cd-spacing-extra-tight);
+  --cd-spacing-collapse-content-paddingright: var(--cd-spacing-base);
+  --cd-spacing-collapse-content-paddingbottom: var(--cd-spacing-tight);
+  --cd-spacing-collapse-content-paddingleft: var(--cd-spacing-base);
+  --cd-radius-collapse-header: var(--cd-border-radius-small);
+  --cd-width-collapse-item-border: 1px;
+  --cd-size-collapse-icon-default: var(--cd-width-icon-medium);
+  --cd-transition-function-collapsible-height: cubic-bezier(0.25, 0.1, 0.25, 1);
+  --cd-transition-duration-collapsible-height: 250ms;
+  --cd-transition-delay-collapsible-height: var(--cd-motion-delay-none);
+  --cd-transition-function-collapsible-opacity: var(--cd-motion-ease-in);
+  --cd-transition-duration-collapsible-opacity: 250ms;
+  --cd-transition-delay-collapsible-opacity: var(--cd-motion-delay-none);
+  --cd-color-timeline-dot-default-bg-default: var(--cd-color-primary);
+  --cd-color-timeline-dot-success-bg-default: var(--cd-color-success);
+  --cd-color-timeline-dot-warning-bg-default: var(--cd-color-warning);
+  --cd-color-timeline-dot-error-bg-default: var(--cd-color-danger);
+  --cd-color-timeline-dot-info-bg-default: var(--cd-color-tertiary-light-active);
+  --cd-color-timeline-tail-border: var(--cd-color-text-3);
+  --cd-color-timeline-time-default-text-default: var(--cd-color-text-2);
+  --cd-color-timeline-item-head-bg: transparent;
+  --cd-color-timeline-item-content-text-default: var(--cd-color-text-0);
+  --cd-spacing-timeline-margin: var(--cd-spacing-none);
+  --cd-spacing-timeline-padding: var(--cd-spacing-tight);
+  --cd-spacing-timeline-tail-top: var(--cd-spacing-base-loose);
+  --cd-spacing-timeline-tail-left: var(--cd-spacing-extra-tight);
+  --cd-spacing-timeline-head-top: 5px;
+  --cd-spacing-timeline-head-custom-top: 10px;
+  --cd-spacing-timeline-head-custom-left: 5px;
+  --cd-spacing-timeline-content-marginleft: 25px;
+  --cd-spacing-timeline-time-margintop: var(--cd-spacing-extra-tight);
+  --cd-spacing-timeline-time-top: -2px;
+  --cd-spacing-timeline-item-margin: var(--cd-spacing-none);
+  --cd-spacing-timeline-item-paddingbottom: var(--cd-spacing-loose);
+  --cd-spacing-timeline-item-content-time-marginleft: calc(-40px - 100%);
+  --cd-spacing-timeline-item-right-item-left: calc(100% - 9px);
+  --cd-spacing-timeline-item-right-item-content: var(--cd-spacing-none);
+  --cd-spacing-timeline-item-left-item-content-left: calc(50% - 4px);
+  --cd-spacing-timeline-item-head-custom-left: 50%;
+  --cd-spacing-timeline-item-head-marginleft: -4px;
+  --cd-width-timeline: 100%;
+  --cd-width-timeline-dot: 9px;
+  --cd-width-timeline-head-custom: auto;
+  --cd-width-timeline-tail-border: var(--cd-border-thickness-control);
+  --cd-width-timeline-head-custom-border: var(--cd-border-thickness);
+  --cd-width-timeline-item-content-time: 100%;
+  --cd-width-timeline-item-right-content: calc(100% - 28px);
+  --cd-width-timeline-item-left-item-content: calc(50% - 14px);
+  --cd-width-timeline-item-right-item-content: calc(50% - 20px);
+  --cd-height-timeline-tail: calc(100% - 20px);
+  --cd-height-timeline-head-custom: auto;
+  --cd-radius-timeline-head: var(--cd-border-radius-circle);
+  --cd-radius-timeline-head-custom: 0;
+  --cd-motion-timeline-head-custom-transform: translate(-50%, -50%);
+  --cd-color-list-default-border-default: var(--cd-color-border);
+  --cd-color-list-empty-text-default: var(--cd-color-text-2);
+  --cd-spacing-list-empty-paddingx: 0px;
+  --cd-spacing-list-empty-paddingy: var(--cd-spacing-base-tight);
+  --cd-spacing-list-footer-paddingx: var(--cd-spacing-base-tight);
+  --cd-spacing-list-footer-paddingy: var(--cd-spacing-loose);
+  --cd-spacing-list-item-paddingx: var(--cd-spacing-base-tight);
+  --cd-spacing-list-item-paddingy: var(--cd-spacing-loose);
+  --cd-spacing-list-small-paddingx: var(--cd-spacing-tight);
+  --cd-spacing-list-small-paddingy: var(--cd-spacing-base);
+  --cd-spacing-list-large-paddingx: var(--cd-spacing-base);
+  --cd-spacing-list-large-paddingy: var(--cd-spacing-loose);
+  --cd-spacing-list-header-marginright: var(--cd-spacing-base-loose);
+  --cd-spacing-list-header-marginleft: var(--cd-spacing-base-loose);
+  --cd-spacing-list-extra-marginleft: var(--cd-spacing-super-loose);
+  --cd-spacing-list-extra-marginright: var(--cd-spacing-super-loose);
   --cd-image-bg: var(--cd-color-fill-0);
   --cd-image-radius: var(--cd-border-radius-small);
   --cd-image-placeholder-color: var(--cd-color-text-3);
-  --cd-image-mask-bg: rgba(0, 0, 0, 0.5);
-  --cd-image-mask-color: var(--cd-color-text-inverse);
+  --cd-image-mask-bg: var(--cd-color-overlay-bg);
+  --cd-image-mask-color: var(--cd-color-white);
+  --cd-image-mask-hover-bg: rgba(255, 255, 255, 0.15);
   --cd-image-preview-overlay: rgba(0, 0, 0, 0.7);
-  --cd-image-preview-z: var(--cd-z-modal);
-  --cd-highlight-bg: var(--cd-color-highlight-bg);
-  --cd-highlight-color: var(--cd-color-highlight);
-  --cd-highlight-weight: var(--cd-font-weight-bold);
+  --cd-image-preview-z: 1070;
   --cd-virtual-list-bg: var(--cd-color-bg-0);
   --cd-virtual-list-scrollbar: var(--cd-color-fill-1);
   --cd-carousel-radius: var(--cd-border-radius-large);
@@ -662,54 +2142,239 @@
   --cd-carousel-arrow-bg: rgba(0, 0, 0, 0.5);
   --cd-carousel-arrow-color: var(--cd-color-bg-0);
   --cd-carousel-arrow-size: 32px;
-  --cd-table-bg: var(--cd-color-bg-0);
-  --cd-table-header-bg: var(--cd-color-bg-1);
-  --cd-table-header-text: var(--cd-color-text-0);
-  --cd-table-cell-text: var(--cd-color-text-0);
-  --cd-table-border-color: var(--cd-color-border);
-  --cd-table-row-hover-bg: var(--cd-color-fill-0);
-  --cd-table-row-selected-bg: var(--cd-color-primary-light-default);
-  --cd-table-row-stripe-bg: var(--cd-color-fill-0);
-  --cd-table-cell-padding-y: var(--cd-spacing-base);
-  --cd-table-cell-padding-x: var(--cd-spacing-base);
-  --cd-table-cell-padding-y-small: var(--cd-spacing-tight);
-  --cd-table-cell-padding-y-large: var(--cd-spacing-base);
-  --cd-table-sort-active-color: var(--cd-color-primary);
-  --cd-table-sort-icon-color: var(--cd-color-text-3);
-  --cd-table-loading-mask: var(--cd-color-bg-0);
-  --cd-table-empty-color: var(--cd-color-text-2);
-  --cd-table-radius: var(--cd-border-radius-medium);
-  --cd-calendar-bg: var(--cd-color-bg-0);
-  --cd-calendar-border: var(--cd-color-border);
-  --cd-calendar-header-bg: var(--cd-color-bg-1);
-  --cd-calendar-text: var(--cd-color-text-0);
-  --cd-calendar-text-secondary: var(--cd-color-text-2);
-  --cd-calendar-today-bg: var(--cd-color-primary);
-  --cd-calendar-today-fg: var(--cd-color-bg-1);
-  --cd-calendar-selected-border: var(--cd-color-primary);
-  --cd-calendar-range-bg: var(--cd-color-primary-light-default);
-  --cd-calendar-range-edge-bg: var(--cd-color-primary-light-default);
-  --cd-calendar-week-cell-min-h: 240px;
-  --cd-calendar-weekend-bg: var(--cd-color-bg-1);
-  --cd-calendar-cell-bg-hover: var(--cd-color-fill-0);
-  --cd-calendar-event-default-bg: var(--cd-color-primary);
-  --cd-calendar-event-fg: var(--cd-color-bg-0);
-  --cd-calendar-disabled-bg: var(--cd-color-fill-0);
-  --cd-calendar-more-color: var(--cd-color-text-2);
-  --cd-calendar-cell-min-h: 96px;
-  --cd-calendar-radius: var(--cd-border-radius-medium);
-  --cd-scrolllist-item-height: 36px;
-  --cd-scrolllist-item-height-small: 28px;
-  --cd-scrolllist-item-height-large: 44px;
-  --cd-scrolllist-color-text: var(--cd-color-text-0);
-  --cd-scrolllist-color-text-adjacent: var(--cd-color-text-2);
-  --cd-scrolllist-color-text-disabled: var(--cd-color-text-3);
-  --cd-scrolllist-mask-bg: var(--cd-color-bg-1);
-  --cd-scrolllist-mask-border: var(--cd-color-border);
-  --cd-scrolllist-gradient-color: var(--cd-color-bg-0);
-  --cd-scrolllist-border-color: var(--cd-color-border);
-  --cd-scrolllist-radius: var(--cd-border-radius-medium);
-  --cd-scrolllist-transition: var(--cd-motion-duration-mid);
+  --cd-spacing-table-paddingy: var(--cd-spacing-base);
+  --cd-spacing-table-paddingx: var(--cd-spacing-base-tight);
+  --cd-spacing-table-middle-paddingy: var(--cd-spacing-base-tight);
+  --cd-spacing-table-small-paddingy: var(--cd-spacing-tight);
+  --cd-spacing-table-title-paddingy: var(--cd-spacing-base);
+  --cd-spacing-table-title-paddingx: 0px;
+  --cd-spacing-table-footer-padding: var(--cd-spacing-base);
+  --cd-spacing-table-expand-row-paddingleft: 16px;
+  --cd-spacing-table-expand-row-paddingright: 16px;
+  --cd-spacing-table-expand-row-paddingtop: 16px;
+  --cd-spacing-table-expand-row-paddingbottom: 16px;
+  --cd-spacing-table-resizable-offset-y: 4px;
+  --cd-spacing-table-resizable-bottom: 4px;
+  --cd-spacing-table-row-head-paddingy: var(--cd-spacing-tight);
+  --cd-spacing-table-row-head-paddingx: var(--cd-spacing-base);
+  --cd-spacing-table-react-resizable-handle-right: -1px;
+  --cd-spacing-table-tbody-rowcell-padding: var(--cd-spacing-base);
+  --cd-spacing-table-tbody-rowselection-rowcell-notselection-paddingx: 16px;
+  --cd-spacing-table-tbody-rowselection-rowcell-notselection-paddingy: 10px;
+  --cd-spacing-table-column-sorter-marginleft: var(--cd-spacing-extra-tight);
+  --cd-spacing-table-column-filter-marginleft: var(--cd-spacing-extra-tight);
+  --cd-spacing-table-bordered-titler-paddingleft: var(--cd-spacing-base);
+  --cd-spacing-table-bordered-titler-paddingright: var(--cd-spacing-base);
+  --cd-spacing-table-expand-icon-marginright: 8px;
+  --cd-spacing-table-panel-operation-paddingx: var(--cd-spacing-base);
+  --cd-spacing-table-panel-operation-paddingy: var(--cd-spacing-tight);
+  --cd-width-table-base-border: 1px;
+  --cd-width-table-header-border: 2px;
+  --cd-width-table-resizer-border: 2px;
+  --cd-width-table-column-selection: 48px;
+  --cd-width-table-column-sorter-icon: 16px;
+  --cd-height-table-column-sorter-icon: 16px;
+  --cd-width-table-column-filter-icon: 16px;
+  --cd-height-table-column-filter-icon: 16px;
+  --cd-width-table-cell-fixed-left-last: 1px;
+  --cd-width-table-cell-fixed-right-first: 1px;
+  --cd-width-table-react-resizable-handle: 9px;
+  --cd-height-table-pagination-outer-min: 60px;
+  --cd-height-table-column-filter-dropdown: 290px;
+  --cd-color-table-panel-bg-default: var(--cd-color-primary);
+  --cd-color-table-panel-text-default: var(--cd-color-primary-light-active);
+  --cd-color-table-bg-default: var(--cd-color-bg-1);
+  --cd-color-table-text-default: var(--cd-color-text-0);
+  --cd-color-table-border-default: var(--cd-color-border);
+  --cd-color-table-shadow-bg-default: var(--cd-color-shadow);
+  --cd-color-table-shadow-border-default: var(--cd-color-border);
+  --cd-color-table-th-bg-default: var(--cd-color-bg-1);
+  --cd-color-table-th-border-default: var(--cd-color-border);
+  --cd-color-table-th-text-default: var(--cd-color-text-2);
+  --cd-color-table-th-clicksort-bg-hover: var(--cd-color-fill-0);
+  --cd-color-table-pl-bg-default: transparent;
+  --cd-color-table-body-bg-default: var(--cd-color-bg-1);
+  --cd-color-table-body-bg-hover: var(--cd-color-fill-0);
+  --cd-color-table-footer-bg-default: var(--cd-color-fill-0);
+  --cd-color-table-row-expanded-bg-default: var(--cd-color-fill-0);
+  --cd-color-table-expanded-icon-default: var(--cd-color-text-2);
+  --cd-color-table-expanded-bg-default: transparent;
+  --cd-color-table-disabled-bg-default: var(--cd-color-disabled-bg);
+  --cd-color-table-filter-on-text-default: var(--cd-color-primary);
+  --cd-color-table-filter-text-default: var(--cd-color-text-2);
+  --cd-color-table-sorter-on-text-default: var(--cd-color-primary);
+  --cd-color-table-sorter-text-default: var(--cd-color-text-2);
+  --cd-color-table-sorter-text-hover: var(--cd-color-text-2);
+  --cd-color-table-page-text-default: var(--cd-color-text-2);
+  --cd-color-table-resizer-bg-default: var(--cd-color-primary);
+  --cd-color-table-selection-bg-default: var(--cd-color-grey-0);
+  --cd-color-table-placeholder-text-default: var(--cd-color-text-2);
+  --cd-color-table-cell-bg-hover: var(--cd-color-bg-0);
+  --cd-font-table-base-fontsize: 14px;
+  --cd-border-table-base-borderstyle: solid;
+  --cd-shadow-table-left: -3px 0 0 0 var(--cd-color-table-shadow-bg-default);
+  --cd-shadow-table-right: 3px 0 0 0 var(--cd-color-table-shadow-bg-default);
+  --cd-z-table-fixed: 101;
+  --cd-z-table-fixed-column: var(--cd-z-table-fixed);
+  --cd-calendar-color-bg-active: var(--cd-color-primary);
+  --cd-calendar-color-bg: var(--cd-color-bg-2);
+  --cd-calendar-color-text-active: var(--cd-color-bg-1);
+  --cd-calendar-color-curr-border: var(--cd-color-danger);
+  --cd-calendar-color-currcircle-bg-default: var(--cd-color-danger);
+  --cd-calendar-color-date-text-default: var(--cd-color-text-0);
+  --cd-calendar-color-day-border: var(--cd-color-border);
+  --cd-calendar-color-day-text-default: var(--cd-color-text-2);
+  --cd-calendar-color-sticky-bg: var(--cd-color-bg-2);
+  --cd-calendar-color-weekend-bg: var(--cd-color-fill-0);
+  --cd-calendar-width-day-grid: 130px;
+  --cd-calendar-width-tag-col: 70px;
+  --cd-calendar-width-currcircle: 8px;
+  --cd-calendar-width-today-date: 24px;
+  --cd-calendar-width-card: 220px;
+  --cd-calendar-height-day-grid: 60px;
+  --cd-calendar-height-allday: 26px;
+  --cd-calendar-height-today-date: 24px;
+  --cd-calendar-height-month-day: 24px;
+  --cd-calendar-height-month-week-row-event-month: 1em;
+  --cd-calendar-height-day-scroll-wrapper: calc(100% - 28px);
+  --cd-calendar-height-week-scroll-wrapper: calc(100% - 55px);
+  --cd-calendar-height-month-grid-wrapper: calc(100% - 27px);
+  --cd-calendar-spacing-event-items-top: 31px;
+  --cd-calendar-spacing-event-items-bottom: 20px;
+  --cd-calendar-font-day-allday-font-size: 26px;
+  --cd-calendar-radius-today-date: var(--cd-border-radius-circle);
+  --cd-calendar-spacing-time-padding-right: 8px;
+  --cd-calendar-spacing-time-item-span-top: -10px;
+  --cd-calendar-spacing-allday-tag-padding-right: 8px;
+  --cd-calendar-spacing-tag-child-padding-right: 8px;
+  --cd-calendar-spacing-grid-row-span-child-padding-x: 4px;
+  --cd-calendar-spacing-currcircle-margin-top: -4px;
+  --cd-calendar-spacing-skeleton-li-child-padding-top: 4px;
+  --cd-calendar-spacing-skeletion-grid-row-li-padding-right: 8px;
+  --cd-calendar-spacing-month-date-right: 4px;
+  --cd-calendar-spacing-month-event-card-wrapper-right: 8px;
+  --cd-calendar-spacing-month-event-card-wrapper-padding-top: 2px;
+  --cd-calendar-spacing-header-info-date-margin-top: 4px;
+  --cd-calendar-spacing-body-pading-x: 16px;
+  --cd-calendar-z-stickytop: 20;
+  --cd-calendar-z-stickyleft: 10;
+  --cd-calendar-z-curr: 8;
+  --cd-calendar-z-item: 5;
+  --cd-calendar-z-line: 3;
+  --cd-carousel-color-indicator-theme-dark-bg-default: rgba(0, 0, 0, 0.5);
+  --cd-carousel-color-indicator-theme-dark-bg-hover: rgba(0, 0, 0, 0.7);
+  --cd-carousel-color-indicator-theme-dark-bg-active: rgba(0, 0, 0, 1);
+  --cd-carousel-color-indicator-theme-primary-bg-default: color-mix(in srgb, var(--cd-color-primary) 40%, transparent);
+  --cd-carousel-color-indicator-theme-primary-bg-hover: color-mix(in srgb, var(--cd-color-primary) 70%, transparent);
+  --cd-carousel-color-indicator-theme-primary-bg-active: var(--cd-color-primary);
+  --cd-carousel-color-indicator-theme-light-bg-default: rgba(255, 255, 255, 0.4);
+  --cd-carousel-color-indicator-theme-light-bg-hover: rgba(255, 255, 255, 0.7);
+  --cd-carousel-color-indicator-theme-light-bg-active: rgba(255, 255, 255, 1);
+  --cd-carousel-color-arrow-theme-dark-bg-default: rgba(0, 0, 0, 0.5);
+  --cd-carousel-color-arrow-theme-dark-bg-hover: rgba(0, 0, 0, 1);
+  --cd-carousel-color-arrow-theme-primary-bg-default: color-mix(in srgb, var(--cd-color-primary) 40%, transparent);
+  --cd-carousel-color-arrow-theme-primary-bg-hover: var(--cd-color-primary);
+  --cd-carousel-color-arrow-theme-light-bg-default: rgba(255, 255, 255, 0.4);
+  --cd-carousel-color-arrow-theme-light-bg-hover: rgba(255, 255, 255, 1);
+  --cd-carousel-width-indicator-line: 240px;
+  --cd-carousel-width-indicator-columnar-small: 4px;
+  --cd-carousel-width-indicator-columnar-medium: 6px;
+  --cd-carousel-width-indicator-dot-small: 8px;
+  --cd-carousel-width-indicator-dot-medium: 12px;
+  --cd-carousel-width-arrow: 32px;
+  --cd-carousel-height-indicator-columnar-small-default: 12px;
+  --cd-carousel-height-indicator-columnar-small-active: 20px;
+  --cd-carousel-height-indicator-columnar-medium-default: 20px;
+  --cd-carousel-height-indicator-columnar-medium-active: 28px;
+  --cd-carousel-height-indicator-line-small: 4px;
+  --cd-carousel-height-indicator-line-medium: 6px;
+  --cd-carousel-radius-indicator-dot: 50%;
+  --cd-carousel-spacing-indicator-padding: 32px;
+  --cd-carousel-spacing-indicator-columnar-marginx: 4px;
+  --cd-carousel-spacing-indicator-line-marginx: 4px;
+  --cd-carousel-spacing-indicator-dot-marginx: 8px;
+  --cd-carousel-spacing-arrow-left: 20px;
+  --cd-carousel-spacing-arrow-right: 20px;
+  --cd-carousel-animation-transition-function: var(--cd-motion-ease-standard);
+  --cd-carousel-animation-transition-duration: var(--cd-motion-duration-none);
+  --cd-carousel-animation-transition-delay: var(--cd-motion-duration-none);
+  --cd-cropper-mask-bg: var(--cd-color-overlay-bg);
+  --cd-cropper-box-outline-color: var(--cd-color-primary);
+  --cd-cropper-box-outline-width: 1px;
+  --cd-cropper-corner-bg: var(--cd-color-primary);
+  --cd-cropper-corner-size: 10px;
+  --cd-image-preview-footer-radius: var(--cd-border-radius-medium);
+  --cd-image-mask-info-text: var(--cd-color-white);
+  --cd-image-status-bg: var(--cd-color-fill-0);
+  --cd-image-status-color: var(--cd-color-disabled-text);
+  --cd-image-preview-bg: var(--cd-color-overlay-bg);
+  --cd-image-preview-icon-color: var(--cd-color-white);
+  --cd-image-preview-header-color: var(--cd-color-white);
+  --cd-image-preview-footer-icon-color: var(--cd-color-white);
+  --cd-image-preview-footer-slider-rail-color: var(--cd-color-white);
+  --cd-image-preview-disabled-color: rgba(249, 249, 249, 0.35);
+  --cd-image-preview-icon-bg: rgba(0, 0, 0, 0.75);
+  --cd-image-header-close-bg: rgba(0, 0, 0, 0.75);
+  --cd-image-preview-footer-bg: rgba(0, 0, 0, 0.75);
+  --cd-image-preview-divider-bg: rgba(255, 255, 255, 0.5);
+  --cd-image-preview-image-spin-color: #ccc;
+  --cd-image-preview-icon-size: 40px;
+  --cd-image-preview-icon-offset-x: 24px;
+  --cd-image-preview-header-height: 60px;
+  --cd-image-preview-header-padding-x: 24px;
+  --cd-image-preview-header-close-size: 30px;
+  --cd-image-preview-footer-height: 48px;
+  --cd-image-preview-footer-padding-x: 16px;
+  --cd-image-preview-footer-page-margin-x: 12px;
+  --cd-image-preview-footer-gap: 16px;
+  --cd-image-preview-footer-divider-margin-x: 16px;
+  --cd-image-preview-footer-slider-width: 132px;
+  --cd-image-preview-footer-slider-padding-x: 16px;
+  --cd-image-preview-footer-slider-height: 2px;
+  --cd-image-preview-footer-slider-handle-size: 16px;
+  --cd-image-mask-info-text-margin-top: 8px;
+  --cd-color-scroll-list-bg: var(--cd-color-bg-3);
+  --cd-color-scroll-list-border: var(--cd-color-border);
+  --cd-color-scroll-list-header-bg: transparent;
+  --cd-color-scroll-list-header-title: var(--cd-color-text-0);
+  --cd-color-scroll-list-item-bg: transparent;
+  --cd-color-scroll-list-item-text: var(--cd-color-text-0);
+  --cd-color-scroll-list-disabled-item-text: var(--cd-color-disabled-text);
+  --cd-color-scroll-list-item-text-hover: var(--cd-color-fill-1);
+  --cd-color-scroll-list-item-bg-active: var(--cd-color-fill-2);
+  --cd-color-scroll-list-selected-item-bg: var(--cd-color-primary-light-default);
+  --cd-color-scroll-list-selected-item-text: var(--cd-color-text-0);
+  --cd-color-scroll-list-selected-item-icon: var(--cd-color-text-2);
+  --cd-color-scroll-list-footer-border: var(--cd-color-border);
+  --cd-height-scroll-list: 300px;
+  --cd-height-scroll-list-item: 36px;
+  --cd-width-scroll-list-item-border: var(--cd-border-thickness-control);
+  --cd-width-scroll-list-item-sel-svg: 16px;
+  --cd-width-scroll-list-item-wheel-border: var(--cd-border-thickness-control);
+  --cd-width-scroll-list-item-wheel-selector-border: var(--cd-border-thickness-control);
+  --cd-height-scroll-list-line: 1px;
+  --cd-width-scroll-list-footer-border: var(--cd-border-thickness-control);
+  --cd-spacing-scroll-list-header-paddingy: 0;
+  --cd-spacing-scroll-list-header-paddingx: 16px;
+  --cd-spacing-scroll-list-header-title-paddingy: var(--cd-spacing-base);
+  --cd-spacing-scroll-list-header-title-paddingx: 0;
+  --cd-spacing-scroll-list-body-paddingy: 0;
+  --cd-spacing-scroll-list-body-paddingx: 16px;
+  --cd-spacing-scroll-list-item-ul-padding: 0;
+  --cd-spacing-scroll-list-item-ul-margin: 0;
+  --cd-spacing-scroll-list-item-ul-paddingbottom: calc((300px - 36px) * 0.5);
+  --cd-spacing-scroll-list-item-sel-svg-marginright: 12px;
+  --cd-spacing-scroll-list-item-wheel-list-outer-paddingright: calc(36px * 0.5);
+  --cd-spacing-scroll-list-item-wheel-list-shade-pre-margintop: calc(-1 * (36px * 0.5 + var(--cd-border-thickness-control)));
+  --cd-spacing-scroll-list-item-wheel-list-shade-post-margintop: calc(36px * 0.5 + var(--cd-border-thickness-control));
+  --cd-spacing-scroll-list-footer-padding: 10px;
+  --cd-radius-scroll-list: var(--cd-border-radius-medium);
+  --cd-font-scroll-list-header-title-fontweight: var(--cd-font-weight-bold);
+  --cd-font-scroll-list-item-wheel-item-selected-fontweight: var(--cd-font-weight-bold);
+  --cd-transition-duration-scroll-list-selected-item-bg: var(--cd-motion-duration-none);
+  --cd-transition-function-scroll-list-selected-item-bg: var(--cd-motion-ease-standard);
+  --cd-transition-delay-scroll-list-selected-item-bg: 0ms;
+  --cd-shadow-scroll-list: 0 0 1px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.1);
   --cd-overflow-list-gap: var(--cd-spacing-tight);
   --cd-overflow-list-gap-small: var(--cd-spacing-extra-tight);
   --cd-overflow-list-gap-large: var(--cd-spacing-base-tight);
@@ -719,216 +2384,951 @@
   --cd-overflow-list-overflow-bg-hover: var(--cd-color-fill-0);
   --cd-overflow-list-overflow-radius: var(--cd-border-radius-medium);
   --cd-overflow-list-focus-ring: var(--cd-color-primary);
-  --cd-spin-color: var(--cd-color-primary);
-  --cd-spin-track-color: var(--cd-color-fill-1);
-  --cd-spin-size-small: 14px;
-  --cd-spin-size-default: 20px;
-  --cd-spin-size-large: 32px;
-  --cd-spin-duration: 1s;
-  --cd-spin-duration-reduced: 1.5s;
-  --cd-spin-tip-gap: var(--cd-spacing-tight);
-  --cd-spin-tip-color: var(--cd-color-text-1);
-  --cd-spin-mask-bg: rgba(255, 255, 255, 0.8);
-  --cd-spin-z: 10;
-  --cd-spin-z-fullscreen: 1000;
-  --cd-spin-fade-duration: var(--cd-motion-duration-fast);
-  --cd-progress-track-color: var(--cd-color-fill-0);
-  --cd-progress-stroke-normal: var(--cd-color-success);
-  --cd-progress-stroke-success: var(--cd-color-success);
-  --cd-progress-stroke-error: var(--cd-color-danger);
-  --cd-progress-stroke-warning: var(--cd-color-warning);
-  --cd-progress-info-color: var(--cd-color-text-0);
-  --cd-progress-info-success-color: var(--cd-color-success);
-  --cd-progress-height-small: 4px;
-  --cd-progress-height-default: 4px;
-  --cd-progress-height-large: 6px;
-  --cd-progress-circle-size-small: 80px;
-  --cd-progress-circle-size-default: 120px;
-  --cd-progress-circle-size-large: 160px;
-  --cd-progress-transition: var(--cd-motion-duration-mid) var(--cd-motion-ease-standard);
-  --cd-skeleton-color-bg: var(--cd-color-fill-0);
-  --cd-skeleton-color-highlight: var(--cd-color-fill-1);
-  --cd-skeleton-radius: var(--cd-border-radius-small);
-  --cd-skeleton-radius-pill: var(--cd-border-radius-full);
-  --cd-skeleton-gap: var(--cd-spacing-base-tight);
-  --cd-skeleton-title-height: 16px;
-  --cd-skeleton-paragraph-height: 16px;
-  --cd-skeleton-anim-duration: 1.4s;
-  --cd-skeleton-anim-timing: var(--cd-motion-ease-standard);
-  --cd-banner-radius: var(--cd-border-radius-small);
-  --cd-banner-padding-y: var(--cd-spacing-base-tight);
-  --cd-banner-padding-x: var(--cd-spacing-base-tight);
-  --cd-banner-gap: var(--cd-spacing-base-tight);
-  --cd-banner-icon-size: 20px;
-  --cd-banner-title-color: var(--cd-color-text-0);
-  --cd-banner-desc-color: var(--cd-color-text-1);
-  --cd-banner-title-size: var(--cd-font-size-regular);
-  --cd-banner-desc-size: var(--cd-font-size-small);
-  --cd-banner-accent-width: 4px;
-  --cd-banner-info-bg: var(--cd-color-info-light-default);
-  --cd-banner-info-accent: var(--cd-color-info);
-  --cd-banner-success-bg: var(--cd-color-success-light-default);
-  --cd-banner-success-accent: var(--cd-color-success);
-  --cd-banner-warning-bg: var(--cd-color-warning-light-default);
-  --cd-banner-warning-accent: var(--cd-color-warning);
-  --cd-banner-danger-bg: var(--cd-color-danger-light-default);
-  --cd-banner-danger-accent: var(--cd-color-danger);
-  --cd-banner-close-color: var(--cd-color-text-2);
-  --cd-banner-close-hover-bg: var(--cd-color-fill-1);
-  --cd-banner-motion-duration: var(--cd-motion-duration-fast);
-  --cd-modal-radius: var(--cd-border-radius-large);
-  --cd-modal-bg: var(--cd-color-bg-0);
-  --cd-modal-shadow: var(--cd-shadow-elevated);
-  --cd-modal-mask-bg: var(--cd-color-overlay-bg);
-  --cd-modal-padding: var(--cd-spacing-loose);
-  --cd-modal-header-gap: var(--cd-spacing-base-tight);
-  --cd-modal-footer-gap: var(--cd-spacing-tight);
-  --cd-modal-title-color: var(--cd-color-text-0);
-  --cd-modal-title-size: var(--cd-font-size-regular);
-  --cd-modal-title-weight: var(--cd-font-weight-bold);
-  --cd-modal-body-color: var(--cd-color-text-1);
-  --cd-modal-close-color: var(--cd-color-text-2);
-  --cd-modal-close-hover-bg: var(--cd-color-fill-1);
-  --cd-modal-z: var(--cd-z-modal);
-  --cd-modal-motion-duration: var(--cd-motion-duration-mid);
-  --cd-drawer-bg: var(--cd-color-bg-0);
-  --cd-drawer-color-text: var(--cd-color-text-0);
-  --cd-drawer-color-title: var(--cd-color-text-0);
-  --cd-drawer-border: var(--cd-color-border);
-  --cd-drawer-mask-bg: rgba(0, 0, 0, 0.45);
-  --cd-drawer-shadow: var(--cd-shadow-elevated);
-  --cd-drawer-width: 448px;
-  --cd-drawer-width-small: 320px;
-  --cd-drawer-width-large: 720px;
-  --cd-drawer-height: 320px;
-  --cd-drawer-height-small: 240px;
-  --cd-drawer-height-large: 480px;
-  --cd-drawer-header-padding: var(--cd-spacing-base-loose);
-  --cd-drawer-body-padding: var(--cd-spacing-base-loose);
-  --cd-drawer-footer-padding: var(--cd-spacing-base) var(--cd-spacing-base-loose);
-  --cd-drawer-title-color: var(--cd-color-text-0);
-  --cd-drawer-title-size: var(--cd-font-size-header-6);
-  --cd-drawer-close-color: var(--cd-color-text-2);
-  --cd-drawer-close-color-hover: var(--cd-color-text-0);
-  --cd-drawer-close-hover-bg: var(--cd-color-fill-1);
-  --cd-drawer-z: 1000;
-  --cd-drawer-motion-duration: var(--cd-motion-duration-mid);
-  --cd-sidesheet-bg: var(--cd-color-bg-0);
-  --cd-sidesheet-color: var(--cd-color-text-0);
-  --cd-sidesheet-mask-bg: rgba(0, 0, 0, 0.6);
-  --cd-sidesheet-border: var(--cd-color-border);
-  --cd-sidesheet-radius: var(--cd-border-radius-large);
-  --cd-sidesheet-shadow: var(--cd-shadow-elevated);
-  --cd-sidesheet-padding: var(--cd-spacing-base-loose);
-  --cd-sidesheet-header-padding: var(--cd-spacing-base) var(--cd-spacing-base-loose);
-  --cd-sidesheet-footer-padding: var(--cd-spacing-base) var(--cd-spacing-base-loose);
-  --cd-sidesheet-title-color: var(--cd-color-text-0);
-  --cd-sidesheet-title-size: var(--cd-font-size-header-6);
-  --cd-sidesheet-close-color: var(--cd-color-text-2);
-  --cd-sidesheet-close-color-hover: var(--cd-color-text-0);
-  --cd-sidesheet-close-hover-bg: var(--cd-color-fill-1);
-  --cd-sidesheet-width-small: 448px;
-  --cd-sidesheet-width: 60%;
-  --cd-sidesheet-width-large: 90%;
-  --cd-sidesheet-height-small: 40%;
-  --cd-sidesheet-height: 60%;
-  --cd-sidesheet-height-large: 90%;
-  --cd-sidesheet-z: 1000;
-  --cd-sidesheet-motion-duration: var(--cd-motion-duration-mid);
-  --cd-popconfirm-bg: var(--cd-color-bg-0);
-  --cd-popconfirm-color-text: var(--cd-color-text-0);
-  --cd-popconfirm-color-text-secondary: var(--cd-color-text-2);
-  --cd-popconfirm-border: var(--cd-color-border);
-  --cd-popconfirm-shadow: var(--cd-shadow-elevated);
-  --cd-popconfirm-radius: var(--cd-border-radius-medium);
-  --cd-popconfirm-padding: var(--cd-spacing-loose);
-  --cd-popconfirm-icon-color-danger: var(--cd-color-danger);
-  --cd-popconfirm-icon-color-warning: var(--cd-color-warning);
-  --cd-popconfirm-icon-color-info: var(--cd-color-warning);
-  --cd-popconfirm-title-color: var(--cd-color-text-0);
-  --cd-popconfirm-title-size: var(--cd-font-size-regular);
-  --cd-popconfirm-title-weight: var(--cd-font-weight-bold);
-  --cd-popconfirm-content-size: var(--cd-font-size-small);
-  --cd-popconfirm-max-width: 400px;
-  --cd-popconfirm-z: 1000;
-  --cd-popconfirm-gap-footer: var(--cd-spacing-tight);
-  --cd-popconfirm-arrow-size: 8px;
-  --cd-popconfirm-motion-duration: var(--cd-motion-duration-fast);
-  --cd-popconfirm-motion-easing: var(--cd-motion-ease-standard);
-  --cd-toast-bg: var(--cd-color-bg-0);
-  --cd-toast-color-text: var(--cd-color-text-0);
-  --cd-toast-color-icon-info: var(--cd-color-primary);
-  --cd-toast-color-icon-success: var(--cd-color-success);
-  --cd-toast-color-icon-warning: var(--cd-color-warning);
-  --cd-toast-color-icon-error: var(--cd-color-danger);
-  --cd-toast-color-close: var(--cd-color-text-2);
-  --cd-toast-color-close-hover: var(--cd-color-text-0);
-  --cd-toast-radius: var(--cd-border-radius-medium);
-  --cd-toast-shadow: var(--cd-shadow-elevated);
-  --cd-toast-padding: var(--cd-spacing-base-tight) var(--cd-spacing-tight);
-  --cd-toast-gap: var(--cd-spacing-tight);
-  --cd-toast-font-size: var(--cd-font-size-regular);
-  --cd-toast-font-weight: var(--cd-font-weight-bold);
-  --cd-toast-max-width: 420px;
-  --cd-toast-min-width: 240px;
-  --cd-toast-stack-gap: var(--cd-spacing-tight);
-  --cd-toast-z: 1100;
-  --cd-toast-motion-duration: var(--cd-motion-duration-fast);
-  --cd-toast-bg-dark: var(--cd-color-text-0);
-  --cd-toast-color-text-dark: var(--cd-color-bg-0);
-  --cd-toast-color-close-dark: var(--cd-color-bg-2);
-  --cd-toast-color-close-hover-dark: var(--cd-color-bg-0);
-  --cd-notification-width: 360px;
-  --cd-notification-bg: var(--cd-color-bg-0);
-  --cd-notification-color-title: var(--cd-color-text-0);
-  --cd-notification-color-content: var(--cd-color-text-1);
-  --cd-notification-border: var(--cd-color-border);
-  --cd-notification-radius: var(--cd-border-radius-medium);
-  --cd-notification-shadow: var(--cd-shadow-elevated);
-  --cd-notification-padding: var(--cd-spacing-base);
-  --cd-notification-gap: var(--cd-spacing-base-tight);
-  --cd-notification-icon-success: var(--cd-color-success);
-  --cd-notification-icon-info: var(--cd-color-primary);
-  --cd-notification-icon-warning: var(--cd-color-warning);
-  --cd-notification-icon-error: var(--cd-color-danger);
-  --cd-notification-close-color: var(--cd-color-text-2);
-  --cd-notification-close-color-hover: var(--cd-color-text-0);
-  --cd-notification-title-size: var(--cd-font-size-regular);
-  --cd-notification-title-weight: var(--cd-font-weight-bold);
-  --cd-notification-content-size: var(--cd-font-size-small);
-  --cd-notification-z: 1100;
-  --cd-notification-offset: var(--cd-spacing-loose);
-  --cd-notification-motion-duration: var(--cd-motion-duration-mid);
-  --cd-notification-progress-height: 3px;
-  --cd-notification-progress-color: var(--cd-color-primary);
-  --cd-notification-bg-dark: var(--cd-color-text-0);
-  --cd-notification-border-dark: var(--cd-color-text-0);
-  --cd-notification-color-title-dark: var(--cd-color-bg-0);
-  --cd-notification-color-content-dark: var(--cd-color-bg-1);
-  --cd-notification-close-color-dark: var(--cd-color-bg-2);
-  --cd-notification-close-color-hover-dark: var(--cd-color-bg-0);
-  --cd-backtop-size: 40px;
-  --cd-backtop-size-small: 32px;
-  --cd-backtop-size-large: 48px;
-  --cd-backtop-bg: var(--cd-color-bg-2);
-  --cd-backtop-bg-hover: var(--cd-color-bg-3);
-  --cd-backtop-bg-active: var(--cd-color-fill-1);
-  --cd-backtop-color: var(--cd-color-text-0);
-  --cd-backtop-border: var(--cd-color-border);
-  --cd-backtop-shadow: var(--cd-shadow-elevated);
-  --cd-backtop-radius: var(--cd-border-radius-full);
-  --cd-backtop-z: 900;
-  --cd-backtop-focus-ring: var(--cd-color-primary);
-  --cd-backtop-motion-duration: var(--cd-motion-duration-fast);
-  --cd-lottieicon-size: 20px;
-  --cd-lottieicon-size-small: 16px;
-  --cd-lottieicon-size-large: 24px;
-  --cd-lottieicon-color: var(--cd-color-text-0);
-  --cd-lottieicon-color-hover: var(--cd-color-primary);
-  --cd-lottieicon-bg-skeleton: var(--cd-color-bg-1);
-  --cd-lottieicon-radius: var(--cd-border-radius-small);
-  --cd-lottieicon-error-color: var(--cd-color-danger);
-  --cd-lottieicon-valign: -0.125em;
+  --cd-color-spin-bg: var(--cd-color-primary);
+  --cd-width-spin-large: 32px;
+  --cd-width-spin-middle: 20px;
+  --cd-width-spin-small: 14px;
+  --cd-opacity-spin-children: 0.5;
+  --cd-animation-duration-spin-wrapper-spin: 600ms;
+  --cd-animation-duration-spin-custom-children-spin: 1600ms;
+  --cd-color-progress-default-bg: var(--cd-color-fill-0);
+  --cd-color-progress-track-inner-bg: var(--cd-color-success);
+  --cd-color-progress-line-text-text: var(--cd-color-text-0);
+  --cd-color-progress-circle-text: var(--cd-color-text-0);
+  --cd-motion-progress-transition-duration: 0.3s;
+  --cd-motion-progress-transition-timing-function: cubic-bezier(0.62, 0.05, 0.36, 0.95);
+  --cd-height-progress-horizontal: 4px;
+  --cd-height-progress-horizontal-large: 6px;
+  --cd-spacing-progress-line-text-marginleft: var(--cd-spacing-base);
+  --cd-spacing-progress-line-text-marginright: var(--cd-spacing-base);
+  --cd-spacing-progress-vertical-marginx: var(--cd-spacing-extra-tight);
+  --cd-spacing-progress-horizontal-marginy: var(--cd-spacing-extra-tight);
+  --cd-spacing-progress-vertical-line-text-margintop: var(--cd-spacing-tight);
+  --cd-font-progress-line-text-fontweight: 600;
+  --cd-width-progress-line-text: 45px;
+  --cd-width-progress-vertical: 4px;
+  --cd-width-progress-vertical-large: 6px;
+  --cd-radius-progress-track: var(--cd-border-radius-small);
+  --cd-radius-progress-track-inner: var(--cd-border-radius-small);
+  --cd-color-skeleton-default-bg-default: var(--cd-color-fill-0);
+  --cd-color-skeleton-loading-gradient-bg-active: var(--cd-color-fill-1);
+  --cd-width-skeleton-avatar-extra-extra-small: 20px;
+  --cd-width-skeleton-avatar-extra-small: 24px;
+  --cd-width-skeleton-avatar-small: 32px;
+  --cd-width-skeleton-avatar-medium: 48px;
+  --cd-width-skeleton-avatar-large: 72px;
+  --cd-width-skeleton-avatar-extra-large: 128px;
+  --cd-width-skeleton-button: 115px;
+  --cd-height-skeleton-li: 16px;
+  --cd-height-skeleton-title: var(--cd-control-height-small);
+  --cd-height-skeleton-button: var(--cd-control-height-default);
+  --cd-spacing-skeleton-li-marginbottom: 10px;
+  --cd-radius-skeleton-item: var(--cd-border-radius-small);
+  --cd-radius-skeleton-li: var(--cd-border-radius-small);
+  --cd-animation-duration-skeleton-highlight: 1400ms;
+  --cd-animation-function-skeleton-highlight: ease;
+  --cd-color-banner-info-bg-default: var(--cd-color-info-light-default);
+  --cd-color-banner-info-text-default: var(--cd-color-info);
+  --cd-color-banner-info-border-default: var(--cd-color-info);
+  --cd-color-banner-warning-bg-default: var(--cd-color-warning-light-default);
+  --cd-color-banner-warning-text-default: var(--cd-color-warning);
+  --cd-color-banner-warning-border-default: var(--cd-color-warning);
+  --cd-color-banner-success-bg-default: var(--cd-color-success-light-default);
+  --cd-color-banner-success-text-default: var(--cd-color-success);
+  --cd-color-banner-success-border-default: var(--cd-color-success);
+  --cd-color-banner-danger-bg-default: var(--cd-color-danger-light-default);
+  --cd-color-banner-danger-text-default: var(--cd-color-danger);
+  --cd-color-banner-danger-border-default: var(--cd-color-danger);
+  --cd-radius-banner: var(--cd-border-radius-small);
+  --cd-spacing-banner-closebtn-marginleft: var(--cd-spacing-base-tight);
+  --cd-spacing-banner-extra-margintop: var(--cd-spacing-tight);
+  --cd-spacing-banner-icon-marginright: var(--cd-spacing-base-tight);
+  --cd-spacing-banner-paddingx: var(--cd-spacing-base-tight);
+  --cd-spacing-banner-paddingy: var(--cd-spacing-base-tight);
+  --cd-spacing-banner-title-description-margintop: 2px;
+  --cd-height-banner-closebtn: 24px;
+  --cd-width-banner-closebtn: 24px;
+  --cd-width-banner-border: 1px;
+  --cd-color-modal-bg: var(--cd-color-bg-2);
+  --cd-color-modal-mask-bg: var(--cd-color-overlay-bg);
+  --cd-color-modal-main-text: var(--cd-color-text-0);
+  --cd-color-modal-info-icon: var(--cd-color-info);
+  --cd-color-modal-primary-icon: var(--cd-color-primary);
+  --cd-color-modal-success-icon: var(--cd-color-success);
+  --cd-color-modal-danger-icon: var(--cd-color-danger);
+  --cd-color-modal-warning-icon: var(--cd-color-warning);
+  --cd-color-modal-content-border: var(--cd-color-border);
+  --cd-color-modal-header-bg: transparent;
+  --cd-color-modal-footer-bg: transparent;
+  --cd-color-modal-header-border: transparent;
+  --cd-color-modal-footer-border: transparent;
+  --cd-spacing-modal-marginy: 80px;
+  --cd-spacing-modal-marginx: auto;
+  --cd-spacing-modal-content-withicon-marginleft: 36px;
+  --cd-spacing-modal-icon-wrapper-marginright: var(--cd-spacing-base-tight);
+  --cd-spacing-modal-content-paddingy: 0;
+  --cd-spacing-modal-content-paddingx: 24px;
+  --cd-spacing-modal-header-marginy: 24px;
+  --cd-spacing-modal-header-marginx: 0;
+  --cd-spacing-modal-body-wrapper-marginy: 24px;
+  --cd-spacing-modal-body-wrapper-marginx: 0;
+  --cd-spacing-modal-footer-marginy: 24px;
+  --cd-spacing-modal-footer-marginx: 0;
+  --cd-spacing-modal-footer-button-marginleft: var(--cd-spacing-base-tight);
+  --cd-spacing-modal-confirm-header-marginbottom: 8px;
+  --cd-spacing-modal-confirm-icon-wrapper-marginright: var(--cd-spacing-base-tight);
+  --cd-spacing-modal-content-fullscreen-top: 0px;
+  --cd-width-modal-content-border: 1px;
+  --cd-width-modal-small: 448px;
+  --cd-width-modal-medium: 684px;
+  --cd-width-modal-large: 920px;
+  --cd-width-modal-full-width: calc(100vw - 64px);
+  --cd-height-modal-content: max-content;
+  --cd-radius-modal-content: var(--cd-border-radius-large);
+  --cd-radius-modal-content-fullscreen: 0;
+  --cd-radius-modal-footer: 0 0 5px 5px;
+  --cd-font-modal-header-fontsize: var(--cd-font-size-regular);
+  --cd-font-modal-header-fontweight: var(--cd-font-weight-bold);
+  --cd-width-modal-header-border: 0;
+  --cd-width-modal-footer-border: 0;
+  --cd-shadow-modal-content: var(--cd-shadow-elevated);
+  --cd-modal-content-z: var(--cd-z-modal);
+  --cd-modal-mask-z: var(--cd-z-modal-mask);
+  --cd-color-side-sheet-mask-bg: var(--cd-color-overlay-bg);
+  --cd-color-side-sheet-bg: var(--cd-color-bg-2);
+  --cd-color-side-sheet-main-text: var(--cd-color-text-0);
+  --cd-color-side-sheet-header-border-bottom: var(--cd-color-border);
+  --cd-spacing-side-sheet-margin: 0;
+  --cd-spacing-side-sheet-title-margin: 0;
+  --cd-spacing-side-sheet-header-padding: var(--cd-spacing-loose);
+  --cd-spacing-side-sheet-header-padding-bottom: var(--cd-spacing-base-loose);
+  --cd-spacing-side-sheet-body-paddingy: 0;
+  --cd-spacing-side-sheet-body-paddingx: var(--cd-spacing-loose);
+  --cd-spacing-side-sheet-footer-padding: var(--cd-spacing-loose);
+  --cd-width-side-sheet-header-border-bottom: 0px;
+  --cd-width-side-sheet-size-small: 448px;
+  --cd-width-side-sheet-size-medium: 684px;
+  --cd-width-side-sheet-size-large: 920px;
+  --cd-font-side-sheet-title-fontweight: var(--cd-font-weight-bold);
+  --cd-font-side-sheet-title-fontsize: var(--cd-font-size-header-5);
+  --cd-filter-side-sheet-mask-bg: none;
+  --cd-filter-side-sheet-bg: none;
+  --cd-animation-duration-side-sheet-mask-show: 180ms;
+  --cd-animation-function-side-sheet-mask-show: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  --cd-animation-delay-side-sheet-mask-show: 0ms;
+  --cd-animation-duration-side-sheet-mask-hide: 180ms;
+  --cd-animation-function-side-sheet-mask-hide: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  --cd-animation-delay-side-sheet-mask-hide: 0ms;
+  --cd-animation-duration-side-sheet-inner-show: 180ms;
+  --cd-animation-function-side-sheet-inner-show: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  --cd-animation-delay-side-sheet-inner-show: 0ms;
+  --cd-animation-duration-side-sheet-inner-hide: 180ms;
+  --cd-animation-function-side-sheet-inner-hide: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  --cd-animation-delay-side-sheet-inner-hide: 0ms;
+  --cd-color-popconfirm-header-text: var(--cd-color-text-0);
+  --cd-color-popconfirm-body-text: var(--cd-color-text-2);
+  --cd-color-popconfirm-header-alert-icon: var(--cd-color-warning);
+  --cd-width-popconfirm-icon: 24px;
+  --cd-width-popconfirm-close-btn: 24px;
+  --cd-width-popconfirm-maxwidth: 400px;
+  --cd-spacing-popconfirm-top: 24px;
+  --cd-spacing-popconfirm-bottom: 20px;
+  --cd-spacing-popconfirm-btn-close-margin: 24px;
+  --cd-spacing-popconfirm-with-arrow-padding: 12px;
+  --cd-spacing-popconfirm-header-title-marginbottom: 8px;
+  --cd-spacing-popconfirm-header-content-p-padding: 0;
+  --cd-spacing-popconfirm-header-content-p-margin: 0;
+  --cd-spacing-popconfirm-body-p-padding: 0;
+  --cd-spacing-popconfirm-body-p-margin: 0;
+  --cd-spacing-popconfirm-footer-margintop: 25px;
+  --cd-spacing-popconfirm-footer-btn-marginright: 8px;
+  --cd-spacing-popconfirm-popover-with-arrow-inner-padding: calc(var(--cd-spacing-popconfirm-top) - var(--cd-spacing-popconfirm-with-arrow-padding)) calc(var(--cd-spacing-popconfirm-top) - var(--cd-spacing-popconfirm-with-arrow-padding)) calc(var(--cd-spacing-popconfirm-top) - var(--cd-spacing-popconfirm-with-arrow-padding)) calc(var(--cd-spacing-popconfirm-bottom) - var(--cd-spacing-popconfirm-with-arrow-padding));
+  --cd-spacing-popconfirm-popover-with-arrow-inner-rtl-padding: calc(var(--cd-spacing-popconfirm-top) - var(--cd-spacing-popconfirm-with-arrow-padding)) calc(var(--cd-spacing-popconfirm-bottom) - var(--cd-spacing-popconfirm-with-arrow-padding)) calc(var(--cd-spacing-popconfirm-top) - var(--cd-spacing-popconfirm-with-arrow-padding)) calc(var(--cd-spacing-popconfirm-top) - var(--cd-spacing-popconfirm-with-arrow-padding));
+  --cd-spacing-popconfirm-popover-with-arrow-inner-btn-close-margintop: calc(var(--cd-spacing-popconfirm-btn-close-margin) - var(--cd-spacing-popconfirm-with-arrow-padding));
+  --cd-spacing-popconfirm-header-icon-marginright: 12px;
+  --cd-font-popconfirm-header-title-fontweight: var(--cd-font-weight-bold);
+  --cd-radius-popconfirm-popover: var(--cd-border-radius-medium);
+  --cd-color-toast-bg-default: var(--cd-color-bg-3);
+  --cd-color-toast-text-default: var(--cd-color-text-0);
+  --cd-color-toast-warning-icon: var(--cd-color-warning);
+  --cd-color-toast-success-icon: var(--cd-color-success);
+  --cd-color-toast-info-icon: var(--cd-color-info);
+  --cd-color-toast-danger-icon: var(--cd-color-danger);
+  --cd-color-toast-warning-light-bg: var(--cd-color-warning-light-default);
+  --cd-color-toast-warning-light-icon: var(--cd-color-toast-warning-icon);
+  --cd-color-toast-warning-light-border: var(--cd-color-warning);
+  --cd-color-toast-success-light-bg: var(--cd-color-success-light-default);
+  --cd-color-toast-success-light-icon: var(--cd-color-toast-success-icon);
+  --cd-color-toast-success-light-border: var(--cd-color-success);
+  --cd-color-toast-info-light-bg: var(--cd-color-info-light-default);
+  --cd-color-toast-info-light-icon: var(--cd-color-toast-info-icon);
+  --cd-color-toast-info-light-border: var(--cd-color-info);
+  --cd-color-toast-danger-light-bg: var(--cd-color-danger-light-default);
+  --cd-color-toast-danger-light-icon: var(--cd-color-toast-danger-icon);
+  --cd-color-toast-danger-light-border: var(--cd-color-danger);
+  --cd-spacing-toast-wrapper-top: 0;
+  --cd-spacing-toast-content-paddingy: var(--cd-spacing-base-tight);
+  --cd-spacing-toast-content-paddingx: var(--cd-spacing-tight);
+  --cd-spacing-toast-content-paddingtop: var(--cd-spacing-toast-content-paddingy);
+  --cd-spacing-toast-content-paddingbottom: var(--cd-spacing-toast-content-paddingy);
+  --cd-spacing-toast-content-paddingleft: var(--cd-spacing-toast-content-paddingx);
+  --cd-spacing-toast-content-paddingright: var(--cd-spacing-toast-content-paddingx);
+  --cd-spacing-toast-content-margin: var(--cd-spacing-base-tight);
+  --cd-spacing-toast-content-close-btn-margintop: -2px;
+  --cd-spacing-toast-content-text-marginleft: var(--cd-spacing-base-tight);
+  --cd-spacing-toast-content-text-marginright: var(--cd-spacing-base-tight);
+  --cd-spacing-toast-perspective-originy: 280px;
+  --cd-spacing-toast-perspective: 280px;
+  --cd-width-toast-wrapper: 100%;
+  --cd-width-toast-light-border: 1px;
+  --cd-radius-toast-content: var(--cd-border-radius-medium);
+  --cd-font-toast-content-fontweight: var(--cd-font-weight-bold);
+  --cd-color-notification-bg-default: var(--cd-color-bg-3);
+  --cd-color-notification-info-icon: var(--cd-color-info);
+  --cd-color-notification-warning-icon: var(--cd-color-warning);
+  --cd-color-notification-danger-icon: var(--cd-color-danger);
+  --cd-color-notification-success-icon: var(--cd-color-success);
+  --cd-color-notification-title-text: var(--cd-color-text-0);
+  --cd-color-notification-content-text: var(--cd-color-text-1);
+  --cd-color-notification-closebtn-icon: var(--cd-color-text-2);
+  --cd-color-notification-warning-light-bg: var(--cd-color-warning-light-default);
+  --cd-color-notification-warning-light-border: var(--cd-color-warning);
+  --cd-color-notification-success-light-bg: var(--cd-color-success-light-default);
+  --cd-color-notification-success-light-border: var(--cd-color-success);
+  --cd-color-notification-info-light-bg: var(--cd-color-info-light-default);
+  --cd-color-notification-info-light-border: var(--cd-color-info);
+  --cd-color-notification-danger-light-bg: var(--cd-color-danger-light-default);
+  --cd-color-notification-danger-light-border: var(--cd-color-danger);
+  --cd-color-notification-ambient-bg: var(--cd-color-bg-0);
+  --cd-width-notification-notice: auto;
+  --cd-width-notification-notice-minwidth: 320px;
+  --cd-width-notification-notice-icon: var(--cd-width-icon-extra-large);
+  --cd-width-notification-notice-border: 1px;
+  --cd-spacing-notification-list-margin: 0;
+  --cd-spacing-notification-list-padding: 0;
+  --cd-spacing-notification-notice-paddingtop: var(--cd-spacing-base);
+  --cd-spacing-notification-notice-paddingright: var(--cd-spacing-base-tight);
+  --cd-spacing-notification-notice-paddingbottom: var(--cd-spacing-base);
+  --cd-spacing-notification-notice-paddingleft: var(--cd-spacing-base-loose);
+  --cd-spacing-notification-notice-margin: var(--cd-spacing-base-loose);
+  --cd-spacing-notification-notice-marginright: var(--cd-spacing-base-tight);
+  --cd-spacing-notification-notice-title-marginbottom: var(--cd-spacing-extra-tight);
+  --cd-spacing-notification-notice-content-wrapper-marginright: 8px;
+  --cd-spacing-notification-notice-icon-marginright: var(--cd-spacing-base-tight);
+  --cd-radius-notification-notice: var(--cd-border-radius-medium);
+  --cd-font-notification-notice-title-fontweight: var(--cd-font-weight-bold);
+  --cd-font-notification-notice-content-fontweight: var(--cd-font-weight-regular);
+  --cd-backtop-z: var(--cd-z-affix);
+  --cd-backtop-right: 100px;
+  --cd-backtop-bottom: 50px;
+  --cd-color-steps-bg-active: var(--cd-color-fill-1);
+  --cd-color-steps-bg-default: var(--cd-color-text-2);
+  --cd-color-steps-bg-hover: var(--cd-color-fill-0);
+  --cd-color-steps-border-default: transparent;
+  --cd-color-steps-icon-default: var(--cd-color-text-2);
+  --cd-color-steps-text-default: var(--cd-color-white);
+  --cd-color-steps-danger-text-active: var(--cd-color-danger-active);
+  --cd-color-steps-danger-text-default: var(--cd-color-danger);
+  --cd-color-steps-danger-text-hover: var(--cd-color-danger-hover);
+  --cd-color-steps-icon-after-bg: var(--cd-color-fill-2);
+  --cd-color-steps-item-description-text-hover: var(--cd-color-focus-border);
+  --cd-color-steps-item-done-after-bg: var(--cd-color-primary);
+  --cd-color-steps-item-done-icon-after-bg: var(--cd-color-primary);
+  --cd-color-steps-item-error-left-icon: var(--cd-color-danger);
+  --cd-color-steps-item-error-left-number-icon: var(--cd-color-primary);
+  --cd-color-steps-item-finish-icon: var(--cd-color-primary);
+  --cd-color-steps-item-finish-number-icon: var(--cd-color-white);
+  --cd-color-steps-item-left-number-icon-bg: var(--cd-color-primary);
+  --cd-color-steps-item-left-number-icon-icon: var(--cd-color-white);
+  --cd-color-steps-item-process-left-icon: var(--cd-color-primary);
+  --cd-color-steps-item-process-left-number-icon: var(--cd-color-white);
+  --cd-color-steps-item-title-text-hover: var(--cd-color-focus-border);
+  --cd-color-steps-item-wait-left-icon-icon: var(--cd-color-text-2);
+  --cd-color-steps-item-wait-left-number-icon-bg-hover: var(--cd-color-secondary-light-default);
+  --cd-color-steps-item-wait-left-number-icon-bg: var(--cd-color-fill-0);
+  --cd-color-steps-item-wait-left-number-icon-icon-hover: var(--cd-color-focus-border);
+  --cd-color-steps-item-wait-left-number-icon-icon: var(--cd-color-text-2);
+  --cd-color-steps-item-wait-title-text: var(--cd-color-text-2);
+  --cd-color-steps-item-warning-left-icon: var(--cd-color-warning);
+  --cd-color-steps-item-warning-left-number-icon: var(--cd-color-white);
+  --cd-color-steps-main-text-default: var(--cd-color-text-0);
+  --cd-color-steps-minor-text-default: var(--cd-color-text-2);
+  --cd-color-steps-nav-item-container-text: var(--cd-color-text-2);
+  --cd-color-steps-nav-item-icon: var(--cd-color-grey-3);
+  --cd-color-steps-nav-item-title-text-active: var(--cd-color-text-0);
+  --cd-color-steps-primary-bg-default: var(--cd-color-primary);
+  --cd-color-steps-primary-icon-default: var(--cd-color-primary);
+  --cd-color-steps-process-bg-default: var(--cd-color-primary-light-default);
+  --cd-color-steps-success-text-active: var(--cd-color-success-active);
+  --cd-color-steps-success-text-default: var(--cd-color-success);
+  --cd-color-steps-success-text-hover: var(--cd-color-success-hover);
+  --cd-color-steps-title-after-bg: var(--cd-color-fill-2);
+  --cd-color-steps-warning-text-active: var(--cd-color-warning-active);
+  --cd-color-steps-warning-text-default: var(--cd-color-warning);
+  --cd-color-steps-warning-text-hover: var(--cd-color-warning-hover);
+  --cd-width-steps-basic-item-description: 100%;
+  --cd-width-steps-basic-item-description-maxwidth: 268px;
+  --cd-width-steps-basic-item-title-maxwidth: 80%;
+  --cd-height-steps-basic-vertical-icon-content-minheight: 42px;
+  --cd-width-steps-basic-vertical-item-title-maxwidth: 100%;
+  --cd-width-steps-basic-vertical-item-description: 100%;
+  --cd-height-steps-basic-vertical-small-item-content-minheight: 40px;
+  --cd-height-steps-basic-item-left-icon: 24px;
+  --cd-width-steps-basic-item-left-number-icon: 24px;
+  --cd-height-steps-basic-item-left-number-icon: 24px;
+  --cd-height-steps-basic-small-item-left-icon: 20px;
+  --cd-width-steps-basic-small-item-left-number-icon: 20px;
+  --cd-height-steps-basic-item: 72px;
+  --cd-height-steps-item: 72px;
+  --cd-width-steps-item-border: 1px;
+  --cd-width-steps-item-title: 100%;
+  --cd-width-steps-item-description: 100%;
+  --cd-width-steps-item-left-icon: 24px;
+  --cd-width-steps-item-left: 24px;
+  --cd-height-steps-item-left: 24px;
+  --cd-width-steps-title-after: 9999px;
+  --cd-height-steps-title-after: 1px;
+  --cd-width-steps-vertical-icon-after: 1px;
+  --cd-height-steps-vertical-icon-after: 9999px;
+  --cd-width-steps-nav-item-icon-minwidth: 60px;
+  --cd-width-steps-nav-item-title-maxwidth: 17em;
+  --cd-spacing-steps-basic-item-paddingleft: 16px;
+  --cd-spacing-steps-basic-vertical-item-paddingtop: 9px;
+  --cd-spacing-steps-basic-vertical-item-content-paddingbottom: 22px;
+  --cd-spacing-steps-basic-vertical-item-icon-paddingbottom: 9px;
+  --cd-spacing-steps-basic-item-left-marginright: 8px;
+  --cd-spacing-steps-basic-item-title-paddingright: 16px;
+  --cd-spacing-steps-basic-item-title-paddingbottom: 4px;
+  --cd-spacing-steps-basic-item-marginright: 16px;
+  --cd-spacing-steps-item-marginright: 16px;
+  --cd-spacing-steps-item-paddingy: var(--cd-spacing-base-tight);
+  --cd-spacing-steps-item-paddingx: var(--cd-spacing-base);
+  --cd-spacing-steps-item-content-marginleft: var(--cd-spacing-base);
+  --cd-radius-steps-basic-item-left-number-icon: var(--cd-border-radius-circle);
+  --cd-radius-steps-item: var(--cd-border-radius-medium);
+  --cd-radius-steps-item-left: 32px;
+  --cd-font-steps-basic-item-left-number-icon-fontweight: 600;
+  --cd-font-steps-basic-item-title-fontweight: 600;
+  --cd-font-steps-basic-item-title-lineheight: 24px;
+  --cd-font-steps-item-title-fontweight: var(--cd-font-weight-bold);
+  --cd-font-steps-item-left-fontweight: var(--cd-font-weight-bold);
+  --cd-font-steps-item-left-lineheight: 32px;
+  --cd-font-steps-nav-item-title-fontweight: var(--cd-font-weight-regular);
+  --cd-font-steps-nav-item-title-active-fontweight: 600;
+  --cd-color-anchor-slide-default-bg-default: var(--cd-color-border);
+  --cd-color-anchor-slide-primary-bg-active: var(--cd-color-primary);
+  --cd-color-anchor-slide-tertiary-bg-active: var(--cd-color-tertiary);
+  --cd-color-anchor-slide-muted-bg-active: var(--cd-color-white);
+  --cd-color-anchor-title-text-default: var(--cd-color-text-2);
+  --cd-color-anchor-title-text-hover: var(--cd-color-tertiary-hover);
+  --cd-color-anchor-title-active-text-hover: var(--cd-color-anchor-title-text-hover);
+  --cd-color-anchor-title-text-active: var(--cd-color-text-0);
+  --cd-color-anchor-title-text-disabled: var(--cd-color-disabled-text);
+  --cd-color-anchor-title-bg-default: transparent;
+  --cd-color-anchor-title-bg-active: transparent;
+  --cd-color-anchor-title-outline-focus: var(--cd-color-primary-light-active);
+  --cd-spacing-anchor-slide-left: var(--cd-spacing-none);
+  --cd-spacing-anchor-slide-top: var(--cd-spacing-none);
+  --cd-spacing-anchor-slide-default-y: var(--cd-spacing-extra-tight);
+  --cd-spacing-anchor-slide-small-y: var(--cd-spacing-extra-tight);
+  --cd-spacing-anchor-link-paddingleft: var(--cd-spacing-tight);
+  --cd-spacing-anchor-link-title-paddingtop: var(--cd-spacing-extra-tight);
+  --cd-spacing-anchor-link-title-paddingbottom: var(--cd-spacing-extra-tight);
+  --cd-width-anchor-slide-default: 2px;
+  --cd-height-anchor-slide-default: 20px;
+  --cd-height-anchor-slide-small: 16px;
+  --cd-radius-anchor-slide: 1px;
+  --cd-transition-duration-anchor-title-text: var(--cd-motion-duration-none);
+  --cd-transition-function-anchor-title-text: var(--cd-motion-ease-in);
+  --cd-transition-delay-anchor-title-text: var(--cd-motion-duration-none);
+  --cd-transform-scale-anchor-title-text: var(--cd-motion-scale-none);
+  --cd-width-anchor-outline: 2px;
+  --cd-width-anchor-outlineoffset: -2px;
+  --cd-width-anchor-outline-border-radius: 3px;
+  --cd-radius-dropdown: var(--cd-border-radius-medium);
+  --cd-radius-dropdown-item: 0px;
+  --cd-color-dropdown-bg-default: var(--cd-color-bg-3);
+  --cd-color-dropdown-title-text-default: var(--cd-color-text-2);
+  --cd-spacing-dropdown-menu-paddingy: var(--cd-spacing-extra-tight);
+  --cd-spacing-dropdown-menu-paddingx: 0;
+  --cd-spacing-dropdown-title-paddingtop: var(--cd-spacing-tight);
+  --cd-spacing-dropdown-title-paddingbottom: var(--cd-spacing-extra-tight);
+  --cd-spacing-dropdown-title-paddingleft: var(--cd-spacing-base);
+  --cd-spacing-dropdown-title-paddingright: var(--cd-spacing-base);
+  --cd-spacing-dropdown-title-withtick-paddingleft: 31px;
+  --cd-spacing-dropdown-item-withtick-paddingleft: var(--cd-spacing-base-tight);
+  --cd-spacing-dropdown-item-paddingy: var(--cd-spacing-tight);
+  --cd-spacing-dropdown-item-paddingx: var(--cd-spacing-base);
+  --cd-color-dropdown-item-text-default: var(--cd-color-text-0);
+  --cd-color-dropdown-item-bg-hover: var(--cd-color-fill-0);
+  --cd-color-dropdown-item-bg-active: var(--cd-color-fill-1);
+  --cd-color-dropdown-item-danger-text-default: var(--cd-color-danger);
+  --cd-color-dropdown-item-secondary-text-default: var(--cd-color-secondary);
+  --cd-color-dropdown-item-warning-text-default: var(--cd-color-warning);
+  --cd-color-dropdown-item-tertiary-text-default: var(--cd-color-tertiary);
+  --cd-color-dropdown-item-primary-text-default: var(--cd-color-primary);
+  --cd-color-dropdown-item-disabled-text-default: var(--cd-color-disabled-text);
+  --cd-color-dropdown-item-disabled-bg-default: transparent;
+  --cd-color-dropdown-seperator-bg-default: var(--cd-color-border);
+  --cd-spacing-dropdown-icon-marginright: 9px;
+  --cd-spacing-dropdown-seperator-marginy: var(--cd-spacing-extra-tight);
+  --cd-spacing-dropdown-seperator-marginx: 0;
+  --cd-width-dropdown: 280px;
+  --cd-size-dropdown-icon-width: 12px;
+  --cd-size-dropdown-icon-height: 12px;
+  --cd-height-dropdown-seperator: 1px;
+  --cd-font-dropdown-item-active-fontweight: 600;
+  --cd-transition-dropdown-item-bg-duration: var(--cd-motion-duration-none);
+  --cd-transition-dropdown-item-bg-function: var(--cd-motion-ease-standard);
+  --cd-transition-dropdown-item-bg-delay: 0ms;
+  --cd-filter-dropdown-bg: none;
+  --cd-color-pagination-text-default: var(--cd-color-text-2);
+  --cd-color-pagination-item-text-default: var(--cd-color-text-0);
+  --cd-color-pagination-item-bg-default: transparent;
+  --cd-color-pagination-item-icon-default: var(--cd-color-tertiary);
+  --cd-color-pagination-item-text-hover: var(--cd-color-text-0);
+  --cd-color-pagination-item-bg-hover: var(--cd-color-fill-0);
+  --cd-color-pagination-item-text-active: var(--cd-color-text-0);
+  --cd-color-pagination-item-bg-active: var(--cd-color-fill-1);
+  --cd-color-pagination-item-text-disabled: var(--cd-color-disabled-text);
+  --cd-color-pagination-item-icon-disabled: var(--cd-color-disabled-text);
+  --cd-color-pagination-item-bg-disabled: transparent;
+  --cd-color-pagination-item-bg-selected-disabled: var(--cd-color-disabled-fill);
+  --cd-color-pagination-item-text-selected: var(--cd-color-primary);
+  --cd-color-pagination-item-bg-selected: var(--cd-color-primary-light-default);
+  --cd-color-pagination-quickjump-text-disabled: var(--cd-color-disabled-text);
+  --cd-color-pagination-item-border-default: transparent;
+  --cd-color-pagination-item-border-hover: transparent;
+  --cd-color-pagination-item-border-active: transparent;
+  --cd-color-pagination-item-border-selected: transparent;
+  --cd-color-pagination-item-border-disabled: transparent;
+  --cd-height-pagination-item: 32px;
+  --cd-width-pagination-item-minwidth: 32px;
+  --cd-width-pagination-item-small-minwidth: 44px;
+  --cd-width-pagination-quickjump-input-width: 50px;
+  --cd-width-pagination-item-border: 0px;
+  --cd-spacing-pagination-padding: 0;
+  --cd-spacing-pagination-small-paddingy: 0;
+  --cd-spacing-pagination-small-paddingx: 0;
+  --cd-spacing-pagination-item-marginleft: var(--cd-spacing-extra-tight);
+  --cd-spacing-pagination-item-marginright: var(--cd-spacing-extra-tight);
+  --cd-spacing-pagination-item-small-margin: 0;
+  --cd-spacing-pagination-reset-list-paddingtop: var(--cd-spacing-extra-tight);
+  --cd-spacing-pagination-reset-list-paddingbottom: var(--cd-spacing-extra-tight);
+  --cd-spacing-pagination-quickjump-marginleft: 24px;
+  --cd-spacing-pagination-quickjump-input-marginleft: 4px;
+  --cd-spacing-pagination-quickjump-input-marginright: 4px;
+  --cd-radius-pagination-item: var(--cd-border-radius-small);
+  --cd-font-pagination-small-fontweight: var(--cd-font-weight-regular);
+  --cd-font-pagination-item-fontweight: var(--cd-font-weight-regular);
+  --cd-font-pagination-item-active-fontweight: var(--cd-font-weight-bold);
+  --cd-font-pagination-quickjump-fontweight: var(--cd-font-weight-regular);
+  --cd-highlight-color: var(--cd-color-highlight);
+  --cd-highlight-bg: var(--cd-color-highlight-bg);
+  --cd-highlight-font-weight: var(--cd-font-weight-bold);
+  --cd-markdown-render-image-margin-left: 16px;
+  --cd-markdown-render-image-margin-right: 16px;
+  --cd-markdown-render-image-margin-top: 16px;
+  --cd-markdown-render-image-margin-bottom: 16px;
+  --cd-markdown-render-image-max-width: 50%;
+  --cd-markdown-render-image-max-height: 500px;
+  --cd-markdown-render-image-alt-margin-top: 8px;
+  --cd-markdown-render-image-alt-color: var(--cd-color-tertiary);
+  --cd-markdown-render-header1-margin-top: 16px;
+  --cd-markdown-render-header1-margin-bottom: 16px;
+  --cd-markdown-render-header2-margin-top: 16px;
+  --cd-markdown-render-header2-margin-bottom: 16px;
+  --cd-markdown-render-header3-margin-top: 16px;
+  --cd-markdown-render-header3-margin-bottom: 16px;
+  --cd-markdown-render-header4-margin-top: 16px;
+  --cd-markdown-render-header4-margin-bottom: 16px;
+  --cd-markdown-render-header5-margin-top: 16px;
+  --cd-markdown-render-header5-margin-bottom: 16px;
+  --cd-markdown-render-simple-code-bg: var(--cd-color-fill-0);
+  --cd-markdown-render-simple-code-text: var(--cd-color-text-1);
+  --cd-markdown-render-list-color: var(--cd-color-text-0);
+  --cd-color-videoPlayer-theme-dark-text: var(--cd-color-bg-0);
+  --cd-color-videoPlayer-theme-dark-bg: var(--cd-color-grey-8);
+  --cd-color-videoPlayer-theme-light-text: var(--cd-color-grey-8);
+  --cd-color-videoPlayer-theme-light-bg: var(--cd-color-disabled-bg);
+  --cd-color-videoPlayer-pause-bg: var(--cd-color-text-1);
+  --cd-color-videoPlayer-notification-bg: var(--cd-color-overlay-bg);
+  --cd-color-videoPlayer-notification-text: var(--cd-color-grey-0);
+  --cd-color-videoPlayer-controls-bg: rgba(28, 31, 35, 0.8);
+  --cd-color-videoPlayer-controls-item-bg: var(--cd-color-overlay-bg);
+  --cd-color-videoPlayer-controls-text: #fff;
+  --cd-color-videoPlayer-controls-item-popup-bg-default: var(--cd-color-overlay-bg);
+  --cd-color-videoPlayer-controls-item-popup-bg-hover: rgba(67, 68, 74, 1);
+  --cd-color-videoPlayer-controls-popup-item-text-default: rgba(255, 255, 255, 0.7);
+  --cd-color-videoPlayer-controls-popup-item-text-active: var(--cd-color-primary);
+  --cd-color-videoPlayer-progress-bar-bg-played: var(--cd-color-primary);
+  --cd-color-videoPlayer-progress-bar-bg-loaded: var(--cd-color-grey-3);
+  --cd-color-videoPlayer-progress-bar-bg-unplayed: var(--cd-color-grey-5);
+  --cd-color-videoPlayer-progress-bar-handle-bg: #fff;
+  --cd-color-videoPlayer-progress-bar-handle-border: var(--cd-color-primary);
+  --cd-color-videoPlayer-progress-bar-handle-shadow: var(--cd-color-shadow);
+  --cd-height-videoPlayer-progress-bar-hotSpot-default: 20px;
+  --cd-height-videoPlayer-progress-bar-default: 4px;
+  --cd-height-videoPlayer-progress-bar-hover: 10px;
+  --cd-height-videoPlayer-progress-bar-handle: 16px;
+  --cd-height-videoPlayer-controls-menu-default: 56px;
+  --cd-height-videoPlayer-controls-volume-default: 160px;
+  --cd-height-videoPlayer-controls-popup-default: 24px;
+  --cd-height-videoPlayer-controls-popup-item-default: 32px;
+  --cd-width-videoPlayer-controls-volume-default: 40px;
+  --cd-width-videoPlayer-controls-popup-item-default: 50px;
+  --cd-width-videoPlayer-controls-popup-default: 48px;
+  --cd-spacing-videoPlayer-progress-bar-chapter-marginRight: 2px;
+  --cd-spacing-videoPlayer-notification-bottom: 22px;
+  --cd-spacing-videoPlayer-notification-left: 8px;
+  --cd-spacing-videoPlayer-notification-text-paddingY: 8px;
+  --cd-spacing-videoPlayer-notification-text-paddingX: 12px;
+  --cd-spacing-videoPlayer-controls-paddingY: var(--cd-spacing-base-tight);
+  --cd-spacing-videoPlayer-controls-paddingX: var(--cd-spacing-base);
+  --cd-spacing-videoPlayer-controls-item-gap: var(--cd-spacing-tight);
+  --cd-spacing-videoPlayer-controls-time-paddingX: 8px;
+  --cd-spacing-videoPlayer-controls-volume-title-paddingX: 10px;
+  --cd-spacing-videoPlayer-controls-volume-title-paddingY: 0px;
+  --cd-spacing-videoPlayer-controls-volume-popup-paddingY: 0px;
+  --cd-spacing-videoPlayer-controls-volume-popup-paddingX: var(--cd-spacing-extra-tight);
+  --cd-spacing-videoPlayer-controls-popup-paddingX: var(--cd-spacing-tight);
+  --cd-spacing-videoPlayer-controls-popup-paddingY: 0px;
+  --cd-spacing-videoPlayer-progress-bar-wrapper-marginX: var(--cd-spacing-tight);
+  --cd-spacing-videoPlayer-progress-bar-wrapper-marginY: 0px;
+  --cd-spacing-videoPlayer-progress-bar-tooltip-top: 6px;
+  --cd-spacing-videoPlayer-progress-bar-handle-top: 15px;
+  --cd-spacing-videoPlayer-error-svg-marginBottom: 12px;
+  --cd-radius-videoPlayer-notification: 3px;
+  --cd-radius-videoPlayer-progress-bar-handle: 50%;
+  --cd-radius-videoPlayer-progress-bar: 999px;
+  --cd-radius-videoPlayer-controls-item: 3px;
+  --cd-radius-videoPlayer-controls-popup: 4px;
+  --cd-font-videoPlayer-notification-fontSize: var(--cd-font-size-regular);
+  --cd-font-videoPlayer-controls-item-fontSize: var(--cd-font-size-small);
+  --cd-font-videoPlayer-controls-time-text-fontSize: var(--cd-font-size-regular);
+  --cd-font-videoPlayer-error-fontSize: var(--cd-font-size-regular);
+  --cd-font-videoPlayer-notification-lineHeight: 20px;
+  --cd-font-videoPlayer-controls-popup-item-lineHeight: 16px;
+  --cd-font-videoPlayer-controls-popup-item-fontWeight: 600;
+  --cd-font-videoPlayer-error-fontWeight: 600;
+  --cd-animation-duration-videoPlayer-controls-show: 500ms;
+  --cd-animation-duration-videoPlayer-slider-in: 300ms;
+  --cd-animation-duration-videoPlayer-slider-out: 300ms;
+  --cd-animation-function-videoPlayer-slider-in: cubic-bezier(0.62, 0.05, 0.36, 0.95);
+  --cd-animation-function-videoPlayer-slider-out: cubic-bezier(0.62, 0.05, 0.36, 0.95);
+  --cd-color-audio-player-background: color-mix(in srgb, var(--cd-color-grey-9) 80%, transparent);
+  --cd-color-audio-player-control-icon: var(--cd-color-bg-0);
+  --cd-color-audio-player-control-icon-play: var(--cd-color-text-0);
+  --cd-color-audio-player-font-color: var(--cd-color-bg-0);
+  --cd-color-audio-player-font-color-speed: var(--cd-color-grey-8);
+  --cd-color-audio-player-background-light: var(--cd-color-bg-0);
+  --cd-color-audio-player-control-icon-light: var(--cd-color-grey-9);
+  --cd-color-audio-player-control-icon-play-light: var(--cd-color-bg-0);
+  --cd-color-audio-player-font-color-light: var(--cd-color-grey-9);
+  --cd-font-size-audio-player-text: 14px;
+  --cd-gap-audio-player-small: 4px;
+  --cd-gap-audio-player-medium: 16px;
+  --cd-gap-audio-player-large: 24px;
+  --cd-width-audio-player-max: 1440px;
+  --cd-height-audio-player: 78px;
+  --cd-width-audio-player-slider: 323px;
+  --cd-width-audio-player-speed: 40px;
+  --cd-height-audio-player-speed: 24px;
+  --cd-width-audio-player-speed-menu: 65px;
+  --cd-width-audio-player-volume: 43px;
+  --cd-height-audio-player-volume: 164px;
+  --cd-height-audio-player-time: 22px;
+  --cd-border-radius-audio-player-speed: 3px;
+  --cd-border-radius-audio-player-volume: 4px;
+  --cd-border-radius-audio-player-slider: 9999px;
+  --cd-font-size-audio-player-small: 12px;
+  --cd-line-height-audio-player-small: 16px;
+  --cd-width-audio-player-slider-bar: 4px;
+  --cd-size-audio-player-slider-dot: 16px;
+  --cd-color-audio-player-disabled-bg: color-mix(in srgb, var(--cd-color-grey-0) 35%, transparent);
+  --cd-color-audio-player-slider-bg: var(--cd-color-grey-5);
+  --cd-color-audio-player-slider-bg-light: var(--cd-color-grey-2);
+  --cd-color-audio-player-slider-progress: var(--cd-color-blue-4);
+  --cd-color-audio-player-slider-dot-bg: var(--cd-color-white);
+  --cd-color-audio-player-disabled-text: var(--cd-color-grey-7);
+  --cd-color-audio-player-text-default: var(--cd-color-grey-0);
+  --cd-color-audio-player-light-disabled-bg: var(--cd-color-disabled-text);
+  --cd-color-audio-player-light-disabled-text: var(--cd-color-white);
+  --cd-color-audio-player-light-text: var(--cd-color-grey-9);
+  --cd-color-audio-player-light-hover-bg: var(--cd-color-grey-1);
+  --cd-color-json-viewer-bg: var(--cd-color-grey-0);
+  --cd-color-json-viewer-text: var(--cd-color-text-0);
+  --cd-radius-json-viewer: var(--cd-border-radius-medium);
+  --cd-color-json-viewer-border: var(--cd-color-border);
+  --cd-font-json-viewer-fontsize: var(--cd-font-size-regular);
+  --cd-font-json-viewer-fontfamily: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  --cd-spacing-json-viewer-paddingY: 12px;
+  --cd-color-json-viewer-key: var(--cd-color-red-5);
+  --cd-color-json-viewer-string: var(--cd-color-blue-5);
+  --cd-color-json-viewer-number: var(--cd-color-green-5);
+  --cd-color-json-viewer-keyword: var(--cd-color-blue-5);
+  --cd-color-json-viewer-punctuation: var(--cd-color-blue-6);
+  --cd-color-json-viewer-comment: var(--cd-color-text-3);
+  --cd-color-json-viewer-bracket-0: var(--cd-color-blue-7);
+  --cd-color-json-viewer-bracket-1: var(--cd-color-green-7);
+  --cd-color-json-viewer-bracket-2: var(--cd-color-orange-7);
+  --cd-color-json-viewer-line-number: var(--cd-color-grey-5);
+  --cd-color-json-viewer-line-number-bg: var(--cd-color-grey-0);
+  --cd-color-json-viewer-search-highlight: var(--cd-color-green-2);
+  --cd-color-json-viewer-search-current: var(--cd-color-yellow-4);
+  --cd-color-json-viewer-folding-icon: var(--cd-color-blue-7);
+  --cd-color-json-viewer-error: var(--cd-color-danger);
+  --cd-color-json-viewer-toolbar-bg: var(--cd-color-bg-0);
+  --cd-color-json-viewer-toolbar-border: var(--cd-color-border);
+  --cd-color-json-viewer-toolbar-shadow: var(--cd-shadow-elevated);
+  --cd-radius-json-viewer-toolbar: var(--cd-border-radius-small);
+  --cd-spacing-json-viewer-toolbar-gap: var(--cd-spacing-extra-tight);
+  --cd-spacing-json-viewer-toolbar-padding: var(--cd-spacing-tight);
+  --cd-color-json-viewer-toolbar-btn-hover: var(--cd-color-fill-1);
+  --cd-color-json-viewer-toolbar-btn-active: var(--cd-color-primary-light-default);
+  --cd-chat-chatBox-content-radius: var(--cd-border-radius-large);
+  --cd-chat-inputBox-container-radius: 16px;
+  --cd-chat-attachment-img-radius: var(--cd-border-radius-medium);
+  --cd-chat-attachment-file-radius: var(--cd-border-radius-medium);
+  --cd-chat-hint-item-radius: var(--cd-border-radius-large);
+  --cd-chat-chatBox-content-code-radius: var(--cd-border-radius-large);
+  --cd-chat-chatBox-content-code-topSlot-copy-radius: var(--cd-border-radius-large);
+  --cd-chat-dropArea-radius: 16px;
+  --cd-chat-action-content-bg: var(--cd-color-bg-0);
+  --cd-chat-action-content-border: var(--cd-color-border);
+  --cd-chat-divider: var(--cd-color-text-2);
+  --cd-chat-chatBox-title: var(--cd-color-text-0);
+  --cd-chat-chatBox-action-icon: var(--cd-color-text-2);
+  --cd-chat-chatBox-action-icon-hover: var(--cd-color-text-0);
+  --cd-chat-chatBox-action-bg-hover: transparent;
+  --cd-chat-chatBox-content-text: var(--cd-color-text-0);
+  --cd-chat-chatBox-content-bg: var(--cd-color-fill-0);
+  --cd-chat-chatBox-content-user-bg: var(--cd-color-primary);
+  --cd-chat-chatBox-content-user-text: var(--cd-color-white);
+  --cd-chat-chatBox-content-error-bg: var(--cd-color-danger-hover);
+  --cd-chat-chatBox-content-error-text: var(--cd-color-white);
+  --cd-chat-inputBottom-clearButton-icon: var(--cd-color-text-2);
+  --cd-chat-inputBottom-uploadButton-icon: var(--cd-color-text-0);
+  --cd-chat-inputBottom-sendButton-icon-disable: var(--cd-color-primary-disabled);
+  --cd-chat-inputBox-container-border: var(--cd-color-border);
+  --cd-chat-attachment-clear-icon: var(--cd-color-text-2);
+  --cd-chat-attachment-file-bg: var(--cd-color-fill-0);
+  --cd-chat-attachment-fail: var(--cd-color-danger);
+  --cd-chat-chatBox-user-attachment-file-bg: var(--cd-color-bg-0);
+  --cd-chat-chatBox-other-attachment-file-bg: var(--cd-color-fill-2);
+  --cd-chat-attachment-file-icon: var(--cd-color-text-2);
+  --cd-chat-attachment-file-title: var(--cd-color-text-0);
+  --cd-chat-attachment-file-metadata-text: var(--cd-color-text-2);
+  --cd-chat-hint-item-border: var(--cd-color-border);
+  --cd-chat-hint-item-bg: transparent;
+  --cd-chat-hint-item-bg-hover: var(--cd-color-fill-0);
+  --cd-chat-hint-content-text: var(--cd-color-text-1);
+  --cd-chat-hint-icon: var(--cd-color-text-2);
+  --cd-chat-chatBox-loading-bg: var(--cd-color-text-0);
+  --cd-chat-chatBox-code-topSlot: var(--cd-color-white);
+  --cd-chat-chatBox-code-topSlot-bg: var(--cd-color-grey-4);
+  --cd-chat-chatBox-code-topSlot-toCopy-bg-hover: var(--cd-color-grey-5);
+  --cd-chat-chatBox-code-content: var(--cd-color-bg-0);
+  --cd-chat-action-content-bg-hover: var(--cd-color-tertiary-light-hover);
+  --cd-chat-dropArea-bg: color-mix(in srgb, var(--cd-color-grey-2) 90%, transparent);
+  --cd-chat-dropArea-border: var(--cd-color-border);
+  --cd-chat-paddingY: 12px;
+  --cd-chat-container-paddingX: 16px;
+  --cd-chat-action-content-bottom: 0;
+  --cd-chat-chatBox-marginY: 8px;
+  --cd-chat-chatBox-columnGap: 12px;
+  --cd-chat-chatBox-action-columnGap: 10px;
+  --cd-chat-chatBox-action-marginX: 10px;
+  --cd-chat-chatBox-action-btn-padding: 0;
+  --cd-chat-chatBox-content-paddingY: 8px;
+  --cd-chat-chatBox-content-paddingX: 12px;
+  --cd-chat-inputBox-paddingTop: 8px;
+  --cd-chat-inputBox-paddingBottom: 8px;
+  --cd-chat-inputBox-paddingX: 16px;
+  --cd-chat-inputBox-container-padding: 11px;
+  --cd-chat-inputBox-inner-columnGap: 4px;
+  --cd-chat-inputBox-marginY: 4px;
+  --cd-chat-attachment-columnGap: 10px;
+  --cd-chat-attachment-rowGap: 5px;
+  --cd-chat-attachment-marginX: 12px;
+  --cd-chat-attachment-clear-top: 8px;
+  --cd-chat-attachment-clear-right: 8px;
+  --cd-chat-attachment-file-columnGap: 5px;
+  --cd-chat-attachment-file-padding: 5px;
+  --cd-chat-chatBox-loading-item-gap: 15px;
+  --cd-chat-divider-marginY: 12px;
+  --cd-chat-chatBox-content-attachment-marginY: 4px;
+  --cd-chat-chatBox-content-attachment-marginRight: 4px;
+  --cd-chat-chatBox-content-code-topSlot-paddingX: 5px;
+  --cd-chat-chatBox-content-code-topSlot-paddingY: 8px;
+  --cd-chat-chatBox-content-code-topSlot-copy-columnGap: 5px;
+  --cd-chat-chatBox-content-code-topSlot-copy-padding: 5px;
+  --cd-chat-chatBox-wrap: 8px;
+  --cd-chat-hint-rowGap: 10px;
+  --cd-chat-hint-marginY: 12px;
+  --cd-chat-hint-marginLeft: 34px;
+  --cd-chat-hint-item-marginY: 8px;
+  --cd-chat-hint-item-marginX: 12px;
+  --cd-chat-hint-item-columnGap: 20px;
+  --cd-chat-chatBox-loading-item-marginX: 18px;
+  --cd-chat-chatBox-loading-item-marginY: 6px;
+  --cd-chat-backBottom-wrapper-width: 42px;
+  --cd-chat-action-content-border-width: 1px;
+  --cd-chat-inputBottom-clearButton-width: 48px;
+  --cd-chat-inputBottom-uploadButton-width: 32px;
+  --cd-chat-inputBottom-sendButton-width: 32px;
+  --cd-chat-inputBox-container-border-width: 1px;
+  --cd-chat-attachment-file-width: 50px;
+  --cd-chat-hint-item-border-width: 1px;
+  --cd-chat-chatBox-loading-width: 8px;
+  --cd-chat-attachment-file-title-width: 90px;
+  --cd-chat-max-width: 800px;
+  --cd-chat-dropArea-border-width: 5px;
+  --cd-chat-chatBox-content-code-topSlot-copy-width: 150px;
+  --cd-chat-chatBox-avatar-width: 24px;
+  --cd-chat-action-stop-height: 42px;
+  --cd-chat-divider-font-weight: var(--cd-font-weight-regular);
+  --cd-chat-divider-font-size: var(--cd-font-size-small);
+  --cd-chat-chatBox-title-line-height: 20px;
+  --cd-chat-chatBox-title-font-size: var(--cd-font-size-header-6);
+  --cd-chat-chatBox-title-font-weight: var(--cd-font-weight-regular);
+  --cd-chat-inputBottom-clearButton-icon-font-size: 30px;
+  --cd-chat-attachment-file-title-font-size: var(--cd-font-size-header-6);
+  --cd-chat-attachment-file-metadata-font-size: var(--cd-font-size-regular);
+  --cd-chat-hint-content-font-size: var(--cd-font-size-regular);
+  --cd-chat-chatBox-code-topSlot-font-size: 12px;
+  --cd-chat-chatBox-code-topSlot-line-height: 16px;
+  --cd-chat-dropArea-text-font-size: 48px;
+  --cd-chat-dropArea-z: 10;
+  --cd-chat-action-z: 1;
+  --cd-ai-chat-input-bg: var(--cd-color-bg-0);
+  --cd-ai-chat-input-border: var(--cd-color-border);
+  --cd-ai-chat-input-border-focus: var(--cd-color-primary);
+  --cd-ai-chat-input-radius: var(--cd-border-radius-medium);
+  --cd-ai-chat-input-radius-round: var(--cd-border-radius-large);
+  --cd-ai-chat-input-padding: var(--cd-spacing-base);
+  --cd-ai-chat-input-gap: var(--cd-spacing-tight);
+  --cd-ai-chat-input-color: var(--cd-color-text-0);
+  --cd-ai-chat-input-placeholder-color: var(--cd-color-text-2);
+  --cd-ai-chat-input-editor-min-height: var(--cd-spacing-loose);
+  --cd-ai-chat-input-editor-max-height: 160px;
+  --cd-ai-chat-input-action-icon: var(--cd-color-text-2);
+  --cd-ai-chat-input-action-icon-hover: var(--cd-color-text-0);
+  --cd-ai-chat-input-action-padding: var(--cd-spacing-extra-tight);
+  --cd-ai-chat-input-action-radius: var(--cd-border-radius-small);
+  --cd-ai-chat-input-send-bg: var(--cd-color-primary);
+  --cd-ai-chat-input-send-bg-hover: var(--cd-color-primary-hover);
+  --cd-ai-chat-input-send-bg-disabled: var(--cd-color-fill-1);
+  --cd-ai-chat-input-send-icon: var(--cd-color-bg-0);
+  --cd-ai-chat-input-send-icon-disabled: var(--cd-color-text-3);
+  --cd-ai-chat-input-stop-bg: var(--cd-color-fill-2);
+  --cd-ai-chat-input-reference-bg: var(--cd-color-fill-0);
+  --cd-ai-chat-input-reference-bg-hover: var(--cd-color-fill-1);
+  --cd-ai-chat-input-reference-color: var(--cd-color-text-1);
+  --cd-ai-chat-input-reference-radius: var(--cd-border-radius-small);
+  --cd-ai-chat-input-suggestions-bg: var(--cd-color-bg-2);
+  --cd-ai-chat-input-suggestions-radius: var(--cd-border-radius-medium);
+  --cd-ai-chat-input-suggestions-shadow: var(--cd-shadow-elevated);
+  --cd-ai-chat-input-suggestion-color: var(--cd-color-text-0);
+  --cd-ai-chat-input-suggestion-bg-active: var(--cd-color-fill-1);
+  --cd-ai-chat-input-skill-bg: var(--cd-color-primary-light-default);
+  --cd-ai-chat-input-skill-color: var(--cd-color-primary);
+  --cd-ai-chat-input-skill-delete: var(--cd-color-primary);
+  --cd-ai-chat-input-skill-radius: var(--cd-border-radius-small);
+  --cd-ai-chat-input-template-color: var(--cd-color-text-1);
+  --cd-ai-chat-input-template-bg-hover: var(--cd-color-fill-1);
+  --cd-ai-chat-input-motion-duration: var(--cd-motion-duration-fast);
+  --cd-color-hotkeys-bg: var(--cd-color-fill-0);
+  --cd-color-hotkeys-text: var(--cd-color-text-2);
+  --cd-color-hotkeys-split: var(--cd-color-text-0);
+  --cd-width-hotkeys-border: 1px;
+  --cd-radius-hotkeys: 2px;
+  --cd-height-hotkeys: 20px;
+  --cd-spacing-hotkeys-paddingY: 2px;
+  --cd-spacing-hotkeys-paddingX: 8px;
+  --cd-floatbutton-size-small: 24px;
+  --cd-floatbutton-size-default: 32px;
+  --cd-floatbutton-size-large: 40px;
+  --cd-floatbutton-radius-round: var(--cd-border-radius-full);
+  --cd-floatbutton-radius-square: 8px;
+  --cd-floatbutton-bg: var(--cd-color-fill-0);
+  --cd-floatbutton-bg-hover: var(--cd-color-fill-1);
+  --cd-floatbutton-bg-active: var(--cd-color-fill-2);
+  --cd-floatbutton-color: var(--cd-color-primary);
+  --cd-floatbutton-shadow: var(--cd-shadow-elevated);
+  --cd-floatbutton-disabled-bg: var(--cd-color-disabled-bg);
+  --cd-floatbutton-disabled-text: var(--cd-color-disabled-text);
+  --cd-floatbutton-colorful-bg: var(--cd-color-ai-general);
+  --cd-floatbutton-colorful-bg-hover: var(--cd-color-ai-general-hover);
+  --cd-floatbutton-colorful-bg-active: var(--cd-color-ai-general-active);
+  --cd-floatbutton-colorful-text: var(--cd-color-white);
+  --cd-floatbutton-bottom: 24px;
+  --cd-floatbutton-right: 24px;
+  --cd-floatbutton-z: 1000;
+  --cd-floatbutton-group-bg: var(--cd-color-bg-0);
+  --cd-floatbutton-group-shadow: var(--cd-shadow-elevated);
+  --cd-floatbutton-group-radius: 8px;
+  --cd-floatbutton-group-padding: 6px;
+  --cd-floatbutton-group-gap: 4px;
+  --cd-floatbutton-group-bottom: 24px;
+  --cd-floatbutton-group-right: 24px;
+  --cd-floatbutton-group-item-padding-y: 6px;
+  --cd-floatbutton-group-item-padding-x: 12px;
+  --cd-floatbutton-group-item-gap: 8px;
+  --cd-floatbutton-group-item-radius: 4px;
+  --cd-floatbutton-group-item-color: var(--cd-color-text-0);
+  --cd-floatbutton-group-item-bg-hover: var(--cd-color-fill-1);
+  --cd-floatbutton-group-item-bg-active: var(--cd-color-fill-2);
+  --cd-floatbutton-group-item-font-size: 14px;
+  --cd-floatbutton-group-item-line-height: 20px;
+  --cd-floatbutton-group-item-font-weight: 400;
+  --cd-userguide-popup-text-default: var(--cd-color-text-0);
+  --cd-userguide-popup-text-primary: var(--cd-color-tertiary-light-default);
+  --cd-userguide-modal-indicator-bg: var(--cd-color-primary-light-active);
+  --cd-userguide-modal-indicator-bg-active: var(--cd-color-primary);
+  --cd-userguide-popover-width: 400px;
+  --cd-userguide-popup-cover-height: 200px;
+  --cd-userguide-modal-cover-width: 600px;
+  --cd-userguide-modal-cover-height: 300px;
+  --cd-userguide-modal-indicator-height: 30px;
+  --cd-userguide-modal-indicator-item-width: 6px;
+  --cd-userguide-modal-indicator-item-height: 6px;
+  --cd-userguide-popup-title-line-height: 24px;
+  --cd-userguide-popup-description-line-height: 20px;
+  --cd-userguide-popup-indicator-line-height: 20px;
+  --cd-userguide-modal-title-line-height: 24px;
+  --cd-userguide-modal-description-line-height: 20px;
+  --cd-userguide-popup-body-padding: 24px;
+  --cd-userguide-popup-title-margin-bottom: 8px;
+  --cd-userguide-popup-description-margin-bottom: 48px;
+  --cd-userguide-popup-button-gap: 12px;
+  --cd-userguide-popup-button-margin-left: 120px;
+  --cd-userguide-popup-indicator-gap: 8px;
+  --cd-userguide-modal-title-margin-bottom: 8px;
+  --cd-userguide-modal-body-padding: 24px 48px;
+  --cd-userguide-modal-footer-padding: 24px;
+  --cd-userguide-modal-button-gap: 12px;
+  --cd-userguide-popup-cover-radius: var(--cd-border-radius-medium) var(--cd-border-radius-medium) 0 0;
+  --cd-userguide-modal-indicator-radius: var(--cd-border-radius-large);
+  --cd-userguide-popup-title-font-size: var(--cd-font-size-header-5);
+  --cd-userguide-popup-description-font-size: var(--cd-font-size-regular);
+  --cd-userguide-popup-indicator-font-size: var(--cd-font-size-regular);
+  --cd-userguide-popup-title-font-weight: var(--cd-font-weight-bold);
+  --cd-userguide-modal-title-font-size: var(--cd-font-size-header-5);
+  --cd-userguide-modal-description-font-size: var(--cd-font-size-regular);
+  --cd-userguide-modal-title-font-weight: var(--cd-font-weight-bold);
+  --cd-userguide-spotlight-mask-bg: var(--cd-color-overlay-bg);
+  --cd-userguide-spotlight-duration: 200ms;
+  --cd-userguide-spotlight-function: cubic-bezier(0.4, 0, 0.2, 1);
+  --cd-sidebar-handle-size: var(--cd-spacing-tight);
+  --cd-sidebar-handle-color: var(--cd-color-border);
+  --cd-sidebar-handle-color-hover: var(--cd-color-primary);
+  --cd-sidebar-bg: var(--cd-color-bg-2);
+  --cd-sidebar-color: var(--cd-color-text-1);
+  --cd-sidebar-border: var(--cd-color-border);
+  --cd-sidebar-shadow: var(--cd-shadow-elevated);
+  --cd-sidebar-radius: var(--cd-border-radius-large);
+  --cd-sidebar-width: 400px;
+  --cd-sidebar-z: var(--cd-z-modal);
+  --cd-sidebar-motion-duration: var(--cd-motion-duration-mid);
+  --cd-sidebar-header-padding: var(--cd-spacing-base-tight) 16px;
+  --cd-sidebar-title-color: var(--cd-color-text-0);
+  --cd-sidebar-title-size: var(--cd-font-size-regular);
+  --cd-sidebar-title-weight: var(--cd-font-weight-bold);
+  --cd-sidebar-close-color: var(--cd-color-text-2);
+  --cd-sidebar-close-hover-bg: var(--cd-color-fill-1);
+  --cd-sidebar-close-radius: var(--cd-border-radius-small);
+  --cd-sidebar-body-padding: 16px;
+  --cd-sidebar-options-gap: var(--cd-spacing-tight);
+  --cd-sidebar-options-padding: var(--cd-spacing-tight) 16px;
+  --cd-sidebar-option-size: 32px;
+  --cd-sidebar-option-radius: var(--cd-border-radius-medium);
+  --cd-sidebar-option-color: var(--cd-color-text-2);
+  --cd-sidebar-option-color-hover: var(--cd-color-text-0);
+  --cd-sidebar-option-bg-hover: var(--cd-color-fill-0);
+  --cd-sidebar-option-color-active: var(--cd-color-primary);
+  --cd-sidebar-option-bg-active: var(--cd-color-primary-light-default);
+  --cd-sidebar-back-color: var(--cd-color-text-1);
+  --cd-sidebar-back-hover-bg: var(--cd-color-fill-1);
+  --cd-sidebar-annotation-gap: var(--cd-spacing-tight);
+  --cd-sidebar-annotation-card-bg: var(--cd-color-fill-0);
+  --cd-sidebar-annotation-card-bg-hover: var(--cd-color-fill-1);
+  --cd-sidebar-annotation-card-border: var(--cd-color-border);
+  --cd-sidebar-annotation-card-radius: var(--cd-border-radius-medium);
+  --cd-sidebar-annotation-card-padding: var(--cd-spacing-tight);
+  --cd-sidebar-annotation-title-color: var(--cd-color-text-0);
+  --cd-sidebar-annotation-title-size: var(--cd-font-size-regular);
+  --cd-sidebar-annotation-detail-color: var(--cd-color-text-2);
+  --cd-sidebar-annotation-detail-size: var(--cd-font-size-secondary);
+  --cd-sidebar-annotation-footer-color: var(--cd-color-text-2);
+  --cd-sidebar-annotation-order-color: var(--cd-color-text-2);
+  --cd-sidebar-annotation-order-bg: var(--cd-color-fill-1);
+  --cd-sidebar-annotation-duration-bg: rgba(0, 0, 0, 0.6);
+  --cd-sidebar-annotation-duration-color: #fff;
+  --cd-sidebar-annotation-cover-bg: var(--cd-color-fill-1);
+  --cd-sidebar-code-head-gap: var(--cd-spacing-tight);
+  --cd-sidebar-code-head-icon-color: var(--cd-color-text-2);
+  --cd-sidebar-code-head-color: var(--cd-color-text-0);
+  --cd-sidebar-code-head-size: var(--cd-font-size-regular);
+  --cd-sidebar-code-head-weight: var(--cd-font-weight-medium);
+  --cd-sidebar-code-expand-color: var(--cd-color-text-2);
+  --cd-sidebar-code-expand-hover-bg: var(--cd-color-fill-1);
+  --cd-sidebar-code-body-padding: var(--cd-spacing-tight) 0;
+  --cd-sidebar-mcp-gap: var(--cd-spacing-base-tight);
+  --cd-sidebar-mcp-count-color: var(--cd-color-text-2);
+  --cd-sidebar-mcp-count-size: var(--cd-font-size-secondary);
+  --cd-sidebar-mcp-group-title-color: var(--cd-color-text-2);
+  --cd-sidebar-mcp-group-title-size: var(--cd-font-size-secondary);
+  --cd-sidebar-mcp-item-gap: var(--cd-spacing-tight);
+  --cd-sidebar-mcp-item-padding: var(--cd-spacing-tight);
+  --cd-sidebar-mcp-item-gutter: var(--cd-spacing-tight);
+  --cd-sidebar-mcp-item-radius: var(--cd-border-radius-medium);
+  --cd-sidebar-mcp-item-bg: var(--cd-color-fill-0);
+  --cd-sidebar-mcp-item-bg-hover: var(--cd-color-fill-1);
+  --cd-sidebar-mcp-item-border: var(--cd-color-border);
+  --cd-sidebar-mcp-icon-size: 32px;
+  --cd-sidebar-mcp-icon-radius: var(--cd-border-radius-small);
+  --cd-sidebar-mcp-icon-bg: var(--cd-color-fill-1);
+  --cd-sidebar-mcp-label-color: var(--cd-color-text-0);
+  --cd-sidebar-mcp-label-size: var(--cd-font-size-regular);
+  --cd-sidebar-mcp-desc-color: var(--cd-color-text-2);
+  --cd-sidebar-mcp-desc-size: var(--cd-font-size-secondary);
+  --cd-sidebar-mcp-action-color: var(--cd-color-text-2);
+  --cd-sidebar-mcp-action-hover-bg: var(--cd-color-fill-1);
+  --cd-sidebar-mcp-empty-color: var(--cd-color-text-2);
+  --cd-sidebar-file-gap: var(--cd-spacing-tight);
+  --cd-sidebar-file-menu-gap: var(--cd-spacing-extra-tight);
+  --cd-sidebar-file-menu-padding: var(--cd-spacing-extra-tight) 0;
+  --cd-sidebar-file-menu-border: var(--cd-color-border);
+  --cd-sidebar-file-btn-radius: var(--cd-border-radius-small);
+  --cd-sidebar-file-btn-color: var(--cd-color-text-2);
+  --cd-sidebar-file-btn-color-hover: var(--cd-color-text-0);
+  --cd-sidebar-file-btn-hover-bg: var(--cd-color-fill-0);
+  --cd-sidebar-file-btn-color-active: var(--cd-color-primary);
+  --cd-sidebar-file-btn-active-bg: var(--cd-color-primary-light-default);
+  --cd-sidebar-file-editor-color: var(--cd-color-text-0);
+  --cd-sidebar-file-editor-size: var(--cd-font-size-regular);
+  --cd-sidebar-file-editor-line-height: var(--cd-line-height-loose);
+  --cd-sidebar-file-editor-min-height: 48px;
+  --cd-sidebar-file-image-radius: var(--cd-border-radius-medium);
+  --cd-sidebar-file-image-slot-margin: var(--cd-spacing-tight) 0;
+  --cd-sidebar-file-selection-bg: var(--cd-color-primary-light-default);
+  --cd-color-feedback-thank-text: var(--cd-color-text-2);
+  --cd-width-feedback: 400px;
+  --cd-width-feedback-text: 600px;
+  --cd-spacing-feedback-emoji-container-column-gap: 24px;
+  --cd-spacing-feedback-emoji-container-margin-y: 24px;
+  --cd-spacing-feedback-thank-text-margin-top: 24px;
+  --cd-spacing-feedback-thank-text-margin-bottom: 0px;
+  --cd-spacing-feedback-checkbox-group-vertical-row-gap: 16px;
+  --cd-spacing-feedback-footer-column-gap: 12px;
+  --cd-spacing-feedback-sidesheet-bottom-right: 20px;
+  --cd-spacing-feedback-sidesheet-bottom-inner-wrap-bottom: 50px;
+  --cd-font-feedback-emoji-font-size: 36px;
+  --cd-font-feedback-thank-text-font-size: var(--cd-font-size-regular);
+  --cd-font-feedback-thank-text-line-height: 20px;
+  --cd-font-feedback-thank-text-font-weight: var(--cd-font-weight-regular);
+  --cd-radius-feedback-sidesheet-inner: 12px;
 }
 
 [data-theme='dark'] {
@@ -936,7 +3336,6 @@
   --cd-color-text-1: rgba(249, 249, 249, 0.8);
   --cd-color-text-2: rgba(249, 249, 249, 0.62);
   --cd-color-text-3: rgba(249, 249, 249, 0.35);
-  --cd-color-text-inverse: #ffffff;
   --cd-color-rating-icon-default: #fdde43;
   --cd-color-highlight: #ffffff;
   --cd-color-highlight-bg: #fdf398;
@@ -1004,6 +3403,7 @@
   --cd-color-nav-bg: #232429;
   --cd-color-bg-inverse: #f9f9f9;
   --cd-color-overlay-bg: rgba(22, 22, 26, 0.6);
+  --cd-color-mask: rgba(0, 0, 0, 0.4);
   --cd-color-border: rgba(255, 255, 255, 0.08);
   --cd-color-fill-0: rgba(255, 255, 255, 0.12);
   --cd-color-fill-1: rgba(255, 255, 255, 0.16);
@@ -1011,6 +3411,11 @@
   --cd-color-shadow: rgba(0, 0, 0, 0.04);
   --cd-color-focus: rgb(84, 169, 255);
   --cd-color-focus-border: rgb(84, 169, 255);
+  --cd-color-ai-general: linear-gradient(278deg, rgb(234,107,246) 0%, rgb(195,117,255) 30%, rgb(134,129,252) 60%, rgb(91,162,245) 100%);
+  --cd-color-ai-general-hover: linear-gradient(278deg, rgb(243,143,248) 0%, rgb(213,152,255) 30%, rgb(163,160,253) 60%, rgb(131,187,248) 100%);
+  --cd-color-ai-general-active: linear-gradient(278deg, rgb(249,180,251) 0%, rgb(229,186,255) 30%, rgb(192,192,253) 60%, rgb(172,210,250) 100%);
+  --cd-color-ai-general-light: linear-gradient(278deg, rgb(80,18,101) 0%, rgb(58,23,112) 30%, rgb(39,29,108) 60%, rgb(9,44,100) 100%);
+  --cd-color-ai-purple: rgb(195,117,255);
 }
 
 /* Base：把页面背景/前景绑到主题 token，使暗色模式开箱即用（对齐 Semi —— Semi 同样
@@ -1054,3 +3459,35 @@ body {
   white-space: nowrap;
   border: 0;
 }
+
+/* 浅色滚动条工具类（严格对齐 Semi semi-foundation/base/base.scss .semi-light-scrollbar）：
+   跨组件复用（CodeHighlight/Chat 等）；轨道透明、滑块 hover 才显，尺寸 8px、圆角 6px。
+   值镜像 Semi：hover thumb var(--cd-color-fill-2)、thumb:hover var(--cd-color-fill-1)。
+   Semi 用 "&, *" 令自身与所有后代都套用，这里平铺展开（tokens.css 非 scss 不编译嵌套）。 */
+.cd-light-scrollbar::-webkit-scrollbar,
+.cd-light-scrollbar *::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+.cd-light-scrollbar::-webkit-scrollbar-track,
+.cd-light-scrollbar *::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0);
+}
+.cd-light-scrollbar::-webkit-scrollbar-corner,
+.cd-light-scrollbar *::-webkit-scrollbar-corner {
+  background-color: rgba(0, 0, 0, 0);
+}
+.cd-light-scrollbar::-webkit-scrollbar-thumb,
+.cd-light-scrollbar *::-webkit-scrollbar-thumb {
+  border-radius: 6px;
+  background: transparent;
+  transition: all 1s;
+}
+.cd-light-scrollbar:hover::-webkit-scrollbar-thumb,
+.cd-light-scrollbar *:hover::-webkit-scrollbar-thumb {
+  background: var(--cd-color-fill-2);
+}
+.cd-light-scrollbar::-webkit-scrollbar-thumb:hover,
+.cd-light-scrollbar *::-webkit-scrollbar-thumb:hover {
+  background: var(--cd-color-fill-1);
+}