/* ══
   光子方程 Lenscript 主站样式表
   实现 _generator/DESIGN.md §1–§10（那份文件是唯一权威，本表只是它的落地）。

   原则：照片是主角，界面是画框。
   · 全站 ≥80% 面积只有黑白灰，强调色只出现在主按钮 / 链接下划线 / 焦点态。
   · 层次靠尺寸、明暗、留白与 1px 细线，不靠阴影。全站唯一允许的阴影是
     --shadow-ui（下拉面板与产品窗口的贴地感），禁止渐变 / 玻璃拟态 / 发光。
   · 不引任何外部字体或 CDN；图标一律内联 SVG，用 currentColor。
   · 动效只用 transform / opacity，180–500ms，prefers-reduced-motion 下关掉。

   三套主题选择器（缺一不可）：
     :root                                   浅色（默认）
     @media(prefers-color-scheme:dark) + :root:not([data-theme="light"])   跟随系统
     :root[data-theme="dark"]                手动选深色

   ⚠️ 全站只有这一张表，**不要再往后面追加「某某页专用」的块**。2026-09-16 的
   重建里四组页面各自追加过一段，结果同一条规则被写了三遍、互相打架；那四段已经
   按用途并回下面的章节。新组件按它的用途放进对应章节，页面私有的微调也一样。

   章节目录：
     1 令牌 · 2 基础重置 · 3 排版 · 4 布局与栅格 · 5 导航 · 6 按钮与链接
     7 卡片 / 表单 · 8 媒体（frame / figure / compare / gallery / 影像）
     9 区块骨架（section / hero / feature / plan / log / cta-final）· 10 状态与杂项
     11 页脚 · 12 长文排版（教程页与法务页，生成器产物依赖）· 13 动效与打印
   ══ */

/* ── 1. 令牌 ── */
:root{
  --bg:#F6F5F2;
  --bg-pure:#FFFFFF;
  --bg-deep:#111111;
  --bg-raised:#EEEDE9;
  --fg:#151515;
  --fg-2:#656565;
  /* 三级文字必须自己过 4.5:1（它承的是 13–14px 的面包屑 / figcaption / meta，
     不是大字）。旧的 #969696 压在 --bg 上只有 2.71:1，远不达标；#6C6B67 是
     「在 --bg 4.89、--bg-pure 5.33、--bg-raised 4.55 三块底色上都过 4.5」的
     最浅的一档，再浅一格 --bg-raised 就掉到 4.4（2026-09-16 实算）。 */
  --fg-3:#6C6B67;
  --line:#E6E4DF;
  --line-strong:#151515;
  --accent:#C9552B;
  --accent-fg:#FFFFFF;
  --focus:#C9552B;
  --overlay:rgba(17,17,17,.55);
  --danger:#B3261E;
  --ok:#1C6B45;

  /* 字体栈（DESIGN §2）。只用系统字体：等网络字体会先闪一行系统字再跳。 */
  --font-sans:"Inter","SF Pro Text",-apple-system,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Noto Sans CJK SC","Noto Sans SC","Source Han Sans SC","Microsoft YaHei","Segoe UI",sans-serif;
  /* 衬线栈里不能留 SimSun：Windows 上它排在 Noto/Source Han 之前命中，中文大标题
     就成了又细又硬的宋体（所有者 2026-09-16 实机反馈）。 */
  --font-serif:"New York","Iowan Old Style",Georgia,"Songti SC","Noto Serif CJK SC","Noto Serif SC","Source Han Serif SC",serif;
  --font-mono:"SF Mono","JetBrains Mono",Menlo,Consolas,"Noto Sans Mono","Noto Sans Mono CJK SC",ui-monospace,monospace;

  --t-display:clamp(2.75rem,1.5rem + 4.6vw,5.5rem);
  --t-h1:clamp(2.5rem,1.4rem + 3.6vw,4.25rem);
  --t-h2:clamp(2rem,1.3rem + 2vw,3rem);
  --t-h3:clamp(1.375rem,1.2rem + .5vw,1.625rem);
  --t-lead:clamp(1.125rem,1.05rem + .25vw,1.25rem);
  --t-body:clamp(1rem,.97rem + .12vw,1.0625rem);
  --t-small:.875rem;
  --t-micro:.8125rem;
  --t-nav:.90625rem;

  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;
  --section-y:clamp(64px,4.5vw + 28px,96px);
  --section-y-tight:clamp(40px,3vw + 16px,64px);
  --gutter:clamp(20px,4vw,64px);
  --max:1440px;
  --wide:1280px;
  --text:640px;
  --measure:640px;
  --prose:44rem;
  --col-gap:clamp(16px,2vw,32px);
  --radius-img:14px; --radius-btn:9px; --radius-tag:6px; --radius-input:8px;

  --shadow-ui:0 1px 2px rgba(0,0,0,.06);

  --nav-h:72px;
  --ease:cubic-bezier(.2,.7,.2,1);

  /* 主题令牌快照。这几条在 :root 上求值，所以永远等于「当前主题」的那一档
     （下面两个深色块也覆写 --fg/--line，快照跟着变，不必抄第三遍）。用途只有
     一个：自带不透明底色的浮层（下拉面板、全屏菜单）要把被局部覆写掉的令牌
     还原回主题值——见 §5 的 .nav__panel。不要拿它当普通令牌用。 */
  --fg-theme:var(--fg);
  --fg-2-theme:var(--fg-2);
  --fg-3-theme:var(--fg-3);
  --bg-theme:var(--bg);
  --line-theme:var(--line);
  --line-strong-theme:var(--line-strong);
  --accent-theme:var(--accent);
  --accent-fg-theme:var(--accent-fg);
  --focus-theme:var(--focus);

  color-scheme:light;
}
@media (max-width:1024px){:root{--nav-h:60px}}

/* 深色令牌抄两份（CSS 没有选择器别名）。跟随系统那份必须带
   :not([data-theme="light"])，否则手动选浅色压不过它。 */
/* 深色的三级文字同理：旧的 #6F6E6A 在 --bg 上只有 3.78:1。#8A8985 在 --bg 5.51、
   --bg-pure 5.22、--bg-raised 4.87、--bg-deep 6.00，四块底色全部过 4.5。 */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0E0E0E; --bg-pure:#151515; --bg-deep:#000000; --bg-raised:#1C1C1C;
    --fg:#F2F1EE; --fg-2:#A8A7A3; --fg-3:#8A8985;
    --line:#2A2A2A; --line-strong:#F2F1EE;
    --accent:#E0714A; --accent-fg:#0E0E0E; --focus:#E0714A;
    --overlay:rgba(0,0,0,.6);
    --danger:#F2857A; --ok:#6FD39B;
    --shadow-ui:0 1px 2px rgba(0,0,0,.5);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0E0E0E; --bg-pure:#151515; --bg-deep:#000000; --bg-raised:#1C1C1C;
  --fg:#F2F1EE; --fg-2:#A8A7A3; --fg-3:#8A8985;
  --line:#2A2A2A; --line-strong:#F2F1EE;
  --accent:#E0714A; --accent-fg:#0E0E0E; --focus:#E0714A;
  --overlay:rgba(0,0,0,.6);
  --danger:#F2857A; --ok:#6FD39B;
  --shadow-ui:0 1px 2px rgba(0,0,0,.5);
  color-scheme:dark;
}

/* 终章 CTA（.cta-final）的深色底：只覆写语义令牌，不动全局。深色主题下 --bg-deep
   已是 #000，同一套写法两个主题都成立。
   .section--dark 保留在选择器里，但只服务 /_styleguide/ 的深色样例——页面正文不再
   单独套深色区块（2026-09-16 所有者决定）。 */
.section--dark,.cta-final{
  --bg:var(--bg-deep);
  --bg-pure:#1A1A1A;
  --bg-raised:#1C1C1C;
  --fg:#F2F1EE; --fg-2:#A8A7A3; --fg-3:#8A8985;
  --line:#2A2A2A; --line-strong:#F2F1EE;
  --accent:#E0714A; --accent-fg:#0E0E0E; --focus:#E0714A;
  --overlay:rgba(0,0,0,.6);
  --danger:#F2857A; --ok:#6FD39B;
  color-scheme:dark;
}
.section--dark,.cta-final{background:var(--bg);color:var(--fg)}

/* ── 2. 基础重置 ── */
*,*::before,*::after{box-sizing:border-box}
/* scroll-padding-top：导航是 position:fixed，锚点跳转默认把目标顶到 y=0，正好被
   那 72px 压住——导航里的「功能」跳 /products/#matrix，眉题「能力矩阵」就被裁掉半行
   （2026-09-16 实测截图）。全站在这里补一次，个别块要更多留白就再加自己的
   scroll-margin-top（两者相加，见 §12 的 .gsec）。 */
html{
  -webkit-text-size-adjust:100%;scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 16px);
}
body{
  margin:0;padding-top:var(--nav-h);
  background:var(--bg);color:var(--fg);
  font-family:var(--font-sans);font-size:var(--t-body);line-height:1.7;
  font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body[data-hero="dark"]{padding-top:0}
body.is-locked{overflow:hidden}

img,svg,video,picture{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
hr{border:0;border-top:1px solid var(--line);margin:var(--space-7) 0}

:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:3px}
::selection{background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--fg)}

/* 跳转链接用 clip 的视觉隐藏写法：left:-9999px 会撑大 scrollWidth，手机上整页
   能横着拖。 */
.skip,.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip:focus{
  position:fixed;left:var(--gutter);top:12px;z-index:200;width:auto;height:auto;
  clip:auto;clip-path:none;background:var(--bg-pure);color:var(--fg);
  padding:12px 18px;border:1px solid var(--line-strong);border-radius:var(--radius-btn);
}
/* 跳过链接的落点。<main> 带 tabindex="-1" 才能真正接住焦点（只滚动不接焦点的话，
   下一次 Tab 又从导航开始，跳过链接等于没跳）；它不是可点元素，所以不画焦点环——
   看得见的反馈是页面滚到了正文，接着 Tab 就落在正文第一个链接上。 */
main[tabindex="-1"]:focus{outline:none}

/* ── 3. 排版 ── */
h1,h2,h3,h4,h5,h6{margin:0;font-weight:500;color:var(--fg);text-wrap:balance}
/* 英文无衬线标题加一档重量（中文字面本来就密，加重会糊）。:not(.serif) 必须写：
   它权重压得过 .serif，而衬线到 600 就成了粗黑体（DESIGN §2 要 400–500）。 */
html:lang(en) :is(h1,h2,h3):not(.serif){font-weight:600}
p{margin:0}
p+p{margin-top:1em}

.display,.h1,.h2,.h3{display:block}
.display{font-size:var(--t-display);line-height:1.02;letter-spacing:-.025em;font-weight:500}
h1,.h1{font-size:var(--t-h1);line-height:1.05;letter-spacing:-.02em}
/* 页面主标题固定 1–2 行、不留孤字：栏宽本身有 1060–1280px，--t-h1 下一行能排
   19 个汉字，长标题会甩出一个孤字尾行。给一个栏宽上限，再交给 text-wrap:balance
   把两行分匀。单位用 em 不用 ch：ch 是「0」的宽度，中文字体里只有 0.5em 左右，
   写 16ch 实际只有 8.9 个汉字宽，最长的中文标题（/products/liuying/ 24 字）会掉
   到三行。13em = 13 个汉字，24 字的标题正好匀成 12 + 12 两行。
   <main class="article">（教程与法务生成页）走自己的 --prose 栏宽，排除在外。 */
#main:not(.article) h1:not(.display){text-wrap:balance;max-width:13em}
html:lang(en) #main:not(.article) h1:not(.display){max-width:15em}
h2,.h2{font-size:var(--t-h2);line-height:1.1;letter-spacing:-.015em}
h3,.h3{font-size:var(--t-h3);line-height:1.3;letter-spacing:-.005em}
h4{font-size:1.0625rem;line-height:1.45}

