/* r书屋 · 灯下夜读面 —— 本地单文件，无外链字体、无 CDN */
:root{
  --ink-0:#15181C; --ink-1:#1C2127; --ink-2:#222931; --ink-3:#2A323B;
  --paper:#E7E0D2; --paper-2:#A79F8F; --rule:#333B44;
  --amber:#D9A441; --amber-dim:#8A6A2C; --celadon:#6FA89C; --brick:#D1735C;
  --brick-bg:#2A1C18;
  --f-kai:"Kaiti SC","STKaiti","KaiTi","Noto Serif CJK SC",serif;
  --f-sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --f-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --fs:17px; --lh:1.85; --measure:38em;
}
html[data-fs="s"]{--fs:15.5px}
html[data-fs="l"]{--fs:19.5px}
html[data-lh="t"]{--lh:1.58}
html[data-lh="w"]{--lh:2.12}
html[data-mw="n"]{--measure:32em}
html[data-mw="w"]{--measure:46em}
html[data-bg="brown"]{
  --ink-0:#1C1712; --ink-1:#241D17; --ink-2:#2B231B; --ink-3:#352B21;
  --paper:#EDE3D0; --paper-2:#AFA48D; --rule:#3C3326;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink-0); color:var(--paper);
  font:var(--fs)/var(--lh) var(--f-sans);
  letter-spacing:.01em;
}
img,svg{max-width:100%}
a{color:var(--amber); text-decoration:none; border-bottom:1px solid var(--amber-dim)}
a:hover{border-bottom-color:var(--amber)}
:focus-visible{outline:2px solid var(--amber); outline-offset:2px; border-radius:2px}

.skip{position:absolute; left:-9999px; top:0}
.skip:focus{left:8px; top:8px; z-index:60; background:var(--ink-2); color:var(--paper);
  padding:8px 12px; border:1px solid var(--amber)}

.wrap{max-width:1180px; margin:0 auto; padding:0 20px}
.nb{white-space:nowrap}

/* ---------- 站头与折行导航 ---------- */
.site-head{border-bottom:1px solid var(--rule); background:var(--ink-1)}
.site-head .wrap{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 22px; padding-top:14px; padding-bottom:10px}
.brand{font:600 24px/1.2 var(--f-kai); color:var(--paper); border:0; letter-spacing:.04em}
.brand:hover{color:var(--amber); border:0}
.brand-sub{font-size:13px; color:var(--paper-2)}
.site-nav{width:100%; margin-top:4px}
.site-nav ul{display:flex; flex-wrap:wrap; gap:0 4px; list-style:none; margin:0; padding:0}
.site-nav a{display:block; padding:10px 12px; min-height:42px; font-size:15px;
  color:var(--paper); border:0; border-bottom:2px solid transparent}
.site-nav a:hover{color:var(--amber)}
.site-nav a[aria-current="page"]{color:var(--amber); border-bottom-color:var(--amber)}

/* ---------- 书眉 ---------- */
.runhead{display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:14px 0 6px; border-bottom:1px solid var(--rule);
  font:12.5px/1.5 var(--f-mono); color:var(--paper-2); letter-spacing:.08em; text-transform:uppercase}

/* ---------- 阅读设置条 ---------- */
.readerbar{position:sticky; top:0; z-index:40; background:var(--ink-1);
  border-bottom:1px solid var(--rule); margin-bottom:22px}
.readerbar .wrap{display:flex; flex-wrap:wrap; gap:8px 18px; padding-top:8px; padding-bottom:8px}
.rb-group{display:flex; align-items:center; gap:6px}
.rb-group > span{font:12px/1 var(--f-mono); color:var(--paper-2); letter-spacing:.06em}
.rb-group button{font:13px/1 var(--f-sans); color:var(--paper); background:var(--ink-2);
  border:1px solid var(--rule); border-radius:3px; padding:9px 11px; min-height:38px; cursor:pointer}
