/* 客户端使用教程页(静态 HTML, 套主站外壳: 先加载 /static/style.css, 再加载本文件; 交互见 tut.js)。
 * 全部挂在 .tut 下面, 颜色 / 字体用主站变量; 按钮直接用主站 .btn。 */
.tut-page .crt::before { opacity:.35; }                       /* 截图上的扫描线淡一点, 看得清 */
.tut { display:grid; grid-template-columns:minmax(0,900px) 240px; justify-content:center; gap:34px; padding:26px 28px 70px; }
.tut.idx { grid-template-columns:minmax(0,1180px); }
.tut-doc { min-width:0; }
.tut-progress { position:fixed; left:0; right:0; top:var(--bar); height:2px; z-index:29; pointer-events:none; }
.tut-progress i { display:block; height:100%; background:var(--ph); box-shadow:0 0 10px var(--ph); transform-origin:0 50%; transform:scaleX(0); }

/* 入场 */
.js .tut .rv { opacity:0; transform:translateY(16px); }
.js .tut .rv.in { opacity:1; transform:none; transition:opacity .55s var(--ease), transform .7s var(--ease); transition-delay:calc(var(--d, 0) * 90ms); }

/* ---------------------------------------------------------------- 标题区: 左文案 + 右任务卡 */
.tut-brief { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:26px; padding:22px 24px; border:1px solid var(--line2); background:var(--scr); box-shadow:var(--bloom); overflow:hidden; }
.tut-brief::before { content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 120% at 0% 0%, rgba(var(--p),.12), transparent 60%), repeating-linear-gradient(90deg, transparent 0 39px, rgba(var(--p),.05) 39px 40px); }
.tut-brief > * { position:relative; }
.brief-main { min-width:0; display:flex; flex-direction:column; }
.tut-brief .badge { align-self:flex-start; font-size:12px; letter-spacing:.06em; color:var(--amber); border:1px dashed rgba(255,180,58,.55); padding:2px 10px; margin-bottom:12px; }
.tut-brief .badge::before { content:"$ "; color:var(--muted); }
.tut-brief h1 { margin:0 0 8px; font-size:clamp(26px,2.8vw,40px); line-height:1.2; color:var(--hi); text-shadow:var(--glow); }
.tut-brief h1::before { content:"# "; color:var(--muted); text-shadow:none; }
.tut-brief .lead { margin:0; color:var(--fg2); font-size:14px; max-width:64ch; }
.brief-cmd { margin-top:auto; padding-top:16px; font-size:13px; color:var(--hi); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brief-cmd .p { color:var(--ph); }
.brief-stats { display:flex; flex-direction:column; gap:8px; padding-left:22px; border-left:1px dashed var(--line2); }
.brief-stats .k, .os-pick .k, .tut-toc .k { color:var(--muted); letter-spacing:.16em; font-size:11px; }
.brief-stats .st { display:flex; justify-content:space-between; align-items:baseline; gap:10px; border-bottom:1px dashed var(--line); padding-bottom:6px; }
.brief-stats .st span { font-size:11.5px; color:var(--muted); letter-spacing:.12em; }
.brief-stats .st b { font-size:22px; color:var(--hi); text-shadow:var(--glow); font-weight:800; }
.segbar { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:3px; height:8px; }
.segbar i { background:rgba(var(--p),.14); transition:background .3s, box-shadow .3s; }
.segbar i.on { background:var(--ph); box-shadow:0 0 8px rgba(var(--p),.8); }
.linkbtn { align-self:flex-start; padding:0; border:0; background:none; color:var(--muted); font:inherit; font-size:12px; cursor:pointer; }
.linkbtn:hover { color:var(--ph); }

/* ---------------------------------------------------------------- 步骤: 时间线 + 卡片 */
.steps { list-style:none; margin:30px 0 0; padding:0 0 0 26px; position:relative; display:flex; flex-direction:column; gap:22px; }
.steps::before, .steps::after { content:""; position:absolute; left:4px; top:10px; width:1px; }
.steps::before { bottom:10px; background:rgba(var(--p),.18); }
.steps::after { height:calc((100% - 20px) * var(--fill, 0)); background:var(--ph); box-shadow:0 0 8px var(--ph); transition:height .7s var(--ease); }
.step { position:relative; background:var(--scr); border:1px solid var(--line2); padding:20px 22px; box-shadow:var(--bloom); scroll-margin-top:calc(var(--bar) + 18px); transition:border-color .3s; }
.step::before { content:""; position:absolute; left:-27px; top:24px; width:9px; height:9px; background:var(--bg, #020603); border:1px solid var(--ph); box-shadow:0 0 0 3px rgba(2,6,3,.9); transition:background .3s, box-shadow .3s; z-index:1; }
.step.done::before { background:var(--ph); box-shadow:0 0 0 3px rgba(2,6,3,.9), 0 0 10px var(--ph); }
.step::after { content:attr(data-n); position:absolute; left:18px; bottom:2px; font:800 92px/1 var(--mono); color:transparent; -webkit-text-stroke:1px rgba(var(--p),.13); pointer-events:none; z-index:0; }
.step > * { position:relative; z-index:1; }
.step.done { border-color:rgba(var(--p),.75); }
.js .tut .step { opacity:0; transform:translateX(-14px); }
.js .tut .step.in { opacity:1; transform:none; transition:opacity .5s var(--ease), transform .6s var(--ease), border-color .3s; }
.step .head { display:flex; align-items:flex-start; gap:14px; }
.step .head > div { flex:1; min-width:0; }
.step .num { flex:0 0 auto; display:grid; place-items:center; min-width:38px; height:30px; padding:0 6px; background:var(--ph); color:#000; font-weight:800; font-size:14px; text-shadow:none; box-shadow:var(--glow); transition:background .3s, color .3s; }
.step.done .num { background:transparent; color:var(--ph); outline:1px solid var(--ph); box-shadow:none; }
.step h3 { margin:2px 0 8px; font-size:17px; line-height:1.45; color:var(--hi); }
.step p { margin:0 0 4px; color:var(--fg2); font-size:13.5px; line-height:1.85; }
.step p:last-child { margin-bottom:0; }
.step b, .step strong, .note li b { color:var(--hi); font-weight:600; }
.step code { background:rgba(0,0,0,.5); border:1px solid var(--line); padding:0 6px; font-size:12.5px; color:var(--amber); word-break:break-all; }
.step-done { flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; height:30px; padding:0 12px; border:1px dashed var(--line2); background:rgba(0,0,0,.35); color:var(--fg2); font:inherit; font-size:12px; cursor:pointer; white-space:nowrap; transition:border-color .2s, color .2s, background .2s; }
.step-done i { position:relative; width:13px; height:13px; border:1px solid currentColor; }
.step-done:hover { border-color:var(--ph); color:var(--hi); }
.step-done[aria-pressed="true"] { border-style:solid; border-color:var(--ph); color:#000; background:var(--ph); text-shadow:none; }
.step-done[aria-pressed="true"] i::after { content:""; position:absolute; left:3px; top:0; width:4px; height:8px; border:solid #000; border-width:0 2px 2px 0; transform:rotate(45deg); }
/* 截图: 进入视口时像 CRT 一样从上往下扫出来 */
.tut figure { margin:18px 0 0; position:relative; }
.tut figure img { display:block; width:100%; height:auto; border:1px solid var(--line2); background:#020a05; box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 18px 40px -24px rgba(0,0,0,.95); transition:border-color .2s, box-shadow .2s, transform .3s var(--ease); }
.tut figure.phone { max-width:340px; margin-left:auto; margin-right:auto; }
.tut figure a.zoom { display:block; position:relative; cursor:zoom-in; overflow:hidden; }
.tut figure a.zoom:hover img { border-color:var(--ph); box-shadow:0 0 0 1px var(--ph), 0 0 30px -6px rgba(var(--p),.6); }
.tut figure a.zoom::after { content:"⤢ 查看原图"; position:absolute; right:8px; top:8px; z-index:2; padding:1px 8px; font-size:11px; background:rgba(0,0,0,.8); color:var(--ph); border:1px solid var(--line2); opacity:0; transform:translateY(-4px); transition:opacity .2s, transform .2s; }
.tut figure a.zoom:hover::after { opacity:1; transform:none; }
.js .tut .step figure img { clip-path:inset(0 0 100% 0); }
.js .tut .step.in figure img { animation:tutScan 1.1s steps(22) .15s forwards; }
.js .tut .step.in figure a.zoom::before { content:""; position:absolute; left:0; right:0; top:0; height:2px; z-index:2; background:var(--hi); box-shadow:0 0 14px 2px var(--ph); animation:tutLine 1.1s steps(22) .15s forwards; pointer-events:none; }
.duo { display:flex; flex-wrap:wrap; gap:16px; justify-content:center; align-items:flex-start; }
.duo > figure { flex:1 1 260px; max-width:340px; margin:0 !important; }
.tut figcaption { margin-top:8px; text-align:center; color:var(--muted); font-size:12.5px; line-height:1.6; }
.tut figcaption::before { content:"^ "; color:var(--dim); }
@keyframes tutScan { to { clip-path:inset(0 0 0 0); } }
@keyframes tutLine { 0% { top:0; opacity:1; } 92% { opacity:1; } 100% { top:100%; opacity:0; } }
/* 宽屏: 手机截图放到文字右边 */
@media (min-width:1240px) {
  .step:has(> figure.phone), .step:has(> .duo) { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:26px; align-items:start; }
  .step:has(> figure.phone) > .head, .step:has(> .duo) > .head { position:sticky; top:calc(var(--bar) + 24px); }
  .step > figure.phone { margin:0; width:250px; }
  .step > .duo { flex-wrap:nowrap; }
  .step > .duo > figure { flex:0 0 210px; width:210px; }
}

/* ---------------------------------------------------------------- 完成横幅 */
.tut-finish { position:relative; margin-top:28px; padding:22px 24px; border:1px solid var(--line2); background:var(--scr); overflow:hidden; }
.tut-finish::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .6s;
  background:radial-gradient(70% 140% at 50% 120%, rgba(var(--p),.25), transparent 60%); }
.tut-finish.unlocked { border-color:var(--ph); box-shadow:0 0 0 1px var(--ph), 0 0 50px -12px rgba(var(--p),.7); }
.tut-finish.unlocked::before { opacity:1; }
.fin-screen { position:relative; }
.fin-lock { font-size:12.5px; color:var(--amber); letter-spacing:.06em; margin-bottom:10px; }
.fin-lock::before { content:"[LOCKED] "; color:var(--muted); }
.unlocked .fin-lock { display:none; }
.fin-log { font-size:12.5px; color:var(--fg2); min-height:4.8em; }
.fin-l b { color:var(--ph); }
.js .tut-finish .fin-l { visibility:hidden; }
.js .tut-finish.unlocked .fin-l { visibility:visible; animation:finLine .3s steps(3) both; animation-delay:calc(var(--i) * .35s); }
.fin-big { margin:8px 0 6px; font:800 clamp(34px,6vw,76px)/1 var(--mono); letter-spacing:.12em; color:rgba(var(--p),.16); -webkit-text-stroke:1px rgba(var(--p),.4); transition:color .4s; }
.fin-big .cursor { width:.45em; height:.8em; }
.unlocked .fin-big { color:var(--hi); -webkit-text-stroke:0; text-shadow:var(--glow); animation:finGlow 1.4s steps(8) 1.05s both; }
.fin-p { margin:0; color:var(--muted); font-size:13.5px; }
.unlocked .fin-p { color:var(--fg2); }
.fin-act { position:relative; display:flex; flex-wrap:wrap; gap:12px; margin-top:16px; }
.tut-finish:not(.unlocked) .fin-act .btn:first-child { background:transparent; color:var(--fg2); border-color:var(--line2); box-shadow:none; }
@keyframes finLine { from { opacity:0; transform:translateX(-6px); } to { opacity:1; transform:none; } }
@keyframes finGlow { 0% { opacity:.2; } 20% { opacity:1; } 30% { opacity:.4; } 45% { opacity:1; } 55% { opacity:.7; } 100% { opacity:1; } }

/* ---------------------------------------------------------------- 提示 / 结尾 */
.note { margin-top:20px; padding:16px 20px; background:var(--scr); border:1px dashed var(--line2); }
.note h4 { margin:0 0 10px; font-size:14.5px; color:var(--hi); }
.note h4::before { content:"[i] "; color:var(--ph); }
.note ul { margin:0; padding-left:20px; color:var(--fg2); font-size:13.5px; }
.note li { margin-bottom:6px; }
.note li:last-child { margin-bottom:0; }
.note li::marker { color:var(--ph); }
.note.warn { border-color:rgba(255,180,58,.6); background:rgba(20,12,3,.82); }
.note.warn h4::before { content:"[!] "; color:var(--amber); }
.tut .cta { display:flex; flex-wrap:wrap; gap:12px; margin:26px 0 6px; }
.tut .cta .btn { min-width:150px; }
.tut .foot { margin:30px 0 0; padding-top:14px; border-top:1px dashed var(--line); color:var(--muted); font-size:12px; }
.others { margin-top:24px; }
.others h4 { margin:0 0 10px; color:var(--muted); font-weight:600; font-size:12.5px; letter-spacing:.1em; }
.others .row { display:flex; flex-wrap:wrap; gap:10px; }
.others a { display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border:1px solid var(--line2); background:var(--scr); color:var(--hi); font-size:13px; text-decoration:none; transition:border-color .2s, background .2s, transform .2s; }
.others a:hover { border-color:var(--ph); background:rgba(var(--p),.1); transform:translateY(-2px); }
.others a svg { width:16px; height:16px; flex:0 0 auto; color:var(--ph); }

/* ---------------------------------------------------------------- 右侧目录 */
.tut-toc { position:sticky; top:calc(var(--bar) + 22px); align-self:start; display:flex; flex-direction:column; gap:10px; border-left:1px dashed var(--line2); padding:4px 0 4px 16px; font-size:12.5px; }
.toc-prog { display:flex; align-items:baseline; gap:8px; }
.toc-prog b { font-size:24px; color:var(--hi); text-shadow:var(--glow); }
.toc-prog span { color:var(--muted); font-size:11.5px; }
.tut-toc nav { display:flex; flex-direction:column; }
.tut-toc nav a { position:relative; display:grid; grid-template-columns:24px minmax(0,1fr); gap:4px; padding:6px 0 6px 8px; color:var(--fg2); text-decoration:none; line-height:1.5; border-left:2px solid transparent; transition:color .2s, border-color .2s, background .2s; }
.tut-toc nav a span { color:var(--dim); }
.tut-toc nav a:hover { color:var(--hi); background:rgba(var(--p),.05); }
.tut-toc nav a.on { color:var(--hi); border-left-color:var(--ph); background:rgba(var(--p),.07); }
.tut-toc nav a.on span { color:var(--ph); }
.tut-toc nav a.ok span { color:var(--ph); }
.tut-toc .links { margin-top:6px; padding-top:12px; border-top:1px dashed var(--line); display:flex; flex-direction:column; gap:6px; }
.tut-toc .links a { color:var(--muted); text-decoration:none; }
.tut-toc .links a::before { content:"→ "; color:var(--dim); }
.tut-toc .links a:hover { color:var(--ph); }

/* ---------------------------------------------------------------- 总览页 */
.tut-brief.idx { grid-template-columns:minmax(0,1fr) minmax(0,420px); }
.os-pick { display:flex; flex-direction:column; gap:12px; justify-content:center; padding-left:24px; border-left:1px dashed var(--line2); min-width:0; }
.os-seg { display:flex; flex-wrap:wrap; gap:6px; }
.os-seg button { height:34px; padding:0 12px; border:1px solid var(--line2); background:rgba(0,0,0,.35); color:var(--fg2); font:inherit; font-size:12.5px; cursor:pointer; transition:all .2s; }
.os-seg button:hover { border-color:var(--ph); color:var(--hi); }
.os-seg button.on { background:var(--ph); border-color:var(--ph); color:#000; text-shadow:none; box-shadow:var(--glow); }
.os-hint { font-size:12.5px; color:var(--amber); min-height:1.6em; }
.os-hint::before { content:"› "; color:var(--muted); }
/* 三步流程条: 光点沿虚线跑 */
.flow { display:grid; grid-template-columns:minmax(0,1fr) 60px minmax(0,1fr) 60px minmax(0,1fr); align-items:center; margin:18px 0 0; padding:16px 20px; border:1px solid var(--line); background:rgba(1,6,3,.6); }
.fl { display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto; column-gap:12px; min-width:0; }
.fl b { grid-row:1 / 3; align-self:center; font-size:26px; color:var(--ph); text-shadow:var(--glow); }
.fl span { color:var(--hi); font-weight:700; white-space:nowrap; }
.fl em { font-style:normal; font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fl-line { position:relative; height:2px; background:repeating-linear-gradient(90deg, rgba(var(--p),.45) 0 5px, transparent 5px 9px); }
.fl-line i { position:absolute; top:-3px; left:0; width:8px; height:8px; background:var(--hi); box-shadow:0 0 10px var(--ph); animation:flRun 1.8s linear infinite; }
.fl-line + .fl + .fl-line i { animation-delay:.9s; }
@keyframes flRun { from { left:0; } to { left:calc(100% - 8px); } }
/* 客户端卡片 */
.tut-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:18px; }
.tut-card { position:relative; display:flex; flex-direction:column; min-width:0; border:1px solid var(--line2); background:var(--scr); color:var(--fg); text-decoration:none; overflow:hidden; box-shadow:var(--bloom);
  transition:border-color .25s, transform .35s var(--ease), opacity .3s, filter .3s, box-shadow .3s; }
.tut-card::before { content:""; position:absolute; left:0; top:0; height:2px; width:0; z-index:2; background:var(--ph); box-shadow:var(--glow); transition:width .45s var(--ease); }
.tut-card:hover { border-color:var(--ph); transform:translateY(-4px); color:var(--fg); box-shadow:0 0 0 1px var(--ph), 0 20px 40px -24px rgba(var(--p),.8); }
.tut-card:hover::before, .tut-card.match::before { width:100%; }
.tut-card.match { border-color:var(--ph); box-shadow:0 0 0 1px var(--ph), 0 0 40px -14px rgba(var(--p),.8); }
.tut-card.dim { opacity:.38; filter:grayscale(.7); }
.tut-card.dim:hover { opacity:.85; filter:none; }
.tc-rec { position:absolute; right:12px; top:12px; z-index:2; padding:1px 8px; font-size:11px; font-weight:700; color:#000; background:var(--ph); text-shadow:none; opacity:0; transform:translateY(-6px); transition:opacity .25s, transform .25s; }
.tut-card.match .tc-rec { opacity:1; transform:none; }
.tc-art { position:relative; height:190px; display:grid; place-items:center; border-bottom:1px dashed var(--line);
  background:radial-gradient(60% 80% at 50% 60%, rgba(var(--p),.12), transparent 70%), linear-gradient(rgba(var(--p),.05) 1px, transparent 1px) 0 0 / 100% 16px; }
.tc-b { padding:16px 18px 6px; display:flex; flex-direction:column; gap:6px; flex:1; }
.tc-b b { font-size:17px; color:var(--hi); }
.tc-b em { font-style:normal; color:var(--fg2); font-size:12.5px; line-height:1.7; }
.tc-meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:8px; }
.tc-meta span { font-size:11px; color:var(--muted); border:1px solid var(--line); padding:0 7px; white-space:nowrap; }
.tc-go { display:flex; justify-content:space-between; align-items:center; margin:10px 18px 16px; padding-top:10px; border-top:1px dashed var(--line); color:var(--ph); font-size:13px; font-weight:700; }
.tc-go i { font-style:normal; transition:transform .25s var(--ease); }
.tut-card:hover .tc-go i { transform:translateX(6px); }
/* 卡片里的设备小动画: 开关拨上 → 状态从 CONNECTING 变 CONNECTED → 信号格依次亮 */
.dev { position:relative; }
.dev .scr { position:relative; overflow:hidden; background:#020a05; }
.dev.phone { width:86px; height:156px; padding:9px 6px; border:2px solid rgba(var(--p),.6); border-radius:14px; background:#041009; box-shadow:0 0 24px -6px rgba(var(--p),.5); }
.dev.phone .scr { height:100%; border-radius:5px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; }
.dev.phone .sb { position:absolute; top:5px; left:8px; right:8px; height:3px; background:linear-gradient(90deg, rgba(var(--p),.5) 0 30%, transparent 30% 70%, rgba(var(--p),.5) 70%); }
.dev .tg { position:relative; width:38px; height:20px; border:1px solid var(--ph); background:rgba(var(--p),.08); }
.dev .tg i { position:absolute; top:2px; left:2px; width:14px; height:14px; background:var(--muted); animation:devTg 4s var(--ease) infinite; }
.dev .st { position:relative; height:12px; width:100%; font-size:8.5px; letter-spacing:.08em; text-align:center; }
.dev .st em { position:absolute; left:0; right:0; font-style:normal; }
.dev .st em:first-child { color:var(--amber); animation:devA 4s steps(1) infinite; }
.dev .st em:last-child { color:var(--ph); animation:devB 4s steps(1) infinite; }
.dev .bars { display:flex; align-items:flex-end; gap:3px; height:16px; }
.dev .bars i { width:5px; background:rgba(var(--p),.18); animation:devBar 4s steps(1) infinite; }
.dev .bars i:nth-child(1) { height:25%; animation-delay:.1s; }
.dev .bars i:nth-child(2) { height:50%; animation-delay:.25s; }
.dev .bars i:nth-child(3) { height:75%; animation-delay:.4s; }
.dev .bars i:nth-child(4) { height:100%; animation-delay:.55s; }
.dev.laptop { width:170px; }
.dev.laptop .scr { height:104px; border:2px solid rgba(var(--p),.6); border-bottom-width:6px; padding:16px 10px 8px; display:flex; flex-direction:column; gap:6px; box-shadow:0 0 24px -6px rgba(var(--p),.5); }
.dev.laptop .ttl { position:absolute; top:4px; left:6px; display:flex; gap:3px; }
.dev.laptop .ttl i { width:4px; height:4px; background:rgba(var(--p),.5); }
.dev.laptop .row { height:9px; width:72%; background:rgba(var(--p),.12); }
.dev.laptop .row:nth-child(3) { width:60%; }
.dev.laptop .row:nth-child(4) { width:80%; }
.dev.laptop .row:nth-child(2) { animation:devRow 4s steps(1) infinite; }
.dev.laptop .tg { position:absolute; right:10px; bottom:10px; width:30px; height:16px; }
.dev.laptop .tg i { width:10px; height:10px; }
.dev.laptop .base { display:block; height:7px; margin:0 -14px; background:linear-gradient(180deg, rgba(var(--p),.55), rgba(var(--p),.2)); clip-path:polygon(4% 0, 96% 0, 100% 100%, 0 100%); }
.dev-combo { position:relative; width:220px; height:160px; }
.dev-combo .laptop { position:absolute; left:0; top:22px; }
.dev-combo .phone { position:absolute; right:0; top:0; transform:scale(.82); transform-origin:100% 0; }
.tut-card:hover .dev .tg i, .tut-card.match .dev .tg i { animation-duration:2.4s; }
@keyframes devTg { 0%, 20% { left:2px; background:var(--muted); } 35%, 100% { left:calc(100% - 16px); background:var(--ph); box-shadow:0 0 8px var(--ph); } }
.dev.laptop .tg i { animation-name:devTgS; }
@keyframes devTgS { 0%, 20% { left:2px; background:var(--muted); } 35%, 100% { left:calc(100% - 12px); background:var(--ph); box-shadow:0 0 8px var(--ph); } }
@keyframes devA { 0% { opacity:1; } 45% { opacity:0; } }
@keyframes devB { 0% { opacity:0; } 45% { opacity:1; } }
@keyframes devBar { 0% { background:rgba(var(--p),.18); } 50% { background:var(--ph); box-shadow:0 0 6px var(--ph); } }
@keyframes devRow { 0% { background:rgba(var(--p),.12); } 40% { background:var(--ph); box-shadow:0 0 6px var(--ph); } }
.tut-notes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:4px; }
.tut-notes .note { margin-top:16px; }

/* ---------------------------------------------------------------- 响应式 */
@media (max-width:1240px) {
  .tut { grid-template-columns:minmax(0,900px); }
  .tut-toc { display:none; }
}
@media (max-width:1000px) {
  .tut-cards { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .tut-brief.idx { grid-template-columns:minmax(0,1fr); }
  .os-pick { padding-left:0; border-left:0; padding-top:16px; border-top:1px dashed var(--line2); }
}
@media (max-width:760px) {
  .tut { padding:14px 12px 96px; }
  .tut-brief { grid-template-columns:minmax(0,1fr); padding:18px 16px; gap:16px; }
  .brief-stats { padding:14px 0 0; border-left:0; border-top:1px dashed var(--line2); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px 12px; }
  .brief-stats .k, .brief-stats .segbar, .brief-stats .linkbtn { grid-column:1 / -1; }
  .brief-stats .st { flex-direction:column; gap:2px; }
  .brief-stats .st b { font-size:18px; }
  .steps { padding-left:18px; }
  .steps::before, .steps::after { left:2px; }
  .step { padding:14px; }
  .step::before { left:-21px; }
  .step::after { font-size:64px; }
  .step .head { flex-wrap:wrap; gap:10px; }
  .step .head > div { flex-basis:calc(100% - 52px); }
  .step-done { margin-left:48px; }
  .step h3 { font-size:15.5px; }
  .flow { grid-template-columns:minmax(0,1fr); gap:10px; padding:14px; }
  .fl-line { width:2px; height:22px; margin-left:12px; background:repeating-linear-gradient(180deg, rgba(var(--p),.45) 0 5px, transparent 5px 9px); }
  .fl-line i { left:-3px !important; animation-name:flRunV; }
  .tut-cards, .tut-notes { grid-template-columns:minmax(0,1fr); }
  .tc-art { height:160px; }
  .tut .cta .btn { flex:1 1 0; min-width:0; }
}
@keyframes flRunV { from { top:0; } to { top:calc(100% - 8px); } }
@media (prefers-reduced-motion:reduce) {
  .js .tut .rv, .js .tut .step { opacity:1 !important; transform:none !important; }
  .js .tut .step figure img { clip-path:none !important; }
  .js .tut-finish.unlocked .fin-l { visibility:visible; }
}