/* SUDO 官网 · 样式表
   颜色全部走 :root 里的 token，规则里不许再出现字面色值。
   来源：mock/index2.html + mock/support.html，加上响应式、无 JS 退化、reduced-motion。 */

/* ---------- 字体（自托管，不引外链） ---------- */
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-600-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/inter-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/inter-700-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/jetbrainsmono-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/jetbrainsmono-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/jetbrainsmono-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/jetbrainsmono-700-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* 第十二轮：Barlow Semi Condensed —— 只给 SUDO Desk 字标用（600 = SUDO，400 = Desk）。
   同样自托管、不引外链；文件不在时 .sdw 退回 --sans-cond 那条系统栈（见 README §11.111）。 */
@font-face{font-family:"Barlow Semi Condensed";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/barlowsemicondensed-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Semi Condensed";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/barlowsemicondensed-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow Semi Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlowsemicondensed-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Semi Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlowsemicondensed-600-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- 颜色 token：全站只许用 var()，改色只改这里 ---------- */
:root{
  --bg:#fff;                        /* 白段 */
  --bg-grey:#f5f5f7;                /* 灰段 —— 全站只有白和这个灰两种底 */
  --ink:#1d1d1f;
  --ink-2:#6e6e73;
  --ink-3:#a1a1a6;                  /* 引线、尺寸线、≥12px 等宽标注 */
  --line:rgba(0,0,0,.08);
  --line-strong:rgba(0,0,0,.16);
  --coral:#d97757;
  --coral-d:#c4663f;                /* 悬停 */
  --coral-t:rgba(217,119,87,.1);    /* 淡橙底 */
  /* 下面四个不是新配色，是上面这套的透明/投影派生，写在这里是为了别再散落到规则里 */
  --nav-bg:rgba(255,255,255,.75);
  --shadow:0 8px 30px rgba(0,0,0,.06);
  --ring:rgba(255,255,255,.45);     /* 珊瑚橙按钮上那圈进度环的底环 */
  --grid-line:rgba(0,0,0,.04);      /* 工程段的 48px 网格线 */

  --mono:"JetBrains Mono",Consolas,"SFMono-Regular",ui-monospace,monospace;
  --sans:Inter,"PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
  /* SUDO Desk 字标（§4g）。--sans-cond 是字体文件取不到时的兜底栈：
     系统里的窄体优先，没有就退到普通无衬线，靠 600 / 400 两截撑住写法。 */
  --sans-cond:"Barlow Semi Condensed","Roboto Condensed","Helvetica Neue Condensed",
              "PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --desk-ink:#6e6e6a;               /* 字标里「Desk」那半截的浅灰，只用在 .sdw i 上 */

  /* ---- 第七轮：版心和字号跟着窗口走。改这里 = 改全站尺度，别再散到规则里 ----
     版心公式：min(1560px, max(1180px, 92vw))。1180 是下限（= 第六轮的版心），
     所以 1180 以下的窗口里 .wrap 就是满宽减内边距，手机端和第六轮一模一样；
     1283 以上才真正开始变宽，1696 以上停在 1560。≥1920 断点再放开（第十轮：min(2600px,84vw)，见文件末尾那个 media 块）。
     内容宽（= 版心减两边内边距）在 site 各处算 sizes 用，build.py 的 csz() 抄的就是这套公式。 */
  --wrap:min(1560px,max(1180px,92vw));
  --wrap-pad:clamp(24px,4vw,64px);
  --sec-pad:clamp(96px,9vw,180px);
  /* ---- 第九轮：导航自己也跟着窗口走（4K 上 13px 的字读不出来） ---- */
  --nav-h:clamp(52px,3vw,100px);
  --nav-fs:clamp(13px,.75vw,26px);
  --brand-h:clamp(20px,1.2vw,40px);
  --nav-gap:clamp(28px,1.7vw,58px);   /* 猫标到「产品」 */
  --nav-gap2:clamp(32px,1.9vw,66px);  /* 导航项之间、语言切换左边 */
  /* 首屏视频裁切：容器 16:9，视频 cover 之后再放大 k，让产品宽占容器 85%。
     k = .85 / .808 —— .808 是 hero-loop-1920-poster.png 里产品包围盒的宽占比（PIL 量的）。 */
  --hero-k:1.052;
  --radius:24px;                    /* 第十轮：媒体容器 / 卡片 / 面板统一圆角（按钮的 980px 全圆不算） */
  --gap-3:clamp(16px,1.6vw,28px);   /* 三等分栅格（S4 三卡 / S7 三张 / 支持页平台卡 / 三步） */
  --fs-h1:clamp(96px,10vw,200px);
  --fs-h2:clamp(40px,3.8vw,72px);
  --fs-h3:clamp(30px,2.7vw,52px);   /* 段内小标题（拆开看 / S8 / 规格页 CTA / 平台卡） */
  --fs-sub:clamp(18px,1.5vw,26px);
  --fs-body:clamp(16px,1.1vw,19px);
  --fs-small:clamp(13px,.95vw,16px);
  --fs-mono:clamp(12px,.85vw,15px); /* 等宽标注 */
}
html[lang^="zh"]{--sans:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",Inter,sans-serif}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--coral);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--wrap-pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 导航 ---------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--coral);color:var(--bg);padding:10px 16px;z-index:99}
.skip:focus{left:8px;top:8px}
/* 毛玻璃挂在 .bar 上，不挂 nav —— backdrop-filter 会给 position:fixed 造出包含块，
   挂在 nav 上手机端那个全屏抽屉就撑不满屏了。nav 自己只负责 sticky 和定位上下文。 */
nav{position:sticky;top:0;z-index:20;height:var(--nav-h)}
nav .bar{height:var(--nav-h);background:var(--nav-bg);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line)}
nav .bar>.wrap{display:flex;align-items:center;height:var(--nav-h);gap:var(--nav-gap)}
.brand{display:flex;align-items:center;gap:clamp(10px,.6vw,20px)}
.brand svg{height:var(--brand-h);width:auto;color:var(--ink)}
nav ul{display:flex;gap:var(--nav-gap2);list-style:none;margin-left:auto;font-size:var(--nav-fs);color:var(--ink-2)}
nav ul a:hover{color:var(--ink)}
nav ul .here>*{color:var(--ink);font-weight:600}
nav ul .muted{opacity:.45;cursor:default}
nav .lang{font-size:var(--nav-fs);color:var(--ink-2);margin-left:var(--nav-gap2);font-family:var(--mono);white-space:nowrap}
nav .lang b{color:var(--ink)}
nav .lang a:hover{color:var(--ink)}

/* ---------- 导航左侧的「产品」面板 ---------- */
.pbtn{display:inline-flex;align-items:center;gap:clamp(6px,.35vw,12px);font-size:var(--nav-fs);color:var(--ink-2);white-space:nowrap}
.pbtn:hover,.pbtn[aria-expanded="true"]{color:var(--ink)}
.pbtn svg{width:.85em;height:.85em;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s ease}
.pbtn[aria-expanded="true"] svg{transform:rotate(180deg)}
/* 关掉 JS 就是一条回首页的普通链接，面板整块不出现 */
.pmenu{display:none;position:absolute;left:0;right:0;top:var(--nav-h);background:var(--bg);border-bottom:1px solid var(--line);box-shadow:var(--shadow);opacity:0;transform:translateY(-6px);transition:opacity .25s ease,transform .25s ease}
.pmenu.open{display:block}
.pmenu.open.on{opacity:1;transform:none}
.pmenu>.wrap{position:relative;padding-top:40px;padding-bottom:32px}
.pgrid{display:grid;grid-template-columns:1.15fr 1fr;gap:var(--gap-3);align-items:stretch}
.pcard{display:flex;align-items:center;gap:32px}
.pcard .pimg{width:clamp(220px,13vw,460px);flex:0 0 clamp(220px,13vw,460px)}
.pcard b{display:block;font-size:clamp(22px,1.3vw,44px);font-weight:700;letter-spacing:.04em}
.pcard p{color:var(--ink-2);font-size:var(--fs-body);line-height:1.5;margin-top:8px;max-width:20em}
.plinks{display:flex;gap:clamp(20px,1.2vw,40px);margin-top:16px;font-family:var(--mono);font-size:var(--fs-mono);color:var(--ink-2)}
.plinks a:hover{color:var(--coral)}
.pnext{background:var(--bg-grey);border-radius:var(--radius);padding:26px 30px;display:flex;flex-direction:column;justify-content:center;gap:12px}
.pnext b{font-size:clamp(16px,1vw,32px);font-weight:600;color:var(--ink)}
.pnext .ns{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.06em;color:var(--ink-2)}
/* ---- 第十二轮：SUDO Desk 字标 + 产品标志（§4g） ----
   .sdw 是字标：SUDO 600 / Desk 400 + 浅灰，两截之间留 .18em，不加空格字符。
   .dmark 是产品标志本体（自带浅底圆角方，浅色页直接放）。
   只出现在：支持页下载卡、首页 S8 桌面端段、导航产品面板那一行、favicon。
   页头 / 页脚 / 产品卡那张图还是工作室猫标，两套不混。 */
.sdw{font-family:var(--sans-cond);font-weight:600;letter-spacing:.01em;white-space:nowrap}
.sdw i{font-style:normal;font-weight:400;color:var(--desk-ink);margin-left:.18em}
.dmark{width:44px;height:44px;border-radius:11px;flex:0 0 auto}
.dmark.big{width:56px;height:56px;border-radius:14px;margin-bottom:20px}
.pdesk{display:flex;align-items:center;gap:14px;margin-top:26px;padding-top:20px;border-top:1px solid var(--line);font-size:clamp(16px,1vw,32px);color:var(--ink)}
.pdesk .dl{font-family:var(--mono);font-size:var(--fs-mono);color:var(--ink-2);letter-spacing:.02em}
.pdesk:hover .dl{color:var(--coral)}
.pfoot{margin-top:30px;padding-top:16px;border-top:1px solid var(--line);font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.14em;color:var(--ink-3)}
.pclose{display:none;position:absolute;right:calc(var(--wrap-pad) - 10px);top:8px;width:40px;height:40px;background:none;border:0;padding:0;color:var(--ink-2);cursor:pointer}
.pclose:hover{color:var(--ink)}
.pclose svg{width:20px;height:20px;margin:0 auto;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round}

/* ---------- 版式 ---------- */
section{padding:var(--sec-pad) 0}
h1{font-size:var(--fs-h1);line-height:1;letter-spacing:-.045em;font-weight:700}
/* 第九轮：一行一句话 —— 标题和副文不再靠 max-width 折行，句子改成写短的 */
h2{font-size:var(--fs-h2);line-height:1.1;letter-spacing:-.025em;font-weight:700;max-width:none}
/* 「1 = 2」：等宽字体，字号同 h2。三个字符之间那个空格在等宽里正好是一个字宽 */
h2.eq{font-family:var(--mono);letter-spacing:0}
h3{font-weight:700}
.sub{font-size:var(--fs-sub);color:var(--ink-2);margin-top:20px;max-width:none;line-height:1.45}
/* 首屏副文一行到底，绝不折。字号自己收，别让它换行 */
#hero .sub{white-space:nowrap;font-size:clamp(15px,1.6vw,40px)}
.grey{background:var(--bg-grey)}
.grey .pop,.grey .qr,.grey .three figure,.grey .way{background:var(--bg)}
.hint{font-family:var(--mono);font-size:var(--fs-mono);color:var(--ink-2);margin-top:14px;letter-spacing:.02em}

/* 段落小标签 = 设备状态语。在跑 = 灰点，需要你批准 = 橙点，完成 = 深灰点 */
.st{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px;color:var(--ink-2);margin-bottom:18px;letter-spacing:.02em}
.st i{width:8px;height:8px;border-radius:50%;background:var(--ink-3);flex:none}
.st.warn i{background:var(--coral)}
.st.done i{background:var(--ink-2)}
.st .n{opacity:.5;margin-right:6px}

/* ---------- 单线图标：44px、1.75 圆头、珊瑚橙 ---------- */
.ic{display:block;width:44px;height:44px;color:var(--coral)}
.ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ic svg .fill{fill:currentColor;stroke:none}

/* ---------- 按钮 ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:980px;font-size:16px;font-weight:600;background:var(--coral);color:var(--bg);user-select:none;cursor:pointer;overflow:hidden;border:none;font-family:inherit;text-align:left;transition:background .2s}
.btn:hover{background:var(--coral-d)}
.btn .ring{width:18px;height:18px;border-radius:50%;border:2px solid var(--ring);position:relative;flex:none}
.btn .ring::after{content:"";position:absolute;inset:-2px;border-radius:50%;background:conic-gradient(var(--bg) var(--p,0%),transparent 0);-webkit-mask:radial-gradient(circle,transparent 60%,var(--ink) 61%);mask:radial-gradient(circle,transparent 60%,var(--ink) 61%)}
.btn small{font-family:var(--mono);font-size:11px;opacity:.75;font-weight:400}
.btn.ghost{background:transparent;color:var(--coral);border:1.5px solid var(--coral)}
.btn.ghost:hover{background:var(--coral-t)}
.btn.done,.btn.done:hover{background:var(--ink)}
.btn.gray,.btn.gray:hover{background:var(--bg-grey);color:var(--ink-2);cursor:default}
.btn[disabled]{opacity:.6;cursor:default}
.btns{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
html.no-js .btn .ring{display:none}

/* ---------- 首屏 ---------- */
#hero{padding:100px 0 40px;text-align:center}
#hero .tag{font-size:32px;margin-top:8px;letter-spacing:-.01em}
#hero .sub{margin:16px auto 0;max-width:34em}
#hero .btns{justify-content:center}
.stage{position:relative;width:82%;margin:6px auto 0}
.stage canvas{width:100%;display:block;aspect-ratio:1.6}
.stage img.still{width:100%}
html.js .stage.seq img.still{display:none}
html.js .stage.seq canvas{display:block}
.stage canvas{display:none}
/* 活屏幕：梯形屏区照 hero.png 的机位量的，S2 那张定格图用的是同一套坐标 */
.stage .live,.heroshot .live{position:absolute;left:21.1%;top:31.5%;width:57.9%;height:11.4%;overflow:hidden;background:var(--bg);clip-path:polygon(3.2% 0,96.6% 0,100% 100%,0 100%)}
.stage .live img,.heroshot .live img{width:100%;height:100%;object-fit:fill;position:absolute;inset:0;opacity:0;transition:opacity .4s}
.stage .live img.on{opacity:1}
html.no-js .stage .live img:first-child{opacity:1}
/* S2 用同一块屏，但不轮播：钉死在「需要你批准」那一张 */
.heroshot{position:relative;width:100%}
.heroshot>img{width:100%}
.heroshot .live img{opacity:1;transition:none}

/* 开场动画：标题先藏 */
html.js #hero .t{transition:opacity .7s ease,transform .7s ease}
html.js #hero.intro .t{opacity:0;transform:translateY(14px)}

/* ---------- 视频段（第六轮：屏幕连产品一起渲，不再叠 HTML 屏幕） ----------
   一个 .vbox 里：poster <img> 撑出版位，<video> 绝对定位盖在上面，默认 opacity 0。
   JS 决定什么时候 load / play / 点亮；无 JS、减少动效、手机不放的那几条，就只剩 poster。 */
.vbox{position:relative;display:block}
.vbox>img.vposter{width:100%;display:block}
.vbox>video{position:absolute;left:0;top:0;width:100%;height:100%;display:block;opacity:0;background:none;object-fit:cover}
.vbox>video.on{opacity:1}
html.no-js .vbox>video{display:none}
/* 圆角跟着各段原来的图走 */
#s4 .press.vbox>img,#s4 .press.vbox>video,.screen.vbox>img,.screen.vbox>video{border-radius:var(--radius)}
.pop .bd .vbox>img,.pop .bd .vbox>video{border-radius:4px}
/* 首屏：两条视频叠在同一位置，intro 播完把 loop 点亮、intro 熄掉，中间不空一帧 */
.vstage>video{height:auto}
/* 第十轮：首屏视频容器跟别的媒体容器一样 24px 圆角 */
.vbox.vstage{border-radius:var(--radius);overflow:hidden}
/* 拆开看：视频和 canvas 一样吃那套放大位移，标注锚点才对得上 */
.xp .cv.vbox>img.vposter,.xp .cv.vbox>video{width:100%;height:100%;object-fit:contain;transform:scale(1.25) translateX(-9%);transform-origin:50% 55%}
.xp .cv.vbox>img.vposter{position:absolute;left:0;top:0}

/* ---------- 弹窗式卡片 ---------- */
.pop{background:var(--bg);border-radius:var(--radius);overflow:hidden;border:1.5px solid var(--line);box-shadow:var(--shadow)}
.pop .hd{background:var(--coral);color:var(--bg);font-weight:700;padding:10px 16px;font-size:15px}
.pop .hd.ink{background:var(--bg-grey);color:var(--ink);border-bottom:1px solid var(--line)}
.pop .hd .r{float:right;font-weight:400;font-family:var(--mono);font-size:12px;opacity:.75;display:inline-flex;align-items:center;gap:7px}
.pop .hd .r .dot{width:7px;height:7px;border-radius:50%;background:var(--ink-3);flex:none}
.pop .hd .r.warn .dot{background:var(--coral)}
.pop .hd .r.done .dot{background:var(--ink-2)}
.pop .bd{padding:16px}
.pop .bd img{border-radius:4px}
.pop .bd .live{position:relative;aspect-ratio:800/343;container-type:inline-size}
.pop .bd .live>*{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .5s ease}
.pop .bd .live>.on{opacity:1}
html.no-js .pop .bd .live>:first-child{opacity:1}
/* 「完成」那一态：没有对应素材，整块按 UI 图的版式画出来（字号、边距照 1244×534 原图量的） */
.pop .bd .live .dscr{background:var(--bg);border-radius:4px}
.pop .bd .live .dscr .ttl{position:absolute;left:6.75cqw;right:6.75cqw;top:11.2%;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:space-between;gap:6cqw}
.pop .bd .live .dscr .ttl b{font-size:4.02cqw;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.pop .bd .live .dscr .ttl span{display:inline-flex;align-items:center;gap:1.05cqw;font-size:3.22cqw;color:var(--ink-2);white-space:nowrap}
.pop .bd .live .dscr .ttl span i{width:1.45cqw;height:1.45cqw;border-radius:50%;background:var(--ink-2);flex:none}
.pop .bd .live .dscr .ok{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px}
.pop .bd .live .dscr .ok b{font-family:var(--mono);font-size:12px;font-weight:400;color:var(--ink-2);letter-spacing:.02em}
/* 第七轮：S5 那张卡里的画面吃满卡宽，不留 16px 内边距，卡的比例就等于画面的比例
   （现在是 800/343 的 UI 图，换成视频之后 poster 多高卡就多高，不会上下留白） */
#s5 .pop .bd{padding:0}
#s5 .pop .bd .live>*,#s5 .pop .bd .live .dscr,
#s5 .pop .bd .vbox>img,#s5 .pop .bd .vbox>video{border-radius:0}
.pop code{font-family:var(--mono);font-size:22px;display:block;letter-spacing:-.01em}
.pop .m{font-family:var(--mono);font-size:12px;color:var(--ink-2);margin-top:4px}
.pop .bar{margin-top:14px;display:flex;align-items:center;gap:12px;font-size:13px;color:var(--coral);font-weight:600}
.pop .bar b{flex:1;height:6px;background:var(--bg-grey);border-radius:3px;overflow:hidden}
.pop .bar b::after{content:"";display:block;height:100%;width:var(--w,38%);background:var(--coral)}

/* 两栏段统一 1.15fr : 1fr，图 / 视频那一栏拿 1.15 那格（S5 是卡在左、文字在右，翻过来） */
.two{display:grid;grid-template-columns:1fr 1.15fr;gap:64px;align-items:center}
#s5 .two{grid-template-columns:1.15fr 1fr}

/* ---------- S2 ---------- */
#s2 .grid{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center;margin-top:56px}
.term{background:var(--bg);border-radius:var(--radius);padding:20px 22px;font-family:var(--mono);line-height:1.9;color:var(--ink-2);border:1px solid var(--line);overflow-x:auto}
.term i{color:var(--coral);font-style:normal}
.term .q{color:var(--ink);font-weight:700}
.term .dm{color:var(--ink-3)}

/* ---------- S3 屏幕：声波序列叠在屏区上 ---------- */
.screen{position:relative}
.screen>img{width:100%;border-radius:var(--radius)}
.screen .film{position:absolute;left:2.47%;top:39.89%;width:95.03%;height:18.36%;overflow:hidden;clip-path:polygon(5.96% 0,94.07% 0,100% 100%,0 100%)}
.screen .film canvas{width:100%;height:100%;display:none;object-fit:fill}
html.js .screen.seq .film canvas{display:block}

/* ---------- S4 ---------- */
#s4 .stage2{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:center;margin-top:56px}
#s4 .press{position:relative}
#s4 .press canvas,#s4 .press img{width:100%;border-radius:var(--radius);display:block;aspect-ratio:1.6}
html.js #s4 .press.seq img{display:none}
#s4 .press canvas{display:none}
html.js #s4 .press.seq canvas{display:block}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-3);margin-top:40px}
.card{border-radius:var(--radius);padding:22px;background:var(--bg);border:1px solid var(--line)}
.card .ic{margin-bottom:14px;color:var(--coral)}
.card b{display:block;font-size:34px;letter-spacing:-.02em;font-family:var(--mono)}
.card span{color:var(--ink-2);font-size:14px;display:block;margin-top:6px;line-height:1.5}
.card.buzz.shake{animation:bzz .42s ease-in-out}
@keyframes bzz{0%,100%{transform:translateX(0)}20%{transform:translateX(-3px)}40%{transform:translateX(3px)}60%{transform:translateX(-2px)}80%{transform:translateX(2px)}}

/* ---------- S4b 工程图 ---------- */
#s4b{background:var(--bg-grey);position:relative;overflow:hidden;padding-top:0}
#s4b::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:48px 48px;pointer-events:none}
#s4b .wrap{position:relative}
.newtag{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.14em;border:1px solid var(--coral);color:var(--coral);padding:4px 10px;border-radius:4px;margin-bottom:18px}
#s4b .g{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:center;margin-top:56px}
.travel{font-family:var(--mono);font-size:12px;color:var(--ink-2);background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:26px 30px}
.travel svg{width:100%;height:auto;overflow:visible}
.travel .l{stroke:var(--ink-3);stroke-width:1}
.travel .d{stroke:var(--ink-3);stroke-width:1}
.travel .c{stroke:var(--coral);stroke-width:2;fill:none}
.travel text{fill:var(--ink-2);font-family:var(--mono);font-size:11px}
.travel text.b{fill:var(--ink);font-size:13px;font-weight:700}
.travel text.o{fill:var(--coral)}
.travel .knob{fill:var(--coral);animation:press 3.6s cubic-bezier(.4,0,.2,1) infinite}
@keyframes press{0%,12%{transform:translateY(0)}30%,48%{transform:translateY(90px)}66%,80%{transform:translateY(155px)}100%{transform:translateY(0)}}
.dim{position:absolute;font-family:var(--mono);font-size:11px;color:var(--ink-2);letter-spacing:.06em}
.dim::before{content:"";position:absolute;background:var(--ink-3)}
.dim.h{left:6%;right:6%;bottom:-26px;text-align:center}
.dim.h::before{left:0;right:0;top:-8px;height:1px}
.dim.v{top:6%;bottom:6%;right:-56px;writing-mode:vertical-rl}
.dim.v::before{top:0;bottom:0;left:-8px;width:1px}
.figw{position:relative}
.figw img{border-radius:var(--radius);width:100%}

/* 拆开看 / 卫星轴 */
.xp{margin-top:72px;display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:center}
/* 卫星轴那一块是文字在左、图在右，栏比翻过来，1.15 还是给图 */
.xp.flip{grid-template-columns:1fr 1.15fr}
.xp .cv{position:relative;aspect-ratio:1.6;overflow:hidden;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius)}
.xp .cv canvas,.xp .cv>img{width:100%;height:100%;display:block;object-fit:contain}
.xp #xpc,.xp .cv>img.xpstill{transform:scale(1.25) translateX(-9%);transform-origin:50% 55%}
html.js .xp .cv>img.xpstill{display:none}
.xp #xpc{display:none}
html.js .xp #xpc{display:block}
.xp .cv svg.lead{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.xp .cv svg.lead line{stroke:var(--ink-3);stroke-width:1;opacity:0;transition:opacity .35s}
.xp .cv svg.lead circle{fill:var(--coral);opacity:0;transition:opacity .35s}
.xp.open .cv svg.lead line,.xp.open .cv svg.lead circle{opacity:1}
.xp .lab{position:absolute;font-family:var(--mono);font-size:12px;color:var(--ink);white-space:nowrap;opacity:0;transform:translateX(-6px);transition:opacity .35s,transform .35s;pointer-events:none}
.xp .lab b{color:var(--coral);margin-right:8px}
.xp.open .lab{opacity:1;transform:none}
.xp .side h2{font-size:40px}
.xp .side p{color:var(--ink-2);font-size:17px;line-height:1.7;margin-top:14px;max-width:26em}
.xp .btn{margin-top:24px}
.xp .cv.plain{overflow:hidden}
.xp .cv.plain img{transform:scale(1.15);transform-origin:50% 43%}
html.no-js .xp .parts{display:block}
.xp .parts{display:none;font-family:var(--mono);font-size:13px;color:var(--ink-2);margin-top:18px;line-height:2;list-style:none}
.xp .parts b{color:var(--coral);margin-right:8px}

/* ---------- 三键一旋钮的标注图（第十一轮起长在「细看 SUDO」的条目 05 里） ---------- */
.keymap{position:absolute;inset:0}
.keymap>img{position:absolute;left:19%;top:0;width:62%}
.keymap svg.lead{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.keymap svg.lead path{fill:none;stroke:var(--ink-3);stroke-width:1;vector-effect:non-scaling-stroke}
.keymap svg.lead circle{fill:var(--coral);stroke:var(--bg);stroke-width:1.6;vector-effect:non-scaling-stroke}
html.js .keymap svg.lead path{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
html.js .keymap svg.lead circle{opacity:0}
html.js .keymap.on svg.lead path{stroke-dashoffset:0;transition:stroke-dashoffset .45s ease var(--d)}
html.js .keymap.on svg.lead circle{opacity:1;transition:opacity .25s ease var(--d)}
.keymap .kl{position:absolute;width:18%;transform:translateY(-50%)}
.keymap .kl.l{left:0;text-align:right}
.keymap .kl.r{left:82%}
/* 第十一轮：这张图住进「细看 SUDO」右栏之后只有原来一半宽，字号跟着收一档，
   否则 18% 的标注格里「让它停下，或者不许」会折行 */
.keymap .kl b{display:block;font-size:clamp(12px,.9vw,22px);letter-spacing:-.01em;line-height:1.3}
.keymap .kl span{display:block;font-size:clamp(10px,.72vw,18px);color:var(--ink-2);margin-top:3px;line-height:1.45}
/* 手机上引线和标注全隐掉，这份条目表顶上（≤980 的 media 里打开） */
.keylist{display:none;list-style:none}

/* ---------- 细看 SUDO（第十一轮 §4f，替掉原来的 S6 + S7） ----------
   段是灰的，卡是白的。卡 16:9，左栏 34% 是七条可展开的条目，右栏 66% 是图或视频。
   右栏那格永远比 1.6 窄（16:9 的卡减掉内边距之后 约 1.2），所以里面那个 .cf
   写 width:100% + aspect-ratio 就一定装得下，不用 max-height 兜。 */
.closer{--cl-pad:clamp(20px,2vw,64px);--cl-gap:clamp(20px,2vw,56px);
  margin-top:56px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  aspect-ratio:16/9;display:grid;grid-template-columns:34% 1fr;gap:var(--cl-gap);
  padding:var(--cl-pad);overflow:hidden}
#closer{scroll-margin-top:calc(var(--nav-h) + 16px)}

/* 右栏：七块画面叠在一起，0.4 秒交叉淡入 */
.cl-stage{position:relative;min-width:0;order:2}
.cl-pane{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .4s ease,visibility 0s linear .4s;pointer-events:none}
.cl-pane.on{opacity:1;visibility:visible;transition:opacity .4s ease}
.cf{position:relative;width:100%;aspect-ratio:var(--ar,1.6)}
.cf>img{width:100%;height:100%;object-fit:contain}
.cf .vbox{position:absolute;inset:0;border-radius:calc(var(--radius) - 8px);overflow:hidden}
.cf .vbox>img.vposter,.cf .vbox>video{width:100%;height:100%;object-fit:contain}
/* 静图缓慢放大 1.03，6 秒，只在这一条亮着的时候跑 */
@keyframes clkb{from{transform:scale(1)}to{transform:scale(1.03)}}
.cl-pane.on img.kb{animation:clkb 6s ease-out forwards}

/* 左栏：条目列表 + 上下箭头 */
.cl-list{display:flex;flex-direction:column;min-height:0;min-width:0;order:1}
.cl-items{list-style:none;flex:1;min-height:0;overflow-y:auto}
.ci{display:flex;gap:12px;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  font:inherit;color:var(--ink-2);padding:clamp(9px,.7vw,18px) 0;border-bottom:1px solid var(--line)}
.cl-items li:last-child .ci{border-bottom:0}
.ci .pl{flex:none;width:clamp(16px,1.05vw,26px);height:clamp(16px,1.05vw,26px);margin-top:.35em;color:var(--coral)}
.ci .pl svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round}
.ci .pl .v{transition:opacity .25s ease}
.ci[aria-expanded="true"] .pl .v{opacity:0}
.ci .cb{min-width:0}
.ci b{display:block;font-size:var(--fs-body);font-weight:700;color:var(--ink);letter-spacing:-.01em;line-height:1.35}
/* 展开 / 收起：0fr 到 1fr，0.25 秒 */
.ci .cw{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease}
.ci[aria-expanded="true"] .cw{grid-template-rows:1fr}
.ci .cwi{overflow:hidden}
.ci .cp{display:block;font-size:var(--fs-small);color:var(--ink-2);line-height:1.5;padding-top:8px}
.ci .cm{display:block;font-family:var(--mono);font-size:var(--fs-mono);color:var(--ink-3);
  letter-spacing:.02em;padding-top:8px}
.cl-arrows{display:flex;gap:10px;padding-top:clamp(12px,1vw,24px);flex:none}
.ca{width:clamp(32px,2.1vw,52px);height:clamp(32px,2.1vw,52px);border-radius:50%;flex:none;cursor:pointer;
  background:var(--bg-grey);border:1px solid var(--line);color:var(--ink);display:grid;place-items:center;
  transition:background .2s ease}
.ca:hover{background:var(--coral-t);border-color:var(--coral)}
.ca svg{width:60%;height:60%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ca.up svg{transform:rotate(180deg)}

/* 带标注的条目（解构视频或末帧静图）：停在末帧之后画标注，几何跟 S4b 那块同一套 */
.cf.xpl{overflow:visible}
.cf.xpl svg.lead{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.cf.xpl svg.lead line{stroke:var(--ink-3);stroke-width:1;opacity:0;transition:opacity .35s}
.cf.xpl svg.lead circle{fill:var(--coral);opacity:0;transition:opacity .35s}
.cl-pane.open .cf.xpl svg.lead line,.cl-pane.open .cf.xpl svg.lead circle{opacity:1}
.cf.xpl .lab{position:absolute;font-family:var(--mono);font-size:var(--fs-mono);color:var(--ink);
  white-space:nowrap;opacity:0;transform:translateX(-6px);transition:opacity .35s,transform .35s;pointer-events:none}
.cf.xpl .lab b{color:var(--coral);margin-right:8px}
.cl-pane.open .cf.xpl .lab{opacity:1;transform:none}
/* 第十三轮：标注挑边。放左边的从右侧淡入，排在图下方那一行的以自己为中心 */
.cf.xpl .lab.lt{transform:translateX(6px)}
.cf.xpl .lab.rc{transform:translate(-50%,4px)}
.cl-pane.open .cf.xpl .lab.lt{transform:none}
.cl-pane.open .cf.xpl .lab.rc{transform:translate(-50%,0)}

/* 条目 07「尺寸与接口」：两张正交静图并排，尺寸线由网页画（§4f 补） */
.cf.dimsc{overflow:visible}
.dimsw{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,3vw,72px);
  width:100%;height:100%;align-items:center}
.dimf{position:relative;margin:0}
.dimf img{width:100%;height:auto;object-fit:contain}
.dims{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.dims .dl,.dims .dt{fill:none;stroke:var(--ink-3);stroke-width:1;vector-effect:non-scaling-stroke}
.dims .dp{fill:var(--coral)}
.dims .dx{fill:var(--ink-2);font-family:var(--mono);font-size:34px;letter-spacing:.02em}
html.js .dims .dl,html.js .dims .dt,html.js .dims .dp,html.js .dims .dx{opacity:0;transition:opacity .4s ease}
html.js .cl-pane.on .dims .dl,html.js .cl-pane.on .dims .dt,
html.js .cl-pane.on .dims .dp,html.js .cl-pane.on .dims .dx{opacity:1}
/* 关掉 JS：七块画面全叠着没法看，只留第一条，条目文字全部展开 */
/* 七条全展开之后 16:9 装不下，卡改成按内容长 */
html.no-js .closer{aspect-ratio:auto;align-items:start}
html.no-js .cl-pane{position:relative;opacity:1;visibility:visible}
html.no-js .cl-pane:not(.on){display:none}
html.no-js .ci .cw{grid-template-rows:1fr}
html.no-js .cl-arrows{display:none}

/* ---------- S8 桌面端 ---------- */
/* S8 的「图」是画出来的托盘条，不是渲染图 —— 1.15 那格给文字，托盘越宽越空 */
.deskapp{display:grid;grid-template-columns:1.15fr 1fr;gap:64px;align-items:center;padding-bottom:72px;border-bottom:1px solid var(--line)}
.deskapp h2{font-size:40px}
.deskapp .sub{margin-top:16px}
.deskapp .btns{margin-top:26px}
/* Windows 浅色主题的任务栏右端：白底 + 细边，图标灰，只有猫是亮的 */
.tray{position:relative;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px;display:flex;align-items:center;gap:18px;justify-content:flex-end;box-shadow:var(--shadow)}
.tray .gl{width:18px;height:18px;color:var(--ink-2);flex:none}
.tray .gl svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tray .me{width:22px;height:26px;color:var(--coral);flex:none}
.tray .me svg{width:100%;height:100%}
.tray .clock{font-family:var(--mono);font-size:12px;color:var(--ink-2);margin-left:4px}
.bubble{position:absolute;right:14px;bottom:calc(100% + 12px);background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-family:var(--mono);font-size:12px;white-space:nowrap;box-shadow:var(--shadow)}
.bubble::after{content:"";position:absolute;right:22px;bottom:-5px;width:8px;height:8px;background:var(--bg);border-right:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg)}
.traywrap{padding-top:44px}
.traycap{font-family:var(--mono);font-size:12px;color:var(--ink-2);margin-top:12px;text-align:right}

/* ---------- 规格摘要 ---------- */
.specsum{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:48px;padding-top:32px}
.specsum b{display:block;font-size:26px;letter-spacing:-.02em;font-family:var(--mono)}
.specsum span{font-size:13px;color:var(--ink-2)}
.more-link{font-family:var(--mono);font-size:13px;color:var(--coral);margin-top:24px;display:inline-block}
.more-link:hover{color:var(--coral-d)}

/* ---------- 加入 ---------- */
#join .box{display:grid;grid-template-columns:1.3fr 1fr;gap:64px;margin-top:56px;align-items:start}
.field{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.field input{flex:1;min-width:240px;font-size:17px;padding:14px 18px;border:1.5px solid var(--line-strong);border-radius:980px;outline:none;font-family:var(--mono);color:var(--ink);background:var(--bg)}
.field input:focus{border-color:var(--coral)}
.field input[aria-invalid="true"]{border-color:var(--coral)}
.msg{font-family:var(--mono);font-size:13px;margin-top:12px;min-height:1.4em;color:var(--ink-2)}
.msg.ok{color:var(--ink)}
.msg.err{color:var(--coral)}
.qr{background:var(--bg);border-radius:var(--radius);padding:28px;text-align:center;border:1px solid var(--line)}
.sq{width:180px;height:180px;border:1.5px dashed var(--line-strong);border-radius:8px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--ink-2);font-family:var(--mono);text-align:center;padding:8px}
.sq.has{border-style:solid;border-color:var(--line);padding:0;overflow:hidden;background:var(--bg)}
.sq.has img{width:100%;height:100%;object-fit:contain;display:block}
.sq.s{width:120px;height:120px;margin-bottom:0;font-size:12px}
.qr .hint{margin-top:0}
.links{margin-top:22px;font-size:13px;color:var(--ink-2);display:flex;gap:22px;font-family:var(--mono);flex-wrap:wrap}
.links a:hover{color:var(--ink)}
.links .off{opacity:.5}

/* ---------- 页脚 ---------- */
/* 第十四轮：字号整体加大一档，字标挪到产品图正下方，右侧三栏最后一栏是「联系我们」 */
footer{padding:64px 0 40px;border-top:1px solid var(--line);font-size:clamp(14px,.95vw,20px);color:var(--ink-2)}
/* 两列网格，不用 flex-wrap ——「GO YOUNG STUDIO · Cat on the case」在英文里长得多，
   flex 下会把右边三栏整个挤到第二行。底部那行等宽小字横跨两列。 */
footer .wrap{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:clamp(28px,2.6vw,64px);column-gap:clamp(32px,4vw,96px)}
.fbrand{display:flex;flex-direction:column;align-items:center;gap:12px}
.catbox{position:relative;width:260px}
.catbox img{width:100%}
.catbox svg{position:absolute;left:46%;top:calc(27% - 25px);height:30px;width:auto;color:var(--ink)}
.catbox .eye{transform-box:fill-box;transform-origin:50% 50%;transform:scaleY(0)}
.catbox.blink .eye{animation:blink 6s linear infinite}
@keyframes blink{0%,97.3%{transform:scaleY(0)}97.4%,98.7%{transform:scaleY(1)}98.8%,100%{transform:scaleY(0)}}
footer .word{font-family:var(--mono);letter-spacing:.48em;text-indent:.48em;text-align:center;
  font-size:clamp(13px,.9vw,18px);color:var(--ink);max-width:100%}
/* 页脚这个也是 <nav>，得把上面 nav{} 的 sticky 和 height:var(--nav-h) 摘掉 ——
   不摘，栏里内容一高就被 58px 的高度截住（第十四轮那张二维码就是这么漏出去的）。 */
.fcols{display:flex;gap:clamp(28px,3.4vw,72px);align-items:flex-start;position:static;height:auto;z-index:auto}
.fcols>div{display:flex;flex-direction:column;gap:10px}
.fcols>div>b,.fcols>div>a,.fcols>div>span,.fcontact .hint{white-space:nowrap}
.fcols b{font-size:clamp(15px,1.05vw,23px);font-weight:700;color:var(--ink);margin-bottom:2px}
.fcols a:hover{color:var(--ink)}
.fcontact .fqr{margin-top:6px;text-align:center;display:inline-block}
.fcontact .hint{display:block;margin-top:10px}
footer .sp{grid-column:1/-1;margin-top:clamp(8px,1vw,32px);font-family:var(--mono);font-size:clamp(12px,.8vw,17px)}
footer .sp b{color:var(--ink)}
footer .sp a:hover{color:var(--ink)}

/* ---------- 支持页 ---------- */
.plat{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-3);margin-top:44px}
.pc{background:var(--bg);border:1.5px solid var(--line);border-radius:var(--radius);padding:30px 30px 26px;box-shadow:var(--shadow);display:flex;flex-direction:column;min-height:250px}
.pc .dmark{margin-bottom:16px}
.pc .os{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--ink-2)}
.pc h3{font-size:30px;letter-spacing:-.02em;margin-top:8px}
.pc .v{font-family:var(--mono);font-size:12px;color:var(--ink-2);margin-top:6px}
.pc p{color:var(--ink-2);font-size:15px;line-height:1.6;margin-top:14px;max-width:26em}
.pc .act{margin-top:auto;padding-top:22px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.pc .more{font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.pc .act a.more{color:var(--coral)}
.pc .act a.more:hover{color:var(--coral-d)}
.pc details.more{margin-top:20px}
.pc details.more summary{cursor:pointer;list-style:none}
.pc details.more summary::-webkit-details-marker{display:none}
.pc details.more summary::after{content:" +"}
.pc details.more[open] summary::after{content:" –"}
.pc details.more summary:hover{color:var(--ink)}
.pc.soon{background:var(--bg-grey);border-color:transparent;box-shadow:none}
.rel{margin-top:14px;border-top:1px solid var(--line);padding-top:14px;font-family:var(--mono);font-size:12px;color:var(--ink-2);line-height:1.8}
.rel h4{font-size:12px;letter-spacing:.1em;color:var(--ink);margin-bottom:6px;font-weight:700}
.rel ul{list-style:none;margin-bottom:14px}
.rel li::before{content:"– ";opacity:.5}
.rel .sha{word-break:break-all;display:block;color:var(--ink)}
.rel table{border-collapse:collapse;width:100%}
.rel td{padding:4px 10px 4px 0;vertical-align:top;border-bottom:1px solid var(--line)}
.rel td a{color:var(--coral)}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-3);margin-top:44px}
.step h4{font-size:24px;letter-spacing:-.02em}
.step p{font-size:15px;color:var(--ink-2);line-height:1.65;margin-top:8px;max-width:22em}
.step .ic{margin-bottom:16px}
html.js .step .ic svg .dr{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
html.js .steps.on .step .ic svg .dr{stroke-dashoffset:0;transition:stroke-dashoffset .5s ease var(--d)}
html.js .steps .step{opacity:0;transform:translateY(10px)}
html.js .steps.on .step{opacity:1;transform:none;transition:opacity .5s ease var(--d),transform .5s ease var(--d)}
html.js .steps.on .step .ic svg .drop{animation:drop .6s ease var(--d) 1}
@keyframes drop{0%{transform:translateY(-7px);opacity:0}55%{transform:translateY(2px);opacity:1}100%{transform:translateY(0);opacity:1}}

.faq{max-width:min(1100px,100%);margin-top:36px}
.faq details{border-top:1px solid var(--line);padding:18px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:17px;list-style:none;display:flex}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;color:var(--ink-2);font-family:var(--mono)}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--ink-2);font-size:15px;margin-top:10px;line-height:1.7;max-width:40em}

