@class-kit/vue 0.1.2 → 0.1.4

package/dist/styles/components.css

@@ -14,6 +14,12 @@
   --cc-color-divider: #f2f3f5;
   --cc-color-surface: #ffffff;
   --cc-color-surface-soft: #f7f8fa;
+  --cc-page-background: var(--cc-color-surface-soft);
+  --cc-page-background-image: none;
+  --cc-page-color: var(--cc-color-text);
+  --cc-page-muted-color: var(--cc-color-muted);
+  --cc-page-accent-color: var(--cc-color-accent);
+  --cc-page-surface-color: var(--cc-color-surface);
   --cc-color-danger: #f53f3f;
   --cc-color-success: #00b42a;
   --cc-color-warning: #ff7d00;
@@ -21,13 +27,9 @@
   --cc-color-accent-hover: #0a0c10;
   --cc-color-accent-contrast: #ffffff;
   --cc-scrollbar-size: 4px;
-  --cc-scrollbar-track-color: transparent;
-  --cc-scrollbar-thumb-color: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 56%,
-    transparent
-  );
-  --cc-scrollbar-thumb-hover-color: var(--cc-form-color-accent);
+  --cc-scrollbar-track-color: rgba(29, 33, 41, 0.06);
+  --cc-scrollbar-thumb-color: rgba(29, 33, 41, 0.42);
+  --cc-scrollbar-thumb-hover-color: rgba(29, 33, 41, 0.68);
   --cc-shadow-focus: 0 0 0 3px rgba(29, 33, 41, 0.18);
   --cc-shadow-floating: 0 22px 64px rgba(29, 33, 41, 0.2);
   --cc-form-gap: 16px;
@@ -58,11 +60,7 @@
   --cc-form-shadow-focus: var(--cc-shadow-focus);
   --cc-form-shadow-floating: var(--cc-shadow-floating);
   --cc-form-disabled-background: var(--cc-form-control-disabled-background);
-  --cc-form-disabled-border-color: color-mix(
-    in srgb,
-    var(--cc-form-color-muted) 42%,
-    var(--cc-form-color-border)
-  );
+  --cc-form-disabled-border-color: var(--cc-form-color-border);
   --cc-form-disabled-color: var(--cc-form-color-muted);
   --cc-form-disabled-opacity: 0.58;
   --cc-form-readonly-background: var(--cc-form-control-readonly-background);
@@ -74,11 +72,7 @@
   --cc-select-menu-text-color: var(--cc-form-color-text);
   --cc-select-menu-shadow: var(--cc-form-shadow-floating);
   --cc-select-option-hover-color: var(--cc-form-color-surface-soft);
-  --cc-select-option-selected-color: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 12%,
-    transparent
-  );
+  --cc-select-option-selected-color: rgba(29, 33, 41, 0.08);
   --cc-select-option-selected-text-color: var(--cc-form-color-accent);
   --cc-select-check-color: var(--cc-form-color-accent);
   --cc-select-placeholder-color: var(--cc-form-placeholder-color);
@@ -95,63 +89,32 @@
   --cc-switch-track-checked-background: var(--cc-form-color-accent);
   --cc-switch-thumb-background: var(--cc-form-color-surface);
   --cc-switch-thumb-shadow: 0 1px 3px rgba(23, 32, 38, 0.24);
-  --cc-rating-star-color: color-mix(
-    in srgb,
-    var(--cc-form-color-muted) 72%,
-    var(--cc-form-color-text)
-  );
+  --cc-rating-star-color: var(--cc-form-color-muted);
   --cc-rating-star-active-color: var(--cc-form-color-accent);
-  --cc-canvas-editor-background: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 5%,
-    var(--cc-form-color-surface)
-  );
+  --cc-canvas-editor-background: var(--cc-form-color-surface);
   --cc-canvas-editor-card-background: var(--cc-form-color-surface);
   --cc-canvas-editor-card-border-color: var(--cc-form-color-border);
   --cc-canvas-editor-card-shadow: 0 10px 24px rgba(29, 33, 41, 0.08);
-  --cc-canvas-editor-line-color: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 48%,
-    var(--cc-form-color-border)
-  );
+  --cc-canvas-editor-line-color: var(--cc-form-color-border);
   --cc-canvas-editor-muted-color: var(--cc-form-color-muted);
   --cc-canvas-editor-text-color: var(--cc-form-color-text);
-  --cc-canvas-editor-grid-color: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 10%,
-    transparent
-  );
-  --cc-canvas-editor-selection-ring: 0 0 0 2px
-    color-mix(in srgb, var(--cc-form-color-accent) 14%, transparent);
+  --cc-canvas-editor-grid-color: rgba(29, 33, 41, 0.08);
+  --cc-canvas-editor-selection-ring: 0 0 0 2px rgba(29, 33, 41, 0.18);
   --cc-canvas-editor-control-active-background: var(--cc-form-color-accent);
   --cc-canvas-editor-control-active-border-color: var(--cc-form-color-accent);
   --cc-canvas-editor-control-active-color: var(--cc-form-color-accent-contrast);
   --cc-canvas-editor-control-hover-border-color: var(--cc-form-color-accent);
-  --cc-canvas-editor-document-accent-color: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 8%,
-    transparent
-  );
-  --cc-canvas-editor-node-border-color: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 14%,
-    transparent
-  );
-  --cc-canvas-editor-node-editing-border-color: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 42%,
-    transparent
-  );
-  --cc-canvas-editor-input-focus-shadow: inset 0 0 0 1px
-    color-mix(in srgb, var(--cc-form-color-accent) 22%, transparent);
+  --cc-canvas-editor-document-accent-color: rgba(29, 33, 41, 0.12);
+  --cc-canvas-editor-node-border-color: rgba(29, 33, 41, 0.16);
+  --cc-canvas-editor-node-editing-border-color: rgba(29, 33, 41, 0.45);
+  --cc-canvas-editor-input-focus-shadow: inset 0 0 0 1px rgba(29, 33, 41, 0.2);
   --cc-canvas-editor-mind-glow: radial-gradient(
     circle at 50% 45%,
-    color-mix(in srgb, var(--cc-form-color-accent) 8%, transparent),
+    rgba(29, 33, 41, 0.12),
     transparent 44%
   );
   --cc-canvas-editor-card-selected-border-color: var(--cc-form-color-accent);
-  --cc-canvas-editor-card-selected-shadow: 0 12px 30px
-    color-mix(in srgb, var(--cc-form-color-accent) 12%, transparent);
+  --cc-canvas-editor-card-selected-shadow: 0 12px 30px rgba(29, 33, 41, 0.16);
   --cc-color-picker-swatch-radius: var(--cc-radius-md);
   --cc-date-picker-panel-radius: var(--cc-radius-lg);
   --cc-date-picker-panel-shadow: var(--cc-form-shadow-floating);
@@ -159,16 +122,8 @@
   --cc-date-picker-day-selected-background: var(--cc-form-color-accent);
   --cc-date-picker-day-selected-color: var(--cc-form-color-accent-contrast);
   --cc-date-picker-day-today-ring: inset 0 0 0 1px var(--cc-form-color-accent);
-  --cc-date-range-summary-active-border-color: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 48%,
-    var(--cc-form-color-border)
-  );
-  --cc-date-range-day-in-range-background: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 12%,
-    transparent
-  );
+  --cc-date-range-summary-active-border-color: var(--cc-form-color-border);
+  --cc-date-range-day-in-range-background: rgba(29, 33, 41, 0.08);
   --cc-calendar-day-hover-background: var(
     --cc-date-picker-day-hover-background
   );
@@ -181,16 +136,11 @@
   --cc-verification-code-radius: var(--cc-radius-md);
   --cc-verification-code-border: var(--cc-form-color-border);
   --cc-verification-code-focus-border: var(--cc-form-color-accent);
-  --cc-verification-code-focus-shadow: 0 0 0 3px
-    color-mix(in srgb, var(--cc-form-color-accent) 18%, transparent);
+  --cc-verification-code-focus-shadow: 0 0 0 3px rgba(29, 33, 41, 0.18);
   --cc-slide-captcha-radius: var(--cc-radius-lg);
   --cc-slide-captcha-border-color: var(--cc-form-color-border);
   --cc-slide-captcha-track-background: var(--cc-form-color-surface-soft);
-  --cc-slide-captcha-track-fill: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 18%,
-    transparent
-  );
+  --cc-slide-captcha-track-fill: rgba(29, 33, 41, 0.16);
   --cc-slide-captcha-thumb-background: var(--cc-form-color-accent);
   --cc-slide-captcha-thumb-color: var(--cc-form-color-accent-contrast);
   --cc-slide-captcha-success-color: var(--cc-form-color-success);
@@ -214,16 +164,8 @@
   --cc-lazy-image-border-color: transparent;
   --cc-lazy-image-placeholder-background: transparent;
   --cc-lazy-image-placeholder-color: var(--cc-form-color-muted);
-  --cc-lazy-image-skeleton-color: color-mix(
-    in srgb,
-    var(--cc-form-color-muted) 16%,
-    transparent
-  );
-  --cc-lazy-image-skeleton-highlight-color: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 16%,
-    transparent
-  );
+  --cc-lazy-image-skeleton-color: rgba(100, 116, 139, 0);
+  --cc-lazy-image-skeleton-highlight-color: rgba(255, 255, 255, 0.72);
   --cc-lazy-image-error-color: var(--cc-form-color-danger);
   --cc-lazy-image-transition-duration: var(--cc-animation-duration);
   --cc-tilt-card-background: var(--cc-form-color-surface);
@@ -238,26 +180,10 @@
   --cc-orbital-sphere-item-size: 72px;
   --cc-orbital-sphere-duration: 9000ms;
   --cc-orbital-sphere-cycle-duration: 12000ms;
-  --cc-orbital-sphere-border-color: color-mix(
-    in srgb,
-    var(--cc-form-color-text) 16%,
-    transparent
-  );
-  --cc-orbital-sphere-shadow-color: color-mix(
-    in srgb,
-    var(--cc-form-color-text) 28%,
-    transparent
-  );
-  --cc-orbital-sphere-item-background: color-mix(
-    in srgb,
-    var(--cc-form-color-surface) 78%,
-    transparent
-  );
-  --cc-orbital-sphere-item-border-color: color-mix(
-    in srgb,
-    var(--cc-form-color-border) 86%,
-    transparent
-  );
+  --cc-orbital-sphere-border-color: rgba(15, 23, 42, 0.16);
+  --cc-orbital-sphere-shadow-color: rgba(15, 23, 42, 0.08);
+  --cc-orbital-sphere-item-background: rgba(255, 255, 255, 1);
+  --cc-orbital-sphere-item-border-color: rgba(100, 116, 139, 1);
   --cc-menu-width: 240px;
   --cc-menu-collapsed-width: 64px;
   --cc-menu-item-height: 40px;
@@ -273,16 +199,13 @@
   --cc-menu-item-muted-color: var(--cc-menu-muted-color);
   --cc-menu-item-hover-background: var(--cc-form-control-hover-background);
   --cc-menu-item-hover-color: var(--cc-menu-text-color);
-  --cc-menu-item-active-background: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 10%,
-    transparent
-  );
+  --cc-menu-item-active-background: rgba(29, 33, 41, 0.08);
   --cc-menu-item-active-color: var(--cc-form-color-accent);
   --cc-menu-item-active-border-color: var(--cc-form-color-accent);
   --cc-menu-item-icon-color: var(--cc-menu-muted-color);
   --cc-menu-item-active-icon-color: var(--cc-menu-item-active-color);
   --cc-menu-shadow: 0 18px 42px rgba(29, 33, 41, 0.08);
+  --cc-menu-focus-shadow: var(--cc-form-shadow-focus);
   --cc-code-preview-background: var(--cc-form-color-surface);
   --cc-code-preview-bar-background: var(--cc-code-preview-background);
   --cc-code-preview-panel-background: var(--cc-form-color-surface-soft);
@@ -290,11 +213,7 @@
   --cc-code-preview-color: var(--cc-form-color-text);
   --cc-code-preview-muted-color: var(--cc-form-color-muted);
   --cc-code-preview-accent-color: var(--cc-form-color-accent);
