:root{
  --paper:#fafaf8;
  --ink:#1a1a1a;
  --gray:#4a4a4a;
  --tnb:46px;
  --rail:198px;
  --railw:210px;
}
*{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Noto Sans SC",system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  font-size:17px;
  line-height:1.72;
  font-weight:400;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:9000;
  pointer-events:none;
  opacity:.5;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E");
}
img{max-width:100%;height:auto;display:block}
p{margin:0 0 16px}
a{color:var(--ink)}
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px dashed var(--ink);
  outline-offset:2px;
}
.skip{
  position:absolute;
  left:8px;
  top:-60px;
  z-index:9500;
  background:#fff;
  border:2px solid var(--ink);
  border-radius:4px;
  padding:8px 12px;
  text-decoration:none;
}
.skip:focus{top:8px}

/* 顶部细条 */
.tnb{
  position:fixed;
  left:0;right:0;top:0;
  height:var(--tnb);
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 12px;
  background:var(--paper);
  border-bottom:2px solid var(--ink);
}
.tnb-home{display:block;text-decoration:none;line-height:0}
.mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border:2px solid var(--ink);
  border-radius:4px;
  background:#fff;
  transform:rotate(-3deg);
  font-size:17px;
  font-weight:700;
  line-height:1;
}
.mark img{width:24px;height:24px;object-fit:contain}
.tnb-btn{
  font:inherit;
  font-size:16px;
  min-height:40px;
  padding:8px 15px;
  color:var(--ink);
  background:#fff;
  border:2px solid var(--ink);
  border-radius:4px;
  transform:rotate(1.2deg);
  cursor:pointer;
}

