/* 全站唯一外观数值来源：颜色、文字、间距、圆角、控件和浮层。
 * 页面与组件只引用用途；明暗主题在同一根节点切换。
 * 对比度仅改变中性色，不处理作品、图片或视频内容。
 */
html:root {
  color-scheme: light;
  --ui-color-overlay-dark: #000000;
  --ui-color-overlay-light: #ffffff;
  --ui-color-app-background: var(--ui-color-bg);
  --ui-color-bg: rgb(calc(250 + 2 * var(--ui-contrast-light-lower) - 18 * var(--ui-contrast-light-higher)) calc(250 + 2 * var(--ui-contrast-light-lower) - 18 * var(--ui-contrast-light-higher)) calc(250 + 2 * var(--ui-contrast-light-lower) - 15 * var(--ui-contrast-light-higher)));
  --ui-color-surface: rgb(255 255 255);
  --ui-color-surface-elevated: rgb(255 255 255);
  --ui-color-surface-hover: rgb(calc(236 + 10 * var(--ui-contrast-light-lower) - 22 * var(--ui-contrast-light-higher)) calc(236 + 10 * var(--ui-contrast-light-lower) - 22 * var(--ui-contrast-light-higher)) calc(239 + 9 * var(--ui-contrast-light-lower) - 19 * var(--ui-contrast-light-higher)));
  --ui-color-card: var(--ui-color-surface);
  --ui-color-card-hover: var(--ui-color-surface-hover);
  --ui-color-interactive-hover: var(--ui-interactive-hover);
  --ui-color-interactive-hover-subtle: var(--ui-interactive-hover-subtle);
  --ui-color-interactive-hover-strong: var(--ui-interactive-hover-strong);
  --ui-color-border: rgb(calc(226 + 10 * var(--ui-contrast-light-lower) - 33 * var(--ui-contrast-light-higher)) calc(226 + 10 * var(--ui-contrast-light-lower) - 33 * var(--ui-contrast-light-higher)) calc(232 + 8 * var(--ui-contrast-light-lower) - 30 * var(--ui-contrast-light-higher)));
  --ui-color-border-light: rgb(calc(212 + 16 * var(--ui-contrast-light-lower) - 36 * var(--ui-contrast-light-higher)) calc(212 + 16 * var(--ui-contrast-light-lower) - 36 * var(--ui-contrast-light-higher)) calc(218 + 15 * var(--ui-contrast-light-lower) - 32 * var(--ui-contrast-light-higher)));
  --ui-color-text: rgb(calc(29 + 32 * var(--ui-contrast-light-lower) - 17 * var(--ui-contrast-light-higher)) calc(29 + 32 * var(--ui-contrast-light-lower) - 17 * var(--ui-contrast-light-higher)) calc(31 + 33 * var(--ui-contrast-light-lower) - 17 * var(--ui-contrast-light-higher)));
  --ui-color-text-active: rgb(calc(9 + 25 * var(--ui-contrast-light-lower) - 9 * var(--ui-contrast-light-higher)) calc(9 + 25 * var(--ui-contrast-light-lower) - 9 * var(--ui-contrast-light-higher)) calc(11 + 26 * var(--ui-contrast-light-lower) - 11 * var(--ui-contrast-light-higher)));
  --ui-color-text-secondary: rgb(calc(63 + 26 * var(--ui-contrast-light-lower) - 35 * var(--ui-contrast-light-higher)) calc(63 + 26 * var(--ui-contrast-light-lower) - 35 * var(--ui-contrast-light-higher)) calc(70 + 26 * var(--ui-contrast-light-lower) - 36 * var(--ui-contrast-light-higher)));
  --ui-color-text-muted: rgb(calc(106 + 5 * var(--ui-contrast-light-lower) - 38 * var(--ui-contrast-light-higher)) calc(106 + 5 * var(--ui-contrast-light-lower) - 38 * var(--ui-contrast-light-higher)) calc(114 + 5 * var(--ui-contrast-light-lower) - 37 * var(--ui-contrast-light-higher)));
  --ui-color-accent: var(--ui-brand-accent);
  --ui-color-accent-hover: #3f40e6;
  --ui-color-accent-soft: #eeeeff;
  --ui-color-accent-soft-text: #4446d8;
  --ui-color-accent-foreground: #ffffff;
  --ui-color-success: #10b981;
  --ui-color-danger: #ef4444;
  --ui-color-warning: #f59e0b;
  --ui-color-warning-text: #b45309;
  --ui-color-info: #2563eb;
  --ui-color-info-soft: #eff6ff;
  --ui-color-info-soft-text: #1d4ed8;
  --ui-color-content-image: #1d4ed8;
  --ui-color-content-image-soft: #dbeafe;
  --ui-color-content-video: #6d28d9;
  --ui-color-content-video-soft: #ede9fe;
  --ui-color-content-text: #047857;
  --ui-color-content-text-soft: #d1fae5;
  --ui-color-content-audio: #b45309;
  --ui-color-content-audio-soft: #fef3c7;
  --ui-color-content-other: #52525b;
  --ui-color-content-other-soft: #e4e4e7;
  --ui-color-image-effect-violet: #7c3aed;
  --ui-color-image-effect-cyan: #06b6d4;
  --ui-color-tooltip-bg: rgb(calc(38 + 20 * var(--ui-contrast-light-lower) - 15 * var(--ui-contrast-light-higher)) calc(38 + 20 * var(--ui-contrast-light-lower) - 15 * var(--ui-contrast-light-higher)) calc(38 + 24 * var(--ui-contrast-light-lower) - 13 * var(--ui-contrast-light-higher)));
  --ui-color-tooltip-text: rgb(255 255 255);
  --ui-color-nav-bg: rgb(255 255 255);
  --ui-color-nav-text: var(--ui-color-text-secondary);
  --ui-color-nav-text-muted: var(--ui-color-text-muted);
  --ui-color-nav-hover: rgb(calc(232 + 12 * var(--ui-contrast-light-lower) - 23 * var(--ui-contrast-light-higher)) calc(232 + 12 * var(--ui-contrast-light-lower) - 23 * var(--ui-contrast-light-higher)) calc(236 + 11 * var(--ui-contrast-light-lower) - 20 * var(--ui-contrast-light-higher)));
  --ui-color-nav-active: rgb(255 255 255);
  --ui-color-nav-text-active: var(--ui-color-text);
  --ui-color-input: rgb(calc(240 + 7 * var(--ui-contrast-light-lower) - 19 * var(--ui-contrast-light-higher)) calc(240 + 7 * var(--ui-contrast-light-lower) - 19 * var(--ui-contrast-light-higher)) calc(242 + 7 * var(--ui-contrast-light-lower) - 14 * var(--ui-contrast-light-higher)));
  --ui-color-input-focus: color-mix(in srgb, var(--ui-color-input) 80%, var(--ui-color-accent) 20%);
  --ui-color-popover: var(--ui-color-surface-elevated);
  --ui-color-popover-foreground: var(--ui-color-text);
  --ui-color-muted: var(--ui-color-input);
  --ui-color-muted-foreground: rgb(calc(63 + 26 * var(--ui-contrast-light-lower) - 35 * var(--ui-contrast-light-higher)) calc(63 + 26 * var(--ui-contrast-light-lower) - 35 * var(--ui-contrast-light-higher)) calc(70 + 26 * var(--ui-contrast-light-lower) - 36 * var(--ui-contrast-light-higher)));
  --ui-color-ring: var(--ui-color-accent);
  --ui-color-secondary: var(--ui-color-input);
  --ui-color-secondary-foreground: var(--ui-color-text);
  --ui-color-primary: var(--ui-color-accent);
  --ui-color-primary-foreground: var(--ui-color-accent-foreground);
  --ui-color-destructive: var(--ui-color-danger);
  --ui-color-brand: var(--ui-color-accent);
  --ui-color-brand-hover: var(--ui-color-accent-hover);
  --ui-color-brand-foreground: var(--ui-color-accent-foreground);
  --ui-color-panel: var(--ui-color-surface);
  --ui-color-line: rgb(calc(236 + 6 * var(--ui-contrast-light-lower) - 32 * var(--ui-contrast-light-higher)) calc(236 + 6 * var(--ui-contrast-light-lower) - 32 * var(--ui-contrast-light-higher)) calc(240 + 5 * var(--ui-contrast-light-lower) - 27 * var(--ui-contrast-light-higher)));
  --ui-brand-accent: #5051f8;
  --ui-color-canvas-background: var(--ui-color-bg);
  --ui-color-canvas-grid-dot: rgb(0 0 0 / 0.13);
  --ui-color-canvas-grid-line: rgb(0 0 0 / 0.07);
  --ui-color-canvas-selection-stroke: #1d1d1f;
  --ui-color-canvas-selection-fill: rgb(0 0 0 / 0.05);
  --ui-color-canvas-mask-overlay: var(--ui-color-info);
  --ui-color-canvas-measurement: #F56139;
  --ui-color-canvas-spacing: #EC4899;
  --ui-color-canvas-node-fill: rgb(calc(240 + 7 * var(--ui-contrast-light-lower) - 19 * var(--ui-contrast-light-higher)) calc(240 + 7 * var(--ui-contrast-light-lower) - 19 * var(--ui-contrast-light-higher)) calc(242 + 7 * var(--ui-contrast-light-lower) - 14 * var(--ui-contrast-light-higher)));
  --ui-color-canvas-node-panel: var(--ui-color-surface);
  --ui-color-canvas-node-input: var(--ui-color-surface-hover);
  --ui-color-canvas-node-stroke: var(--ui-color-line);
  --ui-color-canvas-node-active-stroke: var(--ui-color-brand);
  --ui-color-canvas-node-placeholder: var(--ui-color-text-muted);
  --ui-color-canvas-node-label: var(--ui-color-text-secondary);
  --ui-color-canvas-node-text: var(--ui-color-text);
  --ui-color-canvas-node-muted: var(--ui-color-text-muted);
  --ui-color-canvas-node-faint: var(--ui-color-text-muted);
  --ui-color-canvas-toolbar-panel: rgb(255 255 255 / 0.95);
  --ui-color-canvas-toolbar-border: var(--ui-color-line);
  --ui-color-canvas-toolbar-item: var(--ui-color-text-secondary);
  --ui-color-canvas-toolbar-hover: var(--ui-color-surface-hover);
  --ui-color-canvas-toolbar-active: var(--ui-color-surface-hover);
  --ui-color-canvas-toolbar-active-text: var(--ui-color-text);
  --ui-shadow-popover: 0 12px 32px rgb(15 23 42 / 0.14);
  --ui-shadow-dialog: 0 24px 64px rgb(15 23 42 / 0.2);
  --ui-shadow-tooltip: 0 4px 12px rgb(0 0 0 / 0.15);
  --ui-shadow-float: 0 4px 20px rgb(0 0 0 / 0.06);
  --ui-shadow-focus-ring: 0 0 0 1px var(--ui-color-accent);
  --ui-shadow-slider-thumb: 0 0 0 2px var(--ui-color-card);
  --ui-interactive-hover: var(--ui-color-surface-hover);
  --ui-interactive-hover-subtle: var(--ui-color-surface-hover);
  --ui-interactive-hover-strong: var(--ui-color-surface-hover);
  --ui-color-modal-scrim: rgb(0 0 0 / 0.24);
  --ui-contrast-light: 50;
  --ui-contrast-dark: 50;
  --ui-contrast-light-lower: clamp(0, calc((50 - var(--ui-contrast-light)) / 50), 1);
  --ui-contrast-light-higher: clamp(0, calc((var(--ui-contrast-light) - 50) / 50), 1);
  --ui-contrast-dark-lower: clamp(0, calc((50 - var(--ui-contrast-dark)) / 50), 1);
  --ui-contrast-dark-higher: clamp(0, calc((var(--ui-contrast-dark) - 50) / 50), 1);

  /* 公共尺寸与文字规格。 */
  --ui-font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
  --ui-font-family-code: ui-monospace, SFMono-Regular, Consolas, monospace;
  --ui-font-weight-body: 600;
  --ui-font-weight-control: var(--ui-font-weight-body);
  --ui-font-weight-heading: 700;
  --ui-space-1: 4px;
  --ui-space-2: calc(var(--ui-space-1) * 2);
  --ui-space-3: calc(var(--ui-space-1) * 3);
  --ui-space-4: calc(var(--ui-space-1) * 4);
  --ui-space-5: calc(var(--ui-space-1) * 5);
  --ui-space-6: calc(var(--ui-space-1) * 6);
  --ui-space-8: calc(var(--ui-space-1) * 8);
  --ui-size-step: var(--ui-space-1);
  --ui-control-height: 40px;
  --ui-control-height-sm: 32px;
  --ui-control-height-lg: 48px;
  --ui-control-height-touch: 44px;
  --ui-control-padding: var(--ui-space-3);
  --ui-control-gap: var(--ui-space-2);
  --ui-field-leading-inset: var(--ui-space-3);
  --ui-field-action-inset: var(--ui-space-2);
  --ui-field-trailing-label-width: calc(var(--ui-font-size-caption) * 3 + var(--ui-space-2));
  --ui-sidebar-header-height: var(--ui-control-height);
  --ui-sidebar-padding: var(--ui-floating-panel-padding);
  --ui-sidebar-list-gap: var(--ui-space-1);
  --ui-sidebar-row-height: var(--ui-control-height);
  --ui-sidebar-row-height-rich: var(--ui-control-height-lg);
  --ui-sidebar-row-padding-y: var(--ui-space-1);
  --ui-sidebar-row-padding-x: var(--ui-control-padding);
  --ui-sidebar-row-gap: var(--ui-control-gap);
  --ui-sidebar-section-gap: var(--ui-space-4);
  --ui-sidebar-section-content-gap: var(--ui-space-2);
  --ui-canvas-toolbar-height: calc(var(--ui-control-height) + var(--ui-space-4) * 2);
  --ui-floating-panel-width: 300px;
  --ui-floating-panel-offset: var(--ui-space-2);
  --ui-floating-panel-radius: var(--ui-radius-panel);
  --ui-floating-panel-padding: var(--ui-space-3);
  --ui-floating-panel-background: var(--ui-color-surface);
  --ui-floating-panel-shadow: var(--ui-shadow-popover);
  --ui-floating-panel-motion-duration: 500ms;
  --ui-floating-panel-motion-easing: cubic-bezier(0.22, 1, 0.36, 1);
  --ui-canvas-panel-top: calc(var(--ui-canvas-toolbar-height) + var(--ui-floating-panel-offset));
  --ui-canvas-panel-bottom: calc(var(--ui-canvas-toolbar-height) + var(--ui-floating-panel-offset));
  --ui-z-canvas-side-panel: 60;
  --ui-z-canvas-toolbar: 70;
  --ui-z-canvas-floating-panel: 100;
  --ui-menu-item-height: var(--ui-control-height-sm);
  --ui-radius-control: 12px;
  --ui-radius-sm: 6px;
  --ui-radius-panel: 18px;
  --ui-radius-dialog: 24px;
  --ui-radius-xs: 3px;
  --ui-radius-pill: 9999px;
  --ui-icon-size: 16px;
  --ui-icon-size-sm: 14px;
  --ui-icon-size-lg: 20px;
  --ui-slider-track-height: 4px;
  --ui-slider-thumb-size: 14px;
  --ui-checkbox-size: 16px;
  --ui-switch-width: 36px;
  --ui-switch-height: 20px;
  --ui-switch-thumb-size: 16px;
  --ui-switch-inset: 2px;
  --ui-menu-width: 240px;
  --ui-dialog-width: 720px;
  --ui-dialog-width-sm: 480px;
  --ui-dialog-width-lg: 960px;
  --ui-scrollbar-size: 4px;
  --ui-canvas-handle-size: 8px;
  --ui-canvas-handle-radius: 2px;
  --ui-canvas-handle-stroke-width: 1.5px;
  --ui-confirmation-control-height: 24px;
  --ui-confirmation-title-size: 16px;
  --ui-confirmation-title-line-height: 24px;
  --ui-shell-header-height: 56px;
  --ui-tooltip-padding-x: var(--ui-space-2);
  --ui-tooltip-padding-y: var(--ui-space-1);
  --ui-font-size-micro: 10px;
  --ui-line-height-micro: 14px;
  --ui-font-size-tiny: 11px;
  --ui-line-height-tiny: 16px;
  --ui-font-size-caption: 12px;
  --ui-line-height-caption: 18px;
  --ui-font-size-label: 13px;
  --ui-line-height-label: 18px;
  --ui-font-size-body: 14px;
  --ui-line-height-body: 22px;
  --ui-font-size-nav: 14px;
  --ui-line-height-nav: 20px;
  --ui-font-size-subtitle: 15px;
  --ui-line-height-subtitle: 22px;
  --ui-font-size-title: 16px;
  --ui-line-height-title: 24px;
  --ui-font-size-heading: 20px;
  --ui-line-height-heading: 28px;
  --ui-font-size-stat: 24px;
  --ui-line-height-stat: 32px;
  --ui-font-size-display: 32px;
  --ui-line-height-display: 40px;

  /* 兼容已有控件名称；此处仅映射，不另设数值。 */
  --color-overlay-dark: var(--ui-color-overlay-dark);
  --color-overlay-light: var(--ui-color-overlay-light);
  --color-app-background: var(--ui-color-app-background);
  --color-bg: var(--ui-color-bg);
  --color-surface: var(--ui-color-surface);
  --color-surface-elevated: var(--ui-color-surface-elevated);
  --color-surface-hover: var(--ui-color-surface-hover);
  --color-card: var(--ui-color-card);
  --color-card-hover: var(--ui-color-card-hover);
  --color-interactive-hover: var(--ui-color-interactive-hover);
  --color-interactive-hover-subtle: var(--ui-color-interactive-hover-subtle);
  --color-interactive-hover-strong: var(--ui-color-interactive-hover-strong);
  --color-border: var(--ui-color-border);
  --color-border-light: var(--ui-color-border-light);
  --color-text: var(--ui-color-text);
  --color-text-active: var(--ui-color-text-active);
  --color-text-secondary: var(--ui-color-text-secondary);
  --color-text-muted: var(--ui-color-text-muted);
  --color-accent: var(--ui-color-accent);
  --color-accent-hover: var(--ui-color-accent-hover);
  --color-accent-soft: var(--ui-color-accent-soft);
  --color-accent-soft-text: var(--ui-color-accent-soft-text);
  --color-accent-foreground: var(--ui-color-accent-foreground);
  --color-success: var(--ui-color-success);
  --color-danger: var(--ui-color-danger);
  --color-warning: var(--ui-color-warning);
  --color-warning-text: var(--ui-color-warning-text);
  --color-info: var(--ui-color-info);
  --color-info-soft: var(--ui-color-info-soft);
  --color-info-soft-text: var(--ui-color-info-soft-text);
  --color-content-image: var(--ui-color-content-image);
  --color-content-image-soft: var(--ui-color-content-image-soft);
  --color-content-video: var(--ui-color-content-video);
  --color-content-video-soft: var(--ui-color-content-video-soft);
  --color-content-text: var(--ui-color-content-text);
  --color-content-text-soft: var(--ui-color-content-text-soft);
  --color-content-audio: var(--ui-color-content-audio);
  --color-content-audio-soft: var(--ui-color-content-audio-soft);
  --color-content-other: var(--ui-color-content-other);
  --color-content-other-soft: var(--ui-color-content-other-soft);
  --color-image-effect-violet: var(--ui-color-image-effect-violet);
  --color-image-effect-cyan: var(--ui-color-image-effect-cyan);
  --color-tooltip-bg: var(--ui-color-tooltip-bg);
  --color-tooltip-text: var(--ui-color-tooltip-text);
  --color-nav-bg: var(--ui-color-nav-bg);
  --color-nav-text: var(--ui-color-nav-text);
  --color-nav-text-muted: var(--ui-color-nav-text-muted);
  --color-nav-hover: var(--ui-color-nav-hover);
  --color-nav-active: var(--ui-color-nav-active);
  --color-nav-text-active: var(--ui-color-nav-text-active);
  --color-input: var(--ui-color-input);
  --color-input-focus: var(--ui-color-input-focus);
  --color-popover: var(--ui-color-popover);
  --color-popover-foreground: var(--ui-color-popover-foreground);
  --color-muted: var(--ui-color-muted);
  --color-muted-foreground: var(--ui-color-muted-foreground);
  --color-ring: var(--ui-color-ring);
  --color-secondary: var(--ui-color-secondary);
  --color-secondary-foreground: var(--ui-color-secondary-foreground);
  --color-primary: var(--ui-color-primary);
  --color-primary-foreground: var(--ui-color-primary-foreground);
  --color-destructive: var(--ui-color-destructive);
  --color-brand: var(--ui-color-brand);
  --color-brand-hover: var(--ui-color-brand-hover);
  --color-brand-foreground: var(--ui-color-brand-foreground);
  --color-panel: var(--ui-color-panel);
  --color-line: var(--ui-color-line);
  --color-canvas-background: var(--ui-color-canvas-background);
  --color-canvas-grid-dot: var(--ui-color-canvas-grid-dot);
  --color-canvas-grid-line: var(--ui-color-canvas-grid-line);
  --color-canvas-selection-stroke: var(--ui-color-canvas-selection-stroke);
  --color-canvas-selection-fill: var(--ui-color-canvas-selection-fill);
  --color-canvas-mask-overlay: var(--ui-color-canvas-mask-overlay);
  --color-canvas-measurement: var(--ui-color-canvas-measurement);
  --color-canvas-spacing: var(--ui-color-canvas-spacing);
  --color-canvas-node-fill: var(--ui-color-canvas-node-fill);
  --color-canvas-node-panel: var(--ui-color-canvas-node-panel);
  --color-canvas-node-input: var(--ui-color-canvas-node-input);
  --color-canvas-node-stroke: var(--ui-color-canvas-node-stroke);
  --color-canvas-node-active-stroke: var(--ui-color-canvas-node-active-stroke);
  --color-canvas-node-placeholder: var(--ui-color-canvas-node-placeholder);
  --color-canvas-node-label: var(--ui-color-canvas-node-label);
  --color-canvas-node-text: var(--ui-color-canvas-node-text);
  --color-canvas-node-muted: var(--ui-color-canvas-node-muted);
  --color-canvas-node-faint: var(--ui-color-canvas-node-faint);
  --color-canvas-toolbar-panel: var(--ui-color-canvas-toolbar-panel);
  --color-canvas-toolbar-border: var(--ui-color-canvas-toolbar-border);
  --color-canvas-toolbar-item: var(--ui-color-canvas-toolbar-item);
  --color-canvas-toolbar-hover: var(--ui-color-canvas-toolbar-hover);
  --color-canvas-toolbar-active: var(--ui-color-canvas-toolbar-active);
  --color-canvas-toolbar-active-text: var(--ui-color-canvas-toolbar-active-text);
  --color-modal-scrim: var(--ui-color-modal-scrim);
  --brand-accent: var(--ui-brand-accent);
  --app-font-family: var(--ui-font-family);
  --font-sans: var(--ui-font-family);
  --font-heading: var(--ui-font-family);
  --background: var(--ui-color-bg);
  --foreground: var(--ui-color-text);
  --card: var(--ui-color-surface);
  --card-foreground: var(--ui-color-text);
  --popover: var(--ui-color-surface-elevated);
  --popover-foreground: var(--ui-color-text);
  --primary: var(--ui-color-accent);
  --primary-foreground: var(--ui-color-accent-foreground);
  --secondary: var(--ui-color-input);
  --secondary-foreground: var(--ui-color-text);
  --muted: var(--ui-color-input);
  --muted-foreground: var(--ui-color-text-muted);
  --accent: var(--ui-color-accent);
  --accent-foreground: var(--ui-color-accent-foreground);
  --destructive: var(--ui-color-danger);
  --border: var(--ui-color-border);
  --input: var(--ui-color-input);
  --ring: var(--ui-color-accent);
  --sidebar: var(--ui-color-surface);
  --sidebar-foreground: var(--ui-color-text);
  --sidebar-primary: var(--ui-color-accent);
  --sidebar-primary-foreground: var(--ui-color-accent-foreground);
  --sidebar-accent: var(--ui-color-surface-hover);
  --sidebar-accent-foreground: var(--ui-color-text);
  --sidebar-border: var(--ui-color-line);
  --sidebar-ring: var(--ui-color-accent);
  --chart-1: var(--ui-color-accent);
  --chart-2: var(--ui-color-text-secondary);
  --chart-3: var(--ui-color-text-muted);
  --chart-4: var(--ui-color-surface-hover);
  --chart-5: var(--ui-color-text);
  --stone: var(--ui-color-surface-hover);
  --shadow-subtle: var(--ui-shadow-popover);
  --radius: var(--ui-radius-control);
  --spacing: var(--ui-space-1);
  --spacing-control: var(--ui-space-2);
  --spacing-card: var(--ui-space-3);
  --spacing-panel: var(--ui-space-4);
  --spacing-nav-item: var(--ui-control-height-touch);
  --spacing-shell-header: var(--ui-shell-header-height);
  --spacing-icon-button: var(--ui-control-height-touch);
  --radius-control: var(--ui-radius-control);
  --radius-panel: var(--ui-radius-panel);
  --radius-dialog: var(--ui-radius-dialog);
  --radius-xs: var(--ui-radius-xs);
  --radius-sm: var(--ui-radius-sm);
  --radius-md: var(--ui-radius-control);
  --radius-lg: var(--ui-radius-control);
  --radius-xl: var(--ui-radius-panel);
  --radius-2xl: var(--ui-radius-panel);
  --radius-3xl: var(--ui-radius-dialog);
  --radius-4xl: var(--ui-radius-dialog);
  --radius-pill: var(--ui-radius-pill);
  --font-mono: var(--ui-font-family-code);
  --font-weight-normal: var(--ui-font-weight-body);
  --font-weight-medium: var(--ui-font-weight-control);
  --font-weight-semibold: var(--ui-font-weight-control);
  --font-weight-bold: var(--ui-font-weight-heading);
  --font-weight-extrabold: var(--ui-font-weight-heading);
  --color-background: var(--ui-color-bg);
  --color-foreground: var(--ui-color-text);
  --color-card-foreground: var(--ui-color-text);
  --text-micro: var(--ui-font-size-micro);
  --text-micro--line-height: var(--ui-line-height-micro);
  --text-tiny: var(--ui-font-size-tiny);
  --text-tiny--line-height: var(--ui-line-height-tiny);
  --text-caption: var(--ui-font-size-caption);
  --text-caption--line-height: var(--ui-line-height-caption);
  --text-label: var(--ui-font-size-label);
  --text-label--line-height: var(--ui-line-height-label);
  --text-body: var(--ui-font-size-body);
  --text-body--line-height: var(--ui-line-height-body);
  --text-nav: var(--ui-font-size-nav);
  --text-nav--line-height: var(--ui-line-height-nav);
  --text-subtitle: var(--ui-font-size-subtitle);
  --text-subtitle--line-height: var(--ui-line-height-subtitle);
  --text-title: var(--ui-font-size-title);
  --text-title--line-height: var(--ui-line-height-title);
  --text-heading: var(--ui-font-size-heading);
  --text-heading--line-height: var(--ui-line-height-heading);
  --text-stat: var(--ui-font-size-stat);
  --text-stat--line-height: var(--ui-line-height-stat);
  --text-display: var(--ui-font-size-display);
  --text-display--line-height: var(--ui-line-height-display);
}

