/* ==========================================================================
   LineGrab.md · product page styles
   设计令牌与 app 内部保持一致（src/index.html 的 :root），站点才像同一个产品。
   零依赖、零构建、可 file:// 直接打开。
   ========================================================================== */

:root{
  --bg:#f7f9fa; --bg-soft:#eff3f5; --bg-elev:#ffffff;
  --fg:#172026; --fg-soft:#5b6b76; --fg-faint:#8a98a3;
  --line:#dce5ea; --line-soft:#e8eef1;
  --accent:#0b7c6d; --accent-fg:#ffffff; --accent-soft:rgba(11,124,109,.09);
  --brand:#14c8b0;
  --amber:#f6b73c; --amber-fg:#b45309; --amber-soft:rgba(246,183,60,.32);
  --ok:#0f8f5f; --ok-soft:rgba(15,143,95,.10);
  --warn:#b45309; --warn-soft:rgba(180,83,9,.10);
  --bad:#c2342c; --bad-soft:rgba(194,52,44,.09);
  --code-bg:#f1f4f6;
  --shadow-sm:0 1px 2px rgba(23,32,38,.06);
  --shadow-md:0 1px 2px rgba(23,32,38,.06), 0 12px 32px -14px rgba(23,32,38,.22);
  --shadow-lg:0 2px 6px rgba(23,32,38,.06), 0 40px 80px -40px rgba(23,32,38,.35);
  --radius:14px;
  --font:"Inter","Segoe UI",-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Noto Sans JP",sans-serif;
  --mono:ui-monospace,"JetBrains Mono","SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --wrap:1080px;
  color-scheme:light;
}
[data-theme="dark"]{
  --bg:#0b0f12; --bg-soft:#0e1418; --bg-elev:#12181d;
  --fg:#e8eef2; --fg-soft:#9baab5; --fg-faint:#6b7c87;
  --line:#253039; --line-soft:#1a2228;
  --accent:#35e0c6; --accent-fg:#041210; --accent-soft:rgba(53,224,198,.12);
  --brand:#14c8b0;
  --amber:#f6b73c; --amber-fg:#f6b73c; --amber-soft:rgba(246,183,60,.20);
  --ok:#3ddc97; --ok-soft:rgba(61,220,151,.12);
  --warn:#f6b73c; --warn-soft:rgba(246,183,60,.12);
  --bad:#ff6b6b; --bad-soft:rgba(255,107,107,.13);
  --code-bg:#0e1418;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -14px rgba(0,0,0,.65);
  --shadow-lg:0 2px 8px rgba(0,0,0,.45), 0 50px 90px -45px rgba(0,0,0,.85);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--font); font-size:16px; line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4{margin:0; line-height:1.25; letter-spacing:-.02em; font-weight:650}
p{margin:0}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
code,kbd,pre{font-family:var(--mono); font-size:.875em}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}
.wrap{width:min(var(--wrap),calc(100% - 48px)); margin-inline:auto}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ============ 顶栏 ============ */
.nav{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb,var(--bg) 78%,transparent);
  backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .2s ease, background .2s ease;
}
.nav.stuck{border-bottom-color:var(--line-soft)}
.nav__inner{display:flex; align-items:center; gap:24px; height:62px}
.brand{display:flex; align-items:center; gap:9px; font-weight:680; letter-spacing:-.01em; color:inherit}
.brand:hover{text-decoration:none}
.brand svg{width:24px; height:24px; border-radius:6px; flex:none}
.brand__ver{
  font-family:var(--mono); font-size:11px; font-weight:500; color:var(--fg-soft);
  border:1px solid var(--line); border-radius:999px; padding:1px 7px; letter-spacing:0;
}
.nav__links{display:flex; gap:20px; margin-left:auto; font-size:14.5px}
.nav__links a{color:var(--fg-soft); transition:color .15s; white-space:nowrap}
.nav__links a:hover{color:var(--fg); text-decoration:none}
.nav__actions{display:flex; align-items:center; gap:9px}
.icon-btn{
  display:grid; place-items:center; width:34px; height:34px; padding:0;
  background:transparent; color:var(--fg-soft); border:1px solid var(--line);
  border-radius:9px; cursor:pointer; transition:.15s;
}
.icon-btn:hover{color:var(--fg); border-color:var(--fg-faint); background:var(--bg-soft)}
.icon-btn svg{width:16px; height:16px}
[data-theme="light"] .i-moon,[data-theme="dark"] .i-sun{display:block}
[data-theme="light"] .i-sun,[data-theme="dark"] .i-moon{display:none}

