:root {
  --ui-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Segoe UI", sans-serif;
  --ui-font-code: "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  --ui-font-size-display: 26px;
  --ui-line-height-display: 32px;
  --ui-font-weight-display: 700;
  --ui-font-size-title: 20px;
  --ui-line-height-title: 28px;
  --ui-font-weight-title: 600;
  --ui-font-size-headline: 15px;
  --ui-line-height-headline: 20px;
  --ui-font-weight-headline: 600;
  --ui-font-size-body: 14px;
  --ui-line-height-body: 20px;
  --ui-font-weight-body: 400;
  --ui-font-size-body-strong: 14px;
  --ui-line-height-body-strong: 20px;
  --ui-font-weight-body-strong: 500;
  --ui-font-size-callout: 13px;
  --ui-line-height-callout: 18px;
  --ui-font-weight-callout: 400;
  --ui-font-size-caption: 12px;
  --ui-line-height-caption: 16px;
  --ui-font-weight-caption: 400;
  --ui-font-size-label: 11px;
  --ui-line-height-label: 14px;
  --ui-font-weight-label: 600;

  --ui-space-4: 4px;
  --ui-space-8: 8px;
  --ui-space-12: 12px;
  --ui-space-16: 16px;
  --ui-space-24: 24px;
  --ui-space-32: 32px;
  --ui-space-48: 48px;
  --ui-sidebar-width: 240px;
  --ui-toolbar-height: 52px;
  --ui-grid-columns: 4;
  --ui-canvas-grid-size: 16px;

  --ui-radius-6: 6px;
  --ui-radius-8: 8px;
  --ui-radius-12: 12px;
  --ui-radius-16: 16px;
  --ui-shadow-0: none;
  --ui-shadow-1: 0 1px 2px rgba(0, 0, 0, .06);
  --ui-shadow-2: 0 4px 16px rgba(0, 0, 0, .08);
  --ui-shadow-3: 0 12px 32px rgba(0, 0, 0, .14), 0 0 0 .5px var(--ui-separator);
  --ui-border-0: 1px solid var(--ui-separator);

  --ui-text-primary: #1D1D1F;
  --ui-text-secondary: rgba(60, 60, 67, .62);
  --ui-text-tertiary: rgba(60, 60, 67, .36);
  --ui-text-placeholder: rgba(60, 60, 67, .20);
  --ui-fill-1: rgba(120, 120, 128, .16);
  --ui-fill-2: rgba(120, 120, 128, .12);
  --ui-fill-3: rgba(120, 120, 128, .08);
  --ui-separator: rgba(60, 60, 67, .13);
  --ui-bg: #FFFFFF;
  --ui-bg-secondary: #F5F5F7;
  --ui-accent: #007AFF;
  --ui-selection-bg: rgba(0, 122, 255, .11);
  --ui-selection-text: #0060D1;
  --ui-danger: #FF3B30;
  --ui-warning: #FF9500;
  --ui-success: #34C759;
  --ui-measure-pink: #FF2D55;
  --ui-slice-outline: rgba(0, 0, 0, .45);

  --ui-palette-blue-bg: #E9F1FE;
  --ui-palette-blue-fg: #4C82E6;
  --ui-palette-indigo-bg: #EEEDFC;
  --ui-palette-indigo-fg: #7069DB;
  --ui-palette-purple-bg: #F4EDFB;
  --ui-palette-purple-fg: #9A66D1;
  --ui-palette-pink-bg: #FCEEF2;
  --ui-palette-pink-fg: #DB6B88;
  --ui-palette-orange-bg: #FEF2E6;
  --ui-palette-orange-fg: #E08A3C;
  --ui-palette-yellow-bg: #FDF6DF;
  --ui-palette-yellow-fg: #C49A2C;
  --ui-palette-green-bg: #E9F6EC;
  --ui-palette-green-fg: #4EA567;
  --ui-palette-cyan-bg: #E6F5F7;
  --ui-palette-cyan-fg: #3C9DAE;
  --ui-palette-gray-bg: #F1F1F4;
  --ui-palette-gray-fg: #80808A;

  font-variant-numeric: tabular-nums;
}

.ui-text-display, .ui-text-title, .ui-text-headline, .ui-text-body,
.ui-text-body-strong, .ui-text-callout, .ui-text-caption, .ui-text-label {
  font-family: var(--ui-font);
  font-variant-numeric: tabular-nums;
}
.ui-text-display { font-size: var(--ui-font-size-display); line-height: var(--ui-line-height-display); font-weight: var(--ui-font-weight-display); }
.ui-text-title { font-size: var(--ui-font-size-title); line-height: var(--ui-line-height-title); font-weight: var(--ui-font-weight-title); }
.ui-text-headline { font-size: var(--ui-font-size-headline); line-height: var(--ui-line-height-headline); font-weight: var(--ui-font-weight-headline); }
.ui-text-body { font-size: var(--ui-font-size-body); line-height: var(--ui-line-height-body); font-weight: var(--ui-font-weight-body); }
.ui-text-body-strong { font-size: var(--ui-font-size-body-strong); line-height: var(--ui-line-height-body-strong); font-weight: var(--ui-font-weight-body-strong); }
.ui-text-callout { font-size: var(--ui-font-size-callout); line-height: var(--ui-line-height-callout); font-weight: var(--ui-font-weight-callout); color: var(--ui-text-secondary); }
.ui-text-caption { font-size: var(--ui-font-size-caption); line-height: var(--ui-line-height-caption); font-weight: var(--ui-font-weight-caption); color: var(--ui-text-secondary); }
.ui-text-label { font-size: var(--ui-font-size-label); line-height: var(--ui-line-height-label); font-weight: var(--ui-font-weight-label); color: var(--ui-text-secondary); }