From cd9a0a02b915ca0ebfa819f4ef504c6169c2a186 Mon Sep 17 00:00:00 2001
From: Lliar-liar <1169523200@qq.com>
Date: Sun, 24 May 2026 19:08:05 +0000
Subject: [PATCH] Restyle project page after SkillLens

---
 index.html    | 415 ++++++++++++++++++++++++++++----------------------
 skillopt.html | 415 ++++++++++++++++++++++++++++----------------------
 2 files changed, 460 insertions(+), 370 deletions(-)

diff --git a/index.html b/index.html
index fa72533..5d6d0a9 100644
--- a/index.html
+++ b/index.html
@@ -6,28 +6,29 @@
   <title>SkillOpt | Executive Strategy for Self-Evolving Agent Skills</title>
   <meta name="description" content="Project webpage for SkillOpt, a text-space optimizer that trains reusable natural-language skills for frozen language agents.">
   <style>
-    @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Literata:opsz,wght@7..72,400;7..72,600;7..72,700;7..72,800&family=Newsreader:opsz,wght@6..72,600;6..72,700;6..72,800&display=swap');
+    @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,300..900,0..100&family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
 
     :root {
-      --paper: #f7f8f3;
-      --paper-2: #ebeef0;
-      --ink: #15191f;
-      --muted: #5d6672;
-      --quiet: #7b8490;
-      --line: #cfd4d8;
-      --line-strong: #2d333b;
+      --paper: #f8f9fc;
+      --paper-2: #eef2ff;
+      --ink: #1e293b;
+      --muted: #64748b;
+      --quiet: #94a3b8;
+      --line: #e2e8f0;
+      --line-strong: #c7d2fe;
       --panel: #ffffff;
-      --panel-warm: #fff9e8;
-      --blue: #2359b6;
-      --teal: #0b7974;
-      --red: #bb352d;
-      --gold: #b17300;
-      --green: #2e7b3f;
-      --black: #0d1117;
-      --shadow: 0 18px 45px rgba(18, 24, 31, 0.12);
-      --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
-      --serif: "Literata", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
-      --display: "Newsreader", "Literata", Georgia, serif;
+      --panel-warm: #fff7ed;
+      --blue: #4f46e5;
+      --teal: #0ea5e9;
+      --red: #ec4899;
+      --gold: #f59e0b;
+      --green: #16a34a;
+      --black: #0f172a;
+      --violet: #7c3aed;
+      --shadow: 0 12px 30px rgba(79, 70, 229, 0.10);
+      --mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
+      --serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      --display: "Fraunces", Georgia, serif;
     }
 
     * {
@@ -42,12 +43,12 @@
       margin: 0;
       color: var(--ink);
       background:
-        linear-gradient(rgba(21, 25, 31, 0.045) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(21, 25, 31, 0.035) 1px, transparent 1px),
+        radial-gradient(circle at 18% 10%, rgba(124, 58, 237, 0.08), transparent 38%),
+        radial-gradient(circle at 88% 78%, rgba(245, 158, 11, 0.08), transparent 42%),
+        radial-gradient(circle at 58% 38%, rgba(236, 72, 153, 0.055), transparent 46%),
         var(--paper);
-      background-size: 42px 42px;
       font-family: var(--serif);
-      line-height: 1.55;
+      line-height: 1.7;
       letter-spacing: 0;
     }
 
@@ -73,10 +74,10 @@
       justify-content: space-between;
       gap: 18px;
       padding: 14px 28px;
-      color: #f8faf7;
-      background: rgba(13, 17, 23, 0.78);
-      border-bottom: 1px solid rgba(255, 255, 255, 0.12);
-      backdrop-filter: blur(12px);
+      color: var(--ink);
+      background: rgba(255, 255, 255, 0.74);
+      border-bottom: 1px solid rgba(226, 232, 240, 0.86);
+      backdrop-filter: blur(14px);
       font-family: var(--mono);
       font-size: 0.78rem;
     }
