/* ===================================================================
   机器人入行指南 · 设计系统
   ------------------------------------------------------------------
   1 tokens  2 base  3 顶栏与菜单  4 首页  5 列表与表格
   6 知识点  7 实验台  8 页脚  9 响应式
   =================================================================== */

/* ---------- 1 tokens ---------- */
:root{
  --paper:#fbfaf7;
  --paper2:#f4f1e9;
  --card:#ffffff;
  --ink:#15130f;
  --ink2:#565046;
  --ink3:#8b8478;
  --line:#e4ded1;
  --line2:#efeae0;
  --accent:#a8431e;
  --accent2:#f8ece6;
  --brand:#1f4b43;
  --good:#2f6b4f;
  --amber:#8a5a12;
  --purple:#4a3f7a;
  --shadow:0 1px 2px rgba(21,19,15,.04), 0 8px 24px -12px rgba(21,19,15,.18);
  --shadow-lg:0 2px 6px rgba(21,19,15,.06), 0 24px 60px -20px rgba(21,19,15,.28);
  --w:1120px;
  --prose:700px;
  --r:12px;
  --head:66px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#111010;
    --paper2:#171614;
    --card:#1a1917;
    --ink:#f3f0e9;
    --ink2:#b6afa2;
    --ink3:#847d71;
    --line:#2c2924;
    --line2:#232019;
    --accent:#e08a63;
    --accent2:#291b14;
    --brand:#7db8a7;
    --good:#6fae8c;
    --amber:#d3a35c;
    --purple:#a79cd8;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
    --shadow-lg:0 2px 6px rgba(0,0,0,.4), 0 28px 60px -20px rgba(0,0,0,.65);
  }
  ::selection{background:#4a2c1f;}
}

/* ---------- 2 base ---------- */
*{box-sizing:border-box; margin:0; padding:0;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
body{
  background:var(--paper); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased;
  font-feature-settings:"tnum" 0;
}
body.no-scroll{overflow:hidden;}
a{color:inherit; text-decoration:none;}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer;}
::selection{background:#f0d9cc;}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:3px;}
.wrap{max-width:var(--w); margin:0 auto; padding:0 28px;}
main{max-width:var(--w); margin:0 auto; padding:0 28px 40px;}

h1{font-size:clamp(30px,4.4vw,46px); line-height:1.18; letter-spacing:-.028em; font-weight:700;}
h2{font-size:22px; line-height:1.35; letter-spacing:-.018em; font-weight:700;}
h3{font-size:16.5px; line-height:1.5; font-weight:700; margin:36px 0 12px; letter-spacing:-.01em;}
.kicker{font-size:11.5px; letter-spacing:.14em; color:var(--accent); font-weight:700; text-transform:uppercase;}
.lede{font-size:17px; line-height:1.82; color:var(--ink2); max-width:36em;}
.lede + .lede{margin-top:12px;}
.note{font-size:13px; color:var(--ink3); line-height:1.7; margin-top:14px;}
.ic{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex:none;}

/* ---------- 3 顶栏 ---------- */
.site-head{
  position:sticky; top:0; z-index:80;
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.site-head.scrolled{border-bottom-color:var(--line); box-shadow:0 1px 0 rgba(0,0,0,.02), 0 6px 24px -18px rgba(0,0,0,.35);}
.bar{max-width:var(--w); margin:0 auto; padding:0 28px; height:var(--head); display:flex; align-items:center; gap:8px;}
.brand{display:flex; align-items:center; gap:9px; font-size:14.5px; font-weight:700; letter-spacing:-.01em; flex:none; margin-right:14px;}
.brand svg{width:24px; height:24px; overflow:visible;}
.brand .bm-arm{transform-origin:7px 17px; animation:armSwing 5.2s var(--ease) infinite;}
.brand .bm-dot{animation:dotPulse 2.6s ease-in-out infinite;}
@keyframes armSwing{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(14deg)}}
@keyframes dotPulse{0%,100%{opacity:.35; r:2}50%{opacity:1; r:2.6}}

.nav{display:flex; align-items:center; gap:2px; flex:1;}
.nav-item{position:relative;}
.nav-link{
  display:inline-flex; align-items:center; gap:5px;
  padding:8px 11px; border-radius:8px; font-size:13.5px; color:var(--ink2);
  transition:background .15s, color .15s; white-space:nowrap;
}
.nav-link:hover{background:var(--paper2); color:var(--ink);}
.nav-item.on > .nav-link{color:var(--ink); font-weight:600;}
.nav-item.on > .nav-link::after{
  content:""; position:absolute; left:11px; right:11px; bottom:2px; height:2px; background:var(--accent); border-radius:2px;
}
.nav-link .caret{width:9px; height:9px; opacity:.45; transition:transform .18s;}
.nav-item.open > .nav-link{background:var(--paper2); color:var(--ink);}
.nav-item.open > .nav-link .caret{transform:rotate(180deg);}

.head-right{display:flex; align-items:center; gap:6px; flex:none;}
.kbd-btn{
  display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 10px;
  border:1px solid var(--line); border-radius:8px; background:var(--card);
  font-size:12.5px; color:var(--ink3); transition:border-color .15s, color .15s;
}
.kbd-btn:hover{border-color:var(--ink3); color:var(--ink2);}
.kbd-btn kbd{font:inherit; font-size:11px; padding:1px 4px; border:1px solid var(--line); border-radius:4px; background:var(--paper2);}
.burger{display:none; width:36px; height:36px; border-radius:8px; align-items:center; justify-content:center; color:var(--ink2);}
.burger:hover{background:var(--paper2);}

/* mega */
.mega{
  position:absolute; top:100%; left:50%; padding-top:9px; width:min(760px, calc(100vw - 40px));
  transform:translateX(-50%) translateY(4px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
  z-index:90;
}
.mega.l{left:-28px; transform:translateY(4px);}
.mega.r{left:auto; right:-16px; transform:translateY(4px);}
.nav-item.open > .mega{opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);}
.nav-item.open > .mega.l, .nav-item.open > .mega.r{transform:translateY(0);}
.mega-in{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow-lg); overflow:hidden; display:grid; grid-template-columns:1.45fr 1fr;
}
.mega-in.one{grid-template-columns:1fr;}
.mega-main{padding:14px; display:grid; grid-template-columns:1fr 1fr; gap:2px;}
.mega-main.wide{grid-template-columns:1fr 1fr;}
.mlink{display:flex; gap:11px; align-items:flex-start; padding:10px 11px; border-radius:9px; transition:background .13s;}
.mlink:hover{background:var(--paper2);}
.mlink .ic{width:17px; height:17px; margin-top:2px; color:var(--ink3);}
.mlink:hover .ic{color:var(--accent);}
.mlink b{display:block; font-size:13.5px; font-weight:600; line-height:1.4; color:var(--ink);}
.mlink span{display:block; font-size:11.5px; color:var(--ink3); line-height:1.5; margin-top:1px;}
.mlink .n{margin-left:auto; font-size:11px; color:var(--ink3); font-variant-numeric:tabular-nums; padding-top:2px;}
.mega-side{background:var(--paper2); padding:16px 18px; border-left:1px solid var(--line);}
.mega-side .mt{font-size:10.5px; letter-spacing:.12em; color:var(--ink3); font-weight:700; margin-bottom:9px;}
.mega-side a{display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink2); padding:5px 0;}
.mega-side a:hover{color:var(--accent);}
.mega-side a .ic{width:14px; height:14px;}
.mega-foot{grid-column:1 / -1; padding:10px 16px; border-top:1px solid var(--line); font-size:12px; color:var(--ink3); display:flex; justify-content:space-between; gap:10px;}
.mega-foot a{color:var(--accent); font-weight:600;}