.help{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.help .ways{display:flex;gap:14px;margin-top:22px;flex-wrap:wrap}
.way{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;min-width:200px}
.way b{display:block;font-size:15px}
.way span{font-family:var(--mono);font-size:12px;color:var(--ink-2)}

/* ---------- 支持页底部的「技术规格」折叠节（第十一轮起完整规格表在这儿） ---------- */
.specfold{border-top:1px solid var(--line);padding-top:26px}
.specfold>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:14px}
.specfold>summary::-webkit-details-marker{display:none}
.specfold>summary::after{content:"";width:10px;height:10px;flex:none;border-right:1.6px solid var(--ink-2);
  border-bottom:1.6px solid var(--ink-2);transform:rotate(45deg) translateY(-25%);transition:transform .2s ease}
.specfold[open]>summary::after{transform:rotate(-135deg) translateY(-25%)}
.specfold .specbody{padding-top:36px}

/* ---------- 规格页 ---------- */
.spechead{background:var(--bg-grey);position:relative;overflow:hidden;padding:90px 0 80px}
.spechead::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:48px 48px;pointer-events:none}
.spechead .wrap{position:relative}

/* 正交转视图：悬停缩略图，大图交叉淡入 */
.viewer .big{position:relative;background:var(--bg-grey);border-radius:var(--radius);aspect-ratio:1.9;overflow:hidden}
.viewer .big img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:4%;opacity:0;transition:opacity .3s ease}
.viewer .big img.on{opacity:1}
html.no-js .viewer .big img{opacity:1}
.viewer .thumbs{display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:12px;margin-top:14px}
.viewer .thumbs button{background:var(--bg-grey);border:1.5px solid transparent;border-radius:16px;padding:8px 8px 6px;cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-2);display:block;width:100%;text-align:center}
.viewer .thumbs button img{width:100%;aspect-ratio:1.4;object-fit:contain}
.viewer .thumbs button b{display:block;font-weight:400;margin-top:4px}
.viewer .thumbs button[aria-current="true"]{border-color:var(--coral);color:var(--ink)}
html.no-js .viewer .thumbs{display:none}
.viewer .fallback{display:none}
html.no-js .viewer .fallback{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:18px}
html.no-js .viewer .big{display:none}
.views{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.views figure{background:var(--bg-grey);border-radius:var(--radius);aspect-ratio:1.35;display:flex;align-items:center;justify-content:center;padding:8%}
.views figure img{max-height:100%;width:auto}
.views figcaption{font-family:var(--mono);font-size:11px;color:var(--ink-2);margin-top:10px;letter-spacing:.08em}
.tbl{margin-top:64px}
.tbl:first-of-type{margin-top:0}
.tbl h3{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--coral);font-weight:700;padding-bottom:14px;border-bottom:1px solid var(--line-strong)}
.tbl dl{display:grid;grid-template-columns:clamp(200px,16vw,340px) 1fr;column-gap:32px}
.tbl dt{font-size:15px;color:var(--ink-2);padding:16px 0;border-bottom:1px solid var(--line)}
.tbl dd{font-size:17px;padding:16px 0;border-bottom:1px solid var(--line);line-height:1.5}
.tbl dd .u{font-family:var(--mono)}
.tbl dd small{display:block;font-size:13px;color:var(--ink-2);margin-top:4px}
.scalefig{margin-top:28px}
.scalefig img{width:100%;border-radius:var(--radius);background:var(--bg-grey)}
.scalefig figcaption{font-family:var(--mono);font-size:11px;color:var(--ink-2);margin-top:10px;letter-spacing:.08em}
.band{background:var(--bg-grey);padding:80px 0}
.band .wrap{display:flex;align-items:center;gap:40px;flex-wrap:wrap}
.band h2{font-size:36px;max-width:18em}
.band .btns{margin-top:0;margin-left:auto}
.note{font-family:var(--mono);font-size:12px;color:var(--ink-2);margin-top:40px;line-height:1.9}

