:root{
  --paper:#F1F0EE; --card:#FFFFFF; --ink:#121212; --ink2:#57544F; --muted:#8C8880;
  --rule:#DAD7D1; --acc:#0B7C74; --blue:#1B4DE4;
  --s15:15px; --s24:24px; --s39:39px; --s63:63px; --s103:103px;
  --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC",system-ui,sans-serif;
  --serif:"Songti SC","Source Han Serif SC",Georgia,serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --mx:144px; --my:96px;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;background:#0d0d0d;overflow:hidden;font-family:var(--sans);-webkit-font-smoothing:antialiased}
#fit{position:absolute;top:50%;left:50%;width:1920px;height:1080px;transform-origin:center center}
code{font-family:var(--sans);font-weight:700}

/* ---------- stage & slides ---------- */
#stage{position:absolute;inset:0;background:var(--paper);overflow:hidden}
.slide{position:absolute;inset:0;padding:var(--my) var(--mx);display:flex;flex-direction:column;
  opacity:0;transform:translate3d(72px,0,0);
  transition:opacity .5s var(--ease),transform .62s var(--ease);pointer-events:none;visibility:hidden}
.slide.active{opacity:1;transform:none;pointer-events:auto;visibility:visible;z-index:2}
.slide.before{transform:translate3d(-72px,0,0)}
.rv{opacity:0;transform:translate3d(0,20px,0);
  transition:opacity .52s var(--ease) var(--d,0s),transform .52s var(--ease) var(--d,0s)}
.slide.active .rv{opacity:1;transform:none}

/* ---------- chrome：页眉三段式 + 页脚 ---------- */
.hdr{flex:0 0 auto;display:flex;justify-content:space-between;align-items:flex-end}
.brand{font-size:var(--s24);font-weight:800;letter-spacing:-.01em}
.brand sup{font-size:9px;font-weight:600;vertical-align:super}
.hmeta{text-align:right;font-size:11px;line-height:1.5;color:var(--ink2);letter-spacing:.06em;font-weight:600}
.hline{flex:0 0 auto;height:1px;background:var(--ink);margin:14px 0 0}
.ftr{flex:0 0 auto;margin-top:auto;padding-top:18px;display:flex;justify-content:space-between;align-items:baseline;
  font-size:10px;color:var(--muted);letter-spacing:.05em;font-weight:500}
.ftr .sig{font-size:12px;color:var(--ink2);letter-spacing:0;font-weight:700}
.pgnum{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink2)}

/* ---------- type ---------- */
.chip{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--acc)}
.chip .bar{width:26px;height:2px;background:var(--acc)}
.chip.mut{color:var(--muted)}.chip.mut .bar{background:var(--muted)}
h1.t{font-size:var(--s63);font-weight:800;line-height:1.14;letter-spacing:-.02em;margin-top:18px}
h1.t .l{display:block;white-space:nowrap}
h1.t .l.mix{display:flex;align-items:center;gap:18px}
h1.t .l.mix .badge{margin-left:0}
.badge{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.1em;padding:5px 10px;border:1px solid var(--acc);
  color:var(--acc);vertical-align:middle;margin-left:14px}
.badge.b3{border-color:var(--muted);color:var(--muted)}

