/* Design tokens (ZCode) — agent-demo · 0-dep */
  /* ============================================================
     设计系统 Token — 提取自 ZCode Design System
     ============================================================ */
  :root{
    /* banner-gen 首页列宽：外层含左右各 12px 留白。 */
    --layout-home-max:800px;


    /* —— Font families —— */
    --font-sans:-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
    --font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New","Microsoft YaHei UI","Microsoft YaHei","PingFang SC","Noto Sans CJK SC",monospace;

    /* —— UI font scale（硬约束：仅允许 text-ui-*，改字号只动 --ui-font-size） —— */
    --ui-font-size:14px;   /* UI baseline; conversation/code have their own scale. */
    --text-ui-2xl:calc(var(--ui-font-size) + 10px);   /* 24 — page heading */
    --text-ui-xl:calc(var(--ui-font-size) + 4px);     /* 18 — h1 */
    --text-ui-lg:calc(var(--ui-font-size) + 2px);      /* 16 — h2 */
    --text-ui-base:var(--ui-font-size);                /* 14 — body / 标题 / 按钮 */
    --text-ui-caption:calc(var(--ui-font-size) - 1px); /* 13 — 一步低于 body 的紧凑说明 */
    --text-ui-sm:calc(var(--ui-font-size) - 2px);      /* 12 — 次要文案 / tooltip / inline code */
    --text-ui-xs:calc(var(--ui-font-size) - 3px);      /* 11 — badge / 快捷键 / 弱元数据 */
    --text-ui-2xs:calc(var(--ui-font-size) - 4px);     /* 10 — 仅图表轴家具，禁止用于正文 */
    --text-display:calc(var(--ui-font-size) * 2);      /* 28 — 价格/空态装饰，禁止正文 */
    --text-display-sm:calc(var(--ui-font-size) + 10px); /* 24 — 文档 h1 / 空态图标 */
    --text-mobile-input-safe:16px;                     /* 固定 16，防 iOS 聚焦缩放；不随 ui-font-size */
    --tracking-wf-label:0.09em;

    --gpt-fs-heading-lg:calc(var(--ui-font-size) * 24 / 14);
    --gpt-fs-heading-sm:calc(var(--ui-font-size) * 18 / 14);
    --gpt-fs-lg:calc(var(--ui-font-size) * 16 / 14);
    --gpt-fs-base:calc(var(--ui-font-size) * 14 / 14);
    --gpt-fs-sm:calc(var(--ui-font-size) * 13 / 14);
    --gpt-fs-xs:calc(var(--ui-font-size) * 11 / 14);
    --mgmt-fs-heading-lg:calc(var(--ui-font-size) * 24 / 14);
    --mgmt-fs-lg:calc(var(--ui-font-size) * 16 / 14);
    --mgmt-fs-base:calc(var(--ui-font-size) * 14 / 14);
    --mgmt-fs-sm:calc(var(--ui-font-size) * 13 / 14);
    --mgmt-fs-xs:calc(var(--ui-font-size) * 11 / 14);
    --sub-fs-heading-lg:calc(var(--ui-font-size) * 24 / 14);
    --sub-fs-plan:calc(var(--ui-font-size) * 18 / 14);
    --sub-fs-price:calc(var(--ui-font-size) * 28 / 14);
    --sub-fs-lg:calc(var(--ui-font-size) * 16 / 14);
    --sub-fs-base:calc(var(--ui-font-size) * 14 / 14);
    --sub-fs-sm:calc(var(--ui-font-size) * 13 / 14);
    --sub-fs-xs:calc(var(--ui-font-size) * 11 / 14);
    --control-h-10:40px;
    --page-directory-pad:48px;
    --page-settings-max:768px;
    --page-appearance-max:864px;
    --page-wide-max:960px;
    --font-content:var(--font-sans);
    --code-font-size:13px;
    --appearance-accent:var(--color-ring);
    --ui-font-weight:400;
    --content-font-weight:400;
    --code-font-weight:400;
    /* —— Icon / control size baselines（几何，不随字号设置缩放） —— */
    --size-3:12px;--size-3-5:14px;--size-4:16px;--size-4-5:18px;--size-5:20px;--size-5-5:22px;--size-6:24px;--size-7:28px;--size-8:32px;--size-9:36px;
    --control-h-6:24px;--control-h-7:28px;--control-h-8:32px;--control-h-9:36px;

    /* —— Spacing (4px base) —— */
    --sp-0:0;--sp-px:1px;--sp-0-5:2px;--sp-1:4px;--sp-1-5:6px;--sp-2:8px;--sp-2-5:10px;--sp-3:12px;--sp-3-5:14px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-7:28px;--sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-14:56px;--sp-16:64px;

    /* —— Border radius（嵌套降级 xl→lg→md→sm；2xl 仅白名单例外） —— */
    --radius:8px;
    --radius-sm:calc(var(--radius) - 4px);   /* 4 */
    --radius-md:calc(var(--radius) - 2px);   /* 6 */
    --radius-lg:calc(var(--radius) + 4px);   /* 12 */
    --radius-xl:calc(var(--radius) + 8px);   /* 16 */
    --radius-2xl:calc(var(--radius) + 12px); /* 20 */
    --radius-2xs:2px;                        /* Codex radius-2xs */
    --radius-3xl:calc(var(--radius) + 16px); /* 24 — Codex 4xl */
    /* Codex CodeBlock 容器圆角 10px（radius-md ×1.25 档） */
    --radius-codeblock:10px;
    /* Codex 固定件：气泡 / Composer 圆角锁死 22px（user-message.css / --composer-radius） */
    --radius-bubble:22px;
    --radius-composer:22px;
    --radius-full:9999px;

    /* —— Shadows（布局靠分层；overlay=md；toast/强调=lg）· 数值对标 Codex electron 生产 CSS —— */
    --shadow-xs:0 1px 2px -1px rgba(0,0,0,.08);
    --shadow-sm:0 1px 2px -1px rgba(0,0,0,.08);
    --shadow-md:0 2px 4px -1px rgba(0,0,0,.08);
    --shadow-lg:0 4px 8px -2px rgba(0,0,0,.1);
    --shadow-xl:0 8px 16px -4px rgba(0,0,0,.12);
    --shadow-popover:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);
    --shadow-menu:0 0 0 .5px var(--color-border),0 8px 16px -4px rgba(0,0,0,.12);
    --shadow-tooltip:0 8px 18px rgba(15,23,42,.2);
    --shadow-card:0 4px 16px 0 rgba(0,0,0,.05);
    --elevation-composer:0 0 0 1px rgba(0,0,0,.04),0 2px 8px 0 rgba(0,0,0,.04),0 4px 80px 8px rgba(0,0,0,.024);

    /* —— Layout —— */
    --nav-w:52px;--menu-w:240px;--popover-w-sm:160px;--popover-w-md:200px;--popover-w-lg:280px;--dialog-w-sm:320px;--dialog-w-md:420px;--dialog-w-lg:560px;--dialog-w-xl:760px;--dialog-w-2xl:920px;--content-h-xs:140px;--content-h-sm:170px;--content-h-md:200px;--content-h-lg:240px;--content-h-xl:360px;--content-max-fluid:min(900px,92vw);--content-w-xs:140px;--content-w-sm:220px;--content-w-md:300px;--content-w-lg:340px;--content-w-xl:360px;--rail-ico:54px;--switch-w:34px;--kbd-min:118px;--right-w:45vw;--sidebar-w:264px;--content-max:1200px;
    --shell-inset:4px;--panel-radius:var(--radius-lg);
    --workspace-panel-radius:var(--radius-lg);
    /* 工作区卡片外框：对标 ZCode conversation/side pane `border-border` */
    --panel-frame-border:var(--color-border);
    /* ============================================================
       Semantic Colors — ZCode .theme-zai-light（原样；仅展开 DEMO 无的 Tailwind 色阶）
       ============================================================ */
    --animated-gradient-text-soft:rgba(13, 13, 13, 0.22);
    --animated-gradient-text-strong:rgba(13, 13, 13, 1);
    --color-ring:#0169cc;
    --color-accent:#ebf4ff;
    --color-agent-node:var(--color-file-node);
    --color-agent-node-foreground:var(--color-file-node-foreground);
    --color-agent-node-hover:var(--color-file-node-hover);
    --color-background:#f9f9f9;   /* Codex surface-secondary */
    --color-background-alt:color-mix(in oklab, var(--color-background) 70%, transparent);
    --color-background-win-alt:#ececee;
    --color-border:rgba(26, 28, 31, 0.08);        /* Codex fg 8% */
    --color-border-hover:rgba(26, 28, 31, 0.12);  /* Codex border-strong 12% */
    --color-brand:#000000;
    --color-brand-weak:color-mix(in oklab,var(--color-brand) 8%,transparent);
    --color-card:#ffffff;
    --color-card-border:var(--color-border);
    --color-card-selected:var(--color-input);
    --color-code-bg:#f5f5f5;
    --color-code-border:var(--color-border);
    --color-code-fg:var(--color-foreground);
    /* Codex 对话内 CodeBlock 壳底（浅 #fcfcfc / 深 #131313） */
    --color-codeblock:#fcfcfc;
    /* Codex Plan 卡 surface = text 5% */
    --color-plan-surface:color-mix(in oklab, var(--color-foreground) 5%, transparent);
    /* 强制暗代码表面（追溯/工具/rf-codebox，不随 Light 主题洗白） */
    --color-code-surface:#1e1e1e;
    --color-code-surface-border:#2a2a2a;
    --color-code-surface-fg:#d4d4d4;
    /* 暗代码表面语法色 */
    --color-syntax-keyword:#f472b6;
    --color-syntax-string:#86efac;
    --color-syntax-highlight:#fde68a;
    --color-syntax-command:#7dd3fc;
    --color-syntax-error:#fca5a5;
    --color-syntax-comment:color-mix(in oklab,var(--color-code-surface-fg) 55%,transparent);
    --color-command-node:rgba(86, 98, 112, 0.1);
    --color-command-node-foreground:#566270;
    --color-command-node-hover:rgba(86, 98, 112, 0.16);
    --color-context-breakdown-1:#0b7fff;
    --color-context-breakdown-2:#338fff;
    --color-context-breakdown-3:#5ca7ff;
    --color-context-breakdown-4:#85bbff;
    --color-context-breakdown-5:#acd0ff;
    --color-context-breakdown-6:#c8ddff;
    --color-context-breakdown-7:#e0ecff;
    --color-destructive:#e02e2a;   /* Codex red-500 */
    --color-destructive-foreground:#ffffff;
    --color-destructive-surface:rgba(224,49,49,.08);
    --color-diff-added:#1e8a3e;
    --color-diff-added-foreground:#ffffff;
    --color-diff-removed:#e03131;
    --color-diff-removed-foreground:#ffffff;
    /* Codex 对话内 Diff 交付（docs/Codex渲染规格摘录.md「Diff 交付」；lab mix 百分比坐实） */
    --diff-added-fg:#00a240;   /* Codex git added 浅 */
    --diff-deleted-fg:#ba2623;  /* Codex git deleted 浅 */
    --diff-surface:var(--color-elevated-secondary);
    --diff-add-row-bg:color-mix(in lab, var(--diff-surface) 88%, #00a240);
    --diff-del-row-bg:color-mix(in lab, var(--diff-surface) 88%, #ba2623);
    --diff-add-gutter-bg:color-mix(in lab, var(--diff-surface) 91%, #00a240);
    --diff-del-gutter-bg:color-mix(in lab, var(--diff-surface) 91%, #ba2623);
    --diff-add-row-bg-hover:color-mix(in lab, var(--diff-surface) 80%, #00a240);
    --diff-del-row-bg-hover:color-mix(in lab, var(--diff-surface) 80%, #ba2623);
    --color-feedback-privacy-hint:#ca8a04;
    --color-file-node:rgba(26, 112, 184, 0.1);
    --color-file-node-foreground:#1a70b8;
    --color-file-node-hover:rgba(26, 112, 184, 0.16);
    --color-find-highlight:#fff4eb;
    --color-find-highlight-active:#ffb26b;
    --color-foreground:#1a1c1f;   /* Codex fg */
    --color-foreground-inverse:#ffffff;
    --color-foreground-subtle:color-mix(in oklab, #1a1c1f 65%, transparent);
    --color-foreground-subtlest:color-mix(in oklab, #1a1c1f 50%, transparent);
    --color-git-added:#1e8a3e;
    --color-git-deleted:#e03131;
    --color-git-descendant:#e07b00;
    --color-git-ignored:var(--color-foreground-subtlest);
    --color-git-modified:#e07b00;
    --color-git-none:var(--color-foreground);
    --color-git-renamed:#0b7fff;
    --color-git-untracked:#1e8a3e;
    --color-header:#ffffff;
    --color-hover:rgba(13, 13, 13, 0.05);
    --color-icon-blue:var(--color-terminal-bright-blue);
    --color-idle-task:#9e77ed;
    --color-idle-task-surface:#f5f3ff;
    --color-input:#ffffff;
    --color-input-border:var(--color-border);
    --color-input-border-focused:var(--color-brand);
    --color-input-border-hover:var(--color-border-hover);
    --color-input-focused:var(--color-input);
    --color-interaction-ask-fill:rgba(70, 191, 114, 0.2);
    --color-interaction-ask-foreground:#0066dd;
    --color-interaction-ask-surface:#ebf4ff;
    --color-interaction-confirmation-fill:var(--color-interaction-ask-fill);
    --color-interaction-confirmation-foreground:#008635;
    --color-interaction-confirmation-surface:#edfaf2;   /* Codex success-surface */
    --color-markdown-inline-code:var(--color-tag);
    --color-menu:#ffffff;
    --color-menu-hover:rgba(0, 0, 0, 0.05);   /* Codex ghost hover 5% */
    --color-overlay:rgba(16,20,30,.42);
    --color-panel:#ffffff;
    --color-plugin-node:rgba(184, 122, 26, 0.1);
    --color-plugin-node-foreground:#b87a1a;
    --color-plugin-node-hover:rgba(184, 122, 26, 0.16);
    --color-plugin-paid-plan-badge:#ffe3c8;
    --color-plugin-paid-plan-badge-foreground:#4b280f;
    --color-popover:#ffffff;
    --color-popover-border:var(--color-border);
    --color-popover-foreground:var(--color-foreground);
    --color-popover-header:#f8f8f8;
    --color-primary:#000000;
    --color-primary-foreground:#ffffff;
    --color-secondary:#f3f3f3;   /* Codex 用户气泡 compact 底 gray-fixed-75 */
    --color-secondary-foreground:#000000;
    /* Codex ApprovalCard 壳 bg-surface-elevated-secondary（gray-50） */
    --color-elevated-secondary:#f9f9f9;
    /* Codex ApprovalCard 命令框 bg-surface-tertiary（gray-75） */
    --color-surface-tertiary:#f3f3f3;
    --color-selected:rgba(13, 13, 13, 0.05);
    --color-session-node:rgba(20, 128, 122, 0.1);
    --color-session-node-foreground:#14807a;
    --color-session-node-hover:rgba(20, 128, 122, 0.16);
    --color-sidebar:#f0f0f0;
    --color-skill-node:rgba(116, 83, 176, 0.1);
    --color-skill-node-foreground:#7453b0;
    --color-skill-node-hover:rgba(116, 83, 176, 0.16);
    --color-subagent-node:rgba(111, 122, 47, 0.1);
    --color-subagent-node-foreground:#6f7a2f;
    --color-subagent-node-hover:rgba(111, 122, 47, 0.16);
    --color-success:#00a240;   /* Codex green-500 */
    --color-success-foreground:#ffffff;
    --color-success-surface:rgba(30,138,62,.08);
    --color-surface:rgba(13, 13, 13, 0.03);
    --color-surface-hover:rgba(13, 13, 13, 0.05);
    --color-tab:#f0f0f0;
    --color-tab-active:#ffffff;
    --color-tab-border:var(--color-border);
    --color-tag:#e6e6e6;
    --color-terminal-bg:var(--color-background);
    --color-terminal-black:#5c5c5c;
    --color-terminal-blue:#0b7fff;
    --color-terminal-bright-black:#888888;
    --color-terminal-bright-blue:#0066dd;
    --color-terminal-bright-cyan:#0aa7a7;
    --color-terminal-bright-green:#1e8a3e;
    --color-terminal-bright-magenta:#9e77ed;
    --color-terminal-bright-red:#e03131;
    --color-terminal-bright-white:#0d0d0d;
    --color-terminal-bright-yellow:#e07b00;
    --color-terminal-cursor:#0d0d0d;
    --color-terminal-cursor-accent:var(--color-background);
    --color-terminal-cyan:#0aa7a7;
    --color-terminal-fg:var(--color-foreground);
    --color-terminal-green:#1e8a3e;
    --color-terminal-magenta:#9e77ed;
    --color-terminal-red:#e03131;
    --color-terminal-selection:rgba(11, 127, 255, 0.22);
    --color-terminal-selection-inactive:rgba(13, 13, 13, 0.1);
    --color-terminal-white:#adadad;
    --color-terminal-yellow:#e07b00;
    --color-toast:#ffffff;
    /* Codex 浅色 tooltip = 深色气泡（--color-background-primary-solid #1a1c1f） */
    --color-tooltip:#1a1c1f;
    --color-tooltip-foreground:#ffffff;
    --color-tooltip-tag:#e6e6e6;
    --color-tooltip-tag-foreground:#5c5c5c;
    --color-link:#0169cc;   /* Codex blue-500（hover #003f7a） */
    --color-trajectory-assistant:#0f766e;
    --color-trajectory-reasoning:#7c3aed;
    --color-trajectory-tool-call:#d97706;
    --color-trajectory-tool-result:#0284c7;
    --color-trajectory-user:#2563eb;
    --color-usage-chart-1:#0b7fff;
    --color-usage-chart-2:#1e8a3e;
    --color-usage-chart-3:#9e77ed;
    --color-usage-chart-4:#e03131;
    --color-usage-chart-5:#e07b00;
    --color-usage-chart-6:#0aa7a7;
    --color-usage-heatmap-0:color-mix(in oklab, #0b7fff 0%, var(--color-surface));
    --color-usage-heatmap-1:color-mix(in oklab, #0b7fff 18%, var(--color-surface));
    --color-usage-heatmap-2:color-mix(in oklab, #0b7fff 36%, var(--color-surface));
    --color-usage-heatmap-3:color-mix(in oklab, #0b7fff 58%, var(--color-surface));
    --color-usage-heatmap-4:color-mix(in oklab, #0066dd 82%, var(--color-surface));
    --color-warning:#e25507;   /* Codex orange-500 */
    --color-warning-foreground:#ffffff;
    --color-warning-surface:rgba(224,123,0,.08);
    --color-workflow-rule:rgba(13, 13, 13, 0.055);
    --color-workflow-trace:rgba(13, 13, 13, 0.3);
    --color-workflow-trace-strong:rgba(13, 13, 13, 0.55);

    /* ============================================================
       兼容别名（只读；新样式勿用）。--blue → icon-blue（非 brand）
       ============================================================ */
    --bg:var(--color-background);
    --panel:var(--color-panel);
    --elev:var(--color-surface);
    --border:var(--color-border);
    --border2:var(--color-border-hover);
    --ink:var(--color-foreground);
    --gray:var(--color-foreground-subtle);
    --gray2:var(--color-foreground-subtlest);
    --red:var(--color-destructive);
    --red-d:var(--color-destructive);
    --green:var(--color-success);
    --green-d:var(--color-success);
    --green-bg:var(--color-success-surface);
    --blue:var(--color-icon-blue);
    --orange:var(--color-warning);
    --purple:var(--color-idle-task);
    --radius-s:var(--radius);

  }

  /* —— Dark = ZCode .theme-zai-dark —— */
  .dark, html.theme-zai-dark{
    --panel-frame-border:var(--color-border);
    --animated-gradient-text-soft:rgba(255, 255, 255, 0.22);
    --animated-gradient-text-strong:rgba(255, 255, 255, 1);
    --color-accent:#001d3d;
    --color-agent-node:var(--color-file-node);
    --color-agent-node-foreground:var(--color-file-node-foreground);
    --color-agent-node-hover:var(--color-file-node-hover);
    --color-background:#181818;
    --color-background-alt:color-mix(in oklab, var(--color-background-win-alt) 60%, transparent);
    --color-background-win-alt:#212121;
    --color-border:rgba(255, 255, 255, 0.08);
    --color-border-hover:rgba(255, 255, 255, 0.16);
    --color-brand:#ffffff;
    --color-brand-weak:color-mix(in oklab,var(--color-brand) 14%,transparent);
    --color-card:#282828;   /* Codex elevated = gray-fixed-750 */
    --color-card-border:var(--color-border);
    --color-card-selected:var(--color-input);
    --color-code-bg:#1e1e1e;
    --color-code-border:var(--color-border);
    --color-code-fg:var(--color-foreground);
    /* Codex 对话内 CodeBlock 壳底 */
    --color-codeblock:#131313;
    /* Codex Plan 卡 surface = text 5% */
    --color-plan-surface:color-mix(in oklab, var(--color-foreground) 5%, transparent);
    --color-code-surface:#1e1e1e;
    --color-code-surface-border:#2a2a2a;
    --color-code-surface-fg:#d4d4d4;
    --color-syntax-keyword:#f472b6;
    --color-syntax-string:#86efac;
    --color-syntax-highlight:#fde68a;
    --color-syntax-command:#7dd3fc;
    --color-syntax-error:#fca5a5;
    --color-syntax-comment:color-mix(in oklab,var(--color-code-surface-fg) 55%,transparent);
    --color-command-node:rgba(154, 166, 180, 0.14);
    --color-command-node-foreground:#b5c0cc;
    --color-command-node-hover:rgba(154, 166, 180, 0.2);
    --color-context-breakdown-1:#4099ff;
    --color-context-breakdown-2:#66adff;
    --color-context-breakdown-3:#80beff;
    --color-context-breakdown-4:#9dceff;
    --color-context-breakdown-5:#b9ddff;
    --color-context-breakdown-6:#d0e8ff;
    --color-context-breakdown-7:#e4f1ff;
    --color-destructive:#ff6764;   /* Codex dark red */
    --color-destructive-foreground:#ffffff;
    --color-destructive-surface:rgba(255,92,92,.12);
    --color-diff-added:#46bf72;
    --color-diff-added-foreground:#000000;
    --color-diff-removed:#ff5c5c;
    --color-diff-removed-foreground:#000000;
    /* Codex 对话内 Diff 交付（深：行底 80%/75%，行号列 85%，hover 70%） */
    --diff-added-fg:#40c977;   /* Codex git added 深 */
    --diff-deleted-fg:#fa423e;  /* Codex git deleted 深 */
    --diff-surface:color-mix(in srgb, #fff 3%, var(--color-background));
    --diff-add-row-bg:color-mix(in lab, var(--diff-surface) 80%, #40c977);
    --diff-del-row-bg:color-mix(in lab, var(--diff-surface) 75%, #fa423e);
    --diff-add-gutter-bg:color-mix(in lab, var(--diff-surface) 85%, #40c977);
    --diff-del-gutter-bg:color-mix(in lab, var(--diff-surface) 85%, #fa423e);
    --diff-add-row-bg-hover:color-mix(in lab, var(--diff-surface) 70%, #40c977);
    --diff-del-row-bg-hover:color-mix(in lab, var(--diff-surface) 70%, #fa423e);
    --color-feedback-privacy-hint:#fde047;
    --color-file-node:rgba(112, 174, 224, 0.16);
    --color-file-node-foreground:#8fc5ef;
    --color-file-node-hover:rgba(112, 174, 224, 0.22);
    --color-find-highlight:#542500;
    --color-find-highlight-active:#ff8a30;
    --color-foreground:#dfdfdf;
    --color-foreground-inverse:#000000;
    --color-foreground-subtle:color-mix(in oklab, #dfdfdf 65%, transparent);
    --color-foreground-subtlest:color-mix(in oklab, #dfdfdf 50%, transparent);
    --color-git-added:#46bf72;
    --color-git-deleted:#ff5c5c;
    --color-git-descendant:#ff8a30;
    --color-git-ignored:var(--color-foreground-subtlest);
    --color-git-modified:#ff8a30;
    --color-git-none:var(--color-foreground);
    --color-git-renamed:#4099ff;
    --color-git-untracked:#46bf72;
    --color-header:#202020;
    --color-hover:rgba(255, 255, 255, 0.05);
    --color-icon-blue:var(--color-terminal-bright-blue);
    --color-idle-task:#7b5ce5;
    --color-idle-task-surface:#160d38;
    --color-input:#282828;
    --color-input-border:var(--color-border);
    --color-input-border-focused:var(--color-brand);
    --color-input-border-hover:var(--color-border-hover);
    --color-input-focused:var(--color-input);
    --color-interaction-ask-fill:rgba(70, 191, 114, 0.24);
    --color-interaction-ask-foreground:#80beff;
    --color-interaction-ask-surface:#001d3d;
    --color-interaction-confirmation-fill:var(--color-interaction-ask-fill);
    --color-interaction-confirmation-foreground:#40c977;
    --color-interaction-confirmation-surface:rgba(70, 191, 114, 0.16);
    --color-markdown-inline-code:var(--color-tag);
    --color-menu:#181818;   /* Codex electron 菜单底 = surface */
    --color-menu-hover:rgba(255, 255, 255, 0.1);
    --color-overlay:rgba(0,0,0,.55);
    --color-panel:#202020;
    --color-plugin-node:rgba(224, 174, 112, 0.16);
    --color-plugin-node-foreground:#efc58f;
    --color-plugin-node-hover:rgba(224, 174, 112, 0.22);
    --color-plugin-paid-plan-badge:#5a341b;
    --color-plugin-paid-plan-badge-foreground:#ffd8b8;
    --color-popover:#282828;
    --color-popover-border:var(--color-border);
    --color-popover-foreground:var(--color-foreground);
    --color-popover-header:#202020;
    --color-primary:#ffffff;
    --color-primary-foreground:#000000;
    --color-secondary:#363636;
    --color-secondary-foreground:#ffffff;
    /* Codex ApprovalCard 壳 bg-surface-elevated-secondary（gray-400） */
    --color-elevated-secondary:#414141;
    /* Codex ApprovalCard 命令框 bg-surface-tertiary（gray-50） */
    --color-ring:#0285ff;
    --color-surface-tertiary:#131313;
    --color-selected:rgba(255, 255, 255, 0.1);
    --color-session-node:rgba(104, 196, 188, 0.16);
    --color-session-node-foreground:#93d8d2;
    --color-session-node-hover:rgba(104, 196, 188, 0.22);
    --color-sidebar:#161616;
    --color-skill-node:rgba(166, 137, 218, 0.16);
    --color-skill-node-foreground:#bda5e6;
    --color-skill-node-hover:rgba(166, 137, 218, 0.22);
    --color-subagent-node:rgba(183, 189, 117, 0.16);
    --color-subagent-node-foreground:#c8cd90;
    --color-subagent-node-hover:rgba(183, 189, 117, 0.22);
    --color-success:#40c977;
    --color-success-foreground:#000000;
    --color-success-surface:rgba(70,191,114,.12);
    --color-surface:rgba(255, 255, 255, 0.05);
    --color-surface-hover:rgba(255, 255, 255, 0.1);
    --color-tab:#202020;
    --color-tab-active:#161616;
    --color-tab-border:var(--color-border);
    --color-tag:#363636;
    --color-terminal-bg:var(--color-background);
    --color-terminal-black:#363636;
    --color-terminal-blue:#4099ff;
    --color-terminal-bright-black:#747474;
    --color-terminal-bright-blue:#80beff;
    --color-terminal-bright-cyan:#8ee5e5;
    --color-terminal-bright-green:#87d9a4;
    --color-terminal-bright-magenta:#a888f2;
    --color-terminal-bright-red:#ff9999;
    --color-terminal-bright-white:#f8f8f8;
    --color-terminal-bright-yellow:#ffb26b;
    --color-terminal-cursor:#f8f8f8;
    --color-terminal-cursor-accent:#161616;
    --color-terminal-cyan:#42c8c8;
    --color-terminal-fg:var(--color-foreground);
    --color-terminal-green:#46bf72;
    --color-terminal-magenta:#7b5ce5;
    --color-terminal-red:#ff5c5c;
    --color-terminal-selection:rgba(64, 153, 255, 0.28);
    --color-terminal-selection-inactive:rgba(255, 255, 255, 0.1);
    --color-terminal-white:#adadad;
    --color-terminal-yellow:#ff8a30;
    --color-toast:#282828;
    --elevation-composer:inset 0 0 1px 0 rgba(255,255,255,.2);   /* Codex 深色 composer 用 inset hairline */
    --color-tooltip:#181818;
    --color-tooltip-foreground:#dfdfdf;
    --color-tooltip-tag:#363636;
    --color-tooltip-tag-foreground:#adadad;
    --color-link:#66b5ff;   /* Codex dark blue（对话内链接，docs/Codex渲染规格摘录.md） */
    --color-trajectory-assistant:#2dd4bf;
    --color-trajectory-reasoning:#a78bfa;
    --color-trajectory-tool-call:#f59e0b;
    --color-trajectory-tool-result:#38bdf8;
    --color-trajectory-user:#60a5fa;
    --color-usage-chart-1:#4099ff;
    --color-usage-chart-2:#46bf72;
    --color-usage-chart-3:#7b5ce5;
    --color-usage-chart-4:#ff5c5c;
    --color-usage-chart-5:#ff8a30;
    --color-usage-chart-6:#42c8c8;
    --color-usage-heatmap-0:color-mix(in oklab, #4099ff 0%, var(--color-surface));
    --color-usage-heatmap-1:color-mix(in oklab, #4099ff 24%, var(--color-surface));
    --color-usage-heatmap-2:color-mix(in oklab, #4099ff 42%, var(--color-surface));
    --color-usage-heatmap-3:color-mix(in oklab, #4099ff 62%, var(--color-surface));
    --color-usage-heatmap-4:color-mix(in oklab, #80beff 78%, var(--color-surface));
    --color-warning:#ff8549;   /* Codex dark orange */
    --color-warning-foreground:#000000;
    --color-warning-surface:rgba(255,138,48,.12);
    --color-workflow-rule:rgba(255, 255, 255, 0.065);
    --color-workflow-trace:rgba(255, 255, 255, 0.35);
    --color-workflow-trace-strong:rgba(255, 255, 255, 0.6);
  }




  /* ============================================================
     Reset & base
     ============================================================ */
  *{box-sizing:border-box;margin:0;padding:0}
  html{color-scheme:light}
  html.dark{color-scheme:dark}
  html,body{height:100%;width:100%;min-width:0;min-height:0}
  /* 窗口 chrome：对标 ZCode DesktopWindowFrame `bg-background-win-alt`（#ececee），勿用偏浅的 sidebar #f0f0f0 */
  body{font-family:var(--font-sans);color:var(--color-foreground);background:var(--color-background-win-alt);font-size:var(--text-ui-base);line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow:hidden;display:flex;flex-direction:column;padding:var(--shell-inset);gap:var(--shell-inset);height:100%}
  button,textarea,input,select{font-family:inherit;font-size:inherit;color:inherit}
  a{color:inherit;text-decoration:none}
  ::selection{background:var(--color-brand);color:var(--color-primary-foreground);opacity:.85}

  /* —— Unified scrollbar (ZCode style) —— */
  *{scrollbar-width:auto;scrollbar-color:var(--color-border) transparent}
  *::-webkit-scrollbar{width:var(--size-3-5);height:var(--size-3-5)}
  *::-webkit-scrollbar-track{background:transparent}
  *::-webkit-scrollbar-thumb{min-height:var(--control-h-8);min-width:var(--size-8);border:3px solid transparent;border-radius:var(--radius-full);background:var(--color-border);background-clip:padding-box}
  *::-webkit-scrollbar-thumb:hover{background:var(--color-border-hover);background-clip:padding-box}
  *::-webkit-scrollbar-corner{background:transparent}

  /* —— Focus states（对标 ZCode ring-2 + input-border-focused） —— */
  *:focus{outline:none}
  *:focus-visible{outline:none;box-shadow:0 0 0 2px var(--color-input-border-focused)}
  button:focus-visible,.nav-i:focus-visible,.icon-btn:focus-visible,.btn:focus-visible,
  .chip:focus-visible,.stab:focus-visible,.astab:focus-visible,.mtab:focus-visible,
  .rtab:focus-visible,.step-state:focus-visible,.ask-send:focus-visible,
  .mi:focus-visible,.file-item:focus-visible,.pchat:focus-visible{
    outline:none;box-shadow:0 0 0 2px var(--color-input-border-focused)
  }
  .ask-box textarea:focus,.ask-box textarea:focus-visible,
  .palette .ph input:focus,.palette .ph input:focus-visible{box-shadow:none}
  input:focus-visible,textarea:focus-visible,select:focus-visible{
    border-color:var(--color-input-border-focused);
    box-shadow:0 0 0 2px color-mix(in oklab,var(--color-input-border-focused) 35%,transparent)
  }

  /* —— Typography utilities（对标 ZCode text-ui-*） —— */
  .text-ui-xl{font-size:var(--text-ui-xl);line-height:1.35}
  .text-ui-lg{font-size:var(--text-ui-lg);line-height:1.4}
  .text-ui-base{font-size:var(--text-ui-base);line-height:1.55}
  .text-ui-caption{font-size:var(--text-ui-caption);line-height:1.45}
  .text-ui-sm{font-size:var(--text-ui-sm);line-height:1.45}
  .text-ui-xs{font-size:var(--text-ui-xs);line-height:1.4}
  .text-ui-2xs{font-size:var(--text-ui-2xs);line-height:1.3;letter-spacing:var(--tracking-wf-label)}
  .font-mono{font-family:var(--font-mono)}
  .text-foreground{color:var(--color-foreground)}
  .text-foreground-subtle{color:var(--color-foreground-subtle)}
  .text-foreground-subtlest{color:var(--color-foreground-subtlest)}
  .bg-background{background:var(--color-background)}
  .bg-card{background:var(--color-card)}
  .bg-surface{background:var(--color-surface)}
  .bg-menu{background:var(--color-menu)}
  .bg-popover{background:var(--color-popover)}
  .bg-input{background:var(--color-input)}
  .bg-hover:hover{background:var(--color-hover)}
  .bg-selected{background:var(--color-selected)}
  .border-border{border-color:var(--color-border)}
  .border-card-border{border-color:var(--color-card-border)}
  .border-popover-border{border-color:var(--color-popover-border)}
  .border-input-border{border-color:var(--color-input-border)}
  .rounded-sm{border-radius:var(--radius-sm)}
  .rounded-md{border-radius:var(--radius-md)}
  .rounded-lg{border-radius:var(--radius-lg)}
  .rounded-xl{border-radius:var(--radius-xl)}
  .rounded-2xl{border-radius:var(--radius-2xl)}
  .shadow-md{box-shadow:var(--shadow-md)}
  .shadow-lg{box-shadow:var(--shadow-lg)}
  .h-6{height:var(--control-h-6)}.h-7{height:var(--control-h-7)}.h-8{height:var(--control-h-8)}.h-9{height:var(--control-h-9)}
  .size-3{width:var(--size-3);height:var(--size-3)}.size-3-5{width:var(--size-3-5);height:var(--size-3-5)}
  .size-4{width:var(--size-4);height:var(--size-4)}.size-5{width:var(--size-5);height:var(--size-5)}.size-6{width:var(--size-6);height:var(--size-6)}



/* Default: installed Codex 26.1007.9446, verified in the native light/dark UI.
   Exact theme export + kba/Aba/jba/Nba derivation: desktop-9446/derived-palette.json.
   The sidebar blends the surface over window chrome, matching native translucency. */
html[data-interface-palette="default"]{
  --color-action-blue:#3a83f7;
  --color-ring:var(--color-action-blue);
  --palette-selection-ring:var(--color-ring);
  --color-link:#3a83f7;
  --color-icon-blue:var(--color-link);
  --color-input-border-focused:var(--color-ring);
  --color-foreground:#0d0d0d;
  --color-foreground-subtle:rgba(13,13,13,.695);
  --color-foreground-subtlest:rgba(13,13,13,.495);
  --color-foreground-inverse:#ffffff;
  --color-background:#ffffff;
  --color-background-win-alt:#f4f4f4;
  --color-sidebar:color-mix(in srgb,var(--color-background) 70%,var(--color-background-win-alt));
  --color-card:#ffffff;
  --color-panel:#ffffff;
  --color-header:#ffffff;
  --color-input:#ffffff;
  --color-menu:#ffffff;
  --color-popover:#ffffff;
  --color-toast:#ffffff;
  --color-secondary:rgba(13,13,13,.049);
  --color-secondary-foreground:var(--color-foreground);
  --color-elevated-secondary:rgb(255,255,255);
  --color-surface-tertiary:rgb(255,255,255);
  --color-tag:var(--color-surface-tertiary);
  --color-tab:var(--color-sidebar);
  --color-tab-active:var(--color-card);
  --color-border:rgba(13,13,13,.078);
  --color-border-hover:rgba(13,13,13,.117);
  --color-hover:rgba(13,13,13,.054);
  --color-selected:var(--color-secondary);
  --color-menu-hover:var(--color-hover);
  --color-surface:var(--color-secondary);
  --color-surface-hover:var(--color-hover);
  --color-popover-header:var(--color-sidebar);
  --color-brand:#0d0d0d;
  --color-primary:var(--color-brand);
  --color-primary-foreground:var(--color-foreground-inverse);
  --color-accent:#e6effe;
  --color-interaction-ask-foreground:var(--color-ring);
  --color-interaction-ask-surface:var(--color-accent);
  --color-file-node-foreground:var(--color-ring);
  --color-file-node:color-mix(in srgb,var(--color-ring) 10%,transparent);
  --color-file-node-hover:color-mix(in srgb,var(--color-ring) 16%,transparent);
  --color-tooltip:#0d0d0d;
  --color-tooltip-foreground:#ffffff;
  --color-tooltip-tag:#303030;
  --color-tooltip-tag-foreground:#cdcdcd;
  --color-code-bg:var(--color-surface-tertiary);
  --color-codeblock:#fcfcfc;
  --color-search-input:rgba(13,13,13,.049);
  --diff-added-fg:#00a240;
  --diff-deleted-fg:#ba2623;
  /* Status colors: lib-2607 app-shared app-color-* and *-surface recipes. */
  --color-destructive:#e02e2a;
  --color-destructive-surface:#fff0f0;
  --color-warning:#e25507;
  --color-warning-surface:#fff5f0;
  --color-success:#00a240;
  --color-success-surface:#edfaf2;
  --color-interaction-confirmation-fill:var(--color-success-surface);
  --color-interaction-confirmation-foreground:#008635;
  --color-interaction-confirmation-surface:var(--color-success-surface);
  --shadow-tooltip:0 8px 18px #00000033;
  --color-overlay:#00000080;
  --gpt-text-secondary:var(--color-foreground-subtle);
  --gpt-text-tertiary:var(--color-foreground-subtlest);
  --gpt-codex-description:var(--color-foreground-subtle);
  --gpt-warning:var(--color-warning);
  --gpt-warning-bg:var(--color-warning-surface);
  --gpt-surface-secondary:var(--color-elevated-secondary);
  --gpt-primary-ghost-hover:var(--color-hover);
  --gpt-ghost-hover:var(--color-hover);
  --gpt-border-light:var(--color-border);
  --gpt-border-strong:var(--color-border-hover);
  --sub-text-secondary:var(--color-foreground-subtle);
  --sub-text-tertiary:var(--color-foreground-subtlest);
  --sub-ghost-hover:var(--color-hover);
  --sub-border-light:var(--color-border);
  --sub-border-strong:var(--color-border-hover);
  --mgmt-text-secondary:var(--color-foreground-subtle);
  --mgmt-text-tertiary:var(--color-foreground-subtlest);
  --mgmt-ghost-hover:var(--color-hover);
  --mgmt-border-light:var(--color-border);
  --mgmt-border-strong:var(--color-border-hover);
  --libx-hover:var(--color-hover);
  --animated-gradient-text-soft:color-mix(in srgb,var(--color-foreground) 22%,transparent);
  --animated-gradient-text-strong:var(--color-foreground);
}
html.dark[data-interface-palette="default"]{
  --color-ring:rgba(135,179,250,.76);
  --color-link:rgb(135,179,250);
  --color-foreground:#ffffff;
  --color-foreground-subtle:rgba(255,255,255,.71);
  --color-foreground-subtlest:rgba(255,255,255,.498);
  --color-foreground-inverse:#0d0d0d;
  --color-background:#181818;
  --color-background-win-alt:#212121;
  --color-card:#232323;
  --color-panel:#181818;
  --color-header:#181818;
  --color-input:rgb(54,54,54);
  --color-menu:rgb(45,45,45);
  --color-popover:rgb(45,45,45);
  --color-toast:rgb(45,45,45);
  --color-secondary:rgba(255,255,255,.052);
  --color-elevated-secondary:rgb(45,45,45);
  --color-surface-tertiary:rgb(40,40,40);
  --color-border:rgba(255,255,255,.084);
  --color-border-hover:rgba(255,255,255,.156);
  --color-hover:rgba(255,255,255,.078);
  --color-search-input:rgb(45,45,45);
  --color-brand:#ffffff;
  --color-accent:#0e203d;
  --color-codeblock:#131313;
  --color-tooltip:var(--color-elevated-secondary);
  --color-destructive:#ff6764;
  --color-destructive-surface:#280b0a;
  --color-warning:#ff8549;
  --color-warning-surface:#281105;
  --color-success:#40c977;
  --color-success-surface:#011c0b;
  --color-interaction-confirmation-foreground:#04b84c;
  --diff-added-fg:#40c977;
  --diff-deleted-fg:#fa423e;
}
html[data-interface-palette="default"] :is(.cdx-lib-root,.cdx-lib-header){background:var(--color-panel)}
html[data-interface-palette="default"] :is(.analysis>.aside,.unified-task-slot>.aside,.zc-settings-aside,.cdx-gpt-aside){background:var(--color-sidebar)}
html[data-interface-palette="default"] .plus-search-field .plus-search{background:var(--color-search-input)}

/* MiniMax Code app.asar theme recipes, mapped to DEMO semantic tokens. */
html:not(.dark)[data-interface-palette="graphite"]{
  --color-background:#f7f7f5f5;
  --color-card:#fffffff8;
  --color-panel:#fbfbf9f5;
  --color-header:#fffffff8;
  --color-input:#fffffff8;
  --color-menu:#fffffff8;
  --color-popover:#fffffff8;
  --color-secondary:#eeeeebf0;
  --color-tag:#e8e8e5ed;
  --color-elevated-secondary:#f4f4f1f2;
  --color-surface-tertiary:#e8e8e5ed;
  --color-foreground:#20201f;
  --color-foreground-subtle:#62625f;
  --color-foreground-subtlest:#8e8e89;
  --color-brand:#20201f;
  --color-foreground-inverse:#ffffff;
  --color-secondary-foreground:#20201f;
  --color-ring:#2f8ee5;
  --color-accent:#dcecff;
  --color-border:#20201f12;
  --color-border-hover:#20201f1f;
  --color-hover:#20201f0d;
  --color-selected:#20201f12;
  --color-menu-hover:#20201f0d;
  --color-surface:#20201f0a;
  --color-surface-hover:#20201f12;
  --color-background-win-alt:#ecece8;
  --color-code-bg:#eeeeebf0;
  --color-codeblock:#eeeeebf0;
  --color-code-surface:#2d2a30f2;
  --color-code-surface-fg:#d8d4dc;
  --color-code-surface-border:#d8d4dc24;
  --color-syntax-keyword:#d6a3ee;
  --color-syntax-string:#8dcc9b;
  --color-syntax-highlight:#86cbd6;
  --color-syntax-command:#9bb7ef;
  --color-syntax-comment:#898590;
}
html.dark[data-interface-palette="graphite"]{
  --color-background:#29272cf5;
  --color-card:#312e34f7;
  --color-panel:#2c292ff2;
  --color-header:#312e34f7;
  --color-input:#353239f5;
  --color-menu:#353239f5;
  --color-popover:#353239f5;
  --color-secondary:#2d2a30f2;
  --color-tag:#343137ed;
  --color-elevated-secondary:#37343af2;
  --color-surface-tertiary:#343137ed;
  --color-foreground:#d2cfd6;
  --color-foreground-subtle:#aba7b0;
  --color-foreground-subtlest:#77737d;
  --color-brand:#dedbe2;
  --color-foreground-inverse:#29272c;
  --color-secondary-foreground:#d2cfd6;
  --color-ring:#78b7ff;
  --color-accent:#394657;
  --color-border:#d8d4dc14;
  --color-border-hover:#d8d4dc24;
  --color-hover:#d8d4dc12;
  --color-selected:#d8d4dc18;
  --color-menu-hover:#d8d4dc12;
  --color-surface:#d8d4dc0d;
  --color-surface-hover:#d8d4dc17;
  --color-background-win-alt:#211f24;
  --color-code-bg:#2d2a30f2;
  --color-codeblock:#2d2a30f2;
  --color-code-surface:#2d2a30f2;
  --color-code-surface-fg:#d8d4dc;
  --color-code-surface-border:#d8d4dc24;
  --color-syntax-keyword:#d6a3ee;
  --color-syntax-string:#8dcc9b;
  --color-syntax-highlight:#86cbd6;
  --color-syntax-command:#9bb7ef;
  --color-syntax-comment:#898590;
}
html:not(.dark)[data-interface-palette="terracotta"]{
  --color-background:#faf9f5f5;
  --color-card:#fffefbf8;
  --color-panel:#fbfaf7f5;
  --color-header:#fffefbf8;
  --color-input:#fffefbf8;
  --color-menu:#fffefbf8;
  --color-popover:#fffefbf8;
  --color-secondary:#f0ede6f0;
  --color-tag:#ece8e0ed;
  --color-elevated-secondary:#f6f3edf2;
  --color-surface-tertiary:#ece8e0ed;
  --color-foreground:#2f2b28;
  --color-foreground-subtle:#68615b;
  --color-foreground-subtlest:#918880;
  --color-brand:#3d3935;
  --color-foreground-inverse:#fffefb;
  --color-secondary-foreground:#2f2b28;
  --color-ring:#d97757;
  --color-accent:#f6ddd3;
  --color-border:#3d393512;
  --color-border-hover:#3d39351f;
  --color-hover:#d977570d;
  --color-selected:#d9775712;
  --color-menu-hover:#d977570d;
  --color-surface:#3d39350a;
  --color-surface-hover:#3d393512;
  --color-background-win-alt:#eee9df;
  --color-code-bg:#f0ede6f0;
  --color-codeblock:#f0ede6f0;
  --color-code-surface:#261f1aed;
  --color-code-surface-fg:#ead9c8;
  --color-code-surface-border:#f5dfc91f;
  --color-syntax-keyword:#f19098;
  --color-syntax-string:#9ccc8e;
  --color-syntax-highlight:#84bed2;
  --color-syntax-command:#c4a0dc;
  --color-syntax-comment:#a48d79;
}
html.dark[data-interface-palette="terracotta"]{
  --color-background:#1b1714f2;
  --color-card:#241e19f5;
  --color-panel:#211b17ed;
  --color-header:#241e19f5;
  --color-input:#2d251ff2;
  --color-menu:#2d251ff2;
  --color-popover:#2d251ff2;
  --color-secondary:#261f1aed;
  --color-tag:#2d251fed;
  --color-elevated-secondary:#302720f0;
  --color-surface-tertiary:#2d251fed;
  --color-foreground:#f1dfcd;
  --color-foreground-subtle:#b39d8a;
  --color-foreground-subtlest:#846f60;
  --color-brand:#f4dfc7;
  --color-foreground-inverse:#1b1714;
  --color-secondary-foreground:#f1dfcd;
  --color-ring:#e99578;
  --color-accent:#50301f;
  --color-border:#f5dfc912;
  --color-border-hover:#f5dfc91f;
  --color-hover:#e9957812;
  --color-selected:#e995781a;
  --color-menu-hover:#e9957812;
  --color-surface:#f5dfc90d;
  --color-surface-hover:#f5dfc91a;
  --color-background-win-alt:#181614;
  --color-code-bg:#261f1aed;
  --color-codeblock:#261f1aed;
  --color-code-surface:#261f1aed;
  --color-code-surface-fg:#ead9c8;
  --color-code-surface-border:#f5dfc91f;
  --color-syntax-keyword:#f19098;
  --color-syntax-string:#9ccc8e;
  --color-syntax-highlight:#84bed2;
  --color-syntax-command:#c4a0dc;
  --color-syntax-comment:#a48d79;
}

:root{--palette-selection-ring:#0094fc;}
.interface-palette-preview[data-palette="default"]{--palette-preview-bg:#ffffff;--palette-preview-surface:#f3f3f3;--palette-preview-accent:#3a83f7;}
html.dark .interface-palette-preview[data-palette="default"]{--palette-preview-bg:#181818;--palette-preview-surface:rgb(54,54,54);}
html.dark .interface-palette-preview[data-palette="graphite"]{--palette-preview-bg:#363636;--palette-preview-surface:#252525;--palette-preview-accent:#ececec;}
html.dark .interface-palette-preview[data-palette="terracotta"]{--palette-preview-bg:#302821;--palette-preview-surface:#292522;--palette-preview-accent:#d99772;}