:root{
  --bg:#F7F5F0;
  --ink:#1F1F1F;
  --muted:#6B6B6B;
  --line:rgba(31,31,31,.08);

  --c-main:#2C4A66;
  --c-main-deep:#1A2E42;
  --c-amber:#A8763E;
  --c-red:#B33A3A;

  --radius:.75rem;
  --serif:"Noto Serif SC","Source Han Serif SC","Songti SC","SimSun",serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;

  --header-h:3.375rem;
  --read-w:48rem;
}

/* ===================== 顶栏 ===================== */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(247,245,240,.72);
  -webkit-backdrop-filter:blur(1.25rem) saturate(1.6);
  backdrop-filter:blur(1.25rem) saturate(1.6);
  border-bottom:1px solid var(--line);
}

.header-inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  grid-template-areas:"logo nav search";
  align-items:center;
  gap:1rem;
  height:var(--header-h);
  max-width:90rem;
  margin:0 auto;
  padding:0 1.5rem;
}

.logo{
  grid-area:logo;
  justify-self:start;
  display:flex;
  align-items:center;
  gap:.5rem;
}
.logo-mark{
  width:1.75rem;
  height:1.75rem;
  border-radius:.4375rem;
  object-fit:cover;
  box-shadow:0 .1875rem .5rem rgba(44,74,102,.3);
}
.logo-text{
  font-family:var(--serif);
  font-size:.9375rem;
  letter-spacing:.12em;
}

.nav{
  grid-area:nav;
  justify-self:center;
  display:flex;
  gap:1.5rem;
  font-size:.84375rem;
}
.nav a{
  position:relative;
  color:var(--muted);
  transition:color .22s;
}
.nav a:hover{color:var(--ink)}
.nav a.active{color:var(--ink)}
.nav a.active::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-.5rem;
  width:.1875rem;
  height:.1875rem;
  border-radius:50%;
  background:var(--c-main);
  transform:translateX(-50%);
}

.search{
  grid-area:search;
  justify-self:end;
  display:flex;
  align-items:center;
  gap:.375rem;
  padding:.25rem .25rem .25rem .75rem;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(.5rem);
  backdrop-filter:blur(.5rem);
  transition:border-color .25s,background .25s;
}
.search:focus-within{
  border-color:rgba(44,74,102,.35);
  background:rgba(255,255,255,.88);
}
.search-icon{flex:0 0 auto;color:var(--muted)}
.search input{
  width:8rem;
  border:0;
  background:transparent;
  outline:none;
  font:inherit;
  font-size:.8125rem;
  color:var(--ink);
}
.search input::placeholder{color:#9A9A9A}
.search-btn{
  border:0;
  cursor:pointer;
  padding:.32rem .85rem;
  border-radius:999px;
  background:var(--ink);
  color:#fff;
  font-size:.75rem;
  letter-spacing:.08em;
  transition:background .25s;
}
.search-btn:hover{background:var(--c-main)}

.nav-toggle,
.search-toggle{
  display:none;
  width:2.25rem;
  height:2.25rem;
  border-radius:.625rem;
  border:1px solid var(--line);
  background:rgba(255,255,255,.6);
  cursor:pointer;
  place-items:center;
  color:var(--ink);
  -webkit-backdrop-filter:blur(.5rem);
  backdrop-filter:blur(.5rem);
}

/* ===================== 顶部横幅 ===================== */
.doc-hero{
  position:relative;
  overflow:hidden;
  padding:4.5rem 1.5rem 3.25rem;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(44,74,102,.055) 0%, rgba(44,74,102,0) 100%);
}

.doc-hero::before,
.doc-hero::after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  filter:blur(1.25rem);
}
.doc-hero::before{
  top:-9rem;right:-7rem;
  width:24rem;height:24rem;
  background:radial-gradient(circle, rgba(44,74,102,.14), transparent 68%);
}
.doc-hero::after{
  bottom:-11rem;left:-7rem;
  width:22rem;height:22rem;
  background:radial-gradient(circle, rgba(168,118,62,.12), transparent 68%);
}

.doc-hero-inner{
  position:relative;
  z-index:2;
  max-width:var(--read-w);
  margin:0 auto;
}

.hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.3rem .85rem;
  border:1px solid rgba(44,74,102,.2);
  border-radius:999px;
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(.5rem);
  backdrop-filter:blur(.5rem);
  font-size:.625rem;
  letter-spacing:.2em;
  color:var(--c-main);
}
.hero-eyebrow i{
  display:block;
  width:.375rem;height:.375rem;
  border-radius:50%;
  background:var(--c-amber);
  box-shadow:0 0 0 0 rgba(168,118,62,.55);
  animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(168,118,62,.55)}
  70%{box-shadow:0 0 0 .4rem rgba(168,118,62,0)}
  100%{box-shadow:0 0 0 0 rgba(168,118,62,0)}
}

.hero-title{
  margin:1.25rem 0 .75rem;
  font-family:var(--serif);
  font-size:clamp(1.875rem,5vw,2.75rem);
  font-weight:600;
  letter-spacing:.12em;
  line-height:1.25;
  color:var(--ink);
}

.hero-sub{
  margin:0 0 1.75rem;
  max-width:32rem;
  font-size:.9375rem;
  line-height:1.85;
  color:var(--muted);
}

.hero-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}
.hero-meta span{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.35rem .85rem;
  border-radius:.5rem;
  border:1px solid var(--line);
  background:rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(.5rem);
  backdrop-filter:blur(.5rem);
  font-size:.71875rem;
  letter-spacing:.04em;
  color:var(--muted);
}
.hero-meta span.is-key{
  border-color:rgba(168,118,62,.32);
  background:rgba(168,118,62,.11);
  color:#7A5226;
  font-weight:500;
}
.hero-meta span.is-key::before{
  content:"";
  width:.3125rem;height:.3125rem;
  border-radius:50%;
  background:var(--c-amber);
}

/* ===================== 正文 ===================== */
.doc-content{
  max-width:var(--read-w);
  margin:0 auto;
  padding:3.25rem 1.5rem 5rem;
}

.doc-section{
  margin-bottom:3rem;
  scroll-margin-top:calc(var(--header-h) + 1.5rem);
}
.doc-section:last-of-type{margin-bottom:2rem}

.doc-section h2{
  display:flex;
  align-items:center;
  gap:.7rem;
  margin:0 0 1.1rem;
  padding-bottom:.75rem;
  font-family:var(--serif);
  font-size:1.125rem;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--ink);
  border-bottom:1px solid var(--line);
}
.doc-section h2::before{
  content:attr(data-num);
  flex:0 0 auto;
  display:grid;
  place-items:center;
  min-width:1.7rem;
  height:1.7rem;
  padding:0 .35rem;
  border-radius:.4375rem;
  background:linear-gradient(135deg,var(--c-main),var(--c-main-deep));
  color:#fff;
  font-family:var(--serif);
  font-size:.625rem;
  font-weight:500;
  letter-spacing:.06em;
  box-shadow:0 .125rem .4375rem rgba(44,74,102,.28);
}

.doc-section h3{
  display:flex;
  align-items:center;
  gap:.45rem;
  margin:1.6rem 0 .7rem;
  font-family:var(--serif);
  font-size:.875rem;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--c-main);
}
.doc-section h3::before{
  content:"";
  width:.1875rem;
  height:.875rem;
  border-radius:2px;
  background:linear-gradient(180deg,var(--c-main),rgba(44,74,102,.18));
}
.doc-section h3:first-of-type{margin-top:.4rem}

.doc-section p{
  margin:0 0 .875rem;
  font-size:.84375rem;
  line-height:1.95;
  color:#3A3A3A;
}
.doc-section p:last-child{margin-bottom:0}

.doc-section strong{
  font-weight:600;
  color:var(--ink);
}
.doc-section a{
  color:var(--c-main);
  border-bottom:1px solid rgba(44,74,102,.28);
  transition:border-color .22s,color .22s;
}
.doc-section a:hover{
  color:var(--c-main-deep);
  border-bottom-color:var(--c-main-deep);
}

/* 语义化标记 */
.underline{
  border-bottom:1px dashed rgba(44,74,102,.5);
  padding-bottom:.0625rem;
}
.highlight{
  padding:.05em .35em;
  border-radius:.3125rem;
  background:rgba(168,118,62,.14);
  color:#7A5226;
  font-weight:500;
}
.emph-blue{
  color:var(--c-main);
  font-weight:600;
}
.emph-red{
  color:var(--c-red);
  font-weight:600;
}

/* 规则块 */
.rule-block{
  margin:1rem 0;
  padding:1rem 1.25rem;
  border-left:.1875rem solid var(--c-main);
  border-radius:0 .5rem .5rem 0;
  background:rgba(44,74,102,.055);
}
.rule-block p{
  margin:0 0 .5rem;
  font-size:.8125rem;
  line-height:1.85;
  color:#3A3A3A;
}
.rule-block p:last-child{margin-bottom:0}

