/* markdown.org tools — shared editor UI */
.mde { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); background: var(--surface); }
.mde.mde-drop { outline: 2px dashed var(--accent); outline-offset: -4px; }

.mde-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--surface-soft); }
.mde-tabs { display: none; gap: 4px; }
.mde-tab { padding: 6px 12px; border-radius: 8px; font-size: 0.9rem; cursor: pointer; border: 1px solid transparent; background: none; color: var(--fg); font-weight: 500; }
.mde-tab[aria-selected="true"] { background: var(--accent); color: #fff; }
.mde-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.mde-btn { padding: 6px 12px; border-radius: 8px; font-size: 0.9rem; cursor: pointer; border: 1px solid var(--border-strong); background: var(--surface); color: var(--fg); font-weight: 500; transition: border-color 0.15s, color 0.15s; }
.mde-btn:hover { border-color: var(--accent); color: var(--accent-hover); }

.mde-panes { display: grid; grid-template-columns: 1fr 1fr; height: 68vh; min-height: 380px; }
.mde-src { border: 0; border-right: 1px solid var(--border); resize: none; padding: 16px 18px; font-family: var(--mono); font-size: 0.9rem; line-height: 1.65; color: var(--fg); background: var(--surface); outline: none; tab-size: 2; }
.mde-preview { overflow: auto; padding: 18px 22px; background: var(--surface); border: 0; border-radius: 0; }
.mde-preview > :first-child { margin-top: 0; }
.mde-preview h1, .mde-preview h2, .mde-preview h3 { margin: 1.1em 0 0.5em; }
.mde-preview p, .mde-preview ul, .mde-preview ol, .mde-preview pre, .mde-preview blockquote, .mde-preview table { margin: 0 0 0.9em; }

@media (max-width: 720px) {
  .mde-tabs { display: flex; }
  .mde-panes { grid-template-columns: 1fr; }
  .mde-panes .mde-src { border-right: 0; }
  .mde-panes.show-preview .mde-src { display: none; }
  .mde-panes:not(.show-preview) .mde-preview { display: none; }
}

/* diagrams inside previews / diagram editor */
.md-diagram { margin: 0 0 0.9em; text-align: center; }
.md-diagram svg { max-width: 100%; height: auto; }
.mde-diagram-pane { display: grid; place-items: center; }
.mde-diagram-pane svg { max-width: 100%; height: auto; }
.mde-error { color: var(--err-fg); background: var(--err-bg); border: 1px solid var(--err-bd); border-radius: var(--radius-sm); padding: 10px 14px; font-family: var(--mono); font-size: 0.85rem; white-space: pre-wrap; text-align: left; }

/* ---- flowchart editor ---- */
.tabset > label:has(input) + .flow-pane { padding: 0; }
.flow-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.flow-split { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; min-height: 62vh; }
.flow-split > .mde-src { border: 0; border-right: 1px solid var(--border); resize: none; padding: 16px 18px; font-family: var(--mono); font-size: 0.9rem; line-height: 1.65; outline: none; background: var(--surface); color: var(--fg); }
.flow-forms { padding: 14px 16px; border-right: 1px solid var(--border); overflow: auto; max-height: 72vh; }
.flow-preview { padding: 18px; overflow: auto; display: grid; place-items: center; }
.flow-preview svg, .flow-canvas svg { max-width: 100%; height: auto; }
.flow-empty { color: var(--muted); font-style: italic; }
.flow-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.flow-head { display: flex; align-items: center; gap: 8px; margin: 14px 0 8px; flex-wrap: wrap; }
.flow-head h4 { margin: 0; margin-right: auto; }
/* visual pane */
.flow-visual { position: relative; height: 64vh; overflow: hidden; }
.flow-canvas { position: absolute; inset: 0; overflow: auto; display: grid; place-items: center; padding: 24px; }
.flow-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }
.flow-overlay line { stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 5 4; }
.flow-tools { position: absolute; top: 20px; left: 20px; z-index: 6; display: flex; flex-direction: column; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); padding: 8px; }
.flow-tools .mde-btn { white-space: nowrap; text-align: left; }
.flow-props { position: absolute; left: 20px; right: 20px; bottom: 20px; z-index: 6; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); padding: 10px 14px; }
.flow-props input, .flow-props select { width: auto; padding: 6px 9px; border: 1px solid var(--border-strong); border-radius: 7px; font: inherit; font-size: 0.86rem; background: var(--surface); color: var(--fg); }
.flow-props .flow-label { min-width: 130px; }
.flow-insp-label { font-size: 0.85rem; color: var(--muted); font-weight: 700; }
.flow-plabel, .flow-props label { font-size: 0.82rem; color: var(--muted); }
.flow-order { display: inline-flex; align-items: center; gap: 4px; }
.flow-pos { font-size: 0.82rem; min-width: 42px; text-align: center; }
.flow-hint { font-size: 0.88rem; color: var(--muted); }
.mde-btn.small { padding: 4px 9px; font-size: 0.85rem; }
.flow-canvas g.node { cursor: pointer; }
g.node.flow-selected > *, g.cluster.flow-selected > rect { stroke: var(--accent) !important; stroke-width: 2.5px !important; }
g.node.flow-target > * { stroke: var(--accent-2) !important; stroke-width: 3px !important; }
/* structure tree */
.flow-tree { display: flex; flex-direction: column; gap: 5px; padding-top: 4px; }
.flow-trow { display: flex; gap: 6px; align-items: center; background: var(--surface-soft); border: 1px solid var(--border); border-radius: 8px; padding: 5px 7px; }
.flow-trow.is-group { background: var(--accent-tint); border-color: var(--border-strong); }
.flow-trow.dragging { opacity: 0.4; }
.flow-group-body { display: flex; flex-direction: column; gap: 5px; margin: 5px 0; padding-left: 6px; border-left: 2px dashed var(--border-strong); }
.flow-ph { height: 34px; border: 2px dashed var(--accent); border-radius: 8px; background: var(--accent-tint); }
.flow-drop-empty { font-size: 0.78rem; color: var(--muted); font-style: italic; padding: 4px 8px; margin-left: 18px; }
.flow-handle { cursor: grab; color: var(--muted); user-select: none; touch-action: none; }
.flow-trow input, .flow-trow select { width: auto; padding: 5px 7px; border: 1px solid var(--border-strong); border-radius: 6px; font: inherit; font-size: 0.85rem; background: var(--surface); color: var(--fg); min-width: 0; }
.flow-trow .flow-label { flex: 1; }
.flow-del { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 0.9rem; padding: 2px 6px; }
.flow-del:hover { color: var(--err-fg); }
@media (max-width: 720px) { .flow-split { grid-template-columns: 1fr; } .flow-forms { border-right: 0; border-bottom: 1px solid var(--border); } }