/* 语言选择：原生 select，移动端直接唤起系统选择器 */
.lang{
  position:relative; display:flex; align-items:center;
  border:1px solid var(--line); border-radius:9px; height:34px; padding-left:9px;
  color:var(--fg-soft); background:transparent;
}
.lang:hover{border-color:var(--fg-faint); color:var(--fg)}
.lang svg{width:15px; height:15px; flex:none; pointer-events:none}
.lang select{
  appearance:none; -webkit-appearance:none; border:0; background:transparent; color:inherit;
  font-family:inherit; font-size:13px; height:100%; padding:0 24px 0 6px; cursor:pointer; outline:none;
}
.lang::after{
  content:""; position:absolute; right:9px; top:13px; width:6px; height:6px; pointer-events:none;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg); opacity:.7;
}
.lang option{background:var(--bg-elev); color:var(--fg)}

/* ============ 按钮 ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:44px; padding:0 20px; border-radius:10px; border:1px solid transparent;
  font-family:inherit; font-size:15px; font-weight:580; line-height:1; cursor:pointer;
  transition:transform .12s ease, box-shadow .18s ease, background .15s, border-color .15s;
  white-space:nowrap;
}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn svg{width:17px; height:17px; flex:none}
.btn--primary{background:var(--accent); color:var(--accent-fg); box-shadow:var(--shadow-sm)}
.btn--primary:hover{box-shadow:0 6px 20px -8px color-mix(in srgb,var(--accent) 70%,transparent)}
.btn--ghost{background:var(--bg-elev); color:var(--fg); border-color:var(--line)}
.btn--ghost:hover{border-color:var(--fg-faint); background:var(--bg-soft)}
.btn--sm{height:36px; padding:0 14px; font-size:13.5px; border-radius:8px}
.btn--sm svg{width:14px; height:14px}

/* ============ Hero ============ */
.hero{position:relative; padding:76px 0 24px; overflow:clip; isolation:isolate}
.hero::before{
  content:""; position:absolute; inset:0 -50% auto; height:620px; z-index:-2;
  background-image:radial-gradient(circle at 1px 1px,var(--line) 1px,transparent 0);
  background-size:22px 22px; opacity:.55;
  mask-image:radial-gradient(ellipse 62% 62% at 50% 8%,#000 10%,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 62% 62% at 50% 8%,#000 10%,transparent 72%);
}
.hero::after{
  content:""; position:absolute; inset:-220px -10% auto; height:640px; z-index:-1;
  background:radial-gradient(48% 50% at 50% 50%,var(--accent-soft),transparent 72%);
  filter:blur(6px);
}
.hero__head{max-width:820px; margin-inline:auto; text-align:center} /* 日文标题比中文长，760 会把「ダブルクリック」断开 */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12.5px;
  color:var(--fg-soft); background:var(--bg-elev); border:1px solid var(--line);
  border-radius:999px; padding:5px 12px 5px 8px; box-shadow:var(--shadow-sm);
}
.eyebrow b{color:var(--fg); font-weight:600}
.dot{width:6px; height:6px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 3px var(--ok-soft)}
h1{
  font-size:clamp(2.15rem,4.6vw,3.5rem); margin:22px 0 0; font-weight:680;
  letter-spacing:-.035em; text-wrap:balance;
  /* 日文没有空格，默认断行会落在假名中间（「…をダ／ブルクリック」）。
     auto-phrase 让 Chrome 按文节断；不支持的浏览器忽略这一行，退回原行为 */
  word-break:auto-phrase;
}
h1 em{font-style:normal; color:var(--accent)}
.lede{
  margin:20px auto 0; max-width:620px; font-size:clamp(1rem,1.4vw,1.125rem);
  color:var(--fg-soft); text-wrap:pretty;
}
.hero__cta{display:flex; gap:12px; justify-content:center; margin-top:32px; flex-wrap:wrap}
.hero__meta{
  display:flex; gap:18px; justify-content:center; flex-wrap:wrap;
  margin-top:20px; font-size:13px; color:var(--fg-faint);
}
.hero__meta span{display:inline-flex; align-items:center; gap:6px}
.hero__meta svg{width:13px; height:13px; opacity:.75}

