/* ------------------------------------------------------------------
   Yggdrasil — one centred column, monospace throughout.
   Themes live in the blocks below; add one by copying a block and
   adding its name to THEMES in app.js.
------------------------------------------------------------------ */

html[data-theme="mocha"] {
  --bg:#1e1e2e; --bg-alt:#181825; --line:#313244;
  --text:#cdd6f4; --muted:#9399b2; --accent:#cba6f7; --link:#89b4fa;
  --syn-kw:#cba6f7; --syn-str:#a6e3a1; --syn-fn:#89b4fa; --syn-num:#fab387; --syn-com:#6c7086;
}
html[data-theme="tokyo"] {
  --bg:#1a1b26; --bg-alt:#16161e; --line:#2f3549;
  --text:#c0caf5; --muted:#787c99; --accent:#bb9af7; --link:#7aa2f7;
  --syn-kw:#bb9af7; --syn-str:#9ece6a; --syn-fn:#7aa2f7; --syn-num:#ff9e64; --syn-com:#565f89;
}
html[data-theme="gruvbox"] {
  --bg:#282828; --bg-alt:#1d2021; --line:#3c3836;
  --text:#ebdbb2; --muted:#a89984; --accent:#fabd2f; --link:#83a598;
  --syn-kw:#fb4934; --syn-str:#b8bb26; --syn-fn:#8ec07c; --syn-num:#d3869b; --syn-com:#928374;
}
html[data-theme="decay"] {
  --bg:#101419; --bg-alt:#0b0e12; --line:#1f2430;
  --text:#b6beca; --muted:#767c88; --accent:#78dba9; --link:#70a5eb;
  --syn-kw:#c68aee; --syn-str:#78dba9; --syn-fn:#70a5eb; --syn-num:#f1cf8a; --syn-com:#4e5561;
}
html[data-theme="everblush"] {
  --bg: #141b1e; --bg-alt: #0f1518; --line: #232a2d;
  --text: #dadada; --muted: #6b7173; --accent: #26bbd9; --link: #67b0e8;
  --syn-kw: #e57474; --syn-str: #8ccf7e; --syn-fn: #67b0e8; --syn-num: #e5c76b; --syn-com: #3b4244;
}
html[data-theme="htb"] {
  --bg: #111927; --bg-alt: #0a1120; --line: #1d2f45;
  --text: #a4b1cd; --muted: #4e6174; --accent: #9fef00; --link: #9fef00;
  --syn-kw: #9fef00; --syn-str: #ffaf00; --syn-fn: #009fef; --syn-num: #ef9f00; --syn-com: #3d5470;
}
html[data-theme="nord"] {
  --bg: #2e3440; --bg-alt: #242933; --line: #3b4252;
  --text: #d8dee9; --muted: #616e88; --accent: #88c0d0; --link: #81a1c1;
  --syn-kw: #81a1c1; --syn-str: #a3be8c; --syn-fn: #88c0d0; --syn-num: #b48ead; --syn-com: #4c566a;
}
html[data-theme="obsidian"] {
  --bg: #1a1625; --bg-alt: #13111e; --line: #2a2440;
  --text: #e0d6ff; --muted: #6e6a86; --accent: #c084fc; --link: #a78bfa;
  --syn-kw: #c084fc; --syn-str: #a3e635; --syn-fn: #a78bfa; --syn-num: #f472b6; --syn-com: #44415a;
}
html[data-theme="synthwave"] {
  --bg: #1a1033; --bg-alt: #110b27; --line: #2d1f5e;
  --text: #f0eefc; --muted: #6d5f9e; --accent: #f92aad; --link: #36f9f6;
  --syn-kw: #f92aad; --syn-str: #72f1b8; --syn-fn: #36f9f6; --syn-num: #fe4450; --syn-com: #495495;
}
html[data-theme="onedark"] {
  --bg: #282c34; --bg-alt: #21252b; --line: #3e4451;
  --text: #abb2bf; --muted: #5c6370; --accent: #61afef; --link: #61afef;
  --syn-kw: #c678dd; --syn-str: #98c379; --syn-fn: #61afef; --syn-num: #d19a66; --syn-com: #5c6370;
}
html[data-theme="solarized"] {
  --bg: #002b36; --bg-alt: #00212b; --line: #073642;
  --text: #839496; --muted: #586e75; --accent: #2aa198; --link: #268bd2;
  --syn-kw: #859900; --syn-str: #2aa198; --syn-fn: #268bd2; --syn-num: #d33682; --syn-com: #586e75;
}
html[data-theme="scifi"] {
  --bg: #050e1a; --bg-alt: #020910; --line: #0a1f35;
  --text: #00e5ff; --muted: #0a6070; --accent: #00e5ff; --link: #00bcd4;
  --syn-kw: #00e5ff; --syn-str: #00ff9f; --syn-fn: #00bcd4; --syn-num: #ff4081; --syn-com: #0a4060;
}
html[data-theme="sakura"] {
  --bg: #1a1a2e; --bg-alt: #12122a; --line: #2a2a4a;
  --text: #f8c8d4; --muted: #9b7d8a; --accent: #f48fb1; --link: #ce93d8;
  --syn-kw: #f48fb1; --syn-str: #a5d6a7; --syn-fn: #ce93d8; --syn-num: #ffcc80; --syn-com: #5c4a55;
}
html[data-theme="abyssal"] {
  --bg: #060d14; --bg-alt: #030810; --line: #0d1f2e;
  --text: #8fbccc; --muted: #2a4a5e; --accent: #00d4ff; --link: #0099bb;
  --syn-kw: #00d4ff; --syn-str: #00ff9f; --syn-fn: #0099bb; --syn-num: #ff6b35; --syn-com: #1a3a4a;
}
html[data-theme="rosepine"] {
  --bg: #191724; --bg-alt: #12101e; --line: #26233a;
  --text: #e0def4; --muted: #6e6a86; --accent: #eb6f92; --link: #c4a7e7;
  --syn-kw: #eb6f92; --syn-str: #9ccfd8; --syn-fn: #c4a7e7; --syn-num: #f6c177; --syn-com: #524f67;
}
html[data-theme="dracula"] {
  --bg:#282a36; --bg-alt:#21222c; --line:#44475a;
  --text:#f8f8f2; --muted:#8b8ea3; --accent:#bd93f9; --link:#8be9fd;
  --syn-kw:#ff79c6; --syn-str:#f1fa8c; --syn-fn:#50fa7b; --syn-num:#bd93f9; --syn-com:#6272a4;
}
html[data-theme="graphite"] {
  --bg:#161616; --bg-alt:#101010; --line:#2a2a2a;
  --text:#d4d4d4; --muted:#8a8a8a; --accent:#ededed; --link:#b4b4b4;
  --syn-kw:#ededed; --syn-str:#b0b0b0; --syn-fn:#cfcfcf; --syn-num:#9a9a9a; --syn-com:#5e5e5e;
}
html[data-theme="vanta"] {
  --bg:#000000; --bg-alt:#070707; --line:#1c1c1c;
  --text:#ededed; --muted:#767676; --accent:#ffffff; --link:#c9c9c9;
  --syn-kw:#ffffff; --syn-str:#bdbdbd; --syn-fn:#e0e0e0; --syn-num:#a0a0a0; --syn-com:#545454;
}

