:root{--bg:#f8fafc;--card:#fff;--text:#1e293b;--accent:#0284c7;--accent2:#0369a1;--border:#e2e8f0;--code:#f1f5f9;--green:#16a34a;--yellow:#ca8a04;--red:#dc2626;--shadow:0 4px 6px -1px rgb(0 0 0/.1)}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;line-height:1.7;color:var(--text);background:var(--bg)}
.page{max-width:960px;margin:0 auto;padding:2rem;background:var(--card);min-height:100vh;box-shadow:var(--shadow)}
nav.top{display:flex;flex-wrap:wrap;gap:.5rem;padding:.75rem 0;border-bottom:2px solid var(--border);margin-bottom:2rem;font-size:.85rem}
nav.top a{color:var(--accent);text-decoration:none;padding:.25rem .6rem;border-radius:4px;border:1px solid transparent}
nav.top a:hover{border-color:var(--accent);background:#f0f9ff}
nav.top a.current{background:var(--accent);color:#fff}
h1{font-size:1.8rem;color:#0f172a;margin-bottom:.5rem}
h2{font-size:1.35rem;color:#0f172a;border-bottom:1px solid var(--border);padding-bottom:.3rem;margin:2rem 0 1rem}
h3{font-size:1.1rem;margin:1.5rem 0 .5rem}
p,li{margin-bottom:.5rem}
a{color:var(--accent)}
pre{background:var(--code);padding:1rem;border-radius:8px;overflow-x:auto;border:1px solid var(--border);font-size:.85rem;margin:1rem 0}
code{font-family:'SF Mono',Consolas,monospace;font-size:.88em}
table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.9rem}
th,td{border:1px solid var(--border);padding:.5rem .75rem;text-align:left}
th{background:var(--code);font-weight:600}
.badge{display:inline-block;font-size:.75rem;padding:.15rem .5rem;border-radius:3px;font-weight:600;vertical-align:middle}
.badge.done{background:#dcfce7;color:var(--green)}
.badge.partial{background:#fef9c3;color:var(--yellow)}
.badge.planned{background:#fee2e2;color:var(--red)}
svg.diagram{max-width:100%;height:auto;margin:1.5rem 0;border:1px solid var(--border);border-radius:8px;background:#fafbfc}
.nav-bottom{display:flex;justify-content:space-between;margin-top:3rem;padding-top:1rem;border-top:1px solid var(--border)}
.nav-bottom a{background:var(--accent);color:#fff;padding:.5rem 1rem;border-radius:6px;text-decoration:none;font-weight:600;font-size:.9rem}
.nav-bottom a.prev{background:#64748b}
footer{background:#0f172a;color:#cbd5e1;padding:2rem;font-size:.85rem;text-align:center;margin-top:auto}
footer a{color:#38bdf8}