:root{--text:#1e293b;--muted:#64748b;--accent:#2563eb;--border:#e2e8f0;--soft:#f8fafc;--max:760px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:18px;line-height:1.75}
a{color:var(--accent);text-decoration-thickness:.08em;text-underline-offset:.15em}
a:hover{text-decoration-thickness:.14em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 1.25rem}
.topbar{border-bottom:1px solid var(--border);padding:.9rem 0;font-size:.82rem;color:var(--muted)}
.topbar a{color:inherit;text-decoration:none}
.topbar .sep{margin:0 .5rem}
header.article{padding:3rem 0 1.5rem}
header.article h1{font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.15;letter-spacing:-.02em;margin:0 0 .75rem}
.subtitle{color:var(--muted);font-size:1.08rem;margin:0 0 1.25rem}
.byline{color:var(--muted);font-size:.9rem;margin:0}
.byline a{color:var(--text)}
article{margin-top:0}
.hero{margin:1.25rem 0 2rem}
.hero img{width:100%;height:auto;border:1px solid var(--border);border-radius:10px}
.note{background:var(--soft);border-left:3px solid var(--accent);padding:.9rem 1.1rem;margin:1.5rem 0;font-size:.92rem;color:#334155}
.note p{margin:0}
.toc{background:var(--soft);border:1px solid var(--border);border-radius:10px;padding:1rem 1.25rem;margin:2rem 0 2.5rem}
.toc h2{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 .5rem;border:0;padding:0}
.toc ol{margin:0;padding-left:1.2rem}
.toc li{margin:.2rem 0;font-size:.92rem}
article h2{font-size:1.45rem;line-height:1.25;margin:2.6rem 0 .8rem;padding-top:1.25rem;border-top:1px solid var(--border)}
article h3{font-size:1.08rem;line-height:1.3;margin:1.8rem 0 .4rem}
article p{margin:0 0 1.1em}
article ul,article ol{margin:0 0 1.2em;padding-left:1.4em}
article li{margin:.3em 0}
article figure{margin:1.8rem 0}
article figure img{width:100%;height:auto;border:1px solid var(--border);border-radius:8px}
article figcaption{font-size:.82rem;color:var(--muted);margin-top:.5rem}
article code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;background:#f1f5f9;padding:.1em .3em;border-radius:4px}
article blockquote{border-left:3px solid var(--border);margin:1.2rem 0;padding-left:1rem;color:#475569}
.edit-note{color:var(--muted);font-size:.85rem;margin-top:2rem}
footer.article{border-top:1px solid var(--border);margin-top:2.5rem;padding:1.5rem 0 3rem;color:var(--muted);font-size:.85rem}
footer.article p{margin:.35rem 0}
footer.article a{color:inherit}
@media(max-width:600px){body{font-size:17px}header.article{padding-top:2rem}}