.rb-group button:hover{border-color:var(--amber)}
.rb-group button[aria-pressed="true"]{background:var(--amber); border-color:var(--amber); color:#14181B; font-weight:600}
:root[data-scroll-pad]{scroll-padding-top:0}
[id]{scroll-margin-top:72px}

main{display:block; padding-bottom:56px}
.lead{font:500 clamp(17px,2.1vw,20px)/1.7 var(--f-sans); color:var(--paper); max-width:40em; margin:14px 0 0}
h1{font:600 clamp(26px,4.2vw,38px)/1.28 var(--f-kai); margin:18px 0 0; letter-spacing:.02em}
h2{font:600 clamp(21px,2.6vw,26px)/1.35 var(--f-kai); margin:40px 0 12px; letter-spacing:.02em;
  padding-bottom:6px; border-bottom:1px solid var(--rule)}
h3{font:600 17px/1.45 var(--f-sans); margin:26px 0 8px; color:var(--amber)}
.prose{max-width:var(--measure)}
.prose p{margin:0 0 1.05em}
.prose ul,.prose ol{margin:0 0 1.1em; padding-left:1.4em}
.prose li{margin:0 0 .5em}
.prose ul{list-style:none; padding-left:1.2em}
.prose ul > li{position:relative}
.prose ul > li::before{content:""; position:absolute; left:-1.05em; top:.62em;
  width:6px; height:6px; background:var(--amber); border-radius:1px}
.muted{color:var(--paper-2)}
.small{font-size:14px}
code,kbd{font:14px var(--f-mono); background:var(--ink-2); padding:1px 5px; border-radius:3px}

/* ---------- 楷体引文 ---------- */
blockquote.quo{margin:22px 0; padding:4px 0 4px 18px; border-left:3px solid var(--celadon);
  font:19px/1.75 var(--f-kai); color:var(--paper); max-width:var(--measure)}
blockquote.quo cite{display:block; margin-top:8px; font:13px var(--f-sans); color:var(--paper-2); font-style:normal}

/* ---------- 声明框 ---------- */
.notice{border:1px solid var(--rule); border-left:3px solid var(--amber); background:var(--ink-1);
  padding:14px 16px; margin:22px 0; border-radius:3px; font-size:15px}
.notice.fic{border-left-color:var(--brick); background:var(--brick-bg)}
.notice.warn{border-left-color:var(--brick); background:var(--brick-bg); color:var(--paper)}
.notice h3{margin-top:0; color:var(--paper)}
.notice p:last-child{margin-bottom:0}
.store-warn{border:1px solid var(--brick); background:var(--brick-bg); color:var(--paper);
  padding:12px 14px; margin:0 0 18px; border-radius:3px; font-size:15px}
.store-warn strong{color:var(--brick)}

/* ---------- 卡片网格 ---------- */
.grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(0,1fr)); margin:20px 0}
.grid.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.grid.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.grid > *{min-width:0}
.card{background:var(--ink-1); border:1px solid var(--rule); border-radius:4px; padding:16px 18px}
.card h3{margin:0 0 6px}
.card p{margin:0 0 .7em; font-size:15px}
.card p:last-child{margin-bottom:0}
.card .meta{font:12px var(--f-mono); color:var(--paper-2); letter-spacing:.06em}
.tag{display:inline-block; font:12px var(--f-mono); color:var(--celadon);
  border:1px solid var(--rule); border-radius:2px; padding:2px 7px; margin:0 6px 6px 0; letter-spacing:.04em}

/* ---------- 正文 ↔ 读法批注 双栏对照 ---------- */
.duizhao{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:0 30px; margin:26px 0}
.duizhao > *{min-width:0}
.dz-text{max-width:none}
.dz-seg{display:contents}
.dz-p{position:relative; margin:0 0 1.05em}
.dz-num{font:12px var(--f-mono); color:var(--amber); margin-right:.5em; vertical-align:.15em}
.zhu-col{border-left:1px solid var(--rule); padding-left:18px}
.zhu{margin:0 0 1.3em; font-size:14.5px; line-height:1.72; color:var(--paper-2)}
.zhu b{display:block; font:12px var(--f-mono); color:var(--amber); font-weight:400; letter-spacing:.06em; margin-bottom:3px}
.zhu-inline{display:none}
.duizhao[data-zhu="off"] .zhu-col,.duizhao[data-zhu="off"] .zhu-inline{display:none}
.zhu-toggle{font:13px var(--f-sans); color:var(--paper); background:var(--ink-2);
  border:1px solid var(--rule); border-radius:3px; padding:9px 13px; min-height:38px; cursor:pointer}
