/* The landing page wears the workspace's own look (src/web/style.css): system sans
   for text, the manuscript's TeX Gyre Pagella for headings, Inconsolata for code,
   neutral greys and one blue. The hero backdrop repeats the gradient behind the
   README screenshots and the demo. */
@font-face{font-family:"Paper Serif";src:url("fonts/TeXGyrePagellaX-Regular.otf") format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:"Paper Serif";src:url("fonts/TeXGyrePagellaX-Bold.otf") format("opentype");font-weight:700;font-display:swap}
@font-face{font-family:"Paper Serif";src:url("fonts/TeXGyrePagellaX-Italic.otf") format("opentype");font-style:italic;font-display:swap}
@font-face{font-family:"Paper Mono";src:url("fonts/Inconsolatazi4-Regular.otf") format("opentype");font-weight:400;font-display:swap}
:root{
  --serif:"Paper Serif","TeX Gyre Pagella",Palatino,"Palatino Linotype","Songti SC","Noto Serif CJK SC",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI","PingFang SC","Hiragino Sans GB","Noto Sans SC",system-ui,sans-serif;
  --mono:"Paper Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --bg:#ffffff;--bg-subtle:#fafafa;--bg-muted:#f4f4f4;--bg-hover:#efefef;
  --line:#e8e8e8;--line-strong:#d6d6d6;
  --text:#171717;--text-2:#525252;--text-3:#8a8a8a;
  --accent:#2563eb;--accent-hover:#1d4ed8;--accent-soft:#eff6ff;--accent-line:#bfdbfe;
  --green:#15803d;
  --backdrop:linear-gradient(135deg,#e3ebfd 0%,#f7f8fb 50%,#e9e7fd 100%);
  --r:8px;--r-md:10px;--r-lg:14px;--r-xl:18px;
  --shadow-xs:0 1px 2px rgb(0 0 0/.06);
  --shadow-sm:0 1px 2px rgb(0 0 0/.05),0 3px 8px rgb(0 0 0/.05);
  --float:0 2px 4px rgb(0 0 0/.04),0 14px 36px rgb(0 0 0/.13);
  --ring:0 0 0 3px rgb(37 99 235/.18);
  --wrap:1120px;
  font:16px/1.6 var(--sans);color:var(--text);background:var(--bg);font-synthesis:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color-scheme:light;font-kerning:normal;
  scroll-behavior:smooth;scroll-padding-top:76px;
}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg)}
h1,h2,h3,p,ol,ul,figure,pre{margin:0}
h1,h2{font-family:var(--serif);font-weight:400;letter-spacing:-.012em;text-wrap:balance}
img,video{display:block;max-width:100%;height:auto}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
button,a{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::selection{background:rgb(37 99 235/.18)}
code{font-family:var(--mono);font-variant-ligatures:none}
p code,li code{font-size:.94em;padding:1px 5px;border-radius:5px;background:var(--bg-muted);border:1px solid var(--line);white-space:nowrap}
.wrap{width:min(100% - 32px,var(--wrap));margin-inline:auto}

/* Both languages are in the page; <html lang> picks the one shown. CJK headings
   fall back to Songti and need no tightening. */
html[lang=en] [lang=zh-CN],html[lang=zh-CN] [lang=en]{display:none!important}
html[lang=zh-CN] :is(h1,h2,h3,.brand){letter-spacing:0}
html[lang=zh-CN] .hero h1{line-height:1.18}

/* Buttons, as in the workspace */
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border:1px solid transparent;border-radius:var(--r-md);font-size:15px;font-weight:500;white-space:nowrap;text-decoration:none;transition:background-color .15s,border-color .15s,box-shadow .15s}
.button:hover{text-decoration:none}
.button.compact{height:34px;padding:0 13px;font-size:14px;border-radius:var(--r)}
.primary{background:var(--accent);color:#fff;box-shadow:var(--shadow-xs)}
.primary:hover{background:var(--accent-hover)}
.secondary{background:var(--bg);border-color:var(--line-strong);color:var(--text);box-shadow:var(--shadow-xs)}
.secondary:hover{background:var(--bg-subtle);border-color:#c4c4c4}

/* Top bar */
.topbar{position:sticky;top:0;z-index:10;background:rgb(255 255 255/.82);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--line)}
.topbar-inner{display:flex;align-items:center;gap:28px;height:60px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--text);font:400 21px/1 var(--serif);letter-spacing:-.005em}
.brand:hover{text-decoration:none}
.brand-mark{width:26px;height:26px}
.nav{display:flex;gap:4px;flex:1}
.nav a{padding:6px 11px;border-radius:var(--r);font-size:14.5px;color:var(--text-2);transition:background-color .15s,color .15s}
.nav a:hover{background:var(--bg-hover);color:var(--text);text-decoration:none}
.topbar-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.lang-switch{display:flex;gap:2px;padding:3px;border-radius:var(--r-md);background:var(--bg-muted)}
.lang-switch[hidden]{display:none}
.lang-switch>button{height:28px;padding:0 10px;border-radius:7px;font-size:13px;font-weight:500;color:var(--text-2);transition:background-color .15s,color .15s,box-shadow .15s}
.lang-switch>button:hover{color:var(--text)}
.lang-switch>button[aria-pressed=true]{background:var(--bg);color:var(--text);box-shadow:0 1px 2px rgb(0 0 0/.1),0 0 0 .5px rgb(0 0 0/.06)}