/* ---------- 第七轮：字号随窗口 ----------
   放在所有组件规则之后，是为了盖掉上面那些写死的 px。
   导航、页脚、SVG 里的数字标注（尺寸线、行程图）不在这儿 —— 它们是定尺，不跟着放大。 */
.st,.pop .m,.traycap,.three figcaption,.more-link,.note,.newtag,.tbl h3,
.scalefig figcaption,.views figcaption,.links,.xp .parts,.rel,
.pc .os,.pc .v,.pc .more,.way span{font-size:var(--fs-mono)}
.xp .side p,.tbl dd,.pc p,.step p,.faq p,.faq summary,.field input,
.deskapp .sub{font-size:var(--fs-body)}
.card span,.specsum span,.keylist span,.way b{font-size:var(--fs-small)}
.xp .side h2,.deskapp h2,.band h2,.pc h3,.nf .l,h2.h3{font-size:var(--fs-h3)}
.step h4{font-size:clamp(22px,1.9vw,34px)}
#hero .tag{font-size:clamp(22px,2.4vw,46px)}
.pop code{font-size:clamp(18px,1.5vw,28px)}
.card b{font-size:clamp(28px,2.4vw,44px)}
.specsum b{font-size:clamp(22px,1.9vw,34px)}
/* S2 终端框：文字跟着窗口长，否则大屏上一整栏里只剩一小块 13px 的字 */
.term{font-size:clamp(13px,.95vw,17px)}
/* 第九轮：两栏段的标题在 1fr 那格里（≈内容宽的 46%），用满 --fs-h2 一定折行。
   「一行一句话」是硬规矩，所以这几处的字号单独收一档 —— 收的是字号，不是句子。 */
