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

:root{
  --paper:#fdfbf7;
  --paper-2:#f5f5f5;
  --ink:#1a1a1a;
  --ink-2:#4d4d4d;
  --rule:#e0ddd6;
  --r:18px;
  --rail:184px;
}

*{box-sizing:border-box}

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

body{
  margin:0;
  padding-left:var(--rail);
  background:var(--paper);
  color:var(--ink);
  font-family:"Be Vietnam Pro","Noto Sans",system-ui,-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:17px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:8;
  pointer-events:none;
  opacity:.55;
  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.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
  background-repeat:repeat;
}

.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* ---------- 左侧固定栏 ---------- */
.masthead{
  position:fixed;
  top:0;left:0;bottom:0;
  width:var(--rail);
  z-index:30;
  display:flex;
  flex-direction:column;
  gap:20px;
  padding:22px 16px 22px;
  background:var(--paper);
  border-right:1px solid var(--rule);
}

.mark{
  width:46px;height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--ink);
  border-radius:12px;
  background:var(--paper-2);
  color:var(--ink);
  text-decoration:none;
  font-weight:700;
  font-size:19px;
  line-height:1;
  letter-spacing:-.02em;
}
.mark:hover,.mark:focus-visible{background:var(--ink);color:var(--paper)}

.masthead nav{min-width:0}

.masthead nav p{
  margin:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.masthead nav a{
  display:flex;
  align-items:center;
  min-height:44px;
  padding:8px 12px;
  border-radius:12px;
  background:var(--paper-2);
  color:var(--ink);
  font-size:16px;
  line-height:1.4;
  text-decoration:none;
  opacity:0;
  transform:translateX(-6px);
  transition:opacity .16s linear,transform .16s linear,background 0s linear,color 0s linear;
}
.masthead nav a.loaded{opacity:1;transform:none}
.masthead nav a:hover,.masthead nav a:focus-visible{background:var(--ink);color:var(--paper)}

.seek{
  margin-top:auto;
  display:flex;
  align-items:stretch;
  border:1px solid var(--rule);
  border-radius:12px;
  background:#fff;
  overflow:hidden;
}
.seek input{
  flex:1 1 auto;
  min-width:0;
  min-height:44px;
  border:0;
  padding:8px 10px;
  background:transparent;
  color:var(--ink);
  font:inherit;
  font-size:16px;
}
.seek input:focus{outline:2px solid var(--ink);outline-offset:-2px}
.seek button{
  border:0;
  min-width:44px;
  min-height:44px;
  padding:0 12px;
  background:var(--ink);
  color:var(--paper);
  font:inherit;
  font-size:16px;
  cursor:pointer;
}

/* ---------- 首屏 ---------- */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:96px 32px 128px;
  overflow:hidden;
  background:var(--paper-2);
  clip-path:polygon(0 0,100% 0,100% 93%,0 100%);
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(253,251,247,.84);
}

.hero-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(1) contrast(1.06);
}

.hero-in{
  position:relative;
  z-index:1;
  max-width:780px;
}

.hero h1{
  margin:0 0 18px;
  font-size:clamp(1.9rem,5.4vw,3.7rem);
  line-height:1.12;
  font-weight:700;
  letter-spacing:-.025em;
}

.hero-sub{
  margin:0 auto;
  max-width:46ch;
  font-size:clamp(1rem,1.7vw,1.16rem);
  line-height:1.7;
  color:var(--ink-2);
}

.band{
  display:block;
  width:68px;
  height:5px;
  margin:28px auto 0;
  background:var(--ink);
}

/* ---------- 主体 ---------- */
main{
  display:grid;
  grid-template-columns:minmax(0,1fr) 272px;
  gap:64px;
  max-width:1120px;
  margin:0 auto;
  padding:76px 40px 104px;
  align-items:start;
}

article{min-width:0}

article > div{
  scroll-margin-top:110px;
}

article > div + div{
  margin-top:56px;
  padding-top:56px;
  border-top:1px solid var(--rule);
}

article h2{
  margin:0 0 14px;
  font-size:clamp(1.42rem,3.2vw,2rem);
  line-height:1.3;
  font-weight:700;
  letter-spacing:-.015em;
  scroll-margin-top:132px;
}

article h2 + hr{
  width:52px;
  margin:0 0 22px;
  border:0;
  border-top:2px solid var(--ink);
}

article h3{
  margin:34px 0 10px;
  font-size:1.18rem;
  line-height:1.45;
  font-weight:600;
  scroll-margin-top:132px;
}

article p{margin:0 0 1.05em}
article ul,article ol{margin:0 0 1.15em;padding-left:1.2em}
article li{margin:0 0 .45em}
article li::marker{color:var(--ink-2)}

