:root { --bg:#ffffff; --fg:#1f2937; --muted:#6b7280; --line:#e5e7eb; --side:#f8fafc; --accent:#4f46e5; --code:#f3f4f6; }
@media (prefers-color-scheme: dark) { :root { --bg:#111318; --fg:#e5e7eb; --muted:#9ca3af; --line:#2a2e37; --side:#171a20;
  --accent:#818cf8; --code:#1f232b; } }
* { box-sizing: border-box; }
body { margin:0; font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color:var(--fg); background:var(--bg); }
header { display:flex; align-items:center; gap:.6rem; padding:.7rem 1.2rem; border-bottom:1px solid var(--line); position:sticky;
  top:0; background:var(--bg); z-index:2; }
header img { width:30px; height:30px; } header b { font-size:1.15rem; letter-spacing:.04em; }
header span { color:var(--muted); font-size:.9rem; }
.wrap { display:flex; max-width:1200px; margin:0 auto; }
nav { width:250px; flex-shrink:0; padding:1.2rem; border-right:1px solid var(--line); background:var(--side); min-height:calc(100vh - 56px); }
nav a { display:block; padding:.3rem .5rem; border-radius:6px; color:var(--fg); text-decoration:none; font-size:.95rem; }
nav a.on, nav a:hover { background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent); }
main { flex:1; min-width:0; padding:1.5rem 2rem 4rem; }
main a { color:var(--accent); }
h1 { font-size:2rem; margin:.2rem 0 1rem; } h2 { margin-top:2.2rem; border-bottom:1px solid var(--line); padding-bottom:.3rem; }
h3 { margin-top:1.6rem; }
table { border-collapse:collapse; margin:1rem 0; display:block; overflow-x:auto; }
th, td { border:1px solid var(--line); padding:.4rem .7rem; text-align:left; vertical-align:top; }
th { background:var(--side); }
code { background:var(--code); padding:.1rem .3rem; border-radius:4px; font-size:.9em; }
pre { background:var(--code); padding:.9rem; border-radius:8px; overflow-x:auto; } pre code { background:none; padding:0; }
.flow { border:1px solid var(--line); border-radius:10px; padding:1rem; margin:1rem 0; }
.flow figcaption { font-weight:600; margin-bottom:.5rem; } .mermaid { text-align:center; }
footer { color:var(--muted); font-size:.85rem; margin-top:3rem; border-top:1px solid var(--line); padding-top:1rem; }
@media (max-width: 760px) { .wrap { display:block; } nav { width:auto; min-height:0; border-right:0; border-bottom:1px solid var(--line); }
  main { padding:1rem; } }
.sp-maker { white-space: nowrap; font-weight: 700; letter-spacing: 0.04em; } .sp-maker .sp-rev { display: inline-block; transform: scaleX(-1); }