-  --cc-code-preview-line-color: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 32%,
-    transparent
-  );
+  --cc-code-preview-line-color: rgba(29, 33, 41, 0.12);
   --cc-code-preview-shadow: var(--cc-form-shadow-floating);
   --cc-drag-drop-preview-background: var(
     --cc-drag-drop-slot-dragging-background
@@ -318,82 +237,35 @@
   --cc-design-effect-color-3: #36bffb;
   --cc-design-effect-alpha: 0.72;
   --cc-design-effect-radius: var(--cc-radius-lg);
-  --cc-design-effect-border-color: color-mix(
-    in srgb,
-    var(--cc-design-effect-color-1) 34%,
-    var(--cc-form-color-border)
-  );
-  --cc-design-effect-background: color-mix(
-    in srgb,
-    var(--cc-form-color-surface) 88%,
-    transparent
-  );
-  --cc-design-effect-shadow: 0 18px 48px
-    color-mix(in srgb, var(--cc-design-effect-color-1) 18%, transparent);
+  --cc-design-effect-border-color: var(--cc-form-color-border);
+  --cc-design-effect-background: rgba(255, 255, 255, 1);
+  --cc-design-effect-shadow: 0 18px 48px rgba(29, 33, 41, 0.18);
   --cc-typewriter-loading-color: var(--cc-form-color-accent);
   --cc-typewriter-cursor-color: var(--cc-form-color-accent);
   --cc-video-player-radius: var(--cc-radius-lg);
-  --cc-video-player-controls-background: color-mix(
-    in srgb,
-    var(--cc-form-color-surface) 88%,
-    transparent
-  );
+  --cc-video-player-controls-background: rgba(255, 255, 255, 1);
   --cc-video-player-controls-color: var(--cc-form-color-text);
-  --cc-business-surface: color-mix(
-    in srgb,
-    var(--cc-form-color-surface) 92%,
-    transparent
-  );
-  --cc-business-border-color: color-mix(
-    in srgb,
-    var(--cc-form-color-border) 82%,
-    transparent
-  );
+  --cc-business-surface: rgba(255, 255, 255, 1);
+  --cc-business-border-color: rgba(100, 116, 139, 1);
   --cc-business-text-color: var(--cc-form-color-text);
   --cc-business-muted-color: var(--cc-form-color-muted);
   --cc-danmaku-shadow: 0 2px 8px rgba(0, 0, 0, 0.34);
-  --cc-drag-drop-slot-dragging-background: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 8%,
-    transparent
-  );
-  --cc-drag-drop-slot-dragging-border-color: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 38%,
-    transparent
-  );
-  --cc-drag-drop-slot-over-background: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 10%,
-    transparent
-  );
-  --cc-drag-drop-slot-over-border-color: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 46%,
-    transparent
-  );
-  --cc-drag-drop-preview-shadow: 0 18px 42px
-    color-mix(in srgb, var(--cc-form-color-accent) 26%, transparent);
-  --cc-progress-track-color: color-mix(
-    in srgb,
-    var(--cc-form-color-border) 70%,
-    transparent
-  );
+  --cc-drag-drop-slot-dragging-background: rgba(22, 119, 255, 0.08);
+  --cc-drag-drop-slot-dragging-border-color: rgba(22, 119, 255, 0.35);
+  --cc-drag-drop-slot-over-background: rgba(22, 119, 255, 0.12);
+  --cc-drag-drop-slot-over-border-color: rgba(22, 119, 255, 0.46);
+  --cc-drag-drop-preview-shadow: 0 18px 42px rgba(22, 119, 255, 0.22);
+  --cc-progress-track-color: rgba(100, 116, 139, 1);
   --cc-progress-fill-color: var(--cc-form-color-accent);
   --cc-progress-thumb-color: var(--cc-form-color-surface);
-  --cc-progress-thumb-shadow: 0 0 0 4px
-    color-mix(in srgb, var(--cc-form-color-accent) 16%, transparent);
+  --cc-progress-thumb-shadow: 0 0 0 4px rgba(29, 33, 41, 0.16);
   --cc-signature-border-color: var(--cc-form-color-border);
   --cc-signature-border-radius: var(--cc-radius-lg);
   --cc-signature-action-bg: var(--cc-form-color-surface);
   --cc-signature-action-color: var(--cc-form-color-text);
   --cc-signature-action-hover-bg: var(--cc-form-color-hover);
   --cc-signature-action-disabled-color: var(--cc-form-color-placeholder);
-  --cc-signature-guide-color: color-mix(
-    in srgb,
-    var(--cc-form-color-muted) 26%,
-    transparent
-  );
+  --cc-signature-guide-color: rgba(100, 116, 139, 0);
   --cc-timeline-color: var(--cc-form-color-text);
   --cc-timeline-muted-color: var(--cc-form-color-muted);
   --cc-timeline-line-color: var(--cc-form-color-border);
@@ -402,11 +274,7 @@
   --cc-floating-ball-color: var(--cc-form-color-accent-contrast);
   --cc-picker-option-height: 38px;
   --cc-picker-active-color: var(--cc-form-color-accent);
-  --cc-picker-indicator-border-color: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 42%,
-    var(--cc-form-color-border)
-  );
+  --cc-picker-indicator-border-color: var(--cc-form-color-border);
   --cc-picker-mask-background: var(--cc-form-color-surface);
   --cc-swiper-radius: var(--cc-radius-lg);
   --cc-swiper-arrow-background: rgba(255, 255, 255, 0.76);
@@ -423,8 +291,7 @@
   --cc-button-primary-background: var(--cc-form-color-accent);
   --cc-button-primary-background-hover: var(--cc-form-color-accent-hover);
   --cc-button-primary-color: var(--cc-form-color-accent-contrast);
-  --cc-button-primary-shadow-hover: 0 8px 20px
-    color-mix(in srgb, var(--cc-form-color-accent) 22%, transparent);
+  --cc-button-primary-shadow-hover: 0 8px 20px rgba(29, 33, 41, 0.18);
   --cc-button-secondary-background: var(--cc-form-color-surface-soft);
   --cc-button-secondary-border-color: var(--cc-form-color-border);
   --cc-button-secondary-color: var(--cc-form-color-text);
@@ -458,7 +325,7 @@
   --cc-popup-header-background: var(--cc-modal-header-background);
   --cc-popup-header-border-color: var(--cc-form-color-divider);
   --cc-popup-header-color: var(--cc-form-color-text);
-  --cc-popup-max-size: min(420px, 86vw);
+  --cc-popup-max-size: 420px;
   --cc-popup-slide-distance: 100%;
   --cc-popup-overlay-enter-opacity: 1;
   --cc-popup-overlay-exit-opacity: 0;
@@ -478,27 +345,13 @@
   --cc-toast-max-height: 160px;
   --cc-tabs-radius: var(--cc-radius-lg);
   --cc-tabs-list-border-color: var(--cc-form-color-border);
-  --cc-tabs-tab-color: color-mix(
-    in srgb,
-    var(--cc-form-color-text) 72%,
-    var(--cc-form-color-muted)
-  );
-  --cc-tabs-tab-hover-background: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 8%,
-    transparent
-  );
+  --cc-tabs-tab-color: var(--cc-form-color-text);
+  --cc-tabs-tab-hover-background: rgba(29, 33, 41, 0.08);
   --cc-tabs-tab-hover-color: var(--cc-form-color-accent);
-  --cc-tabs-tab-active-background: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 12%,
-    var(--cc-form-color-surface)
-  );
+  --cc-tabs-tab-active-background: var(--cc-form-color-surface);
   --cc-tabs-tab-active-color: var(--cc-form-color-accent);
   --cc-animation-duration: 180ms;
   --cc-animation-easing: cubic-bezier(0.22, 0.8, 0.28, 1);
-  --cc-theme-backdrop-filter: none;
-  --cc-theme-overlay-backdrop-filter: none;
   --cc-theme-glass-highlight: linear-gradient(
     135deg,
     rgba(255, 255, 255, 0.72),
@@ -506,30 +359,105 @@
   );
 }
 
