@charset "UTF-8";
/* ============================================================================
   uYufeng —— 电路板区公共样式
   门面是手绘的阁楼工作室（见 index.php），点笔记本走进这块板子：
   笔记 / 博客 / 归档全用阻焊绿 + 沉金的 PCB 语言。
   改色只改下面 :root 这一组 token。
   ============================================================================ */

/* ---------------------------------------------------------------- 字体
   拉丁字母自托管（Archivo + IBM Plex Mono，一共 100KB 不到），
   中文一律用系统里的字：苹果=苹方，Windows=微软雅黑，安卓=思源黑体。
   为什么不下中文字体：Google Fonts 在国内被墙；字体镜像站的可用字族
   是个没文档的白名单，靠不住。自托管 + 系统中文 = 国内秒开、零第三方依赖。 */
@font-face{font-family:"Archivo";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/archivo-latin-500-normal.woff2") format("woff2");}
@font-face{font-family:"Archivo";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/archivo-latin-600-normal.woff2") format("woff2");}
@font-face{font-family:"Archivo";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/archivo-latin-700-normal.woff2") format("woff2");}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");}

/* ---------------------------------------------------------------- token */
:root{
  color-scheme: dark;

  --board:#050E09;          /* 板基：最深的底 */
  --board-2:#0A1810;        /* 次级底（页脚） */
  --surface:#0E2016;        /* 卡片面 */
  --surface-2:#122A1C;      /* 卡片面亮一档（悬停） */
  --line:#1E3A2A;           /* 分隔线 */
  --line-2:#16301F;         /* 更弱的分隔线 */

  --trace:#2E6B4A;          /* 走线 */
  --silk:#E9F4EC;           /* 丝印白：标题 */
  --ink:#DCE9DF;            /* 正文 */
  --ink-2:#8FA79A;          /* 次要文字 */
  --ink-3:#5F7768;          /* 最弱：meta、图注 */

  --copper:#D9A93F;         /* 沉金：强调 */
  --copper-2:#F0C868;       /* 沉金亮 */
  --signal:#3FE08C;         /* 信号：链接、当前态 */
  --signal-dim:rgba(63,224,140,.14);

  --cn:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Noto Sans CJK SC","Source Han Sans SC",sans-serif;
  --display:"Archivo",var(--cn);
  --body:var(--cn);
  --mono:"IBM Plex Mono",var(--cn),ui-monospace,Consolas,monospace;

  --gut:clamp(18px,4vw,40px);   /* 左右留白 */
  --rail:260px;                  /* 文章页右侧目录栏宽 */
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:96px;}
body{
  margin:0;
  background:var(--board);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
  /* 底噪：极弱的一层网格，暗示板子的底铜 */
  background-image:
    linear-gradient(rgba(46,107,74,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46,107,74,.055) 1px, transparent 1px);
  background-size:52px 52px;
}
a{color:inherit;text-decoration:none;}
::selection{background:rgba(63,224,140,.28);color:#fff;}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

.wrap{max-width:1240px;margin:0 auto;padding:0 var(--gut);}

/* ================================================================ 顶栏 */
.top{
  position:sticky; top:0; z-index:50;
  background:rgba(5,14,9,.86);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.top-in{max-width:1240px;margin:0 auto;padding:0 var(--gut);height:62px;display:flex;align-items:center;gap:18px;}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.brand svg{display:block;}
.brand b{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.06em;color:var(--silk);}
.brand span{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--ink-3);text-transform:uppercase;}

/* 导航：每一项前面一个小焊盘，当前项焊盘点亮 */
.nav{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap;}
.nav a{
  position:relative;display:flex;align-items:center;gap:8px;
  padding:8px 14px 8px 12px;font-size:14px;color:var(--ink-2);border-radius:6px;
  transition:color .2s,background .2s;
}
.nav a::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--line);flex-shrink:0;transition:background .2s,box-shadow .2s;}
.nav a:hover{color:var(--silk);background:rgba(46,107,74,.14);}
.nav a.on{color:var(--signal);}
.nav a.on::before{background:var(--signal);box-shadow:0 0 8px var(--signal);}
.nav small{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;opacity:.5;}

/* ================================================================
   页头：左边标题，右边一块「板子铭牌」
   ================================================================ */
