:root { --ink:#0F1222; --muted:#5A6178; --line:#E3E6EE; --bg:#F5F6FA; --brand:#2F4BF5; --tip:#EEF1FE; }
* { box-sizing: border-box; }
body { margin:0; font:17px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--ink); background:var(--bg); }
a { color:var(--brand); }
.layout { display:grid; grid-template-columns: 17rem 1fr; min-height:100vh; }
nav.side { background:#0F1222; color:#fff; padding:1.5rem 1rem; position:sticky; top:0; height:100vh; overflow:auto; }
nav.side a { color:#C9CEDB; text-decoration:none; display:block; padding:.35rem .6rem; border-radius:6px; font-size:15px; }
nav.side a[aria-current] { background:var(--brand); color:#fff; }
nav.side .brand { color:#fff; font-weight:700; font-size:18px; margin:0 .6rem 1rem; display:block; }
main { max-width: 64rem; padding: 2rem 2.5rem 4rem; }
h1 { font-size:2rem; margin:.2rem 0 .6rem; } h2 { font-size:1.4rem; margin:2.6rem 0 .5rem; padding-top:.4rem; border-top:1px solid var(--line); }
.intro { color:var(--muted); font-size:1.1rem; }
figure { margin:1rem 0 0; } figure img { width:100%; height:auto; border:1px solid var(--line); border-radius:10px; background:#fff; box-shadow:0 1px 3px rgba(15,18,34,.08); }
figcaption { color:var(--muted); font-size:14px; margin-top:.3rem; }
ol.steps { background:#fff; border:1px solid var(--line); border-radius:10px; padding:1rem 1rem 1rem 2.4rem; }
ol.steps li { margin:.25rem 0; }
.tip { background:var(--tip); border-left:4px solid var(--brand); padding:.7rem 1rem; border-radius:6px; margin:.8rem 0; }
.cards { display:grid; grid-template-columns: repeat(auto-fill,minmax(15rem,1fr)); gap:1rem; margin-top:1rem; }
.cards a { display:block; background:#fff; border:1px solid var(--line); border-radius:10px; padding:1rem; text-decoration:none; color:var(--ink); }
.cards a b { display:block; color:var(--brand); margin-bottom:.2rem; }
table { border-collapse:collapse; background:#fff; width:100%; border:1px solid var(--line); border-radius:10px; }
td, th { text-align:left; padding:.5rem .8rem; border-bottom:1px solid var(--line); vertical-align:top; }
.toc { columns: 2; padding-left:1.2rem; }
.pager { display:flex; justify-content:space-between; margin-top:3rem; }
form.search input { width:100%; padding:.55rem .7rem; border-radius:8px; border:1px solid #2A2F45; background:#1B2033; color:#fff; font:inherit; font-size:15px; margin-bottom:1rem; }
form.search input::placeholder { color:#8A90A6; }
form.ask { display:flex; gap:.6rem; margin:1.2rem 0 .4rem; }
form.ask input { flex:1; padding:.8rem 1rem; font:inherit; border:1px solid var(--line); border-radius:10px; background:#fff; }
form.ask button { padding:.8rem 1.2rem; font:inherit; font-weight:600; border:0; border-radius:10px; background:var(--brand); color:#fff; cursor:pointer; }
section.ai { margin:1rem 0 1.4rem; padding:1rem 1.2rem; border:1px solid var(--line); border-left:4px solid var(--brand); border-radius:10px; background:#fff; }
section.ai h2 { margin:0 0 .4rem; font-size:1rem; }
section.ai p { margin:.3rem 0; }
section.ai .from a { margin-right:.8rem; }
section.ai .note { color:#666; font-size:.85rem; }
.examples { color:var(--muted); font-size:15px; } .examples a { margin-right:.8rem; }
ol.results { list-style:none; padding:0; } ol.results li { background:#fff; border:1px solid var(--line); border-radius:10px; padding:.9rem 1.1rem; margin:.7rem 0; }
ol.results .where { color:var(--muted); font-size:14px; } ol.results a.title { font-weight:600; font-size:1.1rem; text-decoration:none; }
mark { background:#FFF1B8; padding:0 .1em; border-radius:3px; }
h2:target { background:#FFF1B8; border-radius:6px; padding-left:.4rem; }
@media (max-width: 800px) { .layout { grid-template-columns: 1fr; } nav.side { position:static; height:auto; } main { padding:1.2rem; } .toc { columns:1; } }