@@ -104,40 +105,37 @@
     }
 
     .nav a {
-      color: rgba(248, 250, 247, 0.86);
+      color: var(--muted);
       text-decoration: none;
       border-bottom: 1px solid transparent;
     }
 
     .nav a:hover {
-      color: #ffffff;
-      border-color: var(--gold);
+      color: var(--blue);
+      border-color: var(--red);
     }
 
     .hero {
       position: relative;
-      min-height: 74vh;
+      min-height: 76vh;
       display: grid;
-      align-items: end;
-      padding: 112px 28px 54px;
-      color: #f8faf7;
+      align-items: center;
+      padding: 124px 28px 84px;
+      color: var(--ink);
       overflow: hidden;
       background:
-        linear-gradient(90deg, rgba(13, 17, 23, 0.98) 0%, rgba(13, 17, 23, 0.94) 58%, rgba(13, 17, 23, 0.8) 100%),
-        linear-gradient(135deg, transparent 0 49.5%, rgba(244, 197, 66, 0.22) 49.5% 50.35%, transparent 50.35%),
-        linear-gradient(90deg, rgba(248, 250, 247, 0.08) 1px, transparent 1px),
-        linear-gradient(0deg, rgba(248, 250, 247, 0.07) 1px, transparent 1px),
-        #111820;
-      background-size: auto, 720px 720px, 36px 36px, 36px 36px, auto;
+        radial-gradient(circle at 20% 18%, rgba(14, 165, 233, 0.13), transparent 32%),
+        radial-gradient(circle at 72% 24%, rgba(236, 72, 153, 0.12), transparent 34%),
+        linear-gradient(160deg, #eef2ff 0%, #f8f9fc 42%, #eef2ff 100%);
     }
 
     .hero-inner {
-      width: min(1160px, 100%);
+      width: min(1080px, 100%);
       margin: 0 auto;
       display: grid;
-      grid-template-columns: minmax(0, 0.95fr) minmax(260px, 0.45fr);
+      grid-template-columns: minmax(0, 0.98fr) minmax(300px, 0.5fr);
       gap: 36px;
-      align-items: end;
+      align-items: center;
     }
 
     .kicker {
@@ -145,10 +143,11 @@
       align-items: center;
       gap: 10px;
       width: fit-content;
-      padding: 8px 11px;
-      color: #111820;
-      background: #f4c542;
-      border: 1px solid rgba(13, 17, 23, 0.35);
+      padding: 7px 16px;
+      color: var(--violet);
+      background: rgba(124, 58, 237, 0.08);
+      border: 1px solid rgba(124, 58, 237, 0.20);
+      border-radius: 999px;
       font-family: var(--mono);
       font-size: 0.72rem;
       font-weight: 600;
@@ -158,18 +157,23 @@
     .hero h1 {
       margin: 22px 0 12px;
       font-family: var(--display);
-      font-size: 5.4rem;
-      line-height: 0.88;
-      letter-spacing: 0;
+      font-size: clamp(3.8rem, 8vw, 6.7rem);
+      line-height: 0.92;
+      letter-spacing: -0.02em;
       max-width: 820px;
+      background: linear-gradient(110deg, #0ea5e9 0%, #4f46e5 32%, #7c3aed 54%, #ec4899 78%, #f59e0b 100%);
+      -webkit-background-clip: text;
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
     }
 
     .hero-subtitle {
       max-width: 760px;
       margin: 0;
-      color: rgba(248, 250, 247, 0.88);
-      font-size: 1.35rem;
-      line-height: 1.42;
+      color: #334155;
+      font-size: clamp(1.08rem, 1.7vw, 1.34rem);
+      line-height: 1.55;
+      font-weight: 500;
     }
 
     .hero-actions {
@@ -185,36 +189,38 @@
       justify-content: center;
       gap: 8px;
       min-height: 42px;
-      padding: 10px 15px;
+      padding: 12px 22px;
       font-family: var(--mono);
       font-size: 0.78rem;
-      font-weight: 600;
+      font-weight: 700;
       text-decoration: none;
       border: 1px solid currentColor;
-      border-radius: 6px;
-      transition: transform 160ms ease, background 160ms ease, color 160ms ease;
+      border-radius: 999px;
+      box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
+      transition: transform 180ms ease, background 180ms ease, color 180ms ease, box-shadow 180ms ease;
     }
 
     .button:hover {
       transform: translateY(-2px);
+      box-shadow: 0 12px 24px rgba(124, 58, 237, 0.16);
     }
 
     .button.primary {
-      color: #111820;
-      background: #f8faf7;
-      border-color: #f8faf7;
+      color: #ffffff;
+      background: linear-gradient(135deg, #4f46e5 0%, #ec4899 100%);
+      border-color: transparent;
     }
 
     .button.secondary {
-      color: #f8faf7;
-      background: rgba(248, 250, 247, 0.08);
-      border-color: rgba(248, 250, 247, 0.48);
+      color: var(--ink);
+      background: #ffffff;
+      border-color: var(--line);
     }
 
     .button.tertiary {
-      color: #111820;
-      background: var(--gold);
-      border-color: var(--gold);
+      color: #ffffff;
+      background: var(--black);
+      border-color: var(--black);
     }
 
     .button-icon {
@@ -243,13 +249,12 @@
       overflow: hidden;
       width: 100%;
       padding: 24px;
-      color: #f8faf7;
-      background:
-        linear-gradient(135deg, rgba(46, 123, 63, 0.94), rgba(17, 24, 32, 0.98) 54%, rgba(17, 24, 32, 0.96)),
-        var(--black);
-      border: 1px solid rgba(244, 197, 66, 0.44);
-      border-radius: 8px;
+      color: var(--ink);
+      background: rgba(255, 255, 255, 0.78);
+      border: 1px solid rgba(124, 58, 237, 0.20);
+      border-radius: 18px;
       box-shadow: var(--shadow);
+      backdrop-filter: blur(10px);
     }
 
     .hero-ledger::before {
@@ -257,8 +262,8 @@
       position: absolute;
       inset: 0;
       background:
-        linear-gradient(90deg, rgba(244, 197, 66, 0.12) 1px, transparent 1px),
-        linear-gradient(0deg, rgba(244, 197, 66, 0.08) 1px, transparent 1px);
+        linear-gradient(90deg, rgba(124, 58, 237, 0.08) 1px, transparent 1px),
+        linear-gradient(0deg, rgba(124, 58, 237, 0.06) 1px, transparent 1px);
       background-size: 26px 26px;
       opacity: 0.34;
       pointer-events: none;
@@ -272,10 +277,11 @@
       display: inline-flex;
       align-items: center;
       min-height: 28px;
-      padding: 5px 9px;
-      color: var(--ink);
-      background: #f4c542;
-      border-radius: 6px;
+      padding: 5px 11px;
+      color: var(--violet);
+      background: rgba(124, 58, 237, 0.10);
+      border: 1px solid rgba(124, 58, 237, 0.20);
+      border-radius: 999px;
       font-family: var(--mono);
       font-size: 0.71rem;
       font-weight: 800;
@@ -295,10 +301,11 @@
       font-weight: 800;
       line-height: 0.9;
       white-space: nowrap;
+      color: var(--black);
     }
 
     .ledger-denominator {
-      color: rgba(248, 250, 247, 0.64);
+      color: var(--quiet);
       font-family: var(--display);
       font-size: 2.65rem;
       font-weight: 800;
@@ -308,7 +315,7 @@
     .ledger-copy {
       max-width: 320px;
       margin: 12px 0 0;
-      color: rgba(248, 250, 247, 0.84);
+      color: var(--muted);
       font-size: 1.02rem;
       line-height: 1.45;
     }
@@ -318,7 +325,7 @@
       grid-template-columns: repeat(3, minmax(0, 1fr));
       gap: 0;
       margin-top: 22px;
-      border-top: 1px solid rgba(248, 250, 247, 0.22);
+      border-top: 1px solid var(--line);
     }
 
     .ledger-stat {
@@ -327,12 +334,12 @@
 
     .ledger-stat + .ledger-stat {
       padding-left: 16px;
-      border-left: 1px solid rgba(248, 250, 247, 0.18);
+      border-left: 1px solid var(--line);
     }
 
     .ledger-stat span {
       display: block;
-      color: rgba(248, 250, 247, 0.62);
+      color: var(--quiet);
       font-family: var(--mono);
       font-size: 0.68rem;
       text-transform: uppercase;
@@ -341,7 +348,7 @@
     .ledger-stat b {
       display: block;
       margin-top: 6px;
-      color: #f4c542;
+      color: var(--violet);
       font-family: var(--display);
       font-size: 2.25rem;
       line-height: 1;
@@ -354,29 +361,44 @@
     }
 
     main {
-      width: min(1160px, calc(100% - 40px));
+      width: min(1080px, calc(100% - 40px));
       margin: 0 auto;
     }
 
     .section {
-      padding: 74px 0 0;
+      position: relative;
+      padding: 72px 0 4px;
     }
 
     .section-header {
+      position: relative;
       display: grid;
       grid-template-columns: minmax(200px, 0.42fr) minmax(0, 1fr);
       gap: 48px;
       align-items: start;
       margin-bottom: 26px;
-      border-top: 2px solid var(--line-strong);
-      padding-top: 18px;
+      border-top: 0;
+      padding-top: 4px;
+    }
+
+    .section-header::before {
+      content: "";
+      position: absolute;
+      top: -18px;
+      left: 0;
+      width: 56px;
+      height: 4px;
+      border-radius: 999px;
+      background: linear-gradient(90deg, var(--blue), var(--red));
+      box-shadow: 0 6px 18px rgba(236, 72, 153, 0.24);
     }
 
     .section-eyebrow {
       font-family: var(--mono);
-      color: var(--red);
-      font-size: 0.78rem;
-      font-weight: 600;
+      color: var(--violet);
+      font-size: 0.76rem;
+      font-weight: 700;
+      letter-spacing: 0.12em;
       text-transform: uppercase;
     }
 
@@ -385,7 +407,8 @@
       font-family: var(--display);
       font-size: 2.55rem;
       line-height: 1.04;
-      letter-spacing: 0;
+      letter-spacing: -0.015em;
+      color: #0f172a;
     }
 
     .section-lede {
@@ -404,9 +427,11 @@
 
     .statement {
       padding: 30px;
-      background: var(--black);
-      color: #f8faf7;
-      border-radius: 8px;
+      background:
+        linear-gradient(135deg, rgba(79, 70, 229, 0.94), rgba(236, 72, 153, 0.90)),
+        var(--blue);
+      color: #ffffff;
+      border-radius: 16px;
       box-shadow: var(--shadow);
     }
 
@@ -421,7 +446,7 @@
 
     .statement p {
       margin: 0;
-      color: rgba(248, 250, 247, 0.82);
+      color: rgba(255, 255, 255, 0.84);
       font-size: 1.04rem;
     }
 
@@ -436,11 +461,11 @@
       display: inline-flex;
       align-items: center;
       min-height: 30px;
-      padding: 6px 9px;
-      color: var(--ink);
-      background: #f4c542;
-      border: 1px solid rgba(248, 250, 247, 0.2);
-      border-radius: 6px;
+      padding: 6px 11px;
+      color: #ffffff;
+      background: rgba(255, 255, 255, 0.16);
+      border: 1px solid rgba(255, 255, 255, 0.28);
+      border-radius: 999px;
       font-family: var(--mono);
       font-size: 0.72rem;
       font-weight: 600;
@@ -457,14 +482,24 @@
       padding: 18px;
       background: var(--panel);
       border: 1px solid var(--line);
-      border-radius: 8px;
+      border-radius: 14px;
+      box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
+      transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
+    }
+
+    .step:hover,
+    .panel:hover,
+    .transfer:hover {
+      transform: translateY(-3px);
+      border-color: var(--line-strong);
+      box-shadow: 0 10px 28px rgba(124, 58, 237, 0.10);
     }
 
     .step strong {
       display: block;
       margin-bottom: 8px;
       font-family: var(--mono);
-      color: var(--blue);
+      color: var(--violet);
       font-size: 0.78rem;
       text-transform: uppercase;
     }
@@ -479,7 +514,7 @@
       margin-top: 22px;
       background: var(--panel);
       border: 1px solid var(--line);
-      border-radius: 8px;
+      border-radius: 16px;
       overflow: hidden;
       box-shadow: var(--shadow);
     }
@@ -495,7 +530,7 @@
       color: var(--ink);
       background: var(--panel);
       border: 1px solid var(--line);
-      border-radius: 8px;
+      border-radius: 16px;
       box-shadow: var(--shadow);
     }
 
@@ -538,9 +573,9 @@
       min-height: 26px;
       padding: 5px 8px;
       color: var(--muted);
-      background: rgba(235, 238, 240, 0.66);
+      background: #f8fafc;
       border: 1px solid var(--line);
-      border-radius: 6px;
+      border-radius: 999px;
       font-family: var(--mono);
       font-size: 0.67rem;
     }
@@ -563,10 +598,10 @@
       min-width: 0;
       padding: 14px;
       background:
-        linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(248, 250, 247, 0.64)),
-        var(--paper);
+        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.70)),
+        #ffffff;
       border: 1px solid var(--line);
