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

:root{
  --paper:#ffffff;
  --wash:#f5f5f5;
  --ink:#1f1f1f;
  --ink-2:#4d4d4d;
  --ink-3:#767676;
  --line:#e5e5e5;
  --gutter:clamp(18px,5vw,56px);
  --serif:'Lora','Songti SC','Noto Serif SC',Georgia,serif;
  --sans:'Raleway','PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,sans-serif;
  --e1:0 1px 2px rgba(18,18,18,.07);
  --e2:0 6px 16px rgba(18,18,18,.09);
  --e3:0 14px 34px rgba(18,18,18,.12);
  --e4:0 28px 64px rgba(18,18,18,.16);
}

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

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

body{
  margin:0;
  padding-bottom:118px;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  font-weight:400;
  line-height:1.78;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{display:block;max-width:100%;height:auto}
a{color:inherit}
p{margin:0 0 1em}
h1,h2,h3,h4{font-family:var(--serif);line-height:1.16;letter-spacing:-.012em;margin:0}
strong{font-weight:700}

:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ---------- 底层固定条 ---------- */
.dock{
  position:fixed;
  inset:auto 0 0 0;
  z-index:80;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(16px) saturate(120%);
  -webkit-backdrop-filter:blur(16px) saturate(120%);
  border-top:1px solid var(--line);
  box-shadow:0 -10px 34px rgba(18,18,18,.1);
}

.dock nav{
  display:flex;
  align-items:center;
  gap:6px;
  max-width:1180px;
  margin:0 auto;
  padding:11px 104px;
}

.dock-side{
  display:flex;
  align-items:center;
  gap:6px;
  flex:1 1 0;
  margin:0;
  min-width:0;
}
.dock-side--a{justify-content:flex-end}
.dock-side--b{justify-content:flex-start}

.dock-side a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 13px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--paper);
  box-shadow:var(--e1);
  font-size:16px;
  line-height:1.2;
  text-decoration:none;
  white-space:nowrap;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.dock-side a:hover{
  transform:translateY(-2px);
  box-shadow:var(--e3);
  background:var(--wash);
}
.dock-side a:active{transform:translateY(0);box-shadow:var(--e1)}

.dock-brand{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0;
  padding:0 14px;
  font-family:var(--serif);
  font-size:17px;
  font-weight:600;
  letter-spacing:.01em;
  white-space:nowrap;
  text-decoration:none;
}
.dock-logo{max-height:30px;width:auto}

.dock-cta{
  position:absolute;
  top:50%;
  right:clamp(12px,3vw,28px);
  transform:translateY(-50%);
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 19px;
  border-radius:999px;
  background:var(--ink);
  color:var(--paper);
  font-size:16px;
  line-height:1.2;
  text-decoration:none;
  box-shadow:var(--e3);
  z-index:2;
  transition:transform .18s ease,box-shadow .18s ease;
}
.dock-cta:hover{transform:translateY(-50%) translateY(-2px);box-shadow:var(--e4)}

/* ---------- 顶部主视觉 ---------- */
.hero{
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:center;
  min-height:45vh;
  overflow:hidden;
  padding:clamp(52px,8vw,96px) var(--gutter) clamp(44px,7vw,84px);
  background:var(--paper);
}

.hero-inner{
  position:relative;
  z-index:4;
  max-width:820px;
}

.hero h1{
  font-size:clamp(33px,7.6vw,74px);
  font-weight:600;
  letter-spacing:-.03em;
  line-height:1.04;
  text-wrap:balance;
}

.hero-lead{
  margin:20px 0 0;
  max-width:30em;
  font-size:clamp(17px,2.2vw,20px);
  line-height:1.62;
  color:var(--ink-2);
}

.hero-deco{
  position:absolute;
  inset:0;
  margin:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
}
.hero-deco span{
  position:absolute;
  display:block;
  transform:translate3d(0,var(--py,0),0);
  will-change:transform;
}
.deco-a{
  right:-12%;
  top:-16%;
  width:58%;
  height:134%;
  z-index:1;
  background:var(--wash);
  box-shadow:var(--e2);
  clip-path:polygon(20% 0,100% 0,100% 100%,0 100%);
}
.deco-b{
  right:8%;
  bottom:6%;
  width:30%;
  height:44%;
  z-index:3;
  background:var(--paper);
  border-bottom:5px solid var(--ink);
  box-shadow:var(--e4);
  clip-path:polygon(0 14%,100% 0,100% 100%,0 100%);
}
.deco-c{
  right:27%;
  top:11%;
  width:15%;
  height:28%;
  z-index:2;
  background:rgba(31,31,31,.07);
  box-shadow:var(--e3);
}

/* ---------- 正文栅格：左侧目录 ---------- */
.grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(196px,236px) minmax(0,1fr);
  gap:clamp(22px,4vw,56px);
  align-items:start;
  max-width:1180px;
  margin:0 auto;
  padding:clamp(24px,4vw,50px) var(--gutter) 0;
}

.side{
  position:sticky;
  top:20px;
  background:var(--paper);
  border:1px solid var(--line);
  border-bottom:4px solid var(--ink);
  box-shadow:var(--e2);
  padding:18px 14px 16px;
}

.side-title{
  font-size:20px;
  font-weight:600;
}

.subtitle,
.subhead,
.desc,
.lead{
  margin:7px 0 0;
  font-size:16px;
  line-height:1.6;
  color:var(--ink-3);
}