html:root.dark {
  color-scheme: dark;
  --ui-color-canvas-background: var(--ui-color-bg);
  --ui-color-canvas-grid-dot: rgb(236 236 236 / 0.24);
  --ui-color-canvas-grid-line: rgb(236 236 236 / 0.1);
  --ui-color-canvas-selection-stroke: #ececec;
  --ui-color-canvas-selection-fill: rgb(236 236 236 / 0.1);
  --ui-color-canvas-node-fill: rgb(calc(28 + 0 * var(--ui-contrast-dark-lower) + 4 * var(--ui-contrast-dark-higher)) calc(28 + 0 * var(--ui-contrast-dark-lower) + 4 * var(--ui-contrast-dark-higher)) calc(28 + 0 * var(--ui-contrast-dark-lower) + 4 * var(--ui-contrast-dark-higher)));
  --ui-color-canvas-node-panel: var(--ui-color-surface);
  --ui-color-canvas-node-input: var(--ui-color-surface-hover);
  --ui-color-canvas-node-stroke: var(--ui-color-line);
  --ui-color-canvas-node-active-stroke: var(--ui-color-brand);
  --ui-color-canvas-node-placeholder: var(--ui-color-text-muted);
  --ui-color-canvas-node-label: var(--ui-color-text-secondary);
  --ui-color-canvas-node-text: var(--ui-color-text);
  --ui-color-canvas-node-muted: var(--ui-color-text-secondary);
  --ui-color-canvas-node-faint: var(--ui-color-text-muted);
  --ui-color-canvas-toolbar-panel: rgb(calc(28 + 0 * var(--ui-contrast-dark-lower) + 4 * var(--ui-contrast-dark-higher)) calc(28 + 0 * var(--ui-contrast-dark-lower) + 4 * var(--ui-contrast-dark-higher)) calc(28 + 0 * var(--ui-contrast-dark-lower) + 4 * var(--ui-contrast-dark-higher)));
  --ui-color-canvas-toolbar-border: var(--ui-color-line);
  --ui-color-canvas-toolbar-item: var(--ui-color-text-secondary);
  --ui-color-canvas-toolbar-hover: var(--ui-color-surface-hover);
  --ui-color-canvas-toolbar-active: var(--ui-color-nav-active);
  --ui-color-canvas-toolbar-active-text: var(--ui-color-text);
  --ui-shadow-popover: 0 12px 32px rgb(0 0 0 / 0.42);
  --ui-shadow-dialog: 0 24px 64px rgb(0 0 0 / 0.56);
  --ui-shadow-tooltip: 0 4px 12px rgb(0 0 0 / 0.36);
  --ui-shadow-float: 0 4px 20px rgb(0 0 0 / 0.32);
  --ui-shadow-focus-ring: 0 0 0 1px var(--ui-color-accent);
  --ui-shadow-slider-thumb: 0 0 0 2px var(--ui-color-card);
  --ui-color-app-background: var(--ui-color-bg);
  --ui-color-bg: rgb(calc(16 + 6 * var(--ui-contrast-dark-lower) - 8 * var(--ui-contrast-dark-higher)) calc(16 + 6 * var(--ui-contrast-dark-lower) - 8 * var(--ui-contrast-dark-higher)) calc(16 + 6 * var(--ui-contrast-dark-lower) - 8 * var(--ui-contrast-dark-higher)));
  --ui-color-surface: rgb(calc(28 + 0 * var(--ui-contrast-dark-lower) + 4 * var(--ui-contrast-dark-higher)) calc(28 + 0 * var(--ui-contrast-dark-lower) + 4 * var(--ui-contrast-dark-higher)) calc(28 + 0 * var(--ui-contrast-dark-lower) + 4 * var(--ui-contrast-dark-higher)));
  --ui-color-surface-hover: rgb(calc(52 - 8 * var(--ui-contrast-dark-lower) + 12 * var(--ui-contrast-dark-higher)) calc(52 - 8 * var(--ui-contrast-dark-lower) + 12 * var(--ui-contrast-dark-higher)) calc(52 - 8 * var(--ui-contrast-dark-lower) + 12 * var(--ui-contrast-dark-higher)));
  --ui-color-card: var(--ui-color-surface);
  --ui-color-card-hover: var(--ui-color-surface-hover);
  --ui-interactive-hover: rgb(255 255 255 / 0.1);
  --ui-interactive-hover-subtle: rgb(255 255 255 / 0.05);
  --ui-interactive-hover-strong: rgb(255 255 255 / 0.1);
  --ui-color-border: rgb(calc(72 - 16 * var(--ui-contrast-dark-lower) + 24 * var(--ui-contrast-dark-higher)) calc(72 - 16 * var(--ui-contrast-dark-lower) + 24 * var(--ui-contrast-dark-higher)) calc(72 - 16 * var(--ui-contrast-dark-lower) + 24 * var(--ui-contrast-dark-higher)));
  --ui-color-border-light: rgb(calc(88 - 24 * var(--ui-contrast-dark-lower) + 24 * var(--ui-contrast-dark-higher)) calc(88 - 24 * var(--ui-contrast-dark-lower) + 24 * var(--ui-contrast-dark-higher)) calc(88 - 24 * var(--ui-contrast-dark-lower) + 24 * var(--ui-contrast-dark-higher)));
  --ui-color-text: rgb(calc(245 - 17 * var(--ui-contrast-dark-lower) + 10 * var(--ui-contrast-dark-higher)) calc(245 - 17 * var(--ui-contrast-dark-lower) + 10 * var(--ui-contrast-dark-higher)) calc(245 - 17 * var(--ui-contrast-dark-lower) + 10 * var(--ui-contrast-dark-higher)));
  --ui-color-text-active: rgb(255 255 255);
  --ui-color-text-secondary: rgb(calc(212 - 16 * var(--ui-contrast-dark-lower) + 20 * var(--ui-contrast-dark-higher)) calc(212 - 16 * var(--ui-contrast-dark-lower) + 20 * var(--ui-contrast-dark-higher)) calc(212 - 16 * var(--ui-contrast-dark-lower) + 20 * var(--ui-contrast-dark-higher)));
  --ui-color-text-muted: rgb(calc(180 - 12 * var(--ui-contrast-dark-lower) + 22 * var(--ui-contrast-dark-higher)) calc(180 - 12 * var(--ui-contrast-dark-lower) + 22 * var(--ui-contrast-dark-higher)) calc(180 - 12 * var(--ui-contrast-dark-lower) + 22 * var(--ui-contrast-dark-higher)));
  --ui-color-accent: var(--ui-brand-accent);
  --ui-color-accent-hover: #6366ff;
  --ui-color-accent-soft: #20204a;
  --ui-color-accent-soft-text: #d4d3ff;
  --ui-color-accent-foreground: #f0f0f0;
  --ui-color-success: #34d399;
  --ui-color-danger: #f87171;
  --ui-color-warning: #fbbf24;
  --ui-color-warning-text: #fbbf24;
  --ui-color-info: #60a5fa;
  --ui-color-info-soft: #172554;
  --ui-color-info-soft-text: #bfdbfe;
  --ui-color-content-image: #93c5fd;
  --ui-color-content-image-soft: #172554;
  --ui-color-content-video: #c4b5fd;
  --ui-color-content-video-soft: #2e1065;
  --ui-color-content-text: #6ee7b7;
  --ui-color-content-text-soft: #064e3b;
  --ui-color-content-audio: #fcd34d;
  --ui-color-content-audio-soft: #451a03;
  --ui-color-content-other: #d4d4d8;
  --ui-color-content-other-soft: #27272a;
  --ui-color-tooltip-bg: rgb(calc(220 - 12 * var(--ui-contrast-dark-lower) + 18 * var(--ui-contrast-dark-higher)) calc(220 - 12 * var(--ui-contrast-dark-lower) + 18 * var(--ui-contrast-dark-higher)) calc(220 - 12 * var(--ui-contrast-dark-lower) + 18 * var(--ui-contrast-dark-higher)));
  --ui-color-tooltip-text: rgb(calc(24 + 5 * var(--ui-contrast-dark-lower) - 7 * var(--ui-contrast-dark-higher)) calc(24 + 5 * var(--ui-contrast-dark-lower) - 7 * var(--ui-contrast-dark-higher)) calc(24 + 5 * var(--ui-contrast-dark-lower) - 7 * var(--ui-contrast-dark-higher)));
  --ui-color-nav-bg: rgb(calc(16 + 6 * var(--ui-contrast-dark-lower) - 8 * var(--ui-contrast-dark-higher)) calc(16 + 6 * var(--ui-contrast-dark-lower) - 8 * var(--ui-contrast-dark-higher)) calc(16 + 6 * var(--ui-contrast-dark-lower) - 8 * var(--ui-contrast-dark-higher)));
  --ui-color-nav-text: var(--ui-color-text-secondary);
  --ui-color-nav-text-muted: var(--ui-color-text-muted);
  --ui-color-nav-hover: rgb(calc(52 - 8 * var(--ui-contrast-dark-lower) + 12 * var(--ui-contrast-dark-higher)) calc(52 - 8 * var(--ui-contrast-dark-lower) + 12 * var(--ui-contrast-dark-higher)) calc(52 - 8 * var(--ui-contrast-dark-lower) + 12 * var(--ui-contrast-dark-higher)));
  --ui-color-nav-active: rgb(calc(44 - 8 * var(--ui-contrast-dark-lower) + 8 * var(--ui-contrast-dark-higher)) calc(44 - 8 * var(--ui-contrast-dark-lower) + 8 * var(--ui-contrast-dark-higher)) calc(44 - 8 * var(--ui-contrast-dark-lower) + 8 * var(--ui-contrast-dark-higher)));
  --ui-color-nav-text-active: var(--ui-color-text);
  --ui-color-input: rgb(calc(44 - 8 * var(--ui-contrast-dark-lower) + 8 * var(--ui-contrast-dark-higher)) calc(44 - 8 * var(--ui-contrast-dark-lower) + 8 * var(--ui-contrast-dark-higher)) calc(44 - 8 * var(--ui-contrast-dark-lower) + 8 * var(--ui-contrast-dark-higher)));
  --ui-color-input-focus: #292942;
  --ui-color-popover: var(--ui-color-surface-elevated);
  --ui-color-popover-foreground: var(--ui-color-text);
  --ui-color-muted: var(--ui-color-input);
  --ui-color-muted-foreground: rgb(calc(180 - 12 * var(--ui-contrast-dark-lower) + 22 * var(--ui-contrast-dark-higher)) calc(180 - 12 * var(--ui-contrast-dark-lower) + 22 * var(--ui-contrast-dark-higher)) calc(180 - 12 * var(--ui-contrast-dark-lower) + 22 * var(--ui-contrast-dark-higher)));
  --ui-color-ring: var(--ui-color-accent);
  --ui-color-secondary: var(--ui-color-input);
  --ui-color-secondary-foreground: var(--ui-color-text);
  --ui-color-primary: var(--ui-color-accent);
  --ui-color-primary-foreground: var(--ui-color-accent-foreground);
  --ui-color-destructive: var(--ui-color-danger);
  --ui-color-brand: var(--ui-color-accent);
  --ui-color-brand-hover: var(--ui-color-accent-hover);
  --ui-color-brand-foreground: var(--ui-color-accent-foreground);
  --ui-color-panel: var(--ui-color-surface);
  --ui-color-line: rgb(calc(56 - 12 * var(--ui-contrast-dark-lower) + 20 * var(--ui-contrast-dark-higher)) calc(56 - 12 * var(--ui-contrast-dark-lower) + 20 * var(--ui-contrast-dark-higher)) calc(56 - 12 * var(--ui-contrast-dark-lower) + 20 * var(--ui-contrast-dark-higher)));
  --ui-color-surface-elevated: rgb(calc(40 - 8 * var(--ui-contrast-dark-lower) + 8 * var(--ui-contrast-dark-higher)) calc(40 - 8 * var(--ui-contrast-dark-lower) + 8 * var(--ui-contrast-dark-higher)) calc(40 - 8 * var(--ui-contrast-dark-lower) + 8 * var(--ui-contrast-dark-higher)));
}

/* 手机工作区为操作与缩放工具各留一行，列表仍共用同一上下边界。 */
@media (max-width: 767px) {
  html:root {
    --ui-canvas-panel-bottom: calc(var(--ui-canvas-toolbar-height) * 2 + var(--ui-floating-panel-offset));
  }
}