/* xuanxin default theme variables */

:root {
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", "Consolas", monospace;
  --font-serif: "Merriweather", "Georgia", "Times New Roman", serif;

  --color-bg: #fafafa;
  --color-surface: #ffffff;
  --color-text: #1a1a2e;
  --color-text-muted: #64748b;
  --color-primary: #4f46e5;
  --color-primary-hover: #4338ca;
  --color-border: #e2e8f0;
  --color-code-bg: #f1f5f9;
  --color-blockquote-bg: #f8fafc;
  --color-shadow: rgba(15, 23, 42, 0.08);
  --color-shadow-hover: rgba(15, 23, 42, 0.14);

  --max-width: 720px;
  --radius: 10px;
  --radius-sm: 6px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 18px;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: calc(var(--max-width) + 80px);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Header */
.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 1rem 0;
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(8px);
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: -0.02em;
}

.site-brand:hover { color: var(--color-primary); }

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.site-logo {
  display: block;
  height: 2.1rem;
  width: auto;
  max-width: min(240px, 52vw);
  flex-shrink: 0;
}

.site-brand-text {
  line-height: 1.2;
  min-width: 0;
}

.lang-switcher {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
  font-size: 0.875rem;
}
.lang-switcher-item {
  color: var(--color-text-muted, #666);
  text-decoration: none;
}
.lang-switcher-item:hover {
  color: var(--color-primary, #333);
  text-decoration: underline;
}
.lang-switcher-item.is-current {
  color: var(--color-text, #111);
  font-weight: 600;
}
.lang-switcher-home {
  margin-right: 0.25rem;
  padding-right: 0.75rem;
  border-right: 1px solid var(--color-border, #ddd);
}
.lang-root-list ul {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: stretch;
  width: max-content;
  max-width: 100%;
  min-width: 12.5rem;
}
.lang-root-list .lang-root-link {
  display: flex;
  width: 100%;
  min-width: 12.5rem;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
}
/* Equal-size language CTAs; color encodes locale. */
.lang-root-link--en {
  --lang-cta: #1d4ed8;
  --lang-cta-hover: #1e40af;
  background: var(--lang-cta);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--lang-cta) 35%, transparent);
}
.lang-root-link--en:hover {
  background: var(--lang-cta-hover);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--lang-cta) 42%, transparent);
}
.lang-root-link--zh,
.lang-root-link--cn {
  --lang-cta: #c2410c;
  --lang-cta-hover: #9a3412;
  background: var(--lang-cta);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--lang-cta) 35%, transparent);
}
.lang-root-link--zh:hover,
.lang-root-link--cn:hover {
  background: var(--lang-cta-hover);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--lang-cta) 42%, transparent);
}
.lang-root-link--tc {
  --lang-cta: #0f766e;
  --lang-cta-hover: #115e59;
  background: var(--lang-cta);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--lang-cta) 35%, transparent);
}
.lang-root-link--tc:hover {
  background: var(--lang-cta-hover);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--lang-cta) 42%, transparent);
}
.lang-root-link--jp {
  --lang-cta: #9f1239;
  --lang-cta-hover: #881337;
  background: var(--lang-cta);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--lang-cta) 35%, transparent);
}
.lang-root-link--jp:hover {
  background: var(--lang-cta-hover);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--lang-cta) 42%, transparent);
}
.lang-root-link--sp {
  --lang-cta: #a16207;
  --lang-cta-hover: #854d0e;
  background: var(--lang-cta);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--lang-cta) 35%, transparent);
}
.lang-root-link--sp:hover {
  background: var(--lang-cta-hover);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--lang-cta) 42%, transparent);
}
.lang-root-link--compare {
  --lang-cta: #4c1d95;
  --lang-cta-hover: #5b21b6;
  background: var(--lang-cta);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--lang-cta) 35%, transparent);
}
.lang-root-link--compare:hover {
  background: var(--lang-cta-hover);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--lang-cta) 42%, transparent);
}
.site-header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.site-purchase-link {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary) 35%, transparent);
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}

.site-purchase-link:hover {
  background: var(--color-primary-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--color-primary) 42%, transparent);
}

.site-nav a {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 0.9rem;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  flex-wrap: nowrap;
  gap: 1rem;
  width: 100%;
}

.site-nav-start {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.75rem;
}

.site-nav a:hover { color: var(--color-primary); }

.site-nav .lang-toggle {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin: 0;
  white-space: nowrap;
  padding: 0.4rem 0.8rem;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
  font: inherit;
  font-size: 0.85rem;
  line-height: 1.4;
  color: #64748b;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.site-nav .lang-toggle:hover {
  color: #1e3a8a;
  border-color: #94a3b8;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
  text-decoration: none;
}

/* Index / book home */
.index-hero {
  padding: 3rem 0 2rem;
  text-align: center;
}

.index-hero h1 {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 0.5rem;
}

.index-desc,
.book-home-desc {
  color: var(--color-text-muted);
  font-size: 1.05rem;
  max-width: 540px;
  margin: 0;
  line-height: 1.6;
}

.index-count {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

/* Book home page */
.bubble-book-index .site-header-minimal .site-brand {
  font-size: 0.95rem;
  max-width: min(100%, 28rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.book-home-hero {
  padding: 2.5rem 0 3rem;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-primary) 7%, var(--color-bg)) 0%,
    var(--color-bg) 72%
  );
  border-bottom: 1px solid var(--color-border);
}

.book-home-hero-inner {
  display: grid;
  gap: 2rem 2.5rem;
  align-items: center;
  max-width: calc(var(--max-width) + 280px);
}

.book-home-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
}