/* ============ 应用窗口（纯 CSS 复刻，随主题切换，无图片请求） ============ */
.shot{
  position:relative; margin:56px auto 0; max-width:960px;
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
  background:var(--bg-elev); box-shadow:var(--shadow-lg);
  font-size:13px;
}
.shot::after{
  content:""; position:absolute; inset:auto 0 0; height:56px; pointer-events:none;
  background:linear-gradient(to bottom,transparent,var(--bg-elev));
}
.shot__bar{
  display:flex; align-items:center; gap:8px; height:38px; padding:0 14px;
  background:var(--bg-soft); border-bottom:1px solid var(--line-soft);
}
.shot__bar i{width:10px; height:10px; border-radius:50%; background:var(--line); flex:none}
.shot__file{margin-left:10px; font-family:var(--mono); font-size:12px; color:var(--fg-soft)}
.shot__tools{margin-left:auto; display:flex; gap:14px; font-size:11.5px; color:var(--fg-faint)}
.shot__tools b{font-weight:500; color:var(--fg-soft)}
.shot__body{display:grid; grid-template-columns:190px 1fr; min-height:352px}
.shot__toc{
  border-right:1px solid var(--line-soft); padding:18px 0; background:color-mix(in srgb,var(--bg-soft) 55%,transparent);
}
.shot__toc p{
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-faint);
  padding:0 16px 8px; font-weight:600;
}
.shot__toc a{display:block; padding:4px 16px; font-size:12px; color:var(--fg-soft); border-left:2px solid transparent}
.shot__toc a.on{color:var(--accent); border-left-color:var(--accent); background:var(--accent-soft); font-weight:550}
.shot__toc a.lv2{padding-left:28px; font-size:11.5px; color:var(--fg-faint)}
.shot__page{padding:24px 30px 40px; min-width:0}
.shot__page h4{font-size:19px; letter-spacing:-.02em}
.shot__page h5{
  font-size:13px; margin:18px 0 6px; padding-bottom:6px;
  border-bottom:1px solid var(--line-soft);
}
.shot p.t{font-size:12.5px; line-height:1.85; color:var(--fg-soft); margin-top:8px}
.shot p.t b{color:var(--fg); font-weight:600}
.shot code.inl{background:var(--code-bg); border:1px solid var(--line-soft); border-radius:4px; padding:.1em .35em; font-size:11.5px; color:var(--fg)}
/* 注意：white-space:normal —— <pre> 里块级行之间的换行会被 pre 渲染成空行 */
.shot pre{
  margin:10px 0 0; background:var(--code-bg); border:1px solid var(--line-soft);
  border-radius:8px; padding:10px 0; overflow:hidden; white-space:normal;
}
.shot pre div{display:flex; gap:14px; padding:0 12px; line-height:1.75; font-size:11.5px}
.shot pre i{color:var(--fg-faint); font-style:normal; width:12px; text-align:right; user-select:none; flex:none}
.shot pre span{color:var(--fg-soft); white-space:pre-wrap; overflow-wrap:anywhere; min-width:0}
.shot pre .k{color:#0b7c6d} .shot pre .s{color:#b45309} .shot pre .c{color:#8a98a3}
[data-theme="dark"] .shot pre .k{color:#35e0c6} [data-theme="dark"] .shot pre .s{color:#f6b73c} [data-theme="dark"] .shot pre .c{color:#6b7c87}
.shot blockquote{
  margin:12px 0 0; padding:8px 12px; border-left:3px solid var(--accent);
  background:var(--accent-soft); border-radius:0 6px 6px 0; font-size:12px; color:var(--fg-soft);
}
.shot .math{font-family:"Times New Roman",Times,serif; font-style:italic; font-size:13px; color:var(--fg-soft)}
.shot .math sup{font-size:.72em}
.shot__foot{
  position:absolute; right:16px; bottom:12px; z-index:2;
  font-family:var(--mono); font-size:10.5px; color:var(--fg-faint);
  background:var(--bg-elev); border:1px solid var(--line-soft); border-radius:999px; padding:2px 9px;
}

/* ============ 数据条 ============ */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:40px; background:var(--line-soft); border-block:1px solid var(--line-soft)}
.stats > div{background:var(--bg); padding:22px 8px; text-align:center}
.stats b{display:block; font-family:var(--mono); font-size:clamp(1.35rem,2.6vw,1.75rem); font-weight:600; letter-spacing:-.03em}
.stats span{display:block; margin-top:4px; font-size:12.5px; color:var(--fg-faint)}

/* ============ 通用 section ============ */
section{padding:88px 0}
.head{max-width:640px}
.head h2{font-size:clamp(1.6rem,2.8vw,2.15rem); font-weight:660; letter-spacing:-.03em}
.head p{margin-top:12px; color:var(--fg-soft); font-size:15.5px}
.kicker{
  display:block; font-family:var(--mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); margin-bottom:14px;
}

/* ============ 行号复制：左右对照动画 ============ */
.duel-sec{padding-top:72px; background:var(--bg)}
.duel{
  display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:40px;
  align-items:stretch;
}
.pane{
  border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--bg-elev);
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column; min-width:0;
}
.pane--good{border-color:color-mix(in srgb,var(--accent) 40%,var(--line)); box-shadow:0 0 0 3px var(--accent-soft), var(--shadow-sm)}
.pane__bar{
  display:flex; align-items:center; gap:8px; height:36px; padding:0 11px;
  background:var(--bg-soft); border-bottom:1px solid var(--line-soft);
  font-size:12px; color:var(--fg-soft); font-weight:550;
}
.pane__bar svg{width:13px; height:13px; flex:none; opacity:.8}
.pane__badge{
  margin-left:auto; font-family:var(--mono); font-size:10.5px; font-weight:500;
  padding:2px 8px; border-radius:999px; border:1px solid var(--line); color:var(--fg-faint);
  background:var(--bg-elev);
}
.pane__badge--bad{color:var(--bad); border-color:color-mix(in srgb,var(--bad) 35%,var(--line)); background:var(--bad-soft)}
.pane__badge--good{color:var(--accent); border-color:color-mix(in srgb,var(--accent) 35%,var(--line)); background:var(--accent-soft)}