/* 衬线只许用在：英文 Hero / display 主标题、页脚宣言。一页最多两处，字重 400–500
   （DESIGN §2）。中文那份由下一条改写成无衬线 600。 */
.serif{font-family:var(--font-serif);font-weight:400;letter-spacing:-.01em}
/* 中文大标题一律无衬线：中文衬线（宋/明体）在 68–88px 上笔画细、横竖对比强，
   压在影像上又细又脏；英文 display 仍走 Georgia 400。页脚品牌宣言
   （.footer__manifesto）直接写 --font-serif，不受这条影响，是全站唯一一处中文衬线。
   .gfeat__title（教程首页头条）也是直接写 --font-serif 的，绕过了 .serif，所以在这里点名。 */
html[lang="zh-CN"] :is(.serif,.display,h1.display,.hero h1,.gfeat__title){
  font-family:var(--font-sans);font-weight:600;letter-spacing:-.01em;
}
.mono,.nums{font-variant-numeric:tabular-nums}
.mono{font-family:var(--font-mono)}

.lead{font-size:var(--t-lead);line-height:1.6;color:var(--fg-2);max-width:720px}
.small{font-size:var(--t-small);line-height:1.5;color:var(--fg-2)}
.micro,.eyebrow{
  font-size:var(--t-micro);line-height:1.4;letter-spacing:.02em;color:var(--fg-3);
}
.eyebrow{display:block;margin:0 0 var(--space-4);text-transform:uppercase;font-weight:500}
html:lang(zh-CN) .eyebrow{text-transform:none;letter-spacing:.12em}
.measure{max-width:var(--measure)}
.muted{color:var(--fg-2)}
.nowrap{white-space:nowrap}

/* 正文链接：文字保持 --fg，只有下划线是强调色，hover 加粗到 2px。.prose a 是
   同一件东西，合写在这里；§12 的 .toc / .nextsteps 仍在其后，覆写照常生效。 */
.link,.richtext a:not(.btn),.prose a:not(.btn){
  color:var(--fg);text-decoration:underline;text-decoration-color:var(--accent);
  text-decoration-thickness:1px;text-underline-offset:3px;
  transition:text-decoration-thickness .15s var(--ease);
}
.link:hover,.richtext a:not(.btn):hover,.prose a:not(.btn):hover{text-decoration-thickness:2px}
.faq .a a,.backlink a,.allguides a{
  color:var(--fg);text-decoration:underline;
  text-decoration-color:var(--accent);text-underline-offset:3px;
}

/* ── 4. 布局与栅格 ── */
.wrap{width:100%;max-width:var(--wide);margin:0 auto;padding:0 var(--gutter)}
.wrap--max{max-width:var(--max)}
/* 一套栅格（DESIGN §3）：视口一进 1280，内容栏 --wide 就抬到导航 / 页脚的那一档
   --max，全站只剩一条竖线——导航 logo、页头 h1、区块正文左边缘完全重合。
   断点必须是 1280 而不是 1440/1600：两个容器的台阶正是从 .wrap 先封顶（1280）、
   导航还没封顶（1440）那一刻开始长出来的，1280–1439 之间最大差 80px，1440 以上
   恒定 80px。定在 1280 之后，1280 以下两个容器都由视口封顶（本来就重合），1280
   以上两个都是 1440，全区间零台阶。
   行长不再靠容器收：正文一行的上限交给 .measure / --text / .lead / --prose
   （DESIGN §3），容器只管对齐。
   有了这条，页头和 Hero 不再需要各自「放开栏宽」的特例（旧 .wrap:has(>.phead)
   与 .hero__inner 的 ≥1900 padding hack 已删——它们制造的正是左右两道台阶）。 */
@media (min-width:1280px){:root{--wide:var(--max)}}
.wrap--text{max-width:calc(var(--text) + var(--gutter) * 2)}
.bleed{margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1)}

.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--col-gap)}
.span-3{grid-column:span 3}
.span-4{grid-column:span 4}
.span-5{grid-column:span 5}
.span-6{grid-column:span 6}
.span-7{grid-column:span 7}
.span-8{grid-column:span 8}
.span-12{grid-column:span 12}
.grid--center{align-items:center}
@media (max-width:1024px){
  .span-3,.span-4,.span-5,.span-6,.span-7,.span-8{grid-column:span 6}
}
@media (max-width:640px){
  .span-3,.span-4,.span-5,.span-6,.span-7,.span-8{grid-column:span 12}
}

.stack>*+*{margin-top:var(--space-5)}
.stack--tight>*+*{margin-top:var(--space-3)}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}
.mt-4{margin-top:var(--space-4)}
.mt-5{margin-top:var(--space-5)}
.mt-6{margin-top:var(--space-6)}
.mt-7{margin-top:var(--space-7)}
.mt-8{margin-top:var(--space-8)}
.center{text-align:center}

/* 介于 --text（640 太窄）与 --wide（1280 一行 100 字）之间的三档栏宽。1060 是
   最长一条中文标题在 1440 下不折行的最小值（中文没有词边界，折了就从词中间断）；
   900 / 920 给 dl、spec-list 这类整句块。 */
.a2-head{max-width:1060px}
.a2-narrow{max-width:900px}
/* 900 是给 dl / spec-list 的；整段话套上去一行要排 45 个汉字，读着要找行。
   .lead 撞上 .a2-narrow 时退回 .lead 自己的 720。 */
.lead.a2-narrow{max-width:720px}
.about-principles{max-width:920px}

/* ── 5. 导航（DESIGN §4.1）── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;height:var(--nav-h);
  background:transparent;border-bottom:1px solid transparent;
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
.nav.is-scrolled{
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom-color:var(--line);
}
/* 深色首屏之上：滚动前一律白字，滚动后交还给主题令牌。--bg 也要跟着翻——主按钮
   是 background:var(--fg);color:var(--bg)，只改 --fg 会变成白底白字。 */
.nav--on-dark:not(.is-scrolled){
  --fg:#FFFFFF; --fg-2:rgba(255,255,255,.74); --fg-3:rgba(255,255,255,.56);
  --bg:#111111;
  --line:rgba(255,255,255,.22); --line-strong:#FFFFFF;
  /* 强调色也要翻到深色那档，和 .section--dark 同一套：浅色的 #C9552B 焦点环压在
     首屏照片上偏闷，键盘用户看不清自己停在哪个菜单上。 */
  --accent:#E0714A; --accent-fg:#0E0E0E; --focus:#E0714A;
  color:#FFFFFF;
}
.nav__inner{
  display:flex;align-items:center;gap:var(--space-5);height:100%;
  max-width:var(--max);margin:0 auto;padding:0 var(--gutter);
}

.brand{display:inline-flex;align-items:center;gap:10px;color:var(--fg);flex:0 0 auto}
.brand__mark{width:24px;height:24px;flex:0 0 auto;color:var(--fg)}
.brand__name{font-size:.9375rem;font-weight:500;letter-spacing:.04em;white-space:nowrap}
html:lang(en) .brand__name{letter-spacing:.01em;font-weight:600}
.brand .bz{font-size:.9375rem;font-weight:500;letter-spacing:.04em}
.brand .be{font-size:.75rem;font-weight:500;letter-spacing:.14em;color:var(--fg-3);white-space:nowrap}
@media (max-width:820px){.brand .be{display:none}}

.nav__links{display:flex;align-items:center;gap:var(--space-1);margin:0 auto;padding:0;list-style:none}
.nav__item{position:relative}
/* --menu 只是 nav.js 的选择器钩子（「这一项有下拉」），本身不带样式。 */
.nav__link{
  display:inline-flex;align-items:center;gap:6px;
  height:36px;padding:0 10px;border:0;background:none;cursor:pointer;
  font-size:var(--t-nav);line-height:1;color:var(--fg-2);border-radius:var(--radius-tag);
  transition:color .15s var(--ease);
}
.nav__link:hover{color:var(--fg)}
.nav__link[aria-current]{color:var(--fg);box-shadow:inset 0 -2px 0 var(--fg)}
.nav__caret{width:9px;height:9px;flex:0 0 auto;transition:transform .2s var(--ease)}
.nav__link[aria-expanded="true"]{color:var(--fg)}
.nav__link[aria-expanded="true"] .nav__caret{transform:rotate(180deg)}

/* ⚠️ 面板自带 --bg-pure 的不透明底色，所以它**不能**继承 .nav--on-dark 的白字
   令牌：那会让浅色主题下的白底面板变成白字白底，展开就是一大片空白（所有者
   2026-09-16 Windows Chrome 实机截图）。这里把被局部覆写的几个令牌还原成
   §1 的主题快照，浮层从此只认主题、不认底下那屏照片的明暗。
   新增任何浮在导航里的不透明面板，都要照抄这一段。 */
.nav__panel{
  --fg:var(--fg-theme); --fg-2:var(--fg-2-theme); --fg-3:var(--fg-3-theme);
  --bg:var(--bg-theme);
  --line:var(--line-theme); --line-strong:var(--line-strong-theme);
  --accent:var(--accent-theme); --accent-fg:var(--accent-fg-theme);
  --focus:var(--focus-theme);
  color:var(--fg);

  position:absolute;top:calc(100% + 6px);left:-12px;z-index:10;
  min-width:280px;padding:var(--space-4);
  background:var(--bg-pure);border:1px solid var(--line);
  border-radius:var(--radius-img);box-shadow:var(--shadow-ui);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  /* visibility 用 0s+延迟切换：打开这一帧就可见（否则 nav.js 的 .focus()
     落在 visibility:hidden 的元素上，键盘 ↓ 永远进不了面板），关闭时延到
     淡出走完再隐藏。 */
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s linear .2s;
}
.nav__item.is-open .nav__panel{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s;
}
.nav__item:last-child .nav__panel{left:auto;right:-12px}
.nav__panel[hidden]{display:none}
.nav__cols{display:grid;grid-template-columns:repeat(var(--cols,1),minmax(220px,1fr));gap:var(--space-2) var(--space-6)}
.nav__group{margin:0;padding:0;list-style:none}
.nav__grouphead{
  display:block;margin:0 0 var(--space-2);padding:0 10px;
  font-size:var(--t-micro);letter-spacing:.1em;color:var(--fg-3);font-weight:500;
}
.nav__panel a{
  display:block;padding:9px 10px;border-radius:var(--radius-tag);
  color:var(--fg);transition:background .15s var(--ease);
}
.nav__panel a:hover,.nav__panel a:focus-visible{background:var(--bg-raised)}
.nav__panel b{display:block;font-size:.9375rem;font-weight:500;color:var(--fg);line-height:1.35}
/* 说明行走 --fg-2 而不是 --fg-3：13px 的 --fg-3 压在白面板上只有 2.9:1，
   面板是要「读一眼就选」的地方，不是装饰性注脚。 */
.nav__panel span{display:block;margin-top:2px;font-size:var(--t-micro);color:var(--fg-2);line-height:1.45}

.nav__actions{display:flex;align-items:center;gap:var(--space-2);flex:0 0 auto}
.nav__text{
  display:inline-flex;align-items:center;height:36px;padding:0 6px;
  font-size:var(--t-nav);line-height:1;color:var(--fg-2);border-radius:var(--radius-tag);
  transition:color .15s var(--ease);
}
.nav__text:hover{color:var(--fg)}
/* 「下载」是导航里唯一一条不在 .nav__links 里的顶级入口（DESIGN §4.1），当前页
   状态必须和中部那几项长得一样，否则站在 /download/ 上导航里没有任何标记。 */
.nav__text[aria-current]{color:var(--fg);box-shadow:inset 0 -2px 0 var(--fg)}

/* 语言切换。两个字各撑 ≥40px 热区（「中」只有 14px 宽时手机点不中）。
   ⚠️ class="lang" 是 tools/legal/build.py 的契约（靠它把法务页的语言链接改指向
   法务页自己的另一语言 URL），改名会让 /terms/ 的语言切换指回教程索引。 */