#s3 h2,#s5 h2,.xp .side h2,.deskapp h2{font-size:clamp(24px,2vw,60px)}

/* ---------- 第十轮：工具页（规格 / 支持）专用字号一档 ----------
   Tim：支持页字体太大。这两页是查东西的页，不是首页那种广告页，整体比首页低一级。
   token 定在 body 上而不是 :root —— body 自己的值会盖掉 :root（含 ≥1920 那个块）里的，
   所以工具页不跟着 4K 把字号推到 120/40，一套 clamp 从 390 管到 3840。 */
body.tool{
  --fs-h2:clamp(36px,3vw,64px);
  --fs-sub:clamp(17px,1.2vw,28px);
  --fs-h3:clamp(24px,1.8vw,40px);
  --fs-body:clamp(15px,1vw,21px);    /* 卡内正文再降一档 */
  --fs-small:clamp(12px,.85vw,17px);
  --fs-mono:clamp(11px,.75vw,16px);  /* meta：系统名 / 版本 / SHA / 更新记录 */
}
/* 段标题（「下载，安装，选择你的 Agent。」「常见问题」「需要帮助？」）同页头 h2 */
body.tool h2.h3{font-size:var(--fs-h2)}
body.tool .step h4{font-size:clamp(20px,1.4vw,30px)}
body.tool .faq summary{font-size:clamp(16px,1.1vw,24px)}