.codewrap{position:relative; padding:9px 0 11px; flex:1}
.code{font-family:var(--mono); font-size:11.5px; line-height:1.85; counter-reset:ln}
.cl{display:flex; align-items:flex-start; gap:9px; padding:0 10px; border-radius:4px}
.cl__n{
  width:15px; flex:none; text-align:right; color:var(--fg-faint); font-size:10.5px;
  user-select:none; line-height:1.85;
}
.cl__n--btn{
  cursor:pointer; position:relative; border-radius:3px; transition:color .12s, background .12s;
  /* 按钮的 UA 默认样式必须清掉，否则行号会变成一颗灰底带边框的小方块，两栏还会错位 */
  appearance:none; -webkit-appearance:none; background:none; border:0; padding:0; margin:0;
  font:inherit; font-size:10.5px; line-height:1.85; color:inherit;
}
.cl__n--btn:hover,.cl__n--btn.hot{color:var(--accent); background:var(--accent-soft)}
.cl__txt{white-space:pre-wrap; word-break:break-word; min-width:0; color:var(--fg-soft)}
.cl--flash .cl__txt{background:var(--accent-soft); border-radius:4px}
.ch{position:relative; border-radius:2px}
.ch.on{background:var(--amber-soft)}
.ch.on-extra{background:color-mix(in srgb,var(--bad) 22%,transparent)}
.ps{color:var(--fg-faint); user-select:none}
.k{color:#0b7c6d} .s{color:#b45309} .c{color:#8a98a3} .v{color:#0f8f5f}
[data-theme="dark"] .k{color:#35e0c6} [data-theme="dark"] .s{color:#f6b73c} [data-theme="dark"] .c{color:#6b7c87} [data-theme="dark"] .v{color:#3ddc97}

.cursor{
  position:absolute; left:0; top:0; width:15px; height:17px; z-index:6; pointer-events:none;
  opacity:0; transition:opacity .2s;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.35));
}
.cursor.show{opacity:1}
.cursor svg{width:15px; height:17px; display:block}
.ripple{
  position:absolute; left:0; top:0; width:14px; height:14px; margin:-7px 0 0 -7px; z-index:5;
  border-radius:50%; border:2px solid var(--accent); opacity:0; pointer-events:none;
}
.ripple.go{animation:ripple .5s ease-out}
@keyframes ripple{
  0%{opacity:.75; transform:scale(.4)} 100%{opacity:0; transform:scale(2.6)}
}
.keycap{
  position:absolute; z-index:7; display:flex; gap:3px; align-items:center;
  opacity:0; transform:translateY(2px); transition:opacity .18s, transform .18s;
}
.keycap.show{opacity:1; transform:none}
.keycap kbd{
  font-family:var(--mono); font-size:10px; line-height:1; padding:4px 5px; border-radius:4px;
  background:var(--bg-elev); border:1px solid var(--line); border-bottom-width:2px;
  color:var(--fg-soft); box-shadow:var(--shadow-sm);
}
.toast{
  position:absolute; left:50%; bottom:10px; z-index:8; transform:translate(-50%,6px);
  font-size:11px; line-height:1; padding:7px 10px; border-radius:7px; white-space:nowrap;
  background:var(--fg); color:var(--bg); box-shadow:var(--shadow-md);
  opacity:0; transition:opacity .18s, transform .18s; pointer-events:none;
}
.toast.show{opacity:1; transform:translate(-50%,0)}