.lang{display:inline-flex;align-items:center;font-size:var(--t-nav);color:var(--fg-3)}
.lang a{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:36px;color:var(--fg-2);border-radius:var(--radius-tag);
  transition:color .15s var(--ease);
}
.lang a:hover{color:var(--fg)}
@media (pointer:coarse){.lang a{display:inline-flex;align-items:center;min-width:44px;min-height:44px;justify-content:center}}
.lang a[aria-current]{color:var(--fg);font-weight:500}
.lang span{color:var(--fg-3);opacity:.6}

/* 图标按钮统一 40×40（触屏 44）。⚠️ .themebtn 是 theme.js 的契约，不要改名。 */
.themebtn,.menubtn,.navmenu__close{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:40px;height:40px;padding:0;cursor:pointer;color:var(--fg-2);
  background:none;border:1px solid transparent;border-radius:var(--radius-btn);
  transition:color .15s var(--ease),border-color .15s var(--ease);
}
.themebtn:hover,.menubtn:hover,.navmenu__close:hover{color:var(--fg);border-color:var(--line)}
.themebtn svg,.menubtn svg,.navmenu__close svg{width:19px;height:19px}
@media (pointer:coarse){.themebtn,.menubtn,.navmenu__close{width:44px;height:44px}}
.themebtn .ic-moon{display:inline}
.themebtn .ic-sun{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .themebtn .ic-moon{display:none}
  :root:not([data-theme="light"]) .themebtn .ic-sun{display:inline}
}
:root[data-theme="dark"] .themebtn .ic-moon{display:none}
:root[data-theme="dark"] .themebtn .ic-sun{display:inline}

.menubtn{display:none}
@media (max-width:1024px){
  .nav__links,.nav__actions .nav__text,.nav__actions .btn{display:none}
  .menubtn{display:inline-flex}
  .nav__inner{gap:var(--space-2)}
  .brand{margin-right:auto}
}
/* 1025–1200 是桌面导航最窄的一段：brand 与 actions 都是 flex:0 0 auto，挤不下时
   不会缩，而是把主按钮顶出视口右边——英文站 1025px 下「Start free」整颗被切掉
   （2026-09-16 实测溢出 120px；中文版正好卡在边上）。这一档收紧间距，并收起
   .nav__text（下载 / Download）：它在「产品」下拉和页脚里还各有一份（2026-09-16
   简化后「资源」下拉里那份撤掉了），不是唯一入口，而主按钮是。 */
@media (min-width:1025px) and (max-width:1200px){
  .nav__inner{gap:var(--space-3)}
  .nav__links{gap:0}
  .nav__link{padding:0 7px}
  .nav__actions{gap:var(--space-1)}
  .nav__actions .nav__text{display:none}
}

/* 全屏菜单是 </header> 之后的兄弟节点（site_chrome.py 就这么渲染），继承不到
   .nav--on-dark；令牌还原照抄一份只是保险——哪天它被挪进 header 里，不会又
   变成一片空白。 */
.nav__menu{
  --fg:var(--fg-theme); --fg-2:var(--fg-2-theme); --fg-3:var(--fg-3-theme);
  --bg:var(--bg-theme);
  --line:var(--line-theme); --line-strong:var(--line-strong-theme);
  --accent:var(--accent-theme); --accent-fg:var(--accent-fg-theme);
  --focus:var(--focus-theme);

  position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;
  background:var(--bg);color:var(--fg);
  opacity:0;transition:opacity .2s var(--ease);
}
.nav__menu[hidden]{display:none}
.nav__menu.is-open{opacity:1}
.navmenu__head{
  display:flex;align-items:center;justify-content:space-between;flex:0 0 auto;
  height:var(--nav-h);padding:0 var(--gutter);border-bottom:1px solid var(--line);
}
.navmenu__body{flex:1 1 auto;overflow-y:auto;padding:var(--space-4) var(--gutter) var(--space-8)}
.navmenu__body ul{margin:0;padding:0;list-style:none}
.navmenu__body nav>ul>li>a,.navmenu__body nav>ul>li>span{
  display:flex;align-items:center;min-height:56px;
  font-size:var(--t-h3);font-weight:500;color:var(--fg);
  border-bottom:1px solid var(--line);
}
.navmenu__body .navmenu__sub{padding:var(--space-2) 0 var(--space-4)}
.navmenu__sub a{
  display:flex;align-items:center;min-height:44px;
  font-size:1rem;color:var(--fg-2);
}
.navmenu__sub a:hover{color:var(--fg)}
.navmenu__label{
  display:block;margin:var(--space-6) 0 var(--space-2);
  font-size:var(--t-micro);letter-spacing:.12em;color:var(--fg-3);
}
.navmenu__foot{
  flex:0 0 auto;display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-4) var(--gutter) calc(var(--space-4) + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:var(--bg);
}
.navmenu__foot .btn{flex:1 1 auto;justify-content:center}

/* ── 6. 按钮与链接（DESIGN §4.2 / §4.3）── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:48px;padding:0 22px;border-radius:var(--radius-btn);
  border:1px solid transparent;background:none;cursor:pointer;
  font-size:.9375rem;font-weight:500;line-height:1;white-space:nowrap;
  text-align:center;
  transition:background .15s var(--ease),color .15s var(--ease),
             border-color .15s var(--ease),opacity .15s var(--ease);
}
.btn svg{width:16px;height:16px;flex:0 0 auto}
.btn--primary,.btn-a{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn--primary:hover,.btn-a:hover{background:var(--fg-2);border-color:var(--fg-2)}
.btn--accent{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.btn--accent:hover{background:color-mix(in srgb,var(--accent) 86%,var(--fg))}
.btn--secondary,.btn-b{
  color:var(--fg);border-color:color-mix(in srgb,var(--line-strong) 40%,transparent);
}
.btn--secondary:hover,.btn-b:hover{border-color:var(--line-strong)}
.btn--ghost{padding:0 4px;color:var(--fg)}
.btn--ghost:hover{color:var(--fg-2)}
.btn--ghost .arr,.btn .arr{transition:transform .15s var(--ease)}
.btn--ghost:hover .arr,.btn:hover .arr{transform:translateX(2px)}
.btn--sm{height:40px;padding:0 16px;font-size:var(--t-small)}
/* 触屏上 40px 点不准（DESIGN §10 要 44）。跟 .themebtn / .lang 用同一条口径。 */
@media (pointer:coarse){.btn--sm{height:44px}}
.btn--block{display:flex;width:100%}
.btn[aria-disabled="true"],.btn:disabled{opacity:.45;pointer-events:none}
/* 实底主按钮不能靠 opacity 变灰：.45 会压到 3:1 以下，DESIGN §10 要 4.5:1。
   降的是权重（--fg → --fg-2），不是透明度。 */
.btn--primary[aria-disabled="true"]{
  opacity:1;cursor:not-allowed;
  background:var(--fg-2);border-color:var(--fg-2);color:var(--bg);
}

/* ── 7. 卡片与表单（DESIGN §4.4 / §4.5）── */
.card{
  display:block;padding:28px;background:transparent;
  border:1px solid var(--line);border-radius:var(--radius-img);
  transition:border-color .2s var(--ease);
}
.card--link:hover,a.card:hover{border-color:color-mix(in srgb,var(--line-strong) 30%,transparent)}
.card__title{margin:0 0 var(--space-2);font-size:var(--t-h3);line-height:1.3}
.card__text{margin:0;color:var(--fg-2);font-size:var(--t-small);line-height:1.65}
.card__foot{margin-top:var(--space-5);font-size:var(--t-small);color:var(--fg-3)}
.card--raised{background:var(--bg-pure)}
.card>.figure{margin-bottom:var(--space-5)}
@media (max-width:640px){.card{padding:20px}}

.cards{display:grid;gap:var(--col-gap);grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin:0;padding:0;list-style:none}
/* 同一行的卡片描边要齐：<li> 本来就被 grid 拉平，卡片本体也得跟着撑满，
   否则标题少一行的那张会短一截（作品与案例「案例详情」最明显）。
   只对「卡片在 <li> 里面」这种写法生效；账号页是 <li class="card">，本来就齐。 */
.cards>li>.card{height:100%}
/* 帮助中心的分类卡：同一行必须等高（DESIGN §4.5）。原来写的 align-items:start 让
   七张卡按各自内容长短参差不齐，1920 下整片卡区看着是散的。栈到底部的「延伸阅读」
   用 margin-top:auto 顶下去，卡片内部照样不悬空。 */
.hcatgrid>.hcat{display:flex;flex-direction:column}
/* --gutter 跟着 4vw 走，1440 下的内容宽（1164.8）反而比 1920（封顶 1152）还宽，
   共用的 minmax(280px,·) 于是在 1440 排四列、在 1920 只排三列——所有者的大屏
   看到的比笔记本还散，七张卡最后一行只剩一张。268px 让 ≥1200 统一四列（7 = 4+3，
   只空一格），1024 以下照旧退回三列 / 两列 / 单列。 */
.catgrid.hcatgrid{grid-template-columns:repeat(auto-fill,minmax(268px,1fr))}
.hcat__h{margin:0;font-size:1rem;font-weight:500;line-height:1.4;color:var(--fg)}
.hcat>.hcat__more{margin:auto 0 0;padding-top:var(--space-4);font-size:var(--t-micro);color:var(--fg-3);line-height:1.6}

.field{display:block;margin:0 0 var(--space-5)}
.field__label{display:block;margin:0 0 6px;font-size:var(--t-micro);color:var(--fg-2)}
.input,.select,.textarea{
  display:block;width:100%;height:48px;padding:0 14px;
  background:var(--bg-pure);color:var(--fg);
  border:1px solid var(--line);border-radius:var(--radius-input);
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease);
}
.textarea{height:auto;min-height:120px;padding:12px 14px;line-height:1.6;resize:vertical}
.select{appearance:none;padding-right:38px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px,calc(100% - 14px) 21px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.input::placeholder,.textarea::placeholder{color:var(--fg-3)}
.input:focus,.select:focus,.textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent);
}
.field__hint{display:block;margin-top:6px;font-size:var(--t-micro);color:var(--fg-3)}
.field__msg{display:flex;align-items:flex-start;gap:6px;margin-top:6px;font-size:var(--t-micro);line-height:1.5}
.field__msg svg{width:14px;height:14px;flex:0 0 auto;margin-top:2px}
.field--error .input,.field--error .select,.field--error .textarea{border-color:var(--danger)}
.field--error .field__msg{color:var(--danger)}
.field--success .input{border-color:var(--ok)}
.field--success .field__msg{color:var(--ok)}
/* 焦点描边要压过 error / success 的色（同权重、写在后面的赢，否则聚焦时边框还是
   红 / 绿，看不出焦点落在哪）。同时把光晕从 20% 提到 30%：浅色底上 20% 几乎看不见。 */
.field--error :is(.input,.select,.textarea):focus,
.field--success :is(.input,.select,.textarea):focus{
  border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent);
}
.checkbox{display:flex;align-items:flex-start;gap:10px;font-size:var(--t-small);color:var(--fg-2)}
.checkbox input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--accent);flex:0 0 auto}

/* 账号页的登录 / 注册用 <details> 切换，零 JS；箭头与 §12 的 .faq 共用。 */
.acctlist li{padding:10px 0;font-size:var(--t-small);color:var(--fg-2);line-height:1.6}
.acctlist li+li{border-top:1px solid var(--line)}
.acctlist b{color:var(--fg);font-weight:500}
.authpane{border-top:1px solid var(--line)}
.authpane:last-of-type{border-bottom:1px solid var(--line)}
.authform{padding:var(--space-3) 0 var(--space-7)}
.authform .row .field__hint{margin:0;flex:1 1 200px;max-width:36ch}