/* ---------- layout ---------- */
.body{flex:1 1 auto;min-height:0;display:flex;gap:56px;padding-top:30px}
.col{flex:1 1 620px;min-width:420px;display:flex;flex-direction:column;min-height:0}
.pts{margin-top:28px;display:flex;flex-direction:column}
.pt{display:flex;gap:18px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--rule)}
.pt:first-child{border-top:1px solid var(--rule)}
.pt .n{flex:0 0 30px;font-size:var(--s24);font-weight:800;color:var(--acc);font-variant-numeric:tabular-nums;line-height:1.3}
.pt .b{flex:1;min-width:0}
.pt .h{font-size:var(--s24);font-weight:700;line-height:1.4}
.pt .d{font-size:var(--s15);line-height:1.65;color:var(--ink2);margin-top:5px}
.pt .d em{font-style:normal;font-weight:700;color:var(--ink);background:linear-gradient(transparent 62%,#BFE0DB 62%)}
.pts.tight .pt{padding:8px 0}
.pts.tight .pt .h{font-size:17px}
.pts.tight .pt .d{font-size:13px;line-height:1.6;margin-top:3px}
.pts.tight .pt .n{font-size:15px;line-height:1.6}
.take{margin-top:auto;padding-top:20px;border-top:2px solid var(--ink);font-size:var(--s24);font-weight:700;line-height:1.45}
.take span{color:var(--acc)}

/* ---------- table ---------- */
table.tb{width:100%;border-collapse:collapse;margin-top:24px;font-size:15px}
table.tb th{text-align:left;font-size:11px;letter-spacing:.12em;color:var(--muted);font-weight:800;padding:0 0 11px;border-bottom:2px solid var(--ink)}
table.tb td{padding:12px 14px 12px 0;border-bottom:1px solid var(--rule);vertical-align:top;line-height:1.5}
table.tb td:first-child{font-weight:700;width:32%}
table.tb td.v{font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap;width:26%}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:32px}
.card{background:var(--card);border:1px solid var(--rule);border-top:3px solid var(--acc);padding:26px 28px}
.card .k{font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--muted)}
.card .h{font-size:var(--s24);font-weight:800;margin-top:8px}
.card .d{font-size:14px;line-height:1.65;color:var(--ink2);margin-top:8px}

/* ---------- chapter ---------- */
.lv{display:flex;gap:10px;align-items:center}
.lvchip{width:46px;height:46px;display:grid;place-items:center;border:2px solid var(--rule);font-size:15px;font-weight:800;color:var(--muted)}
.lvchip.on{border-color:var(--ink);background:var(--ink);color:var(--paper)}

/* ---------- 分级目录页 ---------- */
.lad{display:flex;flex-direction:column;margin-top:24px;flex:1;justify-content:center}
.lrow{display:flex;align-items:center;gap:24px;padding:17px 0;border-bottom:1px solid var(--rule)}
.lrow .lv{flex:0 0 58px;height:38px;display:grid;place-items:center;border:2px solid var(--ink);font-weight:800;font-size:13px}
.lrow .nm{flex:0 0 150px;font-size:var(--s24);font-weight:800}
.lrow .ds{flex:1;font-size:13px;color:var(--ink2);line-height:1.5}
.lrow .ss{flex:0 0 290px;font-size:11px;color:var(--muted);line-height:1.5;text-align:right}
.lrow .pp{flex:0 0 108px;text-align:right;font-size:12px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}

/* ---------- HUD ---------- */
#hud{position:fixed;right:22px;bottom:18px;z-index:40;display:flex;align-items:center;gap:12px;font-size:12px;color:#cfcac2;letter-spacing:.05em}
#hud button{all:unset;cursor:pointer;padding:7px 11px;border:1px solid #45413b;color:#cfcac2;font-size:11px;letter-spacing:.08em;
  transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease)}
#hud button:hover{background:#e8e4de;color:#121212;border-color:#e8e4de}
#bar{position:fixed;left:0;bottom:0;height:2px;background:var(--acc);z-index:41;width:0;transition:width .5s var(--ease)}
#crumb{position:fixed;left:22px;bottom:18px;z-index:40;font-size:11px;color:#8f8981;letter-spacing:.09em}
#crumb b{color:#d8d3cb;font-weight:700}

/* ---------- TOC 面板（三级） ---------- */
#toc{position:fixed;inset:0;z-index:60;display:flex;opacity:0;pointer-events:none;transition:opacity .34s var(--ease)}
#toc.on{opacity:1;pointer-events:auto}
#toc .sc{flex:1;background:rgba(14,13,12,.62)}
#toc .pn{width:660px;background:var(--paper);height:100%;overflow-y:auto;padding:44px 46px 60px;
  transform:translate3d(-100%,0,0);transition:transform .44s var(--ease)}
