/* Forevenza's design system for commercial applications. Engineering-owned, restored at every release, served at
   /a/_forevenza/forevenza.css and loaded by the frame (src/_runtime/frame.ts) on every page. Its typeface and ink and
   blue are forevenza.com's own (a test holds them to the site); its ground is white and cool grey, without the site's
   warm stone. Base element styles sit inside :where(), so they carry no specificity and the application's own
   stylesheet can lay out and draw what is particular to its tool without fighting them. */

@font-face { font-family: "Mona Sans"; src: url("/a/_forevenza/MonaSans-latin.woff2") format("woff2"); font-weight: 200 900; font-stretch: 75% 125%; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;

  /* Colour */
  --fv-ink: #141416;
  --fv-ink-2: #34373e;
  --fv-slate: #5b606a;          /* secondary text, 6.4:1 on white */
  --fv-faint: #8a8f99;          /* large or non-essential text only */
  --fv-line: #e3e6eb;
  --fv-line-strong: #c9ced6;
  --fv-paper: #ffffff;
  --fv-canvas: #f5f6f8;
  --fv-canvas-2: #eceef2;
  --fv-blue: #2d3be0;
  --fv-blue-hover: #1f2ab3;
  --fv-blue-wash: #eef0fd;
  --fv-positive: #067647;  --fv-positive-wash: #ebf7f0;
  --fv-caution: #a14a00;   --fv-caution-wash: #f9efe6;
  --fv-critical: #c0262d;  --fv-critical-wash: #fcecec;

  /* Data: one series in blue, comparisons in greys, the critical red for what is over a limit. */
  --fv-data-1: var(--fv-blue);
  --fv-data-1-soft: #aab1f2;
  --fv-data-2: #8d95a3;
  --fv-data-3: #cdd2da;
  --fv-data-over: var(--fv-critical);
  --fv-data-grid: #eceef2;

  /* Type: Mona Sans, slightly extended for headings. Figures stay proportional: the face's tabular set reads as code. */
  --fv-sans: "Mona Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fv-text-xs: 0.8125rem;
  --fv-text-sm: 0.875rem;
  --fv-text-base: 1rem;
  --fv-text-lg: 1.125rem;
  --fv-text-xl: 1.375rem;
  --fv-text-2xl: 1.75rem;
  --fv-text-3xl: clamp(1.875rem, 1.45rem + 1.6vw, 2.5rem);
  --fv-text-4xl: clamp(2.25rem, 1.55rem + 2.8vw, 3.5rem);

  /* Space and shape */
  --fv-gutter: clamp(1rem, 0.35rem + 2.6vw, 2.5rem);
  --fv-max: 75rem;
  --fv-max-wide: 90rem;
  --fv-s1: 0.25rem; --fv-s2: 0.5rem; --fv-s3: 0.75rem; --fv-s4: 1rem; --fv-s5: 1.5rem; --fv-s6: 2rem; --fv-s7: 3rem; --fv-s8: 4.5rem;
  --fv-radius-s: 6px;
  --fv-radius: 10px;
  --fv-control-h: 2.5rem;
  --fv-shadow-pop: 0 1px 2px rgba(20, 20, 22, .06), 0 8px 24px -8px rgba(20, 20, 22, .18);
  --fv-ease: cubic-bezier(.2, .7, .2, 1);
}
@media (pointer: coarse) { :root { --fv-control-h: 2.75rem; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
:where(html) { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
:where(body) { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--fv-paper); color: var(--fv-ink); font-family: var(--fv-sans); font-size: var(--fv-text-base); line-height: 1.55; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "kern"; }
:where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote) { margin: 0; }
:where(h1, h2, h3, h4) { font-weight: 600; font-stretch: 108%; color: var(--fv-ink); text-wrap: balance; }
:where(h1) { font-size: var(--fv-text-3xl); line-height: 1.1; letter-spacing: -0.022em; }
:where(h2) { font-size: var(--fv-text-xl); line-height: 1.25; letter-spacing: -0.012em; }
:where(h3) { font-size: var(--fv-text-lg); line-height: 1.35; letter-spacing: -0.005em; }
:where(h4) { font-size: var(--fv-text-base); line-height: 1.4; }
:where(p, li, dd) { max-width: 68ch; text-wrap: pretty; }
:where(a) { color: var(--fv-blue); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
:where(a:hover) { color: var(--fv-blue-hover); }
:where(img, svg, canvas, video) { display: block; max-width: 100%; }
:where(table, input, select, textarea, button) { font: inherit; color: inherit; }
:where(small) { font-size: var(--fv-text-sm); }
:where(strong, b) { font-weight: 600; }
:where(hr) { border: 0; border-top: 1px solid var(--fv-line); margin: var(--fv-s6) 0; }
:where(code, kbd) { font-family: var(--fv-sans); background: var(--fv-canvas); padding: 0.05em 0.35em; border-radius: 4px; font-size: 0.92em; }
::selection { background: var(--fv-blue); color: #fff; }
:where(:focus-visible) { outline: 2px solid var(--fv-blue); outline-offset: 2px; border-radius: 3px; }
.fv-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fv-skip { position: absolute; left: var(--fv-s4); top: -3rem; z-index: 100; background: var(--fv-ink); color: #fff; padding: var(--fv-s2) var(--fv-s4); border-radius: var(--fv-radius-s); text-decoration: none; }
.fv-skip:focus { top: var(--fv-s3); color: #fff; }

/* ---------- Frame ---------- */
.fv-header { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--fv-line); }
.fv-header__inner { max-width: var(--fv-max); margin: 0 auto; padding: 0 var(--fv-gutter); height: 3.75rem; display: flex; align-items: center; gap: var(--fv-s4); }
body[data-fv-width="wide"] .fv-header__inner, body[data-fv-width="wide"] .fv-main, body[data-fv-width="wide"] .fv-footer__inner, body[data-fv-width="wide"] .fv-demo__inner { max-width: var(--fv-max-wide); }
.fv-header__name, .fv-header__by, .fv-header__home { flex: none; }
.fv-header__name { font-size: 1.0625rem; font-weight: 650; font-stretch: 112%; letter-spacing: -0.012em; color: var(--fv-ink); text-decoration: none; white-space: nowrap; }
.fv-header__name:hover { color: var(--fv-ink); }
.fv-header__by { display: inline-flex; align-items: center; gap: 0.4rem; padding-left: var(--fv-s4); margin-left: calc(var(--fv-s1) * -1); border-left: 1px solid var(--fv-line); color: var(--fv-slate); font-size: var(--fv-text-xs); white-space: nowrap; }
.fv-header__wordmark { height: 16px; width: auto; }
.fv-header__wordmark--lead { height: 22px; }
.fv-header__home { display: inline-flex; }
.fv-header__nav { margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.fv-header__nav ul { display: flex; gap: var(--fv-s1); list-style: none; padding: 0; margin: 0; }
.fv-header__nav a { display: block; padding: 0.4rem 0.7rem; border-radius: var(--fv-radius-s); color: var(--fv-slate); font-size: var(--fv-text-sm); font-weight: 500; text-decoration: none; white-space: nowrap; }
.fv-header__nav a:hover { color: var(--fv-ink); background: var(--fv-canvas); }
.fv-header__nav a[aria-current="page"] { color: var(--fv-ink); background: var(--fv-canvas-2); }
@media (max-width: 40rem) {
  .fv-header__inner { height: auto; min-height: 3.5rem; flex-wrap: wrap; align-content: center; gap: 0 var(--fv-s3); padding-top: 0.85rem; padding-bottom: 0.85rem; }
  .fv-header__inner:has(.fv-header__nav) { padding-bottom: 0; }
  .fv-header__by { padding-left: var(--fv-s3); }
  .fv-header__nav { order: 3; flex: 1 0 100%; margin: 0.55rem calc(var(--fv-gutter) * -1) 0; padding: 0 calc(var(--fv-gutter) - 0.6rem) var(--fv-s2); }
  .fv-header__nav a { padding: 0.35rem 0.6rem; }
}

.fv-demo { margin: 0; max-width: none; background: var(--fv-canvas); border-bottom: 1px solid var(--fv-line); color: var(--fv-slate); font-size: var(--fv-text-xs); }
.fv-demo__inner { display: flex; align-items: baseline; gap: var(--fv-s2); max-width: var(--fv-max); margin: 0 auto; padding: 0.5rem var(--fv-gutter); }
.fv-demo__inner::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--fv-blue); transform: translateY(-1px); }

.fv-main { flex: 1 0 auto; width: 100%; max-width: var(--fv-max); margin: 0 auto; padding: var(--fv-s6) var(--fv-gutter) var(--fv-s8); }
@media (max-width: 40rem) { .fv-main { padding-top: var(--fv-s5); } }

.fv-footer { background: var(--fv-canvas); border-top: 1px solid var(--fv-line); color: var(--fv-slate); font-size: var(--fv-text-sm); }
.fv-footer__inner { max-width: var(--fv-max); margin: 0 auto; padding: var(--fv-s6) var(--fv-gutter) var(--fv-s7); display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--fv-s4) var(--fv-s7); }
.fv-footer__wordmark { height: 18px; width: auto; }
.fv-footer__text { display: grid; gap: var(--fv-s2); max-width: 44rem; }
.fv-footer__text p { max-width: none; }
.fv-footer a { color: var(--fv-ink-2); }

/* ---------- Layout ---------- */
.fv-intro { display: grid; gap: var(--fv-s3); margin-bottom: var(--fv-s6); max-width: 46rem; }
.fv-intro p { color: var(--fv-slate); font-size: var(--fv-text-lg); line-height: 1.5; }
.fv-stack { display: flex; flex-direction: column; gap: var(--fv-gap, var(--fv-s4)); }
.fv-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fv-gap, var(--fv-s3)); }
.fv-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--fv-s6); align-items: start; }
.fv-split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.fv-split--aside { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
@media (max-width: 60rem) { .fv-split, .fv-split--even, .fv-split--aside { grid-template-columns: minmax(0, 1fr); gap: var(--fv-s5); } }
.fv-sticky { position: sticky; top: 4.75rem; }
@media (max-width: 60rem) { .fv-sticky { position: static; } }
.fv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--fv-cell, 11rem)), 1fr)); gap: var(--fv-gap, var(--fv-s4)); }
.fv-section { margin-top: var(--fv-s7); }
.fv-section > h2 { margin-bottom: var(--fv-s3); }
.fv-lede { color: var(--fv-slate); }
.fv-muted { color: var(--fv-slate); }
.fv-small { font-size: var(--fv-text-sm); }