-      border-radius: 8px;
+      border-radius: 14px;
     }
 
     .benchmark-top {
@@ -589,9 +624,9 @@
       flex: none;
       padding: 5px 8px;
       color: var(--green);
-      background: rgba(46, 123, 63, 0.12);
-      border: 1px solid rgba(46, 123, 63, 0.32);
-      border-radius: 6px;
+      background: rgba(22, 163, 74, 0.10);
+      border: 1px solid rgba(22, 163, 74, 0.25);
+      border-radius: 999px;
       font-family: var(--mono);
       font-size: 0.67rem;
       font-weight: 700;
@@ -606,11 +641,11 @@
       height: 170px;
       padding: 24px 8px 22px 34px;
       background:
-        linear-gradient(rgba(21, 25, 31, 0.08) 1px, transparent 1px) 0 24px / 100% 42px,
-        rgba(235, 238, 240, 0.38);
-      border-left: 1px solid rgba(21, 25, 31, 0.25);
-      border-bottom: 1px solid rgba(21, 25, 31, 0.25);
-      border-radius: 6px;
+        linear-gradient(rgba(124, 58, 237, 0.08) 1px, transparent 1px) 0 24px / 100% 42px,
+        rgba(238, 242, 255, 0.58);
+      border-left: 1px solid rgba(124, 58, 237, 0.20);
+      border-bottom: 1px solid rgba(124, 58, 237, 0.20);
+      border-radius: 12px;
     }
 
     .axis-range {
@@ -636,8 +671,8 @@
     }
 
     .method-bar.skillopt {
-      border: 2px solid rgba(21, 25, 31, 0.62);
-      box-shadow: 0 0 0 3px rgba(46, 123, 63, 0.16), 0 10px 18px rgba(46, 123, 63, 0.22);
+      border: 2px solid rgba(15, 23, 42, 0.62);
+      box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.14), 0 10px 18px rgba(22, 163, 74, 0.20);
       opacity: 1;
     }
 
@@ -649,7 +684,7 @@
       padding: 2px 5px;
       color: #f8faf7;
       background: var(--green);
-      border-radius: 5px;
+      border-radius: 999px;
       font-family: var(--mono);
       font-size: 0.62rem;
       font-weight: 800;
@@ -670,8 +705,8 @@
       margin-top: -28px;
       padding: 22px;
       background: var(--panel);
-      border: 1px solid var(--line-strong);
-      border-radius: 8px;
+      border: 1px solid var(--line);
+      border-radius: 16px;
       box-shadow: var(--shadow);
     }
 
@@ -683,10 +718,10 @@
     .video-frame {
       margin: 18px 0 0;
       padding: 14px;
-      background: #0d1117;
-      border: 1px solid var(--line-strong);
-      border-radius: 6px;
-      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
+      background: #ffffff;
+      border: 1px solid var(--line);
+      border-radius: 14px;
+      box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
     }
 
     .video-frame iframe {
@@ -695,7 +730,7 @@
       display: block;
       background: #0d1117;
       border: 0;
-      border-radius: 4px;
+      border-radius: 10px;
     }
 
     .teaser-heading {
@@ -724,7 +759,7 @@
       padding: 14px;
       background: #ffffff;
       border: 1px solid var(--line);
-      border-radius: 6px;
+      border-radius: 14px;
       overflow-x: auto;
     }
 
@@ -746,7 +781,7 @@
       overflow-x: auto;
       background: var(--panel);
       border: 1px solid var(--line);
-      border-radius: 8px;
+      border-radius: 16px;
       box-shadow: var(--shadow);
     }
 
@@ -765,8 +800,8 @@
       z-index: 1;
       padding: 12px 14px;
       text-align: left;
-      color: #f8faf7;
-      background: var(--black);
+      color: #ffffff;
+      background: linear-gradient(135deg, #4f46e5, #7c3aed);
       border-bottom: 1px solid var(--line-strong);
       font-weight: 600;
     }
@@ -782,7 +817,7 @@
     }
 
     tbody tr:nth-child(even) td {
-      background: rgba(235, 238, 240, 0.62);
+      background: #f8fafc;
     }
 
     .harness-group td {
@@ -797,13 +832,13 @@
     .heat {
       color: var(--ink);
       background:
-        linear-gradient(90deg, rgba(46, 123, 63, 0.22) 0%, rgba(46, 123, 63, 0.22) calc(var(--heat) * 1%), transparent calc(var(--heat) * 1%)) !important;
+        linear-gradient(90deg, rgba(22, 163, 74, 0.16) 0%, rgba(22, 163, 74, 0.16) calc(var(--heat) * 1%), transparent calc(var(--heat) * 1%)) !important;
       font-weight: 600;
     }
 
     .heat-avg {
       color: #f8faf7;
-      background: var(--teal) !important;
+      background: linear-gradient(135deg, #4f46e5, #ec4899) !important;
       font-weight: 700;
     }
 
@@ -817,23 +852,24 @@
       padding: 22px;
       background: var(--panel);
       border: 1px solid var(--line);
-      border-radius: 8px;
+      border-radius: 14px;
+      transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
     }
 
     .panel.accent-blue {
-      border-top: 5px solid var(--blue);
+      border-top: 4px solid var(--blue);
     }
 
     .panel.accent-red {
-      border-top: 5px solid var(--red);
+      border-top: 4px solid var(--red);
     }
 
     .panel.accent-gold {
-      border-top: 5px solid var(--gold);
+      border-top: 4px solid var(--gold);
     }
 
     .panel.accent-green {
-      border-top: 5px solid var(--green);
+      border-top: 4px solid var(--green);
     }
 
     .panel p {
@@ -847,9 +883,9 @@
       padding: 18px 20px;
       color: var(--ink);
       background: var(--panel-warm);
-      border: 1px solid #e0c76f;
-      border-left: 7px solid var(--gold);
-      border-radius: 8px;
+      border: 1px solid rgba(245, 158, 11, 0.24);
+      border-left: 6px solid var(--gold);
+      border-radius: 14px;
       font-size: 1rem;
     }
 
@@ -876,7 +912,7 @@
     .evolution-chart {
       background: var(--panel);
       border: 1px solid var(--line);
-      border-radius: 8px;
+      border-radius: 16px;
       box-shadow: var(--shadow);
       overflow: hidden;
     }
@@ -928,12 +964,12 @@
     }
 
     .chart-grid {
-      stroke: rgba(21, 25, 31, 0.13);
+      stroke: rgba(124, 58, 237, 0.12);
       stroke-width: 1;
     }
 
     .chart-axis {
-      stroke: rgba(21, 25, 31, 0.42);
+      stroke: rgba(79, 70, 229, 0.32);
       stroke-width: 1.2;
     }
 
