:root{--max:1100px;--pad:16px;--bg:#fff;--fg:#111;--muted:#666;--border:#e6e6e6;}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--fg);line-height:1.45}
header{position:sticky;top:0;background:rgba(11, 82, 182, 0.92);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--border);z-index:10}
.header-inner{max-width:var(--max);margin:0 auto;padding:10px var(--pad);display:flex;gap:12px;align-items:center}
.header-inner a{color:#fff;text-decoration:none}
.header-title{font-weight:650;color:#fff;}
.header-meta{margin-left:auto;color:#fff;font-size:14px}
main{max-width:var(--max);margin:0 auto;padding:18px var(--pad) 40px}
.toc{display:grid;grid-template-columns:1fr;gap:10px}
.toc a{display:block;padding:10px 12px;border:1px solid var(--border);border-radius:12px;text-decoration:none;color:inherit}
.toc a:hover{background:#fafafa}
.small{color:var(--muted);font-size:13px}
.page-nav{display:flex;gap:10px;align-items:center;justify-content:space-between;margin:14px 0 10px}
.page-nav a{padding:8px 10px;border:1px solid var(--border);border-radius:10px;text-decoration:none;color:inherit}
.page-nav a:hover{background:#fafafa}
.figure{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:#fff}
.figure img{width:100%;height:auto;display:block}
.details{margin-top:12px;padding:12px 14px;border:1px solid var(--border);border-radius:14px}
details summary{cursor:pointer;font-weight:600}
pre{white-space:pre-wrap;word-break:break-word;margin:10px 0 0;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:13px}
footer{max-width:var(--max);margin:0 auto;padding:0 var(--pad) 26px;color:var(--muted);font-size:12px}

/* Shared footer (loaded from assets/footer.html) */
footer{padding:0;margin-top:24px;border-top:1px solid var(--border)}
.site-footer{display:block;width:100%;border:0;height:52px}

.site-header {
  background-color: #2f69c2;
  color: #ffffff;
 
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.header-logo img {
  width: 60px;
  height: auto;
}

.header-text h1 {
  margin: 0px;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.header-text p {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
}

.header-text a {
  color: #ffffff;
  text-decoration: underline;
}

.header-text a:hover {
  opacity: 0.85;
}

/* Responsive */
@media (max-width: 768px) {
  .header-inner {
    flex-direction: column;
    text-align: center;
  }

  .header-logo img {
    width: 70px;
  }

  .header-text h1 {
    font-size: 32px;
  }
}