.hp{max-width:1200px;margin:0 auto}
.hp-head{margin-bottom:6px}
.hp-search{margin:0 0 22px}
.hp-body{display:grid;grid-template-columns:250px minmax(0,1fr);gap:40px;align-items:start}
.hp-toc{position:sticky;top:calc(var(--sh-h, 0px) + 16px);max-height:calc(100vh - var(--sh-h, 0px) - 32px);overflow-y:auto;padding:16px 0 14px;background:var(--pn);border:1px solid var(--ln);
  border-top:3px solid var(--acc);box-shadow:var(--sh);scrollbar-width:thin}
.hp-toc>p{margin:0 18px 10px;color:var(--dim);font:13px var(--f-lbl);letter-spacing:2.5px;text-transform:uppercase}
.hp-toc ol{list-style:none;margin:0;padding:0}
.hp-toc a{display:flex;gap:12px;padding:7px 18px;border-left:3px solid transparent;color:var(--tx);font:16.5px/1.2 var(--f-ui);text-decoration:none;
  transition:color .15s,background .15s,border-color .15s}
.hp-toc a span{flex:none;width:20px;color:var(--dim);font-family:var(--f-lbl)}
.hp-toc a:hover{color:var(--hi);background:var(--pn2)}
.hp-toc a.on{color:var(--hi);background:var(--pn2);border-left-color:var(--acc)}
.hp-toc a.on span{color:var(--acc-tx)}
.hp-main{min-width:0}
.hp-cat{scroll-margin-top:calc(var(--sh-h, 0px) + 16px);margin-bottom:40px}
.hp-cat>h2{display:flex;align-items:center;gap:14px;margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid var(--ln);color:var(--hi);
  font:27px/1.1 var(--f-num);letter-spacing:.5px;text-transform:uppercase}
.hp-n{flex:none;display:inline-block;transform:skewX(-14deg);padding:3px 10px 2px;background:var(--acc);color:var(--ink);font:17px/1.1 var(--f-num);letter-spacing:1px}
.hp-n>span{display:inline-block;transform:skewX(14deg)}
.hp-item{margin:0 0 12px;padding:15px 20px 16px;background:var(--pn);border:1px solid var(--ln);border-left:3px solid var(--acc);box-shadow:var(--sh)}
.hp-item>h3{margin:0 0 8px;color:var(--acc-tx);font:19px/1.2 var(--f-lbl);letter-spacing:.4px}
.hp-txt{color:var(--tx);font:16px/1.7 var(--f-ui);word-break:break-word}
.hp-txt img{max-width:100%;height:auto;margin:4px 2px;vertical-align:middle}
.hp-txt a{color:var(--link)}
.hp-txt b,.hp-txt strong{color:var(--hi)}
@media(max-width:991px){
  .hp-body{grid-template-columns:minmax(0,1fr);gap:22px}
  .hp-toc{position:static;max-height:none}
  .hp-toc ol{display:grid;grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .hp-toc{padding:12px 0 10px}
  .hp-toc ol{grid-template-columns:1fr 1fr}
  .hp-toc a{gap:7px;padding:5px 10px;font-size:14.5px}
  .hp-toc a span{width:16px}
  .hp-cat>h2{font-size:23px}
  .hp-item{padding:13px 15px 14px}
  .hp-txt{font-size:15px}
}