.side-list{
  counter-reset:sn;
  list-style:none;
  display:grid;
  gap:2px;
  margin:14px 0 0;
  padding:0;
}
.side-list li{counter-increment:sn}
.side-list a{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:40px;
  padding:3px 8px;
  border:1px solid transparent;
  font-size:16px;
  line-height:1.25;
  text-decoration:none;
  transition:background .16s ease,border-color .16s ease;
}
.side-list a::before{
  content:counter(sn,decimal-leading-zero);
  min-width:1.7em;
  font-family:var(--serif);
  font-size:13px;
  letter-spacing:.06em;
  color:var(--ink-3);
}
.side-list a:hover{
  background:var(--wash);
  border-color:var(--line);
}

/* ---------- 正文文章 ---------- */
.article{
  min-width:0;
  max-width:74ch;
  font-size:17px;
}

.article > div{
  position:relative;
  padding:clamp(28px,4.4vw,50px) 0;
  border-top:1px solid var(--line);
  scroll-margin-top:14px;
}
.article > div:first-child{
  border-top:0;
  padding-top:0;
}
.article > div::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  bottom:0;
  left:calc(-1 * var(--gutter));
  right:calc(-1 * var(--gutter));
  background:transparent;
  pointer-events:none;
}
.article > div:nth-of-type(even)::before{
  background:var(--wash);
  clip-path:polygon(0 2.4%,100% 0,100% 100%,0 97.6%);
}

.article h2{
  font-size:clamp(24px,3.4vw,33px);
  font-weight:600;
  margin:0 0 12px;
}
.article h3{
  font-size:clamp(19px,2.5vw,22px);
  font-weight:600;
  margin:1.7em 0 .5em;
}
.article h2 + .subtitle,
.article h2 + .subhead,
.article h2 + .desc,
.article h2 + .lead{margin-bottom:1.1em}
.article h2 + p,
.article h3 + p{margin-top:0}
.article p{line-height:1.82}
.article a{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.article a:hover{background:var(--wash)}
.article ul,.article ol{padding-left:1.35em;margin:0 0 1.2em}
.article li{margin:.35em 0}
.article blockquote{
  margin:1.4em 0;
  padding:14px 20px;
  border-left:4px solid var(--ink);
  background:var(--paper);
  box-shadow:var(--e2);
}
.article figure{margin:1.5em 0;position:relative;z-index:1}
.article img{box-shadow:var(--e3)}
.article aside{
  margin:1.5em 0;
  padding:16px 20px;
  border:1px solid var(--line);
  border-bottom:4px solid var(--ink);
  background:var(--paper);
  box-shadow:var(--e2);
}
.article table{
  width:100%;
  border-collapse:collapse;
  margin:1.3em 0;
  font-size:16px;
  table-layout:fixed;
  word-break:break-word;
}
.article th,.article td{border-bottom:1px solid var(--line);padding:9px 10px;text-align:left}
.article pre{
  margin:1.3em 0;
  padding:14px 16px;
  overflow-x:auto;
  background:var(--wash);
  border:1px solid var(--line);
  font-size:15px;
}
.article code{font-size:15px;word-break:break-word}

/* ---------- 页脚 ---------- */
.foot{
  position:relative;
  z-index:1;
  margin-top:clamp(46px,8vw,92px);
  padding:clamp(30px,6vw,60px) var(--gutter) 26px;
  border-top:1px solid var(--line);
  background:var(--wash);
}
.foot p{margin:0}
.foot-brand{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(34px,10vw,92px);
  line-height:1.02;
  letter-spacing:-.04em;
  word-break:break-word;
  overflow-wrap:anywhere;
}
.foot small{
  display:block;
  margin-top:14px;
  font-size:16px;
  color:var(--ink-3);
}

/* ---------- 进场 ---------- */
.js .hero-inner > *,
.js .article > div,
.js .side-list > li,
.js .foot-brand{
  opacity:0;
  transform:translate3d(0,16px,0);
  transition:opacity .6s ease var(--d,0ms),transform .62s cubic-bezier(.2,.7,.3,1) var(--d,0ms);
}
.js .in{opacity:1;transform:none}

/* ---------- 移动端 ---------- */
@media (max-width:760px){
  body{padding-bottom:196px}

  .dock nav{
    flex-wrap:wrap;
    gap:7px 6px;
    padding:9px 12px 11px;
    justify-content:center;
  }
  .dock-brand{
    order:-1;
    flex:0 0 100%;
    justify-content:center;
    padding:0;
    font-size:16px;
    text-align:center;
  }
  .dock-side{
    flex:1 1 auto;
    flex-wrap:wrap;
    justify-content:center;
    gap:6px;
  }
  .dock-side a{padding:0 11px;font-size:16px}
  .dock-cta{
    top:8px;
    right:12px;
    transform:none;
    min-height:40px;
    padding:0 15px;
  }
  .dock-cta:hover{transform:translateY(-2px)}

  .hero{padding-top:42px;min-height:0;padding-bottom:44px}
  .hero-lead{
    margin-top:14px;
    display:-webkit-box;
    -webkit-line-clamp:4;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .deco-a{width:78%;right:-24%}
  .deco-b{width:34%;height:36%;right:4%;bottom:8%}
  .deco-c{display:none}

  .grid{
    grid-template-columns:minmax(0,1fr);
    gap:22px;
    padding-top:22px;
  }
  .side{position:static;padding:15px 12px 14px}
  .side-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:2px 8px;
  }
  .side-list a{min-height:42px;font-size:16px}
}

@media (max-width:400px){
  .side-list{grid-template-columns:minmax(0,1fr)}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
  .js .hero-inner > *,
  .js .article > div,
  .js .side-list > li,
  .js .foot-brand{opacity:1;transform:none}
  .hero-deco span{will-change:auto}
}

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