/* ---------- Surfaces ---------- */
.fv-panel { background: var(--fv-paper); border: 1px solid var(--fv-line); border-radius: var(--fv-radius); padding: var(--fv-s5); }
.fv-panel--recessed { background: var(--fv-canvas); border-color: transparent; }
.fv-panel--flush { padding: 0; overflow: hidden; }
.fv-panel__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--fv-s2) var(--fv-s4); margin-bottom: var(--fv-s4); }
.fv-panel__head h2, .fv-panel__head h3 { font-size: var(--fv-text-lg); }
.fv-panel__head p { color: var(--fv-slate); font-size: var(--fv-text-sm); }
@media (max-width: 40rem) { .fv-panel { padding: var(--fv-s4); } }
.fv-divider { border-top: 1px solid var(--fv-line); margin: var(--fv-s5) 0; }

/* ---------- Figures: the answer a tool computes ---------- */
.fv-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: 1px; background: var(--fv-line); border: 1px solid var(--fv-line); border-radius: var(--fv-radius); overflow: hidden; }
.fv-figure { background: var(--fv-paper); padding: var(--fv-s4) var(--fv-s4) var(--fv-s4); display: grid; gap: 0.15rem; align-content: start; }
.fv-figure__label { color: var(--fv-slate); font-size: var(--fv-text-sm); }
.fv-figure__value { font-size: var(--fv-text-2xl); font-weight: 600; font-stretch: 106%; letter-spacing: -0.02em; line-height: 1.15; color: var(--fv-ink); }
.fv-figure__value small { font-size: 0.55em; font-weight: 500; color: var(--fv-slate); letter-spacing: 0; margin-left: 0.15em; }
.fv-figure__note { color: var(--fv-slate); font-size: var(--fv-text-xs); }
.fv-figure--lead .fv-figure__value { color: var(--fv-blue); }
.fv-figure--over .fv-figure__value { color: var(--fv-critical); }