@@ -998,7 +1034,7 @@
     .chart-point:hover circle:not(.hit),
     .chart-point:focus circle:not(.hit) {
       r: 7;
-      fill: #f4c542;
+      fill: #fff7ed;
       stroke-width: 4;
     }
 
@@ -1017,10 +1053,10 @@
     .evolution-detail {
       min-height: 438px;
       padding: 20px;
-      color: #f8faf7;
-      background: var(--black);
-      border: 1px solid var(--line-strong);
-      border-radius: 8px;
+      color: var(--ink);
+      background: #ffffff;
+      border: 1px solid var(--line);
+      border-radius: 16px;
       box-shadow: var(--shadow);
     }
 
@@ -1032,7 +1068,7 @@
       margin-bottom: 14px;
       font-family: var(--mono);
       font-size: 0.72rem;
-      color: rgba(248, 250, 247, 0.7);
+      color: var(--quiet);
       text-transform: uppercase;
     }
 
@@ -1041,9 +1077,10 @@
       align-items: center;
       min-height: 26px;
       padding: 5px 8px;
-      color: var(--ink);
-      background: #f4c542;
-      border-radius: 6px;
+      color: var(--violet);
+      background: rgba(124, 58, 237, 0.10);
+      border: 1px solid rgba(124, 58, 237, 0.18);
+      border-radius: 999px;
       font-weight: 600;
       white-space: nowrap;
     }
