:root{
  --paper:#F5F6F2; --surface:#FFFFFF; --rail:#FBFBF9; --ink:#1B1D21; --ink-2:#5C6169;
  --seal:#A32B22; --sig:#24547E; --rule:#D6D8D0; --rule-soft:#E7E8E2;
  --shadow:0 1px 2px rgba(27,29,33,.06),0 10px 30px -14px rgba(27,29,33,.22);
  --serif:"Songti SC","Noto Serif SC","Source Han Serif SC","SimSun",serif;
  --sans:"PingFang SC","Noto Sans SC","Hiragino Sans GB","Microsoft YaHei",-apple-system,sans-serif;
  --mono:ui-monospace,"SF Mono","Menlo","Cascadia Mono",monospace;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#14161A;--surface:#1C1F24;--rail:#17191E;--ink:#E7E6E1;--ink-2:#9AA1A9;
  --seal:#DD7065;--sig:#86AECF;--rule:#2C3138;--rule-soft:#23272C;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 30px -14px rgba(0,0,0,.75);}}
:root[data-theme="dark"]{--paper:#14161A;--surface:#1C1F24;--rail:#17191E;--ink:#E7E6E1;
  --ink-2:#9AA1A9;--seal:#DD7065;--sig:#86AECF;--rule:#2C3138;--rule-soft:#23272C;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 30px -14px rgba(0,0,0,.75);}
:root[data-theme="light"]{--paper:#F5F6F2;--surface:#FFFFFF;--rail:#FBFBF9;--ink:#1B1D21;
  --ink-2:#5C6169;--seal:#A32B22;--sig:#24547E;--rule:#D6D8D0;--rule-soft:#E7E8E2;
  --shadow:0 1px 2px rgba(27,29,33,.06),0 10px 30px -14px rgba(27,29,33,.22);}

*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}
a{color:var(--sig);text-decoration:none;text-underline-offset:3px}
a:hover{text-decoration:underline}
.field-label{font-size:11px;letter-spacing:.14em;color:var(--ink-2);font-weight:500}
.field-label b{font-weight:600;letter-spacing:.02em;font-size:11.5px}

/* ── 页眉 ── */
.masthead{background:var(--surface);border-bottom:1px solid var(--rule);
  position:sticky;top:0;z-index:20}
.mast-in{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px 24px}
.brand{font-family:var(--serif);font-size:20px;font-weight:600;letter-spacing:.04em;
  color:var(--ink);display:flex;align-items:baseline;gap:9px;white-space:nowrap}
.brand .dot{width:7px;height:7px;background:var(--seal);border-radius:50%;translate:0 -3px}
.mast-right{display:flex;align-items:center;gap:16px}
.slogan{font-size:14px;color:var(--ink-2);white-space:nowrap;letter-spacing:.01em}
.edition{font-family:var(--sans);font-size:16px;font-weight:600;color:var(--seal);
  border:1.5px solid var(--seal);padding:4px 13px;border-radius:2px;white-space:nowrap;
  letter-spacing:.04em}
.menu-btn{display:none;background:none;border:1px solid var(--rule);color:var(--ink);
  font-family:var(--sans);font-size:13px;padding:6px 11px;border-radius:2px;cursor:pointer}

/* ── 标签条 ── */
.tagbar{background:var(--paper);border-bottom:1px solid var(--rule);padding:9px 24px;
  display:flex;gap:8px;align-items:center;overflow-x:auto;scrollbar-width:thin}
.tagbar .lb{font-size:11px;letter-spacing:.14em;color:var(--ink-2);flex:none;
  padding-right:4px}
.chip{flex:none;font-size:13px;padding:4px 12px;border:1px solid var(--rule);
  background:var(--surface);color:var(--ink-2);border-radius:2px;white-space:nowrap;
  transition:all .12s}
.chip:hover{border-color:var(--seal);color:var(--seal);text-decoration:none}
.chip b{font-family:var(--mono);font-size:11px;opacity:.65;margin-left:5px;font-weight:400}
.chip.on{background:var(--seal);border-color:var(--seal);color:#fff}
.chip.on b{opacity:.8}

/* ── 三栏骨架 ── */
.shell{display:grid;grid-template-columns:282px minmax(0,1fr) 246px;align-items:start}
.rail{position:sticky;top:98px;height:calc(100vh - 98px);overflow-y:auto;
  background:var(--rail);border-right:1px solid var(--rule);padding:0 0 40px}

/* 搜索 */
.search{position:sticky;top:0;background:var(--rail);padding:13px 16px 11px;
  border-bottom:1px solid var(--rule-soft);z-index:2}
.search input{width:100%;padding:9px 12px;background:var(--surface);
  border:1px solid var(--rule);color:var(--ink);font-family:var(--sans);font-size:14px;
  border-radius:2px}
.search input:focus{outline:none;border-color:var(--seal);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--seal) 14%,transparent)}
.search input::placeholder{color:var(--ink-2);opacity:.7}
.search .n{font-family:var(--mono);font-size:11px;color:var(--ink-2);margin-top:7px;
  display:block;font-variant-numeric:tabular-nums}

