fix: support website color schemes

website/app/globals.css

@@ -1,6 +1,7 @@
 @import "tailwindcss";
 
 :root {
+  color-scheme: light;
   --ink: #f7fbf2;
   --ink-soft: #eef6e6;
   --panel: rgba(255, 255, 255, 0.82);
@@ -14,11 +15,146 @@
   --acid-2: #79d94d;
   --ice: #f7ffef;
   --blue: #18b9c7;
+  --cyan: #087f91;
+  --hot: #946600;
+  --claude: #8c6f52;
+  --flow-end: #ffffff;
   --amber: #a97805;
   --shadow: rgba(18, 48, 38, 0.12);
+  --shell-gradient:
+    radial-gradient(circle at 8% 18%, rgba(183, 237, 42, 0.26), transparent 28%),
+    radial-gradient(circle at 88% 8%, rgba(24, 185, 199, 0.15), transparent 30%),
+    linear-gradient(145deg, #fbfff6 0%, #f3faec 46%, #e9f6ea 100%);
+  --grid-line-y: rgba(32, 82, 66, 0.05);
+  --grid-line-x: rgba(32, 82, 66, 0.045);
+  --noise-dot: rgba(10, 36, 28, 0.11);
+  --noise-blend: multiply;
+  --boot-bg:
+    radial-gradient(circle at 28% 34%, rgba(183, 237, 42, 0.28), transparent 30%),
+    radial-gradient(circle at 72% 60%, rgba(24, 185, 199, 0.16), transparent 32%),
+    rgba(247, 251, 242, 0.84);
+  --boot-frame-bg:
+    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(250, 255, 244, 0.9)),
+    #ffffff;
+  --boot-shadow:
+    0 34px 120px rgba(28, 78, 60, 0.24),
+    0 0 0 1px rgba(255, 255, 255, 0.72),
+    inset 0 1px 0 rgba(255, 255, 255, 0.96);
+  --boot-rule-line: linear-gradient(90deg, rgba(11, 36, 28, 0.22), rgba(24, 185, 199, 0.16), transparent);
+  --boot-progress-bg: rgba(11, 36, 28, 0.08);
+  --surface: rgba(255, 255, 255, 0.68);
+  --surface-strong: rgba(255, 255, 255, 0.76);
+  --surface-hover: rgba(255, 255, 255, 0.88);
+  --surface-highlight: rgba(255, 255, 255, 0.82);
+  --surface-border-soft: rgba(255, 255, 255, 0.09);
+  --surface-muted: rgba(12, 34, 28, 0.06);
+  --panel-gradient:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(250, 255, 245, 0.72)),
+    rgba(255, 255, 255, 0.76);
+  --card-gradient:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(250, 255, 245, 0.72)),
+    rgba(255, 255, 255, 0.76);
+  --console-bg:
+    radial-gradient(circle at 18% 18%, rgba(183, 237, 42, 0.26), transparent 30%),
+    radial-gradient(circle at 86% 82%, rgba(24, 185, 199, 0.15), transparent 34%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(247, 253, 241, 0.72)),
+    rgba(255, 255, 255, 0.82);
+  --console-grid-y: rgba(28, 78, 60, 0.06);
+  --console-grid-x: rgba(28, 78, 60, 0.05);
+  --console-bar-bg:
+    linear-gradient(90deg, rgba(183, 237, 42, 0.18), rgba(255, 255, 255, 0.72) 42%, rgba(24, 185, 199, 0.08)),
+    rgba(255, 255, 255, 0.72);
+  --route-shine: linear-gradient(110deg, rgba(255, 255, 255, 0.5), transparent 28%, transparent 76%, rgba(183, 237, 42, 0.1));
+  --route-featured-bg:
+    linear-gradient(90deg, rgba(183, 237, 42, 0.22), rgba(255, 255, 255, 0.74) 42%, rgba(24, 185, 199, 0.1)),
+    rgba(255, 255, 255, 0.76);
+  --pill-featured-bg: rgba(183, 237, 42, 0.16);
+  --pill-featured-text: rgba(9, 23, 19, 0.82);
+  --node-fill: rgba(255, 255, 255, 0.42);
+  --wide-node-bg:
+    radial-gradient(circle at 80% 0%, rgba(183, 237, 42, 0.22), transparent 36%),
+    rgba(255, 255, 255, 0.78);
   --radius: 24px;
 }
 
