:root {
  color-scheme: light;
  --bg: #F5F5F5;
  --surface: #E5E5E5;
  --border: #D5D5D5;
  --fg: #1F1F1F;
  --muted: #635D97;
  --selection: #CFCFDE;
  --cyan: #036A96;
  --green: #14710A;
  --orange: #A34D14;
  --pink: #A3144D;
  --purple: #644AC9;
  --red: #CB3A2A;
  --yellow: #846E15;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0B0D0F;
  --surface: #1F272E;
  --border: #33404C;
  --fg: #F8F8F2;
  --muted: #BABAAB;
  --selection: #414D58;
  --cyan: #80FFEA;
  --green: #8AFF80;
  --orange: #FFCA80;
  --pink: #FF80BF;
  --purple: #9580FF;
  --red: #FF9580;
  --yellow: #FFFF80;
}

* { box-sizing: border-box; }
html { scroll-padding-top: 1.5rem; }
body { max-width: 1380px; margin: auto; padding: 0 2rem 4rem; background: var(--bg); color: var(--fg); font: 1.25rem/1.65 system-ui, sans-serif; }
::selection { background: var(--selection); }
a { color: var(--purple); text-underline-offset: .2em; }
a:hover { color: var(--pink); }
.site-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 2rem 0; }
.brand { display: flex; align-items: center; gap: .8rem; font-size: 1.8rem; font-weight: 750; letter-spacing: -.05em; text-decoration: none; color: var(--fg); }
.brand-mark { color: var(--purple); font-family: ui-monospace, monospace; font-weight: 400; }
.header-tools { display: flex; align-items: center; gap: .8rem; }
#theme-toggle { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--surface); color: var(--purple); cursor: pointer; }
#theme-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#theme-toggle .sun, [data-theme="dark"] #theme-toggle .moon { display: none; }
[data-theme="dark"] #theme-toggle .sun { display: block; }
 .book-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 3.5rem; align-items: start; }
.chapters { position: sticky; top: 2rem; max-height: calc(100vh - 4rem); overflow-y: auto; padding-right: 1.2rem; border-right: 1px solid var(--border); }
.chapters summary { color: var(--muted); font-size: 1rem; cursor: pointer; padding: .5rem 0 1rem; }
.topics { padding-bottom: 1rem; }
.chapter-list { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
@media (max-width: 700px) { .chapter-list { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; margin-top: 0; } }
.nav-group + .nav-group { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.topics a { display: block; padding: .4rem .6rem; color: var(--fg); font-size: 1.0625rem; text-decoration: none; border-left: 2px solid transparent; }
.topics a:hover { color: var(--purple); text-decoration: underline; }
.topics a[aria-current] { color: var(--purple); font-weight: 650; border-left-color: var(--purple); background: var(--surface); }
:focus-visible { outline: 2px solid var(--purple); outline-offset: 4px; }
main { width: 100%; max-width: 860px; min-width: 0; margin: 0 auto; overflow-wrap: anywhere; }
h1, h2, h3, h4, h5, h6 { line-height: 1.25; }
.page-header { border-bottom: 1px solid var(--border); padding-bottom: 1.5rem; margin-bottom: 2rem; }
h1 { font-size: clamp(2.2rem, 4vw, 3rem); letter-spacing: -.055em; margin: 0; }
.page-content h2 { color: var(--purple); font-size: 2rem; margin: 3rem 0 1.2rem; letter-spacing: -.03em; }
.page-content h3 { color: var(--pink); font-size: 1.55rem; margin: 2.3rem 0 1rem; }
.page-content h4 { color: var(--cyan); font-size: 1.3rem; margin: 2rem 0 1rem; }
.page-content h5, .page-content h6 { color: var(--green); font-size: 1.2rem; margin: 1.8rem 0 .8rem; }
p { margin: 1.2rem 0; }
code, pre { font-family: ui-monospace, monospace; font-size: .9em; }
code { color: var(--cyan); background: var(--surface); padding: .1em .3em; border-radius: 3px; }
pre { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--purple); padding: 1.25rem; overflow-x: auto; line-height: 1.6; border-radius: 0 4px 4px 0; }
pre code { color: var(--fg); padding: 0; font-size: inherit; overflow-wrap: normal; }
table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 1.05rem; }
th, td { text-align: left; vertical-align: top; padding: .75rem 1rem; border-bottom: 1px solid var(--border); }
th { background: var(--surface); color: var(--cyan); }
blockquote { margin-left: 0; padding: .1rem 1.25rem; border-left: 3px solid var(--pink); background: var(--surface); }
img { max-width: 100%; height: auto; }
.skip-link { position: absolute; top: -100px; background: var(--bg); }
.skip-link:focus { top: 0; }
.hljs-comment, .hljs-quote { color: var(--muted); }
.hljs-keyword, .hljs-selector-tag, .hljs-literal { color: var(--pink); }
.hljs-string, .hljs-regexp { color: var(--green); }
.hljs-number, .hljs-symbol { color: var(--purple); }
.hljs-title, .hljs-section { color: var(--cyan); }
.hljs-attr, .hljs-attribute, .hljs-variable { color: var(--orange); }
.hljs-built_in, .hljs-type { color: var(--yellow); }

@media (max-width: 950px) { body { padding: 0 1.5rem 3rem; } .book-layout { grid-template-columns: 205px minmax(0, 1fr); gap: 2rem; } .chapters { padding-right: .7rem; } }
@media (max-width: 700px) { body { padding: 0 1rem 2rem; font-size: 1.1875rem; } .site-header { gap: 1rem; padding: 1.3rem 0; } .header-tools { flex: 1; justify-content: flex-end; } .book-layout { display: block; } .chapters { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--border); margin-bottom: 2rem; padding-right: 0; } .topics { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .nav-group + .nav-group { margin: 0; padding: 0; border: 0; } .page-content h2 { font-size: 1.7rem; } }
@media print { .site-header, .chapters { display: none; } .book-layout { display: block; } pre { white-space: pre-wrap; } }

.mobile-chapters { display: none; }
.configuration-example { margin: 1.5rem 0; border: 1px solid var(--border); background: var(--surface); }
.configuration-example summary { padding: .8rem 1rem; cursor: pointer; color: var(--purple); font-weight: 600; }
.configuration-example pre { margin: 0; border: 0; border-top: 1px solid var(--border); }
@media (max-width: 700px) { .desktop-chapters { display: none; } .mobile-chapters { display: block; } }
@media print { .mobile-chapters { display: none; } }