@font-face{font-family:pxSans;font-style:normal;font-weight:400;font-display:swap;src:url(fonts-plex/PXSans-Regular.woff2) format("woff2")}
@font-face{font-family:pxSans;font-style:normal;font-weight:500;font-display:swap;src:url(fonts-plex/PXSans-Medium.woff2) format("woff2")}
@font-face{font-family:pxSerif;font-style:normal;font-weight:400;font-display:swap;src:url(fonts-plex/PXSerif-Regular.woff2) format("woff2")}
@font-face{font-family:pxSerif;font-style:italic;font-weight:400;font-display:swap;src:url(fonts-plex/PXSerif-Italic.woff2) format("woff2")}
@font-face{font-family:pxMono;font-style:normal;font-weight:400;font-display:swap;src:url(fonts-plex/PXMono-Regular.woff2) format("woff2")}

/* 度量校正后的后备字体：Arial 被缩放到和真字体占一样的空间，
   替换发生时字形会变、每个字的位置和每行的断点都不动。
   三套都是 Plex 血统，ascent/descent 同源，只有平均字宽不同。 */
@font-face{font-family:"pxSans fallback";src:local("Arial"),local("Helvetica"),local("Liberation Sans");size-adjust:100.24%;ascent-override:102.26%;descent-override:27.44%;line-gap-override:0%}
@font-face{font-family:"pxSerif fallback";src:local("Arial"),local("Helvetica"),local("Liberation Sans");size-adjust:106.98%;ascent-override:95.81%;descent-override:25.71%;line-gap-override:0%}
@font-face{font-family:"pxMono fallback";src:local("Arial"),local("Helvetica"),local("Liberation Sans");size-adjust:126.91%;ascent-override:80.77%;descent-override:21.67%;line-gap-override:0%}

:root{
  --serif:pxSerif,"pxSerif fallback",Georgia,serif;
  --sans:pxSans,"pxSans fallback",system-ui,sans-serif;
  --body:pxSans,"pxSans fallback",system-ui,sans-serif;
  --mono:pxMono,"pxMono fallback",ui-monospace,monospace;
  --gap:clamp(20px,4vw,52px);
  --lw:1.5px;
  --navh:57.5px;
  /* 两个按钮都用固定色，两套主题下填充和文字都不变。
     主按钮原来是 var(--accent)，暗色下换成更亮的 #4785ff、文字还翻成近黑，
     整颗按钮发白；次要按钮原来是 color-mix(--ink,--raised)，明度跳 49 倍。 */
  --btn-primary:#1e69f6;
  --btn-neutral:#454f62;
}

/* 主题：亮色是基准，暗色覆盖 token。
   .theme-input 是导航栏里那个隐藏 checkbox —— 勾上就把当前主题翻到另一边，
   靠 :has() 实现，没有 JavaScript。特异度决定了谁赢，顺序无关。 */