.term{
  /* 固定高度：左右两栏的终端行数不同（左边多一行报错），不定高两卡会差 18px */
  margin:0 10px 10px; padding:8px 10px; border-radius:8px; height:94px;
  background:var(--code-bg); border:1px solid var(--line-soft);
  font-family:var(--mono); font-size:10.8px; line-height:1.7; color:var(--fg-soft);
  white-space:pre-wrap; overflow-wrap:anywhere; overflow:hidden;
}
.term__ps{color:var(--fg-faint)}
.term .err{color:var(--bad)}
.term .ok{color:var(--ok)}
.caret{display:inline-block; width:5px; height:11px; background:var(--fg-soft); vertical-align:-1px; animation:blink 1s steps(2,start) infinite}
@keyframes blink{50%{opacity:0}}

.pane__foot{
  display:flex; align-items:center; gap:8px; min-height:38px; padding:0 11px 10px;
  font-size:12px; color:var(--fg-faint);
}
.verdict{
  display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:550;
  padding:3px 9px; border-radius:999px; border:1px solid var(--line); color:var(--fg-faint);
  opacity:0; transform:translateY(3px); transition:opacity .25s, transform .25s;
}
.verdict.show{opacity:1; transform:none}
.verdict--bad{color:var(--bad); background:var(--bad-soft); border-color:color-mix(in srgb,var(--bad) 30%,var(--line))}
.verdict--good{color:var(--ok); background:var(--ok-soft); border-color:color-mix(in srgb,var(--ok) 30%,var(--line))}

.duel__bar{
  display:flex; align-items:center; gap:14px; margin-top:18px; flex-wrap:wrap;
  font-size:12.5px; color:var(--fg-faint);
}
.prog{flex:1; min-width:120px; height:2px; border-radius:2px; background:var(--line-soft); overflow:hidden}
.prog i{display:block; height:100%; width:0; background:var(--line); border-radius:2px}
.duel__play{
  display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 11px;
  font-family:inherit; font-size:12px; color:var(--fg-soft); cursor:pointer;
  background:var(--bg-elev); border:1px solid var(--line); border-radius:7px;
}
.duel__play:hover{color:var(--fg); border-color:var(--fg-faint)}
.duel__play svg{width:12px; height:12px}
.duel__cap{margin-top:22px; font-size:14.5px; line-height:1.85; color:var(--fg-soft); max-width:74ch}
.duel__cap b{color:var(--fg); font-weight:600}
.duel__cap code{background:var(--code-bg); border:1px solid var(--line-soft); border-radius:4px; padding:.05em .3em; font-size:12.5px}

