url/SkillOpt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Restyle project page after SkillLens

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