/* 章节折叠 */
.ch{border-bottom:1px solid var(--rule-soft)}
.ch>summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:9px;
  padding:11px 16px;user-select:none}
.ch>summary::-webkit-details-marker{display:none}
.ch>summary:hover{background:var(--surface)}
.ch>summary:focus-visible{outline:2px solid var(--seal);outline-offset:-2px}
.ch .no{font-family:var(--mono);font-size:11px;color:var(--seal);font-weight:600;width:16px;flex:none}
.ch .tt{font-family:var(--serif);font-size:14.5px;font-weight:600;line-height:1.5;flex:1;letter-spacing:.01em}
.ch .ct{font-family:var(--mono);font-size:10.5px;color:var(--ink-2);flex:none;font-variant-numeric:tabular-nums}
.ch .chev{flex:none;width:9px;height:9px;border-right:1.5px solid var(--ink-2);
  border-bottom:1.5px solid var(--ink-2);rotate:-45deg;translate:0 -2px;transition:rotate .16s ease}
.ch[open] .chev{rotate:45deg;translate:0 -4px}
.ch ul{list-style:none;margin:0;padding:0 0 8px}
.ch li a{display:grid;grid-template-columns:32px 1fr;gap:0 8px;padding:7px 16px 7px 20px;
  color:var(--ink-2);font-size:13.2px;line-height:1.55;border-left:2px solid transparent}
.ch li a:hover{background:var(--surface);color:var(--ink);text-decoration:none}
.ch li a .r{font-family:var(--mono);font-size:11px;font-variant-numeric:tabular-nums}
.ch li a .qt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ch li a.cur{background:var(--surface);color:var(--ink);border-left-color:var(--seal);font-weight:600}
.ch li a.cur .r{color:var(--seal)}
.ch li mark{background:color-mix(in srgb,var(--seal) 22%,transparent);color:inherit;
  border-radius:1px;padding:0 1px}
.nohit{padding:18px 16px;font-size:13px;color:var(--ink-2);line-height:1.8}

/* ── 中栏 ── */
.main{padding:32px 38px 80px;max-width:820px}
.crumb{font-size:12.5px;color:var(--ink-2);margin-bottom:14px}
.meta{display:flex;border:1px solid var(--rule);background:var(--surface);margin-bottom:22px}
.meta div{padding:9px 15px;border-right:1px solid var(--rule-soft);flex:1;min-width:0}
.meta div:last-child{border-right:none}
.meta .v{font-family:var(--mono);font-size:12.5px;margin-top:1px;display:block;
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.main h1{font-family:var(--serif);font-size:25px;line-height:1.55;margin:0 0 20px;
  font-weight:600;letter-spacing:.02em;text-wrap:pretty}
.body p{font-size:16.5px;line-height:1.95;margin:0 0 1.15em}
.teaser{position:relative}
.teaser::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5.5em;
  background:linear-gradient(to bottom,transparent,var(--paper) 88%);pointer-events:none}
.more{margin-top:-14px;position:relative;z-index:1}
.more button{font-family:var(--sans);font-size:15px;font-weight:500;padding:12px 26px;
  background:var(--ink);color:var(--paper);border:none;border-radius:2px;cursor:pointer;
  letter-spacing:.04em;transition:opacity .12s}
.more button:hover{opacity:.85}
.more button:focus-visible{outline:2px solid var(--seal);outline-offset:2px}
.more .hint{font-size:13px;color:var(--ink-2);margin:10px 0 0}
.pager{display:flex;justify-content:space-between;gap:16px;font-size:13.5px;
  border-top:1px solid var(--rule);padding-top:16px;margin-top:34px;flex-wrap:wrap}

/* ── 右栏「延伸」 ── */
.aside{position:sticky;top:98px;padding:32px 24px 40px 4px;font-size:13.5px}
.aside section{margin-bottom:26px}
.aside h3{font-size:11px;letter-spacing:.14em;color:var(--ink-2);font-weight:500;
  margin:0 0 11px;padding-bottom:7px;border-bottom:1px solid var(--rule)}
.aside .tags{display:flex;flex-wrap:wrap;gap:6px}
.aside .tags a{font-size:12.5px;padding:3px 10px;border:1px solid var(--rule);
  color:var(--ink-2);border-radius:2px}
.aside .tags a:hover{border-color:var(--seal);color:var(--seal);text-decoration:none}
.aside .rel{display:flex;flex-direction:column;gap:11px}
.aside .rel a{display:grid;grid-template-columns:30px 1fr;gap:0 7px;color:var(--ink-2);
  line-height:1.55;font-size:13px}