@@ -1065,14 +1102,14 @@
 
     .detail-metric {
       padding: 12px;
-      background: rgba(248, 250, 247, 0.08);
-      border: 1px solid rgba(248, 250, 247, 0.16);
-      border-radius: 8px;
+      background: #f8fafc;
+      border: 1px solid var(--line);
+      border-radius: 12px;
     }
 
     .detail-metric span {
       display: block;
-      color: rgba(248, 250, 247, 0.62);
+      color: var(--quiet);
       font-family: var(--mono);
       font-size: 0.67rem;
       text-transform: uppercase;
@@ -1088,7 +1125,7 @@
 
     .detail-summary {
       margin: 0 0 14px;
-      color: rgba(248, 250, 247, 0.8);
+      color: var(--muted);
       font-size: 0.96rem;
     }
 
@@ -1102,10 +1139,10 @@
 
     .detail-edits li {
       padding: 10px 11px;
-      color: rgba(248, 250, 247, 0.84);
-      background: rgba(248, 250, 247, 0.08);
-      border-left: 4px solid var(--gold);
-      border-radius: 6px;
+      color: var(--muted);
+      background: rgba(238, 242, 255, 0.58);
+      border-left: 4px solid var(--violet);
+      border-radius: 10px;
       font-size: 0.92rem;
       line-height: 1.42;
     }
@@ -1121,7 +1158,7 @@
       padding: 14px;
       background: var(--panel);
       border: 1px solid var(--line);
-      border-radius: 8px;
+      border-radius: 14px;
       font-family: var(--mono);
       font-size: 0.72rem;
       color: var(--muted);
@@ -1148,7 +1185,7 @@
       padding: 13px;
       background: rgba(255, 255, 255, 0.7);
       border: 1px solid var(--line);
-      border-radius: 8px;
+      border-radius: 14px;
     }
 
     .mini-item b {
@@ -1170,22 +1207,25 @@
 
     .transfer {
       padding: 18px;
-      color: #f8faf7;
-      background: var(--black);
-      border-radius: 8px;
+      color: var(--ink);
+      background: #ffffff;
+      border: 1px solid var(--line);
+      border-radius: 14px;
       min-height: 160px;
+      box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
+      transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
     }
 
     .transfer:nth-child(2) {
-      background: var(--blue);
+      background: #ffffff;
     }
 
     .transfer:nth-child(3) {
-      background: var(--red);
+      background: #ffffff;
     }
 
     .transfer:nth-child(4) {
-      background: var(--teal);
+      background: #ffffff;
     }
 
     .transfer .big {
@@ -1195,19 +1235,24 @@
       font-size: 2.15rem;
       font-weight: 800;
       line-height: 1;
+      background: linear-gradient(135deg, #4f46e5, #ec4899);
+      -webkit-background-clip: text;
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
     }
 
     .transfer p {
       margin: 0;
-      color: rgba(248, 250, 247, 0.82);
+      color: var(--muted);
       font-size: 0.92rem;
     }
 
     .citation-panel {
       padding: 22px;
-      background: rgba(255, 255, 255, 0.72);
+      background: #ffffff;
       border: 1px solid var(--line);
-      border-radius: 8px;
+      border-radius: 16px;
+      box-shadow: var(--shadow);
     }
 
     .citation-panel h3 {
@@ -1228,8 +1273,8 @@
       margin: 16px 0 0;
       padding: 16px;
       color: #f8faf7;
-      background: var(--black);
-      border-radius: 8px;
+      background: #0f172a;
+      border-radius: 14px;
     }
 
     .citation-box code {
@@ -1242,7 +1287,7 @@
     .footer {
       margin-top: 80px;
       padding: 32px 0 44px;
-      border-top: 2px solid var(--line-strong);
+      border-top: 1px solid var(--line);
       color: var(--muted);
       font-family: var(--mono);
       font-size: 0.75rem;
@@ -2058,13 +2103,13 @@
   <script>
     const methodComparison = {
       methods: [
-        { key: "NoSkill", label: "No skill", color: "#7a8290" },
-        { key: "Human", label: "Human skill", color: "#a77bd8" },
-        { key: "LLM", label: "LLM skill", color: "#5a9bdc" },
-        { key: "Trace", label: "Trace2Skill", color: "#8aa9c9" },
-        { key: "TextGrad", label: "TextGrad", color: "#d95b50" },
-        { key: "GEPA", label: "GEPA", color: "#d7b646" },
-        { key: "Ours", label: "SkillOpt", color: "#87d996" }
+        { key: "NoSkill", label: "No skill", color: "#94a3b8" },
+        { key: "Human", label: "Human skill", color: "#7c3aed" },
+        { key: "LLM", label: "LLM skill", color: "#4f46e5" },
+        { key: "Trace", label: "Trace2Skill", color: "#0ea5e9" },
+        { key: "TextGrad", label: "TextGrad", color: "#ec4899" },
+        { key: "GEPA", label: "GEPA", color: "#f59e0b" },
+        { key: "Ours", label: "SkillOpt", color: "#16a34a" }
       ],
       benches: [
         {
diff --git a/skillopt.html b/skillopt.html
index fa72533..5d6d0a9 100644
--- a/skillopt.html
+++ b/skillopt.html
@@ -6,28 +6,29 @@
   <title>SkillOpt | Executive Strategy for Self-Evolving Agent Skills</title>
   <meta name="description" content="Project webpage for SkillOpt, a text-space optimizer that trains reusable natural-language skills for frozen language agents.">
   <style>
-    @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Literata:opsz,wght@7..72,400;7..72,600;7..72,700;7..72,800&family=Newsreader:opsz,wght@6..72,600;6..72,700;6..72,800&display=swap');
+    @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,300..900,0..100&family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
 
     :root {
-      --paper: #f7f8f3;
-      --paper-2: #ebeef0;
-      --ink: #15191f;
-      --muted: #5d6672;
-      --quiet: #7b8490;
-      --line: #cfd4d8;
-      --line-strong: #2d333b;
+      --paper: #f8f9fc;
+      --paper-2: #eef2ff;
+      --ink: #1e293b;
+      --muted: #64748b;
+      --quiet: #94a3b8;
+      --line: #e2e8f0;
+      --line-strong: #c7d2fe;
       --panel: #ffffff;
-      --panel-warm: #fff9e8;
-      --blue: #2359b6;
-      --teal: #0b7974;
-      --red: #bb352d;
-      --gold: #b17300;
-      --green: #2e7b3f;
-      --black: #0d1117;
-      --shadow: 0 18px 45px rgba(18, 24, 31, 0.12);
-      --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
-      --serif: "Literata", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
-      --display: "Newsreader", "Literata", Georgia, serif;
+      --panel-warm: #fff7ed;
+      --blue: #4f46e5;
+      --teal: #0ea5e9;
+      --red: #ec4899;
+      --gold: #f59e0b;
+      --green: #16a34a;
+      --black: #0f172a;
+      --violet: #7c3aed;
+      --shadow: 0 12px 30px rgba(79, 70, 229, 0.10);
+      --mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
+      --serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      --display: "Fraunces", Georgia, serif;
     }
 
     * {
@@ -42,12 +43,12 @@
       margin: 0;
       color: var(--ink);
       background:
-        linear-gradient(rgba(21, 25, 31, 0.045) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(21, 25, 31, 0.035) 1px, transparent 1px),
+        radial-gradient(circle at 18% 10%, rgba(124, 58, 237, 0.08), transparent 38%),
+        radial-gradient(circle at 88% 78%, rgba(245, 158, 11, 0.08), transparent 42%),
+        radial-gradient(circle at 58% 38%, rgba(236, 72, 153, 0.055), transparent 46%),
         var(--paper);
-      background-size: 42px 42px;
       font-family: var(--serif);
-      line-height: 1.55;
+      line-height: 1.7;
       letter-spacing: 0;
     }
 
@@ -73,10 +74,10 @@
       justify-content: space-between;
       gap: 18px;
       padding: 14px 28px;
-      color: #f8faf7;
-      background: rgba(13, 17, 23, 0.78);
-      border-bottom: 1px solid rgba(255, 255, 255, 0.12);
-      backdrop-filter: blur(12px);
+      color: var(--ink);
+      background: rgba(255, 255, 255, 0.74);
+      border-bottom: 1px solid rgba(226, 232, 240, 0.86);
+      backdrop-filter: blur(14px);
       font-family: var(--mono);
       font-size: 0.78rem;
     }
@@ -104,40 +105,37 @@
     }
 
     .nav a {
-      color: rgba(248, 250, 247, 0.86);
+      color: var(--muted);
       text-decoration: none;
       border-bottom: 1px solid transparent;
     }
 
     .nav a:hover {
-      color: #ffffff;
-      border-color: var(--gold);
+      color: var(--blue);
+      border-color: var(--red);
     }
 
     .hero {
       position: relative;
-      min-height: 74vh;
+      min-height: 76vh;
       display: grid;
-      align-items: end;
-      padding: 112px 28px 54px;
-      color: #f8faf7;
+      align-items: center;
+      padding: 124px 28px 84px;
+      color: var(--ink);
       overflow: hidden;
       background:
-        linear-gradient(90deg, rgba(13, 17, 23, 0.98) 0%, rgba(13, 17, 23, 0.94) 58%, rgba(13, 17, 23, 0.8) 100%),
-        linear-gradient(135deg, transparent 0 49.5%, rgba(244, 197, 66, 0.22) 49.5% 50.35%, transparent 50.35%),
-        linear-gradient(90deg, rgba(248, 250, 247, 0.08) 1px, transparent 1px),
-        linear-gradient(0deg, rgba(248, 250, 247, 0.07) 1px, transparent 1px),
-        #111820;
-      background-size: auto, 720px 720px, 36px 36px, 36px 36px, auto;
+        radial-gradient(circle at 20% 18%, rgba(14, 165, 233, 0.13), transparent 32%),
+        radial-gradient(circle at 72% 24%, rgba(236, 72, 153, 0.12), transparent 34%),
+        linear-gradient(160deg, #eef2ff 0%, #f8f9fc 42%, #eef2ff 100%);
     }
 
     .hero-inner {
-      width: min(1160px, 100%);
+      width: min(1080px, 100%);
       margin: 0 auto;
       display: grid;
-      grid-template-columns: minmax(0, 0.95fr) minmax(260px, 0.45fr);
+      grid-template-columns: minmax(0, 0.98fr) minmax(300px, 0.5fr);
       gap: 36px;
-      align-items: end;
+      align-items: center;
     }
 
     .kicker {
@@ -145,10 +143,11 @@
       align-items: center;
       gap: 10px;
       width: fit-content;
-      padding: 8px 11px;
-      color: #111820;
-      background: #f4c542;
-      border: 1px solid rgba(13, 17, 23, 0.35);
+      padding: 7px 16px;
+      color: var(--violet);
+      background: rgba(124, 58, 237, 0.08);
+      border: 1px solid rgba(124, 58, 237, 0.20);
+      border-radius: 999px;
       font-family: var(--mono);
       font-size: 0.72rem;
       font-weight: 600;
@@ -158,18 +157,23 @@
     .hero h1 {
       margin: 22px 0 12px;
       font-family: var(--display);
-      font-size: 5.4rem;
-      line-height: 0.88;
-      letter-spacing: 0;
+      font-size: clamp(3.8rem, 8vw, 6.7rem);
+      line-height: 0.92;
+      letter-spacing: -0.02em;
       max-width: 820px;
+      background: linear-gradient(110deg, #0ea5e9 0%, #4f46e5 32%, #7c3aed 54%, #ec4899 78%, #f59e0b 100%);
+      -webkit-background-clip: text;
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
     }
 
     .hero-subtitle {
       max-width: 760px;
       margin: 0;
-      color: rgba(248, 250, 247, 0.88);
-      font-size: 1.35rem;
-      line-height: 1.42;
+      color: #334155;
+      font-size: clamp(1.08rem, 1.7vw, 1.34rem);
+      line-height: 1.55;
+      font-weight: 500;
     }
 
     .hero-actions {
@@ -185,36 +189,38 @@
       justify-content: center;
       gap: 8px;
       min-height: 42px;
-      padding: 10px 15px;
+      padding: 12px 22px;
       font-family: var(--mono);
       font-size: 0.78rem;
-      font-weight: 600;
+      font-weight: 700;
       text-decoration: none;
       border: 1px solid currentColor;
-      border-radius: 6px;
-      transition: transform 160ms ease, background 160ms ease, color 160ms ease;
+      border-radius: 999px;
+      box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
+      transition: transform 180ms ease, background 180ms ease, color 180ms ease, box-shadow 180ms ease;
     }
 
     .button:hover {
       transform: translateY(-2px);
+      box-shadow: 0 12px 24px rgba(124, 58, 237, 0.16);
     }
 
     .button.primary {
-      color: #111820;
-      background: #f8faf7;
-      border-color: #f8faf7;
+      color: #ffffff;
+      background: linear-gradient(135deg, #4f46e5 0%, #ec4899 100%);
+      border-color: transparent;
     }
 
     .button.secondary {
-      color: #f8faf7;
-      background: rgba(248, 250, 247, 0.08);
-      border-color: rgba(248, 250, 247, 0.48);
+      color: var(--ink);
+      background: #ffffff;
+      border-color: var(--line);
     }
 
     .button.tertiary {
-      color: #111820;
-      background: var(--gold);
-      border-color: var(--gold);
+      color: #ffffff;
+      background: var(--black);
+      border-color: var(--black);
     }
 
     .button-icon {
@@ -243,13 +249,12 @@
       overflow: hidden;
       width: 100%;
       padding: 24px;
-      color: #f8faf7;
-      background:
-        linear-gradient(135deg, rgba(46, 123, 63, 0.94), rgba(17, 24, 32, 0.98) 54%, rgba(17, 24, 32, 0.96)),
-        var(--black);
-      border: 1px solid rgba(244, 197, 66, 0.44);
-      border-radius: 8px;
+      color: var(--ink);
+      background: rgba(255, 255, 255, 0.78);
+      border: 1px solid rgba(124, 58, 237, 0.20);
+      border-radius: 18px;
       box-shadow: var(--shadow);
+      backdrop-filter: blur(10px);
     }
 
     .hero-ledger::before {
@@ -257,8 +262,8 @@
       position: absolute;
       inset: 0;
       background:
-        linear-gradient(90deg, rgba(244, 197, 66, 0.12) 1px, transparent 1px),
-        linear-gradient(0deg, rgba(244, 197, 66, 0.08) 1px, transparent 1px);
+        linear-gradient(90deg, rgba(124, 58, 237, 0.08) 1px, transparent 1px),
+        linear-gradient(0deg, rgba(124, 58, 237, 0.06) 1px, transparent 1px);
       background-size: 26px 26px;
       opacity: 0.34;
       pointer-events: none;
@@ -272,10 +277,11 @@
       display: inline-flex;
       align-items: center;
       min-height: 28px;
-      padding: 5px 9px;
-      color: var(--ink);
-      background: #f4c542;
-      border-radius: 6px;
+      padding: 5px 11px;
+      color: var(--violet);
+      background: rgba(124, 58, 237, 0.10);
+      border: 1px solid rgba(124, 58, 237, 0.20);
+      border-radius: 999px;
       font-family: var(--mono);
       font-size: 0.71rem;
       font-weight: 800;
@@ -295,10 +301,11 @@
       font-weight: 800;
       line-height: 0.9;
       white-space: nowrap;
+      color: var(--black);
     }
 
     .ledger-denominator {
-      color: rgba(248, 250, 247, 0.64);
+      color: var(--quiet);
       font-family: var(--display);
       font-size: 2.65rem;
       font-weight: 800;
@@ -308,7 +315,7 @@
     .ledger-copy {
       max-width: 320px;
       margin: 12px 0 0;
-      color: rgba(248, 250, 247, 0.84);
+      color: var(--muted);
       font-size: 1.02rem;
       line-height: 1.45;
     }
@@ -318,7 +325,7 @@
       grid-template-columns: repeat(3, minmax(0, 1fr));
       gap: 0;
       margin-top: 22px;
-      border-top: 1px solid rgba(248, 250, 247, 0.22);
+      border-top: 1px solid var(--line);
     }
 
     .ledger-stat {
@@ -327,12 +334,12 @@
 
     .ledger-stat + .ledger-stat {
       padding-left: 16px;
-      border-left: 1px solid rgba(248, 250, 247, 0.18);
+      border-left: 1px solid var(--line);
     }
 
     .ledger-stat span {
       display: block;
-      color: rgba(248, 250, 247, 0.62);
+      color: var(--quiet);
       font-family: var(--mono);
       font-size: 0.68rem;
       text-transform: uppercase;
@@ -341,7 +348,7 @@
     .ledger-stat b {
       display: block;
       margin-top: 6px;
-      color: #f4c542;
+      color: var(--violet);
       font-family: var(--display);
       font-size: 2.25rem;
       line-height: 1;
@@ -354,29 +361,44 @@
     }
 
     main {
-      width: min(1160px, calc(100% - 40px));
+      width: min(1080px, calc(100% - 40px));
       margin: 0 auto;
     }
 
     .section {
-      padding: 74px 0 0;
+      position: relative;
+      padding: 72px 0 4px;
     }
 
     .section-header {
+      position: relative;
       display: grid;
       grid-template-columns: minmax(200px, 0.42fr) minmax(0, 1fr);
       gap: 48px;
       align-items: start;
       margin-bottom: 26px;
-      border-top: 2px solid var(--line-strong);
-      padding-top: 18px;
+      border-top: 0;
+      padding-top: 4px;
+    }
+
+    .section-header::before {
+      content: "";
+      position: absolute;
+      top: -18px;
+      left: 0;
+      width: 56px;
+      height: 4px;
+      border-radius: 999px;
+      background: linear-gradient(90deg, var(--blue), var(--red));
+      box-shadow: 0 6px 18px rgba(236, 72, 153, 0.24);
     }
 
     .section-eyebrow {
       font-family: var(--mono);
-      color: var(--red);
-      font-size: 0.78rem;
-      font-weight: 600;
+      color: var(--violet);
+      font-size: 0.76rem;
+      font-weight: 700;
+      letter-spacing: 0.12em;
       text-transform: uppercase;
     }
 
@@ -385,7 +407,8 @@
       font-family: var(--display);
       font-size: 2.55rem;
       line-height: 1.04;
-      letter-spacing: 0;
+      letter-spacing: -0.015em;
+      color: #0f172a;
     }
 
     .section-lede {
@@ -404,9 +427,11 @@
 
     .statement {
       padding: 30px;
-      background: var(--black);
-      color: #f8faf7;
-      border-radius: 8px;
+      background:
+        linear-gradient(135deg, rgba(79, 70, 229, 0.94), rgba(236, 72, 153, 0.90)),
+        var(--blue);
+      color: #ffffff;
+      border-radius: 16px;
       box-shadow: var(--shadow);
     }
 
@@ -421,7 +446,7 @@
 
     .statement p {
       margin: 0;
-      color: rgba(248, 250, 247, 0.82);
+      color: rgba(255, 255, 255, 0.84);
       font-size: 1.04rem;
     }
 
@@ -436,11 +461,11 @@
       display: inline-flex;
       align-items: center;
       min-height: 30px;
-      padding: 6px 9px;
-      color: var(--ink);
-      background: #f4c542;
-      border: 1px solid rgba(248, 250, 247, 0.2);
-      border-radius: 6px;
+      padding: 6px 11px;
+      color: #ffffff;
+      background: rgba(255, 255, 255, 0.16);
+      border: 1px solid rgba(255, 255, 255, 0.28);
+      border-radius: 999px;
       font-family: var(--mono);
       font-size: 0.72rem;
       font-weight: 600;
@@ -457,14 +482,24 @@
       padding: 18px;
       background: var(--panel);
       border: 1px solid var(--line);
-      border-radius: 8px;
+      border-radius: 14px;
+      box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
+      transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
+    }
+
+    .step:hover,
+    .panel:hover,
+    .transfer:hover {
+      transform: translateY(-3px);
+      border-color: var(--line-strong);
+      box-shadow: 0 10px 28px rgba(124, 58, 237, 0.10);
     }
 
     .step strong {
       display: block;
       margin-bottom: 8px;
       font-family: var(--mono);
-      color: var(--blue);
+      color: var(--violet);
       font-size: 0.78rem;
       text-transform: uppercase;
     }
@@ -479,7 +514,7 @@
       margin-top: 22px;
       background: var(--panel);
       border: 1px solid var(--line);
-      border-radius: 8px;
+      border-radius: 16px;
       overflow: hidden;
       box-shadow: var(--shadow);
     }
@@ -495,7 +530,7 @@
       color: var(--ink);
       background: var(--panel);
       border: 1px solid var(--line);
-      border-radius: 8px;
+      border-radius: 16px;
       box-shadow: var(--shadow);
     }
 
@@ -538,9 +573,9 @@
       min-height: 26px;
       padding: 5px 8px;
       color: var(--muted);
-      background: rgba(235, 238, 240, 0.66);
+      background: #f8fafc;
       border: 1px solid var(--line);
-      border-radius: 6px;
+      border-radius: 999px;
       font-family: var(--mono);
       font-size: 0.67rem;
     }
@@ -563,10 +598,10 @@
       min-width: 0;
       padding: 14px;
       background:
-        linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(248, 250, 247, 0.64)),
-        var(--paper);
+        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.70)),
+        #ffffff;
       border: 1px solid var(--line);
-      border-radius: 8px;
+      border-radius: 14px;
     }
 
     .benchmark-top {
@@ -589,9 +624,9 @@
       flex: none;
       padding: 5px 8px;
       color: var(--green);
-      background: rgba(46, 123, 63, 0.12);
-      border: 1px solid rgba(46, 123, 63, 0.32);
-      border-radius: 6px;
+      background: rgba(22, 163, 74, 0.10);
+      border: 1px solid rgba(22, 163, 74, 0.25);
+      border-radius: 999px;
       font-family: var(--mono);
       font-size: 0.67rem;
       font-weight: 700;
@@ -606,11 +641,11 @@
       height: 170px;
       padding: 24px 8px 22px 34px;
       background:
-        linear-gradient(rgba(21, 25, 31, 0.08) 1px, transparent 1px) 0 24px / 100% 42px,
-        rgba(235, 238, 240, 0.38);
-      border-left: 1px solid rgba(21, 25, 31, 0.25);
-      border-bottom: 1px solid rgba(21, 25, 31, 0.25);
-      border-radius: 6px;
+        linear-gradient(rgba(124, 58, 237, 0.08) 1px, transparent 1px) 0 24px / 100% 42px,
+        rgba(238, 242, 255, 0.58);
+      border-left: 1px solid rgba(124, 58, 237, 0.20);
+      border-bottom: 1px solid rgba(124, 58, 237, 0.20);
+      border-radius: 12px;
     }
 
     .axis-range {
@@ -636,8 +671,8 @@
     }
 
     .method-bar.skillopt {
-      border: 2px solid rgba(21, 25, 31, 0.62);
-      box-shadow: 0 0 0 3px rgba(46, 123, 63, 0.16), 0 10px 18px rgba(46, 123, 63, 0.22);
+      border: 2px solid rgba(15, 23, 42, 0.62);
+      box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.14), 0 10px 18px rgba(22, 163, 74, 0.20);
       opacity: 1;
     }
 
@@ -649,7 +684,7 @@
       padding: 2px 5px;
       color: #f8faf7;
       background: var(--green);
-      border-radius: 5px;
+      border-radius: 999px;
       font-family: var(--mono);
       font-size: 0.62rem;
       font-weight: 800;
@@ -670,8 +705,8 @@
       margin-top: -28px;
       padding: 22px;
       background: var(--panel);
-      border: 1px solid var(--line-strong);
-      border-radius: 8px;
+      border: 1px solid var(--line);
+      border-radius: 16px;
       box-shadow: var(--shadow);
     }
 
@@ -683,10 +718,10 @@
     .video-frame {
       margin: 18px 0 0;
       padding: 14px;
-      background: #0d1117;
-      border: 1px solid var(--line-strong);
-      border-radius: 6px;
-      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
+      background: #ffffff;
+      border: 1px solid var(--line);
+      border-radius: 14px;
+      box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
     }
 
     .video-frame iframe {
@@ -695,7 +730,7 @@
       display: block;
       background: #0d1117;
       border: 0;
-      border-radius: 4px;
+      border-radius: 10px;
     }
 
     .teaser-heading {
@@ -724,7 +759,7 @@
       padding: 14px;
       background: #ffffff;
       border: 1px solid var(--line);
-      border-radius: 6px;
+      border-radius: 14px;
       overflow-x: auto;
     }
 
@@ -746,7 +781,7 @@
       overflow-x: auto;
       background: var(--panel);
       border: 1px solid var(--line);
-      border-radius: 8px;
+      border-radius: 16px;
       box-shadow: var(--shadow);
     }
 
