/* NEXA homepage: an Agent network, light or dark as the system is until
   the visitor picks one with the ☀ / ☾ button (theme.js; review
   2026-10-16d, the same rule as the link page). Every style lives here: the page's CSP allows no inline
   styles. */
/* Colour roles: colour system v2 "Aurora" (zc 2026-10-16), shared with the
   app (pgclient web/static/app.css, docs/32-配色系统设计.html). Colour says
   only three things:
   --accent / --accent-text / --accent-hi / --acc  what you can press:
     buttons, links, highlights, focus rings, selection, eyebrows, CTAs,
     "Official" badges. Text on a solid --accent uses --accent-ink.
   --k-sk / --k-ag / --k-pe   what something is, one colour per kind, on one
     aurora: cyan = skill, purple = Agent (the brand), magenta = person; one
     lightness and the highest chroma the screen holds, so none looks duller.
   --ok / --warn   how it is going (the live dot is --ok).
   --net / --nc   decoration only (the background mesh and glow): a quiet
     blue-grey, never a meaning of its own. It used to be the aurora's cyan
     end (#09E1F3), which read as "skill" next to --k-sk (review 2026-10-16d).
   Agent purple and the button purple are one hue: an Agent is never a
   solid purple shape (outlines, text, small dots only); solid purple is
   only for buttons.
   Neutrals carry a trace of the brand purple. Every text pair is at least
   4.5:1 (body) or 3:1 (large text, UI). */
:root{--bg:#080912;--panel-2:#0A0E1A;--ink:#EDEEF5;--ink-2:#CDD0E2;--muted:#A0A3B5;--dim:#888B9C;
  --accent:#9B8AFF;--accent-2:#BAB3FD;--accent-ink:#0B0820;--accent-text:#BAB3FD;--accent-hi:#D4CFFF;--acc:155,138,255;
  --net:#8E9BBF;--nc:142,155,191;--k-sk:#00CFE8;--k-ag:#9B8AFF;--k-pe:#FB7BDA;--warn:#FEBD5B;--ok:#4BDE81;
  --l:150,150,255;--pn:16,18,30;--wc:254,189,91;
  --grid-c:rgba(140,130,255,.06);--mesh-line:rgba(150,140,255,.16);--node-fill:#0F111C;--node-stroke:rgba(160,150,255,.35);
  --no-ink:#8C96B2;--notif-bg:rgba(7,10,18,.7);--term-ink:#DCE3F5;--dot:#2A3350;--sel-ink:#fff;--shadow:rgba(0,0,0,.55);
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;color-scheme:dark}
/* Derived colours are declared wherever their inputs change (the root, and
   the console, the terminal and the offer demo, which stay dark on the
   light page). */
:root,.console,.prompt,.inbound{--panel:rgba(var(--pn),.8);--line:rgba(var(--l),.14);--line-2:rgba(var(--l),.22);--accent-soft:rgba(var(--acc),.08);--accent-line:rgba(var(--acc),.4)}
/* Light (the system's, or the visitor's pick): a light page with the app's deeper
   purple and a deeper cyan for text; the console, the terminal box and the
   offer demo keep their dark colours. */