.aside .rel a:hover{color:var(--ink);text-decoration:none}
.aside .rel .r{font-family:var(--mono);font-size:11px;color:var(--seal);
  font-variant-numeric:tabular-nums}

/* ── 弹窗 ── */
dialog{border:none;padding:0;background:transparent;max-width:min(420px,92vw)}
dialog::backdrop{background:rgba(20,22,26,.55);backdrop-filter:blur(2px)}
.modal{background:var(--surface);border:1px solid var(--rule);box-shadow:var(--shadow);
  padding:30px 30px 26px;text-align:center;border-radius:2px;position:relative}
.seal{display:inline-block;border:2px solid var(--seal);color:var(--seal);padding:7px 18px;
  rotate:-1.5deg;position:relative;margin-bottom:18px}
.seal::after{content:"";position:absolute;inset:3px;border:1px solid var(--seal);opacity:.5}
.seal span{font-family:var(--serif);font-size:15px;font-weight:600;letter-spacing:.24em;
  display:block;line-height:1.4;padding-left:.24em}
.modal h2{font-family:var(--serif);font-size:19px;margin:0 0 8px;font-weight:600;letter-spacing:.02em}
.modal .sub{font-size:13.5px;color:var(--ink-2);margin:0 0 20px;line-height:1.7}
.modal form{display:flex;flex-direction:column;gap:10px}
.modal input{padding:12px 14px;background:var(--paper);border:1px solid var(--rule);
  color:var(--ink);font-family:var(--mono);font-size:16px;letter-spacing:.14em;
  text-align:center;text-transform:uppercase;border-radius:2px}
.modal input::placeholder{letter-spacing:.06em;opacity:.55;text-transform:none}
.modal input:focus{outline:none;border-color:var(--seal);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--seal) 15%,transparent)}
.modal button.go{padding:12px;background:var(--ink);color:var(--paper);border:none;
  font-family:var(--sans);font-size:15px;font-weight:500;letter-spacing:.05em;
  cursor:pointer;border-radius:2px}
.getcode{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--rule-soft);
  font-size:13px;color:var(--ink-2);line-height:1.8}
.getcode code{font-family:var(--mono);font-size:14px;color:var(--sig);background:var(--paper);
  padding:2px 8px;border:1px solid var(--rule-soft);border-radius:2px;letter-spacing:.04em}
.modal .close{position:absolute;top:10px;right:12px;background:none;border:none;
  color:var(--ink-2);font-size:19px;cursor:pointer;line-height:1;padding:5px}

.toggle{position:fixed;right:14px;bottom:14px;background:var(--surface);
  border:1px solid var(--rule);color:var(--ink);font-family:var(--mono);font-size:11px;
  padding:7px 11px;cursor:pointer;border-radius:2px;box-shadow:var(--shadow);z-index:30}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

@media (max-width:1200px){
  .shell{grid-template-columns:282px minmax(0,1fr)}
  .aside{position:static;grid-column:2;padding:0 38px 60px;max-width:820px;
    display:grid;grid-template-columns:1fr 1fr;gap:0 34px}
}
@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .menu-btn{display:block}
  .slogan{display:none}
  .rail{position:fixed;top:98px;left:0;width:290px;z-index:19;translate:-100% 0;
    transition:translate .2s ease;box-shadow:var(--shadow)}
  .rail.open{translate:0 0}
  .main{padding:24px 20px 40px}
  .main h1{font-size:21px}
  .aside{grid-column:1;padding:0 20px 60px;grid-template-columns:1fr}
  .meta{flex-wrap:wrap}
}

/* ── 以下为 mockup.html 未覆盖到的页面类型补充样式，变量/风格延续上面 ── */
.body h2 { font-family: var(--serif); font-size: 18px; margin: 24px 0 10px; color: var(--ink); }
.chapter-block { margin-bottom: 22px; }
.chapter-block h2 { border-bottom: 1px solid var(--rule); padding-bottom: 8px; }
.q-list-full { list-style: none; padding: 0; margin: 0; }
.q-item, .q-list-full > li { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--rule-soft); }
.q-summary { color: var(--ink-2); font-size: 13.5px; margin: 4px 0 0; line-height: 1.7; }
.faq details { border: 1px solid var(--rule); border-radius: 2px; padding: 10px 14px; margin-bottom: 10px; background: var(--surface); }
.faq summary { cursor: pointer; font-weight: 600; }
.answer-content table { border-collapse: collapse; width: 100%; margin: 1em 0; }
.answer-content .table-wrap { overflow-x: auto; }
.answer-content th, .answer-content td { border: 1px solid var(--rule); padding: 6px 10px; text-align: left; font-size: 14px; }
.answer-content img { max-width: 100%; }
.answer-content .wm { color: var(--ink-2); font-size: 12px; display: block; margin-top: 16px; }