@@ -765,8 +800,8 @@
       z-index: 1;
       padding: 12px 14px;
       text-align: left;
-      color: #f8faf7;
-      background: var(--black);
+      color: #ffffff;
+      background: linear-gradient(135deg, #4f46e5, #7c3aed);
       border-bottom: 1px solid var(--line-strong);
       font-weight: 600;
     }
@@ -782,7 +817,7 @@
     }
 
     tbody tr:nth-child(even) td {
-      background: rgba(235, 238, 240, 0.62);
+      background: #f8fafc;
     }
 
     .harness-group td {
@@ -797,13 +832,13 @@
     .heat {
       color: var(--ink);
       background:
-        linear-gradient(90deg, rgba(46, 123, 63, 0.22) 0%, rgba(46, 123, 63, 0.22) calc(var(--heat) * 1%), transparent calc(var(--heat) * 1%)) !important;
+        linear-gradient(90deg, rgba(22, 163, 74, 0.16) 0%, rgba(22, 163, 74, 0.16) calc(var(--heat) * 1%), transparent calc(var(--heat) * 1%)) !important;
       font-weight: 600;
     }
 
     .heat-avg {
       color: #f8faf7;
-      background: var(--teal) !important;
+      background: linear-gradient(135deg, #4f46e5, #ec4899) !important;
       font-weight: 700;
     }
 
@@ -817,23 +852,24 @@
       padding: 22px;
       background: var(--panel);
       border: 1px solid var(--line);
-      border-radius: 8px;
+      border-radius: 14px;
+      transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
     }
 
     .panel.accent-blue {
-      border-top: 5px solid var(--blue);
+      border-top: 4px solid var(--blue);
     }
 
     .panel.accent-red {
-      border-top: 5px solid var(--red);
+      border-top: 4px solid var(--red);
     }
 
     .panel.accent-gold {
-      border-top: 5px solid var(--gold);
+      border-top: 4px solid var(--gold);
     }
 
     .panel.accent-green {
-      border-top: 5px solid var(--green);
+      border-top: 4px solid var(--green);
     }
 
     .panel p {
@@ -847,9 +883,9 @@
       padding: 18px 20px;
       color: var(--ink);
       background: var(--panel-warm);
-      border: 1px solid #e0c76f;
-      border-left: 7px solid var(--gold);
-      border-radius: 8px;
+      border: 1px solid rgba(245, 158, 11, 0.24);
+      border-left: 6px solid var(--gold);
+      border-radius: 14px;
       font-size: 1rem;
     }
 
@@ -876,7 +912,7 @@
     .evolution-chart {
       background: var(--panel);
       border: 1px solid var(--line);
-      border-radius: 8px;
+      border-radius: 16px;
       box-shadow: var(--shadow);
       overflow: hidden;
     }
@@ -928,12 +964,12 @@
     }
 
     .chart-grid {
-      stroke: rgba(21, 25, 31, 0.13);
+      stroke: rgba(124, 58, 237, 0.12);
       stroke-width: 1;
     }
 
     .chart-axis {
-      stroke: rgba(21, 25, 31, 0.42);
+      stroke: rgba(79, 70, 229, 0.32);
       stroke-width: 1.2;
     }
 
