:root { --bg:#fff; --fg:#0F172A; --muted:#64748B; --line:#E2E8F0; --side:#F8FAFC; --accent:#7C3AED; --code:#F1F5F9; }
@media (prefers-color-scheme: dark) { :root { --bg:#0B1220; --fg:#E5E7EB; --muted:#94A3B8; --line:#1F2937; --side:#0F172A; --code:#111827; } }
* { box-sizing:border-box } html { scroll-behavior:smooth }
body { margin:0; font:15px/1.6 Inter, ui-sans-serif, system-ui, sans-serif; color:var(--fg); background:var(--bg) }
.top { position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:18px; padding:10px 20px; border-bottom:1px solid var(--line); background:var(--bg) }
.brand { font-weight:700; font-size:18px; color:var(--fg); text-decoration:none } .brand span { color:var(--accent) } .brand em { font-style:normal; font-weight:500; color:var(--muted); margin-left:6px; font-size:14px }
#q { flex:1; max-width:520px; padding:7px 12px; border:1px solid var(--line); border-radius:8px; background:var(--side); color:var(--fg); font:inherit }
#q-out { position:absolute; top:52px; left:180px; width:520px; max-height:60vh; overflow:auto; background:var(--bg); border:1px solid var(--line); border-radius:10px; box-shadow:0 12px 40px rgba(0,0,0,.25); padding:6px }
#q-out a { display:block; padding:7px 10px; border-radius:6px; color:var(--fg); text-decoration:none } #q-out a:hover { background:var(--side) } #q-out small { color:var(--muted); margin-left:8px }
.links a { color:var(--muted); text-decoration:none; margin-left:16px; font-size:13px }
.wrap { display:grid; grid-template-columns:260px minmax(0,1fr); min-height:calc(100vh - 53px) }
.side { border-right:1px solid var(--line); background:var(--side); padding:18px 0; position:sticky; top:53px; height:calc(100vh - 53px); overflow:auto }
.side ul { list-style:none; margin:0; padding:0 } .side a { display:block; padding:7px 20px; color:var(--fg); text-decoration:none; font-size:14px } .side a:hover { background:rgba(124,58,237,.08) } .side a.on { color:var(--accent); font-weight:600; border-right:3px solid var(--accent) }
.side-foot { padding:16px 20px; color:var(--muted); font-size:12px }
.doc { padding:32px 48px 80px; max-width:920px }
.doc h1 { font-size:30px; margin:0 0 14px } .doc h2 { font-size:20px; margin:36px 0 10px; padding-top:8px; border-top:1px solid var(--line) } .doc h3 { font-size:16px; margin:24px 0 8px }
.doc .anchor { color:inherit; text-decoration:none } .doc h2:hover .anchor::after, .doc h3:hover .anchor::after { content:" #"; color:var(--muted) }
.doc p, .doc li { color:var(--fg) } .lede { color:var(--muted); font-size:16px }
.doc a { color:var(--accent) }
.doc code { font:13px ui-monospace, SFMono-Regular, Menlo, monospace; background:var(--code); padding:1px 5px; border-radius:4px }
.doc pre { background:var(--code); border:1px solid var(--line); border-radius:8px; padding:14px 16px; overflow:auto } .doc pre code { background:none; padding:0; font-size:13px }
.doc table { border-collapse:collapse; width:100%; margin:12px 0; font-size:14px } .doc th, .doc td { border:1px solid var(--line); padding:7px 10px; text-align:left; vertical-align:top } .doc th { background:var(--side); font-weight:600 }
.doc blockquote { margin:0; padding:8px 14px; border-left:3px solid var(--accent); color:var(--muted) }
@media (max-width: 860px) { .wrap { grid-template-columns:1fr } .side { position:static; height:auto; border-right:0; border-bottom:1px solid var(--line) } .doc { padding:20px } #q-out { left:10px; width:calc(100% - 20px) } }