/* 移动抽屉 */
.drawer{
  position:fixed; inset:0 0 0 auto; width:min(90vw, 380px); background:var(--card); z-index:120;
  transform:translateX(101%); transition:transform .28s var(--ease);
  overflow-y:auto; overscroll-behavior:contain; padding:18px 20px 40px;
  border-left:1px solid var(--line); box-shadow:var(--shadow-lg);
}
.drawer.open{transform:translateX(0);}
.drawer .dh{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;}
.drawer .dt{font-size:11px; letter-spacing:.12em; color:var(--ink3); font-weight:700; margin:20px 0 8px;}
.drawer a{display:flex; align-items:center; gap:10px; padding:10px 2px; font-size:14.5px; border-bottom:1px solid var(--line2);}
.drawer a .ic{color:var(--ink3);}
.drawer a span{color:var(--ink3); font-size:11.5px; margin-left:auto;}
.scrim{position:fixed; inset:0; background:rgba(10,9,8,.42); z-index:110; opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s;}
.scrim.open{opacity:1; visibility:visible;}

/* 搜索面板 */
.search{position:fixed; inset:0; z-index:200; display:none; align-items:flex-start; justify-content:center; padding:12vh 20px 20px; background:rgba(16,14,12,.42); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);}
.search.open{display:flex;}
.search-box{width:min(600px, 100%); background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-lg); overflow:hidden;}
.search-top{display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--line);}
.search-top input{flex:1; border:none; outline:none; background:none; font-size:16px; color:var(--ink);}
.search-top input::placeholder{color:var(--ink3);}
.search-top .sx{font-size:11px; color:var(--ink3); border:1px solid var(--line); border-radius:5px; padding:2px 6px;}
#search-results{max-height:52vh; overflow-y:auto; padding:6px;}
.sr{display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:8px; font-size:14px;}
.sr.on{background:var(--paper2);}
.sr .srt{font-weight:600;}
.sr .srk{margin-left:auto; font-size:11px; color:var(--ink3);}
.se{padding:22px; font-size:13.5px; color:var(--ink3); text-align:center;}