.checklist{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.checklist li{position:relative;padding:14px 0 14px 28px;border-bottom:1px solid var(--line);color:var(--fg-2);line-height:1.6}
.checklist li::before{content:"";position:absolute;left:3px;top:1.35em;width:10px;height:5px;border-left:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);transform:rotate(-45deg)}

/* ── 8. 媒体（DESIGN §4.6 / §6）── */
.frame{
  position:relative;overflow:hidden;margin:0;
  aspect-ratio:16/10;background:var(--bg-raised);
  border:1px solid var(--line);border-radius:var(--radius-img);
  box-shadow:var(--shadow-ui);
}
.frame--phone{aspect-ratio:9/19.5;max-width:300px}
.a2-phone{margin-left:auto;margin-right:auto}
.frame>img,.frame>picture>img{width:100%;height:100%;object-fit:cover}
/* UI 深裁图比例各不相同（参数条 1200×394、模板选择器 1200×1307…），比例交给
   页面用 --ar / --aspect 写，不必为每张图加一个类。 */
.frame--ratio{aspect-ratio:var(--ar,16/10)}
/* 产品真实导出图的 2×2 陈列（镜笺四个模板家族）。每格自带 --ar，四张高度本来就
   不一样，顶对齐即可；不裁切、不强行统一比例。手机上仍是两列——看的是相框形状，
   排成一列会把页面拉得过长。 */
.outgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);align-items:start}
@media (max-width:640px){.outgrid{gap:var(--space-3)}}
.figure--ratio .figure__media{aspect-ratio:var(--ar,3/2)}
.a2-shot .figure__media{
  aspect-ratio:var(--aspect,16/10);
  border:1px solid var(--line);box-shadow:var(--shadow-ui);
}

.figure{margin:0}
.figure__media{
  position:relative;overflow:hidden;display:block;
  background:var(--bg-raised);border-radius:var(--radius-img);
  aspect-ratio:3/2;
}
.figure--portrait .figure__media{aspect-ratio:4/5}
.figure--wide .figure__media{aspect-ratio:21/9}
/* 21:9 到手机上只剩 350×150 的一条缝，而 <picture> 在 ≤640 换上的是 4/5 的 -m 档，
   等于把竖构图压进信箱里。跟 .moodshot 一样，窄屏改回 4/5。 */
@media (max-width:640px){.figure--wide .figure__media{aspect-ratio:4/5}}
.figure--square .figure__media{aspect-ratio:1/1}
.figure--bleed .figure__media{border-radius:0}
.figure--auto .figure__media{aspect-ratio:auto;background:none}
.figure--auto .figure__media>img{height:auto}
/* 原生像素封顶：小图铺满 .wrap 会被放大糊掉（900px 的样片拉到 1150px）。
   用 --native-w 写上这张图的真实宽度，居中，绝不放大。 */
.figure--native{max-width:var(--native-w);margin-inline:auto}
.figure__media>img,.figure__media>picture>img{width:100%;height:100%;object-fit:cover}
.figure figcaption{margin-top:10px;font-size:var(--t-small);color:var(--fg-3);line-height:1.6}
/* 一张照片按不同焦点裁三次（没有真实截图时立可信度），绝不冒充界面。 */
.cropshot--a .figure__media>img{object-position:28% 62%}
.cropshot--b .figure__media>img{object-position:72% 38%}
.cropshot--c .figure__media>img{object-position:50% 88%}

/* ⚠️ <picture> 高度 auto，里面 img 的 height:100% 没有参照物——锁了比例的容器里
   竖图只占上面一截，下面露出底色。所有比例容器在此一次性让 picture 撑满；
   新增比例容器时把选择器补进来。 */
.frame>picture,.figure__media>picture,.compare__media>picture,
.hero__media>picture,.cta-final__media>picture,.moodshot>picture,
.gfeat__media>picture{display:block;width:100%;height:100%}

/* 影像上的文字：必须垫 --overlay，否则对比度不可控（DESIGN §10）。 */
.overlay{position:absolute;inset:0;background:var(--overlay)}
.on-image{position:relative;z-index:1;color:#fff}

/* 全宽情绪影像（21/9，窄屏 4/5）。--card 带圆角用在区块内；--low 把裁切重心下移
   （杯子在画面下缘，居中裁会切掉杯底）。 */
.moodshot{position:relative;overflow:hidden;margin:0;background:var(--bg-raised)}
.moodshot img{width:100%;height:100%;object-fit:cover;aspect-ratio:21/9}
.moodshot--card{border-radius:var(--radius-img)}
.moodshot--low img{object-position:50% 78%}
@media (max-width:640px){.moodshot img{aspect-ratio:4/5}}

.compare{margin:0}
.compare__media{
  position:relative;overflow:hidden;
  aspect-ratio:3/2;background:var(--bg-raised);border-radius:var(--radius-img);
}
.compare__media img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center bottom;
}
.compare--portrait{max-width:460px;margin-inline:auto}
.compare--portrait .compare__media{aspect-ratio:4/5}
.compare--portrait .compare__media img{object-position:center}
.compare__b{clip-path:inset(0 0 0 var(--pos,50%))}
.compare__handle{
  position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;
  background:rgba(255,255,255,.9);pointer-events:none;
}
.compare__handle::after{
  content:"";position:absolute;top:50%;left:50%;width:34px;height:34px;
  transform:translate(-50%,-50%);border-radius:50%;
  border:2px solid rgba(255,255,255,.9);
}
.compare__legend{
  display:flex;justify-content:space-between;
  margin-top:10px;font-size:var(--t-micro);color:var(--fg-3);
}
.compare__range{
  display:block;width:100%;margin:var(--space-3) 0 0;height:24px;
  background:none;appearance:none;cursor:ew-resize;
}
/* 触屏：24px 高的滑杆拖不准；轨道与圆点在输入框里垂直居中，加高不改观感。 */
@media (pointer:coarse){.compare__range{height:44px}}
.compare__range::-webkit-slider-runnable-track{height:2px;background:var(--line)}
.compare__range::-moz-range-track{height:2px;background:var(--line)}
.compare__range::-webkit-slider-thumb{
  appearance:none;width:18px;height:18px;margin-top:-8px;border-radius:50%;
  background:var(--fg);border:0;
}
.compare__range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--fg);border:0}

.filmstrip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none}
@media (max-width:640px){
  .filmstrip{
    grid-auto-flow:column;grid-auto-columns:78%;grid-template-columns:none;
    overflow-x:auto;scroll-snap-type:x mandatory;gap:var(--space-4);
    scrollbar-width:none;
  }
  .filmstrip::-webkit-scrollbar{display:none}
  .filmstrip>*{scroll-snap-align:start}
}

.gallery{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--col-gap);margin:0;padding:0;list-style:none;
}
@media (max-width:1024px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.gallery{grid-template-columns:minmax(0,1fr)}}
.gallery>li[hidden]{display:none}
.gallery figure{position:relative;margin:0}
.gallery .figure__media{aspect-ratio:4/5}
/* hover / 聚焦才浮出标题与来源；文字一直在 DOM 里，读屏不受影响。≤640px 没有
   hover，改为常显在图下（DESIGN §9）。 */
.gallery .gallery__meta{
  position:absolute;left:0;right:0;bottom:0;z-index:1;margin:0;
  padding:14px 16px;background:var(--overlay);color:#fff;
  border-radius:0 0 var(--radius-img) var(--radius-img);
  opacity:0;transition:opacity .2s var(--ease);
}
.gallery>li:hover .gallery__meta,.gallery>li:focus-within .gallery__meta{opacity:1}
.gallery__meta b{display:block;font-size:.9375rem;font-weight:500}
.gallery__meta span{display:block;margin-top:3px;font-size:var(--t-micro);color:rgba(255,255,255,.82)}
@media (max-width:640px){
  .gallery .gallery__meta{
    position:static;opacity:1;padding:10px 0 0;background:none;
    color:var(--fg);border-radius:0;
  }
  .gallery .gallery__meta span{color:var(--fg-3)}
}

.a2-covers{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--col-gap);margin:0;padding:0;list-style:none;
}
@media (max-width:640px){.a2-covers{grid-template-columns:repeat(2,minmax(0,1fr))}}

