diff --git a/.docfx/templates/bowire/layout/_master.tmpl b/.docfx/templates/bowire/layout/_master.tmpl
index eaf18eb..85727cf 100644
--- a/.docfx/templates/bowire/layout/_master.tmpl
+++ b/.docfx/templates/bowire/layout/_master.tmpl
@@ -39,11 +39,6 @@
           var el = document.documentElement;
           el.setAttribute('data-bs-theme', resolved);
           el.setAttribute('data-theme', mode);
-          // Reading mode (#119) — same key the marketing site uses
-          // so the choice persists across site ↔ docs ↔ api-docs.
-          if (localStorage.getItem('bowire_reading_mode') === '1') {
-            el.setAttribute('data-reading-mode', '1');
-          }
         })();
       </script>
 
@@ -316,9 +311,6 @@
                 localStorage('theme') key the marketing site uses so the
                 choice carries across site ↔ docs. Icon is injected by
                 the inline script below. ----------------------------}}
-          <button class="bowire-docs-theme-toggle" id="bowire-docs-reading-mode-toggle" type="button" aria-label="Toggle reading mode" title="Reading mode (press R)">
-            <span class="reading-mode-glyph" aria-hidden="true">Aa</span>
-          </button>
           <button class="bowire-docs-theme-toggle" id="bowire-docs-theme-toggle" type="button" aria-label="Toggle theme" title="Theme"></button>
           <a href="https://github.com/Kuestenlogik/Bowire" class="bowire-docs-nav-github" aria-label="GitHub" target="_blank" rel="noopener">
             <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
@@ -1248,32 +1240,6 @@
     </script>
 
   
-    <script>
-      (function () {
-        var key = 'bowire_reading_mode';
-        function isOn() { return document.documentElement.getAttribute('data-reading-mode') === '1'; }
-        function set(on) {
-          if (on) {
-            document.documentElement.setAttribute('data-reading-mode', '1');
-            try { localStorage.setItem(key, '1'); } catch { /* ignore */ }
-          } else {
-            document.documentElement.removeAttribute('data-reading-mode');
-            try { localStorage.setItem(key, '0'); } catch { /* ignore */ }
-          }
-        }
-        var btn = document.getElementById('bowire-docs-reading-mode-toggle');
-        if (btn) btn.addEventListener('click', function () { set(!isOn()); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key !== 'r' && e.key !== 'R') return;
-          if (e.ctrlKey || e.metaKey || e.altKey) return;
-          var active = document.activeElement;
-          if (active && /^(INPUT|TEXTAREA|SELECT)$/i.test(active.tagName)) return;
-          if (active && active.isContentEditable) return;
-          e.preventDefault();
-          set(!isOn());
-        });
-      })();
-    </script>
-  </body>
+      </body>
   {{/redirect_url}}
 </html>