.hero{
  padding:52px 0 40px;
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:34px;flex-wrap:wrap;
}
.hero-main{max-width:34em;}
.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--copper);
  display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--copper);}
.hero h1{
  margin:14px 0 0;
  font-family:var(--display);font-weight:700;
  font-size:clamp(2rem,5.4vw,3.1rem);line-height:1.25;
  letter-spacing:.01em;color:var(--silk);text-wrap:balance;
}
.hero .lede{margin:16px 0 0;color:var(--ink-2);font-size:15.5px;line-height:2;max-width:32em;}

/* 铭牌：像贴在板子边缘的那块丝印标签，两个对角各一段铜色角标 */
.plate{
  flex-shrink:0;
  border:1px solid var(--line);border-radius:8px;
  background:linear-gradient(160deg,var(--surface),rgba(14,32,22,.4));
  padding:16px 20px;
  font-family:var(--mono);font-size:11.5px;
  display:grid;grid-template-columns:auto auto;gap:7px 22px;
  position:relative;
}
.plate::before{content:"";position:absolute;left:-1px;top:-1px;width:9px;height:9px;border-top:1px solid var(--copper);border-left:1px solid var(--copper);border-radius:8px 0 0 0;}
.plate::after{content:"";position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-bottom:1px solid var(--copper);border-right:1px solid var(--copper);border-radius:0 0 8px 0;}
.plate .k{color:var(--ink-3);letter-spacing:.1em;}
.plate .v{color:var(--silk);font-weight:500;text-align:right;}
.plate .v.hi{color:var(--signal);}

/* ================================================================
   主体：左栏（分类树 + 归档 + 标签）+ 右边文章列表
   ================================================================ */
.grid{
  display:grid;grid-template-columns:238px minmax(0,1fr);
  gap:clamp(30px,4.6vw,58px);
  padding:0 0 90px;align-items:start;
}
@media (max-width:920px){
  .grid{grid-template-columns:minmax(0,1fr);}
  .rail{position:static !important;}
}
.rail{position:sticky;top:86px;}
.rail-sec{margin-bottom:30px;}
.rail-sec .hd{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);
  padding-bottom:10px;margin-bottom:8px;
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:9px;
}
.rail-sec .hd::after{content:"";flex:1;height:1px;background:var(--line-2);}

/* 分类树：每一项是一个「焊盘 + 名字 + 篇数」 */
.tree a{
  display:flex;align-items:center;gap:10px;
  padding:7px 10px 7px 8px;border-radius:6px;
  font-size:14px;color:var(--ink-2);
  transition:background .18s,color .18s;
}
.tree a .pad{width:7px;height:7px;border-radius:1.5px;flex-shrink:0;background:var(--line);transition:background .2s,box-shadow .2s;}
.tree a .n{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-3);}
.tree a:hover{background:rgba(46,107,74,.13);color:var(--silk);}
.tree a.on{color:var(--signal);background:var(--signal-dim);}
.tree a.on .pad{background:var(--signal);box-shadow:0 0 8px var(--signal);}
.tree a.on .n{color:var(--signal);}
.tree .sub a{padding-left:26px;font-size:13.5px;}
.tree .sub a .pad{width:5px;height:5px;border-radius:50%;}

/* 归档柱状图：柱子是「信号幅度」，顶端一颗焊点
   —— 月份数字必须跟着柱子一起在流里排版。曾经把数字写成
      position:absolute; bottom:-19px，绝对定位不占流，结果它和
      下面「2026 / 共 N 篇」那一行直接叠在了一起。 */
.bars{display:flex;align-items:flex-end;gap:5px;height:92px;padding-top:14px;}
.bars .b{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;}
.bars .b i{
  position:relative;display:block;width:100%;
  border-radius:2px 2px 0 0;
  background:linear-gradient(180deg,var(--trace),rgba(46,107,74,.22));
  transition:background .2s,box-shadow .2s;
}
/* 焊点挂在柱子上，柱子多高它就永远在多高 */
.bars .b i::after{
  content:"";position:absolute;left:50%;top:-4px;
  width:4px;height:4px;margin-left:-2px;border-radius:50%;
  background:var(--copper);opacity:.9;
}
.bars .b span{margin-top:6px;line-height:1;font-family:var(--mono);font-size:9.5px;color:var(--ink-3);}
.bars .b:hover i{background:linear-gradient(180deg,var(--signal),rgba(63,224,140,.28));box-shadow:0 0 14px rgba(63,224,140,.35);}
.bars-wrap .yr{
  font-family:var(--mono);font-size:11px;color:var(--copper);
  display:flex;justify-content:space-between;margin-top:10px;
  padding-top:9px;border-top:1px solid var(--line-2);
}