#toc.on .pn{transform:none}
#toc h2{font-size:var(--s39);font-weight:800;letter-spacing:-.02em}
#toc .hint{font-size:11px;color:var(--muted);margin-top:8px;letter-spacing:.05em}
.tg{border-top:1px solid var(--rule);margin-top:22px}
.tg>.h{display:flex;align-items:center;gap:16px;padding:15px 0;cursor:pointer}
.tg>.h .lv{width:44px;height:30px;display:grid;place-items:center;border:2px solid var(--rule);font-size:11px;font-weight:800;color:var(--muted);
  transition:border-color .25s var(--ease),color .25s var(--ease)}
.tg.open>.h .lv{border-color:var(--ink);color:var(--ink)}
.tg>.h .nm{font-size:var(--s24);font-weight:800;flex:1}
.tg>.h .ar{font-size:14px;color:var(--muted);transition:transform .3s var(--ease)}
.tg.open>.h .ar{transform:rotate(90deg)}
.tg .items{max-height:0;overflow:hidden;transition:max-height .42s var(--ease)}
.tg.open .items{max-height:1600px}
.ti{display:flex;gap:14px;align-items:baseline;padding:8px 0 8px 60px;cursor:pointer;border-top:1px dotted var(--rule);
  color:var(--ink2);font-size:14px;transition:color .2s var(--ease),padding-left .28s var(--ease)}
.ti:hover{padding-left:68px;color:var(--acc)}
.ti .p{flex:0 0 32px;font-size:11px;font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums}
.ti.cur{color:var(--acc);font-weight:700}

/* 出处说明（仅案例章节使用，全片其余部分保持无署名） */
.srcnote{margin-top:14px;font-size:11.5px;line-height:1.65;color:var(--muted);letter-spacing:.01em;
  padding-left:11px;border-left:2px solid var(--rule)}

/* ---------- 窄屏观看提示（投影稿不缩到手机） ---------- */
#gate{display:none}
@media (max-width:819px),(max-height:519px){
  #fit,#hud,#crumb,#bar,#toc{display:none !important}
  #gate{position:fixed;inset:0;z-index:90;display:block;overflow:auto;background:var(--paper);color:var(--ink)}
  .gate-inner{min-height:100%;max-width:560px;margin:0 auto;padding:48px 26px;
    display:flex;flex-direction:column;justify-content:center}
  .gate-kicker{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:800;
    letter-spacing:.16em;color:var(--acc)}
  .gate-kicker .bar{width:26px;height:2px;background:var(--acc)}
  #gateTitle{font-size:clamp(25px,6.4vw,38px);font-weight:800;line-height:1.24;letter-spacing:-.02em;margin-top:18px}
  .gate-text{font-size:14px;line-height:1.9;color:var(--ink2);margin-top:16px;max-width:34em}
  .gate-meta{margin-top:26px;border-top:1px solid var(--rule)}
  .gate-meta>div{display:flex;gap:16px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--rule)}
  .gate-meta dt{flex:0 0 44px;font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--muted)}
  .gate-meta dd{font-size:13px;line-height:1.7;color:var(--ink2)}
  .gate-home{align-self:flex-start;display:inline-flex;align-items:center;gap:12px;margin-top:30px;
    padding:13px 22px;border:1.5px solid var(--ink);color:var(--ink);text-decoration:none;
    font-size:13px;font-weight:800;letter-spacing:.05em;
    transition:background .22s var(--ease),color .22s var(--ease),gap .22s var(--ease)}
  .gate-home:hover,.gate-home:focus-visible{background:var(--ink);color:var(--paper);gap:18px;outline:none}
  .gate-alt{margin-top:14px;font-size:12px;color:var(--muted)}
  .gate-alt a{color:var(--ink2);text-decoration:none;border-bottom:1px solid var(--rule)}
  .gate-alt a:hover{color:var(--acc);border-bottom-color:var(--acc)}
  .gate-foot{margin-top:26px;font-size:10px;font-weight:600;letter-spacing:.09em;color:var(--muted)}
}
/* 横屏手机 / 矮窗口：压紧节奏，让主按钮留在首屏 */
@media (max-height:519px){
  .gate-inner{padding:24px 26px;justify-content:flex-start}
  #gateTitle{font-size:clamp(20px,4.4vw,30px);line-height:1.2;margin-top:12px}
  .gate-text{font-size:13px;line-height:1.7;margin-top:10px}
  .gate-meta{margin-top:14px}
  .gate-meta>div{padding:7px 0}
  .gate-home{margin-top:16px;padding:10px 18px}
  .gate-alt{margin-top:10px}
  .gate-foot{margin-top:14px}
}