/* Hero */
.hero{background:var(--backdrop);padding:76px 0 88px;border-bottom:1px solid var(--line)}
.hero-copy{display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-mark{width:76px;height:76px;margin-bottom:26px}
.hero h1{font-size:clamp(40px,6.4vw,70px);line-height:1.04;color:var(--text)}
.lede{margin-top:22px;max-width:34em;font-size:clamp(17px,2.1vw,20px);line-height:1.5;color:var(--text-2)}
.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:34px}
.install{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 6px 0 16px;border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--bg);box-shadow:var(--shadow-xs)}
.install code{font-size:16px;color:var(--text);white-space:nowrap}
.prompt{color:var(--text-3);user-select:none;-webkit-user-select:none}
.copy{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:var(--r);color:var(--text-3);transition:background-color .15s,color .15s}
.copy:hover{background:var(--bg-hover);color:var(--text)}
.copy>svg{grid-area:1/1}
.copy .icon-check,.copy.copied .icon-copy{display:none}
.copy.copied .icon-check{display:block;color:var(--green)}
.works-with{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 16px;margin-top:22px;font-size:14px;color:var(--text-3)}
.agent{display:inline-flex;align-items:center;gap:7px;color:var(--text-2);font-weight:500}
.agent::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--dot)}
.agent.codex{--dot:#10a37f}
.agent.claude{--dot:#d97757}
.agent.antigravity{--dot:#4285f4}
.demo{margin-top:56px;border-radius:var(--r-xl);overflow:hidden;border:1px solid rgb(0 0 0/.06);box-shadow:var(--float);background:#f7f8fb}
.demo video{width:100%;aspect-ratio:1200/750}

/* Statement */
.statement{padding:92px 0 20px}
.statement p{max-width:840px;margin-inline:auto;text-align:center;font:400 clamp(22px,2.8vw,29px)/1.5 var(--serif);color:var(--text-2);text-wrap:pretty}
.statement strong{font-weight:400;color:var(--text);background:linear-gradient(transparent 62%,var(--accent-soft) 62%,var(--accent-soft) 94%,transparent 94%)}

/* Sections */
.section{padding:96px 0}
.muted-band{background:var(--bg-subtle);border-block:1px solid var(--line)}
.section-head{max-width:680px;margin:0 auto 56px;text-align:center}
.eyebrow{font-size:13.5px;font-weight:600;letter-spacing:.02em;color:var(--accent)}
.section h2{margin-top:10px;font-size:clamp(32px,4.2vw,44px);line-height:1.12}
.section-head>p:not(.eyebrow){margin-top:16px;font-size:17px;color:var(--text-2)}

/* Features */
.feature{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:64px}
.feature+.feature{margin-top:104px}
.feature.flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.feature.flip .feature-text{order:2}
.step{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--accent)}
.step-num{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;font-size:12.5px;font-variant-numeric:tabular-nums}
.feature h3{margin-top:14px;font:400 32px/1.15 var(--serif);letter-spacing:-.01em}
.feature-text>p:not(.step){margin-top:14px;font-size:17px;color:var(--text-2)}
.checks{list-style:none;padding:0;margin-top:22px;display:grid;gap:10px}
.checks li{position:relative;padding-left:28px;font-size:15px;color:var(--text-2)}
.checks li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat}
.shot{width:100%;border-radius:var(--r-xl);border:1px solid rgb(0 0 0/.06);box-shadow:var(--float)}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.card{padding:24px 22px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg);box-shadow:var(--shadow-xs)}
.card-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:var(--r-md);background:var(--accent-soft);color:var(--accent)}
.card h3{margin-top:18px;font-size:16px;font-weight:600;line-height:1.35}
.card p{margin-top:8px;font-size:14.5px;line-height:1.6;color:var(--text-2)}