@@ -998,7 +1034,7 @@
     .chart-point:hover circle:not(.hit),
     .chart-point:focus circle:not(.hit) {
       r: 7;
-      fill: #f4c542;
+      fill: #fff7ed;
       stroke-width: 4;
     }
 
@@ -1017,10 +1053,10 @@
     .evolution-detail {
       min-height: 438px;
       padding: 20px;
-      color: #f8faf7;
-      background: var(--black);
-      border: 1px solid var(--line-strong);
-      border-radius: 8px;
+      color: var(--ink);
+      background: #ffffff;
+      border: 1px solid var(--line);
+      border-radius: 16px;
       box-shadow: var(--shadow);
     }
 
@@ -1032,7 +1068,7 @@
       margin-bottom: 14px;
       font-family: var(--mono);
       font-size: 0.72rem;
-      color: rgba(248, 250, 247, 0.7);
+      color: var(--quiet);
       text-transform: uppercase;
     }
 
@@ -1041,9 +1077,10 @@
       align-items: center;
       min-height: 26px;
       padding: 5px 8px;
-      color: var(--ink);
-      background: #f4c542;
-      border-radius: 6px;
+      color: var(--violet);
+      background: rgba(124, 58, 237, 0.10);
+      border: 1px solid rgba(124, 58, 237, 0.18);
+      border-radius: 999px;
       font-weight: 600;
       white-space: nowrap;
     }