/* ---------- 全书：HUD 里的章节拨片 ---------- */
#hud .hud-chap{display:inline-flex;align-items:center;gap:0}
#hud .hud-pip{font-size:11px;letter-spacing:.06em;padding:6px 10px;border:1px solid #45413b;
  color:#cfcac2;text-decoration:none;line-height:1.45;
  transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease)}
#hud a.hud-pip:hover,#hud a.hud-pip:focus-visible{background:#e8e4de;color:#121212;border-color:#e8e4de;outline:none}
#hud .hud-pip.is-cur{background:#e8e4de;color:#121212;border-color:#e8e4de;font-weight:700}
#hud .hud-book{color:#8f8981;font-size:11px;letter-spacing:.08em;text-decoration:none;padding:7px 2px;
  border-bottom:1px solid transparent;transition:color .22s var(--ease),border-color .22s var(--ease)}
#hud .hud-book:hover,#hud .hud-book:focus-visible{color:#e8e4de;border-bottom-color:#45413b;outline:none}

/* ---------- 窄屏观看模式：跳过警告 / 横屏旋转播放 ---------- */
@media (max-width:819px),(max-height:519px){
  .gate-acts{display:flex;flex-direction:column;gap:10px;margin-top:28px}
  .gate-btn{appearance:none;font:inherit;text-align:left;cursor:pointer;
    display:flex;justify-content:space-between;align-items:center;gap:14px;
    padding:14px 18px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);
    font-size:14px;font-weight:800;letter-spacing:.04em;
    transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease)}
  .gate-btn span{font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--muted)}
  .gate-btn.pri{background:var(--ink);color:var(--paper)}
  .gate-btn.pri span{color:var(--acc)}
  .gate-btn:hover,.gate-btn:focus-visible{background:var(--acc);border-color:var(--acc);color:#fff;outline:none}
  .gate-btn:hover span,.gate-btn:focus-visible span{color:#fff}
  .gate-note{margin-top:14px;font-size:11.5px;line-height:1.8;color:var(--muted);max-width:36em}
  /* 选了观看方式后：解除窄屏隐藏，稿件照常渲染 */
  body.nogate #fit,body.nogate #bar{display:block !important}
  body.nogate #crumb{display:block !important}
  body.nogate #hud,body.nogate #toc{display:flex !important}
  body.nogate #gate{display:none !important}
  /* 旋转播放时底部朝向错位的固定装饰件先收起来 */
  body.rot #hud,body.rot #crumb,body.rot #bar{display:none !important}
}
#vnav{position:fixed;left:50%;bottom:14px;z-index:95;display:none;transform:translateX(-50%);
  width:max-content;max-width:94vw;gap:6px;align-items:center;background:rgba(18,18,18,.92);border-radius:999px;padding:5px 6px}
#vnav.on{display:flex}
#vnav button{appearance:none;border:0;background:transparent;color:var(--paper);font:inherit;
  font-size:12px;font-weight:700;letter-spacing:.06em;padding:9px 15px;cursor:pointer;white-space:nowrap}
#vnav button[data-v="prev"],#vnav button[data-v="next"]{font-size:17px;line-height:1;padding:7px 13px}
@media (max-height:519px){
  .gate-acts{margin-top:16px;flex-direction:row;flex-wrap:wrap}
  .gate-btn{flex:1 1 200px;padding:11px 14px;font-size:13px}
  .gate-note{margin-top:10px;font-size:11px;line-height:1.6}
}