:root {
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --col: 46rem;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 2rem;
  background: var(--bg);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: var(--col);
  margin: 0 auto;
  padding: 2.5rem 1.25rem 3rem;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main { flex: 1; }

a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--accent); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

kbd {
  font-family: var(--mono);
  font-size: .75rem;
  padding: 0 .3rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--muted);
}

/* ---------- header ---------- */

.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 3.5rem;
}

.brand {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -.02em;
}
.brand:hover { color: var(--accent); }
.brand .glyph { color: var(--accent); }

.site-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: .85rem;
}
.site-nav > a { color: var(--link); }

.nav-btn {
  font: inherit;
  font-size: .85rem;
  padding: .15rem .55rem;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
}
.nav-btn:hover { color: var(--text); border-color: var(--accent); }

/* ---------- theme picker ---------- */

.theme-picker { position: relative; }
.theme-btn { display: inline-flex; align-items: center; gap: .45rem; }
.swatch {
  width: .65rem;
  height: .65rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--line);
}

.theme-menu {
  position: absolute;
  right: 0;
  top: calc(100% + .4rem);
  z-index: 50;
  min-width: 12rem;
  margin: 0;
  padding: .3rem;
  list-style: none;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.theme-menu[hidden] { display: none; }
.theme-menu button {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  font: inherit;
  font-size: .82rem;
  text-align: left;
  padding: .3rem .5rem;
  color: var(--text);
  background: none;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}
.theme-menu button:hover { background: var(--line); }
.theme-menu button[aria-current="true"] { color: var(--accent); }
.theme-menu .dot {
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .15);
}