-* {
+:where(
+  .cc-config-provider,
+  [data-cc-theme],
+  [class^="cc-theme-"],
+  [class*=" cc-theme-"]
+),
+:where(
+    .cc-config-provider,
+    [data-cc-theme],
+    [class^="cc-theme-"],
+    [class*=" cc-theme-"]
+  )
+  * {
   scrollbar-color: var(--cc-scrollbar-thumb-color)
     var(--cc-scrollbar-track-color);
   scrollbar-width: thin;
 }
 
-*::-webkit-scrollbar {
-  height: var(--cc-scrollbar-size);
+:where(
+  .cc-config-provider,
+  [data-cc-theme],
+  [class^="cc-theme-"],
+  [class*=" cc-theme-"]
+)::-webkit-scrollbar,
+:where(
+    .cc-config-provider,
+    [data-cc-theme],
+    [class^="cc-theme-"],
+    [class*=" cc-theme-"]
+  )
+  *::-webkit-scrollbar {
   width: var(--cc-scrollbar-size);
+  height: var(--cc-scrollbar-size);
 }
 
-*::-webkit-scrollbar-track {
+:where(
+  .cc-config-provider,
+  [data-cc-theme],
+  [class^="cc-theme-"],
+  [class*=" cc-theme-"]
+)::-webkit-scrollbar-track,
+:where(
+    .cc-config-provider,
+    [data-cc-theme],
+    [class^="cc-theme-"],
+    [class*=" cc-theme-"]
+  )
+  *::-webkit-scrollbar-track {
   background: var(--cc-scrollbar-track-color);
 }
 
-*::-webkit-scrollbar-thumb {
+:where(
+  .cc-config-provider,
+  [data-cc-theme],
+  [class^="cc-theme-"],
+  [class*=" cc-theme-"]
+)::-webkit-scrollbar-thumb,
+:where(
+    .cc-config-provider,
+    [data-cc-theme],
+    [class^="cc-theme-"],
+    [class*=" cc-theme-"]
+  )
+  *::-webkit-scrollbar-thumb {
   background: var(--cc-scrollbar-thumb-color);
   border-radius: var(--cc-radius-pill);
 }
 
-*::-webkit-scrollbar-thumb:hover {
+:where(
+    .cc-config-provider,
+    [data-cc-theme],
+    [class^="cc-theme-"],
+    [class*=" cc-theme-"]
+  )::-webkit-scrollbar-thumb:hover,
+:where(
+    .cc-config-provider,
+    [data-cc-theme],
+    [class^="cc-theme-"],
+    [class*=" cc-theme-"]
+  )
+  *::-webkit-scrollbar-thumb:hover {
   background: var(--cc-scrollbar-thumb-hover-color);
 }
 
+html[data-cc-theme-page="true"] {
+  background: var(--cc-page-background);
+  color: var(--cc-page-color);
+  min-height: 100%;
+}
+
+html[data-cc-theme-page="true"] body {
+  min-height: 100vh;
+  margin: 0;
+  background: var(--cc-page-background-image), var(--cc-page-background);
+  color: var(--cc-page-color);
+  font-family: var(--cc-font-family);
+  text-rendering: optimizeLegibility;
+}
+
 .cc-icon {
   display: inline-block;
   flex: none;
@@ -547,7 +475,9 @@
 }
 
 .cc-config-provider {
-  color: var(--cc-form-color-text);
+  background: var(--cc-page-background-image), var(--cc-page-background);
+  box-sizing: border-box;
+  color: var(--cc-page-color);
   font-family: var(--cc-form-font);
   min-width: 0;
 }
@@ -556,6 +486,43 @@
   min-width: 0;
 }
 
+.cc-theme-box {
+  background: var(--cc-page-surface-color);
+  border: 1px solid var(--cc-form-color-border);
+  border-radius: var(--cc-theme-box-radius, var(--cc-radius-lg));
+  box-shadow: var(--cc-form-shadow-floating);
+  box-sizing: border-box;
+  color: var(--cc-page-color);
+  font-family: var(--cc-form-font);
+  min-width: 0;
+  padding: var(--cc-theme-box-padding, 16px);
+}
+
+.cc-theme-box[data-size="sm"] {
+  --cc-theme-box-padding: 12px;
+}
+
+.cc-theme-box[data-size="md"] {
+  --cc-theme-box-padding: 16px;
+}
+
+.cc-theme-box[data-size="lg"] {
+  --cc-theme-box-padding: 24px;
+}
+
+.cc-theme-box[data-variant="page"] {
+  background: var(--cc-page-background-image), var(--cc-page-background);
+  border-color: transparent;
+  box-shadow: none;
+}
+
+.cc-theme-box[data-variant="plain"] {
+  background: transparent;
+  border-color: transparent;
+  box-shadow: none;
+  padding: 0;
+}
+
 .cc-field {
   display: grid;
   gap: 6px;
@@ -592,43 +559,31 @@
     box-shadow 120ms ease;
 }
 
-.cc-field__control:-webkit-autofill,
-.cc-field__control:-webkit-autofill:hover,
-.cc-field__control:-webkit-autofill:focus,
-.cc-chat-textarea__control:-webkit-autofill,
-.cc-chat-textarea__control:-webkit-autofill:hover,
-.cc-chat-textarea__control:-webkit-autofill:focus,
-.cc-canvas-editor__card input:-webkit-autofill,
-.cc-canvas-editor__card input:-webkit-autofill:hover,
-.cc-canvas-editor__card input:-webkit-autofill:focus,
-.cc-canvas-editor__card textarea:-webkit-autofill,
-.cc-canvas-editor__card textarea:-webkit-autofill:hover,
-.cc-canvas-editor__card textarea:-webkit-autofill:focus {
+.cc-field__control:autofill,
+.cc-field__control:autofill:hover,
+.cc-field__control:autofill:focus,
+.cc-chat-textarea__control:autofill,
+.cc-chat-textarea__control:autofill:hover,
+.cc-chat-textarea__control:autofill:focus,
+.cc-canvas-editor__card input:autofill,
+.cc-canvas-editor__card input:autofill:hover,
+.cc-canvas-editor__card input:autofill:focus,
+.cc-canvas-editor__card textarea:autofill,
+.cc-canvas-editor__card textarea:autofill:hover,
+.cc-canvas-editor__card textarea:autofill:focus {
   box-shadow: 0 0 0 1000px var(--cc-form-control-background) inset;
   caret-color: var(--cc-form-color-text);
   transition:
     background-color 9999s ease-out,
     color 9999s ease-out;
-  -webkit-text-fill-color: var(--cc-form-color-text);
 }
 
-.cc-field__control::-ms-clear,
-.cc-field__control::-ms-reveal,
-.cc-field__control::-webkit-search-cancel-button,
-.cc-field__control::-webkit-search-decoration {
-  display: none;
+.cc-field__control[type="search"] {
+  appearance: none;
 }
 
 .cc-field__control[type="number"] {
   appearance: textfield;
-  -moz-appearance: textfield;
-}
-
-.cc-field__control[type="number"]::-webkit-inner-spin-button,
-.cc-field__control[type="number"]::-webkit-outer-spin-button {
-  appearance: none;
-  margin: 0;
-  -webkit-appearance: none;
 }
 
 .cc-field__control--clearable {
@@ -665,6 +620,11 @@
   color: var(--cc-form-color-text);
 }
 
+.cc-field__clear:focus {
+  box-shadow: none;
+  outline: none;
+}
+
 .cc-field__clear:focus-visible {
   box-shadow: var(--cc-form-shadow-focus);
   outline: none;
@@ -715,16 +675,16 @@
 
 .cc-password-field__eye {
   display: block;
-  height: 23px;
+  height: 22px;
   stroke: currentColor;
   stroke-linecap: round;
   stroke-linejoin: round;
-  stroke-width: 2;
-  width: 23px;
+  stroke-width: 1.55;
+  width: 22px;
 }
 
 .cc-password-field__eye-mask {
-  stroke-width: 2.35;
+  stroke-width: 1.7;
 }
 
 .cc-password-field__toggle-image {
@@ -735,10 +695,15 @@
 }
 
 .cc-password-field__toggle:hover {
-  background: color-mix(in srgb, var(--cc-form-color-accent) 10%, transparent);
+  background: rgba(22, 119, 255, 0);
   color: var(--cc-form-color-accent);
 }
 
+.cc-password-field__toggle:focus {
+  box-shadow: none;
+  outline: none;
+}
+
 .cc-password-field__toggle:focus-visible {
   box-shadow: var(--cc-form-shadow-focus);
   outline: none;
@@ -775,9 +740,9 @@
 }
 
 .cc-field__control[data-readonly="true"]:focus,
-.cc-field__control[data-readonly="true"]:focus-visible,
+.cc-field__control[data-readonly="true"]:focus,
 .cc-field[data-readonly="true"] .cc-field__control:focus,
-.cc-field[data-readonly="true"] .cc-field__control:focus-visible {
+.cc-field[data-readonly="true"] .cc-field__control:focus {
   border-color: var(--cc-form-readonly-border-color);
   box-shadow: none;
 }
@@ -828,6 +793,8 @@
   box-shadow: var(--cc-form-shadow-floating);
   color: var(--cc-form-color-text);
   display: grid;
+  font-size: inherit;
+  font-weight: 400;
   gap: 12px;
   padding: 12px;
   position: fixed;
@@ -914,16 +881,6 @@
 
 .cc-color-picker__channels[data-show-steppers="false"] input[type="number"] {
   appearance: textfield;
-  -moz-appearance: textfield;
-}
-
-.cc-color-picker__channels[data-show-steppers="false"]
-  input[type="number"]::-webkit-inner-spin-button,
-.cc-color-picker__channels[data-show-steppers="false"]
-  input[type="number"]::-webkit-outer-spin-button {
-  appearance: none;
-  margin: 0;
-  -webkit-appearance: none;
 }
 
 .cc-color-picker__alpha {
@@ -936,7 +893,6 @@
 }
 
 .cc-color-picker__alpha input[type="range"] {
-  accent-color: var(--cc-form-color-accent);
   height: 18px;
 }
 
@@ -952,6 +908,8 @@
   border-radius: var(--cc-date-picker-panel-radius);
   box-shadow: var(--cc-date-picker-panel-shadow);
   color: var(--cc-form-color-text);
+  font-size: inherit;
+  font-weight: 400;
   max-width: 280px;
   padding: 10px;
 }
@@ -1027,19 +985,21 @@
 
 .cc-date-picker__week {
   color: var(--cc-form-color-muted);
-  font-size: 12px;
+  font-size: inherit;
+  font-weight: 400;
   margin-bottom: 6px;
   text-align: center;
 }
 
 .cc-date-picker__day {
-  aspect-ratio: 1;
+  height: 34px;
   background: transparent;
   border: 0;
   border-radius: var(--cc-radius-md);
   color: var(--cc-form-color-text);
   cursor: pointer;
-  font-size: 13px;
+  font: inherit;
+  font-weight: 400;
   transition:
     background 120ms ease,
     color 120ms ease;
@@ -1064,8 +1024,8 @@
 }
 
 .cc-date-range-picker__panel {
-  max-width: min(92vw, 620px);
-  width: min(92vw, 620px);
+  max-width: 620px;
+  width: 92vw;
 }
 
 .cc-date-range-picker__summary {
@@ -1117,7 +1077,8 @@
 
 .cc-date-range-picker__month-title {
   display: block;
-  font-size: 13px;
+  font-size: inherit;
+  font-weight: 400;
   margin-bottom: 8px;
   text-align: center;
 }
@@ -1149,7 +1110,8 @@
 
 @media (max-width: 720px) {
   .cc-date-range-picker__panel {
-    width: min(92vw, 360px);
+    max-width: 360px;
+    width: 92vw;
   }
 
   .cc-date-range-picker__months {
@@ -1204,7 +1166,8 @@
 }
 
 .cc-slide-captcha {
-  max-width: min(100%, var(--cc-slide-captcha-width, 320px));
+  max-width: var(--cc-slide-captcha-width, 320px);
+  width: 100%;
 }
 
 .cc-slide-captcha__card {
@@ -1278,16 +1241,8 @@
 .cc-slide-captcha__result {
   align-items: center;
   background:
-    radial-gradient(
-      circle at 50% 48%,
-      color-mix(
-        in srgb,
-        var(--cc-slide-captcha-success-color) 18%,
-        transparent
-      ),
-      transparent 46%
-    ),
-    color-mix(in srgb, var(--cc-form-color-surface) 70%, transparent);
+    radial-gradient(circle at 50% 48%, rgba(0, 180, 42, 0), transparent 46%),
+    rgba(255, 255, 255, 1);
   display: flex;
   inset: 0;
   justify-content: center;
@@ -1303,15 +1258,13 @@
   align-items: center;
   background: linear-gradient(
     145deg,
-    color-mix(in srgb, var(--cc-slide-captcha-success-color) 18%, white),
+    white,
     var(--cc-slide-captcha-success-color)
   );
   border-radius: var(--cc-radius-pill);
   box-shadow:
-    0 18px 38px
-      color-mix(in srgb, var(--cc-slide-captcha-success-color) 34%, transparent),
-    0 0 0 10px
-      color-mix(in srgb, var(--cc-slide-captcha-success-color) 12%, transparent);
+    0 18px 38px rgba(0, 180, 42, 0),
+    0 0 0 10px rgba(0, 180, 42, 0);
   color: var(--cc-form-color-accent-contrast);
   display: inline-flex;
   font: 900 42px/1 var(--cc-font-family);
@@ -1323,8 +1276,7 @@
 
 .cc-slide-captcha__result-icon::before,
 .cc-slide-captcha__result-icon::after {
-  border: 2px solid
-    color-mix(in srgb, var(--cc-slide-captcha-success-color) 46%, transparent);
+  border: 2px solid rgba(0, 180, 42, 0);
   border-radius: inherit;
   content: "";
   inset: -10px;
@@ -1415,8 +1367,7 @@
   background: var(--cc-slide-captcha-thumb-background);
   border: 0;
   border-radius: var(--cc-radius-pill);
-  box-shadow: 0 8px 18px
-    color-mix(in srgb, var(--cc-form-color-accent) 28%, transparent);
+  box-shadow: 0 8px 18px rgba(22, 119, 255, 0);
   color: var(--cc-slide-captcha-thumb-color);
   cursor: grab;
   display: inline-flex;
@@ -1468,20 +1419,12 @@
 }
 
 .cc-slide-captcha[data-status="success"] .cc-slide-captcha__track {
-  border-color: color-mix(
-    in srgb,
-    var(--cc-slide-captcha-success-color) 48%,
-    var(--cc-slide-captcha-border-color)
-  );
+  border-color: var(--cc-slide-captcha-border-color);
   color: var(--cc-slide-captcha-success-color);
 }
 
 .cc-slide-captcha[data-status="failed"] .cc-slide-captcha__track {
-  border-color: color-mix(
-    in srgb,
-    var(--cc-slide-captcha-error-color) 52%,
-    var(--cc-slide-captcha-border-color)
-  );
+  border-color: var(--cc-slide-captcha-error-color);
   color: var(--cc-slide-captcha-error-color);
 }
 
@@ -1561,34 +1504,14 @@
   0%,
   100% {
     box-shadow:
-      0 18px 38px
-        color-mix(
-          in srgb,
-          var(--cc-slide-captcha-success-color) 34%,
-          transparent
-        ),
-      0 0 0 10px
-        color-mix(
-          in srgb,
-          var(--cc-slide-captcha-success-color) 12%,
-          transparent
-        );
+      0 18px 38px rgba(0, 180, 42, 0),
+      0 0 0 10px rgba(0, 180, 42, 0);
   }
 
   46% {
     box-shadow:
-      0 20px 44px
-        color-mix(
-          in srgb,
-          var(--cc-slide-captcha-success-color) 46%,
-          transparent
-        ),
-      0 0 0 14px
-        color-mix(
-          in srgb,
-          var(--cc-slide-captcha-success-color) 18%,
-          transparent
-        );
+      0 20px 44px rgba(0, 180, 42, 0),
+      0 0 0 14px rgba(0, 180, 42, 0);
   }
 }
 
@@ -1734,7 +1657,7 @@
 }
 
 .cc-calendar__festival {
-  background: color-mix(in srgb, var(--cc-form-color-accent) 12%, transparent);
+  background: rgba(22, 119, 255, 0);
   border-radius: var(--cc-radius-pill);
   color: var(--cc-form-color-accent);
   display: inline-flex;
@@ -1773,7 +1696,7 @@
 }
 
 .cc-calendar__day[data-selected="true"] .cc-calendar__festival {
-  background: color-mix(in srgb, currentColor 16%, transparent);
+  background: rgba(15, 23, 42, 0);
 }
 
 .cc-calendar__day:disabled,
@@ -1823,9 +1746,6 @@
   overflow-y: hidden;
   padding: 8px 12px;
   resize: none;
-  scrollbar-width: thin;
-  scrollbar-color: var(--cc-form-color-border-hover) transparent;
-  word-break: normal;
   transition:
     background-color var(--cc-animation-duration) var(--cc-animation-easing),
     border-color var(--cc-animation-duration) var(--cc-animation-easing),
@@ -1867,6 +1787,11 @@
   color: var(--cc-form-color-text);
 }
 
+.cc-chat-textarea__clear:focus {
+  box-shadow: none;
+  outline: none;
+}
+
 .cc-chat-textarea__clear:focus-visible {
   box-shadow: var(--cc-form-shadow-focus);
   outline: none;
@@ -1909,12 +1834,11 @@
 .cc-date-picker__trigger[data-readonly="true"],
 .cc-date-picker__trigger[data-readonly="true"]:hover,
 .cc-date-picker__trigger[data-readonly="true"]:focus,
-.cc-date-picker__trigger[data-readonly="true"]:focus-visible,
+.cc-date-picker__trigger[data-readonly="true"]:focus,
 .cc-date-range-picker[data-readonly="true"] .cc-date-picker__trigger,
 .cc-date-range-picker[data-readonly="true"] .cc-date-picker__trigger:hover,
 .cc-date-range-picker[data-readonly="true"] .cc-date-picker__trigger:focus,
-.cc-date-range-picker[data-readonly="true"]
-  .cc-date-picker__trigger:focus-visible {
+.cc-date-range-picker[data-readonly="true"] .cc-date-picker__trigger:focus {
   background: var(--cc-form-readonly-background);
   border-color: var(--cc-form-readonly-border-color);
   box-shadow: none;
@@ -1984,6 +1908,8 @@
   box-shadow: var(--cc-select-menu-shadow);
   color: var(--cc-select-menu-text-color);
   display: grid;
+  font-size: inherit;
+  font-weight: 400;
   gap: 4px;
   left: 0;
   margin-top: 6px;
@@ -2026,7 +1952,7 @@
 }
 
 .cc-select__option:hover:not(:disabled),
-.cc-select__option:focus-visible {
+.cc-select__option:focus {
   background: var(--cc-select-option-hover-color);
   outline: none;
 }
@@ -2034,13 +1960,13 @@
 .cc-select__option[data-selected="true"] {
   background: var(--cc-select-option-selected-color);
   color: var(--cc-select-option-selected-text-color);
-  font-weight: 700;
+  font-weight: 400;
 }
 
 .cc-field[data-readonly="true"] .cc-select__option:hover:not(:disabled),
-.cc-field[data-readonly="true"] .cc-select__option:focus-visible,
+.cc-field[data-readonly="true"] .cc-select__option:focus,
 .cc-select[data-readonly="true"] .cc-select__option:hover:not(:disabled),
-.cc-select[data-readonly="true"] .cc-select__option:focus-visible {
+.cc-select[data-readonly="true"] .cc-select__option:focus {
   background: transparent;
   color: inherit;
   cursor: default;
@@ -2108,6 +2034,8 @@
   box-shadow: var(--cc-select-menu-shadow);
   color: var(--cc-select-menu-text-color);
   display: grid;
+  font-size: inherit;
+  font-weight: 400;
   gap: 6px;
   left: 0;
   margin-top: 6px;
@@ -2152,7 +2080,6 @@
   overflow: auto;
   overscroll-behavior: contain;
   position: relative;
-  scrollbar-gutter: stable;
 }
 
 .cc-virtual-select__inner {
@@ -2187,7 +2114,7 @@
 }
 
 .cc-virtual-select__option:hover:not(:disabled),
-.cc-virtual-select__option:focus-visible {
+.cc-virtual-select__option:focus {
   background: var(--cc-select-option-hover-color);
   outline: none;
 }
@@ -2195,13 +2122,12 @@
 .cc-virtual-select__option[data-selected="true"] {
   background: var(--cc-select-option-selected-color);
   color: var(--cc-select-option-selected-text-color);
-  font-weight: 700;
+  font-weight: 400;
 }
 
 .cc-virtual-select[data-readonly="true"]
   .cc-virtual-select__option:hover:not(:disabled),
-.cc-virtual-select[data-readonly="true"]
-  .cc-virtual-select__option:focus-visible {
+.cc-virtual-select[data-readonly="true"] .cc-virtual-select__option:focus {
   background: transparent;
   color: inherit;
   cursor: default;
@@ -2216,7 +2142,8 @@
   align-items: center;
   color: var(--cc-virtual-select-empty-color);
   display: flex;
-  font-size: 13px;
+  font-size: inherit;
+  font-weight: 400;
   justify-content: center;
   min-height: 92px;
 }
@@ -2304,14 +2231,14 @@
   transform: rotate(45deg) scale(1);
 }
 
-.cc-choice input:focus-visible {
+.cc-choice input:focus {
   border-color: var(--cc-form-color-border-focus);
   box-shadow: var(--cc-form-shadow-focus);
   outline: none;
 }
 
-.cc-choice[data-readonly="true"] input:focus-visible,
-.cc-choice-group[data-readonly="true"] .cc-choice input:focus-visible {
+.cc-choice[data-readonly="true"] input:focus,
+.cc-choice-group[data-readonly="true"] .cc-choice input:focus {
   border-color: var(--cc-form-readonly-border-color);
   box-shadow: none;
 }
@@ -2385,13 +2312,13 @@
   transform: translateX(20px);
 }
 
-.cc-switch input:focus-visible + .cc-switch__track {
+.cc-switch input:focus + .cc-switch__track {
   box-shadow: var(--cc-form-shadow-focus);
 }
 
 .cc-switch-field[data-readonly="true"]
   .cc-switch
-  input:focus-visible
+  input:focus
   + .cc-switch__track {
   box-shadow: inset 0 0 0 1px var(--cc-form-readonly-border-color);
 }
@@ -2410,11 +2337,7 @@
 }
 
 .cc-switch-field[data-readonly="true"] input:checked + .cc-switch__track {
-  background: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 24%,
-    var(--cc-form-readonly-background)
-  );
+  background: var(--cc-form-readonly-background);
 }
 
 .cc-switch-field__label {
@@ -2453,6 +2376,11 @@
   color: var(--cc-rating-star-active-color);
 }
 
+.cc-rating__star:focus {
+  box-shadow: none;
+  outline: none;
+}
+
 .cc-rating__star:focus-visible {
   border-radius: var(--cc-radius-sm);
   box-shadow: var(--cc-form-shadow-focus);
@@ -2555,11 +2483,7 @@
 }
 
 .cc-gradient-text {
-  -webkit-background-clip: text;
-  background-clip: text;
-  background-image: var(--cc-gradient-text-background);
-  background-size: var(--cc-gradient-text-background-size);
-  color: transparent;
+  color: var(--cc-form-color-accent);
   display: inline;
   font-family: var(--cc-form-font);
   font-weight: var(--cc-gradient-text-font-weight);
@@ -2568,8 +2492,7 @@
 }
 
 .cc-gradient-text[data-animated="true"] {
-  animation: cc-gradient-text-flow var(--cc-gradient-text-duration)
-    var(--cc-gradient-text-easing) infinite alternate;
+  text-shadow: 0 0 18px rgba(22, 119, 255, 0.18);
 }
 
 .cc-design-effect {
@@ -2588,13 +2511,8 @@
 }
 
 .cc-design-effect[data-interactive="true"]:hover {
-  border-color: color-mix(
-    in srgb,
-    var(--cc-design-effect-color-1) 58%,
-    var(--cc-form-color-border)
-  );
-  box-shadow: 0 22px 64px
-    color-mix(in srgb, var(--cc-design-effect-color-1) 26%, transparent);
+  border-color: var(--cc-design-effect-color-1);
+  box-shadow: 0 22px 64px rgba(22, 119, 255, 0);
   transform: translateY(-1px);
 }
 
@@ -2618,29 +2536,15 @@
 .cc-design-effect--glass,
 .cc-design-effect--frosted {
   background:
-    linear-gradient(
-      135deg,
-      color-mix(in srgb, #fff 72%, transparent),
-      color-mix(in srgb, var(--cc-design-effect-color-2) 10%, transparent)
-    ),
-    color-mix(in srgb, var(--cc-form-color-surface) 68%, transparent);
-  backdrop-filter: blur(calc(10px + 10px * var(--cc-design-effect-alpha)))
-    saturate(1.24);
+    linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(22, 119, 255, 0)),
+    rgba(255, 255, 255, 1);
 }
 
 .cc-design-effect--glass .cc-design-effect__overlay,
 .cc-design-effect--frosted .cc-design-effect__overlay {
   background:
-    radial-gradient(
-      circle at 18% 12%,
-      color-mix(in srgb, #fff 54%, transparent),
-      transparent 26%
-    ),
-    linear-gradient(
-      135deg,
-      color-mix(in srgb, #fff 28%, transparent),
-      transparent 42%
-    );
+    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 1), transparent 26%),
+    linear-gradient(135deg, rgba(255, 255, 255, 0), transparent 42%);
   opacity: var(--cc-design-effect-alpha);
 }
 
@@ -2658,73 +2562,38 @@
 .cc-design-effect--aurora .cc-design-effect__overlay,
 .cc-design-effect--mesh .cc-design-effect__overlay {
   background:
-    radial-gradient(
-      circle at 18% 22%,
-      color-mix(in srgb, var(--cc-design-effect-color-1) 64%, transparent),
-      transparent 28%
-    ),
-    radial-gradient(
-      circle at 82% 18%,
-      color-mix(in srgb, var(--cc-design-effect-color-2) 58%, transparent),
-      transparent 30%
-    ),
-    radial-gradient(
-      circle at 48% 86%,
-      color-mix(in srgb, var(--cc-design-effect-color-3) 54%, transparent),
-      transparent 34%
-    );
+    radial-gradient(circle at 18% 22%, rgba(22, 119, 255, 1), transparent 28%),
+    radial-gradient(circle at 82% 18%, rgba(22, 119, 255, 1), transparent 30%),
+    radial-gradient(circle at 48% 86%, rgba(22, 119, 255, 1), transparent 34%);
   filter: blur(8px);
   opacity: var(--cc-design-effect-alpha);
 }
 
 .cc-design-effect--aurora,
 .cc-design-effect--mesh {
-  background: color-mix(
-    in srgb,
-    var(--cc-form-color-surface) 78%,
-    var(--cc-design-effect-color-1)
-  );
+  background: var(--cc-form-color-surface);
 }
 
 .cc-design-effect--spotlight .cc-design-effect__overlay {
   background:
-    radial-gradient(
-      circle at 50% 0%,
-      color-mix(in srgb, var(--cc-design-effect-color-1) 42%, transparent),
-      transparent 42%
-    ),
-    linear-gradient(
-      180deg,
-      color-mix(in srgb, #fff 16%, transparent),
-      transparent
-    );
+    radial-gradient(circle at 50% 0%, rgba(22, 119, 255, 0), transparent 42%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0), transparent);
   opacity: var(--cc-design-effect-alpha);
 }
 
 .cc-design-effect--border-glow {
-  border-color: color-mix(
-    in srgb,
-    var(--cc-design-effect-color-1) 72%,
-    var(--cc-form-color-border)
-  );
+  border-color: var(--cc-design-effect-color-1);
   box-shadow:
-    inset 0 0 0 1px color-mix(in srgb, #fff 42%, transparent),
-    0 0 0 1px
-      color-mix(in srgb, var(--cc-design-effect-color-2) 26%, transparent),
-    0 18px 50px
-      color-mix(in srgb, var(--cc-design-effect-color-1) 24%, transparent);
+    inset 0 0 0 1px rgba(255, 255, 255, 0),
+    0 0 0 1px rgba(22, 119, 255, 0),
+    0 18px 50px rgba(22, 119, 255, 0);
 }
 
 .cc-design-effect--neon {
-  background: color-mix(in srgb, #17191f 88%, var(--cc-design-effect-color-1));
-  border-color: color-mix(
-    in srgb,
-    var(--cc-design-effect-color-2) 68%,
-    transparent
-  );
+  background: #17191f;
+  border-color: rgba(22, 119, 255, 1);
   color: #fff;
-  text-shadow: 0 0 18px
-    color-mix(in srgb, var(--cc-design-effect-color-2) 62%, transparent);
+  text-shadow: 0 0 18px rgba(22, 119, 255, 1);
 }
 
 .cc-design-effect--noise::after,
@@ -2741,7 +2610,7 @@
 .cc-design-effect--noise::after {
   background-image: repeating-radial-gradient(
     circle at 0 0,
-    color-mix(in srgb, var(--cc-design-effect-color-1) 22%, transparent) 0 1px,
+    rgba(22, 119, 255, 0) 0 1px,
     transparent 1px 4px
   );
   opacity: calc(var(--cc-design-effect-alpha) * 0.32);
@@ -2749,15 +2618,8 @@
 
 .cc-design-effect--soft-grid::after {
   background-image:
-    linear-gradient(
-      color-mix(in srgb, var(--cc-design-effect-color-1) 18%, transparent) 1px,
-      transparent 1px
-    ),
-    linear-gradient(
-      90deg,
-      color-mix(in srgb, var(--cc-design-effect-color-1) 18%, transparent) 1px,
-      transparent 1px
-    );
+    linear-gradient(rgba(22, 119, 255, 0) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(22, 119, 255, 0) 1px, transparent 1px);
   background-size: 22px 22px;
   opacity: var(--cc-design-effect-alpha);
 }
@@ -2765,7 +2627,7 @@
 .cc-design-effect--scanline::after {
   background: repeating-linear-gradient(
     180deg,
-    color-mix(in srgb, var(--cc-design-effect-color-1) 20%, transparent) 0 1px,
+    rgba(22, 119, 255, 0) 0 1px,
     transparent 1px 6px
   );
   opacity: calc(var(--cc-design-effect-alpha) * 0.52);
@@ -2786,7 +2648,7 @@
   background: linear-gradient(
     110deg,
     transparent 20%,
-    color-mix(in srgb, #fff 34%, transparent) 42%,
+    rgba(255, 255, 255, 0) 42%,
     transparent 64%
   );
   mix-blend-mode: screen;
@@ -2912,11 +2774,6 @@
   width: 100%;
 }
 
-.cc-video-player__video::-webkit-media-controls,
-.cc-video-player__video::-webkit-media-controls-start-playback-button {
-  display: none !important;
-}
-
 .cc-video-player__controls {
   align-items: center;
   background: var(--cc-video-player-controls-background);
@@ -3027,10 +2884,18 @@
   transform: translateZ(0);
 }
 
+.cc-video-detail-transition__item::before {
+  content: "";
+  display: block;
+  padding-top: 177.7778%;
+}
+
 .cc-video-detail-transition__item img {
-  aspect-ratio: 9 / 16;
   display: block;
+  height: 100%;
+  inset: 0;
   object-fit: cover;
+  position: absolute;
   width: 100%;
 }
 
@@ -3105,14 +2970,24 @@
 .cc-video-detail-transition__player {
   background: #000;
   display: block;
+  overflow: hidden;
+  position: relative;
   width: 100%;
 }
 
+.cc-video-detail-transition__player::before {
+  content: "";
+  display: block;
+  padding-top: 56.25%;
+}
+
 .cc-video-detail-transition__video {
-  aspect-ratio: 16 / 9;
   background: #000;
   display: block;
+  height: 100%;
+  inset: 0;
   object-fit: cover;
+  position: absolute;
   width: 100%;
 }
 
@@ -3191,9 +3066,8 @@
 
 .cc-file-preview__badge {
   align-items: center;
-  background: color-mix(in srgb, var(--cc-form-color-accent) 14%, transparent);
-  border: 1px solid
-    color-mix(in srgb, var(--cc-form-color-accent) 24%, transparent);
+  background: rgba(22, 119, 255, 0);
+  border: 1px solid rgba(22, 119, 255, 0);
   border-radius: var(--cc-radius-sm);
   color: var(--cc-form-color-accent);
   display: inline-flex;
@@ -3226,9 +3100,8 @@
 
 .cc-file-preview__actions a,
 .cc-file-preview__actions button {
-  background: color-mix(in srgb, var(--cc-form-color-accent) 10%, transparent);
-  border: 1px solid
-    color-mix(in srgb, var(--cc-form-color-accent) 18%, transparent);
+  background: rgba(22, 119, 255, 0);
+  border: 1px solid rgba(22, 119, 255, 0);
   border-radius: var(--cc-radius-md);
   color: var(--cc-form-color-accent);
   cursor: pointer;
@@ -3250,12 +3123,8 @@
 
 .cc-file-preview__actions a:hover,
 .cc-file-preview__actions button:not(:disabled):hover {
-  background: color-mix(in srgb, var(--cc-form-color-accent) 16%, transparent);
-  border-color: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 32%,
-    transparent
-  );
+  background: rgba(22, 119, 255, 0);
+  border-color: rgba(22, 119, 255, 0);
 }
 
 .cc-file-preview__pager > span {
@@ -3307,11 +3176,7 @@
 }
 
 .cc-file-preview__local-html th {
-  background: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 10%,
-    var(--cc-form-color-surface)
-  );
+  background: var(--cc-form-color-surface);
   font-weight: 700;
 }
 
@@ -3326,11 +3191,7 @@
 
 .cc-file-preview__skeleton {
   align-items: end;
-  background: linear-gradient(
-    180deg,
-    transparent,
-    color-mix(in srgb, var(--cc-form-color-surface) 92%, transparent) 62%
-  );
+  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 1) 62%);
   display: flex;
   inset: 0;
   justify-content: center;
@@ -3351,11 +3212,10 @@
 }
 
 .cc-file-preview__loading {
-  background: color-mix(in srgb, var(--cc-form-color-surface) 92%, transparent);
+  background: rgba(255, 255, 255, 1);
   border: 1px solid var(--cc-form-color-border);
   border-radius: var(--cc-radius-pill);
-  box-shadow: 0 12px 28px
-    color-mix(in srgb, var(--cc-form-color-accent) 14%, transparent);
+  box-shadow: 0 12px 28px rgba(22, 119, 255, 0);
   margin-bottom: 18px;
   padding: 10px 16px;
 }
@@ -3405,7 +3265,7 @@
 
 .cc-canvas-editor__toolbar {
   align-items: center;
-  background: color-mix(in srgb, var(--cc-form-color-surface) 92%, transparent);
+  background: rgba(255, 255, 255, 1);
   border-bottom: 1px solid var(--cc-form-color-divider);
   display: flex;
   flex-wrap: wrap;
@@ -3468,7 +3328,8 @@
   min-height: 480px;
   overflow: auto;
   padding: 34px 42px;
-  width: min(100% - 32px, 860px);
+  max-width: 860px;
+  width: calc(100% - 32px);
 }
 
 .cc-canvas-editor__doc-head {
@@ -3696,22 +3557,18 @@
 
 .cc-novel-reader {
   box-sizing: border-box;
-  clip-path: inset(0);
   color: var(--cc-business-text-color);
-  contain: layout paint;
   display: grid;
   grid-template-rows: minmax(0, 1fr);
   height: var(--cc-novel-reader-height, 100%);
   max-width: 100%;
   min-height: var(--cc-novel-reader-min-height, 520px);
   overflow: hidden;
-  overflow: clip;
   overflow-x: hidden;
   position: relative;
   overscroll-behavior: contain;
   touch-action: none;
   user-select: none;
-  -webkit-user-select: none;
   width: 100%;
 }
 
@@ -3727,17 +3584,13 @@
     var(--cc-business-surface);
   border: 1px solid var(--cc-business-border-color);
   border-radius: var(--cc-radius-lg);
-  box-shadow: 0 18px 42px
-    color-mix(in srgb, var(--cc-form-color-accent) 14%, transparent);
-  clip-path: inset(0 round var(--cc-radius-lg));
-  contain: layout paint;
+  box-shadow: 0 18px 42px rgba(22, 119, 255, 0);
   display: grid;
   height: 100%;
   max-width: 100%;
   min-height: 0;
   min-width: 0;
   overflow: hidden;
-  overflow: clip;
   overflow-x: hidden;
   perspective: 1900px;
   perspective-origin: 50% 48%;
@@ -3864,7 +3717,7 @@
   filter: drop-shadow(-28px 12px 32px rgba(0, 0, 0, 0.18));
   inset: 0;
   overflow: hidden;
-  overflow: clip;
+  overflow: hidden;
   position: absolute;
   transform-style: preserve-3d;
   will-change: transform, opacity, filter, clip-path, border-radius;
@@ -4329,23 +4182,13 @@
 .cc-novel-reader[data-dragging="false"] .cc-novel-reader__content,
 .cc-novel-reader[data-dragging="false"] .cc-novel-reader__header {
   user-select: none;
-  -webkit-user-select: none;
 }
 
 .cc-novel-reader button,
 .cc-comic-reader button,
 .cc-live-room button {
-  background: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 14%,
-    var(--cc-form-color-surface)
-  );
-  border: 1px solid
-    color-mix(
-      in srgb,
-      var(--cc-form-color-accent) 26%,
-      var(--cc-business-border-color)
-    );
+  background: var(--cc-form-color-surface);
+  border: 1px solid var(--cc-business-border-color);
   border-radius: var(--cc-radius-md);
   color: var(--cc-business-text-color);
   cursor: pointer;
@@ -4370,18 +4213,13 @@
 }
 
 .cc-novel-reader__actions button {
-  backdrop-filter: blur(12px);
   pointer-events: auto;
 }
 
 .cc-novel-reader button:hover:not(:disabled),
 .cc-comic-reader button:hover:not(:disabled),
 .cc-live-room button:hover {
-  background: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 22%,
-    var(--cc-form-color-surface)
-  );
+  background: var(--cc-form-color-surface);
   transform: translateY(-1px);
 }
 
@@ -4426,13 +4264,8 @@
 }
 
 .cc-comic-reader__page[data-active="true"] {
-  border-color: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 48%,
-    var(--cc-business-border-color)
-  );
-  box-shadow: 0 10px 30px
-    color-mix(in srgb, var(--cc-form-color-accent) 14%, transparent);
+  border-color: var(--cc-business-border-color);
+  box-shadow: 0 10px 30px rgba(22, 119, 255, 0);
 }
 
 .cc-comic-reader__page img {
@@ -4531,7 +4364,6 @@
 
 .cc-live-room__host {
   align-items: center;
-  backdrop-filter: blur(12px);
   background: rgba(0, 0, 0, 0.34);
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: var(--cc-radius-pill);
@@ -4591,7 +4423,6 @@
 .cc-live-room__actions button,
 .cc-live-room__input button {
   align-items: center;
-  backdrop-filter: blur(12px);
   background: rgba(0, 0, 0, 0.34);
   border-color: rgba(255, 255, 255, 0.18);
   border-radius: var(--cc-radius-pill);
@@ -4641,7 +4472,8 @@
   display: grid;
   gap: 10px;
   left: 16px;
-  max-width: min(420px, calc(100% - 104px));
+  max-width: 420px;
+  width: calc(100% - 104px);
   width: 48%;
 }
 
@@ -5249,9 +5081,8 @@
   user-select: none;
 }
 
-.cc-signature__canvas:focus-visible {
-  outline: 2px solid
-    color-mix(in srgb, var(--cc-form-color-accent) 45%, transparent);
+.cc-signature__canvas:focus {
+  outline: 2px solid rgba(22, 119, 255, 0);
   outline-offset: 2px;
 }
 
@@ -5300,11 +5131,7 @@
 
 .cc-signature__action:hover:not(:disabled) {
   background: var(--cc-signature-action-hover-bg);
-  border-color: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 42%,
-    var(--cc-signature-border-color)
-  );
+  border-color: var(--cc-signature-border-color);
   transform: translateY(-1px);
 }
 
@@ -5473,20 +5300,13 @@
 
 .cc-draggable[data-dragging="true"] {
   cursor: grabbing;
-  filter: drop-shadow(
-    0 12px 26px color-mix(in srgb, var(--cc-form-color-accent) 18%, transparent)
-  );
+  filter: drop-shadow(0 12px 26px rgba(22, 119, 255, 0.22));
   transition: filter var(--cc-animation-duration) var(--cc-animation-easing);
 }
 
 .cc-draggable[data-over-target="true"] {
-  filter: drop-shadow(
-      0 0 0 color-mix(in srgb, var(--cc-form-color-accent) 0%, transparent)
-    )
-    drop-shadow(
-      0 14px 30px
-        color-mix(in srgb, var(--cc-form-color-accent) 28%, transparent)
-    );
+  filter: drop-shadow(0 0 10px rgba(22, 119, 255, 0.18))
+    drop-shadow(0 14px 30px rgba(22, 119, 255, 0.24));
 }
 
 .cc-draggable[data-disabled="true"] {
@@ -5589,6 +5409,8 @@
   border-radius: var(--cc-radius-lg);
   color: var(--cc-form-color-text);
   display: grid;
+  font-size: inherit;
+  font-weight: 400;
   grid-auto-columns: 1fr;
   grid-auto-flow: column;
   max-width: 100%;
@@ -5628,7 +5450,7 @@
 
 .cc-picker__option[data-selected="true"] {
   color: var(--cc-picker-active-color);
-  font-weight: 760;
+  font-weight: 400;
 }
 
 .cc-picker__option:not([data-selected="true"]) {
@@ -5647,7 +5469,7 @@
   background: linear-gradient(
     180deg,
     var(--cc-picker-mask-background),
-    color-mix(in srgb, var(--cc-picker-mask-background) 72%, transparent),
+    rgba(255, 255, 255, 1),
     transparent
   );
   height: calc(var(--cc-picker-option-height) * 2);
@@ -5658,7 +5480,7 @@
   background: linear-gradient(
     0deg,
     var(--cc-picker-mask-background),
-    color-mix(in srgb, var(--cc-picker-mask-background) 72%, transparent),
+    rgba(255, 255, 255, 1),
     transparent
   );
   bottom: 0;
@@ -5727,6 +5549,10 @@
   cursor: pointer;
 }
 
+.cc-marquee__item[data-clickable="true"]:focus {
+  outline: none;
+}
+
 .cc-marquee__item[data-clickable="true"]:focus-visible {
   border-radius: var(--cc-radius-sm);
   outline: 2px solid var(--cc-marquee-focus-outline-color);
@@ -6129,11 +5955,7 @@
 }
 
 .cc-tilt-card[data-active="true"] .cc-tilt-card__surface {
-  border-color: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 42%,
-    var(--cc-tilt-card-border-color)
-  );
+  border-color: var(--cc-tilt-card-border-color);
   box-shadow: var(--cc-tilt-card-shadow-active);
 }
 
@@ -6191,7 +6013,7 @@
   box-shadow:
     inset 22px 22px 46px var(--cc-orbital-sphere-shadow-color),
     inset -18px -18px 42px rgba(255, 255, 255, 0.46),
-    0 22px 70px color-mix(in srgb, var(--cc-form-color-text) 12%, transparent);
+    0 22px 70px rgba(15, 23, 42, 0);
   inset: 0;
   overflow: hidden;
   pointer-events: none;
@@ -6240,7 +6062,7 @@
   border-radius: var(--cc-radius-md);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.62),
-    0 12px 30px color-mix(in srgb, var(--cc-form-color-text) 14%, transparent);
+    0 12px 30px rgba(15, 23, 42, 0);
   color: var(--cc-form-color-text);
   cursor: pointer;
   display: inline-flex;
@@ -6290,7 +6112,7 @@
   border-color: var(--cc-form-color-accent);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.72),
-    0 16px 38px color-mix(in srgb, var(--cc-form-color-accent) 20%, transparent);
+    0 16px 38px rgba(22, 119, 255, 0);
   outline: none;
 }
 
@@ -6382,9 +6204,15 @@
   color: var(--cc-menu-text-color);
 }
 
+.cc-menu__collapse:focus,
+.cc-menu__button:focus {
+  box-shadow: none;
+  outline: none;
+}
+
 .cc-menu__collapse:focus-visible,
 .cc-menu__button:focus-visible {
-  box-shadow: var(--cc-form-shadow-focus);
+  box-shadow: var(--cc-menu-focus-shadow);
 }
 
 .cc-menu__list {
@@ -6396,13 +6224,11 @@
   overflow-x: hidden;
   overflow-y: auto;
   padding: 0;
-  scrollbar-width: thin;
   width: 100%;
 }
 
 .cc-menu__list--child {
-  border-left: 1px solid
-    color-mix(in srgb, var(--cc-menu-border-color) 72%, transparent);
+  border-left: 1px solid rgba(100, 116, 139, 1);
   gap: 2px;
   margin-left: calc(var(--cc-menu-icon-size) / 2);
   margin-top: 0;
@@ -6474,7 +6300,8 @@
   width: var(--cc-menu-icon-size);
 }
 
-.cc-menu__icon :where(svg, img) {
+.cc-menu__icon svg,
+.cc-menu__icon img {
   border-radius: inherit;
   display: block;
   height: var(--cc-menu-icon-inner-size);
@@ -6518,11 +6345,7 @@
 
 .cc-menu__item[data-level="2"] > .cc-menu__button,
 .cc-menu__item[data-level="3"] > .cc-menu__button {
-  color: color-mix(
-    in srgb,
-    var(--cc-menu-item-muted-color) 88%,
-    var(--cc-menu-item-color)
-  );
+  color: var(--cc-menu-item-muted-color);
   font-size: 12.5px;
   min-height: 34px;
 }
@@ -6561,7 +6384,7 @@
 
 @media (max-width: 640px) {
   .cc-menu {
-    --cc-menu-width: min(100%, calc(100vw - 24px));
+    --cc-menu-width: calc(100vw - 24px);
     --cc-menu-collapsed-width: 56px;
     --cc-menu-collapsed-item-size: 44px;
     --cc-menu-icon-size: 24px;
@@ -6573,11 +6396,10 @@
 
   .cc-menu__list {
     gap: 3px;
-    max-height: min(70dvh, 520px);
+    max-height: 70vh;
     overflow-y: auto;
     overscroll-behavior: contain;
     padding-right: 2px;
-    scrollbar-width: thin;
   }
 
   .cc-menu__button {
@@ -6639,34 +6461,81 @@
   overflow: hidden;
 }
 
-.cc-code-preview {
-  color: var(--cc-code-preview-color);
-  font-family: var(--cc-form-font);
-  position: relative;
+.cc-width-transition {
+  overflow: hidden;
+  transition:
+    width var(--cc-width-transition-duration, 220ms)
+      var(--cc-width-transition-easing, var(--cc-animation-easing)),
+    grid-template-columns var(--cc-width-transition-duration, 220ms)
+      var(--cc-width-transition-easing, var(--cc-animation-easing)),
+    transform var(--cc-width-transition-duration, 220ms)
+      var(--cc-width-transition-easing, var(--cc-animation-easing)),
+    opacity var(--cc-width-transition-duration, 220ms)
+      var(--cc-width-transition-easing, var(--cc-animation-easing));
 }
 
-.cc-code-preview__bar {
-  align-items: center;
-  background: var(--cc-code-preview-bar-background);
-  border: 1px solid var(--cc-code-preview-border-color);
-  border-radius: var(--cc-radius-lg);
-  box-shadow: inset 0 1px 0
-    color-mix(in srgb, var(--cc-code-preview-background) 84%, transparent);
-  display: flex;
-  gap: 12px;
-  justify-content: space-between;
-  min-height: 44px;
-  padding: 8px 10px 8px 14px;
+.cc-width-transition[data-mode="auto"] {
+  width: 0;
 }
 
-.cc-code-preview__meta {
-  align-items: center;
-  display: inline-flex;
-  gap: 8px;
-  min-width: 0;
+.cc-width-transition[data-mode="auto"][data-expanded="true"] {
+  width: var(--cc-width-transition-width, auto);
 }
 
-.cc-code-preview__title {
+.cc-width-transition[data-mode="clip"] {
+  display: grid;
+  grid-template-columns: 0fr;
+}
+
+.cc-width-transition[data-mode="clip"][data-expanded="true"] {
+  grid-template-columns: 1fr;
+}
+
+.cc-width-transition[data-mode="fade"] {
+  opacity: 0;
+  transform: scaleX(0.96);
+  transform-origin: left;
+  width: 0;
+}
+
+.cc-width-transition[data-mode="fade"][data-expanded="true"] {
+  opacity: 1;
+  transform: scaleX(1);
+  width: var(--cc-width-transition-width, auto);
+}
+
+.cc-width-transition__content {
+  min-width: 0;
+  overflow: hidden;
+}
+
+.cc-code-preview {
+  color: var(--cc-code-preview-color);
+  font-family: var(--cc-form-font);
+  position: relative;
+}
+
+.cc-code-preview__bar {
+  align-items: center;
+  background: var(--cc-code-preview-bar-background);
+  border: 1px solid var(--cc-code-preview-border-color);
+  border-radius: var(--cc-radius-lg);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1);
+  display: flex;
+  gap: 12px;
+  justify-content: space-between;
+  min-height: 44px;
+  padding: 8px 10px 8px 14px;
+}
+
+.cc-code-preview__meta {
+  align-items: center;
+  display: inline-flex;
+  gap: 8px;
+  min-width: 0;
+}
+
+.cc-code-preview__title {
   font-size: 13px;
   font-weight: 780;
   overflow: hidden;
@@ -6675,11 +6544,7 @@
 }
 
 .cc-code-preview__lang {
-  background: color-mix(
-    in srgb,
-    var(--cc-code-preview-panel-background) 78%,
-    transparent
-  );
+  background: rgba(255, 255, 255, 1);
   border: 1px solid var(--cc-code-preview-border-color);
   border-radius: 999px;
   color: var(--cc-code-preview-muted-color);
@@ -6717,11 +6582,7 @@
 }
 
 .cc-code-preview__actions button:hover {
-  background: color-mix(
-    in srgb,
-    var(--cc-code-preview-accent-color) 7%,
-    var(--cc-code-preview-background)
-  );
+  background: var(--cc-code-preview-background);
   border-color: var(--cc-code-preview-accent-color);
   color: var(--cc-code-preview-accent-color);
 }
@@ -6730,35 +6591,34 @@
   transform: translateY(1px);
 }
 
+.cc-code-preview__actions button:focus {
+  outline: none;
+}
+
 .cc-code-preview__actions button:focus-visible {
-  outline: 2px solid
-    color-mix(in srgb, var(--cc-code-preview-accent-color) 28%, transparent);
+  outline: 2px solid rgba(22, 119, 255, 0);
   outline-offset: 2px;
 }
 
 .cc-code-preview__panel {
   background:
-    linear-gradient(
-      180deg,
-      color-mix(in srgb, var(--cc-code-preview-background) 42%, transparent),
-      transparent 36%
-    ),
+    linear-gradient(180deg, rgba(255, 255, 255, 0), transparent 36%),
     var(--cc-code-preview-panel-background);
   border: 1px solid var(--cc-code-preview-border-color);
   border-radius: var(--cc-radius-lg);
   box-shadow:
-    inset 0 1px 0
-      color-mix(in srgb, var(--cc-code-preview-background) 78%, transparent),
+    inset 0 1px 0 rgba(255, 255, 255, 1),
     var(--cc-code-preview-shadow);
   left: 0;
   margin: 0;
-  max-height: min(420px, calc(100vh - 48px));
+  max-height: calc(100vh - 48px);
   overflow: auto;
   padding: 0;
   position: absolute;
   right: auto;
   top: calc(100% + 10px);
-  width: min(720px, calc(100vw - 48px));
+  max-width: 720px;
+  width: calc(100vw - 48px);
   z-index: 40;
 }
 
@@ -6776,7 +6636,7 @@
 .cc-code-preview[data-strategy="fixed"] .cc-code-preview__panel,
 .cc-code-preview__panel[data-strategy="fixed"] {
   bottom: auto;
-  max-height: min(420px, calc(100dvh - 20px));
+  max-height: calc(100vh - 20px);
   position: fixed;
   right: auto;
   z-index: 1000;
@@ -6883,6 +6743,10 @@
   cursor: pointer;
 }
 
+.cc-ellipsis[data-expandable="true"]:focus {
+  outline: none;
+}
+
 .cc-ellipsis[data-expandable="true"]:focus-visible {
   border-radius: var(--cc-radius-sm);
   outline: 2px solid var(--cc-form-color-accent);
@@ -6890,10 +6754,7 @@
 }
 
 .cc-ellipsis[data-lines="multiple"] .cc-ellipsis__content {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: var(--cc-ellipsis-lines, 1);
-  line-clamp: var(--cc-ellipsis-lines, 1);
+  max-height: calc(var(--cc-ellipsis-lines, 1) * 1.5em);
 }
 
 .cc-ellipsis[data-lines="single"] .cc-ellipsis__content {
@@ -6905,10 +6766,8 @@
 .cc-ellipsis[data-expanded="true"] .cc-ellipsis__content {
   display: block;
   max-height: var(--cc-ellipsis-expanded-max-height, 999px);
-  text-overflow: clip;
+  text-overflow: hidden;
   white-space: normal;
-  -webkit-line-clamp: unset;
-  line-clamp: unset;
 }
 
 .cc-virtual-list {
@@ -6924,7 +6783,6 @@
   overflow: auto;
   overscroll-behavior: contain;
   position: relative;
-  scrollbar-gutter: stable;
 }
 
 .cc-virtual-list__content {
@@ -6944,7 +6802,7 @@
   height: 72px;
   justify-content: center;
   left: 0;
-  opacity: clamp(0, var(--cc-virtual-list-pull-down-progress, 0), 1);
+  opacity: var(--cc-virtual-list-pull-down-progress, 0);
   pointer-events: none;
   position: absolute;
   right: 0;
@@ -6971,12 +6829,11 @@
       rgba(255, 255, 255, 0.92),
       transparent 48%
     ),
-    color-mix(in srgb, var(--cc-form-color-accent) 16%, transparent);
-  border: 1px solid
-    color-mix(in srgb, var(--cc-form-color-accent) 24%, transparent);
+    rgba(22, 119, 255, 0);
+  border: 1px solid rgba(22, 119, 255, 0);
   border-radius: 999px;
   box-shadow:
-    0 8px 22px color-mix(in srgb, var(--cc-form-color-accent) 18%, transparent),
+    0 8px 22px rgba(22, 119, 255, 0),
     inset 0 0 0 1px rgba(255, 255, 255, 0.42);
   color: var(--cc-form-color-accent);
   display: inline-flex;
@@ -7038,10 +6895,10 @@
       rgba(255, 255, 255, 0.94),
       transparent 48%
     ),
-    color-mix(in srgb, #24d18b 20%, transparent);
-  border-color: color-mix(in srgb, #24d18b 38%, transparent);
+    rgba(36, 209, 139, 0);
+  border-color: rgba(36, 209, 139, 0);
   box-shadow:
-    0 10px 24px color-mix(in srgb, #24d18b 25%, transparent),
+    0 10px 24px rgba(36, 209, 139, 0),
     inset 0 0 0 1px rgba(255, 255, 255, 0.52);
   color: #12b76a;
   transform: rotate(360deg) scale(1.08);
@@ -7060,14 +6917,12 @@
   0%,
   100% {
     box-shadow:
-      0 8px 22px
-        color-mix(in srgb, var(--cc-form-color-accent) 18%, transparent),
+      0 8px 22px rgba(22, 119, 255, 0),
       inset 0 0 0 1px rgba(255, 255, 255, 0.42);
   }
   50% {
     box-shadow:
-      0 12px 30px
-        color-mix(in srgb, var(--cc-form-color-accent) 32%, transparent),
+      0 12px 30px rgba(22, 119, 255, 0),
       inset 0 0 0 1px rgba(255, 255, 255, 0.62);
   }
 }
@@ -7224,8 +7079,7 @@
 .cc-swiper__arrow {
   align-items: center;
   background: var(--cc-swiper-arrow-background);
-  border: 1px solid
-    color-mix(in srgb, var(--cc-form-color-border) 70%, transparent);
+  border: 1px solid rgba(100, 116, 139, 1);
   border-radius: var(--cc-radius-pill);
   color: var(--cc-form-color-text);
   cursor: pointer;
@@ -7283,7 +7137,7 @@
 }
 
 .cc-swiper__dot {
-  background: color-mix(in srgb, var(--cc-swiper-dot-color) 26%, white);
+  background: white;
   border: 0;
   border-radius: var(--cc-radius-pill);
   cursor: pointer;
@@ -7325,7 +7179,6 @@
   overflow: auto;
   overscroll-behavior: contain;
   position: relative;
-  scrollbar-gutter: stable;
 }
 
 .cc-masonry-virtual-list__inner {
@@ -7354,7 +7207,6 @@
   overflow-anchor: none;
   overscroll-behavior: contain;
   position: relative;
-  scrollbar-gutter: stable;
 }
 
 .cc-chat-virtual-list__inner {
@@ -7373,9 +7225,8 @@
 
 .cc-loading.cc-chat-virtual-list__top-loading {
   align-items: center;
-  background: color-mix(in srgb, var(--cc-form-color-surface) 92%, transparent);
-  border: 1px solid
-    color-mix(in srgb, var(--cc-form-color-border) 72%, transparent);
+  background: rgba(255, 255, 255, 1);
+  border: 1px solid rgba(100, 116, 139, 1);
   border-radius: 999px;
   box-shadow: var(--cc-shadow-sm);
   color: var(--cc-form-color-accent);
@@ -7405,9 +7256,7 @@
 }
 
 .cc-loading.cc-chat-virtual-list__top-loading .cc-loading__bolt {
-  filter: drop-shadow(
-    0 4px 8px color-mix(in srgb, var(--cc-form-color-accent) 24%, transparent)
-  );
+  filter: drop-shadow(0 4px 8px rgba(22, 119, 255, 0));
   height: 16px;
   width: 16px;
 }
@@ -7491,27 +7340,14 @@
 }
 
 .cc-button--soft {
-  background: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 12%,
-    var(--cc-form-color-surface)
-  );
-  border-color: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 20%,
-    var(--cc-form-color-border)
-  );
+  background: var(--cc-form-color-surface);
+  border-color: var(--cc-form-color-border);
   color: var(--cc-form-color-accent);
 }
 
 .cc-button--soft:hover:not(:disabled) {
-  background: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 18%,
-    var(--cc-form-color-surface)
-  );
-  box-shadow: 0 10px 24px
-    color-mix(in srgb, var(--cc-form-color-accent) 14%, transparent);
+  background: var(--cc-form-color-surface);
+  box-shadow: 0 10px 24px rgba(22, 119, 255, 0);
 }
 
 .cc-button--shine {
@@ -7552,22 +7388,18 @@
 }
 
 .cc-button--neon {
-  background: color-mix(in srgb, var(--cc-form-color-accent) 18%, transparent);
-  border-color: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 60%,
-    transparent
-  );
+  background: rgba(22, 119, 255, 0);
+  border-color: rgba(22, 119, 255, 1);
   box-shadow:
-    0 0 0 1px color-mix(in srgb, var(--cc-form-color-accent) 28%, transparent),
-    0 0 22px color-mix(in srgb, var(--cc-form-color-accent) 24%, transparent);
+    0 0 0 1px rgba(22, 119, 255, 0),
+    0 0 22px rgba(22, 119, 255, 0);
   color: var(--cc-form-color-accent);
 }
 
 .cc-button--neon:hover:not(:disabled) {
   box-shadow:
-    0 0 0 1px color-mix(in srgb, var(--cc-form-color-accent) 48%, transparent),
-    0 0 34px color-mix(in srgb, var(--cc-form-color-accent) 34%, transparent);
+    0 0 0 1px rgba(22, 119, 255, 0),
+    0 0 34px rgba(22, 119, 255, 0);
 }
 
 .cc-button__spinner {
@@ -7613,9 +7445,7 @@
 .cc-loading__bolt {
   animation: cc-loading-bolt-pulse 880ms var(--cc-animation-easing) infinite;
   display: block;
-  filter: drop-shadow(
-    0 5px 9px color-mix(in srgb, var(--cc-form-color-accent) 26%, transparent)
-  );
+  filter: drop-shadow(0 5px 9px rgba(22, 119, 255, 0));
   height: 22px;
   overflow: visible;
   transform-origin: 50% 56%;
@@ -7624,25 +7454,25 @@
 
 .cc-loading__bolt-shadow {
   animation: cc-loading-bolt-shadow 880ms var(--cc-animation-easing) infinite;
-  fill: color-mix(in srgb, var(--cc-form-color-muted) 18%, transparent);
+  fill: rgba(100, 116, 139, 0);
   transform-origin: 51px 74px;
 }
 
 .cc-loading__bolt-side {
-  fill: color-mix(in srgb, var(--cc-form-color-accent) 52%, #3b1c8f);
+  fill: var(--cc-form-color-accent);
   transform: translate(6px, 5px);
 }
 
 .cc-loading__bolt-face {
-  fill: color-mix(in srgb, var(--cc-form-color-accent) 82%, #ffd84d);
-  stroke: color-mix(in srgb, var(--cc-form-color-accent) 46%, #ffffff);
+  fill: var(--cc-form-color-accent);
+  stroke: #ffffff;
   stroke-linejoin: round;
   stroke-width: 2;
 }
 
 .cc-loading__bolt-highlight {
   animation: cc-loading-bolt-glint 880ms var(--cc-animation-easing) infinite;
-  fill: color-mix(in srgb, #ffffff 44%, transparent);
+  fill: rgba(255, 255, 255, 0);
 }
 
 .cc-empty {
@@ -7662,9 +7492,7 @@
 .cc-empty__illustration {
   animation: cc-empty-bolt-float 2.4s var(--cc-animation-easing) infinite;
   display: block;
-  filter: drop-shadow(
-    0 10px 18px color-mix(in srgb, var(--cc-form-color-accent) 22%, transparent)
-  );
+  filter: drop-shadow(0 10px 18px rgba(22, 119, 255, 0));
   height: 58px;
   overflow: visible;
   transform-origin: 50% 56%;
@@ -7673,32 +7501,20 @@
 
 .cc-empty__illustration-shadow {
   animation: cc-empty-bolt-shadow 2.4s var(--cc-animation-easing) infinite;
-  fill: color-mix(in srgb, var(--cc-form-color-muted) 18%, transparent);
+  fill: rgba(100, 116, 139, 0);
   transform-origin: 51px 74px;
 }
 
 .cc-empty__tray-back {
-  fill: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 10%,
-    var(--cc-form-color-surface)
-  );
-  stroke: color-mix(in srgb, var(--cc-form-color-muted) 28%, transparent);
+  fill: var(--cc-form-color-surface);
+  stroke: rgba(100, 116, 139, 0);
   stroke-linejoin: round;
   stroke-width: 2;
 }
 
 .cc-empty__tray-front {
-  fill: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 16%,
-    var(--cc-form-color-surface)
-  );
-  stroke: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 26%,
-    var(--cc-form-color-muted)
-  );
+  fill: var(--cc-form-color-surface);
+  stroke: var(--cc-form-color-muted);
   stroke-linejoin: round;
   stroke-width: 2;
 }
@@ -7712,37 +7528,37 @@
 
 .cc-empty__tray-lip {
   opacity: 0.58;
-  stroke: color-mix(in srgb, var(--cc-form-color-muted) 44%, transparent);
+  stroke: rgba(100, 116, 139, 0);
   stroke-width: 2;
 }
 
 .cc-empty__tray-glow {
   animation: cc-empty-tray-glow 2.4s var(--cc-animation-easing) infinite;
-  stroke: color-mix(in srgb, var(--cc-form-color-accent) 42%, transparent);
+  stroke: rgba(22, 119, 255, 0);
   stroke-width: 3;
 }
 
 .cc-empty__mini-bolt-side {
-  fill: color-mix(in srgb, var(--cc-form-color-accent) 52%, #3b1c8f);
+  fill: var(--cc-form-color-accent);
   transform: translate(4px, 3px);
 }
 
 .cc-empty__mini-bolt-face {
-  fill: color-mix(in srgb, var(--cc-form-color-accent) 82%, #ffd84d);
-  stroke: color-mix(in srgb, var(--cc-form-color-accent) 46%, #ffffff);
+  fill: var(--cc-form-color-accent);
+  stroke: #ffffff;
   stroke-linejoin: round;
   stroke-width: 2;
 }
 
 .cc-empty__mini-bolt-highlight {
   animation: cc-empty-bolt-glint 2.4s var(--cc-animation-easing) infinite;
-  fill: color-mix(in srgb, #ffffff 42%, transparent);
+  fill: rgba(255, 255, 255, 0);
 }
 
 .cc-empty__spark {
   fill: none;
   opacity: 0.46;
-  stroke: color-mix(in srgb, var(--cc-form-color-accent) 54%, transparent);
+  stroke: rgba(22, 119, 255, 1);
   stroke-linecap: round;
   stroke-linejoin: round;
   stroke-width: 2;
@@ -7880,17 +7696,8 @@
 
 .cc-tag {
   align-items: center;
-  background: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 10%,
-    var(--cc-form-color-surface)
-  );
-  border: 1px solid
-    color-mix(
-      in srgb,
-      var(--cc-form-color-accent) 22%,
-      var(--cc-form-color-border)
-    );
+  background: var(--cc-form-color-surface);
+  border: 1px solid var(--cc-form-color-border);
   border-radius: var(--cc-radius-pill);
   color: var(--cc-form-color-text);
   display: inline-flex;
@@ -7923,7 +7730,7 @@
 }
 
 .cc-tag button:hover {
-  background: color-mix(in srgb, currentColor 12%, transparent);
+  background: rgba(15, 23, 42, 0);
   transform: scale(1.08);
 }
 
@@ -7987,7 +7794,7 @@
 }
 
 .cc-skeleton__mask {
-  background: color-mix(in srgb, var(--cc-form-color-muted) 16%, transparent);
+  background: rgba(100, 116, 139, 0);
   border-radius: var(--cc-skeleton-radius, inherit);
   inset: 0;
   overflow: hidden;
@@ -7999,15 +7806,15 @@
   animation: cc-lazy-image-skeleton 1.2s ease-in-out infinite;
   background: linear-gradient(
     90deg,
-    color-mix(in srgb, var(--cc-form-color-muted) 12%, transparent),
-    color-mix(in srgb, var(--cc-form-color-accent) 14%, transparent),
-    color-mix(in srgb, var(--cc-form-color-muted) 12%, transparent)
+    rgba(100, 116, 139, 0),
+    rgba(22, 119, 255, 0),
+    rgba(100, 116, 139, 0)
   );
   background-size: 220% 100%;
 }
 
 .cc-skeleton[data-overlay="false"] > span {
-  background: color-mix(in srgb, var(--cc-form-color-muted) 16%, transparent);
+  background: rgba(100, 116, 139, 0);
   border-radius: var(--cc-radius-pill);
   display: block;
   height: 14px;
@@ -8018,9 +7825,9 @@
   animation: cc-lazy-image-skeleton 1.2s ease-in-out infinite;
   background: linear-gradient(
     90deg,
-    color-mix(in srgb, var(--cc-form-color-muted) 12%, transparent),
-    color-mix(in srgb, var(--cc-form-color-accent) 14%, transparent),
-    color-mix(in srgb, var(--cc-form-color-muted) 12%, transparent)
+    rgba(100, 116, 139, 0),
+    rgba(22, 119, 255, 0),
+    rgba(100, 116, 139, 0)
   );
   background-size: 220% 100%;
 }
@@ -8229,12 +8036,8 @@
   border: 0;
   border-radius: var(--cc-radius-pill);
   bottom: 28px;
-  box-shadow: var(
-    --cc-backtop-shadow,
-    0 10px 24px color-mix(in srgb, var(--cc-form-color-accent) 24%, transparent)
-  );
+  box-shadow: var(--cc-backtop-shadow, 0 10px 24px rgba(22, 119, 255, 0));
   color: var(--cc-backtop-color, var(--cc-form-color-accent-contrast));
-  contain: layout paint style;
   cursor: pointer;
   display: inline-flex;
   font: inherit;
@@ -8264,20 +8067,18 @@
     --cc-backtop-background-hover,
     var(--cc-form-color-accent-hover)
   );
-  box-shadow: var(
-    --cc-backtop-shadow-hover,
-    0 14px 30px color-mix(in srgb, var(--cc-form-color-accent) 30%, transparent)
-  );
+  box-shadow: var(--cc-backtop-shadow-hover, 0 14px 30px rgba(22, 119, 255, 0));
+}
+
+.cc-backtop:focus {
+  box-shadow: var(--cc-backtop-shadow, 0 10px 24px rgba(22, 119, 255, 0));
+  outline: none;
 }
 
 .cc-backtop:focus-visible {
   box-shadow:
     var(--cc-form-shadow-focus),
-    var(
-      --cc-backtop-shadow-hover,
-      0 14px 30px
-        color-mix(in srgb, var(--cc-form-color-accent) 30%, transparent)
-    );
+    var(--cc-backtop-shadow-hover, 0 14px 30px rgba(22, 119, 255, 0));
 }
 
 .cc-backtop:active {
@@ -8323,7 +8124,6 @@
   overflow-y: auto;
   overscroll-behavior: contain;
   position: sticky;
-  scrollbar-width: thin;
   width: 100%;
 }
 
@@ -8397,46 +8197,25 @@
 }
 
 .cc-table__cell[data-fixed="left"] {
-  border-right-color: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 18%,
-    var(--cc-form-color-divider)
-  );
+  border-right-color: var(--cc-form-color-divider);
 }
 
 .cc-table__cell[data-fixed="right"] {
-  border-left: 1px solid
-    color-mix(
-      in srgb,
-      var(--cc-form-color-accent) 18%,
-      var(--cc-form-color-divider)
-    );
+  border-left: 1px solid var(--cc-form-color-divider);
 }
 
 .cc-table__cell[data-fixed-edge="left"],
 .cc-table__selection[data-fixed-edge="left"] {
   box-shadow:
-    10px 0 18px -14px
-      color-mix(in srgb, var(--cc-form-color-text) 38%, transparent),
-    inset -1px 0 0
-      color-mix(
-        in srgb,
-        var(--cc-form-color-accent) 18%,
-        var(--cc-form-color-divider)
-      );
+    10px 0 18px -14px rgba(15, 23, 42, 0),
+    inset -1px 0 0 var(--cc-form-color-divider);
   z-index: 5;
 }
 
 .cc-table__cell[data-fixed-edge="right"] {
   box-shadow:
-    -10px 0 18px -14px
-      color-mix(in srgb, var(--cc-form-color-text) 38%, transparent),
-    inset 1px 0 0
-      color-mix(
-        in srgb,
-        var(--cc-form-color-accent) 18%,
-        var(--cc-form-color-divider)
-      );
+    -10px 0 18px -14px rgba(15, 23, 42, 0),
+    inset 1px 0 0 var(--cc-form-color-divider);
   z-index: 5;
 }
 
@@ -8468,7 +8247,7 @@
 }
 
 .cc-table__resize:hover::after {
-  background: color-mix(in srgb, var(--cc-form-color-muted) 18%, transparent);
+  background: rgba(100, 116, 139, 0);
 }
 
 .cc-table__checkbox {
@@ -8507,9 +8286,7 @@
 }
 
 .cc-table__column-settings > button {
-  -webkit-backdrop-filter: blur(8px);
-  backdrop-filter: blur(8px);
-  background: color-mix(in srgb, var(--cc-form-color-surface) 86%, transparent);
+  background: rgba(255, 255, 255, 1);
   border: 1px solid var(--cc-form-color-border);
   border-radius: var(--cc-radius-md);
   box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
@@ -8525,17 +8302,14 @@
 }
 
 .cc-table__column-settings > button:hover {
-  border-color: color-mix(
-    in srgb,
-    var(--cc-form-color-accent) 52%,
-    var(--cc-form-color-border)
-  );
-  box-shadow: 0 8px 24px
-    color-mix(in srgb, var(--cc-form-color-accent) 12%, transparent);
+  border-color: var(--cc-form-color-accent);
+  box-shadow: 0 8px 24px rgba(22, 119, 255, 0);
   transform: translateY(-1px);
 }
 
 .cc-table__column-menu {
+  font-size: inherit;
+  font-weight: 400;
   min-width: 180px;
   overflow: auto;
   position: fixed;
@@ -8577,9 +8351,7 @@
 
 .cc-table__loading {
   align-items: center;
-  -webkit-backdrop-filter: blur(6px);
-  backdrop-filter: blur(6px);
-  background: color-mix(in srgb, var(--cc-form-color-surface) 72%, transparent);
+  background: rgba(255, 255, 255, 1);
   display: flex;
   inset: 42px 0 0;
   justify-content: center;
@@ -8634,8 +8406,7 @@
 
 .cc-upload[data-dragging="true"] {
   border-color: var(--cc-form-color-accent);
-  box-shadow: 0 0 0 4px
-    color-mix(in srgb, var(--cc-form-color-accent) 14%, transparent);
+  box-shadow: 0 0 0 4px rgba(22, 119, 255, 0.16);
   transform: translateY(-1px);
 }
 
@@ -8661,6 +8432,515 @@
   justify-content: space-between;
 }
 
+.cc-rich-editor {
+  --cc-rich-editor-background: var(--cc-form-color-surface, #fff);
+  --cc-rich-editor-control-background: var(
+    --cc-form-control-background,
+    var(--cc-rich-editor-background)
+  );
+  --cc-rich-editor-control-hover-background: var(
+    --cc-form-control-hover-background,
+    var(--cc-form-color-surface-soft, #f7f8fa)
+  );
+  --cc-rich-editor-menu-background: var(--cc-rich-editor-background);
+  --cc-rich-editor-border-color: var(--cc-form-color-border, #d8dee8);
+  --cc-rich-editor-border-hover-color: var(
+    --cc-form-color-border-hover,
+    var(--cc-form-color-accent, #1677ff)
+  );
+  --cc-rich-editor-color: var(--cc-form-color-text, #1f2937);
+  --cc-rich-editor-muted-color: var(--cc-form-color-muted, #6b7280);
+  --cc-rich-editor-placeholder-color: var(--cc-form-placeholder-color, #9ca3af);
+  --cc-rich-editor-disabled-color: var(--cc-form-disabled-color, #9ca3af);
+  --cc-rich-editor-accent-color: var(--cc-form-color-accent, #1677ff);
+  --cc-rich-editor-link-color: var(--cc-rich-editor-accent-color);
+  --cc-rich-editor-toolbar-shadow: 0 6px 14px rgba(15, 23, 42, 0.06);
+  --cc-rich-editor-menu-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
+  border: 1px solid var(--cc-rich-editor-border-color);
+  border-radius: 8px;
+  background: var(--cc-rich-editor-background);
+  color: var(--cc-rich-editor-color);
+  position: relative;
+  overflow: visible;
+}
+
+.cc-rich-editor--disabled {
+  opacity: 0.72;
+}
+
+.cc-rich-editor__toolbar-row {
+  display: flex;
+  align-items: stretch;
+  gap: 8px;
+  border-bottom: 1px solid var(--cc-rich-editor-border-color);
+  background: transparent;
+  box-shadow: var(--cc-rich-editor-toolbar-shadow);
+  min-width: 0;
+  position: relative;
+  z-index: 2;
+}
+
+.cc-rich-editor__toolbar-row > .w-e-bar {
+  flex: 1 1 auto;
+  min-width: 0;
+  border: 0;
+  background: transparent;
+  color: var(--cc-rich-editor-color);
+}
+
+.cc-rich-editor__fallback-toolbar {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: 4px;
+  min-height: 40px;
+  padding: 6px 8px;
+  color: var(--cc-rich-editor-muted-color);
+  font-size: 13px;
+  min-width: 0;
+  overflow: visible;
+}
+
+.cc-rich-editor__fallback-toolbar > .cc-tooltip,
+.cc-rich-editor__toolbar-actions > .cc-tooltip,
+.cc-rich-editor__tool-group > .cc-tooltip {
+  flex: 0 0 auto;
+}
+
+.cc-rich-editor__toolbar-actions {
+  align-items: center;
+  border-left: 1px solid var(--cc-rich-editor-border-color);
+  display: inline-flex;
+  flex: 0 0 auto;
+}
+
+.cc-rich-editor__fallback-toolbar button,
+.cc-rich-editor__color-tool,
+.cc-rich-editor__tool-trigger {
+  align-items: center;
+  display: inline-flex;
+  gap: 6px;
+  height: 30px;
+  justify-content: center;
+  min-width: 30px;
+  border: 1px solid var(--cc-rich-editor-border-color);
+  border-radius: 4px;
+  padding: 0 7px;
+  background: var(--cc-rich-editor-control-background);
+  color: var(--cc-rich-editor-color);
+  cursor: pointer;
+  font-size: 12px;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.cc-rich-editor__summary-icon {
+  align-items: center;
+  display: inline-flex;
+  gap: 6px;
+}
+
+.cc-rich-editor__fallback-toolbar button:hover:not(:disabled),
+.cc-rich-editor__color-tool:hover,
+.cc-rich-editor__tool-trigger:hover:not(:disabled),
+.cc-rich-editor__tool-group:focus-within
+  > .cc-tooltip
+  .cc-rich-editor__tool-trigger {
+  border-color: var(--cc-rich-editor-border-hover-color);
+  color: var(--cc-rich-editor-accent-color);
+}
+
+.cc-rich-editor__fallback-toolbar button:disabled,
+.cc-rich-editor__color-tool[data-disabled="true"],
+.cc-rich-editor__tool-group[data-disabled="true"]
+  .cc-rich-editor__tool-trigger {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.cc-rich-editor__tool {
+  flex: 0 0 auto;
+  width: 30px;
+}
+
+.cc-rich-editor__tool-group {
+  flex: 0 0 auto;
+  position: relative;
+}
+
+.cc-rich-editor__tool-group::after {
+  content: "";
+  display: none;
+  height: 6px;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 100%;
+}
+
+.cc-rich-editor__tool-group:hover > .cc-tooltip .cc-rich-editor__tool-trigger,
+.cc-rich-editor__tool-group:focus-within
+  > .cc-tooltip
+  .cc-rich-editor__tool-trigger {
+  border-color: var(--cc-rich-editor-border-hover-color);
+  color: var(--cc-rich-editor-accent-color);
+}
+
+.cc-rich-editor__chevron {
+  height: 12px;
+  width: 12px;
+}
+
+.cc-rich-editor__tool-menu {
+  background: var(--cc-rich-editor-menu-background);
+  border: 1px solid var(--cc-rich-editor-border-color);
+  border-radius: 6px;
+  box-shadow: var(--cc-rich-editor-menu-shadow);
+  display: none;
+  gap: 4px;
+  left: 0;
+  min-width: 136px;
+  padding: 6px;
+  position: absolute;
+  top: calc(100% + 6px);
+  z-index: 20;
+}
+
+.cc-rich-editor__tool-group:hover::after,
+.cc-rich-editor__tool-group:hover > .cc-rich-editor__tool-menu,
+.cc-rich-editor__tool-group:focus-within::after,
+.cc-rich-editor__tool-group:focus-within > .cc-rich-editor__tool-menu {
+  display: grid;
+}
+
+.cc-rich-editor__tool-group[data-disabled="true"]:hover::after,
+.cc-rich-editor__tool-group[data-disabled="true"]:hover
+  > .cc-rich-editor__tool-menu,
+.cc-rich-editor__tool-group[data-disabled="true"]:focus-within::after,
+.cc-rich-editor__tool-group[data-disabled="true"]:focus-within
+  > .cc-rich-editor__tool-menu {
+  display: none;
+}
+
+.cc-rich-editor__tool-menu button,
+.cc-rich-editor__tool-menu .cc-rich-editor__color-control {
+  justify-content: flex-start;
+  width: 100%;
+}
+
+.cc-rich-editor__tool-menu span {
+  line-height: 1;
+}
+
+.cc-rich-editor__fallback-toolbar .cc-icon {
+  flex: 0 0 auto;
+  height: 16px;
+  width: 16px;
+}
+
+.cc-rich-editor__color-tool {
+  overflow: hidden;
+  position: relative;
+}
+
+.cc-rich-editor__color-tool::after {
+  background: currentColor;
+  border-radius: 999px;
+  bottom: 4px;
+  content: "";
+  height: 2px;
+  left: 8px;
+  position: absolute;
+  right: 8px;
+}
+
+.cc-rich-editor__color-tool--background::after {
+  height: 6px;
+  opacity: 0.28;
+}
+
+.cc-rich-editor__color-tool input {
+  cursor: pointer;
+  height: 100%;
+  inset: 0;
+  opacity: 0;
+  position: absolute;
+  width: 100%;
+}
+
+.cc-rich-editor__color-tool[data-disabled="true"] input {
+  cursor: not-allowed;
+}
+
+.cc-rich-editor__color-control {
+  align-items: center;
+  display: inline-flex;
+  gap: 4px;
+  min-height: 28px;
+  border: 1px solid var(--cc-rich-editor-border-color);
+  border-radius: 4px;
+  padding: 0 7px;
+  background: var(--cc-rich-editor-control-background);
+  color: var(--cc-rich-editor-color);
+  font-size: 12px;
+}
+
+.cc-rich-editor__color-control input {
+  width: 20px;
+  height: 20px;
+  border: 0;
+  padding: 0;
+  background: transparent;
+}
+
+.cc-rich-editor__source-toggle {
+  align-items: center;
+  border: 0;
+  display: inline-flex;
+  gap: 6px;
+  justify-content: center;
+  min-width: 40px;
+  padding: 0 10px;
+  background: transparent;
+  color: var(--cc-rich-editor-color);
+  cursor: pointer;
+  font-size: 13px;
+  white-space: nowrap;
+}
+
+.cc-rich-editor__source-toggle .cc-icon {
+  height: 16px;
+  width: 16px;
+}
+
+.cc-rich-editor__source-toggle:hover:not(:disabled) {
+  background: transparent;
+}
+
+.cc-rich-editor__source-toggle:disabled {
+  cursor: not-allowed;
+  color: var(--cc-rich-editor-disabled-color);
+}
+
+.cc-rich-editor__notice {
+  border-bottom: 1px solid var(--cc-rich-editor-border-color);
+  padding: 8px 12px;
+  background: rgba(22, 119, 255, 0.08);
+  color: var(--cc-rich-editor-accent-color);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.cc-rich-editor__notice[data-type="success"] {
+  background: rgba(22, 163, 74, 0.1);
+  color: #15803d;
+}
+
+.cc-rich-editor__url-modal {
+  align-items: center;
+  background: rgba(15, 23, 42, 0.18);
+  display: flex;
+  inset: 0;
+  justify-content: center;
+  padding: 16px;
+  position: absolute;
+  z-index: 12;
+}
+
+.cc-rich-editor__url-panel {
+  background: var(--cc-rich-editor-background);
+  border: 1px solid var(--cc-rich-editor-border-color);
+  border-radius: 8px;
+  box-shadow: var(--cc-rich-editor-menu-shadow);
+  color: var(--cc-rich-editor-color);
+  max-width: min(420px, 100%);
+  padding: 16px;
+  width: 100%;
+}
+
+.cc-rich-editor__url-header,
+.cc-rich-editor__url-title,
+.cc-rich-editor__url-actions {
+  align-items: center;
+  display: flex;
+}
+
+.cc-rich-editor__url-header {
+  gap: 12px;
+  justify-content: space-between;
+  margin-bottom: 14px;
+}
+
+.cc-rich-editor__url-title {
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.cc-rich-editor__url-close {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  color: var(--cc-rich-editor-muted-color);
+  cursor: pointer;
+  display: inline-flex;
+  height: 28px;
+  justify-content: center;
+  padding: 0;
+  width: 28px;
+}
+
+.cc-rich-editor__url-close:hover {
+  color: var(--cc-rich-editor-color);
+}
+
+.cc-rich-editor__url-field {
+  display: grid;
+  gap: 8px;
+}
+
+.cc-rich-editor__url-field span {
+  color: var(--cc-rich-editor-muted-color);
+  font-size: 12px;
+}
+
+.cc-rich-editor__url-field input {
+  background: var(--cc-rich-editor-control-background);
+  border: 1px solid var(--cc-rich-editor-border-color);
+  border-radius: 6px;
+  color: var(--cc-rich-editor-color);
+  font: inherit;
+  height: 36px;
+  outline: none;
+  padding: 0 10px;
+}
+
+.cc-rich-editor__url-field input:focus {
+  border-color: var(--cc-rich-editor-border-hover-color);
+  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.12);
+}
+
+.cc-rich-editor__url-actions {
+  gap: 8px;
+  justify-content: flex-end;
+  margin-top: 16px;
+}
+
+.cc-rich-editor__url-actions button {
+  align-items: center;
+  background: var(--cc-rich-editor-control-background);
+  border: 1px solid var(--cc-rich-editor-border-color);
+  border-radius: 6px;
+  color: var(--cc-rich-editor-color);
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  gap: 6px;
+  height: 32px;
+  padding: 0 12px;
+}
+
+.cc-rich-editor__url-actions button:hover {
+  border-color: var(--cc-rich-editor-border-hover-color);
+  color: var(--cc-rich-editor-accent-color);
+}
+
+.cc-rich-editor__url-actions button:last-child {
+  background: var(--cc-rich-editor-accent-color);
+  border-color: var(--cc-rich-editor-accent-color);
+  color: #fff;
+}
+
+.cc-rich-editor__source,
+.cc-rich-editor__fallback-editor,
+.cc-rich-editor__preview {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 16px;
+  outline: none;
+  line-height: 1.75;
+  overflow: auto;
+}
+
+.cc-rich-editor__source {
+  display: block;
+  border: 0;
+  resize: vertical;
+  background: var(--cc-rich-editor-background);
+  color: var(--cc-rich-editor-color);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 13px;
+}
+
+.cc-rich-editor__fallback-editor:empty::before {
+  content: attr(data-placeholder);
+  color: var(--cc-rich-editor-placeholder-color);
+}
+
+.cc-rich-editor .w-e-text-container,
+.cc-rich-editor .w-e-scroll,
+.cc-rich-editor .w-e-text {
+  background: var(--cc-rich-editor-background);
+  color: var(--cc-rich-editor-color);
+}
+
+.cc-rich-editor .w-e-bar-item button {
+  color: var(--cc-rich-editor-color);
+}
+
+.cc-rich-editor .w-e-bar-item button:hover {
+  background: var(--cc-rich-editor-control-hover-background);
+  color: var(--cc-rich-editor-accent-color);
+}
+
+.cc-rich-editor__preview {
+  user-select: text;
+}
+
+.cc-rich-editor__preview img,
+.cc-rich-editor__fallback-editor img,
+.cc-rich-editor .w-e-text-container img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin: 8px auto;
+}
+
+.cc-rich-editor__preview video,
+.cc-rich-editor__fallback-editor video,
+.cc-rich-editor .w-e-text-container video {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin: 12px auto;
+}
+
+.cc-rich-editor__preview table,
+.cc-rich-editor__fallback-editor table,
+.cc-rich-editor .w-e-text-container table {
+  max-width: 100%;
+  border-collapse: collapse;
+  table-layout: auto;
+}
+
+.cc-rich-editor__preview th,
+.cc-rich-editor__preview td,
+.cc-rich-editor__fallback-editor th,
+.cc-rich-editor__fallback-editor td,
+.cc-rich-editor .w-e-text-container th,
+.cc-rich-editor .w-e-text-container td {
+  border: 1px solid var(--cc-rich-editor-border-color);
+  padding: 8px 10px;
+}
+
+.cc-rich-editor__preview a,
+.cc-rich-editor__fallback-editor a,
+.cc-rich-editor .w-e-text-container a {
+  color: var(--cc-rich-editor-link-color);
+  text-decoration: underline;
+}
+
 .cc-modal {
   inset: 0;
   overflow: visible;
@@ -8690,7 +8970,8 @@
   box-shadow: var(--cc-modal-shadow);
   color: var(--cc-modal-color);
   left: 50%;
-  max-width: min(520px, calc(100vw - 32px));
+  max-width: 520px;
+  width: calc(100vw - 32px);
   position: absolute;
   top: 50%;
   transform: translate(-50%, -50%);
@@ -8773,6 +9054,12 @@
   color: var(--cc-form-color-text);
 }
 
+.cc-modal__close:focus,
+.cc-popup__close:focus {
+  box-shadow: none;
+  outline: none;
+}
+
 .cc-modal__close:focus-visible,
 .cc-popup__close:focus-visible {
   box-shadow: var(--cc-form-shadow-focus);
@@ -8853,12 +9140,12 @@
 
 .cc-popup[data-contained="true"][data-placement="top"] .cc-popup__panel,
 .cc-popup[data-contained="true"][data-placement="bottom"] .cc-popup__panel {
-  max-height: min(var(--cc-popup-max-size), 100%);
+  max-height: var(--cc-popup-max-size);
 }
 
 .cc-popup[data-contained="true"][data-placement="left"] .cc-popup__panel,
 .cc-popup[data-contained="true"][data-placement="right"] .cc-popup__panel {
-  max-width: min(var(--cc-popup-max-size), 100%);
+  max-width: var(--cc-popup-max-size);
 }
 
 .cc-popup[data-state="enter"] .cc-popup__overlay {
@@ -9035,7 +9322,8 @@
   --cc-toast-max-height: 160px;
   display: flex;
   flex-direction: column;
-  max-width: min(360px, calc(100vw - 32px));
+  max-width: 360px;
+  width: calc(100vw - 32px);
   position: fixed;
   right: 16px;
   top: 16px;
@@ -9261,6 +9549,11 @@
   color: var(--cc-form-color-text);
 }
 
+.cc-toast__close:focus {
+  box-shadow: none;
+  outline: none;
+}
+
 .cc-toast__close:focus-visible {
   box-shadow: var(--cc-form-shadow-focus);
   outline: none;