.qrbox{margin:0;max-width:300px;padding:var(--space-5);text-align:center;background:var(--bg-pure);border:1px solid var(--line);border-radius:var(--radius-img)}
.qrbox img{width:100%;max-width:220px;height:auto;margin:0 auto;padding:8px;background:#fff;border-radius:var(--radius-input)}
.qrbox figcaption{margin-top:12px;font-size:var(--t-small);color:var(--fg-2);font-variant-numeric:tabular-nums}

/* ── 可交互地点卡（只用在 /products/lct/）────────────────────────────
   把 lct.lenscript.cn 首屏那张真卡搬过来，不再放静态截图：选一个地点，
   日出 / 黄金 / 日落 / 蓝调由页尾那段内联脚本按今天的日期本地重算。
   卡面永远是深色（照片压在下面），所以颜色不跟主题走，只借用令牌里深色那档：
   底 var(--bg-deep)、描边同 .nav--on-dark 的 rgba(255,255,255,.22)、
   按下的地点用深色档强调色 #E0714A（= 深色主题的 --accent）。
   浮层底 rgba(8,8,10,.86) 压在照片上，最坏情况（纯白像素）合成为 #2B2B2C：
   --pc-fg 12.7:1、--pc-fg-2 6.9:1。动效只有按钮的颜色过渡，
   §13 的 prefers-reduced-motion 全局块已经把它关掉。 */
.placecard{
  --pc-fg:#F4F3F1; --pc-fg-2:#B9B7B2;
  --pc-line:rgba(255,255,255,.16); --pc-line-hi:rgba(255,255,255,.34);
  --pc-accent:#E0714A;
  margin:0;width:100%;
}
.placecard__card{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--bg-deep);border:1px solid var(--pc-line);border-radius:var(--radius-img);
  box-shadow:var(--shadow-ui);
}
.placecard__shot{position:relative;aspect-ratio:3/2;background:#1A1A1A}
.placecard__shot picture{display:block;position:absolute;inset:0}
.placecard__shot img{width:100%;height:100%;object-fit:cover;filter:saturate(.88) contrast(1.03)}
.placecard__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,8,10,.10),transparent 35%,rgba(8,8,10,.58) 100%);
}
.placecard__meta{
  position:absolute;left:12px;right:12px;bottom:12px;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 12px;
  padding:12px 14px 13px;
  background:rgba(8,8,10,.86);
  -webkit-backdrop-filter:blur(12px) saturate(150%);backdrop-filter:blur(12px) saturate(150%);
  border:1px solid var(--pc-line);border-radius:var(--radius-btn);
  font-family:var(--font-mono);letter-spacing:.05em;
}
.pcm-head{
  grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;
  gap:4px 12px;color:var(--pc-fg);font-weight:500;font-size:var(--t-micro);
}
.pcm-soon{color:var(--pc-fg-2);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:400}
.pcm-cell{display:flex;flex-direction:column;gap:3px;min-width:0}
.pcm-cell b{color:var(--pc-fg-2);font-weight:400;font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.pcm-cell span{color:var(--pc-fg);font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}
.placecard__pick{display:flex;flex-wrap:wrap;gap:6px;padding:14px 14px 0}
.pcm-chip{
  font:inherit;font-size:var(--t-small);letter-spacing:.02em;color:var(--pc-fg-2);cursor:pointer;
  min-height:44px;padding:0 14px;background:transparent;
  border:1px solid var(--pc-line);border-radius:999px;
  transition:border-color .18s var(--ease),background .18s var(--ease),color .18s var(--ease);
}
.pcm-chip:hover{border-color:var(--pc-line-hi);color:var(--pc-fg)}
.pcm-chip[aria-pressed="true"]{
  color:var(--pc-fg);border-color:var(--pc-accent);
  box-shadow:0 0 0 1px var(--pc-accent);background:rgba(224,113,74,.14);
}
.pcm-chip:focus-visible{outline:2px solid var(--pc-accent);outline-offset:2px}
.placecard__note{margin:12px 0 0;padding:0 14px 14px;font-size:var(--t-micro);line-height:1.7;color:var(--pc-fg-2)}
.placecard__credit{margin-top:10px;font-size:var(--t-micro);color:var(--fg-3);line-height:1.6}
.placecard__credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.placecard__credit a:hover{color:var(--fg-2)}
.phead__media>.placecard{max-width:640px;margin-left:auto}
@media (max-width:1024px){.phead__media>.placecard{margin-left:0}}
@media (max-width:560px){
  /* 窄屏上四格要折成两行，浮层高出一截；照片同时从 3:2 放到 1:1
     （再方就要把 900×600 的两侧切掉太多），不然浮层几乎盖满整张图。 */
  .placecard__shot{aspect-ratio:1/1}
  .placecard__meta{grid-template-columns:repeat(2,minmax(0,1fr));left:9px;right:9px;bottom:9px;padding:10px 12px 11px;gap:8px 10px}
  .pcm-cell span{font-size:13px}
}

/* ── 9. 区块骨架（DESIGN §4.8）── */
.section{padding-block:var(--section-y)}
.section--tight{padding-block:var(--section-y-tight)}
.section--pure{background:var(--bg-pure)}
.section--line{border-top:1px solid var(--line)}
.section--flush{padding-top:0}
.sec-join{padding-top:0}
/* 页头到导航条的距离全站一档：第一段无论写 .section 还是 .section--tight，
   上边距都取 tight，否则产品页之间看着高低不齐。 */
#main>.section:first-child{padding-top:var(--section-y-tight)}
.section__head{max-width:var(--text);margin:0 0 var(--space-8)}
.section__head--center{margin-left:auto;margin-right:auto;text-align:center}
.section__head .lead{margin-top:var(--space-4)}
.section__title{margin:0}

/* 首页 Hero（DESIGN §8）：全屏深色影像，左 5 栏文字、右 6 栏一层产品界面。
   只叠一层 .frame——两层就成了「截图墙」，照片不再是主角。 */
.hero{
  position:relative;isolation:isolate;overflow:hidden;color:#fff;
  min-height:92vh;display:flex;align-items:center;
  padding-block:calc(var(--nav-h) + var(--space-8)) var(--section-y-tight);
}
.hero__media{position:absolute;inset:0;z-index:-1;background:var(--bg-deep)}
.hero__media img{width:100%;height:100%;object-fit:cover}
/* 影像上的文字必须垫压暗层（DESIGN §10）。hero-home 天光很亮，--overlay 的 .55
   在橙色区不够，固定到 .62，只用纯色不用渐变。 */
.hero__media::after{content:"";position:absolute;inset:0;background:rgba(10,10,10,.62)}
.hero__inner{
  width:100%;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--col-gap);align-items:center;
}
.hero__text{grid-column:span 6}
.hero__shot{grid-column:7/span 6}
/* h1 自带 color:var(--fg)，不覆写的话浅色主题下是近黑字压深色影像。 */
.hero h1,.hero .display{color:#fff}
/* 主标题分行不交给浏览器：中文没有词边界，--t-display 在真实字体下会断成
   「从按下 / 快门， / 到留下作 / 品」四行（所有者 2026-09-16 实机反馈）。源里写死
   两个 <span>，各自 nowrap，字号按「最长一行永远塞得进文字栏」来定。
   文字栏（6/12）= 内容宽/2 − 列距/2，1440–1859px 定格在 640px，≥1860px 走下面
   的 5/7 分栏定格在 628px，≤1024px 时整行。
   实测最长一行（Playwright，Noto Sans/Serif CJK）：
     中文 6 个全角字，1920 下 84px × 6em = 499px / 628px；
     英文 "Everything that happens"，1920 下 52px × 11.5em = 598px / 628px
     （Georgia 只有 9.3em ≈ 490px，Noto Serif CJK 是我们字体栈里最宽的一档；
     英文上限压到 3.25rem 就是为了给最宽的那档留够余量）。
   1024 / 1280 / 1440 / 1536（1920 屏 125% 缩放）/ 1920 / 360 / 390 全部两行。 */
.hero h1 span{display:block;white-space:nowrap}
.hero h1.serif{font-weight:500}
html[lang="zh-CN"] .hero h1{font-size:clamp(2.5rem,5.4vw,5.25rem)}
html:lang(en) .hero h1{font-size:clamp(2rem,3.3vw,3.25rem);font-weight:400;letter-spacing:-.02em}
.hero__sub{margin:var(--space-5) 0 0;font-size:var(--t-lead);line-height:1.6;color:rgba(255,255,255,.84)}
.hero__note{margin:var(--space-6) 0 0;font-size:var(--t-micro);color:rgba(255,255,255,.66)}
.hero .row{margin-top:var(--space-7)}
.hero .btn--primary{background:#F6F5F2;color:#151515;border-color:#F6F5F2}
.hero .btn--primary:hover{background:#fff;border-color:#fff}
.hero .btn--ghost{color:#fff}
.hero .btn--ghost:hover{color:rgba(255,255,255,.7)}
.hero .frame{border-color:rgba(255,255,255,.18);background:#101010}
.hero__cap{margin:10px 0 0;font-size:var(--t-small);color:rgba(255,255,255,.66)}
/* ≥1900 曾经把 Hero 放开到整屏（max-width:none + 自算左内边距）再改 5/7 分栏，
   为的是让界面截图占到视口 46%。代价是 Hero 的右边缘比导航右边缘多出 200 多像素，
   整页出现一道台阶（所有者 2026-09-16 反馈）。改成全站一套栅格（§4：≥1280
   --wide = --max = 1440）之后 Hero 就是普通的 .wrap--max，不再需要特例。
   分栏保持 6/6：1440 的栏宽下 6 栏 = 640px，英文 h1 最长一行 598px 仍进得去；
   5/7 只有 528px，nowrap 的长行会顶到截图上。 */
@media (max-width:1024px){
  .hero{min-height:0;padding-block:calc(var(--nav-h) + var(--space-7)) var(--section-y-tight)}
  .hero__text,.hero__shot{grid-column:1/-1}
  .hero__shot{margin-top:var(--space-7)}
}
@media (max-width:640px){
  /* 手机端同样保 nowrap 两行：360px 下中文 34.2px×6em=205px、英文 25.9px×9.5em=246px，
     都小于 320px 的可用栏宽。 */
  html[lang="zh-CN"] .hero h1{font-size:clamp(2rem,9.5vw,2.75rem)}
  html:lang(en) .hero h1{font-size:clamp(1.6rem,7.2vw,2.1rem)}
}

.feature{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--col-gap);align-items:center}
/* 5 栏 = 1920 下 461px。--t-h2 的 48px 在这个栏宽里一行只排得下 19 个字母，英文
   标题（「The camera in the bag. The console in your hand.」）要三行，DESIGN 要
   ≤2 行。英文在 feature 栏里降一档到 36px，两行能放 50 个字母。
   中文不降：中文降字号只会把断点从词边界推进词中间，词界靠源里的 .nowrap 保。 */
html:lang(en) .feature__text h2{font-size:clamp(1.75rem,1.2rem + 1.4vw,2.25rem)}
.feature__text{grid-column:span 5}
.feature__media{grid-column:span 7}
.feature--flip .feature__text{grid-column:8/span 5;grid-row:1}
.feature--flip .feature__media{grid-column:1/span 7;grid-row:1}
.feature--wide .feature__text{grid-column:span 4}
.feature--wide .feature__media{grid-column:span 8}
.feature+.feature{margin-top:var(--section-y-tight)}
.feature__points{margin:var(--space-5) 0 0;padding:0;list-style:none}
.feature__points li{
  position:relative;padding-left:18px;margin-top:var(--space-3);
  font-size:var(--t-small);color:var(--fg-2);line-height:1.6;
}
.feature__points li::before{
  content:"";position:absolute;left:0;top:.62em;width:6px;height:1px;background:var(--fg-3);
}
/* 竖幅滑块与手机截图比 7 栏窄，放在 feature 里要居中，否则右边空一大块。 */
.feature__media>.compare--portrait,.feature__media>.frame--phone{margin-inline:auto}
@media (max-width:1024px){
  .feature__text,.feature__media,
  .feature--flip .feature__text,.feature--flip .feature__media,
  .feature--wide .feature__text,.feature--wide .feature__media{grid-column:1/-1;grid-row:auto}
  .feature__media{margin-top:var(--space-5)}
  .feature--flip .feature__media{order:-1;margin-top:0;margin-bottom:var(--space-5)}
}

.spec-list{margin:0;display:grid;grid-template-columns:minmax(120px,200px) minmax(0,1fr);gap:0}
.spec-list dt{
  padding:14px 0;font-size:var(--t-micro);color:var(--fg-3);
  border-top:1px solid var(--line);
}
.spec-list dd{
  margin:0;padding:14px 0;font-size:1.0625rem;color:var(--fg);
  font-variant-numeric:tabular-nums;border-top:1px solid var(--line);
}
@media (max-width:640px){
  .spec-list{grid-template-columns:1fr}
  .spec-list dt{padding-bottom:0;border-top:1px solid var(--line)}
  .spec-list dd{padding-top:4px;border-top:0}
}

.cta-final{position:relative;overflow:hidden;isolation:isolate}
.cta-final__media{position:absolute;inset:0;z-index:-1}
.cta-final__media img{width:100%;height:100%;object-fit:cover}
.cta-final__media::after{content:"";position:absolute;inset:0;background:var(--overlay)}
.cta-final__body{
  position:relative;max-width:var(--text);
  padding-block:clamp(96px,10vw,180px);
}
/* 英文终章标题在 640px 里要三到四行：48px 的行里只排得下 26 个字母，而英文那句
   比中文长一倍（「该留的照片…」18 字 vs 78 个字母）。英文放宽到 860 = 两行封顶。
   中文不放宽：中文 640 已经是匀称的两行，再宽会变成一行长条。 */
html:lang(en) .cta-final__body{max-width:860px}
.cta-final__body .btn{margin-top:var(--space-6)}
/* 文字压在影像 + --overlay 上必须是白字：h2 自带 color:var(--fg)，不覆写的话
   浅色主题下是近黑字压深色图（DESIGN §10）。/_styleguide/ §10 走的也是这条。 */
.cta-final__body,.cta-final__body h2,.cta-final__body .h2,.cta-final__body p{color:#fff}
.cta-final__body .eyebrow{color:rgba(255,255,255,.72)}
.cta-final__body .btn--primary{background:#F6F5F2;color:#151515;border-color:#F6F5F2}
.cta-final__body .btn--primary:hover{background:#fff;border-color:#fff}

.editorial{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.editorial__item{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--col-gap);
  align-items:center;padding-block:var(--space-7);border-bottom:1px solid var(--line)}
.editorial__num{font-family:var(--font-mono);font-size:var(--t-micro);color:var(--fg-3);grid-column:span 1}
.editorial__text{grid-column:span 5}
.editorial__media{grid-column:span 6}
.editorial__meta{margin:var(--space-4) 0 0;display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}
.editorial__item .small{margin-top:var(--space-3)}
@media (max-width:1024px){
  .editorial__num{grid-column:1/-1}
  .editorial__text,.editorial__media{grid-column:1/-1}
  .editorial__media{margin-top:var(--space-4)}
}

.stepflow{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--col-gap);margin:0;padding:0;list-style:none;counter-reset:step}
.stepflow>li{counter-increment:step;border-top:1px solid var(--line);padding-top:var(--space-4)}
.stepflow>li::before{
  content:counter(step,decimal-leading-zero);display:block;margin-bottom:var(--space-2);
  font-family:var(--font-mono);font-size:var(--t-micro);color:var(--fg-3);
}
.stepflow h3{font-size:1.0625rem;margin-bottom:6px}
.stepflow p{font-size:var(--t-small);color:var(--fg-2)}
.stepflow--plain>li p{margin:0;font-size:1.0625rem;line-height:1.6;color:var(--fg)}

/* 没有真实截图的产品：三条能力用纯文字三栏，不放示意图冒充界面（DESIGN §6）。 */
.a2-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--col-gap);margin:0;padding:0;list-style:none}
.a2-trio>li{border-top:1px solid var(--line);padding-top:var(--space-4)}
@media (max-width:1024px){.a2-trio{grid-template-columns:1fr;gap:var(--space-7)}}

.timeline{margin:0;padding:0;list-style:none}
.timeline>li{position:relative;padding:0 0 var(--space-7) var(--space-6);border-left:1px solid var(--line)}
.timeline>li::before{content:"";position:absolute;left:-3.5px;top:7px;width:6px;height:6px;border-radius:50%;background:var(--fg-3)}
.timeline>li:last-child{padding-bottom:0;border-left-color:transparent}
.tl-date{margin:5px 0 0;font-size:var(--t-small);color:var(--fg-2);line-height:1.6}
.tl-date time{font-variant-numeric:tabular-nums}

.log{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.log>li{
  display:grid;grid-template-columns:110px minmax(0,1fr);
  gap:var(--space-5);padding:var(--space-5) 0;border-bottom:1px solid var(--line);
}
.log__date{
  font-family:var(--font-mono);font-size:var(--t-small);
  font-variant-numeric:tabular-nums;color:var(--fg-3);
}
.log__text{margin:var(--space-3) 0 0;font-size:var(--t-body);line-height:1.7;color:var(--fg-2)}
@media (max-width:640px){
  .log>li{grid-template-columns:minmax(0,1fr);gap:var(--space-2)}
}

/* 品牌宣言必须离 h1 有一整段留白，否则「关于品牌 / 每一束光，/ 都不止一个答案。」
   连成一个三四行的大标题块——页面里写的 .mt-8 被这条同权重、写在后面的 margin:0
   吃掉了（2026-09-16 截图确认）。这里直接把间距写死，不再依赖工具类。
   英文那条 24ch 会把 answer. 甩成孤行尾，单独放宽。 */
.aboutclaim{margin:var(--space-8) 0 0;max-width:24ch;font-size:var(--t-h2);line-height:1.28;color:var(--fg)}
html:lang(en) .aboutclaim{max-width:27ch}
/* 品牌主张是 h1 之后的第二声部，不能比 h1 还重：中文那条走无衬线后要退回 500
   （600 在 h1 的 500 旁边直接抢戏，2026-09-16 截图确认）。 */
html[lang="zh-CN"] .aboutclaim.serif{font-weight:500}

.trustbar{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trustbar ul{
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2) var(--space-7);
  margin:0;padding:18px 0;list-style:none;font-size:var(--t-small);color:var(--fg-2);
}

.filters{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0 0 var(--space-6);padding:0;list-style:none}
.filters button,.chip,.catchip{
  display:inline-flex;align-items:center;gap:6px;
  min-height:36px;padding:0 14px;border:1px solid var(--line);border-radius:999px;
  background:none;color:var(--fg-2);font-size:var(--t-small);cursor:pointer;
  transition:color .15s var(--ease),border-color .15s var(--ease);
}
.filters button:hover,.chip:hover,.catchip:hover{color:var(--fg);border-color:var(--line-strong)}
.filters button[aria-pressed="true"]{color:var(--bg);background:var(--fg);border-color:var(--fg)}
@media (pointer:coarse){.filters button,.chip,.catchip{min-height:44px}}

.plan{display:flex;flex-direction:column;padding:28px;border:1px solid var(--line);border-radius:var(--radius-img)}
.plan--rec{border-color:var(--line-strong)}
.plan__tag{display:block;margin:0 0 var(--space-3);font-size:var(--t-micro);color:var(--accent)}
.plan__price{margin:var(--space-4) 0 0;font-size:var(--t-h2);line-height:1.1;font-variant-numeric:tabular-nums}
/* 多档位价格：.plan__price 只放一个代表数字，其余档位进 .plan__tiers 小字列表。
   整串塞进 --t-h2 会折成三四行大字，读起来像一段话而不是价格。 */
.plan__price--mid{font-size:var(--t-h3);line-height:1.3}
.plan__price--long{font-size:1.0625rem;line-height:1.6;letter-spacing:0}
.plan__tiers{
  margin:var(--space-3) 0 0;padding:0;list-style:none;
  font-size:var(--t-small);line-height:1.7;color:var(--fg-2);
  font-variant-numeric:tabular-nums;
}
.plan__note{margin:var(--space-3) 0 0;font-size:var(--t-small);color:var(--fg-2)}
.plan__list{margin:var(--space-5) 0 var(--space-6);padding:0;list-style:none;font-size:var(--t-small);color:var(--fg-2)}
.plan__list li{padding:6px 0;border-top:1px solid var(--line)}
.plan .btn{margin-top:auto}
.span-4>.plan,.span-6>.plan{height:100%}

/* === phead v2 === */
/* 产品 / 场景页页头：左 5 栏文字、右 7 栏影像，1920 下图占视口 ≥40%。
   4/5 竖图用既有的 .figure--portrait（§8），这里不另起比例类。 */
.phead{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,4vw,72px);align-items:center;padding-top:var(--section-y-tight)}
.phead__text{max-width:36rem}
.phead__text .lead{margin-top:var(--space-5)}
.phead__text .row{margin-top:var(--space-7)}
.phead__media{min-width:0}
.phead__media .figure,.phead__media .frame{width:100%}
/* 页头影像统一高度：4/5 竖图在 1920 的影像栏里会长到 1100px 以上，h1 被顶到折叠
   线以下。摄影图一律裁到同一档高度（object-fit:cover——裁，绝不拉伸）；界面截图
   .frame 保持原比例不裁，只压一个高度上限，真超了就 contain 在容器底色上。
   只命中 .phead__media 的直接子元素：页头里的封面条（ul>li>figure）不受影响。 */
.phead__media>.figure{height:clamp(440px,60vh,720px)}
.phead__media>.figure,.phead__media>.figure .figure__media{aspect-ratio:auto}
.phead__media>.figure .figure__media{height:100%}
.phead__media>.figure picture{display:block;width:100%;height:100%}
.phead__media>.figure img{display:block;width:100%;height:100%;object-fit:cover}
.phead__media>.frame{aspect-ratio:auto;max-height:720px}
.phead__media>.frame>img,.phead__media>.frame>picture>img{width:100%;height:auto;max-height:720px;object-fit:contain}
@media (max-width:1024px){.phead__media>.figure{height:clamp(320px,52vw,520px)}}
/* 竖构图例外：上面那条统一高度把 4/5 的人像压成 ~1.36:1 的横窗，object-fit:cover
   会从中间裁——`sol-portrait` 的人直接被切掉脑袋，`paida-pose` 切在大腿上。竖图
   改成「保 4/5、按高度反推宽度」：高度还是同一档，宽度自己收窄（600px 高 → 480px
   宽），在影像栏里居中，整张放完，一刀不裁。 */
.phead__media>.figure--portrait{aspect-ratio:4/5;width:auto;max-width:100%;margin-inline:auto}
.phead__media>.figure--portrait .figure__media{aspect-ratio:4/5}
/* ≤1024 页头改成单栏，影像栏本来就是整幅宽度，这时再按高度反推宽度会把图缩成
   256px 的一小张、两边大片空白。窄屏回到「宽度占满、高度由 4/5 决定」。 */
@media (max-width:1024px){
  .phead__media>.figure--portrait{width:100%;height:auto}
}
/* 页头右侧放一排封面时始终保持三栏：.a2-covers 在 ≤640 会掉成两栏，三张就排成
   2+1，手机上占掉近一屏高度，标题被挤到折叠线以下。
   页头里的多图一律「按宽度定尺寸」：三栏各 1fr，高度由 4/5 反推，绝不继承上面
   那条按高度定的统一档（3 × 576px 宽 = 1728px，一定顶出影像栏）。gap 收到 16px
   ——封面条是一组同类缩略图，不是三个并列区块，--col-gap 的 32px 太散。 */
.phead__media .a2-covers{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.phead__media .a2-covers>li{min-width:0}
.phead__media .a2-covers .figure{height:auto;width:100%;max-width:100%;aspect-ratio:auto;margin-inline:0}
.phead__media .a2-covers .figure__media{height:auto;aspect-ratio:4/5}
@media (max-width:1024px){.phead{grid-template-columns:1fr;gap:var(--space-7)}.phead__media{order:-1}}
/* ≥1900 曾经用 .wrap:has(>.phead){max-width:none} 把页头放开到整屏换取更大的影像栏。
   它按 --wide 算左内边距、按视口算右边缘，于是页头的左右两条边同时偏离导航：
   2000 下 h1 左边 424 对导航 344、影像右边 1936 对导航 1656，封面条看着「溢出到
   导航外面」（所有者 2026-09-16 反馈）。现在全站一套栅格（§4），页头就用普通
   .wrap：2000 下影像栏 7/12 ≈ 723px，四条竖线全部对齐。 */
.claims{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px);padding-top:var(--space-7);border-top:1px solid var(--line)}
.claims h3{font-size:var(--t-h3);margin:0 0 var(--space-3)}
.claims p{color:var(--fg-2);margin:0;max-width:22em}
@media (max-width:768px){.claims{grid-template-columns:1fr;gap:var(--space-6)}}
/* === /phead v2 === */

.searchbox{position:relative;max-width:var(--text)}
.searchbox .input{padding-left:42px}
.searchbox svg{position:absolute;left:14px;top:15px;width:18px;height:18px;color:var(--fg-3);pointer-events:none}
.searchbox--labelled svg{top:auto;bottom:15px}
.helpsearch{max-width:var(--text)}
/* 原生清除按钮在 Chromium 下是蓝色 ×：去色，但保留这个功能。 */
.helpsearch .input::-webkit-search-cancel-button{filter:grayscale(1) opacity(.55)}
/* 加载、失败与无结果分别由实际请求状态驱动。 */
.hsearching{display:flex;align-items:center;gap:10px;margin:var(--space-6) 0 0;font-size:var(--t-small);color:var(--fg-2)}
.hsearching[hidden]{display:none}
.hsearching .spinner{width:16px;height:16px;border-width:2px}
.results{margin:var(--space-6) 0 0;padding:0;list-style:none}
.results li{border-top:1px solid var(--line)}
.results a{display:block;padding:16px 0}
.results b{display:block;font-size:1.0625rem;font-weight:500}
.results span{display:block;margin-top:4px;font-size:var(--t-small);color:var(--fg-2)}

/* ── 10. 状态组件与杂项（DESIGN §8 / §10）──
   修饰类 --empty / --loading / --error / --no-results / --success（统一用连字符写法）：只有 error
   与 success 改图标颜色，状态靠图标与文本区分，不靠颜色。 */
.state{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:var(--space-3);padding:var(--space-8) var(--space-5);
  border:1px solid var(--line);border-radius:var(--radius-img);color:var(--fg-2);
}
/* .state 是 flex，UA 的 [hidden]{display:none} 压不过它，得显式关掉。 */
.state[hidden]{display:none}
.state__icon{width:28px;height:28px;color:var(--fg-3)}
.state--error .state__icon{color:var(--danger)}
.state--success .state__icon{color:var(--ok)}
.state__title{font-size:var(--t-h3);color:var(--fg)}
.state__text{margin:0;font-size:var(--t-small);max-width:42ch}
.state .btn{margin-top:var(--space-3)}
.spinner{
  width:26px;height:26px;border:2px solid var(--line);border-top-color:var(--fg-2);
  border-radius:50%;animation:spin 900ms linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.statepage{
  display:flex;flex-direction:column;justify-content:center;
  min-height:calc(100vh - var(--nav-h));padding-block:var(--section-y);
}
.statepage__code{
  font-family:var(--font-mono);font-size:var(--t-display);line-height:1;
  letter-spacing:-.03em;color:var(--fg-3);
}
.statepage h1{margin:var(--space-5) 0 0}
.statepage .lead{margin-top:var(--space-4)}
.statepage .row{margin-top:var(--space-7)}

.tag{
  display:inline-flex;align-items:center;height:24px;padding:0 8px;
  border-radius:var(--radius-tag);background:var(--bg-raised);
  font-size:var(--t-micro);color:var(--fg-2);
}
/* 占位符（DESIGN §0：没有真实数据的地方写明确占位，不编一个）。全站只此一份。 */
.pending{
  display:inline-block;padding:1px 8px;
  border:1px dashed var(--fg-3);border-radius:var(--radius-tag);
  font-family:var(--font-mono);font-size:.875em;color:var(--fg-2);
}

/* 手机端底部常驻主按钮，只 ≤640px。滚过 [data-cta-after] 后由 site.js 加
   .show 滑入，页脚进视口时收起（DESIGN §9）。 */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;
  align-items:center;justify-content:center;gap:8px;
  min-height:56px;padding:0 var(--gutter) env(safe-area-inset-bottom);
  background:var(--fg);color:var(--bg);font-size:1rem;font-weight:500;
  visibility:hidden;transform:translateY(110%);transition:transform .3s var(--ease);
}
.sticky-cta.show.show{visibility:visible;transform:none}
@media (max-width:640px){
  .sticky-cta{display:flex}
  body:has(.sticky-cta.show){padding-bottom:calc(56px + env(safe-area-inset-bottom))}
}

/* ── 11. 页脚（DESIGN §4.7）── */
.footer{border-top:1px solid var(--line);padding:var(--section-y-tight) 0 var(--space-8);margin-top:var(--section-y-tight)}
.footer__manifesto{
  font-family:var(--font-serif);font-size:var(--t-h3);line-height:1.4;
  color:var(--fg);max-width:22ch;margin:0 0 var(--space-8);
}
/* 22ch 是按英文字数定的，中文字体里 ch 只有半个字宽，13 字的宣言会掉出一个
   「案。」的孤字尾行。中文单独按字数给宽。 */
html[lang="zh-CN"] .footer__manifesto{max-width:14em}
.footer__grid{display:grid;gap:var(--space-7) var(--col-gap);grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.footer__col h2{margin:0 0 var(--space-4);font-size:var(--t-micro);font-weight:500;color:var(--fg-3);letter-spacing:.08em}
.footer__col ul{margin:0;padding:0;list-style:none}
.footer__col a{display:inline-block;padding:5px 0;font-size:var(--t-small);color:var(--fg-2);transition:color .15s var(--ease)}
.footer__col a:hover{color:var(--fg)}
@media (pointer:coarse){.footer__col a{display:block;padding:10px 0}}
.footer__bottom{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-6);
  margin-top:var(--space-8);padding-top:var(--space-5);border-top:1px solid var(--line);
  font-size:var(--t-micro);color:var(--fg-3);
}
.footer__bottom a{color:var(--fg-3)}
.footer__bottom a:hover{color:var(--fg)}
.footer__bottom .themebtn{margin-left:auto}

/* ── 12. 长文排版 ──
   下面全部是 build-guides.py（66 篇教程 + 2 个索引）与 tools/legal/build.py
   （/terms/）的产物依赖的类。改名必须同步改生成器，否则线上直接掉样式。 */
.article{padding:clamp(34px,6vw,64px) 0 clamp(46px,8vw,88px)}
.article>.wrap{max-width:calc(var(--prose) + var(--gutter) * 2)}
.article h1{font-size:clamp(1.75rem,1.2rem + 2.2vw,2.6rem);line-height:1.22;letter-spacing:-.01em}
.meta{margin:var(--space-4) 0 0;font-size:var(--t-small);color:var(--fg-3)}
.meta time{font-variant-numeric:tabular-nums}
.crumbs{margin:0 0 var(--space-5);font-size:var(--t-micro);color:var(--fg-3);line-height:1.6;overflow-wrap:anywhere}
.crumbs a{color:var(--fg-2)}
.crumbs a:hover{color:var(--fg);text-decoration:underline}
.crumbs .sep{margin:0 7px;color:var(--fg-3)}
/* 触屏：面包屑一行只有 19px 高、页脚底栏链接 22px，DESIGN §9 要 ≥44。用负外边距换
   内边距把热区撑起来，排版一像素不动；桌面（pointer:fine）完全不受影响。 */
@media (pointer:coarse){
  .crumbs a{display:inline-block;padding:13px 4px;margin:-13px -4px}
  .footer__bottom a{display:inline-block;padding:11px 4px;margin:-11px -4px}
  .brand{min-height:44px}
}
.catlabel{margin:0 0 var(--space-2);font-size:var(--t-micro);letter-spacing:.1em;font-family:var(--font-mono)}
.catlabel a{color:var(--accent)}
.catlabel a:hover{text-decoration:underline;text-underline-offset:3px}
.lede{margin:var(--space-5) 0 0;font-size:var(--t-lead);line-height:1.6;color:var(--fg-2)}

.prose{margin:var(--space-7) 0 0;font-size:var(--t-body)}
.prose>*+*{margin-top:1.15em}
.prose p{color:var(--fg-2)}
.prose h2{
  margin:2.2em 0 .5em;padding-top:1em;font-size:clamp(1.25rem,1.05rem + .7vw,1.55rem);
  line-height:1.35;letter-spacing:0;border-top:1px solid var(--line);
}
.prose h3{margin:1.8em 0 .4em;font-size:1.0625rem;font-weight:600;line-height:1.5}
.prose h2+*{margin-top:.6em}
.prose h3+*{margin-top:.45em}
.prose ul,.prose ol{padding-left:1.35em;color:var(--fg-2)}
.prose li+li{margin-top:.5em}
.prose li::marker{color:var(--fg-3)}
.prose strong{color:var(--fg);font-weight:600}
.prose code{
  font-family:var(--font-mono);font-size:.88em;color:var(--fg);
  background:var(--bg-raised);border-radius:5px;padding:1px 6px;
}
/* <pre><code> 里是整行命令，中间不能断行（断了复制出去就是错的），所以让这一块
   自己横滚，绝不把整页顶宽：/guide/exif-gps-privacy-check/ 那条 exiftool 命令在
   390 下把文档撑到 604px，整页能左右拖（2026-09-16 溢出审计）。 */
.prose pre{
  margin:1.4em 0;padding:12px 14px;max-width:100%;overflow-x:auto;
  background:var(--bg-raised);border:1px solid var(--line);border-radius:var(--radius-input);
}
.prose pre code{display:block;padding:0;background:none;white-space:pre;line-height:1.7}
.prose blockquote{margin:1.5em 0;padding:2px 0 2px 18px;border-left:2px solid var(--line-strong);color:var(--fg-2)}
.prose figure{margin:2em 0}
.prose figure img{width:100%;border-radius:var(--radius-img);border:1px solid var(--line)}
.prose figcaption{margin-top:10px;font-size:var(--t-small);color:var(--fg-3);line-height:1.6}
.prose figure.ba{margin:1.4em 0}
.prose figure.ba+figure.ba{margin-top:1em}
.prose ol.steps{list-style:none;padding:0}
.prose ol.steps>li+li{margin-top:1.6em}
.prose ol.steps>li>b{display:block;margin-bottom:.4em;color:var(--fg)}
.tip{
  background:var(--bg-raised);border:1px solid var(--line);border-left:2px solid var(--accent);
  border-radius:var(--radius-input);padding:16px 18px;font-size:.9375rem;color:var(--fg-2);
}
.tip b{color:var(--fg)}
/* 手写页（账号页）里这块提示在 .wrap 里会拉满 1152px，比它上面 720px 的 lead
   宽出一截，读起来是两个不同的栏宽叠着。教程 / 法务页在 .article 里另有栏宽，排除。 */
#main:not(.article) .tip{max-width:720px}

/* 本页目录。权重必须压过 §3 的正文链接规则，否则会被接管成一排带下划线的链接。 */
.toc{border:1px solid var(--line);border-radius:var(--radius-img);padding:16px 20px;background:var(--bg-pure)}
.toc h2{margin:0 0 8px;padding:0;border:0;font-size:var(--t-micro);letter-spacing:.1em;color:var(--fg-3);font-weight:500}
/* 条目文字自带编号（中文「一、」「二、」，英文「1.」「2.」），再加 ol 的
   decimal 记号就成了「1. 一、…」「1. 1. …」的双重编号。记号去掉，编号只留正文那一份。 */
.toc ol{margin:0;padding-left:0;list-style:none;font-size:var(--t-small)}
.toc li+li{margin-top:4px}
.prose .toc a,.toc a{color:var(--fg-2);text-decoration:none}
.prose .toc a:hover,.toc a:hover{color:var(--fg);text-decoration:underline;text-decoration-color:var(--line-strong)}

.side{display:none}
.sidecta,.ctacard,.trycard{
  border:1px solid var(--line);border-radius:var(--radius-img);padding:18px 20px;background:var(--bg-pure);
}
.sidecta b,.ctacard b,.trycard b{display:block;margin:0 0 6px;font-size:1rem;font-weight:500;color:var(--fg)}
.sidecta p,.ctacard p,.trycard p{margin:0 0 var(--space-4);font-size:var(--t-small);color:var(--fg-2);line-height:1.6}
.sidecta .btn,.ctacard .btn,.trycard .btn{height:44px}
/* 侧栏只有 240px，减去 padding 给按钮剩 198px；.btn 自带 nowrap 与 22px 的左右
   内边距，英文那句「Open Mark — try one for free」正好溢出两像素被切掉。这里允许
   换行并收窄内边距，高度随行数长，不再裁字。 */
.sidecta .btn{
  width:100%;white-space:normal;padding-inline:12px;
  height:auto;min-height:44px;padding-block:10px;line-height:1.3;
}
.prose .ctacard,.prose .trycard{margin:2.2em 0}
.prose .handson{
  margin:1.3em 0 0;padding:2px 0 2px 14px;border-left:2px solid var(--accent);
  font-size:.9375rem;line-height:1.7;color:var(--fg-2);
}
.prose .herocta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin:1.6em 0 0}
.prose .herocta .note{font-size:var(--t-small);color:var(--fg-3)}
.prose ul.nextsteps{list-style:none;padding:0;margin:1.2em 0 0;display:grid;gap:10px}
.prose ul.nextsteps li{margin:0}
.prose ul.nextsteps a{
  display:block;padding:13px 16px;border:1px solid var(--line);border-radius:var(--radius-input);
  color:var(--fg-2);text-decoration:none;
}
.prose ul.nextsteps a:hover{border-color:var(--line-strong);color:var(--fg)}
.prose ul.nextsteps li:first-child a{border-color:var(--line-strong);color:var(--fg)}

@media (min-width:1200px){
  .article>.wrap:has(.side){
    max-width:calc(var(--prose) + 240px + 56px + var(--gutter) * 2);
    display:grid;grid-template-columns:minmax(0,var(--prose)) 240px;column-gap:56px;
  }
  .article>.wrap>*{grid-column:1}
  .article>.wrap>.side{
    display:block;grid-column:2;grid-row:1/span 40;align-self:start;
    position:sticky;top:calc(var(--nav-h) + 16px);
  }
  .side .toc{max-height:calc(100vh - var(--nav-h) - 240px);overflow:auto}
  .side .sidecta{margin-top:16px}
  .prose .toc,.prose .ctacard{display:none}
}
/* ≥1500px：在正文左边补一列等宽空白，让正文栏真正落在屏幕中轴上，目录挂到右边距里。
   不补这一列时「正文 + 目录」整体居中，正文自己就偏左 148px——同样走 --prose 的
   法务页（没有目录、正文居中）在 1920 下左边缘是 608，教程页却是 460，两个长文模板
   对不齐。补完之后两边都是 608。窄一些的屏幕塞不下这一列，维持原来的两栏。 */
@media (min-width:1500px){
  .article>.wrap:has(.side){
    max-width:calc(var(--prose) + (240px + 56px) * 2 + var(--gutter) * 2);
    grid-template-columns:240px minmax(0,var(--prose)) 240px;
  }
  .article>.wrap>*{grid-column:2}
  .article>.wrap>.side{grid-column:3}
}

.tablewrap{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--radius-img)}
.tablewrap--wide table{min-width:900px}
/* 手机下载页直接展示入口，并在卡片中保留各项版本资料。 */
@media (max-width:640px){
  .download-table{border:0;overflow:visible}
  .download-table table{display:block;min-width:0}
  .download-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .download-table tbody{display:grid;gap:16px}
  .download-table tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:16px;border:1px solid var(--line);border-radius:var(--radius-img);background:var(--bg-raised)}
  .download-table th[scope="row"]{grid-column:1/-1;padding:0 0 12px;border:0;font-size:1.0625rem;white-space:normal}
  .download-table td{order:2;padding:10px 0 0;border:0;overflow-wrap:anywhere}
  .download-table td::before{content:attr(data-label);display:block;margin-bottom:4px;color:var(--fg-3);font-size:var(--t-micro)}
  .download-table td:last-child{order:1;grid-column:1/-1;padding:0 0 12px;border-bottom:1px solid var(--line)}
  .download-table td:last-child::before{display:none}
  .download-table::after{display:none!important}
}

/* 窄屏才提示「表格可以左右滑」——宽屏不出现 */
@media (max-width:640px){
  .tablewrap::after{
    content:"左右滑动查看完整表格";
    display:block;padding:8px 16px 10px;font-size:13px;color:var(--fg-3);text-align:right;
  }
  html:lang(en) .tablewrap::after{content:"Swipe sideways to see the full table"}
}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:var(--t-small);line-height:1.6}
th,td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line)}
th{color:var(--fg);font-weight:500;background:var(--bg-raised);white-space:nowrap;font-size:var(--t-micro)}
td{color:var(--fg-2);font-variant-numeric:tabular-nums}
tbody td:first-child{color:var(--fg)}
tr:last-child td{border-bottom:0}

