:root{
  --bg: #fff7f8;              /* 浅粉底 */
  --card-bg: #ffffff;
  --text: #3d3d47;            /* 柔和深灰 */
  --muted: #8b8b99;           /* 次要文字 */
  --primary: #a8d8ea;         /* 马卡龙浅蓝 */
  --accent: #ffb1c1;          /* 马卡龙浅粉 */
  --border: #f1e6e8;          /* 轻浅边框 */
  --shadow: 0 8px 20px rgba(0,0,0,.06);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font:16px/1.7 ui-sans-serif, system-ui, -apple-system, "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, "Noto Sans", "Segoe UI", sans-serif;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.container{
  max-width:1100px;
  margin:0 auto;
  padding:0 20px;
}
.site-header{
  position:relative;
  padding:36px 0 16px;
  background:linear-gradient(135deg, rgba(168,216,234,.18), rgba(255,177,193,.18));
  border-bottom:1px solid var(--border);
}
.header-inner h1{
  margin:0;
  font-size:32px;
  letter-spacing:.5px;
}
.subtitle{
  margin:6px 0 16px;
  color:var(--muted);
}
.search-bar{
  margin:8px 0 14px;
}
.search-bar input{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--card-bg);
  color:var(--text);
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
  box-shadow:var(--shadow);
}
.search-bar input::placeholder{color:var(--muted)}
.search-bar input:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--primary) 35%, transparent);
}
.toc{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:8px 0 6px;
}
.toc a{
  display:inline-block;
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:999px;
  text-decoration:none;
  color:var(--text);
  background:var(--card-bg);
  transition:all .2s ease;
}
.toc a:hover{
  border-color:var(--primary);
  color:var(--primary);
  transform:translateY(-1px);
}
main section{
  padding:22px 0;
  border-bottom:1px dashed var(--border);
}
h2{
  font-size:22px;
  margin:0 0 12px;
  padding-left:2px;
  position:relative;
}
h2::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:64px;
  height:3px;
  background:linear-gradient(90deg,var(--primary),var(--accent));
  border-radius:2px;
}
.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
@media (max-width:980px){ .grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:640px){ .grid{ grid-template-columns:1fr } }
.card{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{
  transform:translateY(-2px);
  border-color:color-mix(in oklab, var(--primary) 60%, var(--border));
  box-shadow:0 10px 24px rgba(0,0,0,.10);
}
.card h3{
  margin:0 0 6px;
  font-size:18px;
}
.card .meta{
  margin:0 0 8px;
  color:var(--muted);
  font-size:14px;
}
.card p{
  margin:0;
}
.seo-note{
  background:linear-gradient(180deg, rgba(14,165,233,.08), rgba(124,58,237,.06));
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px 14px;
  margin:8px 0 26px;
}
.site-footer{
  padding:18px 0 32px;
  color:var(--muted);
  text-align:center;
  border-top:1px solid var(--border);
}