.book-home-eyebrow {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.book-home-title {
  margin: 0;
  font-size: clamp(1.85rem, 4vw, 2.65rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.book-home-meta {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.book-home-actions {
  margin-top: 0.35rem;
}

.book-home-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.72rem 1.35rem;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary) 35%, transparent);
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}

.book-home-cta:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--color-primary) 42%, transparent);
}

.book-cover {
  margin: 0;
  max-width: min(320px, 78vw);
  justify-self: center;
}

.book-cover img {
  display: block;
  width: 100%;
  height: auto;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.book-home-toc {
  padding: 2.5rem 0 3.5rem;
}

.book-home-toc-header {
  margin-bottom: 1.25rem;
}

.book-home-toc-heading {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

@media (min-width: 768px) {
  .book-home-hero-inner {
    grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  }

  .book-cover {
    justify-self: end;
    max-width: 320px;
  }

  .book-toc-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem 1rem;
  }
}

@media (min-width: 1024px) {
  .book-home-hero-inner {
    max-width: 980px;
    gap: 2.5rem 3.5rem;
  }

  .book-home-toc .container {
    max-width: 980px;
  }
}

.post-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-bottom: 3rem;
}

.post-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
  box-shadow: 0 1px 3px var(--color-shadow);
  transition: box-shadow 0.2s, transform 0.2s;
}

.post-card:hover {
  box-shadow: 0 8px 24px var(--color-shadow-hover);
  transform: translateY(-2px);
}

.post-card h2 {
  margin: 0 0 0.5rem;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
}

.post-card h2 a {
  color: var(--color-text);
  text-decoration: none;
}

.post-card h2 a:hover { color: var(--color-primary); }

.post-excerpt {
  color: var(--color-text-muted);
  margin: 0.5rem 0;
  font-size: 0.95rem;
}

.read-more {
  display: inline-block;
  margin-top: 0.75rem;
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
}

.read-more:hover { color: var(--color-primary-hover); }

.empty {
  text-align: center;
  color: var(--color-text-muted);
  padding: 3rem;
}

.empty code {
  background: var(--color-code-bg);
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius-sm);
  font-size: 0.85em;
}

/* Post page */
.post {
  background: var(--color-surface);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  box-shadow: 0 2px 12px var(--color-shadow);
  padding: 2.5rem 2rem;
  margin: 2rem auto 3rem;
  max-width: var(--max-width);
}

.post-header { margin-bottom: 2rem; }

.post-title {
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin: 0 0 1rem;
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.post-meta time::before { content: "📅 "; }

.post-author::before { content: "✍️ "; }

.post-lead {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  border-left: 4px solid var(--color-primary);
  padding: 0.75rem 1rem;
  margin: 1.25rem 0 0;
  background: var(--color-blockquote-bg);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.post-featured {
  margin: 1.5rem 0 0;
}

.post-featured img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: 0 4px 16px var(--color-shadow);
}

.post-tags, .post-card .post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.75rem;
}

.tag {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 500;
  background: var(--color-code-bg);
  color: var(--color-text-muted);
  border-radius: 999px;
  border: 1px solid var(--color-border);
}

/* Prose — markdown body (memoir: one markdown line → one <p>, keep gaps tight) */
.prose {
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--color-text);
  --prose-line-gap: 0.15rem;
}

.prose > :first-child { margin-top: 0; }

.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.prose h1 { font-size: 1.8rem; }
.prose h2 { font-size: 1.5rem; border-bottom: 1px solid var(--color-border); padding-bottom: 0.3rem; scroll-margin-top: 4rem; scroll-margin-bottom: 1rem; }
.prose h3 { font-size: 1.25rem; }

/* Book chapter pages — smaller reading size, wider column */
html:has(body.bubble-book-page) {
  font-size: 15px;
  --max-width: 960px;
}

body.bubble-book-page .container {
  max-width: calc(var(--max-width) + 100px);
}

body.bubble-book-page .post {
  max-width: var(--max-width);
}

body.bubble-book-page .post-title {
  font-size: 1.55rem;
}

body.bubble-book-page .prose {
  font-size: 0.94rem;
  line-height: 1.58;
}

body.bubble-book-page .prose h1 { font-size: 1.45rem; }
body.bubble-book-page .prose h2 { font-size: 1.2rem; scroll-margin-top: 3.5rem; }
body.bubble-book-page .prose h3 { font-size: 1.05rem; }
body.bubble-book-page .prose pre { font-size: 0.8rem; }
body.bubble-book-page .prose table { font-size: 0.85rem; }

.prose p { margin: 0 0 var(--prose-line-gap); }

.prose .math-display {
  margin: 0.85rem 0 1rem;
  overflow-x: auto;
  text-align: center;
}

.prose .math-display mjx-container[display="true"] {
  margin: 0 auto !important;
}

/* Lone ``\\`` in source → bubble ``\\hfill\\break`` in PDF (one extra line, not a full paragraph) */
.prose p:has(+ .xuanxin-blank) {
  margin-bottom: 0;
}

.prose .xuanxin-blank {
  display: block;
  height: 1lh;
  margin: 0;
  padding: 0;
}

/* LaTeX ``\\newpage`` / ``\\clearpage`` → CSS page break (bubble EPUB hook) */
.prose .xuanxin-pagebreak {
  display: none;
}

/* Paginated reader (one screen per \\newpage) */
body.xuanxin-paginated .post-paginated {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 10rem);
}

body.xuanxin-paginated .post-paginated:has(.fullpage-image) {
  min-height: 0;
}

.prose.prose-paginated {
  flex: 1;
  display: flex;
  flex-direction: column;
}

body.xuanxin-paginated .prose-paginated:has(.fullpage-image) {
  flex: 0 1 auto;
}