diff --git a/.docfx/templates/bowire/public/main.css b/.docfx/templates/bowire/public/main.css
index 0cf5a4f..eb5abcd 100644
--- a/.docfx/templates/bowire/public/main.css
+++ b/.docfx/templates/bowire/public/main.css
@@ -1,2094 +1,2030 @@
-/*
- * Bowire docfx theme — visual parity with the Jekyll marketing site
- * (../../site/). Single source of truth for the brand palette is
- * src/Kuestenlogik.Bowire/wwwroot/bowire.css:9-25 — values must stay in sync.
- *
- * The template chain in docs/docfx.json is:
- *   ["default", "modern", "templates/bowire"]
- *
- * Modern still ships docfx.min.css for Bootstrap 5 + the article-content
- * styling. This file loads AFTER it (see _master.tmpl) and overrides:
- *
- *   1. Bootstrap variables (--bs-*) so the body bg, links, primary
- *      colour and font stack switch to Bowire brand
- *   2. The .bowire-docs-* classes from our own master template (header,
- *      footer, content shell)
- *   3. A handful of docfx-internal selectors (.toc, .affix, .contribution,
- *      pre code, .navbar etc.) so the inherited Bootstrap shell looks
- *      like the Bowire marketing site
- *
- * Theme switching is driven by the same `theme` localStorage key the
- * marketing site writes — see _master.tmpl's inline head script.
- */
-
-/* ============================================================
-   Bowire brand palette
-   ============================================================ */
-:root {
-    --bowire-accent: #6366f1;
-    --bowire-accent-hover: #818cf8;
-    --bowire-accent-rgb: 99, 102, 241;
-    --bowire-accent-light: #4f46e5;
-    --bowire-success: #10b981;
-    --bowire-warning: #fbbf24;
-    --bowire-danger: #ef4444;
-}
-
-/* ============================================================
-   Bootstrap 5 variable overrides — dark
-   ============================================================ */
-:root[data-bs-theme="dark"] {
-    --bs-body-bg: #0f0f17;
-    --bs-body-color: #e8e8f0;
-    --bs-secondary-bg: #161621;
-    --bs-tertiary-bg: #1a1a2e;
-    --bs-secondary-bg-rgb: 22, 22, 33;
-    --bs-tertiary-bg-rgb: 26, 26, 46;
-
-    --bs-border-color: #2a2a3d;
-    --bs-border-color-translucent: rgba(232, 232, 240, 0.1);
-
-    --bs-primary: var(--bowire-accent);
-    --bs-primary-rgb: var(--bowire-accent-rgb);
-    --bs-link-color: var(--bowire-accent);
-    --bs-link-color-rgb: var(--bowire-accent-rgb);
-    --bs-link-hover-color: var(--bowire-accent-hover);
-    --bs-link-hover-color-rgb: 129, 140, 248;
-
-    --bs-code-color: var(--bowire-accent-hover);
-
-    --bs-emphasis-color: #e8e8f0;
-    --bs-emphasis-color-rgb: 232, 232, 240;
-    --bs-secondary-color: #9898b0;
-    --bs-tertiary-color: #6a6a82;
-    --bs-heading-color: #e8e8f0;
-
-    --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    --bs-font-monospace: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
-}
-
-/* ============================================================
-   Bootstrap 5 variable overrides — light
-   ============================================================ */
-:root[data-bs-theme="light"] {
-    --bs-body-bg: #fafaff;
-    --bs-body-color: #1a1a2e;
-    --bs-secondary-bg: #f4f4fa;
-    --bs-tertiary-bg: #eeeef0;
-    --bs-secondary-bg-rgb: 244, 244, 250;
-    --bs-tertiary-bg-rgb: 238, 238, 240;
-
-    --bs-border-color: #e1e1ee;
-    --bs-border-color-translucent: rgba(26, 26, 46, 0.1);
-
-    --bs-primary: var(--bowire-accent-light);
-    --bs-primary-rgb: 79, 70, 229;
-    --bs-link-color: var(--bowire-accent-light);
-    --bs-link-color-rgb: 79, 70, 229;
-    --bs-link-hover-color: var(--bowire-accent);
-
-    --bs-code-color: var(--bowire-accent-light);
-
-    --bs-emphasis-color: #0a0a1a;
-    --bs-secondary-color: #5a5a72;
-    --bs-tertiary-color: #8a8aa0;
-    --bs-heading-color: #1a1a2e;
-
-    --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    --bs-font-monospace: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
-}
-
-/* Smooth font rendering on both themes */
-body.bowire-docs {
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    margin: 0;
-    /* Reserve room for the fixed header */
-    padding-top: 64px;
-}
-
-/* ============================================================
-   Bowire header — fixed top bar mirroring the marketing site
-   ============================================================ */
-/* Using body.bowire-docs prefix to beat docfx.min.css's default
-   `header { position: sticky; display: flex; ... }` rule that otherwise
-   wins on equal-specificity and leaves our header non-fixed at y=64. */
-body.bowire-docs .bowire-docs-header {
-    /* Mirror site/_includes/header.html behaviour exactly: header is
-       transparent on page-top and turns into a translucent solid bar
-       after the first 20px of scroll. */
-    position: fixed !important;
-    top: 0 !important;
-    left: 0;
-    right: 0;
-    width: 100%;
-    z-index: 1030;
-    height: 64px;
-    display: block;
-    background: transparent;
-    backdrop-filter: none;
-    -webkit-backdrop-filter: none;
-    border-bottom: 1px solid transparent;
-    transition: background 0.3s, border-color 0.3s, backdrop-filter 0.3s, -webkit-backdrop-filter 0.3s;
-    font-family: var(--bs-body-font-family);
-}
-body.bowire-docs .bowire-docs-header.scrolled {
-    background: rgba(15, 15, 23, 0.9) !important;
-    backdrop-filter: blur(12px) !important;
-    -webkit-backdrop-filter: blur(12px) !important;
-    border-bottom-color: var(--bs-border-color) !important;
-}
-:root[data-bs-theme="light"] body.bowire-docs .bowire-docs-header.scrolled {
-    background: rgba(250, 250, 255, 0.9) !important;
-}
-
-.bowire-docs-header-inner {
-    /* Mirror site/_includes/header.html's three-zone grid exactly:
-       logo left, nav centred, actions right. 1fr-auto-1fr keeps the
-       nav horizontally centred even when logo and actions differ in
-       width — matching the marketing header pixel-for-pixel avoids a
-       layout jump on site ↔ docs transitions. */
-    max-width: 1120px;
-    margin: 0 auto;
-    padding: 0 24px;
-    display: grid;
-    grid-template-columns: 1fr auto 1fr;
-    align-items: center;
-    gap: 24px;
-    height: 100%;
-}
-.bowire-docs-header-actions {
-    justify-self: end;
-}
-
-.bowire-docs-logo {
-    /* Mirror site .logo — inline-flex + justify-self:start so the
-       click area hugs the mark + wordmark instead of stretching to
-       fill the 1fr grid column the header layout puts it in. */
-    display: inline-flex;
-    justify-self: start;
-    align-items: center;
-    gap: 8px;
-    font-weight: 700;
-    font-size: 1.125rem;
-    color: var(--bs-emphasis-color);
-    text-decoration: none;
-    transition: color 0.15s;
-}
-.bowire-docs-logo:hover {
-    color: var(--bowire-accent);
-}
-.bowire-docs-logo-mark {
-    /* Tile logo (1:1) — same 28px sizing as site/_includes/header.html.
-       Color follows currentColor so it flips with theme via the parent
-       link's color (var(--bs-emphasis-color)). */
-    width: 28px;
-    height: 28px;
-    display: block;
-    color: inherit;
-    flex-shrink: 0;
-}
-/* Hover lifts the brand mark to accent colour while the wordmark
-   next to it stays on its link colour. */
-.bowire-docs-logo:hover .bowire-docs-logo-mark {
-    color: var(--bowire-accent);
-}
-
-.bowire-docs-nav {
-    display: flex;
-    align-items: center;
-    gap: 28px;
-    /* Mirror the marketing site's 3px baseline nudge so smaller nav
-       text aligns with the bigger wordmark next to the logo. */
-    margin-top: 3px;
-}
-.bowire-docs-nav a {
-    color: var(--bs-secondary-color);
-    font-size: 0.875rem;
-    font-weight: 500;
-    text-decoration: none;
-    transition: color 0.15s;
-}
-.bowire-docs-nav a:hover {
-    color: var(--bowire-accent);
-}
-/* Active section (current page) — distinct from hover so the user can
-   tell "I am here" vs "I can go here". Lifts to emphasis colour +
-   semibold while hover stays on accent. */
-.bowire-docs-nav a.is-active {
-    color: var(--bs-emphasis-color);
-    font-weight: 600;
-}
-
-.bowire-docs-header-actions {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-}
-
-/* Search form in the header — replaces the modern template's navbar
-   search. docfx.min.js looks up #search and #search-query by id. */
-/* ============================================================
-   Pagefind search overlay — shared with the Jekyll marketing site.
-   Trigger button sits in the header actions next to home / theme /
-   github and opens a centred overlay with the PagefindUI widget.
-   ============================================================ */
-.bowire-search-trigger {
-    width: 32px;
-    height: 32px;
-    padding: 0;
-    background: transparent;
-    border: none;
-    color: var(--bs-secondary-color);
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    transition: color 0.15s, opacity 0.15s;
-}
-.bowire-search-trigger:hover {
-    color: var(--bowire-accent);
-}
-.bowire-search-trigger:focus-visible {
-    outline: 2px solid var(--bowire-accent);
-    outline-offset: 2px;
-    border-radius: 4px;
-}
-/* Disabled state when the Pagefind index isn't available — typically
-   hit during local-only docfx serve runs where the post-build pagefind
-   step hasn't run. Greyed out + non-interactive so clicks don't fire
-   into uninitialised PagefindUI and surface uncaught exceptions. */
-.bowire-search-trigger[disabled] {
-    opacity: 0.35;
-    cursor: not-allowed;
-    pointer-events: none;
-}
-
-.bowire-search-overlay {
-    position: fixed;
-    inset: 0;
-    z-index: 2000;
-    display: flex;
-    align-items: flex-start;
-    justify-content: center;
-    padding-top: min(12vh, 120px);
-    background: rgba(15, 15, 23, 0.55);
-    backdrop-filter: blur(6px);
-    -webkit-backdrop-filter: blur(6px);
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 0.15s ease;
-}
-:root[data-bs-theme="light"] .bowire-search-overlay {
-    background: rgba(200, 200, 220, 0.55);
-}
-.bowire-search-overlay.is-open {
-    opacity: 1;
-    pointer-events: auto;
-}
-.bowire-search-overlay-panel {
-    width: min(680px, calc(100% - 48px));
-    max-height: 80vh;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    background: var(--bs-secondary-bg);
-    border: 1px solid var(--bs-border-color);
-    border-radius: 12px;
-    padding: 0;
-    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
-    transform: translateY(-8px);
-    transition: transform 0.2s ease;
-}
-.bowire-search-overlay #search {
-    display: flex;
-    flex-direction: column;
-    flex: 1 1 auto;
-    min-height: 0;
-}
-.bowire-search-overlay .pagefind-ui {
-    display: flex;
-    flex-direction: column;
-    flex: 1 1 auto;
-    min-height: 0;
-}
-.bowire-search-overlay .pagefind-ui__form {
-    display: flex;
-    flex-direction: column;
-    flex: 1 1 auto;
-    min-height: 0;
-    padding: 20px;
-    /* Form is the "header zone" — same tertiary bg as the footer hint
-       band so the input + result-count read as one capsule, with the
-       results drawer below it visually distinct (secondary bg). */
-    background: var(--bs-tertiary-bg);
-}
-.bowire-search-overlay .pagefind-ui__search-input {
-    flex: 0 0 auto;
-}
-.bowire-search-overlay .pagefind-ui__drawer {
-    flex: 1 1 auto;
-    min-height: 0;
-    overflow-y: auto;
-    margin: 16px -20px -20px;
-    padding: 16px 20px 20px;
-    background: var(--bs-secondary-bg);
-    border-top: 1px solid var(--bs-border-color);
-    scrollbar-width: thin;
-    scrollbar-color: var(--bs-border-color) transparent;
-}
-.bowire-search-overlay .pagefind-ui__drawer::-webkit-scrollbar { width: 10px; }
-.bowire-search-overlay .pagefind-ui__drawer::-webkit-scrollbar-track { background: transparent; }
-.bowire-search-overlay .pagefind-ui__drawer::-webkit-scrollbar-thumb {
-    background: var(--bs-border-color);
-    border-radius: 8px;
-    border: 2px solid transparent;
-    background-clip: padding-box;
-}
-.bowire-search-overlay.is-open .bowire-search-overlay-panel {
-    transform: translateY(0);
-}
-
-/* Theme the PagefindUI widget to the Bowire brand palette. Bind to
-   data-bs-theme so dark/light mode switch picks up synchronously with
-   the rest of the docs. Attribute selectors (0,2,0) beat Pagefind's
-   default :root declaration (0,1,0). */
-html[data-bs-theme="dark"],
-html[data-bs-theme="light"] {
-    --pagefind-ui-scale: 1;
-    --pagefind-ui-primary: var(--bowire-accent);
-    --pagefind-ui-text: var(--bs-emphasis-color);
-    --pagefind-ui-background: var(--bs-secondary-bg);
-    --pagefind-ui-border: var(--bs-border-color);
-    --pagefind-ui-tag: var(--bs-tertiary-bg);
-    --pagefind-ui-border-width: 1px;
-    --pagefind-ui-border-radius: 10px;
-    --pagefind-ui-image-border-radius: 6px;
-    --pagefind-ui-image-box-ratio: 3 / 2;
-    --pagefind-ui-font: inherit;
-}
-
-.pagefind-ui {
-    padding-top: 0 !important;
-}
-.pagefind-ui__drawer {
-    gap: 24px !important;
-}
-.pagefind-ui__results-area {
-    margin-top: 8px !important;
-}
-/* Result count — relocated by JS from inside the drawer to between
-   the search input and the drawer (still inside the form so it
-   inherits the tertiary "header" bg). Smaller font than the previous
-   in-drawer placement so it reads as a sub-line of the input area
-   rather than a result row. */
-.pagefind-ui__message {
-    color: var(--bs-secondary-color) !important;
-    font-size: 0.75rem !important;
-    font-weight: 500 !important;
-    padding: 8px 0 0 !important;
-    margin: 0 !important;
-    height: auto !important;
-}
-.pagefind-ui__result {
-    padding: 18px 0 20px !important;
-    border-top: 1px solid var(--bs-border-color) !important;
-    cursor: pointer;
-}
-/* The drawer already carries a border-top above the first result —
-   skip the per-result rule for the first item to avoid the
-   double-line stack. */
-.pagefind-ui__result:first-child {
-    border-top: none !important;
-    padding-top: 0 !important;
-}
-.pagefind-ui__result-title {
-    font-size: 1.0625rem !important;
-    font-weight: 600 !important;
-    line-height: 1.35 !important;
-    margin-bottom: 4px !important;
-}
-.pagefind-ui__result-excerpt {
-    font-size: 0.9375rem !important;
-    color: var(--bs-secondary-color) !important;
-    line-height: 1.55 !important;
-}
-.pagefind-ui__result-tags {
-    margin-top: 10px !important;
-}
-.pagefind-ui__result-tag {
-    font-size: 0.75rem !important;
-    padding: 3px 8px !important;
-    color: var(--bs-secondary-color) !important;
-}
-
-/* Pagefind-UI-specific selector overrides where --pagefind-ui-* doesn't
-   reach (focus ring, link hover, mark highlight). */
-.pagefind-ui__search-input {
-    color: var(--bs-emphasis-color) !important;
-    font-weight: 500 !important;
-    font-size: 0.9375rem !important;
-    padding: 0 52px 0 44px !important;
-    height: 52px !important;
-    display: inline-flex !important;
-    align-items: center !important;
-    line-height: 1 !important;
-}
-.pagefind-ui__form::before {
-    top: 38px !important;
-    left: 34px !important;
-    width: 16px !important;
-    height: 16px !important;
-}
-.pagefind-ui__search-input::placeholder {
-    color: var(--bs-secondary-color) !important;
-    opacity: 0.6 !important;
-    font-weight: 400 !important;
-}
-.pagefind-ui__search-input:focus-visible {
-    outline: none !important;
-    border-color: var(--bowire-accent) !important;
-    box-shadow: 0 0 0 3px rgba(var(--bowire-accent-rgb), 0.15) !important;
-}
-/* Theme the overlay panel's scrollbar so dark mode doesn't paint a
-   bright browser-default track on top of the panel. */
-.bowire-search-overlay-panel {
-    scrollbar-width: thin;
-    scrollbar-color: var(--bs-border-color) transparent;
-}
-.bowire-search-overlay-panel::-webkit-scrollbar {
-    width: 10px;
-    height: 10px;
-}
-.bowire-search-overlay-panel::-webkit-scrollbar-track {
-    background: transparent;
-}
-.bowire-search-overlay-panel::-webkit-scrollbar-thumb {
-    background: var(--bs-border-color);
-    border-radius: 8px;
-    border: 2px solid transparent;
-    background-clip: padding-box;
-}
-.bowire-search-overlay-panel::-webkit-scrollbar-thumb:hover {
-    background: var(--bs-secondary-color);
-    background-clip: padding-box;
-}
-.pagefind-ui__result-link {
-    color: var(--bs-emphasis-color) !important;
-}
-.pagefind-ui__result-link:hover {
-    color: var(--bowire-accent) !important;
-}
-.pagefind-ui mark {
-    color: var(--bowire-accent);
-    background: rgba(var(--bowire-accent-rgb), 0.14);
-    padding: 0 2px;
-    border-radius: 3px;
-}
-
-/* Arrow-key / hover highlight on the currently selected result.
-   Background tint + accent text colour only — no left-stripe, since
-   it would curve with the border-radius and read as comma-shaped. */
-.pagefind-ui__result.is-highlighted {
-    background: rgba(var(--bowire-accent-rgb), 0.08);
-    border-radius: 8px;
-    padding-left: 12px !important;
-    padding-right: 12px !important;
-    margin-left: -12px;
-    margin-right: -12px;
-}
-.pagefind-ui__result.is-highlighted .pagefind-ui__result-link {
-    color: var(--bowire-accent) !important;
-}
-
-.bowire-search-hint {
-    flex: 0 0 auto;
-    padding: 14px 20px;
-    border-top: 1px solid var(--bs-border-color);
-    background: var(--bs-tertiary-bg);
-    color: var(--bs-secondary-color);
-    font-size: 0.75rem;
-    text-align: center;
-}
-.bowire-search-hint kbd {
-    display: inline-block;
-    min-width: 20px;
-    padding: 1px 5px;
-    margin: 0 2px;
-    background: var(--bs-tertiary-bg);
-    border: 1px solid var(--bs-border-color);
-    border-bottom-width: 2px;
-    border-radius: 4px;
-    font-family: var(--bs-body-font-family);
-    font-size: 0.6875rem;
-    color: var(--bs-emphasis-color);
-    line-height: 1.4;
-}
-
-/* DocFX injects an anchorjs "#" link beside every heading that pops in
-   on hover. The id is already on the <h*> element itself, so the extra
-   glyph is visual noise — hide it everywhere. Direct deep-links via URL
-   fragment still work. */
-.anchorjs-link {
-    display: none !important;
-}
-
-/* Form layout is set on .bowire-search-overlay .pagefind-ui__form
-   above — nothing more needed here. */
-
-/* Overlay is a Suggest popup, capped at 5 results — no Load-More here. */
-.bowire-search-overlay .pagefind-ui__button {
-    display: none !important;
-}
-
-/* "Load more results" — secondary button style matching the Bowire
-   docs buttons (neutral background, accent on hover). */
-.pagefind-ui__button {
-    background: var(--bs-tertiary-bg) !important;
-    color: var(--bs-emphasis-color) !important;
-    border: 1px solid var(--bs-border-color) !important;
-    border-radius: 8px !important;
-    font-weight: 600 !important;
-    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s !important;
-    cursor: pointer !important;
-}
-.pagefind-ui__button:hover {
-    background: var(--bs-secondary-bg) !important;
-    border-color: var(--bowire-accent) !important;
-    color: var(--bowire-accent) !important;
-    transform: translateY(-1px);
-}
-.pagefind-ui__button:focus-visible {
-    outline: 2px solid var(--bowire-accent) !important;
-    outline-offset: 2px;
-}
-
-/* Clear-query button — circular 28×28 × icon button. Mirrors the
-   marketing site's styling exactly so site and docs share the same
-   affordance in the search popout. */
-.pagefind-ui__search-clear {
-    position: absolute !important;
-    width: 28px !important;
-    height: 28px !important;
-    padding: 0 !important;
-    /* 20 px form padding-top + (52 px input - 28 px button) / 2 = 32 px */
-    top: 32px !important;
-    /* Inside the input's right edge — 28 px from form-right leaves an
-       8-px gap between button and input border. */
-    right: 28px !important;
-    transform: none !important;
-    /* Rounded square to match the input's 10 px radius + the rest of
-       the button system. */
-    border-radius: 8px !important;
-    background: var(--bs-border-color) !important;
-    color: transparent !important;
-    border: none !important;
-    font-size: 0 !important;
-    line-height: 0 !important;
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important;
-    cursor: pointer !important;
-    transition: background 0.15s, color 0.15s, transform 0.15s;
-}
-.pagefind-ui__search-clear::before {
-    content: "";
-    display: block;
-    width: 10px;
-    height: 10px;
-    background-color: var(--bs-emphasis-color);
-    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path stroke='black' stroke-width='1.6' stroke-linecap='round' d='M1 1l8 8M9 1l-8 8'/></svg>");
-    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path stroke='black' stroke-width='1.6' stroke-linecap='round' d='M1 1l8 8M9 1l-8 8'/></svg>");
-    -webkit-mask-repeat: no-repeat;
-    mask-repeat: no-repeat;
-    -webkit-mask-size: contain;
-    mask-size: contain;
-    transition: background-color 0.15s;
-}
-.pagefind-ui__search-clear:hover {
-    background: var(--bowire-accent) !important;
-    transform: scale(1.05) !important;
-}
-.pagefind-ui__search-clear:hover::before {
-    background-color: #fff;
-}
-.pagefind-ui__search-clear:focus-visible {
-    outline: 2px solid var(--bowire-accent) !important;
-    outline-offset: 2px;
-}
-.bowire-docs-nav-home,
-.bowire-docs-nav-github {
-    display: inline-flex;
-    align-items: center;
-    color: var(--bs-secondary-color);
-    text-decoration: none;
-    transition: color 0.2s;
-}
-.bowire-docs-nav-home:hover,
-.bowire-docs-nav-github:hover {
-    color: var(--bowire-accent);
-}
-.bowire-docs-theme-toggle {
-    /* Match site `.theme-toggle` exactly: 32×32 hitbox, 16×16 icon
-       centred inside. Without this the button was only as big as its
-       svg child (16×16), making the header action row visually shorter
-       than the marketing site's. */
-    width: 32px;
-    height: 32px;
-    padding: 0;
-    background: transparent;
-    border: none;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--bs-secondary-color);
-    cursor: pointer;
-    transition: color 0.2s;
-}
-.bowire-docs-theme-toggle svg {
-    width: 16px;
-    height: 16px;
-}
-.bowire-docs-theme-toggle:hover,
-.bowire-docs-theme-toggle:focus {
-    color: var(--bowire-accent);
-    outline: none;
-}
-.bowire-docs-theme-toggle:focus-visible {
-    outline: 2px solid var(--bowire-accent);
-    outline-offset: 2px;
-    border-radius: 4px;
-}
-
-/* ============================================================
-   Main content shell — same Bootstrap container as modern, but
-   we make sure it doesn't slide under the fixed header and we
-   tighten the max-width so it visually matches the marketing
-   site's 1120px column.
-   ============================================================ */
-main.bowire-docs-main-shell {
-    /* Match site/assets/css/style.css `.container` exactly:
-       max-width 1120px + 24px horizontal padding. Bootstrap's
-       container-xxl defaults to 1320px with 12px padding, which
-       made the docs content column visibly wider than the marketing
-       site's hero/cards. Force identical outer box + padding here
-       so the jump site ↔ docs feels seamless. */
-    max-width: 1120px;
-    padding-left: 24px;
-    padding-right: 24px;
-    padding-top: 24px;
-    /* Neutralise Bootstrap's gutter system inside the docs shell.
-       `.container-xxl` and Bootstrap's row/col classes pull
-       --bs-gutter-x (default 1.5rem) into both negative row margins
-       and column padding — that's where the stray 12px on the right
-       of the affix sidebar comes from, leaving the "In this article"
-       column ending visibly inside the header's GitHub icon column.
-       Setting the gutter to 0 here keeps every nested .row + .col
-       flush with main's own 24px padding edge, so the affix lines up
-       with the header's right edge pixel-for-pixel. */
-    --bs-gutter-x: 0;
-}
-
-
-/* === Right rail (article tools + section-nav) ====================
-   Two stacked pills on the right edge of the viewport:
-     • .docs-rail-tools — top pill, hosts per-article tool buttons
-       (currently just the "On this page" outline toggle; future tools
-       — share, copy-link, edit, mark-read — would land alongside).
-     • .docs-section-nav — bottom pill, scrollspy dots built at
-       runtime from article h2 elements (one per section).
-   Both pills share visual treatment (translucent + blur, pill shape,
-   thin border) so the rail reads as a coherent vertical band; the
-   parent .docs-rail keeps them centred and stacks them with a small
-   gap so each can scale independently. Hidden on mobile (< 768 px).
-   ============================================================ */
-.docs-rail {
-    position: fixed;
-    right: 18px;
-    top: 50%;
-    transform: translateY(-50%);
-    z-index: 1015;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    gap: 12px;
-    pointer-events: none;  /* gaps between pills don't block clicks */
-}
-/* Explicit because `display: flex` above overrides the user-agent
-   default `[hidden] { display: none }` and the rail-hide JS uses
-   the [hidden] attribute. */
-.docs-rail[hidden] { display: none; }
-.docs-rail > * {
-    pointer-events: auto;
-}
-
-/* Tools pill — small per-article-action surface. Style matches the
-   section-nav pill so the two read as siblings. */
-.docs-rail-tools {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    padding: 6px;
-    background: rgba(15, 15, 23, 0.55);
-    backdrop-filter: blur(10px);
-    -webkit-backdrop-filter: blur(10px);
-    border-radius: 999px;
-    border: 1px solid var(--bs-border-color);
-}
-:root[data-bs-theme="light"] .docs-rail-tools {
-    background: rgba(250, 250, 255, 0.7);
-}
-.docs-rail-tool {
-    width: 24px;
-    height: 24px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: none;
-    background: transparent;
-    color: var(--bs-secondary-color);
-    cursor: pointer;
-    border-radius: 50%;
-    padding: 0;
-    transition: color 0.15s, background 0.15s;
-}
-.docs-rail-tool:hover,
-.docs-rail-tool:focus-visible {
-    color: var(--bs-link-color);
-    outline: none;
-}
-.docs-rail-tool[aria-expanded="true"] {
-    color: var(--bs-link-color);
-}
-.docs-rail-tool svg { display: block; }
-/* Explicit because `display: flex` on the parent + `display: inline-
-   flex` here override the user-agent default `[hidden]{display:none}`,
-   so the JS that hides empty triggers needs a CSS hand. */
-.docs-rail-tools[hidden],
-.docs-rail-tool[hidden] {
-    display: none;
-}
-
-/* Section-nav pill — sits inside the rail, no longer fixed-positioned
-   itself (the parent .docs-rail handles viewport anchoring). */
-.docs-section-nav {
-    position: static;
-    transform: none;
-    right: auto;
-    top: auto;
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    padding: 8px 6px;
-    background: rgba(15, 15, 23, 0.55);
-    backdrop-filter: blur(10px);
-    -webkit-backdrop-filter: blur(10px);
-    border-radius: 999px;
-    border: 1px solid var(--bs-border-color);
-}
-:root[data-bs-theme="light"] .docs-section-nav {
-    background: rgba(250, 250, 255, 0.7);
-}
-.docs-section-nav[hidden] { display: none; }
-
-.docs-section-nav-dot {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 24px;
-    height: 24px;
-    border-radius: 50%;
-    cursor: pointer;
-    background: transparent;
-    border: none;
-    padding: 0;
-    text-decoration: none;
-    color: inherit;
-}
-.docs-section-nav-dot::before {
-    content: '';
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background: var(--bs-secondary-color);
-    opacity: 0.4;
-    transition: opacity 0.15s, transform 0.15s, background 0.15s;
-}
-.docs-section-nav-dot:hover::before,
-.docs-section-nav-dot:focus-visible::before {
-    opacity: 0.85;
-    transform: scale(1.25);
-}
-.docs-section-nav-dot.is-active::before {
-    background: var(--bs-link-color);
-    opacity: 1;
-    transform: scale(1.35);
-}
-.docs-section-nav-dot:focus-visible {
-    outline: 2px solid var(--bs-link-color);
-    outline-offset: 2px;
-}
-
-/* Tooltip-style label to the left of each dot — only visible on
-   hover/focus so the pill stays minimal at rest. */
-.docs-section-nav-dot-label {
-    position: absolute;
-    right: calc(100% + 8px);
-    top: 50%;
-    transform: translateY(-50%) translateX(4px);
-    white-space: nowrap;
-    padding: 4px 10px;
-    background: var(--bs-body-bg);
-    border: 1px solid var(--bs-border-color);
-    border-radius: 6px;
-    font-size: 0.8125rem;
-    color: var(--bs-body-color);
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 0.15s, transform 0.15s;
-    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
-}
-.docs-section-nav-dot:hover .docs-section-nav-dot-label,
-.docs-section-nav-dot:focus-visible .docs-section-nav-dot-label {
-    opacity: 1;
-    transform: translateY(-50%) translateX(0);
-}
-
-/* Gap marker — inserted between two non-adjacent picked dots when the
-   article has more headings than the pill can show (sampled mode).
-   Two stacked micro-dots in the same dot-language as the surrounding
-   pill so the strip reads as "… some entries hidden here", without
-   adding clickable noise. Use the Sections / Outline overlay to find
-   the skipped headings. */
-.docs-section-nav-gap {
-    width: 24px;
-    height: 10px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 2px;
-    pointer-events: none;
-}
-.docs-section-nav-gap::before,
-.docs-section-nav-gap::after {
-    content: '';
-    width: 2px;
-    height: 2px;
-    border-radius: 50%;
-    background: var(--bs-secondary-color);
-    opacity: 0.35;
-}
-
-@media (max-width: 768px) {
-    .docs-rail { display: none; }
-}
-
-/* === "On this page" outline overlay ==============================
-   Modal popup analog to the Pagefind .bowire-search-overlay —
-   centred panel with translucent backdrop, opened from the right-
-   rail tool button. Same backdrop colour, same panel chrome, same
-   slide-in animation so the docs site has one cohesive overlay
-   idiom across search and outline. The overlay is purely transient:
-   no localStorage, opens fresh, dismisses on backdrop / Esc / link
-   click inside the list. ====================================== */
-.bowire-docs-overlay {
-    position: fixed;
-    inset: 0;
-    z-index: 1100;
-    display: flex;
-    align-items: flex-start;
-    justify-content: center;
-    padding-top: min(12vh, 120px);
-    background: rgba(15, 15, 23, 0.55);
-    backdrop-filter: blur(6px);
-    -webkit-backdrop-filter: blur(6px);
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 0.15s ease;
-}
-:root[data-bs-theme="light"] .bowire-docs-overlay {
-    background: rgba(200, 200, 220, 0.55);
-}
-.bowire-docs-overlay.is-open {
-    opacity: 1;
-    pointer-events: auto;
-}
-.bowire-docs-overlay-panel {
-    width: min(560px, calc(100% - 48px));
-    max-height: 80vh;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    background: var(--bs-secondary-bg);
-    border: 1px solid var(--bs-border-color);
-    border-radius: 12px;
-    padding: 0;
-    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
-    transform: translateY(-8px);
-    transition: transform 0.2s ease;
-}
-.bowire-docs-overlay.is-open .bowire-docs-overlay-panel {
-    transform: translateY(0);
-}
-.bowire-docs-overlay-title {
-    flex-shrink: 0;
-    font-size: 0.85em;
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
-    color: var(--bs-secondary-color);
-    margin: 0;
-    font-weight: 600;
-    padding: 16px 20px;
-    /* Header capsule — same tertiary bg as the search overlay's input
-       zone, with a 1 px separator below before the link list (which
-       sits on the lighter secondary bg). Reads as a clear "title +
-       content + footer" three-band layout. */
-    background: var(--bs-tertiary-bg);
-    border-bottom: 1px solid var(--bs-border-color);
-}
-.bowire-docs-overlay nav#affix {
-    flex: 1 1 auto;
-    min-height: 0;
-    overflow-y: auto;
-    overflow-x: hidden;
-    background: var(--bs-secondary-bg);
-    scrollbar-width: thin;
-    scrollbar-color: var(--bs-border-color) transparent;
-    margin: 0;
-    padding: 16px 20px;
-}
-.bowire-docs-overlay nav#affix::-webkit-scrollbar { width: 6px; }
-.bowire-docs-overlay nav#affix::-webkit-scrollbar-track { background: transparent; }
-.bowire-docs-overlay nav#affix::-webkit-scrollbar-thumb {
-    background: var(--bs-border-color);
-    border-radius: 3px;
-}
-/* DocFX injects its own h5 inside the nav — hide it; our static
-   .bowire-docs-overlay-title above already labels the panel. */
-.bowire-docs-overlay nav#affix > h5 {
-    display: none;
-}
-
-/* --- Tree styling for the article outline ---
-   DocFX's runtime renders a single flat <ul> with both h2 and h3
-   anchors as siblings; the depth distinction lives on the <a>:
-     • h2 → class `link-body-emphasis` (top level)
-     • h3 → class `link-secondary` (sub-level)
-   We translate that into a visible tree by indenting + adding a
-   thin tree-line on the secondary anchors. On pages that contain
-   ONLY secondaries (e.g. namespace pages where every entry is h3
-   "Classes" / "Enums" / "Interfaces"), the indent is dropped via
-   :has() so they read as their own top-level — otherwise every
-   item would float as an orphaned indent with no parent above. */
-.bowire-docs-overlay nav#affix ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-}
-.bowire-docs-overlay nav#affix li {
-    margin: 0;
-    line-height: 1.45;
-}
-.bowire-docs-overlay nav#affix a {
-    color: var(--bs-body-color);
-    text-decoration: none !important;
-    font-size: 13.5px;
-    display: block;
-    padding: 4px 10px;
-    margin: 1px 0;
-    border-radius: 4px;
-    white-space: normal;
-    word-break: break-word;
-    transition: color 0.15s, background 0.15s;
-}
-.bowire-docs-overlay nav#affix a.link-secondary {
-    color: var(--bs-secondary-color);
-    margin-left: 14px;
-    padding-left: 12px;
-    border-left: 1px solid var(--bs-border-color);
-    border-radius: 0 4px 4px 0;
-}
-/* Pages with no top-level (h2) entries — every item is link-secondary.
-   Drop the indent so they don't read as orphan-children. */
-.bowire-docs-overlay nav#affix:not(:has(.link-body-emphasis)) a.link-secondary {
-    margin-left: 0;
-    padding-left: 10px;
-    border-left: none;
-}
-.bowire-docs-overlay nav#affix a:hover,
-.bowire-docs-overlay nav#affix a:focus-visible {
-    color: var(--bs-link-color);
-    background: var(--bs-tertiary-bg);
-    outline: none;
-}
-/* Active section — DocFX's runtime adds `.active` to the <li> as the
-   user scrolls; sometimes `.in` for ancestor lis containing the
-   active one. */
-.bowire-docs-overlay nav#affix li.active > a,
-.bowire-docs-overlay nav#affix li.in > a {
-    color: var(--bs-link-color);
-    font-weight: 600;
-    background: var(--bs-tertiary-bg);
-}
-/* Keyboard / hover cursor — mirrors the search overlay's
-   .pagefind-ui__result.is-highlighted treatment so the two overlays
-   share one selection idiom. ArrowUp/Down + Enter open the entry.
-   Background tint + accent text colour only (no left-stripe; with
-   border-radius the stripe curves and looks comma-shaped). */
-.bowire-docs-overlay nav#affix a.is-highlighted {
-    color: var(--bowire-accent) !important;
-    background: rgba(var(--bowire-accent-rgb), 0.08);
-}
-/* Inline <h6> group headers between groups of <li> — DocFX uses
-   these to label "Constructors", "Methods" etc. on type pages. */
-.bowire-docs-overlay nav#affix h6 {
-    font-size: 11px;
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
-    color: var(--bs-secondary-color);
-    margin: 14px 0 4px;
-    font-weight: 600;
-    padding: 0 10px;
-}
-.bowire-docs-overlay nav#affix h6:first-child {
-    margin-top: 0;
-}
-/* Footer hint band — same visual treatment as the search overlay's
-   .bowire-search-hint (tertiary bg, full-width centred, bordered
-   top, kbd pills with double-bottom-border). */
-.bowire-docs-overlay-hint {
-    flex: 0 0 auto;
-    padding: 14px 20px;
-    border-top: 1px solid var(--bs-border-color);
-    background: var(--bs-tertiary-bg);
-    color: var(--bs-secondary-color);
-    font-size: 0.75rem;
-    text-align: center;
-}
-.bowire-docs-overlay-hint kbd {
-    display: inline-block;
-    min-width: 20px;
-    padding: 1px 5px;
-    margin: 0 2px;
-    background: var(--bs-tertiary-bg);
-    border: 1px solid var(--bs-border-color);
-    border-bottom-width: 2px;
-    border-radius: 4px;
-    font-family: var(--bs-body-font-family);
-    font-size: 0.6875rem;
-    color: var(--bs-emphasis-color);
-    line-height: 1.4;
-}
-
-/* === end docs subbar + subpanels ================================= */
-
-/* Drop DocFX upstream's `margin: 0 3rem` on the article column —
-   without this the article visually indents 48 px each side relative
-   to the top header and subbar, breaking the left/right alignment of
-   the docs site's vertical line. Our 1120 px container already
-   supplies the only horizontal padding we want (24 px each side). */
-main.bowire-docs-main-shell > .content,
-body:not([data-search])[data-layout=conceptual] > main.bowire-docs-main-shell > .content {
-    margin: 0 !important;
-}
-
-/* Breadcrumb above the article. DocFX renders an <ol class="breadcrumb">
-   inside <nav id="breadcrumb"> at runtime from toc.json, using
-   Bootstrap's Breadcrumb component. We re-skin it to match the
-   docs-site palette: dim secondary text for crumbs, accent on hover,
-   chevron `›` separator instead of the BS default `/`. Active
-   (current) crumb gets emphasis colour without bold so it doesn't
-   compete with the article H1 below it. Hidden when DocFX produces
-   an empty list (single-item breadcrumbs are auto-hidden upstream). */
-main.bowire-docs-main-shell > .content > .actionbar {
-    margin: 4px 0 14px;
-}
-main.bowire-docs-main-shell > .content > .actionbar:has(.breadcrumb:empty),
-main.bowire-docs-main-shell > .content > .actionbar:not(:has(.breadcrumb-item)) {
-    display: none;
-}
-nav#breadcrumb .breadcrumb {
-    --bs-breadcrumb-divider: '\203A'; /* › */
-    --bs-breadcrumb-divider-color: var(--bs-secondary-color);
-    --bs-breadcrumb-item-padding-x: 8px;
-    --bs-breadcrumb-margin-bottom: 0;
-    --bs-breadcrumb-padding-y: 0;
-    --bs-breadcrumb-padding-x: 0;
-    --bs-breadcrumb-font-size: 0.8125rem;
-    --bs-breadcrumb-bg: transparent;
-    --bs-breadcrumb-item-active-color: var(--bs-emphasis-color);
-}
-nav#breadcrumb .breadcrumb-item a {
-    color: var(--bs-secondary-color);
-    text-decoration: none;
-    transition: color 0.15s;
-}
-nav#breadcrumb .breadcrumb-item a:hover,
-nav#breadcrumb .breadcrumb-item a:focus-visible {
-    color: var(--bowire-accent);
-    outline: none;
-}
-nav#breadcrumb .breadcrumb-item + .breadcrumb-item::before {
-    /* Chevron at slightly reduced opacity so the trail reads as
-       structure rather than punctuation. */
-    opacity: 0.55;
-}
-
-/* Upstream DocFX sets scroll-margin-top: 60 px on every article anchor
-   target, but our docs header is 64 px tall — close enough that hash
-   jumps from the dot-nav land the heading 4 px under the header.
-   Bump the offset to 80 px (header height + a buffer) so the anchor
-   scrolls into clean space below the sticky chrome. */
-@media (min-width: 768px) {
-    body.bowire-docs main.bowire-docs-main-shell > .content > article [id] {
-        scroll-margin-top: 80px;
-    }
-}
-
-/* Sections nav itself — mirror the Outline overlay's nav#affix
-   layout so the dialog has the same inset (16 / 20 px) on the
-   filter input + entries instead of being flush to the panel edge. */
-.bowire-sections-overlay nav#toc {
-    flex: 1 1 auto;
-    min-height: 0;
-    overflow-y: auto;
-    overflow-x: hidden;
-    background: var(--bs-secondary-bg);
-    scrollbar-width: thin;
-    scrollbar-color: var(--bs-border-color) transparent;
-    margin: 0;
-    padding: 16px 20px;
-    display: flex;
-    flex-direction: column;
-}
-.bowire-sections-overlay nav#toc::-webkit-scrollbar { width: 6px; }
-.bowire-sections-overlay nav#toc::-webkit-scrollbar-track { background: transparent; }
-.bowire-sections-overlay nav#toc::-webkit-scrollbar-thumb {
-    background: var(--bs-border-color);
-    border-radius: 3px;
-}
-
-/* TOC links inside the Sections overlay — wrap long names, no
-   underline (DocFX adds one on hover by default), same hover/active
-   colour scheme as the Outline overlay so both modals share one
-   selection idiom. */
-.bowire-sections-overlay .toc .toc-link {
-    white-space: normal;
-    word-break: break-word;
-    text-decoration: none !important;
-    color: var(--bs-body-color);
-    display: block;
-    padding: 4px 10px;
-    margin: 1px 0;
-    border-radius: 4px;
-    transition: color 0.15s, background 0.15s;
-}
-.bowire-sections-overlay .toc .toc-link:hover,
-.bowire-sections-overlay .toc .toc-link:focus-visible {
-    color: var(--bs-link-color);
-    background: var(--bs-tertiary-bg);
-    outline: none;
-}
-.bowire-sections-overlay .toc .toc-link.is-highlighted {
-    color: var(--bowire-accent) !important;
-    background: rgba(var(--bowire-accent-rgb), 0.08);
-}
-/* Active page in the TOC — DocFX adds .active to the matching li. */
-.bowire-sections-overlay .toc li.active > .toc-link,
-.bowire-sections-overlay .toc li.in > .toc-link {
-    color: var(--bs-link-color);
-    font-weight: 600;
-    background: var(--bs-tertiary-bg);
-}
-/* Nested children in the TOC — indent under their parent + tree-line.
-   DocFX hides them by default and shows .expanded > ul. */
-.bowire-sections-overlay .toc li > ul {
-    margin-left: 12px;
-    padding-left: 12px;
-    border-left: 1px solid var(--bs-border-color);
-    margin-top: 2px;
-    margin-bottom: 4px;
-}
-
-/* Alternating H2-group backgrounds inside the article — wrapped by the
-   inline script in _master.tmpl, styled here. Same box-shadow +
-   clip-path full-bleed trick the marketing site uses for .features-group-alt. */
-.docs-article-group {
-    padding: 32px 0 24px;
-    position: relative;
-}
-/* Alternate-section full-bleed background. The `box-shadow: 0 0 0 100vmax`
-   trick would paint over the left TOC + the right article-TOC because
-   it projects outside the section box. Move the bleed onto a ::before
-   pseudo-element with z-index: -1 so it stays behind the content layer
-   and the surrounding sidebars keep their own stacking context. */
-.docs-article-group-alt {
-    position: relative;
-    background: transparent;
-    z-index: 0;
-}
-.docs-article-group-alt::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background: var(--bs-secondary-bg);
-    box-shadow: 0 0 0 100vmax var(--bs-secondary-bg);
-    clip-path: inset(0 -100vmax);
-    z-index: -1;
-}
-/* Pull the toc list flush to the subpanel's left padding edge.
-   DocFX's defaults leave .toc li with padding-left: 0.85rem (room for
-   an expand-stub icon); we currently don't render expand-stubs, so the
-   indent reads as wasted left margin. */
-.bowire-sections-overlay .toc form.filter,
-.bowire-sections-overlay .toc ul,
-.bowire-sections-overlay .toc li {
-    padding-left: 0 !important;
-    margin-left: 0 !important;
-}
-.bowire-sections-overlay .toc form.filter > input {
-    padding-left: 1.5rem !important;
-}
-.bowire-sections-overlay .toc form.filter > i.bi {
-    left: 0.4rem !important;
-}
-.docs-article-group > h2:first-child {
-    margin-top: 0;
-}
-
-/* Article body typography */
-article {
-    font-family: var(--bs-body-font-family);
-    color: var(--bs-body-color);
-    line-height: 1.7;
-}
-article h1, article h2, article h3, article h4 {
-    font-family: var(--bs-body-font-family);
-    font-weight: 700;
-    letter-spacing: -0.02em;
-    color: var(--bs-heading-color);
-}
-article h1 {
-    font-weight: 800;
-    margin-bottom: 1rem;
-    padding-bottom: 0.5rem;
-    border-bottom: 2px solid var(--bowire-accent);
-    display: inline-block;
-}
-article h2 {
-    margin-top: 2rem;
-}
-article a {
-    color: var(--bs-link-color);
-    text-decoration: none;
-}
-article a:hover {
-    color: var(--bs-link-hover-color);
-    text-decoration: underline;
-}
-
-/* Code styling */
-article code {
-    font-family: var(--bs-font-monospace);
-    font-size: 0.875em;
-    color: var(--bs-code-color);
-    background: var(--bs-tertiary-bg);
-    padding: 0.15em 0.4em;
-    border-radius: 4px;
-}
-article pre {
-    background: var(--bs-tertiary-bg);
-    border: 1px solid var(--bs-border-color);
-    border-radius: 8px;
-    padding: 16px;
-    font-family: var(--bs-font-monospace);
-    font-size: 0.875rem;
-    line-height: 1.6;
-    overflow-x: auto;
-}
-article pre code {
-    background: none;
-    padding: 0;
-    font-size: inherit;
-    color: var(--bs-body-color);
-    border: none;
-}
-
-/* Fenced-code block chrome — DocFX renders bare `<pre><code>` for every
-   triple-backtick block; the inline script at the bottom of the master
-   template wraps each one in a `.docs-code-block` element with a copy
-   button so the docs reach parity with the marketing site's
-   `.code-block` + `.copy-btn` affordance (style.css ~640). Idempotent
-   so re-renders / hot reloads don't double-wrap. */
-article .docs-code-block {
-    position: relative;
-    margin: 1rem 0;
-}
-article .docs-code-block pre {
-    margin: 0;
-}
-article .docs-code-copy {
-    position: absolute;
-    top: 8px;
-    right: 8px;
-    background: transparent;
-    border: 1px solid var(--bs-border-color);
-    color: var(--bs-secondary-color);
-    padding: 5px 7px;
-    border-radius: 6px;
-    cursor: pointer;
-    line-height: 0;
-    opacity: 0;
-    transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
-}
-article .docs-code-block:hover .docs-code-copy,
-article .docs-code-copy:focus-visible {
-    opacity: 1;
-}
-article .docs-code-copy:hover {
-    color: var(--bs-link-color);
-    border-color: var(--bs-link-color);
-    background: rgba(99, 102, 241, 0.08);
-}
-article .docs-code-copy.is-copied {
-    color: #16a34a;
-    border-color: #16a34a;
-    opacity: 1;
-}
-
-/* highlight.js — Bowire brand palette */
-.hljs {
-    background: var(--bs-tertiary-bg) !important;
-    color: var(--bs-body-color);
-}
-.hljs-comment, .hljs-quote, .hljs-deletion {
-    color: #6a6a82;
-    font-style: italic;
-}
-.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-doctag,
-.hljs-section, .hljs-name, .hljs-strong {
-    color: var(--bowire-accent);
-    font-weight: 600;
-}
-.hljs-string, .hljs-attr, .hljs-symbol, .hljs-bullet, .hljs-addition {
-    color: var(--bowire-accent-hover);
-}
-.hljs-number, .hljs-regexp {
-    color: #fbbf24;
-}
-.hljs-built_in, .hljs-type, .hljs-class .hljs-title, .hljs-builtin-name {
-    color: #34d399;
-}
-.hljs-function .hljs-title, .hljs-title.function_, .hljs-title.class_ {
-    color: #60a5fa;
-}
-.hljs-tag, .hljs-meta, .hljs-meta-keyword {
-    color: #c084fc;
-}
-.hljs-attribute, .hljs-property {
-    color: #818cf8;
-}
-.hljs-link {
-    color: var(--bowire-accent);
-    text-decoration: underline;
-}
-
-/* Tables — borderless rows + accent header */
-article table {
-    width: 100%;
-    border-collapse: collapse;
-    margin: 1rem 0;
-}
-article table th {
-    text-align: left;
-    padding: 8px 12px;
-    border-bottom: 2px solid var(--bowire-accent);
-    color: var(--bs-heading-color);
-    font-weight: 600;
-    font-size: 0.875rem;
-}
-article table td {
-    padding: 8px 12px;
-    border-bottom: 1px solid var(--bs-border-color);
-    font-size: 0.875rem;
-    color: var(--bs-body-color);
-}
-article table tr:hover td {
-    background: var(--bs-tertiary-bg);
-}
-
-/* Blockquotes */
-article blockquote {
-    border-left: 3px solid var(--bowire-accent);
-    background: var(--bs-tertiary-bg);
-    padding: 12px 16px;
-    margin: 1rem 0;
-    border-radius: 0 6px 6px 0;
-    color: var(--bs-secondary-color);
-}
-article blockquote p {
-    margin: 0;
-}
-
-/* ============================================================
-   Side TOC (left) — Bowire accent on active item
-   ============================================================ */
-nav.toc .nav-link.active,
-.toc-item.active > a,
-.toc .nav-item.active > .nav-link {
-    color: var(--bs-link-color) !important;
-    background: var(--bs-tertiary-bg);
-    border-left: 3px solid var(--bowire-accent);
-    padding-left: 9px;
-    font-weight: 600;
-}
-nav.toc .nav-link {
-    color: var(--bs-secondary-color);
-    transition: color 0.15s, background 0.15s;
-}
-nav.toc .nav-link:hover {
-    color: var(--bs-link-hover-color);
-}
-
-/* ============================================================
-   Affix nav (right side, "in this article") — accent active
-   ============================================================ */
-nav#affix .nav-link.active {
-    color: var(--bowire-accent) !important;
-    border-left: 2px solid var(--bowire-accent);
-    padding-left: 10px;
-}
-nav#affix .nav-link {
-    color: var(--bs-secondary-color);
-}
-nav#affix .nav-link:hover {
-    color: var(--bs-emphasis-color);
-}
-
-/* ============================================================
-   Edit-on-GitHub button — Bowire accent restyle
-   ============================================================ */
-.contribution .edit-link {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    padding: 6px 12px;
-    background: transparent;
-    border: 1px solid var(--bowire-accent);
-    border-radius: 6px;
-    color: var(--bowire-accent);
-    font-size: 0.8125rem;
-    font-weight: 600;
-    text-decoration: none;
-    transition: all 0.15s;
-}
-.contribution .edit-link:hover {
-    background: rgba(var(--bowire-accent-rgb), 0.12);
-    border-color: var(--bowire-accent-hover);
-    color: var(--bowire-accent-hover);
-    transform: translateY(-1px);
-    box-shadow: 0 2px 8px rgba(var(--bowire-accent-rgb), 0.2);
-    text-decoration: none;
-}
-.contribution .edit-link::before {
-    content: '✎';
-    font-size: 0.875rem;
-}
-
-/* ============================================================
-   Search bar — Bowire tertiary surface + indigo focus ring
-   ============================================================ */
-#search-query, .search input {
-    background: var(--bs-tertiary-bg);
-    border: 1px solid var(--bs-border-color);
-    color: var(--bs-body-color);
-    border-radius: 6px;
-    transition: border-color 0.15s, box-shadow 0.15s;
-}
-#search-query:focus, .search input:focus {
-    border-color: var(--bowire-accent);
-    box-shadow: 0 0 0 3px rgba(var(--bowire-accent-rgb), 0.25);
-    outline: none;
-}
-#search-query::placeholder, .search input::placeholder {
-    color: var(--bs-tertiary-color);
-}
-
-/* ============================================================
-   Bowire footer — exact mirror of the marketing site's footer
-   ============================================================ */
-.bowire-docs-footer {
-    margin-top: 4rem;
-    padding: 40px 0 0;
-    border-top: 1px solid var(--bs-border-color);
-    color: var(--bs-secondary-color);
-    font-family: var(--bs-body-font-family);
-}
-.bowire-docs-footer-inner {
-    max-width: 1120px;
-    margin: 0 auto;
-    padding: 0 24px;
-}
-.bowire-docs-footer-top {
-    display: grid;
-    grid-template-columns: 1fr auto;
-    gap: 48px;
-    align-items: start;
-}
-.bowire-docs-footer-brand {
-    /* Match site .footer-brand exactly: block flex so the tagline wraps
-       naturally below on narrow widths. 6px sits between a word-space
-       and a visible separator, so "Bowire is tied by Küstenlogik…"
-       still reads as one sentence. */
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 6px;
-}
-.bowire-docs-footer-logo {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    font-weight: 700;
-    font-size: 0.8125rem;
-    color: var(--bs-emphasis-color);
-    line-height: 1;
-}
-.bowire-docs-footer-logo-icon {
-    width: 17px;
-    height: 17px;
-    flex-shrink: 0;
-    display: block;
-}
-.bowire-docs-footer-tagline {
-    font-size: 0.8125rem;
-    color: var(--bs-tertiary-color);
-}
-.bowire-docs-footer-tagline a {
-    color: inherit;
-    text-decoration: none;
-    transition: color 0.15s;
-}
-.bowire-docs-footer-tagline a:hover {
-    color: var(--bowire-accent);
-}
-
-.bowire-docs-footer-nav {
-    display: grid;
-    grid-template-columns: repeat(3, minmax(130px, auto));
-    gap: 32px 48px;
-}
-.bowire-docs-footer-nav-col {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-}
-.bowire-docs-footer-nav-title {
-    font-size: 0.72rem;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-    color: var(--bs-tertiary-color);
-    margin-bottom: 4px;
-}
-.bowire-docs-footer-nav-col a {
-    color: var(--bs-secondary-color);
-    font-size: 0.875rem;
-    text-decoration: none;
-    transition: color 0.15s;
-}
-.bowire-docs-footer-nav-col a:hover {
-    color: var(--bowire-accent);
-}
-
-.bowire-docs-footer-bottom {
-    /* Full-width divider bar — border-top spans edge-to-edge; the
-       inner div wraps the copyright text with the same max-width
-       container the rest of the page uses so the text sits dead
-       centre on wide viewports. */
-    margin-top: 40px;
-    padding: 20px 0;
-    border-top: 1px solid var(--bs-border-color);
-    text-align: center;
-}
-.bowire-docs-footer-bottom-inner {
-    max-width: 1120px;
-    margin: 0 auto;
-    padding: 0 24px;
-    font-size: 0.8125rem;
-    color: var(--bs-tertiary-color);
-}
-/* Inline legal strip — © + Legal + Privacy on one line. Separators
-   are literal HTML &middot;'s in the markup (explicit beats CSS
-   pseudo-elements + survives screen-reader linearisation). */
-.bowire-docs-footer-legal-sep { margin: 0 4px; opacity: 0.5; }
-.bowire-docs-footer-legal-link { color: inherit; text-decoration: none; }
-.bowire-docs-footer-legal-link:hover { color: var(--bowire-accent); }
-
-@media (max-width: 768px) {
-    .bowire-docs-footer-top {
-        grid-template-columns: 1fr;
-        gap: 32px;
-    }
-    .bowire-docs-footer-nav {
-        grid-template-columns: repeat(3, 1fr);
-        gap: 24px;
-    }
-}
-@media (max-width: 540px) {
-    .bowire-docs-footer-nav {
-        grid-template-columns: 1fr 1fr;
-    }
-}
-
-/* ============================================================
-   Hero block — for docs/index.md or other landing pages that
-   want a marketing-style intro
-   ============================================================ */
-/* Online docs default: render the heading like every other page on
-   the marketing site (features-page-hero, legal-hero) — centered
-   text, no card frame, no background tint. The framed card-style
-   variant lives below under .bowire-docs-mode-standalone, where the
-   docs are read offline and the surround acts as a cover-page block. */
-.bowire-docs-hero {
-    margin: 0 0 2.5rem;
-    padding: 2rem 0 1.5rem;
-    text-align: center;
-    border: 0;
-    background: none;
-    border-radius: 0;
-    position: relative;
-    overflow: hidden;
-}
-.bowire-docs-hero::before {
-    content: none;
-}
-
-/* Standalone build (release zip / offline PDF) keeps the framed
-   cover-card look — there's no surrounding marketing site so the
-   border helps the title sit as a self-contained header. */
-body.bowire-docs-mode-standalone .bowire-docs-hero {
-    padding: 2.5rem 2rem;
-    text-align: left;
-    border: 1px solid var(--bs-border-color);
-    border-radius: 12px;
-    background: linear-gradient(135deg,
-        rgba(var(--bowire-accent-rgb), 0.06) 0%,
-        rgba(var(--bowire-accent-rgb), 0.02) 100%);
-}
-/* Standalone / PDF: the cover hero is its own page. Force a page
-   break after the hero so "Where to start" + the rest of the
-   landing index begin on a fresh page in the printed PDF. Without
-   this rule the hero and the first section share the title page
-   and the visual hierarchy ('this is the cover, the manual starts
-   overleaf') is lost. Doesn't affect the online HTML — only kicks
-   in for @media print, which is what Playwright's page.pdf() runs
-   under. */
-@media print {
-    body.bowire-docs-mode-standalone .bowire-docs-hero {
-        break-after: page;
-        page-break-after: always;
-    }
-}
-body.bowire-docs-mode-standalone .bowire-docs-hero::before {
-    content: '';
-    position: absolute;
-    top: -50%;
-    right: -10%;
-    width: 400px;
-    height: 400px;
-    background: radial-gradient(circle, rgba(var(--bowire-accent-rgb), 0.08) 0%, transparent 60%);
-    pointer-events: none;
-}
-
-/* Standalone / PDF cover badge — hidden by default (online docs),
-   revealed when the body has the mode-standalone class set by the
-   master template's {{#_standalone}} block. The .online-only pair
-   is the mirror: visible in the online docs, hidden in the standalone
-   zip / PDF so we don't ship duplicate titles or site-only banners. */
-/* Utility toggle classes — !important because they must beat any other
-   display rule attached to the same element (e.g. the hero badge also
-   carries .bowire-docs-standalone-badge with display:inline-block). */
-.standalone-only {
-    display: none !important;
-}
-.bowire-docs-mode-standalone .standalone-only {
-    display: block !important;
-}
-.online-only {
-    display: block;
-}
-.bowire-docs-mode-standalone .online-only {
-    display: none !important;
-}
-.bowire-docs-standalone-badge {
-    font-family: var(--bs-font-monospace);
-    font-size: 0.72rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.12em;
-    color: var(--bowire-accent);
-    background: rgba(var(--bowire-accent-rgb), 0.12);
-    border: 1px solid rgba(var(--bowire-accent-rgb), 0.35);
-    padding: 6px 14px;
-    border-radius: 999px;
-    margin: 0 auto 1.25rem;
-    display: inline-block;
-}
-
-.bowire-docs-hero-logo {
-    /* Hero wordmark — same big horizontal "Bowire knot" mark the
-       marketing site shows above its H1 on the landing page. Uses
-       currentColor so it flips white on dark / black on light in step
-       with the theme. Acts as the cover image on the standalone docs
-       and the PDF title page. Margin-x:auto centres it under the
-       online hero; the standalone override below pins it left so the
-       cover-card reads top-down. */
-    display: block;
-    width: clamp(220px, 50vw, 340px);
-    height: auto;
-    margin: 0 auto 1.25rem;
-    color: var(--bs-emphasis-color);
-}
-body.bowire-docs-mode-standalone .bowire-docs-hero-logo {
-    margin-left: 0;
-    margin-right: 0;
-}
-.bowire-docs-hero-title,
-.bowire-docs-hero h1 {
-    margin: 0 0 0.75rem;
-    padding: 0;
-    border: none;
-    display: block;
-    /* Match the marketing-site hero scale (features.html etc.) so the
-       online docs landing page has the same visual weight as siblings
-       on bowire.io. The standalone override below restores the smaller
-       cover-card scale for the PDF / offline ZIP build. */
-    font-size: clamp(2.25rem, 5vw, 3.25rem);
-    font-weight: 800;
-    letter-spacing: -0.02em;
-    background: linear-gradient(135deg, var(--bs-emphasis-color) 0%, var(--bowire-accent-hover) 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-}
-body.bowire-docs-mode-standalone .bowire-docs-hero-title,
-body.bowire-docs-mode-standalone .bowire-docs-hero h1 {
-    font-size: clamp(1.75rem, 4vw, 2.25rem);
-}
-.bowire-docs-hero-tagline {
-    /* Centre the tagline under the online hero — the parent
-       .bowire-docs-hero is text-align:center, but a block-level <p>
-       with max-width still needs auto margins to actually centre. The
-       standalone override below pins it left for the cover-card. */
-    margin: 0 auto 1.5rem;
-    color: var(--bs-secondary-color);
-    font-size: 1.125rem;
-    line-height: 1.5;
-    max-width: 880px;
-}
-body.bowire-docs-mode-standalone .bowire-docs-hero-tagline {
-    margin-left: 0;
-    margin-right: 0;
-    font-size: 1rem;
-}
-
-/* Alternating-band sections on the docs landing page (docs/index.md).
-   Mirrors the .community-section / .community-section-alt pattern from
-   the marketing site so the docs hero → 'Where to start' → 'About these
-   docs' progression has the same visual rhythm as features.html /
-   community.html.
-   Full-bleed background via the negative-margin trick — the page sits
-   inside DocFX's article column with a max-width, but the alt-band
-   should fill viewport edge-to-edge. `calc(50% - 50vw)` is the offset
-   from the column edge to the viewport edge; matching positive padding
-   restores the inner content to its original width. */
-.bowire-docs-section {
-    padding: 56px 0;
-}
-.bowire-docs-section-alt {
-    background: rgba(var(--bowire-accent-rgb, 99, 102, 241), 0.04);
-    margin-left: calc(50% - 50vw);
-    margin-right: calc(50% - 50vw);
-    padding-left: calc(50vw - 50%);
-    padding-right: calc(50vw - 50%);
-}
-:root[data-theme="dark"] .bowire-docs-section-alt,
-:root[data-bs-theme="dark"] .bowire-docs-section-alt {
-    background: rgba(var(--bowire-accent-rgb, 99, 102, 241), 0.07);
-}
-/* Match the marketing-site h2 weight so the docs landing page reads as
-   part of the same visual system as features.html / community.html. */
-.bowire-docs-section h2 {
-    font-size: clamp(1.5rem, 3vw, 2rem);
-    font-weight: 800;
-    letter-spacing: -0.02em;
-    margin: 0 0 18px;
-    background: linear-gradient(135deg, var(--bs-emphasis-color) 0%, var(--bowire-accent-hover) 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    border: none;
-    padding: 0;
-}
-
-.bowire-docs-hero-cta {
-    display: flex;
-    gap: 12px;
-    flex-wrap: wrap;
-}
-.bowire-cta-primary,
-.bowire-cta-secondary {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    padding: 10px 20px;
-    border-radius: 8px;
-    font-size: 0.875rem;
-    font-weight: 600;
-    text-decoration: none;
-    transition: all 0.15s;
-}
-.bowire-cta-primary {
-    background: var(--bowire-accent);
-    color: #fff;
-    border: 1px solid var(--bowire-accent);
-}
-.bowire-cta-primary:hover {
-    background: var(--bowire-accent-hover);
-    border-color: var(--bowire-accent-hover);
-    color: #fff;
-    text-decoration: none;
-    transform: translateY(-1px);
-    box-shadow: 0 4px 12px rgba(var(--bowire-accent-rgb), 0.3);
-}
-.bowire-cta-secondary {
-    background: transparent;
-    color: var(--bs-body-color);
-    border: 1px solid var(--bs-border-color);
-}
-.bowire-cta-secondary:hover {
-    border-color: var(--bowire-accent);
-    color: var(--bowire-accent);
-    text-decoration: none;
-    transform: translateY(-1px);
-}
-
-/* Unify the code-snippet copy button with the marketing site.
-   DocFX injects <a><i class="bi bi-clipboard"></i></a> (Bootstrap Icons
-   font). The site uses inline Lucide-style SVGs (two overlapping
-   rectangles for copy, a checkmark for "copied"). Replace the
-   BI-font glyph with a CSS mask pointing at the same Lucide SVG so
-   docs and site show the identical icon. */
-.bi-clipboard::before,
-.bi-check::before {
-    content: '';
-    display: inline-block;
-    width: 1em;
-    height: 1em;
-    background-color: currentColor;
-    -webkit-mask-size: contain;
-    mask-size: contain;
-    -webkit-mask-repeat: no-repeat;
-    mask-repeat: no-repeat;
-    -webkit-mask-position: center;
-    mask-position: center;
-    vertical-align: -0.125em;
-}
-.bi-clipboard::before {
-    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg 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'><rect x='9' y='9' width='13' height='13' rx='2'/><path d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/></svg>");
-            mask-image: url("data:image/svg+xml;utf8,<svg 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'><rect x='9' y='9' width='13' height='13' rx='2'/><path d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/></svg>");
-}
-.bi-check::before {
-    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
-            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
-}
-
-/* ------------------------------------------------------------------
-   View-transition theme toggle (mirrors site/assets/css/style.css)
-   ------------------------------------------------------------------
-   Chromium's View Transitions API captures before/after DOM snapshots;
-   we animate the incoming one as an expanding clip-path circle from
-   the theme button's centre, same pattern as deepwiki.com. Non-
-   supporting browsers (Firefox as of mid-2026) fall through to an
-   instant swap because the inline script never starts a transition.
--------------------------------------------------------------------*/
-::view-transition-old(root),
-::view-transition-new(root) {
-    animation: none;
-    mix-blend-mode: normal;
-}
-::view-transition-old(root) { z-index: 0; }
-::view-transition-new(root) {
-    z-index: 1;
-    /* 900 ms — matches site/assets/css/style.css so the switch feels
-       identical across surfaces. 550 ms looked "did anything happen?"
-       on wider monitors. */
-    animation: bowire-docs-theme-reveal 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
-}
-@keyframes bowire-docs-theme-reveal {
-    from { clip-path: circle(0% at var(--theme-transition-x, 50%) var(--theme-transition-y, 0%)); }
-    to   { clip-path: circle(150vmax at var(--theme-transition-x, 50%) var(--theme-transition-y, 0%)); }
-}
-@media (prefers-reduced-motion: reduce) {
-    ::view-transition-new(root) { animation: none; }
-}
-
-/* ==========================================================
-   Theme-aware images / videos / objects in docs pages.
-   Mirrors the Jekyll site's CSS so docs and marketing stay in
-   lockstep — the DocFX template flips data-theme on <html>
-   exactly the same way the marketing site does.
-   ========================================================== */
-:root[data-theme="dark"] .theme-img-light,
-:root[data-theme="dark"] .theme-video-light {
-    display: none !important;
-}
-:root[data-theme="light"] .theme-img-dark,
-:root[data-theme="light"] .theme-video-dark {
-    display: none !important;
-}
-@media (prefers-color-scheme: dark) {
-    :root[data-theme="auto"] .theme-img-light,
-    :root[data-theme="auto"] .theme-video-light,
-    :root:not([data-theme]) .theme-img-light,
-    :root:not([data-theme]) .theme-video-light {
-        display: none !important;
-    }
-}
-@media (prefers-color-scheme: light) {
-    :root[data-theme="auto"] .theme-img-dark,
-    :root[data-theme="auto"] .theme-video-dark,
-    :root:not([data-theme]) .theme-img-dark,
-    :root:not([data-theme]) .theme-video-dark {
-        display: none !important;
-    }
-}
-
-/* Anatomy SVG — width fits the article column, fall-back to img on
-   prerender / object-blocked browsers. background:transparent lets
-   the SVG's own theme-coloured backdrop show through instead of the
-   browser-default white that <object> renders against. The lower
-   margin gives the click-map breathing room before the legend list
-   that follows in ui-guide/index.md. */
-.theme-img-dark, .theme-img-light,
-object.theme-img-dark, object.theme-img-light {
-    display: block;
-    max-width: 100%;
-    height: auto;
-    background: transparent;
-    margin: 0 auto 32px;
-}
-
-/* The UI anatomy <picture> uses prefers-color-scheme to pick the
-   right SVG natively. The two overrides below honour the explicit
-   theme toggle in the DocFX header — when the user picks "Dark" or
-   "Light" we swap the rendered image via `content: url(...)`, which
-   replaces an <img>'s source through CSS and is supported in every
-   evergreen browser. The article column already constrains width, so
-   the picture itself just needs the centring margin. */
-.ui-anatomy-picture {
-    display: block;
-    max-width: 100%;
-    margin: 0 auto 32px;
-}
-.ui-anatomy-img {
-    display: block;
-    width: 100%;
-    height: auto;
-    background: transparent;
-}
-:root[data-theme="dark"] .ui-anatomy-img {
-    content: url("../images/ui-anatomy-dark.svg");
-}
-:root[data-theme="light"] .ui-anatomy-img {
-    content: url("../images/ui-anatomy-light.svg");
-}
-
-/* ============================================================
-   Reading mode (#119) — strips persistent chrome and reflows the
-   content column. Same shape as the marketing site's reading
-   mode for visual + behavioural parity. Toggled via the Aa button
-   in the docs header or the R keyboard shortcut. Persisted to
-   localStorage as `bowire_reading_mode`.
-   ============================================================ */
-:root[data-reading-mode="1"] .bowire-docs-header,
-:root[data-reading-mode="1"] .bowire-docs-sidebar,
-:root[data-reading-mode="1"] .bowire-docs-toc,
-:root[data-reading-mode="1"] .bowire-docs-affix,
-:root[data-reading-mode="1"] .bowire-docs-footer,
-:root[data-reading-mode="1"] #breadcrumb,
-:root[data-reading-mode="1"] .toc-toggle {
-    display: none !important;
-}
-
-:root[data-reading-mode="1"] body::after {
-    content: "Reading mode — press R to exit";
-    position: fixed;
-    bottom: 16px;
-    right: 16px;
-    z-index: 50;
-    padding: 6px 12px;
-    font-family: var(--font-mono, ui-monospace, monospace);
-    font-size: 11px;
-    color: var(--text-tertiary, #8b8c9c);
-    background: var(--bg-elevated, #1a1a25);
-    border: 1px solid var(--border, #2a2a3a);
-    border-radius: 999px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
-    pointer-events: none;
-}
-
-:root[data-reading-mode="1"] .bowire-docs-main,
-:root[data-reading-mode="1"] .bowire-docs-content,
-:root[data-reading-mode="1"] article {
-    max-width: 72ch;
-    margin-left: auto;
-    margin-right: auto;
-    padding-top: 48px;
-    padding-bottom: 48px;
-}
-
-:root[data-reading-mode="1"] article {
-    font-size: 1.05rem;
-    line-height: 1.75;
-}
-
-:root[data-reading-mode="1"] article h1,
-:root[data-reading-mode="1"] article h2,
-:root[data-reading-mode="1"] article h3 {
-    line-height: 1.3;
-    margin-top: 1.6em;
-}
-
-.reading-mode-glyph {
-    font-weight: 600;
-    font-size: 12px;
-    letter-spacing: -0.02em;
-    line-height: 1;
-}
-
-:root[data-reading-mode="1"] #bowire-docs-reading-mode-toggle {
-    background: var(--accent-subtle, rgba(99, 102, 241, 0.15));
-    border-color: var(--accent, #6366f1);
-    color: var(--accent, #6366f1);
-}
-
-@media print {
-    .bowire-docs-header,
-    .bowire-docs-sidebar,
-    .bowire-docs-toc,
-    .bowire-docs-affix,
-    .bowire-docs-footer,
-    #breadcrumb,
-    .toc-toggle {
-        display: none !important;
-    }
-    .bowire-docs-main,
-    .bowire-docs-content,
-    article {
-        max-width: none;
-    }
-}
+/*
+ * Bowire docfx theme — visual parity with the Jekyll marketing site
+ * (../../site/). Single source of truth for the brand palette is
+ * src/Kuestenlogik.Bowire/wwwroot/bowire.css:9-25 — values must stay in sync.
+ *
+ * The template chain in docs/docfx.json is:
+ *   ["default", "modern", "templates/bowire"]
+ *
+ * Modern still ships docfx.min.css for Bootstrap 5 + the article-content
+ * styling. This file loads AFTER it (see _master.tmpl) and overrides:
+ *
+ *   1. Bootstrap variables (--bs-*) so the body bg, links, primary
+ *      colour and font stack switch to Bowire brand
+ *   2. The .bowire-docs-* classes from our own master template (header,
+ *      footer, content shell)
+ *   3. A handful of docfx-internal selectors (.toc, .affix, .contribution,
+ *      pre code, .navbar etc.) so the inherited Bootstrap shell looks
+ *      like the Bowire marketing site
+ *
+ * Theme switching is driven by the same `theme` localStorage key the
+ * marketing site writes — see _master.tmpl's inline head script.
+ */
+
+/* ============================================================
+   Bowire brand palette
+   ============================================================ */
+:root {
+    --bowire-accent: #6366f1;
+    --bowire-accent-hover: #818cf8;
+    --bowire-accent-rgb: 99, 102, 241;
+    --bowire-accent-light: #4f46e5;
+    --bowire-success: #10b981;
+    --bowire-warning: #fbbf24;
+    --bowire-danger: #ef4444;
+}
+
+/* ============================================================
+   Bootstrap 5 variable overrides — dark
+   ============================================================ */
+:root[data-bs-theme="dark"] {
+    --bs-body-bg: #0f0f17;
+    --bs-body-color: #e8e8f0;
+    --bs-secondary-bg: #161621;
+    --bs-tertiary-bg: #1a1a2e;
+    --bs-secondary-bg-rgb: 22, 22, 33;
+    --bs-tertiary-bg-rgb: 26, 26, 46;
+
+    --bs-border-color: #2a2a3d;
+    --bs-border-color-translucent: rgba(232, 232, 240, 0.1);
+
+    --bs-primary: var(--bowire-accent);
+    --bs-primary-rgb: var(--bowire-accent-rgb);
+    --bs-link-color: var(--bowire-accent);
+    --bs-link-color-rgb: var(--bowire-accent-rgb);
+    --bs-link-hover-color: var(--bowire-accent-hover);
+    --bs-link-hover-color-rgb: 129, 140, 248;
+
+    --bs-code-color: var(--bowire-accent-hover);
+
+    --bs-emphasis-color: #e8e8f0;
+    --bs-emphasis-color-rgb: 232, 232, 240;
+    --bs-secondary-color: #9898b0;
+    --bs-tertiary-color: #6a6a82;
+    --bs-heading-color: #e8e8f0;
+
+    --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    --bs-font-monospace: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
+}
+
+/* ============================================================
+   Bootstrap 5 variable overrides — light
+   ============================================================ */
+:root[data-bs-theme="light"] {
+    --bs-body-bg: #fafaff;
+    --bs-body-color: #1a1a2e;
+    --bs-secondary-bg: #f4f4fa;
+    --bs-tertiary-bg: #eeeef0;
+    --bs-secondary-bg-rgb: 244, 244, 250;
+    --bs-tertiary-bg-rgb: 238, 238, 240;
+
+    --bs-border-color: #e1e1ee;
+    --bs-border-color-translucent: rgba(26, 26, 46, 0.1);
+
+    --bs-primary: var(--bowire-accent-light);
+    --bs-primary-rgb: 79, 70, 229;
+    --bs-link-color: var(--bowire-accent-light);
+    --bs-link-color-rgb: 79, 70, 229;
+    --bs-link-hover-color: var(--bowire-accent);
+
+    --bs-code-color: var(--bowire-accent-light);
+
+    --bs-emphasis-color: #0a0a1a;
+    --bs-secondary-color: #5a5a72;
+    --bs-tertiary-color: #8a8aa0;
+    --bs-heading-color: #1a1a2e;
+
+    --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    --bs-font-monospace: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
+}
+
+/* Smooth font rendering on both themes */
+body.bowire-docs {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    margin: 0;
+    /* Reserve room for the fixed header */
+    padding-top: 64px;
+}
+
+/* ============================================================
+   Bowire header — fixed top bar mirroring the marketing site
+   ============================================================ */
+/* Using body.bowire-docs prefix to beat docfx.min.css's default
+   `header { position: sticky; display: flex; ... }` rule that otherwise
+   wins on equal-specificity and leaves our header non-fixed at y=64. */
+body.bowire-docs .bowire-docs-header {
+    /* Mirror site/_includes/header.html behaviour exactly: header is
+       transparent on page-top and turns into a translucent solid bar
+       after the first 20px of scroll. */
+    position: fixed !important;
+    top: 0 !important;
+    left: 0;
+    right: 0;
+    width: 100%;
+    z-index: 1030;
+    height: 64px;
+    display: block;
+    background: transparent;
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+    border-bottom: 1px solid transparent;
+    transition: background 0.3s, border-color 0.3s, backdrop-filter 0.3s, -webkit-backdrop-filter 0.3s;
+    font-family: var(--bs-body-font-family);
+}
+body.bowire-docs .bowire-docs-header.scrolled {
+    background: rgba(15, 15, 23, 0.9) !important;
+    backdrop-filter: blur(12px) !important;
+    -webkit-backdrop-filter: blur(12px) !important;
+    border-bottom-color: var(--bs-border-color) !important;
+}
+:root[data-bs-theme="light"] body.bowire-docs .bowire-docs-header.scrolled {
+    background: rgba(250, 250, 255, 0.9) !important;
+}
+
+.bowire-docs-header-inner {
+    /* Mirror site/_includes/header.html's three-zone grid exactly:
+       logo left, nav centred, actions right. 1fr-auto-1fr keeps the
+       nav horizontally centred even when logo and actions differ in
+       width — matching the marketing header pixel-for-pixel avoids a
+       layout jump on site ↔ docs transitions. */
+    max-width: 1120px;
+    margin: 0 auto;
+    padding: 0 24px;
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    align-items: center;
+    gap: 24px;
+    height: 100%;
+}
+.bowire-docs-header-actions {
+    justify-self: end;
+}
+
+.bowire-docs-logo {
+    /* Mirror site .logo — inline-flex + justify-self:start so the
+       click area hugs the mark + wordmark instead of stretching to
+       fill the 1fr grid column the header layout puts it in. */
+    display: inline-flex;
+    justify-self: start;
+    align-items: center;
+    gap: 8px;
+    font-weight: 700;
+    font-size: 1.125rem;
+    color: var(--bs-emphasis-color);
+    text-decoration: none;
+    transition: color 0.15s;
+}
+.bowire-docs-logo:hover {
+    color: var(--bowire-accent);
+}
+.bowire-docs-logo-mark {
+    /* Tile logo (1:1) — same 28px sizing as site/_includes/header.html.
+       Color follows currentColor so it flips with theme via the parent
+       link's color (var(--bs-emphasis-color)). */
+    width: 28px;
+    height: 28px;
+    display: block;
+    color: inherit;
+    flex-shrink: 0;
+}
+/* Hover lifts the brand mark to accent colour while the wordmark
+   next to it stays on its link colour. */
+.bowire-docs-logo:hover .bowire-docs-logo-mark {
+    color: var(--bowire-accent);
+}
+
+.bowire-docs-nav {
+    display: flex;
+    align-items: center;
+    gap: 28px;
+    /* Mirror the marketing site's 3px baseline nudge so smaller nav
+       text aligns with the bigger wordmark next to the logo. */
+    margin-top: 3px;
+}
+.bowire-docs-nav a {
+    color: var(--bs-secondary-color);
+    font-size: 0.875rem;
+    font-weight: 500;
+    text-decoration: none;
+    transition: color 0.15s;
+}
+.bowire-docs-nav a:hover {
+    color: var(--bowire-accent);
+}
+/* Active section (current page) — distinct from hover so the user can
+   tell "I am here" vs "I can go here". Lifts to emphasis colour +
+   semibold while hover stays on accent. */
+.bowire-docs-nav a.is-active {
+    color: var(--bs-emphasis-color);
+    font-weight: 600;
+}
+
+.bowire-docs-header-actions {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+/* Search form in the header — replaces the modern template's navbar
+   search. docfx.min.js looks up #search and #search-query by id. */
+/* ============================================================
+   Pagefind search overlay — shared with the Jekyll marketing site.
+   Trigger button sits in the header actions next to home / theme /
+   github and opens a centred overlay with the PagefindUI widget.
+   ============================================================ */
+.bowire-search-trigger {
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    background: transparent;
+    border: none;
+    color: var(--bs-secondary-color);
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    transition: color 0.15s, opacity 0.15s;
+}
+.bowire-search-trigger:hover {
+    color: var(--bowire-accent);
+}
+.bowire-search-trigger:focus-visible {
+    outline: 2px solid var(--bowire-accent);
+    outline-offset: 2px;
+    border-radius: 4px;
+}
+/* Disabled state when the Pagefind index isn't available — typically
+   hit during local-only docfx serve runs where the post-build pagefind
+   step hasn't run. Greyed out + non-interactive so clicks don't fire
+   into uninitialised PagefindUI and surface uncaught exceptions. */
+.bowire-search-trigger[disabled] {
+    opacity: 0.35;
+    cursor: not-allowed;
+    pointer-events: none;
+}
+
+.bowire-search-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 2000;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    padding-top: min(12vh, 120px);
+    background: rgba(15, 15, 23, 0.55);
+    backdrop-filter: blur(6px);
+    -webkit-backdrop-filter: blur(6px);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.15s ease;
+}
+:root[data-bs-theme="light"] .bowire-search-overlay {
+    background: rgba(200, 200, 220, 0.55);
+}
+.bowire-search-overlay.is-open {
+    opacity: 1;
+    pointer-events: auto;
+}
+.bowire-search-overlay-panel {
+    width: min(680px, calc(100% - 48px));
+    max-height: 80vh;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    background: var(--bs-secondary-bg);
+    border: 1px solid var(--bs-border-color);
+    border-radius: 12px;
+    padding: 0;
+    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
+    transform: translateY(-8px);
+    transition: transform 0.2s ease;
+}
+.bowire-search-overlay #search {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-height: 0;
+}
+.bowire-search-overlay .pagefind-ui {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-height: 0;
+}
+.bowire-search-overlay .pagefind-ui__form {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-height: 0;
+    padding: 20px;
+    /* Form is the "header zone" — same tertiary bg as the footer hint
+       band so the input + result-count read as one capsule, with the
+       results drawer below it visually distinct (secondary bg). */
+    background: var(--bs-tertiary-bg);
+}
+.bowire-search-overlay .pagefind-ui__search-input {
+    flex: 0 0 auto;
+}
+.bowire-search-overlay .pagefind-ui__drawer {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    margin: 16px -20px -20px;
+    padding: 16px 20px 20px;
+    background: var(--bs-secondary-bg);
+    border-top: 1px solid var(--bs-border-color);
+    scrollbar-width: thin;
+    scrollbar-color: var(--bs-border-color) transparent;
+}
+.bowire-search-overlay .pagefind-ui__drawer::-webkit-scrollbar { width: 10px; }
+.bowire-search-overlay .pagefind-ui__drawer::-webkit-scrollbar-track { background: transparent; }
+.bowire-search-overlay .pagefind-ui__drawer::-webkit-scrollbar-thumb {
+    background: var(--bs-border-color);
+    border-radius: 8px;
+    border: 2px solid transparent;
+    background-clip: padding-box;
+}
+.bowire-search-overlay.is-open .bowire-search-overlay-panel {
+    transform: translateY(0);
+}
+
+/* Theme the PagefindUI widget to the Bowire brand palette. Bind to
+   data-bs-theme so dark/light mode switch picks up synchronously with
+   the rest of the docs. Attribute selectors (0,2,0) beat Pagefind's
+   default :root declaration (0,1,0). */
+html[data-bs-theme="dark"],
+html[data-bs-theme="light"] {
+    --pagefind-ui-scale: 1;
+    --pagefind-ui-primary: var(--bowire-accent);
+    --pagefind-ui-text: var(--bs-emphasis-color);
+    --pagefind-ui-background: var(--bs-secondary-bg);
+    --pagefind-ui-border: var(--bs-border-color);
+    --pagefind-ui-tag: var(--bs-tertiary-bg);
+    --pagefind-ui-border-width: 1px;
+    --pagefind-ui-border-radius: 10px;
+    --pagefind-ui-image-border-radius: 6px;
+    --pagefind-ui-image-box-ratio: 3 / 2;
+    --pagefind-ui-font: inherit;
+}
+
+.pagefind-ui {
+    padding-top: 0 !important;
+}
+.pagefind-ui__drawer {
+    gap: 24px !important;
+}
+.pagefind-ui__results-area {
+    margin-top: 8px !important;
+}
+/* Result count — relocated by JS from inside the drawer to between
+   the search input and the drawer (still inside the form so it
+   inherits the tertiary "header" bg). Smaller font than the previous
+   in-drawer placement so it reads as a sub-line of the input area
+   rather than a result row. */
+.pagefind-ui__message {
+    color: var(--bs-secondary-color) !important;
+    font-size: 0.75rem !important;
+    font-weight: 500 !important;
+    padding: 8px 0 0 !important;
+    margin: 0 !important;
+    height: auto !important;
+}
+.pagefind-ui__result {
+    padding: 18px 0 20px !important;
+    border-top: 1px solid var(--bs-border-color) !important;
+    cursor: pointer;
+}
+/* The drawer already carries a border-top above the first result —
+   skip the per-result rule for the first item to avoid the
+   double-line stack. */
+.pagefind-ui__result:first-child {
+    border-top: none !important;
+    padding-top: 0 !important;
+}
+.pagefind-ui__result-title {
+    font-size: 1.0625rem !important;
+    font-weight: 600 !important;
+    line-height: 1.35 !important;
+    margin-bottom: 4px !important;
+}
+.pagefind-ui__result-excerpt {
+    font-size: 0.9375rem !important;
+    color: var(--bs-secondary-color) !important;
+    line-height: 1.55 !important;
+}
+.pagefind-ui__result-tags {
+    margin-top: 10px !important;
+}
+.pagefind-ui__result-tag {
+    font-size: 0.75rem !important;
+    padding: 3px 8px !important;
+    color: var(--bs-secondary-color) !important;
+}
+
+/* Pagefind-UI-specific selector overrides where --pagefind-ui-* doesn't
+   reach (focus ring, link hover, mark highlight). */
+.pagefind-ui__search-input {
+    color: var(--bs-emphasis-color) !important;
+    font-weight: 500 !important;
+    font-size: 0.9375rem !important;
+    padding: 0 52px 0 44px !important;
+    height: 52px !important;
+    display: inline-flex !important;
+    align-items: center !important;
+    line-height: 1 !important;
+}
+.pagefind-ui__form::before {
+    top: 38px !important;
+    left: 34px !important;
+    width: 16px !important;
+    height: 16px !important;
+}
+.pagefind-ui__search-input::placeholder {
+    color: var(--bs-secondary-color) !important;
+    opacity: 0.6 !important;
+    font-weight: 400 !important;
+}
+.pagefind-ui__search-input:focus-visible {
+    outline: none !important;
+    border-color: var(--bowire-accent) !important;
+    box-shadow: 0 0 0 3px rgba(var(--bowire-accent-rgb), 0.15) !important;
+}
+/* Theme the overlay panel's scrollbar so dark mode doesn't paint a
+   bright browser-default track on top of the panel. */
+.bowire-search-overlay-panel {
+    scrollbar-width: thin;
+    scrollbar-color: var(--bs-border-color) transparent;
+}
+.bowire-search-overlay-panel::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+}
+.bowire-search-overlay-panel::-webkit-scrollbar-track {
+    background: transparent;
+}
+.bowire-search-overlay-panel::-webkit-scrollbar-thumb {
+    background: var(--bs-border-color);
+    border-radius: 8px;
+    border: 2px solid transparent;
+    background-clip: padding-box;
+}
+.bowire-search-overlay-panel::-webkit-scrollbar-thumb:hover {
+    background: var(--bs-secondary-color);
+    background-clip: padding-box;
+}
+.pagefind-ui__result-link {
+    color: var(--bs-emphasis-color) !important;
+}
+.pagefind-ui__result-link:hover {
+    color: var(--bowire-accent) !important;
+}
+.pagefind-ui mark {
+    color: var(--bowire-accent);
+    background: rgba(var(--bowire-accent-rgb), 0.14);
+    padding: 0 2px;
+    border-radius: 3px;
+}
+
+/* Arrow-key / hover highlight on the currently selected result.
+   Background tint + accent text colour only — no left-stripe, since
+   it would curve with the border-radius and read as comma-shaped. */
+.pagefind-ui__result.is-highlighted {
+    background: rgba(var(--bowire-accent-rgb), 0.08);
+    border-radius: 8px;
+    padding-left: 12px !important;
+    padding-right: 12px !important;
+    margin-left: -12px;
+    margin-right: -12px;
+}
+.pagefind-ui__result.is-highlighted .pagefind-ui__result-link {
+    color: var(--bowire-accent) !important;
+}
+
+.bowire-search-hint {
+    flex: 0 0 auto;
+    padding: 14px 20px;
+    border-top: 1px solid var(--bs-border-color);
+    background: var(--bs-tertiary-bg);
+    color: var(--bs-secondary-color);
+    font-size: 0.75rem;
+    text-align: center;
+}
+.bowire-search-hint kbd {
+    display: inline-block;
+    min-width: 20px;
+    padding: 1px 5px;
+    margin: 0 2px;
+    background: var(--bs-tertiary-bg);
+    border: 1px solid var(--bs-border-color);
+    border-bottom-width: 2px;
+    border-radius: 4px;
+    font-family: var(--bs-body-font-family);
+    font-size: 0.6875rem;
+    color: var(--bs-emphasis-color);
+    line-height: 1.4;
+}
+
+/* DocFX injects an anchorjs "#" link beside every heading that pops in
+   on hover. The id is already on the <h*> element itself, so the extra
+   glyph is visual noise — hide it everywhere. Direct deep-links via URL
+   fragment still work. */
+.anchorjs-link {
+    display: none !important;
+}
+
+/* Form layout is set on .bowire-search-overlay .pagefind-ui__form
+   above — nothing more needed here. */
+
+/* Overlay is a Suggest popup, capped at 5 results — no Load-More here. */
+.bowire-search-overlay .pagefind-ui__button {
+    display: none !important;
+}
+
+/* "Load more results" — secondary button style matching the Bowire
+   docs buttons (neutral background, accent on hover). */
+.pagefind-ui__button {
+    background: var(--bs-tertiary-bg) !important;
+    color: var(--bs-emphasis-color) !important;
+    border: 1px solid var(--bs-border-color) !important;
+    border-radius: 8px !important;
+    font-weight: 600 !important;
+    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s !important;
+    cursor: pointer !important;
+}
+.pagefind-ui__button:hover {
+    background: var(--bs-secondary-bg) !important;
+    border-color: var(--bowire-accent) !important;
+    color: var(--bowire-accent) !important;
+    transform: translateY(-1px);
+}
+.pagefind-ui__button:focus-visible {
+    outline: 2px solid var(--bowire-accent) !important;
+    outline-offset: 2px;
+}
+
+/* Clear-query button — circular 28×28 × icon button. Mirrors the
+   marketing site's styling exactly so site and docs share the same
+   affordance in the search popout. */
+.pagefind-ui__search-clear {
+    position: absolute !important;
+    width: 28px !important;
+    height: 28px !important;
+    padding: 0 !important;
+    /* 20 px form padding-top + (52 px input - 28 px button) / 2 = 32 px */
+    top: 32px !important;
+    /* Inside the input's right edge — 28 px from form-right leaves an
+       8-px gap between button and input border. */
+    right: 28px !important;
+    transform: none !important;
+    /* Rounded square to match the input's 10 px radius + the rest of
+       the button system. */
+    border-radius: 8px !important;
+    background: var(--bs-border-color) !important;
+    color: transparent !important;
+    border: none !important;
+    font-size: 0 !important;
+    line-height: 0 !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    cursor: pointer !important;
+    transition: background 0.15s, color 0.15s, transform 0.15s;
+}
+.pagefind-ui__search-clear::before {
+    content: "";
+    display: block;
+    width: 10px;
+    height: 10px;
+    background-color: var(--bs-emphasis-color);
+    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path stroke='black' stroke-width='1.6' stroke-linecap='round' d='M1 1l8 8M9 1l-8 8'/></svg>");
+    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path stroke='black' stroke-width='1.6' stroke-linecap='round' d='M1 1l8 8M9 1l-8 8'/></svg>");
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+    transition: background-color 0.15s;
+}
+.pagefind-ui__search-clear:hover {
+    background: var(--bowire-accent) !important;
+    transform: scale(1.05) !important;
+}
+.pagefind-ui__search-clear:hover::before {
+    background-color: #fff;
+}
+.pagefind-ui__search-clear:focus-visible {
+    outline: 2px solid var(--bowire-accent) !important;
+    outline-offset: 2px;
+}
+.bowire-docs-nav-home,
+.bowire-docs-nav-github {
+    display: inline-flex;
+    align-items: center;
+    color: var(--bs-secondary-color);
+    text-decoration: none;
+    transition: color 0.2s;
+}
+.bowire-docs-nav-home:hover,
+.bowire-docs-nav-github:hover {
+    color: var(--bowire-accent);
+}
+.bowire-docs-theme-toggle {
+    /* Match site `.theme-toggle` exactly: 32×32 hitbox, 16×16 icon
+       centred inside. Without this the button was only as big as its
+       svg child (16×16), making the header action row visually shorter
+       than the marketing site's. */
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    background: transparent;
+    border: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--bs-secondary-color);
+    cursor: pointer;
+    transition: color 0.2s;
+}
+.bowire-docs-theme-toggle svg {
+    width: 16px;
+    height: 16px;
+}
+.bowire-docs-theme-toggle:hover,
+.bowire-docs-theme-toggle:focus {
+    color: var(--bowire-accent);
+    outline: none;
+}
+.bowire-docs-theme-toggle:focus-visible {
+    outline: 2px solid var(--bowire-accent);
+    outline-offset: 2px;
+    border-radius: 4px;
+}
+
+/* ============================================================
+   Main content shell — same Bootstrap container as modern, but
+   we make sure it doesn't slide under the fixed header and we
+   tighten the max-width so it visually matches the marketing
+   site's 1120px column.
+   ============================================================ */
+main.bowire-docs-main-shell {
+    /* Match site/assets/css/style.css `.container` exactly:
+       max-width 1120px + 24px horizontal padding. Bootstrap's
+       container-xxl defaults to 1320px with 12px padding, which
+       made the docs content column visibly wider than the marketing
+       site's hero/cards. Force identical outer box + padding here
+       so the jump site ↔ docs feels seamless. */
+    max-width: 1120px;
+    padding-left: 24px;
+    padding-right: 24px;
+    padding-top: 24px;
+    /* Neutralise Bootstrap's gutter system inside the docs shell.
+       `.container-xxl` and Bootstrap's row/col classes pull
+       --bs-gutter-x (default 1.5rem) into both negative row margins
+       and column padding — that's where the stray 12px on the right
+       of the affix sidebar comes from, leaving the "In this article"
+       column ending visibly inside the header's GitHub icon column.
+       Setting the gutter to 0 here keeps every nested .row + .col
+       flush with main's own 24px padding edge, so the affix lines up
+       with the header's right edge pixel-for-pixel. */
+    --bs-gutter-x: 0;
+}
+
+
+/* === Right rail (article tools + section-nav) ====================
+   Two stacked pills on the right edge of the viewport:
+     • .docs-rail-tools — top pill, hosts per-article tool buttons
+       (currently just the "On this page" outline toggle; future tools
+       — share, copy-link, edit, mark-read — would land alongside).
+     • .docs-section-nav — bottom pill, scrollspy dots built at
+       runtime from article h2 elements (one per section).
+   Both pills share visual treatment (translucent + blur, pill shape,
+   thin border) so the rail reads as a coherent vertical band; the
+   parent .docs-rail keeps them centred and stacks them with a small
+   gap so each can scale independently. Hidden on mobile (< 768 px).
+   ============================================================ */
+.docs-rail {
+    position: fixed;
+    right: 18px;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 1015;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 12px;
+    pointer-events: none;  /* gaps between pills don't block clicks */
+}
+/* Explicit because `display: flex` above overrides the user-agent
+   default `[hidden] { display: none }` and the rail-hide JS uses
+   the [hidden] attribute. */
+.docs-rail[hidden] { display: none; }
+.docs-rail > * {
+    pointer-events: auto;
+}
+
+/* Tools pill — small per-article-action surface. Style matches the
+   section-nav pill so the two read as siblings. */
+.docs-rail-tools {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding: 6px;
+    background: rgba(15, 15, 23, 0.55);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border-radius: 999px;
+    border: 1px solid var(--bs-border-color);
+}
+:root[data-bs-theme="light"] .docs-rail-tools {
+    background: rgba(250, 250, 255, 0.7);
+}
+.docs-rail-tool {
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: transparent;
+    color: var(--bs-secondary-color);
+    cursor: pointer;
+    border-radius: 50%;
+    padding: 0;
+    transition: color 0.15s, background 0.15s;
+}
+.docs-rail-tool:hover,
+.docs-rail-tool:focus-visible {
+    color: var(--bs-link-color);
+    outline: none;
+}
+.docs-rail-tool[aria-expanded="true"] {
+    color: var(--bs-link-color);
+}
+.docs-rail-tool svg { display: block; }
+/* Explicit because `display: flex` on the parent + `display: inline-
+   flex` here override the user-agent default `[hidden]{display:none}`,
+   so the JS that hides empty triggers needs a CSS hand. */
+.docs-rail-tools[hidden],
+.docs-rail-tool[hidden] {
+    display: none;
+}
+
+/* Section-nav pill — sits inside the rail, no longer fixed-positioned
+   itself (the parent .docs-rail handles viewport anchoring). */
+.docs-section-nav {
+    position: static;
+    transform: none;
+    right: auto;
+    top: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    padding: 8px 6px;
+    background: rgba(15, 15, 23, 0.55);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border-radius: 999px;
+    border: 1px solid var(--bs-border-color);
+}
+:root[data-bs-theme="light"] .docs-section-nav {
+    background: rgba(250, 250, 255, 0.7);
+}
+.docs-section-nav[hidden] { display: none; }
+
+.docs-section-nav-dot {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    cursor: pointer;
+    background: transparent;
+    border: none;
+    padding: 0;
+    text-decoration: none;
+    color: inherit;
+}
+.docs-section-nav-dot::before {
+    content: '';
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--bs-secondary-color);
+    opacity: 0.4;
+    transition: opacity 0.15s, transform 0.15s, background 0.15s;
+}
+.docs-section-nav-dot:hover::before,
+.docs-section-nav-dot:focus-visible::before {
+    opacity: 0.85;
+    transform: scale(1.25);
+}
+.docs-section-nav-dot.is-active::before {
+    background: var(--bs-link-color);
+    opacity: 1;
+    transform: scale(1.35);
+}
+.docs-section-nav-dot:focus-visible {
+    outline: 2px solid var(--bs-link-color);
+    outline-offset: 2px;
+}
+
+/* Tooltip-style label to the left of each dot — only visible on
+   hover/focus so the pill stays minimal at rest. */
+.docs-section-nav-dot-label {
+    position: absolute;
+    right: calc(100% + 8px);
+    top: 50%;
+    transform: translateY(-50%) translateX(4px);
+    white-space: nowrap;
+    padding: 4px 10px;
+    background: var(--bs-body-bg);
+    border: 1px solid var(--bs-border-color);
+    border-radius: 6px;
+    font-size: 0.8125rem;
+    color: var(--bs-body-color);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.15s, transform 0.15s;
+    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
+}
+.docs-section-nav-dot:hover .docs-section-nav-dot-label,
+.docs-section-nav-dot:focus-visible .docs-section-nav-dot-label {
+    opacity: 1;
+    transform: translateY(-50%) translateX(0);
+}
+
+/* Gap marker — inserted between two non-adjacent picked dots when the
+   article has more headings than the pill can show (sampled mode).
+   Two stacked micro-dots in the same dot-language as the surrounding
+   pill so the strip reads as "… some entries hidden here", without
+   adding clickable noise. Use the Sections / Outline overlay to find
+   the skipped headings. */
+.docs-section-nav-gap {
+    width: 24px;
+    height: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 2px;
+    pointer-events: none;
+}
+.docs-section-nav-gap::before,
+.docs-section-nav-gap::after {
+    content: '';
+    width: 2px;
+    height: 2px;
+    border-radius: 50%;
+    background: var(--bs-secondary-color);
+    opacity: 0.35;
+}
+
+@media (max-width: 768px) {
+    .docs-rail { display: none; }
+}
+
+/* === "On this page" outline overlay ==============================
+   Modal popup analog to the Pagefind .bowire-search-overlay —
+   centred panel with translucent backdrop, opened from the right-
+   rail tool button. Same backdrop colour, same panel chrome, same
+   slide-in animation so the docs site has one cohesive overlay
+   idiom across search and outline. The overlay is purely transient:
+   no localStorage, opens fresh, dismisses on backdrop / Esc / link
+   click inside the list. ====================================== */
+.bowire-docs-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 1100;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    padding-top: min(12vh, 120px);
+    background: rgba(15, 15, 23, 0.55);
+    backdrop-filter: blur(6px);
+    -webkit-backdrop-filter: blur(6px);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.15s ease;
+}
+:root[data-bs-theme="light"] .bowire-docs-overlay {
+    background: rgba(200, 200, 220, 0.55);
+}
+.bowire-docs-overlay.is-open {
+    opacity: 1;
+    pointer-events: auto;
+}
+.bowire-docs-overlay-panel {
+    width: min(560px, calc(100% - 48px));
+    max-height: 80vh;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    background: var(--bs-secondary-bg);
+    border: 1px solid var(--bs-border-color);
+    border-radius: 12px;
+    padding: 0;
+    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
+    transform: translateY(-8px);
+    transition: transform 0.2s ease;
+}
+.bowire-docs-overlay.is-open .bowire-docs-overlay-panel {
+    transform: translateY(0);
+}
+.bowire-docs-overlay-title {
+    flex-shrink: 0;
+    font-size: 0.85em;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--bs-secondary-color);
+    margin: 0;
+    font-weight: 600;
+    padding: 16px 20px;
+    /* Header capsule — same tertiary bg as the search overlay's input
+       zone, with a 1 px separator below before the link list (which
+       sits on the lighter secondary bg). Reads as a clear "title +
+       content + footer" three-band layout. */
+    background: var(--bs-tertiary-bg);
+    border-bottom: 1px solid var(--bs-border-color);
+}
+.bowire-docs-overlay nav#affix {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+    background: var(--bs-secondary-bg);
+    scrollbar-width: thin;
+    scrollbar-color: var(--bs-border-color) transparent;
+    margin: 0;
+    padding: 16px 20px;
+}
+.bowire-docs-overlay nav#affix::-webkit-scrollbar { width: 6px; }
+.bowire-docs-overlay nav#affix::-webkit-scrollbar-track { background: transparent; }
+.bowire-docs-overlay nav#affix::-webkit-scrollbar-thumb {
+    background: var(--bs-border-color);
+    border-radius: 3px;
+}
+/* DocFX injects its own h5 inside the nav — hide it; our static
+   .bowire-docs-overlay-title above already labels the panel. */
+.bowire-docs-overlay nav#affix > h5 {
+    display: none;
+}
+
+/* --- Tree styling for the article outline ---
+   DocFX's runtime renders a single flat <ul> with both h2 and h3
+   anchors as siblings; the depth distinction lives on the <a>:
+     • h2 → class `link-body-emphasis` (top level)
+     • h3 → class `link-secondary` (sub-level)
+   We translate that into a visible tree by indenting + adding a
+   thin tree-line on the secondary anchors. On pages that contain
+   ONLY secondaries (e.g. namespace pages where every entry is h3
+   "Classes" / "Enums" / "Interfaces"), the indent is dropped via
+   :has() so they read as their own top-level — otherwise every
+   item would float as an orphaned indent with no parent above. */
+.bowire-docs-overlay nav#affix ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+.bowire-docs-overlay nav#affix li {
+    margin: 0;
+    line-height: 1.45;
+}
+.bowire-docs-overlay nav#affix a {
+    color: var(--bs-body-color);
+    text-decoration: none !important;
+    font-size: 13.5px;
+    display: block;
+    padding: 4px 10px;
+    margin: 1px 0;
+    border-radius: 4px;
+    white-space: normal;
+    word-break: break-word;
+    transition: color 0.15s, background 0.15s;
+}
+.bowire-docs-overlay nav#affix a.link-secondary {
+    color: var(--bs-secondary-color);
+    margin-left: 14px;
+    padding-left: 12px;
+    border-left: 1px solid var(--bs-border-color);
+    border-radius: 0 4px 4px 0;
+}
+/* Pages with no top-level (h2) entries — every item is link-secondary.
+   Drop the indent so they don't read as orphan-children. */
+.bowire-docs-overlay nav#affix:not(:has(.link-body-emphasis)) a.link-secondary {
+    margin-left: 0;
+    padding-left: 10px;
+    border-left: none;
+}
+.bowire-docs-overlay nav#affix a:hover,
+.bowire-docs-overlay nav#affix a:focus-visible {
+    color: var(--bs-link-color);
+    background: var(--bs-tertiary-bg);
+    outline: none;
+}
+/* Active section — DocFX's runtime adds `.active` to the <li> as the
+   user scrolls; sometimes `.in` for ancestor lis containing the
+   active one. */
+.bowire-docs-overlay nav#affix li.active > a,
+.bowire-docs-overlay nav#affix li.in > a {
+    color: var(--bs-link-color);
+    font-weight: 600;
+    background: var(--bs-tertiary-bg);
+}
+/* Keyboard / hover cursor — mirrors the search overlay's
+   .pagefind-ui__result.is-highlighted treatment so the two overlays
+   share one selection idiom. ArrowUp/Down + Enter open the entry.
+   Background tint + accent text colour only (no left-stripe; with
+   border-radius the stripe curves and looks comma-shaped). */
+.bowire-docs-overlay nav#affix a.is-highlighted {
+    color: var(--bowire-accent) !important;
+    background: rgba(var(--bowire-accent-rgb), 0.08);
+}
+/* Inline <h6> group headers between groups of <li> — DocFX uses
+   these to label "Constructors", "Methods" etc. on type pages. */
+.bowire-docs-overlay nav#affix h6 {
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--bs-secondary-color);
+    margin: 14px 0 4px;
+    font-weight: 600;
+    padding: 0 10px;
+}
+.bowire-docs-overlay nav#affix h6:first-child {
+    margin-top: 0;
+}
+/* Footer hint band — same visual treatment as the search overlay's
+   .bowire-search-hint (tertiary bg, full-width centred, bordered
+   top, kbd pills with double-bottom-border). */
+.bowire-docs-overlay-hint {
+    flex: 0 0 auto;
+    padding: 14px 20px;
+    border-top: 1px solid var(--bs-border-color);
+    background: var(--bs-tertiary-bg);
+    color: var(--bs-secondary-color);
+    font-size: 0.75rem;
+    text-align: center;
+}
+.bowire-docs-overlay-hint kbd {
+    display: inline-block;
+    min-width: 20px;
+    padding: 1px 5px;
+    margin: 0 2px;
+    background: var(--bs-tertiary-bg);
+    border: 1px solid var(--bs-border-color);
+    border-bottom-width: 2px;
+    border-radius: 4px;
+    font-family: var(--bs-body-font-family);
+    font-size: 0.6875rem;
+    color: var(--bs-emphasis-color);
+    line-height: 1.4;
+}
+
+/* === end docs subbar + subpanels ================================= */
+
+/* Drop DocFX upstream's `margin: 0 3rem` on the article column —
+   without this the article visually indents 48 px each side relative
+   to the top header and subbar, breaking the left/right alignment of
+   the docs site's vertical line. Our 1120 px container already
+   supplies the only horizontal padding we want (24 px each side). */
+main.bowire-docs-main-shell > .content,
+body:not([data-search])[data-layout=conceptual] > main.bowire-docs-main-shell > .content {
+    margin: 0 !important;
+}
+
+/* Breadcrumb above the article. DocFX renders an <ol class="breadcrumb">
+   inside <nav id="breadcrumb"> at runtime from toc.json, using
+   Bootstrap's Breadcrumb component. We re-skin it to match the
+   docs-site palette: dim secondary text for crumbs, accent on hover,
+   chevron `›` separator instead of the BS default `/`. Active
+   (current) crumb gets emphasis colour without bold so it doesn't
+   compete with the article H1 below it. Hidden when DocFX produces
+   an empty list (single-item breadcrumbs are auto-hidden upstream). */
+main.bowire-docs-main-shell > .content > .actionbar {
+    margin: 4px 0 14px;
+}
+main.bowire-docs-main-shell > .content > .actionbar:has(.breadcrumb:empty),
+main.bowire-docs-main-shell > .content > .actionbar:not(:has(.breadcrumb-item)) {
+    display: none;
+}
+nav#breadcrumb .breadcrumb {
+    --bs-breadcrumb-divider: '\203A'; /* › */
+    --bs-breadcrumb-divider-color: var(--bs-secondary-color);
+    --bs-breadcrumb-item-padding-x: 8px;
+    --bs-breadcrumb-margin-bottom: 0;
+    --bs-breadcrumb-padding-y: 0;
+    --bs-breadcrumb-padding-x: 0;
+    --bs-breadcrumb-font-size: 0.8125rem;
+    --bs-breadcrumb-bg: transparent;
+    --bs-breadcrumb-item-active-color: var(--bs-emphasis-color);
+}
+nav#breadcrumb .breadcrumb-item a {
+    color: var(--bs-secondary-color);
+    text-decoration: none;
+    transition: color 0.15s;
+}
+nav#breadcrumb .breadcrumb-item a:hover,
+nav#breadcrumb .breadcrumb-item a:focus-visible {
+    color: var(--bowire-accent);
+    outline: none;
+}
+nav#breadcrumb .breadcrumb-item + .breadcrumb-item::before {
+    /* Chevron at slightly reduced opacity so the trail reads as
+       structure rather than punctuation. */
+    opacity: 0.55;
+}
+
+/* Upstream DocFX sets scroll-margin-top: 60 px on every article anchor
+   target, but our docs header is 64 px tall — close enough that hash
+   jumps from the dot-nav land the heading 4 px under the header.
+   Bump the offset to 80 px (header height + a buffer) so the anchor
+   scrolls into clean space below the sticky chrome. */
+@media (min-width: 768px) {
+    body.bowire-docs main.bowire-docs-main-shell > .content > article [id] {
+        scroll-margin-top: 80px;
+    }
+}
+
+/* Sections nav itself — mirror the Outline overlay's nav#affix
+   layout so the dialog has the same inset (16 / 20 px) on the
+   filter input + entries instead of being flush to the panel edge. */
+.bowire-sections-overlay nav#toc {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+    background: var(--bs-secondary-bg);
+    scrollbar-width: thin;
+    scrollbar-color: var(--bs-border-color) transparent;
+    margin: 0;
+    padding: 16px 20px;
+    display: flex;
+    flex-direction: column;
+}
+.bowire-sections-overlay nav#toc::-webkit-scrollbar { width: 6px; }
+.bowire-sections-overlay nav#toc::-webkit-scrollbar-track { background: transparent; }
+.bowire-sections-overlay nav#toc::-webkit-scrollbar-thumb {
+    background: var(--bs-border-color);
+    border-radius: 3px;
+}
+
+/* TOC links inside the Sections overlay — wrap long names, no
+   underline (DocFX adds one on hover by default), same hover/active
+   colour scheme as the Outline overlay so both modals share one
+   selection idiom. */
+.bowire-sections-overlay .toc .toc-link {
+    white-space: normal;
+    word-break: break-word;
+    text-decoration: none !important;
+    color: var(--bs-body-color);
+    display: block;
+    padding: 4px 10px;
+    margin: 1px 0;
+    border-radius: 4px;
+    transition: color 0.15s, background 0.15s;
+}
+.bowire-sections-overlay .toc .toc-link:hover,
+.bowire-sections-overlay .toc .toc-link:focus-visible {
+    color: var(--bs-link-color);
+    background: var(--bs-tertiary-bg);
+    outline: none;
+}
+.bowire-sections-overlay .toc .toc-link.is-highlighted {
+    color: var(--bowire-accent) !important;
+    background: rgba(var(--bowire-accent-rgb), 0.08);
+}
+/* Active page in the TOC — DocFX adds .active to the matching li. */
+.bowire-sections-overlay .toc li.active > .toc-link,
+.bowire-sections-overlay .toc li.in > .toc-link {
+    color: var(--bs-link-color);
+    font-weight: 600;
+    background: var(--bs-tertiary-bg);
+}
+/* Nested children in the TOC — indent under their parent + tree-line.
+   DocFX hides them by default and shows .expanded > ul. */
+.bowire-sections-overlay .toc li > ul {
+    margin-left: 12px;
+    padding-left: 12px;
+    border-left: 1px solid var(--bs-border-color);
+    margin-top: 2px;
+    margin-bottom: 4px;
+}
+
+/* Alternating H2-group backgrounds inside the article — wrapped by the
+   inline script in _master.tmpl, styled here. Same box-shadow +
+   clip-path full-bleed trick the marketing site uses for .features-group-alt. */
+.docs-article-group {
+    padding: 32px 0 24px;
+    position: relative;
+}
+/* Alternate-section full-bleed background. The `box-shadow: 0 0 0 100vmax`
+   trick would paint over the left TOC + the right article-TOC because
+   it projects outside the section box. Move the bleed onto a ::before
+   pseudo-element with z-index: -1 so it stays behind the content layer
+   and the surrounding sidebars keep their own stacking context. */
+.docs-article-group-alt {
+    position: relative;
+    background: transparent;
+    z-index: 0;
+}
+.docs-article-group-alt::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: var(--bs-secondary-bg);
+    box-shadow: 0 0 0 100vmax var(--bs-secondary-bg);
+    clip-path: inset(0 -100vmax);
+    z-index: -1;
+}
+/* Pull the toc list flush to the subpanel's left padding edge.
+   DocFX's defaults leave .toc li with padding-left: 0.85rem (room for
+   an expand-stub icon); we currently don't render expand-stubs, so the
+   indent reads as wasted left margin. */
+.bowire-sections-overlay .toc form.filter,
+.bowire-sections-overlay .toc ul,
+.bowire-sections-overlay .toc li {
+    padding-left: 0 !important;
+    margin-left: 0 !important;
+}
+.bowire-sections-overlay .toc form.filter > input {
+    padding-left: 1.5rem !important;
+}
+.bowire-sections-overlay .toc form.filter > i.bi {
+    left: 0.4rem !important;
+}
+.docs-article-group > h2:first-child {
+    margin-top: 0;
+}
+
+/* Article body typography */
+article {
+    font-family: var(--bs-body-font-family);
+    color: var(--bs-body-color);
+    line-height: 1.7;
+}
+article h1, article h2, article h3, article h4 {
+    font-family: var(--bs-body-font-family);
+    font-weight: 700;
+    letter-spacing: -0.02em;
+    color: var(--bs-heading-color);
+}
+article h1 {
+    font-weight: 800;
+    margin-bottom: 1rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 2px solid var(--bowire-accent);
+    display: inline-block;
+}
+article h2 {
+    margin-top: 2rem;
+}
+article a {
+    color: var(--bs-link-color);
+    text-decoration: none;
+}
+article a:hover {
+    color: var(--bs-link-hover-color);
+    text-decoration: underline;
+}
+
+/* Code styling */
+article code {
+    font-family: var(--bs-font-monospace);
+    font-size: 0.875em;
+    color: var(--bs-code-color);
+    background: var(--bs-tertiary-bg);
+    padding: 0.15em 0.4em;
+    border-radius: 4px;
+}
+article pre {
+    background: var(--bs-tertiary-bg);
+    border: 1px solid var(--bs-border-color);
+    border-radius: 8px;
+    padding: 16px;
+    font-family: var(--bs-font-monospace);
+    font-size: 0.875rem;
+    line-height: 1.6;
+    overflow-x: auto;
+}
+article pre code {
+    background: none;
+    padding: 0;
+    font-size: inherit;
+    color: var(--bs-body-color);
+    border: none;
+}
+
+/* Fenced-code block chrome — DocFX renders bare `<pre><code>` for every
+   triple-backtick block; the inline script at the bottom of the master
+   template wraps each one in a `.docs-code-block` element with a copy
+   button so the docs reach parity with the marketing site's
+   `.code-block` + `.copy-btn` affordance (style.css ~640). Idempotent
+   so re-renders / hot reloads don't double-wrap. */
+article .docs-code-block {
+    position: relative;
+    margin: 1rem 0;
+}
+article .docs-code-block pre {
+    margin: 0;
+}
+article .docs-code-copy {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    background: transparent;
+    border: 1px solid var(--bs-border-color);
+    color: var(--bs-secondary-color);
+    padding: 5px 7px;
+    border-radius: 6px;
+    cursor: pointer;
+    line-height: 0;
+    opacity: 0;
+    transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
+}
+article .docs-code-block:hover .docs-code-copy,
+article .docs-code-copy:focus-visible {
+    opacity: 1;
+}
+article .docs-code-copy:hover {
+    color: var(--bs-link-color);
+    border-color: var(--bs-link-color);
+    background: rgba(99, 102, 241, 0.08);
+}
+article .docs-code-copy.is-copied {
+    color: #16a34a;
+    border-color: #16a34a;
+    opacity: 1;
+}
+
+/* highlight.js — Bowire brand palette */
+.hljs {
+    background: var(--bs-tertiary-bg) !important;
+    color: var(--bs-body-color);
+}
+.hljs-comment, .hljs-quote, .hljs-deletion {
+    color: #6a6a82;
+    font-style: italic;
+}
+.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-doctag,
+.hljs-section, .hljs-name, .hljs-strong {
+    color: var(--bowire-accent);
+    font-weight: 600;
+}
+.hljs-string, .hljs-attr, .hljs-symbol, .hljs-bullet, .hljs-addition {
+    color: var(--bowire-accent-hover);
+}
+.hljs-number, .hljs-regexp {
+    color: #fbbf24;
+}
+.hljs-built_in, .hljs-type, .hljs-class .hljs-title, .hljs-builtin-name {
+    color: #34d399;
+}
+.hljs-function .hljs-title, .hljs-title.function_, .hljs-title.class_ {
+    color: #60a5fa;
+}
+.hljs-tag, .hljs-meta, .hljs-meta-keyword {
+    color: #c084fc;
+}
+.hljs-attribute, .hljs-property {
+    color: #818cf8;
+}
+.hljs-link {
+    color: var(--bowire-accent);
+    text-decoration: underline;
+}
+
+/* Tables — borderless rows + accent header */
+article table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 1rem 0;
+}
+article table th {
+    text-align: left;
+    padding: 8px 12px;
+    border-bottom: 2px solid var(--bowire-accent);
+    color: var(--bs-heading-color);
+    font-weight: 600;
+    font-size: 0.875rem;
+}
+article table td {
+    padding: 8px 12px;
+    border-bottom: 1px solid var(--bs-border-color);
+    font-size: 0.875rem;
+    color: var(--bs-body-color);
+}
+article table tr:hover td {
+    background: var(--bs-tertiary-bg);
+}
+
+/* Blockquotes */
+article blockquote {
+    border-left: 3px solid var(--bowire-accent);
+    background: var(--bs-tertiary-bg);
+    padding: 12px 16px;
+    margin: 1rem 0;
+    border-radius: 0 6px 6px 0;
+    color: var(--bs-secondary-color);
+}
+article blockquote p {
+    margin: 0;
+}
+
+/* ============================================================
+   Side TOC (left) — Bowire accent on active item
+   ============================================================ */
+nav.toc .nav-link.active,
+.toc-item.active > a,
+.toc .nav-item.active > .nav-link {
+    color: var(--bs-link-color) !important;
+    background: var(--bs-tertiary-bg);
+    border-left: 3px solid var(--bowire-accent);
+    padding-left: 9px;
+    font-weight: 600;
+}
+nav.toc .nav-link {
+    color: var(--bs-secondary-color);
+    transition: color 0.15s, background 0.15s;
+}
+nav.toc .nav-link:hover {
+    color: var(--bs-link-hover-color);
+}
+
+/* ============================================================
+   Affix nav (right side, "in this article") — accent active
+   ============================================================ */
+nav#affix .nav-link.active {
+    color: var(--bowire-accent) !important;
+    border-left: 2px solid var(--bowire-accent);
+    padding-left: 10px;
+}
+nav#affix .nav-link {
+    color: var(--bs-secondary-color);
+}
+nav#affix .nav-link:hover {
+    color: var(--bs-emphasis-color);
+}
+
+/* ============================================================
+   Edit-on-GitHub button — Bowire accent restyle
+   ============================================================ */
+.contribution .edit-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 12px;
+    background: transparent;
+    border: 1px solid var(--bowire-accent);
+    border-radius: 6px;
+    color: var(--bowire-accent);
+    font-size: 0.8125rem;
+    font-weight: 600;
+    text-decoration: none;
+    transition: all 0.15s;
+}
+.contribution .edit-link:hover {
+    background: rgba(var(--bowire-accent-rgb), 0.12);
+    border-color: var(--bowire-accent-hover);
+    color: var(--bowire-accent-hover);
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(var(--bowire-accent-rgb), 0.2);
+    text-decoration: none;
+}
+.contribution .edit-link::before {
+    content: '✎';
+    font-size: 0.875rem;
+}
+
+/* ============================================================
+   Search bar — Bowire tertiary surface + indigo focus ring
+   ============================================================ */
+#search-query, .search input {
+    background: var(--bs-tertiary-bg);
+    border: 1px solid var(--bs-border-color);
+    color: var(--bs-body-color);
+    border-radius: 6px;
+    transition: border-color 0.15s, box-shadow 0.15s;
+}
+#search-query:focus, .search input:focus {
+    border-color: var(--bowire-accent);
+    box-shadow: 0 0 0 3px rgba(var(--bowire-accent-rgb), 0.25);
+    outline: none;
+}
+#search-query::placeholder, .search input::placeholder {
+    color: var(--bs-tertiary-color);
+}
+
+/* ============================================================
+   Bowire footer — exact mirror of the marketing site's footer
+   ============================================================ */
+.bowire-docs-footer {
+    margin-top: 4rem;
+    padding: 40px 0 0;
+    border-top: 1px solid var(--bs-border-color);
+    color: var(--bs-secondary-color);
+    font-family: var(--bs-body-font-family);
+}
+.bowire-docs-footer-inner {
+    max-width: 1120px;
+    margin: 0 auto;
+    padding: 0 24px;
+}
+.bowire-docs-footer-top {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    gap: 48px;
+    align-items: start;
+}
+.bowire-docs-footer-brand {
+    /* Match site .footer-brand exactly: block flex so the tagline wraps
+       naturally below on narrow widths. 6px sits between a word-space
+       and a visible separator, so "Bowire is tied by Küstenlogik…"
+       still reads as one sentence. */
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 6px;
+}
+.bowire-docs-footer-logo {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-weight: 700;
+    font-size: 0.8125rem;
+    color: var(--bs-emphasis-color);
+    line-height: 1;
+}
+.bowire-docs-footer-logo-icon {
+    width: 17px;
+    height: 17px;
+    flex-shrink: 0;
+    display: block;
+}
+.bowire-docs-footer-tagline {
+    font-size: 0.8125rem;
+    color: var(--bs-tertiary-color);
+}
+.bowire-docs-footer-tagline a {
+    color: inherit;
+    text-decoration: none;
+    transition: color 0.15s;
+}
+.bowire-docs-footer-tagline a:hover {
+    color: var(--bowire-accent);
+}
+
+.bowire-docs-footer-nav {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(130px, auto));
+    gap: 32px 48px;
+}
+.bowire-docs-footer-nav-col {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+.bowire-docs-footer-nav-title {
+    font-size: 0.72rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--bs-tertiary-color);
+    margin-bottom: 4px;
+}
+.bowire-docs-footer-nav-col a {
+    color: var(--bs-secondary-color);
+    font-size: 0.875rem;
+    text-decoration: none;
+    transition: color 0.15s;
+}
+.bowire-docs-footer-nav-col a:hover {
+    color: var(--bowire-accent);
+}
+
+.bowire-docs-footer-bottom {
+    /* Full-width divider bar — border-top spans edge-to-edge; the
+       inner div wraps the copyright text with the same max-width
+       container the rest of the page uses so the text sits dead
+       centre on wide viewports. */
+    margin-top: 40px;
+    padding: 20px 0;
+    border-top: 1px solid var(--bs-border-color);
+    text-align: center;
+}
+.bowire-docs-footer-bottom-inner {
+    max-width: 1120px;
+    margin: 0 auto;
+    padding: 0 24px;
+    font-size: 0.8125rem;
+    color: var(--bs-tertiary-color);
+}
+/* Inline legal strip — © + Legal + Privacy on one line. Separators
+   are literal HTML &middot;'s in the markup (explicit beats CSS
+   pseudo-elements + survives screen-reader linearisation). */
+.bowire-docs-footer-legal-sep { margin: 0 4px; opacity: 0.5; }
+.bowire-docs-footer-legal-link { color: inherit; text-decoration: none; }
+.bowire-docs-footer-legal-link:hover { color: var(--bowire-accent); }
+
+@media (max-width: 768px) {
+    .bowire-docs-footer-top {
+        grid-template-columns: 1fr;
+        gap: 32px;
+    }
+    .bowire-docs-footer-nav {
+        grid-template-columns: repeat(3, 1fr);
+        gap: 24px;
+    }
+}
+@media (max-width: 540px) {
+    .bowire-docs-footer-nav {
+        grid-template-columns: 1fr 1fr;
+    }
+}
+
+/* ============================================================
+   Hero block — for docs/index.md or other landing pages that
+   want a marketing-style intro
+   ============================================================ */
+/* Online docs default: render the heading like every other page on
+   the marketing site (features-page-hero, legal-hero) — centered
+   text, no card frame, no background tint. The framed card-style
+   variant lives below under .bowire-docs-mode-standalone, where the
+   docs are read offline and the surround acts as a cover-page block. */
+.bowire-docs-hero {
+    margin: 0 0 2.5rem;
+    padding: 2rem 0 1.5rem;
+    text-align: center;
+    border: 0;
+    background: none;
+    border-radius: 0;
+    position: relative;
+    overflow: hidden;
+}
+.bowire-docs-hero::before {
+    content: none;
+}
+
+/* Standalone build (release zip / offline PDF) keeps the framed
+   cover-card look — there's no surrounding marketing site so the
+   border helps the title sit as a self-contained header. */
+body.bowire-docs-mode-standalone .bowire-docs-hero {
+    padding: 2.5rem 2rem;
+    text-align: left;
+    border: 1px solid var(--bs-border-color);
+    border-radius: 12px;
+    background: linear-gradient(135deg,
+        rgba(var(--bowire-accent-rgb), 0.06) 0%,
+        rgba(var(--bowire-accent-rgb), 0.02) 100%);
+}
+/* Standalone / PDF: the cover hero is its own page. Force a page
+   break after the hero so "Where to start" + the rest of the
+   landing index begin on a fresh page in the printed PDF. Without
+   this rule the hero and the first section share the title page
+   and the visual hierarchy ('this is the cover, the manual starts
+   overleaf') is lost. Doesn't affect the online HTML — only kicks
+   in for @media print, which is what Playwright's page.pdf() runs
+   under. */
+@media print {
+    body.bowire-docs-mode-standalone .bowire-docs-hero {
+        break-after: page;
+        page-break-after: always;
+    }
+}
+body.bowire-docs-mode-standalone .bowire-docs-hero::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    right: -10%;
+    width: 400px;
+    height: 400px;
+    background: radial-gradient(circle, rgba(var(--bowire-accent-rgb), 0.08) 0%, transparent 60%);
+    pointer-events: none;
+}
+
+/* Standalone / PDF cover badge — hidden by default (online docs),
+   revealed when the body has the mode-standalone class set by the
+   master template's {{#_standalone}} block. The .online-only pair
+   is the mirror: visible in the online docs, hidden in the standalone
+   zip / PDF so we don't ship duplicate titles or site-only banners. */
+/* Utility toggle classes — !important because they must beat any other
+   display rule attached to the same element (e.g. the hero badge also
+   carries .bowire-docs-standalone-badge with display:inline-block). */
+.standalone-only {
+    display: none !important;
+}
+.bowire-docs-mode-standalone .standalone-only {
+    display: block !important;
+}
+.online-only {
+    display: block;
+}
+.bowire-docs-mode-standalone .online-only {
+    display: none !important;
+}
+.bowire-docs-standalone-badge {
+    font-family: var(--bs-font-monospace);
+    font-size: 0.72rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    color: var(--bowire-accent);
+    background: rgba(var(--bowire-accent-rgb), 0.12);
+    border: 1px solid rgba(var(--bowire-accent-rgb), 0.35);
+    padding: 6px 14px;
+    border-radius: 999px;
+    margin: 0 auto 1.25rem;
+    display: inline-block;
+}
+
+.bowire-docs-hero-logo {
+    /* Hero wordmark — same big horizontal "Bowire knot" mark the
+       marketing site shows above its H1 on the landing page. Uses
+       currentColor so it flips white on dark / black on light in step
+       with the theme. Acts as the cover image on the standalone docs
+       and the PDF title page. Margin-x:auto centres it under the
+       online hero; the standalone override below pins it left so the
+       cover-card reads top-down. */
+    display: block;
+    width: clamp(220px, 50vw, 340px);
+    height: auto;
+    margin: 0 auto 1.25rem;
+    color: var(--bs-emphasis-color);
+}
+body.bowire-docs-mode-standalone .bowire-docs-hero-logo {
+    margin-left: 0;
+    margin-right: 0;
+}
+.bowire-docs-hero-title,
+.bowire-docs-hero h1 {
+    margin: 0 0 0.75rem;
+    padding: 0;
+    border: none;
+    display: block;
+    /* Match the marketing-site hero scale (features.html etc.) so the
+       online docs landing page has the same visual weight as siblings
+       on bowire.io. The standalone override below restores the smaller
+       cover-card scale for the PDF / offline ZIP build. */
+    font-size: clamp(2.25rem, 5vw, 3.25rem);
+    font-weight: 800;
+    letter-spacing: -0.02em;
+    background: linear-gradient(135deg, var(--bs-emphasis-color) 0%, var(--bowire-accent-hover) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+body.bowire-docs-mode-standalone .bowire-docs-hero-title,
+body.bowire-docs-mode-standalone .bowire-docs-hero h1 {
+    font-size: clamp(1.75rem, 4vw, 2.25rem);
+}
+.bowire-docs-hero-tagline {
+    /* Centre the tagline under the online hero — the parent
+       .bowire-docs-hero is text-align:center, but a block-level <p>
+       with max-width still needs auto margins to actually centre. The
+       standalone override below pins it left for the cover-card. */
+    margin: 0 auto 1.5rem;
+    color: var(--bs-secondary-color);
+    font-size: 1.125rem;
+    line-height: 1.5;
+    max-width: 880px;
+}
+body.bowire-docs-mode-standalone .bowire-docs-hero-tagline {
+    margin-left: 0;
+    margin-right: 0;
+    font-size: 1rem;
+}
+
+/* Alternating-band sections on the docs landing page (docs/index.md).
+   Mirrors the .community-section / .community-section-alt pattern from
+   the marketing site so the docs hero → 'Where to start' → 'About these
+   docs' progression has the same visual rhythm as features.html /
+   community.html.
+   Full-bleed background via the negative-margin trick — the page sits
+   inside DocFX's article column with a max-width, but the alt-band
+   should fill viewport edge-to-edge. `calc(50% - 50vw)` is the offset
+   from the column edge to the viewport edge; matching positive padding
+   restores the inner content to its original width. */
+.bowire-docs-section {
+    padding: 56px 0;
+}
+.bowire-docs-section-alt {
+    background: rgba(var(--bowire-accent-rgb, 99, 102, 241), 0.04);
+    margin-left: calc(50% - 50vw);
+    margin-right: calc(50% - 50vw);
+    padding-left: calc(50vw - 50%);
+    padding-right: calc(50vw - 50%);
+}
+:root[data-theme="dark"] .bowire-docs-section-alt,
+:root[data-bs-theme="dark"] .bowire-docs-section-alt {
+    background: rgba(var(--bowire-accent-rgb, 99, 102, 241), 0.07);
+}
+/* Match the marketing-site h2 weight so the docs landing page reads as
+   part of the same visual system as features.html / community.html. */
+.bowire-docs-section h2 {
+    font-size: clamp(1.5rem, 3vw, 2rem);
+    font-weight: 800;
+    letter-spacing: -0.02em;
+    margin: 0 0 18px;
+    background: linear-gradient(135deg, var(--bs-emphasis-color) 0%, var(--bowire-accent-hover) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    border: none;
+    padding: 0;
+}
+
+.bowire-docs-hero-cta {
+    display: flex;
+    gap: 12px;
+    flex-wrap: wrap;
+}
+.bowire-cta-primary,
+.bowire-cta-secondary {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 10px 20px;
+    border-radius: 8px;
+    font-size: 0.875rem;
+    font-weight: 600;
+    text-decoration: none;
+    transition: all 0.15s;
+}
+.bowire-cta-primary {
+    background: var(--bowire-accent);
+    color: #fff;
+    border: 1px solid var(--bowire-accent);
+}
+.bowire-cta-primary:hover {
+    background: var(--bowire-accent-hover);
+    border-color: var(--bowire-accent-hover);
+    color: #fff;
+    text-decoration: none;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(var(--bowire-accent-rgb), 0.3);
+}
+.bowire-cta-secondary {
+    background: transparent;
+    color: var(--bs-body-color);
+    border: 1px solid var(--bs-border-color);
+}
+.bowire-cta-secondary:hover {
+    border-color: var(--bowire-accent);
+    color: var(--bowire-accent);
+    text-decoration: none;
+    transform: translateY(-1px);
+}
+
+/* Unify the code-snippet copy button with the marketing site.
+   DocFX injects <a><i class="bi bi-clipboard"></i></a> (Bootstrap Icons
+   font). The site uses inline Lucide-style SVGs (two overlapping
+   rectangles for copy, a checkmark for "copied"). Replace the
+   BI-font glyph with a CSS mask pointing at the same Lucide SVG so
+   docs and site show the identical icon. */
+.bi-clipboard::before,
+.bi-check::before {
+    content: '';
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    background-color: currentColor;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    mask-position: center;
+    vertical-align: -0.125em;
+}
+.bi-clipboard::before {
+    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg 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'><rect x='9' y='9' width='13' height='13' rx='2'/><path d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/></svg>");
+            mask-image: url("data:image/svg+xml;utf8,<svg 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'><rect x='9' y='9' width='13' height='13' rx='2'/><path d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/></svg>");
+}
+.bi-check::before {
+    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
+            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
+}
+
+/* ------------------------------------------------------------------
+   View-transition theme toggle (mirrors site/assets/css/style.css)
+   ------------------------------------------------------------------
+   Chromium's View Transitions API captures before/after DOM snapshots;
+   we animate the incoming one as an expanding clip-path circle from
+   the theme button's centre, same pattern as deepwiki.com. Non-
+   supporting browsers (Firefox as of mid-2026) fall through to an
+   instant swap because the inline script never starts a transition.
+-------------------------------------------------------------------*/
+::view-transition-old(root),
+::view-transition-new(root) {
+    animation: none;
+    mix-blend-mode: normal;
+}
+::view-transition-old(root) { z-index: 0; }
+::view-transition-new(root) {
+    z-index: 1;
+    /* 900 ms — matches site/assets/css/style.css so the switch feels
+       identical across surfaces. 550 ms looked "did anything happen?"
+       on wider monitors. */
+    animation: bowire-docs-theme-reveal 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
+}
+@keyframes bowire-docs-theme-reveal {
+    from { clip-path: circle(0% at var(--theme-transition-x, 50%) var(--theme-transition-y, 0%)); }
+    to   { clip-path: circle(150vmax at var(--theme-transition-x, 50%) var(--theme-transition-y, 0%)); }
+}
+@media (prefers-reduced-motion: reduce) {
+    ::view-transition-new(root) { animation: none; }
+}
+
+/* ==========================================================
+   Theme-aware images / videos / objects in docs pages.
+   Mirrors the Jekyll site's CSS so docs and marketing stay in
+   lockstep — the DocFX template flips data-theme on <html>
+   exactly the same way the marketing site does.
+   ========================================================== */
+:root[data-theme="dark"] .theme-img-light,
+:root[data-theme="dark"] .theme-video-light {
+    display: none !important;
+}
+:root[data-theme="light"] .theme-img-dark,
+:root[data-theme="light"] .theme-video-dark {
+    display: none !important;
+}
+@media (prefers-color-scheme: dark) {
+    :root[data-theme="auto"] .theme-img-light,
+    :root[data-theme="auto"] .theme-video-light,
+    :root:not([data-theme]) .theme-img-light,
+    :root:not([data-theme]) .theme-video-light {
+        display: none !important;
+    }
+}
+@media (prefers-color-scheme: light) {
+    :root[data-theme="auto"] .theme-img-dark,
+    :root[data-theme="auto"] .theme-video-dark,
+    :root:not([data-theme]) .theme-img-dark,
+    :root:not([data-theme]) .theme-video-dark {
+        display: none !important;
+    }
+}
+
+/* Anatomy SVG — width fits the article column, fall-back to img on
+   prerender / object-blocked browsers. background:transparent lets
+   the SVG's own theme-coloured backdrop show through instead of the
+   browser-default white that <object> renders against. The lower
+   margin gives the click-map breathing room before the legend list
+   that follows in ui-guide/index.md. */
+.theme-img-dark, .theme-img-light,
+object.theme-img-dark, object.theme-img-light {
+    display: block;
+    max-width: 100%;
+    height: auto;
+    background: transparent;
+    margin: 0 auto 32px;
+}
+
+/* The UI anatomy <picture> uses prefers-color-scheme to pick the
+   right SVG natively. The two overrides below honour the explicit
+   theme toggle in the DocFX header — when the user picks "Dark" or
+   "Light" we swap the rendered image via `content: url(...)`, which
+   replaces an <img>'s source through CSS and is supported in every
+   evergreen browser. The article column already constrains width, so
+   the picture itself just needs the centring margin. */
+.ui-anatomy-picture {
+    display: block;
+    max-width: 100%;
+    margin: 0 auto 32px;
+}
+.ui-anatomy-img {
+    display: block;
+    width: 100%;
+    height: auto;
+    background: transparent;
+}
+:root[data-theme="dark"] .ui-anatomy-img {
+    content: url("../images/ui-anatomy-dark.svg");
+}
+:root[data-theme="light"] .ui-anatomy-img {
+    content: url("../images/ui-anatomy-light.svg");
+}
+
+/* Print stylesheet — strip chrome so saved PDFs render the content
+   without the docs nav + sidebar. Custom reading-mode toggle
+   (initial #119 work) was dropped in favour of the browser's native
+   reader-mode affordance; the print-friendly layout still has
+   independent value. */
+@media print {
+    .bowire-docs-header,
+    .bowire-docs-sidebar,
+    .bowire-docs-toc,
+    .bowire-docs-affix,
+    .bowire-docs-footer,
+    #breadcrumb,
+    .toc-toggle {
+        display: none !important;
+    }
+    .bowire-docs-main,
+    .bowire-docs-content,
+    article {
+        max-width: none;
+    }
+}