@icen.ai/ui 0.8.1 → 0.10.0

package/dist/tokens.css

@@ -1,1309 +1,401 @@
-/* @icen.ai/ui — tokens（colors + style-profiles + typography） */
+/* @icen.ai/ui — tokens + opt-in design materials */
+@layer icen.tokens, icen.base, icen.components;
+@layer icen.tokens {
 
 /* ── tokens/colors.css ── */
-/*
- * Icen Design System — 色彩 Tokens
- *
- * 6 预设 × 2 模式 = 12 套完整配色
- *   clay（默认）/ piano / art / vangogh / ink / retro
- *
- * 每套包含：
- *   12 base + 2 glow + 6 derived + 6 semantic + 4 fill + 2 shadow + 3 outline
- *   + depth 层级（canvas/sidebar/panel/card/control）+ scrollbar + bridge 别名
- *
- * 用法: import "./colors.css";  —— 挂在 <html> 的 preset 类决定 base 取值，
- *                                .dark 类切换明暗，二者正交组合。
- */
-
-/* ══════════════════════════════════════════════════════════════
-   CLAY — 温暖纸感 · 陶土橙 + 牛皮纸白
-   Warm Paper · Clay-Dust Orange × Parchment Cream
-   ══════════════════════════════════════════════════════════════ */
-
-:root {
-  /* ── 12 Base Tokens ── */
-  --token-bg:             #faf9f5;
-  --token-bg-soft:        #f5f3ec;
-  --token-surface:        #ffffff;
-  --token-surface-strong: #f5f3ec;
-  --token-line-soft:      rgba(43, 41, 38, 0.12);
-  --token-line:           rgba(43, 41, 38, 0.22);
-  --token-line-strong:    rgba(43, 41, 38, 0.38);
-  --token-text:           #1f1e1c;
-  --token-text-muted:     #5e5d58;
-  --token-text-faint:     #9d9b93;
-  --token-accent:         #d97757;
-  --token-accent-cold:    #7a9cb0;
-  --token-accent-deep:    #c6613f;
-
-  /* ── Glow (background radial accents) ── */
-  --token-glow:      rgba(217,119,87,.12);
-  --token-glow-cold: rgba(122,156,176,.06);
-
-  /* ── Derived ── */
-  --token-surface-hover:  color-mix(in srgb, var(--token-surface) 92%, var(--token-accent) 8%);
-  --token-accent-subtle:  color-mix(in srgb, var(--token-accent) 14%, transparent);
-  --token-accent-glow:    color-mix(in srgb, var(--token-accent) 10%, transparent);
-  --token-line-dashed:    color-mix(in srgb, var(--token-line-soft) 55%, transparent);
-  --token-overlay-bg:     color-mix(in srgb, var(--token-bg) 92%, transparent);
-  --token-on-accent:      #ffffff;
-
-  /* ── Shadow ── */
-  --token-shadow-elevated: 0 12px 32px rgba(31, 30, 29, 0.05);
-  --token-shadow-overlay:  0 18px 44px rgba(31, 30, 29, 0.08);
-
-  /* ── Semantic ── */
-  --token-success:      #3d8a5a;
-  --token-success-muted: color-mix(in srgb, var(--token-success) 12%, transparent);
-  --token-warning:      #b8860b;
-  --token-warning-muted: rgba(184,134,11,.12);
-  --token-error:        #c0392b;
-  --token-error-muted:  color-mix(in srgb, var(--token-error) 12%, transparent);
-  --token-info:         #6a8ea0;
-  --token-info-muted:   rgba(106,142,160,.12);
-
-  /* ── Fill Scale (overlay textures) ── */
-  --token-fill-1: color-mix(in srgb, var(--token-text) 4%, transparent);
-  --token-fill-2: color-mix(in srgb, var(--token-text) 8%, transparent);
-  --token-fill-3: color-mix(in srgb, var(--token-text) 14%, transparent);
-  --token-fill-4: color-mix(in srgb, var(--token-text) 22%, transparent);
-
-  /* ── Surface Glass ── */
-  --token-surface-glass: color-mix(in srgb, var(--token-bg-soft) 88%, transparent);
-
-  /* ═══════════════════════════════════════════
-     BRIDGE — legacy component token names
-     ═══════════════════════════════════════════ */
-
-  /* ── 主色 ── */
-  --accent-clay: var(--token-accent);
-  --accent-clay-dark: #c6613f;
-  --accent-clay-light: #e8a087;
-  --accent-cold: var(--token-accent-cold);
-
-  /* ── 背景 ── */
-  --bg-primary: var(--token-bg);
-  --bg-secondary: var(--token-bg-soft);
-  --bg-tertiary: var(--token-surface);
-  --bg-card: #fffdfa;
-  --bg-card-muted: #f7f0e4;
-  --bg-panel: var(--token-surface-strong);
-  --bg-hover: var(--token-surface-hover);
-
-  /* ── 文字 ── */
-  --text-primary: var(--token-text);
-  --text-secondary: #383834;
-  --text-tertiary: var(--token-text-muted);
-  --text-muted: #87867f;
-  --text-subtle: var(--token-text-faint);
-
-  /* ── 边框 ── */
-  --border-subtle: var(--token-line-soft);
-  --border-default: var(--token-line);
-  --border-strong: var(--token-line-strong);
-
-  /* ── 阴影 ── */
-  --shadow-sm: var(--token-shadow-elevated);
-  --shadow-md: var(--token-shadow-overlay);
-
-  /* ── 语义色 ── */
-  --color-success: var(--token-success);
-  --color-success-bg: var(--token-success-muted);
-  --color-warning: var(--token-warning);
-  --color-warning-bg: var(--token-warning-muted);
-  --color-error: var(--token-error);
-  --color-error-bg: var(--token-error-muted);
-  --color-info: var(--token-info);
-  --color-info-bg: var(--token-info-muted);
-  --color-pending: #87867f;
-  --color-pending-bg: #f9f9f8;
-
-  /* ── 装饰色 ── */
-  --accent-clay-bg: color-mix(in srgb, var(--token-accent) 8%, transparent);
-  --accent-clay-bg-strong: var(--token-accent-subtle);
-  --accent-clay-border: color-mix(in srgb, var(--token-accent) 22%, transparent);
-}
-
-/* ── CLAY DARK ── */
-.dark {
-  /* ── 12 Base Tokens ── */
-  --token-bg:             #171410;
-  --token-bg-soft:        #211d19;
-  --token-surface:        #2a2520;
-  --token-surface-strong: #302b25;
-  --token-line-soft:      #3b352f;
-  --token-line:           #4c433b;
-  --token-line-strong:    #5e5349;
-  --token-text:           #f5f4f0;
-  --token-text-muted:     #a8a6a0;
-  --token-text-faint:     #6a6863;
-  --token-accent:         #e08a68;
-  --token-accent-cold:    #7aa0b8;
-
-  /* ── Glow ── */
-  --token-glow:      rgba(224,138,104,.10);
-  --token-glow-cold: rgba(122,160,184,.05);
-
-  /* ── Derived ── */
-  --token-surface-hover:  color-mix(in srgb, var(--token-surface) 90%, var(--token-accent) 10%);
-  --token-accent-subtle:  color-mix(in srgb, var(--token-accent) 12%, transparent);
-  --token-accent-glow:    color-mix(in srgb, var(--token-accent) 8%, transparent);
-  --token-line-dashed:    color-mix(in srgb, var(--token-line-soft) 55%, transparent);
-  --token-overlay-bg:     color-mix(in srgb, var(--token-bg) 94%, transparent);
-  --token-on-accent:      #ffffff;
-
-  /* ── Shadow ── */
-  --token-shadow-elevated: 0 1px 2px rgba(0,0,0,.18), 0 4px 12px rgba(0,0,0,.16);
-  --token-shadow-overlay:  0 2px 4px rgba(0,0,0,.22), 0 8px 24px rgba(0,0,0,.26);
-
-  /* ── Semantic ── */
-  --token-success:      #8fbfaa;
-  --token-success-muted: rgba(143,191,170,.15);
-  --token-warning:      #d4a520;
-  --token-warning-muted: rgba(212,165,32,.15);
-  --token-error:        #d46a45;
-  --token-error-muted:  rgba(212,106,69,.15);
-  --token-info:         #6a9ab8;
-  --token-info-muted:   rgba(106,154,184,.15);
-
-  /* ── Fill ── */
-  --token-fill-1: color-mix(in srgb, var(--token-text) 5%, transparent);
-  --token-fill-2: color-mix(in srgb, var(--token-text) 10%, transparent);
-  --token-fill-3: color-mix(in srgb, var(--token-text) 16%, transparent);
-  --token-fill-4: color-mix(in srgb, var(--token-text) 24%, transparent);
-
-  /* ── Surface Glass ── */
-  --token-surface-glass: color-mix(in srgb, var(--token-bg-soft) 82%, transparent);
-
-  /* ── BRIDGE ── */
-  --accent-clay: var(--token-accent);
-  --accent-clay-dark: #d47a57;
-  --accent-clay-light: #eba38a;
-  --accent-cold: var(--token-accent-cold);
-  --bg-primary: var(--token-bg);
-  --bg-secondary: var(--token-bg-soft);
-  --bg-tertiary: var(--token-surface);
-  --bg-card: #221f1b;
-  --bg-card-muted: #26221d;
-  --bg-panel: var(--token-surface-strong);
-  --bg-hover: var(--token-surface-hover);
-  --text-primary: var(--token-text);
-  --text-secondary: #d4d3ce;
-  --text-tertiary: var(--token-text-muted);
-  --text-muted: #7a7872;
-  --text-subtle: var(--token-text-faint);
-  --border-subtle: var(--token-line-soft);
-  --border-default: var(--token-line);
-  --border-strong: var(--token-line-strong);
-  --shadow-sm: var(--token-shadow-elevated);
-  --shadow-md: var(--token-shadow-overlay);
-  --color-success: var(--token-success);
-  --color-success-bg: var(--token-success-muted);
-  --color-warning: var(--token-warning);
-  --color-warning-bg: var(--token-warning-muted);
-  --color-error: var(--token-error);
-  --color-error-bg: var(--token-error-muted);
-  --color-info: var(--token-info);
-  --color-info-bg: var(--token-info-muted);
-  --color-pending: #7a7872;
-  --color-pending-bg: #222120;
-  --accent-clay-bg: color-mix(in srgb, var(--token-accent) 8%, transparent);
-  --accent-clay-bg-strong: var(--token-accent-subtle);
-  --accent-clay-border: color-mix(in srgb, var(--token-accent) 22%, transparent);
-}
-
-/* ══════════════════════════════════════════════════════════════
-   PIANO — 象牙琴键 · 乌木黑键 · 大漆光泽
-   Piano Keys · Ivory × Ebony Lacquer · Brass Nameplate
-   ══════════════════════════════════════════════════════════════ */
-
-.piano {
-  /* ── 12 Base Tokens ── */
-  --token-bg:             #f1eee6;
-  --token-bg-soft:        #e5dfd2;
-  --token-surface:        #faf8f2;
-  --token-surface-strong: #eee8db;
-  --token-line-soft:      #d2cab9;
-  --token-line:           #b8ad9a;
-  --token-line-strong:    #8f8578;
-  --token-text:           #11100e;
-  --token-text-muted:     #4e4b45;
-  --token-text-faint:     #8b857b;
-  --token-accent:         #b89145;
-  --token-accent-cold:    #566370;
-
-  /* ── Glow ── */
-  --token-glow:      rgba(184,145,69,.12);
-  --token-glow-cold: rgba(22,24,26,.05);
-
-  /* ── Derived ── */
-  --token-surface-hover:  color-mix(in srgb, var(--token-surface-strong) 88%, var(--token-accent) 12%);
-  --token-accent-subtle:  color-mix(in srgb, var(--token-accent) 14%, transparent);
-  --token-accent-glow:    color-mix(in srgb, var(--token-accent) 10%, transparent);
-  --token-line-dashed:    color-mix(in srgb, var(--token-line-soft) 55%, transparent);
-  --token-overlay-bg:     color-mix(in srgb, var(--token-bg) 92%, transparent);
-  --token-on-accent:      #12100b;
-
-  /* ── Shadow · 漆面冷反光 ── */
-  --token-shadow-elevated: 0 1px 2px rgba(17,16,14,.06), 0 7px 20px rgba(17,16,14,.08);
-  --token-shadow-overlay:  0 2px 5px rgba(17,16,14,.10), 0 16px 42px rgba(17,16,14,.16);
-
-  /* ── Semantic ── */
-  --token-success:      #5a9e7a;
-  --token-success-muted: rgba(90,158,122,.10);
-  --token-warning:      #b89145;
-  --token-warning-muted: rgba(184,145,69,.12);
-  --token-error:        #a84a42;
-  --token-error-muted:  rgba(168,74,66,.10);
-  --token-info:         #5a7488;
-  --token-info-muted:   rgba(90,116,136,.10);
-
-  /* ── Fill ── */
-  --token-fill-1: color-mix(in srgb, var(--token-text) 3%, transparent);
-  --token-fill-2: color-mix(in srgb, var(--token-text) 6%, transparent);
-  --token-fill-3: color-mix(in srgb, var(--token-text) 10%, transparent);
-  --token-fill-4: color-mix(in srgb, var(--token-text) 16%, transparent);
-
-  /* ── Surface Glass ── */
-  --token-surface-glass: color-mix(in srgb, var(--token-surface) 86%, transparent);
-
-  /* ── BRIDGE ── */
-  --accent-clay: var(--token-accent);
-  --accent-clay-dark: #967333;
-  --accent-clay-light: #d2b36f;
-  --accent-cold: var(--token-accent-cold);
-  --bg-primary: var(--token-bg);
-  --bg-secondary: var(--token-bg-soft);
-  --bg-tertiary: var(--token-surface);
-  --bg-card: var(--token-surface);
-  --bg-card-muted: var(--token-bg-soft);
-  --bg-panel: var(--token-surface-strong);
-  --bg-hover: var(--token-surface-hover);
-  --text-primary: var(--token-text);
-  --text-secondary: #2e2b27;
-  --text-tertiary: var(--token-text-muted);
-  --text-muted: #8b857b;
-  --text-subtle: var(--token-text-faint);
-  --border-subtle: var(--token-line-soft);
-  --border-default: var(--token-line);
-  --border-strong: var(--token-line-strong);
-  --shadow-sm: var(--token-shadow-elevated);
-  --shadow-md: var(--token-shadow-overlay);
-  --color-success: var(--token-success);
-  --color-success-bg: var(--token-success-muted);
-  --color-warning: var(--token-warning);
-  --color-warning-bg: var(--token-warning-muted);
-  --color-error: var(--token-error);
-  --color-error-bg: var(--token-error-muted);
-  --color-info: var(--token-info);
-  --color-info-bg: var(--token-info-muted);
-  --color-pending: #8b857b;
-  --color-pending-bg: var(--token-bg-soft);
-  --accent-clay-bg: var(--token-accent-subtle);
-  --accent-clay-bg-strong: color-mix(in srgb, var(--token-accent) 20%, transparent);
-  --accent-clay-border: color-mix(in srgb, var(--token-accent) 24%, transparent);
-}
-
-/* ── PIANO DARK ── */
-.piano.dark {
-  /* ── 12 Base Tokens ── */
-  --token-bg:             #090909;
-  --token-bg-soft:        #11100f;
-  --token-surface:        #1a1917;
-  --token-surface-strong: #24221f;
-  --token-line-soft:      #2f2c27;
-  --token-line:           #463f34;
-  --token-line-strong:    #685b45;
-  --token-text:           #f6f1e7;
-  --token-text-muted:     #b7afa2;
-  --token-text-faint:     #736b60;
-  --token-accent:         #d6b567;
-  --token-accent-cold:    #7c8a94;
-
-  /* ── Glow ── */
-  --token-glow:      rgba(214,181,103,.14);
-  --token-glow-cold: rgba(210,220,225,.04);
-
-  /* ── Derived ── */
-  --token-surface-hover:  color-mix(in srgb, var(--token-surface-strong) 88%, var(--token-accent) 12%);
-  --token-accent-subtle:  color-mix(in srgb, var(--token-accent) 12%, transparent);
-  --token-accent-glow:    color-mix(in srgb, var(--token-accent) 8%, transparent);
-  --token-line-dashed:    color-mix(in srgb, var(--token-line-soft) 60%, transparent);
-  --token-overlay-bg:     color-mix(in srgb, var(--token-bg) 95%, transparent);
-  --token-on-accent:      #0a0a0a;
-
-  /* ── Shadow ── */
-  --token-shadow-elevated: 0 1px 2px rgba(0,0,0,.28), 0 10px 26px rgba(0,0,0,.34);
-  --token-shadow-overlay:  0 2px 5px rgba(0,0,0,.34), 0 18px 46px rgba(0,0,0,.46);
-
-  /* ── Semantic ── */
-  --token-success:      #7ac09a;
-  --token-success-muted: rgba(122,192,154,.12);
-  --token-warning:      #d6b567;
-  --token-warning-muted: rgba(214,181,103,.13);
-  --token-error:        #d07668;
-  --token-error-muted:  rgba(208,118,104,.12);
-  --token-info:         #7293aa;
-  --token-info-muted:   rgba(114,147,170,.12);
-
-  /* ── Fill ── */
-  --token-fill-1: color-mix(in srgb, var(--token-text) 4%, transparent);
-  --token-fill-2: color-mix(in srgb, var(--token-text) 8%, transparent);
-  --token-fill-3: color-mix(in srgb, var(--token-text) 14%, transparent);
-  --token-fill-4: color-mix(in srgb, var(--token-text) 22%, transparent);
-
-  /* ── Surface Glass ── */
-  --token-surface-glass: color-mix(in srgb, var(--token-bg-soft) 82%, transparent);
-
-  /* ── BRIDGE ── */
-  --accent-clay: var(--token-accent);
-  --accent-clay-dark: #b8954b;
-  --accent-clay-light: #e7cf8b;
-  --accent-cold: var(--token-accent-cold);
-  --bg-primary: var(--token-bg);
-  --bg-secondary: var(--token-bg-soft);
-  --bg-tertiary: var(--token-surface);
-  --bg-card: var(--token-bg-soft);
-  --bg-card-muted: var(--token-surface);
-  --bg-panel: var(--token-surface-strong);
-  --bg-hover: var(--token-surface-hover);
-  --text-primary: var(--token-text);
-  --text-secondary: #d8d0c2;
-  --text-tertiary: var(--token-text-muted);
-  --text-muted: var(--token-text-faint);
-  --text-subtle: var(--token-text-faint);
-  --border-subtle: var(--token-line-soft);
-  --border-default: var(--token-line);
-  --border-strong: var(--token-line-strong);
-  --shadow-sm: var(--token-shadow-elevated);
-  --shadow-md: var(--token-shadow-overlay);
-  --color-success: var(--token-success);
-  --color-success-bg: var(--token-success-muted);
-  --color-warning: var(--token-warning);
-  --color-warning-bg: var(--token-warning-muted);
-  --color-error: var(--token-error);
-  --color-error-bg: var(--token-error-muted);
-  --color-info: var(--token-info);
-  --color-info-bg: var(--token-info-muted);
-  --color-pending: var(--token-text-faint);
-  --color-pending-bg: var(--token-bg-soft);
-  --accent-clay-bg: var(--token-accent-subtle);
-  --accent-clay-bg-strong: color-mix(in srgb, var(--token-accent) 16%, transparent);
-  --accent-clay-border: color-mix(in srgb, var(--token-accent) 24%, transparent);
-}
-
-/* ══════════════════════════════════════════════════════════════
-   ART — 莫奈 · 日出印象 + 睡莲
-   Monet · Impression, Sunrise × Water Lilies
-   ══════════════════════════════════════════════════════════════ */
-
-/* ── ART LIGHT · 日出印象 (Claude Monet, 1872) ── */
-.art {
-  /* 勒阿弗尔晨雾 · 日出橙红 · 港湾青灰 */
-  --token-bg:             #dce8e3;
-  --token-bg-soft:        #ccdcd6;
-  --token-surface:        #edf3ee;
-  --token-surface-strong: #d8e6df;
-  --token-line-soft:      #b7c9c1;
-  --token-line:           #96aaa2;
-  --token-line-strong:    #718980;
-  --token-text:           #172226;
-  --token-text-muted:     #445553;
-  --token-text-faint:     #768985;
-  --token-accent:         #d66f4f;
-  --token-accent-cold:    #4f8f90;
-
-  /* ── Glow · 雾霭橙光 ── */
-  --token-glow:      rgba(214,111,79,.12);
-  --token-glow-cold: rgba(79,143,144,.07);
-
-  /* ── Derived ── */
-  --token-surface-hover:  color-mix(in srgb, var(--token-surface-strong) 88%, var(--token-accent) 12%);
-  --token-accent-subtle:  color-mix(in srgb, var(--token-accent) 12%, transparent);
-  --token-accent-glow:    color-mix(in srgb, var(--token-accent) 8%, transparent);
-  --token-line-dashed:    color-mix(in srgb, var(--token-line-soft) 55%, transparent);
-  --token-overlay-bg:     color-mix(in srgb, var(--token-bg) 94%, transparent);
-  --token-on-accent:      #ffffff;
-
-  --token-shadow-elevated: 0 1px 2px rgba(23,34,38,.05), 0 6px 18px rgba(23,34,38,.08);
-  --token-shadow-overlay:  0 2px 5px rgba(23,34,38,.08), 0 12px 32px rgba(23,34,38,.12);
-
-  --token-success:      #5a8c6e;
-  --token-success-muted: rgba(90,140,110,.10);
-  --token-warning:      #b67933;
-  --token-warning-muted: rgba(182,121,51,.11);
-  --token-error:        #b95e52;
-  --token-error-muted:  rgba(185,94,82,.11);
-  --token-info:         #568aa0;
-  --token-info-muted:   rgba(86,138,160,.11);
-
-  --token-fill-1: color-mix(in srgb, var(--token-text) 3%, transparent);
-  --token-fill-2: color-mix(in srgb, var(--token-text) 6%, transparent);
-  --token-fill-3: color-mix(in srgb, var(--token-text) 10%, transparent);
-  --token-fill-4: color-mix(in srgb, var(--token-text) 16%, transparent);
-
-  --token-surface-glass: color-mix(in srgb, var(--token-bg) 84%, transparent);
-
-  /* ── BRIDGE ── */
-  --accent-clay: var(--token-accent);
-  --accent-clay-dark: #b95a3c;
-  --accent-clay-light: #e69a82;
-  --accent-cold: var(--token-accent-cold);
-  --bg-primary: var(--token-bg);
-  --bg-secondary: var(--token-bg-soft);
-  --bg-tertiary: var(--token-surface);
-  --bg-card: var(--token-surface);
-  --bg-card-muted: var(--token-bg-soft);
-  --bg-panel: var(--token-surface-strong);
-  --bg-hover: var(--token-surface-hover);
-  --text-primary: var(--token-text);
-  --text-secondary: var(--token-text-muted);
-  --text-tertiary: #556864;
-  --text-muted: var(--token-text-faint);
-  --text-subtle: var(--token-line-strong);
-  --border-subtle: var(--token-line-soft);
-  --border-default: var(--token-line);
-  --border-strong: var(--token-line-strong);
-  --shadow-sm: var(--token-shadow-elevated);
-  --shadow-md: var(--token-shadow-overlay);
-  --color-success: var(--token-success);
-  --color-success-bg: var(--token-success-muted);
-  --color-warning: var(--token-warning);
-  --color-warning-bg: var(--token-warning-muted);
-  --color-error: var(--token-error);
-  --color-error-bg: var(--token-error-muted);
-  --color-info: var(--token-info);
-  --color-info-bg: var(--token-info-muted);
-  --color-pending: var(--token-text-faint);
-  --color-pending-bg: var(--token-fill-1);
-  --accent-clay-bg: var(--token-accent-subtle);
-  --accent-clay-bg-strong: color-mix(in srgb, var(--token-accent) 14%, transparent);
-  --accent-clay-border: color-mix(in srgb, var(--token-accent) 20%, transparent);
-}
-
-/* ── ART DARK · 莫奈睡莲 (Water Lilies) ── */
-.art.dark {
-  /* 睡莲池水 · 暮色蓝绿 · 莲粉紫影 */
-  --token-bg:             #172521;
-  --token-bg-soft:        #1d312c;
-  --token-surface:        #263d37;
-  --token-surface-strong: #304a42;
-  --token-line-soft:      #35554c;
-  --token-line:           #4c7167;
-  --token-line-strong:    #659082;
-  --token-text:           #edf1e8;
-  --token-text-muted:     #c1cabd;
-  --token-text-faint:     #7f9188;
-  --token-accent:         #d59ab1;
-  --token-accent-cold:    #78aaa2;
-
-  /* ── Glow · 池面粉紫和水光 ── */
-  --token-glow:      rgba(213,154,177,.10);
-  --token-glow-cold: rgba(120,170,162,.10);
-
-  /* ── Derived ── */
-  --token-surface-hover:  color-mix(in srgb, var(--token-surface) 86%, var(--token-accent-cold) 14%);
-  --token-accent-subtle:  color-mix(in srgb, var(--token-accent) 12%, transparent);
-  --token-accent-glow:    color-mix(in srgb, var(--token-accent) 8%, transparent);
-  --token-line-dashed:    color-mix(in srgb, var(--token-line-soft) 60%, transparent);
-  --token-overlay-bg:     color-mix(in srgb, var(--token-bg) 92%, transparent);
-  /* 睡莲粉 accent 上的文字色：深绿灰（白字在 #d59ab1 上对比度不达标） */
-  --token-on-accent:      #26302b;
-
-  --token-shadow-elevated: 0 1px 2px rgba(0,0,0,.18), 0 8px 22px rgba(0,0,0,.24);
-  --token-shadow-overlay:  0 2px 5px rgba(0,0,0,.24), 0 14px 36px rgba(0,0,0,.32);
-
-  --token-success:      #5ab88a;
-  --token-success-muted: rgba(90,184,138,.12);
-  --token-warning:      #c5aa68;
-  --token-warning-muted: rgba(197,170,104,.12);
-  --token-error:        #d1847e;
-  --token-error-muted:  rgba(209,132,126,.12);
-  --token-info:         #78aaa2;
-  --token-info-muted:   rgba(120,170,162,.12);
-
-  --token-fill-1: color-mix(in srgb, var(--token-text) 4%, transparent);
-  --token-fill-2: color-mix(in srgb, var(--token-text) 8%, transparent);
-  --token-fill-3: color-mix(in srgb, var(--token-text) 14%, transparent);
-  --token-fill-4: color-mix(in srgb, var(--token-text) 22%, transparent);
-
-  --token-surface-glass: color-mix(in srgb, var(--token-bg-soft) 82%, transparent);
-
-  /* ── BRIDGE ── */
-  --accent-clay: var(--token-accent);
-  --accent-clay-dark: #bc7f9a;
-  --accent-clay-light: #e4b7ca;
-  --accent-cold: var(--token-accent-cold);
-  --bg-primary: var(--token-bg);
-  --bg-secondary: var(--token-bg-soft);
-  --bg-tertiary: var(--token-surface);
-  --bg-card: var(--token-bg-soft);
-  --bg-card-muted: var(--token-surface);
-  --bg-panel: var(--token-surface-strong);
-  --bg-hover: var(--token-surface-hover);
-  --text-primary: var(--token-text);
-  --text-secondary: var(--token-text-muted);
-  --text-tertiary: #a5b1aa;
-  --text-muted: var(--token-text-faint);
-  --text-subtle: var(--token-line-strong);
-  --border-subtle: var(--token-line-soft);
-  --border-default: var(--token-line);
-  --border-strong: var(--token-line-strong);
-  --shadow-sm: var(--token-shadow-elevated);
-  --shadow-md: var(--token-shadow-overlay);
-  --color-success: var(--token-success);
-  --color-success-bg: var(--token-success-muted);
-  --color-warning: var(--token-warning);
-  --color-warning-bg: var(--token-warning-muted);
-  --color-error: var(--token-error);
-  --color-error-bg: var(--token-error-muted);
-  --color-info: var(--token-info);
-  --color-info-bg: var(--token-info-muted);
-  --color-pending: var(--token-text-faint);
-  --color-pending-bg: var(--token-fill-1);
-  --accent-clay-bg: var(--token-accent-subtle);
-  --accent-clay-bg-strong: color-mix(in srgb, var(--token-accent) 14%, transparent);
-  --accent-clay-border: color-mix(in srgb, var(--token-accent) 22%, transparent);
-}
-
-/* ══════════════════════════════════════════════════════════════
-   VANGOGH — 麦田鸦群 + 星空
-   Van Gogh · Wheatfield × Starry Night
-   ══════════════════════════════════════════════════════════════ */
-
-/* ── VANGOGH LIGHT · 麦田鸦群 ── */
-.vangogh {
-  /* 干麦秆画布 · 麦浪金 · 普鲁士蓝阴影 */
-  --token-bg:             #e8ddb2;
-  --token-bg-soft:        #d5c58f;
-  --token-surface:        #f2e8bd;
-  --token-surface-strong: #decb85;
-  --token-line-soft:      #c0ad6e;
-  --token-line:           #9f8b53;
-  --token-line-strong:    #70623f;
-  --token-text:           #1f241b;
-  --token-text-muted:     #4a5138;
-  --token-text-faint:     #767b57;
-  --token-accent:         #1f527c;
-  --token-accent-cold:    #476f45;
-
-  --token-glow:      rgba(31,82,124,.09);
-  --token-glow-cold: rgba(71,111,69,.07);
-
-  --token-surface-hover:  color-mix(in srgb, var(--token-surface-strong) 90%, var(--token-accent) 10%);
-  --token-accent-subtle:  color-mix(in srgb, var(--token-accent) 10%, transparent);
-  --token-accent-glow:    color-mix(in srgb, var(--token-accent) 7%, transparent);
-  --token-line-dashed:    color-mix(in srgb, var(--token-line-soft) 60%, transparent);
-  --token-overlay-bg:     color-mix(in srgb, var(--token-bg) 94%, transparent);
-  --token-on-accent:      #fff3c5;
-
-  --token-shadow-elevated: 0 1px 2px rgba(31,36,27,.06), 0 7px 20px rgba(31,36,27,.10);
-  --token-shadow-overlay:  0 2px 5px rgba(31,36,27,.09), 0 16px 40px rgba(31,36,27,.15);
-
-  --token-success:      #3f7d50;
-  --token-success-muted: rgba(63,125,80,.12);
-  --token-warning:      #a97824;
-  --token-warning-muted: rgba(169,120,36,.12);
-  --token-error:        #9c513a;
-  --token-error-muted:  rgba(156,81,58,.11);
-  --token-info:         #2d638e;
-  --token-info-muted:   rgba(45,99,142,.11);
-
-  --token-fill-1: color-mix(in srgb, var(--token-text) 4%, transparent);
-  --token-fill-2: color-mix(in srgb, var(--token-text) 8%, transparent);
-  --token-fill-3: color-mix(in srgb, var(--token-text) 13%, transparent);
-  --token-fill-4: color-mix(in srgb, var(--token-text) 20%, transparent);
-
-  --token-surface-glass: color-mix(in srgb, var(--token-surface) 82%, transparent);
-
-  /* ── BRIDGE ── */
-  --accent-clay: var(--token-accent);
-  --accent-clay-dark: #173f64;
-  --accent-clay-light: #5b82a6;
-  --accent-cold: var(--token-accent-cold);
-  --bg-primary: var(--token-bg);
-  --bg-secondary: var(--token-bg-soft);
-  --bg-tertiary: var(--token-surface);
-  --bg-card: var(--token-surface);
-  --bg-card-muted: var(--token-bg-soft);
-  --bg-panel: var(--token-surface-strong);
-  --bg-hover: var(--token-surface-hover);
-  --text-primary: var(--token-text);
-  --text-secondary: var(--token-text-muted);
-  --text-tertiary: #606847;
-  --text-muted: var(--token-text-faint);
-  --text-subtle: var(--token-line-strong);
-  --border-subtle: var(--token-line-soft);
-  --border-default: var(--token-line);
-  --border-strong: var(--token-line-strong);
-  --shadow-sm: var(--token-shadow-elevated);
-  --shadow-md: var(--token-shadow-overlay);
-  --color-success: var(--token-success);
-  --color-success-bg: var(--token-success-muted);
-  --color-warning: var(--token-warning);
-  --color-warning-bg: var(--token-warning-muted);
-  --color-error: var(--token-error);
-  --color-error-bg: var(--token-error-muted);
-  --color-info: var(--token-info);
-  --color-info-bg: var(--token-info-muted);
-  --color-pending: var(--token-text-faint);
-  --color-pending-bg: var(--token-fill-1);
-  --accent-clay-bg: var(--token-accent-subtle);
-  --accent-clay-bg-strong: color-mix(in srgb, var(--token-accent) 16%, transparent);
-  --accent-clay-border: color-mix(in srgb, var(--token-accent) 24%, transparent);
-}
-
-/* ── VANGOGH DARK · 星空 ── */
-.vangogh.dark {
-  /* 钴蓝夜空 · 漩涡青蓝 · 星点暖黄 */
-  --token-bg:             #0f1b2e;
-  --token-bg-soft:        #142440;
-  --token-surface:        #1a3050;
-  --token-surface-strong: #223a60;
-  --token-line-soft:      #1c3455;
-  --token-line:           #2a4a75;
-  --token-line-strong:    #3a5a8a;
-  --token-text:           #f0ece0;
-  --token-text-muted:     #c0bcb0;
-  --token-text-faint:     #77728b;
-  --token-accent:         #e8c840;
-  --token-accent-cold:    #4a98b8;
-
-  --token-glow:      rgba(232,200,64,.12);
-  --token-glow-cold: rgba(74,152,184,.08);
-
-  --token-surface-hover:  color-mix(in srgb, var(--token-surface) 88%, var(--token-accent) 12%);
-  --token-accent-subtle:  color-mix(in srgb, var(--token-accent) 10%, transparent);
-  --token-accent-glow:    color-mix(in srgb, var(--token-accent) 6%, transparent);
-  --token-line-dashed:    color-mix(in srgb, var(--token-line-soft) 60%, transparent);
-  --token-overlay-bg:     color-mix(in srgb, var(--token-bg) 92%, transparent);
-  --token-on-accent:      #101824;
-
-  --token-shadow-elevated: 0 1px 2px rgba(0,0,0,.14), 0 4px 12px rgba(0,0,0,.20);
-  --token-shadow-overlay:  0 2px 4px rgba(0,0,0,.18), 0 8px 24px rgba(0,0,0,.28);
-
-  --token-success:      #5ab88a;
-  --token-success-muted: rgba(90,184,138,.12);
-  --token-warning:      #d4a028;
-  --token-warning-muted: rgba(212,160,40,.12);
-  --token-error:        #d06060;
-  --token-error-muted:  rgba(208,96,96,.12);
-  --token-info:         #6090c0;
-  --token-info-muted:   rgba(96,144,192,.12);
-
-  --token-fill-1: color-mix(in srgb, var(--token-text) 4%, transparent);
-  --token-fill-2: color-mix(in srgb, var(--token-text) 8%, transparent);
-  --token-fill-3: color-mix(in srgb, var(--token-text) 14%, transparent);
-  --token-fill-4: color-mix(in srgb, var(--token-text) 22%, transparent);
-
-  --token-surface-glass: color-mix(in srgb, var(--token-bg-soft) 82%, transparent);
-
-  /* ── BRIDGE ── */
-  --accent-clay: var(--token-accent);
-  --accent-clay-dark: #c8a830;
-  --accent-clay-light: #f0e070;
-  --accent-cold: var(--token-accent-cold);
-  --bg-primary: var(--token-bg);
-  --bg-secondary: var(--token-bg-soft);
-  --bg-tertiary: var(--token-surface);
-  --bg-card: var(--token-bg-soft);
-  --bg-card-muted: var(--token-surface);
-  --bg-panel: var(--token-surface-strong);
-  --bg-hover: var(--token-surface-hover);
-  --text-primary: var(--token-text);
-  --text-secondary: var(--token-text-muted);
-  --text-tertiary: #a0a098;
-  --text-muted: var(--token-text-faint);
-  --text-subtle: var(--token-line-strong);
-  --border-subtle: var(--token-line-soft);
-  --border-default: var(--token-line);
-  --border-strong: var(--token-line-strong);
-  --shadow-sm: var(--token-shadow-elevated);
-  --shadow-md: var(--token-shadow-overlay);
-  --color-success: var(--token-success);
-  --color-success-bg: var(--token-success-muted);
-  --color-warning: var(--token-warning);
-  --color-warning-bg: var(--token-warning-muted);
-  --color-error: var(--token-error);
-  --color-error-bg: var(--token-error-muted);
-  --color-info: var(--token-info);
-  --color-info-bg: var(--token-info-muted);
-  --color-pending: var(--token-text-faint);
-  --color-pending-bg: var(--token-fill-1);
-  --accent-clay-bg: var(--token-accent-subtle);
-  --accent-clay-bg-strong: color-mix(in srgb, var(--token-accent) 14%, transparent);
-  --accent-clay-border: color-mix(in srgb, var(--token-accent) 22%, transparent);
-}
-
-/* ══════════════════════════════════════════════════════════════
-   INK — 水墨纸砚 · 松烟翠
-   Sumi Ink · Rice Paper × Pine-Soot Green
-   ══════════════════════════════════════════════════════════════ */
-
-/* ── INK LIGHT · 宣纸水墨 ── */
-.ink {
-  /* 宣纸白底 · 墨灰 · 松烟绿 accent */
-  --token-bg:             #F5F2ED;
-  --token-bg-soft:        #EDE9E2;
-  --token-surface:        #E8E4DC;
-  --token-surface-strong: #E0DBD2;
-  --token-line-soft:      #D4CFC6;
-  --token-line:           #B8B2A8;
-  --token-line-strong:    #969088;
-  --token-text:           #1A1816;
-  --token-text-muted:     #5C5854;
-  --token-text-faint:     #969088;
-  --token-accent:         #5B7A5E;
-  --token-accent-cold:    #6B7E8A;
-
-  --token-glow:      rgba(91,122,94,.08);
-  --token-glow-cold: rgba(107,126,138,.04);
-
-  --token-surface-hover:  color-mix(in srgb, var(--token-surface) 94%, var(--token-accent) 6%);
-  --token-accent-subtle:  color-mix(in srgb, var(--token-accent) 10%, transparent);
-  --token-accent-glow:    color-mix(in srgb, var(--token-accent) 6%, transparent);
-  --token-line-dashed:    color-mix(in srgb, var(--token-line-soft) 55%, transparent);
-  --token-overlay-bg:     color-mix(in srgb, var(--token-bg) 94%, transparent);
-  --token-on-accent:      #ffffff;
-
-  --token-shadow-elevated: 0 1px 2px rgba(0,0,0,.04), 0 4px 14px rgba(0,0,0,.06);
-  --token-shadow-overlay:  0 2px 4px rgba(0,0,0,.06), 0 10px 28px rgba(0,0,0,.08);
-
-  --token-success:      #5A8E6A;
-  --token-success-muted: rgba(90,142,106,.10);
-  --token-warning:      #9A7A3A;
-  --token-warning-muted: rgba(154,122,58,.10);
-  --token-error:        #A05048;
-  --token-error-muted:  rgba(160,80,72,.10);
-  --token-info:         #5A7890;
-  --token-info-muted:   rgba(90,120,144,.10);
-
-  --token-fill-1: color-mix(in srgb, var(--token-text) 3%, transparent);
-  --token-fill-2: color-mix(in srgb, var(--token-text) 6%, transparent);
-  --token-fill-3: color-mix(in srgb, var(--token-text) 10%, transparent);
-  --token-fill-4: color-mix(in srgb, var(--token-text) 16%, transparent);
-
-  --token-surface-glass: color-mix(in srgb, var(--token-bg) 86%, transparent);
-
-  /* ── BRIDGE ── */
-  --accent-clay: var(--token-accent);
-  --accent-clay-dark: #4A6A4E;
-  --accent-clay-light: #8AA88E;
-  --accent-cold: var(--token-accent-cold);
-  --bg-primary: var(--token-bg);
-  --bg-secondary: var(--token-bg-soft);
-  --bg-tertiary: var(--token-surface);
-  --bg-card: #FCFAF7;
-  --bg-card-muted: var(--token-bg-soft);
-  --bg-panel: var(--token-surface-strong);
-  --bg-hover: var(--token-surface-hover);
-  --text-primary: var(--token-text);
-  --text-secondary: var(--token-text-muted);
-  --text-tertiary: #7A7672;
-  --text-muted: var(--token-text-faint);
-  --text-subtle: var(--token-line-strong);
-  --border-subtle: var(--token-line-soft);
-  --border-default: var(--token-line);
-  --border-strong: var(--token-line-strong);
-  --shadow-sm: var(--token-shadow-elevated);
-  --shadow-md: var(--token-shadow-overlay);
-  --color-success: var(--token-success);
-  --color-success-bg: var(--token-success-muted);
-  --color-warning: var(--token-warning);
-  --color-warning-bg: var(--token-warning-muted);
-  --color-error: var(--token-error);
-  --color-error-bg: var(--token-error-muted);
-  --color-info: var(--token-info);
-  --color-info-bg: var(--token-info-muted);
-  --color-pending: var(--token-text-faint);
-  --color-pending-bg: var(--token-fill-1);
-  --accent-clay-bg: var(--token-accent-subtle);
-  --accent-clay-bg-strong: color-mix(in srgb, var(--token-accent) 14%, transparent);
-  --accent-clay-border: color-mix(in srgb, var(--token-accent) 20%, transparent);
-}
-
-/* ── INK DARK · 夜墨松烟 ── */
-.ink.dark {
-  /* 墨色夜空 · 松烟暗绿 · 冷灰星点 */
-  --token-bg:             #131815;
-  --token-bg-soft:        #1A201D;
-  --token-surface:        #212824;
-  --token-surface-strong: #28302B;
-  --token-line-soft:      #2A322D;
-  --token-line:           #3A423D;
-  --token-line-strong:    #4A524D;
-  --token-text:           #F0EEE8;
-  --token-text-muted:     #B0AEAA;
-  --token-text-faint:     #74726e;
-  --token-accent:         #7AA87E;
-  --token-accent-cold:    #6A8EA0;
-
-  --token-glow:      rgba(122,168,126,.10);
-  --token-glow-cold: rgba(106,142,160,.05);
-
-  --token-surface-hover:  color-mix(in srgb, var(--token-surface) 90%, var(--token-accent) 10%);
-  --token-accent-subtle:  color-mix(in srgb, var(--token-accent) 10%, transparent);
-  --token-accent-glow:    color-mix(in srgb, var(--token-accent) 6%, transparent);
-  --token-line-dashed:    color-mix(in srgb, var(--token-line-soft) 60%, transparent);
-  --token-overlay-bg:     color-mix(in srgb, var(--token-bg) 94%, transparent);
-  /* 松烟绿 accent 上的文字色：深墨（白字在 #7AA87E 上对比度不达标） */
-  --token-on-accent:      #1a2018;
-
-  --token-shadow-elevated: 0 1px 2px rgba(0,0,0,.2), 0 4px 14px rgba(0,0,0,.22);
-  --token-shadow-overlay:  0 2px 4px rgba(0,0,0,.28), 0 10px 30px rgba(0,0,0,.34);
-
-  --token-success:      #6AB080;
-  --token-success-muted: rgba(106,176,128,.12);
-  --token-warning:      #B89A45;
-  --token-warning-muted: rgba(184,154,69,.12);
-  --token-error:        #C06860;
-  --token-error-muted:  rgba(192,104,96,.12);
-  --token-info:         #6A98B8;
-  --token-info-muted:   rgba(106,152,184,.12);
-
-  --token-fill-1: color-mix(in srgb, var(--token-text) 4%, transparent);
-  --token-fill-2: color-mix(in srgb, var(--token-text) 8%, transparent);
-  --token-fill-3: color-mix(in srgb, var(--token-text) 14%, transparent);
-  --token-fill-4: color-mix(in srgb, var(--token-text) 22%, transparent);
-
-  --token-surface-glass: color-mix(in srgb, var(--token-bg-soft) 82%, transparent);
-
-  /* ── BRIDGE ── */
-  --accent-clay: var(--token-accent);
-  --accent-clay-dark: #5A8A62;
-  --accent-clay-light: #A0CAA4;
-  --accent-cold: var(--token-accent-cold);
-  --bg-primary: var(--token-bg);
-  --bg-secondary: var(--token-bg-soft);
-  --bg-tertiary: var(--token-surface);
-  --bg-card: var(--token-bg-soft);
-  --bg-card-muted: var(--token-surface);
-  --bg-panel: var(--token-surface-strong);
-  --bg-hover: var(--token-surface-hover);
-  --text-primary: var(--token-text);
-  --text-secondary: var(--token-text-muted);
-  --text-tertiary: #989692;
-  --text-muted: var(--token-text-faint);
-  --text-subtle: var(--token-line-strong);
-  --border-subtle: var(--token-line-soft);
-  --border-default: var(--token-line);
-  --border-strong: var(--token-line-strong);
-  --shadow-sm: var(--token-shadow-elevated);
-  --shadow-md: var(--token-shadow-overlay);
-  --color-success: var(--token-success);
-  --color-success-bg: var(--token-success-muted);
-  --color-warning: var(--token-warning);
-  --color-warning-bg: var(--token-warning-muted);
-  --color-error: var(--token-error);
-  --color-error-bg: var(--token-error-muted);
-  --color-info: var(--token-info);
-  --color-info-bg: var(--token-info-muted);
-  --color-pending: var(--token-text-faint);
-  --color-pending-bg: var(--token-fill-1);
-  --accent-clay-bg: var(--token-accent-subtle);
-  --accent-clay-bg-strong: color-mix(in srgb, var(--token-accent) 14%, transparent);
-  --accent-clay-border: color-mix(in srgb, var(--token-accent) 22%, transparent);
-}
-
-/* ══════════════════════════════════════════════════════════════
-   RETRO — 8-bit · 红白机 · 像素风
-   NES · Famicom · Pixel Art · CRT Glow
-   ══════════════════════════════════════════════════════════════ */
-
-/* ── RETRO LIGHT · 经典像素 ── */
-.retro {
-  /* 像素风配色：纯白底 + 经典红 + 深蓝 */
-  --token-bg:             #f0f0e8;
-  --token-bg-soft:        #e0e0d0;
-  --token-surface:        #e8e8dc;
-  --token-surface-strong: #dcdcc8;
-  --token-line-soft:      #c0c0a8;
-  --token-line:           #a0a088;
-  --token-line-strong:    #808068;
-  --token-text:           #1a1a1a;
-  --token-text-muted:     #4a4a3a;
-  --token-text-faint:     #7a7a6a;
-  --token-accent:         #d03030;
-  --token-accent-cold:    #3030a0;
-
-  /* ── Glow ── */
-  --token-glow:      rgba(208,48,48,.10);
-  --token-glow-cold: rgba(48,48,160,.08);
-
-  /* ── Derived ── */
-  --token-surface-hover:  color-mix(in srgb, var(--token-surface) 90%, var(--token-accent) 10%);
-  --token-accent-subtle:  color-mix(in srgb, var(--token-accent) 12%, transparent);
-  --token-accent-glow:    color-mix(in srgb, var(--token-accent) 8%, transparent);
-  --token-line-dashed:    color-mix(in srgb, var(--token-line-soft) 55%, transparent);
-  --token-overlay-bg:     color-mix(in srgb, var(--token-bg) 92%, transparent);
-  --token-on-accent:      #ffffff;
-
-  /* ── Shadow · 硬像素投影 ── */
-  --token-shadow-elevated: 2px 2px 0 rgba(26,26,26,.25);
-  --token-shadow-overlay:  3px 3px 0 rgba(26,26,26,.35);
-
-  /* ── Semantic ── */
-  --token-success:      #30a030;
-  --token-success-muted: rgba(48,160,48,.14);
-  --token-warning:      #c8a020;
-  --token-warning-muted: rgba(200,160,32,.14);
-  --token-error:        #d03030;
-  --token-error-muted:  rgba(208,48,48,.14);
-  --token-info:         #3030a0;
-  --token-info-muted:   rgba(48,48,160,.14);
-
-  /* ── Fill ── */
-  --token-fill-1: color-mix(in srgb, var(--token-text) 4%, transparent);
-  --token-fill-2: color-mix(in srgb, var(--token-text) 8%, transparent);
-  --token-fill-3: color-mix(in srgb, var(--token-text) 14%, transparent);
-  --token-fill-4: color-mix(in srgb, var(--token-text) 22%, transparent);
-
-  /* ── Glass ── */
-  --token-surface-glass: color-mix(in srgb, var(--token-bg-soft) 88%, transparent);
-
-  /* ── BRIDGE ── */
-  --accent-clay: var(--token-accent);
-  --accent-clay-dark: #a02020;
-  --accent-clay-light: #e06060;
-  --accent-cold: var(--token-accent-cold);
-  --bg-primary: var(--token-bg);
-  --bg-secondary: var(--token-bg-soft);
-  --bg-tertiary: var(--token-surface);
-  --bg-card: var(--token-surface);
-  --bg-card-muted: var(--token-bg-soft);
-  --bg-panel: var(--token-surface-strong);
-  --bg-hover: var(--token-surface-hover);
-  --text-primary: var(--token-text);
-  --text-secondary: var(--token-text-muted);
-  --text-tertiary: #5a5a4a;
-  --text-muted: var(--token-text-faint);
-  --text-subtle: var(--token-line-strong);
-  --border-subtle: var(--token-line-soft);
-  --border-default: var(--token-line);
-  --border-strong: var(--token-line-strong);
-  --shadow-sm: var(--token-shadow-elevated);
-  --shadow-md: var(--token-shadow-overlay);
-  --color-success: var(--token-success);
-  --color-success-bg: var(--token-success-muted);
-  --color-warning: var(--token-warning);
-  --color-warning-bg: var(--token-warning-muted);
-  --color-error: var(--token-error);
-  --color-error-bg: var(--token-error-muted);
-  --color-info: var(--token-info);
-  --color-info-bg: var(--token-info-muted);
-  --color-pending: var(--token-text-faint);
-  --color-pending-bg: var(--token-fill-1);
-  --accent-clay-bg: var(--token-accent-subtle);
-  --accent-clay-bg-strong: color-mix(in srgb, var(--token-accent) 20%, transparent);
-  --accent-clay-border: color-mix(in srgb, var(--token-accent) 24%, transparent);
-}
-
-/* ── RETRO DARK · 深夜像素 ── */
-.retro.dark {
-  /* 像素暗色：深蓝灰底 + 霓虹红 + 像素蓝 */
-  --token-bg:             #1a1a2e;
-  --token-bg-soft:        #222240;
-  --token-surface:        #2a2a50;
-  --token-surface-strong: #323260;
-  --token-line-soft:      #3a3a70;
-  --token-line:           #4a4a90;
-  --token-line-strong:    #5a5ab0;
-  --token-text:           #e8e8d8;
-  --token-text-muted:     #c0c0a8;
-  --token-text-faint:     #808070;
-  --token-accent:         #ff4040;
-  --token-accent-cold:    #5050ff;
-
-  /* ── Glow · 霓虹像素光 ── */
-  --token-glow:      rgba(255,64,64,.14);
-  --token-glow-cold: rgba(80,80,255,.10);
-
-  /* ── Derived ── */
-  --token-surface-hover:  color-mix(in srgb, var(--token-surface) 88%, var(--token-accent) 12%);
-  --token-accent-subtle:  color-mix(in srgb, var(--token-accent) 14%, transparent);
-  --token-accent-glow:    color-mix(in srgb, var(--token-accent) 10%, transparent);
-  --token-line-dashed:    color-mix(in srgb, var(--token-line-soft) 60%, transparent);
-  --token-overlay-bg:     color-mix(in srgb, var(--token-bg) 94%, transparent);
-  --token-on-accent:      #ffffff;
-
-  /* ── Shadow · 硬像素投影 ── */
-  --token-shadow-elevated: 2px 2px 0 rgba(0,0,0,.40);
-  --token-shadow-overlay:  3px 3px 0 rgba(0,0,0,.50);
-
-  /* ── Semantic ── */
-  --token-success:      #40ff40;
-  --token-success-muted: rgba(64,255,64,.16);
-  --token-warning:      #ffff40;
-  --token-warning-muted: rgba(255,255,64,.16);
-  --token-error:        #ff4040;
-  --token-error-muted:  rgba(255,64,64,.16);
-  --token-info:         #5050ff;
-  --token-info-muted:   rgba(80,80,255,.16);
-
-  /* ── Fill ── */
-  --token-fill-1: color-mix(in srgb, var(--token-text) 5%, transparent);
-  --token-fill-2: color-mix(in srgb, var(--token-text) 10%, transparent);
-  --token-fill-3: color-mix(in srgb, var(--token-text) 16%, transparent);
-  --token-fill-4: color-mix(in srgb, var(--token-text) 24%, transparent);
-
-  /* ── Glass ── */
-  --token-surface-glass: color-mix(in srgb, var(--token-bg-soft) 82%, transparent);
-
-  /* ── BRIDGE ── */
-  --accent-clay: var(--token-accent);
-  --accent-clay-dark: #d03030;
-  --accent-clay-light: #ff6060;
-  --accent-cold: var(--token-accent-cold);
-  --bg-primary: var(--token-bg);
-  --bg-secondary: var(--token-bg-soft);
-  --bg-tertiary: var(--token-surface);
-  --bg-card: var(--token-bg-soft);
-  --bg-card-muted: var(--token-surface);
-  --bg-panel: var(--token-surface-strong);
-  --bg-hover: var(--token-surface-hover);
-  --text-primary: var(--token-text);
-  --text-secondary: var(--token-text-muted);
-  --text-tertiary: #a0a090;
-  --text-muted: var(--token-text-faint);
-  --text-subtle: var(--token-line-strong);
-  --border-subtle: var(--token-line-soft);
-  --border-default: var(--token-line);
-  --border-strong: var(--token-line-strong);
-  --shadow-sm: var(--token-shadow-elevated);
-  --shadow-md: var(--token-shadow-overlay);
-  --color-success: var(--token-success);
-  --color-success-bg: var(--token-success-muted);
-  --color-warning: var(--token-warning);
-  --color-warning-bg: var(--token-warning-muted);
-  --color-error: var(--token-error);
-  --color-error-bg: var(--token-error-muted);
-  --color-info: var(--token-info);
-  --color-info-bg: var(--token-info-muted);
-  --color-pending: var(--token-text-faint);
-  --color-pending-bg: var(--token-fill-1);
-  --accent-clay-bg: var(--token-accent-subtle);
-  --accent-clay-bg-strong: color-mix(in srgb, var(--token-accent) 16%, transparent);
-  --accent-clay-border: color-mix(in srgb, var(--token-accent) 24%, transparent);
-}
-
-/* ── RETRO Depth Tokens ── */
-.retro {
-  --token-canvas: var(--token-bg);
-  --token-sidebar: color-mix(in srgb, var(--token-bg-soft) 78%, var(--token-bg) 22%);
-  --token-panel: color-mix(in srgb, var(--token-bg-soft) 52%, var(--token-bg) 48%);
-  --token-card: color-mix(in srgb, var(--token-bg) 80%, var(--token-surface) 20%);
-  --token-card-strong: color-mix(in srgb, var(--token-bg) 66%, var(--token-surface) 34%);
-  --token-control: color-mix(in srgb, var(--token-bg-soft) 62%, var(--token-bg) 38%);
-  --token-control-hover: color-mix(in srgb, var(--token-surface-hover) 52%, var(--token-bg-soft) 48%);
-  --token-outline-soft: color-mix(in srgb, var(--token-line-soft) 82%, var(--token-bg) 18%);
-  --token-outline: color-mix(in srgb, var(--token-line) 84%, var(--token-bg) 16%);
-  --token-outline-strong: color-mix(in srgb, var(--token-line-strong) 86%, var(--token-text) 8%);
-  --token-shadow-card: 2px 2px 0 color-mix(in srgb, var(--token-text) 15%, transparent);
-  --token-shadow-inset: inset 2px 2px 0 color-mix(in srgb, var(--token-surface) 42%, transparent), inset -1px -1px 0 color-mix(in srgb, var(--token-text) 4%, transparent);
-  --token-top-highlight: color-mix(in srgb, var(--token-surface) 36%, transparent);
-}
-
-.retro.dark {
-  --token-canvas: var(--token-bg);
-  --token-sidebar: color-mix(in srgb, var(--token-bg-soft) 86%, var(--token-bg) 14%);
-  --token-panel: color-mix(in srgb, var(--token-bg-soft) 72%, var(--token-bg) 28%);
-  --token-card: color-mix(in srgb, var(--token-surface) 72%, var(--token-bg-soft) 28%);
-  --token-card-strong: color-mix(in srgb, var(--token-surface-strong) 72%, var(--token-surface) 28%);
-  --token-control: color-mix(in srgb, var(--token-bg-soft) 70%, var(--token-bg) 30%);
-  --token-control-hover: color-mix(in srgb, var(--token-surface-hover) 62%, var(--token-bg-soft) 38%);
-  --token-outline-soft: color-mix(in srgb, var(--token-line-soft) 82%, var(--token-bg) 18%);
-  --token-outline: color-mix(in srgb, var(--token-line) 84%, var(--token-text-faint) 8%);
-  --token-outline-strong: color-mix(in srgb, var(--token-line-strong) 86%, var(--token-text-muted) 8%);
-  --token-shadow-card: 2px 2px 0 rgba(0,0,0,.30);
-  --token-shadow-inset: inset 2px 2px 0 color-mix(in srgb, var(--token-text) 6%, transparent), inset -1px -1px 0 rgba(0,0,0,.22);
-  --token-top-highlight: color-mix(in srgb, var(--token-surface) 18%, transparent);
-}
-
-
-/* ── 圆角 ── */
-:root {
-  --radius-xs: 6px;
-  --radius-sm: 8px;
-  --radius-md: 10px;
-  --radius-lg: 12px;
-  --radius-xl: 16px;
-  --radius-full: 999px;
-}
-
-/* ── Depth Tokens ──
-   Semantic surface levels used by app chrome and primitives. These are
-   intentionally derived from theme tokens so every palette keeps its own voice
-   while gaining clearer functional separation. */
-:root {
-  --token-canvas: var(--token-bg);
-  --token-sidebar: color-mix(in srgb, var(--token-bg-soft) 78%, var(--token-bg) 22%);
-  --token-panel: color-mix(in srgb, var(--token-bg-soft) 52%, var(--token-bg) 48%);
-  --token-card: color-mix(in srgb, var(--token-bg) 80%, var(--token-surface) 20%);
-  --token-card-strong: color-mix(in srgb, var(--token-bg) 66%, var(--token-surface) 34%);
-  --token-control: color-mix(in srgb, var(--token-bg-soft) 62%, var(--token-bg) 38%);
-  --token-control-hover: color-mix(in srgb, var(--token-surface-hover) 52%, var(--token-bg-soft) 48%);
-  --token-outline-soft: color-mix(in srgb, var(--token-line-soft) 82%, var(--token-bg) 18%);
-  --token-outline: color-mix(in srgb, var(--token-line) 84%, var(--token-bg) 16%);
-  --token-outline-strong: color-mix(in srgb, var(--token-line-strong) 86%, var(--token-text) 8%);
-  --token-shadow-card: 0 1px 2px color-mix(in srgb, var(--token-text) 5%, transparent), 0 6px 18px color-mix(in srgb, var(--token-text) 5%, transparent);
-  --token-shadow-inset: inset 0 1px 1px color-mix(in srgb, var(--token-surface) 42%, transparent), inset 0 -1px 1px color-mix(in srgb, var(--token-text) 4%, transparent);
-  --token-top-highlight: color-mix(in srgb, var(--token-surface) 36%, transparent);
-
-  /* ── Scrollbar ──
-     由 base.css 的全局滚动条消费；每个预设可在自己的块里覆盖这 5 个 token，
-     以表达品牌色差（如 piano 用金、ink 用青）。retro/terminal 风格在
-     style-profiles.css 里另有像素化硬覆盖。 */
-  --token-scrollbar-size: 8px;
-  --token-scrollbar-track: transparent;
-  --token-scrollbar-thumb: color-mix(in srgb, var(--token-text) 16%, transparent);
-  --token-scrollbar-thumb-hover: color-mix(in srgb, var(--token-accent) 50%, transparent);
-  --token-scrollbar-button: transparent;
-}
-
-.dark {
-  --token-canvas: var(--token-bg);
-  --token-sidebar: color-mix(in srgb, var(--token-bg-soft) 86%, var(--token-bg) 14%);
-  --token-panel: color-mix(in srgb, var(--token-bg-soft) 72%, var(--token-bg) 28%);
-  --token-card: color-mix(in srgb, var(--token-surface) 72%, var(--token-bg-soft) 28%);
-  --token-card-strong: color-mix(in srgb, var(--token-surface-strong) 72%, var(--token-surface) 28%);
-  --token-control: color-mix(in srgb, var(--token-bg-soft) 70%, var(--token-bg) 30%);
-  --token-control-hover: color-mix(in srgb, var(--token-surface-hover) 62%, var(--token-bg-soft) 38%);
-  --token-outline-soft: color-mix(in srgb, var(--token-line-soft) 82%, var(--token-bg) 18%);
-  --token-outline: color-mix(in srgb, var(--token-line) 84%, var(--token-text-faint) 8%);
-  --token-outline-strong: color-mix(in srgb, var(--token-line-strong) 86%, var(--token-text-muted) 8%);
-  --token-shadow-card: 0 1px 1px rgba(0,0,0,.22), 0 12px 28px rgba(0,0,0,.24);
-  --token-shadow-inset: inset 0 1px 1px color-mix(in srgb, var(--token-text) 6%, transparent), inset 0 -1px 1px rgba(0,0,0,.22);
-  --token-top-highlight: color-mix(in srgb, var(--token-surface) 18%, transparent);
-}
-
-.piano {
-  --token-canvas: var(--token-bg);
-  --token-sidebar: color-mix(in srgb, var(--token-bg-soft) 84%, var(--token-bg) 16%);
-  --token-panel: color-mix(in srgb, var(--token-bg-soft) 68%, var(--token-bg) 32%);
-  --token-card: color-mix(in srgb, var(--token-surface) 56%, var(--token-bg) 44%);
-  --token-card-strong: color-mix(in srgb, var(--token-surface) 72%, var(--token-bg-soft) 28%);
-  --token-control: color-mix(in srgb, var(--token-bg-soft) 74%, var(--token-line-soft) 26%);
-  --token-control-hover: color-mix(in srgb, var(--token-surface-strong) 92%, var(--token-accent) 8%);
-  --token-outline-soft: color-mix(in srgb, var(--token-line-soft) 84%, var(--token-bg) 16%);
-  --token-outline: color-mix(in srgb, var(--token-line) 94%, var(--token-text-muted) 6%);
-  --token-outline-strong: color-mix(in srgb, var(--token-line-strong) 92%, var(--token-text) 8%);
-  --token-shadow-card: 0 1px 1px color-mix(in srgb, var(--token-text) 7%, transparent), 0 9px 24px color-mix(in srgb, var(--token-text) 7%, transparent);
-  --token-shadow-inset: inset 0 1px 1px color-mix(in srgb, var(--token-surface) 70%, transparent), inset 0 -1px 1px color-mix(in srgb, var(--token-text) 5%, transparent);
-  --token-top-highlight: color-mix(in srgb, var(--token-surface) 52%, transparent);
-}
-
-.piano.dark {
-  --token-canvas: var(--token-bg);
-  --token-sidebar: color-mix(in srgb, var(--token-bg-soft) 86%, black 14%);
-  --token-panel: color-mix(in srgb, var(--token-bg-soft) 74%, var(--token-bg) 26%);
-  --token-card: color-mix(in srgb, var(--token-surface) 76%, var(--token-bg-soft) 24%);
-  --token-card-strong: color-mix(in srgb, var(--token-surface-strong) 78%, var(--token-surface) 22%);
-  --token-control: color-mix(in srgb, var(--token-bg-soft) 72%, black 28%);
-  --token-control-hover: color-mix(in srgb, var(--token-surface-strong) 92%, var(--token-accent) 8%);
-  --token-outline-soft: color-mix(in srgb, var(--token-line-soft) 86%, var(--token-bg) 14%);
-  --token-outline: color-mix(in srgb, var(--token-line) 92%, var(--token-accent) 8%);
-  --token-outline-strong: color-mix(in srgb, var(--token-line-strong) 88%, var(--token-accent) 12%);
-  --token-shadow-card: 0 1px 1px rgba(0,0,0,.32), 0 14px 34px rgba(0,0,0,.40);
-  --token-shadow-inset: inset 0 1px 1px color-mix(in srgb, var(--token-text) 8%, transparent), inset 0 -1px 1px rgba(0,0,0,.30);
-  --token-top-highlight: color-mix(in srgb, var(--token-text) 8%, transparent);
-}
-
-.vangogh {
-  --token-canvas: color-mix(in srgb, var(--token-bg) 88%, #f6efd0 12%);
-  --token-sidebar: color-mix(in srgb, var(--token-bg-soft) 78%, var(--token-bg) 22%);
-  --token-panel: color-mix(in srgb, var(--token-bg) 70%, var(--token-bg-soft) 30%);
-  --token-card: color-mix(in srgb, var(--token-bg) 78%, var(--token-surface) 22%);
-  --token-card-strong: color-mix(in srgb, var(--token-bg) 58%, var(--token-surface) 42%);
-  --token-control: color-mix(in srgb, var(--token-bg-soft) 58%, var(--token-bg) 42%);
-  --token-control-hover: color-mix(in srgb, var(--token-surface-strong) 86%, var(--token-accent) 14%);
-  --token-outline-soft: color-mix(in srgb, var(--token-line-soft) 80%, var(--token-bg) 20%);
-  --token-outline: color-mix(in srgb, var(--token-line) 88%, var(--token-accent) 12%);
-  --token-outline-strong: color-mix(in srgb, var(--token-line-strong) 84%, var(--token-accent) 16%);
-  --token-shadow-card: 0 1px 2px color-mix(in srgb, var(--token-text) 5%, transparent), 0 8px 22px color-mix(in srgb, var(--token-text) 7%, transparent);
-  --token-shadow-inset: inset 0 1px 1px color-mix(in srgb, var(--token-surface) 48%, transparent), inset 0 -1px 1px color-mix(in srgb, var(--token-text) 4%, transparent);
-  --token-top-highlight: color-mix(in srgb, var(--token-surface) 30%, transparent);
-}
-
-.vangogh.dark {
-  --token-canvas: var(--token-bg);
-  --token-sidebar: color-mix(in srgb, var(--token-bg-soft) 84%, var(--token-bg) 16%);
-  --token-panel: color-mix(in srgb, var(--token-bg-soft) 72%, var(--token-bg) 28%);
-  --token-card: color-mix(in srgb, var(--token-surface) 72%, var(--token-bg-soft) 28%);
-  --token-card-strong: color-mix(in srgb, var(--token-surface-strong) 76%, var(--token-surface) 24%);
-  --token-control: color-mix(in srgb, var(--token-bg-soft) 70%, var(--token-bg) 30%);
-  --token-control-hover: color-mix(in srgb, var(--token-surface-hover) 74%, var(--token-accent) 8%);
-  --token-outline-soft: color-mix(in srgb, var(--token-line-soft) 82%, var(--token-bg) 18%);
-  --token-outline: color-mix(in srgb, var(--token-line) 84%, var(--token-accent-cold) 8%);
-  --token-outline-strong: color-mix(in srgb, var(--token-line-strong) 84%, var(--token-accent) 10%);
-  --token-shadow-card: 0 1px 1px rgba(0,0,0,.22), 0 12px 28px rgba(0,0,0,.24);
-  --token-shadow-inset: inset 0 1px 1px color-mix(in srgb, var(--token-text) 6%, transparent), inset 0 -1px 1px rgba(0,0,0,.22);
-  --token-top-highlight: color-mix(in srgb, var(--token-surface) 18%, transparent);
-}
-
-/* ── 动画 ── */
-@keyframes blink {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0; }
-}
-
-.animate-blink {
-  animation: blink 1s step-end infinite;
+/* GENERATED from themes.json by bun run colors. Edit the catalogue, never this file.
+ * 6 complete themes × light/dark; 现代 is the default. Primitives are separate. */
+
+/* 现代 · 清透瓷面 · 冷调柔光 · light */
+:root, [data-icen-preset="modern"] {
+  --icen-design-canvas: #f5f6f8;
+  --icen-design-surface: #ffffff;
+  --icen-design-raised: #edf0f5;
+  --icen-design-ink: #202124;
+  --icen-design-muted: #606773;
+  --icen-design-faint: #626c79;
+  --icen-design-accent: #087bf5;
+  --icen-design-accent-strong: #0062cc;
+  --icen-design-accent-text: #0059b8;
+  --icen-design-on-accent: #ffffff;
+  --icen-design-cold: #58758f;
+  --icen-design-success: #247347;
+  --icen-design-warning: #846000;
+  --icen-design-error: #b02d36;
+  --icen-design-info: #336c91;
+  --icen-design-shadow-color: #182337;
+  --icen-design-glass-opacity: 84%;
+  --icen-design-shadow-strength: 10%;
+  --icen-design-edge-strength: 11%;
+  --icen-design-highlight-strength: 76%;
+  color-scheme: light;
+}
+
+/* 现代 · 清透瓷面 · 冷调柔光 · dark */
+[data-icen-theme="dark"], [data-icen-preset="modern"][data-icen-theme="dark"] {
+  --icen-design-canvas: #15171b;
+  --icen-design-surface: #22272f;
+  --icen-design-raised: #2c333e;
+  --icen-design-ink: #f1f4f9;
+  --icen-design-muted: #b1bbca;
+  --icen-design-faint: #9faabd;
+  --icen-design-accent: #8cbdff;
+  --icen-design-accent-strong: #91bfff;
+  --icen-design-accent-text: #9dc6ff;
+  --icen-design-on-accent: #10223c;
+  --icen-design-cold: #9bb4cb;
+  --icen-design-success: #8bd3a6;
+  --icen-design-warning: #e4c373;
+  --icen-design-error: #f2a1a5;
+  --icen-design-info: #97c8e8;
+  --icen-design-shadow-color: #000000;
+  --icen-design-glass-opacity: 90%;
+  --icen-design-shadow-strength: 27%;
+  --icen-design-edge-strength: 13%;
+  --icen-design-highlight-strength: 8%;
+  color-scheme: dark;
+}
+
+/* 东韵 · 绢本与青瓷 · 温润细光 · light */
+[data-icen-preset="dongyun"] {
+  --icen-design-canvas: #f4f1e9;
+  --icen-design-surface: #fffdf7;
+  --icen-design-raised: #e9e6db;
+  --icen-design-ink: #293a34;
+  --icen-design-muted: #60695c;
+  --icen-design-faint: #626957;
+  --icen-design-accent: #477668;
+  --icen-design-accent-strong: #305c4e;
+  --icen-design-accent-text: #315748;
+  --icen-design-on-accent: #fffdf7;
+  --icen-design-cold: #85724d;
+  --icen-design-success: #3b6544;
+  --icen-design-warning: #795517;
+  --icen-design-error: #a33e37;
+  --icen-design-info: #426477;
+  --icen-design-shadow-color: #343c2e;
+  --icen-design-glass-opacity: 97%;
+  --icen-design-shadow-strength: 7%;
+  --icen-design-edge-strength: 14%;
+  --icen-design-highlight-strength: 40%;
+  color-scheme: light;
+}
+
+/* 东韵 · 绢本与青瓷 · 温润细光 · dark */
+[data-icen-preset="dongyun"][data-icen-theme="dark"] {
+  --icen-design-canvas: #181e1b;
+  --icen-design-surface: #242e28;
+  --icen-design-raised: #334037;
+  --icen-design-ink: #f0eee0;
+  --icen-design-muted: #bfc8b6;
+  --icen-design-faint: #b2bea9;
+  --icen-design-accent: #a0c5ac;
+  --icen-design-accent-strong: #b0d0b6;
+  --icen-design-accent-text: #bdd9c1;
+  --icen-design-on-accent: #24382b;
+  --icen-design-cold: #d0bd8d;
+  --icen-design-success: #accd9e;
+  --icen-design-warning: #e1c68d;
+  --icen-design-error: #edada2;
+  --icen-design-info: #accbda;
+  --icen-design-shadow-color: #080e0a;
+  --icen-design-glass-opacity: 98%;
+  --icen-design-shadow-strength: 25%;
+  --icen-design-edge-strength: 17%;
+  --icen-design-highlight-strength: 5%;
+  color-scheme: dark;
+}
+
+/* 巨构 · 混凝土与搪瓷 · 实体承重 · light */
+[data-icen-preset="jugou"] {
+  --icen-design-canvas: #edece6;
+  --icen-design-surface: #faf9f3;
+  --icen-design-raised: #e1e0d8;
+  --icen-design-ink: #252723;
+  --icen-design-muted: #5e625b;
+  --icen-design-faint: #62645b;
+  --icen-design-accent: #b53c2d;
+  --icen-design-accent-strong: #9e3025;
+  --icen-design-accent-text: #912e24;
+  --icen-design-on-accent: #fffaf0;
+  --icen-design-cold: #596d75;
+  --icen-design-success: #3d6141;
+  --icen-design-warning: #765413;
+  --icen-design-error: #9a3138;
+  --icen-design-info: #3c6078;
+  --icen-design-shadow-color: #242821;
+  --icen-design-glass-opacity: 100%;
+  --icen-design-shadow-strength: 16%;
+  --icen-design-edge-strength: 24%;
+  --icen-design-highlight-strength: 20%;
+  color-scheme: light;
+}
+
+/* 巨构 · 混凝土与搪瓷 · 实体承重 · dark */
+[data-icen-preset="jugou"][data-icen-theme="dark"] {
+  --icen-design-canvas: #1b1d1c;
+  --icen-design-surface: #2a2e2c;
+  --icen-design-raised: #393e3b;
+  --icen-design-ink: #f4f0e3;
+  --icen-design-muted: #c3c6ba;
+  --icen-design-faint: #b8bdae;
+  --icen-design-accent: #ed9d86;
+  --icen-design-accent-strong: #f1ac92;
+  --icen-design-accent-text: #f6bba3;
+  --icen-design-on-accent: #3c211b;
+  --icen-design-cold: #b1c5ce;
+  --icen-design-success: #aecb9f;
+  --icen-design-warning: #e6c88b;
+  --icen-design-error: #f0b1ad;
+  --icen-design-info: #accbdc;
+  --icen-design-shadow-color: #090d0b;
+  --icen-design-glass-opacity: 100%;
+  --icen-design-shadow-strength: 38%;
+  --icen-design-edge-strength: 25%;
+  --icen-design-highlight-strength: 4%;
+  color-scheme: dark;
+}
+
+/* 钢琴 · 象牙琴键 · 乌木与漆面微光 · light */
+[data-icen-preset="piano"] {
+  --icen-design-canvas: #f5f3ed;
+  --icen-design-surface: #fffefb;
+  --icen-design-raised: #ece8df;
+  --icen-design-ink: #252522;
+  --icen-design-muted: #69685f;
+  --icen-design-faint: #6a675c;
+  --icen-design-accent: #94713f;
+  --icen-design-accent-strong: #765424;
+  --icen-design-accent-text: #72501f;
+  --icen-design-on-accent: #fffefb;
+  --icen-design-cold: #657386;
+  --icen-design-success: #3d6e4b;
+  --icen-design-warning: #805d17;
+  --icen-design-error: #a53d39;
+  --icen-design-info: #456984;
+  --icen-design-shadow-color: #24231e;
+  --icen-design-glass-opacity: 89%;
+  --icen-design-shadow-strength: 12%;
+  --icen-design-edge-strength: 14%;
+  --icen-design-highlight-strength: 90%;
+  color-scheme: light;
+}
+
+/* 钢琴 · 象牙琴键 · 乌木与漆面微光 · dark */
+[data-icen-preset="piano"][data-icen-theme="dark"] {
+  --icen-design-canvas: #131416;
+  --icen-design-surface: #222427;
+  --icen-design-raised: #303338;
+  --icen-design-ink: #f4f1e8;
+  --icen-design-muted: #b8b5aa;
+  --icen-design-faint: #aaa89e;
+  --icen-design-accent: #d2b278;
+  --icen-design-accent-strong: #d8ba85;
+  --icen-design-accent-text: #e3c48c;
+  --icen-design-on-accent: #292215;
+  --icen-design-cold: #a5b3c6;
+  --icen-design-success: #a4cfb0;
+  --icen-design-warning: #e2c57f;
+  --icen-design-error: #e9aaa7;
+  --icen-design-info: #a5c5e3;
+  --icen-design-shadow-color: #000000;
+  --icen-design-glass-opacity: 93%;
+  --icen-design-shadow-strength: 33%;
+  --icen-design-edge-strength: 17%;
+  --icen-design-highlight-strength: 11%;
+  color-scheme: dark;
+}
+
+/* 莫奈 · 睡莲水面 · 蓝绿柔光与含蓄紫调 · light */
+[data-icen-preset="monet"] {
+  --icen-design-canvas: #f4f7f4;
+  --icen-design-surface: #fcfdfb;
+  --icen-design-raised: #e8eeea;
+  --icen-design-ink: #20332e;
+  --icen-design-muted: #5b6f65;
+  --icen-design-faint: #5b6e64;
+  --icen-design-accent: #2b675c;
+  --icen-design-accent-strong: #245c50;
+  --icen-design-accent-text: #24574c;
+  --icen-design-on-accent: #ffffff;
+  --icen-design-cold: #667c8a;
+  --icen-design-success: #307449;
+  --icen-design-warning: #805f1b;
+  --icen-design-error: #a43d42;
+  --icen-design-info: #3d6a82;
+  --icen-design-shadow-color: #23372f;
+  --icen-design-glass-opacity: 93%;
+  --icen-design-shadow-strength: 8%;
+  --icen-design-edge-strength: 12%;
+  --icen-design-highlight-strength: 52%;
+  color-scheme: light;
+}
+
+/* 莫奈 · 睡莲水面 · 蓝绿柔光与含蓄紫调 · dark */
+[data-icen-preset="monet"][data-icen-theme="dark"] {
+  --icen-design-canvas: #121d1a;
+  --icen-design-surface: #1d2d27;
+  --icen-design-raised: #2c3d34;
+  --icen-design-ink: #e6f0e7;
+  --icen-design-muted: #a7c0b1;
+  --icen-design-faint: #9cb1a4;
+  --icen-design-accent: #93c9ad;
+  --icen-design-accent-strong: #a0d2b7;
+  --icen-design-accent-text: #a5d8bd;
+  --icen-design-on-accent: #173328;
+  --icen-design-cold: #a1baca;
+  --icen-design-success: #91d2a2;
+  --icen-design-warning: #dac487;
+  --icen-design-error: #e8a7ad;
+  --icen-design-info: #9bc4da;
+  --icen-design-shadow-color: #06100b;
+  --icen-design-glass-opacity: 95%;
+  --icen-design-shadow-strength: 27%;
+  --icen-design-edge-strength: 14%;
+  --icen-design-highlight-strength: 6%;
+  color-scheme: dark;
+}
+
+/* 梵高 · 亚麻画布 · 钴蓝与麦穗金 · light */
+[data-icen-preset="vangogh"] {
+  --icen-design-canvas: #f8f3e4;
+  --icen-design-surface: #fffdf3;
+  --icen-design-raised: #efe5c9;
+  --icen-design-ink: #253650;
+  --icen-design-muted: #5c6580;
+  --icen-design-faint: #5e667b;
+  --icen-design-accent: #275ea0;
+  --icen-design-accent-strong: #224e83;
+  --icen-design-accent-text: #234c7b;
+  --icen-design-on-accent: #fffdf3;
+  --icen-design-cold: #a0711e;
+  --icen-design-success: #416b3a;
+  --icen-design-warning: #855a15;
+  --icen-design-error: #a83c31;
+  --icen-design-info: #356b85;
+  --icen-design-shadow-color: #463d27;
+  --icen-design-glass-opacity: 92%;
+  --icen-design-shadow-strength: 11%;
+  --icen-design-edge-strength: 13%;
+  --icen-design-highlight-strength: 62%;
+  color-scheme: light;
+}
+
+/* 梵高 · 亚麻画布 · 钴蓝与麦穗金 · dark */
+[data-icen-preset="vangogh"][data-icen-theme="dark"] {
+  --icen-design-canvas: #111e32;
+  --icen-design-surface: #1c2d46;
+  --icen-design-raised: #2a3f5b;
+  --icen-design-ink: #f8efcf;
+  --icen-design-muted: #c2c4b5;
+  --icen-design-faint: #afb7bd;
+  --icen-design-accent: #e5be54;
+  --icen-design-accent-strong: #ebc568;
+  --icen-design-accent-text: #efd181;
+  --icen-design-on-accent: #2b2617;
+  --icen-design-cold: #88a5d6;
+  --icen-design-success: #b3d29b;
+  --icen-design-warning: #f0cd7b;
+  --icen-design-error: #efaaa0;
+  --icen-design-info: #a1c9e8;
+  --icen-design-shadow-color: #050b15;
+  --icen-design-glass-opacity: 93%;
+  --icen-design-shadow-strength: 30%;
+  --icen-design-edge-strength: 16%;
+  --icen-design-highlight-strength: 7%;
+  color-scheme: dark;
+}
+
+/* Recompute semantic aliases at each palette boundary (including nested specimens). */
+:root, [data-icen-preset], [data-icen-theme="dark"] {
+  --icen-design-bg-soft: color-mix(in srgb, var(--icen-design-canvas) 70%, var(--icen-design-raised));
+  --icen-token-bg: var(--icen-design-canvas);
+  --icen-token-bg-soft: var(--icen-design-bg-soft);
+  --icen-token-surface: var(--icen-design-surface);
+  --icen-token-surface-strong: var(--icen-design-raised);
+  --icen-token-text: var(--icen-design-ink);
+  --icen-token-text-muted: var(--icen-design-muted);
+  --icen-token-text-faint: var(--icen-design-faint);
+  --icen-token-accent: var(--icen-design-accent);
+  --icen-token-accent-strong: var(--icen-design-accent-strong);
+  --icen-token-accent-text: var(--icen-design-accent-text);
+  --icen-token-accent-deep: var(--icen-design-accent-strong);
+  --icen-token-accent-cold: var(--icen-design-cold);
+  --icen-token-on-accent: var(--icen-design-on-accent);
+  --icen-token-success: var(--icen-design-success);
+  --icen-token-success-text: var(--icen-design-success);
+  --icen-token-warning: var(--icen-design-warning);
+  --icen-token-error: var(--icen-design-error);
+  --icen-token-danger: var(--icen-design-error);
+  --icen-token-info: var(--icen-design-info);
+  --icen-token-surface-hover: color-mix(in srgb, var(--icen-design-surface) 94%, var(--icen-design-ink));
+  --icen-token-line-soft: color-mix(in srgb, var(--icen-design-ink) 10%, transparent);
+  --icen-token-line: color-mix(in srgb, var(--icen-design-ink) 19%, transparent);
+  --icen-token-line-strong: color-mix(in srgb, var(--icen-design-ink) 38%, transparent);
+  --icen-token-line-dashed: var(--icen-token-line);
+  --icen-token-outline-soft: var(--icen-token-line-soft);
+  --icen-token-outline: var(--icen-token-line);
+  --icen-token-outline-strong: var(--icen-token-line-strong);
+  --icen-token-fill-1: color-mix(in srgb, var(--icen-design-ink) 4%, transparent);
+  --icen-token-fill-2: color-mix(in srgb, var(--icen-design-ink) 7%, transparent);
+  --icen-token-fill-3: color-mix(in srgb, var(--icen-design-ink) 12%, transparent);
+  --icen-token-fill-4: color-mix(in srgb, var(--icen-design-ink) 18%, transparent);
+  --icen-token-accent-subtle: color-mix(in srgb, var(--icen-design-accent) 10%, transparent);
+  --icen-token-accent-glow: color-mix(in srgb, var(--icen-design-accent) 8%, transparent);
+  --icen-token-glow: transparent;
+  --icen-token-glow-cold: transparent;
+  --icen-token-success-muted: color-mix(in srgb, var(--icen-design-success) 12%, transparent);
+  --icen-token-warning-muted: color-mix(in srgb, var(--icen-design-warning) 12%, transparent);
+  --icen-token-error-muted: color-mix(in srgb, var(--icen-design-error) 12%, transparent);
+  --icen-token-error-soft: var(--icen-token-error-muted);
+  --icen-token-info-muted: color-mix(in srgb, var(--icen-design-info) 12%, transparent);
+  --icen-token-canvas: var(--icen-token-bg);
+  --icen-token-sidebar: var(--icen-token-bg-soft);
+  --icen-token-panel: var(--icen-token-bg-soft);
+  --icen-token-card: var(--icen-token-surface);
+  --icen-token-card-strong: var(--icen-token-surface-strong);
+  --icen-token-control: color-mix(in srgb, var(--icen-design-surface) 70%, var(--icen-design-canvas));
+  --icen-token-control-hover: var(--icen-token-surface-hover);
+  --icen-token-surface-glass: color-mix(in srgb, var(--icen-token-surface) var(--icen-design-glass-opacity), transparent);
+  --icen-token-overlay-bg: var(--icen-token-surface-glass);
+  --icen-token-scrollbar-size: 8px;
+  --icen-token-scrollbar-track: transparent;
+  --icen-token-scrollbar-thumb: color-mix(in srgb, var(--icen-design-ink) 22%, transparent);
+  --icen-token-scrollbar-thumb-hover: color-mix(in srgb, var(--icen-design-ink) 38%, transparent);
+  --icen-token-scrollbar-button: transparent;
+  --icen-accent-cold: var(--icen-token-accent-cold);
+  --icen-bg-primary: var(--icen-token-bg);
+  --icen-bg-secondary: var(--icen-token-bg-soft);
+  --icen-bg-tertiary: var(--icen-token-surface);
+  --icen-bg-card: var(--icen-token-card);
+  --icen-bg-card-muted: var(--icen-token-bg-soft);
+  --icen-bg-panel: var(--icen-token-panel);
+  --icen-bg-hover: var(--icen-token-surface-hover);
+  --icen-text-primary: var(--icen-token-text);
+  --icen-text-secondary: var(--icen-token-text);
+  --icen-text-tertiary: var(--icen-token-text-muted);
+  --icen-text-muted: var(--icen-token-text-muted);
+  --icen-text-subtle: var(--icen-token-text-faint);
+  --icen-border-subtle: var(--icen-token-line-soft);
+  --icen-border-default: var(--icen-token-line);
+  --icen-border-strong: var(--icen-token-line-strong);
+  --icen-shadow-sm: var(--icen-token-shadow-elevated);
+  --icen-shadow-md: var(--icen-token-shadow-overlay);
+  --icen-color-success: var(--icen-token-success);
+  --icen-color-success-bg: var(--icen-token-success-muted);
+  --icen-color-warning: var(--icen-token-warning);
+  --icen-color-warning-bg: var(--icen-token-warning-muted);
+  --icen-color-error: var(--icen-token-error);
+  --icen-color-error-bg: var(--icen-token-error-muted);
+  --icen-color-info: var(--icen-token-info);
+  --icen-color-info-bg: var(--icen-token-info-muted);
+  --icen-color-pending: var(--icen-token-text-muted);
+  --icen-color-pending-bg: var(--icen-token-bg-soft);
 }
 
 
-
 /* ── tokens/style-profiles.css ── */
-/*
- * Icen Design System — 风格配置 (Style Profiles)
- *
- * 这是颜色主题之上的第二层抽象：
- *   .style-modern   → 默认现代风格（不覆盖）
- *   .style-retro    → 8-bit / 红白机 / 像素风
- *   .style-terminal → 命令行 / CRT 终端（预留）
- *
- * 规则：
- *   1. 这些类挂在 <html> 上，与 .clay/.piano/.art/.vangogh/.ink/.retro 共存。
- *   2. 只覆盖与“风格”相关的变量：字体、圆角、阴影硬度、抗锯齿、图像渲染。
- *   3. 颜色仍由 preset 决定，保持正交。
- *
- * 注：选择器引用的是 base.css 的交互基元（.pressable / .control / .lift），
- *     而非源项目 opengal 的 .og-* 命名——切换 profile 时这些基元自动获得
- *     对应风格的几何/边框/阴影形态。
- */
-
-/* ══════════════════════════════════════════════════════════════
-   字体资源
-   ══════════════════════════════════════════════════════════════ */
-
-/* Press Start 2P — 经典 8-bit 像素字体（西文） */
-@font-face {
-  font-family: "Pixel Retro";
-  src:
-    local("Press Start 2P"),
-    local("VT323"),
-    url("https://fonts.gstatic.com/s/pressstart2p/v15/e3t4euO8T-267oIAQAu6jDQyK3nVivM.woff2") format("woff2");
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-/* 中文像素风回退：无通用免费像素中文字体，使用系统等宽/宋体保持清晰 */
-@font-face {
-  font-family: "Pixel CJK Fallback";
-  src:
-    local("Zpix"),
-    local("SimSun"),
-    local("Songti SC"),
-    local("STSong"),
-    local("Noto Serif SC"),
-    local("PingFang SC"),
-    local("Microsoft YaHei");
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
-
+/* Shared fallback defaults. Built-in primitive recipes live in design/pixel/chinese/soviet.css. */
 :root {
   /* ══════════════════════════════════════════════════════════════
      风格底层 token（兜底值）
@@ -1311,562 +403,1224 @@
      ══════════════════════════════════════════════════════════════ */
 
   /* ── Density 密度 ── */
-  --density-space-xs: 0.25rem;
-  --density-space-sm: 0.5rem;
-  --density-space-md: 0.75rem;
-  --density-space-lg: 1rem;
-  --density-space-xl: 1.5rem;
-  --density-space-2xl: 2rem;
-  --density-space-3xl: 3rem;
-  --density-space-4xl: 4rem;
-  --density-input-height-sm: 28px;
-  --density-input-height-md: 36px;
-  --density-input-height-lg: 44px;
-  --density-font-size-2xs: 10px;
-  --density-font-size-xs: 11px;
-  --density-font-size-sm: 12px;
-  --density-font-size-md: 13px;
-  --density-font-size-lg: 14px;
-  --density-font-size-xl: 18px;
-  --density-font-size-2xl: 22px;
+  --icen-density-space-2xs: 0.125rem;
+  --icen-density-space-xs: 0.25rem;
+  --icen-density-space-sm: 0.5rem;
+  --icen-density-space-md: 0.75rem;
+  --icen-density-space-lg: 1rem;
+  --icen-density-space-xl: 1.5rem;
+  --icen-density-space-2xl: 2rem;
+  --icen-density-space-3xl: 3rem;
+  --icen-density-space-4xl: 4rem;
+  --icen-density-input-height-sm: 28px;
+  --icen-density-input-height-md: 36px;
+  --icen-density-input-height-lg: 44px;
+  --icen-density-font-size-2xs: 10px;
+  --icen-density-font-size-xs: 11px;
+  --icen-density-font-size-sm: 12px;
+  --icen-density-font-size-md: 13px;
+  --icen-density-font-size-lg: 14px;
+  --icen-density-font-size-xl: 18px;
+  --icen-density-font-size-2xl: 22px;
 
   /* ── Motion 动效 ── */
-  --duration-instant: 0ms;
-  --duration-fast: 150ms;
-  --duration-normal: 200ms;
-  --duration-slow: 300ms;
-  --ease-linear: linear;
-  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
-  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --icen-duration-instant: 0ms;
+  --icen-duration-fast: 150ms;
+  --icen-duration-normal: 200ms;
+  --icen-duration-slow: 300ms;
+  --icen-ease-linear: linear;
+  --icen-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --icen-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
 
   /* ── Typography 字体 ──
-     --line-height-heading 不在此定义：typography.css 独家拥有（icen 品牌 1.2），
+     --icen-line-height-heading 不在此定义：typography.css 独家拥有（icen 品牌 1.2），
      各 .style-* profile 需要差异化时在自己的块里覆盖。 */
-  --font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
-  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  --font-mono-paper: ui-monospace, SFMono-Regular, 'JetBrains Mono', 'Courier New', monospace;
-  --font-heading: var(--font-body);
-  --letter-spacing-body: 0;
-  --letter-spacing-heading: 0;
-  --line-height-body: 1.5;
-}
-
-/* ══════════════════════════════════════════════════════════════
-   MODERN — 默认现代风格（兜底值即为现代值，显式声明便于阅读）
-   ══════════════════════════════════════════════════════════════ */
-
-.style-modern {
-  /* ── Density ── */
-  --density-space-xs: 0.25rem;
-  --density-space-sm: 0.5rem;
-  --density-space-md: 0.75rem;
-  --density-space-lg: 1rem;
-  --density-space-xl: 1.5rem;
-  --density-space-2xl: 2rem;
-  --density-space-3xl: 3rem;
-  --density-space-4xl: 4rem;
-  --density-input-height-sm: 28px;
-  --density-input-height-md: 36px;
-  --density-input-height-lg: 44px;
-  --density-font-size-2xs: 10px;
-  --density-font-size-xs: 11px;
-  --density-font-size-sm: 12px;
-  --density-font-size-md: 13px;
-  --density-font-size-lg: 14px;
-  --density-font-size-xl: 18px;
-  --density-font-size-2xl: 22px;
-
-  /* ── Motion ── */
-  --duration-fast: 150ms;
-  --duration-normal: 200ms;
-  --duration-slow: 300ms;
-  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
-
-  /* ── Typography ── */
-  --font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
-  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  --font-mono-paper: ui-monospace, SFMono-Regular, 'JetBrains Mono', 'Courier New', monospace;
-  --font-heading: var(--font-body);
-  --letter-spacing-body: 0;
-  --letter-spacing-heading: 0;
-  --line-height-body: 1.5;
-  --line-height-heading: 1.2;
-}
-
-/* ══════════════════════════════════════════════════════════════
-   RETRO — 8-bit / 红白机 / 像素风
-   ══════════════════════════════════════════════════════════════ */
-
-.style-retro {
-  /* ── Density：像素风更紧凑 ── */
-  --density-space-xs: 0.125rem;
-  --density-space-sm: 0.25rem;
-  --density-space-md: 0.5rem;
-  --density-space-lg: 0.75rem;
-  --density-space-xl: 1rem;
-  --density-space-2xl: 1.5rem;
-  --density-space-3xl: 2rem;
-  --density-space-4xl: 3rem;
-  --density-input-height-sm: 24px;
-  --density-input-height-md: 32px;
-  --density-input-height-lg: 40px;
-  --density-font-size-2xs: 9px;
-  --density-font-size-xs: 9px;
-  --density-font-size-sm: 10px;
-  --density-font-size-md: 11px;
-  --density-font-size-lg: 12px;
-  --density-font-size-xl: 14px;
-  --density-font-size-2xl: 16px;
-
-  /* ── Motion：像素风瞬间切换 ── */
-  --duration-fast: 0ms;
-  --duration-normal: 0ms;
-  --duration-slow: 0ms;
-  --ease-out: linear;
-
-  /* ── Typography：像素字体 ── */
-  --font-body: "Pixel Retro", "Pixel CJK Fallback", "Press Start 2P", "VT323", "SimSun", "Songti SC", "STSong", monospace;
-  --font-mono: "Pixel Retro", "VT323", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  --font-mono-paper: "Pixel Retro", "JetBrains Mono", "Courier New", monospace;
-  --font-heading: "Pixel Retro", "Press Start 2P", "VT323", var(--font-body);
-  --letter-spacing-body: 0.02em;
-  --letter-spacing-heading: 0.04em;
-  --line-height-body: 1.5;
-  --line-height-heading: 1.2;
-
-  /* ── 圆角：像素风几乎无圆角 ── */
-  --radius-xs: 0px;
-  --radius-sm: 0px;
-  --radius-md: 2px;
-  --radius-lg: 2px;
-  --radius-xl: 2px;
-  --radius-full: 0px;
-
-  /* ── 滚动条 ── */
-  --token-scrollbar-size: 10px;
-
-  /* ── icen 原语覆盖：retro 的聚焦环/按下/悬停全部像素化 ── */
-  --icen-ring: 2px solid var(--token-accent);
-  --icen-ring-soft: 2px solid var(--token-accent);
-  --icen-ring-error: 2px solid var(--token-error);
-  --icen-ring-success: 2px solid var(--token-success);
-  --icen-press: translate(2px, 2px);
-  --icen-press-soft: translate(1px, 1px);
-  --icen-hover-border: var(--token-accent);
-  --icen-hover-border-strong: var(--token-accent);
-  --icen-control-focus-shadow: inset 2px 2px 0 var(--token-line-soft), inset -1px -1px 0 var(--token-surface-strong);
-  --icen-control-focus-border: var(--token-accent);
-  --icen-control-error-shadow: inset 2px 2px 0 var(--token-line-soft), inset -1px -1px 0 var(--token-surface-strong);
-
-  /* ── 渲染 ── */
-  image-rendering: pixelated;
-  -webkit-font-smoothing: none;
-  -moz-osx-font-smoothing: unset;
-}
-
-/* 全局排版覆盖 */
-.style-retro body {
-  font-family: "Numeric Math", var(--font-body);
-  line-height: var(--line-height-body);
-  letter-spacing: var(--letter-spacing-body);
-}
-
-/* 标题强化像素感 */
-.style-retro h1,
-.style-retro h2,
-.style-retro h3,
-.style-retro h4,
-.style-retro h5,
-.style-retro h6 {
-  font-family: var(--font-heading);
-  letter-spacing: var(--letter-spacing-heading);
-  line-height: var(--line-height-heading);
-  text-transform: uppercase;
-}
-
-/* ══════════════════════════════════════════════════════════════
-   按钮 / 可点击元素 — 8-bit 像素按钮
-   base.css 的 .pressable / 原生 button / [role=button] / 复位按钮
-   注：聚焦环 / 按下形变 / 悬停边框 由 --icen-* 原语驱动，
-       在 .style-retro 块里已统一覆盖；这里只补"按钮的像素投影"，
-       这是 .pressable::after 高光无法表达的形态。
-   ══════════════════════════════════════════════════════════════ */
-
-.style-retro .pressable,
-.style-retro button,
-.style-retro [role="button"],
-.style-retro input[type="button"],
-.style-retro input[type="submit"],
-.style-retro input[type="reset"] {
-  position: relative;
-  border-radius: var(--radius-md);
-  border: 2px solid var(--token-line-strong);
-  box-shadow:
-    inset -2px -2px 0 var(--token-line-soft),
-    inset 2px 2px 0 var(--token-surface-strong),
-    2px 2px 0 var(--token-line);
-  transition: all var(--duration-fast) var(--ease-out);
+  --icen-font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+  --icen-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  --icen-font-mono-paper: ui-monospace, SFMono-Regular, 'JetBrains Mono', 'Courier New', monospace;
+  --icen-font-heading: var(--icen-font-body);
+  --icen-letter-spacing-body: 0;
+  --icen-letter-spacing-heading: 0;
+  --icen-line-height-body: 1.5;
 }
 
-/* 禁用 .pressable::after 的现代渐变高光，retro 用硬投影表达层级 */
-.style-retro .pressable::after,
-.style-retro button::after {
-  display: none;
-}
 
-/* 悬停：边框高亮（聚焦环由 --icen-ring 接管，不再硬覆盖 outline） */
-.style-retro .pressable:hover,
-.style-retro button:hover,
-.style-retro [role="button"]:hover {
-  border-color: var(--token-accent);
-}
+/* ── tokens/typography.css ── */
+/*
+ * @icen.ai/ui — Typography Tokens（icen canonical）
+ * 默认排版：现代系统无衬线；代码/数字提供独立工具类。
+ * 像素原语的点阵排版在 pixel.css 中定义。
+ * 工具类：.icen-font-math（数字密集区，"Numeric Math" 数学字体 + tabular-nums）
+ */
 
-/* 按下：内移 + 阴影消失（位移值由 --icen-press 驱动） */
-.style-retro .pressable:active,
-.style-retro button:active,
-.style-retro [role="button"]:active {
-  box-shadow:
-    inset -2px -2px 0 var(--token-line-soft),
-    inset 2px 2px 0 var(--token-surface-strong);
+/* ── 数学/等宽数字字体（数字密集区的精密感） ── */
+@font-face {
+  font-family: "Numeric Math";
+  src:
+    local("Cambria Math"),
+    local("STIX Two Math"),
+    local("Latin Modern Math"),
+    local("Asana Math");
+  unicode-range: U+0025-003A, U+00A5, U+2212, U+223C;
 }
 
-/* 禁用状态 */
-.style-retro .pressable:where(:disabled, [aria-disabled="true"], [data-disabled]),
-.style-retro button:disabled {
-  box-shadow: none;
-  outline: none;
+:root {
+  /* ── icen 品牌字体栈 ──
+     body：系统无衬线；mono：系统等宽
+     heading：跟随界面字体 */
+  --icen-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+  --icen-font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
+  --icen-font-heading: var(--icen-font-body);
+  --icen-font-cjk: var(--icen-font-heading);
+  --icen-line-height-body: 1.7;
+  /* 独家定义（style-profiles.css 的 :root 不再重复；profile 差异化在各 .style-* 块覆盖） */
+  --icen-line-height-heading: 1.2;
 }
 
-/* ══════════════════════════════════════════════════════════════
-   输入框 / 表单元素 — 像素输入框
-   base.css 的 .control 是 wrapper 基元；原生 input/textarea/select 同样适用
-   注：聚焦阴影/边框已由 --icen-control-focus-* 接管，这里只补像素 inset 阴影
-   ══════════════════════════════════════════════════════════════ */
-
-.style-retro .control,
-.style-retro input,
-.style-retro textarea,
-.style-retro select {
-  border-radius: var(--radius-md);
-  border: 2px solid var(--token-line);
-  background: var(--token-bg);
-  box-shadow:
-    inset 2px 2px 0 var(--token-line-soft),
-    inset -1px -1px 0 var(--token-surface-strong);
-  transition: none;
-}
-
-/* 被 .control 容器包裹的输入框：自身边框透明化，
-   完全交给外层容器承担像素边框，避免常驻/聚焦状态出现双层内框。 */
-.style-retro .control input:not([type="checkbox"]):not([type="radio"]),
-.style-retro .control textarea,
-.style-retro .control select,
-.style-retro .control [contenteditable="true"] {
-  border-color: transparent !important;
-  box-shadow: none !important;
-  background: transparent !important;
-}
-
-.style-retro input:hover,
-.style-retro textarea:hover,
-.style-retro select:hover,
-.style-retro .control:hover {
-  border-color: var(--icen-hover-border);
+/* ── 全局排版 ── */
+body {
+  font-family: var(--icen-font-body);
+  line-height: var(--icen-line-height-body);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-feature-settings: "rlig" 1, "calt" 1;
+  font-variant-numeric: normal;
 }
 
-/* 文本输入区自身无焦点环，完全交给外层容器；
-   .control:focus-within 的 box-shadow / border 由 --icen-control-focus-* 自动驱动 */
-.style-retro input:focus,
-.style-retro textarea:focus,
-.style-retro select:focus,
-.style-retro input:focus-visible,
-.style-retro textarea:focus-visible,
-.style-retro select:focus-visible,
-.style-retro [contenteditable="true"]:focus,
-.style-retro [contenteditable="true"]:focus-visible {
-  outline: none !important;
-  box-shadow: none !important;
-  border-color: transparent !important;
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--icen-font-heading);
+  line-height: var(--icen-line-height-heading);
 }
 
-/* 占位符文字 */
-.style-retro input::placeholder,
-.style-retro textarea::placeholder {
-  color: var(--token-text-faint);
-  opacity: 0.7;
+/* ── 数字密集区工具类 ── */
+.icen-font-math {
+  font-family: "Numeric Math", math, var(--icen-font-body);
+  font-variant-numeric: lining-nums tabular-nums;
 }
 
-/* ══════════════════════════════════════════════════════════════
-   开关 / 复选框 — 像素开关
-   ══════════════════════════════════════════════════════════════ */
 
-.style-retro input[type="checkbox"],
-.style-retro input[type="radio"] {
-  appearance: none;
-  width: 16px;
-  height: 16px;
-  border: 2px solid var(--token-line-strong);
-  background: var(--token-bg);
-  box-shadow:
-    inset -2px -2px 0 var(--token-line-soft),
-    inset 2px 2px 0 var(--token-surface-strong);
-  cursor: pointer;
+/* ── tokens/design.css ── */
+/* 现代 primitive: geometry, type, rhythm and lighting. Color palettes live in themes.json. */
+:root {
+  --icen-design-radius: 10px;
+  --icen-design-space: 4px;
+  --icen-design-control-height: 40px;
+  --icen-design-font-size: 14px;
+  --icen-design-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+  --icen-design-glass-blur: 20px;
+  --icen-design-motion: 1;
+}
+
+/* Materials and geometry belong to the primitive, across every palette. */
+:root, [data-icen-preset], [data-icen-theme="dark"] {
+  --icen-token-surface-glass: color-mix(in srgb, var(--icen-token-surface) var(--icen-design-glass-opacity), transparent);
+  /* Contact, near-field and ambient shadows share a light source. Negative
+   * spread keeps the shadow under the object instead of fogging its outline. */
+  --icen-token-shadow-card: 0 1px 2px -1px color-mix(in srgb, var(--icen-design-shadow-color) var(--icen-design-shadow-strength), transparent), 0 4px 10px -5px color-mix(in srgb, var(--icen-design-shadow-color) calc(var(--icen-design-shadow-strength) * .7), transparent), 0 12px 24px -12px color-mix(in srgb, var(--icen-design-shadow-color) calc(var(--icen-design-shadow-strength) * .5), transparent);
+  --icen-token-shadow-elevated: 0 1px 3px color-mix(in srgb, var(--icen-design-shadow-color) calc(var(--icen-design-shadow-strength) * .75), transparent), 0 8px 20px -8px color-mix(in srgb, var(--icen-design-shadow-color) var(--icen-design-shadow-strength), transparent), 0 24px 48px -16px color-mix(in srgb, var(--icen-design-shadow-color) var(--icen-design-shadow-strength), transparent);
+  --icen-token-shadow-overlay: 0 2px 6px color-mix(in srgb, var(--icen-design-shadow-color) var(--icen-design-shadow-strength), transparent), 0 16px 36px -12px color-mix(in srgb, var(--icen-design-shadow-color) calc(var(--icen-design-shadow-strength) * 1.2), transparent), 0 40px 88px -24px color-mix(in srgb, var(--icen-design-shadow-color) calc(var(--icen-design-shadow-strength) * 1.2), transparent);
+  --icen-token-top-highlight: color-mix(in srgb, var(--icen-design-light) var(--icen-design-highlight-strength), transparent);
+  --icen-token-shadow-inset: inset 0 1px 2px color-mix(in srgb, var(--icen-design-shadow-color) calc(var(--icen-design-shadow-strength) * .35), transparent), inset 0 -1px 0 color-mix(in srgb, var(--icen-token-top-highlight) 45%, transparent);
+  --icen-token-shadow-popover: var(--icen-token-shadow-elevated);
+  --icen-token-material-edge: color-mix(in srgb, var(--icen-token-text) var(--icen-design-edge-strength), transparent);
+  --icen-token-material-light: inset 0 1px 0 var(--icen-token-top-highlight), inset 0 -1px 0 color-mix(in srgb, var(--icen-token-top-highlight) 18%, transparent);
+  --icen-token-scrim: color-mix(in srgb, var(--icen-design-shadow-color) 32%, transparent);
 }
 
-.style-retro input[type="checkbox"]:checked,
-.style-retro input[type="radio"]:checked {
-  background: var(--token-accent);
-  border-color: var(--token-accent);
-  box-shadow:
-    inset 2px 2px 0 color-mix(in srgb, var(--token-on-accent) 50%, transparent),
-    inset -2px -2px 0 color-mix(in srgb, var(--token-accent-cold) 30%, transparent);
+:root {
+  --icen-design-light: #ffffff;
+  --icen-radius-xs: max(0px, calc(var(--icen-design-radius) - 6px));
+  --icen-radius-sm: max(0px, calc(var(--icen-design-radius) - 2px));
+  --icen-radius-md: var(--icen-design-radius);
+  --icen-radius-lg: calc(var(--icen-design-radius) + 6px);
+  --icen-radius-xl: calc(var(--icen-design-radius) + 14px);
+  --icen-radius-full: 999px;
+  --icen-font-body: var(--icen-design-font);
+  --icen-font-heading: var(--icen-design-font);
+  --icen-font-cjk: var(--icen-design-font);
+  --icen-font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
+  --icen-font-mono-paper: var(--icen-font-mono);
+  --icen-line-height-body: 1.55;
+  --icen-line-height-heading: 1.25;
+  --icen-letter-spacing-body: 0;
+  --icen-letter-spacing-heading: -.02em;
+  --icen-duration-fast: calc(120ms * var(--icen-design-motion));
+  --icen-duration-normal: calc(180ms * var(--icen-design-motion));
+  --icen-duration-slow: calc(260ms * var(--icen-design-motion));
+  --icen-ease-out: cubic-bezier(.16, 1, .3, 1);
+  --icen-ease-bounce: var(--icen-ease-out);
+  --icen-hover-border: var(--icen-token-line);
+  --icen-hover-border-strong: var(--icen-token-line-strong);
+  --icen-press: scale(.985);
+  --icen-press-soft: scale(.99);
+  --icen-disabled-opacity: .48;
+  --icen-ring: 0 0 0 2px var(--icen-token-surface), 0 0 0 4px var(--icen-token-accent);
+  --icen-ring-soft: 0 0 0 3px var(--icen-token-accent-subtle);
+  --icen-control-focus-border: var(--icen-token-accent);
+  --icen-control-focus-shadow: var(--icen-token-shadow-inset), var(--icen-ring-soft);
+}
+
+/* Density changes rhythm and row height, never shrinks reading text. Re-declare
+ * recipes at the density boundary so inherited resolved variables cannot freeze. */
+:root,
+:root [data-icen-density] {
+  --icen-design-density-scale: 1;
+  --icen-design-density-offset: 0px;
+  --icen-density-space-2xs: calc(var(--icen-design-space) * var(--icen-design-density-scale) * .5);
+  --icen-density-space-xs: calc(var(--icen-design-space) * var(--icen-design-density-scale));
+  --icen-density-space-sm: calc(var(--icen-design-space) * var(--icen-design-density-scale) * 2);
+  --icen-density-space-md: calc(var(--icen-design-space) * var(--icen-design-density-scale) * 3);
+  --icen-density-space-lg: calc(var(--icen-design-space) * var(--icen-design-density-scale) * 4);
+  --icen-density-space-xl: calc(var(--icen-design-space) * var(--icen-design-density-scale) * 6);
+  --icen-density-space-2xl: calc(var(--icen-design-space) * var(--icen-design-density-scale) * 8);
+  --icen-density-space-3xl: calc(var(--icen-design-space) * var(--icen-design-density-scale) * 12);
+  --icen-density-space-4xl: calc(var(--icen-design-space) * var(--icen-design-density-scale) * 16);
+  --icen-density-input-height-sm: max(28px, calc(var(--icen-design-control-height) + var(--icen-design-density-offset) - 8px));
+  --icen-density-input-height-md: calc(var(--icen-design-control-height) + var(--icen-design-density-offset));
+  --icen-density-input-height-lg: calc(var(--icen-design-control-height) + var(--icen-design-density-offset) + 8px);
+  --icen-density-font-size-2xs: max(12px, calc(var(--icen-design-font-size) - 2px));
+  --icen-density-font-size-xs: max(12px, calc(var(--icen-design-font-size) - 2px));
+  --icen-density-font-size-sm: max(12px, calc(var(--icen-design-font-size) - 1px));
+  --icen-density-font-size-md: var(--icen-design-font-size);
+  --icen-density-font-size-lg: calc(var(--icen-design-font-size) + 2px);
+  --icen-density-font-size-xl: calc(var(--icen-design-font-size) + 6px);
+  --icen-density-font-size-2xl: calc(var(--icen-design-font-size) + 12px);
+}
+:root[data-icen-density="compact"],
+:root [data-icen-density="compact"] {
+  --icen-design-density-scale: .75;
+  --icen-design-density-offset: -6px;
+}
+:root[data-icen-density="comfortable"],
+:root [data-icen-density="comfortable"] {
+  --icen-design-density-scale: 1.25;
+  --icen-design-density-offset: 4px;
+}
+@media (pointer: coarse) {
+  :root, :root [data-icen-density] {
+    --icen-density-input-height-sm: max(44px, calc(var(--icen-design-control-height) + var(--icen-design-density-offset) - 8px));
+    --icen-density-input-height-md: max(44px, calc(var(--icen-design-control-height) + var(--icen-design-density-offset)));
+    --icen-density-input-height-lg: max(44px, calc(var(--icen-design-control-height) + var(--icen-design-density-offset) + 8px));
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  :root { --icen-design-motion: 0; }
+}
+
+
+/* ── tokens/chinese.css ── */
+/* 中式 / Chinese — Song-era proportion, book typography and quiet paper planes.
+ * Palette-independent: the active theme supplies every pigment and semantic color.
+ * Display type is serif; small controls and dense information remain sans-serif.
+ */
+:root[data-icen-style="chinese"],
+:root[data-icen-style="chinese"] [data-icen-preset] {
+  --icen-design-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+  --icen-design-font-size: 14px;
+  --icen-design-radius: 4px;
+  --icen-design-space: 4.5px;
+  --icen-design-control-height: 42px;
+  --icen-design-glass-opacity: 100%;
+  --icen-design-glass-blur: 0px;
+  --icen-radius-xs: max(0px, calc(var(--icen-design-radius) - 2px));
+  --icen-radius-sm: var(--icen-design-radius);
+  --icen-radius-md: var(--icen-design-radius);
+  --icen-radius-lg: calc(var(--icen-design-radius) * 2);
+  --icen-radius-xl: calc(var(--icen-design-radius) * 3);
+  --icen-radius-full: 999px;
+  --icen-font-body: var(--icen-design-font);
+  --icen-font-heading: 'Iowan Old Style', 'Palatino Linotype', 'Songti SC', 'Noto Serif CJK SC', 'Source Han Serif SC', 'STSong', 'SimSun', serif;
+  --icen-font-cjk: var(--icen-design-font);
+  --icen-line-height-body: 1.75;
+  --icen-line-height-heading: 1.4;
+  --icen-letter-spacing-body: .012em;
+  --icen-letter-spacing-heading: .045em;
+  --icen-duration-fast: calc(140ms * var(--icen-design-motion));
+  --icen-duration-normal: calc(240ms * var(--icen-design-motion));
+  --icen-duration-slow: calc(340ms * var(--icen-design-motion));
+  --icen-ease-out: cubic-bezier(.22, .68, .2, 1);
+  --icen-ease-bounce: var(--icen-ease-out);
+  --icen-token-surface-glass: var(--icen-token-surface);
+  --icen-token-shadow-card: 0 1px 2px color-mix(in srgb, var(--icen-design-shadow-color) calc(var(--icen-design-shadow-strength) * .45), transparent), 0 6px 18px color-mix(in srgb, var(--icen-design-shadow-color) calc(var(--icen-design-shadow-strength) * .25), transparent);
+  --icen-token-shadow-elevated: 0 1px 3px color-mix(in srgb, var(--icen-design-shadow-color) calc(var(--icen-design-shadow-strength) * .65), transparent), 0 12px 30px color-mix(in srgb, var(--icen-design-shadow-color) calc(var(--icen-design-shadow-strength) * .55), transparent);
+  --icen-token-shadow-overlay: 0 2px 5px color-mix(in srgb, var(--icen-design-shadow-color) var(--icen-design-shadow-strength), transparent), 0 24px 64px color-mix(in srgb, var(--icen-design-shadow-color) calc(var(--icen-design-shadow-strength) * .7), transparent);
+  --icen-token-shadow-popover: var(--icen-token-shadow-elevated);
+  --icen-token-shadow-inset: inset 0 0 0 0 transparent;
+  --icen-token-material-light: inset 0 0 0 0 transparent;
+  --icen-token-top-highlight: transparent;
+  --icen-token-material-edge: var(--icen-token-line);
+}
+
+
+/* ── tokens/soviet.css ── */
+/* 苏式 / Soviet — architectural mass and constructivist typographic hierarchy.
+ * Square slabs, strong load-bearing edges and short, deliberate feedback.
+ * No ideological emblems or palette overrides: color remains a separate axis.
+ */
+:root[data-icen-style="soviet"],
+:root[data-icen-style="soviet"] [data-icen-preset] {
+  --icen-design-font: 'Segoe UI', 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
+  --icen-design-font-size: 14px;
+  --icen-design-radius: 0px;
+  --icen-design-space: 4px;
+  --icen-design-control-height: 44px;
+  --icen-design-glass-opacity: 100%;
+  --icen-design-glass-blur: 0px;
+  --icen-radius-xs: var(--icen-design-radius);
+  --icen-radius-sm: var(--icen-design-radius);
+  --icen-radius-md: var(--icen-design-radius);
+  --icen-radius-lg: var(--icen-design-radius);
+  --icen-radius-xl: var(--icen-design-radius);
+  --icen-radius-full: var(--icen-design-radius);
+  --icen-font-body: var(--icen-design-font);
+  --icen-font-heading: 'Bahnschrift', 'DIN Alternate', 'Arial Narrow', 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+  --icen-font-cjk: var(--icen-design-font);
+  --icen-line-height-body: 1.6;
+  --icen-line-height-heading: 1.12;
+  --icen-letter-spacing-body: 0;
+  --icen-letter-spacing-heading: -.025em;
+  --icen-duration-fast: calc(90ms * var(--icen-design-motion));
+  --icen-duration-normal: calc(150ms * var(--icen-design-motion));
+  --icen-duration-slow: calc(220ms * var(--icen-design-motion));
+  --icen-ease-out: cubic-bezier(.2, 0, .2, 1);
+  --icen-ease-bounce: var(--icen-ease-out);
+  --icen-token-surface-glass: var(--icen-token-surface);
+  --icen-token-shadow-card: 0 3px 0 var(--icen-token-line);
+  --icen-token-shadow-elevated: 0 4px 0 var(--icen-token-line-strong), 0 12px 24px color-mix(in srgb, var(--icen-design-shadow-color) calc(var(--icen-design-shadow-strength) * .65), transparent);
+  --icen-token-shadow-overlay: 0 6px 0 var(--icen-token-line-strong), 0 24px 48px color-mix(in srgb, var(--icen-design-shadow-color) var(--icen-design-shadow-strength), transparent);
+  --icen-token-shadow-popover: var(--icen-token-shadow-elevated);
+  --icen-token-shadow-inset: inset 0 -1px 0 var(--icen-token-line);
+  --icen-token-material-light: inset 0 0 0 0 transparent;
+  --icen-token-top-highlight: transparent;
+  --icen-token-material-edge: var(--icen-token-line-strong);
+}
+
+
+/* ── tokens/pixel.css ── */
+/* 像素 / Pixel — a discrete grid, print-like contours and mechanical feedback.
+ * This is a primitive, never a palette: every color comes from the current theme.
+ * Native 12px CJK glyphs, 24/36/48px display sizes, four-pixel spacing, opaque
+ * materials, square corners and stepped shadows. No CRT haze or flashing noise.
+ */
+@font-face {
+  font-family: 'Icen Pixel';
+  src: url('./fonts/fusion-pixel-12px-zh-hans.woff2') format('woff2');
+  font-display: swap;
+  font-style: normal;
+  font-weight: 400;
 }
-
-.style-retro input[type="checkbox"]:checked::after {
-  content: "";
-  display: block;
-  width: 6px;
-  height: 10px;
-  margin: 1px 0 0 4px;
-  border: solid var(--token-on-accent);
-  border-width: 0 2px 2px 0;
-  transform: rotate(45deg);
+:root[data-icen-style="pixel"], :root[data-icen-style="pixel"] [data-icen-preset] {
+  --icen-design-font: 'Icen Pixel', ui-monospace, 'Microsoft YaHei', monospace;
+  --icen-design-font-size: 12px;
+  --icen-design-space: 4px;
+  --icen-design-control-height: 40px;
+  --icen-design-glass-opacity: 100%;
+  --icen-design-glass-blur: 0px;
+  --icen-design-motion: 0;
+  --icen-radius-xs: 0px;
+  --icen-radius-sm: 0px;
+  --icen-radius-md: 0px;
+  --icen-radius-lg: 0px;
+  --icen-radius-xl: 0px;
+  --icen-radius-full: 0px;
+  --icen-font-body: var(--icen-design-font);
+  --icen-font-heading: var(--icen-design-font);
+  --icen-font-cjk: var(--icen-design-font);
+  --icen-font-mono: var(--icen-design-font);
+  --icen-letter-spacing-heading: 0;
+  --icen-line-height-body: 2;
+  --icen-line-height-heading: 1.5;
+  --icen-token-shadow-card: 2px 2px 0 var(--icen-token-line-strong);
+  --icen-token-shadow-elevated: 4px 4px 0 var(--icen-token-line-strong);
+  --icen-token-shadow-overlay: 8px 8px 0 var(--icen-token-line-strong);
+  --icen-token-shadow-inset: none;
+  --icen-token-material-light: 0 0 0 1px var(--icen-token-line-strong);
+  --icen-token-top-highlight: transparent;
+  --icen-press: translate(2px, 2px);
+  --icen-press-soft: translate(2px, 2px);
+  --icen-ring: 0 0 0 2px var(--icen-token-surface), 0 0 0 4px var(--icen-token-accent);
+  --icen-ring-soft: 0 0 0 2px var(--icen-token-accent);
+  --icen-control-focus-shadow: 0 0 0 2px var(--icen-token-accent);
+  --icen-ease-out: steps(1, end);
+  --icen-ease-bounce: steps(1, end);
 }
 
-.style-retro input[type="radio"] {
-  border-radius: 0;
-}
 
-.style-retro input[type="radio"]:checked::after {
-  content: "";
-  display: block;
-  width: 6px;
-  height: 6px;
-  margin: 3px;
-  background: var(--token-on-accent);
+/* ── tokens/icon-masks.css ── */
+/* Generated by scripts/icon-masks.ts from behaviors/icons.ts. */
+:root {
+  --icen-token-icon-file: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%202.5h5.5L16%207v9.5a1%201%200%200%201-1%201H5a1%201%200%200%201-1-1v-12a2%202%200%200%201%202-2ZM11.5%202.5V7H16%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-folder: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%205a1.5%201.5%200%200%201%201.5-1.5H8l2%202h5.5A1.5%201.5%200%200%201%2017%207v8a1.5%201.5%200%200%201-1.5%201.5h-11A1.5%201.5%200%200%201%203%2015Z%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-globe: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17.5%2010a7.5%207.5%200%201%201-15%200%207.5%207.5%200%200%201%2015%200ZM2.5%2010h15M10%202.5c-4%204-4%2011%200%2015%204-4%204-11%200-15Z%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-document: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%202.5h5.5L16%207v9.5a1%201%200%200%201-1%201H5a1%201%200%200%201-1-1v-12a2%202%200%200%201%202-2ZM11.5%202.5V7H16M7%2010.5h6M7%2013.5h6%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-agent: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%206V3M8%203h2M5%206h10a2%202%200%200%201%202%202v7a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V8a2%202%200%200%201%202-2ZM1.5%2010h1.5M17%2010h1.5M7%2010v2M13%2010v2M8%2014h4%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-paperclip: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%207%208.3%2012.7a1.6%201.6%200%200%201-2.3-2.3l6.3-6.3a3.2%203.2%200%200%201%204.5%204.5l-7%207a4.7%204.7%200%200%201-6.7-6.7l7-7%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-stop: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6.5%205h7A1.5%201.5%200%200%201%2015%206.5v7a1.5%201.5%200%200%201-1.5%201.5h-7A1.5%201.5%200%200%201%205%2013.5v-7A1.5%201.5%200%200%201%206.5%205Z%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-terminal: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%203.5h10a2%202%200%200%201%202%202v9a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-9a2%202%200%200%201%202-2ZM6%207l3%203-3%203M11%2013h3%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-branch: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%206v8M14%206v2a4%204%200%200%201-4%204H6M8%204a2%202%200%201%201-4%200%202%202%200%200%201%204%200ZM8%2016a2%202%200%201%201-4%200%202%202%200%200%201%204%200ZM16%204a2%202%200%201%201-4%200%202%202%200%200%201%204%200Z%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-line-numbers: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%205h2M3%2010h2M3%2015h2M8%205h9M8%2010h9M8%2015h9%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-wrap: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%205h14M3%2010h10a3%203%200%200%201%200%206h-3M12.5%2013.5%2010%2016l2.5%202.5%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-calendar: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5.5%204h9A2.5%202.5%200%200%201%2017%206.5v8a2.5%202.5%200%200%201-2.5%202.5h-9A2.5%202.5%200%200%201%203%2014.5v-8A2.5%202.5%200%200%201%205.5%204ZM6.5%202.5v3M13.5%202.5v3M3%208h14M6.5%2011h.1M10%2011h.1M13.5%2011h.1M6.5%2014h.1M10%2014h.1%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-close: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%206l8%208M14%206l-8%208%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-check: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4.5%2010.2l3.6%203.6%207.4-7.6%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-chevron-down: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5.5%207.75%2010%2012.25l4.5-4.5%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-chevron-up: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5.5%2012.25%2010%207.75l4.5%204.5%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-chevron-right: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7.75%205.5%2012.25%2010l-4.5%204.5%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-chevron-left: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12.25%205.5%207.75%2010l4.5%204.5%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-arrow-right: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.5%2010h13M11%204.5l5.5%205.5-5.5%205.5%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-arrow-left: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16.5%2010h-13M9%204.5%203.5%2010%209%2015.5%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-arrow-up: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%2016.5v-13M4.5%209%2010%203.5%2015.5%209%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-arrow-down: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%203.5v13M4.5%2011l5.5%205.5%205.5-5.5%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-plus: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%204v12M4%2010h12%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-minus: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2010h12%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-sort: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%2015V4M3%207l3-3%203%203M14%205v11M11%2013l3%203%203-3%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-search: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M13.3%2013.3%2017%2017M14.5%208.5a6%206%200%201%201-12%200%206%206%200%200%201%2012%200%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-sun: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M13.5%2010a3.5%203.5%200%201%201-7%200%203.5%203.5%200%200%201%207%200M10%201.75v1.5M10%2016.75v1.5M1.75%2010h1.5M16.75%2010h1.5M4.17%204.17l1.06%201.06M14.77%2014.77l1.06%201.06M4.17%2015.83l1.06-1.06M14.77%205.23l1.06-1.06%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-moon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17.25%2011.15A7.5%207.5%200%200%201%208.85%202.75a7.5%207.5%200%201%200%208.4%208.4Z%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-modern: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6.5%203h7A3.5%203.5%200%200%201%2017%206.5v7a3.5%203.5%200%200%201-3.5%203.5h-7A3.5%203.5%200%200%201%203%2013.5v-7A3.5%203.5%200%200%201%206.5%203ZM7%2010l3-3%203%203-3%203Z%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-pixel: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%203h5v5H3ZM12%203h5v5h-5ZM3%2012h5v5H3ZM12%2012h5v5h-5Z%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-chinese: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%208c3%200%205-2%207-5%202%203%204%205%207%205M4%208h12M6%208v8m8-8v8M3%2016h14M8%2016v-5h4v5%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-soviet: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2017h14M5%2017V8h4v9m0-12h6v12M7%208V5h2m2%203h2m-2%203h2m-2%203h2M10%205V3h4v2%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-more: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%209.9v.2M10%209.9v.2M16%209.9v.2%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-copy: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%207h8a2%202%200%200%201%202%202v6a2%202%200%200%201-2%202H9a2%202%200%200%201-2-2V7ZM13%207V5a2%202%200%200%200-2-2H5a2%202%200%200%200-2%202v6a2%202%200%200%200%202%202h2%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-edit: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11.5%204.5l4%204M4%2012l9-9a1.4%201.4%200%200%201%202%200l2%202a1.4%201.4%200%200%201%200%202l-9%209-5%201Z%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-link: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%206l2-2a4.2%204.2%200%200%201%206%206l-2%202M12%2014l-2%202a4.2%204.2%200%200%201-6-6l2-2M7%2013l6-6%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-trash: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.5%205.5h13M7%205.5V3h6v2.5M5%205.5l.7%2011.5h8.6L15%205.5M8%209v5M12%209v5%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-spinner: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%203a7%207%200%201%201-7%207%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-circle-check: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%2010a8%208%200%201%201-16%200%208%208%200%200%201%2016%200ZM6%2010l2.7%202.7%205.3-5.4%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-circle-error: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%2010a8%208%200%201%201-16%200%208%208%200%200%201%2016%200ZM7.2%207.2l5.6%205.6M12.8%207.2l-5.6%205.6%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-circle-info: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%2010a8%208%200%201%201-16%200%208%208%200%200%201%2016%200ZM10%209v5M10%206.1v.15%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-triangle-alert: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8.7%203.5a1.5%201.5%200%200%201%202.6%200l6.4%2011.3a1.5%201.5%200%200%201-1.3%202.2H3.6a1.5%201.5%200%200%201-1.3-2.2ZM10%207.2v4.4M10%2014v.15%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-refresh: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16.5%207.2A7%207%200%200%200%204.3%205.9L2.5%208M2.5%203.5V8H7M3.5%2012.8a7%207%200%200%200%2012.2%201.3l1.8-2.1M13%2012h4.5v4.5%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-external: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11.5%203H17v5.5M17%203l-8%208M8%203H5a2%202%200%200%200-2%202v10a2%202%200%200%200%202%202h10a2%202%200%200%200%202-2v-3%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-home: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.5%2010.25%2010%204l6.5%206.25M5.75%208.75v7a.75.75%200%200%200%20.75.75h7.5a.75.75%200%200%200%20.75-.75v-7%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-settings: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.5%205.5h13M3.5%2010h13M3.5%2014.5h13M7%204v3M12.5%208.5v3M8%2013v3%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-star: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%202.5l2.4%205.1%205.6.4-4.2%203.7%201.3%205.5-5.1-3-5.1%203%201.3-5.5L1.8%208l5.6-.4Z%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-eye: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2.2%2010s3-5.4%207.8-5.4S17.8%2010%2017.8%2010s-3%205.4-7.8%205.4S2.2%2010%202.2%2010ZM10%2012.4a2.4%202.4%200%201%200%200-4.8%202.4%202.4%200%200%200%200%204.8Z%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-eye-off: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2.2%2010s3-5.4%207.8-5.4S17.8%2010%2017.8%2010s-3%205.4-7.8%205.4S2.2%2010%202.2%2010ZM10%2012.4a2.4%202.4%200%201%200%200-4.8%202.4%202.4%200%200%200%200%204.8ZM3.5%203.5l13%2013%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-inbox: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.5%2012.25h3.7l1.5%202.5h2.6l1.5-2.5h3.7M4.7%205.5l-1.2%206.75v3.25a1.5%201.5%200%200%200%201.5%201.5h10a1.5%201.5%200%200%200%201.5-1.5v-3.25L15.3%205.5a1.3%201.3%200%200%200-1.25-1H5.95a1.3%201.3%200%200%200-1.25%201Z%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-bell: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%203.5a4.5%204.5%200%200%201%204.5%204.5c0%204.5%201.8%205.7%202.5%206.5H3c.7-.8%202.5-2%202.5-6.5A4.5%204.5%200%200%201%2010%203.5ZM8.5%2016.5a1.6%201.6%200%200%200%203%200%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-users: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M13.8%2016.5v-1.5a3.5%203.5%200%200%200-3.5-3.5H6.3a3.5%203.5%200%200%200-3.5%203.5v1.5M8.3%208.9a2.7%202.7%200%201%200%200-5.4%202.7%202.7%200%200%200%200%205.4ZM16.5%2016.5v-1.3a3.3%203.3%200%200%200-2.3-3.1M12.3%203.7a2.7%202.7%200%200%201%200%205.2%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-activity: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17%2010h-2.6l-2%205.8L8%204.2%206%2010H3%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-trend-up: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.5%2014.5l4.2-4.2%202.8%202.8%205.9-5.9M12.4%207.2h4.2v4.2%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-trend-down: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.5%205.5l4.2%204.2%202.8-2.8%205.9%205.9M12.4%2012.8h4.2V8.6%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-rocket: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%202.5c2%201.5%203.2%204%203.2%206.8%200%201.5-.3%202.9-.8%204.2H7.6c-.5-1.3-.8-2.7-.8-4.2%200-2.8%201.2-5.3%203.2-6.8ZM10%208.6a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203ZM7.6%2012.5%205.6%2015.4c-.9.3-1.6%201-2%202M12.4%2012.5l2%202.9c.9.3%201.6%201%202%202M8.7%2013.8c0%201.8.5%203.1%201.3%204.2.8-1.1%201.3-2.4%201.3-4.2%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-bold: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6.5%204h4.2a3%203%200%200%201%200%206H6.5M6.5%2010h5a3%203%200%200%201%200%206H6.5M6.5%204v12%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-italic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8.5%204.5h7M4.5%2015.5h7M12.5%204.5l-5%2011%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-underline: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%204v5.5a4%204%200%200%200%208%200V4M4.5%2016h11%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-align-left: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.5%204.5h13M3.5%2010h8.5M3.5%2015.5h11%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-align-center: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.5%204.5h13M5.75%2010h8.5M4.5%2015.5h11%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-align-right: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.5%204.5h13M8%2010h8.5M5.5%2015.5h11%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-list: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6.5%205h10M6.5%2010h10M6.5%2015h10M3.5%205h.01M3.5%2010h.01M3.5%2015h.01%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-server: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%203h14a1.5%201.5%200%200%201%201.5%201.5v2A1.5%201.5%200%200%201%2017%208H3a1.5%201.5%200%200%201-1.5-1.5v-2A1.5%201.5%200%200%201%203%203ZM3%2012h14a1.5%201.5%200%200%201%201.5%201.5v2A1.5%201.5%200%200%201%2017%2017H3a1.5%201.5%200%200%201-1.5-1.5v-2A1.5%201.5%200%200%201%203%2012ZM5%205.5h.01M5%2014.5h.01%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-sparkle: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%202.5l1.6%204.3%204.3%201.6-4.3%201.6L10%2014.3l-1.6-4.3-4.3-1.6%204.3-1.6ZM15.5%2012.5l.8%202.1%202.1.8-2.1.8-.8%202.1-.8-2.1-2.1-.8%202.1-.8Z%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-play: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6.5%204.8v10.4c0%20.9%201%201.5%201.8%201l8.3-5.2a1.2%201.2%200%200%200%200-2L8.3%203.8a1.2%201.2%200%200%200-1.8%201Z%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-chart-line: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.5%203.5v13h13M6.5%2012l2.8-2.8%202.2%202.2%204-4.4%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-layers: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%203.2%203.6%206.5%2010%209.8l6.4-3.3ZM4.5%2010.4%2010%2013.2l5.5-2.8M4.5%2013.6%2010%2016.4l5.5-2.8%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-box: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17%206%2010%203.2%203%206v8l7%202.8%207-2.8ZM3%206l7%202.8L17%206M10%209v7.8%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-filter: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%204.5h12l-4.4%205.1v5l-3.2-1.6V9.6Z%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-columns: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.5%204h13v12h-13ZM8.2%204v12M12.8%204v12%22%2F%3E%3C%2Fsvg%3E");
+  --icen-token-icon-download: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%203.5v8M6.8%208.3%2010%2011.5l3.2-3.2M4%2015v2.5a1.5%201.5%200%200%200%201.5%201.5h9a1.5%201.5%200%200%200%201.5-1.5V15%22%2F%3E%3C%2Fsvg%3E");
+}
+
+
+}
+
+@layer icen.components {
+/* Material contract (default 现代 primitive; theme via data-icen-preset):
+ * <section data-icen-material="content|chrome|floating">arbitrary content</section>
+ * content = opaque reading; chrome = translucent navigation; floating = temporary
+ * operations. HTML primitives need no JS. Existing components consume the same
+ * recipes automatically. Force opaque via html[data-icen-transparency="reduced"].
+ * This file ships with tokens.css as well as ui.css; kit consumers need no extras.
+ */
+/* The base layer also defines interaction defaults. Keep the primitive's
+ * interaction recipe in the components layer so separately imported base.css
+ * cannot quietly restore a different press/focus model. */
+:root:where(:not([data-icen-style]),[data-icen-style="modern"]) {
+  --icen-press: scale(.985);
+  --icen-press-soft: scale(.99);
+  --icen-hover-border: var(--icen-token-line);
+  --icen-hover-border-strong: var(--icen-token-line-strong);
+  --icen-ring: 0 0 0 2px var(--icen-token-surface), 0 0 0 4px var(--icen-token-accent);
+  --icen-ring-soft: 0 0 0 3px var(--icen-token-accent-subtle);
+  --icen-control-focus-border: var(--icen-token-accent);
+  --icen-control-focus-shadow: var(--icen-token-shadow-inset), var(--icen-ring-soft);
+  --icen-disabled-opacity: .48;
+}
+/* Selection is a contained surface, never a check glyph. ARIA remains the source
+ * of truth for keyboard/assistive technology; focus has its own outer outline. */
+:root :is(.icen-theme-switcher-option[aria-pressed="true"], .icen-select-option.is-selected, .icen-cascader-item.is-selected, .icen-cascader-item.is-active, .icen-tree-select-row.is-selected, .icen-tree-select-row.is-checked, .icen-menu-item[aria-checked="true"], .icen-menu-item--checked:not([aria-checked="false"]), .icen-ai-composer-popup-option[aria-selected="true"], .icen-kb-checkpoint-menu-item.is-checked) {
+  background: var(--icen-token-accent-subtle);
+  color: var(--icen-token-text);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--icen-token-accent) 65%, var(--icen-token-line-soft));
+}
+:root :is(.icen-select-option.is-focused, .icen-cascader-item.is-focused, .icen-tree-select-row.is-focused) { outline: 1px solid var(--icen-token-outline); outline-offset: -3px; }
+
+/* Native selection controls keep native values, keyboard behavior and mixed state,
+ * but their selected geometry is an inset core rather than an OS check glyph. */
+:root :is(input.icen-dt-check, input.icen-choice-box, .icen-form input[type="checkbox"], input[data-icen-kb-segment-clean]) {
+  appearance: none;
+  box-sizing: border-box;
+  inline-size: 16px;
+  block-size: 16px;
+  flex: 0 0 auto;
+  border: 1.5px solid var(--icen-token-outline);
+  border-radius: var(--icen-radius-xs);
+  padding: 3px;
+  background: var(--icen-token-surface);
+  background-clip: content-box;
+  cursor: pointer;
 }
-
-/* ══════════════════════════════════════════════════════════════
-   卡片 / 面板 / 表面 — 硬像素边框
-   ══════════════════════════════════════════════════════════════ */
-
-.style-retro .surface-elevated,
-.style-retro [class*="shadow-[var(--token-shadow-card)"] {
-  box-shadow:
-    2px 2px 0 var(--token-line);
-  border-width: 2px;
-  border-style: solid;
-  border-color: var(--token-line-strong);
+:root :is(input.icen-dt-check, input.icen-choice-box, .icen-form input[type="checkbox"], input[data-icen-kb-segment-clean]):checked {
+  border-color: var(--icen-token-accent);
+  background-color: var(--icen-token-accent);
+}
+:root :is(input.icen-dt-check, input.icen-choice-box, .icen-form input[type="checkbox"], input[data-icen-kb-segment-clean]):indeterminate {
+  border-color: var(--icen-token-accent);
+  background-color: transparent;
+  background-image: linear-gradient(var(--icen-token-accent),var(--icen-token-accent));
+  background-size: 8px 2px;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+:root :is(input.icen-dt-check, input.icen-choice-box, .icen-form input[type="checkbox"], input[data-icen-kb-segment-clean]):focus-visible { outline: 2px solid var(--icen-token-accent); outline-offset: 2px; }
+@media (forced-colors: active) {
+  :root :is(.icen-theme-switcher-option[aria-pressed="true"], .icen-select-option.is-selected, .icen-cascader-item.is-selected, .icen-tree-select-row.is-selected, .icen-tree-select-row.is-checked, .icen-menu-item[aria-checked="true"], .icen-ai-composer-popup-option[aria-selected="true"], .icen-kb-checkpoint-menu-item.is-checked) { outline: 3px double Highlight; outline-offset: -3px; }
+  :root :is(input.icen-dt-check, input.icen-choice-box, .icen-form input[type="checkbox"], input[data-icen-kb-segment-clean]) { forced-color-adjust: none; border-color: CanvasText; background-color: Canvas; }
+  :root :is(input.icen-dt-check, input.icen-choice-box, .icen-form input[type="checkbox"], input[data-icen-kb-segment-clean]):checked { background-color: Highlight; }
+  :root :is(input.icen-dt-check, input.icen-choice-box, .icen-form input[type="checkbox"], input[data-icen-kb-segment-clean]):indeterminate { background-image: linear-gradient(Highlight,Highlight); }
+}
+
+/* Component display rules must not override native hidden semantics. Preserve
+ * until-found so browser find-in-page can reveal intentionally searchable content. */
+:where([class^="icen-"], [class*=" icen-"])[hidden]:not([hidden="until-found"]) {
+  display: none !important; /* guard:allow-important native hidden must win over component display:flex/grid */
+}
+:root[data-icen-design-changing] *,
+:root[data-icen-design-changing] *::before,
+:root[data-icen-design-changing] *::after {
+  transition: none !important; /* guard:allow-important palette changes must not pass through unreadable intermediate colors */
+}
+:root body {
+  font-family: var(--icen-font-body);
+  font-variant-numeric: normal;
+  font-size: var(--icen-density-font-size-md);
+  line-height: var(--icen-line-height-body);
+  letter-spacing: var(--icen-letter-spacing-body);
+  background: var(--icen-token-canvas);
+  color: var(--icen-token-text);
+}
+:root :is(h1,h2,h3,h4,h5,h6) {
+  font-family: var(--icen-font-heading);
+  letter-spacing: var(--icen-letter-spacing-heading);
+  line-height: var(--icen-line-height-heading);
+  text-wrap: balance;
+}
+:root :is(button,input,textarea,select) { font-family: var(--icen-font-body); }
+:root [data-icen-material] {
+  background: var(--icen-token-surface);
+  color: var(--icen-token-text);
+  border: 1px solid var(--icen-token-outline-soft);
+  border-radius: var(--icen-radius-lg);
+}
+:root :is([data-icen-material="content"],.icen-card) {
+  background: var(--icen-token-surface);
+  box-shadow: none;
 }
-
-/* 禁用平滑悬停提升；.lift 在 retro 下用硬投影 + 边框色变化表达悬停 */
-.style-retro .lift:hover {
-  transform: none;
-  box-shadow:
-    2px 2px 0 var(--token-accent);
-  border-color: var(--token-accent);
+/* Opaque fallback is the default. Enable transparency only with browser support. */
+:root :is([data-icen-material="chrome"],[data-icen-material="floating"],.icen-menu,.icen-popover,.icen-select-panel,.icen-date-picker-panel,.icen-autocomplete-panel,.icen-cascader-panel,.icen-tree-select-panel,.icen-mentions-panel,.icen-ai-composer-popup,.icen-command-palette,.icen-card--glass,.icen-nav) {
+  background: var(--icen-token-surface);
+  border-color: var(--icen-token-material-edge);
+  box-shadow: var(--icen-token-material-light), var(--icen-token-shadow-elevated);
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
 }
-
-/* ══════════════════════════════════════════════════════════════
-   滚动条 — 方块像素滚动条
-   ══════════════════════════════════════════════════════════════ */
-
-.style-retro * {
-  scrollbar-width: thin;
-  scrollbar-color: var(--token-accent) var(--token-bg-soft);
+:root [data-icen-material="chrome"] { box-shadow: var(--icen-token-material-light); }
+:root .icen-nav[data-icen-scroll-reactive]:not(.is-scrolled) {
+  background: var(--icen-token-surface);
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
 }
-
-.style-retro ::-webkit-scrollbar {
-  width: var(--token-scrollbar-size);
-  height: var(--token-scrollbar-size);
+@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  :root :is([data-icen-material="chrome"],[data-icen-material="floating"],.icen-menu,.icen-popover,.icen-select-panel,.icen-date-picker-panel,.icen-autocomplete-panel,.icen-cascader-panel,.icen-tree-select-panel,.icen-mentions-panel,.icen-ai-composer-popup,.icen-command-palette,.icen-card--glass,.icen-nav) {
+    background: var(--icen-token-surface-glass);
+    backdrop-filter: blur(var(--icen-design-glass-blur)) saturate(1.15);
+    -webkit-backdrop-filter: blur(var(--icen-design-glass-blur)) saturate(1.15);
+  }
+}
+:root .icen-nav { box-shadow: var(--icen-token-material-light); }
+:root .icen-btn {
+  --btn-border-hover: var(--icen-token-line);
+  gap: var(--icen-density-space-sm);
+  border-radius: var(--icen-radius-md);
+  letter-spacing: 0;
+}
+:root .icen-btn-primary { --btn-border-hover: var(--icen-token-accent-strong); }
+:root :is(.icen-btn-ghost,.icen-btn-link) { --btn-border-hover: transparent; }
+:root .icen-btn-link { --btn-fg: var(--icen-token-accent-text); }
+:root .icen-btn-primary:hover:not(:focus-visible) { box-shadow: none; }
+:root .icen-btn:active:not(:disabled):not([aria-disabled="true"]):not([data-icen-disabled]):not(.is-loading) { transform: var(--icen-press-soft); }
+:root .icen-btn-danger:hover { color: var(--icen-token-error); background: var(--icen-token-error-muted); }
+:root .icen-segmented { padding: var(--icen-density-space-xs); gap: var(--icen-density-space-xs); }
+:root .icen-segmented-item { border-radius: max(0px, calc(var(--icen-radius-md) - var(--icen-density-space-xs) - 1px)); }
+:root :is(.icen-segmented-item.is-active,.icen-segmented-item[aria-checked="true"],.icen-toggle-group-btn.is-active) {
+  background: var(--icen-token-surface);
+  color: var(--icen-token-text);
+  box-shadow: var(--icen-token-shadow-card);
+}
+:root :is(.icen-menu,.icen-popover,.icen-select-panel) { border-radius: var(--icen-radius-lg); }
+:root .icen-modal {
+  border-radius: var(--icen-radius-xl);
+  box-shadow: var(--icen-token-material-light), var(--icen-token-shadow-overlay);
+}
+:root :is(.icen-modal-backdrop,.icen-command-palette-backdrop) {
+  background: var(--icen-token-scrim);
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
 }
-
-.style-retro ::-webkit-scrollbar-track {
-  background: var(--token-bg-soft);
-  border: 1px solid var(--token-line);
+:root .icen-card--elevated { box-shadow: var(--icen-token-shadow-card); }
+:root .icen-card--interactive:hover { transform: none; border-color: var(--icen-token-line); }
+:root .icen-card--interactive:focus-within { box-shadow: var(--icen-ring); }
+:root .icen-switch-thumb { background: var(--icen-token-text-muted); }
+:root .icen-switch[aria-checked="true"] .icen-switch-thumb { background: var(--icen-token-on-accent); }
+:root .icen-input-wrap--sm { padding-inline: var(--icen-density-space-sm); }
+/* 现代: small controls have a legible edge and a quiet, tactile surface. Keep
+ * these optical refinements local to the default primitive; other primitives
+ * supply their own surface physics without fighting a global component rule. */
+:root:where(:not([data-icen-style]),[data-icen-style="modern"]) .icen-btn:not(.icen-btn-ghost):not(.icen-btn-link) {
+  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--icen-token-top-highlight) 45%, transparent), 0 1px 2px color-mix(in srgb, var(--icen-design-shadow-color) calc(var(--icen-design-shadow-strength) * .35), transparent);
+}
+:root:where(:not([data-icen-style]),[data-icen-style="modern"]) .icen-btn:focus-visible {
+  box-shadow: var(--icen-ring);
+}
+:root:where(:not([data-icen-style]),[data-icen-style="modern"]) .icen-btn:active:not(:disabled):not([aria-disabled="true"]):not([data-icen-disabled]):not(.is-loading) {
+  box-shadow: var(--icen-token-shadow-inset);
+}
+:root:where(:not([data-icen-style]),[data-icen-style="modern"]) .icen-btn:active:focus-visible {
+  box-shadow: var(--icen-token-shadow-inset), var(--icen-ring);
+}
+:root:where(:not([data-icen-style]),[data-icen-style="modern"]) :is(.icen-input-wrap,.icen-textarea-wrap) {
+  padding-inline: var(--icen-density-space-md);
+}
+:root:where(:not([data-icen-style]),[data-icen-style="modern"]) :is(.icen-input,.icen-textarea)::placeholder {
+  color: var(--icen-token-text-faint);
+  opacity: 1;
+}
+/* Data readability is explicit, never applied to every numeral in prose. */
+:root :is(.icen-numeric,.icen-table,.icen-datatable,.icen-stat-num) { font-variant-numeric: lining-nums tabular-nums; }
+/* Any translucent material has an opaque alternative, including native controls. */
+:root[data-icen-transparency="reduced"] :is([data-icen-material],.icen-menu,.icen-popover,.icen-select-panel,.icen-date-picker-panel,.icen-autocomplete-panel,.icen-cascader-panel,.icen-tree-select-panel,.icen-mentions-panel,.icen-ai-composer-popup,.icen-command-palette,.icen-card--glass,.icen-nav) {
+  background: var(--icen-token-surface);
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
 }
-
-.style-retro ::-webkit-scrollbar-thumb {
-  background: var(--token-accent);
-  border: 1px solid var(--token-line-strong);
-  border-radius: 0;
+@media (prefers-reduced-transparency: reduce) {
+  :root :is([data-icen-material],.icen-menu,.icen-popover,.icen-select-panel,.icen-date-picker-panel,.icen-autocomplete-panel,.icen-cascader-panel,.icen-tree-select-panel,.icen-mentions-panel,.icen-ai-composer-popup,.icen-command-palette,.icen-card--glass,.icen-nav) {
+    background: var(--icen-token-surface);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  :root *, :root *::before, :root *::after {
+    animation-duration: .01ms !important; /* guard:allow-important accessibility override must beat component animation */
+    transition-duration: .01ms !important; /* guard:allow-important accessibility override must beat component transition */
+    scroll-behavior: auto !important; /* guard:allow-important reduced motion includes scrolling */
+  }
+}
+@media (pointer: coarse) {
+  :root :is(.icen-btn,.icen-segmented-item,.icen-menu-item,.icen-modal-close) { min-block-size: var(--icen-density-input-height-md); }
+  /* Preserve the switch's visual geometry, expand its pointer target instead. */
+  :root .icen-switch::before {
+    content: '';
+    position: absolute;
+    inset-block: calc((100% - 44px) / 2);
+    inset-inline: 0;
+  }
+}
+@media (forced-colors: active) {
+  :root :focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
+  :root :is([data-icen-material],.icen-menu,.icen-popover,.icen-card--glass) {
+    background: Canvas;
+    color: CanvasText;
+    border-color: CanvasText;
+    box-shadow: none;
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+  :root .icen-segmented-item[aria-checked="true"] { outline: 2px solid Highlight; }
+}
+
+/* Pixel adapters: inherit palette, replace surface physics. */
+:root[data-icen-style="pixel"] :is([data-icen-material],.icen-menu,.icen-popover,.icen-select-panel,.icen-date-picker-panel,.icen-autocomplete-panel,.icen-cascader-panel,.icen-tree-select-panel,.icen-mentions-panel,.icen-ai-composer-popup,.icen-command-palette,.icen-card--glass,.icen-nav) {
+  background: var(--icen-token-surface);
+  border-color: var(--icen-token-line-strong);
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
 }
-
-.style-retro ::-webkit-scrollbar-thumb:hover {
-  background: var(--token-accent-cold);
+:root[data-icen-style="pixel"] :is(.icen-btn,.icen-input-wrap,.icen-textarea-wrap,.icen-select-trigger,.icen-segmented,[data-icen-material],.icen-card,.icen-modal) {
+  border-width: 2px;
+  border-radius: var(--icen-radius-md);
+}
+:root[data-icen-style="pixel"] :is(.icen-btn,.icen-input-wrap,.icen-select-trigger) { box-shadow: var(--icen-token-shadow-card); }
+:root[data-icen-style="pixel"] :is(.icen-btn-ghost,.icen-btn-link) { box-shadow: none; }
+:root[data-icen-style="pixel"] .icen-btn:active:not(:disabled):not([aria-disabled="true"]) { box-shadow: none; }
+:root[data-icen-style="pixel"] .icen-btn:focus-visible { box-shadow: var(--icen-ring); }
+:root[data-icen-style="pixel"] .icen-input-wrap:focus-within { box-shadow: var(--icen-control-focus-shadow); }
+:root[data-icen-style="pixel"] :is(h1,h2,h3,h4,h5,h6) { font-weight: 400; letter-spacing: 0; }
+:root[data-icen-style="pixel"] h1 { font-size: 48px; }
+:root[data-icen-style="pixel"] :is(h2,h3) { font-size: 24px; }
+:root[data-icen-style="pixel"] :is(button,input,select,textarea) { font-weight: 400; }
+:root[data-icen-style="pixel"] .icen-segmented-item { border-radius: var(--icen-radius-md); }
+:root[data-icen-style="pixel"] :is(.icen-switch,.icen-switch-thumb) { border-radius: var(--icen-radius-md); }
+:root[data-icen-style="pixel"] :is(.icen-avatar,.icen-stat-icon) { border-radius: var(--icen-radius-md); }
+/* Halftone is reserved for selected/structural surfaces, never under long text. */
+:root[data-icen-style="pixel"] .icen-segmented {
+  background-color: var(--icen-token-bg-soft);
+  background-image: repeating-linear-gradient(135deg,transparent 0 2px,var(--icen-token-line-soft) 2px 3px,transparent 3px 5px);
+}
+:root[data-icen-style="pixel"] :is(.icen-toast,.icen-notification,.icen-tooltip,.icen-date-picker-panel,.icen-menu,.icen-popover) {
+  border: 2px solid var(--icen-token-line-strong);
+  box-shadow: var(--icen-token-shadow-elevated);
+}
+:root[data-icen-style="pixel"] :is(.icen-menu-item,.icen-select-option) { border-radius: var(--icen-radius-md); }
+:root[data-icen-style="pixel"] :is(.icen-menu-item,.icen-select-option).is-focused {
+  outline: 2px solid var(--icen-token-accent);
+  outline-offset: -2px;
 }
-
-.style-retro ::-webkit-scrollbar-button {
-  display: block;
-  width: var(--token-scrollbar-size);
-  height: var(--token-scrollbar-size);
-  background: var(--token-bg-soft);
-  border: 1px solid var(--token-line);
+:root[data-icen-style="pixel"] :is(.icen-progress-track,.icen-slider-track) {
+  border: 1px solid var(--icen-token-line-strong);
+  border-radius: var(--icen-radius-md);
+  background-image: repeating-linear-gradient(90deg,transparent 0 3px,var(--icen-token-line-soft) 3px 4px);
 }
-
-.style-retro ::-webkit-scrollbar-button:hover {
-  background: var(--token-accent-subtle);
+/* Standalone outline, including when shadows disappear in forced colors. */
+:root[data-icen-style="pixel"] :focus-visible { outline: 2px solid var(--icen-token-accent); outline-offset: 3px; }
+@media (max-width: 640px) {
+  :root[data-icen-style="pixel"] h1 { font-size: 36px; }
 }
 
-/* ══════════════════════════════════════════════════════════════
-   光标 /  caret
-   ══════════════════════════════════════════════════════════════ */
-
-.style-retro * {
-  caret-color: var(--token-accent);
+/* 中式 material adapter. DOM contract: html[data-icen-style="chinese"] with
+ * existing ICEN components or [data-icen-material="content|chrome|floating"].
+ * No additional wrappers, decorative pseudo-elements or JavaScript required.
+ */
+:root[data-icen-style="chinese"] {
+  --icen-press: scale(.995);
+  --icen-press-soft: scale(.995);
+  --icen-hover-border: var(--icen-token-line);
+  --icen-hover-border-strong: var(--icen-token-line-strong);
+  --icen-ring: 0 0 0 2px var(--icen-token-surface), 0 0 0 4px var(--icen-token-accent);
+  --icen-ring-soft: 0 0 0 3px var(--icen-token-accent-subtle);
+  --icen-control-focus-shadow: var(--icen-ring-soft);
+  --icen-control-focus-border: var(--icen-token-accent);
+}
+:root[data-icen-style="chinese"] :is([data-icen-material],.icen-menu,.icen-popover,.icen-select-panel,.icen-date-picker-panel,.icen-autocomplete-panel,.icen-cascader-panel,.icen-tree-select-panel,.icen-mentions-panel,.icen-ai-composer-popup,.icen-command-palette,.icen-card--glass,.icen-nav) {
+  background: var(--icen-token-surface);
+  border-color: var(--icen-token-line);
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
 }
-
-/* ══════════════════════════════════════════════════════════════
-   悬停效果 — 像素高亮
-   ══════════════════════════════════════════════════════════════ */
-
-.style-retro a:hover,
-.style-retro [role="link"]:hover {
-  text-decoration: underline;
-  text-decoration-style: dashed;
-  text-underline-offset: 3px;
+:root[data-icen-style="chinese"] :is(h1,h2,h3,h4,h5,h6,.icen-card-title,.icen-modal-title) {
+  font-family: var(--icen-font-heading);
+  font-weight: 500;
+  letter-spacing: var(--icen-letter-spacing-heading);
+  line-height: var(--icen-line-height-heading);
 }
-
-/* ══════════════════════════════════════════════════════════════
-   Markdown / 富文本 — 禁用圆角
-   ══════════════════════════════════════════════════════════════ */
-
-.style-retro .markdown-body img,
-.style-retro .markdown-body blockquote,
-.style-retro .markdown-body code,
-.style-retro .markdown-body pre {
-  border-radius: 0;
+:root[data-icen-style="chinese"] :is(.icen-btn,.icen-page-tab,.icen-segmented-item) {
+  font-family: var(--icen-font-body);
+  letter-spacing: .025em;
+  font-weight: 500;
 }
-
-/* ══════════════════════════════════════════════════════════════
-   RETRO 全局硬化 — 处理无法仅靠 token 表达的现代风残留
-   ══════════════════════════════════════════════════════════════ */
-
-/* 禁用现代毛玻璃，用实色面板替代 */
-.style-retro .backdrop-blur-sm,
-.style-retro .backdrop-blur-md,
-.style-retro .backdrop-blur-xl,
-.style-retro .backdrop-blur-2xl {
+:root[data-icen-style="chinese"] :is(.icen-card,.icen-panel,[data-icen-material="content"]) {
+  border-color: var(--icen-token-line-soft);
+  box-shadow: none;
+}
+:root[data-icen-style="chinese"] .icen-card--elevated { box-shadow: var(--icen-token-shadow-card); }
+:root[data-icen-style="chinese"] :is(.icen-card.is-selected,.icen-card--interactive:focus-within) { box-shadow: var(--icen-ring); }
+:root[data-icen-style="chinese"] .icen-panel-title {
+  padding-block: var(--icen-density-space-md);
+  color: var(--icen-token-text);
+  letter-spacing: .06em;
+  text-transform: none;
+}
+:root[data-icen-style="chinese"] :is(.icen-card-desc,.icen-modal-desc,.icen-panel-subtitle) { line-height: var(--icen-line-height-body); }
+:root[data-icen-style="chinese"] .icen-segmented {
+  background: var(--icen-token-bg-soft);
+  border-color: var(--icen-token-line-soft);
+}
+:root[data-icen-style="chinese"] :is(.icen-segmented-item.is-active,.icen-segmented-item[aria-checked="true"],.icen-toggle-group-btn.is-active) {
+  box-shadow: inset 0 0 0 1px var(--icen-token-line), var(--icen-token-shadow-card);
+}
+/* A quiet ink rule makes navigation legible without changing its layout. */
+:root[data-icen-style="chinese"] .icen-tabs:not(.icen-tabs--cards):not(.icen-tabs--segment):not(.icen-tabs--vertical) .icen-page-tab { border-block-end-width: 1px; }
+:root[data-icen-style="chinese"] :is(.icen-btn,.icen-menu-item,.icen-select-option,.icen-segmented-item):focus-visible {
+  outline: 2px solid var(--icen-token-accent);
+  outline-offset: 3px;
+}
+@media (prefers-reduced-motion: reduce) {
+  :root[data-icen-style="chinese"] { --icen-press: none; --icen-press-soft: none; }
+}
+@media (forced-colors: active) {
+  :root[data-icen-style="chinese"] :is([data-icen-material],.icen-card,.icen-panel,.icen-menu,.icen-popover,.icen-select-panel,.icen-date-picker-panel,.icen-autocomplete-panel,.icen-cascader-panel,.icen-tree-select-panel,.icen-mentions-panel,.icen-ai-composer-popup,.icen-command-palette,.icen-modal,.icen-nav) {
+    background: Canvas;
+    color: CanvasText;
+    border-color: CanvasText;
+    box-shadow: none;
+  }
+  :root[data-icen-style="chinese"] :focus-visible { outline: 2px solid Highlight; outline-offset: 3px; }
+  :root[data-icen-style="chinese"] :is(.icen-card.is-selected,.icen-card--interactive:focus-within) { box-shadow: none; outline: 2px solid Highlight; outline-offset: 2px; }
+}
+
+/* 苏式 material adapter. DOM contract: html[data-icen-style="soviet"] with
+ * existing ICEN components or [data-icen-material="content|chrome|floating"].
+ * Structural emphasis belongs to frame/header/action, not long-form text.
+ */
+:root[data-icen-style="soviet"] {
+  --icen-press: translateY(1px);
+  --icen-press-soft: translateY(1px);
+  --icen-hover-border: var(--icen-token-line-strong);
+  --icen-hover-border-strong: var(--icen-token-text);
+  --icen-ring: 0 0 0 2px var(--icen-token-surface), 0 0 0 4px var(--icen-token-accent);
+  --icen-ring-soft: 0 0 0 2px var(--icen-token-accent-subtle);
+  --icen-control-focus-shadow: inset 0 -2px 0 var(--icen-token-accent);
+  --icen-control-focus-border: var(--icen-token-accent);
+}
+:root[data-icen-style="soviet"] :is([data-icen-material],.icen-menu,.icen-popover,.icen-select-panel,.icen-date-picker-panel,.icen-autocomplete-panel,.icen-cascader-panel,.icen-tree-select-panel,.icen-mentions-panel,.icen-ai-composer-popup,.icen-command-palette,.icen-card--glass,.icen-nav) {
+  background: var(--icen-token-surface);
+  border-color: var(--icen-token-line-strong);
   backdrop-filter: none;
   -webkit-backdrop-filter: none;
 }
-
-/* 兜底：覆盖仍使用固定 Tailwind 圆角工具类的组件/页面元素。
-   组件层已迁移到 radiusClass() 读取 --radius-*，但 feature 页面和
-   第三方类名可能仍残留 rounded-*，这里做最后一层保险。 */
-.style-retro .rounded-none { border-radius: 0; }
-.style-retro .rounded-sm,
-.style-retro .rounded,
-.style-retro .rounded-md,
-.style-retro .rounded-lg,
-.style-retro .rounded-xl,
-.style-retro .rounded-2xl,
-.style-retro .rounded-3xl {
-  border-radius: var(--radius-md);
-}
-/* Note: we do NOT override .rounded-full globally. Components that should be
-   theme-aware use radiusClass('full') which reads --radius-full; elements that
-   are inherently circular (e.g. loading spinners) keep Tailwind's rounded-full. */
-
-/* 兜底：现代柔和阴影在 retro 下转为硬像素投影 */
-.style-retro .shadow-sm,
-.style-retro .shadow-md,
-.style-retro .shadow-lg,
-.style-retro .shadow-xl,
-.style-retro .shadow-2xl {
-  box-shadow: var(--token-shadow-card);
-}
-
-/* 非文本元素的硬像素焦点环 */
-.style-retro :focus-visible:not(input):not(textarea):not(select):not([contenteditable="true"]) {
-  outline: 2px solid var(--token-accent);
-  outline-offset: -2px;
+:root[data-icen-style="soviet"] :is(h1,h2,h3,h4,h5,h6,.icen-card-title,.icen-modal-title) {
+  font-family: var(--icen-font-heading);
+  font-weight: 750;
+  letter-spacing: var(--icen-letter-spacing-heading);
+  line-height: var(--icen-line-height-heading);
+}
+/* Only display text is condensed; labels, forms and paragraphs stay comfortable. */
+:root[data-icen-style="soviet"] :is(h1,h2) { font-stretch: condensed; }
+:root[data-icen-style="soviet"] :is(.icen-btn,.icen-page-tab,.icen-panel-title,.icen-table th) {
+  font-family: var(--icen-font-body);
+  font-weight: 650;
+  letter-spacing: .035em;
+}
+:root[data-icen-style="soviet"] :is(.icen-btn,.icen-input-wrap,.icen-textarea-wrap,.icen-select-trigger,.icen-segmented) { border-width: 2px; }
+:root[data-icen-style="soviet"] :is(.icen-btn-ghost,.icen-btn-link) { border-color: transparent; }
+:root[data-icen-style="soviet"] :is(.icen-card,.icen-panel,[data-icen-material="content"]) {
+  border-color: var(--icen-token-line);
+  border-block-start: 3px solid var(--icen-token-line-strong);
   box-shadow: none;
-  border-radius: var(--radius-md);
 }
-
-/* ══════════════════════════════════════════════════════════════
-   TERMINAL — 命令行 / CRT 终端（预留，可组合任意 dark preset）
-   ══════════════════════════════════════════════════════════════ */
-
-.style-terminal {
-  /* ── 字体 ── */
-  --font-body: ui-monospace, SFMono-Regular, "JetBrains Mono", "Courier New", "Noto Sans Mono CJK SC", "SimSun", monospace;
-  --font-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", "Consolas", "Noto Sans Mono CJK SC", monospace;
-  --font-mono-paper: "JetBrains Mono", "Courier New", monospace;
-
-  /* ── 圆角 ── */
-  --radius-xs: 0px;
-  --radius-sm: 0px;
-  --radius-md: 0px;
-  --radius-lg: 0px;
-  --radius-xl: 0px;
-  --radius-full: 0px;
-
-  /* ── 滚动条 ── */
-  --token-scrollbar-size: 8px;
-
-  /* ── 渲染 ── */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+:root[data-icen-style="soviet"] .icen-card--elevated { box-shadow: var(--icen-token-shadow-card); }
+:root[data-icen-style="soviet"] :is(.icen-card.is-selected,.icen-card--interactive:focus-within) { box-shadow: var(--icen-ring); }
+:root[data-icen-style="soviet"] .icen-panel-title {
+  color: var(--icen-token-text);
+  padding-block: var(--icen-density-space-md);
+  border-block-end: 2px solid var(--icen-token-line);
+}
+:root[data-icen-style="soviet"] .icen-panel.is-collapsed .icen-panel-title { border-block-end-color: transparent; }
+:root[data-icen-style="soviet"] .icen-modal { border: 2px solid var(--icen-token-line-strong); }
+:root[data-icen-style="soviet"] :is(.icen-switch,.icen-switch-thumb) { border-radius: var(--icen-radius-sm); }
+:root[data-icen-style="soviet"] :is(.icen-segmented-item.is-active,.icen-segmented-item[aria-checked="true"],.icen-toggle-group-btn.is-active) {
+  background: var(--icen-token-surface);
+  box-shadow: inset 0 -3px 0 var(--icen-token-accent), inset 0 0 0 1px var(--icen-token-line);
+}
+:root[data-icen-style="soviet"] .icen-tabs:not(.icen-tabs--cards):not(.icen-tabs--segment):not(.icen-tabs--vertical) .icen-page-tab { border-block-end-width: 3px; }
+:root[data-icen-style="soviet"] :is(.icen-btn,.icen-menu-item,.icen-select-option,.icen-segmented-item):focus-visible {
+  outline: 2px solid var(--icen-token-accent);
+  outline-offset: 3px;
+}
+@media (prefers-reduced-motion: reduce) {
+  :root[data-icen-style="soviet"] { --icen-press: none; --icen-press-soft: none; }
+}
+@media (forced-colors: active) {
+  :root[data-icen-style="soviet"] :is([data-icen-material],.icen-card,.icen-panel,.icen-menu,.icen-popover,.icen-select-panel,.icen-date-picker-panel,.icen-autocomplete-panel,.icen-cascader-panel,.icen-tree-select-panel,.icen-mentions-panel,.icen-ai-composer-popup,.icen-command-palette,.icen-modal,.icen-nav) {
+    background: Canvas;
+    color: CanvasText;
+    border-color: CanvasText;
+    box-shadow: none;
+  }
+  :root[data-icen-style="soviet"] :is(.icen-segmented-item[aria-checked="true"],.icen-segmented-item.is-active,.icen-toggle-group-btn.is-active) { outline: 2px solid Highlight; outline-offset: -2px; }
+  :root[data-icen-style="soviet"] :focus-visible { outline: 2px solid Highlight; outline-offset: 3px; }
+  :root[data-icen-style="soviet"] :is(.icen-card.is-selected,.icen-card--interactive:focus-within) { box-shadow: none; outline: 2px solid Highlight; outline-offset: 2px; }
+}
+
+/* Interface symbols and quiet actions. SVG is usable without this CSS; this file
+ * adds optical alignment, fixed action hit areas and progressive disclosure.
+ * data-icen-reveal on a labelled secondary action: parent hover/focus reveals it;
+ * keyboard and coarse pointers always retain access. No layout shift on reveal. */
+.icen-symbol { display: inline-block; flex: none; vertical-align: middle; overflow: visible; }
+.icen-icon-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  inline-size: var(--icen-density-input-height-sm);
+  block-size: var(--icen-density-input-height-sm);
+  padding: 0;
+  border: 0;
+  border-radius: var(--icen-radius-sm);
+  background: transparent;
+  color: var(--icen-token-text-muted);
+  cursor: pointer;
+  transition: opacity var(--icen-tx-fast), background-color var(--icen-tx-fast), color var(--icen-tx-fast), transform var(--icen-tx-fast);
+}
+.icen-icon-action:hover { background: var(--icen-token-fill-1); color: var(--icen-token-text); }
+.icen-icon-action:active { transform: scale(.94); }
+.icen-icon-action:focus-visible { outline: 2px solid var(--icen-token-accent); outline-offset: 2px; }
+.icen-icon-action:disabled { opacity: var(--icen-disabled-opacity); pointer-events: none; }
+@media (hover: hover) and (pointer: fine) {
+  .icen-icon-action[data-icen-reveal] { opacity: 0; }
+  :hover > .icen-icon-action[data-icen-reveal],
+  :focus-within > .icen-icon-action[data-icen-reveal],
+  .icen-icon-action[data-icen-reveal]:focus-visible { opacity: 1; }
+}
+@media (pointer: coarse) {
+  .icen-icon-action { min-inline-size: 44px; min-block-size: 44px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .icen-icon-action { transition: none; }
+  .icen-icon-action:active { transform: none; }
+}
+
+:root[data-icen-style="pixel"] .icen-symbol { stroke-linecap: square; stroke-linejoin: miter; shape-rendering: crispEdges; }
+
+/* Search action: enhanceSearchField(input) adds these classes to a dedicated
+   wrapper and input, plus one labelled button with a decorative SVG.
+   Zero specificity positioning preserves component sticky search headers. */
+:where(.icen-search-field) { position: relative; }
+.icen-search-input::-webkit-search-cancel-button,
+.icen-search-input::-webkit-search-decoration {
+  -webkit-appearance: none;
+  appearance: none;
 }
-
-.style-terminal body {
-  font-family: var(--font-body);
-  line-height: 1.4;
+.icen-search-clear {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 24px;
+  block-size: 24px;
+  flex-shrink: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--icen-radius-sm);
+  color: var(--icen-token-text-muted);
+  background: transparent;
+  cursor: pointer;
+  transition: color var(--icen-tx-fast), background var(--icen-tx-fast);
 }
+.icen-search-clear > svg { inline-size: 16px; block-size: 16px; pointer-events: none; }
+.icen-search-clear:hover {
+  color: var(--icen-token-text);
+  background: var(--icen-token-surface-hover);
+}
+.icen-search-clear:focus-visible {
+  outline: 2px solid var(--icen-token-accent);
+  outline-offset: -2px;
+}
+@media (prefers-reduced-motion: reduce) {
+  .icen-search-clear { transition: none; }
+}
+
+/* Feedback actions keep their label's footprint while work is pending. */
+.icen-toast-action, .icen-notification-action { position: relative; }
+.icen-feedback-action-label { display: inline-block; }
+[aria-busy="true"] > .icen-feedback-action-label { opacity: 0; }
+.icen-feedback-action-spinner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
+.icen-feedback-action-spinner > svg { inline-size: 16px; block-size: 16px; animation: icen-spin calc(var(--icen-duration-normal) * 4) linear infinite; }
+.icen-toast-action[aria-disabled="true"], .icen-notification-action[aria-disabled="true"] { cursor: progress; }
+.icen-toast-action[aria-disabled="true"]:not([aria-busy="true"]), .icen-notification-action[aria-disabled="true"]:not([aria-busy="true"]) { opacity: var(--icen-disabled-opacity); }
+.icen-feedback-error { display: block; margin-block-start: var(--icen-density-space-xs); color: var(--icen-token-error); font-size: var(--icen-density-font-size-sm); line-height: 1.5; }
+:root[data-icen-style="pixel"] .icen-feedback-action-spinner > svg { animation-timing-function: steps(8,end); }
+@media (prefers-reduced-motion: reduce) { .icen-feedback-action-spinner > svg { animation: none; } }
+.icen-suggestion-status { display: flex; align-items: center; gap: var(--icen-density-space-xs); padding: var(--icen-density-space-sm); color: var(--icen-token-text-muted); font-size: var(--icen-density-font-size-sm); line-height: var(--icen-line-height-body); }
+.icen-suggestion-symbol { display: inline-flex; align-items: center; justify-content: center; inline-size: 20px; block-size: 20px; flex: 0 0 20px; }
+.icen-suggestion-symbol > svg { inline-size: 16px; block-size: 16px; }
+.icen-suggestion-copy { flex: 1; min-inline-size: 0; overflow-wrap: anywhere; }
+.icen-suggestion-status.is-loading .icen-suggestion-symbol > svg { animation: icen-spin calc(var(--icen-duration-normal) * 4) linear infinite; }
+.icen-suggestion-retry { flex: 0 0 auto; padding-inline: var(--icen-density-space-sm); min-block-size: var(--icen-density-input-height-sm); border: 1px solid var(--icen-token-outline-soft); border-radius: var(--icen-radius-sm); background: var(--icen-token-fill-1); color: var(--icen-token-text); font: inherit; cursor: pointer; }
+.icen-suggestion-retry:focus-visible { outline: 2px solid var(--icen-token-accent); outline-offset: 1px; }
+@media (hover: hover) and (pointer: fine) { .icen-suggestion-retry:hover { background: var(--icen-token-fill-2); } }
+@media (pointer: coarse) { .icen-suggestion-retry { min-inline-size: 44px; min-block-size: 44px; } }
+:root[data-icen-style="pixel"] .icen-suggestion-status.is-loading .icen-suggestion-symbol > svg { animation-timing-function: steps(8,end); }
+@media (prefers-reduced-motion: reduce) { .icen-suggestion-status.is-loading .icen-suggestion-symbol > svg { animation: none; } }
 
-
-/* ── tokens/typography.css ── */
 /*
- * @icen.ai/ui — Typography Tokens（icen canonical）
- * 美学基调：等宽数字精密感 × 衬线书卷气（宋体标题）
- * 默认（:root）即 icen 品牌形态；.style-modern 显式回退 system-ui 栈（见 style-profiles.css）
- * 工具类：.font-math（数字密集区，"Numeric Math" 数学字体 + tabular-nums）
+ * @icen.ai/ui — Component: input（wrapper 式输入框 / 多行 / 搜索）
+ * 规格源自 opengal primitives/input.tsx；与 behaviors/input.ts 配套。
+ *
+ * 完整契约：
+ *   <div class="icen-input-wrap icen-control [--sm|--lg] [--search] [.is-error] [.is-disabled]">
+ *     <span class="icen-input-leading">…</span>            可选前缀（svg/icon/text）
+ *     <input class="icen-input" />
+ *     <button class="icen-input-clear" aria-label="清除">…</button>     behavior 清空并聚焦
+ *     <button class="icen-input-pw-toggle" aria-label="切换可见性">…</button>
+ *     <span class="icen-input-trailing">…</span>           可选后缀（单位/字符计数等）
+ *   </div>
+ *
+ *   多行：<div class="icen-textarea-wrap icen-control" [.is-error|.is-disabled]><icen-textarea class="icen-textarea" data-icen-autosize></icen-textarea></div>
+ *
+ * --search 修饰：仅语义标记（让 behavior 知道这是搜索框，绑定 clear + Esc），
+ *              不额外改样式；视觉上仍用 .icen-input-leading 放大镜。
  */
 
-/* ── 数学/等宽数字字体（数字密集区的精密感） ── */
-@font-face {
-  font-family: "Numeric Math";
-  src:
-    local("Cambria Math"),
-    local("STIX Two Math"),
-    local("Latin Modern Math"),
-    local("Asana Math");
-  unicode-range: U+0025-003A, U+00A5, U+2212, U+223C;
+/* ── 单行 ── */
+/* One surface recipe for composed and standalone fields. KB domain hooks share
+   the same recipe; domain CSS owns width/layout, never typography or material. */
+.icen-input-wrap,
+.icen-input-control,
+.icen-kb-input,
+.icen-kb-retrieval-query,
+.icen-kb-hittest-input,
+.icen-kb-filter-field,
+.icen-kb-filter-value {
+  box-sizing: border-box;
+  min-inline-size: 0;
+  block-size: var(--input-height, var(--icen-density-input-height-md));
+  padding: 0 var(--input-padding-inline, var(--icen-density-space-sm));
+  font-family: var(--icen-font-body);
+  font-size: var(--input-font-size, var(--icen-density-font-size-md));
+  line-height: 1.5;
+  color: var(--icen-token-text);
+  background: var(--icen-token-control);
+  border: 1px solid var(--icen-token-outline-soft);
+  border-radius: var(--icen-radius-md);
+  box-shadow: var(--icen-token-shadow-inset);
+  transition: border-color var(--icen-tx-fast), box-shadow var(--icen-tx-fast);
+}
+.icen-input-wrap {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--icen-density-space-xs);
+  inline-size: 100%;
 }
-
-:root {
-  /* ── icen 品牌字体栈 ──
-     body/mono：IBM Plex Mono（未安装时回退系统等宽，行为与 accounts 一致，不打包 webfont）
-     heading：CJK 宋体系（页面标题/品牌名的书卷气） */
-  --font-body: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Consolas, 'Courier New', monospace;
-  --font-mono: var(--font-body);
-  --font-heading: 'Songti SC', 'STSong', 'Noto Serif SC', 'Source Han Serif SC', SimSun, serif;
-  --font-cjk: var(--font-heading);
-  --line-height-body: 1.7;
-  /* 独家定义（style-profiles.css 的 :root 不再重复；profile 差异化在各 .style-* 块覆盖） */
-  --line-height-heading: 1.2;
+:is(.icen-input-wrap,.icen-input-control,.icen-kb-input,.icen-kb-retrieval-query,.icen-kb-hittest-input,.icen-kb-filter-field,.icen-kb-filter-value):hover {
+  border-color: var(--icen-hover-border);
 }
-
-/* ── 全局排版 ── */
-body {
-  font-family: "Numeric Math", var(--font-body);
-  line-height: var(--line-height-body);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-feature-settings: "rlig" 1, "calt" 1;
-  font-variant-numeric: lining-nums tabular-nums;
+:is(.icen-input-wrap,.icen-input-control,.icen-kb-input,.icen-kb-retrieval-query,.icen-kb-hittest-input,.icen-kb-filter-field,.icen-kb-filter-value):focus-within {
+  outline: none;
+  box-shadow: var(--icen-control-focus-shadow);
+  border-color: var(--icen-control-focus-border);
+}
+.icen-input-wrap.is-error,
+.icen-input-wrap.is-error:focus-within {
+  border-color: var(--icen-token-error);
+}
+.icen-input-wrap.is-error:focus-within {
+  box-shadow: var(--icen-control-error-shadow);
+}
+.icen-input-wrap.is-disabled,
+.icen-input-wrap[aria-disabled='true'],
+.icen-input-wrap[data-icen-disabled] {
+  opacity: var(--icen-disabled-opacity);
+  background: var(--icen-token-bg-soft);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.icen-input-wrap.is-disabled .icen-input { cursor: not-allowed; }
+
+/* 尺寸变体 */
+.icen-input-wrap--sm, .icen-input-control--sm,
+.icen-kb-input, .icen-kb-retrieval-query, .icen-kb-hittest-input, .icen-kb-filter-field, .icen-kb-filter-value {
+  --input-height: var(--icen-density-input-height-sm);
+  --input-padding-inline: max(8px, calc(var(--icen-density-space-sm) * 1.25));
+  --input-font-size: var(--icen-density-font-size-sm);
+}
+.icen-input-wrap--lg, .icen-input-control--lg {
+  --input-height: var(--icen-density-input-height-lg);
+  --input-padding-inline: var(--icen-density-space-md);
+  --input-font-size: var(--icen-density-font-size-lg);
+}
+
+.icen-input {
+  box-sizing: border-box;
+  flex: 1;
+  min-width: 0;
+  padding: 0;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--icen-token-text);
+  font: inherit;
+}
+.icen-input::placeholder {
+  color: color-mix(in srgb, var(--icen-token-text-faint) 60%, transparent);
+}
+.icen-input:read-only {
+  color: var(--icen-token-text-muted);
+  cursor: default;
+}
+.icen-input::-webkit-search-cancel-button { -webkit-appearance: none; }
+
+/* Composed searches use this same wrapper, font, inset and focus recipe. The
+   parent search header owns only sticky placement and separation from results. */
+.icen-search-field > .icen-input-wrap { inline-size: 100%; }
+.icen-input-wrap > .icen-search-input {
+  flex: 1;
+  inline-size: 100%;
+  min-inline-size: 0;
+  block-size: auto;
+  min-block-size: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  outline: none;
+  box-shadow: none;
+  background: transparent;
+  color: var(--icen-token-text);
+  font: inherit;
+}
+.icen-input-wrap > .icen-search-input:focus { border: 0; outline: none; box-shadow: none; }
+.icen-input-wrap > .icen-search-input::placeholder { color: var(--icen-token-text-muted); }
+@media (pointer: coarse) {
+  .icen-input-wrap, .icen-input-control, .icen-kb-input, .icen-kb-retrieval-query, .icen-kb-hittest-input, .icen-kb-filter-field, .icen-kb-filter-value { font-size: max(16px, var(--input-font-size, var(--icen-density-font-size-md))); }
+  .icen-input-wrap--sm { font-size: max(16px, var(--icen-density-font-size-sm)); }
+  .icen-input-wrap--lg { font-size: max(16px, var(--icen-density-font-size-lg)); }
+  .icen-input-clear, .icen-input-pw-toggle { min-inline-size: 44px; min-block-size: 44px; }
+  .icen-input-wrap:has(.icen-input-clear:not([hidden]), .icen-input-pw-toggle) { min-block-size: 46px; }
+}
+
+.icen-input-leading,
+.icen-input-trailing {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--icen-token-text-faint);
+}
+.icen-input-leading svg, .icen-input-trailing svg { width: 14px; height: 14px; }
+
+/* ── 前缀/后缀文字（单位、域名等）── */
+.icen-input-affix {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  padding: 0 var(--icen-density-space-xs);
+  color: var(--icen-token-text-muted);
+  font-size: 0.92em;
+  background: var(--icen-token-fill-1);
+  border-radius: var(--icen-radius-xs);
+}
+
+.icen-input-clear,
+.icen-input-pw-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 22px; height: 22px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: var(--icen-radius-full);
+  color: var(--icen-token-text-faint);
+  transition:
+    color var(--icen-tx-fast),
+    background-color var(--icen-tx-fast);
+}
+.icen-input-clear:hover,
+.icen-input-pw-toggle:hover {
+  color: var(--icen-token-text);
+  background: var(--icen-token-surface-hover);
+}
+.icen-input-clear:focus-visible,
+.icen-input-pw-toggle:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
 }
+.icen-input-clear svg, .icen-input-pw-toggle svg { width: 12px; height: 12px; }
 
-h1, h2, h3, h4, h5, h6 {
-  font-family: var(--font-heading);
-  line-height: var(--line-height-heading);
+/* ── 多行：同一 wrapper 视觉，内部 textarea 裸奔 ── */
+.icen-textarea-wrap {
+  position: relative;
+  display: flex;
+  width: 100%;
+  background: var(--icen-token-control);
+  border: 1px solid var(--icen-token-outline-soft);
+  border-radius: var(--icen-radius-md);
+  box-shadow: var(--icen-token-shadow-inset);
+  transition: border-color var(--icen-tx-fast),
+    box-shadow var(--icen-tx-fast);
+}
+.icen-textarea-wrap:hover {
+  border-color: var(--icen-hover-border);
 }
+.icen-textarea-wrap:focus-within {
+  box-shadow: var(--icen-control-focus-shadow);
+  border-color: var(--icen-control-focus-border);
+}
+.icen-textarea-wrap.is-error,
+.icen-textarea-wrap.is-error:focus-within {
+  border-color: var(--icen-token-error);
+  box-shadow: var(--icen-control-error-shadow);
+}
+.icen-textarea-wrap.is-disabled,
+.icen-textarea-wrap[aria-disabled='true'],
+.icen-textarea-wrap[data-icen-disabled] {
+  opacity: var(--icen-disabled-opacity);
+  background: var(--icen-token-bg-soft);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.icen-textarea-wrap.is-disabled .icen-textarea { cursor: not-allowed; }
+
+.icen-textarea {
+  width: 100%;
+  padding: var(--icen-density-space-sm) var(--icen-density-space-md);
+  background: transparent;
+  border: none;
+  outline: none;
+  resize: vertical;
+  color: var(--icen-token-text);
+  font: inherit;
+  font-size: var(--icen-density-font-size-md);
+  line-height: 1.5;
+  min-height: calc(3 * 1.5em + 24px);
+}
+.icen-textarea::placeholder {
+  color: color-mix(in srgb, var(--icen-token-text-faint) 60%, transparent);
+}
+
+/* 字符计数（behavior 可挂到 .icen-input-wrap 或 .icen-textarea-wrap 内行内末端） */
+.icen-input-wrap--has-counter { padding-inline-end: calc(var(--icen-density-space-sm) + 48px); }
+.icen-input-wrap--has-counter .icen-input-counter {
+  position: absolute;
+  inset-inline-end: var(--icen-density-space-sm);
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: var(--icen-density-font-size-xs);
+  color: var(--icen-token-text-faint);
+  font-variant-numeric: tabular-nums;
+  pointer-events: none;
+}
+.icen-input-counter {
+  position: absolute;
+  inset-inline-end: var(--icen-density-space-sm);
+  bottom: var(--icen-density-space-xs);
+  font-size: var(--icen-density-font-size-xs);
+  color: var(--icen-token-text-faint);
+  font-variant-numeric: tabular-nums;
+  pointer-events: none;
+  transition: color var(--icen-tx-fast);
+}
+.icen-input-counter.is-warn { color: var(--icen-token-warning); }
+.icen-input-counter.is-error { color: var(--icen-token-error); font-weight: 600; }
+
+.icen-textarea-wrap .icen-textarea { padding-bottom: 24px; }
+
+/* 有计数器时的 textarea 底部留空 */
+.icen-textarea-wrap .icen-input-counter {
+  position: absolute;
+  inset-inline-end: var(--icen-density-space-sm);
+  bottom: var(--icen-density-space-xs);
+}
+
+/* Standalone fields expose the same disabled/read-only/error feedback. */
+:is(.icen-input-control,.icen-kb-input,.icen-kb-retrieval-query,.icen-kb-hittest-input,.icen-kb-filter-field,.icen-kb-filter-value):disabled {
+  opacity: var(--icen-disabled-opacity);cursor: not-allowed;background: var(--icen-token-bg-soft);
+}
+:is(.icen-input-control,.icen-kb-input,.icen-kb-retrieval-query,.icen-kb-hittest-input,.icen-kb-filter-field,.icen-kb-filter-value):read-only { color: var(--icen-token-text-muted); }
+.icen-input-control[aria-invalid='true'] { border-color: var(--icen-token-error); }
 
-/* ── 数字密集区工具类 ── */
-.font-math {
-  font-family: "Numeric Math", math, var(--font-body);
-  font-variant-numeric: lining-nums tabular-nums;
 }
-