/* 动图导出模式：只渲染这一段，给无头浏览器截帧 */
body.embed{background:var(--bg)}
body.embed .nav,body.embed footer,body.embed main > section:not(.duel-sec){display:none}
body.embed .duel-sec{padding:0; background:transparent}
body.embed .duel-sec .head,body.embed .duel__bar > .prog,body.embed .duel__bar .duel__play{display:none}
body.embed .duel__bar{padding:0 0 14px}
body.embed .duel__cap{padding:0 2px}
body.embed .wrap{width:100%; padding:26px 26px 22px}

/* ============ 特性 ============ */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:44px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden}
.card{background:var(--bg); padding:26px 24px 28px; transition:background .18s}
.card:hover{background:var(--bg-soft)}
.card__i{font-family:var(--mono); font-size:11px; color:var(--accent); letter-spacing:.08em}
.card h3{margin-top:12px; font-size:16px; font-weight:620}
.card p{margin-top:8px; font-size:13.5px; line-height:1.75; color:var(--fg-soft)}
.card code{background:var(--code-bg); border:1px solid var(--line-soft); border-radius:4px; padding:.05em .3em; font-size:12px}

.tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:26px}
.tag{
  font-size:12.5px; color:var(--fg-soft); background:var(--bg-soft);
  border:1px solid var(--line-soft); border-radius:999px; padding:4px 11px;
}