.xuanxin-paginated-reader {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

body.xuanxin-paginated .xuanxin-paginated-reader:has(.fullpage-image) {
  flex: 0 1 auto;
}

.xuanxin-page {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0 1.5rem;
}

body.xuanxin-paginated .xuanxin-page:has(> .fullpage-image) {
  flex: 0 0 auto;
  overflow: visible;
  padding-top: 0;
  padding-bottom: 0.75rem;
}

body.xuanxin-paginated .xuanxin-page.bubble-dedication-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: min(72vh, 42rem);
  padding: 3rem 1.5rem;
  text-align: center;
}

body.xuanxin-paginated .xuanxin-page.bubble-dedication-page h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body.xuanxin-paginated .xuanxin-page.bubble-dedication-page .bubble-centersection {
  margin: 0 auto;
  min-height: 0;
  max-width: 28rem;
  font-size: 1.08rem;
  line-height: 1.75;
}

body.xuanxin-paginated .xuanxin-page.bubble-dedication-page .bubble-centersection p {
  margin: 0 0 1rem;
}

body.xuanxin-paginated .xuanxin-page.bubble-dedication-page .bubble-centersection p:last-child {
  margin-bottom: 0;
  font-style: normal;
  color: var(--color-text-muted);
}

.bubble-section-sidebar.is-hidden-on-page {
  visibility: hidden;
  pointer-events: none;
}

.xuanxin-page[hidden] {
  display: none !important;
}

.page-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem;
  margin: 1rem 0;
  padding: 0.75rem 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.page-nav-bottom {
  margin-top: auto;
}