:root{
  color-scheme:light;
  --ground:#fcfcfd; --raised:#f6f7f9;
  --ink:#39414f; --ink-strong:#151a22; --ink-mute:#77808f;
  --line:#d3d9e5; --line-soft:#eef0f4; --hatch:#dbe0ea; --hair:#e3e7ee;
  --accent:#1e69f6; --accent-deep:#0751cf;
  --sky:#93ccdc; --ember:#ff5500; --dot:#1e69f6;
  --icon-sun:none; --icon-moon:block; --dither-op:1;
  --glyph-accent:var(--accent); --glyph-text:#000;
}
:root[data-theme="dark"],
:root:has(.theme-input:checked){
  color-scheme:dark;
  --ground:#00040a; --raised:#060d18;
  --ink:#c3ccdb; --ink-strong:#eef2f8; --ink-mute:#6d7a8e;
  --line:#1f2c40; --line-soft:#0d1421; --hatch:#1a2536; --hair:#131c2b;
  --accent:#4785ff; --accent-deep:#1e69f6;
  --sky:#93ccdc; --ember:#ff5500; --dot:#4785ff;
  --icon-sun:block; --icon-moon:none; --dither-op:.55;
  --glyph-accent:#fff; --glyph-text:#fff;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
  color-scheme:dark;
  --ground:#00040a; --raised:#060d18;
  --ink:#c3ccdb; --ink-strong:#eef2f8; --ink-mute:#6d7a8e;
  --line:#1f2c40; --line-soft:#0d1421; --hatch:#1a2536; --hair:#131c2b;
  --accent:#4785ff; --accent-deep:#1e69f6;
  --sky:#93ccdc; --ember:#ff5500; --dot:#4785ff;
  --icon-sun:block; --icon-moon:none; --dither-op:.55;
  --glyph-accent:#fff; --glyph-text:#fff;
  }
  :root:not([data-theme="light"]):has(.theme-input:checked){
  color-scheme:light;
  --ground:#fcfcfd; --raised:#f6f7f9;
  --ink:#39414f; --ink-strong:#151a22; --ink-mute:#77808f;
  --line:#d3d9e5; --line-soft:#eef0f4; --hatch:#dbe0ea; --hair:#e3e7ee;
  --accent:#1e69f6; --accent-deep:#0751cf;
  --sky:#93ccdc; --ember:#ff5500; --dot:#1e69f6;
  --icon-sun:none; --icon-moon:block; --dither-op:1;
  --glyph-accent:var(--accent); --glyph-text:#000;
  }
}
:root[data-theme="dark"]:has(.theme-input:checked){
  color-scheme:light;
  --ground:#fcfcfd; --raised:#f6f7f9;
  --ink:#39414f; --ink-strong:#151a22; --ink-mute:#77808f;
  --line:#d3d9e5; --line-soft:#eef0f4; --hatch:#dbe0ea; --hair:#e3e7ee;
  --accent:#1e69f6; --accent-deep:#0751cf;
  --sky:#93ccdc; --ember:#ff5500; --dot:#1e69f6;
  --icon-sun:none; --icon-moon:block; --dither-op:1;
  --glyph-accent:var(--accent); --glyph-text:#000;
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--body);
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
/* 只载了 400 和 500 两个字重，<strong> 默认要 700 会被浏览器合成加粗。
   改用真实存在的 500，零额外字节。 */
strong{font-weight:500}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}

/* ---------- frame: the graph-paper rules are real borders ---------- */
.frame{display:grid;grid-template-columns:minmax(6px,1fr) minmax(0,1080px) minmax(6px,1fr);overflow-x:clip}
.gutter{
  background-image:repeating-linear-gradient(-45deg,var(--hatch) 0 1px,transparent 1px 7px);
}
.spine{border-inline:var(--lw) solid var(--line);background:var(--ground)}
.rule{border-bottom:var(--lw) solid var(--line)}
/* 可复用的纹理：细点阵、斜线带、刻度尺 */
.tex-dots{background-image:radial-gradient(circle,var(--hair) .7px,transparent .8px);background-size:9px 9px}

section{position:relative;border-bottom:var(--lw) solid var(--line)}
.pad{padding:clamp(28px,5vw,60px) var(--gap)}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:20;
  /* 底色从 --ground 换成 --raised：页面里本来就有的「抬起一档的表面」，
     kbd、按钮 hover、产品截图面板用的都是它。导航栏用同一支，
     语义上就是「这不是正文，是 chrome」。留 16% 透明度，
     底下的点阵还能透出一点，不至于把之前那个延伸效果全盖掉。 */
  background:color-mix(in srgb,var(--raised) 84%,transparent);
  backdrop-filter:blur(10px) saturate(1.15);
  border-bottom:var(--lw) solid var(--line);
}
.navframe{display:grid;grid-template-columns:minmax(6px,1fr) minmax(0,1080px) minmax(6px,1fr);overflow-x:clip}
.navspine{
  border-inline:var(--lw) solid var(--line);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  height:56px;padding:0 14px;
}
/* 两侧的 1fr 等宽，所以中间的链接组仍然是相对整页真居中，
   字标钉在左端、开关钉在右端，互不影响。 */