/* flow editor: one outer card, three stacked areas (top tabs / middle / bottom buttons) */
.mde.flow { width: 100%; }
.flow > .tabset { width: 100%; background: transparent; border: 0; border-radius: 0; padding: 12px 14px 0; gap: 8px; }
.flow > .tabset > label:has(input) + .flow-pane { width: calc(100% + 28px); margin: 12px -14px 0; padding: 0; background: transparent; border-top: 1px solid var(--border); border-radius: 0; }
.flow > .flow-actions { margin: 0; border-top: 1px solid var(--border); padding: 14px 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.flow-overlay path.flow-loop { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 5 4; }

/* flow visual: hover highlights for boxes, subgraphs and arrows */
.flow-canvas g.node:hover > rect, .flow-canvas g.node:hover > polygon, .flow-canvas g.node:hover > circle, .flow-canvas g.node:hover > path { stroke: var(--accent); stroke-width: 2px; }
.flow-canvas g.cluster { cursor: pointer; }
.flow-canvas g.cluster:hover > rect { stroke: var(--accent); }
.flow-canvas .flow-edge-hit:hover { stroke: rgba(59, 110, 246, 0.22); }

/* flow visual: hover wins over Mermaid's injected styles; selected arrow highlight */
.flow-canvas g.node:hover:not(.flow-selected) > * { stroke: var(--accent) !important; stroke-width: 2px !important; }
.flow-canvas g.cluster:hover:not(.flow-selected) > rect { stroke: var(--accent) !important; }
.flow-canvas .edgePaths > path.flow-edge-selected, .flow-canvas path.flowchart-link.flow-edge-selected { stroke: var(--accent) !important; stroke-width: 3px !important; }

/* flow visual: text not selectable; edge-label hover & selected */
.flow-canvas, .flow-canvas svg { -webkit-user-select: none; user-select: none; }
.flow-canvas .edgePaths > path.flow-edge-hover { stroke: rgba(59, 110, 246, 0.5) !important; stroke-width: 2.5px !important; }
.flow-canvas .edgeLabels > .edgeLabel:hover span { color: var(--accent) !important; }
.flow-canvas .edgeLabels > .edgeLabel.flow-elabel-sel span { color: var(--accent) !important; font-weight: 700; }

/* floating tool & properties windows with draggable titlebars */
.flow-panel { position: absolute; z-index: 6; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); overflow: hidden; padding: 0; }
.flow-panel-title { padding: 7px 12px; background: var(--surface-soft); border-bottom: 1px solid var(--border); font-size: 0.82rem; font-weight: 700; color: var(--heading); cursor: move; user-select: none; touch-action: none; }
.flow-panel-body { padding: 10px 12px; }
.flow-tools.flow-panel { display: block; top: 20px; left: 20px; right: auto; bottom: auto; }
.flow-tools .flow-panel-body { display: flex; flex-direction: column; gap: 8px; }
.flow-tools .mde-btn { text-align: center; white-space: nowrap; }
.flow-props.flow-panel { display: block; left: 20px; right: auto; bottom: 20px; width: 232px; }
.flow-field { display: flex; flex-direction: column; gap: 3px; margin-bottom: 9px; }
.flow-field > label { font-size: 0.74rem; color: var(--muted); font-weight: 600; }
.flow-props .flow-field input, .flow-props .flow-field select { width: 100%; }
.flow-props .flow-order { display: flex; gap: 5px; align-items: center; }
.flow-props .flow-order .mde-btn { width: auto; }
.flow-props .flow-panel-body > .mde-btn { width: 100%; margin-top: 4px; }
.flow-props .flow-hint { display: block; font-size: 0.85rem; }

