:root { --bg:#070b1c; --surface:#0f1636; --border:#2b3f85; --text:#e8edff; --muted:#a9b6e6; --accent:#4ca7ff; }
* { box-sizing: border-box; }
body { margin:0; font-family:"Avenir Next","Segoe UI",Arial,sans-serif; background: radial-gradient(1100px 450px at 8% -10%, rgba(95,255,224,.10), transparent 60%), radial-gradient(900px 420px at 100% 0%, rgba(76,167,255,.15), transparent 62%), var(--bg); color:var(--text); }
.topbar { border-bottom:1px solid var(--border); background:rgba(7,11,28,.88); padding:16px 20px; position:sticky; top:0; backdrop-filter: blur(8px); }
.brand-wrap { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.brand-logo { width:34px; height:34px; object-fit:contain; }
.product-logo { width:56px; height:56px; object-fit:contain; }
.brand-wrap h1 { margin:0; font-size:1.1rem; }
.brand-wrap p { margin:2px 0 0; color:var(--muted); font-size:.88rem; }
.nav { display:flex; gap:14px; margin-top:12px; flex-wrap:wrap; }
.nav a { color:var(--muted); text-decoration:none; font-weight:600; }
.nav a:hover { color:var(--text); }
.content { max-width:980px; margin:0 auto; padding:24px 18px 40px; }
.content a { color:#8be8ff; }
.content pre,.content code { background:rgba(14,24,58,.75); border:1px solid var(--border); border-radius:8px; }
.content pre { padding:12px; overflow:auto; }
.content table { width:100%; border-collapse:collapse; }
.content th,.content td { border:1px solid var(--border); padding:8px; }
.footer { border-top:1px solid var(--border); padding:18px 20px; color:var(--muted); text-align:center; background:rgba(7,11,28,.75); }