/* 显式指定列号：窄屏把 nav 设成 display:none 时它会整个退出网格，
   不写列号的话开关会自动顶到第 2 列（中间），必须钉死。 */
.navspine>.brand{grid-column:1;justify-self:start}
.navspine>nav{grid-column:2;overflow-x:auto;scrollbar-width:none}
.navspine>nav::-webkit-scrollbar{display:none}
/* 必须是 flex：隐藏的 checkbox 是行内元素，在 block 容器里会生成一个行盒，
   把 label 顶下去约 11px。flex 子项不产生行盒。 */
.navright{grid-column:3;justify-self:end;display:flex;align-items:center}
.brand{display:flex;align-items:center;gap:8px;flex:none}
.brand svg{display:block}
.brand b{font-family:var(--sans);font-size:17px;font-weight:500;color:var(--ink-strong);letter-spacing:-.01em}
.nav nav{display:flex;gap:2px;flex:none}
.nav a.item,.nav span.item{
  font-family:var(--sans);font-size:13.5px;letter-spacing:-.01em;
  padding:6px 9px;border-radius:3px;text-decoration:none;color:var(--ink);
  display:flex;align-items:center;gap:6px;white-space:nowrap;
}
.nav a.item:hover{background:var(--line-soft)}
/* 品牌字标：两个色块各自跟着主题 token 走。
   注意不能写成 fill="var(--x)" 的表现属性，Chrome 不认，必须走 class。 */
.g-ring{fill:none;stroke:var(--glyph-accent)}
.g-text{fill:var(--glyph-text)}

