/* cibo adaptation: pcell seven-layer md containers, scoped to .prose (body_rendered).
   pcell semantic tokens re-mapped to cibo cl-* tokens so containers follow
   cibo's theme light/dark automatically. */
.prose {
  --separator: var(--cl-line);
  --card-bg: var(--cl-surface);
  --fill-secondary: var(--cl-fill);
  --text-primary: var(--cl-ink);
  --text-secondary: var(--cl-muted);
}

/* ── Prose content (tables, code, etc.) ──────────────────────────────── */
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
  font-size: 0.875em;
  line-height: 1.6;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.prose thead {
  border-bottom: 2px solid var(--separator);
}
.prose th {
  font-weight: 600;
  text-align: left;
  padding: 8px 12px;
  color: var(--text-primary);
  background: var(--fill-tertiary);
}
.prose td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--separator);
  color: var(--text-secondary);
}
.prose tr:last-child td {
  border-bottom: none;
}
.prose tbody tr:hover {
  background: var(--fill-tertiary);
}
.prose code {
  font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace;
  font-size: 0.85em;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--fill-tertiary);
  color: var(--text-primary);
}
.prose pre {
  padding: 12px 16px;
  border-radius: var(--radius-concentric);
  background: var(--fill-tertiary);
  overflow-x: auto;
  margin: 1em 0;
  font-size: 0.85em;
}
.prose pre code {
  padding: 0;
  background: none;
}
.prose img {
  max-width: 100%;
  border-radius: var(--radius-fixed);
}
.prose hr {
  border: none;
  border-top: 1px solid var(--separator);
  margin: 1.5em 0;
}
.prose blockquote {
  border-left: 3px solid var(--fill-primary);
  padding-left: 12px;
  color: var(--text-tertiary);
  margin: 1em 0;
}
/* Kroki-diagram SVGs (server-side pre-rendered).
   Always rendered as light-themed cards with white background.
   No CSS filter inversion — avoids foreignObject text rendering
   bugs across browsers. Clean card style works in both modes. */
.prose .kroki-diagram {
  display: flex;
  justify-content: center;
  margin: 1.5em 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  cursor: zoom-in;
}
.prose .kroki-diagram svg {
  max-width: 100%;
  height: auto;
  display: block;
}
/* Light border in dark mode to visually separate the card */
.dark .prose .kroki-diagram {
  border: 1px solid var(--color-border, #333);
}

/* ── Task list checkboxes ────────────────────────────────────── */
.prose li:has(> input[type="checkbox"]) {
  list-style: none;
  margin-left: -1.25em;
}

/* ── Markdown in chat bubbles ─────────────────────────────────── */
.markdown-body {
  word-break: break-word;
}
.markdown-body p {
  margin: 0.25em 0;
}
.markdown-body p:first-child {
  margin-top: 0;
}
.markdown-body p:last-child {
  margin-bottom: 0;
}
.markdown-body a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: 0.9;
}
.markdown-body a:hover {
  opacity: 1;
}
.markdown-body strong {
  font-weight: 600;
}
.markdown-body em {
  font-style: italic;
}
.markdown-body code {
  font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace;
  font-size: 0.82em;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.12);
}
.markdown-body pre {
  margin: 0.5em 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.15);
  overflow-x: auto;
  font-size: 0.82em;
  line-height: 1.5;
}
.markdown-body pre code {
  padding: 0;
  background: none;
  font-size: inherit;
}
.markdown-body ul, .markdown-body ol {
  margin: 0.25em 0;
  padding-left: 1.5em;
}
.markdown-body li {
  margin: 0.125em 0;
}
.markdown-body blockquote {
  border-left: 2px solid currentColor;
  opacity: 0.7;
  padding-left: 8px;
  margin: 0.25em 0;
}
.markdown-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5em 0;
  font-size: 0.8em;
}
.markdown-body th, .markdown-body td {
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  text-align: left;
}
.markdown-body th {
  font-weight: 600;
  background: rgba(0, 0, 0, 0.1);
}
.markdown-body hr {
  border: none;
  border-top: 1px solid currentColor;
  opacity: 0.2;
  margin: 0.5em 0;
}
.markdown-body img {
  max-width: 100%;
  border-radius: 6px;
  margin: 0.25em 0;
}
.markdown-body .kroki-diagram {
  display: flex;
  justify-content: center;
  margin: 0.75em 0;
  overflow-x: auto;
  background: #fff;
  border-radius: 8px;
  padding: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  cursor: zoom-in;
}
.markdown-body .kroki-diagram svg {
  max-width: 100%;
  height: auto;
  display: block;
}
/* Math display */
.markdown-body .katex-display {
  margin: 0.5em 0;
  overflow-x: auto;
  overflow-y: hidden;
}
.markdown-body .katex {
  font-size: 1.05em;
}
.prose li input[type="checkbox"] {
  width: 1em;
  height: 1em;
  margin-right: 0.4em;
  accent-color: var(--color-accent);
  vertical-align: middle;
  cursor: default;
}

/* ── Collapsible <details> / <summary> ──────────────────────── */
.prose details {
  margin: 1em 0;
  border: 1px solid var(--separator);
  border-radius: 0.75rem;
  overflow: hidden;
}
.prose summary {
  padding: 0.6em 1em;
  font-weight: 600;
  font-size: 0.95em;
  cursor: pointer;
  user-select: none;
  background: var(--fill-secondary);
  color: var(--text-primary);
  transition: background 0.15s;
}
.prose summary:hover {
  background: var(--fill-tertiary);
}
.prose details > *:not(summary) {
  padding: 0.6em 1em;
  margin: 0;
}

/* ── KaTeX math (server-rendered) ──────────────────────────── */
.prose .math-block {
  text-align: center;
  margin: 1.5em 0;
  overflow-x: auto;
}
.prose .math-inline {
  display: inline;
}
/* Match math text color to body text in all themes */
.prose .math .katex {
  color: var(--text-primary);
}
/* KaTeX uses currentColor for borders (fraction lines, etc.)
   and SVG fills/strokes (radicals, brackets) — these inherit above */
.prose .math .katex .katex-html {
  border-color: currentColor;
}
.prose code.math-raw {
  font-family: "SF Mono", "Fira Code", monospace;
  background: var(--fill-tertiary);
  padding: 0.15em 0.4em;
  border-radius: 0.3em;
  font-size: 0.9em;
}

/* ── Extended Markdown: ==highlight== ──────────────────────── */
.prose mark {
  background: color-mix(in srgb, var(--color-accent) 25%, transparent);
  color: var(--text-primary);
  padding: 0.1em 0.2em;
  border-radius: 0.2em;
}

/* ── Extended Markdown: ^superscript^ / ~subscript~ ────────── */
.prose sup {
  font-size: 0.8em;
  vertical-align: super;
  line-height: 0;
}
.prose sub {
  font-size: 0.8em;
  vertical-align: sub;
  line-height: 0;
}

/* ── Extended Markdown: <kbd> keyboard keys ────────────────── */
.prose kbd {
  display: inline-block;
  padding: 0.15em 0.4em;
  font-size: 0.85em;
  font-family: "SF Mono", "Fira Code", monospace;
  color: var(--text-secondary);
  background: var(--fill-secondary);
  border: 1px solid var(--separator);
  border-radius: 0.35em;
  box-shadow: 0 1px 0 var(--separator);
  line-height: 1.4;
}

/* ── Extended Markdown: definition lists ──────────────────── */
.prose dl {
  margin: 1em 0;
}
.prose dt {
  font-weight: 600;
  margin-top: 0.75em;
  color: var(--text-primary);
}
.prose dd {
  margin-left: 1.5em;
  margin-top: 0.25em;
  color: var(--text-secondary);
  font-size: 0.95em;
}

/* ── Extended Markdown: abbreviations ──────────────────────── */
.prose abbr[title] {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: help;
  color: var(--text-primary);
}

/* ── Extended Markdown: table of contents [TOC] ────────────── */
.prose .toc {
  background: var(--fill-secondary);
  border: 1px solid var(--separator);
  border-radius: var(--radius-concentric-inner);
  padding: 1em 1.25em;
  margin: 1.5em 0;
  font-size: 0.95em;
}
.prose .toc .toctitle {
  font-weight: 600;
  display: block;
  margin-bottom: 0.5em;
  color: var(--text-primary);
}
.prose .toc ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.prose .toc ul li {
  margin: 0.3em 0;
}
.prose .toc ul li a {
  color: var(--color-accent);
  text-decoration: none;
}
.prose .toc ul li a:hover {
  text-decoration: underline;
}

/* ── Extended Markdown: footnotes ──────────────────────────── */
.prose .footnote {
  margin-top: 2em;
  padding-top: 1em;
  border-top: 1px solid var(--separator);
  font-size: 0.9em;
  color: var(--text-tertiary);
}
.prose .footnote hr {
  display: none;
}
.prose .footnote ol {
  padding-left: 1.5em;
  margin: 0;
}
.prose .footnote ol li {
  margin: 0.4em 0;
}
.prose .footnote ol li p {
  display: inline;
  margin: 0;
}
.prose sup a.footnote-ref {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 500;
  scroll-margin-top: 80px;
}
.prose sup a.footnote-ref:hover {
  text-decoration: underline;
}
.prose .footnote a.footnote-backref {
  color: var(--color-accent);
  text-decoration: none;
  margin-left: 0.2em;
}
.prose .footnote a.footnote-backref:hover {
  text-decoration: underline;
}

