/* ============================================================
   烛龙智元 · 文档 / 技能页样式(/docs、/skill 共用)
   现代文档站:顶栏 + 侧边目录(滚动高亮)+ 阅读栏。浅色单色品牌语言。
   ============================================================ */
:root{
  --red:#A8201A; --red8:#7A1714; --red05:#FBEFEE; --red10:#F4DCDA; --orange:#E94E1B;
  --ink:#1A1A1A; --ink1:#2B2B2B; --ink2:#5C5C5C; --ink3:#8A8580; --ink4:#BFB9B0;
  --bg:#FAF7F2; --bg2:#F3EEE6; --bg3:#EAE3D8; --paper:#FFFFFF; --line:#E7E1D6; --line2:#EFEAE1;
  --serif:"Noto Serif CJK SC","Noto Serif SC","Source Han Serif SC","Songti SC",serif;
  --sans:"Inter","Noto Sans CJK SC","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --mono:"JetBrains Mono","SF Mono","Menlo","Noto Sans Mono CJK SC",monospace;
  --nav-h:58px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--bg); color:var(--ink1); font-family:var(--sans);
  font-size:15px; line-height:1.72; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}

/* ---------------- 顶栏 ---------------- */
.topnav{position:sticky; top:0; z-index:50; height:var(--nav-h); display:flex; align-items:center;
  gap:20px; padding:0 24px; background:rgba(255,255,255,.88); backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid var(--line);}
.topnav .nb{display:flex; align-items:center; gap:10px; text-decoration:none; margin-right:auto;}
.topnav .nb img{width:30px; height:30px; object-fit:contain;}
.topnav .nb .zh{font-family:var(--serif); font-weight:900; font-size:16px; color:var(--ink); letter-spacing:.02em; line-height:1;}
.topnav .nb .en{font-family:"Inter",var(--sans); font-size:9px; letter-spacing:.26em; color:var(--red); font-weight:600; margin-top:3px;}
.topnav .nl{display:flex; align-items:center; gap:4px;}
.topnav .nl a{display:inline-flex; align-items:center; gap:6px; text-decoration:none; font-family:var(--sans);
  font-size:13.5px; color:var(--ink2); padding:7px 12px; border-radius:7px; transition:background .15s,color .15s;}
.topnav .nl a:hover{background:var(--bg2); color:var(--ink1);}
.topnav .nl a.active{color:var(--red); background:var(--red05); font-weight:600;}
.topnav .nl a svg{width:15px; height:15px;}
.nav-toggle{display:none; appearance:none; background:none; border:1px solid var(--line); border-radius:7px;
  width:36px; height:32px; cursor:pointer; color:var(--ink1); align-items:center; justify-content:center;}
.nav-toggle svg{width:18px; height:18px;}

/* ---------------- 布局 ---------------- */
.layout{max-width:1180px; margin:0 auto; display:grid; grid-template-columns:248px minmax(0,1fr); gap:48px; padding:0 24px;}
.sidebar{position:sticky; top:var(--nav-h); align-self:start; height:calc(100vh - var(--nav-h));
  overflow-y:auto; padding:30px 8px 40px 0;}
.sidebar .toc-title{font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink3); padding:0 12px; margin-bottom:10px;}
.toc{list-style:none; margin:0; padding:0; font-size:13.5px;}
.toc a{display:block; text-decoration:none; color:var(--ink2); padding:5px 12px; border-left:2px solid transparent;
  border-radius:0 4px 4px 0; line-height:1.45; transition:color .12s,background .12s,border-color .12s;}
.toc a:hover{color:var(--ink1); background:var(--bg2);}
.toc a.h3{padding-left:26px; font-size:13px; color:var(--ink3);}
.toc a.active{color:var(--red); border-left-color:var(--red); font-weight:600; background:var(--red05);}

.content{min-width:0; padding:36px 0 120px; max-width:780px;}

/* ---------------- 文章排版 ---------------- */
.content h1,.content h2,.content h3,.content h4{font-family:var(--serif); color:var(--ink); line-height:1.25;
  letter-spacing:-0.01em; scroll-margin-top:calc(var(--nav-h) + 16px); position:relative;}
.content h1{font-size:36px; font-weight:700; margin:0 0 6px;}
.content > h1:first-child{margin-bottom:10px;}
.content h2{font-size:25px; font-weight:700; margin:48px 0 16px; padding-top:22px; border-top:1px solid var(--line);}
.content h3{font-size:18px; font-weight:600; margin:30px 0 10px; color:var(--ink1);}
.content h4{font-size:15.5px; font-weight:600; margin:22px 0 8px; color:var(--ink1);}
.content p{margin:12px 0;}
.content a{color:var(--red); text-decoration:none; border-bottom:1px solid var(--red10); transition:border-color .15s;}
.content a:hover{border-bottom-color:var(--red);}
.content strong{color:var(--ink); font-weight:700;}
.content ul,.content ol{padding-left:22px; margin:12px 0;}
.content li{margin:6px 0;}
.content hr{border:0; border-top:1px solid var(--line); margin:40px 0;}
/* 标题悬停锚点 */
.anchor{position:absolute; left:-22px; top:0; color:var(--ink4); opacity:0; text-decoration:none; font-weight:400;
  border:0; padding-right:6px; transition:opacity .12s;}
.content h2:hover .anchor,.content h3:hover .anchor{opacity:1;}
.anchor:hover{color:var(--red);}

