:root{
  --bg-cream:#F7EFE6;
  --deep-brown:#3B2A23;
  --muted-brown:#5A433A;
  --text:#222222;
  --accent:#6A4F45;
  --max-desktop-width:1280px;
  --gap:20px;
  --radius:6px;
}
/* Base: 技术资讯紧凑型，系统字体 */
*{box-sizing:border-box}
html,body{height:100%;background:var(--bg-cream);color:var(--text);font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;line-height:1.45;margin:0}
a{color:var(--deep-brown);text-decoration:none}
.container{margin:0 auto;padding:28px;max-width:var(--max-desktop-width)}
.site-header{background:linear-gradient(180deg, var(--deep-brown) 0%, var(--deep-brown) 100%);color:var(--bg-cream);padding:10px 0}
.header-inner{max-width:var(--max-desktop-width);margin:0 auto;padding:0 18px;display:flex;flex-direction:column;align-items:center}
.mini-nav{width:100%;display:flex;align-items:center;justify-content:space-between;font-size:13px}
.mini-nav .brand{font-weight:700;letter-spacing:0.6px}
.header-rule{width:60%;border:none;border-top:2px solid rgba(255,255,255,0.06);margin:8px 0}
.pathline{font-size:12px;color:rgba(255,255,255,0.75);margin-bottom:6px}
.ad-strip.ad-top{max-width:var(--max-desktop-width);margin:12px auto;padding:8px 18px;text-align:center}
.page-wrap{padding:0 10px 40px}
.article{background:#fff;border-radius:0;box-shadow:none;padding:0;margin:0}
.article-head{padding:22px 18px 6px}
.title{font-size:24px;color:var(--deep-brown);margin:0 0 10px;line-height:1.1}
.meta{font-size:13px;color:var(--muted-brown);display:flex;gap:12px;align-items:center;margin-bottom:10px}
.summary{background:#fff;padding:10px 12px;border-left:3px solid var(--accent);margin:0 18px 18px;color:var(--muted-brown)}
/* Visual signature: 轻量首字强调但不改写内容 */
.article-content p:first-of-type::first-letter{font-size:1.2em;font-weight:700;color:var(--accent);padding-right:4px}
.article-content{padding:0 18px 18px;color:var(--text);font-size:15px}
.article-content p{margin:0 0 12px}
.content-area{display:grid;grid-template-columns:1fr;gap:var(--gap);align-items:start}
.main-column{order:1}
.side-column{order:2}
.info-card{background:#fff;padding:14px;border:1px solid #efe7dd;margin-bottom:14px}
.card-title{font-size:14px;color:var(--deep-brown);margin:0 0 8px}
.kw{font-size:13px;color:var(--muted-brown)}
.related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;font-size:13px}
.related-grid a{display:block;color:var(--deep-brown);padding:6px 8px;border-radius:4px}
.faq .section-title{font-size:16px;color:var(--deep-brown);margin:18px 0 8px}
.faq-list{background:#fff;padding:12px;border:1px solid #efe7dd}
.faq-list .faq-item{margin-bottom:10px}
.faq-list .faq-item strong{display:inline-block;margin-bottom:6px;color:var(--accent)}
.ad-block{margin:18px 0;padding:10px;background:transparent;text-align:center}
.site-footer{padding:18px;color:var(--muted-brown);font-size:13px;text-align:center}

/* Desktop: 强调宽屏双栏、非对称网格、正文和FAQ宽窄交替布局 */
@media (min-width:1024px){
  .container{padding:36px}
  .content-area{grid-template-columns:2fr 1fr;gap:28px;align-items:start}
  .main-column{order:1}
  .side-column{order:2}
  .article{background:#fff;border-left:6px solid var(--deep-brown)}
  .title{font-size:34px}
  .article-content{font-size:16px;padding-right:10px}
  /* FAQ 在主列视觉上作为宽窄交替：移动到主列底部占宽，但用窄行标题盒提示 */
  .faq{margin-top:18px}
  .faq .section-title{border-left:4px solid var(--accent);padding-left:10px}
  .related-grid{grid-template-columns:repeat(4,1fr);gap:10px}
  .related-grid a{padding:8px;border:1px dashed #f0e8e1;background:transparent}
  .ad-strip.ad-top,.ad-block{max-width:var(--max-desktop-width);margin-left:auto;margin-right:auto}
  .container{max-width:var(--max-desktop-width);}
}

/* Mobile: 320px 时不横向滚动、标题摘要紧凑、侧栏下移为区块 */
@media (max-width:767px){
  :root{--gap:12px}
  .header-inner{padding:0 12px}
  .mini-nav{font-size:12px}
  .header-rule{width:90%}
  .container{padding:14px}
  .title{font-size:20px;margin-bottom:6px}
  .summary{margin:6px 0 12px;padding:10px}
  .content-area{grid-template-columns:1fr}
  .main-column{order:1}
  .side-column{order:2}
  .related-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .info-card{padding:12px}
  .article-content{font-size:15px}
  .ad-strip.ad-top{padding:6px}
  .site-footer{font-size:12px;padding:14px}
  body{overflow-x:hidden}
}

/* Accessibility and density tweaks */
a:focus{outline:2px dashed var(--accent);outline-offset:3px}