:root { --ink:#1a2332; --muted:#5a6577; --accent:#0d7377; --bg:#f7f5f1; --card:#fff; }
* { box-sizing: border-box; }
body { margin:0; font-family: "Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; color:var(--ink); background:var(--bg); line-height:1.65; }
.wrap { max-width:880px; margin:0 auto; padding:28px 20px 64px; }
header.hero { background:linear-gradient(135deg,#0d7377,#14919b); color:#fff; padding:28px 20px; margin:0 0 24px; }
header.hero h1 { margin:0 0 8px; font-size:1.55rem; }
header.hero p { margin:0; opacity:.92; }
nav.toc { background:var(--card); border:1px solid #e5e1d8; border-radius:10px; padding:16px 20px; margin-bottom:24px; }
nav.toc a { color:var(--accent); text-decoration:none; display:block; padding:4px 0; }
nav.toc a:hover { text-decoration:underline; }
article { background:var(--card); border:1px solid #e5e1d8; border-radius:10px; padding:24px 28px; }
article img { max-width:100%; height:auto; border:1px solid #e5e1d8; border-radius:8px; margin:12px 0; }
article table { border-collapse:collapse; width:100%; margin:12px 0; font-size:.92rem; }
article th, article td { border:1px solid #ddd; padding:8px 10px; text-align:left; }
article th { background:#eef6f6; }
article h1,article h2,article h3 { color:#0d5c5f; }
footer { margin-top:28px; color:var(--muted); font-size:.85rem; text-align:center; }
.badge { display:inline-block; background:#ffe082; color:#333; padding:2px 8px; border-radius:4px; font-size:.75rem; margin-left:8px; }