/* ---------- home / lists ---------- */

.title {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.02em;
  margin: 0 0 1rem;
}

.lede { margin: 0 0 1.2rem; color: var(--muted); }
.lede kbd { color: var(--text); }

.section {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 3rem 0 1rem;
}

.rows { list-style: none; margin: 0 0 1rem; padding: 0; }
.row {
  display: flex;
  gap: 1.5rem;
  align-items: baseline;
  padding: .18rem 0;
}
.row-date { flex: 0 0 6.5rem; color: var(--muted); font-size: .82rem; }
.row-link { color: var(--link); }

.branch-list { list-style: none; margin: 0; padding: 0; }
.branch-row {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  padding: .3rem 0;
}
.branch-row > a { flex: 0 0 11rem; }
.branch-desc { flex: 1; color: var(--muted); font-size: .82rem; }
.count { color: var(--muted); font-size: .78rem; }

.group h2 {
  font-size: 1.1rem;
  margin: 2.5rem 0 .8rem;
  display: flex;
  gap: .6rem;
  align-items: baseline;
}
.group h2 a { color: var(--text); text-decoration: none; }
.group h2 a:hover { color: var(--accent); }

/* ---------- note page ---------- */

.crumb { margin: 0 0 .4rem; font-size: .82rem; color: var(--muted); }
.meta {
  margin: -.4rem 0 1.8rem;
  font-size: .8rem;
  color: var(--muted);
}

