/* Moony website — marketing extension of the app design system.
   tokens.css is synced verbatim from the app (npm run tokens:sync) and is linked
   before this file by the Base layout. Everything below either reuses a moony.css
   component unchanged or is a documented deviation for a responsive marketing page
   (type scale, column width, breakpoints). Fonts resolve relative to this file. */

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Marketing extension tokens (deviations from the app, documented) ---- */
:root {
  --site-max: 1120px;
  --site-pad: 24px;
  --fs-site-body: 15px;      /* app body is 13px; a reading page needs more */
  --fs-site-h1: 58px;        /* app H1 is 36px */
  --fs-site-h2: 30px;
  --fs-site-lead: 18px;
  --fs-site-display: 64px;   /* hero number inside the product frame stays 42px */
  /* The app's --ink-3 and --ink-4 are 3.4:1 and 2.6:1 on the canvas, fine for a dense desktop UI but below WCAG AA (4.5:1) for the small running text of a web page.
     Darkened here, not in tokens.css (which is synced from the app): 4.8:1 and 4.7:1 on the canvas, 5.7:1 and 5.5:1 on white; --ink-3 stays above 4.5:1 on the language switch's track (--well-2). */
  --ink-3: #6a675e;
  --ink-4: #6c6960;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh;
  background: radial-gradient(ellipse at 74% -10%, var(--canvas-glow) 0, transparent 43%), var(--canvas);
  color: var(--ink); font: 450 var(--fs-site-body)/1.55 var(--font);
  -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01";
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: none; border-color: var(--focus-border); box-shadow: var(--focus-ring); }
a:focus-visible { outline: 2px solid var(--focus-border); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } html { scroll-behavior: auto; } }
.ic { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* The icon sprite stays in the page but takes no space. A class, not a style attribute: the Content-Security-Policy allows no inline styles. */
.sprite { position: absolute; width: 0; height: 0; }
/* Text for assistive technology only, e.g. a heading that keeps the outline in order without adding a visible one. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.wrap { max-width: var(--site-max); margin: 0 auto; padding: 0 var(--site-pad); }

/* ---- Reused app components (moony.css, verbatim where possible) ---- */
.moon { position: relative; flex: none; width: 31px; height: 31px; border-radius: 50%; background: var(--dark); box-shadow: inset 0 1px rgba(255,255,255,.2), 0 2px 5px rgba(33,30,24,.15); }
.moon::after { content: ""; position: absolute; left: 8px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--canvas-glow); box-shadow: 4px 1px 0 var(--dark); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--control-h); padding: 0 14px;
  border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--paper); color: var(--ink);
  font-size: var(--fs-table); font-weight: 650; letter-spacing: -0.01em; white-space: nowrap; box-shadow: var(--sh-btn);
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.btn:hover { background: var(--well); }
.btn:active { transform: translateY(1px); }
.btn--primary { border-color: transparent; background: var(--dark-grad); color: #fff; box-shadow: var(--sh-dark); }
.btn--primary:hover { background: var(--dark-grad-hover); color: #fff; }
.btn--ghost { border-color: transparent; background: transparent; box-shadow: none; color: var(--ink-2); }
.btn--ghost:hover { background: rgba(41,40,34,.06); color: var(--ink); }
.btn--lg { height: 44px; padding: 0 18px; font-size: 14px; }

.eyebrow { color: var(--ink-4); font-size: var(--fs-eyebrow); font-weight: var(--fw-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }
.card { border: 1px solid var(--line); border-radius: var(--r-4); background: linear-gradient(145deg, var(--paper), var(--paper-2)); box-shadow: var(--sh-2); }
.card--flat { box-shadow: var(--sh-1); }

.logo { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--s1); box-shadow: inset 0 1px rgba(255,255,255,.13); color: #fff; font-size: var(--fs-micro); font-weight: 750; }
.logo--soft { background: var(--well-2); color: var(--ink-2); box-shadow: none; }

.badge { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: 6px; background: var(--well-2); color: var(--ink-2); font-size: var(--fs-micro); font-weight: 650; white-space: nowrap; }
.badge--outline { background: none; border: 1px dashed var(--line-strong); color: var(--ink-3); }

.seg { display: inline-flex; gap: 1px; padding: 3px; border-radius: var(--r-2); background: var(--well-2); }
.seg__btn { display: inline-flex; align-items: center; padding: 0 10px; height: 26px; border: 0; border-radius: var(--r-1); background: transparent; color: var(--ink-3); font-size: var(--fs-micro); font-weight: 600; transition: background var(--t-fast), color var(--t-fast); }
.seg__btn:hover { color: var(--ink); }
.seg__btn.is-active { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(34,34,34,.13); }

.link { border: 0; background: none; padding: 0; color: var(--ink-2); font-size: inherit; font-weight: 650; }
.link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
code, .code { font: 500 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.code { display: block; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--well); color: var(--ink-2); overflow-x: auto; white-space: pre; max-width: 100%; }
.code b { color: var(--ink); font-weight: 650; }

/* ---- Site chrome ---- */
.site-nav { position: sticky; top: 0; z-index: 5; backdrop-filter: blur(8px); background: rgba(238,236,231,.82); border-bottom: 1px solid var(--line-sidebar); }
.site-nav .wrap { display: flex; align-items: center; gap: 22px; height: 62px; }
.brand { display: flex; align-items: center; gap: 10px; margin-right: 8px; }
.brand b { font-size: 18px; font-weight: 650; letter-spacing: -0.06em; }
.nav-links { display: flex; gap: 2px; margin-left: 6px; }
.nav-links a { padding: 8px 10px; border-radius: var(--r-2); color: var(--ink-2); font-size: 13px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.nav-links a:hover { background: rgba(41,40,34,.06); color: var(--ink); }
.nav-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.lang { font-size: var(--fs-micro); }

section.block { padding: 72px 0; }
/* Anchor targets sit under the sticky nav. */
section[id] { scroll-margin-top: 80px; }
section.block + section.block { border-top: 1px solid var(--line-sidebar); }
.block-head { max-width: 640px; margin-bottom: 30px; }
.block-head .eyebrow { margin-bottom: 10px; }
h2.title { margin: 0; font-size: var(--fs-site-h2); font-weight: 570; letter-spacing: -0.05em; line-height: 1.1; }
.block-head p { margin: 12px 0 0; color: var(--ink-3); font-size: 16px; line-height: 1.5; }
h3 { margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-h3); letter-spacing: var(--ls-h3); }
p { margin: 0; }
.lead { color: var(--ink-2); font-size: var(--fs-site-lead); line-height: 1.5; }

/* ---- Hero ---- */
.hero-section { padding: 64px 0 40px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 36px; align-items: center; }
/* On wide screens the picture runs past the text column's edge into the margin, so the app is shown larger. */
@media (min-width: 1280px) { .hero-visual { margin-right: -72px; } }
.hero-grid > *, .feature__grid > *, .feature__copy > *, .tracks > *, .trust > *, .dl-grid > *, .foot-grid > *, .install > *, .pair > * { min-width: 0; }
/* The product frame holds a screenshot of the app */
.frame { position: relative; border: 1px solid var(--line); border-radius: var(--r-4); background: var(--paper); box-shadow: var(--sh-3), 0 40px 80px rgba(68,60,43,.08); overflow: hidden; }
.frame img, .shot img { display: block; width: 100%; height: auto; }
.frame-caption { margin: 10px 4px 0; text-align: right; color: var(--ink-4); font-size: var(--fs-caption); font-weight: 500; }
.hero-copy h1 { margin: 14px 0 18px; font-size: var(--fs-site-h1); font-weight: 570; letter-spacing: -0.07em; line-height: 0.98; text-wrap: balance; }
.hero-copy .lead { max-width: 440px; }
.cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.cta-note { margin-top: 14px; color: var(--ink-4); font-size: var(--fs-caption); font-weight: 500; }
.cta-note b { color: var(--ink-3); font-weight: 600; }
.facts { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 42px; padding-top: 22px; border-top: 1px solid var(--line-sidebar); color: var(--ink-3); font-size: var(--fs-caption); font-weight: 600; }
.facts span { display: inline-flex; align-items: center; gap: 6px; }
.facts .ic { width: 13px; height: 13px; color: var(--gain); }


/* ---- Download ---- */
.dl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.dl { display: flex; flex-direction: column; gap: 12px; padding: 20px 21px; }
.dl__os { display: flex; align-items: center; justify-content: space-between; }
.dl__os h3 { font-size: 18px; }
.dl__files { display: grid; gap: 6px; }
.dl__files a { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--paper); font-size: 12.5px; font-weight: 600; }
.dl__files a:hover { background: var(--well); }
.dl__files a span:first-child { color: var(--ink-2); }
.dl__name { display: block; margin-top: 2px; color: var(--ink-4); font: 500 11px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.dl__files a span { color: var(--ink-4); font-weight: 500; font-variant-numeric: tabular-nums; }
.dl__note { padding-top: 10px; border-top: 1px solid var(--line-soft); color: var(--ink-3); font-size: 12px; line-height: 1.5; }
.dl__note b { color: var(--ink-2); font-weight: 650; }
.dl-foot { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; color: var(--ink-3); font-size: 13px; }
.dl-foot .link { font-size: 13px; }

/* ---- Download page ---- */
.page-head { max-width: 720px; margin-bottom: 30px; }
.page-head h1 { margin: 0; font-size: 44px; font-weight: 570; letter-spacing: -0.06em; line-height: 1.04; text-wrap: balance; }
.page-meta { margin-top: 14px; color: var(--ink-3); font-size: 14px; }
.page-meta .link { font-size: 14px; white-space: nowrap; }
.install { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
.install__card { display: flex; flex-direction: column; gap: 14px; padding: 20px 21px; }
.install__card h3 { font-size: 18px; }
.install__alt { padding-top: 12px; border-top: 1px solid var(--line-soft); color: var(--ink-3); font-size: 13px; line-height: 1.5; }
.install__alt--first { padding-top: 0; border-top: 0; }
.steps { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { position: relative; padding-left: 32px; color: var(--ink-2); font-size: 14px; line-height: 1.55; counter-increment: step; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: var(--well-2); color: var(--ink-2); font-size: 12px; font-weight: 650; }
.steps strong, .install__alt strong, .req strong, .dl__note strong { color: var(--ink); font-weight: 650; }
.steps__note { display: block; margin-top: 8px; color: var(--ink-3); font-size: 13px; line-height: 1.5; }
.install pre.code { margin: 8px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.steps code, .steps__note code, .install__alt code, .req code, .pair code { padding: 1px 5px; border-radius: 4px; background: var(--well); overflow-wrap: anywhere; }
.install pre.code code { padding: 0; background: none; }
.cmds { display: grid; gap: 16px; }
.cmds b { font-size: 13px; font-weight: 650; }
.pair { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px; align-items: start; }
.pair__col { display: grid; gap: 14px; color: var(--ink-2); font-size: 15px; line-height: 1.55; }
h2.title--sm { font-size: 24px; letter-spacing: -0.04em; }
.pair a, .req a { font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.req { display: flex; flex-direction: column; gap: 8px; padding: 20px 21px; }
.req h3 { font-size: 16px; }
.req p { color: var(--ink-3); font-size: 14px; line-height: 1.5; }
.notfound { min-height: 60vh; }
.notfound h1 { margin: 12px 0 16px; font-size: 44px; font-weight: 570; letter-spacing: -0.06em; line-height: 1.04; }

/* ---- FAQ ---- */
.faq { display: grid; gap: 0; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line-soft); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 2px; cursor: pointer; list-style: none; font-size: 15px; font-weight: 650; letter-spacing: -0.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--ink-4); font-weight: 500; font-size: 18px; }
.faq details[open] summary::after { content: "–"; }
.faq .answer { padding: 0 2px 18px; max-width: 720px; color: var(--ink-2); font-size: 14px; line-height: 1.55; }

/* ---- Footer ---- */
footer { padding: 44px 0 40px; border-top: 1px solid var(--line-sidebar); color: var(--ink-3); font-size: 13px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 24px; }
.foot-blurb { margin-top: 10px; max-width: 300px; }
.foot-grid h3 { margin: 0 0 10px; font-size: var(--fs-eyebrow); font-weight: var(--fw-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ink-4); }
.foot-grid ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.foot-grid a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.foot-note { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; color: var(--ink-4); font-size: 12px; }


/* ---- Feature blocks: a screenshot on one side, a short text on the other ---- */
.feature { padding: 56px 0; }
.feature__grid { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 48px; align-items: center; }
.feature--flip .feature__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); }
.feature--flip .feature__copy { order: 2; }
.feature__tag { margin-bottom: 12px; }
.feature__body { margin-top: 14px; }
.feature__body p { color: var(--ink-3); font-size: 16px; line-height: 1.5; max-width: 560px; }
.ticks { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.ticks li { display: flex; gap: 9px; align-items: flex-start; color: var(--ink-2); font-size: 14px; }
.ticks .ic { width: 14px; height: 14px; margin-top: 3px; color: var(--gain); }
/* A wide picture, or a pair of them, goes under the text across the full width. */
.feature--wide .feature__grid, .feature--pair .feature__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.feature--wide .feature__copy, .feature--pair .feature__copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: end; }
.feature--wide .feature__body, .feature--pair .feature__body { margin-top: 0; }
.feature__media { position: relative; }
.feature__media--pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.shot { margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-4); overflow: hidden; box-shadow: var(--sh-3), 0 30px 60px rgba(68,60,43,.07); }
/* Tuned to the dashboard picture (1440 x 900), which the hero already shows whole: this crop keeps its lower part, from just above the three totals down through "What's coming up", so the second picture is not the first one again. Recheck when that picture changes. */
.shot--crop img { aspect-ratio: 4.8 / 1; object-fit: cover; object-position: 50% 100%; }
.assistant-code { display: grid; gap: 10px; padding: 18px 20px; }
.assistant-code .code { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---- Tracks ---- */
.tracks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
.track { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-3); background: linear-gradient(150deg, var(--paper), var(--paper-2)); box-shadow: var(--sh-1); }
.track .logo { width: 36px; height: 36px; }
.track .logo .ic { width: 17px; height: 17px; }
.track b { display: block; font-size: 14px; font-weight: 650; letter-spacing: -0.01em; }
.track small { display: block; margin-top: 2px; color: var(--ink-4); font-size: 12.5px; font-weight: 500; }
.tracks-foot { margin-top: 18px; color: var(--ink-3); font-size: 13px; font-weight: 600; }

/* ---- Trust ---- */
.trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.trust__card { display: flex; flex-direction: column; gap: 8px; padding: 20px 21px; }
.trust__card .logo { margin-bottom: 6px; }
.trust__card h3 { font-size: 16px; }
.trust__card p { color: var(--ink-3); font-size: 14px; line-height: 1.5; }
.trust__link { margin-top: 18px; font-size: 14px; }
.small-print { margin-top: 6px; color: var(--ink-4); font-size: 12px; }
.dl__note code { padding: 1px 5px; border-radius: 4px; background: var(--well); overflow-wrap: anywhere; }

/* ---- Responsive (the app has none; the site must) ---- */
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-copy h1 { font-size: 48px; }
  /* Every feature stacks with the picture above its text; a block without a picture, and the pair of cashflow pictures, keep their text first. */
  .feature__grid, .feature--flip .feature__grid { grid-template-columns: 1fr; gap: 28px; }
  .feature--flip .feature__copy { order: 0; }
  .feature:not(.feature--plain):not(.feature--pair) .feature__media { order: -1; }
  .feature--wide .feature__copy, .feature--pair .feature__copy { grid-template-columns: 1fr; gap: 14px; }
  .feature__media--pair { grid-template-columns: 1fr; gap: 20px; }
  /* Stacked, the wide crop would sit right under the hero's own picture of the same page; the hero's is enough. */
  .feature--wide .feature__media { display: none; }
  .tracks { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  /* Five items plus the switch and two buttons do not fit a tablet row: the GitHub button goes first, the hero and footer link to the repository anyway. */
  .nav-right .btn--ghost { display: none; }
  .trust, .dl-grid, .install { grid-template-columns: 1fr; }
  .pair { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 760px) {
  :root { --site-pad: 16px; }
  .nav-links { display: none; }
  .hero-section { padding: 40px 0 44px; }
  .hero-copy h1 { font-size: 40px; }
  section.block { padding: 52px 0; }
  .feature { padding: 36px 0; }
  h2.title { font-size: 26px; }
  h2.title--sm { font-size: 22px; }
  .page-head h1, .notfound h1 { font-size: 36px; }
  .tracks { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .track { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
  .foot-grid { grid-template-columns: 1fr; }
}

/* ---- Markdown pages ---- */
/* The page resets p, a, ul and headings globally, so everything a rendered repo document needs is restored here. */
.prose { max-width: 760px; margin: 0 auto; font-size: 15px; line-height: 1.6; color: var(--ink-2); overflow-wrap: break-word; }
.prose h1 { font-size: 36px; font-weight: 570; letter-spacing: -0.05em; line-height: 1.1; margin: 0 0 18px; color: var(--ink); }
.prose h2 { font-size: 24px; font-weight: 570; letter-spacing: -0.03em; line-height: 1.2; margin: 36px 0 12px; color: var(--ink); }
.prose h3 { font-size: 18px; margin: 28px 0 10px; color: var(--ink); }
.prose h2, .prose h3 { scroll-margin-top: 80px; }
.prose p { margin: 0 0 12px; }
.prose strong { color: var(--ink); font-weight: 650; }
.prose ul, .prose ol { margin: 0 0 12px; padding-left: 22px; }
.prose li { margin: 4px 0; }
.prose li p { margin: 0 0 6px; }
.prose li > ul, .prose li > ol { margin: 4px 0 0; }
.prose a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose h2 a, .prose h3 a { font-weight: inherit; text-decoration: none; }
.prose h2 a:hover, .prose h3 a:hover { text-decoration: underline; }
.prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 14px; margin: 16px 0; }
.prose th, .prose td { min-width: 110px; text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.prose th { color: var(--ink); font-weight: 600; }
.prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; background: var(--well); padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }
.prose pre { overflow: auto; margin: 0 0 12px; padding: 14px 16px; background: var(--well); border: 1px solid var(--line); border-radius: 10px; }
.prose pre code { padding: 0; background: none; overflow-wrap: normal; }
.prose blockquote { margin: 0 0 12px; padding: 4px 0 4px 14px; border-left: 3px solid var(--line-strong); color: var(--ink-3); }
.prose blockquote > :last-child { margin-bottom: 0; }
.prose hr { margin: 28px 0; border: 0; border-top: 1px solid var(--line); }
.provenance { font-size: 13px; color: var(--ink-3); border-left: 3px solid var(--line-strong); padding: 8px 12px; margin: 0 0 28px; }
.prose .provenance { margin: 0 0 28px; }