/* 引用块 */
.quote-block{
  position:relative;
  margin:1.25rem 0;
  padding:1.1rem 3rem 1.1rem 1.4rem;
  border-radius:0 .625rem .625rem 0;
  border-left:.1875rem solid var(--c-amber);
  background:rgba(168,118,62,.07);
  font-family:var(--serif);
  font-size:.8125rem;
  line-height:1.95;
  color:#4E3A20;
}
.quote-block::after{
  content:"”";
  position:absolute;
  top:.15rem;
  right:1rem;
  font-family:var(--serif);
  font-size:2.75rem;
  line-height:1;
  color:rgba(168,118,62,.28);
}

/* 圆点列表 */
.rule-list{
  margin:.75rem 0;
  padding:0;
  list-style:none;
}
.rule-list li{
  position:relative;
  padding-left:1.15rem;
  margin-bottom:.65rem;
  font-size:.8125rem;
  line-height:1.9;
  color:#3A3A3A;
}
.rule-list li:last-child{margin-bottom:0}
.rule-list li::before{
  content:"";
  position:absolute;
  left:.1rem;
  top:.72rem;
  width:.3125rem;
  height:.3125rem;
  border-radius:50%;
  border:1px solid rgba(44,74,102,.5);
  background:rgba(44,74,102,.14);
}

/* 步骤流 */
.step-flow{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin:1rem 0;
  padding:0;
  list-style:none;
  counter-reset:step;
}
.step-flow li{
  display:flex;
  align-items:center;
  gap:.45rem;
  padding:.45rem .85rem .45rem .5rem;
  border-radius:999px;
  border:1px solid rgba(44,74,102,.16);
  background:rgba(255,255,255,.7);
  font-size:.75rem;
  color:#33465A;
  counter-increment:step;
}
.step-flow li::before{
  content:counter(step);
  display:grid;
  place-items:center;
  width:1.125rem;height:1.125rem;
  border-radius:50%;
  background:var(--c-main);
  color:#fff;
  font-family:var(--serif);
  font-size:.5625rem;
}

/* 提示块 */
.note-amber{
  margin-top:1.25rem;
  padding:1rem 1.25rem;
  border-radius:.75rem;
  background:rgba(168,118,62,.09);
  border:1px solid rgba(168,118,62,.2);
  font-size:.8125rem;
  line-height:1.9;
  color:#6E4A1E;
}
.note-red{
  margin-top:1.25rem;
  padding:1rem 1.25rem;
  border-radius:.75rem;
  background:rgba(179,58,58,.07);
  border:1px solid rgba(179,58,58,.18);
  font-size:.8125rem;
  line-height:1.9;
  color:#8A2E2E;
}

/* 底部高亮框 */
.highlight-box{
  margin-top:2.75rem;
  padding:1.25rem 1.5rem;
  border-radius:var(--radius);
  border:1px solid rgba(44,74,102,.18);
  background:rgba(44,74,102,.06);
  font-size:.78125rem;
  line-height:1.95;
  color:#31485E;
}
.highlight-box strong{
  font-weight:600;
  color:var(--c-main);
}

/* 分隔与文末 */
.sep{
  margin:2.5rem 0 1.5rem;
  border:0;
  border-top:1px solid var(--line);
}
.doc-end{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  font-size:.71875rem;
  letter-spacing:.03em;
  color:var(--muted);
}
 
/* ===================== 响应式 ===================== */
@media (max-width:51.25rem){

  .doc-hero{padding:3.5rem 1.5rem 2.75rem}
  .doc-content{padding:2.5rem 1.5rem 4rem}

}

@media (max-width:40rem){
  .doc-hero{padding:3rem 1.25rem 2.5rem}
  .doc-content{padding:2.25rem 1.25rem 3.5rem}
  .hero-title{font-size:1.75rem;letter-spacing:.08em}
  .hero-sub{font-size:.875rem}
  .doc-section{margin-bottom:2.5rem}
  .doc-section h2{font-size:1rem;gap:.55rem}
  .doc-section h2::before{
    min-width:1.5rem;height:1.5rem;
    font-size:.5625rem;
  }
  .doc-section p{font-size:.8125rem}
  .quote-block{padding-right:2rem}

}