.zhu-toggle:hover{border-color:var(--amber)}
@media (max-width:900px){
  .duizhao{grid-template-columns:minmax(0,1fr); gap:0}
  .zhu-col{display:none}
  .duizhao:not([data-zhu="off"]) .zhu-inline{display:block}
  .zhu-inline{margin:-.35em 0 1.15em; border-left:2px solid var(--amber-dim); background:var(--ink-1); border-radius:3px}
  .zhu-inline > summary{cursor:pointer; padding:7px 12px; font:12px var(--f-mono);
    color:var(--amber); letter-spacing:.06em; list-style:none}
  .zhu-inline > summary::-webkit-details-marker{display:none}
  .zhu-inline > summary::after{content:"　展开"; color:var(--paper-2)}
  .zhu-inline[open] > summary::after{content:"　收起"}
  .zhu-inline .zhu{padding:0 12px 10px; margin:0}
}

/* ---------- 图件 ---------- */
figure.fig{margin:26px 0; background:var(--ink-1); border:1px solid var(--rule); border-radius:4px; padding:14px}
figure.fig svg{display:block; width:100%; height:auto}
figure.fig figcaption{margin-top:10px; padding-top:9px; border-top:1px solid var(--rule);
  font-size:13.5px; line-height:1.6; color:var(--paper-2)}

/* ---------- 步骤条 ---------- */
.steps{list-style:none; margin:22px 0; padding:0}
.steps > li{position:relative; padding:0 0 20px 40px; border-left:1px solid var(--rule); margin-left:12px}
.steps > li:last-child{border-left-color:transparent; padding-bottom:0}
.steps > li::before{content:attr(data-n); position:absolute; left:-13px; top:0; width:26px; height:26px;
  border-radius:50%; background:var(--ink-2); border:1px solid var(--celadon); color:var(--celadon);
  font:12px/24px var(--f-mono); text-align:center}
.steps h3{margin:0 0 4px}
.steps .dur{font:12px var(--f-mono); color:var(--paper-2); letter-spacing:.06em}

/* ---------- 表格（≤560px 转卡片） ---------- */
.tbl{width:100%; border-collapse:collapse; margin:20px 0; font-size:15px}
.tbl caption{text-align:left; font-size:13.5px; color:var(--paper-2); padding-bottom:8px}
.tbl th,.tbl td{text-align:left; padding:9px 12px; border-bottom:1px solid var(--rule); vertical-align:top}
.tbl thead th{font:12px var(--f-mono); color:var(--amber); letter-spacing:.06em; border-bottom-color:var(--amber-dim)}
@media (max-width:560px){
  .tbl thead{position:absolute; left:-9999px}
  .tbl tr{display:block; background:var(--ink-1); border:1px solid var(--rule); border-radius:4px; margin-bottom:12px; padding:6px 10px}
  .tbl td{display:block; border-bottom:0; padding:5px 0}
  .tbl td::before{content:attr(data-l); display:block; font:11.5px var(--f-mono);
    color:var(--amber); letter-spacing:.06em; margin-bottom:2px}
}

/* ---------- 工具台 ---------- */
.tool{background:var(--ink-1); border:1px solid var(--rule); border-radius:4px; padding:18px; margin:24px 0}
.tool h3{margin-top:0}
.field{display:block; margin:0 0 14px}
.field > span{display:block; font-size:14px; color:var(--paper-2); margin-bottom:5px}
.field input,.field select,.field textarea{width:100%; font:15px var(--f-sans); color:var(--paper);
  background:var(--ink-2); border:1px solid var(--rule); border-radius:3px; padding:10px 11px; min-height:42px}
