:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body { margin: 0;
       font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
       line-height: 1.55; color: #222; background: #fff; }
.layout { display: flex; min-height: 100vh; }
aside.sidebar {
  width: 280px; flex-shrink: 0; background: #0d47a1; color: #fff;
  padding: 1.5em 0; overflow-y: auto; position: sticky; top: 0;
  height: 100vh;
}
aside.sidebar .site-title {
  display: block; padding: 0 1.2em 1em; font-size: 1.1em;
  font-weight: 600; color: #fff; text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  margin-bottom: 0.6em;
}
aside.sidebar ul.toc { list-style: none; padding: 0; margin: 0; }
aside.sidebar ul.toc li a {
  display: block; padding: 0.55em 1.2em; color: rgba(255,255,255,0.85);
  text-decoration: none; font-size: 0.92em; border-left: 3px solid transparent;
}
aside.sidebar .chnum {
  display: inline-block; min-width: 1.7em; margin-right: 0.4em;
  color: rgba(255,255,255,0.55); font-variant-numeric: tabular-nums;
  font-size: 0.85em;
}
aside.sidebar ul.toc li a:hover {
  background: rgba(255,255,255,0.08); color: #fff;
}
aside.sidebar ul.toc li.active a {
  background: rgba(255,255,255,0.12); color: #fff;
  border-left-color: #ffca28; font-weight: 500;
}
main.content {
  flex: 1; padding: 2em 3em; max-width: 880px; min-width: 0;
}
main.content h1, main.content h2, main.content h3, main.content h4 {
  line-height: 1.2; margin-top: 1.6em;
}
main.content h1 { border-bottom: 2px solid #2196F3; padding-bottom: 0.2em;
                  margin-top: 0; }
main.content h2 { border-bottom: 1px solid #ddd; padding-bottom: 0.15em; }
code { background: #f4f4f4; padding: 1px 4px; border-radius: 3px;
       font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 0.92em; }
pre { background: #f7f7f9; border: 1px solid #e1e1e8; border-radius: 4px;
      padding: 0.8em 1em; overflow-x: auto; }
pre code { background: none; padding: 0; font-size: 0.9em; }
blockquote { border-left: 4px solid #2196F3; margin: 1em 0; padding: 0.5em 1em;
             background: #f0f7ff; color: #444; }
main.content a { color: #1565c0; text-decoration: none; }
main.content a:hover { text-decoration: underline; }
nav.chapter-nav { display: flex; justify-content: space-between;
                  margin: 2.5em 0 1em; padding-top: 1em;
                  border-top: 1px solid #ddd; font-size: 0.95em; }
nav.chapter-nav a.toc { margin: 0 auto; }
main.content table { border-collapse: collapse; margin: 1em 0; font-size: 0.93em; }
main.content th, main.content td { border: 1px solid #ddd; padding: 0.4em 0.8em;
                                   text-align: left; vertical-align: top; }
main.content th { background: #f3f6fa; font-weight: 600; }
main.content tr:nth-child(even) td { background: #fafbfc; }
main.content ul.toc { list-style: none; padding-left: 0; }
main.content ul.toc li { padding: 0.3em 0; }
main.content ul.toc a { font-weight: 500; }
main.content .chnum { display: inline-block; min-width: 1.8em;
                       color: #888; font-variant-numeric: tabular-nums;
                       margin-right: 0.4em; }
main.content pre.output, main.content div.output {
  background: #fafafa; border-left: 3px solid #bcbcbc;
  border-top: 0; border-right: 0; border-bottom: 0;
  border-radius: 0 4px 4px 0; padding: 0.7em 1em;
  margin: -0.3em 0 1em; font-size: 0.88em;
}
main.content pre.output { overflow-x: auto; }
main.content pre.output code { background: none; font-size: 1em; }
main.content div.output.html, main.content div.output.svg,
main.content div.output.latex, main.content div.output.md {
  font-size: 0.92em;
}
main.content div.output.svg svg { max-width: 100%; height: auto; }
main.content .jlite-bar {
  margin: 0 0 1.2em; text-align: right;
}
main.content a.jlite-btn {
  display: inline-block; padding: 0.4em 0.9em;
  background: #ffca28; color: #000; border-radius: 4px;
  font-size: 0.85em; font-weight: 500; text-decoration: none;
}
main.content a.jlite-btn:hover { background: #ffb300; text-decoration: none; }
@media (max-width: 800px) {
  .layout { flex-direction: column; }
  aside.sidebar { width: 100%; height: auto; position: static; padding: 1em 0; }
  main.content { padding: 1.5em 1em; }
}