:root{
  --bg:#ffffff; --fg:#0c0d10; --muted:#60646c; --link:#1a73e8; --card:#f6f7f9; --border:#e5e7eb;
  --radius:16px; --max:980px;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0a0b0f; --fg:#e9ecf3; --muted:#a4a9b7; --link:#8ab4f8; --card:#12151b; --border:#262a33 }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font:16px/1.65 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
header{position:sticky;top:0;background:color-mix(in oklab, var(--bg) 85%, transparent);
  border-bottom:1px solid var(--border);backdrop-filter:saturate(180%) blur(10px);z-index:20}
.nav{max-width:var(--max);margin:0 auto;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav .left{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.logo{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,#4f46e5,#06b6d4);box-shadow:0 6px 18px rgba(79,70,229,.25)}
.pill{font-size:12px;padding:4px 10px;border-radius:999px;border:1px solid var(--border);color:var(--muted)}
main{max-width:var(--max);margin:0 auto;padding:24px 16px 64px}
section{scroll-margin-top:76px;margin-top:28px}
h1{font-size:clamp(28px,3.4vw,42px);line-height:1.15;margin:0 0 10px}
h2{font-size:clamp(22px,2.4vw,30px);margin:12px 0 6px}
h3{margin:6px 0 4px}
.subtitle{color:var(--muted);margin:4px 0 18px}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:var(--fg);color:var(--bg);font-weight:700;border:1px solid var(--border)}
.btn.ghost{background:transparent;color:var(--fg)}
.btn:hover{filter:brightness(.98)}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center;padding:32px 0}
/* 放在 css/style.css 的末尾（覆盖原规则） */
.teaser { background:#000; }           /* 可按需改背景色 */
.teaser img { width:100%; height:100%; object-fit: contain; }
figure{margin:0}
figcaption{color:var(--muted);font-size:13px;margin-top:6px}
pre{background:#0d1117;color:#c9d1d9;padding:14px;border-radius:10px;overflow:auto;border:1px solid #30363d}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
table{width:100%;border-collapse:collapse;border:1px solid var(--border);overflow:auto}
th,td{border:1px solid var(--border);padding:8px 10px;text-align:left;font-size:14px}
thead{background:color-mix(in oklab, var(--card) 60%, var(--bg))}
small.muted{color:var(--muted)}
footer{border-top:1px solid var(--border);margin-top:56px;padding:22px 0;color:var(--muted)}
@media (max-width: 980px){
  .hero{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
}
.hero.single-column {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.hero.single-column h1 {
  text-align: center; /* 如果你想让标题居中 */
}
.teaser {
  background: #000;
  width: 100%;
}
.teaser img {
  width: 100%;
  height: auto; /* 保证等比例显示 */
  object-fit: contain;
}