:root {
  --bg-dark: #1d2021; --bg: #282828; --bg-light: #3c3836;
  --fg: #ebdbb2; --fg-dim: #d5c4a1;
  --red: #fb4934; --green: #b8bb26; --yellow: #fabd2f;
  --blue: #83a598; --purple: #d3869b; --aqua: #8ec07c;
  --orange: #fe8019; --gray: #a89984;
}
.lightmode {
  --bg-dark: #f2e5bc; --bg: #fbf1c7; --bg-light: #ebdbb2;
  --fg: #282828; --fg-dim: #3c3836;
  --red: #9d0006; --green: #79740e; --yellow: #b57614;
  --blue: #076678; --purple: #8f3f71; --aqua: #427b58;
  --orange: #af3a03; --gray: #928374;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background-color: var(--bg); color: var(--fg);
  font-family: 'Fira Sans', system-ui, sans-serif;
  line-height: 1.6; max-width: 800px;
  margin: 20px auto; padding: 0 10px;
  word-wrap: break-word; text-rendering: optimizeLegibility;
}
#topbar {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 1.5rem; padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--bg-light);
}
#site-title { color: var(--yellow); font-weight: 600; font-size: 1.1rem; text-decoration: none; }
#site-title:hover { color: var(--orange); }
#breadcrumb { color: var(--gray); font-size: 0.9rem; flex: 1; }
#breadcrumb span { color: var(--fg-dim); }
#breadcrumb a { color: var(--aqua); }
#breadcrumb a:hover { color: var(--orange); }
#theme-switch {
  height: 34px; width: 34px; padding: 0; border-radius: 50%;
  background-color: var(--fg); border: none;
  display: flex; justify-content: center; align-items: center;
  margin-left: auto; flex-shrink: 0; cursor: pointer;
}
#theme-switch svg { fill: var(--bg); width: 16px; height: 16px; }
#theme-switch .icon-moon { display: block; }
#theme-switch .icon-sun  { display: none; }
.lightmode #theme-switch .icon-moon { display: none; }
.lightmode #theme-switch .icon-sun  { display: block; }

#content h1, #content h2, #content h3, #content h4 { font-weight: 600; margin-bottom: 0.4em; }
#content h1 { color: var(--yellow); font-size: 1.7rem; border-bottom: 1px solid var(--bg-light); padding-bottom: 0.4rem; margin-bottom: 0.3rem; }
#content h2 { color: var(--orange); font-size: 1.2rem; margin-top: 2rem; }
#content h3 { color: var(--aqua); font-size: 1rem; margin-top: 1.2rem; }
#content p  { margin-bottom: 0.9rem; }
#content strong, #content b { color: var(--fg); }
#content em, #content i { color: var(--fg-dim); }
#content a { color: var(--aqua); text-decoration: none; }
#content a:hover { color: var(--orange); text-decoration: underline; }
#content ol, #content ul { padding-left: 1.5rem; margin-bottom: 0.9rem; }
#content li { margin-bottom: 0.3rem; }
#content hr { border: none; border-top: 1px solid var(--bg-light); margin: 2rem 0; }
#content table { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: 0.95rem; }
#content th, #content td { border: 1px solid var(--bg-light); padding: 0.4rem 0.8rem; text-align: left; }
#content th { background-color: var(--bg-light); color: var(--yellow); font-weight: 600; }
#content blockquote {
  border-left: 4px solid var(--blue); background-color: var(--bg-light);
  padding: 10px 16px; margin: 1.2rem 0; border-radius: 0 6px 6px 0;
}
#content code {
  font-family: 'Fira Mono', monospace; font-size: 0.88em;
  background: var(--bg-light); padding: 1px 5px; border-radius: 3px; color: var(--green);
}
#content pre {
  background: var(--bg-dark); border-radius: 6px;
  padding: 1rem; overflow-x: auto; margin-bottom: 1rem;
}
#content pre code { background: none; padding: 0; color: var(--green); font-size: 0.9rem; }
#content .def {
  border-left: 4px solid var(--blue); background-color: var(--bg-light);
  padding: 12px 16px; margin: 1.2rem 0; border-radius: 0 6px 6px 0;
}
#content .example {
  border-left: 4px solid var(--green); background-color: var(--bg-light);
  padding: 12px 16px; margin: 1.2rem 0; border-radius: 0 6px 6px 0;
}
#loading { color: var(--gray); font-style: italic; }
#error   { color: var(--red); }
.katex   { color: var(--fg); }
#content details {
  background-color: var(--bg-light);
  border-left: 4px solid var(--purple);
  border-radius: 0 6px 6px 0;
  padding: 10px 16px;
  margin: 1.2rem 0;
}
#content details summary {
  cursor: pointer;
  color: var(--purple);
  font-weight: 600;
  user-select: none;
}
#content details summary:hover { color: var(--orange); }
#content details[open] summary { margin-bottom: 0.75rem; }