/* 标签云 */
.cloud{display:flex;flex-wrap:wrap;gap:7px;}
.cloud a{
  font-size:12.5px;padding:4px 11px;border-radius:99px;
  border:1px solid var(--line);color:var(--ink-2);background:var(--surface);
  transition:all .2s;
}
.cloud a:hover{border-color:var(--signal);color:var(--signal);background:var(--signal-dim);}

/* ================================================================
   文章列表：每一项左侧一条走线，悬停时信号从上面跑过去
   ================================================================ */
.list-head{
  display:flex;align-items:baseline;gap:12px;
  padding-bottom:14px;margin-bottom:6px;
  border-bottom:1px solid var(--line);
}
.list-head h2{margin:0;font-family:var(--display);font-weight:600;font-size:1.1rem;color:var(--silk);}
.list-head .n{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);}
.list-head .sort{margin-left:auto;display:flex;gap:12px;font-family:var(--mono);font-size:11px;color:var(--ink-3);}
.list-head .sort a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;padding-bottom:1px;transition:color .2s,border-color .2s;}
.list-head .sort a:hover{color:var(--ink);}
.list-head .sort a.on{color:var(--signal);border-bottom-color:var(--signal);}
.list-head .sort b{color:var(--signal);font-weight:500;}
.list .empty{margin:26px 0 0;font-size:14px;color:var(--ink-3);}
.list .empty p{margin:0;}
.list .empty-links{margin-top:14px;display:flex;gap:20px;flex-wrap:wrap;}
.list .empty-links a{color:var(--copper);border-bottom:1px solid var(--line);padding-bottom:2px;}
.list .empty-links a:hover{color:var(--copper-2);border-bottom-color:var(--copper);}

.year-grp{margin-top:34px;}
.year-grp .yr{
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;
  color:var(--copper);margin-bottom:10px;
  display:flex;align-items:center;gap:12px;
}
.year-grp .yr::after{content:"";flex:1;height:1px;background:var(--line-2);}

.item{
  position:relative;display:block;
  padding:19px 20px 19px 24px;
  border-radius:9px;
  transition:background .22s;
  overflow:hidden;
}
/* 左侧那条走线 */
.item::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--line);border-radius:2px;transition:background .25s;
}
/* 悬停时沿走线跑过去的信号 */
.item::after{
  content:"";position:absolute;left:0;top:0;width:2px;height:34px;
  border-radius:2px;
  background:linear-gradient(180deg,transparent,var(--signal),transparent);
  opacity:0;pointer-events:none;
}
.item:hover{background:rgba(46,107,74,.10);}
.item:hover::before{background:var(--trace);}
.item:hover::after{opacity:1;animation:run 1.1s ease-in-out infinite;}
@keyframes run{0%{top:-34px;}100%{top:100%;}}
/* 键盘走到这儿也亮一下，别只伺候鼠标 */
.item:focus-visible{outline:1px solid var(--signal);outline-offset:2px;background:rgba(46,107,74,.10);}
.item:focus-visible h3{color:var(--signal);}

