.guide-layout {
  display: flex;
  gap: 2.5rem;
  align-items: flex-start;
  max-width: 1100px;
  margin: 0 auto;
}
.guide-sidebar {
  flex: 0 0 220px;
  position: sticky;
  top: 1rem;
  align-self: flex-start;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  font-size: 14px;
}
.guide-sidebar h3 {
  margin: 1.2rem 0 0.4rem;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #888;
}
.guide-sidebar ul { list-style: none; padding: 0; margin: 0; }
.guide-sidebar li { margin: 0.15rem 0; }
.guide-sidebar a { text-decoration: none; color: inherit; display: block; padding: 2px 0; }
.guide-sidebar a.active,
.guide-nav-top.active { font-weight: 700; color: #3b82f6; }
.guide-sidebar a:hover { color: #3b82f6; }
.guide-nav-top { display: block; font-weight: 600; padding: 2px 0; }

.guide-content { flex: 1 1 auto; min-width: 0; max-width: 760px; line-height: 1.65; }
.guide-content pre {
  background: #f6f8fa;
  padding: 1rem;
  border-radius: 6px;
  overflow-x: auto;
}
.guide-content code { font-size: 0.92em; }
.guide-content :not(pre) > code {
  background: #f0f1f3;
  padding: 0.1em 0.35em;
  border-radius: 4px;
}
.guide-content .callout {
  border-left: 4px solid #f59e0b;
  background: #fff8eb;
  padding: 0.75rem 1rem;
  border-radius: 0 6px 6px 0;
  margin: 1.2rem 0;
}
.guide-content .callout.tip { border-left-color: #3b82f6; background: #eff6ff; }

@media (max-width: 800px) {
  .guide-layout { flex-direction: column; }
  .guide-sidebar { position: static; max-height: none; flex-basis: auto; }
}

/* Rouge syntax highlighting — full GitHub light theme (generated via `rougify style github`).
   The site body is always light, so no dark-mode variant is needed. */
.highlight, .highlight .w {
  color: #24292f;
  background-color: #f6f8fa;
}
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt, .highlight .kv {
  color: #cf222e;
}
.highlight .gd {
  color: #82071e;
  background-color: #ffebe9;
}
.highlight .nb { color: #953800; }
.highlight .nc { color: #953800; }
.highlight .no { color: #953800; }
.highlight .nn { color: #953800; }
.highlight .sr { color: #116329; }
.highlight .na { color: #116329; }
.highlight .nt { color: #116329; }
.highlight .gi {
  color: #116329;
  background-color: #dafbe1;
}
.highlight .ges {
  font-weight: bold;
  font-style: italic;
}
.highlight .kc { color: #0550ae; }
.highlight .l, .highlight .ld, .highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx {
  color: #0550ae;
}
.highlight .sb { color: #0550ae; }
.highlight .bp { color: #0550ae; }
.highlight .ne { color: #0550ae; }
.highlight .nl { color: #0550ae; }
.highlight .py { color: #0550ae; }
.highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi, .highlight .vm {
  color: #0550ae;
}
.highlight .o, .highlight .ow { color: #0550ae; }
.highlight .gh {
  color: #0550ae;
  font-weight: bold;
}
.highlight .gu {
  color: #0550ae;
  font-weight: bold;
}
.highlight .s, .highlight .sa, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .se, .highlight .sh, .highlight .sx, .highlight .s1, .highlight .ss {
  color: #0a3069;
}
.highlight .nd { color: #8250df; }
.highlight .nf, .highlight .fm { color: #8250df; }
.highlight .err {
  color: #f6f8fa;
  background-color: #82071e;
}
.highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cp, .highlight .cpf, .highlight .c1, .highlight .cs {
  color: #6e7781;
}
.highlight .gl { color: #6e7781; }
.highlight .gt { color: #6e7781; }
.highlight .ni { color: #24292f; }
.highlight .si { color: #24292f; }
.highlight .ge {
  color: #24292f;
  font-style: italic;
}
.highlight .gs {
  color: #24292f;
  font-weight: bold;
}

/* Callout inner paragraphs (content is Markdown via markdown="1") */
.guide-content .callout > p { margin: 0.5rem 0; }
.guide-content .callout > p:first-child { margin-top: 0; }
.guide-content .callout > p:last-child { margin-bottom: 0; }

/* Dark mode — the site body switches to dark via prefers-color-scheme in style.css,
   so code blocks and callouts need dark backgrounds and the github.dark token theme. */
@media (prefers-color-scheme: dark) {
  .guide-sidebar h3 { color: #888; }
  .guide-content pre { background: #161b22; }
  .guide-content :not(pre) > code { background: #30363d; color: #c9d1d9; }
  .guide-content .callout { background: #2a2410; }
  .guide-content .callout.tip { background: #10243e; }

  /* Rouge github.dark token theme */
  .highlight, .highlight .w { color: #c9d1d9; background-color: #161b22; }
  .highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt, .highlight .kv { color: #ff7b72; }
  .highlight .gd { color: #ffdcd7; background-color: #67060c; }
  .highlight .nb { color: #ffa657; }
  .highlight .nc { color: #ffa657; }
  .highlight .no { color: #ffa657; }
  .highlight .nn { color: #ffa657; }
  .highlight .sr { color: #7ee787; }
  .highlight .na { color: #7ee787; }
  .highlight .nt { color: #7ee787; }
  .highlight .gi { color: #aff5b4; background-color: #033a16; }
  .highlight .kc { color: #79c0ff; }
  .highlight .l, .highlight .ld, .highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx { color: #79c0ff; }
  .highlight .sb { color: #79c0ff; }
  .highlight .bp { color: #79c0ff; }
  .highlight .ne { color: #79c0ff; }
  .highlight .nl { color: #79c0ff; }
  .highlight .py { color: #79c0ff; }
  .highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi, .highlight .vm { color: #79c0ff; }
  .highlight .o, .highlight .ow { color: #79c0ff; }
  .highlight .gh { color: #1f6feb; font-weight: bold; }
  .highlight .gu { color: #1f6feb; font-weight: bold; }
  .highlight .s, .highlight .sa, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .se, .highlight .sh, .highlight .sx, .highlight .s1, .highlight .ss { color: #a5d6ff; }
  .highlight .nd { color: #d2a8ff; }
  .highlight .nf, .highlight .fm { color: #d2a8ff; }
  .highlight .err { color: #f0f6fc; background-color: #8e1519; }
  .highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cp, .highlight .cpf, .highlight .c1, .highlight .cs { color: #8b949e; }
  .highlight .ni { color: #c9d1d9; }
  .highlight .si { color: #c9d1d9; }
}