:root{
  --bg:#0d1117;
  --fg:#c9d1d9;
  --muted:#8b949e;
  --line:#30363d;
  --link:#58a6ff;
  --card:#161b22;
  --code:#161b22;
  --active:#1f2937;
  --hover:#21262d;
  --button:#238636;
  --buttonFg:#ffffff;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-size:15px;line-height:1.65}
.app{display:grid;grid-template-columns:280px minmax(0,1fr);height:100vh}
.sidebar{border-right:1px solid var(--line);background:#0d1117;padding:28px 18px;overflow-y:auto}
.sidebar h3{margin:0 0 18px;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.nav-link{display:block;width:100%;text-align:left;background:transparent;border:0;color:var(--fg);padding:8px 10px;margin:3px 0;border-radius:5px;cursor:pointer;font:inherit}
.nav-link:hover{background:var(--hover);color:var(--link)}
.nav-link.active{background:var(--active);border-left:3px solid var(--link)}
.main{overflow-y:auto}
.content{max-width:950px;margin:0 auto;padding:46px 44px 100px}
.hero{border-bottom:1px solid var(--line);padding-bottom:28px;margin-bottom:34px}
.hero h1{margin:0 0 12px;font-size:34px;line-height:1.2;font-weight:600;color:#f0f6fc}
.hero p{margin:0;color:var(--muted)}
h1,h2,h3{font-weight:500;color:#f0f6fc}
h2{font-size:23px;margin:36px 0 14px}
h3{font-size:18px;margin:28px 0 10px}
p{margin:0 0 14px}
a{color:var(--link)}
hr{border:0;border-top:1px solid var(--line);margin:26px 0}
pre{background:var(--code);border:1px solid var(--line);border-radius:6px;padding:15px;overflow-x:auto}
code{font-family:Consolas,"Courier New",monospace}
ul,ol{padding-left:24px}
.callout,.notice,.resource-box{border:1px solid var(--line);background:var(--card);border-radius:8px;padding:14px 16px;margin:16px 0}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:18px}
.cards button{background:var(--card);border:1px solid var(--line);border-radius:9px;color:var(--fg);padding:18px;text-align:left;cursor:pointer;font:inherit;font-size:15px}
.cards button:hover{border-color:var(--link)}
.cards span{color:var(--muted);font-size:12px}
.toplink{position:fixed;right:22px;bottom:22px;border:0;border-radius:50%;width:40px;height:40px;background:#2383c4;color:white;font-size:20px;cursor:pointer}
.header-link{display:block;margin-top:20px;color:var(--link);text-decoration:none;font-size:13px}
@media(max-width:850px){.app{grid-template-columns:1fr}.sidebar{height:auto;border-right:0;border-bottom:1px solid var(--line)}}