:root[data-theme="light"]{--bg:#F6F6FB;--ink:#131524;--ink-2:#2E3145;--muted:#505469;--dim:#5E6277;
  --accent:#724DE7;--accent-2:#6851C3;--accent-ink:#FFFFFF;--accent-text:#6851C3;--accent-hi:#4F26B0;--acc:114,77,231;
  --net:#56627F;--nc:86,98,127;--k-sk:#007796;--k-ag:#6851C3;--k-pe:#A3378A;--warn:#8C5E08;--ok:#097E40;
  --l:70,60,160;--pn:255,255,255;--wc:140,94,8;
  --grid-c:rgba(60,50,150,.07);--mesh-line:rgba(70,60,170,.18);--node-fill:#FFFFFF;--node-stroke:rgba(70,60,170,.38);
  --accent-lg:#724DE7;--no-ink:#5F6A87;--notif-bg:rgba(255,255,255,.92);--sel-ink:#0D1324;--shadow:rgba(20,30,70,.22);color-scheme:light}
[data-theme="light"] .console,[data-theme="light"] .prompt,[data-theme="light"] .inbound{--ink:#EDEEF5;--ink-2:#CDD0E2;--muted:#A0A3B5;--dim:#888B9C;
  --accent:#9B8AFF;--accent-2:#BAB3FD;--accent-ink:#0B0820;--accent-text:#BAB3FD;--accent-hi:#D4CFFF;--acc:155,138,255;
  --net:#8E9BBF;--nc:142,155,191;--k-sk:#00CFE8;--k-ag:#9B8AFF;--k-pe:#FB7BDA;--warn:#FEBD5B;--ok:#4BDE81;
  --l:150,150,255;--pn:16,18,30;--wc:254,189,91;--sel-ink:#fff;color:var(--ink)}
/* Opaque on the light page: at .92/.96 the light page showed through and
   the muted text inside dropped under 4.5:1 (review 1017b). */
[data-theme="light"] .console,[data-theme="light"] .inbound{background:linear-gradient(180deg,#101628,#0A0E1A)}
[data-theme="light"] .pane{box-shadow:0 1px 2px rgba(20,30,70,.04),0 8px 24px rgba(20,30,70,.05)}
*{box-sizing:border-box}
/* The background mesh is drawn wider than a phone (slice): clip it at the
   page edge so it never adds a sideways scroll (320 px English, 10-16). */
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.7 -apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;-webkit-font-smoothing:antialiased;position:relative;overflow-x:hidden}
a{color:var(--accent-text);text-decoration:none}
/* Keyboard focus and selected text: browser defaults were faint on the
   dark page. */
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
::selection{background:rgba(var(--acc),.30);color:var(--sel-ink)}
a:hover{color:var(--accent-hi)}
.mono{font-family:var(--mono)}
.wrap{max-width:1200px;margin:0 auto;padding-inline:32px}
svg{flex:none}

/* background: grid + glow + agent mesh, behind the first screen */
.bg{position:absolute;inset:0 0 auto 0;height:980px;pointer-events:none;overflow:hidden;z-index:0}
.grid{position:absolute;inset:0;background-image:linear-gradient(var(--grid-c) 1px,transparent 1px),linear-gradient(90deg,var(--grid-c) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.glow{position:absolute;left:50%;top:-260px;width:1100px;height:700px;margin-left:-550px;background:radial-gradient(closest-side,rgba(var(--acc),.12),rgba(var(--nc),.05) 55%,transparent)}
.mesh{position:absolute;inset:0;width:100%;height:100%;opacity:.9;-webkit-mask-image:radial-gradient(ellipse 32% 50% at 30% 42%,rgba(0,0,0,.1) 60%,#000 100%);mask-image:radial-gradient(ellipse 32% 50% at 30% 42%,rgba(0,0,0,.1) 60%,#000 100%)} /* nodes and lines stay off the hero text (review 2026-10-20) */
@media (max-width:900px){.mesh{-webkit-mask-image:radial-gradient(ellipse 75% 55% at 45% 40%,rgba(0,0,0,.12) 60%,#000 100%);mask-image:radial-gradient(ellipse 75% 55% at 45% 40%,rgba(0,0,0,.12) 60%,#000 100%)}}
[data-theme="light"] .mesh{opacity:.45}
.mesh-lines path{fill:none;stroke:var(--mesh-line);stroke-width:1}
.mesh-nodes circle{fill:var(--node-fill);stroke:var(--node-stroke);stroke-width:1.2}
/* packets on the background mesh: network traffic, and the brand purple */
.p-a{fill:var(--net)}.p-b{fill:var(--accent)}
header,main,footer{position:relative;z-index:1}
header{z-index:2} /* the phone menu opens over main (review 2026-10-17) */

/* top bar */
.top{border-bottom:1px solid rgba(var(--l),.10)}
.top-row{display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand-name{font-weight:700;font-size:18px;letter-spacing:.06em}
.brand-tag{font-size:11px;color:var(--dim);letter-spacing:.08em;padding-left:10px;border-left:1px solid var(--line-2)}
.navlinks{display:flex;gap:28px;font-size:14px}
.navlinks a{color:var(--muted)}
.navlinks a:hover{color:var(--ink)}
.top-right{display:flex;align-items:center;gap:12px}
.status{display:inline-flex;align-items:center;min-height:36px;box-sizing:border-box;gap:8px;font-size:12px;color:var(--muted);padding:6px 12px;border:1px solid var(--line-2);border-radius:999px;background:rgba(var(--pn),.7)}
.live{width:7px;height:7px;border-radius:50%;background:var(--ok);animation:pulse 2s infinite} /* live = a status: the success green */
.lang{min-width:44px;min-height:36px;border-radius:8px;border:1px solid var(--line-2);background:transparent;color:var(--ink-2);font:600 12px/1 var(--mono);cursor:pointer}
.lang:hover{border-color:var(--accent-line);color:var(--ink)}
.theme{min-width:36px;font-size:15px}
/* The phone menu (below 720px, where the section links do not fit):
   a details element, no script needed. */
.menu{position:relative;display:none}
.menu>summary{list-style:none;display:inline-grid;place-items:center;min-width:36px}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.menu-list{position:absolute;right:0;top:calc(100% + 8px);z-index:5;display:flex;flex-direction:column;min-width:200px;padding:6px;border-radius:12px;border:1px solid var(--line-2);background:var(--bg);box-shadow:0 12px 32px var(--shadow)}
.menu-list a{padding:10px 12px;border-radius:8px;font-size:15px;color:var(--ink-2)}
.menu-list a:hover{background:rgba(var(--acc),.08);color:var(--ink)}
/* A link to another page among the section links: marked, and last. */
.ext::after{content:" \2197";font-size:.85em;color:var(--dim)}

/* hero */
.hero-sec{padding:88px 0 96px}
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:28px}
.eyebrow{display:inline-block;max-width:100%;align-self:flex-start;font-size:12px;letter-spacing:.14em;color:var(--accent-text);padding:6px 12px;border:1px solid rgba(var(--acc),.3);border-radius:6px;background:linear-gradient(rgba(var(--acc),.07),rgba(var(--acc),.07)),var(--bg)}
.eyebrow-a,.eyebrow-b{font-size:12px;letter-spacing:.14em;color:var(--accent-text)}
p,.eg,.in span{text-wrap:pretty}
/* Chinese example text is prose, not code: no monospace (URLs and code keep it). */
.eg.mono,.in.mono{font-family:inherit}
html[lang^="zh"] .eyebrow,html[lang^="zh"] .eyebrow-a,html[lang^="zh"] .eyebrow-b{font-family:inherit;letter-spacing:.08em}
h1{margin:0;font-size:52px;line-height:1.12;font-weight:750;letter-spacing:-.01em;text-wrap:balance}
.accent{color:var(--accent-lg,var(--accent-text))}
@media (min-width:901px){html[lang^="zh"] h1 .nw{white-space:nowrap}}
.lede{margin:0;font-size:18px;line-height:1.7;color:var(--muted);max-width:34em;text-wrap:pretty}
html[lang^="zh"] .lede{word-break:keep-all;overflow-wrap:anywhere}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer}
.btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent-2);color:var(--accent-ink)}
/* The hero's copy button keeps one width: the label and an invisible copy
   of the copied label share a grid cell. Copied, it takes the same look as
   the install card's copy button (tinted cyan, outlined) and shows the
   copied label centred over the whole button with a tick. */
#hero-copy{position:relative;transition:background-color .2s,color .2s,box-shadow .2s}
.hc{display:inline-grid}
.hc>span{grid-area:1/1;white-space:nowrap}
.hc-sizer{visibility:hidden;padding-left:24px}
#hero-copy{max-width:100%}
.hc-done{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;visibility:hidden}
.hc-done svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
#hero-copy.done{background:rgba(var(--acc),.16);box-shadow:inset 0 0 0 1px rgba(var(--acc),.7);color:var(--accent-hi)}
#hero-copy.done:hover{color:var(--accent-hi);filter:none}
#hero-copy.done .hc-idle,#hero-copy.done .hc-arrow{visibility:hidden}
#hero-copy.done .hc-done{visibility:visible}

/* live negotiation console */
.console{margin:0;position:relative;border-radius:16px;border:1px solid rgba(var(--l),.18);background:linear-gradient(180deg,rgba(16,22,40,.92),rgba(10,14,26,.96));box-shadow:0 30px 80px var(--shadow);overflow:hidden}
.console-bar{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid rgba(var(--l),.12)}
.dots{display:flex;gap:7px}
.dots i{width:10px;height:10px;border-radius:50%;background:var(--dot)}
.console-title{font-size:12px;color:var(--dim);letter-spacing:.06em}

/* sections */
.sec{padding:88px 0;border-top:1px solid rgba(var(--l),.08)}
.stack{display:flex;flex-direction:column;gap:40px}
.sec-head{display:flex;flex-direction:column;gap:10px}
h2{margin:0;font-size:34px;line-height:1.3;font-weight:700;text-wrap:balance}
h3{margin:0;font-size:20px;line-height:1.4}
.ic-a,.ic-b{width:22px;height:22px;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ic-a,.ic-b{stroke:var(--accent-text)}

/* three steps */

/* where data goes */

/* install + download: two matched panes */
.two{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:24px;align-items:stretch}
.pane{display:flex;flex-direction:column;gap:16px;padding:28px;border-radius:16px;border:1px solid rgba(var(--l),.16);background:var(--panel)}
.pane-a{border-color:rgba(var(--acc),.3)}
.pane-head{display:flex;align-items:center;gap:10px}
.pane-head h3{min-width:0}
.pane-head svg{width:20px;height:20px}
.pill{margin-left:auto;font-size:11px;color:var(--accent-text);padding:3px 8px;border-radius:999px;border:1px solid var(--accent-line);line-height:1.5}
.pane-lede{margin:0;font-size:14px;line-height:1.7;color:var(--muted)}
.prompt{flex:none;display:flex;flex-direction:column;border-radius:12px;border:1px solid var(--line-2);background:var(--panel-2);overflow:hidden;transition:border-color .2s,box-shadow .2s}
.term-bar{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 16px;border-bottom:1px solid rgba(var(--l),.12);font-size:12px;color:var(--dim)}
.term-bar a{font-size:11px;color:var(--dim)}
.term-bar a:hover{color:var(--accent-text)}
.prompt-text{flex:1;margin:0;padding:16px 16px 14px;font-size:13px;line-height:1.75;color:var(--term-ink);overflow-wrap:anywhere;user-select:all}
.prompt-text::before{content:"$ ";color:var(--accent-text)}
.prompt-text .url .seg{white-space:nowrap}
/* The two install cards end alike (zc 2026-10-16: the copy button as wide
   as the download one): one full-width button at the bottom of each, on the
   same line. What happened (copied / selected) is said in the button itself,
   so the card never grows (zc 2026-10-16). */
.prompt-foot{display:flex;flex-direction:column;align-items:stretch;min-height:44px;margin-top:auto}
/* The words of the install sentence that are NEXA's own, explained. */
/* What the hero button copies, before anyone clicks (review 2026-10-16d). */
.prompt-foot .copy{width:100%}
.dl-body{margin-top:auto}
.prompt-foot[hidden]{display:none}
.copy{flex:none;display:inline-grid;align-items:center;min-width:132px;min-height:44px;border-radius:10px;border:1px solid transparent;background:var(--accent);color:var(--accent-ink);font-weight:600;font-size:15px;line-height:1;font-family:inherit;padding:0 16px;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s,transform .12s}
.copy:hover{filter:brightness(1.08)}
.copy:active{transform:scale(.97)}
.copy>span{grid-area:1/1;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 0;line-height:1.3;text-align:center;transition:opacity .15s}
.copy b{font-weight:inherit}
.copy svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.copy .s-done,.copy .s-fail,.done .copy .s-idle,.fail .copy .s-idle{opacity:0}
.done .copy .s-done,.fail .copy .s-fail{opacity:1}
.pane-a.done .prompt{border-color:rgba(var(--acc),.65);box-shadow:0 0 0 3px rgba(var(--acc),.12)}
.done .copy{background:rgba(var(--acc),.16);border-color:rgba(var(--acc),.7);color:var(--accent-hi)}
.pane-a.fail .prompt{border-color:rgba(var(--wc),.6)}
.fail .copy{background:rgba(var(--wc),.14);border-color:rgba(var(--wc),.6);color:var(--warn)}
.howto{flex:1;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.howto li{display:flex;gap:12px;font-size:14px;line-height:1.6;color:var(--ink-2)}
.howto li>.mono{flex:none;width:24px;height:24px;border-radius:6px;display:grid;place-items:center;font-size:12px;color:var(--accent-text);border:1px solid rgba(var(--acc),.4)}
.dl-body{display:flex;flex-direction:column;gap:12px}
.btn-dl{width:100%;background:rgba(var(--acc),.12);border:1px solid var(--accent-line);color:var(--ink)}
.btn-dl:hover{color:var(--ink);background:rgba(var(--acc),.2)}
.meta{margin:0;font:11px/1.8 var(--mono);color:var(--dim);overflow-wrap:anywhere}
/* The version line stays one line (home.js fitMeta drops the chip part,
   then steps the type down, where the card is narrow). */
.dl-meta{white-space:nowrap;overflow-wrap:normal}
.dl-meta.tight .dl-arch{display:none}
.dl-meta.tighter{font-size:10px}
/* The SHA-256, one quiet line (home.js shaLine): a small tag, the digits
   (shortened with ... in the middle when the card is narrow), and the copy
   action at the right end. Copied, the whole line takes the copy buttons'
   purple and the action says 已复制; its three labels share one cell, so
   nothing moves. Only where the browser will not copy does the full value
   wrap and get selected for copying by hand. */
.sha{position:relative;display:flex;align-items:center;gap:10px;width:100%;min-height:32px;margin:0;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:rgba(var(--l),.03);text-align:left;font:11px/1.6 var(--mono);color:var(--dim);cursor:pointer;transition:border-color .15s,background-color .15s,color .15s}
.sha:hover{border-color:var(--accent-line)}
.sha:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sha-k{flex:none;font-size:10px;letter-spacing:.06em;padding:1px 6px;border-radius:4px;color:var(--muted);background:rgba(var(--l),.06)}
.sha-box{flex:1;min-width:0;overflow:hidden;white-space:nowrap}
.sha-v{font-size:11px;color:var(--ink-2)}
.sha:hover .sha-v{color:var(--ink)}
.sha-act{flex:none;display:inline-grid;font-size:11px;color:var(--accent-text)}
.sha-act>span{grid-area:1/1;display:inline-flex;align-items:center;justify-content:flex-end;gap:5px;white-space:nowrap;transition:opacity .15s}
.sha-act svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sha .a-done,.sha .a-fail,.sha.done .a-idle,.sha.fail .a-idle{opacity:0}
.sha.done .a-done,.sha.fail .a-fail{opacity:1}
.sha.done{border-color:rgba(var(--acc),.7);background:rgba(var(--acc),.12)}
.sha.done .sha-k{color:var(--accent-text);background:rgba(var(--acc),.16)}
.sha.done .sha-v{color:var(--ink)}
.sha.done .sha-act{color:var(--accent-hi)}
.sha.fail{border-color:rgba(var(--wc),.6);background:rgba(var(--wc),.08)}
.sha.fail .sha-act{color:var(--warn)}
.sha.full{align-items:flex-start;padding-top:6px;padding-bottom:6px}
.sha.full .sha-box{white-space:normal}.sha.full .sha-v{overflow-wrap:anywhere;user-select:all}
@media (prefers-reduced-motion:reduce){.sha,.sha-act>span{transition:none}}
.muted{margin:0;font-size:14px;color:var(--muted)}
.warn{margin:0;font-size:13px;line-height:1.6;color:var(--warn);background:rgba(var(--wc),.08);border:1px solid rgba(var(--wc),.3);border-radius:10px;padding:10px 12px}
.alt{margin:0;font-size:13px;color:var(--muted)}

footer{border-top:1px solid rgba(var(--l),.08)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-block:28px;font-size:12px;color:var(--dim)}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 16px}
@media (max-width:900px){body:not(.aidir) .foot{flex-direction:column;align-items:flex-start;gap:8px}}
@media (min-width:1180px){body:not(.aidir) .foot{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}body:not(.aidir) .foot>:last-child{justify-self:end}}

@keyframes blink{50%{opacity:0}}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 55%,transparent)}70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* One colour per kind of resource, everywhere on the page (homepage v3,
   zc 2026-10-13; colours since 10-16 follow the app): --k-sk skill, --k-ag Agent, --k-pe person. */
.k-sk{color:var(--k-sk)}.k-ag{color:var(--k-ag)}.k-pe{color:var(--k-pe)}
h1 .dim{color:var(--muted);font-weight:650}
/* A phone breaks the Chinese line after "你的 AI", not inside "只在电脑里干活". */
html[lang^="zh"] h1 .keep{white-space:nowrap}
.hero.v3{align-items:start}

/* try before installing: matches the public resource list in this browser */
.try{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:14px;border:1px solid var(--accent-line);background:linear-gradient(180deg,rgba(var(--acc),.07),rgba(var(--acc),.02)),rgb(var(--pn));box-shadow:0 18px 50px rgba(var(--acc),.07)}
.try[hidden]{display:none}
.try-label{font-size:14px;font-weight:600;color:var(--ink)}
.try-row{display:flex;gap:8px}
.try input{flex:1;min-width:0;min-height:48px;border-radius:10px;border:1px solid var(--line-2);background:rgba(var(--pn),.9);color:var(--ink);font-size:15px;line-height:1.4;font-family:inherit;padding:0 14px;outline:none}
.try input:focus{border-color:var(--accent)}
.try input::placeholder{color:var(--dim)}
.try .btn{min-height:48px;white-space:nowrap}
/* One filled button above the fold (install); search is the outlined one. */
.btn-try{border:1px solid var(--accent-line);color:var(--ink);background:rgba(var(--acc),.12)}
.btn-try:hover{color:var(--ink);background:rgba(var(--acc),.2)}
.try-chips{display:flex;flex-wrap:wrap;gap:6px}
.try-all{align-self:flex-start;font-size:13.5px}
.try-chips button{font-size:13px;line-height:1.4;font-family:inherit;color:var(--ink-2);background:transparent;border:1px solid var(--line-2);border-radius:999px;padding:5px 11px;cursor:pointer}
.try-chips button:hover{border-color:var(--accent-line);color:var(--ink)}
.try-note{margin:0;font-size:11.5px;line-height:1.5;color:var(--dim)}
.found{display:flex;flex-direction:column;gap:8px}
.found:empty{display:none}
.found-head{display:flex;justify-content:space-between;gap:10px;font:11px/1.5 var(--mono);color:var(--dim)}
.fr{display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:12px;align-items:start;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:rgba(var(--pn),.75);color:var(--ink);animation:drop .35s ease both}
a.fr:hover{color:var(--ink);border-color:var(--accent-line)}
.fr .dot{width:8px;height:8px;border-radius:50%;background:currentColor}
.fr .t{display:block;font-size:14px;font-weight:600;line-height:1.4}
.fr .s{display:block;font-size:12.5px;line-height:1.5;color:var(--muted)}
.fr .tag{font:11px/1 var(--mono);padding:4px 8px;border-radius:999px;border:1px solid currentColor;white-space:nowrap}
.fr.k-sk{color:var(--k-sk)}.fr.k-ag{color:var(--k-ag)}.fr.k-pe{color:var(--k-pe)}.fr.k-rs{color:var(--dim)}
.fr .t{color:var(--ink)}
.fr.go{grid-template-columns:minmax(0,1fr) auto;border-style:dashed;border-color:var(--accent-line);background:transparent}
.fr.go .t{font-weight:500;color:var(--ink-2)}
.fr.d1{animation-delay:.08s}.fr.d2{animation-delay:.16s}.fr.d3{animation-delay:.24s}

.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.textlink{font-size:14px;color:var(--ink-2);border-bottom:1px dashed var(--line-2)}
.textlink:hover{color:var(--ink)}
/* What installing takes, as small tags: nothing to strand at a line end.
   A tag moves to the next row whole; only a tag wider than the whole row
   wraps inside its pill (English at 1024px ran past the column). */

/* hero console: the Agent going out for a skill, an Agent and a person */
/* The demo has a fixed height (two lines for the ask, three rows of
   answers), so nothing on the first screen moves while it plays; the copy is
   sized to about the same height in both languages and centred on it, so
   their top and bottom edges meet (zc 2026-10-13). */
/* The copy column is as tall as the example window: the eyebrow on its top
   edge, the buttons on its bottom edge, the rest spread between (zc 2026-10-17). */
.hero.v3{align-items:stretch}
.hero.v3 .hero-copy{gap:22px;justify-content:space-between}
.points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:15px;line-height:1.5;color:var(--muted)}
.points li{display:grid;grid-template-columns:5.5em minmax(0,1fr);gap:12px;align-items:baseline}
html[lang^="zh"] .points li>span:last-child{word-break:keep-all;overflow-wrap:break-word} /* Chinese lines break after the comma, never mid-phrase */
html[lang="en"] .points li>span:last-child{text-wrap:balance}
html[lang="en"] .points li{grid-template-columns:7.4em minmax(0,1fr)}
.pt-k{font-weight:600;color:var(--ink);padding-left:12px;border-left:2px solid var(--k-sk);white-space:nowrap} /* "先谈条件", "Talks first" never break */
.points li:nth-child(2) .pt-k{border-color:var(--k-ag)}
.points li:nth-child(3) .pt-k{border-color:var(--k-pe)}
/* Chinese runs about 55px shorter than English at the same width: more air
   between its blocks brings both to the demo's height. */
html[lang^="zh"] .hero.v3 .hero-copy{gap:30px}
html[lang^="zh"] .points{gap:16px}
.hero.v3 .lede{text-wrap:balance}
.net{display:block;width:100%;height:92px;border-bottom:1px solid rgba(var(--l),.10)}
.net line{stroke:rgba(var(--l),.35);stroke-width:1;stroke-dasharray:3 4} /* neutral: the dots and the nodes carry the kind's colour */
.net .me{fill:rgba(var(--l),.12);stroke:var(--ink-2);stroke-width:1.2}
.net .n-sk{fill:color-mix(in srgb,var(--k-sk) 15%,transparent);stroke:var(--k-sk)}.net .n-ag{fill:color-mix(in srgb,var(--k-ag) 15%,transparent);stroke:var(--k-ag)}.net .n-pe{fill:color-mix(in srgb,var(--k-pe) 15%,transparent);stroke:var(--k-pe)}
.net .hl{stroke-width:2.4}
.net .lab{font:10px var(--mono);fill:var(--dim)}
.net .me-lab{fill:var(--ink-2);font-size:9.5px}
/* Packets in flight take the colour of where they go (zc 2026-10-16):
   each in its kind's colour (--k-sk / --k-ag / --k-pe). */
.pk circle{fill:var(--net)}
.pk .pk-sk{fill:var(--k-sk)}.pk .pk-ag{fill:var(--k-ag)}.pk .pk-pe{fill:var(--k-pe)}
.ask{margin:14px 18px 0;padding:10px 13px;border-radius:10px;border:1px solid rgba(var(--l),.2);background:rgba(var(--pn),.6);font-size:13px;line-height:1.6;color:var(--ink);height:64px;overflow:hidden}
.ask .who{color:var(--muted)}
.ask .caret{color:var(--accent-text);animation:blink 1s steps(1) infinite}
/* One line of counts, with the sample-data tag at its end. */
.work{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;padding:12px 18px 2px;font-size:12px;line-height:1.5;color:var(--dim)}
.work>span{display:inline-flex;gap:6px;white-space:nowrap;opacity:.35;transition:opacity .3s}
.work>span.on{opacity:1}
.work i{font-style:normal;color:var(--ink-2)}
.work b{font-weight:600;min-width:2.6em}
.work .w-sk b{color:var(--k-sk)}.work .w-ag b{color:var(--k-ag)}.work .w-pe b{color:var(--k-pe)}
.res{display:flex;flex-direction:column;gap:8px;padding:10px 18px 6px;height:236px;overflow:hidden}
.r{flex:none;height:66px;display:grid;grid-template-columns:4px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 12px;border-radius:10px;border:1px solid rgba(var(--l),.14);background:rgba(var(--pn),.55);animation:drop .35s ease both}
.r .bar4{align-self:stretch;border-radius:4px;background:currentColor}
.res.stale .r{opacity:.35;transition:opacity .3s}
.r.top{border-color:rgba(var(--l),.3);background:rgba(var(--pn),.85);box-shadow:0 0 0 1px currentColor}
.r-txt{min-width:0}
.r-kind{font-weight:600}
@media (min-width:901px) and (max-width:1079px){html[lang="en"] .r-kind{display:none}} /* the coloured bar says the kind; the line stays one line */
.r-t{display:block;font-size:14px;font-weight:600;line-height:1.4;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The second line wraps to two lines at most (zc 2026-10-16: it was cut to
   a few characters on narrow screens). */
.r-s{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;margin-top:2px;font:11px/1.4 var(--mono);color:var(--dim);overflow:hidden;overflow-wrap:anywhere}
.r-btn{font-size:12px;font-weight:600;padding:6px 10px;border-radius:8px;white-space:nowrap;border:1px solid rgba(var(--l),.3);color:var(--ink-2)}
.r.top .r-btn{background:var(--accent);border-color:transparent;color:var(--accent-ink)}
.c-foot{display:flex;align-items:center;justify-content:center;gap:10px;padding:4px 18px 12px;font-size:11px;line-height:1.6;color:var(--dim)}
/* Each dot is a 24px button (pickable with reduced motion too); the visible
   bar is its 18×3 content box. */
.dots-sc{display:flex;gap:0;flex:none;align-items:center;margin-right:-3px}
.dots-sc button{width:24px;height:24px;padding:10.5px 3px;border:0;border-radius:4px;background:rgba(var(--l),.2);background-clip:content-box;cursor:pointer}
.dots-sc button.on{background-color:var(--accent)}
/* The v3 headlines are longer than the old ones: on desktop they scale with
   the column so the Chinese first line (kept on one line) never runs under
   the demo, and the main button stays above the fold on a 768px-high laptop
   (acceptance review 2026-10-13). */
@media (min-width:901px){
  .hero.v3 h1{font-size:clamp(34px, calc((min(100vw, 1200px) - 120px) * .04), 46px)}
  html[lang="en"] .hero.v3 h1{font-size:clamp(34px, calc((min(100vw, 1200px) - 120px) * .039), 44px)}
}
/* Rows slide in but are never see-through: a paused or throttled animation
   left the other answers nearly invisible (review 2026-10-16d). */
@keyframes drop{from{transform:translateY(-6px)}to{transform:none}}
.res.still .r{animation:none}

/* three ways */
.order{margin:0;display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.order b{font-weight:600}
.order .og{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.order i{font-style:normal;color:var(--dim)}
/* The three cards share their rows (tag, title, text, example, details), so
   each row lines up across the cards whatever wraps (alignment review). */
.ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,auto) 1fr;column-gap:20px}
.way{position:relative;display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:12px;padding:24px;border-radius:14px;border:1px solid var(--line);background:rgba(var(--pn),.75);overflow:hidden}
.way .eg{align-self:stretch;display:flex;align-items:center}
.way::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--way)}
.way.w-sk{--way:var(--k-sk)}.way.w-ag{--way:var(--k-ag)}.way.w-pe{--way:var(--k-pe)}
.way-tag{font-size:12.5px;font-weight:600;line-height:1;letter-spacing:.04em;color:var(--way)}
.way h3{font-size:21px}
.way p{margin:0;font-size:15px;color:var(--muted)}
.way .eg{font-size:12px;line-height:1.6;color:var(--ink-2);padding:8px 10px;border-radius:8px;background:rgba(var(--l),.06);border:1px solid var(--line)}
.way details{align-self:end;border-top:1px solid var(--line);padding-top:12px;font-size:13px;color:var(--muted)}
.way summary,.promise summary{cursor:pointer;color:var(--ink-2)}
.way details ul{margin:10px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:6px}

/* offer */
.offer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px;align-items:start}
.offer-copy{display:flex;flex-direction:column;gap:16px}
.offer-copy p{margin:0;color:var(--muted);font-size:16px}
.offer-copy .kinds3{display:flex;flex-wrap:wrap;gap:0}
.offer-copy .kinds3{align-items:center}
.kinds3 span{font-size:15px;line-height:1.5} /* words in the kind's colour, as in the hero: they are not buttons (review 2026-10-20) */
.kinds3 span:not(.kinds3-k):not(:last-child)::after{content:"、";color:var(--muted)}
html[lang="en"] .kinds3 span:not(.kinds3-k):not(:last-child)::after{content:",\00a0"}
.offer-copy .kinds3{row-gap:2px}
.kinds3 .kinds3-k{padding-inline:0 4px;color:var(--muted)}
.inbound{border-radius:16px;border:1px solid rgba(var(--l),.18);background:linear-gradient(180deg,rgba(16,22,40,.92),rgba(10,14,26,.96));padding:20px;display:flex;flex-direction:column;gap:12px;box-shadow:0 30px 80px var(--shadow);color:var(--ink)}
/* Your own offer card in your purple; the other side's Agent in network cyan. */
.mycard{padding:14px;border-radius:12px;border:1px solid var(--line-2);background:rgba(var(--l),.06)}
.mycard .k{font-size:11px;line-height:1.4;color:var(--muted)}
.mycard .t{font-weight:600;margin-top:2px;text-wrap:balance}
.mycard .s{font-size:11.5px;line-height:1.5;color:var(--dim)}
.in{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.55;color:var(--ink-2);padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:rgba(var(--pn),.6)}
.in .w{flex:none;color:var(--k-ag)} /* another user's Agent talking: the Agent colour */
.in em{font-style:normal;color:var(--ink-2);font-weight:600;margin-left:auto;white-space:nowrap}

/* privacy: one promise, the details folded */
.promise{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:center;padding:30px;border-radius:16px;border:1px solid var(--accent-line);background:linear-gradient(180deg,rgba(var(--acc),.06),rgba(var(--pn),.6))}
.lock{width:72px;height:72px;border-radius:18px;display:grid;place-items:center;border:1px solid var(--accent-line);background:rgba(var(--acc),.08)}
.lock svg{width:34px;height:34px;fill:none;stroke:var(--accent-text);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.promise h2{font-size:28px}
.promise p{margin:8px 0 0;color:var(--muted)}
.promise details{grid-column:1/-1;font-size:14px;color:var(--muted);border-top:1px solid var(--line);padding-top:14px}
.pv3{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}
.pv3 p{margin:0;padding:14px;border-radius:10px;border:1px solid var(--line);background:rgba(var(--pn),.6)}
.pv3 b{display:block;color:var(--ink);margin-bottom:4px}

@media (max-width:900px){
  .wrap{padding-inline:16px}
  .hero-sec{padding:48px 0 64px}
  .hero,.two{grid-template-columns:minmax(0,1fr);gap:40px}
  h1{font-size:38px}
  h2{font-size:28px}
  .navlinks,.brand-tag{display:none}
  .sec{padding:64px 0}
}
/* Tablets in portrait (641–900px): the phone layout's single 16px column
   wasted the width; PCs (>900px) and phones (<=640px) are not touched. */
@media (min-width:641px) and (max-width:900px){
  .wrap{padding-inline:32px}
  .hero-sec{padding:64px 0 72px}
  h1{font-size:46px}
  h2{font-size:30px}
  .aidir .navlinks{display:flex;gap:20px}
  .pane{padding:24px}
}
/* The homepage's five section links fit from 720px once the status pill
   steps aside (in English, 641–720px ran past the edge). Below 720px the
   AI directory link is in the footer. */
@media (min-width:720px) and (max-width:900px){
  .navlinks{display:flex;gap:20px}
  body:not(.aidir) .status{display:none}
}
/* Laptops: in English the five links, the tagline and the status pill wrap
   onto two lines below about 1100px; the tagline goes first, then the pill. */
.navlinks a,.status{white-space:nowrap}
@media (min-width:901px) and (max-width:1099px){body:not(.aidir) .brand-tag{display:none}}
@media (min-width:901px) and (max-width:1023px){body:not(.aidir) .status{display:none}}
/* Tablets in landscape and small laptops (901–1263px): the two-column hero
   is narrower than the headline at 52px, which ran under the console at
   1024px; the headline shrinks with the column. Wider screens keep 52px. */
@media (min-width:901px) and (max-width:1263px){
  h1{font-size:clamp(38px, calc((min(100vw, 1200px) - 120px) * .0455), 52px)}
}
@media (max-width:719px){
  .menu{display:block}
  .top-right{gap:8px}
}
@media (max-width:480px){
  .ask{height:84px}
  .hc>span{white-space:normal;text-align:center}
  h1 .accent{white-space:nowrap}
  .console-bar .dots{display:none}
  h1{font-size:32px}
  .status{padding:4px 8px;gap:6px;font-size:11px} /* the beta badge stays on phones, smaller (review 2026-10-16d) */
  .pane{padding:20px}
  .copy{min-width:0}
  .pane-head{flex-wrap:wrap;row-gap:6px}
  .pane-head .pill{margin-left:auto}
  .points li{grid-template-columns:5.6em minmax(0,1fr);gap:10px}
  html[lang="en"] .points li{grid-template-columns:7.4em minmax(0,1fr);gap:10px}
  .work{gap:6px 12px}
  .pane-head h3{font-size:18px}
  .pill{font-size:10px;padding:2px 6px}
  .prompt-text{font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .live{animation:none}
  .mesh-pulses{display:none}
  .prompt,.copy,.copy>span{transition:none}
}
/* The try box as a band under the hero: input and examples on one row,
   results side by side. */
.try-band{margin-top:48px;padding:20px 22px;gap:14px}
.try-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px}
.try-band .try-label{font-size:15px}
.try-band .try-row{max-width:none}
.try-band .found{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.try-band .found:empty{display:none}
.try-band .found-head,.try-band .fr.go{grid-column:1/-1}
.try-band .fr{align-self:stretch}
.hero-sec.v3{padding-bottom:72px}


/* The AI resource directory (/ai, aidir.go): rendered on the server, no
   script but theme.js. */
.aidir .navlinks a.on{color:var(--accent-text)}
.aidir .lang{display:inline-grid;place-items:center;text-decoration:none}
/* The top (zc 2026-10-15): people search on the left, one bar with the
   button inside and example needs under it; on the right, what an AI is
   given, as two commands and the list's size and freshness. */
.ai-hero{padding:56px 0 44px}
/* The two columns start at the title and end together (zc 2026-10-15:
   line them up top and bottom): the label sits above both, and the AI
   card is as tall as the left column, its counts at the bottom. */
.ai-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:stretch;margin-top:18px}
.ai-hero-main{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.ai-hero h1{margin:0;font-size:46px;line-height:1.1}
.ai-hero .lede{margin:14px 0 0;font-size:16.5px;max-width:34em;color:var(--muted)}
.ai-search{position:relative;display:flex;align-items:center;width:100%;margin-top:26px;height:58px;border-radius:14px;border:1px solid var(--line-2);background:rgba(var(--pn),.92);padding:0 7px 0 46px;transition:border-color .15s,box-shadow .15s}
.ai-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px rgba(var(--acc),.12)}
.ai-search svg{position:absolute;left:16px;top:50%;width:20px;height:20px;margin-top:-10px;fill:none;stroke:var(--dim);stroke-width:2;stroke-linecap:round}
.ai-search input[type=search]{flex:1;min-width:0;height:100%;border:0;background:transparent;color:var(--ink);font-size:15.5px;line-height:1.4;font-family:inherit;outline:none;padding:0 12px 0 0}
.ai-search input::placeholder{color:var(--dim)}
.ai-search input::-webkit-search-cancel-button{display:none}
.ai-search .btn{height:44px;min-height:44px;min-width:84px;border-radius:10px;border:0}
.ai-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:auto;padding-top:14px;font-size:13px}
.ai-chips>span{font-size:12px;color:var(--dim);margin-right:2px}
.ai-chips a{padding:4px 12px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink-2);background:rgba(var(--pn),.6)}
.ai-chips a:hover{border-color:var(--accent-line);color:var(--accent-text)}
.ai-forai-card{display:flex;flex-direction:column;border-radius:16px;border:1px solid var(--line-2);background:linear-gradient(180deg,rgba(var(--acc),.05),transparent 40%),var(--panel-2);overflow:hidden;box-shadow:0 20px 50px -24px var(--shadow)}
[data-theme="light"] .ai-forai-card{background:linear-gradient(180deg,rgba(var(--acc),.06),transparent 40%),#fff}
.ai-forai-h{display:flex;align-items:center;gap:12px;height:40px;padding:0 18px;font-size:12px;letter-spacing:.06em;color:var(--dim);border-bottom:1px solid var(--line)}
.ai-forai-h .dots{display:flex;gap:6px}
.ai-forai-h .dots i{width:9px;height:9px;border-radius:50%;background:rgba(var(--l),.22)}
.ai-cmd{display:flex;flex-direction:column;gap:6px;padding:14px 18px 0}
.ai-forai-card > .ai-cmd:nth-last-child(2){padding-bottom:16px}
.ai-cmd-note{font-size:13px;color:var(--ink-2)}
.ai-cmd-line{display:flex;align-items:flex-start;gap:8px}
/* One line (zc 2026-10-15): what does not fit scrolls inside the box; the
   copy button always copies the whole command. */
.ai-cmd code{flex:1;min-width:0;display:block;font:12px/1.6 var(--mono);color:var(--ink);padding:9px 12px;border-radius:9px;background:rgba(var(--l),.07);border:1px solid var(--line);white-space:nowrap;overflow-x:auto;scrollbar-width:none}
.ai-cmd code::-webkit-scrollbar{display:none}
.ai-cmd-line .ai-copy{width:38px;height:38px}
.ai-cmd code .p{color:var(--accent-text);user-select:none}
.ai-stats{display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:10px;margin-top:auto;padding:11px 18px;font-size:11.5px;color:var(--dim);border-top:1px solid var(--line)}
.ai-stats b{font-weight:600;color:var(--ink-2)}
.ai-answer{display:flex;flex-direction:column;gap:14px;padding-bottom:36px;scroll-margin-top:16px}
.ai-answer-h{font-size:20px;margin:0}
.ai-answer-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ai-privacy{margin:0;font-size:11.5px;color:var(--dim)}
/* Zones (zc 2026-10-15: line everything up): a numbered side list with
   counts; each zone a numbered header, the recommended and alternative
   entries as two cards of one height with the same rows in the same
   places, and the rest as a table whose rows open for "not for" and the
   line an AI reads. */
.ai-layout{display:grid;grid-template-columns:244px minmax(0,1fr);gap:36px;padding-top:12px;padding-bottom:88px}
.ai-side{position:sticky;top:20px;align-self:start;display:flex;flex-direction:column;gap:2px;font-size:14px}
.ai-side-h{font-size:11px;letter-spacing:.14em;color:var(--dim);padding:0 12px 8px;text-transform:uppercase}
.ai-side a{display:grid;grid-template-columns:2.2em minmax(0,1fr) auto;align-items:center;gap:6px;color:var(--muted);padding:8px 12px;border-radius:8px;border-left:2px solid transparent}
.ai-side a:hover{color:var(--ink);background:rgba(var(--acc),.06);border-left-color:var(--accent-line)}
.ai-side .n,.ai-side .c{font-size:11px;color:var(--dim)}
.ai-side .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-side .c{min-width:1.8em;text-align:center;padding:0 6px;border-radius:999px;background:rgba(var(--l),.08)}
.ai-zones{display:flex;flex-direction:column;gap:56px}
.ai-zone{display:flex;flex-direction:column;gap:16px;scroll-margin-top:20px}
.ai-zone-h{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.ai-zone-n{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;font-size:15px;font-weight:600;color:var(--accent-text);background:rgba(var(--acc),.08);border:1px solid var(--accent-line)}
.ai-zone h2{font-size:22px;line-height:1.3}
.ai-zone-sub{margin:2px 0 0;font-size:13px;color:var(--dim)}
.ai-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ai-pair .ai-entry,.ai-answer-list .ai-entry{display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:12px}
/* The key-value list is a subgrid of the card's rows too (one row a label
   and its value): as its own grid, a label that wrapped in one card ("Sign-up
   & keys") pushed the next row of that card lower than its neighbour's
   (review 1017g). Stacked (labels above values) each label and value has a
   row of its own: the card spans 9 rows, the list 6. */
.ai-pair .ai-kv,.ai-answer-list .ai-kv{grid-row:span 3;grid-template-rows:subgrid;row-gap:8px}
.ai-pair:has(.ai-entry-foot[open]),.ai-answer-list:has(.ai-entry-foot[open]){align-items:start}
.ai-pair:has(.ai-entry-foot[open]) .ai-entry,.ai-answer-list:has(.ai-entry-foot[open]) .ai-entry{display:flex;grid-row:auto}
.ai-pair:has(.ai-entry-foot[open]) .ai-entry-foot,.ai-answer-list:has(.ai-entry-foot[open]) .ai-entry-foot{align-self:stretch;margin-top:auto}
.ai-entry{display:flex;flex-direction:column;gap:12px;padding:20px 22px 16px;border-radius:14px;border:1px solid var(--line);background:rgba(var(--pn),.75);min-width:0}
.ai-entry.is-rec{border-color:var(--accent-line);background:linear-gradient(180deg,rgba(var(--acc),.06),rgba(var(--pn),.75) 60%)}
.ai-entry-top{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px 8px;min-height:26px} /* the badges wrap rather than run out of a narrow card (320px English: Official + Recommended) */
.ai-entry-top .badge.rec,.ai-entry-top .badge.alt{margin-left:auto}
.ai-name{font-size:17px;font-weight:650;color:var(--ink)}
.ai-name:hover{color:var(--accent-text)}
.badge{font:11px/1.6 var(--mono);padding:1px 8px;border-radius:999px;border:1px solid var(--line-2);color:var(--dim);white-space:nowrap}
.badge.rec{color:var(--accent-text);border-color:rgba(var(--acc),.55)} /* an outline: a solid purple pill read as a button */
.badge.alt{color:var(--ink-2)}
.badge.off{color:var(--accent-text);border-color:rgba(var(--acc),.45)} /* official = a verified source: the brand purple (cyan is the skill colour) */
.ai-for{margin:0;font-size:14px;line-height:1.65;color:var(--ink-2)}
.ai-kv{display:grid;align-self:start;grid-template-columns:5.5em minmax(0,1fr);gap:8px 14px;margin:0;font-size:13px;line-height:1.6;color:var(--muted);padding-top:12px;border-top:1px dashed var(--line)}
html[lang="en"] .ai-kv{grid-template-columns:8em minmax(0,1fr)}
.ai-kv dt{color:var(--dim);white-space:nowrap}
.ai-kv dd{margin:0;min-width:0}
/* A narrow card puts its labels above the values, as .ai-detail does on a
   phone, so the way in gets the card's whole width instead of being cut
   ("www.linkedin.com", review 1017e): wherever the list is 340px or less
   wide. The switch is by viewport width (media queries), not a container
   query: any container (a size container's layout containment) cuts the
   list out of the card's subgrid, and the rows of cards side by side no
   longer line up (reviews 1017f, 1017g). The widths: one column up to
   418px (the list is the viewport less 78px); the results, three across,
   from 901px (at most 323px); a pair from 901 to 1132px (half the viewport
   less 226px). */
@media (max-width:418px){
  .ai-pair .ai-entry,.ai-answer-list .ai-entry{grid-row:span 9}
  .ai-pair .ai-kv,.ai-answer-list .ai-kv{grid-row:span 6}
  .ai-kv dt,.ai-kv dd{grid-column:1/-1}
  .ai-kv dd{margin-top:-6px}
  .ai-kv dt{font-size:12px}
}
@media (min-width:901px){
  .ai-answer-list .ai-entry{grid-row:span 9}
  .ai-answer-list .ai-kv{grid-row:span 6}
  .ai-answer-list .ai-kv dt,.ai-answer-list .ai-kv dd{grid-column:1/-1}
  .ai-answer-list .ai-kv dd{margin-top:-6px}
  .ai-answer-list .ai-kv dt{font-size:12px}
}
@media (min-width:901px) and (max-width:1132px){
  .ai-pair .ai-entry{grid-row:span 9}
  .ai-pair .ai-kv{grid-row:span 6}
  .ai-pair .ai-kv dt,.ai-pair .ai-kv dd{grid-column:1/-1}
  .ai-pair .ai-kv dd{margin-top:-6px}
  .ai-pair .ai-kv dt{font-size:12px}
}
.ai-conn{display:flex;align-items:center;gap:8px;min-width:0}
.ai-use{flex:none;font-size:11px;color:var(--ink-2);padding:0 6px;border-radius:4px;background:rgba(var(--l),.10)}
.ai-conn code{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono);font-size:12px;color:var(--term-ink);background:var(--panel-2);border:1px solid var(--line);padding:1px 7px;border-radius:5px}
[data-theme="light"] .ai-conn code{background:rgba(var(--l),.06);color:var(--ink)}
/* A card's last row: the line an AI reads (opens below), its copy button
   and the check date, once each (zc 2026-10-15). */
.ai-entry-foot{align-self:end;padding-top:10px;border-top:1px solid var(--line)}
.ai-entry-foot>summary{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;cursor:pointer;min-height:30px}
.ai-entry-foot>summary::-webkit-details-marker{display:none}
.ai-raw-lbl{font-size:12.5px;color:var(--dim);white-space:nowrap}
.ai-chev{flex:none;width:14px;height:14px;margin-right:-4px;fill:none;stroke:var(--dim);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.ai-entry-foot[open] .ai-chev{transform:rotate(90deg)}
.ai-entry-foot>summary:hover .ai-raw-lbl{color:var(--ink-2)}
.ai-entry-foot .ai-checked{margin-left:auto}
.ai-entry-foot>pre{margin:10px 0 0;padding:12px 14px;border-radius:9px;background:rgba(var(--l),.06);border:1px solid var(--line);font:12px/1.75 var(--mono);color:var(--ink-2);white-space:pre-wrap;overflow-wrap:anywhere}
.ai-checked{font-size:11px;color:var(--dim);white-space:nowrap}
.ai-list{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:rgba(var(--pn),.55)}
.ai-list-h,.ai-row summary{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1.25fr) minmax(0,.9fr) 20px;gap:18px;align-items:center;padding:0 22px}
.ai-list-h{height:38px;font-size:11px;letter-spacing:.06em;color:var(--dim);background:rgba(var(--l),.05);border-bottom:1px solid var(--line)}
.ai-row+.ai-row{border-top:1px solid var(--line)}
.ai-row summary{list-style:none;cursor:pointer;min-height:64px;padding-block:12px;font-size:13px;color:var(--muted)}
.ai-row summary::-webkit-details-marker{display:none}
.ai-row summary:hover{background:rgba(var(--acc),.04)}
.ai-row-name{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;min-width:0}
.ai-row-name .ai-name{font-size:14.5px;line-height:1.5;min-width:0;max-width:100%;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere} /* two lines, not cut after a few words (review 2026-10-16d); the whole width, the badge wraps under a long name (review 10-17 W2) */
@media (max-width:400px){.ai-row-name .ai-name{-webkit-line-clamp:3}} /* room for a third line on the narrowest phones */
.ai-map{margin:0 auto 18px;font-size:13px;line-height:1.6;color:var(--muted)}
.ai-row-for{flex-basis:100%;min-width:0;font-size:12.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-row-key{min-width:0;overflow-wrap:anywhere} /* shown in full: a clamp cut the key note mid-sentence (layout audit 2026-10-15) */
.ai-row-x{justify-self:end;color:var(--dim);font-size:15px;transition:transform .15s}
.ai-row[open] .ai-row-x{transform:rotate(45deg);color:var(--accent-text)}
.ai-row[open] summary{background:rgba(var(--acc),.04)}
.ai-row-more{display:flex;flex-direction:column;gap:14px;padding:6px 22px 18px;font-size:13px;color:var(--muted);background:rgba(var(--acc),.04)}
/* An opened row: every field on its own line, in full, with copy buttons
   where there is something to paste (zc 2026-10-15). */
.ai-detail{display:grid;grid-template-columns:5.5em minmax(0,1fr);gap:10px 16px;margin:0;padding:14px 16px;border-radius:10px;border:1px solid var(--line);background:rgba(var(--pn),.6);line-height:1.6}
html[lang="en"] .ai-detail{grid-template-columns:8em minmax(0,1fr)}
.ai-detail dt{color:var(--dim);white-space:nowrap}
.ai-detail dd{margin:0;min-width:0;color:var(--ink-2)}
.ai-detail-meta{font-size:12px;color:var(--dim)}
.ai-copyline{display:flex;align-items:flex-start;gap:8px}
.ai-copyline .ai-use{margin-top:3px}
.ai-copyline .ai-copy{margin-top:-2px}
.ai-copyline code{font:12px/1.6 var(--mono);color:var(--term-ink);background:var(--panel-2);border:1px solid var(--line);padding:1px 7px;border-radius:5px;overflow-wrap:anywhere;min-width:0}
[data-theme="light"] .ai-copyline code{background:rgba(var(--l),.06);color:var(--ink)}
.ai-copyline a{font-size:12.5px;overflow-wrap:anywhere}
.ai-copy{flex:none;display:inline-grid;place-items:center;width:28px;height:28px;padding:0;border-radius:7px;border:1px solid var(--line-2);background:transparent;color:var(--dim);cursor:pointer;transition:color .15s,border-color .15s,background-color .15s}
.ai-copy:hover{color:var(--accent-text);border-color:var(--accent-line)}
.ai-copy svg{grid-area:1/1;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ai-copy .i-done,.ai-copy.done .i-copy{visibility:hidden}
.ai-copy.done .i-done{visibility:visible}
.ai-copy.done{color:var(--accent-text);border-color:var(--accent-line);background:rgba(var(--acc),.12)}
.ai-copy.fail{color:var(--warn);border-color:rgba(var(--wc),.6)}
.ai-rawline{border-radius:10px;border:1px solid var(--line);overflow:hidden}
.ai-rawline-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 8px 6px 14px;font-size:11.5px;color:var(--dim);background:rgba(var(--l),.06);border-bottom:1px solid var(--line)}
.ai-rawline pre{margin:0;padding:12px 14px;font:12px/1.75 var(--mono);color:var(--ink-2);white-space:pre-wrap;overflow-wrap:anywhere;background:rgba(var(--pn),.5)}
/* "Copy line" is the icon copy button with a label: same height, colours
   and copied state (cyan, tick, "copied"); both labels share one cell so
   the width never changes (zc 2026-10-15). */
.ai-copy.ai-copy-text{display:inline-flex;align-items:center;gap:6px;width:auto;height:28px;padding:0 10px 0 8px;font:500 12px/1 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;white-space:nowrap}
.ai-copy-text .ic,.ai-copy-text .lb{display:inline-grid;place-items:center}
.ai-copy-text .ic svg,.ai-copy-text .lb>span{grid-area:1/1}
.ai-copy-text .ic svg{width:14px;height:14px}
.ai-copy-text .t-done,.ai-copy-text.done .t-idle{visibility:hidden}
.ai-copy-text.done .t-done{visibility:visible}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.copy-scratch{position:fixed;top:0;left:0;opacity:0;pointer-events:none}
.ai-conn .ai-copy{margin-left:auto}
.ai-list-rest>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;height:44px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-2)}
.ai-list-rest>summary::-webkit-details-marker{display:none}
.ai-list-rest>summary:hover{color:var(--accent-text);background:rgba(var(--acc),.04)}
.ai-list-rest[open]>summary{display:none}
.ai-list-rest .ai-row:first-of-type{border-top:1px solid var(--line)}
.ai-fallback{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:24px;border-radius:14px;border:1px solid var(--accent-line);background:linear-gradient(180deg,rgba(var(--acc),.07),rgba(var(--pn),.75))}
.ai-fallback h3{margin:0;font-size:18px}
.ai-fallback p{margin:0;font-size:14px;color:var(--muted);max-width:46em}
.foot a{color:var(--dim)}
.foot a:hover{color:var(--ink)}

/* Homepage v3 at narrower widths: one column; on a phone the demo keeps
   only the answer it leads with. */
@media (max-width:900px){
  .ai-layout,.ai-pair,.ai-answer-list{grid-template-columns:minmax(0,1fr)}
  .ai-side{position:static;flex-direction:row;gap:8px;overflow-x:auto;margin-inline:-16px;padding:0 16px 4px;scrollbar-width:none}
  .ai-side::-webkit-scrollbar{display:none}
  .ai-side{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)} /* the strip scrolls sideways: fade the edge so it reads as more */
  .ai-side-h,.ai-side .n{display:none}
  .ai-side a{display:flex;flex:none;gap:8px;white-space:nowrap;padding:7px 12px;border:1px solid var(--line-2);border-radius:999px}
  .ai-side a:hover{border-color:var(--accent-line)}
  .ai-list-h{display:none}
  .ai-row summary{grid-template-columns:minmax(0,1fr) 20px;row-gap:8px}
  .ai-row summary>.ai-conn,.ai-row summary>.ai-row-key{grid-column:1}
  .ai-row-x{grid-row:1;grid-column:2}
  .ai-hero h1{font-size:32px}
  .ai-hero-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .ai-stats{margin-top:16px}
  .try-band{margin-top:32px;padding:16px}
  .try-band .found{grid-template-columns:minmax(0,1fr)}
  .ways,.offer,.pv3{grid-template-columns:minmax(0,1fr)}
  .ways{grid-template-rows:none;row-gap:20px}
  .way{grid-row:auto;grid-template-rows:none}
}
@media (min-width:641px) and (max-width:900px){
  .ways{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
  .ways .way:first-child{grid-column:1/-1} /* the easiest way gets the full row (zc 2026-10-16) */
  /* the two below share their rows, so titles and examples line up */
  .ways{grid-template-rows:repeat(5,auto) repeat(5,auto)}
  .ways .way:first-child{grid-row:1/span 5;grid-template-rows:subgrid}
  .ways .way:not(:first-child){grid-row:6/span 5;grid-template-rows:subgrid}
}
@media (max-width:640px){
  .ai-search{height:54px}
  /* The two commands wrap whole on a phone instead of running out of the
     box unseen (review 2026-10-16d); the copy button still copies all. */
  .ai-cmd code{white-space:pre-wrap;word-break:break-all;overflow-x:visible}
  .ai-search input[type=search]{height:44px} /* the same height as the button beside it */
  .ai-detail,html[lang="en"] .ai-detail{grid-template-columns:minmax(0,1fr);row-gap:2px}
  .ai-detail dd{margin-bottom:10px}
  .ai-detail dd:last-child{margin-bottom:0}
  .ai-detail dt{font-size:12px}
  .ai-search .btn{min-width:64px}
  .ai-stats{grid-template-columns:1fr;gap:4px}
  .r:not(.top){display:none}
  .res{height:110px}
  .r{height:94px}
  .r-t{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.3}
  .work{gap:6px 12px;flex-wrap:wrap}
  .try-row{flex-direction:column}
  .promise{grid-template-columns:auto minmax(0,1fr);gap:14px;padding:22px;align-items:center} /* the lock beside the heading; the text below takes the full width */
  .promise>div{display:contents}
  .promise>div>p{grid-column:1/-1;margin-top:0}
  .lock{width:44px;height:44px;border-radius:12px}
  .lock svg{width:22px;height:22px}
  .promise h2{font-size:24px}
  .in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:10px} /* label, question, answer: one layout for every row */
}
@media (max-width:480px){
  .promise{grid-template-columns:minmax(0,1fr)} /* P2-14: the lock above the heading, the heading gets the width */
  .promise h2{font-size:22px}
}
@media (max-width:560px){
  #hero-copy{width:100%;justify-content:center} /* P2-6: full width, like the try-it button */
}
@media (max-width:380px){
  .term-bar>:last-child{display:none} /* the title alone; install.md stays linked from the guide */
}
@media (max-width:900px){
  .ai-forai-card > .ai-cmd:nth-last-child(2){padding-bottom:0} /* even space above and below in the card */
}
@media (max-width:374px){
  .aidir .eyebrow{letter-spacing:.04em} /* P2-4 */
}
@media (max-width:400px){
  .in{grid-template-columns:auto minmax(0,1fr)}
  .in em{grid-column:1/-1;justify-self:end}
  h1{font-size:28px} /* P2-6: “你的 AI 只在电脑里干活。” on one line */
  .lang{min-width:36px}
  .top-right{gap:6px}
  html[lang="en"] body:not(.aidir) .status [data-t="status"]{display:none} /* the wordmark stays; "Private beta" shortens */
  html[lang="en"] body:not(.aidir) .status::after{content:"Beta"}
}
@media (max-width:360px){
  body:not(.aidir) .status [data-t="status"],html[lang="en"] body:not(.aidir) .status::after{display:none} /* the dot says beta; the wordmark stays */
  body:not(.aidir) .status{width:36px;height:36px;padding:0;justify-content:center;border-radius:8px;background:transparent} /* P2-7: the dot sits in a box like its neighbours */
  .points li,html[lang="en"] .points li{grid-template-columns:minmax(0,1fr);row-gap:2px} /* P1-4: label above its line */
  .points li>span:last-child{padding-left:14px} /* lines up with the label's text, after its colour bar */
  .top-right{gap:4px}
  #hero-copy{font-size:14px;padding-inline:14px}
  .term-bar{flex-wrap:wrap;row-gap:4px}
  .sha-k{display:none} /* more digits; the tooltip says SHA-256 */
  .pane-head .pill{margin-left:30px} /* under the title, after the icon */
  .r-kind{display:none} /* the coloured bar already says which kind */
}
@media (max-width:345px){
  h1{font-size:25px} /* “你的 AI 只在电脑里干活。” on one line */
}
@media (max-width:340px){
  .aidir .eyebrow{font-size:11px} /* 6 */
  .brand-name{display:none} /* the mark is the brand; room for the menu */
  #hero-copy{font-size:13px;padding-inline:12px} /* P1-2 */
  #hero-copy .hc-arrow{display:none}
  #work{gap:4px 12px;font-size:11px} /* P2-3 */
  .ai-search input[type=search]{padding-right:4px} /* P2-5 */
}
@media (prefers-reduced-motion:reduce){
  .r,.fr{animation:none}
  .ask .caret{animation:none}
  .net .pk{display:none}
}