/* 左侧竖排导航 */
.rail{
  position:fixed;
  left:0;top:var(--tnb);bottom:0;
  width:var(--rail);
  z-index:55;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:18px 12px 24px;
  background:var(--paper);
  border-right:2px solid var(--ink);
  overflow-y:auto;
  overscroll-behavior:contain;
}
.rail-h{
  margin:0;
  font-size:17px;
  font-weight:700;
  letter-spacing:.2em;
  transform:rotate(-.8deg);
}
hr.scr{
  width:52px;
  height:3px;
  margin:0 0 2px;
  border:0;
  background:var(--ink);
  transform:rotate(-1.4deg);
}
.rail-nav ol{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.rail-nav a{
  display:flex;
  align-items:center;
  min-height:44px;
  padding:10px 11px;
  font-size:16px;
  line-height:1.35;
  text-decoration:none;
  background:#fff;
  border:2px solid var(--ink);
  border-radius:4px;
  transform:rotate(var(--r,0deg));
}
.rail-nav li:nth-child(3n+1) a{--r:-.8deg}
.rail-nav li:nth-child(3n+2) a{--r:.7deg}
.rail-nav a:hover{background:#f1f1ec}
.rail-back{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px;
  font-size:16px;
  text-decoration:none;
  border:2px dashed var(--ink);
  border-radius:4px;
  transform:rotate(-.5deg);
}

/* 主体 */
.main{
  margin-left:var(--railw);
  padding-top:var(--tnb);
}
.sheet{
  max-width:820px;
  margin:0 auto;
  padding:0 24px 70px;
}
.hero{
  min-height:45vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:14px;
  padding:26px 0 34px;
}
.sticker{
  align-self:flex-start;
  max-width:100%;
  padding:4px 11px;
  font-size:14px;
  letter-spacing:.18em;
  background:#fff;
  border:2px solid var(--ink);
  border-radius:4px;
  transform:rotate(-2deg);
}
h1{
  margin:0;
  font-size:clamp(2rem,6.2vw,3.8rem);
  line-height:1.14;
  font-weight:700;
  letter-spacing:-.01em;
  overflow-wrap:anywhere;
  transform:rotate(-.5deg);
}
.lead{
  margin:0;
  max-width:46ch;
  color:var(--gray);
  font-size:17px;
}

/* 正文区块 */
.sheet > div{
  padding:28px 0 30px;
  border-top:2px solid var(--ink);
  scroll-margin-top:calc(var(--tnb) + 14px);
}
.sheet > div:last-child{padding-bottom:8px}
.sheet h2{
  margin:0 0 8px;
  font-size:clamp(1.32rem,3.4vw,1.72rem);
  line-height:1.3;
  font-weight:700;
  transform:rotate(-.4deg);
  overflow-wrap:anywhere;
}
.sheet h2 + hr{
  width:64px;
  height:3px;
  margin:0 0 18px;
  border:0;
  background:var(--ink);
  opacity:.9;
  transform:rotate(-1.2deg);
}
.sheet h3{
  margin:26px 0 10px;
  font-size:clamp(1.1rem,2.6vw,1.28rem);
  font-weight:700;
  letter-spacing:.01em;
}
.sheet h3 + hr{
  width:40px;
  height:2px;
  margin:0 0 14px;
  border:0;
  background:var(--gray);
  transform:rotate(-1.6deg);
}
.sheet ul,.sheet ol{margin:0 0 16px;padding-left:1.35em}
.sheet li{margin:0 0 8px}
.sheet a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.sheet a:hover{background:#f0f0ea}
.sheet blockquote{
  margin:20px 0;
  padding:12px 16px;
  border:2px solid var(--ink);
  border-radius:4px;
  background:#fff;
  transform:rotate(-.4deg);
  color:var(--gray);
}
.sheet blockquote p:last-child{margin:0}
.sheet code{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:15px;
  background:#eeeee7;
  padding:1px 5px;
  border-radius:4px;
}
.sheet pre{
  overflow-x:auto;
  padding:14px;
  border:2px solid var(--ink);
  border-radius:4px;
  background:#fff;
}
.sheet pre code{background:none;padding:0}
.sheet table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:16px}
.sheet th,.sheet td{border:2px solid var(--ink);padding:8px 10px;text-align:left}
.sheet figure{margin:0 0 18px}
.sheet figcaption{font-size:15px;color:var(--gray);padding-top:6px}
.sheet img{
  border:2px solid var(--ink);
  border-radius:4px;
  background:#fff;
}

/* 页脚 */
.foot{
  margin-left:var(--railw);
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:16px 20px;
  padding:24px 24px 34px;
  border-top:2px solid var(--ink);
  background:#fff;
  font-size:16px;
}
.foot > section,.foot > nav{
  flex:1 1 150px;
  min-width:0;
  border:2px solid var(--ink);
  border-radius:4px;
  padding:10px 12px;
}
.foot-mark{
  display:flex;
  align-items:center;
  gap:9px;
  transform:rotate(-.7deg);
}
.foot-mark a{line-height:0;text-decoration:none}
.foot-brand{font-weight:700;overflow-wrap:anywhere}
.foot-nav{transform:rotate(.4deg)}
.foot-nav ol{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:2px 12px;
}
.foot-nav a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  font-size:16px;
  text-decoration:none;
}
.foot-nav a:hover{text-decoration:underline;text-decoration-thickness:2px}
.foot-sub form{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.foot-sub label{font-size:16px}
.foot-sub input{
  flex:1 1 110px;
  min-width:0;
  min-height:40px;
  padding:8px 10px;
  font:inherit;
  font-size:16px;
  color:var(--ink);
  background:var(--paper);
  border:2px solid var(--ink);
  border-radius:4px;
}
.foot-sub button{
  font:inherit;
  font-size:16px;
  min-height:40px;
  padding:8px 14px;
  color:var(--ink);
  background:var(--paper);
  border:2px solid var(--ink);
  border-radius:4px;
  cursor:pointer;
}
.foot-copy{
  flex:0 0 auto;
  margin-left:auto;
  transform:rotate(-.6deg);
  align-self:flex-end;
}
.foot-copy p{margin:0;color:var(--gray);overflow-wrap:anywhere}

/* 显现 */
.js .sheet > div{
  opacity:0;
  transform:translateY(12px) rotate(-.3deg);
}
.js .sheet > div.on{
  opacity:1;
  transform:none;
  transition:opacity .26s steps(4),transform .26s steps(4);
  transition-delay:var(--d,0ms);
}

/* 抽屉 */
@media (max-width:899px){
  .rail{
    width:76%;
    max-width:290px;
    transform:translateX(-103%);
    transition:transform .18s steps(3);
    background:var(--paper);
    padding-top:20px;
  }
  body.rail-open .rail{transform:none}
  .main,.foot{margin-left:0}
  .sheet{padding:0 16px 56px}
  .foot{padding:20px 16px 30px}
  .foot-copy{margin-left:0;align-self:auto}
  .foot-mark,.foot-nav,.foot-copy{transform:none}
  body.rail-open{overflow:hidden}
  h1{transform:none}
}
@media (min-width:900px){
  .tnb-btn{display:none}
  .tnb-home{cursor:default}
}
@media (max-width:420px){
  body{font-size:16px}
  .sheet{padding:0 14px 50px}
  .foot{padding:18px 14px 28px}
  .hero{min-height:40vh;padding:18px 0 26px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rail{transition:none}
  .js .sheet > div{opacity:1;transform:none}
  .js .sheet > div.on{transition:none}
}

button[aria-expanded]{min-width:44px;min-height:44px}