/* vgrab 官网 —— 一套样式管所有页面。
   颜色、字体照 evidence/2026-09-01-设计稿/S4 Downloader Site D.dc.html；版式 2026-09-02 重排：
   所有页面同一个 1240 的版心（Human：「页面太窄了，统一官网各页面的宽度和风格」），
   页头页脚每页一样，文字页两栏，下载页右边一条栏放广告和队列。
   设计稿只有浅色一套，这里也只做浅色。 */

/* 第 569 件（Human 2026-09-11 报的：「我才装了插件，怎么就有红点了」）：
   **`hidden` 这个属性只是浏览器自带样式里的 `display:none`，作者样式里任何一条 `display` 都能把它盖掉。**
   我们给 `.灵`（那个小红点）写了 `display:block`，于是 `点.hidden = true` 在界面上根本不生效——
   刚装好、计数还是 0 的用户也看得见那个点，清零之后也消不掉（只是不动了）。
   这一条放在所有样式前面兜底：凡是标了 hidden 的，一律不显示。 */
[hidden] { display: none !important; }

/* 第 775 件（2026-09-18 加法语时撞上）：首页演示窗里那几个动画元素（鼠标指针、滑动的面板）
   在动画的某些帧会比容器宽出两三像素，页面就多出一条横向滚动条，用户会觉得页面能左右晃。
   法语这类文字长的语言更容易触发，中文看不出来。
   用 `clip` 而不是 `hidden`：`hidden` 会把根元素变成滚动容器，页面里的 `position:sticky` 会失效。
   这条不会掩盖真正的版式问题：用例是逐个元素量宽度的，元素真撑破了照样报。 */
html, body { overflow-x: clip; }

:root{
  /* 第 586 件（Human 2026-09-12 报的：下载页右边一条从上到下的黑竖条）：
     **那条黑的是浏览器画的滚动条**。这一站只有浅色一套（见文件开头那段），
     可样式里从来没声明过用哪一套配色，于是浏览器按用户自己的深色偏好画滚动条和输入框——
     浅色的页边上贴一条深色滚动条，就成了他看见的那根竖条。
     声明 light 之后，滚动条、输入框、下拉框一律按浅色画，跟页面对得上。 */
  color-scheme: light;
  --bg:#EAECF1; --ink:#14161A; --white:#FFFFFF;
  --green:#248F5D;   /* 安装按钮专用，整站只有它是绿的（第 332 件）。
     2026-09-03 从 #1E7A4E 调浅一档：白字在它上面的对比度 4.07:1，够读（无障碍标准大字要 3.0）；
     再浅就掉到 3.4 以下了，白字开始发虚。鼠标停上去翻成品牌红，见 .钮-装:hover */
  --red:#C9302A; --red2:#D93B33; --red3:#BE2C25; --red-light:#F07A73; --red-wash:#FDECEA; --red-line:#F0BDB8;
  --t1:#4A505C; --t2:#5B6270; --t3:#78808E; --t4:#8A919E; --t5:#9AA1AE; --t6:#B4BAC6; --t7:#C4C8D0;
  --l0:#D8DCE4; --l1:#DDE1E8; --l2:#DCE0E7; --l3:#E2E5EC; --l4:#E4E7ED; --l5:#EDEFF3; --l6:#C9CFDA;
  --s1:#F2F3F7; --s2:#F5F6F9; --s3:#F7F8FB; --s4:#F3F4F8;
  --ad:#E1E4EA; --ad-t:#949BA8;
  --warn:#B0722A; --warn-bg:#FBF4E9; --warn-line:#EBDCC2; --warn-t:#75603C; --warn-line2:#E3CDA4;
  /* 中文字体不打包、不从网上拉，用各系统自带的黑体（这是中文网站的通行做法）：
     Mac 苹方、Windows 微软雅黑、Linux 思源黑体。三套字体栈里中文都排在等宽字体前面，
     中文永远不会落到系统默认的等宽字体（Windows 上那是宋体，小字发糙）。繁体页在下面换成繁体字形的那几款。 */
  --cjk:'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans CJK SC','Source Han Sans SC';
  --disp:'Bricolage Grotesque',var(--cjk),system-ui,sans-serif;
  --body:'Work Sans',var(--cjk),system-ui,sans-serif;
  --mono:'JetBrains Mono',var(--cjk),Consolas,monospace;
  --pad:32px;
  --版:1240px;        /* 唯一的版心宽度，页头、页脚、正文都用它 */
  --头高:72px;        /* 粘在顶上的页头有多高，两栏文字页左栏「贴顶」时要让开它 */
}
:root:lang(zh-TW),:root:lang(zh-Hant){--cjk:'PingFang TC','Microsoft JhengHei','Noto Sans CJK TC','Source Han Sans TC'}
/* 第 876 件：日文页、韩文页各配自己的字体（扩展 popup.css 同一处有一样的两行和为什么）。原来日文页落在上面那串简体字体上，
   Windows 上画的是微软雅黑，汉字是中文字形。Yu Gothic 普通字重在 Windows 上发虚，正文用 UI 这一款 */