.faq{margin:var(--space-6) 0 0}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary,.authpane>summary{
  display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none;
  padding:18px 0;font-size:1.0625rem;font-weight:500;color:var(--fg);
}
.authpane>summary{padding:16px 0}
.faq summary::-webkit-details-marker,.authpane>summary::-webkit-details-marker{display:none}
.faq summary::after,.authpane>summary::after{
  content:"";margin-left:auto;width:8px;height:8px;flex:0 0 auto;
  border-right:1.5px solid var(--fg-3);border-bottom:1.5px solid var(--fg-3);
  transform:rotate(45deg) translateY(-2px);transition:transform .22s var(--ease);
}
.faq details[open] summary::after,.authpane[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.faq .a{padding:0 0 20px;color:var(--fg-2);font-size:.9375rem}
.faq .a>*+*{margin-top:.8em}
@media (min-width:900px){
  #faq .faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--space-7);align-items:start}
#faq .faq details:nth-child(2){border-top:1px solid var(--line)}
}

.catnav{
  position:sticky;top:var(--nav-h);z-index:10;margin:0 0 var(--space-7);padding:10px 0;
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.catnav-row{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.catnav-row::-webkit-scrollbar{display:none}
/* 桌面上横滚条既没有滚动条也没有手势提示：英文六个类别一共要 1095px，教程索引栏
   宽只有 1040，最后一枚 Sharing & safety 被直接切掉（2026-09-16 截图确认）。
   ≥900px 改成换行，窄屏仍然横滚。 */
@media (min-width:900px){.catnav-row{flex-wrap:wrap;overflow-x:visible;row-gap:8px}}
.catchip{flex:0 0 auto;gap:7px;white-space:nowrap}
.catchip span{font-family:var(--font-mono);font-size:var(--t-micro);color:var(--fg-3)}
/* 这里只留「除去 html 那份 scroll-padding-top 之外」的额外留白：两者相加
   仍是 --nav-h + 80，和改动前的观感一致。 */
.gsec{margin:0 0 var(--space-8);padding:0;scroll-margin-top:48px}
.gsec:last-child{margin-bottom:0}
.gh2{margin:0 0 4px;font-size:clamp(1.2rem,1rem + .6vw,1.45rem)}
.gintro{margin:0 0 var(--space-4);font-size:var(--t-small);color:var(--fg-2);line-height:1.7}
.ggroup{margin:0 0 var(--space-5)}
.gh{margin:0 0 10px;font-size:var(--t-micro);letter-spacing:.1em;color:var(--fg-3);font-weight:500}

/* 教程索引不是长文，是一页目录：栏宽回到全站标准的 .wrap（--wide），页头的 h1
   才和 /help/、/pricing/ 等页在同一条竖线上（1920 下 x=384）。原来的 1040px
   自成一档，h1 比别处右移 56px，从别的页面跳过来一眼就能看出错位（2026-09-16）。 */
.article.guideindex>.wrap{max-width:var(--wide)}
.article.guideindex h1{font-size:var(--t-h1);line-height:1.05;letter-spacing:-.02em;max-width:13em}
.gfeat{display:grid;gap:var(--space-5);margin:var(--space-7) 0 var(--space-9)}
.gfeat__media{display:block;overflow:hidden;aspect-ratio:3/2;background:var(--bg-raised);border-radius:var(--radius-img)}
.gfeat__media img{width:100%;height:100%;object-fit:cover}
.gfeat__title{margin:0;font-family:var(--font-serif);font-weight:400;letter-spacing:-.01em;font-size:clamp(1.55rem,1.1rem + 1.7vw,2.4rem);line-height:1.18;color:var(--fg)}
.gfeat__blurb{margin:12px 0 0;color:var(--fg-2);max-width:48ch}
.gfeat__rt{display:block;margin-top:14px;font-variant-numeric:tabular-nums;font-size:var(--t-micro);color:var(--fg-3)}
.gfeat:hover .gfeat__title{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:1px;text-underline-offset:5px}
@media (min-width:900px){
  .gfeat{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--col-gap) clamp(28px,4vw,56px);align-items:center}
}
.glist{margin:0;padding:0;list-style:none}
.glist>li{border-top:1px solid var(--line)}
.glist a{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--space-5);padding:13px 2px}
.glist b{grid-column:1;grid-row:1;font-size:1rem;font-weight:500;color:var(--fg);line-height:1.45}
.glist .gl-sum{grid-column:1;grid-row:2;margin:3px 0 0;font-size:var(--t-small);color:var(--fg-2);line-height:1.55}
.glist .rt{grid-column:2;grid-row:1/span 2;align-self:center;font-style:normal;font-variant-numeric:tabular-nums;font-size:var(--t-micro);color:var(--fg-3);white-space:nowrap}
.glist a:hover b{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}
@media (min-width:860px){
  .glist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,4vw,56px)}
}