.item .row1{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;}
.item h3{
  margin:0;font-family:var(--display);font-weight:600;
  font-size:1.02rem;line-height:1.5;color:var(--silk);transition:color .2s;
}
.item:hover h3{color:var(--signal);}
.item .cat{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--copper);
  border:1px solid rgba(217,169,63,.3);border-radius:99px;
  padding:1px 8px;flex-shrink:0;
}
.item .ex{
  margin:8px 0 0;font-size:14px;color:var(--ink-2);
  line-height:1.85;max-width:44em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.item .row2{
  margin-top:11px;display:flex;align-items:center;gap:0;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;color:var(--ink-3);
}
.item .row2 > *{display:inline-flex;align-items:center;gap:6px;padding:3px 0;}
.item .row2 .sep{width:14px;height:1px;background:var(--line);margin:0 10px;}
.item .row2 .pin{color:var(--copper);}

/* 分页：每一页是一个焊盘 */
.pages{
  margin-top:44px;padding-top:26px;
  border-top:1px solid var(--line);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-family:var(--mono);font-size:12.5px;
}
.pages a,.pages span{
  min-width:36px;height:36px;padding:0 11px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:7px;
  color:var(--ink-2);background:var(--surface);
  transition:all .2s;
}
.pages a:hover{border-color:var(--signal);color:var(--signal);}
.pages .cur{background:var(--signal-dim);border-color:var(--signal);color:var(--signal);}
.pages .gap{border:none;background:none;}
/* Typecho 的分页要套一层容器才肯输出，用 display:contents 把这层抹掉，
   让 a / span 直接落在 flex 行里 —— 少一层 div，少一处要对齐的东西。 */
.pages .pg{display:contents;}
.pages .info{margin-left:auto;color:var(--ink-3);border:none;background:none;}

/* ================================================================
   文章页
   ================================================================ */
/* 阅读进度：一条走线，末端跑一个焊点 */
.progress{position:fixed;left:0;right:0;top:0;height:2px;z-index:60;background:var(--line);}
.progress .bar{height:100%;width:0;background:linear-gradient(90deg,var(--trace),var(--signal));box-shadow:0 0 12px rgba(63,224,140,.6);transition:width .1s linear;}
.progress .dot{
  position:absolute;top:50%;left:0;
  width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
  background:var(--board);border:2px solid var(--signal);
  box-shadow:0 0 10px var(--signal),0 0 0 4px var(--signal-dim);
}

.crumb{
  padding:26px 0 0;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  color:var(--ink-3);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.crumb a{transition:color .2s;}
.crumb a:hover{color:var(--signal);}
.crumb i{font-style:normal;color:var(--line);}

.head{padding:14px 0 0;}
.head .cat{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--copper);
  padding:4px 11px 4px 9px;
  border:1px solid rgba(217,169,63,.32);
  border-radius:99px;background:rgba(217,169,63,.07);
  transition:background .2s,border-color .2s;
}
.head .cat:hover{background:rgba(217,169,63,.16);border-color:rgba(217,169,63,.6);}
.head .cat b{width:5px;height:5px;border-radius:50%;background:var(--copper);}
.head h1{
  margin:18px 0 0;font-family:var(--display);font-weight:700;
  font-size:clamp(1.7rem,4.2vw,2.65rem);line-height:1.32;
  letter-spacing:.005em;color:var(--silk);text-wrap:balance;max-width:20em;
}

/* meta 行：每一项之间用一根极短的走线隔开，不是句点 */
.meta{margin-top:22px;display:flex;align-items:center;flex-wrap:wrap;gap:0 4px;font-family:var(--mono);font-size:12.5px;color:var(--ink-2);}
.meta > *{display:inline-flex;align-items:center;gap:7px;padding:5px 0;}
.meta .sep{width:16px;height:1px;background:var(--line);margin:0 10px;padding:0;position:relative;}
.meta .sep::after{content:"";position:absolute;right:-1px;top:50%;width:3px;height:3px;margin-top:-1.5px;border-radius:50%;background:var(--trace);}
.meta b{color:var(--ink);font-weight:500;}
.meta .ic{color:var(--ink-3);font-size:11px;}

/* 标题下面那条走线：末端一个过孔环 */
.rule{margin:26px 0 0;height:1px;background:var(--line);position:relative;}
.rule::after{
  content:"";position:absolute;right:0;top:50%;
  width:11px;height:11px;margin-top:-5.5px;border-radius:50%;
  border:1px solid var(--trace);background:var(--board);
  box-shadow:inset 0 0 0 2.5px var(--board),inset 0 0 0 3.5px var(--trace);
}

.body-grid{
  display:grid;grid-template-columns:minmax(0,1fr) var(--rail);
  gap:clamp(28px,5vw,64px);
  padding:44px 0 90px;align-items:start;
}
@media (max-width:1000px){
  .body-grid{grid-template-columns:minmax(0,1fr);}
  .toc-rail{display:none;}
}

/* ---------------------------------------------------------- 正文排版 */
.prose{max-width:44em;font-size:16.5px;line-height:2.05;color:var(--ink);}
.prose > *:first-child{margin-top:0;}
.prose p{margin:0 0 1.5em;}
.prose strong{color:var(--silk);font-weight:600;}
.prose em{font-style:normal;background:rgba(217,169,63,.16);color:var(--copper-2);padding:1px 5px;border-radius:3px;}
.prose img{max-width:100%;height:auto;}

/* H2 前面一颗 SMD 焊盘 */
.prose h2{
  position:relative;margin:2.6em 0 .95em;padding-left:26px;
  font-family:var(--display);font-size:1.42rem;font-weight:600;line-height:1.45;
  color:var(--silk);letter-spacing:.01em;
}
.prose h2::before{
  content:"";position:absolute;left:0;top:.62em;width:11px;height:11px;border-radius:2px;
  background:var(--copper);
  box-shadow:0 0 0 3px rgba(217,169,63,.13),0 0 10px rgba(217,169,63,.35);
}
.prose h3{margin:2em 0 .7em;font-family:var(--display);font-size:1.1rem;font-weight:600;color:var(--silk);}
.prose h3::before{content:"▍";color:var(--trace);margin-right:8px;font-size:.85em;}
.prose h4{margin:1.7em 0 .6em;font-size:1rem;font-weight:600;color:var(--silk);}

.prose ul,.prose ol{margin:0 0 1.5em;padding-left:1.4em;}
.prose li{margin:.45em 0;}
.prose li::marker{color:var(--copper);}
.prose ul li::marker{content:"▪ ";font-size:.85em;}

.prose a{color:var(--signal);border-bottom:1px solid rgba(63,224,140,.35);transition:border-color .2s,background .2s;}
.prose a:hover{border-bottom-color:var(--signal);background:var(--signal-dim);}

/* 行内代码 */
.prose code{
  font-family:var(--mono);font-size:.875em;
  padding:2px 6px;border-radius:4px;
  background:rgba(46,107,74,.22);border:1px solid var(--line);
  color:var(--copper-2);white-space:nowrap;
}

/* 代码块：整块做成一颗 IC，左上角贴丝印标 */
.code{
  position:relative;margin:0 0 1.75em;
  background:#07130C;border:1px solid var(--line);border-radius:8px;
  /* 这里不能 overflow:hidden —— 左上角那颗丝印标是悬在上沿外面的，
     一旦裁掉就只剩半截。圆角改挂到里面的 .bar / pre 上。 */
}
.code::before{
  content:attr(data-chip);
  position:absolute;left:12px;top:0;transform:translateY(-50%);
  font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.16em;
  color:var(--board);background:var(--copper);
  padding:1px 7px;border-radius:3px;
}
.code .bar{
  display:flex;align-items:center;gap:10px;
  padding:11px 14px 9px;
  border-bottom:1px solid var(--line-2);
  border-radius:7px 7px 0 0;
  font-family:var(--mono);font-size:11px;color:var(--ink-3);
}
.code .bar .lang{margin-left:auto;letter-spacing:.14em;text-transform:uppercase;color:var(--trace);}
.code .bar .cp{
  margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  color:var(--ink-3);background:none;border:1px solid var(--line);
  border-radius:5px;padding:2px 8px;cursor:pointer;transition:all .2s;
}
.code .bar .cp:hover{color:var(--signal);border-color:var(--signal);}
.code .bar .lang + .cp{margin-left:10px;}
.code pre{
  margin:0;padding:14px 0;border-radius:0 0 7px 7px;
  overflow-x:auto;
  font-family:var(--mono);font-size:13px;line-height:1.85;
  color:#C8DCD0;tab-size:4;
}
.code pre::-webkit-scrollbar{height:8px;}
.code pre::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px;}
.code code{background:none;border:none;padding:0;color:inherit;white-space:pre;}
/* 行号：像板子上的丝印数字。用 CSS counter 生成，所以是生成内容 ——
   鼠标划选、ctrl+C 复制都带不走它，复制到的永远是干净的源码。 */
