:root { --accent:#f7931a; --accent-dim:#8a5a1c; --ink:#0b0d10; --panel:#12151a; --line:#232830; --text:#e8ebf0; --muted:#9aa3ae; }
* { box-sizing:border-box }
html, body { margin:0; background:var(--ink); color:var(--text) }
body {
  display:grid; grid-template-columns:250px minmax(0,1fr); min-height:100vh;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; line-height:1.65;
}
aside {
  position:sticky; top:0; height:100vh; padding:1.6rem 1.2rem; border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:1.4rem; background:var(--panel);
}
.brand { display:flex; align-items:center; gap:.6rem; color:#fff; text-decoration:none; font-weight:600; letter-spacing:.2em; text-transform:uppercase; font-size:.85rem }
.brand img { width:28px; height:28px }
nav { display:flex; flex-direction:column; gap:.15rem }
nav a { color:var(--muted); text-decoration:none; padding:.35rem .6rem; border-radius:6px; font-size:.92rem }
nav a:hover { color:var(--text); background:#1a1e25 }
nav a.on { color:#fff; background:#1d222a; box-shadow:inset 2px 0 0 var(--accent) }
.app { margin-top:auto; color:var(--accent); text-decoration:none; font-size:.9rem }
main { padding:2.4rem clamp(1.2rem,5vw,4rem) 4rem; max-width:920px }
h1 { font-size:1.9rem; margin:0 0 1rem; color:#fff }
h2 { font-size:1.3rem; margin:2.4rem 0 .6rem; color:#fff; border-bottom:1px solid var(--line); padding-bottom:.35rem }
h3 { font-size:1.05rem; margin:1.6rem 0 .4rem; color:#fff }
p, li { color:var(--text) }
a { color:var(--accent); text-underline-offset:3px }
code { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.86em; background:#1a1e25; padding:.1em .35em; border-radius:4px }
pre { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:1rem; overflow-x:auto }
pre code { background:none; padding:0; font-size:.85rem }
table { border-collapse:collapse; width:100%; margin:1rem 0; font-size:.9rem; display:block; overflow-x:auto }
th, td { border:1px solid var(--line); padding:.45rem .65rem; text-align:left; vertical-align:top }
th { background:var(--panel); color:#fff; font-weight:600 }
.note { border-left:3px solid var(--accent); background:#16130e; padding:.75rem 1rem; border-radius:0 6px 6px 0; margin:1rem 0 }
footer { margin-top:4rem; color:var(--muted); font-size:.8rem }
@media (max-width:820px) {
  body { grid-template-columns:1fr }
  aside { position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center }
  nav { flex-direction:row; flex-wrap:wrap }
  .app { margin-top:0 }
}