@localix-ai/flowdown 0.0.0-stage → 0.5.1

package/dist/styles.css

@@ -0,0 +1,1362 @@
+/* flowdown styles. Import once: `import "@localix-ai/flowdown/styles.css"`. */
+/* tokens.css */
+/*
+ * flowdown tokens. Every colour, font and radius the renderer draws with is one of these,
+ * so a page restyles the whole of it by setting them:
+ *
+ *   .flowdown { --fd-fg: var(--foreground); --fd-bg: var(--background); }
+ *
+ * The tokens sit at zero specificity (`:where`), so any rule that sets them wins. The rest of the
+ * package is scoped under `.flowdown`: a page restyles an element with a selector that starts
+ * there too. It is not in a cascade layer on purpose: a page's own `button` or `ul` reset, in no
+ * layer, would then win over the tabs and the lists.
+ * Light and dark are one list, written with `light-dark()`: the renderer follows the colour scheme
+ * of the page around it (`color-scheme: dark`, a `.dark` class or `data-theme="dark"` on an
+ * ancestor or on the root itself), and a page that has no dark mode stays light.
+ */
+:where(.flowdown) {
+  /* Text, from the body copy to the quietest annotation. */
+  --fd-fg: light-dark(#1f2328, #e6edf3);
+  --fd-fg-soft: light-dark(#4b535d, #b1bac4);
+  --fd-fg-faint: light-dark(#656d76, #8b949e);
+  /* The ground the Markdown sits on: diagrams mix their fills over it. Set it to your page's. */
+  --fd-bg: light-dark(#ffffff, #0d1117);
+  /* What shows through --fd-bg when it is translucent (a glass panel): the opaque colour under it.
+     Diagrams lay the ground over it once. Unset, white. */
+  --fd-border: light-dark(#d0d7de, #30363d);
+  --fd-border-subtle: light-dark(#e6e9ed, #21262d);
+  --fd-border-strong: light-dark(#afb8c1, #484f58);
+  /* A panel (a callout, a figure, a stat): the text colour at a few percent, right on any ground. */
+  --fd-veil: color-mix(in oklab, var(--fd-fg) 4.5%, transparent);
+  --fd-veil-strong: color-mix(in oklab, var(--fd-fg) 8%, transparent);
+  --fd-link: var(--fd-fg);
+  --fd-focus: light-dark(#0969da, #4493f8);
+
+  /* Status hues: the callouts' glyphs and the pros/cons marks, never a fill. */
+  --fd-info: light-dark(#0969da, #4493f8);
+  --fd-success: light-dark(#1a7f37, #3fb950);
+  --fd-important: light-dark(#8250df, #ab7df8);
+  --fd-warning: light-dark(#9a6700, #d29922);
+  --fd-danger: light-dark(#cf222e, #f85149);
+
+  /* Diagram series, in order. */
+  --fd-chart-1: light-dark(#0969da, #4493f8);
+  --fd-chart-2: light-dark(#1a7f37, #3fb950);
+  --fd-chart-3: light-dark(#bc4c00, #f0883e);
+  --fd-chart-4: light-dark(#8250df, #ab7df8);
+  --fd-chart-5: light-dark(#bf3989, #db61a2);
+  --fd-chart-6: light-dark(#1b7c83, #39c5cf);
+  --fd-chart-7: light-dark(#9a6700, #d29922);
+  --fd-chart-8: light-dark(#57606a, #8b949e);
+
+  /* Code: the block's ground and the highlighter's hues. */
+  --fd-code-bg: var(--fd-veil);
+  --fd-code-fg: var(--fd-fg);
+  --fd-code-comment: var(--fd-fg-faint);
+  --fd-code-keyword: light-dark(#cf222e, #ff7b72);
+  --fd-code-string: light-dark(#0a3069, #a5d6ff);
+  --fd-code-number: light-dark(#0550ae, #79c0ff);
+  --fd-code-function: light-dark(#8250df, #d2a8ff);
+  --fd-code-type: light-dark(#953800, #ffa657);
+  --fd-code-tag: light-dark(#116329, #7ee787);
+
+  --fd-font-heading: inherit;
+  --fd-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+  --fd-radius: 0.75rem;
+  --fd-radius-small: 0.375rem;
+  --fd-duration: 120ms;
+  /* What opens, turns or arrives: slower, and easing out so it settles instead of stopping. */
+  --fd-duration-slow: 200ms;
+  --fd-ease: cubic-bezier(0.2, 0, 0, 1);
+}
+
+/*
+ * A bundler that builds for browsers older than `light-dark()` (Vite 8 does, with Lightning CSS)
+ * rewrites each colour above as `var(--lightningcss-light, …) var(--lightningcss-dark, …)` and
+ * sets that pair only where the CSS it reads declares `color-scheme`. On a page that declares
+ * none, both fallbacks applied and every colour was invalid. This makes light the default there,
+ * as it is for `light-dark()` itself; any `color-scheme` the bundler does read still wins.
+ */
+:where(:root) {
+  --lightningcss-dark: ;
+}
+
+:where(.dark, [data-theme='dark']) :where(.flowdown),
+:where(.flowdown[data-theme='dark']) {
+  color-scheme: dark;
+}
+:where(.light, [data-theme='light']) :where(.flowdown),
+:where(.flowdown[data-theme='light']) {
+  color-scheme: light;
+}
+
+/* markdown.css */
+/* ─── Prose: GitHub Markdown, set for reading inside an interface ─── */
+.flowdown {
+  width: 100%;
+  color: var(--fd-fg);
+  overflow-wrap: anywhere;
+}
+.flowdown > :first-child {
+  margin-top: 0;
+}
+.flowdown > :last-child {
+  margin-bottom: 0;
+}
+.flowdown p,
+.flowdown ul,
+.flowdown ol,
+.flowdown blockquote,
+.flowdown table {
+  margin: 0.65rem 0;
+}
+/* A heading belongs to the text BELOW it: more space above than under, so a section reads as
+   one group instead of a title floating between two. The scale is a chat reply's, not a page's —
+   a 1.5rem h1 inside a message outweighed everything around it, the header of the message
+   included. `balance` keeps a two-line heading from ending on one orphaned word. */
+.flowdown h1,
+.flowdown h2,
+.flowdown h3,
+.flowdown h4,
+.flowdown h5,
+.flowdown h6 {
+  margin: 1.5em 0 0.45em;
+  font-family: var(--fd-font-heading);
+  font-weight: 600;
+  line-height: 1.3;
+  letter-spacing: -0.015em;
+  text-wrap: balance;
+}
+.flowdown :is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6) {
+  margin-top: 0.6em;
+}
+/* An author's section number (`## 1.2 Title`): the outline position, set
+   quieter than the title it precedes. */
+.flowdown .fd-section-number {
+  margin-right: 0.45em;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  color: var(--fd-fg-faint);
+}
+.flowdown h1 {
+  font-size: 1.32rem;
+}
+.flowdown h2 {
+  font-size: 1.16rem;
+}
+.flowdown h3 {
+  font-size: 1.03rem;
+}
+/* Paragraphs avoid a lone last word. Not on the tail of a streaming reply: that paragraph is
+   the one still growing, and re-balancing its last lines on every token is a visible wobble. */
+.flowdown :is(p, li) {
+  text-wrap: pretty;
+}
+.flowdown[data-streaming] > :last-child,
+.flowdown[data-streaming] > :last-child :is(p, li, h1, h2, h3, h4, h5, h6) {
+  text-wrap: wrap;
+}
+/* Bold marks what a reader scans for; Inter's 700 turned a bolded phrase into a shout. */
+.flowdown :is(strong, b) {
+  font-weight: 600;
+}
+/* Nested headings (`####`+): consistent with h1–h3, just smaller, instead of
+   browser defaults (no heading font, awkward margins). */
+.flowdown h4 {
+  font-size: 1rem;
+}
+.flowdown h5 {
+  font-size: 0.9rem;
+}
+.flowdown h6 {
+  font-size: 0.85rem;
+  color: var(--fd-fg-soft);
+}
+/* Tailwind's preflight strips every list marker, and nothing here gave them back, so a numbered
+   answer rendered as unnumbered lines and a bulleted one as a loose stack of sentences. */
+.flowdown ul,
+.flowdown ol {
+  padding-left: 1.35rem;
+}
+.flowdown ul {
+  list-style: disc;
+}
+.flowdown ol {
+  list-style: decimal;
+}
+.flowdown :is(ul, ol) ul {
+  list-style: circle;
+}
+.flowdown li + li {
+  margin-top: 0.25rem;
+}
+/* Bullets and numbers are scaffolding: quieter than the text they carry, and numbers set in
+   tabular figures so a list past nine keeps one column. */
+.flowdown li::marker {
+  color: var(--fd-fg-faint);
+}
+.flowdown ol > li::marker {
+  font-variant-numeric: tabular-nums;
+}
+.flowdown li > :is(ul, ol) {
+  margin: 0.25rem 0;
+}
+/* Section divider (`---`): a thin token-colored rule, not the browser's 3D inset. */
+.flowdown hr {
+  margin: 1.1rem 0;
+  border: 0;
+  border-top: 1px solid var(--fd-border);
+}
+/* Strikethrough (`~~text~~`) = removed/done — mute it so it reads as de-emphasized. */
+.flowdown del {
+  color: var(--fd-fg-soft);
+}
+/* A link is marked by a faint underline that firms up on hover: a full-strength line under
+   every reference striped a source-heavy reply. */
+.flowdown a {
+  color: var(--fd-link);
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-decoration-color: color-mix(in oklab, var(--fd-link) 35%, transparent);
+  text-underline-offset: 0.2em;
+  transition: text-decoration-color var(--fd-duration) ease;
+  /* A long bare URL as link text wraps instead of overflowing the bubble. */
+  overflow-wrap: anywhere;
+}
+.flowdown a:hover {
+  text-decoration-color: currentColor;
+}
+.flowdown :focus-visible {
+  outline: 2px solid var(--fd-focus);
+  outline-offset: 2px;
+  border-radius: var(--fd-radius-small);
+}
+.flowdown blockquote {
+  border-left: 2px solid var(--fd-border);
+  padding-left: 0.85rem;
+  color: var(--fd-fg-soft);
+}
+/* A quote's closing `— Author` line: set right, below the quotation, so
+   the source reads as a signature instead of one more line of the quote. */
+.flowdown blockquote > :has(+ .fd-quote-source) {
+  margin-bottom: 0;
+}
+.flowdown blockquote > .fd-quote-source {
+  margin-top: 0.3rem;
+  text-align: right;
+  font-size: 0.9em;
+  font-style: italic;
+  color: var(--fd-fg-faint);
+}
+.flowdown blockquote > .fd-quote-source::before {
+  content: '\2014\00a0';
+}
+
+/* ─── Callouts (`> [!NOTE]` … `> [!CAUTION]`) ───
+   Status on the glyph, never as a wash: the note itself is a veil —
+   the foreground at a few percent over whatever ground it sits on — so it is right in every
+   theme and under glass, and five of them in a reply read as asides rather than as banners.
+   The glyph hangs in its own column beside the first line; the text keeps the prose colour. */
+.flowdown .fd-callout {
+  --fd-callout: var(--fd-info);
+  display: grid;
+  grid-template-columns: 1rem minmax(0, 1fr);
+  column-gap: 0.7rem;
+  margin: 0.8rem 0;
+  border-radius: var(--fd-radius);
+  background: var(--fd-veil);
+  padding: 0.65rem 0.9rem;
+}
+.flowdown .fd-callout-icon {
+  width: 1rem;
+  height: 1rem;
+  /* Centre the glyph on the first line box, whatever the line height. */
+  margin-top: calc((1lh - 1rem) / 2);
+  color: var(--fd-callout);
+}
+.flowdown .fd-callout[data-callout='tip'] {
+  --fd-callout: var(--fd-success);
+}
+.flowdown .fd-callout[data-callout='important'] {
+  --fd-callout: var(--fd-important);
+}
+.flowdown .fd-callout[data-callout='warning'] {
+  --fd-callout: var(--fd-warning);
+}
+.flowdown .fd-callout[data-callout='caution'] {
+  --fd-callout: var(--fd-danger);
+}
+.flowdown .fd-callout-title {
+  margin-bottom: 0.15rem;
+  font-weight: 600;
+  color: var(--fd-fg);
+}
+/* The title and its text are one unit: no paragraph gap between them. */
+.flowdown .fd-callout-title + * {
+  margin-top: 0;
+}
+.flowdown .fd-callout-body > :first-child {
+  margin-top: 0;
+}
+.flowdown .fd-callout-body > :last-child {
+  margin-bottom: 0;
+}
+
+/* Steps, tabs, stats, pros/cons, file trees and checklists: `forms.css`. */
+
+/* ─── Figures (`![alt](src "Caption")` alone in a paragraph) ─── */
+/* A figure is set like one in a document: centred, and bounded to a share of the reply so a
+   photo illustrates the text instead of becoming the whole message. */
+.flowdown .fd-figure {
+  margin: 1.1rem 0;
+  text-align: center;
+}
+.flowdown .fd-figure img {
+  display: block;
+  margin: 0 auto;
+  max-width: min(100%, 34rem);
+  max-height: 20rem;
+  object-fit: contain;
+  border-radius: var(--fd-radius);
+}
+.flowdown .fd-figure > figcaption {
+  margin-top: 0.45rem;
+  text-align: center;
+  font-size: 0.86em;
+  font-style: normal;
+  color: var(--fd-fg-faint);
+}
+
+/* ─── Diagrams (```mermaid) ───
+   A figure, not a panel: no frame, fill or header, so a diagram sits in the reply the way an
+   image does. Its colours come from the tokens (`mermaid/look.ts`); only shape is here. Its
+   toolbar and the enlarged viewer are in `diagram.css`. */
+.flowdown .fd-diagram {
+  margin: 0.8rem 0;
+}
+.flowdown .fd-diagram-canvas {
+  display: flex;
+  justify-content: center;
+  overflow-x: auto;
+  padding: 0.5rem 0;
+}
+.flowdown .fd-diagram-canvas svg {
+  max-width: 100%;
+  height: auto;
+}
+/* Nodes take the control radius instead of Mermaid's square corners. */
+.flowdown .fd-diagram-canvas :is(.node rect.label-container, rect.actor, rect.note) {
+  rx: 6px;
+  ry: 6px;
+}
+/* The parser's message under a source that could not be drawn, tucked up to its code block. */
+.flowdown .fd-diagram-note {
+  margin-top: 0.35rem;
+  font-size: 0.85em;
+  color: var(--fd-fg-faint);
+}
+/* Inline code: wherever it is not a block's (in text, in bold or a link, in a form's own text). */
+.flowdown :where(:not(pre)) > code:where(:not(.math-inline, .math-display)) {
+  border-radius: var(--fd-radius-small);
+  font-family: var(--fd-font-mono);
+  background: var(--fd-veil-strong);
+  padding: 0.1rem 0.3rem;
+  font-size: 0.92em;
+  /* Long inline tokens (deep paths, hashes, URLs) wrap instead of overflowing. */
+  overflow-wrap: anywhere;
+}
+/* Tables are ruled, not gridded (the typesetting "booktabs" convention): a rule above the header,
+   a rule under it, hairlines between rows and a rule to close. The full cell grid with a filled
+   header row boxed every value in and was the loudest thing in a reply; horizontal rules alone
+   carry the rows, and the eye reads the columns from their alignment. */
+.flowdown table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.9em;
+  font-variant-numeric: tabular-nums;
+}
+/* Wide tables scroll inside their own box instead of widening the page. */
+.flowdown .fd-table {
+  max-width: 100%;
+  margin: 0.65rem 0;
+  overflow-x: auto;
+}
+.flowdown .fd-table table {
+  width: max-content;
+  min-width: 100%;
+  margin: 0;
+}
+.flowdown th,
+.flowdown td {
+  border-bottom: 1px solid var(--fd-border-subtle);
+  padding: 0.5rem 0.9rem;
+  text-align: left;
+  vertical-align: top;
+  /* Long cell values (URLs/paths) wrap instead of overflowing the table. */
+  overflow-wrap: anywhere;
+}
+/* The outer columns align with the prose around the table instead of an invisible cell wall. */
+.flowdown :is(th, td):first-child {
+  padding-left: 0;
+}
+.flowdown :is(th, td):last-child {
+  padding-right: 0;
+}
+.flowdown th {
+  border-top: 1px solid var(--fd-border);
+  border-bottom-color: var(--fd-border);
+  font-weight: 600;
+  color: var(--fd-fg-soft);
+}
+.flowdown tbody tr:last-child td {
+  border-bottom-color: var(--fd-border);
+}
+.flowdown img {
+  max-width: 100%;
+  /* Inline images (badges, shields, emoji-style icons) sit on the text baseline
+     at their natural size — no block layout or large radius, so a row of badges
+     flows like on GitHub instead of stacking as full-width blobs. */
+  vertical-align: middle;
+}
+/* A lone image that is its paragraph's only direct child = a content figure
+   (screenshot, diagram). Badges live inside <a>, so they never match this. */
+.flowdown p > img:only-child {
+  display: block;
+  /* Cap inline height so a tall/narrow image doesn't dominate the message. */
+  max-height: 28rem;
+  border-radius: var(--fd-radius);
+}
+
+/* Footnotes. The reference in the text is a raised number, quiet and not underlined: the line
+   under a superscript sat lower and wider than its digit. `line-height: 0` keeps it from pushing
+   its line apart from the others. */
+.flowdown sup,
+.flowdown sub {
+  line-height: 0;
+}
+.flowdown [data-footnote-ref],
+.flowdown [data-footnote-backref] {
+  text-decoration: none;
+  color: var(--fd-fg-soft);
+}
+/* The notes themselves close the reply under a rule, smaller and quieter than the text they
+   annotate. Their heading names the section for a screen reader and is not drawn: out of the
+   flow and clipped to nothing, which leaves it in the accessibility tree. */
+.flowdown [data-footnotes] {
+  margin-top: 1.5rem;
+  border-top: 1px solid var(--fd-border-subtle);
+  padding-top: 0.65rem;
+  font-size: 0.9em;
+  color: var(--fd-fg-soft);
+}
+.flowdown .sr-only {
+  position: absolute;
+  clip-path: inset(50%);
+}
+
+/* A key (`<kbd>⌘</kbd>`): a keycap, raised by a heavier bottom edge. */
+.flowdown kbd {
+  display: inline-block;
+  min-width: 1.5em;
+  box-sizing: border-box;
+  border: 1px solid var(--fd-border);
+  border-bottom-width: 2px;
+  border-radius: var(--fd-radius-small);
+  padding: 0.05em 0.4em;
+  background: var(--fd-veil);
+  font-family: var(--fd-font-mono);
+  font-size: 0.82em;
+  line-height: 1.35;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: 0.06em;
+}
+
+/* ─── A reply arriving (`<Markdown streaming>`) ───
+   A block that starts (a paragraph, then the panel of a code block or a table under it) comes in
+   over a short fade instead of popping onto the page. Only the newest block is ever animated, and
+   only once: the blocks above it are finished and do not move. It starts faint, not invisible:
+   a block that changes kind as it grows (a line that turns out to be a table) is drawn anew, and
+   must not blink out on the way. */
+@keyframes fd-arrive {
+  from {
+    opacity: 0.3;
+  }
+}
+.flowdown[data-streaming] > :last-child {
+  animation: fd-arrive var(--fd-duration-slow) ease-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .flowdown[data-streaming] > :last-child {
+    animation: none;
+  }
+}
+
+/* forms.css */
+/* ─── Answer forms: the dialect's structured shapes (`dialect.ts`) ───
+   Steps, tabs, headline figures, the case for and against, file trees and checklists. Each is
+   plain Markdown underneath; these rules are what make it read as the shape it is. Nothing here
+   is a status except the pros/cons glyphs, so the neutral parts take the text tiers and the
+   veil the callouts use (the foreground at a few percent), right in every theme and under glass. */
+
+/* ─── Steps (`> [!STEPS]` over a list) ───
+   A sequence read in order: each step's number in a round mark, a line down to the next one, the
+   step's title, its "when" quieter beneath, then its text. */
+.flowdown .fd-steps-title,
+.flowdown .fd-stats-title,
+.flowdown .fd-sources-title,
+.flowdown .fd-tabs-title {
+  margin-bottom: 0.35rem;
+  font-weight: 600;
+  color: var(--fd-fg);
+}
+.flowdown .fd-steps-title + .fd-steps,
+.flowdown .fd-stats-title + .fd-stats,
+.flowdown .fd-sources-title + .fd-sources,
+.flowdown .fd-tabs-title + .fd-tabs {
+  margin-top: 0;
+}
+.flowdown ol.fd-steps,
+.flowdown ul.fd-steps {
+  list-style: none;
+  margin: 0.8rem 0;
+  padding-left: 0;
+}
+.flowdown .fd-steps > li {
+  --fd-mark: 1.5rem;
+  position: relative;
+  margin: 0;
+  padding: 0 0 1rem 2.25rem;
+}
+.flowdown .fd-steps > li:last-child {
+  padding-bottom: 0;
+}
+/* A numbered mark (a step's, a source's): a round badge on the row's first line. In `line-height`,
+   `lh` is the parent's, so the mark takes the row's line whatever its own font size and the page's
+   leading (a number, a length, `normal`), and the `1lh` in `top` centres it on that line exactly.
+   That line is taller than a small mark: the track is centred, or the number would sink. */
+.flowdown .fd-steps > li::before,
+.flowdown .fd-sources > li::before {
+  position: absolute;
+  left: 0;
+  top: calc((1lh - var(--fd-mark)) / 2);
+  display: grid;
+  place-content: center;
+  min-width: var(--fd-mark);
+  height: var(--fd-mark);
+  border-radius: 9999px;
+  background: var(--fd-veil-strong);
+  font-size: 0.72em;
+  font-weight: 600;
+  line-height: 1lh;
+  color: var(--fd-fg-soft);
+}
+/* A step's mark is its place in the list, the one `start` and `value` give it; steps in no order
+   get a dot. */
+.flowdown .fd-steps > li::before {
+  content: counter(list-item);
+}
+.flowdown ul.fd-steps > li::before {
+  content: '●';
+}
+/* The line runs from this mark to the next one, the same gap at both ends; the last step has none
+   to reach. Its box starts at this mark's bottom edge and ends at the next mark's top, and the
+   gaps are its padding: a browser snaps each box to whole pixels on its own, and a line placed by
+   its own offsets landed a pixel closer to one mark than to the other. */
+.flowdown .fd-steps > li:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  left: calc(var(--fd-mark) / 2 - 1px);
+  top: calc((1lh + var(--fd-mark)) / 2);
+  bottom: calc((var(--fd-mark) - 1lh) / 2);
+  width: 2px;
+  padding: 0.25rem 0;
+  background: var(--fd-border) content-box;
+}
+.flowdown .fd-step-head {
+  margin: 0;
+}
+.flowdown .fd-step-title {
+  font-weight: 600;
+  color: var(--fd-fg);
+}
+.flowdown .fd-step-meta {
+  display: block;
+  margin-top: 0.1rem;
+  font-size: 0.85em;
+  font-style: italic;
+  color: var(--fd-fg-faint);
+}
+/* The step's text sits one small, fixed gap under its title whatever it starts with: a block's
+   own top margin (a code block's, a list's) would otherwise set the gap, a different one per step. */
+/* A block right under the title (a code block, a table) belongs to its step: it sits nearer its
+   own title than the next step's, whatever margin the block has elsewhere. */
+.flowdown .fd-step-head + :not(.fd-step-body) {
+  margin-top: 0.5rem;
+}
+.flowdown .fd-step-body {
+  margin-top: 0.15rem;
+}
+.flowdown .fd-step-body > :first-child {
+  margin-top: 0;
+}
+.flowdown .fd-steps > li > :last-child,
+.flowdown .fd-step-body > :last-child {
+  margin-bottom: 0;
+}
+
+/* ─── Tabs (`> [!TABS]` with a heading per variant) ───
+   The variants share one bordered panel, the tab row on top: the selected tab is marked by its
+   text colour and a rule under it, the rest are quiet. */
+.flowdown .fd-tabs {
+  margin: 0.8rem 0;
+  overflow: hidden;
+  border: 1px solid var(--fd-border);
+  border-radius: var(--fd-radius);
+}
+.flowdown .fd-tab-list {
+  display: flex;
+  gap: 0.25rem;
+  overflow-x: auto;
+  border-bottom: 1px solid var(--fd-border);
+  /* With a tab's own 0.5rem, its label starts where a code block's text does (0.9rem). */
+  padding: 0 0.4rem;
+  scrollbar-width: none;
+}
+.flowdown .fd-tab {
+  position: relative;
+  flex: none;
+  margin: 0;
+  border: 0;
+  background: none;
+  padding: 0.55rem 0.5rem;
+  font: inherit;
+  font-size: 0.9em;
+  font-weight: 500;
+  color: var(--fd-fg-faint);
+  cursor: pointer;
+  transition: color var(--fd-duration) ease;
+}
+.flowdown .fd-tab:hover {
+  color: var(--fd-fg-soft);
+}
+.flowdown .fd-tab[aria-selected='true'] {
+  color: var(--fd-fg);
+}
+.flowdown .fd-tab[aria-selected='true']::after {
+  content: '';
+  position: absolute;
+  inset: auto 0.5rem -1px;
+  border-bottom: 2px solid var(--fd-fg);
+}
+.flowdown .fd-tab:focus-visible {
+  outline-offset: -2px;
+}
+.flowdown .fd-tab-panel {
+  padding: 0.6rem 0.9rem 0.75rem;
+}
+.flowdown .fd-tab-panel > :first-child {
+  margin-top: 0;
+}
+.flowdown .fd-tab-panel > :last-child {
+  margin-bottom: 0;
+}
+/* A variant that is one code block (install commands per system) is that block, edge to edge
+   under the tab row: a rounded panel inside the bordered one was a box in a box. */
+.flowdown .fd-tab-panel:has(> .fd-code:only-child) {
+  padding: 0;
+}
+.flowdown .fd-tab-panel > .fd-code:only-child {
+  border-radius: 0;
+}
+
+/* ─── Headline figures (`> [!STATS]` over `- **value** label`) ───
+   A row of figures that wraps: the value large, its label quiet under it. */
+.flowdown ul.fd-stats,
+.flowdown ol.fd-stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(8.5rem, 100%), 1fr));
+  gap: 0.5rem;
+  margin: 0.8rem 0;
+  padding: 0;
+  list-style: none;
+}
+.flowdown .fd-stats > li {
+  min-width: 0;
+  margin: 0;
+  border-radius: var(--fd-radius);
+  background: var(--fd-veil);
+  padding: 0.6rem 0.8rem;
+}
+.flowdown .fd-stat-value {
+  display: block;
+  font-size: 1.35em;
+  font-weight: 600;
+  line-height: 1.2;
+  font-variant-numeric: tabular-nums;
+  color: var(--fd-fg);
+}
+.flowdown .fd-stat-label {
+  display: block;
+  margin-top: 0.15rem;
+  font-size: 0.85em;
+  font-style: normal;
+  color: var(--fd-fg-soft);
+}
+
+/* ─── The case for and against (`> [!PROS]` / `> [!CONS]`) ───
+   A point per row with its glyph in the status hue — the one status in these forms. Written one
+   after the other, the two sit side by side, and stack where the reply is narrow. */
+.flowdown .fd-verdicts {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
+  gap: 0.5rem;
+  margin: 0.8rem 0;
+}
+.flowdown .fd-verdict {
+  min-width: 0;
+  --fd-verdict: var(--fd-success);
+  margin: 0.8rem 0;
+  border-radius: var(--fd-radius);
+  background: var(--fd-veil);
+  padding: 0.6rem 0.9rem;
+}
+.flowdown .fd-verdicts > .fd-verdict {
+  margin: 0;
+}
+.flowdown .fd-verdict[data-verdict='cons'] {
+  --fd-verdict: var(--fd-danger);
+}
+.flowdown .fd-verdict-title {
+  margin: 0 0 0.3rem;
+  font-weight: 600;
+  color: var(--fd-fg);
+}
+.flowdown ul.fd-verdict-list,
+.flowdown ol.fd-verdict-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.flowdown .fd-verdict-list > li {
+  position: relative;
+  margin: 0.2rem 0;
+  padding-left: 1.35rem;
+}
+.flowdown .fd-verdict-list > li::before {
+  position: absolute;
+  left: 0;
+  font-weight: 700;
+  color: var(--fd-verdict);
+}
+.flowdown .fd-verdict[data-verdict='pros'] .fd-verdict-list > li::before {
+  content: '✓';
+}
+.flowdown .fd-verdict[data-verdict='cons'] .fd-verdict-list > li::before {
+  content: '✕';
+}
+
+/* ─── A folded section (`> [!DETAILS] Title`, or a `<details>` written as HTML) ───
+   An outlined row with its title and a chevron that turns when it opens. Closed, it is one line;
+   open, the content sits under a hairline, inset by the panel's own padding, so text written
+   straight after the summary lines up with a paragraph or a code block beside it. */
+.flowdown details {
+  --fd-details-pad: 0.9rem;
+  margin: 0.8rem 0;
+  border: 1px solid var(--fd-border-subtle);
+  border-radius: var(--fd-radius);
+  padding: 0 var(--fd-details-pad);
+  color: var(--fd-fg-soft);
+}
+.flowdown details > summary {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  margin: 0 calc(-1 * var(--fd-details-pad));
+  border-radius: calc(var(--fd-radius) - 1px);
+  padding: 0.6rem var(--fd-details-pad);
+  font-weight: 600;
+  line-height: 1.4;
+  color: var(--fd-fg);
+  cursor: pointer;
+  list-style: none;
+  user-select: none;
+  transition: background-color var(--fd-duration) ease;
+}
+.flowdown details > summary::-webkit-details-marker {
+  display: none;
+}
+.flowdown details > summary::before {
+  content: '';
+  flex: none;
+  width: 0.4rem;
+  height: 0.4rem;
+  margin: 0 0.15rem;
+  border: solid var(--fd-fg-faint);
+  border-width: 0 1.5px 1.5px 0;
+  transform: translateX(-0.1rem) rotate(-45deg);
+  transition:
+    transform var(--fd-duration-slow) var(--fd-ease),
+    border-color var(--fd-duration) ease;
+}
+.flowdown details[open] > summary::before {
+  transform: translateY(-0.1rem) rotate(45deg);
+}
+.flowdown details > summary:hover {
+  background: var(--fd-veil);
+}
+.flowdown details > summary:hover::before {
+  border-color: var(--fd-fg);
+}
+.flowdown details > summary:focus-visible {
+  outline-offset: -2px;
+}
+.flowdown details[open] {
+  padding-bottom: 0.8rem;
+}
+.flowdown details[open] > summary {
+  margin-bottom: 0.8rem;
+  border-bottom: 1px solid var(--fd-border-subtle);
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.flowdown details > summary + * {
+  margin-top: 0;
+}
+.flowdown details > :last-child:not(summary) {
+  margin-bottom: 0;
+}
+/* Opening is a short fade down from the title, not a pop. */
+@keyframes fd-unfold {
+  from {
+    opacity: 0;
+    transform: translateY(-0.2rem);
+  }
+}
+.flowdown details[open] > :not(summary) {
+  animation: fd-unfold var(--fd-duration-slow) var(--fd-ease);
+}
+@media (prefers-reduced-motion: reduce) {
+  .flowdown details[open] > :not(summary) {
+    animation: none;
+  }
+}
+
+/* ─── References (`> [!SOURCES]` over a list of links) ───
+   A numbered row per page: its title, the site quiet beside it, the author's note after. */
+.flowdown ul.fd-sources,
+.flowdown ol.fd-sources {
+  margin: 0.8rem 0;
+  padding: 0;
+  list-style: none;
+  counter-reset: fd-source;
+}
+.flowdown .fd-sources > li {
+  --fd-mark: 1.25rem;
+  position: relative;
+  margin: 0.45rem 0;
+  padding-left: 1.85rem;
+  counter-increment: fd-source;
+}
+/* The badge itself is the numbered mark the steps draw (above). */
+.flowdown .fd-sources > li::before {
+  content: counter(fd-source);
+}
+.flowdown .fd-source > a {
+  text-decoration: none;
+}
+.flowdown .fd-source > a:hover .fd-source-title {
+  text-decoration: underline;
+  text-underline-offset: 0.15em;
+}
+.flowdown .fd-source-title {
+  font-weight: 500;
+  color: var(--fd-fg);
+}
+.flowdown .fd-source-host {
+  margin-left: 0.5rem;
+  font-size: 0.85em;
+  font-style: normal;
+  font-weight: 400;
+  color: var(--fd-fg-faint);
+}
+.flowdown .fd-source-note {
+  display: block;
+  font-size: 0.9em;
+  font-style: normal;
+  color: var(--fd-fg-soft);
+}
+
+/* ─── File tree (a ```tree fence) ───
+   Rows in a monospace column, indented by depth with a guide per level; a folder folds. */
+.flowdown .fd-tree {
+  margin: 0.8rem 0;
+  font-family: var(--fd-font-mono);
+  font-size: 0.86em;
+  line-height: normal;
+}
+.flowdown .fd-tree-row {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  min-width: 0;
+  border-radius: var(--fd-radius-small);
+  padding: 0.2rem 0.4rem 0.2rem calc(0.4rem + var(--fd-tree-depth, 0) * 1.1rem + 1.15rem);
+  background-image: repeating-linear-gradient(
+    to right,
+    transparent 0 0.775rem,
+    var(--fd-border-subtle) 0.775rem calc(0.775rem + 1px),
+    transparent calc(0.775rem + 1px) 1.1rem
+  );
+  background-size: calc(var(--fd-tree-depth, 0) * 1.1rem) 100%;
+  background-repeat: no-repeat;
+  color: var(--fd-fg-soft);
+  cursor: default;
+}
+.flowdown .fd-tree-row[data-folder] {
+  padding-left: calc(0.4rem + var(--fd-tree-depth, 0) * 1.1rem);
+  color: var(--fd-fg);
+  cursor: pointer;
+}
+.flowdown .fd-tree-row:hover {
+  background-color: var(--fd-veil);
+}
+.flowdown .fd-tree-row:focus-visible {
+  outline-offset: -2px;
+}
+.flowdown .fd-tree-chevron,
+.flowdown .fd-tree-icon {
+  flex: none;
+  width: 0.95rem;
+  height: 0.95rem;
+  color: var(--fd-fg-faint);
+}
+.flowdown .fd-tree-chevron {
+  width: 0.75rem;
+  height: 0.75rem;
+  transition: transform var(--fd-duration) ease;
+}
+.flowdown .fd-tree-chevron[data-open] {
+  transform: rotate(90deg);
+}
+.flowdown .fd-tree-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.flowdown .fd-tree-comment {
+  overflow: hidden;
+  margin-left: 0.5rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: inherit;
+  color: var(--fd-fg-faint);
+}
+.flowdown .fd-tree-comment::before {
+  content: '# ';
+}
+
+/* ─── Checklists (GFM `- [ ] item`) ───
+   The box is drawn here, not by the browser: a native one differs per platform, sits off the
+   line, and has no quiet state. It stands in the margin, centred on the first line. */
+.flowdown ul.contains-task-list,
+.flowdown ol.contains-task-list {
+  padding-left: 0;
+  list-style: none;
+}
+.flowdown li.task-list-item {
+  position: relative;
+  padding-left: 1.6rem;
+}
+.flowdown li.task-list-item input[type='checkbox'] {
+  /* Anchor to the first line without making loose paragraphs and nested lists flex columns. */
+  position: absolute;
+  left: 0;
+  top: calc((1lh - 1rem) / 2);
+  /* The row's font, so `lh` above is the row's line and not a form control's. */
+  font: inherit;
+  box-sizing: border-box;
+  width: 1rem;
+  height: 1rem;
+  margin: 0;
+  appearance: none;
+  border: 1.5px solid var(--fd-border-strong);
+  border-radius: 0.3rem;
+  background: transparent;
+  transition:
+    background-color var(--fd-duration) ease,
+    border-color var(--fd-duration) ease;
+}
+.flowdown li.task-list-item input[type='checkbox']:checked {
+  border-color: var(--fd-fg-soft);
+  background-color: var(--fd-fg-soft);
+}
+/* The tick: two sides of a turned box, in the ground's colour. */
+.flowdown li.task-list-item input[type='checkbox']:checked::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 46%;
+  width: 0.25rem;
+  height: 0.5rem;
+  /* The opaque ground when the page's own is translucent (a glass panel). */
+  border: solid var(--fd-bg-solid, var(--fd-bg));
+  border-width: 0 1.75px 1.75px 0;
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+.flowdown li.task-list-item input[type='checkbox']:not(:disabled) {
+  cursor: pointer;
+}
+.flowdown li.task-list-item input[type='checkbox']:not(:disabled):hover {
+  border-color: var(--fd-fg-soft);
+}
+.flowdown li.task-list-item:has(> input:checked, > p:first-child > input:checked) {
+  color: var(--fd-fg-faint);
+  text-decoration: line-through;
+  text-decoration-color: color-mix(in oklab, var(--fd-fg) 30%, transparent);
+}
+/* A nested list keeps its own text: only the done item is struck, not what is under it. */
+.flowdown li.task-list-item:has(> input:checked) > :is(ul, ol) {
+  color: var(--fd-fg);
+  text-decoration: none;
+}
+
+/* code.css */
+/* ─── Code blocks (fenced code, `CodeBlock`) ───
+   A quiet panel: the language, a download and a copy button in a bar above the code, the code on
+   the veil.
+   No border, so a reply with several blocks does not read as a stack of boxes. */
+.flowdown .fd-code {
+  margin: 0.8rem 0;
+  border-radius: var(--fd-radius);
+  background: var(--fd-code-bg);
+}
+.flowdown .fd-code-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  min-height: 2rem;
+  padding: 0.25rem 0.35rem 0 0.9rem;
+  font-size: 0.78em;
+  color: var(--fd-fg-faint);
+}
+.flowdown .fd-code-language {
+  font-family: var(--fd-font-mono);
+  text-transform: lowercase;
+}
+/* The file a fence names: first in the bar, the language pushed to the copy button's side. */
+.flowdown .fd-code-title {
+  overflow: hidden;
+  min-width: 0;
+  margin-right: auto;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--fd-font-mono);
+  color: var(--fd-fg-soft);
+}
+.flowdown .fd-code-title + .fd-code-language {
+  flex: none;
+}
+.flowdown .fd-code-bar > .fd-code-language:first-child {
+  margin-right: auto;
+}
+/* With no language or title before them, the buttons still sit at the end of the bar. */
+.flowdown .fd-code-bar > .fd-code-download:first-child {
+  margin-left: auto;
+}
+.flowdown :is(.fd-code-copy, .fd-code-download) {
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  border: 0;
+  border-radius: var(--fd-radius-small);
+  background: none;
+  color: var(--fd-fg-faint);
+  cursor: pointer;
+  transition:
+    color var(--fd-duration) ease,
+    background-color var(--fd-duration) ease;
+}
+.flowdown .fd-code-download + .fd-code-copy {
+  margin-left: -0.3rem;
+}
+.flowdown :is(.fd-code-copy, .fd-code-download):hover {
+  background: var(--fd-veil-strong);
+  color: var(--fd-fg);
+}
+.flowdown .fd-code-copy[data-copied] {
+  color: var(--fd-success);
+}
+.flowdown :is(.fd-code-copy, .fd-code-download) svg {
+  width: 0.95rem;
+  height: 0.95rem;
+}
+/* A finger needs a 44 px target; a mouse keeps the small buttons. */
+@media (pointer: coarse) {
+  .flowdown :is(.fd-code-copy, .fd-code-download) {
+    width: 44px;
+    height: 44px;
+  }
+  .flowdown .fd-code-download + .fd-code-copy {
+    margin-left: 0;
+  }
+}
+.flowdown pre {
+  margin: 0;
+  overflow-x: auto;
+  padding: 0.25rem 0.9rem 0.8rem;
+  font-family: var(--fd-font-mono);
+  font-size: 0.86em;
+  line-height: 1.55;
+  color: var(--fd-code-fg);
+  tab-size: 2;
+}
+/* A <pre> outside a code block (a page's own, a diagram's source) takes the whole panel look. */
+.flowdown :not(.fd-code) > pre {
+  margin: 0.8rem 0;
+  border-radius: var(--fd-radius);
+  background: var(--fd-code-bg);
+  padding: 0.8rem 0.9rem;
+}
+.flowdown .fd-diagram > pre {
+  margin: 0;
+}
+.flowdown pre code {
+  font: inherit;
+  white-space: pre;
+}
+
+/* Highlighted code (`@localix-ai/flowdown/highlight`, or any highlighter that emits highlight.js classes). */
+.flowdown .hljs-comment,
+.flowdown .hljs-quote {
+  color: var(--fd-code-comment);
+  font-style: italic;
+}
+.flowdown :is(.hljs-keyword, .hljs-selector-tag, .hljs-doctag, .hljs-meta .hljs-keyword) {
+  color: var(--fd-code-keyword);
+}
+.flowdown :is(.hljs-string, .hljs-regexp, .hljs-meta .hljs-string) {
+  color: var(--fd-code-string);
+}
+.flowdown
+  :is(
+    .hljs-number,
+    .hljs-literal,
+    .hljs-variable,
+    .hljs-template-variable,
+    .hljs-attr,
+    .hljs-attribute,
+    .hljs-symbol,
+    .hljs-bullet
+  ) {
+  color: var(--fd-code-number);
+}
+.flowdown :is(.hljs-title, .hljs-title.function_, .hljs-section) {
+  color: var(--fd-code-function);
+}
+.flowdown :is(.hljs-type, .hljs-built_in, .hljs-title.class_, .hljs-params, .hljs-meta) {
+  color: var(--fd-code-type);
+}
+.flowdown :is(.hljs-tag, .hljs-name, .hljs-selector-id, .hljs-selector-class) {
+  color: var(--fd-code-tag);
+}
+/* A diff: the added and the removed lines in the status hues, the hunk header quiet. */
+.flowdown .hljs-addition {
+  color: var(--fd-success);
+}
+.flowdown .hljs-deletion {
+  color: var(--fd-danger);
+}
+.flowdown .language-diff :is(.hljs-meta, .hljs-comment) {
+  color: var(--fd-fg-faint);
+  font-style: normal;
+}
+.flowdown .hljs-emphasis {
+  font-style: italic;
+}
+.flowdown .hljs-strong {
+  font-weight: 600;
+}
+
+/* ─── The caret after a streaming reply (`<Markdown streaming>`) ───
+   On the last line, when the reply ends in text. It breathes rather than blinks: a hard
+   blink at the end of moving text drew the eye away from the words. */
+@keyframes fd-caret {
+  50% {
+    opacity: 0.2;
+  }
+}
+.flowdown[data-caret] > :last-child:is(p, h1, h2, h3, h4, h5, h6)::after,
+.flowdown[data-caret] > :last-child:is(ul, ol) > li:last-child::after,
+.flowdown[data-caret] > :last-child:is(blockquote, aside) p:last-child::after {
+  content: '';
+  display: inline-block;
+  width: 0.5em;
+  height: 1em;
+  margin-left: 0.15em;
+  border-radius: 1px;
+  background: var(--fd-caret-color, currentColor);
+  vertical-align: -0.15em;
+  opacity: 0.55;
+  animation: fd-caret 1s ease-in-out infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .flowdown[data-caret] *::after {
+    animation: none;
+  }
+}
+
+/* diagram.css */
+/* ─── A drawn diagram's toolbar and its enlarged viewer (`mermaid/diagram.tsx`, `viewer.tsx`) ───
+   The toolbar sits over the diagram's top right corner and shows when the pointer is over the
+   figure or the focus is in it; under a finger, where there is no hover, it always shows. */
+.flowdown .fd-diagram {
+  position: relative;
+}
+.flowdown .fd-diagram-actions {
+  position: absolute;
+  top: 0.35rem;
+  right: 0.35rem;
+  z-index: 1;
+  display: flex;
+  gap: 0.125rem;
+  border: 1px solid var(--fd-border-subtle);
+  border-radius: var(--fd-radius-small);
+  background: color-mix(in oklab, var(--fd-bg) 88%, transparent);
+  padding: 0.125rem;
+  opacity: 0;
+  transition: opacity var(--fd-duration) ease;
+}
+.flowdown .fd-diagram:is(:hover, :focus-within) .fd-diagram-actions {
+  opacity: 1;
+}
+.flowdown .fd-diagram-action {
+  display: inline-grid;
+  place-items: center;
+  min-width: 1.75rem;
+  height: 1.75rem;
+  border: 0;
+  border-radius: var(--fd-radius-small);
+  background: none;
+  padding: 0;
+  font: inherit;
+  color: var(--fd-fg-faint);
+  cursor: pointer;
+  transition:
+    color var(--fd-duration) ease,
+    background-color var(--fd-duration) ease;
+}
+.flowdown .fd-diagram-action:hover {
+  background: var(--fd-veil-strong);
+  color: var(--fd-fg);
+}
+.flowdown .fd-diagram-action[data-copied] {
+  color: var(--fd-success);
+}
+.flowdown .fd-diagram-action svg {
+  width: 0.95rem;
+  height: 0.95rem;
+}
+
+/* The viewer: a modal dialog over most of the window, the controls in a bar above the stage. */
+.flowdown .fd-diagram-viewer {
+  box-sizing: border-box;
+  width: min(80rem, calc(100vw - 2rem));
+  max-width: none;
+  height: min(60rem, calc(100dvh - 2rem));
+  max-height: none;
+  margin: auto;
+  border: 1px solid var(--fd-border);
+  border-radius: var(--fd-radius);
+  background: var(--fd-bg);
+  padding: 0;
+  color: var(--fd-fg);
+  overflow: hidden;
+}
+.flowdown .fd-diagram-viewer[open] {
+  display: flex;
+  flex-direction: column;
+}
+.flowdown .fd-diagram-viewer::backdrop {
+  background: rgb(0 0 0 / 0.45);
+}
+.flowdown .fd-diagram-viewer-bar {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: 0.125rem;
+  border-bottom: 1px solid var(--fd-border-subtle);
+  padding: 0.35rem;
+}
+.flowdown .fd-diagram-zoom {
+  min-width: 3.5rem;
+  font-size: 0.8em;
+  font-variant-numeric: tabular-nums;
+}
+.flowdown .fd-diagram-close {
+  margin-left: auto;
+}
+/* The stage takes every gesture itself: no browser pan or pinch-zoom of the page under it. */
+.flowdown .fd-diagram-stage {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  min-height: 0;
+  overflow: hidden;
+  cursor: grab;
+  touch-action: none;
+  user-select: none;
+}
+.flowdown .fd-diagram-stage[data-moving] {
+  cursor: grabbing;
+}
+.flowdown .fd-diagram-stage:focus-visible {
+  outline-offset: -2px;
+}
+.flowdown .fd-diagram-viewer-canvas {
+  flex: none;
+  transform-origin: center;
+  transition: transform var(--fd-duration-slow) var(--fd-ease);
+}
+/* A drag, a pinch or the wheel follows the hand; only a button or a key glides. */
+.flowdown .fd-diagram-stage[data-moving] .fd-diagram-viewer-canvas {
+  transition: none;
+}
+.flowdown .fd-diagram-viewer-canvas svg {
+  display: block;
+  width: 100%;
+  /* Mermaid caps the picture's width in its own style attribute; here the canvas sizes it. */
+  max-width: none !important;
+  height: 100%;
+}
+
+/* Under a finger, where there is no hover, the toolbar always shows and every control is a 44 px
+   target. A phone's viewer is the whole screen. */
+@media (hover: none), (pointer: coarse) {
+  .flowdown .fd-diagram-actions {
+    opacity: 1;
+  }
+}
+@media (pointer: coarse) {
+  .flowdown .fd-diagram-action {
+    min-width: 2.75rem;
+    height: 2.75rem;
+  }
+}
+@media (max-width: 40rem) {
+  .flowdown .fd-diagram-viewer {
+    width: 100vw;
+    height: 100dvh;
+    border: 0;
+    border-radius: 0;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .flowdown :is(.fd-diagram-actions, .fd-diagram-viewer-canvas) {
+    transition: none;
+  }
+}