/* ---------- 进视口淡入上移 ---------- */
html.js .rv{opacity:0;transform:translateY(12px)}
html.js .rv.in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}

/* ---------- 404 ---------- */
.nf{padding:120px 0;background:var(--bg);min-height:calc(100vh - 300px);display:flex;align-items:center}
.nf>.wrap{width:100%}
.nf .code{font-family:var(--mono);font-size:13px;letter-spacing:.16em;color:var(--ink-2)}
.nf .l{font-size:30px;letter-spacing:-.02em;margin-top:20px}
.nf .l a{color:var(--coral);font-size:17px;margin-left:16px;white-space:nowrap}
.nf .l a:hover{color:var(--coral-d)}

/* ---------- 响应式 ---------- */
/* 大屏：首屏那块画面吃满版心，不再是 82%（手机和中等窗口不动） */
@media (min-width:1440px){
  .stage{width:100%}
  /* 第九轮：视频版首屏裁掉画面自带的白边 —— 容器 16:9，poster 和视频一起 cover + scale(k)。
     k 见 :root 的 --hero-k（按 hero-loop poster 的产品包围盒算的）。
     只在 ≥1440 生效：1440 以下版心本来就不宽，再裁产品就顶边；手机按任务书不裁。 */
  .stage.vstage{aspect-ratio:16/9;overflow:hidden}
  .stage.vstage>img.vposter,.stage.vstage>video{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;transform:scale(var(--hero-k));transform-origin:50% 50%}
}
/* ≥1920 再加一档。第九轮把上限整个推到 4K：版心不再卡 1760，字号上限按任务书 §4d 放大。
   vw 系数一个没动 —— 1920 上看到的还是第七轮那套尺度，变的只是 2400 以上还长不长得下去。 */