.code pre code{counter-reset:ln;display:block;}
.code pre code .l{display:block;position:relative;padding-left:3.4em;min-height:1.85em;white-space:pre;}
.code pre code .l::before{
  counter-increment:ln;content:counter(ln);
  position:absolute;left:0;width:2.5em;text-align:right;
  color:var(--ink-3);opacity:.5;user-select:none;
}
.code .k{color:#7FD6A4;}
.code .s{color:var(--copper-2);}
.code .c{color:var(--ink-3);font-style:italic;}
.code .n{color:#8FB8FF;}
.code .m{color:#E7A6C8;}

/* 引用：左侧一条铜箔 + 一颗过孔 */
.prose blockquote{
  position:relative;margin:0 0 1.75em;padding:18px 22px 18px 26px;
  background:linear-gradient(90deg,rgba(217,169,63,.07),rgba(217,169,63,0) 70%);
  border-radius:0 6px 6px 0;color:var(--ink-2);font-size:15.5px;
}
.prose blockquote::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--copper),rgba(217,169,63,.25));border-radius:3px;
}
.prose blockquote::after{
  content:"";position:absolute;left:-3.5px;top:50%;
  width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--copper);
  box-shadow:0 0 0 3px var(--board),0 0 12px rgba(217,169,63,.5);
}
.prose blockquote p:last-child{margin-bottom:0;}