/* Agents */
.agents{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.agent-card{padding:26px 24px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg);box-shadow:var(--shadow-sm)}
.agent-card h3{font-size:19px;font-weight:600}
.agent-card h3 .agent{color:var(--text);font-weight:600}
.agent-card h3 .agent::before{width:10px;height:10px}
.sign-in{margin-top:14px;padding:10px 12px;border-radius:var(--r);background:var(--bg-subtle);border:1px solid var(--line);font-size:14px;color:var(--text-2)}
.sign-in code{background:var(--bg)}
.agent-card>p:last-child{margin-top:14px;font-size:14.5px;color:var(--text-2)}

/* Quick start */
.start{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.start h2{max-width:13em}
.steps{list-style:none;padding:0;margin-top:30px;display:grid;gap:20px;counter-reset:step}
.steps li{position:relative;padding-left:42px;font-size:15.5px;color:var(--text-2);counter-increment:step}
.steps li::before{content:counter(step);position:absolute;left:0;top:0;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--accent-line);background:var(--accent-soft);color:var(--accent);font-size:13.5px;font-weight:600}
.steps strong,.steps b{color:var(--text);font-weight:600}
.terminal{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg);box-shadow:var(--float);overflow:hidden}
.terminal-bar{display:flex;align-items:center;gap:12px;height:42px;padding:0 6px 0 14px;border-bottom:1px solid var(--line);background:var(--bg-subtle);font-size:13px;color:var(--text-3)}
.terminal-title{flex:1}
.lights{display:flex;gap:7px}
.lights i{width:11px;height:11px;border-radius:50%;background:#ff5f57}
.lights i:nth-child(2){background:#febc2e}
.lights i:nth-child(3){background:#28c840}
.terminal pre{padding:20px 20px 22px;overflow-x:auto;font-size:16px;line-height:1.75;color:var(--text)}
.output{color:var(--text-3)}

/* Closing call to action */
.cta{padding:72px 24px;border-radius:var(--r-xl);background:var(--backdrop);border:1px solid var(--line);text-align:center}
.cta h2{margin-top:0}
.cta p{margin-top:12px;font-size:17px;color:var(--text-2)}
.cta-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px}

/* Footer */
.footer{border-top:1px solid var(--line);padding:30px 0 calc(30px + env(safe-area-inset-bottom))}
.footer-inner{display:flex;align-items:center;gap:28px;font-size:14px;color:var(--text-3)}
.footer .brand{font-size:18px}
.footer .brand-mark{width:22px;height:22px}
.footer nav{display:flex;flex-wrap:wrap;gap:4px 20px;flex:1}
.footer nav a{color:var(--text-2)}

@media(max-width:960px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feature,.feature.flip{grid-template-columns:minmax(0,1fr);gap:32px}
  .feature.flip .feature-text{order:0}
  .feature+.feature{margin-top:80px}
  .feature-text{max-width:600px}
  .agents{grid-template-columns:minmax(0,1fr)}
  .start{grid-template-columns:minmax(0,1fr);gap:40px}
}
@media(max-width:720px){
  .nav{display:none}
  .topbar-inner{gap:10px}
  .hero{padding:52px 0 56px}
  .hero-mark{width:60px;height:60px;margin-bottom:20px}
  .hero h1 [lang=en] br{display:none}
  .hero-actions{flex-direction:column;align-items:stretch;width:100%;max-width:360px}
  .install{justify-content:space-between}
  .install code{font-size:15px}
  .demo{margin-top:40px;border-radius:var(--r-lg)}
  .statement{padding:64px 0 8px}
  .section{padding:72px 0}
  .section-head{margin-bottom:40px}
  .feature h3{font-size:28px}
  .shot{border-radius:var(--r-lg)}
  .cards{grid-template-columns:minmax(0,1fr)}
  .terminal pre{font-size:14px;padding:16px}
  .cta{padding:52px 20px}
  .footer-inner{flex-direction:column;align-items:flex-start;gap:14px}
}