/* ---------- Controls ---------- */
.fv-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--fv-s2); min-height: var(--fv-control-h); padding: 0 1.1rem; border: 1px solid var(--fv-blue); border-radius: var(--fv-radius-s); background: var(--fv-blue); color: #fff; font-size: var(--fv-text-sm); font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .15s var(--fv-ease), border-color .15s var(--fv-ease), color .15s var(--fv-ease); }
.fv-button:hover { background: var(--fv-blue-hover); border-color: var(--fv-blue-hover); color: #fff; }
.fv-button:active { transform: translateY(1px); }
.fv-button--secondary { background: var(--fv-paper); color: var(--fv-ink); border-color: var(--fv-line-strong); }
.fv-button--secondary:hover { background: var(--fv-canvas); border-color: var(--fv-line-strong); color: var(--fv-ink); }
.fv-button--quiet { background: transparent; border-color: transparent; color: var(--fv-blue); padding: 0 0.6rem; }
.fv-button--quiet:hover { background: var(--fv-blue-wash); border-color: transparent; color: var(--fv-blue-hover); }
.fv-button--small { min-height: 2rem; padding: 0 0.75rem; font-size: var(--fv-text-xs); }
.fv-button--block { width: 100%; }
.fv-button:disabled, .fv-button[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }

.fv-field { display: grid; gap: 0.35rem; min-width: 0; }
.fv-label { font-size: var(--fv-text-sm); font-weight: 550; color: var(--fv-ink); }
.fv-help { font-size: var(--fv-text-xs); color: var(--fv-slate); max-width: none; }
.fv-error { font-size: var(--fv-text-xs); color: var(--fv-critical); font-weight: 500; }
.fv-input, .fv-select, .fv-textarea { width: 100%; min-height: var(--fv-control-h); padding: 0.45rem 0.7rem; border: 1px solid var(--fv-line-strong); border-radius: var(--fv-radius-s); background: var(--fv-paper); color: var(--fv-ink); font-size: var(--fv-text-base); line-height: 1.4; transition: border-color .15s var(--fv-ease), box-shadow .15s var(--fv-ease); }
.fv-input[type="number"], .fv-input--num { text-align: right; }
.fv-input:hover, .fv-select:hover, .fv-textarea:hover { border-color: var(--fv-faint); }
.fv-input:focus, .fv-select:focus, .fv-textarea:focus { outline: none; border-color: var(--fv-blue); box-shadow: 0 0 0 3px rgba(45, 59, 224, .18); }
.fv-input[aria-invalid="true"], .fv-select[aria-invalid="true"], .fv-textarea[aria-invalid="true"] { border-color: var(--fv-critical); }
.fv-textarea { min-height: 6rem; resize: vertical; }
.fv-select { appearance: none; padding-right: 2rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235b606a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; }
.fv-input-unit { display: flex; align-items: stretch; }
.fv-input-unit .fv-input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.fv-input-unit > span { display: inline-flex; align-items: center; padding: 0 0.7rem; border: 1px solid var(--fv-line-strong); border-left: 0; border-radius: 0 var(--fv-radius-s) var(--fv-radius-s) 0; background: var(--fv-canvas); color: var(--fv-slate); font-size: var(--fv-text-sm); white-space: nowrap; }
.fv-check { display: inline-flex; align-items: center; gap: var(--fv-s2); font-size: var(--fv-text-sm); cursor: pointer; }
.fv-check input { width: 1.05rem; height: 1.05rem; accent-color: var(--fv-blue); margin: 0; }
input[type="range"].fv-range { width: 100%; accent-color: var(--fv-blue); }

/* Segmented control: radios inside a fieldset or a group of buttons with aria-pressed. */
.fv-segmented { display: inline-flex; padding: 3px; gap: 2px; background: var(--fv-canvas-2); border-radius: calc(var(--fv-radius-s) + 3px); border: 0; margin: 0; min-width: 0; max-width: 100%; overflow-x: auto; }
.fv-segmented input { position: absolute; opacity: 0; pointer-events: none; }
.fv-segmented label, .fv-segmented button { display: inline-flex; align-items: center; min-height: calc(var(--fv-control-h) - 6px); padding: 0 0.85rem; border: 0; border-radius: var(--fv-radius-s); background: transparent; color: var(--fv-slate); font-size: var(--fv-text-sm); font-weight: 550; cursor: pointer; white-space: nowrap; }
.fv-segmented input:checked + label, .fv-segmented button[aria-pressed="true"] { background: var(--fv-paper); color: var(--fv-ink); box-shadow: 0 1px 2px rgba(20, 20, 22, .1), 0 0 0 1px rgba(20, 20, 22, .04); }
.fv-segmented input:focus-visible + label { outline: 2px solid var(--fv-blue); outline-offset: 1px; }

/* ---------- Data ---------- */
.fv-table-wrap { overflow-x: auto; border: 1px solid var(--fv-line); border-radius: var(--fv-radius); -webkit-overflow-scrolling: touch; }
.fv-table { width: 100%; border-collapse: collapse; font-size: var(--fv-text-sm); }
.fv-table th, .fv-table td { padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--fv-line); text-align: left; vertical-align: middle; }
.fv-table thead th { background: var(--fv-canvas); color: var(--fv-slate); font-weight: 550; font-size: var(--fv-text-xs); white-space: nowrap; position: sticky; top: 0; }
.fv-table tbody tr:last-child td, .fv-table tbody tr:last-child th { border-bottom: 0; }
.fv-table tbody tr:hover { background: #fafbfc; }
.fv-table .num { text-align: right; white-space: nowrap; }
.fv-table tbody th { font-weight: 550; white-space: nowrap; }
.fv-table tfoot td, .fv-table tfoot th { font-weight: 600; background: var(--fv-canvas); border-top: 1px solid var(--fv-line-strong); border-bottom: 0; }
.fv-table .fv-input { min-height: 2.1rem; padding: 0.25rem 0.5rem; }
.fv-table--compact th, .fv-table--compact td { padding: 0.4rem 0.6rem; }

.fv-tag { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.55rem; border-radius: 999px; background: var(--fv-canvas-2); color: var(--fv-ink-2); font-size: var(--fv-text-xs); font-weight: 550; line-height: 1.5; white-space: nowrap; }
.fv-tag--blue { background: var(--fv-blue-wash); color: var(--fv-blue-hover); }
.fv-tag--positive { background: var(--fv-positive-wash); color: var(--fv-positive); }
.fv-tag--caution { background: var(--fv-caution-wash); color: var(--fv-caution); }
.fv-tag--critical { background: var(--fv-critical-wash); color: var(--fv-critical); }

.fv-notice { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--fv-s3); padding: var(--fv-s3) var(--fv-s4); border-radius: var(--fv-radius-s); background: var(--fv-canvas); color: var(--fv-ink-2); font-size: var(--fv-text-sm); }
.fv-notice::before { content: ""; width: 3px; border-radius: 2px; background: var(--fv-faint); }
.fv-notice--info::before { background: var(--fv-blue); }
.fv-notice--positive { background: var(--fv-positive-wash); } .fv-notice--positive::before { background: var(--fv-positive); }
.fv-notice--caution { background: var(--fv-caution-wash); } .fv-notice--caution::before { background: var(--fv-caution); }
.fv-notice--critical { background: var(--fv-critical-wash); } .fv-notice--critical::before { background: var(--fv-critical); }