/* 图片 + 丝印图注 */
.prose figure{margin:0 0 1.9em;}
.prose figure img{display:block;width:100%;max-width:100%;border-radius:8px;border:1px solid var(--line);}
.prose figcaption{margin-top:11px;padding-left:14px;position:relative;font-family:var(--mono);font-size:12px;line-height:1.7;color:var(--ink-3);}
.prose figcaption::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:7px;border-radius:1px;background:var(--trace);}

/* 表格：宽表自己滚，别把整页顶宽 */
.prose .tw{overflow-x:auto;margin:0 0 1.75em;}
.prose table{width:100%;border-collapse:collapse;font-size:14.5px;margin:0;}
.prose th{
  text-align:left;padding:10px 14px;background:var(--surface);
  border-bottom:1px solid var(--trace);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--copper);font-weight:500;white-space:nowrap;
}
.prose td{padding:10px 14px;border-bottom:1px solid var(--line-2);color:var(--ink-2);}
.prose tbody tr:hover td{background:rgba(46,107,74,.09);}
.prose td:first-child{color:var(--ink);}

/* 分隔：一条走线加一个过孔 */
.prose hr{border:0;height:1px;margin:2.6em 0;background:var(--line);position:relative;}
.prose hr::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--trace);}

/* ------------------------------------------------- 文末：标签 / 上下篇 */
.tags{
  margin-top:52px;padding-top:26px;border-top:1px solid var(--line);
  display:flex;align-items:center;flex-wrap:wrap;gap:9px;
}
.tags .lb{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-right:4px;}
.tags a{
  font-size:13px;padding:5px 13px;border-radius:99px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
  transition:all .2s;
}
.tags a:hover{border-color:var(--signal);color:var(--signal);background:var(--signal-dim);}

.pager{margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media (max-width:640px){.pager{grid-template-columns:1fr;}}
.pager > *{min-width:0;}
.pager a,.pager .none{
  display:block;padding:18px 20px;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
  transition:border-color .22s,background .22s,transform .22s;
}
.pager .none{color:var(--ink-3);border-style:dashed;}
.pager a:hover{border-color:var(--trace);background:var(--surface-2);transform:translateY(-2px);}
.pager .dir{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);
  display:flex;align-items:center;gap:7px;
}
.pager .ttl{margin-top:8px;font-family:var(--display);font-size:15px;font-weight:600;color:var(--silk);line-height:1.5;}
.pager .next{text-align:right;}
.pager .next .dir{justify-content:flex-end;}
.pager .empty{opacity:.35;pointer-events:none;}