.field textarea{min-height:84px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--amber); outline:none}
.row{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 14px}
.row > *{min-width:0}
.btn{font:15px var(--f-sans); color:#14181B; background:var(--amber); border:1px solid var(--amber);
  border-radius:3px; padding:10px 16px; min-height:42px; cursor:pointer; font-weight:600}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent; color:var(--paper); border-color:var(--rule); font-weight:400}
.btn.ghost:hover{border-color:var(--amber); filter:none}
.btn.danger{background:transparent; color:var(--brick); border-color:var(--brick); font-weight:400}
.readout{font:15px/1.7 var(--f-mono); color:var(--paper); background:var(--ink-2);
  border:1px solid var(--rule); border-radius:3px; padding:12px 14px; margin:14px 0; white-space:pre-wrap; word-break:break-word}
.readout .big{font-size:30px; color:var(--amber); line-height:1.2}
.err{color:var(--brick); font-size:14.5px; margin:8px 0 0}
.ok-note{color:var(--celadon); font-size:14.5px; margin:8px 0 0}
.q{border-bottom:1px solid var(--rule); padding:12px 0}
.q:last-of-type{border-bottom:0}
.q > p{margin:0 0 8px; font-size:15.5px}
.q .opts{display:flex; flex-wrap:wrap; gap:8px}
.q .opts label{display:flex; align-items:center; gap:6px; font-size:14px; color:var(--paper-2);
  background:var(--ink-2); border:1px solid var(--rule); border-radius:3px; padding:8px 11px; min-height:40px; cursor:pointer}
.q .opts input{accent-color:var(--amber)}
.noteitem{border:1px solid var(--rule); border-radius:3px; background:var(--ink-2); padding:12px 14px; margin:0 0 10px}
.noteitem h4{margin:0 0 4px; font:15px var(--f-sans); color:var(--paper)}
.noteitem .src{font:12px var(--f-mono); color:var(--paper-2)}
.noteitem blockquote{margin:8px 0; padding-left:12px; border-left:2px solid var(--celadon);
  font:16px/1.7 var(--f-kai); color:var(--paper)}
.noteitem .own{margin:6px 0 8px; font-size:14.5px}

/* ---------- 面包屑 / 页末注 / 页脚 ---------- */
.crumb{font-size:13.5px; color:var(--paper-2); padding:12px 0 0}
.crumb ol{display:flex; flex-wrap:wrap; gap:0 8px; list-style:none; margin:0; padding:0}
.crumb li::after{content:"›"; margin-left:8px; color:var(--rule)}
.crumb li:last-child::after{content:""}
.crumb a{border-bottom:0; color:var(--paper-2)}
.crumb a:hover{color:var(--amber)}
.fnref{font:12px var(--f-mono); color:var(--amber); border-bottom:0; vertical-align:.4em; padding:0 1px}
.fnlist{margin:34px 0 0; padding:16px 0 0; border-top:1px solid var(--rule); max-width:var(--measure)}
.fnlist h2{font:600 15px var(--f-sans); border:0; margin:0 0 8px; color:var(--paper-2); letter-spacing:.04em}
.fnlist ol{margin:0; padding-left:1.5em; font-size:14.5px; color:var(--paper-2)}
.fnlist li{margin:0 0 .6em}
.site-foot{border-top:1px solid var(--rule); background:var(--ink-1); padding:26px 0 40px;
  font-size:14px; color:var(--paper-2)}
.site-foot .cols{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.site-foot .cols > *{min-width:0}
.site-foot h2{font:600 13px var(--f-mono); letter-spacing:.08em; color:var(--paper);
  border:0; margin:0 0 8px; padding:0; text-transform:uppercase}
.site-foot ul{list-style:none; margin:0; padding:0}
.site-foot li{margin:0 0 6px}
.site-foot a{color:var(--paper-2); border-bottom:0}
.site-foot a:hover{color:var(--amber)}
.site-foot .bound{margin:18px 0 0; padding-top:14px; border-top:1px solid var(--rule); line-height:1.75}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important; animation:none !important}
}