.fv-list { list-style: none; padding: 0; margin: 0; border: 1px solid var(--fv-line); border-radius: var(--fv-radius); }
.fv-list > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--fv-s2) var(--fv-s4); padding: 0.75rem var(--fv-s4); border-bottom: 1px solid var(--fv-line); max-width: none; }
.fv-list > li:last-child { border-bottom: 0; }

.fv-dl { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 0.5rem var(--fv-s5); font-size: var(--fv-text-sm); }
.fv-dl dt { color: var(--fv-slate); }
.fv-dl dd { color: var(--fv-ink); }

/* Progress through a real sequence (only when the steps are a sequence). */
.fv-steps { display: flex; gap: var(--fv-s1); list-style: none; padding: 0; margin: 0; counter-reset: fv-step; }
.fv-steps > li { flex: 1; min-width: 0; padding-top: var(--fv-s2); border-top: 3px solid var(--fv-line); color: var(--fv-slate); font-size: var(--fv-text-xs); font-weight: 550; }
.fv-steps > li[aria-current="step"] { border-color: var(--fv-blue); color: var(--fv-ink); }
.fv-steps > li[data-done] { border-color: var(--fv-ink); color: var(--fv-ink-2); }

/* Charts drawn by the application (SVG): the frame's type and greys, so every chart reads as one system. */
.fv-chart { width: 100%; height: auto; overflow: visible; font-family: var(--fv-sans); }
.fv-chart text { font-size: 12px; fill: var(--fv-slate); }
.fv-chart .fv-chart__grid { stroke: var(--fv-data-grid); stroke-width: 1; }
.fv-chart .fv-chart__axis { stroke: var(--fv-line-strong); stroke-width: 1; }
.fv-chart .fv-chart__limit { stroke: var(--fv-ink); stroke-width: 1.5; stroke-dasharray: 4 4; }
.fv-chart .fv-chart__label { fill: var(--fv-ink); font-weight: 600; }
.fv-legend { display: flex; flex-wrap: wrap; gap: var(--fv-s2) var(--fv-s4); list-style: none; padding: 0; margin: 0; font-size: var(--fv-text-xs); color: var(--fv-slate); }
.fv-legend li { display: inline-flex; align-items: center; gap: 0.4rem; }
.fv-legend i { width: 10px; height: 10px; border-radius: 2px; background: var(--fv-swatch, var(--fv-data-1)); }

/* ---------- Conversation in an engagement ---------- */
.fv-thread { display: flex; flex-direction: column; gap: var(--fv-s3); list-style: none; padding: 0; margin: 0; }
.fv-message { max-width: min(36rem, 88%); padding: var(--fv-s3) var(--fv-s4); border-radius: var(--fv-radius); background: var(--fv-canvas); font-size: var(--fv-text-sm); }
.fv-message[data-from="counterparty"] { align-self: flex-end; background: var(--fv-blue-wash); }
.fv-message__meta { display: block; margin-bottom: 0.2rem; color: var(--fv-slate); font-size: var(--fv-text-xs); }
.fv-message p { max-width: none; }

/* Empty and waiting states */
.fv-empty { display: grid; justify-items: start; gap: var(--fv-s3); padding: var(--fv-s6); border: 1px dashed var(--fv-line-strong); border-radius: var(--fv-radius); color: var(--fv-slate); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; } }
@media print { .fv-header, .fv-demo, .fv-footer, .fv-skip { display: none; } .fv-main { padding: 0; max-width: none; } }