/* ------------------------------------------------- 右栏目录 scroll-spy */
.toc-rail{position:sticky;top:86px;font-size:13.5px;}
.toc-box{border-left:1px solid var(--line);padding-left:18px;}
.toc-box .hd{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:14px;
  display:flex;align-items:center;gap:8px;
}
.toc-box .hd::after{content:"";flex:1;height:1px;background:var(--line-2);}
.toc-box a{
  display:block;position:relative;padding:6px 0 6px 14px;
  color:var(--ink-3);line-height:1.55;
  transition:color .2s,padding-left .2s;
}
.toc-box a::before{
  content:"";position:absolute;left:-19px;top:50%;
  width:5px;height:5px;margin-top:-2.5px;border-radius:50%;
  background:var(--board);border:1px solid var(--line);
  transition:background .25s,border-color .25s,box-shadow .25s;
}
.toc-box a:hover{color:var(--ink-2);}
.toc-box a.on{color:var(--signal);padding-left:18px;}
.toc-box a.on::before{background:var(--signal);border-color:var(--signal);box-shadow:0 0 8px var(--signal);}
.toc-box a.lv3{padding-left:28px;font-size:12.8px;}
.toc-box a.lv3.on{padding-left:32px;}
.toc-read{
  margin-top:22px;padding-top:16px;border-top:1px solid var(--line-2);
  font-family:var(--mono);font-size:11px;color:var(--ink-3);
  display:flex;align-items:center;gap:10px;
}
.toc-read .track{flex:1;height:3px;border-radius:3px;background:var(--line);overflow:hidden;}
.toc-read .fill{height:100%;width:0;background:linear-gradient(90deg,var(--trace),var(--signal));transition:width .15s linear;}

/* ================================================================
   评论
   ================================================================ */
.cmt{margin-top:56px;padding-top:30px;border-top:1px solid var(--line);}
.cmt h2{
  margin:0 0 22px;position:relative;padding-left:22px;
  font-family:var(--display);font-size:1.15rem;font-weight:600;color:var(--silk);
}
.cmt h2::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:2px;background:var(--copper);}
.cmt h2 small{font-family:var(--mono);font-size:11px;color:var(--ink-3);font-weight:400;margin-left:10px;}
.cmt-list{list-style:none;margin:0 0 34px;padding:0;}
.cmt-list .cmt-item{
  padding:16px 18px;margin-bottom:10px;
  background:var(--surface);border:1px solid var(--line);border-radius:9px;
}
.cmt-list .cmt-item .who{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11.5px;color:var(--ink-3);
}
.cmt-list .cmt-item .who b{color:var(--copper);font-weight:500;}
.cmt-list .cmt-item .who img{width:28px;height:28px;border-radius:7px;border:1px solid var(--line-2);background:#07130C;}
.cmt-list .cmt-item .who time{margin-left:auto;}
.cmt-list .cmt-item .who .wait{color:var(--copper);border:1px solid rgba(217,169,63,.4);border-radius:4px;padding:1px 6px;font-size:10.5px;}
.cmt-list .cmt-item .body{margin-top:9px;font-size:14.5px;color:var(--ink-2);line-height:1.9;}
.cmt-list .cmt-item .body p{margin:0 0 .8em;}
.cmt-list .cmt-item .body p:last-child{margin:0;}
/* 嵌套的回复：Typecho 会给子评论再包一层同样的 ol。这里只留左边一条走线，
   卡片本身放平 —— 方框套方框太满，回帖用缩进加一条线就够了。 */
.cmt-list .cmt-list{margin:14px 0 0;padding:0 0 0 20px;border-left:1px solid var(--line-2);}
.cmt-list .cmt-list .cmt-item{background:none;border:none;border-radius:0;padding:2px 0 16px;margin-bottom:0;}
.cmt-list .cmt-list .cmt-item:last-child{padding-bottom:0;}
.cmt-list .cmt-item.by-author{border-color:rgba(217,169,63,.35);}
.cmt-list .cmt-item.by-author .who b::after{content:" · 楼主";color:var(--ink-3);font-weight:400;}
.cmt .reply{margin-top:8px;font-family:var(--mono);font-size:11px;}
.cmt .reply a{color:var(--ink-3);}
.cmt .reply a:hover{color:var(--signal);}
.cmt .respond{display:grid;gap:12px;}
.cmt .respond h3{margin:0;font-family:var(--display);font-size:1rem;font-weight:600;color:var(--silk);}
.cmt .respond form{display:grid;gap:16px;}
.cmt .respond .row3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.cmt .respond label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);}
.cmt .respond .fld{display:grid;gap:7px;}
.cmt .respond .cancel-comment-reply{font-family:var(--mono);font-size:11.5px;min-height:0;}
.cmt .respond .cancel-comment-reply a{color:var(--ink-3);}
.cmt .respond .cancel-comment-reply a:hover{color:var(--copper);}
.cmt .respond .whoami{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);}
.cmt .respond .whoami a{color:var(--signal);}
.cmt input[type=text],.cmt input[type=email],.cmt input[type=url],.cmt textarea{
  width:100%;padding:11px 13px;
  background:#07130C;border:1px solid var(--line);border-radius:7px;
  color:var(--ink);font-family:var(--body);font-size:14.5px;
  transition:border-color .2s,box-shadow .2s;
}
.cmt input:focus,.cmt textarea:focus{
  outline:none;border-color:var(--trace);
  box-shadow:0 0 0 3px rgba(46,107,74,.25);
}
.cmt textarea{min-height:140px;resize:vertical;line-height:1.85;}
.cmt .submit{
  justify-self:start;
  font-family:var(--mono);font-size:13px;letter-spacing:.06em;
  padding:10px 22px;border-radius:7px;cursor:pointer;
  color:var(--board);background:var(--copper);border:1px solid var(--copper);
  transition:background .2s,box-shadow .2s;
}
.cmt .submit:hover{background:var(--copper-2);box-shadow:0 0 16px rgba(217,169,63,.35);}
.cmt .respond .note{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);}
.cmt .respond .note a{color:var(--signal);}

