:root{
  --bg:#ffffff; --text:#111111; --muted:#4a4a4a; --ink:#0a0a0a;
  --accent:#0d47a1; --line:#e6e6e6; --soft:#f7f7f7;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; color:var(--text); background:var(--bg); font:17px/1.7 Georgia, 'Times New Roman', Times, serif}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(960px, 92%); margin-inline:auto}
header{border-bottom:1px solid var(--line); background:#fff; position:sticky; top:0; z-index:10}
.nav{display:flex; align-items:center; gap:18px; padding:14px 0}
.brand{font-weight:700; letter-spacing:.2px; color:var(--ink); text-decoration:none}
.nav a{padding:6px 8px; border-radius:6px; color:var(--ink)}
.nav a.active{background:var(--soft)}
main{display:block}
.hero{padding:28px 0 12px}
.hero h1{font-size:clamp(1.8rem, 4.2vw, 2.6rem); line-height:1.15; margin:8px 0 10px}
.hero p{color:var(--muted); max-width:75ch}
.grid{display:grid; gap:18px}
.two{grid-template-columns:1.1fr .9fr}
.three{grid-template-columns:repeat(3, minmax(0,1fr))}
@media (max-width: 900px){.two,.three{grid-template-columns:1fr}}
.card{background:#fff; border:1px solid var(--line); padding:18px; border-radius:10px}
section{padding:22px 0}
h2{font-size:clamp(1.4rem, 3vw, 1.9rem); margin:0 0 10px}
h3{margin:0 0 6px}
.small{font-size:.95rem}
.muted{color:var(--muted)}
.figure{border:1px solid var(--line); background:#fff; border-radius:10px; padding:10px}
.figure img{display:block; width:100%; border-radius:6px}
.figure figcaption{font-size:.9rem; color:var(--muted); margin-top:6px}
hr.sep{border:none; border-top:1px solid var(--line); margin:24px 0}

footer{border-top:1px solid var(--line); padding:24px 0 48px; color:var(--muted)}
.top{position:fixed; right:18px; bottom:18px; padding:10px 12px; border-radius:10px; background:#fff; border:1px solid var(--line); color:var(--ink); text-decoration:none}

.toc{border:1px solid var(--line); background:var(--soft); border-radius:10px; padding:12px}
.toc ol{margin:0 0 0 1.1rem; padding:0}
blockquote{margin:0; padding:12px 14px; border-left:3px solid var(--accent); background:var(--soft); border-radius:6px}
kbd{font: .9rem/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; background:#f1f1f1; border:1px solid #ddd; padding:.1em .4em; border-radius:4px}
code{font: .9rem/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; background:#f8f8f8; border:1px solid #eee; border-radius:4px; padding:.1em .3em}

.ref{font-size:.95rem}
.ref li{margin-bottom:.4rem}
.byline{color:var(--muted); font-size: .95rem}
.badge{font-size:.8rem; color:#555; background:#eef2ff; border:1px solid #c7d2fe; border-radius:999px; padding:.2rem .55rem; display:inline-block}
.updated{font-size:.9rem; color:#666}
.table-wrap{overflow:auto; border:1px solid var(--line); border-radius:8px; background:#fff}
table{width:100%; border-collapse:separate; border-spacing:0}
th, td{padding:10px 12px; text-align:left; vertical-align:top}
thead th{position:sticky; top:0; background:#fafafa; border-bottom:1px solid var(--line)}
tbody tr:nth-child(odd){background:#fcfcfc}
tbody tr:hover{background:#f7f7f7}
th.sortable{cursor:pointer}