.contents-box, .inline-toc {
  margin: 0 0 2rem;
  padding: .5rem .9rem;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.contents-box summary, .inline-toc summary {
  cursor: pointer;
  font-size: .82rem;
  color: var(--muted);
}
.contents-box[open] summary, .inline-toc[open] summary { margin-bottom: .5rem; }
.contents-box ul { list-style: none; margin: 0; padding: 0; }
.contents-box ul ul { padding-left: 1.3rem; }
.contents-box li { margin: .1rem 0; font-size: .85rem; }

.prose { overflow-wrap: break-word; }
.prose > *:first-child { margin-top: 0; }

.prose h2, .prose h3, .prose h4, .prose h5 {
  font-weight: 700;
  line-height: 1.35;
  scroll-margin-top: 2rem;
}
.prose h2 { font-size: 1.3rem; margin: 3rem 0 1rem; }
.prose h3 { font-size: 1.05rem; margin: 2.2rem 0 .8rem; color: var(--accent); }
.prose h4 { font-size: .95rem; margin: 1.8rem 0 .6rem; }
.prose h5, .prose h6 { font-size: .9rem; margin: 1.4rem 0 .4rem; color: var(--muted); }

.prose h1 a, .prose h2 a, .prose h3 a, .prose h4 a, .prose h5 a, .prose h6 a {
  color: inherit;
  text-decoration: none;
}
.prose h2 a:hover, .prose h3 a:hover, .prose h4 a:hover { color: var(--accent); }

.headerlink { margin-left: .4rem; opacity: 0; color: var(--muted); text-decoration: none; }
.prose h2:hover .headerlink, .prose h3:hover .headerlink, .prose h4:hover .prose h1 a, .prose h2 a, .prose h3 a, .prose h4 a, .prose h5 a, .prose h6 a {
  color: inherit;
  text-decoration: none;
}
.prose h2 a:hover, .prose h3 a:hover, .prose h4 a:hover { color: var(--accent); }

.headerlink { opacity: .6; }

.prose p { margin: 0 0 1.2rem; }
.prose ul, .prose ol { margin: 0 0 1.2rem; padding-left: 1.4rem; }
.prose li { margin: .25rem 0; }
.prose li::marker { color: var(--muted); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

.prose blockquote {
  margin: 1.4rem 0;
  padding: .1rem 0 .1rem 1rem;
  border-left: 2px solid var(--line);
  color: var(--muted);
}
.prose blockquote p:last-child { margin-bottom: 0; }

.prose code {
  font-size: .9em;
  padding: .05em .3em;
  background: var(--bg-alt);
  border-radius: 3px;
  color: var(--accent);
}

.prose pre, .hl {
  position: relative;
  margin: 1.3rem 0;
  padding: .9rem 1rem;
  overflow-x: auto;
  font-size: .82rem;
  line-height: 1.6;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.prose pre code { padding: 0; background: none; color: var(--text); white-space: pre; }
.hl pre { margin: 0; padding: 0; background: none; border: 0; overflow: visible; }

.copy-btn {
  position: absolute;
  top: .35rem;
  right: .35rem;
  font: inherit;
  font-size: .7rem;
  padding: .05rem .4rem;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
}
pre:hover .copy-btn, .hl:hover .copy-btn, .copy-btn:focus-visible { opacity: 1; }
.copy-btn.is-done { color: var(--accent); }

.prose table {
  display: block;
  width: 100%;
  overflow-x: auto;
  margin: 1.4rem 0;
  border-collapse: collapse;
  font-size: .85rem;
}
.prose th, .prose td { padding: .4rem .7rem; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose th { color: var(--accent); font-weight: 700; }

.prose img { max-width: 100%; height: auto; }

.admonition {
  margin: 1.4rem 0;
  padding: .7rem 1rem;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: 6px;
}
.admonition-title { margin-top: 0; font-weight: 700; }

.back {
  display: flex;
  gap: 1.5rem;
  margin: 3rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  font-size: .85rem;
}

/* ---------- footer ---------- */

.site-foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  font-size: .8rem;
  color: var(--muted);
}

/* ---------- search ---------- */

.palette {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding: 8vh 1rem 1rem;
  background: rgba(0, 0, 0, .55);
}
.palette[hidden] { display: none; }

.palette-box {
  width: min(40rem, 100%);
  max-height: 72vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.palette-box input {
  font: inherit;
  font-size: .95rem;
  padding: .85rem 1rem;
  color: var(--text);
  background: var(--bg-alt);
  border: 0;
  border-bottom: 1px solid var(--line);
}
.palette-box input:focus { outline: none; }

.palette-results { list-style: none; margin: 0; padding: .3rem; overflow-y: auto; }
.palette-results a { display: block; padding: .45rem .7rem; border-radius: 5px; text-decoration: none; color: var(--text); }
.palette-results li.is-active a, .palette-results a:hover { background: var(--bg-alt); }
.res-title { font-size: .9rem; }
.res-branch { font-size: .72rem; color: var(--muted); margin-left: .5rem; }
.res-snippet {
  display: block;
  font-size: .76rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
mark { background: transparent; color: var(--accent); }
.palette-empty { padding: 1.2rem 1rem; font-size: .85rem; color: var(--muted); }
.palette-hint {
  margin: 0;
  padding: .45rem 1rem;
  border-top: 1px solid var(--line);
  font-size: .72rem;
  color: var(--muted);
}

/* ---------- syntax ---------- */

.hl .c, .hl .c1, .hl .cm, .hl .cs, .hl .cp { color: var(--syn-com); font-style: italic; }
.hl .k, .hl .kd, .hl .kn, .hl .kr, .hl .kt, .hl .kc, .hl .ow { color: var(--syn-kw); }
.hl .s, .hl .s1, .hl .s2, .hl .sb, .hl .sc, .hl .sd, .hl .se, .hl .sh, .hl .si, .hl .sx, .hl .sr { color: var(--syn-str); }
.hl .nf, .hl .nd, .hl .nc, .hl .nb, .hl .bp { color: var(--syn-fn); }
.hl .m, .hl .mi, .hl .mf, .hl .mh, .hl .mo { color: var(--syn-num); }
.hl .nt { color: var(--syn-kw); }
.hl .na, .hl .nv, .hl .vg, .hl .vi, .hl .nx { color: var(--text); }
.hl .o, .hl .p { color: var(--muted); }
.hl .err { color: var(--syn-num); }
.hl .gd { color: var(--syn-num); }
.hl .gi { color: var(--syn-str); }

/* ---------- small screens ---------- */

@media (max-width: 640px) {
  .wrap { padding-top: 1.75rem; }
  .site-head { margin-bottom: 2.5rem; }
  .row { flex-direction: column; gap: 0; padding: .35rem 0; }
  .row-date { flex: none; }
  .branch-row { flex-wrap: wrap; gap: .5rem; }
  .branch-row > a { flex: 0 0 auto; }
  .branch-desc { flex: 1 0 100%; }
}

/* ---------- hover TOC card ---------- */

.toc-trigger {
  position: fixed;
  top: 0;
  right: 0;
  width: 2.5rem;
  height: 100vh;
  z-index: 59;
  pointer-events: all;
}

.toc-rail {
  position: fixed;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%) translateX(calc(100% + 1.5rem));
  z-index: 60;
  width: 15rem;
  max-height: 65vh;
  padding: .9rem 1rem 1rem;
  background: color-mix(in srgb, var(--bg-alt) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow-y: auto;
  scrollbar-width: thin;
  opacity: 0;
  transition: transform .2s ease, opacity .18s ease;
  pointer-events: none;
}

.toc-trigger:hover ~ .toc-rail,
.toc-rail:hover,
.toc-rail.is-open {
  transform: translateY(-50%) translateX(0);
  opacity: 1;
  pointer-events: all;
}

/* small tab that always peeks out */

.toc-rail-head {
  font-size: .68rem;
  color: var(--muted);
  letter-spacing: .07em;
  text-transform: uppercase;
  margin: 0 0 .6rem;
}

.toc-rail-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.toc-rail-nav ul ul {
  padding-left: .9rem;
}
.toc-rail-nav a {
  display: block;
  padding: .15rem 0 .15rem .55rem;
  font-size: .76rem;
  line-height: 1.4;
  color: var(--muted);
  text-decoration: none;
  border-left: 1px solid var(--line);
  transition: color .1s, border-color .1s;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.toc-rail-nav a:hover { color: var(--text); text-decoration: none; }
.toc-rail-nav a.is-active { color: var(--accent); border-left-color: var(--accent); }

@media (max-width: 900px) {
  .toc-trigger, .toc-rail, .toc-tab { display: none; }
}

.toc-line {
  position: fixed;
  right: .6rem;
  top: 20%;
  height: 60%;
  width: 1px;
  background: var(--line);
  border-radius: 1px;
  z-index: 58;
  pointer-events: none;
  opacity: .5;
}