/* ---------- 4 首页 ---------- */
.hero{padding:44px 0 40px; display:grid; grid-template-columns:1.15fr .85fr; gap:44px; align-items:center;}
.hero h1{margin:14px 0 18px;}
.hero .lede{font-size:17px; max-width:31em;}
.hero-fig{position:relative; height:290px; display:flex; align-items:center; justify-content:center;}
.hero-fig svg{width:100%; height:100%; overflow:visible;}
.hero-cta{display:flex; gap:10px; margin-top:24px; flex-wrap:wrap;}
.btn{display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 18px; border-radius:9px; font-size:14px; font-weight:600; border:1px solid var(--line); background:var(--card); transition:transform .15s, border-color .15s;}
.btn:hover{border-color:var(--ink3); transform:translateY(-1px);}
.btn.pri{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.btn.pri:hover{opacity:.88;}

.stats{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.stats > div{padding:22px 20px 22px 0; display:flex; align-items:flex-start; gap:12px;}
.stats > div + div{border-left:1px solid var(--line); padding-left:22px;}
.stats .v{font-size:33px; font-weight:700; letter-spacing:-.035em; line-height:1; font-variant-numeric:tabular-nums;}
.stats .l{font-size:12px; color:var(--ink3); line-height:1.5;}

.sec{padding:46px 0 6px;}
.sh{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:18px; gap:16px;}
.sh a{font-size:13px; color:var(--ink3); white-space:nowrap;}
.sh a:hover{color:var(--accent);}

.egrid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
.ecard{display:block; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:20px; transition:border-color .16s, transform .16s, box-shadow .16s;}
.ecard:hover{border-color:#c9bfa9; transform:translateY(-2px); box-shadow:var(--shadow);}
.ew{font-size:15.5px; font-weight:700; margin-bottom:6px; letter-spacing:-.01em;}
.es{font-size:13px; color:var(--ink2); line-height:1.65; min-height:3.3em;}
.ego{margin-top:14px; font-size:13px; font-weight:600; color:var(--accent); display:flex; align-items:center; gap:5px;}
.eh{margin-top:6px; font-size:12px; color:var(--ink3); line-height:1.6;}

.dgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
.dcard{display:block; border:1px solid var(--line); background:var(--card); border-radius:var(--r); padding:16px; position:relative; overflow:hidden; transition:border-color .16s, transform .16s, box-shadow .16s;}
.dcard:hover{border-color:#c9bfa9; transform:translateY(-2px); box-shadow:var(--shadow);}
.dfig{height:52px; margin:-4px -4px 10px; display:block; width:calc(100% + 8px);}
.dcode{font-size:10.5px; color:var(--ink3); letter-spacing:.12em; font-weight:700;}
.dn{font-size:16.5px; font-weight:700; margin:1px 0 7px; letter-spacing:-.01em;}
.dd{font-size:12.5px; color:var(--ink2); line-height:1.65;}
.dm{margin-top:12px; font-size:11.5px; color:var(--ink3); font-variant-numeric:tabular-nums;}

.labgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
.lcard{display:block; background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; transition:border-color .16s, transform .16s, box-shadow .16s;}
.lcard:hover{border-color:#c9bfa9; transform:translateY(-2px); box-shadow:var(--shadow);}
.lthumb{height:104px; background:var(--paper2); position:relative; overflow:hidden; border-bottom:1px solid var(--line);}
.lthumb svg{width:100%; height:100%; display:block;}
.lbody{padding:14px 16px 16px;}
.ltag{font-size:10.5px; letter-spacing:.08em; color:var(--accent); font-weight:700;}
.lname{font-size:15px; font-weight:700; margin:4px 0 6px; letter-spacing:-.01em;}
.ldesc{font-size:12.5px; color:var(--ink2); line-height:1.6;}
.lmeta{margin-top:10px; font-size:11px; color:var(--ink3); display:flex; gap:10px;}

.startlist{list-style:none; counter-reset:s; border-top:1px solid var(--line);}
.startlist li{counter-increment:s; padding:18px 0 18px 44px; position:relative; border-bottom:1px solid var(--line); font-size:14px; color:var(--ink2); line-height:1.8;}
.startlist li::before{content:counter(s); position:absolute; left:0; top:16px; font-size:13px; font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums;}
.startlist strong{display:block; color:var(--ink); font-size:14.5px; margin-bottom:2px;}
.startlist a{border-bottom:1px solid #dcc4b8; color:var(--accent);}

/* ---------- 5 页头 / 列表 / 表格 ---------- */
.phead{padding:34px 0 26px; border-bottom:1px solid var(--line); margin-bottom:6px;}
.phead h1{margin-bottom:14px;}
.phead .lede{max-width:40em;}
.crumbs{padding:20px 0 0; font-size:12px; color:var(--ink3); display:flex; gap:7px; flex-wrap:wrap; align-items:center;}
.crumbs a:hover{color:var(--accent);}
.crumbs em{font-style:normal; color:var(--line);}

.chips{display:flex; gap:7px; flex-wrap:wrap; margin:18px 0 6px;}
.chips a{font-size:12.5px; padding:5px 12px; border:1px solid var(--line); background:var(--card); border-radius:100px; color:var(--ink2); transition:all .14s;}
.chips a:hover{border-color:var(--ink3); color:var(--ink);}
.chips a.on{background:var(--ink); border-color:var(--ink); color:var(--paper);}

.legend{display:flex; gap:16px; font-size:11.5px; color:var(--ink3); margin:4px 0 8px; flex-wrap:wrap;}
.legend i{display:inline-block; width:6px; height:6px; background:var(--accent); margin-right:3px; vertical-align:middle;}
.scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:var(--r); background:var(--card);}
.ktable{width:100%; border-collapse:collapse; font-size:13.5px; min-width:640px;}
.ktable th{text-align:left; padding:10px 12px; font-size:11.5px; color:var(--ink3); font-weight:600; border-bottom:1px solid var(--line); white-space:nowrap; background:var(--paper2); position:sticky; top:0;}
.ktable th.num, .ktable td.num{text-align:center; width:58px;}
.ktable td{padding:10px 12px; border-bottom:1px solid var(--line2); vertical-align:middle;}
.ktable tr:last-child td{border-bottom:none;}
.ktable tr:hover td{background:var(--paper2);}
.klink{font-weight:600; letter-spacing:-.005em;}
.klink:hover{color:var(--accent);}
.kid{font-size:10.5px; color:var(--ink3); margin-left:7px; font-variant-numeric:tabular-nums;}
.dim{color:var(--ink3); font-size:12.5px;}
.dot{display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--line); margin:0 1.5px;}
.dot.on{background:var(--accent);}
.tagx{display:inline-block; font-size:10.5px; padding:1px 6px; border-radius:4px; background:var(--paper2); color:var(--ink3); margin-right:4px;}

.klist{margin-top:14px;}
.krow{display:block; padding:16px 0; border-bottom:1px solid var(--line);}
.krow:hover .kn{color:var(--accent);}
.kh{display:flex; align-items:baseline; gap:9px;}
.kn{font-size:16px; font-weight:700; letter-spacing:-.01em;}
.khs{font-size:11.5px; color:var(--ink3); margin-left:auto; font-variant-numeric:tabular-nums;}
.kw{font-size:13px; color:var(--ink2); line-height:1.7; margin:5px 0 9px; max-width:40em;}

.dep{display:flex; gap:14px; flex-wrap:wrap;}
.di{display:inline-flex; align-items:center; gap:5px;}
.rn{font-size:11px; color:var(--ink3);}
.bars{display:inline-flex; gap:2px;}
.bars i{display:inline-block; width:13px; height:3.5px; background:var(--line); border-radius:1px;}
.bars i.f{background:var(--accent);}
.lv{font-size:11px; color:var(--ink2); min-width:2.4em;}
.depthbox{display:grid; grid-template-columns:repeat(2,1fr); gap:10px 26px; margin:14px 0 6px; max-width:480px; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:18px 20px;}
.drow{display:flex; align-items:center; gap:9px;}
.drow .rn{min-width:5em;}

/* 维度分组块 */
.vgroup{margin-top:26px;}
.vgh{display:flex; align-items:baseline; gap:10px; padding-bottom:9px; border-bottom:2px solid var(--ink); margin-bottom:2px;}
.vgh h2{font-size:18px;}
.vgh .c{font-size:11.5px; color:var(--ink3); font-variant-numeric:tabular-nums;}
.vgh .lv{font-size:11px; color:var(--ink3);}
.vmeta{font-size:12.5px; color:var(--ink3); margin-top:8px;}
.vlist{display:grid; grid-template-columns:1fr 1fr; gap:0 32px; margin-top:6px;}
.vitem{display:flex; align-items:baseline; gap:8px; padding:11px 0; border-bottom:1px solid var(--line2); font-size:13.5px;}
.vitem:hover .vn{color:var(--accent);}
.vitem .vid{font-size:10.5px; color:var(--ink3); font-variant-numeric:tabular-nums; width:26px; flex:none;}
.vitem .vn{font-weight:600;}
.vitem .vh{margin-left:auto; font-size:11.5px; color:var(--ink3); font-variant-numeric:tabular-nums;}

/* ---------- 6 知识点 ---------- */
.kp{padding-top:24px; max-width:var(--prose);}
.kp h1{margin:10px 0 14px; font-size:clamp(26px,3.6vw,36px);}
.kp .lede{font-size:16.5px; color:var(--ink); line-height:1.85;}
.kmeta{display:flex; gap:8px; flex-wrap:wrap; margin:18px 0 4px;}
.kmeta span{font-size:11.5px; padding:3px 9px; border-radius:5px; background:var(--paper2); color:var(--ink3);}
.what, .errs{margin:8px 0 0; padding-left:0; list-style:none;}
.what li{position:relative; padding-left:20px; margin:9px 0; font-size:14.5px; line-height:1.8;}
.what li::before{content:""; position:absolute; left:3px; top:10px; width:5px; height:5px; background:var(--accent);}
.errs li{position:relative; padding-left:21px; margin:10px 0; font-size:14px; line-height:1.8; color:var(--ink2);}
.errs li::before{content:"×"; position:absolute; left:2px; top:-1px; color:#b04a3a; font-weight:700;}
.verify{background:var(--card); border:1px solid var(--line); border-left:3px solid var(--brand); border-radius:0 8px 8px 0; padding:14px 18px; font-size:14px; line-height:1.8;}
figcaption{font-size:11.5px; color:var(--ink3); margin-top:7px; text-align:center;}
.kfig{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px 12px; margin:22px 0;}
.kfig svg{width:100%; height:132px; display:block;}
.knav{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:42px 0 0; padding-top:20px; border-top:1px solid var(--line);}
.knav a{display:block; padding:12px 15px; background:var(--card); border:1px solid var(--line); border-radius:9px; font-size:13.5px; font-weight:600; line-height:1.5; transition:border-color .15s;}
.knav a:hover{border-color:var(--ink3);}
.knav span{display:block; font-size:11px; color:var(--ink3); font-weight:400; margin-bottom:3px; letter-spacing:.06em;}
.knav .nx{text-align:right;}

/* ---------- 7 实验台 ---------- */
.labhead{padding:22px 0 0;}
.labhead h1{margin:10px 0 12px;}
.labwrap{display:grid; grid-template-columns:1fr 300px; gap:20px; margin:22px 0 0; align-items:start;}
.labstage{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:10px; box-shadow:var(--shadow);}
.labstage canvas{width:100%; height:360px; display:block; border-radius:6px; touch-action:none;}
.labside{display:flex; flex-direction:column; gap:12px;}
.panel{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:15px 16px;}
.pt{font-size:10.5px; letter-spacing:.12em; color:var(--ink3); font-weight:700; margin-bottom:11px;}
.ctrl{margin-bottom:14px;}
.ctrl:last-child{margin-bottom:0;}
.ctrl .cl{display:flex; justify-content:space-between; font-size:12px; color:var(--ink2); margin-bottom:6px; font-variant-numeric:tabular-nums;}
.ctrl .cl b{font-weight:600; color:var(--ink);}
input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:3px; border-radius:2px; background:var(--line); outline:none; cursor:pointer;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:15px; height:15px; border-radius:50%; background:var(--accent); border:2px solid var(--card); box-shadow:0 1px 4px rgba(0,0,0,.25); cursor:grab;}
input[type=range]::-moz-range-thumb{width:13px; height:13px; border-radius:50%; background:var(--accent); border:2px solid var(--card); cursor:grab;}
.seg{display:flex; gap:4px; flex-wrap:wrap;}
.seg button{font-size:11.5px; padding:5px 9px; border-radius:6px; border:1px solid var(--line); color:var(--ink2); background:var(--card);}
.seg button.on{background:var(--ink); border-color:var(--ink); color:var(--paper);}
.readouts{display:grid; grid-template-columns:1fr 1fr; gap:10px 14px;}
.ro{display:flex; flex-direction:column; gap:1px;}
.ro .rl{font-size:10.5px; color:var(--ink3);}
.ro .ro-v{font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.01em;}
.ro .ok{color:var(--good);} .ro .mid{color:var(--amber);} .ro .bad{color:#b04a3a;}
.labnote{margin-top:18px; font-size:13px; color:var(--ink3); line-height:1.75;}
.labsec{max-width:var(--prose); margin-top:30px;}
.labsec h3{margin-top:26px;}
.labsec p{font-size:14.5px; line-height:1.85; color:var(--ink2); margin:8px 0;}
.labsec ul{padding-left:18px; margin:8px 0;}
.labsec li{font-size:14px; line-height:1.8; color:var(--ink2); margin:6px 0;}
.labsec .warnbox{margin:22px 0;}
.taskbox{border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:0 9px 9px 0; background:var(--card); padding:15px 18px; margin:20px 0;}
.taskbox .tt{font-size:10.5px; letter-spacing:.12em; color:var(--accent); font-weight:700; margin-bottom:6px;}
.taskbox p{font-size:14px; line-height:1.8; margin:0;}

/* ---------- 8 其余页面 ---------- */
.pgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:20px;}
.pcard{display:block; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:20px 22px; transition:border-color .16s, transform .16s, box-shadow .16s;}
.pcard:hover{border-color:#c9bfa9; transform:translateY(-2px); box-shadow:var(--shadow);}
.pn{font-size:18px; font-weight:700; margin-bottom:7px; letter-spacing:-.01em;}
.pd{font-size:12.5px; color:var(--ink2); line-height:1.7; min-height:4.6em;}
.pm{font-size:11.5px; color:var(--ink3); margin-top:11px; font-variant-numeric:tabular-nums;}
.stages{border-top:1px solid var(--line); margin-top:10px;}
.stage{display:flex; gap:18px; padding:17px 0; border-bottom:1px solid var(--line);}
.sno{flex:none; width:62px; font-size:11.5px; font-weight:700; color:var(--accent); padding-top:3px;}
.sbody{flex:1;}
.schips{display:flex; flex-wrap:wrap; align-items:center; gap:5px 9px; font-size:14px; line-height:1.9;}
.schips .grp{display:inline-flex; flex-wrap:wrap; align-items:center; gap:5px;}
.schips a{border-bottom:1px solid #dcc4b8;}
.schips a:hover{color:var(--accent);}
.schips em{font-style:normal; color:var(--line); margin:0 2px;}
.schips .or{font-size:11.5px; color:var(--ink3);}
.sh2{font-size:11.5px; color:var(--ink3); margin-top:5px;}
.warnbox{background:var(--accent2); border-left:3px solid var(--accent); border-radius:0 9px 9px 0; padding:15px 20px; margin:24px 0;}
.wt{font-size:10.5px; letter-spacing:.12em; color:var(--accent); font-weight:700; margin-bottom:5px;}
.warnbox p:last-child{font-size:14px; line-height:1.8; color:var(--ink2);}

.jlist{margin-top:6px;}
.job{padding:26px 0; border-bottom:1px solid var(--line);}
.jh{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.jh h2{font-size:19px;}
.pay{font-size:14.5px; font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums;}
.jmeta{display:flex; gap:12px; font-size:12px; color:var(--ink3); margin:5px 0 11px; flex-wrap:wrap;}
.jd{font-size:14px; line-height:1.8;}
.jrow{display:flex; gap:14px; margin-top:11px; align-items:flex-start;}
.jl{flex:none; width:86px; font-size:11.5px; color:var(--ink3); padding-top:4px;}
.jneed{font-size:13px; line-height:2; color:var(--ink2);}
.jneed a{border-bottom:1px solid var(--line);}
.jneed a:hover{color:var(--accent); border-color:#dcc4b8;}
.jneed span{margin-right:7px;}
.jrow p{font-size:13px; line-height:1.75; color:var(--ink2);}
.jnote{margin-top:11px; font-size:12.5px; line-height:1.75; color:var(--ink3); padding-left:100px;}

.prgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:6px;}
.pr{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:19px 21px 21px; transition:border-color .16s, box-shadow .16s;}
.pr:hover{border-color:#c9bfa9; box-shadow:var(--shadow);}
.prh{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:9px;}
.plv{font-size:10.5px; padding:2px 8px; border-radius:4px; font-weight:600;}
.l1{background:var(--paper2); color:var(--ink2);}
.l2{background:var(--accent2); color:var(--accent);}
.l3{background:#f4ece0; color:var(--amber);}
@media (prefers-color-scheme: dark){ .l3{background:#2b2114;} }
.pmeta{font-size:11px; color:var(--ink3); font-variant-numeric:tabular-nums;}
.pr h2{font-size:16px; margin-bottom:7px; line-height:1.4;}
.pd2{font-size:13px; color:var(--ink2); line-height:1.7;}
.pblock{margin-top:13px;}
.pl{font-size:10.5px; color:var(--ink3); letter-spacing:.08em; margin-bottom:3px;}
.pv{font-size:12.5px; color:var(--ink2); line-height:1.65;}
.pout{list-style:none; font-size:12.5px; color:var(--ink2); line-height:1.7;}
.pout li{position:relative; padding-left:13px; margin:3px 0;}
.pout li::before{content:"—"; position:absolute; left:0; color:var(--ink3);}
.ptip{margin-top:13px; padding-top:11px; border-top:1px solid var(--line2); font-size:12px; color:var(--ink3); line-height:1.7;}

.quiz{margin-top:6px;}
.q{padding:22px 0; border-bottom:1px solid var(--line); max-width:var(--prose);}
.qn{font-size:11px; font-weight:700; color:var(--accent); letter-spacing:.1em;}
.qt{font-size:16px; font-weight:600; line-height:1.65; margin:5px 0 11px;}
details{border:1px solid var(--line); background:var(--card); border-radius:9px; overflow:hidden;}
summary{cursor:pointer; padding:10px 15px; font-size:13px; font-weight:600; color:var(--ink2); list-style:none;}
summary::-webkit-details-marker{display:none;}
summary::before{content:"+"; display:inline-block; width:15px; color:var(--accent); font-weight:700;}
details[open] summary::before{content:"−";}
details[open] summary{border-bottom:1px solid var(--line2);}
.qa{padding:13px 17px 15px; font-size:13.5px; line-height:1.85; color:var(--ink2);}
.qgap{margin-top:9px; font-size:12px; color:var(--ink3); line-height:1.7;}
.qgap a{color:var(--accent); border-bottom:1px solid #dcc4b8;}
.score{margin-top:32px; max-width:var(--prose);}
.st{font-size:11px; letter-spacing:.1em; color:var(--ink3); margin-bottom:9px;}
.score table{width:100%; border-collapse:collapse; font-size:13px; background:var(--card); border:1px solid var(--line); border-radius:9px; overflow:hidden;}
.score th{text-align:left; padding:9px 12px; font-size:11.5px; color:var(--ink3); border-bottom:1px solid var(--line); background:var(--paper2);}
.score td{padding:10px 12px; border-bottom:1px solid var(--line2); line-height:1.7;}
.score td.num{font-variant-numeric:tabular-nums; font-weight:700; width:66px;}
.score a{color:var(--accent); border-bottom:1px solid #dcc4b8;}

.gloss{display:grid; grid-template-columns:repeat(2,1fr); gap:0 40px; margin-top:6px;}
.gitem{padding:17px 0; border-bottom:1px solid var(--line);}
.gt{font-size:15.5px; font-weight:700; margin-bottom:5px;}
.gs{font-size:13px; color:var(--ink2); line-height:1.75;}
.gl{margin-top:7px; font-size:12.5px; color:var(--accent); line-height:1.65;}

.pits{list-style:none; counter-reset:p; margin-top:6px; max-width:var(--prose);}
.pits li{counter-increment:p; position:relative; padding:19px 0 19px 40px; border-bottom:1px solid var(--line);}
.pits li::before{content:counter(p); position:absolute; left:0; top:19px; font-size:13px; font-weight:700; color:var(--accent);}
.pt2{font-size:15.5px; font-weight:700; margin-bottom:4px;}
.px{font-size:13.5px; color:var(--ink2); line-height:1.8;}

.res{margin-top:6px;}
.rgroup{padding:22px 0; border-bottom:1px solid var(--line);}
.rgroup h2{font-size:16px; margin-bottom:11px;}
.rgroup ul{list-style:none;}
.rgroup li{display:flex; gap:16px; padding:6px 0; font-size:13.5px; line-height:1.7;}
.rn2{flex:none; width:230px; font-weight:600;}
.rd{color:var(--ink2); font-size:13px;}

.years{margin-top:6px;}
.yr{display:flex; gap:24px; padding:19px 0; border-bottom:1px solid var(--line);}
.yy{flex:none; width:70px; font-size:12.5px; font-weight:700; color:var(--accent); padding-top:2px;}
.yt{font-size:15.5px; font-weight:700; margin-bottom:4px;}
.yx{font-size:13.5px; color:var(--ink2); line-height:1.8; max-width:44em;}

.about{max-width:var(--prose); padding-top:8px;}
.about h3{margin-top:30px;}
.about p{font-size:14.5px; line-height:1.85; color:var(--ink2); margin:9px 0;}
.about ul{padding-left:20px; margin:9px 0;}
.about li{font-size:14px; line-height:1.85; color:var(--ink2); margin:6px 0;}
.about strong{color:var(--ink);}

/* ---------- 8.5 动图 SVG ---------- */
.figGrid line, .figAxes line{stroke:var(--line);}
.flowDash{stroke-dasharray:5 9; animation:flow 1.6s linear infinite;}
@keyframes flow{to{stroke-dashoffset:-28;}}
.spin{transform-box:fill-box; transform-origin:center; animation:spin 9s linear infinite;}
.spin.rev{animation-direction:reverse;}
@keyframes spin{to{transform:rotate(360deg);}}
.pulse{animation:pulseA 2.4s ease-in-out infinite;}
@keyframes pulseA{0%,100%{opacity:.25;}50%{opacity:1;}}
.fade2{animation:pulseA 2.4s ease-in-out infinite .8s;}
.fade3{animation:pulseA 2.4s ease-in-out infinite 1.6s;}
.fade4{animation:pulseA 2.4s ease-in-out infinite 2.4s;}
.blink{animation:pulseA 1.1s ease-in-out infinite;}
.sweep{transform-origin:center; animation:sweepA 4s linear infinite;}
@keyframes sweepA{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){
  .flowDash,.spin,.pulse,.fade2,.fade3,.fade4,.blink,.sweep,.bm-arm,.bm-dot{animation:none;}
}

/* ---------- 8.6 页脚 ---------- */
.bot{margin-top:60px; padding:28px 0 48px; border-top:1px solid var(--line); font-size:12.5px; color:var(--ink3);}
.fgrid{display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap;}
.f1{font-size:13px; font-weight:600; color:var(--ink2);}
.f2{margin-top:2px;}
.fnav{display:flex; gap:13px; flex-wrap:wrap; max-width:560px;}
.fnav a:hover{color:var(--accent);}
.f3{margin-top:16px; font-size:11.5px; line-height:1.7;}

/* ---------- 9 响应式 ---------- */
@media (max-width:1024px){
  .hero{grid-template-columns:1fr; gap:26px; padding:34px 0 30px;}
  .hero-fig{order:-1; height:190px; max-width:420px; margin:0 auto;}
  .labwrap{grid-template-columns:1fr;}
  .labstage canvas{height:320px;}
  .labside{flex-direction:row; flex-wrap:wrap;}
  .panel{flex:1 1 260px;}
}
@media (max-width:880px){
  .nav{display:none;}
  .burger{display:inline-flex;}
  .kbd-btn span{display:none;}
  .kbd-btn kbd{display:none;}
  .kbd-btn{width:32px; justify-content:center; padding:0;}
  .bar{gap:6px; padding:0 18px;}
  .brand{margin-right:auto;}
  .dgrid, .egrid, .labgrid{grid-template-columns:repeat(2,1fr);}
  .vlist{grid-template-columns:1fr;}
}
@media (max-width:760px){
  main, .wrap{padding-left:18px; padding-right:18px;}
  .bar{padding:0 16px;}
  :root{--head:58px;}
  h1{font-size:clamp(26px,7vw,34px);}
  .lede{font-size:15.5px;}
  .stats{grid-template-columns:repeat(2,1fr);}
  .stats > div{padding:16px 10px 16px 0;}
  .stats > div:nth-child(3){border-left:none; padding-left:0; border-top:1px solid var(--line);}
  .stats > div:nth-child(4){border-top:1px solid var(--line);}
  .stats .v{font-size:26px;}
  .egrid, .dgrid, .pgrid, .prgrid, .gloss, .labgrid{grid-template-columns:1fr;}
  .es{min-height:0;}
  .depthbox{grid-template-columns:1fr;}
  .knav{grid-template-columns:1fr;}
  .knav .nx{text-align:left;}
  .stage{gap:10px;}
  .sno{width:50px;}
  .job{padding:20px 0;}
  .jrow{flex-direction:column; gap:3px;}
  .jl{width:auto;}
  .jnote{padding-left:0;}
  .yr{gap:12px;}
  .yy{width:56px;}
  .rgroup li{flex-direction:column; gap:1px;}
  .rn2{width:auto;}
  .labstage canvas{height:270px;}
  .labhead h1{font-size:clamp(24px,6.6vw,30px);}
  .mega{display:none;}
  .pd{min-height:0;}
  .hero-cta .btn{flex:1 1 auto; justify-content:center;}
  .search{padding:8vh 12px 12px;}
}
@media (max-width:400px){
  .stats{grid-template-columns:1fr 1fr;}
  .dgrid{grid-template-columns:1fr;}
}

/* ---- 架构拆解 / 大小脑 新增 ---- */
.tblwrap{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:var(--r); background:var(--card); margin:16px 0;}
.tblwrap table{width:100%; border-collapse:collapse; font-size:13.5px; min-width:640px;}
.tblwrap th{font-size:11.5px; text-transform:letter-spacing:.02em; color:var(--ink3); font-weight:600; text-align:left; padding:10px 14px; border-bottom:1px solid var(--line); background:var(--paper2); white-space:nowrap;}
.tblwrap td{padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:top; color:var(--ink2); line-height:1.6;}
.tblwrap tr:last-child td{border-bottom:none;}
.tblwrap td strong{color:var(--ink);}
.tblwrap a{color:var(--accent); border-bottom:1px solid #dcc4b8;}

.job h2 .ic{width:20px; height:20px; color:var(--accent); margin-right:4px; vertical-align:-3px;}
.lay{display:grid; grid-template-columns:64px 1fr; gap:7px 16px; margin:14px 0 4px;}
.lay .jl{color:var(--accent); font-size:12.5px; font-weight:600; padding-top:3px;}
.lay .lv2{margin:0; font-size:13.8px; line-height:1.75; color:var(--ink2);}
.inslist{margin:0; padding:0; list-style:none; font-size:13.5px; color:var(--ink2); line-height:1.75;}
.inslist li{position:relative; padding-left:16px; margin:5px 0;}
.inslist li::before{content:""; position:absolute; left:2px; top:.62em; width:6px; height:1.5px; background:var(--ink3); border-radius:1px;}
.insightbox{margin:14px 0; padding:14px 18px; background:var(--paper2); border-left:3px solid var(--accent); border-radius:0 10px 10px 0;}
.insightbox .wt2{font-size:11.5px; font-weight:700; letter-spacing:.06em; color:var(--accent); margin:0 0 6px;}

.mdlgrid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:20px;}
.mdl{border:1px solid var(--line); border-radius:14px; background:var(--card); padding:20px 22px; scroll-margin-top:90px;}
.mh{display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap;}
.mh h2{font-size:20px; margin:0;}
.morg{font-size:12px; color:var(--ink3); margin:0;}
.mtags{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 12px;}
.tag{display:inline-block; font-size:11px; padding:2.5px 9px; border-radius:20px; background:var(--paper2); color:var(--ink2); border:1px solid var(--line);}
.tag.topen{background:rgba(31,107,88,.09); color:#1f6b58; border-color:rgba(31,107,88,.25);}
.tag.tclose{background:rgba(176,74,58,.07); color:#a8463a; border-color:rgba(176,74,58,.22);}
.mblurb{font-size:13.8px; line-height:1.8; color:var(--ink2); margin:0 0 10px;}
.mnote{font-size:11px; color:var(--ink3); line-height:1.6; margin:0;}
.mdl .chips a{font-size:11.5px;}

@media (max-width:860px){
  .mdlgrid{grid-template-columns:1fr;}
  .lay{grid-template-columns:52px 1fr; gap:5px 12px;}
  .tblwrap{margin:12px 0;}
}

/* ---- 新板块配图 ---- */
.cofigwrap{border:1px solid var(--line); border-radius:14px; background:var(--card); padding:16px 18px 10px; margin:18px 0;}
.cofigwrap figcaption{font-size:11.5px; color:var(--ink3); line-height:1.6; margin-top:6px;}
.cofig{width:100%; height:auto; display:block;}
.plainbox{margin:16px 0; padding:14px 18px; background:rgba(31,107,88,.06); border-left:3px solid var(--brand); border-radius:0 10px 10px 0;}
.plainbox .wt2{color:var(--brand); font-size:11.5px; font-weight:700; letter-spacing:.06em; margin:0 0 6px;}
.plainbox p{margin:0; font-size:14px; line-height:1.85; color:var(--ink2);}
.mplain{font-size:14px; font-weight:600; color:var(--ink); margin:0 0 8px; line-height:1.7;}

/* ---- 新板块配图 ---- */
.cofigwrap{border:1px solid var(--line); border-radius:14px; background:var(--card); padding:16px 18px 10px; margin:18px 0;}
.cofigwrap figcaption{font-size:11.5px; color:var(--ink3); line-height:1.6; margin-top:6px;}
.cofig{width:100%; height:auto; display:block;}
.plainbox{margin:16px 0; padding:14px 18px; background:rgba(31,107,88,.06); border-left:3px solid var(--brand); border-radius:0 10px 10px 0;}
.plainbox .wt2{color:var(--brand); font-size:11.5px; font-weight:700; letter-spacing:.06em; margin:0 0 6px;}
.plainbox p{margin:0; font-size:14px; line-height:1.85; color:var(--ink2);}
.mplain{font-size:14px; font-weight:600; color:var(--ink); margin:0 0 8px; line-height:1.7;}