/* ==========================================================
   ChatGPeTe — post typography (shared by the public reader
   and the control-room editor, so what you write is what
   visitors see). One font family only; sizes via classes.
   ========================================================== */
.prose {
  --prose-size: 17.5px;
  --prose-accent: var(--accent, #4fd1ff);
  font: 400 var(--prose-size)/1.75 "Inter", system-ui, -apple-system, sans-serif;
  color: #c9d6f2;
  overflow-wrap: break-word;
}
.prose > * { margin: 0 0 1.1em; }
.prose > *:last-child { margin-bottom: 0; }
.prose b, .prose strong { color: #fff; font-weight: 600; }
.prose i, .prose em { font-style: italic; }
.prose u { text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--prose-accent) 70%, transparent); }

/* sizes are relative to the base, so nesting never compounds */
.prose .fs-s  { font-size: calc(var(--prose-size) * .84); line-height: 1.65; }
.prose .fs-n  { font-size: var(--prose-size); }
.prose .fs-l  { font-size: calc(var(--prose-size) * 1.32); line-height: 1.45; color: #e7eeff; letter-spacing: -.01em; }
.prose .fs-xl { font-size: calc(var(--prose-size) * 1.85); line-height: 1.2; color: #fff; font-weight: 600; letter-spacing: -.02em; }

.prose a {
  color: var(--prose-accent); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--prose-accent) 45%, transparent);
  transition: color .2s, text-decoration-color .2s;
}
.prose a:hover { color: #fff; text-decoration-color: currentColor; }
.prose a[target="_blank"]::after { content: "↗"; font-size: .75em; margin-left: .15em; opacity: .7; text-decoration: none; display: inline-block; }

.prose ul, .prose ol { padding-left: 1.4em; }
.prose li { margin: .35em 0; padding-left: .25em; }
.prose ul li::marker { color: var(--prose-accent); content: "▹  "; }
.prose ol li::marker { color: var(--prose-accent); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .85em; }

.prose blockquote {
  position: relative; margin-left: 0; margin-right: 0; padding: .9em 1.2em .9em 1.4em;
  border-left: 3px solid var(--prose-accent); border-radius: 0 12px 12px 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--prose-accent) 10%, transparent), transparent 85%);
  color: #e3ebff; font-style: italic;
}

.prose hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(120, 170, 255, .35), transparent); margin: 2em 0; }

.prose figure { margin: 1.6em 0; }
.prose img {
  display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: 14px;
  border: 1px solid rgba(120, 170, 255, .16); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .8);
}
.prose figcaption {
  margin-top: .7em; text-align: center; font: 400 12.5px/1.5 "JetBrains Mono", ui-monospace, monospace; color: #6f80a6;
}
.prose figcaption:empty { display: none; }
.prose figcaption::before { content: "// "; color: var(--prose-accent); opacity: .7; }

@media (max-width: 520px) {
  .prose { --prose-size: 16.5px; }
}