:root{
  --bg: #ffffff;
  --muted: #9aaeb1; /* 青灰 */
  --theme: #2b7a78; /* 湖蓝 / 青绿调主题 */
  --accent: #6aa6c9;
  --text: #0f1720;
  --serif: Georgia, "Songti SC", "Hiragino Mincho ProN", "STSong", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --container-min: 1120px;
  --container-max: 1440px;
}

/* Reset-ish minimal */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:var(--theme); text-decoration:none}
a:hover{text-decoration:underline}

.site-header{
  border-bottom:1px solid rgba(0,0,0,0.06);
  padding:14px 18px;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:1200px;
  margin:0 auto;
}
.header-inner .brand{font-weight:700; text-align:center; font-family:var(--serif); font-size:18px}
.nav-left, .nav-right{min-width:80px}
.home-link{font-size:14px; color:var(--muted)}
.nav-label{color:var(--muted); font-size:14px}

.ad{max-width:100%; margin:14px auto; padding:6px 0; text-align:center; color:var(--muted); font-size:13px}

.container{
  position:relative;
  margin:18px auto 40px;
  padding:28px 20px;
}
.vline{display:none}

/* Left rail and article default layout (mobile first) */
.left-rail{display:none}
.article{max-width:900px; margin:0 auto}
.title{font-family:var(--serif); font-weight:700; font-size:28px; margin:6px 0 8px; color:var(--text)}
.summary{color:var(--muted); margin:0 0 14px}
.content{font-family:var(--sans); color:var(--text)}
.content *{max-width:100%;}
.section-title{font-family:var(--serif); font-size:18px; margin:20px 0 8px}
.faq-body{color:var(--text)}
.rail-related .related-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px}

/* meta compact blocks for mobile (拆分左侧信息) */
.meta-pre{display:block; margin-bottom:8px}
.meta-pre ol{display:flex; gap:8px; list-style:none; padding:0; margin:0; color:var(--muted); font-size:13px}
.meta-pre ol li + li:before{content:"/"; color:var(--muted); margin-right:6px}
.meta-post{display:block; margin:8px 0 12px; color:var(--muted); font-size:13px}
.meta-post .meta-row{margin:3px 0}

/* Small devices safety */
@media (max-width:767px){
  body{padding-bottom:28px}
  .container{padding:18px; width:100%;}
  .title{font-size:22px; line-height:1.15}
  .summary{font-size:14px}
  .content{font-size:15px}
  .faq .section-title{font-size:16px}
  .rail-related{display:none}
  .ad{margin:14px 0}
  /* ensure no horizontal scroll */
  .content, .summary, .title{word-wrap:break-word; overflow-wrap:break-word}
}

/* Desktop rules: 强制两栏反置布局（右侧为正文八列，左侧四列） */
@media (min-width:1024px){
  .container{
    width:clamp(var(--container-min), 82vw, var(--container-max));
    display:grid;
    grid-template-columns: 1fr 2.1fr; /* 左侧约4列，右侧约8列的非对称比例 */
    gap:36px;
    align-items:start;
    padding:36px;
  }

  .left-rail{
    display:block;
    padding-right:28px;
  }
  .left-rail .rail-site .rail-brand{font-family:var(--serif); font-size:18px; color:var(--theme); margin-bottom:12px}
  .rail-breadcrumb ol{list-style:none; padding:0; margin:0 0 12px 0; color:var(--muted); font-size:13px}
  .rail-breadcrumb a{color:var(--muted)}
  .rail-meta{color:var(--muted); font-size:13px; margin-bottom:18px}
  .rail-related{margin-top:8px}
  .rail-heading{font-size:13px; color:var(--muted); margin:0 0 8px}
  .related-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
  .related-grid a{display:block; font-size:14px; color:var(--text)}

  .article{padding-left:8px; padding-right:2px}
  .title{font-size:36px; margin-bottom:6px}
  .summary{font-size:15px}
  .content{font-size:16px}
  .meta-pre, .meta-post{display:none} /* desktop uses left-rail instead */

  /* 1px 主题竖线贯穿布局（visual_signature） */
  .vline{display:block; position:absolute; left:calc(33.333% + 18px); top:0; bottom:0; width:1px; background:var(--theme); opacity:0.18}

  /* ensure left-rail and vline don't overlap content */
  .left-rail{position:relative}
  .article{min-height:200px}

  /* More spacious density */
  .article, .left-rail{padding-bottom:12px}
}

/* Accessibility: focus outlines */
a:focus{outline:2px dotted var(--accent); outline-offset:2px}

/* FAQ pattern: 编号式问答但不虚构步骤 - styling only */
.faq-body ol{counter-reset:faq; list-style:none; padding:0; margin:0}
.faq-body ol > li{counter-increment:faq; margin:12px 0}
.faq-body ol > li::before{content:counter(faq) "."; font-weight:700; color:var(--theme); margin-right:8px}
.faq-body .question{display:block; font-weight:600}
.faq-body .answer{display:block; margin-top:6px; color:var(--text)}

/* Footer */
.site-footer{border-top:1px solid rgba(0,0,0,0.06); padding:14px 18px; text-align:center; color:var(--muted); font-size:13px}

/* Prevent large hero-like area */
.title, .summary, .content{max-width:100%}