:root{
  --bg:#f6f8f8; /* overall page background */
  --band-1:#eaf3f5; /* 青灰浅 */
  --band-2:#ffffff; /* neutral band */
  --band-3:#eef7fb; /* 湖蓝浅 */
  --accent:#2f97a8; /* 视觉识别湖蓝 */
  --muted:#7b8b8f;
  --text:#0b1a1d;
  --max-width:1280px; /* desktop container width between 1120-1440 */
  --content-width:720px; /* comfortable reading width */
  --gap:20px;
  --line:20px; /* baseline rhythm */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* Reset-ish - lightweight */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-size:16px;
  line-height:1.5;
}
.wrap{margin:0 auto;padding:24px var(--gap)}
.wrap.narrow{max-width:900px}
.wrap.medium{max-width:960px}
.wrap.wide{max-width:var(--max-width)}

/* Header */
.site-header{padding:18px 0 6px;background:transparent;text-align:center}
.header-inner{display:flex;justify-content:center;align-items:center}
.site-title{font-weight:600;color:var(--accent);text-decoration:none}
.header-rule{height:1px;background:linear-gradient(90deg,transparent,rgba(0,0,0,0.06),transparent);margin-top:12px}

/* Bands - full width horizontal stripes */
.band{width:100%;display:block}
.band-top{background:var(--band-1)}
.band-summary{background:var(--band-2)}
.band-content{background:var(--band-2)}
.band-faq{background:linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.01));}
.band-related{background:var(--band-3)}

/* Article meta / title composition */
.article-meta{padding:18px 0}
.article-title{
  margin:0 0 8px 0;
  font-size:28px; /* will scale on desktop */
  font-weight:700;
  line-height:1.08;
  color:var(--text);
  letter-spacing:-0.02em;
  /* enforce visually no more than 2 lines */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.meta-row{font-size:13px;color:var(--muted);display:flex;gap:12px;flex-wrap:wrap}
.meta-row .published{color:var(--muted)}
.meta-row .current{color:var(--muted)}

.summary{margin:8px 0 0 0;color:var(--muted);font-size:15px}

/* Content area */
.content-wrap{display:flex;justify-content:center;padding:36px 0}
.article-body{position:relative;width:100%;max-width:var(--content-width);padding:26px;border:1px solid rgba(19,34,35,0.04);background:var(--band-2)}

/* Visual signature: subtle left accent bar and double-layer baseline grid */
.content-visual-signature{position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--accent);}
.article-content{
  position:relative;
  padding-left:14px; /* space from accent */
  background-image:
    repeating-linear-gradient(to bottom, rgba(0,0,0,0.02) 0, rgba(0,0,0,0.02) 1px, transparent 1px, transparent calc(var(--line) / 2)),
    repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--line) - 1px), rgba(0,0,0,0.03) calc(var(--line) - 1px), rgba(0,0,0,0.03) var(--line));
  background-size:100% var(--line),100% var(--line);
  background-repeat:repeat-y;
  background-position: 0 6px, 0 0;
}
.article-content > *:first-child{margin-top:0}
.article-content p{margin:0 0 1em 0;color:var(--text);font-size:16px}
.article-content h2, .article-content h3{margin:1em 0 0.6em 0}

/* FAQ pattern - top border in theme color */
.faq-heading{margin:0 0 12px 0;padding-top:6px;border-top:4px solid var(--accent);font-size:18px}
.faq-list{color:var(--text)}
.faq-list > *{margin:10px 0}

/* Related pattern - grid compact */
.related-heading{margin:0 0 12px 0;font-size:18px}
.related-grid{display:grid;gap:12px}
.related-grid > *{background:transparent;padding:6px 4px;border-left:3px solid rgba(0,0,0,0.03)}
.related-grid a{color:var(--text);text-decoration:none;font-size:14px}

/* Ad slots - independent containers */
.ad-slot{max-width:var(--max-width);margin:18px auto;padding:12px;box-sizing:border-box}
.ad-slot > *{display:block}

/* Footer */
.site-footer{padding:18px 0;color:var(--muted)}
.footer-row{text-align:center;font-size:13px}

/* Density - compact adjustments */
.article-title, .summary, .article-content p{margin-bottom:10px}

/* Desktop specific (>=1024px) - distinct structure differences */
@media (min-width:1024px){
  :root{font-size:17px;--content-width:760px}
  .article-title{font-size:40px}
  .wrap{padding:28px 40px}
  .content-wrap{padding:48px 0}
  /* article body gets subtle extra left gutter and no rounded corners */
  .article-body{padding:32px;border-width:1px}
  .content-visual-signature{width:8px}
  /* related grid becomes four-column compact titles */
  .related-grid{grid-template-columns:repeat(4,1fr)}
  .related-grid > *{padding:8px 10px}
  .related-grid a{font-size:14px;display:block}
}

/* Mobile specific (<=767px) - bands collapse to single column; reduced paddings */
@media (max-width:767px){
  :root{font-size:15px;--line:20px}
  .wrap{padding:14px}
  .site-header{padding:12px 0}
  .article-title{font-size:20px;line-height:1.12}
  .meta-row{font-size:12px}
  /* remove left accent, baseline grid simplified, article body becomes full width */
  .content-wrap{padding:18px 0}
  .article-body{max-width:100%;width:100%;padding:18px;border-left:0;border-right:0}
  .content-visual-signature{display:none}
  .article-content{background-image:repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--line) - 1px), rgba(0,0,0,0.02) calc(var(--line) - 1px), rgba(0,0,0,0.02) var(--line));background-position:0 0}
  /* FAQ and related compress */
  .faq-heading{font-size:16px}
  .related-grid{display:block}
  .related-grid > *{display:block;padding:8px 0;border-left:0;border-top:1px solid rgba(0,0,0,0.04)}
  .related-grid > *:first-child{border-top:0}
  .related-grid a{font-size:15px}
  /* ads reduce padding */
  .ad-slot{padding:8px}
}

/* Accessibility and content flow */
.article-content img, .article-content figure{max-width:100%;height:auto}

/* Avoid heavy visual effects per forbidden_pattern */
*{box-shadow:none}