:root {
  --bg:#f7f7f6;
  --text:#222;
  --header:#111;
  --footer:#111;
}

html, body { height:100%; }
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Georgia, 'Times New Roman', serif;
  padding-top:72px;
  padding-bottom:56px;
}

/* Header + Footer */
header, footer {
  position:fixed;
  left:0; right:0;
  background:var(--header);
  color:#fff;
  text-align:center;
  padding:12px 10px;
  z-index:1000;
  background: rgba(17,17,17,0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
header { top:0; }
footer { bottom:0; }

.container {
  max-width:880px;
  margin:0 auto;
  padding:28px 20px;
  box-sizing:border-box;
  text-align:left;
}

.cover { display:block; margin:18px auto; max-width:100%; height:auto; }
h1 { font-size:28px; margin:18px 0; text-align:center; }
h2 { font-size:20px; margin:20px 0 10px; }
p { margin:0 0 14px; font-size:16px; line-height:1.6; }
h2, h3, h4 { font-weight: 700; }

/* Author */
.author-box {
  display:flex; align-items:flex-start; margin:20px 0; gap:20px;
}
.author-box img { width:90px; height:auto; border-radius:8px; flex-shrink:0; }
.author-box div { flex:1; text-align:left; }
@media (max-width:600px){
  .author-box { flex-direction:column; align-items:center; text-align:center; }
  .author-box img { margin-bottom:12px; }
}

/* Header controls */
.header-controls { display:inline-block; margin-left:12px; vertical-align:middle; }
.header-controls button, .header-controls select {
  margin-left:8px;
  padding:6px 8px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,0.1);
  background:transparent;
  color:inherit;
  cursor:pointer;
}

/* TOC */
.toc { margin:10px 0 18px; padding:10px; background:rgba(255,255,255,0.02); border-radius:6px; }
.toc h3 { font-size:1.05rem; margin:0 0 8px; font-weight:600; text-align:left; }
.toc ul, .toc ol { list-style:none; padding-left:0; margin:0; }
.toc li { margin:6px 0; }
.toc a { text-decoration:none; color:inherit; opacity:0.95; }
.toc a:hover { text-decoration:underline; }

/* TOC in dark */
body.theme-dark .toc, body.theme-dark nav.toc { color:#f5e7b6; }
body.theme-dark .toc a, body.theme-dark nav.toc a { color:#f5e7b6; opacity:1; }
body.theme-dark .toc a:hover { color:#fff8d4; text-decoration:underline; }

/* Themes */
body.theme-cream { background:#fbf6ec; color:#222; }
body.theme-sepia { background:#f3e9db; color:#2b220f; }
body.theme-dark { background:#0b0b0c; color:#f5e7b6; }
body.theme-dark header, body.theme-dark footer { background:rgba(0,0,0,0.6); color:#fff; }
body.theme-dark a { color:#f5e7b6; }

.visually-hidden { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
a { color:inherit; }
html { scroll-behavior:smooth; }

/* Floating TOC button */
.toc-fab {
  position:fixed; right:18px; bottom:76px;
  z-index:1100;
  width:48px; height:48px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(17,17,17,0.85); color:#fff;
  font-size:20px;
  text-decoration:none;
  box-shadow:0 6px 18px rgba(0,0,0,0.25);
  border:1px solid rgba(255,255,255,0.06);
  transition:transform .12s ease, background .12s ease;
}
.toc-fab:hover { transform:translateY(-2px); background:rgba(17,17,17,0.95); }

/* Example + captions */
.svg-caption { font-size:13px; color:#666; margin:8px 0 18px; }
.chapter-meta { font-size:14px; color:#555; margin-bottom:12px; }
.example-box { background:rgba(0,0,0,0.02); padding:12px; border-radius:6px; margin:12px 0; }
pre { background:#fff; padding:12px; border-radius:6px; overflow:auto; font-family:monospace; font-size:13px; }

/* Hero Banner */
.hero { width:100%; box-sizing:border-box; padding:28px 0; }
.hero-inner { display:flex; align-items:center; gap:28px; max-width:1100px; margin:0 auto; padding:8px 20px; }
.hero-text { flex:1 1 60%; min-width:220px; color:var(--text); }
.hero-title { margin:0 0 8px; font-size:clamp(26px, 4vw, 44px); line-height:1.02; font-weight:700; }
.hero-sub { margin:0 0 6px; font-size:clamp(14px, 2.2vw, 20px); color:#444; }
.hero-by { margin:6px 0 0; color:#444; font-size:14px; }
.hero-graphic { flex:0 0 320px; display:flex; align-items:center; justify-content:center; }
.candles-svg { width:100%; height:auto; max-width:320px; }
@media (max-width:760px){
  .hero-inner { flex-direction:column; align-items:flex-start; gap:12px; padding:18px 14px; }
  .hero-graphic { width:100%; max-width:420px; }
  .hero-title { font-size:clamp(20px, 6.2vw, 28px); text-align:left; }
  .hero-sub, .hero-by { text-align:left; }
}
body.theme-dark .hero-text { color:#f6eedd; }
body.theme-dark .hero-sub, body.theme-dark .hero-by { color:#e9dfd1; }

main.container { padding-top:28px; }

/* Lists */
ul { margin:1em 0; padding-left:1.5em; }
ul li { margin-bottom:0.6em; line-height:1.5; }

/* TOC specifics */
nav.toc ol { margin:0 0 0.5em 1.5em; padding-left:0.5em; }
nav.toc li { margin:0.4em 0; line-height:1.5; }
nav.toc a { text-decoration:none; color:#333; }
nav.toc a:hover { text-decoration:underline; }

/* --- SVG visibility fixes --- */
body.theme-dark svg text,
body.theme-dark svg tspan {
  fill: currentColor !important;
  stroke:none !important;
}
body.theme-dark svg [stroke] {
  stroke: currentColor !important;
}
body.theme-dark .svg-caption { color:#e9dfd1; }

/* Code blocks */
pre, code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace;
  font-size:13px; line-height:1.45; tab-size:4;
}
pre {
  background:#fff; color:#1b1b1b;
  padding:14px; border-radius:8px;
  border:1px solid rgba(0,0,0,0.06);
  overflow:auto; max-width:100%; white-space:pre;
  margin:12px 0;
}
.example-box pre { background:rgba(255,255,255,0.98); }
code {
  background:rgba(0,0,0,0.03);
  padding:2px 6px; border-radius:6px;
  color:inherit; font-size:0.95em;
}
body.theme-dark pre,
body.theme-dark .example-box pre {
  background:#0f1113; color:#f7ecd8;
  border:1px solid rgba(255,255,255,0.06);
}
body.theme-dark code {
  background:rgba(255,255,255,0.03);
  color:#f5e7b6;
}
/* Dark scrollbars */
body.theme-dark pre::-webkit-scrollbar { height:10px; background:rgba(255,255,255,0.03); }
body.theme-dark pre::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.08); border-radius:6px; }