.page-nav-btn {
  font: inherit;
  font-size: 0.92rem;
  color: var(--color-primary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.5rem 0.85rem;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.page-nav-btn:hover:not(:disabled) {
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px var(--color-shadow);
}

.page-nav-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.page-nav-prev { justify-self: start; }
.page-nav-next { justify-self: end; }

.page-nav-indicator {
  justify-self: center;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

body.xuanxin-paginated .prose .fullpage-image {
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  page-break-before: auto;
  break-before: auto;
}

body.xuanxin-paginated .prose .fullpage-image.is-rotated-side img {
  max-width: 100% !important;
  max-height: none !important;
  width: auto !important;
  height: auto !important;
}

@media print {
  .prose .xuanxin-pagebreak {
    display: block;
    page-break-before: always;
    break-before: page;
    margin: 0;
    padding: 0;
    height: 0;
    border: 0;
    overflow: hidden;
  }

  .xuanxin-page[hidden] {
    display: block !important;
  }

  .page-nav,
  .chapter-nav,
  .xuanxin-section-nav,
  .xuanxin-fullpage-controls,
  .xuanxin-fullpage-lightbox {
    display: none !important;
  }
}

/* Extra breathing room before/after section headings */
.prose h2 + p,
.prose h3 + p {
  margin-top: 0.5rem;
}

.prose a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prose a:hover { color: var(--color-primary-hover); }

.prose ul, .prose ol {
  margin: 0 0 1.2rem;
  padding-left: 1.5rem;
}

.prose li { margin-bottom: 0.4rem; }

.prose blockquote {
  border-left: 4px solid var(--color-primary);
  background: var(--color-blockquote-bg);
  margin: 1.5rem 0;
  padding: 0.75rem 1.25rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--color-text-muted);
  font-style: italic;
}

/* Bubble-style NOTES/IMPORS/WARNS/AIMLS sections */
.prose aside.xuanxin-notesection,
.prose aside.xuanxin-importantsection,
.prose aside.xuanxin-warnsection,
.prose aside.xuanxin-aimlsection {
  display: block;
  margin: 1rem 0;
  padding: 0.65rem 0.85rem 0.65rem 2.1rem;
  border-radius: var(--radius-sm);
  border: 0.8px solid;
  font-size: 0.92rem;
  line-height: 1.55;
  position: relative;
}

.prose aside.xuanxin-notesection::before,
.prose aside.xuanxin-importantsection::before,
.prose aside.xuanxin-warnsection::before,
.prose aside.xuanxin-aimlsection::before {
  position: absolute;
  left: 0.55rem;
  top: 0.65rem;
  font-size: 1rem;
  line-height: 1;
}

.prose aside.xuanxin-notesection {
  background: color-mix(in srgb, #facc15 12%, var(--color-surface));
  border-color: color-mix(in srgb, var(--color-primary) 55%, #94a3b8);
  color: var(--color-text);
  font-style: normal;
}

.prose aside.xuanxin-notesection::before { content: "📝"; }

.prose aside.xuanxin-importantsection {
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
  border-color: color-mix(in srgb, var(--color-primary) 70%, #64748b);
  color: var(--color-text);
  font-style: normal;
}

.prose aside.xuanxin-importantsection::before { content: "ℹ️"; }

.prose aside.xuanxin-warnsection {
  background: color-mix(in srgb, #f97316 12%, var(--color-surface));
  border-color: color-mix(in srgb, #f97316 55%, #94a3b8);
  color: var(--color-text);
  font-style: normal;
}

.prose aside.xuanxin-warnsection::before { content: "⚠️"; }

.prose aside.xuanxin-aimlsection {
  background: color-mix(in srgb, #22d3ee 12%, var(--color-surface));
  border-color: color-mix(in srgb, var(--color-primary) 60%, #22d3ee);
  color: var(--color-text);
  font-style: normal;
}

.prose aside.xuanxin-aimlsection::before { content: "🤖"; }

.prose aside.xuanxin-notesection > :first-child,
.prose aside.xuanxin-importantsection > :first-child,
.prose aside.xuanxin-warnsection > :first-child,
.prose aside.xuanxin-aimlsection > :first-child {
  margin-top: 0;
}

.prose aside.xuanxin-notesection > :last-child,
.prose aside.xuanxin-importantsection > :last-child,
.prose aside.xuanxin-warnsection > :last-child,
.prose aside.xuanxin-aimlsection > :last-child {
  margin-bottom: 0;
}

.prose aside.xuanxin-notesection p,
.prose aside.xuanxin-importantsection p,
.prose aside.xuanxin-warnsection p,
.prose aside.xuanxin-aimlsection p {
  margin: 0 0 var(--prose-line-gap);
}

/* Peanutbook CENTERS-CENTERE (dedication / epigraph) */
.prose aside.bubble-centersection {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 2.5rem auto;
  padding: 1.5rem 1rem;
  min-height: 10rem;
  font-style: italic;
}

.prose aside.bubble-centersection > :first-child {
  margin-top: 0;
}

.prose aside.bubble-centersection > :last-child {
  margin-bottom: 0;
}

/* GALLERYS/GALLERYE image carousel */
.prose .xuanxin-gallery {
  margin: 0.75rem 0;
  border: 1px solid color-mix(in srgb, var(--color-border, #cbd5e1) 80%, transparent);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-surface);
}

.prose .xuanxin-gallery-viewport {
  height: 168px;
  overflow: hidden;
  background: color-mix(in srgb, var(--color-bg) 92%, #000 8%);
}

.prose .xuanxin-gallery:not(.xuanxin-gallery-has-captions) .xuanxin-gallery-viewport {
  height: 188px;
}

.prose .xuanxin-gallery-single .xuanxin-gallery-viewport {
  height: 188px;
}

.prose .xuanxin-gallery-single:not(.xuanxin-gallery-has-captions) .xuanxin-gallery-viewport {
  height: 200px;
}

.prose .xuanxin-gallery-track {
  display: flex;
  height: 100%;
  transition: transform 0.25s ease;
}

.prose .xuanxin-gallery-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0.15rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.prose .xuanxin-gallery-slide img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0;
}

.prose .xuanxin-gallery-slide video,
.prose .xuanxin-gallery-video {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0;
  background: #000;
}

.prose .xuanxin-encrypted-media[hidden] {
  display: none;
}

.prose .xuanxin-gallery-caption {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0.3rem 0.55rem;
  font: inherit;
  font-size: 0.8rem;
  line-height: 1.3;
  text-align: left;
  color: var(--color-text-muted);
  background: color-mix(in srgb, var(--color-bg) 96%, transparent);
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--color-border, #cbd5e1) 80%, transparent);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prose .xuanxin-gallery-caption[hidden] {
  display: none;
}

.prose .xuanxin-gallery-caption:hover {
  color: var(--color-text);
}

.prose .xuanxin-gallery-caption[aria-expanded="true"] {
  white-space: normal;
  color: var(--color-text);
  max-height: 4.5rem;
  overflow-y: auto;
}

.prose .xuanxin-gallery-controls {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.45rem;
  border-top: 1px solid color-mix(in srgb, var(--color-border, #cbd5e1) 80%, transparent);
}

.prose .xuanxin-gallery-btn {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--color-border, #cbd5e1) 80%, transparent);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-sm);
  padding: 0.2rem 0.55rem;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.2;
  cursor: pointer;
}

.prose .xuanxin-gallery-btn:hover:not(:disabled) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.prose .xuanxin-gallery-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.prose .xuanxin-gallery-indicator {
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.prose .xuanxin-gallery-lock {
  margin: 0.75rem 0;
  border: 1px solid color-mix(in srgb, var(--color-border, #cbd5e1) 80%, transparent);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  overflow: hidden;
}

.xuanxin-entry-lock {
  margin: 1rem 0 0;
  border: 1px solid color-mix(in srgb, var(--color-border, #cbd5e1) 80%, transparent);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.xuanxin-entry-lock.is-unlocked {
  margin: 0;
  border: 0;
  background: transparent;
}

.prose .xuanxin-gallery-lock.is-unlocked .xuanxin-gallery-unlock,
.xuanxin-entry-lock.is-unlocked .xuanxin-gallery-unlock {
  display: none;
}

.prose .xuanxin-gallery-unlock,
.xuanxin-entry-lock .xuanxin-gallery-unlock {
  margin: 0;
  padding: 0.85rem 0.75rem;
  display: grid;
  gap: 0.45rem;
}

.prose .xuanxin-gallery-unlock-label,
.xuanxin-entry-lock .xuanxin-gallery-unlock-label {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.prose .xuanxin-gallery-unlock-row,
.xuanxin-entry-lock .xuanxin-gallery-unlock-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.45rem;
}

.prose .xuanxin-gallery-unlock-input,
.xuanxin-entry-lock .xuanxin-gallery-unlock-input {
  font: inherit;
  font-size: 0.9rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid color-mix(in srgb, var(--color-border, #cbd5e1) 80%, transparent);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
}

.prose .xuanxin-gallery-unlock-btn,
.xuanxin-entry-lock .xuanxin-gallery-unlock-btn {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--color-border, #cbd5e1) 80%, transparent);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.75rem;
  font: inherit;
  cursor: pointer;
}

.prose .xuanxin-gallery-unlock-btn:hover,
.xuanxin-entry-lock .xuanxin-gallery-unlock-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.prose .xuanxin-gallery-unlock-error,
.xuanxin-entry-lock .xuanxin-gallery-unlock-error {
  margin: 0;
  font-size: 0.82rem;
  color: #dc2626;
}

.prose .xuanxin-gallery-lock .xuanxin-gallery {
  margin: 0;
  border: 0;
  border-radius: 0;
}

.prose .xuanxin-gallery-lock .xuanxin-gallery[hidden] {
  display: none;
}

.prose code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--color-code-bg);
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius-sm);
}

.prose pre.codeblock {
  background: #1e293b;
  color: #e2e8f0;
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  overflow-x: auto;
  margin: 1.5rem 0;
  font-size: 0.85rem;
  line-height: 1.6;
}

.prose pre.bash-codeblock {
  background: #f3faf3;
  color: #1e293b;
  border: 1px solid #d8ead8;
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  overflow-x: auto;
  margin: 1.5rem 0;
  font-size: 0.85rem;
  line-height: 1.6;
}

.prose pre.cpp-codeblock {
  background: #fdf2f8;
  color: #1e293b;
  border: 1px solid #f5d0e6;
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  overflow-x: auto;
  margin: 1.5rem 0;
  font-size: 0.85rem;
  line-height: 1.6;
}

.prose pre.java-codeblock {
  background: #f5f3ff;
  color: #1e293b;
  border: 1px solid #ddd6fe;
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  overflow-x: auto;
  margin: 1.5rem 0;
  font-size: 0.85rem;
  line-height: 1.6;
}

.prose pre.js-codeblock {
  background: #fff7ed;
  color: #1e293b;
  border: 1px solid #fed7aa;
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  overflow-x: auto;
  margin: 1.5rem 0;
  font-size: 0.85rem;
  line-height: 1.6;
}

.prose pre.go-codeblock {
  background: #ecfeff;
  color: #1e293b;
  border: 1px solid #a5f3fc;
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  overflow-x: auto;
  margin: 1.5rem 0;
  font-size: 0.85rem;
  line-height: 1.6;
}

.prose pre.rust-codeblock {
  background: #faf5f0;
  color: #1e293b;
  border: 1px solid #e7d5c4;
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  overflow-x: auto;
  margin: 1.5rem 0;
  font-size: 0.85rem;
  line-height: 1.6;
}

.prose pre.cs-codeblock {
  background: #eff6ff;
  color: #1e293b;
  border: 1px solid #bfdbfe;
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  overflow-x: auto;
  margin: 1.5rem 0;
  font-size: 0.85rem;
  line-height: 1.6;
}

.prose pre.sql-codeblock {
  background: #f0fdfa;
  color: #1e293b;
  border: 1px solid #99f6e4;
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  overflow-x: auto;
  margin: 1.5rem 0;
  font-size: 0.85rem;
  line-height: 1.6;
}

.prose pre.terminal-codeblock {
  background: #f5f5f5;
  color: #000000;
  border: 1px solid #000000;
  border-left: 4px solid #000000;
  border-radius: 4px;
  padding: 1rem 1.25rem;
  overflow-x: auto;
  margin: 1.5rem 0;
  font-size: 0.85rem;
  line-height: 1.6;
}

.prose pre.no-border-radius-codeblock {
  border-radius: 0;
}

.prose pre.no-border-line-codeblock {
  border: none;
}

.prose pre {
  background: #1e293b;
  color: #e2e8f0;
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  overflow-x: auto;
  margin: 1.5rem 0;
  font-size: 0.85rem;
  line-height: 1.6;
}

.prose pre code {
  background: transparent;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

.prose pre.codeblock code,
.prose pre.bash-codeblock code,
.prose pre.cpp-codeblock code,
.prose pre.java-codeblock code,
.prose pre.js-codeblock code,
.prose pre.go-codeblock code,
.prose pre.rust-codeblock code,
.prose pre.cs-codeblock code,
.prose pre.sql-codeblock code,
.prose pre.no-border-radius-codeblock code,
.prose pre.no-border-line-codeblock code,
.prose pre.terminal-codeblock code {
  background: transparent;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

.prose .highlight { border-radius: var(--radius); overflow: hidden; }

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.9rem;
  font-family: var(--font-sans);
}

.prose th, .prose td {
  border: 1px solid var(--color-border);
  padding: 0.6rem 0.9rem;
  text-align: left;
}

.prose th {
  background: var(--color-code-bg);
  font-weight: 600;
}

.prose tr:nth-child(even) { background: var(--color-blockquote-bg); }

.prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  margin: 1.25rem 0;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.prose .tp-image-section img,
.prose .fullpage-image img,
.post-featured img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Chapter opening artwork from **tp_image** — flat, bottom-right in opening block */
.prose .tp-image-section {
  margin: 1.1em 0;
}

/* Quote above, image below (no overlap — quote bg would hide the art) */
.prose .tp-image-section:has(blockquote) {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.prose .tp-image-section:has(blockquote) blockquote {
  align-self: stretch;
  margin-bottom: 0;
}

.prose .tp-image-section img.tp-image {
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.prose .tp-image-section img.tp-image:hover {
  box-shadow: none;
}

/* Opening block is only the image (no blockquote above) */
.prose .tp-image-section:has(> img.tp-image:only-child) {
  display: flex;
  justify-content: flex-end;
}

/* Bubble-style placement modes (see docs/markdown_syntax_extensions.md) */
.prose img.background {
  margin: 0;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

.prose img.background:hover {
  box-shadow: none;
}

.prose .image-background-section {
  position: relative;
  isolation: isolate;
  margin: 1.5rem 0;
}

.prose .image-background-section.image-background-bottom-right,
.prose .image-background-section.image-background-top-right {
  margin: 0;
}

.prose .image-background-section > img.background {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

.prose .image-background-section > img.background.bottom-right {
  left: auto;
  top: auto;
  width: auto;
  height: auto;
  max-width: 100%;
}

.prose .image-background-section > img.background.top-right {
  left: auto;
  bottom: auto;
  width: auto;
  height: auto;
  max-width: 100%;
}

.prose .image-background-section > :not(img.background) {
  position: relative;
  z-index: 1;
}

/* Stacked full-bleed backgrounds: N images, one band per paired text.
   Each band's own height comes from its own text (no fixed/viewport-
   relative height, no internal scrollbar) -- a fixed height here used to
   mean a short browser window shrank the band below what its text
   needed, forcing it to scroll internally even though the same text
   fit fine in a tall window. The tradeoff: two bands paired with very
   different text lengths can now end up visibly different heights,
   instead of always matching. */
.prose .image-background-stack {
  display: flex;
  flex-direction: column;
  margin: 1.5rem 0;
}

.prose .image-background-stack > .image-background-section.image-background-stack-item {
  margin: 0;
  position: relative;
  isolation: isolate;
}

.prose .image-background-stack > .image-background-section.image-background-stack-item > img.background {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  margin: 0;
}

.prose figure.image-block {
  margin: 1.5rem 0;
  text-align: center;
}

.prose figure.image-block img {
  margin: 0 auto 0.5rem;
}

.prose figure.image-block figcaption {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--color-text-muted);
  font-style: italic;
}

.prose .fullpage-image {
  page-break-before: always;
  break-before: page;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2rem 0;
  overflow: visible;
  position: relative;
}

@media print {
  .prose .fullpage-image {
    min-height: 100vh;
  }
}

.prose .fullpage-image img {
  margin: 0;
  transition: transform 0.35s ease;
  transform-origin: center center;
}

.prose .fullpage-image.is-rotated-side img {
  max-width: min(75vh, 100%) !important;
  max-height: 100vw !important;
  width: auto !important;
  height: auto !important;
}

.xuanxin-fullpage-controls[hidden] {
  display: none !important;
}

.prose .fullpage-image .xuanxin-fullpage-controls {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  left: auto;
  z-index: 5;
  display: flex;
  gap: 0.4rem;
}

.xuanxin-fullpage-controls {
  display: flex;
  gap: 0.4rem;
}

.xuanxin-fullpage-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-surface) 96%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  box-shadow: 0 4px 16px var(--color-shadow);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.xuanxin-fullpage-icon {
  display: block;
}

.xuanxin-fullpage-btn:hover,
.xuanxin-fullpage-btn:focus-visible {
  color: #fff;
  background: var(--color-primary);
  border-color: var(--color-primary);
  outline: none;
}

.xuanxin-fullpage-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.xuanxin-fullpage-lightbox[hidden] {
  display: none !important;
}

.xuanxin-fullpage-lightbox-backdrop {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  background: color-mix(in srgb, #0f172a 88%, transparent);
  cursor: pointer;
}

.xuanxin-fullpage-lightbox-stage {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 96vw;
  max-height: 96vh;
  pointer-events: none;
}

.xuanxin-fullpage-lightbox-img {
  max-width: min(96vw, 96vh);
  max-height: min(96vw, 96vh);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.45);
  transition: transform 0.35s ease;
  pointer-events: auto;
}

.xuanxin-fullpage-lightbox-img.is-rotated-side {
  max-width: min(96vh, 96vw);
  max-height: min(96vw, 96vh);
}

.xuanxin-fullpage-lightbox-close {
  position: absolute;
  top: -0.35rem;
  right: -0.35rem;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 4px 16px var(--color-shadow);
}

.xuanxin-fullpage-lightbox-close:hover,
.xuanxin-fullpage-lightbox-close:focus-visible {
  color: #fff;
  background: var(--color-primary);
  border-color: var(--color-primary);
  outline: none;
}

body.xuanxin-lightbox-open {
  overflow: hidden;
}

/* Book figures: no hover chrome (shadow/border) */
body.bubble-book-page .prose img,
body.bubble-book-page .prose img:hover,
body.bubble-book-page .prose figure.image-block img,
body.bubble-book-page .prose figure.image-block img:hover {
  box-shadow: none;
  outline: none;
}

/* Image utility classes (from MockSphere) */
.prose .img-small { width: 200px !important; max-width: 200px !important; }
.prose .img-medium { width: 400px !important; max-width: 400px !important; }
.prose .img-large { width: 600px !important; max-width: 600px !important; }
.prose .img-full { width: 100% !important; }
.prose .img-left { float: left; margin: 0 1.25rem 1rem 0; }
.prose .img-right { float: right; margin: 0 0 1rem 1.25rem; }
.prose .img-center { display: block; margin: 1.25rem auto; }
.prose .img-rounded { border-radius: 15px; }
.prose .img-circle { border-radius: 50%; }
.prose .img-border { border: 2px solid var(--color-border); }
.prose .img-border-primary { border: 2px solid var(--color-primary); }

.prose hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 2rem 0;
}

.prose .toc {
  background: var(--color-blockquote-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  font-family: var(--font-sans);
  font-size: 0.9rem;
}

.prose .toc ul { margin: 0; padding-left: 1.2rem; }

/* Video embeds */
.video-embed, .youtube-embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  margin: 1.5rem 0;
  border-radius: var(--radius);
  box-shadow: 0 4px 16px var(--color-shadow);
}

.video-embed iframe, .youtube-embed-container iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
  border-radius: var(--radius);
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding: 2rem 0;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.site-footer a { color: var(--color-primary); }

/* Opt-in custom footer branding (peanut.config's html_footer_logo/_text/
   _link) in place of the default "Built with peanutbook" line -- see
   HtmlBookRenderer._book_header_context. Explicit width/height on the
   <img> itself (not just this CSS) keeps it small regardless of
   stylesheet load order; this CSS is what actually renders it at that
   size once the sheet's applied. */
.site-footer-brand { margin: 0; }
.site-footer-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: inherit;
  text-decoration: none;
}
.site-footer-brand-link:hover { text-decoration: underline; }
.site-footer-logo {
  width: 20px;
  height: 20px;
  max-width: 20px;
  max-height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Foldable left sidebar — in-chapter section navigation (H2 jump links) */
.bubble-section-sidebar {
  position: fixed;
  left: 0;
  top: 4.65rem;
  z-index: 300;
  display: flex;
  align-items: stretch;
  max-height: calc(100vh - 5.25rem);
  font-family: var(--font-sans);
  filter: drop-shadow(0 8px 24px color-mix(in srgb, var(--color-shadow) 80%, transparent));
  pointer-events: none;
}

.bubble-section-sidebar > * {
  pointer-events: auto;
}

.bubble-section-sidebar-handle {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 2.65rem;
  padding: 0.75rem 0.35rem;
  border: 1px solid var(--color-border);
  border-left: none;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)),
    var(--color-surface)
  );
  color: var(--color-primary);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.bubble-section-sidebar-handle:hover,
.bubble-section-sidebar-handle:focus-visible {
  background: color-mix(in srgb, var(--color-primary) 16%, var(--color-surface));
  color: var(--color-primary-hover);
  outline: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 25%, transparent);
}

.bubble-section-sidebar-handle-icon {
  display: flex;
  line-height: 0;
}

.bubble-section-sidebar-handle-text {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.bubble-section-sidebar-panel {
  width: 14.5rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-left: none;
  border-radius: 0 var(--radius) var(--radius) 0;
  background: color-mix(in srgb, var(--color-surface) 98%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: width 0.24s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.18s ease,
    border-color 0.18s ease;
}

.bubble-section-sidebar.is-collapsed .bubble-section-sidebar-panel {
  width: 0;
  opacity: 0;
  border-color: transparent;
  pointer-events: none;
}

.bubble-section-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.65rem 0.85rem 0.55rem;
  border-bottom: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
}

.bubble-section-sidebar-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.bubble-section-sidebar-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.bubble-section-sidebar-nav {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.45rem 0.35rem 0.55rem;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--color-primary) 35%, transparent) transparent;
}

.bubble-section-sidebar-nav ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bubble-section-sidebar-item + .bubble-section-sidebar-item {
  margin-top: 0.15rem;
}

.bubble-section-sidebar-link {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.45rem 0.55rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--color-text);
  transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}

.bubble-section-sidebar-link:hover,
.bubble-section-sidebar-link:focus-visible {
  background: color-mix(in srgb, var(--color-primary) 9%, transparent);
  color: var(--color-primary);
  outline: none;
}

.bubble-section-sidebar-link.is-active {
  background: color-mix(in srgb, var(--color-primary) 13%, transparent);
  color: var(--color-primary);
  box-shadow: inset 3px 0 0 var(--color-primary);
}

.bubble-section-sidebar-num {
  flex: 0 0 auto;
  min-width: 1.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  color: var(--color-text-muted);
}

.bubble-section-sidebar-link.is-active .bubble-section-sidebar-num,
.bubble-section-sidebar-link:hover .bubble-section-sidebar-num {
  color: var(--color-primary);
}

.bubble-section-sidebar-label {
  flex: 1;
  font-size: 0.78rem;
  line-height: 1.35;
  font-weight: 500;
}

@media (max-width: 900px) {
  .bubble-section-sidebar {
    top: 4.35rem;
    max-height: calc(100vh - 4.75rem);
  }

  .bubble-section-sidebar-panel {
    width: min(14.5rem, calc(100vw - 3.5rem));
  }
}

/* This `top` assumes a short header -- true for book_html's own static
   header, but the companion Django app (web/booksite) replaces it with a
   taller one (nav-pills + a 5-language switcher + login/signup, all
   wrapping onto their own rows below ~480px -- see that app's own
   .site-nav CSS) that the fixed offset above doesn't clear, so the
   collapsed sidebar's toggle tab sat on top of the site title. Measured
   against that specific injected header at 390px (Playwright: header
   height ~159.5px -- root font-size there is 15px, not the usual 16px,
   so that's ~10.6rem, not 10rem) with some margin for a book whose nav
   wraps slightly differently (more/fewer languages, no praise/events
   pills yet, etc). */
@media (max-width: 480px) {
  .bubble-section-sidebar {
    top: 11rem;
    max-height: calc(100vh - 11.5rem);
  }
}

@media print {
  .bubble-section-sidebar {
    display: none !important;
  }
}

/* Legacy inline section buttons (kept for older HTML output) */
.xuanxin-section-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin: 0.75rem 0 1.35rem;
}

.xuanxin-section-nav--floating {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  left: auto;
  z-index: 250;
  margin: 0;
  padding: 0.45rem 0.55rem;
  max-width: min(22rem, calc(100vw - 2rem));
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem;
  background: color-mix(in srgb, var(--color-surface) 96%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 4px 20px var(--color-shadow);
}

.xuanxin-section-nav--floating .xuanxin-section-nav-btn {
  padding: 0.32rem 0.75rem;
  font-size: 0.82rem;
}

body.xuanxin-has-section-nav {
  padding-bottom: 0;
}

body.xuanxin-has-section-nav .site-footer {
  margin-bottom: 0;
}

.xuanxin-section-nav-btn {
  display: inline-block;
  padding: 0.38rem 0.95rem;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 500;
  font-style: normal;
  line-height: 1.3;
  text-decoration: none;
  color: var(--color-primary);
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.xuanxin-section-nav-btn:hover,
.xuanxin-section-nav-btn:focus-visible {
  color: #fff;
  background: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-primary) 35%, transparent);
  outline: none;
}

.prose h2.xuanxin-section-target {
  animation: xuanxin-section-flash 1.6s ease;
}

@keyframes xuanxin-section-flash {
  0%, 100% { background: transparent; }
  18% { background: color-mix(in srgb, var(--color-primary) 14%, transparent); }
  45% { background: color-mix(in srgb, var(--color-primary) 8%, transparent); }
}

/* Book table of contents */
.book-toc { margin: 0; }
.book-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.book-toc-item a {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-height: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.book-toc-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-primary);
  line-height: 1.2;
}
.book-toc-title {
  font-size: 0.94rem;
  line-height: 1.35;
}
.book-toc-item a:hover {
  border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
  box-shadow: 0 4px 14px var(--color-shadow);
  transform: translateY(-1px);
}

.diary-day-nav {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--color-border, #cbd5e1) 80%, transparent);
}

/* Chapter prev/next navigation */
.chapter-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem;
  margin: 1.5rem 0;
  font-size: 0.92rem;
}
.chapter-nav-top { margin-top: 0.5rem; }
.chapter-nav-bottom { margin-bottom: 2rem; }
.chapter-nav-prev,
.chapter-nav-next {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-primary);
  text-decoration: none;
  line-height: 1.35;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.chapter-nav-prev:hover,
.chapter-nav-next:hover {
  text-decoration: none;
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.chapter-nav-prev { justify-self: start; text-align: left; }
.chapter-nav-next { justify-self: end; text-align: right; }
/* section_pages (booksite's Django app) blanks this out with an empty
   <span class="chapter-nav-prev/next"> at a chapter's actual first/last
   section, keeping the grid cell for alignment -- without this, the pill
   border/background would still show as a visible empty box. */
.chapter-nav-prev:empty, .chapter-nav-next:empty {
  border-color: transparent;
  background: transparent;
}
.chapter-nav-index {
  justify-self: center;
  color: var(--color-text-muted);
  text-decoration: none;
  white-space: nowrap;
}
.chapter-nav-index:hover { color: var(--color-primary); }
.chapter-nav-spacer { display: block; }

@media (max-width: 640px) {
  html { font-size: 16px; }
  .post { padding: 1.5rem 1.25rem; margin: 1rem auto 2rem; }
  .post-title { font-size: 1.7rem; }
  .index-hero h1,
  .book-home-title { font-size: 1.75rem; }
  .book-home-hero {
    padding: 1.75rem 0 2.25rem;
  }
  .book-home-hero-inner {
    text-align: center;
  }
  .book-home-intro {
    align-items: center;
  }
  .book-home-desc {
    text-align: center;
  }
  .book-cover {
    max-width: min(260px, 72vw);
  }
  .chapter-nav {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .chapter-nav-prev,
  .chapter-nav-next { justify-self: center; text-align: center; }
  .chapter-nav-index { order: -1; margin-bottom: 0.25rem; }
  .page-nav {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .page-nav-prev,
  .page-nav-next { justify-self: center; }
  .page-nav-indicator { order: -1; margin-bottom: 0.25rem; }
}

/* Cross-references */
.prose a.bubble-ref {
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px dotted color-mix(in srgb, var(--color-primary) 55%, transparent);
  white-space: nowrap;
}

.prose a.bubble-ref:hover {
  border-bottom-style: solid;
}

/* Algorithm blocks */
.prose .bubble-algorithm {
  margin: 1.25rem 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  overflow: hidden;
}

.prose .bubble-alg-caption {
  padding: 0.65rem 1rem;
  font-weight: 600;
  font-size: 0.92rem;
  border-bottom: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-blockquote-bg) 70%, var(--color-surface));
}

.prose .bubble-alg-body {
  padding: 0.75rem 1rem 0.85rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.82rem;
  line-height: 1.55;
}

.prose .bubble-alg-line {
  margin: 0.15rem 0;
}

.prose .bubble-alg-kw {
  font-weight: 700;
  font-variant: small-caps;
  letter-spacing: 0.03em;
}

.prose .bubble-alg-comment {
  color: var(--color-text-muted);
  font-style: italic;
  margin-left: 0.35rem;
}

.prose .bubble-alg-for em,
.prose .bubble-alg-state em {
  font-style: normal;
  font-weight: 600;
  color: var(--color-primary);
}

/* Fancy dividers (LaTeX \\fancydivider / \\fancydividerwithicon) */
.prose .bubble-fancy-divider {
  display: flex;
  align-items: center;
  width: var(--bubble-divider-width, 95%);
  max-width: 100%;
  margin: 1.5rem auto;
  clear: both;
}

.prose .bubble-fancy-divider-line {
  flex: 1 1 auto;
  height: 0;
  border-top: 1.5px solid var(--bubble-divider-color, #99ccff);
  min-width: 1.5rem;
}

.prose .bubble-fancy-divider-icon {
  flex: 0 0 auto;
  height: 1.75rem;
  width: auto;
  margin: 0 0.4rem;
  object-fit: contain;
}

.prose .bubble-fancy-divider-end .bubble-fancy-divider-line-after,
.prose .bubble-fancy-divider-begin .bubble-fancy-divider-line-before {
  display: none;
}

.prose .bubble-fancy-divider-plain .bubble-fancy-divider-line {
  flex: none;
  width: 100%;
}

/* Numbered display equations */
.prose .math-display.bubble-equation {
  position: relative;
  padding-right: 3.25rem;
}

.prose .bubble-equation-number {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.88rem;
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  white-space: nowrap;
}

/* Raw \begin{center}...\end{center} LaTeX (print-only colophon/closing
   pages) converted to this by htmlbook/latex_decorations.py, so it needs
   an HTML equivalent of what \begin{center} does. */
.prose .latex-center {
  text-align: center;
  margin: 1.5em 0;
}