/* ── Extended Markdown: Admonition blocks (!!! note / :::) ─── */
.prose .admonition {
  border-left: 4px solid;
  border-radius: 0 var(--radius-concentric-inner) var(--radius-concentric-inner) 0;
  padding: 0.75em 1em;
  margin: 1.25em 0;
  background: var(--fill-secondary);
}
.prose .admonition .admonition-title {
  font-weight: 600;
  margin: 0 0 0.4em 0;
  font-size: 0.95em;
}
.prose .admonition p:last-child { margin-bottom: 0; }
.prose .admonition.note       { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
.prose .admonition.warning    { border-color: var(--color-master); background: color-mix(in srgb, var(--color-master) 8%, transparent); }
.prose .admonition.danger     { border-color: #ef4444; background: rgba(239, 68, 68, 0.08); }
.prose .admonition.tip        { border-color: var(--color-rising); background: color-mix(in srgb, var(--color-rising) 8%, transparent); }
.prose .admonition.info       { border-color: var(--color-trusted); background: color-mix(in srgb, var(--color-trusted) 8%, transparent); }
.prose .admonition.success    { border-color: #22c55e; background: rgba(34, 197, 94, 0.08); }
.prose .admonition.question   { border-color: #8b5cf6; background: rgba(139, 92, 246, 0.08); }
.prose .admonition.abstract   { border-color: #6366f1; background: rgba(99, 102, 241, 0.08); }
.prose .admonition.example    { border-color: #14b8a6; background: rgba(20, 184, 166, 0.08); }
.prose .admonition.quote      { border-color: #9ca3af; background: rgba(156, 163, 175, 0.06); }
/* Dark mode: lighten border colors for visibility against dark backgrounds */
.dark .prose .admonition.warning    { border-color: var(--color-master); background: color-mix(in srgb, var(--color-master) 10%, transparent); }
.dark .prose .admonition.danger     { border-color: #f87171; background: rgba(248, 113, 113, 0.1); }
.dark .prose .admonition.tip        { border-color: var(--color-rising); background: color-mix(in srgb, var(--color-rising) 10%, transparent); }
.dark .prose .admonition.info       { border-color: var(--color-trusted); background: color-mix(in srgb, var(--color-trusted) 10%, transparent); }
.dark .prose .admonition.success    { border-color: #4ade80; background: rgba(74, 222, 128, 0.1); }
.dark .prose .admonition.question   { border-color: #a78bfa; background: rgba(167, 139, 250, 0.1); }
.dark .prose .admonition.abstract   { border-color: #818cf8; background: rgba(129, 140, 248, 0.1); }
.dark .prose .admonition.example    { border-color: #2dd4bf; background: rgba(45, 212, 191, 0.1); }
.dark .prose .admonition.quote      { border-color: #d1d5db; background: rgba(209, 213, 219, 0.08); }

/* ── Extended Markdown: version diff (++inserted++ / --deleted--) ── */
.prose ins {
  background: color-mix(in srgb, #22c55e 20%, transparent);
  text-decoration: none;
  padding: 0.05em 0.15em;
  border-radius: 0.15em;
}
.prose del {
  background: color-mix(in srgb, #ef4444 20%, transparent);
  text-decoration: line-through;
  padding: 0.05em 0.15em;
  border-radius: 0.15em;
}
/* Dark mode: lighten ins/del colors for visibility */
.dark .prose ins { background: color-mix(in srgb, #4ade80 25%, transparent); }
.dark .prose del { background: color-mix(in srgb, #f87171 25%, transparent); }

/* ── Extended Markdown: confidence dots [conf: 0.85] ────────── */
.prose .confidence-dot {
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  border-radius: 50%;
  vertical-align: middle;
  margin: 0 0.15em;
  box-shadow: 0 0 4px currentColor;
  cursor: help;
}
/* Dark mode: boost saturation + lightness so dots stay visible */
.dark .prose .confidence-dot {
  --conf-sat: 70%;
  --conf-light: 52%;
}

/* ── Extended Markdown: source references [@source: ...] ────── */
.prose .source-ref {
  font-size: 0.85em;
  text-decoration: none;
  vertical-align: middle;
  margin: 0 0.1em;
}

/* ── Extended Markdown: figure / figcaption ─────────────────── */
.prose figure.figure-with-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 1.5em 0;
  gap: 0.5em;
}
.prose figure.figure-with-caption img {
  max-width: 100%;
  border-radius: var(--radius-fixed);
}
.prose figure figcaption {
  font-size: 0.88em;
  color: var(--text-tertiary);
  text-align: center;
  font-style: italic;
}

/* ── Extended Markdown: wikilinks [[Page]] ──────────────────── */
.prose a.wikilink {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px dashed var(--color-accent);
}
.prose a.wikilink:hover {
  text-decoration: underline;
  border-bottom-style: solid;
}

/* ── Extended Markdown: custom containers (:::type) ─────────── */
.prose .container {
  border: 1px solid var(--separator);
  border-radius: var(--radius-concentric-inner);
  padding: 0.75em 1em;
  margin: 1.25em 0;
}
.prose .container-confidence-high { border-color: #22c55e; background: rgba(34,197,94,0.06); }
.prose .container-confidence-low  { border-color: #ef4444; background: rgba(239,68,68,0.06); }
.prose .container-reasoning       { border-color: #8b5cf6; background: rgba(139,92,246,0.06); font-style: italic; }
.prose .container-sources         { border-color: #6366f1; background: rgba(99,102,241,0.06); font-size: 0.92em; }
.prose .container-tldr, .prose .container-tl-dr { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 8%, transparent); font-weight: 500; }
.prose .container-disclaimer      { border-color: #f59e0b; background: rgba(245,158,11,0.06); font-size: 0.88em; color: var(--text-tertiary); }
/* Dark mode: lighten container border colors */
.dark .prose .container-confidence-high { border-color: #4ade80; background: rgba(74,222,128,0.1); }
.dark .prose .container-confidence-low  { border-color: #f87171; background: rgba(248,113,113,0.1); }
.dark .prose .container-reasoning       { border-color: #c084fc; background: rgba(192,132,252,0.1); }
.dark .prose .container-sources         { border-color: #818cf8; background: rgba(129,140,248,0.1); }
.dark .prose .container-disclaimer      { border-color: #fbbf24; background: rgba(251,191,36,0.1); }

/* ── Extended Markdown: code syntax highlighting ───────────── */
.prose .highlight {
  background: var(--fill-secondary);
  border: 1px solid var(--separator);
  border-radius: var(--radius-concentric-inner);
  overflow-x: auto;
  margin: 1em 0;
}
.prose .highlight pre {
  margin: 0;
  padding: 0.75em 1em;
  background: none;
}
.prose .highlight .hll { background-color: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.prose .highlight .c  { color: var(--text-tertiary); font-style: italic; }  /* Comment */
.prose .highlight .k  { color: #a855f7; font-weight: 600; }  /* Keyword */
.prose .highlight .s  { color: #22c55e; }  /* String */
.prose .highlight .n  { color: var(--text-primary); }  /* Name */
.prose .highlight .o  { color: var(--text-secondary); }  /* Operator */
.prose .highlight .mi { color: #f59e0b; }  /* Number */
.prose .highlight .nb { color: #3b82f6; }  /* Builtin */
.prose .highlight .nc { color: #14b8a6; font-weight: 600; }  /* Class */
.prose .highlight .nf { color: #6366f1; }  /* Function */
.prose .highlight .nd { color: #8b5cf6; }  /* Decorator */
.prose .highlight .ni { color: var(--color-accent); }  /* Entity */
.prose .highlight .p  { color: var(--text-tertiary); }  /* Punctuation */
.dark .prose .highlight .k  { color: #c084fc; }  /* Keyword - lighter for dark */
.dark .prose .highlight .mi { color: #fbbf24; }  /* Number - lighter for dark */
.dark .prose .highlight .nb { color: #60a5fa; }  /* Builtin - lighter for dark */
.dark .prose .highlight .s  { color: #4ade80; }  /* String - lighter for dark */
.dark .prose .highlight .nc { color: #2dd4bf; }  /* Class - lighter for dark */
.dark .prose .highlight .nf { color: #818cf8; }  /* Function - lighter for dark */
.dark .prose .highlight .nd { color: #c084fc; }  /* Decorator - lighter for dark */

/* ── Personality Lenses (:::lens {name}) ─────────────────────── */
.prose .lens {
  border-left: 4px solid var(--color-accent);
  padding: 0.75em 1em;
  margin: 1em 0;
  border-radius: 0 var(--radius-concentric-inner) var(--radius-concentric-inner) 0;
  background: var(--fill-secondary);
  position: relative;
}
.prose .lens::before {
  content: attr(data-lens);
  display: block;
  font-size: 0.75em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  margin-bottom: 0.5em;
  opacity: 0.8;
}
.prose .lens-skeptical  { border-color: #f59e0b; }
.prose .lens-skeptical::before { color: #f59e0b; }
.prose .lens-beginner   { border-color: #22c55e; }
.prose .lens-beginner::before { color: #22c55e; }
.prose .lens-expert      { border-color: #8b5cf6; }
.prose .lens-expert::before { color: #8b5cf6; }
.prose .lens-optimistic  { border-color: #14b8a6; }
.prose .lens-optimistic::before { color: #14b8a6; }
.prose .lens-pessimistic { border-color: #9ca3af; }
.prose .lens-pessimistic::before { color: #9ca3af; }
.prose .lens-summary     { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 6%, transparent); font-weight: 500; }
.prose .lens-summary::before { color: var(--color-accent); }
.prose .lens p:last-child { margin-bottom: 0; }
/* Dark mode: lighten lens border colors for visibility against dark backgrounds */
.dark .prose .lens-skeptical  { border-color: #fbbf24; }
.dark .prose .lens-skeptical::before { color: #fbbf24; }
.dark .prose .lens-beginner   { border-color: #4ade80; }
.dark .prose .lens-beginner::before { color: #4ade80; }
.dark .prose .lens-expert      { border-color: #c084fc; }
.dark .prose .lens-expert::before { color: #c084fc; }
.dark .prose .lens-optimistic  { border-color: #2dd4bf; }
.dark .prose .lens-optimistic::before { color: #2dd4bf; }
.dark .prose .lens-pessimistic { border-color: #d1d5db; }
.dark .prose .lens-pessimistic::before { color: #d1d5db; }

/* Lens toggle bar (injected by frontend) */
.lens-toggle-bar {
  display: flex;
  gap: 0.4em;
  flex-wrap: wrap;
  margin-bottom: 1em;
  padding: 0.5em;
  background: var(--fill-secondary);
  border-radius: var(--radius-concentric-inner);
}
.lens-toggle-btn {
  font-size: 0.78em;
  padding: 0.3em 0.8em;
  border: 1px solid var(--separator);
  border-radius: 999px;
  background: var(--fill-primary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}
.lens-toggle-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.lens-toggle-btn.active {
  background: var(--color-accent);
  color: var(--text-on-accent);
  border-color: var(--color-accent);
}

/* Counterfactual reading toggle bar */
.cf-toggle-bar {
  display: flex;
  gap: 0.4em;
  flex-wrap: wrap;
  margin-bottom: 1em;
  padding: 0.5em;
  background: var(--fill-secondary);
  border-radius: var(--radius-concentric-inner);
}
.cf-toggle-btn {
  font-size: 0.78em;
  padding: 0.3em 0.8em;
  border: 1px solid var(--separator);
  border-radius: 999px;
  background: var(--fill-primary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}
.cf-toggle-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.cf-toggle-btn.active {
  background: var(--color-accent);
  color: var(--text-on-accent);
  border-color: var(--color-accent);
}

/* Counterfactual blocks */
.prose .cf-block {
  border-left: 3px solid var(--separator);
  padding-left: 1em;
  margin: 0.75em 0;
  transition: opacity 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.prose .cf-block.dimmed {
  opacity: 0.25;
}
.prose .cf-block.highlighted {
  border-left-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 4%, transparent);
}
.dark .prose .cf-block.highlighted {
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
}

/* Quiz blocks (:::quiz) using native <details> */
.prose details.quiz-block {
  border: 1px solid var(--separator);
  border-radius: var(--radius-concentric-inner);
  margin: 1em 0;
  overflow: hidden;
}
.prose details.quiz-block[open] {
  border-color: var(--color-accent);
}
.prose .quiz-question {
  padding: 0.75em 1em;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95em;
  color: var(--text-primary);
  background: var(--fill-secondary);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5em;
  user-select: none;
}
.prose .quiz-question::-webkit-details-marker {
  display: none;
}
.prose .quiz-question::before {
  content: "?";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--text-on-accent);
  font-size: 0.8em;
  font-weight: 700;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.prose details.quiz-block[open] .quiz-question::before {
  content: "✓";
  background: var(--color-success);
}
.prose .quiz-block > :not(summary) {
  padding: 0 1em;
}
.prose .quiz-block > :last-child {
  padding-bottom: 1em;
}

/* ── Gift Card (:::gift) ──────────────────────────────────────── */
.prose .gift-card {
  border: 2px dashed #ec4899;
  border-radius: var(--radius-concentric-base);
  margin: 1.5em 0;
  overflow: hidden;
  background: linear-gradient(135deg, #fce7f3 0%, #fdf2f8 50%, #fce7f3 100%);
}
html.dark .prose .gift-card {
  background: linear-gradient(135deg, #1a0a12 0%, #1e0e16 50%, #1a0a12 100%);
  border-color: #be185d;
}
.prose .gift-header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  padding: 0.75em 1.25em;
  background: rgba(236, 72, 153, 0.1);
  border-bottom: 1px solid rgba(236, 72, 153, 0.2);
  font-size: 0.875rem;
}
.prose .gift-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  padding: 0.2em 0.6em;
  border-radius: 9999px;
  font-size: 0.8rem;
  white-space: nowrap;
}
.prose .gift-badge.gift-to {
  background: #ec4899;
  color: #fff;
}
.prose .gift-badge.gift-expires {
  background: #f59e0b;
  color: #1a1a1a;
}
.prose .gift-badge.gift-unlock {
  background: #6366f1;
  color: #fff;
}
.prose .gift-content {
  padding: 1em 1.25em;
}

/* ── Multi-Agent Voices (>> voice) ──────────────────────────── */
.prose .voice {
  border-radius: var(--radius-concentric-inner);
  padding: 0.75em 1em;
  margin: 1em 0;
  position: relative;
}
.prose .voice-label {
  display: inline-block;
  font-size: 0.72em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.15em 0.6em;
  border-radius: 999px;
  margin-bottom: 0.5em;
  background: rgba(0,0,0,0.08);
  color: inherit;
}
.dark .prose .voice-label {
  background: rgba(255,255,255,0.1);
}
.prose .voice-blue    { border-left: 3px solid #3b82f6; background: rgba(59,130,246,0.06); }
.prose .voice-green   { border-left: 3px solid #22c55e; background: rgba(34,197,94,0.06); }
.prose .voice-red     { border-left: 3px solid #ef4444; background: rgba(239,68,68,0.06); }
.prose .voice-purple  { border-left: 3px solid #8b5cf6; background: rgba(139,92,246,0.06); }
.prose .voice-orange  { border-left: 3px solid #f97316; background: rgba(249,115,22,0.06); }
.prose .voice-teal    { border-left: 3px solid #14b8a6; background: rgba(20,184,166,0.06); }
.prose .voice-yellow  { border-left: 3px solid #eab308; background: rgba(234,179,8,0.06); }
.prose .voice-default { border-left: 3px solid var(--separator); background: var(--fill-secondary); }
.prose .voice p:last-child { margin-bottom: 0; }
/* Dark mode: lighten voice border colors for visibility */
.dark .prose .voice-blue   { border-color: #60a5fa; background: rgba(96,165,250,0.1); }
.dark .prose .voice-green  { border-color: #4ade80; background: rgba(74,222,128,0.1); }
.dark .prose .voice-red    { border-color: #f87171; background: rgba(248,113,113,0.1); }
.dark .prose .voice-purple { border-color: #c084fc; background: rgba(192,132,252,0.1); }
.dark .prose .voice-orange { border-color: #fb923c; background: rgba(251,146,60,0.1); }
.dark .prose .voice-teal   { border-color: #2dd4bf; background: rgba(45,212,191,0.1); }
.dark .prose .voice-yellow { border-color: #facc15; background: rgba(250,204,21,0.1); }

/* ── Emotional Arc (>> arc:{mood}) ──────────────────────────── */
.prose p[data-arc] {
  padding-left: 14px;
  position: relative;
}
.prose p[data-arc]::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.2em;
  bottom: 0.2em;
  width: 3px;
  border-radius: 2px;
}
.prose p[data-arc]::before { background: var(--arc-color, var(--color-accent)); }
.prose p[data-arc="curious"]::before    { --arc-color: var(--arc-curious); }
.prose p[data-arc="surprised"]::before  { --arc-color: var(--arc-surprised); }
.prose p[data-arc="inspired"]::before   { --arc-color: var(--arc-inspired); }
.prose p[data-arc="challenged"]::before { --arc-color: var(--arc-challenged); }
.prose p[data-arc="calm"]::before       { --arc-color: var(--arc-calm); }
.prose p[data-arc="excited"]::before    { --arc-color: var(--arc-excited); }
.prose p[data-arc="reflective"]::before { --arc-color: var(--arc-reflective); }
.prose p[data-arc="hopeful"]::before    { --arc-color: var(--arc-hopeful); }
.prose p[data-arc="skeptical"]::before  { --arc-color: var(--arc-skeptical); }
.prose p[data-arc="concerned"]::before  { --arc-color: var(--arc-concerned); }
.prose p[data-arc="determined"]::before { --arc-color: var(--arc-determined); }

/* ── Synesthesia: sensory paragraph styling ──────────────────── */

/* Texture */
.prose p.syn-texture[data-texture="rough"] {
  border: 2px dashed var(--text-tertiary);
  border-radius: 4px;
  padding: 12px 16px;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, var(--fill-secondary) 2px, var(--fill-secondary) 4px);
}
.prose p.syn-texture[data-texture="smooth"] {
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  background: linear-gradient(180deg, var(--card-bg), var(--fill-secondary));
}
.prose p.syn-texture[data-texture="sharp"] {
  border-left: 3px solid var(--color-accent);
  padding-left: 16px;
  font-style: italic;
}
.prose p.syn-texture[data-texture="grainy"] {
  background-image: url("data:image/svg+xml,%3Csvg width='4' height='4' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1' height='1' fill='%2300000010'/%3E%3C/svg%3E");
}
.prose p.syn-texture[data-texture="silky"] {
  background: linear-gradient(105deg, transparent 40%, var(--color-accent)08 50%, transparent 60%);
}

/* Temperature */
.prose p.syn-temperature[data-temperature="hot"] {
  background: linear-gradient(90deg, #fff5f0, #fff0f0);
  border-left: 3px solid #e53e3e;
  padding: 8px 16px;
}
.prose p.syn-temperature[data-temperature="warm"] {
  background: linear-gradient(90deg, #fffaf0, #fff8e8);
  border-left: 3px solid #ed8936;
  padding: 8px 16px;
}
.prose p.syn-temperature[data-temperature="cool"] {
  background: linear-gradient(90deg, #f0f4ff, #edf2ff);
  border-left: 3px solid #4299e1;
  padding: 8px 16px;
}
.prose p.syn-temperature[data-temperature="cold"] {
  background: linear-gradient(90deg, #e8f4f8, #e0f0ff);
  border-left: 3px solid #3182ce;
  padding: 8px 16px;
}
.prose p.syn-temperature[data-temperature="burning"] {
  background: linear-gradient(90deg, #fff5f5, #fed7d7);
  border: 1px solid #fc8181;
  padding: 8px 16px;
  animation: burning-pulse 2s ease-in-out infinite;
}
@keyframes burning-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229, 62, 62, 0.2); }
  50% { box-shadow: 0 0 0 4px rgba(229, 62, 62, 0); }
}
.prose p.syn-temperature[data-temperature="freezing"] {
  background: linear-gradient(90deg, #ebf8ff, #e6f6ff);
  border: 1px solid #90cdf4;
  padding: 8px 16px;
}

/* Weight */
.prose p.syn-weight[data-weight="heavy"] {
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 12px 16px;
  background: var(--fill-secondary);
  border-radius: 4px;
}
.prose p.syn-weight[data-weight="light"] {
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--text-tertiary);
  font-size: 0.95em;
}
.prose p.syn-weight[data-weight="floating"] {
  font-weight: 300;
  font-style: italic;
  padding: 16px 20px;
  background: linear-gradient(180deg, transparent 60%, var(--color-accent)08);
}
.prose p.syn-weight[data-weight="dense"] {
  font-size: 0.9em;
  line-height: 1.4;
  letter-spacing: -0.01em;
  padding: 10px 14px;
  background: var(--fill-secondary);
  border-radius: 6px;
}

/* Dark mode synesthesia */
html.dark .prose p.syn-temperature[data-temperature="hot"] {
  background: linear-gradient(90deg, #3b1a1a, #2d1515);
}
html.dark .prose p.syn-temperature[data-temperature="warm"] {
  background: linear-gradient(90deg, #3b2a1a, #2d2015);
}
html.dark .prose p.syn-temperature[data-temperature="cool"] {
  background: linear-gradient(90deg, #1a253b, #151a2d);
}
html.dark .prose p.syn-temperature[data-temperature="cold"] {
  background: linear-gradient(90deg, #152a3b, #10202d);
}
html.dark .prose p.syn-temperature[data-temperature="burning"] {
  background: linear-gradient(90deg, #3b1a1a, #3b1010);
}
html.dark .prose p.syn-temperature[data-temperature="freezing"] {
  background: linear-gradient(90deg, #152a3b, #102840);
}
html.dark .prose p.syn-weight[data-weight="heavy"] {
  background: rgba(255,255,255,0.04);
}
html.dark .prose p.syn-weight[data-weight="dense"] {
  background: rgba(255,255,255,0.03);
}

/* ── Scent narration (>> scent) ───────────────────────────────── */
.prose p.syn-scent {
  position: relative;
  padding-left: 2em;
}
.prose p.syn-scent::before {
  content: "👃";
  position: absolute;
  left: 0.25em;
  top: 0;
  font-size: 0.85em;
  opacity: 0.6;
}
/* Scent-specific gradients */
.prose p.syn-scent[data-scent="coffee"],
.prose p.syn-scent[data-scent="fresh coffee"] {
  background: linear-gradient(90deg, #f5ebe0 0%, transparent 60%);
}
.prose p.syn-scent[data-scent="forest"],
.prose p.syn-scent[data-scent="pine"] {
  background: linear-gradient(90deg, #e8f5e9 0%, transparent 60%);
}
.prose p.syn-scent[data-scent="ocean"],
.prose p.syn-scent[data-scent="sea breeze"] {
  background: linear-gradient(90deg, #e3f2fd 0%, transparent 60%);
}
.prose p.syn-scent[data-scent="rain"] {
  background: linear-gradient(90deg, #e0e7f0 0%, transparent 60%);
}
.prose p.syn-scent[data-scent="smoke"] {
  background: linear-gradient(90deg, #e0e0e0 0%, transparent 60%);
}
.prose p.syn-scent[data-scent="lavender"] {
  background: linear-gradient(90deg, #f3e5f5 0%, transparent 60%);
}
.prose p.syn-scent[data-scent="old book"] {
  background: linear-gradient(90deg, #f5f0e6 0%, transparent 60%);
}
.prose p.syn-scent[data-scent="bread"],
.prose p.syn-scent[data-scent="baking"] {
  background: linear-gradient(90deg, #fff8e1 0%, transparent 60%);
}
.prose p.syn-scent[data-scent="citrus"] {
  background: linear-gradient(90deg, #fffde7 0%, transparent 60%);
}
/* Dark mode */
html.dark .prose p.syn-scent[data-scent="coffee"],
html.dark .prose p.syn-scent[data-scent="fresh coffee"] {
  background: linear-gradient(90deg, #2d1f18 0%, transparent 60%);
}
html.dark .prose p.syn-scent[data-scent="forest"],
html.dark .prose p.syn-scent[data-scent="pine"] {
  background: linear-gradient(90deg, #1a2d1a 0%, transparent 60%);
}
html.dark .prose p.syn-scent[data-scent="ocean"],
html.dark .prose p.syn-scent[data-scent="sea breeze"] {
  background: linear-gradient(90deg, #152435 0%, transparent 60%);
}
html.dark .prose p.syn-scent[data-scent="rain"] {
  background: linear-gradient(90deg, #1a1d24 0%, transparent 60%);
}
html.dark .prose p.syn-scent[data-scent="smoke"] {
  background: linear-gradient(90deg, #1a1a1a 0%, transparent 60%);
}
html.dark .prose p.syn-scent[data-scent="lavender"] {
  background: linear-gradient(90deg, #2a1a2d 0%, transparent 60%);
}
html.dark .prose p.syn-scent[data-scent="old book"] {
  background: linear-gradient(90deg, #2d2a20 0%, transparent 60%);
}
html.dark .prose p.syn-scent[data-scent="bread"],
html.dark .prose p.syn-scent[data-scent="baking"] {
  background: linear-gradient(90deg, #2d2a18 0%, transparent 60%);
}
html.dark .prose p.syn-scent[data-scent="citrus"] {
  background: linear-gradient(90deg, #2d2a15 0%, transparent 60%);
}

/* ── Tactile rhythm (>> rhythm) ────────────────────────────────── */
.prose p.syn-rhythm {
  position: relative;
  padding-left: 2em;
}
.prose p.syn-rhythm::before {
  content: "♩";
  position: absolute;
  left: 0.25em;
  top: 0;
  font-size: 0.85em;
  opacity: 0.5;
}
.prose p.syn-rhythm[data-rhythm="fast"] {
  line-height: 1.25;
  letter-spacing: -0.02em;
  word-spacing: -0.05em;
  font-size: 0.95em;
}
.prose p.syn-rhythm[data-rhythm="slow"] {
  line-height: 2.2;
  letter-spacing: 0.05em;
  word-spacing: 0.1em;
  font-size: 1.05em;
  font-style: italic;
}
.prose p.syn-rhythm[data-rhythm="steady"] {
  line-height: 1.7;
  letter-spacing: 0.01em;
  border-left: 3px solid var(--separator);
  padding-left: calc(2em + 8px);
}
.prose p.syn-rhythm[data-rhythm="staccato"] {
  line-height: 1.3;
  word-spacing: 0.2em;
  font-weight: 500;
}
.prose p.syn-rhythm[data-rhythm="flow"] {
  line-height: 1.9;
  letter-spacing: 0.02em;
  word-spacing: 0.05em;
}
/* Dark mode */
html.dark .prose p.syn-rhythm[data-rhythm="steady"] {
  border-left-color: rgba(255,255,255,0.15);
}

/* Gravity */
.prose p.syn-gravity { position: relative; padding: 12px 18px; border-radius: 8px; transition: all 0.3s; }
.prose p.syn-gravity::before {
  content: "●";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 6px;
}
.prose p.syn-gravity[data-gravity="strong"] {
  font-weight: 600;
  font-size: 1.05em;
  background: radial-gradient(ellipse at center, rgba(99,102,241,0.08) 0%, transparent 70%);
  border: 1px solid rgba(99,102,241,0.2);
  box-shadow: 0 0 20px rgba(99,102,241,0.06), 0 4px 12px rgba(0,0,0,0.04);
}
.prose p.syn-gravity[data-gravity="strong"]::before { color: #6366f1; font-size: 8px; box-shadow: 0 0 6px rgba(99,102,241,0.3); }
.prose p.syn-gravity[data-gravity="medium"] {
  font-weight: 500;
  background: radial-gradient(ellipse at center, rgba(99,102,241,0.04) 0%, transparent 70%);
  border: 1px solid rgba(99,102,241,0.1);
}
.prose p.syn-gravity[data-gravity="medium"]::before { color: #818cf8; }
.prose p.syn-gravity[data-gravity="weak"] {
  font-weight: 400;
  opacity: 0.85;
  background: transparent;
  font-size: 0.95em;
}
.prose p.syn-gravity[data-gravity="weak"]::before { color: #c7d2fe; }
/* Dark mode */
html.dark .prose p.syn-gravity[data-gravity="strong"] {
  background: radial-gradient(ellipse at center, rgba(99,102,241,0.12) 0%, transparent 70%);
  border-color: rgba(99,102,241,0.25);
}
html.dark .prose p.syn-gravity[data-gravity="medium"] {
  background: radial-gradient(ellipse at center, rgba(99,102,241,0.06) 0%, transparent 70%);
  border-color: rgba(99,102,241,0.12);
}

/* ── Probability Cloud (:::cloud) ─────────────────────────────── */
.prose .prob-cloud {
  border: 1px solid var(--separator);
  border-radius: var(--radius-concentric-base);
  margin: 1.5em 0;
  overflow: hidden;
  background: var(--fill-primary);
}
.prose .cloud-header {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.6em 1em;
  font-size: 0.85rem;
  font-weight: 500;
  border-bottom: 1px solid var(--separator);
  background: var(--fill-secondary);
}
.prose .cloud-count {
  margin-left: auto;
  font-size: 0.75rem;
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
}
.prose .cloud-cards {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.prose .cloud-cards::-webkit-scrollbar {
  display: none;
}
.prose .cloud-card {
  flex: 0 0 100%;
  scroll-snap-align: start;
  padding: 1.25em;
  min-height: 80px;
}
.prose .cloud-card.cloud-active {
  display: block;
}
.prose .cloud-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0.5em 1em 0.75em;
}
.prose .cloud-nav-btn {
  cursor: pointer;
  user-select: none;
  font-size: 0.85rem;
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--text-secondary);
  transition: background 0.15s;
}
.prose .cloud-nav-btn:hover {
  background: var(--fill-secondary);
}
.prose .cloud-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--separator);
  cursor: pointer;
  transition: background 0.2s;
}
.prose .cloud-dot.cloud-dot-active {
  background: var(--accent, #0abab5);
}
/* Dark mode */
html.dark .prose .prob-cloud {
  border-color: rgba(255,255,255,0.08);
}

/* ── Prism: 6-dimension color refraction ───────────────────── */
.prose .prism-container {
  border: 1px solid var(--separator);
  border-radius: 12px;
  overflow: hidden;
  margin: 1.5em 0;
  background: var(--card-bg, #fff);
}
.prose .prism-container::before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg,
    #ef4444, #f97316, #eab308, #22c55e, #3b82f6, #8b5cf6
  );
}
.prose .prism-core {
  padding: 16px 20px 4px;
}
.prose .prism-core.prism-tinted-emotional  { background: linear-gradient(135deg, #fef2f2 0%, transparent 60%); }
.prose .prism-core.prism-tinted-relational    { background: linear-gradient(135deg, #fff7ed 0%, transparent 60%); }
.prose .prism-core.prism-tinted-inspirational { background: linear-gradient(135deg, #fefce8 0%, transparent 60%); }
.prose .prism-core.prism-tinted-practical     { background: linear-gradient(135deg, #f0fdf4 0%, transparent 60%); }
.prose .prism-core.prism-tinted-rational      { background: linear-gradient(135deg, #eff6ff 0%, transparent 60%); }
.prose .prism-core.prism-tinted-essential     { background: linear-gradient(135deg, #faf5ff 0%, transparent 60%); }

.prose .prism-facets {
  display: flex;
  gap: 4px;
  padding: 8px 16px 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.prose .prism-facet {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--fill-secondary);
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  font-size: 11px;
  color: var(--text-secondary);
  min-width: 56px;
}
.prose .prism-facet:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.prose .prism-facet-icon { font-size: 18px; line-height: 1; }
.prose .prism-facet-label { font-weight: 500; }

.prose .prism-facet.prism-facet-active { border-color: var(--accent, #0abab5); }
.prose .prism-facet.prism-facet-emotional.prism-facet-active { background: #fef2f2; border-color: #ef4444; color: #991b1b; }
.prose .prism-facet.prism-facet-relational.prism-facet-active    { background: #fff7ed; border-color: #f97316; color: #9a3412; }
.prose .prism-facet.prism-facet-inspirational.prism-facet-active { background: #fefce8; border-color: #eab308; color: #854d0e; }
.prose .prism-facet.prism-facet-practical.prism-facet-active     { background: #f0fdf4; border-color: #22c55e; color: #166534; }
.prose .prism-facet.prism-facet-rational.prism-facet-active      { background: #eff6ff; border-color: #3b82f6; color: #1e3a5f; }
.prose .prism-facet.prism-facet-essential.prism-facet-active     { background: #faf5ff; border-color: #8b5cf6; color: #4c1d95; }

/* Dark mode prism tint overrides */
html.dark .prose .prism-core.prism-tinted-emotional  { background: linear-gradient(135deg, rgba(239,68,68,0.12) 0%, transparent 60%); }
html.dark .prose .prism-core.prism-tinted-relational    { background: linear-gradient(135deg, rgba(249,115,22,0.12) 0%, transparent 60%); }
html.dark .prose .prism-core.prism-tinted-inspirational { background: linear-gradient(135deg, rgba(234,179,8,0.12) 0%, transparent 60%); }
html.dark .prose .prism-core.prism-tinted-practical     { background: linear-gradient(135deg, rgba(34,197,94,0.12) 0%, transparent 60%); }
html.dark .prose .prism-core.prism-tinted-rational      { background: linear-gradient(135deg, rgba(59,130,246,0.12) 0%, transparent 60%); }
html.dark .prose .prism-core.prism-tinted-essential     { background: linear-gradient(135deg, rgba(139,92,246,0.12) 0%, transparent 60%); }

/* ── Time Fork: branching futures ──────────────────────────── */
.prose .fork-container {
  border: 1px solid var(--separator);
  border-radius: 12px;
  margin: 1.5em 0;
  overflow: hidden;
  background: var(--card-bg, #fff);
}
.prose .fork-root {
  text-align: center;
  padding: 10px 16px;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
  background: var(--fill-secondary);
  border-bottom: 1px solid var(--separator);
}
.prose .fork-branches {
  position: relative;
  padding: 16px 20px 16px 32px;
}
/* Vertical trunk line */
.prose .fork-branches::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--separator);
}
.prose .fork-branch {
  position: relative;
  margin-bottom: 16px;
  padding: 10px 14px;
  border: 1px solid var(--separator);
  border-radius: 8px;
  background: var(--fill-primary);
  transition: border-color 0.2s;
}
.prose .fork-branch:last-child { margin-bottom: 0; }
/* Branch connector line */
.prose .fork-branch::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 50%;
  width: 14px;
  height: 2px;
  background: var(--separator);
}
/* Branch node dot */
.prose .fork-branch::after {
  content: "";
  position: absolute;
  left: -23px;
  top: calc(50% - 3px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent, #0abab5);
}
.prose .fork-branch:nth-child(1)::after { background: #ef4444; }
.prose .fork-branch:nth-child(2)::after { background: #f97316; }
.prose .fork-branch:nth-child(3)::after { background: #eab308; }
.prose .fork-branch:nth-child(4)::after { background: #22c55e; }
.prose .fork-branch:nth-child(5)::after { background: #3b82f6; }
.prose .fork-branch:nth-child(6)::after { background: #8b5cf6; }

.prose .fork-branch-label {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.prose .fork-branch-content {
  font-size: 14px;
  color: var(--text-secondary);
}
/* Dark mode */
html.dark .prose .fork-container {
  border-color: rgba(255,255,255,0.08);
}

/* ── Memory Palace: virtual rooms ─────────────────────────── */
.prose .palace-container {
  border: 1px solid var(--separator);
  border-radius: 12px;
  overflow: hidden;
  margin: 1.5em 0;
  background: var(--card-bg, #fff);
}
.prose .palace-header {
  text-align: center;
  padding: 10px 16px;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
  background: linear-gradient(135deg, #fef3c7 0%, #fce7f3 50%, #e0e7ff 100%);
  border-bottom: 1px solid var(--separator);
}
html.dark .prose .palace-header {
  background: linear-gradient(135deg, rgba(251,191,36,0.15) 0%, rgba(236,72,153,0.1) 50%, rgba(99,102,241,0.15) 100%);
}
.prose .palace-rooms {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  padding: 16px;
}
.prose .palace-room {
  border: 1px solid var(--separator);
  border-radius: 8px;
  padding: 14px;
  background: var(--fill-primary);
  transition: box-shadow 0.2s, transform 0.2s;
}
.prose .palace-room:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  transform: translateY(-2px);
}
.prose .palace-room-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.prose .palace-room-icon { font-size: 20px; line-height: 1; }
.prose .palace-room-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
}
.prose .palace-room-content {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
}
/* Dark mode */
html.dark .prose .palace-container {
  border-color: rgba(255,255,255,0.08);
}

/* ── Wormhole: portal to unrelated notes ──────────────────── */
.prose .wormhole-container {
  margin: 1.5em 0;
  border-radius: 16px;
  overflow: hidden;
}
.prose .wormhole-portal {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  background: radial-gradient(ellipse at center, #1e1b4b 0%, #0f0a1a 60%, #020617 100%);
  overflow: hidden;
}
/* Rotating vortex rings */
.prose .wormhole-vortex {
  position: absolute;
  inset: -50%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(99,102,241,0.3) 30deg,
    rgba(168,85,247,0.4) 60deg,
    rgba(236,72,153,0.3) 90deg,
    rgba(99,102,241,0.2) 120deg,
    transparent 150deg,
    transparent 180deg,
    rgba(99,102,241,0.3) 210deg,
    rgba(168,85,247,0.4) 240deg,
    rgba(236,72,153,0.3) 270deg,
    rgba(99,102,241,0.2) 300deg,
    transparent 330deg,
    transparent 360deg
  );
  animation: wormhole-spin 8s linear infinite;
}
.prose .wormhole-vortex::after {
  content: "";
  position: absolute;
  inset: 15%;
  border-radius: 50%;
  background: conic-gradient(
    from 180deg,
    transparent 0deg,
    rgba(59,130,246,0.4) 40deg,
    rgba(139,92,246,0.3) 80deg,
    transparent 120deg,
    transparent 180deg,
    rgba(59,130,246,0.4) 220deg,
    rgba(139,92,246,0.3) 260deg,
    transparent 300deg,
    transparent 360deg
  );
  animation: wormhole-spin 5s linear infinite reverse;
}
@keyframes wormhole-spin {
  to { transform: rotate(360deg); }
}
.prose .wormhole-overlay {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.prose .wormhole-label {
  font-size: 16px;
  font-weight: 700;
  color: #c4b5fd;
  text-shadow: 0 0 20px rgba(168,85,247,0.5);
}
.prose .wormhole-hint {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  max-width: 360px;
  line-height: 1.6;
}
.prose .wormhole-jump-btn {
  margin-top: 6px;
  padding: 8px 20px;
  border: 1px solid rgba(168,85,247,0.5);
  border-radius: 20px;
  background: rgba(139,92,246,0.2);
  color: #c4b5fd;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  font-family: inherit;
  backdrop-filter: blur(4px);
}
.prose .wormhole-jump-btn:hover {
  background: rgba(139,92,246,0.4);
  border-color: rgba(168,85,247,0.8);
  box-shadow: 0 0 20px rgba(139,92,246,0.4);
}

/* ── Mirror: reader self-reflection ────────────────────────── */
.prose .mirror-container {
  margin: 1.5em 0;
}
.prose .mirror-frame {
  border: 3px solid #c0c0c0;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #f8fafc 100%);
  box-shadow: inset 0 0 30px rgba(148,163,184,0.15), 0 4px 16px rgba(0,0,0,0.04);
}
html.dark .prose .mirror-frame {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 50%, #1e293b 100%);
  border-color: #475569;
  box-shadow: inset 0 0 30px rgba(148,163,184,0.06), 0 4px 16px rgba(0,0,0,0.2);
}
.prose .mirror-content {
  padding: 20px 24px 12px;
}
.prose .mirror-reflection {
  padding: 0 24px 16px;
  border-top: 1px dashed var(--separator);
  margin: 0 24px;
  animation: mirror-reveal 0.4s ease-out;
}
@keyframes mirror-reveal {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.prose .mirror-reflection-header {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
  margin-bottom: 8px;
  text-align: center;
}
.prose .mirror-reflection-prompt p {
  margin: 4px 0;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(148,163,184,0.06);
  transition: background 0.2s;
}
.prose .mirror-reflection-prompt p:hover {
  background: rgba(148,163,184,0.12);
}
.prose .mirror-reveal-btn {
  display: block;
  width: 100%;
  padding: 10px;
  border: none;
  border-top: 1px solid var(--separator);
  background: rgba(148,163,184,0.06);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}
.prose .mirror-reveal-btn:hover {
  background: rgba(148,163,184,0.12);
  color: var(--text-primary);
}

/* ── Tarot: divination tool ────────────────────────────────── */
.prose .tarot-container {
  border: 1px solid var(--separator);
  border-radius: 12px;
  overflow: hidden;
  margin: 1.5em 0;
  background: linear-gradient(180deg, #1a0a2e 0%, #0d0221 40%, #1a0a2e 100%);
  text-align: center;
  padding: 20px 16px;
}
.prose .tarot-header {
  font-size: 18px;
  font-weight: 700;
  color: #c4b5fd;
  margin-bottom: 4px;
  text-shadow: 0 0 10px rgba(168,85,247,0.4);
}
.prose .tarot-question {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 16px;
  font-style: italic;
}
.prose .tarot-spread {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
  perspective: 1000px;
}
.prose .tarot-card {
  width: 100px;
  height: 150px;
  cursor: pointer;
}
.prose .tarot-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s ease;
  transform-style: preserve-3d;
}
.prose .tarot-card.flipped .tarot-card-inner {
  transform: rotateY(180deg);
}
.prose .tarot-card-front,
.prose .tarot-card-back {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px;
}
.prose .tarot-card-front {
  background: linear-gradient(135deg, #2d1b69 0%, #1e0a4a 50%, #2d1b69 100%);
  border: 2px solid #4c1d95;
  box-shadow: 0 0 15px rgba(139,92,246,0.2);
}
.prose .tarot-card-symbol {
  font-size: 36px;
  line-height: 1;
}
.prose .tarot-card-back {
  background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 50%, #faf5ff 100%);
  border: 2px solid #8b5cf6;
  transform: rotateY(180deg);
  gap: 4px;
  justify-content: center;
  color: #1e0a4a;
}
html.dark .prose .tarot-card-back {
  background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 50%, #f3e8ff 100%);
}
.prose .tarot-card-name {
  font-size: 12px;
  font-weight: 700;
  color: #4c1d95;
}
.prose .tarot-card-pos {
  font-size: 10px;
  color: #7c3aed;
}
.prose .tarot-card-meaning {
  font-size: 10px;
  color: #6b21a8;
  text-align: center;
  line-height: 1.3;
}
.prose .tarot-card.flipped {
  transform: none;
}
.prose .tarot-draw-btn {
  padding: 8px 28px;
  border: 1px solid rgba(168,85,247,0.5);
  border-radius: 20px;
  background: rgba(139,92,246,0.15);
  color: #c4b5fd;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  font-family: inherit;
}
.prose .tarot-draw-btn:hover {
  background: rgba(139,92,246,0.3);
  border-color: #a78bfa;
  box-shadow: 0 0 20px rgba(139,92,246,0.3);
}
.prose .tarot-draw-btn.drawn {
  opacity: 0.5;
  pointer-events: none;
}

/* ── Reverse Note: reader requests AI content ─────────────── */
.prose .request-container {
  border: 1px dashed var(--accent, #0abab5);
  border-radius: 12px;
  padding: 20px;
  margin: 1.5em 0;
  background: var(--fill-primary);
}
.prose .request-header {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.prose .request-hint {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.prose .request-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--separator);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  background: var(--card-bg, #fff);
  color: var(--text-primary);
  resize: vertical;
  outline: none;
  transition: border-color 0.2s;
}
.prose .request-input:focus {
  border-color: var(--accent, #0abab5);
}
.prose .request-submit-btn {
  margin-top: 10px;
  padding: 8px 20px;
  border: 1px solid var(--accent, #0abab5);
  border-radius: 20px;
  background: rgba(10,186,181,0.08);
  color: var(--accent, #0abab5);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}
.prose .request-submit-btn:hover {
  background: rgba(10,186,181,0.15);
}
.prose .request-submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.prose .request-loading {
  display: flex;
  gap: 6px;
  justify-content: center;
  padding: 16px 0 4px;
}
.prose .request-loading-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent, #0abab5);
  animation: request-bounce 1.4s ease-in-out infinite both;
}
.prose .request-loading-dot:nth-child(1) { animation-delay: -0.32s; }
.prose .request-loading-dot:nth-child(2) { animation-delay: -0.16s; }
.prose .request-loading-dot:nth-child(3) { animation-delay: 0s; }
@keyframes request-bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}
.prose .request-result {
  margin-top: 14px;
  padding: 14px;
  border-radius: 8px;
  background: var(--fill-secondary);
  animation: mirror-reveal 0.4s ease-out;
}
.prose .request-result-header {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.prose .request-result-content {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-primary);
}

/* ── Dream: AI sleep-mode content ──────────────────────────── */
.prose .dream-container {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  margin: 1.5em 0;
  background: linear-gradient(180deg, #0c0a20 0%, #1a1040 50%, #0c0a20 100%);
  padding: 24px 20px;
}
.prose .dream-mist {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(139,92,246,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 50%, rgba(59,130,246,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 0%, rgba(168,85,247,0.05) 0%, transparent 40%);
  animation: dream-mist-drift 8s ease-in-out infinite;
}
@keyframes dream-mist-drift {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
.prose .dream-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.prose .dream-star {
  position: absolute;
  font-size: 12px;
  opacity: 0;
  animation: dream-star-float 4s ease-in-out infinite;
}
.prose .dream-star:nth-child(1) { left: 10%; top: 20%; animation-delay: 0s; }
.prose .dream-star:nth-child(2) { left: 70%; top: 15%; animation-delay: 1s; }
.prose .dream-star:nth-child(3) { left: 40%; top: 60%; animation-delay: 2s; }
.prose .dream-star:nth-child(4) { left: 85%; top: 70%; animation-delay: 3s; }
@keyframes dream-star-float {
  0% { opacity: 0; transform: translateY(10px) scale(0.5); }
  50% { opacity: 0.7; transform: translateY(-5px) scale(1); }
  100% { opacity: 0; transform: translateY(-20px) scale(0.5); }
}
.prose .dream-content {
  position: relative;
  z-index: 1;
  color: rgba(255,255,255,0.85);
  font-style: italic;
  line-height: 1.8;
}
.prose .dream-content p {
  text-shadow: 0 0 8px rgba(168,85,247,0.3);
}
.prose .dream-footer {
  position: relative;
  z-index: 1;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
  text-align: center;
  font-size: 11px;
  color: rgba(255,255,255,0.35);
}

/* ── Slow Cook: content grows over time ────────────────────── */
.prose .slowcook-container {
  position: relative;
  border: 2px solid #d97706;
  border-radius: 16px;
  overflow: hidden;
  margin: 1.5em 0;
  background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 50%, #fffbeb 100%);
  padding: 20px;
}
html.dark .prose .slowcook-container {
  background: linear-gradient(180deg, #1c1917 0%, #292011 50%, #1c1917 100%);
  border-color: #92400e;
}
.prose .slowcook-header {
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: #92400e;
  margin-bottom: 10px;
}
html.dark .prose .slowcook-header { color: #fbbf24; }
.prose .slowcook-pot-icon {
  display: inline-block;
  animation: slowcook-bubble 2s ease-in-out infinite;
}
@keyframes slowcook-bubble {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.prose .slowcook-progress {
  height: 4px;
  background: #e5e7eb;
  border-radius: 2px;
  margin-bottom: 8px;
  overflow: hidden;
}
html.dark .prose .slowcook-progress { background: #374151; }
.prose .slowcook-progress-bar {
  height: 100%;
  width: 25%;
  background: linear-gradient(90deg, #d97706, #f59e0b);
  border-radius: 2px;
  animation: slowcook-fill 8s ease-in-out infinite;
}
@keyframes slowcook-fill {
  0% { width: 10%; }
  50% { width: 40%; }
  100% { width: 10%; }
}
.prose .slowcook-status {
  text-align: center;
  font-size: 11px;
  color: #a16207;
  margin-bottom: 14px;
}
html.dark .prose .slowcook-status { color: #fcd34d; }
.prose .slowcook-content {
  position: relative;
  font-size: 14px;
  color: #78350f;
  line-height: 1.7;
}
html.dark .prose .slowcook-content { color: #fef3c7; }
.prose .slowcook-steam {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  pointer-events: none;
}
.prose .slowcook-steam-particle {
  display: block;
  width: 6px;
  height: 12px;
  background: rgba(251,191,36,0.3);
  border-radius: 50%;
  animation: slowcook-steam 2s ease-out infinite;
}
.prose .slowcook-steam-particle:nth-child(1) { animation-delay: 0s; }
.prose .slowcook-steam-particle:nth-child(2) { animation-delay: 0.6s; }
.prose .slowcook-steam-particle:nth-child(3) { animation-delay: 1.2s; }
@keyframes slowcook-steam {
  0% { opacity: 0.6; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-20px) scale(1.5); }
}

/* ── Immune System: credibility challenges ─────────────────── */
.prose .immune-container {
  border: 2px solid #dc2626;
  border-radius: 12px;
  padding: 20px;
  margin: 1.5em 0;
  background: linear-gradient(135deg, #fef2f2 0%, #fff 50%, #fef2f2 100%);
  text-align: center;
}
html.dark .prose .immune-container {
  background: linear-gradient(135deg, #1c1111 0%, #1a1a1a 50%, #1c1111 100%);
  border-color: #991b1b;
}
.prose .immune-shield {
  font-size: 32px;
  margin-bottom: 4px;
}
.prose .immune-header {
  font-size: 15px;
  font-weight: 700;
  color: #991b1b;
}
html.dark .prose .immune-header { color: #fca5a5; }
.prose .immune-subtitle {
  font-size: 11px;
  color: #b91c1c;
  margin-bottom: 12px;
}
html.dark .prose .immune-subtitle { color: #f87171; }
.prose .immune-content {
  text-align: left;
  font-size: 14px;
  color: var(--text-primary);
  margin-bottom: 12px;
}
.prose .immune-footer {
  display: flex;
  justify-content: center;
  gap: 16px;
  font-size: 12px;
  color: var(--text-secondary);
}
.prose .immune-score { font-weight: 700; color: #16a34a; }
.prose .immune-challenges { font-weight: 700; color: #dc2626; }

/* ── Campfire: real-time co-reading ────────────────────────── */
.prose .campfire-container {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  margin: 1.5em 0;
  background: linear-gradient(180deg, #1a120b 0%, #0d0805 60%, #1a120b 100%);
  padding: 30px 20px 20px;
  text-align: center;
}
.prose .campfire-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 30%, rgba(251,146,60,0.15) 0%, transparent 60%);
  animation: campfire-glow-pulse 3s ease-in-out infinite;
}
@keyframes campfire-glow-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
.prose .campfire-flame {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 50px;
  margin-bottom: 8px;
}
.prose .campfire-flame-particle {
  display: inline-block;
  border-radius: 50% 0 50% 50%;
  background: #f97316;
  transform: rotate(-45deg);
  animation: campfire-flicker 1.5s ease-in-out infinite;
}
.prose .flame-large {
  width: 28px; height: 40px;
  background: linear-gradient(180deg, #fbbf24 0%, #f97316 60%, #ea580c 100%);
  animation-delay: 0s;
  margin: 0 -4px;
}
.prose .flame-medium {
  width: 20px; height: 30px;
  background: linear-gradient(180deg, #fcd34d 0%, #f97316 60%, #ea580c 100%);
  animation-delay: 0.3s;
  margin: 0 -3px;
}
.prose .flame-small {
  width: 14px; height: 22px;
  background: linear-gradient(180deg, #fde68a 0%, #f59e0b 60%, #d97706 100%);
  animation-delay: 0.6s;
  margin: 0 -2px;
}
@keyframes campfire-flicker {
  0%, 100% { transform: rotate(-45deg) scaleY(1); }
  25% { transform: rotate(-40deg) scaleY(1.1); }
  50% { transform: rotate(-50deg) scaleY(0.9); }
  75% { transform: rotate(-42deg) scaleY(1.05); }
}
.prose .campfire-wood {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: 20px;
}
.prose .campfire-log {
  display: block;
  width: 60px;
  height: 8px;
  background: #451a03;
  border-radius: 4px;
  transform: rotate(-5deg);
}
.prose .campfire-log:last-child { transform: rotate(5deg); }
.prose .campfire-content {
  position: relative;
  z-index: 1;
  text-align: left;
  color: rgba(255,255,255,0.8);
  font-size: 14px;
  line-height: 1.7;
}
.prose .campfire-footer {
  position: relative;
  z-index: 1;
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 12px;
  color: rgba(255,255,255,0.4);
}

/* ── Black Hole: information singularity ───────────────────── */
.prose .blackhole-container {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  margin: 1.5em 0;
  background: #050510;
  padding: 28px 24px 20px;
  text-align: center;
}
.prose .blackhole-visual {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
}
.prose .blackhole-accretion {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(251,146,60,0.6) 20deg,
    rgba(251,191,36,0.8) 40deg,
    transparent 60deg,
    transparent 120deg,
    rgba(139,92,246,0.6) 180deg,
    rgba(99,102,241,0.4) 220deg,
    transparent 240deg,
    transparent 300deg,
    rgba(251,146,60,0.6) 340deg,
    transparent 360deg
  );
  animation: blackhole-spin 6s linear infinite;
  filter: blur(2px);
}
@keyframes blackhole-spin {
  to { transform: rotate(360deg); }
}
.prose .blackhole-shadow {
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, #000 30%, #0a0a1e 60%, transparent 70%);
  box-shadow: 0 0 40px rgba(139,92,246,0.3), 0 0 80px rgba(0,0,0,0.8);
}
.prose .blackhole-content {
  position: relative;
  z-index: 1;
  text-align: left;
  color: rgba(255,255,255,0.85);
  font-size: 14px;
  line-height: 1.7;
}
.prose .blackhole-label {
  position: relative;
  z-index: 1;
  margin-top: 16px;
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.05em;
}

/* ── Antimatter: thesis + antithesis ────────────────────────── */
.prose .antimatter-container {
  border: 1px solid var(--separator);
  border-radius: 12px;
  overflow: hidden;
  margin: 1.5em 0;
  background: var(--card-bg, #fff);
}
.prose .antimatter-matter {
  padding: 16px 20px;
}
.prose .antimatter-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 20px;
  font-size: 12px;
  font-weight: 600;
  color: #7c3aed;
  background: linear-gradient(90deg, rgba(124,58,237,0.04) 0%, rgba(124,58,237,0.08) 50%, rgba(124,58,237,0.04) 100%);
  border-top: 1px solid rgba(124,58,237,0.1);
  border-bottom: 1px solid rgba(124,58,237,0.1);
}
.prose .antimatter-divider::before,
.prose .antimatter-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(124,58,237,0.15);
}
.prose .antimatter-anti {
  padding: 16px 20px;
  background: rgba(124,58,237,0.02);
}
html.dark .prose .antimatter-anti {
  background: rgba(124,58,237,0.04);
}
.prose .antimatter-placeholder {
  color: var(--text-secondary);
  font-style: italic;
  margin: 0;
}

/* ── Crystal: precipitated wisdom ───────────────────────────── */
.prose .crystal-container {
  position: relative;
  border: 2px solid rgba(147,197,253,0.3);
  border-radius: 16px;
  overflow: hidden;
  margin: 1.5em 0;
  background: linear-gradient(135deg, #f0f9ff 0%, #f8fafc 40%, #f0f9ff 100%);
  padding: 24px 20px;
  text-align: center;
}
html.dark .prose .crystal-container {
  background: linear-gradient(135deg, #0c1929 0%, #0f1a2e 40%, #0c1929 100%);
  border-color: rgba(147,197,253,0.12);
}
.prose .crystal-shine {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(147,197,253,0.15) 0%, transparent 40%),
    radial-gradient(ellipse at 70% 60%, rgba(167,139,250,0.1) 0%, transparent 40%);
  pointer-events: none;
}
.prose .crystal-gem {
  font-size: 28px;
  margin-bottom: 8px;
  animation: crystal-sparkle 3s ease-in-out infinite;
}
@keyframes crystal-sparkle {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}
.prose .crystal-content {
  position: relative;
  z-index: 1;
  text-align: left;
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.7;
}
.prose .crystal-label {
  position: relative;
  z-index: 1;
  margin-top: 12px;
  font-size: 11px;
  color: rgba(147,197,253,0.7);
}

/* ── Phase Transition: paper → dialogue → direction → faith ── */
.prose p.syn-phase { padding: 10px 16px; border-radius: 6px; transition: all 0.3s; }
.prose p.syn-phase[data-phase="paper"] {
  font-family: Georgia, serif;
  border-left: 3px solid #94a3b8;
  background: rgba(148,163,184,0.04);
  line-height: 1.8;
}
.prose p.syn-phase[data-phase="dialogue"] {
  font-style: italic;
  border-left: 3px solid #22c55e;
  background: rgba(34,197,94,0.04);
  padding-left: 20px;
}
.prose p.syn-phase[data-phase="direction"] {
  font-weight: 600;
  border-left: 3px solid #f59e0b;
  background: rgba(245,158,11,0.06);
  letter-spacing: -0.01em;
}
.prose p.syn-phase[data-phase="faith"] {
  text-align: center;
  font-weight: 700;
  font-size: 1.08em;
  border: 2px solid #8b5cf6;
  background: rgba(139,92,246,0.04);
  border-radius: 12px;
  padding: 14px 18px;
}
/* Dark mode phase */
html.dark .prose p.syn-phase[data-phase="paper"] { border-left-color: #64748b; }
html.dark .prose p.syn-phase[data-phase="dialogue"] { border-left-color: #4ade80; }
html.dark .prose p.syn-phase[data-phase="direction"] { border-left-color: #fbbf24; }
html.dark .prose p.syn-phase[data-phase="faith"] { border-color: #a78bfa; }

/* ── Dark Content: the space between notes ──────────────────── */
.prose .dark-container {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  margin: 1.5em 0;
  background: #0a0a0a;
  padding: 20px;
  border: 1px solid rgba(255,255,255,0.03);
}
.prose .dark-void {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(255,255,255,0.01) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 60%, rgba(255,255,255,0.005) 0%, transparent 50%);
  pointer-events: none;
}
.prose .dark-content {
  position: relative;
  z-index: 1;
  color: rgba(255,255,255,0.25);
  font-size: 12px;
  line-height: 1.6;
  font-style: italic;
}
.prose .dark-content:hover {
  color: rgba(255,255,255,0.5);
  transition: color 0.6s;
}

/* ── Hybrid: two ideas breed a third ────────────────────────── */
.prose .hybrid-container {
  border: 1px solid var(--separator);
  border-radius: 12px;
  overflow: hidden;
  margin: 1.5em 0;
  background: var(--card-bg, #fff);
}
.prose .hybrid-parents {
  display: flex;
  gap: 0;
  align-items: stretch;
}
.prose .hybrid-parent {
  flex: 1;
  padding: 14px;
  font-size: 13px;
  min-width: 0;
}
.prose .hybrid-parent-a {
  background: rgba(59,130,246,0.04);
  border-right: 1px solid var(--separator);
}
.prose .hybrid-parent-b {
  background: rgba(239,68,68,0.04);
}
html.dark .prose .hybrid-parent-a { background: rgba(59,130,246,0.06); }
html.dark .prose .hybrid-parent-b { background: rgba(239,68,68,0.06); }
.prose .hybrid-merge {
  display: flex;
  align-items: center;
  padding: 0 6px;
  font-size: 18px;
  font-weight: 700;
  color: #8b5cf6;
  background: var(--fill-secondary);
}
.prose .hybrid-result-label {
  text-align: center;
  padding: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #7c3aed;
  background: rgba(139,92,246,0.06);
  border-top: 1px solid var(--separator);
}

/* ── Constellation: scattered ideas connected ───────────────── */
.prose .constellation-container {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  margin: 1.5em 0;
  background: linear-gradient(180deg, #050510 0%, #0a0a1e 50%, #050510 100%);
  padding: 20px;
  border: 1px solid rgba(147,197,253,0.08);
}
.prose .constellation-sky {
  position: relative;
  height: 100px;
  margin-bottom: 12px;
}
.prose .constellation-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.prose .constellation-star {
  position: absolute;
  font-size: 10px;
  color: rgba(147,197,253,0.5);
  animation: constellation-twinkle 3s ease-in-out infinite;
}
.prose .constellation-star:nth-child(2) { animation-delay: 0.5s; }
.prose .constellation-star:nth-child(3) { animation-delay: 1s; }
.prose .constellation-star:nth-child(4) { animation-delay: 1.5s; }
.prose .constellation-star:nth-child(5) { animation-delay: 2s; }
.prose .constellation-star:nth-child(6) { animation-delay: 2.5s; }
@keyframes constellation-twinkle {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.9; }
}
.prose .constellation-content {
  position: relative;
  z-index: 1;
  color: rgba(255,255,255,0.8);
  font-size: 14px;
  line-height: 1.7;
}
.prose .constellation-label {
  text-align: center;
  margin-top: 12px;
  font-size: 11px;
  color: rgba(147,197,253,0.3);
}

/* ── Tide: content ebbs and flows ───────────────────────────── */
.prose p.syn-tide { padding: 10px 16px; border-radius: 6px; position: relative; transition: all 0.4s; }
.prose p.syn-tide[data-tide="rising"] {
  background: linear-gradient(180deg, rgba(59,130,246,0.06) 0%, transparent 100%);
  border-left: 3px solid #3b82f6;
}
.prose p.syn-tide[data-tide="high"] {
  background: linear-gradient(180deg, rgba(59,130,246,0.1) 0%, rgba(59,130,246,0.02) 100%);
  border-left: 3px solid #1d4ed8;
  font-weight: 500;
}
.prose p.syn-tide[data-tide="ebbing"] {
  background: linear-gradient(180deg, transparent 0%, rgba(59,130,246,0.04) 100%);
  border-right: 3px solid #93c5fd;
  text-align: right;
}
.prose p.syn-tide[data-tide="low"] {
  opacity: 0.7;
  border-bottom: 2px dashed rgba(59,130,246,0.2);
  padding-bottom: 14px;
}
/* Dark mode tide */
html.dark .prose p.syn-tide[data-tide="rising"] { border-left-color: #60a5fa; }
html.dark .prose p.syn-tide[data-tide="high"] { border-left-color: #3b82f6; }
html.dark .prose p.syn-tide[data-tide="ebbing"] { border-right-color: #60a5fa; }

/* ── Geological Layer: vertical drilling ────────────────────── */
.prose p.syn-layer { padding: 10px 16px; border-radius: 4px; position: relative; }
.prose p.syn-layer[data-layer="surface"] {
  background: rgba(251,191,36,0.06);
  border-left: 3px solid #f59e0b;
  font-size: 1em;
}
.prose p.syn-layer[data-layer="middle"] {
  background: rgba(234,88,12,0.06);
  border-left: 3px solid #ea580c;
  margin-left: 12px;
  font-size: 0.97em;
}
.prose p.syn-layer[data-layer="deep"] {
  background: rgba(139,92,246,0.08);
  border-left: 3px solid #7c3aed;
  margin-left: 24px;
  font-size: 0.93em;
  font-style: italic;
}
/* Dark mode layer */
html.dark .prose p.syn-layer[data-layer="surface"] { border-left-color: #fbbf24; }
html.dark .prose p.syn-layer[data-layer="middle"] { border-left-color: #f97316; }
html.dark .prose p.syn-layer[data-layer="deep"] { border-left-color: #a78bfa; }

/* ── Building: architectural text properties ────────────────── */
.prose p.syn-building { padding: 10px 16px; border-radius: 4px; position: relative; }
.prose p.syn-building[data-building="tower"] {
  border-left: 4px solid #94a3b8;
  background: linear-gradient(180deg, rgba(148,163,184,0.06) 0%, transparent 100%);
  min-height: 4em;
}
.prose p.syn-building[data-building="cathedral"] {
  text-align: center;
  font-size: 1.05em;
  border-top: 2px solid #c4b5fd;
  border-bottom: 2px solid #c4b5fd;
  padding: 14px 20px;
  background: rgba(196,181,253,0.04);
}
.prose p.syn-building[data-building="garden"] {
  border-left: 3px solid #22c55e;
  background: rgba(34,197,94,0.04);
  border-radius: 0 8px 8px 0;
}
.prose p.syn-building[data-building="bridge"] {
  border-top: 2px solid #f59e0b;
  border-bottom: 2px solid #f59e0b;
  padding-top: 14px;
  padding-bottom: 14px;
}
.prose p.syn-building[data-building="temple"] {
  text-align: center;
  font-weight: 500;
  border: 1px solid rgba(234,179,8,0.2);
  background: rgba(234,179,8,0.04);
  border-radius: 12px;
  padding: 14px 18px;
}
.prose p.syn-building[data-building="lighthouse"] {
  border-left: 4px solid #fbbf24;
  background: linear-gradient(90deg, rgba(251,191,36,0.08) 0%, rgba(251,191,36,0.02) 60%, transparent 100%);
}
/* Dark mode */
html.dark .prose p.syn-building[data-building="cathedral"] { border-color: #a78bfa; }
html.dark .prose p.syn-building[data-building="garden"] { border-left-color: #4ade80; }
html.dark .prose p.syn-building[data-building="bridge"] { border-color: #fbbf24; }
html.dark .prose p.syn-building[data-building="temple"] { border-color: rgba(251,191,36,0.15); }
html.dark .prose p.syn-building[data-building="lighthouse"] { border-left-color: #fcd34d; }

/* ── Alchemy: transformation stages ─────────────────────────── */
.prose p.syn-alchemy { padding: 10px 16px; border-radius: 6px; font-style: italic; }
.prose p.syn-alchemy[data-alchemy="calcination"]    { background: rgba(239,68,68,0.06); border-left: 3px solid #ef4444; }
.prose p.syn-alchemy[data-alchemy="dissolution"]    { background: rgba(59,130,246,0.06); border-left: 3px solid #3b82f6; }
.prose p.syn-alchemy[data-alchemy="separation"]     { background: rgba(139,92,246,0.06); border-left: 3px solid #8b5cf6; }
.prose p.syn-alchemy[data-alchemy="conjunction"]    { background: rgba(236,72,153,0.06); border-left: 3px solid #ec4899; }
.prose p.syn-alchemy[data-alchemy="fermentation"]   { background: rgba(34,197,94,0.06); border-left: 3px solid #22c55e; }
.prose p.syn-alchemy[data-alchemy="distillation"]   { background: rgba(59,130,246,0.06); border-left: 3px solid #06b6d4; }
.prose p.syn-alchemy[data-alchemy="coagulation"]    { background: rgba(245,158,11,0.06); border-left: 3px solid #f59e0b; }
.prose p.syn-alchemy::before {
  font-size: 12px;
  margin-right: 6px;
  opacity: 0.5;
}
.prose p.syn-alchemy[data-alchemy="calcination"]::before  { content: "🔥"; }
.prose p.syn-alchemy[data-alchemy="dissolution"]::before  { content: "💧"; }
.prose p.syn-alchemy[data-alchemy="separation"]::before   { content: "✂️"; }
.prose p.syn-alchemy[data-alchemy="conjunction"]::before  { content: "💞"; }
.prose p.syn-alchemy[data-alchemy="fermentation"]::before { content: "🍷"; }
.prose p.syn-alchemy[data-alchemy="distillation"]::before { content: "💨"; }
.prose p.syn-alchemy[data-alchemy="coagulation"]::before  { content: "💎"; }

/* ── Fractal: self-similar nesting ──────────────────────────── */
.prose .fractal-container {
  text-align: center;
  margin: 1.5em 0;
}
.prose .fractal-layer {
  padding: 4px;
  border-radius: 12px;
  transition: all 0.3s;
}
.prose .fractal-layer-1 { background: rgba(99,102,241,0.06); padding: 4px; }
.prose .fractal-layer-2 { background: rgba(99,102,241,0.08); padding: 6px; }
.prose .fractal-layer-3 { background: rgba(99,102,241,0.10); padding: 8px; }
.prose .fractal-core {
  background: var(--card-bg, #fff);
  border: 1px solid rgba(99,102,241,0.2);
  border-radius: 8px;
  padding: 20px;
  text-align: left;
}
html.dark .prose .fractal-core { background: #0f0a1e; }
.prose .fractal-label {
  margin-top: 10px;
  font-size: 11px;
  color: rgba(99,102,241,0.4);
}

/* ── Koan: zen paradox ──────────────────────────────────────── */
.prose .koan-container {
  text-align: center;
  margin: 1.5em 0;
  padding: 24px;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 16px;
  background: linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%);
}
html.dark .prose .koan-container {
  background: linear-gradient(180deg, #111 0%, #0a0a0a 100%);
  border-color: rgba(255,255,255,0.05);
}
.prose .koan-ensō {
  font-size: 48px;
  color: rgba(0,0,0,0.12);
  line-height: 1;
  margin-bottom: 8px;
}
html.dark .prose .koan-ensō { color: rgba(255,255,255,0.06); }
.prose .koan-content {
  font-size: 15px;
  font-style: italic;
  color: var(--text-secondary);
  line-height: 1.8;
}
.prose .koan-label {
  margin-top: 12px;
  font-size: 11px;
  color: rgba(0,0,0,0.2);
}
html.dark .prose .koan-label { color: rgba(255,255,255,0.12); }

/* ── Tabula Rasa: fades with each read ──────────────────────── */
.prose .tabula-container {
  position: relative;
  border: 1px solid var(--separator);
  border-radius: 12px;
  padding: 20px;
  margin: 1.5em 0;
  transition: opacity 0.8s;
}
.prose .tabula-content {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-primary);
  transition: opacity 0.8s;
}
.prose .tabula-hint {
  text-align: right;
  margin-top: 10px;
  font-size: 10px;
  color: var(--text-secondary);
  opacity: 0.4;
}

/* ── Music: notation-inspired text ──────────────────────────── */
.prose p.syn-music { padding: 10px 16px; border-radius: 6px; position: relative; }
.prose p.syn-music::before {
  position: absolute;
  left: 6px;
  top: 8px;
  font-size: 12px;
  opacity: 0.4;
}
.prose p.syn-music[data-music="melody"] {
  border-left: 3px solid #ec4899;
  background: rgba(236,72,153,0.04);
  padding-left: 24px;
}
.prose p.syn-music[data-music="melody"]::before { content: "🎵"; }
.prose p.syn-music[data-music="harmony"] {
  border-left: 3px solid #8b5cf6;
  background: rgba(139,92,246,0.04);
  padding-left: 24px;
}
.prose p.syn-music[data-music="harmony"]::before { content: "🎶"; }
.prose p.syn-music[data-music="crescendo"] {
  font-size: 1.02em;
  font-weight: 500;
  background: linear-gradient(90deg, rgba(239,68,68,0.02) 0%, rgba(239,68,68,0.08) 100%);
}
.prose p.syn-music[data-music="crescendo"]::before { content: "📈"; }
.prose p.syn-music[data-music="diminuendo"] {
  font-size: 0.95em;
  opacity: 0.8;
  background: linear-gradient(90deg, rgba(59,130,246,0.06) 0%, rgba(59,130,246,0.01) 100%);
}
.prose p.syn-music[data-music="diminuendo"]::before { content: "📉"; }

/* ── Meme: spread / mutate / compete ────────────────────────── */
.prose p.syn-meme { padding: 10px 16px; border-radius: 6px; font-size: 0.98em; }
.prose p.syn-meme[data-meme="spread"] {
  border: 1px dashed rgba(34,197,94,0.3);
  background: rgba(34,197,94,0.04);
}
.prose p.syn-meme[data-meme="spread"]::before { content: "📡 "; opacity: 0.5; }
.prose p.syn-meme[data-meme="mutate"] {
  border: 1px dashed rgba(139,92,246,0.3);
  background: rgba(139,92,246,0.04);
  font-style: italic;
}
.prose p.syn-meme[data-meme="mutate"]::before { content: "🧬 "; opacity: 0.5; }
.prose p.syn-meme[data-meme="compete"] {
  border: 1px solid rgba(239,68,68,0.15);
  background: rgba(239,68,68,0.04);
  font-weight: 500;
}
.prose p.syn-meme[data-meme="compete"]::before { content: "⚔️ "; opacity: 0.5; }
.prose p.syn-meme[data-meme="viral"] {
  background: linear-gradient(90deg, rgba(239,68,68,0.06), rgba(236,72,153,0.06), rgba(139,92,246,0.06));
  font-weight: 600;
  border: 1px solid rgba(236,72,153,0.2);
  animation: meme-pulse 2s ease-in-out infinite;
}
.prose p.syn-meme[data-meme="viral"]::before { content: "🦠 "; }
@keyframes meme-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(236,72,153,0.1); }
  50% { box-shadow: 0 0 10px 2px rgba(236,72,153,0.1); }
}

/* ── Topology: Möbius-like connected form ───────────────────── */
.prose .topology-container {
  position: relative;
  border: 1px solid var(--separator);
  border-radius: 16px;
  padding: 24px 20px 16px;
  margin: 1.5em 0;
  background: var(--card-bg, #fff);
  overflow: hidden;
}
.prose .topology-strip {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    #3b82f6, #8b5cf6, #ec4899, #f59e0b, #22c55e, #3b82f6
  );
  animation: topology-flow 4s linear infinite;
  background-size: 200% 100%;
}
@keyframes topology-flow {
  to { background-position: 200% 0; }
}
.prose .topology-content {
  position: relative;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-primary);
}
.prose .topology-label {
  text-align: center;
  margin-top: 12px;
  font-size: 11px;
  color: var(--text-secondary);
  opacity: 0.5;
}

/* ── Hologram: each fragment contains the whole ─────────────── */
.prose .hologram-container {
  position: relative;
  border: 1px solid rgba(59,130,246,0.15);
  border-radius: 16px;
  padding: 24px 20px;
  margin: 1.5em 0;
  background: linear-gradient(135deg, #f0f4ff 0%, #faf5ff 50%, #f0f4ff 100%);
}
html.dark .prose .hologram-container {
  background: linear-gradient(135deg, #0c1120 0%, #0f0a1e 50%, #0c1120 100%);
}
.prose .hologram-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  margin-bottom: 16px;
}
.prose .hologram-fragment {
  height: 4px;
  border-radius: 2px;
  opacity: 0.3;
}
.prose .holo-1 { background: rgba(59,130,246,0.5); }
.prose .holo-2 { background: rgba(139,92,246,0.5); }
.prose .holo-3 { background: rgba(236,72,153,0.5); }
.prose .holo-4 { background: rgba(59,130,246,0.5); }
.prose .hologram-core {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-primary);
}
.prose .hologram-label {
  text-align: center;
  margin-top: 12px;
  font-size: 11px;
  color: rgba(59,130,246,0.4);
}

/* ── Antinote: dialectical triangle ─────────────────────────── */
.prose .antinote-container {
  border: 1px solid var(--separator);
  border-radius: 12px;
  overflow: hidden;
  margin: 1.5em 0;
  background: var(--card-bg, #fff);
}
.prose .antinote-header {
  text-align: center;
  padding: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  background: var(--fill-secondary);
  border-bottom: 1px solid var(--separator);
}
.prose .antinote-panels {
  display: flex;
}
.prose .antinote-panel {
  flex: 1;
  padding: 14px;
  font-size: 13px;
  min-width: 0;
}
.prose .antinote-thesis {
  background: rgba(59,130,246,0.03);
  border-right: 1px solid var(--separator);
}
.prose .antinote-antithesis {
  background: rgba(239,68,68,0.03);
  border-right: 1px solid var(--separator);
}
.prose .antinote-synthesis {
  background: rgba(139,92,246,0.03);
}

/* Antinote dark mode — increase panel tint opacity for dark backgrounds */
html.dark .prose .antinote-thesis {
  background: rgba(59,130,246,0.10);
}
html.dark .prose .antinote-antithesis {
  background: rgba(239,68,68,0.10);
}
html.dark .prose .antinote-synthesis {
  background: rgba(139,92,246,0.10);
}

.prose .antinote-label {
  font-weight: 600;
  font-size: 12px;
  margin-bottom: 6px;
  color: var(--text-secondary);
}

/* ── Breathe: inhale / exhale / hold ────────────────────────── */
.prose p.syn-breathe { padding: 12px 18px; border-radius: 8px; transition: all 1s ease; }
.prose p.syn-breathe[data-breathe="in"] {
  animation: breathe-in 4s ease-in-out infinite;
  background: rgba(59,130,246,0.04);
  border-left: 3px solid #3b82f6;
}
@keyframes breathe-in {
  0%, 100% { padding-left: 18px; opacity: 0.9; }
  50% { padding-left: 30px; opacity: 1; }
}
.prose p.syn-breathe[data-breathe="out"] {
  animation: breathe-out 4s ease-in-out infinite;
  background: rgba(239,68,68,0.04);
  border-right: 3px solid #ef4444;
  text-align: right;
}
@keyframes breathe-out {
  0%, 100% { padding-right: 18px; opacity: 0.9; }
  50% { padding-right: 30px; opacity: 0.7; }
}
.prose p.syn-breathe[data-breathe="hold"] {
  text-align: center;
  font-weight: 600;
  border: 1px solid rgba(139,92,246,0.15);
  background: rgba(139,92,246,0.03);
  animation: breathe-hold 4s ease-in-out infinite;
}
@keyframes breathe-hold {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

/* ── Yin / Yang: energy polarity ────────────────────────────── */
.prose p.syn-yinyang { padding: 10px 16px; border-radius: 6px; }
.prose p.syn-yinyang[data-yinyang="yin"] {
  background: linear-gradient(90deg, rgba(0,0,0,0.03) 0%, transparent 100%);
  border-left: 3px solid #1a1a1a;
  font-style: italic;
}
.prose p.syn-yinyang[data-yinyang="yang"] {
  background: linear-gradient(90deg, rgba(255,255,255,0.06) 0%, rgba(251,191,36,0.04) 100%);
  border-left: 3px solid #f59e0b;
  font-weight: 500;
}
html.dark .prose p.syn-yinyang[data-yinyang="yin"] {
  background: linear-gradient(90deg, rgba(255,255,255,0.03) 0%, transparent 100%);
  border-left-color: #94a3b8;
}
html.dark .prose p.syn-yinyang[data-yinyang="yang"] {
  border-left-color: #fbbf24;
}

/* ── Cosmos: a note is a universe ───────────────────────────── */
.prose .cosmos-container {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  margin: 1.5em 0;
  background: radial-gradient(ellipse at 50% 30%, #1a1040 0%, #050510 60%, #020617 100%);
  padding: 28px 24px 20px;
}
.prose .cosmos-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.prose .cosmos-dot {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  animation: cosmos-twinkle 3s ease-in-out infinite;
}
.prose .cosmos-dot:nth-child(1) { animation-delay: 0s; }
.prose .cosmos-dot:nth-child(2) { animation-delay: 0.8s; }
.prose .cosmos-dot:nth-child(3) { animation-delay: 1.6s; }
.prose .cosmos-dot:nth-child(4) { animation-delay: 2.2s; }
.prose .cosmos-dot:nth-child(5) { animation-delay: 2.8s; }
@keyframes cosmos-twinkle {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.8; }
}
.prose .cosmos-content {
  position: relative;
  z-index: 1;
  color: rgba(255,255,255,0.85);
  font-size: 14px;
  line-height: 1.7;
}
.prose .cosmos-label {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-top: 16px;
  font-size: 11px;
  color: rgba(255,255,255,0.25);
}

/* ── Oath: public declaration ────────────────────────────────── */
.prose .oath-container {
  border: 2px solid #b8860b;
  border-radius: 12px;
  padding: 24px 20px;
  margin: 1.5em 0;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 50%, #fffbeb 100%);
  text-align: center;
}
html.dark .prose .oath-container {
  background: linear-gradient(135deg, #1c1917 0%, #1f1a0e 50%, #1c1917 100%);
  border-color: #92400e;
}
.prose .oath-seal {
  font-size: 36px;
  margin-bottom: 8px;
}
.prose .oath-content {
  font-size: 15px;
  font-weight: 500;
  color: #78350f;
  line-height: 1.8;
}
html.dark .prose .oath-content { color: #fef3c7; }
.prose .oath-witness {
  margin-top: 14px;
  font-size: 11px;
  color: #a16207;
}
html.dark .prose .oath-witness { color: #fcd34d; }
.prose .oath-status {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 600;
  color: #a16207;
}
.prose .oath-status.oath-status-fulfilled { color: #16a34a; }
.prose .oath-status.oath-status-broken { color: #dc2626; }
html.dark .prose .oath-status { color: #fcd34d; }
html.dark .prose .oath-status.oath-status-fulfilled { color: #4ade80; }
html.dark .prose .oath-status.oath-status-broken { color: #f87171; }
.prose .oath-actions {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.prose .oath-btn {
  padding: 8px 16px;
  border: 2px solid #b8860b;
  border-radius: 10px;
  background: #fffbeb;
  color: #92400e;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}
.prose .oath-btn:hover { transform: translateY(-1px); background: #fef3c7; }
.prose .oath-btn.oath-fulfill { border-color: #22c55e; color: #16a34a; }
.prose .oath-btn.oath-break { border-color: #ef4444; color: #dc2626; }
.prose .oath-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.prose .oath-form {
  margin-top: 14px;
  padding: 14px;
  border: 1px dashed #b8860b;
  border-radius: 10px;
  background: rgba(184,134,11,0.04);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.prose .oath-form-input {
  width: 100%;
  min-height: 60px;
  padding: 8px 10px;
  border: 1px solid var(--separator);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  background: var(--fill-secondary);
  color: var(--text-primary);
  resize: vertical;
  box-sizing: border-box;
}
.prose .oath-form-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.prose .oath-form-row input {
  flex: 1;
  min-width: 80px;
  padding: 8px 10px;
  border: 1px solid var(--separator);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  background: var(--fill-secondary);
  color: var(--text-primary);
  box-sizing: border-box;
}
.prose .oath-form-btns {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.prose .oath-form-cancel {
  border-color: var(--separator);
  color: var(--text-secondary);
  background: var(--fill-secondary);
}
html.dark .prose .oath-btn { background: #1c1917; }
html.dark .prose .oath-btn:hover { background: #292524; }

/* ── Reincarnation: old soul, new body ──────────────────────── */
.prose .reincarnation-container {
  border: 1px solid rgba(139,92,246,0.15);
  border-radius: 16px;
  padding: 20px;
  margin: 1.5em 0;
  background: linear-gradient(135deg, #faf5ff 0%, #f5f0fa 50%, #faf5ff 100%);
  text-align: center;
}
html.dark .prose .reincarnation-container {
  background: linear-gradient(135deg, #0f0a1e 0%, #1a1040 50%, #0f0a1e 100%);
}
.prose .reincarnation-spiral {
  font-size: 32px;
  animation: reincarnation-spin 8s linear infinite;
}
@keyframes reincarnation-spin {
  to { transform: rotate(360deg); }
}
.prose .reincarnation-content {
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.7;
  margin-top: 8px;
  text-align: left;
}
.prose .reincarnation-label {
  margin-top: 12px;
  font-size: 11px;
  color: rgba(139,92,246,0.4);
}

/* ── Prayer: content as offering ────────────────────────────── */
.prose .prayer-container {
  border: 1px solid rgba(251,191,36,0.15);
  border-radius: 16px;
  padding: 24px 20px;
  margin: 1.5em 0;
  background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 30%, #fffbeb 100%);
  text-align: center;
}
html.dark .prose .prayer-container {
  background: linear-gradient(180deg, #1c1917 0%, #1f1a0e 30%, #1c1917 100%);
}
.prose .prayer-candle {
  font-size: 28px;
  animation: prayer-flicker 2s ease-in-out infinite;
}
@keyframes prayer-flicker {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}
.prose .prayer-content {
  font-size: 15px;
  font-style: italic;
  color: #78350f;
  line-height: 1.8;
  margin-top: 8px;
}
html.dark .prose .prayer-content { color: #fef3c7; }
.prose .prayer-footer {
  margin-top: 14px;
  font-size: 10px;
  color: #a16207;
}
html.dark .prose .prayer-footer { color: #fcd34d; }

/* ── Law: community common law ───────────────────────────────── */
.prose .law-container {
  border: 2px solid #1e3a5f;
  border-radius: 8px;
  overflow: hidden;
  margin: 1.5em 0;
  background: #f8fafc;
}
html.dark .prose .law-container {
  background: #0f172a;
  border-color: #334155;
}
.prose .law-header {
  background: #1e3a5f;
  color: #e2e8f0;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}
html.dark .prose .law-header { background: #1e293b; }
.prose .law-scales { margin-right: 6px; }
.prose .law-content {
  padding: 16px 20px;
  font-size: 14px;
  line-height: 1.7;
  font-family: Georgia, serif;
  color: var(--text-primary);
}

/* ── Currency: insight as medium of exchange ────────────────── */
.prose .currency-container {
  border: 2px solid #b8860b;
  border-radius: 12px;
  padding: 20px;
  margin: 1.5em 0;
  background: linear-gradient(135deg, #fefce8 0%, #fef9c3 30%, #fefce8 100%);
  text-align: center;
}
html.dark .prose .currency-container {
  background: linear-gradient(135deg, #1c1917 0%, #1f1a0e 30%, #1c1917 100%);
  border-color: #92400e;
}
.prose .currency-token {
  font-size: 36px;
  animation: currency-spin 4s ease-in-out infinite;
}
@keyframes currency-spin {
  0%, 100% { transform: rotateY(0); }
  50% { transform: rotateY(180deg); }
}
.prose .currency-content {
  font-size: 14px;
  color: #78350f;
  line-height: 1.7;
  margin-top: 8px;
  text-align: left;
}
html.dark .prose .currency-content { color: #fef3c7; }
.prose .currency-label {
  margin-top: 12px;
  font-size: 11px;
  color: #a16207;
}
html.dark .prose .currency-label { color: #fcd34d; }

/* ── Prediction market ────────────────────────────────────────── */
.prose .prediction-container {
  border: 1px solid var(--separator);
  border-radius: 12px;
  overflow: hidden;
  margin: 1.5em 0;
  background: var(--card-bg, #fff);
}
.prose .prediction-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  font-weight: 700;
  font-size: 0.95em;
  color: #7c3aed;
  background: linear-gradient(135deg, rgba(124,58,237,0.05), rgba(124,58,237,0.02));
  border-bottom: 1px solid var(--separator);
}
.prose .prediction-icon { font-size: 1.2em; }
.prose .prediction-claim {
  padding: 16px 20px 12px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-primary);
}
.prose .prediction-votes {
  display: flex;
  gap: 10px;
  padding: 0 20px 12px;
}
.prose .prediction-vote-btn {
  flex: 1;
  padding: 10px 0;
  border: 2px solid var(--separator);
  border-radius: 10px;
  background: var(--fill-secondary);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}
.prose .prediction-vote-btn:hover {
  transform: translateY(-1px);
}
.prose .prediction-vote-btn.voted-yes {
  border-color: var(--c-up);
  background: color-mix(in srgb, var(--c-up) 12%, transparent);
  color: var(--c-up);
}
.prose .prediction-vote-btn.voted-no {
  border-color: var(--c-down);
  background: color-mix(in srgb, var(--c-down) 12%, transparent);
  color: var(--c-down);
}
.prose .prediction-bar {
  display: flex;
  height: 8px;
  margin: 0 20px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--fill-secondary);
}
.prose .prediction-bar-yes {
  background: var(--c-up);
  transition: width 0.4s ease;
  width: 50%;
}
.prose .prediction-bar-no {
  background: var(--c-down);
  transition: width 0.4s ease;
  width: 50%;
}
.prose .prediction-results {
  display: flex;
  justify-content: space-between;
  padding: 8px 20px 14px;
  font-size: 12px;
  color: var(--text-secondary);
}
.prose .prediction-yes-count { color: var(--c-up); }
.prose .prediction-no-count { color: var(--c-down); }

html.dark .prose .prediction-header {
  color: #a78bfa;
  background: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(124,58,237,0.04));
}

/* Generic poll (multiple-choice vote) */
.prose .poll-container {
  border: 1px solid var(--separator);
  border-radius: 12px;
  overflow: hidden;
  margin: 1.5em 0;
  background: var(--card-bg, #fff);
}
.prose .poll-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  font-weight: 700;
  font-size: 0.95em;
  color: #0ABAB5;
  background: linear-gradient(135deg, rgba(10,186,181,0.06), rgba(10,186,181,0.02));
  border-bottom: 1px solid var(--separator);
}
.prose .poll-icon { font-size: 1.2em; }
.prose .poll-question {
  padding: 16px 20px 12px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-primary);
}
.prose .poll-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 20px 12px;
}
.prose .poll-option-row {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--separator);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  background: var(--fill-secondary);
}
.prose .poll-option-row:hover { border-color: #0ABAB5; }
.prose .poll-option-row.poll-option-chosen {
  border-color: #0ABAB5;
  background: rgba(10,186,181,0.10);
}
.prose .poll-option-row.poll-option-disabled {
  cursor: default;
  opacity: 0.75;
}
.prose .poll-option-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: rgba(10,186,181,0.14);
  transition: width 0.4s ease;
}
.prose .poll-option-label {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--text-primary);
  z-index: 1;
}
.prose .poll-option-count {
  font-weight: 700;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.prose .poll-option-row.poll-option-chosen .poll-option-count { color: #0ABAB5; }
.prose .poll-footer {
  padding: 8px 20px 14px;
  font-size: 12px;
  color: var(--text-secondary);
  border-top: 1px solid var(--separator);
}
html.dark .prose .poll-header {
  color: #2dd4bf;
  background: linear-gradient(135deg, rgba(10,186,181,0.12), rgba(10,186,181,0.04));
}

/* Community quorum adjudication (phase-4) */
.prose .prediction-settled-by {
  padding: 0 20px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}
.prose .prediction-vote-panel {
  border-top: 1px dashed var(--separator);
  padding: 10px 20px 14px;
}
.prose .prediction-quorum-bar {
  position: relative;
  overflow: hidden;
  height: 24px;
  border-radius: 8px;
  background: var(--fill-secondary);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}
.prose .prediction-quorum-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: rgba(124, 58, 237, 0.16);
  transition: width 0.4s ease;
}
.prose .prediction-quorum-label {
  position: relative;
  display: block;
  height: 24px;
  line-height: 24px;
  padding: 0 10px;
}
.prose .prediction-vote-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.prose .prediction-community-btn {
  flex: 1;
  padding: 8px 0;
  border: 1px solid var(--separator);
  border-radius: 8px;
  background: transparent;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s;
}
.prose .prediction-community-btn:hover { border-color: #7c3aed; }
.prose .prediction-community-btn.voted {
  border-color: #7c3aed;
  background: rgba(124, 58, 237, 0.12);
  color: #7c3aed;
}
html.dark .prose .prediction-community-btn.voted {
  background: rgba(167, 139, 250, 0.18);
  color: #a78bfa;
}

/* Juror staking + appeal (phase-4 aggressive) */
.prose .prediction-stake-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--text-secondary);
}
.prose .prediction-juror-stake {
  width: 72px;
  padding: 5px 8px;
  border: 1px solid var(--separator);
  border-radius: 7px;
  background: var(--fill-secondary);
  color: var(--text-primary);
  font-size: 12px;
  font-family: inherit;
}
.prose .prediction-adjudication-head {
  font-size: 13px;
  font-weight: 700;
  color: #7c3aed;
  margin-bottom: 6px;
}
.prose .prediction-adjudication-note {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.prose .prediction-community-btn.danger {
  border-color: rgba(220, 38, 38, 0.45);
  color: #dc2626;
}
.prose .prediction-community-btn.danger:hover {
  border-color: #dc2626;
  background: rgba(220, 38, 38, 0.08);
}
html.dark .prose .prediction-adjudication-head { color: #a78bfa; }
html.dark .prose .prediction-community-btn.danger { color: #f87171; }

/* ── Ouija board: collective unconscious writing ───────────────── */
.prose .ouija-container {
  border: 1px solid var(--separator);
  border-radius: 12px;
  overflow: hidden;
  margin: 1.5em 0;
  background: linear-gradient(135deg, color-mix(in srgb, #c084fc 12%, var(--cl-surface)) 0%, var(--cl-surface) 60%);
  color: var(--cl-ink);
}
.prose .ouija-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  font-weight: 700;
  font-size: 0.95em;
  color: #c084fc;
  border-bottom: 1px solid rgba(192,132,252,0.15);
  background: rgba(192,132,252,0.05);
}
.prose .ouija-icon { font-size: 1.2em; }
.prose .ouija-prompt {
  padding: 16px 20px 12px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--cl-muted);
}
.prose .ouija-chain {
  margin: 0 20px 12px;
  padding: 14px 18px;
  border-radius: 10px;
  background: rgba(192,132,252,0.06);
  border: 1px dashed rgba(192,132,252,0.15);
}
.prose .ouija-last-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(192,132,252,0.5);
  margin-bottom: 6px;
}
.prose .ouija-last-message {
  font-size: 14px;
  font-style: italic;
  line-height: 1.6;
  color: var(--cl-muted);
}
.prose .ouija-input {
  display: block;
  width: calc(100% - 40px);
  margin: 0 20px 12px;
  padding: 10px 14px;
  border: 1px solid rgba(192,132,252,0.2);
  border-radius: 8px;
  background: var(--cl-fill);
  color: var(--cl-ink);
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s;
}
.prose .ouija-input:focus {
  border-color: rgba(192,132,252,0.5);
}
.prose .ouija-input::placeholder {
  color: var(--cl-muted);
}
.prose .ouija-submit-btn {
  display: block;
  margin: 0 20px 16px;
  padding: 8px 24px;
  border: 1px solid rgba(192,132,252,0.3);
  border-radius: 20px;
  background: rgba(192,132,252,0.1);
  color: #c084fc;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}
.prose .ouija-submit-btn:hover {
  background: rgba(192,132,252,0.2);
  transform: translateY(-1px);
}
.prose .ouija-submit-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}
.prose .ouija-chain.updated {
  animation: ouija-flicker 0.3s ease;
}
@keyframes ouija-flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ── Agent Birth: note spawns a guardian agent ────────────────── */
.prose .agent-birth-container {
  border: 2px solid #0abab5;
  border-radius: 14px;
  overflow: hidden;
  margin: 1.5em 0;
  background: linear-gradient(135deg, rgba(10,186,181,0.04) 0%, rgba(10,186,181,0.02) 50%, rgba(10,186,181,0.04) 100%);
}
.prose .agent-birth-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  font-weight: 700;
  font-size: 0.95em;
  color: #0abab5;
  border-bottom: 1px solid rgba(10,186,181,0.15);
  background: rgba(10,186,181,0.06);
}
.prose .agent-birth-icon { font-size: 1.2em; }
.prose .agent-birth-content {
  padding: 16px 20px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-primary);
}
.prose .agent-birth-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid rgba(10,186,181,0.1);
  background: rgba(10,186,181,0.03);
  font-size: 12px;
  color: var(--text-secondary);
}
.prose .agent-birth-pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #0abab5;
  animation: agent-hatch-pulse 1.5s ease-in-out infinite;
}
@keyframes agent-hatch-pulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.4); }
}

html.dark .prose .agent-birth-container {
  border-color: rgba(10,186,181,0.5);
  background: linear-gradient(135deg, rgba(10,186,181,0.06) 0%, rgba(10,186,181,0.03) 50%, rgba(10,186,181,0.06) 100%);
}
html.dark .prose .agent-birth-header {
  background: rgba(10,186,181,0.1);
}
html.dark .prose .agent-birth-footer {
  background: rgba(10,186,181,0.05);
}
.prose .agent-birth-actions {
  padding: 12px 20px;
  border-top: 1px solid rgba(10,186,181,0.1);
  display: flex;
  justify-content: center;
}
.prose .agent-birth-btn {
  padding: 9px 18px;
  border: 2px solid #0abab5;
  border-radius: 10px;
  background: rgba(10,186,181,0.08);
  color: #0abab5;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}
.prose .agent-birth-btn:hover { transform: translateY(-1px); background: rgba(10,186,181,0.16); }
.prose .agent-birth-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.prose .agent-birth-form {
  padding: 14px 20px;
  border-top: 1px solid rgba(10,186,181,0.1);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.prose .agent-birth-input {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--separator);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  background: var(--fill-secondary);
  color: var(--text-primary);
  box-sizing: border-box;
}
.prose .agent-birth-cancel {
  border-color: var(--separator);
  color: var(--text-secondary);
  background: var(--fill-secondary);
}
.prose .agent-birth-err { font-size: 12px; color: #ef4444; }
.prose .agent-birth-success {
  padding: 12px 20px;
  border-top: 1px solid rgba(10,186,181,0.1);
  font-size: 13px;
  font-weight: 600;
  color: #0abab5;
}

/* ── Neologism: word birth certificate ────────────────────────── */
.prose .neologism-container {
  border: 2px solid #d4a574;
  border-radius: 12px;
  overflow: hidden;
  margin: 1.5em 0;
  background: linear-gradient(135deg, #fefdf9 0%, #fdf8f0 50%, #fefdf9 100%);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.prose .neologism-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  font-weight: 700;
  font-size: 0.95em;
  color: #8b6914;
  border-bottom: 1px solid rgba(212,165,116,0.3);
  background: rgba(212,165,116,0.08);
  font-family: Georgia, "Times New Roman", serif;
}
.prose .neologism-icon { font-size: 1.2em; }
.prose .neologism-content {
  padding: 16px 20px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-primary);
  font-family: Georgia, "Times New Roman", serif;
}
.prose .neologism-seal {
  text-align: center;
  padding: 10px 20px 14px;
  border-top: 1px dashed rgba(212,165,116,0.25);
}
.prose .neologism-timestamp {
  font-size: 11px;
  color: #a0814a;
  font-style: italic;
  letter-spacing: 0.03em;
}

html.dark .prose .neologism-container {
  border-color: rgba(212,165,116,0.4);
  background: linear-gradient(135deg, #1c1814 0%, #1a1510 50%, #1c1814 100%);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
html.dark .prose .neologism-header {
  color: #c9a96e;
  border-bottom-color: rgba(212,165,116,0.2);
  background: rgba(212,165,116,0.08);
}
html.dark .prose .neologism-content {
  color: rgba(255,255,255,0.85);
}
html.dark .prose .neologism-seal {
  border-top-color: rgba(212,165,116,0.15);
}
html.dark .prose .neologism-timestamp {
  color: #a0814a;
}

/* ── Reverse reading mode ────────────────────────────────────── */
.reading-direction-toggle {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
}
.reading-direction-btn {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--separator);
  background: var(--fill-secondary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}
.reading-direction-btn.active {
  background: var(--color-accent);
  color: var(--text-on-accent);
  border-color: var(--color-accent);
}
.reading-direction-btn:hover:not(.active) {
  background: var(--fill-primary);
}
/* Reversed prose: display children in reverse order */
.prose-reversed {
  display: flex;
  flex-direction: column-reverse;
}

/* ── Heading anchor links ──────────────────────────────────── */
.prose .heading-anchor {
  position: absolute;
  left: -1.2em;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  font-size: 0.85em;
  color: var(--text-tertiary);
  text-decoration: none;
  font-weight: 400;
  transition: opacity 0.15s ease, color 0.15s ease;
  padding: 0.1em 0.3em;
}
.prose h1, .prose h2, .prose h3 {
  position: relative;
}
.prose h1:hover .heading-anchor,
.prose h2:hover .heading-anchor,
.prose h3:hover .heading-anchor {
  opacity: 1;
}
.prose .heading-anchor:hover {
  color: var(--color-accent);
}

/* ── Code block enhancements ───────────────────────────────── */
.prose .code-block {
  margin: 1.25em 0;
  border: 1px solid var(--separator);
  border-radius: var(--radius-concentric-inner);
  overflow: hidden;
  background: var(--fill-secondary);
}
.prose .code-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4em 0.9em;
  background: var(--fill-primary);
  border-bottom: 1px solid var(--separator);
}
.prose .code-filename {
  font-size: 0.78em;
  font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace;
  color: var(--text-secondary);
  font-weight: 500;
}
.prose .code-block-body {
  position: relative;
}
.prose .code-block-body pre {
  margin: 0;
  padding: 0.75em 1em;
  background: transparent;
  border: none;
  border-radius: 0;
}
.prose .code-block-body .highlight {
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}
.prose .code-copy-btn {
  position: absolute;
  top: 0.5em;
  right: 0.75em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--separator);
  border-radius: 6px;
  background: var(--card-bg);
  color: var(--text-tertiary);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  z-index: 1;
}
.prose .code-block-body:hover .code-copy-btn {
  opacity: 1;
}
.prose .code-copy-btn:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.prose .code-copy-btn.copied {
  color: var(--color-success);
  border-color: var(--color-success);
  opacity: 1;
}

/* Legacy: plain <pre> copy button wrapper (for pre-rendered blocks) */
.code-block-wrapper {
  position: relative;
}
.code-block-wrapper .copy-btn {
  position: absolute;
  top: 0.5em;
  right: 0.75em;
  padding: 0.25em 0.6em;
  font-size: 0.72em;
  border: 1px solid var(--separator);
  border-radius: 0.35em;
  background: var(--fill-primary);
  color: var(--text-tertiary);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
  z-index: 1;
}
.code-block-wrapper:hover .copy-btn {
  opacity: 1;
}
.code-block-wrapper .copy-btn:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.code-block-wrapper .copy-btn.copied {
  color: var(--color-success);
  border-color: var(--color-success);
}

/* General prose links */
.prose a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}
.prose a:hover {
  color: var(--color-accent-hover);
}

/* @mention and #hashtag clickable links */
.prose .note-mention,
.note-mention {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 500;
}
.prose .note-mention:hover,
.note-mention:hover {
  text-decoration: underline;
}

/* ── Selection ──────────────────────────────────────────────────────── */
::selection {
  background: color-mix(in srgb, var(--xhs-red) 25%, transparent);
  color: var(--text-primary);
}

/* ── Animations ─────────────────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* XHS Like burst: double-tap heart animation */
@keyframes likeBurst {
  0%   { transform: scale(0) translateY(0); opacity: 1; }
  15%  { transform: scale(1.3) translateY(0); opacity: 1; }
  30%  { transform: scale(0.95) translateY(0); opacity: 1; }
  45%  { transform: scale(1) translateY(0); opacity: 1; }
  100% { transform: scale(1) translateY(-40px); opacity: 0; }
}
.animate-fade-in {
  animation: fadeIn 0.35s var(--spring-curve) both;
}
.animate-like-burst {
  animation: likeBurst 0.8s ease-out forwards;
  pointer-events: none;
}

/* ── Reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html {
    scroll-behavior: auto;
  }
}

/* ── Print ──────────────────────────────────────────────────────────── */
@media print {
  .nav-glass,
  nav,
  button,
  [role="button"] {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
    padding-top: 0;
  }
  main {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .note-card {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ddd;
    content-visibility: visible;
  }
  a {
    color: inherit;
    text-decoration: underline;
  }
}

/* ── Nav header glass effect ───────────────────────────────────────── */
.nav-glass {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: var(--nav-height);
  background: var(--glass-thick);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--separator);
  transition: transform 0.3s var(--spring-curve);
}
.nav-glass.nav-hidden {
  transform: translateY(-100%);
  pointer-events: none;
}

/* ── Time gates and silence walls ─────────────────────────────────── */

/* Shared: hide content that's time-gated */
.time-gate-hidden,
.silence-hidden {
  display: none !important;
}

/* Time gate wrapper */
.time-gate {
  margin: 1.5em 0;
  border-radius: 12px;
  overflow: hidden;
}

/* Time gate placeholder text */
.time-gate-placeholder {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  background: var(--card-bg);
  border: 1px dashed var(--separator);
  border-radius: 12px;
  font-size: 0.9em;
  color: var(--detail-meta);
  text-align: center;
  justify-content: center;
}

/* Decayed content */
.time-gate-content.time-gate-decayed {
  opacity: 0.25;
  filter: grayscale(0.6);
  transition: opacity 0.5s ease, filter 0.5s ease;
}

/* ── Silence wall ────────────────────────────────────────────────── */
.silence-wall {
  position: relative;
  margin: 2em 0;
  border-radius: 16px;
  background: var(--card-bg);
  border: 2px solid var(--separator);
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.silence-wall:hover {
  border-color: var(--color-accent);
}
.silence-wall.active {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 20%, transparent);
}
.silence-wall.unlocked {
  border-color: transparent;
  box-shadow: none;
  background: transparent;
  cursor: default;
}

/* Silence countdown */
.silence-countdown {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  font-size: 2em;
  font-weight: 700;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
  transition: opacity 0.3s ease;
}
.silence-wall.unlocked .silence-countdown {
  display: none;
}

/* Silence content reveal animation */
.silence-content.silence-revealed {
  display: block !important;
  animation: silence-fade-in 0.6s ease-out;
}
@keyframes silence-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Click hint for silence wall */
.silence-wall.active::after {
  content: 'Click to skip';
  position: absolute;
  bottom: 12px;
  right: 16px;
  font-size: 0.7em;
  color: var(--detail-meta);
  opacity: 0.6;
}
.silence-wall.unlocked::after {
  display: none;
}

/* ── Content Growth block ───────────────────────────────────── */
.prose .grow-block {
  position: relative;
  border: 2px dashed var(--color-success);
  border-radius: 8px;
  padding: 16px;
  background: linear-gradient(135deg, var(--color-success)05, transparent 40%);
}
.prose .grow-block::before {
  content: "🌱 " attr(data-grow);
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-success);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
html.dark .prose .grow-block {
  background: linear-gradient(135deg, var(--color-success)10, transparent 40%);
  border-color: var(--color-success)60;
}

/* ── Ritual Journey ──────────────────────────────────────────── */

.prose .ritual-journey {
  margin: 24px 0;
  border: 1px solid var(--separator);
  border-radius: 16px;
  overflow: hidden;
  background: var(--card-bg);
}

.prose .ritual-progress {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 14px 16px 10px;
  background: var(--fill-secondary);
  border-bottom: 1px solid var(--separator);
}

.prose .ritual-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--separator);
  transition: background 0.3s;
  position: relative;
}
.prose .ritual-dot::after {
  content: attr(data-stage);
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  color: var(--text-tertiary);
  white-space: nowrap;
}
.prose .ritual-dot-gate       { background: #a78bfa; }  /* purple */
.prose .ritual-dot-enter      { background: #60a5fa; }  /* blue */
.prose .ritual-dot-revelation { background: #f59e0b; }  /* amber */
.prose .ritual-dot-integrate  { background: #34d399; }  /* emerald */

.prose .ritual-stage {
  padding: 20px 24px;
  border-bottom: 1px solid var(--separator);
}
.prose .ritual-stage:last-child { border-bottom: none; }

.prose .ritual-stage-label {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.prose .ritual-stage[data-stage="gate"] {
  border-left: 4px solid #a78bfa;
  background: linear-gradient(135deg, #a78bfa08, transparent 60%);
}
.prose .ritual-stage[data-stage="enter"] {
  border-left: 4px solid #60a5fa;
  background: linear-gradient(135deg, #60a5fa08, transparent 60%);
}
.prose .ritual-stage[data-stage="revelation"] {
  border-left: 4px solid #f59e0b;
  background: linear-gradient(135deg, #f59e0b08, transparent 60%);
}
.prose .ritual-stage[data-stage="integrate"] {
  border-left: 4px solid #34d399;
  background: linear-gradient(135deg, #34d39908, transparent 60%);
}

html.dark .prose .ritual-journey {
  background: var(--fill-secondary);
}
html.dark .prose .ritual-stage[data-stage="gate"] {
  background: linear-gradient(135deg, #a78bfa12, transparent 60%);
}
html.dark .prose .ritual-stage[data-stage="enter"] {
  background: linear-gradient(135deg, #60a5fa12, transparent 60%);
}
html.dark .prose .ritual-stage[data-stage="revelation"] {
  background: linear-gradient(135deg, #f59e0b12, transparent 60%);
}
html.dark .prose .ritual-stage[data-stage="integrate"] {
  background: linear-gradient(135deg, #34d39912, transparent 60%);
}

/* ── Sentence-level reaction toolbar ────────────────────────── */
.reaction-bar-inner {
  display: flex;
  gap: 2px;
  background: var(--card-bg);
  border: 1px solid var(--separator);
  border-radius: 12px;
  padding: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
  animation: reaction-bar-in 0.15s var(--spring-curve);
}
.reaction-bar-inner button {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 10px;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, transform 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.reaction-bar-inner button:hover {
  background: var(--fill-secondary);
  transform: scale(1.15);
}
.reaction-bar-inner button:active {
  transform: scale(0.92);
}
@keyframes reaction-bar-in {
  from { opacity: 0; transform: translateX(-50%) translateY(6px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Reaction highlights */
.prose mark.reaction-highlight {
  background: transparent;
  border-radius: 2px;
  padding: 0;
  cursor: default;
}
.prose mark.reaction-agree {
  background: color-mix(in srgb, var(--color-success) 20%, transparent);
}
.prose mark.reaction-question {
  background: color-mix(in srgb, var(--color-warning) 20%, transparent);
}
.prose mark.reaction-insight {
  background: color-mix(in srgb, var(--color-accent) 20%, transparent);
}
.dark .prose mark.reaction-agree {
  background: color-mix(in srgb, var(--color-success) 30%, transparent);
}
.dark .prose mark.reaction-question {
  background: color-mix(in srgb, var(--color-warning) 30%, transparent);
}
.dark .prose mark.reaction-insight {
  background: color-mix(in srgb, var(--color-accent) 30%, transparent);
}

/* ── AI Footnote Chat Popover ─────────────────────────────────── */
.fn-chat-popover {
  transform: translateX(-50%);
  animation: fn-chat-in 0.18s var(--spring-curve);
}
@keyframes fn-chat-in {
  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.fn-chat-card {
  width: 320px;
  max-width: calc(100vw - 32px);
  background: var(--card-bg);
  border: 1px solid var(--separator);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14), 0 0 0 0.5px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
html.dark .fn-chat-card {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 0.5px rgba(255, 255, 255, 0.08);
}
.fn-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  font-size: 0.8em;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--fill-secondary);
  border-bottom: 1px solid var(--separator);
}
.fn-chat-close {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: transparent;
  font-size: 16px;
  color: var(--text-tertiary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s;
}
.fn-chat-close:hover {
  background: var(--fill-primary);
}
.fn-chat-footnote {
  padding: 10px 14px;
  font-size: 0.82em;
  line-height: 1.55;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--separator);
  max-height: 120px;
  overflow-y: auto;
  white-space: pre-wrap;
}
.fn-chat-form {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--separator);
}
.fn-chat-input {
  flex: 1;
  border: 1px solid var(--separator);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.85em;
  font-family: inherit;
  background: var(--fill-tertiary);
  color: var(--text-primary);
  outline: none;
  min-width: 0;
}
.fn-chat-input:focus {
  border-color: var(--color-accent);
}
.fn-chat-input::placeholder {
  color: var(--text-tertiary);
}
.fn-chat-send {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: var(--color-accent);
  color: var(--text-on-accent);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.fn-chat-send:disabled {
  opacity: 0.35;
  cursor: default;
}
.fn-chat-answer {
  padding: 10px 14px;
  font-size: 0.85em;
  line-height: 1.6;
  color: var(--text-primary);
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;
}

/* ── Mind Map (TOC visualization) ────────────────────────────── */
.mind-map-container {
  margin: 1.5em 0;
  background: var(--card-bg);
  border: 1px solid var(--separator);
  border-radius: var(--radius-concentric-inner);
  overflow: hidden;
}
.mind-map-title {
  padding: 10px 16px;
  font-size: 0.85em;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--fill-secondary);
  border-bottom: 1px solid var(--separator);
}
.mind-map-scroll {
  padding: 8px;
}
.mind-map-container svg {
  max-width: 100%;
}
/* Hide original TOC when mind map is shown */
.prose .toc.mind-mapped {
  display: none;
}

/* ── Layer 7: Reflexive container — content that knows its limits ── */
.reflexive-container {
  margin: 2em 0;
  border: 2px dashed var(--xhs-red);
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(10,186,181,0.03) 0%, rgba(10,186,181,0.06) 100%);
}
.reflexive-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  font-weight: 700;
  font-size: 0.95em;
  color: var(--xhs-red);
  border-bottom: 1px dashed rgba(10,186,181,0.25);
  background: rgba(10,186,181,0.05);
}
.reflexive-icon {
  font-size: 1.2em;
}
.reflexive-content {
  padding: 16px 20px;
}
.reflexive-footer {
  padding: 10px 20px;
  border-top: 1px dashed rgba(10,186,181,0.2);
  background: rgba(10,186,181,0.03);
}
.reflexive-footer p {
  margin: 0;
  font-size: 0.82em;
  font-style: italic;
  color: var(--text-tertiary);
}

/* Layer 7: Synesthesia — blindspot paragraphs */
.prose p.syn-blindspot {
  border-left: 3px solid #f59e0b;
  padding: 0.6em 0.8em 0.6em 1em;
  margin: 0.8em 0;
  background: linear-gradient(90deg, rgba(245,158,11,0.08) 0%, transparent 100%);
  border-radius: 0 6px 6px 0;
  position: relative;
}
.prose p.syn-blindspot::before {
  content: "⚠️ 盲区";
  display: block;
  font-size: 0.72em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #d97706;
  margin-bottom: 0.3em;
}

/* Layer 7: Synesthesia — alternative paragraphs */
.prose p.syn-alternative {
  border-left: 3px solid #8b5cf6;
  padding: 0.6em 0.8em 0.6em 1em;
  margin: 0.8em 0;
  background: linear-gradient(90deg, rgba(139,92,246,0.08) 0%, transparent 100%);
  border-radius: 0 6px 6px 0;
  position: relative;
}
.prose p.syn-alternative::before {
  content: "🔄 替代视角";
  display: block;
  font-size: 0.72em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #7c3aed;
  margin-bottom: 0.3em;
}

/* Dark mode for reflexive, blindspot, alternative */
html.dark .reflexive-container {
  border-color: rgba(10,186,181,0.5);
  background: linear-gradient(135deg, rgba(10,186,181,0.04) 0%, rgba(10,186,181,0.08) 100%);
}
html.dark .reflexive-header {
  background: rgba(10,186,181,0.08);
  border-bottom-color: rgba(10,186,181,0.3);
}
html.dark .reflexive-footer {
  background: rgba(10,186,181,0.05);
  border-top-color: rgba(10,186,181,0.25);
}
html.dark .prose p.syn-blindspot {
  border-left-color: #fbbf24;
  background: linear-gradient(90deg, rgba(251,191,36,0.12) 0%, transparent 100%);
}
html.dark .prose p.syn-blindspot::before {
  color: #fcd34d;
}
html.dark .prose p.syn-alternative {
  border-left-color: #a78bfa;
  background: linear-gradient(90deg, rgba(167,139,250,0.12) 0%, transparent 100%);
}
html.dark .prose p.syn-alternative::before {
  color: #c4b5fd;
}

/* ── kbd keyboard keys ────────────────────────────────────────────── */
kbd {
  display: inline-block;
  padding: 0.15em 0.4em;
  font-size: 0.8em;
  font-family: inherit;
  line-height: 1;
  color: var(--text-secondary, #555);
  background: var(--fill-tertiary, #eee);
  border: 1px solid var(--border-color, #ccc);
  border-radius: 4px;
  box-shadow: 0 1px 0 var(--border-color, #ccc), 0 2px 0 rgba(0,0,0,0.1);
}
.dark kbd {
  background: #2d2d2d;
  border-color: #555;
  box-shadow: 0 1px 0 #555, 0 2px 0 rgba(0,0,0,0.4);
  color: #ccc;
}

/* ── Spoiler block ────────────────────────────────────────────────── */
.spoiler-block {
  border: 1px dashed var(--border-color, #999);
  border-radius: 8px;
  margin: 1em 0;
  overflow: hidden;
}
.spoiler-block .spoiler-summary {
  padding: 10px 16px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  background: var(--fill-tertiary, #f5f5f5);
  color: var(--text-secondary, #666);
  font-size: 0.9em;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.dark .spoiler-block .spoiler-summary {
  background: #252525;
  color: #999;
}
.spoiler-block .spoiler-summary::before {
  content: "▶";
  font-size: 0.7em;
  transition: transform 0.2s;
}
.spoiler-block[open] .spoiler-summary::before {
  transform: rotate(90deg);
}
.spoiler-block .spoiler-content {
  padding: 12px 16px;
  border-top: 1px dashed var(--border-color, #ddd);
}
.dark .spoiler-block .spoiler-content {
  border-top-color: #444;
}

/* ── Multi-column layout ──────────────────────────────────────────── */
.columns-container {
  display: grid;
  gap: 1.5em;
  margin: 1em 0;
}
.columns-2 { grid-template-columns: 1fr 1fr; }
.columns-3 { grid-template-columns: 1fr 1fr 1fr; }
.columns-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 640px) {
  .columns-container {
    grid-template-columns: 1fr;
  }
}

/* ── Vertical Timeline ────────────────────────────────────────────── */
.timeline-container {
  position: relative;
  padding: 1em 0;
  margin: 1em 0;
}
.timeline-container::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border-color, #ddd);
  transform: translateX(-50%);
}
.dark .timeline-container::before {
  background: #444;
}
.timeline-item {
  position: relative;
  display: flex;
  margin: 1.5em 0;
}
.timeline-item.timeline-left {
  justify-content: flex-start;
  padding-right: calc(50% + 24px);
}
.timeline-item.timeline-right {
  justify-content: flex-end;
  padding-left: calc(50% + 24px);
}
.timeline-marker {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--xhs-red, #0ABAB5);
  border: 2px solid var(--surface-primary, #fff);
  transform: translateX(-50%);
  z-index: 1;
}
.timeline-card {
  width: 100%;
  padding: 12px 16px;
  background: var(--surface-primary, #fff);
  border: 1px solid var(--border-color, #eee);
  border-radius: 8px;
}
.dark .timeline-card {
  background: #1e1e1e;
  border-color: #333;
}
.timeline-label {
  font-weight: 700;
  font-size: 0.95em;
  color: var(--text-primary, #111);
  margin-bottom: 4px;
}
.timeline-body {
  color: var(--text-secondary, #555);
  font-size: 0.9em;
}
@media (max-width: 640px) {
  .timeline-container::before {
    left: 20px;
  }
  .timeline-item.timeline-left,
  .timeline-item.timeline-right {
    padding-left: 40px;
    padding-right: 0;
    justify-content: flex-start;
  }
  .timeline-marker {
    left: 20px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Terminal Shell Themes — CSS custom properties driven
   Each [data-shell] gets unique visual identity via CSS vars
   ═══════════════════════════════════════════════════════════════════ */
.terminal-shell-root {
  background-color: var(--t-bg);
  color: var(--t-text);
  font-family: var(--t-font-body);
  min-height: 100vh;
}

/* Mecha — no transitions, instant, monospace, green phosphor */
[data-shell="mecha"] * {
  transition-duration: 0ms !important;
}
[data-shell="mecha"] ::selection {
  background: var(--t-primary);
  color: var(--t-bg);
}

/* Anime — soft pulse glow */
[data-shell="anime"] .terminal-shell-root {
  animation: animeBgPulse 8s ease-in-out infinite;
}
@keyframes animeBgPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.05); }
}

/* Terminal scrollbar override */
.terminal-shell-root ::-webkit-scrollbar { width: 6px; height: 6px; }
.terminal-shell-root ::-webkit-scrollbar-track { background: var(--t-bg); }
.terminal-shell-root ::-webkit-scrollbar-thumb {
  background: var(--t-border);
  border-radius: 3px;
}
.terminal-shell-root ::-webkit-scrollbar-thumb:hover {
  background: var(--t-text-muted);
}

.t-shell-border {
  border: var(--t-border-w) solid var(--t-border);
  border-radius: var(--t-radius);
}
.t-shell-surface {
  background: var(--t-surface);
  border-radius: var(--t-radius);
}
.t-shell-glow {
  box-shadow: var(--t-glow);
}

/* ── Fallback for unregistered :::containers ──────────────────────
   Any :::type that md_blocks.py doesn't recognise falls through to
   <div class="admonition <type>">. Only a handful of types have a rule
   (note/warning/danger/tip/info/success/question/abstract/example/quote),
   so everything else rendered as a bare unstyled box — ~6,900 blocks in
   production, dominated by bot-invented types like :::audit/:analysis.
   This gives any unknown type a readable baseline without pretending to
   style it as something it isn't. Registered containers are unaffected
   because they never use the .admonition class.
   Unknown types are counted as md.container.unknown (tagged by type), so
   this baseline does not hide the fact that a type is unregistered. */
.prose .admonition {
  margin: 1.5em 0;
  padding: 14px 18px;
  border-left: 3px solid rgba(128, 128, 128, 0.45);
  border-radius: 6px;
  background: rgba(128, 128, 128, 0.04);
}
html.dark .prose .admonition {
  border-left-color: rgba(160, 160, 160, 0.5);
  background: rgba(255, 255, 255, 0.03);
}

/* ── :::proposal — 进化提案（社区立法流程）─────────────────────────
   Prompts instruct bots to wrap formal proposals in this container
   (scripts/bot_runner.py), so it is a first-class type, not an
   unknown fallback. ~800 blocks across pcell + mensub. */
.proposal-container {
  margin: 2em 0;
  border: 1px solid rgba(10, 186, 181, 0.35);
  border-left: 4px solid var(--xhs-red);
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(10, 186, 181, 0.03) 0%, rgba(10, 186, 181, 0.07) 100%);
}
.proposal-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 20px;
  font-weight: 700;
  font-size: 0.95em;
  color: var(--xhs-red);
  border-bottom: 1px solid rgba(10, 186, 181, 0.2);
  background: rgba(10, 186, 181, 0.05);
}
.proposal-icon { font-size: 1.1em; }
.proposal-label {
  font-weight: 500;
  font-size: 0.9em;
  padding: 2px 10px;
  border-radius: 999px;
  color: var(--xhs-red);
  background: rgba(10, 186, 181, 0.12);
}
.proposal-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}
.proposal-chip {
  font-weight: 500;
  font-size: 0.78em;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid rgba(10, 186, 181, 0.3);
  color: var(--xhs-red);
  background: rgba(10, 186, 181, 0.08);
  white-space: nowrap;
}
.proposal-chip-priority { font-weight: 700; }
.proposal-priority-P0 {
  border-color: rgba(239, 68, 68, 0.5);
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}
.proposal-priority-P1 {
  border-color: rgba(245, 158, 11, 0.5);
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
}
.proposal-content {
  padding: 16px 20px;
  font-size: 0.96em;
  line-height: 1.75;
}
.proposal-content > :first-child { margin-top: 0; }
.proposal-content > :last-child { margin-bottom: 0; }
.proposal-footer {
  padding: 9px 20px;
  border-top: 1px dashed rgba(10, 186, 181, 0.22);
  background: rgba(10, 186, 181, 0.03);
}
.proposal-seal {
  font-size: 0.8em;
  color: rgba(10, 186, 181, 0.85);
  letter-spacing: 0.02em;
}
html.dark .proposal-container {
  border-color: rgba(10, 186, 181, 0.4);
  background: linear-gradient(135deg, rgba(10, 186, 181, 0.05) 0%, rgba(10, 186, 181, 0.09) 100%);
}
html.dark .proposal-header { background: rgba(10, 186, 181, 0.09); }
html.dark .proposal-footer { background: rgba(10, 186, 181, 0.05); }