:root, :host {
    --font-sans: "Source Han Sans SC Web", "PingFang SC", "Microsoft YaHei", sans-serif;
    --font-mono: "SF Mono", "JetBrains Mono", ui-monospace, monospace;
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --font-disp: "Noto Serif SC", "Source Han Serif SC", "STZhongsong", "SimSun", serif;
    --font-num: "Barlow Num", "Source Han Sans SC Web", sans-serif;
    --shadow-card: 0 1px 2px rgba(16, 32, 64, .04), 0 10px 28px -14px rgba(16, 32, 64, .16);
  }
:root {
  --bg: #f2f5fa;
  --bg-glow-1: rgba(47, 107, 255, .11);
  --bg-glow-2: rgba(0, 194, 255, .09);
  --dot: rgba(16, 32, 64, .07);
  --surface: #ffffff;
  --surface-glass: rgba(255, 255, 255, .72);
  --surface-sunk: #f6f8fc;
  --border: rgba(16, 32, 64, .07);
  --border-strong: rgba(16, 32, 64, .13);
  --text: #0e1a33;
  --text-2: #3b4560;
  --text-3: #545e78;
  --on-brand: #ffffff;
  --brand: #2f6bff;
  --brand-2: #00c2ff;
  --brand-3: #7fd8ff;
  --brand-grad: linear-gradient(120deg, #2f6bff 0%, #00c2ff 100%);
  --ai-1: #7b5cff;
  --ai-grad: linear-gradient(120deg, #7b5cff 0%, #2f8cff 100%);
  --hairline-grad: linear-gradient(90deg, #2f6bff, #00c2ff 45%, #7b5cff);
  --danger: #e5484d;
  --danger-soft: #fdecec;
  --warn: #d97706;
  --warn-soft: #fef4e2;
  --ok: #10a37f;
  --ok-soft: #e5f7f1;
  --info: #2f6bff;
  --info-soft: #eaf0ff;
  --muted-soft: #eef1f6;
  --danger-2: #ff7a7e;
  --danger-wash: #fff5f5;
  --gold: #b45309;
  --gold-soft: #fff4dc;
  --info-soft-hover: #dfe8ff;
  --accent-neutral: #c9d3e5;
  --state-todo: #2f6bff;
  --state-todo-soft: #eaf0ff;
  --state-doing: #0891b2;
  --state-doing-soft: #e3f6fa;
  --state-due: #d97706;
  --state-due-soft: #fef4e2;
  --state-late: #e5484d;
  --state-late-soft: #fdecec;
  --ink: #0e1a33;
  --shadow-ink: #102040;
  --white: #ffffff;
  --black: #000000;
  --mark-bg: #17324d;
  --mark-ink: #6cc8ff;
  --mark-bg-active: #1d4166;
  --mark-ink-active: #22d3ee;
  --side-bg: linear-gradient(180deg, #0a1330 0%, #0b1b45 60%, #0c2453 100%);
  --side-grid: rgba(255, 255, 255, .035);
  --side-text: rgba(226, 234, 255, .74);
  --side-text-dim: rgba(226, 234, 255, .42);
  --side-active-bg: rgba(255, 255, 255, .08);
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow-card: 0 1px 2px rgba(16, 32, 64, .04), 0 10px 28px -14px rgba(16, 32, 64, .16);
  --shadow-hover: 0 2px 4px rgba(16, 32, 64, .05), 0 18px 36px -14px rgba(47, 107, 255, .28);
  --font-sans: "Source Han Sans SC Web", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-num: "Barlow Num", "Source Han Sans SC Web", sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", ui-monospace, monospace;
  --overlay: var(--ink);
  @supports (color: color-mix(in lab, red, red)) {
    --overlay: color-mix(in srgb, var(--ink) 48%, transparent);
  }
  --focus: var(--brand);
}
[data-theme="screen"] {
  --bg: #06101e;
  --bg-glow-1: #102d4d;
  --bg-glow-2: #072636;
  --dot: #102b43;
  --surface: #0b1a2e;
  --surface-glass: #102239;
  --surface-sunk: #081526;
  --border: color-mix(in srgb, #6cc8ff 15%, transparent);
  --border-strong: color-mix(in srgb, #6cc8ff 30%, transparent);
  --text: #eaf5ff;
  --text-2: #b4cce2;
  --text-3: #8faac3;
  --on-brand: #06101e;
  --accent-neutral: #29435c;
  --brand: #6cc8ff;
  --brand-2: #22d3ee;
  --brand-grad: linear-gradient(120deg, #6cc8ff, #22d3ee);
  --info: #6cc8ff;
  --info-soft: #102e48;
  --info-soft-hover: #163b58;
  --ok: #22d3b1;
  --ok-soft: #0d3337;
  --warn: #f5bd64;
  --warn-soft: #352c22;
  --danger: #ff8990;
  --danger-soft: #382332;
  --muted-soft: #13273b;
  --gold: #f5bd64;
  --gold-soft: #352c22;
  --state-todo: var(--info);
  --state-todo-soft: var(--info-soft);
  --state-doing: var(--brand-2);
  --state-doing-soft: #0a343d;
  --state-due: var(--warn);
  --state-due-soft: var(--warn-soft);
  --state-late: var(--danger);
  --state-late-soft: var(--danger-soft);
  --danger-wash: var(--danger-soft);
  --focus: #6cc8ff;
  --shadow-card: 0 10px 30px color-mix(in srgb, #000000 22%, transparent);
  --shadow-hover: 0 10px 30px color-mix(in srgb, #22d3ee 10%, transparent);
}
  [data-theme="screen"] {
    color: var(--text);
    background: var(--bg);
  }