/* ============ 不做什么 ============ */
.not{display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center}
.not ul{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.not li{display:flex; gap:12px; font-size:14.5px; color:var(--fg-soft)}
.not li svg{flex:none; width:19px; height:19px; margin-top:3px; color:var(--fg-faint)}
.not li b{display:block; color:var(--fg); font-weight:600; font-size:15px; margin-bottom:1px}

/* ============ 对比表 ============ */
.tbl-wrap{margin-top:40px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
table{width:100%; border-collapse:collapse; font-size:14px}
th,td{padding:13px 16px; text-align:left; border-bottom:1px solid var(--line-soft)}
thead th{background:var(--bg-soft); font-size:12.5px; font-weight:600; color:var(--fg-soft); white-space:nowrap}
thead th:nth-child(2){color:var(--accent)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:color-mix(in srgb,var(--bg-soft) 60%,transparent)}
td:first-child{color:var(--fg); width:31%}
td + td{color:var(--fg-soft); font-size:13.5px}
td:nth-child(2){color:var(--fg)}
.tbl-note{margin-top:12px; font-size:12.5px; color:var(--fg-faint)}

/* ============ 下载 ============ */
.dl{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:40px}
.dl__card{
  border:1px solid var(--line); border-radius:var(--radius); padding:24px;
  background:var(--bg-elev); box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
}
.dl__top{display:flex; align-items:center; gap:10px}
.dl__top svg{width:20px; height:20px; color:var(--fg-soft); flex:none}
.dl__top h3{font-size:15.5px; font-weight:620}
.dl__ver{margin-left:auto; font-family:var(--mono); font-size:11.5px; color:var(--fg-faint)}
.dl__file{
  margin-top:14px; font-family:var(--mono); font-size:12.5px; color:var(--fg-soft);
  background:var(--bg-soft); border:1px solid var(--line-soft); border-radius:7px;
  padding:8px 10px; overflow-wrap:anywhere;
}
.dl__meta{list-style:none; margin:14px 0 18px; padding:0; display:grid; gap:7px; font-size:13px; color:var(--fg-soft)}
.dl__meta li{display:flex; gap:8px}
/* 只有左边那列标签该定宽不收缩；值那列必须能换行，否则日文长句会把 390px 撑爆 */
.dl__meta li > span:first-child{color:var(--fg-faint); min-width:62px; flex:none}
.dl__meta li > span:last-child{min-width:0; overflow-wrap:anywhere}
.dl .btn{width:100%}
.dl__alt{margin-top:10px; font-size:12.5px; text-align:center; color:var(--fg-faint)}
.dl__alt a{color:var(--fg-soft); text-decoration:underline; text-underline-offset:2px}

.dl__aside{margin-top:32px; display:grid; grid-template-columns:1fr 1fr; gap:20px}
.panel{border:1px solid var(--line-soft); border-radius:12px; padding:18px 20px; background:var(--bg-soft)}
.panel h4{font-size:13.5px; font-weight:620; display:flex; align-items:center; gap:8px}
.panel h4 svg{width:15px; height:15px; color:var(--fg-faint); flex:none}
.panel p{margin-top:8px; font-size:13px; line-height:1.7; color:var(--fg-soft)}
.sha{display:flex; align-items:center; gap:8px; margin-top:10px}
.sha code{
  flex:1; min-width:0; overflow-wrap:anywhere; font-size:11.5px; color:var(--fg-soft);
  background:var(--bg-elev); border:1px solid var(--line-soft); border-radius:6px; padding:6px 8px;
}
.sha .icon-btn{width:30px; height:30px; border-radius:7px; flex:none}

/* ============ 下载区：当前版本行 ============ */
.dl__cur{
  display:flex; align-items:baseline; gap:9px; margin-top:14px;
  font-family:var(--mono); font-size:12.5px; color:var(--fg-faint);
}
.dl__cur b{color:var(--fg); font-weight:600; letter-spacing:.01em}
.dl__cur b span{font-family:inherit}
.dl__sep{color:var(--line)}

/* 还没发布的安装包（例如 macOS）：淡掉并禁用，避免 404 */
.btn.is-todo, .dl__alt a.is-todo{
  opacity:.45; pointer-events:none; text-decoration:none; cursor:default;
}

/* ============ 更新日志 ============ */
.log{
  list-style:none; margin:34px 0 0; padding:0;
  border-top:1px solid var(--line);
}
.log__item{border-bottom:1px solid var(--line); padding:22px 0 20px}
.log__item:last-child{border-bottom:0; padding-bottom:0}
.log__head{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin:0 0 10px}
.log__head b{font-family:var(--mono); font-size:14.5px; font-weight:640; letter-spacing:.02em; color:var(--fg)}
.log__head time{font-family:var(--mono); font-size:12px; color:var(--fg-faint)}
.log__item ul{list-style:none; margin:0; padding:0}
.log__item li{
  position:relative; padding-left:16px; font-size:14px; line-height:1.75;
  color:var(--fg-soft); max-width:74ch;
}
.log__item li::before{
  content:""; position:absolute; left:2px; top:.74em;
  width:5px; height:5px; border-radius:50%; background:var(--fg-faint); opacity:.5;
}
.log__item li + li{margin-top:3px}
.log__note{margin-top:14px; font-size:12px; color:var(--fg-faint)}

/* ============ FAQ ============ */
/* FAQ 落在 --bg-soft 上，--line-soft 在那儿几乎是同色，所以这里用 --line */
.faq{margin-top:36px; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none; cursor:pointer; padding:18px 34px 18px 0; position:relative;
  font-size:15.5px; font-weight:560; letter-spacing:-.01em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:6px; top:26px; width:9px; height:9px;
  border-right:1.6px solid var(--fg-faint); border-bottom:1.6px solid var(--fg-faint);
  transform:rotate(45deg); transition:transform .2s;
}
.faq details[open] summary::after{transform:rotate(225deg)}
.faq p{padding:0 40px 20px 0; font-size:14px; line-height:1.8; color:var(--fg-soft); max-width:74ch}
.faq a{text-decoration:underline; text-underline-offset:3px}

/* ============ 反馈 ============ */
/* 卡片用 --bg-elev 抬一层：亮色下是白卡落在 #f7f9fa 页面上，暗色下是 #12181d 落在 #0b0f12 上，
   两边都能靠「比页面亮一点 + 一条 --line 边框」把边界交代清楚 */
.fb{margin-top:40px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.fb__card{
  display:flex; flex-direction:column; gap:10px; text-decoration:none; color:inherit;
  background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 22px 20px;
  transition:border-color .18s, transform .18s, box-shadow .18s;
}
.fb__card:hover{border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--shadow-sm)}
.fb__card:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.fb__ico{
  width:32px; height:32px; display:grid; place-items:center; margin-bottom:2px;
  border-radius:9px; background:var(--accent-soft); color:var(--accent);
}
.fb__ico svg{width:17px; height:17px}
.fb__card h3{font-size:15.5px; font-weight:620; letter-spacing:-.01em}
.fb__card p{font-size:13.5px; line-height:1.72; color:var(--fg-soft); flex:1}
/* 底部那行相当于是按钮文案，项目里没有下划线链接的样式传统，所以用 mono + accent 区分 */
.fb__go{
  margin-top:6px; font-family:var(--mono); font-size:12px; font-weight:600; color:var(--accent);
  /* 邮件卡里这行就是邮箱地址，26 个字符在 320px 上放不下，所以让它能任意处折行 */
  display:block; overflow-wrap:anywhere; word-break:break-word;
}
.fb__go::after{content:" →"; transition:transform .18s}
.fb__card:hover .fb__go::after{transform:translateX(3px)}
.fb__note{margin-top:20px; font-size:12.5px; line-height:1.75; color:var(--fg-faint); max-width:74ch}
.fb__note a{text-decoration:underline; text-underline-offset:3px}

/* ============ 页脚 ============ */
footer{border-top:1px solid var(--line); padding:40px 0 56px; font-size:13px; color:var(--fg-faint)}
.foot{display:flex; gap:32px; flex-wrap:wrap; align-items:flex-start; justify-content:space-between}
.foot__brand{display:flex; align-items:center; gap:9px; color:var(--fg-soft); font-weight:600}
.foot__brand svg{width:20px; height:20px; border-radius:5px}
.foot__links{display:flex; gap:22px; flex-wrap:wrap}
.foot__links a{color:var(--fg-soft)}
.foot__legal{margin-top:22px; font-size:12px; line-height:1.8; max-width:70ch}

/* ============ 入场动画 ============ */
/* 必须挂在 .js 下：没有 JS 时（爬虫、禁用脚本、社交卡片抓取）
   内容要直接可见，不能靠 IntersectionObserver 才显形。 */
.js .reveal{opacity:0; transform:translateY(14px)}
.js .reveal.in{opacity:1; transform:none; transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1)}

/* ============ 响应式 ============ */
@media (max-width:1000px){
  .nav__links{gap:16px; font-size:13.5px}
}
@media (max-width:920px){
  .grid{grid-template-columns:1fr 1fr}
  .not{grid-template-columns:1fr; gap:28px}
  .shot__body{grid-template-columns:1fr}
  .shot__toc{display:none}
  .duel{grid-template-columns:1fr; gap:20px}
  .nav__links{display:none}
  /* 反馈卡横排三项在 920 以下会挤成窄条，直接改单列 */
  .fb{grid-template-columns:1fr; gap:12px}
  .fb__card{padding:20px 18px 18px}
}
@media (max-width:720px){
  .wrap{width:calc(100% - 36px)}
  section{padding:64px 0}
  .hero{padding-top:52px}
  .grid,.dl,.dl__aside{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr; gap:1px}
  .stats > div{padding:16px 8px; text-align:left; padding-left:20px}
  .stats b{font-size:1.15rem}
  .shot__page{padding:18px 18px 32px}
  /* 复刻窗口只是装饰：窄屏下工具组折成三行、文件名断成两行，很难看 */
  .shot__bar{gap:6px; padding:0 10px}
  .shot__file{margin-left:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .shot__tools{display:none}
  /* 手机上对比表横向滚动；右边缘渐隐提示「还有内容」 */
  .tbl-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch;
    mask-image:linear-gradient(to right,#000 88%,transparent);
    -webkit-mask-image:linear-gradient(to right,#000 88%,transparent)}
  table{min-width:560px}
  .hero__cta .btn{width:100%}
  .duel__cap{font-size:14px}
  /* 桌面上终端定高是为了两栏底部对齐；手机上上下堆叠、命令会折成 5 行，必须放开高度，
     否则报错那行会被裁掉 */
  .term{height:auto; min-height:96px}
}
@media (max-width:600px){
  /* 手机上顶栏只留「品牌 + 语言 + 主题」：整页的下载 CTA 在 hero 里已经有了，
     顶栏这颗按钮会把 390px 的视口撑破（曾导致正文整体横向溢出、文字不换行） */
  .nav__actions .btn{display:none}
  .brand__ver{display:none}
  .nav__inner{gap:8px}
  .lang{padding:5px 8px}
  .lang select{font-size:12px; padding-right:16px}
  .lang svg{width:13px; height:13px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none}
  .btn,.card,.faq summary::after{transition:none}
  .hero::before,.hero::after{filter:none}
  .caret{animation:none}
}