: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 } 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:150px; 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 }
.doc { padding:32px 48px 80px; max-width:860px; margin:0 auto }
.doc h1 { font-size:28px; margin:0 0 10px } .doc h2 { font-size:19px; margin:34px 0 10px; padding-top:8px; border-top:1px solid var(--line) } .doc h3 { font-size:16px; margin:22px 0 6px }
.lede { color:var(--muted); font-size:16px } .doc a { color:var(--accent) }
.topics { list-style:none; padding:0; margin:0 } .topics li { padding:8px 0; border-bottom:1px solid var(--line) } .topics li a { font-weight:600 } .topics li span { display:block; color:var(--muted); font-size:13px }
.doc code { font:13px ui-monospace, 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:12px 14px; overflow:auto }
.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) }
.foot { margin-top:30px; color:var(--muted) } kbd { font:12px ui-monospace, monospace; border:1px solid var(--line); border-radius:4px; padding:1px 5px }
@media (max-width: 720px) { .doc { padding:20px } #q-out { left:10px; width:calc(100% - 20px) } }