/* 主题开关：隐藏的 checkbox + label，配合顶部的 :has() 规则工作 */
.theme-input{width:0;height:0;opacity:0;margin:0;border:0;flex:none;appearance:none}
.theme-btn{
  width:30px;height:30px;flex:none;border-radius:4px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--ink-mute);
  transition:background .12s ease,color .12s ease;
}
.theme-btn:hover{background:var(--line-soft);color:var(--ink-strong)}
.theme-input:focus-visible+.theme-btn{outline:2px solid var(--accent);outline-offset:2px}
.i-sun{display:var(--icon-sun)}
.i-moon{display:var(--icon-moon)}
kbd{
  font-family:var(--mono);font-size:10.5px;line-height:1;
  padding:3px 4px 2px;border:1px solid var(--line);border-radius:3px;
  color:var(--ink-mute);background:var(--raised);
}
.btn{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--sans);font-size:13.5px;letter-spacing:-.01em;
  height:32px;padding:0 8px 0 11px;border-radius:4px;
  border:1px solid var(--line);text-decoration:none;color:var(--ink-strong);
  background:var(--ground);white-space:nowrap;
  transition:transform .08s ease,background .12s ease;
}
.btn:hover{background:var(--raised)}
.btn:active{transform:translateY(1px)}
.btn.primary{
  background:var(--btn-primary);
  /* 和次要按钮同一套做法：只有 1px 边跟着主题走，保证两种底色下轮廓都在 */
  border-color:color-mix(in srgb,var(--ink) 22%,var(--btn-primary));
  color:#fff;
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 28%,transparent);
}
.btn.primary:hover{background:color-mix(in srgb,#000 16%,var(--btn-primary))}
.btn.primary kbd{background:color-mix(in srgb,#000 18%,transparent);border-color:color-mix(in srgb,#fff 24%,transparent);color:#fff}
.btn.neutral{
  background:var(--btn-neutral);
  /* 只有这条 1px 边跟着主题走：亮底上要更深、暗底上要更浅，
     否则按钮边界在其中一套里会糊掉。填充色本身不动。 */
  border-color:color-mix(in srgb,var(--ink) 25%,var(--btn-neutral));
  color:#fff;
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 18%,transparent);
}
.btn.neutral:hover{background:color-mix(in srgb,#fff 10%,var(--btn-neutral))}
.btn.neutral kbd{background:color-mix(in srgb,#000 20%,transparent);border-color:color-mix(in srgb,#fff 20%,transparent);color:color-mix(in srgb,#fff 75%,transparent)}
.btn.lg{height:38px;font-size:14.5px;padding:0 10px 0 14px}

/* ---------- generic type ---------- */
h2{
  margin:0 0 8px;font-family:var(--serif);font-weight:400;
  font-size:clamp(21px,3vw,27px);letter-spacing:-.015em;color:var(--ink-strong);
}
h3{margin:0 0 6px;font-family:var(--sans);font-weight:500;font-size:15px;color:var(--ink-strong);letter-spacing:-.01em}
p{margin:0}
.eyebrow{
  border-bottom:1px dashed var(--line);padding-bottom:10px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-mute);margin:0 0 14px;
}
.sub{max-width:37.2em;color:var(--ink-mute);font-size:14px}

/* ---------- footer ---------- */
footer{background:var(--accent);color:#fff}
.fframe{display:grid;grid-template-columns:minmax(6px,1fr) minmax(0,1080px) minmax(6px,1fr);overflow-x:clip}
.fspine{border-inline:var(--lw) solid color-mix(in srgb,#fff 30%,transparent);overflow:hidden}
/* 八个链接填不满 1080px。左半边放品牌块（标识 + 名称 + 一句话），
   这是真内容而不是凑数的链接；2fr 让第一条竖线仍然落在页面中线上。 */
.fcols{display:grid;grid-template-columns:2fr 1fr 1fr}
.fbrand{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.fbrand .g-text{fill:#fff}
.fbrand .g-ring{stroke:#fff}
.fbrand p{font-size:13px;line-height:1.6;max-width:26em;color:color-mix(in srgb,#fff 78%,transparent)}
.fcols>div{padding:clamp(22px,3.2vw,34px) var(--gap);border-right:var(--lw) solid color-mix(in srgb,#fff 30%,transparent)}
/* 版权自成一条横贯页脚的法务带：和导航属于两类信息，分开放才对。
   上方一条细线把它和链接区隔开，以后加 Privacy / Terms 也有地方放。 */
.fbar{
  border-top:var(--lw) solid color-mix(in srgb,#fff 30%,transparent);
  padding:15px var(--gap);text-align:center;
}
.fbar .rights{font-size:13px;color:color-mix(in srgb,#fff 82%,transparent);text-wrap:balance}
/* 公司名和底部巨型字标同一支字体：PXSans Medium 500。
   等宽的零带点、衬线也被否了，所以换回无衬线——和周围正文同族，
   靠三件事把 "2026" 和 "20X" 切开：字重 500 对 400、纯白对 82% 白、
   以及 .08em 的正字距（全大写拉开字距会读成「标名」而不是数字串）。 */
.fbar .org{font-family:var(--sans);font-weight:500;letter-spacing:.08em;margin-left:.35em;color:#fff}
.fcols>div:last-child{border-right:0}
.fcols h4{margin:0 0 12px;font-family:var(--sans);font-weight:500;font-size:14px}
.fcols ul{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.fcols a{font-size:13px;color:color-mix(in srgb,#fff 88%,transparent);text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,#fff 40%,transparent)}
.fcols a:hover{text-decoration-color:#fff;color:#fff}

/* ---------- 通用行内元素 ---------- */
code{
  font-family:var(--mono);font-size:12px;
  background:var(--raised);border:1px solid var(--line);border-radius:3px;
  padding:1px 4px;color:var(--ink-strong);
}

@media (max-width:860px){
  .fcols{grid-template-columns:1fr 1fr}
  .fbrand{grid-column:1 / -1;border-right:0;border-bottom:var(--lw) solid color-mix(in srgb,#fff 30%,transparent)}
  .fbar{padding:14px var(--gap)}
}
@media (max-width:560px){
  .navspine{padding:0 8px}
  /* 手机上字标 + 四个链接 + 右侧开关放不下，链接先让位——
     它们都是本页锚点，滚动一样能到。字标必须始终可见。 */
  .navspine>nav{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}