.linkgrid{display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(270px,1fr));margin:0;padding:0;list-style:none}
.linkcard{
  display:block;height:100%;padding:18px 20px;border:1px solid var(--line);
  border-radius:var(--radius-img);transition:border-color .2s var(--ease);
}
.linkcard:hover{border-color:color-mix(in srgb,var(--line-strong) 30%,transparent)}
.linkcard h3,.linkcard h4{margin:0 0 5px;font-size:1rem;font-weight:500;color:var(--fg);line-height:1.4}
.linkcard p{margin:0;font-size:var(--t-small);color:var(--fg-2);line-height:1.6}
.linkcard .rt{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:10px;
  font-size:var(--t-micro);color:var(--fg-3);font-family:var(--font-mono);
}
.linkcard .rt time{font-variant-numeric:tabular-nums}
.linkcard.lead{border-left:2px solid var(--accent)}

.related{margin-top:clamp(40px,6vw,64px);padding-top:var(--space-6);border-top:1px solid var(--line)}
.related h2{margin:0 0 var(--space-4);font-size:1.125rem;letter-spacing:0}
.related .linkgrid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.related .linkcard{padding:15px 16px}
.related .linkcard h3{font-size:.9375rem}
.related .linkcard p{font-size:var(--t-micro)}
.backlink{margin:var(--space-5) 0 0;font-size:.9375rem;color:var(--fg-2);line-height:1.7}

