@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap');

:root{
  --ink:#1f1f1f;
  --paper:#ffffff;
  --sink:#f5f5f5;
  --line:#e5e5e5;
  --mute:#6c6c6c;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--sink);
  color:var(--ink);
  font-family:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  font-size:17px;
  line-height:1.75;
  font-weight:400;
}

img{max-width:100%;height:auto}
[id]{scroll-margin-top:136px}
hr{border:0;height:1px;background:var(--line);margin:14px 0 18px}

/* 顶部两行栏 */
.top{
  position:sticky;
  top:0;
  z-index:40;
  background:rgba(255,255,255,.95);
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(140%) blur(10px);
}
.top-a{
  max-width:1180px;
  margin:0 auto;
  padding:12px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.brand{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-size:20px;
  font-weight:700;
  letter-spacing:.08em;
  text-decoration:none;
  color:var(--ink);
}
.brand .logo{display:block;height:26px;width:auto}
.contact{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 16px;
  border-radius:4px;
  background:var(--ink);
  color:var(--paper);
  font-size:16px;
  text-decoration:none;
  transition:transform .18s ease,background .18s ease;
}
.contact:hover{background:#000;transform:translateY(-1px)}

.top-b{
  max-width:1180px;
  margin:0 auto;
  padding:0 20px 12px;
  min-height:56px;
  display:flex;
  align-items:center;
}
.drawer{width:100%}
.drawer > summary{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:0 16px;
  border:1px solid var(--ink);
  border-radius:4px;
  background:var(--paper);
  color:var(--ink);
  font-size:16px;
  font-weight:600;
  letter-spacing:.1em;
  list-style:none;
  cursor:pointer;
}
.drawer > summary::-webkit-details-marker{display:none}
.drawer > summary::before{
  content:"";
  width:16px;
  height:2px;
  background:currentColor;
  box-shadow:0 5px 0 currentColor,0 -5px 0 currentColor;
}
.drawer[open] > summary{
  position:fixed;
  top:16px;
  right:16px;
  z-index:130;
  background:var(--ink);
  border-color:var(--ink);
  color:var(--paper);
}
.drawer[open] > summary::before{display:none}
.drawer[open] > summary .lbl{display:none}
.drawer[open] > summary::after{content:"关闭";letter-spacing:.1em}

.drawer > menu{
  position:fixed;
  inset:0;
  z-index:120;
  margin:0;
  padding:96px 28px 40px;
  list-style:none;
  background:var(--paper);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2px;
  overflow-y:auto;
}
.drawer > menu li{width:100%;max-width:640px;margin:0 auto}
.drawer > menu a{
  display:flex;
  align-items:center;
  min-height:56px;
  padding:4px 2px;
  border-bottom:1px solid var(--line);
  color:var(--ink);
  font-size:clamp(19px,2.4vw,24px);
  font-weight:600;
  text-decoration:none;
  transition:padding-left .2s ease,color .2s ease;
}
.drawer > menu a:hover{padding-left:10px;color:#000}

/* 主体 */
.shell{
  max-width:1180px;
  margin:0 auto;
  padding:20px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 292px;
  gap:16px;
  align-items:start;
}
div{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:16px;
  counter-reset:sec;
}
div > article{
  position:relative;
  padding:clamp(20px,3vw,34px);
  border-radius:4px;
  background:var(--paper);
  box-shadow:0 1px 2px rgba(0,0,0,.05);
}

/* 首屏 */
.hero{
  min-height:45vh;
  padding:0;
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  align-items:center;
  text-align:center;
  overflow:hidden;
}
.hero.no-fig{grid-template-columns:1fr}
.hero::before{
  content:"";
  position:absolute;
  inset:-20% 0;
  background-image:radial-gradient(#dcdcdc 1px,transparent 1px);
  background-size:22px 22px;
  opacity:.75;
  transform:translateY(var(--py,0));
  pointer-events:none;
}
.hero-fig{position:relative;z-index:1;align-self:stretch}
.hero-img{display:block;width:100%;height:100%;max-height:45vh;object-fit:cover}
.hero-txt{position:relative;z-index:1;padding:34px 26px}
.hero h1{
  margin:0 0 12px;
  font-size:clamp(26px,4vw,44px);
  line-height:1.25;
  letter-spacing:-.015em;
}
.hero-sub{margin:0;font-size:16px;color:var(--mute)}

/* 正文 */
div h2{
  display:flex;
  align-items:baseline;
  gap:12px;
  margin:0;
  font-size:clamp(20px,2.2vw,26px);
  line-height:1.35;
  font-weight:700;
  letter-spacing:-.01em;
  counter-increment:sec;
}
div h2::before{
  content:counter(sec,decimal-leading-zero);
  flex:none;
  font-size:13px;
  font-weight:600;
  color:#a9a9a9;
  letter-spacing:.16em;
  font-variant-numeric:tabular-nums;
}
div h3{margin:24px 0 10px;font-size:18px;font-weight:700}
div p{margin:0 0 16px}
div p:last-child,
div ul:last-child,
div ol:last-child{margin-bottom:0}
div ul,div ol{margin:0 0 16px;padding-left:1.3em}
div li{margin:0 0 8px}
div strong{font-weight:600}
div a{text-decoration-thickness:1px;text-underline-offset:3px}
div blockquote{
  margin:0 0 16px;
  padding:2px 0 2px 16px;
  border-left:3px solid var(--ink);
  color:#3a3a3a;
}
div table{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:16px}
div th,div td{border-bottom:1px solid var(--line);padding:10px 8px;text-align:left}
div th{font-weight:600}

/* 侧栏 */
.side{
  position:sticky;
  top:128px;
  padding:22px;
  border-radius:4px;
  background:var(--paper);
  box-shadow:0 1px 2px rgba(0,0,0,.05);
}
.side h2{margin:0;font-size:17px;font-weight:700;letter-spacing:.06em}
.side ul{list-style:none;margin:0;padding:0}
.side li + li{border-top:1px solid var(--line)}
.side a{
  display:flex;
  align-items:center;
  min-height:44px;
  color:var(--ink);
  font-size:16px;
  text-decoration:none;
}
.side a:hover{text-decoration:underline;text-underline-offset:3px}

/* 页脚 */
.footwrap{margin-top:34px;background:var(--ink);color:#ededed}
.foot{
  max-width:1180px;
  margin:0 auto;
  padding:46px 20px 26px;
  display:grid;
  grid-template-columns:1.5fr 1fr 1.3fr;
  gap:26px;
}
.foot h2{margin:0;font-size:16px;font-weight:600;letter-spacing:.12em;color:#fff}
.foot hr{background:#3a3a3a;margin:12px 0 14px}
.f-name{margin:0;font-size:20px;font-weight:700;letter-spacing:.08em;color:#fff}
.f-note{margin:0;font-size:16px;line-height:1.6;color:#b4b4b4}
.f-menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.f-menu a{
  display:flex;
  align-items:center;
  min-height:44px;
  color:#ededed;
  font-size:16px;
  text-decoration:none;
}
.f-menu a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.foot form{display:flex;flex-wrap:wrap;gap:8px}
.foot input{
  flex:1 1 150px;
  min-height:44px;
  padding:0 12px;
  border:1px solid #3a3a3a;
  border-radius:4px;
  background:#151515;
  color:#fff;
  font:inherit;
  font-size:16px;
}
.foot input::placeholder{color:#8d8d8d}
.foot button{
  min-height:44px;
  padding:0 18px;
  border:0;
  border-radius:4px;
  background:#fff;
  color:var(--ink);
  font:inherit;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
}
.foot button:hover{background:#ededed}
.copy{
  grid-column:1/-1;
  margin:6px 0 0;
  padding-top:14px;
  border-top:1px solid #383838;
  font-size:16px;
  color:#a5a5a5;
}

/* 回到顶部 */
.to-top{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:35;
  min-height:44px;
  padding:0 16px;
  border:0;
  border-radius:4px;
  background:var(--ink);
  color:#fff;
  font:inherit;
  font-size:16px;
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}
.to-top.on{opacity:1;pointer-events:auto}

/* 入场 */
.js div > article{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .5s ease,transform .5s ease;
}
.js div > article.in{opacity:1;transform:none}

@media (max-width:900px){
  body{font-size:16px}
  .shell{grid-template-columns:1fr;padding:14px;gap:14px}
  .side{position:static}
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-img{max-height:210px}
  .hero-txt{padding:26px 20px}
  .hero::before{inset:0}
  .foot{grid-template-columns:1fr;gap:18px}
  div table{display:block;overflow-x:auto}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js div > article{opacity:1;transform:none;transition:none}
  .hero::before{transform:none}
  .contact,.drawer > menu a{transition:none}
}

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