/* ================================================================
   404
   ================================================================ */
.nf{padding:110px 0 130px;text-align:center;}
.nf .code404{
  font-family:var(--mono);font-size:clamp(3.4rem,12vw,6rem);font-weight:600;
  line-height:1;color:transparent;
  -webkit-text-stroke:1.5px var(--trace);
  letter-spacing:.06em;
}
.nf h1{margin:20px 0 0;font-family:var(--display);font-size:1.5rem;color:var(--silk);}
.nf p{margin:14px auto 0;max-width:30em;color:var(--ink-2);font-size:15px;}
.nf .back{
  display:inline-block;margin-top:30px;
  font-family:var(--mono);font-size:13px;padding:10px 22px;border-radius:7px;
  border:1px solid var(--line);color:var(--ink-2);background:var(--surface);
  transition:all .2s;
}
.nf .back:hover{border-color:var(--signal);color:var(--signal);}
.nf-traces{display:block;margin:0 auto 26px;max-width:100%;height:auto;opacity:.9;}
.nf-links{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

/* ================================================================
   页脚
   ================================================================ */
.foot{border-top:1px solid var(--line);background:var(--board-2);}
.foot-in{
  max-width:1240px;margin:0 auto;padding:34px var(--gut) 44px;
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:22px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11.5px;color:var(--ink-3);line-height:2;
}
.foot-in a{transition:color .2s;}
.foot-in a:hover{color:var(--signal);}
.foot-in .r{text-align:right;}

/* ================================================================
   窄屏收一收
   —— 顶栏的英文小字、铭牌、列表的左右留白都得让位
   ================================================================ */
@media (max-width:680px){
  .top-in{height:auto;padding:10px var(--gut);flex-wrap:wrap;gap:10px;}
  .nav{margin-left:0;width:100%;}
  .nav a{padding:7px 10px 7px 8px;font-size:13.5px;}
  .nav small{display:none;}
  .hero{padding:34px 0 26px;gap:22px;}
  .hero h1{font-size:clamp(1.6rem,7vw,2.1rem);}
  .plate{width:100%;grid-template-columns:auto auto;font-size:11px;}
  .grid{padding-bottom:60px;}
  .item{padding:16px 14px 16px 18px;}
  .item .row2 .sep{margin:0 7px;}
  .body-grid{padding:30px 0 60px;}
  .prose{font-size:16px;line-height:1.95;}
  .prose h2{font-size:1.25rem;padding-left:22px;}
  .code pre{font-size:12.5px;}
  .code pre code .l{padding-left:2.9em;}
  .code pre code .l::before{width:2.1em;}
  .nf{padding:70px 0 90px;}
  .foot-in{font-size:11px;}
  .foot-in .r{text-align:left;}
}