.sub{margin:0 0 var(--space-6);color:var(--fg-2);max-width:var(--text)}
.kicker{margin:0 0 var(--space-3);font-size:var(--t-micro);letter-spacing:.1em;color:var(--fg-3)}
.catgrid{display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(280px,1fr));margin:0;padding:0;list-style:none}
.catcard{border:1px solid var(--line);border-radius:var(--radius-img);padding:18px 20px}
.cathead{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
/* 触屏：帮助中心分类卡的标题链接只有 24px 高。 */
@media (pointer:coarse){.cathead{padding:10px 0;margin:-10px 0}}
.cathead h3{margin:0;font-size:1rem;font-weight:500}
.cathead .ct{flex:0 0 auto;font-family:var(--font-mono);font-size:var(--t-micro);color:var(--fg-3)}
.catcard>p{margin:7px 0 0;font-size:var(--t-small);color:var(--fg-2);line-height:1.6}
.catlinks{margin:12px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.catlinks a{display:block;padding:9px 0;font-size:var(--t-small);color:var(--fg-2)}
.catlinks a:hover{color:var(--fg)}
.catlinks li+li a{border-top:1px solid var(--line)}
.allguides{margin:var(--space-5) 0 0;font-size:.9375rem}

.legalpage>.wrap{display:block}
.legalpage .meta{display:flex;flex-wrap:wrap;gap:6px 16px}
.legal-toc{margin:var(--space-6) 0 0;padding:18px 22px;border:1px solid var(--line);border-radius:var(--radius-img)}
.legal-toc ol{margin:0;padding:0 0 0 1.4em;columns:2;column-gap:28px;font-size:var(--t-small);line-height:1.9;color:var(--fg-2)}
.legal-toc li{break-inside:avoid;padding-left:4px}
.legal-toc a{color:var(--fg-2)}
.legal-toc a:hover{color:var(--fg);text-decoration:underline}
.legal-body{margin-top:var(--space-2)}
/* 锚点偏移由 html 的 scroll-padding-top 统一兜住，这里不用再补。 */
.legal-body table{min-width:0}
@media (max-width:640px){.legal-toc ol{columns:1}}

.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:var(--space-3);margin:0;padding:0;list-style:none}
.swatch{border:1px solid var(--line);border-radius:var(--radius-input);overflow:hidden}
.swatch i{display:block;height:54px}
.swatch b{display:block;padding:8px 10px 0;font-family:var(--font-mono);font-size:var(--t-micro);font-weight:400}
.swatch span{display:block;padding:2px 10px 8px;font-size:var(--t-micro);color:var(--fg-3)}

/* ── 13. 动效与打印（DESIGN §5）── */
.reveal{transition:opacity .5s var(--ease),transform .5s var(--ease)}
.reveal.reveal--pending{opacity:0;transform:translateY(12px)}
.reveal.in{opacity:1;transform:none}
.reveal:focus-within{opacity:1;transform:none}
[data-parallax]{will-change:transform}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .reveal.reveal--pending{opacity:1;transform:none}
  [data-parallax]{transform:none!important}
}
@media print{
  .reveal.reveal--pending{opacity:1;transform:none}
  .nav,.sticky-cta,.nav__menu,.menubtn,.themebtn,.catnav,.side{display:none!important}
  body{padding-top:0;background:#fff;color:#000}
}