:root { color-scheme: dark; --bg:#0d1117; --panel:#161b22; --border:#30363d; --fg:#e6edf3; --dim:#8b949e; --accent:#58a6ff; --emerald:#3fb950; --amber:#d29922; --rose:#f778ba; --violet:#bc8cff; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.7 -apple-system,"Segoe UI",Roboto,sans-serif; padding:0 16px; }
main { max-width:860px; margin:0 auto; padding-block:40px 64px; }
h1 { font-size:26px; margin:14px 0 6px; }
h2 { font-size:19px; margin:34px 0 10px; padding-bottom:6px; border-bottom:1px solid var(--border); }
h3 { font-size:16px; margin:22px 0 6px; }
p { margin:10px 0; }
.lead { color:var(--dim); font-size:17px; }
ul, ol { padding-left:22px; margin:8px 0; }
li { margin:6px 0; }
code { background:var(--panel); border:1px solid var(--border); border-radius:5px; padding:1px 6px; font-size:13.5px; }
strong { color:#fff; }
a { color:var(--accent); }
a.back { color:var(--accent); text-decoration:none; font-size:14px; }
.diagram-link { display:block; background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:14px 18px; margin:26px 0; text-decoration:none; color:var(--fg); }
.diagram-link:hover { border-color:var(--accent); }
.diagram-link .dim { color:var(--dim); font-size:14px; }
.callout { background:var(--panel); border-left:3px solid var(--amber); border-radius:6px; padding:10px 16px; margin:16px 0; color:var(--dim); }
table { border-collapse:collapse; width:100%; margin:12px 0; font-size:14.5px; }
th, td { border:1px solid var(--border); padding:8px 12px; text-align:left; }
th { background:var(--panel); }
.next { margin-top:36px; padding-top:14px; border-top:1px solid var(--border); font-size:14.5px; color:var(--dim); }
.embed { margin:26px 0; }
.embed iframe { width:100%; height:82vh; min-height:620px; border:1px solid var(--border); border-radius:10px; background:#0d1117; display:block; }
.embed-open { display:inline-block; margin-top:8px; font-size:14px; }