+@media (prefers-color-scheme: dark) {
+  :root {
+    color-scheme: dark;
+    --ink: #06110e;
+    --ink-soft: #0a1813;
+    --panel: rgba(10, 26, 21, 0.82);
+    --panel-strong: rgba(14, 34, 28, 0.94);
+    --line: rgba(219, 255, 172, 0.14);
+    --line-strong: rgba(183, 237, 42, 0.36);
+    --text: #f5fff0;
+    --muted: rgba(232, 246, 224, 0.72);
+    --faint: rgba(232, 246, 224, 0.52);
+    --acid: #c8ff45;
+    --acid-2: #82e35d;
+    --ice: #eaf7ff;
+    --blue: #74ecf7;
+    --cyan: #72ffd1;
+    --hot: #ffe08a;
+    --claude: #d7ba9a;
+    --flow-end: #ecfff7;
+    --amber: #ffd268;
+    --shadow: rgba(0, 0, 0, 0.34);
+    --shell-gradient:
+      radial-gradient(circle at 8% 18%, rgba(183, 237, 42, 0.18), transparent 28%),
+      radial-gradient(circle at 88% 8%, rgba(24, 185, 199, 0.16), transparent 30%),
+      linear-gradient(145deg, #06110e 0%, #0a1813 46%, #0e2018 100%);
+    --grid-line-y: rgba(205, 255, 154, 0.06);
+    --grid-line-x: rgba(205, 255, 154, 0.045);
+    --noise-dot: rgba(224, 255, 204, 0.08);
+    --noise-blend: screen;
+    --boot-bg:
+      radial-gradient(circle at 28% 34%, rgba(183, 237, 42, 0.18), transparent 30%),
+      radial-gradient(circle at 72% 60%, rgba(24, 185, 199, 0.16), transparent 32%),
+      rgba(4, 12, 10, 0.86);
+    --boot-frame-bg:
+      linear-gradient(135deg, rgba(14, 34, 28, 0.98), rgba(8, 22, 18, 0.92)),
+      #06110e;
+    --boot-shadow:
+      0 34px 120px rgba(0, 0, 0, 0.48),
+      0 0 0 1px rgba(215, 255, 77, 0.1),
+      inset 0 1px 0 rgba(255, 255, 255, 0.08);
+    --boot-rule-line: linear-gradient(90deg, rgba(215, 255, 77, 0.28), rgba(116, 236, 247, 0.2), transparent);
+    --boot-progress-bg: rgba(232, 246, 224, 0.1);
+    --surface: rgba(13, 31, 25, 0.72);
+    --surface-strong: rgba(14, 34, 28, 0.82);
+    --surface-hover: rgba(20, 48, 39, 0.9);
+    --surface-highlight: rgba(255, 255, 255, 0.08);
+    --surface-border-soft: rgba(255, 255, 255, 0.1);
+    --surface-muted: rgba(232, 246, 224, 0.08);
+    --panel-gradient:
+      linear-gradient(180deg, rgba(17, 40, 33, 0.94), rgba(9, 24, 19, 0.72)),
+      rgba(11, 28, 23, 0.78);
+    --card-gradient:
+      linear-gradient(180deg, rgba(17, 40, 33, 0.92), rgba(9, 24, 19, 0.74)),
+      rgba(11, 28, 23, 0.78);
+    --console-bg:
+      radial-gradient(circle at 18% 18%, rgba(183, 237, 42, 0.18), transparent 30%),
+      radial-gradient(circle at 86% 82%, rgba(24, 185, 199, 0.16), transparent 34%),
+      linear-gradient(180deg, rgba(14, 34, 28, 0.94), rgba(7, 19, 16, 0.76)),
+      rgba(6, 17, 14, 0.86);
+    --console-grid-y: rgba(215, 255, 77, 0.06);
+    --console-grid-x: rgba(116, 236, 247, 0.045);
+    --console-bar-bg:
+      linear-gradient(90deg, rgba(183, 237, 42, 0.16), rgba(12, 31, 26, 0.72) 42%, rgba(24, 185, 199, 0.1)),
+      rgba(13, 31, 25, 0.82);
+    --route-shine: linear-gradient(110deg, rgba(255, 255, 255, 0.08), transparent 28%, transparent 76%, rgba(183, 237, 42, 0.12));
+    --route-featured-bg:
+      linear-gradient(90deg, rgba(183, 237, 42, 0.18), rgba(15, 36, 30, 0.76) 42%, rgba(24, 185, 199, 0.12)),
+      rgba(14, 34, 28, 0.8);
+    --pill-featured-bg: rgba(183, 237, 42, 0.12);
+    --pill-featured-text: rgba(245, 255, 240, 0.88);
+    --node-fill: rgba(232, 246, 224, 0.08);
+    --wide-node-bg:
+      radial-gradient(circle at 80% 0%, rgba(183, 237, 42, 0.18), transparent 36%),
+      rgba(13, 31, 25, 0.78);
+  }
+}
+
 * {
   box-sizing: border-box;
 }
@@ -56,10 +192,7 @@ a {
   position: relative;
   min-height: 100dvh;
   overflow: hidden;
-  background:
+  background: var(--shell-gradient);
-    radial-gradient(circle at 8% 18%, rgba(183, 237, 42, 0.26), transparent 28%),
-    radial-gradient(circle at 88% 8%, rgba(24, 185, 199, 0.15), transparent 30%),
-    linear-gradient(145deg, #fbfff6 0%, #f3faec 46%, #e9f6ea 100%);
 }
 
 .motion-root {
@@ -81,8 +214,8 @@ a {
   pointer-events: none;
   content: "";
   background:
-    linear-gradient(rgba(32, 82, 66, 0.05) 1px, transparent 1px),
+    linear-gradient(var(--grid-line-y) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(32, 82, 66, 0.045) 1px, transparent 1px);
+    linear-gradient(90deg, var(--grid-line-x) 1px, transparent 1px);
   background-size: 82px 82px;
   mask-image: linear-gradient(to bottom, black, transparent 78%);
 }
@@ -94,8 +227,8 @@ a {
   pointer-events: none;
   opacity: 0.14;
   background-image:
-    repeating-radial-gradient(circle at 30% 30%, rgba(10, 36, 28, 0.11) 0 1px, transparent 1px 4px);
+    repeating-radial-gradient(circle at 30% 30%, var(--noise-dot) 0 1px, transparent 1px 4px);
-  mix-blend-mode: multiply;
+  mix-blend-mode: var(--noise-blend);
 }
 
 .boot-screen {
@@ -106,10 +239,7 @@ a {
   place-items: center;
   padding: 28px;
   pointer-events: none;
-  background:
+  background: var(--boot-bg);
-    radial-gradient(circle at 28% 34%, rgba(183, 237, 42, 0.28), transparent 30%),
-    radial-gradient(circle at 72% 60%, rgba(24, 185, 199, 0.16), transparent 32%),
-    rgba(247, 251, 242, 0.84);
   backdrop-filter: blur(14px);
   animation: boot-screen-fallback 3.2s 0.25s ease forwards;
 }
@@ -123,14 +253,9 @@ a {
   gap: 22px;
   border: 1px solid rgba(11, 36, 28, 0.34);
   border-radius: 6px;
-  background:
+  background: var(--boot-frame-bg);
-    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(250, 255, 244, 0.9)),
-    #ffffff;
   padding: clamp(24px, 4vw, 34px);
-  box-shadow:
+  box-shadow: var(--boot-shadow);
-    0 34px 120px rgba(28, 78, 60, 0.24),
-    0 0 0 1px rgba(255, 255, 255, 0.72),
-    inset 0 1px 0 rgba(255, 255, 255, 0.96);
 }
 
 .boot-frame::before,
@@ -176,7 +301,7 @@ a {
 .boot-rule {
   width: 100%;
   height: 1px;
-  background: linear-gradient(90deg, rgba(11, 36, 28, 0.22), rgba(24, 185, 199, 0.16), transparent);
+  background: var(--boot-rule-line);
   transform-origin: left center;
   animation: boot-rule-fallback 0.72s ease both;
 }
@@ -191,7 +316,7 @@ a {
   display: flex;
   align-items: center;
   gap: 10px;
-  color: rgba(22, 47, 39, 0.78);
+  color: var(--muted);
   font-family: var(--font-geist-mono), monospace;
   font-size: 12px;
 }
@@ -212,7 +337,7 @@ a {
   bottom: clamp(22px, 3vw, 28px);
   height: 2px;
   overflow: hidden;
-  background: rgba(11, 36, 28, 0.08);
+  background: var(--boot-progress-bg);
 }
 
 .boot-progress span {
@@ -264,6 +389,8 @@ a {
 }
 
 .brand-mark img {
+  width: 38px;
+  height: auto;
   border-radius: 12px;
   box-shadow: 0 12px 34px rgba(91, 166, 36, 0.16);
 }
@@ -344,7 +471,7 @@ a {
 .ghost-link,
 .secondary-cta {
   border-color: var(--line);
-  background: rgba(255, 255, 255, 0.62);
+  background: var(--surface);
   color: var(--muted);
 }
 
@@ -403,7 +530,7 @@ a {
   gap: 9px;
   border: 1px solid var(--line);
   border-radius: 999px;
-  background: rgba(255, 255, 255, 0.68);
+  background: var(--surface);
   color: var(--muted);
   padding: 8px 12px;
   font-size: 12px;
@@ -463,7 +590,7 @@ a {
   gap: 7px;
   border: 1px solid var(--line);
   border-radius: 18px;
-  background: rgba(255, 255, 255, 0.7);
+  background: var(--surface);
   padding: 14px;
 }
 
@@ -500,17 +627,13 @@ a {
   min-height: 520px;
   border: 1px solid var(--line);
   border-radius: 32px;
-  background:
+  background: var(--console-bg);
-    radial-gradient(circle at 18% 18%, rgba(183, 237, 42, 0.26), transparent 30%),
-    radial-gradient(circle at 86% 82%, rgba(24, 185, 199, 0.15), transparent 34%),
-    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(247, 253, 241, 0.72)),
-    rgba(255, 255, 255, 0.82);
   padding: 18px;
   overflow: hidden;
   transform-style: preserve-3d;
   box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.9),
+    inset 0 1px 0 var(--surface-highlight),
-    0 34px 90px rgba(18, 48, 38, 0.16);
+    0 34px 90px var(--shadow);
 }
 
 .hero-console::before,
@@ -537,8 +660,8 @@ a {
   z-index: 0;
   inset-block: 72px 18px;
   background:
-    linear-gradient(rgba(28, 78, 60, 0.06) 1px, transparent 1px),
+    linear-gradient(var(--console-grid-y) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(28, 78, 60, 0.05) 1px, transparent 1px);
+    linear-gradient(90deg, var(--console-grid-x) 1px, transparent 1px);
   background-size: 32px 32px;
   mask-image: linear-gradient(to bottom, transparent, black 12%, black 72%, transparent);
   opacity: var(--grid-opacity);
@@ -578,8 +701,8 @@ a {
 .node-card,
 .deploy-stack > div {
   border: 1px solid var(--line);
-  background: rgba(255, 255, 255, 0.68);
+  background: var(--surface);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
+  box-shadow: inset 0 1px 0 var(--surface-highlight);
 }
 
 .route-row::before,
@@ -602,9 +725,7 @@ a {
   justify-content: flex-start;
   border-radius: 18px;
   border-color: rgba(215, 255, 77, 0.22);
-  background:
+  background: var(--console-bar-bg);
-    linear-gradient(90deg, rgba(183, 237, 42, 0.18), rgba(255, 255, 255, 0.72) 42%, rgba(24, 185, 199, 0.08)),
-    rgba(255, 255, 255, 0.72);
   padding: 0 16px;
 }
 
@@ -651,7 +772,7 @@ a {
   inset: 0;
   pointer-events: none;
   content: "";
-  background: linear-gradient(110deg, rgba(255, 255, 255, 0.5), transparent 28%, transparent 76%, rgba(183, 237, 42, 0.1));
+  background: var(--route-shine);
   opacity: 0;
   transition: opacity 180ms ease;
 }
@@ -685,9 +806,9 @@ a {
 }
 
 .route-row em {
-  border: 1px solid rgba(255, 255, 255, 0.09);
+  border: 1px solid var(--surface-border-soft);
   border-radius: 999px;
-  background: rgba(12, 34, 28, 0.06);
+  background: var(--surface-muted);
   padding: 5px 8px;
   white-space: nowrap;
 }
@@ -695,12 +816,10 @@ a {
 .route-row[data-featured="true"] {
   min-height: 58px;
   border-color: rgba(215, 255, 77, 0.34);
-  background:
+  background: var(--route-featured-bg);
-    linear-gradient(90deg, rgba(183, 237, 42, 0.22), rgba(255, 255, 255, 0.74) 42%, rgba(24, 185, 199, 0.1)),
-    rgba(255, 255, 255, 0.76);
   box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.88),
+    inset 0 1px 0 var(--surface-highlight),
-    0 18px 44px rgba(18, 48, 38, 0.12);
+    0 18px 44px var(--shadow);
 }
 
 .route-row[data-featured="true"]::after {
@@ -715,16 +834,16 @@ a {
 
 .route-row[data-featured="true"] em {
   border-color: rgba(215, 255, 77, 0.22);
-  background: rgba(183, 237, 42, 0.16);
+  background: var(--pill-featured-bg);
-  color: rgba(9, 23, 19, 0.82);
+  color: var(--pill-featured-text);
 }
 
 .route-row[data-tone="hot"] span {
-  color: #ffec99;
+  color: var(--hot);
 }
 
 .route-row[data-tone="hot"]::before {
-  background: #ffec99;
+  background: var(--hot);
   box-shadow: 0 0 20px rgba(255, 236, 153, 0.5);
 }
 
@@ -747,21 +866,21 @@ a {
 }
 
 .route-row[data-tone="cyan"] span {
-  color: #71ffd2;
+  color: var(--cyan);
 }
 
 .route-row[data-tone="cyan"]::before {
-  background: #71ffd2;
+  background: var(--cyan);
   box-shadow: 0 0 20px rgba(113, 255, 210, 0.48);
 }
 
-.route-row[data-tone="white"] span {
+.route-row[data-tone="claude"] span {
-  color: var(--ice);
+  color: var(--claude);
 }
 
-.route-row[data-tone="white"]::before {
+.route-row[data-tone="claude"]::before {
-  background: var(--ice);
+  background: var(--claude);
-  box-shadow: 0 0 20px rgba(233, 247, 255, 0.42);
+  box-shadow: 0 0 20px rgba(215, 186, 154, 0.42);
 }
 
 .route-row strong,
@@ -826,7 +945,7 @@ a {
   opacity: 0.28;
   pointer-events: none;
   mask-image: linear-gradient(115deg, transparent 0%, black 22%, black 58%, transparent 88%);
-  mix-blend-mode: multiply;
+  mix-blend-mode: var(--noise-blend);
 }
 
 .flow-line {
@@ -855,7 +974,7 @@ a {
 }
 
 .node {
-  fill: rgba(255, 255, 255, 0.42);
+  fill: var(--node-fill);
   stroke: rgba(215, 255, 77, 0.13);
 }
 
@@ -927,9 +1046,7 @@ a {
   gap: 24px;
   border: 1px solid var(--line);
   border-radius: var(--radius);
-  background:
+  background: var(--card-gradient);
-    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(250, 255, 245, 0.72)),
-    rgba(255, 255, 255, 0.76);
   padding: 20px;
 }
 
@@ -992,10 +1109,10 @@ a {
 .module-strip span:hover {
   transform: translateY(-3px);
   border-color: var(--line-strong);
-  background-color: rgba(255, 255, 255, 0.88);
+  background-color: var(--surface-hover);
   box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.92),
+    inset 0 1px 0 var(--surface-highlight),
-    0 22px 54px rgba(18, 48, 38, 0.13);
+    0 22px 54px var(--shadow);
 }
 
 .api-section {
@@ -1015,10 +1132,8 @@ a {
 .control-section {
   border: 1px solid var(--line);
   border-radius: 32px;
-  background:
+  background: var(--panel-gradient);
-    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(250, 255, 245, 0.7)),
+  box-shadow: inset 0 1px 0 var(--surface-highlight);
-    rgba(255, 255, 255, 0.76);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
 }
 
 .studio-copy {
@@ -1076,7 +1191,7 @@ a {
   padding: 20px;
   background:
     linear-gradient(135deg, rgba(183, 237, 42, 0.13), transparent 34%),
-    rgba(255, 255, 255, 0.74);
+    var(--surface-strong);
 }
 
 .endpoint-line {
@@ -1126,10 +1241,8 @@ a {
 .final-section {
   border: 1px solid var(--line);
   border-radius: 32px;
-  background:
+  background: var(--panel-gradient);
-    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(250, 255, 245, 0.72)),
+  box-shadow: inset 0 1px 0 var(--surface-highlight);
-    rgba(255, 255, 255, 0.76);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
 }
 
 .factory-section,
@@ -1186,9 +1299,7 @@ a {
 .node-card.wide {
   grid-column: 1 / -1;
   min-height: 156px;
-  background:
+  background: var(--wide-node-bg);
-    radial-gradient(circle at 80% 0%, rgba(183, 237, 42, 0.22), transparent 36%),
-    rgba(255, 255, 255, 0.78);
 }
 
 .ops-section {
@@ -1202,10 +1313,8 @@ a {
 .ops-grid {
   border: 1px solid var(--line);
   border-radius: 32px;
-  background:
+  background: var(--panel-gradient);
-    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(250, 255, 245, 0.72)),
+  box-shadow: inset 0 1px 0 var(--surface-highlight);
-    rgba(255, 255, 255, 0.76);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
 }
 
 .ops-copy {
@@ -1270,7 +1379,7 @@ a {
   gap: 16px;
   border: 1px solid var(--line);
   border-radius: 22px;
-  background: rgba(255, 255, 255, 0.68);
+  background: var(--surface);
   padding: 20px;
 }
 
@@ -1297,7 +1406,7 @@ a {
 .module-strip span {
   border: 1px solid var(--line);
   border-radius: 999px;
-  background: rgba(255, 255, 255, 0.7);
+  background: var(--surface);
   color: var(--muted);
   padding: 12px 16px;
   font-size: 13px;
@@ -1404,7 +1513,7 @@ a {
 
   .brand-mark img {
     width: 34px;
-    height: 34px;
+    height: auto;
   }
 
   .ghost-link {

website/app/layout.tsx

@@ -35,8 +35,11 @@ export const metadata: Metadata = {
 export const viewport: Viewport = {
   width: "device-width",
   initialScale: 1,
-  colorScheme: "light",
+  colorScheme: "light dark",
-  themeColor: "#f7fbf2",
+  themeColor: [
+    { media: "(prefers-color-scheme: light)", color: "#f7fbf2" },
+    { media: "(prefers-color-scheme: dark)", color: "#06110e" },
+  ],
 };
 
 export default function RootLayout({

website/app/page.tsx

@@ -38,7 +38,7 @@ const heroStats = [
 const routes = [
   { type: "GPT", model: "gpt-5.5", state: "深度推理", tone: "hot", featured: true },
   { type: "Image", model: "gpt-image-2", state: "图像生成", tone: "lime", featured: true },
-  { type: "Claude", model: "claude-opus-4-8", state: "Messages", tone: "white" },
+  { type: "Claude", model: "claude-opus-4-8", state: "Messages", tone: "claude" },
   { type: "Gemini", model: "gemini-3-pro-preview", state: "多模态", tone: "cyan" },
   { type: "Video", model: "doubao-seedance-2-0-260128", state: "视频队列", tone: "blue" },
 ];
@@ -176,9 +176,9 @@ function FlowGlyph() {
     <svg className="flow-glyph" viewBox="0 0 520 360" aria-hidden="true">
       <defs>
         <linearGradient id="lineGradient" x1="0" x2="1" y1="0" y2="1">
-          <stop offset="0%" stopColor="#D7FF4D" />
+          <stop offset="0%" stopColor="var(--acid)" />
-          <stop offset="55%" stopColor="#8BF6FF" />
+          <stop offset="55%" stopColor="var(--blue)" />
-          <stop offset="100%" stopColor="#FFFFFF" />
+          <stop offset="100%" stopColor="var(--flow-end)" />
         </linearGradient>
         <filter id="softGlow" x="-30%" y="-30%" width="160%" height="160%">
           <feGaussianBlur stdDeviation="6" result="blur" />