/* lede / 副标题 */
.lede{font-family:var(--sans); font-size:17px; line-height:1.6; color:var(--ink2); margin:6px 0 8px; max-width:62ch;}
.eyebrow{display:inline-block; font-family:"Inter",var(--sans); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--red); font-weight:600; margin-bottom:6px;}

/* 行内 code */
.content :not(pre) > code{font-family:var(--mono); font-size:.875em; background:var(--bg2); color:var(--red8);
  padding:2px 6px; border-radius:4px; border:1px solid var(--line2);}

/* 引用 / 提示框 */
.content blockquote{margin:18px 0; padding:14px 18px; background:var(--paper); border:1px solid var(--line);
  border-left:3px solid var(--red); border-radius:0 8px 8px 0; color:var(--ink2); font-size:14px;}
.content blockquote p{margin:6px 0;}

/* 表格 */
.content table{border-collapse:separate; border-spacing:0; width:100%; margin:18px 0; font-size:13.5px;
  border:1px solid var(--line); border-radius:8px; overflow:hidden;}
.content th,.content td{padding:10px 14px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line2);}
.content th{background:var(--bg2); font-family:var(--sans); font-weight:600; color:var(--ink1);
  font-size:12.5px; letter-spacing:.02em;}
.content tr:last-child td{border-bottom:0;}
.content tbody tr:nth-child(even) td{background:#FCFAF6;}

/* ---------------- 代码块(头部栏 + 复制)---------------- */
.content pre{font-family:var(--mono); font-size:12.5px; line-height:1.65; background:var(--paper); color:var(--ink1);
  padding:16px 18px; margin:0; overflow-x:auto;}
.content pre code{background:none; padding:0; border:0; color:inherit; font-size:inherit;}
.codeblock{border:1px solid var(--line); border-radius:10px; overflow:hidden; margin:18px 0;
  box-shadow:0 1px 2px rgba(43,43,43,.04);}
.codeblock .codeblock-bar{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:8px 10px 8px 16px; background:var(--bg2); border-bottom:1px solid var(--line);}
.codeblock .cb-lang{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink3);}
.codeblock .cb-lang::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--red); opacity:.55;}
.copy-btn{display:inline-flex; align-items:center; gap:6px; font-family:var(--sans); font-size:12px; line-height:1;
  padding:5px 11px; border:1px solid var(--line); background:var(--paper); color:var(--ink2); border-radius:7px;
  cursor:pointer; white-space:nowrap; transition:border-color .15s,color .15s,background .15s;}
.copy-btn:hover{border-color:var(--red); color:var(--red);}
.copy-btn.ok{background:var(--red); border-color:var(--red); color:#fff;}
.copy-btn svg{width:13px; height:13px;}

/* 安装高亮卡:技能页的主操作,做成醒目的快速开始卡 */
.install-hero{position:relative; margin:22px 0 14px; padding:22px 24px 22px; background:var(--paper);
  border:1px solid var(--line); border-top:3px solid var(--red); border-radius:14px;
  box-shadow:0 10px 34px -18px rgba(168,32,26,.36);}
.install-hero .ih-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:4px;}
.install-hero h2{margin:0; padding:0; border:0; font-size:23px;}
.install-hero h2 .anchor{display:none;}
.ih-badge{display:inline-flex; align-items:center; gap:6px; font-family:"Inter",var(--sans); font-size:11px;
  font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#fff; background:var(--red);
  padding:4px 11px; border-radius:999px; white-space:nowrap;}
.install-hero > p{color:var(--ink2); margin:10px 0 14px; font-size:14px;}
.install-hero > p:last-child{margin:14px 0 0;}
.install-hero .codeblock{margin:0; border-color:var(--red10); box-shadow:none;}
.install-hero .codeblock .codeblock-bar{background:var(--red05); border-bottom-color:var(--red10);}
.install-hero .codeblock pre{font-size:13.5px; padding:18px;}
.install-hero .copy-btn{background:var(--red); border-color:var(--red); color:#fff;}
.install-hero .copy-btn:hover{background:var(--red8); border-color:var(--red8); color:#fff;}

/* 安装/卡片网格(skill 页用) */
.cardgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin:18px 0;}
.card{display:block; text-decoration:none; border:1px solid var(--line); border-radius:10px; padding:16px 18px;
  background:var(--paper); transition:border-color .15s,transform .12s,box-shadow .15s;}
.card:hover{border-color:var(--red); transform:translateY(-1px); box-shadow:0 6px 18px -10px rgba(168,32,26,.35);}
.card .ct{display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:13px; color:var(--ink); font-weight:600;}
.card .ct svg{width:15px; height:15px; color:var(--red);}
.card .cd{font-size:12.5px; color:var(--ink2); margin-top:7px; line-height:1.5;}

/* ---------------- 移动端 ---------------- */
@media (max-width:880px){
  .layout{grid-template-columns:1fr; gap:0;}
  .nav-toggle{display:inline-flex;}
  .topnav .nl .label-hide{display:none;}
  .sidebar{position:fixed; left:0; top:var(--nav-h); width:280px; height:calc(100vh - var(--nav-h));
    background:var(--paper); border-right:1px solid var(--line); padding:20px 12px; transform:translateX(-100%);
    transition:transform .2s var(--ease,ease); z-index:40;}
  .sidebar.open{transform:translateX(0); box-shadow:0 10px 40px -10px rgba(43,43,43,.3);}
  .content{padding:24px 0 100px;}
}
@media print{
  .topnav,.sidebar,.nav-toggle,.copy-btn,.anchor{display:none!important;}
  .layout{display:block;} .content{max-width:none; padding:0;}
}