pub const THEME_CSS: &[u8] = b":root {\n /* Icons and icon buttons (components/src/controls.ts, icons.ts). One stroke\n * weight for every outline icon; at 20px 1.75 draws about 1.46px. The rest\n * colour is 72% of the text colour over the page, >= 3:1 against the header\n * in both schemes (WCAG 1.4.11). Open panels (`aria-expanded=\"true\"`) take\n * the active colour and the press fill. */\n --mbr-icon-stroke: 1.75;\n --mbr-icon-color: color-mix(in srgb, var(--pico-color) 72%, var(--pico-background-color));\n --mbr-icon-color-hover: var(--pico-color);\n --mbr-icon-color-active: var(--pico-primary);\n --mbr-control-hover-bg: color-mix(in srgb, var(--pico-color) 7%, transparent);\n --mbr-control-press-bg: color-mix(in srgb, var(--pico-color) 12%, transparent);\n --mbr-field-bg: color-mix(in srgb, var(--pico-color) 5%, transparent);\n --mbr-focus-ring: 0 0 0 2px var(--pico-background-color), 0 0 0 4px var(--pico-primary);\n --mbr-control-radius: 8px;\n --mbr-danger: var(--pico-del-color);\n /* Key caps (`<kbd>`): one quiet style everywhere \xe2\x80\x94 the page, the shortcut\n * help, panel footers, the flashcard deck (controls.ts `KBD_CSS` reads the\n * same tokens inside shadow roots). Body-coloured text on a faint fill with\n * a hairline, derived from the text colour so it holds in both schemes. */\n --mbr-kbd-bg: var(--mbr-field-bg);\n --mbr-kbd-border: color-mix(in srgb, var(--pico-color) 22%, transparent);\n --mbr-kbd-color: var(--pico-color);\n\n /* Sidebar Navigation Variables (for mbr-browse-single) */\n --mbr-sidebar-width: 280px;\n --mbr-hide-nav-bp: 1024px;\n --mbr-show-tags: block; /* Set to \'none\' to hide tags in sidebar */\n\n /* Pull Quote Styling Variables */\n --mbr-pullquote-bg: var(--pico-muted-border-color);\n --mbr-pullquote-border: var(--pico-primary);\n --mbr-pullquote-color: var(--pico-color);\n\n /* Marginalia Styling Variables */\n --mbr-marginalia-bg: var(--pico-secondary-background);\n /* --mbr-marginalia-border: var(--pico-muted-border-color); */\n --mbr-marginalia-border: var(--pico-secondary-hover-background);\n --mbr-marginalia-color: var(--pico-muted-color);\n\n /* GitHub Alert: Note (Blue) */\n --mbr-alert-note-bg: rgba(227, 242, 253, 0.4);\n --mbr-alert-note-border: #1976d2;\n --mbr-alert-note-icon-color: #1976d2;\n\n /* GitHub Alert: Tip (Green) */\n --mbr-alert-tip-bg: rgba(232, 245, 233, 0.4);\n --mbr-alert-tip-border: #388e3c;\n --mbr-alert-tip-icon-color: #388e3c;\n\n /* GitHub Alert: Important (Purple) */\n --mbr-alert-important-bg: rgba(243, 229, 245, 0.4);\n --mbr-alert-important-border: #7b1fa2;\n --mbr-alert-important-icon-color: #7b1fa2;\n\n /* GitHub Alert: Warning (Orange) */\n --mbr-alert-warning-bg: rgba(255, 243, 224, 0.4);\n --mbr-alert-warning-border: #f57c00;\n --mbr-alert-warning-icon-color: #f57c00;\n\n /* GitHub Alert: Caution (Red) */\n --mbr-alert-caution-bg: rgba(255, 235, 238, 0.4);\n --mbr-alert-caution-border: #c62828;\n --mbr-alert-caution-icon-color: #c62828;\n\n /* Incomplete marker (TK/TODO/FIXME/XXX) \xe2\x80\x94 a wash only, no underline. */\n --mbr-incomplete-bg: rgba(255, 235, 59, 0.18);\n\n /* Task annotations (!! / !!! priority, #tag, @due, @done, [-] canceled) */\n --mbr-task-pri-high-color: #f57c00;\n --mbr-task-pri-urgent-color: #c62828;\n --mbr-task-pri-size: 0.55em;\n --mbr-task-tag-bg: rgba(115, 130, 140, 0.16);\n --mbr-task-tag-color: var(--pico-muted-color, #5c6b73);\n --mbr-task-chip-bg: rgba(115, 130, 140, 0.1);\n --mbr-task-chip-color: var(--pico-muted-color, #5c6b73);\n --mbr-task-chip-radius: 0.5em;\n --mbr-task-canceled-color: var(--pico-muted-color, #5c6b73);\n /* Arrival flash for a #mbr-task-N deep link. */\n --mbr-task-flash-color: rgba(255, 213, 79, 0.55);\n\n /* Review notes (r / R). One accent per note type, matching the six in\n * components/src/review/types.ts. The panel restates its rules against these\n * same properties inside its shadow root -- custom properties cross that\n * boundary but the rules using them do not. */\n --mbr-review-issue-color: #c62828;\n --mbr-review-suggestion-color: #f57c00;\n --mbr-review-note-color: #1976d2;\n --mbr-review-praise-color: #388e3c;\n --mbr-review-question-color: #7b1fa2;\n --mbr-review-insight-color: #0288d1;\n --mbr-review-stale-color: var(--pico-muted-color, #5c6b73);\n --mbr-review-highlight-bg: rgba(255, 193, 7, 0.28);\n --mbr-review-marker-size: 0.8em;\n\n /* Paper margins. Applied as padding on the content box rather than as an\n * `@page` margin -- see the \"Print Styles\" section for the Safari reason. */\n --mbr-print-margin-block: 0.5in;\n --mbr-print-margin-inline: 1in;\n\n /* Definition Lists (FAQ-style disclosure) Variables.\n * All colors resolve through Pico custom properties, so light/dark mode and\n * every color theme follow automatically -- override these, not the rules. */\n --mbr-dl-question-color: var(--pico-color);\n --mbr-dl-question-hover-color: var(--pico-primary-hover);\n --mbr-dl-question-weight: 600;\n --mbr-dl-answer-color: var(--pico-muted-color);\n --mbr-dl-separator-color: var(--pico-muted-border-color);\n --mbr-dl-marker-color: var(--pico-primary);\n --mbr-dl-marker-size: 0.62em;\n --mbr-dl-marker-gap: 0.55em;\n /* Vertical breathing room above/below each question and under each answer. */\n --mbr-dl-item-spacing: var(--pico-spacing);\n /* How far the answer is indented from the question. */\n --mbr-dl-answer-indent: calc(var(--pico-spacing) * 1.5);\n --mbr-dl-transition-duration: 0.25s;\n --mbr-dl-transition-easing: ease;\n\n /* Icon masks (SVG data URIs) for CSS-drawn icons: GitHub alerts, task\n * chips, the breadcrumb divider. Each draws the same shapes as\n * templates/icons/<name>.svg (the Lucide set the components use); the\n * mapping and the shapes are pinned by components/src/icons.test.ts. */\n --mbr-icon-note: url(\"data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'black\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'%3E%3Ccircle cx=\'12\' cy=\'12\' r=\'10\'/%3E%3Cpath d=\'M12 16v-4\'/%3E%3Cpath d=\'M12 8h.01\'/%3E%3C/svg%3E\");\n --mbr-icon-tip: url(\"data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'black\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'%3E%3Cpath d=\'M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5\'/%3E%3Cpath d=\'M9 18h6\'/%3E%3Cpath d=\'M10 22h4\'/%3E%3C/svg%3E\");\n --mbr-icon-important: url(\"data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'black\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'%3E%3Cpath d=\'M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z\'/%3E%3Cpath d=\'M12 15h.01\'/%3E%3Cpath d=\'M12 7v4\'/%3E%3C/svg%3E\");\n --mbr-icon-warning: url(\"data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'black\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'%3E%3Cpath d=\'m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\'/%3E%3Cpath d=\'M12 9v4\'/%3E%3Cpath d=\'M12 17h.01\'/%3E%3C/svg%3E\");\n --mbr-icon-caution: url(\"data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'black\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'%3E%3Cpath d=\'M12 16h.01\'/%3E%3Cpath d=\'M12 8v4\'/%3E%3Cpath d=\'M15.312 2a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586l-4.688-4.688A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2z\'/%3E%3C/svg%3E\");\n --mbr-icon-calendar: url(\"data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'black\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'%3E%3Cpath d=\'M8 2v3\'/%3E%3Cpath d=\'M16 2v3\'/%3E%3Crect x=\'3\' y=\'3\' width=\'18\' height=\'18\' rx=\'2\'/%3E%3Cpath d=\'M3 9h18\'/%3E%3C/svg%3E\");\n --mbr-icon-check: url(\"data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'black\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'%3E%3Cpath d=\'M20 6 9 17l-5-5\'/%3E%3C/svg%3E\");\n --mbr-icon-arrow-right: url(\"data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'black\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'%3E%3Cpath d=\'M5 12h14\'/%3E%3Cpath d=\'m12 5 7 7-7 7\'/%3E%3C/svg%3E\");\n --mbr-icon-chevron-right: url(\"data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'black\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'%3E%3Cpath d=\'m9 18 6-6-6-6\'/%3E%3C/svg%3E\");\n\n /* tie reveal.js slides styles to our pico styles and theme */\n --r-background-color: var(--pico-background-color);\n --r-main-font: var(--pico-font-family);\n --r-main-font-size: calc(var(--pico-font-size) * 1.25);\n --r-main-color: var(--pico-color);\n --r-block-margin: calc(var(--pico-spacing) * 1.2);\n\n --r-heading-margin: var(--r-block-margin);\n --r-heading-font: var(--pico-font-family);\n\n --r-heading-color: var(--pico-primary);\n --r-heading-line-height: 1.2;\n --r-heading-letter-spacing: normal;\n --r-heading-text-transform: uppercase;\n --r-heading-text-shadow: none;\n --r-heading-font-weight: 700;\n\n --r-heading1-text-shadow: none;\n\n --r-heading1-size: calc(var(--pico-font-size) * 3.1);\n --r-heading2-size: calc(var(--pico-font-size) * 1.8);\n --r-heading3-size: calc(var(--pico-font-size) * 1.6);\n --r-heading4-size: calc(var(--pico-font-size) * 1.3);\n\n --r-code-font: var(--pico-font-family-monospace);\n\n --r-link-color: var(--pico-primary);\n /* not sure on this one; could do lch(from var(--pico-primary) calc(l - 20) c h) to darken */\n --r-link-color-dark: var(--pico-primary);\n --r-link-color-hover: var(--pico-primary-hover);\n --r-selection-background-color: var(--pico-text-selection-color);\n --r-selection-color: var(--pico-color);\n --r-overlay-element-bg-color: var(--pico-modal-overlay-background-color);\n --r-overlay-element-fg-color: var(--pico-color);\n}\n\n/* Replaces Pico\'s dark filled chip (see the --mbr-kbd-* tokens above). */\nkbd {\n padding: 0.0625rem 0.3125rem;\n border: 1px solid var(--mbr-kbd-border);\n border-radius: 4px;\n background: var(--mbr-kbd-bg);\n box-shadow: none;\n color: var(--mbr-kbd-color);\n font-family: inherit;\n font-size: 0.85em;\n font-weight: 500;\n line-height: 1.4;\n}\n\nmain > section[data-theme=\"light\"] {\n background-color: rgba(255, 255, 255, 0.85);\n padding: var(--pico-block-spacing-vertical) 0;\n}\n\nmain > section[data-theme=\"dark\"] {\n background-color: rgba(0, 0, 0, 0.85);\n padding: var(--pico-block-spacing-vertical) 0;\n}\n\n\nbody > header {\n background-color: var(--pico-background-color);\n /* A hairline: the 2px slate rule was the heaviest line on every page. */\n border-bottom: 1px solid var(--pico-muted-border-color);\n position: sticky;\n top: 0;\n padding-block: 0;\n z-index: 999;\n}\n\n/* Offset anchor jumps (including `:target` and permalink clicks) so the\n * linked heading isn\'t hidden under the sticky header above (nav ul is\n * 2.4em + 2px border). */\nhtml {\n scroll-padding-top: 3em;\n}\n\nbody > header > nav {\n padding-block: 0;\n margin-block: 0;\n}\n\n/* The title is centred on the header (which spans the content column when the\n * sidebar is docked), not merely between the two button groups: equal side\n * tracks put it on the column\'s axis whenever there is room, and when there is\n * not, the title track gives way first (it ellipsizes) while the buttons keep\n * their size. */\nbody > header > nav {\n display: grid;\n grid-template-columns: 1fr minmax(0, max-content) 1fr;\n align-items: center;\n}\n\nbody > header > nav > ul:first-child {\n justify-self: start;\n}\n\nbody > header > nav > ul:last-child {\n justify-self: end;\n}\nbody > header > nav > ul {\n height: 2.4em;\n}\n\nbody > header nav details[class=\"dropdown\"] summary {\n border-color: transparent;\n background-color: transparent;\n margin-right: -14px;\n}\n\nbody > header nav details[class=\"dropdown\"] summary::after {\n background: none;\n}\n\nnav[aria-label=\"breadcrumb\"] ul li {\n padding-top: 0;\n}\n\n/* The divider is a chevron (templates/icons/chevron-right.svg as a mask), not\n * Pico\'s ASCII \">\": muted, 12px, centred in the gap Pico leaves. */\nnav[aria-label=\"breadcrumb\"] ul li:not(:last-child)::after {\n content: \"\";\n position: static;\n width: 12px;\n height: 12px;\n margin: 0 -8px 0 2px;\n vertical-align: -1px;\n background-color: var(--pico-muted-color);\n opacity: 0.6;\n -webkit-mask: var(--mbr-icon-chevron-right) center / 12px 12px no-repeat;\n mask: var(--mbr-icon-chevron-right) center / 12px 12px no-repeat;\n}\n\nbody > footer {\n border-top: 1px solid var(--pico-secondary-border);\n}\n\n/* Template icons (`{{ icon(name=\xe2\x80\xa6) }}`, templates/icons/). A labeled button\n * puts 8px between its icon and its text. */\n.mbr-icon {\n flex: none;\n}\n\n.mbr-icon-label {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n/* ==================== Sidebar Navigation Grid Layout ==================== */\n\n/*\n * CSS Grid layout for body when mbr-browse-single sidebar is active.\n * The component adds \'mbr-has-sidebar\' class to body when in desktop mode (>1024px).\n * On mobile (<1024px), the sidebar is an overlay drawer - no grid layout needed.\n */\n\n/* Desktop: sidebar visible inline via CSS grid.\n *\n * `screen and` is load-bearing, not decoration. Per CSS 2.1 a width query in\n * paged media resolves against the page box (a Letter sheet is ~816px, so this\n * block should never match when printing) -- but WebKit evaluates width and\n * viewport units against the on-screen window instead\n * (https://bugs.webkit.org/show_bug.cgi?id=250685, open since 2023;\n * https://bugs.webkit.org/show_bug.cgi?id=126591 for `vw`). Unqualified, this\n * block therefore applies while printing from any Safari window wider than\n * 1024px, dropping a `min-height: 100vh` grid and two sticky children into the\n * printed layout. Qualifying the media type sidesteps the bug entirely.\n *\n * Pico\'s own breakpoints are unqualified and have the same exposure; the print\n * block\'s `main.container { max-width: none }` neutralises the consequence we\n * can actually reach. */\n@media screen and (min-width: 1024px) {\n body.mbr-has-sidebar {\n display: grid;\n /* `minmax(0, \xe2\x80\xa6)`: a bare `1fr` has an `auto` minimum, so the widest\n * table\'s min-content width sized the column and the page scrolled\n * sideways; at 0 the table\'s `.mbr-table-scroll` scrolls instead. */\n grid-template-columns: var(--mbr-sidebar-width) minmax(0, 1fr);\n grid-template-rows: auto 1fr auto;\n grid-template-areas:\n \"sidebar header\"\n \"sidebar main\"\n \"sidebar footer\";\n min-height: 100vh;\n }\n\n body.mbr-has-sidebar > mbr-browse-single {\n grid-area: sidebar;\n position: sticky;\n top: 0;\n height: 100vh;\n overflow-y: auto;\n border-right: 1px solid var(--pico-muted-border-color);\n z-index: 100;\n }\n\n body.mbr-has-sidebar > header {\n grid-area: header;\n position: sticky;\n top: 0;\n }\n\n /* An inline gutter for the three `.container` children of the grid.\n *\n * Pico\'s `.container` has no padding at or above 576px: it relies on its\n * `max-width` being narrower than the viewport, so `margin-inline: auto`\n * leaves slack on either side. In this grid the column is narrower than\n * that max-width (1000px at a 1280px viewport, against Pico\'s 1200px), so the\n * container fills the column exactly and there is no slack at all. Two things\n * depend on there being some:\n * - Pico\'s `nav ul:first-child` / `nav ul:last-child` pull outward by\n * `--pico-nav-element-spacing-horizontal` (a negative margin), so the\n * header\'s last `<ul>` ran 10px past the viewport on every page;\n * - the marginalia indicator (`blockquote blockquote blockquote`) sits at\n * `left: 100%`, i.e. in the right-hand gutter.\n * `--pico-spacing` is the gutter Pico itself gives `.container` on narrow\n * screens, so this is also what the content looks like there. */\n body.mbr-has-sidebar > header,\n body.mbr-has-sidebar > main,\n body.mbr-has-sidebar > footer {\n padding-inline: var(--pico-spacing);\n }\n\n body.mbr-has-sidebar > main {\n grid-area: main;\n }\n\n body.mbr-has-sidebar > footer {\n grid-area: footer;\n }\n}\n\n/* Mobile: no grid layout, sidebar is overlay drawer handled by component.\n * `screen and` for the same reason as the desktop block above. */\n@media screen and (max-width: 1023px) {\n body.mbr-has-sidebar {\n display: block;\n }\n}\n\nfigure > video {\n width: 100%;\n height: auto;\n max-height: calc(100vh - 50px);\n max-width: 100%;\n align-items: center;\n /* display: inline-flex; */\n user-select: none;\n}\nfigure > figcaption {\n display: flex;\n justify-content: space-between;\n flex-direction: row-reverse;\n flex-wrap: wrap-reverse;\n}\nfigure > figcaption > * {\n flex-grow: 1;\n}\nfigure > figcaption > mbr-video-extras {\n flex-grow: 2;\n}\n\nfigure {\n margin-bottom: var(--pico-block-spacing-vertical);\n}\n\n/* ==================== Video Theater Mode ==================== */\n\nfigure.theater {\n /* Break out of parent container to fill viewport width */\n width: 100vw;\n margin-left: calc(-50vw + 50%);\n margin-right: calc(-50vw + 50%);\n\n /* Dark background for cinematic feel */\n background: #000;\n\n /* Flex column to stack video + controls, cap to viewport */\n display: flex;\n flex-direction: column;\n align-items: center;\n max-height: 95vh;\n\n /* Sit above sibling content but below sticky header (z-index: 999) */\n position: relative;\n z-index: 100;\n\n padding: 0;\n}\n\nfigure.theater > video {\n flex: 1 1 auto;\n min-height: 0; /* allow flex shrink below intrinsic size */\n width: 100%;\n max-height: 80vh;\n object-fit: contain; /* maintain aspect ratio, letterbox if needed */\n}\n\nfigure.theater > figcaption {\n flex: 0 0 auto;\n width: 100%;\n max-width: 1200px;\n padding: 0.5rem 1rem;\n color: var(--pico-muted-color);\n}\n\n/* figure > video::cue { */\n/* font-size: 0.875em; */\n/* margin: 1em; */\n/* padding: 0.5em; */\n/* } */\n/* media-provider > video::cue { */\n/* display: none; */\n/* } */\n\nol > li {\n list-style: decimal;\n}\n\nli::marker {\n color: var(--pico-muted-color);\n}\n\n/* ==================== Dark Mode Overrides ==================== */\n\n@media only screen and (prefers-color-scheme: dark) {\n :root:not([data-theme]) {\n /* Icon buttons - Dark Mode: a touch more fill to read on a dark page. */\n --mbr-control-hover-bg: color-mix(in srgb, var(--pico-color) 10%, transparent);\n --mbr-control-press-bg: color-mix(in srgb, var(--pico-color) 16%, transparent);\n --mbr-field-bg: color-mix(in srgb, var(--pico-color) 8%, transparent);\n\n /* Marginalia - Dark Mode */\n --mbr-marginalia-bg: rgba(32, 38, 50, 0.6);\n\n /* GitHub Alerts - Dark Mode */\n --mbr-alert-note-bg: rgba(13, 71, 161, 0.2);\n --mbr-alert-note-border: #42a5f5;\n --mbr-alert-note-icon-color: #42a5f5;\n\n --mbr-alert-tip-bg: rgba(27, 94, 32, 0.2);\n --mbr-alert-tip-border: #66bb6a;\n --mbr-alert-tip-icon-color: #66bb6a;\n\n --mbr-alert-important-bg: rgba(74, 20, 140, 0.2);\n --mbr-alert-important-border: #ab47bc;\n --mbr-alert-important-icon-color: #ab47bc;\n\n --mbr-alert-warning-bg: rgba(230, 81, 0, 0.2);\n --mbr-alert-warning-border: #ffa726;\n --mbr-alert-warning-icon-color: #ffa726;\n\n --mbr-alert-caution-bg: rgba(183, 28, 28, 0.2);\n --mbr-alert-caution-border: #ef5350;\n --mbr-alert-caution-icon-color: #ef5350;\n\n /* Task annotations - Dark Mode */\n --mbr-task-pri-high-color: #ffa726;\n --mbr-task-pri-urgent-color: #ef5350;\n --mbr-task-tag-bg: rgba(148, 163, 184, 0.2);\n --mbr-task-chip-bg: rgba(148, 163, 184, 0.14);\n --mbr-task-flash-color: rgba(255, 213, 79, 0.28);\n\n /* Review notes - Dark Mode */\n --mbr-review-issue-color: #ef5350;\n --mbr-review-suggestion-color: #ffa726;\n --mbr-review-note-color: #64b5f6;\n --mbr-review-praise-color: #66bb6a;\n --mbr-review-question-color: #ba68c8;\n --mbr-review-insight-color: #4fc3f7;\n --mbr-review-highlight-bg: rgba(255, 193, 7, 0.22);\n }\n}\n\n[data-theme=\"dark\"] {\n /* Icon buttons - Dark Mode: a touch more fill to read on a dark page. */\n --mbr-control-hover-bg: color-mix(in srgb, var(--pico-color) 10%, transparent);\n --mbr-control-press-bg: color-mix(in srgb, var(--pico-color) 16%, transparent);\n --mbr-field-bg: color-mix(in srgb, var(--pico-color) 8%, transparent);\n\n /* Pull Quote - Dark Mode */\n --mbr-pullquote-bg: rgba(42, 49, 64, 0.4);\n --mbr-pullquote-border: var(--pico-primary-hover);\n\n /* Marginalia - Dark Mode */\n --mbr-marginalia-bg: rgba(32, 38, 50, 0.6);\n\n /* GitHub Alerts - Dark Mode */\n --mbr-alert-note-bg: rgba(13, 71, 161, 0.2);\n --mbr-alert-note-border: #42a5f5;\n --mbr-alert-note-icon-color: #42a5f5;\n\n --mbr-alert-tip-bg: rgba(27, 94, 32, 0.2);\n --mbr-alert-tip-border: #66bb6a;\n --mbr-alert-tip-icon-color: #66bb6a;\n\n --mbr-alert-important-bg: rgba(74, 20, 140, 0.2);\n --mbr-alert-important-border: #ab47bc;\n --mbr-alert-important-icon-color: #ab47bc;\n\n --mbr-alert-warning-bg: rgba(230, 81, 0, 0.2);\n --mbr-alert-warning-border: #ffa726;\n --mbr-alert-warning-icon-color: #ffa726;\n\n --mbr-alert-caution-bg: rgba(183, 28, 28, 0.2);\n --mbr-alert-caution-border: #ef5350;\n --mbr-alert-caution-icon-color: #ef5350;\n\n /* Task annotations - Dark Mode */\n --mbr-task-pri-high-color: #ffa726;\n --mbr-task-pri-urgent-color: #ef5350;\n --mbr-task-tag-bg: rgba(148, 163, 184, 0.2);\n --mbr-task-chip-bg: rgba(148, 163, 184, 0.14);\n --mbr-task-flash-color: rgba(255, 213, 79, 0.28);\n\n /* Review notes - Dark Mode */\n --mbr-review-issue-color: #ef5350;\n --mbr-review-suggestion-color: #ffa726;\n --mbr-review-note-color: #64b5f6;\n --mbr-review-praise-color: #66bb6a;\n --mbr-review-question-color: #ba68c8;\n --mbr-review-insight-color: #4fc3f7;\n --mbr-review-highlight-bg: rgba(255, 193, 7, 0.22);\n}\n\n/* ==================== Standard Block Quotes (> - Level 1 Nesting) ==================== */\nblockquote {\n /* avoid awkward indents when we nest blockquotes by clearing some defaults */\n padding: 0;\n border: none;\n}\nblockquote > p:last-child {\n /* this will remove the double padding from the blockquote element and the p for all of these */\n margin-bottom: 0;\n}\n:not(blockquote) > blockquote:not(:has(> blockquote)) {\n padding: var(--pico-spacing);\n border-left: 0.25rem solid var(--pico-blockquote-border-color);\n}\nblockquote:not(:has(blockquote)) p {\n font-style: italic;\n}\nblockquote > p {\n font-size: var(--pico-font-size);\n}\n\n/* ==================== Pull Quotes (>> - Level 2 Nesting) ==================== */\n\n/*\n * Pull quotes are created with double blockquote nesting (>>).\n * Styled like magazine pull quotes: larger text, bold border, italic styling.\n *\n * Example markdown:\n * >> This is a pull quote with larger, emphasized text\n */\n\n:not(blockquote) > blockquote > blockquote:not(:has(> blockquote)) {\n --pico-font-size: 1.5rem;\n --pico-font-weight: 500;\n font-style: italic;\n background-color: var(--mbr-pullquote-bg);\n border-left: 0.5rem solid var(--mbr-pullquote-border);\n color: var(--mbr-pullquote-color);\n padding: calc(var(--pico-spacing) * 2);\n}\n\n/* ==================== GitHub-Style Alerts ==================== */\n\n/*\n * GitHub-style alert blockquotes with semantic colors and icons.\n * Classes are automatically added by pulldown-cmark for markdown like:\n *\n * > [!NOTE]\n * > This is a note alert\n */\n\n/* Base alert styling */\nblockquote.markdown-alert-note,\nblockquote.markdown-alert-tip,\nblockquote.markdown-alert-important,\nblockquote.markdown-alert-warning,\nblockquote.markdown-alert-caution {\n position: relative;\n padding: var(--pico-spacing);\n padding-left: calc(var(--pico-spacing) * 2.5);\n margin: var(--pico-typography-spacing-vertical) 0;\n border-left: 0.5rem solid;\n border-radius: var(--pico-border-radius);\n}\n\n/* Icon positioning */\nblockquote.markdown-alert-note::before,\nblockquote.markdown-alert-tip::before,\nblockquote.markdown-alert-important::before,\nblockquote.markdown-alert-warning::before,\nblockquote.markdown-alert-caution::before {\n content: \"\";\n position: absolute;\n left: calc(var(--pico-spacing) * 0.75);\n top: calc(var(--pico-spacing) + 0.25rem);\n width: 20px;\n height: 20px;\n mask-size: contain;\n mask-repeat: no-repeat;\n mask-position: center;\n}\n\n/* Alert bodies are upright text at body size; only the title keeps the italic\n * that plain quotes use. */\nblockquote[class*=\"markdown-alert-\"] p {\n font-style: normal;\n font-size: 1em;\n}\n\n/* Alert title styling */\nblockquote.markdown-alert-note > p:first-of-type::before,\nblockquote.markdown-alert-tip > p:first-of-type::before,\nblockquote.markdown-alert-important > p:first-of-type::before,\nblockquote.markdown-alert-warning > p:first-of-type::before,\nblockquote.markdown-alert-caution > p:first-of-type::before {\n --pico-font-weight: 700;\n display: block;\n margin-bottom: 0.25rem;\n font-style: italic;\n}\n\n/* Note Alert (Blue) */\nblockquote.markdown-alert-note {\n background-color: var(--mbr-alert-note-bg);\n border-color: var(--mbr-alert-note-border);\n}\n\nblockquote.markdown-alert-note::before {\n mask-image: var(--mbr-icon-note);\n background-color: var(--mbr-alert-note-icon-color);\n}\n\nblockquote.markdown-alert-note > p:first-of-type::before {\n content: \"Note\";\n color: var(--mbr-alert-note-icon-color);\n}\n\n/* Tip Alert (Green) */\nblockquote.markdown-alert-tip {\n background-color: var(--mbr-alert-tip-bg);\n border-color: var(--mbr-alert-tip-border);\n}\n\nblockquote.markdown-alert-tip::before {\n background-color: var(--mbr-alert-tip-icon-color);\n mask-image: var(--mbr-icon-tip);\n}\n\nblockquote.markdown-alert-tip > p:first-of-type::before {\n content: \"Tip\";\n color: var(--mbr-alert-tip-icon-color);\n}\n\n/* Important Alert (Purple) */\nblockquote.markdown-alert-important {\n background-color: var(--mbr-alert-important-bg);\n border-color: var(--mbr-alert-important-border);\n}\n\nblockquote.markdown-alert-important::before {\n mask-image: var(--mbr-icon-important);\n background-color: var(--mbr-alert-important-icon-color);\n}\n\nblockquote.markdown-alert-important > p:first-of-type::before {\n content: \"Important\";\n color: var(--mbr-alert-important-icon-color);\n}\n\n/* Warning Alert (Orange) */\nblockquote.markdown-alert-warning {\n background-color: var(--mbr-alert-warning-bg);\n border-color: var(--mbr-alert-warning-border);\n}\n\nblockquote.markdown-alert-warning::before {\n background-color: var(--mbr-alert-warning-icon-color);\n mask-image: var(--mbr-icon-warning);\n}\n\nblockquote.markdown-alert-warning > p:first-of-type::before {\n content: \"Warning\";\n color: var(--mbr-alert-warning-icon-color);\n}\n\n/* Caution Alert (Red) */\nblockquote.markdown-alert-caution {\n background-color: var(--mbr-alert-caution-bg);\n border-color: var(--mbr-alert-caution-border);\n}\n\nblockquote.markdown-alert-caution::before {\n mask-image: var(--mbr-icon-caution);\n background-color: var(--mbr-alert-caution-icon-color);\n}\n\nblockquote.markdown-alert-caution > p:first-of-type::before {\n content: \"Caution\";\n color: var(--mbr-alert-caution-icon-color);\n}\n\n/* Incomplete marker \xe2\x80\x94 TK/TODO/FIXME/XXX, or whatever incomplete_markers\n * configures. A block whose first text starts with a marker is wrapped whole;\n * every other occurrence has just the marker word wrapped. The first wrapper on\n * a source line also carries an id=\"mbr-marker-{line}\" deep-link anchor.\n * Highlights drafts in server/GUI mode; off by default in static builds. */\n.mbr-incomplete {\n background: var(--mbr-incomplete-bg);\n padding: 0 0.15rem;\n border-radius: 2px;\n}\n\n/* A block-initial wrap containing a later inline wrap would otherwise stack two\n * translucent washes on the same word. The outer span already says \"this block\n * is incomplete\"; the inner one has nothing left to add. */\n.mbr-incomplete .mbr-incomplete {\n background: none;\n padding: 0;\n}\n\n/* ==================== Task Lists ==================== */\n\n/*\n * Markup emitted by `markdown::collect_events_and_headings` for `- [ ]`,\n * `- [x]`, `- [-]` (canceled) and `- [>]` (moved), with the `@due` / `@done` /\n * `#tag` / `!!` annotations lifted out of the text and rendered as chips:\n *\n * <li><input type=\"checkbox\" class=\"mbr-task-check\" id=\"mbr-task-12\"\n * data-mbr-task-line=\"12\" data-mbr-task-status=\"open\" disabled>\n * <span class=\"mbr-task-text\">write the report</span>\n * <span class=\"mbr-task-pri mbr-task-pri-urgent\" \xe2\x80\xa6></span>\n * <span class=\"mbr-task-tag\">#work</span>\n * <time class=\"mbr-task-due\" datetime=\"2026-08-05\">Aug 5</time></li>\n *\n * The `<li>` carries no class of its own -- pulldown-cmark gives the HTML\n * writer no attribute channel for list items -- so the bullet is suppressed by\n * matching on the checkbox instead. The second selector covers a loose list,\n * where the item\'s content is wrapped in a paragraph.\n */\n\nli:has(> .mbr-task-check),\nli:has(> p > .mbr-task-check) {\n list-style: none;\n}\n\n.mbr-task-check {\n /* Vertically centre against the text rather than sitting on the baseline. */\n vertical-align: middle;\n margin-inline-end: 0.4em;\n}\n\n/* Only when editing is on does `mbr-task-doc.ts` drop `disabled` and add this\n * class -- a box that cannot be written to must not invite a click. */\n.mbr-task-check.mbr-task-editable {\n cursor: pointer;\n}\n\n/*\n * Arrival flash for a `#mbr-task-42` deep link, applied to the task\'s <li> by\n * `mbr-task-doc.ts` on load and on every hashchange.\n *\n * A fading background rather than a border or an outline, so nothing in the\n * line moves: a layout shift landing at the same moment as the fragment jump\n * would scroll the task the user just followed a link to back off screen.\n */\n@keyframes mbr-task-flash {\n from {\n background-color: var(--mbr-task-flash-color, rgba(255, 213, 79, 0.55));\n }\n to {\n background-color: transparent;\n }\n}\n\nli.mbr-task-flash,\n.mbr-task-flash {\n border-radius: 4px;\n animation: mbr-task-flash 1.6s ease-out 1;\n}\n\n/* Respect a reduced-motion preference by holding the highlight steady and\n * letting the cleanup timeout remove it, rather than animating it away. */\n@media (prefers-reduced-motion: reduce) {\n li.mbr-task-flash,\n .mbr-task-flash {\n animation: none;\n background-color: var(--mbr-task-flash-color, rgba(255, 213, 79, 0.55));\n }\n}\n\n/* Canceled (`[-]`) and moved (`[>]`) tasks. Replaces the bare <s> the old\n * renderer emitted, so the strikethrough now stops at the task\'s own text and\n * leaves its subtasks and chips legible. */\n.mbr-task-canceled {\n text-decoration: line-through;\n color: var(--mbr-task-canceled-color);\n}\n\n/* Priority dot. Empty by design: the element is a swatch, and its meaning\n * reaches assistive tech through `role=\"img\"` + `aria-label`. */\n.mbr-task-pri {\n display: inline-block;\n width: var(--mbr-task-pri-size);\n height: var(--mbr-task-pri-size);\n border-radius: 50%;\n vertical-align: baseline;\n}\n\n.mbr-task-pri-high {\n background: var(--mbr-task-pri-high-color);\n}\n\n.mbr-task-pri-urgent {\n background: var(--mbr-task-pri-urgent-color);\n}\n\n.mbr-task-tag {\n background: var(--mbr-task-tag-bg);\n color: var(--mbr-task-tag-color);\n border-radius: var(--mbr-task-chip-radius);\n padding: 0.05em 0.5em;\n font-size: 0.85em;\n white-space: nowrap;\n}\n\n/*\n * Date chips. Styled neutrally on purpose: whether a due date is overdue\n * depends on today\'s date, and this HTML is cached by the server and frozen\n * outright by a static build, so an \"overdue\" class baked in at render time\n * would be wrong by the next morning. The frontend adds one at runtime; the\n * machine-readable value it needs is already in each chip\'s `datetime`.\n */\n.mbr-task-due,\n.mbr-task-completed,\n.mbr-task-moved {\n background: var(--mbr-task-chip-bg);\n color: var(--mbr-task-chip-color);\n border-radius: var(--mbr-task-chip-radius);\n padding: 0.05em 0.5em;\n font-size: 0.85em;\n white-space: nowrap;\n}\n\n/*\n * Chip icons: the shared Lucide shapes as masks in the text colour. Not a\n * glyph: the calendar\'s text-presentation selector (U+1F5D3 U+FE0E) is\n * ignored by Chromium, which drew a colour emoji in every due chip.\n */\n.mbr-task-due::before,\n.mbr-task-completed::before,\n.mbr-task-moved::before {\n content: \"\";\n display: inline-block;\n width: 0.95em;\n height: 0.95em;\n margin-inline-end: 0.3em;\n vertical-align: -0.12em;\n background-color: currentColor;\n -webkit-mask: var(--mbr-chip-icon) center / contain no-repeat;\n mask: var(--mbr-chip-icon) center / contain no-repeat;\n}\n\n.mbr-task-due {\n --mbr-chip-icon: var(--mbr-icon-calendar);\n}\n\n.mbr-task-completed {\n --mbr-chip-icon: var(--mbr-icon-check);\n}\n\n.mbr-task-moved {\n --mbr-chip-icon: var(--mbr-icon-arrow-right);\n}\n\n/* ==================== Marginalia (>>> - Level 3+ Nesting) ==================== */\n\n/*\n * Marginalia are created with triple blockquote nesting (>>>).\n * Uses a hover/click indicator to reveal sidenote content when there aren\'t margins.\n *\n * Example markdown:\n * >>> This is a margin note shown in gutter or via indicator\n */\n\n/* Marginalia container - inline indicator approach */\nblockquote blockquote:has(blockquote) {\n position: relative;\n}\n\nblockquote blockquote blockquote {\n display: block;\n position: absolute;\n left: 100%;\n top: -3rem;\n font-size: 0.75em;\n}\n\n/* Indicator marker */\nblockquote blockquote blockquote::before {\n content: \"\xe2\x80\xa0\";\n display: inline-block;\n color: var(--pico-primary);\n font-weight: 700;\n font-size: 1.5em;\n cursor: pointer;\n /* 3px, not more: the indicator hangs in the right-hand gutter (`left: 100%`\n * above), and the narrowest gutter it gets there is `--pico-spacing` (16px),\n * in the sidebar layout. At 4px a side the box was 17-18px wide and scrolled\n * the page sideways by the difference. (On a phone it moves inside the\n * quote instead; see \"Narrow Screens: Overflow\".) */\n padding: 0 3px;\n border-radius: var(--pico-border-radius);\n}\n\nblockquote blockquote blockquote:hover::before,\nblockquote blockquote blockquote:focus-within::before {\n background-color: var(--mbr-marginalia-bg);\n}\n\n/* Hide marginalia content by default if screen is less than x pixels; media queries below override */\nblockquote blockquote blockquote p {\n position: absolute;\n display: none;\n z-index: 1000;\n\n /* Popover styling */\n background-color: var(--pico-background-color);\n border: 1px solid var(--mbr-marginalia-border);\n border-left: 3px solid var(--pico-primary);\n border-radius: var(--pico-border-radius);\n box-shadow: var(--pico-box-shadow);\n padding: calc(var(--pico-spacing) * 0.75);\n margin: 0;\n\n /* Sizing and positioning */\n min-width: 280px;\n max-width: 90vw;\n transform: translateX(-100%) translateY(-50%);\n\n /* Text styling */\n --pico-font-size: 0.875em;\n --pico-line-height: 1.15;\n}\n\n/* Show marginalia on hover */\nblockquote blockquote blockquote:hover p,\nblockquote blockquote blockquote:focus-within p {\n display: block;\n}\n\n/* Popover arrow - points right toward the \xe2\x80\xa0 indicator */\nblockquote blockquote blockquote p::before {\n content: \"\";\n position: absolute;\n left: 100%;\n top: 12px;\n border: 8px solid transparent;\n border-left-color: var(--mbr-marginalia-border);\n}\n\nblockquote blockquote blockquote p::after {\n content: \"\";\n position: absolute;\n left: 100%;\n top: 13px;\n border: 7px solid transparent;\n border-left-color: var(--pico-background-color);\n margin-left: -1px;\n}\n\n/* Show marginalia fixed in margin when screen is wide enough.\n *\n * `screen and` for the same WebKit reason as the sidebar block above, and here\n * it changes printed output: the print block resets these paragraphs\' position,\n * transform and max-width but NOT their `width`, so on a wide Safari window an\n * unqualified query left `width: calc(100vw - 40px)` -- a *window*-relative\n * width in WebKit -- applied to every margin note on paper.\n *\n * The thresholds are where a 250px note first fits in the right-hand gutter\n * without scrolling the page sideways. Above 1536px Pico caps `.container`\n * at 1450px, so the gutter is half of whatever is left: without the docked\n * sidebar that clears the note from about 2040px, and with it -- the grid\n * column is `--mbr-sidebar-width` narrower -- only from about 2280px. (Both\n * used to share 2000px, which overflowed by 18px and 158px respectively.)\n * Below its threshold a note keeps the hover/click popover. The two blocks are\n * the same rules; only their scope differs, and `:where()` keeps that scope\n * from adding specificity, which would let these beat the later `p + p` reset. */\n@media screen and (min-width: 2080px) {\n :where(body:not(.mbr-has-sidebar)) blockquote blockquote blockquote::before {\n content: \"\";\n }\n\n :where(body:not(.mbr-has-sidebar)) blockquote blockquote blockquote p {\n left: calc(100% + 5px);\n width: calc(100vw - 40px);\n transform: translateY(-50%);\n max-width: 250px;\n display: block;\n border: none;\n box-shadow: none;\n background: none;\n border-radius: 0;\n }\n\n :where(body:not(.mbr-has-sidebar)) blockquote blockquote blockquote p::before,\n :where(body:not(.mbr-has-sidebar)) blockquote blockquote blockquote p::after {\n left: auto;\n right: 20px;\n border: none;\n transform: none;\n }\n}\n\n@media screen and (min-width: 2320px) {\n blockquote blockquote blockquote::before {\n content: \"\";\n }\n\n blockquote blockquote blockquote p {\n left: calc(100% + 5px);\n width: calc(100vw - 40px);\n transform: translateY(-50%);\n max-width: 250px;\n display: block;\n border: none;\n box-shadow: none;\n background: none;\n border-radius: 0;\n }\n\n blockquote blockquote blockquote p::before,\n blockquote blockquote blockquote p::after {\n left: auto;\n right: 20px;\n border: none;\n transform: none;\n }\n}\n\n/* Multiple paragraphs in marginalia */\nblockquote blockquote blockquote p + p {\n position: static;\n visibility: visible;\n opacity: 1;\n display: none;\n margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5);\n padding: 0;\n border: none;\n box-shadow: none;\n background: none;\n width: auto;\n max-width: none;\n}\n\nblockquote blockquote blockquote:hover p + p,\nblockquote blockquote blockquote:focus-within p + p {\n display: block;\n}\n\n/* Touch device support - keep visible longer after tap */\n@media (hover: none) {\n blockquote blockquote blockquote:focus p,\n blockquote blockquote blockquote:active p {\n visibility: visible;\n display: block;\n opacity: 1;\n }\n}\n\npre.mermaid {\n padding: var(--pico-typography-spacing-vertical);\n}\n\n/* ==================== Header Title ==================== */\n\n/*\n * The page title sits between two groups of buttons in a Pico `nav`, which is\n * `display: flex; justify-content: space-between`. A flex item will not shrink\n * below its content by default (`min-width: auto`), so a long title -- or a\n * narrow window, or a large font -- pushed the buttons on either side out of\n * the header instead of giving way.\n *\n * `min-width: 0` on the title\'s own group and item is what allows the shrink;\n * the clamp then falls to the `<strong>`. Deliberately scoped to this one group\n * by class rather than applied to `nav > ul`, because the button groups must\n * keep sizing to their contents.\n */\nbody > header nav > ul.mbr-title-group,\nbody > header nav > ul.mbr-title-group > li.mbr-nav-title {\n min-width: 0;\n}\n\n/*\n * One line, clipped with an ellipsis. `display: block` because `text-overflow`\n * does nothing on an inline box, and `<strong>` is inline by default.\n *\n * The clipping lives here and *not* on the `<li>`: the li carries Pico\'s\n * `data-tooltip`, whose bubble is an absolutely-positioned pseudo-element, and\n * an `overflow: hidden` ancestor would cut it off.\n */\nbody > header nav > ul.mbr-title-group > li.mbr-nav-title > strong {\n display: block;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n/*\n * The tooltip is Pico\'s, added by `components/src/nav-title.ts` only while the\n * text is actually clipped -- so the focus ring below appears only on a title\n * that has something hidden to reveal.\n * But exclude the mbr-nav-title from tooltip dotted underline\n */\nbody > header nav > ul.mbr-title-group > li.mbr-nav-title[data-tooltip] {\n cursor: help;\n border-bottom: none;\n}\n\nbody\n > header\n nav\n > ul.mbr-title-group\n > li.mbr-nav-title[data-tooltip]::before {\n /*\n * Long titles are the whole reason this exists, so let the bubble wrap rather\n * than run off the edge of a narrow window.\n *\n * `width: max-content` is doing the real work. Pico\'s bubble is absolutely\n * positioned, so without an explicit width it shrink-to-fits *within its\n * containing block* -- which is this `<li>`, the one element on the page we\n * have just made as narrow as possible. The result was a one-word-per-line\n * column. `max-content` sizes it to the text instead, and `max-width` is what\n * then brings it back under the viewport.\n */\n width: max-content;\n max-width: min(90vw, 40rem);\n white-space: normal;\n text-align: center;\n}\n\n/* ==================== Narrow Screens: Header and Breadcrumbs ==================== */\n\n/*\n * Phones, in mbr\'s own app and in mobile Safari alike. With seven buttons at\n * Pico\'s spacing, a 390px header left the page title one letter (\"B\xe2\x80\xa6\"), and a\n * deep path\'s breadcrumbs wrapped onto three or four lines.\n *\n * The header keeps one line and gives the title the room: the buttons close up\n * to half Pico\'s spacing, which is still a comfortable gap between icons.\n */\n@media screen and (max-width: 600px) {\n body > header nav > ul > li {\n padding-inline: calc(var(--pico-nav-element-spacing-horizontal) * 0.5);\n }\n\n body > header nav > ul.mbr-title-group > li.mbr-nav-title > strong {\n font-size: 0.95rem;\n }\n}\n\n/*\n * Breadcrumbs collapse to one line: \"\xe2\x80\xa6 \xe2\x80\xba parent \xe2\x80\xba this page\", the current\n * page\'s name ellipsized. `breadcrumbs.ts` adds the \"\xe2\x80\xa6\" button (only when\n * something is hidden) and toggles `.mbr-crumbs-expanded`, which shows the\n * whole path, wrapped as before.\n */\nnav.breadcrumbs li.mbr-crumbs-more {\n display: none;\n}\n\nnav.breadcrumbs .mbr-crumbs-more button {\n all: unset;\n display: inline-flex;\n align-items: center;\n vertical-align: middle;\n cursor: pointer;\n padding: 0 0.35rem;\n min-height: 1.5rem;\n color: var(--pico-primary);\n font-style: normal;\n}\n\n@media screen and (max-width: 600px) {\n nav.breadcrumbs:not(.mbr-crumbs-expanded) > ul {\n flex-wrap: nowrap;\n overflow: hidden;\n }\n\n nav.breadcrumbs:not(.mbr-crumbs-expanded) > ul > li {\n white-space: nowrap;\n flex: 0 0 auto;\n }\n\n /* Everything but the \"\xe2\x80\xa6\", the parent and the current page. */\n nav.breadcrumbs:not(.mbr-crumbs-expanded)\n > ul\n > li:not(:nth-last-child(-n + 2)):not(.mbr-crumbs-more) {\n display: none;\n }\n\n nav.breadcrumbs:not(.mbr-crumbs-expanded) > ul > li:last-child {\n flex: 1 1 auto;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n nav.breadcrumbs:not(.mbr-crumbs-expanded) > ul > li:nth-last-child(2) {\n max-width: 40%;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n nav.breadcrumbs:not(.mbr-crumbs-expanded) li.mbr-crumbs-more {\n display: list-item;\n }\n}\n\n/* ==================== Safe Areas (notch, home indicator) ==================== */\n\n/*\n * `_head.html` asks for `viewport-fit=cover`, so the page may run under the\n * notch (landscape) and the home indicator. Content keeps clear of both.\n *\n * Only below Pico\'s 576px container breakpoint: there `.container` is padded\n * by `--pico-spacing`, and `max()` keeps that unless an inset is larger. From\n * 576px up Pico centres a narrower container with no padding, whose margins\n * already clear a landscape notch, and desktop layouts must not change.\n */\n@media screen and (max-width: 575px) {\n body > header.container,\n body > nav.breadcrumbs.container,\n body > main.container,\n body > footer.container {\n padding-left: max(var(--pico-spacing), env(safe-area-inset-left, 0px));\n padding-right: max(var(--pico-spacing), env(safe-area-inset-right, 0px));\n }\n}\n\nbody {\n padding-bottom: env(safe-area-inset-bottom, 0px);\n}\n\n/* The sticky header starts below the status bar (or, in the app, below the\n * native navigation bar), its background still running up behind it; anchor\n * jumps clear both. */\nbody > header {\n padding-top: env(safe-area-inset-top, 0px);\n}\n\nhtml {\n scroll-padding-top: calc(3em + env(safe-area-inset-top, 0px));\n}\n\n/* ==================== Narrow Screens: Overflow ==================== */\n\n/*\n * Nothing in a note may widen the page: on a phone that turns every vertical\n * swipe into a diagonal one. Wide content scrolls inside its own box instead.\n * Measured at 390px on mbr\'s docs, ~95% of the overflow was markdown tables.\n *\n * Tables: `html.rs` wraps every markdown table in `div.mbr-table-scroll`. A\n * wrapper, not `display: block` on the table, because WebKit drops a\n * block-displayed table\'s row/column semantics for VoiceOver. The table keeps\n * Pico\'s `width: 100%`, so a narrow table still fills the column. The block\'s\n * bottom margin moves from the table to the wrapper, so the scrollbar sits\n * under the last row rather than below a gap, and the spacing is not doubled.\n */\n.mbr-table-scroll {\n overflow-x: auto;\n max-width: 100%;\n -webkit-overflow-scrolling: touch;\n margin-bottom: var(--pico-typography-spacing-vertical);\n}\n\n.mbr-table-scroll > table {\n margin-bottom: 0;\n}\n\n/* Pico spaces a heading that follows a table; the wrapper must not lose that. */\n:where(.mbr-table-scroll) ~ :is(h1, h2, h3, h4, h5, h6) {\n margin-top: var(--pico-typography-spacing-top);\n}\n\n/*\n * A table written as raw HTML in the note (or injected by its script) has no\n * wrapper. On a phone it becomes its own scroll box -- the accessibility cost\n * above, but only there and only for tables the renderer did not produce.\n * Not in a playing slide deck: Reveal lays every slide out at its own 960px\n * and scales it, so the phone\'s width says nothing about room on the slide.\n */\n@media screen and (max-width: 600px) {\n main table:not(.mbr-table-scroll > table, .reveal table) {\n display: block;\n overflow-x: auto;\n max-width: 100%;\n }\n}\n\n/*\n * Long unbreakable runs: inline code (`--oembed-cache-size`, paths) and bare\n * URLs as link text. `anywhere`, not `break-word`, because only `anywhere`\n * lowers the min-content width, which is what sizes a flex or grid item (a\n * figcaption, the sidebar layout\'s `1fr` column): with `break-word` one long\n * word still widens such a box past the viewport.\n *\n * Inside a table the opposite is wanted: the table scrolls, and `anywhere`\n * would instead let auto layout squeeze a column until `--flag` breaks into\n * one character per line.\n */\nmain :not(pre) > code,\nmain a {\n overflow-wrap: anywhere;\n}\n\nmain :is(td, th) :is(code, a) {\n overflow-wrap: normal;\n}\n\n/* Display math wider than the column scrolls; `overflow-y: hidden` would clip\n * KaTeX\'s descenders and tall delimiters without the padding. */\n.katex-display {\n overflow-x: auto;\n overflow-y: hidden;\n padding-block: 0.15em;\n}\n\n/* Media never wider than the column. Zero specificity beyond `main`, so the\n * theater figure\'s own sizing still wins. */\nmain :where(img, video, iframe, embed, object) {\n max-width: 100%;\n}\n\n/*\n * Marginalia (`>>>`): the \xe2\x80\xa0 indicator hangs in the right margin (`left:\n * 100%`), which on a phone is outside the viewport. Below 600px it sits at the\n * parent quote\'s right edge instead, and the note opens leftward from it at a\n * width that fits the screen (the 280px `min-width` alone could not).\n */\n@media screen and (max-width: 600px) {\n blockquote blockquote blockquote {\n left: auto;\n right: 0;\n }\n\n blockquote blockquote blockquote p {\n min-width: 0;\n width: min(280px, calc(100vw - 2rem));\n }\n}\n\n@media print {\n /* Paper cannot scroll: a scroll box would cut the table at the page edge. */\n .mbr-table-scroll {\n overflow: visible;\n }\n}\n\n/*\n * The app\'s safety net for anything the rules above miss: a stray pixel of\n * width would otherwise make the whole page pan sideways under a finger.\n * `clip`, never `hidden` -- `hidden` makes body a scroll container, which\n * breaks `position: sticky` on everything inside it. Only in the app: in a\n * browser, overflow is a bug these rules should fix, not hide.\n */\nhtml.mbr-embedded body {\n overflow-x: clip;\n}\n\n/* ==================== Embedded in the iOS App ==================== */\n\n/*\n * The app injects `html.mbr-embedded` (and `window.__MBR_EMBEDDED__`) before\n * any page script runs; desktop, server and static pages never have it. The\n * native navigation bar shows the title, a breadcrumb menu and every action\n * (through `app-bridge.ts`), so mbr\'s own header and breadcrumbs go.\n *\n * The header collapses rather than `display: none`: its components host the\n * overlays the app opens (search, info, tasks, the editor\'s loading state,\n * the browse drawer). Those are `position: fixed`, and an `overflow: hidden`\n * ancestor without a transform does not clip fixed descendants, so they still\n * show; inside a `display: none` ancestor they would not render at all.\n */\nhtml.mbr-embedded body > header {\n height: 0;\n min-height: 0;\n padding: 0;\n margin: 0;\n border: 0;\n overflow: hidden;\n}\n\nhtml.mbr-embedded body > nav.breadcrumbs {\n display: none;\n}\n\nhtml.mbr-embedded body {\n /* The page runs under the native navigation bar (viewport-fit=cover); the\n * inset is the bar\'s height. */\n padding-top: env(safe-area-inset-top, 0px);\n}\n\nhtml.mbr-embedded {\n /* No sticky header to clear on an anchor jump, only the native bar. */\n scroll-padding-top: calc(0.5em + env(safe-area-inset-top, 0px));\n}\n\n/* ==================== Downloading (a cloud note not on the device yet) ==================== */\n\n/*\n * `error.html`\'s `downloading` branch. Still a 503 with Retry-After/Refresh\n * underneath, but drawn as the ordinary first-access state it is: Pico\'s\n * indeterminate `<progress>`, the provider and the note\'s name.\n */\n.mbr-downloading {\n max-width: 28rem;\n margin: 18vh auto 2rem;\n margin-top: 18dvh;\n padding: 0;\n text-align: center;\n background: none;\n box-shadow: none;\n}\n\n.mbr-downloading progress {\n max-width: 14rem;\n margin-inline: auto;\n}\n\n.mbr-downloading-title {\n font-size: 1.35rem;\n margin-bottom: 0.25rem;\n}\n\n/*\n * Offline variant: the iOS app sets `html.mbr-offline` while the device has\n * no network path (never set on the desktop, a server or a static site).\n */\nhtml:not(.mbr-offline) .mbr-downloading-offline,\nhtml.mbr-offline .mbr-downloading-online {\n display: none;\n}\n\n.mbr-downloading-name {\n font-weight: 600;\n overflow-wrap: anywhere;\n margin-bottom: 0.5rem;\n}\n\n/* ==================== Link Enhancement Tooltips (GUI Mode) ==================== */\n\n/*\n * Subtle tooltip styling for links enhanced by mbr-link-enhancement component.\n * Only active in GUI mode where browser URL and status bar is not visible.\n * Users can override these styles in their own theme.css. And can disable by removing\n * the component that adds them or by using display: none; on this selector.\n */\na.mbr-link-enhanced[data-tooltip]::before {\n font-size: 0.65em;\n background-color: rgb(from var(--pico-tooltip-background-color) r g b / 0.75);\n}\na.mbr-link-enhanced[data-tooltip]::after {\n color: rgb(from var(--pico-tooltip-background-color) r g b / 0.75);\n}\n\n/* ==================== Collapsible Headings + Permalinks ==================== */\n\n/* Hidden sibling content when a heading is collapsed */\n.sectionhidden {\n display: none;\n}\n\n/* Collapsible heading affordance */\n.mbr-collapsible {\n cursor: pointer;\n user-select: none;\n}\n.mbr-collapsible:focus-visible {\n outline: 2px solid var(--pico-primary-focus, var(--pico-primary));\n outline-offset: 2px;\n}\n\n/* \"+\" prefix when collapsed */\n.mbr-section-collapsed::before {\n content: \"+ \";\n color: var(--pico-muted-color);\n font-weight: normal;\n}\n\n/* Permalink anchor \xe2\x80\x94 hidden by default, revealed on heading hover/focus */\n/*\n * The \"#\" is generated content, not a text node, so that selecting a heading\n * does not copy it and print/find-in-page never see it. mbr-heading-enhancer.ts\n * deliberately leaves the element empty; do not move this back into the markup.\n */\n.mbr-heading-anchor::after {\n content: \"#\";\n}\n.mbr-heading-anchor {\n margin-left: 0.4em;\n color: var(--pico-muted-color);\n text-decoration: none;\n font-weight: normal;\n opacity: 0;\n font-size: 0.85em;\n transition: opacity 0.15s ease-in-out;\n}\n:is(h1, h2, h3, h4, h5, h6):hover .mbr-heading-anchor,\n:is(h1, h2, h3, h4, h5, h6):focus-within .mbr-heading-anchor {\n opacity: 0.5;\n}\n.mbr-heading-anchor:hover,\n.mbr-heading-anchor:focus {\n opacity: 1;\n color: var(--pico-primary);\n text-decoration: underline;\n}\n\n/* ==================== Screen Reader Only (Accessibility) ==================== */\n\n/*\n * Visually hidden but accessible to screen readers and search indexers.\n * Used for high-weight search content (titles, filenames) that should\n * be indexed by Pagefind with maximum weight but not visible on page.\n */\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n\n/* ==================== Find in Page (GUI mode) ==================== */\n\n/*\n * <mbr-find-bar> registers its match ranges in CSS.highlights, which is a\n * DOCUMENT-scoped registry, and the ranges point into the light DOM under\n * main#wrapper. A ::highlight() rule inside the element\'s shadow root would\n * therefore match nothing at all -- these have to live here, in a sheet linked\n * from _head.html on every page and overridable via user.css.\n *\n * Only color, background-color, text-decoration*, text-shadow and\n * -webkit-text-stroke are honoured inside ::highlight(); borders and outlines\n * are ignored. An engine without the Custom Highlight API drops just these two\n * rules, and the bar falls back to a plain Selection on the active match.\n */\n::highlight(mbr-find) {\n background-color: rgba(255, 214, 0, 0.4);\n color: inherit;\n}\n\n::highlight(mbr-find-active) {\n background-color: #ff9632;\n color: #000;\n}\n\n/*\n * Review-note wash. Same document-scoped-registry reasoning as the find rules\n * above: `<mbr-review>` registers ranges that point into the light DOM under\n * main#wrapper, so these cannot live in the element\'s own shadow styles.\n *\n * Only color, background-color, text-decoration*, text-shadow and\n * -webkit-text-stroke are honoured inside ::highlight(), which is why the\n * quoted span gets a wash and an underline rather than a border. An engine\n * without the Custom Highlight API drops this rule and keeps every marker --\n * the marker, not the wash, is what a reader clicks.\n */\n::highlight(mbr-review) {\n background-color: var(--mbr-review-highlight-bg, rgba(255, 193, 7, 0.28));\n text-decoration: underline dotted;\n text-underline-offset: 0.15em;\n}\n\n/* ==================== Review Note Markers (r / R) ==================== */\n\n/*\n * One marker per anchored note, injected into the block it belongs to by\n * `components/src/review/markers.ts`.\n *\n * The element is deliberately EMPTY -- its glyph is generated content. A real\n * text node inside the block would join the block\'s text run, so selecting a\n * paragraph would copy its markers, every `textContent` reader would see them,\n * and the review feature would end up quoting its own markers. Generated\n * content is excluded from the copy buffer in every engine. Same trick as\n * `.mbr-heading-anchor::after`.\n */\n/*\n * The marker sits in the margin beside the block\'s FIRST line -- the line the\n * note actually refers to -- rather than in the text flow.\n *\n * Appended as the block\'s last child, an inline marker lands after the last\n * word of a wrapped paragraph, which reads as a mark floating between two\n * lines and points at the wrong line entirely. Taking it out of flow and\n * pinning it to `top: 0` puts it level with the line whose number the note\n * stores. Same placement idea as the `>>>` marginalia dagger above.\n *\n * `left: 100%` puts it in the container\'s own horizontal padding, which exists\n * at every viewport width, so this needs no breakpoint. `:has()` scopes the\n * positioning context to blocks that actually carry a marker -- making every\n * `<p>` on the page a containing block would change stacking for anything\n * absolutely positioned inside one.\n */\n[data-mbr-line]:has(> .mbr-review-marker) {\n position: relative;\n}\n\n/*\n * The marker is a flex box holding one inline `<svg>`.\n *\n * # Why so many resets\n *\n * The element is `role=\"button\"`, and Pico styles `[role=button]` as a full\n * button: `padding: var(--pico-form-element-spacing-vertical) ...-horizontal`\n * (~0.75rem 1rem), a border, and `background-color: var(--pico-primary-background)`.\n * Combined with Pico\'s global `box-sizing: border-box` on `*`, a fixed `width`\n * on this box left a content area of ZERO -- and the `<svg>` inside, being a\n * shrinkable flex item, collapsed to nothing. The visible result was a solid\n * blue rectangle: Pico\'s primary button background, with no icon in it.\n *\n * So: no fixed width (the box shrink-wraps icon + padding, which makes\n * box-sizing irrelevant), `flex: none` on the icon so it can never be shrunk\n * away again, and an explicit reset of every button property Pico sets. None\n * of the declarations below is decorative.\n */\n.mbr-review-marker {\n position: absolute;\n left: 100%;\n top: 0;\n margin-left: 0.25rem;\n\n /* Resets of Pico\'s [role=button] styling. */\n width: auto;\n height: auto;\n padding: 6px;\n border: none;\n box-shadow: none;\n font-size: var(--mbr-review-marker-size, 0.8em);\n font-weight: inherit;\n line-height: 1;\n\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n user-select: none;\n border-radius: var(--pico-border-radius, 4px);\n\n /* Colour goes on the BACKGROUND, with a white icon on top. Tinting the icon\n * itself and leaving the background transparent put a mid-saturation stroke\n * on the page background, which failed contrast at this size. */\n background-color: var(--mbr-review-note-color, #1976d2);\n color: #fff;\n transition: filter 0.15s ease;\n}\n\n.mbr-review-marker > svg {\n display: block;\n /* Never shrink: as a flex item the icon is otherwise the first thing to be\n * squeezed out when anything constrains the box. */\n flex: none;\n width: 1.15em;\n height: 1.15em;\n /* White on a colour disc at ~15px: a touch heavier than the UI weight. */\n --mbr-icon-stroke: 2;\n}\n\n.mbr-review-marker:hover,\n.mbr-review-marker:focus-visible {\n filter: brightness(1.15);\n}\n\n.mbr-review-marker[data-mbr-review-type=\"issue\"] {\n background-color: var(--mbr-review-issue-color, #c62828);\n}\n\n.mbr-review-marker[data-mbr-review-type=\"suggestion\"] {\n background-color: var(--mbr-review-suggestion-color, #f57c00);\n}\n\n.mbr-review-marker[data-mbr-review-type=\"praise\"] {\n background-color: var(--mbr-review-praise-color, #388e3c);\n}\n\n.mbr-review-marker[data-mbr-review-type=\"question\"] {\n background-color: var(--mbr-review-question-color, #7b1fa2);\n}\n\n.mbr-review-marker[data-mbr-review-type=\"insight\"] {\n background-color: var(--mbr-review-insight-color, #0288d1);\n}\n\n/* A note whose quoted text can no longer be found. It keeps its last known\n * line and is never deleted, so the marker says so instead. */\n.mbr-review-marker[data-mbr-review-stale=\"true\"] {\n background-color: var(--mbr-review-stale-color, #5c6b73);\n opacity: 0.75;\n}\n\n/*\n * More than one note on the same anchor: one marker, a count badge.\n * Absolutely positioned so it cannot push the icon off centre -- as a flex\n * sibling it would share the box and shift the icon left.\n */\n.mbr-review-marker[data-mbr-review-count]:not(\n [data-mbr-review-count=\"1\"]\n )::after {\n content: attr(data-mbr-review-count);\n position: absolute;\n top: -0.35em;\n right: -0.35em;\n min-width: 1.15em;\n padding: 0 0.15em;\n font-size: 0.7em;\n line-height: 1.15em;\n text-align: center;\n font-weight: 700;\n color: var(--pico-color, #333);\n background: var(--pico-background-color, #fff);\n border: 1px solid var(--pico-muted-border-color, #ccc);\n border-radius: 1em;\n}\n\n/*\n * The note card shown when a marker is hovered, focused or clicked.\n *\n * Lives here and not in `<mbr-review>`\'s `static styles` for the same reason\n * the footnote card\'s rules do: the element is appended to `document.body`, so\n * a rule inside the component\'s shadow root would not reach it. Without these\n * rules the card is `position: static` and lands unstyled at the very end of\n * the document -- present, but invisible where the reader is looking.\n */\n.mbr-review-popover {\n position: fixed;\n z-index: 1000;\n max-width: min(380px, 90vw);\n max-height: 50vh;\n overflow-y: auto;\n padding: 0.6rem 0.75rem;\n font-size: 0.875em;\n line-height: 1.5;\n color: var(--pico-color);\n background: var(--pico-background-color);\n border: 1px solid var(--pico-muted-border-color);\n border-radius: var(--pico-border-radius);\n box-shadow: var(--pico-box-shadow, 0 4px 16px rgba(0, 0, 0, 0.18));\n}\n\n.mbr-review-popover-card + .mbr-review-popover-card {\n margin-top: 0.6rem;\n padding-top: 0.6rem;\n border-top: 1px solid var(--pico-muted-border-color);\n}\n\n.mbr-review-popover-head {\n font-size: 0.75em;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: var(--pico-muted-color, #5c6b73);\n margin-bottom: 0.2rem;\n}\n\n.mbr-review-popover-body {\n white-space: pre-wrap;\n}\n\n.mbr-review-popover pre {\n margin: 0.4rem 0 0;\n padding: 0.4rem 0.5rem;\n font-size: 0.85em;\n white-space: pre-wrap;\n background: var(--pico-card-background-color, #f8f9fa);\n border-radius: var(--pico-border-radius);\n}\n\n.mbr-review-popover-actions {\n display: flex;\n gap: 0.4rem;\n margin-top: 0.5rem;\n}\n\n/*\n * These are real <button>s in the light DOM, so Pico styles them as full\n * buttons -- the same trap that collapsed the marker. Every property below\n * that looks redundant is overriding something Pico sets. (The panel and the\n * note form are inside shadow roots, where Pico cannot reach them.)\n */\n.mbr-review-popover-actions button {\n width: auto;\n margin: 0;\n padding: 0.15rem 0.5rem;\n font-size: 0.8em;\n font-weight: inherit;\n line-height: 1.4;\n background: transparent;\n color: var(--pico-primary, #0172ad);\n border: 1px solid var(--pico-muted-border-color, #ccc);\n border-radius: var(--pico-border-radius, 4px);\n box-shadow: none;\n cursor: pointer;\n}\n\n.mbr-review-popover-actions button:hover {\n background: var(--pico-secondary-background, rgba(0, 0, 0, 0.05));\n}\n\n/* ==================== Footnotes (GitHub-Flavored Markdown) ==================== */\n\n/*\n * Footnotes are created with [^1] syntax in markdown.\n * The footnote definitions appear at the bottom of the document.\n *\n * Example markdown:\n * Here is some text with a footnote[^1].\n *\n * [^1]: This is the footnote content.\n */\n\n/* Footnote reference links (the superscript numbers in the text) */\nsup.footnote-reference {\n font-size: 0.75em;\n vertical-align: super;\n line-height: 0;\n text-decoration: none;\n font-weight: 600;\n top: -0.2em;\n}\n\n/* Footnote definitions container - all footnotes at bottom */\n.footnote-definition {\n font-size: 0.875em;\n line-height: 1.5;\n margin: 0 0 0.75rem 0;\n padding-left: 2.5rem;\n color: var(--pico-muted-color);\n}\n\n/* Add a subtle divider before the first footnote */\n.footnote-definition:first-of-type {\n margin-top: var(--pico-spacing);\n padding-top: var(--pico-spacing);\n border-top: 1px solid var(--pico-muted-border-color);\n}\n\n/* Footnote label (the number) */\n.footnote-definition-label {\n font-weight: 700;\n color: var(--pico-primary);\n min-width: 2rem;\n text-align: right;\n padding-right: 0.5rem;\n display: inline;\n margin: 0;\n}\n\n.footnote-definition sup {\n vertical-align: baseline;\n font-size: 1em;\n margin-block-start: 1em;\n display: inline;\n position: static;\n}\n\n.footnote-definition-label::after {\n content: \".\";\n}\n\n/* Footnote content paragraphs */\n.footnote-definition p {\n margin: 0;\n display: inline;\n}\n\n/* Back-reference link (\xe2\x86\xa9) */\n.footnote-definition a[href^=\"#fnref\"] {\n margin-left: 0.25em;\n text-decoration: none;\n opacity: 0.6;\n font-size: 0.9em;\n}\n\n.footnote-definition a[href^=\"#fnref\"]:hover {\n opacity: 1;\n}\n\n/*\n * Hover preview card (desktop only), injected by <mbr-footnote-preview>.\n * Shows the footnote\'s content in a floating card when the reader hovers or\n * focuses a footnote reference. Positioned via inline left/top by the component.\n */\n.mbr-footnote-popover {\n position: fixed;\n z-index: 1000;\n max-width: min(360px, 90vw);\n max-height: 50vh;\n overflow-y: auto;\n padding: 0.5rem 0.75rem;\n font-size: 0.875em;\n line-height: 1.5;\n color: var(--pico-color);\n background: var(--pico-background-color);\n border: 1px solid var(--pico-muted-border-color);\n border-radius: var(--pico-border-radius);\n box-shadow: var(--pico-box-shadow, 0 4px 16px rgba(0, 0, 0, 0.18));\n}\n\n/* Collapse the definition\'s inline-flow margins inside the card. */\n.mbr-footnote-popover p {\n margin: 0;\n}\n\n.mbr-footnote-popover p + p {\n margin-top: 0.5rem;\n}\n\n/* ==================== Definition Lists (FAQ-style disclosure) ==================== */\n\n/*\n * Markdown definition lists render as an FAQ: each `<dt>` is a question, and\n * its `<dd>` answer is collapsed until the question is activated.\n *\n * Example markdown:\n * What is mbr?\n * : A markdown browser, previewer and static site generator.\n *\n * This is deliberately JavaScript-free. The only hook is `tabindex=\"0\"` on\n * every `<dt>` (emitted by `src/html.rs`), which makes the question focusable\n * so `:focus` can stand in for \"open\".\n *\n * ACCEPTED LIMITATION -- clicking an already-open question does NOT close it,\n * because the click just re-focuses a `<dt>` that already has focus and CSS\n * has no way to toggle. Clicking a different question, or anywhere off the\n * list, does close it. The same mechanic means clicking *inside* an open\n * answer (to select its text, say) moves focus to the body and collapses it;\n * select from the question end, or print, to work around that. A real toggle\n * needs `<details>` markup or JavaScript, and neither is on the table here.\n *\n * Scoped to `main` so it only ever touches rendered markdown -- `<dl>`s built\n * by templates or components stay untouched. (`<mbr-keys>` also renders a\n * `<dl>`, but it lives in a shadow root this sheet cannot reach anyway.)\n */\n\nmain dl {\n margin-block: calc(var(--pico-spacing) * 1.5);\n /* Each `dt` draws the separator above itself; this closes off the last\n * answer so the list reads as a bounded block. */\n border-bottom: 1px solid var(--mbr-dl-separator-color);\n}\n\nmain dl > dt {\n cursor: pointer;\n -webkit-user-select: none;\n user-select: none;\n color: var(--mbr-dl-question-color);\n font-weight: var(--mbr-dl-question-weight);\n border-top: 1px solid var(--mbr-dl-separator-color);\n padding-block: var(--mbr-dl-item-spacing);\n /* Hanging indent: the marker sits in the gutter and the second line of a\n * long question lines up under the first line\'s text, not under the marker. */\n padding-inline-start: calc(\n var(--mbr-dl-marker-size) + var(--mbr-dl-marker-gap)\n );\n text-indent: calc(\n -1 * (var(--mbr-dl-marker-size) + var(--mbr-dl-marker-gap))\n );\n border-radius: var(--pico-border-radius);\n transition: color var(--mbr-dl-transition-duration)\n var(--mbr-dl-transition-easing);\n}\n\n/* The negative `text-indent` above is inherited, and it applies to the first\n * line of every *block container* -- which includes inline-blocks. Pico draws\n * `code` / `kbd` as `inline-block`, so a question like \"set a page\'s `<body>`\n * classes?\" pulled its code span\'s text a marker-width to the left, over the\n * word before it. Resetting it on every descendant is safe: an inline element\n * ignores `text-indent`, so only the inline-blocks notice. */\nmain dl > dt * {\n text-indent: 0;\n}\n\nmain dl > dt:hover {\n color: var(--mbr-dl-question-hover-color);\n}\n\n/* Suppress the ring on mouse activation, then put a real one back for keyboard\n * users below -- same idiom as `.mbr-collapsible` above. */\nmain dl > dt:focus {\n outline: none;\n}\n\nmain dl > dt:focus-visible {\n outline: 2px solid var(--pico-primary-focus, var(--pico-primary));\n outline-offset: 2px;\n}\n\n/* Disclosure marker. A square box clipped to a triangle, rather than the\n * classic zero-size border trick, so `rotate()` pivots about the box\'s centre\n * instead of drifting as it turns. */\nmain dl > dt::before {\n content: \"\";\n display: inline-block;\n inline-size: var(--mbr-dl-marker-size);\n block-size: var(--mbr-dl-marker-size);\n margin-inline-end: var(--mbr-dl-marker-gap);\n vertical-align: -0.04em;\n background-color: var(--mbr-dl-marker-color);\n clip-path: polygon(25% 0%, 25% 100%, 90% 50%);\n transition: transform var(--mbr-dl-transition-duration)\n var(--mbr-dl-transition-easing);\n}\n\n/* Rotate the marker while this question\'s answers are open. The second\n * selector reads \"the nearest preceding question of the answer holding focus\":\n * it has a later answer with focus inside, and no *other* question stands\n * between the two. Without the `:not()` every question above the open one\n * would point down as well. */\nmain dl > dt:focus::before,\nmain dl > dt:has(~ dd:focus-within):not(:has(~ dt ~ dd:focus-within))::before,\nmain dl > dt:has(+ dd.mbr-find-reveal)::before {\n transform: rotate(90deg);\n}\n\n/* Collapsed answer.\n *\n * `visibility: hidden` is doing more work than it looks. `height: 0;\n * overflow: hidden` alone hides the answer visually but leaves any links\n * inside it in the tab order, so a keyboard user tabs into content they cannot\n * see. `visibility: hidden` removes descendants from both the tab order and\n * the accessibility tree, which fixes that.\n *\n * It has to be `visibility` specifically: `display: none` would kill the\n * height transition, and `content-visibility: hidden` / `interactivity: inert`\n * would make the answer permanently unfocusable, breaking the focus handoff in\n * the rule below. */\nmain dl > dd {\n visibility: hidden;\n height: 0;\n overflow: hidden;\n /* Zeroed so a collapsed answer contributes no height at all. Margins stay 0\n * in both states; only padding is restored on open, which keeps the\n * separator lines evenly placed. `overflow: hidden` also establishes a block\n * formatting context, so a loose definition\'s `<p>` margins cannot collapse\n * out through this box and reopen a gap. */\n margin-block: 0;\n padding-block: 0;\n margin-inline-start: var(--mbr-dl-answer-indent);\n color: var(--mbr-dl-answer-color);\n}\n\n/* Pico gives `p`, `ol`, `ul`, `blockquote`, `address`, `table`, `th` and `td`\n * an explicit `color: var(--pico-color)`, so an answer holding a list, a loose\n * paragraph or a table drew those in the question\'s colour, not the answer\'s.\n * Inherit instead -- at any depth, since a nested list\'s `ul` is colored too.\n * Links, code, headings and `li::marker` set their own colour and are untouched;\n * a pull quote\'s rule out-ranks this one, so it keeps its own colour as well. */\nmain dl > dd :where(p, ol, ul, blockquote, address, table, th, td) {\n color: inherit;\n}\n\n/* Open answer.\n *\n * The combinator is `~`, not `+`, because one question may legitimately own\n * several answers -- markdown\'s `Term` / `: one` / `: two` emits a `<dt>`\n * followed by two sibling `<dd>`s, and so does any tight list whose entries\n * are not blank-line separated. With `+` only the first answer would ever\n * open, and since a closed answer is `visibility: hidden` the rest would be\n * both invisible and untabbable, i.e. unreachable content.\n *\n * The `dd:focus-within` selectors are what make tabbing from a question into a\n * link inside its answer work. At the instant focus leaves the `dt`,\n * `dt:focus ~ dd` still matches, so the answers are visible and their links\n * are focusable and can be reached; the moment focus lands inside,\n * `dd:focus-within` takes over. Style recalculation happens after the focus\n * move, so there is no frame in which neither selector matches and the answer\n * flickers shut. `dd:focus-within ~ dd` keeps the *other* answers of a\n * multi-answer question open too, so tabbing reaches every one of them.\n *\n * `dd:focus-within` can never open a *closed* answer on its own: `visibility:\n * hidden` makes its descendants unfocusable, so focus can only ever get inside\n * by way of the question. */\nmain dl > dt:focus ~ dd,\nmain dl > dd:focus-within,\nmain dl > dd:focus-within ~ dd {\n visibility: visible;\n height: auto;\n padding-block: 0 var(--mbr-dl-item-spacing);\n}\n\n/* The GUI find bar\'s stand-in for `dt:focus` (`<mbr-find-bar>`, class\n * `FIND_REVEAL_CLASS` in `find-in-page.ts`). When the active match is inside a\n * collapsed answer the bar opens it -- but it cannot focus the question, since\n * focus must stay in the find input, so it puts this class on every `<dd>` of\n * the entry instead (the same set `dt:focus ~ dd` opens) and the marker rule\n * above turns for it too. Being on the answers themselves, it needs no \"until\n * the next question\" counterpart. The bar removes it when the active match\n * moves on, and after the bar closes, on the reader\'s next click elsewhere. */\nmain dl > dd.mbr-find-reveal {\n visibility: visible;\n height: auto;\n padding-block: 0 var(--mbr-dl-item-spacing);\n}\n\n/* `~` reaches every later sibling, including the answers belonging to the NEXT\n * question, so shut those again. CSS has no \"until\" combinator; interposing a\n * `dt` is how we say \"past the end of this entry\". These win on specificity\n * (one extra type selector) as well as source order, and they are inert\n * whenever nothing is focused -- which is why they do not fight the print\n * rules below. */\nmain dl > dt:focus ~ dt ~ dd,\nmain dl > dd:focus-within ~ dt ~ dd {\n visibility: hidden;\n height: 0;\n padding-block: 0;\n}\n\n/* Height only animates where the intrinsic-size keywords can be interpolated.\n * Everything is gated together so browsers without it (Safari, at time of\n * writing) snap the answer open cleanly rather than animating the padding\n * against a height that jumps. No `max-height` magic numbers. */\n@supports (interpolate-size: allow-keywords) {\n :root {\n /* Inherited, so it is set at the root as the feature intends. */\n interpolate-size: allow-keywords;\n }\n\n main dl > dd {\n transition:\n height var(--mbr-dl-transition-duration) var(--mbr-dl-transition-easing),\n padding-block var(--mbr-dl-transition-duration)\n var(--mbr-dl-transition-easing),\n visibility var(--mbr-dl-transition-duration);\n /* `visibility` interpolates by its own rule -- any value strictly between\n * the endpoints resolves to `visible` -- so a closing answer stays on\n * screen for the whole duration and only vanishes at the end, which is\n * what lets the collapse animate instead of blinking out. `allow-discrete`\n * is a no-op for `visibility` itself; it is here so that a genuinely\n * discrete property added to this list by an override behaves too. */\n transition-behavior: allow-discrete;\n }\n}\n\n/* Must follow the @supports block: equal specificity, so source order decides. */\n@media (prefers-reduced-motion: reduce) {\n main dl > dt,\n main dl > dt::before,\n main dl > dd {\n transition: none;\n }\n}\n\n/* Flashcard pages (`type: flashcard`): the disclosure above stays -- a question\n * with its answer hidden is what a flashcard is -- and each card\'s review\n * history is collapsed into a one-line `<details>` by `<mbr-flashcards>`\n * (`flashcards/dom.ts`). Opening that `<summary>` moves focus into the history\n * `<dd>`, which `dd:focus-within ~ dd` keeps open but which would close the\n * answers *before* it; this keeps the earlier answers of the same card open\n * too (the `:not()` stops at the previous card, as with the marker rule). */\nbody.flashcard\n main\n dl\n > dd:has(~ dd:focus-within):not(:has(~ dt ~ dd:focus-within)) {\n visibility: visible;\n height: auto;\n padding-block: 0 var(--mbr-dl-item-spacing);\n}\n\nmain dl > dd.mbr-fc-history summary {\n font-size: 0.85em;\n color: var(--pico-muted-color);\n cursor: pointer;\n margin: 0;\n}\n\nmain dl > dd.mbr-fc-history details {\n margin: 0;\n}\n\nmain dl > dd.mbr-fc-history ul {\n font-size: 0.85em;\n margin-block: 0.4em 0;\n}\n\n/* Flashcard rating colours: one definition for the deck\'s rating buttons\n * (`flashcards/styles.ts`) and the reading view\'s progress indicators below.\n * Again is a true red, not Pico\'s --pico-del-color: that is a muted salmon\n * that reads as orange beside Hard\'s amber. Same pair as chat\'s slot 0.\n * Declared on `[data-theme]` too so Good/Easy, which follow Pico\'s own\n * colours, resolve against the theme of the element that sets one. */\n:root,\n[data-theme] {\n --mbr-fc-again: #c62828;\n --mbr-fc-hard: #b7791f;\n --mbr-fc-good: var(--pico-ins-color, #2e7d32);\n --mbr-fc-easy: var(--pico-primary, #0172ad);\n --mbr-fc-unreviewed: #9ca3af;\n}\n@media only screen and (prefers-color-scheme: dark) {\n :root:not([data-theme]) {\n --mbr-fc-again: #ef5350;\n --mbr-fc-unreviewed: #6b7280;\n }\n}\n[data-theme=\"dark\"] {\n --mbr-fc-again: #ef5350;\n --mbr-fc-unreviewed: #6b7280;\n}\n\n/* Reading-view progress (`flashcards/progress.ts`): a reviewed question\'s\n * left border is its latest rating. Scoped to `main` so it can never reach\n * the deck overlay (appended to <body>; its clones drop the class anyway).\n * The extra padding keeps the disclosure marker off the border. `:where()`\n * keeps the specificity of a bare `main dl > dt`, so the print rules further\n * down (no marker, no indent) still win on paper. */\nmain\n dl\n > dt:where(\n .mbr-fc-last-again,\n .mbr-fc-last-hard,\n .mbr-fc-last-good,\n .mbr-fc-last-easy\n ) {\n border-left: 2px solid var(--mbr-fc-last);\n padding-inline-start: calc(\n var(--mbr-dl-marker-size) + var(--mbr-dl-marker-gap) + 0.4em\n );\n}\nmain dl > dt.mbr-fc-last-again {\n --mbr-fc-last: var(--mbr-fc-again);\n}\nmain dl > dt.mbr-fc-last-hard {\n --mbr-fc-last: var(--mbr-fc-hard);\n}\nmain dl > dt.mbr-fc-last-good {\n --mbr-fc-last: var(--mbr-fc-good);\n}\nmain dl > dt.mbr-fc-last-easy {\n --mbr-fc-last: var(--mbr-fc-easy);\n}\n\n/* A heading\'s pie of its cards\' latest ratings. Textless (an aria-hidden svg\n * inside a role=\"img\" span), so copying the heading copies only its words. */\nmain .mbr-fc-pie {\n display: inline-block;\n width: 0.8em;\n height: 0.8em;\n margin-inline-start: 0.4em;\n vertical-align: -0.05em;\n line-height: 0;\n}\nmain .mbr-fc-pie svg {\n display: block;\n width: 100%;\n height: 100%;\n}\nmain .mbr-fc-pie-again {\n fill: var(--mbr-fc-again);\n}\nmain .mbr-fc-pie-hard {\n fill: var(--mbr-fc-hard);\n}\nmain .mbr-fc-pie-good {\n fill: var(--mbr-fc-good);\n}\nmain .mbr-fc-pie-easy {\n fill: var(--mbr-fc-easy);\n}\nmain .mbr-fc-pie-unreviewed {\n fill: var(--mbr-fc-unreviewed);\n}\n\n/* ==================== Contact card ====================\n *\n * The page header of `type: person` / `type: organization` notes\n * (`_contact_card.html`). Pico variables only, so it follows every theme and\n * both color schemes; no fixed widths, so it reflows down to a phone.\n *\n * Section titles are <p>, not <h2>: `<mbr-heading-enhancer>` gives every\n * `main` heading a permalink, and \"Phone\" is not a place anyone links to. */\n\n.mbr-contact-card {\n --mbr-contact-avatar-size: 5.5rem;\n margin: 0 0 var(--pico-block-spacing-vertical, 1.5rem);\n padding: var(--pico-spacing, 1rem) calc(var(--pico-spacing, 1rem) * 1.25);\n border: 1px solid var(--pico-muted-border-color, #e0e0e0);\n border-radius: var(--pico-border-radius, 0.5rem);\n background: var(--pico-card-background-color, transparent);\n box-shadow: var(--pico-card-box-shadow, none);\n}\n\n.mbr-contact-card-identity {\n display: flex;\n align-items: center;\n gap: calc(var(--pico-spacing, 1rem) * 1.25);\n}\n\n.mbr-contact-card-avatar {\n flex: none;\n width: var(--mbr-contact-avatar-size);\n height: var(--mbr-contact-avatar-size);\n border-radius: 50%;\n object-fit: cover;\n background: var(--pico-secondary-background, #eee);\n}\n\n.mbr-contact-card[data-kind=\"organization\"] .mbr-contact-card-avatar {\n border-radius: var(--pico-border-radius, 0.5rem);\n}\n\n.mbr-contact-card-avatar-default {\n display: inline-flex;\n padding: calc(var(--mbr-contact-avatar-size) * 0.18);\n color: var(--pico-secondary-inverse, #fff);\n background: var(--pico-secondary, #6c757d);\n}\n\n.mbr-contact-card-avatar-default > svg {\n width: 100%;\n height: 100%;\n}\n\n/* The genealogy tint the old infobox carried, kept subtle and theme-relative. */\n.mbr-contact-card[data-gender=\"female\"] .mbr-contact-card-avatar-default {\n background: color-mix(in srgb, var(--pico-secondary, #6c757d) 45%, #c2477a);\n}\n\n.mbr-contact-card[data-gender=\"male\"] .mbr-contact-card-avatar-default {\n background: color-mix(in srgb, var(--pico-secondary, #6c757d) 45%, #2f6fb5);\n}\n\n.mbr-contact-card-heading {\n min-width: 0;\n}\n\n.mbr-contact-card-heading > * {\n margin: 0;\n}\n\n.mbr-contact-card-heading > * + * {\n margin-top: 0.25rem;\n}\n\n.mbr-contact-card-name {\n overflow-wrap: anywhere;\n}\n\n.mbr-contact-card-role span + span::before,\n.mbr-contact-card-aliases span + span::before {\n content: \" \xc2\xb7 \";\n color: var(--pico-muted-color, #666);\n}\n\n.mbr-contact-card-aliases {\n font-style: italic;\n color: var(--pico-muted-color, #666);\n}\n\n.mbr-contact-card-chip {\n display: inline-block;\n width: auto;\n margin: 0.25rem 0 0;\n padding: 0.15rem 0.7rem;\n font-size: 0.85rem;\n border-radius: 999px;\n --pico-background-color: transparent;\n --pico-color: var(--pico-primary, inherit);\n --pico-border-color: var(--pico-primary-border, currentColor);\n}\n\n.mbr-contact-card-sections {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));\n gap: var(--pico-spacing, 1rem) calc(var(--pico-spacing, 1rem) * 1.5);\n margin-top: var(--pico-spacing, 1rem);\n padding-top: var(--pico-spacing, 1rem);\n border-top: 1px solid var(--pico-muted-border-color, #e0e0e0);\n}\n\n/* Pico gives every <section> a block margin; the grid gap already spaces these. */\n.mbr-contact-card-section {\n margin: 0;\n}\n\n.mbr-contact-card-section-title {\n margin: 0 0 0.35rem;\n font-size: 0.75rem;\n font-weight: 600;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n color: var(--pico-muted-color, #666);\n}\n\n.mbr-contact-card-section ul {\n margin: 0;\n padding: 0;\n}\n\n.mbr-contact-card-section li {\n list-style: none;\n margin: 0 0 0.35rem;\n overflow-wrap: anywhere;\n}\n\n.mbr-contact-card-section address {\n margin: 0;\n font-style: normal;\n}\n\n.mbr-contact-card-label {\n display: block;\n font-size: 0.8rem;\n color: var(--pico-muted-color, #666);\n}\n\n.mbr-contact-card-place::before {\n content: \" \xe2\x80\x94 \";\n color: var(--pico-muted-color, #666);\n}\n\n/* A place listed on its own (no date known) needs no separator. */\n.mbr-contact-card-label + .mbr-contact-card-place::before {\n content: none;\n}\n\n@media (max-width: 576px) {\n .mbr-contact-card {\n --mbr-contact-avatar-size: 4rem;\n }\n\n .mbr-contact-card-identity {\n align-items: flex-start;\n }\n}\n\n@media print {\n .mbr-contact-card {\n box-shadow: none;\n break-inside: avoid;\n }\n\n /* An interactive \"open the info panel\" control means nothing on paper. */\n mbr-contact-backlinks {\n display: none;\n }\n}\n\n/* ==================== Chat Blocks (```chat) ==================== */\n\n/*\n * Speech bubbles for ```chat code blocks (src/chat.rs), rendered server-side\n * so they work in static builds and QuickLook without any JavaScript.\n *\n * Each speaker gets one of eight colour slots (`.mbr-chat-c0` \xe2\x80\xa6 `c7`) from a\n * stable hash of their name. The slot sets `--mbr-chat-color`; the name label\n * uses it directly and the bubble is a light wash of it over the page\n * background, so every Pico theme, light or dark, gets readable bubbles from\n * the one palette below. Override `--mbr-chat-c0` \xe2\x80\xa6 `--mbr-chat-c7` to recolour.\n */\n\n:root {\n --mbr-chat-c0: #c62828;\n --mbr-chat-c1: #1565c0;\n --mbr-chat-c2: #2e7d32;\n --mbr-chat-c3: #6a1b9a;\n --mbr-chat-c4: #e65100;\n --mbr-chat-c5: #00838f;\n --mbr-chat-c6: #ad1457;\n --mbr-chat-c7: #827717;\n}\n\n@media only screen and (prefers-color-scheme: dark) {\n :root:not([data-theme]) {\n --mbr-chat-c0: #ef5350;\n --mbr-chat-c1: #64b5f6;\n --mbr-chat-c2: #66bb6a;\n --mbr-chat-c3: #ba68c8;\n --mbr-chat-c4: #ffa726;\n --mbr-chat-c5: #4dd0e1;\n --mbr-chat-c6: #f06292;\n --mbr-chat-c7: #d4e157;\n }\n}\n\n[data-theme=\"dark\"] {\n --mbr-chat-c0: #ef5350;\n --mbr-chat-c1: #64b5f6;\n --mbr-chat-c2: #66bb6a;\n --mbr-chat-c3: #ba68c8;\n --mbr-chat-c4: #ffa726;\n --mbr-chat-c5: #4dd0e1;\n --mbr-chat-c6: #f06292;\n --mbr-chat-c7: #d4e157;\n}\n\n.mbr-chat {\n display: flex;\n flex-direction: column;\n gap: 0.6rem;\n margin-block: 0 var(--pico-typography-spacing-vertical, 1.5rem);\n}\n\n.mbr-chat-msg {\n --mbr-chat-color: var(--mbr-chat-c0);\n align-self: flex-start;\n max-width: 75%;\n padding: 0.45rem 0.8rem;\n border-radius: 1rem 1rem 1rem 0.25rem;\n border: 1px solid var(--pico-muted-border-color);\n /* Fallback first: color-mix() is the wash, where supported. */\n background: var(--pico-card-sectioning-background-color);\n background: color-mix(\n in srgb,\n var(--mbr-chat-color) 10%,\n var(--pico-background-color)\n );\n border-color: color-mix(in srgb, var(--mbr-chat-color) 30%, transparent);\n overflow-wrap: anywhere;\n}\n\n.mbr-chat-c0 {\n --mbr-chat-color: var(--mbr-chat-c0);\n}\n.mbr-chat-c1 {\n --mbr-chat-color: var(--mbr-chat-c1);\n}\n.mbr-chat-c2 {\n --mbr-chat-color: var(--mbr-chat-c2);\n}\n.mbr-chat-c3 {\n --mbr-chat-color: var(--mbr-chat-c3);\n}\n.mbr-chat-c4 {\n --mbr-chat-color: var(--mbr-chat-c4);\n}\n.mbr-chat-c5 {\n --mbr-chat-color: var(--mbr-chat-c5);\n}\n.mbr-chat-c6 {\n --mbr-chat-color: var(--mbr-chat-c6);\n}\n.mbr-chat-c7 {\n --mbr-chat-color: var(--mbr-chat-c7);\n}\n\n.mbr-chat-right {\n align-self: flex-end;\n border-radius: 1rem 1rem 0.25rem 1rem;\n}\n\n.mbr-chat-center {\n align-self: center;\n border-radius: 1rem;\n text-align: center;\n}\n\n/* Same speaker again: pull the bubble up under the previous one. */\n.mbr-chat-cont {\n margin-top: -0.35rem;\n}\n\n.mbr-chat-name {\n margin-bottom: 0.15rem;\n color: var(--mbr-chat-color);\n font-size: 0.8em;\n font-weight: 600;\n}\n\n.mbr-chat-meta {\n margin-top: 0.2rem;\n color: var(--pico-muted-color);\n font-size: 0.75em;\n text-align: right;\n}\n\n.mbr-chat-body > :first-child,\n.mbr-chat-comment > :first-child,\n.mbr-chat-md > :first-child {\n margin-top: 0;\n}\n\n.mbr-chat-body > :last-child,\n.mbr-chat-comment > :last-child,\n.mbr-chat-md > :last-child {\n margin-bottom: 0;\n}\n\n.mbr-chat-delim {\n align-self: stretch;\n margin-block: 0.4rem;\n /* The muted *border* colour all but vanishes on dark themes. */\n border-top: 1px dashed var(--pico-muted-color);\n opacity: 0.5;\n}\n\n.mbr-chat-comment {\n align-self: center;\n max-width: 85%;\n color: var(--pico-muted-color);\n font-size: 0.85em;\n text-align: center;\n}\n\n.mbr-chat-md {\n align-self: stretch;\n}\n\n/* Pico gives every `p`/`ol`/`ul` an explicit `color: var(--pico-color)`, so\n * without this a comment\'s paragraph ignores the muted colour set above. The\n * meta line needs no such rule: it is a bare `div`, never markdown. */\n.mbr-chat-comment > * {\n color: inherit;\n}\n\n@media (max-width: 576px) {\n .mbr-chat-msg {\n max-width: 90%;\n }\n}\n\n@media print {\n .mbr-chat-msg {\n break-inside: avoid;\n background: none;\n border-color: #999;\n }\n}\n\n/* ==================== Print Styles ==================== */\n\n@media print {\n /* PAGE MARGINS ARE ZERO ON PURPOSE -- the sheet\'s margins come from\n * `main.container`\'s padding below. Do not \"restore\" a margin here.\n *\n * A non-zero `@page` margin makes Safari (and WKWebView, i.e. GUI mode) lay\n * out a large empty band at the top of EVERY page; Chrome is unaffected.\n * Zeroing the page box and moving the whitespace into the content box\n * removes it. This was arrived at empirically -- printing is the only way to\n * observe it -- so treat the pairing as load-bearing and re-test on Safari\n * before changing either half.\n *\n * The mechanism is NOT the WebKit `@page`-vs-print-media rule-collection\n * ordering, which was the obvious suspect: that would predict a band here\n * too, since this rule is itself nested inside `@media print`. Whatever the\n * true cause, the trigger is the non-zero value, not the nesting. Consistent\n * with that, the band could also be cleared at print time by changing any\n * print-dialog setting (in either direction) or by enabling print-media\n * emulation in devtools -- both of which force a re-layout. GUI mode exposes\n * no dialog controls, so there it was unavoidable. */\n @page {\n margin: 0;\n }\n\n /* Hide chrome with an ALLOWLIST, not a denylist.\n *\n * `<main>` is the content; every other child of `<body>` is chrome. Listing\n * the chrome by tag name instead does not survive contact with this\n * codebase, because which components are emitted depends on the mode:\n * `_display_enhancements.html` adds six elements to every page, `_footer.html`\n * adds `<mbr-keys>` and `<mbr-fuzzy-nav>` always, `<mbr-live-reload>` in\n * server mode and `<mbr-find-bar>` + `<mbr-link-enhancement>` in GUI mode,\n * and the sidebar layout prepends `<mbr-browse-single>`. A denylist silently\n * rots every time a component is added, and the failure is invisible until\n * someone prints -- a missed element that is `position: fixed` paints on the\n * FIRST page only, and one that is `display: block` with height pushes the\n * content down. Inverting the test makes new components correct by default.\n *\n * This also covers the overlays components append straight to `<body>` at\n * runtime -- the editor backdrop (`editor-crepe.ts`), the picker backdrop\n * (`editor-picker-shared.ts`) and the footnote hover card\n * (`mbr-footnote-preview.ts`) -- all of which are `position: fixed` and would\n * otherwise paint over page one.\n *\n * Two carve-outs:\n * - `<mbr-genealogy>` sits outside `<main>` but is generated *content*: the\n * family chart on `type: person` pages. It printed before this rule\n * existed and it still has to.\n * - `.mbr-print-keep` is the opt-in for repositories that put real content\n * in `.mbr/_footer_custom.html`. Without it their content would vanish\n * from the page with no clue why. */\n body > *:not(main, mbr-genealogy, .mbr-print-keep) {\n display: none !important;\n }\n\n /* Review markers are injected *inside* `<main>`, so the rule above does not\n * reach them. They are UI, not content -- a printed page should carry the\n * document, not the reader\'s private annotations on it. The popover and the\n * panel are `body >` children and are already hidden. */\n .mbr-review-marker {\n display: none !important;\n }\n\n /* Reset grid layout for printing */\n body.mbr-has-sidebar {\n display: block;\n }\n\n /* Reduce font size (~40% smaller than base) */\n /* `color-scheme: light` is defense-in-depth, not a fix: pico\'s base colors\n * are already light on paper because its dark override is gated on\n * `screen` (see the \"Dark Mode Overrides\" `only screen` idiom above). This\n * just makes that intent explicit and nudges native UI (form controls,\n * scrollbars) light. */\n :root {\n --pico-font-size: 62.5%;\n color-scheme: light;\n }\n\n /* The paper margins live HERE, not on `@page` -- see the note by the `@page`\n * rule above for why. `--mbr-print-margin-*` are the knobs to override.\n *\n * Known trade-off of moving the vertical margin into the content box: the\n * padding applies at the start and end of the box, so a document that runs\n * past one sheet gets its top margin on page 1 and its bottom margin on the\n * last page, while continuation pages fall back to the printer\'s own\n * unprintable area. The horizontal padding is unaffected and applies to\n * every page. A non-zero `@page` margin is what would give uniform vertical\n * margins, and that is exactly what triggers the Safari band. */\n main.container {\n margin: 0;\n padding: var(--mbr-print-margin-block) var(--mbr-print-margin-inline);\n max-width: none;\n }\n\n /* ---------- Nothing is collapsed or clipped on paper ----------\n *\n * Every collapse, clamp and clip in this sheet is an affordance for *reading\n * on a screen*: it trades content for skimmability, on the understanding\n * that the reader can always open the thing back up. Paper takes that\n * bargain away. A section the reader collapsed before hitting Print does not\n * come back -- it is simply missing from the page, with nothing to indicate\n * that anything was there. So print undoes all of it.\n *\n * The one deliberate exception is `.sr-only`; see the end of this block. */\n\n /* Sibling content hidden by a collapsed heading (`<mbr-heading-enhancer>`).\n * This is the one that bites: collapsing is a transient reading gesture, not\n * an instruction about the document, and the reader has no reason to expect\n * it to follow them onto the paper.\n *\n * `revert` and not `block`, because the class is applied to whatever\n * siblings happen to follow the heading -- `<p>`, `<ul>`, `<table>`,\n * `<figure>`, `<pre>` -- and each has its own correct display. `revert`\n * hands each element back its user-agent value. */\n .sectionhidden {\n display: revert;\n }\n\n /* The \"+\" marker announces hidden content. Nothing is hidden here. */\n .mbr-section-collapsed::before {\n content: none;\n }\n\n /* Permalink anchors only exist to be hovered. */\n .mbr-heading-anchor {\n display: none;\n }\n\n /* Raw `<details>` blocks. GFM passes literal `<details><summary>` straight\n * through, and `docs/markdown/index.md` actively recommends it as the way to\n * get a real toggle -- so a block the reader left closed prints with its body\n * missing.\n *\n * CSS cannot set the `open` attribute, so the only lever is the user agent\'s\n * own `::details-content` box, which carries `content-visibility: hidden`\n * while the element is closed. Overriding that is the technique the CSSWG\n * settled on when it finally closed csswg-drafts#2084, \"Ability to style\n * <details>/<summary> to be open (e.g. for print styles)\", in August 2025.\n *\n * BROWSER SUPPORT, PLAINLY: `::details-content` is Chrome/Edge 131+, Safari\n * 18.4+, Firefox 143+ (Baseline newly-available, September 2025); GUI mode\n * uses the system WebKit, so it tracks the installed Safari. Anywhere older\n * this rule is simply dropped as an unknown selector, a closed `<details>`\n * still prints closed, and there is NO CSS-only alternative -- no shipping\n * engine ever exposed a light-DOM hook for the closed content (Firefox 49-102\n * suppressed frame construction outright in C++; everything since, in all\n * three engines, hides a shadow slot), which is precisely why that CSSWG\n * issue sat open for eight years. Do not add `details > *:not(summary) {\n * display: block }` as a \"fallback\": the selector *matches*, so it looks\n * applied in devtools, but the flat-tree slot above it is hidden and nothing\n * happens -- in every engine. The real fallback is a `beforeprint` listener\n * flipping the `open` attribute, which is JavaScript, and so deliberately\n * not done here.\n *\n * `content-visibility` alone is what defeats the user agent; it does not\n * need `!important`, because both Blink and WebKit deliberately let author\n * rules outrank the inline style they put on that shadow slot. The\n * `!important`s are aimed at *user.css*, which `_head.html` links after this\n * sheet: a repository that copied MDN\'s accordion pattern\n * (`details::details-content { block-size: 0; overflow: clip }`) matches this\n * selector exactly, and `@media print` adds no specificity, so without them\n * source order would re-collapse the block on paper. */\n details::details-content {\n content-visibility: visible !important;\n block-size: auto !important;\n overflow: visible !important;\n }\n\n /* The marker is drawn from the `open` attribute, which is still absent -- so\n * without this the triangle points \"closed\" beside content that is plainly\n * open. `disclosure-open` is the same keyword the UA stylesheet uses for\n * `details[open]`, so it is available wherever the marker renders at all. */\n details > summary:first-of-type {\n list-style-type: disclosure-open;\n }\n\n /* Oembed link cards clamp the description to 200px and clip what does not\n * fit. There is nothing to clip *for* on paper. */\n .mbr-social-link-box {\n max-height: none;\n overflow: visible;\n }\n\n /* Theater figures size themselves against the viewport and bleed to its full\n * width. The video is dropped below, but the caption is content and must not\n * be squeezed by a viewport-relative height. */\n figure.theater {\n max-height: none;\n width: auto;\n margin-inline: 0;\n background: none;\n }\n\n /* Prevent awkward page breaks */\n pre,\n code,\n figure,\n blockquote,\n table,\n ul,\n ol {\n page-break-inside: avoid;\n }\n\n /* style inline katex the same as inline code by default */\n .math-inline {\n border-radius: var(--pico-border-radius);\n background: var(--pico-code-background-color);\n color: var(--pico-code-color);\n font-weight: var(--pico-font-weight);\n line-height: initial;\n font-size: 0.875em;\n }\n\n /* Marginalia: display inline for print (not absolute positioned) */\n blockquote blockquote:has(blockquote) {\n position: static;\n }\n\n blockquote blockquote blockquote {\n position: static;\n display: block;\n font-size: 0.85em;\n margin: var(--pico-spacing) 0;\n padding: var(--pico-spacing);\n background-color: var(--mbr-marginalia-bg);\n border-left: 3px solid var(--pico-primary);\n }\n\n /* Hide the indicator marker in print */\n blockquote blockquote blockquote::before {\n content: none;\n }\n\n /* Show marginalia content normally in print */\n blockquote blockquote blockquote p {\n position: static;\n display: block;\n transform: none;\n min-width: auto;\n max-width: none;\n background: none;\n border: none;\n box-shadow: none;\n padding: 0;\n margin: 0;\n }\n\n /* Hide popover arrows in print */\n blockquote blockquote blockquote p::before,\n blockquote blockquote blockquote p::after {\n content: none;\n }\n\n /* Show additional paragraphs in marginalia */\n blockquote blockquote blockquote p + p {\n display: block;\n }\n\n /* Video/media elements: use auto height, hide player controls */\n figure > video,\n media-player {\n max-height: none;\n height: auto;\n }\n\n /* Hide video player (videos cannot be printed meaningfully) */\n media-player,\n video {\n display: none;\n }\n\n /* Show a placeholder message for videos */\n figure:has(media-player)::after,\n figure:has(video)::after {\n content: \"[Video content - see digital version]\";\n display: block;\n font-style: italic;\n color: var(--pico-muted-color);\n padding: var(--pico-spacing);\n border: 1px dashed var(--pico-muted-border-color);\n text-align: center;\n }\n\n /* Reduce GitHub alert icon size for print */\n blockquote.markdown-alert-note::before,\n blockquote.markdown-alert-tip::before,\n blockquote.markdown-alert-important::before,\n blockquote.markdown-alert-warning::before,\n blockquote.markdown-alert-caution::before {\n width: 14px;\n height: 14px;\n top: calc(var(--pico-spacing) * 1.25);\n }\n\n /* Footnotes: ensure they stay together and print cleanly */\n .footnote-definition {\n page-break-inside: avoid;\n color: inherit;\n }\n\n .footnote-definition:first-of-type {\n break-before: avoid;\n }\n\n /* Definition lists: force every answer open. A printed FAQ showing only the\n * questions would be useless.\n *\n * All three selectors are needed. Printing does NOT clear focus -- someone\n * who opens a question and then hits Print still has a focused `<dt>` -- so\n * the two re-collapse rules would otherwise keep matching and, at one extra\n * type selector, outrank a bare `main dl > dd` here. Repeating them verbatim\n * makes this an equal-specificity tie that source order settles our way,\n * which is why the \"Definition Lists\" section has to stay above this block. */\n main dl > dd,\n main dl > dt:focus ~ dt ~ dd,\n main dl > dd:focus-within ~ dt ~ dd {\n visibility: visible;\n height: auto;\n overflow: visible;\n padding-block: 0 var(--mbr-dl-item-spacing);\n }\n\n /* The disclosure chevron means nothing on paper. Dropping the marker box\n * also means the question\'s hanging indent has to be undone, or the first\n * line would hang out into the margin. */\n main dl > dt::before {\n content: none;\n }\n\n main dl > dt {\n padding-inline-start: 0;\n text-indent: 0;\n /* Keep a question with the answer it introduces. */\n break-after: avoid;\n }\n\n main dl > dt,\n main dl > dd {\n page-break-inside: avoid;\n }\n\n /* ---------- DELIBERATE EXCEPTION: `.sr-only` stays hidden ----------\n *\n * Do not add `.sr-only` to the \"nothing is collapsed on paper\" rules above.\n * It is not collapsed content. `index.html` (and `home`/`section`/`tag`)\n * emit a visually hidden *duplicate* of the page title purely so Pagefind\n * can weight it (`<span class=\"sr-only\" data-pagefind-weight=\"10\">`) --\n * revealing it would print the title twice, once as a stray line and once as\n * the real `<h1>` directly beneath it.\n *\n * Nothing is lost by leaving it: the visible heading carries the same text.\n * `aria-hidden` needs no print rule either -- it hides content from the\n * accessibility tree, never visually -- and `[hidden]` is deliberately left\n * alone, because unlike a collapsed section it is an explicit statement by\n * the author that the content does not apply. */\n}\n\n/* ==================== Enhanced Oembed Social Link Boxes ==================== */\n.mbr-social-link-box {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-template-rows: 1fr;\n grid-column-gap: 1em;\n max-width: 900px;\n max-height: 200px;\n overflow: hidden;\n}\n.mbr-social-link {\n grid-column: span 2;\n text-decoration: none;\n}\n.mbr-social-link header {\n font-size: 1rem;\n font-weight: bold;\n margin-bottom: var(--pico-typography-spacing-vertical);\n}\n.mbr-social-link p {\n font-size: 0.75rem;\n margin: 0;\n color: var(--pico-secondary);\n}\n\n/*\n * PRINT TIP: For best results when printing:\n * 1. Use light mode (not dark mode)\n * 2. Enable \"Print backgrounds\" in your browser\'s print dialog\n */\n\n/* ============================= Kanban Display ========================= */\n\n/*\n * A board is a section opened with `--- {.kanban}`: headings are columns and\n * each item of a list directly inside the section is a card. There is no\n * page-wide form. `style: kanban` in frontmatter puts the class on `<body>`,\n * where `.kanban` pours the whole page into 85vh-tall columns and the\n * `.kanban > ul` card rules match nothing, so docs/markdown/kanban.md tells\n * authors not to use it.\n */\n\n.kanban {\n columns: 18rem; /* needs to be fixed since we don\'t know how many columns */\n column-gap: 2rem;\n column-fill: auto; /* should avoid balancing and just fill left first */\n /* column-rule: 1px solid var(--pico-muted-border-color); */\n overflow-x: auto; /* allow horizontal scroll */\n overflow-y: visible;\n max-width: 100%;\n height: 85vh;\n}\n\n.kanban h1,\n.kanban h2,\n.kanban h3,\n.kanban h4,\n.kanban h5,\n.kanban h6 {\n margin-top: 0;\n break-after: avoid;\n -webkit-column-break-after: avoid;\n break-inside: avoid;\n -webkit-column-break-inside: avoid;\n}\n\n.kanban h1:has(+ ul),\n.kanban h1:has(+ ol),\n.kanban h2:has(+ ul),\n.kanban h2:has(+ ol),\n.kanban h3:has(+ ul),\n.kanban h3:has(+ ol),\n.kanban h4:has(+ ul),\n.kanban h4:has(+ ol),\n.kanban h5:has(+ ul),\n.kanban h5:has(+ ol),\n.kanban h6:has(+ ul),\n.kanban h6:has(+ ol) {\n break-after: avoid;\n -webkit-column-break-after: avoid;\n break-inside: avoid;\n -webkit-column-break-inside: avoid;\n}\n\n.kanban > ul,\n.kanban > ol {\n margin-left: 0;\n padding-left: 0;\n break-after: column;\n break-inside: avoid;\n -webkit-column-break-inside: avoid;\n -webkit-column-break-before: avoid;\n break-before: avoid;\n}\n\n.kanban > ul > li,\n.kanban > ol > li {\n margin-bottom: var(--pico-block-spacing-vertical);\n padding: var(--pico-block-spacing-vertical)\n var(--pico-block-spacing-horizontal);\n border-radius: var(--pico-border-radius);\n background: var(--pico-card-background-color);\n box-shadow: var(--pico-card-box-shadow);\n display: block;\n /* background-color: var(--pico-card-sectioning-background-color); */\n font-weight: bold;\n break-inside: avoid;\n -webkit-column-break-inside: avoid;\n}\n\n.kanban ul > li ul,\n.kanban ol > li ol {\n font-weight: normal;\n margin-top: 1em;\n}\n\n.kanban ul:last-child,\n.kanban ol:last-child {\n break-after: always;\n}\n\n@media print {\n /* Kanban boards lose cards on paper twice over: `height: 85vh` cuts off\n * everything below one screenful, and the columns scroll horizontally past\n * the width of the sheet. Flattening to a single column is the only shape\n * that guarantees every card reaches the page -- the board reads as a run of\n * headed lists rather than side-by-side columns, which is the right trade\n * when the alternative is dropping cards silently.\n *\n * `break-after` has to be reset too: `always` is a *page* break once there\n * is no multicol context to consume it, so each list would otherwise eject\n * the rest of the board onto a fresh sheet.\n *\n * Unscoped like the screen rules: `.kanban` is the `<section>` that\n * `--- {.kanban}` opens. (`style: kanban` in frontmatter puts it on\n * `<body>`, which the docs warn against.)\n *\n * This block MUST stay after the screen rules above: it has the same\n * specificity and `@media print` adds none, so it wins by source order\n * alone. It used to sit in the main print section earlier in the file and\n * silently lost. */\n .kanban {\n height: auto;\n max-height: none;\n columns: auto;\n overflow: visible;\n }\n\n .kanban > ul,\n .kanban > ol,\n .kanban ul:last-child,\n .kanban ol:last-child {\n break-before: auto;\n break-after: auto;\n }\n}\n\n/************ OUTLINE **********************/\n\n.outline main {\n font-size: 16px;\n line-height: 1.6;\n}\n.outline main h1,\n.outline main h2,\n.outline main h3,\n.outline main h4,\n.outline main h5,\n.outline main h6 {\n font-weight: 600;\n line-height: 1.1;\n margin: 36px 24px 16px 0;\n padding: 0;\n}\n.outline main h1,\n.outline main h2 {\n border-bottom: 1px solid #eaecef;\n}\n.outline main h1 {\n font-size: 32px;\n line-height: 40px;\n margin: 0 0 16px;\n padding: 0 0 9.600000381469727px;\n}\n.outline main h2 {\n font-size: 24px;\n line-height: 30px;\n padding: 0 0 7.199999809265137px;\n}\n.outline main h3 {\n font-size: 20px;\n line-height: 25px;\n}\n.outline main h4 {\n font-size: 16px;\n line-height: 20px;\n margin: 24px 0 16px;\n padding: 0;\n}\n.outline main h5 {\n font-size: 14px;\n line-height: 17px;\n}\n.outline main h6 {\n font-size: 13.600000381469727px;\n line-height: 17px;\n}\n.outline main {\n line-height: 1.6;\n padding: 3px;\n}\n.outline main p {\n margin: 1em 0;\n}\n.outline main > *:first-child {\n margin-top: 0 !important;\n}\n.outline main > *:last-child {\n margin-bottom: 0 !important;\n}\n.outline main p,\n.outline main blockquote,\n.outline main ul,\n.outline main ol,\n.outline main dl,\n.outline main table:not(.mbr-table-scroll > table),\n.outline main .mbr-table-scroll,\n.outline main pre {\n margin-bottom: 16px;\n}\n.outline main ol,\n.outline main ul {\n padding-left: 2.6ch;\n}\n.outline main ul > li {\n list-style-type: disc;\n}\n.outline main ol > li {\n list-style-type: upper-alpha;\n}\n.outline main ol ol > li {\n list-style-type: decimal;\n}\n.outline main ol ol ol > li {\n list-style-type: lower-alpha;\n}\n.outline main ol ol ol ol > li {\n list-style-type: lower-roman;\n}\n.outline main ol ol,\n.outline main ol ul,\n.outline main ul ul,\n.outline main ul ol {\n margin-top: 0;\n margin-bottom: 0;\n}\n.outline main li > p {\n margin-bottom: 0;\n}\n.outline main li p + p {\n margin-top: 16px;\n}\n.outline main dl {\n padding: 0;\n}\n.outline main dl dt {\n padding: 0;\n margin-top: 16px;\n font-size: 1em;\n font-style: italic;\n font-weight: 700;\n}\n.outline main dl dd {\n padding: 0 16px;\n margin-bottom: 16px;\n}\n.outline main blockquote {\n padding: 0 15px;\n margin-left: 0;\n color: #777;\n border-left: 4px solid #ddd;\n}\n.outline main blockquote > :first-child {\n margin-top: 0;\n}\n.outline main blockquote > :last-child {\n margin-bottom: 0;\n}\n@media print {\n body.outline {\n background: #fff;\n }\n .outline main img,\n .outline main table,\n .outline main figure {\n page-break-inside: avoid;\n }\n .outline main {\n background: #fff;\n border: none !important;\n font-size: 12px;\n }\n .outline main pre code {\n overflow: visible;\n }\n}\n.outline main {\n counter-reset: H2;\n}\n\n.outline main h2 {\n counter-reset: H3;\n}\n\n.outline main h2:before {\n content: counter(H2) \". \";\n counter-increment: H2;\n counter-reset: H3;\n counter-reset: H4;\n counter-reset: H5;\n}\n\n.outline main h3 {\n counter-reset: H4;\n}\n\n.outline main h3:before {\n content: counter(H2) \".\" counter(H3) \". \";\n counter-increment: H3;\n counter-reset: H4;\n counter-reset: H5;\n}\n\n.outline main h4 {\n counter-reset: H5;\n}\n\n.outline main h4:before {\n content: counter(H2) \".\" counter(H3) \".\" counter(H4) \". \";\n counter-increment: H4;\n counter-reset: H5;\n}\n\n.outline main h5:before {\n content: counter(H2) \".\" counter(H3) \".\" counter(H4) \".\" counter(H5) \". \";\n counter-increment: H5;\n}\n";