:root:lang(ja){--cjk:'Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic UI','Yu Gothic','Meiryo','Noto Sans CJK JP','Noto Sans JP','Source Han Sans JP'}
:root:lang(ko){--cjk:'Apple SD Gothic Neo','Malgun Gothic','Noto Sans CJK KR','Noto Sans KR','Source Han Sans KR'}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;background:var(--bg)}
body{font-family:var(--body);color:var(--ink);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
a{color:var(--red);text-decoration:none;border-bottom:1px solid rgba(201,48,42,.3)}
a:hover{color:var(--ink);border-bottom-color:var(--ink)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--red);outline-offset:2px}
button{font:inherit}
[hidden]{display:none!important}
.撑{flex:1}
.宽{max-width:var(--版);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

/* ---------- 按钮：一律药丸形 ---------- */
.钮{display:inline-block;font-family:var(--body);font-size:14px;font-weight:600;line-height:1.2;color:var(--ink);
  background:var(--s1);border:1px solid var(--l0);border-radius:999px;padding:11px 22px;cursor:pointer;
  text-align:center;white-space:nowrap;transition:background .15s,border-color .15s,color .15s,transform .15s}
.钮:hover{border-color:var(--ink);color:var(--ink)}
.钮:active{transform:translateY(1px)}
.钮[data-主],.钮-红{background:var(--red);border-color:var(--red);color:var(--white)}
.钮[data-主]:hover,.钮-红:hover{background:var(--ink);border-color:var(--ink);color:var(--white)}
.钮-黑{background:var(--ink);border-color:var(--ink);color:var(--white)}
.钮-黑:hover{background:var(--red);border-color:var(--red);color:var(--white)}
/* 安装按钮（第 332 件，Human 2026-09-03 从 demo 里选的绿色方案）。
   为什么单起一个类、不把 .钮-黑 整个改绿：绿色要专属于「安装」这一个动作才跳得出来——
   整站再没有第二处绿色，眼睛一扫就找到它。反馈页那两个按钮（粘贴、发送）照旧用墨色。
   他原话是「黑色是不是不太合适，让人别有那么大心理压力」：绿在界面里的含义是「放行、可以往下走」。 */
/* 安装按钮：白底、红字、两像素红边，鼠标停上去整个填成红底白字（第 341 件，Human 从 demo 里选的）。
   为什么是这一版：整个按钮没有一块深色，不压抑（他一直说黑色有心理压力）；
   红是我们自己的主色，跟站里搭；醒目靠的是红色的轮廓和字，不是靠深色面积压过去。
   绿和蓝试过，他说跟主页色调不搭——站里从头到尾只有墨色、品牌红和灰蓝底，那两个是外来色。 */
/* 第 742 件（Human 2026-09-15 定）：安装按钮绿底白字，更显眼。绿是站里的安装专用色（--green）。 */
.钮-装{background:var(--green);border-color:var(--green);color:var(--white)}
.钮-装:hover{background:var(--ink);border-color:var(--ink);color:var(--white)}
.钮-白{background:var(--white);border-color:var(--l0);font-weight:500}
.钮-淡{background:transparent;border-color:var(--l2);color:#6B7280;font-weight:500}
.钮-淡:hover{color:var(--ink)}
.钮-大{font-size:22px;padding:22px 48px;min-width:270px}
.钮-大.钮-白{padding:15px 24px}
.钮-小{font-size:15px;padding:11px 23px}
/* 第 742 件：页头那个安装按钮加大一档（高约 46、宽约 150），搜索进来的陌生人一眼看到。
   **底色要用高优先级压回绿**：反馈页那块有一条通用 .钮-小（透明底灰字）排在后面，会把 .钮-装 的绿盖掉。 */
.航 .钮-装.钮-小{font-size:15.5px;padding:12px 26px;background:var(--green);border:1px solid var(--green);color:var(--white)}
.航 .钮-装.钮-小:hover{background:var(--ink);border-color:var(--ink);color:var(--white)}

/* ---------- 页头：每一页都一样，粘在顶上 ---------- */
.航{position:sticky;top:0;z-index:20;background:rgba(234,236,241,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(20,22,26,.06)}
.航 .航内{display:flex;align-items:center;gap:22px;height:var(--头高)}
/* 品牌：图标 40、字 26 粗体，比设计稿（28 / 16.5）大一圈——Human 2026-09-02：「当前字和 icon 有点小」，照 fetchv 的尺寸来 */
.牌{display:flex;align-items:center;gap:11px;color:var(--ink);border:0;font-family:var(--disp);font-weight:800;font-size:26px;letter-spacing:-.03em;line-height:1}
.牌:hover{color:var(--ink)}
.牌 img{width:40px;height:40px;flex-shrink:0;border-radius:9px;background:var(--white)}
.航位{font-size:13.5px;color:var(--t3);border-inline-start:1px solid var(--l0);padding-inline-start:16px;margin-inline-start:-8px;white-space:nowrap}
.航链{font-size:14px;color:var(--t2);border:0}
.航链:hover{color:var(--ink)}
/* 语言下拉（第 322 件）：一个地球图标，点开是语言全名的清单。
   用 <details>/<summary> 做，没有脚本也能开合；页脚那一列的语言链接跟这里是同一份 HTML。 */
.语{position:relative}
.语 summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:999px;color:var(--t2);transition:background .15s,color .15s}
.语 summary::-webkit-details-marker{display:none}
.语 summary:hover{background:var(--s1);color:var(--ink)}
.语[open] summary{background:var(--s1);color:var(--ink)}
.语 summary:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.语 summary svg{width:20px;height:20px;display:block}
.语-单{position:absolute;inset-inline-end:0;top:calc(100% + 8px);min-width:150px;z-index:30;
  display:flex;flex-direction:column;padding:6px;
  background:var(--white);border:1px solid var(--l2);border-radius:12px;
  box-shadow:0 18px 40px -22px rgba(20,22,26,.5)}
.语-单 a{padding:8px 12px;border-radius:8px;border:0;font-size:13.5px;color:var(--t1);white-space:nowrap}
.语-单 a:hover{background:var(--s1);color:var(--ink)}
.语-单 a.现{color:var(--ink);font-weight:600}

/* ---------- 页脚：每一页都一样 ---------- */
.脚{padding-top:44px;padding-bottom:38px;border-top:1px solid var(--l2)}
/* 三列：下载 · 帮助 · 关于（第 323 件）。原来第四列是 13 种语言的清单，第 842 件改成底部一行里的地球按钮 */
.脚-栏{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 30px;margin-bottom:38px}
.脚-组 h2{font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--t4);margin:0 0 13px}
.脚-组 nav{display:flex;flex-direction:column;gap:10px}
.脚-组 nav a{font-size:13.5px;line-height:1.4;color:var(--t2);border:0}
.脚-组 nav a:hover{color:var(--ink)}
.脚-组 nav a.现{color:var(--ink);font-weight:600}
/* 品牌 + 版权 + 支持的浏览器，一行（第 325 件：原来品牌旁边单独摆一个 vgrab.net、
   版权行里又写一遍域名，同一个域名在页脚出现两次） */
.脚-底{padding-top:24px;border-top:1px solid var(--l3)}
/* 品牌在左、地球按钮在右，同一行（第 842 件） */
.脚-底行{display:flex;align-items:center;justify-content:space-between;gap:12px}
/* 页脚里的下拉往上弹：页脚在页面最底下，往下弹会出屏 */
.语-上 .语-单{top:auto;bottom:calc(100% + 8px);box-shadow:0 -18px 40px -22px rgba(20,22,26,.5)}
.脚 .牌-脚{font-size:20px;gap:9px}
.脚 .牌-脚 img{width:30px;height:30px;border-radius:7px}
/* 版权单独一行，不跟品牌挤在一起（Human 2026-09-03：「footer 上面要有 copyright」——
   原来它是 11.5px 的灰色等宽字、贴着品牌右边，一眼扫过去看不见）。
   字号提到 12.5，颜色提一档，跟品牌隔开一行 */
.脚-权{margin:14px 0 0;font-size:12.5px;color:var(--t3);display:flex;align-items:center;gap:8px}
/* 第 941 件（Human 2026-09-29）：版权行写 EntroDream，左边配 EntroDream 的标志（方案 4「流星出圈」，
   原图 05_operation/EntroDream品牌/方案4-流星出圈/标志-1024.png 裁掉留白、缩到 65×44、压成 64 色；第 968 件换成浅蓝配色后重新生成）。
   直接写进样式表，不多一个文件，每页只随样式表下载一次；标志是装饰，右边紧跟着就是文字，不用替代文字 */
.脚-权::before{content:"";flex:none;width:33px;height:22px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEEAAAAsCAMAAAANQyXzAAAA/1BMVEUXHSkaK2EaLWYaLWYiHxOXnKVfUhHX3+2qkQwNDhEdLV3wzQqKdQ3NsAsYGyVXXGSwuMe6xNYAAP8dN4tUVF12e4UuZfBAOBB5gZE/QkYfR69OYrD///8AAAD9/f0FBggaLWf91goUFBQcMG0aKFMTGSomJyf/5AlVVVcICAnm6O1FRkg2NzjGx8qGiY0ZGRmmqKsZLWYaLWgAAH8ZIDgBPHllZ2vU1dYAAFUWFhUSEhIAVVV0dXeztLcaGhoTExMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAATG4rGAAAAQHRSTlMcIZ1T6v3+/v+g1v/+/1j//v8BHwX9DP3//yANAQD+/Pv//f79/P7//tD9/v79/lH9ccwC/AX+/QNxkAP9/BCvjThV8AAABJ5JREFUeNqVVol24kgMbF/ckGSSzM4eRqZ9YIM5l3sI/P9fTUltg2EnzKze45F0o2qpVC218u/sTe2bGbFlWXOm/F/a3U/UAd46H6ebNB0nGjB79X8QZnAfTyejfmHb+SYhOqvfRVBn0sdt/84+Uv0Y47q3h/+o/xPbboj2v0Y4nSnf9j+xSf4gjGLj5NKx/8COlKmHCADw+g9trkk9QHg7VwDqL963zdPTcfpcv8nkMwhZPdD04u+NNRWWPM2rhH4CwYszSkv/KeofR1EUBFG0AlReSW5C2vLVzxBUposq1sdEcA6C0FiwIkqvucwpBsTsvwh7KoJ9TmgViNkLB7awA2Csni8QU3IPWmt1Ewn+o9zsv2gTgO38Xe5ajh0RfVwgNqQ1afcuhlkRQj0RgJbDdzPLDr03OerV1nSNIie3Rrpl+f9WEJqJ2XwSgOUZNRin41xThozVd993SJdcjBKqtTXFS6uCoGhjSKCYI8go/RBetyjL+eTzYT0aX4igRrtDOnJ864JQJjHmECLSVwmMjuSe/B3CPNC7WUroj8Gg7ZIOvl5jaJpSvkgIWk/g6b1vppK6R65h3RU2RxzCcDBskI6b+5k6nQQhMzR84xBi/qGXiCBbEwPxynkoSqYbUEPugM3FvmY7nNbYMzmmxDmkkiokGUFLc1luvQLhUCq9MwTAsOG6sqD1ntHTokyM8FFkg2hQeESxpdiG5kQFtVqjOyis3e42Gh1UZWEVCKMEjjEokZqGsR7DKZcahw6H0Gm3B8PhoGLDIZQRh/YVIQwzuOA7CJymRjbCypyipT/T5HZv3NkYAOGqzPAAzxYQRlgMbeh02gcC2lYdx1jCQ+MWgiPQgSCYWvxJYYvVmegwsNQ/iCyJhWQsgInePcQQutIs4gX0sDWNMGrtwd2Ro/ZZqAVCTuGStQ9eOhWEAiBcXDT5QVHYw8lQ/qqHyTOp00ooAkLAjaUHiEoU0KUBWKuynAmF1gHcbXMutMdFYR6Y4kCuYq+KwCwEzNha4hsZBUe2Txr0T7w5CyteiSB0BaF7pQHKjgRA+sO0vFpfFdGG1TxJ0S2FBgAzArdjrduFOz5dtCMU6TsjvBVtsq7J9lWM9pBzu4UsJ4KLnvHFNHQXCMNurcbSwAWNmQXpk7OiQ2Ai7P2/uEXHqyjSMkJY5AgWR/ln3OzhoMMXotYVIsoseM80BZCY7Z0WmnQUm4slXQOyXssNr+FKyaVkDO4zy3JenIjbgtCZlNMm3Rp6WbemHWmq1eCPaRIzhst6YIqlg6gLRP/jmNbG6XRbdL6yZDiG3YwMQ9xBYqoCB/mZHjSrdreLeab9r78IkzOEH5tp4iyDVRxHIqhydihNm7vnx+hdBljoCI/8m5YEsHTwt2MjkgDl3BUIyndiWk0rw7ru5ZBEUBbC/IYH4cL3d7xiYaAtpANetlE//eS91Ouj+sTjF5iceAGAI7wWFn/jA1fLunkFKf91yTUknSTMmRmA5pTShI4SkDF2Ny+xnf/dYSGIRWaCI+VddUTu1mv/DrD6luO4Fsti7LMtF+trCr/3IuW3hGMvTcVsy/dvI/jEfgCfT1bPCmT6EQAAAABJRU5ErkJggg==) no-repeat center/contain}

/* ---------- 首页 ---------- */
/* 左右各一半：左边文字原来只占 45%，那段介绍挤成七八行，右边演示窗和它之间空着一大片 */
.雄{padding-top:64px;padding-bottom:10px;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
/* 第 915 件（Human 2026-09-28）：右边那块一直在动的演示窗口去掉了（有了视频它多余、碍眼），首屏只剩标题、说明、安装按钮和下面那行链接，居中排。
   说明最宽 760 像素左右：再宽一行字太长，眼睛从行尾回到下一行行首要找；视频区紧接在下面（.影 的上边距跟着收紧） */
.雄 > div:first-child{max-width:760px}
.雄 .钮组,.雄 .下链{justify-content:center}
.雄 h1{font-family:var(--disp);font-size:52px;font-weight:800;line-height:1;letter-spacing:-.04em;margin:0 0 18px;text-wrap:balance}
/* 第 775 件：日语没有词间空格，浏览器默认在任意字之间断行，标题会断成「拡張機 / 能」这种半个词。
   Chrome 有个专为日语做的 `auto-phrase`，按词组断；不认这个值的浏览器会忽略，退回默认行为。 */
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3, :lang(zh-Hans) h1, :lang(zh-Hant) h1 { word-break:auto-phrase; }
/* 日语的复合词（「動画ダウンロード拡張機能」）断不开，52px 放不下就会断成「拡張機 / 能」。
   小一档就能整词放下，别的语言不受影响。 */
:lang(ja) .雄 h1 { font-size:44px; }
/* ——— 关于 max-width 用 ch 这件事（2026-09-03 全面清了一遍）———
   Human 连着三轮指同一个毛病：「右侧还有很多空，左侧字就换行了，没占满空间」。
   根子都一样：给文字按字符数拍一个宽度上限，而那个数比容器给它的宽度还小，
   于是右边白空着、左边文字硬折行。
   **规矩：正文和引导语要限行长，就限在容器上（栏宽本身就是限制），不要在文字元素上再拍 ch 值。**
   全站只剩 .比 h2 还留着一个（见那一行的说明），别的都去掉了。 */
.雄 .引{font-size:18.5px;line-height:1.55;color:var(--t1);margin:0 0 28px}
/* 第 907 件：中文的首屏说明只在标点和空格处换行。这一句是几个短句拼起来的，按字换行会把「画质」拆成「画 / 质」；
   每个短句都不到十个字，最窄的手机上一行也放得下 */
:lang(zh) .雄 .引{word-break:keep-all}
.钮组{display:flex;flex-wrap:wrap;gap:11px;margin-bottom:14px}
/* 按钮下面那一行：「Edge 商店也能安装」和「安装包（ZIP 文件）下载」并排（第 341 件）。
   两个链接一个配色、都不带下划线——原来 Edge 那条是墨色字加一道红下划线，跟旁边那条灰色的不像一家的。 */
.下链{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin:14px 0 0;font-size:13.5px}
.下链 a{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--t2);border-bottom:0}
.下链 a:hover{color:var(--red)}
.下链 svg{width:15px;height:15px;flex-shrink:0;position:relative;top:1px}
.浏{font-family:var(--mono);font-size:11.5px;color:var(--t3);margin:0}
/* 安装包（ZIP）直链：商店进不去的 Chromium 浏览器只能手工装（第 317 件）。
   图标是模板里内联的下载箭头 —— 原来用边框拼了个托盘当图标，缩到这个尺寸看着就是个空方框，看不出是下载 */
/* 首屏进场：文字一行行浮上来。只在打开时走一次（第 915 件去掉右边那个窗口之后照旧留着） */
.雄 > div:first-child > *{animation:进场 .7s cubic-bezier(.2,.7,.2,1) both}
.雄 > div:first-child > *:nth-child(2){animation-delay:.08s}
.雄 > div:first-child > *:nth-child(3){animation-delay:.16s}
.雄 > div:first-child > *:nth-child(4){animation-delay:.22s}
.雄 > div:first-child > *:nth-child(5){animation-delay:.26s}

/* 会动的浏览器窗口：演一遍「扫描 → 找到 → 点一下 → 存好」，10 秒一圈。原来放在首页首屏右边，第 915 件从首页去掉了；
   博客特性页「自动挑正片」那一篇（blog/<语言>/feature-auto-pick.html）顶上还用着这一整套，所以样式和关键帧留着。
   版式照 evidence/首页设计动画参考 那份设计稿：视频框 180 高在左，清单在右，进度卡横跨一整行放在下面，
   卡片一直占着位子（只是看不见），窗口不会长高缩矮。 */
.演{border-radius:18px;border:1px solid var(--l1);background:var(--white);overflow:hidden;box-shadow:0 34px 70px -44px rgba(20,22,26,.5)}
.演-条{display:flex;align-items:center;gap:7px;padding:11px 15px;border-bottom:1px solid var(--l5);background:var(--s2)}
.演-条 i{width:8px;height:8px;border-radius:50%;background:var(--l0)}
.演-址{flex:1;margin-left:9px;height:22px;border-radius:6px;background:var(--bg);display:flex;align-items:center;padding:0 10px;font-family:var(--mono);font-size:10.5px;color:var(--t4)}
/* 工具栏右边：VGrab 图标 + 角标上的条数 + 名字（Human：凡是出现图标的地方都带上 VGrab 字样） */
.演-徽{position:relative;width:22px;height:22px;margin-left:8px}
.演-徽 img{width:22px;height:22px;display:block}
.演-徽 b{position:absolute;right:-7px;bottom:-4px;min-width:14px;height:13px;padding:0 3px;border-radius:4px;background:var(--red);color:var(--white);
  font-family:var(--mono);font-size:8.5px;font-weight:600;line-height:13px;text-align:center;animation:d角 10s linear infinite}
.演-牌{margin-left:6px;font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:-.01em;color:var(--ink)}
.演-体{position:relative;padding:20px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:18px;align-items:start}
.演-屏{position:relative;min-width:0;border-radius:11px;background:var(--ink);overflow:hidden;height:180px}
.演-画{position:absolute;inset:0;background:
  radial-gradient(60% 70% at 22% 35%,rgba(217,59,51,.42),transparent 70%),
  radial-gradient(50% 60% at 78% 70%,rgba(84,120,200,.35),transparent 70%),
  linear-gradient(180deg,#1C1F26,#14161A);animation:d画 10s ease-in-out infinite}
.演-放{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.演-放 i{width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
.演-放 i::after{content:"";width:0;height:0;border-left:13px solid rgba(255,255,255,.65);border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:4px}
.演-进{position:absolute;left:13px;right:13px;bottom:30px;height:3px;border-radius:2px;background:rgba(255,255,255,.18)}
.演-进 i{position:absolute;left:0;top:0;bottom:0;width:38%;border-radius:2px;background:var(--red2)}
.演-进 i::after{content:"";position:absolute;right:-5px;top:-4px;width:11px;height:11px;border-radius:50%;background:var(--white);box-shadow:0 0 0 3px rgba(255,255,255,.18)}
.演-扫{position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--red2),transparent);box-shadow:0 0 20px 4px rgba(217,59,51,.55);animation:dScan 10s cubic-bezier(.4,0,.6,1) infinite}
.演-扫字{position:absolute;left:13px;bottom:11px;height:14px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--t4)}
.演-扫字 > span{position:absolute;left:0;bottom:0;white-space:nowrap}
.演-扫字 .扫-中{animation:d扫字 10s linear infinite}
.演-扫字 .扫-中 i{font-style:normal;animation:dBlink 1.1s infinite}
.演-扫字 .扫-完{display:flex;align-items:center;gap:6px;color:var(--white);animation:d找到 10s linear infinite}
.演-扫字 .扫-完::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red2);box-shadow:0 0 8px var(--red2)}
.演-单{min-width:0;animation:dPanel 10s ease-in-out infinite}
.演-单头{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.演-单头 b{font-family:var(--disp);font-weight:700;font-size:12.5px;white-space:nowrap}
.演-单头 > span{font-family:var(--mono);font-size:9.5px;color:var(--t4)}
.演-行{position:relative;display:flex;align-items:center;gap:9px;padding:8px 9px;margin-bottom:5px;border-radius:8px;border:1px solid var(--l3);background:var(--white)}
.演-行.选{animation:dPick 10s linear infinite}
.演-行 .签{font-family:var(--mono);font-size:9px;font-weight:500;color:var(--t2);background:var(--s1);border-radius:4px;padding:3px 5px}
.演-行.选 .签{color:var(--red);background:var(--red-wash)}
.演-行 .题{flex:1;min-width:0;font-size:11px;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.演-行 .量{font-family:var(--mono);font-size:9.5px;color:var(--t4)}
.演-行 .标{position:absolute;right:9px;top:-9px;font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;color:var(--white);background:var(--red);border-radius:4px;padding:2px 6px;animation:dBadge 10s ease-out infinite}
.演-存{position:relative;margin-top:10px}
.演-存 button{width:100%;font-family:var(--body);font-size:12.5px;font-weight:600;color:var(--white);background:var(--red);border:none;border-radius:8px;padding:9px;cursor:default;animation:d按下 10s linear infinite}
.演-环{position:absolute;inset:0;border:2px solid var(--red);border-radius:8px;animation:dPing 10s ease-out infinite;pointer-events:none}
.演-卡{grid-column:1 / -1;border-radius:11px;border:1px solid var(--l3);background:var(--s3);padding:15px 17px;animation:dCard 10s ease-in-out infinite}
.演-卡头{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:11px}
.演-卡头 b{font-family:var(--disp);font-weight:700;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.演-态{position:relative;flex-shrink:0;height:14px;min-width:11em;font-family:var(--mono);font-size:11px;color:var(--t3)}
.演-态 > span{position:absolute;right:0;top:0;white-space:nowrap}
.演-态 .中途{animation:dSaving 10s linear infinite}
.演-态 .完{color:var(--red);animation:dDone 10s linear infinite}
.演-槽{height:9px;border-radius:6px;background:var(--l4);overflow:hidden}
.演-槽 i{display:block;height:100%;border-radius:6px;background:repeating-linear-gradient(115deg,var(--red2) 0 11px,var(--red3) 11px 22px);background-size:30px 100%;animation:dFill 10s cubic-bezier(.3,.1,.5,1) infinite,dStripe .95s linear infinite}
/* 鼠标：从窗口左下飘到「保存最佳匹配」按钮上按一下。落点是按钮的位置（相对 .演-体 左上角），按钮在右栏底部，
   横向按百分比走，窗口宽窄都落在按钮上 */
.演-鼠{position:absolute;left:42%;top:7px;width:0;height:0;border-left:8px solid var(--ink);border-top:5px solid transparent;border-bottom:12px solid transparent;transform:rotate(-18deg);filter:drop-shadow(0 1px 1px rgba(255,255,255,.9));animation:d鼠 10s cubic-bezier(.4,0,.3,1) infinite;pointer-events:none}

.比{padding-top:64px;padding-bottom:8px}
.比 h2,.暗 h2{font-family:var(--disp);font-size:46px;font-weight:800;letter-spacing:-.035em;line-height:1.05;margin:0;text-wrap:balance}
/* 这一条留着：标题的容器是整个版心（1176px），一行 1176px 的大标题没法读，
   而且它现在没造成任何换行（22ch ≈ 557px，标题本身 414px，一行就放下了）。
   限的是「标题最长排到哪」，不是把放得下的东西硬切开 */
.比 h2{margin-bottom:30px;max-width:22ch}
/* 「程序来挑，你只管点。」标题下面那一段介绍（第 314 件，原来在首页最上面当置顶介绍） */
/* 不设 max-width：这一句要在一行里说完（Human 2026-09-03）。52ch 的限制会把它折成两行，
   而版心 1240 放得下整句；窄屏放不下时自然折行，不用另外写规则 */
.比 .比-引{font-size:18.5px;line-height:1.55;color:var(--t1);margin:-16px 0 30px}
/* 中间六块上面的大标题「特性介绍」，跟别处的段落标题一个字号 */
/* 这里只能写 margin-top，不能写 margin 简写。`.功题` 和 `.宽` 都是单类选择器、优先级一样，
   这条写在后面就赢；写成 `margin:56px 0 0` 会把 `.宽` 的 `margin:0 auto` 整条盖掉，左右外边距变 0，
   标题不再居中、贴到视口左边。1280 宽的窗口上版心几乎撑满看不出来，屏幕一宽就差出好几百像素
   （Human 2026-09-03 在他的宽屏上截图指出来的）。凡是带 `.宽` 的元素要调外边距，一律只写单边。 */
.功题{font-family:var(--disp);font-size:46px;font-weight:800;letter-spacing:-.035em;line-height:1.05;margin-top:56px;text-wrap:balance}
.比-栏{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:stretch}
.比-无{border:1px solid var(--l2);border-radius:18px;background:var(--s4);padding:20px}
.比-有{border:1px solid var(--l3);border-radius:18px;background:var(--white);padding:20px;box-shadow:0 24px 54px -40px rgba(20,22,26,.5)}
.比-头{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.脸{display:flex;flex-direction:column;align-items:center;gap:5px;width:30px}
.脸 .眼{display:flex;gap:6px}
.脸 .眼 i{width:5px;height:8px;border-radius:3px;background:var(--ink)}
.比-无 .脸 .眼 i{animation:xBlink 8s linear infinite}
.脸 .嘴{width:16px;height:7px}
.比-无 .脸 .嘴{border-top:2px solid var(--ink);border-radius:16px 16px 0 0;animation:xFrown 8s linear infinite}
.比-有 .脸 .嘴{border-bottom:2px solid var(--red);border-radius:0 0 16px 16px;animation:ySmile 8s linear infinite}
.比-头 .眉{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--t5);margin:0}
.比-有 .比-头 .眉{color:var(--red)}
.比-头 .题{font-family:var(--disp);font-size:17px;font-weight:700;letter-spacing:-.02em}
.比-台{position:relative;min-width:0;height:206px;overflow:hidden}
.比-无 .文件{display:flex;align-items:center;gap:9px;height:30px;padding:0 58px 0 11px;margin-bottom:5px;border:1px solid var(--l4);border-radius:8px;background:var(--white);font-family:var(--mono);font-size:11.5px;color:var(--t3);overflow:hidden;white-space:nowrap;animation:xRow 8s linear infinite}
.比-无 .文件 i{font-style:normal;font-size:9px;color:var(--t6)}
.比-无 .文件:nth-child(2){animation-delay:.08s}
.比-无 .文件:nth-child(3){animation-delay:.16s}
.比-无 .文件:nth-child(4){animation-delay:.24s}
.比-无 .文件:nth-child(5){animation:xRow 8s linear infinite,xWrong 8s linear infinite;animation-delay:.32s,0s}
.比-无 .文件:nth-child(6){animation-delay:.4s;margin-bottom:0}
.问{position:absolute;font-family:var(--disp);font-weight:800;color:var(--warn);animation:xQ 8s ease-out infinite}
.问-1{right:34px;top:32px;font-size:17px}
.问-2{right:16px;top:104px;font-size:20px;animation-delay:.5s}
.问-3{right:40px;top:142px;font-size:15px;animation-delay:1s}
.鼠{position:absolute;left:0;top:0;width:0;height:0;border-left:8px solid var(--ink);border-top:5px solid transparent;border-bottom:12px solid transparent;transform:rotate(-18deg)}
.比-无 .鼠{animation:xCursor 8s cubic-bezier(.5,0,.5,1) infinite}
.比-有 .鼠{animation:yCursor 8s cubic-bezier(.4,0,.4,1) infinite}
.比-尾{display:flex;align-items:center;gap:9px;margin-top:16px;min-height:26px;font-family:var(--mono);font-size:10.5px;color:var(--t5)}
.比-有 .比-尾{margin-top:14px}
.比-尾 .存了{color:var(--ink);background:var(--s1);border-radius:5px;padding:4px 8px;animation:ySaved 8s linear infinite}
.赢{position:relative;display:flex;align-items:center;gap:11px;padding:10px;margin-bottom:5px;border:1px solid var(--l3);border-radius:10px;background:var(--white);animation:yWin 8s ease-out infinite}
.赢 .缩{width:52px;height:34px;border-radius:7px;background:var(--ink);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:9.5px;color:var(--red-light)}
.赢 .字{position:relative;flex:1;min-width:0;height:34px}
.赢 .乱{position:absolute;inset:0;display:flex;align-items:center;font-family:var(--mono);font-size:11.5px;color:var(--t5);white-space:nowrap;animation:yCryptOut 8s linear infinite}
.赢 .真{position:absolute;inset:0;min-width:0;animation:yReal 8s linear infinite}
.赢 .真 b{display:block;font-family:var(--disp);font-size:13.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.赢 .真 span{display:block;font-family:var(--mono);font-size:10.5px;color:var(--t3);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.赢 .标{flex-shrink:0;font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;color:var(--white);background:var(--red);border-radius:4px;padding:3px 6px;animation:yBadge 8s ease-out infinite}
.赢 .环{position:absolute;inset:0;border:2px solid var(--red);border-radius:10px;animation:yPing 8s ease-out infinite}
/* 没被选中的那几行收起来（照设计稿；之前改成只淡下去，Human 2026-09-02 要照设计稿来） */
.比-有 .淡行{height:30px;margin-bottom:5px;display:flex;align-items:center;gap:9px;padding:0 11px;border:1px solid var(--l5);border-radius:8px;background:var(--s3);font-family:var(--mono);font-size:11px;color:var(--t5);overflow:hidden;white-space:nowrap;animation:yRowOut 8s ease-in-out infinite}
.比-有 .淡行:nth-child(4){animation-delay:.07s}
.比-有 .淡行:nth-child(5){animation-delay:.14s}
.比-有 .淡行:nth-child(6){animation-delay:.21s}
.比-有 .淡行:nth-child(7){animation-delay:.28s}
.扫层{position:absolute;left:0;right:0;top:0;height:44px;background:linear-gradient(180deg,rgba(201,48,42,0),rgba(201,48,42,.14));animation:ySweep 8s linear infinite;pointer-events:none}
.比-槽{height:8px;border-radius:5px;background:var(--l4);overflow:hidden;margin-top:14px}
.比-槽 i{display:block;height:100%;width:2%;border-radius:5px;background:var(--red2);animation:yBar 8s cubic-bezier(.3,.1,.4,1) infinite}

/* 中间六块（第 319 件，2026-09-03 重做）：原来六块长得一模一样，标题前面都是同一个红勾，
   一眼扫过去分不出谁是谁。现在改成「彩色的头 + 白色的身」：头里是一张自己画的线条图，画的就是这一条在做什么，
   一块一个颜色（下面 nth-child 那六行）。块内布局参考 fetchv 首页那六块，图标和文字都是我们自己的。 */
.功{padding-top:44px;padding-bottom:76px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
/* 第 751 件：六张卡整张可点——标题是链接，::after 把点击区盖满整张卡 */
.功 article{position:relative}
.功 h3 a.功-链{color:inherit;border:0}
.功 h3 a.功-链::after{content:"";position:absolute;inset:0;border-radius:inherit}
.功 article:hover{border-color:var(--色);box-shadow:0 12px 30px -22px rgba(20,22,26,.45)}
.功 article{--色:var(--red);--底:var(--red-wash);--边:var(--red-line);
  display:flex;flex-direction:column;background:var(--white);border:1px solid var(--l3);border-radius:16px;overflow:hidden;
  transition:border-color .2s,transform .25s,box-shadow .25s}
/* 悬停只换边框颜色，不动位置也不缩放（第 326 件，Human 2026-09-03：「6 个图标不要搞放大什么的了，就是静态的」）。
   一缩放浏览器就要重新光栅化一遍，图标边缘会糊一下 */
.功 article:hover{border-color:var(--色)}
.功 .冠{background:var(--底);border-bottom:1px solid var(--边);padding:26px 20px 18px;text-align:center}
.功 .图{width:62px;height:62px;margin:0 auto 15px;border-radius:19px;background:var(--white);border:1px solid var(--边);
  display:flex;align-items:center;justify-content:center;color:var(--色);
  box-shadow:0 10px 20px -14px rgba(20,22,26,.55)}
/* 32px —— 必须跟模板里 SVG 的 viewBox（0 0 32 32）一样大。缩放一比一，线条才落在整像素上；
   一缩放就发虚，Human 2026-09-03 说的「6 个图标很模糊」就是这么来的 */
.功 .图 svg{width:32px;height:32px;display:block}
.功 h3{font-family:var(--disp);font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.25;margin:0;text-wrap:balance}
.功 p{flex:1;font-size:14.5px;line-height:1.6;color:var(--t2);margin:0;padding:18px 22px 26px;text-align:center}
/* 六个颜色都往站里这层灰蓝底色上调过，不刺眼；图标跟着 --色 走（SVG 里写的是 currentColor） */
.功 article:nth-child(1){--色:#C9302A;--底:#FBEDEB;--边:#F1C8C3}
.功 article:nth-child(2){--色:#2A5FA8;--底:#EAF1FA;--边:#C7D8EF}
.功 article:nth-child(3){--色:#1E7A5E;--底:#E7F3EF;--边:#C3E0D5}
.功 article:nth-child(4){--色:#96661F;--底:#FAF2E5;--边:#EBDBBD}
.功 article:nth-child(5){--色:#5B44A6;--底:#EFECF9;--边:#D4CBEE}
.功 article:nth-child(6){--色:#3F5573;--底:#EBEFF6;--边:#CCD5E4}

.暗{background:var(--ink);color:var(--white)}
.暗 .暗内{padding-top:78px;padding-bottom:78px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:52px;align-items:center}
.暗 ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px}
.暗 li{display:flex;gap:14px;align-items:baseline}
.暗 li b{font-family:var(--mono);font-size:11px;font-weight:400;color:var(--red-light)}
.暗 li span{font-size:16px;line-height:1.5;color:var(--t7)}

/* 往下滚到哪，哪一段浮上来。没有脚本（html 上没有 .js）就都直接显示 */
html.js .显{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
html.js .显.显-了{opacity:1;transform:none}
html.js .功 .显:nth-child(2){transition-delay:.07s}
html.js .功 .显:nth-child(3){transition-delay:.14s}
html.js .功 .显:nth-child(4){transition-delay:.21s}
html.js .功 .显:nth-child(5){transition-delay:.28s}
html.js .功 .显:nth-child(6){transition-delay:.35s}

/* ---------- 下载现场页：左边正文，右边一条栏放广告和队列 ---------- */
.下{padding-top:22px;padding-bottom:60px}
.广{margin-bottom:22px}
.广-标{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--t5);margin-bottom:6px}
.广-框{height:92px;border-radius:12px;background:var(--ad);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;color:var(--ad-t)}
/* 顶上那条横幅广告就是 728 宽，居中放，不拉成整行 */
.下 > .广{text-align:center}
.下 > .广 .广-框{max-width:728px;margin:0 auto}
.下-栏{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
.下-侧{position:sticky;top:calc(var(--头高) + 22px)}
.下-侧 .广{margin:0}
.下-侧 .广-框{height:250px}
.类{display:flex;flex-wrap:nowrap;gap:8px;margin-bottom:16px}
.类 a{font-family:var(--body);font-size:13.5px;font-weight:500;color:var(--t2);background:var(--white);border:1px solid var(--l2);border-radius:999px;padding:8px 16px;white-space:nowrap}
.类 a:hover{color:var(--ink);border-color:var(--ink)}
/* 当前这一类标签：body 的 data-类 是构建时写死的，不靠脚本，没 JS 也对 */
.类 a[aria-current],
body[data-类="hls"] .类 a[data-类="hls"],
body[data-类="file"] .类 a[data-类="file"],
body[data-类="live"] .类 a[data-类="live"]{font-weight:600;color:var(--white);background:var(--ink);border-color:var(--ink)}
.卡{background:var(--white);border:1px solid var(--l3);border-radius:18px;overflow:hidden;box-shadow:0 24px 60px -46px rgba(20,22,26,.55)}

/* 没装插件那一屏 */
.空{padding:56px 38px 44px;text-align:center}
.空 .模{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:18px}
.空 h1{font-family:var(--disp);font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1.08;margin:0 auto 14px;text-wrap:balance}
/* 不设 max-width（第 333 件，Human 2026-09-03：「明明有空间的硬要搞个换行」）。
   原来是 44ch ≈ 672px，而「Chrome、Edge、Brave、Arc 这些 Chromium 内核浏览器也能使用」
   一行要 677px（繁体 707px），就差几个像素被切成两行；这一屏是居中的，容器 840px 放得下。 */
.空 .引{font-size:16px;color:var(--t2);margin:0 auto 26px;line-height:1.55}
.空 .钮-大{font-size:16px;padding:14px 28px}
.空 .下链{justify-content:center}
.空 .浏{margin-top:8px}
.步{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:42px;text-align:start;border-top:1px solid var(--l5);padding-top:24px}
.步 span{display:block;font-family:var(--mono);font-size:10.5px;color:var(--red);margin-bottom:7px}
.步 h2{font-family:var(--disp);font-size:15px;font-weight:700;margin:0 0 4px}
.步 p{font-size:13px;line-height:1.5;color:var(--t2);margin:0}

/* 插件在：进度 */
.态条{display:flex;align-items:center;gap:11px;padding:13px 22px;background:var(--s3);border-bottom:1px solid var(--l5)}
.态条 i{width:7px;height:7px;border-radius:50%;background:var(--red2);animation:dBlink 1.4s ease-in-out infinite}
.态条[data-静] i{animation:none}
.态条[data-完] i{background:var(--ink)}
.态条[data-断] i{background:var(--warn);animation:none}
.态{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--t2);margin:0}
.身{padding:28px 22px 24px}
.头{display:flex;gap:15px;margin-bottom:24px}
.缩{width:88px;height:56px;border-radius:11px;background:var(--ink);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--mono);font-size:11.5px;color:var(--red-light)}
.头 > div{min-width:0}
.最{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--white);background:var(--red);border-radius:4px;padding:3px 7px;margin-bottom:6px;text-transform:uppercase}
.名{font-family:var(--disp);font-size:23px;font-weight:700;letter-spacing:-.025em;margin:0 0 8px;line-height:1.2}
.元{display:flex;flex-wrap:wrap;gap:7px;margin:0}
/* 第 526 件：卡上那一行「将保存为 某某.mp4」。等宽小字、一点就整行选中好复制，   跟历史里「存到哪」那一行是同一套处理 */
.将存为{margin:5px 0 0;font-size:12px;color:var(--t3);display:flex;gap:5px;align-items:baseline;flex-wrap:nowrap;min-width:0}
.将存为>span{flex:none}   /* 「将保存为」「视频地址」这两个标签不缩、不折行，缩的是后面的名字和地址 */
/* 第 845 件（Human 定的原则）：太长的文字一行放不下就中间省略、两头留着，鼠标停上去看全的。
   三个都是行内块（弹性盒会让选中复制出来的文字中间多一个换行）：前半截最多占「整行减去后半截的宽」，
   超了末尾补省略号；后半截的宽由 downloads.js 量出来写进 --尾宽，默认 0（外层按内容收缩，估个数减下去会变负、前半截消失）。
   做法和为什么见 downloads.js 的「中间省略着填进去」 */
.省中{display:inline-block;max-width:100%;min-width:0;white-space:nowrap;overflow:hidden;vertical-align:bottom}
/* 第 863 件：两截都要 white-space:pre，行内块首尾的空格会被当成行首行尾吃掉，切口是空格时两个词就粘在一起（见插件 long-text.css） */
.省中>.省前{display:inline-block;max-width:calc(100% - var(--尾宽,0px));overflow:hidden;text-overflow:ellipsis;white-space:pre;vertical-align:bottom}
.省中>.省后{display:inline-block;white-space:pre;vertical-align:bottom}
/* 第 526 件（Human 2026-09-11）：视频地址占一行就够，长了中间省略，后面跟一个复制按钮 */
.地址行{flex-wrap:nowrap;align-items:center}
.地址行 code{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:clip}
.地址行 .复制{flex:0 0 auto;margin-inline-start:2px;font-size:11.5px;padding:2px 8px;border-radius:6px;
  border:1px solid var(--l2);background:var(--white);color:var(--t2);cursor:pointer;font-family:var(--sans)}
.地址行 .复制:hover{color:var(--ink);border-color:var(--l1)}
.将存为 code{font-family:var(--mono);font-size:11.5px;color:var(--ink);background:var(--bg);padding:1px 6px;border-radius:4px;user-select:all;flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden}
.元 span{font-family:var(--mono);font-size:11px;color:var(--t2);background:var(--s1);border-radius:6px;padding:4px 9px}
/* 第 642 件 · 子任务六：选段下载那一小块。旁边几块都是中性灰，这一块染成品牌红那一档，
   一眼就能从一排卡里分出「这一件只保存了中间一截」，不用挨个读字 */
.元 .选段块{color:var(--red);background:var(--red-wash)}
/* 收着的卡上那一行小字、历史那一行上，同一块也染一样的色 */
.简 .选段块,.史-元 .选段块{color:var(--red);background:var(--red-wash);border-radius:5px;padding:1px 6px;margin-inline-end:4px}
.百行{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}
.百{font-family:var(--disp);font-size:40px;font-weight:800;letter-spacing:-.035em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.主指标{font-family:var(--mono);font-size:12.5px;color:var(--t2);text-transform:lowercase}
.槽{height:12px;border-radius:7px;background:var(--l4);overflow:hidden;margin-bottom:18px}
.槽 i{display:block;height:100%;width:0;border-radius:7px;background:repeating-linear-gradient(115deg,var(--red2) 0 11px,var(--red3) 11px 22px);background-size:30px 100%;animation:dStripe 1s linear infinite;transition:width .45s linear}
.槽[data-静] i{animation:none}
/* 第 693 件：排队中、暂停的那几张，条画成灰的——一眼看出「到这儿了，但停着」，正在下的才是红的 */
.槽 i[data-停着]{background:var(--l3);animation:none}
.格{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--l5)}
.格 > div{padding:14px 0}
.格 span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--t5);margin-bottom:6px}
.格 b{font-family:var(--mono);font-size:18px;font-weight:400;color:var(--ink);font-variant-numeric:tabular-nums}
.按{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px;align-items:center}

/* ——— 第 592 件（Human 2026-09-12）：卡默认收起来，像一条一条的列表，不是一块一块的面板 ———
   收着的时候只留：状态那一条、缩略标、片名、一行小字（段数 · 已保存 · 速度 · 剩余）、细进度条、几个主要按钮。
   文件名、视频地址、四格、底下那句「关闭页面不影响」、次要按钮都收进去，点右上角「展开」才出来。 */
.态条{position:relative}
.展钮{position:absolute;inset-inline-end:14px;top:50%;transform:translateY(-50%);font-family:var(--sans);font-size:11.5px;
  color:var(--t2);background:var(--white);border:1px solid var(--l2);border-radius:999px;padding:3px 11px;cursor:pointer}
.展钮:hover{color:var(--ink);border-color:var(--l1)}
.简{display:none;margin:2px 0 0;font-family:var(--mono);font-size:11.5px;color:var(--t2)}

/* 第 594 件（Human 2026-09-12：「百分比独占了一行，能不能提到标题前面」）：
   收着的时候把整张卡排成一张小网格——百分比、片名、按钮同一行，下面一行小字，最底下一条细进度条。
   **不动结构、只用样式**：`display:contents` 让 .头 / .百行 / 进度那一块的孩子直接参与这张网格，
   展开的时候这些规则全部不生效，还是原来那套排法。 */
/* 收着的时候连状态那一条也矮一点 */
.卡.收着 .态条{padding:9px 22px}
.卡.收着 .身{
  display:grid;
  /* 前两列固定宽：这样不管有没有百分比（排着队的那几张就没有），片名都从同一条竖线上起，
     几张卡叠在一起看着才是一列（Human 2026-09-12：「用专业 UI 的感觉审视一下」）。 */
  grid-template-columns:44px 3.1em minmax(0,1fr) auto;
  grid-template-areas:"缩 百 名 按" "缩 百 简 按" "槽 槽 槽 槽";
  align-items:center;column-gap:12px;row-gap:1px;
  padding:12px 20px 14px;
}
/* `.头 > div` 会连那个缩略标（`.缩` 本身就是个 div）一起打散——它的黑底就没了，只剩一行小红字
   （Human 2026-09-12 报的「HLS 的标志应该和下载历史里一样是黑底」）。这里把它排除掉。 */
.卡.收着 .头,.卡.收着 .头 > div:not(.缩),.卡.收着 .百行,.卡.收着 .块[data-位="块进度"]{display:contents}
.卡.收着 .缩{grid-area:缩}
.卡.收着 .百{grid-area:百}
.卡.收着 .名{grid-area:名}
.卡.收着 .简{grid-area:简}
.卡.收着 .槽{grid-area:槽}
.卡.收着 .按{grid-area:按}
/* 完成、断了那两块是整行的（下完的卡、断了的卡收着时也看得见那一句） */
.卡.收着 .块[data-位="块完成"],.卡.收着 .块[data-位="块断了"]{grid-column:1/-1}
/* 三处的缩略标长一个样：跟下载历史那一行（`.史-缩`）同样的 44×30、圆角 7、9 号等宽字、白字黑底 */
.卡.收着 .缩{width:44px;height:30px;border-radius:7px;font-size:9px;letter-spacing:.06em;color:#fff;align-self:center}
.卡.收着 .名{font-size:16.5px;margin:0}
.卡.收着 .最,
.卡.收着 .元,
.卡.收着 .将存为,
.卡.收着 .地址行,
.卡.收着 .格,
.卡.收着 .安,
.卡.收着 .按 .注,
.卡.收着 .按 button[data-动作="copy-link"],
.卡.收着 .按 button[data-动作="report"]{display:none}
.卡.收着 .简{display:block}
/* 收着的时候右边那个「x / y 段数」跟上面那一行小字重了，收起来 */
.卡.收着 .主指标{display:none}
/* 还没开工的（排着队的）没有进度可言：百分比和进度条都不摆，省得一排 0% */
.卡.收着[data-没进度] .百行,.卡.收着[data-没进度] .槽{display:none}
.卡.收着[data-没进度] .头{margin-bottom:4px}
.卡.收着 .百{font-size:21px;line-height:1;text-align:end;align-self:center}
.卡.收着 .槽{height:6px;margin:8px 0 0}
.卡.收着 .按{margin-top:0;flex-wrap:nowrap}
.卡.收着 .简{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.卡.收着 .块[data-位="块完成"] .完框{padding:10px 14px;margin-bottom:10px}
#在下单 .卡 + .卡,#排单 > * + *{margin-top:14px}
.按 .注{font-family:var(--mono);font-size:11px;color:var(--t3);margin-inline-start:auto}
/* 第 780 件：点过「放弃」「删掉」而插件一直没回应时，卡上多出来的那一句话。
   用正文字体不用等宽字体，因为它是一句话不是一个数；颜色用提醒那一档，让人看得见但不惊慌。
   `margin-left:auto` 会把它推到最右边、跟那个「从页面上移除」的按钮分开，所以这里改回 0。 */
.按 .注-没回应{font-family:var(--body);font-size:12px;color:var(--warn-t);margin-inline-start:0;flex:1 1 14em;line-height:1.45}
.完框{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:16px 18px;border-radius:12px;background:var(--s1);border:1px solid var(--l2);margin-bottom:16px}
.完框 b{font-family:var(--disp);font-size:16.5px;font-weight:700}
/* 第 521 件：下完了但少了几段，完成块底下这一行照实说 */
.缺段{margin:-8px 0 16px;font-size:12.5px;line-height:1.6;color:var(--warn-t)}
.完框 span{margin-inline-start:auto;font-family:var(--mono);font-size:12.5px;color:var(--ink)}
.断框{padding:18px;border-radius:12px;background:var(--warn-bg);border:1px solid var(--warn-line);margin-bottom:16px}
.断框 b{display:block;font-family:var(--disp);font-size:16.5px;font-weight:700;margin-bottom:6px}
.断框 p{font-size:14.5px;line-height:1.55;color:var(--warn-t);margin:0}
.块 .按{margin-top:0}
.安{display:flex;align-items:center;gap:10px;padding:13px 22px;background:var(--s3);border-top:1px solid var(--l5);margin:0}
.安 b{font-family:var(--mono);font-size:10.5px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--red);flex-shrink:0}
.安 span{font-size:13.5px;color:var(--t2)}

/* 排队：在右边那条栏里，广告下面 */
/* 排队中那一段（第 579 件）：一件一张卡，跟上面「正在下」那几张长得一样，所以只要一个段头 */
.序{font-family:var(--mono);font-size:11px;color:var(--t5);margin-inline-end:8px;font-variant-numeric:tabular-nums}
.等{font-family:var(--mono);font-size:10.5px;color:var(--t5);flex:none}

/* 使用说明 + 常见问题：进度卡下面的正文（装没装插件都显示） */
.常见 h2{font-family:var(--disp);font-size:22px;font-weight:700;letter-spacing:-.02em;margin:0 0 14px;text-wrap:balance}
.常见{margin-top:34px}
.问答{border-top:1px solid var(--l2)}
.问答:last-of-type{border-bottom:1px solid var(--l2)}
.问答 summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:16px 4px;font-family:var(--disp);font-size:16.5px;font-weight:700;line-height:1.35}
.问答 summary::-webkit-details-marker{display:none}
.问答 summary::after{content:"";margin-inline-start:auto;width:9px;height:9px;border-right:1.5px solid var(--t3);border-bottom:1.5px solid var(--t3);transform:rotate(45deg);transition:transform .2s;flex-shrink:0}
.问答[open] summary::after{transform:rotate(-135deg)}
.问答 summary:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:6px}
/* 这两条原来按字符数拍了宽度上限（72ch / 20ch），结果「差几个像素被切成两行」：
   常见问题里那句「Chrome、Edge、Brave、Arc 这些 Chromium 内核浏览器都可以」一行要 699px，
   上限却是 671.765px；「把播放器后面那个文件存下来」要 442px，上限 440.639px，就差 1.4 个像素。
   容器本身已经限住了宽度（问答那栏 840px、安装那一屏 770px），再套一层按字符数拍的上限，
   就会出现这种谁也说不清为什么的换行（第 333 件，Human 2026-09-03：「明明有空间的硬要搞个换行」）。
   规矩：正文段落要限行长就限在容器上，不要在文字元素上再拍一个 ch 值。 */
.问答 p{font-size:15px;line-height:1.65;color:var(--t2);margin:0 0 18px;padding:0 4px}
.问答 a{color:var(--red);text-decoration:underline;text-underline-offset:3px}
/* 常见问题里的示意图（现在只有「磁盘快满了怎么办」那条用）。图是浏览器设置页的截图，
   宽度跟着容器走，别撑破 */
.问答-图,.文章-主 .问答-图{margin:0 0 18px;padding:0 4px}
.问答-图 img{display:block;max-width:100%;height:auto;border-radius:10px;border:1px solid var(--l2)}

/* ---------- 下载历史（第 337 件）：一条一行，跟下载现场页共用那一套版心和广告位 ---------- */
.史-顶{margin-bottom:22px}
.史-顶 h1{font-family:var(--disp);font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:0 0 10px;text-wrap:balance}
.史-顶 .引{font-size:16px;line-height:1.6;color:var(--t2);margin:0}
.史-数{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--t5);margin:0 0 12px}
.史-单{display:flex;flex-direction:column;gap:10px}
.史-条{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;
  background:var(--white);border:1px solid var(--l3);border-radius:14px;padding:16px 18px;transition:border-color .2s}
.史-条:hover{border-color:var(--l6)}
.史-字{flex:1;min-width:0}
.史-字 h2{font-family:var(--disp);font-size:16.5px;font-weight:700;line-height:1.35;margin:0 0 6px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.史-元{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0;font-family:var(--mono);font-size:11.5px;color:var(--t3)}
/* 第 814 件：点了「播放」可浏览器放不了这种格式时，那一行底下补的一句。整行另起一行，别挤在按钮旁边 */
.史-条 .史-放不了{flex-basis:100%;margin:2px 0 0;font-size:12.5px;line-height:1.55;color:var(--t2)}
/* 第 497 件：隐私页顶上那四句合规声明 */
.四句{margin:22px 0 0;padding:16px 18px;border:1px solid var(--l2);border-radius:12px;background:var(--s1)}
.四句 h2{margin:0 0 10px;font-family:var(--disp);font-size:15px;font-weight:700}
.四句 ul{margin:0;padding-inline-start:18px}
.四句 li{margin:6px 0;font-size:13.5px;line-height:1.65;color:var(--t2)}
.史-标{flex:none;font-family:var(--mono);font-size:10px;letter-spacing:.08em;border-radius:5px;padding:4px 8px;
  background:var(--s1);color:var(--t2)}
.史-标.是-完整{background:#E7F3EF;color:#1E7A5E}
/* 第 521 件：下完了但少了几段 */
.史-标.是-缺段{background:var(--warn-bg);color:var(--warn-t)}
.史-按{flex:none;display:flex;gap:8px}
.史-注{margin:18px 0 0;font-size:12.5px;color:var(--t4)}
@media (max-width:619px){
  .史-条{align-items:flex-start}
  .史-按{width:100%}
}

/* ---------- 隐私、条款、反馈：两栏，左边标题贴顶，右边正文 ---------- */
/* 第 755 件（Human 2026-09-15 挑的丙版）：内容页不再左右分栏。标题区是独立的一整行白色横带（.带），
   正文一栏居中、最宽 880（一行四十来个汉字，够读又不显得细）。之前两栏是第 324 件为了填满版心做的，现在用横带填。 */
.带{background:var(--white);border-bottom:1px solid var(--l2)}
.文{display:block;padding:0 0 64px}
.文-侧{max-width:880px;margin:0 auto;padding:52px 0 40px}
.眉{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--t5);margin:0 0 14px}
.文 h1{font-family:var(--disp);font-size:46px;font-weight:800;letter-spacing:-.035em;line-height:1.04;margin:0 0 16px;text-wrap:balance}
.文 .引{font-size:18px;line-height:1.6;color:var(--t1);margin:0}
.文-主{min-width:0;max-width:880px;margin:0 auto;padding-top:40px}
.条{display:flex;flex-direction:column;gap:2px;margin-bottom:34px}
.条 section{display:grid;grid-template-columns:34px 1fr;gap:16px;padding:22px 0;border-top:1px solid var(--l2)}
.条 section.无号{display:block}
.条 section:first-child{padding-top:0;border-top:0}
.条 section:last-child{border-bottom:1px solid var(--l2)}
.条 .号{font-family:var(--mono);font-size:11.5px;color:var(--t5);padding-top:4px}
.条 .号.红{color:var(--red)}
.条 h2{font-family:var(--disp);font-size:18px;font-weight:700;margin:0 0 7px}
.条 p{font-size:16.5px;line-height:1.7;color:var(--t2);margin:0}
.验{border:1px solid var(--l2);border-radius:14px;background:var(--s2);padding:22px}
.验 b{display:block;font-family:var(--mono);font-size:10.5px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:12px}
.验 p{font-family:var(--mono);font-size:12.5px;line-height:1.9;color:var(--t2);margin:0}
.注脚{font-size:14.5px;line-height:1.6;color:var(--t3);margin:26px 0 0}

/* 反馈表单 */
.表{border:1px solid var(--l3);border-radius:16px;background:var(--white);padding:26px;box-shadow:0 24px 54px -44px rgba(20,22,26,.5)}
.粘{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:14px 16px;margin-bottom:22px;border:1px solid var(--l2);border-radius:12px;background:var(--s3)}
.粘 > div{min-width:0;flex:1}
.粘 b{display:block;font-family:var(--disp);font-size:15px;font-weight:700;margin-bottom:3px}
.粘 p{font-size:13.5px;line-height:1.5;color:var(--t2);margin:0}
.粘 .钮{flex-shrink:0}
.粘 .粘-手动{margin-top:6px;color:var(--red);font-weight:600}
.粘 .粘-手动[hidden]{display:none}
.贴{margin-bottom:22px}
.贴头{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.贴头 span{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--t3)}
.贴头 b{font-family:var(--mono);font-size:9.5px;font-weight:400;letter-spacing:.1em;color:var(--white);background:var(--red);border-radius:4px;padding:3px 7px;text-transform:uppercase}
.贴 pre{margin:0;font-family:var(--mono);font-size:11.5px;line-height:1.7;color:var(--t2);background:var(--s3);border:1px solid var(--l2);border-radius:10px;padding:13px 14px;white-space:pre-wrap;word-break:break-word}
.贴 p{font-size:12.5px;color:var(--t3);margin:7px 0 0}
.栏{margin-bottom:20px}
.栏 label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);margin-bottom:8px}
.栏 input,.栏 textarea{width:100%;font-family:var(--body);font-size:15px;color:var(--ink);background:var(--s3);border:1px solid var(--l2);border-radius:10px;padding:13px 14px;outline:none}
.栏 textarea{line-height:1.55;resize:vertical}
.栏 input:focus,.栏 textarea:focus{border-color:var(--ink);background:var(--white)}
.发{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.发 .钮{font-size:15.5px;padding:13px 26px}
.发 p{font-size:13.5px;color:var(--t3);margin:0}
.发 p b{font-weight:600;color:var(--t2)}
/* 第 506 件：反馈传图。截图栏虚线框 + 图卡；失败提示块占满一行（.发 是横排的弹性盒） */
.图区{border:1.5px dashed var(--l6);border-radius:12px;padding:16px;text-align:center;color:var(--t3);font-size:13.5px;line-height:1.6;transition:border-color .15s,background .15s}
.图区.拖上{border-color:var(--red);background:var(--red-wash);color:var(--red)}
.图区.满了{opacity:.55}
.图区 .钮-选{margin-top:8px;display:inline-block;border:1px solid var(--l0);border-radius:999px;padding:7px 18px;background:var(--white);cursor:pointer;font-size:13px;color:var(--ink)}
.图区 .钮-选:hover{border-color:var(--red);color:var(--red)}
.图单{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.图卡{position:relative;width:150px;border:1px solid var(--l3);border-radius:10px;overflow:hidden;background:var(--white)}
.图卡 img{display:block;width:150px;height:88px;object-fit:cover;background:var(--s1)}
.图卡 .数{font-size:11px;color:var(--t3);padding:5px 7px;line-height:1.5;text-align:start}
.图卡 .数 b{color:var(--green)}
.图卡.超{border-color:var(--red)}
.图卡.超 .数 b{color:var(--red)}
.图卡 .删{position:absolute;top:4px;inset-inline-end:4px;width:22px;height:22px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;cursor:pointer;font-size:13px;line-height:1;padding:0}
.图-示{font-size:12px;color:var(--t4);margin:6px 0 0;text-align:start}
.败{flex-basis:100%;border-inline-start:4px solid var(--red);background:var(--red-wash);border-radius:8px;padding:10px 14px;font-size:13.5px;line-height:1.6;color:#7a1f18}
.败 b{display:block;font-weight:600;margin-bottom:2px}
.先{margin-top:30px;border:1px solid var(--l2);border-radius:14px;background:var(--s2);padding:20px}
.先 b{display:block;font-family:var(--disp);font-size:16px;font-weight:700;margin-bottom:6px}
.先 p{font-size:14px;line-height:1.55;color:var(--t2);margin:0}
.谢{border:1px solid var(--l2);border-radius:16px;background:var(--s2);padding:34px 28px}
.谢 b{display:block;font-family:var(--disp);font-size:24px;font-weight:700;letter-spacing:-.02em;margin-bottom:10px}
.谢 p{font-size:15.5px;line-height:1.6;color:var(--t2);margin:0 0 20px}

/* ---------- 动画 ---------- */
@keyframes 进场{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* 首页右边那个窗口，一圈 10 秒：0–1.6s 扫描线扫过 → 0.6–2s 四行陆续出来 → 2.2s 标题换成「发现 4 条」
   → 2.8s 最佳那行亮起 → 3.2–3.8s 鼠标移过去、按下 → 4.2s 列表让位给进度卡 → 4.6–8.6s 进度走到头 → 8.8s「已保存」 → 9.7s 收场 */
@keyframes dScan{0%{transform:translateY(0);opacity:0}3%{opacity:.9}16%{transform:translateY(168px);opacity:.9}20%{opacity:0}100%{opacity:0}}
@keyframes dPanel{0%,16%{opacity:0;transform:translateY(12px)}22%,94%{opacity:1;transform:none}100%{opacity:0;transform:translateY(12px)}}
@keyframes d画{0%,100%{transform:scale(1) translate(0,0)}50%{transform:scale(1.08) translate(-2%,1%)}}
@keyframes d扫字{0%,18%{opacity:1}20.5%,100%{opacity:0}}
@keyframes d找到{0%,21.5%{opacity:0;transform:translateY(4px)}24.5%,96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes d角{0%,21%{opacity:0;transform:scale(.6)}25%,96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes dPick{0%,27%{background:#FFFFFF;border-color:#E2E5EC}33%,94%{background:#FDECEA;border-color:#F0BDB8}100%{background:#FFFFFF;border-color:#E2E5EC}}
@keyframes dBadge{0%,29%{opacity:0;transform:scale(.9)}35%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes dPing{0%,36%{transform:scale(1);opacity:0}39%{opacity:.9}45%{transform:scale(1.06,1.9);opacity:0}100%{opacity:0}}
@keyframes d鼠{0%,30%{transform:translate(-230px,-150px) rotate(-18deg);opacity:0}33%{opacity:1}37%,39%{transform:translate(0,0) rotate(-18deg);opacity:1}42%{transform:translate(0,0) rotate(-18deg);opacity:0}100%{opacity:0}}
@keyframes d按下{0%,37%{transform:scale(1);background:#C9302A;box-shadow:0 0 0 0 rgba(201,48,42,0)}38.5%{transform:scale(.96);background:#14161A;box-shadow:0 0 0 0 rgba(201,48,42,.55)}40%{transform:scale(1);background:#14161A}44%{box-shadow:0 0 0 12px rgba(201,48,42,0)}100%{transform:scale(1);background:#C9302A;box-shadow:0 0 0 0 rgba(201,48,42,0)}}
@keyframes dCard{0%,42%{opacity:0;transform:translateY(14px)}48%,96%{opacity:1;transform:none}100%{opacity:0;transform:translateY(14px)}}
@keyframes dFill{0%,46%{width:3%}88%,100%{width:100%}}
@keyframes dSaving{0%,46%{opacity:0}50%,82%{opacity:1}86%,100%{opacity:0}}
@keyframes dDone{0%,86%{opacity:0}90%,100%{opacity:1}}
@keyframes dBlink{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes dStripe{from{background-position:0 0}to{background-position:30px 0}}
@keyframes xRow{0%{opacity:0;transform:translateX(-8px)}6%,100%{opacity:1;transform:none}}
@keyframes xCursor{0%,8%{transform:translate(118px,6px)}20%{transform:translate(52px,52px)}32%{transform:translate(146px,88px)}44%{transform:translate(64px,20px)}56%{transform:translate(128px,124px)}68%{transform:translate(58px,158px)}80%,100%{transform:translate(112px,74px)}}
@keyframes xQ{0%,18%{opacity:0;transform:scale(.5)}24%,100%{opacity:1;transform:none}}
@keyframes xWrong{0%,54%{background:#FFFFFF;border-color:#E4E7ED}61%,100%{background:#FBF4E9;border-color:#E3CDA4}}
@keyframes xFrown{0%,26%{opacity:0}34%,100%{opacity:1}}
/* 第 916 件：对比区只放一遍，上面三组（问号、点错的那一行、撇嘴）最后一格留着，停下来还看得出「没有 VGrab 时挑错了、一头雾水」；原来末尾淡回去，好接下一轮 */
@keyframes xBlink{0%,44%,100%{transform:scaleY(1)}47%{transform:scaleY(.15)}50%{transform:scaleY(1)}}
@keyframes ySweep{0%,6%{opacity:0;transform:translateY(-12%)}10%{opacity:1}22%{opacity:1;transform:translateY(105%)}26%,100%{opacity:0}}
@keyframes yRowOut{0%,22%{opacity:1;height:30px;margin-bottom:5px}34%,100%{opacity:0;height:0;margin-bottom:0}}
@keyframes yWin{0%,24%{transform:scale(1);box-shadow:none;border-color:#E2E5EC}33%,100%{transform:scale(1.015);box-shadow:0 14px 30px -20px rgba(20,22,26,.55);border-color:#F0BDB8}}
@keyframes yBadge{0%,28%{opacity:0;transform:scale(.8)}36%,100%{opacity:1;transform:none}}
@keyframes yCryptOut{0%,24%{opacity:1}32%,100%{opacity:0}}
@keyframes yReal{0%,28%{opacity:0}36%,100%{opacity:1}}
@keyframes yCursor{0%,34%{transform:translate(168px,8px);opacity:0}38%{opacity:1}52%,100%{transform:translate(96px,44px);opacity:1}}
@keyframes yPing{0%,52%{transform:scale(1);opacity:0}55%{opacity:.85}63%{transform:scale(1.06);opacity:0}100%{opacity:0}}
@keyframes yBar{0%,56%{width:2%}84%,100%{width:100%}}
@keyframes ySaved{0%,84%{opacity:0;transform:translateY(5px)}90%,100%{opacity:1;transform:none}}
@keyframes ySmile{0%,44%{opacity:0}52%,100%{opacity:1}}

/* ---------- 博客：列表页和文章页（第 320 件，2026-09-03）----------
   文章正文单独放在 website/blog/<语言>/<名>.html，构建时插进 templates/文章页.html。
   两页都用站里同一个版心和页头页脚，只是正文栏窄一些，读长文不费眼。 */
.博{padding:0 0 70px}
.博-顶{max-width:880px;margin:0 auto;padding:52px 0 40px}
.博 h1{font-family:var(--disp);font-size:44px;font-weight:800;letter-spacing:-.035em;line-height:1.04;margin:0 0 16px;text-wrap:balance}
.博 .引{font-size:18px;line-height:1.6;color:var(--t1);margin:0}
/* 两列卡片，占满版心（第 324 件：原来是一列窄条，右边空着一大半，跟页脚一比就显得挤在左边） */
/* Human 2026-09-15 定：博客列表一栏、一块一块从上往下排——两栏看不出先后顺序 */
.博-单{display:grid;grid-template-columns:1fr;gap:16px;max-width:880px;margin:40px auto 0}
.博-条{display:flex;flex-direction:column;padding:24px 26px;background:var(--white);
  border:1px solid var(--l3);border-radius:16px;transition:border-color .2s}
.博-条:hover{border-color:var(--red)}
.博-期{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--t5);margin:0 0 10px}
.博-条 h2{font-family:var(--disp);font-size:23px;font-weight:700;letter-spacing:-.025em;line-height:1.25;margin:0 0 10px}
.博-条 h2 a{color:var(--ink);border:0}
.博-条 h2 a:hover{color:var(--red)}
.博-要{flex:1;font-size:15px;line-height:1.6;color:var(--t2);margin:0}
.博-读{margin:16px 0 0}
.博-读 a{font-size:13.5px;font-weight:600;color:var(--red);border:0}
.博-读 a:hover{color:var(--ink)}

/* 两栏，整体占满版心（第 324 件）。左边那栏跟着滚，正文长的时候目录一直在手边 */
.文章{display:block;padding:0 0 72px}
.文章-侧{max-width:880px;margin:0 auto;padding:48px 0 34px}
.文章-主{min-width:0;max-width:880px;margin:0 auto;padding-top:40px}
/* word-break:keep-all —— 中文默认可以在任意两个汉字之间断行，标题放在这条窄栏里就被断成
   「怎么把 m3u8 切 / 片流的视频下下来」，把一个词劈开。keep-all 让它优先在空格和标点处断；
   万一一整串既没空格也没标点、放不下，再靠 overflow-wrap 任意断，不会溢出到栏外。 */
.文章 h1{font-family:var(--disp);font-size:42px;font-weight:800;letter-spacing:-.03em;line-height:1.12;margin:0 0 14px;text-wrap:balance;word-break:keep-all;overflow-wrap:anywhere}
.文章 .引{font-size:18px;line-height:1.6;color:var(--t2);margin:0}
/* 本篇目录：正文里每个 h2 一条，锚点由构建时加上 */
.文章-目{margin-top:22px;padding-top:16px;border-top:1px solid var(--l2);display:flex;flex-wrap:wrap;gap:8px 20px}
.文章-目 h2{flex-basis:100%}
.文章-目 h2{font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--t4);margin:0 0 3px}
.文章-目 a{font-size:14px;line-height:1.4;color:var(--t2);border:0}
.文章-目 a:hover{color:var(--red)}
.文章-主 h2{font-family:var(--disp);font-size:23px;font-weight:700;letter-spacing:-.02em;line-height:1.3;margin:38px 0 12px;text-wrap:balance;scroll-margin-top:calc(var(--头高) + 20px)}
.文章-主 > *:first-child{margin-top:0}
.文章-主 p{font-size:17px;line-height:1.8;color:var(--t1);margin:0 0 18px}
.文章-主 ol,.文章-主 ul{margin:0 0 16px;padding-inline-start:24px}
.文章-主 li{font-size:17px;line-height:1.8;color:var(--t1);margin-bottom:10px}
.文章-主 b{font-weight:600;color:var(--ink)}
.文章-主 code{font-family:var(--mono);font-size:.88em;background:var(--s1);border:1px solid var(--l3);border-radius:5px;padding:1.5px 5px}
.文章-主 a{color:var(--red);text-decoration:underline;text-underline-offset:3px;border:0}
.文章-主 a:hover{color:var(--ink)}
.文章-注{font-size:14px;color:var(--t3);background:var(--s2);border:1px solid var(--l3);border-radius:11px;padding:13px 16px;margin:0 0 26px!important}
/* 第 755 件：「回到博客列表」去掉了，页头有博客入口 */

/* ---------- 窄屏：三个断点 1120 / 900 / 620 ---------- */
@media (max-width:1119px){
  .雄 h1{font-size:46px}
  .演-体{grid-template-columns:minmax(0,1fr)}
  .演-屏{height:200px}
  .演-卡{grid-column:auto}
  .文{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:40px}
  .文章{gap:38px}
}
@media (max-width:899px){
  .雄 h1{font-size:44px}
  .比 h2,.暗 h2{font-size:38px}
  .比-栏,.暗 .暗内{grid-template-columns:minmax(0,1fr)}
  .功{grid-template-columns:repeat(2,minmax(0,1fr))}
  .步{grid-template-columns:repeat(2,minmax(0,1fr))}
  .下-栏{grid-template-columns:minmax(0,1fr)}
  .下-侧{position:static}
  .下-侧 .广-框{max-width:300px;margin:0 auto}
  .文{grid-template-columns:minmax(0,1fr);gap:30px}
  .文-侧{position:static}
  /* 窄屏一律并成一栏：两栏挤在一起两边都读不成 */
  .文章{grid-template-columns:minmax(0,1fr);gap:28px}
  .文章-侧{position:static}
  .博-单{grid-template-columns:minmax(0,1fr)}
  .脚-栏{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 30px}
}
@media (max-width:619px){
  :root{--pad:18px;--头高:60px}
  .牌{font-size:21px;gap:9px}
  .牌 img{width:32px;height:32px;border-radius:7px}
  .雄{padding-top:40px}
  .雄 h1{font-size:34px}
  .比 h2,.暗 h2{font-size:30px}
  .功,.步{grid-template-columns:minmax(0,1fr)}
  .问答 summary{font-size:15.5px}
  .格{grid-template-columns:repeat(2,1fr)}
  .类{flex-wrap:wrap}
  .安{flex-wrap:wrap;gap:4px 10px}
  .航链{display:none}
  .文 h1,.博 h1{font-size:32px}
  .文章 h1{font-size:28px}
  .博-条 h2{font-size:21px}
  .文章-主 h2{font-size:20px}
  .脚-栏{grid-template-columns:minmax(0,1fr);gap:24px}
  .博-条{padding:20px}
  .演-体{padding:12px;gap:12px}
  .演-屏{height:170px}
}
/* 系统开了「减少动画」时只跳过滚动进场那种淡入，首页演示照放：演示是在讲功能，不是装饰。
   Human 那台 Windows 就开着这个开关，之前这里把所有动画都关了，他看到的是一张静止的图（2026-09-02 在他浏览器里查出来的）。 */
@media (prefers-reduced-motion:reduce){html.js .显{opacity:1;transform:none;transition:none}.雄 > div:first-child > *{animation:none}}

/* ---------- 中文页的排版（zh-CN、zh-TW 都算）----------
   英文标题压字距（负 letter-spacing）、小标签拉字距加大写，在中文里都不成立：
   汉字本来就是方块，压字距会挤成一团，拉字距的小字反而散。所以中文页：
   ① 标题字距归零、字重用 700（微软雅黑只有常规和粗体，800 是假加粗，会糊）、行高留到 1.15 以上不切字；
   ② 小标签字距只留一点点、最小 12px（微软雅黑在 12px 以下笔画会断）；
   ③ 数字仍用 JetBrains Mono，但字重 500，跟旁边黑体的笔画粗细对得上。 */
/* .功题（「特性介绍」）2026-09-03 补进这一条（第 316 件）：漏了它，中文页上「特性介绍」用的还是英文那套
   字重 800、负字距，跟旁边的「程序来挑，你只管点。」明显不是一个字体，Human 一眼看出来了 */
:lang(zh) .雄 h1,:lang(zh) .比 h2,:lang(zh) .暗 h2,:lang(zh) .功题,:lang(zh) .文 h1,:lang(zh) .空 h1,:lang(zh) .博 h1,:lang(zh) .文章 h1{letter-spacing:0;font-weight:700;line-height:1.18}
:lang(zh) .名,:lang(zh) .功 h3,:lang(zh) .谢 b,:lang(zh) .比-头 .题,:lang(zh) .常见 h2{letter-spacing:0}
:lang(zh) .眉,:lang(zh) .格 span,:lang(zh) .态,:lang(zh) .栏 label,:lang(zh) .验 b,:lang(zh) .贴头 span,
:lang(zh) .安 b,:lang(zh) .空 .模,:lang(zh) .广-标,:lang(zh) .比-头 .眉{letter-spacing:.03em;font-size:12px}
:lang(zh) .最,:lang(zh) .贴头 b,:lang(zh) .赢 .标,:lang(zh) .演-行 .标,:lang(zh) .演-卡头 .标{letter-spacing:.04em;font-size:10.5px}
:lang(zh) .语,:lang(zh) .浏,:lang(zh) .条 .号,:lang(zh) .等,:lang(zh) .序,:lang(zh) .按 .注,:lang(zh) .元 span,:lang(zh) .步 span,
:lang(zh) .暗 li b,:lang(zh) .比-尾,:lang(zh) .赢 .真 span,:lang(zh) .贴 pre,:lang(zh) .赢 .乱{font-size:12px}
:lang(zh) .格 b{font-weight:500}
:lang(zh) .演-格 span{font-size:10px;letter-spacing:.04em}
:lang(zh) .演-行 .签,:lang(zh) .演-行 .量,:lang(zh) .演-单头 > span{font-size:10px}
:lang(zh) .演-行 .题{font-size:11.5px}

/* 同时下几个视频：一个视频一张卡，卡与卡之间留一口气（第 297 件，2026-09-02 追加在文件末尾，不动上面的行） */
.卡 + .卡{margin-top:18px}

/* 站点方申请屏蔽那一块（第 109 件）：只在网址带 ?topic=block 时显示。
   跟 `.先` 同一副骨架，只把左边那道竖线换成强调色——它是「这条路是给你走的」的信号，
   不是警告，所以不用红色。 */
.站点方{border-inline-start:4px solid var(--red);margin-top:0;margin-bottom:22px}

/* 反馈页提交后的推荐（第 160 件） */
.推荐-明示{font-size:13px;color:var(--t2);margin:8px 0 0;line-height:1.55}
.推荐{margin:18px 0 14px;text-align:start}
.推荐>b{display:block;font-family:var(--disp);font-size:15px;font-weight:700;margin-bottom:8px}
.推荐 ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.推荐 li{border:1px solid var(--l2);border-radius:10px;padding:10px 14px;background:var(--s2)}
.推荐 li a{font-weight:600;text-decoration:none;color:var(--t1)}
.推荐 li a:hover{text-decoration:underline}
.推荐 li p{margin:4px 0 0;font-size:13.5px;color:var(--t2);line-height:1.5}
.推荐-标{display:inline-block;margin-inline-start:8px;font-size:11px;padding:1px 7px;border-radius:5px;border:1px solid var(--l2);color:var(--t2);vertical-align:middle}

/* 反馈页：从插件点「反馈」过来、已经填好的那一条提示（第 389 件） */
.填好了{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:10px;background:#E7F3EF;color:#1E7A5E;font-size:13.5px;margin-bottom:14px}
.填好了::before{content:'✓';font-weight:700}

/* 历史页：上面「正在下 · 没下完」那一段（第 376 件） */
.史-段题{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--t2);margin:18px 0 8px}
.史-标.是-running{background:var(--red-wash);color:var(--red)}
.史-标.是-queued{background:var(--s1);color:var(--t2)}
.史-标.是-paused{background:var(--s1);color:var(--t2)}
.史-标.是-broken{background:var(--warn-bg);color:var(--warn)}
.史-条条{width:100%;height:6px;border-radius:4px;background:var(--l4);overflow:hidden;margin-top:8px}
.史-条条 i{display:block;height:100%;background:var(--ink)}
.史-因{color:var(--warn)}

/* —— 第 405 件：下载页和历史页合成一页 —— */
.段头{display:flex;align-items:baseline;gap:12px;margin:0 0 12px}
/* 这两条必须写在上面那条 `.段头{margin:0 0 12px}` 之后：权重一样，后写的才盖得住。
   2026-09-12 踩过——`.段头-排` 原来写在整份样式的前半段，被后面的 `.段头` 清成了 0，
   「排队中」那个标题直接贴在上一张卡上（Human 报的） */
.段头-排{margin-top:38px}
.段头-史{margin-top:38px}
.段题{font-family:var(--disp);font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.2;margin:0}
.段数{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.段右{margin-inline-start:auto;font-size:12px;color:var(--t4);text-align:end}
#在下单 .卡 + .卡{margin-top:12px}
.空闲{margin:0;padding:14px 18px;border:1px dashed var(--l3);border-radius:12px;color:var(--t3);font-size:13.5px;background:var(--white)}
.类标{font-family:var(--mono);font-size:10.5px;padding:1px 7px;border-radius:6px;background:var(--s3);border:1px solid var(--l5);color:var(--t2)}
.态条[data-录] i{background:var(--red2);animation:dBlink .9s ease-in-out infinite}
.槽[data-录] i{background:repeating-linear-gradient(90deg,var(--red2) 0 10px,#F3C5C2 10px 20px)}
.缩.file{background:#2B5FD9}
.缩.live{background:var(--red2)}
.史-缩{width:44px;height:30px;border-radius:7px;background:var(--ink);color:#fff;font-family:var(--mono);font-size:9px;letter-spacing:.06em;display:flex;align-items:center;justify-content:center;flex:none}
.史-缩.file{background:#2B5FD9}
.史-缩.live{background:var(--red2)}
/* 第 581 件：没换成 mp4 的那一行，橙色小字跟在元信息下面 */
.史-没换成{display:block;margin-top:4px;color:var(--warn,#B26A00);font-size:11.5px}
.史-路{display:flex;min-width:0;white-space:nowrap;font-family:var(--mono);font-size:11px;color:var(--t4);margin-top:5px;user-select:all;cursor:text}
.史-标.是-录完{background:#E7F3EF;color:#1E7A5E}
.史-条{position:relative}
.史-新{background:#EEF9F2;border-color:#BFE5CE;animation:史褪 3.5s forwards}
@keyframes 史褪{0%,70%{background:#EEF9F2;border-color:#BFE5CE}100%{background:var(--white);border-color:var(--l3)}}
.史-新角{position:absolute;inset-inline-end:12px;top:-9px;background:#1E7A5E;color:#fff;font-size:11px;padding:1px 8px;border-radius:6px}
.史-空{margin:0;padding:14px 18px;border:1px dashed var(--l3);border-radius:12px;color:var(--t3);font-size:13.5px;background:var(--white)}
@media (max-width:640px){.段头{flex-wrap:wrap}.段右{margin-inline-start:0;width:100%;text-align:start}}

/* —— 第 413 件：反馈页「是哪种问题」多选 —— */
.栏 .标{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);margin-bottom:8px}
.多选{display:flex;flex-wrap:wrap;gap:8px}
.栏 .多选 .选{display:inline-flex;align-items:center;gap:6px;font-family:var(--body);font-size:13.5px;letter-spacing:0;text-transform:none;color:var(--ink);background:var(--s3);border:1px solid var(--l2);border-radius:999px;padding:6px 12px;margin:0;cursor:pointer}
.多选 .选:has(input:checked){background:var(--ink);color:#fff;border-color:var(--ink)}
.栏 .多选 .选{white-space:nowrap;flex:none}
.栏 .多选 input{width:auto;padding:0;margin:0;border:0;background:none;accent-color:var(--red2)}

/* 好评引导那一条（第 498 件，2026-09-09）。配色照界面稿终稿，跟插件弹窗、管理页同一款。 */
#求评条:empty { display: none; }
.求评 {
  background: #e8f5e9; border: 1px solid #b9dfc0; border-radius: 10px;
  padding: 12px 14px; margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: #1b3d1f;
}
.求评 .行 { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.求评 .钮 {
  background: #2e7d32; color: #fff; border: 0; border-radius: 8px;
  padding: 6px 16px; font-size: 13.5px; font-weight: 600; cursor: pointer;
}

/* 反馈页的自助解答（第 496 件，2026-09-09）。默认收着，点开才展开——
   多数人是带着具体问题过来的，先给答案，看完不用填表就走了。 */
.自助 {
  border: 1px solid var(--线, #e3e3e3); border-radius: 10px;
  padding: 12px 14px; margin: 0 0 18px; background: #fafafa;
}
.自助 > summary { cursor: pointer; font-weight: 600; font-size: 15px; }
.自助 dl { margin: 12px 0 0; }
.自助 dt { font-weight: 600; margin-top: 12px; font-size: 14px; }
.自助 dd { margin: 4px 0 0; font-size: 13.5px; line-height: 1.6; color: #444; }
.自助-尾 { margin: 14px 0 0; font-size: 13px; color: #666; }

/* 第 527 件：反馈页那个「发送完整网址」开关，以及粘贴块上的「重新粘贴」按钮 */
/* **选择器要压过 `.栏 label` 和 `.栏 input`**（本文件 488、489 行）：
   那两条把栏里的 label 设成 block、input 拉成 width:100%，
   我原来只写 `.开关行` 优先级不够，复选框被拉成整行宽、文字被挤到下一行去了。
   2026-09-10 打开截图才看见——断言只查了文字在不在，看不出排版坏了。 */
.栏 label.开关行{display:flex;align-items:center;gap:7px;margin-top:9px;
  font-family:var(--body);font-size:12.5px;letter-spacing:0;text-transform:none;
  color:var(--t3);cursor:pointer;margin-bottom:0}
.栏 label.开关行 input[type="checkbox"]{width:auto;margin:0;flex:0 0 auto;accent-color:var(--ink)}
.栏 label.开关行 span{flex:1 1 auto}
.贴头{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.钮-小{margin-inline-start:auto;border:1px solid var(--t6);background:transparent;color:var(--t2);
  border-radius:6px;padding:3px 10px;font-size:12px;cursor:pointer;font-family:inherit}
.钮-小:hover{border-color:var(--ink);color:var(--ink)}
#贴文{width:100%;box-sizing:border-box;font-family:var(--mono);font-size:11.5px;line-height:1.6;
  color:var(--ink);background:var(--bg);border:1px solid var(--t7);border-radius:6px;padding:8px 10px;resize:vertical}

/* ── 第 528 件：品牌名旁边那个会动的小红点（跟弹窗、管理页同一套） ────────────── */
.牌{position:relative}
.灵{position:absolute;top:-3px;inset-inline-end:-10px;width:8px;height:8px;display:block;transform-origin:50% 50%}
.灵 .身{width:100%;height:100%;display:block;border-radius:50%;background:var(--red);transform-origin:50% 50%;
  /* **padding 必须显式清掉**：这个站里另有一条 `.身{padding:28px 22px 24px}`（别的组件在用），
     不清的话 8×8 的小红点被撑成 44×52 的一块「红饼」（Human 2026-09-11 报的）。 */
  padding:0;box-sizing:border-box}
.灵 .波{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;
  border:1.5px solid var(--red);opacity:0;pointer-events:none}
.灵 .波.响{animation:波扩 .72s cubic-bezier(.2,.7,.3,1) 1}
@keyframes 波扩{0%{transform:scale(.5);opacity:.7}100%{transform:scale(3.1);opacity:0}}
.灵 .身.呼吸{animation:呼吸 1.9s ease-in-out 1}
@keyframes 呼吸{0%,100%{transform:scale(1)}50%{transform:scale(1.62)}}
.灵 .身.眨眼{animation:眨眼 1.05s ease-in-out 1}
@keyframes 眨眼{0%,100%{transform:scaleY(1)}12%{transform:scaleY(.12)}22%{transform:scaleY(1)}
  38%{transform:scaleY(.12)}48%{transform:scaleY(1)}}
.灵.晃头{animation:晃头 1.5s ease-in-out 1}
@keyframes 晃头{0%,100%{transform:translate(0,0) rotate(0)}
  18%{transform:translate(-4.2px,1.1px) rotate(-17deg)}42%{transform:translate(4.2px,1.1px) rotate(17deg)}
  66%{transform:translate(-2.9px,.6px) rotate(-11deg)}86%{transform:translate(1.8px,.4px) rotate(7deg)}}
.灵.水滴{animation:水滴 1.15s cubic-bezier(.3,.1,.3,1) 1}
@keyframes 水滴{0%{transform:translateY(0) scale(1,1)}24%{transform:translateY(-9.5px) scale(.82,1.26)}
  52%{transform:translateY(0) scale(1.28,.7)}68%{transform:translateY(-2.5px) scale(.95,1.06)}
  84%{transform:translateY(0) scale(1.1,.92)}100%{transform:translateY(0) scale(1,1)}}
/* 第 558 件（Human 2026-09-11 定）：**不再跟着系统那个「动画效果」开关走**。
   他那台 Windows Server 2022 默认关动效，红点就一动不动，引导等于失效。
   这一个 8 像素的小点动作很轻（最大位移 4 像素），不属于会让人不适的那类大动效，所以一律照常动。
   真要照顾对动效敏感的人，别的地方（页面滚动、卡片进场）该听还是听。 */
50%{opacity:.45}}

/* ── 评价块：暖色、左边点赞手（第 528 件定稿） ────────────── */
.求评.暖{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:linear-gradient(100deg,rgba(242,163,60,.16),transparent 72%),var(--white);
  border:1px solid rgba(242,163,60,.42);color:#4a3418}
.求评.暖 .钮{background:#c77d18;color:#fff}
.求评.暖 .淡{background:none;border:0;color:var(--t3);font-size:12.5px;cursor:pointer;padding:0 4px;font-family:inherit}
.求评.暖 .淡:hover{color:var(--ink);text-decoration:underline}
.求评图{flex:0 0 auto;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:rgba(242,163,60,.22);color:#a5640f}
.求评话{flex:1 1 240px;min-width:200px;line-height:1.5}
.求评.暖 .行{flex:0 0 auto;display:flex;gap:9px;align-items:center;margin-top:0}

/* 第 572 件（Human 2026-09-11）：图标和文字同一行，按钮单独一行；「去评价」按钮加大。
   官网这一块比插件里宽，宽到放得下时按钮摆右边，窄了就落到文字下面。 */
.求评.暖 { display:grid; grid-template-columns:auto 1fr auto; align-items:center; column-gap:14px; row-gap:10px; }
.求评.暖 .求评图 { grid-column:1; grid-row:1; }
.求评.暖 .求评话 { grid-column:2; grid-row:1; min-width:0; }
.求评.暖 .行 { grid-column:3; grid-row:1; margin-top:0; }
.求评 .钮 { padding:10px 26px; font-size:14.5px; min-width:118px; border-radius:9px; }
.求评.暖 .淡 { font-size:13.5px; padding:8px 6px; }
@media (max-width:720px) {
  .求评.暖 { grid-template-columns:auto 1fr; }
  .求评.暖 .行 { grid-column:2; grid-row:2; }
}

/* ---------- 第 751 件：特性页顶上的演示窗（六页六套动画，10 秒一遍，纯样式）。骨架跟首页演示窗一个样，类名另起一套，别跟首页的 .演 混 ---------- */
.特演{border-radius:18px;border:1px solid var(--l1);background:var(--white);overflow:hidden;box-shadow:0 34px 70px -44px rgba(20,22,26,.5);margin:0 0 30px}
.特演-条{display:flex;align-items:center;gap:7px;padding:11px 15px;border-bottom:1px solid var(--l5);background:var(--s2)}
.特演-条 i{width:8px;height:8px;border-radius:50%;background:var(--l0)}
.特演-址{flex:1;margin-left:9px;height:22px;border-radius:6px;background:var(--bg);display:flex;align-items:center;padding:0 10px;font-family:var(--mono);font-size:10.5px;color:var(--t4)}
.特演-牌{display:flex;align-items:center;gap:6px;font-family:var(--disp);font-weight:700;font-size:12px;color:var(--ink)}.特演-牌 img{width:18px;height:18px}
.特演-体{position:relative;padding:18px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:16px;align-items:start}
.特演-屏{position:relative;min-width:0;border-radius:11px;background:var(--ink);overflow:hidden;height:176px}
.特演-画{position:absolute;inset:0;background:radial-gradient(60% 70% at 22% 35%,rgba(217,59,51,.42),transparent 70%),radial-gradient(50% 60% at 78% 70%,rgba(84,120,200,.35),transparent 70%),linear-gradient(180deg,#1C1F26,#14161A);animation:d画 10s ease-in-out infinite}
.特演-右{min-width:0;animation:dPanel 10s ease-in-out infinite}
.特演-数{display:flex;align-items:baseline;gap:6px;margin-bottom:10px}.特演-数 b{font-family:var(--disp);font-size:26px;font-weight:800;letter-spacing:-.03em}.特演-数 span{font-family:var(--mono);font-size:10px;color:var(--t4)}
.特演-数.小 b{font-size:18px}
.特演-态{position:relative;height:16px;font-family:var(--mono);font-size:10.5px;color:var(--t3)}.特演-态 > span{position:absolute;left:0;top:0;white-space:nowrap}
.特演-态 .中{animation:dSaving 10s linear infinite}.特演-态 .完{color:var(--red);animation:dDone 10s linear infinite}
.特演-成{display:flex;align-items:center;gap:8px;margin-top:12px;padding:9px 11px;border:1px solid var(--l3);border-radius:9px;background:var(--s3);font-size:11px;color:var(--ink);animation:dCard 10s ease-in-out infinite}
.特演-成 .签{font-family:var(--mono);font-size:9px;color:var(--red);background:var(--red-wash);border-radius:4px;padding:3px 5px}
.特演-卡{grid-column:1/-1;border-radius:11px;border:1px solid var(--l3);background:var(--s3);padding:13px 16px;animation:dCard 10s ease-in-out infinite}
.特演-卡.满{grid-column:auto;animation:none}
.特演-卡头{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:9px}.特演-卡头 b{font-family:var(--disp);font-weight:700;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.特演-卡头 .特演-态{min-width:11em}.特演-卡头 .特演-态 > span{left:auto;right:0}
.特演-槽{position:relative;height:9px;border-radius:6px;background:var(--l4);overflow:hidden}
.特演-脚{display:flex;justify-content:space-between;margin-top:7px;font-family:var(--mono);font-size:9.5px;color:var(--t4)}.特演-脚 .省{color:var(--green);animation:dDone 10s linear infinite}
/* —— 流媒体：24 个小块依次亮起 → 拼成一个 MP4 —— */
.特演-段网{position:absolute;left:13px;right:13px;bottom:13px;display:grid;grid-template-columns:repeat(12,1fr);gap:3px}
.特演-段网 i{height:9px;border-radius:2px;background:rgba(255,255,255,.14);animation:t亮 10s linear infinite}
.特演-段网 i:nth-child(1){animation-delay:0s}.特演-段网 i:nth-child(2){animation-delay:.25s}.特演-段网 i:nth-child(3){animation-delay:.5s}.特演-段网 i:nth-child(4){animation-delay:.75s}.特演-段网 i:nth-child(5){animation-delay:1s}.特演-段网 i:nth-child(6){animation-delay:1.25s}.特演-段网 i:nth-child(7){animation-delay:1.5s}.特演-段网 i:nth-child(8){animation-delay:1.75s}.特演-段网 i:nth-child(9){animation-delay:2s}.特演-段网 i:nth-child(10){animation-delay:2.25s}.特演-段网 i:nth-child(11){animation-delay:2.5s}.特演-段网 i:nth-child(12){animation-delay:2.75s}.特演-段网 i:nth-child(13){animation-delay:3s}.特演-段网 i:nth-child(14){animation-delay:3.25s}.特演-段网 i:nth-child(15){animation-delay:3.5s}.特演-段网 i:nth-child(16){animation-delay:3.75s}.特演-段网 i:nth-child(17){animation-delay:4s}.特演-段网 i:nth-child(18){animation-delay:4.25s}.特演-段网 i:nth-child(19){animation-delay:4.5s}.特演-段网 i:nth-child(20){animation-delay:4.75s}.特演-段网 i:nth-child(21){animation-delay:5s}.特演-段网 i:nth-child(22){animation-delay:5.25s}.特演-段网 i:nth-child(23){animation-delay:5.5s}.特演-段网 i:nth-child(24){animation-delay:5.75s}
@keyframes t亮{0%,8%{background:rgba(255,255,255,.14)}12%,88%{background:var(--red2)}94%,100%{background:rgba(255,255,255,.14)}}
.特演[data-特="hls"] .特演-态 .中{animation:t中前段 10s linear infinite}.特演[data-特="hls"] .特演-态 .完{animation:t完后段 10s linear infinite}.特演[data-特="hls"] .特演-成{animation:t成后段 10s linear infinite}
@keyframes t中前段{0%,8%{opacity:0}12%,70%{opacity:1}74%,100%{opacity:0}}@keyframes t完后段{0%,74%{opacity:0}78%,96%{opacity:1}100%{opacity:0}}@keyframes t成后段{0%,74%{opacity:0;transform:translateY(8px)}80%,96%{opacity:1;transform:translateY(0)}100%{opacity:0}}
/* —— 选段：时间轴两个把手拖到起止 → 加进列表 → 保存 → 只取那一截 —— */
.特演-时{position:absolute;left:13px;top:11px;font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.7);letter-spacing:.08em}
.特演-进{position:absolute;left:13px;right:13px;bottom:22px;height:4px;border-radius:2px;background:rgba(255,255,255,.18)}
.特演-进 .选{position:absolute;top:0;bottom:0;border-radius:2px;background:var(--red2);animation:t范围 10s ease-in-out infinite}
.特演-进 .取{position:absolute;top:-2px;bottom:-2px;left:33%;width:0;background:rgba(255,255,255,.35);animation:t取 10s linear infinite}
.特演-进 .柄{position:absolute;top:-5px;width:14px;height:14px;border-radius:50%;background:var(--white);box-shadow:0 0 0 3px rgba(255,255,255,.18);margin-left:-7px}
.特演-进 .柄.起{animation:t柄起 10s ease-in-out infinite}.特演-进 .柄.止{animation:t柄止 10s ease-in-out infinite}
.特演-刻{position:absolute;left:13px;right:13px;bottom:8px;display:flex;justify-content:space-between;font-family:var(--mono);font-size:9px;color:rgba(255,255,255,.5)}
.特演-格{display:flex;gap:6px;margin-bottom:9px}.特演-格 span{font-size:10px;padding:3px 8px;border-radius:999px;border:1px solid var(--l3);color:var(--t2)}.特演-格 span.选{border-color:var(--red);color:var(--red);background:var(--red-wash)}
.特演-轴行{display:flex;align-items:center;gap:6px}.特演-轴{position:relative;flex:1;height:8px;border-radius:4px;background:var(--l3);overflow:hidden}
.特演-轴 .在挑{position:absolute;top:0;bottom:0;border-radius:4px;background:repeating-linear-gradient(45deg,var(--red) 0 3px,transparent 3px 6px);opacity:.8;animation:t范围 10s ease-in-out infinite,t斜纹 10s linear infinite}
.特演-轴 .已选{position:absolute;top:0;bottom:0;border-radius:4px;background:var(--red);animation:t范围 10s ease-in-out infinite,t实心 10s linear infinite}
.特演-加{width:20px;height:20px;border-radius:50%;border:1px solid var(--l0);background:var(--white);color:var(--red);font-size:14px;line-height:18px;text-align:center;animation:t加 10s linear infinite}
.特演-框{display:flex;gap:6px;margin-top:8px}.特演-框 span{flex:1;font-family:var(--mono);font-size:10px;color:var(--ink);border:1px solid var(--l3);border-radius:6px;padding:4px 6px;text-align:center;background:var(--white)}
.特演-条子{margin-top:8px;font-size:10px;color:var(--ink);border:1px solid var(--l3);border-radius:999px;padding:3px 8px;display:inline-flex;align-items:center;gap:5px;animation:t条子 10s linear infinite}.特演-条子 i{width:6px;height:6px;border-radius:50%;background:var(--red)}
.特演-存{position:relative;margin-top:9px}.特演-存 button{width:100%;font-family:var(--body);font-size:12px;font-weight:600;color:var(--white);background:var(--red);border:0;border-radius:8px;padding:8px;cursor:default;animation:d按下 10s linear infinite}
.特演-环{position:absolute;inset:0;border:2px solid var(--red);border-radius:8px;animation:dPing 10s ease-out infinite;pointer-events:none}
.特演-槽 .段{position:absolute;top:0;bottom:0;left:33%;width:0;border-radius:6px;background:repeating-linear-gradient(115deg,var(--red2) 0 11px,var(--red3) 11px 22px);animation:t填段 10s cubic-bezier(.3,.1,.5,1) infinite}
@keyframes t范围{0%,16%{left:0;width:100%}30%,100%{left:33%;width:17%}}@keyframes t柄起{0%,16%{left:0}30%,100%{left:33%}}@keyframes t柄止{0%,16%{left:100%}30%,100%{left:50%}}
@keyframes t斜纹{0%,42%{opacity:.8}44%,100%{opacity:0}}@keyframes t实心{0%,42%{opacity:0}44%,100%{opacity:1}}
@keyframes t加{0%,38%{transform:scale(1);box-shadow:none}41%{transform:scale(1.35);box-shadow:0 0 0 6px rgba(201,48,42,.15)}44%,100%{transform:scale(1);box-shadow:none;opacity:.45}}
@keyframes t条子{0%,43%{opacity:0;transform:translateY(4px)}46%,100%{opacity:1;transform:translateY(0)}}
@keyframes t填段{0%,56%{width:0}86%,100%{width:17%}}@keyframes t取{0%,56%{width:0;opacity:.35}86%{width:17%;opacity:.35}88%,100%{width:17%;opacity:0}}
/* —— 多段加速：一路 vs 三路 —— */
.特演-道{margin-bottom:14px}.特演-道 span{display:block;font-family:var(--mono);font-size:10px;color:var(--t3);margin-bottom:5px}
.特演-道 > div{display:flex;flex-direction:column;gap:4px}.特演-道 > div i{display:block;height:9px;border-radius:6px;background:var(--l4);overflow:hidden;position:relative}
.特演-道 > div i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:0;border-radius:6px;background:repeating-linear-gradient(115deg,var(--red2) 0 11px,var(--red3) 11px 22px)}
.特演-道.单 > div i::after{animation:t一路 10s linear infinite}
.特演-道.三 > div i:nth-child(1)::after{animation:t三路 10s cubic-bezier(.3,.1,.5,1) infinite}.特演-道.三 > div i:nth-child(2)::after{animation:t三路 10s cubic-bezier(.3,.1,.5,1) .3s infinite}.特演-道.三 > div i:nth-child(3)::after{animation:t三路 10s cubic-bezier(.3,.1,.5,1) .6s infinite}
.特演-道 em{display:block;font-style:normal;font-family:var(--mono);font-size:10px;color:var(--t4);margin-top:5px}.特演-道 em.完{color:var(--green);animation:t三完 10s linear infinite}
@keyframes t一路{0%,8%{width:0}96%,100%{width:34%}}@keyframes t三路{0%,8%{width:0}68%,100%{width:100%}}@keyframes t三完{0%,68%{opacity:0}74%,100%{opacity:1}}
/* —— 直播录制：LIVE 徽 + 红点闪 + 已录条涨 → 停 → 存成 MP4 —— */
.特演-播{position:absolute;left:13px;top:11px;display:flex;gap:8px;align-items:center;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em}
.特演-播 .LIVE{color:var(--white);background:var(--red);border-radius:4px;padding:2px 6px;font-weight:700}
.特演-播 .录{display:flex;align-items:center;gap:5px;color:rgba(255,255,255,.85);animation:t录字 10s linear infinite}.特演-播 .录 i{width:7px;height:7px;border-radius:50%;background:var(--red2);animation:dBlink 1s infinite}
.特演-录条{position:absolute;left:13px;right:13px;bottom:22px;height:4px;border-radius:2px;background:rgba(255,255,255,.18)}.特演-录条 i{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:var(--red2);animation:t录条 10s linear infinite}
.特演-刻 .停{color:var(--white);animation:t停 10s linear infinite}
.特演-成.后{animation:t成后段 10s ease-in-out infinite}
@keyframes t录字{0%,8%{opacity:0}12%,72%{opacity:1}76%,100%{opacity:0}}@keyframes t录条{0%,8%{width:0}72%{width:100%}100%{width:100%}}@keyframes t停{0%,70%{opacity:0}74%,100%{opacity:1}}
/* —— 断点续传：到 87% → 断网 → 从 87% 接着 → 存好 —— */
.特演-槽 .先{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:6px;background:repeating-linear-gradient(115deg,var(--red2) 0 11px,var(--red3) 11px 22px);animation:t先 10s linear infinite}
.特演-槽 .后{position:absolute;left:87%;top:0;bottom:0;width:0;border-radius:0 6px 6px 0;background:repeating-linear-gradient(115deg,var(--red2) 0 11px,var(--red3) 11px 22px);animation:t后 10s linear infinite}
.特演-槽 .灰{position:absolute;inset:0;background:rgba(255,255,255,.55);opacity:0;animation:t灰 10s linear infinite}
.特演-态 .断{color:var(--warn);animation:t断 10s linear infinite}.特演-态 .续{color:var(--ink);animation:t续 10s linear infinite}
.特演[data-特="resume"] .特演-态 .中{animation:t中87 10s linear infinite}.特演[data-特="resume"] .特演-态 .完{animation:t完末 10s linear infinite}
.特演[data-特="resume"] .特演-右{animation:none}.特演[data-特="resume"] .特演-卡{animation:none}
@keyframes t先{0%{width:0}34%,100%{width:87%}}@keyframes t后{0%,58%{width:0}88%,100%{width:13%}}@keyframes t灰{0%,34%{opacity:0}37%,55%{opacity:1}58%,100%{opacity:0}}
@keyframes t中87{0%,32%{opacity:1}36%,100%{opacity:0}}@keyframes t断{0%,35%{opacity:0}38%,55%{opacity:1}58%,100%{opacity:0}}@keyframes t续{0%,57%{opacity:0}60%,88%{opacity:1}91%,100%{opacity:0}}@keyframes t完末{0%,90%{opacity:0}93%,100%{opacity:1}}
.特演[data-特="fast"] .特演-右,.特演[data-特="rec"] .特演-右,.特演[data-特="hls"] .特演-右{animation:none}
/* 特性页末尾「其他特性」 */
.其他特性{margin-top:44px;padding-top:26px;border-top:1px solid var(--l2)}
.其他特性 ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.其他特性 li{background:var(--white);border:1px solid var(--l3);border-radius:10px;padding:12px 14px;font-size:14.5px;line-height:1.45}
.其他特性 li small{display:block;font-family:var(--mono);font-size:10.5px;color:var(--t5);letter-spacing:.08em;margin-bottom:3px}
.其他特性 li a{color:var(--ink);border:0}.其他特性 li a:hover{color:var(--red)}
@media (max-width:640px){.特演-体{grid-template-columns:1fr}.其他特性 ul{grid-template-columns:1fr}}

/* ---------- 第 742、746 件：博客文章末尾的安装引导块 + 继续读 ---------- */
.文-装块{margin:48px 0 0;border-radius:16px;border:1px solid var(--red-line);background:var(--red-wash);padding:24px 26px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.文-装块 .字{flex:1;min-width:15em}
.文-装块 b{display:block;font-family:var(--disp);font-size:19px;font-weight:700;color:var(--ink);letter-spacing:-.02em}
.文-装块 span{display:block;font-size:14px;color:var(--t1);margin-top:5px}
.文-读{margin-top:40px;padding-top:26px;border-top:1px solid var(--l2)}
.文-读 h2{font-family:var(--disp);font-size:20px;font-weight:700;margin:0 0 14px}
.文-读 ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.文-读 li{background:var(--white);border:1px solid var(--l3);border-radius:10px;padding:12px 14px;font-size:14.5px;line-height:1.45}
.文-读 li a{color:var(--ink);border:0}.文-读 li a:hover{color:var(--red)}
@media (max-width:640px){.文-读 ul{grid-template-columns:1fr}.航位{display:none}}
@media (max-width:860px){.航位{display:none}}

/* ---------- 第 749 件：更新说明页 ---------- */
.更新单{max-width:880px;margin:40px auto 0}
.更新条{padding:20px 0;border-bottom:1px solid var(--l2)}
.更新条:last-child{border-bottom:0}
.更新头{display:flex;align-items:baseline;gap:12px;margin-bottom:7px}
.更新版{font-family:var(--mono);font-size:16px;font-weight:700;letter-spacing:-.01em}
.更新期{font-family:var(--mono);font-size:12px;color:var(--t5)}
/* 第 749 件（Human 2026-09-15 定）：更新说明不要彩色的「新/修」标签 */
.更新说{font-size:15.5px;line-height:1.65;color:var(--t1);margin:0}
.更新点{margin:8px 0 0;padding-left:1.3rem;font-size:15px;line-height:1.7;color:var(--t1)}
.更新点 li{margin:3px 0}
/* 第 743 件：可见邮箱（首页那一句屏蔽入口第 907 件去掉了，它的样式一起删了） */
.邮{font-family:var(--mono);font-size:.95em}
/* 第 742 件：手机宽度（390）上页头放不下英文的 Install to Chrome，按钮和间距收一档，别把页面撑出横向滚动 */
@media (max-width:480px){.航 .航内{gap:10px}.航 .钮-装.钮-小{font-size:13px;padding:9px 12px;white-space:nowrap}.航链{font-size:13px}}
/* 第 742 件：文章正文里的链接样式（红字、下划线）不许盖到文末安装块的按钮上 */
.文章-主 .文-装块 a.钮-装{color:var(--white);background:var(--green);border:1px solid var(--green);text-decoration:none;box-shadow:none}
.文章-主 .文-装块 a.钮-装:hover{background:var(--ink);border-color:var(--ink);color:var(--white)}
@media (max-width:760px){.文-读 ul,.其他特性 ul{grid-template-columns:repeat(2,minmax(0,1fr))}.文 h1,.博 h1{font-size:36px}.文章 h1{font-size:32px}}
/* Human 2026-09-16 定：特性页演示窗不要风景，跟首页一样——空的深色底 + 中间一个播放键（照抄首页 .演-放） */
.特演-放{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.特演-放 i{width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
.特演-放 i::after{content:"";width:0;height:0;border-left:13px solid rgba(255,255,255,.65);border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:4px}

/* ——————————————————————————————————————————————————————————————
   第 783 件（Human 2026-09-18 要的）：首页「选段保存」那一段，排在「自动筛选正片」上面。
   左边说清楚是什么，右边一个 10 秒一轮的纯样式动画，跟首页别的动画一样不用脚本。

   时间线（一轮 10 秒）：
     0 到 16%    整条片子都选着，两个把手在两端
     16 到 30%   把手往中间收，选中的那一截缩到 17%，起止时间跟着变黑
     30 到 44%   斜纹换成实心：这一段定下来了
     44 到 52%   按「保存这一段」，按钮按下去、荡开一圈红环
     52 到 88%   下面那张卡冒出来，只有选中的那一截在填，旁边写着「只下载这一段…」
     88 到 100%  换成「已保存 · 86 MB」，底下写省下了多少
   —————————————————————————————————————————————————————————————— */
.段选{padding-top:64px;padding-bottom:8px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:44px;align-items:center}
/* `word-break:auto-phrase` 让中文按词组断行，不会把「一段」拆成上下两行（日语标题那边同一个毛病，第 775 件治过） */
.段选 h2{font-family:var(--disp);font-size:46px;font-weight:800;letter-spacing:-.035em;line-height:1.05;margin:0 0 22px;text-wrap:balance;word-break:auto-phrase}
.段选-引{font-size:18.5px;line-height:1.55;color:var(--t1);margin:0;max-width:46ch}
.段选-演{border:1px solid var(--l3);border-radius:18px;background:var(--white);padding:20px;box-shadow:0 24px 54px -40px rgba(20,22,26,.5)}
.段选-头{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--t5);margin-bottom:10px}
/* 时间轴：底色是整部片子，上面盖着选中的那一截（先斜纹后实心），两个把手站在两端 */
.段选-轴{position:relative;height:10px;border-radius:5px;background:var(--l3)}
.段选-轴 i{position:absolute;top:0;bottom:0}
.段选-斜{border-radius:5px;background:repeating-linear-gradient(45deg,var(--red) 0 3px,transparent 3px 6px);animation:s范围 10s ease-in-out infinite,s斜纹 10s linear infinite}
.段选-实{border-radius:5px;background:var(--red);animation:s范围 10s ease-in-out infinite,s实心 10s linear infinite}
.段选-柄{width:12px;height:18px;top:-4px;border-radius:4px;background:var(--white);border:1.5px solid var(--red);box-shadow:0 2px 6px rgba(20,22,26,.18)}
.段选-柄.起{animation:s柄起 10s ease-in-out infinite}
.段选-柄.止{animation:s柄止 10s ease-in-out infinite}
.段选-框{display:flex;gap:8px;margin-top:14px}
.段选-框 span{flex:1;font-family:var(--mono);font-size:11px;color:var(--t2);border:1px solid var(--l3);border-radius:7px;padding:6px 8px;text-align:center;background:var(--s3)}
.段选-框 .起字{animation:s时间字 10s linear infinite}
.段选-框 .止字{animation:s时间字 10s linear infinite}
.段选-存{position:relative;margin-top:12px}
.段选-存 button{width:100%;font-family:var(--body);font-size:13px;font-weight:600;color:var(--white);background:var(--red);border:0;border-radius:9px;padding:9px;cursor:default}
.段选-存 button{animation:s按下 10s linear infinite}
.段选-环{position:absolute;inset:0;border:2px solid var(--red);border-radius:9px;animation:s环 10s ease-out infinite;pointer-events:none}
.段选-卡{margin-top:14px;border:1px solid var(--l3);border-radius:12px;background:var(--s3);padding:12px 14px;animation:s卡 10s ease-in-out infinite}
.段选-态{position:relative;height:15px;font-family:var(--mono);font-size:11px;color:var(--t3);margin-bottom:9px}
.段选-态 span{position:absolute;left:0;top:0;white-space:nowrap}
.段选-态 .中途{animation:s下着 10s linear infinite}
.段选-态 .完{color:var(--red);animation:s下完 10s linear infinite}
/* 进度槽：底下那层是整部片子的长度，只有选中的那一截在填，一眼看得出省了多少 */
.段选-槽{position:relative;height:10px;border-radius:6px;background:var(--l4);overflow:hidden}
.段选-槽 .整{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 6px,rgba(0,0,0,.04) 6px 7px)}
.段选-槽 .填{position:absolute;top:0;bottom:0;left:33%;width:0;border-radius:6px;background:repeating-linear-gradient(115deg,var(--red2) 0 11px,var(--red3) 11px 22px);animation:s填 10s cubic-bezier(.3,.1,.5,1) infinite}
.段选-脚{margin-top:8px;font-family:var(--mono);font-size:10.5px;color:var(--t4)}
.段选-脚 .省{color:var(--green);animation:s下完 10s linear infinite}
@keyframes s范围{0%,16%{left:0;right:0}30%,100%{left:33%;right:50%}}
@keyframes s柄起{0%,16%{left:-6px}30%,100%{left:calc(33% - 6px)}}
@keyframes s柄止{0%,16%{right:-6px}30%,100%{right:calc(50% - 6px)}}
@keyframes s斜纹{0%,42%{opacity:.85}44%,100%{opacity:0}}
@keyframes s实心{0%,42%{opacity:0}44%,100%{opacity:1}}
@keyframes s时间字{0%,16%{color:var(--t5)}30%,100%{color:var(--ink)}}
@keyframes s按下{0%,49%{transform:scale(1);background:var(--red)}51%{transform:scale(.98);background:var(--red3)}53%,100%{transform:scale(1);background:var(--red)}}
@keyframes s环{0%,49%{transform:scale(1);opacity:0}52%{opacity:.9}58%{transform:scale(1.06);opacity:0}100%{opacity:0}}
@keyframes s卡{0%,53%{opacity:0;transform:translateY(12px)}58%,100%{opacity:1;transform:translateY(0)}}   /* 第 916 件：只放一遍，最后一格卡片留着（原来 96% 之后淡出，好接下一轮） */
@keyframes s填{0%,56%{width:0}86%,100%{width:17%}}
@keyframes s下着{0%,56%{opacity:0}60%,84%{opacity:1}88%,100%{opacity:0}}
@keyframes s下完{0%,88%{opacity:0}91%,100%{opacity:1}}
@media (max-width:900px){.段选{grid-template-columns:1fr;gap:28px}.段选 h2{font-size:34px;max-width:none}}
/* 系统设了「减少动效」就静静停在最后那一帧：选中一段、已经保存好。第 916 件起跟「自动推荐」那一块同一条规则，写在下面「只放一遍」那一段 */

/* ───── 卸载之后的反馈页（第 834 件）。界面稿：ui-demo-卸载之后的反馈页.html ─────
   选项是整条的大按钮，点一下就算提交；选中的那条变红，其余变淡；追问框点完才出现。 */
.卸{max-width:620px}
.卸-项{display:block;width:100%;text-align:start;background:var(--white);border:1px solid var(--l1);border-radius:12px;
  padding:14px 16px;margin:0 0 10px;font-family:var(--body);font-size:15.5px;line-height:1.5;color:var(--ink);cursor:pointer}
.卸-项:hover{border-color:var(--red-line);background:var(--red-wash)}
.卸-项.中{border-color:var(--red);background:var(--red-wash);font-weight:600}
.卸-项.淡{opacity:.45}
.卸-追{background:var(--white);border:1px solid var(--l1);border-radius:12px;padding:16px;margin-top:6px}
/* 第 1056 件：选了「下载不了或没发现视频」那一项时，追问哪个网站是这一页最想要的一样东西，样子上就要压得住 */
.卸-追.问网站{border-color:var(--red-line);box-shadow:0 0 0 3px var(--red-wash)}
.卸-追.问网站 label{color:var(--red);font-weight:600;font-size:14.5px}
/* 第 1060 件：自动填上检测失败网址时的说明行 + 清空钮 */
.卸-自填{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 8px;color:var(--t2);font-size:13px}
.卸-自填[hidden]{display:none}
.卸-谢{font-weight:700;color:var(--green);margin:0 0 4px}
.卸-追 label{display:block;color:var(--t2);font-size:13.5px;margin:0 0 8px}
.卸-行{display:flex;gap:8px}
.卸-行 input{flex:1 1 auto;min-width:0;height:42px;border:1px solid var(--l6);border-radius:9px;padding:0 12px;font-family:var(--body);font-size:14.5px}
.卸-行 .钮{flex:none}
.卸-已发{color:var(--green);font-weight:600;margin:8px 0 0}
.卸-回{margin:22px 0 0;display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:var(--t2);font-size:14px}

/* ───── 首页视频区（第 902 件，Human 2026-09-28 选的方案 C）─────
   紧接首屏下面：一个 16:9 的播放器；有使用说明的语言（现在只有简体中文）下面再有两张卡片。
   **左右边跟首页别的区块对齐**：整块是 .宽（版心 1240、两边留 --pad），播放器和卡片都撑满版心，不另设最大宽度。
   Human 看方案 C 演示页时说「那个视频的两边距和其他部分的两边距不一致，很奇怪」：演示页上播放器最宽 1000，比版心窄一截。
   圆角 18、阴影跟原来首屏右边那个演示窗口（.演，第 915 件从首页去掉了，博客特性页还在用）同一套；两张卡片之间的空隙跟对比区两栏（.比-栏）一样是 24，
   卡片的边框、圆角跟特性那六张卡（.功 article）同一套。播放逻辑在 home-video.js。 */
.影{padding-top:22px;padding-bottom:8px}   /* 第 915 件：首屏去掉演示窗口后，视频紧接在按钮下面，上边距从 30 收到 22 */
.影-主{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:var(--ink);box-shadow:0 34px 70px -44px rgba(20,22,26,.5)}
.影-主 video{display:block;width:100%;height:100%;object-fit:cover;background:var(--ink);cursor:pointer}
.影-主[data-用户] video{cursor:auto}
/* 静音自动播放时右下角那两颗：暂停 / 播放、打开声音 / 关闭声音。半透明深底白字，什么画面上都看得清 */
.片控{position:absolute;inset-inline-end:14px;bottom:14px;z-index:2;display:flex;gap:8px}
html:not(.js) .片控{display:none}
/* 用户点了画面或者卡片之后换成浏览器自带的控制条，这两颗就收起来 */
.影-主[data-用户] .片控{display:none}
.片钮{display:inline-flex;align-items:center;height:34px;padding:0 14px 0 11px;border-radius:999px;border:1px solid rgba(255,255,255,.26);
  background:rgba(20,22,26,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--white);
  font-family:var(--body);font-size:13px;font-weight:600;line-height:1;cursor:pointer;transition:background .15s}
.片钮:hover{background:rgba(20,22,26,.86)}
.片钮 > span{display:inline-flex;align-items:center;gap:7px}
.片钮 svg{width:16px;height:16px;flex-shrink:0}
.片钮 > .已停,.片钮 > .有声{display:none}
.影-主[data-停了] .片钮 > .在播{display:none}
.影-主[data-停了] .片钮 > .已停{display:inline-flex}
.影-主[data-有声] .片钮 > .无声{display:none}
.影-主[data-有声] .片钮 > .有声{display:inline-flex}
/* 宣传片自动播放一遍停下之后，画面底下正中出一颗「重新播放」，右下角那两颗收起来。
   不放在正中间：片尾那一屏正中是品牌图标和口号，按钮会压在字上（第一版就压住了「喜欢，就存下。」的下半截） */
.影-主[data-放完] .片控{display:none}
.重播{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:2;display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  border:0;border-radius:999px;background:var(--white);color:var(--ink);font-family:var(--body);font-size:15px;font-weight:600;line-height:1;
  padding:13px 22px 13px 16px;cursor:pointer;box-shadow:0 12px 30px -10px rgba(0,0,0,.55);transition:background .15s,color .15s}
.重播 svg{width:20px;height:20px;color:var(--red)}
.重播:hover{background:var(--ink);color:var(--white)}
.重播:hover svg{color:var(--white)}
/* 两张卡片：左边缩略图，右边片名和片长。正在放的那张红边 */
.影-单{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:24px}
.影-项{display:flex;align-items:center;gap:18px;min-width:0;padding:12px 22px 12px 12px;border:1px solid var(--l3);border-radius:16px;background:var(--white);
  color:var(--ink);font-family:var(--body);text-align:start;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.影-项:hover{border-color:var(--t5);box-shadow:0 12px 30px -22px rgba(20,22,26,.45)}
.影-项[aria-pressed="true"]{border-color:var(--red);box-shadow:0 0 0 1px var(--red) inset}
.影-图{position:relative;flex-shrink:0;width:128px;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:var(--ink)}
.影-图 img{display:block;width:100%;height:100%;object-fit:cover}
.影-图 svg{position:absolute;inset:0;margin:auto;width:24px;height:24px;color:var(--white);filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.影-字{display:flex;flex-direction:column;gap:7px;min-width:0}
.影-字 b{font-family:var(--disp);font-size:17px;font-weight:700;letter-spacing:-.02em;line-height:1.25}
.影-字 small{font-family:var(--mono);font-size:12px;color:var(--t3)}
:lang(zh) .影-字 b{letter-spacing:0}
/* 第 930 件：YouTube 播放器（简体以外填了编号的那几部）。放 YouTube 时右下角两颗和「重新播放」都用不上；
   还没点的时候封面正中一个播放键（.影-开）；点了之后 YouTube 的播放器（.影-yt）盖满这一块；
   10 秒没加载出来，播放器藏掉、露出封面和一个「在 YouTube 上观看」（.影-去） */
.影-主[data-yt] .片控,.影-主[data-yt] .重播{display:none}
.影-开{position:absolute;inset:0;margin:auto;z-index:2;width:84px;height:84px;border-radius:50%;border:1px solid rgba(255,255,255,.3);
  background:rgba(20,22,26,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--white);
  display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background .15s,transform .15s}
.影-开:hover{background:var(--red);transform:scale(1.04)}
.影-开 svg{width:34px;height:34px;margin-left:4px}
.影-yt{position:absolute;inset:0;z-index:3;width:100%;height:100%;border:0;background:var(--ink)}
.影-主[data-yt失败] .影-yt{visibility:hidden}
.影-去{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  padding:13px 22px;border-radius:999px;border:0;background:var(--white);color:var(--ink);font-family:var(--body);font-size:15px;font-weight:600;
  box-shadow:0 12px 30px -14px rgba(0,0,0,.6)}
.影-去:hover{background:var(--red);color:var(--white)}
@media (max-width:619px){
  .影{padding-top:18px}
  .影-主{border-radius:14px}
  .片控{inset-inline-end:10px;bottom:10px;gap:6px}
  .片钮{height:32px;padding:0 12px 0 10px;font-size:12.5px}
  /* 手机上「暂停 / 播放」只留图标，字只给读屏软件念（不用 display:none，那样读屏软件也念不到） */
  .片钮[data-动作="暂停"]{padding:0 9px}
  .片钮[data-动作="暂停"] .片钮字{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .重播{bottom:12px;font-size:14px;padding:10px 18px 10px 14px}
  .影-单{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:16px}
  .影-项{border-radius:14px;padding:10px 16px 10px 10px;gap:14px}
  .影-图{width:112px}
  .影-开{width:64px;height:64px}
  .影-开 svg{width:26px;height:26px}
}

/* ---------- 首页两块示意动画只放一遍（第 916 件，Human 2026-09-28）----------
   「选段下载」那一块（.段选-演，10 秒）和「自动推荐」那两张卡（.比-无、.比-有，8 秒）原来无限循环，一直在动。
   现在：那一块大半进了视野（common.js 加上 .开演）才开始放，放一遍就停在最后一格：选好一段、保存好了；挑出正片、保存好了。
   滚走再回来不重播（common.js 放过一次就不再盯着）。没有脚本的时候打开页面就放一遍。
   关键帧的最后一格都是「做完了」的样子（s卡、xQ、xWrong、xFrown 第 916 件改过）。
   **系统设了「减少动效」的照样滚到时放一遍**（第 923 件）：Human 2026-09-02 定过「减少动画时首页演示照放，演示是在讲功能，不是装饰」，
   他那台 Windows Server 2022 默认就开着这个设置；第 916 件一度改成直接显示最后一格，他在自己电脑上就看不到演示了。
   只放一遍、停住，本来也比原来的无限循环安静。首屏进场那段浮上来的动画照旧听这个设置（上面「减少动画」那一行）。 */
:is(.段选-演,.比-无,.比-有) *{animation-iteration-count:1 !important;animation-fill-mode:both !important}
html.js :is(.段选-演,.比-无,.比-有):not(.开演) *{animation-play-state:paused !important}


/* ---------- 边距、定位、对齐用的是跟书写方向走的写法（第 908 件改的，第 925 件留着）----------
   margin-inline-start、inset-inline-end、text-align:start 这类，在从左往右的页面上跟原来写死 left / right 一模一样。
   第 908 件为阿拉伯文（从右往左）改成这样；2026-09-28 Human 定官网不做阿拉伯文了（第 925 件撤掉），这些写法没有害处，留着，
   以后真要加从右往左的语言，整页镜像就不用再逐条改。那时要补的字体、字距、数字隔开排，第 908 件的做法记在
   01_requirement_and_plan/架构与设计.html 九之八和 04_ops/踩坑记录.md。 */

/* ───── 装好了那一页（第 988 件，Human 2026-09-30 定）─────
   一张仿浏览器工具栏的小图：拼图图标和 VGrab 那一行的图钉各标一个号，号跟下面的步骤对上。图是纯样式画的，文字跟着页面语言走。 */
.装好{max-width:620px}
.装好-图{background:var(--white);border:1px solid var(--l1);border-radius:14px;padding:14px;margin:0 0 22px;box-shadow:0 1px 0 var(--l1)}
.装好-栏{display:flex;align-items:center;gap:10px;background:var(--bg);border-radius:10px;padding:8px 10px}
.装好-址{flex:1 1 auto;height:26px;border-radius:13px;background:var(--white);border:1px solid var(--l1)}
.装好-钮{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%}
.装好-钮 svg{width:18px;height:18px;fill:var(--t2)}
.装好-钮 svg[hidden]{display:none}
.装好-亮{background:var(--red-wash);box-shadow:0 0 0 2px var(--red)}
.装好-亮 svg{fill:var(--red)}
.装好-号{position:absolute;top:-8px;inset-inline-end:-8px;min-width:18px;height:18px;border-radius:9px;background:var(--red);color:#fff;font:700 11px/18px var(--body);text-align:center}
.装好-单{margin:10px 0 0 auto;max-width:300px;background:var(--white);border:1px solid var(--l1);border-radius:10px;padding:10px 12px;box-shadow:0 6px 18px rgba(0,0,0,.08)}
.装好-单头{font-size:13px;font-weight:700;color:var(--t2);margin:0 0 8px}
.装好-行{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--ink)}
.装好-行 span:not(.装好-钮){flex:1 1 auto}
.装好-步{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:12px}
.装好-步 li{display:flex;align-items:flex-start;gap:12px;font-size:16px;line-height:1.5;color:var(--ink)}
.装好-步 b{flex:none;width:26px;height:26px;border-radius:50%;background:var(--red);color:#fff;font:700 13px/26px var(--body);text-align:center}
.装好-步 [hidden]{display:none}
.装好-再{margin:0 0 18px}

/* ---------- 素材页（第 1026 件）：标志、演示动图、商店截图 ---------- */
/* 版心还是 .文-主 那 880。标志三个一小格；演示动图通栏；商店截图两列，点图开原图 */
.素材注{font-size:14.5px;color:var(--t3);margin-top:8px}
.演图{margin:18px 0 6px}
.演图 img{width:100%;height:auto;border:1px solid var(--l2);border-radius:10px;display:block}
.演图 figcaption{font-size:14.5px;line-height:1.8;color:var(--t2);margin-top:8px}

/* 第 1052 件：博客文末「关于 VGrab」那一段 */
.关于VGrab{margin:36px 0 0;padding:16px 18px;border:1px solid var(--rule,#e5e7eb);border-radius:12px;background:var(--surface-sunk,#f6f7f9);font-size:14.5px;line-height:1.7;color:var(--t2,#4b5563)}
.关于VGrab strong{color:var(--t0,#111827);margin-right:4px}