article a{
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
article a:hover{background:var(--paper-2)}

article img{
  display:block;
  max-width:100%;
  height:auto;
  border-radius:var(--r);
}

article figure{margin:26px 0}
article figcaption{margin-top:8px;font-size:16px;color:var(--ink-2)}

article blockquote{
  margin:26px 0;
  padding:16px 20px;
  background:var(--paper-2);
  border-radius:var(--r);
}
article blockquote p:last-child{margin:0}

article table{
  width:100%;
  border-collapse:collapse;
  font-size:16px;
  margin:0 0 1.2em;
}
article th,article td{
  padding:10px 12px;
  text-align:left;
  border-bottom:1px solid var(--rule);
  vertical-align:top;
}
article th{font-weight:600}

article code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.94em;
  background:var(--paper-2);
  padding:.1em .35em;
  border-radius:6px;
}

article pre{
  overflow-x:auto;
  padding:16px;
  background:var(--paper-2);
  border-radius:var(--r);
  font-size:15px;
  line-height:1.6;
}
article pre code{background:none;padding:0}

/* ---------- 侧栏 ---------- */
aside{
  position:sticky;
  top:32px;
  padding-left:22px;
  border-left:1px solid var(--rule);
}

aside h2{
  margin:0 0 10px;
  font-size:16px;
  font-weight:600;
  letter-spacing:.16em;
}

aside hr{
  width:40px;
  margin:0 0 18px;
  border:0;
  border-top:2px solid var(--ink);
}

aside ol{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
  counter-reset:toc;
}

aside li{counter-increment:toc}

aside a{
  display:flex;
  align-items:baseline;
  gap:10px;
  min-height:42px;
  padding:9px 12px;
  border-radius:var(--r);
  background:var(--paper-2);
  color:var(--ink);
  font-size:16px;
  line-height:1.4;
  text-decoration:none;
}
aside a::before{
  content:counter(toc,decimal-leading-zero);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--ink-2);
}
aside a:hover,aside a:focus-visible{background:var(--ink);color:var(--paper)}
aside a:hover::before,aside a:focus-visible::before{color:var(--paper)}

/* ---------- 页脚 ---------- */
footer{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
  gap:32px;
  padding:56px 40px 26px;
  background:var(--paper-2);
  border-top:1px solid var(--rule);
}

.foot-brand{
  margin:0;
  font-size:clamp(2.3rem,6.6vw,4.4rem);
  line-height:.98;
  font-weight:700;
  letter-spacing:-.035em;
}

.foot-key{
  margin:0;
  font-size:16px;
  line-height:1.9;
  color:var(--ink-2);
}

.foot-nav{
  margin:0;
  font-size:16px;
  line-height:1.9;
  color:var(--ink-2);
}

footer small{
  grid-column:1/-1;
  margin-top:6px;
  padding-top:18px;
  border-top:1px solid var(--rule);
  text-align:center;
  font-size:16px;
  color:var(--ink-2);
}

/* ---------- 滚动出现 ---------- */
.rv{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .18s linear,transform .18s linear;
}
.rv.in{opacity:1;transform:none}

/* ---------- 断点 ---------- */
@media (max-width:899px){
  body{padding-left:0}

  .masthead{
    position:sticky;
    top:0;left:auto;bottom:auto;
    width:auto;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    gap:10px 12px;
    padding:10px 14px 12px;
    border-right:0;
    border-bottom:1px solid var(--rule);
    background:var(--paper);
  }

  .mark{width:44px;height:44px;font-size:18px}

  .seek{order:3;flex:1 1 120px;margin-top:0}

  .masthead nav{order:4;flex:1 1 100%}

  .masthead nav p{
    flex-direction:row;
    gap:8px;
    overflow-x:auto;
    padding-bottom:4px;
    -webkit-overflow-scrolling:touch;
  }

  .masthead nav a{white-space:nowrap;opacity:1;transform:none}

  .hero{
    min-height:86vh;
    min-height:86svh;
    padding:64px 18px 96px;
    clip-path:polygon(0 0,100% 0,100% 96%,0 100%);
  }

  main{
    grid-template-columns:1fr;
    gap:44px;
    padding:44px 18px 64px;
  }

  aside{
    position:static;
    order:2;
    padding:28px 0 0;
    border-left:0;
    border-top:1px solid var(--rule);
  }

  aside ol{flex-direction:row;flex-wrap:wrap}
  aside li{flex:0 1 auto}

  article > div{scroll-margin-top:150px}

  footer{
    grid-template-columns:1fr;
    gap:18px;
    padding:44px 18px 24px;
  }
  .foot-nav{line-height:1.8}
}

@media (max-width:400px){
  .hero h1{font-size:1.85rem}
  .foot-brand{font-size:2.1rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
  .masthead nav a{opacity:1;transform:none}
  *,*::before,*::after{transition:none!important;animation:none!important}
}

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