@media (min-width:1920px){
  :root{
    /* 第十轮：不贴边 —— 两侧各留约 16%。1920 屏 1613px，3840 屏 2600px */
    --wrap:min(2600px,84vw);
    --wrap-pad:clamp(24px,4vw,96px);
    --sec-pad:clamp(96px,9vw,260px);
    --fs-h1:clamp(96px,10vw,320px);
    --fs-h2:clamp(40px,3.8vw,120px);
    --fs-h3:clamp(30px,2.7vw,90px);
    --fs-sub:clamp(18px,1.5vw,40px);
    --fs-body:clamp(16px,1.1vw,28px);
    --fs-small:clamp(13px,.95vw,24px);
    --fs-mono:clamp(12px,.85vw,22px);
  }
  /* 散在规则里的那几条自带 clamp 的字号，上限跟着一起放（vw 系数同样没动）。
     不放的话 4K 上首屏副题、三张小卡的数字、终端框会停在 1920 的尺寸，跟旁边差一倍。 */
  .step h4{font-size:clamp(22px,1.9vw,100px)}
  #hero .tag{font-size:clamp(22px,2.4vw,110px)}
  .pop code{font-size:clamp(18px,1.5vw,70px)}
  .card b{font-size:clamp(28px,2.4vw,100px)}
  .specsum b{font-size:clamp(22px,1.9vw,80px)}
  .term{font-size:clamp(13px,.95vw,30px)}
  .nf .l{font-size:clamp(30px,2.4vw,90px)}
  .tbl dl{grid-template-columns:clamp(200px,16vw,620px) 1fr}
  .btn{font-size:clamp(16px,1vw,30px);padding:clamp(14px,.85vw,26px) clamp(26px,1.5vw,48px)}
  .btn .ring{width:clamp(18px,1.1vw,34px);height:clamp(18px,1.1vw,34px)}
  .btn small{font-size:clamp(11px,.7vw,20px)}
  .ic{width:clamp(44px,2.6vw,88px);height:clamp(44px,2.6vw,88px)}
}
@media (max-width:980px){
  section{padding:88px 0}
  h1{font-size:104px}
  h2{font-size:42px}
  .sub{font-size:20px}
  .two,#s5 .two,#s2 .grid,#s4 .stage2,#s4b .g,.xp,.xp.flip,#join .box,.help,.deskapp{grid-template-columns:1fr;gap:36px}
  .xp .cv{aspect-ratio:1.45}
  .views{grid-template-columns:repeat(2,1fr)}
  .tbl dl{grid-template-columns:170px 1fr;column-gap:20px}
  .dim.v{display:none}
  .traywrap{padding-top:36px}
  /* 三键那条：手机上引线和标注读不清，换成图 + 一份条目表 */
  .keymap{position:static}
  .keymap>img{position:static;width:100%}
  .keymap svg.lead,.keymap .kl{display:none}
  .cl-pane .keylist{display:block;margin-top:14px}
  .cl-pane .keylist li{padding:10px 0;border-top:1px solid var(--line)}
  .cl-pane .keylist b{display:block;font-size:15px;color:var(--ink)}
  .cl-pane .keylist span{font-size:13px;color:var(--ink-2)}
  /* 细看 SUDO：卡变竖排，图在上、条目在下，条目横向可滚 */
  .closer{aspect-ratio:auto;display:block}
  .cl-stage{position:relative;aspect-ratio:1.6;height:auto}
  .cl-pane{display:block}
  .cf{position:absolute;left:0;top:50%;transform:translateY(-50%)}
  .cl-pane[data-labels="keymap"]{position:static;display:none;overflow:visible}
  .cl-pane[data-labels="keymap"].on{display:block}
  .cl-pane[data-labels="keymap"] .cf{position:relative;top:0;transform:none;aspect-ratio:auto}
  .cl-list{margin-top:22px}
  .cl-items{display:flex;gap:12px;overflow-x:auto;overflow-y:visible;
    -webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;padding-bottom:6px}
  .cl-items li{flex:0 0 min(74vw,300px);scroll-snap-align:start}
  .ci{height:100%;align-items:flex-start;border:1px solid var(--line);
    border-radius:16px;padding:14px 16px}
  .cl-items li:last-child .ci{border:1px solid var(--line)}
  .ci[aria-expanded="true"]{border-color:var(--coral)}
  .ci b{font-size:16px}
  .ci .cp{font-size:14px}
  /* 「产品」面板变全屏抽屉，从上滑下 */
  .pmenu{position:fixed;top:0;left:0;right:0;height:100vh;height:100dvh;overflow-y:auto;border-bottom:0;box-shadow:none;z-index:30;transform:translateY(-100%)}
  .pmenu>.wrap{padding-top:72px;padding-bottom:48px}
  .pclose{display:block;top:18px}
  .pgrid{grid-template-columns:1fr;gap:26px}
  .pcard{flex-direction:column;align-items:flex-start;gap:20px}
  .pcard p{max-width:none}
  html.pmopen,html.pmopen body{overflow:hidden}
}
@media (max-width:700px){
  .wrap{padding:0 20px}
  section{padding:64px 0}
  #hero{padding:56px 0 24px}
  h1{font-size:64px}
  #hero .tag{font-size:20px}
  h2{font-size:30px;max-width:none}
  .sub{font-size:17px;margin-top:14px}
  .stage{width:100%}
  .btn{padding:12px 20px;font-size:15px}
  .btns{gap:10px}
  nav .bar>.wrap{gap:14px}
  nav ul{gap:16px;font-size:12px}
  nav .lang{margin-left:14px;font-size:12px}
  .pbtn{font-size:12px}
  .cards,.steps,.plat,.specsum{grid-template-columns:1fr}
  .deskapp h2{font-size:28px}
  .card b{font-size:28px}
  .specsum b{font-size:22px}
  .xp .side h2{font-size:28px}
  .tbl dl{grid-template-columns:1fr}
  .tbl dt{padding:14px 0 0;border:none;font-size:13px;font-family:var(--mono)}
  .tbl dd{padding:4px 0 14px;font-size:16px}
  .catbox{width:200px}
  .nf{padding:80px 0;min-height:calc(100vh - 340px)}
  .nf .l{font-size:24px}
  .nf .l a{display:block;margin:8px 0 0}
  footer .wrap{grid-template-columns:1fr}
  footer .sp{margin-left:0;width:100%}
  .fcols{gap:26px;width:100%;flex-wrap:wrap}
  .fcols>div>b,.fcols>div>a,.fcols>div>span,.fcontact .hint{white-space:normal}
  .qr .sq{width:150px;height:150px}
  .fbrand{align-items:flex-start}
  footer .word{text-align:left;letter-spacing:.26em;text-indent:.26em}
  .pc{padding:24px}
  .pc h3{font-size:24px}
  /* 规格页视图：横向滑动条 */
  .viewer .thumbs{display:flex;overflow-x:auto;gap:10px;padding-bottom:6px;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}
  .viewer .thumbs button{flex:0 0 116px;scroll-snap-align:start}
  .viewer .big{aspect-ratio:1.5}
  html.no-js .viewer .fallback,.views{grid-template-columns:1fr 1fr}
}

/* ---------- 减少动态效果：全关 ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  html.js .rv{opacity:1;transform:none}
  html.js #hero.intro .t{opacity:1;transform:none}
  .travel .knob{animation:none}
  .stage .live img{transition:none}
  .three figure:hover img{transform:none}
  .catbox.blink .eye{animation:none}
  .card.buzz.shake{animation:none}
  html.js .keymap svg.lead path{stroke-dashoffset:0}
  html.js .keymap svg.lead circle{opacity:1}
  html.js .step .ic svg .dr{stroke-dashoffset:0}
  html.js .steps .step{opacity:1;transform:none}
  html.js .steps.on .step .ic svg .drop{animation:none}
  .pmenu{transition:none}
  .pbtn svg{transition:none}
  /* 视频一概不放，只留 poster（JS 那边也不 load，这条是兜底） */
  .vbox>video{display:none}
  /* 细看 SUDO：静图不缓放，标注直接给终态 */
  .cl-pane.on img.kb{animation:none}
  .cl-pane .cf.xpl svg.lead line,.cl-pane .cf.xpl svg.lead circle,.cl-pane .cf.xpl .lab{opacity:1;transform:none}
  .cl-pane .cf.xpl .lab.rc{transform:translate(-50%,0)}
}