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

:root{
  --page-width:1000px;
  --text:#333;
  --secondary:#666;
  --muted:#999;
  --blue:#1677ff;
  --border:#e9edf2;
  --bg:#f5f6f8;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Noto Sans SC","Source Han Sans SC","Microsoft YaHei",sans-serif;
  font-size:16px;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit}
.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:1000;
  height:64px;
  background:rgba(255,255,255,.86);
  border-bottom:1px solid rgba(225,229,234,.78);
  box-shadow:0 1px 10px rgba(0,0,0,.035);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.header-inner{
  width:min(var(--page-width),calc(100% - 40px));
  height:64px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand{display:flex;align-items:center;gap:9px;height:64px;color:#333;font-size:17px;font-weight:600;white-space:nowrap}
.brand img{width:34px;height:34px;display:block;object-fit:contain}
.download-btn{
  height:36px;padding:0 18px;border-radius:4px;
  display:inline-flex;align-items:center;justify-content:center;
  color:#fff;background:var(--blue);
  font-size:14px;font-weight:500;line-height:1;
}
.download-btn:hover{background:#0f65d8}
.page{
  width:min(var(--page-width),calc(100% - 40px));
  margin:92px auto 60px;
}
.article-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
}
.article-header{
  width:min(900px,calc(100% - 48px));
  margin:0 auto;
  padding:42px 0 12px;
}
.article-title{
  margin:0;
  font-size:30px;
  line-height:1.45;
  font-weight:700;
  text-align:left;
  color:#222;
}
.article-body{
  width:min(900px,calc(100% - 48px));
  margin:0 auto;
  padding:0 0 58px;
}
.article-body p{margin:25px 0;color:#444;font-size:16px;line-height:2;text-align:left}
.article-body figure{margin:28px 0 34px;text-align:center}
.article-body figure img{
  display:block;width:auto;max-width:100%;max-height:700px;margin:0 auto;
  border:1px solid #e9e9e9;border-radius:3px;background:#fff;
}
.tip{
  margin:25px 0;padding:17px 21px;
  background:#f7fbff;border:1px solid #dceeff;border-left:3px solid var(--blue);
  border-radius:4px;
}
.tip-title{margin:0 0 6px;color:#1769d1;font-size:15px;font-weight:700;line-height:1.6}
.tip p{margin:0;color:#555;font-size:14px;line-height:1.85}
.guide-tip{margin-top:18px;margin-bottom:28px}
.summary-tip{margin-top:40px;padding:23px 25px;background:#f8fbff;border:1px solid #dce8f5;border-radius:5px}
.summary-tip .tip-title{font-size:17px;color:#222}
.summary-tip p{margin:0;color:#444;font-size:15px;line-height:1.95}
.article-footer{margin-top:34px;padding-top:24px;border-top:1px solid #eee;text-align:center;color:#aaa;font-size:13px}
@media(max-width:760px){
  .site-header,.header-inner{height:58px}
  .header-inner{width:calc(100% - 24px)}
  .brand{height:58px;font-size:14px;gap:7px}
  .brand img{width:30px;height:30px}
  .download-btn{height:34px;padding:0 13px;font-size:13px}
  .page{width:100%;margin:78px auto 30px}
  .article-card{border-left:0;border-right:0;border-radius:10px}
  .article-header{
    width:calc(100% - 32px);
    padding:28px 0 10px;
  }
  .article-title{font-size:24px}
  .article-body{width:calc(100% - 32px);padding-bottom:35px}
  .article-body p{font-size:15px;line-height:1.9;margin:21px 0}
  .article-body figure{margin:22px 0 28px}
  .tip{padding:15px 16px;margin:23px 0}
}

.article-subtitle {
    margin-top: 10px;
    color: #999;
    font-size: 14px;
    line-height: 1.7;
    font-weight: 400;
    text-align: left;
}