@@ -1065,14 +1102,14 @@
 
     .detail-metric {
       padding: 12px;
-      background: rgba(248, 250, 247, 0.08);
-      border: 1px solid rgba(248, 250, 247, 0.16);
-      border-radius: 8px;
+      background: #f8fafc;
+      border: 1px solid var(--line);
+      border-radius: 12px;
     }
 
     .detail-metric span {
       display: block;
-      color: rgba(248, 250, 247, 0.62);
+      color: var(--quiet);
       font-family: var(--mono);
       font-size: 0.67rem;
       text-transform: uppercase;
@@ -1088,7 +1125,7 @@
 
     .detail-summary {
       margin: 0 0 14px;
-      color: rgba(248, 250, 247, 0.8);
+      color: var(--muted);
       font-size: 0.96rem;
     }
 
@@ -1102,10 +1139,10 @@
 
     .detail-edits li {
       padding: 10px 11px;
-      color: rgba(248, 250, 247, 0.84);
-      background: rgba(248, 250, 247, 0.08);
-      border-left: 4px solid var(--gold);
-      border-radius: 6px;
+      color: var(--muted);
+      background: rgba(238, 242, 255, 0.58);
+      border-left: 4px solid var(--violet);
+      border-radius: 10px;
       font-size: 0.92rem;
       line-height: 1.42;
     }
@@ -1121,7 +1158,7 @@
       padding: 14px;
       background: var(--panel);
       border: 1px solid var(--line);
-      border-radius: 8px;
+      border-radius: 14px;
       font-family: var(--mono);
       font-size: 0.72rem;
       color: var(--muted);
@@ -1148,7 +1185,7 @@
       padding: 13px;
       background: rgba(255, 255, 255, 0.7);
       border: 1px solid var(--line);
-      border-radius: 8px;
+      border-radius: 14px;
     }
 
     .mini-item b {
@@ -1170,22 +1207,25 @@
 
     .transfer {
       padding: 18px;
-      color: #f8faf7;
-      background: var(--black);
-      border-radius: 8px;
+      color: var(--ink);
+      background: #ffffff;
+      border: 1px solid var(--line);
+      border-radius: 14px;
       min-height: 160px;
+      box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
+      transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
     }
 
     .transfer:nth-child(2) {
-      background: var(--blue);
+      background: #ffffff;
     }
 
     .transfer:nth-child(3) {
-      background: var(--red);
+      background: #ffffff;
     }
 
     .transfer:nth-child(4) {
-      background: var(--teal);
+      background: #ffffff;
     }
 
     .transfer .big {
@@ -1195,19 +1235,24 @@
       font-size: 2.15rem;
       font-weight: 800;
       line-height: 1;
+      background: linear-gradient(135deg, #4f46e5, #ec4899);
+      -webkit-background-clip: text;
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
     }
 
     .transfer p {
       margin: 0;
-      color: rgba(248, 250, 247, 0.82);
+      color: var(--muted);
       font-size: 0.92rem;
     }
 
     .citation-panel {
       padding: 22px;
-      background: rgba(255, 255, 255, 0.72);
+      background: #ffffff;
       border: 1px solid var(--line);
-      border-radius: 8px;
+      border-radius: 16px;
+      box-shadow: var(--shadow);
     }
 
     .citation-panel h3 {
@@ -1228,8 +1273,8 @@
       margin: 16px 0 0;
       padding: 16px;
       color: #f8faf7;
-      background: var(--black);
-      border-radius: 8px;
+      background: #0f172a;
+      border-radius: 14px;
     }
 
     .citation-box code {
@@ -1242,7 +1287,7 @@
     .footer {
       margin-top: 80px;
       padding: 32px 0 44px;
-      border-top: 2px solid var(--line-strong);
+      border-top: 1px solid var(--line);
       color: var(--muted);
       font-family: var(--mono);
       font-size: 0.75rem;
@@ -2058,13 +2103,13 @@
   <script>
     const methodComparison = {
       methods: [
-        { key: "NoSkill", label: "No skill", color: "#7a8290" },
-        { key: "Human", label: "Human skill", color: "#a77bd8" },
-        { key: "LLM", label: "LLM skill", color: "#5a9bdc" },
-        { key: "Trace", label: "Trace2Skill", color: "#8aa9c9" },
-        { key: "TextGrad", label: "TextGrad", color: "#d95b50" },
-        { key: "GEPA", label: "GEPA", color: "#d7b646" },
-        { key: "Ours", label: "SkillOpt", color: "#87d996" }
+        { key: "NoSkill", label: "No skill", color: "#94a3b8" },
+        { key: "Human", label: "Human skill", color: "#7c3aed" },
+        { key: "LLM", label: "LLM skill", color: "#4f46e5" },
+        { key: "Trace", label: "Trace2Skill", color: "#0ea5e9" },
+        { key: "TextGrad", label: "TextGrad", color: "#ec4899" },
+        { key: "GEPA", label: "GEPA", color: "#f59e0b" },
+        { key: "Ours", label: "SkillOpt", color: "#16a34a" }
       ],
       benches: [
         {