/* dragging keeps the move cursor; window hover highlight */
.flow-grabbing, .flow-grabbing * { cursor: move !important; }
.flow-panel:hover { border-color: var(--accent); }
/* tab set: tabs flush to a thick accent divider, square bottoms */
.flow > .tabset { padding: 10px 12px 0; gap: 6px; }
.flow > .tabset > label { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.flow > .tabset > label:has(input) + .flow-pane { width: calc(100% + 24px); margin: 0 -12px 0; padding: 0; background: transparent; border-top: 2px solid var(--accent); border-radius: 0; }
/* bottom actions: full width, light blue */
.flow > .flow-actions { background: var(--surface-soft); }
/* buttons bold; panel buttons light blue, hover = menu hollow, active = dark blue */
.mde-btn { font-weight: 700; }
.flow-panel .mde-btn { background: var(--accent-tint); color: var(--heading); border-color: var(--border-strong); }
.flow-panel .mde-btn:hover { background: rgba(0, 0, 0, 0.06); color: var(--heading); border-color: var(--border-strong); }
.flow-panel .mde-btn:active { background: var(--accent); color: #fff; border-color: var(--accent); }
.flow input:focus, .flow select:focus, .flow textarea:focus { border-color: var(--accent) !important; }

/* edit panel: full accent border all round; tabs flush to it (no gap below); footer full width */
.flow > .tabset { padding: 10px 12px 12px; gap: 0 6px; }
.flow > .tabset > label:has(input:checked) { margin-bottom: -2px; position: relative; z-index: 1; }
.flow > .tabset > label:has(input) + .flow-pane { width: 100%; margin: 0; padding: 0; background: transparent; border: 2px solid var(--accent); border-radius: var(--radius-sm); }
.flow > .flow-actions { width: 100%; box-sizing: border-box; }

/* footer: no light bg, tight to the panel, right-aligned */
.flow > .tabset { padding-bottom: 4px; }
.flow > .flow-actions { background: transparent; border-top: 0; padding: 0 12px 8px; justify-content: flex-end; }
/* all flow buttons (panel + footer) share the light-blue style */
.flow .mde-btn { background: var(--accent-tint); color: var(--heading); border-color: var(--border-strong); }
.flow .mde-btn:hover { background: rgba(0, 0, 0, 0.06); color: var(--heading); border-color: var(--border-strong); }
.flow .mde-btn:active { background: var(--accent); color: #fff; border-color: var(--accent); }
/* only highlight a window's border while hovering its titlebar */
.flow-panel:hover { border-color: var(--border); }
.flow-panel:has(> .flow-panel-title:hover) { border-color: var(--accent); }

/* full-screen toggle button, top-right of the tabs row */
.flow-fs { order: 1; margin-left: auto; align-self: flex-start; padding: 6px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--accent-tint); color: var(--heading); font-weight: 700; font-size: 0.9rem; cursor: pointer; }
.flow-fs:hover { border-color: var(--accent); }
.flow-fs:active { background: var(--accent); color: #fff; border-color: var(--accent); }
/* full-screen editor fills the viewport */
.flow-fullscreen { border: 0; border-radius: 0; height: 100vh; overflow: hidden; background: var(--surface); }
.flow-fullscreen > .tabset > label:has(input) + .flow-pane { border-radius: 0; }
.flow-fullscreen .flow-visual { height: calc(100vh - 120px); }
.flow-fullscreen .flow-split { height: calc(100vh - 120px); min-height: 0; }
/* drag a box into a group: box mock on the cursor + group drop-target highlight */
.flow-ghost { position: absolute; z-index: 7; pointer-events: none; padding: 5px 12px; background: var(--accent-tint); border: 2px solid var(--accent); border-radius: 6px; font-size: 0.82rem; font-weight: 600; color: var(--heading); box-shadow: var(--shadow-md); white-space: nowrap; }
.flow-canvas g.cluster.flow-target > rect { stroke: var(--accent-2) !important; stroke-width: 3px !important; }

/* ---- resizable editor height (shared across editors via --flow-h) ---- */
.flow-visual { height: var(--flow-h, 480px); }
.flow-split { height: var(--flow-h, 480px); min-height: 0; }
.flow-pane { position: relative; }
/* zoom/pan canvas: a fixed viewport holding a transformed stage */
.flow-canvas { overflow: hidden; display: block; padding: 0; cursor: grab; }
.flow-stage { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; }
.flow-stage:has(> .flow-empty) { position: absolute; inset: 0; display: grid; place-items: center; transform: none !important; }
.flow-canvas g.node, .flow-canvas g.node * { cursor: pointer; }
/* bottom resize grip */
.flow-resize { position: absolute; left: 0; right: 0; bottom: 0; height: 15px; display: flex; align-items: center; justify-content: center; cursor: ns-resize; z-index: 5; }
.flow-resize-grip { width: 46px; height: 5px; border-radius: 3px; background: var(--border-strong); transition: background 0.15s, width 0.15s; }
.flow-resize:hover .flow-resize-grip { background: var(--accent); width: 60px; }
/* hold the drag cursor on the body during any drag (survives leaving the target) */
.flow-panning, .flow-panning * { cursor: grabbing !important; }
.flow-resizing, .flow-resizing * { cursor: ns-resize !important; }
/* floating windows: solid blue titlebar, thin blue border, thicker ring on titlebar hover */
.flow-panel { border: 1px solid var(--accent); }
.flow-panel-title { background: var(--accent); color: #fff; border-bottom: 0; }
.flow-panel:hover { border-color: var(--accent); }
.flow-panel:has(> .flow-panel-title:hover) { box-shadow: var(--shadow-md), 0 0 0 2px var(--accent); }
/* footer: zoom controls on the left, copy/download groups on the right */
.flow > .flow-actions { justify-content: space-between; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.flow-zoom { display: flex; align-items: center; gap: 8px; }
.flow-zoom-cap { font-weight: 700; color: var(--heading); font-size: 0.85rem; }
.flow-zoom-slider { width: 130px; accent-color: var(--accent); }
.flow-zoom-label { font-size: 0.8rem; color: var(--muted); min-width: 42px; }
.flow-actions-right { display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap; }
.flow-btn-group { display: flex; align-items: center; gap: 6px; }
.flow-btn-label { font-weight: 700; color: var(--heading); font-size: 0.85rem; margin-right: 2px; }

/* less-tall full-screen + reset buttons (were crowding the edit area) */
.flow-fs { padding-top: 3px; padding-bottom: 3px; }
.flow-mini { padding-top: 3px; padding-bottom: 3px; font-size: 0.82rem; }
/* unselected tabs: white bottom border so no grey line peeks below them */
.flow > .tabset > label:has(input:not(:checked)) { border-bottom-color: #fff; }

/* ===== v2 layout: tool sections, source splitter, undo/redo ===== */
/* full-screen button nudged down 1px; bottom bar holds only the download groups */
.flow-fs { margin-top: 1px; }
.flow > .flow-actions { justify-content: flex-end; }
/* tools panel: labelled sections (Objects / Editing / Zoom) */
.flow-tools.flow-panel { width: 210px; }
.flow-tool-sec { margin-bottom: 10px; }
.flow-tool-sec:last-child { margin-bottom: 0; }
.flow-tool-h { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 700; margin-bottom: 5px; }
.flow-tool-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.flow-tool-row .mde-btn { flex: 1 1 auto; }
.flow-tools .flow-zoom-slider { flex: 1 1 90px; min-width: 80px; accent-color: var(--accent); }
.flow-tool-row [data-edit] { flex: 1 1 auto; min-width: 0; }
/* column splitter between the two halves of a split view (source & structure) */
.flow-split { grid-template-columns: var(--flow-split-w, 340px) 8px minmax(0, 1fr); }
.flow-split > * { min-width: 0; }
.flow-vsplit { display: flex; align-items: center; justify-content: center; cursor: col-resize; align-self: stretch; }
.flow-vsplit-grip { width: 5px; height: 46px; border-radius: 3px; background: var(--border-strong); transition: background 0.15s, height 0.15s; }
.flow-vsplit:hover .flow-vsplit-grip { background: var(--accent); height: 62px; }
.flow-colresizing, .flow-colresizing * { cursor: col-resize !important; }
/* source tab: inset from the blue border, borderless textarea, permanent scrollbar */
.flow-source .flow-split { box-sizing: border-box; padding: 8px 8px 14px; }
.flow-src-wrap { position: relative; display: flex; min-width: 0; }
.flow-src-wrap .mde-src { flex: 1 1 auto; min-width: 0; width: 100%; border: 0; border-radius: var(--radius-sm); overflow-y: scroll; background: var(--surface-soft); }
.flow-source .flow-preview { border-radius: var(--radius-sm); }
/* hovering undo/redo panel, bottom-right of the source text */
.flow-src-undo { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 4px; padding: 3px; background: var(--surface); border: 1px solid var(--accent); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); opacity: 0.55; transition: opacity 0.15s; }
.flow-src-wrap:hover .flow-src-undo { opacity: 1; }
.flow-src-undo .mde-btn { padding: 3px 10px; font-size: 1rem; line-height: 1; }
.mde-btn[disabled] { opacity: 0.4; cursor: default; }
.mde-btn[disabled]:hover { background: var(--accent-tint); color: var(--heading); border-color: var(--border-strong); }

/* ---- File converter component (MDTools.mountConverter) ---- */
.conv { max-width: 640px; }
.conv-drop { display: block; width: 100%; border: 2px dashed var(--border-strong); border-radius: var(--radius); padding: 44px 24px; text-align: center; background: var(--surface-soft); cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.conv-drop:hover, .conv-drop.drag { border-color: var(--accent); background: var(--accent-tint); }
.conv-planned .conv-drop { cursor: default; }
.conv-planned .conv-drop:hover { border-color: var(--border-strong); background: var(--surface-soft); }
.conv-icon { display: block; width: 40px; height: 40px; margin: 0 auto 10px; color: var(--muted); }
.conv-title { font-weight: 600; font-size: 1.05rem; margin: 0 0 4px; color: var(--heading); }
.conv-or { color: var(--muted); font-size: 0.9rem; margin: 6px 0; }
.conv-hint { color: var(--muted); font-size: 0.82rem; margin: 10px 0 0; }
.conv-busy, .conv-done, .conv-err { border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; background: var(--surface); box-shadow: var(--shadow-sm); }
.conv-file, .conv-result { font-weight: 600; margin: 0 0 10px; color: var(--heading); word-break: break-all; }
.conv-bar { height: 8px; background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--radius-pill); overflow: hidden; margin: 12px 0 16px; }
.conv-bar-fill { height: 100%; width: 30%; background: var(--accent); border-radius: inherit; transition: width 0.2s; }
.conv-bar.indet .conv-bar-fill { width: 35%; animation: convIndet 1.1s infinite ease-in-out; }
@keyframes convIndet { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }
.conv-buttons { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 4px; }
.conv-err .mde-error { margin-bottom: 14px; }
.conv input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ---- Generator component (MDTools.mountGenerator) ---- */
.gen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; max-width: 900px; }
.gen-form { display: flex; flex-direction: column; gap: 12px; }
.gen-field { display: flex; flex-direction: column; gap: 4px; }
.gen-field > label { font-size: 0.85rem; font-weight: 600; color: var(--heading); }
.gen-field input, .gen-field select, .gen-field textarea, .gen-out { width: 100%; padding: 8px 11px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font: inherit; font-size: 0.92rem; background: var(--surface); color: var(--fg); box-sizing: border-box; }
.gen-field textarea, .gen-out { font-family: var(--mono); font-size: 0.86rem; line-height: 1.55; resize: vertical; }
.gen-check { flex-direction: row; align-items: center; gap: 8px; font-size: 0.9rem; }
.gen-check input { width: auto; }
.gen-output { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 20px; }
.gen-out { background: var(--surface-soft); min-height: 260px; }
@media (max-width: 720px) { .gen { grid-template-columns: 1fr; } .gen-output { position: static; } }

/* documentation section under the editor */
.flow-syntax { margin-top: 44px; border-top: 1px solid var(--border); padding-top: 8px; }
.flow-syntax h3 { margin-top: 1.6em; }
.flow-syntax pre { max-width: 46ch; }