/* 码上问学 · 图示册公共样式
 * 供 JS / 数据标注 / Linux 图示册共用；配色与 CSS 图示册一致（宣纸底 + 陶土红主色 + 发丝线）。
 */
:root{
  --brand:#b04a2c; --accent:#b06a24; --ink:#2b2520; --ink2:#4a423a;
  --muted:#736a5b; --line:#e7ddca; --surface:#f5efe2; --paper:#f7f2e8;
  --green:#5e7a46; --teal:#3f6e6a; --plum:#7c4a63;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:"PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  color:var(--ink); background:#fdfbf6; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:"SF Mono",Menlo,Consolas,monospace;}

/* 顶栏 */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(253,251,246,.94); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  padding:12px 24px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15.5px;}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--brand);flex:none;}
.brand-sub{font-weight:400;font-size:12.5px;color:var(--muted);}
.spacer{flex:1;}
.btn{
  font-size:12.5px; color:var(--ink2); text-decoration:none;
  border:1px solid var(--line); background:#fff;
  padding:6px 12px; border-radius:8px; cursor:pointer;
  transition:border-color .18s, color .18s, transform .18s;
}
.btn:hover{border-color:var(--brand); color:var(--brand); transform:translateY(-1px);}
.btn:focus-visible{outline:2px solid var(--brand); outline-offset:2px;}

/* 目录 */
.toc{
  position:sticky; top:57px; z-index:40;
  background:rgba(253,251,246,.96); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
  padding:9px 24px; display:flex; gap:8px; overflow-x:auto; white-space:nowrap;
}
.toc a{
  font-size:12.5px; color:var(--ink2); text-decoration:none;
  padding:4px 10px; border:1px solid var(--line); border-radius:999px; background:#fff;
}
.toc a:hover{border-color:var(--brand); color:var(--brand);}
.toc::-webkit-scrollbar{height:5px;}
.toc::-webkit-scrollbar-thumb{background:var(--line); border-radius:3px;}

main{max-width:1080px; margin:0 auto; padding:28px 24px 80px;}

.intro h1{font-size:25px; margin:6px 0 10px; letter-spacing:.01em;}
.intro p{font-size:14.5px; color:var(--ink2); margin:8px 0;}
.intro .tip{
  font-size:13.5px; color:var(--muted); background:var(--paper);
  border-left:3px solid var(--accent); padding:9px 14px; border-radius:0 8px 8px 0; margin-top:14px;
}

h2.sec{
  font-size:18px; margin:42px 0 6px; padding-bottom:9px;
  border-bottom:1px solid var(--line); display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
}
h2.sec:first-child{margin-top:18px;}
h2.sec .k{font-size:12px; font-weight:600; color:#fff; background:var(--brand); padding:3px 8px; border-radius:6px;}
h2.sec .sub{font-size:12.5px; font-weight:400; color:var(--muted);}

.fig{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:16px 18px 14px; margin:18px 0 20px;
  transition:border-color .2s, transform .2s, box-shadow .2s;
}
.fig:hover{border-color:#d8c8ae; transform:translateY(-3px); box-shadow:0 6px 18px rgba(43,37,32,.07);}
.fig-head{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  border-bottom:1px dashed var(--line); padding-bottom:9px; margin-bottom:12px;}
.fig-no{font-family:"SF Mono",Menlo,monospace; font-size:11.5px; font-weight:700; color:#fff;
  background:var(--brand); padding:3px 8px; border-radius:6px; letter-spacing:.02em;}
.fig-title{font-size:15px; font-weight:700;}
.fig-src{margin-left:auto; font-size:11.5px; color:var(--muted);}
.fig svg{display:block; width:100%; height:auto;}
.fig-say{
  margin:13px 0 0; font-size:13.5px; color:var(--ink2);
  background:var(--paper); border-left:3px solid var(--accent);
  padding:9px 13px; border-radius:0 8px 8px 0;
}
.fig-say b{color:var(--brand);}
.fig-say .mono{background:#f0e9da; padding:1px 5px; border-radius:4px; font-size:12.5px;}

/* 可交互演示（若某图带 range 滑块） */
.demo-wrap{background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:16px;}
.demo-row{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start;}
.demo-col{display:flex; flex-direction:column; align-items:center; gap:7px;}
.demo-cap{font-size:12.5px; color:var(--muted);}
.demo-cap b{color:var(--ink);}
.demo-box{
  box-sizing:content-box;
  width:200px; padding:10px; font-size:11.5px; text-align:center;
  border:2px solid var(--brand); background:#fdf5e8; color:var(--ink2);
}
.demo-box.b{box-sizing:border-box; border-color:var(--teal); background:#eef5f4;}
.demo-num{font-family:"SF Mono",Menlo,monospace; font-size:12px; color:var(--brand);}
.demo-num.b{color:var(--teal);}
.demo-ctrl{margin-top:14px; display:flex; align-items:center; gap:12px; justify-content:center; flex-wrap:wrap;}
.demo-ctrl label{font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:8px;}
.demo-ctrl b{color:var(--brand); font-family:"SF Mono",Menlo,monospace;}
input[type=range]{width:220px; accent-color:var(--brand);}

@media (max-width:760px){
  .demo-row{grid-template-columns:1fr;}
  .demo-box{width:100%; max-width:200px;}
  .fig-src{margin-left:0; flex-basis:100%;}
  main{padding:20px 14px 60px;}
}
@media print{
  .topbar,.toc,.no-print{display:none !important;}
  body{background:#fff;}
  .fig{break-inside:avoid; page-break-inside:avoid; border-color:#ccc;}
  h2.sec{break-after:avoid;}
}